/* NEXUS Ratgeber – Erweiterungen (rgx): X im Hero, Karteikarten-Fragen, Rechner, Lesefortschritt, Stand-Plakette. Ruhig und seriös. */
:root{--rgx-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- X dezent im Hero-Hintergrund ---------- */
.rgx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.rgx-x{position:absolute;top:50%;aspect-ratio:1/1;overflow:visible;transform:translate(-50%,-50%) rotate(4.8deg)}
.rgx-x.is-index{left:74%;width:clamp(620px,64vw,980px)}
.rgx-x.is-article{left:80%;width:clamp(560px,56vw,860px)}
.rgx-beam{stroke-width:1.6;vector-effect:non-scaling-stroke;animation:rgxFade 1.6s ease .2s both}
.rgx-slash{fill:rgba(58,140,255,.05);stroke:rgba(140,190,255,.1);stroke-width:1.2;vector-effect:non-scaling-stroke;animation:rgxFade 1.6s ease .5s both}
.rgx-sh polygon{stroke:rgba(170,205,255,.16);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rgx-sh-a{animation:rgxInA 1.9s var(--rgx-ease) .9s both}
.rgx-sh-b{animation:rgxInB 1.9s var(--rgx-ease) .9s both}
.rgx-pa{animation:rgxDriftA 16s ease-in-out 3s infinite}
.rgx-pb{animation:rgxDriftB 16s ease-in-out 3s infinite}
@keyframes rgxFade{from{opacity:0}}
@keyframes rgxInA{from{opacity:0;transform:translate(-50px,-50px)}}
@keyframes rgxInB{from{opacity:0;transform:translate(50px,50px)}}
@keyframes rgxDriftA{50%{transform:translate(-8px,-8px)}}
@keyframes rgxDriftB{50%{transform:translate(8px,8px)}}
.rg-hero .container{position:relative;z-index:1}

/* ---------- Übersicht: Fragen als Karteikarten ---------- */
.rg-questions{border-left:0;display:grid;gap:12px;perspective:900px}
.rg-questions li+li{margin-top:0}
.rg-questions li{animation:rgxCard .8s var(--rgx-ease) both}
.rg-questions li:nth-child(1){animation-delay:.35s}
.rg-questions li:nth-child(2){animation-delay:.5s}
.rg-questions li:nth-child(3){animation-delay:.65s}
.rg-questions a,.rg-questions span{padding:18px 22px 16px 24px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(156,200,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,border-color .3s,transform .35s var(--rgx-ease),color .2s}
.rg-questions a::before,.rg-questions span::before{top:16px;bottom:16px;left:0;border-radius:2px}
.rg-questions a{background:linear-gradient(135deg,rgba(58,140,255,.16),rgba(255,255,255,.05));border-color:rgba(156,200,255,.4);padding-right:56px}
.rg-questions a::before{background:var(--rg-ice)}
.rg-questions a::after{content:"";position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:rgba(156,200,255,.16) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%239CC8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transition:transform .3s var(--rgx-ease),background-color .3s}
.rg-questions a:hover,.rg-questions a:focus-visible{transform:translateX(4px);border-color:rgba(156,200,255,.7)}
.rg-questions a:hover::after,.rg-questions a:focus-visible::after{transform:translateX(3px);background-color:rgba(156,200,255,.3)}
.rg-questions span{color:#AFC0D3;border-style:dashed;border-color:rgba(156,200,255,.18)}
@keyframes rgxCard{from{opacity:0;transform:translateY(18px) rotateX(8deg)}}

/* ---------- Übersicht: Artikelverzeichnis ---------- */
.rg-item{position:relative}
.rg-item::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--blau),#9CC8FF);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--rgx-ease)}
.rg-item:not(.is-planned):hover::after,.rg-item:not(.is-planned):focus-within::after{transform:scaleX(1)}
.rg-item:not(.is-planned) .rg-topic{position:relative;padding-left:14px}
.rg-item:not(.is-planned) .rg-topic::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--blau);box-shadow:0 0 0 4px rgba(10,108,240,.14)}
.rg-meta a{display:inline-flex;align-items:center;gap:8px}
.rg-meta a::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transition:transform .3s var(--rgx-ease)}
.rg-item:hover .rg-meta a::after{transform:translateX(3px)}
.rgx-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--rgx-ease),transform .7s var(--rgx-ease)}
.rgx-reveal.is-in{opacity:1;transform:none}

/* ---------- Übersicht: „So schreiben wir“ dunkel (Hell-/Dunkel-Wechsel) ---------- */
.rgx-dark.rg-principles{position:relative;overflow:hidden;background:radial-gradient(ellipse at 12% 10%,rgba(10,108,240,.18),transparent 50%),linear-gradient(160deg,#0D1A2B,#0A1523);color:#fff}
.rgx-dark h2{color:#fff}
.rgx-dark h2 em{color:#9CC8FF}
.rgx-dark .eyebrow{color:#9CC8FF}
.rgx-dark dl{counter-reset:rgx}
.rgx-dark dl>div{position:relative;padding:0 0 26px 58px;border-bottom:1px solid rgba(255,255,255,.1)}
.rgx-dark dl>div:last-child{border-bottom:0;padding-bottom:0}
.rgx-dark dl>div::before{counter-increment:rgx;content:counter(rgx);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;border:1px solid rgba(156,200,255,.35);color:#9CC8FF;font-weight:700;font-size:.95rem}
.rgx-dark dt{color:#fff}
.rgx-dark dd{color:#B8C8DA}

/* ---------- Artikel: Lesefortschritt ---------- */
.rgx-progress{position:fixed;left:0;right:0;top:var(--header-h);height:3px;z-index:60;pointer-events:none;background:transparent}
.rgx-progress i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--blau),#9CC8FF)}
.rg-toc ol{position:relative}
.rg-toc ol::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:100%;background:var(--blau);opacity:.35;transform-origin:top;transform:scaleY(var(--rgx-p,0))}

/* ---------- Artikel: Stand-Plakette im Hero ---------- */
.rg-article-hero .rg-hero-grid{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.rgx-seal{position:relative;display:grid;place-items:center;align-content:center;width:150px;height:150px;margin-right:clamp(0px,4vw,60px);border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(58,140,255,.18),rgba(13,26,43,.35) 70%);color:#fff;animation:rgxSeal 1s var(--rgx-ease) .7s both}
.rgx-seal svg{position:absolute;inset:0;width:100%;height:100%}
.rgx-seal-o{fill:none;stroke:rgba(156,200,255,.4);stroke-width:1;stroke-dasharray:2 5}
.rgx-seal-i{fill:none;stroke:rgba(156,200,255,.25);stroke-width:1}
.rgx-seal-ok{fill:none;stroke:#9CC8FF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:rgxDash .7s ease 1.5s forwards}
.rgx-seal-k{position:relative;margin-top:26px;font-size:.78rem;color:#8DA6C3}
.rgx-seal-v{position:relative;font-weight:700;font-size:.95rem;line-height:1.2;text-align:center;max-width:8em}
@keyframes rgxSeal{from{opacity:0;transform:scale(.85) rotate(-10deg)}}
@keyframes rgxDash{to{stroke-dashoffset:0}}

/* ---------- Artikel: „Das Wichtigste in Kürze“ ---------- */
.rg-summary{position:relative;background:#fff;border:1px solid var(--rg-rule);box-shadow:0 24px 50px rgba(14,34,57,.07);overflow:hidden}
.rg-summary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--blau),#9CC8FF)}
.rg-summary ul{list-style:none;padding:0;counter-reset:rgs}
.rg-summary li{position:relative;padding:8px 0 8px 38px;border-top:1px solid #EEF2F6;margin:0}
.rg-summary li:first-child{border-top:0}
.rg-summary li::before{counter-increment:rgs;content:counter(rgs);position:absolute;left:0;top:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#EAF2FE;color:var(--blau);font-weight:700;font-size:.8rem}
.rg-summary.rgx-in li{animation:rgxLi .6s var(--rgx-ease) both}
.rg-summary.rgx-in li:nth-child(2){animation-delay:.12s}
.rg-summary.rgx-in li:nth-child(3){animation-delay:.24s}
.rg-summary.rgx-in li:nth-child(4){animation-delay:.36s}
@keyframes rgxLi{from{opacity:0;transform:translateX(-10px)}}

/* ---------- Artikel: Rechner ---------- */
.rgx-calc{margin:2em 0 2.2em;padding:26px clamp(18px,3vw,30px) 22px;border:1px solid var(--rg-rule);border-radius:20px;background:#fff;box-shadow:0 30px 60px rgba(14,34,57,.08);font-family:var(--sans);font-size:1rem;line-height:1.55;color:var(--tinte)}
.rgx-calc-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.rgx-calc-head strong{display:block;font-size:1.15rem}
.rgx-calc-head small{display:block;font-size:.86rem;color:var(--rg-muted);margin-top:2px}
.rgx-calc-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#EAF2FE}
.rgx-calc-ic svg{width:21px;height:21px;fill:none;stroke:var(--blau);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rgx-calc-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rgx-calc-in label{display:flex;flex-direction:column;justify-content:space-between;gap:8px;font-size:.84rem;font-weight:650;color:#3A4D63}
.rgx-field{position:relative;display:block}
.rgx-field input{width:100%;box-sizing:border-box;padding:11px 34px 11px 12px;border:1px solid #CFD9E4;border-radius:11px;background:#F8FAFC;font:600 1.02rem/1.2 var(--sans);color:var(--tinte);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.rgx-field input::-webkit-outer-spin-button,.rgx-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rgx-field input:focus{outline:none;border-color:var(--blau);background:#fff;box-shadow:0 0 0 4px rgba(10,108,240,.14)}
.rgx-field i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--rg-muted);font-weight:600}
.rgx-calc-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 6px}
.rgx-res{padding:14px 14px 12px;border-radius:14px;background:#F6F8FB;border:1px solid #E6ECF2}
.rgx-res span{display:block;font-size:.8rem;color:var(--rg-muted)}
.rgx-res strong{display:block;font-size:1.35rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:2px 0}
.rgx-res small{display:block;font-size:.76rem;color:var(--rg-muted);min-height:1.2em;font-variant-numeric:tabular-nums}
.rgx-res.is-pct strong{color:#B4561E}
.rgx-res.is-fee strong{color:var(--blau)}
.rgx-res.is-diff.is-good{background:#EFFAF5;border-color:#CDEEDD}
.rgx-res.is-diff.is-good strong{color:#1E8A5A}
.rgx-chart-wrap{margin-top:14px;overflow-x:auto}
.rgx-chart{display:block;width:100%;height:auto}
.rgx-chart text{font:11px var(--sans);fill:#6B7C90}
.rgx-chart .ax{stroke:#CFD9E4;stroke-width:1}
.rgx-chart .grid{stroke:#EEF2F6;stroke-width:1}
.rgx-chart .l-pct{fill:none;stroke:#D2733A;stroke-width:2.4;stroke-linecap:round}
.rgx-chart .l-fee{fill:none;stroke:var(--blau);stroke-width:2.4;stroke-linecap:round}
.rgx-chart .zone{fill:rgba(10,108,240,.05)}
.rgx-chart .now{stroke:#0D1A2B;stroke-width:1;stroke-dasharray:3 3}
.rgx-chart .dot-pct{fill:#D2733A;stroke:#fff;stroke-width:2}
.rgx-chart .dot-fee{fill:var(--blau);stroke:#fff;stroke-width:2}
.rgx-chart .even{fill:#fff;stroke:#0D1A2B;stroke-width:1.6}
.rgx-chart .lbl-pct{fill:#B4561E;font-weight:650}
.rgx-chart .lbl-fee{fill:var(--blau);font-weight:650}
.rgx-chart .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:rgxDraw 1s var(--rgx-ease) forwards}
@keyframes rgxDraw{to{stroke-dashoffset:0}}
.rgx-even{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:#0D1A2B;color:#DCE8F6;font-size:.92rem;font-variant-numeric:tabular-nums}
.rgx-even b{color:#fff}
.rgx-calc-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:.84rem;color:var(--rg-muted)}
.rgx-calc-foot p{margin:0;max-width:36em}
.rgx-reset{padding:8px 14px;border-radius:999px;border:1px solid #CFD9E4;background:#fff;font:600 .84rem var(--sans);color:var(--tinte);cursor:pointer}
.rgx-reset:hover,.rgx-reset:focus-visible{border-color:var(--blau);color:var(--blau)}

/* ---------- Fußnoten (für den finalen Artikeltext vorbereitet) ---------- */
.rg-prose sup.rg-fn a{text-decoration:none;font-family:var(--sans);font-size:.72em;font-weight:700;padding:0 2px;color:var(--blau)}
.rg-sources li:target{background:#FFF6E0;border-radius:6px}
.rg-sources .rgx-back{margin-left:6px;font-size:.85em;text-decoration:none}

@media(max-width:980px){
  .rg-article-hero .rg-hero-grid{grid-template-columns:minmax(0,1fr)}
  .rgx-seal{display:none}
  .rgx-x.is-index,.rgx-x.is-article{left:78%;width:clamp(460px,120vw,760px);opacity:.75}
}
@media(max-width:640px){
  .rgx-calc-in,.rgx-calc-out{grid-template-columns:minmax(0,1fr)}
  .rgx-res{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:10px}
  .rgx-res small{grid-column:1/-1}
  .rgx-x.is-index,.rgx-x.is-article{opacity:.55}
}
@media(prefers-reduced-motion:reduce){
  .rgx-x *,.rg-questions li,.rgx-seal,.rgx-seal *,.rg-summary li,.rgx-chart .draw{animation:none!important}
  .rgx-seal-ok{stroke-dashoffset:0}
  .rgx-chart .draw{stroke-dashoffset:0}
  .rgx-reveal{opacity:1;transform:none;transition:none}
}
/* Anpassung an das Corporate-System (corporate-colors/-refinement) für den dunklen Abschnitt */
.rgx-dark h2 em{color:var(--blau-hell)!important}
.rgx-dark .eyebrow{background:rgba(255,255,255,.055)!important;border-color:rgba(138,190,255,.24)!important;color:#CFE3FF!important}
/* Plakette sitzt im Knotenpunkt des X */
.rgx-seal{background:radial-gradient(circle at 50% 35%,#17365E,#0D1A2B 72%);box-shadow:0 0 0 8px rgba(13,26,43,.55),0 0 40px rgba(58,140,255,.25)}
.rg-prose .rg-summary h2{font-size:1.05rem;margin:0 0 10px;letter-spacing:0}