/* Saunasplash · Calma Ritualsauna – gemeinsame Grundlage (öffentliche Seite UND Team-Bereich)
   Design „Kuppel-Uhr" auf blauem Stoff: Der Seitengrund ist die Hülle der Kuppel
   (feines Gewebe + Körnung, hell ein gedecktes Stoffblau, dunkel tiefes Kuppelblau),
   darauf liegen helle bzw. dunkle Flächen (Tage, Aufgüsse, Infos). Gelb/Bernstein/
   Orange sind die Glut – nur für „läuft", „als Nächstes" und Aktionen.
   Inhalt: Schriften · Farb-Tokens · Stoff · Grundlage · Kopfleiste · Box · Plaketten ·
   Flammen · Zutaten-Kreise · Kuppel · Knöpfe · Felder · Blatt · Sprachliste ·
   Teilen · Meldung · Breit · ruhige Bewegung.
   Richtungen immer logisch (inline/block) – so stimmt Rechts-nach-links von selbst. */

/* ===== Schriften =====
   Google Sans (variabel 400–700, keine Breitenachse) + Noto Sans Arabic für ar/fa –
   SIL Open Font License 1.1 (fonts/schrift/OFL-*.txt). Lokal, je Schrift ein Teil;
   der Browser lädt nur, was die Seite braucht (unicode-range). CJK aus der Systemschrift.
   Gewichte: Fließtext/Nebentexte 400, Namen/kleine Überschriften/Zeiten/Knöpfe 500,
   h1/Abschnittstitel 600. */
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-bengali.woff2) format("woff2");
  unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-cyrillic-ext.woff2) format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-cyrillic.woff2) format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-devanagari.woff2) format("woff2");
  unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-greek-ext.woff2) format("woff2");
  unicode-range:U+1F00-1FFF}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-greek.woff2) format("woff2");
  unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-hebrew.woff2) format("woff2");
  unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-thai.woff2) format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-vietnamese.woff2) format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/schrift/google-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/schrift/noto-sans-arabic-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}

/* ===== Farb-Tokens =====
   --stoff ist der Seitengrund (blauer Kuppelstoff). Was direkt darauf steht, nimmt
   --ink (Titel) bzw. --ink-stoff-2 (Nebentext) – beide gegen die hellste und die
   dunkelste Stelle der Textur gemessen (≥ 4,5:1). Auf den Flächen gelten
   --ink/--ink-2; --ink-3 ist das Grau für Vergangenes (hell ≥ 6:1, dunkel ≥ 7:1
   auf Tages-Box und Schleier). */
:root{
  color-scheme:light;
  --stoff:#E2E8F4; --licht-warm:rgba(255,191,0,.42); --licht-kalt:rgba(32,57,138,.30); --licht-rand:rgba(255,139,0,.16); --grain:.05;
  --glas-fill:color-mix(in srgb,#FFFBEA 60%,transparent); --glas-klein:color-mix(in srgb,#FFFBEA 82%,transparent); --glas-kante:rgba(255,255,255,.85); --glas-ton:60,40,35; --rausch-mix:multiply;
  --bg:var(--stoff);
  --surface:#FFFBEA; --surface-2:#FFE894; --surface-3:#FFDF6E; --feld:#FFFFFF;
  --schleier:color-mix(in srgb,#FFFBEA 62%,transparent);
  --ink:#16203F; --ink-2:#434B6B; --ink-3:#464952; --ink-stoff-2:#25304F;
  --line:rgba(22,32,63,.13); --line-2:rgba(22,32,63,.34); --line-stoff:rgba(22,32,63,.22);
  --dome:#20398A; --dome-past:#6C80CF; --wood:#A0692C; --naechst:#D9480A;
  --glut-hoch:#D9480A; --linie-vorbei:rgba(22,32,63,.42);
  --tonal:#FFD435; --tonal-hover:#FFC61A;
  --sun:#FFD435; --amber:#FFBF00; --orange:#FF8B00; --ember:#D9480A;
  --on-fire:#1A1405; --accent-ink:#775002;
  --primary:#16203F; --on-primary:#FFE36B;
  --warnung:#B3261E; --on-warnung:#FFFFFF;
  --focus:#16203F; --scrim:rgba(11,16,32,.5);
  --glow:rgba(255,120,0,.42); --kante:inset 0 1px 0 rgba(255,255,255,.75);
  --schatten:var(--kante), 0 1px 2px rgba(22,32,63,.08), 0 8px 22px -12px rgba(22,32,63,.30);
  --stern:#D9480A; --stern-leer:rgba(22,32,63,.22);
  --meldung-knopf:#FFD435;
  --font:"Google Sans","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans","Microsoft YaHei","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  /* Höhe der klebenden Kopfleiste – Sprungziele landen darunter */
  --kopf-h:112px;
  --rausch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --stoff:#081228; --licht-warm:rgba(255,139,0,.22); --licht-kalt:rgba(64,96,200,.30); --licht-rand:rgba(255,191,0,.10); --grain:.07;
    --glas-fill:color-mix(in srgb,#15213F 58%,transparent); --glas-klein:color-mix(in srgb,#15213F 80%,transparent); --glas-kante:rgba(255,241,207,.10); --glas-ton:255,255,255; --rausch-mix:soft-light;
    --surface:#15213F; --surface-2:#0C1630; --surface-3:#1E2C52; --feld:#0B1428;
    --schleier:color-mix(in srgb,#0C1630 45%,transparent);
    --ink:#FFF1CF; --ink-2:#C3C8DC; --ink-3:#B4B7C2; --ink-stoff-2:#D5D9E8;
    --line:rgba(255,241,207,.12); --line-2:rgba(255,241,207,.30); --line-stoff:rgba(255,241,207,.20);
    --dome:#8EA4E8; --dome-past:#4A5DB0; --wood:#B98446; --naechst:#FF8B00; --tonal:#1B3368; --tonal-hover:#244284;
    --glut-hoch:#FFD435; --linie-vorbei:rgba(255,241,207,.36);
    --accent-ink:#FFC94D; --primary:#FFD435; --on-primary:#16203F;
    --warnung:#FFB4AB; --on-warnung:#410002;
    --focus:#FFD435; --scrim:rgba(0,0,0,.6);
    --glow:rgba(255,120,0,.55); --kante:inset 0 1px 0 rgba(255,241,207,.07); --schatten:var(--kante), 0 8px 22px -12px rgba(0,0,0,.6);
    --stern:#FFBF00; --stern-leer:rgba(255,241,207,.26);
    --meldung-knopf:#775002;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --stoff:#081228; --licht-warm:rgba(255,139,0,.22); --licht-kalt:rgba(64,96,200,.30); --licht-rand:rgba(255,191,0,.10); --grain:.07;
    --glas-fill:color-mix(in srgb,#15213F 58%,transparent); --glas-klein:color-mix(in srgb,#15213F 80%,transparent); --glas-kante:rgba(255,241,207,.10); --glas-ton:255,255,255; --rausch-mix:soft-light;
  --surface:#15213F; --surface-2:#0C1630; --surface-3:#1E2C52; --feld:#0B1428;
  --schleier:color-mix(in srgb,#0C1630 45%,transparent);
  --ink:#FFF1CF; --ink-2:#C3C8DC; --ink-3:#B4B7C2; --ink-stoff-2:#D5D9E8;
  --line:rgba(255,241,207,.12); --line-2:rgba(255,241,207,.30); --line-stoff:rgba(255,241,207,.20);
  --dome:#8EA4E8; --dome-past:#4A5DB0; --wood:#B98446; --naechst:#FF8B00; --tonal:#1B3368; --tonal-hover:#244284;
  --glut-hoch:#FFD435; --linie-vorbei:rgba(255,241,207,.36);
  --accent-ink:#FFC94D; --primary:#FFD435; --on-primary:#16203F;
  --warnung:#FFB4AB; --on-warnung:#410002;
  --focus:#FFD435; --scrim:rgba(0,0,0,.6);
  --glow:rgba(255,120,0,.55); --kante:inset 0 1px 0 rgba(255,241,207,.07); --schatten:var(--kante), 0 8px 22px -12px rgba(0,0,0,.6);
  --stern:#FFBF00; --stern-leer:rgba(255,241,207,.26);
  --meldung-knopf:#775002;
}

/* ===== Grund: „Magic UI" wie beim UHU =====
   Ein ruhiger, blau getönter Grund (die Kuppel), darauf zwei weiche Lichter:
   oben die warme Glut (Gelb/Orange), unten ein kühles Kuppelblau. Beide atmen
   sehr langsam. Über allem liegt eine feine Körnung. Die großen Flächen darüber
   sind mattiertes Glas (siehe „Glas" am Ende der Datei). Alles steht fest –
   beim Scrollen flimmert nichts. */
html{background:var(--stoff)}
body::before{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 0%,var(--licht-warm) 0%,transparent 70%),
    radial-gradient(55% 50% at 0% 100%,var(--licht-kalt) 0%,transparent 72%),
    radial-gradient(45% 40% at 100% 70%,var(--licht-rand) 0%,transparent 70%);
  animation:atmen 23s ease-in-out infinite;will-change:transform,opacity}
@keyframes atmen{0%,100%{opacity:.78;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
body::after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:var(--grain);background-image:var(--rausch)}

/* ===== Grundlage ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-block-start:var(--kopf-h)}
body{margin:0;background:var(--stoff);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.blatt-offen{overflow:hidden}
h1,h2,h3,h4{text-wrap:balance;margin:0;font-weight:500}

p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img{max-inline-size:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main:focus{outline:none}
[hidden]{display:none!important}
.sr{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprung:focus{position:fixed!important;inset-block-start:8px;inset-inline-start:8px;inline-size:auto;block-size:auto;clip-path:none;z-index:70;
  padding:12px 16px;border-radius:12px;background:var(--primary);color:var(--on-primary);font-weight:500}
.ic{inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.klein{inline-size:18px;block-size:18px}
[dir="rtl"] .ic.flip{transform:scaleX(-1)}
/* Fremdsprachige Blöcke (dir="ltr" auf einer RTL-Seite) bleiben rechtsbündig */
[dir="rtl"] #root [dir="ltr"],[dir="rtl"] #blatt [dir="ltr"]{text-align:right}
.seite{max-inline-size:640px;margin-inline:auto;padding-inline:16px}
#root > main{overflow-x:clip}

/* ===== Kopfleiste (klebt) ===== */
.leiste{position:sticky;inset-block-start:0;z-index:30;background:color-mix(in srgb,var(--stoff) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block-end:1px solid transparent}
.leiste.gerollt{border-block-end-color:var(--line-stoff)}
.leiste-in{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;padding-block-start:6px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;margin-inline-end:auto;min-block-size:48px;border-radius:14px;min-inline-size:0;flex:1 1 auto}
.marke > span:last-child{min-inline-size:0}
.marke-kuppel{display:block;inline-size:36px;flex:none}
.marke-kuppel svg{display:block;inline-size:100%;block-size:auto}
.marke .f{stroke-width:.8px;stroke:var(--ink)}
.marke b{display:block;font-size:16px;line-height:1.15;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marke small{display:block;font-size:14px;line-height:1.2;color:var(--ink-stoff-2);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sprach-knopf{display:inline-flex;align-items:center;gap:6px;min-block-size:48px;padding-inline:12px 10px;border:0;border-radius:24px;
  background:var(--tonal);font-size:15px;font-weight:500;flex:none}
.sprach-knopf .ic{inline-size:20px;block-size:20px}
.icon-knopf{display:inline-grid;place-items:center;min-inline-size:48px;min-block-size:48px;border:0;border-radius:24px;background:transparent;gap:6px;flex:none;
  text-decoration:none;color:inherit}
.icon-knopf:hover,.sprach-knopf:hover{background:var(--tonal-hover)}
.knopf-text{display:none}
/* Legende – am Handy eine schmale zweite Zeile */
.kopf-legende{order:3;flex:1 0 100%;margin-block-start:4px;padding-block:6px 7px;border-block-start:1px solid var(--line-stoff)}
.kopf-legende:empty{display:none}
.legende{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:14px;color:var(--ink-stoff-2);font-weight:400}
.legende li{display:inline-flex;align-items:center;gap:6px}
.leg-tri{inline-size:16px;block-size:14px;overflow:visible}
.leg-tri .f{stroke-width:1.2px}
.leg-tri .f.naechster{stroke-width:2px}
/* Am Handy nur das Kürzel (DE, FR …) – sonst drängt der Name die Marke ab */
.sprache-kurz{display:inline}
.sprache-lang{display:none}

/* ===== Aufguss-Box =====
   Feste Ordnung, damit alle Boxen gleich gebaut sind:
   Kopf (Zeit, Plakette, Kuppel-Stück) · Titel · Name (max. 2 Zeilen) · „mit …" ·
   Beschreibung (max. 3 Zeilen, Ausblenden + „mehr …") · Zutaten (eine Zeile) ·
   Fuß (Intensität fest unten am Ende der Zeile). Die ganze Box ist ein Knopf
   (.box-auf liegt darüber) und öffnet das Detail-Blatt. */
.box{position:relative;display:flex;flex-direction:column;min-inline-size:0;background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:14px 18px 16px;box-shadow:var(--schatten);transition:box-shadow .3s}
.box-auf{position:absolute;inset:0;z-index:2;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.box-auf:focus-visible{outline-offset:2px}
/* Überfahren: kein Rand, kein Glow – siehe „Hover dezent" am Ende */
.box.angetippt{box-shadow:0 0 0 3px var(--orange)}
.box-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-block-size:40px;padding-inline-end:62px}
.zeit{display:flex;align-items:baseline;gap:8px;font-size:24px;line-height:1.1;font-weight:500;font-variant-numeric:tabular-nums}
.zeit .dauer{font-size:15px;font-weight:400;color:var(--ink-2)}
.zeit .bis{font-size:19px;font-weight:500;margin-inline-start:-6px}
.stueck{position:absolute;inset-block-start:17px;inset-inline-end:16px;inline-size:52px;block-size:auto;overflow:visible}
.stueck .f{stroke-width:.7px}
.f.leise{stroke:color-mix(in srgb,var(--dome) 22%,transparent)}
.stueck .f.kommt,.stueck .f.ausfall{fill:color-mix(in srgb,var(--dome) 32%,transparent)}
.stueck .f.naechster{fill:color-mix(in srgb,var(--orange) 55%,transparent)}
.ober{margin-block-start:8px;font-size:14px;font-weight:500;color:var(--accent-ink)}
.name{margin-block-start:6px;font-size:21px;line-height:1.22;font-weight:500;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.ober + .name{margin-block-start:2px}
.wer{margin-block-start:2px;font-size:16px;color:var(--ink-2);font-weight:400}
/* Beschreibung: höchstens drei Zeilen. Ist sie länger (JS setzt .gekappt), blendet die
   letzte Zeile aus und „mehr …" steht darunter. */
.text{margin-block-start:10px;font-size:16px;line-height:1.5;color:var(--ink-2);max-inline-size:62ch;text-wrap:pretty;
  max-block-size:4.5em;overflow:hidden}
.text.gekappt{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 1.5em),rgba(0,0,0,.08));mask-image:linear-gradient(to bottom,#000 calc(100% - 1.5em),rgba(0,0,0,.08))}
.text.platzhalter{color:var(--ink-2);font-style:normal;opacity:.9}
.mehr-hinweis{display:none;margin-block-start:2px;font-size:15px;font-weight:500;color:var(--accent-ink)}
.text.gekappt + .mehr-hinweis{display:block}
/* Zutaten: EINE Zeile. Was nicht passt, zählt „+2" (JS kürzt und misst). */
.zutaten{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:12px;max-block-size:42px;overflow:hidden}
.zutaten li{display:inline-flex;align-items:center;gap:7px;min-inline-size:0;max-inline-size:100%;block-size:42px;padding-block:3px;padding-inline:3px 12px;border-radius:99px;
  background:var(--tonal);font-size:15px;font-weight:500;white-space:nowrap}
.zutaten li > span:last-child{overflow:hidden;text-overflow:ellipsis}
.zutaten li.zutat-mehr{padding-inline:12px;font-weight:500;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.zutat-bild{display:block;inline-size:36px;block-size:36px;border-radius:50%;object-fit:cover;flex:none;background:var(--surface)}
.zutat-bild.ohne{display:grid;place-items:center;color:var(--dome);font-size:16px;font-weight:500;line-height:1;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--dome) 45%,transparent)}
.fuss{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-block-start:auto;padding-block-start:12px;min-block-size:36px}
.intens{display:inline-flex;align-items:center;gap:1px;margin-inline-start:auto;font-size:15px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.intens > span{margin-inline-start:6px}
/* Intensität als kleine Flammen (Lucide „flame"): gefüllt = Stufe, blass = Rest */
.int-flamme{inline-size:19px;block-size:19px;flex:none;fill:color-mix(in srgb,var(--ink) 13%,transparent)}
.int-flamme.voll{fill:var(--orange);stroke:var(--ember);stroke-width:1.3;stroke-linejoin:round}
.fb-marke{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fb-marke .stern-klein{inline-size:17px;block-size:17px;fill:var(--stern);stroke:none}

/* Plaketten */
.pille{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:1;font-weight:500;padding:7px 11px;border-radius:99px;
  background:var(--surface-2);color:var(--ink);white-space:nowrap}
.pille .ic{inline-size:17px;block-size:17px}
.pille.still{background:transparent;padding-inline:2px;color:var(--ink-3);font-weight:500}
.pille.bald{background:var(--orange);color:var(--on-fire)}
.pille.aus{background:var(--ink);color:var(--surface)}
.pille.live{background:var(--on-fire);color:var(--sun)}
.punkt{position:relative;flex:none;inline-size:9px;block-size:9px;border-radius:50%;background:var(--orange)}
/* Puls über transform/opacity (Compositor) */
.punkt::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:puls 1.6s ease-out infinite}
.punkt.still::after{display:none}
@keyframes puls{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.9);opacity:0}}

/* vorbei: gleiche Größe, aber zurückgenommen – kein Grund, gestrichelter Rand, Grau mit
   Kontrast ≥ 6:1 (hell) / ≥ 7:1 (dunkel), Fotos entsättigt */
.box.vorbei{background:transparent;box-shadow:none;border:1.5px dashed var(--linie-vorbei);color:var(--ink-3)}
.box.vorbei .zeit,.box.vorbei .name,.box.vorbei .wer,.box.vorbei .text,.box.vorbei .ober,.box.vorbei .intens,
.box.vorbei .zeit .dauer,.box.vorbei .mehr-hinweis{color:var(--ink-3)}
.box.vorbei .name{font-weight:500}
.box.vorbei .zutaten li{background:transparent;box-shadow:inset 0 0 0 1px var(--linie-vorbei)}
.box.vorbei .zutat-bild{filter:grayscale(1);opacity:.85}
.box.vorbei .int-flamme.voll{fill:var(--ink-3);stroke:none}
.box.vorbei .stueck{opacity:.55}
.box.vorbei .stueck .f{stroke:var(--ink-3)}
.box.vorbei .stueck .f.vorbei{fill:color-mix(in srgb,var(--ink-3) 50%,transparent)}
.box.ausfall{background:transparent;box-shadow:none;border:1.5px dashed var(--line-2)}
.box.vorbei.ausfall{border-color:var(--linie-vorbei)}
.box.ausfall .name{text-decoration:line-through;text-decoration-thickness:2px;color:var(--ink-2)}
/* als Nächstes: vorglühend umrandet */
.box.naechster{border:2px solid var(--orange);box-shadow:0 8px 28px -14px var(--glow)}

/* ===== Die laufende Box: groß, orange, eine atmende Glut als Hintergrund der ganzen Box =====
   Warmer Verlauf als Grund, darüber atmet ein Glutschein (nur opacity → Compositor).
   Dieselbe Glut oben (Läuft gerade) und unten im Plan. */
.box.laeuft{isolation:isolate;overflow:hidden;border:0;color:var(--on-fire);
  background:linear-gradient(162deg,#FFE36B 0%,var(--amber) 42%,var(--orange) 100%);
  box-shadow:0 0 0 1.5px rgba(217,72,10,.5),0 12px 32px -14px rgba(8,18,40,.5)}
.box.laeuft::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(90% 70% at 25% 118%,rgba(217,72,10,.62),transparent 70%),radial-gradient(70% 60% at 88% 108%,rgba(255,106,0,.55),transparent 70%),
    radial-gradient(60% 50% at 70% -10%,rgba(255,244,190,.55),transparent 70%);
  will-change:opacity;animation:glimmen 4.5s ease-in-out infinite}
@keyframes glimmen{0%,100%{opacity:.45}45%{opacity:1}70%{opacity:.7}}
.box.laeuft .zeit .dauer,.box.laeuft .wer,.box.laeuft .text,.box.laeuft .ober,.box.laeuft .intens,.box.laeuft .mehr-hinweis{color:var(--on-fire)}
.box.laeuft .wer{font-weight:500}
.box.laeuft .zutaten li{background:rgba(255,255,255,.45)}
.box.laeuft .zutat-bild.ohne{background:rgba(255,255,255,.6);color:var(--on-fire);box-shadow:inset 0 0 0 1.5px rgba(26,20,5,.3)}
.box.laeuft .int-flamme{fill:rgba(26,20,5,.18)}
.box.laeuft .int-flamme.voll{fill:var(--on-fire);stroke:none}
.box.laeuft .stueck .f.leise{stroke:rgba(26,20,5,.3)}
.box.laeuft .stueck .f.laeuft{fill:var(--ember);stroke:var(--on-fire)}
.box.laeuft :focus-visible,.box.laeuft .box-auf:focus-visible{outline-color:var(--on-fire)}
.lauf{display:flex;align-items:center;gap:12px;margin-block-start:12px}
.balken{flex:1;block-size:10px;border-radius:6px;background:rgba(26,20,5,.18);overflow:hidden}
.balken span{display:block;block-size:100%;border-radius:6px;background:var(--on-fire)}
.rest{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== Kuppel ===== */
.kuppel-rahmen{position:relative;isolation:isolate}
/* Ebenen: Saum (0) · Kuppel (1) · Glut (2) · Ring+Zeiger (3) – deckungsgleich */
.kuppel-rahmen > .basis{position:relative;z-index:1}
.kuppel-rahmen > .glut-ebene,.kuppel-rahmen > .oben{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:visible}
.kuppel-rahmen > .oben{z-index:3}
.glut-ebene.saum{z-index:0;will-change:opacity;animation:schein 4.2s ease-in-out infinite}
.glut-ebene.saum polygon{fill:var(--orange)}
.glut-ebene.flamme{z-index:2;will-change:opacity;animation:glut 3.4s ease-in-out infinite alternate}
.glut-ebene.flamme.b{animation-duration:4.6s;animation-delay:-1.7s}
.glut-ebene.flamme polygon{fill:var(--glut-hoch)}
.kuppel-svg{display:block;inline-size:100%;block-size:auto;overflow:visible}
.f{fill:transparent;stroke:var(--dome);stroke-width:1.1px;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .4s}
.f.vorbei{fill:var(--dome-past)}
.f.naechster{fill:transparent;stroke:var(--naechst);stroke-width:2px}
.f.ausfall{stroke-dasharray:3 3;fill:transparent}
.f.vorbei.ausfall{fill:var(--dome-past);opacity:.55;stroke-dasharray:none}
.f.laeuft{fill:var(--orange);stroke:var(--ember);stroke-width:1.5px}
.f.hervor{stroke:var(--orange);stroke-width:2.4px}
.kuppel-rahmen .f[data-slot]{cursor:pointer}
@keyframes glut{0%{opacity:.55}35%{opacity:.85}62%{opacity:.62}100%{opacity:.95}}
@keyframes schein{0%,100%{opacity:.5}50%{opacity:.9}}
.sockel{fill:var(--wood)}
.ziffer{font-family:var(--font);font-size:11.5px;font-weight:500;fill:var(--ink-2);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.ziffer.vorbei{fill:var(--ink-3);font-weight:400}
.ziffer.naechster{fill:var(--accent-ink);font-weight:600}
.ziffer.ausfall{text-decoration:line-through}
.ziffer.laeuft rect{fill:var(--orange)}
.ziffer.laeuft text{fill:var(--on-fire);font-weight:600;text-anchor:middle;dominant-baseline:central;font-size:11.5px}
.zeiger line{stroke:var(--ink);stroke-width:2.2px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.zeiger circle{fill:var(--ink)}
.zeiger .spitze{fill:var(--orange);stroke:var(--ink);stroke-width:1.6px;vector-effect:non-scaling-stroke}

/* ===== Knöpfe ===== */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:48px;padding-inline:18px 20px;border-radius:24px;
  font-size:16px;font-weight:500;text-decoration:none;border:0;white-space:nowrap;transition:background .15s,filter .15s}
.knopf.voll{background:var(--primary);color:var(--on-primary)}
.knopf.voll:hover{filter:brightness(1.12)}
.knopf.tonal{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.knopf.tonal:hover{background:var(--surface-2)}
.knopf.leise{background:transparent;color:var(--ink);padding-inline:14px}
.knopf.leise:hover{background:var(--surface-2)}
.knopf.gefahr{background:transparent;color:var(--warnung);box-shadow:inset 0 0 0 1.5px currentColor}
.knopf.gefahr-voll{background:var(--warnung);color:var(--on-warnung)}
.knopf.klein{min-block-size:44px;padding-inline:14px 16px;font-size:15px}
.knopf.breit{inline-size:100%}
.knopf.nur-symbol{inline-size:48px;padding:0}
.knopf:disabled,.knopf[aria-busy="true"]{opacity:.55;pointer-events:none}
.textlink{display:inline-flex;align-items:center;gap:6px;min-block-size:44px;padding:0;border:0;background:none;font-size:inherit;font-weight:500;
  color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;text-decoration-color:var(--line-2)}
.textlink:hover{text-decoration-color:currentColor}

/* ===== Felder ===== */
.feld{display:flex;flex-direction:column;gap:6px}
.feld > label,.feld > .feld-name,.feld legend{font-weight:500;font-size:15px;display:flex;align-items:center;gap:6px;padding:0}
.feld small,.hilfe{color:var(--ink-2);font-size:14px}
.eingabe{inline-size:100%;min-block-size:48px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--feld);padding:11px 14px;font-size:16px}
.eingabe:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1.5px var(--focus)}
textarea.eingabe{min-block-size:96px;resize:vertical;line-height:1.45}
.fehlertext{color:var(--warnung);font-size:15px;font-weight:500}
fieldset.feld{border:0;margin:0;padding:0;min-inline-size:0}

/* ===== Blatt: am Handy von unten, breit von der Seite =====
   Alles dahinter ist inert, solange es offen ist (Fokusfalle); Escape schließt,
   der Fokus kehrt dorthin zurück, wo es geöffnet wurde. */
#blatt .schleier{position:fixed;inset:0;background:var(--scrim);z-index:40;animation:ein .18s ease-out}
#blatt .platte{position:fixed;inset-inline:0;inset-block-end:0;z-index:41;background:var(--surface);color:var(--ink);
  border-radius:28px 28px 0 0;max-block-size:92vh;max-block-size:92dvh;display:flex;flex-direction:column;
  box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:hoch .24s cubic-bezier(.2,.8,.2,1)}
@keyframes ein{from{opacity:0}}
@keyframes hoch{from{transform:translateY(40px);opacity:0}}
@keyframes rein{from{transform:translateX(48px);opacity:0}}
[dir="rtl"] #blatt .platte{--rein:-48px}
.griff{display:block;inline-size:36px;block-size:4px;border-radius:2px;background:var(--line-2);margin:10px auto 0;flex:none}
.platte-kopf{display:flex;align-items:flex-start;gap:8px;padding-block:12px 8px;padding-inline:20px 10px;flex:none}
.platte-kopf h2{flex:1;font-size:24px;line-height:1.18;font-weight:600;padding-block-start:8px;overflow-wrap:anywhere}
.platte-kopf .auge{display:block;font-size:14px;font-weight:500;color:var(--ink-2);margin-block-end:4px;}
.platte-inhalt{padding:4px 20px 20px;overflow:auto;display:flex;flex-direction:column;gap:20px;overscroll-behavior:contain}
.platte-inhalt > *{flex-shrink:0}
.platte-fuss{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding-block:12px calc(14px + env(safe-area-inset-bottom));padding-inline:20px;
  border-block-start:1px solid var(--line);flex:none}
.platte-fuss .links{margin-inline-end:auto}

/* ===== Sprachliste ===== */
.sprach-gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sprache{position:relative;display:grid;justify-items:start;gap:1px;inline-size:100%;min-block-size:56px;padding:8px 12px;border:0;border-radius:16px;
  background:transparent;text-align:start}
.sprache:hover{background:var(--surface-2)}
.sprache[aria-pressed="true"]{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--dome)}
.nativ{font-size:17px;font-weight:500;line-height:1.25}
.uebersetzt{font-size:14px;color:var(--ink-2)}
.sprache .haken{position:absolute;inset-block-start:10px;inset-inline-end:10px}

/* ===== Teilen-Blatt (öffentlicher Plan, von beiden Seiten aus) ===== */
.adresse-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adresse-feld{flex:1 1 200px;padding:10px 14px;border-radius:14px;background:var(--surface-2);font-weight:500;word-break:break-all;font-size:15px}
.teilen-liste{border:1px solid var(--line);border-radius:18px;overflow:hidden}
.teilen-liste > li + li{border-block-start:1px solid var(--line)}
.teilen-liste a,.teilen-liste button{display:flex;align-items:center;gap:12px;inline-size:100%;min-block-size:58px;padding:10px 14px;border:0;background:none;
  text-align:start;text-decoration:none;font-weight:500;color:inherit}
.teilen-liste a:hover,.teilen-liste button:hover{background:var(--surface-2)}
.teilen-liste small{display:block;font-weight:400;color:var(--ink-2);font-size:14px}
.teilen-kreis{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:50%;background:var(--tonal);flex:none}
.teilen-kreis .ic{inline-size:19px;block-size:19px}
.hilfe{margin:0}

/* ===== Meldung (mit „Rückgängig", wenn es eins gibt) =====
   Bleibt immer im Barrierefreiheitsbaum, damit Bildschirmleser neue Meldungen ansagen. */
#meldung{position:fixed;inset-inline:16px;margin-inline:auto;inline-size:fit-content;max-inline-size:560px;
  inset-block-end:calc(20px + env(safe-area-inset-bottom));transform:translateY(20px);
  background:var(--ink);color:var(--surface);padding:10px 12px;padding-inline-start:18px;border-radius:22px;font-weight:500;
  font-size:15px;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  display:flex;align-items:center;gap:12px;min-block-size:44px}
#meldung:empty{padding:0;min-block-size:0}
#meldung:not(.an) button{visibility:hidden}
#meldung.an{opacity:1;transform:none}
#meldung.an.mit-knopf{pointer-events:auto}
#meldung button{color:var(--meldung-knopf);background:none;border:0;font-weight:600;padding:6px 10px;border-radius:99px;min-block-size:44px;
  text-decoration:underline;text-underline-offset:3px;flex:none}
#meldung button:focus-visible{outline-color:currentColor}
/* Bei offenem Blatt oben – dort verdeckt sie weder Felder noch Knöpfe des Blatts. Die
   Lage wird beim Erscheinen festgehalten (.oben, kern.js meldung): schließt man das
   Blatt, bleibt die Meldung, wo sie ist, statt nach unten zu springen (Nutzer-Wunsch) */
#meldung.oben{inset-block-end:auto;inset-block-start:calc(12px + env(safe-area-inset-top));transform:translateY(-20px)}
#meldung.oben.an{transform:none}

/* ===== Breit: ab 1000px (dieselbe Grenze steht in kern.js: BREIT) ===== */
@media (min-width:1000px){
  :root{--kopf-h:84px}
  .seite{max-inline-size:1360px;padding-inline:40px}
  .leiste-in{flex-wrap:nowrap;padding-block:0;min-block-size:76px}
  .marke{flex:0 1 auto;margin-inline-end:0}
  .marke-kuppel{inline-size:46px}
  .kopf-legende{order:0;flex:0 1 auto;margin:0 auto;padding:0;border:0}
  .kopf-legende .legende{font-size:15px;gap:4px 18px}
  .sprache-kurz{display:none}
  .sprache-lang{display:inline}
  .knopf-text{display:inline}
  .icon-knopf.mit-text{display:inline-flex;align-items:center;padding-inline:14px 18px;background:var(--tonal)}
  .icon-knopf.mit-text:hover{background:var(--tonal-hover)}
  #blatt .platte{inset-block:0;inset-inline-start:auto;inset-inline-end:0;inline-size:min(560px,100vw);max-block-size:none;
    border-radius:28px 0 0 28px;animation:rein .24s cubic-bezier(.2,.8,.2,1)}
  [dir="rtl"] #blatt .platte{border-radius:0 28px 28px 0;animation-name:ein}
  #blatt .platte .platte-inhalt{flex:1}
  #blatt .platte .griff{display:none}
  #blatt .platte:not(.frage) .platte-kopf{padding-block-start:22px}
  #blatt .platte.frage{inset:50% auto auto 50%;inline-size:min(480px,calc(100vw - 32px));transform:translate(-50%,-50%);border-radius:28px;animation:ein .18s ease-out}
  [dir="rtl"] #blatt .platte.frage{inset:50% auto auto 50%;border-radius:28px}
  .sprach-gitter{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== Ruhige Bewegung ===== */
@media (prefers-reduced-motion:reduce){
  .box.laeuft::before{animation:none;opacity:.8}
  .glut-ebene{animation:none!important}
  .glut-ebene.saum{opacity:.85}
  .glut-ebene.flamme.a{opacity:.35}
  .glut-ebene.flamme.b{opacity:0}
  .punkt::after{animation:none;display:none}
  .f,.box,#meldung{transition:none}
  #blatt .schleier,#blatt .platte{animation:none}
}

/* ===== Glas („Magic UI" wie beim UHU) =====
   Die großen Flächen (Tages-Boxen, Info-Band, „Als Nächstes", Kopfleiste,
   Blätter) sind mattiertes Glas: halb durchsichtig, der Grund dahinter
   weichgezeichnet und etwas satter, ein schräger Lichtverlauf mit feiner
   Körnung, oben eine Lichtkante. Um die Tages-Boxen wandert die Kante langsam.
   Die kleinen Aufguss-Boxen IN der Tages-Box tragen kein eigenes Weichzeichnen
   (das liefert schon die Tages-Box) – so bleibt es am Handy flüssig.
   :root davor, damit die Regeln die Grundfarben aus oeffentlich.css/team.css
   überstimmen. */
:root{--rausch-fein:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E")}
:root .tages-box,:root .info-band,:root .box.naechster,:root .pause-karte,:root .ort,:root .kuppel-karte{
  background-color:var(--glas-fill);
  background-image:linear-gradient(157deg,rgba(var(--glas-ton),.10) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.05) 100%),var(--rausch-fein);
  background-blend-mode:normal,var(--rausch-mix);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(var(--glas-ton),.14);
  box-shadow:inset 0 1px 0 var(--glas-kante),inset 0 -1px 0 rgba(0,0,0,.06),0 10px 30px -14px rgba(8,18,40,.35)}
/* Das Info-Band bleibt warm – gelbes Glas statt cremefarbenem */
:root .info-band{background-color:color-mix(in srgb,var(--tonal) 72%,transparent)}
/* Kleine Aufguss-Boxen: dichteres Glas ohne eigenes Weichzeichnen */
:root .tages-box .box:not(.laeuft):not(.vorbei):not(.naechster){background-color:var(--glas-klein);
  border-color:rgba(var(--glas-ton),.12);box-shadow:inset 0 1px 0 var(--glas-kante),0 4px 14px -10px rgba(8,18,40,.35)}
:root .box.naechster{border:1px solid rgba(169,188,242,.35)}
/* Die Kopfleiste: Glas über dem Grund */
:root .leiste{background:color-mix(in srgb,var(--stoff) 62%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
/* Wandernde Lichtkante um die Tages-Boxen (nur die Kante, Mitte ausgestanzt) */
@property --kantenwinkel{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes kanteWandert{to{--kantenwinkel:360deg}}
:root .tages-box{position:relative}
:root .tages-box::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;
  background:conic-gradient(from var(--kantenwinkel),rgba(var(--glas-ton),.34) 0deg,rgba(var(--glas-ton),.04) 60deg,
    rgba(var(--glas-ton),.24) 140deg,rgba(255,255,255,0) 205deg,rgba(var(--glas-ton),.18) 285deg,rgba(var(--glas-ton),.34) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:kanteWandert 34s linear infinite}
/* Die heutige Tages-Box behält ihren orangen Rand – die Kante leuchtet warm */
:root .tages-box.heute-box{border:2px solid var(--orange)}
:root .tages-box.heute-box::after{background:conic-gradient(from var(--kantenwinkel),rgba(255,139,0,.55) 0deg,rgba(255,191,0,.10) 70deg,
  rgba(255,139,0,.40) 150deg,rgba(255,191,0,0) 210deg,rgba(255,139,0,.30) 290deg,rgba(255,139,0,.55) 360deg)}
/* Ohne Weichzeichner (ältere Browser): Glas deckt voll, bleibt lesbar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root .tages-box,:root .info-band,:root .box.naechster,:root .pause-karte,:root .ort,:root .kuppel-karte{background-color:var(--surface)}
  :root .info-band{background-color:var(--tonal)}
  :root .leiste{background:var(--stoff)}
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none;opacity:.9}
  :root .tages-box::after{animation:none}
}

/* „vorbei" als echte Plakette (Wunsch: präsenter): gefüllt in gedecktem
   Kuppelblau mit Smiley – auf der zurückgenommenen Box sofort zu erkennen.
   Hell: #1F2F66 auf #D9E0F2 = 10,6:1 · Dunkel: #E4E9F7 auf #2C3A66 = 10,9:1 */
:root .pille.still{background:#D9E0F2;color:#1F2F66;padding:6px 11px 6px 8px;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(31,47,102,.18)}
:root .pille.still .ic{inline-size:18px;block-size:18px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pille.still{background:#2C3A66;color:#E4E9F7;box-shadow:inset 0 0 0 1px rgba(228,233,247,.16)}
}
:root[data-theme="dark"] .pille.still{background:#2C3A66;color:#E4E9F7;box-shadow:inset 0 0 0 1px rgba(228,233,247,.16)}
/* Gelbes Glas wurde hell trüb-oliv – das Info-Band deckt kräftiger */
:root .info-band{background-color:color-mix(in srgb,var(--tonal) 90%,transparent)}

/* Blatt schließt mit Rückzug statt Ausblenden: Handy gleitet nach unten,
   breit fährt es zur Seite; Rückfragen (Mitte) blenden nur aus */
@keyframes schleierWeg{to{opacity:0}}
@keyframes blattRunter{to{transform:translateY(100%)}}
@keyframes blattRaus{to{transform:translateX(var(--raus,100%))}}
[dir="rtl"] #blatt{--raus:-100%}
#blatt.geht{pointer-events:none}
#blatt.geht .schleier{animation:schleierWeg .22s ease-in forwards}
#blatt.geht .platte{animation:blattRunter .22s cubic-bezier(.4,0,.9,.6) forwards}
#blatt.geht .platte.frage{animation:schleierWeg .18s ease-in forwards}
@media (min-width:1000px){
  #blatt.geht .platte:not(.frage){animation-name:blattRaus}
}
@media (prefers-reduced-motion:reduce){ #blatt.geht .schleier,#blatt.geht .platte{animation:none} }

/* Vergangene Aufgüsse: dunklerer Grund statt durchsichtig – sie treten hinter
   die kommenden zurück, der hübsche Grund der Tages-Box bleibt drumherum.
   Hell: Grau #464952 auf ≈#D3DAE8 ≥ 6,8:1 · Dunkel: #B4B7C2 auf ≈#101A33 ≥ 8:1 */
:root .box.vorbei{background:rgba(22,32,63,.10)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .box.vorbei{background:rgba(0,4,16,.42)} }
:root[data-theme="dark"] .box.vorbei{background:rgba(0,4,16,.42)}

/* Laufende Box: die innere Glut atmet wie die Facette in der Kuppel – zwei
   Glutschichten mit versetztem Takt (wie .glut-ebene.flamme a/b), nur opacity
   (läuft auf dem Compositor). Text bleibt lesbar: dunkles #1A1405 auf dem
   tiefsten Glutton (≈#E06010) ≥ 5,5:1. */
@keyframes glutBox{0%{opacity:.25}40%{opacity:.9}65%{opacity:.5}100%{opacity:1}}
.box.laeuft::before{background:radial-gradient(85% 75% at 18% 118%,rgba(217,72,10,.85),transparent 68%),
    radial-gradient(55% 50% at 100% 35%,rgba(255,106,0,.40),transparent 70%);
  animation:glutBox 3.4s ease-in-out infinite alternate}
.box.laeuft::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(80% 70% at 88% 112%,rgba(217,72,10,.80),transparent 68%),
    radial-gradient(55% 45% at 12% -5%,rgba(255,244,190,.65),transparent 70%);
  will-change:opacity;animation:glutBox 4.6s ease-in-out -1.7s infinite alternate}
@media (prefers-reduced-motion:reduce){ .box.laeuft::before,.box.laeuft::after{animation:none;opacity:.75} }
/* Dunkel „getauscht": kommende Aufgüsse tragen den hübschen hellen Glas-Grund,
   die vergangenen sind dunkler (siehe oben) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tages-box .box:not(.laeuft):not(.vorbei):not(.naechster){background-color:rgba(150,170,235,.13)}
}
:root[data-theme="dark"] .tages-box .box:not(.laeuft):not(.vorbei):not(.naechster){background-color:rgba(150,170,235,.13)}

/* Laufende Box: ein Glutlicht wandert langsam und ruhig am Rand entlang
   (hypnotisch, 16 s pro Runde). Gezeichnet auf der Klick-Ebene (.box-auf),
   die ohnehin die ganze Box bedeckt – die Maske lässt nur den Ring stehen. */
.box.laeuft > .box-auf{padding:2.5px;
  background:conic-gradient(from var(--kantenwinkel),rgba(255,248,210,.95) 0deg,rgba(255,191,0,.15) 55deg,
    rgba(217,72,10,.85) 120deg,rgba(255,139,0,0) 190deg,rgba(255,139,0,.25) 250deg,rgba(255,220,120,.7) 320deg,rgba(255,248,210,.95) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:kanteWandert 16s linear infinite}
@media (prefers-reduced-motion:reduce){ .box.laeuft > .box-auf{animation:none} }

/* „Als Nächstes" dunkel in Kuppelblau (Wunsch: wirklich dunkel, blau) – oben
   und im Plan gleich. Die Farben der Box werden innen umgestellt, alle
   Bausteine darin (Name, wer, Text, Zutaten, Kuppel-Stück) folgen den Tokens.
   Kontrast: #FFF3D6 auf #18275E ≈ 13:1 · #CBD4F2 auf #253B80 ≈ 7:1 */
:root .box.naechster{
  --ink:#FFF3D6; --ink-2:#CBD4F2; --ink-3:#B7C0E0; --line:rgba(255,241,207,.16); --line-2:rgba(255,241,207,.30);
  --tonal:rgba(255,255,255,.14); --tonal-hover:rgba(255,255,255,.22); --dome:#A9BCF2; --dome-past:#5A6EC0;
  --accent-ink:#FFC94D; --surface:#1B2A5C; --focus:#FFD435; --stern-leer:rgba(255,241,207,.26);
  color:var(--ink);
  background:linear-gradient(162deg,#253B80 0%,#18275E 55%,#111C48 100%);
  border:1px solid rgba(169,188,242,.35);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,241,207,.10),0 12px 32px -14px rgba(8,18,40,.55)}

/* Info-Band dezenter (Wunsch): kein kräftiges Gelb/Hell mehr – leises Glas wie
   die übrigen Flächen, Text in der Nebenfarbe, nur ein zarter warmer Rand.
   Kontrast --ink-2 auf dem Glas: hell ≈ 8:1, dunkel ≈ 9:1 */
:root .info-band{background-color:var(--glas-fill);border:1px solid color-mix(in srgb,var(--amber) 38%,transparent);
  box-shadow:inset 0 1px 0 var(--glas-kante),0 6px 20px -14px rgba(8,18,40,.35)}
:root .info-band li{color:var(--ink-2);font-weight:400}
:root .info-band .ic{color:var(--accent-ink);opacity:.9}

/* ===== Magic UI in Stärke „Mittel" – genau wie UHU Stufe 2 =====
   (UHU: --glas-deck 60 %, blur(20px) saturate(1.4), Kante .10, Glut 26 %).
   Der Body deckt nicht mehr: sein Grund war über den Lichtern und hat sie
   verschluckt. Jetzt trägt html die Grundfarbe, darüber zwei Lichter:
   body::before = großer warmer Schein oben (wie UHU body::before, 160vw × 85vh),
   html::before = kühles Kuppelblau unten links (wie UHU .app::before),
   darüber die Körnung (body::after) → der „Grain-Gradient". */
body{background:transparent}
body::before{inset:auto;left:50%;top:-38vh;inline-size:160vw;block-size:85vh;translate:-50% 0;
  background:radial-gradient(ellipse at 50% 50%,var(--licht-warm) 0%,transparent 62%);
  animation:atmen 21s ease-in-out infinite}
html::before{content:"";position:fixed;z-index:-1;pointer-events:none;left:-20vw;bottom:-40vh;inline-size:120vw;block-size:80vh;
  background:radial-gradient(ellipse at 50% 50%,var(--licht-kalt) 0%,transparent 64%);
  animation:atmen 27s ease-in-out infinite reverse;will-change:transform,opacity}
:root{--licht-warm:rgba(255,164,40,.34);--licht-kalt:rgba(32,57,138,.24);--grain:.06}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--licht-warm:rgba(255,139,0,.26);--licht-kalt:rgba(64,96,200,.22);--grain:.08} }
:root[data-theme="dark"]{--licht-warm:rgba(255,139,0,.26);--licht-kalt:rgba(64,96,200,.22);--grain:.08}
/* Glas Stufe „Mittel" */
:root .tages-box,:root .info-band,:root .pause-karte,:root .ort,:root .kuppel-karte,:root .leiste,:root .tag-ueber{
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}
/* Körnung + Lichtverlauf auch auf allen Boxen (wie UHU-Karten) */
:root .tages-box .box:not(.laeuft):not(.naechster),:root .tag-ueber:not(.heute),:root .ruhe-karte{
  background-image:linear-gradient(157deg,rgba(var(--glas-ton),.10) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.05) 100%),var(--rausch-fein);
  background-blend-mode:normal,var(--rausch-mix)}
:root .box.laeuft{background:var(--rausch-fein),linear-gradient(162deg,#FFE36B 0%,var(--amber) 42%,var(--orange) 100%);background-blend-mode:multiply,normal}
:root .box.naechster{background:var(--rausch-fein),linear-gradient(162deg,#253B80 0%,#18275E 55%,#111C48 100%);background-blend-mode:soft-light,normal}
@media (prefers-reduced-motion:reduce){ html::before,body::before{animation:none} }

/* ===== Stärke überall als Feuer (Wunsch: immer gleich) =====
   Verlauf Glutrot → Orange → Gelb, dunkle Glutkante – steht auf Gelb wie auf Blau.
   Vergangenes bleibt grau (tritt zurück). */
:root .int-flamme.voll,:root .box.laeuft .int-flamme.voll,:root .box.naechster .int-flamme.voll{fill:url(#feuerVerlauf);stroke:#5A1600;stroke-width:1.1;stroke-linejoin:round}
:root .box.naechster .int-flamme:not(.voll){fill:rgba(255,241,207,.20)}
:root .box.vorbei .int-flamme.voll{fill:var(--ink-3);stroke:none}

/* ===== Kuppeln: nur die FARBIGEN Facetten sind gefüllt – ohne Kontur =====
   (Nutzer: „die Flächen, die wir füllen, sind die farbigen – sonst transparent")
   Alles andere bleibt durchsichtig mit dem feinen Gitter; die gefüllten
   Facetten (läuft, als Nächstes, vorbei) tragen keinen dunklen Rand mehr. */
.f.laeuft,.f.naechster,.f.vorbei,.f.vorbei.ausfall{stroke:none}
.f.laeuft{fill:var(--orange)}
.f.naechster{fill:var(--orange);fill-opacity:.75}
.f.vorbei{fill:var(--dome-past)}
.box.laeuft .stueck .f.laeuft{fill:#B83300;stroke:none}
.box.naechster .stueck .f.naechster{fill:var(--orange);fill-opacity:1;stroke:none}
.box.naechster .stueck .f.leise{stroke:rgba(169,188,242,.45)}
.box.vorbei .stueck .f.vorbei{stroke:none}

/* ===== Ruhe: keine Dauer-Animationen (Wunsch: flüssig, besser fürs Handy) =====
   Gemessen vorher: 31 Bilder/s, 86 Ruckler in 3 s. Ursache: Weichzeichner großer
   Flächen über einem bewegten Hintergrund + sich drehende Kanten (jedes Bild neu
   gemalt). Alles bleibt als stilles Bild stehen – Glut, Lava-Verlauf, Lichtkante.
   Was nur einmal passiert (Blatt gleitet, Vorlader), bleibt. */
body::before,html::before,:root .tages-box::after,.box.laeuft::before,.box.laeuft::after,.box.laeuft > .box-auf,
.box.laeuft .balken > span,.punkt::after,.glut-ebene,.glut-ebene.saum,.glut-ebene.flamme,.glut-ebene.flamme.b{animation:none !important;will-change:auto}
body::before{opacity:.95}
html::before{opacity:.9}
.box.laeuft::before{opacity:.8}
.box.laeuft::after{opacity:.65}
.punkt::after{display:none}
.glut-ebene.saum{opacity:.85}
.glut-ebene.flamme.a{opacity:.55}
.glut-ebene.flamme.b{opacity:.25}
/* Nur die schmale Kopfleiste zeichnet weich – große Flächen nicht mehr; damit
   sie trotzdem gut lesbar decken, etwas mehr Farbe im Glas */
:root .tages-box,:root .info-band,:root .tag-ueber,:root .pause-karte,:root .ort,:root .kuppel-karte,:root .box.naechster{
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
:root{--glas-fill:color-mix(in srgb,#FFFBEA 72%,transparent)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--glas-fill:color-mix(in srgb,#15213F 74%,transparent)} }
:root[data-theme="dark"]{--glas-fill:color-mix(in srgb,#15213F 74%,transparent)}

/* Beim Öffnen eines Blatts darf hinten nichts springen: der Platz des
   Scrollbalkens bleibt immer reserviert (sonst rückt die Seite um seine
   Breite zur Seite, wenn overflow:hidden ihn beim Öffnen verschwinden lässt) */
html{scrollbar-gutter:stable}

/* ===== Vorlader: die Kuppel baut sich auf =====
   Die Facetten zeichnen sich von unten nach oben (Strich wächst), jede glimmt
   kurz warm auf und klingt ab; dann erscheint der Name. Mindestens ~2 s zu
   sehen (kern.js vorladerWeg), danach blendet er aus. Läuft kein Skript,
   geht er nach 9 s von selbst. */
#vorlader{position:fixed;inset:0;z-index:300;display:grid;place-content:center;justify-items:center;gap:20px;
  background:var(--stoff);transition:opacity .55s ease,visibility 0s .55s;animation:vorladerNotaus .5s ease 9s forwards}
#vorlader svg{inline-size:min(58vw,250px);block-size:auto;overflow:visible}
#vorlader polygon{fill:transparent;stroke:var(--dome);stroke-width:1.2;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;
  animation:facetteZeichnen .45s cubic-bezier(.3,.7,.3,1) forwards,facetteGlut 1.1s ease-in-out forwards;
  animation-delay:var(--t),calc(var(--t) + .3s)}
@keyframes facetteZeichnen{to{stroke-dashoffset:0}}
@keyframes facetteGlut{0%{fill:transparent}35%{fill:rgba(255,164,40,.55)}100%{fill:rgba(255,164,40,.07)}}
#vorlader .vl-name{font-size:19px;font-weight:500;letter-spacing:.02em;color:var(--ink);opacity:0;animation:vlEin .6s ease 1.1s forwards}
@keyframes vlEin{to{opacity:1}}
#vorlader.fertig{opacity:0;visibility:hidden}
@keyframes vorladerNotaus{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  #vorlader polygon{animation:none;stroke-dashoffset:0}
  #vorlader .vl-name{animation:none;opacity:1}
}
/* Uhrzeiten überall etwas kräftiger */
.box .zeit time{font-weight:600}
.box .zeit time{font-weight:650}
/* Logo-Kuppel wie im Vorlader: Kuppelblau statt Weiß/Tinte */
.marke .f{stroke:var(--dome);stroke-width:1px;fill:transparent}

/* ===== Legende als kleine Box-Quadrate (wie die Boxen selbst) ===== */
.leg-q{display:inline-block;inline-size:15px;block-size:15px;border-radius:4px;flex:none;box-sizing:border-box}
.leg-q.vorbei{border:1.5px dashed var(--linie-vorbei);background:rgba(22,32,63,.10)}
.leg-q.laeuft{background:linear-gradient(162deg,#FFE36B 0%,var(--amber) 45%,var(--orange) 100%);box-shadow:0 0 0 1px rgba(217,72,10,.55)}
.leg-q.naechster{background:linear-gradient(162deg,#253B80,#111C48);box-shadow:0 0 0 1px rgba(169,188,242,.45)}
.leg-q.kommt{background:var(--glas-klein);border:1px solid rgba(var(--glas-ton),.35)}
.leg-q.ausfall{border:1.5px solid var(--warnung);background:transparent}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .leg-q.vorbei{background:rgba(0,4,16,.42)} :root:not([data-theme="light"]) .leg-q.kommt{background:rgba(150,170,235,.18)} }
:root[data-theme="dark"] .leg-q.vorbei{background:rgba(0,4,16,.42)}
:root[data-theme="dark"] .leg-q.kommt{background:rgba(150,170,235,.18)}
/* Die ausfallende Box passt zur Legende: rot umrandet */
:root .box.ausfall{border:1.5px solid var(--warnung)}
:root .box.vorbei.ausfall{border:1.5px dashed var(--warnung)}
/* Ausfall rot umrandet – auch gegen die Glas-Regel der Boxen im Plan */
:root .tages-box .box.ausfall:not(.laeuft):not(.vorbei):not(.naechster),:root .box.ausfall:not(.vorbei){border:1.5px solid var(--warnung)}
:root .tages-box .box.vorbei.ausfall{border:1.5px dashed var(--warnung)}
:root .pille.aus{background:transparent;color:var(--warnung);box-shadow:inset 0 0 0 1.5px var(--warnung);font-weight:600}
/* Offenes Blatt: der Hintergrund tritt deutlicher zurück (dunklerer Schleier) */
:root{--scrim:rgba(8,12,26,.64)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--scrim:rgba(0,0,0,.74)} }
:root[data-theme="dark"]{--scrim:rgba(0,0,0,.74)}

/* ===== Hintergrund blau statt rötlich (Nutzer-Feedback) =====
   Der warme Schein oben (Orange/Amber) wirkte als Rötung. Oben jetzt ein
   helleres Kuppelblau, unten links das dunklere – nur Blautöne. */
:root{--licht-warm:rgba(96,140,236,.30);--licht-kalt:rgba(32,57,138,.22)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--licht-warm:rgba(72,112,228,.28);--licht-kalt:rgba(40,72,176,.22)} }
:root[data-theme="dark"]{--licht-warm:rgba(72,112,228,.28);--licht-kalt:rgba(40,72,176,.22)}
/* Hell: Glas kühl-weiß statt Creme (auf dem blauen Grund wirkte Creme beige);
   Rand des Info-Bands blau statt Bernstein */
:root{--glas-fill:color-mix(in srgb,#F6F8FF 62%,transparent);--glas-klein:color-mix(in srgb,#F6F8FF 84%,transparent);--glas-ton:24,36,80;--band-rand:rgba(63,91,181,.24)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--band-rand:rgba(169,188,242,.22)} }
:root[data-theme="dark"]{--band-rand:rgba(169,188,242,.22)}
:root .info-band{border-color:var(--band-rand)}

/* ===== Pillen und Zeit überall gleich (Nutzer-Feedback 01.10.) =====
   Plan, Team-Plan, Detail-Fenster und die großen Boxen oben zeigen denselben
   Zustand gleich: die Pille steht in einer eigenen Zeile ÜBER der Uhrzeit,
   „Läuft gerade" schwarz mit oranger Schrift und orangem Punkt (#FF8B00 auf
   #1A1405 ≈ 7,8:1), „Als Nächstes" weiß mit Kuppelblau (#20398A auf #FFF ≈ 10:1)
   + „in 55 Min." dunkles Blau
   (#C9D6FF auf #0F1A3F ≈ 12:1). Die Zeit steht überall „13:30 – 13:40"
   (beide Zahlen gleich groß, 700, enger Strich) statt „13:30 10 Min.". */
.box-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-block-size:28px;margin-block-end:12px;padding-inline-end:62px}
.box-status + .box-kopf{min-block-size:0}
@media (max-width:999px){ .box-status:empty{display:none} }
.pille.oben-live{background:#1A1405;color:#FF8B00;font-weight:500;padding:7px 12px 7px 10px}
.pille.oben-live .punkt{background:#FF8B00}
.pille.wort{background:#FFFFFF;color:#20398A;font-weight:600;box-shadow:none}
/* „in 55 Min." = „Als Nächstes" umgekehrt: Blau als Grund, weiße Schrift. Ein Stück
   dunkler als das Kuppelblau #20398A, sonst verschwindet die Pille im Grund der
   blauen Box (#253B80). Weiß auf #142463 ≈ 14:1 */
.pille.wort + .pille.bald{background:#142463;color:#FFFFFF;box-shadow:none;font-weight:600;font-variant-numeric:tabular-nums}
.box .zeit:has(.bis-strich){gap:0}
.box .zeit .bis-strich{margin-inline:.2em;font-weight:500}
.box .zeit time,.box .zeit .bis.gleich{font-weight:700}
.box .zeit .bis.gleich{font-size:inherit;margin:0}

/* ===== Tagesplan dunkel (Nutzer-Feedback 01.10.: „alles zu hell") =====
   - Heute: die ganze Tages-Box dunkel, die Boxen darin etwas heller.
   - Kommende Aufgüsse (auch morgen): dunkle Boxen mit der Pille „Demnächst".
   - Vorbei: gar kein Hintergrund, nur gestrichelt – die Tages-Box „Vorbei" auch.
   Auf den dunklen Flächen gelten lokal die Farben des dunklen Themas, auch
   wenn die Seite hell ist: --ink 13:1, --ink-2 8,8:1, --ink-3 ≥ 8:1 auf #1B2749.
   :not(#_) gibt den Regeln Vorrang vor den älteren Glas-Schichten. */
:root .tages-box.heute,:root .box.kommt,:root .box.ausfall:not(.vorbei){
  color-scheme:dark;
  --ink:#FFF1CF; --ink-2:#C3C8DC; --ink-3:#B4B7C2; --ink-stoff-2:#D5D9E8;
  --line:rgba(255,241,207,.12); --line-2:rgba(255,241,207,.30); --line-stoff:rgba(255,241,207,.20);
  --surface:#15213F; --surface-2:#0C1630; --surface-3:#1E2C52;
  --dome:#8EA4E8; --dome-past:#4A5DB0; --wood:#B98446; --naechst:#FF8B00;
  --tonal:#1B3368; --tonal-hover:#244284; --glut-hoch:#FFD435; --linie-vorbei:rgba(255,241,207,.36);
  --accent-ink:#FFC94D; --warnung:#FFB4AB; --focus:#FFD435;
  --glas-ton:255,255,255; --glas-kante:rgba(255,241,207,.10); --rausch-mix:soft-light;
  --stern:#FFBF00; --stern-leer:rgba(255,241,207,.26); --kante:inset 0 1px 0 rgba(255,241,207,.07);
  color:var(--ink)}
:root:not(#_) .tages-box.heute{background-color:rgba(9,15,36,.9);
  background-image:linear-gradient(157deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 40%),var(--rausch-fein);
  background-blend-mode:normal,soft-light}
:root:not(#_) .box.kommt,:root:not(#_) .box.ausfall:not(.vorbei){background-color:#1B2749;
  background-image:linear-gradient(157deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.10) 100%),var(--rausch-fein);
  background-blend-mode:normal,soft-light;border-color:rgba(169,188,242,.16);
  box-shadow:inset 0 1px 0 rgba(255,241,207,.07),0 6px 18px -12px rgba(4,8,20,.6)}
:root:not(#_) .box.ausfall:not(.vorbei){border-color:var(--warnung)}
:root:not(#_) .box.vorbei{background:transparent none;box-shadow:none}
:root:not(#_) .tages-box.vorbei{background:transparent none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  border:1.5px dashed var(--linie-vorbei)}
:root:not(#_) .tages-box.vorbei::after{display:none}
.pille.demnaechst{background:rgba(169,188,242,.14);color:#DCE3F7;box-shadow:inset 0 0 0 1px rgba(169,188,242,.24)}
/* Legende passend: „vorbei" nur gestrichelt, „kommt" dunkel */
:root:not(#_) .leg-q.vorbei{background:transparent}
:root:not(#_) .leg-q.kommt{background:#1B2749;border:1px solid rgba(169,188,242,.35)}

/* ===== Hover dezent (Nutzer-Feedback) =====
   Kein Rand, kein Glow beim Überfahren. Die großen Boxen oben bleiben ganz
   ruhig; die kleinen im Plan werden nur im Grund eine Spur heller. */
@media (hover:hover){
  .box{transition:background-color .15s ease,filter .15s ease}
  :root:not(#_) .box.kommt:has(> .box-auf:hover),:root:not(#_) .box.ausfall:not(.vorbei):has(> .box-auf:hover){background-color:#243259}
  :root:not(#_) .box.vorbei:has(> .box-auf:hover){background-color:color-mix(in srgb,var(--ink) 6%,transparent)}
  .box.laeuft:not(.gross):has(> .box-auf:hover),.box.naechster:not(.gross):has(> .box-auf:hover){filter:brightness(1.05)}
}

/* ===== Rauschen sichtbar wie bei UHU (Nutzer-Feedback: „kann man nicht sehen") =====
   Dieselbe Körnung, nur kräftiger. Gemessen als Pixel-Unruhe auf glatter Fläche:
   UHU dunkel 1,9 · wir vorher hell 0,7 (.06, kaum zu sehen) / dunkel 2,1 (.08).
   Jetzt hell .20 ≈ 2,2 (auf hellem Grund braucht es mehr, um gleich sichtbar zu sein),
   dunkel .11 ≈ 2,9. */
:root{--grain:.20}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--grain:.11} }
:root[data-theme="dark"]{--grain:.11}

/* Tages-Box wieder an allen Ecken rund (früher hing oben links ein Reiter an ihr) */
@media (min-width:1000px){ :root:not(#_) .tag-spalte > .tages-box{border-start-start-radius:24px} }

/* ===== Vorbei / Heute / Morgen als große Wörter, mittig (Nutzer-Feedback, ersetzt die Pillen) =====
   Nur das Wort über jeder Tages-Box, ohne Pille. Am Handy dasselbe statt der
   Kacheln: drei Wörter, der gewählte Tag in voller Farbe mit oranger Linie.
   Wochentag und Datum bleiben für Screenreader im Reiter (der Tag steht
   sichtbar ohnehin oben in der Tages-Box). „Aufgussplan" größer, dünner (450). */
:root:not(#_) .plan > .abschnitt-titel{font-size:40px;line-height:1.05;font-weight:450;letter-spacing:-.01em}
@media (min-width:1000px){
  :root:not(#_) .plan > .abschnitt-titel{font-size:60px;letter-spacing:-.02em;margin-block-end:44px}
  :root:not(#_) .tag-ueber{justify-self:center;align-self:end;margin:0 0 6px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;font-size:30px;line-height:1.1;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
  :root:not(#_) .tag-ueber::before{content:none}
}
:root:not(#_) .tage-reiter{gap:0}
:root:not(#_) .reiter{min-block-size:0;justify-items:center;align-content:center;padding:10px 4px 14px;border:0;border-radius:0;
  background:none;box-shadow:none;color:var(--ink-2)}
:root:not(#_) .reiter .kuppel-svg,:root:not(#_) .reiter::after{display:none}
:root:not(#_) .reiter-tag,:root:not(#_) .reiter-datum{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root:not(#_) .reiter-rel{font-size:24px;line-height:1.15;font-weight:500;color:inherit}
:root:not(#_) .reiter[aria-selected="true"]{color:var(--ink)}
:root:not(#_) .reiter[aria-selected="true"]::before{content:"";position:absolute;inset-inline:24%;inset-block-end:3px;block-size:3px;border-radius:3px;background:var(--orange)}
@media (hover:hover){ :root:not(#_) .reiter:not([aria-selected="true"]):hover{background:none;color:var(--ink)} }

/* ===== Runde 01.10. nachts (Nutzer-Feedback, gesammelt) ===== */
/* Tages-Boxen: alle Ränder gleich dick (1,5 px), weniger rund. Vorbei bleibt
   gestrichelt ohne Grund. Heute: kaum sichtbares dunkles Orange, Rand als
   Orange-Verlauf. Morgen (kommende Tage): dunkel wie die kommenden Boxen. */
:root:not(#_) .tages-box{border-width:1.5px;border-radius:24px}
:root .tages-box.kommt{
  color-scheme:dark;
  --ink:#FFF1CF; --ink-2:#C3C8DC; --ink-3:#B4B7C2; --ink-stoff-2:#D5D9E8;
  --line:rgba(255,241,207,.12); --line-2:rgba(255,241,207,.30); --line-stoff:rgba(255,241,207,.20);
  --surface:#15213F; --surface-2:#0C1630; --surface-3:#1E2C52;
  --dome:#8EA4E8; --dome-past:#4A5DB0; --tonal:#1B3368; --tonal-hover:#244284; --linie-vorbei:rgba(255,241,207,.36);
  --accent-ink:#FFC94D; --warnung:#FFB4AB; --focus:#FFD435; --glas-ton:255,255,255; --glas-kante:rgba(255,241,207,.10);
  --rausch-mix:soft-light; --stern:#FFBF00; --stern-leer:rgba(255,241,207,.26); color:var(--ink)}
:root:not(#_) .tages-box.kommt{background-color:rgba(5,9,24,.94);
  background-image:linear-gradient(157deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 40%),var(--rausch-fein);
  background-blend-mode:normal,soft-light;border-color:rgba(169,188,242,.22)}
:root:not(#_) .tages-box.heute{background-color:rgba(5,9,24,.94);border-color:transparent}
:root:not(#_) .tages-box.heute::after{display:block;inset:-1.5px;padding:1.5px;animation:none;
  background:linear-gradient(135deg,#FFE066 0%,#FFC21A 50%,#FFA41F 100%)}
/* „Heute" als Wort im selben Verlauf wie der Rand – gelblich, sanft (Nutzer: „zu
   stark zwischen Orange und Gelb"). Hell dunklere Bernsteintöne, damit es auf dem
   hellen Grund lesbar bleibt, dunkel die leuchtenden. Hell tiefer Bernstein
   #7A3D04 → #883A06: ≥ 4,7:1 auch auf der dunkelsten Stelle des Grunds (#BEC7E0,
   Design-Prüfung: #B45309/#C2620A lag am Handy bei 2,8:1). */
:root{--heute-verlauf:linear-gradient(90deg,#7A3D04,#883A06)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--heute-verlauf:linear-gradient(90deg,#FFE066,#FFC21A 60%,#FFB020)} }
:root[data-theme="dark"]{--heute-verlauf:linear-gradient(90deg,#FFE066,#FFC21A 60%,#FFB020)}
:root:not(#_) .tag-ueber.heute,:root:not(#_) .reiter.heute .reiter-rel{background:var(--heute-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Vergangene Tage leuchten nicht: Wort „Vorbei" und der Tageskopf in derselben
   gedämpften Farbe wie Uhrzeit und Text der vergangenen Boxen */
:root:not(#_) .tag-ueber.vorbei{color:var(--ink-3)}
:root:not(#_) .tages-box.vorbei .tages-kopf,:root:not(#_) .tages-box.vorbei .tages-kopf h2,:root:not(#_) .tages-box.vorbei .tages-kopf h3,
:root:not(#_) .tages-box.vorbei .tages-kopf span{color:var(--ink-3)}
:root:not(#_) .tages-box.vorbei .tages-kopf svg{opacity:.55}

/* Boxen weniger rund */
:root:not(#_) .box{border-radius:18px}
:root:not(#_) .box.gross{border-radius:22px}
:root:not(#_) .vorbei-knopf{border-radius:14px}

/* Dauer-Zeile in allen Boxen (wie die großen) */
.box:not(.gross) .lauf{margin-block-start:10px;gap:10px}
.box:not(.gross) .balken{block-size:8px}
.box:not(.gross) .lauf .rest{font-size:14px}
.box.kommt .balken,.box.naechster .balken{background:rgba(255,241,207,.16)}
.box.kommt .lauf .rest,.box.naechster .lauf .rest{color:var(--ink-2)}
.box.vorbei .balken{background:transparent;box-shadow:inset 0 0 0 1px var(--linie-vorbei)}
.box.vorbei .balken > span{background:color-mix(in srgb,var(--ink-3) 38%,transparent)}
.box.vorbei .lauf .rest{color:var(--ink-3)}
/* Lava-Balken auch im Team-Plan (dort fehlt oeffentlich.css) – steht still */
.box.laeuft .balken{background:rgba(26,20,5,.20);box-shadow:inset 0 1px 2px rgba(26,20,5,.25)}
.box.laeuft .balken > span{background:linear-gradient(90deg,#8E2400 0%,#D9480A 18%,#FF6A00 34%,#FFC21A 50%,#FF6A00 66%,#D9480A 82%,#8E2400 100%);
  background-size:200% 100%;box-shadow:0 0 10px rgba(255,106,0,.55)}

/* „3 Aufgüsse vorbei" oben, die Zeit „13:30 – 15:40" in der zweiten Zeile */
.vorbei-knopf .vg-text{display:flex;flex-direction:column;gap:4px;line-height:1.25}
.vg-zeit{font-variant-numeric:tabular-nums;font-weight:600}
.vg-zeit .bis-strich{margin-inline:.3em}

/* Detail-Blatt des laufenden Aufgusses: nur orange umrandet */
#blatt .platte.ist-laeuft{outline:2px solid var(--orange);outline-offset:-2px}

/* Wischen zum Schließen: Griff und Kopf gehören der Geste, der Inhalt scrollt
   für sich (kein Weiterreichen an die Seite) */
#blatt .griff,#blatt .platte-kopf{touch-action:none}
#blatt .griff{position:relative}
#blatt .griff::before{content:"";position:absolute;inset:-14px -48px}
#blatt .platte-inhalt{overscroll-behavior:contain}

/* Handy: „Calma" / „Ritualsauna" zweizeilig und größer, mehr Luft zur Box
   darunter; Legende mittig; Sprach- und Teilen-Knopf flacher */
@media (max-width:999px){
  :root:not(#_) .kopf{padding-block:18px 32px}
  :root:not(#_) .kopf h1{font-size:clamp(42px,14vw,58px);line-height:1;letter-spacing:-.02em}
  :root:not(#_) .kopf h1 .z{display:block}
  :root:not(#_) .kopf-legende .legende{justify-content:center}
  :root:not(#_) .leiste .sprach-knopf{min-block-size:40px;padding-inline:10px 8px}
  :root:not(#_) .leiste .icon-knopf{min-block-size:40px;min-inline-size:40px}
}

/* Detail-Blatt: der Balken des laufenden Aufgusses wie in den Boxen (Lava) */
.detail-lauf .balken{background:rgba(26,20,5,.20);box-shadow:inset 0 1px 2px rgba(26,20,5,.25)}
.detail-lauf .balken > span{background:linear-gradient(90deg,#8E2400 0%,#D9480A 18%,#FF6A00 34%,#FFC21A 50%,#FF6A00 66%,#D9480A 82%,#8E2400 100%);
  background-size:200% 100%;box-shadow:0 0 10px rgba(255,106,0,.55)}

/* ===== Prüfbefunde 01.10. (Zugang, Kontrast, Sprachen) =====
   Fokusring an der ganzen Box: Der Knopf .box-auf deckt die Box ab, sein Ring
   läge außerhalb – und die laufende Box schneidet mit overflow:hidden (und der
   Glutkante) alles außen ab. Die Box selbst zeichnet ihn; ihr eigenes overflow
   schneidet ihren Umriss nicht. Farbe --ring = passend zu dem, was HINTER der
   Box liegt (Seite bzw. dunkle Tages-Box), nicht zur Box selbst: das Gelb der
   „Als Nächstes"-Box war auf der hellen Seite kaum zu sehen (1,1:1). */
:root{--ring:#16203F}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--ring:#FFD435} }
:root[data-theme="dark"]{--ring:#FFD435}
/* alle Tages-Boxen sind dunkel (auch „Vorbei", Bauplan 24) */
:root .tages-box{--ring:#FFD435}
.box:has(> .box-auf:focus-visible){outline:3px solid var(--ring);outline-offset:3px}
.box:has(> .box-auf:focus-visible) > .box-auf:focus-visible{outline:none}
/* Volle Einträge in Listen mit overflow:hidden: der Ring liegt innen */
.teilen-liste :is(a,button):focus-visible{outline-offset:-3px}

/* Platzhalter gut lesbar (Browser-Grau #757575 lag bei 3,5–4,4:1) */
.eingabe::placeholder{color:var(--ink-2);opacity:1}

/* „Fällt aus" in vergangenen Boxen: Steht eine vergangene Box auf hellem Grund
   (helles Thema, außerhalb der dunklen Tages-Boxen), dunkles Rot – #8C1D18 ≈ 6:1
   (das helle #FF9A94 läge dort bei ≈ 1,2:1). Auf den (inzwischen durchweg dunklen)
   Tages-Boxen und im dunklen Thema bleibt das helle Rot. */
:root{--aus-vorbei:#8C1D18}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--aus-vorbei:#FF9A94} }
:root[data-theme="dark"],:root .tages-box{--aus-vorbei:#FF9A94}
:root:not(#_) .box.vorbei .pille.aus{color:var(--aus-vorbei)}

/* Blatt: Einblenden nur beim ersten Öffnen (kern.js setzt .ruhig beim Neuzeichnen) */
#blatt.ruhig .schleier,#blatt.ruhig .platte,#blatt.ruhig .platte.frage{animation:none}

/* Japanisch mit japanischer Schrift – sonst setzt der Stapel Kanji in chinesischen
   Formen (PingFang SC/Microsoft YaHei stehen vor Hiragino/Yu Gothic) */
:root:lang(ja){--font:"Google Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,-apple-system,sans-serif}
:root:lang(ko){--font:"Google Sans","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif}

/* Info-Band: unsere Kuppel (wie im Logo) statt des Kuppel-Symbols */
.band-kuppel{display:inline-block;inline-size:30px;flex:none;line-height:0}
.band-kuppel svg{display:block;inline-size:100%;block-size:auto}
.band-kuppel .f{stroke:var(--dome);stroke-width:1.1px;fill:transparent}

/* ===== Kontrast im Plan (Nutzer-Feedback: „zu warm", „zu hell-bläulich") =====
   Tages-Boxen Heute und Morgen wirklich dunkelblau (#050918), kein warmer Ton –
   Heute erkennt man am gelb-orangen Verlaufsrand und am Wort. Kommende Boxen ein
   klares, sattes Dunkelblau statt Grau-Blau, damit sie herausstechen; ihre Texte
   heller und weniger bläulich (--ink-2 #E0E3EC ≈ 12:1 auf #12224F). Vergangenes
   dunkler: --ink-3 #8E93A5 (≥ 6:1 auf dem dunklen Grund), die Pille „vorbei" gedämpft. */
:root:not(#_) .box.kommt,:root:not(#_) .box.ausfall:not(.vorbei){background-color:#12224F;
  background-image:linear-gradient(170deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%),var(--rausch-fein);
  border-color:rgba(130,160,240,.22)}
@media (hover:hover){
  :root:not(#_) .box.kommt:has(> .box-auf:hover),:root:not(#_) .box.ausfall:not(.vorbei):has(> .box-auf:hover){background-color:#182C62}
}
:root:not(#_) .tages-box.heute,:root:not(#_) .tages-box.kommt,:root:not(#_) .box.kommt,:root:not(#_) .box.ausfall:not(.vorbei){--ink-2:#E0E3EC;--ink-3:#8E93A5}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--ink-3:#8E93A5} }
:root[data-theme="dark"]{--ink-3:#8E93A5}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pille.still{background:#1C2645;color:#AEB4C6;box-shadow:inset 0 0 0 1px rgba(174,180,198,.14)} }
:root[data-theme="dark"] .pille.still,:root:not(#_) .tages-box.heute .pille.still{background:#1C2645;color:#AEB4C6;box-shadow:inset 0 0 0 1px rgba(174,180,198,.14)}
:root:not(#_) .leg-q.kommt{background:#12224F;border:1px solid rgba(130,160,240,.4)}

/* ===== Pillen ohne Rand (Nutzer-Feedback) – nur Fläche und Schrift ===== */
:root:not(#_) .pille{box-shadow:none;border:0}

/* ===== „Fällt aus": rötlich statt rosa =====
   Die Box leicht rötlich hinterlegt, Schrift eine Spur rötlich, Rand klar rot
   (#E5484D statt des rosa #FFB4AB). Pille rötlich gefüllt, ohne Rand.
   Kontraste auf #2B1419: Titel #FFE4E1 ≈ 15:1 · Nebentext #F2BDB8 ≈ 10:1 ·
   Pille #FF9A94 auf ≈#52202A ≈ 6,5:1 */
:root:not(#_) .box.ausfall:not(.vorbei){--ink:#FFE4E1;--ink-2:#F2BDB8;--ink-3:#C99A96;--warnung:#FF9A94;
  background-color:#2B1419;background-image:linear-gradient(170deg,rgba(255,120,120,.07) 0%,rgba(255,255,255,0) 40%),var(--rausch-fein);
  border:1.5px solid #E5484D}
@media (hover:hover){ :root:not(#_) .box.ausfall:not(.vorbei):has(> .box-auf:hover){background-color:#35181F} }
:root:not(#_) .pille.aus{background:rgba(229,72,77,.24);color:#FF9A94;font-weight:600}
:root:not(#_) .box.vorbei .pille.aus{background:rgba(229,72,77,.14)}
:root:not(#_) .leg-q.ausfall{background:rgba(229,72,77,.28);border:1.5px solid #E5484D}

/* ===== Pillen über der Zeit: höher, mehr Luft seitlich und zur Uhrzeit (Nutzer-Feedback) ===== */
:root:not(#_) .box-status{min-block-size:32px;margin-block-end:16px}
:root:not(#_) .box-status .pille,:root:not(#_) .detail-status .pille{padding:9px 14px}
:root:not(#_) .box-status .pille.oben-live,:root:not(#_) .detail-status .pille.oben-live{padding:9px 15px 9px 12px}
:root:not(#_) .box-status .pille.still{padding:9px 14px 9px 11px}

/* ===== QR-Code-Blatt: großer Code auf weißer Karte (liest jede Kamera) ===== */
.qr-karte{display:grid;justify-items:center;gap:14px;margin:6px auto 10px;padding:24px 24px 18px;border-radius:22px;background:#FFFFFF;color:#16203F;
  inline-size:fit-content;max-inline-size:100%;box-shadow:0 10px 30px -14px rgba(0,0,0,.45)}
.qr-code{inline-size:min(68vw,300px)}
.qr-code svg{display:block;inline-size:100%;block-size:auto}
.qr-adresse{margin:0;font-size:17px;font-weight:600;letter-spacing:.01em;overflow-wrap:anywhere;text-align:center}
.qr-hilfe{text-align:center}

/* Handy: Marke, Sprache, QR und Teilen passen in EINE Zeile – die Marke gibt nach
   (schrumpft statt die Knöpfe umzubrechen), die Knöpfe sind etwas kompakter */
@media (max-width:999px){
  :root:not(#_) .leiste-in{column-gap:4px}
  :root:not(#_) .leiste .marke{flex:1 1 0;gap:8px}
  :root:not(#_) .leiste .marke-kuppel{inline-size:30px}
  :root:not(#_) .leiste .sprach-knopf{padding-inline:9px 7px;gap:4px}
  :root:not(#_) .leiste .icon-knopf{min-inline-size:38px;min-block-size:40px}
}

/* ===== „Demnächst" wirklich dunkler als „Als Nächstes" (Nutzer-Feedback) =====
   Als Nächstes bleibt das hellere Kuppelblau (#253B80 → #111C48), kommende Boxen
   ein tiefes Nachtblau #0C1633 – hebt sich vom Tages-Grund #050918 noch ab
   (Rand + Licht oben). Text #FFF1CF ≈ 16:1, Nebentext #E0E3EC ≈ 14:1. */
:root:not(#_) .box.kommt{background-color:#0C1633;border-color:rgba(130,160,240,.20);
  background-image:linear-gradient(170deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 35%),var(--rausch-fein)}
@media (hover:hover){ :root:not(#_) .box.kommt:has(> .box-auf:hover){background-color:#122043} }
:root:not(#_) .leg-q.kommt{background:#0C1633;border:1px solid rgba(130,160,240,.4)}

/* ===== Farben passen sich dem Grund an (dynamisch wie bei UHU / Material „tonal") =====
   Jeder Zustand bringt seine eigene Tonfamilie mit: Zutaten-Chips (--tonal), das
   Kuppel-Zeichen (--dome) und die Flammen folgen dem Grund der Box. Beispiel
   „Fällt aus": Chips rötlich statt blau (#FFE4E1 auf #4B1F27 ≈ 11:1). */
:root:not(#_) .box.kommt{--tonal:#1A2A5C;--tonal-hover:#22346C}
:root:not(#_) .box.ausfall:not(.vorbei){--tonal:#4B1F27;--tonal-hover:#5A2630;--dome:#F2A7A2;--dome-past:#9E5A5A}
/* Flammen: auf dunklen Flächen der helle Verlauf ohne dunklen Rand (auf #0C1633
   ≈ 10:1), leere Flammen etwas deutlicher; auf der gelben „Läuft"-Box der tiefe */
:root{--feuer:url(#feuerVerlauf);--feuer-rand:#5A1600;--flamme-leer:color-mix(in srgb,var(--ink) 13%,transparent)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--feuer:url(#feuerHell);--feuer-rand:transparent;--flamme-leer:rgba(255,241,207,.26)} }
:root[data-theme="dark"],:root .tages-box.heute,:root .tages-box.kommt,:root .box.kommt,:root .box.naechster,:root .box.ausfall:not(.vorbei){
  --feuer:url(#feuerHell);--feuer-rand:transparent;--flamme-leer:rgba(255,241,207,.26)}
:root .box.laeuft{--feuer:url(#feuerVerlauf);--feuer-rand:#5A1600;--flamme-leer:rgba(26,20,5,.18)}
:root:not(#_) .int-flamme{fill:var(--flamme-leer)}
:root:not(#_) .int-flamme.voll{fill:var(--feuer);stroke:var(--feuer-rand);stroke-width:1.1;stroke-linejoin:round}
:root:not(#_) .box.vorbei .int-flamme.voll{fill:var(--ink-3);stroke:none}

/* Vorbei / Heute / Morgen etwas größer und kräftiger, mehr Luft unter „Aufgussplan" (Nutzer-Feedback) */
@media (min-width:1000px){
  :root:not(#_) .plan > .abschnitt-titel{margin-block-end:64px}
  :root:not(#_) .tag-ueber{font-size:36px;font-weight:600;letter-spacing:-.015em;margin-block-end:10px}
}
:root:not(#_) .reiter-rel{font-size:26px;font-weight:600}

/* „Als Nächstes" + „in 55 Min." verschweißt zu einer Doppel-Pille (Nutzer-Feedback):
   gleiche Höhe, keine Lücke, innen gerade Kanten, außen rund */
.pillen-paar{display:inline-flex;align-items:stretch;flex:none}
.pillen-paar > .pille{margin:0}
:root:not(#_) .pillen-paar > .pille.wort{border-start-end-radius:0;border-end-end-radius:0}
:root:not(#_) .pillen-paar > .pille.bald{border-start-start-radius:0;border-end-start-radius:0}
/* Im hellen Blatt verschwände das Weiß auf dem cremefarbenen Grund – dort ein zartes
   Hellblau (#20398A auf #DCE4F7 ≈ 8:1); im dunklen Blatt bleibt es weiß */
:root:not(#_) #blatt .pillen-paar > .pille.wort{background:#DCE4F7}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not(#_) #blatt .pillen-paar > .pille.wort{background:#FFFFFF} }
:root[data-theme="dark"]:not(#_) #blatt .pillen-paar > .pille.wort{background:#FFFFFF}

/* ===== Ränder: kräftiger und heil (Nutzer-Feedback „sieht kaputt aus") =====
   Der Heute-Rand war eine maskierte ::after-Ebene – an den Ecken lag ihr Radius
   innen, der Rand wurde dort dünner. Jetzt ein echter Rand mit Verlauf
   (border-box-Hintergrund unter deckendem padding-box-Grund), überall 2 px. */
:root:not(#_) .tages-box{border-width:2px}
:root:not(#_) .tages-box.heute{border:2px solid transparent;
  background:var(--rausch-fein) padding-box,linear-gradient(#060A1A,#060A1A) padding-box,
    linear-gradient(135deg,#FFE066 0%,#FFC21A 50%,#FFA41F 100%) border-box;
  background-blend-mode:soft-light,normal,normal}
:root:not(#_) .tages-box.heute::after{display:none}
/* Große „Als Nächstes"-Box: kein cremeweißer Rand mehr (alte Dunkel-Regel mit .78),
   dezent blau wie die übrigen */
:root:not(#_) .box.naechster{border:1.5px solid rgba(130,160,240,.30)}
/* Info-Band: alle drei Zeichen in derselben Farbe wie Flamme und Uhr (Nutzer-Feedback) */
:root:not(#_) .info-band .band-kuppel .f{stroke:var(--accent-ink)}
:root:not(#_) .info-band .band-kuppel{opacity:.9}

/* Nur „Heute" groß und kräftig; Vorbei und Morgen normal (Nutzer-Feedback, ersetzt 36px/600 für alle) */
@media (min-width:1000px){
  :root:not(#_) .tag-ueber{font-size:30px;font-weight:500;margin-block-end:10px}
  :root:not(#_) .tag-ueber.heute{font-size:46px;line-height:1.05;font-weight:650;letter-spacing:-.02em;margin-block-end:6px}
}
:root:not(#_) .reiter-rel{font-size:22px;font-weight:500}
:root:not(#_) .reiter.heute .reiter-rel{font-size:28px;font-weight:650}

/* ===== Alle drei Tages-Boxen mit demselben dunklen Grund (Nutzer-Feedback: einheitlich) =====
   „Vorbei" behält den gestrichelten Rand, die Boxen darin bleiben ohne Grund.
   Dunkle Tokens auch hier, damit es im hellen Thema lesbar ist
   (--ink-3 #8E93A5 auf #060A1A ≈ 6,3:1). */
:root .tages-box.vorbei{
  color-scheme:dark;
  --ink:#FFF1CF; --ink-2:#E0E3EC; --ink-3:#8E93A5; --ink-stoff-2:#D5D9E8;
  --line:rgba(255,241,207,.12); --line-2:rgba(255,241,207,.30); --line-stoff:rgba(255,241,207,.20);
  --surface:#15213F; --surface-2:#0C1630; --surface-3:#1E2C52;
  --dome:#8EA4E8; --dome-past:#4A5DB0; --tonal:#1B3368; --tonal-hover:#244284; --linie-vorbei:rgba(255,241,207,.30);
  --accent-ink:#FFC94D; --warnung:#FFB4AB; --focus:#FFD435; --glas-ton:255,255,255; --glas-kante:rgba(255,241,207,.10);
  --rausch-mix:soft-light; --stern:#FFBF00; --stern-leer:rgba(255,241,207,.26);
  --feuer:url(#feuerHell); --feuer-rand:transparent; --flamme-leer:rgba(255,241,207,.26); color:var(--ink)}
:root:not(#_) .tages-box.vorbei{background-color:rgba(5,9,24,.94);
  background-image:linear-gradient(157deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 40%),var(--rausch-fein);
  background-blend-mode:normal,soft-light;border:2px dashed var(--linie-vorbei)}
:root:not(#_) .tages-box.vorbei .pille.still{background:#1C2645;color:#AEB4C6}
/* Exakt derselbe deckende Grund für Vorbei / Heute / Morgen (vorher schien bei
   Vorbei und Morgen der helle Seitengrund 6 % durch → gräulich) */
:root:not(#_) .tages-box.vorbei,:root:not(#_) .tages-box.kommt{background-color:#060A1A;background-image:var(--rausch-fein);background-blend-mode:soft-light;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* ===== Fortschritt schwarz statt Lava-Verlauf (Nutzer-Feedback: Verlauf zu stark,
   Kontrast zu schwach). Schwarz #1A1405 auf dem Gelb/Orange ≥ 8:1; die Spur ist
   eine helle Rinne, damit man sieht, wie viel noch fehlt. */
:root:not(#_) .box.laeuft .balken,:root:not(#_) .detail-lauf .balken{background:rgba(255,248,225,.55);box-shadow:inset 0 0 0 1px rgba(26,20,5,.14)}
:root:not(#_) .box.laeuft .balken > span,:root:not(#_) .detail-lauf .balken > span{background:#1A1405;box-shadow:none;animation:none}

/* „Demnächst" nur als Umriss in Schriftfarbe, ohne Grund – unterscheidet sich so
   von der gefüllten „vorbei"-Pille (bewusste Ausnahme von „Pillen ohne Rand").
   Der Rand liegt innen (box-shadow) – die Pille bleibt gleich hoch.
   #DCE3F7 auf #0C1633 ≈ 13:1 */
:root:not(#_) .pille.demnaechst{background:transparent;color:#DCE3F7;box-shadow:inset 0 0 0 1.5px currentColor}

/* ===== Kaltes Weiß statt Creme für Überschriften und Zeiten auf dunklem Grund =====
   (Nutzer-Feedback: auf dem helleren Blau von „Als Nächstes" wirkte das warme
   #FFF1CF anders als auf dem dunklen Blau.) Überall im dunklen Thema und auf allen
   dunklen Inseln: #EEF2FF – auf #253B80 ≈ 9,9:1, auf #0C1633 ≈ 16:1.
   „Fällt aus" behält sein rötliches Weiß. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--ink:#EEF2FF} }
:root[data-theme="dark"]{--ink:#EEF2FF}
:root:not(#_) .tages-box.heute,:root:not(#_) .tages-box.kommt,:root:not(#_) .tages-box.vorbei,
:root:not(#_) .box.kommt,:root:not(#_) .box.naechster{--ink:#EEF2FF}
/* Spur des Fortschritts zurückhaltender (Nutzer-Feedback: zu kräftig) – nur ein
   Hauch dunkler als der Grund, der schwarze Teil trägt die Aussage */
:root:not(#_) .box.laeuft .balken,:root:not(#_) .detail-lauf .balken{background:rgba(26,20,5,.12);box-shadow:none}

/* Dauer-Zeile auch bei „Fällt aus" (Nutzer: alle Kästen gleich) – Spur im Rot-Ton */
:root:not(#_) .box.ausfall .balken{background:rgba(229,72,77,.22);box-shadow:none}
:root:not(#_) .box.ausfall .lauf .rest{color:var(--ink-2)}

/* Mehr Luft unter „Calma Ritualsauna" zu den Boxen (Nutzer-Feedback) */
:root:not(#_) .kopf{padding-block-end:44px}
@media (min-width:1000px){ :root:not(#_) .kopf{padding-block-end:56px} }

/* Vergangenes auf den dunklen Tages-Boxen: #A4A9B9 statt #8E93A5 – erfüllt die
   Kontrastregel (≈ 7:1 auf #060A1A; #8E93A5 lag bei 5,5–6,2:1) und ist noch
   dunkler als das frühere #B4B7C2 */
:root:not(#_) .tages-box.heute,:root:not(#_) .tages-box.kommt,:root:not(#_) .tages-box.vorbei,
:root:not(#_) .box.kommt,:root:not(#_) .box.ausfall:not(.vorbei){--ink-3:#A4A9B9}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--ink-3:#A4A9B9} }
:root[data-theme="dark"]{--ink-3:#A4A9B9}

/* ===== Dauer in der Pille statt Balken (Nutzer-Wunsch 01.10.) =====
   „Läuft gerade | noch 6 Min.": linke Hälfte schwarz mit Orange, rechte Hälfte
   umgekehrt Orange mit Schwarz (#1A1405 auf #FF8B00 ≈ 8:1). „Als Nächstes | 10 Min."
   wie gehabt weiß/blau. Beide verschweißt: innen gerade, außen rund. */
:root:not(#_) .pillen-paar > .pille:first-child{border-start-end-radius:0;border-end-end-radius:0}
:root:not(#_) .pillen-paar > .pille:last-child{border-start-start-radius:0;border-end-start-radius:0}
:root:not(#_) .pille.rest-pille{background:#FF8B00;color:#1A1405;font-weight:600;font-variant-numeric:tabular-nums}
.box .lauf{display:none}

/* Vorlader: die Kuppel kleiner (Nutzer-Wunsch) */
#vorlader svg{inline-size:min(34vw,140px)}

/* ===== Alle Pillen in Großbuchstaben (Nutzer-Wunsch) =====
   „LÄUFT GERADE | NOCH 6 MIN.", „ALS NÄCHSTES | 10 MIN.", „DEMNÄCHST", „VORBEI",
   „FÄLLT AUS" – per CSS (Sprache aus lang= → türkisches İ, ß → SS richtig).
   Etwas kleiner und gesperrt, damit Versalien nicht schreien. */
:root:not(#_) .pille{text-transform:uppercase;letter-spacing:.06em;font-size:13px}
/* Handy: die Doppel-Pillen in Versalien brauchen die volle Breite – die kleine
   Kuppel rückt eine Zeile tiefer neben die Uhrzeit (dort ist Platz) */
@media (max-width:599px){
  :root:not(#_) .box-status,:root:not(#_) .box.gross .box-status{padding-inline-end:0}
  :root:not(#_) .box .stueck{inset-block-start:58px}
  :root:not(#_) .box.gross .stueck{inset-block-start:64px}
  :root:not(#_) .pille{letter-spacing:.04em}
}

/* ===== Menü statt Legende in der Kopfleiste (Nutzer-Wunsch) ===== */
.kopf-menue{display:flex;justify-content:center;gap:4px}
.menue-link{display:inline-flex;align-items:center;min-block-size:40px;padding:0 16px;border-radius:99px;
  color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;transition:background-color .15s ease}
@media (hover:hover){ .menue-link:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)} }
@media (max-width:999px){ :root:not(#_) .kopf-legende{padding-block:2px 4px} }

/* Mehr Luft über „2.–4. Oktober · Strandbad Orankesee" zur Kopfleiste */
:root:not(#_) .kopf{padding-block-start:40px}
@media (min-width:1000px){ :root:not(#_) .kopf{padding-block-start:72px} }

/* ===== „Auf einen Blick" als drei Widgets (Apple-artig, große Zahl) =====
   Jede Kachel eigenes Glas; das Band selbst ist nur noch das Raster. */
:root:not(#_) .info-band.widgets{background:none;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
:root:not(#_) .info-band.widgets ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
:root:not(#_) .info-band.widgets .widget{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-inline-size:0;
  padding:14px 14px 16px;border-radius:22px;background-color:var(--glas-fill);
  background-image:linear-gradient(157deg,rgba(var(--glas-ton),.10) 0%,rgba(255,255,255,0) 38%),var(--rausch-fein);background-blend-mode:normal,var(--rausch-mix);
  border:1px solid rgba(var(--glas-ton),.14);box-shadow:inset 0 1px 0 var(--glas-kante),0 10px 30px -16px rgba(8,18,40,.4)}
.widget .w-kopf{display:flex;align-items:center;gap:7px;font-size:13px;line-height:1.25;font-weight:500;color:var(--ink-2)}
.widget .w-kopf .ic{inline-size:18px;block-size:18px;flex:none;color:var(--accent-ink)}
.widget .band-kuppel{inline-size:24px}
.widget .w-zahl{font-size:clamp(28px,8.4vw,58px);line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;margin-block-start:auto;padding-block-start:10px}
.widget .w-unter{font-size:14px;line-height:1.25;color:var(--ink-2)}
@media (min-width:1000px){
  :root:not(#_) .info-band.widgets ul{gap:20px}
  :root:not(#_) .info-band.widgets .widget{padding:20px 24px 22px;border-radius:26px;min-block-size:168px}
  .widget .w-kopf{font-size:15px}
  .widget .w-unter{font-size:16px}
}
@media (max-width:359px){
  :root:not(#_) .info-band.widgets ul{gap:8px}
  :root:not(#_) .info-band.widgets .widget{padding:12px 10px 14px}
  .widget .w-kopf{font-size:12px}
}

/* Pillen bei ≤ 359 px etwas kompakter – die Doppel-Pille „LÄUFT GERADE | NOCH 10 MIN."
   ragte bei 320 px in der Plan-Box über den Rand */
@media (max-width:359px){
  :root:not(#_) .pille,:root:not(#_) .box-status .pille{font-size:12px;letter-spacing:.02em;padding:8px 10px}
  :root:not(#_) .box-status .pille.oben-live{padding:8px 10px 8px 9px}
}
/* Widgets: Kopf, Zahl und Unterzeile liegen in allen drei Kacheln auf gleicher
   Höhe (Subgrid über drei Zeilen). Am Handy steht das Symbol über dem Wort. */
:root:not(#_) .info-band.widgets ul{grid-template-rows:auto 1fr auto;row-gap:0}
:root:not(#_) .info-band.widgets .widget{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:6px;align-items:start}
.widget .w-zahl{align-self:end;margin:0}
@media (max-width:599px){
  .widget .w-kopf{flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px}
  .widget .w-unter{font-size:13px}
}

/* ===== Intensität in den Boxen: linksbündig „Intensität" + größere Flammen (Nutzer-Wunsch) =====
   Das Stufenwort (sanft/mittel/kräftig) steht nur noch für Screenreader da. */
:root:not(#_) .intens.etikett{margin-inline-start:0;gap:2px;font-size:14px;font-weight:500;color:var(--ink-2)}
:root:not(#_) .intens.etikett > .i-wort{margin:0 8px 0 0}
[dir="rtl"] :root:not(#_) .intens.etikett > .i-wort,:root:not(#_) [dir="rtl"] .intens.etikett > .i-wort{margin:0 0 0 8px}
:root:not(#_) .intens.etikett .int-flamme{inline-size:24px;block-size:24px}
.fuss > .intens.etikett + *{margin-inline-start:auto}
:root:not(#_) .intens.etikett{font-size:15px}
:root:not(#_) .box.laeuft .intens.etikett{color:#1A1405}
:root:not(#_) .box.vorbei .intens.etikett{color:var(--ink-3)}
/* Widgets, zweite Fassung: größere Symbole; die Zeit „13:30–21:30" als große Zeile
   (am Handy darf sie nach dem Strich umbrechen) */
.widget .w-kopf .ic{inline-size:26px;block-size:26px}
.widget .band-kuppel{inline-size:38px}
.widget .w-kopf{font-size:15px;color:var(--ink)}
.widget .w-zahl .w-zeit{font-size:.62em;letter-spacing:-.01em;line-height:1.05;display:inline-block}
@media (min-width:1000px){
  .widget .w-kopf .ic{inline-size:32px;block-size:32px}
  .widget .band-kuppel{inline-size:46px}
  .widget .w-kopf{font-size:17px;gap:10px}
}
@media (max-width:599px){
  .widget .w-kopf{font-size:13px}
  .widget .w-zahl .w-zeit{font-size:.7em}
}

/* ===== Flammen überall gleich (Nutzer-Feedback): EIN Feuer-Verlauf Glutrot → Orange →
   Gelb, ohne dunkle Umrandung – auf Gelb wie auf Blau. Leere Flammen je Grund. ===== */
:root:not(#_) .int-flamme.voll{fill:url(#feuerVerlauf);stroke:none}
:root:not(#_) .box.laeuft .int-flamme:not(.voll){fill:rgba(26,20,5,.16)}
:root:not(#_) .box.vorbei .int-flamme.voll{fill:var(--ink-3);stroke:none}

/* ===== Runde 01.10. ~03:10 (Nutzer-Wünsche) – NICHT zurückdrehen ===== */

/* Widgets, dritte Fassung: oben nur das Symbol (nichts daneben), darunter zwei GLEICH
   große Zeilen („Jede Stunde / ein Aufguss"). Symbole dünn wie die Kuppel: 1,2 px
   Strich in jeder Größe (non-scaling-stroke). Zeilen liegen per Subgrid auf einer Höhe. */
:root:not(#_) .info-band.widgets ul{grid-template-rows:auto 1fr auto;row-gap:0}
:root:not(#_) .info-band.widgets .widget{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-items:start}
.widget .w-symbol{display:flex;align-items:center;block-size:40px;color:var(--accent-ink)}
.widget .w-symbol .ic{inline-size:34px;block-size:34px}
.widget .w-symbol .ic *{vector-effect:non-scaling-stroke;stroke-width:1.2px}
.widget .w-symbol .band-kuppel{inline-size:52px}
.widget .w-oben,.widget .w-unten{font-size:clamp(15px,calc(1.6vw + 9px),26px);line-height:1.18;font-weight:600;letter-spacing:-.01em;text-wrap:balance;min-inline-size:0}
.widget .w-oben{align-self:end;padding-block-start:22px;color:var(--ink)}
.widget .w-unten{color:var(--ink-2)}
.widget .w-zeit{white-space:normal;font-variant-numeric:tabular-nums}
.widget .w-zeit .bis-strich{margin-inline:.18em}
@media (min-width:1000px){
  .widget .w-symbol{block-size:48px}
  .widget .w-symbol .ic{inline-size:42px;block-size:42px}
  .widget .w-symbol .band-kuppel{inline-size:62px}
  .widget .w-oben{padding-block-start:30px}
}
@media (max-width:599px){
  .widget .w-symbol{block-size:32px}
  .widget .w-symbol .ic{inline-size:28px;block-size:28px}
  .widget .w-symbol .band-kuppel{inline-size:42px}
  .widget .w-oben{padding-block-start:16px}
}

/* Menüpunkt „Aufgussplan" in der Kopfleiste größer (war 15 px) – 44 px Zielfläche */
:root:not(#_) .menue-link{font-size:18px;min-block-size:44px;padding-inline:18px}
@media (max-width:599px){ :root:not(#_) .menue-link{font-size:17px} }

/* „Läuft gerade": der Punkt pulsiert – die EINZIGE Dauer-Animation. Nur transform +
   opacity auf eigener Ebene (kein Neu-Malen); die Ruckler kamen von großen
   Weichzeichnern, nicht von diesem Punkt. Ruhige Bewegung: steht still. */
:root:not(#_) .pille.live .punkt{box-shadow:0 0 6px rgba(255,139,0,.55)}
:root:not(#_) .pille.live .punkt::after{display:block;animation:puls 1.8s cubic-bezier(.2,.6,.35,1) infinite !important;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){ :root:not(#_) .pille.live .punkt::after{animation:none !important;display:none} }

/* Alle Zustände als Paar „ZUSTAND | 15 MIN." (kern.js statusPillen) */
:root:not(#_) .box-status .pillen-paar > .pille.dauer.still{padding-inline:12px 14px}
:root:not(#_) .pillen-paar.p-aus > .pille.dauer{box-shadow:inset 1px 0 0 rgba(255,154,148,.38)}
:root:not(#_) [dir="rtl"] .pillen-paar.p-aus > .pille.dauer{box-shadow:inset -1px 0 0 rgba(255,154,148,.38)}
/* „Demnächst | 10 Min.": EIN Umriss um beide Hälften, dazwischen ein Strich */
:root:not(#_) .pillen-paar.p-kommt{border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--pk,#DCE3F7);color:var(--pk,#DCE3F7)}
:root:not(#_) .pillen-paar.p-kommt > .pille{background:transparent;box-shadow:none;color:inherit}
:root:not(#_) .pillen-paar.p-kommt > .pille.dauer{box-shadow:inset 1.5px 0 0 var(--pk,#DCE3F7)}
:root:not(#_) [dir="rtl"] .pillen-paar.p-kommt > .pille.dauer{box-shadow:inset -1.5px 0 0 var(--pk,#DCE3F7)}
/* im Detail-Blatt: Farben aus dem Grund des Blatts (hell wie dunkel lesbar) */
:root:not(#_) #blatt .pillen-paar.p-kommt{--pk:var(--ink)}
:root:not(#_) #blatt .pillen-paar.p-aus > .pille{color:var(--warnung)}

/* Intensität: mehr Luft zu den Zutaten; auf der orangen Läuft-Box ein ganz leichter
   Schatten unter den Flammen (kein Rand) */
:root:not(#_) .box > .zutaten ~ .fuss{padding-block-start:22px}
:root:not(#_) .box.laeuft .int-flamme.voll{filter:drop-shadow(0 1px 1.5px rgba(90,32,0,.42))}

/* QR-Blatt: was der Code ist, steht OBEN groß */
.qr-lead{margin:0 0 18px;font-size:18px;line-height:1.45;color:var(--ink);text-wrap:pretty}

/* Calma-Abschnitt ohne Kuppel-Uhr: links Foto + about-blank-Karte (ein Link) */
.calma-bild{display:grid;gap:16px;align-content:start;min-inline-size:0}
.ab-karte{display:grid;gap:6px;padding:20px 22px 20px;border-radius:24px;text-decoration:none;color:var(--ink);
  background-color:var(--glas-fill);background-image:linear-gradient(157deg,rgba(var(--glas-ton),.10) 0%,rgba(255,255,255,0) 38%),var(--rausch-fein);
  background-blend-mode:normal,var(--rausch-mix);border:1px solid rgba(var(--glas-ton),.14);transition:background-color .15s ease}
.ab-kicker{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ab-titel{font-size:clamp(20px,2.2vw + 10px,26px);line-height:1.2;font-weight:600;text-wrap:balance}
.ab-text{font-size:16px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.ab-link{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-block-start:6px;font-size:16px;font-weight:600;color:var(--accent-ink)}
.ab-link .ic{inline-size:16px;block-size:16px}
@media (hover:hover){ .ab-karte:hover{background-color:color-mix(in srgb,var(--glas-fill) 70%,var(--ink) 8%)} .ab-karte:hover .ab-link{text-decoration:underline;text-underline-offset:3px} }
.ab-karte:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}

/* Detail-Blatt des LAUFENDEN Aufgusses: GELB wie die Läuft-Box, kein oranger Rand
   (Nutzer: „muss gelb werden … wie der gerade läuft"). Farben per Tokens auf dem
   Blatt – Schrift, Linien, Knöpfe folgen dem gelben Grund. */
:root:not(#_) #blatt .platte.ist-laeuft{outline:0;
  background:var(--rausch-fein),linear-gradient(170deg,#FFE36B 0%,var(--amber) 48%,var(--orange) 100%);background-blend-mode:multiply,normal;
  --ink:#1A1405;--ink-2:rgba(26,20,5,.8);--ink-3:rgba(26,20,5,.66);--line:rgba(26,20,5,.16);--line-2:rgba(26,20,5,.3);
  --surface-2:rgba(255,255,255,.4);--dome:#1A1405;--accent-ink:#5A2A00;--warnung:#8C1D18;
  --akt-grund:rgba(255,255,255,.42);--akt-hover:rgba(255,255,255,.6);--akt-an:rgba(26,20,5,.14);--akt-an-hover:rgba(26,20,5,.2);--akt-herz:#9E1040;
  color:var(--ink)}
:root:not(#_) #blatt .platte.ist-laeuft .int-flamme.voll{filter:drop-shadow(0 1px 1.5px rgba(90,32,0,.42))}
:root:not(#_) #blatt .platte.ist-laeuft .int-flamme:not(.voll){fill:rgba(26,20,5,.16)}
:root:not(#_) #blatt .platte.ist-laeuft :focus-visible{outline-color:#1A1405}

/* Vorlader im Blatt (kern.js blattLader): Kuppel baut sich auf, weich ein und aus;
   der Inhalt blendet danach weich ein */
#blatt .platte-inhalt.wartet{opacity:0}
#blatt .platte-inhalt.blendet-ein{animation:inhaltEin .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes inhaltEin{from{opacity:0;transform:translateY(8px)}}
.blatt-lader{position:absolute;inset-inline:0;inset-block-end:0;display:grid;place-content:center;padding-block-end:8vh;
  pointer-events:none;opacity:0;transition:opacity .4s ease}
.blatt-lader.da{opacity:1}
.blatt-lader svg{inline-size:min(30vw,112px);block-size:auto;overflow:visible}
.blatt-lader polygon{fill:transparent;stroke:var(--dome);stroke-width:1.2;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;
  animation:facetteZeichnen .45s cubic-bezier(.3,.7,.3,1) forwards,facetteGlut 1.1s ease-in-out forwards;animation-delay:var(--t),calc(var(--t) + .3s)}
@media (prefers-reduced-motion:reduce){
  .blatt-lader{transition:none}
  .blatt-lader polygon{animation:none;stroke-dashoffset:0}
}

/* „Calma Ritualsauna" so dünn wie „Aufgussplan" (450) – oben im Kopf und als
   Abschnittstitel unten */
:root:not(#_) .kopf h1,:root:not(#_) .calma > .abschnitt-titel{font-weight:450}

/* Intensität unter der Überschrift, neben „mit …" – mit Abstand (Nutzer-Wunsch);
   unten stehen nur noch die Zutaten */
.wer-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin-block-start:2px}
.wer-zeile > .wer{margin:0}
:root:not(#_) .wer-zeile > .intens.etikett{margin-inline-start:0}
/* leerer Fuß (keine Sterne/Knöpfe) nimmt keinen Platz mehr ein */
:root:not(#_) .box > .fuss:empty{display:none}
/* Vorbei: die schon gelaufenen Facetten der kleinen Kuppel einen Tick heller (waren kaum zu sehen) */
:root:not(#_) .box.vorbei .stueck{opacity:.72}
:root:not(#_) .box.vorbei .stueck .f.vorbei{fill:color-mix(in srgb,var(--ink-3) 82%,transparent)}
/* Widgets am Handy: kompakter, damit „Jede Stunde / ein Aufguss" nicht in vier
   Zeilen zerfällt (390 px: 14 px Schrift, 10 px Innenrand, Zeit ohne Luft am Strich) */
@media (max-width:599px){
  :root:not(#_) .info-band.widgets ul{gap:8px}
  :root:not(#_) .info-band.widgets .widget{padding:14px 10px 14px 12px;border-radius:20px}
  .widget .w-oben,.widget .w-unten{font-size:14px;line-height:1.22;letter-spacing:-.005em}
  .widget .w-zeit .bis-strich{margin-inline:.06em}
}
@media (max-width:359px){
  .widget .w-oben,.widget .w-unten{font-size:13px}
}
/* „Fällt aus | 15 Min.": wo ein Trennstrich ist, braucht es auch einen Rand – EIN Rand
   um beide Hälften (outline liegt über den Hälften), gleiche Farbe wie der Strich */
:root:not(#_) .pillen-paar.p-aus{border-radius:99px;outline:1px solid rgba(255,154,148,.5);outline-offset:-1px}
:root:not(#_) .pillen-paar.p-aus > .pille.dauer{box-shadow:inset 1px 0 0 rgba(255,154,148,.5)}
:root:not(#_) [dir="rtl"] .pillen-paar.p-aus > .pille.dauer{box-shadow:inset -1px 0 0 rgba(255,154,148,.5)}
:root:not(#_) #blatt .pillen-paar.p-aus{outline-color:color-mix(in srgb,var(--warnung) 55%,transparent)}
:root:not(#_) #blatt .pillen-paar.p-aus > .pille.dauer{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--warnung) 55%,transparent)}

/* ===== Kopfleiste (Nutzer 01.10. ~03:40): rechtsbündig QR · Aufgussplan · Sprache ·
   Teilen – alle als gleiche Tonal-Knöpfe, Teilen nur mit Symbol. „Aufgussplan" als
   Knopf wie die Sprache, Schrift etwas größer. Am Handy steht er in Zeile 2 rechts. ===== */
.leiste-in:has(> .kopf-legende:empty) > .marke{margin-inline-end:auto}
:root:not(#_) .leiste .icon-knopf{background:var(--tonal)}
@media (hover:hover){ :root:not(#_) .leiste .icon-knopf:hover{background:var(--tonal-hover)} }
:root:not(#_) .leiste .kopf-menue{display:flex;flex:none}
:root:not(#_) .leiste .menue-link{gap:8px;min-block-size:48px;padding-inline:14px 20px;border-radius:24px;background:var(--tonal);
  color:var(--ink);font-size:18px;font-weight:500;white-space:nowrap}
:root:not(#_) .leiste .menue-link .ic{inline-size:21px;block-size:21px}
@media (hover:hover){ :root:not(#_) .leiste .menue-link:hover{background:var(--tonal-hover)} }
:root:not(#_) .leiste .sprach-knopf{font-size:16px}
@media (min-width:1000px){ :root:not(#_) .leiste-in{column-gap:8px} }
@media (max-width:999px){
  :root:not(#_) .leiste .kopf-menue{order:3;flex:1 0 100%;justify-content:flex-end;padding-block:4px 8px}
  :root:not(#_) .leiste .menue-link{min-block-size:40px;font-size:17px;padding-inline:12px 16px}
  :root:not(#_) .leiste .menue-link .ic{inline-size:19px;block-size:19px}
}

/* Sprung über „Aufgussplan": mehr Luft über der Überschrift (zusätzlich zur Leistenhöhe) */
#plan-h{scroll-margin-block-start:64px}
@media (max-width:999px){ #plan-h{scroll-margin-block-start:28px} }

/* about-blank-Karte: das „://"-Zeichen links, Text rechts */
:root:not(#_) .ab-karte{grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start}
:root:not(#_) .ab-karte > :not(.ab-logo){grid-column:2}
.ab-logo{grid-column:1;grid-row:1 / span 4;display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:16px;
  background:#FFFFFF;color:#000000;margin-block-start:2px}
.ab-logo svg{inline-size:30px;block-size:auto;fill:currentColor;display:block}
@media (max-width:599px){ .ab-logo{inline-size:48px;block-size:48px;border-radius:14px} .ab-logo svg{inline-size:26px} }

/* ===== Titel ↔ Uhrzeit getauscht (Nutzer 01.10.): der Name ist die Überschrift und
   größer als die Zeit – in allen Boxen (Plan, Team-Plan, oben groß) ===== */
:root:not(#_) .box:not(.gross) .name{font-size:24px;line-height:1.2}
:root:not(#_) .box:not(.gross) .zeit{font-size:21px}
@media (min-width:1000px){
  :root:not(#_) .raster .box:not(.gross) .name{font-size:22px}
  :root:not(#_) .raster .box:not(.gross) .zeit{font-size:19px}
}
:root:not(#_) .box.gross .zeit{font-size:24px}
:root:not(#_) .jetzt-spalte.naechster .box .name{font-size:26px}
@media (min-width:1000px){
  :root:not(#_) .box.gross .zeit{font-size:26px}
  :root:not(#_) .jetzt-spalte.naechster .box .name{font-size:30px}
}

/* „mit Julia" und „Intensität": gleiche Schrift, gleiche Farbe, eine Grundlinie
   (die Zeile trägt die Schrift, beide erben sie) – in Box und Blatt */
.wer-zeile{align-items:baseline;font-size:16px;line-height:1.4;font-weight:400;color:var(--ink-2)}
:root:not(#_) .wer-zeile > .wer,:root:not(#_) .wer-zeile > .intens.etikett,
:root:not(#_) .wer-zeile > .intens.etikett > .i-wort{font:inherit;color:inherit;margin-block:0}
:root:not(#_) .wer-zeile > .wer{margin:0}
:root:not(#_) .box.laeuft .wer-zeile{color:var(--on-fire);font-weight:500}
:root:not(#_) .box.vorbei .wer-zeile{color:var(--ink-3)}
:root:not(#_) .box.gross .wer-zeile,:root:not(#_) .detail-wer-zeile{font-size:17px}

/* ===== Detail-Blatt in der Farbe der angetippten Box (Nutzer 01.10.) – auch im hellen
   Thema dunkel, wie die Boxen: als Nächstes blau, demnächst nachtblau, vorbei der
   Tages-Grund ohne Strichelrand, fällt aus rötlich (läuft = gelb, siehe oben) ===== */
:root:not(#_) #blatt .platte.detail:is(.ist-naechster,.ist-kommt,.ist-vorbei,.ist-ausfall){color-scheme:dark;
  --ink:#EEF2FF; --ink-2:#E0E3EC; --ink-3:#A4A9B9; --ink-stoff-2:#D5D9E8;
  --line:rgba(238,242,255,.12); --line-2:rgba(238,242,255,.30); --line-stoff:rgba(238,242,255,.20);
  --surface:#15213F; --surface-2:#0C1630; --surface-3:#1E2C52;
  --dome:#8EA4E8; --dome-past:#4A5DB0; --tonal:rgba(255,255,255,.10); --tonal-hover:rgba(255,255,255,.16);
  --accent-ink:#FFC94D; --warnung:#FFB4AB; --focus:#FFD435; --glas-ton:255,255,255; --rausch-mix:soft-light;
  --stern:#FFBF00; --stern-leer:rgba(238,242,255,.45);
  /* leere Flammen/Sterne in BEIDEN Themen hell (sonst im hellen Thema ≈ 1:1):
     ≥ 3,1:1 auf #253B80, ≥ 3,9:1 auf #111C48/#0C1633/#060A1A/#2B1419 */
  --flamme-leer:rgba(238,242,255,.45);
  --akt-grund:rgba(255,255,255,.10); --akt-hover:rgba(255,255,255,.16); --akt-an:#4A2346; --akt-an-hover:#572A52; --akt-herz:#FF8FB1;
  color:var(--ink)}
:root:not(#_) #blatt .platte.detail.ist-naechster{background:var(--rausch-fein),linear-gradient(170deg,#253B80 0%,#18275E 55%,#111C48 100%);background-blend-mode:soft-light,normal}
:root:not(#_) #blatt .platte.detail.ist-kommt{background:var(--rausch-fein),linear-gradient(#0C1633,#0C1633);background-blend-mode:soft-light,normal}
:root:not(#_) #blatt .platte.detail.ist-vorbei{background:var(--rausch-fein),linear-gradient(#060A1A,#060A1A);background-blend-mode:soft-light,normal}
:root:not(#_) #blatt .platte.detail.ist-ausfall{--ink:#FFE4E1; --ink-2:#F2BDB8; --ink-3:#C99A96; --warnung:#FF9A94;
  background:linear-gradient(170deg,rgba(255,120,120,.07) 0%,rgba(255,255,255,0) 40%),var(--rausch-fein),linear-gradient(#2B1419,#2B1419);
  background-blend-mode:normal,soft-light,normal}
/* Pillen im Blatt genau wie in der Box (kein eigener Kontrast-Ausgleich mehr) */
:root:not(#_) #blatt .platte.detail .pillen-paar > .pille.wort{background:#FFFFFF}
:root:not(#_) #blatt .platte.detail .pille.still{background:#1C2645;color:#AEB4C6;box-shadow:inset 0 0 0 1px rgba(174,180,198,.14)}
/* Sprung „Aufgussplan": etwas weniger Luft – vorher lugten oben noch die Ränder der Widgets hervor */
#plan-h{scroll-margin-block-start:40px}
@media (max-width:999px){ #plan-h{scroll-margin-block-start:20px} }
/* Widget-Symbole einen Hauch kräftiger (Nutzer: „ganz kleines Stückchen dicker") */
.widget .w-symbol .ic *{stroke-width:1.45px}
/* „Gemerkt" wird HELL statt dunkel (Nutzer-Wunsch): weißer Knopf, dunkle Schrift,
   rotes Herz – im gelben Läuft-Blatt wie in den dunklen Zustands-Blättern */
:root:not(#_) #blatt .platte.detail{--akt-an:#FFFFFF;--akt-an-hover:#F3F5FF;--akt-herz:#C2185B}
:root:not(#_) #blatt .platte.detail .aktion[aria-pressed="true"]{color:#16203F}
/* … doch ROT (Nutzer: „eher sogar rot, wie beim Demnächst"): dunkle Blätter weinrot mit
   rosa Herz wie vorher im Demnächst-Blatt; im gelben Läuft-Blatt kräftiges Rot, weiß */
:root:not(#_) #blatt .platte.detail{--akt-an:#4A2346;--akt-an-hover:#572A52;--akt-herz:#FF8FB1}
:root:not(#_) #blatt .platte.detail .aktion[aria-pressed="true"]{color:#FFE4EC}
:root:not(#_) #blatt .platte.detail.ist-laeuft{--akt-an:#C2185B;--akt-an-hover:#AD1452;--akt-herz:#FFFFFF}
:root:not(#_) #blatt .platte.detail.ist-laeuft .aktion[aria-pressed="true"]{color:#FFFFFF}
/* Kleine Kästen: Uhrzeit etwas kleiner, Name einen Tick größer (Nutzer 01.10.) */
:root:not(#_) .box:not(.gross) .name{font-size:25px}
:root:not(#_) .box:not(.gross) .zeit{font-size:19px}
@media (min-width:1000px){
  :root:not(#_) .raster .box:not(.gross) .name{font-size:23px}
  :root:not(#_) .raster .box:not(.gross) .zeit{font-size:17px}
}
/* Box luftiger (Nutzer 01.10.: „zu eng"): Namenszeile und Flammen kleiner, mehr Abstand
   Pillen → Uhrzeit → Titel → „mit … · Intensität" */
:root:not(#_) .box-status{margin-block-end:18px}
:root:not(#_) .box .name{margin-block-start:8px}
:root:not(#_) .box .wer-zeile{margin-block-start:9px;font-size:15px;column-gap:18px}
:root:not(#_) .box.gross .wer-zeile{font-size:16px}
:root:not(#_) .box .wer-zeile .intens.etikett .int-flamme{inline-size:20px;block-size:20px}
:root:not(#_) .detail-wer-zeile .intens.etikett .int-flamme{inline-size:22px;block-size:22px}

/* ===== Handy-Kopfleiste öffentlich (Nutzer 01.10.): EINE Zeile – links nur die Kuppel
   (größer, ohne „Calma Ritualsauna"), rechts nur Symbole: QR · Aufgussplan · Sprache ·
   Teilen. Die Wörter bleiben für Bildschirmleser da. Team-Kopf unverändert (zeigt, wer
   angemeldet ist). ===== */
@media (max-width:999px){
  :root:not(#_) .leiste-in:has(> .kopf-menue) > .marke{flex:0 0 auto;margin-inline-end:auto;gap:0}
  :root:not(#_) .leiste-in:has(> .kopf-menue) > .marke > span:last-child,
  :root:not(#_) .leiste .kopf-menue .menue-link > span{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  :root:not(#_) .leiste-in:has(> .kopf-menue) .marke-kuppel{inline-size:48px}
  :root:not(#_) .leiste .kopf-menue{order:0;flex:none;padding:0}
  :root:not(#_) .leiste .kopf-menue .menue-link{min-inline-size:40px;min-block-size:40px;padding:0;justify-content:center;border-radius:20px;gap:0}
  :root:not(#_) .leiste .kopf-menue .menue-link .ic{inline-size:20px;block-size:20px}
}

/* ===== Handy-Feinschliff (Nutzer 01.10.) ===== */
/* Widgets am Handy: Symbol und Text mittig, die Zeit „13:30–21:30" in EINER Zeile */
@media (max-width:599px){
  :root:not(#_) .info-band.widgets .widget{justify-items:center;text-align:center;padding-inline:8px}
  .widget .w-symbol{justify-content:center}
  .widget .w-zeit{white-space:nowrap;letter-spacing:-.01em}
}
@media (max-width:359px){ .widget .w-zeit{font-size:12px;letter-spacing:-.02em} }
/* Tag-Reiter am Handy: kein Unterstrich mehr – der gewählte Tag ist hell und kräftiger */
:root:not(#_) .reiter[aria-selected="true"]::before{display:none}
:root:not(#_) .reiter[aria-selected="true"]:not(.heute) .reiter-rel{font-weight:600}
/* „Aufgussplan" überall mittig */
:root:not(#_) .plan > .abschnitt-titel{text-align:center}
/* Kleine Kuppel wieder oben in der Ecke (auch am Handy); die Pillen-Zeile hält ihr Platz frei */
@media (max-width:599px){
  :root:not(#_) .box .stueck{inset-block-start:14px}
  :root:not(#_) .box.gross .stueck{inset-block-start:16px}
  :root:not(#_) .box-status{padding-inline-end:58px}
  :root:not(#_) .box.gross .box-status{padding-inline-end:66px}
}
/* „mit …" und Intensität: rutscht die Intensität in Zeile 2, etwas Luft dazwischen */
:root:not(#_) .wer-zeile{row-gap:6px}

/* ===== Handy-Feinschliff (Nutzer 01.10.) ===== */
/* Widgets am Handy: Symbol und Text mittig, die Zeit „13:30–21:30" in EINER Zeile */
@media (max-width:599px){
  :root:not(#_) .info-band.widgets .widget{justify-items:center;text-align:center;padding-inline:8px}
  .widget .w-symbol{justify-content:center}
  .widget .w-zeit{white-space:nowrap;letter-spacing:-.01em}
}
@media (max-width:359px){ .widget .w-zeit{font-size:12px;letter-spacing:-.02em} }
/* Tag-Reiter am Handy: kein Unterstrich mehr – der gewählte Tag ist hell und kräftiger */
:root:not(#_) .reiter[aria-selected="true"]::before{display:none}
:root:not(#_) .reiter[aria-selected="true"]:not(.heute) .reiter-rel{font-weight:600}
/* „Aufgussplan" überall mittig */
:root:not(#_) .plan > .abschnitt-titel{text-align:center}
/* Kleine Kuppel wieder oben in der Ecke (auch am Handy); die Pillen-Zeile hält ihr Platz frei */
@media (max-width:599px){
  :root:not(#_) .box .stueck{inset-block-start:14px}
  :root:not(#_) .box.gross .stueck{inset-block-start:16px}
  :root:not(#_) .box-status{padding-inline-end:58px}
  :root:not(#_) .box.gross .box-status{padding-inline-end:66px}
}
/* „mit …" und Intensität: rutscht die Intensität in Zeile 2, etwas Luft dazwischen */
:root:not(#_) .wer-zeile{row-gap:6px}

/* Kopfleiste: oben und unten gleich viel Luft (Kuppel und Knöpfe mittig), die Kuppel
   heller – im Ton der Knopf-Symbole (Nutzer 01.10.), am Handy wie am Rechner */
/* Kuppel im Kopf in der Kuppelfarbe der Seite (--dome: dunkel #8EA4E8, hell #20398A) –
   Nutzer: „lass uns die Farbe nehmen, die wir verwenden" */
:root:not(#_) .leiste .marke .f{stroke:var(--dome);stroke-width:1.1px}
@media (max-width:999px){
  :root:not(#_) .leiste-in{padding-block:10px;align-items:center}
  :root:not(#_) .leiste .marke{min-block-size:44px}
}
/* Kuppel oben in der Ecke erst ab 360 px – darunter braucht die Doppel-Pille „Läuft
   gerade | 15 Min." die ganze Breite, die Kuppel rückt dort eine Zeile tiefer */
@media (max-width:359px){
  :root:not(#_) .box .stueck{inset-block-start:58px}
  :root:not(#_) .box.gross .stueck{inset-block-start:64px}
  :root:not(#_) .box-status,:root:not(#_) .box.gross .box-status{padding-inline-end:0}
}

/* ===== Detail-Blatt (Nutzer 01.10.): Status + Teilen/Merken/Kalender stehen fest unter
   dem Kopf (oeffentlich.js detailOben), nur der Inhalt darunter scrollt. Am Handy fährt
   das Blatt fast bis ganz oben und ist immer gleich hoch – egal wie viel Text. ===== */
#blatt .detail-oben{flex:none;display:flex;flex-direction:column;gap:16px;padding:2px 20px 14px}
#blatt .detail-oben .aktionen{margin-block-start:0}
#blatt .platte.detail .platte-inhalt{flex:1 1 auto;min-block-size:0;padding-block-start:6px}
@media (max-width:999px){
  :root:not(#_) #blatt .platte.detail{block-size:calc(100vh - 28px);block-size:calc(100dvh - 28px);max-block-size:none}
}
/* Team-Anmeldung: „Wer bist du?" so groß und so dünn wie „Aufgussplan" (Nutzer 01.10.) */
:root:not(#_) .anmelden-kopf h1{font-size:40px;line-height:1.05;font-weight:450;letter-spacing:-.01em}
@media (min-width:1000px){ :root:not(#_) .anmelden-kopf h1{font-size:60px;letter-spacing:-.02em} }
:root:not(#_) .anmelden-text{text-wrap:balance}
/* Team-Code: größere, gelbe Punkte beim Eintippen (Nutzer 01.10.); das Feld behält seine
   Höhe. Hell ein dunkleres Gold, damit die Punkte auf Weiß lesbar bleiben (≥ 3:1). */
:root:not(#_) #code{block-size:52px;caret-color:var(--accent-ink)}
:root:not(#_) #code:not(:placeholder-shown){font-size:26px;line-height:1;letter-spacing:.14em;color:#B07A00;padding-block:0}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not(#_) #code:not(:placeholder-shown){color:#FFD435} }
:root[data-theme="dark"]:not(#_) #code:not(:placeholder-shown){color:#FFD435}
/* Handy: auch die Team-Anmeldung zeigt links nur die Kuppel (wie öffentlich) – alle Köpfe
   OHNE Team-Reiter; der angemeldete Team-Kopf (mit Reitern) behält „Team · Name" */
@media (max-width:999px){
  :root:not(#_) .leiste-in:has(> .kopf-legende:empty) > .marke{flex:0 0 auto;margin-inline-end:auto;gap:0}
  :root:not(#_) .leiste-in:has(> .kopf-legende:empty) > .marke > span:last-child{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  :root:not(#_) .leiste-in:has(> .kopf-legende:empty) .marke-kuppel{inline-size:48px}
}

/* Tageswörter in den Reitern ≤ 359 px kleiner (Design-Prüfung: ru/fi überlappten bei
   320 px). Was dann noch nicht passt, macht kern.js reiterEinpassen kleiner (bis 14 px),
   erst danach bricht ein Wort um – öffentlich und im Team */
:root:not(#_) .reiter-rel{overflow-wrap:anywhere;text-align:center}
@media (max-width:359px){
  :root:not(#_) .reiter{padding-inline:2px}
  :root:not(#_) .reiter-rel{font-size:19px}
  :root:not(#_) .reiter.heute .reiter-rel{font-size:24px}
}
/* oben groß, Aufguss nicht heute: „Morgen · 13:30 – 13:40" – der Tag etwas leiser */
.zeit-tag{font-weight:500;color:var(--ink-2);white-space:nowrap}
.zeit-tag{margin-inline-end:.35em}
/* about-blank-Karte: Datum als eigene, ungebrochene Zeile */
.ab-datum{display:block;margin-block-start:2px;font-weight:600;color:var(--ink);white-space:nowrap}

/* Calma-Abschnitt ruhiger (Nutzer 01.10.: „zu viele Farben"): die Anfahrt-Karte
   im selben Glas wie die about-blank-Karte, ohne Rand; „Adresse kopieren" ohne Rand,
   als helle Glas-Fläche */
:root:not(#_) .ort-karte{background-color:var(--glas-fill);
  background-image:linear-gradient(157deg,rgba(var(--glas-ton),.10) 0%,rgba(255,255,255,0) 38%),var(--rausch-fein);
  background-blend-mode:normal,var(--rausch-mix);border:0;box-shadow:none;border-radius:24px;padding:20px 22px}
:root:not(#_) .ab-karte{border:0}
:root:not(#_) .calma .knopf.tonal{box-shadow:none;background:rgba(var(--glas-ton),.12)}
@media (hover:hover){ :root:not(#_) .calma .knopf.tonal:hover{background:rgba(var(--glas-ton),.2)} }
/* Kleine Boxen: Uhrzeit leicht bläulich wie die Unterzeilen der Widgets (#C3C8DC –
   auf #0C1633 ≈ 11:1, auf dem Blau von „Als Nächstes" ≈ 7:1); der Name bleibt weiß */
:root:not(#_) .box:not(.gross):is(.kommt,.naechster) .zeit,
:root:not(#_) .box:not(.gross):is(.kommt,.naechster) .zeit :is(time,.bis,.bis-strich){color:#C3C8DC}
/* Tageskopf ohne Kuppel (Nutzer 01.10.): jede Box trägt schon ihre kleine Kuppel –
   „Freitag / 2. Oktober" steht allein */
:root:not(#_) .tages-kopf > .kuppel-svg{display:none}
:root:not(#_) .tag-spalte .tages-kopf{padding-inline:8px}

/* Gemerkt (Nutzer 01.10.): Kopf-Knopf nur mit Herz – keine Zahl –, rund wie die anderen
   Kopf-Knöpfe, Herz gefüllt in der Farbe der Markierung (hell #B3124E, dunkel #FF8FB1).
   Die Marke in der Box ebenfalls ein Kreis (32 × 32) statt einer ovalen Pille. */
:root:not(#_) .leiste .merk-anker > .merk-knopf{display:inline-grid;place-items:center;padding:0;gap:0;
  min-inline-size:48px;min-block-size:48px;border-radius:50%}
:root:not(#_) .leiste .merk-anker > .merk-knopf .merk-zahl{display:none}
:root:not(#_) .leiste .merk-anker > .merk-knopf .herz{inline-size:20px;block-size:20px;fill:var(--merk-herz,#FF8FB1);stroke:var(--merk-herz,#FF8FB1)}
@media (max-width:999px){ :root:not(#_) .leiste .merk-anker > .merk-knopf{min-inline-size:40px;min-block-size:40px} }
:root:not(#_) .box-status .herz-marke{inline-size:32px;block-size:32px;min-block-size:0;padding:0;border-radius:50%}

/* Spalten-Ränder ruhiger (Nutzer 01.10.: „zu intensiv … so wie bei den Widgets"):
   Vorbei- und Morgen-Kasten 1 px wie die Widgets (weiß 14 %, gestrichelt 20 %, damit die
   Striche noch lesen), vergangene Boxen innen kühl statt cremefarben. Heute behält den
   Verlaufsrand (Kennzeichen des Tages). */
:root:not(#_) .tages-box.kommt{border:1px solid rgba(255,255,255,.14)}
:root:not(#_) .tages-box.vorbei{border:1px dashed rgba(255,255,255,.2)}
:root:not(#_) .tages-box .box.vorbei{border:1px dashed rgba(255,255,255,.16)}
:root:not(#_) .tages-box .box.kommt{border-color:rgba(255,255,255,.12)}

/* Tages-Kästen wie die Widgets, nur leiser (Nutzer 01.10.): schräger Lichtverlauf oben
   links + Körnung. Grund einen Hauch heller (#080E22 statt #060A1A), sonst verschluckt
   der fast schwarze Grund die Körnung. Heute behält den Verlaufsrand (border-box). */
:root:not(#_) .tages-box.kommt,:root:not(#_) .tages-box.vorbei{background-color:#080E22;
  background-image:linear-gradient(157deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,0) 42%),var(--rausch-fein);
  background-blend-mode:normal,soft-light}
:root:not(#_) .tages-box.heute{
  background:linear-gradient(157deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,0) 42%) padding-box,
    var(--rausch-fein) padding-box,linear-gradient(#080E22,#080E22) padding-box,
    linear-gradient(135deg,#FFE066 0%,#FFC21A 50%,#FFA41F 100%) border-box;
  background-blend-mode:normal,soft-light,normal,normal}
/* … doch dunkler (Nutzer: „zu hell"): Grund wieder #060A1A, Lichtschein nur noch 4 % */
:root:not(#_) .tages-box.kommt,:root:not(#_) .tages-box.vorbei{background-color:#060A1A;
  background-image:linear-gradient(157deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 40%),var(--rausch-fein)}
:root:not(#_) .tages-box.heute{
  background:linear-gradient(157deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 40%) padding-box,
    var(--rausch-fein) padding-box,linear-gradient(#060A1A,#060A1A) padding-box,
    linear-gradient(135deg,#FFE066 0%,#FFC21A 50%,#FFA41F 100%) border-box;
  background-blend-mode:normal,soft-light,normal,normal}

/* Haupthintergrund (dunkel) einen Tick dunkler, die beiden Lichter etwas leiser
   (Nutzer 01.10.); hell unverändert */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--stoff:#050B1C;--licht-warm:rgba(72,112,228,.22);--licht-kalt:rgba(40,72,176,.17)} }
:root[data-theme="dark"]{--stoff:#050B1C;--licht-warm:rgba(72,112,228,.22);--licht-kalt:rgba(40,72,176,.17)}
/* Spalten-Ränder noch zurückhaltender (Nutzer: „zu intensiv") */
:root:not(#_) .tages-box.kommt{border:1px solid rgba(255,255,255,.08)}
:root:not(#_) .tages-box.vorbei{border:1px dashed rgba(255,255,255,.13)}
:root:not(#_) .tages-box .box.vorbei{border:1px dashed rgba(255,255,255,.11)}
:root:not(#_) .tages-box .box.kommt{border-color:rgba(255,255,255,.08)}
/* Spalten-Rand wie bei den großen Boxen (Nutzer): bläulich statt grau, ohne die helle
   Innenkante oben (die cremefarbene inset-Linie machte den Rand grau und hell) */
:root:not(#_) .tages-box.kommt{border:1px solid rgba(130,160,240,.16);box-shadow:none}
:root:not(#_) .tages-box.vorbei{border:1px dashed rgba(130,160,240,.2);box-shadow:none}
:root:not(#_) .tages-box .box.vorbei{border:1px dashed rgba(130,160,240,.16)}
:root:not(#_) .tages-box .box.kommt{border-color:rgba(130,160,240,.14)}

/* Hintergrund ohne Stufen (Nutzer 01.10.: „Brüche im Verlauf"): die beiden Lichter
   laufen nicht mehr linear, sondern weich (viele Stopps, ease-out) und in oklab aus –
   die lineare Rampe in den fast schwarzen Grund erzeugte sichtbare Bänder. Die Körnung
   darüber zerstreut die Reste. */
:root:not(#_) body::before{background:radial-gradient(ellipse at 50% 50% in oklab,
  var(--licht-warm) 0%,
  color-mix(in srgb,var(--licht-warm) 92%,transparent) 10%,
  color-mix(in srgb,var(--licht-warm) 75%,transparent) 20%,
  color-mix(in srgb,var(--licht-warm) 54%,transparent) 30%,
  color-mix(in srgb,var(--licht-warm) 35%,transparent) 40%,
  color-mix(in srgb,var(--licht-warm) 20%,transparent) 49%,
  color-mix(in srgb,var(--licht-warm) 9%,transparent) 57%,
  color-mix(in srgb,var(--licht-warm) 3%,transparent) 64%,
  transparent 72%)}
:root:not(#_) html::before{background:radial-gradient(ellipse at 50% 50% in oklab,
  var(--licht-kalt) 0%,
  color-mix(in srgb,var(--licht-kalt) 92%,transparent) 10%,
  color-mix(in srgb,var(--licht-kalt) 75%,transparent) 21%,
  color-mix(in srgb,var(--licht-kalt) 54%,transparent) 32%,
  color-mix(in srgb,var(--licht-kalt) 35%,transparent) 42%,
  color-mix(in srgb,var(--licht-kalt) 20%,transparent) 51%,
  color-mix(in srgb,var(--licht-kalt) 9%,transparent) 59%,
  color-mix(in srgb,var(--licht-kalt) 3%,transparent) 66%,
  transparent 74%)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--grain:.13} }
:root[data-theme="dark"]{--grain:.13}
/* Haupthintergrund noch einen Tick dunkler (Nutzer 01.10.) */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--stoff:#030817;--licht-warm:rgba(72,112,228,.19);--licht-kalt:rgba(40,72,176,.15)} }
:root[data-theme="dark"]{--stoff:#030817;--licht-warm:rgba(72,112,228,.19);--licht-kalt:rgba(40,72,176,.15)}
/* Alte „Lichtkante" (conic ::after bis 34 % Weiß) lag noch über dem Morgen-Kasten und
   machte den Rand hell – weg, überall. Der Rand ist nur noch der echte 1-px-Rand. */
:root:not(#_) .tages-box::after{display:none}
/* Spalten-Rand noch dunkler (Nutzer: „muss noch dunkler") */
:root:not(#_) .tages-box.kommt{border-color:rgba(130,160,240,.09)}
:root:not(#_) .tages-box.vorbei{border-color:rgba(130,160,240,.12)}
/* … einen Hauch zurück (Nutzer: „ein Tick zu dunkel") */
:root:not(#_) .tages-box.kommt{border-color:rgba(130,160,240,.12)}
:root:not(#_) .tages-box.vorbei{border-color:rgba(130,160,240,.15)}
/* Leichter Schatten unter den Spalten (Nutzer 01.10.) – weich, nach unten, kein Glow */
:root:not(#_) .tages-box.kommt,:root:not(#_) .tages-box.vorbei,:root:not(#_) .tages-box.heute{
  box-shadow:0 2px 6px -2px rgba(0,0,0,.35),0 22px 44px -22px rgba(0,0,0,.7)}
/* Kleine Boxen: ein wirklich leichter Schatten (Nutzer 01.10.) – schwarz statt des
   unsichtbaren Nachtblaus, knappe Kante + weicher Fall; die Innenkante kühl statt creme */
:root:not(#_) .tages-box .box:not(.gross):is(.kommt,.naechster,.ausfall:not(.vorbei)){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 3px rgba(0,0,0,.28),0 12px 24px -16px rgba(0,0,0,.65)}
:root:not(#_) .tages-box .box:not(.gross).laeuft{
  box-shadow:0 0 0 1.5px rgba(217,72,10,.5),0 1px 3px rgba(0,0,0,.28),0 12px 24px -16px rgba(0,0,0,.65)}
/* Blatt-Vorlader: Kuppel weich ein (.45 s) – erscheint bei jedem Detail-Blatt */
.blatt-lader{transition:opacity .45s ease}
#blatt .platte-inhalt.blendet-ein{animation-duration:.55s}
/* Blatt-Vorlader ganz in der Logo-Farbe (Nutzer 01.10.): Linien --dome wie das Logo,
   die Facetten glimmen beim Aufbau im selben Blau statt orange */
@keyframes facetteGlutLogo{0%{fill:transparent}35%{fill:color-mix(in srgb,var(--dome) 45%,transparent)}100%{fill:color-mix(in srgb,var(--dome) 8%,transparent)}}
.blatt-lader polygon{stroke:var(--dome);animation-name:facetteZeichnen,facetteGlutLogo}
/* Logo-Kuppel leiser – wie die Kuppeln in den Boxen (Nutzer: „zu intensiv"): dieselbe
   Farbe, halb durchscheinend, feinerer Strich */
:root:not(#_) .leiste .marke .f{stroke:color-mix(in srgb,var(--dome) 58%,transparent);stroke-width:.8px}
/* Vorlader deckt das ganze Blatt: gleicher Grund wie das Blatt (inherit), oben drüber,
   Klicks gehen durch (Schließen bleibt erreichbar). Weich aus → alles erscheint */
:root:not(#_) .blatt-lader{inset:0;z-index:6;padding:0;background:inherit;background-blend-mode:inherit;border-radius:inherit}
/* Logo-Kuppel EXAKT wie die Box-Kuppel: gleiche Linie (--dome 22 %, 0,7 px) – geteilte
   Kanten addieren sich wie dort, keine gefüllten Flächen */
:root:not(#_) .leiste .marke .f{stroke:color-mix(in srgb,var(--dome) 22%,transparent);stroke-width:.7px;fill:transparent}
/* Vorlader (Start + Blatt) wie das Logo (Nutzer 01.10.): dieselbe feine Linie
   (--dome 22 %), die Kuppel zeichnet sich nur – keine glimmenden Flächen */
:root:not(#_) #vorlader polygon,:root:not(#_) .blatt-lader polygon{
  stroke:color-mix(in srgb,var(--dome) 22%,transparent);fill:transparent;animation-name:facetteZeichnen}
/* Logo oben links größer (Nutzer 01.10.): breit 58 px (war 46), Handy 58 px (war 48) */
@media (min-width:1000px){ :root:not(#_) .leiste .marke-kuppel{inline-size:58px} }
@media (max-width:999px){ :root:not(#_) .leiste-in:has(> .kopf-legende:empty) .marke-kuppel,
  :root:not(#_) .leiste-in:has(> .kopf-menue) .marke-kuppel{inline-size:58px} }
/* Kopf-Knöpfe (QR · Aufgussplan · Sprache · Teilen · Herz) im dunklen Thema ein Stück
   dunkler (Nutzer 01.10.): #152A55 statt #1B3368, Schrift #EEF2FF ≈ 13:1 */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .leiste{--tonal:#152A55;--tonal-hover:#1C3668} }
:root[data-theme="dark"] .leiste{--tonal:#152A55;--tonal-hover:#1C3668}
/* Vorlader: die HITZE wieder rein (Nutzer: vergessen) – die Facetten glühen beim Aufbau
   von unten nach oben orange auf und verglimmen; die Linie bleibt die feine Logo-Linie */
:root:not(#_) #vorlader polygon,:root:not(#_) .blatt-lader polygon{
  animation-name:facetteZeichnen,facetteGlut;animation-duration:.45s,1.1s;
  animation-timing-function:cubic-bezier(.3,.7,.3,1),ease-in-out;animation-fill-mode:forwards,forwards;
  animation-delay:var(--t),calc(var(--t) + .3s)}
@media (prefers-reduced-motion:reduce){ :root:not(#_) #vorlader polygon,:root:not(#_) .blatt-lader polygon{animation:none;stroke-dashoffset:0} }
/* Logo-Schrift größer (Nutzer 01.10.): „Calma Rituals" 21 px, ohne Unterzeile */
:root:not(#_) .marke b{font-size:21px;line-height:1.1;font-weight:500;letter-spacing:-.01em}
:root:not(#_) .marke small{font-size:14px}

/* Vorlader-Hitze steigt (Nutzer 01.10.): je höher die Facette (--h: 0 Sockel … 1 Spitze),
   desto heißer – Farbe von warmem Bernstein zu feurigem Rot-Orange, Deckkraft von
   schwach zu stark; oben glimmt am Ende mehr nach als unten */
:root:not(#_) #vorlader polygon,:root:not(#_) .blatt-lader polygon{
  --hitze:color-mix(in oklab,#FFC56B,#FF3A0A calc(var(--h,.5) * 100%));
  --glut-spitze:color-mix(in srgb,var(--hitze) calc((.16 + var(--h,.5) * .7) * 100%),transparent);
  --glut-rest:color-mix(in srgb,var(--hitze) calc((.03 + var(--h,.5) * .17) * 100%),transparent);
  animation-name:facetteZeichnen,facetteHitze}
@keyframes facetteHitze{0%{fill:transparent}38%{fill:var(--glut-spitze)}100%{fill:var(--glut-rest)}}

/* Logo-Schrift dünner (Nutzer 01.10.) */
:root:not(#_) .marke b{font-weight:400}
/* Vorlader kürzer (Start 1,4 s statt 2,1 s, Blatt 0,85 s): Aufbau zeitlich gestaucht,
   darunter der Name „calma rituals" – leise, blendet mit der Kuppel ein */
:root:not(#_) #vorlader polygon,:root:not(#_) .blatt-lader polygon{
  animation-duration:.35s,.8s;animation-delay:calc(var(--t) * .55),calc(var(--t) * .55 + .18s)}
:root:not(#_) #vorlader,:root:not(#_) .blatt-lader{display:grid;place-content:center;justify-items:center;gap:16px}
:root:not(#_) #vorlader .vl-name,:root:not(#_) .blatt-lader .vl-name{font-size:18px;font-weight:400;letter-spacing:.04em;
  color:color-mix(in srgb,var(--ink) 72%,transparent);opacity:0;animation:vlEin .5s ease .35s forwards}
:root:not(#_) .blatt-lader.sofort{transition:none}
@media (prefers-reduced-motion:reduce){ :root:not(#_) #vorlader .vl-name,:root:not(#_) .blatt-lader .vl-name{animation:none;opacity:1} }
/* Vorlader-Name (Nutzer 01.10.): sofort da (kein Einblenden), größer, näher an der Kuppel,
   minimal nach rechts – die Sperrung hängt rechts Luft an, das gleicht .1em + 2px aus */
:root:not(#_) #vorlader,:root:not(#_) .blatt-lader{gap:6px}
:root:not(#_) #vorlader .vl-name,:root:not(#_) .blatt-lader .vl-name{animation:none;opacity:1;font-size:22px;letter-spacing:.03em;
  padding-inline-start:calc(.03em + 3px)}

/* Herz statt i-Punkt im Schriftzug (Logo + Vorlader). Rot wie die Merk-Herzen. */
:root{--herz-logo:#C2185B}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--herz-logo:#FF7AA2} }
:root[data-theme="dark"]{--herz-logo:#FF7AA2}
.i-herz{position:relative;display:inline-block}
.i-herz .herz-punkt{position:absolute;left:50%;top:.06em;inline-size:.34em;block-size:.34em;translate:-50% 0;fill:var(--herz-logo)}
/* Logo: Buchstaben minimal weiter (Nutzer 01.10.) */
:root:not(#_) .marke b{letter-spacing:.012em}
/* Herz-Punkt kleiner und in Schriftfarbe statt rot (Nutzer 01.10.) */
:root:not(#_) .i-herz .herz-punkt{inline-size:.26em;block-size:.26em;top:.1em;fill:currentColor}
/* Herz genau auf der Höhe des i-Punkts (gemessen Google Sans: Punkt 0,10–0,24 em unter der
   Oberkante bei Zeilenhöhe 1,1; Grundstrich ab 0,33 em) – fest 1,1, damit Logo und
   Vorlader gleich sitzen */
:root:not(#_) .i-herz{line-height:1.1;vertical-align:baseline}
:root:not(#_) .i-herz .herz-punkt{inline-size:.24em;block-size:.24em;top:.045em}
/* Herz-Punkt optisch abgestimmt (Nutzer 01.10.): Logo minimal höher, Vorlader etwas tiefer */
:root:not(#_) .marke .i-herz .herz-punkt{top:.02em}
:root:not(#_) .vl-name .i-herz .herz-punkt{top:.075em}

/* ===== Runden im Detail-Blatt (Bauplan 30, kern.js detailAnsicht – öffentlich UND Team):
   „1. Runde …" als leise Karten (Fläche der Aktions-Knöpfe – in jeder Blattfarbe lesbar),
   darin die Bildkreise der Runde (kleiner als „Düfte & Kräuter") und ihr Text.
   Dazu der dezente Hinweis, wenn ein Text (noch) nicht übersetzt ist (Bauplan 35a). ===== */
:root:not(#_) .runden{display:grid;gap:10px;margin:0;padding:0;list-style:none}
:root:not(#_) .runde{display:grid;gap:10px;min-inline-size:0;padding:14px 16px 16px;border-radius:18px;background:var(--akt-grund,var(--tonal))}
:root:not(#_) .runde-titel{margin:0;font-size:16px;line-height:1.3;font-weight:500;color:var(--accent-ink)}
:root:not(#_) .runde-text{margin:0;font-size:16px;line-height:1.5;text-wrap:pretty;color:var(--ink)}
:root:not(#_) .zutaten-gross.runde-kreise{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px 8px}
:root:not(#_) .zutaten-gross.runde-kreise li{font-size:14px}
:root:not(#_) .zutaten-gross.runde-kreise .zutat-bild{inline-size:64px;block-size:64px}
:root:not(#_) .zutaten-gross.runde-kreise .zutat-bild.ohne{font-size:24px}
:root:not(#_) #blatt .inhalt-hinweis{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
:root:not(#_) #blatt .inhalt-hinweis .ic{margin-block-start:1px;inline-size:16px;block-size:16px}
/* Oben ohne laufenden Aufguss: zwei gleich breite, gleich gesetzte Boxen (Nutzer 01.10.) */
@media (min-width:1000px){ :root:not(#_) .jetzt-reihe.gleich{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
:root:not(#_) .jetzt-reihe.gleich .box .name{font-size:29px;line-height:1.12;margin-block-start:10px}
@media (min-width:1000px){ :root:not(#_) .jetzt-reihe.gleich .box .name{font-size:34px} }
/* Calma-Foto (neu vom Nutzer, 1280 × 853): ganz zeigen statt auf 1000:594 zuschneiden */
:root:not(#_) .calma .foto{aspect-ratio:1280/853;object-position:60% 50%}
/* „2.–4. Oktober · Strandbad Orankesee" dunkler (Nutzer 01.10.): dunkel #A4A9C2 (≈ 8:1 auf
   dem Grund), hell in der gedämpften Schriftfarbe */
:root:not(#_) .kopf-zeile{color:var(--ink-2)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not(#_) .kopf-zeile{color:#A4A9C2} }
:root[data-theme="dark"]:not(#_) .kopf-zeile{color:#A4A9C2}

/* Scrollbalken in den Farben der Seite (Nutzer 01.10.) – Griff wie die Widget-Flächen,
   Spur wie der Grund; die Stimmungen färben beides automatisch mit um */
:root{scrollbar-color:#9AA8CC #E2E8F4}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){scrollbar-color:#2C3A62 #030817} }
:root[data-theme="dark"]{scrollbar-color:#2C3A62 #030817}
#blatt .platte-inhalt{scrollbar-color:color-mix(in srgb,var(--ink) 28%,transparent) transparent}
/* Team-Anmeldung: Schriftzug „calma ritual" oben wie das Logo (dünn, minimal gesperrt) */
:root:not(#_) .anmelden-marke{font-size:20px;font-weight:400;letter-spacing:.012em;color:var(--ink)}

/* Logo oben links: beim Überfahren (und Tastaturfokus) baut sich die Kuppel jedes Mal auf wie im
   Vorlader – Linien zeichnen sich, die Hitze steigt von unten nach oben (Nutzer 01.10.) */
:root:not(#_) .marke .f{--hitze:color-mix(in oklab,#FFC56B,#FF3A0A calc(var(--h,.5) * 100%));
  --glut-spitze:color-mix(in srgb,var(--hitze) calc((.16 + var(--h,.5) * .7) * 100%),transparent);
  --glut-rest:color-mix(in srgb,var(--hitze) calc((.03 + var(--h,.5) * .17) * 100%),transparent)}
@media (hover:hover){
  :root:not(#_) .marke:hover .marke-kuppel .f{stroke-dasharray:1 1;stroke-dashoffset:1;
    animation:facetteZeichnen .35s cubic-bezier(.3,.7,.3,1) forwards,facetteHitze .8s ease-in-out forwards;
    animation-delay:calc(var(--t) * .55),calc(var(--t) * .55 + .18s)}
}
:root:not(#_) .marke:focus-visible .marke-kuppel .f{stroke-dasharray:1 1;stroke-dashoffset:1;
  animation:facetteZeichnen .35s cubic-bezier(.3,.7,.3,1) forwards,facetteHitze .8s ease-in-out forwards;
  animation-delay:calc(var(--t) * .55),calc(var(--t) * .55 + .18s)}
@media (prefers-reduced-motion:reduce){ :root:not(#_) .marke .marke-kuppel .f{animation:none !important;stroke-dasharray:none} }

/* Widget-Symbole in der Kuppelfarbe statt Gold (Nutzer 01.10.): ohne laufenden Aufguss gilt die
   Grundfarbe; die Stimmungen färben sie später in den Ton des Aufgusses */
:root:not(#_) .widget .w-symbol{color:var(--dome)}
:root:not(#_) .widget .w-symbol .band-kuppel .f,:root:not(#_) .info-band .band-kuppel .f{stroke:var(--dome)}
/* … auch Flamme und Uhr selbst (eine ältere Regel „.info-band .ic" färbte sie direkt gold):
   alle drei Symbole in der Logo-Farbe */
:root:not(#_) .info-band.widgets .w-symbol .ic{color:var(--dome);opacity:1}
/* Widget-Kuppel wie die hervorgehobenen Facetten der Box-Kuppel (Nutzer 01.10.): Linie in der
   Logo-Farbe UND Füllung innen (Kuppelblau 32 %) – heller, ohne grelle Linien */
:root:not(#_) .widget .w-symbol .band-kuppel .f{stroke:var(--dome);fill:color-mix(in srgb,var(--dome) 32%,transparent);stroke-width:.9px}
/* Logo-Hover NUR die Hitze (Nutzer 01.10.): die Linien bleiben stehen, nur die Glut steigt von
   unten nach oben auf und verglimmt – kein Neuzeichnen der Kuppel */
@media (hover:hover){
  :root:not(#_) .marke:hover .marke-kuppel .f{stroke-dasharray:none;stroke-dashoffset:0;
    animation:facetteHitze .9s ease-in-out forwards;animation-delay:calc(var(--h,.5) * .45s)}
}
:root:not(#_) .marke:focus-visible .marke-kuppel .f{stroke-dasharray:none;stroke-dashoffset:0;
  animation:facetteHitze .9s ease-in-out forwards;animation-delay:calc(var(--h,.5) * .45s)}
@media (prefers-reduced-motion:reduce){ :root:not(#_) .marke .marke-kuppel .f{animation:none !important} }
/* Logo-Hitze verglimmt ganz (Nutzer 01.10.): kein Rest-Glimmen am Ende; beim Wegfahren weg */
@keyframes logoHitze{0%{fill:transparent}40%{fill:var(--glut-spitze)}100%{fill:transparent}}
@media (hover:hover){ :root:not(#_) .marke:hover .marke-kuppel .f{animation-name:logoHitze;animation-duration:1.1s} }
:root:not(#_) .marke:focus-visible .marke-kuppel .f{animation-name:logoHitze;animation-duration:1.1s}

/* Logo-Glut über die Klasse .glut (kern.js) statt :hover – spielt immer ganz durch */
:root:not(#_) .marke:hover .marke-kuppel .f,:root:not(#_) .marke:focus-visible .marke-kuppel .f{animation:none}
:root:not(#_) .marke .marke-kuppel.glut .f{animation:logoHitze 1.1s ease-in-out forwards;animation-delay:calc(var(--h,.5) * .45s)}
@media (prefers-reduced-motion:reduce){ :root:not(#_) .marke .marke-kuppel.glut .f{animation:none} }

/* Pillen-Zeile „VORBEI" so hoch wie alle anderen (31 px): das Smiley (18 px) machte sie
   36 px hoch – Zeit und Name vergangener Boxen standen 4 px tiefer als in der Spalte
   daneben (öffentlich und Team). Das Symbol bleibt 18 px groß, zählt aber nur 13 px. */
:root:not(#_) .box-status .pille.still .ic{margin-block:-2.5px}

/* Großer Kopf „Calma Rituals" 15 % größer (Nutzer 01.10.): 64 → 74 px, Handy entsprechend */
:root:not(#_) .kopf h1{font-size:74px}
@media (max-width:999px){ :root:not(#_) .kopf h1{font-size:clamp(48px,16.1vw,67px)} }

/* ===== Nachbessern r7 (Prüfbefunde, öffentlich + gemeinsam) ===== */
/* Ruhige Bewegung: Vorlader (Start + Blatt) ohne Aufbau-Animation – spätere Regeln
   ohne Media-Query (animation-name/-duration) hatten das „animation:none" überschrieben */
@media (prefers-reduced-motion:reduce){
  :root:not(#_):not(#_) #vorlader polygon,:root:not(#_):not(#_) .blatt-lader polygon{animation:none;stroke-dashoffset:0}
}
/* Kleine Kuppel eine Zeile tiefer neben die Uhrzeit, wenn die Pillen-Zeile (Paar + Herz)
   neben ihr keinen Platz hat (kern.js kuppelEinpassen misst) – wie am Handy unter 360 px.
   Die Uhrzeit-Zeile hält ihr mit padding-inline-end (62/72 px) den Platz frei. */
:root:not(#_) .box.kuppel-tief > .stueck{inset-block-start:58px}
:root:not(#_) .box.gross.kuppel-tief > .stueck{inset-block-start:60px}   /* mittig zur Zeit (20/22 px) */
:root:not(#_) .box.kuppel-tief > .box-status,:root:not(#_) .box.gross.kuppel-tief > .box-status{padding-inline-end:0}
/* „Demnächst | 10 Min." im Blatt genau wie in der Box (Bauplan 31): Umriss + Schrift #DCE3F7
   statt #EEF2FF – die Blätter dieses Zustands sind in beiden Themen dunkel */
:root:not(#_) #blatt .platte.detail .pillen-paar.p-kommt{--pk:#DCE3F7}
/* Leere Flamme im hellsten Blatt („Als Nächstes", Grund mit Körnung bis ≈ #364B7C) etwas
   heller als in den übrigen dunklen Blättern (.45): gemessen ≥ 3:1 statt 2,7:1 */
:root:not(#_) #blatt .platte.detail.ist-naechster{--flamme-leer:rgba(238,242,255,.55)}
/* Handy-Kopfleiste: Symbol-Knöpfe rund 40 × 40 wie Herz und Sprache; nur unter 360 px 38 px breit */
@media (min-width:360px) and (max-width:999px){ :root:not(#_) .leiste .icon-knopf{min-inline-size:40px} }

/* „Morgen · 13:30" (Nutzer 01.10.): Punkt mittig zwischen Wort und Zeit; in den großen Boxen
   oben Zeit und Tag etwas kleiner und dünner (26 → 22 px, 700 → 600 / Tag 500 → 400) */
:root:not(#_) .box .zeit:has(.zeit-tag){gap:0}
:root:not(#_) .zeit-tag{margin:0}
:root:not(#_) .zeit-punkt{margin-inline:.35em}
:root:not(#_) .jetzt-reihe .box .zeit{font-size:22px}
@media (max-width:999px){ :root:not(#_) .jetzt-reihe .box .zeit{font-size:20px} }
:root:not(#_) .jetzt-reihe .box .zeit :is(time,.bis.gleich){font-weight:600}
:root:not(#_) .jetzt-reihe .box .zeit-tag{font-weight:400}

/* Flamme und Uhr im Widget innen hellblau gefüllt wie die Widget-Kuppel (Nutzer 01.10.) */
:root:not(#_) .info-band.widgets .widget:nth-child(2) .w-symbol .ic path,
:root:not(#_) .info-band.widgets .widget:nth-child(3) .w-symbol .ic circle{fill:color-mix(in srgb,var(--dome) 32%,transparent)}

/* Copyright in der Fußzeile */
.fuss-copy{margin:0;font-size:14px;color:var(--ink-3);grid-column:1 / -1}

/* Uhrzeit überall so dünn wie „Morgen" (Nutzer 01.10.): große und kleine Boxen, Vorbei-Gruppe */
:root:not(#_) .box .zeit :is(time,.bis,.bis.gleich,.bis-strich),:root:not(#_) .box .zeit-tag,
:root:not(#_) .vg-zeit,:root:not(#_) .vg-zeit time{font-weight:400}
:root:not(#_) .jetzt-reihe .box .zeit :is(time,.bis,.bis.gleich,.bis-strich){font-weight:400}

/* Overlay über dem Detail-Blatt (Aufguss teilen / QR) – gleitet herein, ohne Neuladen */
#blatt .ueberlage{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;border-radius:inherit;overflow:hidden;
  background-color:var(--surface);background-image:var(--rausch-fein);background-blend-mode:var(--rausch-mix);color:var(--ink);
  animation:ueberlageEin .22s cubic-bezier(.2,.8,.2,1)}
#blatt .ueberlage.geht{animation:ueberlageAus .2s ease forwards;pointer-events:none}
@keyframes ueberlageEin{from{opacity:0;transform:translateY(22px)}}
@keyframes ueberlageAus{to{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){ #blatt .ueberlage,#blatt .ueberlage.geht{animation:none} }
.ueberlage-kopf{display:flex;align-items:flex-start;gap:8px;padding:22px 10px 8px 20px;flex:none}
.ueberlage-kopf > div{flex:1;min-inline-size:0}
.ueberlage-kopf .auge{display:block;font-size:14px;font-weight:500;color:var(--ink-2);margin-block-end:4px}
.ueberlage-kopf h3{margin:0;font-size:22px;line-height:1.2;font-weight:600;overflow-wrap:anywhere}
.ueberlage-inhalt{flex:1 1 auto;min-block-size:0;overflow:auto;padding:4px 20px 24px;display:flex;flex-direction:column;gap:18px;overscroll-behavior:contain}

/* Aufguss-Namen überall so dünn wie die Überschriften „Calma Rituals"/„Aufgussplan" (450) –
   große und kleine Boxen, Titel im Aufguss-Blatt (Nutzer 01.10.) */
:root:not(#_) :is(.jetzt-reihe .box.gross, .tages-box .box, .box) .name{font-weight:450}
:root:not(#_) #blatt .platte.detail .platte-kopf h2{font-weight:450}

/* Dampf-Hintergrund: fest, hinter dem Inhalt, über den Lichtern; nie im Druck */
#dampf{position:fixed;inset:0;inline-size:100vw;block-size:100vh;z-index:-1;pointer-events:none}
@media print{ #dampf{display:none} }

/* Dampf VOR dem Inhalt: über den Boxen, unter Kopfleiste (30) und Blättern (40+), Klicks gehen durch; vor allem unten */
#dampf-vorn{position:fixed;inset:0;inline-size:100vw;block-size:100vh;z-index:25;pointer-events:none;-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 45%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 45%,transparent 85%)}
@media print{ #dampf-vorn{display:none} }

/* Dampf auf den Plan-Kästchen beim Überfahren: eine Fläche über dem Kästchen, Klicks gehen durch */
#dampf-box{display:none}
@media print{ #dampf-box{display:none} }

/* ===== Kopfleiste mit Uhr + Wetter, kürzere Knöpfe, Tooltips (BAUPLAN 39; kern.js uhrKnopf,
   wetterKnopf, kopfEinpassen, Tooltips) =====
   Uhr und Wetter sind Tonal-Pillen wie die übrigen Kopf-Knöpfe (breit 48 px, Handy 40 px),
   Sprache nur als Kürzel „DE", „Aufgussplan" nur als Kalender-Symbol – beide rund.
   Schrift auf den Knöpfen: hell #16203F auf #FFD435 ≈ 12:1, dunkel #EEF2FF auf #152A55 ≈ 12:1. */
.kopf-anker{position:relative;display:flex;flex:none}
:root:not(#_) .leiste .kopf-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;
  min-block-size:48px;min-inline-size:48px;padding-inline:14px 16px;border:0;border-radius:24px;cursor:pointer;
  background:var(--tonal);color:var(--ink);font-size:16px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent}
@media (hover:hover){ :root:not(#_) .leiste .kopf-knopf:hover{background:var(--tonal-hover)} }
:root:not(#_) .leiste .kopf-knopf .ic{inline-size:20px;block-size:20px}
:root:not(#_) .leiste .kopf-knopf[aria-expanded="true"]{background:var(--tonal-hover);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 38%,transparent)}
:root:not(#_) .leiste .wetter-knopf.ohne{padding-inline:0}
:root:not(#_) .leiste .sprach-knopf.kurz{min-inline-size:48px;padding:0;gap:0;justify-content:center;font-size:15px;font-weight:600;letter-spacing:.04em}
:root:not(#_) .leiste .sprach-knopf.kurz .sprache-kurz{display:inline}
:root:not(#_) .leiste .kopf-menue .menue-link{min-inline-size:48px;min-block-size:48px;padding:0;gap:0;justify-content:center;border-radius:24px}
/* Zahl + Einheit („17°", „85 %") bleiben auch in ar/fa/he beieinander */
.wx-zahl{direction:ltr;unicode-bidi:isolate}
@media (max-width:999px){
  :root:not(#_) .leiste .kopf-knopf{min-block-size:40px;min-inline-size:40px;padding-inline:10px;gap:5px;font-size:15px}
  :root:not(#_) .leiste .kopf-knopf .ic{inline-size:19px;block-size:19px}
  /* Uhr am Handy nur als Zeit, ohne Symbol */
  :root:not(#_) .leiste .uhr-knopf .ic{display:none}
  :root:not(#_) .leiste .sprach-knopf.kurz,:root:not(#_) .leiste .kopf-menue .menue-link{min-inline-size:40px;min-block-size:40px;border-radius:20px}
  /* Einpassen in EINE Zeile (kern.js kopfEinpassen setzt die Stufen der Reihe nach) –
     doppeltes :not(#_), damit die Stufen auch die Herz-Regeln aus oeffentlich.css schlagen */
  :root:not(#_):not(#_) .leiste-in.eng-1 [data-tu="qr"]{display:none}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-2{column-gap:3px}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-2 > .marke .marke-kuppel{inline-size:40px}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-3 > .marke .marke-kuppel{inline-size:32px}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-3 .kopf-knopf{padding-inline:7px;gap:4px}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-4 :is(.icon-knopf,.sprach-knopf.kurz,.kopf-menue .menue-link,.merk-anker > .merk-knopf,.kopf-knopf){min-inline-size:36px}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-4 .kopf-knopf{font-size:14px;padding-inline:6px}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-5 .wetter-knopf .wx-knopf-t{display:none}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-5 .wetter-knopf{padding-inline:0}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-6 .kopf-anker:has(> .uhr-knopf){display:none}
}

/* Dropdown unter Uhr/Wetter (breit): mattiertes Glas mit Körnung und Lichtkante, wie die Seite.
   Kontraste: hell #16203F / #434B6B auf #F6F8FF ≈ 15:1 / 8,4:1; dunkel #EEF2FF / #C3C8DC auf
   #111C3D ≈ 15:1 / 10:1. Am Handy steht derselbe Inhalt im Blatt von unten. */
:root{--pop-grund:#F6F8FF;--pop-rand:rgba(32,57,138,.16);--wx-regen:#1F4FC7}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--pop-grund:#111C3D;--pop-rand:rgba(169,188,242,.22);--wx-regen:#8EC5FF} }
:root[data-theme="dark"]{--pop-grund:#111C3D;--pop-rand:rgba(169,188,242,.22);--wx-regen:#8EC5FF}
.kopf-pop{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:0;z-index:45;inline-size:min(392px,calc(100vw - 24px));
  max-block-size:min(calc(100vh - 110px),700px);overflow:hidden auto;overscroll-behavior:contain;padding:18px 18px 16px;border-radius:24px;
  color:var(--ink);text-align:start;font-size:16px;line-height:1.4;
  background-color:color-mix(in srgb,var(--pop-grund) 97%,transparent);
  background-image:linear-gradient(157deg,rgba(var(--glas-ton),.08) 0%,rgba(255,255,255,0) 40%),var(--rausch-fein);
  background-blend-mode:normal,var(--rausch-mix);border:1px solid var(--pop-rand);
  box-shadow:inset 0 1px 0 var(--glas-kante),0 24px 54px -20px rgba(4,10,30,.6),0 2px 8px rgba(4,10,30,.16);
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 28%,transparent) transparent;
  animation:kopfPopEin .18s cubic-bezier(.2,.8,.2,1)}
@keyframes kopfPopEin{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){ .kopf-pop{animation:none} }
.kopf-pop:focus{outline:none}
.kopf-pop:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.kp-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-block-end:14px}
.uhr-gross{font-size:34px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kp-unter{font-size:15px;color:var(--ink-2)}
.kp-leer{font-size:15px;color:var(--ink-2);padding:4px 2px}
.kp-teil{margin-block-start:18px}
.kp-h{margin:0 0 8px;font-size:14px;line-height:1.3;font-weight:500;color:var(--ink-2)}
.kp-plan{inline-size:100%;margin-block-start:14px}

/* Karten im Uhr-Dropdown: dieselben Farben und Pillen wie die Boxen (läuft gelb, als Nächstes
   blau, demnächst nachtblau – in beiden Themen); Hover nur eine Spur heller, kein Glow */
.uhr-liste{display:grid;gap:10px}
.uk{display:grid;justify-items:start;gap:5px;inline-size:100%;padding:14px 16px 15px;border:0;border-radius:18px;
  text-align:start;color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 3px rgba(0,0,0,.18),0 10px 22px -14px rgba(0,0,0,.45)}
.uk.laeuft{--ink:#1A1405;--ink-2:rgba(26,20,5,.8);
  background:var(--rausch-fein),linear-gradient(162deg,#FFE36B 0%,var(--amber) 42%,var(--orange) 100%);background-blend-mode:multiply,normal}
.uk.naechster{--ink:#EEF2FF;--ink-2:#C3C8DC;--pk:#DCE3F7;
  background:var(--rausch-fein),linear-gradient(162deg,#253B80 0%,#18275E 55%,#111C48 100%);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(169,188,242,.35),0 1px 3px rgba(0,0,0,.18),0 10px 22px -14px rgba(0,0,0,.45)}
.uk.kommt,.uk.ausfall,.uk.vorbei{--ink:#EEF2FF;--ink-2:#C3C8DC;--pk:#DCE3F7;
  background:var(--rausch-fein),linear-gradient(#0C1633,#0C1633);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(130,160,240,.22),0 1px 3px rgba(0,0,0,.18),0 10px 22px -14px rgba(0,0,0,.45)}
:root:not(#_) .uk .pillen-paar.p-kommt{--pk:#DCE3F7}
@media (hover:hover){ .uk:hover{filter:brightness(1.07)} }
.uk-pillen{display:flex;margin-block-end:5px}
.uk-zeit{display:flex;align-items:baseline;flex-wrap:wrap;font-size:16px;line-height:1.3;color:var(--ink-2);font-variant-numeric:tabular-nums}
.uk-zeit .bis-strich{margin-inline:.3em}
.uk-name{font-size:21px;line-height:1.2;font-weight:450;color:var(--ink);overflow-wrap:anywhere}
.uk-wer{font-size:15px;line-height:1.35;color:var(--ink-2)}
.kp-ruhe{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:18px;background:rgba(var(--glas-ton),.07)}
.kp-ruhe .ic{color:var(--dome);margin-block-start:2px}
.kp-ruhe p{display:grid;gap:4px;font-size:15px;color:var(--ink-2)}
.kp-ruhe b{font-size:17px;font-weight:500;color:var(--ink)}

/* Wetter: groß jetzt (Symbol, Temperatur, Wort, ORT), drei Werte, Festivaltage auf einer
   gemeinsamen Skala, heute die Aufgusszeiten als Streifen, unten die Quelle (Open-Meteo, CC BY).
   Regen ≥ 50 %: hell #1F4FC7 auf #F6F8FF ≈ 6,6:1, dunkel #8EC5FF auf #111C3D ≈ 9:1. */
.wx-jetzt{display:flex;align-items:center;gap:14px}
.wx-jetzt .wx-gross{inline-size:52px;block-size:52px;stroke-width:1.5;color:var(--accent-ink)}
.wx-t{font-size:50px;line-height:1;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wx-txt{display:grid;gap:3px;min-inline-size:0}
.wx-wort{font-size:18px;line-height:1.25;font-weight:500}
.wx-ort{display:flex;align-items:center;gap:4px;font-size:14px;line-height:1.3;color:var(--ink-2)}
.wx-ort .ic{inline-size:15px;block-size:15px}
.wx-werte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-block-start:16px}
.wx-wert{display:grid;gap:3px;min-inline-size:0;padding:10px 12px;border-radius:14px;background:rgba(var(--glas-ton),.07)}
.wx-wert .k{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;min-inline-size:0;font-size:13px;line-height:1.25;color:var(--ink-2);overflow-wrap:anywhere}
.wx-wert .k .ic{inline-size:15px;block-size:15px}
.wx-wert .v{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.wx-tage{display:grid;gap:2px}
.wx-tag{display:grid;grid-template-columns:minmax(58px,auto) 22px minmax(30px,1fr) auto minmax(52px,auto);align-items:center;gap:10px;
  min-block-size:46px;padding:4px 8px;border-radius:12px}
.wx-tag.heute{background:rgba(var(--glas-ton),.08)}
.wx-tag > .ic{inline-size:22px;block-size:22px}
.wx-wt{display:grid;line-height:1.15}
.wx-wt b{font-size:15px;font-weight:500}
.wx-wt small{font-size:12.5px;color:var(--ink-2)}
.wx-balken{position:relative;block-size:6px;border-radius:99px;background:rgba(var(--glas-ton),.14);overflow:hidden}
.wx-balken i{position:absolute;inset-block:0;border-radius:99px;background:linear-gradient(90deg,#5B7FE0,#FFB21A)}
[dir="rtl"] .wx-balken i{background:linear-gradient(270deg,#5B7FE0,#FFB21A)}
.wx-mm{display:flex;gap:6px;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.wx-mm b{font-weight:500;color:var(--ink)}
.wx-regen{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.wx-regen .ic{inline-size:13px;block-size:13px}
.wx-regen.viel,.wx-r.viel{color:var(--wx-regen);font-weight:600}
.wx-tag.vorbei .wx-wt b{font-weight:400;color:var(--ink-3)}
.wx-tag.vorbei .wx-balken i{background:rgba(var(--glas-ton),.32)}
.wx-stunden{overflow-x:auto;overscroll-behavior-x:contain;margin-inline:-18px;padding:2px 18px 8px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 24%,transparent) transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
.wx-stunden:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.wx-stunden ol{display:flex;gap:6px;inline-size:max-content;margin:0;padding:0;list-style:none}
.wx-std{display:grid;justify-items:center;gap:5px;inline-size:60px;padding:10px 4px 9px;border-radius:14px;background:rgba(var(--glas-ton),.07)}
.wx-std time{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.wx-std .ic{inline-size:22px;block-size:22px}
.wx-std-t{font-size:16px;font-weight:500}
.wx-r{min-block-size:1.25em;font-size:12.5px;color:var(--ink-2)}
.wx-std.vorbei{background:none;border:1px dashed rgba(var(--glas-ton),.32);padding:9px 3px 8px}
.wx-std.laeuft{--ink:#1A1405;--ink-2:rgba(26,20,5,.8);color:var(--ink);
  background:var(--rausch-fein),linear-gradient(162deg,#FFE36B 0%,var(--amber) 50%,var(--orange) 100%);background-blend-mode:multiply,normal}
.wx-std.laeuft .wx-r.viel{color:#1A1405}
.wx-quelle{margin-block-start:16px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.wx-quelle a{color:inherit;text-underline-offset:2px}
.wx-aus{display:grid;justify-items:start;gap:8px;font-size:15px}
.wx-aus > .ic{inline-size:36px;block-size:36px;color:var(--ink-2)}
/* Am Handy im Blatt: der Streifen läuft bis an den Rand des Inhalts */
#blatt .kopf-blatt .wx-stunden{margin-inline:-20px;padding-inline:20px}
#blatt .kopf-blatt .platte-inhalt{gap:0;padding-block-start:8px}
@media (max-width:400px){
  .wx-jetzt{gap:10px}
  .wx-jetzt .wx-gross{inline-size:44px;block-size:44px}
  .wx-t{font-size:42px}
  .wx-werte{gap:6px}
  .wx-wert{padding:9px 10px}
}

/* Tooltips: dunkle Glas-Pille mit Pfeil, in beiden Themen gleich (#EEF2FF auf ≈ #0A1026 ≈ 16:1;
   über hellem Grund gemischt ≈ 12:1). Lage setzt kern.js (physisch: left/top). */
.kopf-tip{position:fixed;left:0;top:0;z-index:60;max-inline-size:min(300px,calc(100vw - 16px));padding:8px 12px;border-radius:12px;
  font-size:14px;line-height:1.3;font-weight:500;color:#EEF2FF;text-align:center;text-wrap:balance;pointer-events:none;
  background:rgba(10,16,38,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(169,188,242,.18),0 12px 28px -12px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;translate:0 -4px;
  transition:opacity .14s ease,translate .18s cubic-bezier(.2,.8,.2,1),visibility 0s linear .18s}
.kopf-tip.an{opacity:1;visibility:visible;translate:0 0;transition:opacity .14s ease,translate .18s cubic-bezier(.2,.8,.2,1),visibility 0s}
.kopf-tip::before{content:"";position:absolute;bottom:100%;left:var(--pfeil,50%);margin-left:-6px;border:6px solid transparent;border-bottom-color:rgba(10,16,38,.9)}
@media (prefers-reduced-motion:reduce){ .kopf-tip,.kopf-tip.an{translate:none;transition:opacity .1s linear,visibility 0s} }
@media print{ .kopf-tip,.kopf-pop{display:none} }

/* Vorlader: stehendes Dampfbild hinter der Kuppel, blendet weich ein */
#vorlader .vl-dampf{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:-1;pointer-events:none;opacity:0;animation:vlEin .5s ease forwards}
@media (prefers-reduced-motion:reduce){ #vorlader .vl-dampf{animation:none;opacity:1} }

/* Dampf der Seitenleiste: eigene Schicht ÜBER dem Blatt (Klicks gehen durch), quillt über den Rand
   hinaus – nach außen weich ausgeblendet; beim Schließen weg */
#blatt > .blatt-dampf{position:fixed;z-index:42;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 150px);mask-image:linear-gradient(to right,transparent 0,#000 150px)}
#blatt > .blatt-dampf.oben{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 90px);mask-image:linear-gradient(to bottom,transparent 0,#000 90px)}
[dir="rtl"] #blatt > .blatt-dampf{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 150px);mask-image:linear-gradient(to left,transparent 0,#000 150px)}
#blatt.geht > .blatt-dampf{opacity:0;transition:opacity .2s ease}

/* Widgets so dünn wie die übrigen Texte (Nutzer 01.10.): obere Zeile 450 wie Überschriften/Namen,
   untere Zeile 400 wie die Uhrzeiten */
:root:not(#_) .widget .w-oben{font-weight:450}
:root:not(#_) .widget .w-unten,:root:not(#_) .widget .w-unten :is(time,.w-zeit){font-weight:400}

/* Dampf auf den Plan-Kästchen: zwei Flächen über den Kästchen, Klicks gehen durch, kein Deckkraft-Übergang */
.dampf-box{position:absolute;z-index:2;pointer-events:none}
.dampf-box[hidden]{display:none}
@media print{ .dampf-box{display:none} }

/* Calma-Abschnitt ohne Gold (Nutzer 01.10.): Link und Route-Knopf in der Logo-Farbe (--dome) –
   färben sich mit den Stimmungen mit. Knopf dunkel: #8EA4E8 mit #0B1430 ≈ 7:1, hell: #20398A mit Weiß ≈ 10:1 */
:root{--auf-dome:#FFFFFF}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--auf-dome:#0B1430} }
:root[data-theme="dark"]{--auf-dome:#0B1430}
:root:not(#_) .calma .knopf.voll{background:var(--dome);color:var(--auf-dome);box-shadow:none}
@media (hover:hover){ :root:not(#_) .calma .knopf.voll:hover{background:color-mix(in srgb,var(--dome) 88%,#fff)} }
:root:not(#_) .ab-link{color:var(--dome)}

/* Fußzeile: nur Copyright; das © in einer Schrift, die es auf der Grundlinie in voller Höhe zeichnet */
.fuss-copy-zeile{color:var(--ink-3)}
.copy-c{font-family:Arial,"Segoe UI","Helvetica Neue",sans-serif;font-size:1.02em;vertical-align:baseline;margin-inline-end:.1em}

/* Seitenleisten-Dampf liegt jetzt im body (überlebt das Neuzeichnen des Blatts), kräftiger */
body > .blatt-dampf{position:fixed;z-index:42;pointer-events:none;transition:opacity .2s ease;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 150px);mask-image:linear-gradient(to right,transparent 0,#000 150px)}
body > .blatt-dampf.oben{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 90px);mask-image:linear-gradient(to bottom,transparent 0,#000 90px)}
[dir="rtl"] body > .blatt-dampf{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 150px);mask-image:linear-gradient(to left,transparent 0,#000 150px)}
@media print{ body > .blatt-dampf{display:none} }
/* Teilen-Overlay: genau die Farbe des Blatts darunter, fährt von RECHTS herein und wieder hinaus */
#blatt .ueberlage{background:inherit;background-blend-mode:inherit;animation:ueberlageRein .3s cubic-bezier(.2,.8,.2,1)}
#blatt .ueberlage.geht{animation:ueberlageRaus .26s cubic-bezier(.4,0,.9,.6) forwards}
@keyframes ueberlageRein{from{transform:translateX(100%)}}
@keyframes ueberlageRaus{to{transform:translateX(100%)}}
[dir="rtl"] #blatt .ueberlage{animation-name:ueberlageReinRtl}
[dir="rtl"] #blatt .ueberlage.geht{animation-name:ueberlageRausRtl}
@keyframes ueberlageReinRtl{from{transform:translateX(-100%)}}
@keyframes ueberlageRausRtl{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){ #blatt .ueberlage,#blatt .ueberlage.geht{animation:none} }

/* Demnächst-Pille: Umrandung leiser (Nutzer 01.10.: „zu weiß") – Schrift bleibt, nur der Rand tritt zurück */
:root:not(#_) .pillen-paar.p-kommt{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--pk,#DCE3F7) 42%,transparent)}
:root:not(#_) .pillen-paar.p-kommt > .pille.dauer{box-shadow:inset 1.5px 0 0 color-mix(in oklab,var(--pk,#DCE3F7) 42%,transparent)}
:root:not(#_) [dir="rtl"] .pillen-paar.p-kommt > .pille.dauer{box-shadow:inset -1.5px 0 0 color-mix(in oklab,var(--pk,#DCE3F7) 42%,transparent)}
/* Kopfleiste beim Scrollen ohne Trennlinie (Nutzer 01.10.: „brauchen wir nicht") */
:root:not(#_) .leiste.gerollt{border-block-end-color:transparent}

/* Link-Feld: eine Zeile, Kopier-Symbol ganz rechts, Tippen aufs Feld kopiert (Nutzer 01.10.) */
.link-feld{display:flex;align-items:center;gap:10px;inline-size:100%;min-block-size:52px;padding-block:6px;padding-inline:16px 6px;border:0;border-radius:16px;
  background:var(--akt-grund,var(--surface-2));color:var(--ink);font:inherit;font-size:15px;font-weight:500;line-height:1.3;text-align:start;cursor:pointer;transition:background .15s}
@media (hover:hover){ .link-feld:hover{background:var(--akt-hover,var(--surface-2))} }
.link-feld .link-text{flex:1;min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-feld .link-kopie{flex:none;display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;color:var(--dome)}
.link-feld .link-kopie .ic{inline-size:20px;block-size:20px}
.link-feld .link-kopie .ic + .ic,.link-feld.kopiert .link-kopie .ic:first-child{display:none}
.link-feld.kopiert .link-kopie .ic + .ic{display:block}
.link-feld:focus-visible{outline:2px solid var(--dome);outline-offset:2px}
/* Teilen-Overlay blendet weich ein und aus statt hereinzufahren (Nutzer 01.10.) */
#blatt .ueberlage,[dir="rtl"] #blatt .ueberlage{animation:ueberlageBlende .2s ease}
#blatt .ueberlage.geht,[dir="rtl"] #blatt .ueberlage.geht{animation:ueberlageBlendeAus .2s ease forwards}
@keyframes ueberlageBlende{from{opacity:0}}
@keyframes ueberlageBlendeAus{to{opacity:0}}
@media (prefers-reduced-motion:reduce){ #blatt .ueberlage,#blatt .ueberlage.geht,[dir="rtl"] #blatt .ueberlage,[dir="rtl"] #blatt .ueberlage.geht{animation:none} }
/* Keine gelben Knöpfe (Nutzer 01.10.): gefüllte Knöpfe in der Kuppel-Farbe – färbt mit den Stimmungen */
:root:not(#_) .knopf.voll{background:var(--dome);color:var(--auf-dome,#0B1430)}
@media (hover:hover){ :root:not(#_) .knopf.voll:hover{background:color-mix(in srgb,var(--dome) 88%,#fff);filter:none} }
/* Vorlader (Nutzer 01.10.): der Dampf ist von Anfang an da (kein Einblenden) – die Kuppel baut sich erst auf, wenn er steht */
:root:not(#_) #vorlader .vl-dampf{opacity:1;animation:none}
#vorlader:not(.dampf-da) polygon{animation-play-state:paused !important}

/* Helles Thema ohne gelbe Knöpfe (Nutzer 01.10.): tonale Knöpfe (Kopfleiste, Menü, Uhr/Wetter) im hellen Kuppel-Blau.
   Nur im hellen Thema – das dunkle bleibt, wie es ist. */
@media (prefers-color-scheme:light){ :root:not(#_):not([data-theme="dark"]){--tonal:#E3E9F7;--tonal-hover:#D3DCF3} }
:root:not(#_)[data-theme="light"]{--tonal:#E3E9F7;--tonal-hover:#D3DCF3}

/* Runden (Nutzer 01.10.): die Beschreibung einer Runde in einer eigenen, leicht abgesetzten Box; Überschrift in der
   Kuppel-Farbe statt Gelb. Grund = ein Hauch der Schriftfarbe – passt auf dem dunklen wie auf dem gelben Blatt. */
:root:not(#_) .runde-titel{color:var(--dome)}
:root:not(#_) .runde-text{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--ink) 7%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}

/* Wetter-Dropdown (Nutzer 01.10.): breiter, damit „am Strandbad Orankesee, Berlin“ in einer Zeile steht; das
   Wetter-Symbol sitzt oben bündig statt mittig. Am Handy (Blatt von unten) darf der Ort weiter umbrechen. */
:root:not(#_) .kopf-pop.wetter-pop{inline-size:min(452px,calc(100vw - 24px))}
:root:not(#_) .wx-jetzt{align-items:flex-start}
:root:not(#_) .wx-jetzt .wx-gross{margin-block-start:-2px}
@media (min-width:520px){ :root:not(#_) .wetter-pop .wx-ort{white-space:nowrap} }

/* Handy (Nutzer 01.10.): ALLE Blätter so hoch wie das Detail-Blatt – fast bis ganz oben, Inhalt beginnt oben
   (Wetter, Uhr, Teilen, QR, Sprache, Gemerkt, Team-Blätter). Rückfragen (.frage) bleiben klein in der Mitte. */
@media (max-width:999px){
  :root:not(#_) #blatt .platte:not(.frage){block-size:calc(100vh - 28px);block-size:calc(100dvh - 28px);max-block-size:none}
  :root:not(#_) #blatt .platte:not(.frage) .platte-inhalt{flex:1 1 auto;min-block-size:0;overflow-y:auto;align-content:start}
}

/* Runden (Nutzer 01.10.): Düfte und Klänge getrennt, je mit kleiner Überschrift */
:root:not(#_) .runde-gruppe{display:grid;gap:8px;min-inline-size:0}
:root:not(#_) .runde-gruppe-titel{margin:0;font-size:13px;line-height:1.3;font-weight:500;letter-spacing:.02em;color:var(--ink-2)}
/* Namen unter den Kreisen ragen nie heraus – lange Wörter („Rahmentrommel“) werden getrennt */
:root:not(#_) .zutaten-gross li{min-inline-size:0}
:root:not(#_) .zutaten-gross li > span{max-inline-size:100%;overflow-wrap:break-word;hyphens:auto}
/* Handy: Düfte & Klänge wie in den kleinen Boxen – kleines Bild links, voller Name rechts, umbrechend statt Kreis-Raster */
@media (max-width:699px){
  :root:not(#_) .zutaten-gross,:root:not(#_) .zutaten-gross.runde-kreise{display:flex;flex-wrap:wrap;gap:8px}
  :root:not(#_) .zutaten-gross li,:root:not(#_) .zutaten-gross.runde-kreise li{display:inline-flex;align-items:center;gap:8px;
    min-block-size:42px;max-inline-size:100%;padding:3px 14px 3px 3px;border-radius:21px;text-align:start;
    font-size:15px;font-weight:500;line-height:1.25;background:var(--tonal)}
  :root:not(#_) .zutaten-gross .zutat-bild,:root:not(#_) .zutaten-gross.runde-kreise .zutat-bild{inline-size:36px;block-size:36px}
  :root:not(#_) .zutaten-gross .zutat-bild.ohne,:root:not(#_) .zutaten-gross.runde-kreise .zutat-bild.ohne{font-size:16px}
  :root:not(#_) .zutaten-gross li > span{hyphens:manual}
}

/* Handy-Kopf (Nutzer 01.10.): kein QR-Symbol (steckt in „Teilen“), großzügige Abstände zwischen den Knöpfen
   (dicke Finger) – kopfEinpassen verkleinert erst das Logo, dann erst die Abstände */
@media (max-width:699px){
  :root:not(#_):not(#_) .leiste .leiste-in [data-tu="qr"]{display:none}
  :root:not(#_):not(#_) .leiste .leiste-in{column-gap:10px}
}
/* „Calma Rituals“ am Handy in EINER Zeile, so groß, wie die Breite mit 20 px Rand erlaubt
   (gemessen: Breite = 5,88 × Schriftgröße bei Google Sans 450, -0,02em) */
@media (max-width:999px){
  :root:not(#_):not(#_) .kopf h1{font-size:min(calc((100vw - 40px) / 5.95),74px);white-space:nowrap}
  :root:not(#_):not(#_) .kopf h1 .z{display:inline}
}
/* Tages-Reiter (öffentlich): der gewählte Tag als Knopf mit runden Ecken – man sieht sofort, wo man ist */
:root:not(#_):not(.team-an) .tage-reiter .reiter[aria-selected="true"]{border-radius:18px;
  background:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 38%,transparent)}
/* Rechner: Kreis-Spalten breit genug für lange Namen („Rahmentrommel“, „Latschenkiefer“) */
@media (min-width:700px){
  :root:not(#_) .zutaten-gross{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  :root:not(#_) .zutaten-gross.runde-kreise{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}
/* „+4“ (Nutzer 01.10.): ein runder Kreis – mindestens so breit wie hoch, Zahl mittig; längere Zahlen werden zur Pille */
:root:not(#_) .zutaten li.zutat-mehr{justify-content:center;min-inline-size:42px;padding-inline:9px}
:root:not(#_) .box.gross .zutaten li.zutat-mehr{min-inline-size:48px}
/* Fuß und Links (Nutzer 01.10.): mittig ausgerichtet */
:root:not(#_) .fuss-zeile{text-align:center}
:root:not(#_) .fuss-links{justify-content:center}
@media (max-width:699px){ :root:not(#_) .calma-text .links{justify-items:center;text-align:center} }

/* Sehr kleine Handys (Nutzer 01.10.): Uhr als Symbol, Wetter nur als Wetter-Symbol (wechselt mit der Wetterlage) –
   runde Knöpfe wie die anderen; die Uhrzeit steht weiter im Vorlese-Text des Knopfs */
@media (max-width:699px){
  :root:not(#_):not(#_) .leiste .leiste-in.eng-symbol .uhr-knopf .ic{display:block}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-symbol .uhr-knopf .uhr-zeit{display:none}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-symbol .wetter-knopf .wx-knopf-t{display:none}
  :root:not(#_):not(#_) .leiste .leiste-in.eng-symbol :is(.uhr-knopf,.wetter-knopf){min-inline-size:44px;padding-inline:0;justify-content:center}
}
/* Teilen-Symbol (Nutzer 01.10.): gefüllte Punkte statt hohler Kreise; in der Kopfleiste etwas kleiner */
:root:not(#_) :is([data-tu="teilen"],[data-tu="aufgussteilen"],[data-tu="nativteilen"],[data-tu="aufgussnativ"]) .ic circle{fill:currentColor}
:root:not(#_) .leiste [data-tu="teilen"] .ic{inline-size:19px;block-size:19px}

/* 320-px-Handys (Nutzer 01.10.: dicke Finger): mit Symbolen statt 3 px lieber 6 px Abstand und ein kleineres Logo
   (Stufennamen live eng-2, im Projekt eng-luft) */
@media (max-width:699px){
  :root:not(#_):not(#_):not(#_) .leiste .leiste-in.eng-symbol:is(.eng-2,.eng-luft){column-gap:6px}
  :root:not(#_):not(#_):not(#_) .leiste .leiste-in.eng-symbol:is(.eng-2,.eng-luft) > .marke .marke-kuppel{inline-size:34px}
}

/* „Rückgängig“ in der Meldung (Nutzer 01.10.: „komisch braun“): Kuppel-Blau statt Braun/Gelb – auf der hellen Meldung
   (dunkles Thema) dunkles Kuppel-Blau #20398A ≈ 9:1, auf der dunklen (helles Thema) helles #A9BCF2 ≈ 7:1 */
:root:not(#_){--meldung-knopf:#A9BCF2}
@media (prefers-color-scheme:dark){ :root:not(#_):not([data-theme="light"]){--meldung-knopf:#20398A} }
:root:not(#_)[data-theme="dark"]{--meldung-knopf:#20398A}

/* Fokus-Rahmen (Nutzer 01.10.: „manchmal gelbe Markierungen“): nur nach Tastatur-Bedienung sichtbar (html.tastatur,
   kern.js) und in Kuppel-Blau statt Gelb – nach dem Schließen eines Blatts kehrt der Fokus zur Box zurück, mit Finger
   oder Maus sieht man davon nichts mehr. Auf Gelb (laufender Aufguss) bleibt der Rahmen dunkel. */
:root:not(#_) :focus-visible{outline-color:var(--dome)}
:root:not(#_) :is(.box.laeuft,#blatt .platte.ist-laeuft) :focus-visible{outline-color:#1A1405}
:root:not(#_):not(.tastatur) :focus-visible{outline:none}
/* Kein versehentliches Markieren (Nutzer 01.10.): Knöpfe, Reiter, Filter, Kopfleiste und die Kästchen im Plan –
   Eingabefelder bleiben markierbar */
:root:not(#_) :is(button,.knopf,.menue-link,[role="tab"],.leiste,.box,.tages-box,.pille,.pillen-paar,.zahl-punkt){
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
:root:not(#_) :is(input,textarea,[contenteditable="true"]){-webkit-user-select:text;user-select:text}
/* … auch der Rahmen, den die Box selbst um ihren fokussierten Knopf zeichnet */
:root:not(#_) .box:has(> .box-auf:focus-visible){outline-color:var(--dome)}
:root:not(#_) .box.laeuft:has(> .box-auf:focus-visible){outline-color:#1A1405}
:root:not(#_):not(.tastatur) .box:has(> .box-auf:focus-visible){outline:none}