/* ============================================================
   JCP · operations-nearshoring.bg · Stilschicht
   Übernommen aus design_v2/vorschau_v2.html (Diana, 2026-10-08),
   erweitert um die Abschnitte adressaten, zusagen, Rangliste und
   die Langtextseiten. Farbwelt unverändert: Blau, Silber, Schwarz.
   Alle Größen als benannte Variablen, keine verstreuten Zahlen.
   ============================================================ */
:root{
  /* Aufgehellt am 2026-10-09. Markus: „Das gesamte Design ist zu dunkel, die
     synaptischen Verknüpfungen sind kaum erkennbar." Die Grundfläche steigt von
     #04070D auf #0A1220, die Flächen von #0E1626 auf #16233A. Dadurch heben sich
     Kacheln sichtbar vom Grund ab und das Synapsennetz bekommt Kontrast. */
  --tiefe:#2D4571;          /* Grundfläche, tiefes Blauschwarz */
  --raum:#35507F;           /* zweite Ebene */
  --panel:#3C5A8C;          /* Flächen, Karten */
  --linie:#45608F;          /* Trennlinien */
  --silber:#CBD5E3;         /* Fließtext auf dunkel  (Kontrast 12,2:1) */
  --silber-hell:#EDF2F8;    /* Überschriften          (Kontrast 16,3:1) */
  --grau:#A7B6CA;           /* Nebentext              (Kontrast  6,9:1) */
  --blau:#4A8AE0;           /* Signal, EU-Bahnen      (Kontrast  5,9:1) */
  --eis:#78B8F0;            /* Drittland, kühler      (Kontrast 10,4:1) */
  --rand-gross:clamp(28px,5vw,88px);
  --spalte-max:1680px;
  --kante:transparent;   /* Lichtkante an jeder Oberkante */
  --radius:3px;
  --s1:8px; --s2:16px; --s3:26px; --s4:42px; --s5:68px;
  --kurve:cubic-bezier(.16,1,.3,1);
  /* Höhe des ersten Bildschirms: nach unten begrenzt, damit die Hauptzeile
     auch auf sehr hohen Fenstern im ersten Bildschirm steht. Der Fehler der
     Vorfassung war ein ungedeckeltes 100svh. */
  --erster-bildschirm:clamp(560px,100svh,860px);
  --buehne-max:min(100svh,900px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis-an{scroll-behavior:auto}
body{
  margin:0;background:var(--tiefe);color:var(--silber);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(15px,1.05vw,17px);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:.94;letter-spacing:-.025em;color:var(--silber-hell)}
p{margin:0}
::selection{background:var(--blau);color:#fff}

/* --- Hilfsklassen --------------------------------------------------- */
.huelle{max-width:var(--spalte-max);margin:0 auto;padding:0 var(--rand-gross)}
.schmal{max-width:112ch}
.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:clamp(10.5px,.74vw,12.5px);letter-spacing:.22em;text-transform:uppercase;color:var(--grau)}
.mono b{color:var(--blau);font-weight:500}
.riesig{font-size:clamp(2.1rem,6.4vw,6.4rem);font-stretch:110%;line-height:.94;letter-spacing:-.028em}
.gross{font-size:clamp(1.8rem,4.1vw,4rem);line-height:.99;letter-spacing:-.022em}
.mittel{font-size:clamp(1.25rem,2.2vw,2.3rem);line-height:1.14;letter-spacing:-.012em}
.klein{font-size:clamp(1.05rem,1.5vw,1.5rem);line-height:1.2}
.blau{color:var(--blau)}
.eis{color:var(--eis)}
.grau{color:var(--grau)}
.hell{color:var(--silber-hell)}
.nowrap{white-space:nowrap}
.abstand{margin-top:clamp(18px,2.6vh,34px)}

/* Sichtbar markierter Platzhalter: nie eine erfundene Angabe. */
.platzhalter{display:inline-block;border:1px dashed var(--blau);color:var(--blau);
  padding:.25em .7em;font-family:'IBM Plex Mono',monospace;font-size:.82em;
  letter-spacing:.04em;text-transform:none;background:rgba(74,138,224,.07);line-height:1.5}

/* Quellenzeile: jede Zahl trägt Quelle und Stand. */
.quelle{font-family:'IBM Plex Mono',monospace;font-size:clamp(10.5px,.7vw,12px);
  line-height:1.7;color:var(--grau);letter-spacing:.02em}
.quelle b{color:var(--silber);font-weight:500}

/* --- Stahl: eine Materialklasse für alle Flächen der Seite --------- */
.flaeche{position:relative;isolation:isolate;border-radius:var(--radius);
  background:linear-gradient(176deg,#16203292 0%,#0b1120e0 46%,#060b14f0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),
             inset 0 -1px 0 rgba(0,0,0,.6),
             0 34px 80px -46px #000}
.flaeche::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;opacity:.5;mix-blend-mode:soft-light;
  background:
    repeating-linear-gradient(97deg,rgba(255,255,255,.06) 0 1px,
                                    rgba(0,0,0,.055) 1px 2px,
                                    rgba(255,255,255,0) 2px 5px),
    linear-gradient(104deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 26%,
                           rgba(255,255,255,.05) 54%,rgba(255,255,255,0) 78%)}
.flaeche::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(130% 115% at 12% -18%,rgba(142,192,255,.15),transparent 58%)}
.lichtkante{position:relative}
.lichtkante::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--kante) 18%,var(--kante) 72%,transparent)}
/* Tiefenebene: großflächiges Bild im Hintergrund eines Abschnitts */
.tiefe{position:absolute;inset:-14% 0;z-index:-2;pointer-events:none;overflow:hidden}
.tiefe img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.9)}
.tiefe::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--tiefe),rgba(22,35,60,.3) 30%,rgba(22,35,60,.35) 70%,var(--tiefe))}

/* --- Raumebene (Synapsenschicht) und Materialschichten -------------- */
#raum{position:fixed;inset:0;z-index:0;pointer-events:none}
/* Grunddeckkraft von .3 auf .58 angehoben (Markus 2026-10-09: die synaptischen
   Verknüpfungen sind kaum erkennbar). Hinter Lesetext dunkelt weiterhin ein
   Verlauf ab, Kontrast geht vor Effekt. */
#raum canvas{width:100%;height:100%;display:block;opacity:.95;transition:opacity .6s var(--kurve)}
#raum.voll canvas{opacity:1}
main,header,footer{position:relative;z-index:2}
.korn{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.08;mix-blend-mode:soft-light}
.korn svg{width:100%;height:100%}
.stahl,.kornbild{position:fixed;inset:0;z-index:58;pointer-events:none}
.stahl{opacity:.2;mix-blend-mode:soft-light;
  background:
    repeating-linear-gradient(97deg,rgba(255,255,255,.045) 0 1px,
                                    rgba(0,0,0,.045) 1px 3px),
    var(--stahl) center/cover no-repeat}
.kornbild{background:var(--kornung) center/400px repeat;opacity:.05;mix-blend-mode:soft-light}

/* --- Kopfzeile ------------------------------------------------------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--rand-gross);
  background:linear-gradient(to bottom,rgba(16,26,45,.94),rgba(16,26,45,.72) 68%,rgba(16,26,45,0));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
header .marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--silber-hell)}
header .marke .logo{height:30px;width:auto;display:block;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.22)) drop-shadow(0 6px 18px rgba(0,0,0,.65))}
header .marke .zusatz{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--grau)}
nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
nav a{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--grau);
  padding:6px 2px;border-bottom:1px solid transparent;white-space:nowrap;
  transition:color .25s,border-color .25s}
nav a:hover,nav a:focus-visible{color:var(--silber-hell);border-color:var(--blau)}
nav a[aria-current="page"]{color:var(--silber-hell);border-color:var(--linie)}
.knopf{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border-radius:var(--radius);
  white-space:nowrap;flex-shrink:0;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.9);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tiefe);background:var(--silber-hell);padding:11px 20px;
  transition:background .25s,color .25s,transform .25s}
.knopf:hover,.knopf:focus-visible{background:var(--blau);color:#fff;transform:translateY(-2px)}
.knopf.hohl{background:transparent;color:var(--silber-hell);border:1px solid var(--linie)}
.knopf.hohl:hover,.knopf.hohl:focus-visible{border-color:var(--blau);background:rgba(74,138,224,.1);color:var(--silber-hell)}
#menue-knopf{display:none;background:none;border:1px solid var(--linie);color:var(--silber-hell);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;padding:9px 14px;cursor:pointer}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blau);color:#fff;padding:12px 18px}
.sprung:focus{left:12px;top:12px}

/* --- Erster Bildschirm ---------------------------------------------- */
#start{position:relative;min-height:var(--erster-bildschirm);display:flex;align-items:center;
  padding:clamp(92px,12vh,118px) 0 clamp(22px,3vh,42px);overflow:hidden}
#start .bild{position:absolute;inset:-8% 0 0;z-index:0}
#start .bild img{width:100%;height:112%;object-fit:cover;opacity:1}
#start .schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(13,22,40,.82) 0%,rgba(13,22,40,.46) 42%,rgba(13,22,40,.1) 70%),
             linear-gradient(to bottom,rgba(13,22,40,.5),transparent 24%,rgba(22,35,60,.9))}
#start .huelle{position:relative;z-index:2;width:100%}
#start h1{margin:clamp(8px,1.2vh,16px) 0 0}
#start h1 .zeile{display:block;overflow:hidden}
#start h1 .zeile>span{display:block}
/* Die dritte Zeile ist mit 23 Zeichen die längste. Eigener, kleinerer Grad,
   damit sie einzeilig bleibt, statt mitten im Satz umzubrechen. */
#start h1 .zeile.lang>span{font-size:.78em;white-space:nowrap}
.start-unten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(18px,2.6vw,48px);align-items:end;margin-top:clamp(14px,2vh,26px)}
.start-unten p{max-width:62ch}
.start-aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.blick{position:absolute;bottom:18px;right:var(--rand-gross);z-index:2;display:flex;align-items:center;gap:10px}
.blick .strich{width:48px;height:1px;background:var(--linie);position:relative;overflow:hidden}
.blick .strich i{position:absolute;inset:0;background:var(--blau);animation:lauf 2.6s var(--kurve) infinite}
@keyframes lauf{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* Kopf einer Unterseite: gleiche Farbwelt, flacher als die Startseite */
.seitenkopf{position:relative;padding:clamp(118px,16vh,172px) 0 clamp(34px,5vh,64px);overflow:hidden}
.seitenkopf .schleier{position:absolute;inset:0;z-index:1;
  background:radial-gradient(110% 90% at 20% 0%,rgba(74,138,224,.12),transparent 58%),
             linear-gradient(to bottom,rgba(16,26,45,.9),rgba(16,26,45,.72))}
.seitenkopf .huelle{position:relative;z-index:2}
.seitenkopf h1{margin-top:14px;max-width:30ch}
.brotkrumen{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.brotkrumen a{text-decoration:none;color:var(--grau);border-bottom:1px solid var(--linie)}
.brotkrumen a:hover,.brotkrumen a:focus-visible{color:var(--silber-hell);border-color:var(--blau)}
.brotkrumen span[aria-hidden]{color:var(--blau)}

/* --- Laufband -------------------------------------------------------- */
.laufband{overflow:hidden;background:var(--raum);padding:13px 0}
.laufband .spur{display:flex;gap:0;width:max-content;animation:band 52s linear infinite}
.laufband span{font-family:'IBM Plex Mono',monospace;font-size:clamp(11px,.9vw,14px);
  letter-spacing:.18em;color:var(--grau);padding:0 26px;white-space:nowrap}
.laufband span::after{content:"·";margin-left:26px;color:var(--blau)}
@keyframes band{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Hinter jedem Textabschnitt wird die Raumebene abgedunkelt. Kontrast vor Effekt. */
.block{position:relative;padding:clamp(66px,9vh,146px) 0}
.block::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,rgba(16,26,45,.93) 0%,rgba(16,26,45,.8) 55%,rgba(16,26,45,.42) 100%)}
section{position:relative}
.kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:16px;margin-bottom:clamp(24px,3.4vh,46px);
  border-top:1px solid var(--linie);border-top-color:var(--kante);padding-top:16px}
.kopf .nr{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--blau)}

/* --- Entlastung: die Arbeitslast wechselt die Seite ----------------- */
.waage{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,2.4vw,40px);
  align-items:stretch;width:100%;margin-top:clamp(22px,3.4vh,42px)}
.saeule{padding:clamp(16px,2vw,28px);min-height:clamp(180px,24vh,260px);
  display:flex;flex-direction:column;gap:14px;position:relative}
.saeule h3{font-size:clamp(1rem,1.45vw,1.45rem)}
.saeule .marke-klein{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--grau)}
.bruecke{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:clamp(40px,8vw,140px);position:relative;gap:18px}
.bruecke::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--linie)}
.bruecke .pfeil{position:relative;width:10px;height:10px;border-top:1px solid var(--blau);
  border-right:1px solid var(--blau);transform:rotate(45deg)}
.bruecke .pfeil.invers{border-color:var(--silber);transform:rotate(225deg)}
.kacheln{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;min-height:38px}
.kachel{border:1px solid;border-radius:var(--radius);padding:10px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);font-family:'IBM Plex Mono',monospace;
  font-size:clamp(10px,.8vw,12px);letter-spacing:.14em;text-transform:uppercase}
.kachel.last{border-color:var(--blau);color:var(--blau);background:rgba(74,138,224,.09)}
.kachel.steuerung{border-color:var(--silber-hell);color:var(--silber-hell);background:rgba(237,242,248,.06)}
.waage-satz{margin-top:clamp(18px,2.6vh,34px);max-width:54ch}

/* --- Leistungen ----------------------------------------------------- */
.leistungen{display:grid;gap:1px;background:var(--linie)}
.leistung{background:rgba(22,35,60,.82);display:grid;
  grid-template-columns:minmax(0,78px) minmax(0,1fr) minmax(0,32%);
  gap:clamp(16px,2.4vw,40px);padding:clamp(20px,2.8vw,40px);align-items:stretch;
  min-height:clamp(320px,34vh,440px);transition:background .4s var(--kurve)}
.leistung:hover{background:rgba(32,50,84,.9)}

/* Die einzelnen Vorgänge je Leistung: links der Vorgangsbereich, rechts die
   Aufzählung dessen, was tatsächlich bearbeitet wird. */
.vorgaenge{list-style:none;margin:clamp(16px,2.2vh,26px) 0 0;padding:0;
  display:grid;gap:1px;background:var(--linie);border-radius:var(--radius);overflow:hidden}
.vorgaenge li{background:var(--raum);padding:13px clamp(14px,1.4vw,20px);display:grid;
  grid-template-columns:minmax(0,12.5rem) minmax(0,1fr);gap:clamp(10px,1.4vw,24px);
  align-items:baseline;position:relative;
  transition:background .3s var(--kurve),padding-left .3s var(--kurve)}
/* Die Zeile hebt sich beim Überfahren an und bekommt links eine Marke, damit
   erkennbar ist, welcher Vorgang gerade gelesen wird (Markus 2026-10-09:
   "in TAB bei Mouseover keine Änderungen"). */
.vorgaenge li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--blau);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--kurve)}
.vorgaenge li:hover{background:var(--panel);padding-left:calc(clamp(14px,1.4vw,20px) + 10px)}
.vorgaenge li:hover::before{transform:scaleY(1)}
.vorgaenge li:hover strong{color:var(--eis)}
.vorgaenge strong{transition:color .3s var(--kurve)}
.vorgaenge strong{font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:clamp(11px,.82vw,13px);letter-spacing:.11em;text-transform:uppercase;
  color:var(--silber-hell)}
.vorgaenge span{color:var(--silber);font-size:clamp(14px,1.02vw,16px);line-height:1.6}
@media (max-width:860px){
  .vorgaenge li{grid-template-columns:1fr;gap:5px}
}
.leistung .nr{font-family:'IBM Plex Mono',monospace;font-size:clamp(11px,.9vw,13px);color:var(--blau);letter-spacing:.2em}
.leistung h3{font-size:clamp(1.2rem,2.2vw,2.2rem);margin-bottom:10px}
/* Die Bildspalte ist so hoch wie die Zeile. Vorher lag sie auf 4:3 fest und
   stand damit als kleiner Kasten neben einem hohen Text. Kein eigener
   Hintergrund und keine Rundung: beides war als Kante sichtbar. */
.leistung .bild{overflow:hidden;align-self:stretch;min-height:100%;position:relative}
.leistung .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.95;transition:transform .9s var(--kurve),opacity .5s}
.leistung:hover .bild img{transform:scale(1.07);opacity:1}

/* --- Adressaten ----------------------------------------------------- */
.adressaten-gitter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(460px,38%));
  gap:clamp(22px,3.6vw,64px);align-items:start}
.adressaten-gitter p{max-width:66ch}
.adressaten-text{display:grid;gap:clamp(14px,2vh,24px)}
.adressaten-bild{margin:0}
.adressaten-bild img{width:100%;height:auto}
.adressaten-bild figcaption{margin-top:12px}
.dreifeld{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:1px;background:var(--linie);margin-top:clamp(22px,3vh,38px)}
.dreifeld>div{background:rgba(18,29,50,.72);padding:clamp(18px,2.2vw,30px);display:grid;gap:12px;align-content:start}
.dreifeld h3{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blau);font-weight:500;line-height:1.4}
.dreifeld ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.dreifeld li{font-size:clamp(13.5px,1vw,15.5px);line-height:1.45;color:var(--silber)}

/* --- Netz: Bühne mit der Raumebene --------------------------------- */
#netz{background:transparent}
#netz .spur{height:620svh}
#netz .buehne{position:sticky;top:0;height:var(--buehne-max);overflow:hidden}
#netz .ersatz{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.7;display:none}
#netz .text{position:absolute;left:var(--rand-gross);right:var(--rand-gross);bottom:clamp(20px,3.5vh,48px);
  z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(420px,40%));
  gap:clamp(16px,3vw,48px);align-items:end;pointer-events:none}
#netz .stufe{max-width:46ch}
#netz .stufe .nr{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;
  color:var(--blau);display:block;margin-bottom:10px}
#netz .stufe h3{font-size:clamp(1.3rem,2.5vw,2.4rem);margin-bottom:10px}
#netz .stufe p{color:var(--silber);font-size:clamp(13px,1.02vw,16px)}
#netz .rechtslage{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:16px 18px;
  display:flex;flex-direction:column;gap:10px}
#netz .rechtslage .zeile{position:relative;padding-left:20px}
#netz .rechtslage .punkt{position:absolute;left:0;top:5px;width:10px;height:10px;border-radius:50%}
#netz .rechtslage .t{font-family:'IBM Plex Mono',monospace;font-size:clamp(10px,.7vw,11.5px);
  letter-spacing:.04em;line-height:1.6;color:var(--silber);text-transform:none;display:block}
#netz .rechtslage .t b{display:block;color:var(--silber-hell);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:3px}
#netz .fortschritt{position:absolute;top:0;left:0;height:2px;background:var(--blau);z-index:4;width:0}
#netz .kopfzeile{position:absolute;top:clamp(84px,12vh,120px);left:var(--rand-gross);
  right:var(--rand-gross);z-index:3;pointer-events:none}
/* Die sechs Stufen stehen immer im Markup. Ohne Skript sind sie die Liste,
   mit Skript wandern sie in die Einblendung über der Bühne. */
.stufenliste{list-style:none;margin:clamp(22px,3vh,40px) 0 0;padding:0;
  display:grid;gap:1px;background:var(--linie)}
.stufenliste li{background:rgba(18,29,50,.76);padding:clamp(18px,2.2vw,30px);
  display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:clamp(12px,2vw,32px)}
.stufenliste .nr{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--blau)}
.stufenliste h3{font-size:clamp(1.1rem,1.8vw,1.7rem);margin-bottom:10px}
.stufenliste p{max-width:74ch}

/* --- Zahl: Balken und Rangliste ------------------------------------- */
.zahl-reihe{display:grid;gap:clamp(14px,2vh,26px);margin:clamp(22px,3.4vh,42px) 0}
.balkenzeile{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) minmax(90px,auto);
  gap:clamp(12px,2vw,28px);align-items:center}
.balkenzeile .land{font-family:'IBM Plex Mono',monospace;font-size:clamp(11px,.85vw,13px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
.balkenzeile .spur{height:clamp(28px,4vh,46px);background:var(--panel);
  position:relative;overflow:hidden}
.balkenzeile .fuellung{position:absolute;inset:0 auto 0 0;
  background:linear-gradient(90deg,rgba(74,138,224,.25),var(--blau))}
.balkenzeile.hell .fuellung{background:linear-gradient(90deg,rgba(203,213,227,.2),var(--silber))}
.balkenzeile .wert{font-family:'IBM Plex Mono',monospace;font-size:clamp(14px,1.5vw,22px);
  color:var(--silber-hell);text-align:right;font-variant-numeric:tabular-nums}
.rang-gitter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(520px,44%));
  gap:clamp(22px,3.6vw,60px);align-items:start;margin-top:clamp(20px,3vh,36px)}
.rangliste{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;
  font-size:clamp(11.5px,.82vw,13.5px)}
.rangliste caption{text-align:left;color:var(--grau);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding-bottom:12px}
.rangliste th,.rangliste td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linie);color:var(--grau)}
.rangliste th{color:var(--silber);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.rangliste td:first-child{width:3.5em;color:var(--silber);font-variant-numeric:tabular-nums}
.rangliste tr.hier td{color:var(--silber-hell);background:rgba(74,138,224,.12)}
.rangliste tr.hier td:first-child{color:var(--blau)}
.rangliste .marke{color:var(--blau);font-size:10px;letter-spacing:.14em}

/* --- Geregelt: fünf Kacheln ----------------------------------------- */
.punkte{padding-top:4px}
.punkt-zeile{border-bottom:1px solid var(--linie);padding:clamp(20px,3vw,40px) 0;
  display:grid;grid-template-columns:minmax(0,66px) minmax(0,1fr);gap:clamp(14px,2.4vw,40px)}
.punkt-zeile .nr{font-family:'IBM Plex Mono',monospace;font-size:clamp(11px,.9vw,13px);
  color:var(--blau);letter-spacing:.2em;padding-top:.5em}
.punkt-zeile h3{font-size:clamp(1.1rem,2.1vw,2rem);margin-bottom:12px}
.punkt-zeile p{max-width:74ch;color:var(--silber)}

/* --- Zusagen --------------------------------------------------------- */
.zusagen{display:grid;gap:clamp(16px,2.2vh,28px);margin-top:clamp(20px,3vh,38px)}
.zusage{display:grid;grid-template-columns:minmax(0,clamp(110px,16vw,230px)) minmax(0,1fr);
  gap:clamp(14px,2.4vw,40px);align-items:baseline;border-top:1px solid var(--linie);padding-top:16px}
.zusage .ziffer{font-size:clamp(1.7rem,4vw,3.8rem);line-height:.9;font-weight:800;
  color:var(--blau);font-stretch:96%;white-space:nowrap}
.zusage p{font-size:clamp(14px,1.15vw,18px);max-width:58ch}

/* --- Kern ------------------------------------------------------------ */
.kern-gitter{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(22px,4vw,72px);align-items:start}
.kern-bild{margin:0;position:relative}
.kern-bild img{width:100%;height:auto}
.kern-bild figcaption{margin-top:12px}
.kern-text{display:grid;gap:clamp(14px,2.2vh,26px)}
.kern-text p{max-width:62ch}

/* --- Verantwortung --------------------------------------------------- */
.personen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:1px;background:var(--linie);margin-top:clamp(20px,3vh,38px)}
.person{background:transparent;padding:clamp(20px,2.4vw,34px);display:flex;flex-direction:column;gap:14px;
  min-height:clamp(200px,24vh,280px);transition:background .4s var(--kurve)}
.person:hover{background:rgba(32,50,84,.5)}
.person .initialen{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;color:var(--blau)}
.person h3{font-size:clamp(1.25rem,2vw,2rem)}
.person .rolle{color:var(--silber);font-size:clamp(14px,1.1vw,17px)}
.person .ort{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}

/* --- Leitmotivband --------------------------------------------------- */
.band{position:relative;min-height:min(72svh,620px);display:flex;align-items:center;
  overflow:hidden}
.band .band-bild{position:absolute;inset:-12% 0 -12%;z-index:0}
.band .band-bild img{width:100%;height:100%;object-fit:cover;opacity:.9}
.band .band-schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(16,26,45,.94),rgba(16,26,45,.55) 58%,rgba(16,26,45,.85)),
             linear-gradient(to bottom,rgba(16,26,45,.8),rgba(16,26,45,.1) 36%,rgba(16,26,45,.8))}
.band-text{position:relative;z-index:2;padding-block:clamp(44px,7vh,92px)}

/* --- Kontakt und Fußzeile ------------------------------------------- */
#kontakt{background:
  radial-gradient(100% 120% at 50% 0%,rgba(74,138,224,.1),transparent 60%),var(--raum)}
.kontakt-gitter{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,4vw,70px);align-items:start}
.kontakt-liste{display:grid;gap:13px;margin-top:20px}
.kontakt-liste div{display:grid;grid-template-columns:minmax(96px,120px) 1fr;gap:14px;
  align-items:baseline;border-top:1px solid var(--linie);padding-top:11px}
.kontakt-bild{margin:0 0 20px}
.kontakt-bild img{width:100%;height:auto}

footer{padding:clamp(32px,4.6vh,64px) 0 clamp(26px,3.4vh,44px);
  background:rgba(16,26,45,.88)}
.fuss-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(20px,3vw,46px)}
footer h2,footer h4{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grau);margin:0 0 12px;font-weight:500}
footer .logo{height:34px;width:auto;display:block;margin-bottom:16px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 8px 24px rgba(0,0,0,.7))}
.fuss-wege{display:grid;gap:8px;margin-top:4px}
.fuss-wege a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;
  color:var(--silber);text-decoration:none;border-bottom:1px solid var(--linie);
  padding-bottom:3px;width:fit-content}
.fuss-wege a:hover,.fuss-wege a:focus-visible{color:var(--silber-hell);border-color:var(--blau)}
.fuss-schluss{margin-top:clamp(24px,3.4vh,40px);padding-top:16px;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}

/* --- Langtextseiten: Tabellen, Blöcke, Rechtstexte ------------------ */
.langtext{display:grid;gap:clamp(30px,4.4vh,58px)}
.langtext h2{font-size:clamp(1.4rem,2.5vw,2.4rem);line-height:1.04}
.langtext h3{font-size:clamp(1.1rem,1.7vw,1.6rem);line-height:1.12}
.langtext p{max-width:80ch}
.langtext ul,.langtext ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
.langtext li{max-width:78ch}
.langtext a{color:var(--blau);text-decoration:underline;text-underline-offset:3px}
/* Beschriftungsspalte der Angabenlisten auf den Rechtsseiten: Wörter wie
   „Geschäftsführung" brauchen mehr Platz als die Spalte der Startseite. */
.langtext .kontakt-liste div{grid-template-columns:minmax(150px,210px) 1fr}
@media (max-width:620px){.langtext .kontakt-liste div{grid-template-columns:1fr;gap:4px}}
.langtext a:hover,.langtext a:focus-visible{color:var(--eis)}
.lblock{display:grid;gap:clamp(14px,2vh,22px);scroll-margin-top:92px}
.lblock>.mono{color:var(--blau)}
.tabelle{overflow-x:auto;border-radius:var(--radius);
  background:rgba(18,29,50,.6)}
.tabelle table{width:100%;min-width:560px;border-collapse:collapse;font-size:clamp(13px,.96vw,15px)}
.tabelle caption{text-align:left;padding:14px 16px 0;color:var(--grau);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.tabelle th,.tabelle td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--linie);
  vertical-align:top;line-height:1.5}
.tabelle thead th{color:var(--silber-hell);font-weight:600;font-size:clamp(12px,.86vw,13.5px);
  background:rgba(26,41,68,.8);position:sticky;top:0}
.tabelle tbody tr:last-child th,.tabelle tbody tr:last-child td{border-bottom:none}
.tabelle td.zahl,.tabelle th.zahl{text-align:right;font-family:'IBM Plex Mono',monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tabelle tbody th{color:var(--silber);font-weight:500}
.merksatz{border-left:2px solid var(--blau);padding:4px 0 4px 18px;color:var(--silber-hell);
  max-width:76ch;font-size:clamp(15px,1.12vw,18px)}
.warnblock{border-left:2px solid var(--eis);border-radius:var(--radius);
  padding:clamp(16px,2vw,26px);background:rgba(20,32,55,.72);display:grid;gap:12px}
.warnblock h3{color:var(--eis)}
.sprungmarken{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2.4vh,30px)}
.sprungmarken a{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silber);text-decoration:none;
  border-radius:var(--radius);padding:8px 13px;background:rgba(39,60,98,.7)}
.sprungmarken a:hover,.sprungmarken a:focus-visible{border-color:var(--blau);color:var(--silber-hell)}
.weiterwege{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1px;background:var(--linie);margin-top:clamp(22px,3vh,38px)}
.weiterwege a{background:rgba(18,29,50,.76);padding:clamp(18px,2.2vw,30px);text-decoration:none;
  display:grid;gap:10px;transition:background .3s var(--kurve)}
.weiterwege a:hover,.weiterwege a:focus-visible{background:rgba(32,50,84,.86)}
.weiterwege .mono{color:var(--blau)}
.weiterwege strong{color:var(--silber-hell);font-size:clamp(1.05rem,1.5vw,1.4rem);
  font-weight:800;letter-spacing:-.02em;line-height:1.1}
.weiterwege span{color:var(--silber);font-size:14.5px;line-height:1.5}

/* --- Schmale Fenster: ab 400 px lauffähig --------------------------- */
@media (max-width:1040px){
  .start-unten{grid-template-columns:1fr}
  .leistung{grid-template-columns:minmax(0,56px) minmax(0,1fr);min-height:0}
  .leistung .bild{grid-column:1/-1;aspect-ratio:16/8;min-height:0;align-self:auto}
  #netz .text{grid-template-columns:1fr;gap:14px}
  #netz .rechtslage{order:-1}
  .kontakt-gitter,.kern-gitter,.adressaten-gitter,.rang-gitter{grid-template-columns:1fr}
  .adressaten-bild{max-width:520px}
}
@media (max-width:1500px){
  :root{--rand-gross:22px}
  nav{display:none}
  nav.offen{display:flex;position:fixed;inset:62px 0 auto;flex-direction:column;align-items:flex-start;
    gap:4px;background:var(--raum);border-block:1px solid var(--linie);padding:16px 22px;
    max-height:calc(100svh - 62px);overflow-y:auto}
  nav.offen a{font-size:14px;padding:10px 0;width:100%;white-space:normal}
  #menue-knopf{display:block}
  header .knopf{display:none}
  header .marke .zusatz{display:none}
  .waage{grid-template-columns:1fr;gap:10px}
  .bruecke{min-height:46px}
  .bruecke::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:100%}
  .bruecke .pfeil{transform:rotate(135deg)}
  .punkt-zeile,.stufenliste li{grid-template-columns:1fr;gap:8px}
  .balkenzeile{grid-template-columns:1fr;gap:6px}
  .balkenzeile .wert{text-align:left}
  .zusage{grid-template-columns:1fr;gap:6px}
  #netz .stufe p{font-size:13px}
  #netz .text{bottom:16px}
  #start h1 .zeile.lang>span{font-size:.7em}
}
@media (max-width:420px){
  :root{--rand-gross:16px}
  .riesig{font-size:clamp(2rem,10.4vw,2.9rem)}
  .tabelle table{min-width:460px}
}

/* --- Einblendungen: Startwert setzt allein das Skript ---------------
   Die Klasse js-an setzt ausschließlich das Skript. Ohne Skript steht
   jeder Inhalt sofort da. Der erste Bildschirm blendet über eine
   CSS-Bewegung ein und nicht über die Bewegungsbibliothek: Eine
   CSS-Bewegung läuft auch dann zu Ende, wenn der Bildtakt der Seite
   stockt. Die wichtigste Botschaft der Seite hängt damit an keinem
   Skriptlauf.                                                          */
/* Der Startwert kommt erst, wenn das Skript ihn auch wieder aufheben kann:
   die Klasse „wartet" setzt ausschliesslich der Beobachter in start.js, und ein
   Zeitgeber nimmt sie in jedem Fall wieder weg. Ohne Skript, bei Skriptfehler
   oder bei blockiertem Netz steht jeder Inhalt sofort da. Anlass: Markus sah am
   2026-10-09 leere Flaechen statt Text („Was sollen diese Fragmente???"). */
.ein{transition:opacity .7s var(--kurve),transform .7s var(--kurve)}
.ein.wartet{opacity:0;transform:translateY(18px)}
@keyframes zeile-auf{from{transform:translateY(104%)}to{transform:translateY(0)}}
@keyframes ein-auf{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
html.js-an #start h1 .zeile>span{animation:zeile-auf 1.05s var(--kurve) both}
html.js-an #start h1 .zeile:nth-child(2)>span{animation-delay:.085s}
html.js-an #start h1 .zeile:nth-child(3)>span{animation-delay:.17s}
html.js-an #start .ein{animation:ein-auf .85s var(--kurve) .42s both}

/* --- Reduzierte Bewegung -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .ein.wartet{opacity:1;transform:none}
  html.js-an #start h1 .zeile>span{transform:none}
  .laufband .spur{animation:none}
  #netz .spur{height:auto}
  #netz .buehne{position:relative;height:auto;min-height:0;overflow:visible;
    padding:clamp(56px,8vh,120px) var(--rand-gross);max-width:var(--spalte-max);margin:0 auto}
  #netz .kopfzeile{position:relative;top:auto;left:auto;right:auto;margin-top:clamp(22px,3vh,38px)}
  #netz .text{position:relative;left:auto;right:auto;bottom:auto;padding:24px 0 0;
    grid-template-columns:1fr}
  #netz .ersatz{position:relative;display:block;height:auto;max-height:46svh}
}

/* Partnerblock in der Fußzeile — Dogma Partnerlinks JCP, Qvestcon, Standortvergleich.
   Markus 2026-10-07: gegenseitige Verlinkung in jedem Release. */
.fuss-partner{
  margin-top:34px;padding-top:26px;
}
.fuss-partner h4{margin:0 0 14px}
.partner-gitter{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.partner-gitter a{
  display:block;padding:14px 16px;text-decoration:none;border-radius:var(--radius);
  background:var(--panel);
  transition:background .25s ease;
}
.partner-gitter a:hover,
.partner-gitter a:focus-visible{
  background:linear-gradient(160deg,rgba(74,138,224,.22),rgba(39,60,98,.9));
}
.partner-gitter strong{display:block;margin-bottom:5px;letter-spacing:.02em}
.partner-gitter .quelle{display:block;line-height:1.45}

/* Einwilligungsbanner. Erscheint nur, wenn ein einwilligungspflichtiger
   Messdienst eingerichtet ist (Dogma Markus 2026-10-09: alle Messinstrumente
   maximal einbauen, maximale Einwilligungen einholen). */
.einwilligung{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  background:linear-gradient(180deg,rgba(18,29,50,.97),rgba(16,26,45,.99));
  border-top:1px solid rgba(116,156,210,.35);
  box-shadow:0 -18px 48px rgba(0,0,0,.55);
  padding:22px 0 calc(22px + env(safe-area-inset-bottom,0px));
}
.einwilligung-inhalt{
  max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,46px);
  display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;
}
.einwilligung h2{font-size:clamp(15px,1.5vw,18px);margin:0 0 6px;letter-spacing:.01em}
.einwilligung p{margin:0;font-size:14px;line-height:1.55;color:#c3cddb;max-width:76ch}
.einwilligung a{color:#8fc0ff}
.einwilligung-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.einwilligung .knopf{white-space:nowrap}
@media (max-width:760px){
  .einwilligung-inhalt{grid-template-columns:1fr}
  .einwilligung-knoepfe .knopf{flex:1 1 auto;text-align:center}
}

/* Partner-Kennzeichen. Bis echte Logodateien vorliegen, steht das Kürzel als
   Wortzeichen in der Markenschrift — kein Platzhalter, sondern eine Setzung. */
.partner-gitter a{display:flex;flex-direction:column;gap:4px}
/* Die Logos stehen frei auf dem Seitengrund. Beim Überfahren der Kachel
   treten sie etwas hervor; eine Fläche oder ein Rahmen kommt nicht hinzu. */
.partner-gitter a:hover .partner-logo img,
.partner-gitter a:focus-visible .partner-logo img{opacity:1;transform:scale(1.04)}
.partner-logo img{opacity:.92;transition:opacity .3s var(--kurve),transform .3s var(--kurve)}


/* --- Keyword-Zeile in der H1 ----------------------------------------
   Die Zeile stand vorher als eigener Absatz über der Überschrift. Damit
   enthielt die H1 kein einziges Wort, nach dem jemand sucht. Sie steht jetzt
   in der H1 und sieht dabei unverändert aus (Markus 2026-10-09: "nicht SEO
   konform").                                                                */
#start h1 .oberzeile{display:block;font-family:'IBM Plex Mono',monospace;
  font-size:clamp(10px,.82vw,13px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--grau);font-weight:400;line-height:1.7;margin-bottom:clamp(10px,1.4vh,18px);
  font-stretch:normal}

/* --- Ansprechpartner ------------------------------------------------- */
.person .zustaendig{color:var(--silber-hell);font-size:clamp(13px,.98vw,15px);
  line-height:1.55;margin:10px 0 0}
.person .profil{display:inline-block;margin-top:14px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
.person .profil:hover,.person .profil:focus-visible{border-bottom-color:var(--blau)}


/* --- Anfrageformular ------------------------------------------------- */
.anfrage{display:grid;gap:clamp(12px,1.6vh,18px);margin-top:clamp(20px,2.6vh,32px);max-width:720px}
.anfrage .feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.anfrage .feld{display:grid;gap:7px}
.anfrage label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grau)}
.anfrage input,.anfrage textarea{
  font:inherit;font-size:clamp(14px,1.02vw,16px);color:var(--silber-hell);
  background:rgba(16,26,45,.55);border:1px solid var(--linie);border-radius:var(--radius);
  padding:11px 14px;width:100%;transition:border-color .25s,background .25s}
.anfrage input:focus,.anfrage textarea:focus{outline:none;border-color:var(--blau);
  background:rgba(16,26,45,.8)}
.anfrage input::placeholder,.anfrage textarea::placeholder{color:rgba(167,182,202,.55)}
.anfrage textarea{resize:vertical;min-height:120px;line-height:1.6}
.anfrage .pflicht{color:var(--blau)}
.anfrage .leise{font-size:clamp(12px,.88vw,13.5px);color:var(--grau);line-height:1.6;margin:0}
.anfrage .leise a{color:var(--silber);text-decoration:underline;text-underline-offset:3px}
.anfrage button{justify-self:start}
.anfrage .formular-meldung{margin:0;padding:11px 14px;border-radius:var(--radius);
  background:rgba(74,138,224,.14);color:var(--silber-hell);font-size:14px}
.anfrage .formular-meldung[data-art="fehler"]{background:rgba(255,120,120,.16)}
/* Köderfeld: steht für Menschen ausserhalb des Bildes, bleibt für Automaten
   aber ein ganz gewöhnliches Feld. */
.anfrage .koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:760px){
  .anfrage .feld-paar{grid-template-columns:1fr}
}

/* Zielgruppenliste im ersten Bildschirm */
#start .zielgruppen{line-height:1.95;font-size:clamp(10px,.76vw,12px);letter-spacing:.1em}


/* --- Partnerlogos ----------------------------------------------------
   Die vier Kacheln bleiben gleich hoch, egal ob ein Bild oder (bei TMC, deren
   Website nicht antwortet) ein Wortzeichen darin steht. */
.partner-logo{display:flex;align-items:center;justify-content:flex-start;
  height:48px;margin-bottom:14px}
.partner-logo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.partner-logo.wortzeichen{font-family:'IBM Plex Mono',monospace;font-size:15px;
  letter-spacing:.22em;color:var(--silber-hell);align-items:center}


/* --- Portraits der Ansprechpartner ----------------------------------- */
.person .portraet{width:92px;height:92px;object-fit:cover;
  display:block;margin-bottom:16px;background:none;
  /* Kein Rahmen um Fotos (Markus 2026-10-10): kein Ring, kein Schatten, der Rand läuft weich aus */
  border-radius:0;box-shadow:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
@media (max-width:860px){
  .person .portraet{width:76px;height:76px}
}


/* Pflichtkästchen der Einwilligung */
.anfrage .kaestchen{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  align-items:start;font-size:clamp(12.5px,.9vw,14px);line-height:1.6;color:var(--silber);
  text-transform:none;letter-spacing:0;font-family:inherit;cursor:pointer}
.anfrage .kaestchen input{width:17px;height:17px;margin-top:2px;accent-color:var(--blau);
  padding:0;background:none;border:1px solid var(--linie);cursor:pointer}


/* --- Seitenkopf der Unterseiten --------------------------------------
   Die grosse Ueberschrift laeuft mit Zeilenhoehe 0,94; ohne eigenen Abstand
   nach unten schob sich die Quellenzeile in die Unterlaengen. Markus
   2026-10-09: "Umbrueche und Trennung offenkundig nicht optimiert". */
.seitenkopf h1,.seitenkopf .riesig{margin-bottom:clamp(16px,2.2vh,26px)}
.seitenkopf .quelle{margin-top:0}

/* Lange Fachwoerter trennen, statt den Rand zu sprengen. Deutsch hat hier
   Woerter wie "Geschaeftsvorfallbearbeitung" und "Auslagerungsbeauftragte". */
/* Getrennt wird nur an den weichen Trennstellen, die Fjodors Silbentrennung setzt (umbruch.py);
   die Browser-eigene Trennung ist aus, damit nirgends unlogisch umgebrochen wird. */
h1,h2,h3,.riesig,.gross,.mittel{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
p,li,td,th{hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty}
.mono,.quelle,code,.vorgaenge strong{hyphens:none;-webkit-hyphens:none}


/* --- Grafiken ohne jede Kante ----------------------------------------
   Die Bilder laufen an allen vier Seiten weich in den Seitengrund aus. Damit
   entsteht keine Kante, gleich welche Farbe das Bild am Rand trägt, und das
   Bild sitzt in der Fläche statt darauf. Beim Überfahren hebt es sich leicht
   und wird klarer (Markus 2026-10-09: "Bei Mouseover ändert sich nichts").
   Der Verlauf ist bewusst breit: Eine schmale Blende wirkt wie ein Rahmen aus
   Weichzeichner, eine breite wie Tiefe.                                   */
.kern-bild img,.adressaten-bild img,.kontakt-bild img,.band .band-bild{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent),
                     linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent),
             linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  background:none;border:0;border-radius:0}
.kern-bild,.adressaten-bild,.kontakt-bild{background:none;border:0;border-radius:0}
.kern-bild img,.adressaten-bild img,.kontakt-bild img{
  display:block;opacity:.88;filter:saturate(.92) contrast(1.04);
  transition:opacity .6s var(--kurve),transform .9s var(--kurve),filter .6s var(--kurve)}
.kern-bild:hover img,.adressaten-bild:hover img,.kontakt-bild:hover img{
  opacity:1;transform:scale(1.035);filter:saturate(1) contrast(1.08)}

/* Die Bildspalte der Leistungen trägt keinen eigenen Grund mehr und läuft
   zur Textseite hin aus, damit Bild und Text eine Fläche bilden. */
.leistung .bild{background:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 92%,transparent),
                     linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 18%,#000 92%,transparent),
             linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.leistung .bild img{opacity:.88;filter:saturate(.92)}
.leistung:hover .bild img{opacity:1;transform:scale(1.05);filter:saturate(1)}

@media (max-width:860px){
  .leistung .bild{-webkit-mask-image:linear-gradient(to bottom,#000 64%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 64%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
}


/* --- Arbeitsteilung: zwei Hälften, eine Bahn dazwischen ---------------
   Kein Rahmen, keine Kacheln. Die linke Hälfte liegt auf dem Seitengrund,
   die rechte auf einer Spur, die eine Stufe heller ist: Der Unterschied
   zwischen beiden Seiten entsteht über Helligkeit, nicht über Linien.    */
.teilung{display:grid;grid-template-columns:minmax(0,1fr) clamp(56px,7vw,120px) minmax(0,1fr);
  align-items:stretch;margin-top:clamp(26px,3.6vh,48px);position:relative}
.teilung-haelfte{display:grid;align-content:start;gap:clamp(10px,1.4vh,16px);
  padding:clamp(20px,2.6vw,38px) clamp(18px,2.2vw,32px)}
.teilung-haelfte{position:relative;z-index:1}
/* Getriebe: Aufnahme aus gebürstetem Stahl mit blauvioletten Glasrändern, vom Versicherer (großes Rad)
   bis zu den Leistungspaketen (kleines Rad). Läuft hinter beiden Hälften und blendet zu allen Rändern aus. */
.getriebe{position:absolute;z-index:0;left:-8%;top:-14%;width:116%;height:128%;object-fit:cover;pointer-events:none;
  opacity:.46;filter:blur(2.2px) brightness(.88);
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.06) 6%,rgba(0,0,0,.22) 14%,rgba(0,0,0,.55) 26%,#000 40%,#000 60%,rgba(0,0,0,.55) 74%,rgba(0,0,0,.22) 86%,rgba(0,0,0,.06) 94%,transparent 100%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) 10%,rgba(0,0,0,.45) 24%,#000 42%,#000 58%,rgba(0,0,0,.45) 76%,rgba(0,0,0,.1) 90%,transparent 100%);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.06) 6%,rgba(0,0,0,.22) 14%,rgba(0,0,0,.55) 26%,#000 40%,#000 60%,rgba(0,0,0,.55) 74%,rgba(0,0,0,.22) 86%,rgba(0,0,0,.06) 94%,transparent 100%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) 10%,rgba(0,0,0,.45) 24%,#000 42%,#000 58%,rgba(0,0,0,.45) 76%,rgba(0,0,0,.1) 90%,transparent 100%);mask-composite:intersect;
  animation:getriebe-fahrt 34s ease-in-out infinite alternate;will-change:transform}
/* Langsame Kamerafahrt über das Getriebe: Verschiebung und leichtes Heranzoomen. */
@keyframes getriebe-fahrt{from{transform:translate3d(-1.6%,0,0) scale(1.01)}to{transform:translate3d(1.6%,-.6%,0) scale(1.07)}}
@media (prefers-reduced-motion:reduce){.getriebe{animation:none}}
/* Keine Trennlinien über dem Getriebe. */
.teilung-liste li{box-shadow:none}
.teilung-wer{font-size:clamp(1rem,1.5vw,1.5rem);line-height:1.3;color:var(--silber-hell);
  margin:0;max-width:22ch}
.teilung-haelfte.rechts .teilung-wer{max-width:34ch}
.teilung-wer b{color:var(--blau);font-weight:400}
.teilung-liste{list-style:none;margin:clamp(8px,1.2vh,14px) 0 0;padding:0;display:grid}
.teilung-liste li{padding:clamp(9px,1.2vh,13px) 0;color:var(--silber);
  font-size:clamp(14px,1.02vw,16px);line-height:1.5;
  box-shadow:0 1px 0 rgba(167,182,202,.14)}
.teilung-liste li:last-child{box-shadow:none}

/* Die Bahn zwischen beiden Hälften. Die Lichtmarke wandert einmal von links
   nach rechts, sobald der Abschnitt im Bild steht, und bleibt dann rechts
   stehen: Die Last ist übergegangen und kommt nicht zurück. */
.teilung-bahn{position:relative;display:flex;align-items:center;justify-content:center}
.teilung-bahn .marke{position:absolute;top:50%;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--blau);box-shadow:0 0 0 5px rgba(74,138,224,.18),0 0 22px 4px rgba(74,138,224,.5);
  transform:translate(-50%,-50%)}
.teilung.laeuft .marke{animation:marke-wandert 1.5s var(--kurve) forwards}
@keyframes marke-wandert{from{left:0}to{left:100%}}

.teilung-satz{margin-top:clamp(18px,2.6vh,30px);max-width:52ch;
  font-size:clamp(1rem,1.5vw,1.5rem);line-height:1.4;color:var(--silber-hell)}

@media (max-width:860px){
  .teilung{grid-template-columns:1fr;gap:4px}
  .teilung-bahn{min-height:52px}
  .teilung-bahn .marke{left:50%;top:0}
  .teilung.laeuft .marke{animation:marke-wandert-hoch 1.5s var(--kurve) forwards}
  @keyframes marke-wandert-hoch{from{top:0}to{top:100%}}
}
@media (prefers-reduced-motion:reduce){
  .teilung.laeuft .marke{animation:none;left:100%}
}

/* Das Logo in der Fußzeile führt wie das in der Kopfzeile zur Startseite
   (Markus 2026-10-09). */
.fuss-marke{display:inline-block;text-decoration:none;color:inherit}
.fuss-marke .logo{height:34px;width:auto;display:block;transition:opacity .25s}
.fuss-marke:hover .logo,.fuss-marke:focus-visible .logo{opacity:.82}

/* --- Titelbild im Seitenkopf (Burgas): rechtsbündig, zu Text und Rändern weich ausgeblendet ---------- */
.seitenkopf .kopfbild{position:absolute;z-index:0;right:0;top:0;bottom:0;width:min(86%,1500px);pointer-events:none}
.seitenkopf .kopfbild img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block;
  opacity:.9;filter:saturate(.92) brightness(.92);
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.18) 14%,rgba(0,0,0,.55) 32%,#000 52%,#000 100%),linear-gradient(to bottom,#000 0,#000 68%,rgba(0,0,0,.4) 86%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.18) 14%,rgba(0,0,0,.55) 32%,#000 52%,#000 100%),linear-gradient(to bottom,#000 0,#000 68%,rgba(0,0,0,.4) 86%,transparent 100%);
          mask-composite:intersect}
/* Kennzeichnung nach Art. 50 KI-Verordnung: ein Hinweis, klein, am Rand des Bildes */
.seitenkopf .ki-hinweis{position:absolute;right:14px;bottom:10px;z-index:3;font:500 11px/1 var(--mono, ui-monospace, monospace);
  letter-spacing:.06em;color:rgba(203,213,227,.7);pointer-events:none}
@media (max-width:860px){.seitenkopf .kopfbild{width:100%;opacity:.55}}
/* Mit Titelbild trägt der Schleier nur noch die Textseite; das Bild bleibt farbkräftig. */
.seitenkopf:has(.kopfbild) .schleier{background:linear-gradient(90deg,rgba(7,14,30,.78) 0,rgba(7,14,30,.42) 38%,rgba(7,14,30,.06) 72%,transparent 100%)}
.seitenkopf .kopfbild img{opacity:1;filter:saturate(1.05) brightness(1);object-position:78% 42%}

/* Karte im Kopf der Seite Standort Bulgarien: volle Breite, dahinter der Text */
.seitenkopf .kopfkarte{width:100%;left:0}
.seitenkopf .kopfkarte img{object-position:50% 50%;opacity:.95;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.55) 0,#000 30%,#000 100%),linear-gradient(to bottom,#000 0,#000 78%,transparent 100%);
          mask-image:linear-gradient(to right,rgba(0,0,0,.55) 0,#000 30%,#000 100%),linear-gradient(to bottom,#000 0,#000 78%,transparent 100%)}
/* Titelbild: Seitenverhältnis des Bildes (21:9) im Kopf ausnutzen, damit Hafen, Sonnenuntergang und Brücke zu sehen sind. */
.seitenkopf .kopfbild:not(.kopfkarte){width:min(112%,1640px)}
.seitenkopf .kopfbild:not(.kopfkarte) img{object-position:60% 40%}
.seitenkopf .kopfkarte{left:9%;width:100%}
/* Sehr weiche, mehrstufige Ausblendung aller Titelbilder: nirgends eine erkennbare Kante. */
.seitenkopf .kopfbild:not(.kopfkarte) img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.04) 6%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.32) 24%,rgba(0,0,0,.58) 36%,rgba(0,0,0,.82) 48%,rgba(0,0,0,.95) 60%,#000 72%,#000 100%),linear-gradient(to bottom,rgba(0,0,0,.55) 0,#000 10%,#000 56%,rgba(0,0,0,.8) 66%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.2) 90%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.04) 6%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.32) 24%,rgba(0,0,0,.58) 36%,rgba(0,0,0,.82) 48%,rgba(0,0,0,.95) 60%,#000 72%,#000 100%),linear-gradient(to bottom,rgba(0,0,0,.55) 0,#000 10%,#000 56%,rgba(0,0,0,.8) 66%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.2) 90%,transparent 100%);
          mask-composite:intersect}
.seitenkopf .kopfkarte img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.1) 5%,rgba(0,0,0,.35) 14%,rgba(0,0,0,.7) 26%,#000 40%,#000 80%,rgba(0,0,0,.6) 92%,rgba(0,0,0,.2) 98%,transparent 100%),linear-gradient(to bottom,rgba(0,0,0,.4) 0,#000 14%,#000 58%,rgba(0,0,0,.6) 74%,rgba(0,0,0,.25) 88%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.1) 5%,rgba(0,0,0,.35) 14%,rgba(0,0,0,.7) 26%,#000 40%,#000 80%,rgba(0,0,0,.6) 92%,rgba(0,0,0,.2) 98%,transparent 100%),linear-gradient(to bottom,rgba(0,0,0,.4) 0,#000 14%,#000 58%,rgba(0,0,0,.6) 74%,rgba(0,0,0,.25) 88%,transparent 100%);
          mask-composite:intersect}
/* Unterkante des Titelbildes: dunkler Auslauf, damit Sprungmarken und Schilder im Bild nicht kollidieren */
.seitenkopf .kopfbild:not(.kopfkarte)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,18,36,.94) 0,rgba(10,18,36,.7) 14%,rgba(10,18,36,.32) 30%,rgba(10,18,36,.08) 46%,transparent 60%)}
.seitenkopf .kopfbild:not(.kopfkarte) img{object-position:62% 4%}

/* --- Sprungmarken: dreidimensionaler Mouse-Over in Titan und Blau, wie die übrigen Flächen --------- */
.sprungmarken a{position:relative;transition:transform .28s var(--kurve),box-shadow .28s var(--kurve),background .28s var(--kurve),color .28s var(--kurve);
  background:linear-gradient(180deg,rgba(70,96,142,.78) 0,rgba(39,60,98,.78) 54%,rgba(28,44,76,.86) 100%);
  box-shadow:inset 0 1px 0 rgba(203,213,227,.22),inset 0 -1px 0 rgba(8,14,30,.55),0 2px 4px rgba(6,12,28,.4)}
.sprungmarken a:hover,.sprungmarken a:focus-visible{transform:translateY(-3px) scale(1.035);color:#fff;
  background:linear-gradient(180deg,rgba(110,138,186,.92) 0,rgba(58,86,136,.92) 48%,rgba(34,54,96,.95) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(10,18,40,.6),0 10px 18px -4px rgba(4,10,26,.75),0 0 0 1px rgba(150,176,222,.45),0 0 22px rgba(74,138,224,.38)}
.sprungmarken a:active{transform:translateY(-1px) scale(1.01);box-shadow:inset 0 2px 5px rgba(6,12,28,.6),0 3px 6px rgba(4,10,26,.6)}
@media (prefers-reduced-motion:reduce){.sprungmarken a,.sprungmarken a:hover{transition:none;transform:none}}

/* --- Differenz zu Deutschland: Minus in Rot, silberner Haken als positives Zeichen -------------------- */
.differenz{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.differenz .minus{color:#FF6F6F;font-weight:600}
.differenz .haken{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:13px;line-height:1;
  color:#0E1A31;background:linear-gradient(145deg,#F2F6FB 0,#B7C3D6 48%,#8798B3 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(4,10,26,.55)}

/* =====================================================================================================
   Einheitliches Karten-Verhalten (Standard für alle Flächen): dreidimensionaler Mouse-Over
   Grundzustand mit feiner Lichtkante oben und Schattenkante unten, Mouse-Over hebt die Fläche an,
   heller Verlauf von oben, silberner Rand, blauer Schein. Gilt für Felder, Karten, Zeilen und Stufen.
   ===================================================================================================== */
:root{--karte-licht:linear-gradient(180deg,rgba(160,186,230,.2) 0,rgba(160,186,230,.05) 36%,rgba(4,10,26,.22) 100%);
  --karte-grund:inset 0 1px 0 rgba(203,213,227,.16),inset 0 -1px 0 rgba(6,12,28,.5);
  --karte-hoch:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(6,12,28,.6),0 16px 28px -10px rgba(3,8,22,.85),0 0 0 1px rgba(160,186,230,.34),0 0 30px rgba(74,138,224,.24)}
.dreifeld>div,.zusage,.stufenliste li,.person,.leistung,#netz .rechtslage .zeile,.weiterwege a{
  position:relative;box-shadow:var(--karte-grund);
  transition:transform .34s var(--kurve),box-shadow .34s var(--kurve),background-color .34s var(--kurve),background-image .34s var(--kurve)}
.dreifeld>div:hover,.dreifeld>div:focus-within,.zusage:hover,.stufenliste li:hover,.person:hover,.leistung:hover,
.weiterwege a:hover,.weiterwege a:focus-visible{
  transform:translateY(-5px);z-index:2;background-image:var(--karte-licht);box-shadow:var(--karte-hoch)}
.punkt-zeile{position:relative;transition:transform .34s var(--kurve),box-shadow .34s var(--kurve),background-image .34s var(--kurve)}
.punkt-zeile:hover{transform:translateY(-3px);background-image:var(--karte-licht);z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 14px 24px -12px rgba(3,8,22,.8),0 0 0 1px rgba(160,186,230,.22)}
.zusage:hover .ziffer{text-shadow:0 0 22px rgba(120,184,240,.55)}
@media (prefers-reduced-motion:reduce){
  .dreifeld>div,.zusage,.stufenliste li,.person,.leistung,.weiterwege a,.punkt-zeile{transition:none}
  .dreifeld>div:hover,.zusage:hover,.stufenliste li:hover,.person:hover,.leistung:hover,.weiterwege a:hover,.punkt-zeile:hover{transform:none}}

/* --- Netz: Stufentext und Rechtslage als Titanglas, ruhig und einheitlich -------------------------- */
#netz .stufe{padding:clamp(16px,1.8vw,26px) clamp(18px,2vw,30px);max-width:50ch;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(40,62,104,.62) 0,rgba(14,24,46,.78) 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:var(--karte-grund),0 18px 36px -16px rgba(2,6,18,.8),0 0 0 1px rgba(160,186,230,.18);
  border-left:2px solid rgba(120,184,240,.7)}
#netz .stufe .nr{color:var(--eis)}
#netz .rechtslage{padding:6px;gap:6px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(40,62,104,.6) 0,rgba(14,24,46,.8) 100%);
  box-shadow:var(--karte-grund),0 18px 36px -16px rgba(2,6,18,.8),0 0 0 1px rgba(160,186,230,.18)}
#netz .rechtslage .zeile{padding:11px 14px 11px 40px;border-radius:2px;pointer-events:auto}
#netz .rechtslage .zeile:hover{transform:translateY(-2px);background-image:var(--karte-licht);box-shadow:var(--karte-hoch)}
#netz .rechtslage .punkt{left:15px;top:14px;width:13px;height:13px;
  background-image:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85) 0,rgba(255,255,255,0) 46%);background-blend-mode:screen;
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 12px currentColor,inset 0 -2px 3px rgba(0,0,0,.45)}
#netz .rechtslage .t b{color:var(--silber-hell);letter-spacing:.18em}

/* Unterkante des Seitenkopfes: der Schleier läuft sanft aus, damit keine Kante zum folgenden Abschnitt bleibt */
.seitenkopf .schleier{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,rgba(0,0,0,.6) 78%,rgba(0,0,0,.25) 90%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 62%,rgba(0,0,0,.6) 78%,rgba(0,0,0,.25) 90%,transparent 100%)}
/* Quadratische Kopfbilder (Schalen): Ausschnitt in die Mitte legen */
.seitenkopf .kopfkarte img[src*="schalen_zwiebel"]{object-position:50% 42%}

/* --- Tabellen auf schmalen Bildschirmen: je Zeile eine Karte, Spaltenname über dem Wert ---------- */
@media (max-width:700px){
  .tabelle{overflow-x:visible}
  .tabelle table{min-width:0}
  .tabelle thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  .tabelle table,.tabelle tbody,.tabelle tr,.tabelle th,.tabelle td{display:block;width:100%}
  .tabelle caption{display:block;width:100%;padding:14px 16px 6px}
  .tabelle tbody tr{padding:14px 16px;border-bottom:1px solid var(--linie)}
  .tabelle tbody tr:last-child{border-bottom:none}
  .tabelle tbody th{padding:0 0 8px;border:none;font-weight:600;color:var(--silber-hell);font-size:15px}
  .tabelle td,.tabelle td.zahl{padding:5px 0;border:none;text-align:left}
  .tabelle td.zahl,.tabelle th.zahl{white-space:normal;overflow-wrap:anywhere}
  .tabelle td::before{content:attr(data-label);display:block;margin-bottom:2px;font-family:'IBM Plex Mono',monospace;
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
}

/* Leistungskarten auf schmalen Bildschirmen: Nummer oben statt in einer eigenen Spalte */
@media (max-width:700px){
  .leistung{grid-template-columns:1fr;gap:10px;padding-left:clamp(16px,5vw,26px);padding-right:clamp(16px,5vw,26px)}
  .leistung .bild{min-height:170px}
}

/* Kein seitliches Überstehen: Gitter und Textspalten dürfen nie breiter werden als der Bildschirm */
.langtext{grid-template-columns:minmax(0,1fr)}
.lblock,.langtext>*{min-width:0}
.lblock{grid-template-columns:minmax(0,1fr)}
@media (max-width:1040px){
  .kontakt-gitter,.kern-gitter,.adressaten-gitter,.rang-gitter{grid-template-columns:minmax(0,1fr)}
  .rang-gitter>*{min-width:0}
}
.rangliste td{overflow-wrap:anywhere}
.rangliste th:first-child{width:4.6em;white-space:nowrap}
.rangliste td:first-child{width:4.6em}
html,body{overflow-x:clip}

/* =========================================================================
   Titan-Gestaltung durchgängig (Markus 2026-10-10: "gar keine Designelemente wie
   unsere Titan gebürsteten Elemente"). Drei Bausteine, überall gleich:
   1) Titanband als Trenner zwischen den Blöcken der Fachseiten,
   2) gebürstete Titanfläche unter Tabellen, Hinweisblöcken und Wegekarten,
   3) Titannaht mit Schrauben und blauer Lichtfuge vor dem Kontaktabschnitt.
   Alle Bilder laufen an allen Rändern weich aus, nie ein Rahmen erkennbar.
   ========================================================================= */
.langtext:not(.schmal) .lblock+.lblock::before{
  content:"";display:block;height:2px;margin:10px 0 6px;
  background:linear-gradient(90deg,transparent,rgba(120,184,240,.55) 18%,rgba(190,220,255,.85) 50%,rgba(120,184,240,.55) 82%,transparent);
  box-shadow:0 0 14px rgba(74,138,224,.45)}
.langtext:not(.schmal) .lblock+.lblock:nth-child(3n+2)::before{
  content:"";display:block;height:clamp(60px,9vw,130px);margin:6px 0 4px;box-shadow:none;
  background:url("medien/titan_band.webp") center/cover no-repeat;opacity:.92;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
                     linear-gradient(to bottom,transparent,#000 34%,#000 66%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
             linear-gradient(to bottom,transparent,#000 34%,#000 66%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}

.tabelle,.warnblock,.weiterwege a{
  background-color:rgba(14,24,44,.9);
  background-image:linear-gradient(180deg,rgba(14,24,44,.55),rgba(14,24,44,.9)),url("medien/titan_platte.webp");
  background-size:auto,cover;background-position:center;
  box-shadow:inset 0 1px 0 rgba(190,220,255,.2),inset 0 -1px 0 rgba(0,0,0,.45)}
.weiterwege a:hover,.weiterwege a:focus-visible{background-color:rgba(26,42,72,.92)}

.titan-naht{
  display:block;height:clamp(110px,18vw,260px);margin:0 0 -6px;position:relative;z-index:1;
  background:url("medien/titan_naht.webp") center 62%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),
                     linear-gradient(to bottom,transparent,#000 40%,#000 78%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),
             linear-gradient(to bottom,transparent,#000 40%,#000 78%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* Rechtsseiten (schmale Textspalte): schlankes Titanband zwischen den Abschnitten. */
.langtext.schmal .lblock+.lblock::before{
  content:"";display:block;height:clamp(26px,3.4vw,46px);margin:4px 0 0;
  background:url("medien/titan_band.webp") center/cover no-repeat;opacity:.85;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent),
                     linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent),
             linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* Startseite und Fragenblock: Titanband an den Abschnittsgrenzen */
#netz::before,#leistungen::before,#adressaten::before,#kern::before,#zahl::before,#geregelt::before,
#zusagen::before,#verantwortung::before,#faq-seite::before{
  content:"";display:block;height:clamp(70px,10vw,150px);margin:0 auto;max-width:1600px;
  background:url("medien/titan_band.webp") center/cover no-repeat;opacity:.92;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
                     linear-gradient(to bottom,transparent,#000 34%,#000 66%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
             linear-gradient(to bottom,transparent,#000 34%,#000 66%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* Fünf Punkte, Zusagen und Stufen: dieselbe gebürstete Titanfläche wie bei den Tabellen */
.punkt-zeile,.zusagen .zusage,.stufenliste>*{
  background-color:rgba(14,24,44,.88);
  background-image:linear-gradient(180deg,rgba(14,24,44,.6),rgba(14,24,44,.9)),url("medien/titan_platte.webp");
  background-size:auto,cover;background-position:center;
  box-shadow:inset 0 1px 0 rgba(190,220,255,.18),inset 0 -1px 0 rgba(0,0,0,.45);
  border-radius:var(--radius)}
.punkt-zeile{padding-left:clamp(16px,2.2vw,32px);padding-right:clamp(16px,2.2vw,32px);margin-bottom:10px;border-bottom:0}
.zusagen .zusage{padding-left:clamp(16px,2.2vw,32px);padding-right:clamp(16px,2.2vw,32px);margin-bottom:8px}

/* Lange Knopfbeschriftungen dürfen auf schmalen Bildschirmen umbrechen statt abzuschneiden */
@media (max-width:700px){.knopf{white-space:normal;max-width:100%;text-align:left;line-height:1.5}}

/* Kopfbild der Rechtsseiten auf schmalen Bildschirmen dunkler, damit die Einordnungszeile lesbar bleibt */
@media (max-width:860px){.seitenkopf .kopfbild img[src*="recht_titan"]{opacity:.55}}


/* ===== Abschnitt 03 Das Netz: feste Anordnung, alle sechs Stufen sichtbar (Markus 2026-10-10) ===== */
#netz .spur{height:auto}
#netz .buehne.netz-statisch{position:relative;height:auto;overflow:visible;
  padding:clamp(34px,6vh,80px) 0 clamp(48px,8vh,100px)}
#netz .netz-statisch .huelle{max-width:1500px;margin:0 auto;padding:0 var(--rand-gross)}
.netz-bild{margin:clamp(22px,3.4vh,44px) 0 0;position:relative;border:0;border-radius:0;box-shadow:none;background:none}
/* Kein Rahmen um Fotos (Markus 2026-10-10): alle vier Ränder laufen weich in den Hintergrund aus. */
.netz-bild img{display:block;width:100%;height:auto;max-height:52svh;object-fit:cover;object-position:center;border-radius:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
                     linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
             linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
#netz .stufenliste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);
  margin:clamp(14px,2vh,26px) 0 0;background:none}
#netz .stufenliste li{display:flex;flex-direction:column;gap:12px;position:relative;
  padding:clamp(18px,1.9vw,28px);background-color:rgba(14,24,44,.9)}
#netz .stufenliste li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--blau),rgba(120,184,240,.15) 70%,transparent)}
#netz .stufenliste .nr{color:var(--eis)}
#netz .stufenliste h3{font-size:clamp(1.05rem,1.45vw,1.4rem);margin:0 0 8px;line-height:1.2}
#netz .stufenliste p{max-width:none;font-size:clamp(13.5px,.98vw,15.5px);line-height:1.55}
#netz .rechtslage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);
  margin-top:clamp(14px,2vh,26px);padding:8px;position:static}
@media (max-width:1100px){#netz .stufenliste,#netz .rechtslage{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){#netz .stufenliste,#netz .rechtslage{grid-template-columns:1fr}
  #netz .netz-statisch .huelle{padding:0 16px}}

/* Titelbilder der Seiten Auslagerung und Ausgliederung: Motiv mittig bis rechts, Ränder laufen über die Kopfbild-Maske aus */
.seitenkopf .kopfkarte img[src*="jcp_auslagerung_titan"]{object-position:60% 40%}
.seitenkopf .kopfkarte img[src*="jcp_ausgliederung_titan"]{object-position:52% 45%}