/* WOW-SCHICHT friseur — GENERIERT aus demos/tools/wow (Variablen unten, Kern danach). Nicht von Hand ändern. */
/* Salon Schnittwerk — warm, editorial, Gold als leiser Akzent */
:root{
  --w-acc:#b98a4b; --w-acc2:#d9bc8f; --w-on-acc:#fff; --w-ink:#1d1a17; --w-muted:#8a7d6f;
  --w-surface:#ffffff; --w-surface2:#efe7dc; --w-line:#e6dccf; --w-deep:#1d1a17;
  --w-inv-bg:#1d1a17; --w-inv-ink:#f7f3ee;
  --w-display:'Playfair Display',Georgia,serif; --w-display-weight:600; --w-stat-color:#1d1a17;
  --w-card-r:22px; --w-shadow:0 4px 16px rgba(29,26,23,.06); --w-shadow-hover:0 18px 44px rgba(29,26,23,.13);
  --w-spot:rgba(185,138,75,.16); --w-glow:rgba(217,188,143,.35); --w-dots:rgba(255,255,255,.35);
  --w-head-bg:#efe7dc; --w-head-shadow:rgba(29,26,23,.08); --w-grid:rgba(29,26,23,.06);
  --w-blob1:rgba(217,188,143,.65); --w-blob2:rgba(185,138,75,.32); --w-blob3:rgba(0,170,255,.14);
  --w-glass-bg:rgba(255,255,255,.82); --w-glass-line:rgba(255,255,255,.7); --w-ticker-bg:#f7f3ee;
}
.tile.deep .more{color:var(--gold-soft)}
/* Lesbarkeit: Gold als Textfarbe dunkler, Nebentexte dunkler, Gold-Knöpfe dunkler (weiße Schrift ≥ 4,5:1) */
:root{--muted:#6f6355;--gold-text:#7f5a22;--w-acc-text:#7f5a22;--w-hero-h1:760px;--d-blue:#0a66c2}
.eyebrow,.member .role{color:#7f5a22}
.btn.gold,.mail-cta{background:#916529}
.mail-body .mail-hero .mail-cta{display:block;width:max-content;margin:12px auto 0}   /* Knopf in eigener Zeile — läuft nicht neben umbrochenen Text */
.btn.gold:hover{background:#7f5822}
.sim-play[data-voice-demo]{background:#916529!important}
body .tile.acc{background:#916529}
body .shop-card .pprice{color:var(--gold-text)}
#cal-direct{color:var(--gold-text)}
body .shop-card .ribbon{background:#916529}
.stars,.review .stars{color:#d9a520}   /* Sterne etwas satter — bleiben Gold, aber sichtbarer auf Creme */
.stufe .btn:not(.ghosted){background:linear-gradient(135deg,#0a5fb4,#0077CC)}
/* Demo-Hinweisleiste: auf dem Handy die Kurzfassung (eine Zeile) */
.demo-bar .db-kurz{display:none}
@media (max-width:760px){.demo-bar .db-lang{display:none}.demo-bar .db-kurz{display:inline}.demo-bar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* Ablauf-Simulatoren: verborgene Schritte nehmen keinen Platz mehr ein (vorher hoher leerer Kasten);
   vor dem Abspielen steht ein Hinweis, die Schritte tauchen dann nacheinander auf */
.sim-step{display:none;opacity:1;transform:none;transition:none}
.sim-step.on{display:block;animation:wowUp .45s ease both}
.sim-stage{min-height:0}
.sim-stage:not(:has(.sim-step.on))::after{content:'▶  Zum Abspielen auf den Knopf drücken — die Schritte erscheinen hier nacheinander.';display:block;font-size:13.5px;color:var(--muted);padding:6px 0 2px}

/* ============================================================
   WOW-SCHICHT — gemeinsamer Kern (Quelle: demos/tools/wow/wow-core.css)
   Wird per `node demos/tools/wow/build.mjs` hinter die Demo-Variablen
   gehängt und als assets/wow.css in jede Demo kopiert. Nicht von Hand
   in den Demos ändern — hier ändern, dann neu bauen.

   Leitlinien (aus styles.refero.design, „Premium/Editorial"):
   - Hierarchie über Größe, Fläche und Weißraum, nicht über Schatten
   - Flächen stufen sich über Farbe ab; Trennung mit Haarlinien
   - Bewegung ruhig und entschieden (0.2 s Zustände, ~0.7 s Auftritte)
   - Alles Bewegte respektiert „Bewegung reduzieren"
   ============================================================ */

/* ---------- Rhythmus & Typografie ---------- */
html{scroll-padding-top:96px}
section{padding:clamp(56px,7.5vw,92px) 0}
h1,h2{letter-spacing:-.02em}
h2{font-size:clamp(30px,3.9vw,44px);line-height:1.1}
h3{letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.6}
.eyebrow{display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;flex:none}
.eyebrow .pbadge{margin-left:4px}
:focus-visible{outline:2px solid var(--w-acc);outline-offset:3px;border-radius:6px}
::selection{background:var(--w-acc);color:#fff}

/* ---------- Kopfzeile: verdichtet sich beim Scrollen, Lesefortschritt ---------- */
header.site{transition:box-shadow .35s ease,background-color .35s ease}
body.scrolled header.site{box-shadow:0 10px 34px var(--w-head-shadow)}
.wow-progress{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:210;pointer-events:none;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--w-acc),var(--w-acc2));opacity:.95}
.wow-ruhig .wow-progress{display:none}

/* ---------- Erscheinen beim Scrollen ---------- */
.wow-js .wow{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--wow-delay,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--wow-delay,0ms)}
.wow-js .wow.wow-in{opacity:1;transform:none}
.wow-ruhig .wow{opacity:1!important;transform:none!important;transition:none!important}

/* ---------- Hero: Auftritt in Etappen, Parallax-Vorbereitung ---------- */
.hero{overflow:hidden}
.hero .bg{will-change:transform;transform:scale(1.04)}
.hero .lead{font-size:clamp(17px,1.45vw,19.5px)}
@keyframes wowUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes wowWord{from{opacity:0;transform:translateY(.45em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.wow-js:not(.wow-ruhig) .hero .eyebrow{animation:wowUp .8s cubic-bezier(.2,.7,.2,1) both .1s}
.wow-js:not(.wow-ruhig) .hero .lead{animation:wowUp .9s cubic-bezier(.2,.7,.2,1) both .75s}
.wow-js:not(.wow-ruhig) .hero .wrap > .btn{animation:wowUp .9s cubic-bezier(.2,.7,.2,1) both .95s}
.wow-js:not(.wow-ruhig) .hero .wrap > .btn + .btn{animation-delay:1.05s}
.wow-js:not(.wow-ruhig) .hero .wrap > .btn + .btn + .btn{animation-delay:1.15s}
.wow-js:not(.wow-ruhig) .hero .hero-meta .chip{animation:wowUp .8s cubic-bezier(.2,.7,.2,1) both}
.wow-js:not(.wow-ruhig) .hero .hero-meta .chip:nth-child(1){animation-delay:1.2s}
.wow-js:not(.wow-ruhig) .hero .hero-meta .chip:nth-child(2){animation-delay:1.3s}
.wow-js:not(.wow-ruhig) .hero .hero-meta .chip:nth-child(3){animation-delay:1.4s}
.wow-js:not(.wow-ruhig) .hero .hero-meta .chip:nth-child(4){animation-delay:1.5s}
.wow-js:not(.wow-ruhig) .wow-split .wow-w{display:inline-block;animation:wowWord .95s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i,0) * .065s)}
.hero .chip{transition:transform .25s ease,background-color .25s ease}
.hero .chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.2)}

/* ---------- Seitenkopf der Unterseiten: Lichtflecken (Parallax) + feines Raster ---------- */
.page-head{position:relative;overflow:hidden;background:var(--w-head-bg);padding:clamp(64px,9vw,112px) 0 clamp(44px,6vw,72px);border-bottom:1px solid var(--w-line)}
.page-head::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--w-grid) 1px,transparent 1px),linear-gradient(90deg,var(--w-grid) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 20%,transparent 75%)}
.page-head .wow-blob{position:absolute;border-radius:50%;pointer-events:none;will-change:transform;filter:blur(64px);z-index:0}
.page-head .wow-blob.b1{width:44vw;height:44vw;max-width:640px;max-height:640px;left:-12vw;top:-26vw;background:var(--w-blob1)}
.page-head .wow-blob.b2{width:36vw;height:36vw;max-width:520px;max-height:520px;right:-10vw;top:-20vw;background:var(--w-blob2)}
.page-head .wow-blob.b3{width:30vw;height:30vw;max-width:440px;max-height:440px;left:42%;bottom:-24vw;background:var(--w-blob3)}
.page-head > .wrap{position:relative;z-index:1}
.page-head h1{font-size:clamp(34px,5vw,58px)!important;letter-spacing:-.025em;line-height:1.08;max-width:820px;margin-left:auto;margin-right:auto}
.page-head .lead{margin-top:16px}
.page-head .eyebrow{margin-bottom:16px}

/* ---------- Karten: Haarlinie, ruhiger Schatten, Anheben, Lichtschein unter dem Zeiger ---------- */
.card,.stufe,.bew,.price-group,.shop-card,.benefit,.pschritt,.member,.review,.tile,.stat,.gericht{
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s cubic-bezier(.2,.7,.2,1),border-color .3s ease}
.card:hover,.stufe:hover,.bew:hover,.price-group:hover,.benefit:hover,.pschritt:hover,.member:hover,.review:hover,.stat:hover{transform:translateY(-4px);box-shadow:var(--w-shadow-hover)}
.wow-js .card,.wow-js .stufe,.wow-js .bew,.wow-js .tile,.wow-js .price-group,.wow-js .shop-card,.wow-js .benefit,.wow-js .pschritt,.wow-js .stat,.wow-js .review,.wow-js .member,.wow-js .gericht{position:relative;--mx:50%;--my:50%}
.wow-js .card::after,.wow-js .stufe::after,.wow-js .bew::after,.wow-js .tile::after,.wow-js .price-group::after,.wow-js .shop-card::after,.wow-js .benefit::after,.wow-js .pschritt::after,.wow-js .stat::after,.wow-js .review::after,.wow-js .member::after,.wow-js .gericht::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx) var(--my),var(--w-spot),transparent 46%)}
@media (pointer:fine){
  .wow-js .card:hover::after,.wow-js .stufe:hover::after,.wow-js .bew:hover::after,.wow-js .tile:hover::after,.wow-js .price-group:hover::after,.wow-js .shop-card:hover::after,.wow-js .benefit:hover::after,.wow-js .pschritt:hover::after,.wow-js .stat:hover::after,.wow-js .review:hover::after,.wow-js .member:hover::after,.wow-js .gericht:hover::after{opacity:1}
}
/* Zitat-Zeichen an Bewertungen (dezent, unten rechts — oben rechts sitzt ggf. die Stufen-Marke) */
.review,.bew{position:relative}
.review::before,.bew::before{content:'\201C';position:absolute;right:18px;bottom:-14px;font-family:var(--w-display);font-size:84px;line-height:1;color:var(--w-acc);opacity:.14;pointer-events:none}

/* ---------- Knöpfe: Lichtstreif beim Überfahren ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.26) 50%,transparent 68%);transform:translateX(-130%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.btn:hover::before{transform:translateX(130%)}
.btn.ghost::before,.btn.ghosted::before,.btn.dunkel::before{display:none}

/* ---------- Kennzahlen-Zeile (schwebt unter dem Hero) ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stats.float{margin-top:-58px;position:relative;z-index:4}
.stat{padding:22px 24px;border-radius:var(--w-card-r);background:var(--w-surface);border:1px solid var(--w-line);box-shadow:var(--w-shadow)}
.stat b{display:block;font-family:var(--w-display);font-weight:var(--w-display-weight);font-size:clamp(30px,3.1vw,42px);line-height:1;letter-spacing:-.02em;color:var(--w-stat-color);margin-bottom:8px;white-space:nowrap}
.stat b small{font-size:.55em;letter-spacing:0;margin-left:2px;color:var(--w-acc)}
.stat span{display:block;font-size:13.5px;color:var(--w-muted);line-height:1.4}
.stats.glass .stat{background:var(--w-glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--w-glass-line)}

/* ---------- Laufband ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--w-line);border-bottom:1px solid var(--w-line);background:var(--w-ticker-bg);padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;width:max-content;animation:wowTicker 48s linear infinite;font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--w-muted)}
.ticker-track span{display:inline-flex;align-items:center;white-space:nowrap;padding-right:40px}
.ticker-track span::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--w-acc);margin-left:40px}
@keyframes wowTicker{to{transform:translateX(-50%)}}
.ticker + section{padding-top:clamp(40px,5vw,60px)}   /* nach dem Laufband kein doppelter Abstand */
.ticker:hover .ticker-track{animation-play-state:paused}
.wow-ruhig .ticker-track{animation:none}

/* ---------- Bento-Raster: Kacheln verschiedener Größe, Foto- und Farbkacheln ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento > *{min-width:0}
.bento .b2{grid-column:span 2}.bento .b3{grid-column:span 3}.bento .b4{grid-column:span 4}.bento .b6{grid-column:span 6}.bento .r2{grid-row:span 2}
.tile{position:relative;border-radius:var(--w-card-r);overflow:hidden;padding:28px;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--w-surface);border:1px solid var(--w-line);color:inherit;box-shadow:var(--w-shadow)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--w-shadow-hover)}
.tile .k{font-family:var(--w-display);font-weight:var(--w-display-weight);font-size:clamp(40px,4.6vw,60px);line-height:.95;letter-spacing:-.03em;margin-bottom:12px;color:var(--w-stat-color)}
.tile h3{font-size:22px;margin-bottom:6px;letter-spacing:-.015em}
.tile p{font-size:14.5px;line-height:1.55}
.tile .tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tile .tag-row span{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--w-surface2);color:var(--w-muted)}
.tile .more{margin-top:14px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;color:var(--w-acc)}
.tile .more::after{content:'→';transition:transform .3s ease}
.tile:hover .more::after{transform:translateX(4px)}
.tile.img{color:#fff;border:none;min-height:300px}
.tile.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1);z-index:0}
.tile.img::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.78) 100%)}
.tile.img > *:not(img):not(.pbadge):not(.lock-veil){position:relative;z-index:2}
/* Stufen-Marken hängen halb über dem oberen Rand ihres Kastens (wie bei .auto-note) — so liegen sie nie auf
   Text oder Überschriften. Ausnahme: Foto-/Farbkacheln (überlaufen versteckt) — dort bleibt die Marke innen,
   der Inhalt sitzt ohnehin unten. */
[data-badge] > .pbadge:not(.inline){top:-11px;right:16px}
.tile > .pbadge,.tile[data-badge] > .pbadge:not(.inline){position:absolute;top:14px;right:14px;z-index:3}
.tile > .lock-veil{position:absolute;z-index:5}
.tile.img h3{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.tile.img p{color:rgba(255,255,255,.88)}
.tile.img .tag-row span{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.tile.img .more{color:#fff}
.tile.img:hover img{transform:scale(1.06)}
.tile.acc{background:var(--w-acc);color:var(--w-on-acc);border:none}
.tile.acc h3,.tile.acc .k{color:var(--w-on-acc)}
.tile.acc p{color:var(--w-on-acc);opacity:.88}
.tile.acc .more{color:var(--w-on-acc)}
.tile.acc .tag-row span{background:rgba(255,255,255,.2);color:var(--w-on-acc)}
.tile.deep{background:var(--w-deep);color:#fff;border:none}
.tile.deep h3,.tile.deep .k{color:#fff}
.tile.deep p{color:rgba(255,255,255,.82)}
.tile.deep .more{color:var(--w-acc2)}
.tile.deep .tag-row span{background:rgba(255,255,255,.14);color:#fff}
.tile.inv{background:var(--w-inv-bg);color:var(--w-inv-ink);border:none}
.tile.inv h3,.tile.inv .k{color:var(--w-inv-ink)}
.tile.inv p{color:var(--w-inv-ink);opacity:.8}
.tile .pbadge{z-index:3}
/* Farb- und Textkacheln: oben ausgerichtet (Symbol, Titel, Text), der Link sitzt unten — Fotokacheln bleiben unten ausgerichtet */
.tile:not(.img){justify-content:flex-start}
.tile .icon{font-size:30px;margin-bottom:14px;line-height:1}
.tile.img .icon{margin-bottom:auto;padding-bottom:22px}
.tile:not(.img) .more{margin-top:auto;padding-top:16px}
.tile .btn{align-self:flex-start;margin-top:16px}

/* ---------- Abschnitte mit leuchtendem Verlauf, CTA-Band mit Lichtkreis ---------- */
/* kein overflow:hidden — die Stufen-Marke hängt halb über dem Rand; der Lichtkreis wird über inset:0 + Verlaufsposition begrenzt */
.cta-band,.promo-band{position:relative;isolation:isolate}
.pranzo-band{position:relative;isolation:isolate;overflow:hidden}
.cta-band::before,.promo-band::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 92% -10%,var(--w-glow),transparent 42%)}
.cta-band::after{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;
  background-image:radial-gradient(var(--w-dots) 1px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(120deg,transparent 45%,#000);mask-image:linear-gradient(120deg,transparent 45%,#000)}
.section-glow{position:relative;overflow:hidden}
.section-glow::before{content:'';position:absolute;inset:auto -10% -30% -10%;height:60%;pointer-events:none;z-index:0;
  background:radial-gradient(60% 100% at 50% 100%,var(--w-glow),transparent 70%)}
.section-glow > .wrap{position:relative;z-index:1}

/* ---------- Fotos: weiche Zoom-Reaktion ---------- */
.foto,.vfoto .gross,.split > img,.team-banner,.img-card{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.foto img,.img-card img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.foto:hover img,.img-card:hover img{transform:scale(1.04)}
[data-wow-px]{will-change:transform}

/* ---------- Prozess-Zeitstrahl (Handwerk): Verbindungslinie, Nummern als Ankerpunkte ---------- */
.prozess{position:relative}
.prozess::before{content:'';position:absolute;left:8%;right:8%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--w-acc) 15%,var(--w-acc) 85%,transparent);opacity:.5}

/* Kleinste Etiketten (Shop-Bänder, Mockup-Chips auf den Stufen-Seiten) bleiben lesbar */
body .shop-card .ribbon,body .lief-zeile .q,body .lief-zeile .st,body .schicht-mini .p,body #zt-zu,body #zt-kl,body .zahl-chips span{font-size:11.5px}   /* „body“ davor: schlägt die seiteneigenen <style>-Blöcke gleicher Spezifität */

/* ---------- Touch: kleine Bedienelemente auf mindestens 34 px Tippfläche ---------- */
@media (pointer:coarse){
  .sigpad-wrap .clear,.foto-vorschau .x,.gd-karte .x,.dmodal .x{min-height:34px;min-width:34px}
  .nav-links a{min-height:40px;display:flex;align-items:center}
}

/* ---------- Ruhige Standards ---------- */
.wow-ruhig .hero .eyebrow,.wow-ruhig .hero .lead,.wow-ruhig .hero .btn,.wow-ruhig .hero .chip,.wow-ruhig .wow-w{animation:none!important;opacity:1!important;transform:none!important}
.wow-ruhig .btn::before{display:none}
.wow-ruhig .page-head .wow-blob{transform:none!important}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .prozess::before{display:none}
}
/* Tablet (700–960 px): Dreier-Raster bleiben dreispaltig — sonst steht die dritte Karte allein in der zweiten Zeile */
@media (min-width:700px) and (max-width:960px){
  .grid.c3{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:960px){
  /* Bento: zwei Spalten. Halbe Kacheln (b2, b3) nebeneinander, breite (b4, b6) über beide Spalten.
     Die Selektoren müssen die Grundregeln (.bento .b2 …) an Spezifität schlagen. */
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > *,.bento .b2,.bento .b3{grid-column:span 1}
  .bento .b4,.bento .b6{grid-column:span 2}
  .bento .r2{grid-row:auto}
  /* drei gleich große Kacheln (z. B. Gerichte): die dritte füllt die Zeile, statt allein zu stehen */
  .bento > .b2:first-child ~ .b2:nth-child(3):last-child{grid-column:span 2}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats.float{margin-top:-36px}
}
@media (max-width:760px){
  /* Stufen-Marke im Aktionsband: auf dem Handy über den Text statt darüber liegend */
  .promo-band > .pbadge{position:static;order:-1;align-self:flex-start;margin-bottom:2px}
  .page-head .wow-blob{filter:blur(44px)}
  .page-head .wow-blob.b3{display:none}
  .tile{min-height:200px;padding:22px}
  .tile.img{min-height:240px}
  .stat{padding:18px 18px}
}
@media (max-width:600px){
  /* lange Wörter in Überschriften dürfen auf dem Handy trennen statt über den Rand zu laufen */
  h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  .bento{grid-template-columns:1fr}
  .bento > *,.bento .b2,.bento .b3,.bento .b4,.bento .b6{grid-column:span 1}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat b{font-size:26px}
}

/* ---------- Mockup-Zeilen (Bestell-Board auf den Stufen-Seiten) dürfen auf dem Handy umbrechen ---------- */
@media (max-width:1000px){
  body .lief-zeile{flex-wrap:wrap;row-gap:4px}
  body .lief-zeile b{white-space:nowrap}
  body .lief-zeile .st{margin-left:0;width:100%}
  /* Schichtplan-Mockup: bei schmaler Spalte wischbar statt abgeschnitten */
  body .schicht-mini{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:6px}
  body .schicht-mini .p{white-space:nowrap}
}


/* ============================================================
   DEBUGGING-SITZUNG 04.09.2026 — Lesbarkeit, Typografie, Abstände
   ============================================================ */
/* Keine Witwen/Waisen: Überschriften ausbalanciert, Vorspann und Kartentexte hübsch umbrochen */
h1,h2,h3{text-wrap:balance}
.lead,.card p,.tile p,.stat span,.review p,.bew p,.page-head .lead{text-wrap:pretty}
/* Hero-Überschrift: breit genug, dass die erste Zeile nicht in ein Waisenwort bricht (je Demo --w-hero-h1) */
.hero h1{max-width:min(100%,var(--w-hero-h1,760px))}
/* Kein doppelter Abstand vor der Fußzeile (Abschnitte haben bereits Innenabstand) */
footer.site{margin-top:0}
/* Leere Absätze (werden erst per Skript gefüllt) nehmen keinen Platz ein */
p:empty{display:none}
/* Checklisten: Stufen-Marke sitzt rechts, der Text bricht sauber davor um */
.checklist li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.checklist li .pbadge.inline{margin-left:auto;transform:none}
/* Sperr-Schleier bleibt im Kasten, auch wenn Seitenstile den Kasten „static“ setzen */
body .locked{position:relative}
/* Report-Mockups: Wert und Trend bleiben in einer Zeile */
body .kpi-row > span:last-child{white-space:nowrap;flex:none;text-align:right}
body .kpi-mini .k b{white-space:nowrap}
body .kpi-mini .k .tr{display:block;margin-top:2px}   /* Trend unter dem Wert statt daneben — kein Überlappen auf schmalen Kacheln */
/* Akzentfarbe als Text: dunklere, gut lesbare Variante (--w-acc-text je Demo) */
.tile:not(.img):not(.acc):not(.deep):not(.inv):not(.rot):not(.jade):not(.oliv) .more{color:var(--w-acc-text,var(--w-acc))}
.stat b small{color:var(--w-acc-text,var(--w-acc))}
/* Donau-Schicht: Blau-Verläufe so, dass weiße Schrift ≥ 4,5:1 hat; Complete-Marken mit dunkler Schrift */
.nav-links a.nav-pakete,.pswitch button.pv.on,.pbadge.b-professional,.stufe.s2 .tier,.dmodal .box .btn{background:linear-gradient(135deg,#0a5fb4,#0077CC)}
body.view-professional .pswitch button.pv.on{background:linear-gradient(135deg,#0a5fb4,#0077CC)}
body.view-starter .pswitch button.pv.on,.pbadge.b-starter{background:#0a66c2}
.pbadge.b-complete,.stufe.s3 .tier,body.view-complete .pswitch button.pv.on{background:linear-gradient(135deg,#00AAFF,#00CCAA);color:#0a1628}
/* Info-Streifen oben: bei knapper Breite den dritten Eintrag ausblenden statt Text mitten im Wort abzuschneiden */
@media (max-width:1400px){.topstrip .ts-info span:nth-child(3){display:none}}
@media (max-width:1150px){.topstrip .ts-info span:nth-child(2){display:none}}
/* Lange Seitenkopf-Abschnitte: Lichtflecken nur oben, keine Trennkante am Ende, Raster nur im oberen Bereich */
.page-head.page-head-lang{border-bottom:none}
.page-head.page-head-lang .wow-blob.b3{display:none}
.page-head.page-head-lang::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 420px,transparent 900px);mask-image:linear-gradient(180deg,#000 0,#000 420px,transparent 900px)}
/* Pranzo-Band (überlaufen versteckt wegen der Deko): Stufen-Marke innen statt hängend */
.pranzo-band[data-badge] > .pbadge:not(.inline){top:14px;right:14px}
/* Speisekarten-Filter: am Desktop wie bisher (Kasten ist unsichtbar), am Handy eine wischbare Chip-Zeile + Suche darunter */
.mk-filter .fchips{display:contents}
@media (max-width:760px){
  .mk-filter{padding:10px 0;gap:8px}
  .mk-filter .fchips{display:flex;gap:8px;width:100%;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mk-filter .fchips::-webkit-scrollbar{display:none}
  .mk-filter .fchip{flex:none}
  .mk-filter .fsuche{width:100%;flex:1 0 100%}
}
/* Bestell-/Speisekarten-Zeilen auf dem Handy: Text bekommt Platz, Preis und Plus-Knopf rutschen in eine zweite Zeile */
@media (max-width:600px){
  body .gericht{flex-wrap:wrap}
  body .gericht .gmain{flex:1 1 150px;min-width:150px}
  body .gericht .gpreis{margin-left:auto}
  body .gericht .add,body .gericht .menge{margin-left:auto}
}
/* Mockup-Abschnitte (Schichtplan, Bestell-Board) brauchen Breite: auf Tablets einspaltig statt zweier schmaler Spalten */
@media (max-width:1000px){
  body .split:has(.schicht-mini),body .split:has(.lief-zeile),body .split:has(.kpi-mini){grid-template-columns:1fr}
}