/* ---- Lokale Fonts (statt Google Fonts) ---- */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/bodoni-moda-regular.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/bodoni-moda-italic.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/bodoni-moda-500.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/bodoni-moda-600.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/bodoni-moda-700.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:200;font-display:swap;src:url("fonts/jost-200.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/jost-300.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jost-regular.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jost-500.woff2") format("woff2")}

/* ===========================================================================
   Bloom Café & Restaurant — Design Tokens & Basis-Bausteine
   Version 1.0 · Farbwerte pixelgenau aus Briefpapier 2024 (InDesign) extrahiert.
   Einzige Quelle der Wahrheit. Farben nicht per Auge nachmischen.
   =========================================================================== */

:root{
  /* ---- Kernfarben ---- */
  --magenta:#38716F;                  /* Handlungsfarbe (Logo-Petrol, dunkel): CTA, Links, Preise */
  --purple:#28514F;                   /* Fläche, Hover der Handlungsfarbe */
  --teal:#448080;                     /* Struktur: Labels, Eyebrows, Kennzahlen */
  --grey:#9DA5A4;                     /* NUR Linien und Rahmen — nie Text */
  --ink:#2E3F41;                      /* Text und dunkle Flächen */
  --ink-deep:#1D2A2B;                 /* Overlays, tiefste Sektion */
  --paper:#FFFFFF;
  --paper-2:#F4F4F3;
  --paper-3:#E8ECEB;

  /* ---- Auf dunklem Grund (Magenta/Petrol sind auf --ink unlesbar) ---- */
  --magenta-on-dark:#9FD0CE;          /* Text jeder Größe auf dunkel */
  --magenta-display-on-dark:#79B9B7;  /* Display auf dunkel */
  --teal-on-dark:#8EC3C3;             /* 5,6:1 */
  --purple-on-dark:#BCD7D6;           /* Sekundär auf dunkel */
  --grey-on-dark:#C3C9C8;             /* Sekundärtext auf --ink */

  /* ---- Semantisch ---- */
  --text:var(--ink);
  --text-muted:rgba(46,63,65,.78);
  --text-faint:rgba(46,63,65,.58);
  --text-on-dark:rgba(244,244,243,.78);
  --line:rgba(157,165,164,.42);
  --line-strong:#9DA5A4;
  --line-on-dark:rgba(157,165,164,.26);
  --focus:var(--magenta);

  /* ---- Schrift ---- */
  --serif:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  --sans:"Jost","Futura","Century Gothic",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Schriftgrade — Desktop */
  --fs-h1:clamp(38px,6vw,80px);
  --fs-h2:clamp(32px,4.6vw,58px);
  --fs-h3:25px;
  --fs-h4:20px;
  --fs-lead:20px;
  --fs-body:17px;
  --fs-small:13.5px;
  --fs-eyebrow:11.5px;
  --fs-button:12px;

  --lh-display:1.08;
  --lh-head:1.14;
  --lh-body:1.68;
  --lh-lead:1.62;

  /* ---- Tracking ---- */
  --track-eyebrow:.36em;
  --track-button:.22em;
  --track-nav:.20em;
  --track-label:.24em;

  /* ---- Form ---- */
  --radius:0;                         /* kantig — kein Border-Radius */
  --hairline:1px;

  /* ---- Raster ---- */
  --wrap:1260px;
  --gutter:34px;
  --gutter-mobile:22px;
  --section-y:118px;
  --section-y-mobile:74px;
  --gap:24px;
  --gap-lg:64px;

  /* ---- Abstandsskala (8er Raster) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:118px;

  /* ---- Bewegung ---- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:.25s;
  --dur:.35s;
  --dur-slow:.8s;

  /* ---- Ebenen ---- */
  --z-header:90;
  --z-overlay:100;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:var(--lh-head);letter-spacing:-.005em}
h1{font-size:var(--fs-h1);line-height:var(--lh-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
em{font-style:italic}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ===== Layout ===== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--section-y) 0}
.sec.tint{background:var(--paper-2)}
.sec.dark{background:var(--ink);color:var(--paper-2)}
.sec.deep{background:var(--ink-deep);color:var(--paper-2)}
.sec.dark h1,.sec.dark h2,.sec.dark h3,.sec.deep h2,.sec.deep h3{color:var(--paper-2)}
.sec.dark p,.sec.deep p{color:var(--text-on-dark)}

/* ===== Text-Bausteine ===== */
.eyebrow{display:block;font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--teal);margin-bottom:22px;font-weight:400}
.eyebrow.on-dark{color:var(--teal-on-dark)}
.eyebrow.mag{color:var(--magenta)}
.eyebrow.mag.on-dark{color:var(--magenta-on-dark)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:56ch}
.body-copy{max-width:46ch;color:var(--text-muted)}
.small{font-size:var(--fs-small);color:var(--text-faint)}
.rule-v{width:1px;height:58px;background:var(--line-strong);margin:42px auto 0}

/* ===== Buttons & Links ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:var(--fs-button);font-weight:400;
  letter-spacing:var(--track-button);text-transform:uppercase;
  padding:15px 30px;border:var(--hairline) solid currentColor;border-radius:var(--radius);
  background:none;cursor:pointer;transition:var(--dur) var(--ease)}
.btn-mag{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.btn-mag:hover{background:var(--purple);border-color:var(--purple)}
.btn-teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-teal:hover{background:var(--ink);border-color:var(--ink)}
.btn-ink{color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:var(--paper-2)}
.btn-light{color:#fff;border-color:rgba(255,255,255,.6)}
.btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:12px 20px;font-size:11px}
.btn-block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn svg{width:15px;height:15px;flex:0 0 auto}

.tlink{display:inline-block;font-size:var(--fs-button);letter-spacing:var(--track-button);
  text-transform:uppercase;color:var(--magenta);border-bottom:1px solid rgba(56,113,111,.35);
  padding-bottom:4px;transition:var(--dur-fast)}
.tlink:hover{border-color:var(--magenta)}
.tlink.on-dark{color:var(--grey-on-dark);border-color:rgba(157,165,164,.4)}
.tlink.on-dark:hover{color:#fff;border-color:#fff}
.inline-link{color:var(--magenta);border-bottom:1px solid rgba(56,113,111,.35)}
.inline-link:hover{border-color:var(--magenta)}

/* ===== Badges ===== */
.badge{display:inline-block;font-size:10px;letter-spacing:var(--track-label);text-transform:uppercase;
  padding:5px 11px;border:1px solid var(--line-strong);color:var(--text-muted)}
.badge-teal{border-color:var(--teal);color:var(--teal)}
.badge-mag{border-color:var(--magenta);color:var(--magenta)}
.badge-solid{background:var(--magenta);border-color:var(--magenta);color:#fff}
.badge-on-dark{border-color:var(--line-on-dark);color:var(--grey-on-dark)}

/* ===== Bildplatzhalter (bis Fotos vorliegen) ===== */
.ph{position:relative;overflow:hidden;background:var(--paper-3)}
.ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 20% 15%,rgba(68,128,128,.42),transparent 62%),
             radial-gradient(80% 70% at 85% 85%,rgba(56,113,111,.30),transparent 62%),
             linear-gradient(150deg,#4E6E6E 0%,#7E8C8B 55%,#B8BFBE 100%)}
.ph.mag::after{background:radial-gradient(90% 70% at 75% 15%,rgba(56,113,111,.55),transparent 60%),
             linear-gradient(155deg,#28514F 0%,#38716F 55%,#9AC3C1 100%)}
.ph.purple::after{background:radial-gradient(100% 80% at 25% 20%,rgba(40,81,79,.55),transparent 62%),
             linear-gradient(160deg,#1C3A39 0%,#28514F 60%,#7EA8A6 100%)}
.ph.teal::after{background:radial-gradient(100% 80% at 30% 25%,rgba(68,128,128,.6),transparent 62%),
             linear-gradient(160deg,#2E3F41 0%,#448080 60%,#89B2B0 100%)}
.ph.ink::after{background:radial-gradient(110% 90% at 50% 100%,rgba(68,128,128,.45),transparent 66%),
             linear-gradient(170deg,#1D2A2B 0%,#2E3F41 55%,#5B6E6E 100%)}
.ph-label{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:15px 20px;font-size:10px;
  letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(255,255,255,.85);
  background:linear-gradient(to top,rgba(29,42,43,.75),transparent)}
.ph-4x3{aspect-ratio:4/3}
.ph-3x4{aspect-ratio:3/4}
.ph-5x4{aspect-ratio:5/4}
.ph-16x10{aspect-ratio:16/10}
.ph-16x9{aspect-ratio:16/9}
.ph-1x1{aspect-ratio:1/1}

/* ===== Sektionskopf ===== */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:54px}
.sec-head h2{margin:0}
.sec.dark .sec-head,.sec.deep .sec-head{border-color:var(--line-on-dark)}

/* ===== Karten ===== */
.card{background:var(--paper);border:var(--hairline) solid var(--line);display:flex;flex-direction:column}
.card-media{position:relative}
.card-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.card-kicker{font-size:10px;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--teal);margin-bottom:12px}
.card-body h3{margin-bottom:11px}
.card-body p{font-size:15.5px;color:var(--text-muted);flex:1;margin-bottom:22px}
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}

.stat-card{background:var(--paper);border:var(--hairline) solid var(--line)}
.stat-body{padding:30px 28px 32px}
.stat-num{display:block;font-family:var(--serif);font-size:44px;line-height:1;color:var(--teal)}
.stat-num small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:var(--track-nav);
  text-transform:uppercase;margin-top:10px;color:var(--ink);opacity:.6}
.stat-body h3{margin:16px 0 10px}
.stat-body p{font-size:15px;color:var(--text-muted)}

/* ===== Bildkachel ===== */
.tile{position:relative;display:block}
.tile-frame{position:relative;overflow:hidden}
.tile-frame::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(29,42,43,.7),transparent 55%)}
.tile .ph{transition:transform var(--dur-slow) var(--ease)}
.tile:hover .ph{transform:scale(1.04)}
.tile-cap{position:absolute;left:24px;right:24px;bottom:22px;z-index:3;color:#fff}
.tile-cap h3{margin-bottom:5px;color:#fff}
.tile-cap span{font-size:10.5px;letter-spacing:var(--track-label);text-transform:uppercase;opacity:.85}

/* ===== Preis & Kennzahlen ===== */
.pricebox{border-left:2px solid var(--magenta);padding:4px 0 4px 22px;max-width:52ch}
.pricebox b{display:block;font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.2}
.pricebox span{font-size:14px;color:var(--text-muted)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:28px 0;
  border-top:1px solid var(--line-on-dark);border-bottom:1px solid var(--line-on-dark)}
.facts b{display:block;font-family:var(--serif);font-size:36px;font-weight:400;line-height:1;
  color:var(--magenta-on-dark)}
.facts span{display:block;margin-top:9px;font-size:10.5px;letter-spacing:var(--track-nav);
  text-transform:uppercase;color:rgba(244,244,243,.62)}
.facts.on-light b{color:var(--magenta)}
.facts.on-light{border-color:var(--line)}
.facts.on-light span{color:var(--text-faint)}

/* ===== Ablaufschritte ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.step{position:relative;padding-top:28px;text-align:center}
.step::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:1px;background:var(--magenta)}
.step b{display:block;font-family:var(--serif);font-size:15px;letter-spacing:var(--track-nav);
  color:var(--magenta);margin-bottom:16px}
.step h3{margin-bottom:12px}
.step p{font-size:15.5px;color:var(--text-muted);max-width:32ch;margin:0 auto}
.sec.dark .step::before,.sec.deep .step::before{background:var(--magenta-on-dark)}
.sec.dark .step b,.sec.deep .step b{color:var(--magenta-on-dark)}
.sec.dark .step p,.sec.deep .step p{color:var(--text-on-dark)}

/* ===== Formular ===== */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label,label.fl{font-size:10.5px;letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--teal)}
input,select,textarea{font-family:var(--sans);font-size:16px;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line-strong);padding:11px 0;
  border-radius:var(--radius);width:100%;transition:var(--dur-fast)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--magenta)}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
textarea{resize:vertical;min-height:94px}
.consent{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
  color:var(--text-muted);letter-spacing:0;text-transform:none}
.consent input{width:17px;height:17px;flex:0 0 auto;margin-top:3px;accent-color:var(--teal)}
.field-error{border-bottom-color:#A32020!important}
.err-msg{font-size:12.5px;color:#A32020;letter-spacing:0;text-transform:none}

/* ===== Tabellen (Speisekarte, Kapazitäten) ===== */
.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl th,.tbl td{text-align:left;padding:14px 14px 14px 0;border-bottom:1px solid var(--line)}
.tbl th{font-family:var(--sans);font-size:10.5px;letter-spacing:var(--track-nav);
  text-transform:uppercase;color:var(--teal);font-weight:400}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:0}
.tbl tr:last-child td{border-bottom:0}

/* ===== Speisekarten-Eintrag ===== */
.menu-item{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.menu-item:last-child{border-bottom:0}
.menu-item .mi-main{flex:1}
.menu-item h4{font-size:19px;margin-bottom:4px}
.menu-item .mi-desc{font-size:14.5px;color:var(--text-muted);max-width:56ch}
.menu-item .mi-dot{display:none}
.menu-item .mi-price{font-family:var(--serif);font-size:19px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.menu-item .mi-pp{font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:var(--text-muted);margin-right:6px;vertical-align:2px}
.menu-note{display:flex;gap:16px;align-items:flex-start;background:var(--paper-2);border-left:3px solid var(--teal);padding:20px 24px;margin-top:30px;font-size:15.5px;line-height:1.6}
.menu-note strong{display:block;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--teal);font-weight:400;margin-bottom:4px}
.menu-item .mi-tags{display:flex;gap:6px;margin-top:7px}
.mi-tag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
  border:1px solid var(--teal);padding:2px 6px}

/* ===== Öffnungszeiten ===== */
.hours{font-size:15.5px}
.hours div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;
  border-bottom:1px dotted var(--line-strong)}
.hours div:last-child{border-bottom:0}
.hours dt{color:var(--text-muted)}
.hours dd{font-variant-numeric:tabular-nums}
.hours .today{color:var(--magenta)}

/* ===== Akkordeon ===== */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:20px 0;display:flex;align-items:center;
  justify-content:space-between;gap:20px;font-family:var(--serif);font-size:20px;transition:var(--dur-fast)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--magenta)}
.acc summary::after{content:"";width:11px;height:11px;flex:0 0 auto;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-fast)}
.acc details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.acc .acc-body{padding:0 0 22px;font-size:15.5px;color:var(--text-muted);max-width:64ch}

/* ===== Zitat ===== */
.quote{text-align:center}
.quote blockquote{font-family:var(--serif);font-size:clamp(22px,3vw,34px);font-style:italic;
  font-weight:400;line-height:1.42;max-width:26ch;margin:0 auto 26px}
.quote cite{font-style:normal;font-size:10.5px;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--teal)}
.sec.dark .quote cite{color:var(--teal-on-dark)}

/* ===== Slider / Rail ===== */
.rail{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 336px;scroll-snap-align:start}
.snav-group{display:flex;gap:10px}
.snav{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:var(--dur-fast)}
.snav:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.snav:disabled{opacity:.3;cursor:not-allowed}
.snav svg{width:16px;height:16px}

/* ===== Galerie ===== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gallery a{position:relative;overflow:hidden;display:block}
.gallery .ph{transition:transform var(--dur-slow) var(--ease)}
.gallery a:hover .ph{transform:scale(1.05)}
.gallery .wide{grid-column:span 2}
.gallery .tall{grid-row:span 2}

/* ===== Navigation ===== */
.nav-main{display:flex;gap:28px}
.nav-main a{font-size:var(--fs-button);letter-spacing:var(--track-nav);text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid transparent;transition:var(--dur-fast)}
.nav-main a:hover,.nav-main a[aria-current]{border-color:var(--magenta);color:var(--magenta)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:1.5px;background:var(--ink);transition:var(--dur-fast)}
.nav-drawer{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;pointer-events:none;transition:opacity var(--dur)}
.nav-drawer[data-open]{opacity:1;pointer-events:auto}
.nav-drawer a{font-family:var(--serif);font-size:30px;color:var(--paper-2);padding:10px 0}
.nav-drawer a:hover{color:var(--magenta-on-dark)}
.nav-close{position:absolute;top:26px;right:26px;background:none;border:0;cursor:pointer;
  width:34px;height:34px;color:var(--paper-2)}

/* ===== Icons ===== */
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:30px;height:30px;stroke-width:1}

/* ===== Reveal (nur mit JS aktiv, sonst immer sichtbar) ===== */
body.js .rv{opacity:0;transform:translateY(24px);
  transition:opacity .9s ease,transform .9s var(--ease)}
body.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.js .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s!important}
}

/* ===== Raster-Hilfen ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--gap)}
.offset-tiles>:nth-child(2){margin-top:-52px}
.mirror{direction:rtl}
.mirror>*{direction:ltr}

/* ===== Responsive ===== */
@media(max-width:1080px){
  .grid-4{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  :root{--gutter:var(--gutter-mobile);--section-y:var(--section-y-mobile);--gap-lg:34px}
  body{font-size:16px}
  .nav-main{display:none}
  .burger{display:flex}
  .grid-2,.grid-3,.steps{grid-template-columns:1fr}
  .steps{gap:36px}
  .facts{grid-template-columns:1fr;gap:16px}
  .form{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:38px}
  .offset-tiles>*{margin-top:0!important}
  .mirror{direction:ltr}
  .rail>*{flex-basis:290px}
}

/* ===========================================================================
   Preview-Chrome — NUR für die Design-System-Karten, nicht für Produktion
   =========================================================================== */
.dspv{padding:38px 34px;background:var(--paper)}
.dspv.tint{background:var(--paper-2)}
.dspv.dark{background:var(--ink);color:var(--paper-2)}
.dspv.deep{background:var(--ink-deep);color:var(--paper-2)}
.dspv-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:16px}
.dspv.dark .dspv-lbl,.dspv.deep .dspv-lbl{color:rgba(244,244,243,.5)}
.dspv-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.dspv-stack>*+*{margin-top:30px}
.dsnote{margin-top:26px;padding-top:20px;border-top:1px solid var(--paper-3);
  font-size:15px;max-width:72ch;color:var(--text-muted)}
.dspv.dark .dsnote,.dspv.deep .dsnote{border-color:var(--line-on-dark);color:var(--text-on-dark)}
.dsdd{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.dsdd>div{border:1px solid var(--paper-3);padding:24px;background:var(--paper)}
.dsdd h4{font-family:var(--sans);font-size:10.5px;letter-spacing:var(--track-label);
  text-transform:uppercase;margin-bottom:14px}
.dsdd h4.ok{color:#1F6B4A}
.dsdd h4.no{color:#A32020}
.dsdd ul{list-style:none;font-size:15px}
.dsdd li{position:relative;padding:6px 0 6px 18px;color:var(--text-muted)}
.dsdd li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:1px;background:var(--grey)}
.dstable{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:8px}
.dstable th,.dstable td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--paper-3)}
.dstable th{font-family:var(--sans);font-size:10.5px;letter-spacing:var(--track-nav);
  text-transform:uppercase;color:var(--teal);font-weight:400}
.dscode{background:var(--ink-deep);color:#C9D4D3;padding:24px;overflow-x:auto;
  font-family:var(--mono);font-size:12.5px;line-height:1.85}
@media(max-width:700px){.dsdd{grid-template-columns:1fr}}

/* ===== Mobil-Feinschliff (Handy, Tablet, iOS/Android) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
img,svg,video{max-width:100%}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.legal,.legal p,.legal li{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.grid-2>*,.grid-3>*,.grid-4>*,.eq>*,.form>*,.hero-in{min-width:0}
.hero-in{max-width:min(900px,100%)}
@media(max-width:1000px){.eq{grid-template-columns:1fr;gap:46px}}
@media(max-width:860px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.hero-in h1{font-size:clamp(30px,9vw,40px)}}
/* Formularfelder: volle Breite, keine Zoom-Sprünge auf iOS */
.form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.form select,.form textarea{width:100%;max-width:100%;min-width:0;font-size:16px}
.form input[type=date]{-webkit-appearance:none;appearance:none;min-height:44px;display:block}
/* Bewertungs-Punkte: größere Tippfläche */
.rev-dots{gap:16px}
.rev-dots button{position:relative}
.rev-dots button::after{content:"";position:absolute;inset:-10px}
/* Footer- und Breadcrumb-Links leichter antippbar */
@media(max-width:860px){.ft-legal a,.breadcrumb a,.ft-meta a{display:inline-block;padding:8px 2px}}
/* Hero-Höhe auf Handys ohne Sprung durch Browserleisten */
@supports(height:1svh){@media(min-width:861px){.hero{height:78svh}}}
.consent span{min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.consent{min-width:0}
.menu-item .mi-main{min-width:0}
@media(max-width:380px){.menu-item .mi-price{font-size:16px}.menu-item .mi-pp{display:block;margin:0}}