:root{
  --grund:#faf9f7; --flaeche:#fff; --flaeche2:#f4f2ee;
  --text:#1a1a1a; --gedaempft:#6b6560; --linie:#e6e2dc; --linie2:#d6d0c7;
  --akzent:#e8540a; --akzent-weich:#fdefe6;
  --frei:#2d6a4f; --belegt:#a8332b; --offen:#b47318;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--grund);color:var(--text);font-family:var(--sans);
  font-size:14.5px;line-height:1.55;display:flex;flex-direction:column;min-height:100vh}

/* ---- Kopf ---- */
.kopf{background:var(--flaeche);border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:20}
.kopf-innen{max-width:78rem;margin:0 auto;padding:.7rem clamp(.9rem,3vw,2rem);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.marke img{height:30px;width:auto;display:block}
.marke .titel{font-weight:700;letter-spacing:-.01em;font-size:1.02rem;white-space:nowrap}
.navi{display:flex;gap:.2rem;margin-left:auto;flex-wrap:wrap}
.navi a{padding:.4rem .7rem;border-radius:3px;text-decoration:none;color:var(--gedaempft);
  font-size:.92rem;font-weight:500}
.navi a:hover{background:var(--flaeche2);color:var(--text)}
.navi a.hier{color:var(--akzent);background:var(--akzent-weich)}
.ich{font-size:.82rem;color:var(--gedaempft);display:flex;align-items:center;gap:.5rem}
.ich .kuerzel{font-family:var(--mono);font-weight:700;color:var(--akzent);
  border:1px solid var(--akzent);border-radius:2px;padding:.05rem .35rem;font-size:.75rem}

/* ---- Inhalt ---- */
main{flex:1;max-width:78rem;width:100%;margin:0 auto;
  padding:clamp(1.2rem,3vw,2.2rem) clamp(.9rem,3vw,2rem) 3rem}
h1{font-size:clamp(1.35rem,3.4vw,1.7rem);letter-spacing:-.02em;margin-bottom:.3rem}
h2{font-size:1.15rem;margin-bottom:.7rem;letter-spacing:-.01em}
.unter{color:var(--gedaempft);margin-bottom:1.6rem}

/* ---- Stapel ---- */
.stapel{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  margin-bottom:2rem}
.kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;
  padding:1.1rem 1.2rem;text-decoration:none;color:inherit;display:block;
  border-left:3px solid var(--linie2)}
.kachel:hover{border-color:var(--linie2);box-shadow:0 1px 6px rgba(0,0,0,.05)}
.kachel.wichtig{border-left-color:var(--akzent)}
.kachel.warnung{border-left-color:var(--belegt)}
.kachel .zahl{font-size:1.7rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.kachel .was{color:var(--gedaempft);font-size:.9rem;margin-top:.3rem}

/* ---- Tabelle ---- */
.rollt{overflow-x:auto;border:1px solid var(--linie);border-radius:4px;
  background:var(--flaeche)}
table{border-collapse:collapse;width:100%;min-width:46rem;font-size:.84rem}
th,td{text-align:left;padding:.42rem .6rem;border-bottom:1px solid var(--linie)}
thead th{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gedaempft);background:var(--flaeche2);
  white-space:nowrap;font-weight:600}
tbody tr:hover{background:var(--flaeche2)}
tbody tr:last-child td{border-bottom:0}
tr.fremd{color:var(--gedaempft)}
td a{color:var(--text);text-decoration:none;font-weight:600}
td a:hover{color:var(--akzent)}

/* ---- Marken ---- */
.mark{display:inline-block;font-size:.7rem;font-weight:600;padding:.1rem .4rem;
  border-radius:2px;white-space:nowrap;font-family:var(--mono);letter-spacing:.03em}
.mark.frei{background:#e7f3ec;color:var(--frei)}
.mark.belegt{background:#fbeae8;color:var(--belegt)}
.mark.offen{background:#fcf3e3;color:var(--offen)}
.mark.grau{background:var(--flaeche2);color:var(--gedaempft)}
.mark.akzent{background:var(--akzent-weich);color:var(--akzent)}

/* ---- Formulare ---- */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;
  padding:1.3rem;margin-bottom:1.2rem}
label{display:block;font-size:.8rem;font-weight:600;color:var(--gedaempft);
  margin-bottom:.25rem}
input[type=text],input[type=email],input[type=password],input[type=number],
select,textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--linie2);
  border-radius:3px;font-family:inherit;font-size:.95rem;background:var(--flaeche);
  color:var(--text)}
textarea{min-height:12rem;font-family:var(--mono);font-size:.85rem;line-height:1.55;
  resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--akzent);
  outline-offset:1px;border-color:var(--akzent)}
.feld{margin-bottom:.9rem}
.reihe{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.knopf{display:inline-block;padding:.55rem 1.1rem;border-radius:3px;border:1px solid var(--akzent);
  background:var(--akzent);color:#fff;font-weight:600;font-size:.92rem;cursor:pointer;
  text-decoration:none;font-family:inherit}
.knopf:hover{background:#d24a08}
.knopf.leise{background:var(--flaeche);color:var(--text);border-color:var(--linie2)}
.knopf.leise:hover{background:var(--flaeche2)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopfreihe{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}

.fehler{background:#fbeae8;border-left:3px solid var(--belegt);padding:.7rem .9rem;
  border-radius:0 3px 3px 0;margin-bottom:1rem;font-size:.92rem}
.hinweis{background:var(--akzent-weich);border-left:3px solid var(--akzent);
  padding:.8rem 1rem;border-radius:0 3px 3px 0;margin-bottom:1.2rem;font-size:.93rem}

/* ---- Anmeldung ---- */
.mitte{max-width:24rem;margin:min(9vh,5rem) auto;width:100%}
.mitte .karte{padding:1.8rem}
.mitte .vbc{text-align:center;margin-bottom:1.4rem}
.mitte .vbc img{height:52px}

/* ---- Fuss ---- */
.fuss{border-top:1px solid var(--linie);background:var(--flaeche);
  padding:1.4rem clamp(.9rem,3vw,2rem)}
.fuss-innen{max-width:78rem;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}
.leadmarke{display:flex;align-items:center;gap:.45rem}
.leadmarke .wort{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.leadmarke img{height:22px;width:auto;display:block}
.fuss .klein{font-size:.78rem;color:var(--gedaempft)}

@media(max-width:36rem){
  .navi a{padding:.35rem .5rem;font-size:.86rem}
  .marke .titel{font-size:.92rem}
  .ich .name{display:none}
}

/* ---- Aufklappbare Leadzeile ---- */
tr.kopfzeile{cursor:pointer}
tr.kopfzeile:hover{background:var(--flaeche2)}
tr.kopfzeile .pfeil{display:inline-block;width:.9rem;color:var(--gedaempft);
  transition:transform .15s ease;font-size:.75rem}
tr.kopfzeile.offen .pfeil{transform:rotate(90deg);color:var(--akzent)}
tr.kopfzeile.offen{background:var(--akzent-weich)}
tr.faltung{display:none}
tr.faltung.offen{display:table-row}
tr.faltung > td{background:var(--flaeche2);padding:0;
  border-bottom:2px solid var(--linie2)}
.faltinhalt{padding:1.1rem 1.3rem;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.faltblock h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gedaempft);margin-bottom:.45rem;font-weight:600}
.faltblock .zeile{font-size:.88rem;margin-bottom:.25rem;display:flex;gap:.5rem}
.faltblock .zeile .was{color:var(--gedaempft);min-width:5.5rem;flex:none}
.faltblock p{font-size:.88rem;color:#444;margin:0}
.faltblock a{color:var(--akzent)}
.faltwerkzeuge{grid-column:1/-1;border-top:1px solid var(--linie);
  padding-top:.9rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.faltwerkzeuge .knopf{padding:.4rem .85rem;font-size:.85rem}
.leer{color:var(--gedaempft);font-style:italic}
@media(max-width:40rem){ .faltinhalt{grid-template-columns:1fr} }

/* ---- Blättern ---- */
.blaettern{display:flex;gap:.4rem;align-items:center;justify-content:center;
  flex-wrap:wrap;margin-top:1rem;padding:.8rem;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:4px}
.blaettern .knopf{padding:.35rem .8rem;font-size:.85rem}
.blaettern .stand{font-size:.83rem;color:var(--gedaempft);margin:0 .6rem;
  font-variant-numeric:tabular-nums}

/* Was eine Erklärung trägt, zeigt es auch */
[title]{cursor:help}
.knopf[title],a[title],form [title]{cursor:pointer}
.knopf:disabled[title]{cursor:not-allowed}