/* Wirkraum · Ratgeber-Seiten (Design-Vertrag 11, Ratgeber-Seiten)
   Übertragen aus der freigegebenen Vorschau, Variante B „Wenden“. Die Seite trägt .st-seite und .rg-seite:
   Kopf, Knöpfe, Pille, Überschriften, Wartelistenkarte und Fuß kommen aus start.css (lädt vor dieser Datei,
   darum gewinnt bei gleicher Spezifität hier die spätere Regel). Alles Eigene heißt „rg-“.
   Ohne Skript ist alles Wichtige zu lesen; ratgeber.js (ES-Modul) belebt es. Bewusst nur hell, wie die Startseite. */

.st-seite.rg-seite {
  --breite: 1100px;
  --notiz: #B5303E; /* dunkles Rosé aus Raum 5 „Job prüfen“ (9,4 : 1 auf Weiß), nur die Farbe der Handschrift; nicht die Warnsignal-Farbe #B83300 */
  --du-tint: #E1F8FF;
  --profil: #6CCFF6; --profil-tint: #E1F8FF;
  --ok-bg: #F4FADF; --gap: #62646C;
  --feder: cubic-bezier(0.34, 1.32, 0.64, 1);
}
/* styles.css formatiert jedes <main> als App-Spalte; hier ist es nur der Inhalt der Seite */
.rg-seite .rg-inhalt { max-width: none; margin: 0; padding: 0; }
.rg-seite .st-abschnitt { padding-block: 72px; }
.rg-seite .st-abschnitt__kopf { margin-bottom: 28px; }
.rg-seite .st-h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem); }
.rg-seite .st-beispiel { white-space: nowrap; }

/* ===== Hero ===== */
.rg-seite .rg-hero { position: relative; isolation: isolate; max-width: var(--breite); margin: -72px auto 0; padding: 120px 16px 48px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px 48px; align-items: center; }
/* Licht im Hintergrund wie st-hero::before (Muster 02). Der Hero bildet einen eigenen Stapelkontext (isolation), sonst läge das Licht
   hinter dem weißen Hintergrund von .st-seite und wäre bis auf den Rand oben unsichtbar. */
.rg-seite .rg-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 100vw; height: 520px; transform: translateX(-50%);
  background:
    radial-gradient(40% 300px at 16% 0, rgba(108, 207, 246, 0.42), transparent 100%),
    radial-gradient(34% 280px at 60% 0, rgba(217, 176, 254, 0.3), transparent 100%),
    radial-gradient(30% 260px at 92% 40px, rgba(254, 187, 113, 0.26), transparent 100%); }
.rg-seite .rg-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.rg-seite .st-h1 { font-size: clamp(2.1rem, 1.1rem + 3.2vw, 3.6rem); line-height: 1.05; padding-bottom: 40px; }
.rg-seite .st-notiz { font: 600 clamp(1.125rem, 1rem + 0.5vw, 1.4rem)/1 var(--hand); }
.rg-seite .st-notiz__pfeil { width: 64px; height: 32px; }
.rg-seite .st-lead { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); }

/* Lesezeit und Sprungmarken unter dem Lead: Pillen mit Pfeil nach unten, keine Haken (Haken sind Zusagen am Handlungsknopf) */
.rg-seite .rg-sprung { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.rg-seite .rg-sprung__zeit { font: 600 1rem var(--text); color: var(--ink-mid); }
.rg-seite .rg-sprung__nav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rg-seite .rg-sprung__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 16, 17, 0.22); color: var(--ink); font: 600 0.9375rem var(--ui); text-decoration: none; }
.rg-seite .rg-sprung__link:hover { background: var(--flaeche); }
.rg-seite .rg-sprung__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.rg-seite .rg-sprung__pfeil { flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
/* Sprungziele: der schwebende Kopf klebt 12 px unter dem Rand und ist mindestens 64 px hoch, endet also bei etwa 76 px; 112 px lässt 36 px Luft über der Überschrift */
.rg-seite [id^="rg-t-"] { scroll-margin-top: 112px; }

/* Wende-Karte (Behauptung wendet sich zum Beleg). Der Winkel kommt aus ratgeber.js (CSSOM): 0, 180, 360 …
   Die Karte dreht immer weiter, nie zurück. Ruhelage ohne Skript: die Behauptung. */
.rg-seite .rg-hero__bild { position: relative; height: 420px; perspective: 1400px; }
.rg-seite .rg-wk-rahmen { position: absolute; left: 50%; top: 50%; width: min(300px, 86%); height: 300px; margin: -150px 0 0; transform: translateX(-50%); transform-style: preserve-3d; }
/* Lockt leise: alle paar Sekunden ein sanftes Wackeln, nie als Schleife, nicht unter der Maus, nicht bei Ruhig */
.rg-seite .rg-wk-rahmen.rg-lockt { animation: rg-wk-locken 1300ms ease-in-out; }
@keyframes rg-wk-locken { 0%, 100% { transform: translateX(-50%) rotate(0); } 25% { transform: translateX(-50%) rotate(-1.4deg) translateY(-3px); } 55% { transform: translateX(-50%) rotate(1.2deg) translateY(-2px); } 80% { transform: translateX(-50%) rotate(-0.5deg); } }
.rg-seite .rg-wk { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; transform: rotateY(0); transform-style: preserve-3d; transition: transform 900ms var(--ankommen); }
.rg-seite .rg-wk:hover > div { box-shadow: inset 0 0 0 2px rgba(0, 16, 17, 0.5), 0 18px 36px -20px rgba(0, 16, 17, 0.5); }
.rg-seite .rg-wk:hover > .rg-wk__hinten { box-shadow: inset 0 0 0 3px var(--ink), 14px 30px 52px -26px rgba(0, 16, 17, 0.6); }
.rg-seite .rg-wk:focus-visible { outline: none; }
.rg-seite .rg-wk:focus-visible > div { outline: 3px solid var(--ink); outline-offset: 4px; }
.rg-seite .rg-wk > div { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 10px; justify-content: center; font: 700 1.5rem/1.2 var(--ui); overflow-wrap: break-word; hyphens: manual; text-wrap: pretty; }
.rg-seite .rg-wk__vorn { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 2px rgba(0, 16, 17, 0.35); color: var(--ink-mid); }
.rg-seite .rg-wk__hinten { transform: rotateY(180deg); background: linear-gradient(160deg, #FFFFFF, var(--profil-tint) 60%, #CFF0FC); box-shadow: inset 0 0 0 3px var(--ink), 10px 26px 48px -26px rgba(0, 16, 17, 0.55); }
/* Easter Egg: die Du-Karte (Frozen Lake, Vertrag 5.2) einmal vorn, nach einer vollen Runde */
.rg-seite .rg-wk.rg-wk--ei .rg-wk__vorn { background: linear-gradient(150deg, var(--du-hell), var(--du) 55%, #3FB7E6); box-shadow: inset 0 0 0 3px var(--ink), 10px 22px 40px -18px rgba(11, 106, 142, 0.7); color: var(--ink); }
.rg-seite .rg-wk small { font: 700 0.9375rem var(--text); color: var(--ink-faint); display: flex; align-items: center; gap: 8px; }
.rg-seite .rg-wk__hinten small { color: var(--ok-ink); }
.rg-seite .rg-zz { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px dashed var(--du-ink); }
.rg-seite .rg-zh { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.3l2.8 2.8 5.6-6' fill='none' stroke='%23001011' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.rg-seite .rg-wk__tipp { position: absolute; left: 0; right: 0; bottom: 8px; padding: 0 8px; text-align: center; font: 600 0.9375rem var(--text); color: var(--ink-faint); }

/* ===== Einblenden beim Scrollen: Hereindrehen von links (Variante B) =====
   rg-wartet setzt ratgeber.js nur, wenn Bewegung erlaubt ist; ohne Skript steht alles sofort da. */
.rg-seite [data-einblenden].rg-wartet { opacity: 0; transform: perspective(1200px) rotateY(-70deg); transform-origin: left center; }
.rg-seite [data-einblenden].rg-da { transition: opacity 500ms var(--ankommen), transform 560ms var(--ankommen), transform-origin 560ms var(--ankommen); }
.rg-seite .rg-bk.rg-da { transition: opacity 500ms var(--ankommen), transform 520ms var(--ankommen), transform-origin 520ms var(--ankommen); }
.rg-seite .rg-zeile.rg-da { transition: opacity 500ms var(--ankommen), transform 560ms var(--ankommen), transform-origin 560ms var(--ankommen), background 300ms var(--wechsel), box-shadow 300ms var(--wechsel); }

/* ===== Kurz gesagt und Warum: Flächen in der Tönung des Raums Profil ===== */
.rg-seite .rg-kurz { max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
.rg-seite .rg-kurz__karte, .rg-seite .rg-warum { position: relative; padding: 24px 24px 24px 28px; border-radius: 20px; background: var(--du-tint); display: flex; flex-direction: column; gap: 12px; }
.rg-seite .rg-kurz__karte h2, .rg-seite .rg-warum h3 { font-size: 1.375rem; line-height: 1.25; }
.rg-seite .rg-kurz__karte p, .rg-seite .rg-warum p { color: var(--ink-mid); }
.rg-seite .rg-zs { position: absolute; left: -12px; top: 24px; width: 24px; height: 24px; border-radius: 7px; background: var(--du); box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 440px) { .rg-seite .rg-zs { left: -8px; } }

/* ===== Behauptung oder Beleg? (Muster 03) ===== */
.rg-seite .rg-probe { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.rg-seite .rg-zeilen { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rg-seite .rg-hinweis { color: var(--ink-mid); font-weight: 600; font-size: 1rem; }
.rg-seite .rg-zeile { border-radius: 20px; padding: 20px; background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1.5px rgba(0, 16, 17, 0.3), var(--tiefe); display: flex; flex-direction: column; gap: 12px; transition: background 300ms var(--wechsel), box-shadow 300ms var(--wechsel), transform 300ms var(--wechsel); }
.rg-seite .rg-zeile__dach { font: 700 0.8125rem var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.rg-seite .rg-zeile__text { font: 600 1.25rem/1.3 var(--ui); overflow-wrap: anywhere; }
.rg-seite .rg-zeile__text::before { content: "„"; color: var(--ink-faint); }
.rg-seite .rg-zeile__text::after { content: "“"; color: var(--ink-faint); }
.rg-seite .rg-wahl-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rg-seite .rg-wahl { min-height: 48px; padding: 0 8px; border: 0; border-radius: 12px; background: var(--weiss); box-shadow: inset 0 0 0 1.5px #C9D1D4; font: 700 1rem var(--text); color: var(--ink); cursor: pointer; transition: transform 120ms var(--ankommen); }
.rg-seite .rg-wahl:hover:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rg-seite .rg-wahl[aria-pressed="true"] { background: var(--ink); color: var(--weiss); box-shadow: none; }
.rg-seite .rg-zeile__folge { min-height: 1.6em; font-weight: 600; color: var(--ink-mid); font-size: 1rem; }
.rg-seite .rg-zeile__folge:empty { display: none; }
.rg-seite .rg-zeile.rg-ist-behauptung { background: var(--flaeche); box-shadow: inset 0 0 0 1.5px rgba(0, 16, 17, 0.2); transform: rotate(-1.5deg) translateY(4px); }
.rg-seite .rg-zeile.rg-ist-behauptung .rg-zeile__text { color: var(--ink-mid); }
.rg-seite .rg-zeile.rg-ist-beleg { background: linear-gradient(160deg, #FFFFFF, var(--profil-tint) 65%, #CFF0FC); box-shadow: inset 0 0 0 2px var(--ink), 6px 14px 26px -16px rgba(0, 16, 17, 0.5); }
.rg-seite .rg-zeile.rg-wackelt { animation: rg-wackeln 700ms ease-in-out; }
@keyframes rg-wackeln { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-2deg) translateX(-4px); } 45% { transform: rotate(2.5deg) translateX(5px); } 70% { transform: rotate(-2deg) translateX(-4px); } }
.rg-seite .rg-zeile.rg-wendet { animation: rg-wenden 430ms var(--ankommen); }
@keyframes rg-wenden { 0% { transform: perspective(1400px) rotateY(0); } 40% { transform: perspective(1400px) rotateY(90deg); } 41% { transform: perspective(1400px) rotateY(-90deg); } 100% { transform: perspective(1400px) rotateY(0); } }
.rg-seite .rg-zeile__stand { display: flex; align-items: center; gap: 8px; font: 700 0.9375rem var(--ui); }
.rg-seite .rg-zeile__stand .rg-z { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.rg-seite .rg-ist-behauptung .rg-zeile__stand { color: var(--ink-faint); }
.rg-seite .rg-ist-behauptung .rg-z { border: 2px solid var(--gap); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' stroke='%2362646C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.rg-seite .rg-ist-beleg .rg-zeile__stand { color: var(--ok-ink); }
.rg-seite .rg-ist-beleg .rg-z { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.3l2.8 2.8 5.6-6' fill='none' stroke='%23001011' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.rg-seite .rg-fazit { margin-top: 8px; padding: 18px 20px; border-radius: 16px; background: var(--du-tint); font-weight: 600; display: none; }
.rg-seite .rg-fazit.rg-da { display: block; }

/* ===== Drei Teile ===== */
.rg-seite .rg-abschnitt--profil { max-width: none; background: linear-gradient(180deg, var(--weiss), var(--profil-tint) 22%, var(--profil-tint) 78%, var(--weiss)); }
/* Der Abschnitt reicht über die volle Breite (Tönung), sein Inhalt fluchtet mit den anderen: Breite abzüglich 2 × 16 px Innenabstand von .st-abschnitt */
.rg-seite .rg-abschnitt__innen { max-width: calc(var(--breite) - 32px); margin: 0 auto; }
.rg-seite .rg-teile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.rg-seite .rg-teile__text { display: flex; flex-direction: column; gap: 18px; }
.rg-seite .rg-teile__text ol { display: flex; flex-direction: column; gap: 14px; counter-reset: rg-t; }
.rg-seite .rg-teile__text li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; color: var(--ink-mid); }
.rg-seite .rg-teile__text li::before { counter-increment: rg-t; content: counter(rg-t); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 0.9375rem var(--ui); background: var(--profil); box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.rg-seite .rg-teile__text strong { color: var(--ink); font-family: var(--ui); display: block; }
.rg-seite .rg-teile__fuss { color: var(--ink-mid); }
.rg-seite .rg-beleg { position: relative; border-radius: 22px; padding: 22px; background: var(--weiss); box-shadow: inset 0 0 0 2px var(--ink), 6px 14px 26px -16px rgba(0, 16, 17, 0.5); display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.rg-seite .rg-beleg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--profil); }
.rg-seite .rg-beleg__art { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 1rem var(--ui); color: var(--ink-mid); padding-top: 4px; }
.rg-seite .rg-marke-ok { padding: 2px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-size: 0.875rem; }
.rg-seite .rg-beleg h3 { font-size: 1.25rem; line-height: 1.3; }
.rg-seite .rg-beleg dl { display: grid; gap: 4px; }
.rg-seite .rg-beleg dt { font-weight: 700; color: var(--ink-faint); font-size: 1rem; }
.rg-seite .rg-beleg dd { color: var(--ink); }
.rg-seite .rg-beleg .rg-teil { padding: 10px 12px; border-radius: 12px; background: var(--du-tint); }
.rg-seite .rg-beleg__fuss { padding-top: 8px; color: var(--ink-mid); font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.rg-seite .rg-beleg__fuss::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px dashed var(--gap); flex: none; }

/* ===== Regeln ===== */
.rg-seite .rg-regeln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rg-seite .rg-regel { position: relative; overflow: hidden; border-radius: 22px; padding: 28px 22px 22px; background: var(--weiss); box-shadow: var(--tiefe); display: flex; flex-direction: column; gap: 10px; }
.rg-seite .rg-regel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--profil); }
.rg-seite .rg-regel h3 { font-size: 1.25rem; line-height: 1.3; display: flex; align-items: center; gap: 10px; }
.rg-seite .rg-regel h3::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--du-tint); box-shadow: inset 0 0 0 2px var(--ink); }
.rg-seite .rg-regel p { color: var(--ink-mid); }
.rg-seite .rg-regel__beispiel { font: 600 1rem/1.4 var(--text); padding: 10px 12px; border-radius: 12px; background: var(--du-tint); color: var(--ink); }
.rg-seite .rg-regel__beispiel s { color: var(--ink-faint); text-decoration-thickness: 1.5px; }

/* ===== Beispiele zum Wenden =====
   Vorder- und Rückseite liegen im selben Rasterfeld: Die Karte ist so hoch wie die höhere Seite, nichts läuft über. */
.rg-seite .rg-bsp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; perspective: 1600px; }
.rg-seite .rg-bk { position: relative; display: grid; min-width: 0; cursor: pointer; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; transform-style: preserve-3d; transition: transform 520ms var(--ankommen); border-radius: 22px; }
.rg-seite .rg-bk:focus-visible { border-radius: 22px; }
.rg-seite .rg-bk.rg-ist-gewendet { transform: rotateY(180deg); }
.rg-seite .rg-bk > div { position: relative; grid-area: 1 / 1; min-width: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 22px; padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.rg-seite .rg-bk__vorn { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1.5px rgba(0, 16, 17, 0.3), var(--tiefe); color: var(--ink-mid); }
.rg-seite .rg-bk__hinten { transform: rotateY(180deg); background: linear-gradient(160deg, #FFFFFF, var(--lt) 60%, var(--lv)); box-shadow: inset 0 0 0 2px var(--ink), 6px 14px 26px -16px rgba(0, 16, 17, 0.5); }
/* Die drei Lagen tragen die Farben der Lagen-Zeichen von der Startseite („Wo stehst Du gerade?“) */
.rg-seite .rg-bk[data-lage="einstieg"] { --lt: #E1F8FF; --lv: #CFF0FC; }
.rg-seite .rg-bk[data-lage="wechsel"] { --lt: #F9EFFF; --lv: #ECD9FF; }
.rg-seite .rg-bk[data-lage="fuehrung"] { --lt: #FFF0E0; --lv: #FFE2C2; }
.rg-seite .rg-bk__vorn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--lv); border-radius: 22px 22px 0 0; }
.rg-seite .rg-bk__wer { font: 700 0.8125rem var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); display: flex; justify-content: space-between; gap: 8px; }
.rg-seite .rg-bk__stand { display: flex; align-items: center; gap: 8px; font: 700 0.9375rem var(--ui); }
.rg-seite .rg-bk__vorn .rg-bk__stand { color: var(--ink-faint); }
.rg-seite .rg-bk__hinten .rg-bk__stand { color: var(--ok-ink); }
.rg-seite .rg-bk__stand .rg-z { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.rg-seite .rg-bk__vorn .rg-z { border: 2px solid var(--gap); }
.rg-seite .rg-bk__hinten .rg-z { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.3l2.8 2.8 5.6-6' fill='none' stroke='%23001011' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.rg-seite .rg-bk h3 { font: 600 1.2rem/1.3 var(--ui); color: var(--ink); }
.rg-seite .rg-bk__hinten h3 { font-weight: 700; }
.rg-seite .rg-bk__hinten dl { display: grid; gap: 2px; font-size: 1rem; }
.rg-seite .rg-bk__hinten dt { font-weight: 700; color: var(--ink-faint); margin-top: 4px; }
/* Vorderseite so hoch wie die Rückseite: Kopfzeile oben, Zitat in der Mitte, „Wenden“ unten */
.rg-seite .rg-bk__vorn h3 { margin-block: auto; }
.rg-seite .rg-bk__tipp { margin-top: 0; font: 600 0.9375rem var(--text); color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }
.rg-seite .rg-bk__tipp::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }

/* ===== Abschluss: Überlegen und Warteliste ===== */
.rg-seite .rg-schluss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.rg-seite .rg-schluss__text { display: flex; flex-direction: column; gap: 16px; }
.rg-seite .rg-schluss__text > p { color: var(--ink-mid); font-size: 1.125rem; max-width: 32rem; }
/* Tischkarte: alle Maße aus einer Kartengröße --t, damit sie bis 300 px Breite passt */
.rg-seite .rg-tisch-rahmen { --t: 220px; --vx: calc(var(--t) * 0.636); --vy: calc(var(--t) * 0.364); width: calc(var(--t) + var(--vx)); max-width: 100%; justify-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rg-seite .rg-tisch-rahmen .st-beispiel { margin: 0; }
.rg-seite .rg-tisch { position: relative; width: 100%; height: calc(var(--t) + var(--vy)); }
.rg-seite .rg-tk { position: absolute; width: var(--t); height: var(--t); border-radius: calc(var(--t) * 0.255); padding: calc(var(--t) * 0.1); display: flex; flex-direction: column; gap: 6px; font: 700 1rem/1.25 var(--ui); }
.rg-seite .rg-tk__wer { font: 700 0.875rem var(--ui); color: var(--ink-mid); }
.rg-seite .rg-tk--ziel { left: var(--vx); top: var(--vy); background: var(--weiss); box-shadow: inset 0 0 0 5px var(--ink), 0 20px 36px -26px rgba(0, 16, 17, 0.5); align-items: flex-end; justify-content: flex-end; text-align: right; }
.rg-seite .rg-tk--ziel span { max-width: calc(var(--t) * 0.68); }
.rg-seite .rg-tflug { position: absolute; left: 0; top: 0; width: var(--t); height: var(--t); z-index: 2; transition: transform 950ms var(--ankommen); }
.rg-seite .rg-tk--du { left: 0; top: 0; background: linear-gradient(150deg, var(--du-hell), var(--du) 55%, #3FB7E6); box-shadow: inset 0 0 0 5px var(--ink), 10px 22px 40px -18px rgba(11, 106, 142, 0.7); }
.rg-seite .rg-tk--du span { max-width: calc(var(--t) * 0.55); }
.rg-seite .rg-tk--du .rg-tk__wer { color: rgba(0, 16, 17, 0.75); }
.rg-seite .rg-tclip { position: absolute; left: var(--vx); top: var(--vy); width: var(--t); height: var(--t); border-radius: calc(var(--t) * 0.255); overflow: hidden; z-index: 3; pointer-events: none; }
.rg-seite .rg-tschnitt { position: absolute; left: calc(var(--vx) * -1); top: calc(var(--vy) * -1); width: var(--t); height: var(--t); border-radius: calc(var(--t) * 0.255); background: var(--ink); transition: transform 950ms var(--ankommen); }
.rg-seite .rg-tschnitt span { position: absolute; left: var(--vx); top: var(--vy); width: calc(var(--t) - var(--vx)); height: calc(var(--t) - var(--vy)); display: grid; place-items: center; color: var(--weiss); font: 700 0.9375rem var(--ui); transition: opacity 300ms 600ms; }
.rg-seite .rg-tisch.rg-wartet .rg-tflug, .rg-seite .rg-tisch.rg-wartet .rg-tschnitt { transform: translate(calc(var(--t) * -0.68), calc(var(--t) * 0.18)) rotate(-9deg) scale(0.95); }
.rg-seite .rg-tisch.rg-wartet .rg-tschnitt span { opacity: 0; }
/* Wie auf der Startseite: Der Rahmen bildet den Stapelkontext, die Karte (st-warteliste__karte, start.css) liegt darin über ihren beiden Rückseiten */
.rg-seite .rg-warte-rahmen { isolation: isolate; position: relative; margin: 48px auto 0; max-width: 560px; }

/* ===== Weiterlesen ===== */
.rg-seite .rg-weiter { max-width: var(--breite); margin: 0 auto; padding: 0 16px 72px; }
.rg-seite .rg-weiter h2 { font-size: 1.375rem; margin-bottom: 14px; }
.rg-seite .rg-weiter ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rg-seite .rg-weiter li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--raum-tint, var(--flaeche)); color: var(--ink); min-height: 44px; }
.rg-seite .rg-weiter li::before { content: ""; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--ink); background: var(--raum-voll, var(--linie)); margin-bottom: 6px; }
.rg-seite .rg-weiter__titel { font-family: var(--ui); font-weight: 700; }
.rg-seite .rg-weiter__satz { color: var(--ink-mid); font-size: 1rem; }

/* Fuß: Die Daumenleiste der Startseite gibt es hier nicht, also kein Platz dafür */
.rg-seite .st-fuss { padding-bottom: 48px; }

/* ===== Handy ===== */
@media (max-width: 900px) {
  .rg-seite .rg-hero, .rg-seite .rg-probe, .rg-seite .rg-teile, .rg-seite .rg-schluss { grid-template-columns: minmax(0, 1fr); }
  .rg-seite .rg-hero { padding-top: 100px; }
  .rg-seite .rg-hero__bild { height: 380px; }
  .rg-seite .rg-regeln, .rg-seite .rg-bsp, .rg-seite .rg-weiter ul { grid-template-columns: minmax(0, 1fr); }
  .rg-seite .st-abschnitt { padding-block: 56px; }
  .rg-seite .rg-tisch-rahmen { --t: 190px; }
}
/* Schmal: der Tipp unter der Karte bricht um und braucht eine Zeile mehr Platz */
@media (max-width: 420px) { .rg-seite .rg-hero__bild { height: 420px; } }
@media (max-width: 340px) {
  .rg-seite .rg-tisch-rahmen { --t: 150px; }
  .rg-seite .rg-tk { font-size: 0.875rem; }
  .rg-seite .rg-tk__wer { font-size: 0.8125rem; }
  .rg-seite .rg-wk > div { padding: 20px; font-size: 1.25rem; }
}

/* ===== Ohne JavaScript =====
   Die Knöpfe zum Ausprobieren tun nichts, also zeigt die Seite das Ergebnis direkt: die Auflösung der Probe,
   beide Seiten der Beispielkarten. (Mit Skript bleibt alles wie oben.) */
@media (scripting: none) {
  .rg-seite .rg-wahl-reihe, .rg-seite .rg-hinweis, .rg-seite .rg-bk__tipp { display: none; }
  .rg-seite .rg-fazit { display: block; }
  .rg-seite .rg-bk { display: flex; flex-direction: column; gap: 12px; cursor: default; }
  .rg-seite .rg-bk > div, .rg-seite .rg-bk > .rg-bk__hinten { grid-area: auto; transform: none; -webkit-backface-visibility: visible; backface-visibility: visible; }
}

/* ===== Weiches Scrollen zu den Sprungmarken: nur mit erlaubter Bewegung =====
   Standard ist Springen. Weich wird es, wenn das Gerät keine Verringerung wünscht und die Wahl nicht „Ruhig“ ist, oder wenn „Voll“ gewählt ist.
   (Ein eigener prefers-reduced-motion-Block steht unten und bleibt der einzige.) */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-bewegung="ruhig"]) { scroll-behavior: smooth; }
}
:root[data-bewegung="voll"] { scroll-behavior: smooth; }

/* ===== Ruhig: Endzustand sofort (Design-Vertrag 7) =====
   Jede prefers-reduced-motion-Regel gilt nur unter :root:not([data-bewegung="voll"]) und zusätzlich unter :root[data-bewegung="ruhig"]. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-bewegung="voll"]) .rg-seite *, :root:not([data-bewegung="voll"]) .rg-seite *::before, :root:not([data-bewegung="voll"]) .rg-seite *::after { animation: none !important; transition: none !important; }
  :root:not([data-bewegung="voll"]) .rg-seite [data-einblenden].rg-wartet, :root:not([data-bewegung="voll"]) .rg-seite .rg-tisch.rg-wartet .rg-tflug, :root:not([data-bewegung="voll"]) .rg-seite .rg-tisch.rg-wartet .rg-tschnitt { opacity: 1; transform: none; }
  :root:not([data-bewegung="voll"]) .rg-seite .rg-tisch.rg-wartet .rg-tschnitt span { opacity: 1; }
}
:root[data-bewegung="ruhig"] .rg-seite *, :root[data-bewegung="ruhig"] .rg-seite *::before, :root[data-bewegung="ruhig"] .rg-seite *::after { animation: none !important; transition: none !important; }
:root[data-bewegung="ruhig"] .rg-seite [data-einblenden].rg-wartet, :root[data-bewegung="ruhig"] .rg-seite .rg-tisch.rg-wartet .rg-tflug, :root[data-bewegung="ruhig"] .rg-seite .rg-tisch.rg-wartet .rg-tschnitt { opacity: 1; transform: none; }
:root[data-bewegung="ruhig"] .rg-seite .rg-tisch.rg-wartet .rg-tschnitt span { opacity: 1; }