/* ==========================================================================
   Sektionen
   Leitidee: Die Seite ist ein Bodenprofil. Oben die Oberflaeche (hell, das,
   was jeder sieht), darunter der Untergrund (dunkel, das, wovon die Firma
   lebt). Die Schichtgrenzen sind keine geraden Linien, sondern der
   32-Grad-Anschnitt aus dem Corporate Design — wie ein Baugrubenprofil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--grund);
  color: var(--cd-weiss);
  min-height: clamp(30rem, 82vh, 46rem);
  display: grid;
  align-items: end;
  overflow: hidden;
}
.hero__medium {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__medium img, .hero__medium video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__innen {
  position: relative; z-index: 3;
  padding-block: clamp(7rem, 16vh, 10rem) clamp(3.5rem, 9vh, 6rem);
}
.hero__vor {
  font-size: var(--step--1);
  font-weight: 600;
  /* War hellblau — auf dem Foto gemessen nur 1,35:1. Weiss ist laut CD S. 6
     auf dunklen Untergruenden ohnehin die favorisierte Farbe.               */
  color: var(--cd-weiss);
  margin-bottom: var(--s-3);
  max-width: 44ch;
}
.hero h1 {
  max-width: 15ch;
  margin-bottom: var(--s-4);
}
/* Die Hero-Zeilen sind fest gesetzt (jede Zeile ein Span). Ein einzelnes
   langes Wort wie „Untergrund" kann deshalb nicht umbrechen und liefe bei
   schmalen Viewports ueber den Satzspiegel hinaus, ohne die Box zu
   vergroessern — der Container-Overflow-Test findet das nicht, das Auge schon. */
.hero__zeile > span { display: block; max-width: 100%; }
.hero__nach { max-width: 52ch; }
.hero__nach p {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--cd-weiss);                  /* CD S. 6: Weiss auf Dunkel     */
  margin-bottom: var(--s-5);
}
.hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Der Balken sitzt am Hero-Fuss und schneidet in die naechste Schicht.      */
.hero__balken {
  position: absolute; left: 0; bottom: 0; z-index: 4;
  width: min(38%, 22rem);
  --balken-h: clamp(2rem, 4vw, 3.25rem);
}

/* Bildmarke als grosse Flaeche, rechts angeschnitten (CD S. 5)              */
.hero__bogen {
  right: -8%;
  top: 8%;
  width: min(52%, 34rem);
  color: color-mix(in oklab, var(--cd-weiss) 9%, transparent);
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Gruppen-Einordnung: bewusst KEINE Kennzahlen-Kachelreihe (das Muster aus
   grosser Zahl + kleinem Label + Rasterwiederholung ist der Stand-Reflex).
   Stattdessen ein Satz, in dem die belegten Zahlen typografisch heraustreten
   — das traegt zugleich die Pflichtangabe, dass es Gruppenzahlen sind.
   -------------------------------------------------------------------------- */
.gruppe { position: relative; }
.gruppe__satz {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-transform: none;
  max-width: 24ch;
  margin: 0;
}
.gruppe__satz b {
  font-weight: 800;
  color: var(--blau-hell);
  white-space: nowrap;
}
.gruppe__raster {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
}
.gruppe__rand { max-width: 42ch; }
.gruppe__fuss {
  max-width: 72ch;                         /* lief vorher mit 137 Zeichen    */
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid color-mix(in oklab, var(--cd-weiss) 16%, transparent);
  font-size: var(--step--1);
  color: var(--auf-dunkel-muted);
}
@media (max-width: 52rem) {
  .gruppe__raster { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* --------------------------------------------------------------------------
   Haltung: drei Aussagen, bewusst ungleich gewichtet statt als
   Drei-Karten-Raster. Die erste traegt, die anderen stuetzen.
   -------------------------------------------------------------------------- */
.haltung { display: grid; gap: var(--s-5); grid-template-columns: repeat(12, 1fr); }
.haltung__block { grid-column: span 12; }
.haltung__block h3 { margin-bottom: var(--s-2); }
.haltung__block p { color: var(--ink-muted); max-width: 46ch; }
.haltung__block--gross {
  grid-column: span 12;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid color-mix(in oklab, var(--cd-grau) 34%, transparent);
}
.haltung__block--gross h3 { font-size: var(--step-3); max-width: 14ch; }
.haltung__block--gross p { font-size: var(--step-2); line-height: 1.34; color: var(--ink); max-width: 30ch; }
@media (min-width: 52rem) {
  .haltung__block { grid-column: span 6; }
  /* Der tragende Block laeuft ueber die volle Breite: Ueberschrift links,
     Aussage rechts. Sonst steht die rechte Haelfte leer und das liest sich
     wie ein Fehler statt wie Weissraum. */
  .haltung__block--gross {
    grid-column: span 12;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Leistungen: alternierende Bild-Text-Baender statt Kartenraster.
   Der erste Block ist groesser — er ist die Sparte, zu der der Standort
   tatsaechlich gehoert (Leitungsbau).
   -------------------------------------------------------------------------- */
.leistung {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid color-mix(in oklab, var(--cd-grau) 30%, transparent);
}
.leistung:first-of-type { border-top: 0; }
.leistung__bild { position: relative; aspect-ratio: 4 / 3; }
.leistung__text { padding-block: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); align-items: start; }
.leistung__text h3 { font-family: var(--font-display); font-size: var(--step-3); text-transform: uppercase; letter-spacing: -0.02em; }
.leistung__text p { color: var(--ink-muted); max-width: 46ch; line-height: 1.55; }

@media (min-width: 54rem) {
  .leistung {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .leistung__bild { aspect-ratio: 5 / 4; }
  .leistung--gedreht .leistung__bild { order: 2; }
  .leistung__text { padding-block: var(--s-7); }
  .leistung--haupt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .leistung--haupt .leistung__bild { aspect-ratio: 3 / 2; }
  /* Eine Stufe unter der Sektions-H2, sonst konkurrieren beide. */
  .leistung--haupt .leistung__text h3 { font-size: var(--step-3); }
}

/* --------------------------------------------------------------------------
   Standort
   -------------------------------------------------------------------------- */
.standort__raster {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
}
@media (max-width: 56rem) { .standort__raster { grid-template-columns: 1fr; } }

/* Themenblock: Ueberschrift schmaler, Text breiter — sonst brechen die
   langen Fachwoerter der Ueberschrift in sechs Zeilen um. */
.thema { display: grid; gap: var(--s-5); align-items: start; }
.thema h2 { font-size: var(--step-3); }
@media (min-width: 56rem) {
  .thema { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); }
}

.karte-schema {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--grund-2);
  overflow: hidden;
}
.karte-schema svg { width: 100%; height: 100%; display: block; }
.karte-schema__hinweis {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  font-size: 0.75rem;
  color: var(--auf-dunkel-muted);
  background: color-mix(in oklab, var(--grund) 76%, transparent);
  padding: 0.35rem 0.6rem;
}

.orte { list-style: none; margin: 0; padding: 0; }
.orte > li { margin: 0 0 var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid color-mix(in oklab, var(--cd-grau) 30%, transparent); }
.orte > li:last-child { border-bottom: 0; margin-bottom: 0; }
.orte h3 { margin-bottom: var(--s-2); }
.orte address { font-style: normal; color: var(--ink-muted); margin-bottom: var(--s-2); }
.orte__zeile { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Recruiting-Band
   -------------------------------------------------------------------------- */
.recruiting { position: relative; overflow: hidden; }
.recruiting__innen {
  display: grid; gap: var(--s-5);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
}
.recruiting h2 { max-width: 16ch; }
@media (max-width: 52rem) { .recruiting__innen { grid-template-columns: 1fr; } }
.recruiting__bogen { left: -6%; bottom: -35%; width: min(30%, 18rem); color: color-mix(in oklab, var(--cd-weiss) 14%, transparent); }

/* --------------------------------------------------------------------------
   Stellenliste
   -------------------------------------------------------------------------- */
.stellen { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in oklab, var(--cd-grau) 34%, transparent); }
.stellen li { margin: 0; border-bottom: 1px solid color-mix(in oklab, var(--cd-grau) 34%, transparent); }
.stellen a, .stellen__zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  min-height: 56px;
  padding-block: var(--s-3);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: padding-inline-start var(--dauer-kurz) var(--ease-aus);
}
.stellen a:hover { padding-inline-start: var(--s-2); }
.stellen__titel { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
.stellen__ort { font-size: var(--step--1); color: var(--ink-muted); }
.stellen__art {
  margin-left: auto;
  font-size: var(--step--1);
  color: var(--cd-blau);
  font-weight: 600;
}
.sektion--dunkel .stellen__ort { color: var(--auf-dunkel-muted); }
.sektion--dunkel .stellen__art { color: var(--blau-hell); }
.sektion--dunkel .stellen, .sektion--dunkel .stellen li { border-color: color-mix(in oklab, var(--cd-weiss) 18%, transparent); }

/* --------------------------------------------------------------------------
   Kontaktleiste
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Kontaktband am Fuss der Startseite.
   Vorher: vier gleichgewichtige Label-Wert-Paare als weisser Streifen
   zwischen zwei dunklen Flaechen — der Fuss zerfiel in drei Teile, und der
   Knopf brach in eine zweite Zeile um. Jetzt ein dunkler Abschluss, der in
   den Footer laeuft, mit einer Hauptsache: der Nummer. Die Adresse steht
   ohnehin im Footer und ist hier raus.
   -------------------------------------------------------------------------- */
.kontaktband {
  position: relative;
  background: var(--grund);
  color: var(--auf-dunkel);
  /* Die Sektion darueber ist ebenfalls dunkel — ohne Linie schwebt der
     Balken im Nichts, statt eine Kante zu markieren.                      */
  border-top: 1px solid color-mix(in oklab, var(--cd-weiss) 14%, transparent);
}
.kontaktband__balken {
  position: absolute; left: 0; top: -1px;
  width: min(30%, 17rem);
  --balken-h: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--cd-blau);
}
.kontaktband__innen {
  display: grid;
  gap: var(--s-5) var(--s-7);
  grid-template-columns: 1fr;
  align-items: end;
  padding-top: var(--s-4);
}
.kontaktband__vor {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--blau-hell);
  margin-bottom: var(--s-2);
}
.kontaktband__nummer {
  display: inline-block;
  font-family: var(--font-display);
  /* Unteilbar: eine umgebrochene Telefonnummer ist unlesbar. Die Groesse
     ist so gewaehlt, dass sie auch auf 320px noch in eine Zeile passt.    */
  white-space: nowrap;
  font-size: clamp(1.35rem, 6.6vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cd-weiss);
  text-decoration: none;
  font-variant-numeric: lining-nums;        /* keine Tabellenziffern hier    */
  transition: color var(--dauer-kurz) var(--ease-aus);
}
.kontaktband__nummer:hover { color: var(--blau-hell); }
.kontaktband__zeit {
  margin: var(--s-2) 0 0;
  font-size: var(--step--1);
  color: var(--auf-dunkel-muted);
}
.kontaktband__zweit {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--s-4);
}
.kontaktband__zweit p { margin: 0; color: var(--auf-dunkel-muted); }
.kontaktband__zweit a:not([class]) { color: var(--blau-hell); }

@media (min-width: 52rem) {
  .kontaktband__innen {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    padding-top: var(--s-5);
  }
  .kontaktband__zweit { align-items: end; text-align: right; }
}


/* --------------------------------------------------------------------------
   Innenseiten: derselbe Auftritt wie der Start-Hero — Bild ueber die ganze
   Sektion, Text darauf, Balken am Fuss. Nur flacher, damit die Startseite
   der grosse Auftritt bleibt.
   -------------------------------------------------------------------------- */
.seitenkopf {
  position: relative;
  isolation: isolate;
  background: var(--grund);
  color: var(--cd-weiss);
  overflow: hidden;
  min-height: clamp(26rem, 74vh, 40rem);
  display: grid;
  align-items: end;
}
.seitenkopf__medium {
  position: absolute; inset: 0;
  z-index: 0;
}
/* Schuetzt gezielt die Textspalte links. Der reine Vertikalverlauf reicht
   nicht: bei hellen Motiven (Bewehrung, Asphaltstaub) liegt sonst die
   Brotkrume auf einer hellen Zone.
   Erst ab Tablet: auf dem Handy laeuft der Text ueber die volle Breite,
   dort wuerde derselbe Verlauf das Motiv komplett zudecken.                 */
@media (min-width: 48rem) {
  .seitenkopf::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg,
      color-mix(in oklab, var(--grund) 72%, transparent) 0%,
      color-mix(in oklab, var(--grund) 44%, transparent) 44%,
      transparent 76%);
  }
}
/* Anders als beim Start-Hero sitzt hier direkt unter dem Kopf schon die
   Brotkrume. Der Verlauf muss deshalb oben fassen, nicht erst unten.       */
.seitenkopf .bild--duotone-tief::before {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--grund) 48%, transparent) 0%,
    color-mix(in oklab, var(--grund) 24%, transparent) 30%,
    color-mix(in oklab, var(--grund) 44%, transparent) 68%,
    color-mix(in oklab, var(--grund) 62%, transparent) 100%);
}
.seitenkopf__medium img, .seitenkopf__medium video {
  width: 100%; height: 100%; object-fit: cover;
}
.seitenkopf__innen {
  position: relative; z-index: 3;
  padding-block: clamp(1rem, 3vh, 2rem) clamp(3rem, 8vh, 4.5rem);
}
/* Kleiner als die Hero-H1: die Innenseiten-Ueberschriften enthalten lange
   Fachkomposita (Rohrleitungsbau, Ingenieurbau), die bei Hero-Groesse
   umbrechen und die Zeile sprengen. */
.seitenkopf__text h1 { font-size: var(--step-4); max-width: 19ch; margin-bottom: var(--s-3); }
.seitenkopf__text p {
  max-width: 52ch;
  color: var(--cd-weiss);                  /* CD S. 6: Weiss auf Dunkel     */
  font-size: var(--step-1);
}
/* Bildmarke gross im Anschnitt, wie auf der Startseite (CD S. 5)            */
/* Tiefer gesetzt als auf der Startseite: der obere Querbalken der Bildmarke
   braucht Bildstruktur unter sich. Auf einer flachen dunklen Zone direkt
   unter dem Kopf liest er sich als grauer Kasten, nicht als Marke.         */
.seitenkopf__bogen {
  right: -10%;
  top: 22%;
  width: min(50%, 32rem);
  color: color-mix(in oklab, var(--cd-weiss) 7%, transparent);
  z-index: 2;
}
.seitenkopf__balken {
  position: absolute; left: 0; bottom: 0; z-index: 4;
  width: min(34%, 20rem);
  --balken-h: clamp(1.75rem, 3.4vw, 2.75rem);
}

/* Auf dem Handy ist der Kopf textdominiert: Ueberschrift, Absatz und zwei
   Aktionen fuellen die Flaeche fast vollstaendig. Ein Bild dahinter waere
   entweder unsichtbar oder wuerde den Text unter den Kontrastwert druecken
   (gemessen: 2,9:1). Deshalb bekommt es hier ein eigenes Band ueber dem
   Text statt eines Hintergrunds darunter.                                   */
@media (max-width: 47.99rem) {
  .seitenkopf { display: block; min-height: 0; }
  .seitenkopf__medium {
    position: relative; inset: auto;
    height: 34vh; min-height: 11rem; max-height: 20rem;
  }
  .seitenkopf__innen {
    position: relative;
    background: var(--grund);
    padding-block: var(--s-5) var(--s-7);
  }
  .seitenkopf__bogen { display: none; }
}

.krumen { font-size: var(--step--1); padding-block: var(--s-3); }
.krumen ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.krumen li { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.krumen li + li::before { content: "›"; opacity: 0.5; }
.krumen a { color: inherit; text-decoration: none; }
.krumen a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.seitenkopf .krumen { color: var(--auf-dunkel-muted); }

/* --------------------------------------------------------------------------
   Textseiten (Recht, Leistungen-Fliesstext)
   -------------------------------------------------------------------------- */
.fliess > * + * { margin-top: var(--s-4); }
.fliess h2 { margin-top: var(--s-7); }
.fliess h3 { margin-top: var(--s-5); }
.fliess > :first-child { margin-top: 0; }
.fliess ul { padding-left: 1.1em; }
.fliess dl { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: var(--s-2) var(--s-4); }
.fliess dt { font-weight: 700; }
.fliess dd { margin: 0; }
@media (max-width: 40rem) { .fliess dl { grid-template-columns: 1fr; gap: 0.15rem var(--s-3); } .fliess dd { margin-bottom: var(--s-2); } }

/* Ablauf-Schritte: nummeriert, weil es tatsaechlich eine Reihenfolge ist   */
.ablauf { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.ablauf li { counter-increment: schritt; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.ablauf li::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--cd-blau);
  line-height: 1.2;
}
.ablauf h3 { font-size: var(--step-1); margin-bottom: 0.2rem; }
.ablauf p { color: var(--ink-muted); margin: 0; }

/* Leistungskatalog */
.katalog { display: grid; gap: var(--s-4) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.katalog li { margin: 0; padding-top: var(--s-3); border-top: 2px solid var(--cd-blau); }
.katalog h3 { font-size: var(--step-0); font-weight: 700; margin-bottom: 0.25rem; }
.katalog p { font-size: var(--step--1); color: var(--ink-muted); margin: 0; }

/* Stellenanzeigen auf der Karriereseite */
.stellen-liste > .katalog-stelle {
  padding-block: var(--s-5);
  border-top: 1px solid color-mix(in oklab, var(--cd-grau) 34%, transparent);
}
.stellen-liste > .katalog-stelle:first-child { border-top: 0; padding-top: 0; }
.katalog-stelle h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-3);
}
.katalog-stelle p { max-width: 62ch; }

/* Fragen */
.fragen { border-top: 1px solid color-mix(in oklab, var(--cd-grau) 34%, transparent); }
.fragen details { border-bottom: 1px solid color-mix(in oklab, var(--cd-grau) 34%, transparent); }
.fragen summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 56px; padding-block: var(--s-3);
  font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; list-style: none;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; flex: 0 0 auto;
  width: 14px; height: 14px;
  border-right: 2px solid var(--cd-blau); border-bottom: 2px solid var(--cd-blau);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dauer-kurz) var(--ease-aus);
}
.fragen details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.fragen details > div { padding-bottom: var(--s-4); max-width: 62ch; color: var(--ink-muted); }

/* 404 */
.fehler { display: grid; place-items: center; text-align: center; min-height: 62vh; }
.fehler__zahl { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 12rem); line-height: 0.9; color: var(--cd-blau); }