/* =========================================================
   SchlafOase Hönig · schlafoase.css
   Design & Umsetzung (c) 2026 Egger Communications UG
   Palette: gemessen aus dem Bestand (Salbei #BFC6B8)
   Mobile-first · WCAG 2.2 AA · keine Google Fonts
   ========================================================= */

/* ---------- Schriften (lokal) ---------- */
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* =========================================================
   1 · DESIGN TOKENS  (Single Source of Truth für Farben)
   ========================================================= */
:root{
  /* Marke – aus dem Bestand gemessen */
  --brand:#BFC6B8;            /* Salbei – FLÄCHENfarbe, nie Text auf Weiß */
  --brand-light:#EDEFEA;
  --brand-lighter:#F6F7F4;
  --brand-dark:#8E9887;
  --brand-deep:#5F6B58;

  /* Flächen */
  --surface:#FFFFFF;
  --surface-warm:#F4F1F1;
  --surface-rose:#DCD2D0;
  --surface-night:#1F1D1A;
  --surface-ink:#141513;

  /* Text */
  --text:#232323;
  --text-strong:#000000;
  --text-muted:#666977;
  --text-on-brand:#232323;    /* dunkel! Weiß auf Salbei = 1.75 → verboten */
  --text-on-night:#EDEFEA;
  --text-muted-night:#A8B0A2;

  /* Akzent */
  --accent:#3A001D;
  --accent-soft:#6B1439;

  /* Struktur */
  --border:#DCD2D0;
  --border-soft:#E9E4E2;
  --gold:#D6B266;             /* Gold – aus dem Signet und dem 25-Jahre-Logo */
  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-sm:0 2px 8px rgba(31,29,26,.06);
  --shadow:0 8px 28px rgba(31,29,26,.10);
  --shadow-lg:0 24px 60px rgba(31,29,26,.18);

  /* Typo-Skala (fluid) */
  --fs-hero:clamp(2.25rem,1.4rem + 4.2vw,4.5rem);
  --fs-h2:clamp(1.75rem,1.2rem + 2.4vw,3rem);
  --fs-h3:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  --fs-lead:clamp(1.0625rem,1rem + .45vw,1.375rem);
  --fs-body:clamp(1rem,.97rem + .18vw,1.125rem);
  --fs-small:.875rem;

  /* Rhythmus */
  --sec-y:clamp(3.5rem,2rem + 7vw,8rem);
  --wrap:1200px;
  --wrap-narrow:760px;
  --gap:clamp(1rem,.6rem + 1.6vw,2rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.6s;
}

/* =========================================================
   2 · BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* Überlauf-Schnitt an der WURZEL (Regel minus vier). „clip" schneidet nur ab,
     ohne – anders als „hidden" – einen Scroll-Container zu erzeugen; damit
     bleiben position:sticky und scroll-padding-top heil. Das body-overflow-x
     unten ist nur der Rückfall für sehr alte Browser. So kann keine Seite mehr
     waagerecht wackeln – auch nicht bei extremer Schriftvergrößerung. */
  overflow-x:hidden;
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  /* Kein overflow-x am body mehr: das machte den body zum Scroll-Container und
     brach damit den position:sticky-Header. Der Überlauf-Schnitt sitzt jetzt
     an der Wurzel (html{overflow-x:clip}) – dort stört er sticky nicht. */
  /* Notbremse gegen waagerechten Überlauf: lange, nicht trennbare Wörter
     (z. B. „Polsterbettrahmen") brechen um, statt über den Rand zu laufen.
     overflow-wrap wird vererbt und greift nur, wenn ein Wort sonst nicht passt. */
  overflow-wrap:break-word;
}

h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;color:var(--text-strong);margin:0 0 .5em;text-wrap:balance}
h1{font-size:var(--fs-hero);font-weight:800}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:700}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{color:var(--accent-soft)}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.4em}

/* Sichtbarer Fokus – WCAG 2.4.7 */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.on-night :focus-visible,.hero :focus-visible{outline-color:var(--brand)}

/* Skip-Link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:9999;
  padding:1rem 1.5rem;background:var(--surface-ink);color:#fff;
  border-radius:0 0 var(--radius) 0;font-weight:600;
}
.skip:focus{left:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =========================================================
   3 · LAYOUT
   ========================================================= */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.sec{padding-block:var(--sec-y);position:relative}
.sec--brand{background:var(--brand-light)}
.sec--warm{background:var(--surface-warm)}
.sec--night{background:var(--surface-night);color:var(--text-on-night)}
.sec--night h1,.sec--night h2,.sec--night h3{color:#fff}
.sec--night p{color:var(--text-muted-night)}

.kicker{
  display:inline-flex;align-items:center;flex-wrap:wrap;max-width:100%;gap:.5rem;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-deep);margin:0 0 .875rem;
}
.kicker::before{content:'';width:28px;height:2px;background:var(--brand);border-radius:2px}
.sec--night .kicker{color:var(--brand)}
.lead{font-size:var(--fs-lead);color:var(--text-muted);max-width:62ch}
.sec--night .lead{color:var(--text-muted-night)}

.grid{display:grid;gap:var(--gap)}
/* Grid-Spalten dürfen unter ihre Inhaltsbreite schrumpfen.
   Ohne das gilt für Grid-Kinder min-width:auto = min-content: ein breiter Inhalt
   (Tabelle, langes Wort, Bild) drückt die Spalte dann über den Rechten Rand –
   sichtbar erst bei stark vergrößerter Schrift (Barrierefreiheits-Widget). Mit
   min-width:0 bricht der Inhalt statt zu überlaufen. */
.grid>*,.split>*,.deal-grid>*,.app-grid>*,.ftr-grid>*,.hero>*,.phero>*{min-width:0}
@media(min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,4vw,4.5rem)}
  .split--rev>*:first-child{order:2}
}

/* =========================================================
   4 · BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.6rem;min-height:48px;              /* Touch-Target ≥44px */
  max-width:100%;                                    /* nie breiter als der Platz */
  border-radius:var(--radius-pill);border:2px solid transparent;
  font:inherit;font-weight:600;font-size:1rem;text-decoration:none;
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--surface-ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#000;color:#fff;box-shadow:var(--shadow)}
.btn-brand{background:var(--brand);color:var(--text-on-brand);box-shadow:var(--shadow-sm)}  /* 11.99:1 */
.btn-brand:hover{background:var(--brand-dark);color:var(--text-strong)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:var(--text);color:var(--text-strong)}
/* Dunkle Flächen: .sec--night UND .app (der Schlaf-Score-Block).
   Ohne .app erbte der Knopf dort color:var(--text) = #232323 – also fast
   schwarze Schrift auf dunkelblauem Verlauf. Unsichtbar. */
.sec--night .btn-outline,
.app .btn-outline{color:var(--text-on-night);border-color:rgba(255,255,255,.34)}
.sec--night .btn-outline:hover,
.app .btn-outline:hover{border-color:var(--brand);color:#fff;background:rgba(255,255,255,.08)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}
.btn svg{width:1.15em;height:1.15em;flex:0 0 auto}

/* =========================================================
   5 · HEADER
   ========================================================= */
.hdr{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s;
}
.hdr.scrolled{box-shadow:0 6px 22px -14px rgba(31,29,26,.35);border-bottom-color:var(--border-soft)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text-strong)}
.brand img{width:46px;height:46px;border-radius:10px;object-fit:cover}
.brand b{font-weight:800;font-size:1.05rem;letter-spacing:-.02em;line-height:1.1;display:block}
.brand span{font-size:.7rem;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}

.nav{display:none;align-items:center;gap:.35rem}
.nav a{
  padding:.55rem .8rem;border-radius:var(--radius-pill);
  color:var(--text);text-decoration:none;font-weight:500;font-size:.9375rem;
  transition:background .18s,color .18s;
}
.nav a:hover{background:var(--brand-light);color:var(--text-strong)}
.nav .btn{margin-left:.4rem;padding:.65rem 1.15rem;min-height:44px}
@media(min-width:1060px){.nav{display:flex}.burger{display:none}}

.burger{
  display:grid;place-items:center;width:48px;height:48px;
  background:none;border:1px solid var(--border);border-radius:12px;cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:.25s var(--ease)}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{
  display:none;flex-direction:column;gap:.2rem;
  padding:1rem 0 1.5rem;border-top:1px solid var(--border-soft);
}
.mnav.open{display:flex}
.mnav a{padding:.85rem .5rem;color:var(--text);text-decoration:none;font-weight:500;border-radius:10px;min-height:48px;display:flex;align-items:center}
.mnav a:hover{background:var(--brand-light)}
.mnav .btn{margin-top:.6rem;justify-content:center}
@media(min-width:1060px){.mnav{display:none !important}}

/* =========================================================
   6 · HERO mit Video-Storytelling
   ========================================================= */
.hero{position:relative;min-height:clamp(420px,64vh,640px);display:grid;align-items:end;overflow:hidden;background:var(--surface-ink)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(15,14,13,.94) 0%,rgba(15,14,13,.62) 38%,rgba(15,14,13,.24) 70%,rgba(15,14,13,.42) 100%),
    radial-gradient(120% 80% at 50% 100%,rgba(191,198,184,.16),transparent 60%);
}
.hero-in{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,5rem)}
.hero h1{color:#fff;max-width:16ch;margin-bottom:.35em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero .lead{color:rgba(255,255,255,.9);max-width:50ch;font-weight:400}
.hero-badge{
  display:inline-flex;align-items:center;flex-wrap:wrap;max-width:100%;gap:.55rem;margin-bottom:1.25rem;
  padding:.45rem 1rem;border-radius:var(--radius-pill);
  background:rgba(191,198,184,.2);border:1px solid rgba(191,198,184,.42);
  color:#EDEFEA;font-size:.8125rem;font-weight:600;letter-spacing:.04em;backdrop-filter:blur(8px);
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(191,198,184,.7);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(191,198,184,.65)}
  70%{box-shadow:0 0 0 10px rgba(191,198,184,0)}
  100%{box-shadow:0 0 0 0 rgba(191,198,184,0)}
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* Vertrauens-Leiste */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:clamp(2rem,4vw,3.25rem);background:rgba(255,255,255,.14);border-radius:var(--radius);overflow:hidden}
@media(min-width:760px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust div,.trust .t-cell{background:rgba(20,21,19,.55);backdrop-filter:blur(10px);padding:1.1rem 1rem;text-align:center}
.trust b{display:block;color:#fff;font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.trust span{display:block;color:rgba(237,239,234,.78);font-size:.75rem;margin-top:.15rem;letter-spacing:.03em}

/* Video-Steuerung */
.vctrl{
  position:absolute;right:1rem;bottom:1rem;z-index:3;display:flex;gap:.5rem;
}
.vctrl button{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(20,21,19,.55);color:#fff;backdrop-filter:blur(8px);
}
.vctrl button:hover{background:rgba(20,21,19,.8)}
.vctrl svg{width:18px;height:18px}

/* Scroll-Hinweis */
.scroll-cue{position:absolute;left:50%;bottom:1.2rem;z-index:3;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;display:grid;justify-items:center;gap:.4rem}
.scroll-cue i{display:block;width:1px;height:26px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.8));animation:cue 2s infinite}
@keyframes cue{0%{opacity:0;transform:scaleY(.3)}50%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* =========================================================
   7 · STORY-VIDEO (Sektion, cinematisch)
   ========================================================= */
.story{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#000}
.story video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.story-cap{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(1.25rem,3vw,2.25rem);
  background:linear-gradient(to top,rgba(15,14,13,.9),transparent);
  color:#fff;pointer-events:none;
}
.story-cap p{margin:0;font-size:var(--fs-small);color:rgba(255,255,255,.85);max-width:60ch}

/* =========================================================
   8 · AUDIO-PLAYER  ·  Silvia Hönigs echte Stimme
   ========================================================= */
.audio{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-top:1.75rem;padding:.7rem .95rem .7rem .7rem;
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);
  width:fit-content;max-width:100%;
}
.sec--brand .audio,.sec--warm .audio{background:rgba(255,255,255,.75);backdrop-filter:blur(6px)}
.sec--night .audio{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}

.audio-btn{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--brand);color:var(--text-on-brand);
  transition:transform .18s var(--ease),background .18s;
}
.audio-btn:hover{transform:scale(1.06);background:var(--brand-dark)}
.audio-btn svg{width:18px;height:18px}
.audio-btn .ico-pause{display:none}
.audio.playing .audio-btn .ico-play{display:none}
.audio.playing .audio-btn .ico-pause{display:block}

.audio-meta{display:grid;gap:.15rem;min-width:0}
.audio-title{font-size:.875rem;font-weight:600;color:var(--text-strong);line-height:1.3}
.sec--night .audio-title{color:#fff}
.audio-sub{font-size:.75rem;color:var(--text-muted);letter-spacing:.02em}
.sec--night .audio-sub{color:var(--text-muted-night)}

/* Wellenform-Animation, nur bei Wiedergabe */
.audio-wave{display:flex;align-items:flex-end;gap:2px;height:20px;margin-left:.2rem}
.audio-wave i{width:3px;height:5px;border-radius:2px;background:var(--brand-dark);opacity:.45;transition:opacity .2s}
.audio.playing .audio-wave i{opacity:1;animation:wave .9s ease-in-out infinite}
.audio.playing .audio-wave i:nth-child(2){animation-delay:.12s}
.audio.playing .audio-wave i:nth-child(3){animation-delay:.24s}
.audio.playing .audio-wave i:nth-child(4){animation-delay:.36s}
.audio.playing .audio-wave i:nth-child(5){animation-delay:.48s}
@keyframes wave{0%,100%{height:5px}50%{height:19px}}
@media (prefers-reduced-motion:reduce){.audio.playing .audio-wave i{animation:none;height:12px}}

.audio-time{font-size:.75rem;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-left:auto;padding-left:.5rem}
.audio-bar{flex:1 1 100%;height:4px;border-radius:2px;background:var(--border-soft);overflow:hidden;margin-top:.1rem;min-width:120px}
.audio-bar i{display:block;height:100%;width:0;background:var(--brand-dark);border-radius:2px;transition:width .2s linear}

/* =========================================================
   9 · CARDS
   ========================================================= */
.card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--brand);color:inherit}
.card-img{aspect-ratio:16/10;overflow:hidden;background:var(--brand-lighter)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
/* Porträts: Bildmitte auf das Gesicht legen, nicht auf die geometrische Mitte */
.card-img--face img{object-position:center 18%}
.img-face{object-position:center 20%}
.card-body{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.125rem;margin-bottom:.35em}
.card p{font-size:.9375rem;color:var(--text-muted);margin-bottom:1rem}
.card-more{margin-top:auto;font-weight:600;font-size:.875rem;color:var(--accent);display:inline-flex;align-items:center;gap:.35rem}
.card:hover .card-more{gap:.6rem}
.card-more span{transition:transform .25s var(--ease)}
.card:hover .card-more span{transform:translateX(3px)}

/* Feature-Kacheln */
.tile{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:1.5rem}
.tile .n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--brand);color:var(--text-on-brand);font-weight:800;font-size:.9rem;margin-bottom:.85rem}
.tile h3{font-size:1.0625rem}
.tile p{font-size:.9375rem;color:var(--text-muted);margin:0}

/* Team */
.person{text-align:center}
.person img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 18%;border-radius:var(--radius);margin-bottom:.9rem;background:var(--brand-lighter)}
.person b{display:block;font-size:1.0625rem;color:var(--text-strong)}
.person span{font-size:.875rem;color:var(--text-muted)}

/* Zitat */
.quote{
  border-left:4px solid var(--brand);padding:.25rem 0 .25rem 1.5rem;
  font-size:var(--fs-lead);font-style:italic;color:var(--text);max-width:56ch;
}
.quote cite{display:block;margin-top:.75rem;font-size:.875rem;font-style:normal;color:var(--text-muted)}

/* Fakten-Block (GEO: zitierfähig) */
.facts{display:grid;gap:.75rem;padding:1.5rem;background:var(--brand-lighter);border-radius:var(--radius);border:1px solid var(--brand)}
.facts dl{display:grid;gap:.6rem;margin:0}
/* flex-wrap: bei stark vergrößerter Schrift rutscht der Wert (dd) unter das
   Label (dt), statt die Zeile über den rechten Rand zu schieben. */
.facts .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.15rem 1rem;padding-bottom:.6rem;border-bottom:1px dashed var(--brand-dark)}
.facts .row:last-child{border:0;padding-bottom:0}
.facts dt{color:var(--text-muted);font-size:.9375rem;margin:0}
.facts dd{margin:0;font-weight:600;color:var(--text-strong);text-align:right}

/* Öffnungszeiten */
/* table-layout:fixed = die Tabelle hält EXAKT ihre Containerbreite; die Spalten
   richten sich nicht mehr nach dem Inhalt. Dadurch kann die Öffnungszeiten-
   Tabelle nie mehr über den rechten Rand laufen – auch nicht, wenn die Schrift
   über das Barrierefreiheits-Widget stark vergrößert wird (dann bricht der
   Inhalt um, statt zu überlaufen). overflow-wrap bricht notfalls lange Wörter. */
.hours{width:100%;border-collapse:collapse;table-layout:fixed}
.hours th,.hours td{padding:.7rem .25rem;text-align:left;border-bottom:1px solid var(--border-soft);font-size:.9375rem;overflow-wrap:break-word}
.hours th{width:52%}
.hours td{width:48%}
.hours th{font-weight:500;color:var(--text-muted)}
.hours td{text-align:right;font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.hours tr.closed td{color:var(--text-muted);font-weight:400}
.hours tr.today{background:var(--brand-light)}
.hours tr.today th,.hours tr.today td{color:var(--text-strong);font-weight:700}

/* Liefergebiete */
.regions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.regions span{padding:.35rem .75rem;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--border-soft);font-size:.8125rem;color:var(--text-muted)}

/* =========================================================
   ANGEBOT DES MONATS – der Umsatzblock. Darf auffallen.
   ========================================================= */
.deal{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 120% at 100% 0%,rgba(191,198,184,.16),transparent 60%),
    linear-gradient(160deg,#232320 0%,#1A1A17 55%,#141513 100%);
}
/* dezentes Lichtband oben */
.deal::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.55;
}
.deal-grid{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media(min-width:960px){.deal-grid{grid-template-columns:.95fr 1.05fr}}

/* Bild: randlos, gerahmt, mit Glow – kein Kasten mehr */
.deal-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.deal-media img{width:100%;display:block;transition:transform .8s var(--ease)}
.deal-media:hover img{transform:scale(1.03)}
.deal-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,21,19,.55),transparent 45%);
  pointer-events:none;
}
.deal-ribbon{
  position:absolute;top:1rem;left:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem 1rem;border-radius:var(--radius-pill);
  background:var(--brand);color:var(--text-on-brand);
  font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
/* „++ News ++": roter Punkt mit sich entwickelndem Blur-Glow.
   Eigene Animation (nicht der grüne „pulse"), damit die anderen Punkte
   unberührt bleiben. Zwei Schatten: ein weicher, wachsender Rot-Blur (der
   „Blureffekt") plus ein aufgehender Ring, der nach außen verläuft. */
.deal-ribbon .dot{
  width:7px;height:7px;border-radius:50%;
  background:#e63329;
  box-shadow:0 0 6px 1px rgba(230,51,41,.9);
  animation:pulseRotBlur 1.9s ease-out infinite;
}
@keyframes pulseRotBlur{
  0%  {box-shadow:0 0 4px 1px rgba(230,51,41,.95), 0 0 0 0 rgba(230,51,41,.55)}
  70% {box-shadow:0 0 14px 5px rgba(230,51,41,.45), 0 0 0 13px rgba(230,51,41,0)}
  100%{box-shadow:0 0 4px 1px rgba(230,51,41,0),   0 0 0 0 rgba(230,51,41,0)}
}
@media (prefers-reduced-motion: reduce){
  .deal-ribbon .dot{animation:none;box-shadow:0 0 8px 2px rgba(230,51,41,.8)}
}
html.nomotion .deal-ribbon .dot{animation:none;box-shadow:0 0 8px 2px rgba(230,51,41,.8)}

/* Kopf */
.deal-kicker{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .9rem;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
}
.deal-kicker::before{content:'';width:28px;height:2px;background:var(--brand);border-radius:2px}
.deal h2{color:#fff;margin-bottom:.4em}
.deal-sub{color:var(--text-muted-night);font-size:var(--fs-lead);margin:0 0 1.5rem;max-width:44ch}

/* Maß-Chips */
.deal-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem}
.deal-chips span{
  padding:.4rem .85rem;border-radius:var(--radius-pill);
  background:rgba(191,198,184,.12);border:1px solid rgba(191,198,184,.28);
  color:#EDEFEA;font-size:.8125rem;font-weight:600;
}

/* Preis-Karten */
.deal-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.deal-item{
  display:flex;align-items:center;gap:1.25rem;
  padding:1.1rem 1.35rem;border-radius:var(--radius);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:background .25s var(--ease),border-color .25s,transform .25s var(--ease);
}
.deal-item:hover{background:rgba(191,198,184,.1);border-color:var(--brand);transform:translateX(4px)}
.deal-num{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:rgba(191,198,184,.18);color:var(--brand);font-weight:800;font-size:.875rem;
}
.deal-what{flex:1;min-width:0}
.deal-what b{display:block;color:#fff;font-size:.9375rem;font-weight:600;line-height:1.45}
.deal-what span{display:block;color:var(--text-muted-night);font-size:.8125rem;margin-top:.15rem}
.deal-price{
  flex:0 0 auto;text-align:right;color:var(--brand);
  font-size:1.375rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.deal-num{font-variant-numeric:tabular-nums}

/* Highlight-Variante */
.deal-item--top{background:rgba(191,198,184,.14);border-color:rgba(191,198,184,.45);position:relative}
/* keine erfundenen Labels – der Block hebt sich nur farblich ab */

.deal-foot{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.deal-note{margin:1.1rem 0 0;font-size:.8125rem;color:var(--text-muted-night)}

/* Mobil: Preis in eine eigene Zeile.
   Die waagerechte Zeile [Nr][Produkt][Preis] wurde auf schmalen Geräten – und
   erst recht mit vergrößerter Schrift des Barrierefreiheits-Widgets – zu eng;
   der nicht umbrechende Preis (€ 3.499,-) rutschte über den rechten Rand und
   wurde durch overflow-x:clip abgeschnitten (gemessen: ab ~360 px bzw. bei
   125 % Schrift schon bei 390 px). Auf eigener Zeile kann er NIE mehr
   abgeschnitten werden – unabhängig von Breite und Schriftgröße. */
@media (max-width:600px){
  .deal-item{flex-wrap:wrap;row-gap:.4rem}
  .deal-price{
    flex:1 0 100%;
    text-align:left;
    padding-left:0;          /* keine große Einrückung – bei 200 % Schrift
                                verdoppelt sich ein rem-Indent und schob den
                                Preis sonst wieder über den Rand. */
    white-space:normal;      /* der Preis darf notfalls umbrechen statt zu ragen */
    font-size:1.25rem;
  }
}

/* FAQ */
.faq{display:grid;gap:.6rem}
.faq details{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--brand)}
.faq summary{
  padding:1.1rem 1.35rem;cursor:pointer;font-weight:600;color:var(--text-strong);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none;min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;font-weight:400;color:var(--brand-deep);transition:transform .25s var(--ease);flex:0 0 auto;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--brand-lighter)}
.faq-body{padding:0 1.35rem 1.35rem;color:var(--text-muted);font-size:.9375rem}

/* =========================================================
   10 · SERVICE-TOOL EMBEDS + CONSENT
   ========================================================= */
.embed-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.35rem,3vw,2.25rem);box-shadow:var(--shadow-sm)}
.embed-title{margin:0 0 .5rem;font-size:1.125rem}
.embed-note{color:var(--text-muted);font-size:.9375rem;margin:0 0 1.15rem;max-width:60ch}
.embed-slot{margin-top:1.35rem}
.embed-slot iframe{display:block}
.embed-sig{margin:.9rem 0 0;font-size:.75rem;color:var(--text-muted)}
.embed-unsub{margin:1.25rem 0 0;font-size:.875rem}
.embed-unsub a{color:var(--text-muted)}
.hide{display:none !important}

.mapbox{position:relative;min-height:340px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--brand-lighter)}
.mapbox iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.map-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;text-align:center;padding:2rem;min-height:340px}
.map-ph p{margin:0;max-width:44ch;color:var(--text-muted);font-size:.9375rem}

.cookiebar{
  /* Mittig auf der Seite, als schwebende Karte in transparentem Weiß.
     Sie liegt über allem, lässt die Seite aber durchscheinen. */
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);
  z-index:2147483100;width:min(660px,calc(100vw - 2rem));max-height:calc(100vh - 3rem);
  overflow-y:auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;
  padding:clamp(1.6rem,3.5vw,2.25rem);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(255,255,255,.75);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 90px rgba(20,21,19,.28), 0 2px 0 rgba(255,255,255,.6) inset;
  color:var(--text);
}
.cookiebar p{margin:0;font-size:1rem;line-height:1.65;max-width:60ch;color:var(--text)}
.cookiebar .actions{width:100%;justify-content:flex-end}
.cookiebar a{color:var(--brand-deep);text-decoration:underline;font-weight:600}
.cookiebar .actions{display:flex;flex-wrap:wrap;gap:.5rem}
.cookiebar .btn-outline{border-color:var(--brand-dark);color:var(--text-strong);background:rgba(255,255,255,.55)}
.cookiebar .btn-outline:hover{border-color:var(--brand-deep);background:#fff}

/* sanfter Auftritt – die Karte steigt auf, statt zu springen */
html.js .cookiebar{animation:ccAuf .7s cubic-bezier(.16,1,.3,1) .35s both}
@keyframes ccAuf{
  from{opacity:0;transform:translate(-50%,-46%) scale(.96)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media (prefers-reduced-motion: reduce){html.js .cookiebar{animation:none}}
html.nomotion .cookiebar{animation:none}

@media (max-width:640px){
  .cookiebar .actions{justify-content:stretch}
  .cookiebar .actions .btn{flex:1 1 100%;justify-content:center}
}

.cc-modal{position:fixed;inset:0;z-index:2147483200;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(20,21,19,.62);backdrop-filter:blur(4px)}
.cc-modal.open{display:flex}
.cc-box{width:min(720px,100%);max-height:88vh;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.cc-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-soft)}
.cc-head h3{margin:0;font-size:1.125rem}
.cc-x{background:none;border:0;font-size:1.75rem;line-height:1;cursor:pointer;color:var(--text-muted);width:44px;height:44px}
.cc-body{padding:1.25rem 1.5rem;overflow-y:auto}
.cc-intro{margin:0 0 1.25rem;font-size:.9375rem;color:var(--text-muted)}
.cc-cat{border:1px solid var(--border-soft);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}
.cc-cat-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cc-badge{margin-left:.5rem;padding:.15rem .55rem;border-radius:var(--radius-pill);background:var(--brand-light);color:var(--brand-deep);font-size:.7rem;font-weight:700}
.cc-desc{margin:.625rem 0 0;font-size:.875rem;color:var(--text-muted)}
.cc-svc{margin:.75rem 0 0;padding-left:1.1rem;font-size:.8125rem;color:var(--text-muted)}
.cc-sw{flex:0 0 auto;width:50px;height:28px;border-radius:var(--radius-pill);background:var(--border);border:0;position:relative;cursor:pointer;transition:background .2s}
.cc-sw::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.cc-sw.on{background:var(--brand-deep)}
.cc-sw.on::after{transform:translateX(22px)}
.cc-sw.fixed{background:var(--brand-deep);opacity:.5;cursor:not-allowed}
.cc-sw.fixed::after{transform:translateX(22px)}
.cc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border-top:1px solid var(--border-soft)}
.cc-links{font-size:.875rem;color:var(--text-muted)}
.cc-btns{display:flex;flex-wrap:wrap;gap:.5rem}
/* ---------------------------------------------------------
   FLOATING-ELEMENTE – zwei Seiten, kollisionsfrei

   RECHTS                        LINKS
   ▲ Nach oben   (über Chat)     ♿ Barrierefreiheit
   💬 Chat-Bubble (fremd, fix)   🍪 Consent

   Die Chat-Bubble des Service-Tools sitzt fest bei
   bottom:0 / right:0, ist 96×96 px groß (z-index 2147483000)
   und bleibt genau dort. Rechts stapeln wir nur den
   Nach-oben-Button darüber; alles andere geht nach links.
   --------------------------------------------------------- */
:root{
  --fab:46px;              /* Durchmesser der Floating-Buttons */
  --fab-chat:1rem;         /* solange KEIN Chat geladen ist    */
  --fab-gap:4rem;          /* Abstand zwischen den Buttons     */
}
/* Sobald der Chat geladen ist (nach Consent), rückt der
   Nach-oben-Button über die Chat-Bubble. */
html.chat-on{--fab-chat:6.75rem}

@media (max-width:400px){
  :root{--fab:44px;--fab-gap:3.75rem}
}

/* LINKS UNTEN · Consent */
.cookie-reopen{
  position:fixed;left:1rem;bottom:1rem;z-index:2147482900;
  width:var(--fab);height:var(--fab);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:var(--surface);color:var(--brand-deep);
  border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform .18s var(--ease),background .18s;
}
.cookie-reopen:hover{transform:scale(1.08);background:var(--brand-lighter)}
.cookie-reopen svg{width:22px;height:22px}

/* =========================================================
   11 · FORMULAR
   ========================================================= */
.cform{display:grid;gap:1.1rem}
.f-row{display:grid;gap:.4rem}
.f-row label{font-size:.875rem;font-weight:600;color:var(--text-strong)}
.f-row input,.f-row textarea,.f-row select{
  width:100%;padding:.85rem 1rem;min-height:48px;
  font:inherit;font-size:1rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  transition:border-color .18s,box-shadow .18s;
}
.f-row textarea{min-height:130px;resize:vertical}
.f-row input:focus,.f-row textarea:focus{outline:0;border-color:var(--brand-deep);box-shadow:0 0 0 3px rgba(191,198,184,.4)}
.f-check{display:flex;gap:.7rem;align-items:flex-start;font-size:.875rem;color:var(--text-muted)}
.f-check input{width:20px;height:20px;margin-top:.15rem;flex:0 0 auto;accent-color:var(--brand-deep)}
.f-hint{font-size:.8125rem;color:var(--text-muted);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font-size:.9375rem;min-height:1.4em}
.form-status.ok{color:#1a7f43;font-weight:600}
.form-status.err{color:#b3261e;font-weight:600}

/* =========================================================
   12 · FOOTER
   ========================================================= */
.ftr{background:var(--surface-ink);color:var(--text-muted-night);padding-block:clamp(3rem,5vw,4.5rem) 2rem}
.ftr a{color:var(--text-muted-night);text-decoration:none}
.ftr a:hover{color:var(--brand)}
.ftr h4{color:#fff;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 1rem}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.9375rem}
.ftr-grid{display:grid;gap:2.5rem}
/* Lange E-Mail-Adressen/Links im Footer dürfen umbrechen statt überzulaufen. */
.ftr a{overflow-wrap:anywhere}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ftr-brand img{width:150px;margin-bottom:1.1rem;filter:brightness(0) invert(1);opacity:.92}
.ftr-brand p{font-size:.9375rem;max-width:34ch}
.ftr-note{display:block;margin-top:1rem;padding:.75rem 1rem;background:rgba(191,198,184,.1);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;font-size:.875rem;color:#EDEFEA}
.ftr-bot{margin-top:3rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.8125rem}
.ftr-bot nav{display:flex;flex-wrap:wrap;gap:1rem}

/* RECHTS · Nach oben – direkt über der Chat-Bubble */
.totop{
  position:fixed;right:1rem;bottom:var(--fab-chat);
  z-index:2147482920;width:var(--fab);height:var(--fab);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);
  background:var(--surface-ink);color:#fff;border:0;box-shadow:var(--shadow);
  transition:opacity .25s,transform .25s,background .18s;
}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:#000}
.totop.show:hover{transform:scale(1.08)}
.totop svg{width:20px;height:20px}

/* =========================================================
   13 · SCROLL-REVEAL (Storytelling)
   ========================================================= */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}.reveal-d4{transition-delay:.4s}

/* Silvia-Porträt (Beratung): entwickelt sich beim Erscheinen sanft aus der
   Unschärfe heran und atmet danach ganz leise – ein schöner Fade, der von
   selbst läuft, ohne dass man mit der Maus darübergehen muss.
   Muster wie bei der freigestellten Frau: Einblenden per TRANSITION, das
   ruhige Atmen per ANIMATION – so beißen sich die transform-Werte nicht. */
.beratung-portrait{
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  width:100%;height:auto;display:block;
}
html.js .beratung-portrait{
  opacity:0;transform:scale(1.05);filter:blur(9px);
  transition:opacity 1.3s cubic-bezier(.22,1,.36,1),
             transform 1.7s cubic-bezier(.22,1,.36,1),
             filter 1.4s cubic-bezier(.22,1,.36,1);
}
html.js .reveal.in .beratung-portrait{
  opacity:1;transform:none;filter:blur(0);
  animation:portraitAtmen 22s ease-in-out 2.2s infinite alternate;
}
@keyframes portraitAtmen{
  from{transform:scale(1)}
  to  {transform:scale(1.022)}
}
@media (prefers-reduced-motion:reduce){
  html.js .beratung-portrait,
  html.js .reveal.in .beratung-portrait{opacity:1;transform:none;filter:none;animation:none;transition:none}
}
html.nomotion .beratung-portrait{opacity:1;transform:none;filter:none;animation:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* Fortschrittsbalken */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-deep));z-index:1000;transition:width .1s linear}

/* =========================================================
   14 · BARRIEREFREIHEITS-WIDGET
   ========================================================= */
/* LINKS · Barrierefreiheit – direkt ÜBER dem Consent-Button */
.a11y-toggle{
  position:fixed;left:1rem;bottom:calc(1rem + var(--fab-gap));
  z-index:2147482910;width:var(--fab);height:var(--fab);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:var(--brand);color:var(--text-on-brand);
  border:0;box-shadow:var(--shadow);transition:transform .18s var(--ease),background .18s;
}
.a11y-toggle:hover{transform:scale(1.08);background:var(--brand-dark)}
.a11y-toggle svg{width:24px;height:24px}

/* Panel öffnet nach LINKS – bündig über dem Button */
.a11y-panel{
  position:fixed;left:1rem;bottom:calc(1rem + var(--fab-gap));
  z-index:2147482950;width:min(320px,calc(100vw - 2rem));
  max-height:min(70vh,540px);overflow-y:auto;display:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:1.25rem;
}
.a11y-panel.open{display:block}
.a11y-panel h3{font-size:1rem;margin:0}
.a11y-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.a11y-panel>p{font-size:.8125rem;color:var(--text-muted);margin:0 0 1rem}
.a11y-close{background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--text-muted);width:40px;height:40px;line-height:1}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border-soft);font-size:.875rem}
.a11y-row:last-of-type{border:0}
.a11y-fs{display:flex;align-items:center;gap:.5rem}
.a11y-fs button{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-weight:700}
.a11y-fs span{font-size:.8125rem;color:var(--text-muted);min-width:52px;text-align:center;font-variant-numeric:tabular-nums}
.a11y-sw{width:46px;height:26px;border-radius:var(--radius-pill);background:var(--border);border:0;position:relative;cursor:pointer;flex:0 0 auto;transition:background .2s}
.a11y-sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.a11y-sw.on{background:var(--brand-deep)}
.a11y-sw.on::after{transform:translateX(20px)}
.a11y-sw:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.a11y-reset{width:100%;margin-top:1rem;justify-content:center}

/* ---------- Barrierefreiheits-Modi ---------- */
html.a11y-contrast{filter:contrast(1.35)}
html.a11y-grayscale{filter:grayscale(1)}
html.a11y-contrast.a11y-grayscale{filter:contrast(1.35) grayscale(1)}
html.a11y-links a{text-decoration:underline !important;font-weight:600 !important;outline:1px dashed currentColor;outline-offset:2px}
html.a11y-readable body{font-family:Verdana,Tahoma,sans-serif !important;letter-spacing:.02em;word-spacing:.08em}
html.a11y-spacing body{line-height:2.1 !important}
html.a11y-spacing p{margin-bottom:1.6em !important}
html.a11y-nomotion *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M6 2l30 15-13 4-4 13z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 4 2,auto !important}

/* Lesehilfe (Zeilenlineal) */
.a11y-ruler{position:fixed;left:0;right:0;height:56px;pointer-events:none;z-index:2147482800;display:none;
  box-shadow:0 0 0 100vh rgba(20,21,19,.42);border-block:2px solid var(--brand)}
html.a11y-ruler-on .a11y-ruler{display:block}

/* Hinweis zur Vorlesefunktion */
.a11y-speak-note{margin-top:.75rem;padding:.6rem .75rem;background:var(--brand-lighter);border-radius:8px;font-size:.75rem;color:var(--brand-deep);line-height:1.45}

/* =========================================================
   15 · PRINT
   ========================================================= */
@media print{
  .hdr,.ftr,.a11y-toggle,.a11y-panel,.cookiebar,.cookie-reopen,.totop,.scrollbar,.audio,.vctrl,.a11y-ruler,video{display:none !important}
  body{color:#000;background:#fff}
  .sec{padding-block:1rem;page-break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}

/* =========================================================
   16 · CONSENT-GATE – Hinweis, wenn ohne Einwilligung geladen
        werden soll. Nichts wird geladen, bevor der Nutzer im
        Consent-Tool zugestimmt hat.
   ========================================================= */
.cc-hint{
  display:flex;gap:.9rem;align-items:flex-start;
  margin-top:1.15rem;padding:1rem 1.15rem;
  background:#FFF8E6;border:1px solid #E8C766;border-left:4px solid #C8940B;
  border-radius:var(--radius);color:#5A4409;
  animation:hintIn .35s var(--ease);
}
.cc-hint svg{width:22px;height:22px;flex:0 0 auto;margin-top:.15rem;color:#C8940B}
.cc-hint strong{display:block;font-size:.9375rem;color:#3F2F06;margin-bottom:.2rem}
.cc-hint p{margin:0 0 .9rem;font-size:.875rem;line-height:1.55;max-width:60ch;color:#5A4409}
.cc-hint em{font-style:normal;font-weight:700;color:#3F2F06}
.cc-hint .btn{padding:.6rem 1.1rem;min-height:44px;font-size:.9375rem}

@keyframes hintIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cc-hint{animation:none}}

/* im Maps-Platzhalter etwas kompakter */
.map-ph .cc-hint{margin-top:1rem;text-align:left}

/* =========================================================
   17 · SCHLAF-SCORE APP (PWA unter /schlaf-score/)
   Texte stammen 1:1 aus config/client.config.js der App.
   ========================================================= */
.app{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 100% at 15% 0%,rgba(191,198,184,.14),transparent 55%),
    linear-gradient(150deg,#1B2430 0%,#151C26 55%,#10151C 100%);
}
.app::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.5;
}
.app-grid{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media(min-width:960px){.app-grid{grid-template-columns:1.05fr .95fr}}

.app-badge{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;
  padding:.45rem 1rem;border-radius:var(--radius-pill);
  background:rgba(191,198,184,.14);border:1px solid rgba(191,198,184,.35);
  color:var(--brand);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.app h2{color:#fff}
.app-lead{color:#B9C2CE;font-size:var(--fs-lead);max-width:46ch;margin:0 0 1.75rem}

.app-facts{display:grid;gap:.6rem;margin:0 0 1.75rem;padding:0;list-style:none}
.app-facts li{
  display:flex;align-items:center;gap:.8rem;
  color:#DCE3EA;font-size:.9375rem;
}
.app-facts .ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(191,198,184,.16);font-size:1rem;
}
.app-facts b{color:#fff;font-weight:600}
.app-facts span{color:#96A2B0}

.app-cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.app-note{margin:1.25rem 0 0;font-size:.8125rem;color:#8A96A4}

/* Handy-Mockup */
.app-phone{
  position:relative;justify-self:center;
  width:min(280px,80vw);aspect-ratio:9/19.5;
  border-radius:38px;padding:10px;
  background:linear-gradient(160deg,#39434F,#20272F);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08) inset;
}
.app-screen{
  width:100%;height:100%;border-radius:29px;overflow:hidden;
  background:linear-gradient(170deg,#0F1620 0%,#161F2B 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;padding:1.5rem 1.25rem;text-align:center;
}
.app-screen img{width:54px;height:54px;border-radius:12px}
.app-screen .t{color:#fff;font-weight:700;font-size:1.0625rem;line-height:1.3}
.app-screen .s{color:#8FA0B2;font-size:.75rem;line-height:1.5}
.app-ring{
  width:112px;height:112px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--brand) 0turn .72turn,rgba(255,255,255,.08) .72turn 1turn);
  position:relative;
}
.app-ring::after{content:'';position:absolute;inset:9px;border-radius:50%;background:#111A24}
.app-ring b{position:relative;z-index:1;color:#fff;font-size:1.75rem;font-weight:800;letter-spacing:-.02em}
.app-ring b small{display:block;font-size:.5625rem;font-weight:600;color:var(--brand);letter-spacing:.1em;margin-top:-2px}
.app-notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:96px;height:22px;border-radius:0 0 14px 14px;background:#20272F;
}


/* =========================================================
   18 · STORYTELLING · Die echte Bettdecke
   ---------------------------------------------------------
   Ein echtes Foto (assets/img/decke-falten.webp – Ausschnitt
   aus dem Bettdecken-Bild des Bestands) legt sich beim Scrollen
   von oben über die Sektion und wird nach unten hin transparent.

   --p (0…1) kommt aus schlafoase.js:
   0 = Decke noch oben · 1 = Decke liegt.
   ========================================================= */
.duvet{position:relative;isolation:isolate}
.duvet > *{position:relative;z-index:2}

.duvet__cloth{
  position:absolute;
  left:0;right:0;top:0;
  z-index:1;
  pointer-events:none;

  /* wächst beim Scrollen nach unten: 0 → volle Höhe */
  height:calc(var(--p, 0) * var(--cloth-h, 340px));

  background-image:url('../img/decke-falten.webp');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;

  /* halbtransparent, nach unten ausblendend */
  opacity:calc(.30 + var(--p, 0) * .38);
  -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.96) 46%,
      rgba(0,0,0,.55) 74%,
      rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.96) 46%,
      rgba(0,0,0,.55) 74%,
      rgba(0,0,0,0) 100%);

  mix-blend-mode:multiply;      /* legt sich auf die Fläche, statt sie zu übermalen */
  will-change:height,opacity;
}

/* Auf dunklen Flächen aufhellen statt abdunkeln */
.sec--night .duvet__cloth,
.deal .duvet__cloth,
.app .duvet__cloth{
  mix-blend-mode:screen;
  opacity:calc(.10 + var(--p, 0) * .16);
}

/* Höhe je Sektion – die Decke soll nicht bis in den Text reichen */
.duvet{--cloth-h:clamp(220px,26vw,380px)}
.duvet--tall{--cloth-h:clamp(300px,34vw,480px)}

/* Weiche Kante nach unten zusätzlich abschatten – wirkt wie Stoffgewicht */
.duvet__cloth::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(31,29,26,.06));
  pointer-events:none;
}

/* ---------- Ruhe-Modus ---------- */
@media (prefers-reduced-motion: reduce){
  .duvet__cloth{height:var(--cloth-h);opacity:.34;transition:none}
}
html.a11y-nomotion .duvet__cloth{height:var(--cloth-h) !important;opacity:.30 !important}
html.a11y-contrast .duvet__cloth{display:none}

/* =========================================================
   19 · ANGEBOT DES MONATS – Bildergalerie
   ---------------------------------------------------------
   Vier Einzelbilder statt einer Collage. Nichts wird
   beschnitten: die Karten haben exakt das Seitenverhältnis
   der Bilder.

   MONATLICH AUSTAUSCHEN: einfach assets/img/angebot-1.webp
   bis angebot-4.webp ersetzen. Sonst nichts anzufassen.
   ========================================================= */
.shots{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.75rem,1.6vw,1.25rem);
  perspective:1200px;
}
.shot{
  position:relative;
  aspect-ratio:619 / 556;         /* exakt das Bildformat → kein Beschnitt */
  border-radius:var(--radius);
  overflow:hidden;
  background:#EDEFEA;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);

  /* Startzustand: gestapelt, flach, unsichtbar */
  opacity:0;
  transform:translateY(26px) scale(.94) rotate(0deg);
  transition:
    opacity .7s var(--ease),
    transform .9s var(--ease),
    box-shadow .35s var(--ease);
  will-change:transform,opacity;
}
/* Auffächern: jede Karte legt sich mit eigener Neigung ab */
.shot.in{opacity:1;transform:translateY(0) scale(1) rotate(var(--r,0deg))}
.shot:nth-child(1){--r:-2.2deg}
.shot:nth-child(2){--r: 1.8deg}
.shot:nth-child(3){--r: 1.4deg}
.shot:nth-child(4){--r:-1.6deg}
.shot:nth-child(1).in{transition-delay:.05s}
.shot:nth-child(2).in{transition-delay:.18s}
.shot:nth-child(3).in{transition-delay:.31s}
.shot:nth-child(4).in{transition-delay:.44s}

.shot img{
  width:100%;height:100%;
  object-fit:cover;              /* Ratio identisch → schneidet nichts weg */
  display:block;
  transition:transform .7s var(--ease);
}

/* Hover: Karte richtet sich auf, hebt ab, Licht wandert darüber */
.shot:hover,.shot:focus-within{
  z-index:3;
  transform:translateY(-10px) scale(1.05) rotate(0deg);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7);
}
.shot:hover img{transform:scale(1.06)}

.shot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,.30) 46%,
    rgba(255,255,255,.06) 56%,
    transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
}
.shot:hover::after{transform:translateX(120%)}

/* Ausführungs-Label auf der Karte */
.shot figcaption{
  position:absolute;left:.6rem;bottom:.6rem;z-index:2;
  padding:.3rem .7rem;border-radius:var(--radius-pill);
  background:rgba(20,21,19,.72);backdrop-filter:blur(6px);
  color:#EDEFEA;font-size:.75rem;font-weight:600;letter-spacing:.03em;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.shot:hover figcaption,.shot:focus-within figcaption{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .shot{opacity:1;transform:none;transition:none}
  .shot.in{transform:none;transition-delay:0s}
  .shot:hover{transform:none}
  .shot::after{display:none}
  .shot figcaption{opacity:1;transform:none}
}
html.a11y-nomotion .shot{opacity:1 !important;transform:none !important}
html.a11y-nomotion .shot::after{display:none}

/* =========================================================
   20 · KISSENTAXI – animierte Szene
   ---------------------------------------------------------
   Frau Hönig ist freigestellt (Transparenz), der Bogentext
   ist echter SVG-Text – dadurch bei jeder Größe gestochen
   scharf, für Screenreader lesbar und animierbar.
   Wortlaut 1:1 aus der Original-Grafik.
   ========================================================= */
.taxi{position:relative;display:grid;place-items:center;isolation:isolate}

/* --- Der Bogentext --- */
.taxi-arc{
  width:100%;height:auto;overflow:visible;position:relative;z-index:2;
  transform:translateY(-2.1rem);      /* sitzt höher – über den Händen */
}
/* Der Bogen wird von den Händen getragen: gleiche Schwingung wie Silvia,
   nur etwas gedämpft (9 px statt 11 px) und minimal verzögert – das gibt
   ihm Trägheit, als hinge er wirklich an ihren Händen. */
.taxi.in .taxi-arc{
  animation:taxiCarry 5.5s ease-in-out 1.55s infinite;
}
@keyframes taxiCarry{
  0%,100%{transform:translateY(-2.1rem) rotate(0deg)}
  50%    {transform:translateY(calc(-2.1rem - 9px)) rotate(.35deg)}
}
.taxi-arc text{
  fill:var(--text-strong);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.02em;
}
.taxi-arc .t1{font-size:60px}
.taxi-arc .t2{font-size:31px;fill:var(--text)}

/* Buchstaben purzeln nacheinander herein */
.taxi-arc .ch{
  opacity:0;
  transform:translateY(-26px) rotate(-8deg);
  transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease),transform .7s cubic-bezier(.34,1.56,.64,1);
}
.taxi.in .taxi-arc .ch{opacity:1;transform:none}

/* Buchstaben purzeln nacheinander – Staffelung */
.taxi.in .t1 .ch:nth-child(1){transition-delay:0.145s}
.taxi.in .t1 .ch:nth-child(2){transition-delay:0.190s}
.taxi.in .t1 .ch:nth-child(3){transition-delay:0.235s}
.taxi.in .t1 .ch:nth-child(4){transition-delay:0.280s}
.taxi.in .t1 .ch:nth-child(5){transition-delay:0.325s}
.taxi.in .t1 .ch:nth-child(6){transition-delay:0.370s}
.taxi.in .t1 .ch:nth-child(7){transition-delay:0.415s}
.taxi.in .t1 .ch:nth-child(8){transition-delay:0.460s}
.taxi.in .t1 .ch:nth-child(9){transition-delay:0.505s}
.taxi.in .t1 .ch:nth-child(10){transition-delay:0.550s}
.taxi.in .t1 .ch:nth-child(11){transition-delay:0.595s}
.taxi.in .t1 .ch:nth-child(12){transition-delay:0.640s}
.taxi.in .t1 .ch:nth-child(13){transition-delay:0.685s}
.taxi.in .t1 .ch:nth-child(14){transition-delay:0.730s}
.taxi.in .t1 .ch:nth-child(15){transition-delay:0.775s}
.taxi.in .t1 .ch:nth-child(16){transition-delay:0.820s}
.taxi.in .t1 .ch:nth-child(17){transition-delay:0.865s}
.taxi.in .t1 .ch:nth-child(18){transition-delay:0.910s}
.taxi.in .t1 .ch:nth-child(19){transition-delay:0.955s}
.taxi.in .t1 .ch:nth-child(20){transition-delay:1.000s}
.taxi.in .t1 .ch:nth-child(21){transition-delay:1.045s}
.taxi.in .t1 .ch:nth-child(22){transition-delay:1.090s}
.taxi.in .t1 .ch:nth-child(23){transition-delay:1.135s}
.taxi.in .t1 .ch:nth-child(24){transition-delay:1.180s}
.taxi.in .t1 .ch:nth-child(25){transition-delay:1.225s}
.taxi.in .t1 .ch:nth-child(26){transition-delay:1.270s}
.taxi.in .t1 .ch:nth-child(27){transition-delay:1.315s}
.taxi.in .t1 .ch:nth-child(28){transition-delay:1.360s}
.taxi.in .t1 .ch:nth-child(29){transition-delay:1.405s}
.taxi.in .t1 .ch:nth-child(30){transition-delay:1.450s}
.taxi.in .t2 .ch:nth-child(1){transition-delay:0.978s}
.taxi.in .t2 .ch:nth-child(2){transition-delay:1.006s}
.taxi.in .t2 .ch:nth-child(3){transition-delay:1.034s}
.taxi.in .t2 .ch:nth-child(4){transition-delay:1.062s}
.taxi.in .t2 .ch:nth-child(5){transition-delay:1.090s}
.taxi.in .t2 .ch:nth-child(6){transition-delay:1.118s}
.taxi.in .t2 .ch:nth-child(7){transition-delay:1.146s}
.taxi.in .t2 .ch:nth-child(8){transition-delay:1.174s}
.taxi.in .t2 .ch:nth-child(9){transition-delay:1.202s}
.taxi.in .t2 .ch:nth-child(10){transition-delay:1.230s}
.taxi.in .t2 .ch:nth-child(11){transition-delay:1.258s}
.taxi.in .t2 .ch:nth-child(12){transition-delay:1.286s}
.taxi.in .t2 .ch:nth-child(13){transition-delay:1.314s}
.taxi.in .t2 .ch:nth-child(14){transition-delay:1.342s}
.taxi.in .t2 .ch:nth-child(15){transition-delay:1.370s}
.taxi.in .t2 .ch:nth-child(16){transition-delay:1.398s}
.taxi.in .t2 .ch:nth-child(17){transition-delay:1.426s}
.taxi.in .t2 .ch:nth-child(18){transition-delay:1.454s}
.taxi.in .t2 .ch:nth-child(19){transition-delay:1.482s}
.taxi.in .t2 .ch:nth-child(20){transition-delay:1.510s}
.taxi.in .t2 .ch:nth-child(21){transition-delay:1.538s}
.taxi.in .t2 .ch:nth-child(22){transition-delay:1.566s}
.taxi.in .t2 .ch:nth-child(23){transition-delay:1.594s}
.taxi.in .t2 .ch:nth-child(24){transition-delay:1.622s}
.taxi.in .t2 .ch:nth-child(25){transition-delay:1.650s}
.taxi.in .t2 .ch:nth-child(26){transition-delay:1.678s}
.taxi.in .t2 .ch:nth-child(27){transition-delay:1.706s}
.taxi.in .t2 .ch:nth-child(28){transition-delay:1.734s}
.taxi.in .t2 .ch:nth-child(29){transition-delay:1.762s}
.taxi.in .t2 .ch:nth-child(30){transition-delay:1.790s}


/* --- Silvia, freigestellt --- */
.taxi-person{
  position:relative;z-index:1;
  width:min(88%,520px);
  margin-top:-5.5rem;             /* Text sitzt auf den Händen */
  filter:drop-shadow(0 26px 34px rgba(31,29,26,.22));
  opacity:0;
  transform:translateY(46px) scale(.94);
  transition:opacity .8s var(--ease),transform 1s cubic-bezier(.34,1.4,.64,1);
}
.taxi.in .taxi-person{
  opacity:1;transform:none;
  transition-delay:.35s;
  animation:taxiFloat 5.5s ease-in-out 1.4s infinite;
}
@keyframes taxiFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%    {transform:translateY(-11px) rotate(.4deg)}
}

/* --- Kissen, die sie hochwirft --- */
.taxi-pillow{
  position:absolute;z-index:0;
  width:clamp(52px,7vw,86px);aspect-ratio:1.22;
  border-radius:42% 58% 46% 54% / 54% 46% 54% 46%;
  background:linear-gradient(150deg,#FFFFFF,#E4E7DF);
  box-shadow:0 12px 26px -12px rgba(31,29,26,.4),inset 0 -7px 16px -8px rgba(31,29,26,.18);
  opacity:0;
}
.taxi.in .taxi-pillow{animation:pillowUp 4.6s ease-in-out infinite}
.taxi-pillow--a{left:2%;  top:52%; animation-delay:1.0s !important}
.taxi-pillow--b{right:1%; top:48%; animation-delay:2.0s !important}
.taxi-pillow--c{left:12%; top:68%; width:clamp(38px,4.5vw,58px); animation-delay:3.0s !important}
@keyframes pillowUp{
  0%   {opacity:0;transform:translateY(24px) rotate(0deg) scale(.85)}
  18%  {opacity:.95}
  70%  {opacity:.85}
  100% {opacity:0;transform:translateY(-96px) rotate(24deg) scale(1.04)}
}

/* --- Hover: sie winkt --- */
.taxi:hover .taxi-person{animation:taxiWave 1.1s ease-in-out}
@keyframes taxiWave{
  0%,100%{transform:rotate(0deg)}
  25%    {transform:rotate(-1.6deg)}
  75%    {transform:rotate(1.6deg)}
}

@media (prefers-reduced-motion: reduce){
  .taxi-arc .ch{opacity:1;transform:none;transition:none}
  .taxi-person{opacity:1;transform:none;animation:none !important;transition:none}
  .taxi-pillow{display:none}
}
html.a11y-nomotion .taxi-arc .ch{opacity:1;transform:none}
html.a11y-nomotion .taxi-person{opacity:1;transform:none;animation:none !important}
html.a11y-nomotion .taxi-pillow{display:none}

/* =========================================================
   16 · UNTERSEITEN  (page1 … page26)
   Bausteine, die nur auf den Unterseiten vorkommen.
   ========================================================= */

/* --- Seiten-Hero mit Bildband ------------------------------------------ */
.phero{
  position:relative;
  display:flex;align-items:flex-end;
  min-height:clamp(320px,46vh,520px);
  padding:clamp(2rem,5vw,4.5rem) 0 clamp(1.75rem,3.5vw,3rem);
  background:var(--brand-deep) center/cover no-repeat;
  color:#fff;
  isolation:isolate;
}
.phero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,22,19,.30) 0%,rgba(20,22,19,.55) 55%,rgba(20,22,19,.80) 100%);
}
.phero--plain{
  background:linear-gradient(160deg,var(--brand-deep) 0%,#2C3128 100%);
  min-height:auto;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);
}
.phero--plain::after{display:none}
.phero-in{position:relative;z-index:1}
.phero h1{
  color:#fff;margin:.35rem 0 0;max-width:22ch;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);line-height:1.1;
  text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.phero .lead{color:rgba(255,255,255,.90);max-width:60ch;margin-top:.9rem}

/* --- Brotkrümel -------------------------------------------------------- */
.crumb{
  font-size:.8125rem;letter-spacing:.04em;color:rgba(255,255,255,.82);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem;
}
.crumb a{color:rgba(255,255,255,.92);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.crumb a:hover{border-color:#fff}
.crumb [aria-current]{color:#fff;font-weight:600}
.phero--plain .crumb,.phero--plain .crumb a{color:rgba(255,255,255,.85)}

/* --- Bildband zwischen den Abschnitten --------------------------------- */
.band{
  position:relative;
  min-height:clamp(180px,26vh,320px);
  background:var(--brand-lighter) center/cover no-repeat fixed;
  background-attachment:scroll;                 /* iOS-sicher */
}
.band--text{
  display:flex;align-items:center;
  padding:clamp(2.5rem,6vw,5rem) 0;color:#fff;isolation:isolate;
}
.band--text::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,22,19,.42),rgba(20,22,19,.68));
}
.band-in{position:relative;z-index:1}
.band--text h2,.band--text h1{color:#fff;margin:0 0 .6rem;text-wrap:balance}
.band--text .lead{color:rgba(255,255,255,.92);margin:0}

/* --- Einzelbild -------------------------------------------------------- */
.fig{
  margin:2rem 0;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--brand-lighter);box-shadow:var(--shadow-md);
}
.fig img{display:block;width:100%;height:auto;max-height:74vh;object-fit:contain;background:var(--brand-lighter)}
.fig--wide{margin:0 auto 2.75rem;max-width:min(100%,880px)}
.fig{max-width:min(100%,880px);margin-inline:auto}

/* Produkt-Bildschau: eine oder zwei Aufnahmen, einheitlich im 16:10-Format,
   abgerundet, mit sanftem Auftritt. Wird auf den Produkt-Unterseiten genutzt,
   um die neuen Fotos schön zu integrieren. */
.showcase{display:grid;gap:1.25rem;grid-template-columns:1fr;max-width:min(100%,980px);margin:0 auto}
@media(min-width:720px){.showcase--2{grid-template-columns:1fr 1fr}}
.showcase figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--brand-lighter)}
.showcase img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s var(--ease)}
.showcase figure:hover img{transform:scale(1.04)}
.showcase figcaption{padding:.8rem 1.05rem;font-size:.875rem;color:var(--text-muted);background:var(--surface);border-top:1px solid var(--border-soft)}
@media (prefers-reduced-motion:reduce){.showcase img,.showcase figure:hover img{transition:none;transform:none}}
html.nomotion .showcase img{transition:none;transform:none}

/* Werkstatt-Galerie: Masonry-Raster, das die natürlichen Bildformate erhält
   (Querformat, Hochformat, quadratisch nebeneinander). Für die Serie aus der
   Meisterwerkstatt auf der Seite „Handgefertigte Betten". */
.gallery{columns:3;column-gap:1rem;max-width:min(100%,1120px);margin:0 auto}
@media(max-width:900px){.gallery{columns:2}}
@media(max-width:560px){.gallery{columns:1}}
.gallery figure{margin:0 0 1rem;break-inside:avoid;-webkit-column-break-inside:avoid;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--brand-lighter)}
.gallery img{display:block;width:100%;height:auto;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.gallery img,.gallery figure:hover img{transition:none;transform:none}}
html.nomotion .gallery img{transition:none;transform:none}

/* Farbfächer Spannbetttücher: echte Farbfelder mit Nummer statt Mini-Tabelle.
   Farbwerte 1:1 aus der Hellatex-Vorlage extrahiert. */
.farbraster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:.6rem}
.fb{display:flex;flex-direction:column;align-items:center;gap:.28rem}
.fb__c{width:100%;aspect-ratio:1;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.fb__n{font-size:.74rem;line-height:1;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* Regions-Verlinkung auf Produktseiten: Ort + Entfernung, auffindbarer Cluster */
.ortlinks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.15rem 1.75rem}
.ortlinks li{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;min-width:0;border-bottom:1px solid var(--border-soft);padding:.5rem 0}
.ortlinks a{font-weight:600;overflow-wrap:anywhere}
.ortlinks span{color:var(--text-muted);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.fig figcaption{
  padding:.85rem 1.1rem;font-size:.875rem;color:var(--text-muted);
  background:var(--surface);border-top:1px solid var(--border-soft);
}
.fig a{display:block}

/* --- Galerie der Unterseiten (nichts wird beschnitten) ----------------- */
.sec-head{max-width:62ch;margin-bottom:2.25rem}
.sec-head h2,.sec-head h3{text-wrap:balance}
.sec-head h3{font-size:1.125rem;color:var(--text-muted);font-weight:600;margin:.4rem 0 0}

.gal{
  display:grid;gap:clamp(1rem,2vw,1.75rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
}
.gal-i{
  display:flex;flex-direction:column;
  margin:0;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
a.gal-i{text-decoration:none;color:inherit}
.gal-i:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.gal-img{display:block;background:var(--brand-lighter)}
.gal-img img{display:block;width:100%;height:auto}      /* volles Motiv, kein Crop */
.gal-cap{
  display:block;padding:1.1rem 1.25rem 1.35rem;
  font-size:.9375rem;line-height:1.6;color:var(--text-muted);
}
.gal-cap strong{display:block;color:var(--text-strong);font-size:1.0625rem;line-height:1.35;margin-bottom:.45rem;font-weight:700}
.gal-cap span{display:block}
.gal-i--text{background:var(--brand-lighter);border-color:var(--brand)}
.gal-i--text .gal-cap{padding:1.5rem 1.5rem 1.65rem;color:var(--text)}
.sec--night .gal-i,.sec--night .gal-i--text{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.sec--night .gal-cap{color:rgba(255,255,255,.82)}
.sec--night .gal-cap strong{color:#fff}

/* --- Aufzählungen im Fließtext ---------------------------------------- */
.list{margin:1.25rem 0;padding:0;list-style:none;display:grid;gap:.6rem}
.list li{position:relative;padding-left:1.6rem;color:var(--text-muted);line-height:1.65}
.list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--brand);
}

/* --- Video-Abschnitt --------------------------------------------------- */
.vsec .vfig{margin:1.75rem 0 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#000}
.vplayer{display:block;width:100%;height:auto;background:#000}

/* nur für Screenreader (Original-Videobeschreibung) */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- Kontakt-Buttons einer Unterseite ---------------------------------- */
.cta-sec{padding-top:0}
/* Auf Liefergebiet- und Ortsseiten steht der Abschluss als eigenes dunkles
   Feld – dort braucht die Überschrift oben Luft. */
.cta-sec.sec--night{padding-block:clamp(3.25rem,6vw,5.5rem)}
.cta-sec .hero-cta{margin:0;flex-wrap:wrap}

/* --- Footer-/Panel-Überschriften (h2 statt h4 – Gliederung) ------------ */
.ftr-h{color:#fff;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 1rem;font-weight:700}
.a11y-h{margin:0;font-size:1.0625rem;font-weight:700;color:var(--text-strong)}

@media (max-width:640px){
  .phero{min-height:clamp(240px,36vh,340px)}
  .gal{grid-template-columns:1fr}
}

/* =========================================================
   17 · FEINSCHLIFF – Eleganz, Choreografie, Tiefe
   Alles rein visuell. Kein Eingriff in Text oder Vorlesefunktion.
   Alles abschaltbar über prefers-reduced-motion / A11y-Widget.
   ========================================================= */

/* --- Lesefortschritt: hauchdünne Linie am oberen Rand ------------------ */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:1200;
  transform-origin:0 50%;transform:scaleX(var(--sp,0));
  background:linear-gradient(90deg,var(--brand-deep),var(--brand),#E4C98A);
  box-shadow:0 0 12px rgba(191,198,184,.55);
  pointer-events:none;
}

/* --- Seiten-Hero: Ken Burns, Schleier, Titelauftritt -------------------- */
.phero{position:relative;overflow:hidden;background:var(--brand-deep)}
.phero-bg{
  position:absolute;inset:-6% -4%;
  background:center/cover no-repeat;
  transform:scale(1.06) translateY(calc(var(--py,0) * 26px));
  animation:kenburns 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.13) translate3d(-1.2%,-1.6%,0)}
}
.phero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 20% 100%, rgba(20,22,19,.86) 0%, rgba(20,22,19,.28) 60%, transparent 100%),
    linear-gradient(180deg, rgba(20,22,19,.34) 0%, rgba(20,22,19,.10) 38%, rgba(20,22,19,.80) 100%);
}
.phero::after{display:none}          /* alter Verlauf abgelöst */
.phero-in{position:relative;z-index:2}

/* Titel steigt zeilenweise auf */
.reveal-title{
  animation:titleUp 1.1s cubic-bezier(.16,1,.3,1) both;
  animation-delay:.08s;
}
@keyframes titleUp{
  from{opacity:0;transform:translateY(26px);clip-path:inset(0 0 100% 0)}
  to  {opacity:1;transform:none;clip-path:inset(0 0 -10% 0)}
}
.phero .crumb{animation:fadeIn .9s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* feiner Scroll-Hinweis */
.phero-cue{
  position:absolute;left:50%;bottom:1.1rem;z-index:2;
  width:1px;height:44px;translate:-50% 0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.85));
}
.phero-cue::after{
  content:'';position:absolute;left:50%;bottom:0;width:5px;height:5px;
  translate:-50% 0;border-radius:50%;background:#fff;
  animation:cueDrop 2.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes cueDrop{
  0%{transform:translateY(-40px);opacity:0}
  35%{opacity:1}
  75%{transform:translateY(0);opacity:1}
  100%{transform:translateY(4px);opacity:0}
}

/* --- Bildbänder mit echter Parallaxe ----------------------------------- */
.band{overflow:hidden;background-attachment:scroll}
.band, .band--text{
  background-position:center calc(50% + var(--py,0) * 40px);
  background-size:cover;
  transition:background-position .05s linear;
}
.band--text .band-in > *{
  animation:none;
}
.band--text.in h2,.band--text.in h1,.band--text.in .lead{
  animation:bandUp .9s cubic-bezier(.16,1,.3,1) both;
}
.band--text.in .lead{animation-delay:.12s}
@keyframes bandUp{
  from{opacity:0;transform:translateY(18px);filter:blur(6px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}

/* --- Einzelbild: schiebt sich elegant auf ------------------------------ */
.fig{position:relative}
html.js .fig img{
  transform:scale(1.06);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
html.js .fig.in img{transform:scale(1)}
html.js .fig::after{               /* Vorhang, der zur Seite gleitet */
  content:'';position:absolute;inset:0;background:var(--brand-lighter);
  transform-origin:100% 50%;transform:scaleX(1);
  transition:transform 1.05s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
html.js .fig.in::after{transform:scaleX(0)}
.sec--night .fig::after{background:#1B1D19}

/* --- Galerie: gestaffelter Auftritt + sanftes Heben -------------------- */
html.js .gal-i{
  opacity:0;transform:translateY(28px) scale(.985);
  transition:opacity .8s var(--ease), transform .8s var(--ease),
             box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.gal.in .gal-i{opacity:1;transform:none}
.gal.in .gal-i:nth-child(1){transition-delay:.02s}
.gal.in .gal-i:nth-child(2){transition-delay:.09s}
.gal.in .gal-i:nth-child(3){transition-delay:.16s}
.gal.in .gal-i:nth-child(4){transition-delay:.23s}
.gal.in .gal-i:nth-child(5){transition-delay:.30s}
.gal.in .gal-i:nth-child(6){transition-delay:.37s}
.gal.in .gal-i:nth-child(7){transition-delay:.44s}
.gal.in .gal-i:nth-child(8){transition-delay:.51s}
.gal.in .gal-i:nth-child(n+9){transition-delay:.58s}

.gal-img{overflow:hidden}
.gal-img img{transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease}
.gal-i:hover .gal-img img{transform:scale(1.06)}
.gal-i::after{                      /* Lichtkante beim Überfahren */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 46%,transparent 60%);
  transform:translateX(-120%);transition:transform .9s var(--ease);
}
.gal-i{position:relative}
.gal-i:hover::after{transform:translateX(120%)}
.gal-i--text{background:linear-gradient(160deg,var(--brand-lighter),#fff)}

/* --- Fließtext: Initial nur im ERSTEN Abschnitt, nicht in Rechtstexten -- */
body:not(.legal) .sec--lead .wrap-narrow > p:first-of-type::first-letter{
  float:left;font-size:3.3em;line-height:.86;
  padding:.06em .12em 0 0;margin-top:.04em;
  font-weight:800;color:var(--brand-deep);
  font-feature-settings:"case";
}
body:not(.legal) .sec--lead.sec--night .wrap-narrow > p:first-of-type::first-letter{color:var(--brand)}

/* --- Zierlinie zwischen den Abschnitten -------------------------------- */
.sec + .sec .wrap-narrow > h2:first-child::before,
.sec-head > h2::before{
  content:'';display:block;width:52px;height:2px;margin:0 0 1.1rem;
  background:linear-gradient(90deg,var(--brand-deep),transparent);
  transform-origin:0 50%;transform:scaleX(0);
  transition:transform .9s cubic-bezier(.16,1,.3,1) .1s;
}
.reveal.in > h2::before,.sec-head.in > h2::before,
.reveal.in h2::before{transform:scaleX(1)}

/* --- Aufzählung: Punkte zünden nacheinander ---------------------------- */
.list li::before{transform:scale(0);transition:transform .5s var(--ease)}
.reveal.in .list li::before{transform:scale(1)}
.reveal.in .list li:nth-child(2)::before{transition-delay:.06s}
.reveal.in .list li:nth-child(3)::before{transition-delay:.12s}
.reveal.in .list li:nth-child(4)::before{transition-delay:.18s}
.reveal.in .list li:nth-child(5)::before{transition-delay:.24s}
.reveal.in .list li:nth-child(n+6)::before{transition-delay:.3s}

/* --- Audio-Player: dezenter Auftritt (Pillenform bleibt unangetastet) --- */
.audio{
  position:relative;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.audio:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.audio.playing{box-shadow:0 0 0 3px rgba(191,198,184,.35),var(--shadow-md)}

/* Die einzelnen „Diesen Abschnitt anhören"-Player werden ausgeblendet
   (Wunsch Frederic, 23.07.2026: Barrierefreiheit ist über die Vorlese-Funktion
   des Widgets abgedeckt). BEWUSST nur display:none, NICHT aus dem DOM entfernt:
   die Widget-Funktion „Seite vorlesen" liest genau diese Aufnahmen als ECHTE
   Stimme vor (statt Roboterstimme) – dafür müssen die Elemente im DOM bleiben.
   Audio spielt auch aus display:none-Elementen, es braucht also keinen
   sichtbaren Player. */
.audio{display:none}

/* --- Sehr lange Seitentitel elegant setzen ----------------------------- */
.phero--long h1{
  font-size:clamp(1.45rem,.95rem + 1.5vw,2.35rem);
  line-height:1.2;max-width:30ch;font-weight:700;letter-spacing:-.01em;
}
.phero--long .phero-in{padding-block:1rem}

/* --- Video: Rahmen mit Lichtsaum --------------------------------------- */
.vfig{position:relative}
.vfig::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:linear-gradient(140deg,var(--brand),transparent 40%,var(--brand-deep));
  opacity:.55;
}
.vsec{position:relative;overflow:hidden}

/* --- FAQ: sanftes Aufklappen ------------------------------------------ */
.faq details{transition:border-color .25s,box-shadow .3s,transform .3s}
.faq details[open]{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.faq details[open] .faq-body{animation:faqOpen .45s ease both}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- Brotkrümel: Trennzeichen atmet ----------------------------------- */
.crumb a{transition:border-color .25s,color .25s}

/* --- Rücksicht: wer keine Bewegung will, bekommt keine ----------------- */
@media (prefers-reduced-motion: reduce){
  .phero-bg{animation:none;transform:none}
  .phero-cue::after{animation:none}
  .reveal-title{animation:none}
  .fig::after{display:none}
  .fig img{transform:none}
  .gal-i{opacity:1;transform:none;transition:none}
  .gal-i::after{display:none}
  .progress{display:none}
  .band,.band--text{background-position:center center}
}
html.nomotion .phero-bg{animation:none;transform:none}
html.nomotion .phero-cue::after{animation:none}
html.nomotion .fig::after{display:none}
html.nomotion .fig img{transform:none}
html.nomotion .gal-i{opacity:1;transform:none}
html.nomotion .progress{display:none}

@media (max-width:640px){
  body:not(.legal) .sec--lead .wrap-narrow > p:first-of-type::first-letter{font-size:2.6em}
  .phero-cue{display:none}
}

/* --- Bild und Text nebeneinander (ein Motiv, ein Gedanke) -------------- */
.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,3.5vw,3.25rem);
  align-items:center;
}
.split .fig,.split .fig--wide{margin:0;max-width:100%}
.split .gal{grid-template-columns:1fr;gap:1.25rem}
.split .gal-i--text{background:linear-gradient(160deg,#fff,var(--brand-lighter))}
.split .gal-cap{padding:1.75rem 1.85rem}
.sec--night .split .gal-i--text{background:rgba(255,255,255,.06)}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
}

/* --- Einzelne Karte: nicht über die halbe Breite ziehen ---------------- */
.gal > .gal-i:only-child{max-width:min(100%,680px);margin-inline:auto}

/* --- Textkarten großzügiger setzen ------------------------------------ */
.gal-i--text .gal-cap{font-size:.9875rem;line-height:1.7}
.gal-i--text .gal-cap strong{font-size:1.15rem;margin-bottom:.6rem}

/* --- Mehrere FAQ-Blöcke lückenlos aneinanderfügen ---------------------- */
.sec--faq{padding-block:clamp(2.5rem,5vw,4rem)}
.sec--faq + .sec--faq{padding-top:0}
.sec--faq + .sec--faq .duvet__cloth{display:none}
.sec--faq .faq{max-width:70ch;margin-inline:auto}

/* =========================================================
   18 · DECKE ÜBER DEN GELESENEN INHALT · GOLDENES SIGNET
   ========================================================= */

/* --- Kopf: nur noch das Signet, größer. Der Text steckt im Alt-Attribut. --- */
.brand{display:flex;align-items:center;gap:0;text-decoration:none}
/* Das goldene Signet (seit 14.07.2026 in der Navigation).
   OHNE Schatten – ausdrücklich so gewünscht (Frederic, 14.07.2026).
   Das Gold steht für sich, blank auf dem hellen Header. */
.brand img{
  height:clamp(52px,6vw,84px);width:auto;display:block;
  transition:transform .5s var(--ease),filter .5s var(--ease);
}
.brand:hover img{transform:scale(1.04)}
.brand span{display:none}                     /* Wortmarke steckt jetzt im Alt-Text */

/* --- Die Decke: legt sich langsam über das, was gelesen ist -------------- */
html.js .gal-i::before,
html.js .fig::before,
html.js .embed-card::before,
html.js .vfig .vcloth{
  content:'';
  position:absolute;left:0;right:0;top:0;
  height:calc(var(--c,0) * 100%);
  background-image:url('../img/decke-falten.webp');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  opacity:calc(.08 + var(--c,0) * .42);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.94) 52%,rgba(0,0,0,.5) 80%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.94) 52%,rgba(0,0,0,.5) 80%,transparent 100%);
  border-radius:inherit;
  pointer-events:none;
  z-index:3;
}
.embed-card{position:relative;overflow:hidden}
/* auf dunklem Grund liegt die Decke als Licht, nicht als Schatten */
.sec--night .gal-i::before,
.sec--night .fig::before,
.vfig .vcloth{mix-blend-mode:screen;opacity:calc(.05 + var(--c,0) * .22)}

/* --- Video: eigene Ebene über dem Bild ---------------------------------- */
.vfig{position:relative;overflow:hidden}
.vfig .vcloth{position:absolute;z-index:3}
.vfig::after{                       /* sanfter Lichtschleier, atmet langsam */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  animation:vBreath 18s ease-in-out infinite;
}
@keyframes vBreath{0%,100%{opacity:.35}50%{opacity:.9}}

@media (prefers-reduced-motion: reduce){
    .vfig::after{animation:none;opacity:.5}
  html.js .gal-i::before,html.js .fig::before,
  html.js .embed-card::before,html.js .vfig .vcloth{display:none}
}
html.nomotion html.nomotion .vfig::after{animation:none}
html.nomotion .gal-i::before,html.nomotion .fig::before,
html.nomotion .embed-card::before,html.nomotion .vfig .vcloth{display:none}

@media (max-width:640px){
}

/* --- Startseite: Story-Video erbt die Video-Ebenen, Bildunterschrift bleibt frei --- */
.story.vfig{overflow:visible}
.story.vfig .story-cap{position:relative;z-index:5}
.story.vfig video{border-radius:inherit}
.story.vfig .vcloth,.story.vfig .signet{border-radius:inherit}
.story.vfig::after{border-radius:inherit;bottom:auto;height:100%}

/* Auf Textkarten legt sich die Decke nur zart – Lesbarkeit geht vor Effekt */
html.js .gal-i--text::before{opacity:calc(.05 + var(--c,0) * .24)}
html.js .embed-card::before{opacity:calc(.05 + var(--c,0) * .22)}


/* =========================================================
   19 · (ENTFALLEN) GHOST-SIGNET
   Hier lag bis 14.07.2026 das goldene Signet, das alle 30 Sekunden
   über der Seitenmitte auftauchte, wuchs und wieder verging.

   Frau Hönig: „macht die Seite zu unruhig." – Also raus. Das Gold sitzt
   jetzt dort, wo es hingehört: als Logo oben in der Navigation.
   signet-gold.webp sitzt jetzt in der Navigation. Der Lichtreflex
   (signet-gold-shine.webp) und das alte graue logo-frei.webp liegen in
   _ZUM-LOESCHEN\\6-logo-alt-und-ghost-shine – gelöscht wurde nichts.
   ========================================================= */

/* =========================================================
   20 · VERTRAUENS-BÜHNE (Zertifikate)
   Freigestellte Person, Siegel des Fachverbands, echte Zertifikate
   als Stapel, der sich beim Sichtbarwerden auffächert.
   ========================================================= */
.trust-stage{
  position:relative;
  aspect-ratio:1000 / 720;
  display:block;
  isolation:isolate;
}

/* warmer Lichtschein hinter der Szene – gibt Tiefe */
.ts-glow{
  position:absolute;left:8%;top:6%;right:8%;bottom:14%;
  border-radius:50%;
  background:radial-gradient(60% 60% at 50% 45%,
      rgba(233,208,138,.42) 0%, rgba(233,208,138,.16) 45%, transparent 72%);
  filter:blur(24px);
  z-index:0;
  animation:tsGlow 9s ease-in-out infinite;
}
@keyframes tsGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

/* --- die Zertifikate: gestapelt, fächern sich nach links auf --- */
.trust-stage{overflow:visible}
.ts-papers{
  position:absolute;
  right:4%;
  top:13%;
  width:40%;
  aspect-ratio:700 / 900;
  z-index:3;               /* liegt ÜBER der Hand */
  perspective:1400px;
}
.ts-paper{
  position:absolute;inset:0;margin:0;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 44px -18px rgba(28,30,25,.55), 0 2px 8px rgba(28,30,25,.12);
  transform-origin:80% 100%;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1), opacity .9s ease, box-shadow .6s ease;
  will-change:transform;
}
.ts-paper img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* Ruhezustand: sauber aufeinander */
html.js .ts-paper--1{transform:rotate(0deg)}
html.js .ts-paper--2{transform:rotate(0deg) scale(.995)}
html.js .ts-paper--3{transform:rotate(0deg) scale(.99)}
html.js .ts-paper--4{transform:rotate(0deg) scale(.985)}

/* aufgefächert, sobald der Abschnitt gelesen wird */
html.js .trust-stage.in .ts-paper--1{transform:rotate(1.5deg) translate(0,0)}
html.js .trust-stage.in .ts-paper--2{transform:rotate(-5deg)  translate(-8%,-4%) scale(.985); transition-delay:.10s}
html.js .trust-stage.in .ts-paper--3{transform:rotate(-10deg) translate(-15%,-7%) scale(.97); transition-delay:.20s}
html.js .trust-stage.in .ts-paper--4{transform:rotate(-15deg) translate(-22%,-9%) scale(.955); transition-delay:.30s}

/* das oberste Blatt hebt sich beim Überfahren heraus */
.ts-papers:hover .ts-paper--1{
  transform:rotate(3deg) translateY(-3%) scale(1.05);
  box-shadow:0 30px 60px -20px rgba(28,30,25,.6);
}
.ts-jahr{
  position:absolute;left:0;right:0;bottom:0;
  padding:.6rem .8rem;
  font-size:.75rem;letter-spacing:.14em;font-weight:700;
  text-align:center;color:#fff;
  background:linear-gradient(0deg, rgba(28,30,25,.86), rgba(28,30,25,0));
}

/* --- das Siegel des Fachverbands: schwebt und atmet --- */
.ts-siegel{
  position:absolute;
  left:3%;top:2%;
  width:16%;height:auto;
  z-index:4;
  filter:drop-shadow(0 12px 28px rgba(28,30,25,.38));
  animation:tsSiegel 8s ease-in-out infinite;
  transform-origin:50% 50%;
}
/* bleibt im Rahmen: nur leichtes Heben und Neigen */
@keyframes tsSiegel{
  0%,100%{transform:translateY(0) rotate(-3deg) scale(1)}
  50%    {transform:translateY(-7px) rotate(2deg) scale(1.02)}
}

/* --- die freigestellte Person --- */
.ts-frau{
  position:absolute;
  left:-6%;bottom:-3%;
  width:78%;height:auto;
  z-index:2;               /* hinterste Ebene – die Papiere überdecken die Hand */
  filter:drop-shadow(0 22px 40px rgba(28,30,25,.22));
}
html.js .ts-frau{
  opacity:0;transform:translateY(20px) scale(.985);
  transition:opacity 1s var(--ease) .05s, transform 1.1s var(--ease) .05s;
}
html.js .trust-stage.in .ts-frau{opacity:1;transform:none}

@media (max-width:900px){
  .trust-stage{aspect-ratio:1000 / 780}
  .ts-papers{width:52%}
  .ts-frau{width:82%}
}

@media (prefers-reduced-motion: reduce){
  .ts-glow,.ts-siegel{animation:none}
  html.js .ts-paper{transition:none}
  html.js .ts-frau{opacity:1;transform:none;transition:none}
}
html.nomotion .ts-glow,html.nomotion .ts-siegel{animation:none}

/* =========================================================
   21 · BILD-BÜHNE (Spannbettlaken)
   Das ganze Motiv – samt Hintergrund – tritt als Einheit auf:
   sanft aufblenden, ein Lichtstreif zieht durch, danach lebt
   das Bild in einem sehr langsamen Ken-Burns weiter.
   ========================================================= */
.stage-photo{position:relative}
.stage-photo__frame{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  isolation:isolate;
}
.stage-photo img{
  display:block;width:100%;height:auto;
  transform-origin:58% 42%;
}

/* Startzustand: leicht herangezoomt, unscharf, unsichtbar */
html.js .stage-photo img{
  opacity:0;
  transform:scale(1.10);
  filter:blur(10px) saturate(.86);
  transition:opacity 1.5s cubic-bezier(.22,1,.36,1),
             transform 2.2s cubic-bezier(.22,1,.36,1),
             filter 1.6s cubic-bezier(.22,1,.36,1);
}
html.js .stage-photo__frame{
  clip-path:inset(0 0 100% 0);            /* der Rahmen öffnet sich von oben */
  transition:clip-path 1.3s cubic-bezier(.76,0,.24,1);
}

/* Auftritt, sobald der Abschnitt im Blick ist */
html.js .stage-photo.in .stage-photo__frame{clip-path:inset(0 0 0 0)}
html.js .stage-photo.in img{
  opacity:1;
  filter:blur(0) saturate(1);
  transform:scale(1);
  transition-delay:.25s;
  /* danach: sehr langsames Atmen des Bildes */
  animation:photoBreath 26s ease-in-out 3s infinite alternate;
}
@keyframes photoBreath{
  from{transform:scale(1)}
  to  {transform:scale(1.055)}
}

/* Lichtstreif – zieht genau einmal beim Erscheinen schräg durch */
.stage-photo__shine{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(104deg,
      transparent 36%, rgba(255,255,255,.42) 48%, rgba(255,255,255,.62) 51%,
      rgba(255,255,255,.42) 54%, transparent 66%);
  transform:translateX(-115%);
  opacity:0;
}
html.js .stage-photo.in .stage-photo__shine{
  animation:photoShine 1.6s cubic-bezier(.45,0,.25,1) .75s 1 forwards;
}
@keyframes photoShine{
  0%  {transform:translateX(-115%); opacity:0}
  18% {opacity:1}
  82% {opacity:1}
  100%{transform:translateX(115%);  opacity:0}
}

/* beim Überfahren hebt sich die Bühne leicht */
.stage-photo__frame{transition:box-shadow .6s var(--ease),transform .6s var(--ease)}
.stage-photo:hover .stage-photo__frame{
  box-shadow:0 30px 60px -22px rgba(28,30,25,.45);
  transform:translateY(-4px);
}

@media (prefers-reduced-motion: reduce){
  html.js .stage-photo img{opacity:1;transform:none;filter:none;animation:none}
  html.js .stage-photo__frame{clip-path:none}
  .stage-photo__shine{display:none}
}
html.nomotion .stage-photo img{opacity:1;transform:none;filter:none;animation:none}
html.nomotion .stage-photo__frame{clip-path:none}
html.nomotion .stage-photo__shine{display:none}

/* =========================================================
   22 · TEAM-AUFTRITT
   Alle drei starten deckungsgleich in der Mitte. Loulou kommt
   zuerst und zieht nach rechts, dann folgt Silvia nach links,
   zuletzt tritt Viktor in der Mitte hinzu. Jede Bewegung
   bremst weich aus – nichts stoppt hart.
   ========================================================= */
.cast{position:relative}

/* Startlage: übereinander in der Mitte, leicht kleiner, unsichtbar */
html.js .cast-i{
  opacity:0;
  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1),
    transform 1.55s cubic-bezier(.16,1,.3,1);   /* langes, sanftes Ausbremsen */
  will-change:transform,opacity;
}
/* Weg in die Mitte: eine Spaltenbreite plus der Spalt dazwischen */
html.js .cast-i--links {transform:translateX(calc(100% + var(--gap))) scale(.86)}
html.js .cast-i--mitte {transform:scale(.86)}
html.js .cast-i--rechts{transform:translateX(calc(-100% - var(--gap))) scale(.86)}

/* Endlage: jeder an seinem Platz */
html.js .cast.in .cast-i{opacity:1;transform:none}

/* Die Reihenfolge des Auftritts */
html.js .cast.in .cast-i--rechts{transition-delay:.05s, .55s}   /* Loulou: da, dann los */
html.js .cast.in .cast-i--links {transition-delay:.60s, 1.05s}  /* Silvia folgt nach links */
html.js .cast.in .cast-i--mitte {transition-delay:1.30s, 1.30s} /* Viktor kommt zuletzt dazu */

/* solange gewandert wird, liegt der Wandernde oben */
html.js .cast-i--rechts{z-index:3}
html.js .cast-i--links {z-index:2}
html.js .cast-i--mitte {z-index:1}

@media (max-width:900px){
  /* einspaltig: kein Wandern, nur ein ruhiges Aufblenden von unten */
  html.js .cast-i--links,
  html.js .cast-i--mitte,
  html.js .cast-i--rechts{transform:translateY(24px) scale(.97)}
  html.js .cast.in .cast-i--rechts{transition-delay:.05s}
  html.js .cast.in .cast-i--links {transition-delay:.25s}
  html.js .cast.in .cast-i--mitte {transition-delay:.45s}
}

@media (prefers-reduced-motion: reduce){
  html.js .cast-i{opacity:1;transform:none;transition:none}
}
html.nomotion .cast-i{opacity:1;transform:none;transition:none}

/* =========================================================
   23 · HERO – GEFALTETES VIDEO + EMBLEME
   ========================================================= */

/* --- Das Video blendet ganz langsam ein ---
   Die erste Szene (Silvia empfängt) läuft in Zeitlupe. Passend dazu taucht
   das Bild nicht auf, es ATMET sich ein: über gut drei Sekunden aus dem
   Dunkeln, mit einer Spur Weichzeichnung und einem Hauch Zoom, der sich
   beruhigt. Kein Schnitt, kein Auffalten – ein ruhiges Erwachen. */
html.js .hero-fade{
  opacity:0;
  animation:heroFade 4s ease-in-out .2s forwards;
}
/* Bewusst nur zwei Stufen mit ease-in-out: die Deckkraft steigt über die
   vollen vier Sekunden gleichmäßig an – vorn langsam, hinten sanft auslaufend.
   Eine ease-out-Kurve war hier falsch: sie riss die Deckkraft schon nach
   einer Sekunde auf 1 hoch – gemessen –, das Gegenteil von „ganz langsam". */
@keyframes heroFade{
  from{opacity:0; transform:scale(1.06); filter:blur(7px) brightness(.66)}
  to  {opacity:1; transform:scale(1);    filter:blur(0)   brightness(1)}
}

/* --- Embleme in der Vertrauensleiste --- */
.trust{overflow:visible}                       /* damit nichts abgeschnitten wird */
/* Alle vier Kacheln enden auf derselben Grundlinie – die Embleme stehen darüber. */
.t-cell{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:.7rem;
}
.t-emblem{
  display:block;margin:0 auto auto;              /* schiebt den Text nach unten */
  padding-bottom:.45rem;
  height:clamp(56px,5vw,70px);width:auto;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.t-emblem--zoom{height:clamp(60px,5.4vw,76px)}

/* 1 · Das Jubiläums-Logo fällt von oben herein und federt sachte aus */
html.js .t-emblem--fall{
  opacity:0;transform:translateY(-140px) rotate(-7deg);
  animation:emblemFall 1.35s cubic-bezier(.18,1.28,.32,1) 2.30s forwards;
}
@keyframes emblemFall{
  0%  {opacity:0;transform:translateY(-140px) rotate(-7deg)}
  35% {opacity:1}
  62% {transform:translateY(6px) rotate(1.4deg)}   /* kurz durchgefedert */
  80% {transform:translateY(-3px) rotate(-.6deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}
}

/* 2 · Das Qualitätszeichen schnellt von groß auf seine Größe herein */
html.js .t-emblem--zoom{
  opacity:0;transform:scale(3.4);filter:blur(7px) drop-shadow(0 6px 14px rgba(0,0,0,.45));
  animation:emblemSnap 1.1s cubic-bezier(.16,1,.3,1) 2.75s forwards;
}
@keyframes emblemSnap{
  0%  {opacity:0;transform:scale(3.4);filter:blur(7px) drop-shadow(0 6px 14px rgba(0,0,0,.45))}
  30% {opacity:1}
  78% {transform:scale(.94)}                        /* kurz unter Endgröße – der „Schnapp“ */
  100%{opacity:1;transform:scale(1);filter:blur(0)  drop-shadow(0 6px 14px rgba(0,0,0,.45))}
}

@media (max-width:640px){
  .t-emblem{height:38px}
  .t-emblem--zoom{height:42px}
}

/* Rücksicht: alles sofort ruhig an seinem Platz */
@media (prefers-reduced-motion: reduce){
  html.js .hero-fade{opacity:1;transform:none;filter:none;animation:none}
  html.js .t-emblem--fall,
  html.js .t-emblem--zoom{opacity:1;transform:none;filter:none;animation:none}
}
html.nomotion .hero-fade{opacity:1;transform:none;filter:none;animation:none}
html.nomotion .t-emblem--fall,
html.nomotion .t-emblem--zoom{opacity:1;transform:none;filter:none;animation:none}

/* =========================================================
   24 · KACHEL 3 (Uhr + Lächeln) und KACHEL 4 (Minikarte)
   ========================================================= */
.t-face,.t-map{
  display:block;margin:0 auto auto;padding-bottom:.45rem;
  height:clamp(58px,5.4vw,74px);width:auto;overflow:visible;
}
.t-map{height:clamp(96px,9vw,124px)}
.t-face{fill:none;stroke-linecap:round}

/* --- Uhr --- */
.t-ring{stroke:rgba(255,255,255,.9);stroke-width:2.4}
.t-tick{stroke:rgba(255,255,255,.5);stroke-width:1.8}
.t-pin{fill:var(--gold,#d6b266);stroke:none}
/* Der Drehpunkt MUSS auf dem Zifferblatt-Mittelpunkt liegen (cx=30, cy=30).
   Stand er daneben, wanderten die Zeiger mit jeder Umdrehung weiter heraus. */
.t-hand{stroke:#fff;stroke-width:2.2;transform-box:view-box;transform-origin:30px 30px}
.t-hand--h{stroke:rgba(255,255,255,.85)}
.t-hand--m{stroke:var(--gold,#d6b266)}
html.js .t-hand--m{animation:uhrZeiger 12s linear 3.1s infinite}
html.js .t-hand--h{animation:uhrZeiger 144s linear 3.1s infinite}
@keyframes uhrZeiger{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* --- Zwei Köpfe im Gespräch: sie zeichnen sich, dann wandert das Wort hin und her --- */
.t-head circle{stroke:#fff;stroke-width:2.4}
.t-head path{stroke:#fff;stroke-width:2.4}
html.js .t-head circle,html.js .t-head path{stroke-dasharray:60;stroke-dashoffset:60}
html.js .t-head--l circle{animation:kopfMalen .8s ease-out 3.15s forwards}
html.js .t-head--l path  {animation:kopfMalen .7s ease-out 3.45s forwards}
html.js .t-head--r circle{animation:kopfMalen .8s ease-out 3.65s forwards}
html.js .t-head--r path  {animation:kopfMalen .7s ease-out 3.95s forwards}
@keyframes kopfMalen{to{stroke-dashoffset:0}}

/* der eine spricht, der andere hört zu – das Gespräch läuft hin und her */
.t-w{fill:var(--gold);stroke:none;opacity:0}
html.js .t-w1{animation:redenHin 3.2s ease-in-out 4.4s infinite}
html.js .t-w2{animation:redenHin 3.2s ease-in-out 4.52s infinite}
html.js .t-w3{animation:redenHin 3.2s ease-in-out 4.64s infinite}
@keyframes redenHin{
  0%  {opacity:0;   transform:translateX(-4px)}
  10% {opacity:.95; transform:translateX(0)}
  40% {opacity:.95; transform:translateX(0)}
  50% {opacity:0;   transform:translateX(4px)}
  55% {opacity:0;   transform:translateX(4px)}
  65% {opacity:.95; transform:translateX(0)}   /* jetzt antwortet der andere */
  90% {opacity:.95; transform:translateX(0)}
  100%{opacity:0;   transform:translateX(-4px)}
}

/* --- Minikarte des Liefergebiets --- */
.t-map-rays line{
  stroke:rgba(255,255,255,.28);stroke-width:.5;
  stroke-dasharray:60;stroke-dashoffset:60;
}
html.js .t-map-rays line{animation:kartestrahl .9s ease-out calc(var(--d,0s) + 1.6s) forwards}
@keyframes kartestrahl{to{stroke-dashoffset:0}}

.t-map-dots circle{fill:rgba(255,255,255,.92)}
html.js .t-map-dots circle{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:kartepunkt .55s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + 1.6s) forwards}
@keyframes kartepunkt{
  0%{opacity:0;transform:scale(.2)}
  70%{opacity:1;transform:scale(1.45)}
  100%{opacity:1;transform:scale(1)}
}
.t-map-home circle{fill:var(--gold,#d6b266)}
.t-map-pulse{fill:var(--gold,#d6b266);opacity:.45;transform-box:fill-box;transform-origin:center}
html.js .t-map-pulse{animation:karteherz 2.6s ease-out 2.6s infinite}
@keyframes karteherz{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}

@media (max-width:640px){.t-face{height:40px}.t-map{height:78px}}

@media (prefers-reduced-motion: reduce){
  html.js .t-hand--m,html.js .t-hand--h,html.js .t-w,html.js .t-map-pulse{animation:none}
  html.js .t-head circle,html.js .t-head path{stroke-dashoffset:0;animation:none}
  html.js .t-w{opacity:.95}
  html.js .t-map-rays line{stroke-dashoffset:0;animation:none}
  html.js .t-map-dots circle{opacity:1;transform:none;animation:none}
}
html.nomotion .t-hand--m,html.nomotion .t-hand--h,html.nomotion .t-w,html.nomotion .t-map-pulse{animation:none}
html.nomotion .t-head circle,html.nomotion .t-head path{stroke-dashoffset:0;animation:none}
html.nomotion .t-w{opacity:.95}
html.nomotion .t-map-rays line{stroke-dashoffset:0;animation:none}
html.nomotion .t-map-dots circle{opacity:1;transform:none;animation:none}

/* =========================================================
   25 · LIEFERGEBIET – große Karte und Ortsliste
   ========================================================= */
.kartenbox{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%, #23261F 0%, var(--surface-ink) 70%);
  border:1px solid var(--border-soft);padding:.5rem;
}
.karte{display:block;width:100%;height:auto}

.karte-rays line{stroke:rgba(191,198,184,.28);stroke-width:1;
  stroke-dasharray:400;stroke-dashoffset:400}
html.js .kartenbox.in .karte-rays line{animation:kartestrahl 1.1s ease-out var(--d,0s) forwards}

.karte-dots circle{fill:#fff;transition:r .25s var(--ease), fill .25s var(--ease)}
.karte-dots text{
  fill:rgba(237,239,234,.82);font-size:12px;text-anchor:middle;
  font-weight:600;letter-spacing:.01em;paint-order:stroke;
  stroke:rgba(20,21,19,.85);stroke-width:3px;
}
.karte-dots a{cursor:pointer}
.karte-dots a:hover circle,.karte-dots a:focus-visible circle{fill:var(--gold);r:8}
.karte-dots a:hover text,.karte-dots a:focus-visible text{fill:#fff}
.karte-dots a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

html.js .kartenbox .karte-dots a{opacity:0}
html.js .kartenbox.in .karte-dots a{animation:kartepunkt .6s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}

.karte-home circle{fill:var(--gold)}
.karte-home text{fill:var(--gold);font-size:15px;font-weight:800;text-anchor:middle;
  paint-order:stroke;stroke:rgba(20,21,19,.9);stroke-width:4px}
.karte-puls{opacity:.5;transform-box:fill-box;transform-origin:center}
html.js .karte-puls{animation:karteherz 2.8s ease-out .8s infinite}

.ortliste th a{font-weight:700}
.ortliste thead th{color:var(--text-muted);font-weight:500;text-align:left}
.ortliste thead th:not(:first-child){text-align:right}
.ortliste td{font-variant-numeric:tabular-nums}
.ortliste tbody th{text-align:left;font-weight:600}

/* Die Kachel „39 Orte“ führt zur Übersicht */
a.t-cell{text-decoration:none;color:inherit;transition:background .3s var(--ease)}
a.t-cell:hover,a.t-cell:focus-visible{background:rgba(20,21,19,.72)}

@media (max-width:700px){
  .karte-dots text{font-size:16px}
  .karte-home text{font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  html.js .karte-rays line{stroke-dashoffset:0;animation:none}
  html.js .kartenbox .karte-dots a{opacity:1;animation:none}
  html.js .karte-puls{animation:none}
}
html.nomotion .karte-rays line{stroke-dashoffset:0;animation:none}
html.nomotion .kartenbox .karte-dots a{opacity:1;animation:none}
html.nomotion .karte-puls{animation:none}

/* =========================================================
   26 · ORTSSEITEN – Textspalte neben dem Bild
   ========================================================= */
.ort-text{max-width:60ch}
.ort-text h2{margin:.35rem 0 .9rem}
.ort-text p{margin:0 0 1rem}
.ort-text p:last-child{margin-bottom:0}
.ort-text .lead{color:var(--text);font-weight:500}
.sec--night .ort-text,.sec--night .ort-text p{color:var(--text-on-night)}

/* Bild und Text in der Ortsseite: das Bild darf die Spalte füllen */
.split .fig img{max-height:520px;width:100%;object-fit:cover}
@media (max-width:900px){
  .split .fig img{max-height:340px}
}

/* =========================================================
   27 · HERO-CHOREOGRAFIE
   Das Video klappt aus der Falte auf (0,2–2,05 s). Währenddessen
   treten die Inhalte nacheinander ein – nicht alle auf einmal.
   Ohne JavaScript und bei „Animationen reduzieren" steht alles sofort da.
   ========================================================= */
html.js .hero-in > *{
  opacity:0;
  animation:heroAuf 1.05s cubic-bezier(.16,1,.3,1) both;
}
html.js .hero-in .hero-badge{animation-delay:1.00s}
html.js .hero-in h1         {animation-delay:1.22s}
html.js .hero-in .lead      {animation-delay:1.58s}
html.js .hero-in .hero-cta  {animation-delay:1.84s}
html.js .hero-in .trust     {animation-delay:2.00s}

@keyframes heroAuf{
  from{opacity:0;transform:translateY(20px);filter:blur(7px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}

/* Die beiden Schaltflächen kommen einzeln und mit einem kleinen Sprung */
html.js .hero-cta .btn{opacity:0;animation:ctaPop .8s cubic-bezier(.2,1.3,.35,1) both}
html.js .hero-cta .btn:nth-child(1){animation-delay:1.92s}
html.js .hero-cta .btn:nth-child(2){animation-delay:2.06s}
@keyframes ctaPop{
  0%  {opacity:0;transform:translateY(12px) scale(.94)}
  60% {opacity:1}
  100%{opacity:1;transform:none}
}

/* Der Hinweis „Entdecken" zuletzt */
html.js .hero .scroll-cue{opacity:0;animation:heroAuf 1s ease-out 2.75s both}

/* --- Der Goldglanz wandert EINMAL über die Überschrift -------------------
   Der Streif liegt als ::after deckungsgleich über der H1 und wird auf die
   Buchstaben beschnitten – der Hintergrund bleibt unberührt. */
.hero h1{position:relative}
html.js .hero h1::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  pointer-events:none;
  background-image:linear-gradient(100deg,
      transparent 38%,
      rgba(255,255,255,.55) 46%,
      rgba(255,240,205,.95) 50%,
      var(--gold) 53%,
      rgba(255,255,255,.55) 57%,
      transparent 65%);
  background-size:260% 100%;
  background-position:230% 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  animation:h1Glanz 2.1s cubic-bezier(.35,.1,.25,1) 2.45s 1 both;
}
@keyframes h1Glanz{
  0%  {background-position:230% 0}
  100%{background-position:-60% 0}
}

@media (prefers-reduced-motion: reduce){
  html.js .hero-in > *,
  html.js .hero-cta .btn,
  html.js .hero .scroll-cue{opacity:1;transform:none;filter:none;animation:none}
  html.js .hero h1::after{display:none}
}
html.nomotion .hero-in > *,
html.nomotion .hero-cta .btn,
html.nomotion .hero .scroll-cue{opacity:1;transform:none;filter:none;animation:none}
html.nomotion .hero h1::after{display:none}

/* =========================================================
   28 · DATENSCHUTZERKLÄRUNG – abschnittsweise in den CI-Farben
   ========================================================= */
.ds-hell {background:var(--brand-lighter)}
.ds-brand{background:var(--brand-light)}

/* Kopf jedes Abschnitts: Nummer im Salbei-Kreis */
.ds-head{display:flex;gap:1.15rem;align-items:flex-start;margin-bottom:1.75rem}
/* Der Textblock (Überschrift + Vorspann) darf schrumpfen, sonst schiebt eine
   lange Überschrift wie „Allgemeine Hinweise und Pflichtinformationen" den
   Abschnittskopf bei großer Schrift über den rechten Rand. */
.ds-head>div{min-width:0}
.ds-num{
  flex:0 0 auto;display:grid;place-items:center;
  width:46px;height:46px;border-radius:14px;
  background:var(--brand);color:var(--text-on-brand);
  font-weight:800;font-size:1.0625rem;font-variant-numeric:tabular-nums;
  box-shadow:0 6px 18px -8px rgba(95,107,88,.6);
}
.ds-sec h2{margin:0 0 .35rem;font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem)}
.ds-vor{margin:0;color:var(--text-muted);font-size:1rem;line-height:1.55}
/* Lange URLs (z. B. maps.googleapis.com) und lange Wörter im Rechtstext dürfen
   überall umbrechen – sonst schieben sie den Text bei großer Schrift über den
   Rand. „anywhere" wirkt (anders als break-word) auch auf die Mindestbreite. */
.ds-body,.ds-kern,.ds-body code,.ds-body a{overflow-wrap:anywhere}

/* Zierlinie unter dem Abschnittskopf */
.ds-head::after{content:none}
.ds-sec{border-top:1px solid var(--border-soft)}
.ds-sec:first-of-type{border-top:0}

.ds-body h3{
  margin:2rem 0 .6rem;font-size:1.125rem;color:var(--brand-deep);
  padding-left:.85rem;border-left:3px solid var(--brand);
}
.ds-body h3:first-child{margin-top:0}
.ds-body p{margin:0 0 1rem;line-height:1.75}
.ds-body a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.ds-body code{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:6px;padding:.1em .4em;font-size:.9em;
}

/* Merkkasten – drei Tonlagen */
.ds-kern{
  background:var(--surface);border:1px solid var(--brand);
  border-left:5px solid var(--brand-deep);
  border-radius:var(--radius);padding:1.35rem 1.5rem;margin:0 0 1.75rem;
  box-shadow:var(--shadow-sm);
}
.ds-kern h3{margin:0 0 .6rem;border:0;padding:0;color:var(--text-strong);font-size:1.0625rem}
.ds-kern p:last-child,.ds-kern ul:last-child{margin-bottom:0}
.ds-kern--gut{border-left-color:#5A7D52;background:linear-gradient(180deg,#F4F8F2,var(--surface))}
.ds-kern--warnung{border-left-color:var(--gold);background:linear-gradient(180deg,#FDF8EE,var(--surface))}

/* „Was wir NICHT tun“ – Häkchen-Liste in Gegenrichtung */
.ds-nein li::before{content:'✕';color:var(--brand-deep);font-weight:800}

/* Tabellen im Rechtstext */
.ds-tab{margin:1rem 0 1.5rem;background:var(--surface);border-radius:var(--radius);overflow:hidden}
.ds-tab thead th{background:var(--brand-light);color:var(--text-strong);font-weight:700;text-align:left;padding:.7rem .9rem}
.ds-tab tbody th,.ds-tab td{text-align:left;padding:.7rem .9rem;vertical-align:top;font-size:.9375rem}
.ds-tab tbody th{font-weight:600;white-space:nowrap}

/* Inhaltsverzeichnis */
.ds-toc{margin-top:2.5rem}
.ds-toc-h{font-size:1.125rem;margin:0 0 1rem}
/* min(230px,100%): die Spalten-Mindestbreite ist nie größer als der Container –
   sonst würde die 230px-Vorgabe auf sehr schmalen Geräten überlaufen. */
.ds-toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:.6rem}
.ds-toc-i{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem .9rem;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border-soft);
  text-decoration:none;color:var(--text);
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.ds-toc-i:hover,.ds-toc-i:focus-visible{
  border-color:var(--brand-dark);background:var(--brand-lighter);transform:translateY(-2px);
}
.ds-toc-n{
  flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;
  border-radius:8px;background:var(--brand-light);color:var(--brand-deep);
  font-weight:800;font-size:.8125rem;font-variant-numeric:tabular-nums;
}
.ds-toc-t{font-size:.9375rem;font-weight:600;line-height:1.3;min-width:0}

.ds-top{margin-top:2rem;font-size:.875rem}
.ds-top a{color:var(--text-muted);text-decoration:none}
.ds-top a:hover{color:var(--brand-deep);text-decoration:underline}

/* Sprungziele nicht unter dem Kopf verstecken */
.ds-sec{scroll-margin-top:110px}

@media (max-width:640px){
  .ds-head{gap:.85rem}
  .ds-num{width:38px;height:38px;font-size:.9375rem}
  .ds-tab tbody th{white-space:normal}
}

/* =========================================================
   29 · GOOGLE-BEWERTUNGEN – über dem Zeigefinger
   Die Karte schwebt über dem Bild, dort wo die Frau hinzeigt.
   Sie wechselt alle 6 Sekunden zur nächsten Rezension.
   ========================================================= */
.rez-buehne{position:relative}

/* Gemessen am neuen Bild (1200 × 1106, freigestellt):
     Haar/Kopf reicht im oberen Drittel bis x = 60 % der Bildbreite
     Fingerspitze liegt bei x = 96,3 % / y = 54,3 %
   Die Karte sitzt deshalb rechts OBEN – über dem Finger, neben dem Kopf. */
.rez{
  position:absolute;
  right:0;
  top:auto;
  bottom:66%;                /* an der UNTERKANTE verankert, nicht oben:
                                die Rezensionen sind unterschiedlich lang, die
                                Karte wächst also nach oben. Wäre sie oben
                                verankert, würde sie bei langem Text nach unten
                                wachsen und irgendwann den Zeigefinger verdecken. */
  width:min(40%,232px);
  z-index:2;
  pointer-events:none;       /* der Klick soll aufs Bild durchgehen */
}
.rez-note{
  position:relative;
  background:rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--radius);
  box-shadow:0 22px 50px -18px rgba(20,21,19,.45);
  padding:1rem 1.1rem;
  color:var(--text);
}
/* kleine Sprechspitze nach unten – zeigt zum Finger */
.rez-note::after{
  content:'';position:absolute;right:58%;bottom:-9px;
  width:18px;height:18px;background:inherit;
  border-right:1px solid rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.85);
  transform:rotate(45deg);
}

.rez-kopf{display:flex;align-items:center;gap:.45rem;margin-bottom:.55rem}
.rez-sterne{color:var(--gold);font-size:.95rem;letter-spacing:.06em;line-height:1}
.rez-schnitt{font-size:1rem;font-weight:800;color:var(--text-strong)}
.rez-anzahl{font-size:.75rem;color:var(--text-muted)}

.rez-text{
  margin:0;font-size:.875rem;line-height:1.6;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.rez-text::before{content:'„'}
.rez-text::after{content:'“'}

/* Bei langen Namen („Netsrak Wagner", „bearbeitet vor 6 Monaten") zerbrach
   in der schmalen Karte jede der beiden Angaben in sich. Mit nowrap + wrap
   rutscht lieber das Datum eine Zeile tiefer – der Name bleibt am Stück. */
.rez-wer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.15rem .5rem;
  margin-top:.6rem;font-size:.75rem;color:var(--text-muted)}
.rez-autor,.rez-wann{white-space:nowrap}
.rez-autor{font-weight:700;color:var(--text-strong)}
/* Eigene Zeile ÜBER den Sternen. Absolut oben rechts positioniert lag das
   Label auf der Note „5/5" – gemessen 21 × 10 px Überlappung. In einer
   232-px-Karte ist rechts oben schlicht kein Platz. */
.rez-quelle{
  display:block;margin-bottom:.4rem;
  font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);opacity:.75;
}

/* Punkte zum Mitzählen */
/* Fußzeile INNERHALB der Karte – vorher lagen Punkte und Note auf dem Bild
   und waren dort kaum zu lesen. */
/* flex-wrap ist hier Pflicht: die Karte ist schmal, 10 Punkte plus die
   Gesamtnote passen nicht immer in eine Zeile. Ohne Umbruch schob sich
   „Google gesamt: 4,7 ★" über den rechten Kartenrand hinaus. */
.rez-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:.35rem .6rem;
  flex-wrap:wrap;
  margin-top:.75rem;padding-top:.6rem;
  border-top:1px dashed var(--border-soft);
}
.rez-punkte{display:flex;gap:.28rem;flex-wrap:wrap}
.rez-punkte i{
  width:5px;height:5px;border-radius:50%;
  background:var(--border);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.rez-punkte i.an{background:var(--gold);transform:scale(1.35)}

/* Auftritt: die Karte steigt auf und wechselt sanft */
html.js .rez-note{opacity:0;transform:translateY(14px) scale(.97)}
html.js .rez-buehne.in .rez-note{animation:rezAuf .9s cubic-bezier(.16,1,.3,1) 2.6s both}
@keyframes rezAuf{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to  {opacity:1;transform:none}
}
/* Wechsel von einer Rezension zur nächsten */
html.js .rez-note.raus{animation:rezRaus .7s cubic-bezier(.4,0,.6,1) both}
html.js .rez-note.rein{animation:rezRein 1.05s cubic-bezier(.16,1,.3,1) both}
@keyframes rezRaus{
  to{opacity:0;transform:translateY(-8px) scale(.985);filter:blur(3px)}
}
@keyframes rezRein{
  from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(4px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}

@media (max-width:900px){
  .rez{position:static;width:100%;margin-top:1rem}
  .rez-bild{width:100%}
  .rez-note::after{display:none}
}

@media (prefers-reduced-motion: reduce){
  html.js .rez-note,html.js .rez-buehne.in .rez-note{opacity:1;transform:none;animation:none}
  html.js .rez-note.raus,html.js .rez-note.rein{animation:none}
}
html.nomotion .rez-note{opacity:1;transform:none;animation:none}

/* Bewertungskarte: Note der Rezension und Gesamtwert klar trennen */
.rez-note-zahl{font-size:.8125rem;font-weight:700;color:var(--text-strong)}
.rez-gesamt{
  margin:0;
  font-size:.6875rem;letter-spacing:.03em;white-space:nowrap;
  color:var(--text-muted);
}
/* Kritische Stimmen sollen nicht wie ein Lob aussehen */
.rez-sterne{color:var(--gold)}

/* =========================================================
   30 · DIE FRAU MIT DEM HANDY – Auftritt und Leben
   Das Bild fährt sanft heran und atmet leise. Vom Zeigefinger
   steigen goldene Sterne auf – der Blick wandert genau dorthin,
   wo auch die Bewertungskarte sitzt.
   ========================================================= */
/* Kein Rahmen, keine Fläche, kein Kasten: die Frau ist freigestellt und
   steht direkt auf der Seite. Der Schatten folgt ihrer Silhouette –
   drop-shadow beachtet den Alphakanal, box-shadow würde ein Rechteck werfen. */
.rez-bild{
  position:relative;display:block;background:none;border-radius:0;box-shadow:none;
  width:78%;                 /* rückt die Frau nach links – die Karte bekommt Luft */
}
.rez-bild img{
  display:block;width:100%;height:auto;
  border-radius:0;box-shadow:none;background:none;
  filter:drop-shadow(0 26px 34px rgba(20,21,19,.20));
}

/* Auftritt: aus der Unschärfe heran, dann ein ruhiges Atmen */
html.js .rez-bild img{
  opacity:0;transform:scale(1.06);
  filter:blur(8px) saturate(.9) drop-shadow(0 26px 34px rgba(20,21,19,.20));
  transition:opacity 1.3s cubic-bezier(.22,1,.36,1),
             transform 1.9s cubic-bezier(.22,1,.36,1),
             filter 1.4s cubic-bezier(.22,1,.36,1);
}
html.js .rez-buehne.in .rez-bild img{
  opacity:1;transform:none;
  filter:blur(0) saturate(1) drop-shadow(0 26px 34px rgba(20,21,19,.20));
  animation:frauAtmen 22s ease-in-out 2.4s infinite alternate;
}
@keyframes frauAtmen{
  from{transform:scale(1) translateY(0)}
  to  {transform:scale(1.022) translateY(-5px)}
}

/* Kein Lichtstreif mehr: Er lief als sichtbares Rechteck über die nun
   transparenten Flächen. Stattdessen bekommt der Auftritt einen weichen
   Schein hinter der Frau. */
.rez-bild::before{
  content:'';position:absolute;z-index:-1;
  left:6%;right:8%;top:6%;bottom:2%;
  border-radius:50%;
  background:radial-gradient(58% 52% at 45% 42%, rgba(191,198,184,.38), transparent 70%);
  filter:blur(28px);
  opacity:0;
}
html.js .rez-buehne.in .rez-bild::before{animation:fadeIn 1.6s ease-out .5s both}

/* Sterne, die vom Zeigefinger aufsteigen */
.rez-funken{
  position:absolute;
  right:3.7%;                /* gemessen am neuen Bild: Fingerspitze x 96,3 % / y 54,3 % */
  bottom:45.7%;
  width:0;height:0;
  pointer-events:none;
}
.rez-funken i{
  position:absolute;left:0;bottom:0;
  font-style:normal;font-size:14px;line-height:1;
  color:var(--gold);
  text-shadow:0 2px 10px rgba(214,178,102,.6);
  opacity:0;
}
html.js .rez-buehne.in .rez-funken i{
  animation:funkeAuf 4.2s ease-out var(--d,0s) infinite;
}
@keyframes funkeAuf{
  0%   {opacity:0;   transform:translate(0,0) scale(.6) rotate(0deg)}
  12%  {opacity:.95}
  55%  {opacity:.85}
  100% {opacity:0;   transform:translate(var(--x,0), -72px) scale(1.25) rotate(22deg)}
}

@media (max-width:900px){
  .rez-funken{right:3%;bottom:54%}
  .rez-funken i{font-size:12px}
}

@media (prefers-reduced-motion: reduce){
  html.js .rez-bild img{opacity:1;transform:none;filter:none;animation:none;transition:none}
  html.js .rez-bild::after{display:none}
  html.js .rez-funken{display:none}
}
html.nomotion .rez-bild img{opacity:1;transform:none;filter:none;animation:none}
html.nomotion .rez-bild::after{display:none}
html.nomotion .rez-funken{display:none}