/* ===================================================================
* RECHTSSEITEN — Impressum, AGB, Datenschutz, Widerruf, Fernunterricht
* (Etappe C, Sitzung „Programmierer 3", §154)
*
* LAYOUT: gestapelt, 1:1 die Rechtsseiten von leano.
* Überschrift steht auf EIGENER Zeile links (x=100),
* der Text darunter eingerückt (x=300, Breite 880).
* Beim Impressum stehen Überschrift UND Text bündig eingerückt (.recht--buendig).
*
* ⛔ NICHT nebeneinander setzen. Das ist dreimal falsch gemacht worden.
*
* ⚠ WARUM EINE EIGENE DATEI und kein Abschnitt in fundament.css:
* An Etappe C arbeiten drei Sitzungen gleichzeitig (§154). fundament.css ist
* geteiltes Gebiet — ein Anhängen von hier hätte die Arbeit der anderen
* überschreiben können. Diese Datei gehört allein zu den Rechtsseiten.
*
* ⚠ WARUM SIE NICHT ÜBER wp_enqueue_style KOMMT:
* Der Vorschauschalter (inc/lp-vorschau.php) räumt jedes Stil-Handle ab, das
* nicht auf seiner Behalten-Liste steht — und diese Liste zu ergänzen hieße,
* eine geteilte Datei anzufassen. Die Vorlagen geben den Verweis deshalb
* selbst im Kopf aus (siehe teil-recht.php, lp_recht_stil()).
*
* Farben, Schriften und Abstände kommen aus fundament.css. Hier steht kein
* einziger eigener Farbwert.
* =================================================================== */
/* ---------- Grundgerüst der Seite ----------
Breite (1280) und Zentrierung kommen aus `.lp-inhalt` (fundament.css) und
bleiben unverändert. Zwei Werte weichen bewusst ab:
· oben 180px statt 125px — leano setzt den Titel der Rechtsseiten auf y=180.
· seitlich 100px statt 20px — bei leano beginnt die Titelspalte bei x=100
und der Text bei x=300. Die Einrückung von 200px unten im Stylesheet ist
der Abstand ZWISCHEN beiden und ergibt zusammen mit diesen 100px genau die
Figma-Position. Mit den 20px der übrigen Inhaltsseiten stünde die ganze
Seite 80px zu weit links.
Unten bleiben die 300px des LeanPrinzip-Standards stehen (nicht leanos 140px
auf dem Handy): Karsten hatte den Abstand zur Fußzeile ausdrücklich größer
verlangt, siehe fundament.css bei `.lp-inhalt`. */
.lp-recht {
padding: 125px 20px 300px;
position: relative;
}
/* ---------- Die Überschrift: SCHEMA F, wie überall auf LeanPrinzip.de ----------
🔴 GEÄNDERT AM 23.08.2026 (Karsten): „Die Überschrift muss genauso in dem
Schema F funktionieren wie bei dem Online-Seminar oder beim Wörterbuch."
Vorher stand hier leanos Rechtsseiten-Titel: 22px/32px in Grau (#6F6F6F),
und der Block begann erst bei 180px. Damit sahen die Rechtsseiten anders aus
als jede andere Seite der Website.
Jetzt gilt der Hausstandard aus fundament.css:
Schrift Assistant SemiBold (h1-Regel)
Größe 26px / 39px (`.lp-inhalt h1`)
Farbe var(--black) (allgemeine Überschriftenregel)
oben 125px (`.lp-inhalt`, 85px Kopf + 40px Luft)
seitlich 20px (`.lp-inhalt`) -> der Titel steht damit exakt
bündig mit dem des Wörterbuchs und des Seminars.
⚠ Die Textspalte rückt dafür um 80px weiter ein (siehe unten, 280 statt 200):
So bleibt sie an ihrer Figma-Position x=300 im 1280er Rahmen, obwohl der
Titel jetzt bei x=20 statt x=100 sitzt. Das gestapelte Verhältnis
Überschrift-links / Text-eingerückt bleibt dadurch unverändert. */
.lp-recht__titel {
margin: 0;
font-size: 26px;
line-height: 39px;
}
/* Einleitung: eingerückt wie der übrige Text */
.lp-recht__vorspann {
margin: 55px 0 0 280px;
max-width: 880px;
font: 400 14px/27px var(--font-body);
color: var(--black);
}
/* ---------- Ein Abschnitt ----------
Sichtbare Sollabstände (leano/Figma):
Überschrift -> Text = 30px
Text -> nächste Überschrift = 60px
Die margin-Werte liegen darunter, weil die Zeilenhöhe oben und unten
zusätzlich Luft gibt. */
.lp-recht__abschnitt { margin-top: 44px; }
.lp-recht__abschnitt:first-of-type { margin-top: 54px; }
.lp-recht__abschnitt > h2 {
margin: 0;
font: 700 15px/24px var(--font-body);
color: var(--black);
}
.lp-recht__text {
margin: 17px 0 0 280px;
max-width: 880px;
}
.lp-recht__text p {
margin: 0;
font: 400 14px/27px var(--font-body);
color: var(--black);
}
.lp-recht__text p + p { margin-top: 10px; }
.lp-recht__text a { color: inherit; }
/* Aufzählungen und nummerierte Listen innerhalb eines Abschnitts */
.lp-recht__text ul,
.lp-recht__text ol {
margin: 10px 0 0;
font: 400 14px/27px var(--font-body);
color: var(--black);
}
.lp-recht__text ul { padding-left: 18px; list-style: disc; }
.lp-recht__text ol { padding-left: 20px; list-style: decimal; }
.lp-recht__text li + li { margin-top: 4px; }
.lp-recht__text li > ul,
.lp-recht__text li > ol { margin-top: 6px; }
.lp-recht__text p + ul, .lp-recht__text ul + p,
.lp-recht__text p + ol, .lp-recht__text ol + p { margin-top: 10px; }
/* ---------- COOKIE-RICHTLINIE (Seite 13584, 28.08.2026) ----------
Sonderfall: Diesen Text schreibt nicht Karsten, sondern das Plugin
(Complianz) — mit eigenen Ueberschriften h2/h3/h4, Aufklappern und
Diensteboxen. Es gibt hier also KEINE Ueberschriftenspalte links, unter die
sich der Text einruecken liesse.
⛔ Deshalb `--voll`: der Text nutzt die ganze Breite statt 280 px eingerueckt
zu stehen. Nicht auf die uebrigen Rechtsseiten uebertragen — dort ist die
Einrueckung Karstens ausdruecklicher Wunsch (gestapeltes Layout von leano).
⚠ Die Ueberschriften des Plugins werden hier gestaltet, weil sie sonst in der
Groesse des gekauften Themes stuenden. */
.lp-recht__abschnitt--voll .lp-recht__text { margin-left: 0; max-width: 880px; }
/* ⛔ Der Vorspann steht auf DIESER Seite nicht eingerueckt (Karsten,
28.08.2026: „Warum ist das zentriert und alles andere linksbuendig?").
Auf den uebrigen Rechtsseiten sitzt er unter der Ueberschriftenspalte —
hier gibt es keine, also stand er allein 280 px weit rechts. */
.lp-recht--cookie .lp-recht__vorspann { margin-left: 0; }
/* 🔴 `!important` IST HIER NOETIG, und zwar nachgemessen (28.08.2026):
Ohne kam bei den Ueberschriften des Plugins 22px/15px oben/10px unten heraus —
das gekaufte Theme setzt sie mit hoeherer Gewichtung. Meine erste Fassung
(40px Abstand) hat schlicht nicht gegriffen, deshalb sahen alle Ueberschriften
gleich weit von oben und unten weg aus.
⚠ Karsten: „Manchmal kann ich nicht erkennen, ob das jetzt zur Ueberschrift
gehoert oder nicht. Mach die Abstaende generell groesser, dass man sieht: hier
faengt ein neuer Teil an." Also gilt durchgehend: OBEN VIEL, UNTEN WENIG.
Ein Titel klebt an dem, was zu ihm gehoert. */
.lp-recht__plugin h2 {
margin: 72px 0 0 !important;
font: 700 16px/26px var(--font-body) !important;
color: var(--black) !important;
}
.lp-recht__plugin h3 {
margin: 44px 0 0 !important;
font: 700 14px/24px var(--font-body) !important;
color: var(--black) !important;
}
.lp-recht__plugin h4 {
margin: 28px 0 0 !important;
font: 700 13px/22px var(--font-body) !important;
color: var(--text-grey) !important;
}
.lp-recht__plugin h2:first-child { margin-top: 0 !important; }
.lp-recht__plugin h2 + p, .lp-recht__plugin h3 + p, .lp-recht__plugin h4 + p { margin-top: 10px; }
/* Die Aufklapper je Dienst. ⚠ Karsten: „Das wirkt wie ein fetter Backen, viel
zu gross." Schmaler gestellt: weniger Innenabstand, kleinere Schrift, engere
Zeile — es ist eine Zeile zum Aufklappen, keine Karte. */
.lp-recht__plugin details {
margin-top: 8px;
padding: 6px 14px;
border: 1px solid var(--light-grey);
border-radius: 8px;
}
.lp-recht__plugin summary {
cursor: pointer;
font: 400 13px/22px var(--font-body);
color: var(--black);
}
.lp-recht__plugin details p { font-size: 13px; line-height: 22px; }
/* 🔴 IN DEN AUFKLAPPERN GELTEN DIE GROSSEN ABSTAENDE NICHT (28.08.2026
nachgemessen): Der Plugin-Aufklapper traegt in seiner Kopfzeile ein
(Dienstname) und ein
(Kategorie). Mit den 44 px von oben wuchs jede
Zeile auf 102 px — genau der „fette Backen", den Karsten meinte. Die grossen
Abstaende gliedern den FLIESSTEXT, nicht das Innere eines Kastens. */
.lp-recht__plugin summary h3,
.lp-recht__plugin summary h4,
.lp-recht__plugin summary p {
margin: 0 !important;
font: 400 13px/22px var(--font-body) !important;
display: inline;
}
.lp-recht__plugin summary h3 { font-weight: 700 !important; }
.lp-recht__plugin summary h3::after { content: " · "; color: var(--dark-grey); }
.lp-recht__plugin details h4 { margin-top: 14px !important; }
.lp-recht__plugin details > div { margin-top: 6px; }
/* ⚠ Nach einer Ueberschrift ein kleiner, aber sichtbarer Abstand — 0 klebt.
Gegenstueck zu den grossen Abstaenden oben: oben viel, unten wenig. */
.lp-recht__plugin h2, .lp-recht__plugin h3, .lp-recht__plugin h4 { margin-bottom: 10px !important; }
.lp-recht__plugin summary h3, .lp-recht__plugin summary h4 { margin-bottom: 0 !important; }
.lp-recht__plugin table {
width: 100%;
margin-top: 10px;
border-collapse: collapse;
font: 400 13px/22px var(--font-body);
}
.lp-recht__plugin th, .lp-recht__plugin td {
padding: 8px 10px;
border-bottom: 1px solid var(--light-grey);
text-align: left;
vertical-align: top;
}
/* ⚠ Lange Adressen und Cookienamen sprengen sonst die Spalte. */
.lp-recht__plugin td, .lp-recht__plugin p { overflow-wrap: anywhere; }
@media (max-width: 900px) {
.lp-recht__abschnitt--voll .lp-recht__text { margin-left: 0; }
}
/* Hervorgehobener Kasten — für die gesetzlich vorgeschriebene
Widerrufsbelehrung und das Muster-Widerrufsformular. Beides muss sich vom
übrigen Text abheben, damit es als eigenständige Belehrung erkennbar ist. */
.lp-recht__kasten {
margin-top: 15px;
padding: 24px 28px;
background: var(--bg-grey);
border-radius: var(--radius);
}
.lp-recht__kasten p { margin: 0; font: 400 14px/27px var(--font-body); color: var(--black); }
.lp-recht__kasten p + p { margin-top: 10px; }
.lp-recht__kasten h3 {
margin: 0 0 10px;
font: 700 15px/24px var(--font-body);
color: var(--black);
}
.lp-recht__kasten * + h3 { margin-top: 24px; }
/* Ausfuell-Linien im Muster-Widerrufsformular.
🔴 24.08.2026: Dort standen Ketten aus Unterstrichen („______"). Fuer den
Browser ist das EIN Wort, das nirgends umbrechen kann — auf dem Handy schob
es die ganze Seite nach rechts, man musste quer scrollen (§173).
⛔ Nie wieder Unterstriche als Linie. Eine Linie ist ein Rahmen, kein Text. */
.lp-recht__kasten .lp-recht__zeile {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: 8px;
/* eng zwischen Beschriftung und IHRER Linie ... */
row-gap: 2px;
}
/* ... und weit zum naechsten Block. Sonst sitzt eine umgebrochene Linie genau
zwischen zwei Beschriftungen und man sieht nicht, wozu sie gehoert. */
.lp-recht__kasten p + .lp-recht__zeile,
.lp-recht__kasten .lp-recht__zeile + p { margin-top: 18px; }
.lp-recht__linie {
flex: 1 1 110px;
min-width: 110px;
height: 1.1em;
border-bottom: 1px solid var(--black);
}
/* Handy: jede Linie bekommt eine eigene, volle Zeile. Sonst ist eine Linie
310px lang und die naechste 114px — das sieht aus wie ein Fehler. */
@media (max-width: 560px) {
.lp-recht__linie { flex-basis: 100%; }
}
/* ---------- Tabellen (Datenschutz: Dienste, Speicherdauern) ---------- */
.lp-recht__tabelle { overflow-x: auto; margin-top: 15px; }
.lp-recht__text .lp-recht__tabelle + p,
.lp-recht__text .lp-recht__tabelle + ul { margin-top: 15px; }
.lp-recht__text table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font: 400 14px/23px var(--font-body);
color: var(--black);
}
.lp-recht__text th,
.lp-recht__text td {
border: 1px solid var(--light-grey);
padding: 14px 18px;
text-align: left;
vertical-align: top;
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
}
.lp-recht__text th { font-weight: 700; background: var(--bg-grey); }
/* ---------- Widerrufsknopf im Datenschutz (§403, 02.09.2026) ----------
Der Knopf, mit dem der Cookie-Hinweis wieder aufgeht. Er ersetzt den
dauerhaft eingeblendeten Reiter des Plugins in der unteren rechten Ecke.
⚠ Kein eigener Knopfstil: Form, Höhe und Rundung kommen von `.btn-ghost`
aus dem Fundament — ein zweiter Knopftyp auf der Seite wäre ein Bruch.
Hier steht nur der Abstand, damit er wie ein eigener Absatz sitzt
(`.lp-recht__text p + p` greift bei einem `
` nicht). */
.lp-recht__knopf { margin-top: 18px; margin-bottom: 18px; }
/* ---------- Impressum: Überschriften bündig mit dem Text ---------- */
.lp-recht--buendig .lp-recht__abschnitt > h2 { margin-left: 280px; }
/* ===================================================================
* UMSCHALTPILLE — AGB für Privatkunden / für Geschäftskunden
*
* 1:1 die Pille der leano-Rechtsseiten: der graue Grund IST der Rahmen, eine
* weiße Innenfläche lässt ringsum 1px stehen, und beim Wechsel gleitet eine
* graue Füllung zur neuen Seite hinüber.
*
* ⚠ EINE ABWEICHUNG VON leano — beim GRAUTON, nicht bei der Form.
* Der Seitencheck hat es am 23.08.2026 als Fehler gemeldet: leanos
* --dark-grey (#999999) trägt keine weiße Schrift. Gemessen 2,85:1,
* gefordert sind 4,5:1. Betroffen war der AKTIVE Knopf, dessen Beschriftung
* weiß auf der grauen Füllung steht.
* → Rahmen UND Füllung stehen jetzt auf --text-grey (#6E6E6E): weiße Schrift
* darauf 5,10:1, graue Schrift daneben auf Weiß ebenfalls 5,10:1.
* ⛔ Rahmen und Füllung müssen DENSELBEN Ton haben — bei leano liegt die
* Füllung bewusst grau-auf-grau am Rahmen, sonst entsteht an den Rundungen
* eine sichtbare Naht.
* Form, Größe, Abstände und die gleitende Bewegung bleiben unverändert.
* Präzedenzfall: dieselbe Entscheidung bei der Anmeldepille in fundament.css
* (Karsten, 19.08.2026: „Wenn der Seitencheck sagt, das muss geändert werden,
* dann pass es an.").
* =================================================================== */
.lp-recht__umschalter {
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
display: flex;
border-radius: 20px;
overflow: hidden;
/* 🔴 ECHTER RAHMEN STATT GRAUER GRUNDFLÄCHE (23.08.2026, Seitencheck).
leano legt die Pille auf eine graue Fläche und deckt sie innen mit Weiß ab —
der graue Rand ist also nur der Teil, den das Weiß stehen lässt. Optisch
dasselbe, für die Kontrastprüfung aber falsch: Sie misst die Schrift gegen
den GRAUEN Grund des Elternelements und kam so auf 1,0:1, obwohl der Text
in Wahrheit auf Weiß steht. Mit einem echten `border` steht die Schrift
auch technisch auf Weiß — gemessen 5,10:1. */
background: var(--white);
border: 1px solid var(--text-grey);
}
/* ⛔ Die weiße Innenfläche von leano (.lp-recht__umschalter-flaeche) entfällt:
Sie war nur nötig, solange der graue Grund den Rahmen bildete. Das Skript
erzeugt sie nicht mehr. */
/* Die gleitende Füllung in Rahmen-Grau */
.lp-recht__umschalter-fuellung {
position: absolute;
top: 0; bottom: 0; left: 0; width: 0; /* innerhalb des Rahmens, nicht darüber */
background: var(--text-grey); /* derselbe Ton wie der Rahmen — keine Naht */
/* ⚠ Textfarbe ausdrücklich weiß, obwohl dieses Element selbst nichts schreibt:
Die Beschriftung darin IST weiß. Ohne die Angabe erbt es #333 vom Körper,
und die Kontrastprüfung rechnet dann #333 auf Grau (2,48:1) statt Weiß auf
Grau (5,10:1) — ein Fehlalarm, der am 23.08.2026 genau so gemeldet wurde. */
color: var(--white);
transition: left 1000ms ease, width 1000ms ease;
overflow: hidden; /* schneidet den weißen Text aufs Fenster zu */
pointer-events: none;
z-index: 2;
}
/* Weiße Textkopie INNERHALB der Füllung: liegt deckungsgleich über dem grauen
Text, wird aber nur im wandernden Fenster sichtbar. Der Gegenversatz (per JS)
hält sie ortsfest -> die Buchstaben werden Kante für Kante aufgedeckt. */
.lp-recht__umschalter-fuellung-text {
position: absolute;
top: 0; left: 0; height: 100%;
display: flex;
pointer-events: none;
white-space: nowrap;
transition: left 1000ms ease;
}
.lp-recht__umschalter-fuellung-text span {
position: relative;
padding: 8px 28px;
font: 400 14px/18px var(--font-body);
color: var(--white);
white-space: nowrap;
text-align: center;
box-sizing: border-box;
}
/* ⛔ KEIN HOVER-EFFEKT (Karsten, 23.08.2026): „die pillen oben in AGB oder
Datenschutz sollen keine Hover effekt haben mit unterstrichen".
leano blendet dort beim Überfahren einen Unterstrich ein — das war von dort
übernommen und ist hier ausdrücklich nicht gewollt. Nicht wieder einbauen. */
.lp-recht__umschalter a {
position: relative;
z-index: 1; /* UNTER der Füllung */
top: 1px;
padding: 8px 28px;
font: 400 14px/18px var(--font-body);
color: var(--text-grey);
text-decoration: none;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
background: transparent;
}
/* Ohne JavaScript: aktiver Knopf grau hinterlegt, Schrift weiß. */
.lp-recht__umschalter a.is-aktiv { background: var(--text-grey); color: var(--white); }
/* Mit JavaScript übernimmt die gleitende Füllung das Weiß. */
.lp-recht__umschalter.hat-fuellung a { background: transparent; color: var(--text-grey); }
@media (prefers-reduced-motion: reduce) {
.lp-recht__umschalter-fuellung,
.lp-recht__umschalter-fuellung-text { transition: none; }
}
/* ⛔ AGB und Datenschutz behalten ihre Titelposition (Karsten, 23.08.2026:
„da oben drüber sind ja eben Buttons, da kannst du das an der Position
lassen, da ist es schon richtig"). Der Titel muss unter der Pille bleiben.
Da der Block jetzt bei 125px statt 180px beginnt, gleicht dieser Abstand die
Differenz aus — die Überschrift steht auf denselben 214px wie zuvor. */
.lp-recht--umschalter .lp-recht__titel { margin-top: 89px; }
/* ===================================================================
* WECHSEL DER FASSUNG — nur der INHALT blendet, sonst nichts
*
* ⛔ NICHT die ganze Seite überblenden (Karsten, 23.08.2026: „es soll doch
* nicht die ganze seite ausblenden und einblenden, nur der inhalt, die
* buttons bleiben alle, das Menü bleibt usw. — halt wie bei leano").
* Ein erster Versuch legte eine weiße Ebene über die ganze Seite. Falsch:
* Das ist bei leano der SPRACHwechsel, nicht der Fassungswechsel.
*
* So läuft es wirklich (leano, js/main.js):
* 1. die graue Füllung gleitet zur angeklickten Beschriftung (1000 ms)
* 2. NUR der Inhaltsblock blendet aus ( 500 ms)
* 3. der Inhalt wird ausgetauscht, die Adresse nachgezogen
* 4. derselbe Block blendet wieder ein ( 500 ms)
* Kopf, Menü, Pille und Fußzeile stehen die ganze Zeit still. Die Seite wird
* nie neu geladen.
* =================================================================== */
.lp-recht__inhalt { opacity: 1; }
/* Wer Bewegung abgestellt hat, bekommt den Wechsel ohne Blenden. */
@media (prefers-reduced-motion: reduce) {
.lp-recht__inhalt { transition: none !important; }
}
/* ===================================================================
* HANDY — Einrückung auflösen, volle Breite
* =================================================================== */
@media (max-width: 820px) {
.lp-recht { padding: 115px 20px 300px; } /* wie .lp-inhalt auf dem Handy */
.lp-recht__vorspann { margin: 24px 0 0; max-width: 100%; }
.lp-recht__abschnitt { margin-top: 40px; }
.lp-recht__text { margin-left: 0; max-width: 100%; }
.lp-recht--buendig .lp-recht__abschnitt > h2 { margin-left: 0; }
.lp-recht__kasten { padding: 20px; }
.lp-recht__umschalter { top: 125px; }
.lp-recht--umschalter .lp-recht__titel { margin-top: 104px; }
}
/* Schmale Handys: Bei 14px passt die Pille nicht auf den Bildschirm. Statt den
Innenabstand zu quetschen wird die Schrift kleiner — dann bleibt Polsterung
und die Beschriftung steht luftig.
⛔ Knöpfe und Textkopie müssen identisch bleiben, sonst verrutscht die
gleitende Füllung. */
@media (max-width: 430px) {
.lp-recht__umschalter a,
.lp-recht__umschalter-fuellung-text span {
padding: 8px 18px;
font-size: 12px;
}
}
/* Tabellen -> gestapelte Karten. Eigener, früherer Umbruchpunkt als der Rest
der Seite: eine mehrspaltige Tabelle wirkt schon bei mittleren Breiten
gequetscht. Jede Zelle zeigt ihre Spaltenüberschrift aus data-label. */
@media (max-width: 1050px) {
.lp-recht__tabelle { overflow-x: visible; }
.lp-recht__text table,
.lp-recht__text thead,
.lp-recht__text tbody,
.lp-recht__text tr,
.lp-recht__text td { display: block; width: 100%; }
.lp-recht__text thead { display: none; }
.lp-recht__text tr {
border: 1px solid var(--light-grey);
border-radius: 8px;
margin-bottom: 12px;
padding: 4px 14px;
}
.lp-recht__text td { border: none; padding: 10px 0; }
.lp-recht__text tr td:not(:last-child) { border-bottom: 1px solid var(--light-grey); }
.lp-recht__text td::before {
content: attr(data-label);
display: block;
font-weight: 700;
margin-bottom: 4px;
}
}