/* Elternhaus V2 — übernimmt Schrift und Farbwelt aus Ricos Claude-Design-Heft
   "Broschuere Elternhaus V2" (18.09.2026): Source Serif 4 für Text,
   IBM Plex Sans für Kleinzeilen, Papier #F2EFE9, Nacht #12191C / #1E2A2C, Gold #C99A55. */

body.v2 {
  --papier: #f6f2ea;
  --papier-2: #f2efe9;
  --weiss: #fbf9f5;
  --tinte: #17191a;
  --tinte-2: #2c3032;
  --tinte-3: #6b6760;
  --linie: #ddd5c7;
  --bronze: #a8722c;
  --bronze-hell: #c99a55;
  --nacht: #1e2a2c;
  --nacht-tief: #12191c;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--serif);
  font-size: 18px;
}
body.v2 .dachzeile, body.v2 .marke, body.v2 .kopf nav a, body.v2 .knopf, body.v2 .arbeitsstand,
body.v2 .lagewahl button, body.v2 .rechner .ergebnis .label, body.v2 .krumen, body.v2 .fuss-seite,
body.v2 .klein { font-family: var(--sans); }
body.v2 .dachzeile { letter-spacing: .22em; font-size: 11.5px; }

/* Titel wie Heftseite 1 */
.v2 .thema-buehne { background: var(--nacht-tief); min-height: 86vh; }
.v2 .thema-buehne img { opacity: 1; object-position: 50% 42%; }
.v2 .thema-buehne::after { background: linear-gradient(180deg, rgba(10,16,18,.72) 0%, rgba(10,16,18,.18) 34%, rgba(10,16,18,.62) 68%, rgba(10,16,18,.94) 100%); }
.v2 .thema-buehne .strich { width: 64px; height: 2px; background: var(--bronze-hell); margin-bottom: 26px; }
.v2 .thema-buehne h1 { color: #f6f2ea; font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1.02; }
.v2 .thema-buehne .einleitung { color: #ded6c7; max-width: 560px; }
.v2 .thema-buehne .fusszeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; border-top: 1px solid rgba(233,224,208,.28); padding-top: 18px; margin-top: 48px; font-family: var(--sans); color: #ded6c7; font-size: 13px; }
.v2 .thema-buehne .fusszeile b { letter-spacing: .2em; text-transform: uppercase; color: #f6f2ea; font-weight: 500; }

/* Teil-Trenner mit Foto */
.teil { position: relative; min-height: 62vh; display: flex; align-items: flex-end; background: var(--nacht-tief); color: #f6f2ea; overflow: hidden; }
.teil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,16,18,.05) 30%, rgba(10,16,18,.88) 100%); }
.teil .wrap { position: relative; z-index: 1; padding-bottom: 64px; width: 100%; }
.teil .nr { font-family: var(--sans); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-hell); margin-bottom: 14px; }
.teil h2 { color: #f6f2ea; font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 12px; }
.teil p { color: #ded6c7; font-size: 1.2rem; max-width: 620px; margin: 0; }

/* Randkasten "Was wir machen" */
.randkasten { border-left: 2px solid var(--bronze-hell); padding-left: 20px; }
.randkasten .klein { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; }
.randkasten p { font-size: 15.5px; color: #4a4e50; }

/* Dunkler Merksatz */
.merksatz { background: var(--nacht); color: #ede7da; padding: 34px 38px; margin-top: 44px; }
.merksatz .klein { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-hell); margin-bottom: 14px; }
.merksatz p { font-size: 1.3rem; line-height: 1.46; color: #f6f2ea; margin: 0; }
.zitat { font-size: 1.5rem; line-height: 1.35; border-top: 1px solid var(--linie); padding-top: 22px; margin-top: 36px; max-width: 760px; }
.zitat .klein { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 10px; }

.v2 .kennzahl .zahl { font-size: 2.6rem; color: var(--bronze); }

/* Kostenblock wie Heftseite 5 */
.kostenliste { margin-top: 30px; }
.kostenliste .z { display: grid; grid-template-columns: 1fr 90px; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 16px; }
.kostenliste .z span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.kostenliste .summe { font-weight: 600; font-size: 1.3rem; border-bottom: 2px solid var(--tinte); }
.v2 .rechner .ergebnis { background: var(--nacht); }

/* Wege: V2 Dafür/Dagegen/Fall */
.v2 .wege { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.v2 .weg li .art { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-3); }
.v2 .weg li.p .art { color: var(--ok); }
.v2 .weg li.m .art { color: var(--nein); }
.v2 .weg .fall b { font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; display: block; }

/* Zeitleiste sechs Monate */
.monate { background: var(--papier-2); padding: 30px 34px; margin-top: 48px; }
.monate h3 { font-size: 1.5rem; }
.monate p { color: var(--tinte-2); max-width: 760px; }
.monate ol { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--bronze-hell); }
.monate li { padding-top: 12px; font-size: 15px; position: relative; }
.monate li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--bronze); border-radius: 50%; }
.monate li b { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); font-weight: 500; }
.monate li:last-child::before { background: var(--tinte); }

/* Matrix */
.matrix { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: 15.5px; background: var(--weiss); }
.matrix th { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .06em; color: var(--tinte-3); text-align: center; padding: 12px 8px; border-bottom: 2px solid var(--tinte); vertical-align: bottom; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix td { padding: 13px 8px; border-bottom: 1px solid var(--linie); text-align: center; }
.matrix td.plus { color: var(--ok); font-weight: 700; }
.matrix td.tilde { color: var(--warn); font-weight: 700; }
.matrix td.minus { color: #b9b1a4; }
.legende { font-family: var(--sans); font-size: 13px; color: var(--tinte-3); margin-top: 12px; }

/* Fünf Fragen */
.fragen { counter-reset: f; margin-top: 30px; }
.frage { background: var(--weiss); border: 1px solid var(--linie); padding: 20px 24px; margin-bottom: 12px; }
.frage > b { display: block; font-size: 1.1rem; margin-bottom: 10px; }
.frage label { display: flex; gap: 10px; align-items: center; font-size: 16px; margin: 4px 0; cursor: pointer; }
.frage input[type=checkbox] { accent-color: var(--bronze); width: 18px; height: 18px; }
.frage input[type=text] { width: 100%; font: inherit; padding: 8px 0; border: 0; border-bottom: 1px solid #cfc5b3; background: transparent; }
.frage input[type=text]:focus { outline: none; border-bottom-color: var(--bronze); }

/* Schritte */
.schritte { list-style: none; padding: 0; margin: 30px 0 0; }
.schritte li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.schritte .n { font-size: 1.8rem; color: var(--bronze); line-height: 1; }
.schritte b { font-weight: 600; }

/* Beratungsstellen */
.stellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 30px; }
.stelle { border-top: 2px solid var(--tinte); padding-top: 16px; }
.stelle .n { font-family: var(--sans); font-size: 12px; color: var(--bronze); letter-spacing: .16em; }
.stelle h4 { font-size: 1.2rem; margin: 6px 0 8px; }
.stelle p { font-size: 15.5px; color: var(--tinte-2); }

.bildband { margin: 0; }
.bildband img { width: 100%; max-height: 520px; object-fit: cover; }
.bildband figcaption { font-family: var(--sans); font-size: 13px; color: var(--tinte-3); padding: 10px 28px 0; max-width: var(--breite); margin: 0 auto; }

/* Rückseite */
.rueck { position: relative; background: var(--nacht-tief); color: #f6f2ea; overflow: hidden; }
.rueck img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.rueck::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,16,18,.25), rgba(10,16,18,.92)); }
.rueck .wrap { position: relative; z-index: 1; padding-top: 140px; padding-bottom: 70px; }
.rueck .gross { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.35; max-width: 760px; }
.rueck .kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; border-top: 1px solid rgba(233,224,208,.28); margin-top: 40px; padding-top: 22px; font-family: var(--sans); font-size: 14.5px; color: #ded6c7; }
.rueck .kontakt b { color: #f6f2ea; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; font-size: 13px; }
.rueck .kontakt b .gold { color: #c99a55; }
/* Kontaktbereich: zwei feine Knöpfe (E-Mail, Termin) und das aufklappende Terminfenster */
.rueck .wahl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.rueck .fein { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #f6f2ea;
  border: 1px solid rgba(201,154,85,.55); border-radius: 2px; text-decoration: none; transition: color .4s cubic-bezier(.2,.7,.1,1), border-color .4s cubic-bezier(.2,.7,.1,1); }
.rueck .fein i { display: block; width: 22px; height: 1px; background: currentColor; position: relative; transition: width .4s cubic-bezier(.2,.7,.1,1); }
.rueck .fein i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.rueck .fein:hover, .rueck .fein[aria-expanded="true"] { color: #c99a55; border-color: #c99a55; } .rueck .fein:hover i { width: 34px; }
.rueck .termin-ein { margin-top: 36px; scroll-margin-top: 90px; }
.rueck .termin-ein[hidden] { display: none; }
.rueck .klein { font-size: 12px; color: #a79c8b; margin-top: 30px; }
.rueck a { color: var(--bronze-hell); }

@media (max-width: 760px) {
  .monate ol { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--bronze-hell); padding-left: 18px; }
  .monate li { padding: 6px 0 10px; }
  .monate li::before { top: 12px; left: -25px; }
  .matrix { font-size: 13px; }
  .matrix th { font-size: 10px; letter-spacing: 0; }
  .rueck .kontakt { grid-template-columns: 1fr; }
  .v2 .rechner .zeile { grid-template-columns: minmax(0,1fr) 110px; }
  .v2 .rechner .zeile label, .v2 .irrtuemer summary { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
  body.v2 { overflow-x: clip; }
}

/* ---------------------------------------------------------------------------
   25.09.2026 (Rico): Kopfleiste wie die Startseite statt des hellen Balkens,
   zweite Titelzeile und "Consult GmbH" in Gold, Lage-Auswahl über den Wegen,
   filigrane Download-Zeilen für Heft und Druckversion.
   --------------------------------------------------------------------------- */
.v2 .leiste { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 28px;
  padding: 24px clamp(20px, 4vw, 56px); font-family: var(--sans); border-bottom: 1px solid transparent;
  transition: background .4s, padding .4s, border-color .4s; }
.v2 .leiste.fest { background: rgba(18, 25, 28, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-top: 14px; padding-bottom: 14px; border-bottom-color: rgba(201, 154, 85, .22); }
.v2 .wortmarke { display: flex; gap: 10px; align-items: center; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: #f6f2ea; white-space: nowrap; }
.v2 .wortmarke:hover { color: #fff; }
.v2 .wortmarke .c { color: var(--bronze-hell); }
.v2 .wortmarke .m-icon { width: 24px; height: 24px; margin-right: 4px; border-radius: 3px; flex: none; box-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.v2 .leiste nav { display: flex; gap: clamp(16px, 1.7vw, 28px); font-size: 13px; letter-spacing: .06em; }
.v2 .leiste nav a { position: relative; color: #ded6c7; padding: 4px 0; white-space: nowrap; }
.v2 .leiste nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--bronze-hell); transition: right .4s cubic-bezier(.2, .7, .1, 1); }
.v2 .leiste nav a:hover { color: #fff; }
.v2 .leiste nav a:hover::after { right: 0; }
.v2 .leiste nav a.zurueck { color: var(--bronze-hell); }
.v2 .leiste nav a.zurueck::before { content: "← "; }
@media (max-width: 1260px) { .v2 .leiste nav a:not(.zurueck) { display: none; } }
@media (max-width: 560px) { .v2 .leiste { padding: 16px 18px; } .v2 .wortmarke { font-size: 11.5px; letter-spacing: .22em; } }
.v2 main > section[id], .v2 #lage-wege { scroll-margin-top: 64px; }

.v2 .thema-buehne h1 em { font-style: italic; font-weight: 400; color: var(--bronze-hell); }
.v2 .thema-buehne .fusszeile b .gold { color: var(--bronze-hell); }

/* Lage-Auswahl direkt über den fünf Wegen; am Rechner bleibt sie beim Lesen der Wege stehen */
.lage-wege { margin-top: 36px; }
.lage-leiste { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.lage-leiste .klein { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); white-space: nowrap; }
.lage-wege .lagewahl { margin-top: 0; gap: 8px; }
.lage-wege .lagewahl button { font-size: 14px; padding: 8px 15px; }
.lage-wege .wege { margin-top: 22px; }
@media (min-width: 900px) { .lage-leiste { position: sticky; top: 52px; z-index: 5; background: var(--papier); } }
.hinweis-lage { font-family: var(--sans); font-size: 14px; color: var(--tinte-3); margin-top: 30px; }

/* Heft zum Mitnehmen: zwei schlanke Zeilen statt eines vollen Knopfs */
.mitnehmen { display: grid; grid-template-columns: 150px 1fr; gap: 48px; align-items: center; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 40px 0; }
.mitnehmen .heft { aspect-ratio: 148/210; background: var(--nacht) center/cover; border-radius: 2px; box-shadow: 6px 10px 24px rgba(0, 0, 0, .22); position: relative; }
.mitnehmen .heft span { position: absolute; left: 10px; right: 10px; bottom: 12px; color: #fff; font-size: .82rem; line-height: 1.2; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.mitnehmen h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 6px; }
.mitnehmen .zeile { color: var(--tinte-3); font-size: 16px; margin: 0; }
.dateien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 26px; max-width: 760px; }
.datei { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "art pfeil" "was pfeil" "info pfeil";
  padding: 14px 0 16px; border-top: 1px solid var(--linie); color: var(--tinte); }
.datei::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--bronze-hell); transition: width .6s cubic-bezier(.2, .7, .1, 1); }
.datei:hover::before { width: 100%; }
.datei:hover { color: var(--tinte); }
.datei .art { grid-area: art; font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }
.datei .was { grid-area: was; font-size: 1.15rem; margin-top: 4px; }
.datei .info { grid-area: info; font-family: var(--sans); font-size: 12.5px; color: var(--tinte-3); margin-top: 2px; }
.datei i { grid-area: pfeil; align-self: center; position: relative; width: 12px; height: 22px; margin-left: 18px; transition: transform .4s cubic-bezier(.2, .7, .1, 1); }
.datei i::before { content: ""; position: absolute; left: 5.5px; top: 0; width: 1px; height: 20px; background: var(--bronze-hell); }
.datei i::after { content: ""; position: absolute; left: 1.5px; bottom: 2px; width: 8px; height: 8px; border-right: 1px solid var(--bronze-hell); border-bottom: 1px solid var(--bronze-hell); transform: rotate(45deg); }
.datei:hover i { transform: translateY(4px); }
@media (max-width: 760px) {
  .mitnehmen { grid-template-columns: 1fr; gap: 24px; }
  .mitnehmen .heft { width: 120px; }
  .dateien { grid-template-columns: 1fr; }
}
/* Wege unter der Lage-Leiste kompakter, damit Auswahl, Urteil und alle fünf Karten am Rechner in ein Bild passen */
.lage-wege .weg { padding: 18px 18px 16px; }
.lage-wege .weg h4 { font-size: 1.08rem; margin: 6px 0 4px; }
.lage-wege .weg .kern { font-size: 14.5px; line-height: 1.45; margin-bottom: 8px; }
.lage-wege .weg li { font-size: 14.5px; line-height: 1.42; margin-bottom: 5px; }
.lage-wege .weg .fall { font-size: 13px; line-height: 1.4; }
.lage-wege .weg .urteil { order: -1; margin: 0 0 8px; }
@media (min-width: 900px) { .lage-leiste { top: 56px; } }