/* Gruppe D (V6): Ratgeber, Kontakt, Danke, Impressum, Datenschutz, 404. Präfix .sd-
   Ratgeber = Lesemodus (65 bis 75 Zeichen je Zeile), Kontakt = Papierformular, Recht = ruhige Lesetexte.
   Blau nur für Maßlinien und Fokus, auf Papier Tinte. Bewegung nur transform/opacity, nur mit .bewegt. */

/* ---------- Seitenkopf ---------- */
.sd-kopf h1, .sd-kontakt h1, .sd-danke h1, .sd-404 h1 { max-width: 14ch; }
.sd-kopf .lead, .sd-kontakt .lead { max-width: 52ch; }
.sd-kopf--artikel h1 { max-width: 22ch; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); line-height: 1.04; text-wrap: balance; }
.sd-kopf--artikel h1 .titel-ort { max-width: 34ch; }
.sd-meta { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 1rem; color: var(--grau-2); }
.sd-meta span + span::before { content: ""; display: inline-block; width: 1px; height: 0.9em; margin: 0 14px; background: var(--grau-3); vertical-align: -0.1em; }
.sd-meta time { font-variant-numeric: tabular-nums lining-nums; }
.sd-kopf--artikel .antwort { margin-top: clamp(28px, 3.4vw, 44px); max-width: 62ch; }
.sd-kopf--artikel .antwort__frage { font-family: var(--sans); font-stretch: 100%; font-size: 1rem; font-weight: 600; color: var(--grau); letter-spacing: 0; }
.sd-kopf--artikel .antwort p:not(.antwort__frage) { font-size: var(--t-lead); line-height: 1.5; text-wrap: pretty; }
.sd-notiz { margin: 0; max-width: 46ch; }
.sd-notiz .antwort__frage { font-size: 1.1875rem; }
.sd-kopf--recht { padding-bottom: 0; }
.sd-kopf--recht h1 { max-width: 20ch; font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }

/* ---------- Maßkette (Kontakt und Danke) ---------- */
.sd-kette { list-style: none; margin: 0; padding: 0; }
.sd-kette li { position: relative; }
.sd-kette b { display: block; color: var(--weiss); font-family: var(--titel); font-stretch: 104%; font-weight: 650; font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.sd-kette li > span { display: block; color: var(--grau); }

/* senkrecht: Maßlinie links mit Endstrichen (bleibt, gut bewertet) */
.sd-kette--steil { margin-top: 22px; }
.sd-kette--steil li { padding: 4px 0 26px 40px; }
.sd-kette--steil li:last-child { padding-bottom: 6px; }
.sd-kette--steil li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; pointer-events: none;
  background:
    linear-gradient(var(--blau), var(--blau)) 9px 0 / 2px 100% no-repeat,
    linear-gradient(var(--blau), var(--blau)) 0 0 / 20px 2px no-repeat;
}
.sd-kette--steil li:last-child::before {
  background:
    linear-gradient(var(--blau), var(--blau)) 9px 0 / 2px 100% no-repeat,
    linear-gradient(var(--blau), var(--blau)) 0 0 / 20px 2px no-repeat,
    linear-gradient(var(--blau), var(--blau)) 0 100% / 20px 2px no-repeat;
}
.sd-kette--steil li > span { margin-top: 6px; max-width: 46ch; }

/* waagerecht: wie die Maßkette der Startseite, zeichnet sich nacheinander */
.sd-kette--quer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(36px, 4.4vw, 64px); max-width: 1040px; }
.sd-kette--quer li { padding: 38px clamp(16px, 2vw, 32px) 0 0; }
.sd-kette--quer li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; pointer-events: none; transform-origin: left center;
  background:
    linear-gradient(var(--blau), var(--blau)) 0 8px / 100% 2px no-repeat,
    linear-gradient(var(--blau), var(--blau)) 0 0 / 2px 18px no-repeat;
}
.sd-kette--quer li:last-child::before {
  background:
    linear-gradient(var(--blau), var(--blau)) 0 8px / 100% 2px no-repeat,
    linear-gradient(var(--blau), var(--blau)) 0 0 / 2px 18px no-repeat,
    linear-gradient(var(--blau), var(--blau)) 100% 0 / 2px 18px no-repeat;
}
.sd-kette--quer b { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); }
.sd-kette--quer li > span { margin-top: 12px; max-width: 34ch; }
.bewegt .sd-kette--quer[data-zeigen] { transform: none; }
.bewegt .sd-kette--quer li::before { transform: scaleX(0); transition: transform var(--d-lang) var(--kurve); }
.bewegt .sd-kette--quer li:nth-child(2)::before { transition-delay: 110ms; }
.bewegt .sd-kette--quer li:nth-child(3)::before { transition-delay: 220ms; }
.bewegt .sd-kette--quer.ist-sichtbar li::before { transform: none; }

/* ---------- Artikel: Lesemodus ---------- */
.sd-lesen { padding: var(--abschnitt-eng) 0 var(--abschnitt); }
.sd-artikel { display: grid; grid-template-columns: minmax(0, 68ch) minmax(260px, 340px); gap: 48px clamp(48px, 7vw, 112px); align-items: stretch; justify-content: space-between; }
.sd-artikel .text { max-width: none; font-size: 1.125rem; line-height: 1.7; color: #DCDCD8; hyphens: auto; hyphenate-limit-chars: 10 4 4; text-wrap: pretty; }
.sd-artikel .text > :first-child { margin-top: 0; }
.sd-artikel .text p { margin: 1.15em 0 0; }
.sd-artikel .text strong { color: var(--weiss); font-weight: 650; }
.sd-artikel .text h2 { margin-top: 2.6em; max-width: 28ch; text-wrap: balance; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.12; letter-spacing: -0.02em; scroll-margin-top: calc(var(--kopf-h) + 20px); hyphens: manual; }
.sd-artikel .text > h2:first-child { margin-top: 0; }
.sd-artikel .text h2 + p { margin-top: 0.7em; }
.sd-artikel .text a { color: var(--weiss); text-decoration-color: var(--grau-3); text-underline-offset: 0.2em; }
.sd-artikel .text ul { margin: 1.1em 0 0; padding-left: 1.25em; }
.sd-artikel .text ul li { margin-top: 0.7em; padding-left: 0.2em; }
.sd-artikel .text ol { list-style: none; counter-reset: sd-s; margin: 1.4em 0 0; padding: 0; display: block; }
.sd-artikel .text ol > li { counter-increment: sd-s; position: relative; padding: 20px 0 20px 3.2rem; border-top: 1px solid var(--linie); margin: 0; }
.sd-artikel .text ol > li:last-child { border-bottom: 1px solid var(--linie); }
.sd-artikel .text ol > li::before { content: counter(sd-s); position: absolute; left: 0; top: 14px; font-family: var(--titel); font-stretch: 108%; font-weight: 600; font-size: 1.75rem; line-height: 1.3; color: var(--grau-2); font-variant-numeric: lining-nums tabular-nums; }
.sd-quellen { font-size: 1rem; line-height: 1.6; color: var(--grau-2); border-top: 1px solid var(--linie); padding-top: 18px; margin-top: 3em; overflow-wrap: anywhere; hyphens: manual; }
.sd-quellen strong { color: var(--grau); }
.sd-faq { margin-top: 3em; }
.sd-faq .faq { margin-top: 20px; }
.sd-artikel .text .sd-faq h2 { margin-top: 0; }
.sd-weiter { margin-top: 3em; padding: clamp(22px, 3vw, 34px); hyphens: manual; }
.sd-artikel .text .sd-weiter h2 { margin: 0; font-size: 1.375rem; line-height: 1.2; color: var(--druck); }
.sd-weiter p { margin-top: 10px; color: var(--druck); }
.sd-weiter .knoepfe { margin-top: 20px; align-items: center; }
.sd-weiter a:not(.knopf) { color: var(--druck); }

/* Tabelle im Artikel */
.sd-tabelle { width: 100%; border-collapse: collapse; margin-top: 1.6em; font-size: 1rem; line-height: 1.5; hyphens: manual; }
.sd-tabelle caption { text-align: left; font-size: 1rem; color: var(--grau-2); padding-bottom: 12px; }
.sd-tabelle th, .sd-tabelle td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-top: 1px solid var(--linie); }
.sd-tabelle thead th { font-weight: 600; font-size: 1rem; color: var(--grau); background: transparent; border-top: 0; border-bottom: 1px solid var(--linie-stark); }
.sd-tabelle tbody th { font-weight: 650; font-size: 1rem; color: var(--weiss); background: transparent; }
.sd-tabelle tbody td { color: #DCDCD8; }
.sd-tabelle tbody tr:last-child > * { border-bottom: 1px solid var(--linie); }

/* Randspalte: Inhalt und Prüfliste auf Papier */
.sd-rand { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.sd-rand__titel { margin: 0 0 8px; font-weight: 600; font-size: 1rem; color: var(--grau-2); }
.sd-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-stark); }
.sd-toc li { border-bottom: 1px solid var(--linie); }
.sd-toc a { display: block; min-height: 44px; padding: 12px 0; color: var(--grau); text-decoration: none; font-size: 1rem; line-height: 1.35; }
.sd-toc a:hover, .sd-toc a:focus-visible { color: var(--weiss); }
.sd-pruef-raum { flex: 1; position: relative; }
.sd-pruef { position: sticky; top: calc(var(--kopf-h) + 24px); padding: clamp(20px, 2.4vw, 28px); }
.sd-pruef__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sd-pruef__stand { font-size: 1rem; color: var(--druck-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-pruef__stand.ist-an { color: var(--tinte); font-weight: 600; }
.sd-pruef__segmente { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 14px 0 0; }
.sd-pruef__segmente i { position: relative; overflow: hidden; height: 3px; background: var(--papier-linie); }
.sd-pruef__segmente i::after { content: ""; position: absolute; inset: 0; background: var(--tinte); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-mittel) var(--kurve); }
.sd-pruef__segmente i.an::after { transform: none; }
.sd-pruef__liste { list-style: none; margin: 10px 0 0; padding: 0; }
.sd-pruef__liste li { border-top: 1px solid var(--papier-linie); }
.sd-pruef__liste label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 48px; padding: 12px 0; cursor: pointer; font-size: 1rem; line-height: 1.4; color: var(--druck-leise); }
.sd-pruef__liste input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--druck-leise); border-radius: 0; background: transparent; cursor: pointer; position: relative; transition: border-color var(--d-kurz) var(--kurve); }
.sd-pruef__liste input:checked { border-color: var(--tinte); }
.sd-pruef__liste input::after { content: ""; position: absolute; left: 5px; top: 0; width: 8px; height: 14px; border-right: 2.5px solid var(--tinte); border-bottom: 2.5px solid var(--tinte); transform: rotate(45deg) scale(0); transform-origin: 30% 70%; transition: transform var(--d-kurz) var(--feder); }
.sd-pruef__liste input:checked::after { transform: rotate(45deg) scale(1); }
.sd-pruef__liste input:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.sd-pruef__liste b { color: var(--druck); font-weight: 650; }
.sd-pruef__liste input:checked + span { color: var(--druck-leise); }
.sd-pruef__fuss { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--papier-linie); font-size: 1rem; color: var(--druck-leise); }

/* ---------- Ratgeber-Übersicht: Register ---------- */
.sd-register { list-style: none; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--linie-stark); }
.sd-register li { border-bottom: 1px solid var(--linie); }
.sd-register a { display: grid; grid-template-columns: var(--abstand-9) minmax(0, 1fr) minmax(14rem, auto); gap: 8px 0; align-items: start; padding: clamp(28px, 3.4vw, 44px) 0; text-decoration: none; color: inherit; }
.sd-register__nr { font-family: var(--titel); font-stretch: 108%; font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.05; color: var(--grau-2); letter-spacing: -0.02em; }
.sd-register h3 { font-family: var(--titel); font-stretch: 108%; font-weight: 650; font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.25rem); line-height: 1.08; letter-spacing: -0.022em; max-width: 24ch; color: var(--weiss); }
.sd-register__text { padding-right: clamp(20px, 4vw, 56px); }
.sd-register__text p { margin: 14px 0 0; color: var(--grau); max-width: 60ch; }
.sd-register__meta { display: grid; gap: 4px; font-size: 1rem; color: var(--grau-2); align-content: start; justify-items: end; text-align: right; padding-top: 8px; font-variant-numeric: tabular-nums; }
.sd-register__meta b { color: var(--weiss); font-weight: 600; }
.sd-register a:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .sd-register a:hover h3 { text-decoration: underline; text-decoration-color: var(--blau); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}

/* ---------- Kontakt: Papierformular ---------- */
.sd-kontakt { padding-bottom: var(--abschnitt-eng); }
.sd-kontakt .kontakt__grid { align-items: start; }
.sd-kontakt .lead + .h3 { margin-top: 40px; }
.sd-kontakt .kontakt__mail { margin-top: 28px; }
.sd-kontakt .formular { padding-top: max(52px, clamp(28px, 4vw, 56px)); }
/* Lochreihe und Abrisslinie wie beim Endlospapier (gleiche Zeichnung wie .papier--perforiert) */
.sd-kontakt .formular::before {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 9px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, var(--buehne) 3.2px, transparent 3.8px) 6px 0 / 18px 9px repeat-x,
    linear-gradient(90deg, var(--papier-linie-stark) 50%, transparent 0) 0 100% / 6px 1px repeat-x;
}
.sd-antwort-abschnitt .antwort--gross { max-width: 60ch; }
.sd-antwort-abschnitt .antwort--gross p:not(.antwort__frage) { max-width: 44ch; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.3; }
.sd-faq-abschnitt .faq { margin-top: 32px; }

/* ---------- Danke ---------- */
.sd-danke { padding-bottom: var(--abschnitt-eng); }
.sd-danke h1 { max-width: none; }
.sd-danke h1 .titel-ort { max-width: none; font-size: var(--t-h3); margin-top: 0.9em; }
.sd-danke h1 .titel-ort .stiftkreis { color: var(--weiss); font-weight: 650; }
.sd-danke h1 .titel-ort .stiftkreis svg { left: -14px; top: -10px; width: calc(100% + 28px); height: calc(100% + 20px); stroke: var(--blau); }
.sd-danke__hinweis { margin-top: 36px; max-width: 62ch; color: var(--grau); }
.sd-danke__hinweis a { color: var(--weiss); font-weight: 600; }

/* ---------- Recht: Impressum und Datenschutz ---------- */
.sd-recht { padding: var(--abschnitt-eng) 0 var(--abschnitt); }
.sd-recht .text { max-width: 70ch; font-size: 1.0625rem; line-height: 1.7; color: #DCDCD8; text-wrap: pretty; }
.sd-recht .text > :first-child { margin-top: 0; }
.sd-recht .text h2 { scroll-margin-top: calc(var(--kopf-h) + 16px); margin-top: 2.4em; max-width: 34ch; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; }
.sd-recht .text p { margin: 0.9em 0 0; }
.sd-recht .text h2 + p { margin-top: 0.6em; }
.sd-recht .text li { margin-top: 0.4em; }
.sd-inhalt { margin: 0 0 clamp(40px, 5vw, 72px); max-width: 70ch; }
.sd-inhalt p { margin: 0 0 8px; font-weight: 600; font-size: 1rem; color: var(--grau-2); }
.sd-inhalt ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; border-top: 1px solid var(--linie-stark); }
.sd-inhalt li { break-inside: avoid; border-bottom: 1px solid var(--linie); }
.sd-inhalt a { display: block; min-height: 44px; padding: 12px 0; line-height: 1.35; color: var(--grau); text-decoration: none; font-size: 1rem; }
.sd-inhalt a:hover { color: var(--weiss); }
.sd-stand { font-size: 1rem; color: var(--grau-2); }

/* ---------- 404: Fund, vermessen ---------- */
.sd-404 { padding-bottom: var(--abschnitt-eng); }
.sd-404 .seitenkopf__raster { align-items: center; }
.sd-fund { max-width: 520px; width: 100%; justify-self: end; }
.sd-wert { display: block; font-size: clamp(5.5rem, 4rem + 9vw, 12.5rem); line-height: 0.86; letter-spacing: -0.045em; margin: 0 0 clamp(20px, 3vw, 36px); }
.sd-pfad { display: block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; color: var(--grau); font-variant-numeric: tabular-nums; }
.sd-ziele { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--linie-stark); max-width: 560px; }
.sd-ziele li { border-bottom: 1px solid var(--linie); }
.sd-ziele a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; text-decoration: none; font-weight: 600; color: var(--weiss); }
.sd-ziele a::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid var(--grau); border-right: 1.5px solid var(--grau); transform: rotate(45deg); transition: transform var(--d-kurz) var(--kurve); flex: none; }
@media (hover: hover) and (pointer: fine) { .sd-ziele a:hover { text-decoration: underline; text-decoration-color: var(--blau); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .sd-ziele a:hover::after { transform: translateX(3px) rotate(45deg); } }

/* ---------- Anpassungen ---------- */
@media (max-width: 1000px) {
  .sd-artikel { grid-template-columns: minmax(0, 1fr); }
  .sd-toc { display: none; }
  .sd-pruef { position: relative; top: auto; }
  .sd-rand { max-width: 560px; }
  .sd-fund { justify-self: start; }
}
@media (max-width: 720px) {
  .sd-register a { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 20px; }
  .sd-register__text { padding-right: 0; }
  .sd-register__meta { grid-column: 2; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 6px; }
  .sd-inhalt ol { columns: 1; }
  .sd-ziele { grid-template-columns: 1fr; }
  .sd-artikel .text { font-size: 1.0625rem; }
  .sd-artikel .text ol > li { padding-left: 2.6rem; }
  .sd-kette--quer { grid-template-columns: 1fr; row-gap: 30px; }
  .sd-kette--quer li { padding-right: 0; }
  .sd-kette--quer li::before { background: linear-gradient(var(--blau), var(--blau)) 0 8px / 100% 2px no-repeat, linear-gradient(var(--blau), var(--blau)) 0 0 / 2px 18px no-repeat, linear-gradient(var(--blau), var(--blau)) 100% 0 / 2px 18px no-repeat !important; }
  .sd-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sd-tabelle, .sd-tabelle tbody { display: block; }
  .sd-tabelle tr { display: block; padding: 12px 0; border-top: 1px solid var(--linie); }
  .sd-tabelle tbody tr:last-child { border-bottom: 1px solid var(--linie); }
  .sd-tabelle th, .sd-tabelle td { display: block; border: 0 !important; padding: 2px 0; }
  .sd-tabelle td[data-l]::before { content: attr(data-l) ": "; font-weight: 600; color: var(--grau); }
}

/* Nachträge */
.sd-band .pfeil { color: var(--druck); }
.sd-band { padding-top: var(--abschnitt-eng); }
.sd-wert { line-height: 1.02; margin-bottom: clamp(8px, 2vw, 20px); }
.sd-danke h1 .titel-ort .stiftkreis { margin-left: 0.35em; }
.sd-danke h1 .titel-ort .stiftkreis svg { left: -10px; width: calc(100% + 20px); }
.sd-pfadzeile { margin: 8px 0 0; font-size: 1rem; color: var(--grau); }
.sd-pfadzeile .sd-pfad { display: inline-block; max-width: 100%; vertical-align: bottom; color: var(--weiss); font-weight: 600; }
.sd-fund { align-self: center; }
@media (max-width: 1000px) {
  .sd-404 .sd-fund { order: -1; }
  .sd-404 .sd-wert { font-size: clamp(4.5rem, 3rem + 14vw, 8rem); margin-bottom: 4px; }
}
@media (max-width: 720px) {
  .sd-tabelle caption { display: block; width: 100%; }
}
@media (max-width: 720px) {
  .sd-meta { flex-direction: column; gap: 2px; }
  .sd-meta span + span::before { display: none; }
}

/* K2: H1 ohne Worttrennung, Schriftgrad je Breite so, dass das längste Wort passt */
.sd-kopf--recht h1, .sd-kopf--artikel h1 { hyphens: manual; overflow-wrap: normal; }
.sd-kopf--recht h1 { font-size: clamp(1.25rem, 6.2vw, 3.25rem); }
.sd-kopf--artikel h1 .titel-zeile { font-size: clamp(1.5rem, 0.1rem + 7vw, 3.5rem); }
/* Verweis-Beschreibungen am Handy mindestens 16 px */
@media (max-width: 720px) {
  .sd-register__meta, .sd-toc a, .sd-inhalt a, .sd-meta, .sd-pruef__stand, .sd-pruef__fuss, .sd-quellen, .sd-rand__titel, .sd-inhalt p, .sd-stand, .sd-pfad, .sd-tabelle caption, .sd-tabelle thead th { font-size: 1rem; }
}

/* K4: keine Worttrennung in Überschriften, Tabellen und Karten */
body main :is(h1, h2, h3, h4, .h2, .h3, dt, dd, th, td, summary, strong, b) { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
@media (max-width: 340px) {
  .sd-kopf--artikel h1 .titel-zeile { font-size: 1.375rem; }
  .sd-danke h1 .titel-ort .stiftkreis { margin-left: 0.2em; }
  .sd-danke h1 .titel-ort .stiftkreis svg { left: -6px; width: calc(100% + 12px); }
}
/* Sprung zum Formular: nur dort, wo das Formular unter dem Text steht */
.sd-sprung { margin-top: 20px; }
.sd-sprung + .h3 { margin-top: 40px; }
@media (min-width: 1001px) { .sd-sprung { display: none; } }


/* ---------- Erklärgrafiken im Ratgeber (Präfix .rg-) ----------
   Instrument im Gehäuse (Gehäuse, Nut, Gravur, Maßlinie). Balken sind SVG mit Werten als Koordinaten (viewBox in Euro),
   Beschriftung ist echter Text. Keine Bewegung, keine Inline-Stile (CSP). Farbe: Stahlblau, Weiß, Grau; Bedeutung nie nur über Farbe. */
.sd-artikel .rg { container-type: inline-size; margin: 2.4em 0 0; padding: clamp(16px, 2.6vw, 28px); background: var(--gehaeuse); border: 1px solid var(--kante); box-shadow: inset 0 1px 0 rgb(238 236 229 / 0.05); font-size: 1rem; line-height: 1.4; color: #DCDCD8; hyphens: manual; }
.sd-artikel .rg figcaption { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 1rem; line-height: 1.5; color: var(--grau-2); text-wrap: pretty; }
.sd-artikel .rg figcaption strong { font-family: var(--mono); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gravur); margin-right: 0.7em; }
.rg-chip { display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 1px solid transparent; }
.rg-c-auf { background: var(--blau); }
.rg-c-pfl { background: var(--weiss); }
.rg-c-dom { background: var(--grau-2); }
.rg-c-zeit { border: 1px dashed var(--gravur); background: rgb(238 236 229 / 0.08); }

/* Kette: Rückwärtsrechnung */
.rg-kette__reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rg-st { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; background: var(--nut); border: 1px solid var(--kante); border-top: 2px solid var(--grau-3); }
.rg-st--ende { border-top-color: var(--blau); }
.rg-st + .rg-st::before { content: ""; position: absolute; left: -13px; top: 22px; width: 9px; height: 9px; border-top: 2px solid var(--gravur); border-right: 2px solid var(--gravur); transform: rotate(45deg); }
.rg-st__tag, .rg-ast__tag, .rg-gruppe { font-family: var(--mono); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gravur); }
.rg-st__zahl { font-family: var(--titel); font-stretch: 108%; font-weight: 650; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.1; color: var(--weiss); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.rg-st__note { font-size: 1rem; line-height: 1.4; color: var(--grau); }

/* Balkenzeilen (Kosten, Spannen) */
.rg-zeile + .rg-zeile { margin-top: 26px; }
.rg-zeile__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; margin-bottom: 10px; }
.rg-zeile__name { font-family: var(--titel); font-weight: 600; font-size: 1.0625rem; color: var(--weiss); }
.rg-zeile__summe { color: var(--grau); font-variant-numeric: lining-nums tabular-nums; }
.rg-zeile__summe b { font-family: var(--titel); font-stretch: 108%; font-weight: 650; color: var(--weiss); font-size: 1.1875rem; }
.rg-balken { display: block; width: 100%; height: 28px; overflow: visible; }
.rg-balken--duenn { height: 14px; }
.rg-balken rect { stroke: var(--gehaeuse); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.rg-balken line { vector-effect: non-scaling-stroke; }
.rg-f-auf { fill: var(--blau); }
.rg-f-pfl { fill: var(--weiss); }
.rg-f-dom { fill: var(--grau-2); }
.rg-balken .rg-f-zeit { fill: rgb(238 236 229 / 0.1); stroke: var(--gravur); stroke-dasharray: 5 4; }
.rg-balken .rg-nut { fill: var(--nut); stroke: none; }
.rg-gitter { stroke: var(--linie-stark); stroke-width: 1px; }
.rg-offen { stroke: var(--gravur); stroke-width: 2px; stroke-dasharray: 3 5; }
.rg-posten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin: 12px 0 0; }
.rg-posten > div { min-width: 0; }
.rg-posten dt { display: flex; align-items: center; font-size: 1rem; color: var(--grau); }
.rg-posten dd { margin: 2px 0 0 22px; font-variant-numeric: lining-nums tabular-nums; color: var(--weiss); font-weight: 600; }

/* Spannen und Balkenpaare */
.rg-bar { display: grid; grid-template-columns: minmax(0, 1fr) 4.4em; align-items: center; gap: 12px; }
.rg-bar + .rg-bar { margin-top: 6px; }
.rg-bar__wert { font-variant-numeric: lining-nums tabular-nums; color: var(--weiss); font-weight: 600; text-align: right; }
.rg-legende { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 18px; color: var(--grau); }
.rg-achse { position: relative; height: 1.5em; margin-top: 8px; color: var(--grau-2); font-variant-numeric: lining-nums tabular-nums; }
.rg-achse span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rg-achse span:first-child { transform: none; }
.rg-achse span:last-child { transform: translateX(-100%); }
.rg-a0 { left: 0; } .rg-a25 { left: 25%; } .rg-a50 { left: 50%; } .rg-a75 { left: 75%; } .rg-a100 { left: 100%; }
.rg-achse-raum { padding-right: 0; }

/* Schwellen: Core Web Vitals */
.rg-met + .rg-met { margin-top: 24px; }
.rg-met__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-bottom: 10px; }
.rg-met__name { font-family: var(--titel); font-stretch: 108%; font-weight: 650; font-size: 1.5rem; color: var(--weiss); letter-spacing: 0.02em; }
.rg-met__frage { color: var(--grau); }
.rg-zonen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rg-zone { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 20px 12px 12px; background: var(--nut); border: 1px solid var(--kante); }
.rg-zone::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; }
.rg-zone--gut::before { background: var(--blau); }
.rg-zone--mittel::before { background: var(--grau-2); }
.rg-zone--schlecht::before { background: repeating-linear-gradient(135deg, var(--gravur) 0 2px, var(--nut) 2px 6px); box-shadow: inset 0 0 0 1px var(--gravur); }
.rg-zone__name { font-family: var(--titel); font-weight: 600; color: var(--weiss); }
.rg-zone__wert { font-family: var(--mono); font-weight: 500; font-size: 1rem; color: var(--grau); }

/* Weg einer Bewertung */
.rg-weg__schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rg-sch { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rg-sch__kopf { position: relative; display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--blau); min-height: 3.6em; }
.rg-sch__nr, .rg-leg__nr { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--gravur); border-radius: 50%; font-family: var(--mono); font-weight: 500; font-size: 1rem; color: var(--weiss); }
.rg-sch__name { font-family: var(--titel); font-weight: 650; color: var(--weiss); line-height: 1.2; }
.rg-sch + .rg-sch .rg-sch__kopf::before { content: ""; position: absolute; left: -12px; bottom: -6px; width: 9px; height: 9px; border-top: 2px solid var(--blau); border-right: 2px solid var(--blau); transform: rotate(45deg); }
.rg-ast { padding: 10px 12px 12px; border: 1px solid var(--kante); background: var(--nut); display: flex; flex-direction: column; gap: 6px; }
.rg-ast--ja { border-left: 3px solid var(--blau); }
.rg-ast--nein { border-style: dashed; border-color: var(--gravur); }
.rg-ast__tag { display: flex; align-items: center; gap: 8px; }
.rg-ast--ja .rg-ast__tag { color: var(--weiss); }
.rg-ast__tag svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.rg-ast--ja .rg-ast__tag svg { stroke: var(--blau); }
.rg-ast__zeile { color: #DCDCD8; }
.rg-ast--nein .rg-ast__zeile { color: var(--grau); }
.rg-ast__zeile + .rg-ast__zeile { padding-top: 6px; border-top: 1px solid var(--linie); }

/* Einzugsgebiet */
.rg-gebiet__zeile { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 24px clamp(20px, 4vw, 40px); align-items: center; }
.rg-gebiet__bild { display: block; width: 100%; height: auto; max-width: 280px; }
.rg-ring { fill: rgb(127 155 198 / 0.06); stroke: var(--grau-2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.rg-punkt { fill: var(--grau-2); }
.rg-sitz { fill: var(--blau); }
.rg-sitz-ring { fill: none; stroke: var(--blau); stroke-width: 1.5; }
.rg-mass { stroke: var(--weiss); stroke-width: 1.5; fill: none; }
.rg-marke { fill: var(--gehaeuse); stroke: var(--gravur); stroke-width: 1.5; }
.rg-marke-t { fill: var(--weiss); font-family: var(--mono); font-weight: 500; font-size: 16px; text-anchor: middle; dominant-baseline: central; }
.rg-leg { display: grid; gap: 14px; }
.rg-leg__eintrag { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.rg-leg__titel { display: block; font-family: var(--titel); font-weight: 650; color: var(--weiss); }
.rg-leg__text { display: block; color: var(--grau); }

/* Zugang und Antworten für KI-Assistenten */
.rg-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; }
.rg-sp { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rg-sp + .rg-sp::before { content: ""; position: absolute; left: -20px; top: 5px; width: 9px; height: 9px; border-top: 2px solid var(--blau); border-right: 2px solid var(--blau); transform: rotate(45deg); }
.rg-sp__kopf { padding-bottom: 10px; border-bottom: 2px solid var(--blau); font-family: var(--titel); font-weight: 650; color: var(--weiss); }
.rg-kachel { padding: 9px 12px; background: var(--nut); border: 1px solid var(--kante); color: #DCDCD8; }
.rg-kachel--code { font-family: var(--mono); font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.02em; color: var(--weiss); overflow-wrap: anywhere; }
.rg-kachel--sperr { border-style: dashed; border-color: var(--gravur); color: var(--grau); }
.rg-gruppe { margin-top: 6px; }
.rg-gruppe:first-of-type { margin-top: 0; }

/* Anpassung nach Breite der Grafik selbst (Container), nicht des Fensters: neben dem Text steht sie je nach Seitenleiste unterschiedlich breit */
@container (max-width: 599px) {
  .rg-kette__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .rg-st:nth-child(3)::before { left: 50%; top: -15px; transform: translateX(-50%) rotate(135deg); }
  .rg-weg__schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .rg-sch:nth-child(3) .rg-sch__kopf::before { display: none; }
  .rg-posten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-gebiet__zeile { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rg-leg { justify-self: stretch; }
  .rg-spalten { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .rg-sp + .rg-sp::before { left: 8px; top: -24px; transform: rotate(135deg); }
  .rg-bar { grid-template-columns: minmax(0, 1fr) 4.6em; gap: 8px; }
}
@container (max-width: 459px) {
  .rg-achse .rg-a25, .rg-achse .rg-a75 { display: none; }
}
@container (max-width: 399px) {
  .rg-kette__reihe { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .rg-st + .rg-st::before, .rg-st:nth-child(3)::before { left: 20px; top: -16px; transform: rotate(135deg); }
  .rg-st { padding: 12px 14px 14px; }
  .rg-zonen { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rg-zone { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 12px 12px 12px 24px; }
  .rg-zone::before { right: auto; top: -1px; bottom: -1px; width: 8px; height: auto; }
  .rg-weg__schritte { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .rg-sch + .rg-sch .rg-sch__kopf::before, .rg-sch:nth-child(3) .rg-sch__kopf::before { display: block; left: 10px; top: -20px; bottom: auto; transform: rotate(135deg); }
  .rg-sch__kopf { min-height: 0; }
}
@container (max-width: 339px) {
  .rg-posten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rg-posten > div { display: flex; justify-content: space-between; gap: 12px; }
  .rg-posten dd { margin: 0; text-align: right; }
}