:root{--ink:#272727;--paper:#E1E2DC;--pink:#FFA7E2;--gold:#B29261;--ink-soft:rgba(39,39,39,.62);--ink-faint:rgba(39,39,39,.34);--hair:rgba(39,39,39,.16);--white:#F6F6F3}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
body{background:var(--paper);color:var(--ink);font-family:'Overused Grotesk',system-ui,sans-serif;font-size:15px;line-height:1.5;font-feature-settings:"ss01";min-height:100vh}
h1,h2,h3,.disp{font-family:'Queering','Overused Grotesk',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:.95}
a{color:inherit}
.top{background:var(--ink);color:var(--paper);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top .logo{font-family:'Queering',sans-serif;font-weight:900;font-size:20px;text-transform:uppercase;letter-spacing:.01em}
.top .logo .p{color:var(--pink)}
.top .who{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(225,226,220,.7);font-weight:700}
.top .who a{color:var(--pink);text-decoration:none;margin-left:12px}
.nav{display:flex;gap:8px;flex-wrap:wrap;padding:14px 24px;border-bottom:1.4px solid var(--ink)}
.nav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;padding:8px 12px;border:1px solid var(--hair);color:var(--ink-soft);text-decoration:none;background:var(--white)}
.nav a.on{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.nav .sp{flex:1}
main{max-width:1100px;margin:0 auto;padding:22px 24px 60px}
.kick{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:6px}
h1.t{font-size:32px;margin-bottom:6px}
h1.t .p{color:var(--pink)}
.sub{color:var(--ink-soft);margin-bottom:18px}
.cards{display:grid;gap:14px;margin-bottom:18px}
.c2{grid-template-columns:1fr 1fr}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.c2,.c3,.c4{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--hair);padding:16px 18px}
.card.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.dark .lab{color:var(--pink)}
.card .lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--gold);margin-bottom:8px}
.num{font-family:'Queering',sans-serif;font-weight:900;font-size:30px;line-height:.95}
.num.amt{font-size:34px}
.small{font-size:13px;line-height:1.45}
.soft{color:var(--ink-soft)}
.card.dark .soft{color:rgba(225,226,220,.66)}
table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 14px}
th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;border-bottom:1.4px solid var(--ink);padding:0 10px 8px 0;vertical-align:bottom}
td{padding:9px 10px 9px 0;border-bottom:1px solid var(--hair);vertical-align:top}
tr:last-child td{border-bottom:1.4px solid var(--ink)}
td.k{font-weight:700}
td.r,th.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.no{color:var(--ink-soft)}
.tag{display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:3px 7px;background:var(--ink);color:var(--pink);white-space:nowrap}
.tag.g{background:var(--gold);color:var(--ink)}
.tag.p{background:var(--pink);color:var(--ink)}
.tag.o{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.tag.w{background:transparent;color:var(--ink-soft);border:1px solid var(--hair)}
.slot{background:var(--white);border:1px solid var(--hair);padding:14px 18px;margin-bottom:12px}
.slot .sh{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.slot .sh h3{font-size:16px}
.slot .amt{font-family:'Queering',sans-serif;font-weight:900;font-size:22px}
.slot .how{color:var(--ink-soft);font-size:13px;margin:2px 0 8px}
/* Je Termin genau drei Zellen: Datum, Anwesende, Hinweis. Mit vier Spalten rutschte jeder Termin eine Spalte weiter. */
.rows{display:grid;grid-template-columns:90px 110px 1fr;font-size:13.5px;font-variant-numeric:tabular-nums}
.rows>span{padding:5px 12px 5px 0;border-bottom:1px solid var(--linie)}
.rows>span:nth-last-child(-n+3){border-bottom:0}
.rows .d{font-weight:700}
.rows .v{color:var(--ink-soft)}
.rows .note{color:var(--ink)}
.rows .soft{color:var(--ink-soft)}
.rows .vertreten{color:var(--bad)}
@media(max-width:600px){.rows>span{border-bottom:0;padding-bottom:0} .rows .note{grid-column:1/-1;padding:0 0 5px;border-bottom:1px solid var(--linie)}}
.sum{display:flex;justify-content:space-between;align-items:baseline;border-top:1.4px solid var(--ink);border-bottom:1.4px solid var(--ink);padding:14px 0;margin:6px 0 16px;flex-wrap:wrap;gap:10px}
.sum .amt{font-family:'Queering',sans-serif;font-weight:900;font-size:30px}
.btn{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;padding:12px 18px;background:var(--ink);color:var(--pink);border:1.4px solid var(--ink);text-decoration:none;cursor:pointer;font-family:inherit}
.btn.o{background:transparent;color:var(--ink)}
.btn.p{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.btn.sm{padding:7px 11px;font-size:11px}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 18px}
.hint{background:var(--white);border-left:4px solid var(--pink);padding:10px 14px;color:var(--ink-soft);font-size:13.5px;margin:0 0 18px}
.hint.warn{border-left-color:var(--gold);color:var(--ink)}
.band{background:var(--ink);color:var(--paper);padding:18px 22px;margin:0 0 18px}
.band .disp{font-size:20px;line-height:1.05;color:var(--paper)}
.band .disp .p{color:var(--pink)}
.band p{color:rgba(225,226,220,.72);margin-top:8px;font-size:14px}
form.f{display:grid;gap:12px;max-width:560px}
form.f label{display:grid;gap:4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-soft)}
form.f input,form.f select,form.f textarea{font:inherit;font-size:15px;padding:10px 12px;border:1.4px solid var(--ink);background:var(--white);color:var(--ink);letter-spacing:0;text-transform:none;font-weight:400}
form.f input:focus-visible,form.f select:focus-visible,form.f textarea:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
form.f .help{font-size:12px;color:var(--ink-soft);letter-spacing:0;text-transform:none;font-weight:400}
.inline{display:inline}
.flash{background:var(--pink);color:var(--ink);padding:10px 14px;margin:0 0 16px;font-weight:600}
.login{max-width:460px;margin:60px auto;padding:0 24px}
.login .logo{font-family:'Queering',sans-serif;font-weight:900;font-size:28px;text-transform:uppercase;margin-bottom:6px}
.login .logo .p{color:var(--pink)}
.test{background:var(--white);border:1px dashed var(--gold);padding:12px 14px;font-size:13px;margin-top:16px}
.test a{word-break:break-all}
footer{padding:20px 24px;border-top:1.4px solid var(--ink);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.mono{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.zwei{grid-template-columns:1fr}}
.ok{color:#2f6b3a;font-weight:700}
.rot{color:#9b2c2c;font-weight:700}
.chip{display:inline-block;background:var(--paper);border:1px solid var(--hair);padding:2px 8px;font-size:12px;margin:2px 4px 2px 0}

/* Büro-Liste: Kurse und Termine je Coach ausklappen */
td.auf{width:26px;padding-right:4px}
button.auf{border:1px solid var(--hair);background:var(--white);width:26px;height:26px;cursor:pointer;font-size:13px;line-height:1;padding:0;color:var(--ink)}
button.auf:hover{border-color:var(--ink)}
tr.detail td{background:var(--paper);padding:10px 0 14px;border-bottom:1px solid var(--hair)}
tr.detail .slot{margin-bottom:8px;padding:10px 14px}
tr.detail .slot .amt{font-size:18px}
tr.detail .rows{font-size:13px}
@media(max-width:760px){#liste{display:block;overflow-x:auto} tr.detail{display:block} tr.detail td:first-child{display:none} tr.detail td[colspan]{display:block;width:calc(100vw - 48px);padding-right:0}}
.umgebung{background:#9b2c2c;color:#fff;font-family:'Queering','Overused Grotesk',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding:7px 24px;text-align:center}

/* ------------------------------------------------------------------ Überarbeitung 22.09.2026: Lesbarkeit und klare Navigation */
body{font-size:16px;line-height:1.55}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:50}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.top{padding:14px 24px}
.top .logo{text-decoration:none;font-size:19px}
.top .who{display:flex;align-items:center;gap:10px;font-size:11.5px}
.top .who .rolle{border:1px solid rgba(225,226,220,.4);padding:3px 7px;letter-spacing:.12em}
.top .who a{margin-left:4px;padding:6px 2px}

/* Navigation: ein Band, aktiver Punkt deutlich, auf dem Handy seitlich scrollbar */
.nav{padding:0;border-bottom:1.4px solid var(--ink);background:var(--white);overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-innen{display:flex;gap:2px;align-items:stretch;max-width:1100px;margin:0 auto;padding:0 16px;min-height:52px}
.nav a{display:flex;align-items:center;font-size:13px;letter-spacing:.06em;text-transform:none;font-weight:700;padding:14px 14px;border:0;border-bottom:3px solid transparent;background:none;color:var(--ink-soft);white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a.on{background:none;color:var(--ink);border-bottom-color:var(--pink);font-weight:800}
.nav a.leise{font-weight:600;color:var(--ink-faint)}
.nav a.leise.on{color:var(--ink)}
main{max-width:1000px;padding:28px 24px 72px}

/* Kopfzeile der Seite */
.kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:22px}
h1.t{font-size:38px;margin:0}
.kick{margin-bottom:2px}
.monate{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border:1px solid var(--hair);background:var(--white);font-size:13px;font-weight:700;text-decoration:none}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Die Summe: das Wichtigste zuerst */
.summe{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--ink);color:var(--paper);padding:22px 26px;margin-bottom:26px}
.summe .lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--pink);margin-bottom:6px}
.summe .betrag{font-family:'Queering',sans-serif;font-weight:900;font-size:46px;line-height:1;display:flex;align-items:baseline;gap:10px}
.summe .betrag .netto{font-family:'Overused Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(225,226,220,.7)}
.summe .small{margin-top:8px;color:rgba(225,226,220,.78)}
.summe .soft{color:rgba(225,226,220,.7)}
.summe .tun{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.summe .tun .small{margin:0;color:rgba(225,226,220,.7)}
.summe.warten{background:var(--white);color:var(--ink);border:1px solid var(--hair)}
.summe.warten .lab{color:var(--gold)}
.summe.warten .betrag .netto,.summe.warten .small,.summe.warten .soft{color:var(--ink-soft)}
.btn.gross{font-size:15px;padding:14px 22px}

h2.ab{font-size:15px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-soft);margin:26px 0 12px;font-family:'Overused Grotesk',sans-serif}

/* Kurskarten */
.slot{padding:18px 20px;margin-bottom:14px}
.slot .sh{align-items:center;margin-bottom:2px}
.slot .sh h3{font-size:17px;letter-spacing:.01em}
.slot .amt{font-size:24px}
.slot .meta{font-size:14px;color:var(--ink);margin-bottom:4px}
.slot .how{font-size:13px;color:var(--ink-soft);margin:0 0 12px}
.slot.warte{border-left:4px solid var(--gold)}
table.termine{font-size:14px;margin:0;font-variant-numeric:tabular-nums}
table.termine th{font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);border-bottom:1px solid var(--hair);padding-bottom:6px}
table.termine td{padding:7px 10px 7px 0;border-bottom:1px solid rgba(39,39,39,.07)}
table.termine tr:last-child td{border-bottom:0}
table.termine td.d{font-weight:700;white-space:nowrap}
table.termine tr.fremd td{color:var(--ink-soft)}
table.termine td.note{color:var(--ink-soft);font-size:13px}
table.termine tr.vertreten td{color:var(--bad)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fuss-hinweis{font-size:13px;color:var(--ink-soft);margin:18px 0 0;max-width:62ch}
details.stimmt{margin-top:22px;border-top:1px solid var(--hair);padding-top:16px}
details.stimmt summary{cursor:pointer;font-weight:700;font-size:14px;padding:8px 0;min-height:44px;display:flex;align-items:center}

@media(max-width:700px){
  main{padding:20px 16px 64px}
  h1.t{font-size:30px}
  .summe{padding:18px;flex-direction:column;align-items:stretch}
  .summe .tun{align-items:stretch;text-align:left}
  .summe .betrag{font-size:38px}
  .btn.gross{justify-content:center;text-align:center}
  .slot{padding:15px 16px}
  table.termine td.note{font-size:12.5px}
}
/* Knöpfe auf der dunklen Summenfläche: heller Knopf, dunkle Schrift */
.summe .btn{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.summe .btn:hover{background:var(--paper);border-color:var(--paper)}
.summe .btn:focus-visible{outline-color:var(--paper)}
.summe .tag{background:var(--paper);color:var(--ink)}
.summe.warten .btn{background:var(--ink);color:var(--pink);border-color:var(--ink)}
.nav .kurz{display:none}
@media(max-width:560px){.nav .lang{display:none}.nav .kurz{display:inline}.nav a{padding:14px 11px}}

/* ------------------------------------------------------------------ Bewegung, 22.09.2026: wenig, schnell, mit Grund */
:root{--ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);--t1:140ms;--t2:220ms;--t3:380ms}

/* Seitenwechsel: Kopf, Menü und Fuß stehen still, nur der Inhalt wechselt; die Menü-Markierung wandert */
.nav a{position:relative}
.nav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--pink)}
.nav a.on{border-bottom-color:transparent}
.monate .chip{position:relative;isolation:isolate}
.monate .chip.on{background:none;border-color:transparent}
.monate .chip.on::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .top{view-transition-name:kopf}
  footer{view-transition-name:fuss}
  .nav a.on::after{view-transition-name:menue-punkt}
  .monate .chip.on::before{view-transition-name:monat}
  ::view-transition-old(root){animation:var(--t2) var(--ease-io) both vt-raus}
  ::view-transition-new(root){animation:var(--t3) var(--ease) both vt-rein}
  ::view-transition-old(kopf),::view-transition-new(kopf),::view-transition-old(fuss),::view-transition-new(fuss){animation:none;mix-blend-mode:normal}
  ::view-transition-group(menue-punkt),::view-transition-group(monat){animation-duration:var(--t3);animation-timing-function:var(--ease)}
  ::view-transition-old(menue-punkt),::view-transition-old(monat){animation:none;display:none}
  ::view-transition-new(menue-punkt),::view-transition-new(monat){animation:none}
}
@keyframes vt-raus{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-rein{from{opacity:0;transform:translateY(10px)}}

/* Erstes Laden: Summe und Karten kommen kurz nacheinander an (nicht nach einem Seitenwechsel, da reicht der Übergang) */
@keyframes rein{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}
@media (prefers-reduced-motion:no-preference){
  .rein{animation:rein var(--t3) var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
  .kopf.rein{--i:0}.summe.rein,.login .logo.rein{--i:1}
  .slot.rein:nth-of-type(1),.cards .card:nth-child(1){--i:2}.slot.rein:nth-of-type(2),.cards .card:nth-child(2){--i:3}.slot.rein:nth-of-type(3),.cards .card:nth-child(3){--i:4}.slot.rein:nth-of-type(4),.cards .card:nth-child(4){--i:5}.slot.rein:nth-of-type(5){--i:6}.slot.rein:nth-of-type(n+6){--i:7}
  .cards .card{animation:rein var(--t3) var(--ease) both;animation-delay:calc(var(--i,2) * 45ms)}
  html.vt .rein,html.vt .cards .card{animation:none}
  .flash{animation:rein var(--t3) var(--ease) both}
}

/* Knöpfe und Chips: Zustand wechselt weich, Druck ist spürbar */
.btn,.chip,.nav a,button.auf,.tag{transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease),border-color var(--t1) var(--ease),transform var(--t1) var(--ease),opacity var(--t1) var(--ease)}
.btn:not(.o):not(.p):hover{background:#000}
.btn.o:hover{background:var(--white)}
.btn.p:hover{background:#ffb9e8}
.chip:hover{border-color:var(--ink)}
.btn:active,.chip:active,button.auf:active{transform:scale(.97)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* Knopf arbeitet (PDF wird gebaut, Mail geht raus): Text weicht einem Ring, Doppelklick unmöglich */
.btn{--sp:var(--pink)}
.btn.o,.btn.p,.summe .btn{--sp:var(--ink)}
.summe.warten .btn{--sp:var(--pink)}
.btn.laeuft{position:relative;color:transparent!important;pointer-events:none;opacity:1}
.btn.laeuft::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid var(--sp);border-right-color:transparent;border-radius:50%;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Meldung nach dem Erstellen der Rechnung: der Haken zeichnet sich */
.flash{display:flex;align-items:center;gap:12px}
.flash svg{flex:none;width:22px;height:22px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.flash svg path{stroke-dasharray:26;stroke-dashoffset:26;animation:zeichnen .45s var(--ease) .3s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}

/* Büro-Liste: Zeile klappt auf statt zu springen, Pfeil dreht sich */
#liste>tbody>tr:not(.detail):hover td,#liste>tr:not(.detail):hover td{background:rgba(39,39,39,.035)}
#liste td{transition:background-color var(--t1) var(--ease)}
button.auf{transition:transform var(--t2) var(--ease),border-color var(--t1) var(--ease)}
button.auf.offen{transform:rotate(90deg)}
tr.detail td{padding:0;border-bottom:0}
tr.detail td[colspan]{padding:0}
.auf-innen{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t2) var(--ease)}
.auf-innen>div{overflow:hidden;min-height:0}
.auf-innen .pad{padding:10px 0 14px;border-bottom:1px solid var(--hair);opacity:0;transform:translateY(-4px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
tr.detail.offen .auf-innen{grid-template-rows:1fr}
tr.detail.offen .auf-innen .pad{opacity:1;transform:none}
@media(max-width:760px){tr.detail{display:block} tr.detail td[colspan]{display:block;width:calc(100vw - 48px)}}

/* „Stimmt etwas nicht?": Formular blendet ein statt aufzuploppen (Browser ohne ::details-content zeigen es sofort) */
details.stimmt::details-content{opacity:0;translate:0 -4px;transition:opacity var(--t2) var(--ease),translate var(--t2) var(--ease),content-visibility var(--t2) allow-discrete}
details.stimmt[open]::details-content{opacity:1;translate:0 0}
details.stimmt summary::marker{transition:none}

/* Hochzählender Betrag: feste Ziffernbreite, damit nichts wackelt */
.summe .betrag{font-variant-numeric:tabular-nums}

/* Weniger Bewegung gewünscht: alles sofort */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn.laeuft::after{border-right-color:var(--sp);opacity:.5}
}

/* ================================================================== Oberfläche v3, 23.09.2026: Dashboard nach Mobbin-Mustern
   Referenzen: Airbnb (Monatsleiste mit Balken), Copilot/Monarch (Kacheln, runde Karten), Base44 (Anteilsbalken je Kurs),
   Stripe/Gusto (Statuspunkte in der Liste). Farben bleiben DDS-CI: Ink, Paper, Pink, Gold; dazu nur Tönungen und Ampel. */
:root{
  --r:16px;--r-sm:10px;
  --pink-soft:#FFDDF2;--gold-soft:#EEE6D6;
  --ok:#2A6B3C;--ok-soft:#DCEBDE;--bad:#9B2C2C;--bad-soft:#F3DCDC;
  --karte:#F7F7F4;--linie:rgba(39,39,39,.10);
  --schatten:0 1px 2px rgba(39,39,39,.05),0 10px 28px -16px rgba(39,39,39,.22);
  --schatten-hoch:0 2px 4px rgba(39,39,39,.06),0 18px 40px -18px rgba(39,39,39,.28);
}
body{background:var(--paper)}
main{max-width:1040px}

/* Kopfzeile und Menü: ruhiger, Kanten weich */
.top{padding:14px 24px;border-bottom:1px solid rgba(246,246,243,.08)}
.nav{background:rgba(246,246,243,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:20}
.nav a{border-radius:8px 8px 0 0}
.nav a:hover{background:rgba(39,39,39,.04)}

/* Karten */
.card,.slot,.summe,.kachel,.tabelle,.hint,.test,.flash,.band{border-radius:var(--r)}
.card,.slot,.kachel,.tabelle{background:var(--karte);border:1px solid var(--linie);box-shadow:var(--schatten)}
.card.dark{background:var(--ink);border-color:var(--ink)}
.hint{border-radius:var(--r-sm);border-left-width:4px;background:var(--karte);box-shadow:none}
.flash{border-radius:var(--r-sm)}
.btn{border-radius:var(--r-sm);transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease),border-color var(--t1) var(--ease),transform var(--t1) var(--ease),box-shadow var(--t2) var(--ease),opacity var(--t1) var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(39,39,39,.45)}
.btn:active{transform:scale(.97) translateY(0);box-shadow:none}
.btn.sm{border-radius:8px}
.chip{border-radius:999px}
form.f input,form.f select,form.f textarea{border-radius:var(--r-sm);border-width:1px;border-color:var(--hair);background:var(--karte)}
form.f input:focus-visible,form.f select:focus-visible,form.f textarea:focus-visible{border-color:var(--ink)}

/* Status-Etiketten: Pille mit Punkt, getönt statt schwer */
.tag{border-radius:999px;padding:4px 9px 4px 8px;display:inline-flex;align-items:center;gap:6px;letter-spacing:.08em;font-size:10.5px;line-height:1.2}
.tag.p,.tag.g,.tag.o,.tag.w,.tag.bad{background:var(--gold-soft);color:var(--ink);border:0}
.tag.p{background:var(--ok-soft);color:var(--ok)}
.tag.g{background:var(--gold-soft);color:#6f5a34}
.tag.o{background:transparent;border:1px solid var(--hair);color:var(--ink)}
.tag.w{background:rgba(39,39,39,.06);color:var(--ink-soft)}
.tag.bad,.tag[style*="9b2c2c"]{background:var(--bad-soft)!important;color:var(--bad)!important}
.tag.p::before,.tag.g::before,.tag.o::before,.tag.bad::before,.tag[style*="9b2c2c"]::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.summe .tag{background:rgba(246,246,243,.14);color:var(--paper)}
.summe .tag.p{background:rgba(255,167,226,.18);color:var(--pink)}

/* Seitenkopf */
.kopf{align-items:flex-end;margin-bottom:18px}
h1.t{font-size:44px;letter-spacing:0}
.kick{color:var(--ink-soft);letter-spacing:.16em}

/* Monatsleiste: jeder Monat ein Balken, der gewählte hebt sich ab (Airbnb/Origin) */
.verlauf{display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px;margin:0 -4px 22px;background:rgba(39,39,39,.05);border-radius:14px}
.verlauf::-webkit-scrollbar{display:none}
.verlauf .mon{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 8px;border-radius:11px;text-decoration:none;color:var(--ink-soft);min-height:44px;transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.verlauf .mon:hover{background:rgba(246,246,243,.7);color:var(--ink)}
.verlauf .mon.on{background:var(--karte);color:var(--ink);box-shadow:var(--schatten)}
.verlauf .mon .stab{width:100%;height:36px;display:flex;align-items:flex-end;justify-content:center}
.verlauf .mon .bar{width:22px;height:calc(var(--h,0) * 1%);min-height:3px;border-radius:4px 4px 2px 2px;background:rgba(39,39,39,.22);transform-origin:bottom;transition:background-color var(--t2) var(--ease)}
.verlauf .mon:hover .bar{background:rgba(39,39,39,.4)}
.verlauf .mon.on .bar{background:var(--ink)}
.verlauf .mon.vorschau .bar{background:repeating-linear-gradient(-45deg,rgba(39,39,39,.28) 0 3px,transparent 3px 6px)}
.verlauf .mon .ml{font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.verlauf .mon .mb{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap;height:14px}
.verlauf .mon.on .mb{color:var(--ink);font-weight:600}
@keyframes wachsen{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:no-preference){.verlauf .bar{animation:wachsen var(--t3) var(--ease) both;animation-delay:calc(120ms + var(--i,0) * 40ms)}}
.monate{display:none}

/* Die Summe: dunkle Bühne, weich, mit Licht von oben */
.summe{background:linear-gradient(160deg,#333331 0%,var(--ink) 45%,#1d1d1c 100%);box-shadow:var(--schatten-hoch);padding:26px 28px;position:relative;overflow:hidden;isolation:isolate;margin-bottom:16px}
.summe::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,167,226,.16),transparent 70%);z-index:-1;pointer-events:none}
.summe .betrag{font-size:56px;letter-spacing:-.01em}
.summe.warten{background:var(--karte);box-shadow:var(--schatten);border:1px solid var(--linie)}
.summe.warten::before{background:radial-gradient(closest-side,rgba(178,146,97,.14),transparent 70%)}
@media(max-width:700px){.summe{padding:20px}.summe .betrag{font-size:42px}}

/* Kacheln: vier Zahlen, die den Monat erklären (Jobber/Copilot) */
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:26px}
.kachel{padding:14px 16px 12px;position:relative}
.kachel .lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-faint);margin-bottom:8px}
.kachel .num{font-size:28px;font-variant-numeric:tabular-nums}
.kachel .num small{font-family:'Overused Grotesk',sans-serif;font-weight:600;font-size:12px;color:var(--ink-soft);margin-left:4px;text-transform:none;letter-spacing:0}
.kachel .sub{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.kachel .mark{position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--pink);transform-origin:left}
.kachel.gold .mark{background:var(--gold)}
@media(max-width:820px){.kacheln{grid-template-columns:1fr 1fr}}
@media(max-width:340px){.kacheln{grid-template-columns:1fr}}

/* Abschnitts-Kopf mit Zähler */
h2.ab{display:flex;align-items:baseline;gap:10px;margin:28px 0 12px}
h2.ab .n{font-family:'Queering',sans-serif;font-weight:900;font-size:13px;background:var(--ink);color:var(--pink);border-radius:999px;padding:2px 8px;letter-spacing:0}

/* Kurskarten: Anteil am Monat als feiner Balken (Base44), Termine als leise Tabelle */
.slot{padding:18px 20px 16px;transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.slot:hover{box-shadow:var(--schatten-hoch);transform:translateY(-1px)}
.slot .sh h3{font-size:18px}
.slot .anteil{height:4px;border-radius:4px;background:rgba(39,39,39,.08);margin:10px 0 12px;overflow:hidden}
.slot .anteil i{display:block;height:100%;width:calc(var(--w,0) * 1%);border-radius:4px;background:var(--ink);transform-origin:left}
.slot.vertr .anteil i{background:var(--gold)}
@keyframes breit{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:no-preference){.slot .anteil i{animation:breit .7s var(--ease) both;animation-delay:calc(200ms + var(--i,0) * 60ms)}.kachel .mark{animation:breit .6s var(--ease) both;animation-delay:calc(180ms + var(--i,0) * 50ms)}}
.slot .meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13.5px}
.slot .meta .pkt::before{content:"·";color:var(--ink-faint);margin-right:10px}
.slot .how{background:rgba(39,39,39,.04);border-radius:8px;padding:7px 10px;display:inline-block;font-size:12.5px}
table.termine{margin-top:4px}
table.termine tr:hover td{background:rgba(39,39,39,.025)}
table.termine td{transition:background-color var(--t1) var(--ease)}
table.termine td.d{font-variant-numeric:tabular-nums}
.slot.warte{border-left:0;box-shadow:inset 4px 0 0 var(--gold),var(--schatten)}

/* Listen im Büro und Archiv: Tabelle in einer Karte, Kopf bleibt stehen */
.tabelle{overflow:auto;padding:0 18px;margin-bottom:16px}
.tabelle table{margin:0}
.tabelle th{position:sticky;top:0;background:var(--karte);padding-top:14px;padding-bottom:10px;z-index:1;color:var(--ink-soft);border-bottom:1px solid var(--linie)}
.tabelle td{padding:12px 10px 12px 0}
.tabelle tr:last-child td{border-bottom:0}
.tabelle tr.summe-zeile td{border-top:1.4px solid var(--ink);border-bottom:0;background:none}
#liste>tbody>tr:not(.detail):hover td,#liste>tr:not(.detail):hover td{background:rgba(39,39,39,.03)}
#liste td.k a:hover{text-decoration:underline}
button.auf{border-radius:8px}
tr.detail .slot{box-shadow:none;border-color:var(--linie);background:rgba(246,246,243,.6)}
tr.detail .slot:hover{transform:none}
.leer{padding:32px 18px;text-align:center;color:var(--ink-soft)}
.leer .disp{font-size:18px;color:var(--ink);margin-bottom:6px}

/* Büro-Kopf: Kennzahlen als Kacheln, Aktionen in einer Leiste */
.cards.c4{gap:10px}
.cards .card .lab{color:var(--ink-faint);font-size:10.5px;letter-spacing:.16em}
.cards .card{padding:14px 16px 12px}
.cards .card .num{font-size:30px}
.cards .card.dark .lab{color:var(--pink)}
.werkzeuge{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 20px}
.werkzeuge .btn{box-shadow:none}
.werkzeuge .mehr{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.werkzeuge .mehr .btn{background:transparent;border-color:transparent;color:var(--ink-soft);padding:9px 10px}
.werkzeuge .mehr .btn:hover{background:rgba(39,39,39,.06);color:var(--ink);transform:none}
.status-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;color:var(--ink-soft);font-size:13.5px}
footer{border-top:1px solid var(--linie);color:var(--ink-faint)}
#liste th:first-child{white-space:nowrap}
#liste #alle{font-size:11px;letter-spacing:.06em;color:var(--ink-soft);font-weight:700}
#liste #alle:hover{color:var(--ink)}

/* ---------------------------------------------------------- v3, Teil 2: Büro-Seiten (Klärung, Rückfragen, Anmeldungen …), Login und Formulare */
.feld{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--hair);border-radius:8px;background:var(--karte);color:var(--ink);min-height:36px;max-width:100%}
.feld:focus-visible{outline:3px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.aktionen{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.aktionen form{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.formkarte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten);padding:24px 26px;max-width:680px}
.formkarte form.f{max-width:none}
.formkarte .lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-faint);margin-bottom:14px}
form.f label{color:var(--ink);letter-spacing:.08em;font-size:11.5px}
form.f .help{margin-top:2px}
form.f label.zeile{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-weight:500;font-size:14px}
form.f label.zeile input{width:18px;height:18px;accent-color:var(--ink)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.g2{grid-template-columns:1fr}}
.kopf .links{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft);margin-top:6px}
.kopf .links a{text-decoration:none;border-bottom:1px solid var(--hair)}
.kopf .links a:hover{border-bottom-color:var(--ink);color:var(--ink)}
.card .lab .n{font-family:'Queering',sans-serif;font-weight:900;font-size:12px;background:var(--ink);color:var(--pink);border-radius:999px;padding:2px 8px;margin-left:6px;letter-spacing:0;vertical-align:middle}
.card.leer-karte .lab .n{background:rgba(39,39,39,.08);color:var(--ink-soft)}
.card table{margin:8px 0 0}
.card table tr:last-child td{border-bottom:0}
.card table td{padding:10px 10px 10px 0}
.card p.small.soft{max-width:70ch}
.abschnitt{margin-bottom:14px}
/* Rückfragen als Gesprächskarten */
.rf{padding:16px 20px;margin-bottom:12px}
.rf .rk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft);margin-bottom:10px}
.rf .rk .wer{font-weight:700;color:var(--ink);font-size:15px}
.rf .txt{font-size:15.5px;line-height:1.55;margin:0 0 6px}
.rf .antwort{background:rgba(39,39,39,.04);border-radius:10px;padding:10px 14px;font-size:14px;margin-top:10px}
.rf .antwort strong{color:var(--ok)}
.rf form.f{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.rf form.f label{flex:1 1 320px}
.rf .verlauf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rf .nachricht{max-width:min(620px,92%);border-radius:12px;padding:9px 13px;background:rgba(39,39,39,.04);align-self:flex-start}
.rf .nachricht.eigen{align-self:flex-end;background:rgba(255,167,226,.16)}
.rf .nachricht .kopfz{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;margin-bottom:3px}
.rf .nachricht .kopfz .rolle{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.rf .nachricht .txt{font-size:15px;line-height:1.5;margin:0;white-space:pre-line}
.rfs .rf{padding:14px 0;border-top:1px solid rgba(39,39,39,.08)}
.rfs .rf:first-of-type{border-top:0}
.rf-filter{margin:0 0 14px;max-width:420px}
/* Link-Karte für die Trainergruppe */
.linkkarte{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(39,39,39,.04);border-radius:10px;padding:10px 12px 10px 14px;margin:10px 0}
.linkkarte code{font:inherit;font-size:13.5px;word-break:break-all;flex:1 1 260px}
/* Zwei-Spalten-Karten */
.zwei .card{padding:20px 22px}
.zwei .card .lab{margin-bottom:12px}
/* Einrichten: drei Schritte mit Nummer */
.schritt{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.schritt .nr{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--pink);font-family:'Queering',sans-serif;font-weight:900;font-size:20px;display:grid;place-items:center}
.schritt.fertig .nr{background:var(--ok-soft);color:var(--ok)}
.schritt .sh{margin-bottom:6px}
.schritt .how{display:block;background:none;padding:0;font-size:14.5px;color:var(--ink-soft)}
.schritt .btns{margin:12px 0 0}
/* Login: Karte mittig auf Paper */
body.anmeldung{display:flex;flex-direction:column;min-height:100vh;background:var(--paper) radial-gradient(60% 50% at 50% 0%,rgba(255,167,226,.22),transparent 70%) no-repeat}
.login{margin:auto;padding:24px;width:100%;max-width:520px}
.login .karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten-hoch);padding:30px 30px 26px}
.login .logo{font-size:30px;margin-bottom:8px}
.login .soft{font-size:15px}
.login form.f{max-width:none}
.login .btn{width:100%;text-align:center;padding:14px 18px;font-size:14px}
.login .test{border-radius:var(--r-sm)}
.login + p{margin-top:8px}
/* Öffentliche Anmeldemaske */
main.oeffentlich{max-width:680px}
main.oeffentlich .formkarte{max-width:none}
main.oeffentlich .sub{max-width:60ch}
/* Postausgang und Admin: Tabellen atmen */
.tabelle table.eng td{padding:9px 10px 9px 0}
.tabelle .small{font-size:13px}

/* ---------------------------------------------------------- v3, Teil 3: Web-App (installierbar, Offline, Standalone) */
.install{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--ink);color:var(--paper);border-radius:var(--r-sm);padding:12px 16px;margin:0 0 18px;font-size:14px}
.install strong{color:var(--pink)}
.install .btn.sm{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.install .btn.sm.o{background:transparent;color:var(--paper);border-color:rgba(246,246,243,.35)}
@media (display-mode: standalone){
  .top{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  main{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  footer{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .top .who a[href$="/logout"]{display:none}   /* in der App bleibt man angemeldet, Abmelden steht unter „Meine Daten" nicht im Weg */
}
html{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
.btn,.chip,.nav a,button.auf{touch-action:manipulation}

/* Rechnungsvorschau: liest sich wie das PDF */
.rechnung{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten-hoch);padding:26px 28px;margin-bottom:16px}
.rechnung .parteien{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--linie)}
.rechnung .parteien .lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-faint);margin-bottom:6px}
.rechnung .meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.rechnung .meta b{color:var(--ink);font-weight:700}
.rechnung table{margin:0}
.rechnung tr.gesamt td{border-top:1.4px solid var(--ink);border-bottom:0;font-family:'Queering',sans-serif;font-weight:900;font-size:22px;padding-top:12px}
.rechnung tr.gesamt td:first-child{font-family:'Overused Grotesk',sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);vertical-align:middle}
@media(max-width:600px){.rechnung{padding:18px}.rechnung .parteien{grid-template-columns:1fr}}
.hilfe .card{padding:20px 22px}
.hilfe .card .lab{font-size:14px;letter-spacing:.02em;text-transform:none;font-family:'Queering',sans-serif;font-weight:900;font-size:18px;color:var(--ink);margin-bottom:10px}
.hilfe .card.dark .lab{color:var(--pink)}
.hilfe .card .lab .nr{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pink);color:var(--ink);font-size:13px;margin-right:8px;vertical-align:middle}
.hilfe .card p.small{font-size:14px;line-height:1.55}
.hilfe .card p.small+p.small{margin-top:8px}
.login .soft,.login .small.soft{color:rgba(39,39,39,.72)}

/* ================================================================== v3.1 Ton, 22.09.2026 spät: heller, weißer, ruhiger.
   Grund fast weiß, Karten reinweiß, Gold nur noch als Warnton, Pink der einzige Akzent. Schrift: weniger Versalien, weniger Sperrung. */
:root{
  --paper:#F5F5F2;--white:#FFFFFF;--karte:#FFFFFF;
  --ink:#1F1F1E;--ink-soft:rgba(31,31,30,.64);--ink-faint:rgba(31,31,30,.42);
  --hair:rgba(31,31,30,.10);--linie:rgba(31,31,30,.08);
  --pink:#FFA7E2;--pink-soft:#FFE6F5;--gold:#B29261;--gold-soft:#F3EDE2;
  --ok:#2B6A40;--ok-soft:#E3F0E6;--bad:#A23B3B;--bad-soft:#F6E3E3;
  --schatten:0 1px 2px rgba(31,31,30,.04),0 8px 24px -18px rgba(31,31,30,.18);
  --schatten-hoch:0 2px 4px rgba(31,31,30,.05),0 16px 40px -22px rgba(31,31,30,.25);
}
body{background:var(--paper);color:var(--ink);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
.top{background:var(--ink);color:#F4F4F1;border-bottom:0}
.top .who{letter-spacing:.06em;font-size:11.5px;color:rgba(244,244,241,.7)}
.top .who .rolle{border-color:rgba(244,244,241,.25)}
.nav{background:rgba(255,255,255,.88);border-bottom:1px solid var(--linie)}
.nav a{font-size:13.5px;letter-spacing:0;font-weight:600;color:var(--ink-soft)}
.nav a.on{font-weight:700}
.nav a.on::after{background:var(--pink);height:2.5px}

/* Schrift: Titel kleiner, Labels ohne Sperrung, Kicker leise */
h1.t{font-size:36px;letter-spacing:.005em}
.kick{font-size:11px;letter-spacing:.1em;color:var(--ink-faint);font-weight:700}
.sub{font-size:15px;color:var(--ink-soft);max-width:70ch}
h2.ab{font-family:'Queering',sans-serif;font-size:19px;letter-spacing:.005em;text-transform:uppercase;color:var(--ink);margin:30px 0 12px}
h2.ab .n{background:var(--pink-soft);color:var(--ink);font-size:12px;padding:2px 9px}
.card .lab,.kachel .lab,.formkarte .lab,.summe .lab,.rechnung .parteien .lab,.cards .card .lab{font-size:11px;letter-spacing:.06em;font-weight:700;color:var(--ink-faint);text-transform:uppercase}
.summe .lab{color:var(--pink)}
.card.dark .lab,.cards .card.dark .lab{color:var(--pink)}
th,.tabelle th,table.termine th{font-size:11px;letter-spacing:.04em;font-weight:700;color:var(--ink-faint);text-transform:uppercase;border-bottom:1px solid var(--linie)}
td{border-bottom-color:var(--linie)}
tr:last-child td{border-bottom:1px solid var(--linie)}
.tag{letter-spacing:.04em;font-size:11px;font-weight:700;text-transform:none;padding:4px 9px}
.tag.p,.tag.g,.tag.o,.tag.w,.tag.bad{font-weight:600}
.btn{letter-spacing:.06em;font-size:12.5px;font-weight:700}
.btn.gross{font-size:14px;letter-spacing:.05em}
.btn:not(.o):not(.p){background:var(--ink);color:#fff;border-color:var(--ink)}
.btn:not(.o):not(.p):hover{background:#000}
.btn.o{background:#fff;color:var(--ink);border-color:var(--hair)}
.btn.o:hover{border-color:var(--ink);background:#fff}
.btn.p{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.btn.p:hover{background:#ffb6e7}
.btn{--sp:#fff}.btn.o,.btn.p{--sp:var(--ink)}
.chip{font-weight:600;font-size:13px;background:#fff}
.chip.on{background:var(--ink);color:#fff}
form.f label{font-size:12px;letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--ink)}
form.f input,form.f select,form.f textarea{background:#fff;border-color:var(--hair);font-size:15px}
form.f .help{color:var(--ink-soft);font-size:12.5px}
.feld{background:#fff}
footer{font-size:11px;letter-spacing:.04em;text-transform:none;font-weight:600;color:var(--ink-faint);border-top:1px solid var(--linie)}
.hint{background:#fff;border-left-color:var(--pink);color:var(--ink-soft);border:1px solid var(--linie);border-left:4px solid var(--pink)}
.hint.warn{border-left-color:var(--gold);color:var(--ink)}
.flash{background:var(--pink-soft);color:var(--ink);border:1px solid rgba(255,167,226,.5)}
.flash svg{stroke:var(--ink)}

/* Karten reinweiß, Ränder hauchdünn */
.card,.slot,.kachel,.tabelle,.formkarte,.rechnung,.login .karte{background:#fff;border-color:var(--linie)}
.card.dark{background:var(--ink);color:#F4F4F1;border-color:var(--ink)}
.card.dark .soft{color:rgba(244,244,241,.66)}
.verlauf{background:rgba(31,31,30,.04)}
.verlauf .mon{color:var(--ink-soft)}
.verlauf .mon .ml{letter-spacing:0;font-weight:600}
.verlauf .mon.on{background:#fff}
.verlauf .mon .bar{background:rgba(31,31,30,.16)}
.verlauf .mon.on .bar{background:var(--pink)}
.verlauf .mon.on .ml{color:var(--ink)}
.kachel .num{font-size:26px}
.kachel .mark{background:var(--pink);opacity:.9}
.kachel.gold .mark{background:var(--ink);opacity:.25}
.kachel .sub{color:var(--ink-soft)}
.slot .anteil{background:rgba(31,31,30,.06)}
.slot .anteil i{background:var(--pink)}
.slot.vertr .anteil i{background:var(--ink)}
.slot .how{background:var(--paper);color:var(--ink-soft)}
.slot .meta{color:var(--ink-soft)}
.slot .sh h3{font-size:17px}
.slot .amt{font-size:22px}
.slot.warte{box-shadow:inset 4px 0 0 var(--gold),var(--schatten)}
.summe{background:var(--ink);box-shadow:var(--schatten-hoch);color:#F4F4F1}
.summe::before{background:radial-gradient(closest-side,rgba(255,167,226,.22),transparent 70%)}
.summe .betrag{font-size:52px}
.summe .betrag .netto{color:rgba(244,244,241,.6);letter-spacing:.06em;font-size:12px}
/* nur im dunklen Kasten; im hellen (warten) bleiben die kleinen Texte dunkel, sonst sind sie weiß auf weiß */
.summe:not(.warten) .small,.summe:not(.warten) .soft,.summe:not(.warten) .tun .small{color:rgba(244,244,241,.72)}
.summe.warten{background:#fff;color:var(--ink);border:1px solid var(--linie)}
.summe.warten .lab{color:var(--ink-faint)}
.summe.warten .btn{background:var(--ink);color:#fff}
.summe .btn{background:var(--pink);color:var(--ink)}
.summe .btn:hover{background:#fff}
.cards .card .num{font-size:28px}
.status-zeile{color:var(--ink-soft)}
.rf .antwort{background:var(--paper)}
.linkkarte{background:var(--paper)}
.install{background:var(--ink);color:#F4F4F1}
.schritt .nr{background:var(--pink);color:var(--ink)}
.schritt.fertig .nr{background:var(--ok-soft);color:var(--ok)}
.rechnung tr.gesamt td{border-top-color:var(--ink)}
.hilfe .card .lab .nr{background:var(--pink);color:var(--ink)}
.hilfe .card .lab{font-size:17px;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.leer{color:var(--ink-soft)}
body.anmeldung{background:var(--paper) radial-gradient(60% 45% at 50% 0%,rgba(255,167,226,.28),transparent 70%) no-repeat}
.login .soft,.login .small.soft{color:rgba(31,31,30,.7)}
.umgebung{background:var(--bad)}
.werkzeuge .mehr .btn{color:var(--ink-soft)}
.werkzeuge .mehr .btn:hover{background:rgba(31,31,30,.05);color:var(--ink)}
tr.detail .slot{background:var(--paper)}
tr.detail td{background:var(--paper)}
#liste>tbody>tr:not(.detail):hover td,#liste>tr:not(.detail):hover td{background:rgba(31,31,30,.025)}
@media(max-width:700px){h1.t{font-size:28px}.summe .betrag{font-size:40px}}
.summe .btn:not(.o):not(.p){background:var(--pink);color:var(--ink);border-color:var(--pink)}
.summe .btn:not(.o):not(.p):hover{background:#fff;border-color:#fff}
.summe.warten .btn:not(.o):not(.p){background:var(--ink);color:#fff;border-color:var(--ink)}
.install .btn.sm:not(.o){background:var(--pink);color:var(--ink);border-color:var(--pink)}

/* ---------------------------------------------------------- Analyse (Kornelia): Heatmap und Kurs-Radar */
.heat-karte{padding:18px 20px 14px}
.heat-kopf{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.heat-kopf p{max-width:56ch;margin:0}
.heat-scroll{overflow-x:auto}
table.heat{border-collapse:separate;border-spacing:3px;margin:0;width:100%;min-width:640px}
table.heat th{border:0;padding:0 0 4px;text-align:center;font-size:10.5px;color:var(--ink-faint)}
table.heat th:first-child{text-align:left;padding-right:6px;width:28px}
table.heat td{border:0;padding:0;height:34px;background:rgba(31,31,30,.035);border-radius:6px}
table.heat .zelle{display:grid;place-items:center;height:34px;border-radius:6px;background:color-mix(in oklab,var(--ink) calc(var(--v) * 88%),#fff);color:#fff;font-size:12px;cursor:default;transition:transform var(--t1) var(--ease)}
table.heat .zelle b{font-variant-numeric:tabular-nums;font-weight:600;mix-blend-mode:difference;color:#fff}
table.heat .zelle:hover,table.heat .zelle:focus-visible{transform:scale(1.08);outline:2px solid var(--pink);z-index:1}
.heat-legende{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-faint);margin-top:10px}
.heat-legende i{flex:0 0 120px;height:8px;border-radius:4px;background:linear-gradient(90deg,#fff,var(--ink))}
.radar-kopf{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ampeln{display:flex;gap:6px;flex-wrap:wrap}
table.radar td{vertical-align:middle}
.spark-zelle{width:140px}
.spark{width:120px;height:32px;display:block}
.spark path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark circle{fill:var(--pink);stroke:#fff;stroke-width:2}
tr.faellt .spark path{stroke:var(--bad)}
tr.waechst .spark path{stroke:var(--ok)}
@media (prefers-reduced-motion:no-preference){.spark path{stroke-dasharray:260;stroke-dashoffset:260;animation:zeichnen-lang .9s var(--ease) both;animation-delay:calc(200ms + var(--i,0) * 20ms)}}
@keyframes zeichnen-lang{to{stroke-dashoffset:0}}

/* Coach: Nächste Stufe, Deine Leute, Meilensteine */
.stufe{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;margin:10px 0 12px;padding:10px 12px;background:var(--paper);border-radius:10px;font-size:13px}
.stufe .txt{color:var(--ink)}
.stufe .txt b{font-weight:700}
.stufe .satz{font-family:'Queering',sans-serif;font-weight:900;font-size:16px;white-space:nowrap}
.stufe .satz small{font-family:'Overused Grotesk',sans-serif;font-weight:500;font-size:11px;color:var(--ink-soft);margin-left:4px}
.stufe .balken{grid-column:1/-1;height:6px;border-radius:6px;background:rgba(31,31,30,.08);overflow:hidden}
.stufe .balken i{display:block;height:100%;width:calc(var(--w,0) * 1%);background:var(--pink);border-radius:6px;transform-origin:left}
.stufe.oben .balken i{background:var(--ink)}
@media (prefers-reduced-motion:no-preference){.stufe .balken i{animation:breit .8s var(--ease) both;animation-delay:calc(300ms + var(--i,0) * 60ms)}}
.leute{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
@media(max-width:760px){.leute{grid-template-columns:1fr}}
.leute .kachel .num{font-size:26px}
.leute .kachel .num small{font-size:12px}
.leute .delta{font-size:12px;font-weight:600;margin-left:6px;color:var(--ink-soft)}
.leute .delta.plus{color:var(--ok)}.leute .delta.minus{color:var(--bad)}
.meilen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:760px){.meilen{grid-template-columns:1fr}}
.meile{padding:14px 16px}
.meile .kopf2{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.meile .wert{font-family:'Queering',sans-serif;font-weight:900;font-size:26px}
.meile .ziel{font-size:12px;color:var(--ink-soft)}
.meile .abz{display:flex;gap:4px;margin:8px 0 6px}
.meile .abz i{width:22px;height:22px;border-radius:50%;background:rgba(31,31,30,.08);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink-faint)}
.meile .abz i.da{background:var(--pink);color:var(--ink)}
.meile .abz i.naechst{border:2px dashed var(--pink);background:#fff}
.meile .balken{height:5px;border-radius:5px;background:rgba(31,31,30,.08);overflow:hidden}
.meile .balken i{display:block;height:100%;width:calc(var(--w,0) * 1%);background:var(--ink);border-radius:5px;transform-origin:left}
@media (prefers-reduced-motion:no-preference){.meile .balken i{animation:breit .8s var(--ease) both;animation-delay:calc(350ms + var(--i,0) * 60ms)}}
table.heat .zelle b{mix-blend-mode:normal;color:#fff}
table.heat .zelle.hell b{color:var(--ink)}
/* Analyse v2: Auslastung statt Heatmap */
.auslastung{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:900px){.auslastung{grid-template-columns:1fr}}
.auslastung .card{padding:16px 18px}
.tagzeile{display:grid;grid-template-columns:28px 1fr 84px;gap:10px;align-items:center;padding:5px 0}
.tagzeile .tn{font-size:12px;font-weight:700;color:var(--ink-soft)}
.tagzeile .tb{position:relative;height:14px;background:rgba(31,31,30,.06);border-radius:7px;overflow:hidden}
.tagzeile .tb i{position:absolute;inset:0 auto 0 0;width:calc(var(--w,0) * 1%);background:var(--ink);border-radius:7px;transform-origin:left}
.tagzeile .tb u{position:absolute;top:-2px;bottom:-2px;left:calc(var(--w,0) * 1%);width:2px;background:var(--pink);border-radius:2px}
.tagzeile .tv{text-align:right;font-variant-numeric:tabular-nums;line-height:1.1}
.tagzeile .tv b{font-family:'Queering',sans-serif;font-weight:900;font-size:16px}
.tagzeile .tv small{display:block;font-size:10.5px;color:var(--ink-faint)}
@media (prefers-reduced-motion:no-preference){.tagzeile .tb i{animation:breit .7s var(--ease) both;animation-delay:calc(200ms + var(--i,0) * 50ms)}}
.liste .lz{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--linie)}
.liste .lz:last-child{border-bottom:0}
.liste .ln{display:grid;line-height:1.25;min-width:0}
.liste .ln b{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liste .ln small{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liste .lv{font-family:'Queering',sans-serif;font-weight:900;font-size:18px;background:var(--pink-soft);border-radius:8px;padding:2px 8px;min-width:38px;text-align:center}
.leer-liste .lv{background:rgba(31,31,30,.06)}
table.radar td.mono .small{font-size:11px}

/* Kursverlauf: der Kurs gegen sich selbst */
.verlauf{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--white);border:1px solid var(--hair);padding:10px 14px;margin:0 0 10px;font-size:13.5px}
.verlauf .txt{color:var(--ink-soft)}
.verlauf .txt b{color:var(--ink)}
.verlauf .diff{font-family:'Queering',sans-serif;font-weight:900;font-size:20px;white-space:nowrap}
.verlauf .diff.auf{color:#1d7a4c}
.verlauf .diff.ab{color:#9b2c2c}

.knopf-hilfe{max-width:74ch;margin:-6px 0 20px;line-height:1.55}
.knopf-hilfe b{color:var(--ink)}
.btn.klein{font-size:11px;padding:8px 12px}
ul.punkte{margin:10px 0 12px 18px;font-size:14px;color:var(--ink-soft)}
ul.punkte li{margin:3px 0}
.warnrot{color:#9b2c2c}

.jahr{display:grid;grid-template-columns:320px 1fr;gap:14px;margin-bottom:16px}
@media(max-width:820px){.jahr{grid-template-columns:1fr}}
.jbalken{display:flex;align-items:flex-end;justify-content:flex-start;gap:12px;height:150px;padding-top:6px;overflow-x:auto}
.jb{flex:0 1 86px;min-width:54px;max-width:96px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%;text-align:center}
.jb i{display:block;width:100%;height:calc(var(--h) * 1%);min-height:3px;background:var(--pink);border:1px solid var(--ink);transition:height .8s cubic-bezier(.16,1,.3,1)}
.jb.bezahlt i{background:var(--pink)}
.jb.wartet i{background:var(--gold)}
.jb.fehlt i{background:repeating-linear-gradient(45deg,var(--white),var(--white) 4px,var(--hair) 4px,var(--hair) 8px)}
.jb .v{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.jb .m{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-faint)}
.jpkt{display:inline-block;width:9px;height:9px;border:1px solid var(--ink);vertical-align:baseline;margin-right:3px}
.jpkt.bezahlt{background:var(--pink)}.jpkt.wartet{background:var(--gold)}.jpkt.fehlt{background:var(--white)}
.arbeit{display:grid;gap:10px;margin-bottom:16px}
.az{display:grid;grid-template-columns:132px 1fr;gap:14px;background:var(--white);border:1px solid var(--hair);border-left:4px solid var(--gold);padding:14px 16px}
.az.r0{border-left-color:#c0392b}.az.r1{border-left-color:var(--gold)}.az.r2{border-left-color:var(--pink)}.az.r3{border-left-color:var(--ink-faint)}
.az .art{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink)}
.az .zahl{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.az .kn{font-weight:700}
.az .was{font-size:13.5px;color:var(--ink-soft);margin-top:3px}
@media(max-width:700px){.az{grid-template-columns:1fr;gap:4px}}
.spitzen{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.spitzen{grid-template-columns:1fr}}

.aush-wahl{margin-bottom:18px}
.vorlagen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:700px){.vorlagen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vorlage{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--white);border:1.4px solid var(--hair);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s ease,transform .15s cubic-bezier(.16,1,.3,1)}
.vorlage:hover{border-color:var(--ink);transform:translateY(-2px)}
.vorlage.on{border-color:var(--pink);box-shadow:inset 0 0 0 2px var(--pink)}
.vorlage canvas{width:100%;height:auto;display:block;background:var(--ink)}
.vorlage .vn{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.vorlage .vs{font-size:11px;color:var(--ink-faint)}
.aush{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;margin-bottom:16px}
@media(max-width:820px){.aush{grid-template-columns:1fr}}
.aush-form{display:flex;flex-direction:column;gap:16px}
.aush-form .feld label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--gold);margin-bottom:6px}
.aush-form select,.aush-form input{width:100%;font:inherit;font-size:15px;padding:11px 13px;border:1.4px solid var(--ink);background:var(--white);color:var(--ink);border-radius:0}
.zeilen{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.zeilen .chip{font-size:12.5px;padding:7px 11px;border:1px solid var(--hair);background:var(--white);cursor:pointer;font-family:inherit;color:var(--ink-soft)}
.zeilen .chip:hover{border-color:var(--ink);color:var(--ink);background:var(--pink)}
.btn.gross{align-self:flex-start;font-size:14px;padding:14px 22px}
.hint.klein{font-size:13px;margin-top:12px}
.aush-vorschau{position:sticky;top:16px}
.aush-vorschau canvas{width:100%;height:auto;border:1.4px solid var(--ink);display:block;background:var(--ink)}
.aush-vorschau figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-faint);margin-top:8px}
@media(max-width:820px){.aush-vorschau{position:static;order:-1}}

.meta .meta-link{text-decoration:none;border-bottom:1.4px solid var(--pink);font-weight:700;color:var(--ink)}
.meta .meta-link:hover{background:var(--pink)}

.foto-hinweis{margin-top:10px;line-height:1.45;border-left:3px solid var(--gold);padding-left:10px}

/* Coach-Liste am Handy: aus jeder Zeile wird eine Karte. Als Tabelle wären acht Spalten
   auf 375 px unlesbar, die Namen lagen außerhalb des Bildes. */
@media(max-width:760px){
  .tabelle:has(.coachliste){overflow-x:visible}
  .coachliste,.coachliste tbody,.coachliste tr,.coachliste td{display:block;width:auto}
  .coachliste tr.kopfzeile{display:none}
  .coachliste tr{position:relative;background:var(--white);border:1px solid var(--hair);margin-bottom:10px;padding:12px 14px 10px 44px}
  .coachliste tr.detail{margin-top:-10px;border-top:0;padding:0 14px}
  .coachliste td{border:0;padding:2px 0}
  .coachliste td.auf{position:absolute;left:10px;top:12px;width:auto;padding:0}
  .coachliste td.k{font-size:17px;font-weight:700;margin-bottom:6px;line-height:1.3}
  .coachliste td.r{text-align:left}
  .coachliste td[data-l]:before{content:attr(data-l) ": ";font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    font-weight:800;color:var(--ink-faint);margin-right:6px}
  .coachliste td[data-l=""]:before{content:none}
  .coachliste td.soll{font-weight:700}
  .coachliste td.tun{margin-top:8px;white-space:normal;display:flex;gap:8px;flex-wrap:wrap}
  .coachliste tr.detail td{padding:0}
  .coachliste tr.detail td:first-child{display:none}
  /* Die Karte bringt ihren Rand selbst mit. Die feste Breite aus der alten Tabellenansicht (100vw - 48px) war hier
     um den Kartenrand zu breit und schnitt den Betrag rechts ab. */
  .coachliste tr.detail td[colspan]{width:auto}
  .coachliste .rows{grid-template-columns:auto auto 1fr}
}

table.staffel{width:auto;min-width:230px;margin:10px 0 12px;font-size:14px}
table.staffel td{padding:6px 18px 6px 0;border-bottom:1px solid var(--hair)}
table.staffel tr:last-child td{border-bottom:0}
.card.dark table.staffel td{border-color:rgba(225,226,220,.22);color:rgba(225,226,220,.9)}

details.selten{margin:-4px 0 18px}
details.selten>summary{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-faint);cursor:pointer;padding:6px 0}
details.selten>summary:hover{color:var(--ink)}
details.selten[open]>summary{color:var(--ink)}
details.selten .werkzeuge{margin:8px 0 6px}
details.termine-auf>summary{cursor:pointer;font-size:13.5px;color:var(--ink-soft);padding:8px 0;display:flex;gap:10px;align-items:baseline}
details.termine-auf>summary .zeig{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-faint)}
details.termine-auf>summary:hover .zeig{color:var(--ink)}
details.termine-auf[open]>summary .zeig{content:none;opacity:.5}


/* ================================================================== Duo-Kurs, 29.09.2026: „Wer hat unterrichtet?“
   Je Termin eine Radiogruppe (fieldset/legend) mit drei großen Feldern, am Handy untereinander. Native Radios bleiben
   bedienbar (Tab, Pfeiltasten, Screenreader), nur unsichtbar über das Feld gelegt. Gewählt = dunkel UND Haken. */
.duo-karte{display:flex;justify-content:space-between;align-items:center;gap:14px 22px;flex-wrap:wrap;background:var(--karte);border:1px solid var(--linie);border-left:4px solid var(--pink);border-radius:var(--r);box-shadow:var(--schatten);padding:18px 22px;margin:0 0 18px}
.duo-karte.fertig{border-left-color:var(--ok)}
.duo-karte h2{font-size:22px;line-height:1.2;margin:2px 0 6px}
.duo-karte .lab{font-size:11px;letter-spacing:.06em;font-weight:700;color:var(--ink-soft)}
.duo-karte p{margin:4px 0 0;max-width:62ch}
.duo-regel{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:14px 18px;margin:0 0 16px;max-width:720px}
.duo-regel p{margin:0 0 4px}
.duo-form{max-width:720px}
.duo-termin{border:1px solid var(--linie);border-radius:var(--r);background:var(--karte);box-shadow:var(--schatten);padding:10px 16px 14px;margin:0 0 12px;min-width:0}
.duo-termin.offen{border-left:4px solid var(--pink)}
/* Legende innen statt auf dem Rahmen: sonst schneidet das Datum den runden Kartenrand */
.duo-termin legend{float:left;width:100%;padding:0;margin:0 0 6px;font-weight:700;font-size:16px}
.duo-termin legend+*{clear:both}
.duo-termin .duo-meta{font-weight:500;color:var(--ink-soft);font-size:14px}
.duo-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.duo-option{position:relative;display:flex}
.duo-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.duo-option span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 10px;border:1.5px solid var(--hair);border-radius:var(--r-sm);font-size:15px;font-weight:600;background:var(--karte);color:var(--ink);transition:background-color var(--t1) var(--ease),border-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.duo-option:hover span{border-color:var(--ink-faint)}
.duo-option input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.duo-option input:checked+span::before{content:"\2713\00a0";color:var(--pink)}
.duo-option input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.duo-option input:disabled{cursor:default}
.duo-option input:disabled+span{opacity:.5}
.duo-option input:disabled:checked+span{opacity:1}
.duo-wer{margin:8px 0 0}
@media(max-width:600px){.duo-wahl{grid-template-columns:1fr}.duo-karte>.btn{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.duo-option span{transition:none}}

/* Sammelüberweisung am Handy (26.10.2026): eine Karte je Zahlung, wie die Coach-Liste */
@media(max-width:760px){
  .zahlungsliste,.zahlungsliste tbody,.zahlungsliste tr,.zahlungsliste td{display:block;width:auto}
  .zahlungsliste tr.kopfzeile{display:none}
  .zahlungsliste tr{border-bottom:1px solid var(--hair);padding:12px 0}
  .zahlungsliste td{border:0;padding:2px 0}
  .zahlungsliste td.lfd{display:none}
  .zahlungsliste td.k{font-size:16px;font-weight:700}
  .zahlungsliste td[data-l]:before{content:attr(data-l) ": ";font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    font-weight:800;color:var(--ink-faint);margin-right:6px}
  .zahlungsliste td[data-l=""]:before{content:none}
}

/* Sammelüberweisung in drei Gruppen (27.10.2026): bezahlt, zur Klärung, sonstige; je Gruppe Anzahl und Summe */
.zgruppe{margin-bottom:12px;padding:0 18px}
.zgruppe>summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:52px;padding:14px 0;list-style:none}
.zgruppe>summary::-webkit-details-marker{display:none}
.zgruppe>summary::before{content:"\25B8";font-size:14px;color:var(--ink-faint);transition:rotate var(--t1) var(--ease)}
.zgruppe[open]>summary::before{rotate:90deg}
.zgruppe .zg-titel{font-weight:800;font-size:16px}
.zgruppe .zg-zahl{font-weight:800;font-size:13px;padding:1px 9px;border-radius:99px;background:rgba(39,39,39,.07)}
.zgruppe .zg-summe{font-weight:600}
.zgruppe .zg-hinweis{flex-basis:100%;padding-left:22px}
.zg-bezahlt .zg-zahl{background:var(--ok-soft);color:var(--ok)}
.zg-klaeren .zg-zahl{background:var(--bad-soft);color:var(--bad)}
.zgruppe[open]>summary{border-bottom:1px solid var(--hair)}
.zgruppe>table,.zgruppe>p{margin-bottom:14px!important}
@media(prefers-reduced-motion:reduce){.zgruppe>summary::before{transition:none}}

/* Hinweis auf den laufenden Monat (Zwischenstand der Nacht, seit 28.10.2026) */
.lauf-hinweis{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--pink-soft);border-radius:12px;padding:12px 16px;margin:0 0 14px;font-size:14px;color:var(--ink);text-decoration:none;transition:box-shadow var(--t1) var(--ease)}
.lauf-hinweis b{font-weight:700}
.lauf-hinweis .zeig{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;white-space:nowrap}
.lauf-hinweis:hover{box-shadow:var(--schatten)}

/* Zahlenreihe je Kurs (29.10.2026): wenig Text, die Legende steht einmal oben unter „So liest du die Zahlen“ */
.kz{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 0}
.kz>div{display:flex;flex-direction:column;gap:2px;background:var(--paper);border-radius:10px;padding:8px 10px;min-width:0}
.kz .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-soft)}
.kz .z{font-family:'Queering',sans-serif;font-weight:900;font-size:24px;line-height:1.05;color:var(--ink)}
.kz .u{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz .u.auf{color:#1d7a4c;font-weight:700}
.kz .u.ab{color:#9b2c2c;font-weight:700}
@media(max-width:560px){.kz{grid-template-columns:repeat(2,1fr)}}
details.legende{margin:-4px 0 12px;font-size:13px}
details.legende>summary{cursor:pointer;color:var(--ink-soft);font-weight:700;list-style:none}
details.legende>summary::before{content:'? ';display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--pink-soft);color:var(--ink);font-size:11px;margin-right:6px}
details.legende dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 0;padding:10px 12px;background:var(--white);border:1px solid var(--hair);border-radius:10px}
details.legende dt{font-weight:800}
details.legende dd{margin:0;color:var(--ink-soft)}