/* ============================================================
   MESSIE BAYERN — Design-System „Signalwerk"
   Farbwelt: Markenpalette von messieaustria.at (Dunkelgrün + helle
   grünliche Flächen). Die Werte sind technisch aus der Live-Site gezogen,
   nicht geschätzt — Herkunft je Wert in docs/12-farbwelt-messieaustria.md.
   Layout, Typografie, Kartenformen, Abstände, Schatten-Geometrie und alle
   Animationen stammen unverändert aus dem bestehenden Prototyp.
   Barlow Condensed (Display) + Barlow (Body), self-hosted
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-v13-latin_latin-ext-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-v13-latin_latin-ext-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-v13-latin_latin-ext-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-v13-latin_latin-ext-600.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-v13-latin_latin-ext-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Flaechen — aus :root{--soft} bzw. den Inline-Styles der Referenz */
  --surface-soft: #F5FAF7;     /* Grundflaeche (messieaustria: --soft) */
  --surface-strong: #E7F5EC;   /* Wechsel-Sektionen (Referenz: background:#e7f5ec) */
  --brand-dark: #163126;       /* dunkle Sektionen (Referenz: Verlaufs-Start, Schattenton) */
  --brand-deep: #0F211A;       /* Footer/Announcement — abgedunkelte Variante von #163126,
                                  damit sich Footer und dunkle Sektion unterscheiden */
  --white: #FFFFFF;

  /* Text — Ueberschriften tragen die dunkle Markenfarbe (§30.4) */
  --ink: #163126;      /* 14,0:1 auf Weiss · 12,4:1 auf --surface-strong */
  --ink-2: #3D554A;    /* Fliesstext/Lead — 8,1:1 auf Weiss · 7,1:1 auf --brand-tint */
  --mute: #40584D;     /* Tertiaertext — 7,7:1 auf Weiss · 6,8:1 auf --brand-tint */
  --on-dark: #E7F5EC;  /* Text auf Dunkelgruen — 12,4:1 auf --brand-dark */

  /* Rahmen — aus :root{--border} der Referenz */
  --line: #DFE7E2;
  --line-soft: #E7F3ED;

  /* Marke / CTA — Referenz: button{background:var(--green)}, :hover{--green-dark} */
  --brand-primary: #1F7A4A;       /* weisse Schrift darauf: 5,33:1 */
  --brand-primary-dark: #0A4F2E;  /* weisse Schrift darauf: 9,67:1 */
  --brand-tint: #E7F3ED;          /* Referenz: .badge{background:#e7f3ed} */
  --brand-accent: #95D5B2;        /* nur als Flaeche/Hervorhebung, nie als Textfarbe */
  --cta: #1F7A4A;
  --cta-deep: #0A4F2E;
  /* WhatsApp im offiziellen WhatsApp-Gruen. Weisse Schrift haelt darauf
     kein AA (1,98:1) - deshalb dunkler Text (#163126 = 7,05:1). */
  --wa: #25D366;
  --wa-deep: #1FC15C;
  --on-wa: #0B3320;
  /* Anruf-Buttons in Rot (Kundenvorgabe). Weiss auf #C62828 = 5,63:1 (AA). */
  --tel: #C62828;
  --tel-deep: #A61F1F;
  /* Schattenton der Referenz: rgba(22,49,38,…) = #163126 */
  --shadow-rgb: 22, 49, 38;
  --radius-l: 1.75rem;
  --radius-m: 1.125rem;
  --radius-s: .625rem;
  --shadow-soft: 0 1px 2px rgba(22,49,38,.04), 0 12px 40px -12px rgba(22,49,38,.10);
  --shadow-float: 0 1px 3px rgba(22,49,38,.05), 0 24px 70px -20px rgba(22,49,38,.16);
  --ease: cubic-bezier(.32,.72,0,1);
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-disp: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --w-max: 76rem;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface-soft);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
b, strong { font-weight: 600; }
/* Lesbarkeits-Boden: nichts unter 14px (Browser-Default fuer <small> waere 13,3px) */
small { font-size: .88rem; }
::selection { background: var(--brand-tint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--w-max); margin-inline: auto; padding-inline: clamp(1.125rem, 4vw, 2.5rem); }

/* ---------- Typography ---------- */
h1, h2, h3, .disp {
  font-family: var(--font-disp);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.005em;
  text-wrap: balance;
  /* Deutsche Komposita ("Wohnungsauflösung") sprengen bei grosser Schrift
     sonst schmale Viewports — nur brechen, wenn es sonst ueberlaeuft. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(3rem, 6.8vw, 5.1rem); }
h2 { font-size: clamp(2.3rem, 4.9vw, 3.75rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.15; }
.lead { font-size: clamp(1.15rem, 1.85vw, 1.4rem); line-height: 1.55; font-weight: 500; color: var(--ink-2); max-width: 38em; }
/* Kicker als Klebeband-Label (Signatur statt generischer Punkt-Pille).
   Assets sind echt transparent — keine Blend-Modes (brechen in Stacking-Contexts). */
.eyebrow {
  display: inline-block; position: relative; isolation: isolate;
  font-family: var(--font-disp); font-size: .92rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; line-height: 1;
  color: var(--ink); padding: .5rem 1.15rem .44rem; margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: ''; position: absolute; inset: -.1rem -.2rem; z-index: -1;
  background: url('../deco/tape-2.webp?v=20260730') 50% 50% / 100% 100% no-repeat;
  transform: rotate(-1.4deg);
}

/* Marker-Unterstreichung (Higgsfield-Asset) */
.mark-u { position: relative; white-space: nowrap; }
.mark-u::after {
  content: ''; position: absolute; left: -2%; right: -3%; bottom: -.14em; height: .34em;
  background: url('../deco/marker-underline.webp?v=20260730') 50% 50% / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---------- Announcement bar ---------- */
.annc {
  background: var(--brand-deep); color: #F2F8F4;
  font-size: .92rem; font-weight: 600; letter-spacing: .02em;
  padding: .5rem 0; overflow: hidden;
}
.annc b { color: #95D5B2; font-weight: 600; }
/* Endlosschleife: zwei identische Kopien, Track wandert um 50 % -> nahtlos. */
.annc-track { display: flex; width: max-content; animation: annc-scroll 28s linear infinite; }
.annc:hover .annc-track { animation-play-state: paused; }
.annc-copy { display: flex; gap: 2.6rem; padding-right: 2.6rem; white-space: nowrap; }
.annc-copy span { display: inline-flex; align-items: center; gap: .55rem; }
.annc-copy span::before {
  content: ''; width: .34rem; height: .34rem; border-radius: 50%;
  background: #95D5B2; flex: none;
}
@keyframes annc-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .annc-track { animation: none; width: 100%; justify-content: center; }
  .annc-copy[aria-hidden] { display: none; }
  .annc-copy { flex-wrap: wrap; white-space: normal; justify-content: center; gap: .3rem 1.6rem; padding: 0 1rem; }
}

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; padding: .75rem 0; transition: padding .45s var(--ease); }
.hdr-in {
  display: flex; align-items: center; gap: 1.25rem;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(22,49,38,.07); border-radius: 999px;
  padding: .55rem .65rem .55rem 1.15rem;
  box-shadow: var(--shadow-soft);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: 1.65rem; height: auto; }
.brand-word { font-family: var(--font-disp); font-weight: 700; font-size: 1.42rem; line-height: 1; letter-spacing: .01em; }
.brand-word small { display: block; font-family: var(--font-body); font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--mute); margin-top: .18rem; }
.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--ink-2); padding: .5rem .8rem; border-radius: 999px; transition: background .35s var(--ease), color .35s var(--ease); }
.nav a:hover { background: var(--surface-soft); color: var(--ink); }
.hdr-cta { display: flex; gap: .5rem; align-items: center; }

/* ---------- Mobile-Menü (per JS injiziert) ---------- */
.burger {
  display: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
  background: var(--surface-soft); border: 1px solid var(--line); position: relative;
}
.burger span {
  position: absolute; left: 50%; top: 50%; width: 1.15rem; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .45s var(--ease);
}
.burger span:first-child { transform: translate(-50%, calc(-50% - 4px)); }
.burger span:last-child { transform: translate(-50%, calc(-50% + 4px)); }
.burger[aria-expanded="true"] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.mnav {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(245,250,247,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; justify-content: center; padding: 2rem clamp(1.4rem, 6vw, 3rem);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease);
}
.mnav.open { opacity: 1; pointer-events: auto; }
.mnav-x {
  position: absolute; top: 1.1rem; right: 1.1rem; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line); font-size: 1.5rem; line-height: 1; color: var(--ink);
}
.mnav-link {
  display: block; font-family: var(--font-disp); font-weight: 700; text-decoration: none; color: var(--ink);
  font-size: clamp(1.9rem, 7.5vw, 2.7rem); line-height: 1.25; padding: .3rem 0;
  opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.mnav.open .mnav-link { opacity: 1; transform: none; }
.mnav.open .mnav-link:nth-child(1) { transition-delay: .06s; }
.mnav.open .mnav-link:nth-child(2) { transition-delay: .11s; }
.mnav.open .mnav-link:nth-child(3) { transition-delay: .16s; }
.mnav.open .mnav-link:nth-child(4) { transition-delay: .21s; }
.mnav.open .mnav-link:nth-child(5) { transition-delay: .26s; }
.mnav.open .mnav-link:nth-child(6) { transition-delay: .31s; }
.mnav-ctas { display: grid; gap: .6rem; margin-top: 1.8rem; max-width: 22rem; }
.mnav-ctas .btn { justify-content: center; }
@media (max-width: 1400px) { .burger { display: block; } }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav-link, .burger span { transition: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  border-radius: 999px; padding: .95rem .85rem .95rem 1.6rem;
  font-weight: 600; font-size: 1.08rem; text-decoration: none; line-height: 1;
  transition: transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(.975); }
.btn .ico {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .45s var(--ease);
}
.btn:hover .ico { transform: translate(2px,-1px) scale(1.06); }
.btn-primary {
  background: linear-gradient(180deg, var(--cta) 0%, var(--cta-deep) 100%); color: #fff;
  box-shadow: 0 8px 22px -8px rgba(31,122,74,.70), 0 2px 6px rgba(31,122,74,.25), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #0A4F2E 0%, var(--cta) 100%);
  box-shadow: 0 12px 28px -8px rgba(31,122,74,.80), inset 0 1px 0 rgba(255,255,255,.26);
}
.btn-primary .ico { background: rgba(255,255,255,.18); }
.btn-wa {
  background: linear-gradient(180deg, var(--wa) 0%, var(--wa-deep) 100%); color: var(--on-wa);
  box-shadow: 0 8px 22px -8px rgba(37,211,102,.60), 0 2px 6px rgba(37,211,102,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-wa:hover {
  background: linear-gradient(180deg, #2BDD6E 0%, var(--wa) 100%);
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.75), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-wa .ico { background: rgba(11,51,32,.14); }
/* Jeder Button, der anruft, wird rot - unabhaengig von seiner Grundklasse.
   Attribut-Selektor statt neuer Klasse: greift auch fuer JS-injizierte
   Buttons (mobiles Menue) und alle 27 Seiten ohne HTML-Aenderung. */
.btn[href^="tel:"] {
  background: linear-gradient(180deg, var(--tel) 0%, var(--tel-deep) 100%);
  color: #fff; border: 0;
  box-shadow: 0 8px 22px -8px rgba(198,40,40,.65), 0 2px 6px rgba(198,40,40,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn[href^="tel:"]:hover {
  background: linear-gradient(180deg, #D23434 0%, var(--tel) 100%);
  box-shadow: 0 12px 28px -8px rgba(198,40,40,.78), inset 0 1px 0 rgba(255,255,255,.26);
}
.btn[href^="tel:"] .ico { background: rgba(255,255,255,.18); }
.btn-ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line); padding: .8rem 1.3rem; }
.btn-ghost:hover { border-color: var(--ink-2); }
.btn-ghost.sm, .btn.sm { font-size: .92rem; padding: .62rem .6rem .62rem 1.1rem; }
.btn-ghost.sm { padding: .62rem 1.1rem; }
.ico svg { width: 1rem; height: 1rem; display: block; }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.2rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }
.hero-copy .eyebrow { margin-bottom: 1.1rem; }
.hero-copy h1 { margin-bottom: 1.15rem; }
.hero-copy .lead { margin-bottom: 1.6rem; }
.hero-bullets { display: grid; gap: .55rem; margin-bottom: 1.9rem; }
.hero-bullets li { display: flex; gap: .65rem; align-items: baseline; font-weight: 500; color: var(--ink-2); }
.check {
  width: 1.15rem; height: 1.05rem; flex: none; align-self: center;
  background: url('../deco/marker-check.webp?v=20260730') 50% 50% / contain no-repeat;
}
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.micro-trust { font-size: .94rem; font-weight: 500; color: var(--mute); display: flex; flex-wrap: wrap; gap: .3rem .85rem; }
.micro-trust span { display: inline-flex; align-items: center; gap: .38rem; }
.micro-trust span::before { content: ''; width: .3rem; height: .3rem; border-radius: 50%; background: var(--brand-primary); opacity: .7; }

/* ---------- Double-Bezel Card ---------- */
.bezel {
  background: rgba(22,49,38,.045); border: 1px solid rgba(22,49,38,.07);
  border-radius: var(--radius-l); padding: .5rem;
}
.bezel-core { background: var(--white); border-radius: calc(var(--radius-l) - .5rem); overflow: hidden; box-shadow: inset 0 1px 1px rgba(255,255,255,.6); }

/* ---------- Before/After Slider ---------- */
.ba { position: relative; }
.ba-frame { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: calc(var(--radius-l) - .5rem); touch-action: pan-y; user-select: none; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after-wrap { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 50%); will-change: clip-path; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 3; will-change: left;
}
.ba-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(22,49,38,.14); }
.ba-knob {
  position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%);
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--white); box-shadow: 0 4px 18px rgba(22,49,38,.28);
  display: flex; align-items: center; justify-content: center; gap: .16rem;
  color: var(--ink);
}
.ba-knob svg { width: .62rem; height: .95rem; }
.ba-tag {
  position: absolute; z-index: 2; top: 1rem;
  font-family: var(--font-disp); font-weight: 600; font-size: .95rem; letter-spacing: .06em;
  background: rgba(22,49,38,.78); color: #fff; border-radius: 999px; padding: .3rem .85rem;
  backdrop-filter: none;
}
.ba-tag.before { left: 1rem; }
.ba-tag.after { right: 1rem; background: var(--cta); }
.ba-caption { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.1rem .5rem; font-size: .92rem; font-weight: 500; color: var(--mute); }
.ba-caption b { color: var(--ink-2); font-weight: 600; }

/* Tape auf Karten-Ecke */
.taped { position: relative; }
.taped::after {
  content: ''; position: absolute; top: -1.05rem; right: 1.6rem; width: 8.5rem; height: 2.1rem;
  background: url('../deco/tape-1.webp?v=20260730') 50% 50% / 100% 100% no-repeat;
  transform: rotate(4deg); pointer-events: none; z-index: 5;
}
.taped-l::after { right: auto; left: 1.4rem; transform: rotate(-5deg); background-image: url('../deco/tape-2.webp?v=20260730'); }

/* ---------- Trust-Leiste ---------- */
.trustbar { padding: 0 0 clamp(2.5rem, 5vw, 4rem); }
.trustbar-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.trust-chip {
  display: flex; align-items: center; gap: .8rem; min-width: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 1rem 1.15rem; font-weight: 600; font-size: .97rem; line-height: 1.25;
  overflow-wrap: anywhere;
}
.trust-chip small { display: block; font-weight: 500; font-size: .88rem; color: var(--mute); margin-top: .1rem; }
.trust-chip .check { width: 1.3rem; height: 1.2rem; }

/* ---------- Sections ---------- */
.sec { padding: clamp(3.2rem, 7vw, 6.5rem) 0; background: var(--white); }
.sec-head { max-width: 44em; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.sec-head .lead { margin-top: .9rem; }
.sec-deep { background: var(--surface-strong); }
.sec-ink { background: var(--brand-dark); color: #F2F8F4; }
.sec-ink .lead { color: var(--on-dark); }
/* KEINE pauschale .sec-ink p/li-Regel: weisse Karten (Formular, Pledge-Liste)
   liegen innerhalb der dunklen Sektion und wuerden hellen Text erben (1,3:1). */

/* ---------- Leistungs-Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.svc {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 22rem; border-radius: var(--radius-l); overflow: hidden;
  text-decoration: none; color: #fff; isolation: isolate;
}
.svc.tall { grid-column: span 5; grid-row: span 2; min-height: 34rem; }
.svc.wide { grid-column: span 7; }
.svc.half { grid-column: span 4; }
.svc.half-3 { grid-column: span 3; }
.svc.banner { grid-column: span 12; min-height: 15rem; }
.svc.noimg { background: var(--ink); }
.svc.noimg::after { display: none; }
.svc img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc:hover img.bg { transform: scale(1.045); }
.svc::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(185deg, rgba(22,49,38,0) 32%, rgba(22,49,38,.82) 82%); }
.svc-body { padding: 1.5rem 1.6rem 1.45rem; }
.svc-body h3 { color: #fff; margin-bottom: .3rem; font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
.svc-body p { font-size: .97rem; color: #fff; max-width: 30em; }
.svc-go {
  position: absolute; top: 1.15rem; right: 1.15rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.svc:hover .svc-go { background: var(--brand-primary); border-color: var(--brand-primary); transform: translate(2px,-2px); }
.svc-label {
  position: absolute; top: 1.2rem; left: 1.35rem;
  font-family: var(--font-disp); font-weight: 700; font-size: .92rem; letter-spacing: .08em;
  background: #fff; color: var(--ink); border-radius: 999px; padding: .28rem .8rem;
}

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: step; }
.steps.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.9rem 1.7rem 1.8rem; position: relative; }
.step-num {
  font-family: var(--font-disp); font-weight: 700; font-size: 3.4rem; line-height: 1; color: var(--brand-primary);
  display: inline-block; position: relative; margin-bottom: 1rem;
}
.step-num::after {
  content: ''; position: absolute; left: -14%; right: -16%; bottom: -.3em; height: .26em;
  background: url('../deco/marker-underline-2.webp?v=20260730') 50% 50% / 100% 100% no-repeat;
}
.step h3 { margin-bottom: .55rem; }
.step p { color: var(--ink-2); font-size: 1rem; }
.step small { display: block; margin-top: .9rem; font-size: .92rem; font-weight: 500; color: var(--mute); }

/* ---------- Festpreis / Checkliste ---------- */
.pledge-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }
.pledge-quote {
  font-family: var(--font-disp); font-weight: 600; font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.14; text-wrap: balance;
}
.pledge-quote .mark-u::after { background-image: url('../deco/marker-underline-2.webp?v=20260730'); }
.pledge-list { display: grid; gap: .8rem; }
.pledge-list li {
  display: flex; gap: .8rem; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: .95rem 1.15rem; font-weight: 500;
}
.pledge-list .check { width: 1.35rem; height: 1.2rem; }
.pledge-list li small { color: var(--mute); font-weight: 500; font-size: .9rem; margin-left: auto; text-align: right; }

/* ---------- Vergleich ---------- */
.cmp { border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.cmp table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cmp th, .cmp td { padding: 1rem 1.3rem; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.cmp thead th { border-top: 0; font-family: var(--font-disp); font-size: 1.15rem; font-weight: 600; padding-top: 1.2rem; padding-bottom: 1.2rem; }
.cmp thead th.us { background: var(--brand-dark); color: #fff; }
.cmp td.us { background: #F4FBF7; font-weight: 600; }
.cmp td .check { display: inline-block; vertical-align: -2px; margin-right: .5rem; }
.cmp td.no { color: var(--mute); }
.cmp td.no::before { content: '—'; margin-right: .5rem; color: #C3D2C9; }

/* ---------- Sofort-Check ---------- */
.qc { max-width: 46rem; margin-inline: auto; }
.qc-card { padding: clamp(1.6rem, 3.5vw, 2.6rem); background: var(--white); border-radius: calc(var(--radius-l) - .5rem); color: var(--ink); }
/* ---------- Info-Karten (Beratungs-Bausteine) ---------- */
.infogrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.infocard {
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 1.5rem 1.4rem 1.4rem;
}
.infocard h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); margin-bottom: .45rem; }
.infocard p { font-size: 1rem; color: var(--ink-2); }
.infocard a { color: var(--ink); font-weight: 600; }

/* Negativ-Marker in der Pledge-Liste („machen wir nicht") */
.no-x {
  width: 1.15rem; height: 1.05rem; flex: none; align-self: center; position: relative;
}
.no-x::before, .no-x::after {
  content: ''; position: absolute; top: 50%; left: 5%; width: 90%; height: .14rem;
  border-radius: 999px; background: var(--mute);
}
.no-x::before { transform: rotate(45deg); }
.no-x::after { transform: rotate(-45deg); }
.pledge-list li:has(.no-x) { color: var(--mute); background: transparent; border-style: dashed; }

/* ---------- Messie (ruhige Sektion) ---------- */
.calm { background: var(--white); }
.calm-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }
.calm-points { display: grid; gap: 1rem; margin: 1.4rem 0 1.8rem; }
.calm-points li { display: flex; gap: .8rem; }
.calm-points b { display: block; }
.calm-points p { font-size: 1rem; color: var(--ink-2); }
.calm-img { border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4/4.4; }
.calm-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- FAQ ---------- */
.faq { max-width: 50rem; margin-inline: auto; display: grid; gap: .7rem; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 1.4rem; font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-family: var(--font-disp); font-size: 1.6rem; font-weight: 500; color: var(--brand-primary);
  transition: transform .45s var(--ease); line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 1.4rem 1.25rem; color: var(--ink-2); font-size: 1rem; max-width: 60em; }

/* ---------- Kontakt / Formular ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(1.8rem, 4vw, 4rem); }
.contact-side h2 { margin-bottom: 1rem; }
.contact-ways { display: grid; gap: .7rem; margin-top: 1.6rem; }
.way {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-m);
  padding: 1rem 1.2rem; color: #F2F8F4; transition: background .4s var(--ease), transform .4s var(--ease);
}
.way:hover { background: rgba(255,255,255,.11); transform: translateY(-1px); }
.way .ico { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex: none; }
.way b { display: block; font-size: 1.05rem; }
.way small { color: var(--on-dark); font-size: .92rem; }
.way.wa .ico { background: var(--wa); }
.way.wa .ico svg { fill: var(--on-wa); }
.way.tel .ico { background: var(--tel); }
.form-card { background: var(--white); color: var(--ink); border-radius: calc(var(--radius-l) - .5rem); padding: clamp(1.5rem, 3vw, 2.3rem); }
.form-card h3 { margin-bottom: .4rem; }
.form-card > p { color: var(--mute); font-size: .96rem; margin-bottom: 1.4rem; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.f-field { display: grid; gap: .3rem; }
.f-field.full { grid-column: 1 / -1; }
.f-field label { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.f-field input, .f-field textarea, .f-field select {
  font: inherit; color: var(--ink); background: var(--surface-soft);
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  padding: .8rem .95rem; width: 100%;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.f-field input:focus, .f-field textarea:focus, .f-field select:focus { outline: none; border-color: var(--brand-primary); background: var(--white); }
.f-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.f-note { font-size: .88rem; font-weight: 500; color: var(--mute); max-width: 24em; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Städte / Einsatzgebiet ---------- */
.geo-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
.geo-map { display: flex; justify-content: center; }
.geo-map img { width: min(17rem, 60vw); }
.city-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.city-chips a {
  text-decoration: none; font-weight: 600; font-size: .95rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1.05rem; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.city-chips a:hover { border-color: var(--brand-primary); background: var(--brand-tint); }
.city-chips span { font-weight: 500; font-size: .95rem; color: var(--mute); background: transparent; border: 1px dashed var(--line); border-radius: 999px; padding: .55rem 1.05rem; }

/* ---------- Galerie-Strip ---------- */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.strip figure { position: relative; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 3/3.8; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.strip figure:hover img { transform: scale(1.04); }
.strip figcaption {
  position: absolute; left: .8rem; bottom: .8rem;
  font-family: var(--font-disp); font-weight: 700; font-size: .94rem; letter-spacing: .05em;
  background: #fff; color: var(--ink); padding: .26rem .75rem; border-radius: 999px;
}
.strip figcaption.hot { background: var(--cta); color: #fff; }

/* ---------- Footer ---------- */
.foot { background: var(--brand-deep); color: #E7F5EC; padding: clamp(3rem, 6vw, 5rem) 0 7rem; font-size: .97rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 2.5rem; margin-bottom: 3rem; }
.foot h4 { font-family: var(--font-disp); font-weight: 600; font-size: 1.1rem; color: #F2F8F4; margin-bottom: .9rem; letter-spacing: .03em; }
.foot a { color: #C2D6C9; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot li { margin-bottom: .45rem; }
.foot-brand img.logo-anim { width: min(15rem, 70vw); border-radius: var(--radius-s); margin-bottom: 1rem; }
.foot-note { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; font-size: .88rem; color: var(--on-dark); }

/* ---------- Sticky Mobile CTA ---------- */
.mcta {
  position: fixed; left: .6rem; right: .6rem; bottom: .6rem; z-index: 70;
  display: none; grid-template-columns: 1fr 1fr 1.35fr; gap: .45rem;
  background: rgba(15,33,26,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 1.2rem; padding: .45rem;
  transform: translateY(130%); transition: transform .6s var(--ease);
}
.mcta.on { transform: translateY(0); }
.mcta a {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  text-decoration: none; font-weight: 600; font-size: 1rem; color: #fff;
  border-radius: .85rem; padding: 1.05rem .5rem; min-height: 52px; line-height: 1.15; text-align: center;
}
.mcta .m-tel { background: linear-gradient(180deg, var(--tel) 0%, var(--tel-deep) 100%); }
.mcta .m-wa { background: linear-gradient(180deg, var(--wa) 0%, var(--wa-deep) 100%); color: var(--on-wa); }
.mcta .m-go { background: linear-gradient(180deg, var(--cta) 0%, var(--cta-deep) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }

/* ---------- Reveal Motion ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, .svc img.bg, .strip img { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .pledge-grid, .calm-grid, .contact-grid, .geo-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 2.2rem; }
  .hero-media { order: 2; }
  .trustbar-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc.tall, .svc.wide, .svc.half, .svc.half-3, .svc.banner { grid-column: span 2; min-height: 20rem; }
  .svc.tall { min-height: 26rem; }
  .svc.banner { min-height: 13rem; }
  .steps, .steps.steps-4 { grid-template-columns: 1fr; }
  .infogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { display: none; }
}
/* Sehr schmale Altgeraete (<360px): Header-CTA weicht dem Sticky-CTA unten,
   sonst schiebt der groessere Button den Burger aus dem Viewport. */
@media (max-width: 380px) {
  .hdr-cta { display: none; }
}
/* Unbrechbare Token (E-Mail-Adresse) und sehr grosse Headlines auf
   Kleinstgeraeten baendigen — ohne die Schrift generell zu verkleinern. */
.foot a, .foot li { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  h1 { font-size: clamp(2.5rem, 9.2vw, 3rem); }
  h2 { font-size: clamp(2rem, 7.4vw, 2.3rem); }
}
@media (max-width: 700px) {
  body { font-size: 1rem; }
  .annc { font-size: .88rem; }
  .hdr { padding: .5rem 0; }
  .hdr-cta .btn-ghost { display: none; }
  .brand-word small { display: none; }   /* Platz statt Mini-Schrift */
  .f-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .infogrid { grid-template-columns: 1fr; }
  .svc.tall, .svc.wide, .svc.half, .svc.half-2, .svc.half-3, .svc.banner { grid-column: span 1; }
  .mcta { display: grid; }
  .foot { padding-bottom: 8.5rem; }
  .cmp { overflow-x: auto; }
  .cmp table { min-width: 34rem; }
  .taped::after { right: .9rem; width: 6.5rem; height: 1.7rem; }
}

/* ============================================================================
   NEUPOSITIONIERUNG „Messie-Beratung & Begleitung" — additive Bausteine
   Ausschliesslich bestehende Tokens (Farben, Radien, Schatten, Easing).
   Keine bestehende Regel wird ueberschrieben.
   ========================================================================== */

/* ---------- Header-Breite ----------
   Die Navigation traegt seit der Neupositionierung fuenf Eintraege mit
   sprechenden Labels plus Telefon plus CTA. In 76rem bricht sie zweizeilig um.
   Die schwebende Pille darf breiter sein als die Inhaltsspalte; darunter
   uebernimmt das vorhandene Burger-Menue. */
.hdr .wrap { max-width: 88rem; }
.nav a { white-space: nowrap; }
/* Beide Link-Arten (mit und ohne Untermenue) bekommen dieselbe Boxhoehe,
   sonst sitzen sie 1px versetzt auf der Mittellinie. */
.nav > a, .nav .has-sub > a { display: inline-flex; align-items: center; padding-inline: .62rem; padding-block: .5rem; }
/* Rufnummer und CTA duerfen nicht in sich umbrechen ("01521 / 2974721"). */
.hdr-cta .btn { white-space: nowrap; }
/* Kundenvorgabe: jeder Besichtigungs-Button traegt die volle Beschriftung
   "Kostenlose Besichtigung". Damit die Pille auf schmalen Notebooks nicht
   ueberlaeuft, wird der Header-CTA dort kompakter gesetzt. */
@media (max-width: 1500px) and (min-width: 1401px) {
  .hdr-cta .btn { font-size: .88rem; padding-inline: .85rem; }
  .nav > a, .nav .has-sub > a { padding-inline: .5rem; }
}
/* Auf dem Handy braucht die volle Beschriftung zwei Zeilen, sonst schiebt
   sie sich ueber Logo und Burger. */
@media (max-width: 560px) {
  .hdr-cta .btn-primary {
    white-space: normal; text-align: left; line-height: 1.15;
    font-size: .8rem; padding-block: .5rem; max-width: 8.6rem;
  }
}

/* ---------- Navigation mit Untermenue (ohne JS, per :hover/:focus-within) --- */
.nav .has-sub { position: relative; }
.nav .has-sub > a::after {
  content: ''; display: inline-block; width: .34rem; height: .34rem; margin-left: .42rem;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .55;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.nav .has-sub:hover > a::after,
.nav .has-sub:focus-within > a::after { opacity: 1; transform: translateY(0) rotate(45deg); }
.subnav {
  position: absolute; top: calc(100% + .55rem); left: 50%; transform: translate(-50%, 8px);
  min-width: 16.5rem; padding: .5rem; display: grid; gap: .1rem; z-index: 80;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
/* Unsichtbare Bruecke, damit der Zeiger die Luecke ueberqueren kann. */
.nav .has-sub::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: .6rem; }
.nav .has-sub:hover .subnav,
.nav .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.subnav a {
  display: block; padding: .55rem .8rem; border-radius: var(--radius-s);
  font-size: .95rem; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.subnav a:hover { background: var(--surface-soft); color: var(--ink); }
.subnav a.is-lead { font-weight: 600; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .subnav, .nav .has-sub > a::after { transition: none; }
}
/* Untermenue im mobilen Overlay: eingerueckt, kleiner, aber >= 14px. */
.mnav-sub {
  display: block; font-family: var(--font-body); font-weight: 500; text-decoration: none;
  color: var(--ink-2); font-size: 1.05rem; line-height: 1.5; padding: .16rem 0 .16rem 1.1rem;
  border-left: 2px solid var(--line);
}
.mnav-sub:hover { color: var(--ink); }

/* Lange, praezise H1 (Leistung + Region) braucht eine eigene Stufe — sonst
   sprengt sie bei clamp(3rem,6.8vw,5.1rem) die Hero-Spalte. */
.hero-copy h1.h1-long { font-size: clamp(2.15rem, 3.9vw, 3.25rem); line-height: 1.08; }
@media (max-width: 380px) { .hero-copy h1.h1-long { font-size: 1.95rem; } }
/* Vertrauenssatz direkt unter dem Lead */
.hero-claim { font-weight: 600; color: var(--ink); margin-bottom: 1.6rem; max-width: 34em; }

/* Hero-Hintergrund: sehr helles, organisches Mint-Bild (KI-generiert, min. Luminanz 0,87 —
   Kontrast --ink 12,3:1 / --ink-2 7,2:1 auf dunkelster Stelle). Laeuft unten weich in
   --surface-soft aus, damit der Uebergang zur naechsten Sektion nahtlos bleibt. */
.hero {
  background:
    linear-gradient(180deg, rgba(245, 250, 247, 0) 60%, var(--surface-soft) 97%),
    url('../deco/hero-bg.webp?v=20260730') 50% 30% / cover no-repeat;
}

/* ---------- Experten-/Spezialisten-Sektion ---------- */
.expert-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }
.expert-media { border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4/4.2; }
.expert-media img { width: 100%; height: 100%; object-fit: cover; }
.expert-quote {
  margin-top: 1.4rem; padding: 1.1rem 1.3rem;
  background: var(--surface-soft); border: 1px solid var(--line); border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius-m); font-weight: 500; color: var(--ink-2);
}
.sec-deep .expert-quote { background: var(--white); }
.statbar { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.statcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 1.15rem 1.25rem; min-width: 0;
}
.statcard b {
  display: block; font-family: var(--font-disp); font-weight: 700; line-height: 1;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--ink); margin-bottom: .35rem;
}
.statcard span { display: block; font-size: .95rem; font-weight: 500; color: var(--mute); line-height: 1.35; }

/* ---------- Grosse Hauptkarte „Beratung & Begleitung" ---------- */
.leadcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-float); overflow: hidden;
}
.leadcard-in { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: clamp(1.6rem, 3.5vw, 3.2rem); padding: clamp(1.7rem, 3.6vw, 3rem); }
.leadcard h2 { margin-bottom: 1rem; }
.leadcard p { color: var(--ink-2); max-width: 40em; }
.leadcard p + p { margin-top: .9rem; }
.leadcard-badge {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  font-family: var(--font-disp); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--brand-tint); color: var(--ink); border-radius: 999px; padding: .4rem 1rem;
}
.leadcard-badge::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand-primary); }
.leadparts { display: grid; gap: .7rem; align-content: start; }
.leadparts li {
  display: flex; gap: .85rem; align-items: flex-start;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 1rem 1.15rem;
}
.leadparts b { display: block; font-weight: 600; }
.leadparts small { display: block; color: var(--mute); font-weight: 500; margin-top: .12rem; }
.leadparts .check { margin-top: .2rem; }

/* ---------- Leistungs-Bento: zusaetzliche Breite (halbe Reihe) ---------- */
.svc.half-2 { grid-column: span 6; }
/* Nummer als eigene Chip-Flaeche: weisse Schrift direkt auf dem Foto haelt
   den Kontrast nicht zuverlaessig — der obere Bildbereich liegt ausserhalb
   des Gradienten von .svc::after. */
.svc-nr {
  position: absolute; top: 1.2rem; left: 1.35rem; z-index: 1;
  font-family: var(--font-disp); font-weight: 700; font-size: .95rem; letter-spacing: .1em;
  color: #fff; background: rgba(22,49,38,.82); border-radius: 999px; padding: .26rem .7rem;
}
.svc.tall .svc-nr { top: 3.6rem; }
.svc-more {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem;
  font-weight: 600; font-size: .97rem; color: #fff;
}
.svc-more::after {
  content: ''; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .4s var(--ease);
}
.svc:hover .svc-more::after { transform: rotate(-45deg) translate(2px, 2px); }

/* ---------- Gegenueberstellung „mehr als eine Raeumung" ---------- */
.vs-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; align-items: start; }
.vs-col { border-radius: var(--radius-l); padding: clamp(1.5rem, 3vw, 2.1rem); border: 1px solid var(--line); background: var(--white); }
.vs-col.is-plain { background: transparent; border-style: dashed; }
.vs-col.is-us { border-color: var(--brand-primary); box-shadow: var(--shadow-soft); }
.vs-col h3 { margin-bottom: .35rem; }
.vs-col > p { font-size: .97rem; color: var(--mute); margin-bottom: 1.1rem; }
.vs-col ul { display: grid; gap: .7rem; }
.vs-col li { display: flex; gap: .75rem; align-items: flex-start; font-weight: 500; color: var(--ink-2); }
.vs-col.is-plain li { color: var(--mute); }
.vs-col .check, .vs-col .no-x { margin-top: .2rem; }

/* ---------- Ablauf mit sechs Schritten ---------- */
.steps.steps-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.step:hover, .step.is-active { border-color: var(--brand-primary); box-shadow: var(--shadow-soft); }
.step.is-active { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .step { transition: none; }
  .step.is-active { transform: none; }
}

/* Fortschrittslinie des Ablaufs (JS-injiziert, dekorativ) */
.flow-progress {
  height: 4px; border-radius: 999px; background: var(--line);
  margin: -0.4rem 0 1.5rem; overflow: hidden;
}
.flow-progress span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--brand-primary);
  transition: width .35s var(--ease);
}

/* ---------- Online-Informationsveranstaltung ---------- */
.event-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; margin-top: 1.4rem; }
.event-list li {
  display: flex; gap: .7rem; align-items: center; font-weight: 500;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .85rem 1.05rem;
}

/* ---------- Anonymisierte Fallbeispiele ---------- */
.case { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.8rem 1.6rem 1.6rem; }
.case-tag {
  display: inline-block; font-family: var(--font-disp); font-weight: 700; font-size: .88rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
  background: var(--brand-tint); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .9rem;
}
.case h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin-bottom: .5rem; }
.case p { color: var(--ink-2); font-size: 1rem; }
.case small { display: block; margin-top: .9rem; font-size: .92rem; font-weight: 500; color: var(--mute); }

/* ---------- Formular: Auswahl, Zustimmung, Fehler, Erfolg ---------- */
.f-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 1.25rem, calc(100% - .78rem) 1.25rem; background-size: .36rem .36rem, .36rem .36rem; background-repeat: no-repeat; padding-right: 2.4rem; }
.f-optional { font-weight: 500; color: var(--mute); }
.f-consent { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.1rem; font-size: .97rem; color: var(--ink-2); }
.f-consent input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .18rem; accent-color: var(--cta); }
.f-consent a { color: var(--ink); font-weight: 600; }
.f-err { display: none; font-size: .9rem; font-weight: 600; color: #A8200E; }
.f-field.has-err input, .f-field.has-err textarea, .f-field.has-err select { border-color: #A8200E; background: #FDF3F1; }
.f-field.has-err .f-err, .f-consent.has-err .f-err { display: block; }
.f-consent.has-err { color: #A8200E; }
.f-consent.has-err input[type="checkbox"] { outline: 2px solid #A8200E; outline-offset: 2px; }
.form-ok {
  display: none; gap: .9rem; align-items: flex-start;
  background: #E7F5EC; border: 1px solid #B7D9C4; border-radius: var(--radius-m);
  padding: 1.05rem 1.2rem; margin-bottom: 1.2rem; color: var(--ink);
}
.form-ok.on { display: flex; }
.form-ok b { display: block; }

/* ---------- Responsive fuer die neuen Bausteine ---------- */
@media (max-width: 1400px) {
  .nav { display: none; }
}
@media (max-width: 980px) {
  .expert-grid { grid-template-columns: minmax(0, 1fr); }
  .expert-media { order: -1; aspect-ratio: 16/10; }
  .leadcard-in { grid-template-columns: minmax(0, 1fr); }
  .statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-grid { grid-template-columns: minmax(0, 1fr); }
  .steps.steps-6 { grid-template-columns: 1fr; }
  .svc.half-2 { grid-column: span 2; }
  .nav .has-sub .subnav { display: none; }
}
@media (max-width: 700px) {
  .event-list { grid-template-columns: 1fr; }
  .statbar { grid-template-columns: 1fr; }
  /* Einspaltiges Bento: die grosse Kachel darf NICHT mehr zwei Grid-Zeilen
     ueberspannen (grid-row: span 2 aus dem Desktop-Raster), sonst ueberlappt
     sie die naechste Karte und reisst eine Luecke in die Mitte. Ausserdem
     muss die halbe-Reihe-Kachel wieder eine Spalte belegen — die 980px-Regel
     weiter oben setzt sie sonst auf span 2. */
  .bento { grid-auto-flow: row; }
  .svc.tall { grid-row: auto; min-height: 22rem; }
  .svc.half-2 { grid-column: span 1; }
}

/* ============================================================================
   FARBVIELFALT — dezente Tints innerhalb der Markenfamilie + warmes Creme.
   Nur Flaechen und Raender; Text bleibt auf den gepruef­ten Kontrasten.
   ========================================================================== */
:root { --surface-cream: #FAF3E6; --line-cream: #EBDDC3; }

.statcard:nth-child(1) { background: #E7F5EC; border-color: #CBE8D6; }
.statcard:nth-child(2) { background: var(--surface-cream); border-color: var(--line-cream); }
.statcard:nth-child(3) { background: #F4FBF7; }
.statcard:nth-child(4) { background: var(--white); border-color: #CBE8D6; }

.infogrid .infocard:nth-child(4n+1) { background: #E7F5EC; border-color: #CBE8D6; }
.infogrid .infocard:nth-child(4n+2) { background: var(--white); }
.infogrid .infocard:nth-child(4n+3) { background: var(--surface-cream); border-color: var(--line-cream); }
.infogrid .infocard:nth-child(4n+4) { background: #F4FBF7; }

.trust-chip:nth-child(odd) { background: #F4FBF7; }
.event-list li:nth-child(odd) { background: #E7F5EC; border-color: #CBE8D6; }

.case { border-top: 4px solid var(--brand-primary); }
.case:nth-child(2) { border-top-color: #95D5B2; }
.case:nth-child(3) { border-top-color: #3D8361; }

.step:nth-child(even) { background: #FCFEFC; }
.faq details[open] { background: #F4FBF7; border-color: #CBE8D6; }

/* ---------- Klarna-Badge im Announcement-Laufband ---------- */
.annc-klarna { height: 1.5em; width: auto; display: inline-block; vertical-align: -.42em; margin-inline: .1rem; }

/* ---------- Notfall-Einsatz ---------- */
.emergency {
  background: linear-gradient(135deg, #FFF6F4, #FDECEC 55%, #FAF3E6);
  border: 1px solid rgba(198, 40, 40, .22); border-left: 6px solid var(--tel);
  border-radius: var(--radius-l); padding: clamp(1.6rem, 3.5vw, 2.8rem);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: center;
}
.emergency .eyebrow { color: var(--tel); }
.emergency .eyebrow::before { background: var(--tel); }
.emergency-slog { font-family: var(--font-disp); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--tel-deep); margin-top: 1.1rem; }
.emergency-num {
  text-align: center; padding: 1.4rem 1.2rem;
  background: #fff; border: 1px solid rgba(198, 40, 40, .25); border-radius: var(--radius-m);
  box-shadow: 0 12px 30px rgba(198, 40, 40, .10);
}
.emergency-num small { display: block; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tel-deep); font-size: .8rem; margin-bottom: .5rem; }
.emergency-num a.num { font-family: var(--font-disp); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--tel-deep); text-decoration: none; white-space: nowrap; }
.emergency-num p { font-size: .9rem; color: var(--mute); margin-top: .45rem; }
@media (max-width: 900px) { .emergency { grid-template-columns: 1fr; } }

/* ---------- Slogan-Band (Leitmotiv, Reveal wie im Hero) ---------- */
.slogan-sec { padding-block: clamp(2.6rem, 6vw, 4.8rem); }
.slogan { text-align: center; font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; line-height: 1.06; letter-spacing: .01em; color: var(--ink); }
.slogan span { display: block; font-size: clamp(1.9rem, 4.6vw, 3.6rem); }
.slogan .mark-u { display: inline; }

/* ---------- Bezirks-Akkordeon (Einsatzgebiet) ---------- */
.bezirk-acc { border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; overflow: hidden; }
.bezirk-acc summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.2rem; font-weight: 600; color: var(--ink);
}
.bezirk-acc summary::-webkit-details-marker { display: none; }
.bezirk-acc summary::after {
  content: ''; flex: none; width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--ease); opacity: .6;
}
.bezirk-acc[open] summary::after { transform: rotate(-135deg); }
.bezirk-list { padding: .2rem 1.2rem 1.1rem; columns: 2; column-gap: 2rem; }
.bezirk-list li { font-size: .95rem; color: var(--ink-2); padding-block: .22rem; break-inside: avoid; }
.bezirk-list li b { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .bezirk-list { columns: 1; } }
/* Auf Mint-Sektionen (sec-deep) hebt sich die weisse Karte ab; Rand etwas kraeftiger. */
.sec-deep .bezirk-acc { border-color: #CBE8D6; }