/* Fassung 1 "Lotse": Seekarte bei Nacht.
   Tokens aus design/KONZEPTE.md, Abschnitt 2 und 5.2. */

:root {
  --n0: #F8FAFD; --n1: #ECF1F5; --n2: #D9E0E9; --n3: #B3BFCD; --n4: #7A95B3;
  --n5: #0066B3; --n6: #014F90; --n7: #013B6F; --n8: #012B51; --n9: #031C36;
  --n10: #031122; --n11: #020914;
  --ink-soft: #454E58; --ink-muted: #616A74;
  --licht: #9EC8F7; --signal: #F7C15F; --weiss: #FFFFFF;

  /* Dunkel ist der Standard dieser Fassung */
  --grund: var(--n10); --band: var(--n9); --flaeche: var(--n8);
  --text: var(--n2); --text-2: var(--n3); --meta: var(--n4);
  --linie: rgba(122, 149, 179, 0.28); --tiefenlinie: rgba(122, 149, 179, 0.22);
  --akzent: var(--licht); --fokus: var(--signal);
  --cta-grund: var(--signal); --cta-text: var(--n10);

  --serif: "Source Serif 4 Variable", "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans Variable", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-hero: clamp(2.75rem, 1.6rem + 4.4vw, 6rem);
  --t-h2: clamp(1.875rem, 1.3rem + 1.9vw, 3.25rem);
  --t-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.5rem);
  --t-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --t-vorspann: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-mono: 0.78rem;

  --rand: 16px;
  --sektion: clamp(5rem, 4rem + 4vw, 8rem);
  --kopf-h: 72px;
  --dur: 220ms; --dur-lang: 700ms; --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1024px) { :root { --rand: 48px; } }
@media (max-width: 1023px) { :root { --kopf-h: 64px; } }
/* Große Bildschirme: Raster breiter, Grundschrift etwas größer, damit 2560 px nicht leer wirken */
@media (min-width: 1920px) { :root { --huelle: 1440px; --kopf-breite: 1600px; } }
@media (min-width: 2400px) { html { font-size: 112.5%; } :root { --huelle: 1600px; --kopf-breite: 1760px; } }

.hell {
  --grund: var(--n0); --band: var(--n1); --flaeche: var(--weiss);
  --text: var(--n9); --text-2: var(--ink-soft); --meta: var(--ink-muted);
  --linie: var(--n2); --tiefenlinie: rgba(179, 191, 205, 0.5);
  --akzent: var(--n5); --fokus: var(--n5);
  --cta-grund: var(--n7); --cta-text: var(--weiss);
  background: var(--grund); color: var(--text);
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 var(--t-body)/1.6 var(--sans); font-synthesis: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
@media (max-width: 767px) { h1, h2, h3, .zitat, .hafen__ort { hyphens: auto; -webkit-hyphens: auto; } }
h1 em, h2 em, h3 em, h1 b, h2 b, h3 b, h1 strong, h2 strong { font-style: inherit; font-weight: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
::selection { background: var(--signal); color: var(--n10); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--signal); color: var(--n10); font-weight: 600; }
.sprung:focus { top: 12px; }

.huelle { width: 100%; max-width: calc(var(--huelle, 1280px) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--sektion); }
.mono { font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; }
.kennung { color: var(--meta); margin-bottom: 20px; }
.h1, .h2 { font-family: var(--serif); font-weight: 400; color: var(--weiss); }
.hell .h1, .hell .h2 { color: var(--n7); }
.h2 { font-size: var(--t-h2); letter-spacing: -0.014em; line-height: 1.1; }
.h3 { font: 600 var(--t-h3)/1.25 var(--sans); letter-spacing: -0.004em; }
.vorspann { font-size: var(--t-vorspann); line-height: 1.55; color: var(--text-2); max-width: 60ch; margin-top: 20px; }
.lesen { max-width: 64ch; }
.lesen p + p { margin-top: 1em; }

/* Knöpfe und Links */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent;
  font: 500 var(--t-mono)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.knopf--signal { background: var(--cta-grund); color: var(--cta-text); }
.knopf--signal:hover { background: #FFD58A; }
.hell .knopf--signal:hover { background: var(--n6); }
.knopf--rahmen { border-color: var(--akzent); color: var(--text); background: transparent; }
.knopf--rahmen:hover { background: var(--akzent); color: var(--n10); }
.pfeil-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 28px;
  color: var(--text); text-decoration: none; font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.pfeil-link::after { content: ""; width: 16px; height: 1px; background: var(--akzent); box-shadow: 0 0 0 0 transparent; transition: width var(--dur) var(--ease); }
.pfeil-link:hover { background-size: 100% 1px; }
.pfeil-link:hover::after { width: 26px; }

/* Kopf */
.kopf-sentinel { position: absolute; top: 80px; height: 1px; width: 1px; }
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 100; color: var(--n2);
  transition: background var(--dur) var(--ease), transform 320ms var(--ease), border-color var(--dur);
  border-bottom: 1px solid transparent;
}
.kopf.ist-gerollt, .kopf.mega-offen { background: rgba(3, 17, 34, 0.94); border-bottom-color: var(--linie); }
.kopf.ist-versteckt { transform: translateY(-100%); }
.kopf__leiste { display: flex; align-items: center; gap: 32px; height: var(--kopf-h); max-width: calc(var(--kopf-breite, 1440px) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.kopf__logo { flex-shrink: 0; display: block; }
.kopf__logo img { height: 40px; width: auto; }
.kopf__nav { display: flex; gap: 4px; margin-left: 8px; }
.kopf__link {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  color: var(--n2); text-decoration: none; font: 500 0.9375rem/1 var(--sans);
  background: none; border: 0; cursor: pointer; position: relative;
}
.kopf__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.kopf__link:hover::after, .kopf__link.ist-aktiv::after, .kopf__link[aria-expanded="true"]::after { transform: scaleX(1); }
.kopf__pfeil { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) var(--ease); }
[aria-expanded="true"] > .kopf__pfeil { transform: translateY(1px) rotate(-135deg); }
.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.kopf__tel { color: var(--n3); text-decoration: none; white-space: nowrap; }
.kopf__tel:hover { color: var(--signal); }
.kopf__burger { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--linie); color: var(--n2); cursor: pointer; position: relative; }
.kopf__burger-linie, .kopf__burger-linie::before, .kopf__burger-linie::after { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; content: ""; transition: transform var(--dur) var(--ease), opacity var(--dur); }
.kopf__burger-linie { top: 21px; }
.kopf__burger-linie::before { left: 0; right: 0; top: -6px; }
.kopf__burger-linie::after { left: 0; right: 0; top: 6px; }
[aria-expanded="true"] > .kopf__burger-linie { background: transparent; }
[aria-expanded="true"] > .kopf__burger-linie::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] > .kopf__burger-linie::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1199px) { .kopf__tel { display: none; } }
@media (max-width: 1023px) {
  .kopf__nav, .kopf__rechts > .knopf { display: none; }
  .kopf__burger { display: block; }
  .kopf__logo img { height: 34px; }
}

/* Mega-Menü */
.mega { position: absolute; inset: 100% 0 auto 0; background: rgba(3, 17, 34, 0.98); border-bottom: 1px solid var(--linie); }
.mega[hidden] { display: none; }
.mega__innen { max-width: calc(var(--kopf-breite, 1440px) + 2 * var(--rand)); margin-inline: auto; padding: 40px var(--rand) 32px; }
.mega__spalten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.mega__spalte { padding-top: 16px; border-top: 1px solid var(--linie); transition: border-color var(--dur); }
.mega__spalte:hover, .mega__spalte:focus-within { border-top-color: var(--signal); }
.mega__kuerzel { color: var(--signal); margin-bottom: 6px; }
.mega__bereich { font: 400 1.375rem/1.2 var(--serif); color: var(--weiss); margin-bottom: 16px; min-height: 2.4em; }
.mega__spalte a { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; color: var(--n2); text-decoration: none; font-size: 0.9375rem; line-height: 1.35; }
.mega__spalte a .mono { color: var(--meta); font-size: 0.6875rem; }
.mega__spalte a:hover { color: var(--weiss); }
.mega__spalte a:hover .mono { color: var(--signal); }
.mega__fuss { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); }
.mega__sektor { width: 64px; height: 64px; }
.mega-offen-seite::before { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(2, 9, 20, 0.5); }

/* Mobiles Menü, außerhalb des Kopfs */
.mobil { position: fixed; inset: 0; z-index: 95; background: var(--n10); overflow-y: auto; padding: calc(var(--kopf-h) + 16px) var(--rand) 40px; }
.mobil[hidden] { display: none; }
.mobil__kennung { color: var(--meta); margin-bottom: 16px; }
.mobil__bereich { border-top: 1px solid var(--linie); }
.mobil__bereich summary { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; cursor: pointer; list-style: none; font: 400 1.375rem/1.2 var(--serif); color: var(--weiss); }
.mobil__bereich summary::-webkit-details-marker { display: none; }
.mobil__bereich summary .mono { color: var(--signal); width: 16px; }
.mobil__bereich ul { padding: 0 0 16px 32px; }
.mobil__bereich a, .mobil__weitere a { display: block; padding: 10px 0; color: var(--n2); text-decoration: none; }
.mobil__weitere { border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 4px; }
.mobil__weitere a { font-size: 1.125rem; }
.mobil__fuss { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.mobil__fuss .mono { color: var(--n3); text-decoration: none; }
body.menue-offen { overflow: hidden; }
body.menue-offen .kopf { background: var(--n10); border-bottom-color: var(--linie); transform: none; }

/* Hero */
.held { position: relative; min-height: min(100svh, 940px); display: flex; align-items: center; overflow: hidden; background: var(--n10); isolation: isolate; }
.held__karte { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.held__schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3, 17, 34, 0.86) 0%, rgba(3, 17, 34, 0.55) 45%, rgba(3, 17, 34, 0) 75%), linear-gradient(0deg, var(--n10) 0%, rgba(3, 17, 34, 0) 22%); pointer-events: none; }
.held__inhalt { padding-top: calc(var(--kopf-h) + 48px); padding-bottom: 120px; }
.held__kicker { color: var(--n3); max-width: 62ch; }
.held__titel { font: 400 var(--t-hero)/1.0 var(--serif); letter-spacing: -0.022em; color: var(--weiss); margin-top: 8px; }
.held__sub { max-width: 44ch; margin-top: 28px; font-size: var(--t-vorspann); line-height: 1.55; color: var(--n2); }
.held__aktion { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; margin-top: 40px; }
.held__position { position: absolute; right: var(--rand); bottom: 32px; display: grid; gap: 4px; text-align: right; color: var(--n4); }
.held__position span:first-child { color: var(--signal); }
@media (max-width: 767px) {
  .held { align-items: flex-end; min-height: max(640px, 92svh); }
  .held__inhalt { padding-bottom: 96px; }
  .held__schleier { background: linear-gradient(0deg, rgba(3, 17, 34, 0.95) 0%, rgba(3, 17, 34, 0.7) 50%, rgba(3, 17, 34, 0.2) 100%); }
  .held__position { left: var(--rand); right: auto; text-align: left; display: flex; gap: 16px; bottom: 24px; }
}

/* Peilungszeile */
.peilung { border-block: 1px solid var(--linie); background: var(--n10); }
.peilung__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 48px; padding-block: 22px; color: var(--n3); }
@media (max-width: 767px) { .peilung__zeile { display: grid; grid-template-columns: 1fr 1fr; } }

/* Sektorenkreis */
.sektor { overflow: visible; }
.sektor__ring { fill: none; stroke: var(--linie); }
.sektor__skala line { stroke: var(--n4); stroke-width: 0.6; opacity: 0.6; }
.sektor__feld { fill: rgba(122, 149, 179, 0.08); stroke: var(--linie); stroke-width: 0.8; transition: fill 320ms var(--ease); }
.sektor__feld.ist-aktiv { fill: var(--signal); }
.sektor__kuerzel { font: 500 11px var(--mono); fill: var(--n3); text-anchor: middle; pointer-events: none; transition: fill 320ms; }
.sektor__feld.ist-aktiv + .sektor__kuerzel { fill: var(--n10); }
.sektor__mitte { fill: var(--signal); }
.hell .sektor__feld { fill: rgba(1, 59, 111, 0.05); }
.hell .sektor__feld.ist-aktiv { fill: var(--n7); }
.hell .sektor__feld.ist-aktiv + .sektor__kuerzel { fill: var(--weiss); }
.hell .sektor__kuerzel { fill: var(--n7); }
.hell .sektor__mitte { fill: var(--n5); }

/* Quadranten */
.quadranten__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.quadranten__kreis-innen { position: sticky; top: calc(var(--kopf-h) + 64px); width: min(100%, 380px); }
.quadranten__kreis { position: relative; }
.quadranten__kreis-innen .sektor { width: 100%; height: auto; }
.quadranten__legende { color: var(--signal); margin-top: 20px; position: sticky; top: calc(var(--kopf-h) + 64px + min(100%, 380px) + 20px); }
.peillinie { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.peillinie line { stroke: var(--signal); stroke-width: 1; stroke-dasharray: 4 6; opacity: 0; transition: opacity 240ms var(--ease); }
.peillinie.ist-sichtbar line { opacity: 0.9; }
.quadranten__vorspann { margin-bottom: 40px; }
.quadrant { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 32px 0; border-top: 1px solid var(--linie); transition: border-color 320ms; }
.quadrant.ist-aktiv { border-top-color: var(--signal); }
.quadrant__kuerzel { color: var(--meta); font-size: 1rem; padding-top: 10px; transition: color 320ms; }
.quadrant.ist-aktiv .quadrant__kuerzel { color: var(--signal); }
.quadrant__titel { font: 400 clamp(1.625rem, 1.3rem + 1vw, 2.25rem)/1.15 var(--serif); color: var(--weiss); }
.quadrant__text { color: var(--text-2); margin-top: 12px; max-width: 54ch; }
.quadrant__links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; }
@media (max-width: 1023px) {
  .quadranten__raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .quadranten__kreis-innen { position: relative; top: 0; width: 240px; margin-inline: auto; }
  .quadranten__legende { position: static; text-align: center; }
}

/* Lichtkegel über dem Index */
.index-licht { position: relative; background: var(--n10); border-top: 1px solid var(--linie); }
.index-licht__buehne { min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--kopf-h) + 24px) 32px; }
.index-licht__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 40px; }
.index-licht__kopf .kennung { margin-bottom: 0; order: 2; }
.index-licht__karte { position: relative; }
.index-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
@media (min-width: 1200px) { .index-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; } }
/* Niedrige Bildschirme: Index enger, damit die angeheftete Bühne ganz sichtbar bleibt */
@media (min-width: 768px) and (max-height: 820px) { .index-liste a, .index-liste > li > span { padding: 12px 0; } .index-licht__kopf { margin-bottom: 24px; } }
@media (min-width: 768px) and (max-height: 760px) { .index-licht__buehne { padding-block: calc(var(--kopf-h) + 8px) 12px; } .index-licht__kopf { margin-bottom: 16px; } .index-liste a, .index-liste > li > span { padding: 10px 0; } .index-liste__satz { font-size: 0.875rem; line-height: 1.4; } .index-licht__kopf .h2 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); } }
.index-liste > li { border-top: 1px solid var(--linie); }
.index-liste a, .index-liste > li > span { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; text-decoration: none; color: inherit; }
.index-liste__k { grid-row: span 2; padding-top: 6px; }
.index-liste__name { font: 400 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)/1.2 var(--serif); }
.index-liste__satz { font-size: 0.9375rem; line-height: 1.45; margin-top: 4px; }
/* Grundliste gedimmt, Lichtliste voll, durch den Kegel maskiert */
.js .index-licht.ist-aktiv .index-liste:not(.index-liste--licht) { color: var(--n4); }
.js .index-licht.ist-aktiv .index-liste:not(.index-liste--licht) .mono { color: rgba(122, 149, 179, 0.6); }
.index-liste a:hover, .index-liste a:focus-visible { color: var(--weiss) !important; }
.index-liste a:hover .index-liste__k { color: var(--signal) !important; }
.index-liste--licht { position: absolute; inset: 0; pointer-events: none; color: var(--weiss); display: none; }
.index-liste--licht .index-liste__k { color: var(--signal); }
.index-liste--licht .index-liste__satz { color: var(--n2); }
.index-licht__kegel { position: absolute; inset: 0; pointer-events: none; display: none; }
.js .index-licht.ist-aktiv .index-liste--licht { display: grid; }
.js .index-licht.ist-aktiv .index-licht__kegel { display: block; }
.index-licht.ist-aktiv .index-liste--licht,
.index-licht.ist-aktiv .index-licht__kegel {
  --w: 100deg;
  -webkit-mask-image: conic-gradient(from calc(var(--w) - 15deg) at -8% -30%, transparent 0deg, #000 7deg, #000 23deg, transparent 30deg, transparent 360deg);
  mask-image: conic-gradient(from calc(var(--w) - 15deg) at -8% -30%, transparent 0deg, #000 7deg, #000 23deg, transparent 30deg, transparent 360deg);
}
.index-licht__kegel { background: radial-gradient(140% 120% at -8% -30%, rgba(247, 193, 95, 0.16), rgba(247, 193, 95, 0.02) 70%); }
.index-liste a .mono { color: var(--meta); }
@media (max-width: 767px) { .index-liste { grid-template-columns: minmax(0, 1fr); } }

/* Kurs quer */
.kurs-band { position: relative; overflow: hidden; background: var(--n9); }
.kurs-band__bild { position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: luminosity; }
.kurs-band__bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.kurs-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--n9) 0%, rgba(3, 28, 54, 0.6) 40%, var(--n9) 100%); }
.kurs-band > .huelle { position: relative; z-index: 1; }
.kurs-quer { position: relative; margin-top: 72px; }
.kurs-quer__linie { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--akzent); transform-origin: left; transition: transform 900ms var(--ease); }
.js .kurs-quer:not(.ist-in) .kurs-quer__linie { transform: scaleX(0); }
.kurs-quer__punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; position: relative; }
.kurs-quer__punkte h3 { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--serif); color: var(--weiss); margin: 8px 0 12px; }
.kurs-quer__punkte p:not(.mono) { color: var(--text-2); max-width: 36ch; }
.kurs-quer__punkte .mono { color: var(--signal); margin-top: 28px; }
.wegpunkt { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--akzent); background: var(--n9); position: relative; }
.wegpunkt::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--signal); transform: scale(0); transition: transform 360ms var(--ease); }
.ist-in .wegpunkt::after, .kein-js .wegpunkt::after { transform: scale(1); }
.js .kurs-quer .kurs-quer__punkte li { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.js .kurs-quer.ist-in .kurs-quer__punkte li { opacity: 1; transform: none; }
.js .kurs-quer.ist-in .kurs-quer__punkte li:nth-child(2) { transition-delay: 160ms; }
.js .kurs-quer.ist-in .kurs-quer__punkte li:nth-child(3) { transition-delay: 320ms; }
@media (max-width: 767px) {
  .kurs-quer__linie { display: none; }
  .kurs-quer__punkte { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-left: 28px; border-left: 2px solid var(--akzent); }
  .wegpunkt { position: absolute; left: -37px; }
  .kurs-quer__punkte li { position: relative; }
  .kurs-quer__punkte .mono { margin-top: 0; }
}

/* Logbuch und Laufband */
.logbuch { background: var(--n10); overflow: hidden; }
.logbuch__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
.leine { position: relative; border-block: 1px solid var(--linie); padding-block: 36px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.leine__spur { display: flex; width: max-content; animation: leine 60s linear infinite; }
.leine:hover .leine__spur, .leine:focus-within .leine__spur { animation-play-state: paused; }
.leine__reihe { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
@keyframes leine { to { transform: translateX(-50%); } }
.logo-ref { height: calc(30px * var(--f, 1)); width: auto; max-width: 200px; object-fit: contain; opacity: 0.85; transition: opacity var(--dur); }
.logo-ref:hover { opacity: 1; }
.leine__reihe li:first-child .logo-ref { height: calc(22px * var(--f, 1)); }
.partner { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; align-items: center; }
.partner__titel { color: var(--meta); }
.partner__reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; }
.partner .logo-ref { height: calc(26px * var(--f, 1)); opacity: 0.7; }
@media (max-width: 767px) {
  .partner { grid-template-columns: minmax(0, 1fr); }
  .partner__reihe { justify-content: flex-start; }
  .leine__reihe { gap: 48px; padding-right: 48px; }
}

/* Seezeichen */
.seezeichen { background: var(--n9); }
.seezeichen__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.platten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 32px; }
.platte { border: 1px solid var(--linie); background: rgba(3, 17, 34, 0.6); padding: 22px 20px 24px; display: flex; flex-direction: column; }
.platte__kopf { color: var(--signal); font-size: 0.6875rem; }
.platte__titel { font: 400 1.25rem/1.25 var(--serif); color: var(--weiss); margin: 14px 0 18px; hyphens: auto; -webkit-hyphens: auto; }
.platte__meta { display: grid; gap: 10px; margin-top: auto; }
.platte__meta dt { font-size: 0.625rem; color: var(--meta); }
.platte__meta dd { font-size: 0.875rem; color: var(--n2); }
@media (max-width: 1023px) { .seezeichen__raster { grid-template-columns: minmax(0, 1fr); } .seezeichen__bild { max-width: 440px; } }
@media (max-width: 767px) { .platten { grid-template-columns: minmax(0, 1fr); } }

/* Fotos: Duoton Navy */
.foto__rahmen { position: relative; overflow: hidden; background: var(--n8); }
.foto__rahmen img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.92); mix-blend-mode: luminosity; }
.foto__rahmen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(2, 9, 20, 0.45) 100%), linear-gradient(180deg, rgba(1, 59, 111, 0.18), rgba(3, 17, 34, 0.32)); }
.hell .foto__rahmen { background: var(--n7); }
.foto--3-2 .foto__rahmen { aspect-ratio: 3 / 2; }
.foto--4-5 .foto__rahmen { aspect-ratio: 4 / 5; }
.foto--1-1 .foto__rahmen { aspect-ratio: 1; }
.foto--21-9 .foto__rahmen { aspect-ratio: 21 / 9; }
.foto--16-9 .foto__rahmen { aspect-ratio: 16 / 9; }
.foto__nachweis { margin-top: 10px; font: 400 0.75rem/1.4 var(--sans); color: var(--meta); }
.foto__nachweis a { color: inherit; }
.foto--nacht .foto__rahmen img { filter: grayscale(1) contrast(1.15) brightness(1.05); }

/* Standorte */
.standorte { background: var(--n10); }
.standorte__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.hafen-liste { margin-top: 40px; }
.hafen { padding: 20px 0; border-top: 1px solid var(--linie); transition: border-color var(--dur); cursor: default; }
.hafen.ist-aktiv, .hafen:hover { border-top-color: var(--signal); }
.hafen__kopf { color: var(--meta); font-size: 0.6875rem; }
.hafen__ort { font: 400 1.75rem/1.2 var(--serif); color: var(--weiss); margin-top: 6px; }
.hafen__firma { color: var(--text-2); font-size: 0.9375rem; margin-top: 4px; }
.standorte__karte { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--linie); background: radial-gradient(80% 70% at 40% 40%, rgba(1, 59, 111, 0.35), transparent 70%); }
.standorte__karte canvas { width: 100%; height: 100%; }
@media (max-width: 1023px) { .standorte__raster { grid-template-columns: minmax(0, 1fr); } .standorte__karte { order: -1; aspect-ratio: 16 / 11; } }

/* Funkspruch und Formular */
.funkspruch { background: var(--n9); padding-block: var(--sektion); border-top: 1px solid var(--linie); }
.funkspruch__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.funkspruch__daten { display: grid; gap: 16px; margin-top: 40px; }
.funkspruch__daten dt { color: var(--meta); font-size: 0.6875rem; }
.funkspruch__daten dd { margin-top: 4px; }
.funkspruch__daten a { color: var(--weiss); text-decoration: none; }
.funkspruch__daten a:hover { color: var(--signal); }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; align-content: start; }
.feld { display: grid; gap: 8px; }
.feld--breit, .formular__hinweis, .formular > .knopf { grid-column: 1 / -1; }
.formular > .knopf { justify-self: start; }
.feld label { font: 500 0.6875rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }
.feld input, .feld textarea, .feld select {
  width: 100%; min-height: 48px; padding: 10px 0; font: inherit; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid var(--n4); border-radius: 0;
  transition: border-color var(--dur);
}
.feld textarea { resize: vertical; min-height: 120px; }
.feld input:focus, .feld textarea:focus { outline: none; border-bottom: 2px solid var(--fokus); }
.feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__hinweis { font-size: 0.8125rem; color: var(--meta); max-width: 64ch; }
.formular__hinweis a { color: var(--text-2); }
.hell .feld input, .hell .feld textarea { border-bottom-color: var(--n3); }
@media (max-width: 1023px) { .funkspruch__raster { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 599px) { .formular { grid-template-columns: minmax(0, 1fr); } }

/* Fuß */
.fuss { background: var(--n11); color: var(--n3); padding: 64px 0 32px; border-top: 1px solid var(--linie); font-size: 0.9375rem; }
.fuss__koordinaten { color: var(--signal); margin-bottom: 40px; }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.fuss__marke img { height: 40px; width: auto; margin-bottom: 20px; }
.fuss__marke p { max-width: 40ch; }
.fuss address { font-style: normal; margin-top: 20px; line-height: 1.7; }
.fuss a { color: var(--n2); text-decoration: none; }
.fuss a:hover { color: var(--signal); }
.fuss__spalte .mono { color: var(--meta); margin-bottom: 14px; }
.fuss__spalte li { padding: 4px 0; }
.fuss__abstand { margin-top: 24px; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 0.8125rem; color: var(--meta); }
@media (max-width: 1023px) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fuss__marke { grid-column: 1 / -1; } }
@media (max-width: 599px) { .fuss__raster { grid-template-columns: minmax(0, 1fr); } }

/* Fassungsumschalter */

/* Lightbox */
.lightbox { padding: 0; border: 1px solid var(--linie); background: var(--n10); color: var(--n2); max-width: min(92vw, 760px); max-height: 92vh; }
.lightbox::backdrop { background: rgba(2, 9, 20, 0.86); }
.lightbox__innen { position: relative; padding: 20px; }
.lightbox__bild { max-height: calc(92vh - 110px); width: auto; margin-inline: auto; background: var(--weiss); }
.lightbox__titel { margin-top: 14px; font-size: 0.9375rem; padding-right: 48px; }
.lightbox__zu { position: absolute; right: 12px; bottom: 10px; width: 44px; height: 44px; background: none; border: 1px solid var(--linie); color: var(--n2); font-size: 1.5rem; cursor: pointer; }

/* Einblenden */
.js [data-einblenden] { opacity: 0; transform: translateY(16px); transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.js [data-einblenden].ist-in { opacity: 1; transform: none; }

/* ===== Unterseiten ===== */

/* Blattkopf */
.blattkopf { position: relative; background: var(--n10); padding: calc(var(--kopf-h) + 72px) 0 72px; overflow: hidden; border-bottom: 1px solid var(--linie); }
.blattkopf::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px); background-size: 160px 160px; background-position: -1px -1px; opacity: 0.35; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); pointer-events: none; }
.blattkopf__raster { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; align-items: end; }
.blattkopf h1 { font: 400 clamp(2.25rem, 1.5rem + 3vw, 4.25rem)/1.05 var(--serif); letter-spacing: -0.02em; color: var(--weiss); }
.blattkopf__vorspann { font-size: var(--t-vorspann); line-height: 1.55; color: var(--n2); margin-top: 24px; max-width: 58ch; }
.blattkopf__seite { display: grid; gap: 24px; justify-items: end; }
.blattkopf__seite .sektor { width: 160px; height: 160px; }
.blattkopf__fakten { display: grid; gap: 8px; text-align: right; color: var(--n3); }
.blattkopf__fakten li::before { content: "◦ "; color: var(--signal); }
.brotkrumen { display: flex; flex-wrap: wrap; gap: 8px; color: var(--meta); margin-bottom: 28px; }
.brotkrumen a { color: var(--n3); text-decoration: none; }
.brotkrumen a:hover { color: var(--signal); }
.brotkrumen li + li::before { content: "/"; margin-right: 8px; color: var(--n4); }
@media (max-width: 1023px) {
  .blattkopf__raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .blattkopf__seite { justify-items: start; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .blattkopf__seite .sektor { width: 96px; height: 96px; }
  .blattkopf__fakten { text-align: left; }
}

/* Lage (hell) */
.lage__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.lage__einstieg { display: grid; gap: 0; margin-top: 32px; }
.lage__einstieg li { padding: 14px 0 14px 32px; border-top: 1px solid var(--linie); position: relative; font-size: 1.0625rem; }
.lage__einstieg li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 10px; height: 10px; border: 1.5px solid var(--n5); border-radius: 50%; }
.lage .foto { position: sticky; top: calc(var(--kopf-h) + 32px); }
.region { margin-top: 40px; padding: 24px 0 0; border-top: 2px solid var(--n7); color: var(--text-2); max-width: 64ch; }
.region .mono { color: var(--n5); margin-bottom: 8px; display: block; }
@media (max-width: 1023px) { .lage__raster { grid-template-columns: minmax(0, 1fr); } .lage .foto { position: static; } }

/* Abschnitte als Textblöcke */
.textblock + .textblock { margin-top: 48px; }
.textblock h3 { font: 400 clamp(1.5rem, 1.25rem + 0.8vw, 2rem)/1.2 var(--serif); color: var(--n7); margin-bottom: 14px; }
.textblock p { color: var(--text-2); max-width: 64ch; }
.punktliste { margin-top: 16px; display: grid; gap: 0; }
.punktliste li { padding: 10px 0 10px 24px; border-top: 1px solid var(--linie); position: relative; }
.punktliste li::before { content: ""; position: absolute; left: 0; top: 21px; width: 12px; height: 1px; background: var(--akzent); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin-top: 24px; }
.kacheln li { background: var(--grund); padding: 18px 20px; font-size: 0.9375rem; display: flex; gap: 12px; align-items: baseline; }
.kacheln li .mono { color: var(--akzent); font-size: 0.6875rem; }

/* Kurs senkrecht */
.kurs__kopf { max-width: 64ch; margin-bottom: 56px; }
@media (min-width: 1024px) {
  .kurs-sektion { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
  .kurs-sektion .kurs__kopf { position: sticky; top: calc(var(--kopf-h) + 40px); margin-bottom: 0; }
}
.kurs { position: relative; display: grid; gap: 0; padding-left: 56px; }
.kurs::before, .kurs::after { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--linie); }
.kurs::after { background: var(--akzent); transform-origin: top; transform: scaleY(var(--fortschritt, 1)); }
.kurs__punkt { position: relative; padding: 0 0 48px; }
.kurs__punkt:last-child { padding-bottom: 0; }
.kurs__punkt .wegpunkt { position: absolute; left: -48px; top: 4px; background: var(--grund); }
.kurs__punkt.ist-erreicht .wegpunkt::after, .kein-js .kurs__punkt .wegpunkt::after { transform: scale(1); }
.kurs__punkt .mono { color: var(--akzent); margin-bottom: 8px; }
.kurs__punkt h3 { font: 600 var(--t-h3)/1.3 var(--sans); color: var(--text); margin-bottom: 8px; }
.hell .kurs__punkt h3 { color: var(--n7); }
.kurs__punkt p:not(.mono) { color: var(--text-2); max-width: 62ch; }
.kurs__punkt .punktliste { max-width: 62ch; }
.kurs--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.kurs--zwei .kurs__punkt { padding-bottom: 40px; }
.kurs--zwei::before, .kurs--zwei::after { display: none; }
.kurs--zwei { padding-left: 0; }
.kurs--zwei .kurs__punkt { padding: 24px 0 32px 40px; border-top: 1px solid var(--linie); }
.kurs--zwei .kurs__punkt .wegpunkt { left: 0; top: 28px; }
@media (max-width: 767px) { .kurs--zwei { grid-template-columns: minmax(0, 1fr); } .kurs { padding-left: 44px; } .kurs__punkt .wegpunkt { left: -36px; } .kurs::before, .kurs::after { left: 7px; } }

/* Untiefen (dunkel) */
.untiefen { background: var(--n9); }
.untiefen__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px; margin-top: 48px; }
.untiefe { border-top: 1px solid var(--linie); padding-top: 20px; }
.untiefe .mono { color: var(--signal); margin-bottom: 10px; }
.untiefe h3 { font: 600 1.125rem/1.35 var(--sans); color: var(--weiss); margin-bottom: 8px; }
.untiefe p:not(.mono) { color: var(--n3); }
.zitat { max-width: 30ch; font: 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem)/1.3 var(--serif); color: var(--weiss); }
.zitat-quelle { margin-top: 24px; color: var(--meta); }
.zitat-wrap { max-width: 980px; }
.zitat--lang { max-width: 48ch; font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); }

/* Peilungsleiste einer Leistung */
.peilband { background: var(--n10); border-block: 1px solid var(--linie); }
.peilband .huelle { display: flex; flex-wrap: wrap; gap: 12px 48px; padding-block: 22px; color: var(--n3); }
.peilband .huelle span::before { content: "◦ "; color: var(--signal); }

/* Fragen */
.fragen { max-width: 860px; }
.frage { border-top: 1px solid var(--linie); }
.frage:last-child { border-bottom: 1px solid var(--linie); }
.frage summary { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; font: 600 1.125rem/1.35 var(--sans); color: var(--n7); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; font: 400 1.5rem/1 var(--mono); color: var(--n5); transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.frage[open] summary::after { transform: rotate(45deg); }
.frage p { padding: 0 0 24px; color: var(--text-2); max-width: 64ch; }

/* Nachbarblätter */
.nachbarn__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.nachbar { display: block; padding: 24px; border: 1px solid var(--linie); text-decoration: none; color: inherit; position: relative; transition: border-color var(--dur), background var(--dur); }
.nachbar:hover { border-color: var(--signal); background: rgba(247, 193, 95, 0.04); }
.nachbar .mono { color: var(--signal); }
.nachbar h3 { font: 400 1.5rem/1.2 var(--serif); color: var(--weiss); margin: 10px 0 8px; }
.nachbar p:not(.mono) { color: var(--n3); font-size: 0.9375rem; }
@media (max-width: 1023px) { .nachbarn__raster { grid-template-columns: minmax(0, 1fr); } }

/* Angebot (Preis) */
.angebot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 32px; align-items: baseline; padding: 28px 32px; border: 1px solid var(--n7); background: var(--weiss); margin-top: 40px; max-width: 720px; }
.angebot__preis { font: 400 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--serif); color: var(--n7); grid-row: span 2; }
.angebot__titel { font-weight: 600; color: var(--n9); }
.angebot__zusatz { color: var(--ink-muted); font-size: 0.9375rem; }
@media (max-width: 599px) { .angebot { grid-template-columns: minmax(0, 1fr); } .angebot__preis { grid-row: auto; } }

/* Vergleich */
.vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--linie); margin-top: 40px; }
.vergleich__seite { padding: 32px; }
.vergleich__seite + .vergleich__seite { border-left: 1px solid var(--linie); background: var(--weiss); }
.vergleich__seite .mono { color: var(--ink-muted); }
.vergleich__seite + .vergleich__seite .mono { color: var(--n5); }
.vergleich__seite h3 { font: 400 1.75rem/1.2 var(--serif); color: var(--n7); margin: 8px 0 16px; }
@media (max-width: 767px) { .vergleich { grid-template-columns: minmax(0, 1fr); } .vergleich__seite + .vergleich__seite { border-left: 0; border-top: 1px solid var(--linie); } }

/* Felderkarte (KI und Digitale Systeme) */
.felder { counter-reset: feld; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linie); margin-top: 48px; }
.felder__gruppe { padding: 24px 20px 0 0; border-right: 1px solid var(--linie); }
.felder__gruppe + .felder__gruppe { padding-left: 20px; }
.felder__gruppe:last-child { border-right: 0; }
.felder__gruppe > .mono { color: var(--signal); }
.felder__gruppe > h3 { font: 400 1.25rem/1.25 var(--serif); color: var(--weiss); margin: 8px 0 20px; min-height: 2.5em; }
.feld-eintrag { padding: 12px 0; border-top: 1px solid var(--linie); }
.feld-eintrag .mono { font-size: 0.625rem; color: var(--meta); }
.feld-eintrag .mono::before { counter-increment: feld; content: "D-" counter(feld, decimal-leading-zero); }
.feld-eintrag strong { display: block; font-weight: 600; color: var(--n0); font-size: 0.9375rem; margin: 2px 0; }
.feld-eintrag span:last-child { font-size: 0.8125rem; color: var(--n3); line-height: 1.45; display: block; }
@media (max-width: 1023px) { .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .felder__gruppe { border-right: 0; padding: 24px 0 0 !important; } .felder { column-gap: 32px; } }
@media (max-width: 599px) { .felder { grid-template-columns: minmax(0, 1fr); } }

/* Logbuch-Einträge (Umsetzungen) */
.eintraege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 40px; }
.eintrag { padding: 24px 0; border-top: 1px solid var(--linie); }
.eintrag .mono { color: var(--n5); }
.eintrag h3 { font: 600 1.125rem/1.35 var(--sans); color: var(--n7); margin: 8px 0; }
.eintrag p:not(.mono) { color: var(--text-2); font-size: 0.9375rem; }
@media (max-width: 767px) { .eintraege { grid-template-columns: minmax(0, 1fr); } }

/* Ablauf quer (Telefonassistent) */
.ablauf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; counter-reset: schritt; }
.ablauf li { border-top: 2px solid var(--akzent); padding-top: 18px; }
.ablauf .mono { color: var(--signal); }
.ablauf h3 { font: 600 1.0625rem/1.35 var(--sans); color: var(--weiss); margin: 8px 0; }
.ablauf p:not(.mono) { color: var(--n3); font-size: 0.9375rem; }
@media (max-width: 1023px) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ablauf { grid-template-columns: minmax(0, 1fr); } }

/* Leistungsübersicht */
.blaetter__raster { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 64px; }
.blatt { padding-block: 64px; border-top: 1px solid var(--linie); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; }
.blatt:first-child { border-top: 0; padding-top: 0; }
.blatt__kopf .sektor { width: 96px; height: 96px; margin-bottom: 24px; }
.blatt__kopf h2 { font: 400 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)/1.15 var(--serif); color: var(--weiss); }
.blatt__kopf p:not(.mono) { color: var(--n3); margin-top: 12px; }
.blatt .kurs__punkt h3 a { color: var(--weiss); text-decoration: none; }
.blatt .kurs__punkt h3 a:hover { color: var(--signal); }
.blatt .kurs { padding-left: 48px; }
.anker { position: sticky; top: calc(var(--kopf-h) + 40px); align-self: start; display: grid; gap: 4px; }
.anker a { display: flex; gap: 12px; align-items: center; padding: 8px 0; color: var(--meta); text-decoration: none; font: 500 0.75rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.anker a::before { content: ""; width: 18px; height: 1px; background: currentColor; transition: width var(--dur); }
.anker a.ist-aktiv { color: var(--signal); }
.anker a.ist-aktiv::before { width: 32px; }
@media (max-width: 1023px) { .blaetter__raster { grid-template-columns: minmax(0, 1fr); } .anker { display: none; } .blatt { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Referenzseite */
.ref-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); margin-top: 40px; }
.ref-raster li { border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); min-height: 140px; display: grid; place-items: center; padding: 24px; position: relative; }
.ref-raster li .logo-ref { opacity: 0.9; max-width: min(200px, 100%); }
.ref-raster li { min-width: 0; }
.ref-raster .mono { position: absolute; left: 12px; top: 10px; color: var(--meta); font-size: 0.5625rem; }
.ref-porsche { grid-column: span 2; }
@media (max-width: 1023px) { .ref-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ref-eintrag { margin-top: 32px; padding: 28px 32px; border: 1px solid var(--linie); border-left: 3px solid var(--signal); max-width: 860px; }
.ref-eintrag .mono { color: var(--signal); }
.ref-eintrag p:not(.mono) { color: var(--n2); margin-top: 8px; font-size: 1.125rem; }
.ref-eintrag--logo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; }
.ref-eintrag--logo .logo-ref { max-width: 100%; }
.ref-eintrag--logo p:not(.mono) { margin: 0; }
@media (max-width: 599px) { .ref-eintrag--logo { grid-template-columns: minmax(0, 1fr); gap: 16px; } .ref-eintrag--logo .logo-ref { max-width: 180px; } }

/* Nachweisseite */
.nachweise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.nachweis { border: 1px solid var(--linie); background: var(--n9); display: flex; flex-direction: column; }
.nachweis__scan { aspect-ratio: 4 / 3; overflow: hidden; background: var(--n8); border-bottom: 1px solid var(--linie); position: relative; }
.nachweis__scan img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0.88; transition: opacity var(--dur), transform 600ms var(--ease); }
.nachweis__scan--siegel img { object-fit: contain; padding: 18px; background: var(--weiss); }
.nachweis:hover .nachweis__scan img { opacity: 1; transform: scale(1.02); }
.nachweis__inhalt { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.nachweis .platte__meta { margin: 16px 0 20px; }
.nachweis button { margin-top: auto; align-self: start; }
.nachweis__ohne { aspect-ratio: 4 / 3; display: grid; place-items: center; border-bottom: 1px solid var(--linie); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(122,149,179,0.06) 14px 15px); }
.nachweis__ohne .sektor { width: 96px; height: 96px; }
@media (max-width: 1023px) { .nachweise { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .nachweise { grid-template-columns: minmax(0, 1fr); } }
.weiterbildung summary { cursor: pointer; padding: 20px 0; font: 600 1.0625rem var(--sans); color: var(--weiss); list-style: none; display: flex; justify-content: space-between; border-top: 1px solid var(--linie); }
.weiterbildung summary::-webkit-details-marker { display: none; }
.weiterbildung summary::after { content: "+"; font: 400 1.5rem/1 var(--mono); color: var(--signal); }
.weiterbildung[open] summary::after { content: "−"; }
.wb-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.wb-tabelle th { text-align: left; font: 500 0.6875rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); padding: 12px 16px 12px 0; border-bottom: 1px solid var(--linie); }
.wb-tabelle td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--linie); color: var(--n2); vertical-align: top; }
.wb-tabelle button { background: none; border: 0; padding: 0; color: var(--licht); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
@media (max-width: 767px) { .wb-tabelle thead { display: none; } .wb-tabelle tr { display: grid; padding: 12px 0; border-bottom: 1px solid var(--linie); } .wb-tabelle td { border: 0; padding: 2px 0; } }

/* Lesetexte (Impressum, Datenschutz) */
.rechtstext { max-width: 72ch; }
.rechtstext h2 { font: 400 1.75rem/1.25 var(--serif); color: var(--n7); margin: 48px 0 12px; }
.rechtstext h3, .rechtstext h4 { font: 600 1.125rem/1.35 var(--sans); color: var(--n9); margin: 28px 0 8px; }
.rechtstext p, .rechtstext li { color: var(--ink-soft); }
.rechtstext p + p { margin-top: 0.8em; }
.rechtstext ul { list-style: disc; padding-left: 1.2em; margin: 0.6em 0; }
.rechtstext a { color: var(--n5); }
.rechtstext dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; }
.rechtstext dt { font-weight: 600; color: var(--n9); }
@media (max-width: 599px) { .rechtstext dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .rechtstext dd { margin-bottom: 10px; } }

/* Über uns */
.haltung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 48px; }
.haltung article { border-top: 2px solid var(--n7); padding-top: 20px; }
.haltung .mono { color: var(--n5); }
.haltung h3 { font: 400 1.5rem/1.25 var(--serif); color: var(--n7); margin: 8px 0 12px; }
.haltung p:not(.mono) { color: var(--ink-soft); }
@media (max-width: 1023px) { .haltung { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.person { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.person__name { font: 400 2rem/1.15 var(--serif); color: var(--weiss); }
.person ul { margin-top: 20px; }
.person li { padding: 12px 0; border-top: 1px solid var(--linie); color: var(--n2); display: flex; gap: 16px; }
.person li .mono { color: var(--signal); min-width: 96px; }
@media (max-width: 767px) { .person { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Kontaktseite */
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
.kontakt__seite { display: grid; gap: 32px; align-content: start; }
.kontakt__karte { border: 1px solid var(--linie); aspect-ratio: 4 / 3; background: var(--n10); }
@media (max-width: 1023px) { .kontakt__raster { grid-template-columns: minmax(0, 1fr); } }

/* 404 */
.fehler { min-height: 100svh; display: grid; align-items: center; position: relative; overflow: hidden; background: var(--n10); }
.fehler__bild { position: absolute; inset: 0; opacity: 0.35; }
.fehler__bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.fehler .huelle { position: relative; padding-top: calc(var(--kopf-h) + 40px); padding-bottom: 80px; }
.fehler h1 { font: 400 clamp(2.25rem, 1.5rem + 3vw, 4.5rem)/1.05 var(--serif); color: var(--weiss); max-width: 18ch; margin: 12px 0 32px; }
.fehler ul { display: flex; flex-wrap: wrap; gap: 16px 32px; }

/* Bewegung reduziert: Endzustände */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-einblenden], .js .kurs-quer .kurs-quer__punkte li { opacity: 1 !important; transform: none !important; }
  .js .kurs-quer:not(.ist-in) .kurs-quer__linie { transform: none; }
  .leine__spur { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .leine__reihe[aria-hidden] { display: none; }
  .leine__reihe { flex-wrap: wrap; justify-content: center; row-gap: 32px; padding-inline: var(--rand); }
  .leine { -webkit-mask-image: none; mask-image: none; }
  .wegpunkt::after { transform: scale(1); }
}

/* Nachweisstreifen auf Absicherungsseiten */
.nachweis-streifen { margin-top: 40px; padding: 24px 28px; background: var(--weiss); border: 1px solid var(--linie); border-left: 3px solid var(--n7); }
.nachweis-streifen .mono { color: var(--n5); margin-bottom: 10px; }
.nachweis-streifen li { padding: 6px 0 6px 20px; position: relative; color: var(--ink-soft); font-size: 0.9375rem; }
.nachweis-streifen li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border: 1.5px solid var(--n5); border-radius: 50%; }
.nachweis-streifen .pfeil-link { margin-top: 12px; color: var(--n7); }