/* ═══════════════════════════════════════════════════════════════
   ELITE GROUP — Corporate-Report-Design
   Strenges Raster, nummerierte Kapitel, Haarlinien, große Zahlen.
   Weiß trägt, Navy strukturiert, Teal signalisiert (max. ~3 % Fläche).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --navy:var(--brand-navy);
  --navy-2:var(--brand-raised);
  --navy-deep:var(--brand-navy);   /* Derselbe Navy-Ton bis zum Seitenende. */
  --ink:var(--brand-navy);
  --ink-2:var(--brand-muted);
  --ink-3:var(--brand-subtle);

  --bg:var(--brand-white);
  --bg-2:var(--brand-surface);
  --bg-3:var(--brand-surface-deep);
  --rule:var(--brand-line);
  --rule-2:rgba(255,255,255,.16);

  --teal:var(--brand-teal);     /* Flächen und Linien */
  --teal-dk:var(--brand-teal-text);  /* Kontrastreiche Schrift auf hellem Grund. */
  --teal-hi:var(--brand-teal-light);  /* Einheitlicher Akzent auf Navy. */

  /* Text auf dunklen Flächen — Werte unterhalb .55 fallen unter AA */
  --on-dark-1:rgba(255,255,255,.84);
  --on-dark-2:rgba(255,255,255,.70);
  --on-dark-3:rgba(255,255,255,.58);

  --ff-d:"Archivo","Segoe UI",system-ui,sans-serif;
  --ff-t:"Source Sans 3","Segoe UI",system-ui,sans-serif;

  --wrap:1320px;
  --pad:clamp(20px,4.5vw,68px);
  --sec-y:clamp(44px,5.2vw,76px);

  /* ── Typografie-Skala ──
     Acht Stufen statt gewachsener Einzelwerte. Jede Größe hat eine Aufgabe. */
  --t-display:clamp(2.5rem, 5.6vw, 5rem);      /* Hero-Überschrift */
  --t-h1:clamp(2rem, 4.4vw, 3.6rem);           /* Unterseiten-Überschrift */
  --t-h2:clamp(1.75rem, 2.8vw, 2.5rem);        /* Kapitelüberschrift */
  --t-h3:clamp(1.12rem, 1.8vw, 1.5rem);        /* Karten- und Blocktitel */
  --t-lead:clamp(1rem, 1.1vw, 1.12rem);        /* Vorspann */
  --t-body:1rem;                               /* Fließtext */
  --t-sm:0.9375rem;                            /* 15px — Karten, Listen */
  --t-xs:0.8125rem;                            /* 13px — Meta, Hinweise */
  --t-label:0.75rem;                           /* 12px — Versal-Labels */

  /* ── Abstandsskala ──
     Feste Stufen für Innenabstände, fluide Stufen für Sektionen. */
  --s-1:4px;  --s-2:8px;   --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px;  --s-7:48px; --s-8:64px;
  --sp-sm:clamp(18px, 2.2vw, 28px);
  --sp-md:clamp(24px, 3vw, 44px);
  --sp-lg:clamp(34px, 4vw, 64px);
  --sp-xl:clamp(44px, 5.5vw, 88px);

  /* ── Bewegung ──
     Vier Dauern: kurz für Zustandswechsel, lang nur für Scroll-Reveals. */
  --d-fast:.18s;
  --d-base:.32s;
  --d-slow:.55s;
  --d-reveal:.9s;

  /* ── Radien und Schatten ── */
  --r-sm:2px;
  --r-pill:100px;
  --sh-sm:0 2px 8px -4px rgba(var(--brand-navy-rgb),.18);
  --sh-md:0 18px 40px -28px rgba(var(--brand-navy-rgb),.35);
  --sh-lg:0 40px 90px -50px rgba(var(--brand-navy-rgb),.55);
  --ease:cubic-bezier(.22,1,.32,1);
}

/* ── Reset ── */
*,*::before,*::after{ box-sizing:border-box; }
/* Der Dokumentgrund gehört zum Fuß, nicht zur Seite. Beim Überziehen am
   oberen und unteren Rand zeigt das Telefon die Farbe des Wurzelelements —
   vorher erbte sie das Weiß des body, und unter dem dunklen Fuß blitzte
   eine weiße Fläche auf. Jetzt trägt html das Navy des Fußes, body das
   Seitenweiß; body endet mit dem Inhalt, darunter bleibt es dunkel.

   overflow-x:clip ist die Absicherung, nicht die Lösung — die überbreiten
   Elemente selbst sind unten einzeln korrigiert. clip statt hidden, weil
   clip keinen Scrollcontainer anlegt: feste Kopfzeile, position:sticky,
   scroll-padding und die Ankersprünge bleiben unberührt, und es entsteht
   kein waagerechter Scrollweg, an dem sich die Seite ziehen ließe. */
html{
  -webkit-text-size-adjust:100%;
  background:var(--navy-deep);
  overflow-x:hidden;
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-t); font-size:16.5px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased;
  hyphens:manual; -webkit-hyphens:manual;
  text-underline-offset:.18em;
}
/* Trennung nur in breiten Textblöcken. In schmalen Spalten (Raster mit drei
   Spalten, Fußzeile) trennt sie fast in jeder Zeile und zerhackt den Text. */
.lead, .panel p, .join__lead, .faq__body p, .atlas__schluss p,
.comp__txt .lead, .legal p, .legal li, .phero__lead, .jobs p{
  hyphens:auto; -webkit-hyphens:auto;
}
.sectors p, .quality p, .steps p, .pc p, .career p, .ft__brand p,
.feats span, .seals__list span, .cinfo p{
  hyphens:manual; -webkit-hyphens:manual;
}
img{ display:block; max-width:100%; height:auto; }
/* Dieselbe Schranke für alles, was eine eigene Breite mitbringen kann.
   Die Leinwand des Hero wird von JavaScript auf die Containerbreite
   gesetzt; max-width ist das Netz, falls diese Rechnung je danebenliegt. */
canvas, video, iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,figure,dl,dd,dt,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
svg{ display:block; }
::selection{ background:var(--navy); color:var(--brand-white); }

/* Fokus: zwei Ringe, damit er auf hellem und dunklem Grund gleich gut sitzt */
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(var(--brand-teal-rgb),.22);
  border-radius:2px;
}
.sec--dark :focus-visible, .hero :focus-visible, .hd:not(.is-stuck) :focus-visible,
.join :focus-visible, .career :focus-visible, .ft :focus-visible, .dock :focus-visible{
  outline-color:var(--teal-hi);
  box-shadow:0 0 0 5px rgba(var(--brand-teal-light-rgb),.26);
}

/* Nicht mit left:-9999px aus dem Bild schieben: das legt einen Kasten weit
   außerhalb des Viewports an. In der Leserichtung von links nach rechts
   zählt der nicht zur Dokumentbreite, in der umgekehrten schon — und im
   Prüfbericht steht er dauerhaft als Überläufer. Wegschneiden ist
   verlässlicher und kostet nichts. */
.skip{
  position:absolute; left:12px; top:12px; z-index:200;
  width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
  background:var(--navy); color:var(--brand-white); border-radius:4px;
}
.skip:focus{
  width:auto; height:auto; padding:12px 20px;
  overflow:visible; clip-path:none;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
/* Im Querformat liegt die Kamera-Insel über dem linken Rand. max() nimmt
   den größeren der beiden Werte, der Abstand wird also nie kleiner. */
@supports (padding:env(safe-area-inset-left)){
  .wrap{
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
  }
}

/* ── Feinkorn ──
   Große dunkle Flächen wirken sonst flach und digital. Eine kaum sichtbare
   Körnung gibt ihnen Materialität — dasselbe Prinzip wie bei gutem Druck.
   Als Hintergrundebene, damit nichts über den Rand ragen kann. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.sec--dark{ background-image:none; background-blend-mode:soft-light; }
.join, .career{ background-blend-mode:soft-light; }
.ft{ background-image:none; background-blend-mode:soft-light; }
/* Im Hero liegt das Korn über dem Foto, nicht darunter */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:var(--grain);
}

/* ── Formmotiv: gekappte Ecke ──
   Greift die Diagonale aus Hero-Keil und Sektionskante auf und macht die
   handelnden Blöcke als Familie erkennbar. Sparsam einsetzen. */
.cut{
  --cut:clamp(28px,3.4vw,56px);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.cut--tl{
  clip-path:polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}

/* ── Typo ── */
/* Die Gewichte der Überschriftenebenen laufen jetzt zusammen: 500 für die
   Aussage im Hero, 550 für die Kapitel, 600 für Ziffern und kleine Labels.
   Vorher stand hier 600 gegen ein H1 mit 700 — beides wurde von der alten
   Schriftdatei ohnehin gleich fett dargestellt. */
.h2{
  font-family:var(--ff-d); font-weight:550;
  font-size:var(--t-h2);
  line-height:1.12; letter-spacing:-.028em;
  max-width:20ch;
  text-wrap:balance;                 /* keine Einzelwortzeile am Ende */
}
.lead{
  margin-top:18px; max-width:60ch;
  font-size:var(--t-lead); line-height:1.75; color:var(--ink-2);
  text-wrap:pretty;                  /* verhindert Schusterjungen */
}
p{ text-wrap:pretty; }
/* Alle Ziffern laufen tabellarisch — beim Hochzählen springt sonst die Breite */
b, dd, .steps__no, .head__no, .hero__metrics b, .atlas__nr{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:var(--t-label); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2);
}
.eyebrow__ln{ width:38px; height:2px; background:var(--teal); flex:none; }
/* Auf dunklem Grund: die Grundfarbe hätte hier nur 2.9:1 */
.eyebrow--inv{ color:var(--on-dark-1); }
.eyebrow--inv .eyebrow__ln{ background:var(--teal-hi); }

/* ── Kapitelkopf ── */
.head{
  display:grid; grid-template-columns:88px minmax(0,1fr);
  gap:0 clamp(20px,3vw,48px);
  padding-top:26px; border-top:1px solid var(--rule);
  margin-bottom:clamp(38px,5vw,68px);
}
/* Kapitelziffer als eigenständige Marke, nicht als Fußnote */
.head__no{
  position:relative;
  font-family:var(--ff-d); font-weight:600; font-size:clamp(1.6rem,2.4vw,2.2rem);
  line-height:1; letter-spacing:-.03em; color:var(--teal-dk);
  padding-top:4px;
}
.head__no::after{
  content:""; display:block; width:26px; height:2px; margin-top:14px; background:var(--teal);
}
.head--inv{ border-top-color:var(--rule-2); }
.head--inv .head__no{ color:var(--teal-hi); }
.head--inv .lead{ color:var(--on-dark-2); }

/* ── Buttons und Links ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:2px;
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-sm);
  transition:background var(--d-base) ease, color var(--d-base) ease, border-color var(--d-base) ease, transform var(--d-slow) var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--d-slow) var(--ease); }
/* Druckpunkt: der Knopf gibt kurz nach */
.btn:active{ transform:translateY(1px) scale(.994); transition-duration:.06s; }
.btn--sm{ padding:11px 18px; font-size:var(--t-xs); }
.btn--solid{ background:var(--navy); color:var(--brand-white); }
.btn--solid:hover{ background:var(--brand-hover); }
.btn--solid:hover svg{ transform:translateX(4px); }
.btn--line{ border:1px solid var(--rule); color:var(--ink); }
.btn--line:hover{ border-color:var(--navy); background:var(--navy); color:var(--brand-white); }
.sec--dark .btn--solid{ background:var(--brand-teal-light); color:var(--navy); }
.sec--dark .btn--solid:hover{ background:var(--brand-teal-hover); }

/* Auf dem Bild: kräftig gefüllt und Glas */
.btn--accent{ background:var(--brand-teal-light); color:var(--navy); }
.btn--accent:hover{ background:var(--brand-teal-hover); transform:translateY(-2px); }
.btn--accent:hover svg{ transform:translateX(4px); }
.btn--glass{
  color:var(--brand-white); border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(6px); background:rgba(255,255,255,.06);
}
.btn--glass:hover{ background:var(--brand-white); color:var(--navy); border-color:var(--brand-white); }

.link{
  display:inline-flex; align-items:center; gap:9px; margin-top:26px;
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-sm);
  padding-bottom:5px; border-bottom:1px solid var(--rule);
  transition:border-color var(--d-base) ease, color var(--d-base) ease;
}
.link svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--d-slow) var(--ease); }
.link:hover{ color:var(--teal-dk); border-color:var(--teal); }
.link:hover svg{ transform:translateX(4px); }
.link--inv{ color:var(--teal-hi); border-bottom-color:var(--rule-2); margin-top:6px; }
.link--inv:hover{ color:var(--brand-white); border-color:var(--teal-hi); }

/* ═══════════ Kopf ═══════════ */
/* Navy am Seitenanfang, nach dem Scrollen eine klare weiße Fläche. */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:var(--navy);
  border-bottom:1px solid transparent;
  transition:transform var(--d-slow) var(--ease), border-color var(--d-base) ease, background var(--d-base) ease, backdrop-filter var(--d-base) ease;
}
.hd.is-stuck{ background:var(--bg); backdrop-filter:none; }
/* Die feste Navy-Fläche benötigt keine zusätzliche Verlaufsmaske. */
.hd::before{
  content:""; position:absolute; inset:0 0 auto 0; height:190%; z-index:-1;
  background:none;
  transition:opacity var(--d-base) ease; pointer-events:none;display:none;}
.hd.is-stuck::before{ opacity:0; }
.hd__in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:16px var(--pad);
  display:flex; align-items:center; gap:clamp(16px,3vw,52px);
  transition:padding var(--d-base) ease;
}
.hd.is-stuck{ border-bottom-color:var(--rule);background:var(--bg);backdrop-filter:none;}
.hd.is-stuck .hd__in{ padding-block:11px; }
.hd.is-hidden{ transform:translateY(-105%); }

.hd__brand{ flex:none; }
.hd__logo{ height:36px; width:auto; transition:height var(--d-base) ease; }
.hd.is-stuck .hd__logo{ height:30px; }
/* Auf dem Bild das helle Logo, ab dem Scrollen das dunkle */
.hd__logo--dark{ display:none; }
.hd.is-stuck .hd__logo--dark{ display:block; }
.hd.is-stuck .hd__logo--light{ display:none; }

.hd__nav{ display:flex; gap:clamp(14px,2.2vw,34px); margin-left:auto; }
.hd__nav a{
  position:relative; display:block; white-space:nowrap;   /* nie umbrechen oder trennen */
  padding:8px 0; font-size:var(--t-sm); font-weight:500; color:var(--on-dark-1);
  transition:color var(--d-base) ease;
}
.hd.is-stuck .hd__nav a{ color:var(--ink-2); }
.hd__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px;
  background:var(--teal); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-slow) var(--ease);
}
.hd__nav a:hover{ color:var(--brand-white); }
.hd.is-stuck .hd__nav a:hover{ color:var(--ink); }
.hd__nav a:hover::after{ transform:scaleX(1); }
/* Scrollspy: das Kapitel, in dem der Leser gerade steht */
.hd__nav a.is-active{ color:var(--brand-white); }
.hd.is-stuck .hd__nav a.is-active{ color:var(--ink); }
.hd__nav a.is-active::after{ transform:scaleX(1); }

.hd__act{ display:flex; align-items:center; gap:clamp(10px,1.5vw,22px); }
/* Trefferflächen mindestens 24 px hoch (WCAG 2.5.8) */
.hd__tel{ display:flex; align-items:center; gap:8px; padding-block:6px; font-size:var(--t-xs); font-weight:500; color:var(--on-dark-1); transition:color var(--d-base) ease; }
.hd.is-stuck .hd__tel{ color:var(--ink-2); }
.hd__tel span{ white-space:nowrap; }
.hd__tel svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hd__tel:hover{ color:var(--teal-hi); }
.hd.is-stuck .hd__tel:hover{ color:var(--teal-dk); }
/* Auf dem Bild als heller Umriss, ab dem Scrollen gefüllt */
.hd:not(.is-stuck) .hd__act .btn--solid{ background:transparent; border:1px solid var(--on-dark-3); color:var(--brand-white); }
.hd:not(.is-stuck) .hd__act .btn--solid:hover{ background:var(--brand-white); border-color:var(--brand-white); color:var(--navy); }

.hd__burger{ display:none; width:40px; height:36px; padding:9px 6px; }
.hd__burger span{ display:block; height:1.5px; background:var(--brand-white); transition:transform var(--d-slow) var(--ease), opacity var(--d-base) ease, background var(--d-base) ease; }
.hd.is-stuck .hd__burger span{ background:var(--ink); }
.hd__burger span+span{ margin-top:6px; }
.hd__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hd__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.hd__progress{ display:block; height:2px; background:transparent; }
.hd__progress i{ display:block; height:100%; width:0; background:var(--teal); }

/* Mobilmenü */
.mob{
  position:fixed; inset:0; z-index:80; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity var(--d-base) ease;
}
/* Die Klasse setzt display und hebt damit das hidden-Attribut auf. Ohne diese
   Zeile führt die Tabtaste auf dem Desktop durch zwölf unsichtbare Menüpunkte,
   bevor der erste Knopf im Hero erreicht wird. */
.mob[hidden]{ display:none; }
.mob.is-open{ opacity:1; pointer-events:auto; }
/* 90% statt 90vw: vw rechnet die Bildlaufleiste mit und kann die Ebene
   damit breiter machen als den nutzbaren Bereich. */
.mob nav{ display:grid; gap:4px; width:min(90%,420px); }
.mob a{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--rule-2);
  font-family:var(--ff-d); font-weight:600; font-size:1.4rem; color:var(--brand-white);
}
.mob em{ font-style:normal; font-size:var(--t-label); letter-spacing:.14em; color:var(--teal-hi); }
/* ── Hauptknopf im Mobilmenü ──
   Zwölf Einträge schieben ihn unter die Falz: Wer das Menü öffnet, um Kontakt
   aufzunehmen, müsste erst scrollen. Er haftet deshalb am unteren Rand des
   Menüs und sieht als gefüllte Fläche auch wie ein Knopf aus, nicht wie der
   dreizehnte Navigationspunkt. */
.mob__cta{
  position:sticky; bottom:0; z-index:1;
  margin-top:24px;
  justify-content:center; align-items:center;
  padding:18px 22px;
  border:0 !important;
  background:var(--teal); color:var(--brand-navy) !important;
  font-size:1.06rem;
  /* Verlauf nach oben, damit darunterliegende Einträge nicht hart anstoßen */
  box-shadow:0 -20px 26px -16px var(--navy), 0 -40px 0 -39px var(--rule-2);
}

/* ═══════════ Hero — Deckblatt ═══════════
   Der Hero ist das Titelblatt des Berichts, den die Seite darstellt.
   Zwei Flächen statt einer: links die Textfläche in Navy, rechts die
   Bildtafel. Kein Schleier über dem Foto — es trägt die Aussage mit,
   statt nur Hintergrund zu sein.

   Die Höhe ist bewusst gedeckelt. Auf einem 1440×800-Laptop soll alles
   Wichtige ohne Scrollen stehen, deshalb min(88svh, 860px) statt 96svh.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════ Hero ═══════════
   Links die Aussage, rechts das Markenbild, unten die Leistungen. Kein
   Hintergrundraster mehr: Es las sich als Hilfslinien eines unfertigen
   Entwurfs. Die Ordnung tragen jetzt die Achsen der Zeichnung und die
   Linien der Leistungsnavigation. */
.hero{
  position:relative; isolation:isolate;
  display:grid; grid-template-rows:1fr auto;
  min-height:min(94svh, 940px);
  padding-inline:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  padding-top:clamp(108px,12vw,152px);
  background:var(--navy); color:var(--brand-white);
  overflow:hidden;
  --hp:0;
}
/* Ein sehr weiter, kaum sichtbarer Lichtverlauf hinter dem Markenbild —
   er gibt dem Raum Tiefe, ohne als Effekt aufzufallen. */
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-8%; top:4%; width:min(62vw, 780px); aspect-ratio:1;
  background:none;
}

.hero__raum{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr; align-items:center;
  gap:clamp(34px,5vw,72px);
  padding-bottom:clamp(30px,4vw,54px);
}

/* ── Wortseite ── */
/* Keine Zeichenbegrenzung auf der ganzen Spalte: 60ch entsprechen bei
   Grundschriftgröße 495 px und schnitten die Überschrift ab. Die Breite
   gibt das Raster vor; Lesebreiten stehen an den Textelementen selbst. */
.hero__wort{ min-width:0; }

.hero__zeile{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin:0 0 clamp(20px,2.4vw,30px);
  font-size:var(--t-label); font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-dark-2);
  transform:translate3d(0, calc(var(--hp) * 24px), 0);
}
.hero__strich{
  display:block; width:clamp(30px,3.4vw,56px); height:1px; background:var(--teal-hi);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease) .15s;
}
.hero.is-auf .hero__strich{ transform:scaleX(1); }
.hero__zeile b{
  padding-left:15px; border-left:1px solid var(--rule-2);
  font-weight:500; color:var(--teal-hi);
}

/* Zwei kurze Zeilen tragen die Aussage. Gewicht 500 statt Fettdruck:
   Autorität kommt aus Größe und enger Führung. */
.hero__h1{
  margin:0;
  font-family:var(--ff-d); font-weight:500;
  /* Bemessen an der längsten Zeile „Ein Vertragspartner.“: Sie muss in
     die linke Spalte passen, ohne umzubrechen oder anzustoßen. */
  font-size:clamp(2.3rem, 4.72vw, 4.45rem);
  line-height:.98; letter-spacing:-.032em;
  margin-left:-.014em;
  transform:translate3d(0, calc(var(--hp) * 14px), 0);
}

.hero__lead{
  margin:clamp(22px,2.8vw,34px) 0 0; max-width:52ch;
  font-size:clamp(1rem,1.2vw,1.14rem); line-height:1.66;
  color:var(--on-dark-1);
  transform:translate3d(0, calc(var(--hp) * 8px), 0);
}

/* ── Handlung ── */
.hero__act{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(20px,2.6vw,34px);
  margin-top:clamp(26px,3.2vw,40px);
}
/* Kein Flächenknopf: eine ruhige Fläche mit feiner Kante, die beim
   Überfahren fester wird. Der Pfeil wandert, nicht der Knopf. */
.hero__cta{
  display:inline-flex; align-items:center; gap:14px;
  min-height:56px; padding:0 26px;
  background:var(--teal); color:var(--brand-navy);
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-sm);
  letter-spacing:-.005em;
  border:1px solid var(--teal);
  transition:background var(--d-base) ease, border-color var(--d-base) ease, color var(--d-base) ease;
}
.hero__cta svg{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--d-slow) var(--ease);
}
.hero__cta:hover{ background:var(--teal-hi); border-color:var(--teal-hi); }
.hero__cta:hover svg{ transform:translateX(5px); }

.hero__zweit{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-sm);
  color:var(--brand-white); padding-bottom:6px; border-bottom:1px solid var(--rule-2);
  transition:border-color var(--d-base) ease, color var(--d-base) ease;
}
.hero__zweit svg{
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--d-slow) var(--ease);
}
.hero__zweit:hover{ border-color:var(--teal-hi); color:var(--teal-hi); }
.hero__zweit:hover svg{ transform:translateX(4px); }

/* Zusagen stehen als Zeile mit Trennpunkten, nicht als Kleingedrucktes */
.hero__zusagen{
  display:flex; flex-wrap:wrap; gap:8px clamp(16px,2vw,26px);
  margin:clamp(24px,2.8vw,34px) 0 0; padding:0; list-style:none;
  font-size:var(--t-xs); color:var(--on-dark-2);
}
.hero__zusagen li{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); }
.hero__zusagen li:not(:last-child)::after{
  content:""; width:3px; height:3px; border-radius:50%;
  background:var(--teal-hi); opacity:.7;
}

/* ── Markenbild ── */
.hero__bild{
  position:relative;
  display:grid; place-items:center;
  transform:translate3d(0, calc(var(--hp) * -18px), 0);
}
/* Die Fläche wird über das Seitenverhältnis reserviert, bevor irgendein
   Skript läuft. Ohne diese Reservierung spränge das Layout in dem Moment,
   in dem die Leinwand ihre Größe bekommt — und zwar an der Stelle, auf
   die der Blick zuerst fällt. */
.core{
  position:relative;
  width:100%; max-width:min(46vw, 520px);
  aspect-ratio:1.06;
}
.core__leinwand,
.core__svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.core__svg{ overflow:visible; }

/* Welche der beiden Fassungen gilt, entscheidet die Prüfung im Kopf der
   Seite — vor dem ersten Anstrich. Deshalb wird hier nichts überblendet:
   es gibt keinen Moment, in dem beide oder keine zu sehen wären. */
/* Auf dem Telefon nimmt die Leinwand keine waagerechte Fingerbewegung
   an. Senkrecht scrollen und mit zwei Fingern zoomen bleiben dem Browser
   überlassen — die Szene reagiert ohnehin nur auf den Scrollweg. */
.core__leinwand{ touch-action:pan-y pinch-zoom; }
.core__leinwand{ display:none; }
.hat-core .core__leinwand{ display:block; }
.hat-core .core__svg{ display:none; }

@media (min-width:1024px){
  .hero__raum{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); }
}

/* ── Flache Bildschirme ── */
@media (min-width:1024px) and (max-height:860px){
  .hero{ min-height:auto; padding-top:clamp(100px,11vh,128px); }
  .hero__h1{ font-size:clamp(2.4rem, 5vw, 4.4rem); }
  .hero__raum{ padding-bottom:clamp(22px,3vh,36px); }
  .core{ max-width:min(38vw, 420px); }
}

/* ── Unter 1024 px ──
   Eigene Komposition: Das Markenbild rückt unter die Aussage und wird
   flacher, die Leistungen stehen als Liste. Kein verkleinerter Desktop. */
@media (max-width:1023px){
  .hero{
    min-height:auto;
    padding-top:clamp(84px,18vw,116px);
    padding-inline:var(--pad);
  }
  .hero__raum{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px); }
  .hero__wort{ max-width:none; }
  .core{ max-width:min(74vw, 380px); }
  .hero__bild{ transform:none; }
}

@media (max-width:640px){
  .hero__h1{ font-size:clamp(2.1rem, 10.4vw, 3rem); letter-spacing:-.02em; line-height:1; margin-left:0; }
  .hero__zeile{ gap:7px 12px; letter-spacing:.13em; }
  .hero__zeile b{ padding-left:0; border-left:0; }
  .hero__act{ gap:14px; }
  .hero__cta{ width:100%; justify-content:center; }
  .hero__zusagen{ gap:6px 14px; }
  .hero__zusagen li:not(:last-child)::after{ display:none; }
  .core{ max-width:min(86vw, 330px); }
  /* Auf schmalen Schirmen bewegt sich nichts mit dem Scrollen */
  .hero__zeile, .hero__h1, .hero__lead{ transform:none; }
}

@media (max-width:640px) and (max-height:700px){
  .hero{ padding-top:clamp(58px,14vw,84px); }
  .hero__h1{ font-size:clamp(1.9rem, 8.6vw, 2.4rem); }
  .hero__lead{ font-size:.95rem; line-height:1.5; }
  .hero__bild{ display:none; }   /* der erste Schirm gehört der Aussage */
}

@media (orientation:landscape) and (max-height:520px){
  .hero{ min-height:auto; padding-top:clamp(72px,14vh,104px); }
  .hero__h1{ font-size:clamp(1.9rem,5vw,2.6rem); }
  .hero__bild{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .hero__zeile, .hero__h1, .hero__lead, .hero__bild{ transform:none !important; }
  .hero__strich{ transform:scaleX(1) !important; }
}

/* Die Zeilenmaske der Überschrift bleibt wie im übrigen Designsystem */
.hero__h1 .ln:nth-child(2) > span{ transition-delay:.07s; }
.hero__h1 .ln:nth-child(3) > span{ transition-delay:.14s; }

@media (prefers-reduced-motion: reduce){
  .hero__raster i{ transform:scaleY(1) !important; }
  .hero__strich{ transform:scaleX(1) !important; }
}

/* Der beschneidende Kasten der Zeilenanimation muss die Unterlängen von
   g, p, j und y aufnehmen. Archivo setzt sie 0,2125 em unter die Grundlinie;
   bei einer Zeilenhöhe von 1,02 ragten sie rund 0,09 em heraus und wurden
   flach abgeschnitten. Der negative Außenabstand hält das Layout gleich. */
.ln{ display:block; overflow:hidden; padding-bottom:.18em; margin-bottom:-.18em; }
.ln > span{ display:block; transform:none; }
.ln.is-in > span{ transform:translateY(0); }

/* ═══════════ Schnellanfrage ═══════════ */

/* Feld mit vorangestelltem Symbol */

/* Belege statt Kennzahlensockel im Bild */

/* Bildrahmen im Reportstil */
.frame{ position:relative; overflow:hidden; background:var(--bg-3); }
.frame > picture{ display:block; height:100%; }
.panel__fig .frame > picture, .comp__fig .frame > picture, .lb__fig .frame > picture{ position:absolute; inset:0; }
.frame img{ width:100%; height:100%; object-fit:cover; }
.phero__fig > picture{ display:block; width:100%; height:100%; }
img[src*="foto-baulogistik-"]{ object-position:60% 50%; }
img[src*="foto-sanierung-"]{ object-position:85% 50%; }
img[src*="foto-aussenanlagen-"]{ object-position:62% 50%; }
img[src*="foto-empfang-"]{ object-position:46% 50%; }

/* Vorhang, der beim Eintreten nach oben aufzieht */
.frame.reveal::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:var(--bg-3); transform:scaleY(0); transform-origin:top;
  transition:transform var(--d-reveal) var(--ease);
}
.sec--alt .frame.reveal::after{ background:var(--bg-2); }
.frame.reveal.is-in::after{ transform:scaleY(0); }
.frame.reveal img{ transition:opacity var(--d-reveal) var(--ease) .1s; }
figcaption{
  display:flex; gap:14px; margin-top:12px;
  font-size:var(--t-label); letter-spacing:.06em; color:var(--ink-3);
}
figcaption span{ font-family:var(--ff-d); font-weight:600; letter-spacing:.12em; color:var(--teal-dk); flex:none; }

/* Partnerband: optisch ausgerichtete Originalmarken und klare Rollen. */
.strip{ margin-top:clamp(22px,3vw,44px); background:var(--brand-surface); border-block:1px solid var(--rule); }
.strip__in{
  display:grid; grid-template-columns:minmax(150px,.8fr) minmax(280px,1.55fr) minmax(165px,.9fr) minmax(210px,1fr);
  align-items:center; gap:clamp(22px,2.5vw,38px); padding-block:35px;
}
.strip__label{ margin:0 0 11px; font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--teal-dk); }
.strip__intro h2{ margin:0; font-family:var(--ff-d); font-size:23px; font-weight:500; letter-spacing:-.025em; line-height:1.2; }
.strip__logos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; list-style:none; margin:0; padding:0; }
.strip__logos li{ min-width:0; }
.strip__logos a{ display:flex; flex-direction:column; gap:12px; min-height:84px; justify-content:center; color:var(--ink-2); }
.strip__mark{ display:flex; align-items:center; height:44px; }
.strip__mark img{ max-width:100%; width:auto; max-height:39px; height:auto; object-fit:contain; object-position:left center; }
.strip__mark img[src$=".svg"]{ max-height:41px; }
.strip__role{ font-size:11px; line-height:1.4; }
.strip__logos a:hover .strip__role{ color:var(--teal-dk); text-decoration:underline; text-underline-offset:4px; }
.strip__more{ display:flex; align-items:center; gap:11px; font-size:13px; line-height:1.4; color:var(--ink); }
.strip__plus{ display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--brand-on-dark-muted); border-radius:50%; color:var(--teal-dk); flex:none; font-size:19px; font-weight:400; }
.strip__more small{ display:block; margin-top:5px; font-size:11px; color:var(--ink-2); }
.strip__more:hover small{ color:var(--teal-dk); text-decoration:underline; text-underline-offset:4px; }
.strip__club{ margin:0; padding-left:26px; border-left:1px solid var(--brand-line); min-width:0; }
.strip__club p{ margin:0 0 11px; font-size:10px; line-height:1.4; color:var(--ink-2); }
.strip__club picture{ display:block; width:230px; max-width:100%; }
.strip__club img{ display:block; width:100%; height:auto; }
@media(max-width:1150px){
  .strip__in{ grid-template-columns:minmax(145px,.8fr) minmax(280px,1.6fr) minmax(210px,1fr); gap:24px; }
  .strip__intro{ grid-row:1/3; }
  .strip__club{ grid-column:3; grid-row:1/3; }
  .strip__more{ grid-column:2; border-top:1px solid var(--rule); padding-top:17px; }
}
@media(max-width:760px){
  .strip__in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; padding-block:29px; }
  .strip__intro{ grid-column:1/-1; grid-row:auto; }
  .strip__intro h2 br{ display:none; }
  .strip__logos{ grid-column:1/-1; gap:30px; }
  .strip__mark{ height:43px; }
  .strip__mark img{ max-width:170px; width:100%; }
  .strip__more{ grid-column:1; padding-top:0; border:0; }
  .strip__club{ grid-column:2; grid-row:auto; padding-left:22px; }
  .strip__club p{ max-width:21ch; }
}
@media(max-width:440px){
  .strip__in{ column-gap:18px; }
  .strip__logos{ gap:21px; }
  .strip__role{ font-size:11px; }
  .strip__more{ grid-column:1/-1; border-top:1px solid var(--rule); padding-top:20px; }
  .strip__club{ grid-column:1/-1; padding:21px 0 0; border-left:0; border-top:1px solid var(--rule); }
  .strip__club p{ max-width:none; }
  .strip__club picture{ width:210px; }
}

/* ═══════════ Sektionen ═══════════ */
.sec{ padding-block:var(--sec-y); }
.sec--alt{ background:var(--bg-2); }
.sec--dark{ position:relative; background:var(--navy); color:var(--brand-white);background-image:none;}
.sec--dark .h2{ color:var(--brand-white); }
/* Diagonale Oberkante — dieselbe Neigung wie der Keil im Hero.
   Das Dreieck ragt in die Sektion darüber hinein, deren unterer Rand ohnehin leer ist. */
.sec--dark::before{
  content:""; position:absolute; left:0; right:0;
  height:clamp(16px,2vw,28px); top:calc(clamp(16px,2vw,28px) * -1 + 1px);
  background:inherit;
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
/* Signet als stilles Wasserzeichen — verbindet die dunklen Kapitel */
/* Bleibt vollständig innerhalb der Sektion — sonst entsteht seitlicher Überlauf */
.sec--dark::after{
  content:""; position:absolute; right:0; bottom:0;
  width:min(34vw,420px); max-width:40%; aspect-ratio:295/285;
  z-index:0; pointer-events:none;
  background:url("assets/signet-light.png") no-repeat right bottom/contain;
  opacity:.05;
}
.sec--dark > *{ position:relative; z-index:1; }

/* ── Tabs (Leistungen) ── */
.tabs{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(26px,3.5vw,64px); }
.tabs__nav{ display:grid; align-content:start; border-top:1px solid var(--rule); }
.tabs__nav button{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:16px;
  align-items:start; text-align:left;
  padding:20px 14px 20px 0; border-bottom:1px solid var(--rule);
  transition:padding-left var(--d-slow) var(--ease), color var(--d-base) ease;
}
.tabs__nav button::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--teal); transform:scaleY(0); transform-origin:top;
  transition:transform var(--d-slow) var(--ease);
}
.tabs__no{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-label); letter-spacing:.14em; color:var(--ink-3); padding-top:5px; }
.tabs__name{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-body); line-height:1.3; letter-spacing:-.015em; color:var(--ink-2); transition:color var(--d-base) ease; }
.tabs__nav button:hover .tabs__name{ color:var(--ink); }
.tabs__nav button.is-on{ padding-left:18px; }
.tabs__nav button.is-on::before{ transform:scaleY(1); }
.tabs__nav button.is-on .tabs__name{ color:var(--ink); }
.tabs__nav button.is-on .tabs__no{ color:var(--teal-dk); }

.panel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,3vw,52px); align-items:start; }
.panel[hidden]{ display:none; }
.panel.is-anim .panel__txt, .panel.is-anim .panel__fig{ animation:panelIn .75s var(--ease) both; }
.panel.is-anim .panel__fig{ animation-delay:.08s; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.panel h3{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); line-height:1.22; letter-spacing:-.022em; }
.panel p{ margin-top:14px; color:var(--ink-2); max-width:46ch; }
.panel__fig .frame{ aspect-ratio:4/3; }

.marks{ display:grid; gap:0; margin-top:26px; }
.marks li{ position:relative; padding:13px 0 13px 30px; border-top:1px solid var(--rule); font-size:var(--t-sm); color:var(--ink-2); }
.marks li::before{
  content:""; position:absolute; left:2px; top:20px;
  width:12px; height:7px; border-left:1.5px solid var(--teal); border-bottom:1.5px solid var(--teal);
  transform:rotate(-45deg);
}
.marks--sm li{ padding-block:10px; font-size:var(--t-sm); }
/* ── Film ──
   Der Film hängt an derselben Kante wie die Bildrahmen der Leistungen: gekappte
   Ecke, keine Rundungen, Teal nur als Signal. Das Standbild trägt die Fläche,
   bis wirklich abgespielt wird — das Video selbst wird erst dann geladen. */
.film__fig{ margin:0; }
.film__stage{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--brand-navy);
  box-shadow:var(--sh-lg);
}
.film__poster, .film__v{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.film__poster img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Das Video liegt über dem Standbild und blendet erst auf, wenn ein Bild steht.
   Ohne diesen Schritt blitzt zwischen Poster und erstem Frame kurz Schwarz auf. */
.film__v{ opacity:0; transition:opacity var(--d-slow) var(--ease); z-index:1; }
.film__stage.is-ready .film__v{ opacity:1; }

/* Verlauf nach unten — hält Zeitleiste und Bedienung lesbar, ohne das Bild zu dämpfen */
.film__grade{
  position:absolute; inset:auto 0 0; height:38%; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(var(--brand-navy-rgb),.72), rgba(var(--brand-navy-rgb),0));
  opacity:0; transition:opacity var(--d-base) ease;
}
.film__stage.is-live .film__grade{ opacity:1; }

/* ── Einstieg ──
   Ein Feld statt eines schwebenden Kreises: dieselbe Kantenlogik wie die Knöpfe. */
.film__cue{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:20px;
  color:var(--brand-white); text-align:left;
  background:linear-gradient(to top, rgba(var(--brand-navy-rgb),.55), rgba(var(--brand-navy-rgb),.12) 55%);
  transition:opacity var(--d-base) ease, visibility var(--d-base);
}
.film__stage.is-live .film__cue{ opacity:0; visibility:hidden; }
.film__cue__ico{
  display:grid; place-items:center; flex:none;
  width:clamp(58px,6vw,76px); aspect-ratio:1;
  background:var(--teal); color:var(--brand-navy);
  transition:background var(--d-base) ease, transform var(--d-slow) var(--ease);
}
.film__cue__ico svg{ width:44%; height:44%; fill:currentColor; }
.film__cue:hover .film__cue__ico{ background:var(--teal-hi); transform:scale(1.06); }
.film__cue__txt{
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); line-height:1.2;
  letter-spacing:-.02em;
}
.film__cue__txt b{
  display:block; margin-top:6px;
  font-family:var(--ff-t); font-weight:500; font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2);
}

/* ── Bedienleiste während des Laufs ── */
.film__hud{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:16px;
  padding:clamp(14px,2vw,22px) clamp(16px,2.4vw,26px) clamp(20px,2.6vw,30px);
  opacity:0; visibility:hidden; transition:opacity var(--d-base) ease, visibility var(--d-base);
}
.film__stage.is-live .film__hud{ opacity:1; visibility:visible; }
.film__toggle{
  display:grid; place-items:center; flex:none;
  width:42px; height:42px; color:var(--brand-white);
  border:1px solid rgba(255,255,255,.34); background:rgba(var(--brand-navy-rgb),.42);
  backdrop-filter:blur(6px);
  transition:background var(--d-base) ease, border-color var(--d-base) ease, color var(--d-base) ease;
}
.film__toggle:hover{ background:var(--teal); border-color:var(--teal); color:var(--brand-navy); }
.film__toggle svg{ width:18px; height:18px; fill:currentColor; }
/* Nur ein Symbol je Zustand — welches, entscheidet die Klasse an der Bühne */
.film__i--play, .film__i--again{ display:none; }
.film__stage.is-paused .film__i--pause{ display:none; }
.film__stage.is-paused .film__i--play{ display:block; }
.film__stage.is-done .film__i--pause, .film__stage.is-done .film__i--play{ display:none; }
.film__stage.is-done .film__i--again{ display:block; }
.film__time, .film__mute{
  margin:0; font-size:var(--t-xs); font-variant-numeric:tabular-nums;
  color:var(--on-dark-2); letter-spacing:.06em;
}
.film__mute{
  margin-left:auto; letter-spacing:.18em; text-transform:uppercase;
  font-size:var(--t-label); font-weight:600; color:var(--on-dark-3);
}

/* ── Zeitleiste ── */
.film__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  height:3px; background:rgba(255,255,255,.16);
  opacity:0; transition:opacity var(--d-base) ease;
}
.film__stage.is-live .film__bar{ opacity:1; }
.film__bar span{
  display:block; height:100%; width:0; background:var(--teal-hi);
  transform-origin:left;
}

/* ── Kapitelmarken ──
   Sie greifen die Nummernlogik der Kapitelköpfe auf und machen den Film
   navigierbar, statt ihn nur laufen zu lassen. */
.film__caps{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:end; gap:clamp(18px,3vw,44px);
  margin-top:clamp(22px,2.6vw,34px);
}
.film__ch{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(14px,2vw,28px); margin:0; padding:0; list-style:none;
}
.film__ch button{
  display:block; width:100%; text-align:left;
  padding-top:14px; border-top:2px solid var(--rule-2);
  color:var(--on-dark-2); font-size:var(--t-sm); line-height:1.35;
  transition:color var(--d-base) ease, border-color var(--d-base) ease;
}
.film__ch button span{
  display:block; margin-bottom:6px;
  font-family:var(--ff-d); font-weight:700; font-size:var(--t-xs);
  letter-spacing:.08em; color:var(--teal-hi);
  font-variant-numeric:tabular-nums;
}
.film__ch button:hover, .film__ch button:focus-visible{ color:var(--brand-white); border-top-color:var(--teal-hi); }
.film__ch li.is-on button{ color:var(--brand-white); border-top-color:var(--teal); }
.film__hint{
  margin:0; max-width:34ch;
  font-size:var(--t-xs); line-height:1.6; color:var(--on-dark-3);
}


/* ── Branchen ── */
.sectors{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(20px,3vw,52px); }
.sectors li{
  position:relative; padding:26px 0 30px; border-top:1px solid var(--rule);
  transition:border-color var(--d-slow) var(--ease);
}
/* Die Oberkante färbt sich beim Überfahren — Struktur statt Kasten */
.sectors li::after{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:100%;
  background:var(--teal); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-slow) var(--ease);
}
.sectors li:hover::after{ transform:scaleX(1); }
.sectors__no{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-label); letter-spacing:.14em; color:var(--teal-dk); }
.sectors h3{
  margin-top:14px; font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); letter-spacing:-.018em;
  transition:transform var(--d-slow) var(--ease);
}
.sectors li:hover h3{ transform:translateX(5px); }
.sectors p{ margin-top:9px; font-size:var(--t-sm); color:var(--ink-2); max-width:34ch; }

/* ── Transparenz ── */
.split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,4vw,72px); align-items:start; }
.split > *{ min-width:0; }                 /* Grid-Kinder schrumpfen sonst nicht unter ihren Inhalt */
.feats{ display:grid; }
.feats li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; padding:20px 0; border-top:1px solid var(--rule-2); }
.feats__no{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-label); letter-spacing:.14em; color:var(--teal-hi); padding-top:4px; }
.feats b{ display:block; font-family:var(--ff-d); font-weight:600; font-size:var(--t-body); }
.feats span{ display:block; margin-top:5px; font-size:var(--t-sm); color:var(--on-dark-2); }

/* ══════════ Diagramm „Auftragsaktivität" ══════════
   Das Diagramm steht nicht als Bild auf der Seite, sondern besteht aus
   einzelnen SVG-Elementen, die app.js aus einer Datenreihe erzeugt. Hier
   liegt nur, wie sie aussehen und wie sie sich bewegen.

   Es sitzt ohne Rahmen und ohne weiße Karte direkt auf dem dunklen Grund
   der Sektion — dieselbe Schrift, dieselben Haarlinien, dieselbe
   Akzentfarbe wie der Rest der Seite.

   Statusarten werden dreifach unterschieden: über Farbe, über Muster oder
   Kontur und über die danebenstehende Beschriftung. Wer Farben nicht
   trennen kann, liest trotzdem, was gemeint ist. */

/* ── A bis D als Steuerung ── */
.feats--steuer{ border-top:1px solid var(--rule-2); }
.feats--steuer li{ display:block; padding:0; border-top:0; }
.feats--steuer button{
  position:relative; width:100%; text-align:left;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px;
  padding:19px 34px 19px 0;
  background:none; border:0; border-bottom:1px solid var(--rule-2);
  color:inherit; font:inherit; cursor:pointer;
  transition:padding-left var(--d-base) var(--ease), background var(--d-base) ease;
}
.feats--steuer li:last-child button{ border-bottom:0; }
/* Die Akzentlinie zeigt die aktive Ansicht. Sie liegt links, damit sie
   den Text nicht anhebt und beim Wechsel nichts springt. */
.feats--steuer button::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px;
  background:var(--teal-hi); transform:scaleY(0); transform-origin:top;
  transition:transform var(--d-base) var(--ease);
}
.feats--steuer button[aria-selected="true"]::before{ transform:scaleY(1); }
.feats--steuer button[aria-selected="true"]{ padding-left:16px; }
.feats--steuer button:hover{ padding-left:8px; }
.feats--steuer button[aria-selected="true"]:hover{ padding-left:16px; }
.feats--steuer .feats__no{
  transition:color var(--d-base) ease, transform var(--d-base) var(--ease);
}
.feats--steuer button[aria-selected="true"] .feats__no{
  color:var(--brand-white); transform:translateY(-1px);
}
.feats--steuer b{ transition:color var(--d-base) ease; }
.feats--steuer button[aria-selected="true"] b{ color:var(--brand-white); }
.feats--steuer button[aria-selected="true"] .feats__txt > span{ color:var(--on-dark-1); }
/* Der Pfeil zeigt, dass hier etwas zu bedienen ist. */
.feats--steuer button::after{
  content:""; position:absolute; right:4px; top:50%; width:7px; height:7px;
  border-right:1.5px solid var(--on-dark-3); border-top:1.5px solid var(--on-dark-3);
  transform:translateY(-50%) rotate(45deg);
  transition:border-color var(--d-base) ease, transform var(--d-base) var(--ease);
}
.feats--steuer button[aria-selected="true"]::after{
  border-color:var(--teal-hi); transform:translateY(-50%) translateX(3px) rotate(45deg);
}

/* ── Der Diagrammbereich ── */
.dia{
  position:relative;
  /* minmax(0,1fr) statt der Vorgabe auto: sonst wächst die Spalte auf die
     kleinstmögliche Breite ihres breitesten Kindes — die aufgeklappte
     Wertetabelle zog damit das ganze Dokument breiter als den Bildschirm. */
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(13px,1.5vw,18px); align-content:start;
  opacity:1; transform:none;
  transition:opacity .84s var(--ease), transform .84s var(--ease);
}
.dia.is-auf{ opacity:1; transform:none; }
.dia:focus-visible{ outline:2px solid var(--teal-hi); outline-offset:8px; }
/* Die Musterdefinitionen dürfen kein Gitterfeld belegen. */
.dia__defs{ position:absolute; left:0; top:0; width:0; height:0; overflow:hidden; }

.dia__kopf{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start;
  gap:8px 22px; padding-bottom:13px; border-bottom:1px solid var(--rule-2);
}
.dia__titel{
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3);
  line-height:1.22; letter-spacing:-.012em; color:var(--brand-white);
}
.dia__unter{ margin-top:6px; font-size:var(--t-xs); color:var(--on-dark-2); max-width:52ch; }
/* Dauerhaft sichtbar, nicht Teil einer Animation, nicht ausblendbar. */
.dia__quelle{
  justify-self:end; padding:5px 10px; border:1px solid var(--rule-2);
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-label);
  letter-spacing:.07em; color:var(--on-dark-2); white-space:nowrap;
}

.dia__nur-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* ── Zeichenfläche ──
   Feste Höhe: der Wechsel zwischen den Ansichten darf die Seite nicht
   verschieben. Die Breite kommt vom Gitter, das Diagramm rechnet sie über
   einen ResizeObserver in Koordinaten um. */
.dia__flaeche{ position:relative; height:clamp(232px,25vw,310px); }
/* Gezeichnet wird im SVG, bedient wird in der Schicht darüber. */
.dia__svg{ display:block; width:100%; height:100%; overflow:visible; pointer-events:none; }
.dia__leer{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  text-align:center; font-size:var(--t-sm); color:var(--on-dark-3);
}
.dia.is-bereit .dia__leer{ display:none; }

/* ── Achsen und Gitter ── */
.dia__gitter line{
  stroke:rgba(255,255,255,.085); stroke-width:1; shape-rendering:crispEdges;
  opacity:0; transition:opacity .5s ease; transition-delay:var(--vz,0s);
}
.dia.is-auf .dia__gitter line{ opacity:1; }

.dia__achse{
  stroke:rgba(255,255,255,.30); stroke-width:1; shape-rendering:crispEdges;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .78s var(--ease) .14s, opacity .5s ease;
}
.dia.is-auf .dia__achse{ stroke-dashoffset:0; }

.dia__yachse text{
  fill:var(--on-dark-3); font-family:var(--ff-t); font-size:11px;
  font-variant-numeric:tabular-nums; text-anchor:end; dominant-baseline:middle;
  opacity:0; transition:opacity .5s ease; transition-delay:var(--vz,0s);
}
.dia.is-auf .dia__yachse text{ opacity:1; }
/* Schmale Fläche: der Wert steht über seiner Linie, nicht daneben. */
.dia__yachse--innen text{ text-anchor:start; dominant-baseline:auto; }
.dia__einheit{
  fill:var(--on-dark-3); font-family:var(--ff-d); font-size:10px;
  letter-spacing:.1em; text-anchor:start;
  opacity:0; transition:opacity .5s ease; transition-delay:var(--vz,0s);
}
.dia.is-auf .dia__einheit{ opacity:1; }
.dia__einheit--rechts{ text-anchor:end; }

/* ── Säulen ──
   Die Säule ist eine Gruppe aus Segmenten und Tagesbeschriftung. Bewegt
   wird nur der Stapel, damit die Beschriftung auf ihrer Linie stehen
   bleibt. Die Klasse is-an setzt JavaScript — beim Überfahren, beim
   Fokussieren und beim Festhalten gleichermaßen. */
.dia__saeule{ pointer-events:none; }

/* Die Bedienschicht: für jede Säule eine echte Schaltfläche, so breit
   wie ihr Feld und so hoch wie die Fläche. Damit ist die Trefferfläche
   auch bei der niedrigsten Säule groß genug, und Tabstopp, Fokusring
   und Eingabetaste kommen vom Browser statt aus Nachbau. */
.dia__griff{ position:absolute; inset:0; }
.dia__griff[hidden]{ display:none; }
.dia__knopf{
  position:absolute; top:0; bottom:0; padding:0; margin:0;
  background:none; border:0; cursor:pointer; outline:none;
  -webkit-tap-highlight-color:transparent;
}
.dia__knopf::before{
  content:""; position:absolute; left:2px; right:2px; top:2px; bottom:4px;
  border:1.5px dashed var(--teal-hi); opacity:0;
  transition:opacity var(--d-fast) ease;
}
.dia__knopf:focus-visible::before{ opacity:1; }

.dia__stapel{ transition:transform var(--d-base) var(--ease), filter var(--d-base) ease; }
.dia__saeule.is-an .dia__stapel{ transform:translateY(-5px); filter:brightness(1.14); }

.dia__seg{
  transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(1);
  transition:transform .62s var(--ease); transition-delay:var(--vz,0s);
}
.dia:not(.is-auf) .dia__seg{ transform:scaleY(0); }

.dia__tag{
  fill:var(--on-dark-2); font-family:var(--ff-d); font-weight:600; font-size:11.5px;
  letter-spacing:.04em; text-anchor:middle;
  opacity:0; transition:opacity .5s ease, fill var(--d-fast) ease;
  transition-delay:var(--vz,0s);
}
.dia.is-auf .dia__tag{ opacity:1; }
.dia__saeule.is-an .dia__tag{ fill:var(--teal-hi); }

/* Die anderen Tage treten zurück, sobald einer gewählt ist. */
.dia__saeule{ transition:opacity var(--d-base) ease; }
.dia__saeulen.is-fokus .dia__saeule:not(.is-an){ opacity:.38; }

/* Die Orientierungslinie zum gewählten Tag. */
.dia__wert{
  stroke:var(--teal-hi); stroke-width:1; stroke-dasharray:2 4;
  opacity:0; pointer-events:none; transition:opacity var(--d-fast) ease;
}
.dia__wert.is-an{ opacity:.85; }

/* ── Ablaufansicht D ──
   Vier Belege auf einer Linie, gezeichnet aus denselben Grundformen wie
   das Diagramm: eine Achse, Knoten darauf, Beschriftung darunter. */
.dia__ablauf .dia__bahn{
  stroke:rgba(255,255,255,.30); stroke-width:1;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .8s var(--ease) .12s;
}
.dia.is-auf .dia__ablauf .dia__bahn{ stroke-dashoffset:0; }
.dia__knoten{ cursor:default; outline:none; opacity:0;
  transition:opacity .5s ease; transition-delay:var(--vz,0s); }
.dia.is-auf .dia__knoten{ opacity:1; }
.dia__kasten{ fill:var(--teal); stroke:var(--teal); stroke-width:1; }
.dia__nr{
  fill:var(--brand-navy); font-family:var(--ff-d); font-weight:600; font-size:11px;
  text-anchor:middle; dominant-baseline:middle;
}
/* Der Beleg über der Bahn: Rahmen, geknickte Ecke, drei Zeilen. */
.dia__blatt{ fill:rgba(255,255,255,.045); stroke:rgba(255,255,255,.34); stroke-width:1; }
.dia__knick{ fill:none; stroke:rgba(255,255,255,.34); stroke-width:1; }
.dia__zeile{ stroke:rgba(255,255,255,.28); stroke-width:1.5; }
.dia__stufe{
  fill:var(--brand-white); font-family:var(--ff-d); font-weight:600; font-size:12.5px;
}
.dia__stufe--klein{ fill:var(--on-dark-2); font-weight:400; font-size:11.5px; font-family:var(--ff-t); }

/* ── Legende ── */
.dia__legende{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:var(--t-label); color:var(--on-dark-2);
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease) 1.1s, transform .5s var(--ease) 1.1s;
}
.dia.is-auf .dia__legende{ opacity:1; transform:none; }
.dia__legende[hidden]{ display:none; }
.dia__legende li{ display:flex; align-items:center; gap:8px; }
.dia__legende svg{ flex:none; display:block; width:13px; height:13px; }

/* ── Einblendfeld ──
   Echtes HTML über der Zeichenfläche. JavaScript begrenzt seine Lage,
   damit es an den Rändern nicht abgeschnitten wird. */
.dia__tip{
  position:absolute; z-index:3; left:0; top:0;
  transform:translate(var(--x,0px), var(--y,0px));
  min-width:136px; max-width:230px; padding:10px 12px;
  background:var(--navy-deep); border:1px solid rgba(255,255,255,.22);
  font-size:var(--t-label); line-height:1.5; color:var(--on-dark-1);
  pointer-events:none; box-shadow:0 14px 30px -20px rgba(0,0,0,.9);
}
.dia__tip b{ display:block; font-family:var(--ff-d); font-weight:600; color:var(--brand-white); }
.dia__tip p{ margin:2px 0 7px; color:var(--on-dark-2); }
.dia__tip b + ul{ margin-top:7px; }
.dia__tip ul{ display:grid; gap:3px; }
.dia__tip li{ display:flex; align-items:center; gap:8px; }
.dia__tip svg{ flex:none; display:block; width:11px; height:11px; }
.dia__tip em{ font-style:normal; margin-left:auto; font-variant-numeric:tabular-nums; color:var(--brand-white); }

/* ── Tabelle ──
   Dieselben Werte ohne Grafik: für Vorlesesoftware, für den Ausdruck und
   für alle, denen eine Zahlenreihe lieber ist als eine Säule. */
.dia__mehr{ border-top:1px solid var(--rule-2); padding-top:11px; }
.dia__mehr summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-label);
  letter-spacing:.07em; text-transform:uppercase; color:var(--on-dark-2);
  transition:color var(--d-fast) ease;
}
.dia__mehr summary::-webkit-details-marker{ display:none; }
.dia__mehr summary::before{
  content:""; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translate(-1px,1px);
  transition:transform var(--d-fast) var(--ease);
}
.dia__mehr[open] summary::before{ transform:rotate(45deg) translate(-1px,-1px); }
.dia__mehr summary:hover{ color:var(--brand-white); }
.dia__mehr summary:focus-visible{ outline:2px solid var(--teal-hi); outline-offset:4px; }
/* Die Tabelle rollt in ihrem eigenen Kasten. overscroll-behavior verhindert,
   dass das Wischen am Ende der Tabelle auf die Seite überspringt. */
.dia__tabhuelle{ margin-top:12px; overflow-x:auto; overscroll-behavior-x:contain; }
.dia__tab{ width:100%; border-collapse:collapse; font-size:var(--t-xs); }
.dia__tab caption{ text-align:left; padding-bottom:9px; color:var(--on-dark-3); font-size:var(--t-label); }
.dia__tab th, .dia__tab td{
  padding:7px 10px 7px 0; text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--rule-2); color:var(--on-dark-1);
  font-variant-numeric:tabular-nums;
}
.dia__tab thead th{ color:var(--on-dark-3); font-weight:400; }
.dia__tab th[scope="row"]{ text-align:left; color:var(--brand-white); font-weight:600; font-family:var(--ff-d); }
.dia__tab thead th:first-child{ text-align:left; }

/* ── Wechsel zwischen den Ansichten ──
   Nichts wird hart ausgetauscht: die Säulen fahren zusammen, Achsen und
   Beschriftungen blenden ab, dann wird neu gezeichnet und alles fährt
   wieder auf. Die Höhe der Fläche bleibt dabei gleich. */
.dia .is-null .dia__seg{
  transform:scaleY(0);
  transition-delay:0s !important; transition-duration:.24s !important;
}
.dia .is-null .dia__gitter line,
.dia .is-null .dia__yachse text,
.dia .is-null .dia__einheit,
.dia .is-null .dia__tag,
.dia .is-null .dia__knoten{
  opacity:0; transition-delay:0s !important; transition-duration:.2s !important;
}
.dia .is-null .dia__achse,
.dia .is-null .dia__bahn{ opacity:0; }

/* ── Schmale Flächen ── */
@media (max-width:900px){
  .dia__flaeche{ height:250px; }
  .dia__kopf{ grid-template-columns:1fr; }
  .dia__quelle{ justify-self:start; }
  .feats--steuer button{ padding:15px 30px 15px 0; }
}

/* Sieben Säulen in den 280 Pixeln zwischen den Seitenrändern lassen je
   39 px — zu wenig für den Finger. Auf schmalen Displays läuft die
   Zeichenfläche deshalb bis an den Bildschirmrand. Der negative
   Außenabstand ist genau so groß wie der Innenabstand von .wrap; die
   Fläche wird damit exakt so breit wie der Viewport und keinen Pixel
   breiter. */
@media (max-width:430px){
  .dia__flaeche{
    margin-left:calc(-1 * var(--pad));
    margin-right:calc(-1 * var(--pad));
  }
}
@supports (padding:env(safe-area-inset-left)){
  @media (max-width:430px){
    .dia__flaeche{
      margin-left:calc(-1 * max(var(--pad), env(safe-area-inset-left)));
      margin-right:calc(-1 * max(var(--pad), env(safe-area-inset-right)));
    }
  }
}

@media (max-width:560px){
  .dia__flaeche{ height:236px; }
  .dia__legende{ gap:7px 16px; }
  .dia__tip{ min-width:124px; max-width:200px; }
}

/* ── Abbestellte Bewegung ──
   Alles sofort im Endzustand: keine wachsenden Säulen, keine gezeichnete
   Achse, kein gestaffeltes Erscheinen. Bedienbar bleibt das Diagramm
   vollständig. */
@media (prefers-reduced-motion: reduce){
  .dia{ opacity:1 !important; transform:none !important; transition:none !important; }
  .dia__seg{ transform:scaleY(1) !important; transition:none !important; }
  .dia__achse, .dia__ablauf .dia__bahn{ stroke-dashoffset:0 !important; transition:none !important; }
  .dia__gitter line, .dia__yachse text, .dia__einheit, .dia__tag,
  .dia__knoten, .dia__legende{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .dia__stapel{ transition:none !important; }
  .dia__saeule.is-an .dia__stapel{ transform:none !important; }
  .feats--steuer button, .feats--steuer button::before, .feats--steuer button::after{ transition:none; }
}

/* ── Ablauf ── */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(20px,3vw,52px); }
.steps li{ position:relative; padding:28px 0 0; border-top:2px solid var(--rule); transition:border-color var(--d-reveal) var(--ease); }
.steps li.is-in{ border-top-color:var(--teal); }
/* Die Linie läuft über die Lücke hinweg zum nächsten Schritt */
.steps li:not(:last-child)::after{
  content:""; position:absolute; top:-2px; left:100%; height:2px;
  width:clamp(20px,3vw,52px); background:var(--rule);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-reveal) var(--ease), background var(--d-reveal) var(--ease);
}
.steps li.is-in:not(:last-child)::after{ transform:scaleX(1); background:var(--teal); }
.steps__no{ font-family:var(--ff-d); font-weight:700; font-size:clamp(1.9rem,3vw,2.6rem); line-height:1; letter-spacing:-.04em; color:var(--bg-3); transition:color var(--d-reveal) var(--ease); }
.steps li.is-in .steps__no{ color:var(--navy); }
.steps h3{ margin-top:16px; font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); letter-spacing:-.018em; }
.steps p{ margin-top:9px; font-size:var(--t-sm); color:var(--ink-2); max-width:32ch; }
.steps__meta{ display:block; margin-top:16px; font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* ── Qualität ── */
.quality{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(20px,3vw,44px); }
.quality article{ padding:26px 0 34px; border-top:1px solid var(--rule); }
.quality__no{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--rule); border-radius:50%;
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-label); color:var(--teal-dk);
}
.quality h3{ margin-top:20px; font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); letter-spacing:-.018em; }
.quality p{ margin-top:10px; font-size:var(--t-sm); color:var(--ink-2); }

/* ── Absicherung und Mitgliedschaften ── */
.seals{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3.5vw,64px); align-items:center;
  margin-top:clamp(34px,4vw,60px); padding:clamp(24px,2.8vw,38px);
  background:var(--brand-white); border:1px solid var(--rule);
}
.seals__txt h3{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); letter-spacing:-.018em; }
.seals__txt p{ margin-top:9px; font-size:var(--t-sm); color:var(--ink-2); max-width:44ch; }
.seals__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,40px); align-items:stretch; }
/* Die Beschreibungszeile dehnt sich, dadurch stehen die Logos der drei
   Spalten auf einer Linie statt auf drei verschiedenen Höhen. */
/* Feste Zone für das Logo: die drei Zeichen sind unterschiedlich hoch,
   sitzen aber alle auf derselben Grundlinie. Darunter Titel und Zusatz. */
.seals__list li{ display:grid; grid-template-rows:42px auto auto; gap:9px; justify-items:start; align-content:start; }

.seals__name{
  font-family:var(--ff-d); font-weight:600;
  font-size:var(--t-lead); letter-spacing:-.018em; color:var(--ink);
  line-height:1.25;
}
.seals__list li > span:last-child{
  font-size:var(--t-xs); line-height:1.5; color:var(--ink-2); letter-spacing:0; text-transform:none;
}
/* Fremdlogos mit Nutzungserlaubnis: unverfremdet in Originalfarbe.
   Graustufen und reduzierte Deckkraft wären eine Veränderung des Zeichens,
   die die Markenrichtlinien von Allianz, Handwerkskammer und BG BAU
   üblicherweise untersagen. Feste Höhe statt max-height, damit vor dem
   Laden kein Platz fehlt und nichts nachrutscht. */
.seals__logo{
  height:30px; width:auto; max-width:100%;
  align-self:end; object-fit:contain; object-position:left center;
}
/* Optische Angleichung: gemessen wird nicht die Bildhöhe, sondern wie groß
   der Namenszug wirkt. Bei BG BAU nimmt er nur den oberen Teil ein, unter ihm
   stehen zwei Zusatzzeilen; bei gleicher Bildhöhe wirkte das Zeichen deutlich
   kleiner als Allianz. Rein proportionale Skalierung, keine Verfremdung. */
.seals__logo[src*="bgbau"]{ height:38px; }
.seals__logo[src*="hwk"]{ height:28px; }

/* ── Partner ── */
/* auto-fit statt fester Dreiteilung: das Raster trägt zwei wie drei Karten */
.partners{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(18px,2vw,32px); }
.pc{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--rule); padding:clamp(24px,2.4vw,36px); background:var(--brand-white);
  transition:border-color var(--d-base) ease, transform var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease);
}
.pc:hover{
  border-color:var(--brand-line-strong); transform:translateY(-4px);
  box-shadow:0 26px 50px -34px rgba(var(--brand-navy-rgb),.4);
}
/* Lichtkante beim Überfahren — der Reflex, den Karten ohne Tiefe vermissen lassen */
.pc::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--teal);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-slow) var(--ease);
}
.pc:hover::before{ transform:scaleX(1); }
.pc__logo{ height:44px; display:flex; align-items:center; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--rule); box-sizing:content-box; }
.pc__logo img{ max-height:40px; width:auto; }
.pc__logo--net svg{ width:96px; height:48px; fill:none; stroke:var(--teal); stroke-width:1.4; }
.pc__logo--net circle{ fill:var(--brand-white); }
.pc h3{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); letter-spacing:-.018em; }
.pc p{ margin-top:11px; font-size:var(--t-sm); color:var(--ink-2); }
.pc .marks{ margin-top:auto; padding-top:22px; }
.pc--net{ background:var(--bg-2); }

/* ── Fachbetriebe: Aufnahme ins Netzwerk ── */
.join{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,72px);
  margin-top:clamp(44px,5vw,84px);
  padding:clamp(30px,3.6vw,58px);
  background:var(--grain), var(--navy); color:var(--brand-white);
}
.join::after{
  content:""; position:absolute; right:-8%; top:-30%; width:52%; height:170%;
  background:none;
  clip-path:polygon(34% 0, 100% 0, 100% 100%, 0 100%);display:none;}
.join__txt, .join__form{ position:relative; z-index:1; }
.join__label{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--teal-hi); }
.join h3{
  margin-top:14px; font-family:var(--ff-d); font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.2; letter-spacing:-.024em; max-width:24ch;
}
.join__lead{ margin-top:14px; font-size:var(--t-sm); line-height:1.72; color:var(--on-dark-1); max-width:52ch; }
.join__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,40px); margin-top:clamp(26px,3vw,40px); }
.join__cols h4{
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3);
  padding-bottom:12px; border-bottom:1px solid var(--rule-2); margin-bottom:14px;
}
.join .marks li{ border-top-color:var(--rule-2); color:var(--on-dark-1); }
.join .marks li::before{ border-color:var(--teal-hi); }
.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tags li{
  padding:6px 11px; border:1px solid var(--rule-2); border-radius:100px;
  font-size:var(--t-xs); color:var(--on-dark-1);
}

.join__form{ display:grid; gap:14px; align-content:start; background:rgba(255,255,255,.05); padding:clamp(20px,2.2vw,28px); border:1px solid var(--rule-2); }
.join__form-title{
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2);
}
.join__form .form__row{ gap:14px; }
.join__form .btn{ justify-self:start; margin-top:2px; }
.join__form .form__note{ margin-top:-2px; }
.field--light input, .field--light select, .field--light textarea{
  width:100%; padding:12px 13px;
  background:rgba(255,255,255,.06); border:1px solid var(--rule-2); border-radius:2px;
  color:var(--brand-white); font-size:var(--t-sm);
  transition:border-color var(--d-base) ease, background var(--d-base) ease;
}
.field--light > span{ font-size:var(--t-label); font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--on-dark-3); }
.field--light textarea{ resize:vertical; }
.field--light input:focus, .field--light select:focus, .field--light textarea:focus{ outline:none; border-color:var(--teal); background:rgba(255,255,255,.1); }
.field--light input::placeholder, .field--light textarea::placeholder{ color:rgba(255,255,255,.5); }
.join .btn--solid{ background:var(--teal); color:var(--brand-navy); }
.join .btn--solid:hover{ background:var(--teal-hi); }

/* ══════════ Einsatzgebiet ══════════
   Die Sektion ist die Fläche. Es gibt keinen Kartencontainer, kein Panel
   und keine Hinweiskarte — Karte, Ortsnavigation, Standortangabe und
   Abschlusszeile liegen auf demselben dunklen Grund und sind nur durch
   Haarlinien und Weißraum getrennt.

   Der Grund läuft oben und unten in die hellen Nachbarabschnitte aus;
   die Zeichnung der Karte verliert sich an ihren Rändern in ihm. Damit
   endet nichts an einer Kante.

   Farbe allein trägt nichts: Sitz, benannter Ort und Rand haben jeweils
   eigene Form und eigene Beschriftung. */

.sec--atlas{
  position:relative; background:var(--bg-2); color:var(--ink);
  border-top:1px solid var(--rule);
}
.atlas{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  grid-template-areas:"kopf kopf" "feld seite" "fuss seite";
  column-gap:clamp(36px,6vw,92px); row-gap:0; align-items:start;
}
.atlas > *{ min-width:0; }
.atlas__kopf{ grid-area:kopf; margin-bottom:clamp(32px,4vw,52px); }
.atlas__kopf .head{ margin:0; }
.atlas__kopf .h2{ max-width:24ch; }
.atlas__kopf .lead{ max-width:55ch; }
.atlas__kopf .head__main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(24px,4vw,60px); align-items:end; }
.atlas__kopf .lead{ margin:0; font-size:17px; line-height:1.7; }
.atlas__feld{
  grid-area:feld; position:relative; width:100%; height:530px;
  min-width:0; overflow:hidden; isolation:isolate;
  background:var(--bg-2);
}
.atlas__karte{ display:block; width:100%; height:100%; overflow:hidden; }
.atlas__terrain{ pointer-events:none; }
.atlas__relief{ fill:none; }
.atlas__ridge{ fill:none; stroke:rgba(var(--brand-teal-text-rgb),.11); stroke-width:1; }
.atlas__river{ fill:none; stroke:var(--brand-on-dark-subtle); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.atlas__region{ font:500 9px var(--ff-d); fill:var(--brand-muted); letter-spacing:2px; }
.atlas__north{ fill:var(--ink-3); font:500 10px var(--ff-d); }
.atlas__north path{ fill:none; stroke:currentColor; stroke-width:1; }
.atlas__route{ fill:none; stroke:var(--teal-dk); stroke-width:1; opacity:.16; transition:opacity .3s ease,stroke-width .3s ease; }
.atlas__route.is-an{ opacity:.9; stroke-width:1.8; }
.atlas__point{ opacity:1; transition:opacity .25s ease; }
.atlas__point.is-aus{ opacity:.45; }
.atlas__pin{ fill:var(--bg-2); stroke:var(--ink-2); stroke-width:1.6; transition:fill .25s ease,stroke .25s ease; }
.atlas__point--seat .atlas__pin, .atlas__point.is-an .atlas__pin{ fill:var(--teal-dk); stroke:var(--teal-dk); }
.atlas__halo{ fill:rgba(var(--brand-teal-rgb),.08); stroke:rgba(var(--brand-teal-text-rgb),.2); stroke-width:1; }
.atlas__label{
  font:500 13px var(--ff-d); fill:var(--ink-2);
  paint-order:stroke fill; stroke:var(--bg-2); stroke-width:4px; stroke-linejoin:round;
}
.atlas__point.is-an .atlas__label, .atlas__point--seat .atlas__label{ fill:var(--ink); font-weight:650; }
.atlas.is-animating .atlas__route{ animation:atlasDraw 1.15s var(--ease) both; }
.atlas.is-animating .atlas__halo{ animation:atlasSignal 1.6s ease-out 1; transform-box:fill-box; transform-origin:center; }
@keyframes atlasDraw{ from{ stroke-dasharray:1; stroke-dashoffset:1; } to{ stroke-dasharray:1; stroke-dashoffset:0; } }
@keyframes atlasSignal{ from{ transform:scale(.65); opacity:.4; } to{ transform:scale(1); opacity:1; } }
.atlas__griff{ position:absolute; inset:0; }
.atlas__knopf{
  position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px;
  padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer;
  touch-action:manipulation;
}
.atlas__knopf:hover{ background:rgba(var(--brand-teal-rgb),.1); }
.atlas__knopf:focus-visible{ outline:2px solid var(--teal-dk); outline-offset:1px; }
.atlas__leer{ position:absolute; inset:45% 12% auto; text-align:center; font-size:var(--t-sm); color:var(--ink-2); }
.atlas.is-bereit .atlas__leer{ display:none; }
.atlas__fuss{ grid-area:fuss; border-top:1px solid var(--rule); padding-top:22px; }
.atlas__info{ min-height:90px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 20px; }
.atlas__auswahl{ display:block; margin-bottom:7px; font:500 10px var(--ff-d); color:var(--ink-3); letter-spacing:.13em; text-transform:uppercase; }
.atlas__info b{ display:block; font:600 clamp(19px,1.8vw,24px) var(--ff-d); color:var(--ink); letter-spacing:-.03em; }
.atlas__info em{ display:block; margin-top:5px; font-size:14px; font-style:normal; color:var(--ink-2); }
.atlas__uebernehmen{
  display:inline-flex; align-items:center; gap:14px; min-height:46px; padding:0;
  color:var(--teal-dk); border-bottom:1px solid rgba(var(--brand-teal-text-rgb),.35);
  font:600 14px var(--ff-d); text-decoration:none; white-space:nowrap;
}
.atlas__uebernehmen:hover{ color:var(--ink); border-color:currentColor; }
.atlas__uebernehmen svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.atlas__seite{ grid-area:seite; padding-top:8px; }
.atlas__seitekopf{ font:500 11px var(--ff-d); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:15px; }
.atlas__filter{ display:flex; flex-wrap:wrap; gap:0 20px; border-bottom:1px solid var(--rule); padding-bottom:11px; margin-bottom:7px; }
.atlas__filter button{
  min-height:42px; padding:7px 0; border:0; border-bottom:2px solid transparent;
  background:none; font:500 12px var(--ff-d); color:var(--ink-2); cursor:pointer;
}
.atlas__filter button[aria-pressed="true"]{ border-color:var(--teal-dk); color:var(--teal-dk); }
.atlas__orte{ list-style:none; padding:0; margin:0; }
.atlas__orte li{ border-bottom:1px solid var(--rule); }
.atlas__ort{
  width:100%; min-height:55px; display:flex; align-items:center; gap:16px;
  padding:11px 0; border:0; background:none; text-align:left; cursor:pointer; color:var(--ink);
}
.atlas__nr{ font:500 10px var(--ff-d); color:var(--ink-3); flex:0 0 18px; }
.atlas__txt{ min-width:0; flex:1; transition:transform .25s var(--ease); }
.atlas__txt b{ display:block; font:550 15px var(--ff-d); line-height:1.4; color:var(--ink); }
.atlas__txt em{ display:block; margin-top:3px; color:var(--ink-3); font-size:12px; font-style:normal; line-height:1.4; }
.atlas__pf{ width:18px; height:18px; flex:none; fill:none; stroke:var(--teal-dk); stroke-width:1.5; opacity:0; transform:translateX(-4px); transition:opacity .2s ease,transform .2s ease; }
.atlas__ort.is-an .atlas__pf, .atlas__ort:hover .atlas__pf, .atlas__ort:focus-visible .atlas__pf{ opacity:1; transform:none; }
.atlas__ort.is-an .atlas__txt b, .atlas__ort.is-an .atlas__nr{ color:var(--teal-dk); }
.atlas__ort:hover .atlas__txt{ transform:translateX(4px); }
.atlas__ort.is-aus .atlas__nr{ color:var(--brand-subtle); }
.atlas__ort:focus-visible, .atlas__filter button:focus-visible{ outline:2px solid var(--teal-dk); outline-offset:2px; }
.atlas__legende{ display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:19px 0 0; list-style:none; font-size:11px; color:var(--ink-2); }
.atlas__legende li{ display:flex; align-items:center; gap:7px; }
.atlas__zeichen{ width:8px; height:8px; flex:none; border-radius:50%; }
.atlas__zeichen--sitz{ background:var(--teal-dk); }
.atlas__zeichen--ort{ border:1.5px solid var(--ink-2); }
.atlas__hinweis{ display:block; margin-top:10px; color:var(--ink-3); font-size:11px; }
.atlas__meldung{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.atlas__schluss{ display:flex; align-items:center; justify-content:space-between; gap:20px 40px; margin-top:44px; padding-top:24px; border-top:1px solid var(--rule); }
.atlas__schluss p{ font-size:14px; color:var(--ink-2); max-width:68ch; line-height:1.7; }
.atlas__schluss b{ display:block; color:var(--ink); font:600 16px var(--ff-d); margin-bottom:4px; }
.atlas__schluss .link{ margin:0; flex:none; }
@media (max-width:1000px){
  .atlas{ column-gap:32px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
  .atlas__kopf .head__main{ display:block; }
  .atlas__kopf .lead{ margin-top:18px; }
  .atlas__feld{ height:550px;background:var(--bg-2);}
}
@media (max-width:760px){
  .atlas{ grid-template-columns:minmax(0,1fr); grid-template-areas:"kopf" "feld" "fuss" "seite"; }
  .atlas__kopf{ margin-bottom:20px; }
  .atlas__kopf .h2{ max-width:21ch; }
  .atlas__feld{ height:440px; max-width:560px; justify-self:center;background:var(--bg-2);}
  .atlas__label{ font-size:12px; }
  .atlas__fuss{ padding:18px 0 23px; border-bottom:1px solid var(--rule); }
  .atlas__info{ min-height:86px; }
  .atlas__seite{ padding-top:30px; }
  .atlas__orte{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
  .atlas__ort{ min-height:74px; gap:9px; }
  .atlas__txt b{ font-size:14px; }
  .atlas__txt em{ font-size:11px; }
  .atlas__pf{ display:none; }
  .atlas__legende{ margin-top:22px; }
  .atlas__schluss{ margin-top:30px; flex-direction:column; align-items:flex-start; gap:14px; }
}
@media (max-width:370px){
  .atlas__feld{ height:410px;background:var(--bg-2);}
  .atlas__label{ font-size:10.5px; }
  .atlas__orte{ column-gap:14px; }
  .atlas__nr{ flex-basis:13px; }
  .atlas__info{ align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .atlas *, .atlas *::before{ animation:none !important; transition:none !important; }
}

/* ── Karriere ── */
.career{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px,3vw,52px);
  align-items:center; margin-top:clamp(44px,5vw,80px);
  padding:clamp(30px,3.4vw,52px);
  background:var(--navy);
  color:var(--brand-white);
  /* Helle Schrift auf der einheitlichen Navy-Fläche. */
  --on-dark-1:var(--brand-white);
  --on-dark-2:rgba(255,255,255,.96);
}
.career::after{
  content:""; position:absolute; right:-6%; top:-40%; width:46%; height:180%;
  background:rgba(255,255,255,.06);
  clip-path:polygon(38% 0, 100% 0, 62% 100%, 0 100%);
}
.career__txt{ position:relative; z-index:1; }
.career__label{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-2); }
.career h3{ margin-top:12px; font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); line-height:1.24; letter-spacing:-.02em; max-width:40ch; }
.career p{ margin-top:11px; font-size:var(--t-sm); color:var(--on-dark-1); max-width:60ch; }
.career .btn{ position:relative; z-index:1; background:var(--brand-white); border-color:var(--brand-white); color:var(--navy); }
.career .btn:hover{ background:var(--navy); border-color:var(--navy); color:var(--brand-white); }

/* ── Unternehmen ── */
.comp{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(28px,4vw,72px); align-items:start; }
.comp__fig .frame{ aspect-ratio:4/3; }
.comp__fig .frame img{ position:static; height:100%; }
.comp__txt .lead{ margin-top:0; }
.quote{ margin-top:clamp(26px,3vw,40px); padding-left:24px; border-left:2px solid var(--teal); }
.quote p{ font-family:var(--ff-d); font-weight:500; font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.45; letter-spacing:-.018em; }
.quote footer{ margin-top:12px; font-size:var(--t-label); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(20px,3vw,44px); margin-top:clamp(26px,3vw,42px); }
.facts > div{ border-top:1px solid var(--rule); padding:15px 0; }
.facts dt{ font-size:var(--t-label); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.facts dd{ margin-top:5px; font-family:var(--ff-d); font-weight:600; font-size:var(--t-body); }

/* ── FAQ ── */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 0; cursor:pointer; list-style:none;
  font-family:var(--ff-d); font-weight:600; font-size:clamp(1rem,1.3vw,1.16rem);
  letter-spacing:-.015em; transition:color var(--d-base) ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--teal-dk); }
.faq summary i{ position:relative; width:16px; height:16px; flex:none; }
.faq summary i::before, .faq summary i::after{
  content:""; position:absolute; left:0; top:50%; width:16px; height:1.5px; background:currentColor;
  transition:transform var(--d-slow) var(--ease);
}
.faq summary i::after{ transform:rotate(90deg); }
.faq details[open] summary i::after{ transform:rotate(0); }
.faq__body{ padding-bottom:26px; max-width:78ch; }
.faq__body p{ max-width:78ch; }
.faq__body p{ color:var(--ink-2); font-size:var(--t-sm); }
.faq details[open] .faq__body{ animation:panelIn var(--d-slow) var(--ease) both; }

/* ── Kontakt ── */
.contact{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,4vw,64px); align-items:start; }
.form{ display:grid; gap:18px; }
.form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.field{ display:grid; gap:8px; }
.field > span{ font-size:var(--t-label); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-3); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px;
  background:rgba(255,255,255,.05); border:1px solid var(--rule-2); border-radius:2px;
  color:var(--brand-white); font-size:var(--t-sm);
  transition:border-color var(--d-base) ease, background var(--d-base) ease;
}
.field textarea{ resize:vertical; }
/* Optionslisten rendert das Betriebssystem — Farben explizit setzen */
.field select option, .field--light select option, .konf__ctrl select option{
  background:var(--brand-white); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); background:rgba(255,255,255,.08); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.5); }
.field input:user-invalid, .field textarea:user-invalid{ border-color:#E4726A; }
.form .btn{ justify-self:start; margin-top:4px; }
.form__note{ font-size:var(--t-xs); color:var(--on-dark-3); max-width:62ch; }
.form__note.is-sent{ color:var(--teal-hi); }

.cinfo{ display:grid; align-content:start; border-top:1px solid var(--rule-2); }
.cinfo > div{ padding:20px 0; border-bottom:1px solid var(--rule-2); }
.cinfo span{ display:block; font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:9px; }
.cinfo a{ display:inline-block; padding-block:2px; font-family:var(--ff-d); font-weight:600; font-size:var(--t-body); transition:color var(--d-base) ease; }
.cinfo a:hover{ color:var(--teal-hi); }
.cinfo p{ font-size:var(--t-sm); color:var(--on-dark-2); }

/* ── Honigtopf ──
   Nicht display:none — das überspringen viele Bots gezielt. Das Feld steht
   im Fluss, liegt aber außerhalb des Sichtfelds und ist nicht ansteuerbar. */
/* Für Menschen unsichtbar, für Formularroboter ausfüllbar — aber ohne
   Kasten außerhalb des Viewports. */
.hp{
  position:absolute; left:0; top:auto;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  opacity:0; pointer-events:none;
}
.hp input{ width:1px; }

/* ── Eingegangen ──
   Tritt an die Stelle des Formulars. Bewusst kein Dialogfenster: Wer gerade
   sechs Felder ausgefüllt hat, soll das Ergebnis dort sehen, wo er gearbeitet
   hat, und die Vorgangsnummer mitnehmen können. */
.sent{
  --cut:clamp(28px,3.4vw,56px);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  padding:clamp(28px,3.4vw,46px);
  background:var(--bg); color:var(--ink);
  border:1px solid var(--rule);
  animation:sentIn var(--d-slow) var(--ease) both;
}
.sec--dark .sent{
  background:rgba(255,255,255,.05); color:var(--on-dark-1);
  border-color:var(--rule-2); backdrop-filter:blur(4px);
}
.sent:focus{ outline:none; }
@keyframes sentIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.sent__mark{
  display:grid; place-items:center;
  width:52px; height:52px; margin-bottom:var(--s-5);
  background:var(--teal); color:var(--brand-navy);
}
.sent__mark svg{
  width:26px; height:26px;
  fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.sent__title{
  margin:0; font-family:var(--ff-d); font-weight:600;
  font-size:var(--t-h3); line-height:1.2; letter-spacing:-.02em;
}
.sec--dark .sent__title{ color:var(--brand-white); }
.sent__ref{
  margin:10px 0 0; font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.sent__ref b{
  font-family:var(--ff-d); color:var(--teal-dk);
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.sec--dark .sent__ref{ color:var(--on-dark-3); }
.sec--dark .sent__ref b{ color:var(--teal-hi); }

.sent__steps{
  margin:var(--s-6) 0 0; padding:0; list-style:none;
  counter-reset:sentschritt;
}
.sent__steps li{
  position:relative; counter-increment:sentschritt;
  padding:14px 0 14px 42px; border-top:1px solid var(--rule);
  font-size:var(--t-sm); line-height:1.6; color:var(--ink-2);
}
.sent__steps li::before{
  content:counter(sentschritt,decimal-leading-zero);
  position:absolute; left:0; top:14px;
  font-family:var(--ff-d); font-weight:700; font-size:var(--t-xs);
  color:var(--teal-dk); font-variant-numeric:tabular-nums;
}
.sent__steps li b{ color:var(--ink); font-weight:600; }
.sec--dark .sent__steps li{ border-top-color:var(--rule-2); color:var(--on-dark-2); }
.sec--dark .sent__steps li::before{ color:var(--teal-hi); }
.sec--dark .sent__steps li b{ color:var(--brand-white); }

.sent__mail{
  margin:var(--s-5) 0 0; padding-top:var(--s-5);
  border-top:1px solid var(--rule);
  font-size:var(--t-xs); line-height:1.6; color:var(--ink-3);
}
.sent__mail b{ color:var(--ink-2); word-break:break-word; }
.sec--dark .sent__mail{ border-top-color:var(--rule-2); color:var(--on-dark-3); }
.sec--dark .sent__mail b{ color:var(--on-dark-1); }

/* Schlägt der Versand fehl, muss der Hinweis anders aussehen als eine Bestätigung */
.form__note.is-error{ color:#FFB4A8; }
.sec:not(.sec--dark) .form__note.is-error{ color:#B3261E; }

/* ═══════════ Fuß ═══════════ */
.ft{
  position:relative; overflow:hidden;
  background:var(--navy-deep); color:var(--brand-white); padding-block:clamp(52px,6vw,82px) 28px;background-image:none;}
/* Teal-Faden als Abschluss der Seite */
.ft::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:var(--brand-line-dark);
}
.ft__top{ display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr)); gap:clamp(26px,3.5vw,56px); padding-bottom:clamp(34px,4vw,58px); }
.ft__brand img{ height:32px; width:auto; margin-bottom:18px; }
.ft__brand p{ font-size:var(--t-sm); color:var(--on-dark-2); max-width:38ch; }
.ft__col{ display:grid; align-content:start; gap:11px; }
.ft__col h3{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:4px; }
.ft__col a, .ft__col p{ font-size:var(--t-sm); color:var(--on-dark-2); transition:color var(--d-base) ease; }
.ft__col a{ display:inline-block; padding-block:3px; }        /* 24 px Trefferhöhe */
.ft__col a:hover{ color:var(--teal-hi); }
.ft__bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 30px; padding-top:24px; border-top:1px solid var(--rule-2); font-size:var(--t-xs); color:var(--on-dark-3); }
.ft__bot nav{ display:flex; gap:22px; }
.ft__bot a{ display:inline-block; padding-block:3px; }
.ft__bot a:hover{ color:var(--brand-white); }

/* Scroll-Hinweis */

/* ═══════════ Direktkontakt am Rand ═══════════ */
.dock{
  position:fixed; right:0; top:50%; translate:0 -50%; z-index:60;
  display:grid; gap:1px; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16); border-right:0;
}
.dock a{
  position:relative; display:grid; place-items:center;
  width:52px; height:52px; background:var(--navy); color:var(--brand-white);
  transition:background var(--d-base) ease, color var(--d-base) ease;
}
.dock a:hover{ background:var(--teal); color:var(--brand-navy); }
.dock svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.dock span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
/* Beschriftung fährt beim Überfahren heraus */
.dock a::after{
  content:attr(data-tip); position:absolute; right:100%; top:0; height:100%;
  display:grid; place-items:center; padding:0 16px; white-space:nowrap;
  background:var(--navy); color:var(--brand-white); font-size:var(--t-xs); font-weight:500;
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}
.dock a:hover::after{ opacity:1; transform:none; }

/* ═══════════ Zurück nach oben ═══════════ */
.totop{
  position:fixed; right:clamp(16px,2.4vw,34px); bottom:clamp(16px,2.4vw,34px); z-index:70;
  width:52px; height:52px; display:grid; place-items:center;
  background:var(--navy); border-radius:50%;
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease), background var(--d-base) ease;
}
.totop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--teal-dk); }
.totop__ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.totop__ring circle{ fill:none; stroke:rgba(255,255,255,.18); stroke-width:1.5; }
.totop__bar{ stroke:var(--teal-hi) !important; stroke-linecap:round; stroke-dasharray:129; stroke-dashoffset:129; }
.totop__arrow{ position:relative; width:18px; height:18px; fill:none; stroke:var(--brand-white); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ═══════════ Unterseiten: Kopfbereich ═══════════ */
.phero{
  position:relative; overflow:hidden;
  padding-block:clamp(120px,14vw,180px) clamp(46px,6vw,84px);
  background:var(--bg);
  border-bottom:1px solid var(--rule);
}
/* Angeschnittenes Stimmungsbild rechts — gibt jeder Unterseite einen Anker,
   ohne das Motiv aus dem ersten Kapitel zu wiederholen. */
.phero__fig{
  position:absolute; inset:0 0 0 auto; width:min(46%,720px); z-index:0;
  clip-path:polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events:none;
}
.phero__fig img{ width:100%; height:100%; object-fit:cover; }
.phero__fig::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, var(--bg) 0%, rgba(255,255,255,.72) 34%, rgba(255,255,255,.28) 100%);
}
.phero .wrap{ position:relative; z-index:1; }
.phero__h1, .phero__lead{ max-width:min(19ch, 62%); }
.phero__lead{ max-width:min(58ch, 60%); }
.phero__h1{
  margin-top:20px;
  font-family:var(--ff-d); font-weight:700;
  font-size:var(--t-h1);
  line-height:1.06; letter-spacing:-.034em; max-width:19ch;
  text-wrap:balance;
}
.phero__lead{
  margin-top:clamp(18px,2.2vw,28px); max-width:62ch;
  font-size:var(--t-lead); line-height:1.74; color:var(--ink-2);
  hyphens:auto; -webkit-hyphens:auto;
}
.phero__act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,38px); }

/* ── Brotkrume ── */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-bottom:clamp(20px,2.4vw,30px);
  font-size:var(--t-xs); color:var(--ink-3);
}
.crumb a{ padding-block:3px; transition:color var(--d-base) ease; }
.crumb a:hover{ color:var(--teal-dk); }
.crumb span[aria-hidden]{ opacity:.5; }
.crumb [aria-current]{ color:var(--ink-2); }

/* ── Leistungswechsler ── */
.lswitch{ background:var(--bg-2); border-bottom:1px solid var(--rule); }
.lswitch__in{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2.4vw,34px); padding-block:16px; }
.lswitch__label{
  font-size:var(--t-label); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.lswitch a{
  position:relative; padding:6px 0; font-size:var(--t-sm); font-weight:500;
  color:var(--ink-2); white-space:nowrap; transition:color var(--d-base) ease;
}
.lswitch a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--teal); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-slow) var(--ease);
}
.lswitch a:hover{ color:var(--ink); }
.lswitch a:hover::after, .lswitch a.is-active::after{ transform:scaleX(1); }
.lswitch a.is-active{ color:var(--ink); font-weight:600; }

/* ── Stellenliste ── */
.jobs{ border-top:1px solid var(--rule); }
.jobs li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(16px,3vw,44px);
  align-items:center; padding:clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--rule);
  transition:background var(--d-base) ease;
}
.jobs li:hover{ background:var(--bg-2); }
.jobs__tag{
  display:inline-block; margin-bottom:10px;
  font-size:var(--t-label); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal-dk);
}
.jobs h3{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); letter-spacing:-.02em; }
.jobs p{ margin-top:8px; font-size:var(--t-sm); color:var(--ink-2); max-width:62ch; hyphens:auto; -webkit-hyphens:auto; }

/* ── Konditionen ── */
.cond{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.5vw,64px); }
.cond__col h3{
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); letter-spacing:-.018em;
  padding-bottom:14px; border-bottom:2px solid var(--teal);
}
.cond__col .marks{ margin-top:6px; }

/* ═══════════ Rechtsseiten ═══════════ */
.legal{ padding-top:clamp(120px,14vw,170px); padding-bottom:var(--sec-y); }
/* Der untere Wert der Skala war für „Datenschutzerklärung" zu groß: das
   Wort ragte auf 320 px aus der Spalte. Kleinerer Anfangswert, dazu der
   Notumbruch — der greift nur, wenn ein Wort wirklich nicht passt. */
.legal h1{
  font-family:var(--ff-d); font-weight:600;
  font-size:clamp(1.62rem,3.4vw,3rem); letter-spacing:-.03em;
  overflow-wrap:break-word;
}
.legal h2{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); letter-spacing:-.018em; margin-top:44px; padding-top:22px; border-top:1px solid var(--rule); }
.legal p, .legal li{ margin-top:12px; color:var(--ink-2); max-width:76ch; font-size:var(--t-sm); }
.legal ul{ list-style:disc; padding-left:20px; }
.legal .todo{ background:#FFF6E5; border-left:2px solid #E0A33A; padding:14px 18px; color:#7A5A1E; font-size:var(--t-sm); }
.legal a{ border-bottom:1px solid var(--rule); }
.legal a:hover{ border-color:var(--teal); color:var(--teal-dk); }

/* ═══════════ Reveals ═══════════ */
[data-rv]{ opacity:1; transform:none; }
[data-rv].is-in{ opacity:1; transform:none; }

/* Kapitelüberschriften kommen etwas tiefer und ruhiger als der übrige Inhalt.
   Keine Maske: Ein vollständig weggeclipptes Element gilt dem IntersectionObserver
   als unsichtbar, bekommt seine Klasse nie und bliebe dauerhaft versteckt. */
.h2[data-rv], .phero__h1[data-rv]{
  transform:none;
  transition:opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease);
}
.h2[data-rv].is-in, .phero__h1[data-rv].is-in{ transform:none; }

/* Die Kapitelziffer setzt den Takt: Ziffer erscheint, Strich zieht nach */
.head__no[data-rv]{ transition-duration:.6s; }
.head__no::after{ transform:scaleX(1); transform-origin:left; transition:transform var(--d-reveal) var(--ease) .25s; }
.head__no[data-rv].is-in::after{ transform:scaleX(1); }
[data-rv].ln{ opacity:1; transform:none; }
.hero__h1 .ln:nth-child(2){ transition-delay:.07s; }
.hero__h1 .ln:nth-child(3){ transition-delay:.14s; }
.sectors li:nth-child(2), .quality article:nth-child(2), .partners .pc:nth-child(2){ transition-delay:.08s; }
.sectors li:nth-child(3), .quality article:nth-child(3), .partners .pc:nth-child(3){ transition-delay:.16s; }
.sectors li:nth-child(4), .quality article:nth-child(4){ transition-delay:.24s; }
.sectors li:nth-child(5){ transition-delay:.32s; }
.sectors li:nth-child(6){ transition-delay:.40s; }
.faq details:nth-child(2){ transition-delay:.05s; }
.faq details:nth-child(3){ transition-delay:.10s; }
.faq details:nth-child(4){ transition-delay:.15s; }
.faq details:nth-child(5){ transition-delay:.20s; }
.faq details:nth-child(6){ transition-delay:.25s; }

/* ═══════════ Responsive ═══════════ */
@media (max-width:1180px){
  .hd__nav{ display:none; }
  .hd__burger{ display:block; }
  .tabs{ grid-template-columns:1fr; }
  .tabs__nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:0; }
  .tabs__nav button{ border-bottom:0; border-top:2px solid var(--rule); padding:16px 10px 18px 0; }
  .tabs__nav button::before{ width:100%; height:2px; top:-2px; bottom:auto; transform:scaleX(0); transform-origin:left; }
  .tabs__nav button.is-on{ padding-left:0; }
  .tabs__nav button.is-on::before{ transform:scaleX(1); }
  .sectors{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quality{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Einspaltig wird die Karte rund 1000 px breit — der Fließtext liefe dann
     auf 130 Zeichen pro Zeile. Lesbar sind etwa 60 bis 80. */
  .partners{ grid-template-columns:1fr; }
  .pc p, .pc .marks{ max-width:72ch; }
  .join{ grid-template-columns:1fr; }
  .seals{ grid-template-columns:1fr; }
  /* Die Verbindungslinie gilt nur im vierspaltigen Ablauf, sonst zeigt sie ins Leere */
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:34px; }
  .steps li:not(:last-child)::after{ display:none; }
}

@media (max-width:1080px){
}

@media (max-width:900px){
  .split, .comp, .contact{ grid-template-columns:1fr; }
  .comp__fig .frame{ aspect-ratio:16/10; }
  .hero{ min-height:auto; }
  /* Auf schmalen Displays liegt das Stimmungsbild hinter dem Text, nicht daneben */
  .phero__fig{ width:100%; clip-path:none; opacity:.5; }
  .phero__fig::after{ background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 60%, var(--bg) 100%); }
  .phero__h1, .phero__lead{ max-width:none; }
  .panel{ grid-template-columns:1fr; }
  .head{ grid-template-columns:1fr; }
  .head__no{ margin-bottom:12px; }
  /* Marken und Hinweis stapeln, sonst quetscht der Hinweis die vier Spalten */
  .film__caps{ grid-template-columns:1fr; }
  .film__ch{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px; }
  /* Ohne Begrenzung lief der Hinweis zwischen 640 und 900 px auf über
     100 Zeichen pro Zeile — die Begrenzung wird gelockert, nicht aufgehoben. */
  .film__hint{ max-width:62ch; }
}

/* ── Hero-Überschrift auf schmalen Displays ──
   Die drei Zeilen der Überschrift sind bewusst gesetzt. Bei einer festen
   Mindestgröße von 2,5 rem fehlten „Ein Vertragspartner" auf einem 375-px-
   Display genau drei Pixel — die Zeile brach um und „Ein" stand allein.
   Unterhalb von 560 px wächst die Größe deshalb mit dem Viewport mit. */
@media (max-width:560px){
  :root{ --t-display:clamp(1.95rem, 10.2vw, 2.6rem); }
}

@media (max-width:640px){
  /* Ohne Beschriftung bleibt nur das Icon — die Trefferfläche muss trotzdem 24 px messen */
  .hd__tel span{ display:none; }
  .hd__tel{ min-width:34px; justify-content:center; }

  /* Mikro-Auszeichnungen sind auf kleinen Displays sonst kaum lesbar */
  .strip__label, figcaption, .dia__quelle, .steps__meta, .join__label,
  .join__cols h4, .quality__no, .form__note, .ft__bot, .quote footer,
  .facts dt, .hero__metrics dt, .cinfo span, .field > span, .field--light > span,
  .atlas__marke, .atlas__seitekopf{ font-size:var(--t-label); }

  /* Lange Beschriftungen dürfen umbrechen statt überzulaufen */
  .btn{ white-space:normal; text-align:center; }
  .hd__act .btn--sm{ display:none; }
  /* Auf Seiten ohne Burger-Menü (Impressum, Datenschutz, 404, Danke) ist
     dieser Knopf der einzige beschriftete Rückweg — dort bleibt er stehen. */
  .hd--bare .hd__act .btn--sm{ display:inline-flex; }
  .hd__logo{ height:30px; }
  /* Die festen Umbrüche der Reiter passen auf schmalen Displays nicht mehr */
  .tabs__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
  .tabs__nav button{ grid-template-columns:auto minmax(0,1fr); }
  .tabs__name br{ display:none; }
  /* Trennung mit Strich statt hartem Bruch mitten im Wort. break-word ist
     das Netz darunter: findet die Silbentrennung keine Stelle, bricht das
     Wort trotzdem, statt aus dem Knopf zu laufen. */
  .tabs__name{
    font-size:var(--t-sm); hyphens:auto; -webkit-hyphens:auto;
    overflow-wrap:break-word;
  }
  .sectors, .quality, .steps{ grid-template-columns:1fr; }
  /* Der Einstieg wird zur Spalte — nebeneinander bleibt vom Text nichts übrig */
  .film__cue{ flex-direction:column; gap:14px; text-align:center; padding-inline:20px; }
  .film__cue__txt{ font-size:var(--t-body); }
  /* Die weite Sperrung sprengt auf 320 px die Bühnenbreite */
  .film__cue__txt b{ letter-spacing:.08em; }
  .film__ch{ grid-template-columns:1fr; gap:0; }
  .film__ch button{ padding-block:12px 12px; }
  .film__time{ display:none; }
  .seals__list{ grid-template-columns:1fr; gap:22px; }
  .cond{ grid-template-columns:1fr; }
  .jobs li{ grid-template-columns:1fr; }
  .jobs li .btn{ justify-self:start; }
  .steps li{ padding-top:22px; }
  .facts, .form__row{ grid-template-columns:1fr; }
  .join__cols{ grid-template-columns:1fr; }
  .join__form .btn{ justify-self:stretch; }
  .career{ grid-template-columns:1fr;background:var(--navy);}
  .ft__top{ grid-template-columns:1fr 1fr; }
  .ft__brand{ grid-column:1 / -1; }
  .btn{ width:100%; }
  .form .btn{ justify-self:stretch; }
  .totop{ width:46px; height:46px; }
  /* Am Rand ist auf dem Handy kein Platz — die Leiste wandert an den Fuß */
  .dock{
    top:auto; bottom:0; right:0; left:0; translate:0;
    grid-auto-flow:column; grid-auto-columns:1fr; border:0; border-top:1px solid rgba(255,255,255,.16);
    /* Am Rand erzeugt der helle Leistengrund die Trennlinien zwischen den
       Kacheln. Am Fuß darf er nicht durchscheinen: das Polster für den
       Home-Indikator zeigte ihn sonst als hellen Balken unter den Knöpfen.
       Deshalb hier durchgehend Navy, Linien als Rand der Kacheln. */
    background:var(--navy); gap:0;
  }
  .dock a + a{ border-left:1px solid rgba(255,255,255,.16); }
  .dock a{ width:auto; height:54px; }
  .dock a::after{ display:none; }
  .dock span{ position:static; width:auto; height:auto; clip-path:none; font-size:var(--t-label); margin-left:8px; }
  .dock a{ grid-auto-flow:column; display:flex; align-items:center; justify-content:center; }
  /* Mit der Kontaktleiste am Fuß würde der Pfeil nur Inhalt verdecken */
  .totop{ display:none; }
  .ft__col h3{ font-size:var(--t-label); }
  /* Die feste Kontaktleiste darf den Fuß nicht überdecken. Der Abstand
     gehört an den Fuß selbst — am body war er weiß und erschien als
     helle Fläche unter dem dunklen Fuß. Nur die Startseite trägt die
     Leiste, deshalb bekommt auch nur sie den zusätzlichen Raum. */
  body:has(.dock) .ft{ padding-bottom:calc(28px + 54px); }
}

/* ═══════════ Druck ═══════════ */
@media print{
  .hd, .mob, .totop, .dock, .konf, .hero__act, .form, .join__form, .career .btn{ display:none !important; }
  .ft{ padding-bottom:0 !important;background-image:none;}
  body{ font-size:11pt; color:#000; background:var(--brand-white); }
  .sec, .hero{ padding-block:14pt; break-inside:avoid; }
  .sec--dark{ background:var(--brand-white) !important; color:#000 !important;background-image:none;}
  .sec--dark .h2, .sec--dark .feats b{ color:#000 !important; }
  .sec--dark .lead, .sec--dark .feats span, .cinfo p{ color:#333 !important; }
  .cinfo a, .cinfo span{ color:#000 !important; }
  .frame.reveal::after{ display:none; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .panel[hidden]{ display:grid !important; }
  .faq details{ break-inside:avoid; }
  .faq__body{ display:block !important; }
  a[href^="http"]::after, a[href^="mailto"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}

/* ═══════════ Reduzierte Bewegung ═══════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .head__no::after{ transform:none !important; }
  .ln > span{ transform:none !important; }
  .steps li{ border-top-color:var(--teal) !important; }
  .steps__no{ color:var(--navy) !important; }
  /* Der Film startet hier nicht von selbst (siehe app.js) — das Standbild bleibt stehen */
  .film__v{ transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FORMULARE — Zustände
   Ein Formular ohne sichtbare Zustände fühlt sich tot an. Fokus,
   Fehler und Erfolg bekommen je eine eigene, ruhige Rückmeldung.
   ═══════════════════════════════════════════════════════════════ */

/* Fokus: Rahmen plus weicher Ring, ohne Sprung in der Box */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.field--light input:focus-visible, .field--light select:focus-visible, .field--light textarea:focus-visible{
  outline:none;
  border-color:var(--teal-hi);
  box-shadow:0 0 0 3px rgba(var(--brand-teal-light-rgb),.22);
}
/* Beim Klick in ein Feld der Schnellanfrage lagen zwei Ringe übereinander:
   der Rahmen der Umhüllung und zusätzlich der eigene Umriss des Auswahlfeldes
   darin. Der innere begann erst hinter dem Symbol und lief damit versetzt zum
   äußeren — es sah aus wie ein Fehler. Den Zustand zeigt jetzt allein die
   Umhüllung, genau wie in den übrigen Formularen der Seite (Zeile 1589). */

/* Fehler erst nach dem Verlassen des Feldes, nicht beim Tippen */
.field input:user-invalid, .field textarea:user-invalid,
.field--light input:user-invalid, .field--light textarea:user-invalid{
  border-color:#E4726A;
  background:rgba(228,114,106,.10);
}
.field:has(input:user-invalid) > span::after,
.field:has(textarea:user-invalid) > span::after{
  content:" — bitte prüfen";
  color:#E4726A; letter-spacing:0; text-transform:none; font-weight:400;
}

/* Pflichtfelder dezent markieren */
.field:has(input[required]) > span::before,
.field:has(textarea[required]) > span::before{
  content:"• "; color:var(--teal-hi);
}

/* Erfolgsmeldung nach dem Absenden */
.form__note.is-sent{ display:flex; align-items:flex-start; gap:var(--s-2); color:var(--teal-hi); }
.form__note.is-sent::before{
  content:""; flex:none; width:16px; height:16px; margin-top:2px;
  background:var(--teal-hi);
  clip-path:polygon(43% 72%, 12% 44%, 20% 35%, 42% 55%, 79% 20%, 87% 29%);
}

/* Auswahlfelder mit eigenem Pfeil statt Systemdarstellung */
.field select, .field--light select, .konf__ctrl select{
  appearance:none; -webkit-appearance:none;
  background-repeat:no-repeat;
  background-position:right var(--s-3) center;
  background-size:11px;
  padding-right:var(--s-6);
}
.field select, .field--light select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Sehr schmale Geräte (320 px) ──
   Zwei Fußzeilenspalten passen dort nicht mehr; lange E-Mail-Adressen
   sprengen sonst das Raster. */
@media (max-width:380px){
  .ft__top{ grid-template-columns:1fr; gap:var(--s-6); }
}

/* ── Sehr große Bildschirme ──
   Ab 1800 px darf der Inhalt etwas atmen, ohne auseinanderzufallen. */
@media (min-width:1800px){
  :root{ --wrap:1420px; }
  /* Die Begrenzung stammte aus der zweispaltigen Fassung, in der die
     Textspalte nur 46 % der Breite hatte. Über die volle Breite trägt die
     Aussage deutlich mehr; die Zeilenzahl hält max-width:15ch in Schach. */
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Safe Areas, Touch-Bedienung, Tabletstufe
   Steht bewusst am Dateiende: gleiche Spezifität, spätere Position.
   Layoutrelevantes greift nur unter 1080 px oder auf Touch-Geräten,
   die Desktopdarstellung mit Maus bleibt unberührt.
   ═══════════════════════════════════════════════════════════════ */

/* ── iOS Safe Areas ──
   Ohne diese Polster liegen feste Elemente unter Notch und Home-Indikator. */
@supports (padding:env(safe-area-inset-bottom)){
  .hd__in{
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
  }
  .totop{ bottom:calc(clamp(16px,2.4vw,34px) + env(safe-area-inset-bottom)); }
  @media (max-width:640px){
    .dock{
      padding-bottom:env(safe-area-inset-bottom);
      padding-left:env(safe-area-inset-left);
      padding-right:env(safe-area-inset-right);
    }
    /* Der Fuß reicht bis unter den Home-Indikator und bleibt dort dunkel;
       sein Text hält Abstand. */
    .ft{ padding-bottom:calc(28px + env(safe-area-inset-bottom));background-image:none;}
    body:has(.dock) .ft{ padding-bottom:calc(28px + 54px + env(safe-area-inset-bottom)); }
  }
}

/* ── Touch-Ziele ──
   Primäre Bedienelemente auf 48 px, gestapelte Textlinks auf 44 px.
   Bei Listen wächst die Fläche über Innenabstand statt über eine
   aufgespannte Fläche — sonst verschlucken benachbarte Ziele einander. */
@media (pointer:coarse), (max-width:1080px){

  /* Der Sekundärlink im Hero ist nur so hoch wie seine Zeile. Die Fläche
     wächst über ein Pseudo-Element, damit die Unterlinie am Text bleibt. */
  .hero__zweit{ position:relative; }
  .hero__zweit::before{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:48px; transform:translateY(-50%);
  }

  /* Kopfzeile */
  /* Innenabstand mit negativem Außenabstand verrechnet: die Fläche wächst,
     die Höhe der festen Kopfzeile bleibt unverändert */
  .hd__brand{ display:flex; align-items:center; padding-block:9px; margin-block:-9px; }
  .hd__burger{ width:48px; height:48px; padding:15px 10px; }
  .hd__nav a{ padding-block:14px; margin-block:-6px; }

  /* Der Leistungswechsler: mehr Fläche, der Unterstrich bleibt am Text */
  .lswitch a{ padding-block:12px; }
  .lswitch a::after{ bottom:6px; }

  /* Brotkrume — Höhe und Breite wachsen über Innenabstand, der negative
     Außenabstand hält die Wörter an ihrem Platz. „Start" misst sonst nur
     26 Pixel in der Breite. */
  .crumb a{ padding-block:13px; padding-inline:9px; margin-inline:-9px; }

  /* Textlink mit Pfeil: eigene Fläche, damit die Unterlinie am Text bleibt */
  .link{ position:relative; }
  .link::before{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:48px; transform:translateY(-50%);
  }

  /* Fußzeile: Innenabstand statt Zwischenraum, dadurch keine Überlappung */
  .ft__col{ gap:0; }
  .ft__col a{ padding-block:10px; }
  .ft__bot a{ padding-block:10px; }
  .ft__bot{ gap:4px 30px; }

  /* Bedienelemente und Formular */
  .btn{ min-height:48px; }
  .btn--sm{ min-height:44px; }
  .field input, .field select, .field textarea,
  .field--light input, .field--light select, .field--light textarea,
  .faq summary{ min-height:52px; }
  /* Der Aufklapper der Wertetabelle maß nur 19 Pixel in der Höhe */
  .dia__mehr summary{ min-height:44px; }

  /* Auf Touch bleibt ein Hover-Zustand nach dem Tippen kleben */
  .pc:hover, .jobs li:hover, .card:hover, .sectors li:hover{ transform:none; }
}

@media (max-width:640px){
  /* Ohne Beschriftung bleibt nur das Icon — die Fläche muss trotzdem greifbar sein */
  .hd__tel{ min-width:48px; min-height:48px; }
}

/* ── Sehr schmale Displays: 480 px und darunter ──
   Zwei Reiterspalten lassen für den Namen rund 95 Pixel — „Trockenbau-
   arbeiten" braucht mehr. Der Text lief aus dem Knopf heraus und zog das
   Dokument acht Pixel breiter als den Bildschirm; genau daran ließ sich die
   Seite seitlich verschieben. Eine Spalte, dafür der im Markup gesetzte
   Zeilenumbruch zurück. */
@media (max-width:480px){
  .tabs__nav{ grid-template-columns:minmax(0,1fr); }
  .tabs__name br{ display:inline; }

  /* Notumbruch für lange Komposita. Er greift erst, wenn ein Wort auch
     nach der Silbentrennung nicht in seine Spalte passt — im Normalfall
     ist er nicht zu sehen. */
  h1, h2, h3, h4, .h2, .btn, dt, dd, b, em, figcaption, caption, th, td{
    overflow-wrap:break-word;
  }
}

/* ── Tabletstufe 641–900 px ──
   Zwischen Handy und Desktop fehlte eine Stufe: die vierspaltige
   Fußzeile lief hier über, Dreispalter standen zu eng. */
@media (min-width:641px) and (max-width:900px){
  .ft__top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ft__brand{ grid-column:1 / -1; }
  .seals__list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sectors, .quality{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Lange Adressen und E-Mails dürfen ihre Spalte nicht sprengen */
.ft__col a, .ft__col p, .cinfo a{ overflow-wrap:anywhere; }

/* ── Ankersprünge unter der festen Kopfzeile ──
   Ohne diesen Versatz verschwindet die angesprungene Überschrift dahinter. */
html{ scroll-padding-top:84px; }
@media (max-width:640px){ html{ scroll-padding-top:74px; } }

/* ── iOS: Automatischer Zoom beim Antippen eines Feldes ──
   Safari zoomt hinein, sobald ein Feld unter 16 px liegt. Danach bleibt die
   Seite vergrößert stehen. Auf Touch-Geräten deshalb exakt 16 px. */
@media (pointer:coarse), (max-width:1080px){
  .field input, .field select, .field textarea,
  .field--light input, .field--light select, .field--light textarea{ font-size:16px; }
}

/* ── Tippen und Wischen ── */
/* Der graue Kasten, den iOS beim Antippen einblendet, passt nicht zum Design */
a, button, summary, [role="button"]{ -webkit-tap-highlight-color:rgba(var(--brand-teal-rgb),.14); }

/* ── Nachträge aus der Messung ── */

/* Bei 320 px sprengten Logo, Telefon und Menüknopf zusammen die Kopfzeile */
@media (max-width:380px){
  /* Bei 360 px fehlten drei Pixel, damit Führungsstrich und Einordnung in
     eine Zeile passen — der Strich rutschte allein in eine eigene Zeile
     und führte nichts mehr an. Etwas engere Sperrung löst das. */
  .hero__zeile{ letter-spacing:.14em; }
  .hd__logo, .hd.is-stuck .hd__logo{ height:24px; }
  .hd__in{ gap:10px; }
  /* mit dem kleineren Logo braucht die Marke etwas mehr Innenabstand */
  .hd__brand{ padding-block:11px; margin-block:-11px; }
}

@media (pointer:coarse), (max-width:1080px){
  /* Telefonnummer in der Kopfzeile: Fläche wächst, Kopfzeilenhöhe bleibt */
  .hd__tel{ padding-block:14px; margin-block:-8px; }
  /* Telefon und E-Mail im Kontaktblock werden häufig angetippt */
  .cinfo a{ display:inline-block; padding-block:9px; }
  .cinfo div{ margin-block:-4px; }
  /* Rechtslinks im Fuß: mit der kleineren Schrift reichten 10 px nicht */
  .ft__bot a{ padding-block:13px; }
}

/* ── Querformat auf flachen Displays ──
   Ein quer gehaltenes Handy ist rund 390 px hoch. Mit der Mindesthöhe von
   640 px läge die Überschrift dann unterhalb der Falte, und der Besucher
   sähe beim Aufruf nur das Bild. Deshalb hier über die Höhe steuern. */
@media (orientation:landscape) and (max-height:520px){
  /* Quer gehalten ist Höhe knapper als Breite: die Aussage rückt hoch,
     das Registerband bleibt am Fuß erreichbar. */
  .hero{ min-height:auto; padding-top:clamp(76px,15vh,110px); }
  .hero__h1{ font-size:clamp(1.9rem,5.4vw,2.8rem); }

  .phero{ padding-block:clamp(92px,16vh,130px) clamp(30px,6vh,56px); }
}
  
/* ── Mobilmenü auf niedrigen Displays ──
   Zwölf Einträge ergeben rund 600 px. Zentriert und ohne Scrollmöglichkeit
   würden auf einem niedrigen oder quer gehaltenen Display der erste und der
   letzte Eintrag abgeschnitten — und wären dann nicht mehr erreichbar.
   `margin:auto` zentriert weiterhin, schneidet bei Überlauf aber nicht ab. */
.mob{ align-items:flex-start; overflow-y:auto; overscroll-behavior:contain; }
.mob nav{
  margin-block:auto;
  padding-top:clamp(84px,12vh,112px);
  padding-bottom:calc(clamp(28px,6vh,48px) + env(safe-area-inset-bottom, 0px));
}
@media (orientation:landscape) and (max-height:520px){
  .mob a{ padding:9px 0; font-size:1.15rem; }
  .mob nav{ padding-top:76px; }
}

/* ── Freiraum für den Nach-oben-Knopf ──
   Er schwebt fest unten rechts. Am Seitenende lag er dadurch über
   „Impressum" und „Datenschutz" — auf dem Tablet rund 40 px, auf dem
   Desktop noch 10 px. Die Rechtslinks weichen ihm jetzt aus.
   Unter 641 px ist der Knopf ausgeblendet, dort ist nichts nötig. */
@media (min-width:641px) and (max-width:1180px){
  .ft__bot{ padding-right:58px; }
}
@media (min-width:1181px) and (max-width:1560px){
  .ft__bot{ padding-right:34px; }
}

/* Nebeneinander stehende Nachweise: zwei Zeilen Platz für den Titel, damit
   die Zusatzzeile in allen Spalten auf derselben Höhe beginnt.
   „Gesetzliche Unfallversicherung" bricht um, die anderen beiden nicht.
   Einspaltig entfiele der Grund, dort bliebe nur eine Lücke. */
@media (min-width:641px){
  .seals__name{ min-height:2.5em; }
}

/* ── Rückrufwunsch ──
   Steht direkt vor dem Absendeknopf: Wer bis hierhin gescrollt ist, hat sich
   entschieden — und soll dann noch wählen können, ob er schreiben oder
   angerufen werden will. Das Zeitfeld erscheint erst nach dem Häkchen,
   damit das Formular ohne den Wunsch nicht länger wirkt. */
.rueckruf{
  margin:var(--s-5) 0 0; padding:0; border:0;
  border-top:1px solid var(--rule-2); padding-top:var(--s-5);
}
.sec:not(.sec--dark) .rueckruf{ border-top-color:var(--rule); }
.rueckruf legend{
  padding:0; margin-bottom:var(--s-3);
  font-size:var(--t-label); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-dark-3);
}
.sec:not(.sec--dark) .rueckruf legend{ color:var(--ink-3); }

.check{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; min-height:44px; }
.check input{
  flex:none; width:20px; height:20px; margin-top:2px;
  accent-color:var(--teal); cursor:pointer;
}
.check span{ font-size:var(--t-sm); line-height:1.5; color:var(--on-dark-1); }
.sec:not(.sec--dark) .check span{ color:var(--ink); }
.check:hover span{ color:var(--brand-white); }
.sec:not(.sec--dark) .check:hover span{ color:var(--ink); }

/* Das Zeitfeld schiebt sich auf, statt zu springen */
[data-rueckruf-zeit]{ margin-top:var(--s-4); }
[data-rueckruf-zeit][hidden]{ display:none; }

/* ── Übernahme aus der Schnellanfrage ──
   Ohne diese Zeile sieht der Besucher nur, dass die Seite gescrollt hat, und
   weiß nicht, ob seine drei Angaben angekommen sind. */
.uebernahme{
  margin:0 0 var(--s-4); padding:12px 16px;
  border-left:2px solid var(--teal);
  background:rgba(var(--brand-teal-rgb),.10);
  font-size:var(--t-sm); line-height:1.55; color:var(--on-dark-1);
}
.uebernahme[hidden]{ display:none; }

/* Der Knopf der Schnellanfrage spannte sich bei 700 bis 1180 px über die
   ganze Restzeile — bis zu 858 px breit. Ein Knopf dieser Größe wirkt wie
   eine Fläche, nicht wie ein Ziel. */
@media (min-width:641px) and (max-width:1180px){
}

/* ── Hero: Tiefe zwischen den Textebenen ──
   --hp läuft beim Verlassen des Heros von 0 auf 1. Die Aussage zieht ein
   Stück nach, die Einordnung darüber etwas weiter, das Registerband am Fuß
   bleibt stehen. So entsteht Staffelung ohne Bildmotiv. Die Wege sind
   bewusst kurz: Die Überschrift soll Raum bekommen, nicht davonfahren.
   Gesetzt wird --hp nur auf großen Flächen mit feinem Zeiger. */
.hero{ --hp:0; }
.hero__zeile{ transform:translate3d(0, calc(var(--hp) * 26px), 0); }
.hero__h1{ transform:translate3d(0, calc(var(--hp) * 16px), 0); }

@media (prefers-reduced-motion: reduce){
  .hero__zeile, .hero__h1, .hero__lead{ transform:none !important; }
}

/* ── Ablaufschritte auf dunklem Grund ──
   Die Schrittliste war nur für helle Flächen gedacht: blasse Ziffer, die
   sich beim Eintreffen einfärbt, dunkler Text, helle Trennlinie. Auf
   qualitaet.html steht sie in einer dunklen Sektion — dort ergaben
   dieselben Farben 2,85:1 und waren kaum lesbar. */
.sec--dark .steps li{ border-top-color:var(--rule-2); }
.sec--dark .steps li.is-in{ border-top-color:var(--teal); }
.sec--dark .steps__no{ color:rgba(255,255,255,.20); }
.sec--dark .steps li.is-in .steps__no{ color:var(--brand-white); }
.sec--dark .steps h3{ color:var(--brand-white); }
.sec--dark .steps p{ color:var(--on-dark-2); }
.sec--dark .steps__meta{ color:var(--on-dark-3); }

@media (prefers-reduced-motion: reduce){
  .sec--dark .steps__no{ color:var(--brand-white) !important; }
  .sec--dark .steps li{ border-top-color:var(--teal) !important; }
}

/* Die Linkliste auf der Fehlerseite ist die einzige Navigation, die dort
   angeboten wird. Auf dem Telefon waren ihre Ziele 20 px hoch. */
@media (pointer:coarse), (max-width:1080px){
  .marks li a{ display:inline-block; padding-block:12px; }
  .marks li:has(a){ padding-block:0; }
}

/* ═══════════ Ortsauswahl ═══════════
   Ersetzt <datalist>. Der Browser rendert dessen Liste selbst — in
   Systemoptik, außerhalb jeder Gestaltung, auf iOS teils gar nicht. Hier
   steht stattdessen eine eigene Liste nach dem Combobox-Muster: bedienbar
   mit Maus, Finger und Tastatur, im Duktus der übrigen Formulare.
   Freie Eingabe bleibt möglich — das Einsatzgebiet endet nicht an den neun
   genannten Orten. */
.field, .konf__ctrl{ position:relative; }

.ortwahl{
  /* −1 px, damit die Liste bündig zur Außenkante des Feldes steht und nicht
     um die Rahmenstärke eingerückt wirkt */
  position:absolute; top:calc(100% + 6px); left:-1px; right:-1px; z-index:40;
  margin:0; padding:5px; list-style:none;
  /* dvh statt vh: mit vh bleibt die Liste beim Einfahren der Browserleiste
     zu hoch und ragt unter den Bildschirmrand. */
  max-height:min(46dvh, 296px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg); border:1px solid var(--rule);
  box-shadow:0 18px 44px -14px rgba(var(--brand-navy-rgb),.28), 0 2px 6px rgba(var(--brand-navy-rgb),.06);
}
.ortwahl[hidden]{ display:none; }
.ortwahl li{
  padding:11px 12px; border:0;
  font-size:var(--t-sm); color:var(--ink); cursor:pointer;
  transition:background var(--d-fast) ease, color var(--d-fast) ease;
}
.ortwahl li[aria-selected="true"]{ font-weight:600; }
.ortwahl li:hover, .ortwahl li.is-auf{ background:var(--bg-2); color:var(--teal-dk); }
.ortwahl li[aria-selected="true"]::after{
  content:""; float:right; width:14px; height:14px; margin-top:3px;
  background:var(--teal-dk);
  clip-path:polygon(14% 47%, 0 61%, 41% 100%, 100% 22%, 86% 8%, 40% 71%);
}
.ortwahl__leer{ padding:11px 12px; font-size:var(--t-sm); color:var(--ink-3); cursor:default; }
.ortwahl__leer:hover{ background:none; color:var(--ink-3); }

/* In dunklen Abschnitten kehrt sich die Liste um */
.sec--dark .ortwahl{
  background:var(--brand-navy); border-color:var(--rule-2);
  box-shadow:0 20px 48px -14px rgba(0,0,0,.6);
}
.sec--dark .ortwahl li{ color:var(--on-dark-1); }
.sec--dark .ortwahl li:hover, .sec--dark .ortwahl li.is-auf{ background:rgba(255,255,255,.07); color:var(--brand-white); }
.sec--dark .ortwahl li[aria-selected="true"]::after{ background:var(--teal-hi); }
.sec--dark .ortwahl__leer{ color:var(--on-dark-3); }

/* Der Pfeil sitzt im Feld und dreht sich beim Öffnen */
.ortwahl__auf{
  position:absolute; right:0; top:0; bottom:0; width:44px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--ink-3);
}
.ortwahl__auf svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--d-base) var(--ease);
}
[aria-expanded="true"] ~ .ortwahl__auf svg{ transform:rotate(180deg); }
.sec--dark .ortwahl__auf{ color:var(--on-dark-3); }
.field input[data-ortsfeld]{ padding-right:42px; }

.ortwahl__hinweis{
  margin:7px 0 0; font-size:var(--t-xs); color:var(--ink-3);
}

@media (prefers-reduced-motion: reduce){
  .ortwahl__auf svg{ transition:none; }
}

/* Reicht der Platz unter dem Feld nicht, klappt die Liste nach oben auf */
.ortwahl--oben{ top:auto; bottom:calc(100% + 6px); }
.sec--dark .ortwahl--oben,
.ortwahl--oben{ box-shadow:0 -18px 44px -14px rgba(var(--brand-navy-rgb),.28), 0 -2px 6px rgba(var(--brand-navy-rgb),.06); }

/* ═══════════ Leistungsübersicht ═══════════
   Kein Kartenraster: Die vier Bereiche stehen als ganzseitige Blöcke
   untereinander, zwei davon mit Bild, im Wechsel hell und getönt. Die
   große Ziffer verankert jeden Block links und nimmt die Nummerierung
   der Kapitel auf der Startseite auf. */
.lb{ display:grid; gap:clamp(26px,4vw,64px); }
.lb--bild{ grid-template-columns:1fr; }
.lb__nr{
  margin:0 0 clamp(10px,1.4vw,18px);
  font-family:var(--ff-d); font-weight:600; font-size:clamp(1.5rem,2.2vw,2rem);
  line-height:1; letter-spacing:-.03em; color:var(--teal-dk);
  font-variant-numeric:tabular-nums;
}
.sec--dark .lb__nr{ color:var(--teal-hi); }
.lb__txt .h2{ max-width:18ch; }
.lb__txt .lead{ max-width:52ch; }
.lb__txt .marks{ margin-top:clamp(20px,2.4vw,30px); }
.lb__wer{
  margin:clamp(18px,2.2vw,26px) 0 0; padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid var(--rule);
  font-size:var(--t-xs); color:var(--ink-3); max-width:46ch;
}
.sec--dark .lb__wer{ border-top-color:var(--rule-2); color:var(--on-dark-3); }
.lb .link{ margin-top:clamp(20px,2.4vw,28px); }
.lb__fig{ margin:0; }
.lb__fig .frame{ aspect-ratio:4/3; }
.lb__fig figcaption{
  margin-top:12px; font-size:var(--t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}

@media (min-width:900px){
  /* Mit Bild zweispaltig, ohne Bild bleibt der Text auf Lesebreite */
  .lb--bild{ grid-template-columns:minmax(0,1fr) minmax(0,.86fr); align-items:center; }
  .lb--bild:nth-of-type(even) .lb__fig{ order:-1; }
  .lb:not(.lb--bild) .lb__txt{ max-width:62ch; }
}
/* Der zweite Bildblock kehrt die Seiten, damit die Seite nicht in eine
   Richtung kippt */
@media (min-width:900px){
  #baulogistik .lb--bild{ grid-template-columns:minmax(0,.86fr) minmax(0,1fr); }
  #baulogistik .lb__fig{ order:-1; }
}

/* Schnellanfrage: Beratungseinstieg, Auswahl und eindeutiger nächster Schritt. */
.konf{ position:relative; z-index:2; padding-block:clamp(36px,4.5vw,68px) 24px; }
.konf__box{
  display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,2fr);
  background:var(--bg); border:1px solid var(--brand-line);
  box-shadow:0 20px 54px -30px rgba(var(--brand-navy-rgb),.23);
}
.konf__kopf{
  display:flex; flex-direction:column; align-items:flex-start; min-width:0;
  padding:clamp(28px,3vw,44px); background:var(--navy); color:var(--brand-white);
}
.konf__label{
  display:flex; align-items:center; gap:9px; margin:0 0 24px;
  font-size:11px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--brand-on-dark-muted);
}
.konf__punkt{ width:6px; height:6px; border-radius:50%; background:var(--teal-hi); flex:none; }
.konf__titel{
  margin:0; color:var(--brand-white); font-family:var(--ff-d); font-weight:500;
  font-size:clamp(1.9rem,2.9vw,2.65rem); line-height:1.1; letter-spacing:-.035em;
}
.konf__sub{ margin:20px 0 0; font-size:15px; line-height:1.65; color:var(--brand-line-strong); max-width:32ch; }
.konf__persoenlich{ margin:auto 0 0; padding-top:32px; font-size:12px; color:var(--brand-on-dark-muted); }
.konf__persoenlich a{ display:block; margin-top:6px; color:var(--brand-white); font-size:18px; letter-spacing:.015em; }
.konf__persoenlich a span{ margin-left:12px; color:var(--teal-hi); }
.konf__persoenlich a:hover{ color:var(--teal-hi); }
.konf__form, .konf__fallback{ min-width:0; padding:clamp(28px,3vw,44px); }
.konf__form{ display:flex; flex-direction:column; gap:28px; }
.konf__form[hidden], .konf__fallback[hidden]{ display:none; }
.konf__fallback{ align-self:center; }
.konf__fallback p{ max-width:48ch; margin:0 0 24px; color:var(--ink-2); }
.konf__fortschritt p{
  display:flex; justify-content:space-between; gap:16px; margin:0 0 13px;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--ink-2);
}
.konf__fortschritt p span{ letter-spacing:.03em; font-variant-numeric:tabular-nums; color:var(--teal-dk); }
.konf__fortschritt progress{
  display:block; width:100%; height:3px; border:0; appearance:none;
  background:var(--brand-surface-deep); color:var(--teal-dk); border-radius:0;
}
.konf__fortschritt progress::-webkit-progress-bar{ background:var(--brand-surface-deep); }
.konf__fortschritt progress::-webkit-progress-value{ background:var(--teal-dk); transition:width .25s ease; }
.konf__fortschritt progress::-moz-progress-bar{ background:var(--teal-dk); }
.konf__schritte{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  margin:0; padding:0; list-style:none;
}
.konf__schritt{ display:grid; grid-template-rows:auto auto auto; gap:11px; align-content:start; min-width:0; }
.konf__f{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:550; color:var(--ink-2); cursor:pointer; }
.konf__nr{
  display:grid; place-items:center; flex:none; width:25px; height:25px;
  border:1px solid var(--brand-line); border-radius:50%; color:var(--ink-2); font-size:11px;
  font-variant-numeric:tabular-nums; transition:background .2s ease,color .2s ease;
}
.konf__schritt.is-fertig .konf__nr{ background:var(--brand-teal-wash); border-color:var(--brand-line-strong); color:var(--teal-dk); }
.konf__schritt.is-current .konf__nr{ border-color:var(--navy); background:var(--navy); color:var(--brand-white); }
.konf__schritt.is-fertig .konf__name, .konf__schritt.is-current .konf__name{ color:var(--ink); }
.konf__ctrl{
  position:relative; display:flex; align-items:center; background:var(--brand-surface);
  border:1px solid var(--brand-line); border-radius:3px;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.konf__ctrl:focus-within{ border-color:var(--teal-dk); background:var(--brand-white); box-shadow:0 0 0 3px rgba(var(--brand-teal-rgb),.12); }
.konf__ctrl select, .konf__ctrl input{
  appearance:none; -webkit-appearance:none; width:100%; min-width:0; min-height:56px;
  padding:0 34px 0 13px; border:0; background:none; color:var(--ink);
  font-family:inherit; font-size:14px; text-overflow:ellipsis;
}
.konf__ctrl input::placeholder{ color:var(--brand-subtle); opacity:1; }
.konf__ctrl select:focus, .konf__ctrl input:focus{ outline:none; }
.konf__ctrl select:disabled{ color:var(--brand-subtle); cursor:not-allowed; }
.konf__ctrl:has(select:disabled){ background:var(--brand-surface); border-style:dashed; }
.konf__pfeil{
  position:absolute; right:12px; width:14px; height:14px; pointer-events:none;
  fill:none; stroke:var(--ink-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.konf__hinweis{ margin:0; min-height:2.8em; font-size:11px; line-height:1.4; color:var(--ink-2); }
.konf__hinweis[hidden]{ display:block; visibility:hidden; }
.konf__ab{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px;
  align-items:center; margin-top:auto; padding-top:24px; border-top:1px solid var(--rule);
}
.konf__auswahl{ min-width:0; }
.konf__auswahl-label{ display:block; margin-bottom:6px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2); }
.konf__auswahl p{ margin:0; font-size:13px; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }
.konf__go{ min-height:54px; padding-inline:20px; font-size:13px; white-space:nowrap; }
.konf__go.is-ready{ box-shadow:0 5px 16px -9px rgba(var(--brand-teal-text-rgb),.5); }
.konf__stand{ grid-column:1/-1; margin:0; min-height:1.5em; font-size:12px; color:var(--ink-2); }
.konf__zusagen{
  grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
  margin:0; padding:26px clamp(28px,3vw,44px); list-style:none; border-top:1px solid var(--rule); background:var(--brand-surface);
}
.konf__zusagen li{ display:grid; gap:5px; min-width:0; padding-left:14px; border-left:2px solid var(--brand-line-strong); }
.konf__zusagen b{ font-family:var(--ff-d); font-weight:550; font-size:14px; color:var(--ink); }
.konf__zusagen span{ font-size:12px; line-height:1.45; color:var(--ink-2); }
.konf__zusagen b, .konf__zusagen span{ hyphens:auto; overflow-wrap:break-word; }
@media(max-width:1100px){
  .konf__box{ grid-template-columns:1fr; }
  .konf__kopf{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:0 32px; }
  .konf__label{ grid-column:1/-1; margin-bottom:16px; }
  .konf__sub{ margin:0; align-self:center; }
  .konf__persoenlich{ grid-column:2; padding-top:14px; margin:0; }
  .konf__form{ gap:25px; }
}
@media(max-width:680px){
  .konf{ padding-block:28px 16px; }
  .konf__kopf{ display:flex; padding:27px 23px; }
  .konf__titel{ font-size:32px; }
  .konf__titel br{ display:none; }
  .konf__sub{ max-width:38ch; margin-top:14px; font-size:14px; }
  .konf__persoenlich{ margin-top:20px; padding-top:18px; width:100%; border-top:1px solid rgba(255,255,255,.15); }
  .konf__persoenlich a{ font-size:17px; }
  .konf__form, .konf__fallback{ padding:25px 23px; }
  .konf__schritte{ grid-template-columns:1fr; gap:21px; }
  .konf__schritt{ gap:9px; }
  .konf__ctrl select, .konf__ctrl input{ font-size:16px; }
  .konf__hinweis{ min-height:0; font-size:12px; }
  .konf__hinweis[hidden]{ display:none; }
  .konf__ab{ grid-template-columns:1fr; padding-top:20px; gap:17px; }
  .konf__go{ width:100%; justify-content:space-between; white-space:normal; text-align:left; font-size:14px; }
  .konf__stand{ font-size:12px; }
  .konf__zusagen{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; padding:23px; }
  .konf__zusagen li{ padding-left:11px; }
}
@media(prefers-reduced-motion:reduce){
  .konf__nr, .konf__ctrl, .konf__fortschritt progress::-webkit-progress-value{ transition:none; }
}

.ft__imagery{ margin:28px 0 0; max-width:60ch; font-size:11px; line-height:1.55; color:var(--brand-on-dark-subtle); }

/* Accessible labels and announcements must never enter the visible layout. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}