/*
Theme Name: Rechnungpronto
Theme URI: https://rechnungpronto.de
Author: rechnungpronto
Description: Darstellungsschicht für die Marketing-Seiten von rechnungpronto: Header, Footer, Seitengerüst. Alle Funktionen liegen im Plugin Rechnungpronto.
Version: 0.50.0
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: rechnungpronto
License: proprietär

ACHTUNG – GENERIERTES ARTEFAKT.
Dieser Ordner wird vom Plugin Rechnungpronto bei Aktivierung und bei jedem Versionssprung
aus wp-content/plugins/rechnungpronto/theme-src/rechnungpronto-theme/ überschrieben.
Änderungen hier gehen verloren. Gearbeitet wird ausschließlich in theme-src/.
*/

/* ---------- Fonts (lokal, kein Google-CDN – DSGVO) ---------- */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/poppins-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/poppins-800.woff2') format('woff2');
}
/* IBM Plex Sans liegt als Variable Font vor – eine Datei deckt 400–600 ab. */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400 600;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/ibm-plex-sans-var.woff2') format('woff2');
}

/* IBM Plex Mono – für Zahlen, Rechnungsnummern und Eyebrow-Zeilen. */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ---------- Basis ---------- */
:root {
	--rp-navy: #0F1E38;
	--rp-navy-hell: #1A2C4E;
	--rp-gelb: #F0C75A;
	--rp-gelb-tief: #E5B93F;
	--rp-papier: #FAF9F5;
	--rp-grau: #9AA5BD;
	--rp-linie: rgba(240, 199, 90, .18);

	/* Flaechen und Schrift des Seitenkoerpers – als eigene Marken, damit das dunkle
	   Design sie tauschen kann. --rp-navy bleibt dabei unangetastet: Es ist zugleich
	   Hintergrund (Kopf, Footer, Baender) und Schriftfarbe (heller Grund); ein Tausch
	   an der Wurzel wuerde die eine Rolle immer kaputtmachen. */
	--rp-flaeche: #FFFFFF;
	--rp-flaeche-2: #FAF9F5;
	--rp-text: #0F1E38;
	--rp-text-leise: #5A6478;
	--rp-kante: #E4E6EB;
}

/* ---------- Dunkles Design ----------
   Gegenstueck zum Backend: Ohne eigene Wahl gilt die Systemeinstellung, der Knopf im Kopf
   ueberschreibt sie und merkt sich das (localStorage „rp-modus"). Das Attribut setzt ein
   Inline-Skript im Kopf, damit die Seite nicht hell aufblitzt.
   Kopf, Footer und die Navy-Baender bleiben, wie sie sind – sie waren schon dunkel. */
html[data-rp-modus="dunkel"] {
	--rp-papier: #0A1421;
	--rp-flaeche: #132340;
	--rp-flaeche-2: #0F1C33;
	--rp-text: #E8EDF7;
	--rp-text-leise: #9AA5BD;
	--rp-kante: #23395E;
}

* { margin: 0; padding: 0; box-sizing: border-box }

/* Kein waagerechtes Scrollen – niemals.
   „clip" statt „hidden": hidden würde einen Scroll-Container erzeugen und damit den
   sticky Header lahmlegen. clip kappt nur den Überstand.
   Nötig ist das vor allem wegen der Vollbreiten-Bänder mit 100vw: vw rechnet die
   Scrollleiste mit, dadurch ragen sie am Desktop ein paar Pixel über den Rand. */
html {
	overflow-x: clip;
}

body {
	font-family: 'IBM Plex Sans', sans-serif;
	background: var(--rp-papier);
	color: var(--rp-text);
	overflow-x: clip;
	max-width: 100%;
}

img { max-width: 100%; height: auto }

/* 1168 = 1120 Inhalt + 2x24 Polster. Die Baender der Startseite sind volle Breite
   mit 24 px Polster und einem 1120 px breiten Kind darin – ihr Inhalt beginnt also
   24 px weiter links als ein zentrierter 1120er Rahmen. Mit 1168 stehen Kopf,
   Footer und Inhalt in einer Flucht. */
.rp-wrap { max-width: 1168px; margin: 0 auto; padding: 0 24px }

/* Skip-Link (a11y) */
.rp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--rp-gelb);
	color: var(--rp-navy);
	padding: 10px 16px;
	border-radius: 0 0 8px 0;
	font-weight: 600;
	z-index: 100;
}
.rp-skip:focus { left: 0 }

/* ---------- HEADER ---------- */
.rp-header {
	position: sticky;
	top: 0;
	z-index: 70;
	/* Deckend: Bei halbtransparentem Navy schimmerte der Seiteninhalt durch. */
	background: var(--rp-navy);
	border-bottom: 1px solid var(--rp-linie);
}
.rp-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Keine feste Höhe: Der Kopf wächst mit seinem Inhalt, das Polster hält den Abstand
	   nach oben und unten. Vorher hob ein transform die Bildmarke nur optisch an – ohne
	   Platz zu schaffen, weshalb sie an der Kante klebte. */
	/* Nur oben und unten: Die seitliche Polsterung kommt von .rp-wrap, damit der Kopf
	   denselben Rand hält wie der Inhalt der Seiten. Ein Kurzschreibweise-padding hätte
	   sie überschrieben. */
	padding-top: 22px;
	padding-bottom: 30px;
	gap: 20px;
}

/* Die Adminleiste liegt fix über allem – den sticky Header darunter schieben. */
body.admin-bar .rp-header { top: 32px }
@media (max-width: 782px) {
	body.admin-bar .rp-header { top: 46px }
}

/* Wortmarke – ueberall die reine Schrift, ohne Schleife und Blatt. Die Zeichnung
   bleibt dem Vollbild-Menue vorbehalten (.rp-overlay-doodle). */
.rp-marke {
	display: inline-flex;
	align-items: flex-end;
	text-decoration: none;
	font-size: 28px;
	letter-spacing: -.02em;
}
.rp-marke .m1 { font-family: 'Poppins', sans-serif; font-weight: 800; color: #fff }
.rp-marke .m2 { font-family: 'Poppins', sans-serif; font-weight: 300; color: var(--rp-gelb) }
.rp-marke:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 4px; border-radius: 6px }

/* Navigation */
.rp-nav { display: flex; align-items: center; gap: 26px }
.rp-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0 }
.rp-nav-aktionen { display: flex; align-items: center; gap: 26px }
/* Poppins wie im Vollbild-Menü und auf den Knöpfen – 600 statt 800, sonst wirkt die
   Schrift bei 15 px zu fett. */
.rp-nav a {
	color: #DCE3F0;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 15px;
}
.rp-nav a:hover { color: var(--rp-gelb) }
/* Nummern wie im Vollbild-Menü – nur schlicht und klein. */
.rp-nav .rp-nummer {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: 10px;
	color: var(--rp-gelb);
	vertical-align: super;
	margin-right: 6px;
}
.rp-nav a:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 3px; border-radius: 4px }
.rp-login { color: #fff !important; font-weight: 600 }
.rp-btn {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 15px;
	background: var(--rp-gelb);
	color: var(--rp-navy) !important;
	padding: 10px 20px;
	border-radius: 8px;
	transition: transform .12s ease;
}
.rp-btn:hover { background: var(--rp-gelb-tief); transform: translateY(-2px) }

/* Umschalter Hell/Dunkel im Kopf – dieselbe Gestaltung wie im Backend: ein stiller
   Icon-Knopf, kein beschrifteter Menuepunkt. Beide Zeichen liegen uebereinander im selben
   Rasterfeld, sichtbar ist immer nur eines. */
.rp-modus-knopf {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	color: var(--rp-gelb);
	cursor: pointer;
	transition: background .12s ease;
}
.rp-modus-knopf[hidden] { display: none }
.rp-modus-knopf:hover { background: rgba(255, 255, 255, .14) }
.rp-modus-knopf:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 3px }
.rp-modus-knopf svg {
	width: 19px;
	height: 19px;
	grid-area: 1 / 1;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
html[data-rp-modus="hell"] .rp-icon-mond { display: none }
html[data-rp-modus="dunkel"] .rp-icon-sonne { display: none }

/* Im Vollbild-Menue traegt der Knopf zusaetzlich Text – dort steht er in einer Liste
   beschrifteter Punkte und waere als blosses Zeichen ein Fremdkoerper. */
.rp-menue-modus { margin-top: 18px }
.rp-menue-modus .rp-modus-knopf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	padding: 11px 18px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--rp-gelb);
}
.rp-menue-modus .rp-modus-knopf svg { grid-area: auto; flex: none }
.rp-nav-aktionen .rp-modus-text { display: none }

/* Burger (mobil) */
.rp-burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; margin: -10px }
.rp-burger span {
	display: block;
	width: 24px;
	height: 2.5px;
	background: #fff;
	border-radius: 2px;
	margin: 5px 0;
	transition: .2s;
}
.rp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg) }
.rp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.rp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg) }
.rp-burger:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 2px; border-radius: 6px }

/* Verwaltungs-Reiter – sehen nur Angemeldete mit Rechten.
   Er klebt als gelber Reiter unten links am Bildrand. Die Schrift läuft senkrecht von
   Nur das Zahnrad, ohne Schriftzug: Der Reiter bleibt schmal und nimmt der Seite keine
   Breite. Unten statt mittig, weil er dort keinen Inhalt auf Lesehöhe verdeckt. Er steht
   ausserhalb der Navigation, weil er kein Menuepunkt fuer Besucher ist, sondern ein
   Werkzeug fuer den Betreiber. */
.rp-verwaltung {
	position: fixed;
	left: 0;
	/* Grundstellung ist das Smartphone: unten, wo der Daumen liegt und der Reiter keine
	   Kopfzeile verdeckt. Am Desktop rueckt er nach oben (siehe Media Query weiter unten). */
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 9px;
	background: var(--rp-gelb);
	border-radius: 0 10px 10px 0;
	box-shadow: 0 6px 20px rgba(15, 30, 56, .28);
	/* Der Reiter steht ausserhalb von .rp-nav und erbt dessen Regel nicht – ohne das hier
	   unterstreicht der Browser die Schrift. */
	text-decoration: none;
	line-height: 1;
	color: var(--rp-navy) !important;
	transition: padding-right .18s ease, box-shadow .18s ease;
}
.rp-verwaltung:hover,
.rp-verwaltung:focus-visible {
	color: var(--rp-navy) !important;
	/* Ein kleiner Schubs nach rechts statt eines Farbwechsels: Gelb auf Gelb liesse sich
	   kaum abstufen, ohne die Signalwirkung zu verlieren. */
	padding-right: 13px;
	box-shadow: 0 8px 26px rgba(15, 30, 56, .38);
}
.rp-verwaltung:focus-visible { outline: 3px solid var(--rp-navy); outline-offset: -3px }
.rp-verwaltung svg {
	width: 19px;
	height: 19px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Am Desktop oben in die Ecke: Dort ist der Reiter das Gegenstueck zum „Website"-Reiter
   im Backend (der ebenfalls oben sitzt) und stoert nicht im Lesefluss der langen
   Startseite. Auf dem Handy bleibt er unten – dort ist die obere Ecke fuer den Daumen
   schlecht erreichbar. Schwelle wie beim Burger (861 px). */
@media (min-width: 861px) {
	.rp-verwaltung { bottom: auto; top: 24px }
}

@media (prefers-reduced-motion: reduce) {
	.rp-verwaltung { transition: none }
}

/* Mobil sowie im Overlay-Stil übernimmt das Vollbild-Menü.
   Auf dem Handy bleibt oben nur Wortmarke und Burger: Links, Login und Buttons stehen
   alle im Menü, und nebeneinander wirkte der Kopf gedrängt. Dafür darf die Marke größer. */
@media (max-width: 860px) {
	.rp-burger { display: block }
	.rp-nav { display: none }
}
body.rp-nav-overlay .rp-burger { display: block }
body.rp-nav-overlay .rp-nav .rp-menu { display: none }

/* ---------- INHALT ---------- */
#rp-inhalt { min-height: 50vh }

/* Sprungziele nicht unter den sticky Header rutschen lassen. */
#rp-inhalt [id] { scroll-margin-top: 104px }
body.admin-bar #rp-inhalt [id] { scroll-margin-top: 136px }

/* Seiten, die ihr Layout selbst mitbringen (Startseite, Landingpages): kein Wrapper,
   kein Abstand – sonst entsteht über dem ersten Vollbreiten-Band ein heller Streifen. */
.rp-inhalt-frei > * { max-width: none; margin: 0 }

/* Gutenberg-Grundlayout: normale Blöcke zentriert, alignfull darf ausbrechen. */
.rp-inhalt-innen > * {
	max-width: 1168px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.rp-inhalt-innen > .alignwide { max-width: 1328px }
.rp-inhalt-innen > .alignfull { max-width: none; padding-left: 0; padding-right: 0 }
.rp-inhalt-innen > * + * { margin-top: 24px }
.rp-inhalt-innen h1, .rp-inhalt-innen h2, .rp-inhalt-innen h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	line-height: 1.2;
}
.rp-inhalt-innen p, .rp-inhalt-innen li { line-height: 1.7 }
.rp-inhalt-innen a { color: var(--rp-text) }
html[data-rp-modus="dunkel"] .rp-inhalt-innen a { color: var(--rp-gelb) }
.rp-inhalt-innen a:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 3px; border-radius: 4px }

/* Abstand nur für schmucklose Standardseiten (Impressum & Co.). */
.rp-seite .rp-inhalt-innen { padding-top: 56px; padding-bottom: 72px }

/* ---------- Schwarzwald im Datenschutz-Band ----------
   „Gegruendet im Schwarzwald" steht als Text in diesem Abschnitt – die Silhouette macht
   daraus ein Bild, ohne es auszusprechen. Bewusst sehr leise (6 % Deckkraft): Sie soll am
   Rand mitschwingen, nicht als Illustration auftreten.

   Als Maske eingebunden, nicht als Bild: So kommt die Farbe aus dem Theme und geht das
   dunkle Design von selbst mit. Die Zeichnung liegt in assets/schwarzwald.svg.

   Rein dekorativ – deshalb ein ::after ohne Inhalt und ohne Platz im Textfluss; für
   Vorlesewerkzeuge existiert sie nicht. */
.rp-datenband { position: relative }
.rp-datenband::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	/* 569 x 150 ist das Seitenverhaeltnis der Zeichnung. Bei voller Breite steht sie damit
	   in ihrer gedachten Hoehe; wird der Kasten schmaler, schrumpft sie mit („contain")
	   und die Baeume werden niedriger – der Wald bleibt am Rand, statt anzuwachsen. */
	width: min(569px, 44%);
	height: 150px;
	background: var(--rp-navy);
	opacity: .06;
	pointer-events: none;
	-webkit-mask: url('assets/schwarzwald.svg') right bottom / contain no-repeat;
	mask: url('assets/schwarzwald.svg') right bottom / contain no-repeat;
}
/* ---------- Der Bollenhut: das Osterei ----------
   Er versteckt sich auf der ganzen Startseite, nicht nur im Datenschutz-Band: in den
   Ecken der Baender und – als schoenster Platz – auf einem Wipfel des Schwarzwalds.
   Welcher es wird, entscheidet das Skript bei jedem Aufruf neu.

   Die Ecken funktionieren, weil jedes Band 88 px Polster oben und unten hat: Dort steht
   nie Text, der Hut kann also nichts verdecken. Die Siegelzeile ist deshalb kein Platz –
   sie hat nur 30 px.

   Anders als der Wald ist der Hut kein Pseudo-Element, sondern ein echter Knopf: Er muss
   anklickbar und mit der Tastatur erreichbar sein. Eingesetzt wird er vom Skript; ohne
   JavaScript gibt es ihn nicht, und das ist richtig so – ein Hut, der sich nicht oeffnen
   laesst, waere nur ein Fleck. */
.rp-hut-wirt { position: relative }

.rp-bollenhut {
	position: absolute;
	z-index: 2;
	width: 46px;
	height: 36px;
	padding: 0;
	border: 0;
	background: url('assets/bollenhut.svg') center / contain no-repeat;
	opacity: .38;
	cursor: pointer;
	/* Der Ursprung liegt unten: Beim Vergroessern soll der Hut nicht in seinen Platz
	   sacken, sondern von ihm abheben. */
	transform-origin: 50% 100%;
	transition: opacity .18s ease, transform .18s ease;
}

/* Auf den dunklen Baendern geht das Beige des Strohs unter – dort darf er kraeftiger. */
.rp-navy .rp-bollenhut { opacity: .55 }

/* Die vier Ecken. Der Abstand haelt den Hut im Polster des Bandes. */
.rp-bollenhut.rp-eck-ol { top: 26px; left: 28px }
.rp-bollenhut.rp-eck-or { top: 26px; right: 28px }
.rp-bollenhut.rp-eck-ul { bottom: 26px; left: 28px }
.rp-bollenhut.rp-eck-ur { bottom: 26px; right: 28px }

/* Der Platz auf dem Wipfel. Groesse und Position haengen an der Waldbreite, damit der Hut
   bei jeder Bildschirmbreite auf seinem Baum bleibt; die Faktoren setzt das Skript.
   Nur oberhalb von 900 px – darunter ist der Wald ausgeblendet. */
.rp-datenband {
	--rp-wald-breite: min(569px, 44%);
	--rp-hut-rechts: .3023;
	--rp-hut-unten: .1835;
}
.rp-bollenhut.rp-wipfel {
	right: calc(var(--rp-wald-breite) * var(--rp-hut-rechts));
	bottom: calc(var(--rp-wald-breite) * var(--rp-hut-unten));
	width: calc(var(--rp-wald-breite) * .08);
	height: calc(var(--rp-wald-breite) * .0624);
}

/* Aufmerksamkeit beim Darueberfahren: Der Hut tritt hervor und hebt leicht ab – gerade
   genug, dass man merkt, hier ist etwas. */
.rp-bollenhut:hover,
.rp-bollenhut:focus-visible,
.rp-bollenhut[aria-expanded="true"] {
	opacity: 1;
	transform: translateY(-14%) scale(1.35);
}
.rp-bollenhut:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 6px; border-radius: 4px }

/* Der Fund. Steht neben dem Hut und zeigt mit dem Zipfel auf ihn. */
.rp-bollenhut-fund {
	position: absolute;
	z-index: 3;
	width: max-content;
	max-width: min(290px, calc(100vw - 48px));
	padding: 18px 22px;
	background: var(--rp-navy);
	color: #fff;
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(15, 30, 56, .28);
	font-size: 14.5px;
	line-height: 1.55;
	text-align: left;
	/* Zugeklappt nicht nur unsichtbar, sondern auch nicht antippbar und nicht vorlesbar. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.rp-bollenhut-fund.offen { opacity: 1; visibility: visible; transform: none }

/* Vorrang vor dem Seiteninhalt.
   Die Baender der Startseite setzen `.rp-band > * { max-width: 1120px; margin: 0 auto }`
   – und Hut wie Karte sind direkte Kinder eines Bandes, also mitgemeint. Beide Regeln
   haben dieselbe Spezifitaet, und bei Gleichstand gewinnt die spaetere: Der <style>-Block
   des Inhalts steht im Koerper der Seite, dieses Stylesheet im Kopf. Ohne das #rp-inhalt
   davor wuchs die Karte auf 1120 px und lief seitlich aus dem Bild. */
#rp-inhalt .rp-bollenhut,
#rp-inhalt .rp-bollenhut-fund { margin: 0 }
#rp-inhalt .rp-bollenhut { max-width: none }
#rp-inhalt .rp-bollenhut-fund { max-width: min(290px, calc(100vw - 48px)) }

/* Sitzt der Hut oben, klappt die Karte nach unten auf – und umgekehrt. Der Zipfel zeigt
   jeweils zurueck zum Hut. */
.rp-bollenhut-fund.rp-eck-ol,
.rp-bollenhut-fund.rp-eck-or { top: 74px }
.rp-bollenhut-fund.rp-eck-ul,
.rp-bollenhut-fund.rp-eck-ur { bottom: 74px }
.rp-bollenhut-fund.rp-eck-ol,
.rp-bollenhut-fund.rp-eck-ul { left: 24px }
.rp-bollenhut-fund.rp-eck-or,
.rp-bollenhut-fund.rp-eck-ur { right: 24px }

.rp-bollenhut-fund.rp-wipfel {
	right: max(24px, calc(var(--rp-wald-breite) * (var(--rp-hut-rechts) + .04) - 34px));
	bottom: calc(var(--rp-wald-breite) * (var(--rp-hut-unten) + .0624) + 16px);
}

.rp-bollenhut-fund:after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	background: var(--rp-navy);
	transform: rotate(45deg);
}
.rp-bollenhut-fund.rp-eck-ol:after,
.rp-bollenhut-fund.rp-eck-or:after { top: -7px }
.rp-bollenhut-fund.rp-eck-ul:after,
.rp-bollenhut-fund.rp-eck-ur:after,
.rp-bollenhut-fund.rp-wipfel:after { bottom: -7px }
.rp-bollenhut-fund.rp-eck-ol:after,
.rp-bollenhut-fund.rp-eck-ul:after { left: 30px }
.rp-bollenhut-fund.rp-eck-or:after,
.rp-bollenhut-fund.rp-eck-ur:after,
.rp-bollenhut-fund.rp-wipfel:after { right: 34px }

.rp-bollenhut-fund b {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 6px;
}
.rp-bollenhut-fund p { margin: 0 0 12px; color: #C4CCDD }

/* Der Code ist selbst ein Knopf: ein Klick legt ihn in die Zwischenablage. */
.rp-bollenhut-code {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px;
	border: 1px dashed rgba(240, 199, 90, .6);
	border-radius: 8px;
	background: none;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--rp-gelb);
	cursor: pointer;
}
.rp-bollenhut-code:hover { background: rgba(240, 199, 90, .12) }
.rp-bollenhut-code:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 3px }
.rp-bollenhut-code small { font-size: 11.5px; letter-spacing: 0; color: var(--rp-grau) }

@media (prefers-reduced-motion: reduce) {
	.rp-bollenhut, .rp-bollenhut-fund { transition: none }
}


html[data-rp-modus="dunkel"] .rp-datenband::after {
	background: var(--rp-text);
	opacity: .1;
}

/* Auf schmalen Geraeten stehen die Punkte untereinander und fuellen den Abschnitt bis
   zur Unterkante – dort waere der Wald kein Rand mehr, sondern Untergrund. */
@media (max-width: 900px) {
	.rp-datenband::after { display: none }
}

/* ---------- Leistungsliste der Startseite ----------
   Nachbesserungen an der Tabelle im Seiteninhalt. Wie beim Wald gilt: Der Inhalt wird
   redaktionell gepflegt, die Gestaltung gehoert ins Theme – deshalb hier und nicht dort.

   Der Gesamtbetrag fehlte auf dem Handy – aus zwei Gruenden, die sich ueberlagert haben:

   1. Unter 640 px blendet der Seiteninhalt die Nummernspalte aus (`th:first-child` und
      `td.p`), die Schlusszeile beginnt aber mit einer klassenlosen Leerzelle. Die blieb
      stehen, die Zeile hatte damit eine Spalte mehr als alle anderen.
   2. Die Betragszelle traegt `white-space: nowrap`, und darin steht die Unterzeile
      „pro Monat · monatlich kuendbar" – rund 29 Zeichen, die nicht umbrechen duerfen.
      Die Zelle fordert damit mehr Breite, als ein Handydisplay hat; zusammen mit dem
      Wort „Gesamtbetrag" daneben sprengte die Zeile die Tabelle, die den Ueberstand
      wegen `overflow: hidden` abschnitt.

   Behoben wird beides, ohne die Zeile aus dem Tabellenlayout zu loesen: Die Leerzelle
   verschwindet mit der Nummernspalte, und die Betragszelle darf umbrechen – die
   Unterzeile laeuft dann ueber zwei Zeilen.

   Nicht mit `display: block` auf den Zellen: Damit faellt die Zeile aus dem Spaltenraster,
   die Bloecke nehmen nur noch die Breite der ersten Spalte ein, und der Rest der
   Tabellenbreite steht als weisse Flaeche daneben. */
@media (max-width: 640px) {
	#rp-inhalt .rp-liste tr.s td:first-child { display: none }
	#rp-inhalt .rp-liste tr.s .b,
	#rp-inhalt .rp-liste tr.s .b em { white-space: normal }
}

/* „inklusive" stand in der Grundschriftgroesse und wog dadurch schwerer als die Leistung,
   zu der es gehoert. Es ist eine Bestaetigung, keine Ansage – also kleiner.
   Ausgenommen ist die Schlusszeile: Deren Betrag soll gross bleiben. */
#rp-inhalt .rp-liste tr:not(.s) td.b { font-size: 13.5px }

/* ---------- Dunkles Design: Seiten mit eigenem Layout ----------
   Startseite und Landingpages bringen ihr Aussehen als eigenen <style>-Block im
   Seiteninhalt mit und setzen dort eigene Marken auf #rp-inhalt. Die werden hier
   ueberschrieben statt im Seiteninhalt geaendert: Der Inhalt wird redaktionell gepflegt,
   das Aussehen gehoert ins Theme.

   Die Navy-Baender (Hero, Siegelzeile, Schlussband) bleiben unangetastet – sie waren
   schon dunkel. Umgedreht werden nur die hellen Baender. */
html[data-rp-modus="dunkel"] #rp-inhalt {
	--rp-papier: #0F1C33;
	--rp-weiss: #132340;
	--rp-linie: #23395E;
	--rp-grau: #9AA5BD;
}
html[data-rp-modus="dunkel"] #rp-inhalt .rp-band.rp-papier,
html[data-rp-modus="dunkel"] #rp-inhalt .rp-band.rp-weissbg {
	color: var(--rp-text);
	border-color: var(--rp-kante);
}

/* Alles, was sich auf den hellen Baendern fest auf Navy gesetzt hat, erbt jetzt die
   Schriftfarbe des Bandes. „inherit" statt einer festen Farbe: So bleibt eine einzige
   Stelle massgeblich, auch wenn im Inhalt neue Ueberschriften dazukommen.
   Ausgenommen ist der gelbe Postversand-Kasten – der behaelt seinen dunklen Text auf
   Gelb, sonst waere er unlesbar. */
html[data-rp-modus="dunkel"] #rp-inhalt :is(.rp-papier, .rp-weissbg) :is(h1, h2, h3, h4, summary, strong, b, em, td, th):not(.rp-post, .rp-post *) {
	color: inherit;
}

/* Der leise Grauton der Fliesstexte trug auf Papier #5A6478 – auf dunklem Grund zu dunkel. */
html[data-rp-modus="dunkel"] #rp-inhalt :is(.rp-papier, .rp-weissbg) :is(.rp-intro, .rp-klein, .rp-hin, .rp-daten-punkt p, .rp-stufe p, .rp-faq-item p):not(.rp-post *) {
	color: var(--rp-text-leise);
}

/* ---------- FOOTER ---------- */
.rp-footer { background: var(--rp-navy); color: var(--rp-grau); margin-top: 0 }
.rp-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding: 56px 0 40px;
}
@media (max-width: 760px) {
	.rp-footer-grid { grid-template-columns: 1fr; gap: 28px }
}
/* Die Wortmarke steht im Footer kleiner als im Kopf (19 statt 28 px). Bewusst hier und
   nicht an der Grundregel: der Kopf bleibt dadurch unangetastet.
   Kein Umbruch: Sie bleibt auch in der schmalen Footer-Spalte in einer Zeile. */
.rp-footer .rp-marke { font-size: 19px; white-space: nowrap }
.rp-footer-claim { margin-top: 12px; font-size: 14.5px; line-height: 1.7; max-width: 34ch }
.rp-footer h4 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}
.rp-footer ul { list-style: none }
.rp-footer li { margin-bottom: 9px }
.rp-footer a { color: var(--rp-grau); text-decoration: none; font-size: 14.5px }
.rp-footer a:hover { color: var(--rp-gelb) }
.rp-footer a:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 3px; border-radius: 4px }
.rp-footer-unten {
	border-top: 1px solid var(--rp-linie);
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13px;
}

/* Touch-Ziele im Footer auf ≥ 44 px bringen, ohne die Optik zu ändern. */
@media (max-width: 760px) {
	.rp-footer li { margin-bottom: 0 }
	.rp-footer li a { display: inline-block; padding: 11px 0 }
}


/* ---------- VOLLBILD-MENÜ ---------- */

/* Scroll-Sperre am <html>: hält die Scrollposition, anders als ein position:fixed am Body. */
html.rp-gesperrt { overflow: hidden }

.rp-burger { position: relative; z-index: 80 }

.rp-overlay {
	position: fixed;
	inset: 0;
	z-index: 75;
	visibility: hidden;
	pointer-events: none;
}
.rp-overlay.sichtbar { visibility: visible; pointer-events: auto }

/* Doppelter Wipe-Vorhang: erst Gelb, dann Navy darüber – ergibt den kurzen gelben Blitz. */
.rp-wipe { position: absolute; inset: 0; transform: translateY(-101%) }
.rp-wipe-gelb { background: var(--rp-gelb); transition: transform .45s cubic-bezier(.77, 0, .18, 1) }
.rp-wipe-navy { background: var(--rp-navy); transition: transform .55s cubic-bezier(.77, 0, .18, 1) .1s }
.rp-overlay.offen .rp-wipe { transform: translateY(0) }

/* Schließen: nach oben hinaus, Navy zuerst. */
.rp-overlay.schliesst .rp-wipe-navy { transform: translateY(-101%); transition: transform .4s cubic-bezier(.77, 0, .18, 1) }
.rp-overlay.schliesst .rp-wipe-gelb { transform: translateY(-101%); transition: transform .4s cubic-bezier(.77, 0, .18, 1) .08s }

/* Menü-Inhalt */
.rp-menue {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 90px 24px 110px;
	max-width: 1120px;
	margin: 0 auto;
}
.rp-menue ul { list-style: none; margin: 0; padding: 0 }
.rp-menue li { opacity: 0; transform: translateY(36px) }
.rp-overlay.offen .rp-menue li {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .45s ease-out, transform .45s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(.35s + var(--i) * .07s);
}
.rp-overlay.schliesst .rp-menue li { opacity: 0; transform: translateY(0); transition: opacity .15s ease }
.rp-menue a {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 6vw, 52px);
	letter-spacing: -.02em;
	line-height: 1.3;
	padding: 6px 0;
}
.rp-menue a:hover { color: var(--rp-gelb) }
.rp-menue a:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 4px; border-radius: 6px }
.rp-nummer {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: .35em;
	color: var(--rp-gelb);
	vertical-align: super;
	margin-right: 10px;
}
.rp-menue-cta a {
	color: var(--rp-navy);
	background: var(--rp-gelb);
	font-size: clamp(18px, 2.4vw, 22px);
	padding: 14px 30px;
	border-radius: 10px;
	margin-top: 18px;
}
.rp-menue-cta a:hover { background: var(--rp-gelb-tief); color: var(--rp-navy) }

/* Fußzeile des Overlays */
.rp-overlay-fuss {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 26px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--rp-grau);
	opacity: 0;
	transform: translateY(14px);
}
.rp-overlay.offen .rp-overlay-fuss {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .4s ease .75s, transform .4s ease .75s;
}
.rp-overlay.schliesst .rp-overlay-fuss { opacity: 0; transition: opacity .12s ease }
.rp-overlay-fuss a { color: var(--rp-grau); text-decoration: none }
.rp-overlay-fuss a:hover { color: var(--rp-gelb) }
.rp-overlay-fuss a:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 3px; border-radius: 4px }

/* Das Doodle segelt von links unten herein. */
.rp-overlay-doodle {
	position: absolute;
	right: 4%;
	bottom: 9%;
	width: min(220px, 32vw);
	opacity: 0;
	transform: translate(-40px, 40px) rotate(-4deg);
	pointer-events: none;
}
.rp-overlay.offen .rp-overlay-doodle {
	opacity: 1;
	transform: translate(0, 0) rotate(0);
	transition: opacity .5s ease .75s, transform .5s cubic-bezier(.22, 1, .36, 1) .75s;
}
.rp-overlay.schliesst .rp-overlay-doodle { opacity: 0; transition: opacity .12s ease }
.rp-overlay-doodle path, .rp-overlay-doodle rect, .rp-overlay-doodle line {
	stroke: var(--rp-gelb);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Bei kleiner Höhe (Querformat) das Doodle weglassen – sonst überlagert es das Menü. */
@media (max-height: 560px) {
	.rp-overlay-doodle { display: none }
	.rp-menue { padding: 70px 24px 80px; justify-content: flex-start; overflow-y: auto }
}

/* Reduzierte Bewegung: alles nur ein einfacher Fade. */
@media (prefers-reduced-motion: reduce) {
	.rp-wipe, .rp-menue li, .rp-overlay-fuss, .rp-overlay-doodle, .rp-burger span { transition: none !important }
	.rp-overlay { opacity: 0; transition: opacity .15s ease }
	.rp-overlay.offen { opacity: 1 }
	.rp-overlay.offen .rp-wipe { transform: translateY(0) }
	.rp-overlay.offen .rp-menue li,
	.rp-overlay.offen .rp-overlay-fuss,
	.rp-overlay.offen .rp-overlay-doodle { opacity: 1; transform: none }
}

/* Der Verwaltungs-Zugang steckt nicht mehr im Overlay, sondern im Reiter am linken
   Rand (siehe .rp-verwaltung). Über dem geöffneten Menü muss er weichen – dort führt
   der Schließen-Knopf zurück, und zwei Ziele am selben Rand verwirren. */
body:has(.rp-overlay.offen) .rp-verwaltung { opacity: 0; pointer-events: none }

/* Schließen-Knopf im Overlay.
   Der Burger im Header liegt unter dem Overlay (Header z-index 70, Overlay 75), sein
   X-Morph wäre also verdeckt. Deshalb hier ein eigener Knopf – gleiche Position wie der
   Burger, damit der Daumen ihn dort findet, wo er getippt hat. */
.rp-overlay-zu {
	position: absolute;
	top: 12px;
	right: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: none;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease;
}
.rp-overlay.offen .rp-overlay-zu { opacity: 1; transition: opacity .3s ease .35s }
.rp-overlay.schliesst .rp-overlay-zu { opacity: 0; transition: opacity .12s ease }
.rp-overlay-zu svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
}
.rp-overlay-zu:hover svg { stroke: var(--rp-gelb) }
.rp-overlay-zu:focus-visible { outline: 3px solid var(--rp-gelb); outline-offset: 2px }

body.admin-bar .rp-overlay-zu { top: 44px }
@media (max-width: 782px) {
	body.admin-bar .rp-overlay-zu { top: 58px }
}

/* Der CTA darf nie umbrechen – „Zur App" stand sonst zweizeilig im Header. */
.rp-btn { white-space: nowrap }

/* Auf schmalen Geräten Marke und Button etwas zurücknehmen, damit alles in eine Zeile passt. */
@media (max-width: 600px) {
	.rp-header-inner { padding-top: 16px; padding-bottom: 22px; gap: 12px }
	.rp-marke { font-size: 22px }
}

/* Deutschland-Flagge – schlicht, ohne Rahmen. */
.rp-flagge {
	width: 1.4em;
	height: .84em;
	border-radius: 2px;
	/* „middle" richtet die Mitte der Flagge an der Mitte der Kleinbuchstaben aus –
	   ein fester Versatz sitzt je nach Schriftgröße daneben. */
	vertical-align: middle;
	position: relative;
	top: -.05em;
	margin-left: .4em;
}

/* Herz in der Herkunftszeile – gleiche Ausrichtung wie die Flagge. */
.rp-herz {
	width: .95em;
	height: .87em;
	vertical-align: middle;
	position: relative;
	top: -.08em;
	margin: 0 .12em;
}

/* Die Herkunftszeile steht in der Mitte der Fußleiste. Bricht die Leiste auf schmalen
   Geräten um, rutscht sie unter die Impressumszeile – dort steht sie linksbündig wie
   die anderen, statt in der Mitte zu hängen. */
.rp-footer-made { white-space: nowrap }

/* Vertrauenszeile im Vollbild-Menü, direkt unter dem Knopf. */
.rp-menue-hinweis {
	margin-top: 16px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 14.5px;
	color: var(--rp-grau);
}