/* ==========================================================================
   Papier - eine ruhigere, handfestere Optik
   --------------------------------------------------------------------------
   Vorher sah die App nach Baukasten aus: Glas und Weichzeichner, ein
   Glanzstreifen auf jedem Knopf und jeder Karte, Berge im Nebel, alles eine
   Pille, alles ein schwebender Kasten im Kasten, jedes Etikett in
   Grossbuchstaben mit weitem Abstand. Das ist die Handschrift, die man von
   Oberflaechen kennt, die aus Bausteinen zusammengesetzt und nicht
   entworfen wurden.
   Ab hier gilt: Papier und Tinte.
   - Flaechen sind matt. Kein Glanz, kein Glas, kein Nebel. Eine Karte
     liegt nicht ueber der Seite, sie ist ein Blatt darauf: ein feiner
     Rand, fertig. Schatten gibt es nur noch dort, wo wirklich etwas
     obenauf liegt (Fenster, Meldung).
   - Ecken sind klein und immer dieselben (6 / 10 / 14 / 18 px). Eine
     Pille ist nur noch, was eine Marke ist (Zahl, Zustand). Knoepfe,
     Felder und Chips sind Rechtecke mit ruhigen Ecken.
   - Ein Etikett ist ein Wort, kein Aufdruck: normale Schreibweise, 12-13 px,
     leise. Ueberschriften sind kraeftig, nicht schwarz und schwer.
   - Ein Ding steht in einer Karte, nicht drei ineinander: was innen
     getrennt werden muss, trennt eine feine Linie.
   - Farbe traegt Bedeutung (Zustand, Person), nicht Dekoration: keine
     Verlaeufe, keine gedrehten Toene je Zeile.
   Was hier steht, aendert weder Markup noch Logik - nur das Aussehen. Die
   Farben der zehn Designs bleiben, es wird nur ihr Einsatz ruhiger.
   Wer etwas Neues baut, nimmt die Werte von hier (--r-*, --linie-*).
   ========================================================================== */

/* ------------------------------ Werte ------------------------------ */
:root,
:root[data-theme]{
  /* kein Schatten: der Wert bleibt gueltig, damit "inset ..., var(--shadow)"
     nicht als Ganzes verfaellt */
  --shadow:0 0 0 0 transparent;
  --shadow-lift:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.07);
  --glanz:transparent;
  --glanz-knopf:transparent;
  --radius:14px;
  --radius-sm:10px;
  --r-klein:6px;
  --r-feld:10px;
  --r-karte:14px;
  --r-fenster:18px;
  /* Ein Fenster oder eine Meldung liegt wirklich obenauf */
  --schatten-oben:0 2px 4px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.16);
}

/* --------------------------- Der Grund ---------------------------
   Flaches Papier mit einem Hauch Korn, keine Lichtflecken. Die Berge im Nebel
   mit Sonne und Wolken (body::after in css/11) sind wieder da - so hat Evi es
   gewollt: sie geben der App ihre Ruhe. Staerke wie frueher (--motiv-staerke
   in css/11: .32 hell, .2 dunkel). */
body::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.1'/%3E%3C/svg%3E");
}

/* --------------------------- Schrift ---------------------------
   Eine Ueberschrift ist kraeftig, aber nicht schwer und nicht eng
   zusammengepresst. */
.view h1{
  font-weight:650;
  letter-spacing:-.012em;
  line-height:1.15;
}

/* --------------------------- Kopfzeile ---------------------------
   Drei quadratische Felder mit ruhigen Ecken statt drei Glaskugeln. */
.ks-kreis,
.cal-pfeil{
  border-radius:var(--r-feld);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.ks-kreis.ks-suche{border-radius:var(--r-feld);}
.ks-kreis:has(.kopf-bild){border-radius:var(--r-feld);}
.kopf-set.active .ks-kreis{background:var(--accent-soft);border-color:var(--accent);}
.ks-wort{
  font-size:10.5px;font-weight:500;letter-spacing:0;
  color:var(--ink-soft);
}
@media (min-width:600px){ .ks-wort{font-size:11px;} }

/* ----------------------- Etiketten und Zahlen -----------------------
   Ein Etikett ist ein Wort, kein Aufdruck. Vorher: 9-11 px, alles gross,
   weit gesperrt - das las sich wie eine Beschriftung auf einem Geraet.
   Jetzt: normale Schreibweise, 12 px, ein Gewicht kraeftiger als der Text. */
:root .th-titel,
:root .tb-label,
:root .kk-titel,
:root .ph-gruss,
:root .set-block-kopf,
:root .set-label,
:root .section-label,
:root .pl-g-kopf,
:root .su-g-kopf,
:root .tg-gruppe,
:root .vk-studio,
:root .sh-klein,
:root .zt-teil .zt-lbl,
:root .pl-wann-wort,
:root .pl-wann-frage,
:root .tf-wort,
:root .kf-oben,
:root .zs-wort,
:root .zk-wort,
:root .pr-wort,
:root .tv-frei-wort,
:root .km-n-txt small{
  text-transform:none;
  letter-spacing:.005em;
  font-size:12px;
  font-weight:600;
}
:root .th-titel,
:root .sh-klein,
:root .vk-studio{color:var(--accent-deep);}
:root .set-art,
:root .cal-dow,
:root .wb-dow,
:root .tb-blatt small,
:root .ka-zahl .l,
:root .wk-tag,
:root .set-std,
:root .tg-rolle,
:root .tg-neu{
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
}
:root .cal-dow,
:root .wb-dow,
:root .tb-blatt small{font-size:11px;}
:root .set-art{font-size:11.5px;}
:root .set-std{font-size:10.5px;font-weight:600;}

/* Die Zahl an einem Chip war eine eigene kleine Pille mit Hintergrund - an
   jedem Chip, dazu noch in der Leiste. Jetzt steht sie einfach als Zahl
   daneben, etwas leiser als das Wort. */
:root .cf-chip .cnt,
:root .chip .cnt{
  background:none;
  padding:0;
  min-width:0;
  height:auto;
  border-radius:0;
  font-weight:500;
  font-size:inherit;
  color:inherit;
  opacity:.62;
  font-variant-numeric:tabular-nums;
}

/* -------------------------- Knoepfe --------------------------
   Gefuellt = der Schritt, getoent = geht auch, Rand = zur Seite,
   Umriss in Rot = endgueltig. Wie bisher - nur ohne Verlauf, Glanzkante
   und Farbschatten. Die Farben der Stufen bleiben, wo sie waren. */
:root .btn{
  border-radius:var(--r-feld);
  background-image:none;
  box-shadow:none;
  font-weight:600;
  letter-spacing:0;
}
:root .btn.small{border-radius:8px;}
:root .btn:active:not([disabled]){transform:scale(.97);}
@media (hover:hover) and (pointer:fine){
  :root .btn:not(.ghost):not(.subtle):not(.danger):not(.set-abmelden):hover:not([disabled]){
    background-image:none;background-color:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent);box-shadow:none;
  }
}

/* --------------------------- Chips ---------------------------
   Kleine Rechtecke statt Pillen. Der gewaehlte Chip ist gefuellt. */
:root .cf-chip,
:root .chip,
:root .filter-leiste button,
:root .sg-chip{
  border-radius:8px;
  box-shadow:none;
}
:root .cf-chip.on,
:root .chip.on{box-shadow:none;}

/* --------------------- Marken (Pillen bleiben hier) ---------------------
   Zahl, Zustand, Kurzangabe: das sind Marken, sie duerfen rund sein - aber
   ohne Schatten und leiser. */
:root .info-pille,
:root .ku-wann,
:root .ck-kw,
:root .wk-dauer{box-shadow:none;}

/* --------------------------- Felder ---------------------------
   Ruhige Ecken, ein feiner Rand, keine Pille. */
:root .field input,
:root .field select,
:root .field textarea,
:root .search-wrap input{
  border-radius:var(--r-feld);
  box-shadow:none;
}
:root .field input:focus,
:root .field select:focus,
:root .field textarea:focus,
:root .search-wrap input:focus{
  box-shadow:0 0 0 2px var(--accent-soft);
}

/* ---------------------------- Karten ----------------------------
   Eine Karte ist ein Blatt: Flaeche, feiner Rand, fertig. Kein Verlauf,
   kein Glanz, kein Schatten. Die Ecken sind 14 px. */
:root .cat,
:root .card,
:root .set-block,
:root .set-held,
:root .th-karte,
:root .tagblatt,
:root .cal-blatt,
:root .ku-kreise,
:root .aw-karte,
:root .aw-kachel,
:root .vk,
:root .pf-gruppe,
:root .pl-held,
:root .pl-ziel-karte,
:root .pl-neu,
:root .pl-feld .pl-neu,
:root .pl-teile,
:root .af-karte,
:root .nz-ton,
:root .kf-held,
:root .go-kopf,
:root .pl-rueck,
:root .ka-reiter,
:root .tg-kopf,
:root .tg-person,
:root .tg-id-karte,
:root .ur-karte,
:root .anf-karte,
:root .ul-zeile,
:root .kal-wechsel{
  background-image:none;
  background-color:var(--surface);
  border-color:var(--line);
  border-radius:var(--r-karte);
  box-shadow:none;
}

/* ------------------------- Reiterleiste -------------------------
   Eine gewoehnliche Leiste am unteren Rand: Flaeche, feine Linie oben.
   Der aktive Reiter traegt einen kurzen Strich am oberen Rand der Leiste
   (der wandert beim Wechseln und Ziehen wie zuvor die Kugel) und die Farbe
   des Designs. Kein Glas, keine Kugel, kein Glanzpunkt. */
nav.tabbar::before{background:none;}
:root nav.tabbar .tabbar-inner{
  border-radius:0;
  background:var(--surface);
  border:0;
  border-top:1px solid var(--line);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
:root .tab-pille{
  top:-1px;bottom:auto;height:3px;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
:root .tab-pille::before{display:none;}
:root .tab-pille::after{
  content:'';position:absolute;left:24%;right:24%;top:0;height:3px;
  border-radius:0 0 3px 3px;background:var(--accent);
}
:root nav.tabbar button + button::before{display:none;}
:root nav.tabbar button{border-radius:var(--r-feld);}
:root nav.tabbar button span{letter-spacing:0;font-weight:500;}
:root nav.tabbar button.active span{font-weight:650;}
:root nav.tabbar button.active{color:var(--ink);}
:root nav.tabbar button.active svg{color:var(--accent-deep);transform:none;}

/* --------------------------- Meldung ---------------------------
   Sie liegt obenauf - darum darf sie einen Schatten haben. Keine Pille. */
:root .toast{
  border-radius:var(--r-feld);
  box-shadow:var(--schatten-oben);
  padding:12px 18px;
  font-weight:500;
}
:root .toast.mit-knopf{padding:7px 7px 7px 16px;}
:root .toast-rueck{border-radius:7px;}

/* ------------------------------ Zen ------------------------------
   Ein ruhiger Knopf statt einer glaenzenden Kugel. */
:root .zen-knopf{
  background-image:none;
  background-color:var(--accent);
  color:var(--on-accent);
  border-radius:18px;
  box-shadow:var(--shadow-lift);
}

/* ------------------- Kleine Zeichen in Zeilen -------------------
   Ein Zeichen vor einer Zeile stand in einer getoenten Kachel - in jeder
   Zeile. Jetzt steht es allein, in der Schriftfarbe. */
:root .th-z{
  background:none;
  border-radius:0;
  color:var(--ink-soft);
  box-shadow:none;
}

/* ------------------------- Woche: Band ------------------------- */
:root .wb-tag{
  border-radius:10px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:none;
}
:root .wb-tag.zu-fest{background:var(--off-soft);border-color:color-mix(in srgb, var(--off) 45%, transparent);}
:root .wb-tag.zu-urlaub{background:var(--ok-soft);border-color:color-mix(in srgb, var(--ok) 45%, transparent);}
:root .wb-tag.heute{background:var(--accent);border-color:var(--accent);box-shadow:none;}
:root .wb-tag.gewaehlt{border-color:var(--ink);}
:root .wb-zahl{font-weight:650;}

/* ------------------- Woche: Tagblatt und Termine ------------------- */
:root .tb-blatt{
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface-2);
}
:root .tb-blatt.heute{background:var(--accent);border-color:var(--accent);}
:root .wk-appt,
:root .wk-appt + .wk-appt{
  border-radius:10px;
  box-shadow:none;
}
:root .tv-bahn{border-radius:4px;}
:root .tv-block{border-radius:3px;box-shadow:0 0 0 1px var(--surface);}
:root .tv-aufg,
:root .af-uhr,
:root .gb-z{box-shadow:none;}
:root .cal-pfeil{border-radius:8px;}

/* -------- Marken: kleine Rechtecke mit weicher Ecke, nicht rund -------- */
:root .info-pille,
:root .ku-wann.kommt,
:root .ck-kw,
:root .wk-dauer,
:root .ku-neu,
:root .go-zahl{border-radius:6px;}
:root .ku-neu{border-radius:var(--r-feld);}

/* ----------------------------- Kalender -----------------------------
   Keine riesige Monatszahl mehr hinter den Tagen - das war Dekoration. */
:root .cal-blatt::after{content:none;}
:root .cal-tag{border-radius:8px;}
:root .ct-zahl,
:root .ck-such{box-shadow:none;}

/* --------------------- Kunden: Liste als Gruppen ---------------------
   Vorher eine eigene getoente Kachel je Kunde mit Verlauf in ihrer Farbe.
   Jetzt eine Karte je Buchstabe, die Kunden darin durch feine Linien
   getrennt - wie ein Adressbuch. Die Farbe steckt im Bild und im Ring. */
:root .cust-gruppe{gap:0;}
:root .cust-gruppe + .cust-gruppe{margin-top:8px;}
:root .cust-liste .ku-zeile,
:root .cust-gruppe > .ku-zeile:first-child,
:root .cust-buchstabe + .ku-zeile,
:root .cust-gruppe > .ku-zeile:last-child{
  border:0;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  background-image:none;
  background-color:var(--surface);
  box-shadow:none;
}
:root .cust-liste .cust-buchstabe + .ku-zeile{
  border-top:1px solid var(--line);
  border-radius:var(--r-karte) var(--r-karte) 0 0;
}
:root .cust-liste .cust-gruppe > .ku-zeile:last-child{
  border-radius:0 0 var(--r-karte) var(--r-karte);
}
:root .cust-liste .cust-buchstabe + .ku-zeile:last-child{
  border-radius:var(--r-karte);
}
:root .cust-liste .ku-zeile.warn,
:root .cust-gruppe > .ku-zeile.warn:last-child{
  border-color:var(--line);
  background-image:none;
  background-color:color-mix(in srgb, var(--danger) 7%, var(--surface));
  box-shadow:none;
}
:root .cust-liste .ku-zeile:has(.ku-tipp:active){transform:none;background-color:var(--surface-2);}
:root .cust-buchstabe{
  margin:0;
  padding:8px 4px 4px;
  background:var(--ground);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
:root .cust-buchstabe b{font-weight:700;letter-spacing:.02em;}
:root .ku-mark.al{box-shadow:none;}
:root .ku-kreise{background-image:none;}
:root .kk-titel{padding-bottom:2px;}

/* ---------------------- Kopfzeile: ruhiger ----------------------
   Nur das Suchfeld hat einen Rahmen - Menue und Einstellungen sind Zeichen
   mit ihrem Wort darunter, ohne Kasten. */
:root .kopf-set:not(.mitte) .ks-kreis{
  background:transparent;
  border-color:transparent;
  color:var(--accent-deep);
}
:root .kopf-set:not(.mitte).active .ks-kreis{
  background:var(--accent-soft);
  border-color:transparent;
}

/* --------------------- Farbe je Bereich: aus ---------------------
   Bisher hat jeder Abschnitt seinen Akzent um ein paar Grad gedreht
   (gruen hier, lila dort, orange daneben) - mit dem Erfolg, dass jede Karte
   eine andere Farbe hatte und nichts zusammengehoerte. Ab jetzt sprechen
   alle Bereiche mit einer Stimme: dem Akzent des Designs. Farbe je Kunde
   (.ku-ton) und je Person im Team bleibt - dort sagt sie, wer gemeint ist. */
:root .set-design,
:root .set-liste .cat,
:root .pf-gruppe,
:root .style-item,
:root .st-chip,
:root .tf-teil,
:root .sk-zeile,
:root .pl-ziel-kopf,
:root .ph-pille,
:root .nz-ton,
:root .td-g-liste,
:root .su-kachel,
:root .su-gruppe{
  --farbe:var(--accent);
}

/* ------------------ Zeichen in Kacheln: allein ------------------ */
:root .cat-zeichen,
:root .ph-p-z,
:root .mn-zeichen,
:root .su-kachel-z,
:root .anf-z{
  background:none;
  border-radius:0;
  box-shadow:none;
  color:var(--ink-soft);
}

/* ---------------- Reiter mit Strich: Organisation, Akte ----------------
   Drei Teile nebeneinander waren ein Schieberegler in einem Kasten mit
   Kugel. Jetzt: eine Reihe Woerter, der offene hat einen Strich darunter,
   der beim Wechsel hinuebergleitet. */
:root .pl-teile,
:root .ka-reiter{
  --luecke:0px;
  padding:0;
  gap:0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
:root .pl-pille,
:root .ka-reiter .pl-pille{
  top:auto;bottom:-1px;left:0;
  height:2px;
  width:calc(100% / 3);
  border-radius:0;
  background:var(--accent);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
:root .ka-reiter .pl-pille::before{display:none;}
:root .pl-teile .cf-chip,
:root .ka-reiter .cf-chip{
  border-radius:0;
  min-height:52px;
  color:var(--ink-soft);
  font-weight:500;
}
:root .pl-teile .cf-chip.on,
:root .ka-reiter .cf-chip.on{color:var(--ink);background:transparent;}
:root .ka-reiter .cf-chip.on .pl-t-w,
:root .pl-teile .cf-chip.on .pl-t-w{font-weight:650;}
:root .pl-teile .pl-t-z .cnt,
:root .ka-reiter .pl-t-z .cnt,
:root .ka-reiter .cf-chip.on .pl-t-z .cnt{
  background:var(--accent);
  color:var(--on-accent);
  opacity:1;
  border-radius:8px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  font-size:10px;
  font-weight:600;
  display:flex;align-items:center;justify-content:center;
}

/* --------------------- Umschalter Woche / Monat --------------------- */
:root .pl-zielart{border-radius:var(--r-feld);}
:root .pl-zielart button{border-radius:8px;}
:root .pl-zielart button.on{box-shadow:none;}

/* --------------- Organisation: Dein Tag, Ziele, Karten --------------- */
:root .pl-held{padding:16px 14px 14px;}
:root .pl-ring{background:conic-gradient(var(--accent) calc(var(--anteil) * 360deg), var(--line) 0);}
:root .pl-ring.voll{background:var(--ok);}
:root .ph-pille{
  border-radius:var(--r-feld);
  background:var(--surface-2);
  border-color:var(--line);
}
:root .ph-warn{border-radius:6px;}
:root .pl-ziel-kopf{
  border-radius:var(--r-feld);
  background:var(--surface-2);
}
:root .pl-ziel-kopf .pl-ring::before,
:root .pl-ring.ph-ring::before{background:var(--surface-2);}
:root .pl-held .pl-ring::before{background:var(--surface);}
:root .pl-neu-zeile input{border-radius:var(--r-feld);background:var(--surface);}
:root .pl-neu-zeile .btn{border-radius:var(--r-feld);}
:root .af-uhr{box-shadow:none;}
:root .af-karte{border-radius:var(--r-karte);}
:root .zv-karte,
:root .allergy-box,
:root .ka-held{
  background-image:none;
  background-color:var(--surface);
  border-color:var(--line);
  border-radius:var(--r-karte);
  box-shadow:none;
}

/* --------------------------- Kundenakte --------------------------- */
:root .ka-held.ku-ton{background-color:var(--surface);border-color:var(--line);}
:root .sk-kreis{
  border-radius:var(--r-feld);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:none;
  color:var(--accent-deep);
}
:root .ka-seit,
:root .zv-marke{border-radius:6px;box-shadow:none;}
:root .avatar.ring-bald{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--kfarbe, var(--accent));}
:root .avatar.ring-nah{box-shadow:0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--kfarbe, var(--accent)) 40%, transparent);}

/* ----------------------------- Einstellungen ----------------------------- */
:root .sh-zahlen > *{
  background:var(--surface-2);
  border-color:transparent;
  border-radius:var(--r-feld);
}
:root .sh-kamera,
:root .vk-kamera{box-shadow:none;}
:root .set-std{border-radius:5px;box-shadow:none;}
:root .set-sw{box-shadow:none;}

/* ------------------------------ Fenster ------------------------------
   Ein Fenster ist ein Blatt, das ueber der Seite liegt: ruhiger Rand,
   einziger echter Schatten der App. Dahinter wird gedimmt, nicht
   verwischt - Weichzeichner auf dem ganzen Bild kostet Leistung und sieht
   nach Betriebssystem-Effekt aus. */
:root .overlay,
:root .overlay.suche-overlay{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:rgba(24,20,18,.46);
}
:root .modal{
  background-image:none;
  background-color:var(--ground);
  border-radius:var(--r-fenster);
  box-shadow:var(--schatten-oben);
}
@media (min-width:600px){ :root .modal{border-radius:var(--r-fenster);} }
:root .modal-close{
  border-radius:8px;
  box-shadow:none;
}
:root .tf-fuss{background-image:none;background-color:var(--ground);box-shadow:0 -1px 0 var(--line);}
:root .tf-zeichen{background:none;border-radius:0;color:var(--ink-soft);box-shadow:none;}
:root .tf-dauer{border-radius:6px;}
:root .tf-teil{border-radius:var(--r-karte);}

/* -------------------------------- Menue -------------------------------- */
:root .mn-zeile{border-radius:var(--r-feld);}
:root .mn-z{background:none;border-radius:0;width:32px;color:var(--accent-deep);}
:root .mn-z.mn-ich{border-radius:50%;background:var(--accent-soft);width:38px;}
:root .mn-profil,
:root .mn-start .mn-zeile{
  border-radius:var(--r-karte);
  box-shadow:none;
}
:root .mn-gruppe{border-radius:var(--r-karte);}
:root .mn-gruppe.auf{box-shadow:none;}
:root .mn-kopf{border-radius:var(--r-karte);}
:root .mn-zahl{border-radius:8px;}

/* -------------------------------- Suche -------------------------------- */
:root .su-hero-z{
  background:none;
  box-shadow:none;
  border-radius:0;
  color:var(--accent-deep);
}
:root .su-kachel{
  background-image:none;
  background-color:var(--surface);
  border-radius:var(--r-karte);
  box-shadow:none;
}
:root .su-k-z{background:none;border-radius:0;color:var(--accent-deep);}
:root .su-feld input{box-shadow:none;}
:root .su-zeile-kopf .su-zu{font-weight:600;}

/* --------------------------------- Zen --------------------------------- */
:root .zen-marke{border-radius:var(--r-feld);}
:root .zen-feld{border-radius:var(--r-feld);box-shadow:none;}
:root .zen-mik,
:root .zen-los{border-radius:var(--r-feld);}

:root .tf-teil,
:root .tf-teil.kf-person,
:root .tf-teil.kf-kontakt,
:root .tf-teil.kf-adresse,
:root .tf-teil.kf-hinweis{box-shadow:none;}
:root .kf-marke,
:root .kf-held .kf-marken > *{border-radius:6px;box-shadow:none;}

/* --------------------- Kalender und Wochenplan: Feinheiten --------------------- */
:root .cal-heute,
:root .tz-knopf,
:root .zs-l-plus,
:root .ck-such,
:root .af-schritt-dazu{border-radius:8px;}
:root .zs-l-plus{border-radius:6px;}
:root .ck-such{border-radius:var(--r-feld);}

/* -------------------------------- Galerie -------------------------------- */
:root .style-open{border-radius:12px;box-shadow:none;}
:root .go-deck,
:root .go-deck.mosaik,
:root .go-deck.leer{border-radius:10px;box-shadow:0 0 0 1px var(--line);}
:root .go-karte .go-deck{border-radius:10px;}
:root .go-karte.on .go-deck{box-shadow:0 0 0 2px var(--ground), 0 0 0 4px var(--ink);}
:root .go-neu .go-deck{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);}
@media (hover:hover) and (pointer:fine){
  :root .go-karte:not(.on):hover .go-deck{box-shadow:0 0 0 1.5px var(--accent);}
}
:root .kf-stand span{border-radius:6px;}
:root .go-zahl{border-radius:6px;box-shadow:none;}

/* ---------------------- Anmeldung und Registrierung ----------------------
   Vorher: Lichtschein hinter allem, das Logo auf einer Glasscheibe in einer
   gestrichelten Umlaufbahn mit kreisendem Punkt, die Felder auf einer
   milchigen Glasflaeche, ein Kaestchen mit Funkel-Zeichen. Jetzt: das Logo
   steht auf dem Papier, darunter ein Blatt mit den Feldern. */
:root .sperre::before,
:root .zg-licht{display:none;}
:root .sperre-logo-ring{
  background:none;
  border-color:transparent;
  box-shadow:none;
}
:root .sperre-logo-ring::before,
:root .sperre-logo-ring::after,
:root .zg-bahn,
:root .zg-fort{display:none;}
:root .sperre-logo{filter:none;}
:root .sperre-name{font-weight:650;letter-spacing:-.015em;}
:root .sperre-feld{
  background-image:none;
  background-color:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-karte);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
:root .zg-konto{border-radius:var(--r-feld);box-shadow:none;}
:root .zg-ein{border-radius:var(--r-feld);box-shadow:none;}
:root .zg-perle i{box-shadow:none;}
:root .zg-modell{border-radius:var(--r-karte);box-shadow:none;}
:root .zg-haken{box-shadow:none;}
:root .zg-impuls{
  background:none;
  border:0;
  border-left:2px solid var(--accent);
  border-radius:0;
  box-shadow:none;
  padding:2px 0 2px 14px;
  text-align:left;
}
:root .zg-impuls-zeichen{display:none;}
:root .zg-impuls figcaption{text-transform:none;letter-spacing:0;font-size:12px;}
:root .ein-tipp-z{background:none;border-radius:0;box-shadow:none;}
:root .ein-tipp{border-radius:var(--r-karte);box-shadow:var(--schatten-oben);}
:root .zg-impuls{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}

/* --------------------------- Eingang (Startbild) ---------------------------
   Der Aufbau des Zeichens bleibt, wie er ist. Weg sind der Lichtschein
   hinter dem Logo und die Farbverlaufs-Schrift: der letzte Satz steht in
   der Schriftfarbe, ein Stueck kraeftiger. */
:root .sp-schein{display:none;}
:root .sp-worte span.drei{
  background:none;
  color:var(--ink);
  -webkit-text-fill-color:currentColor;
}
:root .cust-liste .cust-gruppe > .ku-zeile:first-child{
  border-top:1px solid var(--line);
  border-radius:var(--r-karte) var(--r-karte) 0 0;
}
:root .cust-liste .cust-gruppe > .ku-zeile:first-child:last-child{border-radius:var(--r-karte);}

/* ---------------- Rechner: Reiter oben als Text mit Strich ---------------- */
:root nav.topnav button{
  border-radius:0;
  border-bottom:2px solid transparent;
  padding:10px 14px 8px;
}
:root nav.topnav button.active{
  background:none;
  border-bottom-color:var(--accent);
  color:var(--ink);
  font-weight:650;
}
@media (hover:hover) and (pointer:fine){
  :root nav.topnav button:not(.active):hover{background:none;color:var(--ink);border-bottom-color:var(--line);}
}
:root .cal-blatt .ck-titel h1 span,
:root .cust-buchstabe,
:root .tg-id-oben b,
:root .tg-id-mitte small{letter-spacing:.01em;text-transform:none;}

/* --- Karten, die gefuellt oder getoent sind, bleiben es (nur ohne Verlauf) --- */
:root .tg-id-karte{
  background-image:none;
  background-color:var(--accent);
  border-color:transparent;
  border-radius:var(--r-karte);
  box-shadow:none;
  color:var(--on-accent);
}
:root .tg-id-karte::after{display:none;}
:root .anf-karte,
:root .anf-karte.tn-karte{
  --tn:var(--accent);
  background-image:none;
  background-color:color-mix(in srgb, var(--tn) 9%, var(--surface));
  border-color:color-mix(in srgb, var(--tn) 38%, var(--line));
  border-radius:var(--r-karte);
  box-shadow:none;
}
:root .anf-karte.anf-urlaub{--tn:var(--ok);}
:root .anf-karte.anf-krank{--tn:var(--wait);}
:root .tg-person.offen{background-color:var(--surface-2);}
:root .tg-person,
:root .ur-karte{border-color:var(--line);}

/* ------------------------ Organisation und Aufgaben: Rest ------------------------ */
:root .td-gruppe{
  background-image:none;
  background-color:var(--surface);
  border-radius:var(--r-karte);
  box-shadow:none;
}
:root .pl-x,
:root .td-teilen,
:root .pl-g-alle,
:root .af-pill,
:root .af-wann,
:root .pl-wann-frage,
:root .td-zahl,
:root .pl-g-zahl{border-radius:6px;box-shadow:none;}
:root .pl-x,
:root .td-teilen,
:root .pl-g-alle{border-radius:8px;}
:root .pl-g-kopf{
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding-left:2px;
  border-radius:0;
}
:root .pl-feld .af-erledigt-kopf{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
/* Zustand eines Termins (Stattgefunden, Offen, Abgesagt): eine kleine Marke */
:root .tag-done,
:root .tag-open,
:root .tag-cancel{
  text-transform:none;
  letter-spacing:0;
  border-radius:6px;
  font-weight:600;
}