/* ==========================================================================
   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 {
  /* Die ch-Einheit misst die Breite der Ziffer 0 der jeweils greifenden
     Schrift. Helvetica ist deutlich schmaler als die fruehere Archivo
     Expanded (gemessen 18.08.2026: Faktor 1,30 auf Versaltext), die Box
     schrumpfte mit dem Schriftwechsel also mit — und die fest gesetzten
     Hero-Zeilen waeren zusaetzlich umgebrochen. Deshalb hochgerechnet.
     Weil ch relativ bleibt, passt sich die Box auch dem Inter-Fallback an. */
  max-width: 21ch;
  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; }
/* Die Sektion hatte bis zum 03.08. gar keine Ueberschrift — sie stieg direkt
   mit dem grossen Satz ein. Jetzt fuehrt „Ueber die Jaeger Gruppe" hin, und der
   Satz darunter traegt die Aussage. Deshalb ist der Titel bewusst KLEINER als
   der Satz (--step-1 gegen bis zu 2.6rem): Er ordnet ein, er ruft nicht. */
/* Die Farbe steht bewusst NICHT hier: `color: var(--auf-dunkel-muted)` war
   drin und wurde von der Sektionsregel ueberschrieben — gemessen 18,56:1,
   also unveraendert reines Weiss. Eine Regel, die nichts tut, gehoert raus.
   Die Hierarchie traegt allein die Groesse: 24px gegen 41,6px beim Satz. */
.gruppe__titel {
  font-size: var(--step-1);
  margin-bottom: var(--s-4);
  letter-spacing: 0.01em;
}
.gruppe__satz {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.008em;
  text-transform: none;
  max-width: 34ch;
  margin: 0;
  /* Dieselbe Trennung wie bei h1–h3 (base.css). Der Satz ist ein <p> und fiel
     deshalb durch die Regel dort — mit denselben Folgen: „Familienunternehmen"
     mass in der frueheren Archivo Expanded ungetrennt 313,63px, der Satzspiegel gibt auf
     einem 320er-Gerät aber nur 280px her. Das Wort dehnte nicht nur den
     eigenen Absatz, sondern ueber die Grid-Spur das ganze Dokument auf 372px:
     die Startseite liess sich seitlich schieben, auf jedem 320er- und
     360er-Geraet. Andere Seiten waren nicht betroffen. */
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}
.gruppe__satz b {
  font-weight: 700;
  color: var(--blau-hell);
  white-space: nowrap;
}
.gruppe__raster {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  align-items: center;
}
/* Satz und Zahlen stehen jetzt untereinander in einer Spalte — die zweite
   traegt die Standortkarte. Das Verhaeltnis 1 zu 0,78 ergibt sich aus dem
   Hochformat der Karte (1000 x 1349): so wird sie etwa so hoch wie der Text. */
.gruppe__text > * + * { margin-top: var(--s-5); }
.gruppe__rand { max-width: 42ch; }
/* Absender-Nachweis unter dem Text. Das CD nennt den Hinweis auf die Gruppe
   auf S. 9 ausdruecklich als erwuenscht; das freigestellte Logo braucht auf
   der dunklen Flaeche keinen Kasten (S. 10 verbietet ihn dort sogar).     */
.gruppe__marke { margin-top: var(--s-6); }
.gruppe__marke img { width: 236px; height: 84px; }
/* Auf schmalen Geraeten faellt das Logo mit — 236px sind dort ueber zwei
   Drittel der Satzbreite und der Absender draengt sich vor die Aussage.    */
@media (max-width: 30rem) {
  .gruppe__marke img { width: 176px; height: 63px; }
}
.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) {
  /* minmax(0, 1fr), nicht 1fr: Ein blosses `1fr` bedeutet `minmax(auto, 1fr)`,
     und `auto` heisst hier min-content — die Spur wird also mindestens so
     breit wie das laengste unteilbare Wort darin und schiebt notfalls die
     ganze Seite auf. Genau so ist der Ueberlauf auf 320er-Geraeten entstanden.
     Mit 0 als Minimum bleibt ein zu langes Wort ein Problem des Absatzes und
     wird nie zu einem Problem des Layouts. Gleiche Schreibweise wie in der
     zweispaltigen Fassung oben. */
  .gruppe__raster { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* --------------------------------------------------------------------------
   Haltung: drei Aussagen, bewusst ungleich gewichtet statt als
   Drei-Karten-Raster. Die erste traegt, die anderen stuetzen.
   -------------------------------------------------------------------------- */
/* Das Zwoelfer-Raster erst dort, wo es hineinpasst. Elf Zwischenraeume a
   --s-5 (2rem) sind fuer sich genommen 11 x 32 = 352px — mehr als der
   Satzspiegel auf einem 320er-Geraet ueberhaupt hergibt (280px). Die Spalten
   fielen dadurch auf 0px, der Block wuchs auf die blosse Summe der
   Zwischenraeume und schob das Dokument auf 372px auf: Die Startseite liess
   sich auf jedem 320er- und 360er-Geraet seitlich schieben. Nicht der Inhalt
   war schuld — ein leeres Raster haette dasselbe getan.
   Unter 52rem laeuft ohnehin jeder Block ueber die volle Breite; dort genuegt
   eine Spalte, und ohne zweite Spalte gibt es keinen waagerechten Abstand
   mehr, der Platz kosten koennte. Wer die Zwoelferteilung nach unten zieht,
   rechnet vorher: 11 x Spaltenabstand muss in den Satzspiegel passen.
   Geprueft in tools/pruefen.mjs, Abschnitt 9.                              */
.haltung { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
/* Hier stand kurzzeitig `.haltung__block { min-width: 0 }` — die uebliche
   Begleitregel zu minmax(0, 1fr), weil ein Grid-Item mit `min-width: auto`
   startet und damit mindestens min-content breit wird. Gemessen ueber elf
   Breiten von 320 bis 1440px aendert sie hier an keiner Stelle etwas: Das
   Grabenprofil-SVG folgt seinem `width: 100%` in beiden Faellen auf denselben
   Pixel. Ohne Beleg keine Regel. Wer dem Raster ein Element mit echter
   Mindestbreite hinzufuegt (eine Tabelle, ein <pre>, ein Bild mit festem
   width-Attribut), braucht sie — dann faellt Abschnitt 9 in
   tools/pruefen.mjs und die Zeile gehoert wieder her.                      */
/* Eine Stufe unter dem Leitabsatz. Vorher standen beide auf --step-2 — die
   Ueberschrift war exakt so gross wie der Fliesstext darueber.              */
.haltung__block h3 { margin-bottom: var(--s-2); font-size: var(--step-1); }
.haltung__block p { color: var(--ink-muted); max-width: 46ch; }
.haltung__block--gross {
  grid-column: 1 / -1;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid color-mix(in oklab, var(--cd-grau) 34%, transparent);
}
/* Die Leitaussage traegt die Sektion und ist deshalb eine h2 — sonst springt
   die Gliederung der Seite von der Hero-h1 direkt auf h3. Eine Stufe unter
   den Sektionstiteln (--step-4), damit sie ihnen nicht den Rang abläuft.    */
.haltung__block--gross > h2 { font-size: var(--step-3); max-width: 15ch; }
.haltung__block--gross > p { font-size: var(--step-2); line-height: 1.34; color: var(--ink); max-width: 30ch; }
@media (min-width: 52rem) {
  /* Ab hier tragen die elf Zwischenraeume: 52rem = 832px minus 40px Rand
     lassen 792px, davon 352px Abstand und 440px fuer die zwoelf Spalten. */
  .haltung { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .haltung__block { grid-column: span 6; }
  /* Ein einziges Raster fuer die ganze Sektion. Der Leitblock hatte vorher
     ein eigenes (0,85fr / 1,15fr) und stand damit 60px neben den Bloecken
     darunter — zwei Rhythmen in einer Sektion.                             */
  .haltung__block--gross {
    /* Muss hier stehen bleiben: die Regel .haltung__block darueber traegt
       dieselbe Spezifitaet und wuerde den Block sonst auf 6 Spalten kuerzen. */
    grid-column: 1 / -1;
    display: grid;
    /* minmax(0, 1fr) statt blossem 1fr — hier nur zur Angleichung an die
       uebrigen Raster im Blatt, gemessen aendert es an dieser Stelle nichts.
       Ein nacktes `1fr` heisst `minmax(auto, 1fr)` und laesst die Spur bis
       zur min-content-Breite ihres Inhalts wachsen.                        */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: start;
  }
  .haltung__block--gross > h2 { grid-column: 1 / span 6; }
  .haltung__block--gross > p  { grid-column: 7 / span 6; }
  .haltung__block--gross > .profil { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Grabenprofil: Querschnitt durch die fertige Fahrbahn.
   Die Farben stehen als Variablen an einer Stelle — das Farbfeld in der
   Legende zieht dieselbe Variable wie die Schicht in der Zeichnung, damit
   beide nicht auseinanderlaufen koennen.
   -------------------------------------------------------------------------- */
.profil {
  --pr-boden:       #edf0f3;
  --pr-boden-linie: #c4ced7;
  --pr-fuell:       #ccd5de;
  --pr-sand:        #e2e8ee;
  --pr-sand-korn:   #b9c3cd;
  --pr-frost:       #9aa6b2;
  --pr-frost-korn:  #7d8a97;
  --pr-trag:        #5b6672;
  --pr-deck:        #2a3138;
  --pr-rohr:        var(--cd-blau);
  --pr-rohr-innen:  var(--cd-weiss);
  --pr-kante:       #94a1ad;
  margin: var(--s-5) 0 0;
}
.profil__zeichnung { display: block; width: 100%; height: auto; }
.profil__legende { margin-top: var(--s-4); }
.profil__legende ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--s-2) var(--s-4);
}
.profil__legende li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  line-height: 1.3;
  color: var(--ink);
}
.profil__feld {
  flex: none;
  width: 18px;
  height: 12px;
  border: 1px solid color-mix(in oklab, var(--cd-grau) 50%, transparent);
}
.profil__feld--deck  { background: var(--pr-deck); }
.profil__feld--trag  { background: var(--pr-trag); }
.profil__feld--frost { background: var(--pr-frost); }
.profil__feld--fuell { background: var(--pr-fuell); }
.profil__feld--rohr  { background: var(--pr-sand); box-shadow: inset 0 0 0 3px var(--pr-rohr); }

@media (min-width: 52rem) {
  .profil {
    display: grid;
    /* minmax(0, 1fr) statt blossem 1fr — hier nur zur Angleichung an die
       uebrigen Raster im Blatt, gemessen aendert es an dieser Stelle nichts.
       Ein nacktes `1fr` heisst `minmax(auto, 1fr)` und laesst die Spur bis
       zur min-content-Breite ihres Inhalts wachsen.                        */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-5);
  }
  .profil__zeichnung { grid-column: 1 / span 8; }
  .profil__legende { grid-column: 9 / span 4; margin-top: 0; }
  /* Die Legende laeuft ueber die volle Hoehe der Zeichnung mit: gleiche
     Reihenfolge von oben nach unten, gleiche Ausdehnung — statt eines
     Klumpens oben und einem Loch daneben.                                  */
  .profil__legende ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: var(--s-2);
  }
}

/* Zeigen statt beschriften: die Maus auf einem Legendeneintrag hebt die
   zugehoerige Schicht hervor. Reines CSS ueber :has(), nur bei echtem Hover —
   auf Touch geht dadurch nichts verloren. Die Aufbau-Animation arbeitet
   deshalb ausschliesslich mit transform: eine laufende Animation mit
   fill-mode wuerde ein opacity hier ueberstimmen.                          */
@media (hover: hover) {
  .profil .pr-schicht { transition: opacity 180ms var(--ease-aus); }
  .profil:has(.profil__legende li:hover) .pr-schicht { opacity: 0.28; }
  .profil:has(.profil__legende li:nth-child(1):hover) .pr-deck,
  .profil:has(.profil__legende li:nth-child(2):hover) .pr-trag,
  .profil:has(.profil__legende li:nth-child(3):hover) .pr-frost,
  .profil:has(.profil__legende li:nth-child(4):hover) .pr-fuell,
  .profil:has(.profil__legende li:nth-child(5):hover) .pr-rohr,
  .profil:has(.profil__legende li:nth-child(5):hover) .pr-sand { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Leistungen: alternierende Bild-Text-Baender statt Kartenraster.
   Der erste Block ist groesser — er ist die Sparte, zu der der Standort
   tatsaechlich gehoert (Leitungsbau).
   -------------------------------------------------------------------------- */
/* Der Abstand zur Trennlinie gehoert auf das Band, nicht auf die Textspalte:
   bei align-items:center ergab er sich sonst aus der Hoehendifferenz von Bild
   und Text. Beim Industriebau-Band waren beide fast gleich hoch — das Bild
   klebte mit 4px an der Linie, waehrend die anderen 25px hatten.          */
.leistung {
  display: grid;
  /* Gestapelt (Mobil/Tablet, unter 54rem) braucht das Bild Luft zur
     Ueberschrift — im zweispaltigen Desktop-Layout ueberschreibt das
     clamp()-gap unten diesen Wert ohnehin. */
  gap: var(--s-4);
  grid-template-columns: 1fr;
  padding-block: var(--s-5);
  border-top: 1px solid color-mix(in oklab, var(--cd-grau) 30%, transparent);
}
@media (min-width: 54rem) { .leistung { padding-block: var(--s-7); } }
.leistung:first-of-type { border-top: 0; }
.leistung__bild { position: relative; aspect-ratio: 4 / 3; }
.leistung__text { 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.008em; }
.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--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;
}

/* Interaktive Standortkarte (index + kontakt): echte Geografie (BKG VG2500,
   erzeugt von tools/kontakt-karte-daten.py), Bildmarken-Pins, Zoom per JS
   ueber die viewBox. Ohne JS: statische Ansicht, Steuerknoepfe versteckt. */
.karte-live {
  position: relative;
  background: var(--grund-2);
  overflow: hidden;
}
.karte-live svg { width: 100%; height: auto; display: block; }
.klive__pin {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s ease;
}
.klive__pin:hover, /* Kein Kasten-Outline um die Pin-Gruppe (legt sich sonst um Kreis UND Label);
   Tastatur-Fokus zeigt sich stattdessen kreisrund am Pin-Rand. */
.klive__puls {
  transform-box: fill-box;
  transform-origin: center;
  animation: klive-puls 2.8s ease-out infinite;
}
@keyframes klive-puls {
  0%   { transform: scale(1); opacity: 0.9; }
  70%  { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .klive__puls { animation: none; opacity: 0.45; }
  .klive__pin { transition: none; }
}
html.no-js .karte-live__quelle {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  margin: 0;
  font-size: 0.7rem;
  color: var(--auf-dunkel-muted);
  background: color-mix(in oklab, var(--grund) 76%, transparent);
  padding: 0.25rem 0.5rem;
}

.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); }
/* Zweite Zeile (E-Mail unter der Telefonnummer, 18.08.2026): ohne diese Regel
   sitzen beide Zeilen mit 0 px Abstand aufeinander — gemessen 4630+25 gegen 4655.
   Bewusst als Geschwister-Regel, damit ein einzeiliger Ort keinen Vorschub bekommt. */
.orte__zeile + .orte__zeile { margin-top: var(--s-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); }

/* Nachweise/Zertifikate: Zeile mit Titel+Meta links, Download-Knopf rechts.
   Gleiche Rahmen-Sprache wie .stellen; auf schmalen Geraeten stapelt der
   Knopf unter den Text statt ihn zu verdraengen (min. 44px Ziel bleibt). */
.nachweise-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in oklab, var(--cd-grau) 34%, transparent); }
.nachweise-liste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid color-mix(in oklab, var(--cd-grau) 34%, transparent);
}
.nachweise-liste li > div { flex: 1 1 20rem; }
.nachweise-liste__titel { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.nachweise-liste__meta { font-size: var(--step--1); color: var(--ink-muted); margin: var(--s-1) 0 0; max-width: 60ch; }
.nachweise-liste .knopf { flex-shrink: 0; margin-left: auto; }
@media (max-width: 26rem) {
  .nachweise-liste .knopf { margin-left: 0; width: 100%; justify-content: center; }
}
.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.008em;
  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: 27ch; 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; }

/* --------------------------------------------------------------------------
   Stellen auf der Karriereseite — Raster mit Filter
   --------------------------------------------------------------------------
   Hier standen bis zum 29.07. `.stellen-liste > .katalog-stelle` (gestapelte
   Liste mit Trennlinien) und `.katalog-stelle h3/p`. Beide sind mit dem Umbau
   auf das Raster ersatzlos entfallen, weil kein Markup sie mehr trug.

   Warum trotzdem KEIN Kartenraster im ueblichen Sinn: Das Blatt vermeidet
   Kacheln an drei Stellen ausdruecklich (Zeile 76, 148, 306) und das CD sagt
   „Radius: minimal. Tiefbau hat Kanten, keine Pillen." Es gibt in diesem
   Projekt nirgends eine Karte mit Rahmen, Schatten oder Fuellflaeche. Die
   Vorlage des Kunden hatte all das — uebernommen wurde deshalb die STRUKTUR
   (Filter, Raster, Etiketten, zwei Knoepfe), nicht die Optik. Eine Karte ist
   hier weiterhin: Oberkante plus Inhalt.
   -------------------------------------------------------------------------- */
.stellen-raster {
  display: grid;
  gap: var(--s-6) var(--s-5);
  /* auto-fit statt fester Spaltenzahl: Das Raster faellt von selbst auf eine
     Spalte, ohne Media Query. Das `min(…, 100%)` sorgt dafuer, dass bei 320px
     Viewport (Satzspiegel 280px) genau eine Spalte steht und damit KEIN
     waagerechter Abstand anfaellt — die Gap-Falle aus Abschnitt 4a der
     Uebergabe kann hier also nicht zuschlagen.
     20rem, nicht 17rem: Bei 17rem passten auf 1400px vier Spalten, und bei
     fuenf Karten steht dann eine allein in der zweiten Reihe. Gerechnet gegen
     den Satzspiegel von 1216px (--mass): vier Spalten braeuchten
     4x320 + 3x32 = 1376px und passen damit nicht mehr, drei brauchen
     3x320 + 2x32 = 1024px. Ergibt 3 + 2 statt 4 + 1. Wer den Wert aendert,
     rechnet das nach. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.stelle {
  margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 2px solid var(--cd-blau);
}
/* Pflicht, nicht Kosmetik: `display: flex` in der Regel darueber ueberstimmt
   sonst das hidden-Attribut, mit dem der Filter arbeitet — die Karten blieben
   beim Filtern einfach stehen. Dieselbe Falle wie bei .stimmen__nav und
   .nav[hidden]; sie ist in diesem Projekt schon zweimal zugeschlagen. */
.stelle[hidden] { display: none; }
/* Ausbildung abgesetzt: dasselbe Mittel, andere Gewichtung. Kein Rahmen, keine
   Flaeche — nur die Oberkante traegt dicker auf. Die Etikette „Ausbildung" im
   Markup sagt dasselbe noch einmal in Worten, damit die Unterscheidung nicht
   allein an der Farbe haengt (WCAG 1.4.1) und ein Graustufen-Ausdruck sie
   ebenfalls zeigt. */
.stelle--ausbildung { border-top-width: 7px; }
.stelle__titel {
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0;
  /* Deutsche Berufsbezeichnungen sind lange Komposita — „Tiefbaufacharbeiter"
     misst ungetrennt mehr als eine 17rem-Spalte hergibt. Gleiche Trennung wie
     bei h1-h3 in base.css. */
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}
.stelle__kurz { color: var(--ink-muted); margin: 0; }
/* Der Knopf sitzt an der Unterkante, damit die Knopfreihe ueber alle Karten
   auf einer Linie liegt, egal wie lang der Kurztext ist. */
.stelle__melden { margin-top: auto; align-self: flex-start; }

/* Details statt zweitem Knopf-Ziel: Der Volltext bleibt auf derselben Seite,
   es braucht keine Detailseite je Stelle. Das Muster gibt es bereits unter
   `.fragen` weiter oben. */
.stelle__mehr { margin: 0; }
.stelle__mehr summary {
  list-style: none;                        /* Dreieck weg, Firefox            */
  --ecke: 0.55rem;                         /* kleiner als der grosse Knopf     */
  min-height: 44px;
  padding: 0.45rem 1rem;
  font-size: var(--step--1);
}
.stelle__mehr summary::-webkit-details-marker { display: none; }
.stelle__mehr[open] summary { margin-bottom: var(--s-3); }
.stelle__text > * + * { margin-top: var(--s-3); }
.stelle__text p { margin: 0; }

/* Filterleiste. Steht im Markup mit `hidden` und wird erst von site.js
   eingeblendet — ohne JS gaebe es nichts, was einen gesetzten Filter wieder
   aufhebt. Die Zusatzregel fuer [hidden] ist Pflicht: `display: flex`
   ueberstimmt das hidden-Attribut sonst, genau wie bei .stimmen__nav. */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.filter[hidden] { display: none; }
.filter__wort { font-size: var(--step--1); color: var(--ink-muted); }
.filter__gruppe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter__knopf {
  --ecke: 0.5rem;
  min-height: 44px;                        /* Touch-Ziel                      */
  padding: 0.45rem 1rem;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cd-grau) 50%, transparent);
  font: inherit; font-size: var(--step--1);
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ecke)),
    calc(100% - var(--ecke) * var(--winkel-faktor)) 100%, 0 100%);
  transition: color var(--dauer-kurz) var(--ease-aus),
              background var(--dauer-kurz) var(--ease-aus),
              box-shadow var(--dauer-kurz) var(--ease-aus);
}
.filter__knopf:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--cd-grau); }
/* Der aktive Filter traegt volle Flaeche statt nur Kontur — der Zustand muss
   auf einen Blick lesbar sein, nicht durch Vergleich zweier Linienstaerken.
   Weiss auf --cd-blau ist mit 5,76:1 fuer diese Groesse ausreichend. */
.filter__knopf[aria-pressed="true"] {
  background: var(--cd-blau);
  color: var(--cd-weiss);
  box-shadow: none;
}
.filter__knopf:focus-visible {
  outline: 3px solid var(--cd-blau);
  outline-offset: 2px;
}
.stellen-raster__leer[hidden] { display: none; }
.stellen-raster__leer { margin-top: var(--s-5); color: var(--ink-muted); }
.filter__zuruecksetzen {
  border: 0; background: none; padding: 0;
  font: inherit; color: var(--cd-blau);
  text-decoration: underline; text-underline-offset: 0.2em;
  cursor: pointer;
}

/* 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); }

/* --------------------------------------------------------------------------
   Aktuelles — Beitragsraster
   --------------------------------------------------------------------------
   Dieselbe Karten-Auffassung wie beim Stellenraster und im Leistungskatalog:
   Oberkante plus Inhalt. Kein Rahmen, kein Schatten, keine Fuellflaeche. Das
   Blatt vermeidet Kacheln durchgehend (Zeile 644 ff.), und ein Blog ist kein
   Anlass, davon abzuweichen — im Gegenteil, er waere die Stelle, an der ein
   Kartenraster am ehesten aus Gewohnheit entstanden waere.

   Dasselbe Raster traegt beide Auftritte: die Uebersicht auf aktuelles.html
   und den Dreier-Anriss auf der Startseite. Eine Komponente, zwei Orte.
   -------------------------------------------------------------------------- */
.beitraege {
  display: grid;
  gap: var(--s-6) var(--s-5);
  /* auto-fit mit min(21rem, 100%) statt fester Spaltenzahl, aus demselben
     Grund wie beim Stellenraster: bei 320px Viewport (Satzspiegel 280px)
     steht damit genau eine Spalte, es faellt kein waagerechter Abstand an
     und die Gap-Falle aus Abschnitt 4a der Uebergabe kann nicht zuschlagen.
     21rem statt 17rem, weil ein Beitrag ein Bild traegt: darunter wird das
     Motiv zum Briefmarkenformat.                                          */
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  list-style: none; margin: 0; padding: 0;
}
/* Unter 40rem zeigt jedes Beitraege-Raster nur die neueste Karte — auf der
   Uebersicht uebernimmt die „Fruehere Beitraege"-Liste (nur-mobil-Eintraege),
   auf der Startseite der Link „Alle Beitraege". Ab 40rem stehen 3 Karten. */
@media (max-width: 39.99rem) {
  .beitraege .beitrag:nth-child(n+2) { display: none; }
}
@media (min-width: 40rem) {
  .nur-mobil { display: none; }
}
.beitrag {
  margin: 0;
  display: flex; flex-direction: column;
  align-items: start;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 2px solid var(--cd-blau);
}
/* 3/2 quer: Baustellenfotos sind Breitformate (Graben, Fahrbahn, Halle).
   Hochformat gibt es in dieser Bildwelt nur bei Personen. object-fit:cover
   steht bereits auf .bild img, der Anschnitt passiert also im Rahmen.     */
.beitrag__bild { position: relative; aspect-ratio: 3 / 2; width: 100%; }

/* Das Datum steht ueber der Ueberschrift, nicht darunter. Bei einer Liste
   aus Baustellenberichten ist die Aktualitaet die erste Frage des Lesers —
   ein Bericht von vorletztem Jahr soll sich nicht erst nach dem Titel als
   solcher zu erkennen geben. Gemessen: --ink-muted auf --flaeche 5.82:1,
   auf Weiss 6.51:1. tabular-nums, damit die Datumsspalte in der Uebersicht
   nicht zappelt.                                                          */
.beitrag__datum {
  font-size: var(--step--1);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
/* Bewusst eine Stufe unter der Basis-h3 (--step-2): Drei Spalten mit
   Versal-Ueberschriften in Anzeigengroesse ergeben eine Wand, und die
   Sektions-h2 darueber muss die groesste Stimme im Raum bleiben.
   Silbentrennung erbt der Titel als h3 aus base.css Zeile 92 — deutsche
   Fachkomposita („Kampfmittelverdachtsflaeche") sind hier die Regel, nicht
   die Ausnahme, und ohne Trennung schiebt ein einziger Titel die Spalte auf. */
.beitrag__titel { font-size: var(--step-1); line-height: 1.2; }
.beitrag__titel a { color: inherit; text-decoration: none; }
/* --cd-blau auf --flaeche misst 5.15:1, auf Weiss 5.76:1 — beides traegt
   auch als Fliesstext, nicht nur als Grossschrift.                        */
.beitrag__titel a:hover { color: var(--cd-blau); }
.beitrag p { color: var(--ink-muted); margin: 0; max-width: 44ch; }

/* Auf dunklem Grund kehren sich Linie und Sekundaertext um. Bisher steht das
   Raster nur auf hellen Flaechen; die Regel kostet drei Zeilen und verhindert,
   dass der naechste Einsatzort unlesbar wird.                             */
.sektion--dunkel .beitrag { border-top-color: var(--blau-hell); }
.sektion--dunkel .beitrag__datum,
.sektion--dunkel .beitrag p { color: var(--auf-dunkel-muted); }
.sektion--dunkel .beitrag__titel a:hover { color: var(--blau-hell); }

/* Fusszeile der Uebersicht: das Archiv aelterer Beitraege laeuft ueber die
   vorhandene .stellen-Zeilenliste. Sie kann genau das — Titel links, Angabe
   rechts, Hover-Einzug — und muss dafuer nicht angefasst werden. Nur die
   rechte Spalte traegt hier ein Datum statt einer Vertragsart.            */
.beitrag-zeile__datum {
  margin-left: auto;
  font-size: var(--step--1);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Aktuelles — Beitragsseite
   -------------------------------------------------------------------------- */
/* Die Datumszeile unter der h1 im Seitenkopf. Sie steht auf --grund, also
   gilt --auf-dunkel-muted (10.48:1), nicht --ink-muted.                    */
.beitrag__kopfdatum {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--step--1);
  color: var(--auf-dunkel-muted);
  font-variant-numeric: tabular-nums;
}
/* Ruecksprung ans Ende des Lesetextes. Kein .knopf: Der Weg zurueck in die
   Liste ist kein Handlungsaufruf, er konkurriert sonst mit dem CTA-Band
   direkt darunter.                                                        */
.beitrag__zurueck { margin-top: var(--s-7); }