/* ============================================================ mahnbescheid - RATGEBER (Post-Type „Beitrag") Sachlich-behördliche Amtsoptik: weißes Blatt auf grauem Schreibtisch. Rechteckig, kantig, dokumentarisch. WICHTIG - Isolation: Diese Datei wird ausschließlich auf Ratgeber-Ansichten geladen (siehe inc/ratgeber.php → mb_rg_is_view()). Jede Regel ist zusätzlich auf body.rg-body bzw. .rg-* gescoped. Startseite, Bestellformular, Seiten und Mahngerichte bleiben unberührt. Tokens aus assets/css/tokens.css; die im Briefing fest vorgegebenen Grautöne stehen als eigene --rg-* Variablen hier. ============================================================ */ :root{ /* Schreibtisch / Blatt */ --rg-desk: #e7ebee; /* grauer Schreibtisch */ --rg-paper: #ffffff; /* weißes Blatt */ --rg-tint: #f7f9fa; /* „Kurz gefasst" */ --rg-tint-2: #f2f5f7; /* Tabellen-Kopfzeile */ --rg-num: #647686; /* Ziffern im Verzeichnis. Gemessen 4,7:1 auf Weiß. Das im Briefing genannte #9fb0be lag bei 2,2:1 und fiel durch WCAG AA (4,5:1). */ --rg-rule: #d7dee4; /* Rahmen/Linien */ --rg-rule-soft: #e4e9ed; /* feine Untertrennung */ --rg-drop: #d0d8de; /* 2px-Absatz unter dem Blatt */ --rg-measure: 68ch; /* Lesebreite Fließtext */ } /* Der graue Schreibtisch gilt nur im Frontend, nicht im Editor. */ body.rg-body{ background: var(--rg-desk); } /* ============================================================ 1) BLATT-LAYOUT Zwei Spalten: Blatt + Aktenspalte (Sidebar). Beide sitzen im bestehenden .wrap, damit sie exakt mit Header/Footer fluchten. ============================================================ */ .rg-main{ background: var(--rg-desk); padding: 32px 0 56px; } .rg-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; } /* Spalten dürfen unter die Mindestbreite ihres Inhalts schrumpfen. Ohne das weitet eine breite Tabelle (min-content der Kopfzeile) das ganze Blatt auf. */ .rg-grid > *{ min-width: 0; } /* --- Brotkrume: steht auf dem Schreibtisch, nicht auf dem Blatt --- */ .rg-krumen{ margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; } .rg-krumen ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .rg-krumen li{ display: inline-flex; align-items: center; min-width: 0; } .rg-krumen a{ color: var(--c-primary-700); text-decoration: none; } .rg-krumen a:hover{ text-decoration: underline; } .rg-krumen [aria-current]{ color: var(--c-muted); } .rg-krumen-sep{ color: var(--rg-num); margin: 0 8px; } /* Das Blatt: rechteckig, 1px Rand, 2px Absatz - kein weiches Radius. */ .rg-sheet{ background: var(--rg-paper); border: 1px solid var(--rg-rule); box-shadow: 0 2px 0 var(--rg-drop); padding: 40px 44px 44px; } /* ============================================================ 2) BLATTKOPF - Rubrik, Titel, Lead, Aktenleiste ============================================================ */ .rg-kicker{ font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-primary-700); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .rg-kicker::before{ content: ""; width: 22px; height: 2px; background: var(--c-primary); } .rg-kicker a{ color: inherit; } .rg-sheet h1{ font-size: 32px; line-height: 1.18; letter-spacing: -0.015em; color: var(--c-ink); margin: 0 0 16px; } .rg-lead{ font-size: 18px; line-height: 1.6; color: var(--c-ink-soft); max-width: var(--rg-measure); margin: 0 0 22px; } /* --- Kopfzeile: Stand · Rechtsgrundlage · Redaktion --- Als einzeilige Kopfzeile direkt unter der Überschrift, durch 1px-Linien getrennt. Bewusst kein umlaufender Rahmen mehr: Als Kasten drängte sich die Zeile zwischen Überschrift und Lead und wirkte wie ein eigener Baustein. */ .rg-akte{ display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rg-rule); font-size: 14px; row-gap: 6px; } .rg-akte-feld{ display: flex; align-items: baseline; gap: 7px; padding: 0 14px; border-left: 1px solid var(--rg-rule); min-width: 0; } .rg-akte-feld:first-child{ padding-left: 0; border-left: 0; } .rg-akte-dt{ font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-muted); white-space: nowrap; } .rg-akte-dd{ margin: 0; color: var(--c-ink); line-height: 1.4; } .rg-akte-dd a{ color: var(--c-primary-700); } /* --- Abbildung im Blattkopf (Beitragsbild) --- */ .rg-abb{ margin: 0 0 32px; } .rg-abb img{ display: block; width: 100%; height: auto; border: 1px solid var(--rg-rule); } .rg-abb figcaption{ margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--c-muted); } /* ============================================================ 3) KURZ GEFASST ============================================================ */ /* Als Kernblöcke im Inhalt gebaut: Die Regeln brauchen mehr Spezifität als .rg-text ul und .rg-text p, sonst gewinnen deren Einrückung und Abstände. */ .rg-kurz, .rg-text .rg-kurz{ background: var(--rg-tint); border: 1px solid var(--rg-rule); padding: 18px 22px 20px; margin: 32px 0; max-width: none; } .rg-kurz-label, .rg-text .rg-kurz-label{ font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-primary-700); margin-bottom: 10px; } .rg-kurz ul, .rg-text .rg-kurz ul{ margin: 0; padding: 0; list-style: none; } .rg-kurz li, .rg-text .rg-kurz li{ position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.55; color: var(--c-ink); margin-bottom: 8px; } .rg-kurz li:last-child, .rg-text .rg-kurz li:last-child{ margin-bottom: 0; } .rg-kurz li::before, .rg-text .rg-kurz li::before{ content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--c-primary); } /* ============================================================ 4) INHALTSVERZEICHNIS - zweispaltig, im Text ============================================================ */ .rg-toc{ border-top: 2px solid var(--c-ink); margin: 36px 0 34px; padding-top: 12px; } .rg-toc-label{ font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); margin-bottom: 6px; } .rg-toc-list{ list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 36px; } .rg-toc-list li{ break-inside: avoid; border-bottom: 1px solid var(--rg-rule-soft); } /* Einträge in Amtsgrün (signalisiert Klickbarkeit); die Farbe kommt aus .rg-text a - hier nur Layout, keine konkurrierende color-Regel. */ .rg-toc-list a{ display: flex; gap: 12px; align-items: baseline; padding: 9px 0; font-size: 15px; line-height: 1.4; text-decoration: none; } .rg-toc-list a:hover{ color: var(--c-primary-700); text-decoration: underline; } .rg-toc-num{ flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--rg-num); font-variant-numeric: tabular-nums; } /* ============================================================ 5) FLIESSTEXT .rg-text ist der Editor-Container (the_content). ============================================================ */ .rg-text{ font-size: 17px; line-height: 1.68; color: var(--c-ink-soft); } .rg-text > *{ max-width: var(--rg-measure); } .rg-text > .rg-toc, .rg-text > .rg-tabelle, .rg-text > .rg-akkordeon, .rg-text > figure, .rg-text > .rg-cta{ max-width: none; } .rg-text > *:first-child{ margin-top: 0; } .rg-text p{ margin: 0 0 18px; } .rg-text h2{ font-size: 24px; line-height: 1.25; color: var(--c-ink); margin: 52px 0 16px; padding-top: 18px; border-top: 2px solid var(--c-ink); /* Abstand zur Oberkante beim Sprung aus dem Inhaltsverzeichnis. Großzügig, damit die Überschrift nicht bündig am Rand klebt - und damit sie für angemeldete Redakteure nicht unter der Admin-Leiste verschwindet. */ scroll-margin-top: 24px; max-width: none; } /* Angemeldet schiebt WordPress die Seite um die Höhe der Admin-Leiste nach unten; ohne diese Zugabe landet die Überschrift dahinter. */ body.admin-bar .rg-text h2, body.admin-bar .rg-text h3{ scroll-margin-top: 78px; } /* Kapitelnummer als Vorzeile - dieselbe Zählung wie im Inhaltsverzeichnis. Wird von mb_rg_content_toc() erzeugt, nicht per CSS-Counter, damit beide Nummerierungen zwingend übereinstimmen. */ .rg-kap-nr{ display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--c-primary-700); font-variant-numeric: tabular-nums; margin-bottom: 7px; } .rg-text h3{ font-size: 18px; line-height: 1.3; color: var(--c-ink); margin: 28px 0 10px; scroll-margin-top: 24px; } .rg-text h4{ font-size: 16px; color: var(--c-ink); margin: 22px 0 8px; } .rg-text a{ color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .rg-text a:hover{ color: var(--c-primary-700); } .rg-text strong{ color: var(--c-ink); font-weight: 600; } .rg-text ul, .rg-text ol{ margin: 0 0 18px; padding-left: 22px; } .rg-text li{ margin-bottom: 7px; } .rg-text img{ max-width: 100%; height: auto; } /* Bilder im Fließtext - gerahmt wie das Beitragsbild. Ohne Rahmen steht ein helles Bild ohne Kante im weißen Blatt und franst aus. */ .rg-text figure{ margin: 26px 0; } .rg-text figure img{ display: block; width: 100%; height: auto; border: 1px solid var(--rg-rule); } .rg-text figcaption{ font-size: 13.5px; color: var(--c-muted); line-height: 1.5; margin: 8px 0 0; } /* Ausrichtungen aus dem Editor. Das Theme kennt keine über die Blattbreite hinausgehenden Formate - „breit" und „vollbreit" sind deshalb gar nicht erst angeboten. Links und rechts umfließt der Text, ab 768px stapelt es. */ .rg-text .aligncenter{ margin-left: auto; margin-right: auto; } .rg-text .alignleft{ float: left; margin: 6px 26px 18px 0; max-width: 50%; } .rg-text .alignright{ float: right; margin: 6px 0 18px 26px; max-width: 50%; } .rg-text .alignleft img, .rg-text .alignright img{ width: 100%; } .rg-text h2{ clear: both; } .rg-text hr{ border: 0; border-top: 1px solid var(--rg-rule); margin: 32px 0; } .rg-text blockquote{ margin: 0 0 18px; padding: 2px 0 2px 18px; border-left: 3px solid var(--c-primary); color: var(--c-ink); } /* Fundstelle im Fließtext (§ 204 Abs. 1 Nr. 3 BGB) */ .rg-text .rg-norm{ white-space: nowrap; font-variant-numeric: tabular-nums; } /* ============================================================ 6) HINWEISBOX - 4px-Farbbalken links, getönter Grund Varianten: (Standard) Hinweis · .is-frist · .is-achtung ============================================================ */ .rg-hinweis{ --rg-hb: var(--c-primary); --rg-hbg: var(--c-primary-050); /* Farbe des Labels getrennt vom Balken: Der Balken ist Dekoration und darf hell sein, die Beschriftung muss auf ihrem Grund lesbar bleiben. */ --rg-hl: var(--rg-hb); border-left: 4px solid var(--rg-hb); background: var(--rg-hbg); padding: 16px 20px 17px; margin: 26px 0; font-size: 15.5px; line-height: 1.6; color: var(--c-ink-soft); max-width: var(--rg-measure); } /* Das Amber des Balkens erreicht auf getöntem Grund nur 3,45:1 - für 11,5px zu wenig. Das Label bekommt deshalb einen dunkleren Ton: 5,3:1. */ .rg-hinweis.is-frist{ --rg-hb: var(--c-warn); --rg-hbg: #fdf6e8; --rg-hl: #8f5b00; } .rg-hinweis.is-achtung{ --rg-hb: var(--c-accent); --rg-hbg: var(--c-accent-050); } .rg-hinweis-label{ font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rg-hl); margin-bottom: 7px; } .rg-hinweis p{ margin: 0 0 10px; } .rg-hinweis > *:last-child{ margin-bottom: 0; } /* ============================================================ 7) TABELLEN / VERGLEICHE Kopfzeile getönt + Uppercase-Label, Zahlen rechtsbündig tabular. .rg-tabelle ist der Scroll-Container um die . ============================================================ */ .rg-tabelle{ margin: 28px 0; max-width: 100%; overflow-x: auto; } .rg-tabelle table, .rg-text table{ width: 100%; border-collapse: collapse; border: 1px solid var(--rg-rule); font-size: 15px; background: var(--rg-paper); } .rg-tabelle th, .rg-text table th{ background: var(--rg-tint-2); text-align: left; padding: 10px 14px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-ink); border-bottom: 1px solid var(--rg-rule); white-space: nowrap; } .rg-tabelle td, .rg-text table td{ padding: 11px 14px; border-bottom: 1px solid var(--rg-rule-soft); color: var(--c-ink-soft); vertical-align: top; } .rg-tabelle tbody tr:nth-child(even) td, .rg-text table tbody tr:nth-child(even) td{ background: #fafcfd; } .rg-tabelle tr:last-child td, .rg-text table tr:last-child td{ border-bottom: 0; } /* Werte rechtsbündig, Ziffern in fester Breite */ .rg-tabelle th.rg-wert, .rg-tabelle td.rg-wert, .rg-text table th.rg-wert, .rg-text table td.rg-wert{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-ink); } .rg-quelle{ margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--c-muted); } .rg-tabelle caption{ caption-side: bottom; text-align: left; font-size: 13.5px; color: var(--c-muted); padding-top: 8px; line-height: 1.5; } /* --- Core-Block „Tabelle" liefert
--- */ .rg-text .wp-block-table{ margin: 28px 0; max-width: none; overflow-x: auto; } .rg-text .wp-block-table figcaption{ margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--c-muted); } /* --- Kollisionen mit WordPress' Inline-Block-Styles --- Weil functions.php „wp-block-library" entlädt, druckt WordPress die Styles der tatsächlich benutzten Blöcke inline in den . Sie stehen damit NACH dieser Datei und gewinnen bei gleicher Spezifität. Für Tabellen sind das Zellrahmen auf allen vier Seiten und eine 3px-Linie unter dem Kopf - beides widerspricht dem Aktenraster. Gezielt zurückgenommen; die höhere Spezifität über .rg-text ist hier der Zweck, nicht Nachlässigkeit. */ .rg-text .wp-block-table thead{ border-bottom: 0; } .rg-text .wp-block-table th, .rg-text .wp-block-table td{ border: 0; } .rg-text .wp-block-table th{ border-bottom: 1px solid var(--rg-rule); } .rg-text .wp-block-table td{ border-bottom: 1px solid var(--rg-rule-soft); } .rg-text .wp-block-table tr:last-child td{ border-bottom: 0; } /* ============================================================ 8) AKKORDEON -
, „+" rechts in Amtsfarbe Funktioniert mit dem Core-Block „Details" (dessen Inhalt liegt direkt im
) und mit handgeschriebenem Markup, das den Text in .rg-frage-text hüllt. ============================================================ */ .rg-akkordeon{ border-top: 1px solid var(--rg-rule); margin: 28px 0; } .rg-frage{ border-bottom: 1px solid var(--rg-rule); } .rg-frage > summary{ list-style: none; cursor: pointer; padding: 17px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16.5px; font-weight: 600; color: var(--c-ink); } .rg-frage > summary::-webkit-details-marker{ display: none; } .rg-frage > summary::after{ content: "+"; flex: 0 0 auto; width: 24px; text-align: center; font-size: 22px; font-weight: 400; line-height: 1; color: var(--c-primary); } .rg-frage[open] > summary::after{ content: "–"; } .rg-frage > summary:hover{ color: var(--c-primary-700); } .rg-frage-text, .rg-frage > :not(summary){ font-size: 15.5px; line-height: 1.65; color: var(--c-ink-soft); max-width: var(--rg-measure); } .rg-frage-text{ padding: 0 0 18px; } .rg-frage-text p{ margin: 0 0 10px; } .rg-frage-text > *:last-child{ margin-bottom: 0; } .rg-frage > :not(summary){ margin: 0 0 10px; } .rg-frage > :last-child{ margin-bottom: 18px; } /* ============================================================ 9) BUTTONS - rechteckig, 5px Radius, 1px Rand + 3px Unterkante Eigene Klasse .rg-btn: die bestehende .btn bleibt unverändert. Preis/Dauer/Garantie stehen IMMER als Text daneben - nie im Button. ============================================================ */ /* Zwei Erscheinungsformen desselben Buttons: .rg-btn - handgeschrieben (Aktenspalte) .wp-block-button__link - vom Core-Block „Button" erzeugt Der Core-Block hängt seine className an die HÜLLE, nicht an den . Deshalb wird hier der Anker adressiert und die Hülle unten neutralisiert. */ .rg-btn, .rg-text .wp-block-button__link{ display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 5px; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; background: var(--c-primary); color: #fff; border: 1px solid var(--c-primary-700); border-bottom-width: 3px; /* Tiefe statt Schatten */ transition: background .12s ease; } .rg-btn:hover, .rg-text .wp-block-button__link:hover{ background: var(--c-primary-700); color: #fff; text-decoration: none; } .rg-btn:active, .rg-text .wp-block-button__link:active{ /* Druck-Effekt: Unterkante einfahren, Button um denselben Betrag absenken */ border-bottom-width: 1px; transform: translateY(2px); } .rg-btn:focus-visible, .rg-text .wp-block-button__link:focus-visible{ outline: 2px solid var(--c-ink); outline-offset: 2px; } .rg-btn::after, .rg-text .wp-block-button__link::after{ content: "→"; font-weight: 400; } /* .rg-text a setzt Farbe UND Unterstreichung und ist spezifischer als eine reine Schaltflächen-Klasse. Ohne Gegenregel steht die Beschriftung grün auf grünem Grund und unterstrichen - also unsichtbar. Die Rechner bringen ihre Schaltfläche als a.btn mit, nicht als rg-btn; sie stand deshalb am 03.09.2026 unsichtbar im Beitrag. Wer hier eine neue Schaltflächen-Klasse einführt, muss sie in dieser Liste ergänzen. */ .rg-text a.rg-btn, .rg-text a.btn, .rg-text .wp-block-button__link{ color: #fff; text-decoration: none; } .rg-text a.rg-btn:hover, .rg-text a.btn:hover, .rg-text .wp-block-button__link:hover{ color: #fff; text-decoration: none; } /* Sicherheitsnetz: steht „rg-btn" versehentlich an der Block-Hülle (Gutenberg setzt className dorthin), entstünde ein zweiter Kasten um den Button. */ .rg-text .wp-block-button.rg-btn{ background: none; border: 0; padding: 0; border-radius: 0; display: inline-block; } .rg-text .wp-block-button.rg-btn::after{ content: none; } /* Core-Block „Buttons": die Flex-Hülle kommt sonst aus wp-block-library, die dieses Theme bewusst nicht lädt. */ .rg-text .wp-block-buttons{ display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; } .rg-text .wp-block-button{ margin: 0; } /* CTA-Block im Fließtext */ /* Antragskasten im Fließtext. Zuvor: getönter Grund, 1px-Rahmen ringsum und ein grüner Balken oben - ein Kasten im Kasten, der im weißen Blatt als Fremdkörper saß. Jetzt wie die Rubriken und der Antragskasten der Aktenspalte: 2px-Oberlinie in Tinte, weißer Grund, keine Tönung. Der einzige Farbakzent bleibt die Schaltfläche. */ .rg-cta{ border: 0; border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--rg-rule); background: none; padding: 20px 0 24px; margin: 40px 0; } .rg-cta p{ font-size: 15.5px; line-height: 1.6; color: var(--c-ink-soft); margin: 0 0 16px; max-width: var(--rg-measure); } /* Als Kernblöcke sind Titel und Konditionen ebenfalls

. Die Klassen brauchen daher mehr Spezifität als .rg-cta p, sonst gewinnt die Absatzregel. */ /* Kompakte Fassung für den frühen Kasten: dünnere Oberlinie, weniger Luft, damit er den Lesefluss nicht so anhält wie der Kasten weiter unten. */ .rg-cta.is-kompakt{ border-top-width: 1px; border-top-color: var(--rg-rule); padding: 16px 0 18px; margin: 0 0 32px; } .rg-cta.is-kompakt .rg-cta-titel{ font-size: 16px; } .rg-cta.is-kompakt p{ margin-bottom: 12px; } .rg-cta .rg-cta-titel{ font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--c-ink); margin: 0 0 10px; } /* ============================================================ 10) AKTENSPALTE (Sidebar) Eigenständige Blätter auf dem Schreibtisch, kein Radius. ============================================================ */ .rg-aside{ display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; } .rg-modul{ background: var(--rg-paper); border: 1px solid var(--rg-rule); box-shadow: 0 2px 0 var(--rg-drop); padding: 20px 22px 22px; } /* Antragskasten: bewusst KEIN Farbbalken oben und keine grüne Überschrift - das las sich als Produktkachel. Absetzung wie bei den Rubriken über eine 2px-Linie in Tinte. Der einzige Farbakzent bleibt die Schaltfläche. */ .rg-modul-antrag{ border-top: 2px solid var(--c-ink); } .rg-modul-antrag h2{ color: var(--c-ink); } /* Die Versprechen der Startseite als nüchterne Liste: ein Strich je Zeile, keine Häkchen, keine Farbflächen - sonst kippt der Kasten wieder ins Werbliche. */ .rg-versprechen{ list-style: none; margin: 0 0 16px; padding: 0; } .rg-versprechen li{ position: relative; padding: 7px 0 7px 18px; border-bottom: 1px solid var(--rg-rule-soft); font-size: 14.5px; line-height: 1.45; color: var(--c-ink); } .rg-versprechen li:first-child{ padding-top: 0; } .rg-versprechen li:first-child::before{ top: 9px; } .rg-versprechen li:last-child{ border-bottom: 0; padding-bottom: 0; } .rg-versprechen li::before{ content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: var(--c-primary); } .rg-modul h2{ font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-primary-700); margin: 0 0 14px; } .rg-modul p{ font-size: 14.5px; line-height: 1.6; color: var(--c-ink-soft); margin: 0 0 14px; } .rg-modul-liste{ list-style: none; margin: 0; padding: 0; } .rg-modul-liste li{ padding: 10px 0; border-bottom: 1px solid var(--rg-rule-soft); font-size: 14.5px; line-height: 1.5; } .rg-modul-liste li:first-child{ padding-top: 0; } .rg-modul-liste li:last-child{ border-bottom: 0; padding-bottom: 0; } .rg-modul-liste a{ color: var(--c-ink); text-decoration: none; } .rg-modul-liste a:hover{ color: var(--c-primary-700); text-decoration: underline; } .rg-modul-liste .rg-modul-datum{ display: block; font-size: 12.5px; color: var(--c-muted); margin-top: 3px; font-variant-numeric: tabular-nums; } /* --- Quellenblock am Blattende --- Eigener Kasten, kein Kleingedrucktes: Bei Rechtsinhalten sind die Fundstellen ein Beleg. Paragraphen nach Gesetz gebündelt, gepflegte Quellen getrennt darunter - sonst stünde ein BGH-Urteil neben „§ 204 BGB", als wäre beides dasselbe. */ .rg-quellen{ margin: 40px 0 0; border: 1px solid var(--rg-rule); padding: 16px 20px 18px; } .rg-quellen-label{ font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-soft); margin-bottom: 10px; } .rg-quellen-label.is-zweit{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rg-rule-soft); } /* Fundstellenverzeichnis: je Zeile ein Gesetz, Paragraphen aufsteigend. */ .rg-fundstellen{ margin: 0; } .rg-fundstellen > div{ display: grid; grid-template-columns: 4.5rem 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rg-rule-soft); font-size: 14px; line-height: 1.5; } .rg-fundstellen > div:first-child{ padding-top: 0; } .rg-fundstellen > div:last-child{ border-bottom: 0; padding-bottom: 0; } .rg-fundstellen dt{ font-weight: 600; color: var(--c-ink); letter-spacing: 0.02em; } .rg-fundstellen dd{ margin: 0; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; } .rg-fundstellen a{ color: var(--c-primary-700); white-space: nowrap; } /* Gepflegte Quellen: je Zeile eine Angabe, kein Verzeichnis-Raster. */ .rg-quellen-liste{ list-style: none; margin: 0; padding: 0; } .rg-quellen-liste li{ padding: 6px 0; border-bottom: 1px solid var(--rg-rule-soft); font-size: 14px; line-height: 1.5; } .rg-quellen-liste li:first-child{ padding-top: 0; } .rg-quellen-liste li:last-child{ border-bottom: 0; padding-bottom: 0; } .rg-quellen-liste a{ color: var(--c-primary-700); } .rg-quellen-liste span{ color: var(--c-ink-soft); } /* Inhalte aus dem Widget-Bereich tragen die Modul-Klasse und damit den Rahmen; ihre inneren Elemente brauchen noch die Ratgeber-Typografie. */ .rg-modul p{ font-size: 14.5px; line-height: 1.6; color: var(--c-ink-soft); margin: 0 0 14px; } .rg-modul > *:last-child{ margin-bottom: 0; } .rg-modul ul, .rg-modul ol{ margin: 0 0 14px; padding-left: 18px; font-size: 14.5px; line-height: 1.6; } .rg-modul li{ margin-bottom: 6px; } .rg-modul a:not(.rg-btn){ color: var(--c-primary-700); } /* --- Lightbox („Erweitern beim Klicken") --- WordPress bringt sie mit; die Voreinstellung ist ein weißer Vorhang mit voller Deckkraft. Auf einem weißen Blatt sieht man dann kaum, dass sich etwas geöffnet hat. Hier der graue Schreibtisch als Grund - dasselbe Prinzip wie im Seitenlayout: das Blatt liegt auf der Fläche. Nur zwei Eingriffe: Vorhangfarbe und Rahmen um das Bild. Die Schaltflächen nagelt WordPress mit „:not(:hover):not(:active):not(.has-background)" fest; das zu überbieten wäre ein Spezifitätswettlauf ohne Gewinn - das Kreuz ist auf dem grauen Grund gut lesbar. */ /* Der Vorhang bekommt seine Farbe als INLINE-Stil aus dem Markup, das WordPress im Footer ausgibt. Dagegen kommt eine normale Regel nicht an - „!important" ist hier die einzige Möglichkeit und deshalb bewusst gesetzt. Ohne das läge ein weißer Vorhang über einem weißen Blatt, und man sähe kaum, dass sich etwas geöffnet hat. */ body.rg-body .wp-lightbox-overlay .scrim{ background-color: var(--rg-desk) !important; opacity: 0.96; } body.rg-body .wp-lightbox-overlay img{ border: 1px solid var(--rg-rule); } /* Das Vergrößern-Symbol am Bild. WordPress setzt ein weißes Zeichen auf durchscheinendes Grau mit runden Ecken - die Formensprache des Editors, nicht die dieses Themes. Hier stattdessen eine kleine, kantige Schaltfläche auf weißem Grund, wie die übrigen Bedienelemente des Ratgebers. Die :not()-Kette ist keine Zierde: WordPress schützt seine Fassung mit genau dieser Kette, und die zählt drei Klassen. Ohne sie verliert jede Regel hier, egal wie lang der Selektor sonst ist. */ body.rg-body figure.wp-lightbox-container button.lightbox-trigger, body.rg-body figure.wp-lightbox-container button.lightbox-trigger:hover, body.rg-body figure.wp-lightbox-container button.lightbox-trigger:focus, body.rg-body figure.wp-lightbox-container button.lightbox-trigger:not(:hover):not(:active):not(.has-background){ width: 30px; height: 30px; display: grid; place-items: center; background: var(--rg-paper); border: 1px solid var(--rg-rule); border-radius: 2px; box-shadow: 0 1px 0 var(--rg-drop); } body.rg-body figure.wp-lightbox-container button.lightbox-trigger:hover:not(:active):not(.has-background){ border-color: var(--c-primary); background: var(--c-primary-050); } /* Das Zeichen trägt sein Weiß als Attribut im Markup; CSS sticht das. */ body.rg-body figure.wp-lightbox-container button.lightbox-trigger svg path{ fill: var(--c-ink); } body.rg-body figure.wp-lightbox-container button.lightbox-trigger:hover svg path{ fill: var(--c-primary-700); } /* ============================================================ 11) BLATTFUSS - Rechtsstand / Haftungshinweis ============================================================ */ /* Der Blattfuß ist ein