/* ==========================================================================
   Neue Optik "Druckbogen" (so hat Evi es gewollt: "sieht zu sehr nach KI aus")
   --------------------------------------------------------------------------
   Idee: ein Planer aus der Druckerei statt einer App aus dem Baukasten.
   - Tinte statt Haarlinie: Karten, Knoepfe und Felder tragen einen kraeftigen
     Rand in der Schriftfarbe (--tinte), dazu ein harter, versetzter Schatten
     wie bei einem Stempel. Kein Weichzeichner, kein Verlauf.
   - Drucken heisst druecken: ein Knopf mit Schatten sinkt beim Tippen in
     seinen Schatten (er rutscht um den Versatz nach rechts unten).
   - Ueberschriften schmal und gross (Instrument Sans auf 75 % Breite), mit
     einem Textmarker in der Zweitfarbe darunter.
   - Eine Hauptkarte je Seite traegt einen Schatten in der Zweitfarbe.
   Nur Aussehen, keine Logik, kein Markup. Farben nur aus den Tokens der
   Designs - darum gilt sie in allen 13 Designs. Liegt ganz zuletzt.
   ========================================================================== */

:root[data-theme]{
  --tinte:var(--ink);
  --tinte:color-mix(in oklch, var(--ink) 88%, var(--accent));
  --tinte-leise:color-mix(in oklch, var(--ink) 22%, var(--surface));
  --marker:var(--akzent2, var(--accent-soft));
  --strich:1.5px;
  --versatz:3px;
  --druck-farbe:var(--tinte);
  --druck:var(--versatz) var(--versatz) 0 0 var(--druck-farbe);
  --druck-klein:2px 2px 0 0 var(--druck-farbe);
  --druck-gross:5px 5px 0 0 var(--druck-farbe);
  --r-klein:6px;
  --r-feld:12px;
  --r-karte:18px;
  --r-fenster:24px;
  --radius:18px;
  --radius-sm:12px;
  --schmal:75%;
  --schatten-oben:6px 6px 0 0 var(--druck-farbe);
}
/* Dunkle Designs: Tinte ist hell - als Rand etwas zurueckgenommen, der
   Schatten nimmt einen tiefen Ton des Akzents (ein heller Schatten saehe aus
   wie ein Leuchten). */
:root:is([data-theme="basedunkel"],[data-theme="schwarz"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"]){
  --tinte:color-mix(in oklch, var(--ink) 62%, var(--surface));
  --tinte-leise:color-mix(in oklch, var(--ink) 20%, var(--surface));
  --druck-farbe:color-mix(in oklch, var(--accent) 42%, var(--ground));
}

/* ---------------------------- Schrift ---------------------------- */
:root[data-theme] .view h1{
  font-stretch:var(--schmal);
  font-weight:700;
  font-size:clamp(30px, 10vw, 52px);
  letter-spacing:-.02em;
  line-height:.98;
  text-decoration:underline;
  /* Dezent und schmal (so hat Evi es gewollt): ein feiner Strich knapp unter
     der Schrift, die Zweitfarbe etwas zurueckgenommen. */
  text-decoration-color:var(--marker);
  text-decoration-color:color-mix(in srgb, var(--marker) 60%, transparent);
  text-decoration-thickness:.12em;
  text-underline-offset:.04em;
  text-decoration-skip-ink:none;
}
:root[data-theme] :is(.wb-zahl,.tb-blatt b,.tb-blatt strong,.ct-zahl,.cal-kopf h2,.cal-kopf strong,.sh-zahlen b,.zv-zahl,.pl-ring b,.km-n){
  font-stretch:var(--schmal);
}

/* ---------------------------- Kopfzeile ---------------------------- */
:root[data-theme] .ks-kreis,
:root[data-theme] .cal-pfeil,
:root[data-theme] .ck-such{
  background:var(--surface);
  border:var(--strich) solid var(--tinte);
  border-radius:var(--r-feld);
  box-shadow:var(--druck-klein);
  color:var(--ink);
}
:root[data-theme] .ks-kreis svg{color:var(--ink);}
:root[data-theme] .ks-kreis.ks-suche{border-radius:999px;box-shadow:var(--druck-klein);}
:root[data-theme] .kopf-set.active .ks-kreis{background:var(--marker);}
:root[data-theme] .ks-wort{font-weight:600;color:var(--ink);}
:root[data-theme] .ks-zahl{border:var(--strich) solid var(--tinte);}

/* ---------------------------- Karten ----------------------------
   Ein Blatt mit Tintenrand. Was in einer Karte liegt, trennt eine Linie. */
:root[data-theme] :is(.cat,.card,.th-karte,.tagblatt,.cal-blatt,.cust-gruppe,.af-karte,.pl-ziel-karte,.ku-kreise,.zv-karte,.anf-karte,.mn-start .mn-zeile,.mn-gruppe,.set-block,.pl-nz-neu,.nz-karte,.td-karte,.go-kopf,.aw-karte,.tf-teil){
  background-color:var(--surface);
  border:var(--strich) solid var(--tinte);
  border-radius:var(--r-karte);
  box-shadow:var(--druck);
}
/* Innen keine zweite Tinte: Teile im Fenster und Zeilen in Gruppen bleiben leise */
:root[data-theme] .modal :is(.tf-teil,.cat){box-shadow:none;border-color:var(--tinte-leise);}
:root[data-theme] .set-block .cat{border:0;box-shadow:none;border-radius:0;}
:root[data-theme] .set-liste .set-block .cat + .cat{border-top:1px solid var(--tinte-leise);}
:root[data-theme] .tagblatt .tagblatt{box-shadow:none;}

/* --------------------------- Hauptkarte ---------------------------
   Die eine Karte je Seite, die zaehlt: gefuellt im Akzent, Schatten in der
   Zweitfarbe. */
:root[data-theme] :is(.pl-held,.ka-held,.tagblatt > .tb-kopf){
  border:var(--strich) solid var(--tinte);
  box-shadow:var(--versatz) var(--versatz) 0 0 var(--tinte), calc(var(--versatz) * 2) calc(var(--versatz) * 2) 0 0 var(--marker);
}
:root[data-theme] .tagblatt > .tb-kopf{
  box-shadow:var(--druck-klein);
}

/* ----------------------------- Knoepfe ----------------------------- */
:root[data-theme] .btn{
  border:var(--strich) solid var(--tinte);
  border-radius:var(--r-feld);
  box-shadow:var(--druck);
  font-weight:650;
  transition:transform .06s var(--ease), box-shadow .06s var(--ease), background-color var(--dur) var(--ease);
}
:root[data-theme] .btn:active:not([disabled]){
  transform:translate(var(--versatz), var(--versatz));
  box-shadow:0 0 0 0 var(--druck-farbe);
}
:root[data-theme] .btn.subtle{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--tinte);
  box-shadow:var(--druck-klein);
}
:root[data-theme] .btn.ghost{
  background:transparent;
  border-color:var(--tinte);
  box-shadow:none;
}
:root[data-theme] .btn.danger{border-color:var(--danger);box-shadow:2px 2px 0 0 var(--danger);}
:root[data-theme] .btn.small{box-shadow:var(--druck-klein);}
:root[data-theme] .btn[disabled]{box-shadow:none;opacity:.5;}
:root[data-theme] .btn.ka-buchen{
  background:var(--marker);
  color:var(--on-akzent2, var(--ink));
}

/* ------------------------------ Chips ------------------------------
   Aufkleber: rund, Tintenrand; der gewaehlte in der Zweitfarbe mit Schatten. */
:root[data-theme] :is(.cf-chip,.chip,.sg-chip){
  border-radius:999px;
  border:var(--strich) solid var(--tinte);
  background:var(--surface);
  color:var(--ink);
  box-shadow:none;
  font-weight:600;
}
:root[data-theme] :is(.cf-chip.on,.chip.on,.sg-chip:has(input:checked),.cf-chip:has(input:checked)){
  background:var(--marker);
  color:var(--on-akzent2, var(--ink));
  border-color:var(--tinte);
  box-shadow:var(--druck-klein);
}
:root[data-theme] :is(.cf-chip,.chip) .cnt{
  background:var(--ink);
  color:var(--surface);
  border-radius:999px;
  padding:0 6px;
  min-width:18px;
  font-size:11px;
  line-height:18px;
  text-align:center;
}
/* Reiter mit Strich (Organisation, Kundenakte) bleiben Reiter */
:root[data-theme] :is(.pl-teile,.ka-reiter) .cf-chip{border:0;background:none;box-shadow:none;border-radius:0;}
:root[data-theme] :is(.pl-teile,.ka-reiter) .cf-chip.on{background:none;box-shadow:none;}
:root[data-theme] :is(.pl-teile,.ka-reiter) .pl-pille{height:4px;background:var(--tinte);border-radius:4px;}
:root[data-theme] :is(.pl-teile,.ka-reiter) .cf-chip .cnt{background:var(--marker);color:var(--on-akzent2, var(--ink));}

/* ------------------------------ Felder ------------------------------
   Der Rand sitzt am Feld selbst (wie in css/24-kontrast.css), beim
   Hineintippen kommt ein versetzter Schatten in der Zweitfarbe. */
:root[data-theme] :is(.field,.af-neu,.pl-neu-zeile,.gb-reihe,.ls-werte,.sg-neu-feld,.sk-neu,.spick-neu,.su-feld,.search-wrap)
  :is(input:not([type=checkbox],[type=radio],[type=file],[type=hidden],[type=range],[type=color],[type=submit],[type=button]),select,textarea),
:root[data-theme] input.sk-name,
:root[data-theme] .spick-toggle{
  border:var(--strich) solid var(--tinte);
  border-radius:var(--r-feld);
  background-color:var(--surface);
  box-shadow:none;
}
:root[data-theme] :is(.field,.af-neu,.pl-neu-zeile,.gb-reihe,.ls-werte,.sg-neu-feld,.sk-neu,.spick-neu,.su-feld,.search-wrap)
  :is(input,select,textarea):focus,
:root[data-theme] input.sk-name:focus{
  border-color:var(--tinte);
  box-shadow:var(--versatz) var(--versatz) 0 0 var(--marker);
  outline:none;
}
:root[data-theme] .search-wrap input{border-radius:999px;}
:root[data-theme] .field label,
:root[data-theme] .field > span:first-child{font-weight:650;color:var(--ink);}

/* --------------------------- Wochenband --------------------------- */
:root[data-theme] .wb-tag{
  background:var(--surface);
  border:var(--strich) solid var(--tinte-leise);
  border-radius:var(--r-feld);
  box-shadow:none;
}
:root[data-theme] .wb-tag.heute{
  background:var(--ink);
  color:var(--surface);
  border-color:var(--tinte);
  --ink-soft:var(--surface);
}
:root[data-theme] .wb-tag.gewaehlt{
  border-color:var(--tinte);
  box-shadow:var(--druck-klein);
  transform:translate(-1px,-1px);
}
:root[data-theme] .wb-tag.heute.gewaehlt{box-shadow:var(--versatz) var(--versatz) 0 0 var(--marker);}
:root[data-theme] .wb-zahl{font-size:26px;font-weight:700;}

/* ---------------------------- Kalender ---------------------------- */
:root[data-theme] .cal-blatt::after{
  font-stretch:var(--schmal);
  font-weight:700;
  color:var(--marker);
  opacity:.55;
}
:root[data-theme] .ct-zahl{font-weight:650;font-size:17px;}
:root[data-theme] .cal-tag.heute .ct-zahl{
  background:var(--marker);
  color:var(--on-akzent2, var(--ink));
  box-shadow:inset 0 0 0 var(--strich) var(--tinte);
}
:root[data-theme] .cal-tag.sel{box-shadow:inset 0 0 0 var(--strich) var(--tinte), var(--druck-klein);border-radius:var(--r-feld);}
:root[data-theme] .cal-heute{border:var(--strich) solid var(--tinte);box-shadow:var(--druck-klein);}
:root[data-theme] .km-monate .on,
:root[data-theme] .km-monate [aria-current="true"]{box-shadow:var(--druck-klein);}
/* Das Blatt ist etwa so hoch wie breit (so hat Evi es gewollt: "den Kalender
   nicht so lang nach unten ziehen", "er soll quadratisch sein"): der Monat
   kleiner als die anderen Ueberschriften, die zwoelf Monate in einer Reihe,
   sobald sie schmal gesetzt hineinpassen, flachere Tage und eine knappe
   Legende. Jede Woche hat nur eine Zeile unter der Zahl - das Wort
   "Geschlossen" und die Marken teilen sich den Platz; nur ein geschlossener
   Tag mit Terminen macht seine Woche eine Zeile hoeher. Der Team-Kalender
   (.tk-blatt) behaelt seine Hoehe, dort liegen die Streifen unten im Feld. */
:root[data-theme] .cal-blatt .cal-kopf{margin-bottom:4px;}
:root[data-theme] .cal-blatt .cal-kopf h1{font-size:clamp(26px, 7.6vw, 36px);}
:root[data-theme] .km-monate{margin-bottom:4px;padding-bottom:4px;}
:root[data-theme] .km-monat{padding:3px 2px 1px;}
@container blatt (min-width:270px){
  :root[data-theme] .km-monate{grid-template-columns:repeat(12, minmax(0, 1fr));gap:2px;}
  :root[data-theme] .km-monat{font-stretch:var(--schmal);font-size:12px;padding:3px 0 1px;border-radius:var(--r-klein);}
  :root[data-theme] .km-monat i{height:11px;line-height:11px;font-size:9.5px;}
}
:root[data-theme] .cal-blatt .cal-dow{padding-bottom:2px;}
:root[data-theme] .cal-blatt:not(.tk-blatt) :is(.cal-tag, .cal-tag.pad){min-height:30px;padding:0 0 1px;}
:root[data-theme] .cal-blatt:not(.tk-blatt) .ct-zahl{width:22px;height:22px;font-size:16px;line-height:1;}
:root[data-theme] .cal-blatt:not(.tk-blatt) .ct-punkte{height:8px;}
:root[data-theme] .cal-blatt:not(.tk-blatt) .ct-zu{height:9px;line-height:9px;}
:root[data-theme] .cal-tag .ct-zu:empty,
:root[data-theme] .cal-tag.zu .ct-punkte:empty{display:none;}
:root[data-theme] .cal-blatt .cal-legende{margin-top:4px;padding-top:5px;gap:1px 9px;font-size:10px;line-height:1.2;}
:root[data-theme] .cal-blatt .cal-legende i svg{width:11px;height:11px;}
:root[data-theme] .cal-blatt .cal-legende .lg-zu{width:11px;height:11px;}

/* ------------------------- Tagblatt-Kalenderblatt ------------------------- */
:root[data-theme] .tb-blatt{
  border:var(--strich) solid var(--tinte);
  border-radius:var(--r-feld);
  box-shadow:var(--druck-klein);
  background:var(--surface);
  color:var(--ink);
}
:root[data-theme] .tb-blatt.heute{background:var(--marker);color:var(--on-akzent2, var(--ink));}

/* ----------------------------- Kunden ----------------------------- */
:root[data-theme] .cust-buchstabe b{
  font-stretch:var(--schmal);
  font-weight:700;
  font-size:22px;
}
:root[data-theme] .ku-zeile{border-color:var(--tinte-leise);}

/* --------------------------- Reiterleiste ---------------------------
   Eine Karte am unteren Rand mit Tintenkante; der aktive Reiter ist ein
   Aufkleber in der Zweitfarbe, der hinueber gleitet. */
:root[data-theme] nav.tabbar .tabbar-inner{
  background:var(--surface);
  border-top:2px solid var(--tinte);
  box-shadow:none;
}
:root[data-theme] nav.tabbar button{color:var(--ink-soft);}
:root[data-theme] nav.tabbar button.active{color:var(--on-akzent2, var(--ink));}
:root[data-theme] nav.tabbar button.active svg{color:var(--on-akzent2, var(--ink));}
:root[data-theme] nav.tabbar button.active span{font-weight:700;}
:root[data-theme] .tab-pille{
  top:7px;
  bottom:calc(var(--leiste-unten, 4px) + 3px);
  height:auto;
  border-radius:var(--r-feld);
  background:var(--marker);
  border:var(--strich) solid var(--tinte);
  box-shadow:var(--druck-klein);
}
:root[data-theme] .tab-pille::after{display:none;}

/* ------------------------------- Zen ------------------------------- */
:root[data-theme] .zen-knopf{
  background:var(--marker);
  color:var(--on-akzent2, var(--ink));
  border:var(--strich) solid var(--tinte);
  border-radius:var(--r-karte);
  box-shadow:var(--druck);
}
:root[data-theme] .zen-knopf:active{transform:translate(var(--versatz), var(--versatz));box-shadow:none;}

/* ------------------------------ Fenster ------------------------------ */
:root[data-theme] .modal{
  border:2px solid var(--tinte);
  border-radius:var(--r-fenster);
  box-shadow:var(--schatten-oben);
}
:root[data-theme] .modal-close{
  border:var(--strich) solid var(--tinte);
  border-radius:var(--r-feld);
  background:var(--surface);
}
:root[data-theme] .tf-fuss{border-top:2px solid var(--tinte);}
:root[data-theme] .tf-fuss .btn{box-shadow:var(--druck);}
:root[data-theme] .tf-dauer{background:var(--marker);color:var(--on-akzent2, var(--ink));border:1px solid var(--tinte);}
:root[data-theme] .modal .tb-blatt{background:var(--marker);color:var(--on-akzent2, var(--ink));}

/* ------------------------------ Meldung ------------------------------ */
:root[data-theme] .toast{
  border:2px solid var(--tinte);
  box-shadow:var(--versatz) var(--versatz) 0 0 var(--marker);
}

/* ------------------------------- Menue ------------------------------- */
:root[data-theme] .mn-zeile{border-radius:var(--r-feld);}
:root[data-theme] .mn-gruppe{box-shadow:none;}
:root[data-theme] .mn-gruppe.auf{box-shadow:var(--druck-klein);}

/* ---------------------------- Nachschliff ---------------------------- */
/* Menue und Einstellungen: eigene kleine Kaesten mit Tinte */
:root[data-theme] .kopf-set:not(.mitte) .ks-kreis{
  background:var(--surface);
  border-color:var(--tinte);
  color:var(--ink);
}
:root[data-theme] .kopf-set:not(.mitte).active .ks-kreis{background:var(--marker);border-color:var(--tinte);}
:root[data-theme] .kopf-set:active .ks-kreis{transform:translate(2px,2px);box-shadow:none;}
/* Im Kalender steht das Jahr in der Ueberschrift - dort kein Marker */
:root[data-theme] .cal-blatt .cal-kopf h1{text-decoration:none;}
/* Grosse Namen in den Hauptkarten: schmal und kraeftig wie die Ueberschriften */
:root[data-theme] :is(.ka-name,.ph-satz){
  font-stretch:var(--schmal);
  font-weight:700;
  letter-spacing:-.01em;
}
:root[data-theme] .ka-name{font-size:clamp(32px, 9vw, 40px);line-height:1;}
:root[data-theme] .ph-satz{font-size:clamp(26px, 7vw, 32px);line-height:1.02;}
:root[data-theme] .ka-zahl b,
:root[data-theme] .ka-zahlen b{font-stretch:var(--schmal);font-size:24px;}
/* Kacheln in der Hauptkarte: wie kleine Etiketten */
:root[data-theme] :is(.ph-pille,.sk-kreis){
  border:var(--strich) solid var(--hero-rand, var(--line));
  border-radius:var(--r-feld);
}
:root[data-theme] .ka-seit{border-radius:999px;}
/* Unternehmensuebersicht: Name kraeftig, aber kleiner als eine Seitenueberschrift */
:root[data-theme] .set-held h1,
:root[data-theme] .set-held .sh-name{font-size:clamp(26px, 7.4vw, 34px);}
/* Titel der Fenster schmal wie die Seiten */
:root[data-theme] .modal :is(.tf-kopf h3,.modal-close + h3){font-stretch:var(--schmal);font-weight:700;letter-spacing:-.01em;}
:root[data-theme] .modal .tf-kopf h3{font-size:30px;line-height:1;}
:root[data-theme] .set-block-kopf,:root[data-theme] .mn-ueber{color:var(--ink);font-weight:700;}
/* Umschalter Woche/Monat */
:root[data-theme] .pl-zielart{border:var(--strich) solid var(--tinte);border-radius:999px;background:var(--surface);padding:3px;}
:root[data-theme] .pl-zielart button{border-radius:999px;}
:root[data-theme] .pl-zielart button.on{background:var(--marker);color:var(--on-akzent2, var(--ink));box-shadow:inset 0 0 0 var(--strich) var(--tinte);}
:root[data-theme] .modal.menue > h3{font-size:34px;line-height:1;}
/* Leere Seiten: ein Blatt mit Tinte statt eines blassen Kastens */
:root[data-theme] :is(.st-leer,.pl-leer,.lb-karte,.empty){
  background:var(--surface);
  border:var(--strich) solid var(--tinte);
  border-radius:var(--r-karte);
  box-shadow:none;
}
:root[data-theme] :is(.pl-teile,.ka-reiter) .cf-chip.on{color:var(--ink);}
/* Anmeldung: das Blatt mit den Feldern traegt dieselbe Tinte */
:root[data-theme] .sperre-feld{
  background-color:var(--surface);
  border:var(--strich) solid var(--tinte);
  border-radius:var(--r-karte);
  box-shadow:var(--druck);
}