/* ═══════════════════════════════════════════════════════════════════
   Der Shop — was die Hauptseite nicht kennt

   tokens.css und basis.css kommen von der Hauptseite (nginx liefert sie
   aus site/css/). Hier steht NUR, was ein Shop zusätzlich braucht:
   Karten, Artikelseite, Warenkorb, Meldungen. Farben, Abstände und
   Schriften sind die Variablen aus tokens.css — nichts hier ist ein
   eigener Farbwert.

   Die Kategoriefarbe hängt an data-farbe (statt eines style-Attributs,
   das die Content-Security-Policy des Shops nicht erlaubt) und setzt
   dieselben Variablen --gc und --gc-ink wie auf der Hauptseite.

   Formensprache wie auf der Hauptseite: flache Flächen, 1px Linie,
   Ecken 4/8/12, keine Schatten außer auf Fenster und Meldung. Eine Karte
   hebt sich beim Überfahren nicht, sie bekommt nur eine deutlichere Linie.
   ═══════════════════════════════════════════════════════════════════ */

[data-farbe="amethyst"]{--gc:var(--c-amethyst);--gc-ink:var(--c-amethyst-ink)}
[data-farbe="bernstein"]{--gc:var(--c-bernstein);--gc-ink:var(--c-bernstein-ink)}
[data-farbe="azur"]{--gc:var(--c-azur);--gc-ink:var(--c-azur-ink)}
[data-farbe="koralle"]{--gc:var(--c-koralle);--gc-ink:var(--c-koralle-ink)}
[data-farbe="magenta"]{--gc:var(--c-magenta);--gc-ink:var(--c-magenta-ink)}
[data-farbe="smaragd"]{--gc:var(--c-smaragd);--gc-ink:var(--c-smaragd-ink)}
[data-farbe="graphit"]{--gc:var(--c-graphit);--gc-ink:var(--c-graphit-ink)}

/* ── Rahmen ──────────────────────────────────────────────────────── */
#app{min-height:60vh}
/* Der Ladehinweis erscheint nur, wo JavaScript läuft. Ohne steht an
   seiner Stelle der noscript-Text, und der Shop verspricht nichts, was
   er nicht halten kann. */
.app-laden{display:none;padding-block:var(--s-8);color:var(--ink-3)}
.js .app-laden{display:block}
.noscript-hinweis{padding-block:var(--s-8);max-width:60ch}
.noscript-hinweis h1{font-size:var(--t-h2);margin-bottom:var(--s-3)}
.noscript-hinweis p{color:var(--ink-2)}

/* Solange der Katalog lädt, steht der Fuß dicht unter dem Ladehinweis und
   rutschte danach um Tausende Pixel nach unten — die einzige, dafür große
   Layoutverschiebung der Seite (Lighthouse: CLS 0,33). Unsichtbar zu sein
   kostet nichts und verschiebt nichts. Ohne JavaScript greift die Regel nicht
   (.js fehlt), dort steht der Hinweis aus <noscript>. */
.js:has(.app-laden) .site-foot{visibility:hidden}

.laden{color:var(--ink-3);padding-block:var(--s-4)}
.mono,.kennung{font-family:var(--mono);font-variant-ligatures:none}
.kennung{font-weight:600;letter-spacing:-.01em}

/* Die Vorschau sagt auf jeder Seite, dass sie eine ist. */
.demo-band{
  background:color-mix(in oklab, var(--c-bernstein) 11%, var(--bg));
  border-bottom:1px solid color-mix(in oklab, var(--c-bernstein) 38%, var(--line));
}
.demo-band p{padding-block:.6rem;font-size:var(--t-xs);line-height:1.55;color:var(--ink)}
.demo-band strong{color:var(--c-bernstein-ink);font-weight:600}

/* Kopfleiste: der Warenkorb steht rechts und bleibt auch auf dem Telefon
   sichtbar (basis.css blendet .head-tools unter 860 px aus). Die Anzahl
   steht in eckigen Klammern wie die Zähler der Filter — keine Blase. */
.korb-link{gap:.55rem}
.korb-n{font:600 var(--t-micro)/1 var(--mono);color:var(--accent-ink)}
.korb-n::before{content:"["}
.korb-n::after{content:"]"}
.korb-mobil{display:none;gap:.45rem;padding:.5rem .7rem;margin-left:auto}
@media (max-width:860px){
  .korb-mobil{display:inline-flex}
  .burger{margin-left:var(--s-2)}
}

/* ── Seitenkopf ──────────────────────────────────────────────────── */
.seitenkopf-in{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:var(--s-5) var(--s-6);
  padding-top:clamp(2.25rem,5vw,4rem);padding-bottom:clamp(1.25rem,2.5vw,1.75rem);
}
.seitenkopf-text{flex:1 1 420px;max-width:62ch}
.seitenkopf h1{font-size:var(--t-h1);letter-spacing:-.026em}
.seitenkopf-lede{
  margin-top:var(--s-3);color:var(--ink-2);
  font:400 clamp(1rem,.95rem + .25vw,1.0625rem)/1.65 var(--sans);
}
.seitenkopf .suche{flex:0 1 320px}
.seitenkopf .suche input{width:100%}
@media (max-width:640px){ .seitenkopf .suche{flex-basis:100%} }

.katalog-rumpf{padding-top:0;padding-bottom:clamp(3rem,6vw,5rem)}
/* Die Kategorien sind hier Verweise, keine Knöpfe — sie sehen aus wie
   die auf der Hauptseite, nur ohne Unterstreichung bei Berührung. */
.chip{text-decoration:none}
.chip:hover{text-decoration:none}
.chip:not([data-farbe]){--gc:var(--accent);--gc-ink:var(--accent-ink)}
/* Mit elf Kategorien wird die Leiste auf schmalen Fenstern vier, fünf Zeilen
   hoch — und bleibt beim Scrollen stehen, bis ein Viertel des Telefons
   verdeckt ist. Darum dort eine Zeile, die zur Seite läuft (die Verweise
   bleiben mit der Tastatur erreichbar, das Fenster scrollt dann mit). */
@media (max-width:1100px){
  .filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
  .filter .chip{flex:none}
}
/* Zwischen Leiste und erster Gruppe stünde sonst eine zweite Linie. */
.groups>.grp:first-child{padding-top:0}

/* ── Karten ──────────────────────────────────────────────────────── */
.raster{
  display:grid;gap:var(--s-4);margin-top:var(--s-5);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}
.karte{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .15s;
}
.karte[hidden]{display:none}
.karte:hover,.karte:focus-within{border-color:var(--line-ui)}

.karte-bild{aspect-ratio:16/9;background:var(--sunken);border-bottom:1px solid var(--line)}
.karte-bild img{width:100%;height:100%;object-fit:cover}

.karte-text{flex:1;padding:var(--s-4) var(--s-4) var(--s-4)}
/* Kennung und Titel stehen untereinander: oben der Name, den man in die
   server.cfg schreibt, darunter, was das Script tut. Vor der Kennung die
   Marke der Kategorie. */
.karte-name{font:inherit}
.karte-name a{display:flex;flex-direction:column;gap:.2rem;color:var(--ink)}
.karte-name a:hover{text-decoration:none}
/* Die ganze Karte ist der Verweis; der Kaufknopf liegt darüber. */
.karte-name a::after{content:"";position:absolute;inset:0;z-index:1}
.karte .kennung{
  display:flex;align-items:center;gap:.5rem;
  font:600 var(--t-xs)/1.3 var(--mono);color:var(--ink-2);
}
.karte .kennung::before{
  content:"";flex:none;width:.5rem;height:.5rem;border-radius:2px;background:var(--gc,var(--accent));
}
.karte-trenn{display:none}
.karte-titel{
  font:600 1.0625rem/1.25 var(--sans);font-stretch:94%;letter-spacing:-.012em;color:var(--ink);
}
/* Ohne Titel ist die Kennung der Titel (das Abo etwa). */
.karte .kennung:only-child{
  font:600 1.0625rem/1.25 var(--sans);font-stretch:94%;letter-spacing:-.012em;color:var(--ink);
}
.karte-kurz{
  margin-top:.55rem;color:var(--ink-2);font-size:var(--t-xs);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.karte-deps{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.75rem}
.karte-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);
}
.kauf-slot{position:relative;z-index:3;display:inline-flex}
.preis{font:600 var(--t-body)/1 var(--mono);color:var(--ink)}
.preis-art{
  margin-left:.55rem;padding:.2rem .4rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--ink-2);font:500 var(--t-micro)/1 var(--mono);vertical-align:middle;
}
.ist-im-korb svg{color:var(--c-smaragd)}
.knopf[aria-disabled="true"],.knopf[disabled]{opacity:.55;cursor:not-allowed}
.knopf-voll{width:100%}

/* Kein Bild vom Artikel: die Zeile, die das Script startet. */
.bild-leer{
  display:grid;place-items:center;width:100%;height:100%;background:var(--sunken);
  font:500 var(--t-sm)/1 var(--mono);color:var(--ink-3);
}
.bild-leer b{color:var(--gc-ink,var(--accent-ink));font-weight:600}

/* ── Artikelseite ────────────────────────────────────────────────── */
.paket{padding-top:var(--s-5);padding-bottom:clamp(3rem,6vw,5rem)}
.krumel{margin-bottom:var(--s-5);font:500 var(--t-xs)/1.5 var(--mono);color:var(--ink-3)}
.krumel a{color:var(--ink-2)}
.krumel a:hover{color:var(--ink)}

.paket-raster{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) 340px;
  grid-template-areas:"name kauf" "galerie kauf" "daten kauf" "text kauf";
  column-gap:clamp(1.5rem,4vw,3.5rem);row-gap:var(--s-5);
}
.paket-name{grid-area:name;font-size:var(--t-h1)}
.paket-name .kennung{font-size:.82em;color:var(--ink-2)}
.paket-galerie{grid-area:galerie}
.paket-text{grid-area:text}
.paket-bild{
  aspect-ratio:16/9;overflow:hidden;background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.paket-bild img{width:100%;height:100%;object-fit:cover}
/* Bildschirmfotos haben nicht immer 16:9: dann ganz zeigen statt zuschneiden. */
.paket-bild.passend img{object-fit:contain}
.daumen{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.daumen button{
  display:block;width:96px;padding:0;overflow:hidden;cursor:pointer;
  background:var(--sunken);border:1px solid var(--line-ui);border-radius:var(--r);
}
.daumen button:hover{border-color:var(--ink-2)}
.daumen img{width:100%;aspect-ratio:16/9;object-fit:cover}
.paket-videos{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:var(--s-4)}
.paket-videos a{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-sm)}

/* Das Datenblatt: was man vor dem Kauf wissen will, Zeile für Zeile mit
   einer Linie dazwischen — und alles aus der Dokumentation, nichts von
   Hand (build/shop_bilder.py). */
.daten{
  grid-area:daten;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;
}
.daten>div{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--s-3);
  align-items:baseline;padding:.7rem var(--s-4);
}
.daten>div+div{border-top:1px solid var(--line)}
.daten dt{font:500 var(--t-xs)/1.4 var(--sans);color:var(--ink-3)}
.daten dd{margin:0;font-size:var(--t-sm);color:var(--ink)}
.daten .mono{font-size:var(--t-xs)}

/* Die Kaufkarte bleibt beim Lesen der Beschreibung im Bild. */
.kauf{
  grid-area:kauf;position:sticky;top:calc(var(--kopf-h) + var(--s-5));
  display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.kauf-preis{font:600 2rem/1 var(--mono);color:var(--ink)}
.kauf-preis .preis-art{font-size:var(--t-xs)}
.kauf-steuer,.kauf-hinweis{font-size:var(--t-xs);line-height:1.55;color:var(--ink-3)}
.kauf-hinweis{color:var(--ink-2)}
.kauf-aktion .kauf-slot,.kauf-aktion .knopf{width:100%}
.kauf-status{font-size:var(--t-sm);color:var(--ink-2)}
/* Leer bleibt die Statuszeile im Lesebaum (Vorleseprogramme melden, was
   hineinkommt), nimmt aber keinen Platz. */
.kauf-status:empty{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.kauf-wege{
  display:flex;flex-direction:column;gap:.15rem;padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
.kauf-wege a{
  display:inline-flex;align-items:center;gap:.45rem;padding:.35rem 0;
  font-size:var(--t-sm);color:var(--ink-2);
}
.kauf-wege a:hover{color:var(--ink)}

@media (max-width:960px){
  .paket-raster{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"name" "galerie" "kauf" "daten" "text";
  }
  .kauf{position:static}
}
@media (max-width:520px){
  .daten>div{grid-template-columns:minmax(0,1fr);gap:.1rem}
}

/* ── Fließtext aus Tebex ─────────────────────────────────────────────
   Beschreibungen und Seiten kommen als HTML (durch saeubern() gelaufen:
   nur diese Elemente, keine Klassen). Alles, was sie brauchen, wird hier
   über die Elemente gesetzt. */
.prosa{max-width:var(--w-text);color:var(--ink-2);font-size:1rem;line-height:1.7}
.prosa>*+*{margin-top:var(--s-4)}
.prosa h2{
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);
  font-size:var(--t-h2);line-height:1.2;color:var(--ink);
}
.prosa h3{font-size:var(--t-h3);color:var(--ink)}
.prosa strong{color:var(--ink);font-weight:600}
.prosa ul,.prosa ol{padding-left:1.3rem;list-style:disc}
.prosa ol{list-style:decimal}
.prosa li+li{margin-top:.4rem}
.prosa li::marker{color:var(--ink-3)}
.prosa a{text-decoration:underline;text-underline-offset:3px}
.prosa code{
  background:var(--surface-2);padding:.1em .35em;border-radius:var(--r-sm);
  font-size:.9em;color:var(--ink);
}
.prosa pre{
  overflow-x:auto;padding:var(--s-4);background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r);
}
.prosa pre code{background:none;padding:0}
.prosa blockquote{padding-left:var(--s-4);border-left:2px solid var(--line-2);color:var(--ink-2)}
.prosa img{border:1px solid var(--line);border-radius:var(--r)}
.prosa table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.prosa th,.prosa td{padding:.5rem .7rem;border:1px solid var(--line);text-align:left;vertical-align:top}
.prosa th{background:var(--surface);color:var(--ink)}
.prosa hr{border:0;border-top:1px solid var(--line)}
/* Der erste Absatz ist bei diesen Artikeln der Kurztext in Fett. */
.paket-text>p:first-child{font-size:1.1875rem;line-height:1.55;color:var(--ink)}

/* ── Warenkorb ───────────────────────────────────────────────────── */
.korb{padding-top:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.korb>h1{margin-bottom:var(--s-6);font-size:var(--t-h1)}
.korb-raster{
  display:grid;align-items:start;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr) 360px;
}
.korb-zeilen{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.korb-zeile{
  display:grid;align-items:center;gap:var(--s-2) var(--s-4);
  grid-template-columns:120px minmax(0,1fr) auto auto;
  padding:var(--s-4);border-bottom:1px solid var(--line);
}
.korb-zeile:last-child{border-bottom:0}
.korb-bild{aspect-ratio:16/9;overflow:hidden;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm)}
.korb-bild img{width:100%;height:100%;object-fit:cover}
.korb-name{font:600 var(--t-sm)/1.4 var(--sans)}
.korb-name a{color:var(--ink)}
.korb-titel{margin-top:.15rem;font-size:var(--t-xs);color:var(--ink-3)}
.korb-preis{font:600 var(--t-body)/1 var(--mono);text-align:right;white-space:nowrap}
.menge{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:var(--t-xs);color:var(--ink-3)}
.menge input{
  width:4.2rem;padding:.4rem .5rem;background:var(--sunken);color:var(--ink);
  border:1px solid var(--line-ui);border-radius:var(--r-sm);font:500 var(--t-sm) var(--mono);
}
.menge-fest{margin-top:.4rem;font-size:var(--t-xs);color:var(--ink-3)}
.korb-weg{gap:.35rem}

/* Ein Verweis mitten im Satz muss sich ohne Farbe vom Text abheben (WCAG
   1.4.1): zum umgebenden Grau liegt seine Farbe allein bei 1,3–1,8:1. */
:where(.seitenkopf-lede,.kauf-hinweis,.kauf-steuer,.kasse-hinweis,.kasse-fein,.anmeldung p,
       .dialog p,.hinweis p,.leer p,.noscript-hinweis p,.code-hilfe,.menge-fest) a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in oklab, currentColor 50%, transparent);
}
:where(.seitenkopf-lede,.kauf-hinweis,.kauf-steuer,.kasse-hinweis,.kasse-fein,.anmeldung p,
       .dialog p,.hinweis p,.leer p,.noscript-hinweis p,.code-hilfe,.menge-fest) a:hover{
  text-decoration-color:currentColor;
}

.korb-codes{margin-top:var(--s-5);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.korb-codes summary{cursor:pointer;color:var(--ink-2);font-size:var(--t-sm)}
.korb-codes summary:hover{color:var(--ink)}
.korb-codes[open] summary{margin-bottom:var(--s-4);color:var(--ink)}
.code-liste{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-4)}
.code-an{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);font-size:var(--t-sm)}
.code-block+.code-block{margin-top:var(--s-4)}
.code-form{display:flex;align-items:flex-end;gap:var(--s-2)}
.code-form label{flex:1;display:flex;flex-direction:column;gap:.35rem}
.code-name{font-size:var(--t-xs);color:var(--ink-3)}
.code-form input{
  width:100%;padding:.6rem .8rem;background:var(--sunken);color:var(--ink);
  border:1px solid var(--line-ui);border-radius:var(--r);font:400 var(--t-sm) var(--sans);
}
.code-form input:focus{outline:none;border-color:var(--accent)}
.code-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.code-hilfe{margin-top:.35rem;font-size:var(--t-xs);color:var(--ink-3)}

.korb-seite{
  position:sticky;top:calc(var(--kopf-h) + var(--s-4));
  display:flex;flex-direction:column;gap:var(--s-5);padding:var(--s-5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.summen{display:flex;flex-direction:column;gap:var(--s-2)}
.summen>div{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--t-sm);color:var(--ink-2)}
.summen dd{margin:0}
.summe-gesamt{
  padding-top:var(--s-3);border-top:1px solid var(--line);
  font-size:var(--t-body);color:var(--ink)!important;font-weight:600;
}
.summe-gesamt dd{font:600 1.375rem/1 var(--mono)}
/* Steht Gesamt allein da (keine Steuer), braucht es die Linie darüber nicht. */
.summe-gesamt:first-child{padding-top:0;border-top:0}

.anmeldung{padding-top:var(--s-4);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-2)}
.anmeldung h2{margin-bottom:.4rem;font:600 var(--t-body)/1.3 var(--sans);font-stretch:100%;letter-spacing:0;color:var(--ink)}
.anmelde-links{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-3)}
.anmeldung.ist-an p{display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.anmeldung.ist-an svg{color:var(--c-smaragd)}
.kasse{display:flex;flex-direction:column;gap:var(--s-3)}
.kasse-hinweis{font-size:var(--t-sm);color:var(--ink-2)}
.kasse-fein{font-size:var(--t-xs);line-height:1.55;color:var(--ink-3)}

.leer{padding-block:var(--s-7);text-align:center;color:var(--ink-2)}
.leer p+p{margin-top:var(--s-4)}
.hinweis{padding:var(--s-4);border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink-2)}
.hinweis p+p{margin-top:var(--s-3)}
.hinweis-fehler{border-color:var(--c-koralle)}

@media (max-width:960px){
  .korb-raster{grid-template-columns:minmax(0,1fr)}
  .korb-seite{position:static}
}
@media (max-width:640px){
  .korb-zeile{
    grid-template-columns:96px minmax(0,1fr);
    grid-template-areas:"bild text" "bild preis" ". weg";
  }
  .korb-bild{grid-area:bild;align-self:start}
  .korb-text{grid-area:text}
  .korb-preis{grid-area:preis;text-align:left}
  .korb-weg{grid-area:weg;justify-self:start}
  .code-form{flex-wrap:wrap}
  .code-form label{flex-basis:100%}
}

/* ── Fenster (Anmelden, Konto wechseln) ──────────────────────────────
   Das <dialog> des Browsers: Fokus gefangen, Esc schließt, der Rest der
   Seite ist gesperrt. Hier steht nur sein Aussehen. Es schwebt über der
   Seite und bekommt deshalb als Einziges einen Schatten. */
.dialog{
  width:min(92vw,460px);padding:var(--s-5);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.dialog::backdrop{background:rgba(8,6,12,.72)}
.dialog h2{margin-bottom:var(--s-3);font-size:var(--t-h3);line-height:1.3;font-stretch:94%;letter-spacing:-.012em}
.dialog p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}
.dialog p+p,.dialog p+.anmelde-links{margin-top:var(--s-3)}
.dialog .dialog-fein{font-size:var(--t-xs);color:var(--ink-3)}
.dialog-fuss{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-5)}
.dialog .anmelde-links{margin-top:var(--s-4)}
.leer-konto{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);text-align:left}

/* ── Meldungen ───────────────────────────────────────────────────── */
.meldungen{
  position:fixed;left:50%;bottom:var(--s-5);z-index:80;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:var(--s-2);width:min(92vw,520px);pointer-events:none;
}
.meldung{
  pointer-events:auto;padding:.75rem 1rem;font-size:var(--t-sm);line-height:1.5;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--shadow);
}
.meldung-fehler{border-color:var(--c-koralle)}

/* Fuß: das Container-div für Seiten aus Tebex trägt keinen eigenen Abstand. */
.site-foot nav div{display:contents}