/* ETH Elektrotechnik Hirschfeld GmbH
   Farben: #c6182b Rot (Bestandsauftritt), #f4d92e Gelb (Kundenvorgabe 19.08.2026,
   ersetzt das fruehere Gruen #A0C61B aus dem alten Template).
   Schriftstil "Modern & klar" -> Geist (nicht Inter).
   Stilquelle: ms-solar24.de (conversion-lastig, Kennzahlen, Trust, klare Kanten). */

:root {
  --rot: #c6182b;
  --rot-dunkel: #a3121f;
  --rot-hell: #e8586a;
  --gruen: #f4d92e;
  --gruen-dunkel: #d9bd12;

  --tinte: #101317;
  --tinte-2: #1a1f26;
  --tinte-3: #2b323c;
  --grau: #5c6672;
  --grau-hell: #8b95a1;
  --linie: #e3e7ec;
  --flaeche: #f5f7f9;
  --weiss: #ffffff;

  --wrap: 1200px;
  --r: 12px;
  --r-gross: 20px;
  --schrift: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t: 0.25s cubic-bezier(.2, .7, .3, 1);
}

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

html {
  /* KEIN scroll-behavior: smooth -- kollidiert mit ScrollTrigger (Pin/Scrub).
     Sanftes Springen zu Ankern macht app.js. */
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--weiss);
  /* clip statt hidden -- hidden bricht ScrollTrigger-Pinning */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  margin: 0 0 .5em;
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: inherit; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.schmal { width: min(100% - 40px, 780px); }
.mittig { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rot); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 12px; top: 12px; }

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

.ic { width: 22px; height: 22px; flex: 0 0 auto; }
.ic-s { width: 18px; height: 18px; }

/* ------------------------------------------------------------ Buttons */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: .96rem; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn .ic { width: 18px; height: 18px; }
.btn-rot { background: var(--rot); color: #fff; }
.btn-rot:hover { background: var(--rot-dunkel); transform: translateY(-1px); }
.btn-leer { background: transparent; color: var(--tinte); border-color: var(--linie); }
.btn-leer:hover { border-color: var(--tinte); background: var(--tinte); color: #fff; }
.btn-glas {
  background: rgba(255,255,255,.1); color: #fff;
  border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px);
}
.btn-glas:hover { background: #fff; color: var(--tinte); border-color: #fff; }
.btn-gross { padding: 16px 30px; font-size: 1.02rem; }
.btn-voll { width: 100%; justify-content: center; }

/* ------------------------------------------------------------ Kopf */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf-in { display: flex; align-items: center; gap: 22px; min-height: 60px; }
/* Startseite: Kopfleiste als ganz leichter Glasbalken direkt ueber Hero-Video und
   Panels. fixed statt sticky -> sie belegt keinen eigenen Platz, der Hero beginnt
   ganz oben. Sobald die Panels oben raus sind, setzt app.js .kopf-voll und die
   normale weisse Leiste blendet ein -- auf weissen Sektionen waere Weiss unlesbar.
   Nur direkte Nav-Links einfaerben: das Untermenue bleibt ein weisser Kasten. */
body.start .kopf {
  position: fixed; left: 0; right: 0;
  background: rgba(16, 19, 23, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom-color: rgba(255, 255, 255, .12);
  transition: background .4s ease, border-color .4s ease;
}
body.start .kopf:not(.kopf-voll) .nav > ul > li > a,
body.start .kopf:not(.kopf-voll) .tel-link { color: #fff; }
body.start .kopf:not(.kopf-voll) .nav > ul > li > a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
body.start .kopf:not(.kopf-voll) .nav > ul > li > a[aria-current],
body.start .kopf:not(.kopf-voll) .tel-link .ic { color: var(--gruen); }
body.start .kopf:not(.kopf-voll) .burger { border-color: rgba(255, 255, 255, .35); }
body.start .kopf:not(.kopf-voll) .burger span { background: #fff; }
body.start .kopf.kopf-voll { background: rgba(255, 255, 255, .93); border-bottom-color: var(--linie); }
body.start .hero { min-height: min(100vh, 860px); }

.logo { text-decoration: none; flex: 0 0 auto; display: flex; align-items: center; }
/* Echtes Logo: Hoehe fixiert, Breite ergibt sich -- reserviert denselben Platz
   wie der Text-Platzhalter, deshalb kein Sprung beim Nachladen. */
.logo-bild { height: 36px; width: auto; }
.logo-fuss { display: inline-block; }
.logo-fuss .logo-bild { height: 54px; }
.logo-platzhalter {
  /* Platzhalter, bis logo.svg in Ablage/ liegt. Feste Masse -> kein Layout-Shift. */
  display: flex; flex-direction: column; justify-content: center;
  min-width: 172px; height: 46px; padding-left: 13px;
  border-left: 4px solid var(--rot);
}
.logo-platzhalter b {
  font-size: 1.32rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--tinte);
}
.logo-platzhalter i {
  font-style: normal; font-size: .63rem; font-weight: 600; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grau);
}
.logo-hell b { color: #fff; }
.logo-hell i { color: rgba(255,255,255,.6); }

.nav { margin-left: auto; }
.nav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 7px 12px; border-radius: 8px;
  font-size: .92rem; font-weight: 500; text-decoration: none; color: var(--tinte-2);
  transition: background var(--t), color var(--t);
}
.nav a:hover { background: var(--flaeche); color: var(--rot); }
.nav a[aria-current] { color: var(--rot); font-weight: 600; }
.chev { width: 15px; height: 15px; transition: transform var(--t); }

.hat-menu { position: relative; }
.untermenu {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0;
  width: 480px; padding: 10px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross);
  box-shadow: 0 18px 44px rgba(16, 19, 23, .13);
  opacity: 0; visibility: hidden; translate: -50% 8px;
  transition: opacity var(--t), translate var(--t), visibility var(--t);
}
.hat-menu:hover .untermenu, .hat-menu:focus-within .untermenu {
  opacity: 1; visibility: visible; translate: -50% 0;
}
.hat-menu:hover .chev { transform: rotate(180deg); }
.untermenu ul {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.untermenu ul > li { min-width: 0; }
.untermenu a { align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 10px; white-space: normal; min-width: 0; }
.untermenu a > span { min-width: 0; }
.untermenu a .ic { margin-top: 3px; color: var(--rot); }
.untermenu span { display: flex; flex-direction: column; }
.untermenu b { font-size: .92rem; font-weight: 600; }
.untermenu span span { font-size: 0; }
.untermenu a > span { font-size: .74rem; line-height: 1.35; color: var(--grau); font-weight: 400; }
.untermenu a > span b { color: var(--tinte); }

.kopf-cta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.kopf-cta .btn { padding: 9px 20px; font-size: .9rem; }
.tel-link {
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--tinte);
}
.tel-link .ic { color: var(--rot); }
.tel-link:hover { color: var(--rot); }

.burger {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 46px; height: 46px; margin-left: auto; padding: 0;
  background: none; border: 1px solid var(--linie); border-radius: 10px; cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; margin-inline: auto;
  background: var(--tinte); border-radius: 2px; transition: var(--t);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* [hidden] verliert sonst gegen die Klassen-Regel -> immer dieses Muster */
.mobilnav { display: none; }
.mobilnav:not([hidden]) { display: block; }
.mobilnav {
  padding: 14px 20px 26px; border-top: 1px solid var(--linie);
  max-height: calc(100dvh - 60px); overflow-y: auto; background: #fff;
}
.mobilnav ul { list-style: none; margin: 0; padding: 0; }
.mobilnav > ul > li { border-bottom: 1px solid var(--linie); }
.mobilnav a { display: block; padding: 14px 2px; text-decoration: none; font-weight: 600; }
.mobilnav b { display: block; padding: 14px 2px; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau); }
.mobilnav ul ul { padding: 0 0 12px 14px; border-left: 2px solid var(--linie); }
.mobilnav ul ul a { padding: 9px 2px; font-weight: 500; font-size: .95rem; }
.mobilnav .btn { margin-top: 20px; }

/* ------------------------------------------------------------ Hero */

.hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: min(86vh, 780px); padding: 100px 0 80px;
  color: #fff; background: var(--tinte);
}
.hero-medium { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(16,19,23,.94) 0%, rgba(16,19,23,.82) 42%, rgba(16,19,23,.5) 100%),
    linear-gradient(0deg, rgba(16,19,23,.85) 0%, transparent 45%);
}
.hero-in { position: relative; max-width: 760px; }
.hero-label {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  padding: 7px 16px 7px 13px; border-radius: 999px;
  background: rgba(198,24,43,.18); border: 1px solid rgba(198,24,43,.5);
  font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: #ffb3bc;
}
.hero h1 { color: #fff; text-wrap: balance; }
.hero-text {
  max-width: 610px; margin-bottom: 32px;
  font-size: clamp(1.02rem, 1.9vw, 1.18rem); color: rgba(255,255,255,.82);
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 38px 0 0; padding: 24px 0 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-trust li {
  display: flex; align-items: center; gap: 8px;
  font-size: .89rem; font-weight: 500; color: rgba(255,255,255,.82);
}
.hero-trust .ic { width: 17px; height: 17px; color: var(--gruen); stroke-width: 2.6; }

/* ------------------------------------------------------------ Kennzahlen */

.zahlen { background: var(--tinte-2); color: #fff; }
.zahlen-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 44px 0;
}
.zahl { text-align: center; padding: 6px 12px; border-right: 1px solid rgba(255,255,255,.1); }
.zahl:last-child { border-right: 0; }
.zahl b {
  display: block; font-size: clamp(2.2rem, 4.4vw, 3.1rem); font-weight: 800;
  line-height: 1; letter-spacing: -.04em; color: var(--gruen);
  font-variant-numeric: tabular-nums;
}
.zahl span {
  display: block; margin-top: 8px;
  font-size: .82rem; font-weight: 500; letter-spacing: .04em;
  color: rgba(255,255,255,.62);
}

/* --------------------------------------------- Drei Hauptthemen (Akkordeon) */
/* Titel und Icon sind in den Bildern eingebrannt -- deshalb steht im Markup
   nur die Beschreibung. object-position schiebt beim Streifen den eingebrannten
   Titel aus dem Ausschnitt, sonst waere dort nur ein Buchstabenfragment zu sehen. */

.panels-sek { background: var(--tinte); }
.panels {
  display: flex;
  /* Volle Fensterhoehe: die Kopfleiste liegt auf der Startseite als Glasbalken
     darueber und nimmt keinen Platz mehr weg. */
  height: 100svh;
  min-height: 640px;
  /* fugenlos: kein gap, kein Rahmen, kein Radius zwischen den Bildern */
}
.panel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  transition: flex-grow .6s cubic-bezier(.2, .7, .3, 1);
}
.panel > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 78%;
  transition: object-position .6s cubic-bezier(.2, .7, .3, 1), transform .6s;
}
.panel-schleier {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(10, 12, 16, .78) 100%);
  opacity: 0; transition: opacity .5s ease;
}
.panel-flaeche {
  position: absolute; inset: 0; z-index: 2;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.panel-flaeche:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* Ruhe + Hover: das Panel waechst leicht */
.panels:not(.hat-offen) .panel:hover,
.panels:not(.hat-offen) .panel:focus-within { flex-grow: 1.22; }
.panels:not(.hat-offen) .panel:hover > img,
.panels:not(.hat-offen) .panel:focus-within > img { transform: scale(1.04); }

/* Geoeffnet: sehr breit, Text sichtbar */
.panels.hat-offen .panel { flex-grow: .5; }
.panels.hat-offen .panel.ist-offen { flex-grow: 6; }
.panel.ist-offen > img { object-position: center 82%; }
.panel.ist-offen .panel-schleier { opacity: 1; }

/* Geschlossene Streifen: unten in die eigene Markenfarbe auslaufen lassen.
   Der eingebrannte Titel steht ueber die ganze Bildbreite -- wegcroppen geht
   deshalb nicht, der Verlauf deckt ihn zuverlaessig ab und traegt die
   vertikale Schrift. Farben aus dem jeweiligen Bild gemessen. */
.panel[data-panel="elektrotechnik"]   { --panel-farbe: #ba401b; }
.panel[data-panel="glasfasertechnik"] { --panel-farbe: #3e6ce6; }
.panel[data-panel="datentechnik"]     { --panel-farbe: #1a2e96; }

.panels.hat-offen .panel:not(.ist-offen) > img { object-position: 32% center; }
.panels.hat-offen .panel:not(.ist-offen) .panel-schleier {
  opacity: 1;
  background: linear-gradient(
    180deg,
    transparent 18%,
    color-mix(in srgb, var(--panel-farbe) 78%, transparent) 34%,
    var(--panel-farbe) 46%,
    var(--panel-farbe) 100%
  );
}
.panel-vertikal {
  position: absolute; left: 50%; bottom: 34px; z-index: 1;
  translate: -50% 0;
  writing-mode: vertical-rl; rotate: 180deg;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem); font-weight: 800;
  letter-spacing: .015em; color: #fff; white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .4s ease .12s;
  pointer-events: none;
}
.panels.hat-offen .panel:not(.ist-offen) .panel-vertikal { opacity: 1; }

.panel-inhalt {
  position: absolute; left: 50%; bottom: clamp(26px, 4vh, 44px); z-index: 1;
  translate: -50% 0;
  width: min(760px, 88%); text-align: center; color: #fff;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .45s ease .15s, transform .45s ease .15s, visibility .45s;
  pointer-events: none;
}
.panel.ist-offen .panel-inhalt {
  /* z-index 3 > .panel-flaeche (2): sonst deckt die Klickflaeche des Akkordeons
     den "Mehr erfahren"-Link zu und er laesst sich nicht anklicken. Der Block
     selbst bleibt pointer-events:none, das Umschalten funktioniert weiter. */
  opacity: 1; visibility: visible; transform: none; z-index: 3;
}
.panel.ist-offen .panel-inhalt .panel-btn { pointer-events: auto; }
.panel-sub {
  margin: 0 0 8px; font-size: clamp(.98rem, 1.5vw, 1.12rem); font-weight: 700;
  text-wrap: balance; text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.panel-text {
  margin: 0 0 20px; font-size: clamp(.88rem, 1.25vw, .98rem);
  color: rgba(255, 255, 255, .9); text-wrap: pretty;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.panel-btn {
  background: rgba(255, 255, 255, .14); color: #fff;
  border-color: rgba(255, 255, 255, .5); backdrop-filter: blur(6px);
}
.panel-btn:hover { background: #fff; color: var(--tinte); border-color: #fff; }

/* ------------------------------------------------------------ Sektionen */

.sek { padding: clamp(64px, 8vw, 108px) 0; }
.sek-label {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--rot);
}
.sek-label .ic { width: 16px; height: 16px; }
.sek-label a { text-decoration: none; }
.sek-label a:hover { text-decoration: underline; }
.sek-titel { max-width: 20ch; text-wrap: balance; }
.sek-text { max-width: 62ch; margin-bottom: 44px; color: var(--grau); font-size: 1.05rem; }
.unter-titel { margin: 56px 0 26px; font-size: 1.35rem; }
.fliess { font-size: 1.06rem; color: var(--tinte-2); }
.fliess + .fliess { margin-top: 1.2em; }

.kopfsek { padding: clamp(56px, 7vw, 88px) 0 clamp(16px, 2vw, 28px); }
.kopfsek h1 { max-width: 18ch; text-wrap: balance; }
.kopfsek-sub {
  max-width: 46ch; margin-bottom: 20px;
  font-size: clamp(1.06rem, 2.1vw, 1.3rem); font-weight: 500; color: var(--rot);
}
.kopfsek-text { max-width: 62ch; color: var(--grau); font-size: 1.06rem; }
.kopfsek-bild { padding-bottom: 0; }
.kopfsek-in {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
.kopfsek-bild-sp { border-radius: var(--r-gross); }

/* ------------------------------------------------------------ Bildslots */

.bildslot {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r); background: var(--flaeche);
}
.bildslot img { width: 100%; height: 100%; object-fit: cover; }
.bildslot.is-leer {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, #eef1f4 0 12px, #e7ebef 12px 24px);
  border: 2px dashed #c3cbd4;
}
.bildslot-hinweis {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: center;
  font-size: .74rem; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #6a7480; line-height: 1.4; word-break: break-all;
}
.bildslot-hinweis b {
  font-family: var(--schrift); font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rot);
}

/* ------------------------------------------------------------ Leistungen */

.leistungen-sek { background: var(--flaeche); }
/* Flexbox statt Grid: bei 7 Karten bleibt sonst in der letzten Zeile eine leere
   4. Spalte links-buendig stehen. justify-content:center zentriert jede Zeile
   fuer sich -- auch eine unvollstaendige letzte Zeile -- bei gleicher Kartenbreite. */
.lkarten {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
}
.lkarte {
  flex: 0 1 285px;
  display: flex; flex-direction: column; padding: 30px 28px 26px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross);
  text-decoration: none;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.lkarte-ic {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px;
  border-radius: 13px; background: rgba(198,24,43,.08); color: var(--rot);
}
.lkarte-ic .ic { width: 25px; height: 25px; }
.lkarte h3 { margin-bottom: .4em; }
.lkarte p { flex: 1; margin-bottom: 18px; font-size: .93rem; color: var(--grau); }
.lkarte-mehr {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 600; color: var(--rot);
}
/* Der "Alle Leistungen"-Knopf klebte mit 22px direkt unter den Karten,
   waehrend darunter 100px Sektionsrand folgten -- sichtbar unwuchtig. */
.lkarten + .mittig { margin-top: 38px; }
.lkarte-mehr .ic { width: 16px; height: 16px; transition: transform var(--t); }
.lkarte:hover .lkarte-mehr .ic { transform: translateX(4px); }

/* ------------------------------------------------------------ Vorteile (Icon-Raster) */

.vorteile-sek { background: var(--flaeche); }
/* 5 Vorteile (SEO-Regel: max. 5) -> 3 oben, 2 breitere darunter. Kein Waisenkind. */
.vorteile { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 44px; }
.vorteile > * { grid-column: span 2; }
.vorteile > :nth-child(4), .vorteile > :nth-child(5) { grid-column: span 3; }
.vorteile-2 { grid-template-columns: repeat(2, 1fr); }
.vorteile-2 > * { grid-column: auto; }
.vorteil {
  padding: 30px 26px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross);
}
.vorteil-ic {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 12px; background: var(--tinte); color: var(--gruen);
}
.vorteil h3 { font-size: 1.08rem; }
.vorteil p { margin: 0; font-size: .93rem; color: var(--grau); }

/* ------------------------------------------------------------ Ablauf (starre Kacheln) */

.ablauf {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px;
}
.schritt {
  position: relative; padding: 32px 24px 28px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross);
}
.schritt b {
  display: block; margin-bottom: 14px;
  font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.05em;
  color: var(--linie); font-variant-numeric: tabular-nums;
}
.schritt h3 { font-size: 1.1rem; }
.schritt p { margin: 0; font-size: .92rem; color: var(--grau); }

/* ------------------------------------------------------------ Punkteliste */

.punkte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 4px 34px; margin: 40px 0 0; padding: 0; list-style: none;
}
.punkte li {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 19px 0; border-bottom: 1px solid var(--linie);
}
.punkte .ic { margin-top: 3px; color: var(--gruen); stroke-width: 2.6; }
.punkte div { display: flex; flex-direction: column; gap: 3px; }
.punkte b { font-size: 1rem; font-weight: 600; }
.punkte span { font-size: .91rem; color: var(--grau); line-height: 1.55; }

/* ------------------------------------------------------------ Highlight */

.highlight {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px);
  align-items: center; padding: clamp(32px, 4vw, 56px);
  background: var(--tinte); border-radius: var(--r-gross); color: #fff;
}
.highlight h2 { color: #fff; }
.highlight p { margin: 0; color: rgba(255,255,255,.76); font-size: 1.02rem; }
.highlight .sek-label { color: var(--gruen); }
.highlight-bild { border-radius: var(--r); }
.akademie-sek .highlight { background: var(--tinte-2); }

/* ------------------------------------------------------------ Foerderung */

.foerder-sek { background: var(--flaeche); }
.foerder-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;
  margin-bottom: 48px;
}
.foerder {
  padding: 26px 24px; background: #fff;
  border: 1px solid var(--linie); border-left: 4px solid var(--gruen);
  border-radius: var(--r);
}
.foerder h3 { font-size: 1.02rem; }
.foerder p { margin: 0; font-size: .92rem; color: var(--grau); }

.faq { max-width: 820px; }
.faq details {
  padding: 4px 0; border-bottom: 1px solid var(--linie); background: transparent;
}
.faq summary {
  padding: 20px 34px 20px 0; position: relative;
  font-size: 1.04rem; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  translate: 0 -70%; rotate: 45deg; transition: rotate var(--t);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 -30%; }
.faq details p { margin: 0 0 22px; max-width: 68ch; color: var(--grau); }
.stand { margin-top: 40px; font-size: .82rem; color: var(--grau-hell); }

/* ------------------------------------------------------------ Marken */

.marken { padding: 52px 0; border-block: 1px solid var(--linie); }
.marken-titel {
  margin-bottom: 26px; text-align: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--grau-hell);
}
.marken-liste {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
/* Feste Box je Logo, Bild darin per object-fit eingepasst: die Dateien haben
   Seitenverhaeltnisse von 1,7 bis 4,7 -- ohne gemeinsame Box wuerden breite
   Wortmarken die schmalen erschlagen. Hoehe begrenzt die kompakten Logos,
   Breite die langen. */
.marken-liste li {
  display: grid; place-items: center;
  width: 176px; height: 74px; padding: 13px 18px;
  border: 1px solid var(--linie); border-radius: 10px; background: #fff;
}
.marken-liste img {
  width: auto; height: auto; max-width: 100%; max-height: 48px;
  object-fit: contain;
}

/* ------------------------------------------------------------ Ueber-Teaser */

.ueber-teaser-in {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ueber-teaser-text p { color: var(--grau); }
.ueber-teaser-text .btn { margin-top: 12px; }
.ueber-teaser-bild { border-radius: var(--r-gross); }

/* ------------------------------------------------------------ Referenzen */

/* Flexbox statt Grid: bei 5 Referenzen bleibt sonst die letzte Zeile (2 Karten)
   links-buendig mit leerer 3. Spalte stehen. justify-content:center zentriert
   jede Zeile fuer sich -- auch eine unvollstaendige letzte -- bei gleicher Breite. */
.rkarten {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
}
.rkarten-eins .rkarte { flex-basis: 560px; max-width: 560px; }
.rkarte {
  flex: 0 1 320px;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross);
  text-decoration: none;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
/* Hover-Glow: ein Regelsatz fuer alle Kacheltypen -- roter Schein aussen am
   Rand entlang. Link-Kacheln heben sich zusaetzlich leicht an. */
.lkarte, .rkarte, .vorteil, .schritt, .bewertung {
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.lkarte:hover, .rkarte:hover, .vorteil:hover, .schritt:hover, .bewertung:hover {
  border-color: rgba(198,24,43,.5);
  box-shadow: 0 0 0 1px rgba(198,24,43,.18), 0 0 20px 3px rgba(198,24,43,.2);
}
.lkarte:hover, .rkarte:hover { transform: translateY(-3px); }

.rkarte-bild { border-radius: 0; }
.rkarte-text { padding: 24px 24px 26px; }
.tag {
  display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px;
  background: rgba(244,217,46,.28); color: #5a4704;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.rkarte h3 { font-size: 1.16rem; }
.rkarte p { margin-bottom: 14px; font-size: .93rem; color: var(--grau); }
.ref-teaser .mittig { margin-top: 40px; }
.projekt-meta { display: flex; flex-wrap: wrap; gap: 34px; margin: 26px 0 0; }
.projekt-meta dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grau-hell);
}
.projekt-meta dd { margin: 4px 0 0; font-size: 1.04rem; font-weight: 600; }

/* ------------------------------------------------------------ Bewertungen */

.bewertungen-sek { background: var(--flaeche); }
.bewertung-schnitt {
  margin: 10px 0 0; font-size: .96rem; font-weight: 600; color: var(--tinte);
  letter-spacing: .02em;
}
.bewertungen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
  margin-top: 34px;
}
.bewertung {
  padding: 30px 28px; background: #fff;
  border: 1px solid var(--linie); border-radius: var(--r-gross);
}
.sterne { margin-bottom: 14px; font-size: 1.2rem; letter-spacing: .12em; color: #f0b429; }
.bewertung p { font-size: .96rem; color: var(--grau); }
.bewertung footer {
  display: flex; flex-direction: column; gap: 2px; margin-top: 18px;
  font-size: .88rem; font-weight: 600;
}
.bewertung footer span { font-size: .78rem; font-weight: 400; color: var(--grau-hell); }
.bewertung-link { margin-top: 30px; }
.bewertung-link a {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--rot); text-decoration: none;
}
.bewertung-link .ic { width: 17px; height: 17px; }
.bewertung-link a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ Zeitstrahl */

.zeitstrahl-sek { background: var(--tinte); color: #fff; overflow: clip; }
.zeitstrahl-sek .sek-titel { color: #fff; }
.zeitstrahl-sek .sek-label { color: var(--gruen); }
.zeitstrahl-buehne { margin-top: 52px; }
.zeitstrahl { position: relative; margin: 0; padding: 0 0 0 clamp(46px, 8vw, 92px); list-style: none; }
.zeitstrahl-linie {
  position: absolute; left: clamp(15px, 2.6vw, 30px); top: 8px; bottom: 8px; width: 2px;
  background: rgba(255,255,255,.14);
}
.zeitstrahl-linie i {
  position: absolute; inset: 0 auto 0 0; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--rot), var(--gruen));
}
.station {
  position: relative; padding: 0 0 clamp(46px, 6vw, 76px);
  opacity: .16; transform: translateY(26px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.station:last-child { padding-bottom: 0; }
.station.ist-da { opacity: 1; transform: none; }
.station::before {
  content: ""; position: absolute;
  left: calc(clamp(46px, 8vw, 92px) * -1 + clamp(15px, 2.6vw, 30px) - 7px);
  top: 10px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tinte); border: 3px solid rgba(255,255,255,.22);
  transition: border-color .45s ease, background .45s ease;
}
.station.ist-da::before { background: var(--rot); border-color: var(--rot); }
.station-jahr {
  margin-bottom: 10px;
  font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: var(--gruen); font-variant-numeric: tabular-nums;
}
.station-text h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: #fff; }
.station-text p { max-width: 58ch; margin: 0; color: rgba(255,255,255,.68); }

/* ------------------------------------------------------------ Geschichte / Team */

.geschichte {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* Kein sticky mehr -- klebte am oberen Rand und lief damit aus der Mitte heraus. */
.geschichte-bild { border-radius: var(--r-gross); }
/* BNI-Mitgliedschaft als eigener Vertrauensanker statt Nebensatz im Fliesstext. */
.bni {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 26px 0 0; padding: 10px 20px 10px 10px;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche);
}
.bni img { width: 46px; height: 46px; flex: 0 0 auto; }
.bni span { font-size: .95rem; font-weight: 600; color: var(--tinte-2); }
.geschichte-text > :last-child { margin-bottom: 0; }
.teambild { margin-top: 40px; border-radius: var(--r-gross); }
.koepfe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
.kopf-karte {
  padding: 20px; background: #fff;
  border: 1px solid var(--linie); border-radius: var(--r-gross);
}
.kopf-bild { margin-bottom: 20px; border-radius: var(--r); }
.kopf-karte h3 { margin-bottom: .15em; font-size: 1.2rem; }
.rolle { margin-bottom: 12px; font-size: .85rem; font-weight: 600; color: var(--rot); }
.kopf-text { font-size: .92rem; color: var(--grau); }
.kopf-tel {
  display: inline-flex; align-items: center; gap: 8px; padding-top: 14px;
  border-top: 1px solid var(--linie); width: 100%;
  font-size: .94rem; font-weight: 600; text-decoration: none;
}
.kopf-tel .ic { width: 17px; height: 17px; color: var(--rot); }
.kopf-tel:hover { color: var(--rot); }

/* ------------------------------------------------------------ Stellen */

.stellen { display: grid; gap: 14px; margin-top: 44px; }
.stelle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; padding: 28px 30px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross);
  transition: border-color var(--t);
}
.stelle:hover { border-color: var(--rot); }
.stelle .tag { background: rgba(198,24,43,.09); color: var(--rot); }
.stelle h3 { margin-bottom: .3em; font-size: 1.3rem; }
.stelle p { margin: 0; max-width: 62ch; font-size: .94rem; color: var(--grau); }
.stelle .btn { flex: 0 0 auto; }

/* ------------------------------------------------------------ Kontakt */

.kontakt-raster {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.kontakt-block {
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--flaeche); border-radius: var(--r-gross);
}
.kontakt-block h2 { font-size: 1.5rem; }
.kontakt-block h3 { margin: 34px 0 14px; font-size: 1.05rem; }
.kontakt-daten { display: grid; gap: 10px; font-style: normal; }
.kontakt-daten a, .ansprech a {
  display: flex; align-items: flex-start; gap: 14px; padding: 15px 18px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r);
  text-decoration: none; transition: border-color var(--t);
}
.kontakt-daten a:hover, .ansprech a:hover { border-color: var(--rot); }
.kontakt-daten .ic, .ansprech .ic { margin-top: 2px; color: var(--rot); }
.kontakt-daten span, .ansprech span { display: flex; flex-direction: column; }
.kontakt-daten b, .ansprech b {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grau-hell);
}
.ansprech b { font-size: 1rem; letter-spacing: -.01em; text-transform: none; color: var(--tinte); }
.ansprech { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ansprech span { font-size: .82rem; color: var(--grau); }
.ansprech i { font-style: normal; margin-top: 3px; font-weight: 600; color: var(--rot); }
.fax { margin-top: 14px; font-size: .88rem; color: var(--grau); }

.zeiten { margin: 0; }
.zeiten > div, .zeiten-mini > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 12px 0; border-bottom: 1px solid var(--linie);
}
.zeiten dt, .zeiten-mini dt { font-weight: 500; }
.zeiten dd, .zeiten-mini dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.zeiten .zu dt, .zeiten .zu dd { color: var(--grau-hell); font-weight: 400; }
.zeiten-hinweis { margin-top: 22px; font-size: .88rem; color: var(--grau); }

.karte-sek { background: var(--flaeche); }
.karte-huelle { position: relative; line-height: 0; }
/* pointer-events: none -> die Karte faengt das Mausrad nicht mehr ab und
   zoomt nicht beim Scrollen der Seite. Interaktion laeuft ueber "Route planen". */
.karte {
  display: block; aspect-ratio: 21 / 8; height: auto; min-height: 340px; border: 0;
  pointer-events: none;
}
.karte-btn {
  position: absolute; right: 24px; bottom: 24px; line-height: 1.4;
  box-shadow: 0 10px 26px rgba(16,19,23,.28);
}

.ort-h2 { margin-top: 2.2em; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.ort-h2:first-child { margin-top: 0; }
.ort-fakten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2px; margin: 40px 0 0; padding: 26px;
  background: var(--flaeche); border-radius: var(--r-gross);
}
.ort-fakten dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grau-hell);
}
.ort-fakten dd { margin: 5px 0 0; font-weight: 600; }

/* ------------------------------------------------------------ Formular-Wizard */

.formular-sek { background: var(--tinte); color: #fff; }
.formular-in {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.formular-text .sek-titel { color: #fff; }
.formular-text .sek-label { color: var(--gruen); }
.formular-text > p { color: rgba(255,255,255,.72); }
.formular-usp { margin: 26px 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.formular-usp li {
  display: flex; align-items: center; gap: 11px;
  font-size: .95rem; color: rgba(255,255,255,.86);
}
.formular-usp .ic { width: 18px; height: 18px; color: var(--gruen); stroke-width: 2.6; }
/* Text und Nummer als Flex-Zeile: vorher sass der inline-flex-Link auf der
   Grundlinie und hing sichtbar tiefer als der Text davor. */
.formular-tel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .92rem; color: rgba(255,255,255,.6);
}
.formular-tel a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 1.25rem; font-weight: 700; line-height: 1; color: #fff; text-decoration: none;
}
.formular-tel .ic { color: var(--gruen); }

.wiz {
  padding: clamp(26px, 3.4vw, 42px);
  background: #fff; border-radius: var(--r-gross); color: var(--tinte);
}
.wiz-kopf { margin-bottom: 30px; }
.wiz-zaehler {
  margin-bottom: 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--grau-hell);
}
.wiz-zaehler b { color: var(--rot); }
.wiz-punkte { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wiz-punkte li {
  flex: 1; height: 5px; border-radius: 3px; background: var(--linie);
  transition: background var(--t);
}
.wiz-punkte li.aktiv { background: var(--rot); }

.wiz-schritt { display: none; margin: 0; padding: 0; border: 0; }
.wiz-schritt:not([hidden]) { display: block; }
.wiz-schritt legend {
  padding: 0; margin-bottom: 6px;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em;
}
.wiz-hilfe { margin-bottom: 22px; font-size: .92rem; color: var(--grau); }

.wahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; }
.wahl { position: relative; cursor: pointer; }
/* Sichtbar versteckt, aber weiterhin fokussierbar und im Accessibility-Tree
   -- width/height 0 wuerde das Radio dort verschwinden lassen. */
.wahl input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
.wahl span {
  display: flex; align-items: center; min-height: 60px; padding: 14px 18px;
  border: 2px solid var(--linie); border-radius: var(--r);
  font-size: .95rem; font-weight: 500; line-height: 1.35;
  transition: border-color var(--t), background var(--t);
}
.wahl:hover span { border-color: var(--grau-hell); }
.wahl input:checked + span {
  border-color: var(--rot); background: rgba(198,24,43,.05); font-weight: 600;
}
.wahl input:focus-visible + span { outline: 3px solid var(--rot); outline-offset: 2px; }

.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.felder label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .85rem; font-weight: 600;
}
.felder label i { font-style: normal; font-weight: 400; color: var(--grau-hell); }
.felder .voll { grid-column: 1 / -1; }
.felder input[type="text"], .felder input[type="tel"], .felder input[type="email"],
.felder textarea {
  padding: 13px 15px; border: 2px solid var(--linie); border-radius: 10px;
  font: inherit; font-size: .96rem; font-weight: 400; color: var(--tinte);
  background: #fff; transition: border-color var(--t);
}
.felder input:focus, .felder textarea:focus { border-color: var(--rot); outline: 0; }
/* width/min-width: ein Datei-Feld hat eine feste Eigenbreite und schrumpft
   nicht mit -- ohne diese Zeile sprengt es auf dem Handy das ganze Formular. */
.felder input[type="file"] {
  width: 100%; min-width: 0;
  padding: 11px 13px; border: 2px dashed var(--linie); border-radius: 10px;
  font: inherit; font-size: .9rem; font-weight: 400; color: var(--grau);
  background: var(--flaeche); cursor: pointer;
}
.felder input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 999px;
  font: inherit; font-size: .85rem; font-weight: 600; color: #fff;
  background: var(--tinte); cursor: pointer;
}
.felder input[type="file"]:focus { border-color: var(--rot); outline: 0; }
.felder .check { flex-direction: row; gap: 12px; align-items: flex-start;
  font-size: .85rem; font-weight: 400; line-height: 1.5; color: var(--grau); }
.felder .check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--rot); flex: 0 0 auto; }
.felder .check a { color: var(--rot); }
.feld-fehler { border-color: var(--rot) !important; }

.wiz-fuss { display: flex; gap: 12px; margin-top: 30px; }
.wiz-fuss .btn { display: inline-flex; }
.wiz-fuss .btn[hidden] { display: none; }
.wiz-weiter, .wiz-senden { margin-left: auto; }
.wiz-danke { display: none; }
.wiz-danke:not([hidden]) {
  display: block; margin: 26px 0 0; padding: 20px 24px;
  background: rgba(244,217,46,.24); border-left: 4px solid var(--gruen); border-radius: 10px;
  font-weight: 600; color: #5a4704;
}

/* ------------------------------------------------------------ Fuss */

.fuss { background: var(--tinte); color: rgba(255,255,255,.68); font-size: .93rem; }
/* Fuenf Spalten: die Oeffnungszeiten stehen neben dem Kontakt statt darunter --
   gestapelt machten sie die Kontaktspalte doppelt so hoch wie die uebrigen. */
.fuss-oben {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.15fr 1.05fr; gap: 40px;
  padding: clamp(52px, 6vw, 82px) 0 52px;
}
.fuss-marke p { max-width: 34ch; margin: 20px 0 22px; }
.fuss h3 {
  margin-bottom: 18px;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #fff;
}
.fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.fuss a { text-decoration: none; transition: color var(--t); }
.fuss-sp a:hover, .fuss-unten a:hover { color: #fff; }
.social { display: flex; gap: 10px; }
.social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: #fff;
  transition: background var(--t), border-color var(--t);
}
.social a:hover { background: var(--rot); border-color: var(--rot); }
.fuss address { display: grid; gap: 11px; font-style: normal; }
.fuss address a { display: flex; align-items: flex-start; gap: 11px; }
.fuss address .ic { margin-top: 2px; width: 18px; height: 18px; color: var(--rot); }
.fuss address a:hover { color: #fff; }
/* Eigene Spalte -> kein Abstand nach oben mehr, sie startet auf Hoehe der
   anderen Spaltenlisten. */
.zeiten-mini { margin: 0; font-size: .84rem; }
.zeiten-mini > div { padding: 7px 0; border-color: rgba(255,255,255,.09); }

/* Ortsliste steht unter Impressum/Datenschutz -> sie traegt jetzt den
   Abschluss-Abstand des Footers. */
.fuss-orte { padding: 30px 0 40px; border-top: 1px solid rgba(255,255,255,.09); }
.fuss-orte ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss-orte a { font-size: .86rem; }
.fuss-orte a:hover { color: #fff; }

.fuss-unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.09);
  font-size: .85rem;
}
.fuss-unten p { margin: 0; }
.fuss-unten ul { display: flex; gap: 24px; }

/* ------------------------------------------------------------ Sticky Anruf (mobil) */

.ruf-sticky { display: none; }
.rechtstext h2 { margin-top: 2em; font-size: 1.3rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { color: var(--grau); }
.rechtstext a { color: var(--rot); }

/* ------------------------------------------------------------ Reveal */

[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].sichtbar {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .station { opacity: 1 !important; }
  .hero-video { display: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------ Responsiv */

@media (max-width: 1080px) {
  .nav, .kopf-cta { display: none; }
  .burger { display: flex; }
  .zahlen-in { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .zahl:nth-child(2) { border-right: 0; }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .vorteile { grid-template-columns: repeat(2, 1fr); }
  .vorteile > *, .vorteile > :nth-child(4), .vorteile > :nth-child(5) { grid-column: auto; }
  /* Marke ueber die volle Breite -> die vier Listenspalten gehen als 2+2 auf,
     statt die Oeffnungszeiten allein in einer dritten Zeile stehen zu lassen. */
  .fuss-oben { grid-template-columns: 1fr 1fr; gap: 40px; }
  .fuss-marke { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 60px; }
  .kopf-in { min-height: 56px; }
  .kopfsek-in, .ueber-teaser-in, .geschichte, .highlight, .formular-in, .kontakt-raster {
    grid-template-columns: 1fr;
  }
  .geschichte-bild { position: static; }
  /* Foto-Spalten unter 860px hinter den Text, nicht daneben */
  .kopfsek-bild-sp, .highlight-bild { order: -1; }
  .geschichte-bild, .ueber-teaser-bild { max-width: 520px; }
  .stelle { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* Breiten-Akkordeon traegt auf schmalen Schirmen nicht -> stapeln, alle offen */
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; height: clamp(340px, 52vh, 420px); }
  .panel > img,
  .panels.hat-offen .panel:not(.ist-offen) > img { object-position: 32% center; }
  /* Gleiche Markenfarb-Blende wie der geschlossene Desktop-Streifen -- deckt den
     eingebrannten Bildtitel zuverlaessig ab, statt auf Zufallspositionierung zu hoffen. */
  .panel-schleier,
  .panels.hat-offen .panel:not(.ist-offen) .panel-schleier {
    opacity: 1;
    background: linear-gradient(
      180deg,
      transparent 8%,
      color-mix(in srgb, var(--panel-farbe) 82%, transparent) 26%,
      var(--panel-farbe) 40%,
      var(--panel-farbe) 100%
    );
  }
  .panel-flaeche { display: none; }
  .panel-vertikal,
  .panels.hat-offen .panel:not(.ist-offen) .panel-vertikal { display: none; }
  .panel-inhalt,
  .panels.hat-offen .panel .panel-inhalt {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .felder { grid-template-columns: 1fr; }
  .rkarte { flex-basis: 100%; }
  .karte { min-height: 300px; aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
  .hero {
    min-height: 0; padding: 64px 0 96px;
    /* Eigenes Mobile-Layout mit eigenem Verlauf -- side-by-side traegt hier nicht */
  }
  /* Startseite: die Glas-Kopfleiste (56px) liegt ueber dem Hero -> Inhalt tiefer. */
  body.start .hero { padding-top: 112px; }
  .hero-schleier {
    background: linear-gradient(180deg, rgba(16,19,23,.9) 0%, rgba(16,19,23,.78) 40%, rgba(16,19,23,.95) 100%);
  }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { justify-content: center; }
  .hero-trust { gap: 9px 18px; }
  .hero-trust li { font-size: .83rem; }
  .ablauf, .zahlen-in, .vorteile, .vorteile-2 { grid-template-columns: 1fr; }
  .zahl { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 22px; }
  .zahl:last-child { border-bottom: 0; padding-bottom: 0; }
  .fuss-oben { grid-template-columns: 1fr; }
  .wahlen { grid-template-columns: 1fr; }
  .wiz-fuss { flex-direction: column-reverse; }
  .wiz-fuss .btn { justify-content: center; width: 100%; margin-left: 0; }
  .untermenu { width: auto; }

  /* Sticky Anruf-Button -- nur mobil, Kontaktweg aus dem Interview */
  .ruf-sticky {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 22px; border-radius: 999px;
    background: var(--rot); color: #fff; text-decoration: none;
    font-weight: 700; font-size: 1rem;
    box-shadow: 0 10px 30px rgba(198,24,43,.42);
  }
  .ruf-sticky .ic { width: 19px; height: 19px; }
  /* Platz fuer den schwebenden Anruf-Button -- gilt fuer den letzten Block. */
  .fuss-orte { padding-bottom: 96px; }
}