/* ==========================================================================
   Go West Global Recruitment GmbH — Website v2 „Schulheft" (05.10.2026)
   Gestaltung nach 0.7_PRODUKT/07_CI_MARKE.md Teil 3
   Papier traegt · Tinte schreibt · Rot markiert · Gold streicht an.
   Farben weiter nur aus dem Logo: Rot #E11C09 · Gold #F29B1D · Schwarz #0D0B1A.
   Keine Verlaeufe, keine Schlagschatten, keine Kacheln mit Farbkante.
   Schriften liegen im eigenen Ordner (assets/schrift) — keine Fremdquelle, keine Cookies.
   ========================================================================== */

@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("schrift/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("schrift/atkinson-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --rot:#E11C09; --rot-text:#C41707; --rot-dunkel:#A81305; --rot-weich:#FBE7E2;
  --gold:#F29B1D; --gold-hell:#FBEDCB; --gold-text:#7D4A00;
  --schwarz:#0D0B1A; --tinte:#17141F; --grau:#5F5966; --text-2:#454050;
  --papier:#FBF8F2; --grau-hell:#F3EDE1; --weiss:#FFFEFB;
  --rand:#E2DACB; --linie:#EAE3D6; --rand-stark:#CFC5B3;
  --gruen:#17734E; --gruen-weich:#DCEFE3;
  --r-s:12px; --r-m:16px; --r-l:26px;
  --takt:cubic-bezier(.2,.8,.2,1);
  --breit:1160px;
  --titel:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Atkinson Hyperlegible Next","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,
         "Noto Sans Arabic",Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--text); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--titel);font-weight:540;letter-spacing:-.02em;margin:0 0 .5em;
  text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(36px,5.6vw,68px);line-height:1.03;letter-spacing:-.028em}
h2{font-size:clamp(28px,3.5vw,44px);line-height:1.08;max-width:24ch}
h3{font-size:22px;line-height:1.2;letter-spacing:-.012em}
p{margin:0 0 1em;text-wrap:pretty}
strong,b{font-weight:700}
a{color:var(--rot-text);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--gold-hell);color:var(--tinte)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:6px}
.mitte{max-width:var(--breit);margin:0 auto;padding:0 28px}
.eng{max-width:62ch}
.klein{font-size:14px;color:var(--grau)}

/* Arabisch: Systemschrift, keine verengte Laufweite (sie zerreisst die Buchstabenverbindungen) */
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{
  font-family:var(--text);font-weight:700;letter-spacing:0;line-height:1.3;hyphens:manual}

/* ---------- Fahne + Kopf ---------- */
.fahne{display:flex;height:3px}
.fahne i{flex:1}
.fahne i:nth-child(1){background:var(--schwarz)}
.fahne i:nth-child(2){background:var(--rot)}
.fahne i:nth-child(3){background:var(--gold)}
/* Kopf reinweiss: das Logo ist ein Bild mit weissem Grund */
header.kopf{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linie)}
.kopf .mitte{display:flex;align-items:center;gap:12px 24px;padding-top:12px;padding-bottom:12px;max-width:1360px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.marke img{height:42px;width:auto;display:block}
.marke .zusatz{font-size:12.5px;color:var(--rot-text);font-weight:700;letter-spacing:.14em;
  border-inline-start:1px solid var(--rand-stark);padding-inline-start:12px}
nav.haupt{display:flex;gap:4px;margin-inline-end:auto}
nav.haupt a{color:var(--tinte);text-decoration:none;font-size:16px;font-weight:500;
  padding:8px 12px;border-radius:999px;white-space:nowrap;transition:background-color .18s var(--takt)}
nav.haupt a:hover{background:var(--grau-hell)}
nav.haupt a[aria-current]{background:var(--tinte);color:#fff}
.kopf-rechts{display:flex;align-items:center;gap:16px;flex:none}
.sprachen{font-size:13.5px;color:var(--rand-stark);font-weight:600;white-space:nowrap}
.sprachen a{color:var(--grau);text-decoration:none;padding:4px 3px}
.sprachen a:hover{color:var(--tinte)}
.sprachen a.an{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--rot);
  text-decoration-thickness:2px;text-underline-offset:5px}
.tel{font-size:15px;color:var(--tinte);text-decoration:none;font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tel:hover{color:var(--rot-text)}
.menue-knopf{display:none;background:none;border:1.5px solid var(--rand-stark);border-radius:999px;
  padding:8px 16px;font:inherit;font-size:15px;font-weight:600;color:var(--tinte);cursor:pointer}
.menue-knopf[aria-expanded=true]{background:var(--tinte);border-color:var(--tinte);color:#fff}

/* ---------- Knoepfe ---------- */
.knopf{display:inline-block;background:var(--tinte);color:#fff;border:0;border-radius:999px;
  padding:15px 28px;font-weight:600;font-size:16.5px;line-height:1.25;text-decoration:none;cursor:pointer;
  font-family:inherit;margin-block:4px;
  transition:background-color .18s var(--takt),border-color .18s var(--takt),transform .12s var(--takt)}
.knopf:hover{background:#322C3F}
.knopf:active{transform:translateY(1px) scale(.99)}
.knopf.rot{background:var(--rot);color:#fff}
.knopf.rot:hover{background:var(--rot-dunkel)}
.knopf.linie{background:transparent;color:var(--tinte);border:1.5px solid var(--rand-stark);padding:13.5px 26px}
.knopf.linie:hover{border-color:var(--tinte);background:rgba(23,20,31,.04)}
.knopf.klein{padding:10px 20px;font-size:15px;margin-block:0}

/* ---------- Held ---------- */
.held{padding:clamp(56px,9vw,112px) 0 clamp(48px,7vw,88px)}
.held.warm{background:linear-gradient(180deg,#F6ECD6 0%,var(--papier) 100%)}
.held h1{max-width:19ch;margin-bottom:.42em}
.held h1 em{font-style:normal;color:var(--rot-text)}
.held h1 .strich{background-image:linear-gradient(transparent 60%,rgba(242,155,29,.5) 60%,rgba(242,155,29,.5) 92%,transparent 92%);
  padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.held .vor{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--grau);font-weight:600;margin-bottom:22px}
.held .vor::before{content:"";width:32px;height:2px;background:var(--rot);flex:none}
.held p.unter{font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--text-2);max-width:56ch;margin-bottom:32px}

/* ---------- Abschnitte ---------- */
section{padding:clamp(56px,8vw,104px) 0}
section.grau{background:var(--grau-hell)}
section .lead{color:var(--grau);max-width:60ch;font-size:19px;line-height:1.55;margin-bottom:44px}

/* Karten sind keine Kaesten mehr: eine Spalte unter einer Linie */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:44px 36px}
/* genau vier Karten: zwei mal zwei statt drei und eine einzelne */
@media(min-width:640px) and (max-width:1199px){
  .karten:has(> :nth-child(4):last-child){grid-template-columns:1fr 1fr}
}
.karte{border-top:1.5px solid var(--rand-stark);padding-top:20px;position:relative}
.karte.r{border-top-color:var(--rot)}
.karte.s{border-top-color:var(--tinte)}
.karte.gruen{border-top-color:var(--gruen)}
.karte h3{margin-bottom:10px}
.karte p{color:var(--text-2);font-size:16.5px}
.karte p:last-child{margin-bottom:0}
.karte .nr{display:block;font-family:var(--titel);font-size:44px;line-height:1;font-weight:400;
  color:var(--rot-text);margin-bottom:14px;font-variant-numeric:lining-nums}

/* ---------- Tueren ---------- */
.tueren{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tuer{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--r-l);
  padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start}
.tuer.b{background:var(--gold-hell);border-color:transparent}
.tuer .zielgruppe{font-size:14px;color:var(--grau);font-weight:600}
.tuer.b .zielgruppe{color:var(--gold-text)}
.tuer h2{margin:10px 0 6px;font-size:clamp(28px,3vw,38px)}
.tuer ul{margin:18px 0 32px;padding:0;list-style:none;color:var(--text-2);flex:1;align-self:stretch}
.tuer li{padding:12px 0;border-top:1px solid rgba(23,20,31,.1)}
.tuer li:last-child{border-bottom:1px solid rgba(23,20,31,.1)}

/* ---------- Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.zahl{border-top:1.5px solid var(--tinte);padding-top:18px}
.zahl b{display:block;font-family:var(--titel);font-size:clamp(56px,7vw,92px);line-height:.95;font-weight:400;
  letter-spacing:-.03em;color:var(--tinte)}
.zahl span{font-size:16.5px;color:var(--grau);display:block;margin-top:14px;max-width:28ch}

/* ---------- Preiskasten ---------- */
.preis{border:1px solid var(--rand);border-radius:var(--r-l);padding:clamp(24px,3.4vw,40px);
  background:var(--weiss);max-width:700px}
.preis .marke-neu{display:inline-block;background:var(--tinte);color:#fff;font-size:12.5px;font-weight:700;
  letter-spacing:.07em;padding:5px 11px;border-radius:6px}
.preis .gross{font-family:var(--titel);font-size:clamp(28px,3.4vw,40px);line-height:1.1;font-weight:540;
  margin:16px 0 12px;letter-spacing:-.02em}
.preis .gross span{color:var(--rot-text)}
.preis .zusatz{background:var(--gold-hell);padding:14px 18px;border-radius:var(--r-s);font-size:15.5px;margin-top:18px}

/* ---------- Hinweise, Zitate ---------- */
.hinweis{background:var(--gold-hell);padding:18px 22px;border-radius:var(--r-m);margin:28px 0;max-width:78ch}
.hinweis.rot{background:var(--rot-weich)}
.zitat{font-family:var(--titel);font-size:clamp(24px,3vw,36px);line-height:1.2;font-weight:480;
  letter-spacing:-.018em;max-width:26ch;text-wrap:balance}
.zitat::before{content:"";display:block;width:48px;height:3px;background:var(--rot);margin-bottom:22px}

/* ---------- Streifen: ein roter Block, kein Band ueber die ganze Breite ---------- */
.streifen{background:var(--papier);padding:24px 20px clamp(56px,8vw,104px)}
.streifen .mitte{max-width:calc(var(--breit) - 56px);background:var(--rot);color:#fff;border-radius:var(--r-l);
  padding:clamp(32px,5vw,56px);display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap}
.streifen b{font-family:var(--titel);font-size:clamp(24px,3vw,36px);line-height:1.15;font-weight:500;
  letter-spacing:-.02em;max-width:22ch}
.streifen .knopf{background:#fff;color:var(--tinte)}
.streifen .knopf:hover{background:var(--gold-hell)}

/* ---------- Fragen (Aufklapp): Liste mit Linien statt Kaesten ---------- */
details.frage{border-top:1px solid var(--rand-stark);max-width:860px}
details.frage:last-of-type{border-bottom:1px solid var(--rand-stark)}
details.frage summary{cursor:pointer;padding:22px 0;padding-inline-end:48px;font-weight:600;font-size:18.5px;
  line-height:1.35;list-style:none;position:relative;transition:color .18s var(--takt)}
details.frage summary:hover{color:var(--rot-text)}
details.frage summary::-webkit-details-marker{display:none}
details.frage summary::before,details.frage summary::after{content:"";position:absolute;inset-inline-end:6px;top:50%;
  width:16px;height:2px;margin-top:-1px;background:var(--tinte);border-radius:2px;transition:transform .25s var(--takt)}
details.frage summary::after{transform:rotate(90deg)}
details.frage[open] summary::after{transform:rotate(0)}
details.frage .antwort{padding:0 0 24px;color:var(--text-2);max-width:68ch}

/* ---------- Formular ---------- */
form.karte-form{border:1px solid var(--rand);border-radius:var(--r-l);padding:clamp(22px,3.4vw,40px);
  background:var(--weiss);max-width:720px}
label{display:block;font-weight:600;font-size:15px;margin:18px 0 7px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;border:1.5px solid var(--rand-stark);border-radius:var(--r-s);padding:13px 15px;
  font:inherit;font-size:16.5px;background:var(--papier);color:var(--tinte);
  transition:border-color .18s var(--takt),box-shadow .18s var(--takt)}
input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,select:hover,textarea:hover{border-color:var(--grau)}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--tinte);box-shadow:0 0 0 4px var(--gold-hell);background:#fff}
input::placeholder,textarea::placeholder{color:#8D8794}
input[type=checkbox],input[type=radio]{accent-color:var(--rot);width:18px;height:18px}
textarea{min-height:130px;resize:vertical}
.pflicht{color:var(--rot-text)}
/* Falle fuer Roboter: unsichtbar, aber ohne die Seite zu verbreitern
   (left:-9999px machte arabische Seiten 10.000 Pixel breit) */
.honig{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.fehler{background:var(--rot-weich);color:#7E0F04;border-radius:var(--r-s);padding:14px 18px;margin:18px 0 0;font-weight:600}
.fehler ul{margin:6px 0 0;padding-inline-start:20px;font-weight:400}
[aria-invalid=true]{border-color:var(--rot) !important}

/* ---------- Tabellen: nur waagerechte Linien ---------- */
table{width:100%;border-collapse:collapse;margin:28px 0;font-size:16px}
th,td{padding:16px 20px 16px 0;text-align:start;vertical-align:top;border-bottom:1px solid var(--rand)}
th:last-child,td:last-child{padding-inline-end:0}
th{font-size:14px;font-weight:600;color:var(--grau);border-bottom:1.5px solid var(--tinte);padding-bottom:10px}
td:first-child strong{font-family:var(--titel);font-size:20px;font-weight:540}
td.null{color:var(--gruen);font-weight:700}
td.selbst{color:var(--rot-text);font-weight:700}

/* ---------- Fuss ---------- */
footer{background:var(--schwarz);color:#B4AEBD;padding:72px 0 32px;font-size:15px;line-height:1.75}
footer .spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px}
footer b{color:#fff;display:block;margin-bottom:10px;font-family:var(--titel);font-weight:500;font-size:18px}
footer a{color:#E4DFEA;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--gold)}
footer .unten{margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}

/* ---------- Quelle und Stand ---------- */
.quelle{font-size:14px;color:var(--grau);margin:12px 0 0}
.quelle a{color:var(--grau)}
.quelle a:hover{color:var(--rot-text)}
.stand{display:inline-block;border:1px solid var(--rand-stark);border-radius:6px;padding:3px 10px;
  font-size:13.5px;color:var(--grau);font-weight:600}
.amtlich{background:var(--rot-weich);padding:16px 20px;border-radius:var(--r-m);margin:24px 0;font-size:15.5px;max-width:78ch}

/* ---------- Wegstrecke (die Stufen) ---------- */
.weg{list-style:none;padding:0;margin:32px 0;position:relative;max-width:820px}
.weg::before{content:"";position:absolute;inset-inline-start:21px;top:12px;bottom:12px;width:1.5px;background:var(--rand-stark)}
.weg li{position:relative;padding:0 0 36px;padding-inline-start:72px;margin:0}
.weg li:last-child{padding-bottom:0}
.weg .punkt{position:absolute;inset-inline-start:0;top:0;width:44px;height:44px;border-radius:50%;
  background:var(--tinte);color:#fff;font-family:var(--titel);font-weight:500;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  box-shadow:0 0 0 6px var(--papier)}
section.grau .weg .punkt{box-shadow:0 0 0 6px var(--grau-hell)}
.weg h3{margin:7px 0 8px}
.weg .dauer{display:inline-block;background:var(--gold-hell);border-radius:6px;padding:3px 10px;
  font-size:14px;font-weight:700;color:var(--gold-text);margin-bottom:10px}
.weg p{margin:0 0 .6em;color:var(--text-2)}
.weg p:last-child{margin-bottom:0}

/* ---------- Papierliste zum Ausdrucken ---------- */
.papiere{list-style:none;padding:0;margin:24px 0;max-width:820px}
.papiere li{position:relative;padding:15px 0;padding-inline-start:42px;border-bottom:1px solid var(--rand)}
.papiere li:first-child{border-top:1px solid var(--rand)}
.papiere li::before{content:"";position:absolute;inset-inline-start:2px;top:18px;width:20px;height:20px;
  border:1.5px solid var(--grau);border-radius:5px;background:var(--weiss)}
.papiere b{display:block}
.papiere span{font-size:15px;color:var(--grau)}
.drucken{background:none;border:1.5px solid var(--rand-stark);border-radius:999px;
  padding:10px 20px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;color:var(--tinte);
  transition:border-color .18s var(--takt),background-color .18s var(--takt)}
.drucken:hover{border-color:var(--tinte);background:rgba(23,20,31,.04)}

/* ---------- Werkzeug Vermittler-Check ---------- */
.pruef-frage{border:1px solid var(--rand);border-radius:var(--r-m);padding:22px 24px;
  margin-bottom:12px;background:var(--weiss);max-width:820px}
.pruef-frage p{margin:0 0 14px;font-weight:600;font-size:18px;line-height:1.4}
.pruef-frage .wahl{display:flex;gap:10px;flex-wrap:wrap}
.pruef-frage .wahl label{display:inline-flex;align-items:center;gap:9px;margin:0;
  border:1.5px solid var(--rand-stark);border-radius:999px;padding:9px 20px;cursor:pointer;
  font-weight:600;font-size:16px;background:var(--papier);
  transition:border-color .18s var(--takt),background-color .18s var(--takt),color .18s var(--takt)}
.pruef-frage .wahl input{margin:0}
.pruef-frage .wahl label:hover{border-color:var(--tinte)}
.pruef-frage .wahl label:has(input:checked){background:var(--tinte);border-color:var(--tinte);color:#fff}
.ergebnis{border:1.5px solid var(--rand-stark);border-radius:var(--r-l);padding:clamp(22px,3vw,34px);
  background:var(--weiss);margin-top:24px;max-width:820px}
.ergebnis.gut{border-color:var(--gruen);background:var(--gruen-weich)}
.ergebnis.achtung{border-color:var(--gold);background:var(--gold-hell)}
.ergebnis.gefahr{border-color:var(--rot);background:var(--rot-weich)}
.ergebnis h3{margin-bottom:10px;font-size:26px}

/* ---------- Sprachband ueber den Laenderseiten ---------- */
.band{background:var(--grau-hell);color:var(--grau);font-size:14.5px;padding:9px 20px;text-align:center;
  border-bottom:1px solid var(--linie)}
.band a{color:var(--tinte);font-weight:600}

/* ---------- Schmale Fenster ---------- */
@media(max-width:1240px){
  .kopf .mitte{flex-wrap:wrap}
  .kopf-rechts{display:contents}
  .tel{display:none}
  .sprachen{order:2;margin-inline-start:auto}
  .menue-knopf{display:block;order:3}
  nav.haupt{display:none;order:4;width:100%;flex-direction:column;gap:2px;margin:0;padding:6px 0 4px;
    border-top:1px solid var(--linie)}
  nav.haupt.offen{display:flex}
  nav.haupt a{padding:12px 4px;border-radius:8px;font-size:17px;white-space:normal}
  .kopf-rechts .knopf{display:none;order:5;width:100%;text-align:center;margin-bottom:6px}
  nav.haupt.offen ~ .kopf-rechts .knopf{display:block}
}
@media(max-width:900px){
  body{font-size:16.5px}
  .tueren{grid-template-columns:1fr}
  .zahlen{grid-template-columns:1fr;gap:28px}
  .zwei{grid-template-columns:1fr}
  .mitte{padding:0 20px}
  .karten{gap:32px 28px}
  .marke img{height:36px}
  .kopf .mitte{gap:10px 14px}
  .held .knopf,.preis .knopf,.tuer .knopf,form .knopf{display:block;text-align:center;margin-inline:0 !important}
  .tuer .knopf{align-self:stretch}
  .streifen{padding-inline:12px}
  .streifen .knopf{width:100%;text-align:center}
  /* breite Tabellen: seitlich wischen statt die Seite sprengen */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{min-width:132px}
}
@media(max-width:480px){
  .marke .zusatz{display:none}
  .sprachen{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}
@media print{
  header.kopf,.streifen,.menue-knopf,.drucken,.pruef-frage .wahl,footer,.band{display:none}
  body{font-size:11pt;background:#fff}
  section{padding:18pt 0}
  section.grau,.held.warm{background:none}
  .papiere li::before{border-color:#666}
  .weg .punkt{box-shadow:none}
}


/* ==========================================================================
   RICHTUNG D „MENSCHEN" (05.10.2026) — nach Entwurfsbild 1, von Matthias gewaehlt.
   Hell und freundlich: Weiss traegt, Rot fuehrt, grosse fette Titel, Menschen im Bild.
   Betriebe stehen vorn: erster Wegweiser in der Buehne, eigener dunkler Block direkt darunter.
   Ueberschreibt die Grundlage oben.
   ========================================================================== */
@font-face{
  font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("schrift/outfit-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --rot-text:#D0200D; --rot-dunkel:#B81706; --rot-weich:#FDE9E5;
  --gold-hell:#FFF2D9; --gold-text:#7D4A00;
  --tinte:#19181D; --grau:#5E5D66; --text-2:#3E3D46;
  --papier:#FFFFFF; --grau-hell:#F6F6F8; --weiss:#FFFFFF;
  --rand:#E7E7EC; --linie:#EEEEF2; --rand-stark:#D0D0D8;
  --r-s:10px; --r-m:16px; --r-l:22px;
  --takt:cubic-bezier(.2,.8,.2,1);
  --breit:1240px;
  --schatten:0 1px 2px rgba(25,24,29,.04),0 14px 36px -18px rgba(25,24,29,.18);
  --titel:"Outfit","Segoe UI",-apple-system,Arial,sans-serif;
}
h1,h2,h3{font-weight:800;letter-spacing:-.03em}
h1{font-size:clamp(38px,5.2vw,70px);line-height:1.02}
h2{font-size:clamp(30px,3.6vw,48px);line-height:1.06;max-width:22ch}
h3{font-size:21px;font-weight:700;letter-spacing:-.015em}

/* ---------- Kopf ---------- */
nav.haupt a{font-weight:600}
nav.haupt a.betriebe{border:1.5px solid var(--tinte);padding:7px 14px}
nav.haupt a.betriebe:hover{background:var(--tinte);color:#fff}

/* ---------- Knoepfe: Rechteck mit weicher Ecke, wie im Entwurf ---------- */
.knopf{border-radius:12px;font-weight:700;padding:16px 26px;
  transition:background-color .2s var(--takt),transform .2s var(--takt),box-shadow .2s var(--takt),border-color .2s var(--takt)}
.knopf:hover{transform:translateY(-1px)}
.knopf.rot{box-shadow:0 12px 26px -14px var(--rot)}
.knopf.linie{border-radius:12px}
.knopf.klein{border-radius:10px;padding:11px 18px}
.knopf .pfeil{display:inline-block;margin-inline-start:8px;transition:transform .2s var(--takt)}
.knopf:hover .pfeil{transform:translateX(4px)}
.menue-knopf,.drucken{border-radius:10px}

/* ---------- Held der Unterseiten ---------- */
.held.warm,.held{background:linear-gradient(180deg,#FFF4EE 0%,#fff 100%)}
.held h1 em{color:var(--rot-text)}
.held .vor::before{height:3px;border-radius:2px}

/* ---------- Abschnitte, Karten ---------- */
section.grau{background:var(--grau-hell)}
.karten{gap:18px}
.karte,.karte.r,.karte.s,.karte.gruen{border:1px solid var(--rand);border-radius:var(--r-l);padding:26px;background:#fff;
  box-shadow:var(--schatten);transition:transform .25s var(--takt),box-shadow .25s var(--takt)}
.karte:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(25,24,29,.05),0 22px 44px -20px rgba(25,24,29,.26)}
.karte::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--gold);margin-bottom:16px}
.karte.r::before{background:var(--rot)}
.karte.s::before{background:var(--tinte)}
.karte.gruen::before{background:var(--gruen)}
.karte .nr{font-family:var(--titel);font-weight:800;color:var(--rot-text)}
.tuer{border-radius:var(--r-l);box-shadow:var(--schatten)}
.tuer.b{background:#FFF4EE}
.zahl b{font-weight:800;letter-spacing:-.05em;color:var(--rot-text)}
.zahl{border-top:3px solid var(--tinte)}
.preis{box-shadow:var(--schatten);border-radius:var(--r-l)}
.preis .marke-neu{background:var(--rot);border-radius:8px}
.preis .gross,.zitat,.streifen b{font-weight:800;letter-spacing:-.03em}
.streifen .mitte{border-radius:var(--r-l)}
.streifen .knopf{border-radius:12px}
form.karte-form,.pruef-frage,.ergebnis{border-radius:var(--r-l);box-shadow:var(--schatten)}
.pruef-frage .wahl label{border-radius:10px}
.weg .punkt{background:var(--rot);font-weight:800;border-radius:14px}
td:first-child strong{font-weight:800}
footer b{font-weight:700}

/* ==========================================================================
   STARTSEITE
   ========================================================================== */
/* ---------- Buehne: Text links, Menschen rechts ---------- */
.buehne{position:relative;overflow:hidden;padding:clamp(36px,5vw,72px) 0 clamp(40px,5vw,72px);
  background:#F2F4EF}
.buehne .mitte{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(24px,4vw,64px);align-items:center}
.buehne h1{font-size:clamp(34px,4.3vw,58px);line-height:1.04;margin-bottom:.4em}
.buehne h1 em{font-style:normal;color:var(--rot-text)}
.buehne .unter{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--text-2);max-width:46ch;margin-bottom:28px}
.buehne-bild{position:relative;margin:0}
/* Das Foto hat denselben Grund wie die Buehne; die Raender laufen weich aus, damit kein Kasten entsteht */
.buehne-bild img{display:block;width:126%;max-width:none;margin-inline:-13%;height:auto;aspect-ratio:1400/939;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%);
  mask-composite:intersect}
.buehne{padding-bottom:0}
.buehne .mitte{align-items:end}
.buehne .mitte > div{padding-bottom:clamp(40px,5vw,72px)}
.marke-chip{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:12px 16px;
  font-size:15px;font-weight:700;color:var(--tinte);box-shadow:0 18px 40px -18px rgba(25,24,29,.45)}
.marke-chip i{width:10px;height:10px;border-radius:50%;background:var(--rot);flex:none}
.marke-chip.eins{inset-inline-start:-4%;bottom:14%}
.marke-chip.zwei{inset-inline-end:-2%;bottom:40%}
.marke-chip.zwei i{background:var(--gold)}

/* ---------- Fotos in den Abschnitten ---------- */
.foto{display:block;width:100%;height:auto;border-radius:var(--r-l);object-fit:cover}
.betriebe .foto{aspect-ratio:16/9;margin-bottom:12px;border-radius:18px}
.kopf-mit-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:40px}
.kopf-mit-foto .lead{margin-bottom:0}
.kopf-mit-foto .foto{aspect-ratio:16/10;box-shadow:var(--schatten)}
.unterschied{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.unterschied .foto{height:100%;min-height:320px;box-shadow:var(--schatten)}
.unterschied .karten{grid-template-columns:1fr 1fr}
.ki-vermerk{font-size:12px;color:#8E8A99}

/* ---------- Wegweiser: zwei grosse Tasten, Betriebe zuerst ---------- */
.wegweiser{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px}
.wegweiser a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;text-decoration:none;
  border-radius:16px;padding:18px 20px;color:#fff;background:var(--tinte);
  transition:transform .2s var(--takt),box-shadow .2s var(--takt),background-color .2s var(--takt)}
.wegweiser a.rot{background:var(--rot);box-shadow:0 16px 34px -18px var(--rot)}
.wegweiser a:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(25,24,29,.6)}
.wegweiser a.rot:hover{background:var(--rot-dunkel)}
.wegweiser small{grid-column:1;font-size:13px;font-weight:600;opacity:.82}
.wegweiser b{grid-column:1;font-family:var(--titel);font-size:21px;font-weight:700;line-height:1.15;letter-spacing:-.015em}
.wegweiser .pfeil{grid-column:2;grid-row:1 / span 2;font-size:24px;transition:transform .2s var(--takt)}
.wegweiser a:hover .pfeil{transform:translateX(5px)}

/* ---------- Betriebe: eigener dunkler Block direkt unter der Buehne ---------- */
.betriebe{padding:0 20px;background:var(--papier)}
.betriebe .mitte{max-width:calc(var(--breit) - 56px);background:var(--schwarz);color:#fff;border-radius:28px;
  padding:clamp(28px,4.4vw,60px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center}
.betriebe .marke-b{display:inline-block;background:var(--gold);color:var(--schwarz);font-size:13px;font-weight:800;
  letter-spacing:.06em;padding:6px 12px;border-radius:8px;margin-bottom:18px}
.betriebe h2{color:#fff;margin-bottom:.4em}
.betriebe ul{list-style:none;padding:0;margin:0 0 28px;color:#DDDBE4}
.betriebe li{position:relative;padding:9px 0;padding-inline-start:30px}
.betriebe li::before{content:"";position:absolute;inset-inline-start:2px;top:16px;width:14px;height:8px;
  border-left:3px solid var(--gold);border-bottom:3px solid var(--gold);transform:rotate(-45deg)}
.betriebe li strong{color:#fff}
.betriebe .knopf{background:#fff;color:var(--schwarz)}
.betriebe .knopf:hover{background:var(--gold-hell)}
.betriebe .knopf.linie{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.betriebe .knopf.linie:hover{background:rgba(255,255,255,.1);border-color:#fff}
.branchen{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.branchen a{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:132px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;
  transition:background-color .2s var(--takt),transform .2s var(--takt),border-color .2s var(--takt)}
.branchen a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);transform:translateY(-3px)}
.branchen b{font-family:var(--titel);font-size:20px;font-weight:700;line-height:1.15}
.branchen span{font-size:14px;color:#BDB9C8}

/* ---------- Stufenkarten A1 bis B2 ---------- */
.stufenkarten{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.stufenkarte{background:#fff;border:1px solid var(--rand);border-radius:var(--r-l);padding:24px;box-shadow:var(--schatten)}
.stufenkarte .rund{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--rot);color:#fff;
  font-family:var(--titel);font-weight:800;font-size:24px;margin-bottom:18px}
.stufenkarte:nth-child(even) .rund{background:var(--gold);color:var(--schwarz)}
.stufenkarte h3{margin-bottom:8px}
.stufenkarte p{color:var(--text-2);font-size:16px;margin-bottom:12px}
.stufenkarte .ziel{color:var(--grau);font-size:14px;margin:0}

/* ---------- Held mit Foto (Akademie-Seiten in vier Sprachen) ---------- */
.held.mit-foto .mitte{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:clamp(24px,4vw,64px);align-items:start}
.held.mit-foto .mitte > *{grid-column:1}
.held.mit-foto h1{font-size:clamp(30px,3.6vw,50px);line-height:1.05}
.held.mit-foto .held-foto{grid-column:2;grid-row:1 / span 12;margin:0;position:sticky;top:104px}
.held.mit-foto .held-foto .foto{aspect-ratio:4/5;box-shadow:0 30px 70px -34px rgba(208,32,13,.5)}
@media(max-width:1000px){
  .held.mit-foto .mitte{display:block}
  .held.mit-foto .held-foto{position:static;margin:0 0 28px}
  .held.mit-foto .held-foto .foto{aspect-ratio:16/10}
}

/* ---------- Einblenden beim Scrollen (Klassen setzt seite.js) ---------- */
.zeig{opacity:0;transform:translateY(26px);transition:opacity .7s var(--takt),transform .7s var(--takt);transition-delay:var(--warte,0ms)}
.zeig.da{opacity:1;transform:none}

@media(max-width:1000px){
  .buehne .mitte{grid-template-columns:1fr}
  .buehne .mitte > div{padding-bottom:8px}
  .kopf-mit-foto,.unterschied{grid-template-columns:1fr}
  .unterschied .foto{min-height:0;aspect-ratio:16/10}
  .betriebe .mitte{grid-template-columns:1fr}
  .stufenkarten{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .wegweiser{grid-template-columns:1fr}
  .branchen a{min-height:112px;padding:16px}
  .branchen b{font-size:18px}
  .stufenkarten{grid-template-columns:1fr}
  .betriebe{padding:0 12px}
  .unterschied .karten{grid-template-columns:1fr}
  .buehne-bild img{width:112%;margin-inline:-6%}
  .marke-chip.eins{inset-inline-start:0}
  .marke-chip.zwei{inset-inline-end:0}
  .marke-chip{font-size:13px;padding:9px 12px}
}
@media (prefers-reduced-motion: reduce){ .zeig{opacity:1;transform:none} }
@media print{ .zeig{opacity:1;transform:none} .betriebe .mitte{background:none;color:#000} .betriebe h2{color:#000} }