/* ============================================================
   MSGC — Stylesheet
   Designsprache übernommen von hm.wuensche.io
   Tokens, Typografie, Keil-Hero und Kartenmuster sind dort entnommen.
   ============================================================ */

@font-face{font-family:Gelasio;font-style:normal;font-weight:400;font-display:swap;
  src:url(gelasio-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Gelasio;font-style:normal;font-weight:700;font-display:swap;
  src:url(gelasio-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Carlito;font-style:normal;font-weight:400;font-display:swap;
  src:url(carlito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Carlito;font-style:normal;font-weight:700;font-display:swap;
  src:url(carlito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Carlito;font-style:italic;font-weight:400;font-display:swap;
  src:url(carlito-latin-400-italic.woff2) format("woff2")}

:root{
  --navy:#0E2438; --navy2:#16344F; --navy3:#12304A;
  --bg:#F4F8FA; --light:#F7F9FB; --card:#FFFFFF; --white:#fff;
  --teal:#0E7C86; --teal-l:#5BC2C9;
  --amber:#F2A93B; --amber-d:#D98A1F;
  /* Amber auf heller Flaeche: geprueft 5,92:1. #F2A93B haette dort nur 1,87:1. */
  --amber-ink:#8A5300;
  --ink:#1E293B; --mute:#5B6B7B; --mute-l:#94A3B8;
  --line-l:#E2E8F0; --sub-d:#AEB9C7;
  --serif:Gelasio,Georgia,"Times New Roman",serif;
  --sans:Carlito,Calibri,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

  /* Bildausschnitt des Hero-Bildes. Erster Wert links/rechts, zweiter oben/unten. */
  --hero-pos:52% 52%;
  --hero-pos-wide:44% 52%;
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--navy); color:#fff; font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--teal-l);outline-offset:3px;border-radius:4px}

/* ---------- Hero: Bild im diagonalen Keil ---------- */
.hero{
  position:relative;min-height:100svh;background:var(--navy);
  overflow:hidden;display:flex;align-items:center;
}
/* Das Bild liegt zusätzlich gedämpft über der ganzen Fläche, damit die
   rechte Seite nicht flach wirkt. Der Verlauf hält den Text lesbar. */
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:var(--hero-img);background-size:cover;
  background-position:var(--hero-pos-wide);
  opacity:.20;filter:saturate(.7);z-index:0;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(14,36,56,.10) 0%, rgba(14,36,56,.55) 34%,
    rgba(14,36,56,.94) 52%, var(--navy) 68%);
  z-index:0;
}
.hero-media{
  position:absolute;left:0;top:0;bottom:0;width:46%;z-index:1;
  clip-path:polygon(0 0,100% 0,78% 100%,0 100%);
  background-color:var(--bg);
  background-image:var(--hero-img);
  background-size:cover;background-position:var(--hero-pos);background-repeat:no-repeat;
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,36,56,0) 70%,rgba(14,36,56,.35) 100%);
}
.media-badge{
  /* Eigene Fläche statt nur Textschatten: Text über Bildern braucht einen
     messbaren Untergrund, sonst hängt die Lesbarkeit vom Bildinhalt ab. */
  background:rgba(14,36,56,.74);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.12);
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:clamp(12px,1.3vw,18px);
  padding:clamp(18px,2.6vh,26px) clamp(24px,3vw,40px) clamp(22px,3vh,30px) clamp(24px,3.4vw,44px);
  color:#fff;
}
.monogram{
  flex:0 0 auto;
  width:clamp(56px,4.6vw,68px);height:clamp(56px,4.6vw,68px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:clamp(20px,1.9vw,26px);
  color:var(--navy);background:var(--white);letter-spacing:.01em;
  box-shadow:0 0 0 3px rgba(255,255,255,.55),0 6px 20px rgba(14,36,56,.35);
}
.hl-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.name{font-weight:700;font-size:clamp(16px,1.5vw,20px);margin:0;letter-spacing:-.01em;
  }
.role{color:rgba(255,255,255,.82);font-size:clamp(12px,1vw,14px);margin:0;line-height:1.35}
.hero-navy{position:relative;z-index:2}

.hero-navy{
  margin-left:42%;max-width:760px;width:100%;
  padding:clamp(26px,4vw,60px) clamp(28px,5vw,76px) clamp(26px,4vw,60px) clamp(20px,3vw,40px);
}
.eyebrow{
  text-transform:uppercase;letter-spacing:.12em;font-size:clamp(11px,1.05vw,13.5px);
  font-weight:700;color:var(--amber);margin:0 0 clamp(10px,1.4vh,16px)
}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.6vw,54px);line-height:1.04;margin:0;letter-spacing:-.01em}
.hero-sub{margin:clamp(12px,1.6vh,18px) 0 0;font-size:clamp(14px,1.35vw,17px);color:rgba(255,255,255,.8);max-width:52ch}

/* ---------- Kartenmuster ---------- */
.cards{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,14px);margin-top:clamp(20px,3vh,34px)}
.dcard{
  --accent:var(--teal);
  display:flex;align-items:center;gap:clamp(14px,1.5vw,20px);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--accent);
  border-radius:9px;padding:clamp(13px,1.7vh,19px) clamp(15px,1.6vw,22px);
  transition:background .16s,transform .16s,border-color .16s;cursor:pointer;
}
.dcard.amber{--accent:var(--amber)}
.dcard:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}
.dnum{
  flex:0 0 auto;width:clamp(42px,3.6vw,52px);height:clamp(42px,3.6vw,52px);border-radius:50%;
  border:2.5px solid var(--accent);color:var(--accent);background:rgba(14,36,56,.25);
  font-family:var(--serif);font-size:clamp(20px,2vw,26px);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.dbody{display:flex;flex-direction:column;gap:4px;min-width:0}
.dtitle{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.7vw,22px);line-height:1.16;color:#fff;margin:0}
.dsub{font-size:clamp(12.5px,1.15vw,14.5px);color:rgba(255,255,255,.66);line-height:1.35;margin:0}
.dmeta{font-size:clamp(11px,1vw,12.5px);color:rgba(255,255,255,.5);letter-spacing:.01em;margin:2px 0 0}
.dmeta b{color:var(--accent);font-weight:700}
.darrow{margin-left:auto;color:rgba(255,255,255,.45);transition:color .16s;flex:0 0 auto}
.dcard:hover .darrow{color:#fff}
.darrow svg{width:20px;display:block}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:clamp(11.5px,1.02vw,13px);font-weight:600;letter-spacing:.005em;
  color:rgba(255,255,255,.9);background:rgba(255,255,255,.07);
  border-radius:999px;padding:6px 12px;line-height:1;transition:background .16s,color .16s;
}
.chip:hover{background:rgba(255,255,255,.14);color:#fff}
.dchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* ---------- Hinweisleiste ---------- */
.followco{
  display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);
  margin-top:clamp(18px,2.8vh,32px);padding:clamp(14px,1.9vh,20px) clamp(16px,1.7vw,22px);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--amber);border-radius:9px;
}
.fc-text{display:flex;flex-direction:column;gap:5px}
.fc-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:clamp(11px,1.05vw,13.5px);color:var(--amber);margin:0}
.fc-desc{font-size:clamp(12.5px,1.15vw,14.5px);color:rgba(255,255,255,.72);line-height:1.4;margin:0}

/* ---------- Inhaltsabschnitte ---------- */
section.band{padding:clamp(48px,8vh,96px) clamp(24px,6vw,80px)}
section.band.light{background:var(--bg);color:var(--ink)}
section.band.light .eyebrow{color:var(--amber-ink)}
.step .tag{letter-spacing:.08em}
.step.now .tag,.step.now .dnum{color:var(--amber-ink);border-color:var(--amber-ink)}
.inner{max-width:1120px;margin:0 auto}
.band h2{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.2vw,38px);line-height:1.12;margin:0 0 10px;letter-spacing:-.01em}
.band .lead{font-size:clamp(14.5px,1.3vw,17px);color:var(--mute);max-width:62ch;margin:0 0 clamp(24px,3.5vh,40px);line-height:1.55}
.band.dark .lead{color:rgba(255,255,255,.72)}
.band .eyebrow{margin-bottom:12px}

.steps{display:flex;flex-direction:column;gap:12px}
.step{
  --accent:var(--teal);
  display:flex;align-items:flex-start;gap:clamp(14px,1.5vw,20px);
  background:var(--card);border:1px solid var(--line-l);border-left:4px solid var(--accent);
  border-radius:9px;padding:clamp(16px,2vh,22px) clamp(16px,1.8vw,24px);
}
.step.now{--accent:var(--amber);box-shadow:0 6px 24px rgba(14,36,56,.10)}
.step .dnum{border-color:var(--accent);color:var(--accent);background:rgba(14,36,56,.04)}
.step h3{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.7vw,21px);margin:0 0 4px;line-height:1.18}
.step p{margin:0;font-size:clamp(13px,1.15vw,15px);color:var(--mute);line-height:1.5}
.step .tag{
  display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:3px 10px;
}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.pcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:clamp(18px,2.4vh,26px)}
.pcard h3{font-family:var(--serif);font-weight:700;font-size:clamp(16px,1.6vw,20px);margin:0 0 8px}
.pcard p{margin:0;font-size:clamp(13px,1.15vw,14.5px);color:rgba(255,255,255,.7);line-height:1.5}
.pcard .kicker{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:700;color:var(--teal-l);margin-bottom:10px}

footer.site{
  padding:clamp(28px,5vh,48px) clamp(24px,6vw,80px);background:var(--navy2);
  font-size:13px;color:rgba(255,255,255,.55);line-height:1.7;
}
footer.site .inner{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
footer.site a{color:var(--teal-l)}

/* ---------- Zugangsformular ---------- */
.gateform{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,18vw,260px);gap:clamp(12px,1.6vw,20px);align-items:end;margin-top:clamp(18px,2.6vh,30px)}
.gfields{display:flex;flex-direction:column;gap:12px}
.gfield{display:flex;flex-direction:column;gap:6px}
.gfield label{font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.gfield input{
  font-family:var(--sans);font-size:16px;line-height:1.2;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:9px;padding:13px 14px;width:100%;transition:background .16s,border-color .16s;
}
.gfield input:focus{background:rgba(255,255,255,.11);border-color:var(--teal-l);outline:none}
.gateerr{min-height:1.1em;font-size:13.5px;font-weight:600;color:#FFB1A3;margin:10px 0 0}
.entercard{
  --accent:var(--teal);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:100%;cursor:pointer;text-align:center;font-family:var(--sans);color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--accent);
  border-radius:9px;padding:clamp(15px,2.1vh,21px) 18px;
  transition:background .16s,transform .16s,border-color .16s;
}
.entercard:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.entercard:active{transform:translateY(0)}
.entertitle{font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.9vw,23px);line-height:1.1}
.entersub{text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:rgba(255,255,255,.6)}

/* ---------- Schmale Ansicht ---------- */
@media (max-width:900px),(max-height:600px) and (max-width:1024px){
  .hero{min-height:0;display:block}
  .hero::before,.hero::after{display:none}
  .hero-media{
    position:relative;width:100%;height:min(42svh,300px);clip-path:none;
    background-position:var(--hero-pos-wide);
    border-bottom:3px solid var(--amber);
  }
  .hero-media::after{background:linear-gradient(180deg,rgba(14,36,56,0) 40%,rgba(14,36,56,.72) 100%)}
  .media-badge{padding:0 clamp(18px,5vw,28px) 18px}
  .monogram{width:52px;height:52px;font-size:20px}
  .hero-navy{margin-left:0;padding:clamp(24px,6vw,36px) clamp(18px,5vw,32px) clamp(32px,7vw,48px)}
  .gateform{grid-template-columns:1fr}
  .dcard{align-items:flex-start}
  .step{flex-direction:row}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:#fff;color:#000}.hero{min-height:0}}

/* ---------- Fehlerkarten ---------- */
.fcard{
  background:var(--card);border:1px solid var(--line-l);border-top:4px solid var(--teal);
  border-radius:9px;padding:clamp(20px,2.6vh,28px) clamp(18px,1.9vw,26px);
}
.fnum{
  display:block;font-family:var(--serif);font-weight:700;
  font-size:clamp(28px,3vw,38px);line-height:1;color:var(--teal);opacity:.35;margin-bottom:10px;
}
.fcard h3{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.7vw,21px);
  line-height:1.18;margin:0 0 9px;color:var(--ink)}
.fcard p{margin:0;font-size:clamp(13px,1.15vw,14.5px);color:var(--mute);line-height:1.55}

/* ---------- Inhaltsverzeichnis ---------- */
.toc{list-style:none;counter-reset:kap;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:9px;overflow:hidden}
.toc li{counter-increment:kap;background:var(--navy);padding:14px clamp(15px,1.6vw,20px) 14px 52px;position:relative}
.toc li::before{
  content:counter(kap,decimal-leading-zero);position:absolute;left:clamp(15px,1.6vw,20px);top:14px;
  font-family:var(--serif);font-weight:700;font-size:14px;color:var(--amber);letter-spacing:.02em;
}
.toc b{display:block;font-weight:700;font-size:clamp(14px,1.25vw,15.5px);color:#fff;line-height:1.3}
.toc span{display:block;font-size:clamp(12px,1.1vw,13.5px);color:rgba(255,255,255,.6);line-height:1.4;margin-top:2px}

/* ---------- Zweispaltiger Abschnitt ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px);align-items:start}
.split-text p{font-size:clamp(14px,1.25vw,16px);line-height:1.6;margin:0 0 14px;color:var(--mute)}
.band:not(.light) .split-text p{color:rgba(255,255,255,.74)}
.split-text p:last-of-type{margin-bottom:0}
.quote{
  font-family:var(--serif);font-size:clamp(18px,1.9vw,23px)!important;line-height:1.35!important;
  color:var(--ink)!important;border-left:4px solid var(--amber);padding-left:18px;margin:0 0 20px!important;
}
.band:not(.light) .quote{color:#fff!important}
.split-facts{display:flex;flex-direction:column;gap:12px}
.fact{
  display:flex;align-items:baseline;gap:14px;
  background:var(--card);border:1px solid var(--line-l);border-left:4px solid var(--teal);
  border-radius:9px;padding:14px 16px;
}
.band:not(.light) .fact{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);border-left-color:var(--amber)}
.fact-num{flex:0 0 auto;min-width:56px;font-family:var(--serif);font-weight:700;
  font-size:clamp(20px,2vw,26px);line-height:1;color:var(--teal)}
.band:not(.light) .fact-num{color:var(--amber)}
.fact-txt{font-size:clamp(12.5px,1.1vw,14px);line-height:1.4;color:var(--mute)}
.band:not(.light) .fact-txt{color:rgba(255,255,255,.7)}

/* ---------- Eintragen ---------- */
.inner.narrow{max-width:720px}
.signup{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.signup input{
  flex:1 1 260px;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--line-l);border-radius:9px;padding:13px 15px;
}
.signup input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,134,.16)}
.btn-primary{
  font-family:var(--serif);font-weight:700;font-size:16px;color:#fff;background:var(--teal);
  border:none;border-radius:9px;padding:13px 26px;cursor:pointer;transition:filter .16s,transform .16s;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.mini-note{font-size:12.5px;color:var(--mute);margin:12px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:24px}
  .toc{grid-template-columns:1fr}
}

/* ---------- Korrekturen fuer die Bandvarianten ----------
   Die Grundkomponenten sind fuer die dunkle Flaeche gebaut. Auf hellem Grund
   brauchen sie eigene Werte — automatisches Umdrehen reicht nicht. */
.band:not(.light) .lead{color:rgba(255,255,255,.74)}
.band.light .dcard{
  background:var(--card);border-color:var(--line-l);
}
.band.light .dcard:hover{background:#fff;box-shadow:0 6px 24px rgba(14,36,56,.10)}
.band.light .dtitle{color:var(--ink)}
.band.light .dsub{color:var(--mute)}
.band.light .dmeta{color:var(--mute-l)}
.band.light .dnum{background:rgba(14,36,56,.04)}
.band.light .darrow{color:var(--mute-l)}
.band.light .dcard:hover .darrow{color:var(--teal)}

/* ---------- Nachbesserung ----------
   Das Inhaltsverzeichnis lag als Raster mit durchscheinendem Fugenhintergrund vor.
   Bei zehn Eintraegen in drei Spalten blieben zwei Zellen leer und die Fuge sah
   nach Fehler aus. Jetzt echte Karten mit Abstand. */
.toc{background:none;border:none;gap:10px;overflow:visible}
.toc li{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--amber);
  border-radius:9px;padding:13px 16px 14px 48px;
  transition:background .16s;
}
.toc li:hover{background:rgba(255,255,255,.10)}
.toc li::before{left:16px;top:14px}
.fnum{opacity:.5}
.fcard h3,.band h2,.dtitle{text-wrap:balance}

/* Fokus im Anmeldeformular: Ein Rahmenwechsel allein ist ein schwacher Indikator
   und wird von Pruefwerkzeugen zu Recht nicht als Fokusring gewertet. */
.gfield input:focus{box-shadow:0 0 0 3px rgba(91,194,201,.28)}
.signup input:focus{box-shadow:0 0 0 3px rgba(14,124,134,.18)}