/* Auto-generated von astro.config.mjs (cssBundle). Nicht direkt editieren - Quelle: tokens/base/components/consent.css */

/* ---- tokens.css ---- */
/* ==========================================================================
   CoWoNE Redesign - Design Tokens
   Direction: "Warm & Community" (Refero: Zelt + Apron, synthesized)
   Single accent: Amber. One theme: warm light. Shape: pill buttons / 16px cards.
   ========================================================================== */

:root {
  /* --- Surfaces (warm, light) --- */
  --canvas:      #e8e4de;   /* page background - warm soft stone */
  --surface-1:   #f3efe8;   /* alternating sections */
  --surface-2:   #fffdf8;   /* cards / content fills (off-white, never pure) */
  --deep:        #211f1c;   /* dark sections + footer (warm near-black) */
  --deep-soft:   #2c2a26;   /* elevated card on deep */

  /* --- Ink (text) --- */
  --ink:         #1c1d1a;   /* primary text / headings */
  --ink-soft:    #5b5853;   /* secondary text, tinted to canvas */
  --ink-faint:   #5a564e;   /* captions, meta - WCAG AA on canvas & surface */
  --on-deep:     #f4f1ea;   /* text on dark surfaces */
  --on-deep-soft:#b3aea4;

  /* --- Accent (the ONE accent for the whole page) --- */
  --accent:      #f3b13a;   /* amber pop - CTAs, active states */
  --accent-press:#e6a01f;   /* pressed/hover */
  --accent-ink:  #8a6210;   /* amber for TEXT on light bg - WCAG AA (never use accent for text on light) */
  --accent-soft: #ffe7b3;   /* highlight / badge background */
  --accent-wash: #fdf6e6;   /* faint amber wash - comparison highlight column */
  --on-accent:   #1c1d1a;   /* ink on amber (passes WCAG AA) */

  /* --- Lines & focus --- */
  --line:        #d8d2c6;   /* hairlines, dividers, input borders */
  --line-soft:   #e9e2d4;   /* softer hairline - table row dividers */
  --line-strong: #c4bdae;
  --focus:       #1c1d1a;

  /* --- Radius (shape lock) --- */
  --r-pill: 999px;          /* all buttons */
  --r-card: 16px;           /* all cards */
  --r-input: 10px;          /* inputs */
  --r-sm: 8px;              /* tags / chips */

  /* --- Elevation (subtle, warm-tinted only) --- */
  --shadow:    0 2px 8px rgba(70, 56, 16, .06), 0 8px 24px rgba(70, 56, 16, .07);
  --shadow-lg: 0 4px 14px rgba(60, 48, 12, .08), 0 22px 50px rgba(60, 48, 12, .12);

  /* --- Typography --- */
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* fluid type scale (clamp) */
  --t-caption:  0.78rem;
  --t-small:    0.9rem;
  --t-body:     1.0625rem;                              /* 17px */
  --t-lead:     clamp(1.15rem, 0.9rem + 1vw, 1.4rem);
  --t-sub:      clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  --t-h3:       clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
  --t-h2:       clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --t-display:  clamp(2.6rem, 1.6rem + 4.6vw, 5rem);

  /* --- Spacing scale (semantic, defined set - never arbitrary) --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  /* --- Section rhythm (alternating generous / normal / tight) --- */
  --section-y:    clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --section-y-lg: clamp(5rem, 2.75rem + 9vw, 10rem);
  --section-y-sm: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  --section-y-xs: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --gap:        clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  --gap-lg:     clamp(1.75rem, 1rem + 3vw, 3.5rem);

  /* --- Layout --- */
  --maxw: 1240px;
  --maxw-text: 68ch;
  --nav-h: 68px;
  --nav-float-gap: 0.75rem; /* floating pill nav: gap between viewport top/sides and the bar */

  /* --- Motion (MOTION_INTENSITY 4: fluid CSS) ---
     Emil Kowalski: strong custom curves; built-in easings are too weak. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* entrances, feedback - punchy */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --ease: var(--ease-out);                          /* default alias */
  --dur: 0.55s;                                     /* scroll-reveal (entering) */
  --press: 140ms;                                   /* button press feedback */
}


/* ---- base.css ---- */
/* ==========================================================================
   CoWoNE Redesign - Base (reset, typography, layout primitives)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

/* Ohne das wartet iOS/WebKit nach jedem Tap kurz ab, ob ein Doppel-Tap zum
   Zoomen folgt - fühlt sich wie "erster Tap tut nichts" an. */
a, button, [role="button"] { touch-action: manipulation; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout helpers --- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }       /* generous beat */
.section--sm { padding-block: var(--section-y-sm); }       /* tight beat */
.section--tight { padding-block: var(--section-y-xs); }       /* extra-tight beat */
.surface-1 { background: var(--surface-1); }
.deep { background: var(--deep); color: var(--on-deep); }
.deep h1, .deep h2, .deep h3 { color: var(--on-deep); }

.lead { font-size: var(--t-lead); color: var(--ink-soft); line-height: 1.55; max-width: 60ch; }
.eyebrow {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
  white-space: normal;
  overflow-wrap: break-word;
}
.measure { max-width: var(--maxw-text); }

/* utility */
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Scroll reveal (MOTION 4, motivated: storytelling on scroll) ---
   Only hidden when JS is active (html.js). Without JS, content stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

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


/* ---- components.css ---- */
/* ==========================================================================
   CoWoNE Redesign - Components
   ========================================================================== */

/* ---------- Buttons (shape lock: pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-small);
  line-height: 1; white-space: nowrap;
  padding: 0.9rem 1.5rem; min-height: 44px; border-radius: var(--r-pill); /* 44px Tap-Target (Audit M3) */
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--press) var(--ease-out), background-color 180ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 180ms var(--ease-out);
}
/* instant press feedback - the UI confirms it heard the user */
.btn:active { transform: scale(0.97); transition-duration: 60ms; }

/* Flow-Spacing (global): ein eigenständiger CTA/Link direkt nach Absatz oder Liste
   braucht Luft, sonst klebt er am Text. Karten (.pkg/.info-card), Hero (.hero-aside)
   & Co. haben höher-spezifische margin-top-Overrides und bleiben unberührt. */
p + .btn, ul + .btn, ol + .btn,
p + .link-arrow, ul + .link-arrow { margin-top: var(--space-lg); }

/* Flow-Spacing-SICHERHEITSNETZ für authored Content-Blöcke (für künftigen Content).
   :where() hat 0 Specificity -> jede getunte Regel oben gewinnt; das hier greift NUR
   in Lücken: ein neu eingefügtes Element ohne eigene Margin (blockquote, img, table,
   weitere h3 etc.) bekommt automatisch einen Mindestabstand statt zu kleben.
   Ändert das bestehende Layout praktisch nicht (alle aktuellen Paare sind geregelt). */
:where(.editorial > .reveal, .loc-content > .reveal) > * + * { margin-top: var(--flow-space, 1rem); }

.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--accent-press); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(28,29,26,0.04); }

.btn--on-deep { background: var(--accent); color: var(--on-accent); }
.btn--on-deep:hover { background: var(--accent-press); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--t-body); }

/* arrow nudges via transform only (no layout-animating gap) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600;
  color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px;
  transition: transform 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { transform: translateX(3px); }
}

/* ---------- Top utility bar ---------- */
.utilbar {
  background: var(--deep); color: var(--on-deep-soft);
  font-size: var(--t-caption);
}
.utilbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; }
.utilbar a { color: var(--on-deep); }
.utilbar .stars { color: var(--accent); letter-spacing: 1px; }
.utilbar .util-right { display: flex; align-items: center; gap: 1.25rem; }
@media (max-width: 640px) { .utilbar .util-hide { display: none; } }

/* ---------- Header / Nav (floating pill, inset from the viewport edges) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: var(--nav-float-gap) clamp(0.75rem, 2.2vw, 1.75rem) 0;
  background: transparent;
}
.site-header .nav {
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: clamp(1.1rem, 3vw, 1.6rem);
  background: color-mix(in srgb, var(--canvas) 80%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-stuck .nav { box-shadow: var(--shadow); background: color-mix(in srgb, var(--canvas) 92%, transparent); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--nav-h); }
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; }
.brand b { color: var(--accent-ink); }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a { position: relative; font-size: var(--t-small); font-weight: 500; color: var(--ink-soft); transition: color 0.18s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-current::after, .nav-links .nav-trigger.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--accent); border-radius: 2px;
}
.nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.4rem; }
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline-block; }

@media (max-width: 1000px) {
  .nav-links, .nav-cta .btn--ghost { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* mobile menu - floating card, echoes the pill nav above it */
.mobile-menu {
  display: none; flex-direction: column; gap: 0.25rem;
  position: fixed;
  left: clamp(0.75rem, 2.2vw, 1.75rem); right: clamp(0.75rem, 2.2vw, 1.75rem);
  top: calc(var(--nav-h) + var(--nav-float-gap)); bottom: var(--nav-float-gap);
  z-index: 49; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.4rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--canvas) 96%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
}
.mobile-menu.is-open { display: flex; }
body.menu-open { overflow: hidden; }
/* Sticky promo bar (z-index 60) would otherwise cover the bottom of the open menu card */
body.menu-open .promo { transform: translateY(110%); }

/* Aktiv-Indikator: aktuelle Seite im Menü hervorheben */
.mobile-menu a.is-current { color: var(--accent-ink); font-weight: 700; }
.mobile-menu .m-sub.is-current { border-left: 3px solid var(--accent); padding-left: calc(0.8rem - 3px); }
.nav-links a.is-current, .nav-links .nav-trigger.is-current { color: var(--accent-ink); font-weight: 700; }
.mobile-menu a { padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); font-weight: 500; }
.mobile-menu .btn { margin-top: 0.8rem; margin-bottom: 0.4rem; }

/* ---------- Hero (asymmetric split) ---------- */
.hero { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); padding-bottom: var(--section-y); }
.hero-grid {
  display: grid; gap: var(--gap-lg); align-items: center;
  grid-template-columns: 1.05fr 0.95fr;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(1.9rem, 1.1rem + 2.5vw, 2.65rem); margin-bottom: 1.1rem; max-width: 28ch; }
.hero h1 .amber { color: var(--accent-ink); }
.hero .lead { margin-bottom: 1.6rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* location picker chips (hero interaction = first user decision) */
.pickers { margin: 1.6rem 0 1.4rem; }
.pickers-label { font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.7rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--t-small); font-weight: 600; color: var(--ink);
  transition: border-color 0.18s, background-color 0.18s, transform 0.12s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
}

.hero-media { position: relative; }
.hero-media img {
  width: 100%; aspect-ratio: 4/3.1; object-fit: cover;
  border-radius: calc(var(--r-card) + 6px);
  box-shadow: var(--shadow-lg);
}
/* Positionierungs-Wrapper für das schwebende Top-Rated-Badge auf dem Hero-Bild;
   das Badge (.trustbadge) bringt seine eigene Karte mit. */
.hero-badge { position: absolute; left: -14px; bottom: 22px; }
.hero-badge .trustbadge { margin-top: 0; }
@media (max-width: 880px) { .hero-badge { left: 12px; } }
@media (max-width: 480px) { .hero-badge .trustbadge { transform: scale(0.85); transform-origin: bottom left; } }

/* ---------- Brand bar (trust logos) ---------- */
.brandbar-label { text-align: center; font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-md); }
.brandbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.6rem, 4vw, 3.2rem); }
.brandbar img { height: 2.2rem; width: auto; max-width: 9rem; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: filter 0.2s, opacity 0.2s; }
.brandbar img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 560px) { .brandbar img { height: 1.8rem; max-width: 7rem; } }

/* ---------- Stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 1.2rem 0; }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); line-height: 1; letter-spacing: -0.03em; }
.stat .label { color: var(--ink-soft); font-size: var(--t-small); margin-top: 0.4rem; }
.stats--bordered .stat:not(:last-child) { border-right: 1px solid var(--line); padding-right: var(--gap); }
@media (max-width: 720px) { .stats--bordered .stat { border-right: 0 !important; } }

/* ---------- Editorial split (intro / about) ---------- */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: center; }
.editorial--rev { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .editorial, .editorial--rev { grid-template-columns: 1fr; } }
.editorial h2 { font-size: var(--t-h2); margin-bottom: 1rem; }
.editorial p + p { margin-top: 1rem; }
.editorial-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow); }
.editorial--rev .editorial-media { order: -1; }
@media (max-width: 880px) { .editorial--rev .editorial-media { order: 0; } }

/* ---------- Section heads ---------- */
.sec-head { margin-bottom: var(--gap-lg); max-width: 56ch; }
.sec-head h2 { font-size: var(--t-h2); }
.sec-head p { margin-top: 0.9rem; color: var(--ink-soft); font-size: var(--t-lead); }

/* ---------- Services (varied: one feature + grid) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr; } }
.svc {
  --svc-pad: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--svc-pad);
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* Vollbreites Card-Bild oben (Negativ-Margin gegen das Card-Padding) */
.svc-thumb { margin: calc(-1 * var(--svc-pad)) calc(-1 * var(--svc-pad)) 0.4rem; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; }
.svc-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
}
.svc .price { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; }
.svc .price span { font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.06em; }
.svc h3 { font-size: var(--t-sub); }
.svc p { color: var(--ink-soft); font-size: var(--t-small); flex: 1; }
.svc .link-arrow { align-self: flex-start; margin-top: 0.4rem; }
/* feature tile spanning full width with image */
.svc--feature { grid-column: 1 / -1; flex-direction: row; align-items: stretch; padding: 0; overflow: hidden; }
.svc--feature .svc-body { padding: clamp(1.6rem, 1rem + 2vw, 2.5rem); display: flex; flex-direction: column; gap: 0.7rem; justify-content: center; flex: 1; }
.svc--feature .svc-img { flex: 0 0 42%; }
.svc--feature .svc-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .svc--feature { flex-direction: column; } .svc--feature .svc-img { flex-basis: auto; } .svc--feature .svc-img img { aspect-ratio: 16/10; } }

/* ---------- Locations ---------- */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .loc-grid { grid-template-columns: 1fr; } }
.loc {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.loc-img { position: relative; overflow: hidden; }
.loc-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .loc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .loc:hover .loc-img img { transform: scale(1.05); }
}
.loc-region { position: absolute; top: 0.8rem; left: 0.8rem; background: var(--surface-2); color: var(--ink); font-size: var(--t-caption); font-weight: 600; padding: 0.3rem 0.7rem; border-radius: var(--r-sm); }
.loc-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.loc-body h3 { font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.2; }
.loc-body .addr { color: var(--ink-soft); font-size: var(--t-small); flex: 1; }
.loc-body .link-arrow { align-self: flex-start; margin-top: 0.6rem; font-size: var(--t-small); }

/* ---------- Reviews (asymmetric: score panel + masonry) ---------- */
.reviews-layout { display: grid; grid-template-columns: 19rem 1fr; gap: var(--gap-lg); align-items: start; }
@media (max-width: 900px) { .reviews-layout { grid-template-columns: 1fr; } }

/* distinct score panel - reads differently from a card grid */
/* Sticky-Score nur im 2-Spalten-Desktop-Layout; auf Mobile (einspaltig) würde
   die Sidebar sonst kleben und die Bewertungskarten überlappen. */
@media (min-width: 901px) {
  .reviews-aside { position: sticky; top: calc(var(--nav-h) + var(--nav-float-gap) + var(--space-lg)); }
}
.reviews-aside .eyebrow { margin-bottom: var(--space-sm); }
.reviews-aside h2 { font-size: var(--t-h3); margin-bottom: var(--space-lg); }
.score-block { display: flex; align-items: baseline; gap: var(--space-sm); }
.score-block .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 2.5rem + 4vw, 5rem); line-height: 0.9; letter-spacing: -0.03em; }
.score-block .of { color: var(--ink-faint); font-size: 1.5rem; font-weight: 600; }
.reviews-aside .stars { color: var(--accent); letter-spacing: 3px; font-size: 1.25rem; margin-top: var(--space-xs); }
.reviews-aside .meta { color: var(--ink-soft); font-size: var(--t-small); margin-top: var(--space-sm); }
.reviews-aside .meta b { color: var(--ink); }

/* masonry via CSS columns - natural varying heights break grid rigidity */
.review-masonry { columns: 2; column-gap: var(--gap); }
@media (max-width: 1100px) { .review-masonry { columns: 2; } }
@media (max-width: 640px) { .review-masonry { columns: 1; } }
.review {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--space-lg); margin-bottom: var(--gap);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.review .stars { color: var(--accent); letter-spacing: 1px; font-size: 0.85rem; }
.review p { font-size: var(--t-small); color: var(--ink); line-height: 1.55; }
.review .who { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.review .who-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.review .who-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--canvas); color: var(--accent-ink); border: 1px solid var(--line);
  font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.02em;
}

/* "Bestbewerteter Service"-Badge (Nachbau des Trustindex Top-Rated-Zertifikats) */
.trustbadge {
  display: inline-flex; align-items: stretch; width: fit-content;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
  text-decoration: none; margin-top: var(--space-sm);
  transition: box-shadow 200ms var(--ease-out), border-color 180ms var(--ease-out);
}
.trustbadge:hover { box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.trustbadge-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem; padding: 0.75rem 0.95rem; border-right: 1px solid var(--line);
}
.trustbadge-glogo { width: 2rem; height: 2rem; }
.trustbadge-rating { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 800; font-size: 1.05rem; color: var(--ink); line-height: 1; }
.trustbadge-star { color: var(--accent); font-size: 1.1rem; }
.trustbadge-body { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.7rem 1rem; }
.trustbadge-title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.trustbadge-verified { position: relative; font-size: var(--t-caption); color: var(--ink-soft); }
.trustbadge-verified .ti-info { display: inline-flex; align-items: center; margin-left: 0.25em; vertical-align: middle; cursor: help; }
.trustbadge-verified .ti-info > svg { width: 0.95em; height: 0.95em; }
.trustbadge-verified .ti-tooltip {
  position: absolute; left: 0; bottom: calc(100% + 9px); width: 250px; max-width: 72vw;
  background: var(--ink); color: #fff; padding: 0.65rem 0.75rem; border-radius: 9px;
  font-size: var(--t-caption); line-height: 1.45; font-weight: 400; letter-spacing: 0;
  box-shadow: var(--shadow-lg); z-index: 30; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.trustbadge-verified .ti-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 1.1rem;
  border: 6px solid transparent; border-top-color: var(--ink);
}
.trustbadge .ti-info:hover .ti-tooltip,
.trustbadge:focus-visible .ti-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }

/* Google-Logo + "powered by Google" und CTAs im Aggregat-Block */
.reviews-aside .g-powered { display: inline-flex; align-items: center; gap: 0.4em; }
.reviews-aside .g-logo { width: 1em; height: 1em; flex-shrink: 0; }
.reviews-aside .review-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-md); }
.reviews-aside .review-ctas .btn { width: fit-content; }
.reviews-aside .review-verify { color: var(--ink-soft); font-size: var(--t-small); }
.review .who-text { display: flex; flex-direction: column; min-width: 0; }
.review .who-text b { font-weight: 600; }
.review .who-text small { color: var(--ink-faint); font-size: var(--t-caption); }

/* ---------- Inquiry form ---------- */
.inquiry { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap-lg); align-items: center; }
@media (max-width: 880px) { .inquiry { grid-template-columns: 1fr; } }
.form-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: var(--t-small); font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--t-small); color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line-strong);
  border-radius: var(--r-input); padding: 0.75rem 0.9rem;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--t-caption); color: var(--ink-soft); margin-bottom: 1.1rem; }
.check input { margin-top: 0.15rem; }
.form-card .btn { width: 100%; }

/* ---------- Big CTA band ---------- */
.cta-band { background: var(--deep); color: var(--on-deep); border-radius: calc(var(--r-card) + 8px); padding: clamp(2rem, 1.4rem + 4vw, 4rem); text-align: center; }
.cta-band h2 { font-size: var(--t-h2); margin-bottom: 0.8rem; color: var(--on-deep); }
.cta-band p { color: var(--on-deep-soft); max-width: 52ch; margin: 0 auto 1.6rem; font-size: var(--t-lead); }

/* ---------- Blog money-page CTA ---------- */
.money-cta {
  margin-top: 1.4rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-card);
  background: var(--surface-1);
  border: 1px solid var(--line);
}

/* ---------- Footer ---------- */
.footer { background: var(--deep); color: var(--on-deep-soft); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--gap-lg); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--gap); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .brand { color: var(--on-deep); font-size: 1.5rem; }
.footer-col .footer-col-h { color: var(--on-deep); font-size: var(--t-small); margin-bottom: 0.9rem; letter-spacing: 0.02em; }
.footer-col a, .footer-col p { display: block; color: var(--on-deep-soft); font-size: var(--t-small); padding-block: 0.3rem; transition: color 0.18s; }
.footer-col a:hover { color: var(--accent); }
/* Größere Tap-Targets auf Mobile (Audit M3/S1/S2) */
@media (max-width: 680px) {
  .footer-col a { padding-block: 0.5rem; }
  .link-arrow { padding-block: 0.35rem; }
}
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--gap-lg); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; font-size: var(--t-caption); }

/* ---------- Sticky promo bar ---------- */
.promo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.7rem 1.2rem; box-shadow: 0 -6px 24px rgba(60,48,12,.15);
  transform: translateY(0); transition: transform 0.4s var(--ease);
}
.promo.is-hidden { transform: translateY(110%); }
.promo p { font-size: var(--t-small); font-weight: 600; }
.promo .btn { background: var(--deep); color: var(--on-deep); padding: 0.6rem 1.1rem; }
.promo .btn:hover { background: var(--deep-soft); }
.promo .promo-close { background: none; border: 0; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--on-accent); padding: 0.2rem 0.4rem; }
@media (max-width: 560px) {
  /* Mobile: schlanke Sticky-Bottom-CTA-Bar, Button in Daumenreichweite */
  .promo { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.6rem 0.9rem 0.7rem; text-align: center; }
  .promo .promo-text-long { display: none; }
  .promo p { font-size: 0.8rem; padding-right: 1.6rem; }
  .promo .btn { width: 100%; min-height: 46px; }
  .promo .promo-close { position: absolute; top: 0.3rem; right: 0.4rem; }
}

/* ---------- Breadcrumb (location page) ---------- */
.crumb { font-size: var(--t-caption); color: var(--ink-faint); padding-top: 1.2rem; }
.crumb a:hover { color: var(--ink); }
.crumb span { margin-inline: 0.4rem; }

/* ---------- Location page: info split with sticky card ---------- */
.loc-hero { padding-top: 1rem; }
.loc-hero h1 { font-size: var(--t-display); max-width: 18ch; margin-bottom: 0.8rem; }
.loc-hero img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: calc(var(--r-card) + 6px); box-shadow: var(--shadow-lg); margin-top: 1.6rem; }

.loc-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--gap-lg); align-items: start; }
@media (max-width: 980px) { .loc-layout { grid-template-columns: 1fr; } }
.loc-content h2 { font-size: var(--t-h3); margin: var(--space-xl) 0 0.8rem; }
/* Jede h2 ist erstes Kind ihres .reveal-Wrappers -> nur die allererste nullen,
   sonst kleben alle Blöcke aneinander (Bug war: h2:first-child = jede Überschrift). */
.loc-content > .reveal:first-child h2 { margin-top: 0; }
.loc-content p { color: var(--ink-soft); margin-bottom: 0.9rem; }

/* feature reasons */
.reasons { display: grid; gap: 0.9rem; margin: 1.2rem 0 0.6rem; }
.reason { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.1rem 1.3rem; }
.reason h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.reason p { margin: 0; font-size: var(--t-small); }

/* amenities as grouped pills */
.amenities { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.5rem; }
.amenity { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.55rem 1rem; font-size: var(--t-small); font-weight: 500; }
.amenity svg { width: 18px; height: 18px; color: var(--accent-press); }

/* sticky info card */
.info-card { position: sticky; top: calc(var(--nav-h) + var(--nav-float-gap) + 1rem); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem; box-shadow: var(--shadow); }
.info-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.info-row { display: flex; gap: 0.7rem; padding-block: 0.7rem; border-bottom: 1px solid var(--line); }
.info-row:last-of-type { border-bottom: 0; }
.info-row svg { width: 20px; height: 20px; color: var(--accent-press); flex: none; margin-top: 2px; }
.info-row .k { font-size: var(--t-caption); color: var(--ink-faint); }
.info-row .v { font-weight: 600; font-size: var(--t-small); }
.info-card .btn { width: 100%; margin-top: 1.1rem; }

/* packages on location page */
.pkg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.pkg-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pkg-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pkg-grid { grid-template-columns: 1fr; } }
.pkg { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.pkg--featured { border-color: var(--accent); box-shadow: var(--shadow); }
.pkg-list { margin: 0.4rem 0 0.8rem; padding-left: 1.1rem; font-size: var(--t-small); color: var(--ink-soft); }
.pkg-list li { margin-bottom: 0.35rem; }
.pkg .btn { margin-top: auto; align-self: stretch; text-align: center; }

/* image gallery (business center etc.) */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }
@media (hover: hover) and (pointer: fine) {
  .pkg:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
}
.pkg .price { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; }
.pkg .price span { font-size: 0.75rem; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.06em; }
.pkg h3 { font-size: var(--t-sub); }
.pkg p { color: var(--ink-soft); font-size: var(--t-small); flex: 1; }
.pkg .link-arrow { align-self: flex-start; font-size: var(--t-small); }

/* numbered process steps (anfrage flow etc.) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--gap); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 3rem; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--accent); letter-spacing: -0.03em; }
.step::after { content: ""; position: absolute; top: 0.7rem; left: 2.6rem; right: 0; height: 1px; background: var(--line); }
.step:last-child::after { display: none; }
@media (max-width: 860px) { .step:nth-child(2n)::after { display: none; } }
@media (max-width: 480px) { .step::after { display: none; } }
.step h3 { font-size: var(--t-sub); margin-bottom: 0.4rem; }
.step p { color: var(--ink-soft); font-size: var(--t-small); }

/* ==========================================================================
   Micro-interactions (Emil Kowalski pass)
   ========================================================================== */

/* Subtle hover lift only on real pointers; press scale stays for everyone */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--on-deep:hover { transform: translateY(-1px); }
  .btn--primary:active, .btn--on-deep:active { transform: scale(0.97); }
}

/* On touch: no sticky hover transforms after tap */
@media (hover: none) {
  .svc:hover, .loc:hover, .pkg:hover, .chip:hover { transform: none; box-shadow: var(--shadow); }
  .loc:hover .loc-img img { transform: none; }
  .link-arrow:hover { transform: none; }
}

/* Honor reduced motion for all transform-based interactions */
@media (prefers-reduced-motion: reduce) {
  .svc, .loc, .pkg, .chip, .loc-img img, .btn, .link-arrow, .promo { transition: none; }
  .svc:hover, .loc:hover, .pkg:hover, .chip:hover,
  .loc:hover .loc-img img, .link-arrow:hover, .btn:active { transform: none; }
}

/* ==========================================================================
   Polish pass - final details
   ========================================================================== */

/* Disabled button (e.g. after form submit) - clearly non-interactive */
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* Focus ring must stay visible on dark surfaces (footer, deep, promo) */
.deep :focus-visible,
.footer :focus-visible,
.utilbar :focus-visible,
.promo :focus-visible { outline-color: var(--accent); outline-offset: 2px; }

/* Comfortable reading measure for body copy (45-75ch) */
.editorial p,
.loc-content > .reveal > p,
.reason p { max-width: 62ch; }

/* Touch targets >= 44px on interactive controls */
.nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.promo-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 1000px) {
  .mobile-menu a { min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================================
   About / FAQ / sub-pages
   ========================================================================== */

/* stat with supporting sentence */
.stat .sub { color: var(--ink-faint); font-size: var(--t-caption); margin-top: 0.45rem; max-width: 22ch; }
.stats--about { grid-template-columns: repeat(4,1fr); gap: var(--gap-lg); }
@media (max-width: 760px){ .stats--about { grid-template-columns: repeat(2,1fr); } }

/* values (reuse reason cards via .values) */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
@media (max-width: 760px){ .values { grid-template-columns: 1fr; } }

/* team */
.team-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--gap); max-width: 640px; }
@media (max-width: 560px){ .team-grid { grid-template-columns: 1fr; } }
.member { display: flex; align-items: center; gap: 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.1rem 1.3rem; }
.member .avatar { width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; flex: none; }
.member b { display: block; font-size: 1.05rem; }
.member small { color: var(--ink-faint); font-size: var(--t-caption); }

/* FAQ accordion */
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 0.7rem; }
.faq-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.faq-item > summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 600; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; color: var(--accent-press); transition: transform 200ms var(--ease-out); flex: none; }
/* Screenreader lesen CSS-content mit — leerer Alt-Text markiert das "+" als dekorativ
   (den offen/zu-Zustand meldet das native <details> bereits selbst). */
@supports (content: "x" / "y") {
  .faq-item > summary::after { content: "+" / ""; }
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); font-size: var(--t-small); max-width: 70ch; }

/* generic prose (legal / text pages) */
.prose { max-width: 75ch; }
.prose h2 { font-size: var(--t-h3); margin: 2rem 0 0.7rem; }
.prose h3 { font-size: var(--t-sub); margin: 1.4rem 0 0.5rem; }
.prose p, .prose li { color: var(--ink-soft); margin-bottom: 0.8rem; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 0.8rem; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

/* simple page hero */
.page-hero { padding-top: 1rem; }
.page-hero h1 { font-size: var(--t-display); margin-top: 0.6rem; max-width: 20ch; }
.page-hero .lead { margin-top: 0.9rem; }

/* ==========================================================================
   Mega-Nav (grouped dropdowns)
   ========================================================================== */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: var(--t-small); font-weight: 500; color: var(--ink-soft);
  padding: 0; transition: color 0.18s;
}
.nav-trigger svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease-out); }
.nav-item:hover .nav-trigger, .nav-item:focus-within .nav-trigger { color: var(--ink); }
.nav-item:hover .nav-trigger svg, .nav-item:focus-within .nav-trigger svg { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 240px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 0.5rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0.18s;
  z-index: 60;
}
.nav-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* hover bridge */
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu, .nav-item.is-open .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-item.is-open .nav-trigger svg { transform: rotate(180deg); }
.nav-menu a {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.55rem 0.8rem; border-radius: var(--r-input);
  font-size: var(--t-small); font-weight: 500; color: var(--ink); white-space: nowrap;
  transition: background-color 0.15s;
}
.nav-menu a:hover { background: var(--accent-soft); }
.nav-menu .menu-lead { font-weight: 600; }
.nav-menu .menu-tag { font-size: var(--t-caption); font-weight: 500; color: var(--ink-faint); }
.nav-menu .menu-sep { height: 1px; background: var(--line); margin: 0.35rem 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: opacity 0.15s; transform: translateX(-50%); }
  .nav-trigger svg { transition: none; }
}

/* mobile: groups in the slide-down menu */
.mobile-menu .m-group { font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding: 0.9rem 0 0.2rem; border: 0; }
.mobile-menu .m-sub { padding-left: 0.8rem; }
/* Zweizeilige Einträge: fetter Name + dezente Tagline (Rivvers-Pattern, schlanker) */
.mobile-menu .m-sub { flex-direction: column; align-items: flex-start; gap: 0.1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.mobile-menu .m-sub-label { font-weight: 600; line-height: 1.2; }
.mobile-menu .m-sub-tag { font-size: var(--t-caption); font-weight: 500; color: var(--ink-faint); line-height: 1.2; }
.mobile-menu .m-sub.is-current .m-sub-tag { color: var(--accent-ink); }

/* ==========================================================================
   Blog
   ========================================================================== */
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
@media (max-width: 920px){ .post-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .post-grid { grid-template-columns: 1fr; } }
.post {
  display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; transition: transform 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.post-img { overflow: hidden; }
.post-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .post:hover .post-img img { transform: scale(1.05); }
}
.post-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.post-cat { font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.post-body h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; }
.post-body p { color: var(--ink-soft); font-size: var(--t-small); flex: 1; }
.post-body .link-arrow { align-self: flex-start; font-size: var(--t-small); margin-top: 0.2rem; }

/* post meta (author · date · reading time) — cards + article head */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; color: var(--ink-faint, var(--ink-soft)); font-size: var(--t-caption); margin-top: 0.15rem; }
.post-meta time { color: inherit; }
.post-meta-author { font-weight: 600; color: var(--ink-soft); }
.post-meta-dot { opacity: 0.55; }
.article .post-meta { margin-top: 1rem; font-size: var(--t-small); }
.post-cat { display: inline-block; }
a.post-cat:hover { color: var(--accent-press); }

/* tag chips on article */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--gap); }
.tag-chip { padding: 0.35rem 0.8rem; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--line); font-size: var(--t-caption); font-weight: 600; color: var(--ink-soft); transition: background 0.18s, border-color 0.18s, color 0.18s; }
.tag-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

/* featured post */
.post-featured { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; }
@media (max-width: 800px){ .post-featured { grid-template-columns: 1fr; } }
.post-featured .post-img img { height: 100%; aspect-ratio: auto; min-height: 280px; }
.post-featured .post-body { justify-content: center; padding: clamp(1.5rem,1rem+2vw,2.5rem); gap: 0.7rem; }
.post-featured h2 { font-size: var(--t-h3); line-height: 1.1; }

/* category filter chips */
.cat-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--gap-lg); }
.cat-chip { padding: 0.5rem 1rem; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.cat-chip.is-active, .cat-chip:hover { background: var(--accent-soft); border-color: var(--accent); }

/* article */
.article { max-width: 760px; margin-inline: auto; }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; color: var(--ink-faint); font-size: var(--t-small); margin: 0.8rem 0 0; }
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
.article-hero img { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: calc(var(--r-card) + 6px); box-shadow: var(--shadow-lg); margin-top: 1.6rem; }
/* Lange Komposita / Non-Breaking-Hyphens dürfen die Spalte nicht sprengen (Audit K2) */
.article h1 { overflow-wrap: break-word; hyphens: auto; }
.article-body { margin-top: var(--gap-lg); }
.article-body h2 { font-size: var(--t-h3); margin: 2rem 0 0.7rem; }
.article-body h3 { font-size: var(--t-sub); margin: 1.5rem 0 0.4rem; }
.article-body p { color: var(--ink-soft); margin-bottom: 1rem; }
.article-body ul { margin: 0 0 1.1rem; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.article-body li { color: var(--ink-soft); }
.article-body li strong, .article-body p strong { color: var(--ink); }
.article-cta { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.4rem 1.6rem; margin: 1.6rem 0; }

/* ==========================================================================
   /arrange pass 2 - review grid fix + balanced sub-page heroes
   ========================================================================== */

/* restore responsive grid for plain review grids (About "Mieter-Talk") */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .review-grid { grid-template-columns: 1fr; } }

/* sub-page hero with a contextual aside -> balanced 2-col, fills empty space */
/* minmax(0,…) lets the tracks shrink below min-content so a long German display
   word (e.g. "Geschäftsadresse") in the H1 wraps instead of forcing horizontal scroll. */
.page-hero.has-aside { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--gap-lg); align-items: center; }
@media (max-width: 880px) { .page-hero.has-aside { grid-template-columns: minmax(0, 1fr); } }
.page-hero h1 { overflow-wrap: break-word; hyphens: auto; }
/* Homepage-Hero: kein Wortumbruch in der Headline — die H1-Größe ist auf die Textlänge getunt */
.hero h1 { overflow-wrap: break-word; }
.hero-aside {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); box-shadow: var(--shadow);
}
.hero-aside .price { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,1.4rem+2vw,2.8rem); line-height: 1; letter-spacing: -0.03em; }
.hero-aside .price span { font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.06em; }
.hero-aside h2 { font-size: var(--t-sub); margin-bottom: 0.8rem; }
.hero-aside .row { display: flex; align-items: flex-start; gap: 0.6rem; padding-block: 0.55rem; border-top: 1px solid var(--line); font-size: var(--t-small); }
.hero-aside .row:first-of-type { border-top: 0; }
.hero-aside .row svg { width: 18px; height: 18px; color: var(--accent-press); flex: none; margin-top: 2px; }
.hero-aside .btn { width: 100%; margin-top: 1rem; }
.hero-aside .k { color: var(--ink-faint); font-size: var(--t-caption); }
.hero-aside .v { font-weight: 600; }

/* ==========================================================================
   /clarify + conversion microcopy
   ========================================================================== */
.form-note { margin-top: 0.7rem; text-align: center; font-size: var(--t-caption); color: var(--ink-faint); line-height: 1.5; }
.form-note .stars { color: var(--accent); letter-spacing: 1px; }
.check a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

/* ==========================================================================
   /arrange + /polish pass 3 + billing toggle (money page)
   ========================================================================== */

/* Stars get the amber pop everywhere, not only in the contexts that scoped it.
   Scoped rules (.utilbar .stars etc.) keep their higher specificity overrides. */
.stars { color: var(--accent); letter-spacing: 1px; }

/* Long German compounds must wrap inside cards / prose, never overflow */
.pkg-list li, .reason p, .faq-body p, .editorial p, .svc p {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 4-up variant of the shared .values grid (fixes the lonely-4th-card orphan) */
.values--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .values--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .values--4 { grid-template-columns: 1fr; } }

/* Featured package badge - the recommendation must be visible, not just a border */
.pkg { position: relative; }
.pkg-badge {
  position: absolute; top: -0.7rem; right: 1.1rem;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.04em;
  padding: 0.3rem 0.8rem; border-radius: var(--r-pill); box-shadow: var(--shadow);
}
.pkg-featured-fill { background: color-mix(in srgb, var(--accent-wash) 70%, var(--surface-2)); }
.pkg-incl { margin: 0.2rem 0 1.1rem; font-size: var(--t-small); color: var(--ink-soft); }
.pkg-incl b { color: var(--ink); font-weight: 600; }
.pkg .price-sub { font-size: var(--t-caption); color: var(--ink-faint); margin-top: 0.15rem; }
.pkg .price-note { font-size: var(--t-caption); color: var(--ink-faint); margin-top: 0.35rem; }

/* Billing toggle (Monatlich / Jährlich -10%) */
.billing-toggle {
  display: flex; width: fit-content; gap: 0.25rem; margin: 0 auto var(--gap-lg);
  padding: 0.3rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
}
.billing-opt {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-small);
  color: var(--ink-soft); background: transparent; border: 0; cursor: pointer;
  padding: 0.55rem 1.15rem; border-radius: var(--r-pill);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.billing-opt.is-active { background: var(--ink); color: var(--on-deep); }
.billing-opt.is-active .billing-save { background: var(--accent); color: var(--ink); }
.billing-save {
  font-size: var(--t-caption); font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft); padding: 0.15rem 0.5rem; border-radius: var(--r-pill);
  letter-spacing: 0.02em; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .billing-opt { transition: none; } }
/* Mobile: 3 Pills passen nicht nebeneinander in 390px — umbrechen statt Overflow */
@media (max-width: 560px) {
  .billing-toggle { flex-wrap: wrap; justify-content: center; max-width: 100%; border-radius: var(--r-card); }
  .billing-opt { padding: 0.5rem 0.85rem; }
}

/* Token-based comparison table (replaces inline-styled <table>) */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--gap-lg); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 32rem; }
.compare th, .compare td { text-align: left; padding: var(--space-sm) var(--space-md); vertical-align: top; }
.compare thead th { border-bottom: 2px solid var(--line); font-family: var(--font-display); }
.compare tbody tr { border-bottom: 1px solid var(--line-soft); }
.compare tbody tr:last-child { border-bottom: 0; }
.compare .col-us { background: var(--accent-wash); }
.compare thead .col-us { border-radius: var(--r-card) var(--r-card) 0 0; }
.compare tbody tr:last-child .col-us { border-radius: 0 0 var(--r-card) var(--r-card); }
.compare .crit { color: var(--ink); }

/* Pull quote (owner) - was inline-styled; now a real element */
.pull-quote {
  max-width: 56ch; margin: var(--gap-lg) auto 0; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--space-xl) var(--space-lg);
}
.pull-quote p.q { font-size: var(--t-lead); line-height: 1.55; font-style: italic; }
.pull-quote footer { margin-top: var(--space-sm); color: var(--ink-soft); font-size: var(--t-small); font-style: normal; }
.pull-quote cite { font-style: normal; font-weight: 600; color: var(--ink); }
.pull-quote .tel { display: inline-block; margin-top: var(--space-sm); font-weight: 700; }

/* Inline price number that the billing toggle swaps. Must out-specify `.pkg .price span`
   so it keeps the large display size while the unit span stays small. */
.pkg .price .price-num { font: inherit; letter-spacing: inherit; color: inherit; }

/* Strikethrough anchor price + discount badge shown on quartal/jährlich */
.pkg .price-strike {
  font-size: 0.42em; font-weight: 600; letter-spacing: 0;
  color: var(--ink-faint); text-decoration: line-through;
  margin-right: 0.45rem; vertical-align: middle;
}
.pkg .price-badge {
  display: inline-block; margin-left: 0.55rem; vertical-align: middle;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-body); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: 0.02em; padding: 0.18rem 0.55rem; border-radius: var(--r-pill);
}
/* [hidden] muss das explizite display der Spans schlagen (sonst bleibt Badge/Strike beim Zurückschalten sichtbar) */
.pkg .price-strike[hidden], .pkg .price-badge[hidden] { display: none; }

/* Form submit status (success / error live region) */
.form-status { margin-top: 0.6rem; text-align: center; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.45; }
.form-status:empty { margin-top: 0; }
.form-status.is-error { color: #b4451f; font-weight: 600; }

/* Keep the sticky promo bar from covering the form submit on short viewports */
#anfrage { scroll-margin-top: calc(var(--nav-h) + var(--nav-float-gap) + 0.5rem); padding-bottom: clamp(4.5rem, 3rem + 6vw, 8rem); }

/* Standort-Galerie — echte Innen-/Außenaufnahmen statt Textwüste */
.loc-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--space-lg); }
.loc-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow); }
@media (max-width: 700px) { .loc-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 430px) { .loc-gallery { grid-template-columns: 1fr; } }

/* Quick-Facts unter dem Hero — schlichte Textzeile mit feinen Trennlinien (statt Pillen) */
.loc-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0; margin-top: 1.5rem; }
.loc-fact { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; background: none; border: none; border-radius: 0; font-size: var(--t-small); font-weight: 500; color: var(--ink-soft); }
.loc-fact svg { width: 15px; height: 15px; color: var(--accent-ink); flex: none; }
.loc-fact + .loc-fact { margin-left: 0.95rem; padding-left: 0.95rem; border-left: 1px solid var(--line-soft); }
.loc-fact--rating { color: var(--accent-ink); font-weight: 600; }
.loc-fact--rating svg { color: var(--accent-ink); }

/* Reason-Karten: Inline-Icon neben der Überschrift (kein Badge-über-Heading) + dezenter Hover */
.reason { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .reason:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}
.reason h3 { display: flex; align-items: center; gap: 0.5rem; }
.reason h3 svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
@media (prefers-reduced-motion: reduce) { .reason, .reason:hover { transition: none; transform: none; } }

/* Split-Hero (Demo an einer Standortseite) — Text links, Bild rechts, auf warmer Amber-Bühne */
.loc-hero--split .loc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--gap-lg); align-items: center; margin-top: 1.4rem; background: var(--accent-wash); border-radius: calc(var(--r-card) + 12px); padding: clamp(1.6rem, 1rem + 3.5vw, 3.2rem); }
@media (max-width: 900px) { .loc-hero--split .loc-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: clamp(1.4rem, 1rem + 3vw, 2.2rem); } }
.loc-hero--split h1 { margin: 0.5rem 0 0.7rem; max-width: 16ch; overflow-wrap: break-word; hyphens: auto; }
.loc-hero--split h1 .hl-city { background: linear-gradient(transparent 58%, var(--accent-soft) 58%); padding: 0 0.06em; border-radius: 2px; }
.loc-hero--split .lead { max-width: 48ch; }
.loc-hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 0; }
.loc-hero--split .loc-facts { margin-top: 1.2rem; }
.loc-hero-media { position: relative; }
.loc-hero--split .loc-hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-lg); margin: 0; display: block; }
.loc-hero-badge { position: absolute; left: 0.9rem; bottom: -0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-lg); padding: 0.5rem 0.95rem; font-size: var(--t-small); white-space: nowrap; }
.loc-hero-badge .stars { font-size: 0.95rem; letter-spacing: 1px; }
@media (max-width: 480px) { .loc-hero-badge { left: 0.7rem; bottom: -0.8rem; } }

/* CTA-Überarbeitung — Icons, wärmerer Primary-Hover-Glow, echter Ghost-Sekundärbutton */
.btn svg { width: 16px; height: 16px; flex: none; }

/* Text-Style-Sekundärbutton: nur Text + Icon + Amber-Linie — maximaler Kontrast zum gefüllten Primary */
.btn--text { background: transparent; border-color: transparent; color: var(--ink); padding-left: 0.4rem; padding-right: 0.4rem; box-shadow: none; }
.btn--text .btn-label { border-bottom: 2px solid var(--accent); padding-bottom: 2px; transition: border-color 180ms var(--ease-out); }
.btn--text:hover { background: transparent; color: var(--accent-ink); }
.btn--text:hover .btn-label { border-color: var(--accent-press); }
.btn--primary:hover { box-shadow: 0 8px 20px rgba(243, 177, 58, 0.32); }
.btn--ghost:hover { border-color: var(--accent-press); background: var(--accent-wash); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-arrow { transition: transform 180ms var(--ease-out); }
  .btn--primary:hover .btn-arrow, .btn--on-deep:hover .btn-arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .btn-arrow { transition: none; } .btn--primary:hover .btn-arrow { transform: none; } }

/* ==========================================================================
   Delight & Motion — Standort-Seiten (Signature-Hero, Galerie-Zoom, FAQ, Erfolg)
   GPU-only (transform/opacity), nur unter .js, reduced-motion-sicher.
   ========================================================================== */

/* --- Signature-Moment: Hero-Choreografie (Page-Load, gestaffelt) --- */
.js .loc-hero-anim > * { animation: heroIn 0.62s var(--ease-out) both; }
.js .loc-hero-anim > *:nth-child(1) { animation-delay: 0.04s; }
.js .loc-hero-anim > *:nth-child(2) { animation-delay: 0.11s; }
.js .loc-hero-anim > *:nth-child(3) { animation-delay: 0.18s; }
.js .loc-hero-anim > *:nth-child(4) { animation-delay: 0.25s; }
.js .loc-hero-anim > *:nth-child(5) { animation-delay: 0.32s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.js .loc-hero-mediaIn img { animation: heroMediaIn 0.72s var(--ease-out) 0.12s both; }
.js .loc-hero-mediaIn .loc-hero-badge { animation: heroBadgeIn 0.5s var(--ease-out) 0.58s both; }
@keyframes heroMediaIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes heroBadgeIn { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }

/* --- Galerie: sanfter Hover-Zoom im geclippten Rahmen --- */
.loc-gallery .g-fig { margin: 0; overflow: hidden; border-radius: var(--r-card); box-shadow: var(--shadow); }
.loc-gallery .g-fig img { border-radius: 0; box-shadow: none; transition: transform 0.5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .loc-gallery .g-fig:hover img { transform: scale(1.04); } }

/* --- FAQ: Antwort fadet beim Öffnen kurz ein, statt hart zu erscheinen --- */
.faq-item[open] .faq-body { animation: faqIn 0.28s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- Formular-Erfolg: gezeichneter Haken + dezenter Puls --- */
.btn-check { width: 18px; height: 18px; flex: none; stroke-dasharray: 26; stroke-dashoffset: 26; animation: checkDraw 0.4s var(--ease-out) 0.06s forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
.btn.is-success { animation: btnPulse 0.45s var(--ease-out); }
@keyframes btnPulse { 0% { transform: scale(1); } 35% { transform: scale(1.04); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .js .loc-hero-anim > *,
  .js .loc-hero-mediaIn img,
  .js .loc-hero-mediaIn .loc-hero-badge,
  .faq-item[open] .faq-body,
  .btn.is-success { animation: none; }
  .loc-gallery .g-fig img { transition: none; }
  .loc-gallery .g-fig:hover img { transform: none; }
  .btn-check { animation: none; stroke-dashoffset: 0; }
}

/* ==========================================================================
   Hierarchie der Inhaltsspalte (arrange): Lead-Opener + Kicker-Ebene + Rhythmus
   ========================================================================== */

/* Opener: erster Block ist ein Lead, kein wiederholtes h2 — Anker der Spalte */
.loc-content > .reveal:first-child .lead { color: var(--ink); max-width: 60ch; }

/* Kicker (.eyebrow) trägt jetzt den Sektionsabstand; die h2 rückt eng darunter.
   So entsteht der Drei-Stufen-Takt Kicker -> Überschrift -> Text wie bei den
   Vollbreit-Sektionen, statt sechs gleich schwerer h2 in Reihe. */
.loc-content .reveal > .eyebrow { display: block; margin: var(--space-xl) 0 0; }
.loc-content .eyebrow + h2 { margin-top: 0.45rem; }

/* Netto-Preishinweis unter den Paketen (PAngV-Deklaration B2B) */
.price-disclaimer { margin-top: var(--space-lg); font-size: var(--t-caption); color: var(--ink-faint); }

/* ==========================================================================
   Vergleichsseiten (/vergleich/*): Erlangen-Erkenntnisse aufs Warm-&-Community-System
   ========================================================================== */

/* Kurzfazit-Callout — getönter Block mit Kicker, kein „dicke-Linie-links"-Antipattern */
.tldr { margin-top: var(--space-lg); background: var(--accent-wash); border: 1px solid var(--accent-soft); border-radius: var(--r-card); padding: var(--space-lg); }
.tldr .eyebrow { color: var(--accent-ink); margin-bottom: 0.5rem; }
.tldr p { margin: 0; }
.tldr-cta { margin-top: var(--space-md); display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Vergleichstabelle: unsere Zeile als Amber-Highlight (Pendant zu .col-us für Zeilen-Layout) */
.compare .row-us td { background: var(--accent-wash); }
.compare .row-us td:first-child { border-radius: var(--r-card) 0 0 var(--r-card); }
.compare .row-us td:last-child { border-radius: 0 var(--r-card) var(--r-card) 0; }

/* Prose-Kicker: Eyebrow trägt den Sektionsabstand, h2 rückt eng darunter (wie Standortspalte) */
.prose > .eyebrow { display: block; margin: var(--space-xl) 0 0; }
.prose > .eyebrow + h2 { margin-top: 0.4rem; }
.prose > .eyebrow:first-child { margin-top: 0; }

/* Trust-Zeile unter dem CTA-Band-Button */
.cta-band .cta-trust { margin: 1.2rem auto 0; font-size: var(--t-small); color: var(--on-deep-soft); }
.cta-band .cta-trust a { color: var(--on-deep); text-decoration: underline; text-decoration-color: var(--accent); }
.cta-band .cta-trust .stars { color: var(--accent); letter-spacing: 1px; }

/* ==========================================================================
   Standort-Split-Hero: responsiv — Desktop = Split (Amber-Box), Mobile = schlicht
   gestapelt wie der klassische Hero. Fakten als eigenes Grid-Kind, damit sie auf
   Desktop unter dem Text und auf Mobile NACH dem Bild stehen.
   ========================================================================== */
.loc-hero--split .loc-hero-grid > .loc-facts { grid-column: 1; margin-top: 1.2rem; }
.loc-hero--split .loc-hero-grid > .loc-hero-media { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
@media (max-width: 900px) {
  .loc-hero--split .loc-hero-grid > .loc-hero-media { grid-row: auto; grid-column: auto; }
}
/* Mobile: Amber-Box ablegen → schlicht gestapelt (Text → Bild → Fakten) */
@media (max-width: 700px) {
  .loc-hero--split .loc-hero-grid { background: none; border-radius: 0; padding: 0; gap: var(--space-md); margin-top: 1rem; }
  .loc-hero--split .loc-hero-grid > .loc-facts { margin-top: 0.4rem; }
}

/* ==========================================================================
   Geschäftsadresse-Checker: Quiz-Widget (Lead-Magnet, /geschaeftsadresse-checker/)
   ========================================================================== */
.checker-card {
  max-width: 640px; margin-inline: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: calc(var(--r-card) + 6px);
  padding: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); box-shadow: var(--shadow);
}
.checker-progress { height: 4px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; margin-bottom: 1.6rem; }
.checker-progress-bar { height: 100%; width: 20%; background: var(--accent); border-radius: var(--r-pill); transition: width 420ms var(--ease-out); }
.checker-step h2 { font-size: var(--t-h3); margin-bottom: 0.6rem; }
.checker-options { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; }
.checker-opt {
  display: flex; align-items: center; gap: 0.9rem; width: 100%;
  text-align: left; font: inherit; font-weight: 600; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line-strong); border-radius: var(--r-input);
  padding: 0.7rem 1.1rem; cursor: pointer;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out),
    box-shadow 200ms var(--ease-out), transform var(--press) var(--ease-out);
}
.checker-opt-icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-wash);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 180ms var(--ease-out);
}
.checker-opt-icon svg { width: 18px; height: 18px; color: var(--accent-ink); }
.checker-opt-label { flex: 1; }
.checker-opt-arrow {
  flex: none; width: 18px; height: 18px; color: var(--accent-ink);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .checker-opt:hover .checker-opt-icon { background: var(--accent-soft); }
}
@media (hover: hover) and (pointer: fine) {
  .checker-opt:hover { border-color: var(--accent-press); background: var(--accent-wash); box-shadow: var(--shadow); transform: translateY(-1px); }
  .checker-opt:hover .checker-opt-arrow { opacity: 1; transform: translateX(0); }
}
.checker-opt:active { transform: scale(0.98); transition-duration: 60ms; }
.checker-back {
  display: inline-flex; align-items: center;
  font: inherit; font-size: var(--t-small); font-weight: 600; color: var(--ink-soft);
  background: none; border: none; padding: 0 0 1rem; cursor: pointer;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .checker-back:hover { color: var(--ink); transform: translateX(-2px); }
}
.checker-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.02em;
  border-radius: var(--r-pill); padding: 0.35rem 0.9rem 0.35rem 0.7rem; margin-bottom: 0.8rem;
  background: var(--surface-1); border: 1px solid var(--line);
}
.checker-badge svg { width: 14px; height: 14px; flex: none; }
.checker-badge--ja { background: var(--accent-wash); border-color: var(--accent-soft); color: var(--accent-ink); }
.checker-badge--warnung { background: var(--surface-1); border-color: var(--line-strong); color: var(--ink-soft); }
.checker-badge--nein { background: var(--ink); border-color: var(--ink); color: var(--surface-2); }
.checker-result { scroll-margin-top: calc(var(--nav-h) + var(--nav-float-gap) + 1rem); }
.checker-cta { display: block; margin-top: 1.4rem; }
.checker-cta[hidden] { display: none; } /* author display:block above would otherwise beat the UA [hidden] rule */
.checker-inline-form {
  padding: 1.3rem; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-card);
}
.checker-inline-form .field-row { margin-bottom: 0; }
.checker-inline-form .btn { width: 100%; }
.checker-cta-alt { display: inline-flex; margin-top: 1rem; font-size: var(--t-small); }
.checker-disclaimer { max-width: 640px; margin: 1rem auto 0; text-align: center; font-size: var(--t-caption); }

/* Entrance animation for quiz-step transitions: plays once per JS-driven step
   change (class re-added via reflow trick), default state stays fully visible
   so the widget degrades gracefully without JS. */
@keyframes checker-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.checker-step.is-entering, .checker-cta.is-entering {
  animation: checker-enter 420ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .checker-step.is-entering, .checker-cta.is-entering { animation: none; }
}


/* ---- consent.css ---- */
/* Cookie-Consent – kompakte Karte unten rechts (Desktop), Leiste unten (Mobile) */
.cc-banner{
  position:fixed;z-index:9999;
  left:1.25rem;bottom:1.25rem;right:auto;
  width:min(360px,calc(100vw - 2.5rem));
  background:var(--surface-2,#fff);
  border:1px solid var(--line,rgba(26,28,27,.12));
  border-radius:14px;
  box-shadow:0 10px 40px rgba(70,58,0,.18);
  animation:cc-in .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cc-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cc-inner{display:flex;flex-direction:column;gap:.85rem;padding:1.15rem 1.25rem}
.cc-text{font-size:.9rem;line-height:1.5}
.cc-text strong{display:block;margin-bottom:.3rem;font-size:1rem;font-family:var(--font-display,inherit)}
.cc-text p{margin:0;color:var(--ink-soft,#57544f)}
.cc-text a{text-decoration:underline}
.cc-options{display:flex;flex-direction:column;gap:.45rem;margin-top:.6rem}
.cc-options label{display:flex;align-items:center;gap:.5rem}
.cc-options span{color:var(--ink-soft,#57544f)}
.cc-actions{display:flex;flex-direction:column;gap:.5rem}
.cc-actions .btn{width:100%;text-align:center;justify-content:center}
/* hidden-Attribut MUSS gewinnen (sonst sind Optionen + Speichern-Button dauerhaft sichtbar) */
.cc-options[hidden]{display:none}
.cc-actions .btn[hidden]{display:none}
/* dezenter Textlink für Einstellungen */
.cc-link{
  align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.82rem;color:var(--ink-soft,#57544f);text-decoration:underline;
}
.cc-link:hover{color:var(--ink,#1a1c1b)}

@media (max-width:680px){
  /* Kompakt halten, damit der Banner nicht das halbe Viewport verdeckt (Audit K1 + #40) */
  .cc-banner{right:0;left:0;bottom:0;width:auto;border-radius:14px 14px 0 0;max-height:60vh;overflow-y:auto}
  .cc-inner{padding:.65rem .9rem;gap:.4rem}
  .cc-text{font-size:.8rem;line-height:1.35}
  .cc-text strong{font-size:.92rem;margin-bottom:.1rem;display:block}
  /* Buttons nebeneinander statt gestapelt → spart Höhe; 44px Tap-Target */
  .cc-actions{flex-direction:row;flex-wrap:wrap}
  .cc-actions .btn{flex:1 1 0;min-width:120px;min-height:44px;display:inline-flex;align-items:center}
  .cc-link{align-self:center;padding:.3rem .25rem;min-height:32px}
}