/* bkh Hattingen, zentrale CSS. Seit 13.09.2026 Variante C "Zweistufig" (Entscheidung
   David nach Rueckmeldung der Schulleitung): Menueleiste auf Papier, alle Flaechen,
   die vom 11. bis 13.09.2026 grau waren, in mitteldunklem Petrol mit heller Schrift.
   Der Dateiname bleibt, damit keine Seite neu verlinkt werden muss.
   Davor: finales Design D2 Grau (Entscheidung 11.09.2026).
   Erzeugt aus den Entwurfsseiten: Schichten zusammengefuehrt, Reste des Akzent-Schalters
   gestrichen, Bildungsgangseite, Beitragsseite und Bildungsangebot vom dunklen System
   auf Grau umgestellt. Seitengebundene Regeln haengen an der Klasse am body. */
/* Grundwerte. --nacht traegt seit 13.09.2026 (Variante C, Entscheidung David) das
   mitteldunkle Petrol der Flaechen; vom 11. bis 13.09.2026 war es das Grau #ACB7B9,
   davor das Nachtblau #07222A aus D2. --papier ist der Grund der Menueleiste, --akzent-hell
   der Akzent fuer kleine Schrift auf Petrol (4,9:1; der normale Akzent kommt dort nur auf 3,3:1). */
:root{--nacht:#1E5A66;--papier:#F1E4D0;--papier-linie:#E1D3BC;--akzent-hell:#F9C48F;--petrol:#0E4A55;--akzent:#F3933F;--akzent-ink:#2A1503;--av:#7A3FA8;--foto-schleier:rgba(7,34,42,.22);--pink:#D91B47;--tuerkis:#0C7B7E;--gruen:#187F53;--ink:#0B1B1F;--ink-2:#41565C;--ink-3:#5F7177;--grund:#F6F3EC;--karte:#FFFFFF;--linie:#E1DCD1;--sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--r:22px}

/* Petrol-Flaechen (Variante C, 13.09.2026): Schrift hell. Auf #1E5A66 erreichen
   Weiss 7,8:1, --ink-2 #CFE3E6 rund 6,4:1 und --ink-3 #B9D3D7 rund 4,9:1, also
   WCAG AA auch fuer Nebenschrift. Die Menueleiste (header.top) haengt nicht mehr
   an dieser Liste: sie steht auf Papier mit der normalen dunklen Schrift.
   Die farbigen Abteilungsflaechen sind seit 11.09.2026 selbst abgedunkelt (siehe :root). */
.hero,.band,.cta,footer,.bgkopf,.bkopf,.seitenkopf,.dublin,.rbox.dunkel{--ink:#FFFFFF;--ink-2:#CFE3E6;--ink-3:#B9D3D7}

/* Grundgeruest und gemeinsame Bausteine: Kopf, Knoepfe, Abschnittskoepfe, Karten, Band, CTA, Fuss */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{margin:0;background:var(--grund);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55}
h1,h2,h3,h4{margin:0;line-height:1.02;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* Fokusring als Doppelring (WCAG 1.4.11, gemessen 12.09.2026): innen
   dunkel, aussen der Akzent. Ein einfarbiger Ring erreicht die geforderten
   3 zu 1 nicht auf beiden Untergruenden zugleich. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 6px var(--akzent)}
.wrap{max-width:1240px;margin:0 auto;padding:0 26px}
.skip{position:absolute;left:-9999px;background:#fff;color:var(--ink);padding:12px 18px}
.skip:focus{left:8px;top:8px;z-index:99}
.label{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;font-weight:800;font-size:17px;text-decoration:none;border:3px solid transparent;transition:transform .14s}
.btn:hover{transform:translate(-2px,-2px)}
.btn-akzent{background:var(--akzent);color:var(--akzent-ink);box-shadow:5px 5px 0 rgba(0,0,0,.85)}
.btn-weiss{background:#fff;color:#0B1B1F;box-shadow:5px 5px 0 rgba(0,0,0,.85)}
.btn-rand{border-color:var(--ink);color:var(--ink)}
.btn-dunkel{background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--akzent)}
header.top{background:var(--papier);color:var(--ink);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--papier-linie);--ink-3:#41565C}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .m{background:var(--akzent);color:var(--akzent-ink);font-weight:800;font-size:27px;letter-spacing:-.07em;border-radius:.4em;padding:.19em .28em;line-height:1;display:inline-block;flex:0 0 auto}
.brand .n{font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.1}
.brand .n small{display:block;font-weight:400;font-size:12.5px;letter-spacing:.06em;color:var(--ink-3);line-height:1.45;margin-top:3px}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center}
nav.main a{display:block;padding:11px 16px;border-radius:999px;text-decoration:none;font-weight:700;font-size:16px;color:var(--ink-2)}
nav.main a:hover{background:rgba(11,27,31,.08);color:var(--ink)}
nav.main a.cta{background:var(--akzent);color:var(--akzent-ink);font-weight:800}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:28px;cursor:pointer;padding:6px 10px}
@media (max-width:960px){
  nav.main{display:none;position:absolute;left:0;right:0;top:82px;background:var(--papier);padding:10px 26px 22px;border-bottom:1px solid var(--papier-linie)}
  nav.main.auf{display:block}
  nav.main ul{flex-direction:column;align-items:stretch;gap:2px}
  .burger{display:block}
}
section{padding:74px 0}
.kopf{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.kopf .label{color:var(--petrol);margin-bottom:10px}
.kopf h2{font-size:clamp(32px,4.6vw,56px)}
.kopf p{margin:12px 0 0;color:var(--ink-2);max-width:34em;font-size:18.5px}
.kopf a.mehr{font-weight:800;text-decoration:none;color:var(--petrol);white-space:nowrap;font-size:17px}
.kopf a.mehr:hover{text-decoration:underline}
.hinweis{font-size:15px;color:var(--ink-3);margin:0}
.karte{background:var(--karte);border-radius:var(--r);overflow:hidden;border:1px solid var(--linie);display:flex;flex-direction:column;box-shadow:0 10px 26px rgba(7,34,42,.09);text-decoration:none;transition:transform .16s}
.karte:hover{transform:translateY(-5px)}
.karte img{width:100%;object-fit:cover}
.karte .txt{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.tag{align-self:flex-start;background:var(--c,var(--petrol));color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.karte p{margin:0;color:var(--ink-2);font-size:16px}
.karte .w{margin-top:auto;font-weight:800;color:var(--petrol);padding-top:8px;font-size:16px}
.band{background:var(--nacht);color:var(--ink);padding:52px 0}
.band ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:760px){
  .band ul{grid-template-columns:1fr 1fr}
}
.band strong{display:inline-block;font-size:clamp(44px,6vw,76px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--akzent-ink);background:var(--akzent);padding:.06em .18em .08em;border-radius:14px;margin-bottom:14px}
.band span{font-weight:700;font-size:16.5px;color:var(--ink-2);display:block}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){
  .zwei{grid-template-columns:1fr}
}
.box{background:var(--karte);border-radius:var(--r);padding:30px 32px;border:1px solid var(--linie)}
.box h3{font-size:26px;margin-bottom:18px}
.cta{background:var(--nacht);color:var(--ink);border-radius:28px;padding:56px 48px;display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center;position:relative;overflow:hidden}
@media (max-width:860px){
  .cta{grid-template-columns:1fr;padding:40px 28px}
}
.cta h2{font-size:clamp(32px,4.4vw,50px)}
.cta p{color:var(--ink-2);font-size:19px;margin:16px 0 0;max-width:30em}
.cta .aktion{display:flex;flex-direction:column;gap:12px}
.cta .aktion .btn{justify-content:center}
footer{background:var(--nacht);color:var(--ink-2);padding:64px 0 30px;font-size:16.5px;margin-top:76px}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:44px}
@media (max-width:860px){
  footer .cols{grid-template-columns:1fr 1fr}
}
footer h2{color:var(--akzent-hell);font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;font-weight:800}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* Partnerlogos im Fuss: seit 14.09.2026 verlinkt wie auf der alten Seite und
   groesser, weil Siegel mit Text bei 44 px nicht mehr lesbar waren. Der
   weisse Rahmen sitzt am Link, damit die Flaeche zum Klicken gross ist. */
footer .partner{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;align-items:center}
footer .partner img{height:auto;width:auto;max-height:88px;max-width:190px;display:block;border-radius:4px}
footer .partner a,footer .partner > img{background:#fff;border-radius:10px;padding:7px 10px;border:1px solid var(--linie)}
footer .partner a{display:inline-flex;transition:transform .15s ease,box-shadow .15s ease}
footer .partner a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.22)}
footer .partner a:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
footer .legal{border-top:1px solid rgba(255,255,255,.25);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px}

/* Startseite */
.hero{background:var(--nacht);color:var(--ink);position:relative;overflow:hidden;padding:70px 0 122px}
.hero .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.9;pointer-events:none}
.hero .b1{width:560px;height:560px;background:#2E7484;right:-180px;top:-190px;opacity:.75}
.hero .b2{width:260px;height:260px;background:var(--pink);right:auto;bottom:-180px;opacity:.5;left:-120px}
.hero .b3{width:180px;height:180px;background:var(--tuerkis);right:-90px;bottom:-30px;opacity:.45}
.hero .inner{position:relative;z-index:2;max-width:22em}
.hero .label{color:var(--akzent-ink);margin-bottom:20px;background:var(--akzent);padding:.45em .8em;border-radius:999px}
.hero h1{font-size:clamp(46px,9vw,104px);font-weight:800;line-height:1.06}
.hero h1 .hl{display:inline-block;line-height:1;padding:0 .1em .09em;margin:.02em 0;background:var(--akzent);color:var(--akzent-ink);border-radius:10px}
.hero p{font-size:21px;color:var(--ink-2);max-width:26em;margin:26px 0 32px}
.hero .aktion{display:flex;gap:14px;flex-wrap:wrap}
.hero .strip{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap;margin-top:46px}
.hero .strip span{background:rgba(255,255,255,.55);border:2px solid rgba(11,27,31,.4);border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px;color:var(--ink)}
.hero .wrap{position:relative}
.hero figure.kreis{margin:0;position:absolute;z-index:2;right:26px;top:19px;width:min(534px,calc(41vw - 20px));height:min(534px,calc(41vw - 20px));border-radius:50%;overflow:hidden;box-shadow:0 26px 64px rgba(0,0,0,.38)}
.hero figure.kreis img{width:100%;height:100%;object-fit:cover;object-position:58% 46%}
.hero figure.kreis::after{content:"";position:absolute;inset:0;background:var(--foto-schleier);pointer-events:none}
@media (max-width:1000px){
  .hero figure.kreis{position:static;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r);margin-top:34px;box-shadow:9px 9px 0 var(--akzent)}
  .hero figure.kreis img{height:auto;aspect-ratio:16/9}
}
.einstieg{margin-top:-82px;position:relative;z-index:5;padding-bottom:70px}
.einstieg .haube{background:var(--akzent);color:var(--akzent-ink);border-radius:var(--r) var(--r) 0 0;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;box-shadow:0 14px 34px rgba(7,34,42,.22)}
.einstieg .haube b{font-size:23px;letter-spacing:-.03em;display:block}
.einstieg .haube span{font-size:16px;font-weight:600;opacity:.92}
.einstieg .haube a{background:var(--ink);color:#fff;text-decoration:none;font-weight:800;font-size:16.5px;padding:14px 24px;border-radius:999px;white-space:nowrap;transition:transform .14s}
.einstieg .haube a:hover{transform:translate(-2px,-2px)}
.einstieg ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:var(--linie);border-radius:0 0 var(--r) var(--r);overflow:hidden;align-items:stretch;box-shadow:0 14px 34px rgba(7,34,42,.18)}
@media (max-width:1000px){
  .einstieg ul{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .einstieg ul{grid-template-columns:1fr}
}
.einstieg li{display:flex}
.einstieg li a{flex:1;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:22px 22px 20px;text-decoration:none;color:#fff;background:var(--c);transition:filter .16s}
.einstieg li a:hover{filter:brightness(1.12)}
.einstieg .n{font-size:14px;font-weight:800;letter-spacing:.14em}
.einstieg h2{font-size:22px}
.einstieg .anz{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:15.5px;border-top:2px solid rgba(255,255,255,.3);padding-top:12px}
.einstieg .anz i{font-style:normal;font-size:24px;line-height:1}
.blog{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:stretch}
@media (max-width:960px){
  .blog{grid-template-columns:1fr}
}
.gross img{aspect-ratio:16/10;flex:1 1 auto;min-height:240px}
.gross .txt{flex:0 0 auto}
.gross h3{font-size:30px}
.gross p{font-size:17.5px}
.rest{display:grid;gap:18px;grid-auto-rows:1fr}
.rest .karte{flex-direction:row}
@media (max-width:520px){
  .rest .karte{flex-direction:column}
}
.rest .karte img{width:170px;flex:0 0 170px;aspect-ratio:1/1}
@media (max-width:520px){
  .rest .karte img{width:100%;flex:none;aspect-ratio:16/9}
}
.rest .txt{padding:18px 20px}
.rest h3{font-size:20px}
.rest p{font-size:15.5px}
.uhr{list-style:none;margin:0;padding:0}
.uhr li{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--linie);font-size:17px}
.uhr li:last-child{border-bottom:0}
.uhr b{font-weight:800}
.tel{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.tel a{background:var(--grund);border-radius:14px;padding:12px 18px;text-decoration:none;font-weight:700;font-size:16.5px}
.tel a:hover{background:var(--ink);color:#fff}
.term{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.term[hidden]{display:none}
.term li{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:center}
.term .d{background:var(--ink);color:var(--akzent);border-radius:14px;text-align:center;padding:9px 0;font-weight:800;line-height:1.05}
.term .d small{display:block;font-size:11.5px;letter-spacing:.1em;color:#9FC0C6;font-weight:700}
.term .e{font-size:17.5px;font-weight:700}
.term .e span{display:block;font-weight:400;font-size:15px;color:var(--ink-3)}
.schnell{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:stretch}
@media (max-width:1000px){
  .schnell{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .schnell{grid-template-columns:1fr 1fr}
}
.schnell li{display:flex}
.schnell a{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;min-height:126px;background:var(--karte);border:3px solid var(--ink);border-radius:18px;padding:16px 18px;text-decoration:none;box-shadow:3px 3px 0 var(--ink);transition:transform .14s;font-weight:800;font-size:17px;letter-spacing:-.02em}
.schnell a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.schnell .sym{font-size:26px;line-height:1}
.schnell em{font-style:normal;font-weight:600;font-size:14.5px;color:var(--ink-2);display:block;margin-top:4px}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){
  .drei{grid-template-columns:1fr}
}
.drei .k{border-radius:var(--r);padding:30px 30px 26px;color:#fff;background:var(--c);display:flex;flex-direction:column;gap:10px}
.drei h3{font-size:25px}
.drei p{margin:0;font-size:16.5px}
.drei a{margin-top:auto;font-weight:800;text-decoration:none;padding-top:10px;font-size:16px;color:#fff}
.drei a:hover{text-decoration:underline}

/* Bildungsgangseite (body.s-bildungsgang) */
:where(body.s-bildungsgang) h1,:where(body.s-bildungsgang) h2,:where(body.s-bildungsgang) h3,:where(body.s-bildungsgang) h4{line-height:1.04}
.bgkopf{background:var(--nacht);color:var(--ink);position:relative;overflow:hidden;padding:22px 0 78px}
.bgkopf .blob{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.bgkopf .p1{width:520px;height:520px;background:#2E7484;right:-190px;top:-200px;opacity:.75}
.bgkopf .p2{width:250px;height:250px;background:var(--pink);left:-120px;bottom:-150px;opacity:.5}
.bgkopf .p3{width:170px;height:170px;background:var(--tuerkis);right:-70px;bottom:-40px;opacity:.45}
.bgkopf .wrap{position:relative}
:where(body.s-bildungsgang) .krumen{position:relative;z-index:2;font-size:14.5px;color:var(--ink-3);padding:16px 0 22px;font-weight:600}
:where(body.s-bildungsgang) .krumen a{text-decoration:none}
:where(body.s-bildungsgang) .krumen a:hover{color:var(--ink);text-decoration:underline}
.bgkopf .inner{position:relative;z-index:2;max-width:23em}
.pille-abt{display:inline-flex;align-items:center;gap:9px;background:var(--pink);color:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.bgkopf h1{font-size:clamp(38px,5.4vw,64px);margin:22px 0 0}
.bgkopf h1 .hl{display:inline-block;line-height:1;padding:0 .1em .09em;margin:.02em 0;background:var(--akzent);color:var(--akzent-ink);border-radius:10px}
.bgkopf .unter{display:block;font-size:20px;font-weight:700;color:var(--ink-3);letter-spacing:-.01em;margin-top:14px}
.bgkopf p.lead{font-size:20px;color:var(--ink-2);margin:22px 0 30px}
.bgkopf .aktion{display:flex;gap:14px;flex-wrap:wrap}
:where(body.s-bildungsgang) .fakten{position:relative;z-index:2;list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:none}
@media (max-width:860px){
  :where(body.s-bildungsgang) .fakten{grid-template-columns:1fr 1fr}
}
:where(body.s-bildungsgang) .fakten li{background:rgba(255,255,255,.55);border:2px solid rgba(11,27,31,.4);border-radius:16px;padding:14px 18px}
:where(body.s-bildungsgang) .fakten b{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff}
:where(body.s-bildungsgang) .fakten span{display:block;font-weight:700;font-size:17px;margin-top:5px}
.bgkopf figure.kreis{margin:0;position:absolute;z-index:2;right:26px;top:96px;width:396px;height:396px;border-radius:50%;overflow:hidden;box-shadow:0 26px 64px rgba(0,0,0,.4)}
.bgkopf figure.kreis img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.bgkopf figure.kreis::after{content:"";position:absolute;inset:0;background:var(--foto-schleier);pointer-events:none}
@media (max-width:1180px){
  .bgkopf figure.kreis{width:310px;height:310px;top:150px}
}
@media (max-width:620px){
  .bgkopf h1{font-size:clamp(26px,7.2vw,44px)}
}
@media (max-width:1000px){
  .bgkopf .inner{max-width:34em}
  .bgkopf figure.kreis{position:static;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r);margin-top:32px;box-shadow:9px 9px 0 var(--akzent)}
  .bgkopf figure.kreis img{height:auto;aspect-ratio:16/9}
}
.anker{background:var(--karte);position:sticky;top:82px;z-index:30;border-bottom:3px solid var(--akzent)}
.anker ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.anker ul::-webkit-scrollbar{display:none}
.anker a{display:block;white-space:nowrap;padding:15px 16px;text-decoration:none;color:var(--ink-2);font-weight:700;font-size:15.5px}
.anker a:hover{color:var(--ink);background:rgba(11,27,31,.06)}
@media (max-width:960px){
  .anker{top:82px}
}
:where(body.s-bildungsgang) section{padding:70px 0}
:where(body.s-bildungsgang) .kopf{margin-bottom:32px}
:where(body.s-bildungsgang) .kopf h2{font-size:clamp(30px,4.2vw,50px)}
:where(body.s-bildungsgang) section[id],:where(body.s-bildungsgang) div[id]{scroll-margin-top:146px}
:where(body.s-bildungsgang) .zwei{grid-template-columns:1.25fr .75fr;gap:20px;align-items:start}
@media (max-width:900px){
  :where(body.s-bildungsgang) .zwei{grid-template-columns:1fr}
}
.fliess p{font-size:19px;color:var(--ink-2);margin:0 0 18px;max-width:36em}
.fliess p:first-of-type{font-size:21px;color:var(--ink)}
.check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.check li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:17px}
.check i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--gruen);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
:where(body.s-bildungsgang) .box h3{font-size:23px}
.faecher{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.faecher li{background:var(--grund);border:2px solid var(--linie);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15.5px}
:where(body.s-bildungsgang) .trenn{border-top:2px solid var(--linie);margin:26px 0 0;padding-top:22px}
/* Rechte Spalte der Bildungsgangseiten: seit 14.09.2026 mehrere Kaesten
   untereinander (Voraussetzungen, Zusatzqualifikationen, Partner). */
:where(body.s-bildungsgang) .zwei > .kaesten{display:grid;gap:20px;align-items:start}
:where(body.s-bildungsgang) .kaesten .box > .faecher{margin-top:0}
:where(body.s-bildungsgang) .zwei .box > .nachsatz{margin:16px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.weg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--linie);border-radius:var(--r);overflow:hidden;box-shadow:0 14px 34px rgba(7,34,42,.18)}
@media (max-width:900px){
  .weg{grid-template-columns:1fr}
}
.weg li{background:var(--c);color:#fff;padding:28px 28px 26px;display:flex;flex-direction:column;gap:10px}
.weg .n{font-size:46px;font-weight:800;letter-spacing:-.06em;line-height:1;opacity:.72}
.weg .st{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.weg h3{font-size:24px}
.weg p{margin:0;font-size:16.5px}
.weg .tags{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;padding-top:14px}
.weg .tags span{background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14.5px}
.dublin{background:var(--nacht);color:var(--ink);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch}
@media (max-width:1000px){
  .dublin{grid-template-columns:1fr}
}
.dublin img{width:100%;height:100%;object-fit:cover;min-height:280px}
@media (max-width:1000px){
  .dublin img{height:auto;min-height:0;aspect-ratio:16/9}
}
/* Ein Zeichen oder Logo in der Besonderheit wird nicht zugeschnitten:
   ![Beschreibung](../bilder/zeichen.jpg "marke") stellt es in den weissen
   Kasten und zeigt es ganz. */
.dublin.marke img{object-fit:contain;background:#fff;padding:34px;min-height:0;height:auto;align-self:center}
/* Abschnitt Aufbau: eine breite Grafik in der vollen Breite von .wrap. Weisser
   Grund, weil Infografiken meist selbst weiss hinterlegt sind. */
figure.aufbaubild{margin:0;background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:18px}
figure.aufbaubild img{width:100%;height:auto}
figure.aufbaubild figcaption{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--ink-3)}
.dublin .txt{padding:44px 44px 40px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.dublin .label{color:var(--akzent-ink);background:var(--akzent);padding:.45em .8em;border-radius:999px;align-self:flex-start}
.dublin h2{font-size:clamp(28px,3.4vw,42px)}
.dublin p{margin:0;color:var(--ink-2);font-size:18.5px}
.dublin .tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.dublin .tags span{background:rgba(255,255,255,.55);border:2px solid rgba(11,27,31,.4);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px;color:var(--ink)}
/* Besonderheit ohne Bild (14.09.2026): ohne Bildspalte blieb die rechte
   Haelfte des Blocks leer stehen. Dann einspaltig, Text auf Lesebreite. */
.dublin.ohne-bild{grid-template-columns:1fr}
.dublin.ohne-bild .txt{padding:36px 40px 34px;max-width:70ch}
:where(body.s-bildungsgang) .band strong{font-size:clamp(42px,6vw,72px)}
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){
  .stimmen{grid-template-columns:1fr}
}
.stimmen blockquote{margin:0;background:var(--karte);border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);padding:26px 28px 24px;display:flex;flex-direction:column;gap:14px}
.stimmen .z{font-size:44px;line-height:.6;color:var(--pink);font-weight:800}
.stimmen p{margin:0;font-size:18px;font-weight:600}
.stimmen cite{margin-top:auto;font-style:normal;font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:8px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){
  .team{grid-template-columns:1fr}
}
.person{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:24px 26px;display:flex;gap:18px;align-items:center;box-shadow:0 10px 26px rgba(7,34,42,.09)}
.person .av{width:72px;height:72px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--petrol);color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px;letter-spacing:-.03em}
.person .av img{width:100%;height:100%;object-fit:cover}
.person h3{font-size:20px}
.person span{display:block;color:var(--ink-2);font-size:15.5px;margin-top:3px}
.person a{display:inline-block;margin-top:8px;font-weight:800;color:var(--petrol);text-decoration:none;font-size:15.5px}
.person a:hover{text-decoration:underline}
.dl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1000px){
  .dl{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .dl{grid-template-columns:1fr}
}
.dl li{display:flex}
.dl a{flex:1;display:flex;gap:14px;background:var(--karte);border:3px solid var(--ink);border-radius:18px;padding:18px 20px;text-decoration:none;box-shadow:3px 3px 0 var(--ink);transition:transform .14s}
.dl a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.dl .ft{flex:0 0 auto;align-self:flex-start;background:var(--ink);color:var(--akzent);border-radius:8px;padding:5px 9px;font-size:11.5px;font-weight:800;letter-spacing:.08em}
.dl .ft.doc{background:var(--petrol);color:#fff}
.dl h3{font-size:17.5px;letter-spacing:-.02em}
.dl p{margin:5px 0 0;color:var(--ink-2);font-size:15px}
.dl .neu{display:inline-block;background:var(--akzent);color:var(--akzent-ink);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-left:8px;vertical-align:middle}
:where(body.s-bildungsgang) .cta h2{font-size:clamp(30px,4.2vw,48px)}

/* Beitragsseite (body.s-beitrag) */
.bkopf{background:var(--nacht);color:var(--ink);position:relative;overflow:hidden;padding:46px 0 150px}
.bkopf .blob{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.bkopf .b1{width:520px;height:520px;background:#2E7484;right:-170px;top:-210px;opacity:.75}
.bkopf .b2{width:240px;height:240px;background:var(--pink);left:-110px;bottom:-140px;opacity:.5}
.bkopf .wrap{position:relative;z-index:2}
:where(body.s-beitrag) .krumen{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:15px;color:var(--ink-3);margin-bottom:26px}
:where(body.s-beitrag) .krumen a{color:var(--ink);text-decoration:none;font-weight:700}
:where(body.s-beitrag) .krumen a:hover{text-decoration:underline}
.pille{display:inline-block;background:var(--c,var(--petrol));color:#fff;border-radius:999px;padding:6px 15px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.bkopf h1{font-size:clamp(40px,7vw,82px);line-height:1.05;margin:18px 0 0;max-width:15em}
.bkopf h1 .hl{display:inline-block;line-height:1;padding:0 .1em .09em;margin:.02em 0;background:var(--akzent);color:var(--akzent-ink);border-radius:10px}
.bkopf .vor{font-size:21px;color:var(--ink-2);max-width:30em;margin:24px 0 0}
.bmeta{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.bmeta li{background:rgba(255,255,255,.55);border:2px solid rgba(11,27,31,.4);border-radius:999px;padding:8px 17px;font-weight:700;font-size:15px;color:var(--ink)}
.bild-oben{margin-top:-104px;position:relative;z-index:5}
.bild-oben figure{margin:0}
.bild-oben img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);box-shadow:0 20px 46px rgba(7,34,42,.28)}
.bild-oben figcaption{margin-top:12px;font-size:15.5px;color:var(--ink-3);max-width:44em}
.lese-sektion{padding:62px 0 74px}
.lese{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:52px;align-items:start}
@media (max-width:960px){
  .lese{grid-template-columns:1fr;gap:34px}
}
.text{max-width:36em}
.text p{margin:0 0 22px;font-size:19px;line-height:1.68;color:var(--ink-2)}
.text .anlauf{font-size:23px;line-height:1.5;color:var(--ink);font-weight:600}
.text blockquote{margin:34px 0 0;padding:4px 0 4px 26px;border-left:7px solid var(--akzent)}
.text blockquote p{margin:0;font-size:25px;line-height:1.36;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.rail{display:grid;gap:18px;position:sticky;top:104px}
@media (max-width:960px){
  .rail{position:static}
}
.rbox{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:26px 26px 24px}
.rbox h2{font-size:21px;margin-bottom:16px}
.rbox .rtext{margin:0;font-size:16px;color:var(--ink-2)}
.rbox .rlink{display:inline-block;margin-top:16px;font-weight:800;text-decoration:none;color:var(--petrol);font-size:16px}
.rbox .rlink:hover{text-decoration:underline}
:where(body.s-beitrag) .fakten{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
:where(body.s-beitrag) .fakten li{display:flex;align-items:flex-start;gap:14px}
:where(body.s-beitrag) .fakten b{font-size:38px;line-height:1;font-weight:800;letter-spacing:-.05em;color:var(--petrol);min-width:1.4em}
:where(body.s-beitrag) .fakten span{font-size:16px;font-weight:700;color:var(--ink-2)}
.rbox.dunkel{background:var(--nacht);border-color:var(--nacht);color:var(--ink)}
.rbox.dunkel .rtext{color:var(--ink-2)}
.rbox.dunkel .btn{margin-top:18px}
.drei-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media (max-width:900px){
  .drei-karten{grid-template-columns:1fr}
}
.drei-karten .karte img{aspect-ratio:16/10}
.drei-karten :is(h2,h3){font-size:21px}
.drei-karten p{font-size:16px}

/* Bildungsangebot (body.s-angebot) */
nav.main a[aria-current="page"]{background:rgba(11,27,31,.1);color:var(--ink)}
.seitenkopf{background:var(--nacht);color:var(--ink);position:relative;overflow:hidden;padding:54px 0 118px}
.seitenkopf .blob{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.seitenkopf .b1{width:380px;height:380px;background:#2E7484;right:-80px;top:-110px;opacity:.75}
.seitenkopf .b2{width:230px;height:230px;background:var(--pink);right:200px;bottom:-120px;opacity:.5}
.seitenkopf .b3{width:160px;height:160px;background:var(--tuerkis);right:-30px;bottom:40px;opacity:.45}
.seitenkopf .inner{position:relative;z-index:2}
:where(body.s-angebot) .krumen{font-size:15px;font-weight:700;color:var(--ink-3);margin-bottom:18px}
:where(body.s-angebot) .krumen a{text-decoration:none}
:where(body.s-angebot) .krumen a:hover{text-decoration:underline;color:var(--ink)}
.seitenkopf h1{font-size:clamp(40px,7.4vw,84px);line-height:1.06;max-width:12em}
.seitenkopf h1 .hl{display:inline-block;line-height:1;padding:0 .1em .09em;margin:.02em 0;background:var(--akzent);color:var(--akzent-ink);border-radius:10px}
.seitenkopf p{font-size:20px;color:var(--ink-2);max-width:32em;margin:24px 0 0}
.sprung{margin-top:-78px;position:relative;z-index:5}
.sprung ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
@media (max-width:1000px){
  .sprung ul{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .sprung ul{grid-template-columns:1fr}
}
.sprung li{display:flex}
.sprung a{flex:1;display:flex;flex-direction:column;min-height:200px;border-radius:var(--r);padding:24px;text-decoration:none;color:#fff;background:var(--c);transition:transform .16s;box-shadow:0 14px 34px rgba(7,34,42,.22)}
.sprung a:hover{transform:translateY(-6px)}
.sprung .n{font-size:15px;font-weight:800;letter-spacing:.14em}
.sprung h2{font-size:25px;margin:12px 0 10px}
.sprung p{margin:0;font-size:15.5px}
.sprung .anz{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:16px;border-top:2px solid rgba(255,255,255,.3);padding-top:13px}
.sprung .anz i{font-style:normal;font-size:26px;line-height:1}
:where(body.s-angebot) section{padding:70px 0}
:where(body.s-angebot) .kopf h2{font-size:clamp(30px,4.4vw,52px)}
.ziele{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){
  .ziele{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ziele{grid-template-columns:1fr}
}
.ziele a{background:var(--karte);border:3px solid var(--ink);border-radius:var(--r);padding:24px;text-decoration:none;display:flex;flex-direction:column;gap:8px;box-shadow:3px 3px 0 var(--ink);transition:transform .14s}
.ziele a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.ziele b{font-size:21px;letter-spacing:-.02em}
.ziele span{color:var(--ink-2);font-size:16.5px}
.ziele em{margin-top:auto;font-style:normal;font-weight:800;color:var(--petrol);font-size:16px;padding-top:10px}
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){
  .wege{grid-template-columns:1fr}
}
.wege .k{border-radius:var(--r);padding:30px 30px 26px;color:#fff;background:var(--c);display:flex;flex-direction:column;gap:10px}
.wege h3{font-size:25px}
.wege p{margin:0;font-size:16.5px}
.wege a{margin-top:auto;font-weight:800;text-decoration:none;padding-top:10px;font-size:16px;color:#fff}
.wege a:hover{text-decoration:underline}
.ziele .trenn{grid-column:1/-1;border-top:3px solid currentColor;margin:12px 0 0;padding-top:12px;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase}

/* <picture> bekommt keinen eigenen Kasten. So bleibt das Bild direktes Kind
   von .dublin und von figure.kreis, so wie vor den Bildstufen. */
picture{display:contents}
picture>source{display:none}

/* Standardseite (neuer Seitentyp, 12.09.2026): Menueseiten, Pflichtseiten, FAQ.
   Alles haengt an body.s-standard, damit die vier eingefrorenen Musterseiten
   unveraendert bleiben. Der Kopf ist derselbe wie beim Bildungsangebot, der
   Textkoerper uebernimmt die Leseregeln der Beitragsseite (.text, 36em). */
body.s-standard .seitenkopf{padding:54px 0 74px}
body.s-standard .lese-sektion{padding:54px 0 78px}
body.s-standard .text h2{font-size:31px;line-height:1.1;margin:48px 0 18px}
body.s-standard .text h2:first-child{margin-top:0}
body.s-standard .text h3{font-size:22px;line-height:1.2;margin:32px 0 12px}
/* Aufzaehlungen im Textkoerper gelten fuer jeden Seitentyp mit .text, also
   auch fuer den Blogbeitrag, nicht nur fuer die Standardseite. */
.text ul.punkte{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px}
.text ul.punkte li{position:relative;padding-left:27px;font-size:18px;line-height:1.62;color:var(--ink-2)}
.text ul.punkte li::before{content:"";position:absolute;left:2px;top:.63em;width:9px;height:9px;border-radius:50%;background:var(--akzent)}
body.s-standard .text a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
body.s-standard .text p.knopfzeile{margin:0 0 30px}
body.s-standard .text p.knopfzeile a{color:var(--akzent-ink);text-decoration:none}

/* Uebersichtsseite (neuer Seitentyp, 12.09.2026): /bkh-info/ und spaetere
   Verteilerseiten. Sie tragen s-standard und s-uebersicht und uebernehmen die
   Textregeln von oben. Eigene Regeln braucht der Typ seit dem 15.09.2026 nicht
   mehr: Der Wegweiser stand bis dahin als Kachelreihe .verteiler am Seitenende
   und steht jetzt als .rbox in der klebenden Leiste .rail rechts neben dem
   Text, also im selben Baustein wie die Leiste der Blogbeitraege. */

/* Downloadseite (neuer Seitentyp, 12.09.2026). Je Gruppe ein Abschnitt mit
   Ueberschrift und dem dreispaltigen Kachelraster .dl, das es schon von der
   Bildungsgangseite gibt. Die Kacheln brauchen die volle Breite, liegen also
   nicht in der Lesespalte; ein Absatz vor der Liste bekommt sie zurueck. */
body.s-downloads main > section{padding:0 0 44px}
body.s-downloads main > section:first-of-type{padding-top:54px}
body.s-downloads main > section:last-of-type{padding-bottom:78px}
body.s-downloads .dl-titel{font-size:27px;line-height:1.12;margin:0 0 20px}
body.s-downloads .text{margin:0 0 22px}
body.s-downloads .text p:last-child{margin-bottom:0}

/* Terminseite (13.09.2026): Unter den Termingruppen stehen die Blockplaene
   der Berufsschule als Downloadkacheln, und zwar in der Lesespalte. Drei
   Spalten waeren in 36em zu schmal, darum untereinander. Die Kachel ist ein
   Knopf und kein Textlink, sie darf die Unterstreichung der Standardseite
   nicht erben. */
body.s-termine .dl{grid-template-columns:1fr;margin-top:18px}
body.s-termine .text .dl a{color:var(--ink);text-decoration:none}

/* Startseite ohne Aufmacherbild (12.09.2026). Solange kein geprueftes Foto in
   inhalte/bilder/ liegt, entfaellt der Bildkreis; der Text darf dann breiter
   stehen, sonst bliebe die rechte Haelfte leer. */
body.s-start-ohne-bild .hero .inner{max-width:34em}
body.s-start-ohne-bild .hero p{max-width:32em}
body.s-start-ohne-bild .hero{padding-bottom:96px}
/* Der Hinweis ueber den Oeffnungszeiten im Servicekasten. */
.box .hinweis,.zwei .box > p,.zwei .box > div > p{margin:0 0 18px;font-size:16.5px;line-height:1.55;color:var(--ink-2)}
/* Beitragskarte ohne Bild (12.09.2026): Sie soll sich nicht auf die Hoehe der
   Nachbarkarte ziehen lassen, sonst bleibt der Platz des fehlenden Bildes leer.
   Betrifft nur Karten, die der Generator ohne Feld bild baut. */
.karte.ohne-bild{align-self:start}
.rest .karte.ohne-bild{flex-direction:column}

/* Kontaktseite und Meldeseite von kontakt.php (12.09.2026). Alles neue Klassen,
   die uebrigen Seiten sind davon nicht beruehrt. Formularfelder gab es im
   Design bis dahin nicht; sie uebernehmen die Sprache der Downloadkacheln:
   weisse Flaeche, 3 px Linie in --ink, versetzter Schatten. */
body.s-kontakt .lese-sektion{padding:54px 0 78px}
.kontakt{display:grid;grid-template-columns:1fr 1.08fr;gap:28px;align-items:start}
@media (max-width:900px){
  .kontakt{grid-template-columns:1fr}
}
.kbox{background:var(--karte);border:3px solid var(--ink);border-radius:18px;padding:24px 26px;box-shadow:3px 3px 0 var(--ink)}
.kbox + .kbox{margin-top:22px}
.kbox h2{font-size:24px;margin:0 0 14px}
.kbox p{margin:0 0 14px;font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.kbox p:last-child{margin-bottom:0}
.kbox a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.kbox address{font-style:normal;font-size:19px;line-height:1.62;color:var(--ink)}
.kbox ul.zeiten{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.kbox ul.zeiten li{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--linie);padding-bottom:9px;font-size:17px;color:var(--ink-2)}
.kbox ul.zeiten li:last-child{border-bottom:0;padding-bottom:0}
.kbox ul.zeiten b{color:var(--ink);white-space:nowrap}
.formular{display:grid;gap:18px}
.formular .doppelt{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){
  .formular .doppelt{grid-template-columns:1fr}
}
.feld{display:grid;gap:7px}
.feld > span{font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.feld input,.feld textarea{font-family:inherit;font-size:17px;line-height:1.5;color:var(--ink);background:#fff;border:2px solid var(--ink-3);border-radius:12px;padding:13px 15px;width:100%}
.feld textarea{min-height:190px;resize:vertical}
.feld input:focus-visible,.feld textarea:focus-visible{border-color:var(--ink)}
.formular button.btn{cursor:pointer;font-family:inherit;justify-self:start}
.formular .falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular .datenschutz{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
body.s-meldung main.meldung{max-width:46em;padding-top:64px;padding-bottom:88px}
body.s-meldung main.meldung .label{color:var(--petrol);margin-bottom:10px}
body.s-meldung main.meldung h1{font-size:clamp(32px,5vw,52px);margin-bottom:22px}
body.s-meldung main.meldung p{font-size:19px;line-height:1.68;color:var(--ink-2);margin:0 0 20px}
body.s-meldung main.meldung .aktion{margin-top:34px}

/* Personenseite (12.09.2026). Der Kopf im Kasten uebernimmt den Kreis der
   Ansprechpersonen von der Bildungsgangseite; ohne Foto stehen die Initialen. */
.pkopf{display:flex;gap:18px;align-items:center;margin:0 0 18px}
.pkopf .av{width:72px;height:72px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--petrol);color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px;letter-spacing:-.03em}
.pkopf .av img{width:100%;height:100%;object-fit:cover}
.pkopf h2{margin:0;font-size:24px}
.pkopf span{display:block;color:var(--ink-2);font-size:15.5px;margin-top:4px}
.kbox ul.bgliste{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.kbox ul.bgliste li{font-size:17px;line-height:1.5}
body.s-person .seitenkopf h1{max-width:14em}
body.s-person .seitenkopf p.funktion{font-size:20px;color:var(--ink-2);max-width:32em;margin:20px 0 0}

/* Hat eine Personenseite nichts ausser dem Formular, steht es allein in
   Lesebreite statt neben einer leeren Spalte (12.09.2026). */
body.s-person-schlank .kontakt{grid-template-columns:minmax(0,640px);justify-content:start}

/* Beitragsseite ohne Aufmacherbild: Der Kopf laesst sonst 150 px Platz fuer ein
   Bild, das nicht kommt (12.09.2026). */
body.s-beitrag-ohne-bild .bkopf{padding-bottom:74px}

/* Suchseite und Trefferliste (12.09.2026). Die Suche laeuft im Browser gegen
   suchindex.json, es geht nichts an einen Server. */
.suchform{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:0 0 18px}
.suchform .feld{flex:1 1 26em}
.suchform button.btn{cursor:pointer;font-family:inherit}
.suchstand{margin:0 0 22px;font-size:16.5px;color:var(--ink-2)}
ul.treffer{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:12px}
ul.treffer a{display:block;background:var(--karte);border:3px solid var(--ink);border-radius:18px;padding:16px 20px;text-decoration:none;box-shadow:3px 3px 0 var(--ink);transition:transform .14s}
ul.treffer a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
ul.treffer .art{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin-bottom:4px}
ul.treffer b{display:block;font-size:20px;letter-spacing:-.02em}
ul.treffer span:last-child{display:block;margin-top:5px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.suchhilfe{margin-top:8px}

/* Bilder im Textkoerper (12.09.2026). Drei Formen: ein Bild ueber die volle
   Lesespalte, eine Bildmarke im weissen Kasten fuer Logos und eine
   Personenreihe, die dieselben .person-Kacheln nutzt wie die
   Bildungsgangseiten. */
.text figure.textbild{margin:0 0 26px}
.text figure.textbild img{width:100%;height:auto;border-radius:var(--r)}
.text figure.textbild figcaption,.text figure.bildmarke figcaption{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-3)}
.text figure.bildmarke{margin:0 0 22px;width:230px;max-width:100%;display:grid;place-items:center;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:16px}
.text figure.bildmarke img{max-width:100%;max-height:96px;width:auto;height:auto;border-radius:0}
.text figure.bildmarke figcaption{grid-column:1;text-align:center}
.text .personenreihe{display:grid;gap:14px;margin:0 0 26px}

/* Haeufige Fragen (body.s-faq): jede Frage ein Aufklapper. details/summary
   braucht kein JavaScript, laesst sich mit der Tastatur bedienen und behaelt
   die h3-Gliederung. Der Winkel rechts ist reines CSS. */
body.s-faq .text details.frage{border-top:1px solid var(--linie)}
body.s-faq .text details.frage:last-of-type{border-bottom:1px solid var(--linie);margin-bottom:8px}
body.s-faq .text details.frage summary{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;cursor:pointer;list-style:none;padding:19px 2px}
body.s-faq .text details.frage summary::-webkit-details-marker{display:none}
body.s-faq .text details.frage summary h3{font-size:20px;line-height:1.35;font-weight:700;letter-spacing:-.015em;margin:0}
body.s-faq .text details.frage summary::after{content:"";flex:0 0 auto;width:12px;height:12px;margin:7px 4px 0 0;border-right:3px solid var(--petrol);border-bottom:3px solid var(--petrol);transform:rotate(45deg);transition:transform .18s}
body.s-faq .text details.frage[open] summary::after{margin-top:11px;transform:rotate(225deg)}
body.s-faq .text details.frage summary:hover h3{color:var(--petrol)}
body.s-faq .text details.frage summary:focus-visible{border-radius:6px}
body.s-faq .text details.frage .antwort{padding:0 2px 6px}
body.s-faq .text details.frage .antwort>:last-child{margin-bottom:22px}
body.s-faq .text details.frage .antwort p{font-size:18px}
body.s-faq .text details.frage .antwort p.knopfzeile{margin-bottom:22px}

/* Mehrere Verweise in einem Kasten der Beitragsleiste (12.09.2026 abends).
   Ein einzelner Verweis bleibt .rlink. */
.rbox ul.rlinks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.rbox ul.rlinks a{font-weight:800;text-decoration:none;color:var(--petrol);font-size:16px;line-height:1.35}
.rbox ul.rlinks a:hover{text-decoration:underline}
.rbox.dunkel ul.rlinks a{color:var(--ink)}

/* Videos mit Zwei-Klick-Einbindung (E7 b, 12.09.2026). Ohne Klick laedt die
   Seite nichts von Google: sichtbar ist ein Vorschaubild vom eigenen Server
   oder eine Karte mit dem Titel. Erst der Klick tauscht den Verweis gegen den
   Player von youtube-nocookie.com. */
.text figure.video{margin:0 0 26px}
.text figure.video .videostart{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none}
.text figure.video .videostart img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.text figure.video .videokarte{display:grid;place-items:center;aspect-ratio:16/9;padding:28px;text-align:center;background:var(--petrol);color:#fff;font-weight:800;font-size:22px;line-height:1.2;letter-spacing:-.02em;border-radius:var(--r)}
.text figure.video .videoknopf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(11,27,31,.72);border:3px solid #fff;transition:background .14s}
.text figure.video .videoknopf::after{content:"";position:absolute;left:30px;top:23px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #fff}
.text figure.video .videostart:hover .videoknopf,.text figure.video .videostart:focus-visible .videoknopf{background:var(--akzent)}
.text figure.video .videostart:hover .videoknopf::after,.text figure.video .videostart:focus-visible .videoknopf::after{border-left-color:var(--akzent-ink)}
.text figure.video figcaption{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-3)}
.text figure.video .videorahmen{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);display:block}

/* Suche: Lupe im Seitenkopf und Hervorhebung in der Trefferliste
   (Entscheidung David, 12.09.2026). Am grossen Bildschirm steht nur das
   Sinnbild, im Klappmenue das Wort daneben; fuer Vorleseprogramme ist das Wort
   immer da. */
nav.main a.lupe{display:inline-flex;align-items:center;gap:10px}
nav.main a.lupe svg{flex:0 0 auto}
@media (min-width:961px){
  nav.main a.lupe{padding:11px 14px}
  nav.main a.lupe .lupenwort{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}
.treffer mark{background:var(--akzent);color:var(--akzent-ink);border-radius:4px;padding:0 2px}

/* Zwei Kaesten nebeneinander (Sekretariat und Naechste Termine auf der
   Startseite): Die Knopfreihe sitzt unten und nicht hinter dem Text, damit
   beide Kaesten ihre Knoepfe auf derselben Linie haben. Vorher lag "Alle
   Termine ansehen" 16 px hoeher (Rueckmeldung David, 12.09.2026). Wo die
   Kaesten nicht gestreckt werden (Bildungsgangseite, align-items:start),
   bleibt die Regel wirkungslos, weil es keinen freien Platz gibt. */
.zwei > .box{display:flex;flex-direction:column}
.zwei > .box > .tel{margin-top:auto}

/* Der voruebergehende Hinweis im Sekretariatskasten (13.09.2026, Entscheidung
   David). Er stand als gewoehnlicher Absatz zwischen Ueberschrift und
   Oeffnungszeiten und ging darin unter. Jetzt abgesetzt: Papiergrund,
   Akzentkante links, Vorzeile in Versalien. Die Absaetze brauchen die drei
   Klassen im Selektor, sonst gewinnt .zwei .box > div > p weiter oben und
   faerbt sie wieder in die graue Nebenschrift. */
.zwei .box > .achtung{margin:0 0 18px;padding:14px 16px 15px;background:var(--papier);border-left:5px solid var(--akzent);border-radius:4px 12px 12px 4px}
.zwei .box > .achtung > p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)}
.zwei .box > .achtung > .achtung-kopf{margin:0 0 5px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--akzent-ink)}

/* Hervorhebung im Seitenkopf: Durchschuss nur dort, wo eine steht
   (12.09.2026). Der Kasten der Hervorhebung ist 1.09em hoch, der
   Durchschuss der Kopfzeilen 1.04 bis 1.06em. Dadurch deckte der Kasten
   die Unterlaengen der Zeile darueber ab, gemessen 0.085em. Mit 1.2
   bleiben 0.075em Luft. Ueberschriften ohne Hervorhebung und alle h2 bis
   h4 bleiben unveraendert; ohne :has() bleibt es beim alten Verhalten. */
.hero h1:has(.hl),
.bgkopf h1:has(.hl),
.bkopf h1:has(.hl),
.seitenkopf h1:has(.hl){line-height:1.2}

/* Verweis in der Zwischenzeile der Abteilungsliste (12.09.2026).
   .ziele a ist die Kachel; der Verweis in .trenn ist keine, deshalb
   werden Hintergrund, Rahmen, Schatten und Polsterung dort
   zurueckgenommen. */
.ziele .trenn a{display:inline;background:none;border:0;border-radius:0;padding:0;box-shadow:none;transition:none;color:inherit;text-decoration:none}
.ziele .trenn a:hover{transform:none;box-shadow:none;text-decoration:underline}

/* Reflow bis 320 px (WCAG 1.4.10, gemessen 12.09.2026). Lange deutsche
   Komposita wie "Ausbildungsvorbereitung" oder "Generalerklaerung" sind in
   Ueberschriftsgroesse breiter als eine 320-px-Spalte und schieben das Raster
   auf. Weil die Seiten lang="de" tragen, trennt der Browser sauber; der
   Umbruch mitten im Wort ist nur die Notbremse. Oberhalb von 520 px bleibt die
   Typografie unangetastet. */
@media (max-width:520px){
  /* overflow-wrap:anywhere statt break-word: Nur anywhere senkt die
     Mindestbreite (min-content) eines Kastens, und genau die schiebt hier die
     Raster auf. hyphens:auto sorgt dafuer, dass zuerst an einer richtigen
     Trennstelle umbrochen wird und der harte Bruch die Ausnahme bleibt. */
  :where(h1,h2,h3,h4){hyphens:auto;overflow-wrap:anywhere}
  :where(p,li,address,figcaption,summary,a,b,strong,td,th){hyphens:auto;overflow-wrap:anywhere}
  .wrap{padding:0 16px}
  footer .cols{grid-template-columns:1fr}
  .kbox ul.zeiten li{flex-wrap:wrap;gap:2px 18px}
  .kontakt{grid-template-columns:minmax(0,1fr)}
  .einstieg .haube{flex-wrap:wrap;gap:14px;padding:20px}
  .einstieg .haube a{white-space:normal}
  .kopf a.mehr{white-space:normal}
  .dl a{padding:16px}
}

/* Textfassung einer Grafik (WCAG 1.1.1, 12.09.2026). Gleiche Sprache wie die
   Fragen der FAQ-Seite: details/summary, kein JavaScript, mit der Tastatur
   bedienbar. */
details.textfassung{margin:18px 0 0;border:2px solid var(--linie);border-radius:14px;background:var(--karte)}
details.textfassung > summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:800;font-size:16.5px;color:var(--petrol)}
details.textfassung > summary::-webkit-details-marker{display:none}
details.textfassung > summary::after{content:"+";float:right;font-weight:800}
details.textfassung[open] > summary::after{content:"\2212"}
details.textfassung > summary:hover{text-decoration:underline}
details.textfassung .text{max-width:none;padding:0 18px 18px}
details.textfassung .text p{font-size:17px;margin:0 0 14px}
details.textfassung .text h3{font-size:18px;margin:18px 0 8px}
details.textfassung .text ul.punkte li{font-size:16.5px}


/* Uebersichtsseite mit rundem Bild rechts im Kopf (13.09.2026). Dieselbe
   Figur wie auf der Startseite und den Bildungsgangseiten; unter 1001 px
   faellt sie wie dort auf ein 16:9-Bild unter dem Text zurueck. */
body.s-kopfbild .seitenkopf .wrap{position:relative;min-height:448px}
body.s-kopfbild .seitenkopf .inner{max-width:23em}
body.s-kopfbild .seitenkopf figure.kreis{margin:0;position:absolute;z-index:2;right:26px;top:26px;width:396px;height:396px;border-radius:50%;overflow:hidden;box-shadow:0 26px 64px rgba(0,0,0,.4)}
body.s-kopfbild .seitenkopf figure.kreis img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
body.s-kopfbild .seitenkopf figure.kreis::after{content:"";position:absolute;inset:0;background:var(--foto-schleier);pointer-events:none}
@media (max-width:1180px){
  body.s-kopfbild .seitenkopf .wrap{min-height:362px}
  body.s-kopfbild .seitenkopf figure.kreis{width:310px;height:310px}
}
@media (max-width:1000px){
  body.s-kopfbild .seitenkopf .wrap{min-height:0}
  body.s-kopfbild .seitenkopf .inner{max-width:34em}
  body.s-kopfbild .seitenkopf figure.kreis{position:static;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r);margin-top:32px;box-shadow:9px 9px 0 var(--akzent)}
  body.s-kopfbild .seitenkopf figure.kreis img{height:auto;aspect-ratio:16/9}
}

/* Bloguebersicht und Blogarchiv (15.09.2026): Die Uebersicht traegt nur noch
   die aktuellen Beitraege und darunter den Verweis ins Archiv. Das Archiv
   (body.s-blogarchiv) zeigt alle Beitraege als Liste: je Zeile Datum und
   Titel, je Jahrgang eine Zwischenueberschrift. Die Zeile ist die
   Trefferliste der Suche in schlicht, damit das Verzeichnis ruhig bleibt. */
.mehrzeile{margin:34px 0 0}
.mehrzeile a.mehr{font-weight:800;text-decoration:none;color:var(--petrol);font-size:17px}
.mehrzeile a.mehr:hover{text-decoration:underline}
h2.jahrgang{font-size:27px;margin:44px 0 16px}
h2.jahrgang:first-child{margin-top:0}
ul.beitragsliste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
ul.beitragsliste a{display:flex;gap:18px;align-items:baseline;background:var(--karte);border:2px solid var(--linie);border-radius:14px;padding:14px 20px;text-decoration:none;transition:border-color .14s,transform .14s}
ul.beitragsliste a:hover{border-color:var(--ink);transform:translate(-2px,-2px)}
ul.beitragsliste time{flex:0 0 auto;font-size:15.5px;font-weight:800;color:var(--petrol);font-variant-numeric:tabular-nums}
ul.beitragsliste .t{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
@media (max-width:560px){
  ul.beitragsliste a{flex-direction:column;gap:4px;align-items:flex-start}
}

/* Chips auf Petrol (Variante C, 13.09.2026; Faktenkacheln, Meta-Pillen, Dublin-Tags,
   Startseiten-Streifen): durchscheinend weiss wie im urspruenglichen D2, statt der
   milchigen Kacheln des Grau. Steht am Ende, weil es die Einzelregeln oben ueberschreibt. */
.hero .strip span,:where(body.s-bildungsgang) .fakten li,.bmeta li,.dublin .tags span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
/* Rubrikpille im Blogkopf: ihr Petrol (--c) saehe auf der Petrol-Flaeche sonst kaum ab. */
.bkopf .pille{box-shadow:0 0 0 2px rgba(255,255,255,.5)}