/* Kranservice DILGER — Entwurf v3 „Maßstab“
   ==========================================================================
   Leitgedanke: Ein Turmdrehkran wird über HÖHE und REICHWEITE definiert.
   Das ist die einzige Größe, die den Betrieb wirklich beschreibt — und der
   einzige Datenbestand, den sonst niemand hat (35 Krane mit Eckdaten).
   Die Seite macht diese Dimension sichtbar, statt sie in einer Tabelle zu
   verstecken.

   Bewusst anders als die beiden bestehenden Fassungen, die beide auf
   hellem Grund mit Kartenraster, Kennzahlenband und Vier-Kachel-Hero
   arbeiten:

     Grund        dunkel statt hell — Stahl, Nacht, Baustellenlicht.
                  Gelb wird dadurch zur echten Signalfarbe, so wie es auf
                  der Baustelle auch funktioniert.
     Typografie   kondensierte Display-Grotesk in großen Graden (Oswald)
                  gegen eine technische Textschrift (IBM Plex Sans).
     Layout       keine Karten. Ganzseitige Bänder, vertikale Maßlinien,
                  Typo-Blöcke, asymmetrische Raster.
     Leitmotiv    eine Maßleiste mit Höhenmarken — das Element, das einen
                  Kranmast ausmacht.
   ========================================================================== */

:root {
  /* --- Flächen: Stahl bei Nacht ------------------------------------- */
  /* Weicheres Anthrazit statt Fast-Schwarz (06.10.2026, vorher #0a0c0f).
     Alle Dunkeltoene um 20 Stufen angehoben. Drei Stufen wurden
     durchgerechnet (+16/+20/+24); +20 ist die mittlere: deutlich weicher,
     und das Stoerungsrot steht noch 3,38:1 gegen den Grund (Soll 3,0) -
     bei +24 waeren es nur 3,22. FEST VERDRAHTET in rgba() muessen diese
     Toene an vier Stellen mitgefuehrt werden: Kopfleiste, Hero-Schleier,
     Kranfinder, Finder-Raster - tools/farben.py prueft den Schleier. */
  --nacht:      #1e2023;   /* Seitengrund */
  --stahl:      #262a2f;   /* abgesetzte Bänder */
  --stahl-hell: #2f353c;   /* Karten, Felder */
  --kante:      #3a424b;   /* Trennlinien */
  --kante-hell: #697687;   /* Ränder von Bedienelementen — 3,12:1 auf Stahl */

  /* --- Schrift ------------------------------------------------------- */
  --text:       #f2f4f6;
  --text-leise: #9aa5b1;
  --text-still: #8794a0;   /* 4,66:1 auf der Stahlfläche (mit dem Grund angehoben) */
  /* Gedaempfter Text AUF DEM FOTO (Hero-Einleitung, Kennzahl-Beschriftung).
     Heller als --text-leise: mit dem weicheren Grund laesst der Schleier
     das Foto an hellen Stellen staerker durch; --text-leise fiel dort auf
     3,85:1. tools/farben.py misst die Hero-Lesbarkeit gegen genau diesen
     Ton - er MUSS der schwaechste Text im Hero sein. */
  --text-foto:  #c5ccd3;

  /* --- Marke --------------------------------------------------------- */
  --signal:      #fdd900;  /* Baustellengelb — trägt die Aktion */
  --signal-tief: #c9ab00;
  --alarm:       #d92d22;  /* nur Störung/Notdienst — Weiß darauf 4,83:1 */
  --alarm-grund: #2a0d0e;

  /* Rot als zweite Akzentfarbe, nicht nur als Alarm.
     In der ersten Fassung ist Rot die AKTIONSfarbe (--aktion: #e20714)
     und kommt auf jeder Inhaltsseite vor; dieser Entwurf hatte es auf den
     Störungsfall verengt - gezählt am 06.10.2026: einmal im ganzen
     Projekt. Rot trägt auf hellem Grund (4,54:1), Gelb dort nicht
     (1,28:1). Deshalb: dunkle Flächen führen Gelb, helle Flächen Rot. */
  --aktion:      #e20714;
  --aktion-tief: #b8050f;

  /* --- Helle Abschnitte ----------------------------------------------
     Gegen das Ermüden beim Durchscrollen. Innerhalb der dunklen Palette
     ist kaum Luft: zwei dunkle Flächen stehen 1,08:1 zueinander, und wer
     die zweite so weit aufhellt, dass 2,0 erreicht wird, verliert den
     Sekundärtext. Ein echter Flächenwechsel steht dagegen bei 18,08:1. */
  --hell:        #f4f6f8;
  --hell-karte:  #ffffff;
  --hell-text:   #1b2024;  /* 15,16:1 auf --hell */
  --hell-leise:  #5a646e;  /*  5,57:1 auf --hell */
  --hell-linie:  #dde0e5;
  --hell-rand:   #868f9b;

  /* Kanten leicht gebrochen statt scharf. Die erste Fassung nutzt an 25
     Stellen einen Radius, dieser Entwurf war praktisch radiusfrei - das
     wirkte hart. 4 px nimmt die Härte, ohne die Bauart aufzugeben. */
  --radius: 4px;

  /* --- Maße ---------------------------------------------------------- */
  --breite: 1240px;
  --breite-eng: 68ch;
  --h3-gr: clamp(1.15rem, 1.02rem + .5vw, 1.4rem);   /* Groesse der H3 */
  --kopf: 80px;

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem;
  --s9: 6.5rem; --s10: 9rem;

  --display: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --text-schrift: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  --takt: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf) + var(--s5));
  background: var(--nacht);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--text);
  font-family: var(--text-schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

/* Grundmaß für Inline-SVG; spezifischere Regeln gewinnen. */
svg { width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: 0 0 auto; }

/* --- Typografie: kondensiert, groß, mit engem Satz ------------------- */

/* Zeilenhoehe .98 -> 1.12 (14.10.2026): Oswald setzt die Umlautpunkte hoch -
   bei .98 sassen die Punkte des Ü auf dem S der Zeile darueber ("Sprechen
   Sie mit uns / Über Ihr Vorhaben", 0,07 em Ueberlappung). 1.12 laesst bei
   allen Ueberschriften mindestens 0,06 em Luft; gemessen mit
   tools/zeilen_messen.py (je Zeichenpaar, das uebereinander steht). */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0 0 var(--s5);
  text-wrap: balance;
}
/* Obergrenze von 6.4rem auf 4.6rem. Bei 1440 px stand die Ueberschrift
   auf 102 px und schob die Aktionszeile unter die Fensterkante: Hero fix
   1052 px hoch, Aktionszeile bei 797-851 px, Kennzahlen bei 899-1004 px -
   bei 760 px Fensterhoehe beides unsichtbar (gemessen 06.10.2026). */
h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); }
/* Groesse als Variable: Die Ziffernkacheln der Leistungsliste richten
   sich danach an der ersten Titelzeile aus (.leistung__nr, hell). */
h3 {
  font-size: var(--h3-gr);
  font-weight: 500; line-height: 1.2; letter-spacing: .01em;
}
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--signal); text-underline-offset: 3px; }
a:hover { color: #fff; }

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

.container {
  width: 100%; max-width: var(--breite);
  margin-inline: auto; padding-inline: var(--s6);
}
@media (max-width: 560px) { .container { padding-inline: var(--s4); } }

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprungmarke {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--signal); color: var(--nacht);
  padding: var(--s3) var(--s5); font-weight: 600;
}
.sprungmarke:focus { top: var(--s3); color: var(--nacht); }

/* --- Leitmotiv: die Maßleiste ---------------------------------------
   Höhenmarken wie an einem Kranmast. Sie läuft am linken Rand jedes
   großen Abschnitts mit und gibt der Seite ihren Takt. Rein dekorativ,
   deshalb aria-hidden und ab Tablet abwärts ausgeblendet. */

.massleiste {
  position: absolute; left: 0; top: 0; bottom: 0; width: 60px;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--kante) 0 1px, transparent 1px);
  background-size: 100% 48px;
  background-position: 0 0;
  opacity: .5;
}
.massleiste::before {
  content: ""; position: absolute; left: 28px; top: 0; bottom: 0;
  width: 1px; background: var(--kante);
}
.massleiste span {
  position: absolute; left: 0; width: 20px; height: 1px;
  background: var(--signal);
}
@media (max-width: 1100px) { .massleiste { display: none; } }

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

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(30, 32, 35, .82);   /* = --nacht */
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--kante);
}
.kopf__innen {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--kopf);
}
.kopf__marke { display: flex; align-items: center; text-decoration: none; min-height: 44px; }
/* 42 -> 58 px (Partner 12.10.2026: "Logo kann größer sein. Geht aktuell unter.") */
.kopf__logo { height: 58px; width: auto; }
/* Startseite oben 92 px, Handy 76 px (Partner-Mail 19.10.2026: "Lässt sich das
   Logo auf der Startseite vergrößern?", Vanessa 20.10.2026: Entwurf C). Ab 80 px
   Scrollweg setzt app.js .kopf--klein, dann gelten wieder 58 px / 80 px. Der
   Kopf ist sticky und steht im Fluss: overflow-anchor:none, damit Chrome beim
   Schrumpfen nicht die Scrollposition nachzieht und die Klasse hin und her kippt. */
.kopf--gross .kopf__innen { min-height: 120px; transition: min-height .25s var(--takt); }
.kopf--gross .kopf__logo { height: 92px; transition: height .25s var(--takt); }
.kopf--gross.kopf--klein .kopf__innen { min-height: var(--kopf); }
.kopf--gross.kopf--klein .kopf__logo { height: 58px; }
html:has(.kopf--gross) { overflow-anchor: none; }
@media (max-width: 520px) {
  .kopf--gross .kopf__innen { min-height: 100px; }
  .kopf--gross .kopf__logo { height: 76px; }
}

.kopf__nav { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.kopf__nav a {
  color: var(--text-leise); text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: .92rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: var(--s3) var(--s4); min-height: 44px;
  display: inline-flex; align-items: center; white-space: nowrap;
  position: relative;
}
.kopf__nav a:hover { color: var(--text); }
.kopf__nav a[aria-current="page"] { color: var(--signal); }
.kopf__nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s4); right: var(--s4);
  bottom: 10px; height: 2px; background: var(--signal);
}

.kopf__tel {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--signal); color: var(--nacht) !important;
  text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: var(--s3) var(--s5); min-height: 44px;
  margin-left: var(--s4); white-space: nowrap;
  transition: background .16s var(--takt);
}
.kopf__tel:hover { background: #fff; color: var(--nacht) !important; }
.kopf__tel svg { width: 17px; height: 17px; }

.kopf__schalter {
  display: none; margin-left: var(--s3); width: 46px; height: 46px;
  background: none; border: 1px solid var(--kante-hell); color: var(--text);
  cursor: pointer; align-items: center; justify-content: center;
}
.kopf__schalter svg { width: 22px; height: 22px; }

@media (max-width: 1000px) {
  .kopf__schalter { display: inline-flex; }
  .kopf__tel { margin-left: auto; }
  .kopf__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--stahl); border-bottom: 1px solid var(--kante);
    padding: var(--s3) var(--s6) var(--s6); display: none;
  }
  .kopf__nav--offen { display: flex; }
  .kopf__nav a { font-size: 1.1rem; padding: var(--s4) 0; }
  .kopf__nav a[aria-current="page"]::after { left: 0; right: auto; width: 24px; }
}
@media (max-width: 520px) {
  .kopf__tel-text { display: none; }
  .kopf__tel { padding: var(--s3); }
}

/* --- Knöpfe ---------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s3); min-height: 54px; padding: var(--s3) var(--s6);
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .18s var(--takt), color .18s var(--takt),
              border-color .18s var(--takt);
  text-align: center;
}
.knopf svg { width: 18px; height: 18px; }
.knopf--signal { background: var(--signal); color: var(--nacht); }
.knopf--signal:hover { background: #fff; color: var(--nacht); }
.knopf--rand {
  background: transparent; color: var(--text);
  border-color: var(--kante-hell);
}
.knopf--rand:hover { border-color: var(--signal); color: var(--signal); }
.knopf--alarm { background: var(--alarm); color: #fff; }
.knopf--alarm:hover { background: #fff; color: var(--alarm); }
.knopf--breit { width: 100%; }

.aktionszeile { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* --- Abschnitte ------------------------------------------------------ */

.abschnitt { position: relative; padding-block: var(--s9); }
.abschnitt--eng { padding-block: var(--s8); }
.abschnitt--stahl { background: var(--nacht); border-top: 1px solid var(--kante); }
.abschnitt--linie { border-top: 1px solid var(--kante); }

/* Abschnittskopf: Nummer, Linie, Überschrift — wie eine Positionsangabe
   auf einer technischen Zeichnung. */
.kopfzeile { display: grid; gap: var(--s5); margin-bottom: var(--s8); }
/* Endet die Kopfzeile mit der Ueberschrift (ohne Einleitung), zaehlte deren
   eigener Rand (24 px) zum Abstand dazu: 96 px bis zum Inhalt statt 72 wie
   nach einer Einleitung. Gemessen 07.10.2026 in sechs Abschnitten, u. a.
   "Wer wir sind", "Wofuer wir stehen", "Was Du von uns bekommst". */
.kopfzeile > h2:last-child { margin-bottom: 0; }
.kopfzeile__marke {
  display: flex; align-items: center; gap: var(--s4);
  font-family: var(--display); font-size: .82rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--signal);
}
.kopfzeile__marke::after {
  content: ""; flex: 1; height: 1px; background: var(--kante);
}
/* Gelbes Quadrat vor jeder Marke, auf hellem wie dunklem Grund - das
   gemeinsame Zeichen. Auf Dunkel ist die Schrift gelb, auf Hell rot (rote
   kleine Schrift auf Dunkel erreicht nur 3,99:1, gelbe auf Hell 1,28:1). */
.kopfzeile__marke::before {
  content: ""; width: 14px; height: 14px; flex: none; background: var(--signal);
}
/* Farbe mit Spezifitaet (0,2,0). Die Marke ist selbst ein <p>, und
   `.kopfzeile p` (0,1,1) fuer Einleitungstexte hat `.kopfzeile__marke`
   (0,1,0) ueberstimmt: auf ALLEN dunklen Abschnitten standen die Marken
   seit dem ersten v3-Entwurf grau statt gelb (gemessen 06.10.2026 -
   "Was wir bieten", "Warum DILGER", "Haeufige Fragen", "Mietpark" u. a.).
   Derselbe Fehler wie auf hellem Grund, siehe ".abschnitt--hell". */
.kopfzeile .kopfzeile__marke { color: var(--signal); }
.kopfzeile p {
  color: var(--text-leise); font-size: 1.15rem;
  max-width: var(--breite-eng); margin: 0;
}

/* --- Hero ------------------------------------------------------------
   Kein Kachelraster. Eine große Aussage, das Foto als Fläche dahinter,
   und direkt darunter das Werkzeug, mit dem man hier wirklich etwas
   anfangen kann: der Kranfinder. */

.hero { position: relative; overflow: hidden; background: var(--nacht); }
/* Hero-Foto des Partners (14.10.2026, Variante C + "etwas raus zoomen"):
   Auf breiten Bildschirmen war der Hero so flach, dass "cover" nur noch
   72 % (1920 px) bzw. 57 % (2560 px) der Fotohoehe zeigte. Jetzt steht das
   Foto in voller Hoehe rechtsbuendig (Breite = Hoehe x 16/9, hoechstens die
   Hero-Breite) und laeuft links unter dem Text ins Dunkle aus. */
.hero__bild {
  position: absolute; inset: 0 0 0 auto; z-index: 0;
  height: 100%; width: auto; aspect-ratio: 16 / 9; max-width: 100%;
}
.hero__bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24%);
}
/* Hochkant laesst sich ein Querformat nicht ohne Luecken verkleinern - dort
   der Ausschnitt mit Turm und D-Logo, ganz abgedunkelt (Text ueber voller
   Breite). */
@media (max-width: 760px) {
  .hero__bild { inset: 0; width: auto; height: auto; aspect-ratio: auto; max-width: none; }
  .hero__bild img { object-position: 72% 50%; -webkit-mask-image: none; mask-image: none; }
}
/* Reihenfolge ist Pflicht: Bild 0, Schleier 1, Raster 2, Inhalt 3. */
.hero__schleier {
  position: absolute; inset: 0; z-index: 1;
  /* Variante C (14.10.2026): links dunkel fuer den Text, rechts hell -
     Kran, D-Logo und "81K.1" sollen sichtbar sein. */
  background:
    linear-gradient(180deg, rgba(30,32,35,.55) 0%, rgba(30,32,35,.25) 45%, rgba(30,32,35,.9) 100%),
    /* bis 55 % dunkel: dort endet die Textspalte (Unterzeile bei 1440 px
       bis 52 %); 3,94:1 mit Auslauf ab 45 % war zu wenig. */
    linear-gradient(90deg, rgba(30,32,35,.95) 0%, rgba(30,32,35,.9) 55%, rgba(30,32,35,.1) 80%, rgba(30,32,35,.1) 100%);
}
@media (max-width: 760px) {
  .hero__schleier {
    background: linear-gradient(180deg, rgba(30,32,35,.80) 0%, rgba(30,32,35,.86) 60%, rgba(30,32,35,.97) 100%);
  }
}
.hero__raster {
  position: absolute; inset: 0; z-index: 2; opacity: .5;
  background-image:
    linear-gradient(to right, var(--kante) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, var(--kante) 0 1px, transparent 1px 100%);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 20%, transparent 75%);
}
/* Polster auf die Fensterhoehe bezogen statt fest. Vorher --s10/--s9
   (144/104 px), dadurch begann der Inhalt erst bei 225 px. */
.hero__innen {
  position: relative; z-index: 3;
  /* oben 7vh -> 4,5vh (14.10.2026): Ausgleich fuer die hoehere Zeilenhoehe der
     Ueberschrift - sonst rutschten die Kennzahlen bei 1440 x 760 unter die Kante. */
  padding-block: clamp(var(--s5), 4.5vh, var(--s8)) clamp(var(--s6), 6vh, var(--s8));
}

.hero__kennung {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--display); font-size: .8rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--signal);
  margin-bottom: var(--s5);
}
/* Linie vor der Dachzeile entfernt (Partner 12.10.2026: "Strich kann weg"). */
.hero h1 { max-width: 16ch; margin-bottom: var(--s5); }
.hero h1 em {
  font-style: normal; color: var(--signal); display: block;
}
.hero__lead {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
  color: var(--text-foto); max-width: 54ch; margin: 0 0 var(--s5);
}

/* Eckwerte im Hero: die drei Zahlen, die den Betrieb beschreiben.
   Als Linie gesetzt, nicht als Kartenreihe. */
.eckwerte {
  display: flex; flex-wrap: wrap; gap: var(--s7);
  padding-top: var(--s5); margin-top: var(--s5);
  border-top: 1px solid var(--kante);
  list-style: none; padding-inline: 0;
}
.eckwerte li { display: grid; gap: var(--s1); }
.eckwerte b {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.3rem);
  line-height: 1; color: var(--text); letter-spacing: -.01em;
}
.eckwerte span { font-size: .88rem; color: var(--text-still); letter-spacing: .04em; }
/* Vorsatz vor der Zahl ("max. 14 h"): halbe Groesse, gleiche Farbe wie
   die Zahl - auf dem Foto lesbar (gemessen wird gegen --text). */
.eckwerte b small { font-size: .5em; font-weight: 500; letter-spacing: .04em; }
/* Im Hero stehen die Beschriftungen auf dem Foto - dort --text-foto. */
.hero .eckwerte span { color: var(--text-foto); }

/* --- Kranfinder ------------------------------------------------------
   Das Herzstück. Aus 35 Kranen den passenden finden, indem man die drei
   Werte einstellt, die auf der Baustelle zählen — und daneben sieht man
   den Kran MASSSTÄBLICH gezeichnet. Das ist der Grund, warum diese
   Fassung dunkel und technisch ist: Hier liegt der Wert des Betriebs. */

.finder {
  position: relative; z-index: 3;
  background: rgba(38, 42, 47, .92);   /* = --stahl */
  border: 1px solid var(--kante);
  backdrop-filter: blur(8px);
}
.finder__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5);
  justify-content: space-between;
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--kante);
}
.finder__kopf h2 {
  font-size: 1.3rem; margin: 0; letter-spacing: .04em;
}
.finder__zahl { font-size: .92rem; color: var(--text-leise); }
.finder__zahl b { color: var(--signal); font-family: var(--display); font-size: 1.15rem; }
/* Zaehler rechts, solange er neben die Ueberschrift passt; bricht er um,
   steht er allein in der Zeile und damit links buendig mit ihr
   (justify-content: space-between oben). Vorher margin-left: auto - dann
   rueckte er umgebrochen nach rechts ein, seit dem laengeren Wortlaut
   "in dieser Groessenklasse" zwischen 320 und 730 px (07.10.2026). */

.finder__innen {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 0;
}
@media (max-width: 900px) { .finder__innen { grid-template-columns: 1fr; } }

/* Polster und Abstaende eine Stufe enger. Mit --s6 an fuenf Stellen war
   allein in den Zwischenraeumen 128 px Hoehe gebunden. */
.finder__regler { padding: var(--s5); display: grid; gap: var(--s5); align-content: start; }
.regler { display: grid; gap: var(--s3); }
.regler__kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
}
.regler__kopf label {
  font-family: var(--display); font-size: .85rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise);
}
.regler__wert {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  color: var(--signal); line-height: 1;
}
.regler input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
}
.regler input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; background: var(--kante-hell);
}
.regler input[type="range"]::-moz-range-track {
  height: 3px; background: var(--kante-hell);
}
.regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -10px;
  background: var(--signal); border: 0; border-radius: 0;
  transform: rotate(45deg);
}
.regler input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; background: var(--signal);
  border: 0; border-radius: 0; transform: rotate(45deg);
}
.regler__skala {
  display: flex; justify-content: space-between;
  font-size: .78rem; color: var(--text-still); font-variant-numeric: tabular-nums;
}

/* Zeichnung: maßstäbliche Darstellung des gewählten Krans. */
.finder__buehne {
  border-left: 1px solid var(--kante);
  display: grid; grid-template-rows: auto auto; align-content: start;
}
@media (max-width: 900px) {
  .finder__buehne { border-left: 0; border-top: 1px solid var(--kante); }
}
.finder__fussnote {
  margin: 0; padding: 0 var(--s5) var(--s5);
  font-size: .86rem; max-width: 62ch;
}
/* FESTE Hoehe, bewusst.
   Vorher stand hier `min-height` und das SVG hatte `height: 100%`. Bei
   einem Elternteil ohne bestimmte Hoehe leitet der Browser die Hoehe des
   SVG aus dem Seitenverhaeltnis seines viewBox ab - und dieser viewBox
   wird in app.js aus den Massen eben dieser Buehne berechnet. Das ergab
   eine Rueckkopplung: die Buehne wuchs auf 621 px und zog die Reglerspalte
   von 476 auf 713 px mit (gemessen 06.10.2026). Mit bestimmter Hoehe
   loest `height: 100%` eindeutig auf und die Schleife entfaellt. */
.finder__bild {
  height: clamp(260px, 34vh, 380px);
  padding: var(--s5); display: block;
  background:
    linear-gradient(to right, rgba(58,66,75,.45) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, rgba(58,66,75,.45) 0 1px, transparent 1px 100%);   /* = --kante */
  background-size: 32px 32px;
}
@media (max-width: 900px) {
  .finder__bild { height: clamp(240px, 30vh, 320px); }
}
/* Kein max-height mehr: der viewBox wird in app.js aus dem Inhaltskasten
   dieser Buehne berechnet, das SVG fuellt sie also genau aus. Mit der
   alten Deckelung von 360 px blieben auf /leistungen 279 px leer. */
.finder__bild svg { width: 100%; height: 100%; display: block; }

.finder__treffer { padding: 0 var(--s6) var(--s6); }
/* Werte des gewaehlten Krans ueber der Zeichnung; die Tragkraft an der
   Spitze gelb, weil sie die Zahl ist, auf die es ankommt. */
.finder__daten { margin: 0; padding: var(--s5) var(--s6) 0; color: var(--text-leise); font-size: .95rem; }
.finder__daten b { color: var(--text); font-family: var(--display); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.finder__daten span { color: var(--signal); }
/* Haekchen: traegt die Last bis zur Auslegerspitze (siehe kranfinder). */
.treffer__haken { color: var(--signal); font-weight: 700; margin-right: .4em; }
.treffer button[aria-pressed="true"] .treffer__haken { color: var(--aktion); }
.finder__legende { margin: var(--s4) 0 0; font-size: .85rem; color: var(--text-still); }
.treffer {
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.treffer button {
  font: inherit; font-size: .86rem; font-family: var(--display);
  letter-spacing: .04em; cursor: pointer;
  background: transparent; color: var(--text-leise);
  border: 1px solid var(--kante); padding: var(--s2) var(--s4);
  min-height: 44px; transition: all .16s var(--takt);
}
.treffer button:hover { border-color: var(--kante-hell); color: var(--text); }
.treffer button[aria-pressed="true"] {
  background: var(--signal); color: var(--nacht); border-color: var(--signal);
}
.finder__leer { color: var(--text-still); font-size: .95rem; }

/* --- Leistungen als Liste, nicht als Kacheln ------------------------- */

.leistungsliste { border-top: 1px solid var(--kante); }
.leistung {
  display: grid; grid-template-columns: 5rem 1fr minmax(0, 24rem);
  gap: var(--s6); align-items: start;
  padding-block: var(--s7); border-bottom: 1px solid var(--kante);
  transition: background .2s var(--takt);
}
.leistung:hover { background: rgba(255,255,255,.015); }
.leistung__nr {
  font-family: var(--display); font-size: 1rem; font-weight: 500;
  color: var(--signal); letter-spacing: .1em; padding-top: .3rem;
}
.leistung__text h3 { margin-bottom: var(--s3); }
.leistung__text p { color: var(--text-leise); margin: 0; max-width: 46ch; }
.leistung__mehr {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4); font-family: var(--display); font-size: .88rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  min-height: 44px;
}
.leistung__mehr svg { width: 14px; height: 14px; transition: transform .18s var(--takt); }
.leistung:hover .leistung__mehr svg { transform: translateX(4px); }
.leistung__punkte {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2);
  font-size: .93rem; color: var(--text-still);
}


/* Auf der Startseite steht die Leistung knapp: Nummer, Titel, ein Satz,
   Verweis. Die Stichpunkte sind der Grund, die Leistungsseite zu öffnen. */
.leistung--knapp { align-items: center; }
.leistung--knapp .leistung__mehr { margin-top: 0; justify-self: end; }

@media (max-width: 1000px) {
  .leistung { grid-template-columns: 3rem 1fr; }
  .leistung--knapp .leistung__mehr { grid-column: 2; justify-self: start; }
  .leistung__punkte { grid-column: 2; }
}
@media (max-width: 560px) {
  .leistung { grid-template-columns: 1fr; gap: var(--s4); }
  .leistung__punkte { grid-column: 1; }
  /* Startseite bleibt zweispaltig: Kachel links, Titel und Verweis rechts.
     Das ergab sich bisher nur ZUFAELLIG - "grid-column: 2" fuer den
     Verweis (aus dem Block bis 1000 px) erzeugte eine ungeplante zweite
     Spalte, die erste war mit 38 px schmaler als die Kachel. */
  .leistung--knapp { grid-template-columns: auto 1fr; }
}

/* --- Ablauf als Zeitstrahl -------------------------------------------
   Eigene Form: Überschrift steht links und bleibt stehen, während die
   Schritte rechts durchlaufen. Sonst wären es drei gleich gebaute
   Kopfzeilen in Folge - das meldet die Abnahme zu Recht. */

.ablauf-raster {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--s8);
}
.ablauf-raster__kopf { display: grid; gap: var(--s5); align-content: start; }
@media (min-width: 1024px) {
  .ablauf-raster__kopf { position: sticky; top: calc(var(--kopf) + var(--s6)); }
}
@media (max-width: 900px) {
  .ablauf-raster { grid-template-columns: 1fr; gap: var(--s6); }
}
/* --- Ablauf als Zeitstrahl ------------------------------------------- */

.ablauf { list-style: none; margin: 0; padding: 0; position: relative; }
.ablauf::before {
  content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px;
  width: 1px; background: var(--kante);
}
.ablauf li {
  position: relative; padding-left: var(--s8); padding-block: var(--s5);
}
.ablauf li::before {
  content: ""; position: absolute; left: 4px; top: calc(var(--s5) + .45rem);
  width: 15px; height: 15px; background: var(--nacht);
  border: 2px solid var(--signal); transform: rotate(45deg);
}
.ablauf h3 { margin-bottom: var(--s2); }
.ablauf p { color: var(--text-leise); margin: 0; max-width: 56ch; }

/* --- Vorteile: zweispaltig, mit Linien statt Kästen ------------------ */

.vorteile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  column-gap: var(--s8);
}
.vorteil {
  padding-block: var(--s6); border-top: 1px solid var(--kante);
}
/* Drei Werte (/ueber-uns) in einer Reihe, zentriert, ueber jedem eine
   gelbe Kachel mit rotem Symbol - Rot auf Gelb wie Logo und
   Ziffernkacheln. Gewaehlt am 07.10.2026 aus sechs Entwuerfen: Aufbau der
   "Siegel" (zentriert, ohne Linien), aber eckig wie die "Icon-Kacheln".
   Das traegt nur, weil die Texte etwa gleich lang sind (WERTE in
   inhalte.py) - gemessen: Titel je eine Zeile, Texte je drei Zeilen von
   1024 bis 1920 px und auf dem Handy. Zwischen 900 und 1199 px
   schmalerer Spaltenabstand, sonst laeuft dort der dritte Text auf vier
   Zeilen. Unter 900 px untereinander, ebenfalls zentriert. */
.vorteile--drei .vorteil { border-top: 0; text-align: center; padding-block: var(--s5); }
.vorteile--drei .vorteil p { max-width: 34ch; margin-inline: auto; }
.wert__zeichen {
  display: grid; place-items: center; width: 64px; height: 64px;
  margin: 0 auto var(--s5); background: var(--signal); color: var(--aktion);
}
.wert__zeichen svg { width: 34px; height: 34px; }
@media (min-width: 900px) {
  .vorteile--drei { grid-template-columns: repeat(3, 1fr); column-gap: var(--s7); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .vorteile--drei { column-gap: var(--s6); }
}
.vorteil h3 { margin-bottom: var(--s3); }
.vorteil p { color: var(--text-leise); margin: 0; }

/* --- Mietpark-Tabelle ------------------------------------------------ */

/* position: relative ist Pflicht, nicht Zierde: Ohne Bezugskasten
   klippte der Rahmen die absolut positionierte, unsichtbare
   Spaltenueberschrift (.nur-sr "Anfrage") nicht. Sie lag bei x = 657 und
   machte /leistungen auf dem Handy 673 px breit - die Seite wackelte
   seitlich bzw. wurde verkleinert angezeigt (gefunden 07.10.2026). */
.tabelle-rahmen {
  position: relative;
  overflow-x: auto; border: 1px solid var(--kante);
  -webkit-overflow-scrolling: touch;
}
table.kranliste { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.kranliste caption {
  text-align: left; padding: var(--s4) var(--s5);
  color: var(--text-still); font-size: .85rem;
  border-bottom: 1px solid var(--kante);
}
table.kranliste th, table.kranliste td {
  padding: var(--s3) var(--s5); text-align: left;
  border-bottom: 1px solid var(--kante);
}
table.kranliste thead th {
  background: var(--stahl-hell); font-family: var(--display);
  font-weight: 500; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-leise);
  vertical-align: bottom; line-height: 1.3; min-width: 7em;
}
table.kranliste tbody tr:hover { background: rgba(253,217,0,.04); }
table.kranliste tbody tr:last-child td { border-bottom: 0; }
table.kranliste td:first-child {
  font-family: var(--display); font-weight: 500; letter-spacing: .02em;
  white-space: nowrap; color: var(--text);
}
table.kranliste td.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-leise); }
.kranliste__anfrage {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--s3); margin-inline: calc(var(--s3) * -1);
  font-family: var(--display); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
}

.mietpark__gruppe { margin-bottom: var(--s8); }
.mietpark__gruppe:last-child { margin-bottom: 0; }
.mietpark__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4);
  margin-bottom: var(--s5);
}
.mietpark__kopf h3 { margin: 0; }
.mietpark__anzahl {
  font-size: .85rem; color: var(--text-still);
  font-family: var(--display); letter-spacing: .1em;
}

/* --- Aktionsband ----------------------------------------------------- */

.band {
  position: relative; overflow: hidden;
  background: var(--signal); color: var(--nacht);
}
.band--dunkel { background: var(--signal); color: var(--nacht); }
.band--alarm { background: var(--alarm); color: #fff; }
.band__innen {
  display: grid; grid-template-columns: 1.4fr auto; gap: var(--s7);
  align-items: center; padding-block: var(--s8);
}
@media (max-width: 860px) { .band__innen { grid-template-columns: 1fr; } }
.band h2 { margin-bottom: var(--s4); }
.band p { margin: 0; max-width: 54ch; opacity: .85; }
.band__aktion { display: grid; gap: var(--s3); justify-items: stretch; }
.band .knopf--signal { background: var(--nacht); color: var(--signal); }
.band .knopf--signal:hover { background: #fff; color: var(--nacht); }
.band .knopf--rand { border-color: rgba(10,12,15,.3); color: var(--nacht); }
.band .knopf--rand:hover { border-color: var(--nacht); color: var(--nacht); }
/* --dunkel ist ein Name aus einer frueheren Fassung: der Grund ist GELB,
   identisch mit .band. Die Regeln setzten den Umrissknopf trotzdem auf
   helle Schrift - 1,26:1 auf Gelb, auf /ueber-uns praktisch unlesbar.
   Gefunden erst, nachdem die Entdopplung in tools/layout_messen.js den
   Untergrund mitfuehrt; vorher galt derselbe Knopf von einer dunklen
   Flaeche her als schon geprueft (06.10.2026). */
.band--dunkel .knopf--signal { background: var(--nacht); color: var(--signal); }
.band--dunkel .knopf--rand { border-color: rgba(10,12,15,.3); color: var(--nacht); }
.band--dunkel .knopf--rand:hover { border-color: var(--nacht); color: var(--nacht); }
.band--alarm .knopf--signal { background: #fff; color: var(--alarm); }
.band--alarm .knopf--rand { border-color: rgba(255,255,255,.45); color: #fff; }

/* Rotes Band. Entstanden, weil das gelbe Band direkt auf einen hellen
   Abschnitt traf: 1,28:1 - weder nahtlos noch deutlich, die Layoutpruefung
   hat es gemeldet. Rot steht 4,54:1 gegen die helle Flaeche davor und
   3,99:1 gegen die dunkle danach, Weiss darauf 4,91:1. */
/* Dunkles Band mit gelbem Akzent.
   Erster Versuch war eine vollflaechig rote Flaeche - zu wuchtig. Zweiter
   Versuch hatte roten Akzent und roten Knopf - damit war derselbe
   Anruf-Knopf oben gelb und hier rot.
   GELB ist die einzige Aktionsfarbe. Gegen den Seitengrund steht Gelb bei
   14,08:1, Rot bei 3,99:1 - Gelb ist dreieinhalbmal auffaelliger und
   stammt aus dem Logo. Rot bleibt dem Stoerungsfall vorbehalten; waere es
   zugleich die allgemeine Aktionsfarbe, verlore der Stoerungsanker
   (Stoerer im Hero der Startseite, Alarmband auf /kontakt) seine
   Bedeutung.
   Kanten: helle Flaeche davor gegen den dunklen Grund 18,08:1 - deutlich.
   Dahinter folgt dieselbe dunkle Flaeche, also nahtlos (1,00). */
.band--aktion {
  background: var(--nacht); color: var(--text);
  border-top: 3px solid var(--signal);
}
.band--aktion h2 { color: var(--text); }
.band--aktion p { color: var(--text-leise); opacity: 1; }
.band--aktion .knopf--signal { background: var(--signal); color: var(--nacht); }
.band--aktion .knopf--signal:hover { background: #fff; color: var(--nacht); }
.band--aktion .knopf--rand { border-color: var(--kante-hell); color: var(--text); }
.band--aktion .knopf--rand:hover { border-color: var(--signal); color: var(--signal); }
.band--aktion .band__nummer a { color: var(--signal); }
.band__nummer {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  letter-spacing: .02em; text-align: center;
}
.band__nummer a { color: inherit; text-decoration: none; }

/* --- Seitenkopf der Unterseiten -------------------------------------- */

.seitenkopf {
  position: relative; border-bottom: 1px solid var(--kante);
  background: var(--nacht);
}
.seitenkopf__innen {
  min-height: 24rem; padding-block: var(--s8);
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 1024px) { .seitenkopf__innen { min-height: 30rem; } }
.seitenkopf h1 { max-width: 20ch; }
/* Hervorhebung wie im Hero der Startseite: gelb, aber im Fluss (kein
   eigener Block) - auf /karriere die Stelle "Kranmonteur (m/w/d)". */
.seitenkopf h1 em { font-style: normal; color: var(--signal); }
/* Signalwoerter in Abschnittsueberschriften (07.10.2026: "35 Krane",
   "vier Schritten", "Drei Dinge", "ohne Erfahrung", "Anruf").
   Hoechstens eines je Ueberschrift und nur, wo eines steckt - Zahl,
   Versprechen, Suchwort. Farbe nach dem Grund: Gelb auf Dunkel, Rot auf
   Hell (Gelb haette dort 1,28:1). Alles grosse Schrift (ab 24 px), Soll
   3,0. Auf dem roten Stoerungsband KEIN Signalwort - "ausgefallen" in Gelb
   biss sich mit dem Rot und ist wieder weiss. */
h2 em { font-style: normal; color: var(--signal); }
.abschnitt--hell h2 em { color: var(--aktion); }
/* Firmenname als Logotafel (/ueber-uns): die schraege gelbe Tafel mit der
   roten Schrift, aus der Logovorlage nachgezeichnet (tools/logotafel.py).
   Erster Versuch war Oswald in einem gelben Kasten - nur angedeutet, das
   Logo hat eine breite, fette, kursive Schrift und eine schraege Tafel.
   Groesse: Tafel 1.05em hoch; die Schrift fuellt 84 von 117 Einheiten,
   ihre Grundlinie liegt 17 Einheiten ueber der Unterkante. vertical-align
   -.153em (= 17/117 x 1.05em) stellt sie auf die Grundlinie der Zeile.
   Rot auf Gelb 3,53:1 genuegt fuer grosse Schrift - die Buchstaben sind
   auch auf dem Handy rund 30 px hoch.
   margin-top: ohne ihn hing die Tafel mit ihren Oesen 3,3-6,1 px unter der
   Grundlinie der Zeile darueber; .08em schiebt die Zeile entsprechend
   tiefer. */
.logotafel { white-space: nowrap; }
.logotafel svg {
  display: inline-block; height: 1.05em; width: auto;
  aspect-ratio: 644.1 / 117; vertical-align: -.153em; margin-top: .08em;
}
.logotafel .t { fill: var(--signal); }
.logotafel .s { fill: var(--aktion); }
.logotafel .o { fill: #1d1d1b; }
.logotafel .g { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.seitenkopf__lead {
  font-size: 1.15rem; color: var(--text-leise);
  max-width: var(--breite-eng); margin: 0 0 var(--s7);
}
.krume {
  font-family: var(--display); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-still); margin-bottom: var(--s5);
}
.krume ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; padding: 0; }
.krume a { color: var(--text-still); text-decoration: none; }
.krume a:hover { color: var(--signal); }
.krume li + li::before { content: "/"; margin-right: var(--s3); opacity: .5; }
.krume [aria-current] { color: var(--text-leise); }

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

.formular { display: grid; gap: var(--s5); }
.feld { display: grid; gap: var(--s2); }
.feld label {
  font-family: var(--display); font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise);
}
.feld .pflicht { color: var(--signal); }
.feld input, .feld textarea, .feld select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--nacht); border: 1px solid var(--kante-hell);
  padding: var(--s3) var(--s4); min-height: 52px; border-radius: 0;
}
.feld textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--signal); outline: none;
  box-shadow: inset 0 0 0 1px var(--signal);
}
.feld input[type="file"] { min-height: 52px; padding: var(--s3) var(--s4); cursor: pointer; }
.feld input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: var(--s4);
  min-height: 36px; padding: 0 var(--s4); cursor: pointer;
  border: 1px solid var(--kante-hell); background: var(--stahl-hell); color: var(--text);
}
.feld__hinweis { font-size: .86rem; color: var(--text-still);
                 max-width: var(--breite-eng); }
.feld__fehler { font-size: .86rem; color: var(--alarm); font-weight: 600; display: none; }
.feld--fehler input, .feld--fehler textarea, .feld--fehler select { border-color: var(--alarm); }
.feld--fehler .feld__fehler { display: block; }

.feld-paar { display: grid; gap: var(--s5); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .feld-paar { grid-template-columns: 1fr; } }

.einwilligung { display: grid; grid-template-columns: 22px 1fr; gap: var(--s4); align-items: start; }
.einwilligung input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; accent-color: var(--signal); }
.einwilligung label {
  font-family: var(--text-schrift); font-size: .9rem; text-transform: none;
  letter-spacing: 0; color: var(--text-leise); line-height: 1.55; font-weight: 400;
}

.assistent__fortschritt {
  display: flex; gap: var(--s3); align-items: center;
  font-family: var(--display); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-still); margin-bottom: var(--s5);
}
.assistent__punkt { width: 20px; height: 2px; background: var(--kante-hell); }
.assistent__punkt--aktiv { background: var(--signal); }

.wahl { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.wahl__knopf {
  display: flex; align-items: center; text-align: left;
  background: var(--nacht); border: 1px solid var(--kante-hell);
  padding: var(--s4); cursor: pointer; min-height: 60px;
  font: inherit; color: var(--text);
  font-family: var(--display); font-size: .95rem; letter-spacing: .02em;
  transition: all .16s var(--takt);
}
.wahl__knopf:hover { border-color: var(--signal); color: var(--signal); }
.wahl__knopf[aria-pressed="true"] { background: var(--signal); color: var(--nacht); border-color: var(--signal); }

.formular__rueck {
  background: none; border: 0; padding: var(--s2) 0; cursor: pointer;
  font-family: var(--display); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-still);
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
}
.formular__rueck:hover { color: var(--signal); }
.formular__rueck svg { width: 14px; height: 14px; }

.hinweiskasten {
  border-left: 2px solid var(--signal); background: rgba(253,217,0,.05);
  padding: var(--s4) var(--s5); margin-block: var(--s5);
}
.hinweiskasten p { margin: 0; font-size: .95rem; max-width: var(--breite-eng); }

.meldung { padding: var(--s4) var(--s5); font-weight: 600; display: none; font-size: .95rem; }
.meldung--sichtbar { display: block; }
.meldung--gut { background: rgba(253,217,0,.1); color: var(--signal); border-left: 2px solid var(--signal); }
.meldung--schlecht { background: var(--alarm-grund); color: #ff8780; border-left: 2px solid var(--alarm); }

.formular-kasten {
  background: var(--stahl); border: 1px solid var(--kante); padding: var(--s7);
}
@media (max-width: 620px) { .formular-kasten { padding: var(--s5); } }

/* --- Pop-up ---------------------------------------------------------- */

.popup { position: fixed; inset: 0; z-index: 160; display: none; }
.popup--offen { display: block; }
.popup__grund { position: absolute; inset: 0; background: rgba(5,6,8,.8); backdrop-filter: blur(4px); }
.popup__fenster {
  position: relative; z-index: 1; background: var(--stahl);
  border: 1px solid var(--kante);
  width: min(680px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem);
  overflow-y: auto; margin: var(--s6) auto; padding: var(--s7);
}
@media (max-width: 620px) { .popup__fenster { padding: var(--s5); margin: var(--s4) auto; } }
.popup__zu {
  position: absolute; top: var(--s4); right: var(--s4);
  width: 44px; height: 44px; background: none; cursor: pointer;
  border: 1px solid var(--kante-hell); color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.popup__zu:hover { border-color: var(--signal); color: var(--signal); }
.popup__zu svg { width: 18px; height: 18px; }
body.popup-offen { overflow: hidden; }

/* --- Schwebende Aktion und Mobilleiste ------------------------------- */

.schwebend {
  position: fixed; right: var(--s6); bottom: var(--s6); z-index: 90;
  display: flex; flex-direction: column; gap: var(--s3); align-items: flex-end;
}
.schwebend__knopf {
  display: inline-flex; align-items: center; gap: var(--s3);
  background: var(--signal); color: var(--nacht); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: .92rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: var(--s3) var(--s5); min-height: 52px; border: 0; cursor: pointer;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.9);
}
.schwebend__knopf:hover { background: #fff; color: var(--nacht); }
.schwebend__knopf svg { width: 19px; height: 19px; }
.schwebend__knopf--whatsapp { background: #25d366; color: #05321a; }
.schwebend__knopf--whatsapp:hover { background: #fff; color: #05321a; }
@media (max-width: 1239px) { .schwebend { display: none; } }

.mobilleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; background: var(--stahl);
  border-top: 1px solid var(--kante);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  gap: var(--s2);
}
.mobilleiste a, .mobilleiste button {
  flex: 1; display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; min-height: 54px; border: 0;
  background: none; font-family: var(--display); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-leise); text-decoration: none; cursor: pointer; padding: var(--s2);
}
.mobilleiste a:first-child { background: var(--signal); color: var(--nacht); }
.mobilleiste svg { width: 19px; height: 19px; }
@media (max-width: 1239px) {
  .mobilleiste { display: flex; }
  body { padding-bottom: 92px; }
}

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

.kontakt-raster { display: grid; gap: var(--s8); grid-template-columns: 1fr 1.1fr; align-items: start; }
/* "Wer wir sind": Text direkt neben dem Foto, ohne Abstand ueber dem
   ersten Absatz. */
.betrieb p:first-child { margin-top: 0; }
/* Ohne Foto (Partner: "Autokran ist andere Firma") steht der Text allein. */
.betrieb--text { max-width: 68ch; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } }

.kontaktliste { list-style: none; margin: 0 0 var(--s7); padding: 0; display: grid; }
.kontaktliste li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s4);
  padding-block: var(--s5); border-top: 1px solid var(--kante); align-items: start;
}
.kontaktliste li svg { width: 20px; height: 20px; color: var(--signal); margin-top: 4px; }
.kontaktliste dt {
  font-family: var(--display); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-still); margin-bottom: var(--s1);
}
.kontaktliste dd { margin: 0; font-size: 1.1rem; font-family: var(--display); font-weight: 500; }
.kontaktliste dd a { text-decoration: none; }
.kontaktliste__klein {
  font-family: var(--text-schrift); font-size: .88rem;
  color: var(--text-still); font-weight: 400;
}

/* --- Benefits / Gruppenlisten ---------------------------------------- */



/* --- FAQ ------------------------------------------------------------- */

.faq { display: grid; max-width: 900px; border-top: 1px solid var(--kante); }
.faq details { border-bottom: 1px solid var(--kante); }
.faq summary {
  cursor: pointer; padding: var(--s5) 0; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  font-family: var(--display); font-size: 1.1rem; font-weight: 500;
  min-height: 60px; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 12px; height: 2px; background: var(--signal);
  position: relative; transition: transform .2s var(--takt);
}
.faq summary::before {
  content: ""; position: absolute; right: 5px; width: 2px; height: 12px;
  background: var(--signal); transition: opacity .2s var(--takt);
}
.faq details[open] summary::before { opacity: 0; }
.faq summary:hover { color: var(--signal); }
.faq__text { padding: 0 0 var(--s5); color: var(--text-leise); max-width: var(--breite-eng); }

/* --- Rechtstexte ----------------------------------------------------- */

.rechtstext { max-width: var(--breite-eng); }
.rechtstext h2 { font-size: 1.4rem; margin-top: var(--s7); }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin-top: var(--s5); }
.rechtstext p, .rechtstext li { color: var(--text-leise); }
.rechtstext ul { padding-left: var(--s5); display: grid; gap: var(--s2); }
.rechtstext address { font-style: normal; }

/* --- Fuß ------------------------------------------------------------- */

.fuss { background: var(--stahl); border-top: 1px solid var(--kante); font-size: .94rem; color: var(--text-leise); }
.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--signal); }
.fuss__oben {
  display: grid; gap: var(--s7); padding-block: var(--s8) var(--s7);
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
}
@media (max-width: 900px) { .fuss__oben { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss__oben { grid-template-columns: 1fr; } }
.fuss__logo { height: 48px; width: auto; margin-bottom: var(--s5); }
.fuss h2 {
  font-size: .78rem; letter-spacing: .16em; color: var(--text-still);
  margin-bottom: var(--s5);
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6);
  justify-content: space-between; align-items: center;
  padding-block: var(--s5); border-top: 1px solid var(--kante);
  font-size: .86rem; color: var(--text-still);
}
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: var(--s5); }

/* --- Scroll-Enthüllung: dezent, nie blockierend ---------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-auf] {
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s var(--takt), transform .55s var(--takt);
  }
  [data-auf].ist-da { opacity: 1; transform: none; }
}

/* --- Einstiegskacheln unter dem Hero --------------------------------
   Drei Wege in die Seite, bevor der Kranfinder kommt. Keine gerundeten
   Karten wie in den bestehenden Fassungen: Hier trennen Haarlinien die
   Spalten auf durchgehender Fläche, passend zum übrigen Entwurf.
   Bis 07.10.2026 vier, die vierte rot ("Kran steht still") - seit dem
   Störer im Hero doppelt, deshalb entfallen. Rot arbeitet auf der
   Startseite jetzt nur noch im Störer.
   Drei Spalten bis 761 px, darunter eine: Zwei Spalten ließen bei drei
   Kacheln ein Loch. */
.einstieg {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--kante);
  border-bottom: 1px solid var(--kante);
}
.einstieg__feld {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6) var(--s5) var(--s5);
  border-left: 1px solid var(--kante);
  border-top: 3px solid transparent;
  text-decoration: none; color: inherit;
  transition: background .2s var(--takt), border-top-color .2s var(--takt);
}
.einstieg__feld:first-child { border-left: 0; }
.einstieg__feld:hover { background: rgba(255,255,255,.02); border-top-color: var(--signal); }
.einstieg__titel { margin: 0; font-size: 1.22rem; }
.einstieg__text {
  color: var(--text-leise); font-size: .95rem; margin: 0; flex: 1;
}
.einstieg__mehr {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3); font-family: var(--display); font-size: .84rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--signal);
  min-height: 44px;
}
.einstieg__mehr svg { width: 14px; height: 14px; transition: transform .18s var(--takt); }
.einstieg__feld:hover .einstieg__mehr svg { transform: translateX(4px); }

@media (max-width: 760px) {
  .einstieg { grid-template-columns: 1fr; }
  .einstieg__feld { border-left: 0; }
  .einstieg__feld:nth-child(n+2) { box-shadow: 0 -1px 0 var(--kante); }
}

/* Sitzt direkt unter dem Hero - oben knapper, damit die Kacheln als
   Fortsetzung des Heros lesen und nicht als eigener Block. */
.abschnitt--einstieg { padding-top: var(--s6); }

/* === Helle Abschnitte ================================================
   Zwei bis drei Flächenwechsel brechen den durchgehenden schwarzen Lauf.
   Auf hellem Grund trägt Gelb nicht (1,28:1) - dort führt Rot (4,54:1).
   Alles, was auf dunklem Grund Gelb ist, wird hier auf Rot gedreht. */
.abschnitt--hell {
  background: var(--hell);
  color: var(--hell-text);
  border-top: 1px solid var(--hell-linie);
  border-bottom: 1px solid var(--hell-linie);
}
.abschnitt--hell h1, .abschnitt--hell h2,
.abschnitt--hell h3, .abschnitt--hell h4 { color: var(--hell-text); }
.abschnitt--hell p,
.abschnitt--hell li,
.abschnitt--hell dd { color: var(--hell-leise); }
.abschnitt--hell .kopfzeile p { color: var(--hell-leise); }
/* Nach der Regel fuer Einleitungstexte UND mit hoeherer Spezifitaet: die
   Marke ist selbst ein <p>, und `.abschnitt--hell .kopfzeile p` (0,2,1)
   hat die fruehere Fassung `.abschnitt--hell .kopfzeile__marke` (0,2,0)
   ueberstimmt - die Marken waren auf hellem Grund grau statt rot
   (gemessen 06.10.2026, Startseite "Leistungen" und alle vier auf
   /karriere). Die Kontrastpruefung meldet das nicht, Grau auf Hell ist
   lesbar; es war ein Stilbruch. */
.abschnitt--hell .kopfzeile__marke,
.abschnitt--hell .kopfzeile .kopfzeile__marke { color: var(--aktion); }
.abschnitt--hell .kopfzeile__marke::after { background: var(--hell-linie); }


.abschnitt--hell .leistungsliste { border-top-color: var(--hell-linie); }
.abschnitt--hell .leistung { border-bottom-color: var(--hell-linie); }
.abschnitt--hell .leistung:hover { background: rgba(10,12,15,.025); }
/* Rot auf Gelb wie die Aufgabenziffern. Dafuer GROSS: bei 16 px stuende
   Rot auf Gelb mit 3,53:1 unter der Schwelle fuer kleine Schrift (4,5);
   ab 24 px gilt die Schwelle fuer grosse Schrift (3,0).
   Innenabstand wie .kennzahl__wert, Begruendung dort. Kein Buchstaben-
   abstand: Die .1em aus der dunklen Fassung hingen auch HINTER der
   letzten Ziffer - rechts 2,6 px mehr Luft als links (gemessen
   07.10.2026, tools/tinte_messen.py). */
.abschnitt--hell .leistung__nr {
  color: var(--aktion); background: var(--signal);
  font-size: 1.6rem; font-weight: 600; line-height: 1; letter-spacing: 0;
  justify-self: start; padding: .14em .28em .2em;
  /* Auf Hoehe der ersten Titelzeile, Mitte Ziffern = Mitte Versalien.
     Vorher stand die Kachel auf der Startseite mittig in der ganzen Zeile
     (.leistung--knapp, align-items: center) und damit 27-41 px unter der
     Titelmitte, auf dem Handy 41-55 px; auf /leistungen 4 px.
     Rechnung: halbe Titelzeile (1.2 / 2) plus der Versatz der Versalien
     unter die Zeilenmitte (.0255em), minus halbe Kachelhoehe (1.34em / 2,
     in der Kachelschrift). */
  align-self: start;
  margin-top: calc(var(--h3-gr) * .6255 - .67em);
}
/* Einspaltig (/leistungen bis 560 px) steht die Kachel UEBER dem Titel -
   kein Ausrichten. Die knappe Liste der Startseite bleibt zweispaltig und
   behaelt die Ausrichtung. Steht bewusst HIER, hinter der Grundregel. */
@media (max-width: 560px) {
  .abschnitt--hell .leistung:not(.leistung--knapp) .leistung__nr { margin-top: 0; }
}
.abschnitt--hell .leistung__text h3 { color: var(--hell-text); }
.abschnitt--hell .leistung__text p { color: var(--hell-leise); }
.abschnitt--hell .leistung__mehr { color: var(--aktion); }
.abschnitt--hell .leistung__punkte { color: var(--hell-leise); }


.abschnitt--hell .vorteil h3 { color: var(--hell-text); }
.abschnitt--hell .vorteil p { color: var(--hell-leise); }

.abschnitt--hell details { border-bottom-color: var(--hell-linie); }
.abschnitt--hell summary { color: var(--hell-text); }
.abschnitt--hell summary:hover { color: var(--aktion); }
.abschnitt--hell .faq__text p { color: var(--hell-leise); }

.abschnitt--hell .knopf--rand { border-color: var(--hell-rand); color: var(--hell-text); }
.abschnitt--hell .knopf--rand:hover { border-color: var(--aktion); color: var(--aktion); }
.abschnitt--hell .knopf--signal { background: var(--aktion); color: #fff; }
.abschnitt--hell .knopf--signal:hover { background: var(--aktion-tief); }

/* Die Maßleiste ist ein helles Strichmuster - auf hellem Grund unsichtbar. */
.abschnitt--hell .massleiste { display: none; }

/* === Gebrochene Kanten ============================================== */
.knopf, .schwebend__knopf, .einstieg__feld,
.feld input, .feld textarea, .feld select,
.blase, .meldung { border-radius: var(--radius); }

/* --- Lange Kranlisten kürzen ----------------------------------------
   Die Zeilen ab der sechsten verschwinden NUR, wenn das Skript die Gruppe
   als gekürzt markiert hat. Ohne Skript steht die vollständige Tabelle
   da — die technischen Daten sind der Zweck dieser Seite. */
.mietpark__gruppe.ist-gekuerzt .kranliste__weitere { display: none; }
.kranliste__mehr {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4); min-height: 44px; padding-inline: var(--s5);
  background: none; border: 1px solid var(--kante-hell); border-radius: var(--radius);
  color: var(--text); font-family: var(--display); font-size: .86rem;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: border-color .2s var(--takt), color .2s var(--takt);
}
.kranliste__mehr:hover { border-color: var(--signal); color: var(--signal); }
.abschnitt--hell .kranliste__mehr { border-color: var(--hell-rand); color: var(--hell-text); }
.abschnitt--hell .kranliste__mehr:hover { border-color: var(--aktion); color: var(--aktion); }

/* === Benefits als Bento-Raster =======================================
   Vorbild ist das Raster der Benefit-Flow-Fassung: unterschiedlich grosse
   Kacheln statt sechs gleich lauter Listen. Die FORMENSPRACHE ist aber
   diese hier — scharfe Kanten, Haarlinien, Gelb — nicht die runde,
   cyanfarbene mit Leuchtverläufen. Übernommen ist die Gewichtung, nicht
   das Aussehen. */
.bento {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--kante);
  border: 1px solid var(--kante);
}
.bento__kachel {
  display: flex; flex-direction: column;
  padding: var(--s5); background: var(--nacht);
}
.bento__kachel.breit { grid-column: span 2; }
.bento__kachel.voll { grid-column: 1 / -1; }
.bento__kachel.voll .bento__punkte {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  column-gap: var(--s6);
}
/* Abstandsraster in der Kachel: Titel -> Zahl 16 px, Zahl -> Beschriftung
   12 px (gehoeren zusammen), Beschriftung -> Rest 24 px. */
.bento__kachel h3 { margin: 0 0 var(--s4); }

.bento__lead {
  color: var(--text-leise); font-size: .93rem; margin: 0 0 var(--s4);
  max-width: 46ch;
}
/* Die Zahl traegt die Kachel - Aussehen kommt aus ".kennzahl".
   Spezifitaet (0,2,0): ".kennzahl { margin: 0 }" steht weiter hinten und
   hob mit gleicher Spezifitaet den Abstand auf - die Beschriftung klebte
   am ersten Punkt. */
.kennzahl.bento__zahl { margin-bottom: var(--s5); }
.bento__punkte {
  list-style: none; margin: 0 0 auto; padding: 0; display: grid; gap: var(--s3);
  font-size: .93rem; color: var(--text-leise);
}


@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__kachel.breit { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento__kachel.breit { grid-column: span 1; }
}

/* === Karriereseite: Stellenblöcke ====================================
   Jeder Block bekommt eine eigene Form statt derselben Hakenliste. Alle
   stehen auf dem hellen Abschnitt — dort trägt Gelb nicht (1,28:1),
   Akzente sind deshalb rot (4,54:1), Trenner sind Haarlinien.
   Farbregeln hängen bewusst an `.abschnitt--hell`: dessen allgemeine
   Regeln für p und li hätten sie sonst überstimmt. */
.abschnitt--hell .stelle__block { margin-bottom: var(--s9); }
.abschnitt--hell .stelle__block:last-child { margin-bottom: 0; }
.abschnitt--hell .stelle__block .kopfzeile { margin-bottom: var(--s6); }

/* --- Aufgaben: nummerierte Kacheln --- */
.aufgaben {
  list-style: none; margin: 0; padding: 0;
  /* Vier Aufgaben seit 12.10.2026 (Partner: Punkt 2 raus) - vorher fuenf. */
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--hell-linie); border: 1px solid var(--hell-linie);
}
.abschnitt--hell .aufgaben li {
  background: var(--hell); padding: var(--s5);
  display: grid; gap: var(--s4); align-content: start;
}
/* Rot auf Gelb wie im Logo. 3,53:1 genuegt nur fuer GROSSE Schrift
   (Soll 3,0 ab 24 px) - 2.2rem = 35 px erfuellt das.
   Innenabstand wie .kennzahl__wert, Begruendung dort. */
.aufgaben__nr {
  font-family: var(--display); font-weight: 600; font-size: 2.2rem;
  line-height: 1; color: var(--aktion); background: var(--signal);
  justify-self: start; padding: .14em .28em .2em;
}
/* Textbreite begrenzt: zwischen 641 und 1100 px spannt die erste Kachel
   zwei Spalten, dort liefen Zeilen auf rund 120 Zeichen (Layoutpruefung,
   Schwelle 92). */
.abschnitt--hell .aufgaben p { margin: 0; color: var(--hell-text); font-size: .98rem; max-width: 62ch; }
/* Vier Kacheln: darunter zwei Paare, auf dem Handy untereinander. (Bei fuenf
   spannte die erste Kachel zwei Spalten, damit keine Zelle leer blieb.) */
@media (max-width: 1100px) {
  .aufgaben { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aufgaben { grid-template-columns: 1fr; }
}

/* --- Aufteilung: Balken aus der belegten Verhältniszahl --- */
.aufteilung { margin-top: var(--s6); max-width: 46rem; }
/* Gelb und Rot wie im Logo; Rot steht fuer Reparatur - die Bedeutung,
   die Rot auf der ganzen Seite hat. Die dunkle Kontur traegt den Balken
   gegen den hellen Grund (Gelb allein: 1,28:1). */
.aufteilung__balken { display: flex; height: 14px; outline: 1px solid var(--hell-text); }
.aufteilung__teil { flex: 0 0 calc(var(--anteil) * 1%); }
.aufteilung__teil:first-child { background: var(--signal); }
.aufteilung__teil + .aufteilung__teil { background: var(--aktion); }
.abschnitt--hell .aufteilung__legende {
  display: flex; justify-content: space-between; gap: var(--s4);
  margin: var(--s3) 0 0; font-family: var(--display); font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--hell-text);
}
/* Kleine Schrift: auf Gelb dunkel (14,08:1), auf Rot weiss (4,91:1).
   Rot auf Gelb (3,53:1) waere hier zu schwach.
   Rechts .08em weniger: der Buchstabenabstand der Legende haengt auch
   hinter dem "%". Unten .06em mehr: wie bei .kennzahl__wert sitzt die
   Schrift tief im Kasten. */
.abschnitt--hell .aufteilung__legende b { font-weight: 600; padding: 0 .22em .06em .3em; }
.abschnitt--hell .aufteilung__legende span:first-child b { color: var(--nacht); background: var(--signal); }
.abschnitt--hell .aufteilung__legende span + span b { color: #fff; background: var(--aktion); }
.abschnitt--hell .aufteilung__quelle { margin: var(--s3) 0 0; font-size: .9rem; max-width: 62ch; }

/* --- Berufe: zwei Felder mit Schlagwörtern --- */
.berufswahl {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--hell-linie); border: 1px solid var(--hell-linie);
}
.berufswahl__feld { background: var(--hell); padding: var(--s5); }
.berufswahl__feld h3 { margin: 0 0 var(--s4); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.abschnitt--hell .chips li {
  border: 1px solid var(--hell-rand); border-radius: var(--radius);
  padding: .45rem .8rem; font-size: .93rem; color: var(--hell-text);
}
@media (max-width: 800px) { .berufswahl { grid-template-columns: 1fr; } }

/* --- Anforderungen: Muss und Kann nebeneinander --- */
.anforderungen {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 1px; background: var(--hell-linie); border: 1px solid var(--hell-linie);
}
.anforderungen__feld { background: var(--hell); padding: var(--s5); }
.anforderungen__feld h3 { margin: 0 0 var(--s4); }
.abschnitt--hell .anforderungen__marke {
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--aktion);
  margin: 0 0 var(--s4);
}
.merkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3) var(--s5); }
.merkliste--pflicht { grid-template-columns: 1fr 1fr; }
.abschnitt--hell .merkliste li {
  display: grid; grid-template-columns: 10px 1fr; gap: var(--s3);
  color: var(--hell-text); font-size: .96rem;
}
/* Gefülltes Merkzeichen = Voraussetzung, leeres = kein Muss. */
.merkliste li::before {
  content: ""; width: 10px; height: 10px; margin-top: .55em;
  background: var(--signal); border: 2px solid var(--aktion);
}
.merkliste--kann li::before { background: transparent; }
.abschnitt--hell .anforderungen__extra {
  margin: var(--s5) 0 0; padding: var(--s3) var(--s4);
  border-left: 3px solid var(--aktion); background: rgba(253,217,0,.25);
  font-size: .93rem; color: var(--hell-text);
}
@media (max-width: 900px) {
  .anforderungen { grid-template-columns: 1fr; }
  .merkliste--pflicht { grid-template-columns: 1fr; }
}

/* --- Einarbeitung: große Zahl neben dem Text --- */
/* Spalte 24rem statt 20rem: mit der gelben Kante vor der Zahl brach
   "2 - 6 Monate" in der Probe auf zwei Zeilen um. Zusaetzlich stehen
   feste Leerzeichen im Wert (inhalte.py). */
.einarbeitung {
  display: grid; grid-template-columns: minmax(0, 24rem) 1fr;
  gap: var(--s6); align-items: center; padding: var(--s6);
  border: 1px solid var(--hell-linie); border-top: 6px solid var(--signal);
}
@media (max-width: 420px) { .einarbeitung { padding: var(--s5); } }
.abschnitt--hell .einarbeitung__text { margin: 0; color: var(--hell-text); max-width: 58ch; }
@media (max-width: 700px) { .einarbeitung { grid-template-columns: 1fr; } }


/* === Kennzahl: rote Zahl auf gelbem Feld, wie der Schriftzug im Logo ===
   EIN Bauteil fuer alle grossen Zahlen - "20 - 24 EUR" und "30 Tage" in
   den Benefits (dunkler Grund), "2 - 6 Monate" bei der Einarbeitung
   (heller Grund). Vorher drei verschiedene Gestaltungen: gelbe Schrift,
   rote Schrift mit gelber Kante, rote Schrift ohne alles.
   Rot auf Gelb 3,53:1 - zulaessig, weil der Wert ab 32 px gross ist
   (Soll 3,0 ab 24 px). Die Beschriftung bleibt AUSSERHALB des Feldes und
   in der gedaempften Textfarbe des Grundes. */
.kennzahl { margin: 0; display: grid; justify-items: start; gap: var(--s3); }
.kennzahl__wert {
  font-family: var(--display); font-weight: 600; line-height: 1;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); letter-spacing: -.01em;
  color: var(--aktion); background: var(--signal);
  /* Unten mehr als oben, weil die Schrift die Grossbuchstaben tief im
     Zeilenkasten traegt. Gemessen am 06.10.2026 bei 48 px: mit .14em/.1em
     lagen ueber den Versalien 12,5 px, unter der Grundlinie nur 7,5 px -
     und die Unterlaenge von "g" in "30 Tage" ragte 1,5 px aus dem Feld.
     Mit .2em unten: Versalien oben und unten je rund 12 px, Unterlaengen
     passen hinein. In em, damit es bei 32 px genauso aufgeht.
     Grund: Oswald laesst bei line-height 1 ueber den Ziffern .11em Luft
     in der Zeile, unter der Grundlinie nur .06em. DIESELBE Regel gilt
     seit 07.10.2026 fuer die Ziffernkacheln (.leistung__nr auf hellem
     Grund, .aufgaben__nr) - dort stand der Ausgleich verkehrt herum
     (oben mehr als unten), die Ziffern sassen 1,5-2 px zu tief. */
  padding: .14em .28em .2em;
  /* Nicht umbrechen: nach einem Gedankenstrich darf der Browser auch vor
     einem festen Leerzeichen umbrechen (Unicode-Regel LB12a). */
  white-space: nowrap;
}
.kennzahl__text {
  font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-still);
}
.abschnitt--hell .kennzahl__text { color: var(--hell-leise); }

/* === Aufzaehlungszeichen: gelbes Kaestchen mit rotem Rand ============
   EIN Zeichen fuer alle Aufzaehlungen - Benefits (dunkel), Leistungen
   (hell), Anforderungen (hell). Vorher gelbe Haken, rote Haken und
   Kaestchen nebeneinander. "Kein Muss" bleibt als leeres Kaestchen. */
.bento__punkte li,
.leistung__punkte li { display: grid; grid-template-columns: 10px 1fr; gap: var(--s3); }
.bento__punkte li::before,
.leistung__punkte li::before {
  content: ""; width: 10px; height: 10px; margin-top: .55em;
  background: var(--signal); border: 2px solid var(--aktion);
}

/* === Stoerer: "Stoerung oder Ausfall?" als Aufkleber im Hero ========
   Rund, leicht gedreht, wie ein Aufkleber auf einem Plakat. Rot, weil Rot
   auf der ganzen Seite nur fuer Stoerung steht. Weisse Schrift auf Rot
   4,83:1. Sitzt im Inhaltskasten des Heros, damit die rechte Kante mit dem
   Inhalt fluchtet; oben buendig mit der Kennung. */
.stoerer {
  position: absolute; z-index: 4;
  top: clamp(var(--s5), 4.5vh, var(--s8)); right: var(--s6);   /* = Oberkante .hero__innen */
  width: 190px; height: 190px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; padding: var(--s5);
  background: var(--alarm); color: #fff; text-decoration: none;
  transform: rotate(-9deg);
  box-shadow: 0 0 0 6px rgba(217, 45, 34, .25), 0 14px 34px rgba(0, 0, 0, .4);
  transition: transform .2s var(--takt), background .2s var(--takt);
  animation: stoerer-ein .5s var(--takt) .6s both;
}
.stoerer:hover { background: #c22419; transform: rotate(-6deg) scale(1.04); }
.stoerer:focus-visible { outline: 3px solid var(--signal); outline-offset: 6px; }
/* Ein Wort je Zeile (min-content): STOERUNG / ODER / AUSFALL? - sonst
   brach der Titel je nach Kreisgroesse mal zwei-, mal dreizeilig, und die
   lange Zeile "STOERUNG ODER" reichte im Handy-Kreis bis an den Rand. */
.stoerer b {
  display: block; width: min-content; margin-inline: auto;
  font-family: var(--display); font-weight: 600;
  font-size: 1.45rem; line-height: 1.05; text-transform: uppercase;
}
.stoerer span {
  display: block; margin-top: var(--s2); font-family: var(--display);
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
/* Einblenden: kurz nach dem Laden aufploppen - einmal, ohne Schleife. */
@keyframes stoerer-ein {
  from { opacity: 0; transform: rotate(-9deg) scale(.6); }
  to   { opacity: 1; transform: rotate(-9deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .stoerer { animation: none; transition: none; }
  .stoerer:hover { transform: rotate(-9deg); }
}
/* Handy und schmales Tablet: neben Kennung und Ueberschrift ist kein
   Platz (sie reichen ueber die ganze Breite). Der Aufkleber wird kleiner
   und bekommt oben einen eigenen Streifen; der Inhalt beginnt darunter.
   Gemessen 07.10.2026: die Knoepfe enden bei 390 x 750 trotzdem im ersten
   Bild. Im ersten Entwurf ueberdeckte er dort einen Teil der Ueberschrift.
   128 statt 112 px seit "Stoerung oder Ausfall?": drei Titelzeilen statt
   zwei, im kleinen Kreis reichten die Zeilenecken bis an den Rand. Damit
   die Knoepfe dafuer nicht tiefer rutschen, sitzt er hier hoeher (fester
   Abstand --s5 statt bis zu 7vh). */
@media (max-width: 860px) {
  .stoerer { top: var(--s5); width: 128px; height: 128px; padding: var(--s3); }
  .stoerer b { font-size: 1rem; }
  .stoerer span { font-size: .6rem; margin-top: var(--s1); letter-spacing: .05em; }
  .hero__innen { padding-top: calc(var(--s5) + 128px + var(--s4)); }
}
@media (max-width: 560px) { .stoerer { right: var(--s4); } }

/* === Einsatzgebiet (/ueber-uns): Ringkarte + Zonen als Legende ========
   Gewaehlt am 07.10.2026 aus fuenf Entwuerfen - Kombi aus "Reichweiten-
   Ringe" und "Drei Zonen". Die Ringe sind schematisch (die Quelle nennt
   keine Kilometer), die Legende traegt die Aussagen; jede Zone hat als
   Zeichen denselben Ring wie in der Karte. */
.einsatz {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: var(--s8); align-items: center;
}
.einsatzkarte { width: 100%; height: auto; display: block; }
/* Echte Grenzen (Natural Earth): Deutschland hell, Nachbarn dunkler.
   Der Bodensee in gedecktem Blaugrau - der einzige Ton ausserhalb der
   Palette, damit Wasser als Wasser lesbar ist. */
.einsatzkarte__de { fill: rgba(255, 255, 255, .06); stroke: var(--kante-hell); stroke-width: 1; stroke-linejoin: round; }
.einsatzkarte__nachbar { fill: rgba(0, 0, 0, .22); stroke: var(--kante); stroke-width: .8; stroke-linejoin: round; }
.einsatzkarte__kern { fill: rgba(253, 217, 0, .16); stroke: var(--signal); stroke-width: 1.8; }
.einsatzkarte__see { fill: #2b3946; stroke: #42566a; stroke-width: .8; }
.einsatzkarte__pfeil { fill: none; stroke: var(--kante-hell); stroke-width: 1.6; stroke-dasharray: 3 3; }
/* Ortsnamen in --text-leise, nicht --text-still: auf der aufgehellten
   Deutschlandflaeche (#2c2d30) kam --text-still nur auf 4,44:1. */
.einsatzkarte__punkt { fill: var(--text-leise); }
.einsatzkarte__rahmen { fill: none; stroke: var(--kante); stroke-width: 1; }
.einsatzkarte__ort, .einsatzkarte__seename {
  fill: var(--text-leise); font-family: var(--text-schrift); font-size: 12px;
}
.einsatzkarte__seename { font-size: 10.5px; font-style: italic; fill: #8fa3b6; }
.einsatzkarte__land {
  fill: var(--text-still); font-family: var(--display); font-size: 11px; letter-spacing: .2em;
}
.einsatzkarte__standort { fill: var(--signal); stroke: var(--aktion); stroke-width: 2; }
.einsatzkarte__mitte {
  fill: var(--text); font-family: var(--display); font-weight: 600;
  font-size: 14px; letter-spacing: .06em;
}
.einsatz__zonen { list-style: none; margin: 0; padding: 0; }
.einsatz__zonen li {
  display: grid; grid-template-columns: 28px 1fr; column-gap: var(--s5);
  padding-block: var(--s5); border-top: 1px solid var(--kante);
}
.einsatz__zonen li:last-child { border-bottom: 1px solid var(--kante); }
.einsatz__zeichen { width: 28px; height: 28px; grid-row: 1 / 4; margin-top: .1em; }
.einsatz__zeichen .einsatzkarte__standort { stroke-width: 1.2; }
.einsatz__marke {
  font-family: var(--display); font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--signal);
}
.einsatz__zonen h3 { margin: var(--s2) 0; }
.einsatz__zonen p { margin: 0; color: var(--text-leise); }
@media (max-width: 900px) {
  .einsatz { grid-template-columns: 1fr; gap: var(--s6); }
  .einsatz__karte { max-width: 420px; width: 100%; margin-inline: auto; }
}

/* Kranname -> Datenblatt (Partner 12.10.2026, L4b). */
.kranliste__datenblatt { color: inherit; text-decoration: underline;
  display: inline-flex; align-items: center; min-height: 44px;   /* Tippflaeche */
  text-decoration-color: var(--signal); text-decoration-thickness: 2px;
  text-underline-offset: 4px; }
.kranliste__datenblatt:hover, .kranliste__datenblatt:focus-visible { color: var(--signal); }


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