/* Rentenpost Landingpage v2: hell, ruhig, Werkzeug direkt im Kopfbereich. Ergänzt site.css (nur index.html). */

:root {
  --flaeche: #FFFFFF;
  --band: #F2F5F9;
  --band-blau: #E9EFF7;
  --karte-rand: #DDE3EB;
  --schatten-karte: 0 1px 2px rgb(19 30 48 / 0.06), 0 10px 30px -18px rgb(19 30 48 / 0.30);
  --schatten-gross: 0 2px 6px rgb(19 30 48 / 0.08), 0 30px 60px -30px rgb(19 30 48 / 0.45);
  --markierung: linear-gradient(transparent 58%, rgb(247 213 71 / 0.75) 58%, rgb(247 213 71 / 0.75) 92%, transparent 92%);
  --t-h1v2: clamp(2.5rem, 1.6rem + 3.6vw, 4.1rem);
  --t-h2v2: clamp(2rem, 1.5rem + 2vw, 3rem);
}

body.v2 { background: var(--flaeche); }
.v2 h1, .v2 h2, .v2 h3 { font-family: var(--f-text); font-weight: 700; letter-spacing: -0.015em; }
.v2 h1 { font-size: var(--t-h1v2); line-height: 1.08; }
.v2 h2 { font-size: var(--t-h2v2); line-height: 1.12; }
.v2 h3 { font-size: 1.45rem; line-height: 1.25; }
.markiert-text { background: var(--markierung); padding: 0 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kicker { display: block; font: 700 0.95rem/1.2 var(--f-text); letter-spacing: 0.09em; text-transform: uppercase; color: #8A6A00; margin-bottom: var(--s-4); }

/* Kopf hell */
.v2 .kopf { background: rgb(255 255 255 / 0.94); color: var(--tinte); border-bottom: 1px solid var(--karte-rand); backdrop-filter: saturate(1.4) blur(8px); }
.v2 .kopf .huelle { min-height: 4.75rem; }
.v2 .marke { gap: 0.8rem; }
.v2 .marke img { background: var(--tinte); }
.v2 .marke-text { display: grid; line-height: 1.1; }
.v2 .marke-text b { font: 800 1.6rem/1 var(--f-titel); letter-spacing: -0.005em; }
.v2 .marke-text small { font-size: 0.95rem; color: var(--text-leise); }
.v2 .kopf nav a:hover { text-decoration-color: var(--rotstift); }
.v2 .kopf .knopf-voll { background: var(--tinte); color: #fff; }
.v2 .kopf .knopf-voll:hover { background: var(--tinte-hell); }
.knopf-preis { display: inline-flex; gap: 0.6rem; align-items: center; }
.knopf-preis i { font-style: normal; padding-left: 0.6rem; border-left: 1px solid rgb(255 255 255 / 0.35); }

/* Knöpfe v2 */
.v2 .knopf-voll { background: var(--tinte); color: #fff; box-shadow: 0 8px 18px -10px rgb(19 30 48 / 0.7); }
.v2 .knopf-voll:hover { background: var(--tinte-hell); }
.v2 .knopf-gross { min-height: 4rem; padding: 0.9rem 2rem; font-size: 1.3rem; border-radius: 10px; }
.v2 .knopf-hell { background: #fff; color: var(--tinte); }
.v2 .knopf-hell:hover { background: var(--papier); }

/* Hero */
.hero2 { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem); background:
  radial-gradient(1200px 500px at 85% -10%, rgb(233 239 247 / 0.9), transparent 60%), var(--flaeche); }
.hero2 .huelle { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.hero2 h1 { max-width: 14ch; }
.hero2 .lead { margin-top: var(--s-5); color: var(--text); max-width: 40ch; font-size: 1.35rem; line-height: 1.55; }
.haken-liste { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--text-leise); font-size: 1.05rem; }
.haken-liste li { display: inline-flex; gap: 0.45rem; align-items: center; }
.haken-liste li::before { content: ""; width: 1.05rem; height: 1.05rem; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }

.check-karte { margin-top: var(--s-6); background: #fff; border: 1px solid var(--karte-rand); border-radius: 16px; box-shadow: var(--schatten-gross); padding: clamp(1.25rem, 0.75rem + 2vw, 2rem); }
.check-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.check-karte-kopf h2 { font-size: 1.7rem; }
.marke-gratis { font: 700 0.85rem/1 var(--f-text); letter-spacing: 0.08em; color: #1F6B42; background: #E3F3EA; border-radius: 99px; padding: 0.4rem 0.7rem; }
.check-karte .formular { border: 0; box-shadow: none; padding: 0; background: transparent; }

/* Produktvorschau im Fenster */
.fenster { position: relative; background: #fff; border: 1px solid var(--karte-rand); border-radius: 16px; box-shadow: var(--schatten-gross); overflow: hidden; }
.fenster-leiste { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--karte-rand); background: #F7F9FC; }
.fenster-leiste i { width: 10px; height: 10px; border-radius: 50%; background: #D3D9E2; }
.fenster img { display: block; width: 100%; height: auto; }
.hero-vorschau { position: relative; padding: 0 0 3rem 2.5rem; }
.hero-vorschau .fenster { transform: rotate(0.6deg); }
.hero-vorschau .fenster img { max-height: 560px; object-fit: cover; object-position: top; }
.hero-vorschau .brief-klein { position: absolute; left: 0; bottom: 0; width: 58%; transform: rotate(-3deg); }
.hero-vorschau .brief-klein .brief { transform: none; font-size: 0.78rem; padding: 1.2rem 1.2rem 1.3rem; }
.hero-vorschau .brief-klein .betreff { font-size: 0.85rem; }
.hero-vorschau .brief-klein .kreis { left: 50%; bottom: 13%; width: 54%; height: 20%; }
.schwebe-hinweis { position: absolute; right: -0.75rem; top: 42%; background: #fff; border: 1px solid var(--karte-rand); border-radius: 12px; box-shadow: var(--schatten-karte); padding: 0.8rem 1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; align-items: center; max-width: 15rem; }
.schwebe-hinweis b { font: 700 1.25rem/1.1 var(--f-text); color: var(--gruen); }
.schwebe-hinweis span { grid-column: 2; font-size: 0.95rem; color: var(--text-leise); line-height: 1.3; }
.schwebe-hinweis svg { grid-row: 1 / 3; width: 28px; height: 28px; color: var(--gruen); }
@media (max-width: 60rem) {
  .hero2 .huelle { grid-template-columns: minmax(0, 1fr); }
  .hero-vorschau { padding-left: 1.5rem; max-width: 36rem; }
  .schwebe-hinweis { right: 0; }
}

/* Abschnitte v2 */
.abschnitt2 { padding-block: clamp(4rem, 2.5rem + 5vw, 7rem); }
.abschnitt2.band { background: var(--band); }
.abschnitt2.band-blau { background: var(--band-blau); }
.kopf2 { max-width: 46rem; margin-bottom: var(--s-7); }
.kopf2 p { margin-top: var(--s-4); font-size: 1.3rem; color: var(--text-leise); line-height: 1.55; }

/* Zahlenkarten */
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 52rem) { .zahlen { grid-template-columns: minmax(0, 1fr); } }
.zahl-karte { background: #fff; border: 1px solid var(--karte-rand); border-radius: 14px; padding: var(--s-6); box-shadow: var(--schatten-karte); display: grid; gap: var(--s-3); align-content: start; }
.zahl-karte .gross { font: 800 clamp(2.3rem, 1.9rem + 1.6vw, 3rem)/1 var(--f-text); color: #9A3412; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zahl-karte .gross small { display: block; font: 600 1.05rem/1.3 var(--f-text); color: var(--text-leise); letter-spacing: 0; margin-top: var(--s-2); }
.zahl-karte h3 { font-size: 1.3rem; }
.zahl-karte p { color: var(--text-leise); font-size: 1.08rem; line-height: 1.5; }
.zahl-karte .beleg { font-size: 0.95rem; color: var(--amtsgrau); border-top: 1px solid var(--karte-rand); padding-top: var(--s-3); margin-top: auto; }
.fussnote { margin-top: var(--s-5); font-size: 1rem; color: var(--text-leise); max-width: 75ch; }

/* dunkles Band mit Aufruf */
.aufruf-band { margin-top: var(--s-7); background: var(--tinte); color: #fff; border-radius: 18px; padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); display: flex; gap: var(--s-6); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.aufruf-band h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; }
.aufruf-band p { color: var(--auf-tinte-leise); margin-top: var(--s-2); max-width: 46ch; }

/* Produkt: Vorschau + Funktionskarten */
.produkt { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
@media (max-width: 60rem) { .produkt { grid-template-columns: minmax(0, 1fr); } }
.produkt-bilder { position: sticky; top: 6.5rem; display: grid; gap: var(--s-5); }
@media (max-width: 60rem) { .produkt-bilder { position: static; } }
.produkt-bilder .fenster img { max-height: 620px; object-fit: cover; object-position: top; }
.produkt-bilder .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.produkt-bilder .zwei img { border-radius: 10px; border: 1px solid var(--karte-rand); box-shadow: var(--schatten-karte); }
.funktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
@media (max-width: 40rem) { .funktionen { grid-template-columns: minmax(0, 1fr); } }
.funktion { background: #fff; border: 1px solid var(--karte-rand); border-radius: 14px; padding: var(--s-5); display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-content: start; }
.funktion .symbol { width: 2.9rem; height: 2.9rem; border-radius: 10px; background: var(--band-blau); color: var(--tinte); display: grid; place-items: center; }
.funktion .symbol svg { width: 1.5rem; height: 1.5rem; }
.funktion h3 { font-size: 1.25rem; margin-bottom: 0.2rem; }
.funktion p { color: var(--text-leise); font-size: 1.05rem; line-height: 1.5; }
.produkt .knopf { margin-top: var(--s-6); }

/* Schritte */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); counter-reset: s2; }
@media (max-width: 52rem) { .schritte { grid-template-columns: minmax(0, 1fr); } }
.schritte li { counter-increment: s2; background: #fff; border: 1px solid var(--karte-rand); border-radius: 14px; padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start; }
.schritte li::before { content: counter(s2); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--tinte); color: #fff; display: grid; place-items: center; font: 700 1.2rem/1 var(--f-text); }
.schritte h3 { font-size: 1.4rem; }
.schritte p { color: var(--text-leise); }

/* Für wen */
.wer2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 52rem) { .wer2 { grid-template-columns: minmax(0, 1fr); } }
.wer2 > div { background: #fff; border: 1px solid var(--karte-rand); border-radius: 14px; padding: var(--s-6); }
.wer2 h3 { margin-bottom: var(--s-4); }
.wer2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.wer2 li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-3); color: var(--text); }
.wer2 li::before { content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.35rem; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }

/* Belege */
.belege2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (max-width: 60rem) { .belege2 { grid-template-columns: minmax(0, 1fr); } }
.belege2 .siegel-reihe { margin-top: var(--s-5); }
.belege2 .siegel { width: 7.5rem; height: 7.5rem; font-size: 1.15rem; }
.belege2 .siegel.ja { color: #1F6B42; } .belege2 .siegel.nein { color: var(--rotstift); } .belege2 .siegel.vorschlag { color: var(--amtsgrau); }
.drv-karte { margin-top: var(--s-5); background: #fff; border: 1px solid var(--karte-rand); border-radius: 14px; padding: var(--s-5); color: var(--text-leise); }
.drv-karte b { color: var(--text); }

/* Preis */
.preis2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (max-width: 60rem) { .preis2 { grid-template-columns: minmax(0, 1fr); } }
.v2 .angebot { border: 2px solid var(--tinte); border-radius: 18px; box-shadow: var(--schatten-gross); }
.v2 .angebot .knopf { border-radius: 10px; }
.garantie2 { background: #fff; border: 1px solid var(--karte-rand); border-radius: 18px; padding: var(--s-6); display: grid; gap: var(--s-4); }
.garantie2 .tage { width: 6.5rem; height: 6.5rem; }
.garantie2 .zahlungen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.garantie2 .zahlungen span { font-size: 0.95rem; border: 1px solid var(--karte-rand); border-radius: 6px; padding: 0.25rem 0.6rem; color: var(--text-leise); }

/* Fragen v2 */
.v2 .fragen summary { font: 700 1.3rem/1.3 var(--f-text); }
.v2 .fragen details:first-of-type { border-top: 1px solid var(--karte-rand); }

/* Schluss */
.schluss2 { text-align: center; }
.schluss2 .huelle { display: grid; justify-items: center; gap: var(--s-5); }
.schluss2 h2 { max-width: 22ch; }
.schluss2 p { color: var(--auf-tinte-leise); font-size: 1.25rem; max-width: 50ch; }

/* Post-Check als ein Formular (wie ein Rechner) */
.unterzeile { margin-top: var(--s-4); font-size: 1.3rem; color: var(--text-leise); line-height: 1.55; max-width: 46ch; }
.pc-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); }
@media (max-width: 34rem) { .pc-raster { grid-template-columns: minmax(0, 1fr); } }
.pc-feld { display: grid; gap: 0.35rem; align-content: start; }
.pc-feld label { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.pc-feld label span { font-weight: 400; color: var(--text-leise); }
.pc-feld select, .pc-feld input { font: 500 1.15rem var(--f-text); color: var(--text); min-height: 3.4rem; padding: 0.5rem 0.8rem; border: 2px solid var(--karte-rand); border-radius: 10px; background: #fff; width: 100%; }
.pc-feld select:focus-visible, .pc-feld input:focus-visible { outline: 3px solid var(--frist); outline-offset: 1px; border-color: var(--tinte); }
.pc-feld small { color: var(--text-leise); font-size: 0.95rem; line-height: 1.4; }
.pc-breit { margin-top: var(--s-4); }
.pc-haken { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-4); font-size: 1.05rem; color: var(--text-leise); cursor: pointer; }
.pc-haken input { width: 1.3rem; height: 1.3rem; accent-color: var(--tinte); }
.pc-fehler { margin-top: var(--s-4); color: var(--rotstift); font-weight: 600; }
.pc-los { width: 100%; margin-top: var(--s-5); }
.pc-fuss { margin-top: var(--s-3); text-align: center; font-size: 0.95rem; color: var(--text-leise); }
.pc-ergebnis:focus { outline: none; }
.pc-angaben { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-3) var(--s-4); background: var(--band); border-radius: 10px; margin-bottom: var(--s-5); font-weight: 600; }
.pc-block { margin-bottom: var(--s-6); }
.pc-block h3, .pc-titel { font-size: 1.4rem; margin-bottom: var(--s-3); }
.pc-tabelle { border-top: 2px solid var(--tinte); }
.pc-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--karte-rand); align-items: baseline; }
.pc-zeile .pc-weg { color: var(--text-leise); font-size: 1rem; }
.pc-zeile b { font-size: 1.25rem; text-align: right; white-space: nowrap; }
.pc-zeile small { grid-column: 1 / -1; color: var(--text); font-size: 1rem; }
.pc-hinweis-rot { margin-top: var(--s-4); background: #FDF0EF; border: 1px solid #F3C9C6; border-radius: 10px; padding: var(--s-3) var(--s-4); color: #7F1D1D; }
.pc-klein { margin-top: var(--s-3); font-size: 0.95rem; color: var(--text-leise); }
.pc-klein a { color: inherit; }

/* Ergebnis in voller Breite */
.hero2.mit-ergebnis .huelle { grid-template-columns: minmax(0, 1fr); }
.hero2.mit-ergebnis .hero-vorschau { display: none; }
.hero2.mit-ergebnis .check-karte { max-width: 56rem; }
.hero2.mit-ergebnis h1 { max-width: none; }
/* Briefchen im Kopfbereich */
.hero-vorschau .brief-klein .brief { padding-top: 2.1rem; }
.hero-vorschau .brief-klein .stempel { left: auto; right: 0.8rem; top: 0.6rem; font-size: 0.6rem; }

/* Kauf-Dialog */
.kauf-dialog { width: min(34rem, calc(100vw - 2rem)); border: 0; border-radius: 18px; padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); box-shadow: 0 30px 80px -20px rgb(19 30 48 / 0.6); color: var(--text); }
.kauf-dialog::backdrop { background: rgb(19 30 48 / 0.55); }
.kauf-dialog h2 { font-size: 1.7rem; padding-right: 2.5rem; }
.kauf-zu { position: absolute; top: 0.75rem; right: 0.75rem; }
.kauf-zu button { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--band); font: 400 1.8rem/1 var(--f-text); color: var(--text); cursor: pointer; }
.kauf-preis { margin: var(--s-3) 0 var(--s-4); color: var(--text-leise); }
.kauf-preis b { font: 800 2.4rem/1 var(--f-text); color: var(--tinte); margin-right: 0.4rem; letter-spacing: -0.02em; }
.kauf-liste { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.kauf-liste li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--s-2); }
.kauf-liste li::before { content: "✓"; color: var(--gruen); font-weight: 700; }
.kauf-los { width: 100%; }
.kauf-hinweis { margin-top: var(--s-3); color: var(--rotstift); font-weight: 600; }
.kauf-klein { margin-top: var(--s-3); font-size: 0.98rem; color: var(--text-leise); text-align: center; }