/* TCC-App — nur, was es so nur hier gibt. Grundwerte, Leiste, Knöpfe, Karten
   kommen aus tcc-ui.css (Hausstil, Quelle Dropbox/…/TCC/tcc-ui/). */

body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
.kicker{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}

/* ---------- Seitenleiste: Sektionen zum Auf- und Zuklappen ---------- */
.topnav .nav-titel{display:none}
@media (max-width:820px){ .topnav .nav-titel{display:block; font-weight:600; font-size:15px} }
.topnav .tabs a.app-dash{display:flex; gap:10px; align-items:center}
.topnav .tabs a.app-dash img{flex:none}
.app-sektion{margin-top:6px}
.app-sektion > summary{
  list-style:none; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer;
  user-select:none; color:var(--ink);
}
.app-sektion > summary::-webkit-details-marker{display:none}
.app-sektion > summary:hover{background:var(--inset)}
.app-sek-ico{width:24px; height:24px; border-radius:7px; background:#fff; border:1px solid #efe7dc; display:grid; place-items:center; flex:none}
.app-sek-name{flex:1; font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#4a3f37}
.app-sek-name small{font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--faint)}
.app-sek-pfeil{width:16px; height:16px; flex:none; transition:transform .15s;
  background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237a6c61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")}
.app-sektion:not([open]) .app-sek-pfeil{transform:rotate(-90deg)}
.app-sek-liste{display:flex; flex-direction:column; gap:1px; margin:2px 0 4px}
.topnav .tabs .app-sek-liste a{padding-left:44px; font-size:13.5px}
.topnav .tabs .app-sek-liste a.active{box-shadow:inset 3px 0 0 var(--sek), 0 1px 3px rgba(0,0,0,.08)}
.topnav .tabs a.app-einst{margin-top:14px; font-size:13px}
.app-abmelden{margin:0}
@media (max-width:820px){
  .topnav .tabs .app-sek-liste a{padding-left:40px}
  .app-sektion > summary{padding:12px 10px}
}

/* ---------- Inhalt ---------- */
.app-main{padding:28px 36px 56px; min-width:0}
@media (max-width:820px){ .app-main{padding:20px 16px 48px} }
.dash{max-width:1180px; display:flex; flex-direction:column; gap:20px}
.dash .pagehead{margin-bottom:0}
.dash-unter{font-size:16px; color:var(--soft)}
.dash-reihe{display:grid; gap:18px; align-items:start}
.dash-reihe--zwei{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.dash-reihe--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){ .dash-reihe--drei{grid-template-columns:1fr 1fr} }
@media (max-width:900px){ .dash-reihe--zwei, .dash-reihe--drei{grid-template-columns:1fr} }

.dash-liste{overflow:hidden}
.dash-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 18px 6px}
.dash-kopf b{font-size:14px}
.dash-kopf span{font-size:12.5px; color:var(--faint)}
.dash-zeile{display:flex; align-items:center; gap:12px; padding:11px 18px; border-top:1px solid var(--line2)}
.dash-kopf + .dash-zeile{border-top:0}
.dash-zeile-text{flex:1; min-width:0}
.dash-zeile-text b{display:block; font-weight:600}
.dash-zeile-text small{display:block; font-size:13px; color:var(--soft)}
.dash-zeit{font-variant-numeric:tabular-nums; width:44px; flex:none}
.dash-wann{font-size:13px; color:var(--faint); width:96px; flex:none; font-variant-numeric:tabular-nums}
.dash-mehr{font-size:13px; font-weight:600; white-space:nowrap}
.dash-leer{color:var(--faint); font-size:14px}
.dash-fuss{background:#fbf8f3}
.dash-fuss small{color:var(--soft); font-size:13px}
.dash-zeile .punkt{width:8px; height:8px}

.dash-karte{overflow:hidden; padding:16px 18px; display:flex; flex-direction:column; gap:12px; border-top:4px solid var(--sek)}
.dash-karte-kopf{display:flex; align-items:center; gap:10px}
.dash-karte-kopf b{font-size:15px}
.dash-karte-kopf a{margin-left:auto; font-size:13px; font-weight:600; color:var(--sek); white-space:nowrap}
.dash-zahlen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.dash-zahlen small, .dash-klein{font-size:13px; color:var(--soft)}
.dash-wert{font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15}
.dash-karte-fuss{font-size:13px; color:var(--soft); border-top:1px solid var(--line2); padding-top:10px}
.dash-platz{padding:22px 24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.dash-platz p{margin:0; font-size:15px; color:var(--soft)}
.dash-platz .btn{margin-top:6px}

/* ---------- Anmeldung ---------- */
.app-login-seite{min-height:100vh; display:grid; place-items:center; padding:24px; box-sizing:border-box}
.app-login{width:100%; max-width:380px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px; box-shadow:0 8px 30px rgba(60,42,28,.08)}
.app-login-marke{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.app-login-marke b{display:block; font-size:15px}
.app-login-marke i{display:block; font-style:normal; font-size:12px; color:var(--faint)}
.brandlogo-kachel{width:38px; height:38px; border-radius:10px; background:var(--bg); border:1px solid #efe7dc; display:grid; place-items:center}
.app-login h1{font-family:var(--head); font-weight:600; font-size:28px; margin:0 0 16px}
.app-login form{display:flex; flex-direction:column; gap:14px}
.app-login .feld input{font-size:15px; padding:10px 12px}
.app-login .btn{width:100%; padding:11px; font-size:15px; font-weight:600; margin-top:4px}
.app-fehler{background:var(--bad-dim); color:var(--bad-text); border-radius:8px; padding:9px 12px; font-size:13.5px; margin:0 0 14px}

/* ---------- Termine markieren ---------- */
.termin-wann{width:104px; flex:none; font-variant-numeric:tabular-nums; font-weight:600}
.termin-knoepfe{display:flex; gap:8px; margin:0}
.termin-zeile form{margin:0}
.btn.termin-ja{color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 35%, white)}
.btn.termin-ja:hover{background:var(--ok-dim)}
.btn.termin-nein{color:var(--bad-text)}
.btn.termin-nein:hover{background:var(--bad-dim)}
.notiz-ok{background:var(--ok-dim); color:var(--ok-text); border-radius:8px; padding:9px 12px; font-size:13.5px}
@media (max-width:700px){ .termin-zeile{flex-wrap:wrap} .termin-knoepfe{width:100%} }

/* ---------- Navigation anpassen ---------- */
.nav-block{overflow:hidden; border-left:4px solid var(--sek)}
.nav-block-kopf{display:flex; align-items:center; gap:10px; padding:12px 16px; background:#fbf8f3; border-bottom:1px solid var(--line2); flex-wrap:wrap}
.nav-block-kopf b{font-size:14px}
.nav-zeile{display:flex; align-items:center; gap:10px; padding:8px 16px; border-top:1px solid var(--line2); flex-wrap:wrap}
.nav-block-kopf + .nav-zeile{border-top:0}
.nav-name{flex:1; min-width:140px}
.nav-name small{color:var(--faint)}
.nav-aus .nav-name{color:var(--faint)}
.nav-block-knoepfe{display:flex; gap:6px; align-items:center; margin-left:auto; flex-wrap:wrap}
.nav-form{margin:0}
.nav-select{padding:6px 8px; font-size:13px}

/* ---------- Wer sieht was ---------- */
.rechte-raster{display:grid; grid-template-columns:minmax(150px,1.4fr) repeat(var(--spalten), minmax(64px,1fr)); align-items:center; gap:0; overflow-x:auto}
.rechte-raster > *{padding:10px 12px; border-top:1px solid var(--line2)}
.rechte-raster > :not(.rechte-person):not(.rechte-zelle){border-top:0}
.rechte-kopf{font-size:12px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:6px; justify-content:center; text-align:center}
.rechte-zelle{display:flex; justify-content:center}
.rechte-knopf{width:34px; height:30px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--faint); font:inherit; font-weight:600; cursor:pointer}
.rechte-knopf.an{background:var(--ok-dim); color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 35%, white)}
.rechte-knopf:hover{border-color:var(--ink)}

/* ---------- Passkeys ---------- */
.app-login-passkey{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.app-login-passkey .btn{justify-content:center}
.app-login-oder{text-align:center; color:var(--faint); font-size:12.5px; position:relative}
.zugang-anlegen{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; width:100%; margin:0}
.zugang-anlegen .feld{flex:1; min-width:200px}