/* IBE-Akademie – Website (Design angelehnt an die bestehenden IBE-Formularseiten) */

@font-face { font-family: "Cormorant"; font-weight: 500; font-display: swap; src: url("schrift/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 600; font-display: swap; src: url("schrift/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap; src: url("schrift/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap; src: url("schrift/lato-latin-700-normal.woff2") format("woff2"); }

:root {
  --navy: #16324F;
  --navy-2: #1d3f63;
  --navy-3: #0f2439;
  --gold: #C9A227;
  --gold-hell: #E6CF8A;
  --gold-zart: #FBF6E6;
  --grund: #F7F7F5;
  --weiss: #ffffff;
  --text: #22303d;
  --grau: #5d6b78;
  --linie: #e3e6ea;
  --serif: "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --breite: 1160px;
  --schatten: 0 6px 30px rgba(22,50,79,.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; height: auto; }
a { color: var(--navy); }
a:hover { color: var(--gold); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--navy); line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: clamp(30px, 4vw, 40px); }
h3 { font-size: 25px; }
p { margin: 0 0 16px; }
.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100; border-radius: 8px; }
.springen:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.goldlinie { width: 70px; height: 3px; background: var(--gold); border: 0; margin: 14px 0 22px; }
.mitte { text-align: center; }
.mitte .goldlinie { margin-left: auto; margin-right: auto; }
.oberzeile { font-size: 13px; letter-spacing: 3.5px; font-weight: 700; color: var(--gold); text-transform: uppercase; margin: 0 0 12px; }
.einleitung { color: var(--grau); font-size: 18px; max-width: 720px; }
.mitte .einleitung { margin-left: auto; margin-right: auto; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-weight: 700; font-size: 16px; text-decoration: none; padding: 14px 28px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; text-align: center; }
.knopf:hover { transform: translateY(-2px); }
.knopf-gold { background: var(--gold); color: var(--navy-3); box-shadow: 0 8px 20px rgba(201,162,39,.28); }
.knopf-gold:hover { color: var(--navy-3); background: #d4ae35; }
.knopf-hell { border-color: rgba(255,255,255,.65); color: #fff; }
.knopf-hell:hover { color: #fff; background: rgba(255,255,255,.1); }
.knopf-navy { background: var(--navy); color: #fff; }
.knopf-navy:hover { color: #fff; background: var(--navy-2); }
.knopf-rahmen { border-color: var(--navy); color: var(--navy); }
.knopf-rahmen:hover { color: var(--navy); background: rgba(22,50,79,.06); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- Infoleiste ganz oben ---------- */
.infoleiste { background: var(--navy-3); color: #cdd7e1; font-size: 13.5px; }
.infoleiste .rahmen { display: flex; justify-content: flex-end; gap: 22px; padding-top: 7px; padding-bottom: 7px; flex-wrap: wrap; }
.infoleiste a { color: #fff; text-decoration: none; }
.infoleiste a:hover { color: var(--gold-hell); }

/* ---------- Kopfzeile ---------- */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 50; }
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 24px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); flex-shrink: 0; }
.marke img { width: 54px; height: 54px; }
.marke-name { font-family: var(--serif); font-weight: 600; font-size: 25px; letter-spacing: 1.5px; line-height: 1.1; display: block; }
.marke-zusatz { font-size: 10.5px; letter-spacing: 2.6px; color: var(--gold); font-weight: 700; display: block; margin-top: 3px; }
.menue { margin-left: auto; }
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.menue a { text-decoration: none; color: var(--navy); font-weight: 700; font-size: 15.5px; }
.menue a:hover, .menue a[aria-current="page"] { color: var(--gold); }
.menue .knopf { padding: 11px 22px; font-size: 15px; color: var(--navy-3); }
.menue-knopf { display: none; margin-left: auto; background: none; border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--navy); font: 700 14px var(--sans); align-items: center; gap: 8px; }
.menue-knopf span.striche, .menue-knopf span.striche::before, .menue-knopf span.striche::after { display: block; width: 20px; height: 2px; background: var(--navy); position: relative; content: ""; }
.menue-knopf span.striche::before { position: absolute; top: -6px; }
.menue-knopf span.striche::after { position: absolute; top: 6px; }

/* ---------- Brotkrumen ---------- */
.krumen { font-size: 14px; color: var(--grau); padding: 14px 0; }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.krumen li + li::before { content: "›"; margin-right: 6px; color: var(--gold); }
.krumen a { color: var(--grau); text-decoration: none; }
.krumen a:hover { color: var(--navy); }

/* ---------- Titelbereich ---------- */
.held { background: var(--navy); color: var(--weiss); overflow: hidden; }
.held-innen { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 500px; }
.held-text { padding: 64px 20px; display: flex; flex-direction: column; justify-content: center; }
.held h1 { color: #fff; font-size: clamp(40px, 5.4vw, 62px); line-height: 1.06; margin: 0 0 18px; hyphens: manual; }
.held h1 em { font-style: normal; color: var(--gold); }
.held p.unter { font-size: 19px; color: #dfe6ee; margin: 0; max-width: 540px; }
.held-punkte { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.held-punkte li { display: flex; gap: 12px; align-items: flex-start; color: #eef2f6; font-size: 17px; }
.held-punkte li::before { content: ""; flex: 0 0 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316324F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
.held-bild { position: relative; background-size: cover; background-position: center 25%; border-left: 3px solid var(--gold); border-top-left-radius: 220px 100%; }
.bild-gespraechsrunde { background-image: url("../bilder/gespraechsrunde.jpg"); background-position: 40% 30%; }
.bild-whiteboard { background-image: url("../bilder/whiteboard.jpg"); background-position: 100% 0; }
.held.schmal .held-innen { min-height: 440px; }

/* ---------- Faktenleiste ---------- */
.fakten { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.fakten ul { list-style: none; margin: 0 auto; padding: 22px 20px; max-width: var(--breite); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fakten li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--navy); font-size: 15.5px; line-height: 1.3; }
.fakten svg { flex: 0 0 38px; width: 38px; height: 38px; color: var(--gold); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 84px 0; }
.abschnitt.weiss { background: var(--weiss); }
.abschnitt.navy { background: var(--navy); color: #e3e9f0; }
.abschnitt.navy h2, .abschnitt.navy h3 { color: #fff; }
.abschnitt.navy .einleitung { color: #c9d4df; }
.abschnitt-kopf { margin-bottom: 44px; }

/* ---------- Ausbildungskarten ---------- */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ausbildung { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--text); transition: transform .2s ease, box-shadow .2s ease; }
.ausbildung:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(22,50,79,.16); color: var(--text); }
.ausbildung-bild { background: var(--navy); aspect-ratio: 5 / 4; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ausbildung-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 57%; }
.ausbildung-text { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.ausbildung-text h3 { font-size: 26px; margin-bottom: 8px; }
.ausbildung-text p { color: var(--grau); font-size: 16px; flex: 1; }
.mehr { font-weight: 700; color: var(--navy); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.mehr::after { content: "→"; color: var(--gold); transition: transform .2s ease; }
.ausbildung:hover .mehr::after { transform: translateX(4px); }

/* ---------- Bild + Text ---------- */
.bildtext { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.bildtext.umgekehrt { grid-template-columns: 1.1fr 0.9fr; }
.bildtext.umgekehrt .bildtext-bild { order: 2; }
.bildtext-bild { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); position: relative; }
.bildtext-bild img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: center 25%; }
.bildtext-bild::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201,162,39,.7); border-radius: 10px; pointer-events: none; }
.hakenliste { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.hakenliste li { display: flex; gap: 12px; align-items: flex-start; }
.hakenliste li::before { content: ""; flex: 0 0 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--gold-zart) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; border: 1px solid var(--gold-hell); }
.abschnitt.navy .hakenliste li::before { background-color: rgba(201,162,39,.15); border-color: rgba(201,162,39,.6); }

/* ---------- Vorteile ---------- */
.vorteile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.vorteil { background: var(--weiss); border-radius: var(--radius); padding: 30px 24px; box-shadow: var(--schatten); border-top: 3px solid var(--gold); }
.vorteil svg { width: 44px; height: 44px; color: var(--gold); margin-bottom: 14px; }
.vorteil h3 { font-size: 23px; margin-bottom: 8px; }
.vorteil p { color: var(--grau); font-size: 15.5px; margin: 0; }

/* ---------- Ablauf ---------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: schritt; }
.schritte li { counter-increment: schritt; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 28px 24px 24px; position: relative; }
.schritte li::before { content: counter(schritt); font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--navy-3); background: var(--gold); width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.schritte h3 { font-size: 23px; margin-bottom: 6px; }
.schritte p { margin: 0; font-size: 15.5px; color: #c9d4df; }

/* ---------- Siegel ---------- */
.siegelreihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 10px; }
.siegel { width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; }
.siegel img { max-width: 100%; max-height: 100%; object-fit: contain; }
.siegel-platzhalter { border: 2px dashed var(--gold-hell); border-radius: 50%; color: var(--grau); font-size: 14px; text-align: center; padding: 20px; background: var(--weiss); }

/* ---------- Kurz und knapp ---------- */
.knapp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.knapp div { background: var(--weiss); border-radius: var(--radius); padding: 22px 22px 20px; box-shadow: var(--schatten); }
.knapp dt { font-size: 12.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.knapp dd { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 23px; color: var(--navy); line-height: 1.2; }

/* ---------- Aufklapp-Bereiche ---------- */
.aufklapp { display: grid; gap: 12px; }
.aufklapp details { background: var(--weiss); border-radius: var(--radius); box-shadow: 0 3px 16px rgba(22,50,79,.06); border: 1px solid var(--linie); }
.aufklapp summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--navy); position: relative; }
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--gold-zart); color: var(--gold); font: 700 20px/30px var(--sans); text-align: center; }
.aufklapp details[open] summary::after { content: "–"; }
.aufklapp details[open] summary { border-bottom: 1px solid var(--linie); }
.aufklapp .aufklapp-inhalt { padding: 20px 24px 22px; }
.aufklapp .aufklapp-inhalt p:last-child { margin-bottom: 0; }
.aufklapp .hakenliste { margin-top: 4px; grid-template-columns: 1fr 1fr; column-gap: 28px; }

/* ---------- Zweispaltig mit Seitenkasten ---------- */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr); gap: 40px; align-items: start; }
.seitenkasten { background: var(--navy); color: #e3e9f0; border-radius: var(--radius); padding: 30px 28px; position: sticky; top: 110px; box-shadow: var(--schatten); }
.seitenkasten h3 { color: #fff; font-size: 27px; }
.seitenkasten .hakenliste { margin: 14px 0 24px; font-size: 16px; }
.seitenkasten .hakenliste li::before { background-color: rgba(201,162,39,.15); border-color: rgba(201,162,39,.6); }
.seitenkasten .knopf { width: 100%; }
.seitenkasten .tel { display: block; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); color: #fff; text-decoration: none; font-size: 15px; }
.seitenkasten .tel strong { display: block; font-size: 20px; color: var(--gold-hell); }

/* ---------- Kasten Infomaterial ---------- */
.infokasten { background: var(--weiss); border-radius: 20px; box-shadow: var(--schatten); display: grid; grid-template-columns: 0.75fr 1.25fr; overflow: hidden; border: 1px solid var(--linie); }
.infokasten-bild { background: var(--navy); display: flex; align-items: center; justify-content: center; padding: 34px; }
.infokasten-bild img { width: 210px; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.35); transform: rotate(-3deg); }
.infokasten-text { padding: 40px 40px 38px; }

/* ---------- Zusammenfassung ---------- */
.fazit { background: var(--gold-zart); border: 1px solid var(--gold-hell); border-radius: 20px; padding: 40px; }
.fazit .hakenliste { grid-template-columns: 1fr 1fr; column-gap: 32px; }

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--weiss); border-radius: 20px; overflow: hidden; box-shadow: var(--schatten); }
.kontakt-bild { background: url("../bilder/beratung.jpg") 75% 100% / cover; min-height: 440px; }
.kontakt-text { padding: 44px 44px 40px; }
.kontaktzeilen { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.kontaktzeilen li { display: flex; gap: 14px; align-items: flex-start; }
.kontaktzeilen svg { flex: 0 0 26px; width: 26px; height: 26px; color: var(--gold); margin-top: 2px; }
.kontaktzeilen a { font-weight: 700; text-decoration: none; font-size: 19px; }
.kontaktzeilen small { display: block; color: var(--grau); font-size: 14.5px; }

/* ---------- Social ---------- */
.social { display: flex; gap: 14px; justify-content: center; margin-top: 22px; }
.social a { width: 52px; height: 52px; border-radius: 50%; background: var(--weiss); display: flex; align-items: center; justify-content: center; box-shadow: var(--schatten); transition: transform .15s ease; }
.social a:hover { transform: translateY(-3px); }
.social img { width: 30px; height: 30px; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--navy-3); color: #b9c6d3; font-size: 15px; padding: 64px 0 0; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.fuss h2 { color: #fff; font-size: 22px; margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss a { color: #dbe3ea; text-decoration: none; }
.fuss a:hover { color: var(--gold-hell); }
.fuss .marke { color: #fff; margin-bottom: 16px; }
.fuss-social { display: flex; gap: 10px; margin-top: 16px; }
.fuss-social a { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.fuss-social img { width: 24px; height: 24px; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding: 20px 0 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13.5px; color: #8fa1b3; }

/* ---------- Handy & Tablet ---------- */
@media (max-width: 1020px) {
  .karten, .schritte { grid-template-columns: repeat(2, 1fr); }
  .vorteile, .fakten ul, .knapp { grid-template-columns: repeat(2, 1fr); }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .zweispaltig { grid-template-columns: 1fr; }
  .seitenkasten { position: static; }
}
@media (max-width: 900px) {
  .menue-knopf { display: inline-flex; }
  .menue { position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); border-bottom: 1px solid var(--linie); box-shadow: 0 12px 24px rgba(22,50,79,.1); display: none; }
  .menue.offen { display: block; }
  .menue ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; }
  .menue li a { display: block; padding: 13px 0; border-bottom: 1px solid var(--linie); }
  .menue li:last-child a { border: 0; margin-top: 14px; display: flex; }
  .held-innen { grid-template-columns: 1fr; min-height: 0; }
  .held-bild { min-height: 300px; order: -1; border-left: 0; border-bottom: 3px solid var(--gold); border-top-left-radius: 0; border-bottom-left-radius: 50% 60px; border-bottom-right-radius: 50% 60px; }
  .held-text { padding: 40px 20px 50px; }
  .bildtext, .bildtext.umgekehrt, .kontakt, .infokasten { grid-template-columns: 1fr; gap: 30px; }
  .bildtext.umgekehrt .bildtext-bild { order: 0; }
  .bildtext-bild img { aspect-ratio: 4 / 3; }
  .kontakt-bild { min-height: 260px; }
  .infokasten-bild img { width: 170px; }
  .aufklapp .hakenliste, .fazit .hakenliste { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .infoleiste { display: none; }
  .abschnitt { padding: 60px 0; }
  .karten, .schritte, .vorteile, .knapp { grid-template-columns: 1fr; }
  .fakten ul { grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 16px; }
  .fakten li { font-size: 14px; }
  .fakten svg { flex-basis: 30px; width: 30px; height: 30px; }
  .rahmen { padding: 0 16px; }
  .marke img { width: 44px; height: 44px; }
  .marke-name { font-size: 21px; }
  .marke-zusatz { font-size: 9px; letter-spacing: 1.8px; }
  .kontakt-text, .infokasten-text, .fazit { padding: 28px 22px; }
  .knopfreihe .knopf { width: 100%; }
  .fuss-raster { grid-template-columns: 1fr; }
  .aufklapp summary { font-size: 21px; padding: 18px 56px 18px 18px; }
  .aufklapp .aufklapp-inhalt { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Kleinigkeiten ---------- */
.knapp-titel { margin-top: 40px; margin-bottom: 18px; font-size: 28px; }
.zweispaltig .knapp { grid-template-columns: repeat(2, 1fr); }
.mitte .knopfreihe { justify-content: center; }
.abschnitt-kopf .einleitung { margin-bottom: 0; }
.instagram-hinweis { margin-top: 36px; }
@media (max-width: 640px) {
  .zweispaltig .knapp { grid-template-columns: 1fr; gap: 12px; }
  .knapp dd { font-size: 21px; }
  .knapp div { padding: 16px 18px; }
}

/* ---------- Ausbildungskarten mit Symbol ---------- */
.ausbildung-kopf { position: relative; height: 150px; background: radial-gradient(circle at 50% 120%, rgba(201,162,39,.35), transparent 60%), linear-gradient(160deg, var(--navy-2), var(--navy) 55%, var(--navy-3)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ausbildung-kopf::before, .ausbildung-kopf::after { content: ""; position: absolute; border: 1px solid rgba(201,162,39,.28); border-radius: 50%; }
.ausbildung-kopf::before { width: 230px; height: 230px; }
.ausbildung-kopf::after { width: 330px; height: 330px; border-color: rgba(201,162,39,.14); }
.ausbildung-icon { position: relative; z-index: 1; width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid var(--gold); background: rgba(15,36,57,.55); display: flex; align-items: center; justify-content: center; color: var(--gold-hell); box-shadow: 0 0 34px rgba(201,162,39,.25); transition: transform .3s ease; }
.ausbildung-icon svg { width: 52px; height: 52px; }
.ausbildung:hover .ausbildung-icon { transform: scale(1.06); }
.karten-ober { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 6px !important; flex: 0 !important; }
.infokasten-icon { width: 170px; height: 170px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold-hell); box-shadow: 0 0 60px rgba(201,162,39,.3), inset 0 0 30px rgba(201,162,39,.12); }
.infokasten-icon svg { width: 96px; height: 96px; }
.infokasten-bild { background: radial-gradient(circle at 50% 50%, rgba(201,162,39,.18), transparent 65%), var(--navy); min-height: 260px; }

/* ---------- Video "von überall" ---------- */
.video-rahmen { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); border: 3px solid var(--gold); background: var(--navy-3); }
.video-rahmen video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-knopf { position: absolute; right: 12px; bottom: 12px; background: rgba(15,36,57,.75); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 7px 14px; font: 700 13px var(--sans); cursor: pointer; }
.video-knopf:hover { background: rgba(15,36,57,.95); }
.ueberall .bildtext { grid-template-columns: 1.15fr 0.85fr; }
.ueberall p { color: #dbe3ea; }
@media (max-width: 900px) { .ueberall .bildtext { grid-template-columns: 1fr; } }
.ausbildung-text .karten-ober { color: var(--gold); }

/* =====================================================================
   BESONDERE ELEMENTE
   ===================================================================== */

/* ---------- Hereinschweben ---------- */
.js .zeigen { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .zeigen.sichtbar { opacity: 1; transform: none; }
.js.ruhig .zeigen { opacity: 1; transform: none; }
.flip-raster > .zeigen:nth-child(3n+2), .vorteile > .zeigen:nth-child(2), .lexikon-raster > .zeigen:nth-child(2) { transition-delay: .12s; }
.flip-raster > .zeigen:nth-child(3n), .vorteile > .zeigen:nth-child(3), .lexikon-raster > .zeigen:nth-child(3) { transition-delay: .24s; }
.vorteile > .zeigen:nth-child(4), .lexikon-raster > .zeigen:nth-child(4) { transition-delay: .36s; }

/* ---------- Goldener Faden ---------- */
.faden { position: fixed; left: 22px; top: 12vh; height: 76vh; width: 2px; background: rgba(201,162,39,.16); z-index: 40; border-radius: 2px; display: none; }
.faden-fuellung { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--gold-hell), var(--gold)); transform-origin: top; transform: scaleY(0); border-radius: 2px; }
.faden-punkt { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,39,.2), 0 0 16px rgba(201,162,39,.8); }
@media (min-width: 1300px) { .faden { display: block; } }

/* ---------- Titelbereich: Sterne + Logo-Bahnen + Wechselwort ---------- */
.held { position: relative; }
.held .sterne { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.held-innen { position: relative; z-index: 1; }
.held-text { position: relative; }
.logo-orbit { position: absolute; width: 560px; height: 560px; left: 50%; top: 50%; transform: translate(-58%, -50%); opacity: .2; pointer-events: none; z-index: -1; }
.logo-orbit .bahn { fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-dasharray: 560; stroke-dashoffset: 560; animation: zeichnen 2.6s ease forwards; }
.logo-orbit .bahn-2 { stroke: #8fb3d6; animation-delay: .35s; }
.logo-orbit .bahn-3 { animation-delay: .7s; }
.logo-orbit .orbit-dreh { transform-origin: 0 0; animation: drehen 90s linear infinite; }
.logo-orbit .orbit-kern { animation: pulsieren 6s ease-in-out infinite; transform-origin: 0 0; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes pulsieren { 0%,100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.wechselwort { display: inline-block; transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
.wechselwort.weg { opacity: 0; transform: translateY(12px); filter: blur(4px); }
.wechselwort em { font-style: normal; color: var(--gold); }
.held-symbol { display: inline-flex; width: 74px; height: 74px; margin-bottom: 18px; }
.held-symbol svg { width: 42px; height: 42px; }

/* ---------- Lebende Symbole ---------- */
.sym g, .sym path { transform-box: fill-box; transform-origin: center; }
.sym .sym-lid, .sym .sym-herz, .sym .sym-pflanze, .sym .sym-spirale, .sym .sym-balken, .sym .sym-ring, .sym .sym-strahlen { transition: transform .6s cubic-bezier(.3,1.4,.5,1), opacity .4s; }
.sym .sym-pflanze { transform-origin: 50% 100%; }
.sym .sym-balken { transform-origin: 50% 0; }
.sym-puls { stroke-dasharray: 60; stroke-dashoffset: 0; }
.ausbildung:hover .sym-lid, .orbit-punkt:hover .sym-lid, .flip:hover .sym-lid { animation: blinzeln .7s ease; }
.ausbildung:hover .sym-strahlen, .orbit-punkt:hover .sym-strahlen, .flip:hover .sym-strahlen { transform: scale(1.12); }
.ausbildung:hover .sym-herz, .orbit-punkt:hover .sym-herz, .flip:hover .sym-herz { animation: schlagen 1s ease; }
.ausbildung:hover .sym-puls, .orbit-punkt:hover .sym-puls, .flip:hover .sym-puls { animation: puls 1.2s ease; }
.ausbildung:hover .sym-pflanze, .orbit-punkt:hover .sym-pflanze, .flip:hover .sym-pflanze { transform: scale(1.14); }
.ausbildung:hover .sym-spirale, .orbit-punkt:hover .sym-spirale, .flip:hover .sym-spirale { transform: rotate(200deg); }
.ausbildung:hover .sym-balken, .orbit-punkt:hover .sym-balken, .flip:hover .sym-balken { animation: pendeln 1.4s ease; }
.ausbildung:hover .sym-ring, .orbit-punkt:hover .sym-ring, .flip:hover .sym-ring { transform: rotate(90deg); }
@keyframes blinzeln { 0%,100% { transform: scaleY(1); } 40% { transform: scaleY(.1); } }
@keyframes schlagen { 0%,100% { transform: scale(1); } 25% { transform: scale(1.15); } 50% { transform: scale(.97); } 70% { transform: scale(1.08); } }
@keyframes puls { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes pendeln { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 55% { transform: rotate(6deg); } 80% { transform: rotate(-2deg); } }

/* ---------- Orbit-Navigation ---------- */
.orbit-nav { position: relative; width: 620px; height: 620px; margin: 0 auto 56px; }
.orbit-ringe span { position: absolute; inset: 70px; border: 1px solid rgba(201,162,39,.35); border-radius: 50%; }
.orbit-ringe span + span { inset: 150px; border-style: dashed; border-color: rgba(22,50,79,.15); }
.orbit-mitte { position: absolute; left: 50%; top: 50%; width: 260px; transform: translate(-50%, -50%); text-align: center; transition: transform .4s ease; }
.orbit-mitte img { width: 110px; height: 110px; margin: 0 auto 10px; filter: drop-shadow(0 0 22px rgba(201,162,39,.35)); }
.orbit-mitte-titel { font-family: var(--serif); font-weight: 600; font-size: 26px; color: var(--navy); margin: 0 0 4px; line-height: 1.15; }
.orbit-mitte-text { font-size: 14.5px; color: var(--grau); margin: 0; line-height: 1.45; min-height: 64px; }
.orbit-mitte.aktiv .orbit-mitte-titel { color: var(--gold); }
.orbit-kreis { position: absolute; inset: 0; animation: drehen 120s linear infinite; }
.orbit-nav:hover .orbit-kreis, .orbit-nav:focus-within .orbit-kreis, .orbit-nav:hover .orbit-punkt, .orbit-nav:focus-within .orbit-punkt { animation-play-state: paused; }
.orbit-punkt { position: absolute; left: 50%; top: 50%; width: 120px; margin: -46px 0 0 -60px; text-align: center; text-decoration: none; color: var(--navy); animation: drehen 120s linear infinite reverse; }
.pos-1 { transform: rotate(0deg) translateY(-240px) rotate(0deg); }
.orbit-punkt.pos-1 { translate: 0 -240px; } .orbit-punkt.pos-2 { translate: 208px -120px; } .orbit-punkt.pos-3 { translate: 208px 120px; }
.orbit-punkt.pos-4 { translate: 0 240px; } .orbit-punkt.pos-5 { translate: -208px 120px; } .orbit-punkt.pos-6 { translate: -208px -120px; }
.orbit-punkt.pos-1, .orbit-punkt.pos-2, .orbit-punkt.pos-3, .orbit-punkt.pos-4, .orbit-punkt.pos-5, .orbit-punkt.pos-6 { transform: none; }
.orbit-symbol { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 50%; background: linear-gradient(160deg, var(--navy-2), var(--navy-3)); border: 1.5px solid var(--gold); color: var(--gold-hell); box-shadow: 0 8px 24px rgba(22,50,79,.25); transition: transform .3s ease, box-shadow .3s ease; }
.orbit-symbol svg { width: 40px; height: 40px; }
.orbit-name { display: block; font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.orbit-punkt:hover .orbit-symbol, .orbit-punkt:focus .orbit-symbol { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(201,162,39,.18), 0 0 30px rgba(201,162,39,.55); }
@media (max-width: 900px) { .orbit-nav { display: none; } }

/* ---------- Karten zum Umdrehen ---------- */
.flip { position: relative; perspective: 1400px; display: flex; flex-direction: column; }
.flip-innen { position: relative; flex: 1; display: grid; transition: transform .8s cubic-bezier(.3,.8,.3,1); transform-style: preserve-3d; }
.flip-vorne, .flip-hinten { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-vorne:hover { transform: none; }
.flip-hinten { transform: rotateY(180deg); background: linear-gradient(160deg, var(--navy-2), var(--navy) 60%, var(--navy-3)); color: #e3e9f0; border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; box-shadow: var(--schatten); visibility: hidden; transition: visibility 0s .4s; }
.flip-hinten h3 { color: #fff; font-size: 25px; }
.flip-hinten .hakenliste { margin: 8px 0 18px; font-size: 15.5px; flex: 1; }
.flip-hinten .hakenliste li::before { background-color: rgba(201,162,39,.15); border-color: rgba(201,162,39,.6); }
.flip-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.flip-knoepfe .knopf { padding: 10px 18px; font-size: 14.5px; }
.flip.gedreht .flip-innen { transform: rotateY(180deg); }
.flip.gedreht .flip-hinten { visibility: visible; transition: visibility 0s 0s; }
.flip.gedreht .flip-vorne { visibility: hidden; transition: visibility 0s .4s; }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip-innen { transform: rotateY(180deg); }
  .flip:hover .flip-hinten { visibility: visible; transition: visibility 0s 0s; }
  .flip:hover .flip-vorne { visibility: hidden; transition: visibility 0s .4s; }
  .flip-knopf { opacity: 0; pointer-events: none; }
  .flip-knopf:focus-visible { opacity: 1; pointer-events: auto; }
}
.flip-knopf { margin: 10px auto 0; background: none; border: 1px solid var(--linie); border-radius: 999px; padding: 7px 16px; font: 700 13.5px var(--sans); color: var(--navy); cursor: pointer; }
.ruhig .flip-innen { transition: none; }

/* ---------- Quiz ---------- */
.quiz-abschnitt { background: radial-gradient(circle at 15% 20%, rgba(201,162,39,.10), transparent 40%), radial-gradient(circle at 85% 80%, rgba(22,50,79,.08), transparent 45%), var(--grund); }
.quiz { max-width: 860px; margin: 0 auto; background: var(--weiss); border-radius: 22px; box-shadow: 0 14px 50px rgba(22,50,79,.12); padding: 40px 44px 36px; border: 1px solid var(--linie); }
.quiz-fortschritt { height: 6px; background: var(--gold-zart); border-radius: 6px; overflow: hidden; margin-bottom: 30px; }
.quiz-fortschritt span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-hell), var(--gold)); transition: width .5s ease; }
.quiz-frage { border: 0; padding: 0; margin: 0; animation: einblenden .5s ease; }
.quiz-frage legend { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.2vw, 32px); color: var(--navy); margin-bottom: 22px; line-height: 1.2; padding: 0; }
.quiz-zaehler { display: block; font-family: var(--sans); font-size: 12.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
.quiz-antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-antwort { text-align: left; background: var(--grund); border: 1.5px solid var(--linie); border-radius: 14px; padding: 16px 18px; font: 400 16px/1.4 var(--sans); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.quiz-antwort:hover, .quiz-antwort:focus-visible { border-color: var(--gold); background: var(--gold-zart); transform: translateY(-2px); }
.quiz-ergebnis { animation: einblenden .6s ease; outline: none; }
.quiz-treffer { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.quiz-treffer .ausbildung-icon { width: 110px; height: 110px; background: linear-gradient(160deg, var(--navy-2), var(--navy-3)); }
.quiz-treffer .ausbildung-icon svg { width: 60px; height: 60px; }
.quiz-treffer h3 { font-size: 32px; }
.quiz-treffer .knopf-hell { border-color: var(--navy); color: var(--navy); }
.quiz-zweite { font-style: italic; color: var(--grau); }
.quiz-neu { display: block; margin: 24px auto 0; background: none; border: 0; color: var(--grau); text-decoration: underline; cursor: pointer; font: 400 15px var(--sans); }
@keyframes einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Logo-Abschnitt mit Video ---------- */
.abschnitt.dunkel { background: radial-gradient(circle at 25% 50%, rgba(201,162,39,.14), transparent 45%), #050a12; color: #c9d4df; }
.abschnitt.dunkel h2, .abschnitt.dunkel h3 { color: #fff; }
.logo-raster { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: center; }
.logo-video { border-radius: 26px; overflow: hidden; border: 1px solid rgba(201,162,39,.5); box-shadow: 0 0 80px rgba(201,162,39,.18); background: #000; }
.logo-video video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.saeulen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.saeulen div { border-top: 2px solid var(--gold); padding-top: 14px; }
.saeulen h3 { font-size: 26px; color: var(--gold-hell) !important; margin-bottom: 6px; }
.saeulen p { font-size: 15.5px; margin: 0; }

/* ---------- Brief der Gründerin ---------- */
.brief-abschnitt { background: linear-gradient(180deg, var(--grund), #efeae0); }
.brief { max-width: 760px; margin: 0 auto; background: #fffdf7; border-radius: 6px; padding: 56px 64px; box-shadow: 0 2px 0 #e9e2d0, 0 20px 50px rgba(22,50,79,.12); position: relative; transform: rotate(-.6deg); }
.brief::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201,162,39,.35); pointer-events: none; }
.brief h2 { margin-bottom: 22px; }
.brief p { font-size: 17.5px; }
.brief-gruss { margin-top: 26px; }
.unterschrift { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 44px; color: var(--navy); margin: 0 0 2px; transform: rotate(-3deg); transform-origin: left; }
.brief-rolle { font-size: 14.5px !important; color: var(--grau); }

/* ---------- Ablauf: leuchtender Weg ---------- */
.leuchtweg li::before { background: transparent; border: 2px solid rgba(201,162,39,.5); color: var(--gold-hell); transition: background .6s, color .6s, box-shadow .6s, transform .6s; }
.leuchtweg li { transition: border-color .6s, background .6s; }
.leuchtweg li.an::before { background: var(--gold); color: var(--navy-3); box-shadow: 0 0 0 6px rgba(201,162,39,.15), 0 0 28px rgba(201,162,39,.6); transform: scale(1.06); }
.leuchtweg li.an { border-color: rgba(201,162,39,.45); background: rgba(255,255,255,.07); }
@media (min-width: 1021px) {
  .leuchtweg li:not(:nth-child(3n))::after { content: ""; position: absolute; top: 49px; left: calc(24px + 42px); right: -22px; height: 2px; background: linear-gradient(90deg, var(--gold), rgba(201,162,39,0)); transform: scaleX(0); transform-origin: left; transition: transform .8s ease .2s; }
  .leuchtweg li.an:not(:nth-child(3n))::after { transform: scaleX(1); }
}

/* ---------- Atemübung ---------- */
.atem-abschnitt { background: linear-gradient(180deg, #eef2f0, var(--grund)); }
.atem-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.hinweis { font-size: 14.5px; color: var(--grau); }
.atem { position: relative; width: 340px; height: 340px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.atem-ring { position: absolute; inset: 0; border: 1px dashed rgba(201,162,39,.6); border-radius: 50%; }
.atem-kreis { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a5582, var(--navy) 60%, var(--navy-3)); box-shadow: 0 0 0 10px rgba(201,162,39,.12), 0 0 50px rgba(201,162,39,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; transform: scale(1); transition: transform 4s ease-in-out, box-shadow 4s ease-in-out; }
.atem-text { font-family: var(--serif); font-weight: 600; font-size: 22px; }
.atem-rest { font-size: 11.5px; color: var(--gold-hell); margin-top: 4px; max-width: 120px; }
.atem.ein .atem-kreis { transform: scale(2); transition-duration: 4s; box-shadow: 0 0 0 14px rgba(201,162,39,.18), 0 0 80px rgba(201,162,39,.5); }
.atem.aus .atem-kreis { transform: scale(1); transition-duration: 6s; }
.atem.ein .atem-text, .atem.aus .atem-text { font-size: 15px; }
.atem.ein .atem-rest, .atem.aus .atem-rest { font-size: 7px; }

/* ---------- Infoabende ---------- */
.infoabend-leer { max-width: 640px; margin: 10px auto 0; background: var(--weiss); border-radius: 18px; padding: 32px; box-shadow: var(--schatten); border: 1px solid var(--linie); }
.infoabend-leer svg { width: 44px; height: 44px; color: var(--gold); margin: 0 auto 10px; }
.infoabende { list-style: none; padding: 0; margin: 10px auto 0; max-width: 720px; display: grid; gap: 12px; }
.infoabende li { display: flex; align-items: center; gap: 20px; background: var(--weiss); border-radius: 14px; padding: 16px 20px; box-shadow: var(--schatten); }
.ia-datum { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--navy); }
.ia-zeit { color: var(--grau); flex: 1; text-align: left; }

/* ---------- Siegel-Band ---------- */
.siegelband { overflow: hidden; margin-top: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.siegelband-spur { display: flex; gap: 40px; width: max-content; animation: band 30s linear infinite; padding: 10px 0; }
.siegelband-kopie { display: flex; gap: 40px; }
.siegelband:hover .siegelband-spur { animation-play-state: paused; }
@keyframes band { to { transform: translateX(calc(-50% - 20px)); } }
.ruhig .siegelband-spur { animation: none; margin: 0 auto; }
.ruhig .siegelband-kopie { display: none; }

/* ---------- Mondphase ---------- */
.nl-raster { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.mond { text-align: center; background: radial-gradient(circle at 50% 35%, #1f4670, var(--navy-3) 70%); border-radius: 22px; padding: 32px 24px 26px; color: #dbe3ea; box-shadow: var(--schatten); }
.mond-bild { width: 150px; height: 150px; margin: 0 auto 14px; display: block; filter: drop-shadow(0 0 26px rgba(243,221,143,.35)); }
.mond-dunkel { fill: #24364a; }
.mond-hell { fill: #f3e6b8; }
.mond-rand { fill: none; stroke: rgba(243,221,143,.4); stroke-width: 1; }
.mond-titel { font-size: 12.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 4px; }
.mond-name { font-family: var(--serif); font-weight: 600; font-size: 28px; color: #fff; margin: 0 0 4px; }
.mond-info { font-size: 14px; margin: 0; color: #b9c6d3; }
.social-links { justify-content: flex-start; }

/* ---------- Ornament ---------- */
.ornament { color: var(--gold); max-width: 400px; margin: 0 auto; padding: 0 20px; opacity: .8; }
.ornament svg { display: block; width: 100%; height: auto; }

/* ---------- Lexikon ---------- */
.lexikon-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.lexikon-karte { background: var(--weiss); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--schatten); text-decoration: none; color: var(--text); border: 1px solid var(--linie); transition: transform .2s, box-shadow .2s, border-color .2s; display: flex; flex-direction: column; }
.abschnitt.weiss .lexikon-karte { background: var(--grund); }
.lexikon-karte:hover { transform: translateY(-4px); border-color: var(--gold-hell); box-shadow: 0 14px 34px rgba(22,50,79,.14); color: var(--text); }
.lexikon-karte svg { width: 34px; height: 34px; color: var(--gold); margin-bottom: 12px; }
.lexikon-karte h3 { font-size: 26px; margin-bottom: 6px; }
.lexikon-karte p { color: var(--grau); font-size: 15.5px; flex: 1; }
.lexikon-held { min-height: 0; }
.lexikon-held-innen { position: relative; z-index: 1; padding-top: 70px; padding-bottom: 70px; }
.lexikon-held h1 { color: #fff; font-size: clamp(40px, 5vw, 58px); margin-bottom: 10px; }
.lexikon-held .unter { color: #dfe6ee; font-size: 19px; max-width: 640px; margin: 0; }
.lexikon-text { font-size: 18px; }
.lexikon-text .rechnung { background: var(--gold-zart); border-left: 3px solid var(--gold); padding: 14px 18px; border-radius: 0 10px 10px 0; font-size: 19px; }
.lexikon-zurueck { margin-top: 30px; }
.seitenkasten p { color: #dbe3ea; }

/* ---------- Farbwelt je Ausbildung ---------- */
.farbe-achtsamkeit { --akzent: #8fb59a; }
.farbe-achtsamkeit .held { background: linear-gradient(120deg, var(--navy) 45%, #1f4a45); }
.farbe-achtsamkeit .held-punkte li::before { background-color: var(--akzent); }
.farbe-achtsamkeit .oberzeile { color: #b5953a; }
.farbe-achtsamkeit .held .oberzeile, .farbe-achtsamkeit .held h1 em { color: #a9d3b4; }
.farbe-achtsamkeit .held-symbol { border-color: var(--akzent); color: #cfe6d5; box-shadow: 0 0 30px rgba(143,181,154,.35); }
.farbe-achtsamkeit .fazit { background: #eef5f0; border-color: #c3dccb; }
.farbe-achtsamkeit .aufklapp summary::after { background: #e5f0e8; color: #4d7a5a; }

/* ---------- Handy-Schnellleiste ---------- */
.handyleiste { display: none; }
@media (max-width: 900px) {
  .handyleiste { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; gap: 8px; padding: 8px; background: rgba(15,36,57,.94); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.3); backdrop-filter: blur(8px); }
  .handyleiste-info { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--navy-3); font-weight: 700; text-decoration: none; border-radius: 999px; padding: 12px 14px; font-size: 15px; }
  .handyleiste-rund { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255,255,255,.3); }
  .handyleiste-rund svg { width: 22px; height: 22px; }
  .fuss { padding-bottom: 80px; }
}

/* ---------- Responsive für die neuen Elemente ---------- */
@media (max-width: 1020px) {
  .lexikon-raster { grid-template-columns: 1fr 1fr; }
  .logo-raster { grid-template-columns: 280px 1fr; gap: 40px; }
  .saeulen { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .logo-orbit { width: 380px; height: 380px; transform: translate(-50%, -50%); }
  .logo-raster, .atem-raster, .nl-raster { grid-template-columns: 1fr; }
  .logo-video { max-width: 300px; margin: 0 auto; }
  .quiz { padding: 28px 22px; }
  .quiz-antworten { grid-template-columns: 1fr; }
  .quiz-treffer { grid-template-columns: 1fr; gap: 16px; }
  .brief { padding: 40px 28px; transform: none; }
  .mond { max-width: 320px; margin: 0 auto; }
  .atem { width: 300px; height: 300px; }
}
@media (max-width: 640px) {
  .lexikon-raster { grid-template-columns: 1fr; }
  .unterschrift { font-size: 38px; }
  .atem { width: 280px; height: 280px; }
  .atem-kreis { width: 130px; height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-orbit .bahn { animation: none; stroke-dashoffset: 0; }
  .logo-orbit .orbit-dreh, .logo-orbit .orbit-kern, .orbit-kreis, .orbit-punkt, .siegelband-spur { animation: none !important; }
}
.brief .unterschrift { font-size: 46px; margin: 4px 0 4px; }
@media (hover: hover) and (pointer: fine) { .flip-knopf { position: absolute; bottom: -38px; left: 50%; transform: translateX(-50%); } }
@media (max-width: 640px) { .brief .unterschrift { font-size: 38px; } }
[hidden] { display: none !important; }
.flip-hinten .hakenliste { align-content: start; gap: 10px; }

/* ---------- IBE-Assistent: Einpassung in die Website (body davor = setzt sich gegen ibe-chat.css durch) ---------- */
body #ibe-chat .launcher { z-index: 70; }
body #ibe-chat .panel { z-index: 75; }
@media (max-width: 900px) {
  body #ibe-chat .launcher { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); right: 14px; }
  body #ibe-chat .launcher .tip { display: none; }
  body #ibe-chat .bubble { width: 56px; height: 56px; }
  body #ibe-chat .panel { bottom: calc(156px + env(safe-area-inset-bottom, 0px)); right: 12px; height: min(560px, calc(100% - 230px)); }
}

/* ---------- Mondfenster ---------- */
.nl-abschnitt { background: radial-gradient(ellipse 60% 70% at 22% 45%, rgba(255,236,190,.55), transparent 70%), linear-gradient(180deg, #f4efe5, #ece5d6); position: relative; overflow: hidden; }
.nl-abschnitt::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(120,100,70,.025) 0 2px, transparent 2px 7px); pointer-events: none; }
.nl-raster { grid-template-columns: 440px 1fr; gap: 72px; position: relative; }
.fenster { position: relative; margin: 0 auto; width: 380px; padding: 0 0 0; }
.fenster-rahmen { position: relative; height: 470px; padding: 16px; background: linear-gradient(145deg, #ffffff, #ebe6dc); border-radius: 190px 190px 6px 6px; box-shadow: 0 30px 60px rgba(60,45,20,.22), 0 2px 0 #fff inset, 0 0 0 1px rgba(120,100,70,.18), inset 0 -3px 6px rgba(120,100,70,.15); z-index: 2; }
.fenster-glas { position: relative; height: 100%; border-radius: 174px 174px 3px 3px; overflow: hidden; background: #071122; box-shadow: inset 0 0 0 3px #d9d2c4, inset 0 6px 18px rgba(0,0,0,.6); }
.nachthimmel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mond-hof { position: absolute; top: 15%; right: 15%; width: 31%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 40px 8px rgba(243,230,190, calc(var(--mondlicht, .3) * .55)), 0 0 120px 30px rgba(243,230,190, calc(var(--mondlicht, .3) * .25)); }
.mond-canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.sprosse { position: absolute; background: linear-gradient(90deg, #e9e3d7, #ffffff 45%, #ddd6c8); box-shadow: 0 0 6px rgba(0,0,0,.45); z-index: 3; }
.sprosse-v { top: 0; bottom: 0; left: 50%; width: 9px; margin-left: -4.5px; }
.sprosse-h { left: 0; right: 0; top: 56%; height: 9px; background: linear-gradient(180deg, #e9e3d7, #ffffff 45%, #ddd6c8); }
.spiegelung { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 60%, rgba(255,255,255,.06) 72%, rgba(255,255,255,0) 80%); pointer-events: none; z-index: 4; }
.vorhang { position: absolute; top: -14px; width: 118px; height: 548px; z-index: 3; filter: drop-shadow(0 14px 18px rgba(60,45,20,.22)); }
.vorhang-l { left: -82px; }
.vorhang-r { right: -82px; }
.stange { position: absolute; top: -24px; left: -104px; right: -104px; height: 9px; border-radius: 6px; background: linear-gradient(180deg, #ecd486, #c9a227 55%, #9c7a17); box-shadow: 0 3px 6px rgba(60,45,20,.3); z-index: 4; }
.stange::before, .stange::after { content: ""; position: absolute; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f6e2a0, #c9a227 60%, #8d6d12); }
.stange::before { left: -12px; } .stange::after { right: -12px; }
.fensterbank { position: relative; z-index: 4; display: block; margin: -4px -38px 0; padding: 18px 20px 16px; text-align: center; background: linear-gradient(180deg, #ffffff, #ece6da); border-radius: 6px; box-shadow: 0 14px 26px rgba(60,45,20,.20), 0 1px 0 #fff inset, 0 0 0 1px rgba(120,100,70,.15); }
.fensterbank .mond-titel { display: block; font-size: 12px; letter-spacing: 2.8px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 2px; }
.fensterbank .mond-name { display: block; font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--navy); line-height: 1.2; }
.fensterbank .mond-info { display: block; font-size: 14px; color: var(--grau); margin-top: 2px; }
@media (max-width: 1020px) { .nl-raster { grid-template-columns: 1fr; gap: 50px; } }
@media (max-width: 640px) {
  .fenster { width: 270px; }
  .fenster-rahmen { height: 340px; padding: 12px; border-radius: 135px 135px 6px 6px; }
  .fenster-glas { border-radius: 123px 123px 3px 3px; }
  .vorhang { width: 80px; height: 400px; top: -10px; }
  .vorhang-l { left: -50px; } .vorhang-r { right: -50px; }
  .stange { left: -62px; right: -62px; top: -18px; }
  .fensterbank { margin: -4px -24px 0; }
  .fensterbank .mond-name { font-size: 24px; }
}

/* Wasserzeichen-Logo in den Fotos vollständig zeigen */
.bildtext-bild img.parallax { object-position: 100% 100%; transform-origin: 100% 100%; }
.bildtext-bild::after { inset: 14px 14px 14px 14px; }
/* Quiz: Resonanz-Balken */
.quiz-resonanz { margin: 14px 0 6px; }
.quiz-resonanz-titel { font-size: 12.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 8px !important; }
.quiz-balken { display: grid; grid-template-columns: minmax(0, 1fr) 1.2fr; gap: 12px; align-items: center; margin-bottom: 8px; }
.quiz-balken-name { font-size: 14.5px; color: var(--navy); font-weight: 700; }
.quiz-balken-spur { height: 8px; background: var(--gold-zart); border-radius: 8px; overflow: hidden; }
.quiz-balken-wert { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-hell), var(--gold)); border-radius: 8px; transition: width 1s ease; }
@media (max-width: 640px) { .quiz-balken { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Mond: Zeichen, Impuls, Regler ---------- */
.fensterbank .mond-zeichen { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(120,100,70,.18); font-size: 14.5px; color: var(--navy); font-weight: 700; }
.mond-reise { position: relative; z-index: 4; margin: 18px -20px 0; text-align: center; }
.mond-impuls { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--navy); margin: 0 0 16px; min-height: 2.6em; line-height: 1.3; }
.mond-regler-label { display: block; font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
.mond-regler { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #16324F, #2a5582 50%, #16324F); outline: none; cursor: pointer; }
.mond-regler::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4cc, #e6cf8a 45%, #c9a227); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(201,162,39,.25), 0 4px 10px rgba(0,0,0,.25); }
.mond-regler::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4cc, #e6cf8a 45%, #c9a227); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(201,162,39,.25), 0 4px 10px rgba(0,0,0,.25); }
.mond-regler:focus-visible { box-shadow: 0 0 0 3px rgba(201,162,39,.5); }
.mond-regler-skala { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--grau); margin-top: 6px; }
.mond-hinweis { font-size: 15px; color: var(--navy); background: rgba(255,255,255,.6); border-left: 3px solid var(--gold); padding: 10px 14px; border-radius: 0 10px 10px 0; max-width: 520px; }
@media (max-width: 640px) { .mond-reise { margin: 16px -10px 0; } .mond-impuls { font-size: 19px; } }

/* ---------- Ergänzung 08.10.2026: weitere Ausbildungsseiten ---------- */
.farbe-energetik { --akzent: #d8b25c; }
.farbe-energetik .held { background: linear-gradient(120deg, var(--navy) 45%, #4a3a16); }
.farbe-energetik .held-punkte li::before { background-color: var(--akzent); }
.farbe-energetik .oberzeile { color: #b5953a; }
.farbe-energetik .held .oberzeile, .farbe-energetik .held h1 em, .farbe-energetik .held-unterzeile { color: #ecd398; }
.farbe-energetik .held-symbol { border-color: var(--akzent); color: #f6e7bf; box-shadow: 0 0 30px rgba(216,178,92,.35); }
.farbe-energetik .fazit { background: #faf4e4; border-color: #ead9a8; }
.farbe-energetik .aufklapp summary::after { background: #f5ebd0; color: #8a6a1c; }
.farbe-numerologie { --akzent: #a99bd6; }
.farbe-numerologie .held { background: linear-gradient(120deg, var(--navy) 45%, #2f2a55); }
.farbe-numerologie .held-punkte li::before { background-color: var(--akzent); }
.farbe-numerologie .oberzeile { color: #b5953a; }
.farbe-numerologie .held .oberzeile, .farbe-numerologie .held h1 em, .farbe-numerologie .held-unterzeile { color: #cbc1ee; }
.farbe-numerologie .held-symbol { border-color: var(--akzent); color: #e4def8; box-shadow: 0 0 30px rgba(169,155,214,.35); }
.farbe-numerologie .fazit { background: #f3f1fa; border-color: #d6cfee; }
.farbe-numerologie .aufklapp summary::after { background: #ebe7f7; color: #5e4f99; }
.farbe-kinesiologie { --akzent: #d6a0aa; }
.farbe-kinesiologie .held { background: linear-gradient(120deg, var(--navy) 45%, #4d2836); }
.farbe-kinesiologie .held-punkte li::before { background-color: var(--akzent); }
.farbe-kinesiologie .oberzeile { color: #b5953a; }
.farbe-kinesiologie .held .oberzeile, .farbe-kinesiologie .held h1 em, .farbe-kinesiologie .held-unterzeile { color: #ecc3cb; }
.farbe-kinesiologie .held-symbol { border-color: var(--akzent); color: #f6dfe4; box-shadow: 0 0 30px rgba(214,160,170,.35); }
.farbe-kinesiologie .fazit { background: #faf1f3; border-color: #ecd0d6; }
.farbe-kinesiologie .aufklapp summary::after { background: #f5e3e7; color: #94505f; }
.farbe-mentaltraining { --akzent: #8fb3d9; }
.farbe-mentaltraining .held { background: linear-gradient(120deg, var(--navy) 45%, #1e3f63); }
.farbe-mentaltraining .held-punkte li::before { background-color: var(--akzent); }
.farbe-mentaltraining .oberzeile { color: #b5953a; }
.farbe-mentaltraining .held .oberzeile, .farbe-mentaltraining .held h1 em, .farbe-mentaltraining .held-unterzeile { color: #bcd5ef; }
.farbe-mentaltraining .held-symbol { border-color: var(--akzent); color: #dce9f7; box-shadow: 0 0 30px rgba(143,179,217,.35); }
.farbe-mentaltraining .fazit { background: #eff5fb; border-color: #c8dbef; }
.farbe-mentaltraining .aufklapp summary::after { background: #e2edf8; color: #3f6c99; }
.farbe-kundalini { --akzent: #e0a46f; }
.farbe-kundalini .held { background: linear-gradient(120deg, var(--navy) 45%, #4f2f1c); }
.farbe-kundalini .held-punkte li::before { background-color: var(--akzent); }
.farbe-kundalini .oberzeile { color: #b5953a; }
.farbe-kundalini .held .oberzeile, .farbe-kundalini .held h1 em, .farbe-kundalini .held-unterzeile { color: #f0c9a2; }
.farbe-kundalini .held-symbol { border-color: var(--akzent); color: #f9e2cc; box-shadow: 0 0 30px rgba(224,164,111,.35); }
.farbe-kundalini .fazit { background: #fbf3eb; border-color: #efd6be; }
.farbe-kundalini .aufklapp summary::after { background: #f7e7d7; color: #9a5d2b; }
.held-unterzeile { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 28px); margin: -6px 0 6px; color: var(--gold-hell); }
.bild-tafel { background-image: url("../bilder/tafel.jpg"); background-position: 60% 20%; }
.bild-laptop { background-image: url("../bilder/laptop.jpg"); background-position: 100% 50%; }
.bild-kundalini { background-image: url("../bilder/kundalini.jpg"); background-position: 50% 30%; }
.bild-nervensystem { background-image: url("../bilder/nervensystem.jpg"); background-position: 58% 25%; }
.infoleiste .infoleiste-login { margin-right: auto; color: var(--gold-hell); font-weight: 700; }
.menue .nur-handy { display: none; }
@media (max-width: 900px) { .menue .nur-handy { display: list-item; } }

/* Rechtsseiten (Impressum, AGB, Widerruf, Datenschutz, KI-Transparenz) */
.rechtstext { max-width: 820px; margin: 0 auto; font-size: 17px; }
.rechtstext h2 { font-size: 26px; margin: 34px 0 10px; color: var(--navy); }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext ul { padding-left: 22px; }
.rechtstext hr { border: 0; border-top: 1px solid #E6D9A8; margin: 40px 0; }
.rechtstext a { word-break: break-word; }
.rechtstext .rechts-bild { display: block; width: 100%; height: auto; border-radius: 14px; margin: 6px 0 10px; }
.rechtstext .rechts-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.unter.unter-mittig { display: inline-flex; flex-direction: column; align-items: center; text-align: center; }
.unter-zeile { display: block; }
.nowrap { white-space: nowrap; }

/* ---------- Mondfenster kompakt (Laptop/PC): alles ohne Scrollen sichtbar ---------- */
@media (min-width: 641px) {
  .nl-abschnitt { padding: 48px 0 40px; }
  .nl-raster { grid-template-columns: 360px 1fr; gap: 64px; align-items: center; }
  .fenster { width: 200px; }
  .fenster-rahmen { height: 220px; padding: 9px; border-radius: 100px 100px 5px 5px; }
  .fenster-glas { border-radius: 91px 91px 3px 3px; }
  .vorhang { width: 64px; height: 262px; top: -8px; }
  .vorhang-l { left: -44px; } .vorhang-r { right: -44px; }
  .stange { left: -56px; right: -56px; top: -16px; height: 7px; }
  .fensterbank { margin: -4px -70px 0; padding: 8px 14px 9px; }
  .fensterbank .mond-titel { font-size: 11px; }
  .fensterbank .mond-name { font-size: 21px; }
  .fensterbank .mond-info { font-size: 13px; margin-top: 0; }
  .fensterbank .mond-zeichen { font-size: 13px; margin-top: 5px; padding-top: 5px; }
  .mond-reise { margin: 10px -70px 0; }
  .mond-impuls { font-size: 16px; margin: 0 0 8px; min-height: 0; }
  .mond-regler-label { font-size: 11px; margin-bottom: 6px; }
}

/* ---------- Bilder vollständig zeigen (nicht anschneiden) ---------- */
.bildtext-bild img { aspect-ratio: 1100 / 1366; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 900px) {
  .bildtext-bild img, .bildtext-bild img.parallax { aspect-ratio: auto; height: auto; object-fit: contain; transform: none !important; }
  .kontakt-bild { min-height: 0; aspect-ratio: 1100 / 1366; background-size: cover; background-position: 50% 50%; }
  .held-bild { min-height: 0; background-size: cover; background-position: 50% 50%; }
  .held-bild.bild-tafel, .held-bild.bild-gespraechsrunde, .held-bild.bild-whiteboard { aspect-ratio: 1100 / 1366; }
  .held-bild.bild-laptop { aspect-ratio: 1500 / 837; }
  .held-bild.bild-kundalini { aspect-ratio: 928 / 585; }
  .held-bild.bild-nervensystem { aspect-ratio: 928 / 675; }
}

/* ---------- Mondfenster kompakt (Handy): alles auf einen Blick ---------- */
@media (max-width: 640px) {
  .nl-abschnitt { padding: 44px 0 40px; }
  .fenster { width: 180px; }
  .fenster-rahmen { height: 200px; padding: 8px; border-radius: 90px 90px 5px 5px; }
  .fenster-glas { border-radius: 82px 82px 3px 3px; }
  .vorhang { width: 56px; height: 238px; top: -8px; }
  .vorhang-l { left: -38px; } .vorhang-r { right: -38px; }
  .stange { left: -50px; right: -50px; top: -15px; height: 6px; }
  .fensterbank { margin: -4px -60px 0; padding: 8px 12px 9px; }
  .fensterbank .mond-titel { font-size: 10.5px; }
  .fensterbank .mond-name { font-size: 20px; }
  .fensterbank .mond-info, .fensterbank .mond-zeichen { font-size: 12.5px; }
  .fensterbank .mond-zeichen { margin-top: 5px; padding-top: 5px; }
  .mond-reise { margin: 10px -60px 0; }
  .mond-impuls { font-size: 16px; margin: 0 0 8px; min-height: 0; }
  .mond-regler-label { font-size: 10.5px; margin-bottom: 6px; }
}
@media (max-width: 900px) {
  .held-bild { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}