/* =====================================================================
   NAPOLEON — styles.css
   Richtung A · „Tiefe und Material" (Siegerentwurf), auslieferungsfähig.

   Dunkel ist hier kein Modus, sondern der Grundzustand. Warmes Schwarz
   statt blaustichigem Grau. Alles Sichtbare liegt in Ebenen über diesem
   Grund: feine Körnung, Licht von oben, Kanten aus Licht statt Linien.

   EIN Akzent, und er hat eine Bedeutung:
     Bernstein (--stimme) = Napoleon spricht.
   Wo er nicht spricht — im gesamten Tracking — gibt es ihn nicht.
   Dort rechnen nur Zahlen in Stein, Salbei und Rost.

   Die Schriften werden in index.html per <link> geladen (preconnect +
   stylesheet), nicht per @import: der Service Worker legt sie dann in
   einem eigenen, dauerhaften Cache ab. Ohne das fiele offline die
   Serif-Unterscheidung weg — und mit ihr der halbe Entwurf.
   ===================================================================== */

:root{
  color-scheme: dark;

  /* --- Grund und Ebenen (warm, nie blau) --- */
  --grund:    #0D0C0B;
  --ebene-1:  #141211;
  --ebene-2:  #1A1715;
  --ebene-3:  #221E1B;
  --mulde:    #0A0908;          /* Vertiefungen: Eingaben, Schienen */

  --kante:        rgba(255,240,224,.075);
  --kante-stark:  rgba(255,240,224,.14);
  --glanz:        rgba(255,240,224,.06);   /* innere Oberkante */

  /* --- Schrift ---
     --text-3 trägt die gesamte Kleinschrift (label, .tiny, h2.sec,
     .card h3, ::placeholder, .top-sub, inaktive .tab, .vl-d, .vl-w,
     .bar .n). Sie muss deshalb AA erfüllen, auch auf der hellsten
     Kartenfläche (.card.napo ≈ #251F1A):
       #948B81 auf #0D0C0B = 5,83:1   ·   auf #1A1715 = 5,33:1
       #948B81 auf #221E1B = 4,94:1   ·   auf #251F1A = 4,86:1          */
  --text:   #F0EAE2;
  --text-2: #A39A91;
  --text-3: #948B81;

  /* --- Der eine Akzent: seine Stimme --- */
  --stimme:     #EFB07C;
  --stimme-15:  rgba(239,176,124,.15);
  --stimme-30:  rgba(239,176,124,.30);

  /* --- Licht (Handlungen, aktive Zustände) --- */
  --licht:      #F3EDE5;
  --ring:       rgba(243,237,229,.62);     /* Tastaturfokus */

  /* --- Datenfarben: nüchtern, gedämpft, ohne Stimme --- */
  --stein:   #D3C1A8;
  --kupfer:  #C98A6B;
  --salbei:  #6FB79A;
  --schiefer:#8FA3BF;
  --mauve:   #B98FA8;
  --oliv:    #A9A06E;

  /* --- Ampel: drei auf einer Skala, blau daneben.
         Je Farbe zusätzlich als RGB-Tripel, damit Füllung und Fassung
         ohne color-mix() aus derselben Quelle kommen. --- */
  --amp-gruen: #3FB984;  --amp-gruen-rgb: 63,185,132;
  --amp-gelb:  #E0AE45;  --amp-gelb-rgb:  224,174,69;
  --amp-rot:   #DF5A52;  --amp-rot-rgb:   223,90,82;
  --amp-blau:  #6A9DDC;  --amp-blau-rgb:  106,157,220;

  /* --- Material --- */
  --r-s: 11px;  --r-m: 14px;  --r-l: 18px;  --r-xl: 22px;
  --heben-1: 0 1px 1px rgba(0,0,0,.55), 0 6px 18px -12px rgba(0,0,0,.9);
  --heben-2: 0 1px 2px rgba(0,0,0,.6), 0 16px 40px -24px rgba(0,0,0,1);
  --senken:  inset 0 1px 3px rgba(0,0,0,.55);
  --feder: cubic-bezier(.2,.8,.2,1);

  /* --- Schriftfamilien --- */
  --sans: "Inter Tight", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;

  --safe-b: env(safe-area-inset-bottom, 0px);

  /* --- Altnamen: geprüft per grep gegen app.js/tracking.js.
         --gold ist raus — die Gewichtslinie zeichnet inzwischen mit
         currentColor (.spark setzt die Farbe, siehe unten).
         --warn bleibt, weil DIESE Datei ihn braucht (.err, .rel-tief,
         .zuviel); im JS kommt er nicht mehr vor. --- */
  --warn: #E0837C;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  min-height:100dvh;
  color:var(--text);
  font-family:var(--sans);
  font-size:16px; line-height:1.62;
  letter-spacing:-.005em;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  /* App-weit Textdarstellung für Zeichen, die iOS sonst als buntes Emoji
     setzt (☀ ✎ ↑ ❦ …). Echte Emoji ohne Textform bleiben unberührt. */
  font-variant-emoji:text;
  /* Eine warme Lichtquelle über dem Interface. Alles darunter wirkt beleuchtet. */
  background:
    radial-gradient(130% 60% at 50% -12%, rgba(239,176,124,.085), transparent 62%),
    radial-gradient(90% 50% at 50% 108%, rgba(239,176,124,.035), transparent 70%),
    var(--grund);
  background-attachment:fixed;
}

/* Körnung: nimmt dem Schwarz das Digitale. Liegt über allem, fängt nichts ab.
   inset:0 — die Schicht ist fixiert, mehr als der Viewport wird nie sichtbar. */
body::before{
  content:''; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hidden{display:none !important}

/* Markieren ist neutral — sonst leuchtete seine Stimme auch in
   Ernährung und Gewicht auf, wo er schweigt. */
::selection{background:rgba(243,237,229,.24);color:var(--text)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--kante-stark);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* Grundfall für alles Fokussierbare. Elemente mit eigenem Schatten
   (Knöpfe, Eingaben, Ampel) wiederholen ihn weiter unten samt Ring —
   sonst schlüge ihre eigene box-shadow-Regel diese hier. */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--grund),0 0 0 4px var(--ring)}

/* ====================== Anmeldung ====================== */

.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:28px}
.login-card{width:100%;max-width:340px;text-align:center}

.mark{
  position:relative;
  width:72px;height:72px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:400;font-size:38px;line-height:1;
  color:var(--text);
  background:linear-gradient(180deg,var(--ebene-3),var(--ebene-1));
  border:1px solid var(--kante-stark);border-radius:50%;
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-2), 0 0 44px -10px var(--stimme-30);
}
.login-card h1{
  font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.1;
  margin:0 0 8px;letter-spacing:-.015em;
}
.login-sub{color:var(--text-2);margin:0 0 28px;font-size:14.5px}
.login-sub code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--ebene-2);border:1px solid var(--kante);border-radius:6px;padding:1px 5px;
}
.login-card input{width:100%;margin-bottom:10px}
.login-card .btn{width:100%;margin-top:6px}
.err{color:var(--warn);font-size:13px;min-height:18px;margin:12px 0 0}

/* ====================== Gerüst ====================== */

.app{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(68px + var(--safe-b))}

.topbar{
  position:sticky;top:0;z-index:15;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:max(16px,env(safe-area-inset-top)) 20px 13px;
  background:linear-gradient(180deg, rgba(13,12,11,.92), rgba(13,12,11,.72));
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--kante);
}
.topbar h1{
  font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;
  margin:0;letter-spacing:-.01em;
}
.top-sub{margin:3px 0 0;font-size:11.5px;color:var(--text-3);letter-spacing:.05em}

.view{flex:1;width:100%;max-width:720px;margin:0 auto;padding:22px 20px 30px}

/* Inhalt steigt beim Wechsel leicht auf — die Ansicht wird gesetzt, nicht geschaltet. */
.view > *{animation:auf .38s var(--feder) backwards}
.view > :nth-child(2){animation-delay:.03s}
.view > :nth-child(3){animation-delay:.06s}
.view > :nth-child(4){animation-delay:.09s}
.view > :nth-child(n+5){animation-delay:.12s}
@keyframes auf{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Das Gespräch ist davon ausgenommen: paintChat() baut die Liste bei jedem
   Absenden neu auf — die Ansicht würde bei jeder Nachricht komplett flattern. */
.view > .chat, .view > .composer{animation:none}

/* ---- Tabbar: sechs Reiter, geschliffenes Glas ---- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(6,1fr);
  background:linear-gradient(180deg, rgba(20,18,17,.80), rgba(13,12,11,.96));
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border-top:1px solid var(--kante);
  box-shadow:inset 0 1px 0 var(--glanz);
  padding:6px 4px var(--safe-b);
}
.tab{
  background:none;border:none;padding:2px 0 7px;cursor:pointer;
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.01em;
  color:var(--text-3);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  white-space:nowrap;
  transition:color .2s var(--feder);
}
/* Die Reiterzeichen (☀ ◧ ❦ ✦ ◷ ❝) sind Schriftzeichen, keine Emoji.
   iOS ersetzt sie sonst durch bunte Bilder — in einer App, deren These
   „ein Akzent" lautet. Drei Riegel: Textpräsentation erzwingen, eine
   Symbolschrift vor der Emoji-Schrift, und U+FE0E im Markup. */
.tab span{
  width:38px;height:27px;display:grid;place-items:center;
  font-family:"Apple Symbols","Segoe UI Symbol",var(--sans);
  font-variant-emoji:text;
  font-size:15px;line-height:1;border-radius:9px;
  transition:background .22s var(--feder), color .2s, box-shadow .22s, transform .16s var(--feder);
}
.tab.active{color:var(--text)}
.tab.active span{
  color:var(--text);
  background:rgba(243,237,229,.09);
  box-shadow:inset 0 1px 0 rgba(255,240,224,.09);
}
.tab:active span{transform:scale(.93)}
.tab:focus-visible{outline:none}
.tab:focus-visible span{box-shadow:0 0 0 2px var(--grund),0 0 0 4px var(--ring)}

/* ====================== Bausteine ====================== */

h2.sec{
  display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
  margin:34px 0 13px;padding:0;border:none;
}
h2.sec::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--kante-stark),transparent);
}
h2.sec:first-child{margin-top:2px}
h2.sec .tiny{letter-spacing:.04em;text-transform:none;font-weight:400;margin-left:-5px}

/* Der Stift in der Überschrift (Kategorien bearbeiten). order:1 schiebt ihn
   HINTER die Linie aus ::after, ans Ende der Zeile — sonst stünde er mittendrin.
   30px sichtbar, 44px greifbar; die negativen Ränder halten die Zeilenhöhe. */
.editbtn{
  order:1;position:relative;flex:0 0 auto;
  width:30px;height:30px;margin:-8px -6px -8px 0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--r-s);
  color:var(--text-3);font-family:var(--sans);font-size:14px;line-height:1;
  font-variant-emoji:text;cursor:pointer;
  transition:color .18s, background .18s;
}
.editbtn::before{content:'';position:absolute;inset:-7px;border-radius:var(--r-m)}
.editbtn:active{color:var(--text);background:rgba(243,237,229,.07)}
.editbtn:focus-visible{box-shadow:0 0 0 2px var(--grund),0 0 0 4px var(--ring)}

/* Karten sind aus dem Grund gehoben: Licht auf der Oberkante, Schatten darunter. */
.card{
  background:linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
  border:1px solid var(--kante);border-radius:var(--r-l);
  padding:18px 20px;margin-bottom:13px;
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-1);
}
.card.quiet{background:none;border-color:transparent;box-shadow:none}
.card h3{
  margin:0 0 9px;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);
}
.card p{margin:0 0 11px}
.card p:last-child{margin-bottom:0}
.card.quiet > p:first-child{margin-top:0}

.muted{color:var(--text-2)}
.tiny{font-family:var(--sans);font-size:11.5px;color:var(--text-3);letter-spacing:.03em}
.center{text-align:center}

label{
  display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);margin:0 0 7px;
}

/* Eingaben sind Vertiefungen — das Gegenstück zu den gehobenen Karten. */
textarea, select,
input[type=text], input[type=date], input[type=number],
input[type=email], input[type=password], input[type=search],
.login-card input{
  width:100%;padding:13px 15px;
  border:1px solid var(--kante);border-radius:var(--r-m);
  background:var(--mulde);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  box-shadow:var(--senken);
  caret-color:var(--text);
  transition:border-color .18s, box-shadow .18s, background-color .18s;
  -webkit-appearance:none;appearance:none;
}
/* Nur wo Dennis IHN anspricht, blinkt sein Bernstein mit. Im Tracking
   gibt es keine textarea — dort bleibt der Cursor in Elfenbein. */
textarea{
  font-family:var(--serif);font-size:17px;line-height:1.6;resize:vertical;min-height:124px;
  caret-color:var(--stimme);
}
input[type=number]{font-variant-numeric:tabular-nums}
::placeholder{color:var(--text-3);opacity:1}

/* background-color statt background: die Kurzschrift löschte das
   background-image — und damit den selbstgebauten Select-Pfeil, der auf
   iOS nach dem Picker dauerhaft fokussiert bleibt und nie zurückkäme. */
textarea:focus, select:focus, input:focus{
  outline:none;border-color:var(--kante-stark);
  background-color:var(--ebene-1);
  box-shadow:var(--senken), 0 0 0 3px rgba(243,237,229,.07);
}
textarea:focus-visible, select:focus-visible, input:focus-visible{
  box-shadow:var(--senken), 0 0 0 2px var(--grund), 0 0 0 4px var(--ring);
}
select{
  font-family:var(--sans);font-size:16px;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),
                   linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
/* iOS: Datumsfelder brauchen eine feste Mindesthöhe, sonst fallen sie zusammen.
   Kein sepia() auf dem Kalendersymbol — das wäre Bernstein im Tracking. */
input[type=date]{min-height:46px}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.72);cursor:pointer}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.field{margin-bottom:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- Knöpfe: gehobene Fläche, kein Verlauf als Dekor ---- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:var(--r-m);
  border:1px solid var(--kante-stark);
  background:linear-gradient(180deg,var(--ebene-3),var(--ebene-1));
  color:var(--text);
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:-.005em;
  cursor:pointer;
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-1);
  transition:transform .14s var(--feder), box-shadow .18s, filter .18s;
}
.btn:active{transform:translateY(1px) scale(.994);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);filter:brightness(.94)}
.btn:focus-visible{
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-1),
             0 0 0 2px var(--grund), 0 0 0 4px var(--ring);
}
/* Elfenbein, kein Bernstein: tracking.js rendert den Sichern-Knopf als
   „btn primary wide" — ein bernsteinfarbener Lichthof hätte seine Stimme
   mitten in Ernährung und Gewicht leuchten lassen. */
.btn.primary{
  background:linear-gradient(180deg,#FFFCF7,var(--licht));
  color:#100E0C;border-color:transparent;font-weight:600;
  box-shadow:0 1px 1px rgba(0,0,0,.4), 0 12px 30px -14px rgba(243,237,229,.42);
}
.btn.primary:active{filter:brightness(.93)}
.btn.primary:focus-visible{
  box-shadow:0 1px 1px rgba(0,0,0,.4), 0 12px 30px -14px rgba(243,237,229,.42),
             0 0 0 2px var(--grund), 0 0 0 4px var(--ring);
}
.btn.wide{width:100%}
.btn.small{padding:9px 14px;font-size:12.5px;border-radius:var(--r-s)}
/* 35px hoch (33px Polsterkasten) — Trefferfläche unsichtbar auf 44px gezogen */
.btn.small::before{content:'';position:absolute;inset:-5.5px -2px;border-radius:var(--r-m)}
.btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}

.linkbtn{
  position:relative;
  background:linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
  border:1px solid var(--kante);border-radius:var(--r-s);
  color:var(--text-2);font-size:16px;line-height:1;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:inset 0 1px 0 var(--glanz);
  font-variant-emoji:text;
  transition:color .18s, transform .14s var(--feder);
}
/* 34px sichtbar, 44px greifbar (Apple HIG): 34 − 2×1px Rahmen = 32, also −6px */
.linkbtn::before{content:'';position:absolute;inset:-6px;border-radius:var(--r-m)}
.linkbtn:active{transform:scale(.93);color:var(--text)}
.linkbtn:disabled{opacity:.25}
.linkbtn:focus-visible{
  box-shadow:inset 0 1px 0 var(--glanz), 0 0 0 2px var(--grund), 0 0 0 4px var(--ring);
}

/* Der Umschalter Hell/Dunkel — steht links vom Abmelden-Knopf.
   margin-left:auto ist nötig, weil .topbar mit space-between arbeitet: mit
   drei Kindern (Titelblock, Umschalter, Abmelden) landete der Umschalter
   sonst mittig. So rücken beide Knöpfe zusammen nach rechts.
   Die 12px Lücke der .topbar ist genau das Maß, bei dem sich die beiden
   unsichtbaren 44px-Trefferflächen (.linkbtn::before, inset:-6px) berühren,
   ohne einander zu überlappen — Apple HIG erfüllt, ohne Fehlgriffe.
   Die Symbolschrift wie bei .tab span und .editbtn: ◐ ist ein Schriftzeichen,
   kein Emoji, und soll auch auf iOS eines bleiben.
   Das Zeichen darf das JS je nach Stellung austauschen (◐ System · ☀ hell ·
   ☾ dunkel); die Trefferfläche und die Breite bleiben davon unberührt. */
#theme{
  margin-left:auto;
  font-family:"Apple Symbols","Segoe UI Symbol",var(--sans);
  font-size:15px;
}

/* ---- Zitat und Abendfrage ---- */
blockquote{
  margin:16px 0;padding:2px 0 2px 18px;border:none;position:relative;
  font-family:var(--serif);font-size:18px;font-style:italic;color:var(--text-2);
}
blockquote::before{
  content:'';position:absolute;left:0;top:.3em;bottom:.3em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--kante-stark),transparent);
}

/* Die Frage für den Abend — das kostbarste Objekt der App. */
.frage{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(239,176,124,.08), transparent 65%),
    linear-gradient(180deg,var(--ebene-3),var(--ebene-1));
  border:1px solid var(--stimme-15);border-radius:var(--r-xl);
  padding:24px 24px;margin:18px 0;
  box-shadow:inset 0 1px 0 rgba(255,222,190,.10), 0 24px 60px -34px rgba(239,176,124,.6), var(--heben-2);
}
.frage::before{
  content:'';position:absolute;top:0;left:22%;right:22%;height:1px;
  background:linear-gradient(90deg,transparent,var(--stimme-30),transparent);
}
.frage .q{
  font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.42;
  letter-spacing:-.01em;margin:0;color:var(--text);
}
.frage .tiny{margin:0 0 10px;color:var(--stimme);opacity:.9}

.badge{
  display:inline-flex;align-items:center;
  font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-2);
  background:var(--ebene-2);border:1px solid var(--kante);
  border-radius:99px;padding:4px 11px;margin:0 6px 6px 0;
}
/* Leiser als der Primärknopf: in renderMuster stehen bis zu drei davon
   nebeneinander, und sie sagen nur „hier steht eine Zahl". */
.badge.on{
  background:var(--ebene-3);color:var(--text);
  border-color:var(--kante-stark);font-weight:600;
}

/* ---- Tarot ---- */
.tarot-pick{display:flex;gap:10px;align-items:center}
.tarot-pick select{flex:1}

/* ====================== Muster ====================== */

.bars{display:flex;flex-direction:column;gap:9px}
.bar{
  display:grid;grid-template-columns:minmax(96px,44%) 1fr auto;gap:12px;align-items:center;
  font-size:14.5px;color:var(--text-2);
}
/* „Königin der Schwerter" brach um und verzog die ganze Balkenliste. */
.bar > span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{display:block;min-width:0;height:7px;background:var(--mulde);border-radius:99px;overflow:hidden;box-shadow:var(--senken)}
.bar .fill{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg, rgba(211,193,168,.45), var(--stein));
}
.bar .n{font-size:12px;color:var(--text-3);min-width:20px;text-align:right;font-variant-numeric:tabular-nums}

/* ====================== Gespräch ====================== */

.chat{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
/* Keine Animation: paintChat() zeichnet bei jeder gesendeten Nachricht
   alle Blasen neu — das ganze Gespräch hätte bei jedem Absenden geflattert. */
.msg{max-width:86%;padding:13px 17px;white-space:pre-wrap}
.msg.dennis{
  align-self:flex-end;
  background:linear-gradient(180deg,var(--ebene-3),var(--ebene-2));
  border:1px solid var(--kante);
  border-radius:var(--r-l) var(--r-l) 6px var(--r-l);
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-1);
}
.msg.napoleon{
  align-self:flex-start;position:relative;
  background:none;border:none;border-radius:0;
  padding:4px 0 4px 18px;
  font-family:var(--serif);font-size:17.5px;line-height:1.58;color:var(--text);
}
.msg.napoleon::before{
  content:'';position:absolute;left:0;top:.35em;bottom:.35em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--stimme),rgba(239,176,124,0));
}
.composer{display:flex;gap:10px;align-items:flex-end}
.composer textarea{flex:1;min-width:0;min-height:54px;font-size:16px;font-family:var(--sans)}
.composer .btn{flex:0 0 auto;width:50px;height:50px;padding:0;font-size:17px}

/* ====================== Lesen ====================== */

.drop{
  border:1px dashed var(--kante-stark);border-radius:var(--r-l);
  padding:30px 18px;text-align:center;
  color:var(--text-2);font-family:var(--sans);font-size:13.5px;cursor:pointer;
  background:linear-gradient(180deg,var(--ebene-1),rgba(20,18,17,.35));
  transition:border-color .2s, background .2s, transform .14s var(--feder);
}
.drop:active{transform:scale(.995);border-color:var(--stimme-30);background:var(--ebene-2)}
.thumbs{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.thumbs img{
  width:76px;height:76px;object-fit:cover;border-radius:var(--r-s);
  border:1px solid var(--kante-stark);box-shadow:var(--heben-1);
}

/* ====================== Zustände ====================== */

.spin{
  display:inline-block;width:14px;height:14px;
  border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:sp .7s linear infinite;opacity:.75;
}
@keyframes sp{to{transform:rotate(360deg)}}

.think{
  display:flex;align-items:center;gap:10px;color:var(--text-3);
  font-family:var(--sans);font-size:13px;padding:10px 0;
}

.toast{
  position:fixed;left:50%;bottom:calc(84px + var(--safe-b));z-index:80;
  transform:translateX(-50%);
  background:rgba(34,30,27,.92);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  color:var(--text);border:1px solid var(--kante-stark);border-radius:var(--r-m);
  padding:12px 18px;font-family:var(--sans);font-size:13.5px;
  max-width:86vw;text-align:center;
  box-shadow:var(--heben-2);
  animation:toast-auf .34s var(--feder);
}
@keyframes toast-auf{from{opacity:0;transform:translate(-50%,10px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* =====================================================================
   NAPOLEONS STIMME — der einzige Ort, an dem Bernstein erscheint
   ===================================================================== */

.spricht{
  position:relative;border:none;
  font-family:var(--serif);font-weight:400;font-size:20.5px;line-height:1.52;
  letter-spacing:-.008em;color:var(--text);
  margin:8px 0 24px;padding:2px 0 2px 20px;
}
.spricht::before{
  content:'';position:absolute;left:0;top:.3em;bottom:.3em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--stimme),rgba(239,176,124,0));
}
.spricht.center{text-align:center;padding:6px 0;color:var(--text-2)}
.spricht.center::before{display:none}

.card.napo{
  position:relative;border-left:none;
  background:
    linear-gradient(100deg, rgba(239,176,124,.05), transparent 46%),
    linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
  border-color:var(--stimme-15);
}
.card.napo::before{
  content:'';position:absolute;left:0;top:16px;bottom:16px;width:2px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,var(--stimme),rgba(239,176,124,0));
}
.card.napo p{font-family:var(--serif);font-size:17.5px;line-height:1.58}

/* Die Resonanz am Morgen: kein Kasten, nur seine Stimme. */
.card.quiet.napo{
  background:none;border-color:transparent;box-shadow:none;
  padding:2px 0 2px 20px;margin:4px 0 22px;
}
.card.quiet.napo::before{top:.3em;bottom:.3em}
.card.quiet.napo p{font-size:19px;line-height:1.55;color:var(--text)}

/* =====================================================================
   TRACKING — hier rechnet die App. Kein Bernstein, keine Stimme.
   ===================================================================== */

.daynav{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:20px}
.daynav input[type=date]{
  width:auto;min-height:44px;text-align:center;font-family:var(--sans);font-size:15px;
  padding:9px 14px;border-radius:99px;
}
.daynav .linkbtn{width:38px;height:38px;border-radius:50%;font-size:19px;padding:0}
.daynav .linkbtn::before{inset:-4px;border-radius:50%}   /* 36 + 2×4 = 44 */

.routines{
  background:linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
  border:1px solid var(--kante);border-radius:var(--r-l);overflow:hidden;
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-1);
}
.routine{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px 9px 18px;border-bottom:1px solid var(--kante);
}
.routine:last-child{border-bottom:none}
.rl{
  font-size:15px;color:var(--text);letter-spacing:-.005em;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------------------------------------------------------------
   Die Ampel — gelesen wird die FORM, nicht die Farbe

   grün · gelb · rot sind EINE monotone Reihe:
       voll  →  halb (von unten)  →  leer (kräftiger Ring).
   Auch ungesetzt zeigt jede Fassung schon ihre Form, nur gedämpft;
   das Setzen hebt dieselbe Form auf volle Stärke. So ist der Zustand
   ohne Legende und ohne Farbsehen lesbar.

   blau steht NICHT in dieser Reihe. Es ist keine vierte Stufe,
   sondern eine andere Kategorie — „bewusst ausgesetzt, in Ordnung":
   eigene Form (abgerundetes Quadrat), 14px Abstand, Haarlinie davor,
   Pausenzeichen in der Mitte, ruhige Füllung. Keine Glut, kein Halo.
   --------------------------------------------------------------- */

.lights{display:flex;align-items:center;gap:15px;flex:0 0 auto}

/* Wie .tab span: Textdarstellung erzwingen, damit ✎ ↑ × nicht als
   farbige Emoji gerendert werden (tracking.js erzeugt sie). */
.editbtn,.grip,.del{font-family:"Apple Symbols","Segoe UI Symbol",var(--sans);
  font-variant-emoji:text}

.light{
  position:relative;flex:0 0 auto;
  width:29px;height:29px;padding:0;cursor:pointer;
  border-radius:50%;
  /* getrennt notiert: fiele --amp-rgb je aus, verlöre nur die Farbe
     ihren Wert — nicht die ganze Rahmen-Kurzschrift samt Linienart.
     --amp-rand ist je Farbe so gewählt, dass die ungesetzte Fassung
     rund 3,2:1 zur Kartenfläche hält (WCAG 1.4.11) — Rot braucht dafür
     mehr Deckung als Gelb, weil sein Ton dunkler ist. */
  border-width:1.5px;border-style:solid;
  border-color:rgba(var(--amp-rgb),var(--amp-rand));
  background-color:transparent;
  background-repeat:no-repeat;background-size:100% 100%;
  box-shadow:var(--senken);
  transition:transform .16s var(--feder), background-color .2s var(--feder),
             border-color .2s, box-shadow .24s var(--feder);
}
/* 29px sichtbar, 44×44 greifbar — die Zeile ist 48px hoch, der Platz ist da.
   inset rechnet gegen den POLSTERKASTEN, nicht gegen den Rahmenkasten:
   29px − 2×1,5px Rahmen = 26px, also braucht es −9px für 44px.
   Bei .blau trägt dieselbe Fläche zusätzlich die trennende Haarlinie. */
/* Trefferfläche fest 44×44 — inset rechnet gegen den Polsterkasten und
   schrumpft mit der Randbreite (.light.rot.on hat 3px). */
.light::before{content:'';position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);border-radius:14px}
.light:active{transform:scale(.88)}
.light:focus-visible{outline:2px solid var(--ring);outline-offset:3px}

.light.gruen{--amp:var(--amp-gruen); --amp-rgb:var(--amp-gruen-rgb); --amp-rand:.58}
.light.gelb {--amp:var(--amp-gelb);  --amp-rgb:var(--amp-gelb-rgb);  --amp-rand:.53}
.light.rot  {--amp:var(--amp-rot);   --amp-rgb:var(--amp-rot-rgb);   --amp-rand:.74}
.light.blau {--amp:var(--amp-blau);  --amp-rgb:var(--amp-blau-rgb);  --amp-rand:.62}

/* GEHALTEN — volle Scheibe */
.light.gruen{background-image:linear-gradient(rgba(var(--amp-rgb),.18) 0 0)}
.light.gruen.on{background-image:linear-gradient(var(--amp) 0 0)}

/* TEILWEISE — von unten halb gefüllt */
.light.gelb{background-image:linear-gradient(to top, rgba(var(--amp-rgb),.22) 0 50%, transparent 50% 100%)}
.light.gelb.on{background-image:linear-gradient(to top, var(--amp) 0 50%, transparent 50% 100%)}

/* NICHT GEPACKT — leer. Gesetzt wird der Ring kräftig, die Mitte bleibt leer. */
.light.rot{background-image:none}
.light.rot.on{border-width:3px;background-image:linear-gradient(rgba(var(--amp-rgb),.14) 0 0)}

/* Gesetzt: volle Fassung, Mulde weg, ruhiger Außenring */
.light.gruen.on,.light.gelb.on,.light.rot.on{
  border-color:var(--amp);
  box-shadow:0 0 0 3px rgba(var(--amp-rgb),.18);
}

/* AUSGESETZT — daneben, nicht darunter */
.light.blau{
  margin-left:14px;
  border-radius:9px;
  background-image:
    linear-gradient(rgba(var(--amp-rgb),.50) 0 0),
    linear-gradient(rgba(var(--amp-rgb),.50) 0 0);
  background-size:2.5px 11px, 2.5px 11px;
  background-position:calc(50% - 3.5px) 50%, calc(50% + 3.5px) 50%;
}
.light.blau::before{
  border-radius:12px;
  background:linear-gradient(var(--kante-stark) 0 0) no-repeat left center;
  background-size:1px 19px;
}
.light.blau.on{
  /* gedämpft gegen die Fläche gemischt: gesetzt, aber ruhig —
     nie so laut wie ein Signal der Skala daneben. */
  background-color:rgba(var(--amp-rgb),.82);
  border-color:var(--amp);
  background-image:
    linear-gradient(var(--mulde) 0 0),
    linear-gradient(var(--mulde) 0 0);
  box-shadow:none;            /* ausdrücklich: keine Glut, kein Halo */
}

/* ---- Kategorien bearbeiten ---- */
.editlist{
  background:linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
  border:1px solid var(--kante);border-radius:var(--r-l);overflow:hidden;
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-1);
}
.editrow{
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  border-bottom:1px solid var(--kante);
}
.editrow:last-child{border-bottom:none}
/* Die Zeile IST das Feld — keine zweite Vertiefung in der Vertiefung. */
.editrow input{
  border:none;border-radius:0;background:none;box-shadow:none;
  padding:12px 4px;font-size:16px;
}
.editrow input:focus{
  border-color:transparent;background-color:rgba(243,237,229,.05);box-shadow:none;
}
.editrow input:focus-visible{box-shadow:inset 0 0 0 2px var(--ring)}
.grip,.del{
  background:none;border:none;padding:0;cursor:pointer;
  width:100%;height:44px;                       /* HIG, ohne Zutun */
  color:var(--text-3);font-family:var(--sans);font-size:17px;line-height:1;
  font-variant-emoji:text;
  transition:color .18s;
}
.del{font-size:21px}
.grip:active{color:var(--text)}
.del:active{color:var(--warn)}
.grip:focus-visible,.del:focus-visible{
  box-shadow:none;outline:2px solid var(--ring);outline-offset:-4px;border-radius:var(--r-s);
}
.addrow{display:flex;gap:10px;align-items:center}
.addrow input{flex:1;min-width:0}
.addrow .btn{flex:0 0 auto}

/* ---- Ernährung ---- */
.calc{
  padding:11px 15px;border:1px solid var(--kante);border-radius:var(--r-m);
  background:var(--mulde);box-shadow:var(--senken);
  font-family:var(--sans);font-size:19px;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--text);
}
.rel-hoch  {color:var(--salbei);border-color:rgba(111,183,154,.3)}
.rel-tief  {color:var(--warn);border-color:rgba(224,131,124,.3)}
.rel-mittel{color:var(--text-2)}

/* ---- Zeit ---- */
.zeitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:420px){.zeitgrid{grid-template-columns:repeat(2,1fr)}}
.zeitgrid label{font-size:10px;letter-spacing:.06em}
.zeitgrid input{padding:10px 8px;font-size:16px;text-align:center;border-radius:var(--r-s)}

.zeitgrid > p{grid-column:1 / -1;margin:0}          /* leerer Zustand über volle Breite */

.stack{
  display:flex;height:10px;border-radius:99px;overflow:hidden;
  margin:16px 0 12px;background:var(--mulde);box-shadow:var(--senken);
}
.stack:first-child{margin-top:2px}                 /* steht jetzt oben in der Karte */
.seg{display:block;height:100%}
.seg + .seg{box-shadow:inset 1px 0 0 rgba(13,12,11,.55)}
.s0{background:var(--stein)}    .s1{background:var(--kupfer)}  .s2{background:var(--salbei)}
.s3{background:var(--schiefer)} .s4{background:var(--mauve)}   .s5{background:var(--oliv)}
/* Der Rest bis 24 h: schraffiert statt gefärbt — offen, nicht belegt. */
.seg.offen{
  background:repeating-linear-gradient(135deg,
    rgba(243,237,229,.11) 0 4px, rgba(243,237,229,.025) 4px 8px);
  box-shadow:inset 0 0 0 1px var(--kante);
}
.legend{display:flex;flex-wrap:wrap;gap:7px 14px;font-family:var(--sans);font-size:11.5px;color:var(--text-2)}
.legend:not(:last-child){margin-bottom:18px}
.lg{display:flex;align-items:center;gap:6px}
.lg i{width:8px;height:8px;border-radius:2.5px;display:inline-block;flex:0 0 8px}

/* Die Stundenbilanz in der Überschrift: offen ist neutral, zu viel warnt. */
.tiny .offen {color:var(--text-3)}
.tiny .zuviel{color:var(--warn)}

/* Die Gewichtslinie zeichnet mit currentColor — hier bekommt sie ihre Farbe.
   Stein, nicht Bernstein: das sind Daten, keine Stimme. */
.spark{width:100%;height:54px;display:block;margin:14px 0 4px;opacity:.9;color:var(--stein)}

/* ---- Verlauf ---- */
.vl{
  background:linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
  border:1px solid var(--kante);border-radius:var(--r-l);overflow:hidden;
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-1);
}
.vl-row{
  display:grid;grid-template-columns:56px 62px 1fr 56px;gap:8px;align-items:center;
  padding:8px 16px;border-bottom:1px solid var(--kante);
  font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums;
}
.vl-row:last-child{border-bottom:none}
.vl-d{color:var(--text-3)}
.vl-r{color:var(--text-2)}
/* ausgesetzte Routinen: eine eigene Angabe, keine Fehlmenge */
.vl-r .bl{
  font-style:normal;font-size:11px;color:var(--amp-blau);
  margin-left:4px;
}
.vl-b{text-align:right;font-size:14px;color:var(--text)}
.vl-w{text-align:right;color:var(--text-3)}
.vl-b.rel-hoch  {color:var(--salbei);border:none}
.vl-b.rel-tief  {color:var(--warn);border:none}
.vl-b.rel-mittel{color:var(--text-2);border:none}

/* ====================== Breite Bildschirme ====================== */

@media (min-width:700px){
  body{font-size:16.5px}
  .view{padding:30px 24px 40px}
  .spricht{font-size:22px}
  .frage .q{font-size:24px}
}

/* ====================== Ruhe ====================== */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* =====================================================================
   DER HELLE ZWEIG — „dasselbe Material bei Tageslicht"

   Dennis schreibt morgens am Fenster Tagebuch und liest abends auf dem
   OLED-Handy. Also zwei vollwertige Zustände, kein invertierter.

   Was sich umkehrt, ist nicht die Farbe, sondern die Physik:
     Im Dunkeln hebt LICHT — eine Lichtkante oben, Schatten darunter.
     Im Hellen hebt der SCHATTEN — die Oberkante ist nur noch eine Falzlinie.
     Im Dunkeln ist eine Eingabe eine schwarze Mulde.
     Im Hellen ist sie eine tiefer liegende Fläche mit zarter Innenkante.
     Im Dunkeln kommt Licht zum Grund dazu. Im Hellen kommt Schatten dazu.

   Bernstein bleibt Bernstein — derselbe Ton (26,6° statt 27,1°), nur tief
   gebrannt, weil #EFB07C auf Papier 1,9:1 erreicht. Die Bedeutung kippt
   nicht: er heißt weiter „Napoleon spricht" und kommt im Tracking nicht vor.

   Drei Schalterstellungen:
     :root                          dunkel, Grundzustand (unberührt)
     prefers-color-scheme: light    hell — aber nur, solange nicht von Hand
                                    auf „dunkel" gestellt ist
     [data-theme="hell"]            hell, auch bei dunklem System
     [data-theme="dunkel"]          dunkel, auch bei hellem System

   ⚠ DER BLOCK STEHT ZWEIMAL — einmal für die Systemeinstellung, einmal für
     die Wahl von Hand. Er ist maschinell aus EINER Quelle erzeugt.
     Wer hier etwas ändert, ändert es in BEIDEN Fassungen.
     `./check.sh` vergleicht sie bei jedem Lauf.
   ===================================================================== */

@media (prefers-color-scheme: light){
/* >>> ZWEIG-FASSUNG-1 >>> */

  :root:not([data-theme="dunkel"]){
    color-scheme: light;

    /* --- Grund und Ebenen ---
       Umgekehrte Richtung, gleiche Logik: Karten liegen ÜBER dem Grund, also
       sind sie heller als er — bis hinauf zu reinem Weiß. --mulde ist das
       Gegenteil: dunkler als alles, was sie umgibt.
       Karte/Grund = 1,17:1 (dunkel: 1,10:1) · mulde/Grund = 1,06:1 (dunkel 1,05:1) */
    --grund:    #F0EAE1;
    --ebene-1:  #FBF7F1;
    --ebene-2:  #FFFCF7;
    --ebene-3:  #FFFFFF;
    --mulde:    #EBE4D9;

    /* --- Kanten ---
       Im Dunkeln sind Kanten aus Licht. Auf Papier gibt es kein Licht mehr
       hinzuzufügen — hier sind Kanten aus Tinte, warm gebrochen, nie neutralgrau.
       --glanz ist KEINE Aufhellung mehr, sondern die feine Falzlinie an der
       Oberkante: ein Drittel so stark wie der Rahmen, 1,08:1. Heben tut hier
       der Schatten. */
    --kante:        rgba(61,44,28,.115);   /* 1,24:1 auf der Karte — dunkel 1,21:1 */
    --kante-stark:  rgba(61,44,28,.20);    /* 1,47:1 — dunkel 1,47:1 */
    --glanz:        rgba(61,44,28,.045);   /* 1,08:1 — dunkel 1,16:1 (dort aufhellend) */

    /* --- Schrift ---
       Gespiegelte Staffelung: --text-3 ist jetzt die HELLERE, nicht die dunklere.
       Der ungünstigste Untergrund ist nicht mehr die hellste Karte, sondern die
       dunkelste Fläche — die Mulde, auf der ::placeholder steht:
         #6B6259 auf #EBE4D9 = 4,73:1  ·  auf #F0EAE1 = 4,99:1
         #6B6259 auf #FFFCF7 = 5,84:1  ·  auf #FFFFFF = 5,97:1
       (dunkler Zweig zum Vergleich: 4,86 bis 5,83:1)                            */
    --text:   #1F1B18;    /* 13,54 bis 17,10:1 */
    --text-2: #514941;    /*  6,99 bis  8,83:1 */
    --text-3: #6B6259;    /*  4,73 bis  5,97:1 */

    /* --- Der eine Akzent ---
       #EFB07C käme auf Papier auf 1,9:1 — unbrauchbar. #96511A ist derselbe Ton
       (26,6° statt 27,1°), nur tief gebrannt: L 34,5 % statt 71,2 %.
       Als Text auf der Fragekarte 5,46:1, als 2px-Balken auf dem Grund 5,03:1.
       Die Deckungen steigen mit, weil dunkel-auf-hell viel schneller ausbleicht
       als hell-auf-dunkel: aus .15/.30 wird .30/.55 bei gleicher Wirkung
       (Rahmen der .frage 1,56:1 — dunkel 1,55:1).                               */
    --stimme:     #96511A;
    --stimme-15:  rgba(150,81,26,.30);
    --stimme-30:  rgba(150,81,26,.55);

    /* --- Licht/Handlung: im Hellen ist die Handlungsfarbe Tinte, nicht Elfenbein --- */
    --licht:      #241E19;
    --ring:       rgba(31,27,24,.75);      /* 6,43 bis 7,94:1 auf allen Flächen */

    /* --- Datenfarben: gleicher Ton, tiefer gelegt (>= 3:1 auf der Karte) ---
       stein 4,87  kupfer 5,14  salbei 6,12  schiefer 5,90  mauve 5,72  oliv 5,42
       salbei trägt zusätzlich Text (.rel-hoch, 19px): 4,96:1 auf der Mulde.       */
    --stein:   #806D4D;
    --kupfer:  #9B5C3C;
    --salbei:  #2F6B54;
    --schiefer:#4E6484;
    --mauve:   #8A5471;
    --oliv:    #6F6A33;

    /* --- Ampel ---
       Volle Farbe: grün 5,54 · gelb 5,60 · rot 6,18 · blau 6,71 zur Karte.
       blau trägt außerdem Text (.vl-r .bl, 11px): 6,71:1.
       Gelb ist bewusst zu Ocker gezogen (Ton 46°, weg vom Bernstein bei 27°) —
       ein helles Gelb kann auf Papier keine 3:1 erreichen.                        */
    --amp-gruen: #1B7550;  --amp-gruen-rgb: 27,117,80;
    --amp-gelb:  #7D6310;  --amp-gelb-rgb:  125,99,16;
    --amp-rot:   #AD3529;  --amp-rot-rgb:   173,53,41;
    --amp-blau:  #2B5B99;  --amp-blau-rgb:  43,91,153;

    /* --- Material ---
       Kein umgedrehter Schatten: im Dunkeln reicht eine harte schwarze Kante,
       weil sie im Schwarz verschwindet. Auf Papier braucht der Schatten drei
       Schichten (Kontakt, Nahfeld, Halbschatten), einen warmen Ton statt Schwarz
       und eine viel breitere, flachere Streuung — sonst sieht er aufgeklebt aus.
       --senken kehrt sich um: die Fläche selbst liegt tiefer (--mulde), der
       Schatten wird zur zarten Innenkante statt zur schwarzen Mulde.             */
    --heben-1: 0 1px 1px rgba(74,56,38,.055),
               0 2px 5px -1px rgba(74,56,38,.06),
               0 8px 20px -10px rgba(74,56,38,.20);
    --heben-2: 0 1px 2px rgba(74,56,38,.07),
               0 5px 12px -3px rgba(74,56,38,.08),
               0 26px 52px -26px rgba(74,56,38,.34);
    --senken:  inset 0 1px 2px rgba(74,56,38,.10),
               inset 0 0 0 1px rgba(74,56,38,.04);

    --warn: #A6392F;       /* 5,12 auf der Mulde · 6,32 auf der Karte */
  }

  /* --- Grundwäsche: im Dunkeln kommt Licht dazu, im Hellen Schatten ---
     Ein Bernstein-Hauch über dem Papier wäre ein Fleck, kein Licht. Stattdessen
     sammelt sich oben Helligkeit (die Karte hebt sich dort noch mit 1,12:1 ab,
     dunkel: 1,10:1) und unten legt sich warme Beschattung an. */
  :root:not([data-theme="dunkel"]) body{
    background:
      radial-gradient(130% 60% at 50% -12%, rgba(255,252,246,.28), transparent 62%),
      radial-gradient(90% 50% at 50% 108%, rgba(96,80,62,.055), transparent 70%),
      var(--grund);
  }
  /* Dieselbe Körnung wirkt auf Papier doppelt so laut und verdunkelt statt
     aufzuhellen — auf ein Drittel zurückgenommen, Papierfaser statt Filmkorn. */
  :root:not([data-theme="dunkel"]) body::before{opacity:.035}

  :root:not([data-theme="dunkel"]) ::selection{background:rgba(31,27,24,.13)}

  :root:not([data-theme="dunkel"]) .topbar{background:linear-gradient(180deg, rgba(246,241,233,.92), rgba(246,241,233,.66))}
  :root:not([data-theme="dunkel"]) .tabbar{background:linear-gradient(180deg, rgba(252,249,244,.80), rgba(243,238,229,.96))}

  /* Der aktive Reiter wurde im Dunkeln AUFgehellt. Auf Papier muss er
     eingetönt werden, sonst verschwindet er. 1,22:1 — dunkel 1,23:1. */
  :root:not([data-theme="dunkel"]) .tab.active span{
    background:rgba(31,27,24,.10);
    box-shadow:inset 0 1px 0 var(--glanz);
  }

  :root:not([data-theme="dunkel"]) .editbtn:active{background:rgba(31,27,24,.07)}
  :root:not([data-theme="dunkel"]) .editrow input:focus{background-color:rgba(31,27,24,.045)}

  :root:not([data-theme="dunkel"]) textarea:focus, :root:not([data-theme="dunkel"]) select:focus, :root:not([data-theme="dunkel"]) input:focus{
    box-shadow:var(--senken), 0 0 0 3px rgba(31,27,24,.06);
  }
  /* Kein invert() mehr: mit color-scheme:light zeichnet iOS das Kalendersymbol
     von sich aus dunkel. Das Datumsfeld der Tagesnavigation zieht damit mit. */
  :root:not([data-theme="dunkel"]) input[type=date]::-webkit-calendar-picker-indicator{filter:none;opacity:.55}

  :root:not([data-theme="dunkel"]) .btn:active{box-shadow:inset 0 1px 2px rgba(74,56,38,.18)}

  /* Die eine Handlung kehrt sich um: Elfenbein auf Dunkel wird Tinte auf Papier.
     Bewusst KEIN Bernstein — der Sichern-Knopf steht mitten im Tracking. */
  :root:not([data-theme="dunkel"]) .btn.primary{
    background:linear-gradient(180deg,#3B332C,var(--licht));
    color:#FBF7F1;                /* 11,60:1 oben · 15,44:1 unten */
    box-shadow:0 1px 1px rgba(74,56,38,.18), 0 14px 30px -14px rgba(36,30,25,.55);
  }
  :root:not([data-theme="dunkel"]) .btn.primary:focus-visible{
    box-shadow:0 1px 1px rgba(74,56,38,.18), 0 14px 30px -14px rgba(36,30,25,.55),
               0 0 0 2px var(--grund), 0 0 0 4px var(--ring);
  }

  /* Aus dem Lichthof wird ein warmer Schlagschatten — dasselbe Objekt,
     dieselbe Farbe, nur trägt jetzt der Schatten. */
  :root:not([data-theme="dunkel"]) .mark{
    box-shadow:inset 0 1px 0 var(--glanz), var(--heben-2),
               0 16px 36px -14px rgba(150,81,26,.34);
  }

  :root:not([data-theme="dunkel"]) .frage{
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(150,81,26,.07), transparent 65%),
      linear-gradient(180deg,var(--ebene-3),var(--ebene-1));
    box-shadow:inset 0 1px 0 var(--glanz),
               0 20px 46px -28px rgba(150,81,26,.42), var(--heben-2);
  }
  /* Die Dämpfung auf .9 hellte im Dunkeln ab — hier zöge sie den Bernstein
     ins Papier (4,49:1, knapp unter AA). Die Farbe dämpft schon selbst. */
  :root:not([data-theme="dunkel"]) .frage .tiny{opacity:1}

  :root:not([data-theme="dunkel"]) .card.napo{
    background:
      linear-gradient(100deg, rgba(150,81,26,.055), transparent 46%),
      linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
  }

  /* Gefüllt heißt im Hellen: eingetönt, nicht aufgehellt. 1,23:1 — dunkel 1,08:1. */
  :root:not([data-theme="dunkel"]) .badge.on{background:var(--mulde)}

  :root:not([data-theme="dunkel"]) .bar .fill{background:linear-gradient(90deg, rgba(128,109,77,.38), var(--stein))}

  :root:not([data-theme="dunkel"]) .drop{background:linear-gradient(180deg,var(--ebene-2),rgba(235,228,217,.55))}
  :root:not([data-theme="dunkel"]) .drop:active{background:var(--mulde)}

  /* Der Toast ist kein Blatt in der Seite, sondern ein Gegenstand, der darüber
     zieht. Als helle Fläche auf hellem Papier verschwände er. */
  :root:not([data-theme="dunkel"]) .toast{
    background:rgba(36,30,25,.94);
    color:#FAF6F0;                 /* 12,83:1 */
    border-color:rgba(255,250,242,.16);
  }

  /* ---- Ampel ----
     Die Formen bleiben. Nur die Deckungen sind neu gerechnet: dunkel-auf-hell
     bleicht schneller aus als hell-auf-dunkel, also steigt jede Deckung.
     Jede Fassung landet wieder auf ihrem alten Verhältnis zur Kartenfläche. */
  :root:not([data-theme="dunkel"]) .light.gruen{--amp-rand:.73}   /* 3,27:1 — dunkel 3,22:1 */
  :root:not([data-theme="dunkel"]) .light.gelb {--amp-rand:.75}   /* 3,36:1 — dunkel 3,35:1 */
  :root:not([data-theme="dunkel"]) .light.rot  {--amp-rand:.67}   /* 3,25:1 — dunkel 3,22:1 */
  :root:not([data-theme="dunkel"]) .light.blau {--amp-rand:.67}   /* 3,21:1 — dunkel 3,20:1 */

  :root:not([data-theme="dunkel"]) .light.gruen{background-image:linear-gradient(rgba(var(--amp-rgb),.22) 0 0)}          /* 1,37:1 — dunkel 1,35 */
  :root:not([data-theme="dunkel"]) .light.gruen.on{background-image:linear-gradient(var(--amp) 0 0)}

  :root:not([data-theme="dunkel"]) .light.gelb{background-image:linear-gradient(to top, rgba(var(--amp-rgb),.32) 0 50%, transparent 50% 100%)}  /* 1,58:1 — dunkel 1,57 */
  :root:not([data-theme="dunkel"]) .light.gelb.on{background-image:linear-gradient(to top, var(--amp) 0 50%, transparent 50% 100%)}

  :root:not([data-theme="dunkel"]) .light.rot.on{background-image:linear-gradient(rgba(var(--amp-rgb),.11) 0 0)}          /* 1,19:1 — dunkel 1,17 */

  :root:not([data-theme="dunkel"]) .light.gruen.on,:root:not([data-theme="dunkel"]) .light.gelb.on,:root:not([data-theme="dunkel"]) .light.rot.on{
    box-shadow:0 0 0 3px rgba(var(--amp-rgb),.22);   /* 1,36 bis 1,42:1 — dunkel 1,24 bis 1,43 */
  }

  :root:not([data-theme="dunkel"]) .light.blau{
    background-image:
      linear-gradient(rgba(var(--amp-rgb),.55) 0 0),
      linear-gradient(rgba(var(--amp-rgb),.55) 0 0);    /* Pausenbalken 2,53:1 — dunkel 2,52 */
  }
  :root:not([data-theme="dunkel"]) .light.blau.on{
    background-color:rgba(var(--amp-rgb),.85);          /* Fläche 4,76:1 — dunkel 4,67 */
    /* Im Dunkeln schaute die Mulde durch, hier das Papier — dasselbe Bild,
       nur von der anderen Seite: 4,87:1 (mit --mulde wären es nur 3,86). */
    background-image:
      linear-gradient(var(--ebene-3) 0 0),
      linear-gradient(var(--ebene-3) 0 0);
  }

  :root:not([data-theme="dunkel"]) .rel-hoch{border-color:rgba(47,107,84,.35)}
  :root:not([data-theme="dunkel"]) .rel-tief{border-color:rgba(166,57,47,.35)}

  /* Der Schnitt zwischen zwei Segmenten war eine dunkle Linie im Dunkeln —
     auf hellen Segmenten wäre sie eine siebte Farbe. Jetzt ist es Papier. */
  :root:not([data-theme="dunkel"]) .seg + .seg{box-shadow:inset 1px 0 0 rgba(255,253,248,.75)}
  :root:not([data-theme="dunkel"]) .seg.offen{
    background:repeating-linear-gradient(135deg,
      rgba(46,35,23,.115) 0 4px, rgba(46,35,23,.03) 4px 8px);   /* 1,24 / 1,06 — dunkel 1,26 / 1,04 */
  }

/* <<< ZWEIG-FASSUNG-1 <<< */
}

/* --------------------------------------------------------------------
   Zweite Fassung: dieselben Regeln für die Wahl von Hand.
   -------------------------------------------------------------------- */

/* >>> ZWEIG-FASSUNG-2 >>> */
:root[data-theme="hell"]{
  color-scheme: light;

  /* --- Grund und Ebenen ---
     Umgekehrte Richtung, gleiche Logik: Karten liegen ÜBER dem Grund, also
     sind sie heller als er — bis hinauf zu reinem Weiß. --mulde ist das
     Gegenteil: dunkler als alles, was sie umgibt.
     Karte/Grund = 1,17:1 (dunkel: 1,10:1) · mulde/Grund = 1,06:1 (dunkel 1,05:1) */
  --grund:    #F0EAE1;
  --ebene-1:  #FBF7F1;
  --ebene-2:  #FFFCF7;
  --ebene-3:  #FFFFFF;
  --mulde:    #EBE4D9;

  /* --- Kanten ---
     Im Dunkeln sind Kanten aus Licht. Auf Papier gibt es kein Licht mehr
     hinzuzufügen — hier sind Kanten aus Tinte, warm gebrochen, nie neutralgrau.
     --glanz ist KEINE Aufhellung mehr, sondern die feine Falzlinie an der
     Oberkante: ein Drittel so stark wie der Rahmen, 1,08:1. Heben tut hier
     der Schatten. */
  --kante:        rgba(61,44,28,.115);   /* 1,24:1 auf der Karte — dunkel 1,21:1 */
  --kante-stark:  rgba(61,44,28,.20);    /* 1,47:1 — dunkel 1,47:1 */
  --glanz:        rgba(61,44,28,.045);   /* 1,08:1 — dunkel 1,16:1 (dort aufhellend) */

  /* --- Schrift ---
     Gespiegelte Staffelung: --text-3 ist jetzt die HELLERE, nicht die dunklere.
     Der ungünstigste Untergrund ist nicht mehr die hellste Karte, sondern die
     dunkelste Fläche — die Mulde, auf der ::placeholder steht:
       #6B6259 auf #EBE4D9 = 4,73:1  ·  auf #F0EAE1 = 4,99:1
       #6B6259 auf #FFFCF7 = 5,84:1  ·  auf #FFFFFF = 5,97:1
     (dunkler Zweig zum Vergleich: 4,86 bis 5,83:1)                            */
  --text:   #1F1B18;    /* 13,54 bis 17,10:1 */
  --text-2: #514941;    /*  6,99 bis  8,83:1 */
  --text-3: #6B6259;    /*  4,73 bis  5,97:1 */

  /* --- Der eine Akzent ---
     #EFB07C käme auf Papier auf 1,9:1 — unbrauchbar. #96511A ist derselbe Ton
     (26,6° statt 27,1°), nur tief gebrannt: L 34,5 % statt 71,2 %.
     Als Text auf der Fragekarte 5,46:1, als 2px-Balken auf dem Grund 5,03:1.
     Die Deckungen steigen mit, weil dunkel-auf-hell viel schneller ausbleicht
     als hell-auf-dunkel: aus .15/.30 wird .30/.55 bei gleicher Wirkung
     (Rahmen der .frage 1,56:1 — dunkel 1,55:1).                               */
  --stimme:     #96511A;
  --stimme-15:  rgba(150,81,26,.30);
  --stimme-30:  rgba(150,81,26,.55);

  /* --- Licht/Handlung: im Hellen ist die Handlungsfarbe Tinte, nicht Elfenbein --- */
  --licht:      #241E19;
  --ring:       rgba(31,27,24,.75);      /* 6,43 bis 7,94:1 auf allen Flächen */

  /* --- Datenfarben: gleicher Ton, tiefer gelegt (>= 3:1 auf der Karte) ---
     stein 4,87  kupfer 5,14  salbei 6,12  schiefer 5,90  mauve 5,72  oliv 5,42
     salbei trägt zusätzlich Text (.rel-hoch, 19px): 4,96:1 auf der Mulde.       */
  --stein:   #806D4D;
  --kupfer:  #9B5C3C;
  --salbei:  #2F6B54;
  --schiefer:#4E6484;
  --mauve:   #8A5471;
  --oliv:    #6F6A33;

  /* --- Ampel ---
     Volle Farbe: grün 5,54 · gelb 5,60 · rot 6,18 · blau 6,71 zur Karte.
     blau trägt außerdem Text (.vl-r .bl, 11px): 6,71:1.
     Gelb ist bewusst zu Ocker gezogen (Ton 46°, weg vom Bernstein bei 27°) —
     ein helles Gelb kann auf Papier keine 3:1 erreichen.                        */
  --amp-gruen: #1B7550;  --amp-gruen-rgb: 27,117,80;
  --amp-gelb:  #7D6310;  --amp-gelb-rgb:  125,99,16;
  --amp-rot:   #AD3529;  --amp-rot-rgb:   173,53,41;
  --amp-blau:  #2B5B99;  --amp-blau-rgb:  43,91,153;

  /* --- Material ---
     Kein umgedrehter Schatten: im Dunkeln reicht eine harte schwarze Kante,
     weil sie im Schwarz verschwindet. Auf Papier braucht der Schatten drei
     Schichten (Kontakt, Nahfeld, Halbschatten), einen warmen Ton statt Schwarz
     und eine viel breitere, flachere Streuung — sonst sieht er aufgeklebt aus.
     --senken kehrt sich um: die Fläche selbst liegt tiefer (--mulde), der
     Schatten wird zur zarten Innenkante statt zur schwarzen Mulde.             */
  --heben-1: 0 1px 1px rgba(74,56,38,.055),
             0 2px 5px -1px rgba(74,56,38,.06),
             0 8px 20px -10px rgba(74,56,38,.20);
  --heben-2: 0 1px 2px rgba(74,56,38,.07),
             0 5px 12px -3px rgba(74,56,38,.08),
             0 26px 52px -26px rgba(74,56,38,.34);
  --senken:  inset 0 1px 2px rgba(74,56,38,.10),
             inset 0 0 0 1px rgba(74,56,38,.04);

  --warn: #A6392F;       /* 5,12 auf der Mulde · 6,32 auf der Karte */
}

/* --- Grundwäsche: im Dunkeln kommt Licht dazu, im Hellen Schatten ---
   Ein Bernstein-Hauch über dem Papier wäre ein Fleck, kein Licht. Stattdessen
   sammelt sich oben Helligkeit (die Karte hebt sich dort noch mit 1,12:1 ab,
   dunkel: 1,10:1) und unten legt sich warme Beschattung an. */
:root[data-theme="hell"] body{
  background:
    radial-gradient(130% 60% at 50% -12%, rgba(255,252,246,.28), transparent 62%),
    radial-gradient(90% 50% at 50% 108%, rgba(96,80,62,.055), transparent 70%),
    var(--grund);
}
/* Dieselbe Körnung wirkt auf Papier doppelt so laut und verdunkelt statt
   aufzuhellen — auf ein Drittel zurückgenommen, Papierfaser statt Filmkorn. */
:root[data-theme="hell"] body::before{opacity:.035}

:root[data-theme="hell"] ::selection{background:rgba(31,27,24,.13)}

:root[data-theme="hell"] .topbar{background:linear-gradient(180deg, rgba(246,241,233,.92), rgba(246,241,233,.66))}
:root[data-theme="hell"] .tabbar{background:linear-gradient(180deg, rgba(252,249,244,.80), rgba(243,238,229,.96))}

/* Der aktive Reiter wurde im Dunkeln AUFgehellt. Auf Papier muss er
   eingetönt werden, sonst verschwindet er. 1,22:1 — dunkel 1,23:1. */
:root[data-theme="hell"] .tab.active span{
  background:rgba(31,27,24,.10);
  box-shadow:inset 0 1px 0 var(--glanz);
}

:root[data-theme="hell"] .editbtn:active{background:rgba(31,27,24,.07)}
:root[data-theme="hell"] .editrow input:focus{background-color:rgba(31,27,24,.045)}

:root[data-theme="hell"] textarea:focus, :root[data-theme="hell"] select:focus, :root[data-theme="hell"] input:focus{
  box-shadow:var(--senken), 0 0 0 3px rgba(31,27,24,.06);
}
/* Kein invert() mehr: mit color-scheme:light zeichnet iOS das Kalendersymbol
   von sich aus dunkel. Das Datumsfeld der Tagesnavigation zieht damit mit. */
:root[data-theme="hell"] input[type=date]::-webkit-calendar-picker-indicator{filter:none;opacity:.55}

:root[data-theme="hell"] .btn:active{box-shadow:inset 0 1px 2px rgba(74,56,38,.18)}

/* Die eine Handlung kehrt sich um: Elfenbein auf Dunkel wird Tinte auf Papier.
   Bewusst KEIN Bernstein — der Sichern-Knopf steht mitten im Tracking. */
:root[data-theme="hell"] .btn.primary{
  background:linear-gradient(180deg,#3B332C,var(--licht));
  color:#FBF7F1;                /* 11,60:1 oben · 15,44:1 unten */
  box-shadow:0 1px 1px rgba(74,56,38,.18), 0 14px 30px -14px rgba(36,30,25,.55);
}
:root[data-theme="hell"] .btn.primary:focus-visible{
  box-shadow:0 1px 1px rgba(74,56,38,.18), 0 14px 30px -14px rgba(36,30,25,.55),
             0 0 0 2px var(--grund), 0 0 0 4px var(--ring);
}

/* Aus dem Lichthof wird ein warmer Schlagschatten — dasselbe Objekt,
   dieselbe Farbe, nur trägt jetzt der Schatten. */
:root[data-theme="hell"] .mark{
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-2),
             0 16px 36px -14px rgba(150,81,26,.34);
}

:root[data-theme="hell"] .frage{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(150,81,26,.07), transparent 65%),
    linear-gradient(180deg,var(--ebene-3),var(--ebene-1));
  box-shadow:inset 0 1px 0 var(--glanz),
             0 20px 46px -28px rgba(150,81,26,.42), var(--heben-2);
}
/* Die Dämpfung auf .9 hellte im Dunkeln ab — hier zöge sie den Bernstein
   ins Papier (4,49:1, knapp unter AA). Die Farbe dämpft schon selbst. */
:root[data-theme="hell"] .frage .tiny{opacity:1}

:root[data-theme="hell"] .card.napo{
  background:
    linear-gradient(100deg, rgba(150,81,26,.055), transparent 46%),
    linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
}

/* Gefüllt heißt im Hellen: eingetönt, nicht aufgehellt. 1,23:1 — dunkel 1,08:1. */
:root[data-theme="hell"] .badge.on{background:var(--mulde)}

:root[data-theme="hell"] .bar .fill{background:linear-gradient(90deg, rgba(128,109,77,.38), var(--stein))}

:root[data-theme="hell"] .drop{background:linear-gradient(180deg,var(--ebene-2),rgba(235,228,217,.55))}
:root[data-theme="hell"] .drop:active{background:var(--mulde)}

/* Der Toast ist kein Blatt in der Seite, sondern ein Gegenstand, der darüber
   zieht. Als helle Fläche auf hellem Papier verschwände er. */
:root[data-theme="hell"] .toast{
  background:rgba(36,30,25,.94);
  color:#FAF6F0;                 /* 12,83:1 */
  border-color:rgba(255,250,242,.16);
}

/* ---- Ampel ----
   Die Formen bleiben. Nur die Deckungen sind neu gerechnet: dunkel-auf-hell
   bleicht schneller aus als hell-auf-dunkel, also steigt jede Deckung.
   Jede Fassung landet wieder auf ihrem alten Verhältnis zur Kartenfläche. */
:root[data-theme="hell"] .light.gruen{--amp-rand:.73}   /* 3,27:1 — dunkel 3,22:1 */
:root[data-theme="hell"] .light.gelb {--amp-rand:.75}   /* 3,36:1 — dunkel 3,35:1 */
:root[data-theme="hell"] .light.rot  {--amp-rand:.67}   /* 3,25:1 — dunkel 3,22:1 */
:root[data-theme="hell"] .light.blau {--amp-rand:.67}   /* 3,21:1 — dunkel 3,20:1 */

:root[data-theme="hell"] .light.gruen{background-image:linear-gradient(rgba(var(--amp-rgb),.22) 0 0)}          /* 1,37:1 — dunkel 1,35 */
:root[data-theme="hell"] .light.gruen.on{background-image:linear-gradient(var(--amp) 0 0)}

:root[data-theme="hell"] .light.gelb{background-image:linear-gradient(to top, rgba(var(--amp-rgb),.32) 0 50%, transparent 50% 100%)}  /* 1,58:1 — dunkel 1,57 */
:root[data-theme="hell"] .light.gelb.on{background-image:linear-gradient(to top, var(--amp) 0 50%, transparent 50% 100%)}

:root[data-theme="hell"] .light.rot.on{background-image:linear-gradient(rgba(var(--amp-rgb),.11) 0 0)}          /* 1,19:1 — dunkel 1,17 */

:root[data-theme="hell"] .light.gruen.on,:root[data-theme="hell"] .light.gelb.on,:root[data-theme="hell"] .light.rot.on{
  box-shadow:0 0 0 3px rgba(var(--amp-rgb),.22);   /* 1,36 bis 1,42:1 — dunkel 1,24 bis 1,43 */
}

:root[data-theme="hell"] .light.blau{
  background-image:
    linear-gradient(rgba(var(--amp-rgb),.55) 0 0),
    linear-gradient(rgba(var(--amp-rgb),.55) 0 0);    /* Pausenbalken 2,53:1 — dunkel 2,52 */
}
:root[data-theme="hell"] .light.blau.on{
  background-color:rgba(var(--amp-rgb),.85);          /* Fläche 4,76:1 — dunkel 4,67 */
  /* Im Dunkeln schaute die Mulde durch, hier das Papier — dasselbe Bild,
     nur von der anderen Seite: 4,87:1 (mit --mulde wären es nur 3,86). */
  background-image:
    linear-gradient(var(--ebene-3) 0 0),
    linear-gradient(var(--ebene-3) 0 0);
}

:root[data-theme="hell"] .rel-hoch{border-color:rgba(47,107,84,.35)}
:root[data-theme="hell"] .rel-tief{border-color:rgba(166,57,47,.35)}

/* Der Schnitt zwischen zwei Segmenten war eine dunkle Linie im Dunkeln —
   auf hellen Segmenten wäre sie eine siebte Farbe. Jetzt ist es Papier. */
:root[data-theme="hell"] .seg + .seg{box-shadow:inset 1px 0 0 rgba(255,253,248,.75)}
:root[data-theme="hell"] .seg.offen{
  background:repeating-linear-gradient(135deg,
    rgba(46,35,23,.115) 0 4px, rgba(46,35,23,.03) 4px 8px);   /* 1,24 / 1,06 — dunkel 1,26 / 1,04 */
}
/* <<< ZWEIG-FASSUNG-2 <<< */

/* Und die Gegenrichtung: dunkel bleibt dunkel, auch wenn das System hell
   steht. Die Werte stehen schon in :root — hier zählt, dass der helle
   Zweig oben per :not() ausgeschlossen ist und color-scheme mitzieht. */
:root[data-theme="dunkel"]{color-scheme: dark}

/* =====================================================================
   NACHTRAG — Spezifitäts-Korrekturen nach der Prüfung des hellen Zweigs.
   Die hellen Regeln tragen den Präfix :root:not([data-theme="dunkel"])
   und schlugen damit die unpräfixierten Fokus-Regeln. Diese hier stehen
   zuletzt und tragen denselben Präfix — damit greifen sie in beiden
   Zweigen und der Tastaturfokus bleibt überall sichtbar.
   ===================================================================== */

:root textarea:focus-visible,
:root select:focus-visible,
:root input:focus-visible,
:root:not([data-theme="dunkel"]) textarea:focus-visible,
:root:not([data-theme="dunkel"]) select:focus-visible,
:root:not([data-theme="dunkel"]) input:focus-visible{
  outline:none;
  box-shadow:var(--senken), 0 0 0 2px var(--ring);
}
:root .editrow input:focus-visible,
:root:not([data-theme="dunkel"]) .editrow input:focus-visible{
  box-shadow:inset 0 0 0 2px var(--ring);
}
:root .tab:focus-visible span,
:root:not([data-theme="dunkel"]) .tab:focus-visible span,
:root:not([data-theme="dunkel"]) .tab.active:focus-visible span{
  box-shadow:0 0 0 2px var(--ring);
}

/* Die Schraffur des offenen Rests behält ihren Rahmen — .seg + .seg
   (0,4,0) hatte ihn im Hellen überschrieben. */
:root .stack .seg.offen,
:root:not([data-theme="dunkel"]) .stack .seg.offen{
  box-shadow:inset 0 0 0 1px var(--kante);
}

/* Der Balkenanfang war gegen die Schiene praktisch unsichtbar. */
:root:not([data-theme="dunkel"]) .bar .fill{
  background:linear-gradient(90deg, rgba(128,109,77,.72), var(--stein));
}

/* Sicherungsstand im Tracking (kam nach dem Entwurf dazu) */
.saverow{margin-top:18px}
.stand{text-align:center;margin:8px 0 0;transition:color .2s}
.stand.ok{color:var(--salbei)}
.stand.laeuft,.stand.offen{color:var(--text-3)}
.stand.fehler{color:var(--warn)}