/* Ratgeber-Seiten (Janosch 26.10.2026): „nice formatiert, sehr ansprechend“.
   Redaktioneller Aufbau: dunkler Einstieg mit Gold, Inhaltsverzeichnis am Rand, nummerierte Schritte,
   kleine Grafiken, die sich beim Scrollen aufbauen. Farben wie Startseite. Keine Inline-Styles (CSP). */

:root{--rg-deep:#061520;--rg-ocean:#0b2436;--rg-sand:#f7f2e9;--rg-sand-2:#efe6d6;--rg-rose:#c4658c;--rg-gruen:#2f8463;
  --rg-serif:'Cormorant Garamond',Georgia,serif;--rg-ease:cubic-bezier(.16,1,.3,1)}
html.ww{scroll-padding-top:5.5rem}
/* Cormorant setzt sonst Mediävalziffern („01“ sähe aus wie „OI“): Zahlen immer als Versalziffern. */
/* Cormorant setzt sonst Mediävalziffern („01“ sähe aus wie „OI“). Regel steht am Dateiende, weil die
   font-Kurzschreibweise der Elemente font-variant-numeric zurücksetzt. */
.rg-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,5vw,4rem)}
@media (min-width:1440px){.rg-wrap{max-width:min(88vw,1440px)}} /* breite Bildschirme: mitwachsen (30.10.2026) */

/* ── Einstieg ── */
.rg-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem);
  background:radial-gradient(60rem 30rem at 85% -10%,rgba(201,169,110,.22),transparent 60%),
             radial-gradient(40rem 26rem at -10% 110%,rgba(47,93,140,.35),transparent 60%),
             linear-gradient(160deg,var(--rg-deep),var(--rg-ocean))}
.rg-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,110,.6),transparent)}
.rg-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
.rg-crumb{font-size:.82rem;color:rgba(255,255,255,.6);margin:0 0 1.6rem}
.rg-crumb a{color:rgba(255,255,255,.75);text-decoration:none;border-bottom:1px solid rgba(201,169,110,.35)}
.rg-crumb a:hover{color:var(--gold)}
.rg-eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem;
  padding:.35rem .8rem;border:1px solid rgba(201,169,110,.4);border-radius:99px}
.rg-hero h1{font:400 clamp(2.4rem,5.6vw,4.2rem)/1.04 var(--rg-serif);color:#fff;letter-spacing:-.01em;max-width:18ch}
.rg-hero h1 em{display:block;font-style:italic;font-weight:300;color:#e0c48c;margin-top:.35em;font-size:.62em;line-height:1.15}
/* Unterzeile unter der H1 der Übersicht (SEO-Audit 30.10.2026: nicht mehr Teil der H1), Optik wie h1 em */
.rg-hero .rg-h1-zusatz{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-style:italic;font-weight:300;color:#e0c48c;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.15;margin:-.2em 0 .6em}
.rg-lead{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.7;color:rgba(255,255,255,.82);max-width:38rem;margin:1.6rem 0 0}
.rg-meta{font-size:.82rem;color:rgba(255,255,255,.55);margin:1.4rem 0 0}
.rg-hero-zahlen{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.rg-hero-zahlen li{display:grid;gap:.45rem;padding:1.05rem 1.3rem 1.1rem;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(201,169,110,.22);backdrop-filter:blur(6px);
  animation:rg-auf .9s var(--rg-ease) both}
.rg-hero-zahlen li:nth-child(2){animation-delay:.12s}.rg-hero-zahlen li:nth-child(3){animation-delay:.24s}
.rg-hero-zahlen b{font:500 clamp(1.7rem,2.6vw,2.2rem)/1 var(--rg-serif);color:#e0c48c;white-space:nowrap}
.rg-hero-zahlen span{font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.78)}
@keyframes rg-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Aufbau mit Inhaltsverzeichnis ── */
.rg-layout{display:grid;grid-template-columns:15rem minmax(0,46rem);gap:clamp(2rem,5vw,5rem);justify-content:center;padding-top:3.5rem;padding-bottom:1rem}
.rg-toc{position:sticky;top:6rem;align-self:start}
.rg-toc-k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .9rem;font-weight:600}
.rg-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.rg-toc a{display:flex;gap:.7rem;padding:.45rem 0 .45rem 1rem;margin-left:-1px;border-left:2px solid transparent;font-size:.9rem;line-height:1.35;
  color:var(--ink-soft);text-decoration:none;transition:color .25s,border-color .25s}
.rg-toc a span{font:500 .82rem/1.6 var(--rg-serif);color:var(--gold-ink);min-width:1.2rem}
.rg-toc a:hover{color:var(--ink)}
.rg-toc a.an{color:var(--ink);border-left-color:var(--gold);font-weight:600}

.rg-artikel{min-width:0}
.rg-artikel p{font-size:1.0625rem;line-height:1.78;color:var(--ink);margin:0 0 1.1rem}
.rg-intro p:first-child{font:400 clamp(1.25rem,2vw,1.45rem)/1.55 var(--rg-serif);color:var(--ink)}
.rg-schritt{position:relative;padding-top:3.5rem;margin-top:1rem;border-top:1px solid var(--line)}
.rg-nr{font:300 clamp(3.4rem,6vw,4.6rem)/1 var(--rg-serif);color:transparent;-webkit-text-stroke:1px var(--gold);margin-bottom:.4rem;letter-spacing:.02em}
.rg-schritt h2,.rg-artikel > section > h2{font:500 clamp(1.7rem,3vw,2.3rem)/1.15 var(--rg-serif);margin:0 0 1.2rem;color:var(--ink)}
.rg-h3{font:600 1.15rem/1.3 var(--body);margin:2rem 0 .7rem;color:var(--ink)}
.rg-artikel strong{color:var(--ink);background:linear-gradient(transparent 62%,rgba(201,169,110,.32) 62%)}

.rg-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.6rem 0}
.rg-zahl{padding:1.2rem 1.3rem;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.rg-zahl b{display:block;font:500 2.4rem/1 var(--rg-serif);color:var(--gold-ink);margin-bottom:.4rem}
.rg-zahl span{display:block;font-size:.9rem;line-height:1.45;color:var(--ink-soft)}
.rg-gross{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem 1rem;margin:1.6rem 0;padding:1.4rem 1.5rem;border-radius:18px;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold)}
.rg-gross b{font:400 clamp(2.6rem,6vw,3.6rem)/1 var(--rg-serif);color:var(--gold-ink)}
.rg-gross span{color:var(--ink-soft);font-size:.98rem;line-height:1.5}

.rg-artikel .rg-grenze{font-size:.9rem;line-height:1.6;color:var(--ink-soft);padding:.2rem 0 .2rem 1rem;border-left:2px dotted var(--gold);margin:1.2rem 0}
.rg-grenze span{font-weight:600;color:var(--ink)}
.rg-du{position:relative;margin:1.5rem 0 1rem;padding:1.3rem 1.4rem 1.2rem;border-radius:18px;color:#fff;
  background:linear-gradient(150deg,var(--rg-deep),var(--rg-ocean));box-shadow:0 14px 34px rgba(6,21,32,.16)}
.rg-du-k{display:inline-block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rg-deep);background:#e0c48c;
  padding:.25rem .6rem;border-radius:99px;font-weight:700;margin-bottom:.6rem}
.rg-artikel .rg-du p{color:rgba(255,255,255,.9);margin:0;font-size:1rem;line-height:1.65}
.rg-du a{color:#e0c48c}
.rg-artikel .rg-quelle,.mf-karte .rg-quelle{font-size:.78rem;line-height:1.5;color:#5b6b7c;margin:.8rem 0 0}
.rg-quelle a{color:var(--gold-ink);text-underline-offset:2px}

.rg-check{list-style:none;margin:1.2rem 0 1.4rem;padding:0;display:grid;gap:.75rem}
.rg-check li{position:relative;padding:.9rem 1rem .9rem 3rem;border-radius:14px;background:var(--card);border:1px solid var(--line);line-height:1.6;font-size:1rem}
.rg-check li::before{content:"";position:absolute;left:1rem;top:1.05rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--paper);border:1px solid var(--gold)}
.rg-check li::after{content:"";position:absolute;left:1.43rem;top:1.28rem;width:.32rem;height:.6rem;border:solid var(--gold-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rg-check b{color:var(--ink)}

/* ── Grafiken ── */
.rg-diagramm{margin:1.6rem 0;padding:1.3rem 1.4rem 1rem;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 28px rgba(11,36,54,.05)}
.rg-dia-titel{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:1rem}
.rg-diagramm ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.rg-diagramm li{display:grid;grid-template-columns:minmax(0,1fr) 4.2rem;grid-template-areas:"label zahl" "bahn zahl";gap:.3rem .8rem;align-items:center}
.rg-b-label{grid-area:label;font-size:.88rem;line-height:1.35;color:var(--ink-soft)}
.rg-b-bahn{grid-area:bahn;display:block;width:100%;height:12px;overflow:visible}
.rg-b-zahl{grid-area:zahl;font:500 1.5rem/1 var(--rg-serif);color:var(--ink);text-align:right}
.rg-b-grund{fill:#eef1f4}
.rg-abw .rg-b-grund{fill:#f4f6f8}
.rg-null{fill:#9aa6b2}
.rg-ton-navy{fill:var(--rg-ocean)}.rg-ton-gold{fill:var(--gold)}.rg-ton-rose{fill:var(--rg-rose)}
.rg-ton-plus{fill:var(--rg-gruen)}.rg-ton-minus{fill:var(--rg-rose)}.rg-ton-null{fill:#9aa6b2}
.rg-z-plus{color:var(--rg-gruen)}.rg-z-minus{color:#a24a70}
.rg-b-wert{transform-box:fill-box;transform-origin:left center;transition:transform 1.1s var(--rg-ease)}
.rg-b-wert.rg-links{transform-origin:right center}
.rg-diagramm li:nth-child(2) .rg-b-wert{transition-delay:.12s}
.rg-diagramm li:nth-child(3) .rg-b-wert{transition-delay:.24s}
.rg-diagramm li:nth-child(4) .rg-b-wert{transition-delay:.36s}
html.rg-js .rg-diagramm:not(.an) .rg-b-wert{transform:scaleX(0)}
.rg-dia-fuss{font-size:.76rem!important;color:#5b6b7c!important;margin:1rem 0 0!important;line-height:1.5!important}

.rg-zwei{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.5rem 0}
.rg-feld{padding:1.2rem 1.3rem;border-radius:16px;border:1px solid var(--line);background:var(--card)}
.rg-feld-a{border-top:3px solid var(--rg-ocean)}
.rg-feld-b{border-top:3px solid var(--gold)}
.rg-feld-k{display:block;font-weight:700;font-size:.92rem;margin-bottom:.6rem;color:var(--ink)}
.rg-feld ul{margin:0;padding-left:1.1rem;font-size:.95rem;line-height:1.7;color:var(--ink-soft)}

/* ── Mythen-Kasten im Ratgeber ── */
.rg-mythen-kurz{margin-top:4rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:22px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--rg-rose)}
.rg-mythen-kurz ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.rg-mythen-kurz li{padding:1rem 1.1rem;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.rg-mythen-kurz s{display:block;font:500 1.12rem/1.35 var(--rg-serif);color:#6b7682;text-decoration-color:rgba(196,101,140,.75);text-decoration-thickness:1.5px;margin-bottom:.45rem}
.rg-mythen-kurz span{font-size:.94rem;line-height:1.55;color:var(--ink)}
.rg-mehr{margin:1.2rem 0 0!important}
.rg-mehr a{font-weight:600;color:var(--gold-ink);text-decoration:none;border-bottom:1px solid rgba(176,143,82,.45)}
.rg-mehr a:hover{border-bottom-color:var(--gold-ink)}
.rg-fragen{margin-top:4rem}
.rg-fragen details p{font-size:1rem}

/* ── Anfrage, Weiterlesen, Quellen ── */
.rg-cta{background:var(--card);padding:1rem 0 2rem;margin-top:3rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rg-ende{padding-bottom:3rem}
.rg-weiter{margin:3.5rem 0 2.5rem}
.rg-weiter h2,.rg-quellen-box h2,.mf-methode h2{font:500 1.8rem/1.2 var(--rg-serif);margin:0 0 1.2rem}
.rg-weiter ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.rg-weiter a{position:relative;display:flex;flex-direction:column;gap:.35rem;height:100%;box-sizing:border-box;padding:1.3rem 1.3rem 2.6rem;border-radius:18px;
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .45s var(--rg-ease),box-shadow .45s,border-color .3s}
.rg-weiter a:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(11,36,54,.1);border-color:var(--gold)}
.rg-weiter-k{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.rg-weiter b{font:500 1.3rem/1.25 var(--rg-serif)}
.rg-weiter span:not(.rg-weiter-k){font-size:.9rem;line-height:1.5;color:var(--ink-soft)}

.rg-quellen-box{padding-top:2rem;border-top:1px solid var(--line)}
.rg-quellen-box > p{font-size:.92rem;color:var(--ink-soft);max-width:46rem}
.rg-quellen{margin:1rem 0 0;padding-left:1.4rem;columns:2;column-gap:2.5rem;font-size:.84rem;line-height:1.55;color:var(--ink-soft)}
.rg-quellen li{break-inside:avoid;margin-bottom:.45rem}
.rg-quellen a{color:var(--ink-soft)}
.rg-quellen a:hover{color:var(--gold-ink)}

/* ── Ratgeber-Übersicht /ratgeber (29.10.2026) ── */
.rg-vertiefung{margin:3rem 0 0}
.rg-vertiefung a{border-left:4px solid var(--gold)}
.rg-vorweg{margin-top:0!important}
.rg-kapitel .rg-nr{display:inline-block;vertical-align:middle;margin-right:.6rem}
.rg-illu{display:inline-flex;vertical-align:middle;width:3.2rem;height:3.2rem;padding:.65rem;border-radius:50%;color:var(--gold-ink);
  background:var(--card);border:1px solid var(--line);box-sizing:border-box}
.rg-illu svg{width:100%;height:100%}
.rg-kapitel h2{margin-top:.8rem!important}
.rg-kapitel-text em{color:var(--ink)}
.rg-vorlagen{margin-top:4rem;padding-top:3rem;border-top:1px solid var(--line)}
.rg-vorlagen-liste{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.9rem}
.rg-vorlagen-liste li{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem 1.3rem;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.rg-vorlagen-liste b{font:500 1.2rem/1.25 var(--rg-serif);color:var(--ink)}
.rg-vorlagen-knoepfe{display:flex;gap:.5rem;flex-wrap:wrap}
.rg-vorlagen .dl-btn{cursor:pointer;font:600 .85rem/1 var(--body);padding:.6rem 1rem;border-radius:99px;border:1px solid var(--gold-deep,#b08f52);
  background:transparent;color:var(--ink);transition:background .25s,color .25s}
.rg-vorlagen .dl-btn:hover,.rg-vorlagen .dl-btn:focus-visible{background:var(--gold);color:var(--rg-deep)}
.rg-cta-satz{max-width:46rem;margin:2rem auto 0;text-align:center;font:italic 400 1.35rem/1.45 var(--rg-serif);color:var(--ink)}
@media (max-width:860px){.rg-weiter ul{grid-template-columns:1fr}}

/* ── Faktencheck Bewerbungsmythen ── */
.mf-hero h1{max-width:20ch}
.mf-hero .rg-hero-grid{align-items:center}
/* Beispielkarte rechts im Einstieg: durchgestrichener Mythos, darunter der Messwert */
.mf-beispiel{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1.8rem 1.9rem 1.7rem;border-radius:22px;text-decoration:none;
  background:#fffdf9;color:var(--ink);transform:rotate(-2deg);box-shadow:16px 14px 0 -1px rgba(201,169,110,.28),0 30px 60px rgba(0,0,0,.35);
  transition:transform .6s var(--rg-ease);animation:rg-auf 1s var(--rg-ease) .2s both}
.mf-beispiel:hover{transform:rotate(0) translateY(-4px)}
.mf-beispiel-k{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#8f3a5f}
.mf-beispiel-k2{color:var(--gold-ink);margin-top:1rem}
.mf-beispiel-m{font:500 1.55rem/1.3 var(--rg-serif);color:#55616d;text-decoration:line-through;text-decoration-color:var(--rg-rose);text-decoration-thickness:2px}
.mf-beispiel-z{font:500 3.4rem/1 var(--rg-serif);color:var(--gold-ink)}
.mf-beispiel-t{font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.mf-bilanz{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.8rem}
.mf-bilanz li{display:flex;align-items:baseline;gap:.6rem;padding:.75rem 1.1rem;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(201,169,110,.25);
  animation:rg-auf .9s var(--rg-ease) both}
.mf-bilanz li:nth-child(2){animation-delay:.1s}.mf-bilanz li:nth-child(3){animation-delay:.2s}
.mf-bilanz b{font:500 1.9rem/1 var(--rg-serif);color:#e0c48c}
.mf-bilanz span{font-size:.86rem;color:rgba(255,255,255,.75)}
.mf-haupt{padding-top:2rem;padding-bottom:1rem}
.mf-filter{position:sticky;top:4.3rem;z-index:20;display:flex;flex-wrap:wrap;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding:.8rem 0;margin-bottom:.5rem;
  background:var(--paper);box-shadow:0 10px 12px -10px rgba(11,36,54,.12)}
.mf-filter::-webkit-scrollbar{display:none}
.mf-filter[hidden]{display:none}
.mf-chip{flex:none;font:600 .86rem/1 var(--body);padding:.6rem .95rem;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s}
.mf-chip span{font-weight:500;opacity:.6;margin-left:.2rem}
.mf-chip:hover{border-color:var(--gold);color:var(--ink)}
.mf-chip[aria-pressed="true"]{background:var(--rg-deep);border-color:var(--rg-deep);color:#fff}
.mf-chip[aria-pressed="true"] span{color:#e0c48c;opacity:1}
.mf-status{font-size:.85rem;color:var(--ink-soft);min-height:1.2em;margin:0 0 .8rem}
.mf-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.mf-karte{display:flex;flex-direction:column;padding:1.4rem 1.5rem 1.3rem;border-radius:20px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(11,36,54,.04);transition:transform .45s var(--rg-ease),box-shadow .45s,opacity .5s var(--rg-ease)}
.mf-karte:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,36,54,.09)}
.mf-karte[hidden]{display:none}
.mf-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.9rem}
.mf-phase{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.mf-urteil{font-size:.74rem;font-weight:700;padding:.3rem .65rem;border-radius:99px;white-space:nowrap}
.mf-u-falsch{background:#f8e7ee;color:#8f3a5f}
.mf-u-halb{background:#f6ecd6;color:#7d5f33}
.mf-mythos{font:500 clamp(1.25rem,2vw,1.45rem)/1.3 var(--rg-serif);color:var(--ink);margin:0 0 1rem}
.mf-mythos::before{content:"„";color:var(--gold)}
.mf-mythos::after{content:"“";color:var(--gold)}
.mf-strich{background-image:linear-gradient(var(--rg-rose),var(--rg-rose));background-repeat:no-repeat;background-position:0 58%;background-size:100% 2px;
  transition:background-size .9s var(--rg-ease) .15s,color .6s}
.mf-karte:has(.mf-u-falsch) .mf-strich{color:#55616d}
.mf-karte:has(.mf-u-halb) .mf-strich{background-image:linear-gradient(var(--gold),var(--gold));background-size:100% 2px}
.mf-aufloesung{display:flex;flex-direction:column;gap:.55rem;flex:1;transition:opacity .7s var(--rg-ease) .35s,transform .7s var(--rg-ease) .35s}
html.rg-js .mf-karte:not(.an) .mf-strich{background-size:0 2px}
html.rg-js .mf-karte:not(.an) .mf-aufloesung{opacity:0;transform:translateY(8px)}
.mf-zahl{font:500 2.2rem/1 var(--rg-serif);color:var(--gold-ink)}
.mf-aufloesung p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink)}
.mf-k{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:.15rem}
.mf-herkunft{color:var(--ink-soft)!important;font-size:.88rem!important}
.mf-tipp{position:relative;padding:.7rem .85rem .7rem 2.1rem;border-radius:12px;background:var(--paper);margin-top:.2rem!important}
.mf-tipp::before{content:"";position:absolute;left:.95rem;top:1.05rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--gold-ink)}
.mf-karte .rg-quelle{margin-top:auto!important;padding-top:.6rem}
.mf-methode{margin:3rem 0 0;padding:1.6rem 1.8rem;border-radius:20px;background:var(--card);border:1px solid var(--line);max-width:52rem}
.mf-methode p{margin:0;font-size:.98rem;line-height:1.7;color:var(--ink)}

/* ── Erklärseite „Systemisches Coaching und AVGS“ (Janosch 27.10.2026) ── */
.sy-formel{display:grid;gap:.55rem;padding:1.5rem;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(201,169,110,.28);backdrop-filter:blur(6px);animation:rg-auf 1s var(--rg-ease) .15s both}
.sy-f-zeile{display:grid;gap:.15rem;padding:1rem 1.2rem;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.sy-f-k{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#e0c48c;font-weight:600}
.sy-f-zeile b{font:500 clamp(2rem,3.6vw,2.7rem)/1.05 var(--rg-serif);color:#fff}
.sy-f-t{font-size:.86rem;color:rgba(255,255,255,.74)}
.sy-f-op{justify-self:center;font:300 1.8rem/1 var(--rg-serif);color:#e0c48c}
.sy-f-ergebnis{padding:1rem 1.2rem;border-radius:14px;text-align:center;font:600 1rem/1.35 var(--body);color:#061520;background:linear-gradient(135deg,#e0c48c,#c9a96e 55%,#b08f52);box-shadow:0 10px 28px rgba(201,169,110,.25)}

.sy-ueber{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0 1.6rem}
.sy-u{display:flex;flex-direction:column;gap:.4rem;padding:1.6rem 1.5rem 1.4rem;border-radius:20px;border:1px solid var(--line)}
.sy-u-a{background:linear-gradient(160deg,var(--rg-ocean),var(--rg-deep));border-color:transparent;box-shadow:0 14px 34px rgba(6,21,32,.16)}
.sy-u-b{background:var(--card);border-top:4px solid var(--gold)}
.sy-u-k{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.sy-u-a .sy-u-k{color:#e0c48c}.sy-u-b .sy-u-k{color:var(--gold-ink)}
.rg-artikel .sy-u h3{font:500 1.75rem/1.15 var(--rg-serif);margin:0}
.rg-artikel .sy-u-a h3{color:#fff}.rg-artikel .sy-u-b h3{color:var(--ink)}
.rg-artikel .sy-u p{margin:0;font-size:.98rem;line-height:1.6}
.rg-artikel .sy-u-a p{color:rgba(255,255,255,.84)}.rg-artikel .sy-u-b p{color:var(--ink-soft)}
.sy-u-q{margin-top:auto;padding-top:.7rem;font-weight:600;font-size:.92rem}
.sy-u-a .sy-u-q{color:#e0c48c}.sy-u-b .sy-u-q{color:var(--gold-ink)}

.sy-gg{list-style:none;margin:1rem 0 1.6rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.sy-gg li{position:relative;padding:1.4rem 1.3rem 1.2rem;border-radius:18px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.sy-gg-nr{position:absolute;right:.9rem;top:.1rem;font:300 4.4rem/1 var(--rg-serif);color:transparent;-webkit-text-stroke:1px var(--gold);opacity:.6}
.rg-artikel .sy-gg h4{font:500 1.35rem/1.2 var(--rg-serif);margin:0 0 .45rem;color:var(--ink);padding-right:3rem}
.rg-artikel .sy-gg p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}

.sy-fragen{list-style:none;margin:1rem 0 1.6rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.sy-fragen li{position:relative;padding:1.6rem 1.4rem 1.3rem;border-radius:18px;background:linear-gradient(160deg,var(--rg-ocean),var(--rg-deep));box-shadow:0 12px 30px rgba(6,21,32,.14);overflow:hidden}
.sy-fragen li::before{content:"“";position:absolute;right:1rem;top:-.2rem;font:400 5.2rem/1 var(--rg-serif);color:rgba(224,196,140,.28)}
.sy-f-label{position:relative;display:inline-block;margin-bottom:.55rem;padding:.2rem .6rem;border-radius:99px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#061520;background:#e0c48c}
.rg-artikel .sy-fragen p{position:relative;margin:0;font:italic 400 1.22rem/1.4 var(--rg-serif);color:#fff}

.sy-zeit{list-style:none;margin:1.2rem 0 1.6rem;padding:0;position:relative;display:grid;gap:1.15rem}
.sy-zeit::before{content:"";position:absolute;left:1.2rem;top:1.2rem;bottom:1.2rem;width:2px;background:linear-gradient(var(--gold),rgba(201,169,110,.2))}
.sy-zeit li{position:relative;display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;align-items:start}
.sy-z-nr{position:relative;z-index:1;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--card);border:2px solid var(--gold);font:600 .95rem/1 var(--body);color:var(--gold-ink)}
.sy-zeit-gold .sy-z-nr{background:linear-gradient(135deg,#e0c48c,#c9a96e);border-color:#b08f52;color:#061520}
.rg-artikel .sy-zeit h4{font:600 1.05rem/1.3 var(--body);margin:.4rem 0 .15rem;color:var(--ink)}
.rg-artikel .sy-zeit p{margin:0;font-size:.97rem;line-height:1.6;color:var(--ink-soft)}

.sy-zahlen{list-style:none;margin:1.3rem 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.sy-zahlen li{padding:1.1rem 1.1rem 1rem;border-radius:16px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold)}
.sy-zahlen b{display:block;font:500 2.1rem/1 var(--rg-serif);color:var(--gold-ink);margin-bottom:.4rem}
.sy-zahlen span{font-size:.88rem;line-height:1.45;color:var(--ink-soft)}

.sy-wer{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1rem 0}
.sy-wer>div{padding:1.2rem 1.3rem;border-radius:16px;border:1px solid var(--line);background:var(--card)}
.sy-wer .sy-wer-ja{border-top:3px solid var(--rg-gruen)}.sy-wer .sy-wer-nein{border-top:3px solid var(--rg-rose)}
.sy-wer-k{display:block;font-weight:700;font-size:.9rem;margin-bottom:.5rem;color:var(--ink)}
.sy-wer ul{margin:0;padding-left:1.1rem;font-size:.95rem;line-height:1.65;color:var(--ink-soft)}

.rg-artikel .sy-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1.2rem 0}
.sy-links a{font-weight:600;font-size:.95rem;color:var(--gold-ink);text-decoration:none;border-bottom:1px solid rgba(176,143,82,.45)}
.sy-links a:hover{border-bottom-color:var(--gold-ink)}

.sy-tabelle-wrap{margin:1.2rem 0;overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:var(--card)}
.sy-tabelle{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.sy-tabelle th,.sy-tabelle td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.sy-tabelle thead th{font:600 .78rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);background:rgba(201,169,110,.12)}
.sy-tabelle tbody th{font-weight:600;color:var(--ink);width:8.5rem}
.sy-tabelle td{color:var(--ink-soft)}
.sy-tabelle tbody tr:last-child>*{border-bottom:0}
.sy-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Aufbau beim Scrollen (ohne JavaScript steht alles sofort da) */
.sy-gg li,.sy-fragen li,.sy-zeit li,.sy-zahlen li,.sy-u{transition:opacity .7s var(--rg-ease),transform .7s var(--rg-ease)}
html.rg-js .sy-gg:not(.an) li,html.rg-js .sy-fragen:not(.an) li,html.rg-js .sy-zeit:not(.an) li,html.rg-js .sy-zahlen:not(.an) li,html.rg-js .sy-ueber:not(.an) .sy-u{opacity:0;transform:translateY(16px)}
.sy-gg li:nth-child(2),.sy-fragen li:nth-child(2),.sy-zeit li:nth-child(2),.sy-zahlen li:nth-child(2),.sy-u-b{transition-delay:.12s}
.sy-gg li:nth-child(3),.sy-fragen li:nth-child(3),.sy-zeit li:nth-child(3),.sy-zahlen li:nth-child(3){transition-delay:.24s}
.sy-gg li:nth-child(4),.sy-fragen li:nth-child(4),.sy-zeit li:nth-child(4){transition-delay:.36s}
.sy-zeit li:nth-child(5){transition-delay:.48s}
@media (max-width:40rem){
  .sy-ueber,.sy-gg,.sy-fragen,.sy-zahlen,.sy-wer{grid-template-columns:1fr}
  .sy-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sy-tabelle,.sy-tabelle tbody,.sy-tabelle tr,.sy-tabelle th,.sy-tabelle td{display:block;width:auto}
  .sy-tabelle tbody tr{padding:.5rem 0;border-bottom:1px solid var(--line)}.sy-tabelle tbody tr:last-child{border-bottom:0}
  .sy-tabelle tbody th{border:0;padding:.5rem 1rem 0;width:auto;font-size:.95rem}
  .sy-tabelle td{border:0;padding:.2rem 1rem .4rem}
  .sy-tabelle td::before{content:attr(data-label) ": ";font-weight:600;color:var(--gold-ink);font-size:.8rem;letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  .sy-formel{animation:none}
  .sy-gg li,.sy-fragen li,.sy-zeit li,.sy-zahlen li,.sy-u{transition:none}
  html.rg-js .sy-gg:not(.an) li,html.rg-js .sy-fragen:not(.an) li,html.rg-js .sy-zeit:not(.an) li,html.rg-js .sy-zahlen:not(.an) li,html.rg-js .sy-ueber:not(.an) .sy-u{opacity:1;transform:none}
}

/* Versalziffern (nach allen font-Kurzschreibweisen, siehe oben) */
.rg-hero *,.rg-artikel *,.rg-toc *,.mf-haupt *,.rg-weiter *,.sy-formel *{font-variant-numeric:lining-nums!important}

/* ── Kleine Bildschirme ── */
@media (max-width:62rem){
  .rg-hero-grid{grid-template-columns:1fr;align-items:start}
  .rg-layout{grid-template-columns:minmax(0,1fr)}
  .rg-toc{position:static;padding:1.1rem 1.2rem;border-radius:16px;background:var(--card);border:1px solid var(--line)}
  .rg-toc ol{border-left:0;columns:2;column-gap:1rem}
  .rg-toc a{padding-left:0;border-left:0;break-inside:avoid}
  .rg-weiter ul{grid-template-columns:1fr}
}
@media (max-width:40rem){
  /* minmax(0,1fr) statt 1fr: sonst drückt der Kartenkopf die Spalte über die Bildschirmbreite (320 px, Fluid-Test 30.10.2026) */
  .rg-zahlen,.rg-zwei,.rg-mythen-kurz ul,.mf-raster{grid-template-columns:minmax(0,1fr)}
  .rg-toc ol{columns:1}
  .rg-quellen{columns:1}
  .rg-diagramm li{grid-template-columns:minmax(0,1fr) 3.6rem}
  .rg-b-zahl{font-size:1.3rem}
  .mf-beispiel{transform:none;margin-right:.6rem}
  .mf-filter{flex-wrap:nowrap;top:3.9rem;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}
}
/* Sehr schmale Handys (320–400 px): der Seitenrand ist schmaler als 1rem, der negative Rand schob die Seite seitlich
   (Fluid-Test 30.10.2026) → Filterleiste bündig im Inhalt. */
@media (max-width:420px){.mf-filter{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}
@media (prefers-reduced-motion:reduce){
  .rg-hero-zahlen li,.mf-bilanz li,.mf-beispiel{animation:none}
  .rg-b-wert,.mf-strich,.mf-aufloesung,.mf-karte,.rg-weiter a{transition:none}
  html.rg-js .rg-diagramm:not(.an) .rg-b-wert{transform:none}
  html.rg-js .mf-karte:not(.an) .mf-strich{background-size:100% 2px}
  html.rg-js .mf-karte:not(.an) .mf-aufloesung{opacity:1;transform:none}
}