/* ═══════════════════════════════════════════════════════════════
   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:#0B2130;
  --navy-2:#0F2A3B;
  --navy-deep:#071722;   /* Fuß: dunkler als die Kontaktfläche, damit die Seite sichtbar endet */
  --ink:#0B1F2A;      /* Fließtext, 15.6:1 auf Weiß */
  --ink-2:#526975;    /* Sekundärtext, 5.4:1 */
  --ink-3:#64737B;    /* Labels und Bildunterschriften, 4.9:1 — kleinster erlaubter Wert */

  --bg:#FFFFFF;
  --bg-2:#F4F6F7;
  --bg-3:#EAEEF0;
  --rule:#DFE5E8;
  --rule-2:rgba(255,255,255,.16);

  --teal:#17B0A6;     /* Flächen und Linien */
  --teal-dk:#107D76;  /* Teal auf hellem Grund, wenn Text: 5.0:1 */
  --teal-hi:#3FD0C4;  /* Teal auf dunklem Grund: 8.7:1 */

  /* 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:"Inter Tight","Segoe UI",system-ui,sans-serif;

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

  /* ── 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, 3.1vw, 2.85rem);       /* 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(11,33,48,.18);
  --sh-md:0 18px 40px -28px rgba(11,33,48,.35);
  --sh-lg:0 40px 90px -50px rgba(11,33,48,.55);
  --ease:cubic-bezier(.22,1,.32,1);
}

/* ── Reset ── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
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, .area__note 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, .honest__col--no span, .seals__list span, .cinfo p{
  hyphens:manual; -webkit-hyphens:manual;
}
img{ display:block; max-width:100%; height:auto; }
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:#fff; }

/* 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(23,176,166,.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(63,208,196,.26);
}

.skip{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:4px;
}
.skip:focus{ left:12px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ── 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:var(--grain); background-blend-mode:soft-light; }
.join, .career, .honest__col--yes{ background-blend-mode:soft-light; }
.ft{ background-image:var(--grain); 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 ── */
.h2{
  font-family:var(--ff-d); font-weight:600;
  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, .dash__kpis b, .hero__metrics b, .radius text{
  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:700; 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:#fff; }
.btn--solid:hover{ background:var(--teal-dk); }
.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:#fff; }
.sec--dark .btn--solid{ background:var(--teal); color:#04151C; }
.sec--dark .btn--solid:hover{ background:var(--teal-hi); }

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

.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:#fff; border-color:var(--teal-hi); }

/* ═══════════ Kopf ═══════════ */
/* Über dem Bild transparent, ab dem Scrollen weiß */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:transparent;
  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:rgba(255,255,255,.92); backdrop-filter:blur(14px) saturate(160%); }
/* Dunkler Verlauf hinter der Kopfzeile, damit die Navigation auf jedem Bildmotiv trägt */
.hd::before{
  content:""; position:absolute; inset:0 0 auto 0; height:190%; z-index:-1;
  background:linear-gradient(180deg, rgba(6,20,29,.62) 0%, rgba(6,20,29,.28) 46%, rgba(6,20,29,0) 100%);
  transition:opacity var(--d-base) ease; pointer-events: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); }
.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:#fff; }
.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:#fff; }
.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:#fff; }
.hd:not(.is-stuck) .hd__act .btn--solid:hover{ background:#fff; border-color:#fff; color:var(--navy); }

.hd__burger{ display:none; width:40px; height:36px; padding:9px 6px; }
.hd__burger span{ display:block; height:1.5px; background:#fff; 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;
}
.mob.is-open{ opacity:1; pointer-events:auto; }
.mob nav{ display:grid; gap:4px; width:min(90vw,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:#fff;
}
.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:#04151C !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 — vollflächige Bühne ═══════════ */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(640px,96svh,980px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:clamp(140px,16vw,200px);
  /* Platz für die überlappende Anfragekarte, damit sie die Kennzahlen nicht deckt */
  padding-bottom:clamp(76px,8vw,116px);
  background:var(--navy); color:#fff; overflow:hidden;
}
/* --p läuft beim Scrollen von 0 auf 1 und steuert die ganze Bühne */
.hero{ --p:0; }
.hero__media{
  position:absolute; inset:-7% 0; z-index:-3;
  transform:scale(calc(1 + var(--p) * .09));
  transform-origin:60% 40%;
  will-change:transform;
}
.hero__media img{ width:100%; height:100%; object-fit:cover; }
/* Verlauf, damit die Schrift auf jedem Bildmotiv trägt */
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(96deg, rgba(11,33,48,.96) 0%, rgba(11,33,48,.86) 38%, rgba(11,33,48,.34) 72%, rgba(11,33,48,.55) 100%),
    linear-gradient(0deg, rgba(11,33,48,.92) 0%, rgba(11,33,48,0) 42%);
  /* verdichtet sich beim Scrollen, damit die nächste Sektion sauber übernimmt */
  opacity:calc(1 + var(--p) * .28);
}
/* Markenkeil — die Diagonale ist das wiedererkennbare Element */
.hero__wedge{
  position:absolute; inset:0 auto 0 0; width:min(74%,1020px); z-index:-1;
  background:linear-gradient(104deg, rgba(11,33,48,.86) 0%, rgba(14,140,132,.30) 62%, rgba(23,176,166,0) 100%);
  clip-path:polygon(0 0, 100% 0, 62% 100%, 0 100%);
  transform:translate3d(calc(var(--p) * -3%), 0, 0);
}
.hero__in{ will-change:transform, opacity; }
.hero__in{ position:relative; padding-bottom:clamp(34px,4vw,58px); }
.hero__h1{
  margin-top:clamp(22px,2.6vw,36px);
  font-family:var(--ff-d); font-weight:700;
  font-size:var(--t-display);
  line-height:1.02; letter-spacing:-.038em;
  max-width:16ch;
  text-wrap:balance;
}
/* 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; }
/* Startpunkt um den vergrößerten Innenabstand versetzt, sonst lugte die
   Oberkante der Buchstaben vor der Animation unten hervor */
.ln > span{ display:block; transform:translateY(calc(106% + .2em)); transition:transform var(--d-reveal) var(--ease); }
.ln.is-in > span{ transform:translateY(0); }
.hero__lead{
  margin-top:clamp(18px,2.2vw,28px); max-width:46ch;
  font-size:var(--t-lead); line-height:1.7; color:var(--on-dark-1);
}
.hero__act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,2.8vw,36px); }
.hero__trust{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:clamp(20px,2.4vw,30px);
  font-size:var(--t-xs); color:var(--on-dark-2); max-width:56ch;
}
.hero__trust svg{
  width:17px; height:17px; flex:none; margin-top:2px;
  fill:none; stroke:var(--teal-hi); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

/* ═══════════ Schnellanfrage ═══════════ */
.quick{ position:relative; z-index:2; margin-top:calc(clamp(40px,6vw,84px) * -1); }
.quick__box{
  background:#fff; border:1px solid var(--rule);
  box-shadow:0 40px 90px -50px rgba(11,33,48,.55);
  padding:clamp(24px,2.8vw,40px);
}
.quick__head{ margin-bottom:clamp(20px,2.2vw,28px); }
.quick__kicker{
  display:flex; align-items:center; gap:9px;
  font-size:var(--t-label); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-dk);
}
.quick__pulse{
  width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none;
  animation:ping 2.6s infinite;
}
.quick__title{
  margin-top:10px;
  font-family:var(--ff-d); font-weight:600;
  font-size:clamp(1.25rem,2.1vw,1.7rem); letter-spacing:-.024em; line-height:1.2;
}

.quick__row{ display:grid; grid-template-columns:1.2fr 1fr .85fr auto; gap:clamp(12px,1.4vw,18px); align-items:end; }
.quick__f{ display:grid; gap:8px; min-width:0; }
.quick__f > span{ font-size:var(--t-label); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
/* Feld mit vorangestelltem Symbol */
.quick__ctrl{
  position:relative; display:flex; align-items:center;
  background:var(--bg-2); border:1px solid var(--rule); border-radius:2px;
  transition:border-color var(--d-base) ease, background var(--d-base) ease, box-shadow var(--d-base) ease;
}
.quick__ctrl:focus-within{ border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(23,176,166,.14); }
.quick__ctrl svg{
  width:18px; height:18px; margin-left:13px; flex:none;
  fill:none; stroke:var(--ink-3); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.quick__ctrl:focus-within svg{ stroke:var(--teal-dk); }
.quick__ctrl select, .quick__ctrl input{
  width:100%; min-width:0; padding:13px 12px 13px 10px;
  background:none; border:0; font-size:var(--t-sm); color:var(--ink);
}
.quick__ctrl select:focus, .quick__ctrl input:focus{ outline:none; }
.quick__go{ padding-block:14px; }

/* Belege statt Kennzahlensockel im Bild */
.quick__proof{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,32px);
  margin-top:clamp(22px,2.6vw,34px); padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--rule);
}
.quick__proof li{ display:flex; align-items:baseline; gap:9px; min-width:0; }
.quick__proof b{
  font-family:var(--ff-d); font-weight:700; font-size:var(--t-h3);
  line-height:1; letter-spacing:-.03em; color:var(--teal-dk); flex:none;
}
.quick__proof span{ font-size:var(--t-xs); line-height:1.35; color:var(--ink-2); }

/* Bildrahmen im Reportstil */
.frame{ position:relative; overflow:hidden; background:var(--bg-3); }
.frame img{ width:100%; height:100%; object-fit:cover; }

/* Vorhang, der beim Eintreten nach oben aufzieht */
.frame.reveal::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:var(--bg-3); 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 ═══════════ */
.strip{ margin-top:clamp(40px,5vw,72px); background:var(--bg-2); border-block:1px solid var(--rule); }
.strip__in{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3.5vw,52px); padding-block:var(--s-5); }
.strip__label{ font-size:var(--t-label); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.strip__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px,3.5vw,52px); }
.strip__logos img{ height:27px; width:auto; }
.strip__logos img[src$=".svg"]{ height:36px; }
.strip__more{ display:flex; align-items:center; gap:9px; font-size:var(--t-xs); color:var(--ink-2); }
.strip__more span{
  display:grid; place-items:center; width:24px; height:24px;
  border:1px solid var(--rule); border-radius:50%;
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-xs); color:var(--teal-dk);
}

/* ═══════════ Sektionen ═══════════ */
.sec{ padding-block:var(--sec-y); }
.sec--alt{ background:var(--bg-2); }
.sec--dark{ position:relative; background:var(--navy); color:#fff; }
.sec--dark .h2{ color:#fff; }
/* 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(40px,5vw,80px); top:calc(clamp(40px,5vw,80px) * -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.4; }

.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:#04151C;
  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(4,21,28,.72), rgba(4,21,28,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:#fff; text-align:left;
  background:linear-gradient(to top, rgba(4,21,28,.55), rgba(4,21,28,.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:#04151C;
  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:#fff;
  border:1px solid rgba(255,255,255,.34); background:rgba(4,21,28,.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:#04151C; }
.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:#fff; border-top-color:var(--teal-hi); }
.film__ch li.is-on button{ color:#fff; 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); }

.dash{ background:#fff; color:var(--ink); box-shadow:0 40px 80px -50px rgba(0,0,0,.7); }
.dash__bar{ display:flex; align-items:center; gap:14px; padding:13px 18px; background:var(--bg-2); border-bottom:1px solid var(--rule); }
.dash__dots{ display:flex; gap:6px; }
.dash__dots i{ width:8px; height:8px; border-radius:50%; background:#C9D3D8; }
.dash__url{ font-size:var(--t-label); letter-spacing:.05em; color:var(--ink-3); }
.dash__body{ padding:clamp(18px,1.8vw,26px); }
.dash__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.dash__kpis > div{ background:#fff; padding:14px; }
.dash__kpis span{ display:block; font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.dash__kpis b{ display:block; margin-top:6px; font-family:var(--ff-d); font-weight:700; font-size:clamp(1.3rem,1.9vw,1.65rem); letter-spacing:-.03em; }
.dash__rows{ margin-top:18px; }
.dash__rows li{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px;
  padding:12px 0; border-top:1px solid var(--rule); font-size:var(--t-xs); color:var(--ink-2);
  opacity:0; transform:translateX(-10px);
  transition:opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
.dash.is-in .dash__rows li{ opacity:1; transform:none; }
.dash.is-in .dash__rows li:nth-child(1){ transition-delay:.14s; }
.dash.is-in .dash__rows li:nth-child(2){ transition-delay:.23s; }
.dash.is-in .dash__rows li:nth-child(3){ transition-delay:.32s; }
.dash.is-in .dash__rows li:nth-child(4){ transition-delay:.41s; }
.dash.is-in .dash__rows li:nth-child(5){ transition-delay:.50s; }
.dash__rows em{ font-style:normal; font-size:var(--t-label); letter-spacing:.05em; color:var(--ink-3); }
.st{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); }
.st--ok{ background:var(--teal); }
.st--run{ background:var(--teal); animation:ping 2.4s infinite; }
.st--open{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-3); }
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(23,176,166,.5); }
  70%{ box-shadow:0 0 0 8px rgba(23,176,166,0); }
  100%{ box-shadow:0 0 0 0 rgba(23,176,166,0); }
}
.dash__chart{ display:flex; align-items:flex-end; gap:6px; height:70px; margin-top:18px; padding-top:16px; border-top:1px solid var(--rule); }
.dash__chart span{ flex:1; background:var(--teal); opacity:.85; height:0; transition:height var(--d-reveal) var(--ease); }
.dash.is-in .dash__chart span{ height:var(--h); }
.dash.is-in .dash__chart span:nth-child(1){ transition-delay:.28s; }
.dash.is-in .dash__chart span:nth-child(2){ transition-delay:.34s; }
.dash.is-in .dash__chart span:nth-child(3){ transition-delay:.40s; }
.dash.is-in .dash__chart span:nth-child(4){ transition-delay:.46s; }
.dash.is-in .dash__chart span:nth-child(5){ transition-delay:.52s; }
.dash.is-in .dash__chart span:nth-child(6){ transition-delay:.58s; }
.dash.is-in .dash__chart span:nth-child(7){ transition-delay:.64s; }
.dash.is-in .dash__chart span:nth-child(8){ transition-delay:.70s; }
.dash figcaption{ padding:0 clamp(18px,1.8vw,26px) 18px; }

/* ── 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:#fff; 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 ── */
.partners{ display:grid; grid-template-columns:repeat(3,minmax(0,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:#fff;
  transition:border-color var(--d-base) ease, transform var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease);
}
.pc:hover{
  border-color:#C6D0D5; transform:translateY(-4px);
  box-shadow:0 26px 50px -34px rgba(11,33,48,.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:linear-gradient(90deg, var(--teal) 0%, rgba(23,176,166,.2) 60%, transparent 100%);
  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:#fff; }
.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:#fff;
}
.join::after{
  content:""; position:absolute; right:-8%; top:-30%; width:52%; height:170%;
  background:linear-gradient(104deg, rgba(23,176,166,.22) 0%, rgba(23,176,166,0) 70%);
  clip-path:polygon(34% 0, 100% 0, 100% 100%, 0 100%);
}
.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:#fff; 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:#04151C; }
.join .btn--solid:hover{ background:var(--teal-hi); }

/* ── Ehrliche Abgrenzung ── */
.honest{ background:var(--bg); }
.honest .head__no{ color:var(--ink-3); }
.honest .head__no::after{ background:var(--ink-3); }
.honest__grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px,3.5vw,64px); align-items:start; }

.honest__col--no{ display:grid; }
.honest__col--no li{
  position:relative; padding:20px 0 20px 40px;
  border-top:1px solid var(--rule);
}
/* Durchgestrichener Kreis statt Haken — die Gegenrichtung zur übrigen Seite */
.honest__col--no li::before{
  content:""; position:absolute; left:2px; top:24px;
  width:17px; height:17px; border-radius:50%;
  border:1.6px solid var(--ink-3);
}
.honest__col--no li::after{
  content:""; position:absolute; left:6px; top:32px;
  width:9px; height:1.6px; background:var(--ink-3);
}
.honest__col--no b{ display:block; font-family:var(--ff-d); font-weight:600; font-size:var(--t-body); letter-spacing:-.015em; }
.honest__col--no span{ display:block; margin-top:6px; font-size:var(--t-sm); color:var(--ink-2); max-width:52ch; }

.honest__col--yes{
  padding:clamp(24px,2.8vw,36px);
  background:var(--navy); color:#fff;
  --cut:clamp(24px,3vw,44px);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.honest__label{
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-label);
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal-hi);
  padding-bottom:16px; border-bottom:1px solid var(--rule-2);
}
.honest__col--yes ul{ display:grid; gap:0; }
.honest__col--yes li{
  position:relative; padding:15px 0 15px 28px;
  border-bottom:1px solid var(--rule-2);
  font-size:var(--t-sm); color:var(--on-dark-1);
}
.honest__col--yes li::before{
  content:""; position:absolute; left:0; top:22px;
  width:13px; height:7px; border-left:2px solid var(--teal-hi); border-bottom:2px solid var(--teal-hi);
  transform:rotate(-45deg);
}
.honest__col--yes .link{ color:var(--teal-hi); border-bottom-color:var(--rule-2); }
.honest__col--yes .link:hover{ color:#fff; border-color:var(--teal-hi); }

/* ── Einsatzgebiet ── */
.area{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4vw,64px); align-items:start; }

/* Radiusgrafik */
.radius svg{ width:100%; height:auto; }
.radius__rings circle{ fill:none; stroke:var(--rule); stroke-width:1; }
.radius__rings circle:last-child{ stroke-dasharray:3 5; }
.radius__ticks text{
  font-family:var(--ff-t); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  fill:var(--ink-3); text-anchor:end;
}
.radius__dots circle{ r:4; fill:var(--navy); }
.radius__labels text{ font-family:var(--ff-t); font-size:var(--t-label); fill:var(--ink-2); }
.radius__home circle{ fill:var(--teal); }
.radius__home text{
  font-family:var(--ff-d); font-weight:600; font-size:var(--t-label);
  fill:var(--ink); text-anchor:middle;
}
/* Die Ringe zeichnen sich beim Eintreten */
.radius__rings circle{ stroke-dashoffset:0; }
.radius.is-in .radius__dots circle{ animation:dotIn var(--d-slow) var(--ease) both; }
.radius.is-in .radius__dots circle:nth-child(2){ animation-delay:.06s; }
.radius.is-in .radius__dots circle:nth-child(3){ animation-delay:.12s; }
.radius.is-in .radius__dots circle:nth-child(4){ animation-delay:.18s; }
.radius.is-in .radius__dots circle:nth-child(5){ animation-delay:.24s; }
.radius.is-in .radius__dots circle:nth-child(6){ animation-delay:.30s; }
.radius.is-in .radius__dots circle:nth-child(7){ animation-delay:.36s; }
.radius.is-in .radius__dots circle:nth-child(8){ animation-delay:.42s; }
@keyframes dotIn{ from{ opacity:0; r:0; } to{ opacity:1; r:4; } }

.area__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(18px,2.4vw,40px); }
.area__note{ grid-column:1 / -1; margin-top:clamp(20px,2.4vw,32px); }
.area__list li{ padding:18px 0; border-top:1px solid var(--rule); }
.area__list b{ display:block; font-family:var(--ff-d); font-weight:600; font-size:var(--t-body); letter-spacing:-.015em; }
.area__list span{ display:block; margin-top:3px; font-size:var(--t-xs); color:var(--ink-3); }
.area__note{ padding:clamp(24px,2.6vw,34px); background:#fff; border:1px solid var(--rule); }
.area__note h3{ font-family:var(--ff-d); font-weight:600; font-size:var(--t-h3); letter-spacing:-.018em; }
.area__note p{ margin-top:11px; font-size:var(--t-sm); color:var(--ink-2); max-width:76ch; }
.area__note .link{ margin-top:20px; }

/* ── 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(--grain), linear-gradient(104deg, var(--teal-dk) 0%, #0B6F6A 58%, var(--navy) 100%);
  color:#fff;
  /* Der Teal-Verlauf ist heller als Navy: erst reines Weiß erreicht dort 4.9:1 */
  --on-dark-1:#fff;
  --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:#fff; border-color:#fff; color:var(--navy); }
.career .btn:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ── 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.4; }
.comp__fig .frame img{ position:absolute; inset:-15% 0; height:130%; }
.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:#fff; 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, .quick__f select option{
  background:#fff; 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. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.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:#04151C;
}
.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:#fff; }
.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:#fff; }

.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:#fff; padding-block:clamp(52px,6vw,82px) 28px;
}
/* Teal-Faden als Abschluss der Seite */
.ft::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--teal) 0%, rgba(23,176,166,.15) 46%, transparent 100%);
}
.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:#fff; }

/* Scroll-Hinweis */
.hero__scroll{
  position:relative; align-self:flex-start;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:10px;
  margin-bottom:clamp(14px,2vw,28px); padding-block:6px;
  font-size:var(--t-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-3); transition:color var(--d-base) ease;
}
.hero__scroll:hover{ color:#fff; }
.hero__scroll svg{ width:15px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; animation:nudge 2var(--d-slow) var(--ease) infinite; }
@keyframes nudge{ 0%,68%,100%{ transform:translateY(0); opacity:.75; } 82%{ transform:translateY(5px); opacity:1; } }

/* ═══════════ 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:#fff;
  transition:background var(--d-base) ease, color var(--d-base) ease;
}
.dock a:hover{ background:var(--teal); color:#04151C; }
.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:#fff; 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:#fff; 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); }
.legal h1{ font-family:var(--ff-d); font-weight:600; font-size:clamp(1.9rem,3.4vw,3rem); letter-spacing:-.03em; }
.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:0; transform:translateY(20px); transition:opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease); }
[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:translateY(30px);
  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(0); 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; }
  .honest__grid{ 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; }
  .area{ grid-template-columns:1fr; }
  .area__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:1080px){
  .quick__row{ grid-template-columns:1fr 1fr; }
  .quick .btn{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .split, .comp, .contact{ grid-template-columns:1fr; }
  .comp__fig .frame{ aspect-ratio:16/10; }
  .hero{ min-height:auto; padding-top:130px; }
  .hero__wedge{ width:100%; clip-path:polygon(0 0, 100% 0, 100% 78%, 0 100%); }
  /* 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; }
  .quick__proof{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .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, .dash__url, .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,
  .quick__f > span, .quick__title, .lswitch__label, .jobs__tag, .crumb, .honest__label{ font-size:var(--t-label); }
  .dash__kpis{ grid-template-columns:1fr; }   /* drei Kacheln nebeneinander sprengen die Breite */
  .dash__kpis span, .dash__rows em{ font-size:var(--t-label); }
  .radius__ticks text{ font-size:var(--t-label); }
  .radius__labels text{ font-size:var(--t-label); }
  .radius__home text{ font-size:var(--t-xs); }

  /* 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 */
  .tabs__name{ font-size:var(--t-sm); hyphens:auto; -webkit-hyphens:auto; }
  .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; }
  .quick__row{ grid-template-columns:1fr; }
  .quick__proof{ grid-template-columns:1fr; gap:12px; }
  .join__cols{ grid-template-columns:1fr; }
  .join__form .btn{ justify-self:stretch; }
  .area__list{ grid-template-columns:1fr; }
  .career{ grid-template-columns:1fr; }
  .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 Leiste darf den Fuß nicht überdecken */
  body{ padding-bottom:54px; }
}

/* ═══════════ Druck ═══════════ */
@media print{
  .hd, .mob, .totop, .dock, .hero__scroll, .quick, .hero__act, .form, .join__form, .career .btn{ display:none !important; }
  body{ padding-bottom:0 !important; }
  body{ font-size:11pt; color:#000; background:#fff; }
  .sec, .hero{ padding-block:14pt; break-inside:avoid; }
  .sec--dark{ background:#fff !important; color:#000 !important; }
  .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; }
  .hero__media{ transform:none !important; }
  .hero__in{ transform:none !important; opacity:1 !important; }
  .ln > span{ transform:none !important; }
  .dash__rows li{ opacity:1 !important; transform:none !important; }
  .dash__chart span{ height:var(--h) !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(63,208,196,.22);
}
.quick__ctrl:focus-within{ box-shadow:0 0 0 3px rgba(23,176,166,.18); }

/* 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, .quick__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");
}
.quick__ctrl 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='%2364737B' 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; }
  .hero__h1{ font-size:clamp(3.4rem, 4.4vw, 5.4rem); }
}

/* ── Vereinspartnerschaft im Partnerband ──
   Bewusst klein und rechts abgesetzt: ein Vertrauenssignal, kein Werbebanner.
   Fehlt die Datei, entfernt sich der Block selbst. */
.strip__club{
  margin-left:auto; flex:none;
  display:flex; align-items:center;
  padding-left:clamp(18px, 2.5vw, 34px);
  border-left:1px solid var(--rule);
  transition:opacity var(--d-base) ease;
}
.strip__club img{
  height:72px; width:auto; max-width:100%;
  display:block;
}
.strip__club:hover{ opacity:.82; }

@media (max-width:900px){
  .strip__club{
    margin-left:0; width:100%;
    padding-left:0; padding-top:var(--s-4);
    border-left:0; border-top:1px solid var(--rule);
  }
  .strip__club img{ height:60px; }
}


/* ═══════════════════════════════════════════════════════════════
   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);
    }
    body{ padding-bottom:calc(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){

  /* 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 — die Breite bestimmt der Text, erhöht wird die Höhe */
  .crumb a{ padding-block:11px; }

  /* 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,
  .quick__f input, .quick__f select{ min-height:48px; }
  .faq summary{ min-height:52px; }
  .hero__scroll{ min-height:48px; }

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

/* ── 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,
  .quick__ctrl select, .quick__ctrl input,
  .quick__f input, .quick__f select{ 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(23,176,166,.14); }

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

/* Bei 320 px sprengten Logo, Telefon und Menüknopf zusammen die Kopfzeile */
@media (max-width:380px){
  .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){
  .hero{
    min-height:auto;
    padding-top:clamp(96px,17vh,140px);
    padding-bottom:clamp(38px,7vh,70px);
  }
  .phero{ padding-block:clamp(92px,16vh,130px) clamp(30px,6vh,56px); }
  .hero__scroll{ display:none; }   /* der Hinweis kostet hier nur Höhe */
}

/* ── 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:#fff; }
.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; }

/* ── Darüber hinaus: koordinierte Gewerke ──
   Schließt die Lücke zwischen dem Versprechen „alles, was Ihre Immobilie
   braucht" und den vier eigenen Säulen. Die Gewerke standen bisher nur im
   Aufruf an Fachbetriebe. Bewusst ruhiger gestaltet als die vier Reiter
   darüber — es ist eine Ergänzung, keine fünfte Säule. */
.beyond{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px); align-items:start;
  margin-top:clamp(38px,4.5vw,68px);
  padding:clamp(26px,3vw,44px);
  background:var(--navy); color:var(--on-dark-1);
}
.beyond__label{
  margin:0 0 10px; font-size:var(--t-label); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--teal-hi);
}
.beyond h3{
  margin:0; font-family:var(--ff-d); font-weight:600;
  font-size:var(--t-h3); line-height:1.2; letter-spacing:-.02em; color:#fff;
  max-width:24ch; text-wrap:balance;
}
.beyond p{
  margin:14px 0 0; font-size:var(--t-sm); line-height:1.7; color:var(--on-dark-2);
  max-width:56ch;
}
/* Der ehrliche Zusatz steht abgesetzt — er ist die Einschränkung, nicht das Angebot */
.beyond__ehrlich{
  padding-left:14px; border-left:2px solid var(--teal);
  color:var(--on-dark-3) !important;
}
.beyond .link{ color:var(--on-dark-1); border-bottom-color:var(--rule-2); }
.beyond .link:hover{ color:#fff; border-bottom-color:var(--teal-hi); }
.beyond__tags{ margin:0; padding:0; align-content:start; }
.beyond__tags li{ border-color:var(--rule-2); color:var(--on-dark-2); }

/* Auf schmalen Displays untereinander — die Gewerkeliste braucht die volle Breite.
   Diese Regel MUSS hinter der Grundregel oben stehen: bei gleicher Spezifität
   entscheidet die Reihenfolge, nicht der Media Query. */
@media (max-width:900px){
  .beyond{ grid-template-columns:1fr; }
}