/* Themenseiten: Berufsunfähigkeit, Altersvorsorgedepot, Über mich. Baut auf site.css auf. */

.brotkrumen{font-size:13px;color:var(--graphit);padding-top:24px}
.brotkrumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.brotkrumen li+li::before{content:"/";margin-right:8px;color:var(--stein)}
.brotkrumen a{text-decoration:none}
.brotkrumen a:hover{text-decoration:underline}

.r-hero{padding:40px 0 var(--abstand)}
@media (min-width:900px){.r-hero{padding-top:64px}}
.r-hero .wrap{display:grid;gap:40px}
@media (min-width:1100px){.r-hero .wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:80px;align-items:end}}
.r-hero h1{font-size:clamp(40px,6.4vw,88px)}
.r-hero h1 .bronze{color:var(--bronze)}
.r-hero .lead{margin:28px 0 32px}
.r-hero .seitenzahl{border-top:1px solid var(--anthrazit);padding-top:20px}
.r-hero .seitenzahl .zahl{font-size:clamp(48px,5.6vw,80px);color:var(--bronze);display:block;white-space:nowrap}
.r-hero .seitenzahl p{margin:12px 0 0;color:var(--graphit);font-size:15px}

/* Antwort in 40 Worten (für Suchmaschinen und Eilige) */
.kurz{border-left:3px solid var(--bronze);background:var(--papier);padding:28px 32px;max-width:860px}
.kurz b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-tief);margin-bottom:10px}
.kurz p{margin:0;font-size:19px;line-height:1.5;max-width:none}

/* Rechner auf Themenseiten */
.panel{display:grid;gap:40px;background:var(--papier);border:1px solid var(--stein);padding:28px}
@media (min-width:1000px){.panel{grid-template-columns:minmax(0,1fr) 420px;gap:64px;padding:48px}}
.feld-r{margin-bottom:32px}
.feld-r:last-child{margin-bottom:0}
.feld-r .kopf-r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px}
.feld-r label{font-weight:600;font-size:17px}
.feld-r small{display:block;font-size:14px;color:var(--graphit);font-weight:400;margin-top:2px}
.wert-eingabe{position:relative;width:150px;flex:none}
.wert-eingabe input{width:100%;min-height:48px;padding:0 36px 0 12px;border:1px solid var(--stein);border-radius:2px;background:var(--offwhite);font:inherit;font-size:19px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--anthrazit)}
.wert-eingabe input:focus{outline:none;border-color:var(--bronze)}
.wert-eingabe span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--graphit);font-size:15px;pointer-events:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--anthrazit) var(--p,50%),var(--stein) var(--p,50%))}
input[type=range]::-moz-range-track{height:2px;background:var(--stein)}
input[type=range]::-moz-range-progress{height:2px;background:var(--anthrazit)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--papier);border:2px solid var(--anthrazit);margin-top:-11px;cursor:grab;transition:border-color .2s}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--papier);border:2px solid var(--anthrazit);cursor:grab}
input[type=range]:focus-visible::-webkit-slider-thumb{border-color:var(--bronze)}
.skala{display:flex;justify-content:space-between;font-size:12px;color:var(--graphit);margin-top:4px}

.ergebnis-karte{background:var(--anthrazit);color:var(--offwhite);padding:32px;align-self:start}
@media (min-width:1000px){.ergebnis-karte{padding:40px;position:sticky;top:104px}}
.ergebnis-karte .etikett{color:var(--bronze-hell);margin-bottom:16px}
.ergebnis-karte .etikett::before{background:var(--bronze-hell)}
.gross{display:flex;align-items:baseline;gap:10px;font-stretch:85%;font-weight:800;font-variant-numeric:tabular-nums;line-height:.95;flex-wrap:wrap}
.gross b{font-size:clamp(56px,6.4vw,84px);color:var(--bronze-hell);font-weight:800}
.gross small{font-size:20px;color:var(--offwhite);font-weight:700}
.gross.luecke b{color:#E8A49B}
.ergebnis-karte .satz{margin:16px 0 0;font-size:16px;color:#C9C9C2;max-width:none}
.ergebnis-karte .knopfreihe{margin-top:28px;flex-direction:column;align-items:stretch}
.ergebnis-karte .knopf{width:100%}
.ergebnis-karte .klein{color:#A9A9A2;margin:16px 0 0}
.vergleich{margin-top:28px;padding-top:24px;border-top:1px solid var(--stein-dunkel);display:grid;gap:14px}
.vergleich-zeile{display:grid;grid-template-columns:132px 1fr 76px;gap:12px;align-items:center;font-size:13px}
.vergleich-zeile .bn{color:#D6D6D1}
.vergleich-zeile .bw{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.vergleich-zeile .bahn{height:12px;background:var(--anthrazit-2);border-radius:2px;position:relative}
.vergleich-zeile .bahn i{position:absolute;left:0;top:0;bottom:0;background:#D6D6D1;border-radius:0 4px 4px 0;transition:width .6s var(--ease)}
.vergleich-zeile.fehlt .bw{color:#E8A49B}
.vergleich-zeile.fehlt .bahn i{background:repeating-linear-gradient(135deg,#E8A49B 0 3px,transparent 3px 7px)}
.vergleich-zeile.zulage .bahn i{background:var(--bronze-hell)}

.annahme{margin-top:24px;font-size:14px;color:var(--graphit);max-width:860px}

/* Wege-Karten und Punkte */
.karten{display:grid;gap:1px;background:var(--stein);border:1px solid var(--stein)}
@media (min-width:760px){.karten{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.karten.vier{grid-template-columns:repeat(4,1fr)}.karten.drei{grid-template-columns:repeat(3,1fr)}}
.karte{background:var(--offwhite);padding:32px;display:flex;flex-direction:column;gap:12px}
.karte .nr{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--bronze-tief)}
.karte h3{font-size:22px}
.karte p{font-size:16px;color:var(--graphit);margin:0}
.karte .pfeil{margin-top:auto;align-self:flex-start;font-size:15px}
.karte--dunkel{background:var(--anthrazit);color:var(--offwhite)}
.karte--dunkel p{color:#C9C9C2}

/* Vergleichstabelle */
.tabelle-wrap{overflow-x:auto;border-top:1px solid var(--anthrazit)}
table.vergleichstab{width:100%;border-collapse:collapse;font-size:16px}
.vergleichstab th,.vergleichstab td{text-align:left;padding:18px 16px 18px 0;border-bottom:1px solid var(--stein);vertical-align:top}
.vergleichstab thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphit);font-weight:700}
.vergleichstab tbody th{font-weight:700;width:30%}
.vergleichstab td{color:var(--graphit)}

/* Zitat */
.zitat-gross{max-width:900px}
.zitat-gross blockquote{margin:0;font-size:clamp(22px,2.6vw,32px);line-height:1.35}
.zitat-gross figcaption{margin-top:20px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphit)}
.zitat-gross .sterne{color:var(--bronze);letter-spacing:3px;display:block;margin-bottom:16px}

/* Über mich */
.ich-hero{padding:40px 0 var(--abstand)}
.ich-hero .wrap{display:grid;gap:48px}
@media (min-width:1000px){.ich-hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:96px;align-items:end}}
.ich-hero h1{font-size:clamp(38px,5.6vw,76px)}
.ich-hero figure{margin:0}
.ich-hero img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#dcdcd9}
.ich-hero figcaption{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphit);padding-top:14px;margin-top:14px;border-top:1px solid var(--bronze)}
.liste-linien{list-style:none;margin:0;padding:0;border-top:1px solid var(--anthrazit)}
.liste-linien li{display:grid;grid-template-columns:1fr;gap:4px;padding:20px 0;border-bottom:1px solid var(--stein)}
@media (min-width:760px){.liste-linien li{grid-template-columns:280px 1fr;gap:32px}}
.liste-linien b{font-weight:700}
.liste-linien span{color:var(--graphit)}
.platzhalter{background:#FFF4C2;outline:2px dashed #C9A227;padding:16px 20px}
.zwei-spalten{display:grid;gap:48px}
@media (min-width:1000px){.zwei-spalten{grid-template-columns:.8fr 1.2fr;gap:96px}}
@media (max-width:999px){
  .panel{padding:20px}
  .panel .ergebnis-karte{margin:0 -20px -20px;padding:28px 20px}
}
@media (max-width:560px){
  .vergleich-zeile{grid-template-columns:1fr auto;row-gap:6px}
  .vergleich-zeile .bahn{grid-column:1/-1;grid-row:2}
}
.hinweis-feld{background:var(--sand);border-left:3px solid var(--bronze);padding:14px 16px;font-size:15px;margin:8px 0 0}
.hinweis-feld[hidden]{display:none}
.feld-r[hidden]{display:none}
.druckkopf-u,.druckfuss{display:none}
@media print{
  .seite-uebersicht>*:not(main),.seite-uebersicht main>*:not(#meine),.seite-uebersicht .nicht-drucken,.seite-uebersicht #meine .lead{display:none!important}
  .seite-uebersicht{background:#fff}
  .seite-uebersicht #meine{padding:0}
  .druckkopf-u{display:flex!important;justify-content:space-between;border-bottom:1.5pt solid #000;padding-bottom:8pt;margin-bottom:16pt;font-size:10pt}
  .druckfuss{display:block!important;margin-top:16pt;font-size:8pt;border-top:.5pt solid #000;padding-top:6pt}
  .seite-uebersicht a{color:#000;text-decoration:none}
}
@media (max-width:700px){
  .vergleichstab.werte thead{display:none}
  .vergleichstab.werte tr{display:block;padding:16px 0;border-bottom:1px solid var(--stein)}
  .vergleichstab.werte th,.vergleichstab.werte td{display:block;border:0;padding:2px 0;width:auto}
  .vergleichstab.werte td:empty{display:none}
  .vergleichstab.werte td:nth-of-type(1),.vergleichstab.werte td:nth-of-type(2){display:inline-block;margin-right:16px;color:var(--anthrazit);font-weight:600}
}
@media (max-width:700px){.vergleichstab.werte td[data-l]::after{content:" " attr(data-l);font-weight:400;color:var(--graphit)}}
@media (max-width:700px){.vergleichstab.werte td:empty{display:none!important}}
.vergleichstab.regeln td.grundlage{font-size:13px;white-space:nowrap;color:var(--bronze-tief)}
.vergleichstab.regeln tbody th{width:24%}
@media (max-width:700px){
  .vergleichstab.regeln thead{display:none}
  .vergleichstab.regeln tr{display:block;padding:16px 0;border-bottom:1px solid var(--stein)}
  .vergleichstab.regeln th,.vergleichstab.regeln td{display:block;border:0;padding:2px 0;width:auto}
  .vergleichstab.regeln td.grundlage{white-space:normal;margin-top:4px}
}
.vergleichstab .pro{font-weight:400;color:var(--graphit);font-size:13px}
/* Werte-Tabelle mit zwei Jahren */
.vergleichstab.werte td.j27{color:var(--anthrazit)}
@media (max-width:700px){
  .vergleichstab.werte td:nth-of-type(1),.vergleichstab.werte td:nth-of-type(2){display:block;margin:6px 0 0;font-weight:600}
  .vergleichstab.werte td:nth-of-type(1)::before{content:"2026: ";color:var(--bronze-tief);font-weight:700}
  .vergleichstab.werte td.j27::before{content:"2027, voraussichtlich: ";color:var(--bronze-tief);font-weight:700}
  .vergleichstab.werte td:nth-of-type(1) br,.vergleichstab.werte td:nth-of-type(2) br{display:none}
  .vergleichstab.werte .pro::after{content:""}
  .vergleichstab.werte td:nth-of-type(3){margin-top:8px;font-weight:400}
}
@media (min-width:701px){
  .vergleichstab.werte tbody th{width:24%}
  .vergleichstab.werte td:nth-of-type(1),.vergleichstab.werte td:nth-of-type(2){white-space:nowrap;width:1%;padding-right:40px;color:var(--anthrazit);font-weight:600;font-variant-numeric:tabular-nums}
}
@media (max-width:700px){.vergleichstab.werte td:nth-of-type(1) br,.vergleichstab.werte td:nth-of-type(2) br{display:inline}}
.mehr-thema{margin-top:12px;font-size:15px}.mehr-thema a{font-weight:600}