/* ============================================================
   The Mirror – Design-System (zentral, austauschbar)
   Alle Farben und Schriften stehen NUR hier oben.
   ============================================================ */
:root {
  /* Farben – Hintergrund und Titel aus dem Header-Bild übernommen */
  --papier: #F4EFE7;          /* Hintergrund (aus Header+Logo.png) */
  --petrol: #3F595D;          /* Titel/Logo-Farbe (aus Header+Logo.png) */
  --gold: #B39A6B;
  --gold-aktiv: #BF9540;      /* kräftiges Gold für die Design-Tore und -Kanäle im Bodygraph */
  --gold-text: #8C7340;       /* Gold für Schrift: etwas dunkler, damit es gut lesbar bleibt */
  --tinte: #4A5068;
  --text: #5A6466;           /* Fließtext: neutrales, leicht kühles Grau */
  --graublau: #9AA6BF;
  --sand: #DCC7A3;
  --terrakotta: #A9583A;
  --oliv: #6F6A3E;
  --linie: rgba(179, 154, 107, .45);
  --karte: rgba(250, 247, 242, .5);   /* Textflächen: hell, zu 50 % durchsichtig */

  /* Schriften – hier wechseln: --f-titel (Überschriften) und --f-text (Fließtext). Neue Schrift = auch den Link in rad.html anpassen. */
  --f-titel: "Cormorant Garamond", "Newsreader", Georgia, serif;
  --f-zahl: "Baskervville", "Baskerville", "Libre Baskerville", Georgia, serif;   /* Schrift für Zahlen (Baskerville Display PT ist nicht frei verfügbar) */
  --f-text: "Source Sans 3", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel-gewicht: 500;
  --titel-abstand: .01em;
  --titel-versal: none;
  --titel-farbe: var(--petrol);
  --kern-farbe: var(--gold-text);
}

body[data-papier="ohne"] { background: #EEE8DE; }
/* Papierkörnung nur auf dem Seitenhintergrund (feines Rauschen, kein Bild nötig; zum Ausprobieren mit/ohne) */
body[data-papier="mit"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62  0 0 0 0 .52  0 0 0 0 .38  .32 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--text);
  font: 400 17px/1.7 var(--f-text); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--f-titel); margin: 0; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Kopf: Bild aus Header+Logo.png ---------- */
.kopf { display: block; line-height: 0; }
.kopf img { display: block; width: 100%; height: auto; max-height: 672px; min-height: 210px; object-fit: cover; object-position: center; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }

main { max-width: 980px; margin: 0 auto; padding: 0 16px 90px; }
.mitte { text-align: center; }

/* ---------- Überschriften ---------- */
.kicker { font: 600 .76rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 14px; }
h2.gross { font-size: clamp(1.9rem, 5.5vw, 2.8rem); font-weight: var(--titel-gewicht); color: var(--titel-farbe); text-transform: var(--titel-versal); letter-spacing: var(--titel-abstand); line-height: 1.15; }
h3.system-titel { font-size: clamp(1.6rem, 4.6vw, 2.3rem); font-weight: var(--titel-gewicht); color: var(--titel-farbe); text-transform: var(--titel-versal); letter-spacing: var(--titel-abstand); line-height: 1.2; }

.trenner { display: block; width: min(300px, 70%); height: 22px; margin: 26px auto; }
.trenner line { stroke: var(--gold); stroke-width: 1; }
.trenner .stern { fill: var(--gold); }

/* ---------- Teil-Überschrift mit großer römischer Zahl ---------- */
.teil { text-align: center; margin-top: 80px; }
.teil .kicker { margin-bottom: 8px; }
.roemisch { font: 500 clamp(3rem, 8vw, 4.4rem)/1 var(--f-titel); color: var(--gold-text); letter-spacing: .02em; }
.teil h2.gross { font-size: clamp(1.5rem, 4vw, 2rem); margin-top: 4px; }
.system.folge { margin-top: 50px; }   /* Abstand zwischen den Kapiteln, noch 20 px enger */

/* ---------- Einstieg ---------- */
.einstieg { max-width: 720px; margin: 54px auto 0; text-align: center; }
.einstieg .lead { font-size: 1.12rem; color: var(--text); }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; margin: 30px 0 22px; }
.zweispaltig > div { padding: 20px 22px; border: 1px solid var(--linie); background: var(--karte); }
.zweispaltig h4 { font: 600 .74rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 12px; }
.zweispaltig ul { list-style: none; margin: 0; padding: 0; font-size: .98rem; }
.zweispaltig li { position: relative; padding: 0 0 9px 18px; line-height: 1.5; }
.zweispaltig li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.zweispaltig .nicht li::before { background: transparent; border: 1px solid var(--gold); }
.disclaimer { font-size: .92rem; line-height: 1.6; opacity: .9; max-width: 600px; margin: 0 auto; }

/* ---------- Rad auf Aquarell ---------- */
.system { margin-top: 20px; }
.system-kopf { text-align: center; }
.system-kopf .hinweis { max-width: 36em; margin: 14px auto 0; font-size: 1.08rem; line-height: 1.6; color: var(--text); }
.rad-flaeche { position: relative; max-width: 860px; margin: 8px auto 0; padding: 12% 11% 6%; }
.rad-flaeche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("bilder/aquarell_chart_petrol.png") center / cover no-repeat; }  /* Seitenverhältnis des Bildes bleibt erhalten (keine Verzerrung) */
#rad :focus, #rad :focus-visible { outline: none; }
/* Astro-Rad: Aquarell unverzerrt (Original 1714 x 2000) und so gelegt, dass der gelbliche Ring im Bild auf dem Tierkreis liegt.
   --rad-aquarell = Breite des Bildes im Verhältnis zur Fläche (kleiner = Ring kleiner). Mittelpunkt des Rings im Bild: 50 % / 53 %. */
#rad-flaeche { width: 90%; max-width: 774px; --rad-aquarell: .8546; --rad-versatz: .0432; --rad-mitte: .51; --rad-hoehe: .96; --rad-oben: .01395; }  /* versatz: Bild nach unten schieben, in Breiten der Fläche (.048 = 5 % der Höhe, jetzt 4,5 %) */
#rad-flaeche::before {
  background-size: calc(var(--rad-aquarell) * 100%) auto;
  /* Ankerpunkt oben mittig: --rad-oben = Abstand der Bild-Oberkante zur Flächen-Oberkante (in Flächenbreiten), bleibt beim Verkleinern stehen */
  background-position: 50% calc(var(--rad-oben) / (var(--rad-hoehe) - 1.1669 * var(--rad-aquarell)) * 100%);
}
@media (max-width: 640px) { #rad-flaeche { --rad-aquarell: 1.0564; --rad-versatz: .05; --rad-mitte: .56; --rad-hoehe: 1.12; --rad-oben: -.05663; } }#rad { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }

#rad text { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", serif; user-select: none; }
#rad .beschriftung { font-family: var(--f-text); font-weight: 600; letter-spacing: .1em; }
.ring { fill: none; stroke: var(--gold); }
.zeichen-keil { fill: var(--gold); fill-opacity: 0; stroke: var(--gold); stroke-width: .6; cursor: pointer; transition: fill-opacity .3s; }
.zeichen-keil:hover, .zeichen-keil.aktiv, .zeichen-keil:focus-visible { fill-opacity: .42; }
.zeichen-glyphe { fill: var(--gold-text); font-size: 25px; pointer-events: none; }
.stern { fill: var(--gold); opacity: .75; pointer-events: none; }
.stern-linie { stroke: var(--gold); stroke-width: .6; opacity: .7; pointer-events: none; }
.stern.p { fill: var(--petrol); opacity: .5; }
.stern-linie.p { stroke: var(--petrol); opacity: .55; }
.haus-keil { fill: var(--gold); fill-opacity: 0; cursor: pointer; transition: fill-opacity .3s; }
.haus-keil:hover, .haus-keil:focus-visible { fill-opacity: .38; }
.haus-keil.aktiv { fill-opacity: .46; }
.haus-zahl { fill: var(--petrol); opacity: .85; font-size: 24px; pointer-events: none; font-family: var(--f-titel) !important; font-weight: 600; }
.spitze { stroke: var(--gold); stroke-width: .6; }
.teilstrich { stroke: var(--gold); stroke-width: .5; opacity: .8; }
.achse { stroke: var(--gold-text); stroke-width: 1.1; }
.aspekt { stroke-width: .7; fill: none; opacity: .55; transition: opacity .3s; }
.aspekt.weich { stroke: var(--petrol); }
.aspekt.hart { stroke: var(--terrakotta); }
#rad.fokus .aspekt { opacity: .06; }
#rad.fokus .aspekt.an { opacity: 1; stroke-width: 1.3; }
.leiter { stroke: var(--gold); stroke-width: .5; opacity: .7; }
.punkt { fill: var(--gold-text); }

.planet { cursor: pointer; outline: none; }
.planet .huelle { fill: rgba(244, 239, 231, .88); stroke: var(--gold-text); stroke-width: .9; transition: stroke-width .25s, fill .25s; }
.planet .glyphe { fill: var(--petrol); font-size: 18px; pointer-events: none; }
.planet .treffer { fill: transparent; }
.planet .bewegung { transition: transform .3s ease; transform-box: fill-box; transform-origin: center; }
.planet:hover .bewegung, .planet:focus-visible .bewegung { transform: scale(1.22); }
.planet:hover .huelle, .planet:focus-visible .huelle { stroke-width: 1.8; fill: #D4BA8C; filter: drop-shadow(0 0 6px rgba(179,154,107,.95)); }
.planet.aktiv .huelle { fill: var(--sand); stroke: var(--petrol); stroke-width: 1.5; }
.planet.aktiv .bewegung { animation: atmen 3.6s ease-in-out infinite; }
@keyframes atmen { 0%,100% { filter: drop-shadow(0 0 2px rgba(179,154,107,.4)); } 50% { filter: drop-shadow(0 0 9px rgba(179,154,107,1)); } }
.planet .huelle.licht { stroke-width: 1.8; fill: rgba(220, 199, 163, .45); }
/* Sonne und Mond: blau gefüllt, helle Zeichen */
.planet.lichtpl .huelle, .planet.lichtpl .huelle.licht { fill: #4A6C82; stroke: var(--gold-text); stroke-width: 1.4; }
.planet.lichtpl .glyphe { fill: #F7F2E8; }
.planet.lichtpl:hover .huelle, .planet.lichtpl:focus-visible .huelle, .planet.lichtpl.aktiv .huelle { fill: #3B5C72; stroke: var(--gold); stroke-width: 1.8; }
.marke { cursor: pointer; outline: none; }
.marke .huelle { fill: rgba(244, 239, 231, .92); stroke: #4A6C82; stroke-width: 1.8; transition: stroke-width .25s, fill .25s; }
.marke .treffer { fill: transparent; }
.marke .bewegung { transition: transform .3s ease; transform-box: fill-box; transform-origin: center; }
.marke:hover .bewegung, .marke:focus-visible .bewegung { transform: scale(1.15); }
.marke:hover .huelle, .marke.aktiv .huelle { fill: var(--sand); stroke: #3B5C72; stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(179,154,107,.9)); }
.marke .beschriftung { fill: var(--petrol); font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .planet.aktiv .bewegung { animation: none; } .planet .bewegung { transition: none; } }

/* Tooltip (Mouse-over) */
.tip { position: absolute; z-index: 5; pointer-events: none; min-width: 160px; max-width: 260px; padding: 10px 14px 11px; background: rgba(252, 249, 244, .97); border: 1px solid var(--gold); box-shadow: 0 6px 22px rgba(63, 89, 93, .18); font-size: .88rem; line-height: 1.45; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.tip.an { opacity: 1; transform: none; }
.tip b { display: block; font: 500 1.2rem/1.2 var(--f-titel); color: var(--petrol); margin-bottom: 3px; }
.tip span { display: block; color: var(--tinte); }
.tip .koord { color: var(--gold-text); font-size: .8rem; letter-spacing: .04em; margin-top: 3px; }

/* ---------- Auswahl unter dem Rad: Reiter + eine Leiste (eckig, ruhig) ---------- */
.auswahl { max-width: 920px; margin: 22px auto 0; }
.reiter { display: flex; justify-content: center; gap: 0; margin-bottom: 18px; }
.reiter-knopf { all: unset; box-sizing: border-box; cursor: pointer; padding: 13px 34px; min-width: 150px; text-align: center; border: 1px solid var(--gold); font: 600 .78rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--petrol); background: transparent; transition: background .25s, color .25s; }
.reiter-knopf + .reiter-knopf { border-left: 0; }
.reiter-knopf:hover { background: rgba(179, 154, 107, .14); }
.reiter-knopf.an { background: var(--petrol); border-color: var(--petrol); color: var(--papier); }
.reiter-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.zellen { display: grid; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.zellen[hidden] { display: none; }
.zellen.planeten { grid-template-columns: repeat(12, 1fr); }
.zellen.haeuser { grid-template-columns: repeat(12, 1fr); }
.zellen.elemente { grid-template-columns: repeat(4, 1fr); }
.zelle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 16px 2px; min-height: 76px; border-left: 1px solid var(--linie); text-align: center; transition: background .25s, box-shadow .25s; }
.zelle:first-child { border-left: 0; }
.zelle:hover { background: rgba(179, 154, 107, .12); }
.zelle:focus-visible { outline: 1px solid var(--gold); outline-offset: -3px; }
.zelle.aktiv { background: rgba(179, 154, 107, .2); box-shadow: inset 0 -2px 0 var(--petrol); }
.z-glyphe { font: 1.45rem/1 "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", serif; color: var(--gold-text); }
.z-glyphe.z-text { font: 600 .85rem/1.45rem var(--f-text); letter-spacing: .1em; }
.z-name { font: 400 .68rem/1.2 var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--petrol); }
.z-name.z-gross { font: 500 1.4rem/1.2 var(--f-titel); letter-spacing: 0; text-transform: none; }
.z-zahl { font: 500 1.3rem/1 var(--f-titel); color: var(--petrol); }
.zellen.elemente .zelle { padding: 22px 6px 20px; }
.perlen { display: flex; justify-content: center; gap: 5px; }
.perlen i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gold); }
.perlen i.voll { background: var(--gold); }
@media (max-width: 760px) {
  .reiter-knopf { min-width: 0; flex: 1; padding: 13px 10px; }
  .zellen { gap: 0; background: none; border-top-color: var(--gold); }   /* schmal: Listen bleiben in der Hintergrundfarbe, Trennlinien statt heller Felder */
  .zelle { border-left: 0; background: transparent; box-shadow: inset -1px -1px 0 var(--linie); }
  .zellen.planeten { grid-template-columns: repeat(4, 1fr); }
  .zellen.haeuser { grid-template-columns: repeat(6, 1fr); }
  .zellen.elemente { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Human Design: Bodygraph „Lichtsäule“ ---------- */
.hd-flaeche { max-width: 350px; margin-top: 30px; padding: 0; }
.hd-flaeche::before { display: none; }   /* das Aquarell liegt als eigene Ebene im Chart */
#hd-rad { display: block; width: 100%; height: auto; overflow: visible; }
#hd-rad :focus, #hd-rad :focus-visible { outline: none; }
#hd-rad text { font-family: var(--f-text); user-select: none; }
.hd-ebene { pointer-events: none; }
.hd-faden { fill: none; stroke: var(--gold-text); stroke-width: 1.5; opacity: .55; }
.hd-strang { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-width .25s; }
.hd-strang.p { stroke: #3F5F78; }
.hd-strang.d { stroke: #B5985F; }
.hd-treffer { fill: none; stroke: transparent; stroke-width: 34; }
.hd-kanal.an { cursor: pointer; }
.hd-kanal.an:hover .hd-strang, .hd-kanal.aktiv .hd-strang { stroke-width: 11; filter: drop-shadow(0 1px 3px rgba(63,89,93,.3)); }
.hd-zentrum { cursor: pointer; outline: none; }
.hd-form { fill: var(--gold); fill-opacity: 0; stroke: #B3996A; stroke-width: 1.7; stroke-linejoin: round; transition: fill-opacity .3s, filter .25s; }
.hd-zentrum.def .hd-form { fill-opacity: .14; }
.hd-zentrum:hover .hd-form, .hd-zentrum:focus-visible .hd-form, .hd-zentrum.aktiv .hd-form { filter: drop-shadow(0 2px 4px rgba(63,89,93,.22)); }
.hd-tor-p { fill: #4A6C82; stroke: var(--gold-text); stroke-width: 1.4; }
.hd-tor-d { fill: rgba(244, 239, 231, .88); stroke: var(--gold-text); stroke-width: 1.3; }
.hd-tor-nr { font-size: 23px; font-weight: 600; pointer-events: none; }
.hd-tor-nr.p { fill: #F7F2E8; }
.hd-tor-nr.d { fill: var(--petrol); }
.hd-tor-nr.leer { fill: #8C8473; font-weight: 400; font-size: 22px; }
.hd-treffer-pt { fill: transparent; }
.hd-tor.an { cursor: pointer; outline: none; }
.hd-tor.an:hover { filter: drop-shadow(0 1px 3px rgba(63,89,93,.35)); }
.hd-tor.aktiv { filter: drop-shadow(0 1px 3px rgba(63,89,93,.4)); }
@media (prefers-reduced-motion: reduce) { .hd-strang, .hd-zentrum .hd-form { transition: none; } }
/* ---------- Einleitungen, Textsatz, freie Leisten ---------- */
.intro { max-width: 38em; margin: 18px auto 0; }
.intro p { margin: 0 0 .8em; font-size: 1.05rem; line-height: 1.65; color: var(--text); }
.text-karte.mittig .art, .text-karte.mittig h3, .text-karte.mittig .stelle { text-align: center; }
.zellen.frei { grid-template-columns: repeat(var(--n, 3), 1fr); }
.zellen.frei .zelle { padding: 18px 6px 16px; }
.z-klein { font: 400 .74rem/1.2 var(--f-text); color: var(--text); }
@media (max-width: 760px) {
  /* Schmal: zwei Spalten; bleibt eine Zelle übrig, füllt sie die ganze Zeile (kein leeres Feld) */
  .zellen.frei { grid-template-columns: repeat(2, 1fr); }
  .zellen .zelle:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.legende { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; margin: 8px auto 0; padding: 0; max-width: 560px; font-size: clamp(.76rem, 2.3vw, .88rem); line-height: 1.3; color: var(--text); text-align: center; }
.legende li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.leg-zeichen { display: block; width: 20px; height: 20px; }
#hd-bereich .auswahl { margin-top: 26px; }

/* ---------- Numerologie: Zahlenkreis ---------- */
.num-flaeche { max-width: 560px; margin-top: 20px; padding: 12% 10% 8%; }
#num-rad { display: block; width: 100%; height: auto; overflow: visible; }
#num-rad :focus, #num-rad :focus-visible { outline: none; }
#num-rad text { font-family: var(--f-text); user-select: none; }
.num-ring { fill: none; stroke: var(--gold); stroke-width: 1; }
.num-ring.fein { stroke-width: .5; opacity: .7; }
.num-faden { stroke: var(--gold); stroke-width: .8; }
.num-knoten { cursor: pointer; outline: none; }
.num-huelle { fill: rgba(244, 239, 231, .9); stroke: var(--gold); stroke-width: 1.3; transition: fill .25s, stroke .25s, stroke-width .25s; }
.num-innen { fill: none; stroke: var(--gold); stroke-width: .5; opacity: .8; }
.num-knoten.zentral .num-huelle { fill: rgba(220, 199, 163, .78); stroke: var(--petrol); stroke-width: 1.8; }
.num-zahl { fill: var(--petrol); font-family: var(--f-titel) !important; font-weight: 500; font-size: 42px; pointer-events: none; }
.num-knoten.zentral .num-zahl { font-size: 66px; }
.num-name { fill: var(--gold-text); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; pointer-events: none; }
.num-knoten.zentral .num-name { font-size: 11px; }
.num-knoten .bewegung { transition: transform .3s ease; transform-box: fill-box; transform-origin: center; }
.num-knoten:hover .bewegung, .num-knoten:focus-visible .bewegung { transform: scale(1.06); }
.num-knoten:hover .num-huelle, .num-knoten.aktiv .num-huelle { fill: #E0CDA6; stroke: var(--petrol); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(179,154,107,.9)); }
@media (prefers-reduced-motion: reduce) { .num-knoten .bewegung { transition: none; } }
@media (max-width: 640px) { .num-flaeche { padding: 9% 4% 6%; } }

/* ---------- Eingabemaske ---------- */
.eingabe .einstieg { text-align: center; margin-bottom: 26px; }
.warnbox { max-width: 640px; margin: 0 auto 26px; padding: 18px 22px; border: 1px solid var(--gold); border-left-width: 3px; background: var(--karte); }
.warnbox h4 { font: 600 .74rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 10px; }
.warnbox p { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--text); }
.aktu-hinweis { max-width: 640px; margin: 0 auto 20px; font-size: .98rem; color: var(--petrol); text-align: center; }
.formular { max-width: 640px; margin: 0 auto; padding: 30px clamp(18px, 5vw, 38px) 26px; background: var(--karte); border: 1px solid var(--linie); }
.formular .feld { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.formular label, .formular legend { display: block; font: 600 .72rem/1.2 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 8px; padding: 0; }
.formular input[type="text"], .formular input[type="date"], .formular input[type="time"] { width: 100%; font: 400 1.05rem/1.4 var(--f-text); color: var(--petrol); background: #FFFDF9; border: 1px solid var(--linie); border-radius: 0; padding: 12px 14px; min-height: 50px; }
.formular input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.formular input:disabled { background: transparent; color: var(--text); border-style: dashed; cursor: not-allowed; }
.hilfe { margin: 7px 0 0; font-size: .88rem; line-height: 1.5; color: var(--text); }
.fehler { margin: 7px 0 0; font-size: .92rem; color: var(--terrakotta); font-weight: 600; }
.gesperrt-hinweis { margin: -12px 0 24px; font-size: .88rem; color: var(--gold-text); font-weight: 600; }
.segment { display: flex; margin-bottom: 10px; }
.segment-knopf { all: unset; box-sizing: border-box; flex: 1; text-align: center; cursor: pointer; padding: 13px 8px; border: 1px solid var(--gold); font: 600 .76rem/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); transition: background .2s, color .2s; }
.segment-knopf + .segment-knopf { border-left: 0; }
.segment-knopf:hover { background: rgba(179, 154, 107, .14); }
.segment-knopf.an { background: var(--petrol); border-color: var(--petrol); color: var(--papier); }
.segment-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ort-box { position: relative; }
.vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 2px 0 0; padding: 0; list-style: none; background: #FFFDF9; border: 1px solid var(--gold); box-shadow: 0 10px 28px rgba(63, 89, 93, .16); max-height: 340px; overflow: auto; }
.vorschlaege[hidden] { display: none; }
.vorschlaege li { padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--linie); font-size: 1.02rem; color: var(--petrol); }
.vorschlaege li:last-child { border-bottom: 0; }
.vorschlaege li small { display: block; margin-top: 2px; font-size: .84rem; color: var(--text); }
.vorschlaege li[aria-selected="true"], .vorschlaege li:hover { background: rgba(179, 154, 107, .2); }
.gewaehlt { margin: 8px 0 0; font-size: .86rem; color: var(--gold-text); font-weight: 600; letter-spacing: .02em; }
.haupt-knopf { all: unset; box-sizing: border-box; display: block; width: 100%; text-align: center; cursor: pointer; padding: 17px 20px; background: var(--petrol); color: var(--papier); font: 600 .84rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; transition: background .25s, box-shadow .25s; }
.haupt-knopf:hover { background: #2F474B; box-shadow: 0 0 16px rgba(179, 154, 107, .55); }
.haupt-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.haupt-knopf:disabled { background: #A9B3B4; cursor: not-allowed; box-shadow: none; }
.zweit-knopf { all: unset; box-sizing: border-box; display: block; width: 100%; text-align: center; cursor: pointer; padding: 16px 20px; border: 1px solid var(--gold); color: var(--petrol); font: 600 .8rem/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; transition: background .25s; }
.zweit-knopf:hover { background: rgba(179, 154, 107, .16); }
.zweit-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.schutz { margin: 14px 0 0; text-align: center; font-size: .84rem; color: var(--text); }
.pruef-karte { max-width: 640px; margin: 0 auto; padding: 32px clamp(18px, 5vw, 38px) 28px; background: var(--karte); border: 1px solid var(--gold); }
.pruef-karte .art { font: 600 .74rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 12px; text-align: center; }
.pruef-karte h3 { text-align: center; font-size: 2rem; font-weight: var(--titel-gewicht); color: var(--titel-farbe); margin: 0 0 14px; }
.pruef-text { text-align: center; margin: 0 0 20px; font-size: 1.02rem; color: var(--text); }
.vorschau-hinweis { margin: 0 0 18px; padding: 10px 14px; border: 1px dashed var(--gold); font-size: .88rem; color: var(--gold-text); text-align: center; }
dl.eck { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 9px 22px; margin: 0 0 22px; font-size: 1rem; }
dl.eck dt { color: var(--text); font-size: .88rem; padding-top: 2px; }
dl.eck dd { margin: 0; color: var(--petrol); font-weight: 600; overflow-wrap: anywhere; }
dl.eck dd.stark { font: 500 1.35rem/1.25 var(--f-titel); color: var(--terrakotta); }
.haken { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 22px; padding: 14px 16px; border: 1px solid var(--linie); cursor: pointer; font-size: .98rem; color: var(--petrol); }
.haken[hidden] { display: none; }
.haken input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--petrol); flex: none; }
.knopf-reihe { display: grid; gap: 12px; }
@media (min-width: 560px) { .knopf-reihe.zwei, .pruef-karte .knopf-reihe:has(#knopf-zurueck) { grid-template-columns: 1fr 1.4fr; } }
.hinweis-box { margin: 0 0 14px; padding: 12px 16px; border-left: 3px solid var(--gold); background: rgba(220, 199, 163, .22); font-size: .94rem; color: var(--text); }
.hinweis-box.gut { border-left-color: var(--petrol); }
.hinweis-box p { margin: 0 0 6px; } .hinweis-box p:last-child { margin: 0; }
.hinweis-box .fett { font-weight: 600; color: var(--petrol); }
.hinweis-box ul { margin: 4px 0 0; padding-left: 18px; }
.personen { max-width: 640px; margin: 0 auto 26px; text-align: center; }
.personen-titel { font: 600 .72rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 12px; }
.personen-reihe { display: flex; flex-wrap: wrap; justify-content: center; }
.person-knopf { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 140px; max-width: 220px; text-align: center; padding: 14px 12px; border: 1px solid var(--gold); margin: 0 -1px -1px 0; font: 600 .78rem/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--petrol); transition: background .2s; }
.person-knopf:hover { background: rgba(179, 154, 107, .16); }
.person-knopf.an { background: var(--petrol); border-color: var(--petrol); color: var(--papier); position: relative; z-index: 1; }
.person-knopf.frei { border-style: dashed; color: var(--gold-text); font-weight: 400; }
.person-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Element-Bilder über der Leiste ---------- */
.element-bilder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 6px; }
.element-bild { display: flex; align-items: flex-end; justify-content: center; height: clamp(120px, 24vw, 230px); padding: 6px 8px; pointer-events: none; }
.element-bild img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; opacity: .92; }
.element-bild.leer { border: 1px dashed var(--linie); margin: 6px; align-items: center; }
.element-bild.leer img { display: none; }
.element-bild.leer::after { content: "Bild folgt"; font: 400 .78rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); opacity: .7; }
/* ---------- I Ging: vier Zeichen im Kreuz ---------- */
.ig-linie { stroke: var(--petrol); stroke-width: 4.6; stroke-linecap: butt; }
.ig-flaeche { max-width: 600px; margin-top: 6px; padding: 1% 5% 1%; }
#ig-rad { display: block; width: 100%; height: auto; overflow: visible; }
#ig-rad :focus, #ig-rad :focus-visible { outline: none; }
#ig-rad text { font-family: var(--f-text); user-select: none; }
.ig-yy-ring { fill: rgba(244, 239, 231, .9); stroke: var(--gold-text); stroke-width: 1.2; }
.ig-yy-dunkel { fill: var(--petrol); opacity: .85; }
.ig-yy-hell { fill: #F4EFE7; }
.ig-tri-name, .ig-tri-cn { fill: var(--gold-text); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; pointer-events: none; }
.ig-tri.aktiv .num-huelle, .ig-tri:hover .num-huelle { fill: #E0CDA6; stroke: var(--petrol); stroke-width: 2; }
.ig-hex { cursor: pointer; outline: none; }
.ig-hex.fremd { cursor: default; pointer-events: none; }
.ig-hex.fremd .ig-linie { stroke-width: 4.2; opacity: .4; }
#ig-rad.verwandt-an .ig-hex.fremd.verwandt .ig-linie { opacity: .95; }
#ig-rad.verwandt-an .ig-hex.mein.verwandt .ig-hex-grund { fill: #D4BA8C; stroke: var(--petrol); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(179,154,107,1)); }
.ig-hex .ig-linie { stroke-width: 4.8; opacity: .55; transition: opacity .2s; }
.ig-hex-grund { fill: transparent; stroke: transparent; transition: fill .2s, stroke .2s; }
.ig-hex:hover .ig-hex-grund, .ig-hex:focus-visible .ig-hex-grund { fill: rgba(224, 205, 166, .7); stroke: var(--gold); }
.ig-hex:hover .ig-linie, .ig-hex:focus-visible .ig-linie { opacity: 1; }
.ig-hex.mein .ig-hex-grund { fill: rgba(220, 199, 163, .75); stroke: var(--petrol); stroke-width: 1.4; }
.ig-hex.mein .ig-linie { opacity: 1; stroke-width: 5.4; }
.ig-hex.aktiv .ig-hex-grund { fill: #D4BA8C; stroke: var(--petrol); stroke-width: 1.8; filter: drop-shadow(0 0 5px rgba(179,154,107,.9)); }
.ig-hex.aktiv .ig-linie { opacity: 1; }
#ig-rad.verwandt-an .ig-hex:not(.verwandt) .ig-linie { opacity: .18; }
#ig-rad.verwandt-an .ig-hex.verwandt .ig-linie { opacity: 1; }
#ig-rad.verwandt-an .ig-hex.verwandt .ig-hex-grund { fill: rgba(224, 205, 166, .55); }
.ig-symbol { height: clamp(80px, 12vw, 100px); align-items: center; }
.ig-symbol svg.ig-klein { width: 74px; height: auto; margin: 0 auto; }   /* gleiche Größe wie im Lesetext */
.ig-symbol .ig-linie { stroke-width: 3.2; opacity: 1; }   /* gleiche Linienstärke wie im Lesetext */
.ig-klein .ig-linie { stroke-width: 3.2; }
@media (max-width: 640px) { .ig-flaeche { padding: 1% 1% 1%; } }.ig-klein { display: block; width: 74px; height: auto; margin: 0 auto 10px; }
.zellen.frei.vier .z-gross { font-size: 1.12rem; }
@media (max-width: 760px) { .zellen.frei.vier { grid-template-columns: repeat(2, 1fr); } }
.text-karte .urbild { font-style: italic; color: var(--text); margin: 0 0 1em; text-align: center; }
.text-karte .nachspuren { margin: 1.8em 0 .3em; font: 600 .72rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); text-align: center; }
.text-karte .frage { font: italic 500 1.25rem/1.5 var(--f-titel); color: var(--petrol); text-align: center; margin: 0 0 .6em; }

/* ---------- Textbereich ---------- */
.text-bereich { max-width: 700px; margin: 36px auto 0; scroll-margin-top: 20px; }
.text-karte { background: var(--karte); border: 1px solid var(--linie); padding: 34px clamp(20px, 5vw, 44px) 26px; }
.text-karte .art { font: 600 .74rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 8px; }
.text-karte h3 { font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: var(--titel-gewicht); color: var(--titel-farbe); text-transform: var(--titel-versal); letter-spacing: var(--titel-abstand); line-height: 1.2; margin-bottom: 4px; }
.text-karte .stelle { font-size: 1rem; color: var(--tinte); margin-bottom: 20px; }
.text-karte .kern { color: var(--kern-farbe); font-weight: 400; font-size: 1.12rem; line-height: 1.55; margin-bottom: 1.2em; }
.text-karte h4 { font-family: var(--f-text); font-size: 1.06rem; font-weight: 600; letter-spacing: .01em; color: var(--petrol); margin: 1.6em 0 .35em; }
.text-karte .block + .block { margin-top: 0; padding-top: 0; }
.text-karte .block-titel { font-size: 1.35rem; font-weight: var(--titel-gewicht); color: var(--titel-farbe); margin: 22px 0 6px; }

.fuss { text-align: center; font-size: .86rem; opacity: .8; margin-top: 56px; }

/* ---------- Umschalter Papier mit/ohne (nur zum Ausprobieren) ---------- */
.schalter { position: fixed; top: 12px; right: 12px; z-index: 10; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: calc(100vw - 24px); }
.sg { display: flex; background: rgba(244,239,231,.94); border: 1px solid var(--linie); overflow: hidden; font: 600 .74rem/1 var(--f-text); backdrop-filter: blur(4px); }
.schalter button { all: unset; padding: 9px 12px; cursor: pointer; color: var(--petrol); letter-spacing: .05em; }
.schalter button[aria-pressed="true"] { background: var(--sand); }
.schalter button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .zweispaltig { grid-template-columns: 1fr; }
  .rad-flaeche { padding: 8% 2%; }
}
:root {
  --ic-stern: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23B39A6B'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%202V22M2%2012H22M5%205L19%2019M19%205L5%2019'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'2.2'%20fill%3D'%23B39A6B'%2F%3E%3C%2Fsvg%3E");
  --ic-raute: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23B39A6B'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203L21%2012L12%2021L3%2012Z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.8'%20fill%3D'%23B39A6B'%2F%3E%3C%2Fsvg%3E");
  --ic-mond: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23B39A6B'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M15.5%203.2A9%209%200%201%200%2015.5%2020.8A7.2%207.2%200%200%201%2015.5%203.2Z'%2F%3E%3C%2Fsvg%3E");
  --ic-sonne: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23B39A6B'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3.6'%2F%3E%3Cpath%20d%3D'M12%202.5V6M12%2018V21.5M2.5%2012H6M18%2012H21.5M5.3%205.3L7.8%207.8M16.2%2016.2L18.7%2018.7M18.7%205.3L16.2%207.8M7.8%2016.2L5.3%2018.7'%2F%3E%3C%2Fsvg%3E");
  --ic-punkte: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23B39A6B'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'5'%20cy%3D'12'%20r%3D'1.6'%20fill%3D'%23B39A6B'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.6'%20fill%3D'%23B39A6B'%2F%3E%3Ccircle%20cx%3D'19'%20cy%3D'12'%20r%3D'1.6'%20fill%3D'%23B39A6B'%2F%3E%3C%2Fsvg%3E");
  --ic-yin: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23B39A6B'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%203A4.5%204.5%200%200%201%2012%2012A4.5%204.5%200%200%200%2012%2021A9%209%200%200%201%2012%203Z'%20fill%3D'%23B39A6B'%20stroke%3D'none'%2F%3E%3C%2Fsvg%3E");
  --ic-kreis: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23B39A6B'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%20fill%3D'%23B39A6B'%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
   Trenner und kleine Zeichen zur Auflockerung
   Eine feine Goldlinie, in der Mitte unterbrochen von einem Symbol (--ic).
   Symbole: stern, raute, mond, sonne, punkte, yin, kreis
   ============================================================ */
.text-karte .zitat::before, .text-karte .zitat::after,
.text-karte .block + .block::before, .text-karte > .stelle + .block::before, .text-karte > h3 + .block::before,
.text-karte .nachspuren::before, .intro::after, .system.folge::before {
  content: ""; display: block; height: 24px;
  background:
    var(--ic) center / 24px 24px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left center / calc(50% - 24px) 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right center / calc(50% - 24px) 1px no-repeat;
}
/* Zitat: schmaler, mittig, oben und unten eine Linie mit Symbol */
.text-karte .zitat { margin: 2em auto 2.2em; max-width: 72%; padding: 0; border: 0; text-align: center; font: italic 500 1.22rem/1.55 var(--f-titel); color: var(--petrol); }
.text-karte .zitat::before { --ic: var(--ic-raute); margin-bottom: 16px; }
.text-karte .zitat::after { --ic: var(--ic-raute); margin-top: 16px; }
/* zwischen den Textblöcken und unter dem Kopf der Karte */
.text-karte .block + .block::before { --ic: var(--ic-punkte); margin: 34px auto 28px; max-width: 70%; }
.text-karte > .stelle + .block::before, .text-karte > h3 + .block::before { --ic: var(--ic-stern); margin: 6px auto 26px; max-width: 60%; }
.text-karte .nachspuren { margin-top: 1.4em; }
.text-karte .nachspuren::before { --ic: var(--ic-mond); margin: 0 auto 18px; max-width: 60%; }
/* unter den Einleitungen der Kapitel */
.intro::after { --ic: var(--ic-punkte); max-width: 220px; margin: 22px auto 0; }
/* zwischen den Kapiteln: je Kapitel ein eigenes Symbol */
.system.folge::before { max-width: 380px; margin: 0 auto 56px; }
#element-bereich::before { --ic: var(--ic-raute); }
#hd-bereich::before { --ic: var(--ic-kreis); }
#num-bereich::before { --ic: var(--ic-sonne); }
#ig-bereich::before { --ic: var(--ic-yin); }

/* ---------- Kleines Symbol über dem Titel der Textkarten ---------- */
.karten-symbol { display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin: 4px auto 12px; border: 1px solid var(--gold-text); border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(250, 247, 242, .95), inset 0 0 0 6px var(--gold); font: 500 1.7rem/1 "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", serif; color: var(--petrol); }
.karten-symbol.skizze { width: auto; height: 86px; border: 0; border-radius: 0; box-shadow: none; margin: 2px auto 8px; }
.karten-symbol.skizze svg { height: 100%; width: auto; fill: none; stroke: var(--petrol); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.karten-symbol.skizze svg .g { stroke: var(--gold-text); }

/* ---------- Numerologie: vier Kreise mit der Lebenszahl im Schnittpunkt ---------- */
.num-flaeche { max-width: 620px; }
.n4 { cursor: pointer; outline: none; }
.n4-kreis { fill: rgba(244, 239, 231, .28); stroke: var(--gold-text); stroke-width: 1.3; pointer-events: none; transition: fill .3s, stroke .3s, stroke-width .3s; }
.n4-treffer { fill: transparent; }
.n4-punkt { fill: var(--gold-text); pointer-events: none; }
.n4-zahl { fill: var(--petrol); font-family: var(--f-titel) !important; font-weight: 500; font-size: 56px; pointer-events: none; }
.n4-zahl.gross { font-size: 62px; }
.n4-name { fill: var(--gold-text); font-size: 11px; font-weight: 600; letter-spacing: .09em; pointer-events: none; }
.n4:hover .n4-kreis, .n4:focus-visible .n4-kreis { fill: rgba(179, 154, 107, .38); stroke: var(--petrol); stroke-width: 2.2; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }   /* wie die festen Zentren im Human Design: dunkler, dezenter grauer Schatten */
.n4.aktiv .n4-kreis { fill: rgba(179, 154, 107, .46); stroke: var(--petrol); stroke-width: 2.4; }
.n4.mitte .n4-kreis { pointer-events: all; fill: #EBE3D6; stroke: var(--gold-text); stroke-width: 1.6; }
.n4.mitte:hover .n4-kreis, .n4.mitte:focus-visible .n4-kreis { fill: #DBCFB8; stroke: var(--petrol); stroke-width: 2.2; }   /* 38 % Gold auf dem Hintergrund, deckend gerechnet */
.n4.mitte.aktiv .n4-kreis, .n4.mitte.aktiv:hover .n4-kreis { fill: #D6C8AE; stroke: var(--petrol); stroke-width: 2.4; }   /* angeklickt: 46 % Gold */#num-rad :focus, #num-rad :focus-visible { outline: none; }

/* ---------- Zahlenschrift (Baskerville) und Symbol "Zahl im Ring mit Sternchen" ---------- */
.n4-zahl, .haus-zahl, .z-zahl, .ig-nr, .roemisch, .num-zahl { font-family: var(--f-zahl) !important; font-variant-numeric: lining-nums; font-weight: 400; }
.n4-zahl { font-size: 58px; }
.n4-zahl.gross { font-size: 66px; }
.karten-symbol.zahl { position: relative; display: block; width: 96px; height: 96px; margin: 0 auto 8px; border: 0; border-radius: 0; box-shadow: none; }
.karten-symbol.zahl svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.karten-symbol.zahl .r1 { fill: none; stroke: var(--gold-text); stroke-width: .9; }
.karten-symbol.zahl .r2 { fill: none; stroke: var(--gold); stroke-width: .5; opacity: .75; }
.karten-symbol.zahl .f { fill: var(--gold-text); }
.karten-symbol.zahl span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-zahl), "Segoe UI Symbol", "Noto Sans Symbols 2", serif; font-weight: 400; font-size: 2.3rem; line-height: 1; color: var(--petrol); font-variant-numeric: lining-nums; padding-bottom: 2px; }

/* Zahlen in Überschriften auf gleicher Höhe (keine Mediävalziffern) */
h1, h2, h3, h4, .block-titel, .z-gross, .tip b, .e-name { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* ---------- Elemente: Bild und Feld sind eine Einheit (auch schmal) ---------- */
.zellen.elemente.mit-bild, .zellen.frei.mit-bild { border: 0; gap: 0; background: none; }
.zellen.frei.mit-bild .element-bild { height: clamp(91px, 15.1vw, 132px); padding-top: 0; }
.zellen.frei.mit-bild .element-bild img { transform: scale(1.08); transform-origin: 50% 100%; }   /* Icons +8 % */   /* fünf Bilder nebeneinander, dicht unter dem Chart */
#num-flaeche.num-flaeche { margin-top: 10px; padding: 0 10% 0; }   /* kein Aquarell mehr dahinter: weniger Luft um den Chart */
#num-bereich .auswahl { margin-top: 9px; }   /* Chart → Symbole: +5 px (Symbole 5 px weiter nach unten) */   /* Chart → Symbole: +10 px */
.zellen.frei.mit-bild .element-bild { margin-bottom: 15px; }   /* Symbole → Leiste */
.zellen.frei.mit-bild .element-bild img { opacity: .8; }   /* 20 % durchsichtig */   /* Symbole → Leiste: +20 px */
@media (max-width: 640px) { #num-flaeche.num-flaeche { padding: 0 4%; } }
.zellen.frei.mit-bild .zelle { padding: 16px 4px 14px; hyphens: auto; overflow-wrap: anywhere; }
.mit-bild .element-einheit { display: flex; flex-direction: column; min-width: 0; }
.mit-bild .element-bild { flex: none; }
.mit-bild .zelle { flex: 1; background: transparent; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); border-left: 1px solid var(--linie); }
.mit-bild .element-einheit:first-child .zelle { border-left: 0; }
@media (max-width: 760px) {
  .zellen.elemente.mit-bild, .zellen.frei.mit-bild { gap: 18px 0; }
  .zellen.frei.mit-bild .element-bild { height: clamp(108px, 32.4vw, 173px); }
  .zellen.frei.mit-bild .element-einheit:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mit-bild .element-einheit:nth-child(odd) .zelle { border-left: 0; }
  .mit-bild .zelle { background: transparent; }
  .mit-bild .element-bild { height: clamp(100px, 30vw, 160px); }
}

/* ---------- Dezenter Hinweis „Zur Deutung“ statt automatischem Springen ---------- */
#zur-deutung { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20; cursor: pointer; border: 1px solid var(--petrol); background: var(--petrol); color: var(--papier); font: 600 .74rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; padding: 13px 22px; box-shadow: 0 6px 22px rgba(63, 89, 93, .28); }
#zur-deutung[hidden] { display: none; }
#zur-deutung:hover { background: #2F474B; }
#zur-deutung:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Textausrichtung ----------
   Auf dem Seitenhintergrund (Körnungspapier): mittig.
   Auf den weißen Feldern (Textkarten, Listenkästen, Hinweiskästen): Blocksatz mit Silbentrennung.
   Kurze Zierzeilen (Titel, Zeile mit Angaben, Urbild, Frage) bleiben auch in den weißen Feldern mittig. */
.einstieg p, .intro p, .system-kopf .hinweis, .disclaimer, .fuss, .aktu-hinweis { text-align: center; hyphens: manual; }
.text-karte p, .text-karte li, .zweispaltig li, .warnbox p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.text-karte p.art, .text-karte p.stelle, .text-karte p.urbild, .text-karte p.frage, .text-karte p.nachspuren { text-align: center; hyphens: manual; }

/* ---------- Aquarell hinter den Grafiken: überall / nur beim Astro-Rad / ohne (zum Vergleichen) ---------- */
body[data-aquarell="keine"] .rad-flaeche::before { display: none; }
body[data-aquarell="astro"] .rad-flaeche:not(#rad-flaeche)::before { display: none; }

/* Mouse-over und Auswahl auch in der Elemente-Liste (die Bilder darüber bleiben ohne Mouse-over) */
.mit-bild .zelle:hover { background: rgba(179, 154, 107, .14); }
.mit-bild .zelle.aktiv { background: rgba(179, 154, 107, .22); box-shadow: inset 0 -2px 0 var(--petrol); }

/* ---------- Numerologie: Aquarell-Ring hinter dem Zahlenbild (drei Varianten zum Vergleichen) ----------
   --ring-s = Breite des Bildes im Verhältnis zur Fläche; der Ring im Bild liegt genau auf der Mitte des Zahlenbildes. */
#num-flaeche { --ring-s: .857; --ring-m: .52; --ring-h: 1; }   /* gemessen: weißer Ring im Bild bei 30,6 % der Bildbreite, Mitte bei 50 % / 51 % */
#num-flaeche::before { opacity: .8; background-repeat: no-repeat; background-size: calc(var(--ring-s) * 100%) auto;
  background-position: 50% calc((var(--ring-m) - 0.51 * var(--ring-s)) / (var(--ring-h) - var(--ring-s)) * 100%); }
body[data-ring="1"] #num-flaeche::before { display: block; background-image: url("bilder/aquarell_ring_1.png"); transform: translateY(1%); }   /* 1 % nach unten */
body[data-ring="2"] #num-flaeche::before { display: block; background-image: url("bilder/aquarell_ring_2.png"); }
body[data-ring="3"] #num-flaeche::before { display: block; background-image: url("bilder/aquarell_ring_3.png"); }
body[data-ring="keiner"] #num-flaeche::before { display: none; }
/* Test: Zahlen-Ring 1 (gleiche Farbe und Transparenz) auch hinter dem I Ging; Mitte des Rings auf Mitte des Charts */
#ig-flaeche::before { background: url("bilder/aquarell_ring_1.png") 50% 55.2% / 112.5% auto no-repeat; opacity: .65; }
body[data-ig="eckig"] #ig-flaeche::before { background: url("bilder/aquarell_chart_petrol.png") center / cover no-repeat; opacity: 1; }   /* Variante: eckiges Aquarell wie beim Astro-Chart */
@media (max-width: 640px) { #ig-flaeche::before { background-position: 50% 51.7%; background-size: 124.1% auto; } }
/* nur Variante 1: 0,5 % kleiner, Fixpunkt oben links (linke und obere Bildkante bleiben stehen) */
body[data-ring="3"] #num-flaeche { --ring-s: .943; }   /* nur Variante 3: +10 %, aus der Mitte */
body[data-ring="2"] #num-flaeche { --ring-s: .908; }   /* nur Variante 2: +6 %, aus der Mitte */
body[data-ring="1"] #num-flaeche { --ring-s: 1.0149; }
body[data-ring="1"] #num-flaeche::before { background-position: 67.1% 0%; }
@media (max-width: 640px) { #num-flaeche { --ring-s: 1; --ring-m: .55; --ring-h: 1.07; } body[data-ring="3"] #num-flaeche { --ring-s: 1.1; } body[data-ring="2"] #num-flaeche { --ring-s: 1.06; } body[data-ring="1"] #num-flaeche { --ring-s: 1.184; } body[data-ring="1"] #num-flaeche::before { background-position: 51.6% 49.9%; } }

/* I Ging: Chart 0,5 % größer, damit er genau auf dem hellen Ring der Aquarellfläche liegt */
#ig-rad { transform: scale(var(--ig-skala, 1.005)); transform-origin: 50% 50%; }

/* ---------- Einklappbare Kapitel ---------- */
.system-kopf { text-align: center; }
.sys-schalter { display: block; width: 100%; margin: 0; padding: 4px 0 6px; background: none; border: 0; border-radius: 0; cursor: pointer; text-align: center; color: inherit; font: inherit; }
.sys-schalter:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
.sys-schalter .system-titel { transition: color .25s; }
.sys-schalter:hover .system-titel { color: var(--gold-text); }
.sys-pfeil { display: block; width: 9px; height: 9px; margin: 14px auto 2px; border-right: 1.4px solid var(--gold-text); border-bottom: 1.4px solid var(--gold-text); transform: rotate(45deg); transition: transform .35s ease, margin .35s ease; }
.system.offen .sys-pfeil { transform: rotate(-135deg); margin-top: 20px; }
.sys-inhalt { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s ease, visibility 0s .5s; }
.sys-innen { min-height: 0; overflow: hidden; }
.system.offen > .sys-inhalt { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .5s ease, visibility 0s 0s; }
.system.offen > .sys-inhalt > .sys-innen { overflow: visible; transition: overflow 0s .5s; }
@media (prefers-reduced-motion: reduce) { .sys-inhalt, .sys-pfeil { transition: none; } }

/* ---------- Human-Design: drei Entwürfe ---------- */
.hd-var { display: inline; }
.hd-var.v2 .hd-faden { stroke-width: 1.7; opacity: .5; stroke-linecap: round; }
.hd-var.v2 .hd-strang { stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.hd-zier { fill: none; stroke: var(--gold); stroke-width: 2; opacity: .6; pointer-events: none; }
.hd-zier.fein { stroke-width: 1.1; opacity: .45; }

/* ---------- Teil II: Das ganze Bild ---------- */
.teil2 { margin-top: 70px; }
.synthese .intro { max-width: 38em; }
.synthese-rahmen { max-width: 680px; margin: 38px auto 10px; padding: 46px clamp(20px, 6vw, 56px) 44px; border: 1px solid var(--gold); outline: 1px solid var(--linie); outline-offset: 7px; text-align: center; }
.synthese-rahmen .platzhalter { margin: 14px auto 0; max-width: 30em; font: italic 500 1.25rem/1.6 var(--f-titel); color: var(--petrol); text-align: center; }

/* ---------- Textfelder an/aus (zum Ausprobieren) ---------- */
body[data-karten="ohne"] .text-karte, body[data-karten="ohne"] .zweispaltig > div, body[data-karten="ohne"] .warnbox { background: none; border-color: transparent; box-shadow: none; }
body[data-karten="ohne"] .text-karte p, body[data-karten="ohne"] .text-karte li { text-align: center; hyphens: manual; }

/* Hinweis unter der Einleitung liegt durch das Einklappen jetzt im Inhaltsbereich: gleiche Gestaltung, mittig */
.sys-innen .hinweis { max-width: 36em; margin: 14px auto 0; font-size: 1.08rem; line-height: 1.6; color: var(--text); text-align: center; hyphens: manual; }

/* Human Design: dunkleres Farb-Overlay beim Darüberfahren (wie bei den anderen Charts) */
.hd-zentrum:hover .hd-form, .hd-zentrum:focus-visible .hd-form, .hd-zentrum.def:hover .hd-form { fill-opacity: .38; }
.hd-zentrum.aktiv .hd-form, .hd-zentrum.def.aktiv .hd-form { fill-opacity: .46; }
.hd-tor.an.p:hover .hd-tor-p, .hd-tor.an.beide:hover .hd-tor-p, .hd-tor.aktiv .hd-tor-p { fill: #3B5C72; }
.hd-tor.an.d:hover .hd-tor-d, .hd-tor.an.beide:hover .hd-tor-d { fill: #D4BA8C; }
.hd-tor.aktiv .hd-tor-d { fill: #DCC7A3; }
.hd-kanal.an:hover .hd-strang.p, .hd-kanal.aktiv .hd-strang.p { stroke: #2C4860; }
.hd-kanal.an:hover .hd-strang.d, .hd-kanal.aktiv .hd-strang.d { stroke: #8F7544; }

/* Astrologie-Chart: Abstand nach oben (zum Hinweistext) und nach unten (zu den Reitern Planeten/Häuser) angeglichen */
#rad-flaeche { margin-top: -6.7%; margin-bottom: calc(-3.3% - 20px); }
/* I Ging: Das Urbild steht als mittiges Zitat zwischen den Absätzen der Botschaft; die goldene Kernaussage steht wie bei Elementen und Human Design im Blocksatz */
#text-ig .zitat { text-align: center; hyphens: manual; margin: 1.6em auto 1.8em; }
body[data-ig="ohne"] #ig-flaeche::before { display: none; }   /* dritte Variante: I Ging ganz ohne Aquarell */

/* Dein Lebensthema: doppelter Rahmen im Einstieg (wie der Rahmen in Teil II), Text mittig */
.synthese-rahmen.lebensthema { margin: 34px auto 30px; }
.synthese-rahmen.lebensthema:not(:has(.lt-text)) { padding-bottom: 28px; }
.synthese-rahmen .lt-titel { margin: 14px auto 0; max-width: 30em; font: italic 500 1.4rem/1.45 var(--f-titel); color: var(--petrol); text-align: center; }
.synthese-rahmen .lt-text { margin: 14px auto 0; max-width: 34em; font-size: 1rem; line-height: 1.75; color: var(--text); text-align: center; hyphens: manual; }

/* Einstieg: eine Zeile Abstand zwischen Einleitungstext und Disclaimer */
.einstieg .disclaimer { margin-top: 1.7em; }

/* ---------- Eingabemaske: dezent, mit Linien statt Feldern ---------- */
.formular { background: none; border: 0; padding: 8px clamp(4px, 3vw, 22px) 4px; }
.formular .feld { margin-bottom: 26px; }
.formular label, .formular legend { margin-bottom: 2px; }
.formular input[type="text"], .formular input[type="date"], .formular input[type="time"] { background: transparent; border: 0; border-bottom: 1px solid var(--gold); padding: 9px 2px 9px; min-height: 0; font-size: 1.12rem; }
.formular input:focus { outline: none; border-bottom-color: var(--petrol); box-shadow: 0 1px 0 var(--petrol); }
.formular input:disabled { border-bottom-style: dotted; background: transparent; }
.segment { gap: 0; }
.segment-knopf { border: 0; border-bottom: 1px solid var(--linie); padding: 11px 6px; }
.segment-knopf + .segment-knopf { border-left: 0; }
.segment-knopf:hover { background: none; color: var(--gold-text); }
.segment-knopf.an { background: none; border-bottom: 2px solid var(--petrol); color: var(--petrol); }
.vorschlaege { background: var(--papier); border: 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); box-shadow: none; }
.haupt-knopf { background: transparent; color: var(--petrol); border: 1px solid var(--petrol); }
.haupt-knopf:hover { background: rgba(179, 154, 107, .14); box-shadow: none; }
.haupt-knopf:disabled { background: transparent; color: #A9B3B4; border-color: #D3D8D8; }
.zweit-knopf { border-color: var(--linie); }
.warnbox { background: none; border: 0; border-left: 1px solid var(--gold); padding: 4px 0 4px 20px; }
.pruef-karte { background: none; border: 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: 30px clamp(4px, 3vw, 22px) 26px; }
.haken { border: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 12px 2px; }
.hinweis-box { background: none; border-left: 1px solid var(--gold); padding: 4px 0 4px 16px; }

/* ---------- Eingabemaske, zweite Runde: keine senkrechten Linien, mehr Luft ---------- */
.eingabe .einstieg h2 + .lead { margin-top: 1.5em; }
/* Warnhinweis: mittig, oben und unten eine Goldlinie mit kleinem Symbol (wie beim Zitat) */
.warnbox { max-width: 640px; margin: 0 auto 44px; padding: 0; border: 0; background: none; text-align: center; }
.warnbox::before, .warnbox::after { content: ""; display: block; height: 24px; --ic: var(--ic-stern);
  background: var(--ic) center / 24px 24px no-repeat, linear-gradient(var(--gold), var(--gold)) left center / calc(50% - 24px) 1px no-repeat, linear-gradient(var(--gold), var(--gold)) right center / calc(50% - 24px) 1px no-repeat; }
.warnbox::before { margin-bottom: 16px; } .warnbox::after { margin-top: 16px; }
.warnbox h4 { text-align: center; margin-bottom: 12px; }
.warnbox p { text-align: center; hyphens: manual; }
.hinweis-box, .hinweis-box.gut { border: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 12px 2px; background: none; }
/* Felder: mehr Abstand, besonders über der goldenen Beschriftung */
.formular { padding-top: 14px; }
.formular .feld { margin-bottom: 42px; }
.formular label, .formular legend { margin-bottom: 8px; }
.formular .hilfe { margin-top: 10px; }
/* Geburtszeit: drei Wörter nebeneinander, vorn ein Punkt zum Anklicken */
.segment { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 0 0 14px; }
.segment-knopf { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 8px 2px; border: 0; background: none; font: 600 .78rem/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); }
.segment-knopf + .segment-knopf { border: 0; }
.segment-knopf::before { content: ""; flex: none; width: 12px; height: 12px; border: 1px solid var(--gold-text); border-radius: 50%; box-sizing: border-box; transition: background .2s, border-color .2s; }
.segment-knopf:hover { background: none; color: var(--gold-text); }
.segment-knopf.an { background: none; border: 0; color: var(--petrol); }
.segment-knopf.an::before { background: var(--petrol); border-color: var(--petrol); box-shadow: inset 0 0 0 2px var(--papier); }
.segment-knopf:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.ig-tri-hinweis { font-size: .95rem !important; margin-top: 4px !important; max-width: 34em; }

/* I Ging: die acht Urbilder im inneren Kreis wie die offenen Zentren im Human Design: durchsichtig, beim Darüberfahren dunkler (38 % Gold), angeklickt noch etwas dunkler (46 %), nur ein dezenter grauer Schatten */
.num-knoten.ig-tri .num-huelle { fill: var(--gold); fill-opacity: 0; transition: fill-opacity .3s, filter .25s; }
.num-knoten.ig-tri:hover .num-huelle, .num-knoten.ig-tri:focus-visible .num-huelle { fill: var(--gold); fill-opacity: .38; stroke: var(--gold-text); stroke-width: 1.3; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.num-knoten.ig-tri.aktiv .num-huelle { fill: var(--gold); fill-opacity: .46; stroke: var(--gold-text); stroke-width: 1.3; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.num-knoten.ig-tri:hover .bewegung, .num-knoten.ig-tri:focus-visible .bewegung { transform: none; }

/* Keine Aquarellflächen mehr hinter den Charts (Astrologie, I Ging); die Bilder bleiben im Ordner und können später wieder eingesetzt werden */
.rad-flaeche::before, #rad-flaeche::before, #ig-flaeche::before, #num-flaeche::before { display: none !important; }

/* Astrologie: Mouseover und Auswahl wie bei Human Design, Numerologie und I Ging: dunkler, nur ein dezenter grauer Schatten, kein gelber Schein, kein Wachsen und Atmen */
.planet:hover .bewegung, .planet:focus-visible .bewegung, .marke:hover .bewegung, .marke:focus-visible .bewegung { transform: none; }
.planet.aktiv .bewegung { animation: none; filter: none; }
.planet:hover .huelle, .planet:focus-visible .huelle { fill: #DBCFB8; stroke-width: 1.8; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.planet.aktiv .huelle { fill: #D6C8AE; stroke: var(--petrol); stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.planet.lichtpl:hover .huelle, .planet.lichtpl:focus-visible .huelle, .planet.lichtpl.aktiv .huelle { fill: #3B5C72; stroke: var(--gold); }
.marke:hover .huelle, .marke:focus-visible .huelle { fill: #DBCFB8; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.marke.aktiv .huelle { fill: #D6C8AE; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
/* I Ging, die eigenen Zeichen im Kreis: ebenfalls grauer Schatten statt gelbem Schein */
#ig-rad.verwandt-an .ig-hex.mein.verwandt .ig-hex-grund { fill: #DBCFB8; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.ig-hex:hover .ig-hex-grund, .ig-hex:focus-visible .ig-hex-grund { fill: #DBCFB8; stroke: var(--gold-text); filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.ig-hex.mein:hover .ig-hex-grund, .ig-hex.mein:focus-visible .ig-hex-grund { fill: #DBCFB8; stroke: var(--petrol); }
.ig-hex.aktiv .ig-hex-grund, .ig-hex.mein.aktiv:hover .ig-hex-grund { fill: #D6C8AE; stroke: var(--petrol); filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
/* ---------- Teil II „Dein Wirken“ + Steckbrief in Teil I ---------- */
.steckbrief { max-width: 760px; margin: 34px auto 6px; padding: 26px 4% 22px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); text-align: center; }
.steckbrief .sb-kicker { margin: 0 0 8px; font: 600 .72rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); }
.steckbrief .sb-anreisser { margin: 0 auto 22px; max-width: 30em; font: italic 500 1.45rem/1.4 var(--f-titel); color: var(--petrol); text-align: center; }
.sb-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 14px; }
.sb-punkt { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.sb-label { font: 400 .66rem/1.2 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.sb-wert { font: 500 1.12rem/1.25 var(--f-titel); color: var(--petrol); overflow-wrap: anywhere; }
.sb-wert.zahl { font-family: var(--f-zahl); font-size: 1.3rem; font-weight: 400; }

.wirken { margin-top: 56px; }
.wirken-kopf { max-width: 560px; margin: 0 auto; text-align: center; }
.wirken-kopf .kicker { margin-bottom: 10px; }
.wirken-flaeche { max-width: 640px; margin-top: 18px; padding: 0 2%; }
#wirken-rad { display: block; width: 100%; height: auto; overflow: visible; }
#wirken-rad :focus, #wirken-rad :focus-visible { outline: none; }
.wk-frage { fill: var(--petrol); font-family: var(--f-titel) !important; font-style: italic; font-weight: 500; font-size: 17px; pointer-events: none; }
.n4.wk-saeule .n4-name { font-size: 10.5px; }
.n4 .wk-knoten-zeichen { fill: none; stroke: var(--petrol); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.n4 .wk-knoten-punkt { fill: var(--petrol); pointer-events: none; }
.n4-kreis.wk-mitte { fill: #EBE3D6; stroke: var(--gold-text); stroke-width: 1.6; pointer-events: none; }
.wk-thema { cursor: pointer; outline: none; }
.wk-thema-text { fill: var(--petrol); font-family: var(--f-titel) !important; font-weight: 500; font-size: 18px; pointer-events: none; transition: fill .25s; }
.wk-thema:hover .wk-thema-text, .wk-thema:focus-visible .wk-thema-text { fill: var(--gold-text); }
.wk-thema.aktiv .wk-thema-text { fill: var(--gold-text); text-decoration: underline; text-underline-offset: 4px; }
.wk-thema .n4-punkt { transition: fill .25s; }
.wirken-band-kopf { text-align: center; margin: 42px 0 12px; }
#wirken-band.vier .z-gross { font-size: 1.12rem; }
@media (max-width: 760px) { #wirken-band.vier { grid-template-columns: repeat(2, 1fr); } }
.text-karte .wk-slot { margin: 26px 0 -2px; font: 600 .7rem/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); text-align: center; }
.text-karte .wk-liste { list-style: none; margin: 8px 0 0; padding: 0; text-align: center; color: var(--petrol); font: 500 1.05rem/1.6 var(--f-titel); }
.text-karte .wk-themen-label { margin: 18px 0 8px; font: 400 .68rem/1.2 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--petrol); text-align: center; }
.wk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wk-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 14px; border: 1px solid var(--gold); font: 500 .98rem/1.2 var(--f-titel); color: var(--petrol); transition: background .25s; }
.wk-chip:hover, .wk-chip:focus-visible { background: rgba(179, 154, 107, .22); }
.wk-chip:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.wk-link { all: unset; box-sizing: border-box; display: block; margin: 12px auto 0; cursor: pointer; font: 600 .72rem/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); border-bottom: 1px solid var(--gold); padding-bottom: 3px; width: fit-content; }
.wk-link:hover, .wk-link:focus-visible { color: var(--petrol); border-color: var(--petrol); }
.wirken .synthese-rahmen { margin-top: 56px; }
@media (max-width: 640px) { .wirken-flaeche { padding: 0; } .steckbrief .sb-anreisser { font-size: 1.25rem; } .sb-raster { grid-template-columns: repeat(2, 1fr); } }
/* ---------- Teil II neu: Kern mit drei Kreisen, zwölf Kapitel ---------- */
.n4.wk-kern .n4-kreis { fill: #D6C8AE; stroke: var(--petrol); stroke-width: 1.6; }
.n4.wk-kern:hover .n4-kreis, .n4.wk-kern:focus-visible .n4-kreis { fill: #CDBD9E; stroke-width: 2.2; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.n4.wk-kern.aktiv .n4-kreis { fill: #C6B590; stroke-width: 2.4; }
.wk-kern-text { fill: var(--petrol); font-family: var(--f-titel) !important; font-weight: 500; font-size: 20px; pointer-events: none; }
.wirken-gruppe .wk-kapitel { max-width: 700px; margin: 34px auto 0; }
.wk-nr { margin: 0; text-align: center; font: 400 1.5rem/1 var(--f-zahl); color: var(--gold-text); }
.wk-kapitel-titel { margin: 6px 0 14px; text-align: center; font: 500 1.5rem/1.25 var(--f-titel); color: var(--titel-farbe, var(--petrol)); }
.wk-kapitel .text-karte.leer { padding-top: 22px; padding-bottom: 20px; }
.wk-kapitel .platzhalter { margin: 0; text-align: center; font: italic 500 1.1rem/1.6 var(--f-titel); color: var(--petrol); }
.wk-fragen { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linie); }
.wk-fragen-label { margin: 0 0 8px; text-align: center; font: 600 .7rem/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
/* Teil II: je Gruppe ein Textrahmen */
.wirken-gruppe { max-width: 700px; margin: 64px auto 0; }
.wk-gruppenkopf { text-align: center; margin-bottom: 18px; }
.wk-gruppenkopf .kicker { margin-bottom: 8px; }
.wk-rahmen { padding-top: 14px; }
.wk-rahmen .wk-kapitel-titel { margin: 28px 0 8px; text-align: center; font: 500 1.4rem/1.3 var(--f-titel); color: var(--titel-farbe, var(--petrol)); }
.wk-rahmen .platzhalter { margin: 0; text-align: center; font: italic 500 1.02rem/1.6 var(--f-titel); color: var(--gold-text); }
/* ---------- Teil II: Kreis mit Varianten A/B (nach Skizze_Dein_Wirken_Kreis_1210) ---------- */
.wk-schalter { display: flex; width: max-content; max-width: 100%; margin: 18px auto 6px; border: 1px solid var(--gold); }
.wk-schalter button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 14px; font: 600 .78rem/1.2 var(--f-text); color: var(--petrol); }
.wk-schalter button[aria-pressed="true"] { background: var(--petrol); color: var(--papier, #F4EFE7); }
.wirken-flaeche { max-width: 860px; }
.wk-innen { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 6; opacity: .8; pointer-events: none; }
.wk-neben { fill: var(--gold-text); font-size: 13.5px; pointer-events: none; }
.wk-eng .wk-neben { display: none; }
.n4.wk-kern .n4-kreis { fill: rgba(179, 154, 107, .30); stroke: var(--petrol); stroke-width: 1.6; }
.n4.wk-kern:hover .n4-kreis, .n4.wk-kern:focus-visible .n4-kreis { fill: rgba(179, 154, 107, .40); stroke-width: 2.2; filter: none; }
.n4.wk-kern.aktiv .n4-kreis { fill: rgba(179, 154, 107, .50); stroke-width: 2.4; }
.wk-kern-text { fill: var(--petrol); font-family: var(--f-titel) !important; font-weight: 600; font-size: 19px; pointer-events: none; }
.wk-eng .wk-kern-text { font-size: 19.5px; }
.n4.wk-nord .n4-kreis { fill: #F4EFE7; stroke: var(--gold-text); stroke-width: 1.6; }
.n4.wk-nord:hover .n4-kreis, .n4.wk-nord:focus-visible .n4-kreis, .n4.wk-nord.aktiv .n4-kreis { fill: #DBCFB8; stroke: var(--petrol); filter: none; }
.wk-nord-text { fill: var(--petrol); font-family: var(--f-titel) !important; font-style: italic; font-weight: 600; font-size: 17px; pointer-events: none; }
.wk-bogen { fill: none; stroke: var(--gold-text); stroke-width: 4; opacity: .45; pointer-events: none; }
.wk-bogen-text { fill: var(--gold-text); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; pointer-events: none; }
.wk-ausen { cursor: pointer; outline: none; }
.wk-k { fill: #F4EFE7; stroke: var(--gold-text); stroke-width: 1.6; transition: fill .3s; }
.wk-ausen:hover .wk-k, .wk-ausen:focus-visible .wk-k { fill: #DBCFB8; stroke: var(--petrol); stroke-width: 2.2; }
.wk-ausen.aktiv .wk-k { fill: #D6C8AE; stroke: var(--petrol); stroke-width: 2.4; }
.wk-nummer { fill: var(--petrol); font-family: var(--f-zahl) !important; font-weight: 400; font-size: 20px; pointer-events: none; }
.wk-aussen-text { fill: var(--petrol); font-size: 15px; pointer-events: none; }
.wk-aussen-text.mitte { font-family: var(--f-titel) !important; font-weight: 600; font-size: 17px; }
.wk-legende { margin: 6px 0 0; text-align: center; font-size: .85rem; color: var(--text); }
.wk-neben-zeile { margin: 4px 0 0; text-align: center; font-size: .9rem; color: var(--gold-text); }
.wk-band { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 760px; margin: 26px auto 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.wk-band div { padding: 14px 8px; text-align: center; border-left: 1px solid var(--linie); display: flex; flex-direction: column; gap: 5px; }
.wk-band div:first-child { border-left: 0; }
.wk-band span { font: 400 .66rem/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--petrol); }
.wk-band b { font: 500 1.2rem/1.2 var(--f-titel); color: var(--petrol); }
.wk-leitsatz { max-width: 640px; margin: 34px auto 26px; text-align: center; font: italic 500 1.6rem/1.45 var(--f-titel); color: var(--petrol); }
.wk-leitsatz::before, .wk-leitsatz::after { content: ""; display: block; height: 1px; width: 120px; margin: 16px auto; background: var(--gold); }
.wk-leitsatz.leer { font-size: 1.1rem; color: var(--gold-text); }
.wk-kapnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 700px; margin: 14px auto 0; border: 1px solid var(--gold); }
.wk-kapknopf { all: unset; box-sizing: border-box; flex: 1 1 140px; cursor: pointer; padding: 11px 8px; text-align: center; font: 600 .74rem/1.3 var(--f-text); letter-spacing: .06em; color: var(--petrol); border-left: 1px solid var(--linie); }
.wk-kapknopf:first-child { border-left: 0; }
.wk-kapknopf:hover { background: rgba(179, 154, 107, .14); }
.wk-kapknopf.aktiv { background: rgba(179, 154, 107, .24); box-shadow: inset 0 -2px 0 var(--petrol); }
.wk-rahmen h4.ziel { background: linear-gradient(transparent 62%, rgba(179, 154, 107, .35) 62%); display: block; }
@media (max-width: 640px) { .wk-band { grid-template-columns: 1fr 1fr; } .wk-band div:nth-child(3) { border-left: 0; } .wk-band div:nth-child(-n+2) { border-bottom: 1px solid var(--linie); } .wk-leitsatz { font-size: 1.3rem; } }
/* Feinschliff nach „Variante 1/2“ aus design/fertige Elemente: Kapitelfarben, Kern wie in der Vorlage */
:root { --wk-g0: #3F595D; --wk-g1: #6F6A3E; --wk-g2: #A9583A; }
.wk-ausen.g0, .wk-bogen.g0, .wk-bogen-text.g0 { --gk: var(--wk-g0); }
.wk-ausen.g1, .wk-bogen.g1, .wk-bogen-text.g1 { --gk: var(--wk-g1); }
.wk-ausen.g2, .wk-bogen.g2, .wk-bogen-text.g2 { --gk: var(--wk-g2); }
.wk-ring { fill: none; stroke: var(--linie); stroke-width: 1.2; pointer-events: none; }
.wk-bogen { stroke: var(--gk); stroke-width: 4; opacity: .55; }
.wk-bogen-text { fill: var(--gk); font-size: 14px; font-weight: 600; letter-spacing: 1.5px; }
.wk-k { fill: #F4EFE7; stroke: var(--gk); stroke-width: 1.6; }
.wk-ausen:hover .wk-k, .wk-ausen:focus-visible .wk-k, .wk-ausen.aktiv .wk-k { stroke: var(--gk); stroke-width: 2.6; fill: color-mix(in srgb, var(--gk) 14%, #F4EFE7); }
.wk-nummer { fill: var(--gk); font-family: var(--f-text) !important; font-weight: 600; font-size: 19px; }
.wk-aussen-text { fill: var(--petrol); font-size: 15px; }
.wk-aussen-text.mitte { font-family: var(--f-text) !important; font-weight: 600; font-size: 15.5px; }
.wk-neben { font-size: 15px; }
.n4.wk-kern .n4-kreis { fill: rgba(244, 239, 231, .55); stroke: var(--gold); stroke-width: 1.6; }
.n4.wk-kern:hover .n4-kreis, .n4.wk-kern:focus-visible .n4-kreis { stroke: var(--petrol); stroke-width: 2.4; fill: rgba(63, 89, 93, .08); }
.n4.wk-kern.aktiv .n4-kreis { stroke: var(--petrol); stroke-width: 2.4; fill: rgba(63, 89, 93, .12); }
.wk-kern-text { font-family: var(--f-text) !important; font-weight: 600; font-size: 17px; }
.wk-eng .wk-kern-text { font-size: 19px; }
.n4.wk-nord .n4-kreis { fill: #F4EFE7; stroke: var(--gold); }
.wk-nord-text { font-family: var(--f-text) !important; font-style: normal; font-weight: 600; font-size: 15px; }
.n4-name { font-size: 12px; letter-spacing: 2px; }
.wk-kapknopf.g0 { color: var(--wk-g0); } .wk-kapknopf.g1 { color: var(--wk-g1); } .wk-kapknopf.g2 { color: var(--wk-g2); }
.wk-kapknopf.aktiv.g0 { box-shadow: inset 0 -2px 0 var(--wk-g0); } .wk-kapknopf.aktiv.g1 { box-shadow: inset 0 -2px 0 var(--wk-g1); } .wk-kapknopf.aktiv.g2 { box-shadow: inset 0 -2px 0 var(--wk-g2); }
/* Kern: drei getrennte Kreise auf einem Ring */
.wk-kernring { fill: none; stroke: var(--gold); stroke-width: 1.4; pointer-events: none; }
.n4.wk-kern .n4-kreis { fill: #F4EFE7; }
.n4.wk-kern:hover .n4-kreis, .n4.wk-kern:focus-visible .n4-kreis { fill: #E9E1D2; }
.n4.wk-kern.aktiv .n4-kreis { fill: #E0D6C2; }
.wk-kern-text { font-size: 15px; }
.wk-eng .wk-kern-text { font-size: 16px; }
/* feinere Linien, Kern ohne Mouse-over */
.wk-ring { stroke-width: .8; }
.wk-innen { stroke-width: .7; }
.wk-kernring { stroke-width: .8; }
.wk-bogen { stroke-width: 2.2; }
.wk-k { stroke-width: 1; }
.wk-ausen:hover .wk-k, .wk-ausen:focus-visible .wk-k, .wk-ausen.aktiv .wk-k { stroke-width: 1.6; }
.n4.wk-nord .n4-kreis { stroke-width: 1; }
.wk-kern { pointer-events: none; }
.wk-kern .n4-kreis { fill: rgba(244, 239, 231, .55); stroke: var(--gold); stroke-width: 1; }
.wk-neben + .wk-neben { }
/* drei Felder unter dem Leitsatz, Zeile zu Wesenskern und Wirkungskanal */
.wk-kapnav { gap: 12px; border: 0; max-width: 760px; margin: 6px auto 0; }
.wk-kapknopf { flex: 1 1 200px; border: 1px solid currentColor; padding: 16px 10px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.wk-kapknopf:first-child { border-left: 1px solid currentColor; }
.wk-kapknopf:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.wk-kapknopf.aktiv { background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: none; }
.text-karte .wk-elementzeile { margin: 4px 0 0; text-align: center; font: 400 .8rem/1.4 var(--f-text); letter-spacing: .08em; color: var(--gold-text); }
/* Teil II: Karte und Leiste wie in den fünf Systemen */
.text-karte .wk-platzhalter { font-style: italic; color: var(--gold-text); }
.text-karte .block-titel.ziel { background: linear-gradient(transparent 62%, rgba(179, 154, 107, .35) 62%); display: inline-block; }
.wirken .auswahl { margin-top: 22px; }
.wirken .zellen.frei .z-gross { font-size: 1.15rem; }
/* Kern: deckende Kreise, gemeinsames dezentes Mouse-over */
.wk-kern { pointer-events: auto; }
.wk-kk { fill: #F4EFE7; stroke: var(--gold); stroke-width: 1; transition: fill .3s, stroke .3s; }
.wk-treffer { fill: transparent; pointer-events: all; }
.wk-kerngruppe:hover .wk-kk { fill: #EBE3D6; stroke: var(--petrol); stroke-width: 1.3; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .18)); }
/* Mouse-over wie in den anderen Charts: Füllung 38 % Gold (#DBCFB8), Rand bleibt golden, dezenter Schatten; angeklickt #D6C8AE */
.wk-kerngruppe:hover .wk-kk { fill: #DBCFB8; stroke: var(--gold-text); stroke-width: 1.3; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.n4.wk-nord:hover .n4-kreis, .n4.wk-nord:focus-visible .n4-kreis { fill: #DBCFB8; stroke: var(--gold-text); stroke-width: 1.3; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.n4.wk-nord.aktiv .n4-kreis, .n4.wk-nord.aktiv:hover .n4-kreis { fill: #D6C8AE; stroke: var(--petrol); stroke-width: 1.4; }
.wk-ausen:hover .wk-k, .wk-ausen:focus-visible .wk-k { fill: #DBCFB8; stroke: var(--gk); stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(63, 89, 93, .22)); }
.wk-ausen.aktiv .wk-k, .wk-ausen.aktiv:hover .wk-k { fill: #D6C8AE; stroke: var(--gk); stroke-width: 1.7; }
.text-karte h4.ziel { background: linear-gradient(transparent 62%, rgba(179, 154, 107, .35) 62%); display: inline-block; }
/* Feinschliff: zwei Stufen wie in den anderen Charts (Hover hell, angeklickt dunkler), Legende, Leiste wie Teil I */
.wk-kerngruppe:hover .wk-kk { fill: #E4DBC9; stroke: var(--gold-text); stroke-width: 1.2; }
.n4.wk-nord:hover .n4-kreis, .n4.wk-nord:focus-visible .n4-kreis { fill: #E4DBC9; stroke: var(--gold-text); stroke-width: 1.2; }
.n4.wk-nord.aktiv .n4-kreis, .n4.wk-nord.aktiv:hover .n4-kreis { fill: #DBCFB8; stroke: var(--gold-text); stroke-width: 1.2; }
.wk-ausen:hover .wk-k, .wk-ausen:focus-visible .wk-k { fill: #E4DBC9; stroke: var(--gk); stroke-width: 1.3; }
.wk-ausen.aktiv .wk-k, .wk-ausen.aktiv:hover .wk-k { fill: #DBCFB8; stroke: var(--gk); stroke-width: 1.5; }
.wirken .zellen.frei .z-gross { font-size: 1.4rem; }
ul.wk-legende { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 44px; margin: 14px 0 0; padding: 0; font-size: .9rem; color: var(--text); }
.wk-legende li { display: inline-flex; align-items: center; gap: 10px; }
.wk-leg-ic { display: inline-flex; } .wk-leg-ic svg { height: 20px; width: auto; display: block; }
.text-karte .wk-leitsatz-gold { margin: 4px auto 22px; max-width: 30em; text-align: center; font: italic 500 1.35rem/1.5 var(--f-titel); color: var(--gold-text); }
/* Synthese-Texte: Farben mit Quadrat, Formel-Kasten, Schlusssatz */
.text-karte ul.wk-farben { list-style: none; margin: 14px 0; padding: 0; }
.text-karte ul.wk-farben li { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0; }
.wk-farbe { flex: none; width: 18px; height: 18px; margin-top: 4px; border: 1px solid rgba(63, 89, 93, .25); }
.text-karte p.wk-formel { margin: 14px 0; padding: 14px 18px; border: 1px solid var(--gold); background: rgba(179, 154, 107, .1); font: italic 500 1.12rem/1.6 var(--f-titel); color: var(--petrol); }
.text-karte p.wk-schluss { margin-top: 26px; font-size: .95rem; color: var(--gold-text); font-style: italic; }
/* Header aus Einzelteilen: Wasserfarbe links, rechts, Logo in der Mitte (weißer Hintergrund der Bilder verschwindet per multiply) */
.kopf-teile { position: relative; height: clamp(250px, 33vw, 500px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }
.kopf-teile img { position: absolute; display: block; mix-blend-mode: multiply; }
.kopf-teile .kt-links { left: 0; top: 0; height: 100%; width: auto; max-width: 52%; object-fit: cover; object-position: left center; }
.kopf-teile .kt-rechts { right: 0; top: 0; height: 100%; width: auto; max-width: 52%; object-fit: cover; object-position: right center; }
.kopf-teile .kt-logo { left: 50%; top: 46%; transform: translate(-50%, -50%); width: clamp(170px, 22vw, 290px); height: auto; mix-blend-mode: normal; }
@media (max-width: 640px) { .kopf-teile { height: 250px; } .kopf-teile .kt-links, .kopf-teile .kt-rechts { max-width: 62%; } }
.text-karte .wk-leitsatz-gold { margin: 4px 0 1.2em; max-width: none; text-align: center; font: 400 1.12rem/1.55 var(--f-text); font-style: normal; color: var(--kern-farbe); }
.kopf-teile { -webkit-mask-image: none; mask-image: none; }
.kopf-teile .kt-links, .kopf-teile .kt-rechts { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.kopf-teile .kt-links { -webkit-mask-image: linear-gradient(#000 80%, transparent), linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(#000 80%, transparent), linear-gradient(to right, #000 78%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.kopf-teile .kt-rechts { -webkit-mask-image: linear-gradient(#000 80%, transparent), linear-gradient(to left, #000 78%, transparent); mask-image: linear-gradient(#000 80%, transparent), linear-gradient(to left, #000 78%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Header: Teile +20 %, neues Signatur-Logo (JPG auf Weiß, multiply) */
.kopf-teile { height: clamp(300px, 39.6vw, 600px); }
.kopf-teile .kt-links, .kopf-teile .kt-rechts { max-width: 62%; }
.kopf-teile .kt-logo { width: clamp(200px, 26vw, 340px); mix-blend-mode: multiply; }
@media (max-width: 640px) { .kopf-teile { height: 300px; } .kopf-teile .kt-links, .kopf-teile .kt-rechts { max-width: 74%; } .kopf-teile .kt-logo { width: 215px; } }
.kopf-teile .kt-logo { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Header: linkes Teil 20 px tiefer; am Handy: links oben, rechts unten, Logo frei in der Mitte */
.kopf-teile .kt-links { top: 20px; }
@media (max-width: 640px) {
  .kopf-teile { height: 360px; }
  .kopf-teile .kt-links { top: 0; height: 42%; max-width: 70%; }
  .kopf-teile .kt-rechts { top: auto; bottom: 0; height: 42%; max-width: 70%; }
  .kopf-teile .kt-logo { top: 50%; width: 215px; }
}
/* Auf einen Blick unter „Dein Wesen im Ursprung“: ohne Linien, antippbar */
.steckbrief { max-width: 760px; margin: 6px auto 0; padding: 0 4%; border: 0; }
.steckbrief .sb-punkt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 10px 6px; text-align: center; transition: background .25s; }
.steckbrief .sb-punkt:hover, .steckbrief .sb-punkt:focus-visible { background: rgba(179, 154, 107, .14); }
.steckbrief .sb-punkt:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }
.steckbrief .sb-raster { gap: 6px 10px; }
/* sechs Punkte unter Teil I: nur Information, nicht anklickbar */
.steckbrief .sb-punkt { cursor: default; padding: 10px 6px; }
.steckbrief .sb-punkt:hover { background: none; }
/* Reiter „Planeten | Häuser“ liegen über dem Rad (dessen negativer Außenabstand hat die Knöpfe überdeckt) */
#astro-bereich .auswahl { position: relative; z-index: 3; }
/* Kreis Dein Wirken kompakter: Gesamtgroesse etwa wie Astrologie- und I-Ging-Rad */
.wirken-flaeche { max-width: 762px; }

/* Einleitung vor dem Kreis, goldener Satz bei Schatten und Hindernisse */
.wirken { margin-top: 64px; }
.wirken-kopf { margin-bottom: 8px; }
.wirken-kopf .wk-einleitung { max-width: 36em; margin: 18px auto 30px; font-size: 1.08rem; line-height: 1.6; text-align: center; color: var(--text); }
.text-karte .wk-leitsatz-schatten { margin: 4px auto 1.4em; max-width: 30em; text-align: center; font: italic 500 1.3rem/1.5 var(--f-titel); color: var(--gold-text); }
/* Feinheiten: keine Linie über dem Lebensthema-Rahmen, mehr Luft um den Wirkkreis, gleicher Abstand Überschrift/Untertitel zur Linie mit Stern */
.synthese .intro::after { display: none; }
.wirken-kopf .wk-einleitung { margin-bottom: 40px; }
.wirken-flaeche { margin-bottom: 10px; }
.wirken .auswahl { margin-top: 32px; }
.text-karte > h3 + .block::before { margin-top: 20px; }   /* Außenabstände fallen zusammen: wie bei .stelle (20 px) */
/* Header-Teile als PNG mit Transparenz (kein Farbstich mehr durch multiply); Handy: rechtes Teil bleibt oben, linkes rückt nach unten */
.kopf-teile .kt-links, .kopf-teile .kt-rechts { mix-blend-mode: normal; }
@media (max-width: 640px) {
  .kopf-teile .kt-rechts { top: 0; bottom: auto; }
  .kopf-teile .kt-links { top: auto; bottom: 0; }
}
/* Logo freigestellt (kein Farbstich dahinter); Handy: Header-Teile größer; Nordknoten-Raute sandfarben wie feste Zentren im Human Design */
.kopf-teile .kt-logo { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 640px) {
  .kopf-teile { height: 400px; }
  .kopf-teile .kt-links, .kopf-teile .kt-rechts { height: 52%; max-width: 82%; }
}
.n4.wk-nord .n4-kreis { fill: #EBE3D6; stroke: var(--gold-text); stroke-width: 1.2; }
.n4.wk-nord:hover .n4-kreis, .n4.wk-nord:focus-visible .n4-kreis { fill: #DBCFB8; stroke: var(--gold-text); stroke-width: 1.4; }
.n4.wk-nord.aktiv .n4-kreis, .n4.wk-nord.aktiv:hover .n4-kreis { fill: #D6C8AE; stroke: var(--petrol); stroke-width: 1.5; }
.wk-nord-nr { fill: var(--gold-text); font-family: var(--f-text) !important; font-weight: 600; font-size: 12px; letter-spacing: 1px; pointer-events: none; }
/* keine Hervorhebung der angetippten Zwischenüberschrift (fetter Balken) */
.text-karte h4.ziel, .text-karte .block-titel.ziel, .wk-rahmen h4.ziel { background: none; display: block; }
/* Abschnittsansicht: schmale Leiste zum Wechseln, Link „Ganzes Kapitel lesen“ */
.wk-leiste { display: flex; flex-wrap: wrap; justify-content: center; margin: 14px auto 0; max-width: 700px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.wk-leiste button { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 110px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; text-align: center; font: 400 .72rem/1.25 var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--petrol); border-left: 1px solid var(--linie); transition: background .25s; }
.wk-leiste button:first-child { border-left: 0; }
.wk-leiste button:hover, .wk-leiste button:focus-visible { background: rgba(179, 154, 107, .12); }
.wk-leiste button.aktiv { background: rgba(179, 154, 107, .2); box-shadow: inset 0 -2px 0 var(--petrol); }
.wk-leiste .wk-l-nr { font: 500 1.05rem/1 var(--f-titel); letter-spacing: 0; }
.wk-ganz { all: unset; box-sizing: border-box; display: block; margin: 16px auto 0; cursor: pointer; font: 600 .72rem/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); border-bottom: 1px solid var(--gold); padding-bottom: 3px; width: fit-content; }
.wk-ganz:hover, .wk-ganz:focus-visible { color: var(--petrol); border-color: var(--petrol); }
.text-karte p.wk-schluss { font-size: .85rem; }
/* goldener Satz unter den Überschriften der Felder 01–04 */
.text-karte .wk-gold-satz { margin: 6px auto 12px; max-width: 30em; text-align: center; font: italic 500 1.25rem/1.5 var(--f-titel); color: var(--gold-text); }
.text-karte .wk-gold-satz.stelle { margin-bottom: 20px; }
/* Farbfelder als Kreise, gleicher Durchmesser wie die Kreise auf dem Außenring im Wirkkreis */
.text-karte ul.wk-farben li { align-items: center; gap: 14px; }
.wk-farbe { width: var(--wk-kreis, 36px); height: var(--wk-kreis, 36px); margin-top: 0; border-radius: 50%; }
/* Farbkreise 25 % kleiner als die Ring-Kreise */
.wk-farbe { width: calc(var(--wk-kreis, 36px) * .75); height: calc(var(--wk-kreis, 36px) * .75); }

.schalter { position: fixed; top: 12px; right: 12px; z-index: 10; }

/* Einleitung näher an den Header: 50 px */
.kopf-teile { margin-bottom: -50px; }
main { position: relative; z-index: 1; }

/* Kopf der Lesung: Name groß, darunter Geburtsdaten */
.einstieg .lesung-daten { margin: 2px 0 28px; text-align: center; font: 400 .92rem/1.4 var(--f-text); letter-spacing: .06em; color: var(--gold-text); }

/* Kopf: 20 px weiter nach oben, linkes Header-Teil wieder oben (0) */
.kopf-teile { margin-bottom: -70px; }
.kopf-teile .kt-links { top: 0; }
@media (max-width: 640px) { .kopf-teile .kt-links { top: auto; } }

/* Zurück zum Chart (kleiner Link am Ende der Erklärungstexte) */
.text-karte .zurueck-chart { all: unset; box-sizing: border-box; display: block; margin: 22px auto 0; cursor: pointer; font: 600 .72rem/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); border-bottom: 1px solid var(--gold); padding-bottom: 3px; width: fit-content; }
.text-karte .zurueck-chart:hover, .text-karte .zurueck-chart:focus-visible { color: var(--petrol); border-color: var(--petrol); }

/* Schriftgrößen: erster Absatz der Einleitung und goldene Kernaussage wie der graue Text, nur durch die Farbe hervorgehoben */
.einstieg .lead { font-size: inherit; }
.text-karte .kern { font-size: 1em; }

/* I Ging am Handy: die vier Symbole dürfen nicht breiter werden als der Bildschirm */
.element-bilder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ig-symbol svg.ig-klein { width: min(74px, 80%); }

/* Handy-Header: Aquarellteile 40 % kleiner, Logo 20 % kleiner */
@media (max-width: 640px) {
  .kopf-teile { height: 300px; }
  .kopf-teile .kt-links, .kopf-teile .kt-rechts { height: 31%; }
  .kopf-teile .kt-logo { width: 172px; }
}
/* Handy: Beschriftungen des Wirkkreises als Liste unter dem Kreis; Schriftgröße der Leiste wie bei den anderen Leisten mit vier Feldern */
.wk-mobil-liste { display: none; }
@media (max-width: 640px) {
  .wk-mobil-liste { display: block; margin: 12px auto 0; max-width: 34em; text-align: center; font-size: .95rem; line-height: 1.5; }
  .wk-mobil-liste p { margin: 0 0 10px; }
  .wk-ml-gruppe b { display: block; font: 600 .74rem/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--gk, var(--petrol)); margin-bottom: 2px; }
  .wk-ml-gruppe span { color: var(--text); }
  .wk-ml-gruppe.g0 { --gk: var(--wk-g0); } .wk-ml-gruppe.g1 { --gk: var(--wk-g1); } .wk-ml-gruppe.g2 { --gk: var(--wk-g2); }
  .wk-ml-neben { color: var(--gold-text); }
}
.wirken .zellen.frei .z-gross { font-size: 1.12rem; }
/* Handy: Kapitelnamen im Bogen lesbar, Liste entfällt, weniger Abstand zwischen Text und Kreis; Punkte der Nebenthemen gleich groß */
.wk-mobil-liste { display: none !important; }
.wk-eng .wk-bogen-text { font-size: 17px; letter-spacing: 1px; }
.wk-neben-punkt { outline: none; }
.wk-neben-punkt .wk-treffer { fill: transparent; pointer-events: all; }
@media (max-width: 640px) { .wirken-kopf .wk-einleitung { margin-bottom: 8px; } .wirken-flaeche { margin-top: 0; } }
/* einheitliche Schriftgröße in allen Leisten unter den Charts (Mitte zwischen 17,9 und 22,4 px) */
.zellen .z-gross, .zellen.frei .z-gross, .zellen.frei.vier .z-gross, .zellen.elemente .z-gross, .wirken .zellen.frei .z-gross { font-size: 1.25rem; }

/* Variante B: Aquarell-Fläche zwischen I Ging und Teil II */
.aquarell-trenner { display: block; width: 100vw; margin: 30px 0 0 calc(50% - 50vw); height: clamp(150px, 24vw, 340px); overflow: hidden; }
.aquarell-trenner img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
main { overflow-x: clip; }
/* Aquarell ganz unten, bündig mit dem Seitenende, von Rand zu Rand */
.aquarell-trenner { margin: 20px 0 0; width: 100%; height: clamp(170px, 26vw, 360px); }
.aquarell-trenner img { -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
/* Fußzeile (Platzhalter für Impressum, AGB, Urheberrecht) näher an den Text, Aquarell direkt darunter */
.fuss { margin: 40px 0 0; padding-bottom: 0; }
main { padding-bottom: 0 !important; margin-bottom: 0; }
.aquarell-trenner { margin-top: 0; }
/* Eingabe: Hinweis unter dem Vornamen wie der Disclaimer */
.eingabe-hinweis { margin: 8px auto 0; }

.warnbox + .eingabe-hinweis { margin: 18px auto 6px; }

/* Zugangscode und Rückmeldung (Seite für Testpersonen) */
.zugang .pruef-karte { max-width: 560px; margin: 0 auto 40px; }
.rueckmeldung { max-width: 640px; margin: 70px auto 20px; padding: 0 20px; text-align: center; }
.rueckmeldung h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.6rem; color: #3F595D; margin: 0 0 8px; }
.rueckmeldung textarea { width: 100%; box-sizing: border-box; margin: 14px 0 18px; padding: 12px 14px; border: 1px solid #B39A6B; background: rgba(255,255,255,.5); font: inherit; color: inherit; border-radius: 0; resize: vertical; }
.fuss a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.zugang .pruef-karte { border-top: 0; padding-top: 6px; }