/* =====================================================================
   Thomas Fröhlich · Edelmetalle & Geldanlage, Pforzheim
   styles.css — Farbwelt: Gold, Weiß, Silber, Schwarz
   Schriften self-hosted (DSGVO): Bodoni Moda, IBM Plex Sans, IBM Plex Mono
   ===================================================================== */

/* ---------- 1. Schriften ---------- */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Schwarz */
  --nacht: #0b0b0d;
  --nacht-2: #131317;
  --graphit: #1e1e23;
  /* Weiß */
  --weiss: #ffffff;
  --papier: #f5f4f1;
  /* Silber */
  --silber: #c9ccd1;
  --silber-tief: #8b9098;
  --silber-linie: #e3e4e7;
  --silber-linie-dunkel: #2c2c33;
  /* Gold */
  --gold: #c6a245;
  --gold-btn: #917a1f;
  --gold-btn-hell: #a68e26;
  --gold-hell: #ebd79a;
  --gold-tief: #8c6e22;
  /* Signal (nur Kurstafel/Laufband) */
  --auf: #2e9e6b;
  --ab: #c0433f;

  --gold-kante: linear-gradient(90deg, rgba(140,110,34,0) 0%, var(--gold-tief) 18%, var(--gold-hell) 50%, var(--gold-tief) 82%, rgba(140,110,34,0) 100%);
  --silber-flaeche: linear-gradient(160deg, #ffffff 0%, #d9dce0 38%, #a7acb4 62%, #eef0f2 100%);
  --gold-flaeche: linear-gradient(160deg, #f4e3ae 0%, #c6a245 42%, #8c6e22 68%, #e5cf90 100%);

  --schrift-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
  --schrift-text: "Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --schrift-daten: "Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --breite: 1200px;
  --luft: clamp(3.5rem, 7vw, 7rem);
  --radius: 3px;
  --tempo: 240ms;
}

/* ---------- 3. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden; /* Fallback: haelt das geschlossene Mobilmenue ausserhalb des Sichtfelds */
  background: var(--weiss);
  color: var(--nacht);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, 0.97rem + 0.14vw, 1.075rem);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@supports (overflow: clip) { body { overflow-x: clip; } }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.55rem + 3.6vw, 4.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--nacht); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.container { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
@media (max-width: 640px) { .container { width: min(100% - 1.75rem, var(--breite)); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--nacht); color: var(--weiss); padding: 0.7rem 1.1rem;
  font-family: var(--schrift-daten); font-size: 0.8rem; text-decoration: none;
  transition: top var(--tempo) ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- 4. Typo-Bausteine ---------- */
.augenbraue {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--schrift-daten); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-tief); margin: 0 0 1.1rem;
}
.augenbraue::before {
  content: ""; width: 1.9rem; height: 1px; background: var(--gold); opacity: 0.85;
}
.augenbraue--hell { color: var(--gold-hell); }

.lead {
  font-size: clamp(1.08rem, 1rem + 0.42vw, 1.3rem);
  line-height: 1.6;
  color: #3a3a40;
  max-width: 56ch;
}
.auf-nacht .lead,
.buehne .lead,
.abschnitt--nacht .lead { color: #c9ccd1; }
.seitenkopf .lead { color: var(--gold-hell); }

.kopf { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.kopf--zentriert { margin-inline: auto; text-align: center; }
/* Schlussabschnitt mit drei Schaltflächen: Der Block darf breiter sein als die
   Textspalte, sonst bricht die dritte Schaltfläche in eine eigene Zeile um.
   Überschrift und Lauftext behalten ihre eigene, lesbare Breite. */
.kopf--cta { max-width: 100%; }
.kopf--cta h2 { max-width: 20ch; margin-inline: auto; }
.kopf--cta .lead { max-width: 62ch; }
@media (max-width: 760px) {
  .kopf--cta .btn-reihe { flex-direction: column; align-items: stretch; }
}
.kopf--zentriert .augenbraue { justify-content: center; }
.kopf--zentriert .lead { margin-inline: auto; }

.hairline { height: 1px; border: 0; background: var(--gold-kante); opacity: 0.6; margin: 0; }

/* ---------- 5. Buttons ---------- */
/* Einheitliche Buttonfarbe #917a1f mit weißer Schrift – auf hellem wie auf
   dunklem Grund derselbe Auftritt. */
.btn {
  --btn-bg: var(--gold-btn);
  --btn-fg: var(--weiss);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--schrift-text); font-size: 0.97rem; font-weight: 600;
  letter-spacing: 0.015em; text-decoration: none; border: 1px solid transparent;
  border-radius: var(--radius); cursor: pointer;
  flex: 0 0 auto; white-space: nowrap;
  transition: transform var(--tempo) ease, background var(--tempo) ease, color var(--tempo) ease, border-color var(--tempo) ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover, .btn:focus-visible { --btn-bg: var(--gold-btn-hell); }
/* Alle Varianten teilen dieselbe Farbe; die Klassen bleiben nur erhalten,
   damit an den Seiten nichts geändert werden muss. */
.btn--gold, .btn--linie, .btn--linie-hell, .btn--dark { --btn-bg: var(--gold-btn); --btn-fg: var(--weiss); }
.btn--gold:hover, .btn--linie:hover, .btn--linie-hell:hover, .btn--dark:hover { --btn-bg: var(--gold-btn-hell); --btn-fg: var(--weiss); }
.btn--klein { padding: 0.6rem 1.15rem; font-size: 0.86rem; }
.btn-reihe { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ---------- 6. Laufband (Börsenpreise) ---------- */
.laufband {
  position: relative;
  background: var(--nacht);
  color: var(--weiss);
  border-bottom: 1px solid rgba(198,162,69,0.35);
  overflow: hidden;
}
.laufband__innen { display: flex; align-items: stretch; max-width: 100%; }
.laufband__marke {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.15rem 0.55rem max(1.25rem, calc((100vw - var(--breite)) / 2));
  background: var(--nacht);
  font-family: var(--schrift-daten); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  border-right: 1px solid rgba(198,162,69,0.3);
  z-index: 2;
}
.laufband__punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(198,162,69,0.65);
  animation: puls 2.6s ease-out infinite;
}
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(198,162,69,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(198,162,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(198,162,69,0); }
}
.laufband__fenster { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.laufband__spur {
  display: flex; align-items: center; gap: 0;
  white-space: nowrap; will-change: transform;
  animation: laufband-lauf 46s linear infinite;
}
.laufband:hover .laufband__spur, .laufband:focus-within .laufband__spur { animation-play-state: paused; }
@keyframes laufband-lauf {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.kurs {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  padding: 0.55rem 1.35rem;
  font-family: var(--schrift-daten); font-size: 0.82rem;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.kurs__name { color: var(--silber); letter-spacing: 0.04em; }
.kurs__wert { color: var(--weiss); font-weight: 500; font-variant-numeric: tabular-nums; }
.kurs__einheit { color: var(--gold); font-size: 0.74rem; }
.kurs__delta { font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.kurs__delta--auf { color: var(--auf); }
.kurs__delta--ab { color: var(--ab); }
.kurs__delta::before { font-size: 0.66rem; margin-right: 0.15rem; }
.kurs__delta--auf::before { content: "\25B2"; }
.kurs__delta--ab::before { content: "\25BC"; }
.laufband__stand {
  display: none; align-items: center; padding: 0.55rem max(1.25rem, calc((100vw - var(--breite)) / 2)) 0.55rem 1.15rem;
  background: var(--nacht); position: relative; z-index: 2;
  font-family: var(--schrift-daten); font-size: 0.7rem; color: var(--silber-tief);
  border-left: 1px solid rgba(255,255,255,0.08); white-space: nowrap;
}
@media (min-width: 1100px) { .laufband__stand { display: flex; } }
@media (max-width: 700px) {
  .laufband__marke { font-size: 0.66rem; letter-spacing: 0.1em; padding-left: 1rem; padding-right: 0.8rem; }
  .kurs { font-size: 0.76rem; padding: 0.55rem 1rem; }
}

/* ---------- 7. Kopfzeile ---------- */
.kopfzeile {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--silber-linie);
}
.kopfzeile__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: 0.8rem 0;
}
.marke { flex: 0 0 auto; }
.marke { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.marke__zeichen { width: auto; height: 50px; flex: none; }
.marke__text { display: flex; flex-direction: column; line-height: 1.15; }
.marke__name {
  font-family: var(--schrift-display); font-size: 1.22rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--nacht);
}
.marke__zusatz {
  font-family: var(--schrift-daten); font-size: 0.62rem; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--silber-tief);
}
.navigation { display: flex; align-items: center; gap: 1.5rem; flex-wrap: nowrap; }
.navigation a:not(.btn) {
  font-size: 0.94rem; white-space: nowrap; text-decoration: none; color: #2a2a30;
  padding: 0.25rem 0; position: relative;
  transition: color var(--tempo) ease;
}
.navigation a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--gold); transition: width var(--tempo) ease;
}
.navigation a:not(.btn):hover::after,
.navigation a[aria-current="page"]::after { width: 100%; }
.navigation a:not(.btn)[aria-current="page"] { color: var(--nacht); font-weight: 500; }
.nav-schalter {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--silber-linie); border-radius: var(--radius);
  cursor: pointer;
}
.nav-schalter span, .nav-schalter span::before, .nav-schalter span::after {
  display: block; width: 20px; height: 1.5px; background: var(--nacht); content: ""; position: relative;
  transition: transform var(--tempo) ease, opacity var(--tempo) ease;
}
.nav-schalter span::before { position: absolute; top: -6px; }
.nav-schalter span::after { position: absolute; top: 6px; }
.nav-schalter[aria-expanded="true"] { border-color: rgba(255,255,255,0.3); background: transparent; }
.nav-schalter[aria-expanded="true"] span { background: transparent; }
.nav-schalter[aria-expanded="true"] span::before,
.nav-schalter[aria-expanded="true"] span::after { background: var(--weiss); }
.nav-schalter[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  /* backdrop-filter würde einen eigenen Bezugsrahmen für fixierte Elemente
     erzeugen – das Menü wäre dann nur so hoch wie die Kopfzeile. */
  .kopfzeile { backdrop-filter: none; background: var(--weiss); }
  .nav-schalter { display: flex; }
  /* Geschlossen wird das Menue ausgeblendet statt nur verschoben – ein nach
     rechts geschobenes fixiertes Panel erzeugt sonst horizontales Scrollen. */
  .navigation {
    display: none;
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0.35rem; padding: 6rem 1.75rem 2rem;
    background: var(--nacht); color: var(--weiss);
    overflow-y: auto; z-index: 99;
  }
  .navigation[data-offen="true"] {
    display: flex;
    animation: menue-auf 300ms cubic-bezier(0.4,0,0.2,1);
  }
  @keyframes menue-auf {
    from { transform: translateX(100%); }
    to { transform: none; }
  }
  .navigation a:not(.btn) { color: var(--silber); font-size: 1.05rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .navigation a:not(.btn)[aria-current="page"] { color: var(--gold-hell); }
  .navigation .btn { margin-top: 1.25rem; justify-content: center; border-bottom: 0; }
  .nav-schalter { position: relative; z-index: 101; }
}

/* ---------- 8. Abschnitte ---------- */
.abschnitt { padding: var(--luft) 0; }
.abschnitt--papier { background: var(--papier); }
.abschnitt--nacht { background: var(--nacht); color: var(--silber); }
.abschnitt--nacht h2, .abschnitt--nacht h3 { color: var(--weiss); }
.abschnitt--schmal { padding-block: clamp(2.5rem, 5vw, 4rem); }
.auf-nacht { color: var(--silber); }

/* ---------- 9. Bühne (Hero) ---------- */
.buehne {
  position: relative; background: var(--nacht); color: var(--silber);
  padding: clamp(3.2rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.buehne::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../img/guilloche.svg");
  background-repeat: no-repeat; background-position: 72% 42%;
  background-size: clamp(700px, 78vw, 1150px);
  opacity: 0.5; pointer-events: none;
}
.buehne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold-kante);
}
.buehne__raster {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 980px) { .buehne__raster { grid-template-columns: 1fr; } }
.buehne h1 { color: var(--weiss); }
.buehne h1 em {
  font-style: normal; color: var(--gold);
  background: var(--gold-flaeche); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.buehne__beleg {
  display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.4rem;
  padding-top: 1.6rem; border-top: 1px solid var(--silber-linie-dunkel);
}
.beleg { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--silber); }
.beleg svg { flex: none; margin-top: 0.15rem; }

/* ---------- 10. Gramm-Tafel (Signature) ---------- */
.tafel {
  position: relative;
  background: linear-gradient(165deg, #17171c 0%, #0d0d10 62%, #131318 100%);
  border: 1px solid rgba(198,162,69,0.3);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: 0 30px 70px -35px rgba(0,0,0,0.9), inset 0 1px 0 rgba(235,215,154,0.14);
}
.tafel::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,204,209,0.1);
  border-radius: 2px; pointer-events: none;
}
.tafel__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--silber-linie-dunkel);
}
.tafel__titel {
  font-family: var(--schrift-daten); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--silber);
}
.tafel__stand { font-family: var(--schrift-daten); font-size: 0.68rem; color: var(--silber-tief); }
.tafel__kurse { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--silber-linie-dunkel); margin: 1px 0 0; }
.tafel__kurs { background: #101014; padding: 1.15rem 0.4rem 1.15rem 0; }
.tafel__kurs:last-child { padding-left: 1.15rem; }
.tafel__metall {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--schrift-daten); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--silber-tief); margin-bottom: 0.35rem;
}
.metallpunkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.metallpunkt--gold { background: var(--gold-flaeche); }
.metallpunkt--silber { background: var(--silber-flaeche); }
.tafel__preis {
  font-family: var(--schrift-daten); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  font-weight: 500; color: var(--weiss); font-variant-numeric: tabular-nums;
  line-height: 1.1; display: flex; align-items: baseline; gap: 0.35rem;
}
.tafel__preis small { font-size: 0.55em; color: var(--gold); font-weight: 400; }
.tafel__delta { font-family: var(--schrift-daten); font-size: 0.78rem; margin-top: 0.3rem; }

.waage { padding: 1.35rem 0 0.35rem; border-top: 1px solid var(--silber-linie-dunkel); margin-top: 1px; }
.waage__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.waage__label { font-family: var(--schrift-daten); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silber-tief); }
.waage__wert { font-family: var(--schrift-daten); font-size: 1.05rem; color: var(--weiss); font-variant-numeric: tabular-nums; }
.waage__balken { position: relative; height: 6px; background: #101014; border: 1px solid var(--silber-linie-dunkel); border-radius: 99px; overflow: hidden; }
.waage__fuellung { position: absolute; inset: 0 auto 0 0; background: var(--gold-flaeche); width: 50%; transition: width 600ms cubic-bezier(0.4,0,0.2,1); }
.waage__skala { display: flex; justify-content: space-between; font-family: var(--schrift-daten); font-size: 0.64rem; color: var(--silber-tief); margin-top: 0.45rem; }

.rechner { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--silber-linie-dunkel); }
.rechner__frage {
  font-family: var(--schrift-daten); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--silber-tief); display: block; margin-bottom: 0.9rem;
}
.rechner__regler { width: 100%; margin: 0 0 0.9rem; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.rechner__regler::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--gold) var(--fuell, 20%), #2c2c33 var(--fuell, 20%)); border-radius: 99px; }
.rechner__regler::-moz-range-track { height: 3px; background: #2c2c33; border-radius: 99px; }
.rechner__regler::-moz-range-progress { height: 3px; background: var(--gold); border-radius: 99px; }
.rechner__regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8.5px;
  border-radius: 50%; background: var(--gold-flaeche); border: 1px solid var(--gold-tief);
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.rechner__regler::-moz-range-thumb {
  width: 19px; height: 19px; border-radius: 50%; background: var(--gold);
  border: 1px solid var(--gold-tief); box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.rechner__ergebnis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.rechner__karte { background: #101014; border: 1px solid var(--silber-linie-dunkel); border-radius: 2px; padding: 0.85rem 0.95rem; }
.rechner__zahl {
  font-family: var(--schrift-daten); font-size: 1.3rem; font-weight: 500; color: var(--weiss);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.rechner__zahl span { font-size: 0.62em; color: var(--gold); }
.rechner__hinweis { font-size: 0.72rem; color: var(--silber-tief); margin-top: 1rem; line-height: 1.5; }
.rechner__rate { color: var(--gold-hell); font-weight: 500; font-family: var(--schrift-daten); }

/* ---------- 11. Kernaussagen ---------- */
.vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--silber-linie); border: 1px solid var(--silber-linie); }
@media (max-width: 900px) { .vorteile { grid-template-columns: repeat(2, 1fr); } }
.vorteile--paar { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .vorteile { grid-template-columns: 1fr; } }
.vorteil {
  background: var(--weiss); padding: clamp(1.6rem, 2.6vw, 2.2rem);
  transition: background var(--tempo) ease;
}
.vorteil:hover { background: var(--papier); }
.vorteil__nr { font-family: var(--schrift-daten); font-size: 0.66rem; color: var(--gold-tief); letter-spacing: 0.2em; text-transform: uppercase; }
.vorteil h3 { margin: 0.7rem 0 0.5rem; }
.vorteil p { font-size: 0.94rem; color: #4a4a52; }
.abschnitt--papier .vorteile { border-color: #e0dfdb; background: #e0dfdb; }
.abschnitt--papier .vorteil { background: var(--weiss); }

/* ---------- 12. Leistungen / Karten ---------- */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.karte {
  position: relative; display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--silber-linie);
  border-radius: var(--radius); padding: clamp(1.6rem, 2.4vw, 2.1rem);
  text-decoration: none; color: inherit;
  transition: transform var(--tempo) ease, border-color var(--tempo) ease, box-shadow var(--tempo) ease;
}
.karte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--gold-kante); opacity: 0; transition: opacity var(--tempo) ease;
}
.karte:hover { transform: translateY(-4px); border-color: #d2d4d8; box-shadow: 0 22px 45px -30px rgba(11,11,13,0.5); }
.karte:hover::before { opacity: 1; }
.karte__marke { width: 46px; height: 46px; margin-bottom: 1.15rem; }
.karte h3 { margin-bottom: 0.55rem; }
.karte p { font-size: 0.94rem; color: #4a4a52; }
.karte__liste { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.karte__liste li { position: relative; padding-left: 1.35rem; font-size: 0.9rem; color: #4a4a52; }
.karte__liste li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px;
  background: var(--gold-flaeche); border-radius: 50%;
}
.karte__mehr {
  margin-top: auto; padding-top: 1.35rem;
  font-family: var(--schrift-daten); font-size: 0.76rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-tief);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.karte:hover .karte__mehr { gap: 0.85rem; }
.karte__mehr span { transition: transform var(--tempo) ease; }

/* ---------- 13. Ablauf (echte Reihenfolge) ---------- */
.ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: schritt; }
@media (max-width: 860px) { .ablauf { grid-template-columns: 1fr; } }
.schritt {
  position: relative; padding: 2rem clamp(1.2rem, 2.5vw, 2rem) 2rem 0;
  border-top: 1px solid var(--silber-linie-dunkel);
}
.schritt + .schritt { padding-left: clamp(1.2rem, 2.5vw, 2rem); }
@media (min-width: 861px) {
  .schritt + .schritt { border-left: 1px solid var(--silber-linie-dunkel); }
}
.schritt__nr {
  font-family: var(--schrift-display); font-size: 2.6rem; line-height: 1;
  background: var(--gold-flaeche); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; display: block; margin-bottom: 0.9rem;
}
.schritt h3 { margin-bottom: 0.5rem; }
.schritt p { font-size: 0.95rem; color: var(--silber); }

/* ---------- 14. Bild / Person ---------- */
.person { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 880px) { .person { grid-template-columns: 1fr; } }
.person__rahmen {
  position: relative; border: 1px solid var(--silber-linie); border-radius: var(--radius);
  padding: 0.75rem; background: var(--weiss);
}
.person__rahmen::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; height: 3px;
  background: var(--gold-kante);
}
.person__rahmen { max-width: 460px; }
.person__bild {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;
  background: var(--papier); border-radius: 2px; display: block;
}
.person__platzhalter {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 2px;
  background: var(--silber-flaeche);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--schrift-daten); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6a6f77; padding: 1.5rem;
}
.zitat {
  font-family: var(--schrift-display); font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 1.5rem; color: var(--nacht);
}
.zitat::before { content: "\201E"; color: var(--gold); }
.zitat::after { content: "\201C"; color: var(--gold); }

/* ---------- 15. Kontakt ---------- */
.kontakt-raster { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } }
.kontaktliste { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.35rem; }
.kontaktliste li { display: flex; gap: 1rem; align-items: flex-start; }
.kontaktliste svg { flex: none; margin-top: 0.2rem; }
.kontaktliste a { text-decoration: none; }
.kontaktliste a:hover { color: var(--gold-hell); }
.kontakt-label {
  display: block; font-family: var(--schrift-daten); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--silber-tief); margin-bottom: 0.15rem;
}
.kontakt-wert { color: var(--weiss); font-size: 1.02rem; }

.formular { display: grid; gap: 1.1rem; }
.feld { display: grid; gap: 0.4rem; }
.feld--paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .feld--paar { grid-template-columns: 1fr; } }
.feld label { font-family: var(--schrift-daten); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silber-tief); }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 0.85rem 1rem; background: #101014; color: var(--weiss);
  border: 1px solid var(--silber-linie-dunkel); border-radius: 2px;
  font-family: var(--schrift-text); font-size: 0.98rem;
  transition: border-color var(--tempo) ease;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--gold); outline: none; }
.feld textarea { min-height: 130px; resize: vertical; }
.zustimmung { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.84rem; color: var(--silber); }
.zustimmung input { width: 18px; height: 18px; margin-top: 0.2rem; flex: none; accent-color: var(--gold); }
.zustimmung a { color: var(--gold-hell); }
.formular__hinweis { font-size: 0.78rem; color: var(--silber-tief); }
.formular__meldung {
  display: none; padding: 0.9rem 1.1rem; border: 1px solid var(--gold);
  background: rgba(198,162,69,0.08); font-size: 0.9rem; color: var(--gold-hell); border-radius: 2px;
}
.formular__meldung[data-sichtbar="true"] { display: block; }

/* ---------- 16. FAQ ---------- */
.faq { border-top: 1px solid var(--silber-linie); }
.faq__punkt { border-bottom: 1px solid var(--silber-linie); }
.faq__punkt summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--schrift-text); font-size: 1.05rem; font-weight: 500;
}
.faq__punkt summary::-webkit-details-marker { display: none; }
.faq__punkt summary::after {
  content: "+"; font-family: var(--schrift-daten); font-size: 1.3rem; color: var(--gold);
  flex: none; transition: transform var(--tempo) ease;
}
.faq__punkt[open] summary::after { transform: rotate(45deg); }
.faq__punkt p { padding-bottom: 1.5rem; max-width: 75ch; color: #4a4a52; font-size: 0.97rem; }

/* ---------- 17. Inhaltstext (Unterseiten) ---------- */
.text { max-width: 74ch; }
.text--mitte { margin-inline: auto; }
.text--mitte > h2 { text-align: center; margin-top: 3rem; }
.text--mitte > h2:first-child { margin-top: 0; }
.text--mitte > p, .text--mitte ul, .text--mitte ol { text-align: left; }
.text h2 { margin-top: 2.6rem; }
.text h2.ohne-abstand { margin-top: 0; }
.text h3 { margin-top: 2rem; }
.text ul, .text ol { padding-left: 1.2rem; margin: 0 0 1.15em; }
.text li { margin-bottom: 0.5rem; }
.text ul { list-style: none; padding-left: 0; }
.text ul li { position: relative; padding-left: 1.45rem; }
.text ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--gold-flaeche); border-radius: 50%; }
.text a { color: var(--nacht); }
.text a:hover { color: var(--gold-tief); }

.merkkasten {
  border-left: 3px solid var(--gold); background: var(--papier);
  padding: 1.35rem 1.6rem; margin: 2rem 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.merkkasten p { font-size: 0.95rem; }
.merkkasten strong { font-family: var(--schrift-daten); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-tief); display: block; margin-bottom: 0.4rem; }

.seitenkopf { background: var(--nacht); color: var(--silber); padding: clamp(2.8rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); position: relative; }
.seitenkopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-kante); }
.seitenkopf h1 { color: var(--weiss); max-width: 20ch; }
.seitenkopf__raster { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 2.5rem; align-items: center; }
.seitenkopf__bild { width: 100%; max-width: 360px; margin-left: auto; }
@media (max-width: 820px) {
  .seitenkopf__raster { grid-template-columns: 1fr; gap: 1.5rem; }
  .seitenkopf__bild { max-width: 230px; margin-left: 0; }
}

/* Barren als ruhiges Wasserzeichen in dunklen Abschnitten */
.abschnitt--barren { position: relative; overflow: hidden; }
.abschnitt--barren::before {
  content: ""; position: absolute; right: -60px; bottom: -50px;
  width: min(400px, 38vw); aspect-ratio: 760 / 751;
  background: url("../img/barren-gold.webp") no-repeat center / contain;
  opacity: 0.11; pointer-events: none;
}
@media (max-width: 860px) { .abschnitt--barren::before { display: none; } }

/* Barren neben Fließtext */
.barren-band { display: flow-root; }
.barren-band img { float: right; width: 260px; margin: 0.4rem 0 1.2rem 2.2rem; }
.barren-band > div > h2:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .barren-band img { float: none; width: 210px; margin: 0 auto 1.4rem; }
}
.brotkrumen { font-family: var(--schrift-daten); font-size: 0.72rem; color: var(--silber-tief); margin-bottom: 1.5rem; letter-spacing: 0.06em; }
.brotkrumen a { color: var(--silber); text-decoration: none; }
.brotkrumen a:hover { color: var(--gold-hell); }
.brotkrumen span { color: var(--gold-tief); margin: 0 0.5rem; }

/* ---------- 18. Kurstabelle (kurse.html) ---------- */
.kurstabelle { width: 100%; border-collapse: collapse; font-family: var(--schrift-daten); font-size: 0.94rem; }
.kurstabelle th, .kurstabelle td { padding: 1rem 0.8rem; text-align: right; border-bottom: 1px solid var(--silber-linie); font-variant-numeric: tabular-nums; }
.kurstabelle th { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silber-tief); font-weight: 500; }
.kurstabelle th:first-child, .kurstabelle td:first-child { text-align: left; }
.kurstabelle td:first-child { font-family: var(--schrift-text); font-weight: 500; }
.kurstabelle tbody tr:hover { background: var(--papier); }

/* ---------- 19. Fußzeile ---------- */
.fusszeile { background: var(--nacht); color: var(--silber-tief); padding-top: clamp(3rem, 5vw, 4.5rem); }
.fusszeile__raster {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3rem; border-bottom: 1px solid var(--silber-linie-dunkel);
}
@media (max-width: 900px) { .fusszeile__raster { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .fusszeile__raster { grid-template-columns: 1fr; } }
.fusszeile h3 {
  font-family: var(--schrift-daten); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; font-weight: 500;
}
.fusszeile__spalte { display: flex; flex-direction: column; gap: 0.65rem; align-items: flex-start; }
.fusszeile__spalte a { color: var(--silber-tief); text-decoration: none; font-size: 0.92rem; transition: color var(--tempo) ease; }
.fusszeile__spalte a:hover { color: var(--gold-hell); }
.fusszeile__marke p { font-size: 0.9rem; margin-top: 1.1rem; max-width: 34ch; }
.fusszeile__risiko { padding: 1.75rem 0; border-bottom: 1px solid var(--silber-linie-dunkel); font-size: 0.8rem; line-height: 1.6; max-width: 100ch; }
.fusszeile__risiko strong { color: var(--gold); font-family: var(--schrift-daten); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 0.4rem; }
.fusszeile__unten {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding: 1.5rem 0; font-size: 0.8rem; font-family: var(--schrift-daten);
  color: var(--gold);
}
.fusszeile__unten a { color: var(--silber-tief); text-decoration: none; }
.fusszeile__unten a:hover { color: var(--gold-hell); }

/* ---------- 20. Bewegung / Einblenden ---------- */
.js [data-zeig] { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.7,0.3,1); }
.js [data-zeig="sichtbar"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-zeig] { opacity: 1; transform: none; }
  .laufband__spur { animation: none; }
  .laufband__fenster { overflow-x: auto; }
}

/* ---------- 21. Druck ---------- */
@media print {
  .laufband, .kopfzeile, .nav-schalter, .btn-reihe { display: none !important; }
  body { color: #000; background: #fff; }
  .buehne, .abschnitt--nacht, .fusszeile, .seitenkopf { background: #fff !important; color: #000 !important; }
  .buehne h1, .abschnitt--nacht h2, .abschnitt--nacht h3, .seitenkopf h1 { color: #000 !important; }
}

/* ---------- 22. Hilfsklassen (statt Inline-Styles, damit CSP streng bleiben kann) ---------- */
.kopf--rand0 { margin-bottom: 0; }
.btn-reihe--zentriert { justify-content: center; }
.marke__name--hell { color: var(--weiss); }
.tabellenkopf { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; }
.tabellenkopf h2 { margin: 0; }
.standnotiz { font-family: var(--schrift-daten); font-size: 0.78rem; color: var(--silber-tief); }
.tabelle-scroll { overflow-x: auto; }
.text--abstand { margin-top: clamp(2.2rem, 4vw, 3rem); }
.karte__notiz { margin-top: 1rem; font-size: 0.9rem; color: #6a6f77; }

/* ---------- 23. Feinschliff für schmale Displays ---------- */
@media (max-width: 480px) {
  .waage__zeile { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .tafel__kurse { grid-template-columns: 1fr; }
  .tafel__kurs:last-child { padding-left: 0; padding-top: 1.15rem; }
  .rechner__ergebnis { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ---------- 24. Barren-Band auf der Startseite ---------- */
.band { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--nacht); position: relative; }
.band::before, .band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--gold-kante); opacity: 0.55;
}
.band::before { top: 0; }
.band::after { bottom: 0; }
.band__innen { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .band__innen { grid-template-columns: 1fr; } }
.band__text h2 { color: var(--weiss); font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
.band__text p { color: #c9ccd1; font-size: 0.98rem; margin: 0; }
.band__bild { width: 100%; }

/* ---------- 25. Fotos ---------- */
.foto { border-radius: var(--radius); box-shadow: 0 20px 45px -28px rgba(11,11,13,0.75); }
.band__bild { border-radius: var(--radius); }

/* ---------- 26. Bewertungssiegel unten rechts ---------- */
.siegel {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  display: none; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.95rem;
  background: rgba(11,11,13,0.94); color: var(--weiss);
  border: 1px solid rgba(198,162,69,0.55); border-radius: var(--radius);
  text-decoration: none; box-shadow: 0 16px 36px -20px rgba(0,0,0,0.85);
  transition: transform var(--tempo) ease, border-color var(--tempo) ease;
}
.siegel:hover { transform: translateY(-2px); border-color: var(--gold); }
.siegel__sterne { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.08em; line-height: 1; }
.siegel__text { display: flex; flex-direction: column; line-height: 1.25; }
.siegel__text strong {
  font-family: var(--schrift-text); font-size: 0.85rem; font-weight: 600; color: var(--weiss);
  text-transform: none; letter-spacing: 0;
}
.siegel__text { font-family: var(--schrift-daten); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--silber-tief); }
@media (min-width: 1024px) { .siegel { display: inline-flex; } }
@media print { .siegel { display: none !important; } }

/* ---------- 27. Runde Buttons ---------- */
.btn-rund {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none;
  background: var(--gold-btn); color: var(--weiss);
  border: 1px solid transparent; border-radius: 50%;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.75);
  transition: background var(--tempo) ease, transform var(--tempo) ease;
}
.btn-rund:hover { background: var(--gold-btn-hell); transform: translateY(-2px); }
.btn-rund svg { flex: none; }

/* Schwebende Knopfleiste rechts: WhatsApp oben, Nach oben darunter,
   auf großen Bildschirmen oberhalb des Bewertungssiegels */
.schwebe {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 91;
  display: flex; flex-direction: column; gap: 0.65rem;
}
@media (min-width: 1024px) { .schwebe { bottom: 5.4rem; } }
.nach-oben {
  opacity: 0; visibility: hidden;
  transition: opacity var(--tempo) ease, visibility var(--tempo) ease, background var(--tempo) ease, transform var(--tempo) ease;
}
.nach-oben[data-sichtbar="true"] { opacity: 1; visibility: visible; }
@media print { .schwebe { display: none !important; } }

/* ---------- 28. Rechtstexte ----------
   Links sind nicht unterstrichen. Gold erscheinen nur die Kontaktangaben
   (Telefon, Mobil, E-Mail); alle übrigen Verweise laufen im Fließtext mit. */
.text--recht a,
.text--recht a:hover,
.text--recht a:focus { text-decoration: none; }

.text--recht a {
  color: inherit;
  border-bottom: 1px solid var(--silber-linie);
}
.text--recht a:hover { color: var(--gold-tief); border-bottom-color: var(--gold); }

.text--recht .kontaktangaben a {
  color: var(--gold-tief); font-weight: 500; border-bottom: 0;
}
.text--recht .kontaktangaben a:hover { color: var(--nacht); }

/* ---------- 29. Symbolraster (Partnerseiten) ---------- */
.ikonraster {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3rem);
}
@media (max-width: 820px) { .ikonraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ikonraster { grid-template-columns: 1fr; } }
.ikon { text-align: center; }
.ikon__kreis {
  width: 88px; height: 88px; margin: 0 auto 1.15rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(198,162,69,0.35); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(235,215,154,0.12), rgba(198,162,69,0.03) 70%);
  transition: transform var(--tempo) ease, border-color var(--tempo) ease;
}
.ikon:hover .ikon__kreis { transform: translateY(-4px); border-color: var(--gold); }
.ikon h3 { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem); margin-bottom: 0.45rem; }
.ikon p { font-size: 0.93rem; color: var(--silber); max-width: 34ch; margin-inline: auto; }

/* Anspruchszeile über einem Abschnitt */
.anspruch {
  font-family: var(--schrift-display);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance;
  margin: 0 auto 1.2rem; max-width: 22ch; text-align: center; color: var(--weiss);
}
.anspruch em { font-style: normal; color: var(--gold-hell); }

/* Nummerierte Strategie-Punkte */
.sterne { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
/* der goldene Punkt aus .text ul gehört hier nicht hin – der Stern ersetzt ihn */
.text .sterne li { padding-left: 0; }
.text .sterne li::before { content: none; }
.sterne li {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--silber-linie);
}
.sterne li:last-child { border-bottom: 0; padding-bottom: 0; }
.sterne strong { display: block; margin-bottom: 0.2rem; }
.sterne__stern { color: var(--gold); font-size: 1.15rem; line-height: 1.5; text-align: center; }

/* ---------- 30. Sparplan-Rechner mit Verlauf ---------- */
.rueckblick {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start;
}
@media (max-width: 900px) { .rueckblick { grid-template-columns: 1fr; } }

.rechner2 {
  background: var(--weiss); border: 1px solid var(--silber-linie);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: 0 24px 50px -34px rgba(11,11,13,0.45);
}
.rechner2__kopf { margin-bottom: 1.4rem; }
.rechner2__kopf h3 { margin-bottom: 0.25rem; }
.rechner2__basis {
  font-family: var(--schrift-daten); font-size: 0.72rem; color: var(--silber-tief);
}

.rechner2__regler { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .rechner2__regler { grid-template-columns: 1fr; } }
.regler { border: 1px solid var(--silber-linie); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; }
.regler__name { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 1rem; }
.regler__zeile { display: flex; align-items: center; gap: 0.9rem; }
.regler__zeile input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.regler__zeile input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold) var(--fuell, 20%), #dcdee2 var(--fuell, 20%));
}
.regler__zeile input[type="range"]::-moz-range-track { height: 4px; background: #dcdee2; border-radius: 99px; }
.regler__zeile input[type="range"]::-moz-range-progress { height: 4px; background: var(--gold); border-radius: 99px; }
.regler__zeile input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: var(--gold-flaeche); border: 1px solid var(--gold-tief);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.regler__zeile input[type="range"]::-moz-range-thumb {
  width: 19px; height: 19px; border-radius: 50%; background: var(--gold);
  border: 1px solid var(--gold-tief); box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.regler__feld {
  display: flex; align-items: baseline; gap: 0.4rem; flex: none;
  border: 1px solid var(--silber-linie); border-radius: var(--radius);
  padding: 0.5rem 0.7rem; background: var(--weiss); min-width: 7.5rem; justify-content: flex-end;
}
.regler__feld output { font-family: var(--schrift-daten); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.regler__feld small { font-size: 0.72rem; color: var(--silber-tief); white-space: nowrap; }

.ergebnis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 1.2rem; }
@media (max-width: 780px) { .ergebnis { grid-template-columns: repeat(2, 1fr); } }
.ergebnis__feld { border: 1px solid var(--silber-linie); border-radius: var(--radius); padding: 0.85rem 0.9rem; }
.ergebnis__label { display: block; font-size: 0.79rem; color: var(--silber-tief); margin-bottom: 0.4rem; line-height: 1.35; }
.ergebnis__zahl {
  font-family: var(--schrift-daten); font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.16rem);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ergebnis__zahl--auf { color: var(--auf); }
.ergebnis__zahl--ab { color: var(--ab); }

.verlauf { margin-top: 1.2rem; border: 1px solid var(--silber-linie); border-radius: var(--radius); }
.verlauf > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; cursor: pointer; list-style: none; font-size: 0.94rem; font-weight: 500;
}
.verlauf > summary::-webkit-details-marker { display: none; }
.verlauf__titel { display: inline-flex; align-items: center; gap: 0.6rem; }
.verlauf > summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid var(--silber-tief); border-bottom: 1.5px solid var(--silber-tief);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--tempo) ease;
}
.verlauf[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.verlauf__flaeche { padding: 0.6rem 1rem 1rem; border-top: 1px solid var(--silber-linie); }
.verlauf__flaeche svg { width: 100%; height: auto; display: block; }
.verlauf__leer { margin: 0; padding: 1.4rem 0; text-align: center; font-size: 0.88rem; color: var(--silber-tief); }

.verlauf__daten { margin: 1.1rem 0 0; font-size: 0.88rem; color: #5c6069; display: grid; gap: 0.35rem; }
.verlauf__daten div { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.verlauf__daten dt { margin: 0; }
.verlauf__daten dd { margin: 0; }
.verlauf__daten strong { color: var(--nacht); }

.rechner2__hinweis { font-size: 0.82rem; color: #5c6069; margin: 0.9rem 0 0; line-height: 1.55; }
.rechner2__leer {
  margin: 0 0 1.2rem; padding: 1rem 1.15rem; border: 1px dashed var(--silber-tief);
  border-radius: var(--radius); font-size: 0.88rem; color: #5c6069;
}
.rechner2__leer[hidden] { display: none; }

.erklaerung { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.erklaerung li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; font-size: 0.98rem; color: #3f434a; }
.erklaerung svg { margin-top: 0.28rem; }
.rechtlich { margin-top: 1.6rem; font-size: 0.82rem; line-height: 1.6; color: #6a6f77; }

/* ---------- 31. Abstand für das Bewertungssiegel ----------
   Die Zeile mit Anschrift steht ganz rechts. Damit das fest eingeblendete
   Siegel sie nicht überdeckt, bekommt sie darunter zusätzlichen Freiraum.
   Diese Regel steht bewusst am Ende, damit sie nicht überschrieben wird. */
@media (min-width: 1024px) {
  .fusszeile__unten { padding-bottom: 7rem; }
}

/* ---------- 32. Antragsstrecke Goldsparplan ---------- */
.antrag { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
@media (max-width: 940px) { .antrag { grid-template-columns: 1fr; } }

.formkarte {
  background: var(--weiss); border: 1px solid var(--silber-linie);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2.1rem);
}
.formkarte + .formkarte { margin-top: 1.2rem; }
.formkarte > h3 {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding-bottom: 0.9rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--silber-linie);
}
.formkarte__nr {
  font-family: var(--schrift-daten); font-size: 0.7rem; color: var(--gold-tief);
  letter-spacing: 0.14em; flex: none;
}

.feldgruppe { display: grid; gap: 1rem; }
.feldgruppe--2 { grid-template-columns: 1fr 1fr; }
.feldgruppe--3 { grid-template-columns: 1fr 1fr 1fr; }
.feldgruppe--21 { grid-template-columns: 2fr 1fr; }
@media (max-width: 620px) {
  .feldgruppe--2, .feldgruppe--3, .feldgruppe--21 { grid-template-columns: 1fr; }
}

.feldgruppe--luft { margin-top: 1rem; }
.eingabe__hinweis--luft { margin-top: 0.9rem; }
.wahl--luft { margin-top: 1.2rem; }

.eingabe { display: grid; gap: 0.35rem; }
.eingabe label { font-size: 0.86rem; color: #4a4a52; }
.eingabe label .pflicht { color: var(--gold-tief); }
.eingabe input, .eingabe select {
  width: 100%; padding: 0.7rem 0.8rem;
  border: 1px solid var(--silber-linie); border-radius: var(--radius);
  font-family: var(--schrift-text); font-size: 0.98rem; color: var(--nacht); background: var(--weiss);
  transition: border-color var(--tempo) ease;
}
.eingabe input:focus, .eingabe select:focus { border-color: var(--gold); outline: none; }
.eingabe input[data-mono] { font-family: var(--schrift-daten); }
.eingabe--fehler input, .eingabe--fehler select { border-color: var(--ab); }
.eingabe__hinweis { font-size: 0.76rem; color: var(--silber-tief); }
.eingabe--fehler .eingabe__hinweis { color: var(--ab); }

.wahl { display: grid; gap: 0.7rem; }
.wahl label { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: #3f434a; cursor: pointer; }
.wahl input { width: 18px; height: 18px; margin-top: 0.15rem; flex: none; accent-color: var(--gold-btn); }

.summe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.1rem; }
@media (max-width: 620px) { .summe { grid-template-columns: 1fr; } }
.summe__feld { border: 1px solid var(--silber-linie); border-radius: var(--radius); padding: 0.8rem 0.9rem; background: var(--papier); }
.summe__label { display: block; font-size: 0.76rem; color: var(--silber-tief); margin-bottom: 0.3rem; }
.summe__wert { font-family: var(--schrift-daten); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.pruefung {
  margin-top: 1.4rem; border: 1px solid var(--silber-linie); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; background: var(--papier);
}
.pruefung h4 { font-family: var(--schrift-text); font-size: 0.95rem; margin: 0 0 0.6rem; }
.pruefung__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.88rem; }
.pruefung__liste li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.5rem; color: var(--ab); }
.pruefung__liste li::before { content: "!"; font-family: var(--schrift-daten); font-weight: 500; text-align: center; }
.pruefung--fertig { border-color: var(--gold); background: rgba(198,162,69,0.08); }
.pruefung--fertig .pruefung__liste li { color: var(--auf); }
.pruefung--fertig .pruefung__liste li::before { content: "\2713"; color: var(--auf); }

.antrag__aktionen { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.4rem; align-items: center; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.antrag__aktionen .btn--text {
  background: none; color: var(--nacht); border: 0; padding: 0.6rem 0.2rem;
  font-family: var(--schrift-text); font-size: 0.88rem; text-decoration: underline;
  text-decoration-color: var(--silber-tief); cursor: pointer;
}
.antrag__aktionen .btn--text:hover { text-decoration-color: var(--gold); }

.hinweisliste { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.hinweisliste li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.7rem; font-size: 0.93rem; color: #3f434a; }
.hinweisliste svg { margin-top: 0.25rem; }

/* ---------- 29. Symbolraster (Partnerseiten) ---------- */
.ikonraster {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3rem);
}
@media (max-width: 820px) { .ikonraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ikonraster { grid-template-columns: 1fr; } }
.ikon { text-align: center; }
.ikon__kreis {
  width: 88px; height: 88px; margin: 0 auto 1.15rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(198,162,69,0.35); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(235,215,154,0.12), rgba(198,162,69,0.03) 70%);
  transition: transform var(--tempo) ease, border-color var(--tempo) ease;
}
.ikon:hover .ikon__kreis { transform: translateY(-4px); border-color: var(--gold); }
.ikon h3 { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem); margin-bottom: 0.45rem; }
.ikon p { font-size: 0.93rem; color: var(--silber); max-width: 34ch; margin-inline: auto; }

/* Anspruchszeile über einem Abschnitt */
.anspruch {
  font-family: var(--schrift-display);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance;
  margin: 0 auto 1.2rem; max-width: 22ch; text-align: center; color: var(--weiss);
}
.anspruch em { font-style: normal; color: var(--gold-hell); }

/* Nummerierte Strategie-Punkte */
.sterne { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
/* der goldene Punkt aus .text ul gehört hier nicht hin – der Stern ersetzt ihn */
.text .sterne li { padding-left: 0; }
.text .sterne li::before { content: none; }
.sterne li {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--silber-linie);
}
.sterne li:last-child { border-bottom: 0; padding-bottom: 0; }
.sterne strong { display: block; margin-bottom: 0.2rem; }
.sterne__stern { color: var(--gold); font-size: 1.15rem; line-height: 1.5; text-align: center; }

/* ---------- 30. Sparplan-Rechner mit Verlauf ---------- */
.rueckblick {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start;
}
@media (max-width: 900px) { .rueckblick { grid-template-columns: 1fr; } }

.rechner2 {
  background: var(--weiss); border: 1px solid var(--silber-linie);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: 0 24px 50px -34px rgba(11,11,13,0.45);
}
.rechner2__kopf { margin-bottom: 1.4rem; }
.rechner2__kopf h3 { margin-bottom: 0.25rem; }
.rechner2__basis {
  font-family: var(--schrift-daten); font-size: 0.72rem; color: var(--silber-tief);
}

.rechner2__regler { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .rechner2__regler { grid-template-columns: 1fr; } }
.regler { border: 1px solid var(--silber-linie); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; }
.regler__name { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 1rem; }
.regler__zeile { display: flex; align-items: center; gap: 0.9rem; }
.regler__zeile input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.regler__zeile input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold) var(--fuell, 20%), #dcdee2 var(--fuell, 20%));
}
.regler__zeile input[type="range"]::-moz-range-track { height: 4px; background: #dcdee2; border-radius: 99px; }
.regler__zeile input[type="range"]::-moz-range-progress { height: 4px; background: var(--gold); border-radius: 99px; }
.regler__zeile input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: var(--gold-flaeche); border: 1px solid var(--gold-tief);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.regler__zeile input[type="range"]::-moz-range-thumb {
  width: 19px; height: 19px; border-radius: 50%; background: var(--gold);
  border: 1px solid var(--gold-tief); box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.regler__feld {
  display: flex; align-items: baseline; gap: 0.4rem; flex: none;
  border: 1px solid var(--silber-linie); border-radius: var(--radius);
  padding: 0.5rem 0.7rem; background: var(--weiss); min-width: 7.5rem; justify-content: flex-end;
}
.regler__feld output { font-family: var(--schrift-daten); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.regler__feld small { font-size: 0.72rem; color: var(--silber-tief); white-space: nowrap; }

.ergebnis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 1.2rem; }
@media (max-width: 780px) { .ergebnis { grid-template-columns: repeat(2, 1fr); } }
.ergebnis__feld { border: 1px solid var(--silber-linie); border-radius: var(--radius); padding: 0.85rem 0.9rem; }
.ergebnis__label { display: block; font-size: 0.79rem; color: var(--silber-tief); margin-bottom: 0.4rem; line-height: 1.35; }
.ergebnis__zahl {
  font-family: var(--schrift-daten); font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.16rem);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ergebnis__zahl--auf { color: var(--auf); }
.ergebnis__zahl--ab { color: var(--ab); }

.verlauf { margin-top: 1.2rem; border: 1px solid var(--silber-linie); border-radius: var(--radius); }
.verlauf > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; cursor: pointer; list-style: none; font-size: 0.94rem; font-weight: 500;
}
.verlauf > summary::-webkit-details-marker { display: none; }
.verlauf__titel { display: inline-flex; align-items: center; gap: 0.6rem; }
.verlauf > summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid var(--silber-tief); border-bottom: 1.5px solid var(--silber-tief);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--tempo) ease;
}
.verlauf[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.verlauf__flaeche { padding: 0.6rem 1rem 1rem; border-top: 1px solid var(--silber-linie); }
.verlauf__flaeche svg { width: 100%; height: auto; display: block; }
.verlauf__leer { margin: 0; padding: 1.4rem 0; text-align: center; font-size: 0.88rem; color: var(--silber-tief); }

.verlauf__daten { margin: 1.1rem 0 0; font-size: 0.88rem; color: #5c6069; display: grid; gap: 0.35rem; }
.verlauf__daten div { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.verlauf__daten dt { margin: 0; }
.verlauf__daten dd { margin: 0; }
.verlauf__daten strong { color: var(--nacht); }

.rechner2__hinweis { font-size: 0.82rem; color: #5c6069; margin: 0.9rem 0 0; line-height: 1.55; }
.rechner2__leer {
  margin: 0 0 1.2rem; padding: 1rem 1.15rem; border: 1px dashed var(--silber-tief);
  border-radius: var(--radius); font-size: 0.88rem; color: #5c6069;
}
.rechner2__leer[hidden] { display: none; }

.erklaerung { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.erklaerung li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; font-size: 0.98rem; color: #3f434a; }
.erklaerung svg { margin-top: 0.28rem; }
.rechtlich { margin-top: 1.6rem; font-size: 0.82rem; line-height: 1.6; color: #6a6f77; }

/* ---------- 31. Abstand für das Bewertungssiegel ----------
   Die Zeile mit Anschrift steht ganz rechts. Damit das fest eingeblendete
   Siegel sie nicht überdeckt, bekommt sie darunter zusätzlichen Freiraum.
   Diese Regel steht bewusst am Ende, damit sie nicht überschrieben wird. */
@media (min-width: 1024px) {
  .fusszeile__unten { padding-bottom: 7rem; }
}

/* ---------- 32. Antragsstrecke Goldsparplan ---------- */
.antrag { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
@media (max-width: 940px) { .antrag { grid-template-columns: 1fr; } }

.formkarte {
  background: var(--weiss); border: 1px solid var(--silber-linie);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2.1rem);
}
.formkarte + .formkarte { margin-top: 1.2rem; }
.formkarte > h3 {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding-bottom: 0.9rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--silber-linie);
}
.formkarte__nr {
  font-family: var(--schrift-daten); font-size: 0.7rem; color: var(--gold-tief);
  letter-spacing: 0.14em; flex: none;
}

.feldgruppe { display: grid; gap: 1rem; }
.feldgruppe--2 { grid-template-columns: 1fr 1fr; }
.feldgruppe--3 { grid-template-columns: 1fr 1fr 1fr; }
.feldgruppe--21 { grid-template-columns: 2fr 1fr; }
@media (max-width: 620px) {
  .feldgruppe--2, .feldgruppe--3, .feldgruppe--21 { grid-template-columns: 1fr; }
}

.feldgruppe--luft { margin-top: 1rem; }
.eingabe__hinweis--luft { margin-top: 0.9rem; }
.wahl--luft { margin-top: 1.2rem; }

.eingabe { display: grid; gap: 0.35rem; }
.eingabe label { font-size: 0.86rem; color: #4a4a52; }
.eingabe label .pflicht { color: var(--gold-tief); }
.eingabe input, .eingabe select {
  width: 100%; padding: 0.7rem 0.8rem;
  border: 1px solid var(--silber-linie); border-radius: var(--radius);
  font-family: var(--schrift-text); font-size: 0.98rem; color: var(--nacht); background: var(--weiss);
  transition: border-color var(--tempo) ease;
}
.eingabe input:focus, .eingabe select:focus { border-color: var(--gold); outline: none; }
.eingabe input[data-mono] { font-family: var(--schrift-daten); }
.eingabe--fehler input, .eingabe--fehler select { border-color: var(--ab); }
.eingabe__hinweis { font-size: 0.76rem; color: var(--silber-tief); }
.eingabe--fehler .eingabe__hinweis { color: var(--ab); }

.wahl { display: grid; gap: 0.7rem; }
.wahl label { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: #3f434a; cursor: pointer; }
.wahl input { width: 18px; height: 18px; margin-top: 0.15rem; flex: none; accent-color: var(--gold-btn); }

.summe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.1rem; }
@media (max-width: 620px) { .summe { grid-template-columns: 1fr; } }
.summe__feld { border: 1px solid var(--silber-linie); border-radius: var(--radius); padding: 0.8rem 0.9rem; background: var(--papier); }
.summe__label { display: block; font-size: 0.76rem; color: var(--silber-tief); margin-bottom: 0.3rem; }
.summe__wert { font-family: var(--schrift-daten); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.pruefung {
  margin-top: 1.4rem; border: 1px solid var(--silber-linie); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; background: var(--papier);
}
.pruefung h4 { font-family: var(--schrift-text); font-size: 0.95rem; margin: 0 0 0.6rem; }
.pruefung__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.88rem; }
.pruefung__liste li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.5rem; color: var(--ab); }
.pruefung__liste li::before { content: "!"; font-family: var(--schrift-daten); font-weight: 500; text-align: center; }
.pruefung--fertig { border-color: var(--gold); background: rgba(198,162,69,0.08); }
.pruefung--fertig .pruefung__liste li { color: var(--auf); }
.pruefung--fertig .pruefung__liste li::before { content: "\2713"; color: var(--auf); }

.antrag__aktionen { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.4rem; align-items: center; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.antrag__aktionen .btn--text {
  background: none; color: var(--nacht); border: 0; padding: 0.6rem 0.2rem;
  font-family: var(--schrift-text); font-size: 0.88rem; text-decoration: underline;
  text-decoration-color: var(--silber-tief); cursor: pointer;
}
.antrag__aktionen .btn--text:hover { text-decoration-color: var(--gold); }

.hinweisliste { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.hinweisliste li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.7rem; font-size: 0.93rem; color: #3f434a; }
.hinweisliste svg { margin-top: 0.25rem; }

/* ---------- Druckansicht: Bogen im Aufbau des Originalformulars ---------- */
.druck { display: none; }

@media print {
  @page { size: A4; margin: 12mm 12mm 10mm; }

  body { background: #fff !important; color: #000 !important; }
  .laufband, .kopfzeile, .fusszeile, .schwebe, .siegel, .skip-link,
  .seitenkopf, .antrag__eingabe, .abschnitt--papier, .antrag__hilfe { display: none !important; }
  .abschnitt { padding: 0 !important; }
  .container { width: 100% !important; }

  .druck {
    display: block; color: #000;
    font-family: "Plex Sans", Arial, sans-serif; font-size: 9pt; line-height: 1.35;
  }
  .druck__blatt { page-break-after: always; }
  .druck__blatt:last-child { page-break-after: auto; }

  /* Kopf mit Wortmarke */
  .bogen__marke { text-align: center; margin-bottom: 6mm; }
  .bogen__rr {
    display: block; font-family: "Bodoni Moda", serif; font-size: 17pt;
    letter-spacing: 0.12em; color: #8c6e22;
  }
  .bogen__wort {
    display: block; font-size: 8.5pt; letter-spacing: 0.42em; color: #8c6e22; margin-top: 0.6mm;
  }

  .bogen__titel {
    font-family: "Plex Sans", Arial, sans-serif; font-size: 13pt; font-weight: 600;
    letter-spacing: 0.06em; margin: 0 0 1mm; color: #000;
  }
  .bogen__unter { font-size: 9.5pt; margin: 0 0 5mm; }
  .bogen__satz { margin: 3.5mm 0 2.5mm; font-size: 9pt; }
  .bogen__klein { font-size: 8pt; line-height: 1.35; margin: 0 0 2mm; }
  .bogen__ueber {
    font-family: "Plex Sans", Arial, sans-serif; font-size: 9.5pt; font-weight: 600;
    margin: 5mm 0 1.5mm; color: #000;
  }

  /* Ausfüllzeilen: Wert auf der Linie, Beschriftung darunter */
  .bogen__reihe { display: flex; gap: 6mm; margin-bottom: 4mm; }
  .bogen__feld { flex: 1 1 0; min-width: 0; }
  .bogen--breit { flex: 1.7 1 0; }
  .bogen--schmal { flex: 0.55 1 0; }
  .bogen__feld b {
    display: block; border-bottom: 0.5pt solid #000;
    min-height: 5.2mm; padding: 0 1mm 0.8mm;
    font-weight: 500; font-size: 10pt; white-space: nowrap; overflow: hidden;
  }
  /* Der Vertriebspartner steht in zwei Zeilen, sonst wird er abgeschnitten. */
  .bogen__feld b.bogen--zweizeilig {
    white-space: normal; font-size: 8.5pt; line-height: 1.3; min-height: 9mm;
  }
  .bogen__feld span { display: block; font-size: 6.8pt; color: #333; margin-top: 0.8mm; }

  /* Rechenzeile: Rate x 12 x Laufzeit = Kaufpreis */
  .bogen__rechnung { display: flex; align-items: flex-start; gap: 3mm; margin-bottom: 4mm; }
  .bogen__mal { padding-top: 2mm; font-size: 9.5pt; white-space: nowrap; }

  .bogen__kasten {
    border: 0.5pt solid #000; padding: 2.5mm 3mm; margin: 0 0 4mm; font-size: 8pt; line-height: 1.35;
  }
  .bogen__kasten b { display: block; margin-bottom: 0.8mm; }

  .bogen__liste { list-style: none; margin: 0 0 3mm; padding: 0; }
  .bogen__liste li {
    display: flex; gap: 2.5mm; align-items: flex-start; font-size: 8.2pt; margin-bottom: 1.6mm;
  }
  .bogen__haken {
    flex: none; width: 3.6mm; height: 3.6mm; border: 0.5pt solid #000;
    text-align: center; line-height: 3.4mm; font-size: 8pt;
  }

  .bogen__unterschrift { margin-top: 8mm; page-break-inside: avoid; }
  .bogen__fuss {
    margin-top: 5mm; padding-top: 1.5mm; border-top: 0.4pt solid #999;
    font-size: 7pt; line-height: 1.35; color: #333;
  }
}

/* ---------- 29. Symbolraster (Partnerseiten) ---------- */
.ikonraster {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3rem);
}
@media (max-width: 820px) { .ikonraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ikonraster { grid-template-columns: 1fr; } }
.ikon { text-align: center; }
.ikon__kreis {
  width: 88px; height: 88px; margin: 0 auto 1.15rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(198,162,69,0.35); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(235,215,154,0.12), rgba(198,162,69,0.03) 70%);
  transition: transform var(--tempo) ease, border-color var(--tempo) ease;
}
.ikon:hover .ikon__kreis { transform: translateY(-4px); border-color: var(--gold); }
.ikon h3 { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem); margin-bottom: 0.45rem; }
.ikon p { font-size: 0.93rem; color: var(--silber); max-width: 34ch; margin-inline: auto; }

/* Anspruchszeile über einem Abschnitt */
.anspruch {
  font-family: var(--schrift-display);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance;
  margin: 0 auto 1.2rem; max-width: 22ch; text-align: center; color: var(--weiss);
}
.anspruch em { font-style: normal; color: var(--gold-hell); }

/* Nummerierte Strategie-Punkte */
.sterne { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
/* der goldene Punkt aus .text ul gehört hier nicht hin – der Stern ersetzt ihn */
.text .sterne li { padding-left: 0; }
.text .sterne li::before { content: none; }
.sterne li {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--silber-linie);
}
.sterne li:last-child { border-bottom: 0; padding-bottom: 0; }
.sterne strong { display: block; margin-bottom: 0.2rem; }
.sterne__stern { color: var(--gold); font-size: 1.15rem; line-height: 1.5; text-align: center; }

/* ---------- 30. Sparplan-Rechner mit Verlauf ---------- */
.rueckblick {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start;
}
@media (max-width: 900px) { .rueckblick { grid-template-columns: 1fr; } }

.rechner2 {
  background: var(--weiss); border: 1px solid var(--silber-linie);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: 0 24px 50px -34px rgba(11,11,13,0.45);
}
.rechner2__kopf { margin-bottom: 1.4rem; }
.rechner2__kopf h3 { margin-bottom: 0.25rem; }
.rechner2__basis {
  font-family: var(--schrift-daten); font-size: 0.72rem; color: var(--silber-tief);
}

.rechner2__regler { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .rechner2__regler { grid-template-columns: 1fr; } }
.regler { border: 1px solid var(--silber-linie); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; }
.regler__name { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 1rem; }
.regler__zeile { display: flex; align-items: center; gap: 0.9rem; }
.regler__zeile input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.regler__zeile input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold) var(--fuell, 20%), #dcdee2 var(--fuell, 20%));
}
.regler__zeile input[type="range"]::-moz-range-track { height: 4px; background: #dcdee2; border-radius: 99px; }
.regler__zeile input[type="range"]::-moz-range-progress { height: 4px; background: var(--gold); border-radius: 99px; }
.regler__zeile input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: var(--gold-flaeche); border: 1px solid var(--gold-tief);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.regler__zeile input[type="range"]::-moz-range-thumb {
  width: 19px; height: 19px; border-radius: 50%; background: var(--gold);
  border: 1px solid var(--gold-tief); box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.regler__feld {
  display: flex; align-items: baseline; gap: 0.4rem; flex: none;
  border: 1px solid var(--silber-linie); border-radius: var(--radius);
  padding: 0.5rem 0.7rem; background: var(--weiss); min-width: 7.5rem; justify-content: flex-end;
}
.regler__feld output { font-family: var(--schrift-daten); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.regler__feld small { font-size: 0.72rem; color: var(--silber-tief); white-space: nowrap; }

.ergebnis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 1.2rem; }
@media (max-width: 780px) { .ergebnis { grid-template-columns: repeat(2, 1fr); } }
.ergebnis__feld { border: 1px solid var(--silber-linie); border-radius: var(--radius); padding: 0.85rem 0.9rem; }
.ergebnis__label { display: block; font-size: 0.79rem; color: var(--silber-tief); margin-bottom: 0.4rem; line-height: 1.35; }
.ergebnis__zahl {
  font-family: var(--schrift-daten); font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.16rem);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ergebnis__zahl--auf { color: var(--auf); }
.ergebnis__zahl--ab { color: var(--ab); }

.verlauf { margin-top: 1.2rem; border: 1px solid var(--silber-linie); border-radius: var(--radius); }
.verlauf > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; cursor: pointer; list-style: none; font-size: 0.94rem; font-weight: 500;
}
.verlauf > summary::-webkit-details-marker { display: none; }
.verlauf__titel { display: inline-flex; align-items: center; gap: 0.6rem; }
.verlauf > summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid var(--silber-tief); border-bottom: 1.5px solid var(--silber-tief);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--tempo) ease;
}
.verlauf[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.verlauf__flaeche { padding: 0.6rem 1rem 1rem; border-top: 1px solid var(--silber-linie); }
.verlauf__flaeche svg { width: 100%; height: auto; display: block; }
.verlauf__leer { margin: 0; padding: 1.4rem 0; text-align: center; font-size: 0.88rem; color: var(--silber-tief); }

.verlauf__daten { margin: 1.1rem 0 0; font-size: 0.88rem; color: #5c6069; display: grid; gap: 0.35rem; }
.verlauf__daten div { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.verlauf__daten dt { margin: 0; }
.verlauf__daten dd { margin: 0; }
.verlauf__daten strong { color: var(--nacht); }

.rechner2__hinweis { font-size: 0.82rem; color: #5c6069; margin: 0.9rem 0 0; line-height: 1.55; }
.rechner2__leer {
  margin: 0 0 1.2rem; padding: 1rem 1.15rem; border: 1px dashed var(--silber-tief);
  border-radius: var(--radius); font-size: 0.88rem; color: #5c6069;
}
.rechner2__leer[hidden] { display: none; }

.erklaerung { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.erklaerung li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; font-size: 0.98rem; color: #3f434a; }
.erklaerung svg { margin-top: 0.28rem; }
.rechtlich { margin-top: 1.6rem; font-size: 0.82rem; line-height: 1.6; color: #6a6f77; }

/* ---------- 31. Abstand für das Bewertungssiegel ----------
   Die Zeile mit Anschrift steht ganz rechts. Damit das fest eingeblendete
   Siegel sie nicht überdeckt, bekommt sie darunter zusätzlichen Freiraum.
   Diese Regel steht bewusst am Ende, damit sie nicht überschrieben wird. */
@media (min-width: 1024px) {
  .fusszeile__unten { padding-bottom: 7rem; }
}

/* ---------- 32. Antragsstrecke Goldsparplan ---------- */
.antrag { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
@media (max-width: 940px) { .antrag { grid-template-columns: 1fr; } }

.formkarte {
  background: var(--weiss); border: 1px solid var(--silber-linie);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2.1rem);
}
.formkarte + .formkarte { margin-top: 1.2rem; }
.formkarte > h3 {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding-bottom: 0.9rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--silber-linie);
}
.formkarte__nr {
  font-family: var(--schrift-daten); font-size: 0.7rem; color: var(--gold-tief);
  letter-spacing: 0.14em; flex: none;
}

.feldgruppe { display: grid; gap: 1rem; }
.feldgruppe--2 { grid-template-columns: 1fr 1fr; }
.feldgruppe--3 { grid-template-columns: 1fr 1fr 1fr; }
.feldgruppe--21 { grid-template-columns: 2fr 1fr; }
@media (max-width: 620px) {
  .feldgruppe--2, .feldgruppe--3, .feldgruppe--21 { grid-template-columns: 1fr; }
}

.feldgruppe--luft { margin-top: 1rem; }
.eingabe__hinweis--luft { margin-top: 0.9rem; }
.wahl--luft { margin-top: 1.2rem; }

.eingabe { display: grid; gap: 0.35rem; }
.eingabe label { font-size: 0.86rem; color: #4a4a52; }
.eingabe label .pflicht { color: var(--gold-tief); }
.eingabe input, .eingabe select {
  width: 100%; padding: 0.7rem 0.8rem;
  border: 1px solid var(--silber-linie); border-radius: var(--radius);
  font-family: var(--schrift-text); font-size: 0.98rem; color: var(--nacht); background: var(--weiss);
  transition: border-color var(--tempo) ease;
}
.eingabe input:focus, .eingabe select:focus { border-color: var(--gold); outline: none; }
.eingabe input[data-mono] { font-family: var(--schrift-daten); }
.eingabe--fehler input, .eingabe--fehler select { border-color: var(--ab); }
.eingabe__hinweis { font-size: 0.76rem; color: var(--silber-tief); }
.eingabe--fehler .eingabe__hinweis { color: var(--ab); }

.wahl { display: grid; gap: 0.7rem; }
.wahl label { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: #3f434a; cursor: pointer; }
.wahl input { width: 18px; height: 18px; margin-top: 0.15rem; flex: none; accent-color: var(--gold-btn); }

.summe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.1rem; }
@media (max-width: 620px) { .summe { grid-template-columns: 1fr; } }
.summe__feld { border: 1px solid var(--silber-linie); border-radius: var(--radius); padding: 0.8rem 0.9rem; background: var(--papier); }
.summe__label { display: block; font-size: 0.76rem; color: var(--silber-tief); margin-bottom: 0.3rem; }
.summe__wert { font-family: var(--schrift-daten); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.pruefung {
  margin-top: 1.4rem; border: 1px solid var(--silber-linie); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; background: var(--papier);
}
.pruefung h4 { font-family: var(--schrift-text); font-size: 0.95rem; margin: 0 0 0.6rem; }
.pruefung__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.88rem; }
.pruefung__liste li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.5rem; color: var(--ab); }
.pruefung__liste li::before { content: "!"; font-family: var(--schrift-daten); font-weight: 500; text-align: center; }
.pruefung--fertig { border-color: var(--gold); background: rgba(198,162,69,0.08); }
.pruefung--fertig .pruefung__liste li { color: var(--auf); }
.pruefung--fertig .pruefung__liste li::before { content: "\2713"; color: var(--auf); }

.antrag__aktionen { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.4rem; align-items: center; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.antrag__aktionen .btn--text {
  background: none; color: var(--nacht); border: 0; padding: 0.6rem 0.2rem;
  font-family: var(--schrift-text); font-size: 0.88rem; text-decoration: underline;
  text-decoration-color: var(--silber-tief); cursor: pointer;
}
.antrag__aktionen .btn--text:hover { text-decoration-color: var(--gold); }

.hinweisliste { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.hinweisliste li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.7rem; font-size: 0.93rem; color: #3f434a; }
.hinweisliste svg { margin-top: 0.25rem; }

/* ---------- Druckansicht des Bestellscheins ---------- */
.druck { display: none; }

@media print {
  @page { size: A4; margin: 12mm 13mm 10mm; }

  body { background: #fff !important; color: #000 !important; font-size: 10pt; }
  .laufband, .kopfzeile, .fusszeile, .schwebe, .siegel, .skip-link,
  .seitenkopf, .antrag__eingabe, .abschnitt--papier, .antrag__hilfe { display: none !important; }
  .abschnitt { padding: 0 !important; }
  .container { width: 100% !important; }

  .druck { display: block; color: #000; font-family: var(--schrift-text); }
  .druck__blatt { page-break-after: always; page-break-inside: avoid; }
  .druck__blatt:last-child { page-break-after: auto; }
  .druck__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10mm; margin-bottom: 4mm; }
  .druck__marke { font-family: var(--schrift-display); font-size: 15pt; line-height: 1.15; }
  .druck__marke small { display: block; font-family: var(--schrift-daten); font-size: 7pt; letter-spacing: 0.16em; text-transform: uppercase; }
  .druck h1 { font-size: 14pt; margin: 0 0 1mm; color: #000; }
  .druck h2 { font-size: 10.5pt; margin: 4mm 0 1.5mm; padding-bottom: 0.8mm; border-bottom: 0.4pt solid #000; color: #000; }
  .druck p { margin: 0 0 1.5mm; font-size: 9pt; line-height: 1.4; }
  .druck__zeile { display: flex; flex-wrap: wrap; gap: 3mm 7mm; margin-bottom: 1.5mm; }
  .druck__wert { flex: 1 1 40%; border-bottom: 0.4pt solid #000; padding-bottom: 0.8mm; min-width: 45mm; }
  .druck__wert span { display: block; font-size: 7pt; color: #444; }
  .druck__wert strong { font-weight: 500; font-size: 10pt; }
  .druck__kasten { border: 0.6pt solid #000; padding: 2.5mm; margin: 2.5mm 0; }
  .druck__klein { font-size: 7.8pt; line-height: 1.35; }
  .druck__unterschrift { display: flex; gap: 10mm; margin-top: 8mm; page-break-inside: avoid; }
  .druck__unterschrift div { flex: 1; border-top: 0.5pt solid #000; padding-top: 1.2mm; font-size: 8pt; }
  .druck__fuss { margin-top: 4mm; font-size: 7.2pt; color: #333; border-top: 0.4pt solid #999; padding-top: 1.5mm; }
  .druck__haken { font-family: var(--schrift-daten); }
}