/* =============================================================
   HILLER TERRASSENDÄCHER — Global Stylesheet
   ============================================================= */

/* SELF-HOSTED FONTS (DSGVO — keine Google-CDN-Anfrage) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-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: 'Lora';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/lora-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/lora-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;
}

/* SKIP TO CONTENT */
.skip-link { position:absolute; top:-40px; left:0; background:var(--accent); color:#fff; padding:8px 16px; font-size:14px; font-weight:600; z-index:9999; transition:top .2s; }
.skip-link:focus { top:0; }

/* Screenreader-only (visuell versteckt, für korrekte Überschriften-Hierarchie) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* VARIABLES */
:root {
  --dark:       #2A2A2A;
  --dark-h:     #3A3A3A;
  --accent:     #007398;
  --accent-h:   #005F80;
  --cta:        #CC1824;
  --cta-h:      #B31520;
  --text:       #2A2A2A;
  --text-light: #565f6b;
  --bg:         #ffffff;
  --bg-off:     #F1F1EF;
  --border:     #E0E0DC;
  --ph-bg:      #D2D2CE;
  --ph-text:    #494945;
  --r:          4px;
  --r-lg:       8px;
  --r-panel:    28px;   /* dunkle Sektionen als abgesetztes "Fenster" */
  --sh:         0 2px 12px rgba(42,42,42,.08);
  --sh-md:      0 4px 24px rgba(42,42,42,.14);
  --t:          .2s ease;
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* Eintritte, UI-Bewegung */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* Bewegung auf dem Schirm */
  --mw:         1200px;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip statt hidden — clip verhindert horizontales Scrollen, bricht aber position:sticky NICHT (hidden erzeugt einen Scroll-Container und lässt den Header wegscrollen) */
html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: 'Inter', -apple-system, sans-serif; font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* TYPOGRAPHY */
h1,h2,h3,h4 { font-family: 'Lora', Georgia, serif; line-height: 1.2; color: var(--dark); }
h1 { font-size: clamp(30px, 4.5vw, 54px); font-weight: 700; }
h2 { font-size: clamp(24px, 3.5vw, 38px); font-weight: 700; }
h3 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; }

/* LAYOUT */
.container { max-width: var(--mw); margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }

/* BUTTONS
   Hover-Effekt: eine dunklere Variante der eigenen Farbe wächst von unten nach
   oben ein (::before mit scaleY + transform-origin bottom). Der Fill liegt hinter
   dem Label (Label bekommt position:relative über .btn > *), damit Text und Icon
   während der Animation lesbar bleiben. Fällt auf reines background-Umschalten
   zurück, wenn Transforms reduziert werden (siehe prefers-reduced-motion unten). */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; border-radius: var(--r); cursor: pointer; border: 2px solid transparent; transition: color var(--t), border-color var(--t), transform var(--t); white-space: nowrap; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill, transparent); transform: scaleY(0); transform-origin: bottom; transition: transform .28s cubic-bezier(.4,0,.2,1); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--cta); color: #fff; border-color: var(--cta); --btn-fill: var(--cta-h); }
.btn-primary:hover, .btn-primary:focus-visible { border-color: var(--cta-h); }
.btn-dark { background: var(--dark); color: #fff; border-color: var(--dark); --btn-fill: var(--dark-h); }
.btn-dark:hover, .btn-dark:focus-visible { border-color: var(--dark-h); }
.btn-outline { background: transparent; color: var(--dark); border-color: var(--border); --btn-fill: var(--bg-off); }
.btn-outline:hover, .btn-outline:focus-visible { border-color: var(--accent-h); color: var(--accent-h); }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); --btn-fill: rgba(255,255,255,.14); }
.btn-outline-white:hover, .btn-outline-white:focus-visible { border-color: #fff; }
/* Sondervarianten (referenzen / ueber-uns) — hier zentral, damit sie denselben Fill bekommen */
.btn-outline-accent { background: transparent; color: var(--accent); border-color: var(--accent); --btn-fill: rgba(0,115,152,.08); }
.btn-outline-accent:hover, .btn-outline-accent:focus-visible { border-color: var(--accent-h); color: var(--accent-h); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); --btn-fill: rgba(255,255,255,.14); }
.btn-outline-light:hover, .btn-outline-light:focus-visible { border-color: #fff; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
/* Im Hero stand der Button optisch fast auf Augenhoehe mit der 58px-Headline
   (66px hoch). Etwas kompakter -- er bleibt der dominante Klick, ohne der
   Ueberschrift die Buehne zu nehmen. */

/* Reduced Motion: kein wachsender Fill, stattdessen direktes Umschalten */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background var(--t), color var(--t), border-color var(--t); }
  .btn::before { transition: none; }
  .btn:hover { transform: none; }
  .btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
}

/* IMAGE PLACEHOLDER */
.img-ph { background: var(--ph-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ph-text); font-size: 12px; font-family: 'Inter', sans-serif; text-align: center; padding: 20px; gap: 10px; line-height: 1.4; }
.img-ph svg { opacity: .45; flex-shrink: 0; }

/* MOBILE NAV */
/* Vollflaechiges Menue - deshalb kurz gehalten (220ms): es legt sich
   ueber die Seite und darf nicht warten lassen. visibility statt
   display, damit sich der Wechsel ueberblenden laesst.
   Stand 2026-09-02. */
.mobile-nav {
  display: flex; visibility: hidden; opacity: 0;
  position: fixed; inset: 0; background: #fff; z-index: 200;
  flex-direction: column; padding: 24px; overflow-y: auto;
  transform: translateY(-8px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
.mobile-nav.open {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
  .mobile-nav.open { transition: opacity 120ms linear, visibility 0s; }
}
.mobile-nav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.mobile-nav-close { background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--text); padding: 4px; }
.mobile-nav ul { flex: 1; }
.mobile-nav li a { display: block; font-size: 19px; font-weight: 600; color: var(--text); padding: 14px 0; border-bottom: 1px solid var(--border); }
.mobile-nav li a.active { color: var(--accent); }
.mobile-nav-foot { padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }

/* HEADER — durchgehend weiß, keine Akzentlinie */
header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 1px 8px rgba(42,42,42,.05); transition: box-shadow .25s ease, background .25s ease; }
/* Beim Scrollen: kräftigerer Schatten + leichte Verdichtung — Header wirkt „abgehoben" */
header.is-scrolled { box-shadow: 0 4px 20px rgba(42,42,42,.12); background: rgba(255,255,255,.97); backdrop-filter: saturate(1.1) blur(6px); }
.hdr { display: flex; align-items: center; justify-content: space-between; height: 69px; gap: 20px; }
.logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.logo img { height: 44px; width: auto; display: block; }
.logo-text { font-family: 'Lora', Georgia, serif; font-size: 19px; font-weight: 700; color: var(--dark); line-height: 1.2; }
.logo-text small { display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; color: var(--text-light); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.hdr-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hdr-right .btn { padding: 11px 18px; font-size: 15px; }
.hdr-phone { font-size: 14px; font-weight: 600; color: var(--text); }

/* NAV DROPDOWN */
.main-nav > ul { display: flex; gap: 8px; list-style: none; padding: 0; }
.main-nav a { font-size: 13.5px; font-weight: 500; color: var(--text); padding: 7px 12px; border-radius: var(--r); white-space: nowrap; transition: color var(--t), background var(--t); display: flex; align-items: center; gap: 4px; }
.main-nav a:hover, .main-nav a.active { color: var(--dark); background: var(--bg-off); }
.main-nav a.active { color: var(--accent); font-weight: 600; background: rgba(0,144,204,.08); }
.has-dropdown { position: relative; }
.has-dropdown > a { cursor: default; }
.has-dropdown > a svg { transition: transform var(--t); }
.has-dropdown.open > a svg { transform: rotate(180deg); }
/* Wird oft geoeffnet - deshalb bewusst knapp (150ms, kein Scale).
   Gerade genug, damit das Menue nicht aufblitzt, aber nie im Weg. */
.dropdown {
  display: flex; visibility: hidden; opacity: 0;
  position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md);
  padding: 14px 0 8px; z-index: 300; flex-direction: column;
  transform: translateY(-4px);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s linear 150ms;
}
.has-dropdown.open .dropdown {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .dropdown { transform: none; transition: opacity 100ms linear, visibility 0s linear 100ms; }
  .has-dropdown.open .dropdown { transition: opacity 100ms linear, visibility 0s; }
}
.dropdown li a { padding: 9px 18px; border-radius: 0; font-size: 14px; display: block; }
.dropdown li a:hover { background: var(--bg-off); color: var(--dark); }
.dropdown li a.active { color: var(--accent); font-weight: 600; background: rgba(0,144,204,.06); }
.dropdown-label { padding: 10px 18px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); }
.dropdown-label:not(:first-child) { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; }

/* HAMBURGER */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 12px; cursor: pointer; border: none; background: none; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.hamburger span { display: block; width: 23px; height: 2px; background: var(--dark); }
@media(max-width:1200px) { .main-nav { display: none; } .hamburger { display: flex; } .hdr-phone { display: none; } .hdr { height: 61px; } }

/* SECTION HEADER */
.sec-hdr { text-align: center; margin-bottom: 48px; }
.sec-hdr h2 { margin-bottom: 12px; }
.sec-hdr p { font-size: 18px; color: var(--text-light); max-width: 560px; margin: 0 auto; }

/* TRUST BAR — Premium-Karten (Regionen & Seiten ohne eigenes Inline-Trust-CSS) */
.trust-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.trust-item:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: rgba(0,115,152,.30); }
.trust-icon { width: 42px; height: 42px; background: rgba(0,115,152,.10); color: var(--accent-h); border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-label { font-size: 14px; font-weight: 700; color: var(--dark); line-height: 1.25; margin-bottom: 2px; }
.trust-sub { font-size: 12px; color: var(--text-light); line-height: 1.35; }

/* PAGE HERO (GEO & Produkt-Seiten) */
/* Hero fuellt den sichtbaren Bereich: beim Aufruf ist nur der Hero zu sehen,
   die naechste Sektion beginnt erst nach dem Scrollen. --hdr-h = Hoehe des
   sticky Headers, der oberhalb im Flow steht. */
:root { --hdr-h: 72px; }
.page-hero { background: var(--dark); position: relative; overflow: hidden;
  padding: 80px 0 72px;
  display: flex; align-items: center; }
/* Volle Hoehe nur fuer Heroes MIT Foto (:has(.page-hero-bg)). Die
   Rechtstexte (Impressum, AGB, Datenschutz) haben einen flachen Kopf
   ohne Bild - dort erzeugt eine Bildschirmhoehe nur dunkle Leere.
   Ohne .has-hero steht die Kopfleiste im Flow, ihre Hoehe wird abgezogen. */
.page-hero:has(.page-hero-bg) { min-height: calc(100svh - var(--hdr-h)); }
/* Hero ist Flex-Container -> Container darf nicht schrumpfen */
.page-hero > .container { flex: 1 1 100%; min-width: 0; }
/* Bild und Verlauf liegen ganz hinten. Ohne z-index legen sie sich
   ueber statisch positionierte Kinder (die Fusszeile im schmalen
   Layout) und verdecken sie. */
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }

/* ── Hero-Diashow (Produkt- und Zubehoerseiten) ────────────────────
   Mehrere Motive im Hero, die sich langsam ueberblenden - dieselbe
   Mechanik wie das Bildband auf der Startseite (.px-slide).
   Nur ein Bild traegt .is-on; das Skript schiebt die Klasse weiter.
   Ohne JS bleibt das erste Motiv stehen, der Hero sieht aus wie zuvor.
   Stand 2026-09-02. */
.hero-slides .hero-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 1.1s var(--ease-out);
}
.hero-slides .hero-slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  /* Kein Blendeffekt - das Skript haelt hier ohnehin an, die Regel
     faengt den Fall ab, dass die Einstellung spaeter greift. */
  .hero-slides .hero-slide { transition: none; }
}
.page-hero-bg .img-ph { width: 100%; height: 100%; border-radius: 0; }
/* Platzhalter-Beschriftung im Hero-Hintergrund ausblenden — der Text darf nie über den Hero-Text scheinen (bis echtes Foto da ist). Hoch spezifisch, um Inline-Regeln der Unterseiten zu schlagen. */
.page-hero .page-hero-bg .img-ph { font-size: 0; gap: 0; }
.page-hero .page-hero-bg .img-ph svg { display: none; }
.page-hero-ov { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to right, rgba(30,30,30,.92) 0%, rgba(30,30,30,.70) 60%, rgba(30,30,30,.35) 100%); }
.page-hero-cnt { position: relative; z-index: 1; max-width: 660px; }
.page-hero-cnt h1 { color: #fff; margin-bottom: 20px; }
.page-hero-cnt .lead { font-size: 18px; color: rgba(255,255,255,.85); margin-bottom: 32px; line-height: 1.65; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* Buttonzeile der Unterseiten-Heroes. Lag bisher nur inline auf einem
   Teil der Seiten, die Regionsseiten nutzten stattdessen .hero-ctas.
   Jetzt eine Klasse mit einer Definition an einer Stelle. */
.page-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
@media(max-width:768px) {
  .page-hero-ctas { flex-direction: column; align-items: stretch; }
  .page-hero-ctas .btn { width: 100%; justify-content: center; }
}
@media(max-width:768px) { :root { --hdr-h: 64px; } .page-hero { padding: 60px 0 52px; } .page-hero-ov { background: rgba(30,30,30,.85); } .page-hero-cnt { max-width: 100%; } .hero-ctas { flex-direction: column; } .hero-ctas .btn { justify-content: center; } }

@media(max-height:560px) { .page-hero { min-height: 0; } }

/* BREADCRUMB */
.breadcrumb-bar { background: var(--bg-off); border-bottom: 1px solid var(--border); padding: 12px 0; }
.breadcrumb ol, .breadcrumb-bar ol { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-light); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumb ol li, .breadcrumb-bar ol li { list-style: none; display: flex; align-items: center; }
.breadcrumb a, .breadcrumb-bar a { color: var(--text-light); transition: color var(--t); }
.breadcrumb a:hover, .breadcrumb-bar a:hover { color: var(--accent); }
.breadcrumb li:not(:last-child)::after, .breadcrumb-bar li:not(:last-child)::after { content: "›"; margin-left: 8px; }
.breadcrumb li:last-child, .breadcrumb-bar li:last-child { color: var(--text); font-weight: 500; }
/* Der Pfad liegt auf dem Hero-Foto und muss dort immer lesbar sein -
   deshalb durchgehend Weiss statt abgestufter Transparenz. Der
   Textschatten faengt helle Bildstellen (Himmel, weisse Fassade) ab.
   Stand 2026-09-02. */
.page-hero-cnt .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #fff; margin-bottom: 20px; background: none; border: none; padding: 0; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.page-hero-cnt .breadcrumb a { color: #fff; }
.page-hero-cnt .breadcrumb a:hover { color: #fff; text-decoration: underline; }
.page-hero-cnt .breadcrumb span { color: #fff; }
/* Trenner bleibt sichtbar - die Regel weiter unten setzt ihn wieder
   ein, hier also nicht ausblenden. */

/* CHECK LIST */
.check-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.55; }
.check-list li::before { content: ''; width: 20px; height: 20px; background: var(--accent); border-radius: 50%; flex-shrink: 0; margin-top: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }

/* CTA BANNER — ROT */
.cta-banner { background: var(--cta); padding: 48px 0; }
.cta-inner { text-align: center; max-width: 640px; margin: 0 auto; }
.cta-inner h2 { color: #fff; margin-bottom: 16px; }
.cta-inner > p { color: rgba(255,255,255,.9); font-size: 18px; margin-bottom: 32px; }
.cta-acts { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cta-phone { font-size: 18px; font-weight: 700; color: #fff; font-family: 'Lora', serif; }
.cta-note { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.72); }
/* Preis-/Kosten-Anker im End-CTA (dezenter Kasten, dunkler auf CTA-Rot) */
@media(max-width:580px) { .cta-acts { flex-direction: column; width: 100%; } .cta-acts .btn { width: 100%; justify-content: center; } }

/* FAQ ACCORDION */
/* FAQ ohne umschließenden Rahmen — nur dezente Haarlinie zwischen den Fragen, luftig */
.faq-list { display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 32px auto 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 22px 4px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: 'Lora', serif; font-size: 17px; font-weight: 600; color: var(--dark); transition: color var(--t); }
.faq-q:hover { color: var(--accent-h); }
.faq-q svg { flex-shrink: 0; transition: transform var(--t); color: var(--accent); }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
/* Antwort faehrt auf, statt zu springen. grid-template-rows 0fr -> 1fr
   ist der Weg, eine unbekannte Hoehe zu animieren, ohne sie in JS zu
   messen. Der Pfeil dreht sich bereits - die Antwort folgt jetzt im
   selben Takt. Stand 2026-09-02. */
.faq-a {
  /* Kein display:none - sonst laesst sich der Wechsel nicht ueberblenden.
     Die Hoehe faehrt ueber max-height auf; der Wert ist bewusst grosszuegig
     (keine Antwort ist so lang) und wirkt nur als Deckel fuer die Animation. */
  overflow: hidden; max-height: 0; opacity: 0;
  padding: 0 4px; font-size: 16px; line-height: 1.75; color: var(--text-light);
  transition: max-height 280ms var(--ease-out), opacity 200ms var(--ease-out), padding-bottom 280ms var(--ease-out);
}
.faq-item.open .faq-a { max-height: 60rem; opacity: 1; padding-bottom: 22px; }
@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: opacity 120ms linear, max-height 0s; }
}
.faq-a p { font-size: 15px; color: var(--text-light); line-height: 1.7; }

/* FOOTER */
footer { background: var(--dark); color: rgba(255,255,255,.7); padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
@media(max-width:900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media(max-width:520px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-brand .logo { margin-bottom: 18px; display: block; }
.footer-brand .logo img { height: 50px; width: auto; filter: brightness(0) invert(1); }
.footer-brand > p { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.7; margin-bottom: 18px; }
.footer-contact a { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 8px; transition: color var(--t); }
.footer-contact a:hover { color: #fff; }
.footer-col h4, .footer-col .footer-col-title { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,.62); transition: color var(--t); }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,.32); }
.footer-seo { font-size: 12px; color: rgba(255,255,255,.5); }

/* A11y-Kontrast-Overrides — überstimmen seiteninterne <style>-Blöcke (WCAG AA) */
.footer-seo { color: rgba(255,255,255,.55) !important; }
.main-nav a.active, .dropdown li a.active { color: var(--accent-h) !important; }
.usp-num, .step-num { color: #3AAEDE !important; }  /* helleres Blau auf dunklem Hintergrund (AA) */
.img-ph { color: #494945 !important; }
.footer-bottom p { color: rgba(255,255,255,.6) !important; }
.footer-col a { color: rgba(255,255,255,.72) !important; }
/* "Made by Stellon" — dezent, volle Breite unten, Backlink dofollow */
/* Rechts aussen in der bestehenden Zeile statt eigener Zeile darunter --
   flex-basis:100% erzwang einen Umbruch und machte den Footer laenger. */
.footer-made { margin-left: auto; text-align: right; margin-top: 0; font-size: 11px !important; color: rgba(255,255,255,.28) !important; letter-spacing: .02em; align-self: flex-end; }
.footer-made a { color: rgba(255,255,255,.45); text-decoration: none; transition: color var(--t); }
.footer-made a:hover { color: var(--accent); }
/* Standortseiten: dunkle Referenz-Box (scoped, betrifft nicht helle .ref-label anderswo) */
.reference-box .ref-label { color: #3AAEDE !important; }
.reference-box .ref-location { color: rgba(255,255,255,.7) !important; }
.reference-box a { color: rgba(255,255,255,.85) !important; }
/* Standortseiten: Breadcrumb liegt im dunklen Hero → helle Links */
/* Die Unterseiten bringen inline eigene .breadcrumb-Farben mit
   (var(--text-light) auf ol, a und li) - die laden nach styles.css.
   Deshalb hier alle Teile des Pfads explizit auf Weiss. */
.page-hero-cnt .breadcrumb,
.page-hero-cnt .breadcrumb ol,
.page-hero-cnt .breadcrumb li,
.page-hero-cnt .breadcrumb a,
.page-hero-cnt .breadcrumb span,
.page-hero-cnt .breadcrumb li:last-child,
.page-hero-cnt .breadcrumb li:not(:last-child)::after { color: #fff !important; }
/* Standort-Hero-Badge (Akzent auf dunklem Hero) */
.home-badge { color: rgba(255,255,255,.95) !important; }
/* Ratgeber: Timeline-Label auf dunkel + Vergleichs-Badges/Tabelle */
.tl-label { color: #3AAEDE !important; }
.holz .comp-badge { color: #654917 !important; }
.alu .comp-badge { color: var(--accent-h) !important; }
.compare-table .winner { color: #17742F !important; }
/* Links in rotem CTA-Banner weiß */
.cta-inner p a, .cta-banner p a { color: #ffffff !important; }
@media(max-width:780px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } .footer-bottom { flex-direction: column; } }

/* REGIONEN-HERO-DEKO — Hintergrundverlauf der Standortseiten */
.geo-hero-deco { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(130% 120% at 92% 10%, rgba(0,115,152,.42) 0%, rgba(0,115,152,0) 52%),
  linear-gradient(115deg, #26333d 0%, #2A2A2A 62%); }

/* EINZUGSGEBIET-KARTE (Standortseiten, rechts im Hero)
   Norddeutschland-Karte aus echten Geodaten: Landmasse in Grau, der Standort
   der jeweiligen Seite als heller Einzugsradius mit weißem Punkt. Der weiche
   Auslauf nach unten/rechts steckt als Maske in der SVG selbst, damit die
   Clipping-Kante der Geometrie nicht als Rechteck sichtbar wird.
   Bewusst KEIN Google-Maps-Embed —
   kein externer Request, damit die DSGVO-Zwei-Klick-Lösung (.map-consent)
   hier nicht greifen muss und der Hero ohne Consent-Box sofort steht. */
/* Die Karte sitzt buendig in der rechten Hero-Haelfte und wird oben/unten
   bewusst angeschnitten — sie soll als Teil des Hintergrunds lesen, nicht
   als eingesetzte Grafik. Daher kein Schatten und keine Hoehenbegrenzung. */
.geo-hero-map { position: absolute; right: 0; top: 0; bottom: 0; width: clamp(360px, 40%, 780px); z-index: 0; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
/* Die Karte fuellt den Hero immer vollstaendig aus und wird seitlich
   angeschnitten statt oben/unten eine sichtbare Kante zu erzeugen. */
.geo-hero-map .geo-map { width: 100%; height: 100%; object-fit: cover; }
/* Landmasse: Fläche und Kontur getrennt (zwei <use> auf dieselbe Geometrie) */
.geo-nb path { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.geo-land { fill: rgba(255,255,255,.20); stroke: none; }
.geo-lines { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Einzugsradien je Standort — auf die Landmasse geclippt */
.geo-areas { opacity: .6; }
.geo-area { fill: rgba(255,255,255,.10); stroke: none; transition: fill .3s ease; }
/* Hervorhebung: das Loader-Skript setzt .is-hi auf Fläche und Punkt aus data-region */
.geo-area.is-hi { fill: rgba(255,255,255,.62); }
.geo-dot { fill: rgba(255,255,255,.5); transition: fill .3s ease, r .3s ease; }
/* Aktiver Standort: heller Punkt mit dunklem Ring, damit er sich auch auf
   der hellen Einzugsflaeche klar abhebt. */
.geo-dot.is-hi { fill: #fff; r: 7; stroke: rgba(30,30,30,.55); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
/* Reserviert die Fläche schon vor dem Laden -> kein Layout-Sprung */
.geo-hero-map:empty { aspect-ratio: 356 / 330; }
/* Hero-Text darf nie hinter der Karte verschwinden */
.page-hero:has(.geo-hero-map) .page-hero-cnt { max-width: 600px; }
/* Der Hero-Verlauf liegt ueber der Karte und blendet sie nach links aus —
   so entsteht kein sichtbarer Rand zwischen Karte und Hintergrund. */
.page-hero:has(.geo-hero-map) .page-hero-ov { background: linear-gradient(to right, rgba(30,30,30,.97) 0%, rgba(30,30,30,.90) 42%, rgba(30,30,30,.55) 70%, rgba(30,30,30,.30) 100%); }
/* Schmalere Viewports: Karte zurueckhaltender, Verlauf deckt den Text staerker ab */
@media(max-width:1024px) { .geo-hero-map { width: clamp(300px, 42%, 480px); opacity: .6; }
  .page-hero:has(.geo-hero-map) .page-hero-ov { background: linear-gradient(to right, rgba(30,30,30,.98) 0%, rgba(30,30,30,.95) 55%, rgba(30,30,30,.62) 80%, rgba(30,30,30,.38) 100%); } }
/* Mobil: Karte raus — sie würde den Text überlagern statt ihn zu stützen */
@media(max-width:820px) { .geo-hero-map { display: none; } .page-hero:has(.geo-hero-map) .page-hero-cnt { max-width: 100%; } }

/* LEISTUNGS-INTRO — Text links / Produktbild rechts (überstimmt seiteninterne .intro-inner) */
.intro .intro-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; max-width: var(--mw); }
.intro .intro-text h2 { margin-bottom: 18px; }
.intro .intro-text p:last-child { margin-bottom: 0; }
.intro .intro-img .img-ph { height: 380px; border-radius: var(--r-lg); }
@media(max-width:820px) { .intro .intro-inner { grid-template-columns: 1fr; gap: 32px; } .intro .intro-img { order: -1; } .intro .intro-img .img-ph { height: 240px; } }

/* INTRO-KARUSSELL — 3D Coverflow: Zylinder-Rotation mit Tiefe */
.intro .intro-img:has(.intro-carousel) { min-width: 0; }
.intro-carousel { position: relative; perspective: 1000px; overflow: visible; }
.intro-carousel .carousel-stage {
  position: relative; width: 78%; margin: 0 auto; aspect-ratio: 4/3;
  transform-style: preserve-3d;
}
.intro-carousel .carousel-slide {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
  transition: transform .7s cubic-bezier(.4,0,.2,1), opacity .7s ease, filter .7s ease;
  will-change: transform, opacity;
}
.intro-carousel .carousel-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.intro-carousel .carousel-nav {
  position: relative; z-index: 5;
  display: flex; gap: 8px; justify-content: center; margin-top: 18px;
}
.intro-carousel .carousel-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border);
  background: #fff; color: var(--text); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 16px;
  transition: background var(--t), border-color var(--t), color var(--t);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.intro-carousel .carousel-btn:hover {
  background: var(--panel); color: #fff; border-color: var(--panel);
}
.intro-carousel .carousel-dots {
  display: flex; gap: 6px; align-items: center;
}
.intro-carousel .carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--border);
  border: none; cursor: pointer; padding: 0;
  transition: background var(--t), transform var(--t);
}
.intro-carousel .carousel-dot.active {
  background: var(--panel); transform: scale(1.3);
}

/* TERMIN-CTA — kompakte Beratungs-Card zwischen Varianten und Benefits */
.termin-cta { padding: 36px 0 44px; }
.termin-cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background: var(--panel); color: #fff; border-radius: var(--r-panel, 16px); padding: 32px 44px;
  box-shadow: var(--sh-md);
  max-width: 860px; margin: 0 auto;
}
.termin-cta h2 { color: #fff; font-size: 24px; line-height: 1.32; margin-bottom: 8px; }
.termin-cta p { color: rgba(255,255,255,.78); font-size: 16.5px; line-height: 1.65; max-width: 520px; margin: 0; }
.termin-cta .btn { flex-shrink: 0; }
.termin-cta .btn-outline, .planungsphase .btn-outline { --btn-fill: rgba(255,255,255,.14); }
.termin-cta .btn-outline:hover, .termin-cta .btn-outline:focus-visible,
.planungsphase .btn-outline:hover, .planungsphase .btn-outline:focus-visible { color: #fff; border-color: #fff; }
.termin-cta .termin-phone { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.termin-cta .termin-phone a {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-size: 18px; font-weight: 600; text-decoration: none;
  background: rgba(255,255,255,.12); border-radius: 100px; padding: 12px 28px;
  transition: background .2s;
}
.termin-cta .termin-phone a:hover { background: rgba(255,255,255,.22); }
@media(max-width:760px) {
  .termin-cta { padding: 28px 0 36px; }
  .termin-cta-inner { flex-direction: column; align-items: flex-start; padding: 24px 20px; gap: 18px; }
}

/* EINZUGSGEBIET — zweispaltiges Layout (Text links, Region-Pills rechts) */
.regions { padding: 56px 0; }
.region-row { display: flex; align-items: flex-start; gap: 48px; }
.region-text { flex: 1; min-width: 280px; }
.region-text h2 { margin-bottom: 16px; }
.region-text p { font-size: 17px; color: var(--text-light); line-height: 1.7; }
.region-nav { flex: 1; min-width: 260px; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; padding-top: 6px; }
.region-nav a { display: inline-block; padding: 10px 20px; border: 1.5px solid var(--border); border-radius: 40px; font-size: 15px; color: var(--text); text-decoration: none; transition: border-color .2s, background .2s; }
.region-nav a:hover { border-color: var(--accent); color: var(--accent); }
.region-nav a.all { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.region-nav a.all:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
@media(max-width:760px) { .region-row { flex-direction: column; gap: 28px; } }

/* VORHER / NACHHER — Vertrauensbereich (Phase 2: echte Bildpaare + ziehbarer Slider) */
.beforeafter { background: var(--bg); }
.ba-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; max-width: 960px; margin: 0 auto; }
.ba-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); transition: transform var(--t), box-shadow var(--t); }
.ba-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.ba-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 340px; }
.ba-visual .img-ph { height: 100%; border-radius: 0; }
.ba-half-label { position: absolute; top: 12px; padding: 4px 11px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 20px; z-index: 2; }
.ba-lbl-before { left: 12px; background: rgba(42,42,42,.82); color: #fff; }
.ba-lbl-after { right: 12px; background: var(--accent); color: #fff; }
.ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-50%); z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.ba-body { padding: 18px 20px 20px; }
.ba-body h3 { font-size: 16px; margin-bottom: 4px; }
.ba-loc { font-size: 13px; color: var(--text-light); }
@media(max-width:860px) { .ba-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* TIMELINE / PROZESS — kreisförmig verbundene Schritte (Rendsburg-Stil), site-weit einheitlich.
   Höhere Spezifität (.process .step…) überstimmt die seiteninternen <style>-Blöcke,
   passt sich an 4 wie 5 Schritte an (Spaltenzahl bleibt aus dem Inline-CSS). */
.process .steps { position: relative; }
.process .steps::before { content: ''; position: absolute; top: 28px; left: 12%; right: 12%; height: 2px; background: rgba(255,255,255,.12); z-index: 0; }
.process .step { text-align: center; padding: 0 14px; position: relative; }
.process .step::after { display: none !important; }  /* alten vertikalen Trenner der 01/02-Variante entfernen */
.process .step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff !important; font-family: 'Lora', serif; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; position: relative; z-index: 1; opacity: 1; }
.process .step h3 { font-size: 15px; color: #fff; margin-bottom: 8px; }
.process .step p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.6; }
@media(max-width:760px) { .process .steps { gap: 32px 12px; } .process .steps::before { display: none; } }

/* HERO RATING BADGE (unter den Hero-CTAs — materialunabhängig, deckt sich mit Review-Schema) */
.hero-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 8px 16px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 100px; }
.hero-rating .hr-stars { color: #F5B301; font-size: 15px; letter-spacing: 1px; line-height: 1; }
.hero-rating .hr-text { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.hero-rating .hr-text b { font-weight: 700; }
/* Helle Variante für Heroes auf hellem Hintergrund (kontakt, ueber-uns, faq, referenzen, ratgeber) */
.hero-rating.is-light { background: #fff; border-color: var(--border); box-shadow: var(--sh); }
.hero-rating.is-light .hr-text { color: var(--dark); }
@media(max-width:768px) { .hero-rating { margin-top: 20px; } }

/* ═══ HERO-KONZEPT C+A — wiederverwendbare Komponenten (Unterseiten, dunkler .page-hero) ═══ */
/* 1 · Eyebrow-Badge */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; margin-bottom: 20px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 100px; }
.hero-eyebrow .he-stars { color: #F5B301; font-size: 14px; letter-spacing: 1px; line-height: 1; }
.hero-eyebrow .he-text { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
.hero-eyebrow .he-text b { font-weight: 700; }
/* 4 · Trust-Row */
.hero-trustrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 28px; }
/* Stand 2026-09-02: Reihenfolge wie im Homepage-Hero - Subheadline,
   Buttons, Micro-Copy, dann die Merkmale. Die Merkmale stehen jetzt
   als letztes Element, brauchen also oben Abstand statt unten. */
/* ── Unterseiten-Hero: Aufbau wie auf der Startseite ───────────────
   Startseite: Text mittig links, unten links die Aktionen, unten
   rechts die Merkmale. Die Unterseiten hatten alles in einer Spalte
   untereinander. Der Hero ist bereits Flex mit align-items:center,
   deshalb sitzt .page-hero-cnt mittig; die Fusszeile wird absolut an
   den unteren Rand gesetzt - wie .hero-foot auf der Startseite.
   Stand 2026-09-02. */
.page-hero-foot {
  /* Bezug ist die Hero-Sektion (position:relative), nicht der
     Container - dessen Hoehe richtet sich nach dem Text und die
     Fusszeile saesse sonst mitten im Absatz.
     Innen dieselbe Begrenzung wie .container, damit die Buttons an
     derselben Kante beginnen wie die Ueberschrift darueber. */
  position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2;
  max-width: var(--mw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.page-hero-actions { max-width: 620px; }
.page-hero-foot > * { margin-bottom: 0; }
/* Merkmale rechts, untereinander und rechtsbuendig - wie im Hero der
   Startseite. Die Trenner zwischen den Punkten entfallen dabei. */
.page-hero-foot .hero-trustrow {
  flex-direction: column; align-items: flex-end;
  gap: 7px; margin: 0; text-align: right;
}
.page-hero-foot .hero-trustrow .hero-trust-sep { display: none; }
.page-hero-foot .hero-cta-note { margin: 14px 0 0; }

/* Die Fusszeile deckt den unteren Rand ab - der mittige Textblock
   braucht dort Platz, sonst laufen h1/Lead unter die Buttons.
   Der obere Ausgleich haelt den Block optisch in der Mitte: ohne ihn
   zieht der einseitige Abstand die Ueberschrift nach oben.
   Stand 2026-09-02. */
/* Seiten mit Fusszeile: unten Platz fuer die Buttonzeile.
   Die verbindliche Metrik steht weiter unten (body.has-hero, mit
   !important) - dort wird der Ausgleich gesetzt. */
.page-hero:has(.page-hero-foot) .page-hero-cnt { padding-bottom: 150px; }

@media(max-width:900px) {
  /* Schmal: alles untereinander, linksbuendig - zwei Spalten waeren
     hier zu eng. Die Fusszeile laeuft wieder im Fluss mit. */
  /* .page-hero ist selbst Flex (fuer die vertikale Zentrierung). Eine
     statische Fusszeile wuerde dort als zweite SPALTE neben dem Text
     landen. Deshalb schmal auf Block umstellen und den Container-Rand
     wieder selbst mitbringen (die Fusszeile liegt ausserhalb von
     .container). */
  .page-hero:has(.page-hero-foot) { display: block; }
  .page-hero:has(.page-hero-foot) > .container { padding-top: 92px; }
  /* Schmal darf der Hero mitwachsen: die Fusszeile laeuft jetzt im
     Fluss und wuerde von der festen Bildschirmhoehe samt
     overflow:hidden unten abgeschnitten. */
  .page-hero:has(.page-hero-foot),
  body.has-hero .page-hero:has(.page-hero-bg) { min-height: 0; height: auto; }
  .page-hero-foot {
    position: relative; left: auto; right: auto; bottom: auto; z-index: 2;
    max-width: var(--mw); margin: 0 auto; padding: 28px 24px 44px;
    flex-direction: column; align-items: flex-start; gap: 20px;
  }
  .page-hero-foot .hero-trustrow {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    text-align: left; gap: 8px 14px;
  }
  .page-hero:has(.page-hero-foot) .page-hero-cnt { padding-bottom: 0; }
}
.hero-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.92); }
.hero-trust-item svg { flex-shrink: 0; color: #F5B301; }
.hero-trust-item.htx svg { color: rgba(255,255,255,.85); }
.hero-trust-sep { width: 1px; height: 15px; background: rgba(255,255,255,.25); }
/* 6 · Micro-Copy */
.hero-cta-note { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.5; max-width: 580px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-cta-note svg { color: rgba(255,255,255,.55); flex-shrink: 0; }
/* Helle Variante (page-intro / art-intro / contact-lead auf hellem Grund) */
.is-light-hero .hero-eyebrow { background: #fff; border-color: var(--border); box-shadow: var(--sh); }
.is-light-hero .hero-eyebrow .he-text { color: var(--dark); }
.is-light-hero .hero-trust-item { color: var(--text); }
.is-light-hero .hero-trust-item.htx svg { color: var(--accent-h); }
.is-light-hero .hero-trust-sep { background: var(--border); }
.is-light-hero .hero-cta-note { color: var(--text-light); }
.is-light-hero .hero-cta-note svg { color: var(--accent-h); }
@media(max-width:768px) {
  .hero-trustrow { gap: 8px 14px; }
  .hero-trust-item { font-size: 13px; }
}

/* MOBILE CTA BAR */
@media(max-width:768px) { section { padding: 60px 0; } .cta-banner { padding: 36px 0; } }

/* MID-CONTENT CTA — schlanker Streifen, nur ein Button (springt zum Kontaktbereich) */
.mid-cta { background: var(--bg-off); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mid-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; }
.mid-cta-text { flex: 1 1 340px; }
.mid-cta-text h3 { font-family: 'Lora', Georgia, serif; font-size: 20px; color: var(--dark); margin: 0 0 4px; line-height: 1.3; }
.mid-cta-text p { font-size: 14px; color: var(--text-light); margin: 0; line-height: 1.5; }
.mid-cta-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mid-cta-acts .btn { padding: 12px 22px; font-size: 15px; }
@media(max-width:768px) {
  .mid-cta .container { flex-direction: column; align-items: stretch; text-align: center; }
  .mid-cta-acts { justify-content: center; }
  .mid-cta-acts .btn { width: 100%; justify-content: center; }
}

/* MAP CONSENT (DSGVO – Zwei-Klick-Lösung, kein Google-Kontakt vor Zustimmung) */
.map-consent { position: relative; width: 100%; border-radius: 8px; overflow: hidden; background:
  linear-gradient(rgba(42,42,42,.72), rgba(42,42,42,.72)),
  repeating-linear-gradient(45deg, #dfe4e6 0 14px, #d6dcde 14px 28px);
  display: flex; align-items: center; justify-content: center; text-align: center; }
.map-consent .mc-inner { max-width: 380px; padding: 28px 22px; color: #fff; }
.map-consent .mc-icon { color: #fff; margin-bottom: 12px; opacity: .95; }
.map-consent .mc-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: #fff; }
.map-consent .mc-text { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.88); margin-bottom: 16px; }
.map-consent .mc-text a { color: #fff; text-decoration: underline; }
.map-consent .mc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: var(--r, 8px); font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s; }
.map-consent .mc-btn:hover { background: var(--accent-h); }
.map-consent iframe { width: 100%; display: block; border: 0; }

/* ============================================================
   KLICKBARE CARDS + DEZENTER HOVER (global, alle Kartentypen)
   ============================================================ */
/* Cards, die als ganzer Link fungieren: Textfarbe erben, kein Unterstrich */
a.prod-card, a.zub-card, a.variant-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
/* Dezenter Hover wie auf der Homepage — leichtes Anheben + stärkerer Schatten */
.prod-card, .zub-card, .variant-card { transition: box-shadow var(--t), transform var(--t); }
.prod-card:hover, .zub-card:hover, .variant-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
/* der ehemalige Link im Card-Fuß ist jetzt ein <span>; Pfeil-Animation beim Card-Hover */
a.prod-card .prod-link, a.zub-card .zub-link, a.variant-card .variant-link { transition: gap var(--t); }
a.prod-card:hover .prod-link, a.zub-card:hover .zub-link, a.variant-card:hover .variant-link { gap: 10px; }

/* INLINE-CTA — kompakter Abschluss unter einer Sektion, KEINE eigene Bandbreite/Section */
.inline-cta { text-align: center; margin-top: 40px; }
.inline-cta p { font-size: 15px; color: var(--text-light); margin: 0 0 14px; }
.inline-cta .btn { padding: 11px 22px; font-size: 15px; }

/* Info-Karten (Vergleich/Guide): dezenter Hover für einheitliches Verhalten */
.comp-card, .guide-card { transition: box-shadow var(--t), transform var(--t); }
.comp-card:hover, .guide-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

/* ============================================================
   MOBILE TOUCH-TARGETS (WCAG 2.5.5 / Apple HIG: min. 44px)
   Nur unter 768px — Desktop-Layout und Zeilenabstände bleiben unberührt.
   Betrifft Kontakt-, Footer- und Breadcrumb-Links, die als Textzeile
   ausgeliefert werden und deshalb nur ~23–38px hoch sind.
   ============================================================ */
@media (max-width: 768px) {
  .cta-phone,
  .page-hero-phone,
  .footer-contact a,
  .footer-col a,
  .footer-legal a,
  .footer-bottom a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Footer-Listen: Abstand kommt jetzt aus der Trefferfläche, nicht aus margin */
  .footer-contact a { margin-bottom: 0; }
  /* Telefonnummern im Hero/CTA dürfen die Zeile füllen, damit die Fläche greift */
  .page-hero-phone, .cta-phone { padding: 4px 0; }

  /* Consent-Button, Hero-Telefon und Kontaktzeilen auf volle Trefferfläche */
  .map-consent .mc-btn { min-height: 44px; padding: 12px 20px; }
  .hero-phone, .direct-call, .phone-cta { min-height: 44px; display: inline-flex; align-items: center; }
  /* Kontaktseite: Telefon/Mail in der Sidebar als volle Trefferfläche */
  .sidebar-contact-item a { min-height: 44px; display: inline-flex; align-items: center; }
  /* eigenständige Text-CTAs (kein Fließtext) brauchen ebenfalls 44px */
  .district-allregions a, .inline-cta a:not(.btn), .faq-more a,
  .phone-link, .region-chips a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Formularfelder: 43px -> 48px, bequem treffbar; 16px Schrift verhindert
     zusätzlich den Auto-Zoom von iOS Safari beim Fokussieren */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], select, textarea {
    min-height: 48px;
    font-size: 16px;
  }
  textarea { min-height: 120px; }
  /* Checkbox bleibt optisch 18px, bekommt aber eine 44px-Trefferfläche */
  .form-check input[type="checkbox"] { position: relative; }
  .form-check input[type="checkbox"]::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* Logo im Header (Impressum/Datenschutz nutzen Textlogo) */
  .logo { min-height: 44px; align-items: center; }

  /* HEADER-ÜBERLAUF: "Kostenlos beraten lassen" + Hamburger passen auf 375px
     nicht nebeneinander. Da .hdr-right flex-shrink:0 hat und der Button
     white-space:nowrap trägt, schob sich der Hamburger aus dem Viewport --
     wegen overflow-x:clip unsichtbar UND unklickbar, das Menü war nicht
     erreichbar. Header darf schrumpfen, CTA wird kompakter. */
  .hdr { gap: 10px; }
  /* !important, weil mehrere Seiten .hdr-right inline mit flex-shrink:0
     redefinieren -- die Inline-Blöcke laden nach dieser Datei. */
  /* flex-shrink darf greifen, aber der Container muss seine Kinder umschliessen:
     ohne width:auto kollabierte .hdr-right auf 0px und Button + Hamburger
     ragten heraus (Inline-Definitionen einiger Seiten setzen flex-shrink:0). */
  header .hdr .hdr-right { flex-shrink: 0 !important; width: auto; gap: 6px; }
  header .hdr .hdr-right .btn { padding: 10px 12px; font-size: 14px; white-space: nowrap; line-height: 1.2; flex-shrink: 0; min-height: 44px; }
  /* Logo darf schrumpfen, der CTA nicht -- sonst wird der Button unlesbar
     schmal und schiebt trotzdem den Hamburger hinaus. */
  header .hdr .logo { min-width: 0; flex-shrink: 1 !important; overflow: hidden; }
  /* Textlogo (Impressum/Datenschutz) mobil kompakter, damit CTA + Hamburger
     danebenpassen. Der Claim im <small> wird ausgeblendet statt angeschnitten
     -- abgeschnittener Text sieht wie ein Defekt aus. */
  header .hdr .logo:not(:has(img)) { font-size: 15px; line-height: 1.2; white-space: normal; }
  header .hdr .logo:not(:has(img)) small { display: none; }
  .logo img { height: 36px; }

  /* GRID-MINDESTBREITE: Bei `grid-template-columns: 1fr` behalten Grid-Items
     `min-width: auto` und werden nie schmaler als ihr breitester Inhalt --
     dadurch schoben Sidebar-Inhalte (400px) die einspaltige Kontaktseite auf
     382px statt 327px. `min-width: 0` erlaubt das Schrumpfen. */
  .contact-layout, .contact-layout > * { min-width: 0; }
}

/* Sehr schmale Geräte: CTA im Header auf Kurzform — der lange Text hat dort
   keinen Platz neben dem Hamburger. Vollständiger CTA steht direkt im Hero. */
@media (max-width: 430px) {
  header .hdr .hdr-right .btn { font-size: 0; padding: 12px 14px; min-height: 44px; }
  header .hdr .hdr-right .btn::after { content: 'Beratung'; font-size: 14px; font-weight: 600; }
}

/* BREITE TABELLEN — horizontal scrollbar statt gequetscht.
   tabindex im Markup macht den Bereich auch per Tastatur scrollbar (WCAG 2.1.1).
   Der Verlauf am rechten Rand zeigt an, dass es weitergeht: ohne ihn sieht
   abgeschnittener Text nach Defekt aus statt nach Scroll-Bereich. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; position: relative;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(42,42,42,.14), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(42,42,42,.14), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table-scroll > table { min-width: 520px; }
/* Hinweis nur dort, wo tatsächlich gescrollt werden muss */
@media (max-width: 768px) {
  .table-scroll::before { content: 'Zum Vergleichen seitlich wischen →'; display: block;
    font-size: 12.5px; color: var(--text-light); margin-bottom: 8px; }
}

/* ============================================================
   GOOGLE-BEWERTUNGSLEISTE unter dem Hero
   Ersetzt die frühere Badge-Trust-Bar: gleiche Bandbreite und Kachel-Optik,
   aber echte Rezensionen statt generischer Qualitätsmerkmale.
   ============================================================ */
.review-bar { background: var(--bg-off); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 0; overflow: hidden; }
.rev-viewport { overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); }
.rev-track { display: flex; will-change: transform; }
.rev-card { flex: 0 0 340px; margin-right: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.rev-stars { display: inline-flex; gap: 1px; color: #F5A623; }
.rev-quote { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rev-quote::before { content: "\201E"; }
.rev-quote::after  { content: "\201C"; }
.rev-author { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto; }
.rev-name { font-weight: 700; font-size: 14px; color: var(--dark); }
.rev-meta { font-size: 12px; color: var(--text-light); }
@media (max-width: 520px) { .rev-card { flex-basis: 280px; } }

/* ════════════════════════════════════════════════════════════
   TESTI-FEATURE — Referenz-Zitat mit Bild (Legacy, wird ersetzt)
   ════════════════════════════════════════════════════════════ */
.testi-feature-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.testi-feature-img img { width: 100%; height: 380px; object-fit: cover; display: block; border-radius: var(--r-lg); }
.testi-feature-stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: 24px; }
.testi-feature-quote { font-family: 'Lora', serif; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.6; color: var(--dark); margin-bottom: 24px; }
.testi-feature-quote::before { content: "\201E"; }
.testi-feature-quote::after { content: "\201C"; }
.testi-feature-name { font-weight: 700; font-size: 15px; color: var(--dark); }
.testi-feature-meta { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.testi-feature-cta { margin-top: 32px; }
@media(max-width:800px) { .testi-feature-inner { grid-template-columns: 1fr; gap: 36px; } .testi-feature-img img { height: 240px; } }

/* ════════════════════════════════════════════════════════════
   SOCIAL-PROOF — Bild-Karussell + Review-Karussell
   ════════════════════════════════════════════════════════════ */
.social-proof { padding: 80px 0; }
.social-proof .sec-hdr { text-align: center; margin-bottom: 48px; }
.social-proof .sec-hdr h2 { margin-bottom: 8px; }
.social-proof .sec-hdr p { color: var(--text-light); font-size: 17px; }
.sp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.sp-carousel { position: relative; }
.sp-carousel .sp-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.sp-carousel .sp-slider::-webkit-scrollbar { display: none; }
.sp-carousel .sp-slide { min-width: 100%; scroll-snap-align: start; box-sizing: border-box; }
.sp-carousel .sp-slide img { width: 100%; height: 380px; object-fit: cover; border-radius: var(--r-lg); display: block; }
.sp-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.15); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .2s; }
.sp-nav:hover { background: #fff; }
.sp-nav.prev { left: 10px; }
.sp-nav.next { right: 10px; }
.sp-nav svg { width: 18px; height: 18px; fill: none; stroke: var(--dark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sp-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 28px 24px; }
.sp-card .rev-stars { margin-bottom: 16px; }
.sp-card blockquote { font-family: 'Lora', serif; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.65; color: var(--dark); margin: 0 0 20px; font-style: normal; }
.sp-card blockquote::before { content: "\201E"; }
.sp-card blockquote::after { content: "\201C"; }
.sp-card .sp-author { font-weight: 700; font-size: 15px; color: var(--dark); }
.sp-card .sp-meta { font-size: 13px; color: var(--text-light); margin-top: 3px; }
.sp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.sp-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--border); cursor: pointer; padding: 0; transition: background .2s; }
.sp-dots button.active { background: var(--panel); }
.sp-cta { text-align: center; margin-top: 36px; }
/* Review-Karussell: Pfeile unter der Karte statt darüber */
.sp-reviews { position: static; }
.sp-reviews .sp-nav { position: static; transform: none; }
.sp-reviews .sp-nav-row { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 16px; }
.sp-reviews .sp-nav-row .sp-dots { margin-top: 0; }
@media(max-width:800px) {
  .sp-inner { grid-template-columns: 1fr; gap: 32px; }
  .sp-carousel .sp-slide img { height: 260px; }
  .sp-card { padding: 22px 20px 20px; }
  .sp-nav { width: 34px; height: 34px; }
}

/* ════════════════════════════════════════════════════════════
   PROCESS — volle dunkle Sektion
   ════════════════════════════════════════════════════════════ */
section.process { background: var(--panel) !important; padding: 76px 0; }
section.process > .container { max-width: var(--mw); }
section.process .sec-hdr h2 { color: #fff; }
section.process .sec-hdr p { color: rgba(255,255,255,.55); }
section.process > .container > .sec-hdr { margin-bottom: 44px; }

@media(max-width:1024px) {
  section.process { padding: 60px 0; }
}
@media(max-width:680px) {
  section.process { padding: 44px 0; }
}

/* ════════════════════════════════════════════════════════════
   CTA-BANNER + FOOTER — einheitlicher Seitenabschluss
   Der CTA sitzt als dunkler Block mit oben abgerundeten Ecken auf
   dem hellen Grund und laeuft unten buendig in den Footer. Der
   Footer selbst ist hell, damit die Kante zwischen beiden sichtbar
   bleibt (beide dunkel liefen ohne Trennung ineinander).
   Hoch spezifisch, um die Inline-Styles der Einzelseiten zu schlagen.
   ════════════════════════════════════════════════════════════ */
section.cta-banner, .cta-banner {
  background: var(--dark) !important;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  margin-bottom: 0;
}
.cta-banner + footer { margin-top: 0; }

/* Der Karriere-Teaser (nur Startseite) ist eine blaue Card auf weissem Grund.
   Der CTA-Banner darunter behaelt daher seine normale Panel-Rundung — die
   Sonderregel von zuvor entfaellt. */

/* Heller Footer — kehrt die auf Weiss ausgelegten Textfarben um */
body footer { background: var(--bg-off); color: var(--text-light); border-top: 1px solid var(--border); }
body footer .footer-brand .logo img { filter: none; }
body footer .footer-brand .logo { color: var(--dark); }
body footer .footer-brand .logo small { color: var(--text-light); }
body footer .footer-brand > p { color: var(--text-light); }
body footer .footer-contact a { color: var(--text); }
body footer .footer-contact a:hover { color: var(--accent-h); }
body footer .footer-col h4,
body footer .footer-col .footer-col-title { color: var(--text-light); }
body footer .footer-col a { color: var(--text) !important; }
body footer .footer-col a:hover { color: var(--accent-h); }
body footer .footer-bottom { border-top-color: var(--border); }
body footer .footer-bottom p { color: var(--text-light) !important; }
body footer .footer-seo { color: var(--text-light) !important; }
body footer .footer-made { color: var(--text-light) !important; }
body footer .footer-made a { color: var(--text-light); }
body footer .footer-made a:hover { color: var(--accent-h); }

/* ════════════════════════════════════════════════════════════
   MOTION
   Zurueckhaltende Bewegung: Karten und Abschnitte blenden beim
   Hereinscrollen einmalig ein, Hover hebt leicht an. Nur transform
   und opacity — beides laeuft auf der GPU.
   ════════════════════════════════════════════════════════════ */

/* — Hover nur auf Geraeten mit echtem Zeiger —
   Touch loest beim Tippen einen Hover aus, der bis zum naechsten
   Tap kleben bleibt. Die Transform-Effekte daher ausgrenzen. */
@media (hover: none), (pointer: coarse) {
  .btn:hover,
  .trust-item:hover,
  .ba-card:hover,
  .prod-card:hover, .zub-card:hover, .variant-card:hover,
  .comp-card:hover, .guide-card:hover { transform: none; }
}

/* — Scroll-Reveal —
   Abschnitte und Karten kommen beim ersten Sichtbarwerden herein.
   .reveal setzt der Loader per JS; ohne JS bleibt alles sichtbar. */
.js-reveal .reveal { opacity: 0; transform: translate3d(0, 16px, 0); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: translate3d(0, 0, 0);
  /* Laenger und weicher als zuvor (520ms): die Bewegung soll ausklingen,
     nicht stoppen. Kurve ohne Ueberschwingen - Apples Vorgabe fuer
     UI-Bewegung ist kritisch gedaempft. */
  transition: opacity 720ms cubic-bezier(.22,.61,.36,1), transform 720ms cubic-bezier(.22,.61,.36,1);
}
/* Gruppen laufen versetzt herein — der Abstand liest als eine Bewegung */
.js-reveal .reveal.d1.is-in { transition-delay: 90ms; }
.js-reveal .reveal.d2.is-in { transition-delay: 180ms; }
.js-reveal .reveal.d3.is-in { transition-delay: 270ms; }
.js-reveal .reveal.d4.is-in { transition-delay: 360ms; }

/* Karten und Buttons weicher schalten als die globalen .2s ease */
.prod-card, .zub-card, .variant-card, .comp-card, .guide-card, .ba-card, .trust-item {
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}

/* — Reduced Motion —
   Bewegung raus, Einblenden bleibt: der Inhalt soll weiter als
   "neu" lesbar sein, nur ohne Verschiebung. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { transform: none; }
  .js-reveal .reveal.is-in { transition: opacity 200ms ease; transform: none; }
  .js-reveal .reveal.d1.is-in, .js-reveal .reveal.d2.is-in,
  .js-reveal .reveal.d3.is-in, .js-reveal .reveal.d4.is-in { transition-delay: 0ms; }
  .prod-card, .zub-card, .variant-card, .comp-card, .guide-card, .ba-card, .trust-item {
    transition: box-shadow 200ms ease, border-color 200ms ease; }
}

/* Telefon-Link im dunklen Seiten-Hero — stand ohne eigene Regel blass da,
   weil er nur die gedaempfte Grundfarbe des Heros erbte. Er ist der zweite
   Konversionsweg neben dem Button und muss klar lesbar sein. */
.page-hero-phone {
  font-size: 16px; font-weight: 600; color: rgba(255,255,255,.92);
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 200ms var(--ease-out);
}
.page-hero-phone:hover, .page-hero-phone:focus-visible { color: #fff; }
.page-hero-phone svg { flex-shrink: 0; }

/* Breadcrumb im dunklen Seiten-Hero — dieselbe Darstellung wie auf den
   Regionsseiten. Die Leisten-Optik (heller Balken mit Rahmen) gilt nur
   noch, wenn die Navigation ausserhalb des Heros steht. */
body .page-hero .breadcrumb {
  background: none; border: none; padding: 0; margin-bottom: 20px;
}
body .page-hero .breadcrumb ol { gap: 7px; font-size: 13px; color: rgba(255,255,255,.7); }
body .page-hero .breadcrumb a { color: rgba(255,255,255,.75); }
body .page-hero .breadcrumb a:hover { color: rgba(255,255,255,.92); }
/* Spezifitaet ueber body, damit die Inline-Styles der Einzelseiten
   (gleiche Spezifitaet, aber spaeter im Dokument) nicht gewinnen. */
body .page-hero .breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 6px; color: #fff; }
body .page-hero .breadcrumb li:last-child { color: rgba(255,255,255,.85); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════
   SITEWIDE EDITORIAL-EBENE
   Zieht den Stil der Startseite auf alle Unterseiten:
   1) durchgehender Marmor-Verlauf am Body statt Sektionsfarben
   2) Scroll-Reveals (.rv/.rise/.stag) und 3D-Bildrahmen (.zoom3d)
   3) dunkelblaue Kontrastflaechen statt Grau
   Steht bewusst am Dateiende, um die frueheren Regeln zu schlagen.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Hintergrund ─────────────────────────────────────────────── */
body {
  background-color: #F7F7F5;
  background-image:
    linear-gradient(103deg, rgba(255,255,255,0) 12%, rgba(255,255,255,.85) 24%, rgba(255,255,255,0) 34%),
    linear-gradient(97deg,  rgba(199,202,204,0) 30%, rgba(199,202,204,.50) 42%, rgba(199,202,204,0) 53%),
    linear-gradient(107deg, rgba(255,255,255,0) 52%, rgba(255,255,255,.75) 63%, rgba(255,255,255,0) 74%),
    linear-gradient(94deg,  rgba(205,207,208,0) 70%, rgba(205,207,208,.42) 80%, rgba(205,207,208,0) 90%),
    radial-gradient(70% 32% at 82% 12%, rgba(212,213,210,.55) 0%, rgba(212,213,210,0) 70%),
    radial-gradient(62% 26% at 10% 38%, rgba(255,255,255,.90) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(75% 30% at 92% 62%, rgba(202,205,206,.48) 0%, rgba(202,205,206,0) 70%),
    radial-gradient(65% 28% at 6%  84%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(160deg, #FFFFFF 0%, #EFEFEC 30%, #F9F9F7 55%, #ECEDEB 80%, #FCFCFB 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Sektionsflaechen entfernen, damit der Verlauf durchlaeuft.
   Ausgenommen: dunkle Panels, CTA und Footer. */
body section:not(.process):not(.cta-banner):not(.hero):not(.page-hero):not(.px-band):not(.endcta):not(.referenzbesuch):not(.planungsphase),
body .beforeafter, body .products, body .usps, body .testimonials,
body .service-area, body .komplett, body .kar-teaser,
body .review-bar, body .mid-cta, body .breadcrumb-bar, body .art-section {
  background: transparent !important;
}
/* Baender behalten ihre Trennlinien, verlieren nur die Flaeche */
body .review-bar, body .mid-cta { border-color: var(--border); }

/* ── 2 · Kontrastflaechen: dunkelblau statt grau ──────────────────── */
:root { --panel: #24404E; --panel-soft: #2E5468; }
body section.process > .container { background: transparent; }
body .cta-banner { background: var(--panel) !important; }
body .referenzbesuch { background: var(--panel) !important; }
body .cta-inner h2, body .cta-phone { color: #fff; }
/* Nach dem Umbau auf das zweispaltige Grid ist der Text ein Enkel von
   .cta-inner. Der Kind-Selektor > p greift dort nicht mehr, deshalb
   hier ohne ihn — und die weisse Formularkarte wieder ausgenommen. */
body .cta-inner p { color: rgba(255,255,255,.84); }
body .cta-note { color: rgba(255,255,255,.66); }
body .cta-form-card, body .cta-form-card p, body .cta-form-card label,
body .cta-form-success, body .cta-form-success p { color: var(--text); }
body .cta-form-card label { color: var(--dark); }
body .cta-form-card .cta-form-note, body .cta-form-check label { color: var(--text-light); }
body .cta-form-success h3 { color: var(--dark); }
body .cta-inner p a, body .cta-banner p a { color: #7FC4DE !important; }

/* ── 3 · Scroll-Reveals ──────────────────────────────────────────────
   Das bestehende .reveal/.is-in-System (siehe reveal.js und die Regeln
   weiter oben) bleibt unveraendert und deckt die Unterseiten ab.
   Hier nur die Hover-Entkopplung: nach dem Einblenden duerfen Karten
   nicht die langsame Reveal-Transition fuer ihren Hover erben. */
.js-reveal .reveal.is-in.prod-card,
.js-reveal .reveal.is-in.zub-card,
.js-reveal .reveal.is-in.variant-card,
.js-reveal .reveal.is-in.usp-item {
  transition: box-shadow .08s linear, transform .08s linear, border-color .08s linear;
  transition-delay: 0s;
}

/* ── 4 · 3D-Bildrahmen ───────────────────────────────────────────── */
.zoom3d { position: relative; perspective: 1400px;
          transform: scale(.94); opacity: 0; transform-origin: center;
          transition: transform 720ms cubic-bezier(.22,.61,.36,1), opacity 720ms cubic-bezier(.22,.61,.36,1); }
.zoom3d.in { transform: scale(1); opacity: 1; }
.zoom3d::before {
  content: ''; position: absolute; z-index: 0; inset: 22px -20px -20px 22px;
  background: linear-gradient(145deg, var(--panel-soft) 0%, var(--panel) 55%, #1B303B 100%);
  border-radius: 8px; transition: transform 400ms var(--ease-out);
}
.zoom3d.right::before { inset: 22px 22px -20px -20px; }
/* Gilt auch fuer verschachtelte Bildcontainer der Unterseiten, bei
   denen das .img-ph eine Ebene tiefer liegt und die Hoehe traegt. */
.zoom3d > img, .zoom3d > .img-ph, .zoom3d > * > .img-ph, .zoom3d > figure > img {
  position: relative; z-index: 1; border-radius: 6px;
  border: 1px solid rgba(36,64,78,.55);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset,
              0 18px 40px -14px rgba(27,48,59,.55),
              0 40px 80px -30px rgba(27,48,59,.45);
  transform: rotateY(3.2deg) rotateX(1.1deg); transform-origin: left center;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.zoom3d.right > img, .zoom3d.right > .img-ph, .zoom3d.right > * > .img-ph, .zoom3d.right > figure > img {
  transform: rotateY(-3.2deg) rotateX(1.1deg); transform-origin: right center;
}
/* Hover nur mit echtem Zeigegeraet (Stand 2026-09-30) */
@media (hover: hover) and (pointer: fine) {
.zoom3d:hover > img, .zoom3d:hover > .img-ph,
.zoom3d:hover > * > .img-ph, .zoom3d:hover > figure > img,
.zoom3d.right:hover > img, .zoom3d.right:hover > .img-ph,
.zoom3d.right:hover > * > .img-ph, .zoom3d.right:hover > figure > img {
  transform: rotateY(0deg) rotateX(0deg);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
              0 26px 52px -16px rgba(27,48,59,.6),
              0 54px 96px -34px rgba(27,48,59,.5);
}
.zoom3d:hover::before { transform: translate(4px, 4px); }
.zoom3d.right:hover::before { transform: translate(-4px, 4px); }
}

/* ── 4b · Inline-CTA als blaue Card ──────────────────────────────────
   Der Ausstellungsraum-Hinweis mitten auf den Produktseiten bekommt
   dieselbe Flaeche wie die Kontaktsektion, damit beide CTAs einer
   Seite als Paar lesbar sind statt als loser Text. */
body .inline-cta {
  background: var(--panel); border-radius: var(--r-panel);
  padding: 40px 44px; margin-top: 56px; text-align: center;
}
body .inline-cta p { color: rgba(255,255,255,.86); font-size: 16.5px; max-width: 62ch;
                     margin: 0 auto 20px; line-height: 1.6; }
body .inline-cta .btn { padding: 13px 26px; font-size: 15.5px; }
body .inline-cta .btn-dark { background: #fff; color: var(--panel); border-color: #fff; --btn-fill: #E8EEF1; }
body .inline-cta .btn-dark:hover { border-color: #E8EEF1; color: var(--panel); }
@media(max-width:680px){ body .inline-cta { padding: 30px 22px; margin-top: 40px; } }

/* ── 4c · Cards und Boxen behalten eine eigene Flaeche ────────────────
   Beim Freistellen der Sektionen wurden auch echte Karten transparent.
   Sie sind aber Inhalt, kein Hintergrund, und brauchen eine Flaeche,
   damit sie sich vom Verlauf abheben. Weiss statt dem frueheren Grau,
   weil der Seitenhintergrund jetzt selbst grau-meliert ist. */
body .pricing-box, body .info-box, body .comp-card, body .link-card,
body .wert-card, body .team-card, body .testi-card,
body .form-card, body .sidebar-card, body .dsgvo-note, body .rg-card,
body .guide-card, body .ba-card, body .region-card {
  background: #fff;
  border: 1px solid var(--border);
}
/* Boxen, die schon einen Rahmen mitbringen, bekommen keinen zweiten */
body .pricing-box, body .info-box { border: 1px solid var(--border); }

/* ── 4d · Bildpaare (Referenzen) ─────────────────────────────────────
   Jedes Projektbild traegt seinen eigenen Rahmen. Etwas flacher als die
   grossen Editorial-Bilder, weil zwei geneigte Bilder nebeneinander
   sonst unruhig wirken. */
/* Platte tritt nur nach unten hervor, seitlich buendig: bei zwei Bildern
   nebeneinander wuerde ein Ueberstand nach aussen in den Nachbarn laufen. */
.proj-imgs .zoom3d::before { inset: 10px 2px -5px 6px; border-radius: 6px; }
.proj-imgs .zoom3d.right::before { inset: 10px 6px -5px 2px; }
.proj-imgs .zoom3d > img, .proj-imgs .zoom3d > .img-ph {
  transform: rotateY(1.6deg) rotateX(.5deg); transform-origin: left center;
}
.proj-imgs .zoom3d.right > img, .proj-imgs .zoom3d.right > .img-ph {
  transform: rotateY(-1.6deg) rotateX(.5deg); transform-origin: right center;
}
.proj-imgs .zoom3d:hover::before { inset: 12px 1px -7px 7px; }
.proj-imgs .zoom3d.right:hover::before { inset: 12px 7px -7px 1px; }
@media(max-width:900px){
  .proj-imgs .zoom3d > img, .proj-imgs .zoom3d > .img-ph,
  .proj-imgs .zoom3d.right > img, .proj-imgs .zoom3d.right > .img-ph { transform: none; }
  .proj-imgs .zoom3d::before, .proj-imgs .zoom3d.right::before { inset: 8px 2px -5px 2px; }
}

/* ── 4e · CTA mit Kontaktformular (alle Unterseiten) ─────────────────
   Der Abschluss jeder Seite ist zweispaltig: links die Argumente und
   die Telefonnummer, rechts ein kurzes Formular. Gleiche Struktur und
   Farben wie der Abschluss der Startseite. */
body .cta-banner .cta-inner { max-width: 1000px; text-align: left; }
.cta-form-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.cta-form-grid .cta-acts { justify-content: flex-start; margin-top: 22px; }
.cta-form-card { grid-column: 2; grid-row: 1; background: #fff; border-radius: 6px; padding: 28px 26px; }
.cta-form-card .cf-h { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 18px; }
.cta-form-card .form-group { margin-bottom: 13px; }
.cta-form-card label { display: block; font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 5px; }
.cta-form-card label .req { color: var(--accent); margin-left: 2px; }
.cta-form-card input, .cta-form-card textarea { width: 100%; font-family: 'Inter', sans-serif;
  font-size: 15px; color: var(--text); background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 10px 13px; outline: none;
  transition: border-color var(--t), box-shadow var(--t); }
.cta-form-card textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.cta-form-card input:focus, .cta-form-card textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,115,152,.12); }
.cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.cta-form-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 16px; }
.cta-form-check input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }
.cta-form-check label { font-size: 12.5px; color: var(--text-light); line-height: 1.45; font-weight: 400; }
.cta-form-check label a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cta-form-card .btn { width: 100%; justify-content: center; }
.cta-form-note { margin-top: 10px; font-size: 12px; color: var(--text-light); text-align: center; }
/* Erfolgsmeldung nach dem Absenden. Frueher display:none -> block,
   also ein harter Wechsel genau in dem Moment, in dem aus einem
   Besucher eine Anfrage wird. display laesst sich nicht ueberblenden,
   deshalb visibility + opacity: die Box liegt im Layout bereit und
   wird nur sichtbar geschaltet.
   Etwas laenger als UI-Standard (320ms), weil das hier einmal pro
   Anfrage passiert und der Moment etwas Gewicht vertraegt.
   Stand 2026-09-02. */
.cta-form-success {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  background: #fff; border-radius: 6px; padding: 30px 26px; text-align: center;
  transform: translateY(8px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s linear 320ms;
}
.cta-form-success.visible {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .cta-form-success { transform: none; transition: opacity 160ms linear, visibility 0s linear 160ms; }
  .cta-form-success.visible { transition: opacity 160ms linear, visibility 0s; }
}
.cta-form-success h3 { margin-bottom: 9px; font-size: 20px; }
.cta-form-success p { font-size: 14.5px; color: var(--text-light); line-height: 1.6; }
.cta-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
@media(max-width:900px){ .cta-form-grid { grid-template-columns: 1fr; gap: 30px; } .cta-form-card { grid-column: 1; grid-row: 2; } .cta-form-success { grid-column: 1; grid-row: 2; } }

/* ── 5 · Karten-Hover einheitlich schnell ────────────────────────── */
.prod-card, .zub-card, .variant-card, .usp-item, .komplett-step, .px-fig {
  transition: box-shadow .08s linear, transform .08s linear, border-color .08s linear;
  will-change: transform;
}
.prod-card:hover, .zub-card:hover, .variant-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

@media(max-width:900px){
  .zoom3d > img, .zoom3d > .img-ph, .zoom3d.right > img, .zoom3d.right > .img-ph, .zoom3d.right > * > .img-ph, .zoom3d.right > figure > img { transform: none; }
  .zoom3d::before, .zoom3d.right::before, .zoom3d:hover::before { inset: 14px 0 -12px 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rise, .zoom3d, .zoom3d.in { opacity: 1; transform: none; transition: none; }
  .stag > *, .stag.in > * { opacity: 1; transform: none; transition: none; }
  .zoom3d > img, .zoom3d > * > .img-ph, .zoom3d:hover > img { transform: none; transition: none; }
}

/* Die weisse Formularkarte im blauen CTA behaelt dunkle Schrift, auch
   wenn eine Seite ihre eigenen weissen cta-inner-Regeln mitbringt. */
body .cta-banner .cta-form-card,
body .cta-banner .cta-form-card p,
body .cta-banner .cta-form-success,
body .cta-banner .cta-form-success p { color: var(--text) !important; }
body .cta-banner .cta-form-card label,
body .cta-banner .cta-form-success h3 { color: var(--dark) !important; }
body .cta-banner .cta-form-note,
body .cta-banner .cta-form-check label { color: var(--text-light) !important; }

/* ══════════════════════════════════════════════════════════════════
   FORMULARE — kompakt mit wanderndem Label
   Stand 2026-08-28. Vorbild: Nordsport (FloatField), uebersetzt in
   Hillers Farben und Typografie.

   Warum: vorher stand ueber jedem Feld ein Label UND im Feld ein
   Platzhalter mit demselben Inhalt ("Name" / "Ihr Name"). Doppelt
   gemoppelt, und jedes Label kostete eine Zeile Hoehe.

   Jetzt sitzt das Label im Feld und rutscht beim Tippen nach oben.
   Es bleibt ein echtes <label for> — ein blosser Platzhalter waere
   nicht barrierefrei, weil er beim Tippen verschwindet.

   Technik: :placeholder-shown erkennt das leere Feld. Deshalb braucht
   JEDES Feld ein placeholder=" " (ein Leerzeichen), sonst greift die
   Regel nicht. Beim <select> uebernimmt das eine leere erste <option>.
   ────────────────────────────────────────────────────────────────── */

.ff { position: relative; margin-bottom: 9px; }

.ff input,
.ff textarea,
.ff select {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;              /* runder als --r, wie bei Nordsport */
  padding: 21px 15px 7px;           /* oben Label, darunter der Text */
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  appearance: none;
}
.ff textarea { resize: vertical; min-height: 74px; line-height: 1.5; padding-top: 23px; }

.ff label {
  position: absolute;
  left: 15px;
  top: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-light);
  pointer-events: none;
  transform: translateY(0);
  transition: color .18s var(--ease-out);
}
/* Label liegt IMMER klein oben. Der Feldtext bleibt dadurch in jedem
   Zustand an derselben Stelle - nichts springt beim Fokussieren, und
   die Zeile sitzt optisch mittig statt in der unteren Haelfte. */
.ff label { top: 7px; font-size: 11px; font-weight: 600; }
.ff label .opt { font-size: 11px; }
/* Fokus faerbt das Label nur ein, es bewegt sich nicht. */
.ff input:focus + label,
.ff textarea:focus + label,
.ff select:focus + label { color: var(--accent-h); }

.ff input:focus, .ff textarea:focus, .ff select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,115,152,.12);
}
.ff .req { color: var(--accent); margin-left: 1px; }
.ff .opt { font-weight: 400; color: var(--text-light); }

/* Auswahlfelder: ein <select> kennt kein :placeholder-shown, deshalb steht
   das Label dort IMMER klein oben - und der gewaehlte Wert braucht darunter
   eigenen Platz. Ohne das ueberlappen "Art des Projekts" und "Bitte waehlen".
   Der eigene Pfeil ersetzt den nativen, den appearance:none entfernt. */
.ff select {
  padding: 24px 40px 8px 15px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565f6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.ff select + label { top: 7px; font-size: 11px; font-weight: 600; }

/* Zwei Felder nebeneinander (Telefon + PLZ) */
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .ff-row { grid-template-columns: 1fr; } }

/* Die Karte darum: runder, damit sie zu den Feldern passt */
.cta-form-card { border-radius: 20px; }
.cta-form-success { border-radius: 20px; }
.cta-form-card .btn { border-radius: 14px; }

/* Sichtbare Labels der Altform ausblenden, wo .ff aktiv ist */
.ff > label.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Zwei Wege aus der Produktuebersicht heraus: alle Produkte, alle Zubehoere.
   Stand 2026-08-28 (Kundentermin). */
.prod-actions { display: flex; gap: 14px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.prod-actions .btn { min-width: 232px; justify-content: center; }
@media (max-width: 520px) { .prod-actions .btn { width: 100%; } }

/* ── Aktionsleiste ────────────────────────────────────────────────
   Schmale Zeile unter dem Hero. Bewusst kein Pop-up: das unterbricht
   und wirkt bei einem Premium-Anbieter billig. Mit .is-off komplett
   aus, ohne das Markup zu entfernen. */
.promo-bar { background: var(--panel); color: #fff; }
.promo-bar.is-off { display: none; }
.promo-bar p { margin: 0; padding: 13px 0; display: flex; align-items: center;
  justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 15px; text-align: center; }
.promo-tag { background: var(--cta); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.promo-txt { color: rgba(255,255,255,.92); }
.promo-link { color: #fff; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); white-space: nowrap; }
.promo-link:hover { text-decoration-color: #fff; }
@media (max-width: 620px) { .promo-bar p { font-size: 14px; gap: 9px; padding: 12px 0; } }

/* Carport und Vordach stehen bewusst nicht im Kachelraster (Fokus liegt
   auf Terrasse), sind aber als Leistung erreichbar. Stand 2026-08-28. */
.prod-more { text-align: center; margin-top: 34px; font-size: 16px; color: var(--text-light); }
.prod-more a { color: var(--accent); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(0,115,152,.35); }
.prod-more a:hover { text-decoration-color: var(--accent); }

/* ── Kopfleiste als schwebende Insel ───────────────────────────────
   Die weisse Flaeche laeuft nicht mehr randlos durch, sondern endet
   links vor dem Logo und rechts hinter dem Button - mit abgerundeten
   unteren Ecken. Links und rechts scheint der Hintergrund durch.

   Technik: die Farbe wandert vom <header> auf .hdr. Der header selbst
   bleibt transparent und traegt weiter das sticky-Verhalten; .hdr ist
   das Element, das die Form bekommt. */
/* Der header traegt keine eigene Flaeche mehr - sonst laeuft Weiss ueber
   die Inselkanten hinaus bis zum Fensterrand. Farbe und Form sitzen
   ausschliesslich auf .hdr. !important, weil styles.css spaeter greift. */
header, header.is-scrolled {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Die Insel umschliesst Logo und Button eng: sie beginnt kurz vor dem
   Logo und endet kurz hinter dem Button. Der Container ist breiter -
   deshalb zieht ein negativer Aussenabstand die Flaeche auf Inhaltsbreite
   zusammen, statt die Elemente zu verschieben. */
.hdr {
  /* Die Insel muss mindestens so breit sein wie der Seiteninhalt, sonst
     schauen Karten und Texte links und rechts daneben hervor, waehrend
     man an ihr vorbeiscrollt. --mw ist die Inhaltsbreite, 48px sind die
     beiden Container-Innenabstaende. */
  padding: 0 26px;
  margin: 0 auto;
  width: fit-content;
  min-width: min(100%, calc(var(--mw) + 48px));
  max-width: 100%;
  border-radius: 0 0 20px 20px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(42,42,42,.10);
  transition: background .25s ease, box-shadow .25s ease;
}
header.is-scrolled .hdr {
  background: rgba(255,255,255,.97);
  box-shadow: 0 4px 20px rgba(42,42,42,.12);
  backdrop-filter: saturate(1.1) blur(6px);
}
/* Ueber dem Hero (ungescrollt) bleibt die Insel unsichtbar, damit das Foto
   frei steht - Schrift und Logo sind dort ohnehin weiss. Nur auf der
   Startseite: .home-hero setzt das Skript, das auch .is-scrolled schaltet. */
body.has-hero header:not(.is-scrolled) .hdr { background: transparent; box-shadow: none; }
@media (max-width: 620px) { .hdr { padding: 0 14px; border-radius: 0 0 14px 14px; } }


/* ── Header ueber einem Bild-Hero ──────────────────────────────────
   Auf allen Seiten mit <body class="has-hero"> liegt die Navigation
   ueber dem Foto: Schrift und Logo weiss, keine weisse Flaeche. Erst
   beim Scrollen (.is-scrolled) blendet die Insel ein.
   Stand 2026-08-28 - lag vorher nur in index.html, deshalb hatten die
   Unterseiten einen weissen Balken ueber ihrem Hero. */
/* Der CTA-Button erscheint erst mit der weissen Kopfleiste.
   Ganz oben liegt der Hero mit eigenem, groesserem Button - ein
   zweiter daneben ist doppelt gemoppelt und drueckt die Navigation
   zusammen. Beim Scrollen faehrt er zusammen mit der weissen Insel
   ein und uebernimmt die Rolle des Heros, der dann weg ist.
   visibility statt display, damit sich der Wechsel ueberblenden
   laesst; die Breite bleibt reserviert, sonst springt die Leiste.
   Stand 2026-09-03. */
body.has-hero header .hdr-right > .btn {
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s;
}
body.has-hero header:not(.is-scrolled) .hdr-right > .btn {
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.has-hero header .hdr-right > .btn,
  body.has-hero header:not(.is-scrolled) .hdr-right > .btn { transform: none; }
}

body.has-hero header:not(.is-scrolled) .main-nav a {
  color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
body.has-hero header:not(.is-scrolled) .main-nav a:hover,
body.has-hero header:not(.is-scrolled) .main-nav a:focus-visible {
  color: var(--dark); background: #fff; text-shadow: none;
}
body.has-hero header:not(.is-scrolled) .main-nav a.active {
  color: #fff; background: rgba(255,255,255,.16);
}
body.has-hero header:not(.is-scrolled) .logo img { filter: brightness(0) invert(1); }
body.has-hero header:not(.is-scrolled) .hamburger span { background: #fff; }
body.has-hero header:not(.is-scrolled) .hdr-phone { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
/* Dropdowns behalten ihre helle Flaeche - dort wieder dunkle Schrift */
body.has-hero header:not(.is-scrolled) .dropdown a { color: var(--text); text-shadow: none; }
body.has-hero header:not(.is-scrolled) .dropdown a:hover { color: var(--dark); background: var(--bg-off); }


/* ── Mobile-Nav: aufklappbare Gruppen ──────────────────────────────
   Statt 32 flacher Eintraege gibt es vier Gruppen (Produkte, Zubehoer,
   Regionen, Ratgeber) plus fuenf direkte Links. <details>/<summary>
   bringt das Auf- und Zuklappen ohne JavaScript mit - inklusive
   Tastaturbedienung und korrekter Semantik fuer Screenreader.
   Stand 2026-08-28. */
.mobile-nav .mn-group { list-style: none; }
.mobile-nav .mn-group details { border-bottom: 1px solid var(--border); }
.mobile-nav .mn-group summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; font-size: 17px; font-weight: 600; color: var(--dark);
  cursor: pointer; list-style: none;
}
.mobile-nav .mn-group summary::-webkit-details-marker { display: none; }
.mobile-nav .mn-group summary svg { transition: transform .25s var(--ease-out); flex-shrink: 0; color: var(--text-light); }
.mobile-nav .mn-group details[open] summary svg { transform: rotate(180deg); }
.mobile-nav .mn-group details[open] summary { color: var(--accent); }
.mobile-nav .mn-sub { list-style: none; padding: 0 0 10px; margin: 0; }
.mobile-nav .mn-sub li { border: 0; }
.mobile-nav .mn-sub a {
  display: block; padding: 11px 0 11px 16px; font-size: 15.5px;
  font-weight: 500; color: var(--text-light); border-bottom: 0;
}
.mobile-nav .mn-sub a:hover, .mobile-nav .mn-sub a.active { color: var(--accent); }
/* Die fuenf direkten Links tragen weiter das Standard-Aussehen der Liste */


/* ══════════════════════════════════════════════════════════════════
   BEWEGUNG AUF DEM HANDY
   Stand 2026-08-28.

   Am Handy fehlt der Hover - ohne Scroll-Bewegung wirkt die Seite tot.
   Deshalb gilt hier: mobil deutlicher als am Desktop, aber ruhig.

   Werte nach Apples Vorgabe fuer UI-Bewegung: kritisch gedaempft
   (kein Nachwippen), Response ~0.4s. Bewegt werden ausschliesslich
   transform und opacity - beides laeuft im Compositor und ruckelt
   auch auf aelteren Geraeten nicht.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Etwas mehr Weg als am Desktop (16px -> 22px): auf kleinem Schirm
     ist die Bewegung sonst kaum wahrnehmbar. */
  .js-reveal .reveal { transform: translate3d(0, 22px, 0); }
  .js-reveal .reveal.is-in {
    transition: opacity 760ms cubic-bezier(.22,.61,.36,1), transform 760ms cubic-bezier(.22,.61,.36,1);
  }
  /* Karten einer Reihe laufen weiter versetzt, aber enger getaktet -
     untereinander gestapelt wirkt ein langer Versatz zaeh. */
  .js-reveal .reveal.d1.is-in { transition-delay: 55ms; }
  .js-reveal .reveal.d2.is-in { transition-delay: 110ms; }
  .js-reveal .reveal.d3.is-in { transition-delay: 165ms; }
  .js-reveal .reveal.d4.is-in { transition-delay: 220ms; }

  /* Karten bekommen mobil einen einmaligen Eintritt statt eines Hovers,
     den es auf dem Handy gar nicht gibt: sie kommen minimal skaliert
     herein und setzen sich. Kein Dauereffekt, kein Nachwippen. */
  .js-reveal .prod-card.reveal,
  .js-reveal .zub-card.reveal,
  .js-reveal .variant-card.reveal,
  .js-reveal .guide-card.reveal,
  .js-reveal .comp-card.reveal {
    transform: translate3d(0, 22px, 0) scale(.975);
  }
  .js-reveal .prod-card.reveal.is-in,
  .js-reveal .zub-card.reveal.is-in,
  .js-reveal .variant-card.reveal.is-in,
  .js-reveal .guide-card.reveal.is-in,
  .js-reveal .comp-card.reveal.is-in {
    transform: translate3d(0, 0, 0) scale(1);
  }
  /* Hover-Zustaende auf dem Handy abschalten: ohne Zeigegeraet bleiben
     sie nach einer Beruehrung haengen und wirken wie ein Fehler. */
  .prod-card:hover, .zub-card:hover, .variant-card:hover,
  .comp-card:hover, .guide-card:hover, .ba-card:hover,
  .px-fig:hover, .trust-item:hover { transform: none; box-shadow: var(--sh); }
}

/* Fliesstext und Ueberschriften, die bisher ohne Bewegung hereinkamen.
   Bewusst sparsam: nur Blockelemente, keine einzelnen Woerter. */
.js-reveal .rv-txt { opacity: 0; transform: translate3d(0, 14px, 0); }
.js-reveal .rv-txt.is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1);
}
@media (max-width: 768px) {
  .js-reveal .rv-txt { transform: translate3d(0, 20px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .rv-txt { transform: none; }
  .js-reveal .rv-txt.is-in { transition: opacity 200ms ease; transform: none; }
  .js-reveal .prod-card.reveal, .js-reveal .zub-card.reveal,
  .js-reveal .variant-card.reveal, .js-reveal .guide-card.reveal,
  .js-reveal .comp-card.reveal { transform: none; }
}


/* ── Einmaliges Schimmern auf den Uebersichts-Buttons ──────────────
   "Alle Produkte ansehen" / "Alle Zubehoere ansehen" bekommen beim
   ersten Sichtwerden einen langsamen Lichtreflex - einmal, ruhig,
   ohne Wiederholung. Zweck: die beiden Wege aus der Uebersicht heraus
   sollen auffallen, ohne zu blinken.
   Der Reflex laeuft in einem ::after mit eigener Maske; der Button
   selbst bleibt unveraendert (kein Layout-Einfluss).
   Stand 2026-08-28. */
.prod-actions .btn { position: relative; overflow: hidden; }
.prod-actions .btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(0,115,152,.16) 48%,
    rgba(0,115,152,.28) 50%,
    rgba(0,115,152,.16) 52%,
    transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.prod-actions .btn.shimmer::after {
  animation: btn-shimmer 1900ms cubic-bezier(.33,0,.2,1) 1 both;
}
@keyframes btn-shimmer {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .prod-actions .btn::after { display: none; }
}


/* ── Einheitliches Button-Verhalten ────────────────────────────────
   Alle Varianten (primary, dark, outline, submit) heben sich beim
   Zeigen gleich weit an und schalten mit derselben Kurve. Vorher lag
   der Hub bei 1px und die Dauer bei der globalen .2s - zu knapp, um
   als Reaktion gelesen zu werden.
   Auf dem Handy entfaellt der Hover: er bliebe nach einer Beruehrung
   haengen. Dort gibt es stattdessen echtes Druck-Feedback (:active),
   das sofort auf den Fingerdruck reagiert - Apples "Response"-Regel.
   Stand 2026-08-28. */
.btn {
  transition: color 260ms var(--ease-out), border-color 260ms var(--ease-out),
              transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(42,42,42,.16); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }

@media (hover: none) {
  /* Kein Zeigegeraet: Hover-Zustaende abschalten, Druckreaktion behalten */
  .btn:hover { transform: none; box-shadow: none; }
  .btn:active { transform: scale(.97); transition-duration: 80ms; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}


/* ── Schwebe-Effekt auf Karten und USP-Kacheln ─────────────────────
   Beim Zeigen hebt sich die Karte nicht nur, sie bekommt auch einen
   leicht tieferen Schatten - so wirkt sie, als loese sie sich von der
   Flaeche. Sehr klein gehalten (3px), damit es als Material liest und
   nicht als Effekt. Auf Touch-Geraeten entfaellt es (kein Hover).
   Stand 2026-08-28. */
@media (hover: hover) {
  .prod-card, .zub-card, .variant-card, .comp-card, .guide-card,
  .ba-card, .px-fig, .trust-item, .rg-card, .region-card,
  .team-card, .wert-card, .sidebar-card {
    transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
  }
  .prod-card:hover, .zub-card:hover, .variant-card:hover,
  .comp-card:hover, .guide-card:hover, .ba-card:hover,
  .rg-card:hover, .region-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(42,42,42,.14);
  }
  .px-fig:hover, .trust-item:hover,
  .team-card:hover, .wert-card:hover, .sidebar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(42,42,42,.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .prod-card:hover, .zub-card:hover, .variant-card:hover, .comp-card:hover,
  .guide-card:hover, .ba-card:hover, .px-fig:hover, .trust-item:hover,
  .rg-card:hover, .region-card:hover,
  .team-card:hover, .wert-card:hover, .sidebar-card:hover { transform: none; }
}


/* ── Projektgalerie (referenzen.html) ──────────────────────────────
   Viele Bilder unterhalb der ausfuehrlichen Vorzeigeprojekte, nach
   Kategorie filterbar. Das Raster faellt von vier auf zwei Spalten;
   auf dem Handy bleiben zwei, damit man beim Scrollen viel sieht.
   Stand 2026-08-28. */
.gallery { padding-top: 0; }
.gal-filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 34px 0 30px; }
.gal-filter {
  border: 1.5px solid var(--border); background: #fff; color: var(--text-light);
  font: 600 13.5px/1 'Inter', sans-serif; padding: 10px 17px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out),
              background 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.gal-filter:hover { border-color: var(--accent); color: var(--accent); }
.gal-filter.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.gal-filter:active { transform: scale(.96); }

.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gal-item { margin: 0; border-radius: 12px; overflow: hidden; background: var(--ph-bg); }
.gal-item .img-ph, .gal-item img {
  width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 0;
  font-size: 12.5px;
}
/* Aus- und Einblenden beim Filtern: kurz und ohne Sprung, weil das
   Raster die Luecke sofort schliesst. */
.gal-item { transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
/* Frueher display:none - die Transition eine Zeile darueber lief
   dadurch nie. Jetzt blendet die Kachel aus und faellt danach aus dem
   Raster (Verzoegerung = Dauer der Blende), statt sofort zu
   verschwinden. Im Raster ist das sauberer als position:absolute. */
/* Zweistufig: erst ausblenden (.is-fading), dann aus dem Raster
   nehmen (.is-hidden). Frueher stand hier nur display:none - die
   Transition eine Zeile darueber lief dadurch nie. Im Raster muss die
   Kachel am Ende wirklich verschwinden, sonst bleiben Luecken. */
.gal-item.is-fading { opacity: 0; transform: scale(.97); pointer-events: none; }
.gal-item.is-hidden { display: none; }
.gal-item.is-fresh { animation: gal-in 380ms var(--ease-out) both; }
@keyframes gal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (hover: hover) {
  .gal-item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(42,42,42,.15); }
}
@media (max-width: 1000px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gal-item .img-ph, .gal-item img { height: 150px; }
  .gal-filters { gap: 7px; margin: 26px 0 22px; }
  .gal-filter { padding: 9px 14px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-item.is-fresh { animation: none; }
  .gal-item:hover { transform: none; }
}


/* Der Header-Container darf breiter sein als der Inhaltscontainer, damit
   die Nav-Insel ihre volle Breite erreicht. Ohne das begrenzt ihn --mw
   plus 24px Innenabstand auf 1152px - der Beratungs-Button ragte dann
   rechts ueber die Insel hinaus. Stand 2026-08-28. */
header > .container { max-width: none; padding: 0 16px; width: 100%; }
/* Die Insel endet buendig mit dem Seiteninhalt: --mw plus die 24px
   Innenabstand des Inhaltscontainers auf jeder Seite. */
.hdr { min-width: min(100%, calc(var(--mw) + 48px)); }






/* ── Regionsseiten: gleich hohe Heroes ─────────────────────────────
   Die Texte sind unterschiedlich lang (Ortsname, Einleitung), dadurch
   war der Hero je nach Seite 696 bis 782px hoch und der Einstieg sprang
   beim Wechseln. Eine feste Mindesthoehe fuer den Textblock faengt das
   ab, ohne die Texte kuerzen zu muessen.
   Stand 2026-08-28. */
.page-hero-cnt .home-badge { display: inline-flex; align-items: center; gap: 7px; }

/* Mindesthoehe statt fester Hoehe: eine feste Hoehe schnitt laengere
   Texte ab. 782px ist der bisher hoechste Hero - damit sind alle
   Regionsseiten gleich hoch, ohne dass Inhalt verloren geht. */
/* Nur Bild-Heroes: die Rechtstexte haben einen flachen Kopf ohne Foto,
   dort wuerde eine Mindesthoehe von 782px nur Leere erzeugen. */
/* Stand 2026-09-02: Die Mindesthoehe war mit 52vh/58vh zu klein - beim
   Aufruf ragte die naechste Sektion sichtbar in den ersten Bildschirm
   (weisser Balken samt Text unter dem Foto). Der Hero fuellt jetzt den
   sichtbaren Bereich abzueglich der Kopfleiste, siehe --hdr-h oben.
   svh statt vh, damit die Adressleiste auf dem Handy nicht reinrechnet. */
/* has-hero: der Hero laeuft per negativem Rand unter die transparente
   Kopfleiste (siehe Regel weiter unten), beginnt also bei y=0.
   Deshalb hier die volle Hoehe - ein Abzug der Kopfleiste liesse
   genau deren 72px als weissen Streifen unten stehen. */
body.has-hero .page-hero:has(.page-hero-bg) { min-height: 100svh; }
@media (max-width: 900px) {
  /* Auf schmalem Schirm laufen die Zeilen ohnehin um - dort keine
     feste Hoehe erzwingen, sonst entstehen Luecken. */
  .page-hero-cnt .lead { min-height: 0; }
  .page-hero-cnt .home-badge { min-height: 0; }
}


/* ── Kopfleiste: eine verbindliche Hoehe ───────────────────────────
   Die Seiten brachten .hdr inline mit unterschiedlichen Hoehen mit
   (72px und 64px), gemessen kamen 69 bis 72px heraus - die Insel war
   je nach Seite unterschiedlich hoch. Hier die letzte Festlegung,
   damit die Leiste ueberall gleich aussieht.
   Stand 2026-08-28. */
.hdr { height: 72px; }
@media (max-width: 1200px) { .hdr { height: 64px; } }


/* ── Bild-Hero: laeuft unter die Kopfleiste ────────────────────────
   Die Regionsseiten bringen keine eigene .page-hero-Regel mit und
   nutzen diese hier - ohne den negativen Rand sass die Navigation auf
   weissem Grund UEBER dem Foto statt darauf.
   Gilt nur bei body.has-hero, damit Seiten ohne Bild-Hero (Rechtstexte)
   unberuehrt bleiben. Stand 2026-08-28. */
body.has-hero .page-hero { margin-top: -72px; padding-top: 72px; }
@media (max-width: 1200px) {
  body.has-hero .page-hero { margin-top: -64px; padding-top: 64px; }
}


/* Rechtstexte (AGB, Datenschutz, Impressum): der Kopf steht auf dunklem
   Grund, die Ueberschrift erbte aber die dunkle Standardfarbe - sie war
   unsichtbar. Stand 2026-08-28. */
.page-hero:not(.page-hero-img) h1 { color: #fff; }
.page-hero:not(.page-hero-img) > .container > p { color: rgba(255,255,255,.72); }


/* ── Einheitliche Hero-Metrik (Vorbild: zubehoer.html) ─────────────
   Die Unterseiten hatten Breadcrumb und Ueberschrift auf sehr
   unterschiedlicher Hoehe (72 bis 164px) und H1-Groessen von 46 bis
   54px - beim Seitenwechsel sprang der Einstieg sichtbar.
   Hier die verbindliche Festlegung; !important, weil die Seiten ihre
   eigenen Inline-Regeln mitbringen. Stand 2026-08-29. */
body.has-hero .page-hero-cnt { padding: 56px 0 44px !important; max-width: 760px; }
/* Stand 2026-09-02: Auf den Seiten mit Fusszeile sass der Textblock zu
   hoch - unten deckt die Fusszeile ~150px ab, die oben fehlten. Der
   Ausgleich stellt Ueberschrift und Subheadline optisch in die Mitte.
   Nicht auf den Regionsseiten (die tragen .home-badge): dort steht
   der Ortshinweis mit im Block, der Einstieg bleibt wie gehabt. */
body.has-hero .page-hero:has(.page-hero-foot) .page-hero-cnt:not(:has(.home-badge)) {
  padding-top: 150px !important; padding-bottom: 150px !important;
}
/* Der Brotkrumen-Pfad gehoert nach oben, nicht in die Mitte: er ist
   Orientierung, kein Teil der Headline. Er sitzt als erstes Kind im
   zentrierten Block und waere mit nach unten gerutscht - deshalb hier
   an den oberen Rand des Heros geloest. Im Markup bleibt er stehen
   (Schema.org-Auszeichnung und Vorlesereihenfolge unveraendert). */
/* Der Block hat oben 150px Polsterung; der Pfad wird darin nach oben
   geschoben, bleibt aber innerhalb des Heros (der schneidet ab). */
.page-hero:has(.page-hero-foot) .page-hero-cnt:not(:has(.home-badge)) > .breadcrumb {
  position: absolute; top: 34px; left: 0; right: 0; margin: 0;
}
/* Die Polsterung liegt am Element, nicht am Textfluss - der Pfad wird
   deshalb relativ zur Padding-Box gesetzt: top:34px misst ab
   Elementoberkante, also 34px unter dem Beginn des Heros. */
body.has-hero .page-hero:has(.page-hero-foot) .page-hero-cnt:not(:has(.home-badge)) > .breadcrumb {
  margin-bottom: 0;
}
body.has-hero .page-hero h1,
body.has-hero .page-hero-cnt h1 {
  font-size: clamp(34px, 4.4vw, 52px) !important;
  line-height: 1.12; margin-bottom: 18px;
}
/* Breadcrumb sitzt im Hero mit gleichem Abstand nach unten */
body.has-hero .page-hero .breadcrumb { margin-bottom: 22px; padding: 0; border: 0; }
@media (max-width: 900px) {
  body.has-hero .page-hero-cnt { padding: 28px 0 32px !important; }
  body.has-hero .page-hero:has(.page-hero-foot) .page-hero-cnt:not(:has(.home-badge)) {
    padding-top: 28px !important; padding-bottom: 32px !important;
  }
  /* Schmal laeuft der Hero im Fluss - der Pfad steht dort ohnehin ganz
     oben und braucht die absolute Verankerung nicht. Ohne diese
     Ruecknahme verschwindet er hinter der Kopfleiste. */
  .page-hero:has(.page-hero-foot) .page-hero-cnt:not(:has(.home-badge)) > .breadcrumb {
    position: static;
  }
  body.has-hero .page-hero:has(.page-hero-foot) .page-hero-cnt:not(:has(.home-badge)) > .breadcrumb {
    margin-bottom: 16px;
  }
  body.has-hero .page-hero .breadcrumb { margin-bottom: 16px; }
}


/* ── Kopf mit Bild rechts (Referenzen, Ueber uns) ──────────────────
   Zwei Spalten: Text links, Bild bzw. Marke rechts - dieselbe Aufteilung
   wie im Hero der Startseite, nur mit dem 3D-Rahmen aus .zoom3d.
   Stand 2026-08-29. */
.page-intro-split .pi-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.page-intro-split .page-intro-inner { max-width: 620px; text-align: left; }
.page-intro-split .page-intro-inner .intro-cta { justify-content: flex-start; }
.page-intro-split .page-intro-inner h1,
.page-intro-split .page-intro-inner p { text-align: left; }
.page-intro-split .pi-img img { width: 100%; height: auto; min-height: 520px; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .page-intro-split .pi-grid { grid-template-columns: 1fr; gap: 34px; }
  .page-intro-split .pi-img { order: -1; }
}


/* ── Logo-Aufbau in fuenf Stufen ───────────────────────────────────
   Genutzt im Hero der Startseite und im Kopf von ueber-uns.html.
   Lag vorher nur in index.html, deshalb blieb die Marke auf der
   Ueber-uns-Seite unsichtbar. Stand 2026-08-29. */
@keyframes hl-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); }
                     to   { opacity: 1; transform: none; } }
@keyframes hl-draw { from { opacity: 0; transform: translate3d(-24px, 0, 0); }
                     to   { opacity: 1; transform: none; } }
@keyframes hl-dot  { from { opacity: 0; transform: translate3d(0,-10px,0) scale(.7); }
                     to   { opacity: 1; transform: none; } }
.hl-1 { animation: hl-rise 620ms cubic-bezier(.16,1,.3,1) 150ms both; }
.hl-2 { animation: hl-rise 520ms cubic-bezier(.16,1,.3,1) 620ms both; }
.hl-3 { animation: hl-draw 620ms cubic-bezier(.16,1,.3,1) 950ms both; }
.hl-4 { animation: hl-rise 620ms cubic-bezier(.16,1,.3,1) 1280ms both; }
.hl-5 { animation: hl-dot 460ms cubic-bezier(.34,1.3,.64,1) 1720ms both; }
@media (prefers-reduced-motion: reduce) {
  .hl-part { opacity: 1; animation: none !important; transform: none !important; }
}


/* ── Feste Einstiegslinie auf allen Unterseiten ────────────────────
   Breadcrumb und Ueberschrift standen je nach Seite zwischen 128 und
   171px bzw. 171 und 237px - beim Wechsel sprang der Einstieg sichtbar.
   Hier die verbindliche Festlegung, gemessen an zubehoer.html.
   Umgesetzt ueber feste Abstaende statt ueber Positionierung, damit
   laengere Ueberschriften weiterhin nach unten wachsen duerfen.
   Stand 2026-08-29. */
/* Bild-Heroes: die Sektion bringt 72px Polster mit, das der negative
   Rand ausgleicht - hier zaehlt nur der eigene Abstand. */

/* Seiten ohne Bild: die Sektion hat bereits 88px Polster; ohne diese
   Null addierte sich beides auf 144px und der Einstieg rutschte tief. */
.page-intro, .art-intro { padding-top: 0 !important; }
.page-intro-inner,
.kar-hero > .container,
.contact-lead,
.art-intro-inner {
  padding-top: 72px !important;
  padding-bottom: 64px !important;
}
.kar-hero { padding-top: 0 !important; }
.contact-section { padding-top: 0 !important; }
.page-hero-cnt > .breadcrumb,
.page-intro-inner > .breadcrumb,
.kar-hero > .container > .breadcrumb,
.contact-lead > .breadcrumb,
.art-intro-inner > .breadcrumb {
  margin: 0 0 32px !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 21px;
}
/* Alle Ueberschriften der Unterseiten auf dieselbe Groesse */
.page-hero-cnt > h1,
.page-intro-inner > h1,
.kar-hero h1,
.contact-lead h1,
.art-intro-inner h1 {
  font-size: clamp(36px, 4.8vw, 56px) !important;
  line-height: 1.1 !important;
  margin: 0 0 22px !important;
}
@media (max-width: 900px) {
  .page-hero-cnt, .page-intro-inner, .kar-hero > .container,
  .contact-lead, .art-intro-inner { padding-top: 36px !important; }
  .page-hero-cnt > .breadcrumb, .page-intro-inner > .breadcrumb,
  .kar-hero > .container > .breadcrumb, .contact-lead > .breadcrumb,
  .art-intro-inner > .breadcrumb { margin-bottom: 18px !important; }
}


/* Der Hero richtet seinen Inhalt am unteren Rand aus (align-items:flex-end).
   Bei kuerzerem Text rutscht der Block dadurch nach unten - der Breadcrumb
   sass auf zubehoer.html 39px tiefer als anderswo. Oben ausrichten bringt
   alle Seiten auf dieselbe Einstiegslinie; die Mindesthoehe sorgt weiter
   dafuer, dass der Hero gross bleibt. Stand 2026-08-29. */
body.has-hero .page-hero { align-items: flex-start !important; }


/* Das untere Sektionspolster des Heros stand zusaetzlich zum Innenabstand
   und liess Leerraum unter dem Text. Oben bleibt es, weil der negative
   Rand es fuer die Navigation braucht. Stand 2026-08-29. */
body.has-hero .page-hero { padding-bottom: 0 !important; }


/* Ortsbadge und Artikel-Kennzeichnung stehen jetzt UNTER der Ueberschrift,
   damit die H1 auf allen Seiten auf derselben Linie sitzt. Vorher schoben
   sie die Ueberschrift je nach Seite 30 bis 56px nach unten.
   Stand 2026-08-29. */
.page-hero-cnt > h1 + .home-badge,
.art-intro-inner .lead,
.page-intro-inner p {
  font-size: 19px !important;
  line-height: 1.7 !important;
  margin-top: 4px !important;
}
.art-intro-inner > h1 + .art-tag {
  margin-top: -6px; margin-bottom: 16px;
}

/* ── Galerie: "Mehr laden" + Lightbox (referenzen.html) ─────────────
   Pro Filter sind 12 Bilder sichtbar, jeder Klick auf "Mehr laden"
   zeigt 12 weitere. Klick auf ein Bild oeffnet die Lightbox.
   Stand 2026-09-29. */
.gal-item { cursor: zoom-in; }
.gal-more-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 34px; }
.gal-more[hidden] { display: none; }
.gal-count { font-size: 13.5px; color: var(--text-light); margin: 0; }

.lb { position: fixed; inset: 0; z-index: 400; background: rgba(12,12,12,.92); display: flex; align-items: center; justify-content: center; padding: 56px 72px; opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease-out); }
.lb.is-open { opacity: 1; pointer-events: auto; }
.lb-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-img { max-width: min(1400px, 100%); max-height: calc(100vh - 150px); object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-cap { color: rgba(255,255,255,.82); font-size: 14px; text-align: center; max-width: 720px; }
.lb-btn { position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 200ms var(--ease-out); }
.lb-btn:hover { background: rgba(255,255,255,.24); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lb { padding: 64px 12px; }
  .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; }
}

/* ── Mobil: Hero-Fusszeile im Fluss (Stand 2026-09-29) ─────────────
   Die Unterseiten tragen die Fusszeile mit INLINE-Styles
   (position:absolute; bottom:88px; padding:0 40px 22px) und den
   Textblock mit transform:translateY(-40px). Die mobile Regel weiter
   oben kam dagegen nicht an - auf kleinen Handys lagen Breadcrumb,
   Ueberschrift, Unterzeile und Buttons uebereinander. Deshalb hier
   mit !important, damit sie die Inline-Styles sicher ueberstimmt. */
@media (max-width: 900px) {
  .page-hero .page-hero-foot {
    position: relative !important; left: auto !important; right: auto !important;
    bottom: auto !important; padding: 8px 24px 44px !important;
    flex-direction: column !important; align-items: flex-start !important;
    justify-content: flex-start !important; gap: 20px !important;
  }
  .page-hero .page-hero-cnt { transform: none !important; }
  .page-hero .page-hero-foot .page-hero-actions { align-self: stretch !important; max-width: 100%; }
  .page-hero .page-hero-foot .hero-trustrow {
    flex-direction: row !important; flex-wrap: wrap !important;
    align-items: center !important; text-align: left !important; gap: 8px 16px !important;
  }
  .page-hero .page-hero-foot .hero-sub { max-width: 100% !important; }
}

/* Social-Proof: Die Grid-Spalten (1fr = minmax(auto,1fr)) wuchsen mit
   der Breite des Sliders mit - mobil waren Bild und Bewertung 451px
   breit auf 360px Bildschirm und rechts abgeschnitten. min-width:0
   laesst die Spalte schrumpfen, der Slider scrollt intern.
   Stand 2026-09-29. */
.sp-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sp-inner > * { min-width: 0; }
@media (max-width: 800px) { .sp-inner { grid-template-columns: minmax(0, 1fr); } }

/* ── Einheitliche Absende-Buttons (Stand 2026-09-30) ───────────────
   Vorher vier Varianten (Radius 4/14px, Hoehe 52/57px, 16/17px).
   Absende-Buttons sitzen in runden Formularkarten mit runden Feldern,
   deshalb ueberall 14px Radius, gleiche Hoehe und Schrift. */
.btn.btn-submit {
  border-radius: 14px; min-height: 56px; padding: 14px 24px;
  font-size: 16px; font-weight: 600; width: 100%; justify-content: center;
}

/* Lightbox: Bild setzt sich beim Oeffnen leicht (220ms), statt aufzupoppen */
.lb-img { transform: scale(.97); transition: transform 220ms var(--ease-out); }
.lb.is-open .lb-img { transform: none; }
@media (prefers-reduced-motion: reduce) { .lb-img { transform: none; transition: none; } }

/* Karussell-Punkte: sichtbar 10px, Trefferflaeche 24px (Touch-Ziel) */
.sp-dots { gap: 2px; }
.sp-dots button { box-sizing: content-box; padding: 7px; background-clip: content-box; }