/* ==========================================================================
   Schlüsseldienst Meerbusch
   Ein Stylesheet, mobile first. Farben in OKLCH, Kontraste geprüft.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Flächen, warmes Off-White */
  --paper:    oklch(0.973 0.008 78);
  --paper-2:  oklch(0.945 0.013 76);
  --paper-3:  oklch(0.910 0.016 74);
  --card:     oklch(0.995 0.004 85);
  --line:     oklch(0.878 0.014 74);
  --line-2:   oklch(0.795 0.018 72);

  /* Schrift */
  --ink:      oklch(0.215 0.016 55);
  --ink-2:    oklch(0.435 0.014 58);
  --ink-3:    oklch(0.545 0.014 60);

  /* Signal in Monti-Gruen, Farbwinkel 158, passend zum Logo. Genau ein
     Gruenton; die Varianten aendern nur die Helligkeit fuer Hover, dunkle
     Flaechen und zarte Fuellungen. */
  --signal:         oklch(0.475 0.115 158);
  --signal-hi:      oklch(0.400 0.110 158);
  --signal-text:    oklch(0.445 0.110 158);
  --signal-on-dark: oklch(0.800 0.120 158);
  --signal-soft:    oklch(0.955 0.024 158);
  --signal-line:    oklch(0.850 0.060 158);

  /* Notruf-Rot, Farbwinkel 27. Nur fuer "Jetzt anrufen" und die Telefonnummer.
     Kontrast zu Papier 6.97:1, damit weisse Schrift darauf sicher lesbar ist. */
  --call:      oklch(0.470 0.190 27);
  --call-hi:   oklch(0.400 0.175 27);
  --call-text: oklch(0.455 0.180 27);
  --call-soft: oklch(0.960 0.022 27);
  --call-line: oklch(0.860 0.070 27);

  /* WhatsApp-Gruen, Farbwinkel 152. Etwas heller als das Marken-Gruen,
     damit sich Notruf- und WhatsApp-Aktion unterscheiden lassen. */
  --wa:    oklch(0.515 0.125 152);
  --wa-hi: oklch(0.445 0.125 152);

  /* Gruenes Abschlussband. Ersetzt die frueheren dunklen Flaechen unten. */
  --band:     oklch(0.400 0.105 158);
  --band-2:   oklch(0.345 0.095 158);
  --on-band:  oklch(0.985 0.006 150);
  --on-band-2: oklch(0.900 0.028 152);

  /* Sterne */
  --star: oklch(0.720 0.160 72);

  /* Dunkle Bänder */
  --night:      oklch(0.238 0.019 60);
  --night-2:    oklch(0.305 0.021 62);
  --on-night:   oklch(0.960 0.009 80);
  --on-night-2: oklch(0.805 0.013 78);

  /* Raster */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 5.5rem; --s10: 7.5rem;

  --wrap: 74rem;
  --wrap-narrow: 46rem;
  --r1: 3px; --r2: 8px; --r3: 14px; --r4: 22px;

  --shadow-1: 0 1px 2px oklch(0.215 0.016 55 / .06), 0 4px 14px oklch(0.215 0.016 55 / .05);
  --shadow-2: 0 2px 6px oklch(0.215 0.016 55 / .07), 0 18px 44px oklch(0.215 0.016 55 / .10);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --head-h: 4.25rem;

  /* Typo */
  --display: 'Archivo', 'Instrument', system-ui, sans-serif;
  --body: 'Instrument', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Seitliches Ueberlaufen wird geklippt, nicht versteckt. `overflow-x: hidden`
   auf dem Body macht den Body zum Scrollcontainer, und dann klebt die Kopfzeile
   auf iOS nicht mehr oben. Genau das hatte die Navigation auf dem Handy
   unerreichbar gemacht, sobald man ein Stueck gescrollt hatte. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
  body { overflow-x: visible; }
}

/* Die Seite dahinter wird NICHT per `overflow: hidden` gesperrt. Sobald der
   Body zum Scrollcontainer wird, verliert die klebende Kopfzeile ihren Halt und
   rutscht aus dem Bild. Das Menue deckt ohnehin alles unterhalb der Kopfzeile
   ab und faengt sein Scrollen per `overscroll-behavior` selbst ab. */

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--paper-2); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--ink);
}
/* Archivo laeuft ueber eine Breitenachse. Grosse Titel stehen breit und
   plakativ, kleine Ueberschriften bleiben normal. */
h1 { font-size: clamp(2.3rem, 1.25rem + 4.5vw, 4.7rem); font-stretch: 108%; font-weight: 800; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.95rem); font-stretch: 105%; font-weight: 800; }
h3 { font-size: clamp(1.2rem, 1.02rem + .7vw, 1.55rem); line-height: 1.2; letter-spacing: -0.014em; }
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.008em; }

p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

::selection { background: var(--signal); color: var(--paper); }

/* --------------------------------------------------------------------------
   Layout-Hilfen
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.25rem, var(--wrap)); margin-inline: auto; }
.wrap-n { width: min(100% - 2.25rem, var(--wrap-narrow)); margin-inline: auto; }
@media (min-width: 48rem) { .wrap, .wrap-n { width: min(100% - 4rem, var(--wrap)); } .wrap-n { max-width: var(--wrap-narrow); } }

section { position: relative; }
.sec { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.sec-tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.bg-2 { background: var(--paper-2); }
.bg-night { background: var(--night); color: var(--on-night); }
.bg-night h1, .bg-night h2, .bg-night h3, .bg-night h4 { color: var(--on-night); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem; border-radius: 0 0 var(--r2) 0;
}
.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--display);
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--signal-text);
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: var(--s4);
}
.eyebrow::before { content: ''; width: 1.6rem; height: 2px; background: var(--signal); flex: none; }
.bg-night .eyebrow { color: var(--signal-on-dark); }
.bg-night .eyebrow::before { background: var(--signal-on-dark); }

.lede { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.32rem); line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.bg-night .lede { color: var(--on-night-2); }
.prose p { max-width: 68ch; }
.prose p + p { margin-top: 1.1em; }
.u-mt4 { margin-top: var(--s4); }
.u-mt6 { margin-top: var(--s6); }
.u-mt7 { margin-top: var(--s7); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btns { display: flex; flex-wrap: wrap; gap: .7rem; }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
  padding: .9rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  min-height: 3rem;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Notruf immer in Rot. Es ist die eine Aktion, die im Ernstfall zaehlt. */
.btn-call { background: var(--call); color: var(--paper); }
.btn-call:hover { background: var(--call-hi); }
.btn-wa { background: var(--wa); color: var(--paper); }
.btn-wa:hover { background: var(--wa-hi); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: var(--card); }
.bg-night .btn-ghost { border-color: oklch(0.45 0.02 62); color: var(--on-night); }
.bg-night .btn-ghost:hover { border-color: var(--on-night); background: oklch(0.30 0.021 62); }

.btn-sm { padding: .6rem 1.05rem; font-size: .92rem; min-height: 2.5rem; }
.top-cta { white-space: nowrap; flex: none; }

.dot {
  width: .52rem; height: .52rem; border-radius: 50%;
  background: currentColor; flex: none;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 60%, transparent); }
  70%  { box-shadow: 0 0 0 .55rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

/* Textlink mit Pfeil */
.arrow {
  display: inline-flex; align-items: baseline; gap: .45rem;
  font-family: var(--display); font-weight: 700; color: var(--signal-text);
  text-decoration: none; letter-spacing: -.01em;
}
.arrow::after { content: '\2192'; transition: transform .22s var(--ease); }
.arrow:hover { text-decoration: underline; }
.arrow:hover::after { transform: translateX(.28rem); }

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
/* z-index ueber dem mobilen Aktionsbalken (70), damit das ausgeklappte Menue
   nicht darunter verschwindet. */
.top {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.top.is-stuck { border-bottom-color: var(--line); background: color-mix(in oklch, var(--paper) 96%, transparent); }

.top-in {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--head-h);
}

.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: none; }
/* Das Logo traegt den Firmennamen bereits, daneben steht deshalb kein Text. */
.brand-logo { width: auto; height: 2.8rem; background: none; }
@media (min-width: 48rem) { .brand-logo { height: 3.2rem; } }

.nav { display: none; }
@media (min-width: 78rem) {
  .nav { display: flex; align-items: center; gap: .1rem; }
  .nav > a, .nav-item > a {
    text-decoration: none; padding: .5rem .55rem; border-radius: var(--r2);
    font-size: .92rem; color: var(--ink-2); white-space: nowrap;
    transition: color .18s, background-color .18s;
  }
  .nav > a:hover, .nav-item > a:hover { color: var(--ink); background: var(--paper-2); }
  .nav > a[aria-current], .nav-item > a[aria-current] { color: var(--ink); font-weight: 600; }

  /* ----------------------------------------------------------------------
     Aufklappmenue "Leistungen". Laeuft ohne JavaScript ueber :hover und
     :focus-within. Die Flaeche haengt am Elternpunkt und beginnt buendig mit
     dem Header, damit die Maus auf dem Weg nach unten nicht ins Leere faehrt.
     ---------------------------------------------------------------------- */
  .nav-item { position: relative; display: flex; align-items: center; }

  .nav-caret {
    display: inline-block; width: .34rem; height: .34rem; margin-left: .38rem;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    transition: transform .2s var(--ease);
  }
  .nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret {
    transform: translateY(1px) rotate(225deg);
  }

  .nav-sub {
    position: absolute; top: 100%; left: 50%; z-index: 100;
    width: 35rem; padding-top: .55rem;
    transform: translate(-50%, .35rem);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s var(--ease), transform .22s var(--ease), visibility .18s;
  }
  .nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .nav-sub-in {
    display: grid; grid-template-columns: 1fr 1fr; gap: .1rem;
    padding: .5rem; border-radius: var(--r3);
    background: var(--card); border: 1px solid var(--line);
    box-shadow: var(--shadow-2);
  }
  .nav-sub-in a {
    display: grid; gap: .05rem; padding: .5rem .6rem;
    border-radius: var(--r2); text-decoration: none; white-space: normal;
  }
  .nav-sub-in a b {
    font-family: var(--display); font-size: .88rem; font-weight: 600;
    color: var(--ink); line-height: 1.25;
  }
  .nav-sub-in a span { font-size: .78rem; color: var(--ink-3); }
  .nav-sub-in a:hover, .nav-sub-in a:focus-visible { background: var(--signal-soft); }
  .nav-sub-in a:hover b, .nav-sub-in a:focus-visible b { color: var(--signal-text); }

  .nav-sub-all {
    display: block; margin-top: .3rem; padding: .55rem .6rem;
    border-radius: var(--r2); background: var(--card);
    border: 1px solid var(--line); box-shadow: var(--shadow-1);
    font-size: .85rem; font-weight: 600; color: var(--signal-text);
    text-decoration: none; text-align: center;
  }
  .nav-sub-all:hover { background: var(--signal-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-sub, .nav-caret { transition-duration: .01ms; }
}

.top-cta { display: none; }
@media (min-width: 48rem) { .top-cta { display: inline-flex; } }

.burger {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--line-2); border-radius: var(--r2);
  background: transparent; cursor: pointer; color: var(--ink);
}
@media (min-width: 78rem) { .burger { display: none; } }
.burger span, .burger span::before, .burger span::after {
  content: ''; display: block; width: 1.15rem; height: 2px; background: currentColor;
  transition: transform .25s var(--ease), opacity .2s;
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-2px) rotate(-45deg); }

/* Das Menue liegt als eigene Flaeche ueber der Seite, statt die Kopfzeile in
   die Hoehe zu ziehen. Damit haengt es nicht mehr an der Hoehe des Headers und
   scrollt zuverlaessig in sich selbst, auch auf dem Handy. */
.drawer {
  display: none;
  position: fixed; left: 0; right: 0; top: var(--head-h); bottom: 0;
  z-index: 80;
  border-top: 1px solid var(--line);
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer.is-open { display: block; }
@media (min-width: 78rem) { .drawer, .drawer.is-open { display: none; } }
.drawer-in { padding: var(--s5) 0 var(--s8); display: grid; gap: .1rem; }
.drawer a {
  text-decoration: none; padding: .7rem .25rem; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 1.08rem; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.drawer a[aria-current] { color: var(--signal-text); }
.drawer-sub { font-size: .95rem !important; font-weight: 400 !important; color: var(--ink-2); padding-left: 1rem !important; }

/* Die elf Leistungen stehen im Menue zusammengeklappt, damit die Hauptpunkte
   ohne Scrollen sichtbar bleiben. */
.drawer-group { border-bottom: 1px solid var(--line); }
.drawer-group > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: .7rem 2.2rem .7rem .25rem;
  font-family: var(--display); font-size: 1.08rem; font-weight: 600;
}
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-group > summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%; width: .62rem; height: .62rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.drawer-group[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.drawer-group a { border-bottom: 0; padding-block: .5rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(2rem, 1rem + 4vw, 4rem); padding-bottom: 0; overflow: hidden; }
.hero-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); }
}

.hero-status {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--card); border: 1px solid var(--signal-line);
  border-radius: 999px; padding: .42rem .95rem .42rem .8rem;
  font-size: .86rem; color: var(--ink-2);
  box-shadow: var(--shadow-1);
}
.hero-status b { font-family: var(--display); color: var(--ink); font-weight: 700; }
.hero-status .dot { color: var(--call); }

/* Archivo läuft breiter als der Vorgänger. Die drei Hero-Zeilen sind gesetzt
   und sollen gesetzt bleiben, deshalb hier eine eigene, knappere Staffelung. */
.hero h1 {
  margin-top: var(--s5);
  font-size: clamp(2.05rem, 1.1rem + 3.9vw, 4.15rem);
  font-stretch: 95%;
}
.hero h1 em { font-style: normal; color: var(--signal-text); }
.hero-line { display: block; overflow: hidden; }
.hero-line > span { display: block; white-space: nowrap; }

.hero-lede { margin-top: var(--s5); max-width: 44ch; }
.hero .btns { margin-top: var(--s6); }

.hero-note {
  margin-top: var(--s5); font-size: .92rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
}
.hero-note span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-note span::before { content: ''; width: .32rem; height: .32rem; border-radius: 50%; background: var(--signal); flex: none; }

.hero-figure { position: relative; }
.hero-shot {
  position: relative; border-radius: var(--r4); overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: var(--shadow-2);
}
@media (min-width: 62rem) { .hero-shot { aspect-ratio: 5 / 6; } }
/* Ausschnitt ist auf das Hero-Motiv abgestimmt. Bei einem Bildwechsel neu
   einstellen, sonst schneidet der Rand an einer unguenstigen Stelle ab. */
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }

.hero-badge {
  position: absolute; left: clamp(-.5rem, -2vw, -1.5rem); bottom: clamp(1rem, 3vw, 2.2rem);
  background: var(--card); border-radius: var(--r3); padding: .95rem 1.15rem;
  box-shadow: var(--shadow-2); max-width: 15rem;
  border-left: 4px solid var(--signal);
}
.hero-badge b { display: block; font-family: var(--display); font-size: 1.55rem; line-height: 1; letter-spacing: -.03em; }
.hero-badge span { display: block; font-size: .82rem; color: var(--ink-2); margin-top: .25rem; line-height: 1.35; }

/* Auf dem Handy fuellt das Foto den Hero-Hintergrund. Es liegt hinter dem
   Text, wird abgedunkelt, und der Text steht hell und mittig darauf. */
@media (max-width: 61.99rem) {
  .hero { padding-top: 0; }
  .hero-grid {
    display: block; position: relative;
    margin-inline: calc(50% - 50vw); width: 100vw;
    padding-inline: max(1.125rem, calc(50vw - var(--wrap) / 2));
  }
  .hero-figure {
    position: absolute; inset: 0; margin: 0; width: 100%; z-index: 0;
  }
  .hero-shot {
    height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none;
  }
  .hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
  .hero-shot::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(180deg,
        oklch(0.22 0.02 60 / .58) 0%,
        oklch(0.21 0.02 60 / .70) 46%,
        oklch(0.20 0.02 60 / .88) 100%);
  }
  .hero-badge { display: none; }

  /* Text mittig, hell, auf dem abgedunkelten Foto gut lesbar. */
  .hero-body {
    position: relative; z-index: 2; text-align: center;
    padding-block: clamp(2rem, 1rem + 6vw, 3.5rem) clamp(2.75rem, 1.5rem + 8vw, 4.5rem);
  }
  .hero-body .hero-status {
    box-shadow: 0 4px 20px oklch(0.15 0.02 60 / .35);
  }
  .hero h1 { color: var(--on-night); }
  .hero h1 em { color: var(--signal-on-dark); }
  .hero-lede { color: var(--on-night); margin-inline: auto; }
  .hero .btns { justify-content: center; }
  .hero-note { justify-content: center; color: var(--on-night-2); }
  .hero-note span { justify-content: center; color: var(--on-night-2); }
  .hero-note span::before { background: var(--signal-on-dark); }
}

/* Kennzahlen */
.stats {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.stats-in { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 56rem) { .stats-in { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: var(--s5) var(--s4) var(--s5) 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: var(--s4); }
@media (max-width: 55.99rem) {
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.stat b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1; letter-spacing: -.035em;
  color: var(--ink); white-space: nowrap;
}
.stat b span { font: inherit; color: inherit; display: inline; }
.stat > span { display: block; font-size: .88rem; color: var(--ink-2); margin-top: .5rem; max-width: 20ch; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Leistungs-Slideshow
   -------------------------------------------------------------------------- */
.slider { position: relative; }
.slider-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); margin-bottom: var(--s6);
}
.slider-head h2 { max-width: 18ch; }

.slider-view { overflow: hidden; border-radius: var(--r4); background: var(--night); touch-action: pan-y; cursor: grab; }
.slider-view:active { cursor: grabbing; }
.slider-track { display: flex; will-change: transform; }
.slide { flex: 0 0 100%; position: relative; }

.slide-media { position: relative; aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .slide-media { aspect-ratio: 21 / 9; } }
@media (min-width: 62rem) { .slide-media { aspect-ratio: 2.35 / 1; min-height: 26rem; } }
.slide-media img { width: 100%; height: 100%; object-fit: cover; }
.slide-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    oklch(0.20 0.018 58 / .12) 0%,
    oklch(0.20 0.018 58 / .48) 45%,
    oklch(0.18 0.018 58 / .88) 100%);
}
@media (min-width: 62rem) {
  .slide-media::after {
    background: linear-gradient(100deg,
      oklch(0.18 0.018 58 / .90) 0%,
      oklch(0.19 0.018 58 / .70) 42%,
      oklch(0.20 0.018 58 / .22) 78%);
  }
}

.slide-body {
  position: absolute; inset: auto 0 0 0; padding: var(--s5);
  color: var(--on-night); z-index: 2;
}
@media (min-width: 62rem) {
  .slide-body { inset: 0 auto 0 0; max-width: 32rem; padding: var(--s8); display: flex; flex-direction: column; justify-content: center; }
}
.slide-num {
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--signal-on-dark);
  margin-bottom: .8rem; display: block;
}
.slide-body h3 { color: var(--on-night); font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem); letter-spacing: -.025em; }
.slide-body p { color: var(--on-night-2); margin-top: .7rem; max-width: 40ch; font-size: 1rem; }
.slide-body .arrow { color: var(--signal-on-dark); margin-top: var(--s5); }

.slider-bar {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s5); flex-wrap: wrap;
}
.slider-nav { display: flex; gap: .5rem; }
.sbtn {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.sbtn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sbtn:disabled { opacity: .35; cursor: default; }
.sbtn:disabled:hover { background: var(--card); color: var(--ink); border-color: var(--line-2); transform: none; }
.sbtn svg { width: 1.15rem; height: 1.15rem; }

.slider-dots { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.sdot {
  width: 2.15rem; height: .35rem; border-radius: 999px; border: 0; padding: 0;
  background: var(--line-2); cursor: pointer; position: relative; overflow: hidden;
  transition: background-color .25s;
}
.sdot[aria-current="true"] { background: var(--paper-3); }
.sdot i {
  position: absolute; inset: 0; display: block; background: var(--signal);
  transform: scaleX(0); transform-origin: left; border-radius: 999px;
}
.slider-count { font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .02em; color: var(--ink-2); }
.slider-count b { color: var(--ink); }

/* Handy: Foto oben, Text darunter auf dunklem Grund. Kein Text mehr auf dem
   Bild, dadurch ist jede Folie vollstaendig lesbar und die Nummer sichtbar. */
@media (max-width: 47.99rem) {
  .slide { display: flex; flex-direction: column; }
  .slide-media { aspect-ratio: 16 / 10; flex: none; }
  .slide-media::after { display: none; }
  .slide-body {
    position: static; background: var(--night);
    padding: var(--s5) var(--s5) var(--s6);
  }
  .slide-body p { font-size: .95rem; }
  /* Dreizehn Punkte passen nicht in eine Zeile. Auf kleinen Schirmen entfallen
     sie ganz, der Zaehler daneben zeigt weiterhin die richtige Folie. */
  .slider-dots { display: none; }
  .slider-bar { gap: var(--s4) var(--s5); }
}

/* --------------------------------------------------------------------------
   Foto-Textreihen
   -------------------------------------------------------------------------- */
.row { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 58rem) {
  .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-flip .row-media { order: 2; }
}
.row + .row { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.row-media { position: relative; border-radius: var(--r4); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow-1); }
.row-media img { width: 100%; height: 100%; object-fit: cover; }
.row-body h2 + p, .row-body h3 + p { margin-top: var(--s4); }
.row-body .btns, .row-body .arrow { margin-top: var(--s5); }

.tag {
  display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--signal-text); background: var(--signal-soft);
  border: 1px solid var(--signal-line);
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: var(--s4);
}

/* Aufzählung ohne Kästen */
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.list li:last-child { border-bottom: 1px solid var(--line); }
.list b { display: block; font-family: var(--display); font-size: 1.12rem; letter-spacing: -.015em; }
.list p { color: var(--ink-2); margin-top: .3rem; font-size: .98rem; }

/* Nummerierte Schritte */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: st; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }
.steps li { counter-increment: st; padding: var(--s5) 0; border-top: 2px solid var(--line-2); position: relative; }
@media (max-width: 55.99rem) { .steps li:last-child { border-bottom: 2px solid var(--line-2); } }
.steps li::before {
  content: counter(st, decimal-leading-zero);
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  color: var(--signal-text); letter-spacing: .05em;
  display: block; margin-bottom: .55rem;
}
.steps b { display: block; font-family: var(--display); font-size: 1.1rem; letter-spacing: -.015em; }
.steps p { color: var(--ink-2); font-size: .95rem; margin-top: .35rem; }
.bg-night .steps li { border-top-color: oklch(0.40 0.02 62); }
.bg-night .steps li::before { color: var(--signal-on-dark); }
.bg-night .steps p { color: var(--on-night-2); }

/* --------------------------------------------------------------------------
   Laufbänder (Marken und Bewertungen), Richtung links nach rechts
   -------------------------------------------------------------------------- */
.marquee { position: relative; overflow: hidden; }
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 8vw, 7rem); z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--mq-fade, var(--paper)), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--mq-fade, var(--paper)), transparent); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group { display: flex; align-items: stretch; flex: none; }

/* Marken */
.brand-item {
  display: grid; place-items: center; padding: 0 clamp(1.5rem, 4vw, 3.25rem);
  font-family: var(--display); font-weight: 700; font-stretch: 82%;
  font-size: clamp(1.15rem, .95rem + .9vw, 1.7rem);
  letter-spacing: .01em; color: var(--ink-3); white-space: nowrap;
  transition: color .25s;
}
.brand-item:hover { color: var(--ink); }
.brands-note { font-size: .85rem; color: var(--ink-2); text-align: center; margin-top: var(--s5); }

/* Bewertungen */
.rev-item {
  flex: none; width: min(86vw, 23rem); margin-right: var(--s4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s5); display: flex; flex-direction: column;
}
.stars { display: flex; gap: .12rem; margin-bottom: .8rem; }
.stars svg { width: 1rem; height: 1rem; fill: var(--star); }
.rev-item p { font-size: .96rem; color: var(--ink-2); line-height: 1.6; flex: 1; }
.rev-meta { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.rev-meta b { font-family: var(--display); font-size: 1rem; letter-spacing: -.01em; display: block; }
.rev-meta span { font-size: .82rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Soforthelfer
   -------------------------------------------------------------------------- */
.helper {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r4);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); box-shadow: var(--shadow-1);
}
.helper-q { font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem); font-weight: 700; letter-spacing: -.02em; }
.helper-opts { display: grid; gap: .55rem; margin-top: var(--s5); }
@media (min-width: 46rem) { .helper-opts { grid-template-columns: repeat(2, 1fr); } }
.helper-opt {
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r2);
  padding: .95rem 1.1rem; min-height: 3.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.helper-opt::after { content: '\2192'; color: var(--ink-3); transition: transform .2s var(--ease), color .2s; }
.helper-opt:hover { border-color: var(--signal); background: var(--signal-soft); transform: translateX(3px); }
.helper-opt:hover::after { color: var(--signal-text); transform: translateX(.25rem); }

.helper-res { display: none; }
.helper-res.is-on { display: block; }
.helper-urg {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 999px;
  background: var(--signal-soft); color: var(--signal-text); border: 1px solid var(--signal-line);
}
.helper-urg[data-urg="Termin"] { background: var(--paper-2); color: var(--ink-2); border-color: var(--line); }
.helper-facts { display: grid; gap: 0; margin: var(--s5) 0; }
.helper-facts div { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.helper-facts div:last-child { border-bottom: 1px solid var(--line); }
.helper-facts dt { font-family: var(--display); font-weight: 700; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); min-width: 7rem; }
.helper-facts dd { margin: 0; color: var(--ink); flex: 1; min-width: 14rem; }
.helper-tips { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: .5rem; }
.helper-tips li { padding-left: 1.35rem; position: relative; color: var(--ink-2); font-size: .97rem; }
.helper-tips li::before { content: ''; position: absolute; left: 0; top: .62em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--signal); }
.helper-back { background: none; border: 0; padding: .4rem 0; font: inherit; font-size: .92rem; color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.helper-back:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s5) 3rem var(--s5) 0;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem);
  letter-spacing: -.015em; position: relative; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--signal-text); }
.faq summary::after {
  content: ''; position: absolute; right: .35rem; top: 50%; width: .82rem; height: .82rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq-a { padding: 0 0 var(--s5); color: var(--ink-2); max-width: 68ch; }
.faq-a p + p { margin-top: .8em; }
/* Der Abstand zur Kopfzeile beim Ankersprung kommt bereits ueber
   html { scroll-padding-top }. Hier nur ein kleiner zusaetzlicher Puffer,
   sonst landet das Ziel doppelt so weit unten. */
.faq-cat { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--signal-text); margin: var(--s7) 0 var(--s3); scroll-margin-top: .5rem; }

/* Sprungverzeichnis oben auf der FAQ-Seite */
.toc {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s5);
}
.toc h2 { font-size: 1.05rem; font-stretch: 100%; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--s4); }
.toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.toc a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .92rem; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  padding: .45rem .85rem; border-radius: 999px; min-height: 2.4rem;
  transition: border-color .2s, background-color .2s, color .2s;
}
.toc a:hover { border-color: var(--signal); background: var(--signal-soft); color: var(--signal-text); }
.toc a i { font-style: normal; font-family: var(--display); font-weight: 700; font-size: .78rem; color: var(--ink-3); }
.toc a:hover i { color: var(--signal-text); }

/* Aufklappbare Gruppen (Ortsteile, Navigation) */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--s5) 3rem var(--s5) 0;
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary b { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.acc summary em { font-style: normal; font-size: .88rem; color: var(--ink-3); }
.acc summary:hover b { color: var(--signal-text); }
.acc summary::after {
  content: ''; position: absolute; right: .35rem; top: 50%; width: .78rem; height: .78rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.acc details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.acc-body { padding: 0 0 var(--s5); color: var(--ink-2); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Karten mit Foto (Leistungsübersicht, Einsatzgebiet)
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: var(--s5); }
@media (min-width: 44rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r3);
  overflow: hidden; text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.card:hover .card-media img { transform: scale(1.045); }
.card-body { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: .5rem; }
.card-body p { font-size: .96rem; color: var(--ink-2); flex: 1; }
.card-body .arrow { margin-top: var(--s4); }

/* Ortsteile */
.places { display: grid; gap: 0; }
@media (min-width: 50rem) { .places { grid-template-columns: repeat(2, 1fr); column-gap: var(--s7); } }
.place { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.place b { font-family: var(--display); font-size: 1.2rem; letter-spacing: -.02em; display: block; }
.place p { color: var(--ink-2); font-size: .95rem; margin-top: .3rem; }

/* --------------------------------------------------------------------------
   Ortsliste und Referenzen
   -------------------------------------------------------------------------- */
/* Orte ohne Zeitangabe. Bewusst nur Text, damit die Liste auch bei dreissig
   Eintraegen ruhig bleibt. */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: .42rem .95rem; font-size: .92rem;
}

.refs { border-top: 1px solid var(--line); }
.ref { border-bottom: 1px solid var(--line); }
.ref summary {
  list-style: none; cursor: pointer; padding: var(--s5) 2.5rem var(--s5) 0;
  position: relative; display: block;
}
.ref summary::-webkit-details-marker { display: none; }
.ref-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.ref-head b { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.ref-meta { font-size: .88rem; color: var(--ink-3); }
.ref summary:hover b { color: var(--signal-text); }
.ref summary::after {
  content: ''; position: absolute; right: .4rem; top: 50%;
  width: .55rem; height: .55rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-75%) rotate(45deg); transition: transform .22s var(--ease);
}
.ref[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.ref-body { padding-bottom: var(--s6); display: grid; gap: var(--s5); }
@media (min-width: 44rem) { .ref-body { grid-template-columns: 15rem 1fr; gap: var(--s6); align-items: start; } }
.ref-shot {
  aspect-ratio: 4 / 3; border-radius: var(--r3);
  border: 1px dashed var(--line-2); background: var(--paper-2);
  display: grid; place-items: center;
}
.ref-shot span {
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.ref-text p { color: var(--ink-2); max-width: 62ch; }
.ref-note { margin-top: .8rem; font-size: .85rem; color: var(--ink-3); }

.times { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 44rem) { .times { grid-template-columns: repeat(2, 1fr); column-gap: var(--s7); } }
.times li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.times b { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
.times span { color: var(--ink-2); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Karte mit Einwilligung
   Vor dem Klick steht hier eine gezeichnete Platzhalterflaeche, kein Bild von
   Google. Nach dem Klick nimmt das iframe exakt denselben Platz ein, deshalb
   springt beim Laden nichts.
   -------------------------------------------------------------------------- */
.mapbox {
  margin: 0;
  border-radius: var(--r3);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.mapbox > iframe { display: block; width: 100%; height: clamp(19rem, 14rem + 18vw, 27rem); border: 0; }

.map-ph {
  position: relative;
  min-height: clamp(19rem, 14rem + 18vw, 27rem);
  display: grid; place-items: center;
  padding: var(--s6) var(--s5);
  background: var(--paper-2);
}
.map-ph-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.map-ph-art path { fill: none; stroke: var(--line-2); stroke-width: 1; }
.map-ph-art .map-ph-road { stroke: var(--signal-line); stroke-width: 5; stroke-linecap: round; }
.map-ph-art .map-ph-pin { fill: var(--signal); stroke: var(--card); stroke-width: 3; }

.map-ph-body {
  position: relative;
  max-width: 32rem; text-align: center;
  padding: var(--s5);
  background: color-mix(in oklch, var(--card) 92%, transparent);
  backdrop-filter: blur(3px);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  box-shadow: var(--shadow-1);
}
.map-ph-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.map-ph-note { margin-top: var(--s3); font-size: .92rem; color: var(--ink-2); }
.map-ph-body .btns { margin-top: var(--s5); justify-content: center; }
.map-ph-legal { margin-top: var(--s4); font-size: .82rem; color: var(--ink-3); }
.map-ph-legal a { color: var(--signal-text); }

.map-cap { margin-top: var(--s3); font-size: .87rem; color: var(--ink-2); }

.map-consent { margin-top: var(--s5); }
.map-consent p { font-size: .92rem; color: var(--ink-2); margin-bottom: var(--s3); }

/* --------------------------------------------------------------------------
   Preistabellen
   -------------------------------------------------------------------------- */
.price-block + .price-block { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.price-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 56rem) { .price-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s7); } }
.price-shot { border-radius: var(--r3); overflow: hidden; aspect-ratio: 4 / 3; }
@media (min-width: 56rem) { .price-shot { aspect-ratio: 3 / 4; position: sticky; top: calc(var(--head-h) + 1.5rem); } }
.price-shot img { width: 100%; height: 100%; object-fit: cover; }
.price-tab { width: 100%; border-collapse: collapse; }
.price-tab th { text-align: left; font-family: var(--display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-bottom: .6rem; border-bottom: 2px solid var(--line-2); font-weight: 700; }
.price-tab td { padding: .85rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Erste Spalte ist die Frage, zweite die Begruendung. Beide linksbuendig,
   damit lange Saetze nicht am rechten Rand kleben. */
.price-tab td:first-child { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; padding-right: 1.25rem; width: 42%; }
.price-tab td:last-child { color: var(--ink-2); font-size: .96rem; }
@media (max-width: 40rem) {
  .price-tab, .price-tab tbody, .price-tab tr, .price-tab td { display: block; width: auto; }
  .price-tab thead { display: none; }
  .price-tab tr { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .price-tab td { padding: 0; border: 0; }
  .price-tab td:first-child { width: auto; padding-right: 0; margin-bottom: .2rem; }
}
.price-note { font-size: .9rem; color: var(--ink-2); margin-top: var(--s4); }

/* --------------------------------------------------------------------------
   Bildergalerie auf Leistungsseiten
   -------------------------------------------------------------------------- */
.gal { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 56rem) { .gal { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.gal figure { margin: 0; border-radius: var(--r3); overflow: hidden; aspect-ratio: 4 / 3; }
.gal figure:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (min-width: 56rem) { .gal figure:first-child { grid-column: span 1; aspect-ratio: 4 / 3; } }
.gal img { width: 100%; height: 100%; object-fit: cover; }

/* Kopfbereich Unterseiten */
.phead { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.phead-grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: end; }
@media (min-width: 60rem) { .phead-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.phead-shot { border-radius: var(--r4); overflow: hidden; aspect-ratio: 3 / 2; box-shadow: var(--shadow-1); }
.phead-shot img { width: 100%; height: 100%; object-fit: cover; }

.crumbs { font-size: .85rem; color: var(--ink-3); margin-bottom: var(--s5); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .5rem; padding: 0; margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--line-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--signal-text); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Kontaktband und Fußzeile
   -------------------------------------------------------------------------- */
/* Das Abschlussband ist gruen, nicht dunkel. Wo ein Foto dahinterliegt, legt
   sich derselbe Gruenton als Schleier darueber. */
.band {
  position: relative; overflow: hidden; color: var(--on-band);
  background: linear-gradient(155deg, var(--band) 0%, var(--band-2) 100%);
}
.band-bg { position: absolute; inset: 0; }
.band-bg img { width: 100%; height: 100%; object-fit: cover; }
.band-bg::after { content: ''; position: absolute; inset: 0; background: oklch(0.365 0.100 158 / .90); }
.band-in { position: relative; z-index: 2; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.band h1, .band h2, .band h3, .band h4 { color: var(--on-band); }
.band h2 { max-width: 20ch; }
.band p, .band .lede { color: var(--on-band-2); }
.band .eyebrow { color: var(--on-band-2); }
.band .eyebrow::before { background: var(--on-band-2); }
.band .crumbs, .band .crumbs a { color: var(--on-band-2); }
.band .crumbs a:hover { color: var(--on-band); }
.band .crumbs li + li::before { color: oklch(0.70 0.05 155); }
.band .btn-ghost { border-color: oklch(0.72 0.06 155); color: var(--on-band); }
.band .btn-ghost:hover { border-color: var(--on-band); background: oklch(0.30 0.08 158); }
/* Auf Gruen wuerde das Rot flimmern, deshalb steht der Notruf hier weiss. */
.band .btn-call { background: var(--paper); color: var(--call-text); }
.band .btn-call:hover { background: var(--card); color: var(--call-hi); }

.phone-big {
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none;
  font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height: 1;
  color: var(--on-band);
}
.phone-big:hover { color: var(--paper); text-decoration: underline; }

/* Die Fusszeile steht auf hellem Papier. Nichts unterhalb des Inhalts ist
   dunkel, das war ausdruecklicher Wunsch. */
.foot {
  background: var(--paper-2); color: var(--ink-2);
  border-top: 4px solid var(--signal);
  padding-block: var(--s8) var(--s6);
}
.foot-grid { display: grid; gap: var(--s6); }
@media (min-width: 46rem) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s7); } }
.foot h2 { color: var(--signal-text); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: var(--s4); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.foot a { color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot address { font-style: normal; font-size: .95rem; line-height: 1.7; }
.foot .foot-phone { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--call-text); }
.foot .btn-call, .foot .btn-call:hover { color: var(--paper); }
.foot .btn-wa, .foot .btn-wa:hover { color: var(--paper); }
.foot-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--s5); }
.foot-brand .brand-logo { height: 3.1rem; }
/* ink-2, nicht ink-3: der kleine Grad auf der Papierflaeche reisst mit ink-3
   den Kontrast auf 4.23:1 und faellt damit unter die geforderten 4.5:1. */
.foot-area {
  margin-top: var(--s4); font-size: .82rem; line-height: 1.6; color: var(--ink-2);
  max-width: 34rem;
}
.foot-bottom {
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .85rem; color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Mobiler Aktionsbalken
   -------------------------------------------------------------------------- */
/* Zwei gleich grosse Aktionen, die den unteren Rand fuellen: Anrufen und
   WhatsApp. Klar, gross tippbar, ohne beengte Textzeile davor. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; gap: .55rem;
  padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(130%);
  transition: transform .38s var(--ease);
}
.callbar.is-on { transform: translateY(0); }
/* Bei offenem Menue faehrt der Balken weg, damit er die letzten Menuepunkte
   nicht verdeckt. Im Menue stehen dieselben beiden Aktionen ohnehin. */
body.nav-open .callbar { transform: translateY(130%); }
@media (min-width: 48rem) { .callbar { display: none; } }

.callbar a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em;
  border-radius: 999px; min-height: 3.25rem; padding: 0 .75rem;
}
.callbar .cb-call { background: var(--call); color: var(--paper); }
.callbar .cb-wa { background: var(--wa); color: var(--paper); }
.callbar a svg { width: 1.35rem; height: 1.35rem; fill: currentColor; flex: none; }
@media (max-width: 47.99rem) { body { padding-bottom: 4.9rem; } }

/* --------------------------------------------------------------------------
   Rechtstexte
   -------------------------------------------------------------------------- */
.legal h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); margin-top: var(--s7); margin-bottom: var(--s3); }
.legal h3 { font-size: 1.1rem; margin-top: var(--s5); margin-bottom: var(--s2); }
.legal p, .legal li { color: var(--ink-2); max-width: 72ch; }
.legal p + p { margin-top: .8em; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .35rem; margin-top: .6rem; }
.legal a { color: var(--signal-text); }

.note {
  border-left: 4px solid var(--signal); background: var(--signal-soft);
  padding: var(--s4) var(--s5); border-radius: 0 var(--r2) var(--r2) 0;
  font-size: .95rem; color: var(--ink-2);
}
.note b { color: var(--ink); }

/* --------------------------------------------------------------------------
   Bewegung
   -------------------------------------------------------------------------- */
[data-rise] { opacity: 0; }
.no-js [data-rise], .is-ready [data-rise] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rise] { opacity: 1 !important; transform: none !important; }
}

/* 404 */
.nf { text-align: center; padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.nf h1 { font-size: clamp(3rem, 2rem + 6vw, 6rem); }
.nf p { margin-inline: auto; margin-top: var(--s5); }
.nf .btns { justify-content: center; margin-top: var(--s6); }