/* ============================================================
   Folien & Werbedesign, Walsrode — ENTWURF
   Baukasten der AgentaVoice-Seiten (Tonal Layering, Bänder, weiche CTAs),
   umgesetzt in den Firmenfarben Schwarz / Weiß / Orange / Grau.
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  font-weight: 300 700;
  font-display: swap;
  src: url('schriften/space-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 200 800;
  font-display: swap;
  src: url('schriften/manrope-latin.woff2') format('woff2');
}

:root {
  /* Flächen: neutrales Schwarz bis Grau, ohne Blaustich */
  --bg: #050505;
  --surface: #0b0b0c;
  --surface-low: #141415;
  --surface-container: #1a1a1c;
  --surface-high: #29292c;

  /* Orange aus dem Logo (FWD-Netz.jpg gemessen: #ff8538) */
  --orange: #ff8538;
  --orange-hell: #ffa869;
  --orange-ghost: rgba(255, 133, 56, 0.10);
  --orange-ring: rgba(255, 133, 56, 0.38);

  --ink: #ffffff;
  --text: #e3e3e5;
  --text-leise: #b3b3b8;
  --linie: rgba(255, 255, 255, 0.06);
  --wa: #25d366;

  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --radius: 1rem;
  --radius-md: 1.5rem;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Große Bildschirme: Grundschrift wächst mit der Breite (16px bei 1440, ~18.5px bei 1920, max 20px),
   dadurch skalieren alle rem-Maße mit und die Seite füllt den Platz statt in der Mitte zu kleben. */
html { scroll-behavior: smooth; scroll-padding-top: 7rem; font-size: clamp(100%, 0.5rem + 0.55vw, 125%); }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-headline); font-weight: 600; line-height: 1.1; color: var(--ink); overflow-wrap: break-word; hyphens: auto; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: rgba(255, 133, 56, 0.3); color: #fff; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.container { width: min(96rem, 100% - clamp(2.5rem, 7vw, 10rem)); margin-inline: auto; }
.text-orange {
  background: linear-gradient(100deg, var(--orange) 0%, var(--orange-hell) 55%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Entwurfs-Hinweis ---------- */
.entwurf-hinweis {
  background: var(--orange); color: #1a0d00; font-size: 0.8rem; font-weight: 700;
  text-align: center; padding: 0.35rem 1rem;
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 5, 5, 0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--linie);
}
.nav__innen { display: flex; align-items: center; gap: 1.5rem; height: 6rem; }
.nav__logo img { height: 4.7rem; width: auto; }
.nav__liste { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin-left: auto; }
.nav__liste > li { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.8rem; border-radius: 0.6rem;
  font-size: 0.95rem; font-weight: 600; color: var(--text); background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav__link:hover, .nav__link[aria-current] { color: var(--orange); }
.nav__panel {
  position: absolute; top: 100%; left: 0; width: 23.5rem; padding: 0.5rem;
  background: var(--surface-low); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--linie), 0 24px 60px rgba(0,0,0,0.7);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.18s;
}
.nav__liste > li:hover .nav__panel, .nav__liste > li:focus-within .nav__panel { opacity: 1; visibility: visible; transform: none; }
.nav__panel a { display: flex; gap: 0.8rem; align-items: center; padding: 0.7rem 0.8rem; border-radius: 0.7rem; }
.nav__panel a:hover { background: var(--surface-high); }
.nav__panel .icon { color: var(--orange); width: 1.5rem; height: 1.5rem; }
.nav__panel strong { display: block; font-size: 0.95rem; color: var(--ink); }
.nav__panel span { font-size: 0.8rem; color: var(--text-leise); }
.nav__burger { display: none; margin-left: auto; background: none; border: 0; color: var(--ink); padding: 0.6rem; cursor: pointer; }
.nav__burger .icon { width: 1.7rem; height: 1.7rem; }

/* ---------- Buttons: weich (Orange ~10 % + Ring), ein kräftiger Haupt-CTA ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 0.97rem;
  background: var(--orange-ghost); color: var(--orange-hell);
  box-shadow: inset 0 0 0 1px var(--orange-ring); transition: 0.2s; white-space: nowrap;
}
.btn:hover { background: rgba(255, 133, 56, 0.18); box-shadow: inset 0 0 0 1px var(--orange), 0 0 24px rgba(255, 133, 56, 0.25); }
.btn--voll { background: var(--orange); color: #1a0d00; box-shadow: 0 0 24px rgba(255, 133, 56, 0.3); }
.btn--voll:hover { background: var(--orange-hell); box-shadow: 0 0 34px rgba(255, 133, 56, 0.5); }
.btn--leise { background: rgba(255,255,255,0.05); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.btn--leise:hover { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.btn--klein { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

/* ---------- Sektionen und Bänder ---------- */
.sektion { padding: clamp(4rem, 9vw, 7rem) 0; position: relative; }
/* Band: beleuchtete Grau-Fläche statt Dauer-Schwarz, Licht-Hairlines oben und unten */
.sektion--band {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255, 133, 56, 0.07), transparent 70%),
    linear-gradient(180deg, #161617 0%, #101011 100%);
}
.sektion--band::before, .sektion--band::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 133, 56, 0.45) 50%, transparent);
}
.sektion--band::before { top: 0; }
.sektion--band::after { bottom: 0; opacity: 0.4; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange);
}
.eyebrow::before { content: ''; width: 1.6rem; height: 2px; background: var(--orange); border-radius: 2px; }
.kopf { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.kopf h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-top: 0.9rem; letter-spacing: -0.02em; }
/* Eigene Seite mit dem Kopf als Hauptüberschrift (Referenzen, 14.10.2026) */
.kopf h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); margin-top: 0.9rem; letter-spacing: -0.02em; }
.kopf p { margin-top: 1rem; font-size: 1.08rem; color: var(--text-leise); }
.kopf--mitte { margin-inline: auto; text-align: center; }
/* Breiter Kopf für längere Einleitungen: Überschrift bleibt am PC einzeilig */
.kopf--breit { max-width: none; }
.kopf--breit h2 { font-size: clamp(1.9rem, 3.3vw, 2.6rem); }
.kopf--breit p { max-width: 62rem; }

/* ---------- Hero ---------- */
.hero { padding: clamp(2rem, 3vw, 3rem) 0 clamp(2rem, 2.6vw, 2.6rem); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto auto; width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(closest-side, rgba(255, 133, 56, 0.16), transparent); pointer-events: none;
}
.hero__raster { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 5rem); letter-spacing: -0.03em; margin-top: 1.1rem; }
.hero__lead { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-leise); max-width: 34rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }
.hero__belege { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.5rem; list-style: none; font-size: 0.92rem; color: var(--text); }
.hero__belege li { display: flex; align-items: center; gap: 0.45rem; }
.hero__belege .icon { color: var(--orange); }
.hero__bild { position: relative; }
.hero__bild > img:not(.hero__siegel) { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 12% center; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--linie), 0 40px 90px rgba(0,0,0,0.8); }
/* Kopfbild im Format 5:4 (Fahrzeug von vorn, braucht Höhe). Auf niedrigen Bildschirmen wird das Bild
   schmaler statt beschnitten, das Fahrzeug bleibt immer ganz zu sehen. */
.hero__bild--hoch > img:not(.hero__siegel) { aspect-ratio: 5 / 4; object-position: center; width: min(100%, calc((100svh - 9rem) * 1.25)); margin-inline: auto; }
.hero__siegel { position: absolute; left: -1.5rem; bottom: -1.5rem; width: clamp(96px, 12vw, 11rem); filter: drop-shadow(0 12px 30px rgba(0,0,0,0.8)); }
/* Google-Bewertung: kleine einzeilige Pille, nur ein Bildhinweis */
.hero__google {
  position: absolute; right: 0.9rem; top: 0.9rem; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.28rem 0.85rem; border-radius: 999px; background: rgba(10,10,10,0.72); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); font-size: 0.8rem; line-height: 1.5; white-space: nowrap; color: var(--ink);
}
.hero__google strong { font-family: var(--font-headline); font-size: 0.95rem; color: var(--ink); }
.hero__google br { display: none; }
.hero__google .sterne { margin-right: 0.3rem; letter-spacing: 0.05em; }
/* Handy: Bild ist zu klein, die Pille würde die Beschriftung verdecken. Deshalb rechts unter das Bild. */
@media (max-width: 560px) {
  .hero__bild { margin-bottom: 2.6rem; }
  .hero__google { top: calc(100% + 0.6rem); right: 0; gap: 0.4rem; padding: 0.22rem 0.7rem; background: rgba(255,255,255,0.04); backdrop-filter: none; font-size: 0.75rem; }
  .hero__google strong { font-size: 0.85rem; }
}
.sterne { color: var(--orange); letter-spacing: 0.1em; }

/* ---------- Zahlen ---------- */
/* Ein Banner mit Tiefe: Verlauf-Rahmen (echter border + background-clip), Lichtkante oben,
   leicht gewölbte Fläche, Schlagschatten und ein orange Lichtschein darunter. */
.zahlen {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255, 133, 56, 0.10), transparent 60%) padding-box,
    linear-gradient(180deg, #232326 0%, #171719 45%, #101011 100%) padding-box,
    linear-gradient(160deg, rgba(255, 168, 105, 0.75) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 133, 56, 0.45) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -18px 30px -18px rgba(0, 0, 0, 0.7),
    0 2px 0 rgba(0, 0, 0, 0.9),
    0 30px 60px -20px rgba(0, 0, 0, 0.95),
    0 40px 90px -30px rgba(255, 133, 56, 0.30);
}
/* Lichtschein unter dem Banner, als läge er leicht über der Seite */
.zahlen::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 133, 56, 0.9) 50%, transparent);
}
.zahlen div { position: relative; padding: clamp(1.25rem, 1.5vw, 1.5rem) 1rem; text-align: center; }
/* Trennlinien: senkrechte Hairline mit hellem Kern, oben und unten auslaufend */
.zahlen div + div::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.16) 30%, rgba(255, 133, 56, 0.45) 50%, rgba(255, 255, 255, 0.16) 70%, transparent);
}
.zahlen strong {
  display: block; font-family: var(--font-headline); font-size: clamp(1.9rem, 2.6vw, 2.45rem); font-weight: 600; line-height: 1;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(255, 133, 56, 0.35));
}
.zahlen strong.text-orange { background-image: linear-gradient(180deg, #ffc396 0%, var(--orange) 55%, #e8691c 100%); }
.zahlen div > span { display: block; margin-top: 0.4rem; font-size: clamp(0.9rem, 0.9vw, 0.95rem); font-weight: 600; color: var(--text); }

/* ---------- Leistungs-Karten ---------- */
.leistungen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; }
.leistung {
  grid-column: span 2; display: flex; flex-direction: column; background: var(--surface-low); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: 0 0 0 1px var(--linie); transition: 0.3s;
}
.leistung:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--orange-ring), 0 24px 60px rgba(0,0,0,0.6); }
.leistung__bild { aspect-ratio: 16 / 9; overflow: hidden; }
.leistung__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.leistung:hover img { transform: scale(1.04); }
.leistung__text { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.leistung__icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 0.8rem; background: var(--orange-ghost); color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange-ring); margin-top: -2.75rem; position: relative; backdrop-filter: blur(10px); background-color: rgba(20,20,21,0.85); }
.leistung__icon .icon { width: 1.4rem; height: 1.4rem; }
.leistung h3 { font-size: 1.3rem; margin-top: 1rem; }
.leistung p { margin-top: 0.5rem; font-size: 0.95rem; color: var(--text-leise); flex: 1; }
.pfeil-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem; font-weight: 700; font-size: 0.92rem; color: var(--orange-hell); }
.pfeil-link .icon { transition: transform 0.2s; }
a:hover .pfeil-link .icon, .pfeil-link:hover .icon { transform: translateX(4px); }

/* ---------- Galerie ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.filter button {
  font: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.04); color: var(--text); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.filter button[aria-pressed='true'] { background: var(--orange-ghost); color: var(--orange-hell); box-shadow: inset 0 0 0 1px var(--orange-ring); }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 17vw, 21rem); gap: 0.8rem; grid-auto-flow: dense; }
.galerie figure { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-low); }
.galerie figure.breit { grid-column: span 2; }
.galerie figure.hoch { grid-row: span 2; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.galerie figure:hover img { transform: scale(1.05); }
.galerie figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2rem 0.9rem 0.7rem; font-size: 0.82rem; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
}
.galerie figure[hidden] { display: none; }
/* Handy: Kacheln sind klein, der Zusatz der Bildunterschrift würde das Foto verdecken */
@media (max-width: 560px) { .galerie figcaption .zusatz { display: none; } }

/* ---------- Warum / Inhaber ---------- */
.zweispalter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.gruende { display: grid; gap: 0.9rem; list-style: none; }
.gruende li { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; background: var(--surface-low); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--linie); }
.gruende .icon { color: var(--orange); width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; }
.gruende strong { display: block; color: var(--ink); font-family: var(--font-headline); font-size: 1.05rem; }
.gruende span { font-size: 0.93rem; color: var(--text-leise); }
.portraet { position: relative; }
.portraet img { border-radius: var(--radius-md); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 0 0 1px var(--linie); }
.zitat { margin-top: 1.4rem; padding-left: 1.2rem; border-left: 2px solid var(--orange); font-size: 1.1rem; color: var(--text); }
.zitat cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.88rem; color: var(--text-leise); }

/* ---------- Ablauf ---------- */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: schritt; list-style: none; }
.ablauf li { counter-increment: schritt; background: var(--surface-low); border-radius: var(--radius-md); padding: 1.6rem 1.4rem; box-shadow: 0 0 0 1px var(--linie); position: relative; }
.ablauf li::before { content: '0' counter(schritt); font-family: var(--font-headline); font-size: 2.4rem; font-weight: 600; color: transparent; -webkit-text-stroke: 1px var(--orange); line-height: 1; }
.ablauf h3 { font-size: 1.15rem; margin-top: 1rem; }
.ablauf p { margin-top: 0.5rem; font-size: 0.93rem; color: var(--text-leise); }

/* ---------- Bewertungen ---------- */
.bewertung { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; background: var(--surface-low); border-radius: var(--radius-md); padding: clamp(1.6rem, 4vw, 2.8rem); box-shadow: 0 0 0 1px var(--linie); }
.bewertung__zahl { text-align: center; }
.bewertung__zahl strong { display: block; font-family: var(--font-headline); font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: 1; color: var(--ink); }
.bewertung__zahl .sterne { font-size: 1.5rem; }
.bewertung__zahl small { display: block; color: var(--text-leise); margin-top: 0.3rem; }
.platzhalter { border: 1px dashed rgba(255, 133, 56, 0.5); border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--text-leise); font-size: 0.92rem; margin-top: 1rem; }
.platzhalter b { color: var(--orange-hell); }

/* ---------- FAQ ---------- */
.faq { max-width: 50rem; margin-inline: auto; display: grid; gap: 0.7rem; }
.faq details { background: var(--surface-low); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--linie); }
.faq details[open] { box-shadow: 0 0 0 1px var(--orange-ring); }
.faq summary { list-style: none; cursor: pointer; padding: 1.15rem 1.3rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--font-headline); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--orange); transition: transform 0.25s; }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { padding: 0 1.3rem 1.3rem; color: var(--text-leise); }

/* ---------- Kontakt ---------- */
.kontakt-wege { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.kontakt-weg { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.2rem; background: var(--surface-low); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--linie); transition: 0.2s; }
.kontakt-weg:hover { box-shadow: 0 0 0 1px var(--orange-ring); background: var(--surface-container); }
.kontakt-weg .icon { width: 1.6rem; height: 1.6rem; color: var(--orange); }
.kontakt-weg--wa .icon { color: var(--wa); }
.kontakt-weg small { display: block; font-size: 0.8rem; color: var(--text-leise); }
.kontakt-weg strong { color: var(--ink); font-size: 1.02rem; overflow-wrap: anywhere; }
.fakten { list-style: none; display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.fakten li { display: flex; gap: 0.8rem; color: var(--text); }
.fakten .icon { color: var(--orange); margin-top: 0.2rem; }

/* ---------- Unterseite ---------- */
.brotkrumen { font-size: 0.85rem; color: var(--text-leise); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.brotkrumen a:hover { color: var(--orange); }
.varianten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.varianten--zwei { grid-template-columns: repeat(2, 1fr); }
.variante { background: var(--surface-low); border-radius: var(--radius-md); padding: 1.6rem 1.5rem; box-shadow: 0 0 0 1px var(--linie); }
.variante .icon { width: 1.8rem; height: 1.8rem; color: var(--orange); }
.variante h3 { font-size: 1.2rem; margin-top: 0.9rem; }
.variante p { margin-top: 0.5rem; font-size: 0.95rem; color: var(--text-leise); }
/* Vor-Ort-Karte (Startseite, Ende Leistungen): hervorgehoben mit orangem Ring */
.vorort { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.4rem, 4vw, 2.8rem); border-radius: var(--radius-md); background: radial-gradient(120% 140% at 0% 0%, rgba(255,133,56,0.10), transparent 55%), var(--surface-low); box-shadow: 0 0 0 1px var(--orange-ring); }
.vorort h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: 0.9rem; letter-spacing: -0.02em; }
.vorort__text p { margin-top: 1rem; color: var(--text-leise); font-size: 1.05rem; }
.vorort__text .vorort__bedingung { font-size: 0.93rem; padding-left: 0.9rem; border-left: 2px solid var(--orange-ring); }
.vorort .gruende li { background: var(--surface); }
@media (max-width: 860px) { .vorort { grid-template-columns: 1fr; } }
/* Einzelstück-Block (Folierung): Liebhaber-Projekte dezent unter der Galerie */
.einzelstueck { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; background: var(--surface-low); border-radius: var(--radius-md); padding: clamp(1rem, 2.5vw, 1.6rem); box-shadow: 0 0 0 1px var(--linie); }
.einzelstueck__bilder { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.6rem; aspect-ratio: 16 / 11; }
.einzelstueck__bilder img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius); }
.einzelstueck__haupt { grid-row: span 2; }
.einzelstueck__text { padding: clamp(0.4rem, 2vw, 1.4rem) clamp(0.4rem, 2vw, 1.4rem) clamp(0.4rem, 2vw, 1.4rem) 0; }
.einzelstueck__text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 0.9rem; letter-spacing: -0.02em; }
.einzelstueck__text p { margin-top: 1rem; color: var(--text-leise); }
@media (max-width: 760px) { .einzelstueck { grid-template-columns: 1fr; } .einzelstueck__text { padding: 0 0.4rem 0.6rem; } }
.querverweis { margin-top: 1.6rem; color: var(--text-leise); font-size: 0.95rem; }
.querverweis a { font-weight: 700; color: var(--orange-hell); }
.querverweis a .icon { width: 1em; height: 1em; margin-left: 0.3rem; vertical-align: -0.15em; transition: transform 0.2s; }
.querverweis a:hover .icon { transform: translateX(4px); }
.querlinks { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.abschluss { text-align: center; }
.abschluss h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -0.02em; }
.abschluss p { color: var(--text-leise); max-width: 36rem; margin: 1rem auto 0; }
.abschluss .hero__ctas { justify-content: center; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--linie); padding: 3.5rem 0 3.5rem; background: var(--surface); font-size: 0.93rem; }
.footer__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer img { height: 3.6rem; width: auto; }
.footer h3 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.9rem; font-family: var(--font-body); font-weight: 700; }
.footer ul { list-style: none; display: grid; gap: 0.5rem; color: var(--text-leise); }
.footer a:hover { color: var(--orange); }
/* Dezenter Hinweis auf den Ersteller der Seite */
.gebaut-von { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-leise); font-size: 0.8rem; opacity: 0.75; transition: opacity 0.2s; }
.footer .gebaut-von:hover, .footer .gebaut-von:focus-visible { opacity: 1; color: #fff; }
.footer .gebaut-von img { width: 1.5rem; height: 1.5rem; filter: grayscale(1) brightness(1.5); transition: filter 0.25s; }
.gebaut-von:hover img, .gebaut-von:focus-visible img { filter: none; }
@media (prefers-reduced-motion: reduce) { .gebaut-von, .gebaut-von img { transition: none; } }
.footer__unten { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); color: var(--text-leise); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.social { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.social a { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.social a:hover { background: var(--orange-ghost); box-shadow: inset 0 0 0 1px var(--orange-ring); }

/* ---------- Mobile Schnellkontakt-Leiste ---------- */
.schnellkontakt { display: none; }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 960px) {
  .nav__burger { display: block; }
  .nav__liste {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--surface); padding: 0.8rem 1.25rem 1.4rem; border-bottom: 1px solid var(--linie); max-height: calc(100vh - 6rem); overflow-y: auto;
  }
  .nav.is-offen .nav__liste { display: flex; }
  .nav__panel { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: none; padding: 0 0 0.5rem 0.4rem; }
  .nav__liste .btn { margin-top: 0.8rem; }
  .hero__raster, .zweispalter { grid-template-columns: 1fr; }
  .hero__siegel { left: 0.8rem; bottom: -1.2rem; }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .zahlen div:nth-child(odd)::before { display: none; }
  .zahlen div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .leistung { grid-column: span 3; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .ablauf { grid-template-columns: repeat(2, 1fr); }
  .varianten, .varianten--zwei { grid-template-columns: 1fr; }
  .bewertung { grid-template-columns: 1fr; }
  .footer__raster { grid-template-columns: 1fr 1fr; }
  .schnellkontakt {
    display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; inset: auto 0 0 0; z-index: 40;
    background: rgba(10,10,10,0.94); backdrop-filter: blur(16px); border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .schnellkontakt a { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.65rem 0.3rem; font-size: 0.75rem; font-weight: 700; color: var(--text); }
  .schnellkontakt .icon { width: 1.4rem; height: 1.4rem; color: var(--orange); }
  .schnellkontakt a:nth-child(2) .icon { color: var(--wa); }
}
@media (max-width: 560px) {
  .ablauf, .kontakt-wege, .footer__raster { grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; }
}

/* ---------- Kundenstimmen im Google-Aufbau (Summe links, Karten-Laufband rechts) ---------- */
.eyebrow--pille { padding: 0.45rem 1.1rem; border-radius: 999px; background: var(--orange-ghost); }
.eyebrow--pille::before { display: none; }
.gsterne { color: #fbbc04; letter-spacing: 0.06em; font-size: 1.25rem; line-height: 1; }
.gsterne--gross { display: inline-block; font-size: 2.4rem; background: linear-gradient(90deg, #fbbc04 var(--wert, 100%), #4a4a4e var(--wert, 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stimmen { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.stimmen__summe { text-align: center; }
.stimmen__summe strong { display: block; font-family: var(--font-headline); font-size: 1.5rem; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 0.5rem; }
.stimmen__summe p { margin: 0.5rem 0 0.4rem; font-size: 0.98rem; }
.stimmen__summe b { color: var(--ink); }
.google-wort { font-family: Arial, Helvetica, sans-serif; font-size: 2.1rem; font-weight: 500; letter-spacing: -0.03em; }
.google-wort i { font-style: normal; }
.google-wort i:nth-child(1), .google-wort i:nth-child(4) { color: #4285f4; }
.google-wort i:nth-child(2), .google-wort i:nth-child(6) { color: #ea4335; }
.google-wort i:nth-child(3) { color: #fbbc05; }
.google-wort i:nth-child(5) { color: #34a853; }
.stimmen__buehne { position: relative; min-width: 0; }
.stimmen__spur { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.4rem 0.2rem; }
.stimmen__spur::-webkit-scrollbar { display: none; }
.stimme { flex: 0 0 calc((100% - 3.3rem) / 3.3); scroll-snap-align: start; background: var(--surface-low); border-radius: 0.9rem; padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 0 0 1px var(--linie), 0 12px 30px rgba(0,0,0,0.5); min-height: 15.5rem; }
.stimme header { display: flex; align-items: center; gap: 0.8rem; }
.stimme header div { flex: 1; min-width: 0; }
.stimme header strong { display: block; color: var(--ink); font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stimme header small { color: var(--text-leise); font-size: 0.88rem; }
.stimme__avatar { width: 2.8rem; height: 2.8rem; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.3rem; font-family: Arial, sans-serif; }
.g-logo { width: 1.5rem; height: 1.5rem; flex: none; align-self: flex-start; }
.stimme__sterne { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0.6rem; }
.geprueft { width: 1.15rem; height: 1.15rem; }
.stimme__text { color: var(--text); font-size: 0.98rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.stimme.is-offen .stimme__text { -webkit-line-clamp: unset; line-clamp: unset; }
.stimme__mehr { margin-top: 0.6rem; background: none; border: 0; padding: 0; font: inherit; font-size: 0.9rem; color: var(--text-leise); cursor: pointer; }
.stimme__mehr:hover { color: var(--orange-hell); }
.stimmen__pfeil { position: absolute; top: 50%; z-index: 2; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--surface-high); color: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.6); }
.stimmen__pfeil:hover { background: var(--orange); color: #1a0d00; }
.stimmen__pfeil--links { left: -1.3rem; transform: translateY(-50%) rotate(90deg); }
.stimmen__pfeil--rechts { right: -1.3rem; transform: translateY(-50%) rotate(-90deg); }
.stimmen__link { display: flex; width: max-content; margin: 2.5rem auto 0; align-items: center; gap: 0.6rem; }
.stimmen__link .g-logo { width: 2.6rem; height: 2.6rem; align-self: center; }
@media (max-width: 960px) {
  .stimmen { grid-template-columns: 1fr; gap: 1.8rem; }
  .stimme { flex-basis: calc((100% - 1.1rem) / 2); }
  .stimmen__pfeil--links { left: -0.6rem; }
  .stimmen__pfeil--rechts { right: -0.6rem; }
}
@media (max-width: 560px) { .stimme { flex-basis: 88%; } }
@media (max-width: 560px) { .stimmen__pfeil { display: none; } }
@media (max-width: 560px) { .nav__innen { height: 5rem; } .nav__logo img { height: 3.8rem; } }
/* Lange Wörter (Fahrzeugbeschriftung, Schaufensterbeschriftung) dürfen schmale Spalten nicht aufdrücken */
.hero__raster > *, .zweispalter > *, .leistung__text { min-width: 0; }
@media (max-width: 560px) { .hero h1 { font-size: clamp(1.9rem, 9.5vw, 2.5rem); } .hero__ctas .btn { white-space: normal; text-align: center; } }
.hero h1 .text-orange { display: inline-block; }

/* ---------- Vorher / Nachher ---------- */
.vorher-nachher { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(0.8rem, 2vw, 1.8rem); align-items: center; }
.vorher-nachher figure { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 1px var(--linie), 0 30px 60px -20px rgba(0,0,0,0.9); }
.vorher-nachher figure.ist-nachher { box-shadow: 0 0 0 1px var(--orange-ring), 0 30px 60px -20px rgba(0,0,0,0.9), 0 30px 80px -30px rgba(255, 133, 56, 0.35); }
.vorher-nachher img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.vorher-nachher figcaption { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 0.8rem; padding: 2.5rem 1.1rem 1rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.88)); }
.vn-marke { padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.ist-nachher .vn-marke { background: var(--orange); color: #1a0d00; box-shadow: none; }
.vn-pfeil { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; color: var(--orange); background: var(--orange-ghost); box-shadow: inset 0 0 0 1px var(--orange-ring); }
.vn-pfeil .icon { width: 1.5rem; height: 1.5rem; }
@media (max-width: 760px) {
  .vorher-nachher { grid-template-columns: 1fr; justify-items: center; }
  .vorher-nachher figure { width: 100%; }
  .vn-pfeil { transform: rotate(90deg); }
}
/* Bildausschnitte: Hochformat-Fotos in Querformat-Kacheln auf das Motiv rücken */
.galerie figure:not(.hoch) img[src*="sch-autobahn"] { object-position: center 24%; }
/* Ganzes Schild zeigen statt anschneiden */
.galerie img[src*="sch-spielplatz"] { object-fit: contain; padding: 0.6rem 0.6rem 2.4rem; }

/* ---------- Rechtliche Seiten ---------- */
.rechtstext { max-width: 52rem; }
.rechtstext h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; margin: 1rem 0 1.5rem; }
.rechtstext h2 { font-size: 1.3rem; margin: 2.2rem 0 0.6rem; }
.rechtstext p { color: var(--text); margin-bottom: 0.8rem; }
.rechtstext a { color: var(--orange-hell); text-decoration: underline; text-underline-offset: 3px; }
.rechtstext .brotkrumen a { color: inherit; text-decoration: none; }
/* Menü mit sieben Punkten: bei schmalen Laptops enger setzen, nie umbrechen */
.nav__link { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1100px) { .nav__link { padding: 0.6rem 0.45rem; font-size: 0.9rem; } .nav__innen { gap: 0.8rem; } .nav__logo img { height: 4rem; } }

/* ---------- Fachtexte auf den Leistungsseiten ---------- */
.wissen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.wissen article { background: var(--surface-low); border-radius: var(--radius-md); padding: 1.7rem 1.6rem; box-shadow: 0 0 0 1px var(--linie); border-left: 2px solid var(--orange-ring); }
.wissen h3 { font-size: 1.25rem; }
.wissen p { margin-top: 0.7rem; color: var(--text); font-size: 1rem; line-height: 1.7; }
.begriffe { margin-top: 2.2rem; }
.begriffe h3 { font-size: 0.8rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.begriffe ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.begriffe li { padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
@media (max-width: 760px) { .wissen { grid-template-columns: 1fr; } }
.abschluss p.orte { font-size: 0.95rem; max-width: 46rem; }
.abschluss p.orte .icon { color: var(--orange); display: inline-block; vertical-align: -0.2em; margin-right: 0.4rem; }
.faq details { min-width: 0; }
.faq summary, .faq details p { overflow-wrap: anywhere; hyphens: auto; }

/* ---------- Feinschliff Handy (01.10.2026) ---------- */
/* Kopfzeile klar vom Inhalt und vom aufgeklappten Menü trennen: feine helle Hairline, kein Orange */
.nav { border-bottom-color: rgba(255, 255, 255, 0.13); }
.eyebrow__zusatz { white-space: nowrap; }
@media (max-width: 960px) {
  .nav.is-offen .nav__liste { border-top: 1px solid rgba(255, 255, 255, 0.13); }
  .nav__liste > li + li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .nav__liste > li:last-child { border-top: 0; }
}
@media (max-width: 560px) {
  .hero .eyebrow { align-items: flex-start; }
  .hero .eyebrow::before { margin-top: 0.62em; }
  .eyebrow__punkt { display: none; }
  .eyebrow__zusatz { display: block; }
}

/* ---------- Inhaber-Sektion: Zitatkarte statt Fahrzeugfoto ---------- */
/* Am PC steht die Karte links (order), am Handy kommt zuerst die Überschrift, dann die Gründe, dann das Zitat. */
.zitatkarte {
  order: -1; position: relative; overflow: hidden; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(7rem, 12vw, 10rem);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background:
    radial-gradient(90% 70% at 100% 100%, rgba(255, 133, 56, 0.16), transparent 65%) padding-box,
    linear-gradient(160deg, #222225 0%, #141415 55%, #0d0d0e 100%) padding-box,
    linear-gradient(160deg, rgba(255, 168, 105, 0.7) 0%, rgba(255, 255, 255, 0.12) 35%, rgba(255, 255, 255, 0.04) 65%, rgba(255, 133, 56, 0.4) 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.95);
}
.zitatkarte__marke { width: clamp(2.6rem, 4vw, 3.6rem); fill: var(--orange); opacity: 0.9; }
.zitatkarte blockquote { margin-top: 1.4rem; font-family: var(--font-headline); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.35rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); max-width: 20ch; }
.zitatkarte figcaption { margin-top: 1.6rem; padding-left: 1rem; border-left: 2px solid var(--orange); }
.zitatkarte figcaption strong { display: block; color: var(--ink); font-size: 1.05rem; }
.zitatkarte figcaption span { font-size: 0.9rem; color: var(--text-leise); }
.zitatkarte__siegel { position: absolute; right: clamp(1rem, 2.5vw, 2.2rem); bottom: clamp(1rem, 2.5vw, 2.2rem); width: clamp(6.5rem, 11vw, 10.5rem); transform: rotate(-8deg); filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.8)); }
@media (max-width: 960px) {
  .zitatkarte { order: 0; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
  .zitatkarte blockquote { max-width: none; padding-right: 0; }
  .zitatkarte figcaption { padding-right: 7.5rem; }
  .zitatkarte__siegel { width: 6.5rem; }
}

/* Startseite: Die kleine Zeile mit Suchbegriff und Ort gehört zur H1, sieht aber aus wie bisher */
.hero h1 { margin-top: 0; }
.hero h1 .eyebrow { font-family: var(--font-body); line-height: 1.6; hyphens: manual; }
.hero h1 .h1-haupt { display: block; margin-top: 1.1rem; }
/* Lange Kopfzeile der Startseite: kleiner, damit „Außendarstellung“ in die Spalte passt */
/* Schriftgröße folgt der Spaltenbreite (cqw), damit „Ihre Außendarstellung“ bei jeder Breite in eine Zeile passt */
.hero__raster > div:first-child { container-type: inline-size; }
/* Gilt für Startseite und Unterseiten gleich, damit alle Hauptüberschriften dieselbe Größe haben */
.hero h1, .hero h1 .h1-haupt--lang { font-size: clamp(1.25rem, 8.2cqw, 3.4rem); }
.hero__belege { flex-direction: column; gap: 0.45rem; }
/* Sehr langes Wort in der Überschrift (Schaufensterbeschriftung): etwas kleiner, damit es nicht mitten im Wort umbricht */
.hero h1.h1--eng { font-size: clamp(1.25rem, 8.2cqw, 3.4rem); }
.hero .brotkrumen + h1 { margin-top: 1.1rem; }
/* Sechs Leistungskarten: 3 x 2 am PC, 2 x 3 am Tablet, einspaltig am Handy */
@media (max-width: 700px) { .leistung { grid-column: span 6; } }

/* ---------- Auftakt: erster Bildschirm ohne Anschnitt der nächsten Sektion ---------- */
/* Am PC füllen Hero und Zahlenband zusammen die Höhe unter der Kopfzeile. Der freie Platz
   verteilt sich um Text und Bild, das Zahlenband schließt den Bildschirm unten ab. */
@media (min-width: 961px) {
  .auftakt { min-height: calc(100svh - 6rem - 1px); display: flex; flex-direction: column; }
  /* Freier Platz: ein Drittel über, zwei Drittel unter dem Block, damit er nicht zu tief hängt.
     Text und Bild schließen unten auf einer Linie ab, der Text darf oben früher beginnen. */
  .auftakt .hero { flex: 1; display: grid; grid-template-columns: 100%; grid-template-rows: 1fr auto 2fr; }
  .auftakt .hero > .container { grid-row: 2; }
  .auftakt .hero__raster { align-items: end; }
  /* Siegel hängt weniger weit über, damit es nicht ans Zahlenband stößt */
  .auftakt .hero__siegel { bottom: -0.6rem; }
  .auftakt > section:last-child { padding-bottom: clamp(1rem, 3.2vh, 3.5rem); }
  /* Niedrige Bildschirme (Laptop): Abstände geben nach, damit das Zahlenband noch ganz zu sehen ist */
  .auftakt .hero { padding: clamp(1rem, 4vh, 3rem) 0 clamp(1.4rem, 3vh, 2.6rem); }
  .auftakt .hero h1 .h1-haupt { margin-top: min(1.1rem, 2.2vh); }
  .auftakt .hero__lead { margin-top: min(1.4rem, 2.6vh); }
  .auftakt .hero__ctas { margin-top: min(1.7rem, 3vh); }
  .auftakt .hero__belege { margin-top: min(1.5rem, 2.6vh); flex-direction: column; gap: min(0.45rem, 1vh); }
  .auftakt .zahlen div { padding-block: min(clamp(1rem, 1.5vw, 1.5rem), 2.2vh); }
  /* Eine Regel für alle Hauptüberschriften (Startseite und Leistungsseiten): gleiche Größe bei gleichem Fenster */
  .hero h1, .hero h1 .h1-haupt--lang, .hero h1.h1--eng { font-size: clamp(1.25rem, min(8.2cqw, 6.8vh), 3.4rem); }
  /* Leistungsseiten: Kopfbereich füllt den ersten Bildschirm, die nächste Sektion erscheint erst beim Scrollen */
  .hero--start { min-height: calc(100svh - 6rem - 1px); display: grid; grid-template-columns: 100%; grid-template-rows: 1fr auto 1.5fr; padding: clamp(1rem, 4vh, 3rem) 0; }
  .hero--start > .container { grid-row: 2; }
  /* Text steht mittig zum Bild (09.10.2026), vorher unten buendig */
  .hero--start .hero__raster { align-items: center; }
}
/* Laptop-Höhe: Zahl und Beschriftung nebeneinander, das Band wird flach und bleibt im ersten Bildschirm */
@media (min-width: 961px) and (max-height: 820px) {
  .auftakt .hero { padding: clamp(0.75rem, 3vh, 3rem) 0 clamp(1.4rem, 2.6vh, 2.6rem); }
  .auftakt .zahlen div { display: flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.9rem 0.8rem; text-align: left; }
  .auftakt .zahlen strong { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
  .auftakt .zahlen div > span { margin-top: 0; font-size: 0.9rem; line-height: 1.25; }
}

/* Tablet hochkant: Kopfbereich der Leistungsseiten ebenfalls auf volle Bildschirmhöhe */
@media (min-width: 561px) and (max-width: 960px) { .hero--start { min-height: calc(100svh - 6rem - 1px); } }

/* Ab Tablet-Breite keine automatische Silbentrennung in Überschriften („wol-len“), nur auf dem Handy bleibt sie als Notlösung */
@media (min-width: 561px) { h1, h2 { hyphens: manual; } }

/* Zwei Absätze im Kopf (Seite Teil- und Vollfolierung): enger zusammen */
.hero__lead + .hero__lead { margin-top: 0.6rem; }
/* Leistungsseiten auf Laptop-Höhe: Abstände und Fließtext geben nach, damit Knöpfe und Punkte im ersten Bildschirm bleiben */
@media (min-width: 961px) and (max-height: 820px) {
  .hero--start { padding: clamp(0.6rem, 2vh, 2rem) 0; grid-template-rows: 1fr auto 1fr; }
  .hero--start .hero__lead { font-size: 1rem; line-height: 1.5; margin-top: min(1rem, 1.8vh); }
  .hero--start .hero__lead + .hero__lead { margin-top: 0.45rem; }
  .hero--start .hero__ctas { margin-top: min(1.3rem, 2.4vh); }
  .hero--start .hero__belege { margin-top: min(1.1rem, 2vh); gap: 0.3rem; }
  .hero--start .brotkrumen + h1 { margin-top: 0.7rem; }
}

/* ---------- Feinschliff (07.10.2026) ---------- */
/* Überschriften verteilen ihre Zeilen gleichmäßig, damit kein einzelnes Wort allein in der letzten Zeile steht */
h1, h2, h3 { text-wrap: balance; }
/* Handy: Sektions-Überschriften folgen der Fensterbreite, damit „Schaufensterbeschriftung“ ohne Trennstrich passt */
@media (max-width: 490px) { .kopf h2, .abschluss h1, .abschluss h2 { font-size: 6.2vw; } }
/* Leistungskarten: Titel folgt der Kartenbreite, lange Wörter brechen nicht mitten durch */
.leistung { container-type: inline-size; }
.leistung h3 { font-size: clamp(1rem, 5.8cqw, 1.3rem); }
/* Zeilenlänge: Fließtext bleibt bei rund 75 Zeichen je Zeile */
.kopf p { max-width: 40rem; }
.kopf--mitte p { margin-inline: auto; }
.abschluss p.orte { max-width: 36rem; }
.rechtstext { max-width: 38rem; }
/* Breiter Kopf der Startseite: die beiden Absätze stehen am PC nebeneinander statt in einer überlangen Zeile */
@media (min-width: 961px) {
  .kopf--breit { display: grid; grid-template-columns: repeat(2, minmax(0, 40rem)); column-gap: clamp(2rem, 4vw, 4rem); justify-items: start; justify-content: space-between; }
  .kopf--breit > :not(p) { grid-column: 1 / -1; }
  /* Rechter Absatz schließt rechts mit den Fotos darunter ab (Wunsch 13.10.2026) */
}
/* Kopf „Wissenswertes“ der Leistungsseiten: der kurze Satz unter der Überschrift läuft am PC in einer Zeile (Wunsch 13.10.2026) */
@media (min-width: 961px) { .kopf--einzeile { max-width: none; } .kopf--einzeile p { max-width: none; } }
/* Rechtliche Seiten: Hauptüberschrift nach derselben Regel wie die übrigen Seiten, Zwischenüberschriften passen aufs Handy */
.rechtstext h1, .abschluss h1 { font-size: clamp(1.9rem, min(3.2vw, 6.8vh), 3.4rem); letter-spacing: -0.02em; }
.rechtstext h2 { font-size: clamp(1.05rem, 5.4vw, 1.3rem); }
/* Zustände: Filter und Fragen reagieren auf den Mauszeiger, das Bewertungs-Laufband zeigt den Tastaturfokus in Orange */
.filter button { transition: 0.2s; }
.filter button:hover { color: var(--orange-hell); box-shadow: inset 0 0 0 1px var(--orange-ring); }
.faq summary { transition: color 0.2s; }
.faq summary:hover { color: var(--orange-hell); }
.nav__burger:hover { color: var(--orange); }
[tabindex]:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 0.9rem; }
/* Handy: Bildunterschriften flacher, damit sie höchstens ein Drittel der Kachel bedecken */
@media (max-width: 560px) { .galerie figcaption { padding: 1.4rem 0.7rem 0.5rem; font-size: 0.78rem; line-height: 1.3; } }
/* Sehr niedrige Laptop-Fenster: Kopf und Zahlenband rücken zusammen, damit das Band im ersten Bildschirm bleibt */
@media (min-width: 961px) and (max-height: 680px) {
  .auftakt .hero { padding: 0.5rem 0 0.9rem; }
  .auftakt .zahlen div { padding: 0.55rem 0.8rem; }
  .auftakt > section:last-child { padding-bottom: 0.6rem; }
}

/* ---------- Vorher/Nachher-Schieber im Kopfbild der Startseite ---------- */
/* Zwei deckungsgleiche Bilder übereinander, das Vorher-Bild wird bis zur Reglerposition (--pos) freigegeben. */
.schieber { --pos: 50%; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--linie), 0 40px 90px rgba(0,0,0,0.8); }
.schieber img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 12% center; }
.schieber__vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.schieber__marke { position: absolute; z-index: 1; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(10,10,10,0.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); transition: opacity 0.25s; pointer-events: none; }
.schieber__marke small { font-size: inherit; font-weight: 600; letter-spacing: 0.04em; text-transform: none; }
.schieber__marke--vorher { left: 0.9rem; top: 0.9rem; }
.schieber__marke--nachher { right: 0.9rem; bottom: 0.9rem; background: var(--orange); color: #1a0d00; box-shadow: none; }
.schieber[data-rand='links'] .schieber__marke--vorher, .schieber[data-rand='rechts'] .schieber__marke--nachher { opacity: 0; }
.schieber__regler { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.schieber__griff { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--orange); box-shadow: 0 0 14px rgba(255, 133, 56, 0.55); pointer-events: none; }
.schieber__knopf { position: absolute; top: 50%; left: 50%; width: 2.7rem; height: 2.7rem; margin: -1.35rem 0 0 -1.35rem; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: #1a0d00; box-shadow: 0 6px 20px rgba(0,0,0,0.6); transition: transform 0.2s; }
.schieber__knopf .icon { width: 1.4rem; height: 1.4rem; stroke-width: 2.2; }
.schieber:hover .schieber__knopf { transform: scale(1.08); }
.schieber__regler:focus-visible + .schieber__griff .schieber__knopf { outline: 2px solid #fff; outline-offset: 3px; transform: scale(1.08); }
html:not(.js) .schieber__griff, html:not(.js) .schieber__regler { display: none; }
@media (max-width: 560px) {
  .schieber__marke { font-size: 0.62rem; padding: 0.18rem 0.55rem; }
  .schieber__marke--vorher { left: 0.6rem; top: 0.6rem; }
  .schieber__marke--nachher { right: 0.6rem; bottom: 0.6rem; }
  .schieber__knopf { width: 2.3rem; height: 2.3rem; margin: -1.15rem 0 0 -1.15rem; }
}
/* Handy und Tablet: Siegel hängt wie am PC über die linke untere Bildecke, statt eingerückt im Bild zu sitzen */
@media (max-width: 960px) { .hero__siegel { left: -0.55rem; bottom: -1.2rem; } }
/* Schieber mit Verlauf-Rahmen (echter border + background-clip). Der orange Lichtschein dahinter ist entfernt (Wunsch Herr Scheele, 13.10.2026) */
.hero__bild { isolation: isolate; }
.schieber {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(160deg, rgba(255, 168, 105, 0.8) 0%, rgba(255, 255, 255, 0.16) 30%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 133, 56, 0.5) 100%) border-box;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.9);
}
/* PC: Siegel rückt schräg nach links unten über die Bildecke, damit die Ecke des Fotos nicht darunter hervorschaut.
   Versatz folgt der Siegelgröße, nach unten begrenzt, damit es nicht ans Zahlenband stößt. */
@media (min-width: 961px) {
  .auftakt .hero__siegel { --s: clamp(96px, 12vw, 11rem); left: calc(var(--s) * -0.4); bottom: max(calc(var(--s) * -0.1), -0.8rem); }
}
/* Logo größer (Kundenwunsch 07.10.2026): füllt die Kopfzeile fast ganz, die Zeile selbst bleibt gleich hoch */
.nav__logo img { height: 5.4rem; }
@media (min-width: 961px) and (max-width: 1100px) { .nav__logo img { height: 4.6rem; } }
@media (max-width: 560px) { .nav__logo img { height: 4.4rem; } }
.footer img { height: 4.2rem; }

/* Kontakt-Knopf neben dem Menü, nur mobil (Wunsch Herr Scheele, 08.10.2026) */
.nav__kontakt { display: none; }
@media (max-width: 960px) {
  /* etwas kleiner als die übrigen kleinen Knöpfe (Wunsch Tobias 09.10.2026), Tippfläche bleibt über die Höhe der Kopfzeile groß genug */
  .nav__kontakt { display: inline-flex; margin-left: auto; padding: 0.42rem 0.85rem; font-size: 0.8rem; }
  .nav__burger { margin-left: 0.25rem; }
}

/* ---------- Rahmen: Kopfbild der Leistungsseiten mit Tiefe (09.10.2026) ---------- */
/* Lichtkante im Rahmen und sichtbare Plattenkante rundum (das Bild wirkt dick).
   Der orange Schein hinter dem Bild ist entfernt (Wunsch Herr Scheele, 13.10.2026), der Rahmen bleibt. */
.hero--start .hero__bild > img:not(.hero__siegel) {
  border: 1px solid transparent;
  background: linear-gradient(160deg, rgba(255, 190, 140, 0.95) 0%, rgba(255, 255, 255, 0.28) 28%, rgba(255, 255, 255, 0.06) 60%, rgba(255, 133, 56, 0.6) 100%) border-box;
  box-shadow:
    0 0 0 1px #4a4a4f, 0 0 0 2px #3d3d42, 0 0 0 3px #323236, 0 0 0 4px #28282b, 0 0 0 5px #1f1f22, 0 0 0 6px #17171a, 0 0 0 7px #101012;
}
/* PC: leichte Drehung in den Raum, damit die Plattenkante als Kante gelesen wird */
@media (min-width: 961px) {
  /* Drehung zum Vergleich abgeschaltet (09.10.2026): .hero--start .hero__bild > img:not(.hero__siegel) { transform: perspective(1600px) rotateY(-5deg) rotateX(2deg); transform-origin: 60% 50%; } */
}

/* Neue Kopfbilder in Karten und Galerien (09.10.2026): Ausschnitt so legen, dass das Motiv im flacheren Feld bleibt */
.galerie img[src*="gf-bad-kopf"] { object-position: center 28%; }
/* Platzhalter in Galerien (nur Entwurf): gestrichelter Kasten in Feldgroesse, bis das Bild geliefert ist */
.galerie figure.galerie__platz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; background: transparent; border: 1px dashed rgba(255, 133, 56, 0.5); color: var(--orange-hell); font-family: var(--font-headline); }
.galerie__platz small { color: var(--text-leise); font-family: var(--font-body); font-size: 0.8rem; }
/* Ruhiges Galerie-Raster (09.10.2026, Test auf der Lkw-Seite): alle Felder gleich gross im Format 4:3,
   das Bild wird immer ganz gezeigt (nichts abgeschnitten). Vorlagen in 1200 x 900 px fuellen das Feld genau. */
.galerie--gleich { grid-auto-rows: auto; }
.galerie--gleich figure { aspect-ratio: 4 / 3; }
.galerie--gleich img { object-fit: contain; }
/* Im ruhigen Raster ohne sichtbare Bildunterschrift (Entscheidung Kunde offen); die Bildbeschreibung (alt) bleibt */
.galerie--gleich figcaption { display: none; }

/* ---------- Großansicht (Lichtbox) für das ruhige Galerie-Raster ---------- */
.galerie--gleich figure { cursor: zoom-in; }
.galerie--gleich figure:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.lichtbox { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 5, 5, 0.97); color: var(--ink); overflow: hidden; }
.lichtbox::backdrop { background: rgba(5, 5, 5, 0.97); }
.lichtbox__bahn { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lichtbox__bahn::-webkit-scrollbar { display: none; }
.lichtbox__blatt { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: 4.2rem 4.6rem 3.4rem; cursor: zoom-out; }
.lichtbox__blatt img { max-width: calc(100vw - 9.2rem); max-height: calc(100dvh - 7.6rem); width: auto; height: auto; object-fit: contain; border-radius: var(--radius); cursor: default; box-shadow: 0 0 0 1px var(--linie), 0 0 90px rgba(255, 133, 56, 0.16); }
.lichtbox__knopf { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: var(--ink); font-size: 1.9rem; line-height: 1; padding: 0 0 0.2rem; }
.lichtbox__knopf:hover { background: var(--orange-ghost); box-shadow: inset 0 0 0 1px var(--orange-ring); color: var(--orange-hell); }
.lichtbox__knopf:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.lichtbox__zu { top: 0.9rem; right: 0.9rem; }
.lichtbox__zurueck { left: 0.9rem; top: 50%; margin-top: -1.5rem; }
.lichtbox__weiter { right: 0.9rem; top: 50%; margin-top: -1.5rem; }
.lichtbox__zaehler { position: absolute; left: 0; right: 0; bottom: 0.9rem; text-align: center; font-size: 0.9rem; color: var(--text-leise); pointer-events: none; }
/* Handy: Bild bis an den Rand, geblättert wird durch Wischen, Pfeile rücken nach unten neben den Zähler */
@media (max-width: 700px) {
  .lichtbox__blatt { padding: 4.2rem 0.6rem 4.4rem; }
  .lichtbox__blatt img { max-width: calc(100vw - 1.2rem); max-height: calc(100dvh - 8.6rem); }
  .lichtbox__zurueck, .lichtbox__weiter { top: auto; bottom: 0.6rem; margin-top: 0; width: 2.6rem; height: 2.6rem; }
  .lichtbox__zurueck { left: calc(50% - 5.6rem); }
  .lichtbox__weiter { right: calc(50% - 5.6rem); }
  .lichtbox__zaehler { bottom: 1.25rem; }
}
/* Ruhiges Raster gilt seit 09.10.2026 fuer alle Galerien: "breit" und "hoch" (Startseite) belegen nur noch ein Feld */
.galerie--gleich figure.breit { grid-column: auto; }
.galerie--gleich figure.hoch { grid-row: auto; }
.galerie--gleich img[src*="sch-spielplatz"] { padding: 0; }
/* Detail-Raster: fuenf kleinere Felder pro Reihe am PC, Vorschaubilder sind auf 4:3 zugeschnitten und fuellen das Feld */
@media (min-width: 961px) { .galerie--fuenf { grid-template-columns: repeat(5, 1fr); } }
.galerie--fuenf img { object-fit: cover; }
/* Vorschaubilder sind auf 4:3 geschnitten (<name>-klein.webp) und fuellen ihr Feld, das ganze Bild zeigt die Grossansicht */
.galerie--gleich img, .galerie--gleich img[src*="sch-spielplatz"] { object-fit: cover; }
/* Raster mit drei Feldern pro Reihe (Block Fuer Liebhaber) */
@media (min-width: 961px) { .galerie--drei { grid-template-columns: repeat(3, 1fr); } }
/* Kleine Marke "Vorher"/"Nachher" auf einem Rasterbild (Wohnmobil im Block Fuer Liebhaber) */
.galerie__marke { position: absolute; left: 0.7rem; top: 0.7rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: rgba(10, 10, 10, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); color: var(--ink); font-family: var(--font-headline); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.galerie__marke--nachher { background: var(--orange); box-shadow: none; color: #050505; }
/* Marke in der Grossansicht: mittig ueber dem Bild */
.lichtbox__blatt { position: relative; }
.lichtbox__blatt .galerie__marke { left: 50%; top: 1.15rem; transform: translateX(-50%); font-size: 0.85rem; padding: 0.3rem 1rem; }
/* Kontaktblock: Adresse, Einzugsgebiet und Routenlink mit Luft dazwischen (Wunsch Tobias 09.10.2026) */
.kontakt__absatz { display: block; margin-top: 0.9rem; }
a.kontakt__absatz { display: inline-flex; }
.kontakt__orte { display: block; margin-top: 0.3rem; color: var(--text-leise); font-size: 0.94em; line-height: 1.6; }

/* ---------- Kartenrahmen (13.10.2026, Vorbild: Glas-Karten von AgentaVoice Web) ---------- */
/* Nur der Rahmen: feine helle Kontur rundum, oben eine etwas hellere Lichtkante. Fläche und Farben bleiben, kein Orange.
   Gilt für alle Karten mit Text. Ausgenommen sind Fotos und Galerien (bleiben ruhig) sowie Zahlenband, Schieber,
   Kopfbilder und Zitatkarte (haben ihren eigenen Rahmen). Offene Frage und Kontaktweg unter der Maus bleiben orange. */
:root { --kante: rgba(255, 255, 255, 0.12); --kante-oben: rgba(255, 255, 255, 0.2); }
.gruende li, .ablauf li, .bewertung, .faq details, .kontakt-weg, .variante, .einzelstueck { box-shadow: inset 0 0 0 1px var(--kante), inset 0 1px 0 0 var(--kante-oben); }
.stimme { box-shadow: inset 0 0 0 1px var(--kante), inset 0 1px 0 0 var(--kante-oben), 0 12px 30px rgba(0, 0, 0, 0.5); }
/* Wissenskasten: links steht schon die orange Linie, deshalb Kontur nur oben, rechts und unten */
.wissen article { box-shadow: inset 0 1px 0 0 var(--kante-oben), inset -1px 0 0 0 var(--kante), inset 0 -1px 0 0 var(--kante); }
/* Leistungskarte: Rahmen liegt als eigene Ebene über Bild und Text, sonst deckt das Foto die obere Kante zu */
.leistung { position: relative; }
.leistung::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--kante), inset 0 1px 0 0 var(--kante-oben); transition: opacity 0.3s; }
.leistung:hover::after { opacity: 0; }


/* E-Mail-Adresse im Kontaktblock bleibt einzeilig (13.10.2026): Unter 1600 px waren die Karten zu zweit nebeneinander
   zu schmal, die Adresse brach vor "de" um. Dort stehen die vier Kontaktwege untereinander, auf schmalen Handys läuft die Adresse etwas kleiner. */
@media (max-width: 1599px) { .kontakt-wege { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .kontakt-weg[href^="mailto"] strong { font-size: 0.9rem; } }

/* ---------- Wisch-Band am Handy (13.10.2026): Ablauf ---------- */
/* Statt vier Karten untereinander ein Band zum Wischen: die nächste Karte schaut am Rand herein,
   das Band läuft bis an den Bildschirmrand. Reines CSS (scroll-snap), kein Skript. Ab 701 px gilt das normale Raster.
   Die Leistungen stehen am Handy wieder untereinander (Wunsch Tobias 14.10.2026). */
@media (max-width: 700px) {
  .ablauf {
    --wisch-rand: clamp(1.25rem, 3.5vw, 5rem);
    display: flex; gap: 0.8rem; margin-inline: calc(-1 * var(--wisch-rand)); padding-inline: var(--wisch-rand); padding-block: 4px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--wisch-rand); scrollbar-width: none;
  }
  .ablauf::-webkit-scrollbar { display: none; }
  .ablauf > li { flex: 0 0 84%; scroll-snap-align: start; }
  /* Karten im Band stehen sofort da und heben sich nicht an, sonst wackelt es beim Wischen */
  .ablauf > .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) { .ablauf { scroll-behavior: smooth; } }

/* Mittige Köpfe (Ablauf, Fragen): die kleine Zeile bekommt auch rechts einen Strich. Mit dem Strich nur links stand das Wort rund 20 px rechts der Mitte und der Kopf wirkte verschoben (13.10.2026) */
.kopf--mitte .eyebrow:not(.eyebrow--pille)::after { content: ''; width: 1.6rem; height: 2px; background: var(--orange); border-radius: 2px; }

/* Überschrift am PC in einer Zeile, der Text darunter behält seine Lesebreite (Bauskript: einzeilig=..., 14.10.2026) */
@media (min-width: 961px) { .kopf--h2-zeile { max-width: none; } .kopf--h2-zeile p { max-width: 46rem; } }
/* Lange einzeilige Überschrift: Schrift wird zwischen 961 und ca. 1180 px so weit kleiner, dass sie in eine Zeile passt (Bauskript: einzeilig_lang=...) */
@media (min-width: 961px) { .kopf--h2-lang h2 { font-size: min(clamp(1.9rem, 4.4vw, 3rem), calc((100vw - 90px) / 23)); } }