/* Erzeugt von tools/assets.py - nicht von Hand aendern. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/schriften/manrope-normal-400-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/schriften/sora-normal-400-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}


/* ===========================================================================
   DEAK Kälte-Klima-Lüftungstechnik – Stylesheet

   Grundlage: dunkel und elegant (Onboarding: "Dunkel & elegant",
   "Modern & aufgeräumt"). Die Palette kommt aus dem Logo: #004F9E Blau,
   #E2000E Rot. Das Rot ist reines Signal und traegt nie Flaeche.

   Die Aktionsfarbe ist gegen ALLE vier Gruende gemessen (tools/farben.py):
   weisse Schrift darauf 4,55:1 – gegen die dunkelste Flaeche 4,05:1 –
   gegen die Kartenflaeche 3,18:1 – gegen Weiss 4,55:1. Die Kartenflaeche
   fehlte in der ersten Fassung; dort lag der Knopf bei 2,91:1.
   =========================================================================== */

/* ------------------------------------------------------------------ Tokens */
:root {
  /* Flaechen, von tief nach hell */
  --tief:      #0A2342;   /* Konzeptfarbe, gemessen aus IMG_2031 */
  --marke:     #0D2A4E;
  /* Karten liegen jetzt TIEFER als der Grund statt hoeher. Grund: auf
     dem helleren Konzept-Navy erreicht ein roter Knopf auf einer noch
     helleren Kartenflaeche keine 3:1 mehr - gemessen 2,50:1. Das
     Konzept selbst ist ohnehin eine durchgehende Flaeche mit feinen
     Linien, keine erhobenen Karten. */
  --flaeche:   #08203C;
  --kante:     rgba(146, 185, 222, 0.18);
  --kante-satt:rgba(146, 185, 222, 0.34);

  --hell:      #EEF3F8;
  --hell-tief: #DFE9F2;
  --papier:    #FFFFFF;

  /* Schrift */
  --auf-dunkel:      #FFFFFF;
  --auf-dunkel-weich:#A8BDD2;
  --auf-dunkel-leise:#7A93AC;
  --auf-hell:        #0A1724;
  --auf-hell-weich:  #43596F;

  /* Marke */
  --blau:      #004F9E;
  --eis:       #67B8F5;
  /* Aus dem Konzept gemessen war dieser Ton #A2C3ED. Auf dem Foto kam er
     nur auf 4,09:1 - deshalb eine Spur heller. Der Eindruck bleibt. */
  --eis-weich: #B4D0F2;   /* zweite Zeile der Hero-Ueberschrift */
  /* Schrift liegt im Hero auf dem Foto. Die normalen Sekundaertoene
     (--auf-dunkel-weich/-leise) reichen dort nicht: gemessen 3,83:1.
     Diese zwei sind angehoben, damit sie auch auf der hellsten Stelle
     ueber 4,5:1 bleiben. */
  --auf-bild:       #E6EEF7;
  --auf-bild-weich: #D3E0EE;
  /* Hellste Stelle des Heros nach dem Schleier, aus dem Bild gemessen
     plus 10 Prozent Zuschlag - neu gemessen 23.09.2026 gegen team-begehung.
     So faellt ein spaeterer Bildwechsel auf,
     bevor er live geht. Gilt fuer einen Schleier von 80 Prozent. */
  --bild-hellste:   #3F5672;
  --warn:      #F5A524;   /* Formularfehler, seit Rot Aktionsfarbe ist */
  --rot:       #E2000E;
  --aktion:    #CF2D23;   /* Konzeptknopf */
  --aktion-tief:#A81F17;
  --wa:        #25D366;
  --wa-tief:   #0F8272;   /* WhatsApp-Teal: weisse Schrift 4,71:1, Kartenflaeche 3,07:1 */

  /* Abstaende – die einzige erlaubte Skala */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;
  --raum-8: 4rem;
  --raum-9: 6rem;

  --rund-1: 6px;
  --rund-2: 12px;
  --rund-3: 20px;

  --breit: 74rem;
  --schmal: 46rem;
  --kopf-hoehe: 4.5rem;
  --logo-hoehe: 2.1rem;

  --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-display: "Sora", var(--schrift);

  --tempo: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Der Kopf klebt - ohne das landet jedes Sprungziel darunter. */
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--raum-4));
}
/* Kein overflow-x:hidden auf html/body – das killt position:sticky.
   Ueberstand wird an der Quelle begrenzt. */
body {
  margin: 0;
  background: var(--tief);
  color: var(--auf-dunkel);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
/* Muss VOR allen Bausteinen stehen: eine Regel wie `.popup { display: grid }`
   ist spezifischer als die Browser-Regel fuer [hidden] und laesst das
   Pop-up beim Laden offen stehen. Genau so ist es hier einmal passiert. */
[hidden] { display: none !important; }
img, picture, svg, video { max-width: 100%; }
img { display: block; height: auto; border: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--raum-4); }
a { color: var(--eis); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--auf-dunkel); }
:focus-visible { outline: 3px solid var(--eis); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 var(--raum-4);
  text-wrap: balance;
  /* Deutsche Komposita sprengen bei 320 px jede Ueberschrift: gemessen
     lief „Datenschutzerklärung“ mit 350 px in einen 288 px breiten
     Container. hyphens greift, weil <html lang="de"> gesetzt ist;
     overflow-wrap faengt Browser ohne deutsche Trennmuster ab. */
  hyphens: auto;
  /* Aber nur bei Woertern, die wirklich zu lang sind. Ohne Schranke trennt
     der Browser auch dort, wo es ihm den Zeilenumbruch schoener macht -
     bei „meisterhaft" (11 Zeichen) mitten im Wort, obwohl es komplett in
     die naechste Zeile gepasst haette (Vanessa, 28.09.2026). 15 Zeichen
     als Untergrenze laesst „Datenschutzerklaerung" (20) weiter trennen,
     „Mechatroniker" (13) und „Kaeltetechnik" (12) nicht mehr.
     Aeltere Browser kennen die Eigenschaft nicht und verhalten sich wie
     bisher; overflow-wrap bleibt in jedem Fall das Netz darunter. */
  hyphenate-limit-chars: 15 5 5;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.25rem + 3.1vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 1rem + 0.55vw, 1.375rem); letter-spacing: -0.015em; }

.gross {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.6;
  max-width: 62ch;
}
p, li, dd { max-width: 70ch; }   /* 78ch ergaben gemessen ~95 Zeichen */
.leise { color: var(--auf-dunkel-leise); font-size: 0.9375rem; max-width: 64ch; }
.mitte { text-align: center; }
.versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: absolute; left: var(--raum-2); top: -4rem; z-index: 200;
  background: var(--aktion); color: #fff; padding: var(--raum-3) var(--raum-4);
  border-radius: var(--rund-1); text-decoration: none; transition: top var(--tempo);
}
.sprung:focus { top: var(--raum-2); color: #fff; }

.container {
  width: min(100% - 2rem, var(--breit));
  margin-inline: auto;
}
.container.schmal { width: min(100% - 2rem, var(--schmal)); }

/* -------------------------------------------------------------------- Kopf */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--tief) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kante);
}
.kopf__innen {
  width: min(100% - 2rem, var(--breit)); margin-inline: auto;
  min-height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: var(--raum-5);
}
.marke {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: inherit; flex: 0 0 auto;
}
/* Feste Hoehe ueber eine Variable – height:100% in einem selbstbemessenen
   Flex-Element laesst das Logo explodieren. */
.marke__zeichen { height: var(--logo-hoehe); width: auto; }
.marke__zusatz {
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--auf-dunkel-leise); font-weight: 600;
}
.haupt { margin-left: auto; }
.haupt ul { display: flex; gap: var(--raum-5); }
.haupt a {
  color: var(--auf-dunkel-weich); text-decoration: none;
  font-size: 0.9375rem; font-weight: 600; padding-block: var(--raum-2);
  border-bottom: 2px solid transparent;
}
.haupt a:hover, .haupt a[aria-current] {
  color: var(--auf-dunkel); border-bottom-color: var(--eis);
}
.kopf__aktion { display: flex; align-items: center; gap: var(--raum-4); }
.kopf__tel { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.kopf__tel-klein { font-size: 0.6875rem; color: var(--auf-dunkel-leise); }
.kopf__tel-nummer {
  font-family: var(--schrift-display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.kopf__tel:hover .kopf__tel-nummer { color: var(--eis); }

.menue {
  display: none; margin-left: auto; align-items: center; gap: var(--raum-2);
  background: none; border: 1px solid var(--kante-satt);
  border-radius: var(--rund-1); padding: var(--raum-2) var(--raum-3);
  color: var(--auf-dunkel); font-weight: 600; font-size: 0.875rem;
  min-height: 44px; cursor: pointer;
}
.menue__balken, .menue__balken::before, .menue__balken::after {
  display: block; width: 18px; height: 2px; background: currentColor;
  content: ""; position: relative;
}
.menue__balken::before { top: -6px; }
.menue__balken::after { top: 4px; }
.klapp { border-top: 1px solid var(--kante); padding: var(--raum-4) 0 var(--raum-5); }
.klapp ul { width: min(100% - 2rem, var(--breit)); margin-inline: auto; }
.klapp li + li { border-top: 1px solid var(--kante); }
.klapp a {
  display: block; padding: var(--raum-3) 0; color: var(--auf-dunkel);
  text-decoration: none; font-weight: 600; font-size: 1.0625rem;
}
.klapp .knopf {
  width: min(100% - 2rem, var(--breit)); margin: var(--raum-4) auto 0;
}

@media (max-width: 62rem) {
  .haupt, .kopf__aktion { display: none; }
  .menue { display: inline-flex; }
}
@media (min-width: 62.001rem) { .klapp { display: none; } }

/* ------------------------------------------------------------------ Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 48px; padding: var(--raum-3) var(--raum-5);
  border: 1px solid transparent; border-radius: var(--rund-1);
  font-weight: 700; font-size: 0.9375rem; text-decoration: none;
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf--stark { background: var(--aktion); color: #fff; }
.knopf--stark:hover { background: var(--aktion-tief); color: #fff; }
/* Der Anrufknopf stand als reiner Umriss neben zwei gefuellten Knoepfen
   und ging unter - ausgerechnet der Weg, den ein Gewerbekunde bei einer
   Stoerung zuerst nimmt. Er bekommt jetzt eine eigene, gefuellte Flaeche
   und eine kraeftigere Kante, bleibt aber heller als der rote Hauptknopf,
   damit die Rangfolge stimmt. */
.knopf--rand {
  border-color: rgba(255, 255, 255, 0.45); border-width: 1.5px;
  background: var(--marke); color: var(--auf-dunkel);
  flex-direction: column; gap: 0; padding-block: var(--raum-2);
}
.knopf--rand:hover {
  border-color: var(--eis); background: var(--tief);
  color: var(--auf-dunkel);
}
.knopf--rand .knopf__nummer { font-size: 1.0625rem; }
.abschnitt--hell .knopf--rand {
  background: var(--papier); border-color: var(--hell-tief); color: var(--auf-hell);
}
.knopf__klein { font-size: 0.6875rem; font-weight: 600; color: var(--auf-dunkel-leise); }
.knopf__nummer { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.knopf--wa { background: var(--wa-tief); color: #fff; }
.knopf--wa:hover { background: #0B6A5D; color: #fff; }
.knopf--klein { min-height: 44px; padding: var(--raum-2) var(--raum-4); font-size: 0.875rem; }
.knopf--breit { width: 100%; }

.weiter {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 700; text-decoration: none; color: var(--eis);
  min-height: 44px;
}
.weiter::after { content: "›"; font-size: 1.3em; line-height: 1; }
.weiter:hover { color: var(--auf-dunkel); }
.weiter:hover::after { transform: translateX(3px); }

/* -------------------------------------------------------------------- Hero */
/* Das Foto fuellt den Hero und liegt hinter dem Text, gleichmaessig
   abgedunkelt. Bewusst KEIN Panel rechts und kein Zoom: die Gruppe belegt
   62 Prozent der Bildbreite, rechts vom Text sind 55 Prozent frei - sie
   passt dort nicht hin. Reinzoomen verschiebt sie zwar nach rechts, macht
   sie aber im selben Mass breiter; bei dem Zoom, der noetig waere (2,35x),
   blieben von fuenf Monteuren zwei im Bild. Entscheidung vom 23.09.2026:
   lieber alle fuenf sichtbar, die ersten beiden dafuer hinter der Schrift. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tief); padding-block: var(--raum-8);
}
.hero__foto { position: absolute; inset: 0; z-index: 0; }
.hero__foto picture, .hero__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: center 40%;
}
/* Der Schleier sitzt auf dem Foto, nicht auf dem Hero - sonst wuerde er
   im Panelfall auch die freie Flaeche links abdunkeln. */
.hero__foto::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 35, 66, 0.80);
}
.hero__innen { position: relative; z-index: 2; }
/* Der Hero-Text bleibt in einer Spalte von hoechstens 46 Prozent der
   Breite. Vorher hing diese Begrenzung an der Panel-Fassung und fiel mit
   ihr weg - der Text lief dann ueber 89 bis 96 Prozent. Die 46 Prozent
   sind die Rechengrundlage fuer das Hero-Foto: rechts davon muss die
   Gruppe Platz finden. */
/* Die Spalte endet bei 38 Prozent der Fensterbreite. Grund: im erweiterten
   Hero-Foto beginnt der erste Monteur bei 39 Prozent (gemessen), und vor
   ihm liegt nur die von Canva ergaenzte Flaeche. Der Text deckt also genau
   den erfundenen Teil ab und laesst alle fuenf frei.
   Gerechnet: der Container ist mittig, sein linker Rand liegt bei
   (100vw - 74rem)/2. Damit die Spalte bei 38vw endet, darf sie
   37rem - 12vw breit sein. */
.hero__innen > *,
.hero h1,
.hero .hero__lead,
.hero .hero__zeit { max-width: min(34rem, calc(37rem - 12vw)); }
/* Knopfzeile und Kennzahlen duerfen ueber die Textspalte hinaus - sonst
   rutschen WhatsApp und die dritte Kennzahl in eine zweite Reihe. Aber nur
   so weit, wie ihr Inhalt reicht: mit blossem max-width:none liefen sie
   als Blockelemente bis 96 Prozent und damit quer ueber die Monteure. */
.hero .aktion--hero,
.hero .hero__fakten { max-width: none; width: fit-content; }
.hero .hero__lead { color: var(--auf-bild-weich); }
.hero .kennzeile { color: var(--auf-bild); }
.hero .hero__band, .hero .hero__zeit { color: var(--auf-bild-weich); }
.hero .hero__fakten span { color: var(--auf-bild-weich); }
/* Ab Tablet steht die H1 in der 46-Prozent-Spalte und muss hineinpassen.
   Gemessen braucht "Wir halten Ihr Gewerbe" das 11,45-Fache der
   Schriftgroesse, die Spalte ist hoechstens 34rem breit - also 44 px als
   Obergrenze. Auf schmalen Bildschirmen bleibt die globale Groesse. */
@media (min-width: 62rem) {
  /* Die Schrift folgt der Spalte: gemessen braucht "Wir halten Ihr
     Gewerbe" das 11,45-Fache der Schriftgroesse. */
  .hero h1 { font-size: clamp(1.5rem, 3.2rem - 1.05vw, 2.25rem); }
}

@media (max-width: 48rem) {
  /* Schmal ist das Band sonst ein Streifen - dort das volle 16:9. */
  .hero__band-bild img { aspect-ratio: 16 / 9; }
}

/* Kennzeile: Ort und Einsatzgebiet, gesperrt und klein. Der Punkt traegt
   das Logo-Rot - das ist die einzige Stelle, an der es als Flaeche
   auftaucht. */
.kennzeile {
  display: flex; align-items: center; gap: var(--raum-3);
  margin-bottom: var(--raum-5);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--auf-dunkel-weich);
}
.kennzeile::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rot); flex: 0 0 auto;
}
.kennzeile::after { content: none; }
@media (min-width: 48rem) {
  .kennzeile::after {
    content: ""; height: 1px; flex: 1; max-width: 5rem;
    background: var(--kante-satt);
  }
}
.hero h1 span { display: block; color: var(--eis-weich); }


/* Kennzahlen in EINER Zeile. Die Textspalte ist schmal (38 Prozent), also
   duerfen sie ueber sie hinauslaufen - sie stehen ueber dem ergaenzten
   Bildteil, nicht ueber den Monteuren, und sind klein genug dafuer. */
.hero__fakten {
  display: flex; flex-wrap: nowrap; gap: var(--raum-5);
  margin-top: var(--raum-6);
}
.hero__fakten li { flex: 0 0 auto; }
.hero__fakten b { font-size: 1.25rem; }
.hero__fakten span { white-space: nowrap; }
.hero__fakten li { display: flex; flex-direction: column; }
.hero__fakten b {
  font-family: var(--schrift-display); font-size: 1.5rem; font-weight: 700;
  color: var(--eis); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.hero__fakten span { font-size: 0.8125rem; color: var(--auf-dunkel-weich); }
.hero__lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--auf-dunkel-weich); max-width: 34em; margin-bottom: var(--raum-6);
}
.hero__zeit {
  margin-top: var(--raum-4); font-size: 0.875rem;
  color: var(--auf-dunkel-leise); max-width: 64ch;
}
.rahmen {
  display: block; border-radius: var(--rund-3); overflow: hidden;
  border: 1px solid var(--kante);
}
.rahmen img { width: 100%; }

.aktion { display: flex; flex-wrap: wrap; gap: var(--raum-3); }
.aktion .knopf--rand { min-width: 9.5rem; }

/* ------------------------------------------------------- Unterseiten-Hero */
/* Alle Unterseiten gleich hoch, gleiche Containerbreite, gleiche H1-Groesse. */
.unterhero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--tief); padding-block: var(--raum-7) var(--raum-8);
  border-bottom: 1px solid var(--kante);
}
/* Das Foto liegt in .hero__foto - dieselbe Klasse wie auf der Startseite,
   damit beide denselben Schleier tragen. Gerechnet deckt der Schleier
   selbst reines Weiss auf rgb(59,79,103) ab; --bild-hellste (63,86,114)
   liegt darueber und bleibt damit die sichere obere Schranke, egal
   welches Foto hinter welchem Hero steht. */
.unterhero__innen { position: relative; z-index: 2; }
/* Alle Unterseiten-Heros gleich hoch. 29,5rem ist der groesste gemessene
   Inhalt (472 px, /ueber-uns ab 1280 px) - darunter waere die Hoehe wieder
   vom Text abhaengig. Gemessen lagen die Heros vorher zwischen 369 und
   585 px. Unter 64rem faellt die Vorgabe weg, dort richtet sich jeder Hero
   nach seiner eigenen Ueberschrift. */
.unterhero__innen { min-height: 16rem; display: flex; flex-direction: column; }
@media (min-width: 64rem) {
  /* Zwei Zeilen: Brotkrume oben, alles andere mittig im Rest. Vorher hing
     die Brotkrume absolut positioniert darueber und lief bei /ueber-uns
     quer durch das Kennzahlenband. */
  .unterhero__innen {
    min-height: 29.5rem;
    display: grid; grid-template-rows: auto 1fr; align-items: start;
  }
  .unterhero__block {
    display: flex; flex-direction: column; justify-content: center;
    height: 100%;
  }
}
.unterhero h1 { max-width: 20ch; }
/* Oberzeile ueber der Ueberschrift: kleiner und im hellen Blau, wie die
   zweite Zeile im Start-Hero. In em gerechnet, damit sie der H1 ueber
   alle Breiten im selben Verhaeltnis folgt. Die enge Laufweite der
   Ueberschriften wird zurueckgenommen - bei dieser Groesse klebt sie
   sonst. Farbe --eis-weich: dieselbe Marke, die im Start-Hero geprueft
   ist (4,76:1 gegen die hellste Stelle unter dem Schleier). */
.unterhero__ober {
  display: block; color: var(--eis-weich);
  font-size: 0.45em; letter-spacing: -0.01em; line-height: 1.25;
  margin-bottom: var(--raum-3);
}
.unterhero__lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  color: var(--auf-dunkel-weich); max-width: 44ch; margin-bottom: var(--raum-6);
}
.unterhero__fakten {
  display: flex; flex-wrap: wrap; gap: var(--raum-5); margin-bottom: var(--raum-5);
}
.unterhero__fakten li { display: flex; flex-direction: column; }
.unterhero__fakten b {
  font-family: var(--schrift-display); font-size: 1.25rem; font-weight: 700;
  color: var(--eis); font-variant-numeric: tabular-nums;
}
.unterhero__fakten span { font-size: 0.8125rem; color: var(--auf-dunkel-weich); }
.krume { font-size: 0.8125rem; color: var(--auf-dunkel-leise); margin-bottom: var(--raum-5); }
.krume a { color: var(--auf-dunkel-weich); }
/* Auf dem Foto steht der Text vor hoechstens rgb(59,79,103). Gegen diesen
   Grund gemessen: --auf-bild 7,19:1, --auf-bild-weich 6,28:1. */
.unterhero .unterhero__lead { color: var(--auf-bild-weich); }
.unterhero .unterhero__fakten span { color: var(--auf-bild-weich); }
.unterhero .krume { color: var(--auf-bild-weich); }
.unterhero .krume a { color: var(--auf-bild); }

/* ---------------------------------------------------------------- Sektionen */
/* Haarlinie zwischen je zwei Abschnitten. Gemessen lagen die drei dunklen
   Toene nur 1,1:1 auseinander - sichtbar genug, um wie ein Fehler zu wirken,
   zu schwach, um als Gliederung zu lesen. Jetzt ist der Grund durchgehend
   derselbe (Verhaeltnis 1,0) und die Grenze eine Linie. Der Sprung zu den
   hellen Abschnitten bleibt mit rund 13:1 unuebersehbar. */
main > section + section { border-top: 1px solid var(--kante); }
main > section + section.abschnitt--hell,
main > section + section.wege,
main > section + section.dienste,
main > section + section.ablauf { border-top-color: var(--hell-tief); }
.abschnitt { padding-block: var(--raum-8); background: var(--tief); }
.abschnitt--dunkel { background: var(--tief); }
.abschnitt--hell { background: var(--hell); color: var(--auf-hell); }
.abschnitt--hell a { color: var(--blau); }
.abschnitt--hell a:hover { color: var(--auf-hell); }
.abschnitt--hell .gross { color: var(--auf-hell-weich); }
.abschnitt--hell .leise { color: var(--auf-hell-weich); }

/* Zwei Wege: zwei Karten, deutlich getrennt */
/* Weisse Flaeche, damit der Abschnitt nicht mit dem Hero zu einem blauen
   Block verschwimmt (Anmerkung vom 24.09.2026). Bewusst NICHT ueber
   .abschnitt--hell: der Modifikator wuerde auch die zwei Kacheln aufhellen,
   und die sollen dunkel bleiben. Deshalb nur Flaeche und Schriftfarbe. */
.wege { background: var(--papier); padding-block: var(--raum-8); }
/* Die dunkle Schrift NUR auf das, was direkt auf dem Weiss liegt. Setzt man
   sie auf den Abschnitt, erben sie auch die zwei dunklen Kacheln - gemessen
   1,10:1 auf der Kachel-Ueberschrift. */
.wege > .container > h2 { color: var(--auf-hell); }
.wege .mitte.gross {
  color: var(--auf-hell-weich); max-width: 46ch; margin-inline: auto;
  margin-bottom: var(--raum-7);
}
.wege__gitter { display: grid; gap: var(--raum-5); }
@media (min-width: 48rem) { .wege__gitter { grid-template-columns: 1fr 1fr; } }
.weg {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rund-3); padding: var(--raum-6);
  display: flex; flex-direction: column;
}
.weg--zuhause { background: var(--tief); }
.weg p { color: var(--auf-dunkel-weich); }
.marken { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-bottom: var(--raum-5); }
.marken li {
  font-size: 0.8125rem; font-weight: 600; padding: var(--raum-1) var(--raum-3);
  border: 1px solid var(--kante-satt); border-radius: 999px;
  color: var(--auf-dunkel-weich);
}
.weg .weiter { margin-top: auto; }

/* Dienste: Liste mit Trennlinien statt Kacheln – anderes Muster als oben */
.dienste { background: var(--hell); color: var(--auf-hell); padding-block: var(--raum-8); }
.dienste__gitter { display: grid; gap: 0; border-top: 1px solid var(--hell-tief); }
@media (min-width: 52rem) {
  .dienste__gitter { grid-template-columns: repeat(2, 1fr); column-gap: var(--raum-7); }
}
.dienst { padding-block: var(--raum-5); border-bottom: 1px solid var(--hell-tief); }
.dienst h3 { margin-bottom: var(--raum-1); }
/* Das sind die Hauptwege in die Leistungen, also echte Tippflaechen.
   Gemessen waren sie 23 bis 28 px hoch. */
.dienst h3 a {
  color: var(--auf-hell); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.dienst h3 a:hover { color: var(--blau); }
.dienst p { color: var(--auf-hell-weich); margin: 0; }
.dienste__fuss { margin: var(--raum-6) 0 0; }
.dienste__fuss .weiter { color: var(--blau); }

/* Bild-Text-Band */
.band { background: var(--tief); padding-block: var(--raum-8); }
.band__gitter { display: grid; gap: var(--raum-7); align-items: center; }
@media (min-width: 62rem) {
  .band__gitter { grid-template-columns: 1fr 1fr; gap: var(--raum-8); }
  .band__gitter--dreh .band__bild { order: 2; }
  /* Ein Band, dessen Text kurz ist: schmalere Bildspalte, sonst ist das
     Foto anderthalbmal so hoch wie der Text daneben (gemessen 228 zu
     374 px). Mehr Text nur zum Ausgleichen zu schreiben waere falsch
     herum gedacht. */
  .band__gitter--textstark { grid-template-columns: 1.35fr 0.65fr; }
  .band__bild--schmal { max-width: 24rem; }
}
.haken { display: grid; gap: var(--raum-3); margin-bottom: var(--raum-5); }
.haken li { position: relative; padding-left: 1.75rem; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.75rem; height: 0.4rem; border-left: 2px solid var(--eis);
  border-bottom: 2px solid var(--eis); transform: rotate(-45deg);
}
.abschnitt--hell .haken li::before { border-color: var(--blau); }
.haken--reihe { gap: var(--raum-4); }
@media (min-width: 52rem) { .haken--reihe { grid-template-columns: 1fr 1fr; } }

.gemeinsam {
  border: 1px solid var(--kante); border-radius: var(--rund-3);
  padding: var(--raum-6);
}

/* Ablauf als Slalom (nur Startseite)
   Zwei Spalten, drei Reihen, die rechte Spalte tiefer. Die Bahn liegt
   HINTER den Kacheln und zeigt sich nur in den Luecken und an den Kurven -
   deshalb brauchen die Kacheln eine deckende Flaeche. Das Zeitband weiter
   unten bleibt unveraendert, die Karriereseite nutzt es weiter. */
.slalom { position: relative; padding: 0 var(--raum-6); }
.slalom__bahn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; color: #A9C4DC;
}
.slalom__schritte {
  list-style: none; margin: 0; padding: 0; counter-reset: schritt;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--raum-6) var(--raum-7); align-items: start;
  position: relative; z-index: 1;
}
.slalom__schritte li {
  counter-increment: schritt; position: relative;
  background: var(--papier); border-radius: var(--rund-2);
  padding: var(--raum-5) var(--raum-5) var(--raum-6);
  box-shadow: 0 3px 14px rgba(10, 35, 66, 0.08);
}
/* Der Versatz macht aus zwei Kurven eine Welle. */
.slalom__schritte li:nth-child(even) { margin-top: var(--raum-7); }
.slalom__schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  display: inline-block; margin-bottom: var(--raum-2);
  padding: 4px 10px; border-radius: 999px;
  background: var(--blau); color: var(--auf-dunkel);
  font-family: var(--schrift-display); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: 0.05em;
}
.slalom__schritte b {
  display: block; font-family: var(--schrift-display);
  font-size: 1.0625rem; margin-bottom: var(--raum-1);
}
.slalom__schritte span { color: var(--auf-hell-weich); font-size: 0.9375rem; }
.slalom .ablauf__symbol {
  position: absolute; top: var(--raum-5); right: var(--raum-5);
  color: var(--blau); opacity: 0.5;
}
/* Schmale Schirme: eine Spalte, kein Versatz. Die gezeichnete Bahn ergibt
   dort keinen Sinn mehr und weicht einer schlichten Linie am Rand. */
@media (max-width: 51.99rem) {
  .slalom { padding: 0 0 0 var(--raum-5); }
  .slalom__bahn { display: none; }
  .slalom__schritte { grid-template-columns: 1fr; gap: var(--raum-5); }
  .slalom__schritte li:nth-child(even) { margin-top: 0; }
  .slalom__schritte::before {
    content: ""; position: absolute; left: calc(-1 * var(--raum-4));
    top: 12px; bottom: 12px; width: 2px; background: #C7D8E8;
  }
}

/* Ablauf als Zeitband */
.ablauf { background: var(--hell); color: var(--auf-hell); padding-block: var(--raum-8); }
.ablauf__zeitband { counter-reset: schritt; display: grid; gap: var(--raum-5); }
@media (min-width: 52rem) {
  .ablauf__zeitband { grid-template-columns: repeat(3, 1fr); gap: var(--raum-5); }
}
/* Der Ablauf sitzt in einem eigenen Rahmen, damit er sich vom Teamtext
   darueber absetzt. Die Haarlinie, die vorher trennte, lag bei 1,08:1
   gegen den Grund - unsichtbar. (Vanessa, 16.10.2026, Variante B) */
.ablauf__rahmen {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--kante);
  border-radius: var(--rund-3);
  padding: var(--raum-6);
}
.ablauf__zeitband li {
  counter-increment: schritt; position: relative;
  background: var(--tief); border: 1px solid var(--kante-satt);
  border-radius: var(--rund-2); padding: var(--raum-5);
}
/* Das Symbol sitzt auf Hoehe der Schrittnummer am rechten Rand der Spalte.
   Rein schmueckend - es traegt keine Aussage, die nicht im Text steht. */
.ablauf__symbol {
  position: absolute; top: var(--raum-5); right: var(--raum-5);
  color: var(--blau); opacity: 0.55;
}
.ablauf__zeitband li::before {
  content: counter(schritt, decimal-leading-zero);
  display: block; font-family: var(--schrift-display); font-weight: 700;
  font-size: 0.8125rem; color: var(--blau); letter-spacing: 0.08em;
  margin-bottom: var(--raum-2);
}
.ablauf__zeitband b {
  display: block; font-family: var(--schrift-display); font-size: 1.125rem;
  margin-bottom: var(--raum-1);
}
.ablauf__zeitband span { color: var(--auf-dunkel-weich); font-size: 0.9375rem; }
/* Die Gespraechszeiten stehen unter allen drei Schritten, nicht in einem
   davon - in Schritt 2 lasen sie sich wie eine telefonische
   Erreichbarkeit. Zurueckhaltend, damit sie die Schritte nicht ueberlagern. */
/* Die Bewerbungsadresse ist 26 Zeichen lang und steht in einer von drei
   Spalten. Ohne Umbruchfreigabe laeuft sie bei 320 px ueber die Karte. */
.ablauf__zeitband span { overflow-wrap: anywhere; }
.reihe__titel {
  margin-top: var(--raum-7); padding-top: var(--raum-6);
  border-top: 1px solid var(--kante);
}
/* In der hellen Fassung traegt das Zeitband die dunkle Schrift. Der
   Abschnitt .ablauf bringt seine helle Flaeche selbst mit und heisst
   nicht .abschnitt--hell - er muss hier mitgenannt werden. */
.abschnitt--hell .ablauf__zeitband span,
.ablauf .ablauf__zeitband span { color: var(--auf-hell-weich); }

/* Vorteile: Raster in Leserichtung, ohne Kachelrahmen */
.vorteile { background: var(--tief); padding-block: var(--raum-8); }
.vorteile__gitter { display: grid; gap: var(--raum-6); }
@media (min-width: 46rem) { .vorteile__gitter { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .vorteile__gitter { grid-template-columns: repeat(3, 1fr); } }
.vorteil h3 { margin-bottom: var(--raum-2); }
.vorteil p { color: var(--auf-dunkel-weich); margin: 0; }

/* Nachweise */
/* Keine eigene Flaeche mehr - die Sektion bekommt sie ueber den
   Modifikator. Vorher gewann diese Regel, weil sie spaeter steht als
   .abschnitt--hell, und der Abschnitt blieb dunkel. */
.nachweis { padding-block: var(--raum-8); }
/* Auf heller Flaeche brauchen Pillenrand und Zweitzeile eigene Werte. */
.abschnitt--hell .siegel li { border-color: var(--hell-tief); }
.abschnitt--hell .nachweis__liste span { color: var(--auf-hell-weich); }
.abschnitt--hell .nachweis__liste li { border-left-color: var(--blau); }
.nachweis__gitter { display: grid; gap: var(--raum-7); align-items: center; }
@media (min-width: 62rem) { .nachweis__gitter { grid-template-columns: 1.15fr 0.85fr; } }
.nachweis__liste { display: grid; gap: var(--raum-4); }
.nachweis__liste li {
  display: grid; gap: var(--raum-1); padding-left: var(--raum-5);
  border-left: 2px solid var(--eis);
}
.nachweis__liste b { font-family: var(--schrift-display); font-size: 1.0625rem; }
.nachweis__liste span { color: var(--auf-dunkel-weich); font-size: 0.9375rem; }
@media (min-width: 52rem) {
  .nachweis__liste--breit { grid-template-columns: 1fr 1fr; gap: var(--raum-5); }
}
/* Kompakte Fassung auf der Startseite: nur die Titel, ohne Kachelrahmen. */
.siegel { display: flex; flex-wrap: wrap; gap: var(--raum-3); margin-bottom: var(--raum-5); }
.siegel li {
  font-family: var(--schrift-display); font-weight: 600; font-size: 0.9375rem;
  padding: var(--raum-2) var(--raum-4); border: 1px solid var(--kante-satt);
  border-radius: 999px;
}

/* Drei gleichrangige Absaetze in einer Reihe. Neben dem Foto standen sie
   vorher in einer Spalte und machten sie doppelt so hoch wie die
   Bildspalte (gemessen 310 zu 625 px). */
.dreiklang { display: grid; gap: var(--raum-6); margin-top: var(--raum-7);
             padding-top: var(--raum-6); border-top: 1px solid var(--kante); }
@media (min-width: 52rem) { .dreiklang { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .dreiklang--zwei { grid-template-columns: repeat(2, 1fr); } }
.dreiklang__teil h3 { margin-bottom: var(--raum-2); }
.dreiklang__teil p { color: var(--auf-dunkel-weich); margin: 0; }
/* Der Dreiklang steht seit 23.09.2026 auch auf heller Flaeche
   (/karriere, 'Wie die Woche aussieht'). Ohne diese Zeile blieb der
   Text hellblau auf Hellgrau - gemessen 1,73:1. */
.abschnitt--hell .dreiklang__teil p { color: var(--auf-hell-weich); }

/* Leistungen im Detail */
.leistungen { display: grid; gap: var(--raum-8); }
.leistung { display: grid; gap: var(--raum-6); align-items: center; }
@media (min-width: 62rem) {
  .leistung { grid-template-columns: 1fr 0.85fr; gap: var(--raum-8); }
  .leistung:nth-child(even) .leistung__bild { order: -1; }
}
.leistung .gross { color: var(--auf-hell-weich); }


/* Nur "Klima und Lueftung" hat eine Referenzzahl - eine Zeile, keine
   eigene Statistiksektion. */
.leistung__zahl {
  font-family: var(--schrift-display); font-weight: 600;
  color: var(--blau); margin-bottom: var(--raum-4);
}

/* Sprungleiste zu den vier Bereichen: Navigation, keine Kartenreihe. */


/* Objektarten als Matrix */
.tabelle-rollt { overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; text-align: left; }
.matrix th, .matrix td {
  padding: var(--raum-4) var(--raum-4) var(--raum-4) 0;
  border-bottom: 1px solid var(--kante); vertical-align: top;
}
.matrix th {
  font-family: var(--schrift-display); font-weight: 600; font-size: 1rem;
  white-space: nowrap; padding-right: var(--raum-6);
}
.matrix td { color: var(--auf-dunkel-weich); max-width: 46ch; }

/* Fragen */
.fragen { display: grid; gap: var(--raum-3); }
.frage {
  border: 1px solid var(--kante); border-radius: var(--rund-2);
  background: var(--flaeche);
}
.frage summary {
  cursor: pointer; padding: var(--raum-4) var(--raum-5); list-style: none;
  font-family: var(--schrift-display); font-weight: 600; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--raum-4);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; font-size: 1.4rem; color: var(--eis); line-height: 1; }
.frage[open] summary::after { content: "–"; }
.frage__text { padding: 0 var(--raum-5) var(--raum-4); }
.frage__text p { color: var(--auf-dunkel-weich); margin: 0; }

/* Galerie */
.galerie { display: grid; gap: var(--raum-4); }
@media (min-width: 52rem) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.abschnitt--hell .rahmen { border-color: var(--hell-tief); }

/* Karriere */
.eckdaten {
  display: grid; gap: var(--raum-3); margin-bottom: var(--raum-5);
  padding-bottom: var(--raum-5); border-bottom: 1px solid var(--kante);
}
@media (min-width: 40rem) { .eckdaten { grid-template-columns: 1fr 1fr; } }
.eckdaten li { display: grid; gap: 2px; }
.eckdaten b {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--auf-dunkel-leise); font-weight: 700;
}
.eckdaten span { font-family: var(--schrift-display); font-weight: 600; }

.woche { display: grid; gap: var(--raum-5); }
@media (min-width: 52rem) { .woche { grid-template-columns: repeat(3, 1fr); } }
.woche__karte {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rund-3); padding: var(--raum-6);
}
.woche__karte p { color: var(--auf-dunkel-weich); margin: 0; }

/* Benefits: Spaltensatz, weil die Gruppen sehr ungleich lang sind.
   Ein Kachelraster wuerde die kurze Gruppe auf die Hoehe der langen
   strecken und unten ein sichtbares Loch lassen. */
/* Raster statt Spaltensatz. Der Spaltensatz fuellte von oben nach unten
   auf und liess neben der vierten Karte eine Luecke. Jetzt oben drei
   gleich hohe Karten, unten zwei quer liegende - Bild links, Liste
   rechts. Sechs Spuren, damit sich 3x2 und 2x3 aufteilen laesst. */
.benefits { display: grid; gap: var(--raum-5); }
@media (min-width: 46rem) {
  .benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 70rem) {
  .benefits { grid-template-columns: repeat(6, 1fr); }
  .benefit:nth-child(-n+3) { grid-column: span 2; }
  .benefit:nth-child(n+4) { grid-column: span 3; }
  /* Die unteren zwei liegen quer. */
  .benefit:nth-child(n+4) {
    display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: stretch;
  }
  .benefit:nth-child(n+4) .benefit__kopf { height: 100%; }
  .benefit:nth-child(n+4) .benefit__kopf picture,
  .benefit:nth-child(n+4) .benefit__kopf img { height: 100%; object-fit: cover; }
}
/* Seit 23.09.2026 mit Foto im Kopf. Damit werden die Gruppen zu Karten -
   der Spaltensatz bleibt, weil die Gruppen unterschiedlich lang sind und
   ein festes Raster unten ein Loch liesse. */
.benefit {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rund-3); overflow: hidden;
}
.benefit__kopf { position: relative; }
.benefit__kopf picture, .benefit__kopf img {
  width: 100%; height: auto; display: block;
}
.benefit__kopf h3 {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: var(--raum-7) var(--raum-5) var(--raum-4); font-size: 1.125rem;
  color: var(--auf-dunkel);
  /* Der Verlauf lief vorher glatt von 0,92 unten auf 0 oben. An der
     Oberkante der Titelzeile lag er damit bei nur 0,28 - gemessen gegen
     die fuenf echten Fotos ergab das 2,01 bis 2,46:1 statt 4,5:1.
     Jetzt steht er bis 55 Prozent Hoehe voll auf 0,94 und blendet erst
     darueber aus; das Polster oben schafft den Platz dafuer. Die Kachel
     wird dadurch nicht hoeher - die Zeile liegt absolut ueber dem Bild. */
  background: linear-gradient(to top,
    rgba(10, 35, 66, 0.94) 0%, rgba(10, 35, 66, 0.94) 55%,
    rgba(10, 35, 66, 0) 100%);
}
.benefit ul { padding: var(--raum-5); }
.abschnitt--hell .benefit {
  background: var(--papier); border-color: var(--hell-tief);
}
.benefit ul { display: grid; gap: var(--raum-2); padding: var(--raum-5); }
.benefit li {
  position: relative; padding-left: var(--raum-4);
  color: var(--auf-dunkel-weich); font-size: 0.9375rem;
}
.benefit li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--eis);
}

/* Kontakt */
.kontakt__gitter { display: grid; gap: var(--raum-5); }
@media (min-width: 52rem) { .kontakt__gitter { grid-template-columns: repeat(3, 1fr); } }
/* Alle drei Kontaktkarten sind im Raster gleich hoch - aber nur die erste
   war auch gefuellt. Gemessen bei 1440 px: 1 px Rest unten, dann 127 px
   (Anfahrt) und 170 px (Ansprechpartner). Die Karten enden jetzt unten
   buendig, weil ihr Abschluss nach unten geschoben wird statt dem Text zu
   folgen. (Vanessa, 16.10.2026: "vor allem heisst nicht nur") */
.kontakt__karte {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rund-3); padding: var(--raum-5);
  display: flex; flex-direction: column;
}
.kontakt__wege, .kontakt__fuss { margin-top: auto; padding-top: var(--raum-5); }
.kontakt__karte > .leise { margin: var(--raum-4) 0 0; }
/* ---- Bausteine mit eigener Flaeche auf hellem Abschnitt -------------
   Karten bringen ihre eigene dunkle Flaeche mit, erben aber die dunkle
   Schriftfarbe des hellen Abschnitts - dunkel auf dunkel. Am 24.09.2026
   auf /kontakt und /karriere aufgetreten, gemessen 1,10:1. Deshalb hier
   ALLE fuenf Kartenarten zusammen, nicht einzeln nachgezogen. */
.abschnitt--hell .weg,
.abschnitt--hell .frage,
.abschnitt--hell .woche__karte,
.abschnitt--hell .kontakt__karte,
.abschnitt--hell .anfrage__karte {
  background: var(--papier); border-color: var(--hell-tief);
}
.abschnitt--hell .kontakt__liste dt,
.abschnitt--hell .woche__karte p,
.abschnitt--hell .benefit li,
.abschnitt--hell .weg p { color: var(--auf-hell-weich); }
.abschnitt--hell li b,
/* NICHT .benefit h3 - die Ueberschrift liegt auf dem Foto und muss dort
   hell bleiben. Diese Regel war staerker als .benefit__kopf h3 und hat
   die Titel auf den Bildern dunkel gefaerbt. */
.abschnitt--hell .benefit > h3 { color: var(--auf-hell); }
.abschnitt--hell .benefit li::before { background: var(--blau); border-color: var(--blau); }

/* Knoepfe behalten ihre eigene Schriftfarbe - .abschnitt--hell faerbt
   sonst jeden Verweis blau, auch den weissen Text auf dem roten Knopf.
   Genau das war auf /kontakt zu sehen: "Route planen" blau auf Rot. */
.abschnitt--hell .knopf--stark,
.abschnitt--hell .knopf--wa { color: #fff; }
.abschnitt--hell .knopf--rand { border-color: var(--hell-tief); color: var(--auf-hell); }
.abschnitt--hell .knopf--rand:hover { border-color: var(--blau); color: var(--blau); }
.kontakt__karte h2 { font-size: 1.25rem; }
/* Die Ansprechpartner-Karte trug nur einen Namen und wirkte leer. Das
   Portraet steht klein neben dem Text, nicht darueber - sonst kippt die
   Karte optisch aus der Reihe der drei Kontaktkarten. */
.kontakt__person {
  display: flex; gap: var(--raum-4); align-items: center;
  margin-bottom: var(--raum-5);
}
.kontakt__portraet {
  flex: 0 0 104px; width: 104px; height: 104px; border-radius: 999px;
  overflow: hidden;
}
.kontakt__name {
  font-family: var(--schrift-display); font-weight: 700; font-size: 1.0625rem;
  margin: 0;
}
.kontakt__rolle { font-size: 0.875rem; color: var(--auf-dunkel-weich); margin: 0.125rem 0 0; }
.abschnitt--hell .kontakt__rolle { color: var(--auf-hell-weich); }
.kontakt__portraet img { width: 100%; height: 100%; object-fit: cover; }
.kontakt__person p { margin: 0; }
/* Innerhalb eines Paares eng, zwischen den Paaren Luft. Vorher galt
   ueberall derselbe Abstand, dadurch zerfiel die Liste in acht gleich
   weit entfernte Zeilen und trieb die Hoehe aller drei Karten.
   (Vanessa, 16.10.2026) */
.kontakt__liste { margin: 0; display: grid; gap: var(--raum-4); }
.kontakt__liste > div { display: grid; gap: var(--raum-1); }
.kontakt__liste dt {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--auf-dunkel-leise); font-weight: 700;
}
.kontakt__liste dd { margin: 0; font-family: var(--schrift-display); font-weight: 600; }
.kontakt__liste dd a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.kontakt__adresse { font-style: normal; margin-bottom: var(--raum-4); line-height: 1.7; }
.kontakt__wege { display: grid; gap: var(--raum-3); }

/* ---------------------------------------------------------------- Anfrage */
.anfrage { background: var(--tief); padding-block: var(--raum-8) var(--raum-9); }
.anfrage__gitter { display: grid; gap: var(--raum-7); align-items: start; }
@media (min-width: 62rem) {
  .anfrage__gitter { grid-template-columns: 0.85fr 1.15fr; gap: var(--raum-8); }
}
.anfrage__text .gross { color: var(--auf-dunkel-weich); }
.anfrage__karte {
  background: var(--flaeche); border: 1px solid var(--kante-satt);
  border-radius: var(--rund-3); padding: var(--raum-6);
}
/* Einspaltig: Text oben, Formular darunter. Ein Formular laesst sich nicht
   durch mehr Text neben sich ausgleichen - gemessen 377 zu 691 px. */
.anfrage__stapel .anfrage__text { margin-bottom: var(--raum-7); }

/* Heller Bewerbungsblock (Karriere). Die Flaeche wird hell, das Formular
   bleibt blau - so hebt sich die Karte ab, statt in der Flaeche zu
   verschwinden (Vanessa, 24.09.2026). Nebeneffekt: der Block darueber ist
   dunkel, damit stossen nicht mehr zwei gleiche Flaechen aufeinander. */
.anfrage--hell { background: var(--hell); color: var(--auf-hell); }
.anfrage--hell h2 { color: var(--auf-hell); }
.anfrage--hell .gross,
.anfrage--hell .anfrage__text .gross,
.anfrage--hell .leise { color: var(--auf-hell-weich); }
.anfrage--hell a { color: var(--blau); }
.anfrage--hell .haken li::before { border-color: var(--blau); }
.anfrage--hell .haken li { color: var(--auf-hell); }
/* Die Karte behaelt ihren dunklen Grund und damit ihre eigene Schrift -
   sonst wuerde .anfrage--hell die Beschriftungen im Formular mit
   einfaerben. */
.anfrage--hell .anfrage__karte {
  background: var(--tief); border-color: var(--kante-satt);
  color: var(--auf-dunkel);
}
.anfrage--hell .anfrage__karte a { color: var(--eis); }

/* --------------------------------------------------------------- Formular */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.schritt__titel {
  display: flex; align-items: center; gap: var(--raum-3); padding: 0;
  font-family: var(--schrift-display); font-weight: 600; font-size: 1.125rem;
  margin-bottom: var(--raum-5);
}
.schritt__zahl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--aktion); color: #fff; font-size: 0.875rem; flex: 0 0 auto;
}
.kacheln { display: grid; gap: var(--raum-2); margin-bottom: var(--raum-4); }
@media (min-width: 34rem) { .kacheln { grid-template-columns: 1fr 1fr; } }
.kachel { position: relative; display: block; cursor: pointer; height: 100%; }
.kachel input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.kachel__text {
  display: flex; align-items: center; min-height: 48px; height: 100%;
  box-sizing: border-box;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--kante-satt); border-radius: var(--rund-1);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
  transition: border-color var(--tempo), background var(--tempo);
}
.kachel:hover .kachel__text { border-color: var(--eis); }
.kachel input:checked + .kachel__text {
  border-color: var(--aktion); background: color-mix(in srgb, var(--aktion) 22%, transparent);
}
.kachel input:focus-visible + .kachel__text { outline: 3px solid var(--eis); outline-offset: 2px; }

.notfall {
  border-left: 3px solid var(--warn); padding: var(--raum-3) var(--raum-4);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-radius: 0 var(--rund-1) var(--rund-1) 0;
  font-size: 0.9375rem; color: var(--auf-dunkel);
}

.feld { display: grid; gap: var(--raum-2); margin-bottom: var(--raum-4); min-width: 0; }
.feld > label, .feld legend {
  font-size: 0.875rem; font-weight: 700; color: var(--auf-dunkel-weich); padding: 0;
}
.feld input[type="text"], .feld input[type="tel"], .feld input[type="email"],
.feld input[type="file"], .feld textarea {
  width: 100%; min-height: 48px; padding: var(--raum-3) var(--raum-4);
  background: var(--tief); color: var(--auf-dunkel);
  border: 1px solid var(--kante-satt); border-radius: var(--rund-1);
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--auf-dunkel-leise); }
.feld input:focus-visible, .feld textarea:focus-visible { border-color: var(--eis); }
.feld__paar { display: grid; gap: var(--raum-4); }
@media (min-width: 34rem) { .feld__paar { grid-template-columns: 1fr 1fr; } }
.feld__hinweis {
  font-size: 0.8125rem; color: var(--auf-dunkel-leise);
  margin: calc(-1 * var(--raum-2)) 0 var(--raum-5);
}
.feld--zeit { border: 0; padding: 0; margin-bottom: var(--raum-4); min-width: 0; }
.zeiten { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.zeit { position: relative; }
.zeit input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zeit span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--raum-2) var(--raum-4); border-radius: 999px;
  border: 1px solid var(--kante-satt); font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
}
.zeit input:checked + span {
  border-color: var(--aktion); background: color-mix(in srgb, var(--aktion) 22%, transparent);
}
.zeit input:focus-visible + span { outline: 3px solid var(--eis); outline-offset: 2px; }
.feld--haken {
  grid-template-columns: auto 1fr; align-items: start; gap: var(--raum-3);
}
.feld--haken input { width: 24px; height: 24px; margin-top: 0.35em;
                     accent-color: var(--aktion); flex: 0 0 auto; }
.feld--haken label {
  font-size: 0.875rem; font-weight: 400; color: var(--auf-dunkel-weich);
  display: flex; align-items: center; min-height: 44px; cursor: pointer;
}
.feld--haken .feld__fehler { grid-column: 1 / -1; }
.pflicht { color: var(--eis); }
.feld__fehler { font-size: 0.8125rem; color: #FF9E96; margin: 0; font-weight: 600; }
.feld--fehler input, .feld--fehler textarea { border-color: #FF9E96; }
.formular__fuss { display: flex; flex-wrap: wrap; gap: var(--raum-3); }
.formular__fuss .knopf { flex: 1 1 10rem; }
.formular__meldung {
  margin: var(--raum-4) 0 0; padding: var(--raum-3) var(--raum-4);
  border-radius: var(--rund-1); font-size: 0.9375rem; font-weight: 600;
}
.formular__meldung.ist-gut { background: color-mix(in srgb, var(--wa) 18%, transparent); }
.formular__meldung.ist-fehler { background: color-mix(in srgb, var(--warn) 20%, transparent); }

/* ----------------------------------------------------------------- Pop-up */
.popup { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
.popup__grund { position: absolute; inset: 0; background: rgba(4, 11, 19, 0.78); }
.popup__karte {
  position: relative; width: min(100% - 2rem, 40rem);
  max-height: 88vh; overflow-y: auto;
  background: var(--marke); border: 1px solid var(--kante-satt);
  border-radius: var(--rund-3); padding: var(--raum-7) var(--raum-6) var(--raum-6);
}
.popup__zu {
  position: absolute; top: var(--raum-3); right: var(--raum-3);
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: 1px solid var(--kante-satt);
  color: var(--auf-dunkel); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.popup__zu:hover { border-color: var(--eis); }
.popup__titel { font-size: 1.5rem; margin-bottom: var(--raum-2); }
.popup__lead { color: var(--auf-dunkel-weich); margin-bottom: var(--raum-5); }
body.ist-gesperrt { overflow: hidden; }

/* --------------------------------------------------- Schwebend und mobil */
/* Hoechstens zwei Cluster: dieser Knopf und die Mobil-Leiste. Der Knopf
   traegt die Aktionsfarbe, nicht die Markenfarbe – sonst verschwindet er
   ueber dem dunklen Fuss. Der helle Ring haelt ihn auf jedem Grund sichtbar. */
.schwebt { position: fixed; right: var(--raum-5); bottom: var(--raum-5); z-index: 90; }
.schwebt__knopf {
  display: inline-flex; align-items: center; min-height: 52px;
  padding: var(--raum-3) var(--raum-5); border-radius: 999px;
  background: var(--aktion); color: #fff; font-weight: 700; font-size: 0.9375rem;
  text-decoration: none; box-shadow: 0 10px 28px rgba(4, 11, 19, 0.5),
                                     0 0 0 3px rgba(255, 255, 255, 0.18);
}
.schwebt__knopf:hover { background: var(--aktion-tief); color: #fff; }
@media (max-width: 52rem) { .schwebt { display: none; } }

.mobil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: none; background: var(--tief); border-top: 1px solid var(--kante-satt);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobil__punkt {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  min-height: 56px; color: var(--auf-dunkel); text-decoration: none;
  font-weight: 700; font-size: 0.875rem; border-right: 1px solid var(--kante);
}
.mobil__punkt:last-child { border-right: 0; }
.mobil__punkt--stark { background: var(--aktion); color: #fff; }
@media (max-width: 52rem) {
  .mobil { display: flex; }
  body { padding-bottom: 56px; }
}

/* -------------------------------------------------------------------- Fuss */
.fuss { background: var(--tief); border-top: 1px solid var(--kante); }
.fuss__innen {
  width: min(100% - 2rem, var(--breit)); margin-inline: auto;
  padding-block: var(--raum-8) var(--raum-7);
  display: grid; gap: var(--raum-6);
}
@media (min-width: 46rem) { .fuss__innen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .fuss__innen { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.fuss__spalte--marke .marke__zeichen { height: var(--logo-hoehe); margin-bottom: var(--raum-4); }
.fuss__titel {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--auf-dunkel-leise); font-weight: 700; margin-bottom: var(--raum-3);
  font-family: var(--schrift);
}
.fuss__text { color: var(--auf-dunkel-weich); font-size: 0.9375rem; }
.fuss__adresse { font-style: normal; color: var(--auf-dunkel-weich); font-size: 0.9375rem; line-height: 1.8; }
.fuss__liste { display: grid; gap: var(--raum-2); }
.fuss__liste a, .fuss__adresse a, .fuss__karte {
  color: var(--auf-dunkel-weich); text-decoration: none; font-size: 0.9375rem;
}
/* Rufnummer, E-Mail und Routen-Verweis im Fuss werden angetippt.
   Gemessen waren sie 21 px hoch. */
.fuss__adresse a, .fuss__karte {
  display: inline-flex; align-items: center; min-height: 44px;
}
.fuss__liste a:hover, .fuss__adresse a:hover, .fuss__karte:hover {
  color: var(--eis); text-decoration: underline;
}
.fuss__leiste {
  border-top: 1px solid var(--kante);
  width: min(100% - 2rem, var(--breit)); margin-inline: auto;
  padding-block: var(--raum-4);
  display: flex; flex-wrap: wrap; gap: var(--raum-4);
  justify-content: space-between;
  font-size: 0.8125rem; color: var(--auf-dunkel-leise);
}
.fuss__leiste p { margin: 0; }

/* ===================================================== Urheberzeile ===== */
/* Karte im Fuss: "Webseite umgesetzt von candidate-flow.de", Wortmarke, Sterne.
   Die Farbe muss spezifischer sein als .fuss a, sonst erbt die Karte die
   Linkfarbe der Fusszeile. */
.umsetzung { display: flex; justify-content: center; box-sizing: border-box;
             max-width: 100%; padding: 0.5rem 1rem 1.3rem; }
a.umsetzung__karte, a.umsetzung__karte:link, a.umsetzung__karte:visited,
a.umsetzung__karte:hover, a.umsetzung__karte:focus-visible {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.45em;
  box-sizing: border-box; max-width: 100%; padding: 0.7rem 1.5rem;
  border-radius: 14px; text-align: center; text-decoration: none; color: inherit;
  border: 1px solid rgba(128, 128, 128, 0.32);
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  background: rgba(128, 128, 128, 0.08);
  background: color-mix(in srgb, currentColor 6%, transparent); }
a.umsetzung__karte:hover { border-color: color-mix(in srgb, currentColor 34%, transparent); }
.umsetzung__satz { font-size: 0.8125rem; opacity: 0.74; }
/* Die Domain darf nie mitten im Wort umbrechen. */
.umsetzung__satz strong { font-weight: 700; opacity: 1; white-space: nowrap; }
.umsetzung__marke { height: 1.5em; width: auto; display: block; }
.umsetzung__sterne { height: 0.9em; width: auto; display: block; }

@media (max-width: 52rem) {
  .umsetzung { padding-bottom: 4.5rem; }
}