/* Markenstil Inken Manz, Farben und Schriften aus der Brand-DNA */
:root{
  --weiss:#ffffff;
  --navy:#001d3d;
  --tuerkis:#40e0d0;
  --gold:#c68c37;
  --gelb:#ffc300;
  --creme:#ecd1ab;
  --navy-weich:rgba(0,29,61,.78);
  --creme-hell:#faf5ee;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--creme-hell);
  color:var(--navy);
  font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:18px;
  line-height:1.72;
}
.band{background:var(--weiss);border-bottom:1px solid rgba(198,140,55,.28)}
.kopf{
  max-width:1120px;margin:0 auto;padding:16px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.marke{color:var(--navy);text-decoration:none;display:flex;align-items:center;gap:14px}
.marke img{width:64px;height:auto;display:block}

/* Hauptmenue */
nav.haupt{display:flex;align-items:center;gap:26px}
nav.haupt a{
  color:var(--navy);text-decoration:none;font-size:1rem;letter-spacing:.015em;
  padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap;
}
nav.haupt a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.kopf-knopf{
  background:var(--navy);color:var(--weiss) !important;text-decoration:none;
  font-size:.98rem;letter-spacing:.02em;
  padding:12px 22px;border-radius:999px;border:1px solid var(--gold);
  white-space:nowrap;flex-shrink:0;
}
.kopf-knopf:hover{background:var(--gold);color:var(--navy) !important;border-bottom-color:transparent}

/* Menueknopf, nur am Handy sichtbar, kommt ohne Programmcode aus */
.menue-knopf{display:none;cursor:pointer;padding:10px;margin:-10px}
.menue-knopf span{display:block;width:26px;height:2px;background:var(--navy);
  border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.menue-knopf span+span{margin-top:6px}
.menue-schalter:checked+.menue-knopf span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menue-schalter:checked+.menue-knopf span:nth-child(2){opacity:0}
.menue-schalter:checked+.menue-knopf span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:900px){
  .menue-knopf{display:block}
  nav.haupt{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:0;padding-top:10px;border-top:1px solid rgba(198,140,55,.28);margin-top:12px;
  }
  .menue-schalter:checked~nav.haupt{display:flex}
  nav.haupt a{padding:15px 2px;border-bottom:1px solid rgba(198,140,55,.18);font-size:1.06rem}
  nav.haupt a:last-child{border-bottom:0}
  .kopf-knopf{text-align:center;margin-top:14px;padding:15px 22px}
  .marke img{width:52px}
  .kopf{padding:14px 20px}
}
main{max-width:820px;margin:0 auto;padding:52px 26px 76px}
h1{
  font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.16;margin:0 0 .3em;
}
h1+.unterzeile{color:var(--navy-weich);font-size:1.06rem;margin:0 0 2.4em}
h1::after{
  content:"";display:block;width:74px;height:3px;background:var(--gold);
  margin-top:26px;border-radius:2px;
}
h2{
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:1.44rem;margin:2.5em 0 .55em;line-height:1.3;
}
h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:1.12rem;margin:1.9em 0 .4em}
p,li{color:var(--navy-weich)}
p{margin:0 0 1.05em}
ul{padding-left:1.15em;margin:0 0 1.15em}
li{margin-bottom:.42em}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--navy)}
strong{color:var(--navy);font-weight:700}
hr{border:0;border-top:1px solid rgba(198,140,55,.3);margin:3em 0}
.karte{
  background:var(--weiss);border:1px solid rgba(198,140,55,.32);
  border-left:4px solid var(--gold);border-radius:4px;
  padding:24px 28px;margin:0 0 2em;
}
.karte p:last-child{margin-bottom:0}
.stand{color:var(--navy-weich);font-size:.9rem;font-style:italic;margin-top:3.5em}
/* Footer, auf allen Seiten gleich */
.fuss{background:var(--navy);color:var(--creme);margin-top:0}
.fuss-innen{max-width:820px;margin:0 auto;padding:52px 26px 46px}
.fuss-marke{font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:1.18rem;color:var(--weiss);margin:0 0 .2em}
.fuss-claim{color:var(--gelb);font-size:.95rem;letter-spacing:.04em;margin:0 0 1.7em}
.fuss p{color:rgba(236,209,171,.9);margin:0 0 .35em;font-size:.97rem}
.fuss a{color:var(--tuerkis);text-decoration:none}
.fuss a:hover{color:var(--gelb);text-decoration:underline}
.fuss-links{margin:1.9em 0 1.6em;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:12px 30px}
.fuss-links li{margin:0}
.fuss-links a{font-size:1rem;letter-spacing:.02em}
.fuss-strich{border-top:1px solid rgba(198,140,55,.42);margin:1.9em 0 1.4em}
.fuss-klein{font-size:.86rem;color:rgba(236,209,171,.62)}
@media(max-width:560px){
  body{font-size:17px}
  main{padding:38px 20px 58px}
  .kopf{padding:28px 20px 22px}
  .fuss-innen{padding:40px 20px 36px}
}

/* =====================================================================
   Startseite. Gilt nur fuer <main class="start">, die Rechtsseiten
   bleiben davon unberuehrt.
   ===================================================================== */
main.start{max-width:none;margin:0;padding:0}
main.start .huelle{max-width:1120px;margin:0 auto;padding:0 26px}
main.start section{padding:72px 0}
main.start section.hell{background:var(--weiss)}
main.start h1,main.start h2,main.start h3{color:var(--navy)}
main.start h1::after{display:none}
main.start p,main.start li{color:var(--navy-weich)}

.augenbraue{
  font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:.86rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px
}
.vorspann{font-size:1.1rem;margin:0 0 30px;max-width:34em}
.mitte{text-align:center}
.mitte .vorspann{margin-left:auto;margin-right:auto}
.abschnitt-kopf{max-width:44em;margin:0 auto 46px;text-align:center}
.abschnitt-kopf h2{font-size:clamp(1.7rem,4vw,2.5rem);margin:0 0 .35em}
.abschnitt-kopf p{margin:0}

/* ---- Knoepfe ---- */
.knopf{
  display:inline-block;background:var(--navy);color:var(--weiss);text-decoration:none;
  font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:1.08rem;letter-spacing:.02em;
  padding:17px 38px;border-radius:999px;border:1px solid var(--gold);
  transition:transform .15s ease,background .15s ease;
}
.knopf:hover{background:var(--gold);color:var(--navy);transform:translateY(-2px)}
.knopf-unterzeile{font-size:.93rem;color:var(--navy-weich);margin:14px 0 0}

/* ---- Held ---- */
.held{padding:58px 0 66px !important}
.zweispalter{display:grid;gap:34px;align-items:center}
.held-bild{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/4;
  border:1px solid rgba(198,140,55,.35);margin-bottom:46px}
.held-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 22%}
.held h1{font-size:clamp(2rem,5.4vw,3.5rem);line-height:1.12;margin:0 0 .45em}
.hervor{
  background:linear-gradient(100deg,#9a6522,#c68c37,#dbab5e,#9a6522);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:schimmer 9s linear infinite;
}
@keyframes schimmer{0%{background-position:0 0}100%{background-position:220% 0}}
@media(prefers-reduced-motion:reduce){.hervor{animation:none;background-position:50% 0}}
@media(min-width:900px){
  .held .zweispalter{grid-template-columns:1.12fr .88fr;gap:56px}
  .held-bild{margin-bottom:0}
  .held-text{order:1}.held-bild{order:2}
}

/* ---- Zahlenband, Nordsee ---- */
.zahlenband{
  background:
    radial-gradient(90% 74% at 50% 100%, rgba(64,224,208,.2) 0%, rgba(64,224,208,0) 58%),
    radial-gradient(110% 80% at 50% 0%, rgba(198,140,55,.2) 0%, rgba(198,140,55,0) 52%),
    linear-gradient(180deg,#00101f 0%, #001d3d 48%, #00344f 100%);
  padding:46px 0 !important;
}
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 18px;text-align:center}
@media(min-width:760px){.zahlen{grid-template-columns:repeat(4,1fr)}}
.zahl .gross{
  display:block;font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1;
  background:linear-gradient(100deg,#9a6522,#c68c37,#fff6e2,#c68c37,#9a6522);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:schimmer 9s linear infinite;
}
@media(prefers-reduced-motion:reduce){.zahl .gross{animation:none;background-position:50% 0}}
.zahl .dazu{display:block;color:var(--creme);opacity:.92;font-size:.95rem;margin-top:10px}

/* ---- Erkennen ---- */
.erkennen{list-style:none;padding:0;margin:0 auto;max-width:48em;display:grid;gap:14px}
.erkennen li{
  background:var(--weiss);border:1px solid rgba(198,140,55,.3);
  border-left:4px solid var(--gold);border-radius:4px;padding:18px 22px;margin:0;
}
section.hell .erkennen li{background:var(--creme-hell)}
.erkennen-schluss{text-align:center;margin:36px 0 0;font-family:'Playfair Display',Georgia,serif;
  font-size:1.4rem;color:var(--navy)}

/* ---- EHLAN ---- */
.ehlan{display:grid;gap:12px}
@media(min-width:860px){.ehlan{grid-template-columns:repeat(5,1fr)}}
.ehlan div{
  background:var(--creme-hell);border:1px solid rgba(198,140,55,.3);border-radius:6px;
  padding:22px 16px;text-align:center;
}
section.hell .ehlan div{background:var(--creme-hell)}
.ehlan b{display:block;font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:2.5rem;line-height:1;color:var(--gold);margin-bottom:10px}
.ehlan span{font-size:.97rem;color:var(--navy);line-height:1.35;display:block}
.ehlan-satz{text-align:center;margin:34px 0 0;font-size:1.12rem;font-style:italic}

/* ---- Die zwei Wege ---- */
.wege{display:grid;gap:26px}
@media(min-width:880px){.wege{grid-template-columns:repeat(2,1fr)}}
.weg{
  background:var(--weiss);border:1px solid rgba(198,140,55,.34);border-radius:8px;
  padding:34px 30px;display:flex;flex-direction:column;
}
section.hell .weg{background:var(--creme-hell)}
.weg .schild{
  align-self:flex-start;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(198,140,55,.5);border-radius:999px;
  padding:5px 14px;margin-bottom:18px;
}
.weg h3{font-family:'Playfair Display',Georgia,serif;font-size:1.8rem;margin:0 0 .18em;color:var(--navy)}
.weg .weg-unter{color:var(--gold);font-style:italic;margin:0 0 18px}
.weg ul{list-style:none;padding:0;margin:0 0 24px}
.weg ul li{padding:7px 0 7px 26px;position:relative;margin:0}
.weg ul li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;
  border-radius:50%;background:var(--gold)}
.weg .weg-fuss{margin-top:auto;padding-top:20px;border-top:1px solid rgba(198,140,55,.3)}
.weg .weg-form{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;
  color:var(--navy);margin:0 0 18px}
.weg .knopf{display:block;text-align:center}

/* ---- Quiz ---- */
.quizkarte{
  background:var(--weiss);border:1px solid rgba(198,140,55,.34);border-radius:8px;
  padding:40px 32px;text-align:center;max-width:40em;margin:0 auto;
}
section.hell .quizkarte{background:var(--creme-hell)}

/* ---- Ueber mich ---- */
.ueber-bild{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:667/1000;
  border:1px solid rgba(198,140,55,.35);margin-bottom:46px}
.ueber-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .ueber .zweispalter{grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}
  .ueber-bild{margin-bottom:0}
}
.fakten{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:9px}
.fakten li{padding-left:26px;position:relative;margin:0;font-size:1rem}
.fakten li::before{content:"✦";position:absolute;left:0;color:var(--gold)}

/* ---- Stimmen ---- */
.stimmen{display:grid;gap:20px}
@media(min-width:860px){.stimmen{grid-template-columns:repeat(2,1fr)}}
.stimme{background:var(--weiss);border:1px solid rgba(198,140,55,.3);border-radius:8px;
  padding:28px 26px;display:flex;flex-direction:column}
section.hell .stimme{background:var(--creme-hell)}
.stimme .sterne{color:var(--gold);letter-spacing:.14em;margin-bottom:12px}
.stimme blockquote{margin:0 0 16px;font-family:'Playfair Display',Georgia,serif;
  font-size:1.2rem;line-height:1.45;color:var(--navy);font-weight:600}
.stimme cite{margin-top:auto;font-style:normal;font-size:.95rem;color:var(--navy-weich)}

/* ---- Abschluss, Nordsee ---- */
.abschluss{
  background:
    radial-gradient(90% 74% at 50% 100%, rgba(64,224,208,.2) 0%, rgba(64,224,208,0) 58%),
    radial-gradient(110% 80% at 50% 0%, rgba(198,140,55,.2) 0%, rgba(198,140,55,0) 52%),
    linear-gradient(180deg,#00101f 0%, #001d3d 48%, #00344f 100%);
  text-align:center;
}
.abschluss h2{color:var(--weiss) !important;font-size:clamp(1.8rem,4.4vw,2.7rem);margin:0 0 .4em}
.abschluss p{color:var(--creme)}
.abschluss .augenbraue{color:var(--gelb)}
.abschluss .knopf{
  background:linear-gradient(100deg,#9a6522,#c68c37,#fff6e2,#c68c37,#9a6522);
  background-size:220% 100%;color:var(--navy);border:0;font-weight:600;
  animation:schimmer 9s linear infinite;
}
@media(prefers-reduced-motion:reduce){.abschluss .knopf{animation:none;background-position:50% 0}}
.abschluss .knopf:hover{color:var(--navy)}
.abschluss .knopf-unterzeile{color:rgba(236,209,171,.85)}

@media(max-width:560px){
  main.start section{padding:52px 0}
  main.start .huelle{padding:0 20px}
  .held{padding:34px 0 48px !important}
}

/* ---- EHLAN Zeichen auf Nordsee Tafel ---- */
.nur-vorlesen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.ehlan-tafel{
  background:
    radial-gradient(90% 74% at 50% 100%, rgba(64,224,208,.2) 0%, rgba(64,224,208,0) 58%),
    radial-gradient(110% 80% at 50% 0%, rgba(198,140,55,.2) 0%, rgba(198,140,55,0) 52%),
    linear-gradient(180deg,#00101f 0%, #001d3d 48%, #00344f 100%);
  border:1px solid rgba(198,140,55,.42);border-radius:14px;
  max-width:740px;margin:0 auto 34px;padding:42px 24px 44px;text-align:center;
}
.ehlan-ober{
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tuerkis) !important;opacity:.92;margin:0 0 16px;
}
.ehlan-kopf{margin:0 !important;line-height:1}
.ehlan-zeichen{display:block;margin:0 auto;width:min(520px,84%);height:auto}
.ehlan-unter{
  font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--creme) !important;margin:16px 0 0;
}
.ehlan-nach{max-width:44em;margin:0 auto 46px;text-align:center}
@media(max-width:560px){
  .ehlan-tafel{padding:32px 16px 34px;border-radius:12px}
  .ehlan-zeichen{width:92%}
}

/* Rechtslinks im Fuss etwas leiser als die Seitenlinks */
.fuss-links.fuss-recht{margin-top:-.6em}
.fuss-links.fuss-recht a{font-size:.92rem;color:rgba(236,209,171,.72)}
.fuss-links.fuss-recht a:hover{color:var(--gelb)}

/* =====================================================================
   Aussehen, zweite Stufe: dritte Flaeche, Goldbalken, EHLAN als Weg
   ===================================================================== */

/* Dritte Flaeche, sanftes Gold, damit die Abschnitte wechseln */
main.start section.gold{background:linear-gradient(180deg,#fbf4e8 0%,#f6edda 100%)}
main.start section.gold .weg,
main.start section.gold .stimme,
main.start section.gold .quizkarte{background:var(--weiss)}

/* Goldbalken hinter einzelnen Worten, wie mit dem Stift gezogen */
.marker{
  background:linear-gradient(180deg,
    rgba(198,140,55,0) 46%,
    rgba(198,140,55,.34) 46%,
    rgba(198,140,55,.34) 92%,
    rgba(198,140,55,0) 92%);
  padding:0 .14em;border-radius:2px;
}

/* EHLAN als Weg, fuenf Schritte untereinander mit Goldlinie */
.schritte{list-style:none;padding:0;margin:0 auto;max-width:46em}
.schritt{
  display:grid;grid-template-columns:62px 1fr;gap:24px;align-items:start;
  position:relative;padding-bottom:34px;margin:0;
}
.schritt:last-child{padding-bottom:0}
.schritt::before{
  content:"";position:absolute;left:30px;top:66px;bottom:-4px;width:2px;
  background:linear-gradient(180deg,rgba(198,140,55,.65),rgba(198,140,55,.18));
}
.schritt:last-child::before{display:none}
.schritt .zeichen{
  width:62px;height:62px;border-radius:50%;
  border:1.5px solid rgba(198,140,55,.55);background:var(--weiss);
  display:grid;place-items:center;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:1.8rem;line-height:1;color:var(--gold);
}
.schritt .wofuer{
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:1.2rem;color:var(--navy);display:block;margin:14px 0 .3em;
}
.schritt .frage{margin:0;font-style:italic}
@media(max-width:560px){
  .schritt{grid-template-columns:50px 1fr;gap:18px;padding-bottom:28px}
  .schritt .zeichen{width:50px;height:50px;font-size:1.5rem}
  .schritt::before{left:24px;top:54px}
  .schritt .wofuer{margin-top:9px;font-size:1.1rem}
}

/* Kurzer Block ueber Inken auf der Startseite */
.mehr-link{display:inline-block;margin-top:20px;font-size:1.02rem}

/* Abschlussband zweispaltig, mit dem Kaffeebild rechts */
.abschluss .abschluss-innen{text-align:center;display:grid;gap:34px}
.abschluss-bild{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1200/846;
  border:1px solid rgba(198,140,55,.45);
}
.abschluss-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.abschluss .abschluss-text .vorspann{margin-left:auto;margin-right:auto}
@media(min-width:900px){
  .abschluss .abschluss-innen{
    grid-template-columns:1.04fr .96fr;gap:54px;align-items:center;text-align:left;
  }
  .abschluss .abschluss-text .vorspann{margin-left:0;margin-right:0}
  .abschluss .abschluss-text .knopf-unterzeile{text-align:left}
}

/* Textfarbe auf den dunklen Baendern. Muss spezifischer sein als main.start p,
   sonst gewinnt das Navy und der Text wird unsichtbar. */
main.start section.abschluss p,
main.start section.abschluss li,
main.start section.zahlenband p,
main.start section.zahlenband li{color:var(--creme)}
main.start section.abschluss .knopf-unterzeile{color:rgba(236,209,171,.85)}
main.start section.abschluss .augenbraue{color:var(--gelb)}

/* Augenbraue am Handy auf eine Zeile, Lato laeuft breiter als vorher Garamond */
@media(max-width:560px){ .augenbraue{letter-spacing:.11em;font-size:.8rem} }

/* Klönschnack Knopf im Menue. Muss spezifischer sein als "nav.haupt a",
   sonst nimmt ihm die Menueregel den seitlichen Innenabstand (war 0 px). */
nav.haupt a.kopf-knopf{
  padding:13px 28px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);border-radius:999px;
  font-size:1rem;font-weight:700;letter-spacing:.01em;
}
nav.haupt a.kopf-knopf:hover{border-color:var(--gold)}
@media(max-width:900px){
  nav.haupt a.kopf-knopf{padding:15px 24px;margin-top:14px;border-bottom:1px solid var(--gold)}
}

/* =====================================================================
   Zwei Stufen auf der Startseite und die fuenf Phasen von Platin
   ===================================================================== */

/* Karte: Text unter dem Untertitel und der leise Link zur Unterseite */
.weg .weg-text{margin:0 0 18px}
.weg .mehr{display:inline-block;margin-top:16px;font-size:.98rem;color:var(--gold);
  text-decoration:none;border-bottom:1px solid rgba(198,140,55,.45);padding-bottom:1px}
.weg .mehr:hover{color:var(--navy);border-bottom-color:var(--navy)}
.weg .mehr::after{content:" \2192"}

/* Goldener Pfeil zwischen Schritt 1 und Schritt 2 */
.wege.stufen .weg{position:relative}
.wege.stufen .weg:first-child::after{
  content:"\2193";position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);
  width:32px;height:32px;border-radius:50%;background:var(--weiss);
  border:1px solid rgba(198,140,55,.55);color:var(--gold);
  display:grid;place-items:center;font-size:1.05rem;line-height:1;z-index:2;
}
@media(min-width:880px){
  .wege.stufen .weg:first-child::after{
    content:"\2192";left:auto;right:-29px;bottom:auto;top:50%;transform:translateY(-50%);
  }
}

/* Die fuenf Phasen der Platinwochen */
.phasen{display:grid;gap:22px;max-width:52em;margin:0 auto}
.phase{background:var(--weiss);border:1px solid rgba(198,140,55,.3);border-radius:10px;
  padding:24px 26px}
.phase-name{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin:0 0 14px;font-weight:700}
.wochen{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.wochen li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;margin:0}
.wochen .nr{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(198,140,55,.55);
  display:grid;place-items:center;font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:1.1rem;color:var(--navy);background:var(--creme-hell)}
.wochen .nr.bonus{font-size:1.25rem;color:var(--gold)}
.wochen b{display:block;color:var(--navy);font-weight:700;margin-top:7px;line-height:1.35}
.wochen span.zu{display:block;color:var(--navy-weich);font-size:.97rem;line-height:1.45}
.phasen-satz{text-align:center;max-width:40em;margin:34px auto 0;font-style:italic}
@media(max-width:560px){
  .phase{padding:20px 18px}
  .wochen li{grid-template-columns:34px 1fr;gap:12px}
  .wochen .nr{width:34px;height:34px;font-size:1rem}
  .wochen b{margin-top:5px}
}

/* =====================================================================
   EHLAN als Nordsee Band: die Buchstaben selbst sind das Wort,
   das H sitzt im Herz, ein goldener Faden webt hindurch.
   Farbregeln bewusst mit "main.start section.ehlan-band", sonst
   gewinnt "main.start p" und der Text wird Navy auf Navy.
   ===================================================================== */
main.start section.ehlan-band{
  background:
    radial-gradient(90% 74% at 50% 100%, rgba(64,224,208,.18) 0%, rgba(64,224,208,0) 58%),
    radial-gradient(110% 80% at 50% 0%, rgba(198,140,55,.2) 0%, rgba(198,140,55,0) 52%),
    linear-gradient(180deg,#00101f 0%, #001d3d 48%, #00344f 100%);
  text-align:center;padding:84px 0 88px;
}
main.start section.ehlan-band .augenbraue{color:var(--tuerkis)}
main.start section.ehlan-band h2{color:var(--weiss);font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 .4em}
main.start section.ehlan-band p{color:var(--creme)}
main.start section.ehlan-band .ehlan-intro{max-width:36em;margin:0 auto 56px}
main.start section.ehlan-band .ehlan-schluss{margin:50px auto 0;font-style:italic}

.ehlan-faden{position:relative}
.ehlan-linie{position:absolute;left:0;top:10px;width:100%;height:96px;overflow:visible;pointer-events:none}
.ehlan-reihe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);
  gap:18px;position:relative}
main.start section.ehlan-band .ehlan-reihe li{display:flex;flex-direction:column;align-items:center;margin:0}
.ehlan-reihe .letter{position:relative;height:116px;display:grid;place-items:center;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:5.4rem;line-height:1;
  color:#e2b36a;text-shadow:0 0 24px rgba(198,140,55,.38)}
.ehlan-reihe .letter > span{position:relative;z-index:2}
.ehlan-reihe .herz{position:absolute;left:50%;top:50%;width:134px;height:auto;
  transform:translate(-50%,-47%);z-index:1;overflow:visible}
main.start section.ehlan-band .ehlan-reihe b{display:block;font-family:'Playfair Display',Georgia,serif;
  font-weight:700;font-size:1.12rem;line-height:1.25;margin:12px 0 8px;color:var(--weiss)}
main.start section.ehlan-band .ehlan-reihe .text{display:block;font-style:italic;font-size:.97rem;
  line-height:1.5;color:rgba(236,209,171,.9);max-width:13em}

@media(max-width:860px){
  main.start section.ehlan-band{padding:60px 0 64px}
  main.start section.ehlan-band .ehlan-intro{margin-bottom:40px}
  .ehlan-linie{display:none}
  .ehlan-reihe{grid-template-columns:1fr;gap:26px}
  .ehlan-reihe::before{content:"";position:absolute;left:38px;top:40px;bottom:40px;width:2px;
    background:linear-gradient(180deg,rgba(226,179,106,.15),rgba(226,179,106,.7) 30%,rgba(226,179,106,.7) 70%,rgba(226,179,106,.15))}
  main.start section.ehlan-band .ehlan-reihe li{display:grid;grid-template-columns:76px 1fr;gap:16px;
    align-items:start;text-align:left}
  .ehlan-reihe .letter{grid-row:1 / span 2;width:76px;height:76px;font-size:3.2rem}
  .ehlan-reihe .herz{width:86px}
  main.start section.ehlan-band .ehlan-reihe b{grid-column:2;margin:12px 0 4px}
  main.start section.ehlan-band .ehlan-reihe .text{grid-column:2;max-width:none}
}

/* =====================================================================
   Finanzquiz auf der Startseite: links Text, rechts eine echte Frage
   zum Ausprobieren. Funktioniert ohne Programmcode, nur mit
   Radioknoepfen und dem Zustand :checked.
   ===================================================================== */
.quiz-zwei{display:grid;gap:44px;align-items:center;text-align:left}
@media(min-width:900px){.quiz-zwei{grid-template-columns:1fr 1.05fr;gap:64px}}
.quiz-zwei h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:0 0 .45em}
.quiz-fakten{list-style:none;padding:0;margin:22px 0 28px;display:flex;flex-wrap:wrap;gap:10px}
.quiz-fakten li{margin:0;padding:7px 15px;border-radius:999px;background:var(--creme-hell);
  border:1px solid rgba(198,140,55,.38);font-size:.92rem;color:var(--navy)}

.probe{position:relative}
.probe-frz{position:absolute;right:-6px;top:-70px;font-family:'Playfair Display',Georgia,serif;
  font-weight:700;font-size:20rem;line-height:1;color:rgba(198,140,55,.16);pointer-events:none;
  user-select:none;z-index:0}
.probe-karte{position:relative;z-index:1;background:var(--weiss);border:1px solid rgba(198,140,55,.45);
  border-radius:14px;padding:28px 26px 26px;box-shadow:0 14px 40px rgba(0,29,61,.09)}
main.start .probe-label{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--gold);margin:0 0 12px}
main.start .probe-frage{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:1.22rem;
  line-height:1.35;color:var(--navy);margin:0 0 18px}
.probe-optionen{display:flex;flex-direction:column;gap:10px}
.probe-opt{display:block;cursor:pointer;padding:13px 16px;border-radius:10px;
  border:1.5px solid rgba(0,29,61,.14);background:var(--creme-hell);font-size:.98rem;line-height:1.4;
  color:var(--navy);transition:border-color .15s ease,background .15s ease}
.probe-opt:hover{border-color:var(--gold)}
/* gewaehlte Antwort */
#probe-a:checked ~ label[for="probe-a"],
#probe-b:checked ~ label[for="probe-b"],
#probe-c:checked ~ label[for="probe-c"]{border-color:var(--gold);background:#fbf2e2}
/* nach jeder Antwort wird die richtige gruen */
.probe-optionen input:checked ~ .probe-opt.richtig{border-color:#2e7658;background:#e8f3ee}
/* Tastatur */
#probe-a:focus-visible ~ label[for="probe-a"],
#probe-b:focus-visible ~ label[for="probe-b"],
#probe-c:focus-visible ~ label[for="probe-c"]{outline:2px solid var(--gold);outline-offset:2px}
/* Rueckmeldung und Weiter, erst nach der Antwort sichtbar */
.probe-fb,.probe-weiter{display:none}
main.start .probe-fb{margin:6px 0 0;padding:14px 16px;border-radius:10px;font-size:.96rem;line-height:1.5;color:var(--navy)}
.probe-fb b{display:block;margin-bottom:3px}
.probe-ja{background:#e8f3ee}
.probe-nein{background:#fbf2e2}
#probe-b:checked ~ .probe-ja{display:block}
#probe-a:checked ~ .probe-nein,#probe-c:checked ~ .probe-nein{display:block}
.probe-optionen input:checked ~ .probe-weiter{display:inline-block}
.probe-weiter{margin-top:14px;color:var(--gold);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(198,140,55,.5);padding-bottom:1px;align-self:flex-start}
.probe-weiter::after{content:" \2192"}
.probe-weiter:hover{color:var(--navy);border-bottom-color:var(--navy)}
@media(max-width:560px){
  .probe-frz{font-size:13rem;top:-48px;right:-4px}
  .probe-karte{padding:22px 18px 20px}
}

/* Fragezeichen sichtbar machen: Karte einruecken, Fragezeichen ragt oben links heraus */
.probe{padding:64px 0 0 54px}
.probe-frz{left:-6px;right:auto;top:-46px;font-size:18rem;color:rgba(198,140,55,.22)}
@media(max-width:560px){
  .probe{padding:46px 0 0 30px}
  .probe-frz{font-size:11.5rem;top:-30px;left:-4px}
}

/* Fragezeichen erkennbar: Strich und Punkt stehen frei links neben der Karte,
   nur der rechte Teil des Bogens verschwindet hinter der Karte. */
.probe{padding:40px 0 0 84px}
.probe-frz{left:-22px;right:auto;top:-20px;font-size:17rem;color:rgba(198,140,55,.3)}
@media(max-width:560px){
  .probe{padding:30px 0 0 48px}
  .probe-frz{font-size:9rem;top:-6px;left:-10px}
}

/* Schluesselsatz im Abschnitt ueber Inken, gross und fuer sich allein */
.schluesselsatz{position:relative;margin:6px 0 30px;padding:0 0 0 26px;border-left:4px solid var(--gold)}
.schluesselsatz::before{content:"\201E";position:absolute;left:18px;top:-58px;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:6.5rem;line-height:1;
  color:rgba(198,140,55,.28);pointer-events:none}
main.start .schluesselsatz p{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.75rem,3.4vw,2.45rem);line-height:1.2;color:var(--navy);margin:0}
.ueber .antwort{font-size:1.08rem}
main.start .ueber .antwort strong{color:var(--navy);font-weight:700}
@media(max-width:560px){
  .schluesselsatz{padding-left:18px;margin-bottom:24px}
  .schluesselsatz::before{font-size:5rem;top:-44px;left:12px}
}
/* Das dekorative Anfuehrungszeichen lag auf dem V, Goldlinie und Goldbalken reichen */
.schluesselsatz::before{content:none}

/* Lesetext auf Unterseiten: linksbuendig, angenehme Zeilenlaenge */
.lesetext{max-width:44em;margin:0 auto}
/* angenehme Zeilenlaenge, rund 75 Zeichen */
.lesetext{max-width:36em}
/* muss spezifischer sein als "main.start .huelle", sonst gilt dort 1120 px */
main.start .huelle.lesetext{max-width:calc(36em + 52px)}

/* Einleitungsabsatz in zentrierten Kopfbereichen wieder mittig */
.vorspann.mitte{margin-left:auto;margin-right:auto}

/* ---- Seite Fuer Unternehmen ---- */
main.start section.zahlenband .band-titel{text-align:center;color:var(--gelb);
  font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 30px}
.zahlen.vier{grid-template-columns:1fr;gap:30px}
@media(min-width:620px){.zahlen.vier{grid-template-columns:repeat(2,1fr);gap:34px 40px}}
@media(min-width:1000px){.zahlen.vier{grid-template-columns:repeat(4,1fr);gap:26px 30px}}
.zahlen.vier .dazu{max-width:17em;margin-left:auto;margin-right:auto;line-height:1.45}
main.start section.zahlenband p.quellen{text-align:center;font-size:.82rem;opacity:.8;
  margin:34px auto 0;max-width:46em;line-height:1.6}
main.start section.zahlenband p.quellen a{color:var(--creme);text-decoration:underline;
  text-underline-offset:3px}
main.start section.zahlenband p.quellen a:hover{color:var(--gelb)}
main.start .lesetext h2{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 .5em}
main.start .lesetext a{color:var(--navy);text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:3px}
main.start section .formate-ort{text-align:center;margin:30px auto 0;max-width:36em}
@media(min-width:900px){
  .werdegang.zweispalter{grid-template-columns:.75fr 1.25fr;gap:52px;align-items:start}
  .werdegang .ueber-bild{margin-bottom:0}
}
.werdegang h2{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 .3em}

/* ---- Fuer Unternehmen, Runde 2 (12.10.2026) ---- */
/* Held mit kleinerem Foto */
@media(min-width:900px){
  .held.b2b .zweispalter{grid-template-columns:1.45fr .55fr;gap:60px}
}
@media(max-width:899px){
  .held.b2b .held-bild{max-width:240px;margin:0 auto 6px}
}
.held.b2b .knopf-unterzeile a,
main.start section.abschluss .knopf-unterzeile a{color:inherit;text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:3px}
main.start section.abschluss .knopf-unterzeile a{color:var(--creme)}
main.start section.abschluss .knopf-unterzeile a:hover{color:var(--gelb)}

/* Politischer Rueckenwind: zwei Karten und ein grosser Satz */
.politik{display:grid;gap:22px;max-width:960px;margin:0 auto}
@media(min-width:820px){.politik{grid-template-columns:repeat(2,1fr)}}
.politik-karte{background:var(--weiss);border:1px solid rgba(198,140,55,.32);
  border-top:4px solid var(--gold);border-radius:8px;padding:28px 28px 26px;display:flex;flex-direction:column}
main.start .politik-karte p.absender{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 12px}
.politik-karte h3{font-family:'Playfair Display',Georgia,serif;font-size:1.45rem;line-height:1.25;
  color:var(--navy);margin:0 0 12px}
main.start .politik-karte p{margin:0 0 6px}
.politik-karte .mehr{display:inline-block;margin-top:auto;padding-top:14px;font-size:.98rem;color:var(--gold);
  text-decoration:none;font-weight:700}
.politik-karte .mehr::after{content:" \2192"}
.politik-karte .mehr:hover{color:var(--navy)}
.bewirken{text-align:center;margin:58px auto 0;max-width:40em}
main.start .bewirken p.bewirken-satz{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.2;color:var(--navy);margin:0 0 14px}
main.start .bewirken p.bewirken-unter{font-size:1.15rem;margin:0}

/* Kleine mittige Saetze und Knopf */
main.start section p.mittig-satz{text-align:center;margin:34px auto 0;font-style:italic}
main.start section p.mittig-knopf{text-align:center;margin:30px 0 0}

/* Werdegang ohne Foto, persoenlicher Block, neuer Satz */
.werdegang-liste{margin-bottom:0}
.persoenlich{margin-top:52px;background:var(--weiss);border:1px solid rgba(198,140,55,.32);
  border-left:4px solid var(--gold);border-radius:6px;padding:32px 30px}
.persoenlich h3{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.4rem,3vw,1.8rem);
  line-height:1.25;color:var(--navy);margin:0 0 16px}
main.start .persoenlich p{margin:0 0 14px}
main.start .persoenlich p:last-child{margin-bottom:0}
@media(max-width:560px){.persoenlich{padding:26px 20px}}
.neu-satz{text-align:center;margin:64px auto 0;max-width:44em}
main.start .neu-satz p.neu-gross{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.2;color:var(--navy);margin:0 0 12px}
main.start .neu-satz p.neu-unter{font-size:1.1rem;margin:0}

/* Geschuetzter Raum */
.raum{text-align:center;max-width:38em;margin:0 auto}
main.start .raum p.raum-satz{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.2;color:var(--navy);margin:0 0 22px}
main.start .raum p{font-size:1.1rem}

/* Kupferfoto im Kontaktband, Gesicht im Bild halten */
.abschluss-bild.kupfer img{object-position:68% 30%}
.bewirken{max-width:56em}
.bewirken .marker,.raum .marker{white-space:nowrap}
.neu-satz{max-width:58em}
.neu-satz .hervor{white-space:nowrap}
.raum{max-width:46em}
main.start .raum p:not(.raum-satz):not(.augenbraue){max-width:36em;margin-left:auto;margin-right:auto}
@media(max-width:899px){ .held.b2b .held-bild{width:100%;max-width:240px} }

/* Startseite, Angebotskarten (12.10.2026): goldener Knopf zur Unterseite,
   darunter ein gemeinsamer Klönschnack Knopf fuer beide Angebote */
.knopf.gold-knopf{background:linear-gradient(100deg,#b07a2c,#c68c37,#e2b56a,#c68c37,#b07a2c);
  color:var(--navy);border:0;font-weight:700}
.knopf.gold-knopf:hover{background:var(--navy);color:var(--weiss)}
.wege-kloenschnack{text-align:center;margin-top:44px}

/* Laengere Einleitungen unter mittigen Ueberschriften linksbuendig (Lektorat 12.10.2026) */
main.start .abschnitt-kopf p.links{text-align:left}
main.start .raum p:not(.raum-satz):not(.augenbraue){text-align:left}