/* =====================================================================
   MALU – gemeinsames Layout aller Unterseiten (Mustervorlage v2)
   Heller Grund nach WIX-Vorbild, Titelbild im flachen 1900:600-Profil,
   Galerie als Endlosband wie auf der Landingpage.
   Jede Seite liefert nur: Titelbild, Lockup-Werte, Texte, Galerie-Liste.
   ===================================================================== */
@font-face{font-family:"Rift";src:url("../fonts/Rift-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Rift";src:url("../fonts/Rift-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Azo Sans";src:url("../fonts/Azo-Sans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Azo Sans";src:url("../fonts/Azo-Sans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Azo Sans";src:url("../fonts/Azo-Sans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --schwarz:#0d0d0d; --kohle:#17181a; --weiss:#f5f5f2; --grau:#9a9a94;
  --linie:#2a2a28; --gold:#b0812f; --gold-tief:#835c1f;
  --linie-hell:#e3e0d8; --text-dunkel:#3f3f3b;
  --display:"Rift","Arial Narrow",Arial,sans-serif;
  --text:"Azo Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0}
b,strong{font-weight:700}
html{background:#ffffff}
body{background:#ffffff;color:var(--text-dunkel);font:300 15px/1.6 var(--text)}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}

/* Kopfleiste – dunkel wie auf der Landingpage */
header{position:sticky;top:0;z-index:40;background:rgba(13,13,13,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.kopf{display:flex;align-items:center;justify-content:space-between;height:70px}
.kopf img{height:36px;width:auto}
.kopf a.zurueck{font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--grau)}
.kopf a.zurueck:hover{color:var(--weiss)}

/* Titelbild: flaches WIX-Profil 1900:600, in der Höhe beschnitten */
.titelbild{position:relative;overflow:hidden;background:var(--schwarz)}
.titelbild img{width:100%;aspect-ratio:1900/600;max-height:600px;min-height:280px;object-fit:cover}
/* Titel nach WIX-Vorlage: Rift BoldItalic, zentriert, zwei Größen
   (WIX-Leinwand 1900 px: Titel 180 px, Unterzeile 44 px -> 9.47vw / 2.32vw) */
.titelbild .titel{position:absolute;left:0;right:0;bottom:max(4px, calc(clamp(10px,3vw,44px) - 1cm));z-index:2;
  text-align:center;color:#fff;text-transform:uppercase}
.titelbild .titel b{display:block;font:italic 700 clamp(38px,9.47vw,180px)/1 var(--display);letter-spacing:normal}
.titelbild .titel span{display:block;font:italic 700 clamp(15px,2.32vw,44px)/1.4 var(--display);letter-spacing:normal;margin-top:-.1em}

/* Inhalt auf hellem Grund */
main{padding:0}
.bereich{scroll-margin-top:70px}
.bereich .wrap{padding-top:56px}

/* Preisliste (Playground) */
.pt-preise{margin:2rem 0 0;border-top:1px solid var(--linie-hell)}
.pt-preise div{display:flex;justify-content:space-between;gap:16px;padding:11px 2px;border-bottom:1px solid var(--linie-hell)}
.pt-preise span{color:var(--grau);font-size:13px;letter-spacing:.06em}
.pt-preise b{font:700 15px var(--display);letter-spacing:.06em;color:var(--schwarz);white-space:nowrap}
.absatz{font-weight:300;font-size:16.5px;line-height:1.7;color:var(--text-dunkel);margin:0 0 1.15em;text-align:justify;hyphens:auto}
.absatz b{color:var(--schwarz);font-weight:700}
.absatz a{color:var(--gold-tief)}
h2.zwischen{font:700 22px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;margin:2.2rem 0 .9rem;color:var(--schwarz)}

/* Schlagwort-Zeile (dreispaltig) – helle Variante */
.eck{display:flex;gap:0;border-top:1px solid var(--linie-hell);border-bottom:1px solid var(--linie-hell);margin:2.4rem 0 0}
.eck div{flex:1;text-align:center;padding:16px 8px;border-left:1px solid var(--linie-hell)}
.eck div:first-child{border-left:none}
.eck b{display:block;font:700 21px var(--display);letter-spacing:.06em;color:var(--schwarz)}
.eck span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grau)}

/* Stehendes Bildband: drei Bilder in voller Viewportbreite, keine Bewegung */
.bildband{width:100vw;position:relative;left:50%;margin-left:-50vw;margin-top:2.6rem;
  display:flex;gap:12px}
.bildband img{flex:1;min-width:0;aspect-ratio:16/9;object-fit:cover}
@media (max-width:700px){.bildband{flex-direction:column;gap:8px}.bildband img{width:100%}}

/* Mentorenseite: Namens-Lockup, Portrait, Experience-Tabelle */
.mk{display:grid;grid-template-columns:1.2fr .95fr;gap:clamp(44px,6vw,92px);align-items:start;
  padding-top:clamp(56px,7vw,96px);margin-bottom:clamp(40px,5vw,72px)}
.mk .mzitat{margin-top:clamp(3rem,7vw,5.5rem)}
.mk .absatz{margin-top:2.2rem}
.mfoto{margin-top:clamp(48px,9vw,132px)}
/* Lockup wie auf der Landingpage: Goldzeile im Versatz rechts unten, in den Titel ragend */
.mlock{display:inline-block;margin:0}
.mlock .l1{display:block;font:700 clamp(44px,7vw,92px)/normal var(--display);letter-spacing:.02em;
  text-transform:uppercase;color:var(--schwarz);white-space:nowrap;margin-bottom:-.567em}
.mlock .l2{display:block;text-align:right;position:relative;white-space:nowrap;
  font:italic 700 clamp(16px,2.45vw,32px)/1.8 var(--display);
  letter-spacing:.02em;text-transform:uppercase;color:var(--gold-tief)}
/* rechtsversatz-anker (regel 24.08.): letztes wort der goldzeile in .l2x ->
   haengt ueber die rechte titelkante hinaus (wie hero-lockups/experience) */
.mlock .l2 .l2x{position:absolute;left:100%;margin-left:.35em;white-space:nowrap}
.mlock.klein .l1{font-size:clamp(26px,3vw,36px);margin-bottom:-.567em}
.mlock.klein .l2{font-size:clamp(11px,1.05vw,13px);line-height:1.8;position:relative;white-space:nowrap}
/* Ankerpunkt: die Wortgrenze der Goldzeile liegt auf der rechten Titelkante */
.mlock.klein .l2 .l2x{position:absolute;left:100%;margin-left:.35em;white-space:nowrap}
.roadmap .mlock{margin:0 0 1.1rem}
.mzitat{font-style:italic;font-size:clamp(20px,2vw,23px);line-height:1.6;margin:0 0 1.2rem;color:var(--schwarz)}
.mfoto img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.msocial{display:flex;gap:22px;justify-content:center;margin-top:14px}
.msocial a{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grau);text-decoration:none}
.msocial a:hover{color:var(--gold-tief)}
@media (max-width:820px){.mk{grid-template-columns:1fr;gap:28px}}

/* Roadmap: statische Stundenplan-Tabelle (v5: vom Skript befüllt, Layout bleibt) */
.roadmap{margin:2.6rem 0 0}
.roadmap h2{font:700 clamp(26px,3vw,36px)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  color:var(--schwarz);margin:0 0 1.1rem}
.roadmap table{width:100%;border-collapse:collapse;table-layout:fixed}
.roadmap th:first-child{width:26%}
.roadmap th:nth-child(2){width:48%}
.roadmap th:last-child{width:26%}
.roadmap th{font:400 10px var(--text);letter-spacing:.22em;text-transform:uppercase;color:var(--grau);
  padding:8px 6px;text-align:left;border-bottom:1px solid var(--linie-hell)}
.roadmap td{padding:12px 6px;border-bottom:1px solid var(--linie-hell);font-size:14px}
.roadmap td.zeit{white-space:nowrap} /* 24.08.: nicht mehr fett – gleiche schrift wie restliche zellen (ussy) */
.roadmap th:nth-child(2),.roadmap td:nth-child(2){text-align:center}
.roadmap th:last-child,.roadmap td:last-child{text-align:right}
.roadmap a{color:var(--gold-tief);text-decoration:none}
.roadmap a:hover{text-decoration:underline}
.roadmap .stand{font-size:10.5px;color:var(--grau);margin-top:8px;letter-spacing:.06em}
@media (max-width:640px){.roadmap th,.roadmap td{padding:9px 4px;font-size:12.5px}
/* hochformat handy (24.08.2026): fester umbruch nach dem wochentag-beistrich
   (uhrzeit als eigener block, in sich unumbrechbar), kopfzeile enger gesperrt */
.roadmap td.zeit{white-space:normal}
.roadmap td.zeit .uhr{display:block;white-space:nowrap}
.roadmap th{letter-spacing:.12em}}

/* Abschluss-CTAs – dunkle Variante auf hellem Grund */
.seiten-cta{display:flex;gap:12px;flex-wrap:wrap;margin:2.8rem 0;justify-content:center}
.cta{display:inline-block;border:1px solid var(--schwarz);color:var(--schwarz);text-decoration:none;background:transparent;
  padding:.85rem 1.8rem;font:400 12px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.2s}
.cta:hover{background:var(--schwarz);color:var(--weiss)}
.cta.voll{background:var(--schwarz);color:var(--weiss)}
.cta.voll:hover{background:transparent;color:var(--schwarz)}

/* Fußzeile – 1:1 von der Landingpage (dunkler Grund kommt aus dem Seitenkontext dazu) */
footer{background:var(--schwarz);border-top:1px solid var(--linie);padding:34px 0 24px;font-size:10.5px;color:var(--grau)}
footer .flogo{display:block;height:46px;width:auto;margin:0 auto 14px}
footer .fzeile{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:20px}
footer .fzeile div{text-align:center;font-weight:300}
footer a{color:inherit;text-decoration:none;font-weight:300;justify-self:start}
footer a:hover{color:var(--weiss)}
footer .cknopf{background:none;border:none;color:inherit;font:inherit;font-weight:300;cursor:pointer;padding:0;justify-self:end;text-decoration:none}
footer .cknopf:hover{color:var(--weiss)}
@media (max-width:700px){footer .fzeile{grid-template-columns:1fr;justify-items:center;gap:8px}
  footer a,footer .cknopf{justify-self:center}}

@media (max-width:640px){.eck{flex-wrap:wrap}.eck div{min-width:45%;border-left:none;border-top:1px solid var(--linie-hell)}.eck div:first-child{border-top:none}}

/* roadmap-variante der kursseiten: vier spalten, linksbündig (19.08.2026) */
.roadmap table.vier th:nth-child(1),.roadmap table.vier td:nth-child(1){width:16%}
.roadmap table.vier th:nth-child(2),.roadmap table.vier td:nth-child(2){width:34%}
.roadmap table.vier th:nth-child(3),.roadmap table.vier td:nth-child(3){width:27%}
.roadmap table.vier th:nth-child(4),.roadmap table.vier td:nth-child(4){width:23%}
.roadmap table.vier th,.roadmap table.vier td{text-align:left}
/* hochformat handy (24.08.2026): spalte 1 minimal breiter, damit "spielplatz"
   nicht anschneidet; steht bewusst NACH den vier-basisbreiten (quellordnung) */
@media (max-width:640px){
.roadmap table.vier th:nth-child(1),.roadmap table.vier td:nth-child(1){width:18%}
.roadmap table.vier th:nth-child(2),.roadmap table.vier td:nth-child(2){width:33%}
.roadmap table.vier th:nth-child(3),.roadmap table.vier td:nth-child(3){width:26%}
.roadmap table.vier th:nth-child(4),.roadmap table.vier td:nth-child(4){width:23%}}