/* Saunasplash · Calma Ritualsauna – öffentliche Seite und Aushang
   Baut auf basis.css auf. Handy zuerst (390 px), breit ab 1000 px. */

/* ===== Kopf der Seite: Titel mittig, darunter wann · wo ===== */
.kopf{text-align:center;padding-block:22px 18px}
.kopf h1{font-size:38px;line-height:1.04;font-weight:600;letter-spacing:-.012em}
.kopf-zeile{margin-block-start:8px;font-size:16px;font-weight:400;color:var(--ink-stoff-2)}
.laden{padding:48px 0;text-align:center;color:var(--ink-stoff-2)}
.hinweis{display:flex;align-items:flex-start;gap:10px;margin-block-start:14px;padding:12px 14px;border-radius:16px;background:var(--surface);font-size:15px}
.hinweis.warn{box-shadow:inset 0 0 0 1.5px var(--warnung);color:var(--warnung)}

/* ===== Läuft gerade | Als Nächstes ===== */
.jetzt-reihe{display:grid;gap:20px}
.jetzt-spalte{display:grid;grid-template-rows:auto 1fr;gap:8px;min-inline-size:0}
.bereich{display:flex;align-items:center;gap:8px;font-size:17px;line-height:1.3;font-weight:500;color:var(--ink-stoff-2)}
.jetzt-spalte.laeuft .bereich{color:var(--ink)}
.jetzt-spalte > .box,.jetzt-spalte > .ruhe-karte{block-size:100%}
.box.gross{border-radius:28px;padding:18px 20px 20px}
.box.gross .zeit{font-size:28px}
.box.gross .zeit .bis{font-size:22px}
.box.gross .box-kopf{padding-inline-end:72px}
.box.gross .stueck{inline-size:62px;inset-block-start:20px;inset-inline-end:18px}
.box.gross .name{font-size:29px;line-height:1.12;font-weight:600;margin-block-start:10px}
.box.gross .wer{font-size:17px}
.box.gross .text{font-size:17px}
.box.gross .zutaten{max-block-size:48px}
.box.gross .zutaten li{block-size:48px;font-size:16px}
.box.gross .zutat-bild{inline-size:42px;block-size:42px}
.jetzt-spalte.naechster .box .name{font-size:23px}
.ruhe-karte{display:flex;align-items:center;gap:16px;min-block-size:150px;padding:22px 20px 24px;border-radius:24px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--schatten)}
.ruhe-inhalt{flex:1;display:grid;justify-items:start;gap:8px;min-inline-size:0}
.ruhe-kuppel{inline-size:64px;flex:none;align-self:flex-start}
.ruhe-kuppel .f{stroke-width:.7px}
.ruhe-symbol{display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:50%;background:var(--tonal);color:var(--ink)}
.ruhe-text{font-size:21px;line-height:1.28;font-weight:500;text-wrap:balance}
.ruhe-text.lang{font-size:18px;line-height:1.4;font-weight:500;text-wrap:pretty}
.ruhe-unter{font-size:16px;color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums}

/* ===== Band mit den Eckdaten – über die ganze Breite ===== */
.info-band{margin-block-start:20px;padding:12px 16px;border-radius:22px;background:var(--tonal);color:var(--ink);box-shadow:var(--kante)}
.info-band ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.info-band li{display:inline-flex;align-items:center;gap:8px;min-block-size:36px;font-size:16px;font-weight:500}
.info-band .ic{color:var(--dome)}

/* ===== Plan ===== */
.plan{margin-block-start:40px}
.abschnitt-titel{font-size:28px;line-height:1.15;font-weight:600}
.plan-hinweis{display:flex;align-items:center;gap:8px;margin-block-start:6px;font-size:15px;color:var(--ink-stoff-2)}
/* Handy: Reiter für die Tage – das Wort relativ zu heute steht im Reiter */
.tage-reiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-block-start:14px}
.reiter{position:relative;display:grid;justify-items:start;align-content:start;min-block-size:104px;padding:10px 12px 10px;border:1.5px solid var(--line);
  border-radius:20px;background:var(--surface);text-align:start;color:var(--ink)}
.reiter .kuppel-svg{inline-size:42px;margin-block-end:6px}
.reiter .f{stroke-width:.65px}
.reiter-rel{font-size:13px;line-height:1.2;font-weight:500;color:var(--ink-2)}
.reiter.heute .reiter-rel{color:var(--accent-ink)}
.reiter-tag{font-size:19px;line-height:1.2;font-weight:500}
.reiter-datum{font-size:14px;color:var(--ink-2);font-weight:400}
.reiter:not([aria-selected="true"]):hover{background:var(--surface-2)}
.reiter[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary);
  --dome:var(--on-primary);--dome-past:color-mix(in srgb,var(--on-primary) 30%,var(--primary));--line:transparent}
.reiter[aria-selected="true"] .reiter-rel,.reiter[aria-selected="true"] .reiter-datum{color:var(--on-primary)}
.reiter.heute::after{content:"";position:absolute;inset-block-start:12px;inset-inline-end:12px;inline-size:9px;block-size:9px;border-radius:50%;background:var(--orange)}

/* Die große Tages-Box, darin die Aufguss-Boxen – alle gleich hoch (1fr) */
.tages-box{margin-block-start:14px;margin-inline:-6px;padding:16px 12px 14px;border-radius:32px;background:var(--surface-2);border:1.5px solid var(--line);box-shadow:var(--kante)}
.tages-box.heute{border:2.5px solid var(--orange);box-shadow:none}   /* kein Glow-Rest über der Box (Design-Prüfung) */
.tages-box.vorbei{background:var(--schleier);border:1.5px dashed var(--linie-vorbei)}
.tages-kopf{display:flex;align-items:center;gap:12px;padding-inline:6px}
.tages-kopf h3{font-size:22px;line-height:1.2;font-weight:500}
.boxen{display:grid;grid-auto-rows:1fr;gap:12px;margin-block-start:12px}
.boxen > li{display:grid;min-inline-size:0}
.boxen > li > .box{block-size:100%}
.vorbei-gruppe{margin-block-start:12px}
.vorbei-knopf{display:flex;align-items:center;gap:10px;inline-size:100%;min-block-size:56px;padding:8px 16px;border:1.5px dashed var(--linie-vorbei);border-radius:20px;
  background:transparent;text-align:start;font-size:16px;font-weight:500;color:var(--ink-3)}
.vorbei-knopf .vg-text{flex:1}
.vg-mehr{display:inline-flex;align-items:center;gap:4px;color:var(--accent-ink);font-weight:500;white-space:nowrap}
.vorbei-knopf .vg-zeit{white-space:nowrap}   /* „13:30 – 15:42" nie über zwei Zeilen (wie im Team) */
.ic.auf{transform:rotate(180deg)}

/* ===== Calma Ritualsauna (unten): Kuppel-Uhr, Foto, Text, Anfahrt ===== */
.calma{margin-block-start:48px}
.calma-raster{display:grid;gap:22px;margin-block-start:14px}
.kuppel-figur{margin:0;padding:18px 16px 16px;border-radius:28px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--schatten)}
.kuppel-figur .kuppel-rahmen{max-inline-size:560px;margin-inline:auto}
.kuppel-figur figcaption{display:grid;gap:2px;margin-block-start:10px}
.cap-tag{font-size:14px;font-weight:500;color:var(--ink-2)}
.cap-haupt{font-size:17px;font-weight:500}
.calma-text{display:grid;gap:18px;align-content:start}
.foto{display:block;inline-size:100%;block-size:auto;aspect-ratio:1000/594;object-fit:cover;border-radius:28px;background:var(--surface-2)}
.lead{font-size:17px;line-height:1.55;max-inline-size:60ch}
.calma-hinweis{padding:14px 16px;border-radius:18px;background:var(--surface);border-inline-start:5px solid var(--orange);font-weight:500}
.ort-karte{padding:20px;border-radius:28px;background:var(--tonal)}
.ort-karte h3{font-size:20px;font-weight:500;margin-block-end:8px}
address{font-style:normal;font-size:17px;line-height:1.45}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:16px}
.links{display:grid;gap:2px}
.links .textlink{font-size:17px}

/* ===== Fußzeile ===== */
.fuss-zeile{margin-block-start:40px;padding-block:20px calc(40px + env(safe-area-inset-bottom));border-block-start:1px solid var(--line-stoff);
  display:grid;gap:10px;font-size:15px;color:var(--ink-stoff-2)}
.fuss-links{display:flex;flex-wrap:wrap;gap:0 20px}
.fuss-links .textlink{font-size:15px;color:var(--ink)}
.demo{white-space:nowrap}

/* ===== Detail-Blatt ===== */
.detail-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.detail-dauer{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--ink-2);font-weight:500}
.platte-inhalt .ober{margin:0}
.detail-wer{font-size:17px;color:var(--ink-2);margin-block-start:-8px}
.detail-text{font-size:17px;line-height:1.55;text-wrap:pretty}
.detail-text.leise{color:var(--ink-2)}
.detail-lauf{margin:0;padding:12px 14px;border-radius:16px;background:linear-gradient(162deg,#FFE36B,var(--amber) 50%,var(--orange));color:var(--on-fire)}
.detail-teil h3,.fb h3{font-size:18px;font-weight:500;margin-block-end:10px}
.zutaten-gross{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px 10px}
.zutaten-gross li{display:grid;justify-items:center;gap:6px;text-align:center;font-size:15px;font-weight:500;line-height:1.25}
.zutaten-gross .zutat-bild{inline-size:88px;block-size:88px}
.zutaten-gross .zutat-bild.ohne{font-size:30px}
.detail-intens{display:grid;gap:4px;justify-items:start}
.detail-intens .intens{margin:0;font-size:17px;color:var(--ink)}
.detail-intens .int-flamme{inline-size:24px;block-size:24px}
.ds section h3{font-size:17px;font-weight:500;margin-block-end:4px}
.ds p{font-size:16px;line-height:1.55}
.ds-loeschen{display:grid;gap:10px;justify-items:start;padding:16px;border-radius:18px;background:var(--surface-2)}

/* Feedback – Sterne mit halben Schritten, sichtbar als 5 Sterne */
.fb{display:grid;gap:12px;padding:18px 16px 20px;border-radius:22px;background:var(--surface-2)}
.fb h3{margin:0}
.fb .hilfe{display:flex;align-items:flex-start;gap:6px}
.fb .hilfe .ic{margin-block-start:2px}
.fb form{display:grid;gap:16px}
.fb .eingabe{background:var(--surface)}
.sterne-feld{border:0;margin:0;padding:0;min-inline-size:0}
/* Die Sterne füllen die Reihe: jede Hälfte so breit wie möglich (bis 28 px),
   56 px hoch; dazu wertet oeffentlich.js Tippen/Ziehen über die GANZE Reihe aus
   (die nächste Hälfte unter dem Finger). Der Abstand zum nächsten Stern ist
   Innenabstand der rechten Hälfte, KEINE Lücke – sonst fällt die Vorschau beim
   Überfahren zwischen zwei Sternen weg. Ganz schmal (400 % Zoom) ohne Abstand,
   damit jede Hälfte ≥ 24 px bleibt. Alles logisch (inline) – Rechts-nach-links
   spiegelt von selbst (keine Sonderregel, die hatte die Hälften vertauscht). */
.sterne{--luecke:8px;display:flex;align-items:center;touch-action:pan-y}
@media (max-width:359px){ .sterne{--luecke:0px} }
.halb{display:block;flex:none;inline-size:min(28px,calc((100% - 4 * var(--luecke)) / 10));block-size:56px;overflow:hidden;cursor:pointer;box-sizing:content-box}
.halb.b{padding-inline-end:var(--luecke)}
.halb:last-of-type{padding-inline-end:0}
.halb svg{display:block;box-sizing:border-box;inline-size:200%;block-size:100%;padding-block:2px;fill:var(--stern-leer);stroke:none}
.halb.b svg{margin-inline-start:-100%}
.halb.an svg{fill:var(--stern)}
/* Leere Sterne als Bedienelement ≥ 3:1 gegen die Feedback-Fläche */
.fb{--stern-leer:rgba(22,32,63,.55)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .fb{--stern-leer:rgba(255,241,207,.45)} }
:root[data-theme="dark"] .fb{--stern-leer:rgba(255,241,207,.45)}
/* Das Feedback steht im Blatt „vorbei" – das ist in BEIDEN Themen dunkel: dort leere
   Sterne hell (#EEF2FF 45 % auf #0C1630 ≈ 4,1:1; die Hell-Regel oben gab 1,1:1) */
:root:not(#_) #blatt .platte.detail:is(.ist-vorbei,.ist-kommt,.ist-naechster,.ist-ausfall) .fb{--stern-leer:rgba(238,242,255,.45)}
/* Vorschau beim Überfahren: alle Hälften bis zum Zeiger (die davor per :has) */
@media (hover:hover){
  .sterne:has(.halb:hover) .halb svg{fill:var(--stern-leer)}
  /* :has() zählt wie sein Argument – die Hälfte unter dem Zeiger braucht denselben Vorrang */
  .sterne:has(.halb:hover) .halb:hover svg,.sterne .halb:has(~ .halb:hover) svg{fill:color-mix(in srgb,var(--stern) 72%,transparent)}
}
.sterne input:focus-visible + .halb{outline:3px solid var(--focus);outline-offset:-3px;border-radius:8px}
.sterne-wert{margin-block-start:4px;font-size:15px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.zaehler{justify-self:end;font-variant-numeric:tabular-nums}
.fb-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.platte.frage .platte-inhalt p{font-size:16px;line-height:1.55}

/* Bildnachweise */
.bn-liste{display:grid;gap:10px}
.bn-liste li{display:flex;align-items:center;gap:12px}
.bn-liste img,.bn-liste .zutat-bild{inline-size:56px;block-size:56px;border-radius:50%;object-fit:cover;flex:none}
.bn-liste b{display:block;font-weight:500}
.bn-liste small{display:block;color:var(--ink-2);font-size:14px;overflow-wrap:anywhere}
.bn-liste a{color:inherit;text-underline-offset:3px;padding-block:4px}   /* Tippfläche ≥ 24 px hoch */
.ds-text{display:grid;gap:20px}

/* ===== Breit: ab 1000px ===== */
@media (min-width:1000px){
  .kopf{padding-block:34px 30px}
  .kopf h1{font-size:64px;letter-spacing:-.02em}
  .kopf-zeile{font-size:19px;margin-block-start:10px}
  .jetzt-reihe{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:stretch}
  .box.gross .name{font-size:36px}
  .ruhe-karte{padding:28px 32px;gap:28px}
  .ruhe-kuppel{inline-size:150px;align-self:center}
  .ruhe-text{font-size:24px}
  .ruhe-text.lang{font-size:19px}
  .jetzt-spalte.naechster .box .name{font-size:27px}
  .info-band{margin-block-start:24px;padding:14px 24px}
  .info-band ul{gap:6px 40px}
  .info-band li{font-size:17px}
  .plan{margin-block-start:64px}
  .abschnitt-titel{font-size:34px}
  /* Drei Tages-Boxen; jede ist ein Subgrid über alle Zeilen: Überschrift · Kopf · n gleich hohe Zeilen */
  /* Die letzte, feste Zeile ist der Innenabstand unten der Tages-Box: im Subgrid
     zählt deren Padding sonst zur letzten 1fr-Zeile, und die 21:30-Boxen werden
     um so viel niedriger (6 px + 12 px Zeilenabstand = 18 px wie vorher) */
  .raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto repeat(var(--zeilen),1fr) 6px;
    column-gap:18px;row-gap:12px;margin-block-start:20px}
  .tag-spalte{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;min-inline-size:0}
  .tag-ueber{grid-row:1;align-self:end;padding-inline:18px;font-size:16px;font-weight:500;color:var(--ink-stoff-2)}
  .tag-ueber.heute{color:var(--ink)}
  .tag-ueber.heute::before{content:"";display:inline-block;inline-size:9px;block-size:9px;margin-inline-end:8px;border-radius:50%;background:var(--orange);vertical-align:.08em}
  .tag-ueber.vorbei{color:var(--ink-stoff-2)}
  .tag-spalte > .tages-box{grid-row:2 / -1;display:grid;grid-template-rows:subgrid;margin:0;padding:16px 14px 0;border-radius:34px;min-inline-size:0}
  .tag-spalte .tages-kopf{padding:0 4px 2px}
  .tag-spalte .tages-kopf .kuppel-svg{inline-size:58px;flex:none}
  .tag-spalte .tages-kopf .f{stroke-width:.7px}
  .tag-spalte .tages-kopf h3{display:grid;font-size:24px;line-height:1.15;font-weight:600}
  .tag-spalte .tages-kopf h3 span{font-size:15px;font-weight:400;color:var(--ink-2)}
  .zelle{display:grid;min-inline-size:0}
  .zelle > .box{block-size:100%}
  .raster .name{font-size:19px}
  .raster .zeit{font-size:22px}
  .raster .box{padding:14px 16px 14px}
  .calma{margin-block-start:72px}
  .calma-raster{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start;margin-block-start:20px}
  .kuppel-figur{position:sticky;inset-block-start:calc(var(--kopf-h) + 20px)}
  .kuppel-figur .kuppel-rahmen{max-inline-size:680px}
  /* Die Uhr ist breit größer – Ziffern in SVG-Einheiten kleiner halten */
  .kuppel-figur .ziffer,.kuppel-figur .ziffer.laeuft text{font-size:9.5px}
  .kuppel-figur .ziffer.laeuft rect{transform:scale(.82);transform-box:fill-box;transform-origin:center}
  .cap-haupt{font-size:18px}
  .fuss-zeile{grid-template-columns:1fr auto;align-items:center}
}

/* ===== Aushang (Bauplan 33) – ein A4-Blatt hoch, schwarz-weiß, in der Form der Seite =====
   Das Papier hat am Bildschirm die echten Druckmaße (mm/pt): Vorschau = Druck.
   Nur Schwarz, Weiß und Grau, keine Farbflächen (druckerfreundlich), feine
   Ränder (0,75 pt), runde Ecken wie im Plan. Die Zeilen der drei Tage liegen
   auf einer Höhe (Subgrid) und sind gleich hoch; läuft etwas über, setzt
   oeffentlich.js das Blatt dichter (.dicht, .eng). Grau #333 auf Weiß ≈ 12,6:1. */
.aushang{display:grid;justify-items:center;gap:22px;padding:24px 16px 48px}
/* Die Körnung des Seitengrunds liegt sonst auch auf dem Papier */
body.im-aushang::after{display:none}
@media screen{ .papier-buehne{zoom:var(--papier-zoom,1)} }
.papier{--a-ink:#000;--a-ink-2:#333;--a-fein:.75pt solid #000;color-scheme:light;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:3.5mm;
  inline-size:210mm;block-size:296.5mm;padding:8mm 10mm 6mm;overflow:hidden;
  background:#fff;color:var(--a-ink);font-size:9pt;line-height:1.25;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 22px 60px -24px rgba(0,0,0,.6)}
/* Kopf: Kuppel · Titel · QR */
.a-kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:6mm}
.a-marke{inline-size:28mm}
.a-marke svg{display:block;inline-size:100%;block-size:auto}
:root:not(#_) .papier .a-marke .f{fill:none;stroke:#000;stroke-width:.8px}
.a-titel h1{font-size:24pt;line-height:1.02;font-weight:450;letter-spacing:-.01em}
.a-wann{margin-block-start:1.6mm;font-size:10.5pt;color:var(--a-ink-2)}
.a-plan{margin-block-start:1.6mm;font-size:14pt;line-height:1.1;font-weight:450}
/* QR rechts, das Wort daneben (nicht darunter – spart Höhe für die Boxen) */
.a-qr{display:flex;flex-direction:row-reverse;align-items:center;gap:3mm;text-align:end;font-size:8pt;line-height:1.25;font-weight:500}
.a-qr p{inline-size:24mm;text-wrap:balance}
.a-qr .code{flex:none;inline-size:21mm;block-size:21mm}
.a-qr svg{display:block;inline-size:100%;block-size:100%}
/* Die Tage: Überschrift, darunter je Uhrzeit eine Zeile – so hoch wie ihr Inhalt,
   der Rest des Blatts verteilt sich gleich auf alle Zeilen (align-content:stretch) */
.a-tage{display:grid;grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr));grid-template-rows:max-content repeat(var(--zeilen,9),auto);
  align-content:stretch;column-gap:4mm;row-gap:1.2mm;min-block-size:0;overflow:hidden}
.a-tag{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;min-inline-size:0;min-block-size:0}
.a-tag > h2{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:2mm;padding-inline:1mm;font-size:15pt;line-height:1.1;font-weight:500}
.a-datum{font-size:9.5pt;font-weight:400;color:var(--a-ink-2)}
.a-boxen{grid-row:2 / -1;display:grid;grid-template-rows:subgrid;min-block-size:0}
/* Box wie im Plan: Pille · Zeit · Name · „mit … · Intensität" · Düfte; die
   letzten beiden hängen unten (gleiche Linie in gleich hohen Boxen) */
.a-box{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto 1fr auto;
  grid-template-areas:"status status" "zeit zeit" "name name" "wer wer" "duft duft";
  min-block-size:min-content;min-inline-size:0;overflow:hidden;padding:1.8mm 2.6mm 1.5mm;
  border:var(--a-fein);border-radius:3.2mm;break-inside:avoid}
.a-status{grid-area:status;display:flex;min-block-size:3.6mm;margin-block-end:.6mm}
.a-pille{display:inline-flex;align-items:center;padding:.3mm 1.9mm;border:var(--a-fein);border-radius:99px;
  font-size:7pt;line-height:1.1;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-zeit{grid-area:zeit;font-size:9pt;line-height:1.15;font-weight:700;font-variant-numeric:tabular-nums}
.a-zeit .bis-strich{margin-inline:.25em;font-weight:500}
.a-name{grid-area:name;margin-block-start:.3mm;font-size:12pt;line-height:1.1;font-weight:500;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.a-box.aus .a-name{text-decoration:line-through;text-decoration-thickness:.9pt}
.a-wer{grid-area:wer;align-self:end;display:flex;flex-wrap:wrap;align-items:center;column-gap:1.2mm;padding-block-start:.6mm;
  font-size:8pt;line-height:1.25;color:var(--a-ink-2)}
.a-duft{grid-area:duft;margin-block-start:.4mm;font-size:8pt;line-height:1.25;color:var(--a-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ar/fa/he: die Zeile hat ihre eigene Richtung (dir="auto") – lateinische Namen werden
   am ENDE gekürzt, nicht ihr Anfang; sie steht trotzdem rechtsbündig wie die Spalte */
[dir="rtl"] .a-duft{text-align:right}
/* Intensität: Flammen gefüllt schwarz, leer nur als Umriss */
:root:not(#_) .papier .a-wer .intens.etikett{display:inline-flex;align-items:center;gap:.4mm;margin:0;font:inherit;color:inherit}
:root:not(#_) .papier .a-wer .intens.etikett > .i-wort{margin:0;margin-inline-end:.8mm}
:root:not(#_) .papier .a-wer .int-flamme{inline-size:3.4mm;block-size:3.4mm;fill:none;stroke:#000;stroke-width:1.7;filter:none}
:root:not(#_) .papier .a-wer .int-flamme.voll{fill:#000;stroke:#000}
.a-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1mm 4mm;font-size:7.5pt;color:var(--a-ink-2)}
/* Dichter, wenn etwas überläuft (oeffentlich.js papierPruefen): erst rückt die
   Pille neben die Zeit, dann wird die Schrift kleiner (Namen bis 2 Zeilen, Rest „…") */
.papier.dicht .a-box{grid-template-rows:auto auto 1fr auto;grid-template-areas:"zeit status" "name name" "wer wer" "duft duft";padding-block:1.5mm 1.3mm}
.papier.dicht .a-status{margin:0;min-block-size:0;align-self:center}
.papier.dicht .a-pille{font-size:6.5pt}
.papier.eng .a-name{font-size:10.5pt}
.papier.eng .a-wer,.papier.eng .a-duft{font-size:7.5pt}
/* Ein Tag groß (?aushang&tag=sa): eine Spalte, jede Box quer –
   links Zeit und Dauer, rechts Name, „mit …", Düfte */
.papier.einer .a-box,.papier.einer.dicht .a-box{grid-template-columns:40mm minmax(0,1fr);grid-template-rows:auto auto auto;
  grid-template-areas:"zeit name" "status wer" "status duft";column-gap:5mm;align-content:center;padding:2.2mm 4mm}
.papier.einer .a-zeit{font-size:15pt}
.papier.einer .a-status{align-self:start;margin:1.2mm 0 0}
.papier.einer .a-pille{font-size:8pt;padding:.6mm 2.4mm}
.papier.einer .a-name{margin:0;font-size:17pt;-webkit-line-clamp:1}
.papier.einer .a-wer{align-self:start;padding-block-start:.8mm;font-size:10pt}
.papier.einer .a-duft{font-size:10pt}
:root:not(#_) .papier.einer .a-wer .int-flamme{inline-size:4mm;block-size:4mm}
.papier.einer .a-tag > h2{font-size:22pt}
.papier.einer .a-datum{font-size:13pt}
.aushang-knoepfe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff!important}
  html::before,body::before,body::after{display:none!important}
  #vorlader,#blatt,#meldung,.aushang-knoepfe{display:none!important}
  .aushang{display:block;padding:0;margin:0}
  .papier{box-shadow:none}
}

/* „Läuft gerade" / „Als Nächstes" als Reiter, der an seiner Box hängt:
   der Reiter oben links und rechts rund, die Box darunter oben links eckig –
   beides wird ein Stück. Farben so, dass die Naht verschwindet:
   läuft = Anfang des Glut-Verlaufs (#FFE36B), als Nächstes = das Orange des Rands. */
.jetzt-spalte{gap:0}
.jetzt-spalte > .bereich{justify-self:start;position:relative;z-index:1;margin:0;padding:9px 18px 8px;
  border-radius:18px 18px 0 0;background:var(--glas-klein);color:var(--ink);
  border:1px solid rgba(var(--glas-ton),.14);border-block-end:0;margin-block-end:-1px}
.jetzt-spalte > .box,.jetzt-spalte > .ruhe-karte{border-start-start-radius:0}
.jetzt-spalte.laeuft > .bereich{background:#FFE36B;color:var(--on-fire);border:0;margin-block-end:0;
  box-shadow:0 0 0 1.5px rgba(217,72,10,.5);clip-path:inset(-3px -3px 0 -3px)}
.jetzt-spalte.laeuft > .bereich .punkt{background:var(--on-fire)}
.jetzt-spalte.naechster > .bereich{background:var(--orange);color:var(--on-fire);border:0;margin-block-end:-2px}

/* Gleiche Linien in gleich hohen Boxen: Zutaten, Stärke und der Balken hängen
   am unteren Rand. Zwei Boxen nebeneinander (oben Läuft gerade | Als Nächstes,
   im Plan jede Zeile) haben sie damit auf derselben Höhe. */
.box > .zutaten{margin-block-start:auto}
.box > .zutaten ~ .fuss{margin-block-start:0}
.box > :has(+ .zutaten){margin-block-end:12px}
/* „Als Nächstes" oben: derselbe Balken wie „läuft", leer – noch nicht angefangen */
.box.naechster .balken{background:rgba(255,241,207,.18)}
.box.naechster .lauf .rest{color:var(--ink-2)}

@media (min-width:1000px){
  /* „Aufgüsse" mittig; Vorbei / Heute / Morgen als Reiter an ihrer Tages-Box
     (wie oben: Reiter oben rund, Box oben links eckig). Der Reiter überbrückt
     den Zeilenabstand des Rasters (12 px) und den Rand. */
  .plan > .abschnitt-titel{text-align:center}
  .tag-ueber{justify-self:start;position:relative;z-index:1;margin:0 0 -13px;padding:9px 18px 8px;border-radius:18px 18px 0 0;
    background:var(--glas-fill);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
    border:1px solid rgba(var(--glas-ton),.14);border-block-end:0;color:var(--ink);font-weight:500}
  .tag-ueber.heute{background:var(--orange);color:var(--on-fire);border:0;margin-block-end:-14px;-webkit-backdrop-filter:none;backdrop-filter:none}
  .tag-ueber.heute::before{background:var(--on-fire)}
  .tag-ueber.vorbei{color:var(--ink-2)}
  .tag-spalte > .tages-box{border-start-start-radius:0}
}

/* ===== Reiter oben, zweite Fassung (Nutzer-Feedback) =====
   Ein Rand läuft um Reiter UND Box: der Reiter trägt denselben Ring (unten
   abgeschnitten) und deckt mit 4 px Überlappung die Kante der Box unter sich
   zu – so entsteht zwischen beiden keine Linie, auch nicht durch das
   wandernde Licht. „Läuft gerade" in Orange; „Als Nächstes" + „in 53 Min."
   als zwei Reiter, Rand und Reiter weiß statt orange. */
.jetzt-spalte > .bereich,.jetzt-spalte > .reiter-paar{position:relative;z-index:3}
.jetzt-spalte.laeuft > .bereich{background:var(--orange);color:var(--on-fire);margin-block-end:-4px;padding-block-end:12px;
  box-shadow:0 0 0 1.5px rgba(217,72,10,.55),0 0 26px -6px var(--glow);clip-path:inset(-40px -40px 4px -40px)}
.jetzt-spalte.laeuft > .bereich .punkt{background:var(--on-fire)}
.reiter-paar{display:flex;align-items:flex-end;gap:6px;justify-self:start;margin-block-end:-4px}
.reiter-paar > .bereich{margin:0;padding:9px 18px 12px;border-radius:18px 18px 0 0}
.jetzt-spalte.naechster .reiter-paar > .bereich:first-child{background:#FFFFFF;color:#16203F;border:0;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9);clip-path:inset(-10px -10px 4px -10px)}
.jetzt-spalte.naechster .reiter-paar > .bereich.zweit{background:#253B80;color:#FFF3D6;font-size:15px;font-weight:500;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9);clip-path:inset(-10px -10px 4px -10px);font-variant-numeric:tabular-nums}
/* Die Box beginnt unter dem ersten Reiter eckig; der Rand ist weiß statt orange */
:root .jetzt-spalte.naechster > .box.naechster{border:2px solid rgba(255,255,255,.92);border-start-start-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,241,207,.10),0 12px 32px -14px rgba(8,18,40,.55)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .jetzt-spalte.naechster > .box.naechster{border-color:rgba(255,241,207,.78)} }
:root[data-theme="dark"] .jetzt-spalte.naechster > .box.naechster{border-color:rgba(255,241,207,.78)}
/* „Läuft gerade" wie die kleine Plakette: schwarzer Grund, orange Schrift,
   oranger Punkt (pulsiert). #FF8B00 auf #1A1405 ≈ 7,6:1. Der Schnitt sitzt
   jetzt genau an der Reiter-Unterkante – die 4 px Überlappung decken die
   Kante der Box wirklich zu (vorher wurden sie mit abgeschnitten). */
.jetzt-spalte.laeuft > .bereich{background:#1A1405;color:var(--orange);clip-path:inset(-40px -40px 0 -40px)}
.jetzt-spalte.laeuft > .bereich .punkt{background:var(--orange)}
.jetzt-spalte.naechster .reiter-paar > .bereich:first-child,
.jetzt-spalte.naechster .reiter-paar > .bereich.zweit{clip-path:inset(-10px -10px 0 -10px)}

/* ===== Oben, dritte Fassung (Nutzer-Feedback): Pillen statt Reiter =====
   Keine Reiter, keine dicken Ränder. Der Zustand steht als Pille neben der Zeit:
   „Läuft gerade" (tiefes Orange, hebt sich vom Gelb ab: #FFF6E0 auf #B8400B ≈ 5,3:1),
   „Als Nächstes" + „in 54 Min." als zwei Pillen. Zeit „16:30 bis 16:45",
   beide Zahlen gleich groß. */
.jetzt-spalte{grid-template-rows:auto 1fr;gap:8px}
.jetzt-spalte > .bereich{all:unset;display:flex;align-items:center;gap:8px;font-size:17px;line-height:1.3;font-weight:500;
  color:var(--ink-stoff-2);padding-inline:2px}
.jetzt-spalte > .box,.jetzt-spalte > .ruhe-karte{border-start-start-radius:28px}
.jetzt-spalte > .box.naechster{border-start-start-radius:28px}
:root .jetzt-spalte.naechster > .box.naechster{border:1px solid rgba(169,188,242,.35);
  box-shadow:inset 0 1px 0 rgba(255,241,207,.10),0 12px 32px -14px rgba(8,18,40,.55)}
.box.gross .zeit .bis-wort{font-size:.62em;font-weight:400;margin-inline:.35em;opacity:.85}
.box.gross .zeit .bis.gleich{font-size:inherit;font-weight:inherit;margin:0}

/* Fortschritt als fließende Lava: Glutrot–Orange–Gelb, wandert langsam */
@keyframes lava{to{background-position:-200% 0}}
.box.laeuft .balken{background:rgba(26,20,5,.20);box-shadow:inset 0 1px 2px rgba(26,20,5,.25)}
.box.laeuft .balken > span{background:linear-gradient(90deg,#8E2400 0%,#D9480A 18%,#FF6A00 34%,#FFC21A 50%,#FF6A00 66%,#D9480A 82%,#8E2400 100%);
  background-size:200% 100%;animation:lava 3.6s linear infinite;box-shadow:0 0 10px rgba(255,106,0,.55)}
@media (prefers-reduced-motion:reduce){ .box.laeuft .balken > span{animation:none} }
/* Oben wieder gleich hohe Boxen: beide Spalten teilen sich die Zeilen
   (Überschrift · Box) als Subgrid – auch wenn links eine sichtbare Überschrift
   steht (Pause) und rechts nur eine für Bildschirmleser. */
@media (min-width:1000px){
  .jetzt-reihe{grid-template-rows:auto 1fr;row-gap:0}
  .jetzt-spalte{grid-row:span 2;grid-template-rows:subgrid;row-gap:8px}
  .jetzt-spalte > .box,.jetzt-spalte > .ruhe-karte{grid-row:2}
}
/* Zeit: Strich statt „bis", gleich groß, etwas kräftiger */
.box.gross .zeit,.box.gross .zeit .bis.gleich{font-weight:600}
.box.gross .zeit,.box.gross .zeit time,.box.gross .zeit .bis.gleich{font-weight:700}
/* Luft zwischen Beschreibung und Zutaten: der Abstand hängt am Text selbst
   (die unsichtbare „mehr …"-Zeile dazwischen zählte vorher mit – dann klebte
   die Zutatenreihe am Text). Ist „mehr …" sichtbar, hält sie den Abstand. */
.box > .text{margin-block-end:16px}
.box > .text.gekappt{margin-block-end:0}
.box > .text.gekappt + .mehr-hinweis{margin-block-end:16px}
.box > :has(+ .zutaten){margin-block-end:16px}
.box > .mehr-hinweis:not(:is(.text.gekappt + .mehr-hinweis)){margin-block-end:0}

/* ===== Oben, vierte Fassung (Nutzer-Feedback) =====
   Die Pillen stehen in einer eigenen Zeile ÜBER der Uhrzeit, nicht daneben.
   Beide Boxen oben sind wieder an allen Ecken rund (die alte Reiter-Regel
   :root .jetzt-spalte.naechster > .box.naechster hatte die Ecke oben links
   noch eckig gehalten). Die Pillen-Farben selbst stehen in basis.css
   („Pillen überall gleich"), weil das Team-Backend sie auch braucht. */
.box.gross .box-status{margin-block-end:12px;padding-inline-end:72px}
:root .jetzt-spalte > .box,:root .jetzt-spalte > .ruhe-karte,
:root .jetzt-spalte.laeuft > .box.laeuft,:root .jetzt-spalte.naechster > .box.naechster{border-radius:28px}

/* ===== Plan: Überschrift „Aufgussplan" groß, Tage als Pillen (Nutzer-Feedback 01.10.) =====
   Vorbei / Heute / Morgen stehen als eigene Pille über ihrer Tages-Box,
   nicht mehr als angehängter Reiter – die Box ist wieder an allen Ecken rund.
   Datum und Ort stehen über „Calma Ritualsauna". */
:root .kopf-zeile{margin-block:0 10px}
:root .plan > .abschnitt-titel{font-size:34px;margin-block-end:20px}
@media (min-width:1000px){
  :root .plan > .abschnitt-titel{font-size:50px;line-height:1.05;letter-spacing:-.015em;margin-block-end:40px}
  /* Pillen Vorbei / Heute / Morgen: in basis.css (gilt auch im Team-Plan) */
}

/* Slot-Titel über dem Namen („Team-Slot · Heimaufguss") öffentlich ausblenden
   (Nutzer-Feedback) – im Team-Bereich bleibt er sichtbar. Hat ein Slot keinen
   Aufguss, ist der Titel selbst der Name und bleibt. */
.box .ober,#blatt .detail .ober,#blatt .platte .ober{display:none}

/* ===== Detail-Blatt: Teilen · Merken · Kalender (Bauplan 25) =====
   Drei gleich breite, tonale Knöpfe ohne Rand direkt unter der Status-Zeile,
   Symbol + Wort, ≥ 48 px hoch. „Gemerkt" (aria-pressed) mit zartem Rosa und
   gefülltem Herz – dasselbe Herz steht als Marke an der Box.
   Kontraste (nachgerechnet, scratchpad r6/bau/farben.mjs):
   hell   #16203F auf #E3E9F7 ≈ 13:1 · gemerkt #16203F auf #FBE1EB ≈ 13:1, Herz #B3124E ≈ 5,5:1
   dunkel #EEF2FF auf #243866 ≈ 10:1 · gemerkt #EEF2FF auf #4A2346 ≈ 11,6:1, Herz #FF8FB1 ≈ 6:1
   Im Blatt des laufenden Aufgusses (orange umrandet) ist der Grund derselbe. */
:root{--akt-grund:#E3E9F7;--akt-hover:#D6DEF2;--akt-an:#FBE1EB;--akt-an-hover:#F7D2E0;--akt-herz:#B3124E}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--akt-grund:#243866;--akt-hover:#2C437A;--akt-an:#4A2346;--akt-an-hover:#572A52;--akt-herz:#FF8FB1} }
:root[data-theme="dark"]{--akt-grund:#243866;--akt-hover:#2C437A;--akt-an:#4A2346;--akt-an-hover:#572A52;--akt-herz:#FF8FB1}
.aktionen{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-block-start:-4px}
.aktion{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-inline-size:0;min-block-size:48px;padding:8px 10px;
  border:0;border-radius:16px;background:var(--akt-grund);color:var(--ink);font-size:15px;font-weight:500;line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.aktion .ic{inline-size:20px;block-size:20px}
.aktion-wort{min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){
  .aktion:hover{background:var(--akt-hover)}
  .aktion[aria-pressed="true"]:hover{background:var(--akt-an-hover)}
}
.aktion[aria-pressed="true"]{background:var(--akt-an)}
.aktion[aria-pressed="true"] .herz{fill:var(--akt-herz);stroke:var(--akt-herz)}
.aktion[aria-busy="true"]{opacity:.6}
/* Lange Wörter (oeffentlich.js misst): Symbol über Wort – in allen Knöpfen gleich */
.aktionen.gestapelt .aktion{flex-direction:column;gap:3px;padding:8px 6px 7px;min-block-size:62px}
/* Umbruch nur zwischen Wörtern – ein zu langes Wort macht oeffentlich.js aktionenMessen kleiner */
.aktionen.gestapelt .aktion-wort{max-inline-size:100%;white-space:normal;overflow:visible;overflow-wrap:normal;font-size:14px}
@media (prefers-reduced-motion:reduce){ .aktion{transition:none} }
/* Datenschutz: der Zusatz zu „Auf deinem Gerät" (gemerkte Aufgüsse) als eigener Absatz */
.ds section p + p{margin-block-start:8px}

/* Herz-Marke gemerkter Aufgüsse in der Pillen-Zeile der Box (Plan und oben) –
   so hoch wie die Pillen. Die Boxen im Plan liegen alle auf dunklem Grund:
   #FF8FB1 auf dem rosa Hauch über #0C1633 ≈ 6:1, über #111C48 ≈ 5,5:1;
   auf der gelben Läuft-Box eine schwarze Marke wie die Pille „Läuft gerade"
   (#FF8FB1 auf #1A1405 ≈ 8,6:1); vorbei gedämpft (#D9A3B8 auf #1C2645 ≈ 7:1). */
.herz-marke{display:inline-flex;align-items:center;justify-content:center;flex:none;min-block-size:32px;padding-inline:10px;border-radius:99px;
  background:var(--herz-grund,rgba(255,143,177,.18));color:var(--herz-farbe,#FF8FB1)}
.herz-marke .ic{inline-size:17px;block-size:17px;fill:currentColor;stroke:currentColor}
.box.laeuft .herz-marke{--herz-grund:#1A1405;--herz-farbe:#FF8FB1}
.box.vorbei .herz-marke{--herz-grund:#1C2645;--herz-farbe:#D9A3B8}

/* ===== Heute breit: Vergangenes eingeklappt (Bauplan 36) =====
   Wie am Handy: Kopf, Vorbei-Gruppe, dann die übrigen Boxen. Die Spalte ist
   kein Subgrid mehr (sonst bliebe für jede eingeklappte Box eine leere Zeile);
   Wort und Kasten oben stehen weiter auf einer Höhe mit den anderen Tagen, die
   Boxen darin sind untereinander gleich hoch. */
@media (min-width:1000px){
  :root:not(#_) .tag-spalte.frei > .tages-box{display:flex;flex-direction:column;align-self:start;padding:16px 14px 14px}
  .tag-spalte.frei .vorbei-gruppe{margin-block-start:12px}
  .tag-spalte.frei .boxen{margin-block-start:12px;gap:12px}
  /* Aufgeklappt: „ausblenden" klein rechts im Tageskopf (gleiche Zeilenhöhe wie die anderen) */
  .tages-kopf.mit-knopf{justify-content:space-between}
}
:root:not(#_) .boxen{grid-auto-rows:auto}   /* untereinander keine angeglichenen Höhen (Nachtrag 36) */
.vorbei-zu{display:inline-flex;align-items:center;gap:4px;min-block-size:44px;padding:0 12px;border:0;border-radius:99px;
  background:none;color:var(--accent-ink);font-size:15px;font-weight:500;white-space:nowrap;cursor:pointer}
@media (hover:hover){ .vorbei-zu:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} }

/* ===== Gemerkte Aufgüsse in der Kopfleiste (Bauplan 34) =====
   Herz-Knopf tonal wie QR und Sprache, rotes Herz + kleine Zahl.
   Herz hell #B3124E auf #FFD435 ≈ 4,8:1 und auf #FFFBEA ≈ 6,6:1,
   dunkel #FF8FB1 auf #1B3368 ≈ 5,7:1 und auf #15213F ≈ 6,5:1 (Symbol ≥ 3:1). */
:root{--merk-herz:#B3124E}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--merk-herz:#FF8FB1} }
:root[data-theme="dark"]{--merk-herz:#FF8FB1}
/* Der Knopf selbst (rund, nur Herz, keine Zahl) steht in basis.css (Nachtrag 34) */
.merk-anker{position:relative;display:flex;flex:none}
/* Schmale Handys (≤ 359 px): mit dem Herz passt die Kopfleiste nur knapp in EINE
   Zeile – Sprache ohne Pfeil (bleibt ein Knopf), Kuppel und Abstände kleiner */
@media (max-width:359px){
  :root:not(#_) .leiste-in:has(.merk-anker){column-gap:3px}
  :root:not(#_) .leiste-in:has(.merk-anker) .sprach-knopf > .ic.klein{display:none}
  :root:not(#_) .leiste .leiste-in:has(.merk-anker) > .marke .marke-kuppel{inline-size:40px}
}
/* Dropdown unter dem Knopf (breit) – Liste gleich wie im Blatt am Handy */
.merk-pop{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:0;z-index:45;inline-size:min(380px,calc(100vw - 32px));
  max-block-size:min(70vh,560px);overflow:auto;padding:14px 8px 12px;border-radius:22px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);box-shadow:0 22px 50px -18px rgba(8,18,40,.55),0 2px 8px rgba(8,18,40,.14)}
.merk-pop-titel{padding:0 12px 8px;font-size:15px;font-weight:600;color:var(--ink-2)}
.merk-liste{display:grid;gap:2px}
.merk-eintrag{display:flex;align-items:flex-start;gap:12px;inline-size:100%;min-block-size:48px;padding:10px 12px;border:0;border-radius:14px;
  background:none;color:var(--ink);text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent}
.merk-eintrag .herz{inline-size:18px;block-size:18px;margin-block-start:2px;fill:var(--merk-herz);stroke:var(--merk-herz)}
.me-text{display:grid;gap:3px;min-inline-size:0}
.me-wann{font-size:14px;line-height:1.3;color:var(--ink-2);font-variant-numeric:tabular-nums}
.me-name{font-size:17px;line-height:1.25;font-weight:500;overflow-wrap:anywhere}
.me-marke{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.3;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.merk-eintrag.laeuft .me-marke{color:var(--accent-ink)}
/* vergangene gedämpft (hell #464952 auf #FFFBEA ≈ 8,7:1, dunkel #B0B5C4 auf #15213F ≈ 7,8:1),
   ausgefallene durchgestrichen */
.merk-liste{--me-vorbei:var(--ink-3)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .merk-liste{--me-vorbei:#B0B5C4} }
:root[data-theme="dark"] .merk-liste{--me-vorbei:#B0B5C4}
.merk-eintrag.vorbei,.merk-eintrag.vorbei .me-wann,.merk-eintrag.vorbei .me-marke{color:var(--me-vorbei)}
.merk-eintrag.vorbei .me-name{font-weight:400}
.merk-eintrag.ausfall .me-name{text-decoration:line-through}
.merk-eintrag.ausfall .me-marke{color:var(--warnung)}
@media (hover:hover){ .merk-eintrag:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)} }
.merk-eintrag:focus-visible{outline-offset:-3px}
.merk-hinweis{padding:8px 12px 0;font-size:13px;color:var(--ink-2)}
.merk-blatt .merk-liste{margin-inline:-12px}
.merk-blatt .merk-hinweis{padding-block-start:0}

/* ===== Hinweis über dem Plan, solange Texte des Teams noch nicht in der Sprache
   da sind (Bauplan 35a; ersetzt „Aufguss-Texte auf Deutsch"): mittig unter „Aufgussplan" ===== */
.plan > .plan-hinweis{display:block;text-align:center;max-inline-size:60ch;margin:-6px auto 18px;line-height:1.45;text-wrap:balance}
.plan > .plan-hinweis .ic{display:inline-block;inline-size:16px;block-size:16px;vertical-align:-3px;margin-inline-end:6px}
@media (min-width:1000px){ .plan > .plan-hinweis{margin:-40px auto 32px} }
/* Bildnachweise: Düfte & Kräuter und Klänge & Instrumente getrennt (Bauplan 28) */
.bn-teil{display:grid;gap:10px}
.bn-teil h3{margin:0;font-size:17px;font-weight:500}