/* Referenznullpunkt – Ergänzungen für die statische Website.
   Die Seitenvorlagen setzen Abstände per style-Attribut; die Content-Security-Policy
   (default-src 'self') erlaubt keine Inline-Styles, deshalb stehen sie hier als Klassen.
   site.css (= components/bundle.css) bleibt unverändert. */

/* Basis */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; }
/* Lange deutsche Wörter (Referenznullpunkt, Krankenhäusern) sprengen bei 360px sonst die Zeile */
h1, h2, h3, h4, .rn-display { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.rn-hero > *, .rn-grid > *, .rn-cta > *, .rn-kontakt > * { min-width: 0; }
.rn-prose, .rn-textseite, .rn-aufklapper__body { overflow-wrap: break-word; }
.rn-textseite a, .rn-kontakt a, .rn-footer a { overflow-wrap: anywhere; }
[id] { scroll-margin-top: var(--space-4); }
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rn-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 10; background: var(--signal); color: var(--on-signal); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.rn-skip:focus { top: var(--space-2); outline: var(--rule) solid var(--focus-ring); outline-offset: 2px; }

/* Fokus immer sichtbar – auch für Elemente, die bundle.css nicht abdeckt (Karten, Logo, Menü, Branchen) */
:where(a, button, summary, [tabindex]):focus-visible { outline: var(--rule) solid var(--focus-ring); outline-offset: 2px; }
.rn-surface-petrol :where(a, button, summary):focus-visible { outline-color: var(--signal); }
.rn-beitrag:focus-visible { outline-offset: 4px; }

/* Buttons in Fließtextblöcken: .rn-prose a (Linkstil) darf Buttons nicht unterstreichen */
.rn-prose a.rn-btn { text-decoration: none; }
.rn-prose a.rn-btn--primary { color: var(--on-signal); }
.rn-prose a.rn-btn--secondary { color: var(--ink); }
.rn-prose a.rn-btn--secondary:hover { color: var(--petrol); }

/* Abstände (ersetzen die style-Attribute der Vorlagen) */
.u-m-0 { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.u-my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.u-my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.u-my-7 { margin-top: var(--space-7); margin-bottom: var(--space-7); }
.u-pt-8 { padding-top: var(--space-8); }
.u-self-end { align-self: end; }
.u-muted { color: var(--ink-muted); }
.u-muted-petrol { color: var(--on-surface-petrol-muted); }
.u-2spaltig { grid-template-columns: 1fr 1fr; }

/* Bilder */
.u-img { width: 100%; height: auto; display: block; }
.u-img--rahmen { border: var(--hairline) solid var(--line); }
.u-img--21x9 { aspect-ratio: 21 / 9; object-fit: cover; }
picture { display: block; }
.rn-beitrag__bild { min-height: 0; overflow: hidden; }
.rn-beitrag__bild picture { width: 100%; height: 100%; }
.rn-prinzip svg { overflow: visible; }
@media (min-width: 900px) { .rn-hero__figure img { max-height: 560px; } }

/* Hero-Fakten (Vorlage: dt/dd inline) */
.rn-hero__facts { margin-bottom: 0; color: var(--ink-muted); }
.rn-hero__facts dt { display: inline; }
.rn-hero__facts dd { display: inline; margin: 0; color: var(--ink); }

/* Zitat-Varianten der Vorlagen */
.rn-zitat--20 p { font-size: 20px; line-height: 30px; }
.rn-zitat--22 p { font-size: 22px; line-height: 32px; }

/* Überschriften in Aufklappern: summary trägt h3/h4, gestaltet wie die Vorlage */
.rn-aufklapper summary > h3, .rn-aufklapper summary > h4 { font: inherit; margin: 0; }
.rn-aufklapper__body h4 { font-size: 17px; line-height: 27px; font-weight: 600; margin: var(--space-5) 0 var(--space-2); }
.rn-aufklapper__body h4:first-child { margin-top: 0; }
/* Branchen-Aufklapper: der Teaser bleibt auch zugeklappt sichtbar, deshalb steht er in der summary */
.rn-aufklapper--teaser summary { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-4); align-items: start; }
.rn-aufklapper--teaser summary > .rn-icon { grid-column: 2; grid-row: 1; }
.rn-aufklapper__teaser { grid-column: 1; display: block; margin-top: var(--space-2); max-width: var(--measure-prose); font-size: 17px; line-height: 27px; font-weight: 400; color: var(--ink-muted); }
.rn-aufklapper__links { font-size: 15px; line-height: 23px; }

/* Rasterlisten: Spalten dürfen schmaler werden als das längste Wort (sonst horizontales Scrollen bei 360px) */
.rn-branchen, .rn-referenzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .rn-branchen, .rn-referenzen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rn-branchen a, .rn-branchen span, .rn-referenzen li { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* Spezifikation mobil: feste Spaltenbreiten, lange Merkmalsnamen trennen */
.rn-spez { table-layout: fixed; }
.rn-spez th, .rn-spez td { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 719px) { .rn-spez th { width: 40%; padding-right: var(--space-2); } }

/* Downloadliste mobil: Name, Größe und Link dürfen umbrechen */
.rn-downloads li { flex-wrap: wrap; position: relative; }
.rn-downloads__name { min-width: 0; flex: 1 1 12rem; }

/* Branchenliste einspaltig (Seitenleiste) */
.rn-branchen--1col { grid-template-columns: 1fr; }
@media (min-width: 720px) { .rn-branchen--1col { grid-template-columns: 1fr; } }

/* Seitenleiste der Beiträge */
.u-sticky { position: sticky; top: var(--space-5); }
.u-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.u-liste a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.rn-kachel .rn-kachel__title + .rn-branchen, .rn-kachel .rn-kachel__title + .u-liste { margin-top: calc(-1 * var(--space-1)); }

/* Kurzer Footer der Beitragsseite */
.rn-footer__bottom--kurz { margin-top: 0; padding-top: 0; border: 0; }

/* SVG-Flächen der Regelstrategie (Vorlage: fill="var(--…)") */
.rn-prinzip .fl-fault-soft { fill: var(--status-fault-soft); }
.rn-prinzip .fl-warn-soft { fill: var(--status-warn-soft); }
.rn-prinzip .fl-ok-soft { fill: var(--status-ok-soft); }
.rn-prinzip .fl-ok { fill: var(--status-ok); }
.rn-prinzip .fl-warn { fill: var(--status-warn); }
.rn-prinzip .fl-fault { fill: var(--status-fault); }
.rn-prinzip .ln-achse { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.rn-prinzip .ln-kennlinie { stroke: var(--petrol); stroke-width: 2; fill: none; }
.rn-prinzip .ln-soll { stroke: var(--signal-deep); stroke-width: 2; stroke-dasharray: 6 4; }
.rn-prinzip .fs-11 { font-size: 11px; }
.rn-prinzip .fs-12 { font-size: 12px; }
.rn-prinzip .fs-20 { font-size: 20px; }
.rn-prinzip .fw-600 { font-weight: 600; }

/* Gegenüberstellung (Beitrag 4) */
.rn-kacheln--2 { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
@media (min-width: 720px) { .rn-kacheln--2 { grid-template-columns: 1fr 1fr; } }
.rn-kachel .rn-icon.u-fault { color: var(--status-fault); }
.rn-kachel .rn-icon.u-ok { color: var(--status-ok); }

/* Video-Kachel (2-Klick-Lösung): Aufbau wie Praxisbeitrag-Karte, ohne ganzflächigen Link */
.rn-video .rn-beitrag__bild { aspect-ratio: 16 / 9; background: var(--surface-raised); }
.rn-video .rn-beitrag__bild img { object-fit: contain; }
.rn-video .rn-beitrag__body p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.rn-video .rn-btn { align-self: flex-start; margin-top: var(--space-3); }
.rn-video:hover { border-color: var(--line); }
.rn-hinweis { margin: var(--space-3) 0 0; }

/* Textseiten: Impressum, Datenschutz, 404 */
.rn-textseite h1 { margin-bottom: var(--space-5); }
.rn-textseite h2 { margin: var(--space-7) 0 var(--space-3); }
.rn-textseite h3 { margin: var(--space-5) 0 var(--space-2); }
.rn-textseite address { font-style: normal; margin: 0 0 var(--space-4); }
.rn-textseite .rn-lead { color: var(--ink-muted); margin-bottom: var(--space-5); }
.rn-textseite ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.rn-textseite .rn-caption { display: block; margin-top: var(--space-7); }
/* Beitrag 4: Hochformat im 21:9-Ausschnitt – das Gerät sitzt im oberen Bilddrittel */
.u-pos-oben { object-position: 50% 32%; }