/* Ratgeber-Seiten (Lesen): Vega-Welt aus styles.css, dazu Glas nur dort, wo Inhalt dahinter
   durchscheint (schwebendes Inhaltsverzeichnis, Kurzantwort, Abschluss) und ein Fokus-Moment
   beim Titel: der Adlerblick stellt scharf. */
.rg{--glas:rgba(14,36,74,.42);--glasrand:rgba(170,215,255,.16);--lesen:#C9D6EA}

/* Licht im Hintergrund: fest, damit das Glas beim Scrollen etwas zum Brechen hat */
.rg-licht{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 620px at 88% -6%,rgba(30,99,214,.42),transparent 62%),
  radial-gradient(700px 520px at -8% 38%,rgba(11,46,107,.75),transparent 66%),
  radial-gradient(520px 380px at 72% 78%,rgba(31,200,255,.10),transparent 70%),
  var(--abyss)}
html{background:var(--abyss)}
.rg{background:transparent}

.rg-fortschritt{position:fixed;top:0;left:0;right:0;height:2px;z-index:60}
.rg-fortschritt i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--blue),var(--cyan))}

/* Glas: echtes Material mit Lichtkante oben und weichem, versetztem Schatten */
.glas{background:var(--glas);border:1px solid var(--glasrand);border-radius:16px;
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px -24px rgba(0,0,0,.7)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glas{background:rgba(10,33,72,.94)}}

/* Kopf */
.rg-kopf{max-width:1120px;margin:0 auto;padding:132px 28px 20px}
.rg-pfad{list-style:none;display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--mut)}
.rg-pfad li+li::before{content:"›";margin-right:8px;opacity:.6}
.rg-pfad a{transition:color .2s}.rg-pfad a:hover{color:var(--ink)}
.rg-titel{margin-top:22px;font-size:clamp(34px,5vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.03em;
  max-width:18ch;text-wrap:balance}
.rg-meta{display:flex;gap:18px;margin-top:20px;font-family:var(--m);font-size:12.5px;color:var(--mut)}
.rg-kurz{margin-top:40px;max-width:820px;padding:26px 30px}
.rg-kurz p{font-size:clamp(17px,1.5vw,19.5px);line-height:1.65;color:#E4EDFA}
.rg-kurz b{color:var(--cyan)}

/* Der eine Moment: Titel und Kurzantwort werden scharf gestellt */
@media (prefers-reduced-motion:no-preference){
  .rg-titel{animation:scharf 1.1s var(--ease) both}
  .rg-kurz{animation:scharf 1.1s .18s var(--ease) both}
  @keyframes scharf{from{filter:blur(14px);opacity:.25;transform:translateY(10px)}to{filter:blur(0);opacity:1;transform:none}}
}

/* Raster: Text links, schwebendes Inhaltsverzeichnis rechts */
.rg-raster{max-width:1120px;margin:0 auto;padding:40px 28px 90px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:64px;align-items:start}
.rg-inhalt{order:2;position:sticky;top:96px;padding:20px 20px 16px;display:flex;flex-direction:column;gap:2px}
.rg-inhalt b{font-size:13px;letter-spacing:.02em;margin-bottom:8px}
.rg-inhalt a{font-size:14px;color:var(--mut);padding:7px 10px;border-radius:9px;transition:color .2s,background .2s}
.rg-inhalt a:hover{color:var(--ink);background:rgba(234,241,251,.05)}
.rg-inhalt a.an{color:var(--ink);background:rgba(31,200,255,.10)}

/* Lesetext */
.rg-text{order:1;max-width:70ch;min-width:0;color:var(--lesen)}
.rg-text p,.rg-text li{font-size:18px;line-height:1.75}
.rg-text p+p{margin-top:16px}
.rg-intro{font-size:20px!important;color:#E4EDFA}
.rg-text h2{color:var(--ink);font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:800;
  margin:72px 0 18px;text-wrap:balance;scroll-margin-top:96px}
.rg-text b{color:var(--ink)}
.rg-h3{color:var(--ink);font-size:21px;font-weight:800;letter-spacing:-.01em;margin:34px 0 4px}
.rg-hinweis{font-size:15px!important;color:var(--mut)}

.rg-tabelle{margin:24px 0;overflow-x:auto;border:1px solid var(--linesoft);border-radius:14px;background:rgba(10,33,72,.35)}
.rg-tabelle table{border-collapse:collapse;width:100%;min-width:620px}
.rg-tabelle th,.rg-tabelle td{padding:14px 16px;text-align:left;font-size:15.5px;line-height:1.5;border-bottom:1px solid var(--linesoft);vertical-align:top}
.rg-tabelle tr:last-child>*{border-bottom:0}
.rg-tabelle thead th{font-size:13px;font-weight:700;color:var(--mut)}
.rg-tabelle tbody th{color:var(--ink);font-weight:700}
.rg-tabelle .zahl{font-family:var(--m);font-size:13.5px;color:#BFD3F0}
.rg-vergleich .vega{background:rgba(30,99,214,.22);color:#fff;font-weight:700}
.rg-vergleich thead .vega{color:var(--cyan)}

.rg-zitat{margin:22px 0;padding:24px 28px}
.rg-zitat p{font-size:19px!important;line-height:1.7;color:#E4EDFA;font-style:italic}
.rg-link{color:var(--cyan);text-decoration:underline;text-decoration-color:rgba(31,200,255,.4);text-underline-offset:3px}
.rg-link:hover{text-decoration-color:var(--cyan)}

/* Rechner: Eingaben links, Ergebnisse groß darunter */
.rg-rechner{margin:24px 0;padding:26px 26px 20px}
.rg-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.rg-felder label{display:flex;flex-direction:column;gap:7px;font-size:14.5px;font-weight:600;color:#C9D6EA}
.rg-felder input{font:600 18px var(--m);color:var(--ink);background:rgba(6,20,40,.6);border:1px solid rgba(170,215,255,.22);
  border-radius:10px;padding:11px 13px;min-height:46px;transition:border-color .2s,background .2s;-moz-appearance:textfield}
.rg-felder input:hover{border-color:rgba(31,200,255,.45)}
.rg-felder input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent;background:rgba(6,20,40,.85)}
.rg-ergebnis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--linesoft)}
.rg-ergebnis div{display:flex;flex-direction:column;gap:4px}
.rg-ergebnis span{font-size:13.5px;color:var(--mut)}
.rg-ergebnis output{font:600 clamp(22px,2.4vw,30px) var(--m);color:var(--cyan);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rg-rechner-hinweis{margin-top:14px;font-size:13.5px!important;color:var(--mut)}

/* Beispielrechnung als Kette */
.rg-rechnung{margin:28px 0;display:grid;grid-template-columns:1fr 48px 1fr 48px 1fr;align-items:center;gap:10px}
.rg-rechnung .schritt{padding:20px 18px;border-radius:14px;border:1px solid var(--linesoft);background:rgba(10,33,72,.4);height:100%}
.rg-rechnung .ziel{border-color:rgba(31,200,255,.4);background:rgba(30,99,214,.2)}
.rg-rechnung .wert{display:block;font-family:var(--m);font-weight:600;font-size:clamp(28px,3vw,38px);color:var(--ink);letter-spacing:-.02em}
.rg-rechnung .ziel .wert{color:var(--cyan)}
.rg-rechnung .was{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--mut)}
.rg-rechnung .pfeil{width:48px;color:var(--cyan);opacity:.7}
.rg-rechnung figcaption{grid-column:1/-1;font-size:12.5px;color:var(--mut);font-family:var(--m)}

.rg-risiken{margin-top:10px;padding-left:0;list-style:none;counter-reset:r}
.rg-risiken li{counter-increment:r;position:relative;padding:16px 0 16px 52px;border-bottom:1px solid var(--linesoft)}
.rg-risiken li::before{content:counter(r);position:absolute;left:0;top:16px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--m);font-size:14px;color:var(--cyan);border:1px solid rgba(31,200,255,.4)}

.rg-liste{margin-top:14px;padding-left:20px}
.rg-liste li{margin-top:10px}
.rg-liste li::marker{color:var(--cyan)}

.rg-haken{list-style:none;margin-top:14px;display:grid;gap:10px}
.rg-haken li{position:relative;padding-left:36px}
.rg-haken li::before{content:"";position:absolute;left:2px;top:7px;width:20px;height:20px;border-radius:6px;
  background:rgba(31,200,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%231FC8FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

.rg-bild{margin:28px 0;padding:10px;overflow:hidden}
.rg-bild img{display:block;width:100%;height:auto;border-radius:10px}
.rg-bild figcaption{font-size:13px;color:var(--mut);padding:10px 6px 2px}

.rg-faust{margin-top:18px;padding:18px 20px;border-radius:14px;background:rgba(201,162,74,.08);border:1px solid rgba(201,162,74,.28)}
.rg-faust b{color:#E3C77F}

.rg-fragen{margin-top:10px;display:grid;gap:10px}
.rg-fragen details{border:1px solid var(--linesoft);border-radius:14px;background:rgba(10,33,72,.35);transition:background .3s,border-color .3s}
.rg-fragen details[open]{background:var(--glas);border-color:var(--glasrand)}
.rg-fragen summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;font-weight:700;color:var(--ink);font-size:17px;position:relative}
.rg-fragen summary::-webkit-details-marker{display:none}
.rg-fragen summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.rg-fragen details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.rg-fragen details p{padding:0 20px 20px;font-size:16.5px}

.rg-cta{margin-top:80px;padding:38px 36px}
.rg-cta h2{margin:0 0 12px;font-size:clamp(24px,2.4vw,30px)}
.rg-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.rg-knopf{display:inline-block;padding:15px 26px;border-radius:12px;background:var(--blue);color:#fff;font-weight:700;font-size:16px;
  box-shadow:0 12px 30px -12px rgba(30,99,214,.8);transition:transform .25s var(--ease),background .25s}
.rg-knopf:hover{background:var(--blue3);transform:translateY(-1px)}
.rg-knopf2{display:inline-block;padding:15px 22px;border-radius:12px;border:1px solid rgba(31,200,255,.35);color:var(--ink);font-weight:700;font-size:16px;transition:background .25s}
.rg-knopf2:hover{background:rgba(31,200,255,.1)}
.rg-stand{margin-top:28px;font-size:13.5px!important;color:var(--mut)}

@media (max-width:980px){
  .rg-raster{grid-template-columns:minmax(0,1fr);gap:0;padding-top:24px}
  .rg-inhalt{display:none}
  .rg-rechnung{grid-template-columns:1fr}
  .rg-rechnung .pfeil{transform:rotate(90deg);justify-self:center;width:32px}
}
@media (max-width:600px){
  .rg-felder,.rg-ergebnis{grid-template-columns:1fr}
  .rg-rechner{padding:20px 18px 16px}
  .rg-tabelle tbody th,.rg-tabelle thead th:first-child{position:sticky;left:0;z-index:1;background:#0B1F42;min-width:132px}
  .rg-kopf{padding:108px 16px 10px}
  .rg-raster{padding:16px 16px 70px}
  .rg-kurz{padding:20px}
  .rg-text p,.rg-text li{font-size:17px}
  .rg-cta{padding:28px 22px}
}