/* 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:#EDE7DF; --licht-warm:rgba(254,189,111,.42); --licht-kalt:rgba(72,64,56,.30); --licht-rand:rgba(221,156,73,.16); --grain:.05;
  --glas-fill:color-mix(in srgb,#FDFAF8 60%,transparent); --glas-klein:color-mix(in srgb,#FDFAF8 82%,transparent); --glas-kante:rgba(255,255,255,.85); --glas-ton:60,40,35; --rausch-mix:multiply;
  --bg:var(--stoff);
  --surface:#FDFAF8; --surface-2:#FFE5C8; --surface-3:#FEDCB5; --feld:#FFFFFF;
  --schleier:color-mix(in srgb,#FDFAF8 62%,transparent);
  --ink:#29221A; --ink-2:#544B43; --ink-3:#50473F; --ink-stoff-2:#383028;
  --line:rgba(41,34,26,.13); --line-2:rgba(41,34,26,.34); --line-stoff:rgba(41,34,26,.22);
  --dome:#484038; --dome-past:#A87B46; --wood:#926E45; --naechst:#A96D0D;
  --glut-hoch:#A96D0D; --linie-vorbei:rgba(41,34,26,.42);
  --tonal:#FED09C; --tonal-hover:#FEC37E;
  --sun:#FED09C; --amber:#FEBD6F; --orange:#DD9C49; --ember:#A96D0D;
  --on-fire:#1A130C; --accent-ink:#71512C;
  --primary:#29221A; --on-primary:#FEDFBB;
  --warnung:#B3261E; --on-warnung:#FFFFFF;
  --focus:#29221A; --scrim:rgba(23,16,9,.5);
  --glow:rgba(214,144,51,.42); --kante:inset 0 1px 0 rgba(255,255,255,.75);
  --schatten:var(--kante), 0 1px 2px rgba(41,34,26,.08), 0 8px 22px -12px rgba(41,34,26,.30);
  --stern:#A96D0D; --stern-leer:rgba(41,34,26,.22);
  --meldung-knopf:#FED09C;
  --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:#19120A; --licht-warm:rgba(221,156,73,.22); --licht-kalt:rgba(134,97,51,.30); --licht-rand:rgba(254,189,111,.10); --grain:.07;
    --glas-fill:color-mix(in srgb,#29221A 58%,transparent); --glas-klein:color-mix(in srgb,#29221A 80%,transparent); --glas-kante:rgba(249,240,231,.10); --glas-ton:255,255,255; --rausch-mix:soft-light;
    --surface:#29221A; --surface-2:#1D160F; --surface-3:#352D25; --feld:#1A130C;
    --schleier:color-mix(in srgb,#1D160F 45%,transparent);
    --ink:#F9F0E7; --ink-2:#D7C6B5; --ink-3:#CCC2B8; --ink-stoff-2:#EEE5DA;
    --line:rgba(249,240,231,.12); --line-2:rgba(249,240,231,.30); --line-stoff:rgba(249,240,231,.20);
    --dome:#C59E72; --dome-past:#7F5C30; --wood:#AC895F; --naechst:#DD9C49; --tonal:#3D352C; --tonal-hover:#4D453C;
    --glut-hoch:#FED09C; --linie-vorbei:rgba(249,240,231,.36);
    --accent-ink:#FDC789; --primary:#FED09C; --on-primary:#29221A;
    --warnung:#FFB4AB; --on-warnung:#410002;
    --focus:#FED09C; --scrim:rgba(0,0,0,.6);
    --glow:rgba(214,144,51,.55); --kante:inset 0 1px 0 rgba(249,240,231,.07); --schatten:var(--kante), 0 8px 22px -12px rgba(0,0,0,.6);
    --stern:#FEBD6F; --stern-leer:rgba(249,240,231,.26);
    --meldung-knopf:#71512C;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --stoff:#19120A; --licht-warm:rgba(221,156,73,.22); --licht-kalt:rgba(134,97,51,.30); --licht-rand:rgba(254,189,111,.10); --grain:.07;
    --glas-fill:color-mix(in srgb,#29221A 58%,transparent); --glas-klein:color-mix(in srgb,#29221A 80%,transparent); --glas-kante:rgba(249,240,231,.10); --glas-ton:255,255,255; --rausch-mix:soft-light;
  --surface:#29221A; --surface-2:#1D160F; --surface-3:#352D25; --feld:#1A130C;
  --schleier:color-mix(in srgb,#1D160F 45%,transparent);
  --ink:#F9F0E7; --ink-2:#D7C6B5; --ink-3:#CCC2B8; --ink-stoff-2:#EEE5DA;
  --line:rgba(249,240,231,.12); --line-2:rgba(249,240,231,.30); --line-stoff:rgba(249,240,231,.20);
  --dome:#C59E72; --dome-past:#7F5C30; --wood:#AC895F; --naechst:#DD9C49; --tonal:#3D352C; --tonal-hover:#4D453C;
  --glut-hoch:#FED09C; --linie-vorbei:rgba(249,240,231,.36);
  --accent-ink:#FDC789; --primary:#FED09C; --on-primary:#29221A;
  --warnung:#FFB4AB; --on-warnung:#410002;
  --focus:#FED09C; --scrim:rgba(0,0,0,.6);
  --glow:rgba(214,144,51,.55); --kante:inset 0 1px 0 rgba(249,240,231,.07); --schatten:var(--kante), 0 8px 22px -12px rgba(0,0,0,.6);
  --stern:#FEBD6F; --stern-leer:rgba(249,240,231,.26);
  --meldung-knopf:#71512C;
}

/* ===== 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,#FEDFBB 0%,var(--amber) 42%,var(--orange) 100%);
  box-shadow:0 0 0 1.5px rgba(169,109,13,.5),0 12px 32px -14px rgba(25,18,10,.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(169,109,13,.62),transparent 70%),radial-gradient(70% 60% at 88% 108%,rgba(210,137,30,.55),transparent 70%),
    radial-gradient(60% 50% at 70% -10%,rgba(251,242,232,.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,19,12,.3)}
.box.laeuft .int-flamme{fill:rgba(26,19,12,.18)}
.box.laeuft .int-flamme.voll{fill:var(--on-fire);stroke:none}
.box.laeuft .stueck .f.leise{stroke:rgba(26,19,12,.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,19,12,.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(25,18,10,.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(25,18,10,.35)}
:root .box.naechster{border:1px solid rgba(214,183,148,.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(221,156,73,.55) 0deg,rgba(254,189,111,.10) 70deg,
  rgba(221,156,73,.40) 150deg,rgba(254,189,111,0) 210deg,rgba(221,156,73,.30) 290deg,rgba(221,156,73,.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: #3A332A auf #F2ECE5 = 10,6:1 · Dunkel: #EFE8E1 auf #433B33 = 10,9:1 */
:root .pille.still{background:#F2ECE5;color:#3A332A;padding:6px 11px 6px 8px;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(58,51,42,.18)}
:root .pille.still .ic{inline-size:18px;block-size:18px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pille.still{background:#433B33;color:#EFE8E1;box-shadow:inset 0 0 0 1px rgba(239,232,225,.16)}
}
:root[data-theme="dark"] .pille.still{background:#433B33;color:#EFE8E1;box-shadow:inset 0 0 0 1px rgba(239,232,225,.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 #50473F auf ≈#EEE5DA ≥ 6,8:1 · Dunkel: #CCC2B8 auf ≈#211B13 ≥ 8:1 */
:root .box.vorbei{background:rgba(41,34,26,.10)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .box.vorbei{background:rgba(7,3,1,.42)} }
:root[data-theme="dark"] .box.vorbei{background:rgba(7,3,1,.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 #1A130C auf dem
   tiefsten Glutton (≈#B87A22) ≥ 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(169,109,13,.85),transparent 68%),
    radial-gradient(55% 50% at 100% 35%,rgba(210,137,30,.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(169,109,13,.80),transparent 68%),
    radial-gradient(55% 45% at 12% -5%,rgba(251,242,232,.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(201,165,123,.13)}
}
:root[data-theme="dark"] .tages-box .box:not(.laeuft):not(.vorbei):not(.naechster){background-color:rgba(201,165,123,.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(254,246,236,.95) 0deg,rgba(254,189,111,.15) 55deg,
    rgba(169,109,13,.85) 120deg,rgba(221,156,73,0) 190deg,rgba(221,156,73,.25) 250deg,rgba(254,217,175,.7) 320deg,rgba(254,246,236,.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: #FBF2E9 auf #332B23 ≈ 13:1 · #DCD3C9 auf #484037 ≈ 7:1 */
:root .box.naechster{
  --ink:#FBF2E9; --ink-2:#DCD3C9; --ink-3:#D8BCA1; --line:rgba(249,240,231,.16); --line-2:rgba(249,240,231,.30);
  --tonal:rgba(255,255,255,.14); --tonal-hover:rgba(255,255,255,.22); --dome:#D6B794; --dome-past:#946A36;
  --accent-ink:#FDC789; --surface:#352D25; --focus:#FED09C; --stern-leer:rgba(249,240,231,.26);
  color:var(--ink);
  background:linear-gradient(162deg,#484037 0%,#332B23 55%,#272018 100%);
  border:1px solid rgba(214,183,148,.35);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(249,240,231,.10),0 12px 32px -14px rgba(25,18,10,.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(25,18,10,.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(233,172,100,.34);--licht-kalt:rgba(72,64,56,.24);--grain:.06}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--licht-warm:rgba(221,156,73,.26);--licht-kalt:rgba(134,97,51,.22);--grain:.08} }
:root[data-theme="dark"]{--licht-warm:rgba(221,156,73,.26);--licht-kalt:rgba(134,97,51,.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,#FEDFBB 0%,var(--amber) 42%,var(--orange) 100%);background-blend-mode:multiply,normal}
:root .box.naechster{background:var(--rausch-fein),linear-gradient(162deg,#484037 0%,#332B23 55%,#272018 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:#452800;stroke-width:1.1;stroke-linejoin:round}
:root .box.naechster .int-flamme:not(.voll){fill:rgba(249,240,231,.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:#8C5802;stroke:none}
.box.naechster .stueck .f.naechster{fill:var(--orange);fill-opacity:1;stroke:none}
.box.naechster .stueck .f.leise{stroke:rgba(214,183,148,.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,#FDFAF8 72%,transparent)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--glas-fill:color-mix(in srgb,#29221A 74%,transparent)} }
:root[data-theme="dark"]{--glas-fill:color-mix(in srgb,#29221A 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(233,172,100,.55)}100%{fill:rgba(233,172,100,.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(41,34,26,.10)}
.leg-q.laeuft{background:linear-gradient(162deg,#FEDFBB 0%,var(--amber) 45%,var(--orange) 100%);box-shadow:0 0 0 1px rgba(169,109,13,.55)}
.leg-q.naechster{background:linear-gradient(162deg,#484037,#272018);box-shadow:0 0 0 1px rgba(214,183,148,.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(7,3,1,.42)} :root:not([data-theme="light"]) .leg-q.kommt{background:rgba(201,165,123,.18)} }
:root[data-theme="dark"] .leg-q.vorbei{background:rgba(7,3,1,.42)}
:root[data-theme="dark"] .leg-q.kommt{background:rgba(201,165,123,.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(18,12,6,.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(182,131,69,.30);--licht-kalt:rgba(72,64,56,.22)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--licht-warm:rgba(155,111,58,.28);--licht-kalt:rgba(91,82,73,.22)} }
:root[data-theme="dark"]{--licht-warm:rgba(155,111,58,.28);--licht-kalt:rgba(91,82,73,.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,#FEF7F0 62%,transparent);--glas-klein:color-mix(in srgb,#FEF7F0 84%,transparent);--glas-ton:52,36,16;--band-rand:rgba(106,97,88,.24)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--band-rand:rgba(214,183,148,.22)} }
:root[data-theme="dark"]{--band-rand:rgba(214,183,148,.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 (#DD9C49 auf
   #1A130C ≈ 7,8:1), „Als Nächstes" weiß mit Kuppelblau (#484038 auf #FFFFFF ≈ 10:1)
   + „in 55 Min." dunkles Blau
   (#DDD5CB auf #231D15 ≈ 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:#1A130C;color:#DD9C49;font-weight:500;padding:7px 12px 7px 10px}
.pille.oben-live .punkt{background:#DD9C49}
.pille.wort{background:#FFFFFF;color:#484038;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 #484038, sonst verschwindet die Pille im Grund der
   blauen Box (#484037). Weiß auf #322B22 ≈ 14:1 */
.pille.wort + .pille.bald{background:#322B22;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 #2F271F.
   :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:#F9F0E7; --ink-2:#D7C6B5; --ink-3:#CCC2B8; --ink-stoff-2:#EEE5DA;
  --line:rgba(249,240,231,.12); --line-2:rgba(249,240,231,.30); --line-stoff:rgba(249,240,231,.20);
  --surface:#29221A; --surface-2:#1D160F; --surface-3:#352D25;
  --dome:#C59E72; --dome-past:#7F5C30; --wood:#AC895F; --naechst:#DD9C49;
  --tonal:#3D352C; --tonal-hover:#4D453C; --glut-hoch:#FED09C; --linie-vorbei:rgba(249,240,231,.36);
  --accent-ink:#FDC789; --warnung:#FFB4AB; --focus:#FED09C;
  --glas-ton:255,255,255; --glas-kante:rgba(249,240,231,.10); --rausch-mix:soft-light;
  --stern:#FEBD6F; --stern-leer:rgba(249,240,231,.26); --kante:inset 0 1px 0 rgba(249,240,231,.07);
  color:var(--ink)}
:root:not(#_) .tages-box.heute{background-color:rgba(22,16,8,.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:#2F271F;
  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(214,183,148,.16);
  box-shadow:inset 0 1px 0 rgba(249,240,231,.07),0 6px 18px -12px rgba(13,7,3,.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(214,183,148,.14);color:#F4EDE6;box-shadow:inset 0 0 0 1px rgba(214,183,148,.24)}
/* Legende passend: „vorbei" nur gestrichelt, „kommt" dunkel */
:root:not(#_) .leg-q.vorbei{background:transparent}
:root:not(#_) .leg-q.kommt{background:#2F271F;border:1px solid rgba(214,183,148,.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:#3A332A}
  :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:#F9F0E7; --ink-2:#D7C6B5; --ink-3:#CCC2B8; --ink-stoff-2:#EEE5DA;
  --line:rgba(249,240,231,.12); --line-2:rgba(249,240,231,.30); --line-stoff:rgba(249,240,231,.20);
  --surface:#29221A; --surface-2:#1D160F; --surface-3:#352D25;
  --dome:#C59E72; --dome-past:#7F5C30; --tonal:#3D352C; --tonal-hover:#4D453C; --linie-vorbei:rgba(249,240,231,.36);
  --accent-ink:#FDC789; --warnung:#FFB4AB; --focus:#FED09C; --glas-ton:255,255,255; --glas-kante:rgba(249,240,231,.10);
  --rausch-mix:soft-light; --stern:#FEBD6F; --stern-leer:rgba(249,240,231,.26); color:var(--ink)}
:root:not(#_) .tages-box.kommt{background-color:rgba(15,9,4,.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(214,183,148,.22)}
:root:not(#_) .tages-box.heute{background-color:rgba(15,9,4,.94);border-color:transparent}
:root:not(#_) .tages-box.heute::after{display:block;inset:-1.5px;padding:1.5px;animation:none;
  background:linear-gradient(135deg,#FFDCB4 0%,#FDC078 50%,#EAAC62 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
   #68461C → #704915: ≥ 4,7:1 auch auf der dunkelsten Stelle des Grunds (#D9C3AE,
   Design-Prüfung: #966423/#A57130 lag am Handy bei 2,8:1). */
:root{--heute-verlauf:linear-gradient(90deg,#68461C,#704915)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--heute-verlauf:linear-gradient(90deg,#FFDCB4,#FDC078 60%,#F1B46B)} }
:root[data-theme="dark"]{--heute-verlauf:linear-gradient(90deg,#FFDCB4,#FDC078 60%,#F1B46B)}
: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(249,240,231,.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,19,12,.20);box-shadow:inset 0 1px 2px rgba(26,19,12,.25)}
.box.laeuft .balken > span{background:linear-gradient(90deg,#6B4200 0%,#A96D0D 18%,#D2891E 34%,#FDC078 50%,#D2891E 66%,#A96D0D 82%,#6B4200 100%);
  background-size:200% 100%;box-shadow:0 0 10px rgba(210,137,30,.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,19,12,.20);box-shadow:inset 0 1px 2px rgba(26,19,12,.25)}
.detail-lauf .balken > span{background:linear-gradient(90deg,#6B4200 0%,#A96D0D 18%,#D2891E 34%,#FDC078 50%,#D2891E 66%,#A96D0D 82%,#6B4200 100%);
  background-size:200% 100%;box-shadow:0 0 10px rgba(210,137,30,.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:#29221A}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--ring:#FED09C} }
:root[data-theme="dark"]{--ring:#FED09C}
/* alle Tages-Boxen sind dunkel (auch „Vorbei", Bauplan 24) */
:root .tages-box{--ring:#FED09C}
.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 #7C736A 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 (#0F0904), 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 #F4EDE6 ≈ 12:1 auf #2C241C). Vergangenes
   dunkler: --ink-3 #A89E94 (≥ 6:1 auf dem dunklen Grund), die Pille „vorbei" gedämpft. */
:root:not(#_) .box.kommt,:root:not(#_) .box.ausfall:not(.vorbei){background-color:#2C241C;
  background-image:linear-gradient(170deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%),var(--rausch-fein);
  border-color:rgba(199,153,99,.22)}
@media (hover:hover){
  :root:not(#_) .box.kommt:has(> .box-auf:hover),:root:not(#_) .box.ausfall:not(.vorbei):has(> .box-auf:hover){background-color:#362E26}
}
:root:not(#_) .tages-box.heute,:root:not(#_) .tages-box.kommt,:root:not(#_) .box.kommt,:root:not(#_) .box.ausfall:not(.vorbei){--ink-2:#F4EDE6;--ink-3:#A89E94}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--ink-3:#A89E94} }
:root[data-theme="dark"]{--ink-3:#A89E94}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pille.still{background:#2E271E;color:#C9C0B5;box-shadow:inset 0 0 0 1px rgba(201,192,181,.14)} }
:root[data-theme="dark"] .pille.still,:root:not(#_) .tages-box.heute .pille.still{background:#2E271E;color:#C9C0B5;box-shadow:inset 0 0 0 1px rgba(201,192,181,.14)}
:root:not(#_) .leg-q.kommt{background:#2C241C;border:1px solid rgba(199,153,99,.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 #221B14: Titel #FFE4E1 ≈ 15:1 · Nebentext #F2BDB8 ≈ 10:1 ·
   Pille #FF9A94 auf ≈#393229 ≈ 6,5:1 */
:root:not(#_) .box.ausfall:not(.vorbei){--ink:#FFE4E1;--ink-2:#F2BDB8;--ink-3:#C99A96;--warnung:#FF9A94;
  background-color:#221B14;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:#282119} }
: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:#29221A;
  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 (#484037 → #272018), kommende Boxen
   ein tiefes Nachtblau #1E1810 – hebt sich vom Tages-Grund #0F0904 noch ab
   (Rand + Licht oben). Text #F9F0E7 ≈ 16:1, Nebentext #F4EDE6 ≈ 14:1. */
:root:not(#_) .box.kommt{background-color:#1E1810;border-color:rgba(199,153,99,.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:#29211A} }
:root:not(#_) .leg-q.kommt{background:#1E1810;border:1px solid rgba(199,153,99,.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 #352D25 ≈ 11:1). */
:root:not(#_) .box.kommt{--tonal:#342C24;--tonal-hover:#3F372F}
:root:not(#_) .box.ausfall:not(.vorbei){--tonal:#352D25;--tonal-hover:#3F372F;--dome:#F2A7A2;--dome-past:#9E5A5A}
/* Flammen: auf dunklen Flächen der helle Verlauf ohne dunklen Rand (auf #1E1810
   ≈ 10:1), leere Flammen etwas deutlicher; auf der gelben „Läuft"-Box der tiefe */
:root{--feuer:url(#feuerVerlauf);--feuer-rand:#452800;--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(249,240,231,.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(249,240,231,.26)}
:root .box.laeuft{--feuer:url(#feuerVerlauf);--feuer-rand:#452800;--flamme-leer:rgba(26,19,12,.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 (#484038 auf #F4EDE6 ≈ 8:1); im dunklen Blatt bleibt es weiß */
:root:not(#_) #blatt .pillen-paar > .pille.wort{background:#F4EDE6}
@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(#100A04,#100A04) padding-box,
    linear-gradient(135deg,#FFDCB4 0%,#FDC078 50%,#EAAC62 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(199,153,99,.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 #A89E94 auf #100A04 ≈ 6,3:1). */
:root .tages-box.vorbei{
  color-scheme:dark;
  --ink:#F9F0E7; --ink-2:#F4EDE6; --ink-3:#A89E94; --ink-stoff-2:#EEE5DA;
  --line:rgba(249,240,231,.12); --line-2:rgba(249,240,231,.30); --line-stoff:rgba(249,240,231,.20);
  --surface:#29221A; --surface-2:#1D160F; --surface-3:#352D25;
  --dome:#C59E72; --dome-past:#7F5C30; --tonal:#3D352C; --tonal-hover:#4D453C; --linie-vorbei:rgba(249,240,231,.30);
  --accent-ink:#FDC789; --warnung:#FFB4AB; --focus:#FED09C; --glas-ton:255,255,255; --glas-kante:rgba(249,240,231,.10);
  --rausch-mix:soft-light; --stern:#FEBD6F; --stern-leer:rgba(249,240,231,.26);
  --feuer:url(#feuerHell); --feuer-rand:transparent; --flamme-leer:rgba(249,240,231,.26); color:var(--ink)}
:root:not(#_) .tages-box.vorbei{background-color:rgba(15,9,4,.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:#2E271E;color:#C9C0B5}
/* 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:#100A04;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 #1A130C 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,246,237,.55);box-shadow:inset 0 0 0 1px rgba(26,19,12,.14)}
:root:not(#_) .box.laeuft .balken > span,:root:not(#_) .detail-lauf .balken > span{background:#1A130C;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.
   #F4EDE6 auf #1E1810 ≈ 13:1 */
:root:not(#_) .pille.demnaechst{background:transparent;color:#F4EDE6;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
   #F9F0E7 anders als auf dem dunklen Blau.) Überall im dunklen Thema und auf allen
   dunklen Inseln: #F8F1EA – auf #484037 ≈ 9,9:1, auf #1E1810 ≈ 16:1.
   „Fällt aus" behält sein rötliches Weiß. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--ink:#F8F1EA} }
:root[data-theme="dark"]{--ink:#F8F1EA}
:root:not(#_) .tages-box.heute,:root:not(#_) .tages-box.kommt,:root:not(#_) .tages-box.vorbei,
:root:not(#_) .box.kommt,:root:not(#_) .box.naechster{--ink:#F8F1EA}
/* 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,19,12,.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: #BEB5AA statt #A89E94 – erfüllt die
   Kontrastregel (≈ 7:1 auf #100A04; #A89E94 lag bei 5,5–6,2:1) und ist noch
   dunkler als das frühere #CCC2B8 */
: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:#BEB5AA}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--ink-3:#BEB5AA} }
:root[data-theme="dark"]{--ink-3:#BEB5AA}

/* ===== 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 (#1A130C auf #DD9C49 ≈ 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:#DD9C49;color:#1A130C;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(25,18,10,.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:#1A130C}
: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,19,12,.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(221,156,73,.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,#F4EDE6);color:var(--pk,#F4EDE6)}
: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,#F4EDE6)}
:root:not(#_) [dir="rtl"] .pillen-paar.p-kommt > .pille.dauer{box-shadow:inset -1.5px 0 0 var(--pk,#F4EDE6)}
/* 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(72,44,4,.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,#FEDFBB 0%,var(--amber) 48%,var(--orange) 100%);background-blend-mode:multiply,normal;
  --ink:#1A130C;--ink-2:rgba(26,19,12,.8);--ink-3:rgba(26,19,12,.66);--line:rgba(26,19,12,.16);--line-2:rgba(26,19,12,.3);
  --surface-2:rgba(255,255,255,.4);--dome:#1A130C;--accent-ink:#4B3210;--warnung:#8C1D18;
  --akt-grund:rgba(255,255,255,.42);--akt-hover:rgba(255,255,255,.6);--akt-an:rgba(26,19,12,.14);--akt-an-hover:rgba(26,19,12,.2);--akt-herz:#5D554B;
  color:var(--ink)}
:root:not(#_) #blatt .platte.ist-laeuft .int-flamme.voll{filter:drop-shadow(0 1px 1.5px rgba(72,44,4,.42))}
:root:not(#_) #blatt .platte.ist-laeuft .int-flamme:not(.voll){fill:rgba(26,19,12,.16)}
:root:not(#_) #blatt .platte.ist-laeuft :focus-visible{outline-color:#1A130C}

/* 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:#F8F1EA; --ink-2:#F4EDE6; --ink-3:#BEB5AA; --ink-stoff-2:#EEE5DA;
  --line:rgba(248,241,234,.12); --line-2:rgba(248,241,234,.30); --line-stoff:rgba(248,241,234,.20);
  --surface:#29221A; --surface-2:#1D160F; --surface-3:#352D25;
  --dome:#C59E72; --dome-past:#7F5C30; --tonal:rgba(255,255,255,.10); --tonal-hover:rgba(255,255,255,.16);
  --accent-ink:#FDC789; --warnung:#FFB4AB; --focus:#FED09C; --glas-ton:255,255,255; --rausch-mix:soft-light;
  --stern:#FEBD6F; --stern-leer:rgba(248,241,234,.45);
  /* leere Flammen/Sterne in BEIDEN Themen hell (sonst im hellen Thema ≈ 1:1):
     ≥ 3,1:1 auf #484037, ≥ 3,9:1 auf #272018/#1E1810/#100A04/#221B14 */
  --flamme-leer:rgba(248,241,234,.45);
  --akt-grund:rgba(255,255,255,.10); --akt-hover:rgba(255,255,255,.16); --akt-an:#3A332A; --akt-an-hover:#433B33; --akt-herz:#EDBE86;
  color:var(--ink)}
:root:not(#_) #blatt .platte.detail.ist-naechster{background:var(--rausch-fein),linear-gradient(170deg,#484037 0%,#332B23 55%,#272018 100%);background-blend-mode:soft-light,normal}
:root:not(#_) #blatt .platte.detail.ist-kommt{background:var(--rausch-fein),linear-gradient(#1E1810,#1E1810);background-blend-mode:soft-light,normal}
:root:not(#_) #blatt .platte.detail.ist-vorbei{background:var(--rausch-fein),linear-gradient(#100A04,#100A04);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(#221B14,#221B14);
  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:#2E271E;color:#C9C0B5;box-shadow:inset 0 0 0 1px rgba(201,192,181,.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:#FBF5ED;--akt-herz:#8A6332}
:root:not(#_) #blatt .platte.detail .aktion[aria-pressed="true"]{color:#29221A}
/* … 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:#3A332A;--akt-an-hover:#433B33;--akt-herz:#EDBE86}
:root:not(#_) #blatt .platte.detail .aktion[aria-pressed="true"]{color:#F1EAE3}
:root:not(#_) #blatt .platte.detail.ist-laeuft{--akt-an:#8A6332;--akt-an-hover:#675E55;--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 #C59E72, hell #484038) –
   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:#A87C45;padding-block:0}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not(#_) #code:not(:placeholder-shown){color:#FED09C} }
:root[data-theme="dark"]:not(#_) #code:not(:placeholder-shown){color:#FED09C}
/* 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 (#D7C6B5 –
   auf #1E1810 ≈ 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:#D7C6B5}
/* 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 #696157, dunkel #EDBE86).
   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,#EDBE86);stroke:var(--merk-herz,#EDBE86)}
@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 (#150E07 statt #100A04), 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:#150E07;
  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(#150E07,#150E07) padding-box,
    linear-gradient(135deg,#FFDCB4 0%,#FDC078 50%,#EAAC62 100%) border-box;
  background-blend-mode:normal,soft-light,normal,normal}
/* … doch dunkler (Nutzer: „zu hell"): Grund wieder #100A04, Lichtschein nur noch 4 % */
:root:not(#_) .tages-box.kommt,:root:not(#_) .tages-box.vorbei{background-color:#100A04;
  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(#100A04,#100A04) padding-box,
    linear-gradient(135deg,#FFDCB4 0%,#FDC078 50%,#EAAC62 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:#120B05;--licht-warm:rgba(155,111,58,.22);--licht-kalt:rgba(91,82,73,.17)} }
:root[data-theme="dark"]{--stoff:#120B05;--licht-warm:rgba(155,111,58,.22);--licht-kalt:rgba(91,82,73,.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(199,153,99,.16);box-shadow:none}
:root:not(#_) .tages-box.vorbei{border:1px dashed rgba(199,153,99,.2);box-shadow:none}
:root:not(#_) .tages-box .box.vorbei{border:1px dashed rgba(199,153,99,.16)}
:root:not(#_) .tages-box .box.kommt{border-color:rgba(199,153,99,.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:#0D0703;--licht-warm:rgba(155,111,58,.19);--licht-kalt:rgba(91,82,73,.15)} }
:root[data-theme="dark"]{--stoff:#0D0703;--licht-warm:rgba(155,111,58,.19);--licht-kalt:rgba(91,82,73,.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(199,153,99,.09)}
:root:not(#_) .tages-box.vorbei{border-color:rgba(199,153,99,.12)}
/* … einen Hauch zurück (Nutzer: „ein Tick zu dunkel") */
:root:not(#_) .tages-box.kommt{border-color:rgba(199,153,99,.12)}
:root:not(#_) .tages-box.vorbei{border-color:rgba(199,153,99,.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(169,109,13,.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.): #322B22 statt #3D352C, Schrift #F8F1EA ≈ 13:1 */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .leiste{--tonal:#322B22;--tonal-hover:#3E372E} }
:root[data-theme="dark"] .leiste{--tonal:#322B22;--tonal-hover:#3E372E}
/* 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,#F6C690,#BC7908 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:#8A6332}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--herz-logo:#D59E5D} }
:root[data-theme="dark"]{--herz-logo:#D59E5D}
.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 #BCA692 (≈ 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:#BCA692} }
:root[data-theme="dark"]:not(#_) .kopf-zeile{color:#BCA692}

/* 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:#C2A283 #EDE7DF}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){scrollbar-color:#423A32 #0D0703} }
:root[data-theme="dark"]{scrollbar-color:#423A32 #0D0703}
#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,#F6C690,#BC7908 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 #F4EDE6
   statt #F8F1EA – die Blätter dieses Zustands sind in beiden Themen dunkel */
:root:not(#_) #blatt .platte.detail .pillen-paar.p-kommt{--pk:#F4EDE6}
/* Leere Flamme im hellsten Blatt („Als Nächstes", Grund mit Körnung bis ≈ #544C43) 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(248,241,234,.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 #29221A auf #FED09C ≈ 12:1, dunkel #F8F1EA auf #322B22 ≈ 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 #29221A / #544B43 auf #FEF7F0 ≈ 15:1 / 8,4:1; dunkel #F8F1EA / #D7C6B5 auf
   #251E16 ≈ 15:1 / 10:1. Am Handy steht derselbe Inhalt im Blatt von unten. */
:root{--pop-grund:#FEF7F0;--pop-rand:rgba(72,64,56,.16);--wx-regen:#635A51}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--pop-grund:#251E16;--pop-rand:rgba(214,183,148,.22);--wx-regen:#DFB88B} }
:root[data-theme="dark"]{--pop-grund:#251E16;--pop-rand:rgba(214,183,148,.22);--wx-regen:#DFB88B}
.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(16,10,4,.6),0 2px 8px rgba(16,10,4,.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:#1A130C;--ink-2:rgba(26,19,12,.8);
  background:var(--rausch-fein),linear-gradient(162deg,#FEDFBB 0%,var(--amber) 42%,var(--orange) 100%);background-blend-mode:multiply,normal}
.uk.naechster{--ink:#F8F1EA;--ink-2:#D7C6B5;--pk:#F4EDE6;
  background:var(--rausch-fein),linear-gradient(162deg,#484037 0%,#332B23 55%,#272018 100%);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(214,183,148,.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:#F8F1EA;--ink-2:#D7C6B5;--pk:#F4EDE6;
  background:var(--rausch-fein),linear-gradient(#1E1810,#1E1810);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(199,153,99,.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:#F4EDE6}
@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 #635A51 auf #FEF7F0 ≈ 6,6:1, dunkel #DFB88B auf #251E16 ≈ 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,#A87941,#F3B56B)}
[dir="rtl"] .wx-balken i{background:linear-gradient(270deg,#A87941,#F3B56B)}
.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:#1A130C;--ink-2:rgba(26,19,12,.8);color:var(--ink);
  background:var(--rausch-fein),linear-gradient(162deg,#FEDFBB 0%,var(--amber) 50%,var(--orange) 100%);background-blend-mode:multiply,normal}
.wx-std.laeuft .wx-r.viel{color:#1A130C}
.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 (#F8F1EA auf ≈ #171009 ≈ 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:#F8F1EA;text-align:center;text-wrap:balance;pointer-events:none;
  background:rgba(23,16,9,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(214,183,148,.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(23,16,9,.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: #C59E72 mit #1C150E ≈ 7:1, hell: #484038 mit Weiß ≈ 10:1 */
:root{--auf-dome:#FFFFFF}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--auf-dome:#1C150E} }
:root[data-theme="dark"]{--auf-dome:#1C150E}
: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%,#FFFFFF)} }
: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,#F4EDE6) 42%,transparent)}
:root:not(#_) .pillen-paar.p-kommt > .pille.dauer{box-shadow:inset 1.5px 0 0 color-mix(in oklab,var(--pk,#F4EDE6) 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,#F4EDE6) 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,#1C150E)}
@media (hover:hover){ :root:not(#_) .knopf.voll:hover{background:color-mix(in srgb,var(--dome) 88%,#FFFFFF);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:#EFE8E1;--tonal-hover:#E3DAD1} }
:root:not(#_)[data-theme="light"]{--tonal:#EFE8E1;--tonal-hover:#E3DAD1}

/* 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.): am HANDY mittig ausgerichtet – am Rechner links (© links, Links rechts) */
@media (max-width:699px){ :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}

/* ===== Kategorie-Symbole statt Foto (BAUPLAN 43.6, kern.js katSymbol/zutatKreis) =====
   Linien in currentColor = Farbe des Kreises (.zutat-bild.ohne: Kuppel-Farbe --dome; Läuft-Box: --on-fire;
   gelbes Blatt: --dome dunkel). Die Strichstärke kommt als Attribut aus kern.js (passend zur Kreisgröße) –
   hier deshalb bewusst KEIN stroke-width. Symbol = 56 % des Kreises. */
.kat-ic{inline-size:22px;block-size:22px;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
:root:not(#_) .zutat-bild.ohne > .kat-ic{inline-size:56%;block-size:56%}

/* 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}
}
/* Im GELBEN Blatt (laufender Aufguss) blieb der Kreis dunkel (--surface des dunklen Themas) und das dunkle Symbol
   darin unsichtbar → wie die Chips der Läuft-Box: heller Kreis, dunkle Linie (#1A130C auf ~#F8EFE6 ≈ 16:1). */
:root:not(#_) #blatt .platte.ist-laeuft .zutat-bild.ohne{background:rgba(255,255,255,.6);color:#1A130C;box-shadow:inset 0 0 0 1.5px rgba(26,19,12,.3)}
/* Handy, gelbes Blatt: die Düfte-/Klänge-Pillen hatten --tonal des dunklen Themas (dunkle Pille, dunkle Schrift) →
   heller Grund wie die Chips der Läuft-Box (#1A130C auf Weiß .45 über Gelb ≈ 14:1) */
@media (max-width:699px){ :root:not(#_) #blatt .platte.ist-laeuft .zutaten-gross li{background:rgba(255,255,255,.45)} }

/* „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 #484038 ≈ 9:1, auf der dunklen (helles Thema) helles #D6B794 ≈ 7:1 */
:root:not(#_){--meldung-knopf:#D6B794}
@media (prefers-color-scheme:dark){ :root:not(#_):not([data-theme="light"]){--meldung-knopf:#484038} }
:root:not(#_)[data-theme="dark"]{--meldung-knopf:#484038}

/* 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:#1A130C}
: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:#1A130C}
:root:not(#_):not(.tastatur) .box:has(> .box-auf:focus-visible){outline:none}

/* ===== Blattwechsel (BAUPLAN 42.1 + 42.5, Nutzer 01.10.: „Wenn ich zwischen den Fenstern in der Seitenleiste
   wechsle, blendet sich immer kurz etwas ein und der Hintergrund lädt neu"). Wechsel = ein Blatt war schon offen
   (Slot → Aufguss → zurück, Zutat → Foto, Uhr → Aufguss …; kern.js blattZeichnen setzt #blatt.wechsel):
   Abdunklung, Rahmen und Dampf bleiben stehen – kein neues Hereingleiten, der Schleier startet nicht neu
   (vorher fiel er ~170 ms auf 0: neben dem Blatt +13…15 Helligkeitsstufen). Das alte Blatt bleibt (bis das neue ganz da ist) als
   stilles Abbild darunter liegen (.platte-geist: tot, keine Animation), das neue blendet darüber ein (.2 s, nur
   Deckkraft, keine Bewegung) – echtes Überblenden, auch zwischen verschiedenen Blattfarben; andere Lage
   (Seitenblatt ↔ Rückfrage) → das Abbild blendet dabei aus. Ruhige Bewegung: alles sofort. ===== */
:root:not(#_) #blatt.wechsel .schleier{animation:none}
:root:not(#_) #blatt.wechsel .platte,:root:not(#_) #blatt.wechsel .platte-inhalt.blendet-ein{animation:blattWechselEin .2s ease-out}
@keyframes blattWechselEin{from{opacity:0}}
#blatt .platte.platte-geist{z-index:40;pointer-events:none}
#blatt .platte.platte-geist,#blatt .platte.platte-geist *{animation:none!important;transition:none!important}
/* sein Schatten geht im selben Takt, in dem der des neuen Blatts kommt – sonst lag er kurz doppelt (Handy: der
   Streifen über dem Blatt wurde dunkler und sprang beim Entfernen des Abbilds zurück) */
#blatt .platte.platte-geist{animation:geistSchatten .2s ease-out forwards!important}
@keyframes geistSchatten{to{box-shadow:none}}
/* der alte Inhalt geht schneller (.14 s) als der neue kommt – in der Mitte liegt kaum Text über Text */
#blatt .platte.platte-geist > *{animation:schleierWeg .14s ease-in forwards!important}
#blatt .platte.platte-geist.weg{animation:schleierWeg .2s ease-in forwards!important}
@media (prefers-reduced-motion:reduce){ :root:not(#_) #blatt.wechsel .platte,:root:not(#_) #blatt.wechsel .platte-inhalt{animation:none} #blatt .platte.platte-geist{display:none} }
@media print{ #blatt .platte.platte-geist{display:none} }
/* Vorlader im Blatt nur noch, wenn wirklich geladen wird (42.5): erst nach 300 ms, dann LANGSAM ANLAUFEND ein
   (ease-in .45 s – kommen die Daten nach 450 ms, ist sie erst ≈ 10 % da, statt halb aufzuglimmen); sobald alles
   da ist, aus – war sie erst halb da, in .12 s (.kurz, kern.js laderWeg), sonst weich (.3 s). Der Inhalt kommt
   gleichzeitig. */
:root:not(#_) .blatt-lader{transition:opacity .3s ease}
:root:not(#_) .blatt-lader.da{transition:opacity .45s cubic-bezier(.55,0,.9,.45)}
:root:not(#_) .blatt-lader.kurz{transition:opacity .12s linear}
/* Uhr/Wetter: Dropdown bzw. Handy-Blatt gehen erst nach 300 ms Warten auf – dann ist die Kuppel gleich da (.2 s)
   statt eines leeren Kastens, der erst langsam eine Kuppel bekommt */
:root:not(#_) .blatt-lader.gleich.da{transition:opacity .2s ease-out}
/* Uhr/Wetter (BAUPLAN 42.4): dauert das frische Laden länger als 300 ms, geht das Dropdown mit einer kleinen Kuppel
   auf – der letzte Stand liegt unsichtbar darunter und hält den Platz (nichts springt); danach weich aus.
   Ging das Laden schief: die letzten Daten mit einem dezenten Hinweis (kp-hinweis, Nebentextfarbe). */
:root:not(#_) .kopf-pop.laedt{min-block-size:180px}
:root:not(#_) .kopf-pop.laedt > :not(.kopf-lader){visibility:hidden}
:root:not(#_) .blatt-lader.kopf-lader{position:absolute;inset:0;z-index:2;padding:0;border-radius:inherit}
/* im Dropdown wie im Blatt: Kuppel (104 px) + Schriftzug, Linie kräftiger als die feine Logo-Linie – die kleine
   blasse 72-px-Kuppel allein wirkte im 440 px hohen Dropdown wie leer */
:root:not(#_) .blatt-lader.kopf-lader svg{inline-size:104px}
:root:not(#_) .blatt-lader.kopf-lader polygon{stroke:color-mix(in srgb,var(--dome) 50%,transparent);stroke-width:1.8}
:root:not(#_) .blatt-lader.kopf-lader .vl-name{font-size:19px}
:root:not(#_) .kp-hinweis{display:flex;align-items:flex-start;gap:6px;margin:0 0 12px;font-size:14px;line-height:1.45;color:var(--ink-2)}
:root:not(#_) .kp-hinweis .ic{flex:none;inline-size:16px;block-size:16px;margin-block-start:2px}

/* ===== BAUPLAN 66: Blatt bis an den Rand ===== */
html:has(> body.blatt-offen){scrollbar-gutter:auto}
body.blatt-offen{padding-inline-end:var(--sbw,0px)}
/* ===== Ende BAUPLAN 66 ===== */

/* ===== BAUPLAN 68: Runden – Düfte und Klänge in einer Reihe ===== */
/* Nutzer 01.10. ~19:30: „erstmal in einer Reihe, erst ab 4 oder 5 auf die 2. Zeile – so sparen wir Platz“. Die Gruppen einer Runde
   (Düfte & Kräuter, Klänge & Instrumente) stehen nebeneinander und brechen erst um, wenn die Zeile voll ist; die Einträge behalten
   ihre natürliche Breite (Bildkreis bzw. Bild-Kapsel). Titel und Text der Runde bleiben volle Breite. */
:root:not(#_):not(#_) .runde{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:24px;row-gap:10px}
:root:not(#_):not(#_) .runde > :is(.runde-titel,.runde-text){flex:1 0 100%}
:root:not(#_):not(#_) .runde > .runde-gruppe{flex:0 1 auto;min-inline-size:0;max-inline-size:100%}
:root:not(#_):not(#_) .runde-gruppe .zutaten-gross.runde-kreise{display:flex;flex-wrap:wrap}
@media (max-width:420px){ :root:not(#_):not(#_) .runde{column-gap:16px} }
/* ===== Ende BAUPLAN 68 ===== */

/* ===== BAUPLAN 69: Stichpunkte, fett, Links ===== */
/* Formatierte Team-Texte (kern.js textHtml): Liste mit Punkten, fett 600, Links unterstrichen in der
   Akzentfarbe (hell #71512C, dunkel #FDC789, gelbes Läuft-Blatt #4B3210 – je ≥ 4,5:1). In Karten/Boxen
   bleibt das Zeilenraster (1,5em) ohne Zusatzabstände – das Kürzen mit „Weiterlesen“ misst in Zeilen. */
:root:not(#_) .md{overflow-wrap:anywhere}   /* auch sehr lange Wörter/Adressen brechen um – nichts läuft seitlich raus */
:root:not(#_) .md-liste{margin:0;padding-inline-start:1.2em;list-style:disc}
:root:not(#_) .md-liste > li{margin:0;padding-inline-start:.15em}
:root:not(#_) .md-liste > li::marker{color:currentColor}
/* Text in Links-nach-rechts-Schrift auf einer RTL-Seite steht rechtsbündig (basis.css) – der Punkt rückt dann
   direkt vor den Text, statt ganz links zu stehen */
[dir="rtl"] :is(#root,#blatt) .md[dir="ltr"] .md-liste{list-style-position:inside;padding-inline-start:0}
:root:not(#_) .md strong{font-weight:600}
:root:not(#_) .md :is(.md-absatz,.md-liste){margin:0}
:root:not(#_) :is(.detail-text,.runde-text).md > :is(.md-absatz,.md-liste) + :is(.md-absatz,.md-liste){margin-block-start:.6em}
:root:not(#_) :is(.detail-text,.runde-text).md .md-liste > li + li{margin-block-start:.2em}
:root:not(#_) a.md-link{color:var(--accent-ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;overflow-wrap:anywhere;border-radius:3px}
:root:not(#_) a.md-link:hover{text-decoration-thickness:2px}
:root:not(#_) .md-link-text{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb,currentColor 50%,transparent);overflow-wrap:anywhere}
@media print{ :root:not(#_) a.md-link{color:inherit} }
/* ===== Ende BAUPLAN 69 ===== */

/* ===== BAUPLAN 65: Intensität hinter der Uhrzeit ===== */
/* „13:30 – 13:40 │ 🔥🔥🔥🔥“ (Nutzer 01.10. ~19:00): die 4 Flammen direkt hinter der Uhrzeit, dazwischen ein feiner
   senkrechter Strich in der Farbe des Bis-Strichs (wie der Trenner in den Pillen: 1,5 px, gedämpft). Alles in em der
   Uhrzeit – wächst mit ihr mit (auch mit 46 Handy-Schrift). kern.js zeitFlammen / zeitZeileEinpassen. */
/* Grundlinie statt Zeilenmitte (gilt für jede Schrift): Strich und Flammen stehen auf der Grundlinie der Ziffern und
   reichen etwa so hoch wie sie (Flammenkörper = 77 % des Symbols, unten 10 % Luft – daher die kleine Verschiebung) */
:root:not(#_):not(#_) .box .zeit > .zi-strich{display:block;flex:none;align-self:baseline;inline-size:1.5px;block-size:.84em;translate:0 .03em;
  margin-block:-.1em 0;margin-inline:.48em .3em;background:currentColor;opacity:.5;border-radius:1px}
/* margin-block-start negativ: die Flammen machen die Zeile nicht höher – Namen benachbarter Boxen bleiben auf einer Linie */
:root:not(#_):not(#_) .box .zeit > .zeit-int{display:inline-flex;flex:none;align-items:center;align-self:baseline;translate:0 .1em;gap:0;margin:-.3em 0 0;
  font-size:inherit;font-weight:inherit;line-height:1;white-space:nowrap;cursor:pointer}
:root:not(#_):not(#_) .box .zeit > .zeit-int .int-flamme{inline-size:1em;block-size:1em}
:root:not(#_):not(#_) .box .zeit > .zeit-int .int-flamme + .int-flamme{margin-inline-start:-.1em}
/* Passt die Zeile nicht (kern.js misst): erst die Flammen etwas kleiner und der Strich knapper (zz-klein, die Zeile bleibt
   „Zeit │ Flammen“), dann der Tag in eine eigene Zeile, zuletzt die Flammen unter die Uhrzeit – der Strich wird dort zum
   unsichtbaren Zeilenumbruch, Flammen bleiben so breit wie sie sind */
:root:not(#_):not(#_) .box .zeit.zz-klein > .zi-strich{margin-inline:.36em .22em}
:root:not(#_):not(#_) .box .zeit.zz-klein > .zeit-int .int-flamme{inline-size:.8em;block-size:.8em}
:root:not(#_):not(#_) .box .zeit:is(.zz-tag,.zz-flammen){flex-wrap:wrap;row-gap:0}
:root:not(#_):not(#_) .box .zeit.zz-tag > .zeit-tag{flex-basis:100%;margin-block-end:6px}
:root:not(#_):not(#_) .box .zeit.zz-tag .zeit-punkt{display:none}
:root:not(#_):not(#_) .box .zeit.zz-flammen > .zi-strich{flex-basis:100%;block-size:0;margin:0;opacity:0}
:root:not(#_):not(#_) .box .zeit.zz-flammen > .zeit-int{margin-block-start:8px}
/* Kuppel oben in der Ecke: dann braucht die Uhrzeit-Zeile ihren Platz rechts nicht (nur neben der Kuppel, .kuppel-tief) */
:root:not(#_):not(#_) .box:not(.kuppel-tief) > .box-status:not(:empty) + .box-kopf{padding-inline-end:0}
/* Schmale Boxen – Handy unter 360 px (Befund 57c: „Morgen · 13:30 – 13:40“ lief unter die Kuppel) und die drei Spalten
   bei 1000–1199 px: die Kuppel etwas kleiner (40 statt 52 px) und wieder oben in der Ecke, die Pillen halten ihr den
   Platz frei. Passt das Paar nicht daneben, rückt sie wie sonst neben die Uhrzeit (kuppelEinpassen), die Zeile hält ihr
   dann 50 px frei (Kuppel + 10 px Luft wie sonst 52 + 10) – „Zeit │ 🔥🔥🔥🔥“ braucht 188 px bei 17 px Schrift; wird es knapper
   (1000–1023 px), nimmt kern.js die kleineren Flammen (zz-klein). Mitten wie gemessen: Pillen-Zeile bzw. Uhrzeit. */
@media (max-width:359px), (min-width:1000px) and (max-width:1199px){
  :root:not(#_):not(#_) .box:not(.gross) > .stueck{inset-block-start:18px;inline-size:40px}
  :root:not(#_):not(#_) .box:not(.gross) > .box-status{padding-inline-end:44px}
  :root:not(#_):not(#_) .box.kuppel-tief:not(.gross) > .box-status{padding-inline-end:0}
  :root:not(#_):not(#_) .box.kuppel-tief:not(.gross) > .stueck{inset-block-start:63px}
  :root:not(#_):not(#_) .box.kuppel-tief:not(.gross) > .box-kopf{padding-inline-end:50px}
}
@media (max-width:359px){
  :root:not(#_):not(#_) .box.gross > .stueck{inset-block-start:20px;inline-size:44px}
  :root:not(#_):not(#_) .box.gross > .box-status{padding-inline-end:48px}
  :root:not(#_):not(#_) .box.gross.kuppel-tief > .box-status{padding-inline-end:0}
  :root:not(#_):not(#_) .box.gross.kuppel-tief > .stueck{inset-block-start:69px}
  :root:not(#_):not(#_) .box.gross.kuppel-tief > .box-kopf{padding-inline-end:54px}
  /* reicht auch das nicht (längere Pillen: „Happening now“ en/el, „Próximamente“ es), setzt kern.js zz-kuppel: die Kuppel
     neben der Uhrzeit noch etwas kleiner, Mitte bleibt auf der Uhrzeit, 10 px Luft */
  :root:not(#_):not(#_) .box.kuppel-tief.zz-kuppel:not(.gross) > .stueck{inline-size:32px;inset-block-start:65px}
  :root:not(#_):not(#_) .box.kuppel-tief.zz-kuppel:not(.gross) > .box-kopf{padding-inline-end:42px}
  :root:not(#_):not(#_) .box.gross.kuppel-tief.zz-kuppel > .stueck{inline-size:34px;inset-block-start:68px}
  :root:not(#_):not(#_) .box.gross.kuppel-tief.zz-kuppel > .box-kopf{padding-inline-end:44px}
}
/* Detail-Blatt (öffentlich): dieselbe Anordnung in der Zeit-Zeile über dem Titel – Zeit, Strich und Flammen bleiben
   zusammen, umbrechen darf nur zwischen Tag und Zeit. Der Trenner „·“ steht vorn in der Zeit-Gruppe und liegt nach einem
   Umbruch links außerhalb der Zeile (abgeschnitten) – kein „·“ am Zeilenanfang. */
:root:not(#_):not(#_) .platte-kopf .auge:has(> .auge-zeit){display:flex;flex-wrap:wrap;align-items:center;column-gap:1em;overflow:hidden}
:root:not(#_):not(#_) .platte-kopf .auge-zeit{display:inline-flex;align-items:center;white-space:nowrap;margin-inline-start:-1em}
:root:not(#_):not(#_) .platte-kopf .auge-punkt{display:inline-block;flex:none;inline-size:1em;text-align:center}
:root:not(#_):not(#_) .platte-kopf .auge-zeit > .zi-strich{display:block;flex:none;inline-size:1.5px;block-size:.85em;margin:0 .45em 0 .55em;
  background:currentColor;opacity:.5;border-radius:1px}
:root:not(#_):not(#_) .platte-kopf .auge-zeit > .zeit-int{display:inline-flex;align-items:center;gap:0;margin:0;font-size:inherit;color:inherit}
:root:not(#_):not(#_) .platte-kopf .auge-zeit > .zeit-int .int-flamme{inline-size:1.15em;block-size:1.15em}
:root:not(#_):not(#_) .platte-kopf .auge-zeit > .zeit-int .int-flamme + .int-flamme{margin-inline-start:-.1em}
/* ===== Ende BAUPLAN 65 ===== */

/* ===== BAUPLAN 74: Weiterlesen mit Punkten ===== */
/* Nutzer 02.10. ~00:05: „Weiterlesen mit … bitte am Ende“ – in allen Sprachen gleich, öffentlich + Team */
:root:not(#_):not(#_) .box .mehr-hinweis::after{content:"\00a0…"}
/* ===== Ende BAUPLAN 74 ===== */

/* ===== BEGINN BAUPLAN 55 · Dampf-Hülle (Entwurf Variante B „Umhüllender Nebel“) =====
   Die Flächen legt kern.js („Dampf-Hülle“) in Seitenkoordinaten um die LAUFENDE Box: hinter allem
   (wie #dampf), Klicks gehen durch, nie im Druck. Keine Farbe hier – die kommt aus stimmungFarbe/--dome. */
.dampf-huelle{position:absolute;z-index:-1;display:block;pointer-events:none}
@media print{ .dampf-huelle{display:none} }
/* Im Plan liegt die Tages-Spalte mit eigenem Grund darüber – dort die Hülle über dem Spaltengrund, aber unter den Karten */
.dampf-huelle.im-plan{z-index:1}
:root:not(#_) :is(.tages-box .box,.tages-box .vorbei-gruppe,.tages-box .springer-knopf){position:relative;z-index:2}
/* ===== ENDE BAUPLAN 55 · Dampf-Hülle ===== */

/* ===== BAUPLAN 82: Uhr-Karten wie der Plan ===== */
:root:not(#_) .uk{position:relative}
:root:not(#_) .uk > .stueck{inset-block-start:14px;inset-inline-end:16px;inline-size:46px}
:root:not(#_) .uk-pillen{padding-inline-end:58px}
:root:not(#_):not(#_) .uk-zeit > .zi-strich{display:block;flex:none;align-self:center;inline-size:1.5px;block-size:.85em;margin:0 .42em 0 .5em;
  background:currentColor;opacity:.5;border-radius:1px}
:root:not(#_):not(#_) .uk-zeit > .zeit-int{display:inline-flex;flex:none;align-items:center;align-self:center;gap:0;margin:0;font-size:inherit;line-height:1;white-space:nowrap}
:root:not(#_):not(#_) .uk-zeit > .zeit-int .int-flamme{inline-size:1.05em;block-size:1.05em}
:root:not(#_):not(#_) .uk-zeit > .zeit-int .int-flamme + .int-flamme{margin-inline-start:-.1em}
/* „Läuft gerade“ (orange): Flammen und Kuppel dunkel wie in der großen laufenden Box (Hex-Werte färbt die Stimmung mit um) */
:root:not(#_):not(#_):not(#_) .uk.laeuft .int-flamme.voll{fill:color-mix(in srgb,#8C5802 60%,#1A130C);stroke:none;filter:drop-shadow(0 1px 1.5px rgba(72,44,4,.42))}
:root:not(#_):not(#_):not(#_) .uk.laeuft .int-flamme:not(.voll){fill:rgba(26,19,12,.16)}
:root:not(#_):not(#_):not(#_) .uk.laeuft .stueck .f.laeuft{fill:#8C5802;stroke:none}
:root:not(#_):not(#_):not(#_) .uk.laeuft .stueck .f.leise{stroke:rgba(26,19,12,.3)}
/* ===== Ende BAUPLAN 82 ===== */

/* ===== BAUPLAN 120: Calma Rituals zweizeilig am Handy ===== */  /* BAUPLAN 130: wieder einzeilig, etwas kleiner */
@media (max-width:999px){
  :root:not(#_):not(#_):not(#_) .kopf h1{font-size:min(calc((100vw - 40px) / 7),56px);line-height:1.05;white-space:nowrap;letter-spacing:-.02em}
  :root:not(#_):not(#_):not(#_) .kopf h1 .z{display:inline}
}
/* ===== Ende BAUPLAN 120 ===== */
/* ===== BAUPLAN 176: beim Schließen bleibt der Zustand „Blatt offen“ (kein Scrollbalken), bis das Blatt hinausgeglitten ist – sonst kam der
   Balken mitten in der Animation zurück, der Bildschirm wurde schmaler und das Blatt sprang ein Stück nach links (Nutzer) ===== */
html:has(#blatt.geht){scrollbar-gutter:auto}
body:has(#blatt.geht){overflow:hidden;padding-inline-end:var(--sbw,0px)}
/* ===== Ende BAUPLAN 176 ===== */
/* ===== BAUPLAN 175: Foto vor dem Namen bei „mit …“ (öffentlich und im Team) – rund, so hoch wie die Schrift, ändert die Zeilenhöhe nicht ===== */
.mit-bild175{white-space:nowrap}
.wer-bild175{display:inline-block;inline-size:1.45em;block-size:1.45em;border-radius:50%;object-fit:cover;vertical-align:middle;
  margin-block:-.3em;margin-inline-end:.35em;box-shadow:0 0 0 1.5px color-mix(in srgb,currentColor 22%,transparent)}
/* ===== Ende BAUPLAN 175 ===== */
/* ===== BAUPLAN 184: Profil-Video im Kreis (über dem Standbild) + kleiner ▶-Hinweis ===== */
[data-video]{position:relative;cursor:pointer}
.video184{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;border-radius:inherit;pointer-events:none}
[data-video]::after{content:"";position:absolute;inset-block-end:4%;inset-inline-end:4%;inline-size:24%;block-size:24%;min-inline-size:18px;min-block-size:18px;max-inline-size:30px;max-block-size:30px;
  border-radius:50%;background:rgba(18,11,5,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.2v9.6l7.6-4.8z' fill='%23fff'/%3E%3C/svg%3E") center/62% no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:opacity .2s;pointer-events:none}
[data-video].spielt184::after{opacity:0}
/* ===== Ende BAUPLAN 184 ===== */
/* ===== BAUPLAN 186: kein ▶ mehr auf Kreisen mit Video (läuft einmal von selbst, dann Maus drüber / antippen); weiches Ausblenden am Ende ===== */
[data-video]::after{content:none}
.video184{transition:opacity .45s ease}
.video184.aus186{opacity:0}
/* ===== Ende BAUPLAN 186 ===== */
/* ===== BAUPLAN 206: Temperatur-Chart ===== */
.kl206{margin-block:14px 6px}
.kl206[hidden]{display:none}
.kl206-fig{margin:0;display:grid;gap:8px;padding:14px 14px 8px;border-radius:18px;background:color-mix(in srgb,currentColor 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 12%,transparent)}
.kl206-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.kl206-kopf b{font-size:16px;font-weight:600}
.kl206-kopf small{font-size:13px;opacity:.7}
.kl206-svg{display:block;max-inline-size:100%;block-size:auto;touch-action:pan-y;overflow:visible}
.kl206-band{fill:color-mix(in srgb,currentColor 9%,transparent)}
.kl206-band-t,.kl206-x,.kl206-y{fill:currentColor;opacity:.65;font-size:12px;font-family:inherit}
.kl206-band-t{opacity:.85;font-weight:600}
.kl206-gitter{stroke:currentColor;opacity:.1;stroke-width:1;vector-effect:non-scaling-stroke}
.kl206-linie{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kl206-top{fill:#BC7908;stroke:#FFFFFF;stroke-width:1.5;vector-effect:non-scaling-stroke}
.kl206-top-t{fill:currentColor;font-size:13px;font-weight:700;font-family:inherit}
.kl206-zeiger line{stroke:currentColor;opacity:.4;stroke-width:1;vector-effect:non-scaling-stroke}
.kl206-zeiger circle{fill:#F6C690;stroke:#FFFFFF;stroke-width:1.5;vector-effect:non-scaling-stroke}
.kl206-zeiger text{fill:currentColor;font-size:12px;font-weight:600;font-family:inherit;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:3px}
/* ===== Ende BAUPLAN 206 ===== */
/* ===== BAUPLAN 207: Team-Wert als Linie (ohne Fühler-Messung) ===== */
.kl207-wert{stroke:#BC7908;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 7}
/* ===== Ende BAUPLAN 207 ===== */
/* ===== BAUPLAN 236: Tooltips ohne Pfeil, oben wenn unten kein Platz; Bedien-Elemente nicht markierbar ===== */
.kopf-tip::before{content:none}
.kopf-tip.oben236{translate:0 4px}
.kopf-tip.oben236.an{translate:0 0}
html.tz228 .kopf-tip{font-size:calc(14px * var(--tz228,1));padding:calc(8px * var(--tz228,1)) calc(12px * var(--tz228,1));border-radius:calc(12px * var(--tz228,1));
  max-inline-size:min(calc(300px * var(--tz228,1)),calc(100vw - 16px))}
:is(button,[role="button"],.knopf,.kopf-tip,.pille,nav,label,legend,summary,.leiste,#leiste,.stil-menue,.pf-blase,.reiter-knopf,.filter-knopf){-webkit-user-select:none;user-select:none}
:is(input,textarea,select,[contenteditable="true"]){-webkit-user-select:text;user-select:text}
/* ===== Ende BAUPLAN 236 ===== */
/* ===== BAUPLAN 237: Umbrüche; Viewport-Maße in gezoomten Bereichen (Team immer, öffentlich bei ≠ 100 %) ===== */
:is(p,li,dd,dt,figcaption,small,blockquote,label){text-wrap:pretty}
:is(h1,h2,h3,h4){text-wrap:balance}
/* zoom vergrößert auch vh/vw – die Blätter sollen trotzdem genau ins Bild passen */
html.tz228:not(#_) #blatt .platte.frage{max-block-size:calc(92dvh / var(--tz228,1))}
@media (max-width:999px){
  html.tz228:not(#_):not(#_) #blatt .platte:not(.frage),html.tz228:not(#_):not(#_) #blatt .platte.detail{block-size:calc(100dvh / var(--tz228,1) - 28px)}
}
html.tz228:not(#_) .kopf-pop{inline-size:min(392px,calc(100vw / var(--tz228,1) - 24px));max-block-size:min(calc(100vh / var(--tz228,1) - 110px),700px)}
html.tz228:not(#_):not(#_) .kopf-pop.wetter-pop{inline-size:min(452px,calc(100vw / var(--tz228,1) - 24px))}
html.tz228:not(#_) .merk-pop{inline-size:min(380px,calc(100vw / var(--tz228,1) - 32px));max-block-size:min(calc(70vh / var(--tz228,1)),560px)}
/* ===== Ende BAUPLAN 237 ===== */
/* ===== BAUPLAN 334: Sauna-Symbole (Mesh wie die Kuppel) – feine Linien wie das Logo in der Schriftfarbe (Team weiß, öffentlich die
   Seitenfarbe), Helligkeit je Fläche über --o; keine Hitze, kein Glow. Größe über font-size bzw. inline-size am Einsatzort. ===== */
.sym334{display:inline-block;inline-size:1.6em;block-size:auto;aspect-ratio:208 / 128;overflow:visible;flex-shrink:0;vertical-align:baseline}
.sym334 .f{fill:transparent;stroke:currentColor;stroke-width:.7px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:none;stroke-opacity:calc(.35 + .65 * var(--o,1));transition:none}
/* ===== Ende BAUPLAN 334 ===== */
/* ===== BAUPLAN 340: sehr schwaches Gerät (Stufe 3) – ohne vorderen Dampf, Glas ohne Unschärfe ===== */
html.spar340b #dampf-vorn{display:none!important}
html.spar340b *, html.spar340b *::before, html.spar340b *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* ===== Ende BAUPLAN 340 ===== */
/* ===== BAUPLAN 341: Fass (Sauna.Rolle) und kleine Kuppel (Saunahoch13) in kleinen Größen nicht schwerer als die Kuppel =====
   Fass: die innere Glaskante (.glas341, kern.js 341) hat ihre Linie in viewBox-Einheiten statt fester 0,7 px – im 96-px-Symbol der
   Startseite so fein wie die übrigen Linien (dicker Fensterrahmen wie gewollt), in Pillen, Knöpfen und im Aushang (20–34 px) nur noch ein
   Hauch. Vorher wirkten Fenster- und Glaskante dort zusammen wie ein dunkler Block.
   Saunahoch13: dieselben 91 Dreiecke auf 70 % der Fläche, die Linien schrumpfen nicht mit → Deckkraft × 0,7 (gleich dicht wie die Kuppel). ===== */
.sym334 .f.glas341{vector-effect:none;stroke-width:1.5px}
.sym334-hoch13 .f{stroke-opacity:calc((.35 + .65 * var(--o,1)) * .7)}
/* ===== Ende BAUPLAN 341 ===== */
/* ===== BAUPLAN 352: Logo „CALMA SAUNAGARTEN“ neben der Kuppel ===== */
.logo352{display:block;block-size:2.05em;inline-size:auto;overflow:visible}
.logo352 path{fill:currentColor;fill-rule:evenodd}
.logo352 .logo352-schatten{fill:color-mix(in srgb,var(--dome,currentColor) 50%,transparent)}
:root:not(#_):not(#_) .marke b:has(> .logo352){overflow:visible;text-overflow:clip;line-height:1;font-size:18px}
:root:not(#_):not(#_) .marke:has(.logo352){gap:12px}
/* mit Unterzeile (Team: „Team · Name“): Logo etwas kleiner, Zeile mit Abstand darunter */
:root:not(#_):not(#_) .marke span:has(> small) > b > .logo352{block-size:1.62em}
:root:not(#_):not(#_) .marke span:has(> b > .logo352) > small{display:block;margin-block-start:5px}
/* ===== Ende BAUPLAN 352 ===== */
/* ===== BAUPLAN 355: Logo im Kopf etwas kleiner als die Kuppel und ohne Schatten (Nutzer: „ein bisschen kleiner als der Dome … Schatten weg“) ===== */
:root:not(#_):not(#_):not(#_) .marke .logo352{block-size:30px}
:root:not(#_):not(#_):not(#_) .marke span:has(> small) > b > .logo352{block-size:26px}
:root:not(#_):not(#_) :is(.marke,.live-marke) .logo352-schatten{display:none}
/* ===== Ende BAUPLAN 355 ===== */
/* ===== BAUPLAN 359: Logo überall ohne Schatten (Nutzer: „hier auch Schatten weg im Logo“ – Über Calma, Team-Anmeldung) ===== */
.logo352 .logo352-schatten{display:none}
/* ===== Ende BAUPLAN 359 ===== */
/* ===== BAUPLAN 413: Fenster mit den übrigen Zutaten („+N“) – dunkel wie die anderen Menüs, alle Einträge (die Liste der Kachel ist auf eine Zeile begrenzt) ===== */
:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .box .zutaten > li.zutat-mehr{position:relative;z-index:3;cursor:pointer}
:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .pop413{position:fixed;z-index:9000;inline-size:max-content;padding:10px;border-radius:22px;background:#241D15;color:#F8F1EA;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 12px 32px rgba(0,0,0,.5),0 3px 10px rgba(0,0,0,.3);pointer-events:auto}
:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .pop413 > .pop413-liste{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;max-block-size:none;block-size:auto;overflow:visible}
:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .pop413 > .pop413-liste > li{background:rgba(255,255,255,.09);box-shadow:none;color:#F8F1EA}
@media (prefers-reduced-motion:no-preference){ :root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .pop413{animation:pop413Ein .14s ease-out} @keyframes pop413Ein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} }
/* ===== Ende BAUPLAN 413 ===== */
/* ===== SAUNIPHOS: kein Temperaturfühler – der Platzhalter-Knopf (kern.js, FUEHLER_AN) ist nie zu sehen; das neutrale Hütten-Symbol
   (kern.js huetteSp) hat keine eigenen Regeln, es erbt .sym334 bzw. .stueck ===== */
:root:not(#_) .kopf-knopf.fuehler-aus{display:none!important}
:root:not(#_) .kopf-anker:has(> .fuehler-aus){display:none!important}
/* ===== Ende SAUNIPHOS ===== */


/* ===== Stimmung 70° (BAUPLAN 37) - vom Server angehängt ===== */
:root{--stimmung-ton:70;--stimmung-leiste-hell:#D3C7BA;--stimmung-leiste-dunkel:#2F1F0C}
:root:not(#_):not(#_) :is(#feuerVerlauf,#feuerHell) stop:nth-child(1){stop-color:#96600C}
:root:not(#_):not(#_) :is(#feuerVerlauf,#feuerHell) stop:nth-child(2){stop-color:#D69238}
:root:not(#_):not(#_) :is(#feuerVerlauf,#feuerHell) stop:nth-child(3){stop-color:#FECE98}
:root:not(#_):not(#_) :is(.box.laeuft,#blatt .platte.ist-laeuft) .int-flamme.voll{fill:#603A01}
@media (prefers-reduced-motion:no-preference){::view-transition-old(root),::view-transition-new(root){animation-duration:.8s}}