/* app.css — der Kundenbereich, PT-Welt (Schwarz + Gold), Sora/Montserrat.
   Vorlage: der Zusammenbau vom 01.09.2026 (Stapel, Leiste unten) und der
   Kunden-Log vom 02.09.2026 (Schirme 1-4). Schriften VERLINKT aus /fonts/,
   nicht eingebettet (Bauplan 4.5). Farben aus references/design/theme.json. */

@font-face{font-family:'Sora';font-weight:400;font-display:swap;src:url(/fonts/sora-v17-latin-regular.woff2) format('woff2')}
@font-face{font-family:'Sora';font-weight:700;font-display:swap;src:url(/fonts/sora-v17-latin-700.woff2) format('woff2')}
@font-face{font-family:'Sora';font-weight:800;font-display:swap;src:url(/fonts/sora-v17-latin-800.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:400;font-display:swap;src:url(/fonts/montserrat-v31-latin-regular.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:500;font-display:swap;src:url(/fonts/montserrat-v31-latin-500.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:600;font-display:swap;src:url(/fonts/montserrat-v31-latin-600.woff2) format('woff2')}

:root{
  --bg:#ffffff;--card:#ffffff;--alt:#f6f8fb;
  --fg:#17181c;--mut:#5c6a80;--gray:#96a3b8;
  --line:#d9dfe8;--line2:#c1cad8;
  --dark:#181819;--mark:#FADC14;--on-mark:#16202e;--deep:#8a6a00;
  --on-dark:#c3cdda;--on-dark-mut:#8d99ad;--on-dark-strong:#ffffff;
  --display:'Sora','Segoe UI',Helvetica,Arial,sans-serif;
  --body:'Montserrat','Segoe UI',Helvetica,Arial,sans-serif;
  --r-card:14px;--r-pill:99px;--r-badge:6px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--alt);color:var(--fg);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
a{color:inherit}
button{font:inherit}

/* --- Rahmen (Aufbau seit 04.09.2026 wie die Ansicht „Neu" des YogaRaum-Cockpits):
   am Handy Kopfzeile, Titelzeile, Inhalt, Unterleiste, untere Leiste;
   am Schreibtisch (ab 901 px) Spalte 1, Spalte 2, Titelzeile und Inhalt als Raster. --- */
.login{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.app{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.kopf{background:var(--dark);color:var(--on-dark-strong);padding:14px 18px 12px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5}
.kopf .wortmarke{flex:1}
.wortmarke{font:800 15px/1 var(--display);letter-spacing:.4px}
.wortmarke span{display:block;font:400 9px/1.4 var(--body);color:var(--on-dark-mut);letter-spacing:1.6px;margin-top:3px}
.wa{width:36px;height:36px;border-radius:50%;background:var(--mark);color:var(--on-mark);display:grid;place-items:center;font-size:17px;text-decoration:none;font-weight:700}
.wa[hidden]{display:none}
.inhalt{flex:1;padding:16px 16px 28px}
.laden{color:var(--mut);text-align:center;padding:40px 0}

/* --- Spalte 1 / untere Leiste ---------------------------------------------------- */
.side-nav{display:flex;flex-direction:column;background:var(--card)}
.side-nav.leer .tabs{display:none}
.nav-list{display:flex}
.nav-list[hidden]{display:none}
.tab{border:0;background:none;color:var(--gray);cursor:pointer;text-decoration:none;font:600 11px/1.5 var(--body)}
.tab .ic{display:block;font-style:normal;font-size:16px;margin-bottom:1px}
.tab-badge{display:inline-block;min-width:16px;padding:0 4px;border-radius:99px;background:var(--mark);color:var(--on-mark);font:700 9px/16px var(--display);margin-left:4px;vertical-align:1px}
.cloud{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mut)}
.cloud i{width:7px;height:7px;border-radius:50%;background:var(--gray);display:inline-block;flex:none}
.cloud.an i{background:#3A7D52}
.cloud.aus i{background:#B5532F}
.cloud.aus{color:#B5532F}
.kopf .cloud.klein{color:var(--on-dark-mut);font-size:10.5px}
.side-brand,.side-foot{display:none}

/* --- Spalte 2 / Unterleiste -------------------------------------------------------- */
.sub-nav{display:none}
.subtab{border:0;background:none;color:var(--mut);cursor:pointer;text-decoration:none;font:600 12px/1.4 var(--body);display:flex;align-items:center;gap:8px}
.subtab .ic{font-style:normal}

/* --- Titelzeile ---------------------------------------------------------------------- */
.titel{display:flex;flex-direction:column;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--line);background:var(--bg)}
.titel h1{margin:0;font:800 20px/1.2 var(--display);letter-spacing:-.02em}
.titel-sub{color:var(--mut);font-size:12.5px;min-height:1em}
.titel-rechts{display:flex;gap:8px;flex-wrap:wrap}
.titel-rechts:empty{display:none}
.knopf.primaer{background:var(--mark);color:var(--on-mark);padding:9px 14px;border-radius:9px}

/* Handy: die Leisten unten, in dieser Reihenfolge: Inhalt, Unterleiste, untere Leiste */
@media (max-width:900px){
  .kopf.handy{order:1}
  .titel{order:2}
  .inhalt{order:3}
  .sub-nav.handy{order:4;display:flex;justify-content:space-around;gap:4px;padding:5px 8px;background:var(--card);border-top:1px solid var(--line);position:sticky;bottom:52px;z-index:4;box-shadow:0 -1px 5px rgba(0,0,0,.06)}
  .sub-nav.handy .subnav-head{display:none}
  .sub-nav.handy #seite2Items{display:flex;width:100%;gap:4px}
  .sub-nav.handy .subtab{flex:1;justify-content:center;padding:6px 4px;border-radius:7px}
  .sub-nav.handy .subtab.an{background:var(--alt);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
  .side-nav{order:5;position:sticky;bottom:0;z-index:5;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .nav-list{width:100%}
  .tab{flex:1;padding:9px 2px 11px;text-align:center}
  .tab.an{color:var(--fg);box-shadow:inset 0 3px 0 var(--mark)}
}

/* --- Bausteine ---------------------------------------------------------------- */
.eyebrow{font:600 10px/1 var(--display);letter-spacing:1.5px;color:var(--gray);text-transform:uppercase;margin:0 0 9px}
h1{font:800 22px/1.2 var(--display);letter-spacing:-.02em;margin:0 0 6px}
h2{font:700 18px/1.25 var(--display);margin:0 0 3px}
.unter{color:var(--mut);font-size:13px;margin:0 0 15px}
.karte{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:13px 14px;margin-bottom:10px}
.karte.gold{border-color:var(--mark);border-left:4px solid var(--mark)}
.karte.offen{border:2px solid var(--line2);padding:14px}
.karte.fertig{background:var(--alt)}
.karte.fehlt{border-style:dashed;border-color:var(--line2);background:transparent}
.karte.kommend{opacity:.6}
.zeile{display:flex;align-items:center;gap:11px}
.zeile .txt{flex:1;min-width:0}
.tt{font:600 14.5px/1.35 var(--body);margin:0}
.tm{color:var(--mut);font-size:12px;margin:2px 0 0}
.tm b{color:var(--fg);font-weight:600}
.marke{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:0 0 auto}
.marke.pt{background:var(--mark);color:var(--on-mark)}
.marke.selbst{background:var(--alt);border:1px solid var(--line2);color:var(--mut)}
.marke.ok{background:var(--dark);color:var(--mark)}
.marke.aus{background:transparent;border:1px dashed var(--line2);color:var(--gray)}
.badge{display:inline-block;border-radius:var(--r-badge);font:600 10px/1 var(--display);letter-spacing:.8px;padding:5px 8px;margin-left:auto;white-space:nowrap}
.badge.gemeldet{background:var(--dark);color:var(--mark)}
.badge.offen{background:var(--alt);color:var(--mut);border:1px solid var(--line2)}
.badge.wartet{background:#e9f6ed;color:#2c6b41;border:1px solid #c3e4cd}
.frist{color:var(--deep);font-weight:600}

.knopf{border:0;border-radius:var(--r-pill);font:600 13px/1 var(--body);padding:10px 16px;background:var(--mark);color:var(--on-mark);cursor:pointer;white-space:nowrap}
.knopf.breit{display:block;width:100%;padding:14px;font-size:14px;text-align:center;margin-top:10px}
.knopf.dunkel{background:var(--dark);color:var(--on-dark-strong)}
.knopf.hell{background:var(--alt);color:var(--fg);border:1px solid var(--line2)}
.knopf:disabled{opacity:.5;cursor:default}
.plus{display:block;width:100%;padding:13px;border:1px dashed var(--line2);border-radius:var(--r-card);background:transparent;color:var(--mut);font:600 13px/1 var(--body);margin-top:4px;cursor:pointer}
.mini{color:var(--gray);font-size:11.5px;line-height:1.5;margin:10px 0 0}
.leer{color:var(--mut);font-style:italic;margin:0}
.fehl{background:#fdecea;color:#a8332a;border:1px solid #f3c9c5;border-radius:9px;padding:9px 12px;font-size:13px;margin:0 0 12px}

/* --- Brief -------------------------------------------------------------------- */
.brief{background:var(--dark);color:var(--on-dark-strong);border-radius:var(--r-card);padding:16px;margin-bottom:12px}
.brief .eyebrow{color:var(--mark)}
.brief p{margin:0;white-space:pre-wrap;font:600 15px/1.5 var(--body)}
.brief .abs{margin-top:10px;color:var(--on-dark-mut);font-size:11.5px;font-weight:400}

/* --- Ziel --------------------------------------------------------------------- */
.ziel .tage{font:800 40px/1 var(--display);letter-spacing:-.03em;margin:4px 0 2px}
.ziel .was{font:700 17px/1.25 var(--display);margin:0}
.ziel .wann{color:var(--mut);font-size:12.5px;margin:2px 0 0}
.hinweise{white-space:pre-wrap;margin:0;font-size:14px}
.stand{color:var(--gray);font-size:11.5px;margin:8px 0 0}

/* --- Zonenstreifen ------------------------------------------------------------ */
.zonen{display:flex;height:16px;border-radius:5px;overflow:hidden;margin:8px 0 4px}
.zonen i{flex:1}
.zonen .z1{background:#eef1f6}.zonen .z2{background:#e2e7ef}.zonen .z3{background:#cfd6e2}.zonen .z4{background:var(--mark)}.zonen .z5{background:#3a3a3d}
.zonen i.aktiv{outline:2px solid var(--dark);outline-offset:-2px}
.zonen-sk{display:flex}
.zonen-sk span{flex:1;text-align:center;font-size:9.5px;color:var(--gray)}
.zonen-txt{color:var(--mut);font-size:12px;margin:6px 0 0}

/* --- Formular ----------------------------------------------------------------- */
.form{margin-top:4px}
.lab{font:600 11px/1 var(--display);letter-spacing:.6px;color:var(--mut);text-transform:uppercase;margin:12px 0 6px;display:block}
.feld{display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font:400 15px/1.3 var(--body);color:var(--fg);background:var(--card)}
.feld:focus{outline:2px solid var(--mark);outline-offset:-1px}
.feld.mark{border-color:var(--deep)}
textarea.feld{resize:vertical;min-height:64px}
.paar{display:flex;gap:9px}
.paar>div{flex:1;min-width:0}
.frage{margin:14px 0 0}
.frage .f{font:600 13.5px/1.4 var(--body);margin:0 0 8px}
.frage .f small{display:block;font-weight:400;color:var(--mut);font-size:11.5px;margin-top:2px}
.skala{display:flex;gap:3px}
.skala button{flex:1;text-align:center;padding:10px 0;border:1px solid var(--line);border-radius:6px;background:var(--card);font:600 12px/1 var(--body);color:var(--mut);cursor:pointer;min-width:0}
.skala button.an{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
.wahl{display:flex;gap:6px;flex-wrap:wrap}
.wahl button{padding:9px 13px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);font:600 12.5px/1 var(--body);color:var(--mut);cursor:pointer}
.wahl button.an{background:var(--dark);border-color:var(--dark);color:var(--on-dark-strong)}
.nurausdauer{border-left:3px solid var(--mark);padding-left:11px}
.trenn{height:1px;background:var(--line);margin:15px 0}
.form .knoepfe{display:flex;gap:8px;margin-top:16px}
.form .knoepfe .knopf{flex:1;text-align:center;padding:13px}

/* --- Mappe -------------------------------------------------------------------- */
.blatt{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:inherit}
.blatt .pdf{width:34px;height:42px;border-radius:5px;background:var(--alt);border:1px solid var(--line2);display:grid;place-items:center;font:700 9px var(--display);color:var(--mut);flex:none}
.blatt .t{flex:1;min-width:0}
.blatt .t b{display:block;font-weight:600}
.blatt .t span{font-size:11.5px;color:var(--mut)}
.blatt .pf{color:var(--gray)}

/* --- Fuss --------------------------------------------------------------------- */
.fuss{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--gray);display:flex;justify-content:space-between;align-items:center;gap:10px}
.fuss button{border:0;background:none;color:var(--mut);font:600 12px var(--body);cursor:pointer;padding:6px 0}

/* --- Login -------------------------------------------------------------------- */
.login .karte{margin:24px 16px}
.login label{display:block;font:600 11px/1 var(--display);letter-spacing:.6px;color:var(--mut);text-transform:uppercase;margin:14px 0 0}
.login input{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:12px;font:400 15px var(--body);color:var(--fg);background:var(--card)}
.login input:focus{outline:2px solid var(--mark);outline-offset:-1px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- Schreibtisch (ab 901 px): zwei Spalten und Titelzeile, wie die Ansicht „Neu" ------ */
@media (min-width:901px){
  .app{display:grid;grid-template-columns:190px auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100dvh;min-height:0;background:var(--alt)}
  .kopf.handy{display:none}
  .side-nav{grid-column:1;grid-row:1 / span 2;background:var(--bg);border-right:1px solid var(--line);padding:6px 8px 8px}
  .side-brand{display:flex;align-items:center;gap:8px;padding:8px 8px 10px}
  .side-brand .mark{width:28px;height:28px;border-radius:7px;background:var(--dark);color:var(--mark);display:inline-flex;align-items:center;justify-content:center;font:800 11px var(--display);flex:none}
  .side-brand .wm{font:800 13px/1.05 var(--display);font-style:italic;letter-spacing:-.2px}
  .side-brand .wm small{display:block;font:600 8.5px var(--body);font-style:italic;color:var(--mut);letter-spacing:.2px;margin-top:2px}
  .nav-list{flex-direction:column;gap:2px}
  .side-nav.leer .tabs{display:flex}
  .tab{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;color:var(--mut);font:500 13px var(--body);text-align:left;width:100%}
  .tab .ic{font-size:15px;margin:0;width:18px;text-align:center;color:var(--gray)}
  .tab:hover{background:var(--alt)}
  .tab.an{background:var(--card);color:var(--fg);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.06)}
  .tab.an .nav-lbl{font-weight:600}
  .tab.an .ic{color:var(--fg)}
  .tab-badge{margin-left:auto;background:var(--alt);color:var(--mut);font:600 11px/18px var(--body);min-width:18px;height:18px;border-radius:9px;padding:0 5px;vertical-align:0}
  .side-foot{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding:8px 0 4px;border-top:1px solid var(--line)}
  .side-foot .cloud{padding:4px 10px 8px}
  .side-foot .tab{height:34px}
  .sub-nav{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:2px;width:200px;background:var(--card);border-right:1px solid var(--line);padding:0 8px 10px;overflow:auto}
  .sub-nav.hidden{display:none}
  .subnav-head{display:flex;align-items:center;height:52px;margin:0 -8px 6px;padding:0 16px;border-bottom:1px solid var(--line);font:600 15px var(--display);color:var(--fg)}
  .subtab{height:34px;padding:0 10px;border-radius:8px;width:100%;font:500 13px var(--body)}
  .subtab:hover{background:var(--alt)}
  .subtab.an{background:var(--card);color:var(--fg);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.06);font-weight:600}
  .titel{grid-column:3;grid-row:1;flex-direction:row;align-items:flex-start;gap:16px;margin:0 22px;padding:30px 0 14px;background:transparent}
  .titel-links{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .titel h1{font-size:24px}
  .titel-sub{font-size:13px}
  .titel-rechts{padding-top:2px}
  .inhalt{grid-column:3;grid-row:2;overflow:auto;padding:16px 22px 40px;max-width:900px;width:100%}
  .fuss{display:none}
}