/* ============================================================
   IPOL — Finaler Prototyp „Black/White"
   EINE CSS · Zwei Welten: .welt-dunkel (Vertrieb) / .welt-hell (Fachlichkeit)
   Basis: konzept-b (dunkel), weiterentwickelt.
   CI: Blau #0069b3 · Anthrazit #22282b · Montserrat
   ============================================================ */

:root {
  /* Marke */
  --blau: #0069b3;
  --blau-leucht: #1e90d6;
  --blau-tief: #00518a;

  /* Dunkle Welt */
  --nacht: #14191c;
  --nacht-2: #1b2125;
  --nacht-3: #232a2f;
  --linie: rgba(255,255,255,.10);
  --text: #eef2f4;
  --text-grau: #97a4ab;

  /* Helle Welt */
  --weiss: #ffffff;
  --hell: #f4f6f8;
  --hell-2: #eaeef1;
  --linie-hell: #e2e7eb;
  --anthrazit: #22282b;
  --anthrazit-2: #2c343a;
  --grau: #66747c;
  --grau-tief: #4a555c;

  --font: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --max: 1180px;
  --radius: 14px;   /* runde Karten aus Konzept C in die weiße Welt geholt */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.welt-dunkel { background: var(--nacht); color: var(--text); }
body.welt-hell   { background: var(--weiss); color: var(--anthrazit); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
::selection { background: var(--blau); color: #fff; }

/* ============================================================
   HEADER — auf ALLEN Seiten dunkel
   ============================================================ */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, backdrop-filter .25s;
}
/* Startseite: transparent über Hero, dunkel beim Scrollen */
header.site.gescrollt,
/* Weiße Seiten: von Anfang an opak dunkel */
header.site.fest {
  background: rgba(18,22,25,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.nav { display: flex; align-items: center; height: 72px; gap: 30px; }
/* Logo darf im Flex-Layout nie schrumpfen — sonst wird es horizontal gestaucht */
.nav .logo { flex-shrink: 0; }
.nav .logo img { height: 30px; width: auto; max-width: none; }
.nav .menue { display: flex; align-items: center; gap: 26px; list-style: none; margin-left: auto; }
.nav .menue a { font-size: 13px; font-weight: 500; color: var(--text-grau); letter-spacing: .04em; text-transform: uppercase; transition: .18s; white-space: nowrap; }
.nav .menue a:hover, .nav .menue a.aktiv { color: #fff; }
.nav .menue a.aktiv { font-weight: 700; }
/* feine Trennlinie zwischen den zwei Nav-Gruppen (Situationen·Leistung ‖ weiße Welt) */
.nav .menue .trenn { width: 1px; height: 18px; background: var(--linie); }

/* Sprach-Toggle */
.sprache { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-grau); }
.sprache a { color: var(--text-grau); transition: .18s; }
.sprache a:hover { color: #fff; }
.sprache a.aktiv { color: #fff; }
/* Nav über transparentem Header (auf dem Hero-Foto) leicht absetzen – reine Textkante, kein Overlay; auf dunklem Header unsichtbar */
header.site:not(.gescrollt):not(.fest) .menue a,
header.site:not(.gescrollt):not(.fest) .sprache a,
header.site:not(.gescrollt):not(.fest) .sprache span { text-shadow: 0 1px 7px rgba(9,12,14,.6); }
.sprache span { opacity: .4; }

.nav .cta {
  background: var(--blau); color: #fff; font-size: 13px; font-weight: 700;
  padding: 12px 22px; border-radius: 3px; letter-spacing: .03em; transition: .18s; white-space: nowrap;
}
.nav .cta:hover { background: var(--blau-leucht); transform: translateY(-1px); }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: .2s; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block; padding: 17px 36px; border-radius: 3px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; transition: .18s; cursor: pointer; border: 0;
  font-family: var(--font); text-align: center;
}
.btn-blau { background: var(--blau); color: #fff; box-shadow: 0 10px 34px rgba(0,105,179,.30); }
.btn-blau:hover { background: var(--blau-leucht); transform: translateY(-2px); }
.btn-leise { color: #c4cdd2; font-weight: 500; padding: 17px 8px; font-size: 14.5px; }
.btn-leise:hover { color: #fff; }
.btn-leise svg { vertical-align: -3px; margin-left: 6px; }
/* helle Welt */
.welt-hell .btn-hell { background: var(--anthrazit); color: #fff; }
.welt-hell .btn-hell:hover { background: var(--anthrazit-2); transform: translateY(-2px); }
.btn-rand { background: transparent; border: 1px solid var(--linie-hell); color: var(--anthrazit); box-shadow: none; }
.btn-rand:hover { border-color: var(--blau); color: var(--blau); transform: translateY(-2px); }

/* ============================================================
   SEKTIONEN — Basis
   ============================================================ */
section { padding: 110px 0; }
.s-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--blau-leucht); margin-bottom: 22px;
}
.welt-hell .s-label { color: var(--blau); }
.s-titel { font-size: clamp(28px, 4vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; max-width: 24ch; }

/* lange Komposita gegen Overflow absichern */
h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; } /* Desktop: keine Silbentrennung in Überschriften (Kundenfeedback 13.08.) */

/* ============================================================
   DUNKLE STARTSEITE
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden; padding-top: 72px;
}
.hero .bild {
  position: absolute; inset: 0;
  /* Westend61 DIGF17050, lizenziert (Kauf 10/2026), s. BILDQUELLEN.md.
     Personen rechts; Textspalte so begrenzt, dass die Headline niemanden überlagert (s. u.). */
  background: url('assets/img/lizenziert/strategie-gespraech-glaswand-DIGF17050.jpg') center/cover no-repeat;
  opacity: .92; filter: saturate(.9);
}
.hero .verlauf {
  position: absolute; inset: 0;
  /* Abdunklung hinter dem Text: links (Headline/Lead) + unten (Lead/Buttons) + oben (Nav); rechts übers Motiv frei */
  background:
    linear-gradient(93deg, rgba(16,20,23,.86) 0%, rgba(16,20,23,.64) 32%, rgba(16,20,23,.22) 58%, rgba(16,20,23,0) 82%),
    linear-gradient(180deg, rgba(16,20,23,.48) 0%, rgba(16,20,23,0) 18%, rgba(16,20,23,0) 50%, rgba(16,20,23,.5) 100%);
}
.hero h1, .hero p.lead, .hero .marke { text-shadow: 0 2px 22px rgba(9,12,14,.45); paint-order: stroke fill; }
.hero h1 { -webkit-text-stroke: 2.4px rgba(9,12,14,.4); }
.hero p.lead { -webkit-text-stroke: 1px rgba(9,12,14,.4); }
.hero .marke { -webkit-text-stroke: .8px rgba(9,12,14,.4); }
/* Display-Headlines nie im Wort trennen – nur an Umbrüchen (kein Silbentrenn-Bindestrich) */
.hero h1, .bildband h2, .proof .pf-aussage { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; }
.hero .wrap { position: relative; z-index: 2; max-width: var(--max); width: 100%; margin: 0 auto; padding: 60px 28px 80px; }
.hero .marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blau-leucht); margin-bottom: 34px;
}
.hero .marke::before { content: ''; width: 36px; height: 2px; background: var(--blau); }
.hero h1 { font-size: clamp(36px, 5.5vw, 72px); line-height: 1.06; font-weight: 800; letter-spacing: -.025em; max-width: 21ch; margin-bottom: 34px; }
.hero h1 .blau { color: var(--blau-leucht); }
.hero p.lead { font-size: clamp(17px, 1.6vw, 21px); color: #fff; max-width: 46ch; line-height: 1.6; margin-bottom: 46px; font-weight: 400; }
.hero .aktionen { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.hero .runter { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--text-grau); animation: schweben 2.2s ease-in-out infinite; }
@keyframes schweben { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 8px);} }

/* Hero-Motiv DIGF17050: Personen liegen bei 49–98 % der Bildbreite, 18–88 % der Höhe.
   Damit die Headline niemanden überlagert, endet die Textspalte rechnerisch vor dem linken Mann:
   Bild breiter als 3:2-Fenster → Person ab 49vw; schmaler (Bild rechtsbündig, Höhe füllt) →
   ab 100vw − 0,49·1,5·H. min() wählt automatisch den passenden Fall. Headline skaliert mit der Spalte
   (längste Zeile ≈ 11,6 em DE / EN-Faktor per --h1-em). min-height ab 16:9 mitwachsen lassen, sonst
   schneidet cover auf Ultrawide Köpfe/Oberkörper ab. */
@media (min-width: 861px) and (min-aspect-ratio: 4/3) {
  .hero { min-height: max(100svh, 56vw); }
  .hero .bild { background-position: right 40%; }
  .hero .wrap {
    --spalte: calc(min(49vw, 100vw - 76.5svh) - 36px - max((100vw - var(--max)) / 2, 0px) - 28px);
  }
  .hero h1 { font-size: min(clamp(36px, 5.5vw, 72px), var(--spalte) / var(--h1-em, 11.6)); max-width: none; }
  .hero p.lead, .hero .aktionen { max-width: min(46ch, var(--spalte)); }
  .hero .verlauf {
    background:
      linear-gradient(93deg, rgba(16,20,23,.86) 0%, rgba(16,20,23,.66) 30%, rgba(16,20,23,.26) 46%, rgba(16,20,23,0) 60%),
      linear-gradient(180deg, rgba(16,20,23,.48) 0%, rgba(16,20,23,0) 18%, rgba(16,20,23,0) 50%, rgba(16,20,23,.5) 100%);
  }
}

/* Situationen */
.situationen { background: var(--nacht); border-top: 1px solid var(--linie); }
.sit-liste { margin-top: 64px; border-top: 1px solid var(--linie); }
.sit-zeile {
  display: grid; grid-template-columns: 90px 1.1fr 1.3fr auto; gap: 34px; align-items: center;
  padding: 44px 10px; border-bottom: 1px solid var(--linie); transition: .22s; cursor: pointer;
}
.sit-zeile:hover { background: var(--nacht-2); padding-left: 26px; }
.sit-zeile .nr { font-size: 16px; font-weight: 700; color: var(--blau-leucht); }
.sit-zeile h3 { font-size: clamp(19px, 2vw, 25px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.sit-zeile p { font-size: 15px; color: var(--text-grau); }
.sit-zeile .pfeil { width: 46px; height: 46px; border: 1px solid var(--linie); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-grau); transition: .22s; flex-shrink: 0; }
.sit-zeile:hover .pfeil { background: var(--blau); border-color: var(--blau); color: #fff; transform: rotate(-45deg); }

/* Klammer — Team-Block („Das richtige Team für industrielle Veränderung.") */
.klammer { background: var(--blau); color: #fff; padding: 90px 0; }
.klammer .wrap { text-align: center; max-width: 980px; }
.klammer p { font-size: clamp(22px, 3.2vw, 36px); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.klammer p span { opacity: .65; font-weight: 500; }
.klammer .team-zeilen { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 8px; }
.klammer .team-zeilen li { font-size: clamp(16px, 1.9vw, 21px); font-weight: 500; font-style: italic; color: rgba(255,255,255,.88); line-height: 1.5; }

/* Sechs Felder */
.felder { background: var(--nacht-2); }
.felder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin-top: 64px; }
.feld {
  background: var(--nacht-2); padding: 40px 32px; transition: .22s; position: relative; overflow: hidden;
  /* Als <a> gebaut: Karte ist vollflächig klickbar */
  display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer;
}
.feld:hover { background: var(--nacht-3); }
/* Felder ohne Detailseite (BERATUNGSFELD-AUS): kein Link-Zeiger, keine Klick-Affordanz */
div.feld { cursor: default; }
div.feld::after { display: none; }
.feld::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blau); transform: scaleX(0); transform-origin: left; transition: .25s; }
.feld:hover::after { transform: scaleX(1); }
.feld .f-ikon { width: 40px; height: 40px; color: var(--blau-leucht); margin-bottom: 20px; display: flex; }
.feld .f-ikon svg { width: 100%; height: 100%; }
.feld:hover .f-ikon { color: #fff; }
.feld h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.feld p { flex: 1; }
.feld .f-mehr {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 22px;
  font-size: 13px; font-weight: 600; color: var(--blau-leucht);
  opacity: .72; transition: .22s;
}
.feld:hover .f-mehr { opacity: 1; gap: 11px; }
.feld:focus-visible { outline: 2px solid var(--blau-leucht); outline-offset: -2px; }

.feld p { font-size: 13.5px; color: var(--text-grau); line-height: 1.6; }

/* Zahlen */
.zahlen { border-top: 1px solid var(--linie); }
.zahlen .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.zahl b { display: block; font-size: clamp(36px, 4.6vw, 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 12px; }
.zahl b em { font-style: normal; color: var(--blau-leucht); }
.zahl span { font-size: 13.5px; color: var(--text-grau); letter-spacing: .04em; }

/* Bildband — Desktop A: Foto ungetrübt, Text rechtsbündig in die dunkle Zone (Roboterarm),
   Kontrast NUR über Schriftschnitt + engen, an den Buchstaben klebenden Halo (kein Kasten aufs Bild) */
.bildband { position: relative; padding: 0; width: 100%; min-height: max(460px, 37.5vw); display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--nacht); }
.bildband .bb-bild { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
.bildband .wrap { position: relative; z-index: 2; display: flex; }
.bildband .bb-text {
  /* Text links: Motiv DIGF20724 hat die Person rechts im Bild — die bleibt frei. */
  margin-right: auto; width: min(400px, 62%); text-align: left;
  /* K1: Kontur wird HINTER die Füllung gemalt → dunkler Umriss an den Buchstaben, kein Kasten aufs Bild */
  paint-order: stroke fill;
  text-shadow: 0 1px 10px rgba(9,12,14,.5);
}
.bildband .bb-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blau-leucht); margin-bottom: 18px; -webkit-text-stroke: 1px rgba(9,12,14,.6); }
.bildband h2 { font-size: clamp(24px, 2.9vw, 37px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin-bottom: 18px; text-wrap: balance; -webkit-text-stroke: 2.6px rgba(9,12,14,.52); }
.bildband p { font-size: 15.5px; font-weight: 500; color: #eef2f4; text-wrap: pretty; -webkit-text-stroke: 1.1px rgba(9,12,14,.5); }
/* Abdunklung links hinter dem Text — kräftiger, da Westend61-Bildwelt hell ist (Motiv rechts bleibt frei) */
.bildband::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(16,20,23,.82) 0%, rgba(16,20,23,.62) 34%, rgba(16,20,23,.2) 66%, rgba(16,20,23,0) 92%); }

/* Prinzip (dunkel) */
.prinzip .schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 64px; }
.schritt { position: relative; padding-top: 28px; }
.schritt::before { content: ''; position: absolute; top: 0; left: 0; width: 54px; height: 3px; background: var(--blau); }
.schritt h3 { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
.schritt p { font-size: 14.5px; color: var(--text-grau); }

/* Proof/Zitat — Desktop A: Foto ungetrübt, Text LINKSbündig auf die dunkle Zone (Maschinenblock),
   Kontrast über Buchstaben-Kontur (K1); GF-Zeile heller/kräftiger */
.proof { position: relative; padding: 0; width: 100%; min-height: max(460px, 37.5vw); display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--nacht); }
.proof .pf-bild { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
/* Bild 3: Abdunklung links hinter dem Text (Kollegin/Motiv rechts bleibt frei) */
.proof::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(16,20,23,.76) 0%, rgba(16,20,23,.56) 42%, rgba(16,20,23,.16) 72%, rgba(16,20,23,0) 100%); }
.proof .wrap { position: relative; z-index: 2; display: flex; }
.proof .pf-text {
  margin-right: auto; width: min(470px, 66%); text-align: left;
  paint-order: stroke fill;
  text-shadow: 0 1px 10px rgba(9,12,14,.5);
}
.proof .pf-aussage { font-size: clamp(20px, 2.5vw, 30px); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 0; text-wrap: balance; -webkit-text-stroke: 2.6px rgba(9,12,14,.56); }
.proof .pf-aussage em { color: var(--blau-leucht); font-style: normal; }
.proof cite { display: block; font-style: normal; font-size: 14px; font-weight: 500; color: #eaeef1; text-wrap: pretty; -webkit-text-stroke: .9px rgba(9,12,14,.5); }

/* Schluss-CTA (dunkel) */
.schluss { padding: 140px 0; text-align: center; position: relative; overflow: hidden; }
.schluss .glanz { position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,105,179,.22), transparent 65%); pointer-events: none; }
.schluss h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; max-width: 20ch; margin: 0 auto 24px; position: relative; }
.schluss p { color: var(--text-grau); font-size: 17px; max-width: 50ch; margin: 0 auto 48px; position: relative; }
.schluss .btn { position: relative; }
.schluss .neben { display: block; margin-top: 26px; font-size: 13.5px; color: var(--text-grau); position: relative; }
.schluss .neben a { color: #fff; border-bottom: 1px solid var(--blau); padding-bottom: 1px; }

/* ============================================================
   ÜBERGANGSMODUL schwarz → weiß  (Abstimmungspunkt Kundentermin)
   Langer Gradient Anthrazit → Weiß, geschwungene Linien, Chevron.
   ============================================================ */
/* ÜBERGANG als überlappende Karte (Curtain) — zwei Volltonflächen, KEIN Verlauf → kein Banding.
   Die weiße Fachwelt liegt als Panel mit runden oberen Ecken über der schwarzen Sektion;
   der dunkle Footer schiebt sich unten als Vorhang wieder über die weiße Karte. */
/* Scroll-Stopper am Ende der schwarzen Seite: „hier endet die Übersicht, auf Wunsch geht es tiefer".
   Dezente auslaufende Linie + pulsierender Pfeil, scrollt zur weißen Fachwelt-Platte. */
.scroll-stopper { position: relative; z-index: 1; text-align: center; padding: 24px 28px 140px; }
.scroll-stopper .ss-hairline { display: block; width: 1px; height: 56px; margin: 0 auto 24px; background: linear-gradient(180deg, transparent, var(--linie)); }
.ss-knopf { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-grau); transition: color .2s; }
.ss-knopf:hover { color: #fff; }
.ss-label { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.ss-pfeil { width: 42px; height: 42px; border: 1px solid var(--linie); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--blau-leucht); animation: schweben-mitte 2.4s ease-in-out infinite; transition: border-color .2s, background .2s; }
.ss-knopf:hover .ss-pfeil { border-color: var(--blau); background: rgba(0,105,179,.14); }

.uebergang {
  position: relative; z-index: 3;
  width: min(1160px, calc(100% - 48px));
  margin: -40px auto -110px;                 /* rundum vom Rand abgesetzt, überlappt oben UND unten */
  scroll-margin-top: 90px;
  overflow: hidden;                          /* Menüleiste unten füllt die runden Ecken sauber */
  background: #fff;
  border-radius: 32px;                       /* alle Ecken rund → schwebende Platte */
  box-shadow: 0 60px 120px rgba(0,0,0,.6), 0 14px 34px rgba(0,0,0,.45);
}
.uebergang .modul { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; text-align: center; padding: 104px 40px 56px; }
.uebergang .u-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blau); margin-bottom: 24px; }
.uebergang h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; line-height: 1.22; letter-spacing: -.02em; color: var(--anthrazit); max-width: 26ch; margin: 0 auto 26px; }
.uebergang p { font-size: 17px; line-height: 1.7; color: var(--grau-tief); max-width: 60ch; margin: 0 auto 8px; }
@keyframes schweben-mitte { 0%,100% { transform: translateY(0);} 50% { transform: translateY(9px);} }
/* Footer liegt UNTER der schwebenden Karte (die Karte überlappt ihn) — mit viel Luft darüber */
.welt-dunkel .uebergang + footer.site {
  position: relative; z-index: 1;
  background: var(--nacht);
  border-top: 0;
  padding-top: 240px;   /* großzügiger dunkler Freiraum unter der aufliegenden Karte */
}

/* CTA-Teaser: kleine angedeutete Grafik NEBEN dem Button — nur andeuten, Neugier wecken (kein Beschreibungstext) */
.u-teaser { display: inline-flex; align-items: center; gap: 24px; margin-top: 42px; }
.u-teaser-mini {
  flex-shrink: 0; width: 190px; padding: 14px 16px; border-radius: 14px;
  background: #f4f7fa; border: 1px solid var(--linie-hell); box-shadow: 0 14px 34px rgba(34,40,43,.10);
  transition: transform .25s, box-shadow .25s;
}
.u-teaser:hover .u-teaser-mini { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(34,40,43,.16); }
.mini-modell { width: 100%; height: auto; display: block; }
.u-teaser-btn { display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 12px 34px rgba(0,105,179,.35); }
.u-teaser:hover .u-teaser-btn { transform: translateY(-2px); background: var(--blau-leucht); }
.mini-puls { transform-box: fill-box; transform-origin: center; animation: minipuls 2.6s ease-out infinite; }
.mini-puls:nth-of-type(2) { animation-delay: .8s; }
.mini-puls:nth-of-type(3) { animation-delay: .4s; }
@keyframes minipuls { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }

/* ============================================================
   OPTIONAL · REVERSIBEL — Übergangs-Platte als „Display" rahmen
   (deutet die folgende weiße Content-Plattform als Fenster an).
   AKTIV via class="uebergang display-rahmen" (index.html + en/).
   ZURÜCK zur cleanen Platte: einfach " display-rahmen" aus der Klasse entfernen.
   Bewusst zurückhaltend: Graphit-Blende + grau-neutrale Punkte (keine Ampelfarben).
   ============================================================ */
.display-bar { display: none; }
.uebergang.display-rahmen {
  overflow: hidden;
  box-shadow: 0 0 0 12px #2a323a, 0 0 0 13px #3a444c,
              0 60px 120px rgba(0,0,0,.6), 0 14px 34px rgba(0,0,0,.45);
}
.uebergang.display-rahmen .display-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 22px; background: #eef1f4; border-bottom: 1px solid var(--linie-hell);
}
.display-bar .punkte { display: flex; gap: 7px; }
.display-bar .punkte i { width: 11px; height: 11px; border-radius: 50%; background: #ccd4da; display: block; }
.display-bar .adresse {
  margin: 0 auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .02em; color: var(--grau);
  background: #fff; border: 1px solid var(--linie-hell); border-radius: 100px; padding: 6px 18px;
}
.display-bar .adresse svg { color: var(--blau); flex-shrink: 0; }
.uebergang.display-rahmen .modul { padding-top: 82px; }
/* Variante B (rahmen-pur): nur Graphit-Blende, OHNE Browser-Leiste → Monitor/Leinwand-Anmutung.
   Umschalten: „rahmen-pur" aus der Klasse nehmen = Variante A (mit Leiste). */
.uebergang.rahmen-pur .display-bar { display: none; }
.uebergang.display-rahmen.rahmen-pur .modul { padding-top: 104px; }

/* „IPOL hat mehr" — dezenter Tiefer-Einstieg am Fuß der Platte, rundet die Story ab */
/* „IPOL hat mehr" — als Menüleiste am unteren Innenrand des Rahmens (Dock-Anmutung), getrennt vom Content */
.mehr-von-ipol { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 15px 30px; background: #f4f6f8; border-top: 1px solid var(--linie-hell); }
.mvi-label { font-size: 13.5px; color: var(--grau); }
.mvi-label b { color: var(--anthrazit); font-weight: 700; }
.mvi-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mvi-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--anthrazit); transition: background .16s, color .16s, box-shadow .16s; }
.mvi-links a svg { color: var(--blau); opacity: .55; transition: opacity .16s, transform .16s; }
.mvi-links a:hover { background: #fff; color: var(--blau); box-shadow: 0 4px 14px rgba(34,40,43,.10); }
.mvi-links a:hover svg { opacity: 1; transform: translateX(2px); }

@media (max-width: 860px) {
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; } /* Mobil: lange Komposita dürfen trennen */
  .scroll-stopper { padding: 12px 22px 96px; }
  .uebergang { width: calc(100% - 48px); margin: -22px auto -70px; border-radius: 22px; }
  .uebergang .modul { padding: 54px 22px 36px; }
  .mehr-von-ipol { flex-direction: column; gap: 12px; padding: 16px 18px; text-align: center; }
  .mvi-links { justify-content: center; }
  .u-teaser { flex-direction: column; gap: 20px; }
  .u-teaser-mini { width: 230px; }
  .welt-dunkel .uebergang + footer.site { padding-top: 150px; }
  .uebergang.display-rahmen { box-shadow: 0 0 0 6px #2a323a, 0 0 0 7px #3a444c, 0 40px 90px rgba(0,0,0,.55); }
  .uebergang.display-rahmen .modul { padding-top: 46px; }
  .uebergang.display-rahmen.rahmen-pur .modul { padding-top: 54px; }
  .display-bar .adresse { font-size: 11px; padding: 5px 13px; }
}

/* ============================================================
   FOOTER — dunkel & hell
   ============================================================ */
footer.site { padding: 64px 0 40px; }
.welt-dunkel footer.site { border-top: 1px solid var(--linie); background: var(--nacht); }
.welt-hell footer.site { border-top: 1px solid var(--linie-hell); background: var(--hell); }
footer.site .fuss-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
footer.site .fuss-grid img { height: 30px; width: auto; margin-bottom: 18px; }
footer.site .fuss-grid p { font-size: 13.5px; line-height: 1.7; }
.welt-dunkel footer.site .fuss-grid p { color: var(--text-grau); }
.welt-hell footer.site .fuss-grid p { color: var(--grau); }
footer.site h4 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.welt-dunkel footer.site h4 { color: #fff; }
.welt-hell footer.site h4 { color: var(--anthrazit); }
footer.site ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
footer.site ul a { font-size: 13.5px; transition: .16s; }
.welt-dunkel footer.site ul a { color: var(--text-grau); }
.welt-dunkel footer.site ul a:hover { color: #fff; }
.welt-hell footer.site ul a { color: var(--grau); }
.welt-hell footer.site ul a:hover { color: var(--blau); }
footer.site .fuss-unten { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; font-size: 12.5px; }
.welt-dunkel footer.site .fuss-unten { border-top: 1px solid var(--linie); color: var(--text-grau); }
.welt-hell footer.site .fuss-unten { border-top: 1px solid var(--linie-hell); color: var(--grau); }
footer.site .fuss-unten a { margin-left: 22px; }
.welt-dunkel footer.site .fuss-unten a:hover { color: #fff; }
.welt-hell footer.site .fuss-unten a:hover { color: var(--blau); }

/* ============================================================
   HELLE WELT — gemeinsame Bausteine
   ============================================================ */
.welt-hell .s-kopf { max-width: 760px; margin-bottom: 8px; }
.welt-hell .eyebrow, .welt-hell .s-label { color: var(--blau); }
.welt-hell h2 { color: var(--anthrazit); }
.welt-hell .s-kopf p { color: var(--grau); font-size: 16.5px; margin-top: 16px; }

/* Weißer Seitenkopf (opak dunkler Header darüber) */
.seitenkopf { padding: 150px 0 60px; background: var(--hell); border-bottom: 1px solid var(--linie-hell); }
.seitenkopf .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blau); margin-bottom: 18px; }
.seitenkopf h1 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; max-width: 20ch; margin-bottom: 20px; color: var(--anthrazit); }
.seitenkopf .lead { font-size: clamp(16px, 1.7vw, 20px); color: var(--grau-tief); max-width: 60ch; line-height: 1.6; }

/* ============================================================
   LEAN OPERATIONS — Einstieg
   ============================================================ */
.lo-einstieg { padding: 150px 0 90px; background: var(--weiss); }
.lo-einstieg .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blau); margin-bottom: 22px; }
.lo-einstieg h1 { font-size: clamp(32px, 5vw, 60px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; max-width: 18ch; margin-bottom: 26px; }
.lo-einstieg .subline { font-size: clamp(17px, 1.9vw, 22px); color: var(--grau-tief); max-width: 60ch; line-height: 1.55; margin-bottom: 30px; }
.lo-einstieg .absatz { font-size: 16px; color: var(--grau); max-width: 62ch; line-height: 1.7; margin-bottom: 22px; }
.lo-einstieg .schluss-satz { font-size: clamp(18px, 2vw, 23px); font-weight: 700; color: var(--anthrazit); max-width: 40ch; line-height: 1.4; border-left: 4px solid var(--blau); padding-left: 22px; }

/* 9 Kacheln */
.kacheln { background: var(--hell); border-top: 1px solid var(--linie-hell); }
.kacheln-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.kachel {
  background: var(--weiss); border: 1px solid var(--linie-hell); border-radius: var(--radius);
  padding: 30px 28px 26px; position: relative; overflow: hidden; transition: .22s; cursor: pointer;
  display: flex; flex-direction: column;
}
/* Kacheln ohne Detailseite (LEISTUNG-AUS): kein Link-Zeiger, Touch klappt nur auf */
@media (hover: hover) { div.kachel { cursor: default; } }
.kachel:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(34,40,43,.10); border-color: #cfd8de; }
.kachel .k-nr { font-size: 13px; font-weight: 800; color: var(--blau); letter-spacing: .08em; margin-bottom: 16px; display: block; }
.kachel h3 { font-size: 19px; font-weight: 700; color: var(--anthrazit); line-height: 1.25; margin-bottom: 12px; }
.kachel .k-text { font-size: 14px; color: var(--grau); line-height: 1.6; flex: 1; }
.kachel .k-pfeil { margin-top: 20px; color: var(--blau); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.kachel:hover .k-pfeil { gap: 12px; }
/* Zweite Ebene „Typische Anlässe" — nur auf Hover/Aufklappen */
.kachel .k-anlaesse {
  margin-top: 18px; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
  border-top: 1px solid var(--linie-hell); padding-top: 0;
}
.kachel:hover .k-anlaesse, .kachel.offen .k-anlaesse { max-height: 220px; opacity: 1; padding-top: 16px; }
.kachel .k-anlaesse .k-anl-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); margin-bottom: 8px; display: block; }
.kachel .k-anlaesse p { font-size: 12.5px; color: var(--grau-tief); line-height: 1.55; }

/* ============================================================
   END-TO-END-MODELL (Herzstück)
   ============================================================ */
.modell { background: var(--weiss); border-top: 1px solid var(--linie-hell); }
.modell .m-kopf { max-width: 760px; margin-bottom: 12px; }
.modell .m-kopf h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.modell .m-kopf .subline { font-size: 16.5px; color: var(--grau); line-height: 1.65; margin-top: 18px; max-width: 62ch; }

.modell-buehne { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(300px, 1fr); gap: 30px; margin-top: 48px; align-items: start; }
.modell-svg-box { background: linear-gradient(180deg, #fbfcfd 0%, #eef4f8 100%); border: 1px solid var(--linie-hell); border-radius: var(--radius); padding: 22px 18px; position: relative; }
.modell-svg-box svg { width: 100%; height: auto; display: block; }

/* Modell-Teile: SVG-Interaktion */
.m-teil { transition: opacity .25s ease; }
.modell-svg-box.hat-fokus .m-teil { opacity: .32; }
.modell-svg-box.hat-fokus .m-teil.aktiv { opacity: 1; }
.m-station-korpus { fill: #fff; stroke: #c3ccd3; stroke-width: 1.5; }
.m-teil.aktiv .m-station-korpus { stroke: var(--blau); stroke-width: 2; }
/* Isometrische Stationen (Wertstrom-Panorama) */
.m-iso { cursor: pointer; }
.m-iso-platte { fill: #e7eef3; stroke: #cfdae2; stroke-width: 1.2; transition: fill .22s, stroke .22s; }
.m-iso:hover .m-iso-platte { fill: #dfeaf2; stroke: #adc3d4; }
.m-teil.aktiv .m-iso-platte { fill: #d7e8f5; stroke: var(--blau); stroke-width: 1.8; }
.m-teil.aktiv .m-iso .m-label, .m-iso.aktiv .m-label { fill: var(--blau); }
.m-karte-korpus { fill: #fff; stroke: #cdd6dc; stroke-width: 1.4; }
.m-teil.aktiv .m-karte-korpus { stroke: var(--blau); stroke-width: 2; fill: #f2f8fc; }
.m-fundament-korpus { fill: #eef2f5; stroke: #d3dbe1; stroke-width: 1.3; }
.m-teil.aktiv .m-fundament-korpus { fill: #e2eef7; stroke: var(--blau); }
.m-label { font-family: var(--font); font-weight: 700; fill: var(--anthrazit); }
.m-label-klein { font-family: var(--font); font-weight: 600; fill: var(--grau); }
.m-band-label { font-family: var(--font); font-weight: 700; letter-spacing: .14em; fill: var(--grau); text-transform: uppercase; }
.m-ikon { stroke: var(--blau); fill: none; stroke-width: 1.7; }
.m-fluss { stroke: #b7c1c8; stroke-width: 2; fill: none; }
.m-fluss-blau { stroke: var(--blau); stroke-width: 1.6; fill: none; stroke-dasharray: 4 4; opacity: .55; }
.m-verbindung { stroke: #cdd6dc; stroke-width: 1.3; fill: none; }
.m-blaustreifen { fill: var(--blau); }
.m-blaustreifen-text { font-family: var(--font); fill: #fff; font-weight: 600; }

/* Klickpunkte */
.m-punkt { cursor: pointer; }
.m-punkt-kreis { fill: var(--blau); stroke: #fff; stroke-width: 2; transition: r .18s; }
.m-punkt:hover .m-punkt-kreis, .m-punkt.aktiv .m-punkt-kreis { fill: var(--blau-tief); }
.m-punkt-nr { fill: #fff; font-family: var(--font); font-weight: 700; text-anchor: middle; pointer-events: none; }
.m-puls { fill: var(--blau); opacity: .5; transform-box: fill-box; transform-origin: center; animation: puls 2.4s ease-out infinite; }
.m-punkt.aktiv .m-puls { animation: none; opacity: 0; }
@keyframes puls { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
/* Hover-Tooltip (Hover-Zeile) */
.m-tooltip { position: absolute; pointer-events: none; background: var(--anthrazit); color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 6px; opacity: 0; transform: translate(-50%, -8px); transition: opacity .15s; white-space: nowrap; z-index: 5; max-width: 240px; }
.m-tooltip.sichtbar { opacity: 1; }

/* Detailpanel (Desktop) */
.modell-panel { background: var(--weiss); border: 1px solid var(--linie-hell); border-radius: var(--radius); padding: 32px 30px; position: sticky; top: 92px; min-height: 420px; }
.modell-panel .p-leer { color: var(--grau); font-size: 15px; line-height: 1.6; }
.modell-panel .p-leer b { display: block; color: var(--anthrazit); font-size: 17px; margin-bottom: 10px; font-weight: 700; }
.p-inhalt { display: none; }
.p-inhalt.aktiv { display: block; animation: panelrein .3s ease; }
@keyframes panelrein { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none; } }
.p-label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blau); margin-bottom: 14px; }
.p-headline { font-size: 22px; font-weight: 800; color: var(--anthrazit); line-height: 1.25; letter-spacing: -.01em; margin-bottom: 22px; }
.p-block { margin-bottom: 22px; }
.p-block .p-titel { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); margin-bottom: 9px; }
.p-block p { font-size: 14.5px; color: var(--grau-tief); line-height: 1.6; }
.p-worauf { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.p-worauf li { font-size: 14px; color: var(--grau-tief); line-height: 1.5; padding-left: 26px; position: relative; }
.p-worauf li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230069b3' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.p-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--blau); border-bottom: 2px solid var(--blau); padding-bottom: 3px; margin-top: 4px; transition: .18s; }
.p-cta:hover { gap: 13px; }

/* Modell Mobile-Fallback (Liste + Akkordeon) */
.modell-liste { display: none; margin-top: 40px; flex-direction: column; gap: 12px; }
.ml-eintrag { border: 1px solid var(--linie-hell); border-radius: 12px; overflow: hidden; background: var(--weiss); }
.ml-kopf { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; }
.ml-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--blau); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ml-titel { font-size: 16px; font-weight: 700; color: var(--anthrazit); flex: 1; line-height: 1.3; }
.ml-plus { color: var(--blau); font-size: 22px; font-weight: 400; transition: transform .2s; }
.ml-eintrag.offen .ml-plus { transform: rotate(45deg); }
.ml-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.ml-eintrag.offen .ml-body { max-height: 900px; }
.ml-body-inner { padding: 0 20px 22px; }
.ml-body .p-hover { font-size: 14.5px; font-weight: 600; color: var(--blau); margin-bottom: 16px; }

/* Scroll-Anschluss unter Modell */
.m-anschluss { text-align: center; margin-top: 56px; }
.m-anschluss .kl-label { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--grau); }
.m-anschluss .kl-titel { font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; color: var(--anthrazit); letter-spacing: -.01em; margin: 12px 0 16px; }
.m-anschluss .chevron { color: var(--blau); animation: schweben-mitte 2.4s ease-in-out infinite; }

/* ============================================================
   ARBEITSWEISE (weiß, horizontaler Ablauf 01→02→03)
   ============================================================ */
.arbeit { background: var(--hell); border-top: 1px solid var(--linie-hell); }
.arbeit .s-kopf { max-width: 720px; }
.arbeit-fluss { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; margin-top: 56px; }
.arbeit-block { background: var(--weiss); border: 1px solid var(--linie-hell); border-radius: var(--radius); padding: 34px 30px; position: relative; }
.arbeit-block .ab-nr { font-size: 40px; font-weight: 800; color: var(--hell-2); line-height: 1; letter-spacing: -.03em; }
.arbeit-block h3 { font-size: 22px; font-weight: 800; color: var(--anthrazit); margin: 6px 0 6px; letter-spacing: -.01em; }
.arbeit-block .ab-unter { font-size: 14.5px; font-weight: 600; color: var(--blau); margin-bottom: 18px; }
.arbeit-block .ab-liste-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); margin-bottom: 9px; display: block; }
.arbeit-block ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.arbeit-block ul li { font-size: 13px; color: var(--grau-tief); padding-left: 18px; position: relative; line-height: 1.45; }
.arbeit-block ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--blau); }
.arbeit-block .ab-text { font-size: 13.5px; color: var(--grau); line-height: 1.6; }
.arbeit-pfeil { display: flex; align-items: center; justify-content: center; color: var(--blau); width: 44px; }

/* Insights-Teaser (weiß) */
.ins-teaser { background: var(--weiss); border-top: 1px solid var(--linie-hell); }
.ins-teaser .s-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; max-width: none; }
.ins-teaser .s-kopf .kopf-text { max-width: 640px; }
.ins-teaser .mehr-link { font-size: 14.5px; font-weight: 700; color: var(--blau); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ins-teaser .mehr-link:hover { gap: 13px; }
.ins-karten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 48px; }
.ins-karte {
  border: 1px solid var(--linie-hell); border-radius: var(--radius); overflow: hidden;
  background: var(--weiss); transition: .2s; display: flex; flex-direction: column;
}
.ins-karte:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(34,40,43,.10); }
.ins-karte .ik-bild { aspect-ratio: 4/3; overflow: hidden; }
.ins-karte .ik-bild img { width: 100%; height: 100%; object-fit: cover; }
.ins-karte .ik-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ins-karte .kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blau); }
.ins-karte h3 { font-size: 14.5px; font-weight: 700; color: var(--anthrazit); line-height: 1.35; }

/* Abschluss-CTA (weiß, ruhig) */
.lo-schluss { background: var(--hell); border-top: 1px solid var(--linie-hell); text-align: center; }
.lo-schluss h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; max-width: 22ch; margin: 0 auto 22px; color: var(--anthrazit); }
.lo-schluss p { font-size: 16.5px; color: var(--grau); max-width: 56ch; margin: 0 auto 36px; line-height: 1.65; }
.lo-schluss .neben { display: block; margin-top: 24px; font-size: 13.5px; color: var(--grau); }
.lo-schluss .neben a { color: var(--anthrazit); border-bottom: 1px solid var(--blau); }

/* ============================================================
   INSIGHTS-Seite (weiß)
   ============================================================ */
.filterleiste { display: flex; flex-wrap: wrap; gap: 10px; margin: 44px 0 40px; }
.filterleiste button { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--grau-tief); background: var(--weiss); border: 1px solid var(--linie-hell); padding: 10px 20px; border-radius: 100px; cursor: pointer; transition: .16s; }
.filterleiste button:hover { border-color: var(--blau); color: var(--blau); }
.filterleiste button.aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ============================================================
   ÜBER IPOL (weiß)
   ============================================================ */
.werte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.wert { background: var(--weiss); border: 1px solid var(--linie-hell); border-radius: var(--radius); padding: 30px 28px; }
.wert h3 { font-size: 18px; font-weight: 700; color: var(--anthrazit); margin-bottom: 12px; }
.wert p { font-size: 14px; color: var(--grau); line-height: 1.65; }
.personen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; max-width: 760px; }
.person { background: var(--weiss); border: 1px solid var(--linie-hell); border-radius: var(--radius); overflow: hidden; }
.person .kopfbild { height: 96px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blau) 0%, var(--blau-tief) 100%); color: #fff; font-size: 30px; font-weight: 800; letter-spacing: .04em; }
.person .body { padding: 24px 26px 28px; }
.person .body b { display: block; font-size: 17px; color: var(--anthrazit); }
.person .body span { display: block; font-size: 13px; color: var(--blau); font-weight: 600; margin: 4px 0 12px; }
.person .body p { font-size: 13.5px; color: var(--grau); line-height: 1.6; }
.zahlen-hell { background: var(--hell); border-top: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell); }
.zahlen-hell .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.zahlen-hell .zahl b { color: var(--anthrazit); }
.zahlen-hell .zahl b em { color: var(--blau); }
.zahlen-hell .zahl span { color: var(--grau); }
.zitat-hell { background: var(--weiss); text-align: center; }
.zitat-hell blockquote { font-size: clamp(22px, 3vw, 34px); font-weight: 700; line-height: 1.35; letter-spacing: -.015em; color: var(--anthrazit); max-width: 22ch; margin: 0 auto 20px; }
.zitat-hell blockquote em { color: var(--blau); font-style: normal; }
.zitat-hell cite { font-style: normal; font-size: 14px; color: var(--grau); }

/* CTA-Band (weiß) */
.cta-band { background: var(--anthrazit); color: #fff; }
.cta-band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.cta-band p { color: #aeb8bd; font-size: 16px; margin-top: 10px; }
.btn-weiss { background: #fff; color: var(--anthrazit); }
.btn-weiss:hover { background: var(--blau); color: #fff; transform: translateY(-2px); }

/* ============================================================
   KARRIERE (weiß, portiert aus Konzept C)
   ============================================================ */
.kar-hero-c { padding: 140px 0 70px; background: var(--hell); border-bottom: 1px solid var(--linie-hell); }
.kar-hero-c .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.kar-hero-c .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blau); margin-bottom: 20px; }
.kar-hero-c h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; margin-bottom: 22px; color: var(--anthrazit); }
.kar-hero-c h1 em { color: var(--blau); font-style: normal; }
.kar-hero-c .lead { font-size: 16.5px; color: var(--grau-tief); line-height: 1.65; margin-bottom: 32px; }
.kar-hero-c .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.kar-hero-c .kar-bild { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(34,40,43,.16); }
.kar-hero-c .kar-bild img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; }
.kar-hero-c .kar-tag { position: absolute; bottom: 16px; left: 16px; background: rgba(20,25,28,.82); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 8px 15px; border-radius: 100px; backdrop-filter: blur(4px); }

.kar-vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.kar-vorteile .v { background: var(--weiss); border: 1px solid var(--linie-hell); border-radius: var(--radius); padding: 30px 28px; transition: .2s; }
.kar-vorteile .v:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(34,40,43,.10); }
.kar-vorteile .v-ikon { width: 46px; height: 46px; border-radius: 12px; background: #eaf3fa; color: var(--blau); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.kar-vorteile .v h3 { font-size: 17px; font-weight: 700; color: var(--anthrazit); margin-bottom: 10px; }
.kar-vorteile .v p { font-size: 13.5px; color: var(--grau); line-height: 1.6; }

/* Dunkles Zitat-Band auf Karriere (welt-hell mit dunkler Insel) */
.kar-klammer { background: var(--nacht); color: #fff; }
.kar-klammer .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.kar-klammer h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; margin-bottom: 18px; }
.kar-klammer h2 em { color: var(--blau-leucht); font-style: normal; }
.kar-klammer > .wrap > div:first-child p { color: #c4cdd2; font-size: 15.5px; line-height: 1.65; max-width: 46ch; }
.mini-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
.mini-zahlen .mz b { display: block; font-size: 32px; font-weight: 800; color: var(--blau-leucht); letter-spacing: -.02em; line-height: 1; margin-bottom: 8px; }
.mini-zahlen .mz span { font-size: 12.5px; color: var(--text-grau); }

/* Stellen */
.stellen { display: flex; flex-direction: column; gap: 16px; margin-top: 52px; }
.stelle { background: var(--weiss); border: 1px solid var(--linie-hell); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s; }
.stelle:hover, .stelle[open] { border-color: #cfd8de; box-shadow: 0 14px 34px rgba(34,40,43,.08); }
/* Stellen als <details>: Kopf immer sichtbar, Ausschreibung erst nach Klick (Feedback 15.10.2026) */
.stelle > summary { list-style: none; cursor: pointer; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: var(--radius); }
.stelle > summary::-webkit-details-marker { display: none; }
.stelle > summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.stelle .s-info h3 { font-size: 18px; font-weight: 700; color: var(--anthrazit); margin-bottom: 10px; hyphens: manual; }
.stelle .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.stelle .meta span { font-size: 11.5px; font-weight: 600; color: var(--grau-tief); background: var(--hell); border: 1px solid var(--linie-hell); padding: 4px 11px; border-radius: 100px; }
.stelle .s-be { font-size: 13.5px; color: var(--grau); line-height: 1.55; max-width: 62ch; }
.stelle .s-auf { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--blau); white-space: nowrap; }
.stelle .s-auf::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.stelle[open] .s-auf::after { transform: translateY(2px) rotate(-135deg); }
.stelle[open] .s-auf { font-size: 0; gap: 0; }
.stelle[open] .s-auf::before { content: "Schließen"; font-size: 13px; margin-right: 10px; }
.stelle .s-text { padding: 4px 0 30px; margin: 0 30px; border-top: 1px solid var(--linie-hell); }
.stelle .s-text > * { max-width: 78ch; }
.stelle .s-text p, .stelle .s-text li { font-size: 14.5px; line-height: 1.65; color: var(--grau-tief); }
.stelle .s-text p { margin-top: 14px; }
.stelle .s-text h4 { font-size: 14px; font-weight: 700; color: var(--anthrazit); margin-top: 26px; line-height: 1.45; }
.stelle .s-text ul { margin: 10px 0 0; padding-left: 20px; }
.stelle .s-text li { margin-top: 6px; }
.stelle .s-text li::marker { color: var(--blau); }
.stelle .s-text a:not(.btn) { color: var(--blau); }
.stelle .s-text .btn { margin-top: 26px; }

/* Bewerbungsmodul */
.kar-bewerbung { background: var(--hell); border-top: 1px solid var(--linie-hell); scroll-margin-top: 80px; }
.an-karte { display: grid; grid-template-columns: .85fr 1.15fr; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(34,40,43,.12); }
.an-links { background: var(--nacht); color: #fff; padding: 44px 40px; }
.an-links .avatar { width: 52px; height: 52px; border-radius: 12px; background: var(--blau); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; margin-bottom: 22px; }
.an-links b.gross { display: block; font-size: 19px; margin-bottom: 6px; }
.an-links .rolle { display: block; font-size: 13px; color: var(--blau-leucht); font-weight: 600; margin-bottom: 22px; }
.an-links p { font-size: 13.5px; color: #c4cdd2; line-height: 1.65; margin-bottom: 16px; }
.an-links p b { color: #fff; }
.an-links a { color: #fff; }
.an-rechts { background: var(--weiss); padding: 44px 40px; }
.an-rechts h3 { font-size: 21px; font-weight: 800; color: var(--anthrazit); margin-bottom: 8px; }
.an-rechts > p { font-size: 14px; color: var(--grau); margin-bottom: 24px; }

/* Formulare (helle Welt) */
.formular-hell .f-feld { margin-bottom: 18px; }
.formular-hell .f-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formular-hell label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); margin-bottom: 7px; }
.formular-hell input, .formular-hell select, .formular-hell textarea {
  width: 100%; font-family: var(--font); font-size: 15px; color: var(--anthrazit);
  background: var(--hell); border: 1px solid var(--linie-hell); border-radius: 8px; padding: 13px 15px; transition: .15s;
}
.formular-hell input::placeholder, .formular-hell textarea::placeholder { color: #9aa6ad; }
.formular-hell input:focus, .formular-hell select:focus, .formular-hell textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(0,105,179,.14); background: #fff; }
.formular-hell select { appearance: none; }
.f-hinweis-hell { font-size: 12px; color: var(--grau); margin: 14px 0 22px; line-height: 1.5; }
.f-erfolg-hell { display: none; background: rgba(0,105,179,.08); border: 1px solid rgba(0,105,179,.3); color: var(--blau-tief); border-radius: 8px; padding: 16px 20px; font-size: 14px; margin-top: 20px; }

/* ============================================================
   GESPRÄCH-Seite (dunkel) + Trust-Band
   ============================================================ */
.g-seite { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; padding-top: 72px; }
.g-links { padding: 80px 70px; display: flex; flex-direction: column; justify-content: center; }
.g-links h1 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 24px; max-width: 14ch; }
.g-links > p { color: var(--text-grau); font-size: 16.5px; max-width: 44ch; margin-bottom: 44px; }
.g-punkt { display: flex; gap: 18px; margin-bottom: 26px; align-items: flex-start; }
.g-punkt .dot { width: 30px; height: 30px; border-radius: 50%; background: rgba(0,105,179,.18); color: var(--blau-leucht); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 14px; }
.g-punkt b { display: block; font-size: 15px; margin-bottom: 3px; }
.g-punkt span { font-size: 13.5px; color: var(--text-grau); }
.g-rechts { background: var(--nacht-2); border-left: 1px solid var(--linie); padding: 80px 70px; display: flex; flex-direction: column; justify-content: center; }
form.formular .f-feld { margin-bottom: 20px; }
form.formular label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-grau); margin-bottom: 8px; }
form.formular input, form.formular select, form.formular textarea {
  width: 100%; font-family: var(--font); font-size: 15px; color: #fff;
  background: var(--nacht); border: 1px solid rgba(255,255,255,.14); border-radius: 3px; padding: 15px 16px; transition: .15s;
}
form.formular input::placeholder, form.formular textarea::placeholder { color: #5d6a71; }
form.formular input:focus, form.formular select:focus, form.formular textarea:focus { outline: none; border-color: var(--blau-leucht); box-shadow: 0 0 0 3px rgba(0,105,179,.25); }
form.formular select { appearance: none; }
.f-hinweis { font-size: 12px; color: #5d6a71; margin: 16px 0 24px; }
.f-erfolg { display: none; background: rgba(46,160,67,.12); border: 1px solid rgba(46,160,67,.4); color: #7ee2a8; border-radius: 4px; padding: 18px 22px; font-size: 14.5px; margin-top: 22px; }

.trust { border-top: 1px solid var(--linie); background: var(--nacht); padding: 54px 0 58px; }
.trust-label { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-grau); margin-bottom: 26px; }
.trust-label span { color: var(--blau-leucht); font-weight: 700; }
.trust-label b { color: #fff; font-weight: 700; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.trust-karte { background: var(--nacht); padding: 26px 24px; transition: background .2s; }
.trust-karte:hover { background: var(--nacht-2); }
.trust-karte .t-kpi { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--blau-leucht); line-height: 1.1; }
.trust-karte .t-wert { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-grau); margin: 6px 0 12px; }
.trust-karte .t-text { font-size: 13px; line-height: 1.55; color: #b6c0c6; }
.trust-fuss { font-size: 12px; color: var(--text-grau); margin-top: 20px; }

/* ============================================================
   DUMMY-HINWEIS · TOAST · EINBLENDEN
   ============================================================ */
.dummy-hinweis {
  position: fixed; bottom: 18px; left: 18px; z-index: 200;
  background: rgba(255,255,255,.92); color: var(--nacht); font-size: 11.5px; letter-spacing: .03em;
  padding: 8px 14px; border-radius: 100px; pointer-events: none; font-weight: 600;
}
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 24px); z-index: 300;
  background: var(--anthrazit); color: #fff; padding: 16px 24px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.5; max-width: 92vw; text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.3); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; border: 1px solid rgba(255,255,255,.12);
}
.toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--blau-leucht); font-weight: 700; }

.einblenden { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.einblenden.sichtbar { opacity: 1; transform: none; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 1000px) {
  .modell-buehne { grid-template-columns: 1fr; }
  .modell-svg-box, .m-tooltip { display: none; }   /* SVG nur Desktop */
  .modell-panel { display: none; }
  .modell-liste { display: flex; }
  .arbeit-fluss { grid-template-columns: 1fr; gap: 16px; }
  .arbeit-pfeil { transform: rotate(90deg); height: 30px; width: auto; margin: 0 auto; }
  .ins-karten { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .felder-grid { grid-template-columns: 1fr 1fr; }
  .kacheln-grid { grid-template-columns: 1fr 1fr; }
  .zahlen .wrap, .zahlen-hell .wrap { grid-template-columns: 1fr 1fr; gap: 44px; }
  .werte-grid, .personen-grid, .kar-vorteile { grid-template-columns: 1fr 1fr; }
  .ins-grid { grid-template-columns: 1fr 1fr; }
  .g-seite { grid-template-columns: 1fr; }
  .g-links, .g-rechts { padding: 100px 32px 60px; }
  .g-rechts { border-left: 0; border-top: 1px solid var(--linie); padding-top: 60px; }
  .kar-hero-c .wrap { grid-template-columns: 1fr; gap: 34px; }
  .kar-klammer .wrap { grid-template-columns: 1fr; gap: 32px; }
  .an-karte { grid-template-columns: 1fr; }
  footer.site .fuss-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Header: Burger-Menü — Breakpoint bewusst hoch (1120px), weil die umbenannten Menüpunkte
   („Herausforderungen", „Beratungsfelder") sonst bei mittleren Breiten Logo/Toggle quetschen */
@media (max-width: 1120px) {
  .nav { height: 64px; gap: 14px; }
  .nav .menue {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: rgba(18,22,25,.98); backdrop-filter: blur(12px);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 28px 20px;
    border-bottom: 1px solid var(--linie); margin-left: 0;
  }
  .nav .menue.offen { display: flex; }
  .nav .menue a { display: block; padding: 14px 0; font-size: 15px; border-bottom: 1px solid var(--linie); }
  .nav .menue .trenn { width: 100%; height: 1px; background: var(--blau); opacity: .5; margin: 4px 0; }
  .sprache { margin-left: auto; }
  .nav .cta { padding: 9px 15px; font-size: 12px; }
  .burger { display: block; }
  .nav.menue-offen .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menue-offen .burger span:nth-child(2) { opacity: 0; }
  .nav.menue-offen .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 860px) {
  section { padding: 70px 0; }
  .hero { min-height: 92svh; }
  /* Hochformat schneidet seitlich stark: Ausschnitt nach rechts auf die Personen
     (liegen bei 62–80 % der Bildbreite), sonst zeigt Mobile nur den leeren Gang. */
  .hero .bild { opacity: .88; background-position: 80% center; }
  .hero .verlauf { background: linear-gradient(180deg, rgba(16,20,23,.42) 0%, rgba(16,20,23,.3) 32%, rgba(16,20,23,.62) 72%, rgba(16,20,23,.82) 100%); }
  /* Foto-Bänder Mobile M1: Foto frei, Textbox schmaler als Bild (Foto schaut seitlich raus) + Anschnitt über der Bildkante, hellerer Box-Ton */
  .bildband, .proof { display: block; min-height: 0; padding: 0; }
  .bildband .bb-bild, .proof .pf-bild { position: relative; inset: auto; width: 100%; height: 64vw; max-height: 330px; }
  .bildband .wrap, .proof .wrap {
    display: block; position: relative; z-index: 2;
    width: auto; max-width: none; margin: -48px 18px 0; padding: 26px 22px 8px;
    background: var(--nacht-2); border-top: 3px solid var(--blau);
    box-shadow: 0 -10px 26px rgba(9,12,14,.5);
  }
  .bildband .bb-text, .proof .pf-text { margin: 0; width: auto; max-width: none; text-align: left; text-shadow: none; paint-order: normal; -webkit-text-stroke: 0; }
  .bildband .bb-label, .bildband h2, .bildband p,
  .proof .pf-aussage, .proof cite { -webkit-text-stroke: 0; }
  .bildband h2 { margin-left: 0; }
  .bildband p { margin-left: 0; max-width: none; color: #c4cdd2; }
  .proof .pf-aussage { margin-bottom: 0; }
  .proof cite { color: #c4cdd2; } /* auf dunkler Karte wieder hell */
  .bildband::after, .proof::after { display: none; } /* Desktop-Abdunklung auf Mobile aus (Karten-Layout) */
  .sit-zeile { grid-template-columns: 1fr; gap: 12px; padding: 32px 4px; }
  .sit-zeile .pfeil { display: none; }
  .sit-zeile:hover { padding-left: 4px; }
  .prinzip .schritte { grid-template-columns: 1fr; gap: 36px; }
  .schluss { padding: 90px 0; }
  .lo-einstieg, .kar-hero-c { padding-top: 110px; }
  .seitenkopf { padding-top: 110px; }
  .stelle > summary { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; }
  .stelle .s-text { margin: 0 20px; padding-bottom: 24px; }
  .stelle .s-text .btn { width: 100%; }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; }
  .ins-teaser .s-kopf { flex-direction: column; align-items: flex-start; }
  .dummy-hinweis { display: none; }
}

/* Hero hochkant (Handy, Tablet hochkant): Im Hochformat überdecken die beiden Personen bei cover
   zwangsläufig den Text. Deshalb Bild in voller Breite oben unter der Navigation, Text darunter.
   Unterkante des Bilds (weiße Wand unter dem Fensterrahmen) läuft per Maske ins Dunkle aus. */
@media (max-width: 860px), (max-aspect-ratio: 1332/1000) {
  .hero { min-height: 0; justify-content: flex-start; padding-top: 0; }
  .hero .bild {
    opacity: 1; background-size: 100% auto; background-position: center top 64px;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(64px + 56vw), transparent calc(64px + 66.7vw));
            mask-image: linear-gradient(180deg, #000 calc(64px + 56vw), transparent calc(64px + 66.7vw));
  }
  .hero .verlauf { background: linear-gradient(180deg, rgba(16,20,23,.5) 0, rgba(16,20,23,0) 120px); }
  .hero .wrap { padding-top: calc(64px + 66.7vw + 12px); }
  .hero .runter { display: none; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 22px; }
  .felder-grid, .kacheln-grid { grid-template-columns: 1fr; }
  .werte-grid, .personen-grid, .kar-vorteile, .ins-grid, .ins-karten { grid-template-columns: 1fr; }
  .zahlen .wrap, .zahlen-hell .wrap { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .mini-zahlen { grid-template-columns: 1fr 1fr; }
  .formular-hell .f-zeile { grid-template-columns: 1fr; }
  footer.site .fuss-grid { grid-template-columns: 1fr; }
  .hero .aktionen .btn-blau { width: 100%; }
  .an-links, .an-rechts { padding: 34px 26px; }
}

/* ============================================================
   Self-Service (self-service/) — helle Welt, nutzt .formular-hell
   Backend: fleissbots.adlx.de (siehe Selfservice/selfservice-php)
   ============================================================ */
.ss-einstieg { padding: 150px 0 46px; background: var(--hell); border-bottom: 1px solid var(--linie-hell); }
.ss-einstieg .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blau); margin-bottom: 18px; }
.ss-einstieg h1 { font-size: clamp(30px, 4.5vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--anthrazit); margin-bottom: 18px; }
.ss-einstieg .subline { font-size: 17px; color: var(--grau); max-width: 62ch; line-height: 1.7; }
.ss-inhalt { padding: 46px 0 90px; }
.ss-schmal { max-width: 780px; }
.ss-karte { background: var(--weiss); border: 1px solid var(--linie-hell); border-radius: var(--radius); padding: 34px 36px; margin-bottom: 26px; }
.ss-karte .k-titel { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blau); margin-bottom: 22px; }
.ss-checkboxen { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; max-height: 320px; overflow-y: auto; border: 1px solid var(--linie-hell); border-radius: 8px; padding: 14px 16px; background: var(--hell); }
.ss-checkboxen label { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--anthrazit); text-transform: none; letter-spacing: 0; font-weight: 500; margin: 0; cursor: pointer; line-height: 1.45; }
.ss-checkboxen input { margin-top: 3px; accent-color: var(--blau); flex-shrink: 0; }
/* .formular-hell input setzt width:100% + Padding/Rahmen für Textfelder — für Checkboxen zurücknehmen */
.formular-hell .ss-checkboxen input,
.formular-hell .ss-checkboxen input:focus { width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ss-datumspaar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss-fortschritt { margin: 26px 0 34px; }
.ss-fortschritt .balken { height: 6px; border-radius: 3px; background: var(--hell-2); overflow: hidden; }
.ss-fortschritt .balken span { display: block; height: 100%; background: var(--blau); transition: width .4s; }
.ss-fortschritt p { font-size: 13px; color: var(--grau); margin-top: 8px; }
.ss-meldung { display: none; border-radius: 8px; padding: 16px 20px; font-size: 14.5px; margin: 20px 0; line-height: 1.5; }
.ss-meldung.ok { display: block; background: rgba(0,105,179,.08); border: 1px solid rgba(0,105,179,.3); color: var(--blau-tief); }
.ss-meldung.fehler { display: block; background: rgba(179,38,42,.07); border: 1px solid rgba(179,38,42,.3); color: #b3262a; }
.ss-feld-fehler { font-size: 12.5px; color: #b3262a; margin-top: 5px; }
.ss-zentriert { max-width: 560px; margin: 0 auto; text-align: center; padding: 60px 0; }
.ss-zentriert .btn { margin-top: 8px; }
@media (max-width: 760px) {
  .ss-einstieg { padding-top: 110px; }
  .ss-checkboxen, .ss-datumspaar { grid-template-columns: 1fr; }
  .ss-karte { padding: 24px 20px; }
}

/* Self-Service-Übersicht: klickbare Service-Karten */
a.ss-karte.ss-service { display: block; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
a.ss-karte.ss-service:hover { border-color: var(--blau); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(34,40,43,.08); }
.ss-service h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--anthrazit); margin-bottom: 10px; }
.ss-service p { font-size: 15px; color: var(--grau); line-height: 1.7; margin-bottom: 18px; }
.ss-service .ss-zum-service { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 13px 26px; border-radius: 3px; background: var(--blau); color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; transition: background .18s; }
a.ss-service:hover .ss-zum-service { background: var(--blau-leucht); }
.ss-hinweis-folgt { font-size: 13.5px; color: var(--grau); margin-top: 6px; }

/* ---------- Trauernotiz (temporär, Startseite) ---------- */
.trauer-notiz { background: #0e1114; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 14px 0; font-size: 14px; color: var(--text-grau); }
.trauer-notiz .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; text-align: center; }
.trauer-notiz b { color: #eaeef1; font-weight: 600; }
.trauer-notiz a { color: var(--blau-leucht); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; white-space: nowrap; }
.trauer-notiz a:hover { border-bottom-color: var(--blau-leucht); }

/* ---------- Über IPOL: Selbstverständnis / Werte / Führungsteam / Gedenken ---------- */

/* Selbstverständnis — schmale Lesespalte unter dem Sektionskopf */
.selbst-text { max-width: 760px; margin-top: 26px; }
.selbst-text p { font-size: 16.5px; line-height: 1.75; color: var(--grau-tief); }
.selbst-text p + p { margin-top: 18px; }

/* Werte: vier Karten nebeneinander */
.werte-grid.vier { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.werte-grid.vier .wert { padding: 28px 24px; }

/* Führungsteam */
#fuehrungsteam { scroll-margin-top: 90px; }
.personen-grid.vier { max-width: none; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.person.platzhalter { border-style: dashed; background: var(--hell); }
.person.platzhalter .kopfbild { background: var(--hell-2); color: var(--grau); }
.person.platzhalter .body b,
.person.platzhalter .body span,
.person.platzhalter .body p { color: var(--grau); font-weight: 500; }
.person.platzhalter .body b { font-weight: 600; }

/* Gedenken — bewusst zurückgenommen, kein Karten-Look, keine Blau-Akzente */
.gedenken {
  background: var(--hell-2);
  border-top: 1px solid var(--linie-hell);
  border-bottom: 1px solid var(--linie-hell);
  padding: 130px 0;
  scroll-margin-top: 90px;
}
.gedenken-inner { max-width: 720px; margin: 0 auto; }
.gedenken-bild {
  display: block; width: 180px; height: 220px; margin-bottom: 32px;
  background: #dfe4e8; border-radius: 4px;
}
.gedenken .s-label { color: var(--grau); margin-bottom: 18px; }
.welt-hell .gedenken .s-label { color: var(--grau); }
.gedenken-titel {
  font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.25;
  letter-spacing: -.015em; color: var(--anthrazit);
}
.gedenken-inner > p { font-size: 16px; line-height: 1.8; color: var(--grau-tief); }
.gedenken-inner > p + p { margin-top: 20px; }
.gedenken-inner > p.gedenken-daten { font-size: 14px; color: var(--grau); margin-top: 12px; }
/* Kopf (Label, Titel, Daten) steht oben über volle Breite; darunter Foto + Text */
.gedenken-inner > p.gedenken-daten { margin-bottom: 34px; }
.gedenken-inner > .gedenken-bild + p { margin-top: 0; }
.gedenken-zitat {
  margin: 44px 0 0; padding-left: 24px; border-left: 1px solid #c9d1d7;
  font-style: italic; font-size: 18px; line-height: 1.65; color: var(--anthrazit);
  font-weight: 500;
}
.gedenken-zitat cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; color: var(--grau); }
.gedenken-inner > p.gedenken-signatur { margin-top: 44px; font-size: 13.5px; line-height: 1.7; color: var(--grau); }
/* Foto statt Platzhalterfläche — Graustufen, bewusst zurückgenommen */
img.gedenken-bild { object-fit: cover; }
.gedenken-haltung {
  margin: 30px 0 0; padding-left: 24px; border-left: 1px solid #c9d1d7;
  display: flex; flex-direction: column; gap: 9px;
}
.gedenken-haltung span {
  font-style: italic; font-size: 17px; line-height: 1.65; color: var(--anthrazit);
}
.gedenken-inner > .gedenken-haltung + p { margin-top: 30px; }
.gedenken-mehr { margin-top: 36px; font-size: 14px; }
.gedenken-mehr a { color: var(--blau); text-decoration: none; border-bottom: 1px solid rgba(0,105,179,.3); }
.gedenken-mehr a:hover { border-bottom-color: var(--blau); }

/* ============================================================
   TEAM-BAND — echtes Shooting-Bild, volle Breite
   ============================================================ */
.team-band { margin: 0; padding: 0; background: var(--hell-2); }
.team-band img {
  /* Quelle ist auf 16:9 zugeschnitten und enthaelt das komplette Team.
     Darum KEINE feste Hoehe: das Bild skaliert proportional mit, niemand
     wird oben oder unten angeschnitten – auf keiner Bildschirmbreite. */
  display: block; width: 100%; height: auto; aspect-ratio: 5139 / 2916;
  object-fit: cover; object-position: center center;
}
.team-band figcaption {
  max-width: 1240px; margin: 0 auto; padding: 14px 40px 0;
  font-size: 12.5px; letter-spacing: .04em; color: var(--grau);
}

/* ============================================================
   IN MEMORIAM — eigene Seite, vollständiger Nachruf
   ============================================================ */
.memoriam { padding: 170px 0 120px; background: var(--hell-2); }
.memoriam-inner { max-width: 680px; margin: 0 auto; }
.memoriam-bild {
  display: block; width: 190px; height: 238px; object-fit: cover;
  border-radius: 4px; margin-bottom: 34px;
}
.memoriam .s-label { color: var(--grau); display: block; margin-bottom: 16px; }
.memoriam h1 {
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.2; color: var(--anthrazit); margin: 0;
}
.memoriam-daten { font-size: 14px; color: var(--grau); margin: 12px 0 40px; }
.memoriam-inner p { font-size: 16.5px; line-height: 1.85; color: var(--grau-tief); }
.memoriam-inner p + p { margin-top: 22px; }
.memoriam-auftakt { margin-top: 0 !important; font-size: 18px !important; color: var(--anthrazit) !important; }
.memoriam-betont {
  margin-top: 34px !important; font-size: 18px !important; font-weight: 500;
  color: var(--anthrazit) !important; line-height: 1.7 !important;
}
.memoriam-haltung {
  list-style: none; margin: 32px 0 0; padding-left: 24px;
  border-left: 1px solid #c9d1d7;
}
.memoriam-haltung li {
  font-style: italic; font-size: 17px; line-height: 1.7; color: var(--anthrazit);
}
.memoriam-haltung li + li { margin-top: 10px; }
.memoriam-signatur { margin-top: 48px !important; color: var(--grau) !important; }
.memoriam-signatur b { color: var(--anthrazit); font-weight: 600; }
.memoriam-zurueck { margin-top: 56px !important; font-size: 14px !important; }
.memoriam-zurueck a { color: var(--blau); text-decoration: none; }
.memoriam-zurueck a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .werte-grid.vier, .personen-grid.vier { grid-template-columns: 1fr 1fr; }
  .gedenken { padding: 100px 0; }
}
@media (max-width: 560px) {
  .werte-grid.vier, .personen-grid.vier { grid-template-columns: 1fr; }
  .gedenken { padding: 80px 0; }
  .gedenken-bild, img.gedenken-bild { width: 150px; height: 184px; margin-bottom: 32px; }
  .gedenken-zitat { font-size: 17px; padding-left: 18px; }
  .memoriam { padding: 130px 0 90px; }
  .memoriam-bild { width: 150px; height: 188px; margin-bottom: 34px; }
  .memoriam-inner p { font-size: 16px; }
}

/* Klickbares soll auch klickbar aussehen: Auswahlfelder bekommen den Zeiger.
   Labels über Textfeldern bleiben bewusst auf 'default' (Browser-Konvention). */
select { cursor: pointer; }

/* ============================================================
   PLATZHALTER / ZUARBEIT — nur im Arbeitsstand, vor Livegang entfernen
   ============================================================ */
.zuarbeit {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #8a6d1f; background: #fdf4dd; border: 1px solid #efdca6;
  padding: 4px 10px; border-radius: 3px; margin-bottom: 14px;
}
.zuarbeit::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #d8a72a; }
/* Platzhaltertext: gelb hinterlegt, damit jede Luecke sofort ins Auge faellt.
   Block-Varianten bekommen zusaetzlich einen gelben Balken links. */
.lorem { background: #fdf4dd; color: #7a6018; }
p.lorem, li.lorem, div.lorem {
  display: block; padding: 12px 16px; border-left: 3px solid #d8a72a;
  border-radius: 0 4px 4px 0;
}
p.lorem + p.lorem { margin-top: 10px; }
.detail-schritte .lorem, span.lorem { padding: 1px 5px; border-radius: 2px; }
.detail-seitenleiste li.lorem { padding: 9px 14px; margin-bottom: 4px; border-bottom: 0; }
.lorem::selection { background: #f6e4ae; }
.bild-platzhalter {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #f1ece0 0 10px, #eae4d6 10px 20px);
  border: 1px solid #e0d2ab; border-radius: var(--radius);
  color: #8a7538; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; text-align: center; padding: 20px;
}
.bild-platzhalter.breit { aspect-ratio: 16/7; }
.bild-platzhalter.quadrat { aspect-ratio: 4/3; }

/* ============================================================
   DETAILSEITEN (Leistungen / Insights) — gemeinsames Gerüst
   ============================================================ */
.detail-kopf { padding: 150px 0 54px; background: var(--hell); border-bottom: 1px solid var(--linie-hell); }
.detail-kopf .zurueck {
  display: inline-block; font-size: 13px; color: var(--grau); text-decoration: none; margin-bottom: 26px;
}
.detail-kopf .zurueck:hover { color: var(--blau); }
.detail-kopf .eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--blau); margin-bottom: 18px;
}
.detail-kopf h1 {
  font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.1; max-width: 20ch; margin-bottom: 20px; color: var(--anthrazit);
}
.detail-kopf .lead { font-size: clamp(16px, 1.7vw, 19px); color: var(--grau-tief); max-width: 62ch; line-height: 1.65; }
.anlass-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.anlass-tags span {
  font-size: 12.5px; color: var(--grau-tief); background: var(--weiss);
  border: 1px solid var(--linie-hell); border-radius: 99px; padding: 6px 14px;
}
.detail-body { padding: 80px 0 30px; background: var(--weiss); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 56px; align-items: start; }
.detail-grid h2 { font-size: clamp(22px, 2.5vw, 29px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 16px; }
.detail-grid h2:not(:first-child) { margin-top: 52px; }
.detail-grid p { font-size: 16px; line-height: 1.75; color: var(--grau-tief); }
.detail-grid p + p { margin-top: 16px; }
.detail-schritte { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: schritt; }
.detail-schritte li {
  counter-increment: schritt; position: relative; padding-left: 46px; margin-bottom: 22px;
  font-size: 16px; line-height: 1.7; color: var(--grau-tief);
}
.detail-schritte li::before {
  content: counter(schritt, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-size: 13px; font-weight: 700; color: var(--blau); letter-spacing: .05em;
}
.detail-schritte li b { display: block; color: var(--anthrazit); font-weight: 700; margin-bottom: 3px; }
.detail-seitenleiste {
  background: var(--hell); border: 1px solid var(--linie-hell); border-radius: var(--radius);
  padding: 28px 26px; position: sticky; top: 100px;
}
.detail-seitenleiste h3 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin: 0 0 16px; }
.detail-seitenleiste ul { list-style: none; margin: 0 0 24px; padding: 0; }
.detail-seitenleiste li { font-size: 14.5px; line-height: 1.6; color: var(--grau-tief); padding: 9px 0; border-bottom: 1px solid var(--linie-hell); }
.detail-seitenleiste li:last-child { border-bottom: 0; }
.detail-seitenleiste a.btn { width: 100%; justify-content: center; }
.detail-nachbarn { padding: 20px 0 90px; background: var(--weiss); }
.detail-nachbarn .nb-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 22px; }
.detail-nachbarn a {
  display: block; padding: 20px 22px; border: 1px solid var(--linie-hell); border-radius: var(--radius);
  text-decoration: none; color: var(--anthrazit); font-weight: 600; font-size: 15px; transition: .2s;
}
.detail-nachbarn a:hover { border-color: var(--blau); color: var(--blau); }
.detail-nachbarn .nb-label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); margin-bottom: 7px; font-weight: 700; }

/* Rechtstexte */
.recht { padding: 150px 0 110px; background: var(--weiss); }
.recht-inner { max-width: 760px; margin: 0 auto; }
.recht-inner h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px; }
.recht-inner .stand { font-size: 13px; color: var(--grau); margin-bottom: 44px; }
.recht-inner h2 { font-size: 20px; font-weight: 700; margin: 44px 0 14px; letter-spacing: -.01em; }
.recht-inner h3 { font-size: 16px; font-weight: 700; margin: 28px 0 10px; }
.recht-inner p, .recht-inner li { font-size: 15.5px; line-height: 1.8; color: var(--grau-tief); }
.recht-inner p + p { margin-top: 14px; }
.recht-inner ul { margin: 14px 0 14px 22px; }
.recht-inner li { margin-bottom: 7px; }
.recht-inner address { font-style: normal; line-height: 1.8; font-size: 15.5px; color: var(--grau-tief); }
.recht-hinweis {
  background: #fdf4dd; border: 1px solid #efdca6; border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 40px; font-size: 14.5px; line-height: 1.7; color: #7a6018;
}
.recht-hinweis b { color: #5e4a12; }
.luecke { background: #fdf4dd; border-bottom: 1px solid #d8a72a; padding: 0 3px; color: #7a6018; font-weight: 600; }

@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .detail-seitenleiste { position: static; }
  .detail-nachbarn .nb-grid { grid-template-columns: 1fr; }
  .detail-kopf { padding: 120px 0 44px; }
  .recht { padding: 120px 0 80px; }
}

/* Führungsteam mit Porträts (Feedback 15.10.2026) – natürliche Farben, einheitlich angeglichen, erzeugt von
   assets/werkzeuge/gen_fuehrung.py */
.person .portrait { display: block; background: var(--hell-2); }
.person .portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* Gedenkblock: auf dem Desktop steht das Porträt links, der Text umfließt es */
@media (min-width: 861px) {
  .gedenken-inner { max-width: 820px; display: flow-root; }
  /* Höhe so gewählt, dass die ersten beiden Absätze neben dem Foto enden (kein Wortrest darunter) */
  .gedenken-bild, img.gedenken-bild { float: left; width: 210px; height: 262px; margin: 6px 44px 24px 0; }
  .memoriam-inner { max-width: 780px; display: flow-root; }
  /* Maße so gewählt, dass Auftakt und zweiter Absatz genau neben dem Foto enden (kein Wortrest darunter) */
  .memoriam-bild { float: left; width: 300px; height: 405px; margin: 6px 44px 24px 0; }
}
@media (max-width: 560px) {
  /* Porträts auch auf dem Handy zweispaltig, sonst wird die Liste sehr lang */
  .personen-grid.vier { grid-template-columns: 1fr 1fr; gap: 12px; }
  .personen-grid.vier .person .body { padding: 14px 14px 18px; }
  .personen-grid.vier .person .body b { font-size: 15px; }
}

/* Bewerbungsformular (15.10.2026) */
.formular-hell input[type=file] { padding: 10px 12px; cursor: pointer; }
.f-datei-hinweis { display: block; font-size: 12px; color: var(--grau); margin-top: 6px; line-height: 1.5; }
.f-falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--grau-tief); margin: 6px 0 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.formular-hell .f-check { font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--grau-tief); }
.f-check input { width: auto; margin-top: 3px; flex: none; }
.f-check a, .f-noch-inaktiv a { color: var(--blau); }
.formular-hell button[disabled] { opacity: .45; cursor: not-allowed; }
.f-noch-inaktiv { font-size: 12.5px; color: var(--grau); margin-top: 10px; text-align: center; line-height: 1.5; }
.f-fehler { display: none; background: rgba(214,80,80,.14); border: 1px solid rgba(214,80,80,.5); color: #f3c9c9; border-radius: 8px; padding: 14px 18px; font-size: 14px; margin-top: 16px; }
.f-fehler-hell { display: none; background: #fdf1f1; border: 1px solid #e3b4b4; color: #8a2a2a; border-radius: 8px; padding: 14px 18px; font-size: 14px; margin-top: 16px; }
.formular-hell .f-check input { width: 18px; height: 18px; padding: 0; margin-top: 2px; accent-color: var(--blau); }