/* ===================================================================
   LEANPRINZIP.DE — DESIGNFUNDAMENT
   Stand 17.08.2026 (Etappe C)

   ⛔ HERKUNFT: Kopf, Fußzeile, Tokens, Knöpfe und das mobile Verhalten sind
   1:1 aus der leano-Webseite übernommen —
   `daleap/Leano/Webseite/css/style.css` + `js/layout.js`.
   Karsten am 17.08.2026: „Das grundsätzliche Design soll genau dem von leano
   gleichen! 1:1 im wahrsten Sinne des Wortes! Schriftart, Schriftgröße und
   Farbenwahl … Das Menü oben exakt wie bei leano! Auch die Breite! … Die
   Fußzeile! Genau die gleiche Fußzeile auch!"

   ⛔ Werte NICHT anpassen, verschönern oder runden. Wer hier etwas ändert,
   ändert es zuerst in leanos style.css und übernimmt es dann.

   ⛔ KEINE eigenen Hover-Effekte, Schatten oder Animationen dazuerfinden —
   nur die, die bei leano auch drin sind (leano-Regel 1).

   UNTERSCHIEDE ZU LEANO, alle von Karsten angesagt:
   · Logo heißt „leanprinzip" (klein, zusammengeschrieben) statt „leano"
   · KEINE Sprachumschaltung — LeanPrinzip.de gibt es nur auf Deutsch
   · Soziale Netzwerke: E-Mail, LinkedIn, Xing, Facebook (leano hat X statt Xing)
   =================================================================== */


/* ---------- Schriften: selbst ausgeliefert, kein Google ---------- */
/* Assistant = Überschriften und Logo, wie bei leano. Dateien liegen im
   Kindtheme unter neu/assets/fonts/ (aus leanos assets/fonts/ übernommen). */
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400 600;            /* Variable-Font-Bereich */
  font-display: swap;
  src: url("assets/fonts/assistant-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/assistant-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ⛔ HIER STAND CAVEAT, die Handschrift der Post-it-Zettel. Die Zettel sind
   verworfen (§401), die Schrift wird nirgends mehr gebraucht und ist deshalb
   ausgebaut — sie hätte sonst 37 KB bei jedem Seitenaufruf gekostet. */


/* ---------- Keine blaue Antipp-Markierung, nirgends ----------
   🔴 KARSTEN, 08.09.2026: „Den blauen Kasten beim Antippen kannst du komplett
   auf der Seite entfernen, bei jedem Schalter — und generell, dass das überall
   beachtet wird. Das nervt mich wirklich."

   ⛔ EINE REGEL FÜR DIE GANZE SEITE, nicht je Element. Vorher stand dasselbe
      zweimal einzeln da (`.site-header a`, `.lp-dlk`) — und beim nächsten neuen
      Knopf hätte es wieder gefehlt. `-webkit-tap-highlight-color` wird vererbt;
      am Wurzelelement gilt es damit für jeden Knopf, jeden Link und jeden
      Schalter, auch für die, die es noch nicht gibt.
   ⚠ WAS DAMIT WEGFÄLLT: Die Markierung ist auf Touchgeräten die einzige
      Rückmeldung des Browsers, dass ein Fingertipp angekommen ist. Unsere
      Bedienelemente zeigen das selbst — der Schalterkreis wandert, Knöpfe
      wechseln die Farbe, Links führen weiter. Wer ein neues Element baut, muss
      also selbst dafür sorgen, dass ein Tipp sichtbar ankommt.
   ⛔ Diese Zeile nicht entfernen und nirgends überschreiben. Türsteher:
      `antippen_pruefen.py` (§544). */
html { -webkit-tap-highlight-color: transparent; }

/* ---------- Design-Tokens — 1:1 leano ---------- */
:root {
  --black:      #333333;
  --white:      #ffffff;
  --light-grey: #d0d0d0;
  --bg-grey:    #f5f5f5;
  --dark-grey:  #999999;   /* Raender, Umrisse, Platzhalter — UNVERAENDERT (leano) */
  /* 🔴 GRAUER TEXT BRAUCHT EINEN EIGENEN TON. #999999 ergibt auf Weiss nur
     2,85:1; gefordert sind 4,5:1 (Seitencheck §24-b, Barrierefreiheits-
     staerkungsgesetz).
     ⚠ #767676 reicht nur auf WEISS (4,54). Die Haelfte der Seite steht aber auf
     dem hellgrauen Band (#f5f5f5) — dort waren es nur 4,17. Gemessen und
     nachgerechnet: **#6E6E6E** schafft beides (5,10 auf Weiss, 4,68 auf Grau).
     ⛔ Nicht --dark-grey selbst aendern: der faerbt auch Raender (Fusszeilen-
     kasten, Formularfelder) und das wuerde das Design sichtbar veraendern.
     Nur geschriebene Woerter nehmen --text-grey. */
  --text-grey:  #6E6E6E;

  --font-body:    "Arial", "Helvetica Neue", Helvetica, sans-serif;
  --font-heading: "Assistant", "Arial", sans-serif;

  --page-width: 1280px;
  --ease: 0.22s ease;

  /* Akzente aus den Figma-Styles, für Inhalte */
  --office-blue:  #507DBF;
  --office-red:   #DA0202;
  --office-green: #75A83A;
  --yellow:       #F2D680;
  --brown:        #735645;
  --purple:       #7030A0;
  --titel-grau:   #6F6F6F;

  /* Farbe des vollen Balkens im Abschnitt "Was Lean bringt".
     ⚠ Karsten am 18.08.2026: "der gelbe Balken soll nicht gelb sein, sondern
     blau" — und nannte dann #f2d680, was genau das bisherige Gelb ist. Hier
     steht deshalb das Blau aus den leano-Styles; wenn es doch der gelbe Ton
     bleiben soll, hier auf #f2d680 zuruecksetzen. */
  --balken-mit:   #507DBF;

  /* 🔴 DIE ABSCHNITTSLUFT. Karsten hat dreimal dasselbe gemeldet: der Abstand
     der Ueberschrift nach unten zu den Bildern muss genauso gross sein wie der
     Abstand nach oben zum Rand der grauen Box.
     Der Fehler lag daran, dass beides an zwei getrennten Stellen stand - oben
     das padding des Abschnitts, unten der margin der Ueberschrift - und die
     Werte auseinanderliefen (120 gegen 60).
     ⛔ Beide beziehen sich jetzt auf DIESE eine Variable. Wer den Abstand
     aendert, aendert ihn hier - dann bleibt oben gleich unten. */
  --luft: 120px;
  /* Eckenrundung fuer Bilder, Videovorschau und Karten — 1:1 der Wert der
     leano-Karten aus Abschnitt "Keine Voraussetzungen" (.req-card, 15px).
     Karsten am 18.08.2026: "die Rundungen sollten genauso gross sein wie bei
     leano". Gilt NICHT fuer Knoepfe, Menue, Formularfelder, Balken. */
  --radius: 15px;
  /* Office Blue als TEXTfarbe reicht nicht (3,83:1). Fuer Flaechen, Balken und
     Punkte bleibt --office-blue unveraendert — nur geschriebene Woerter nehmen
     diesen dunkleren Ton (4,6:1). */
  --office-blue-text: #3C6BA8;
  /* 🔴 GRÜN BRAUCHT EBENSO EINEN EIGENEN TON FÜR GESCHRIEBENE WÖRTER
     (26.08.2026, im Seitencheck der Kontoseite aufgefallen): --office-green
     #75A83A schafft auf Weiss nur 2,83:1, gefordert sind 4,5:1 — acht
     Beanstandungen auf einer Seite. Nachgerechnet: **#4C7620** schafft 5,36 auf
     Weiss und 4,91 auf dem hellgrauen Band. ⛔ Nicht --office-green selbst
     aendern: der faerbt Flaechen und Balken, dort ist der helle Ton richtig.
     Nur Woerter nehmen --office-green-text. Gleiche Trennung wie beim Blau. */
  --office-green-text: #4C7620;
  /* Nur fuer den Hover des Zustimmen-Knopfs im Cookie-Hinweis (19.08.2026):
     Seit dessen Grundton der lesbare #3C6BA8 ist, braucht der Hover einen
     dunkleren Ton — heller waere wieder unter 4,5:1. Weiss darauf: 7,1:1. */
  --office-blue-dunkel: #33598B;
}


/* ---------- Reset — 1:1 leano ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 27px;
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 🔴 `height: auto` ist PFLICHT (17.08.2026, Karsten: „die Bilder sind in der
   Breite gequetscht und in der Länge übelst hochgezogen"):
   WordPress schreibt an jedes Bild die `width`- und `height`-Attribute der
   Originaldatei. Ohne `height:auto` gilt weiter die Attributhöhe, während die
   Breite auf 100 % geht — das Bild wird verzerrt. Gemessen wurden Kästen von
   588×1024 für querformatige Bilder.
   ⚠ leanos style.css hat die Zeile nicht, weil dort jedes Bild seine Maße im
   CSS bekommt. Hier kommen die Bilder aus der Mediathek — also braucht es sie. */
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid var(--dark-grey);
  border-radius: 8px;
  font-size: 12px;
  color: var(--black);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

.container {
  width: var(--page-width);
  max-width: 100%;
  margin-inline: auto;
}

/* Überschriften: Assistant SemiBold, wie bei leano */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--black);
  margin: 0;
  text-transform: none;      /* das alte Theme erzwingt sonst GROSSBUCHSTABEN */
  letter-spacing: 0;
}

p { margin: 0; }


/* =========================================================
   KOPF — 1:1 leano (style.css 111–255)
   ========================================================= */

/* ===================================================================
 * WEICHE SEITENWECHSEL — die ganze Seite blendet über statt weiss aufzublitzen
 * (Karsten, 04.09.2026: „Das finde ich richtig geil. Kannst du das komplett
 * machen. Das muss aber auch schneller einblenden.")
 *
 * ⚠ NACHGEMESSEN, NICHT GERATEN (04.09.2026, `_Werkzeuge/webkit/mess` auf
 *    Karstens eigener WebKit-Fassung, Safari 26.6.2): `CSSViewTransitionRule`
 *    ist da, `document.startViewTransition` ist da. Es läuft also auch in
 *    SEINEM Browser, nicht nur in Chrome.
 * ⚠ Browser, die es nicht können, laden einfach wie bisher — nichts geht
 *    kaputt, es fehlt nur der Übergang.
 *
 * ⛔ 0,2 SEKUNDEN, NICHT MEHR. Der Standardwert des Browsers (0,25 s) wirkte
 *    bereits träge; alles darüber fühlt sich an, als hinge die Seite.
 *
 * ⛔ DER KOPF BLEIBT STEHEN. Ohne eigenen Namen würde die Menüleiste
 *    mitblenden — man sähe sie bei jedem Klick kurz doppelt. Mit Namen bleibt
 *    sie einfach liegen, und nur der Inhalt darunter wechselt. Das ist der
 *    Unterschied zwischen „Webseite" und „App".
 *    ⚠ Am AUSSEHEN des Kopfes ändert das nichts — er ist und bleibt gesperrt.
 *
 * ⛔ BEI ABGESTELLTER BEWEGUNG GAR KEIN ÜBERGANG.
 * =================================================================== */
@view-transition { navigation: auto; }

/* ⛔ NICHT ZWEI BILDER ÜBERBLENDEN, SONDERN NUR DAS ALTE WEGBLENDEN.
   🔴 GRUND (Karsten, 04.09.2026): *„Wenn ich auf Online-Seminar gehe — da gibt
   es ja Animationen, die erst später einblenden. Die flackern kurz auf und
   werden dann eingeblendet."*
   Beim Seitenwechsel friert der Browser ein Standbild der NEUEN Seite ein,
   sobald er sie zum ersten Mal zeichnen kann. Auf der Seminarseite versteckt
   aber erst ein Skript die Teile der Zeichnungen (`seminar.js`,
   `vorbereiten()`) — in diesem Standbild sind sie also noch zu sehen. Das
   Standbild lag oben und war die ganze Übergangszeit sichtbar: erst alles da,
   dann weg, dann baut es sich auf. Genau das Flackern.
   ✅ Jetzt liegt das ALTE Bild oben und blendet weg; die neue Seite liegt
   darunter und bleibt deckend. Ihr früher Zustand ist dadurch verdeckt, bis
   der Übergang vorbei ist.
   ⚠ EHRLICH: Das verdeckt das Aufblitzen, es beseitigt es nicht an der Wurzel.
   Die Wurzel wäre, die Startzustände ins CSS zu holen statt ins Skript — der
   Umbau ist am 04.09.2026 bewusst zurückgestellt worden (siehe §439).
   ⚠ 0,32 s statt 0,2 s: Karsten fand den ersten Versuch „zu schnell, hätte
   ein bisschen weicher sein können". Am 06.09.2026 noch einmal weicher
   gestellt: 0,25 s raus, 0,25 s Wartezeit, 0,25 s rein. */
::view-transition-old(root) {
  z-index: 2;
  animation: lp-vt-weg 0.25s ease forwards;   /* Karsten 06.09.2026: von 0,18s auf 0,25s */
}
::view-transition-new(root) {
  z-index: 1;
  /* ⛔ ERST GANZ WEG, DANN REIN — NICHT ÜBEREINANDER (Karsten, 04.09.2026:
     „Ich wünsche mir, dass das andere erst ausblendet, bevor das andere
     einblendet, und nicht so übereinanderlagert.")
     Die Verzögerung ist genau so lang wie das Ausblenden. `backwards` sorgt
     dafür, dass die neue Seite schon während der Wartezeit unsichtbar ist —
     ohne das wäre sie sofort da und man sähe wieder beide. */
  animation: lp-vt-rein 0.25s ease 0.25s backwards;   /* Wartezeit = Ausblendzeit */
}

/* ⛔ HIER STAND EINE RICHTUNG: alte Seite nach links hinaus, neue von rechts
   herein, beim Zurückgehen andersherum. Karsten hat sie gesehen und sofort
   zurückgenommen (04.09.2026): *„Diese Bewegung gefällt mir gar nicht, bitte
   wieder rückgängig. Das einfache Ausblenden, Einblenden hat mir viel besser
   gefallen."*
   ⛔ NICHT WIEDER VORSCHLAGEN — auch nicht dezenter. Es bleibt beim reinen
   Ausblenden und Einblenden, ohne jede Verschiebung. */
@keyframes lp-vt-weg  { to   { opacity: 0; } }
@keyframes lp-vt-rein { from { opacity: 0; } }

/* 🔴 HIER STAND `.site-header { view-transition-name: lp-kopf; }` — UND HAT DEN
   WEICHZEICHNER HINTER DEM MENÜ ABGESCHALTET (Karsten, 04.09.2026: „Der
   Weichzeichner hinter meinem Hauptmenü ist einfach weg, dadurch sieht alles
   durchsichtig aus, man kann es schlechter lesen.").

   ⛔ URSACHE, damit es nie wieder jemand einbaut: `view-transition-name` hebt
   das Element beim Seitenwechsel in eine EIGENE Ebene. Ein `backdrop-filter`
   weichzeichnet aber das, was HINTER dem Element liegt — in einer eigenen
   Ebene liegt dort nichts mehr. Der Weichzeichner hat also nichts mehr zu tun
   und verschwindet. Nicht erst beim Übergang, sondern dauerhaft.

   ⛔ `view-transition-name` NIE auf ein Element mit `backdrop-filter` setzen.
   Das gilt für den Kopf, die Menüpille, den Anmeldeknopf und das Klappmenü
   (§393 — die tragen alle Glas).

   ⚠ Der Preis: Die Menüleiste blendet beim Seitenwechsel mit, statt stehen zu
   bleiben. Das ist der günstigere Preis — sie sieht die ganze übrige Zeit
   richtig aus. */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ===================================================================
 * DER KOPF BLEIBT BEIM SEITENWECHSEL STEHEN — und behält sein Glas
 *
 * 🔴 KARSTEN, 04.09.2026, mehrfach: *„Das Menü sollte man die ganze Zeit sehen.
 *    Es soll nicht mit ein- und ausblenden."* — und zugleich: *„Der
 *    Weichzeichner muss generell da sein."*
 *
 * ⛔ ZWEI ANLÄUFE SIND GESCHEITERT, beide über JavaScript:
 *    1. Fester `view-transition-name` im Stylesheet → das Element liegt DAUERND
 *       in einer eigenen Ebene, `backdrop-filter` hat nichts mehr hinter sich,
 *       das Glas war dauerhaft weg.
 *    2. Name per Skript nur für den Übergang, abgeben bei `finished` → bei
 *       unterbrochenen oder überholten Übergängen löst `finished` nie auf, der
 *       Name klebte, und nur ein echtes Neuladen half.
 *
 * ✅ RICHTIG IST DIE PSEUDOKLASSE, DIE ES GENAU DAFÜR GIBT:
 *    `:active-view-transition` gilt **nur, solange ein Seitenwechsel läuft**.
 *    Der Name kann gar nicht kleckenbleiben — es gibt nichts aufzuräumen, keine
 *    Notbremse, kein Skript.
 * ⚠ Nachgemessen in Karstens Browserfassung (Safari 26.6.2): unterstützt.
 * ⚠ Für die Dauer des Wechsels (0,36 s) hat der Kopf kein Glas — dafür steht er
 *    still. Danach ist es von selbst zurück.
 * ⛔ NIE WIEDER PER JAVASCRIPT. Und nie als feste Regel ohne die Pseudoklasse.
 * =================================================================== */
html:active-view-transition .site-header { view-transition-name: lp-kopf; }

/* ⛔ OHNE DIESE ZWEI ZEILEN BLENDET DER KOPF TROTZDEM MIT (06.09.2026).
   Ein eigener `view-transition-name` nimmt das Element nur aus der Wurzel
   heraus — animiert wird es danach trotzdem, mit der Standardüberblendung des
   Browsers. Der Kopf lag also in einer eigenen Ebene und blendete dort aus.
   Bei 0,18 s war das kaum zu sehen; seit der Übergang 0,25 s dauert, sieht man
   es eine halbe Sekunde lang.
   Karsten am 06.09.2026: *„Ich drücke den Button und alles verschwindet. Das
   Menü oben sollte doch bleiben."* — und schon am 04.09.2026: *„Das Menü
   sollte man die ganze Zeit sehen. Es soll nicht mit ein- und ausblenden."*
   Der alte Kopf wird weggelassen, der neue steht ohne Bewegung sofort da.
   Beide sehen gleich aus, deshalb sieht man keinen Sprung. */
::view-transition-group(lp-kopf),
::view-transition-image-pair(lp-kopf) { animation: none; }
::view-transition-old(lp-kopf) { display: none; }
::view-transition-new(lp-kopf) { animation: none; opacity: 1; }

/* ⛔ HIER STAND DER KARTEN-EFFEKT DER DOWNLOADSEITEN — komplett zurückgebaut
   (Karsten, 04.09.2026: *„Vergiss es, das funktioniert nicht. Mach das alles
   rückgängig. Bei der Download-Übersicht wie normalerweise beim Seitenwechsel,
   dieses Ausblenden, Einblenden."*).

   Gebaut waren nacheinander vier Fassungen: die ganze Zielseite als Gegenstück
   (ruckelte, weil ein Standbild von 12.000 px Höhe entsteht), das Kartenbild
   allein an seiner Stelle (kein Zusammenhang zur Seite), ein leerer Kasten in
   Bildschirmgrösse als Gegenstück, zuletzt dieselbe Bewegung vorwärts und
   rückwärts ohne Unschärfe. Der Rückweg gefiel; der Hinweg nie.

   ⚠ WAS DABEI GELERNT WURDE — falls es je wieder aufkommt:
     · Ein benanntes Element wird in VOLLER Länge fotografiert, nicht nur der
       sichtbare Teil. Lange Seiten sind deshalb teuer.
     · Zwei Bewegungen gleichzeitig (Bild wandert, Seite wechselt) liest das
       Auge als Fehler, nicht als Fluss.
     · Unschärfe als Übergang wurde vorgeschlagen, gebaut und verworfen.
   ⚠ Karsten prüft in **Safari**; in Chrome zeigte diese Bauart zusätzlich
     eigene Fehler. Wer so etwas wieder anfasst, misst in beidem.

   Die Downloadseiten wechseln jetzt wie jede andere Seite: aus- und
   einblenden. Nicht wieder aufsetzen ohne neue Ansage. */

/* ===================================================================
 * 🔴 DIE WURZEL DES FLACKERNS: WAS ERST EIN SKRIPT VERSTECKT, IST VORHER DA
 *
 * Karsten am 04.09.2026, nach dem ersten Reparaturversuch: *„Am besten sieht
 * man es bei der Intro-Seite vom Online-Seminar. Ich sehe ganz kurz schon
 * vorher, was erst einblendet. Dieses Problem ist trotzdem noch da, überall."*
 * Er hat in Chrome UND Safari nachgesehen — es lag an keinem von beiden.
 *
 * ⛔ WAS VORHER FALSCH WAR: `seminar.js` versteckt die Teile der Zeichnungen
 *    selbst (`vorbereiten()` → `el.style.opacity = 0`) und läuft in der
 *    Fusszeile. Zwischen dem Zeichnen der Seite und dem Skript sind die
 *    fertigen Grafiken sichtbar. Ohne Seitenwechsel fällt das kaum auf; mit
 *    weichem Übergang friert genau dieser Moment im Standbild ein.
 * ⚠ Der erste Versuch (nur die alte Seite wegblenden) hat es VERDECKT, nicht
 *    behoben — man sah es weiter durch die verblassende Seite hindurch.
 *
 * ✅ JETZT SETZT DAS CSS DEN ANFANGSZUSTAND, nicht das Skript. Es gilt vom
 *    ersten gezeichneten Bild an; das Skript hebt es auf, sobald es versteckt
 *    hat (`lp-sem-bild-bereit` / `lp-sem-zahl-bereit`).
 * ⛔ NUR WENN JAVASCRIPT LÄUFT (`scripting: enabled`) und Bewegung erlaubt
 *    ist — sonst bliebe die Zeichnung für immer unsichtbar. Beides sind echte
 *    Fälle: `seminar.js` steigt bei abgestellter Bewegung sofort aus.
 * ⛔ SICHERHEITSNETZ in `huelle-fuss.php`: Fehlt die Markierung nach vier
 *    Sekunden noch, wird sie gesetzt. Ein Skriptfehler darf niemals eine
 *    dauerhaft leere Grafik hinterlassen.
 * ⚠ Für NEUE Einblendungen gilt ab jetzt: Anfangszustand ins CSS, nicht ins
 *    Skript (Karsten, 04.09.2026). Bestehende bleiben, wie sie sind.
 * =================================================================== */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.lp-sem-bild-bereit) [data-sem-aufbau] svg * { opacity: 0 !important; }
  html:not(.lp-sem-zahl-bereit) .lp-sem-landing__zahlen > li > span { opacity: 0; }
}

/* ===================================================================
 * ÜBERSCHRIFTEN BRECHEN NICHT MEHR UNGLÜCKLICH UM
 * (Karsten, 04.09.2026: „Überschriften, die nicht unglücklich umbrechen —
 * ja, why not, mach's doch.")
 *
 * `balance` verteilt die Wörter gleichmässig auf die Zeilen, statt in der
 * letzten Zeile ein einzelnes Wort stehen zu lassen. Der Browser rechnet das
 * selbst; es gibt nichts einzustellen und nichts, was verrutschen kann.
 * ⚠ Wirkt nur, wo der Browser selbst umbricht — eine mit `<br>` gesetzte
 *    Zeile bleibt, wie sie ist.
 * ⚠ Nachgemessen in Karstens WebKit-Fassung: wird unterstützt.
 * ⛔ Nur Überschriften. Bei langen Fliesstexten schaltet der Browser die
 *    Ausgleichsrechnung ohnehin ab.
 * =================================================================== */
h1, h2, h3, h4 { text-wrap: balance; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 85px;
  z-index: 100;
}

/* Weichzeichner als eigene Ebene, blendet unten weich aus

   🔴 LAENGER GEZOGEN AM 02.09.2026 (Karsten): „Die Verschwommenheit so wie wir
   es haben, das soll bleiben — bloss der Verlauf von diesem Verschwommenen,
   der ist zu hartkantig bei uns. Der muesste eigentlich laenger gezogen werden,
   damit es schoen uebergangsmaessig aussieht; der kann ruhig laenger werden,
   auch groesser von der Hoehe her."

   Vorher lief der Verlauf ueber die letzten 24px einer 87px hohen Ebene aus —
   auf so kurzer Strecke sieht man die Kante als Strich. Danach war die Ebene
   150px hoch: voll deckend bis 62px, danach 88px Auslauf.

   🔴 AM SELBEN TAG WIEDER GEKUERZT — 150px -> 125px (Karsten, 02.09.2026):
   „Wenn ich bei Downloads bin und dann runter scrolle, dann gibt es auch diese
   rechte Spalte und da steht dann drueber `Dein Ergebnis` … diese Ueberschrift
   ist naemlich jetzt auch verschwommen, weil ja eben die Menuezeile darueber
   geht. … Der Hintergrund, dieser graue Absatz, der muss etwas kuerzer werden,
   etwas — nur etwas. Aber es muss trotzdem dieses Fade haben, das so fluessig
   uebergeht, so dass man kaum die harte Kante sieht."
   ⛔ NICHT die rechte Spalte nach unten schieben — das hat Karsten ausdruecklich
   ausgeschlossen. Nur die Ebene wird kuerzer.
   ⚠ Deckend bleibt es bis 62px: Dort endet das Menue selbst (60px). Wer diesen
   Wert senkt, macht die Menuepunkte schlechter lesbar.
   ⚠ Der Auslauf ist von 88px auf 63px geschrumpft — die acht Stufen wurden
   PROPORTIONAL mitgezogen, nicht nur Anfang und Ende verschoben. Sonst
   entstehen Streifen (siehe naechster Absatz).

   ⚠ Die Stufen folgen einer weichen S-Kurve (smoothstep), NICHT einer Geraden.
   Ein linearer Verlauf zeigt auf langer Strecke Streifen, weil der Browser die
   Maske in 8-Bit-Stufen rechnet. ⛔ Beim Nachjustieren die Stufen mitziehen,
   nicht nur Anfang und Ende verschieben.

   ⚠ Die Ebene ragt 40px unter den 85px hohen Kopf hinaus (vorher 65px). Das ist Absicht und
   stoert nichts: `pointer-events: none` — sie faengt keine Klicks ab, und
   `.site-header` hat kein `overflow: hidden`, das sie abschneiden wuerde.

   ⛔ Der Weichzeichner selbst bleibt bei 5px. Karsten wollte ausdruecklich nur
   den UEBERGANG anders, nicht die Staerke. */
.site-header::before {
  content: "";
  position: absolute;
  inset: -2px 0 auto 0;
  height: 125px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom,
            #000 0,
            #000 62px,
            rgba(0,0,0,0.94) 71px,
            rgba(0,0,0,0.78) 81px,
            rgba(0,0,0,0.58) 91px,
            rgba(0,0,0,0.35) 100px,
            rgba(0,0,0,0.16) 109px,
            rgba(0,0,0,0.04) 117px,
            transparent 125px);
          mask-image: linear-gradient(to bottom,
            #000 0,
            #000 62px,
            rgba(0,0,0,0.94) 71px,
            rgba(0,0,0,0.78) 81px,
            rgba(0,0,0,0.58) 91px,
            rgba(0,0,0,0.35) 100px,
            rgba(0,0,0,0.16) 109px,
            rgba(0,0,0,0.04) 117px,
            transparent 125px);
  pointer-events: none;
}

.header-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-width);
  height: 85px;
  margin-inline: auto;
}

/* Logo links: 20px links, 30px oben, Assistant Regular 20px.
   Schreibweise „leanprinzip" klein und zusammen — Karsten, 17.08.2026. */
.logo {
  position: absolute;
  left: 20px;
  top: 30px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--black);
}
/* Das „.de" hinter dem Namen — 30 % kleiner als der Name, sonst gleich.
   ⚠ Erst halbiert (50 %), das war Karsten zu viel (23.08.2026: „50 ist zu viel,
   nur 30 Prozent"). Sitzt auf derselben Grundlinie. */
.logo__endung { font-size: 70%; }

/* Pillen-Menü mittig, 35px hoch, Links 30px auseinander */
.main-nav {
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 30px;
  height: 35px;
  padding: 0 30px;
  border: 1px solid var(--dark-grey);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.4);

  /* 🔴 GLAS FUER DIE PILLE — 02.09.2026 (Karsten, mit einem Bild aus der
     Perplexity-App als Vorbild): „ich haette gerne auch diesen Glas-Effekt,
     diesen Liquid-Effekt von den Buttons, auf unserem oberen Teil — erstmal
     fuer das Hauptmenue oben in der Mitte, ja, mehr nicht. Es geht nur um das
     Design, also das Optische."

     ⛔ Zuerst galt: NUR die Pille. Einen Tag spaeter kam der Knopf rechts dazu
     (Karsten, 02.09.2026: „Jetzt haette ich gerne den Anmeldebutton genauso wie
     die Menuezeile — nicht grau, sondern auch so eine graue Umrandung, so ein
     Glaseffekt dahinter"). Siehe `.btn-login` weiter unten: dieselben zwei
     Zeilen, dieselben Werte.
     ⛔ Menuezeichen und Klappmenue bleiben weiterhin unberuehrt.

     ⛔ NUR DER HINTERGRUND. Karsten hat direkt nachgeschaerft: „Das Design soll
     genau so sein wie vorher — da ist die Linie drumherum, alles soll gleich
     bleiben. Es soll NICHT eins zu eins so aussehen wie das Vorbild, nur dieser
     glasige Hintergrund auf der Menueleiste." Also: die graue Linie, die
     Rundung, die Hoehe, die Abstaende und das halbdurchsichtige Weiss bleiben
     Zeichen fuer Zeichen, wie sie abgenommen wurden.
     ⛔ Ein erster Anlauf hatte zusaetzlich eine helle Innenkante und einen
     weichen Schlagschatten — das ist der uebliche Glas-Bausatz, aber es
     VERAENDERT das Aussehen. Wieder ausgebaut (02.09.2026).

     🔵 AM 04.09.2026 HAT KARSTEN DAS UMGEDREHT: *„Ich will nicht staendig
     rundrehen. Der Weichzeichner muss generell da sein — so wie das Menue
     generell da ist. Mach es einmal richtig."*
     ⛔ DAS GEHT NICHT MIT DEM WEICHZEICHNER ALLEIN, das ist Physik und kein
     Fehler: `backdrop-filter` verwischt, was DAHINTER liegt. Am Seitenanfang
     liegt dort ueberall Weiss — verwischtes Weiss ist Weiss. Nachgemessen auf
     fuenf Seiten: der Filter war ueberall gleich aktiv, sichtbar wurde er nur
     dort, wo Inhalt durchlaeuft (deshalb „kommt bei Ueber uns spaeter" — da
     scrollte ein Bild darunter).
     ✅ DAMIT DIE SCHEIBE IMMER ALS SCHEIBE ZU SEHEN IST, braucht sie eine
     eigene Kante: **ein sehr weicher Schlagschatten**, 8 % Schwarz. Das ist
     genau die Zutat, die am 02.09. rausflog — sie kommt auf die Ansage vom
     04.09. zurueck, und zwar NUR sie: keine helle Innenkante, keine anderen
     Werte, Rundung, Hoehe, Linie und Durchsichtigkeit unveraendert.

     Es bleiben zwei Zutaten, und beide betreffen nur, was HINTER der Pille
     durchscheint:
       1. eigener Weichzeichner: die Pille verwischt ihren Untergrund noch
          einmal — zusaetzlich zur Kopfebene. Dadurch wirkt sie wie eine dicke
          Scheibe statt wie eine Folie. Genau das fehlte: bisher war sie nur
          durchsichtig, das Bild dahinter blieb scharf.
       2. `saturate(180%)`: Glas nimmt die Farbe dessen an, was dahinter liegt.
          Genau das sieht man im Vorbild — dort faerben sich die runden Knoepfe
          gelb bzw. blau vom Bild dahinter. Ohne Saettigung wirkt es milchig.

     ⚠ Echte Lichtbrechung (das Verzerren am Rand, wie bei Apples Liquid Glass)
     geht in CSS nicht — dafuer braeuchte es einen SVG-Verschiebungsfilter, der
     bei jedem Bildaufbau neu gerechnet wird. Auf einer Seite, die auf Tempo
     getrimmt ist, waere das der falsche Preis.

     ⚠ `-webkit-backdrop-filter` MUSS mitstehen: Safari kennt die Eigenschaft
     nur mit Vorsilbe — und Karsten sieht sich die Seite im Safari an. */
  -webkit-backdrop-filter: blur(14px) saturate(180%);
          backdrop-filter: blur(14px) saturate(180%);
  /* Damit die Scheibe auch ueber weissem Grund eine Scheibe ist (04.09.2026). */
  /* ⛔ KEIN SCHATTEN (Karsten, 06.09.2026, mit Bild): Da ist drumherum etwas
     um diesen Buttons. Bitte Schatten wegmachen, einfach wegmachen.
     ⚠ Hier stand `box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08)`, dazugekommen
     am 02.09.2026 mit der Glas-Optik. Die Abgrenzung tragen jetzt der Rand
     und der Weichzeichner allein — beide bleiben ausdrücklich stehen. */
}

.main-nav a {
  position: relative;
  top: 1px;
  /* 🔴 KEINE MINDESTBREITE MEHR (Karsten, 03.09.2026, §420): „ich verstehe
     nicht, warum im Menü oben das Wort Konto so viel Abstand rechts und links
     hat. Alle Buchstaben sind gleichmäßig, aber Konto hat so viel Abstand."
     ⛔ URSACHE war genau diese Zeile: leano hat feste `width:70px`, hier stand
     `min-width:70px`. „Konto" ist bei 12px rund 33px breit — der Punkt wurde
     also auf 70px aufgeblasen und trug 18px leeren Raum auf jeder Seite ZUSÄTZLICH
     zur 30px-Lücke. Bei den langen Punkten („Online Seminar") fiel es nie auf,
     weil sie von sich aus breiter als 70px sind.
     ✅ Jetzt bestimmt allein der Text die Breite, der Abstand ist überall die
     30px-Lücke aus `.main-nav`. */
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  font-size: 12px;
  line-height: 15px;
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
/* 🔴 UNTERSTREICHUNG NUR MIT MAUS (Karsten, 02.09.2026: „wenn ich am Handy
   einen Menüpunkt drücke, wird kurz so ein grauer Effekt aktiviert oder es
   wird unterstrichen — das macht für ein Handymenü überhaupt keinen Sinn").
   ⛔ Ein `:hover` bleibt auf dem Handy nach dem Antippen HÄNGEN, bis man
   woanders hintippt — das Gerät hat keinen Zeiger, der wieder weggeht.
   `@media (hover: hover)` fragt genau das ab: nur Geräte mit echtem Zeiger
   bekommen die Regel. Am Rechner ändert sich dadurch nichts. */
@media (hover: hover) {
  .main-nav a:hover { text-decoration-color: currentColor; }
}

/* Das graue Aufblitzen beim Antippen. Das malt das Handy-Betriebssystem selbst
   über jeden Link, sobald ein Finger ihn berührt — im ausgeklappten Menü sieht
   das aus wie ein Fehler. */
.main-nav a,
.nav-toggle,
.nav-collapse .btn-login,
/* ⚠ Die Antipp-Markierung ist jetzt global am `html` abgeschaltet (ganz oben) —
   die frühere Einzelregel für die Kopflinks steht deshalb nicht mehr hier. */

/* 🔴 DAS WORT IM MENÜ WURDE BEIM KLICKEN BLAU MARKIERT (Karsten, 04.09.2026:
   „als ob ich es markiert hätte").
   ⛔ URSACHE: Zwei Klicks kurz hintereinander auf dasselbe Wort sind für den
   Browser ein Doppelklick — und der markiert Text. Vorher fiel das kaum auf,
   weil die Seite dazwischen neu aufgebaut wurde; seit der Kopf beim
   Seitenwechsel STEHEN BLEIBT, trifft der zweite Klick dasselbe Wort.
   ⚠ Am Aussehen ändert sich nichts, es lässt sich nur kein Menüwort mehr
   versehentlich markieren. Für den übrigen Text der Seite gilt das NICHT. */
.site-header .main-nav a,
.site-header .btn-login,
.site-header .logo {
  -webkit-user-select: none;
          user-select: none;
}

/* Anmelden rechts: 35px hoch, schwebt frei neben der Pille

   🔴 AUS GRAU WURDE GLAS — 02.09.2026 (Karsten): „Jetzt haette ich gerne den
   Anmeldebutton genauso wie die Menuezeile: nicht grau, sondern auch so eine
   graue Umrandung, so ein Glaseffekt dahinter und so weiter — haette ich
   genauso bitte. Also genau das Gleiche wie Menue, plus der Anmeldebutton, der
   dann extra schwebt auf der rechten Seite."

   ⛔ „GENAU DAS GLEICHE" IST WOERTLICH GEMEINT. Grund, Rahmen und Weichzeichner
   sind Zeichen fuer Zeichen dieselben Werte wie bei `.main-nav`. Wer einen davon
   aendert, aendert BEIDE — sonst laufen Pille und Knopf auseinander, und genau
   das war die Ansage nicht.

   | | vorher | jetzt |
   |---|---|---|
   | Grund   | `--bg-grey` (#f5f5f5, deckend grau) | `rgba(255,255,255,0.4)` |
   | Rahmen  | 1px durchsichtig                    | 1px `--dark-grey` (#999) |
   | Schatten| `0 0 1px rgba(0,0,0,0.25)`          | keiner |
   | dahinter| nichts                              | Weichzeichner + Saettigung |

   ⚠ DER SCHATTEN IST BEWUSST WEG. Er war ein Ersatz fuer eine Kante, die es
   nicht gab — ein Hauch Dunkel rundherum, damit sich der graue Knopf ueberhaupt
   vom Hintergrund abhob. Jetzt gibt es eine echte graue Umrandung. Beides
   zusammen legt einen zweiten, dunkleren Saum um den Rahmen; die Kante sieht
   schmutzig aus statt sauber. Die Pille hat aus demselben Grund keinen.

   ⛔ KEIN HOVER-EFFEKT — Karsten, 02.09.2026, ausdrueckliche Ansage: „Der
   Anmelde-Button darf keinen Hover-Effekt haben."
   Vorher wurde der durchsichtige Rahmen beim Ueberfahren hellgrau. Ich hatte
   das beim Umbau auf Glas zunaechst nur umgedreht (Rahmen wird dunkler), weil
   ein AUFHELLENDER Rahmen ueber Dunkelgrau wie ein Fehler aussieht. Karsten
   will gar keinen: Der Knopf steht still, wie die Lupe in der Pille daneben.
   ⛔ Wer hier spaeter wieder einen Effekt ergaenzt, macht es gegen die Ansage.
   Die `transition` ist deshalb ebenfalls weg — sie haette nichts mehr zu tun.
   ⚠ Die Tastatur-Markierung bleibt davon unberuehrt: Sie kommt aus der
   `:focus-visible`-Regel weiter oben und ist kein Hover. Ohne sie waere der
   Knopf fuer Tastaturbedienung nicht mehr auffindbar. */
.btn-login {
  position: absolute;
  right: 30px;
  top: 24px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.4);
  color: var(--black);
  font-size: 12px;
  line-height: 15px;
  border: 1px solid var(--dark-grey);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
          backdrop-filter: blur(14px) saturate(180%);
  /* Derselbe Schatten wie an der Pille — sie gehoeren zusammen (04.09.2026). */
  /* ⛔ KEIN SCHATTEN (Karsten, 06.09.2026, mit Bild): Da ist drumherum etwas
     um diesen Buttons. Bitte Schatten wegmachen, einfach wegmachen.
     ⚠ Hier stand `box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08)`, dazugekommen
     am 02.09.2026 mit der Glas-Optik. Die Abgrenzung tragen jetzt der Rand
     und der Weichzeichner allein — beide bleiben ausdrücklich stehen. */
}
.btn-login span {
  position: relative;
  top: 1px;
  /* 🔴 KEINE MINDESTBREITE — dieselbe Falle wie bei `.main-nav a` (§420,
     03.09.2026). Heute steht hier „Anmelden" oder „Abmelden", beide breiter als
     70px; ein kuerzeres Wort haette dieselbe leere Luft bekommen wie „Konto" im
     Menue. Karsten: „bitte, reicht schon, das in Ordnung." */
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}

/* ---------------------------------------------------------
   LUPE IM MENUE (.btn-suche)

   ⛔ Karsten hat das am 19.08.2026 dreimal nachgeschaerft, es gilt die letzte
   Fassung: „die Lupe sollte doch rechts ans Menue ran." Also: letzter Eintrag
   IN der Pille, rechts hinter „Zugang erhalten", in derselben Farbe wie die
   Menuepunkte.

   ⚠ KEIN HOVER-EFFEKT — ausdrueckliche Ansage. Die Menuepunkte daneben
   unterstreichen beim Ueberfahren, die Lupe nicht. Wer hier spaeter einen
   Effekt ergaenzt, macht es gegen die Ansage.

   ⚠ Die Lupe ist ein <a> IN .main-nav und erbt damit deren Regeln
   (min-width:70px, Unterstreichung, feste Textmasse). Die muessen hier
   ausdruecklich zurueckgenommen werden, sonst reisst ein 70px breiter,
   unterstrichener Block die Pille auseinander.
   --------------------------------------------------------- */
.main-nav .btn-suche {
  position: relative;
  top: 1px;
  min-width: 0;
  width: 17px;
  height: 17px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--black);
  text-decoration: none;
}
.main-nav .btn-suche:hover { text-decoration: none; color: var(--black); }
.main-nav .btn-suche svg { display: block; }

/* Am Rechner die Lupe, im Burgermenue das Wort — beides steht im HTML, hier
   wird umgeschaltet (Karsten, 19.08.2026: „wenn es in das Burgermenue geht,
   bitte nicht mehr das Lupensymbol, sondern der Menuepunkt Suche"). */
.main-nav .btn-suche__wort { display: none; }

/* ---------------------------------------------------------
   SUCHSEITE (/suche/)
   --------------------------------------------------------- */
/* 30px mehr Luft nach oben als auf den uebrigen Seiten (Karsten, 19.08.2026:
   „30 px Abstand von oben mehr"). .lp-inhalt bringt 125px mit, hier also 155. */
.lp-suchseite.lp-inhalt { padding-top: 155px; }

/* Leerer Zustand 100px tiefer — „es sollte wie bei Google sein, etwas mittig,
   aber etwas hoeher" (Karsten, 25.08.2026). Die Klasse setzt
   `vorlage-seite-13771.php`, wenn keine Frage gestellt ist.
   ⛔ Sobald Treffer da sind, rutscht das Feld zurueck auf 155 — sonst muesste
   man nach jedem Enter erst scrollen, bevor der erste Treffer kommt. */
.lp-suchseite--leer.lp-inhalt { padding-top: 255px; }

/* 🔴 ZWEI VERSCHIEDENE DINGE, AM 26.08.2026 DREIMAL VERWECHSELT:
   1. Das WORT „Suche" steht MITTIG ueber dem Suchfeld — echt zentriert, nicht
      linksbuendig in einem mittigen Kasten (Karsten: „Also Suche, das Wort, war
      mittig gewesen. Jetzt ist es linksbuendig. Verstehst du? Linksbuendig ist
      nicht mittig.").
   2. Die TREFFER stehen linksbuendig — das war immer richtig — und nutzen die
      VOLLE Breite der Seitenspalte (800px, `.lp-inhalt--schmal`). Sie duerfen
      NICHT auf die 560px des Suchfelds eingeschnuert werden, sonst bricht jeder
      Anriss viel zu frueh um (Karsten: „sie reichen nur fuer diese Breite, die
      bei Suchen orientiert wurde — werden die einfach getrennt!").
   ⛔ Mittig ist ALLEIN das Suchfeld (560px, siehe `.lp-suche__form`) und das
   Wort darueber. Sonst nichts.
   ⛔ Und NICHT die ganze Seite auf 1280px aufreissen — das war der Fehlversuch
   davor, da rutschte die Ueberschrift nach ganz links. */
.lp-suchseite .lp-suche__titel { text-align: center; }

/* Platzhalter bei leerem Suchfeld: exakt die Hoehe, die eine volle Zehnerliste
   einnimmt — gemessen am 19.08.2026 bei 1440px Fensterbreite zwischen
   Unterkante Suchfeld (268) und Unterkante des zehnten Treffers samt Abstand
   (1348) — dadurch steht die Fusszeile leer wie voll an derselben Stelle.
   Die 300px Abstand zur Fusszeile bringt `.lp-inhalt` ohnehin mit.
   ⚠ Auf schmalen Geraeten brechen die Anrisstexte auf mehr Zeilen um, dort ist
   eine echte Zehnerliste etwas hoeher als dieser Platzhalter. Ein fester Wert
   ist trotzdem richtig: er haelt die Fusszeile ruhig, statt sie beim ersten
   getippten Buchstaben springen zu lassen. */
/* ⚠ 980 statt 1080 seit 25.08.2026: Der leere Zustand hat oben 100px dazu-
   bekommen, also gehen hier genau diese 100px ab. So steht die Fusszeile leer
   wie voll weiterhin an derselben Stelle. */
.lp-suchseite .lp-suche__platzhalter { height: 980px; }

.lp-suchseite .lp-suche__titel {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--black);
  margin: 0 0 30px;
}

.lp-suchseite .lp-suche__form { position: relative; max-width: 560px; margin: 0 auto; }

/* ---------- WEICHE PILLE (Karsten, 25.08.2026, mit Bildvorlage) ----------
   Runde weisse Pille, Lupe innen links — statt der frueheren blossen Linie.
   ⚠ Rand UND Schatten, obwohl die Bildvorlage keinen hat: Dort ist der
   Seitengrund grau, bei uns weiss. Ohne Rand verschwindet die weisse Pille im
   weissen Grund. Wird der Seitengrund einmal grau, koennen beide weg.
   ⛔ Der Seitengrund wurde NICHT grau gemacht — sonst saehen Kopf- und
   Fusszeile auf dieser einen Seite anders aus als ueberall sonst.
   ⚠ !important ist Pflicht — das gekaufte Theme setzt sonst Rahmen, Radius,
   weissen Grund und 52px Hoehe fuer jedes Eingabefeld durch (dieselbe Falle
   wie auf der Anmeldeseite). */
.lp-suchseite .lp-suche__feld {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 58px;
  padding: 0 24px;
  border: 1px solid var(--light-grey);
  border-radius: 29px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.lp-suchseite .lp-suche__lupe { flex: none; color: var(--dark-grey); }
.lp-suchseite .lp-suche__feld input {
  width: 100%;
  box-sizing: border-box;
  height: 56px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 0 2px !important;
  font: 400 16px/27px var(--font-body) !important;
  color: var(--black) !important;
  -webkit-appearance: none;
          appearance: none;
}
.lp-suchseite .lp-suche__feld input::placeholder { color: var(--text-grey); opacity: 1; }
.lp-suchseite .lp-suche__feld input:focus { outline: none; }
/* ⚠ Frueher faerbte sich die Unterlinie schwarz. Die gibt es nicht mehr —
   also faerbt sich der ganze Rand der Pille. Sichtbar bleibt es damit,
   ohne dass die Pille springt. */
.lp-suchseite .lp-suche__feld:focus-within { border-color: var(--dark-grey); }
.lp-suchseite .lp-suche__feld input::-webkit-search-decoration,
.lp-suchseite .lp-suche__feld input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Vorschlaege beim Tippen — schwebende Liste unter dem Feld */
.lp-suchseite .lp-suche__vorschlaege {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  /* ⚠ Weiche Karte passend zur Pille (25.08.2026): groesserer Radius, heller
     Rand, 8px Innenrand — damit die runden Zeilen darin nicht am Rand kleben. */
  margin: 8px 0 0;
  padding: 8px;
  list-style: none;
  max-height: 340px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
.lp-suchseite .lp-suche__vorschlag a {
  display: block;
  padding: 12px 18px;
  border-radius: 15px;
  color: var(--black);
  text-decoration: none;
}
/* Beim Ueberfahren grau UND der Titel unterstrichen (Karsten, 25.08.2026) —
   die Unterstreichung sagt, dass die ganze Zeile ein Link ist. */
.lp-suchseite .lp-suche__vorschlag:hover a,
.lp-suchseite .lp-suche__vorschlag.is-offen a { background: var(--bg-grey); }
.lp-suchseite .lp-suche__vorschlag:hover .lp-suche__vorschlag-titel,
.lp-suchseite .lp-suche__vorschlag.is-offen .lp-suche__vorschlag-titel { text-decoration: underline; }
.lp-suchseite .lp-suche__vorschlag-titel {
  display: block;
  font: 400 16px/22px var(--font-body);
}
.lp-suchseite .lp-suche__vorschlag-text {
  display: block;
  font: 400 12px/17px var(--font-body);
  color: var(--text-grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ergebnisliste nach Enter */
.lp-suchseite .lp-suche__zahl {
  margin: 40px 0 20px;
  font: 400 13px/20px var(--font-body);
  color: var(--text-grey);
}
.lp-suchseite .lp-suche__liste { list-style: none; margin: 0; padding: 0; }
.lp-suchseite .lp-suche__eintrag { margin-bottom: 26px; }
.lp-suchseite .lp-suche__link { display: block; text-decoration: none; color: var(--black); }
.lp-suchseite .lp-suche__eintrag-titel {
  display: block;
  font: 400 18px/26px var(--font-body);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
.lp-suchseite .lp-suche__link:hover .lp-suche__eintrag-titel { text-decoration-color: currentColor; }
/* Die Adresse ueber dem Titel, klein und grau — Google-Vibe (26.08.2026).
   ⚠ Sie steht IM Link, wird aber nicht unterstrichen: sie ist eine Ortsangabe,
   kein zweites Ziel. */
.lp-suchseite .lp-suche__eintrag-pfad {
  display: block;
  margin-bottom: 2px;
  font: 400 12px/18px var(--font-body);
  color: var(--text-grey);
  overflow-wrap: anywhere;
}
.lp-suchseite .lp-suche__eintrag-text {
  display: block;
  margin-top: 4px;
  font: 400 14px/22px var(--font-body);
  color: var(--text-grey);
}
.lp-suchseite .lp-suche__nichts { font: 400 14px/22px var(--font-body); color: var(--text-grey); }
/* ---------- DAS GESUCHTE WORT WIRD NICHT MEHR HERVORGEHOBEN (§424, 04.09.2026) ----------
   Karsten am 04.09.2026, nachdem er beides gesehen hat: „Es ist besser, wenn
   gar nichts einfärbt, ohne Farbe, also einfach weg."

   Vorgeschichte an einem Tag: Gelb (`rgba(255,214,0,.35)`) → Pastellblau
   (`rgba(80,125,191,.25)`) → gar keine Farbe. Die Trefferliste ist ruhiger ohne.

   ⛔ DIESE REGEL DARF NICHT WEG. Ohne sie färbt der BROWSER `<mark>` von sich
   aus knallgelb ein — das ist seine Voreinstellung, nicht unsere Farbe. Wer die
   Regel loescht, „stellt" also nicht „nichts ein", sondern holt sich ein
   kraeftigeres Gelb zurueck als das, was vorher da war.

   ⚠ Das `<mark>` im Text BLEIBT stehen (`teil-suchfeld.php`, `lp-suche.php`).
   Es ist die Auszeichnung „das ist die Fundstelle" — Vorleseprogramme nennen
   sie. Sichtbar ist sie nicht mehr, und genau so ist es gewollt. */
.lp-suchseite mark {
  background: none;
  color: inherit;
  padding: 0;
}

/* ⚠ LETZTE SICHERUNG GEGEN ZU LANGE ZEICHENKETTEN (25.08.2026): Auf manchen
   Altseiten steckt ein verschluesselter Block des Baukastens — hunderte Zeichen
   ohne ein einziges Leerzeichen. Der sprengte die Spalte nach rechts. Der
   eigentliche Riegel sitzt in `lp_suche_text()` (alles ueber 40 Zeichen am
   Stueck fliegt raus); das hier faengt ab, was trotzdem durchkommt. */
.lp-suchseite .lp-suche__eintrag-titel,
.lp-suchseite .lp-suche__eintrag-text,
.lp-suchseite .lp-suche__vorschlag-titel,
.lp-suchseite .lp-suche__vorschlag-text { overflow-wrap: anywhere; }

/* ---------- PILLE UND HERKUNFT IN DER TREFFERLISTE (§414, 03.09.2026) ----------
   Karsten am 03.09.2026: „Ich moechte, dass die Leute sehen: oh guck mal, das
   existiert, aber dafuer muss ich mich registrieren oder den Zugang bekommen …
   man soll auch sehen, das gehoert zu Kapitel 3."

   ⛔ AUSSEHEN 1:1 WIE `.lp-baum__sperre` (fundament.css, Abschnitt weiter unten):
   gelb #f2d680, Radius 20 px, 11 px Schrift. Es gibt auf der ganzen Seite nur
   dieses eine Bild fuer „hier fehlt dir noch etwas" — im Seminarbaum, auf den
   Downloadkarten und jetzt in der Suche.
   ⚠ EIGENE KLASSE statt `.lp-baum__sperre`: Dort ist die Pille selbst ein Link;
   hier ist die GANZE Trefferzeile der Link, die Pille darf also keinen eigenen
   Zeigefinger und keine eigene Hoverfarbe bekommen.
   ⚠ Der WORTLAUT steht nicht hier, sondern in `lp_suche_pille()` — an genau
   einer Stelle fuer Trefferliste und Vorschlagsliste (§288). */
.lp-suchseite .lp-suche__pille {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  background: #f2d680;
  color: var(--black);
  border-radius: 20px;
  padding: 3px 14px;
  font: 400 11px/1.4 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
}
/* ⚠ Die Pille wird beim Ueberfahren NICHT mit unterstrichen — sie ist eine
   Kennzeichnung, kein Teil der Ueberschrift. */
.lp-suchseite .lp-suche__link:hover .lp-suche__pille { text-decoration: none; }

/* Die Herkunftszeile im Vorschlag beim Tippen — dieselbe Optik wie der Pfad in
   der Trefferliste, damit beide Listen gleich aussehen. */
.lp-suchseite .lp-suche__vorschlag-ort {
  display: block;
  font: 400 11px/16px var(--font-body);
  color: var(--text-grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- BLAETTERN, WIE BEI GOOGLE (Karsten, 25.08.2026) ----------
   Zurueck · 1 · … · Nachbarn · … · letzte · Weiter. Rechts unter der Liste.
   Optik wie die Vorschlagszeilen: runde Felder, beim Ueberfahren grau, KEIN
   Rahmen. ⛔ Die Seite, auf der man steht, ist bewusst kein Link — sie ist ein
   <span>, sieht deshalb ruhig aus und laesst sich nicht anklicken. */
.lp-suchseite .lp-suche__blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 40px;
}
.lp-suchseite .lp-suche__blatt {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 15px;
  font: 400 14px/20px var(--font-body);
  color: var(--black);
  text-decoration: none;
}
a.lp-suche__blatt:hover { background: var(--bg-grey); text-decoration: none; }
.lp-suchseite .lp-suche__blatt.is-hier { color: var(--text-grey); }
.lp-suchseite .lp-suche__blatt-luecke {
  padding: 8px 4px;
  font: 400 14px/20px var(--font-body);
  color: var(--text-grey);
}

.nav-collapse { display: contents; }

.nav-toggle {
  display: none;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;    /* iOS Safari schluckt sonst den ersten Klick */
}
.nav-toggle img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-toggle .icon-burger { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
.nav-toggle .icon-close  { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
.nav-toggle[aria-expanded="true"] .icon-burger { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.nav-toggle[aria-expanded="true"] .icon-close  { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }


/* =========================================================
   KNOPF — Ghost mit Pfeil, 1:1 leano (style.css 262–284)
   ========================================================= */

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 8px;
  border: 1px solid var(--dark-grey);
  border-radius: 20px;
  background: var(--white);
  color: var(--black);
  font-size: 13px;
  /* 🔴 FEHLTE (Karsten, 25.08.2026): „Ich kann da ueberhaupt nicht reinklicken,
     wenn ich mit der Maus ruberfahre." Bei einem `<a>` setzt der Browser den
     Zeigefinger von selbst, bei einem `<button>` NICHT — der Knopf sah tot aus.
     ⚠ `font-family: inherit` aus demselben Grund: ein `<button>` erbt die
     Schrift nicht, er nimmt die des Betriebssystems. Auf der Kontaktseite war
     das schon einzeln geflickt — das gehoert hierher, nicht dorthin. */
  cursor: pointer;
  font-family: inherit;
}
.btn-ghost img {
  width: 14px;
  height: 14px;
  flex: none;
  position: relative;
  /* ⚠ Karsten, 04.09.2026: „Der Pfeil im Knopf muss einen halben Pixel nach
     unten — generell die Zeichen dort, das sitzt etwas zu hoch." Von 1px auf
     1.5px — und am selben Abend eine Haaresbreite zurück auf 1px: „Beim Knopf
     Lean Online-Seminar ist er nicht ganz mittig, der muss etwas weiter nach
     oben." Gilt für JEDES Zeichen in einem Knopf, nicht nur den Pfeil auf der
     Kontaktseite: sie kommen alle über diese eine Regel. */
  top: 1px;
  transition: transform 0.3s ease;
}
.btn-ghost span { padding: 0 10px; line-height: 27px; position: relative; top: 0.5px; }

/* 🔴 KNOPF OHNE PFEIL: DER TEXT BRAUCHT DENSELBEN ABSTAND (Karsten, 26.08.2026:
   „der Text der da drin ist, der muss rechts und links viel mehr Abstand haben …
   das ist jedes Mal der gleiche Fehler, mach das doch mal standardisieren")

   NACHGEMESSEN, woran es lag: Ein Knopf MIT Pfeil traegt sein Wort in einem
   `<span>` — und das bringt 10px mit. Zusammen mit den 8px des Knopfes sind das
   18px. Ein Knopf OHNE Pfeil (jedes `<button>` in einem Formular) hat kein
   `<span>`, also blieben nur 8px. Genau deshalb wirkt er gequetscht.
   ⛔ Der Standard war nicht falsch, er griff nur bei der Haelfte der Knoepfe.
   Diese Regel zieht die 18px nach — automatisch, ohne Zusatzklasse, fuer JEDEN
   kuenftigen Knopf ohne Pfeil.
   ⚠ `:not(:has(img))` trifft ausschliesslich pfeillose Knoepfe; die abgenommenen
   Knoepfe der Startseite und des Seminars bleiben unveraendert. */
.btn-ghost:not(:has(img)) { padding: 0 18px; }

/* Hover: NUR der Pfeil rutscht 5px nach rechts — nichts anderes. */
.btn-ghost:hover img { transform: translateX(5px); }

/* Zurueck-Knopf: Pfeil rechts vom Wort, um 180 Grad gedreht. Beim Ueberfahren
   wandert er nach links — also ebenfalls AUF DAS WORT ZU (Karsten, 21.08.2026).
   ⚠ `translateX(5px)` nach der Drehung schiebt nach links, nicht nach rechts. */
.btn-ghost--zurueck img { transform: rotate(180deg); }
.btn-ghost--zurueck:hover img { transform: rotate(180deg) translateX(5px); }

/* Der Zurueck-Knopf im Downloadbereich — gleiche Stelle und gleicher Abstand
   wie `.lp-sem-kap__zurueck` im Online-Seminar (25.08.2026): oben links, ueber
   der Ueberschrift. Gilt fuer JEDE Unterseite von 914. */
.lp-dl-zurueck { margin: 0 0 22px; }


/* =========================================================
   FUSSZEILE — 1:1 leano (style.css 751–893), ohne Sprachwahl
   ========================================================= */

.site-footer {
  /* 🔴 display:block ist PFLICHT, nicht Kosmetik (17.08.2026, zweimal erlebt):
     Das Plugin Smart Sections schreibt global `footer { display: none; }` in den
     Kopf und blendet die Fußzeile hinterher per JavaScript wieder ein. Ohne
     diese Zeile ist die Fußzeile unsichtbar (Höhe 0, Breite 0 — genau so
     gemessen). Die Klassenregel schlägt den Elementselektor des Plugins, ohne
     !important. NICHT LÖSCHEN, solange das Plugin aktiv ist. */
  display: block;
  position: relative;
  width: 1200px;
  max-width: calc(100% - 80px);
  /* 🔵 REGEL VON KARSTEN (18.08.2026), gilt ueberall: „Die Abstaende sollten oben
     und unten gleich sein, quasi immer."
     Hier heisst das: Die drei Spalten beginnen 50px unter der Oberkante, also
     muss das letzte Wort auch 50px ueber der Unterkante enden.
     Gerechnet: 50 (oben) + 245 (hoechste Spalte, „Rechtliches") + 50 (unten)
     = 345px. leanos 309px reichten dafuer nicht — gemessen waren es unten nur
     14px.
     ⚠ Beim ersten Versuch hatte ich 331px gerechnet und die 14px Abstand hinter
     der letzten Zeile abgezogen. Falsch: ein Aussenabstand zaehlt nicht zur
     gemessenen Hoehe des Elements. Nachgemessen waren unten 36 statt 50px.
     ⚠ Wer eine Zeile in „Rechtliches" ergaenzt, muss diesen Wert nachziehen.
     Nachmessen mit `_Werkzeuge/design_pruefen.py`. */
  min-height: 345px;
  /* 🔵 REGEL VON KARSTEN (04.09.2026), gilt ueberall: „Der oberste Rand der
     Fusszeile ist immer mindestens 300 Pixel vom Inhalt entfernt. Immer."
     ⛔ Der Wert steht an EINER Stelle — hier. Nicht je Seite ein eigenes
     Bodenpolster: genau so laufen Werte auseinander, und dann meldet er
     dreimal denselben Abstand (siehe --luft weiter oben).
     ⚠ Er kommt zu dem, was der letzte Abschnitt selbst mitbringt — deshalb
     „mindestens". Eine neue Seite, die es genau treffen will, nimmt ihrem
     letzten Abschnitt das untere Polster weg (so macht es die neue
     Startseite). */
  margin: 300px auto 40px;
  background: var(--bg-grey);
  border: 1px solid var(--dark-grey);
  border-radius: 20px;
}

.footer-logo {
  position: absolute;
  left: 60px;
  top: 49px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--black);
}

.footer-tagline {
  position: absolute;
  left: 60px;
  top: 86px;
  width: 375px;
  margin: 0;
  font-size: 12px;
  line-height: 25px;
  color: var(--black);
}

.footer-social {
  position: absolute;
  left: 60px;
  top: 153px;
  display: flex;
  gap: 15px;
}
.footer-social a { display: block; width: 40px; height: 40px; }
.footer-social img { display: block; width: 40px; height: 40px; }

/* Drei Spalten rechts, feste x-Positionen wie bei leano */
.footer-col { position: absolute; top: 49px; width: 150px; }
.footer-col-contact { left: 569px; }
.footer-col-law     { left: 779px; }
.footer-col-web     { left: 989px; }
/* ⚠ Der Abstand hinter der LETZTEN Zeile faellt weg — sonst misst man 14px
   Leerraum als Teil der Spalte und der untere Abstand stimmt nicht mit dem
   oberen ueberein (Karstens Regel oben=unten). */
.footer-col > *:last-child { margin-bottom: 0; }
.footer-col > * {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 25px;
  color: var(--black);
}
.footer-col > *:last-child { margin-bottom: 0; }
.footer-col-title { font-weight: 700; }
.footer-col a {
  display: block;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
.footer-col a:hover { text-decoration-color: currentColor; }


/* ⛔ DIE SIEGELLEISTE IST RAUS (Karsten, 18.08.2026): „Nimm diese beiden Linien
   weg und die drei Bilder mit staatlich zugelassen, DSGVO und SSL — mach es so
   wie bei leano, reicht."
   Die Bilddateien (siegel-zfu/-dsgvo/-ssl.png) bleiben im Theme liegen, falls
   sie wiederkommen sollen. Nicht loeschen. */


/* =========================================================
   SEITENINHALT
   Der Kopf ist fest, also braucht der Inhalt 85px Luft nach oben.
   ========================================================= */

/* ⛔ SEITENSTANDARD: MINDESTENS 200px ZWISCHEN INHALT UND FUSSZEILE
   (Karsten, 19.08.2026: „Zwischen dem Inhalt auf der Seite und der Fußzeile
   müssen mindestens 200 bis 300 Pixel sein. Generell, das ist ein Standard
   für LeanPrinzip.de.")
   Gemessen vorher: 80px Innenabstand ergaben je nach Seite 107–114px echten
   Abstand — deutlich zu wenig. 200px Innenabstand ergeben rund 230px.
   ⚠ Gilt für ALLE Inhaltsseiten. Die Startseite bringt ihren eigenen Wert mit
   (`.lp-schluss { padding-bottom: 300px }`, §22) — der bleibt, er ist größer. */
.lp-inhalt {
  width: var(--page-width);
  max-width: 100%;
  margin-inline: auto;
  padding: 125px 20px 300px;    /* 85px Kopf + 40px Luft · unten der Seitenstandard */
}

.lp-inhalt--schmal { width: 800px; }

/* 🔴 NUR DIE WÖRTERBUCH-BEGRIFFSSEITE: 300px BIS ZUR FUSSZEILE
   (Karsten, 07.09.2026: „vom Wörterbuch herunterladen zur Fußzeile die
   Oberkante 300 Pixel nur." — vorher waren es 634px.)

   Woraus die 634px bestanden: 34px Aussenabstand der Knopfreihe + 300px
   `padding-bottom` des Seitenstandards (`.lp-inhalt`) + 300px `margin-top`
   der Fusszeile. Übrig bleiben soll allein der Abstand der Fusszeile.

   ⛔ Der Seitenstandard bleibt unangetastet — alle anderen Seiten behalten
   ihre 600px. Geändert wurde ausdrücklich nur diese eine Seitenart. */
.lp-inhalt--wbbegriff { padding-bottom: 0; }
/* Dasselbe für die Wörterbuch-Übersicht mit der Liste links (Karsten,
   07.09.2026: „da muss auch die Fusszeile nach oben … vom untersten Element
   300 Pixel Abstand und dann erst die Fusszeile"). Vorher 600px. */
.lp-inhalt.lp-wbb { padding-bottom: 0; }
.lp-inhalt--wbbegriff .lp-knopf-reihe--mitte:last-child { margin-bottom: 0; }

.lp-inhalt h1 { font-size: 26px; line-height: 39px; margin-bottom: 20px; }
.lp-inhalt h2 { font-size: 22px; line-height: 32px; margin: 40px 0 16px; }
.lp-inhalt h3 { font-size: 18px; line-height: 28px; margin: 30px 0 12px; }
.lp-inhalt p  { margin-bottom: 27px; }

.lp-textblock p:last-child { margin-bottom: 0; }
.lp-textblock + .lp-textblock { margin-top: 27px; }

/* 🔴 BILDER SIND IMMER ABGERUNDET (Karsten, 07.09.2026): „Wenn man die Seite
   extra für das Wort sieht, dann sind die abgerundeten Ecken gar nicht mehr da.
   Die Grafiken sind dann eckig. Das muss auch abgerundet sein immer."
   Die Rundung stand bisher an drei Sonderstellen (Wörterbuch-Browser,
   Bildraster, Beispielkasten), aber nicht am Grundfall — also war jedes Bild
   eckig, das keinem dieser drei Fälle angehörte. Jetzt gehört sie hierher.
   ⚠ `overflow: hidden` muss mit: sonst stösst das Bild über die runde Ecke. */
.lp-bild {
  margin: 30px 0;
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  overflow: hidden;
}
.lp-bild img { width: 100%; }

.lp-trenner {
  border: 0;
  border-top: 1px solid var(--light-grey);
  width: 90%;
  margin: 70px auto;
}

.lp-knopf-reihe { margin: 30px 0 34px; }
.lp-knopf-reihe--mitte { text-align: center; }

.lp-hilfstext { color: var(--text-grey); font-size: 12px; line-height: 25px; }

/* Formularfelder — im leano-Maß: 35px hoch, Rand light-grey, Arial 12 */
label {
  display: block;
  font-size: 12px;
  line-height: 25px;
  color: var(--text-grey);
  margin-bottom: 4px;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  max-width: 100%;
  height: 35px;
  padding: 0 20px;
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  background-color: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 33px;
  appearance: none;
}
textarea { height: auto; min-height: 120px; padding: 8px 20px; line-height: 25px; resize: vertical; }

/* 🔴 EIN AUSWAHLFELD MUSS ALS AUSWAHLFELD ZU ERKENNEN SEIN (Karsten,
   11.09.2026): „Dass ein Auswahlfeld wenigstens einen Pfeil bekommt, damit man
   mitkriegt, dass man es auswählen kann … da steht ja ‚täglich‘ und ich merke
   nicht, dass das ein Auswahlfeld ist. Und das gilt für den gesamten
   Downloadbereich."
   ⛔ URSACHE, und sie steht direkt darüber: Die gemeinsame Feldregel setzt
   `appearance: none` — damit nimmt der Browser seinen eigenen Pfeil weg, und
   ersetzt wurde er nie. Ein Auswahlfeld sah deshalb überall aus wie ein
   Textfeld, das man nicht beschreiben kann.
   ⛔ DER PFEIL IST EIN HINTERGRUNDBILD, kein zusätzliches Element: Ein
   Pseudoelement kann `select` nicht tragen, und ein Umschlag um jedes Feld
   hiesse, jede Vorlage anzufassen.
   ⚠ DESHALB DARF AUF EINEM `select` NIE MEHR DIE KURZFORM `background` STEHEN —
   sie räumt das Bild wieder ab. Am 11.09.2026 waren es 18 solche Stellen in
   zwölf Dateien; alle sind auf `background-color` umgestellt.
   ⚠ Listen mit mehreren sichtbaren Zeilen (`multiple`, `size`) haben keinen
   Pfeil, also auch kein Bild und keinen Platz dafür. */
select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23555555'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  cursor: pointer;
}
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 20px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--dark-grey); }
input::placeholder, textarea::placeholder { color: var(--text-grey); }
.lp-feld { margin-bottom: 18px; }

/* Wörterbuch-Suche */
.lp-wb-suche { max-width: 420px; margin: 0 auto 40px; }
.lp-wb-suche label { text-align: center; }

/* Hinweis auf offene Stellen — nur in der Vorschau sichtbar.
   (Der schwarze Balken oben ist auf Karstens Ansage vom 17.08.2026 entfernt.
    Nicht wieder einbauen.) */
.lp-offen {
  border: 1px dashed var(--light-grey);
  color: var(--text-grey);
  font-size: 12px;
  line-height: 25px;
  padding: 12px 14px;
  margin: 30px 0;
}


/* =========================================================
   MOBIL — 1:1 leano
   ≤1279px: Fußzeile gestapelt · ≤720px: Burger-Menü
   ========================================================= */

@media (max-width: 1279px) {

  /* FUSSZEILE gestapelt: feste Positionen aufheben */
  .site-footer { height: auto; padding: 40px; }
  .footer-logo,
  .footer-tagline,
  .footer-social,
  .footer-col {
    position: static;
    left: auto;
    top: auto;
  }
  .footer-tagline { width: auto; margin-top: 20px; }
  .footer-social { margin-top: 28px; }
  .footer-col { width: auto; margin-top: 32px; }

}

/* =========================================================
   UMSCHALTPUNKT — nach Platz, nicht nach fester Breite

   ⛔ Karsten am 17.08.2026: „Das Anmelden darf maximal 10 Pixel Abstand haben
   bis die Linie vom Menü beginnt — und wenn es weniger als 10 Pixel sind, muss
   es in den Burger wechseln. Genauso beim Logo links."

   leano schaltet stur bei 720px. Das reicht hier nicht: LeanPrinzip hat sechs
   Menüpunkte statt drei, die Pille ist doppelt so breit und stößt schon lange
   vor 720px an Logo und Anmelden-Knopf. Die Schwelle rechnet deshalb das
   Skript in huelle-fuss.php aus den echten Breiten aus und setzt die Klasse
   `kompakt` auf den Kopf. NICHT auf eine feste Breite zurückbauen.
   ========================================================= */

.site-header.kompakt .nav-toggle { display: flex; }

/* ⛔ IM KLAPPMENUE KEIN GLAS (02.09.2026, gehoert zum Glaseffekt oben).
   Sobald der Kopf auf `kompakt` schaltet, ist `.main-nav` keine Pille mehr,
   sondern eine durchsichtige Spalte IM Klappmenue — und das Klappmenue bringt
   seinen eigenen Weichzeichner mit. Bliebe der Glaseffekt stehen, saesse mitten
   im Klappmenue eine zweite Glasflaeche mit Schlagschatten.
   ⚠ Steht bewusst HIER, ausserhalb jeder Bildschirmbreiten-Regel: `kompakt`
   rechnet das Skript aus den echten Breiten aus und kann auch auf einem breiten
   Bildschirm greifen. Die Rueckname muss dann genauso greifen. */
.site-header.kompakt .main-nav {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* ⛔ DER KNOPF IM KLAPPMENUE: WIE AM RECHNER, ABER NICHT DOPPELT VERWISCHT.
   Karsten am 02.09.2026: „Der Anmeldebutton selber, der soll genauso sein wie
   hier bei uns — bloss halt nicht doppelt verschwommen; dann waere es
   wahrscheinlich nur ein Rand noch. Beziehungsweise Abmeldebutton dann da
   drunter."

   ⚠ EINEN TAG ZUVOR STAND HIER DAS GEGENTEIL: grauer Knopf, kein Rahmen. Das
   war richtig, SOLANGE der Klappkasten zu 92 % deckend weiss war — ein Knopf
   mit 40 % Weiss darauf waere fast unsichtbar gewesen. Seit der Kasten selbst
   Glas ist, faellt der Grund fuer die Ausnahme weg: Der Knopf sitzt jetzt auf
   40 % Weiss und traegt selbst 40 % — er ist heller als der Kasten, und die
   graue Umrandung steht sichtbar darauf.
   ⛔ Grund und Rahmen kommen deshalb ohne Umweg aus der normalen
   `.btn-login`-Regel. Hier steht nur noch, was WEG muss.

   ⚠ WARUM DER WEICHZEICHNER WEG MUSS — und zwar technisch, nicht nach Gefuehl:
   Ein Element mit `backdrop-filter` verwischt alles, was HINTER ihm gezeichnet
   wurde. Der Klappkasten hat schon einen. Bekaeme der Knopf darin einen
   zweiten, verwischte er den bereits verwischten Kasten noch einmal — genau
   das „doppelt verschwommen", das Karsten nicht will. Es waere zudem der
   teuerste Effekt der Seite: zwei ineinandergeschachtelte Weichzeichner, bei
   jedem Aufklappen, auf dem Geraet mit der wenigsten Rechenleistung. */
.site-header.kompakt .btn-login {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* Im Klappmenue steht statt der Lupe das WORT „Suche" — letzter Eintrag unter
   „Zugang erhalten", in Groesse und Ausrichtung wie die uebrigen Punkte
   (Karsten, 19.08.2026: „wenn es in das Burgermenue geht, bitte nicht mehr das
   Lupensymbol, sondern der Menuepunkt Suche").
   ⚠ Die 17px-Masse vom Rechner muessen hier ausdruecklich weg, sonst wird das
   Wort in einen 17px schmalen Kasten gequetscht. */
.site-header.kompakt .main-nav .btn-suche {
  width: 100%;
  height: auto;
  min-height: 34px;          /* dieselbe Tippfläche wie die übrigen Punkte */
  padding: 7px 0;
  box-sizing: border-box;
  top: 0;
  align-self: stretch;
  justify-content: flex-start;
  align-items: center;
}
.site-header.kompakt .main-nav .btn-suche svg { display: none; }
.site-header.kompakt .main-nav .btn-suche__wort {
  display: inline;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

  .site-header.kompakt .nav-collapse {
    display: flex;
    position: absolute;
    top: 64px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: min(220px, calc(100vw - 32px));
    padding: 33px 18px 18px;
    border: 1px solid var(--light-grey);
    border-radius: 16px;
    /* 🔴 GLAS AUCH FUER DAS KLAPPMENUE — 02.09.2026 (Karsten): „Wenn das
       Burgermenue geoeffnet wird, dieses Pop-up, das muss auch diesen
       Glaseffekt haben — so durchsichtig und so weiter. Die Raender bleiben,
       bloss der Hintergrund muss halt so durchsichtig und verschwommen sein."
       ⛔ Dieselben zwei Werte wie bei `.main-nav` und `.btn-login` — 40 % Weiss,
       `blur(14px) saturate(180%)`. Wer einen davon aendert, aendert alle drei.
       ⚠ Vorher stand hier 92 % Weiss mit `blur(8px)`. Der Weichzeichner war
       damit praktisch wirkungslos: Bei 92 % Deckung kommt nichts mehr durch,
       was man haette verwischen koennen. Es SAH deckend aus, weil es deckend
       WAR — der Filter lief trotzdem mit und kostete Rechenzeit.
       ⛔ Rand (`--light-grey`), Rundung und Schlagschatten bleiben unangetastet
       — ausdrueckliche Ansage („die Raender bleiben"). Der Schatten haelt den
       Kasten ueber der Seite; ohne ihn schwaemme das Glas mit dem Hintergrund
       zusammen. */
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
            backdrop-filter: blur(14px) saturate(180%);
    /* ⛔ KEIN SCHATTEN AM KLAPPMENUE (Karsten, 06.09.2026): „Bitte Schatten
       wegmachen. Einfach wegmachen."
       ⚠ Hier stand `box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12)`. Er kam am
       02.09.2026 mit dem Glaseffekt dazu und sollte den Kasten ueber der Seite
       halten. Karsten ist er beim Aufklappen als schwebende Kachel aufgefallen.
       Die Abgrenzung tragen jetzt der Rand (1px light-grey) und der
       Weichzeichner allein — beides bleibt ausdruecklich stehen. */
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(-8px);
    pointer-events: none;
    transition:
      opacity 0.20s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 0.34s;
  }
  .site-header.kompakt .nav-collapse.open {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    transition:
      opacity 0.24s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* 🔴 AUSBLENDEN NACH DEM ANTIPPEN EINES MENÜPUNKTS (Karsten, 02.09.2026):
     „Wenn ich loslasse, blendet das in 0,5 Sekunden aus und dann wird die
     Seite geladen."
     ⚠ Nur für diesen einen Fall. Das Schliessen über das Kreuz bleibt schnell
     (0,20s) — dort wartet niemand auf eine neue Seite, dort soll es zügig weg.
     Die Klasse setzt das Skript im Fuss, unmittelbar bevor es 500ms wartet. */
  .site-header.kompakt .nav-collapse.faehrt-aus {
    transition:
      opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 0.5s;
  }

  .site-header.kompakt .nav-collapse .main-nav a,
  .site-header.kompakt .nav-collapse .btn-login,
  .site-header.kompakt .nav-collapse .btn-login span {
    font-size: 14px;
    line-height: 20px;
  }

  .site-header.kompakt .main-nav {
    position: static;
    transform: none;
    flex-direction: column;
    /* ⛔ 24px Lücke plus 20px Text ergab 44px Rhythmus, aber nur 20px zum
       Antippen. Die Lücke ist jetzt kleiner und dafür in die Punkte selbst
       gewandert — der sichtbare Abstand bleibt gleich, die Fläche wächst.
       (Karsten, 23.08.2026: „dass es besser ist zum Antippen") */
    gap: 10px;
    height: auto;
    padding: 0;
    /* 🔴 DER KASTEN IM KASTEN (Karsten, 06.09.2026, mit Bild): „Wenn ich ins
       Burger-Menü gehe, ist auf einmal ein Hintergrund, noch mal ein Viereck
       zu sehen, das auch noch abgerundet ist."
       ⛔ URSACHE: `.main-nav` ist am Rechner die Pille — Rand, Rundung,
       Hintergrund UND Schatten. Hier wurden nur Rand und Hintergrund
       zurückgenommen; `border-radius: 30px` und der Schlagschatten blieben
       stehen und zeichneten im offenen Menü einen zweiten, gerundeten Kasten
       um die Punkte. „Abmelden" stand außerhalb, weil der Knopf nicht zur
       `.main-nav` gehört — daher der Eindruck zweier Kästen.
       ⚠ Der Schatten kam am 02.09.2026 mit dem Glas-Aussehen dazu; seitdem
       war der Fehler drin. Wer hier etwas an der Pille ergänzt, muss es AUCH
       hier abräumen. */
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .site-header.kompakt .main-nav a {
    top: 0;
    width: 100%;
    min-width: 0;
    /* 20px Text + 2 × 7px = 34px hohe Tippfläche, deutlich über den 24px,
       die als Untergrenze gelten. */
    padding: 7px 0;
    min-height: 34px;
    box-sizing: border-box;
    line-height: 20px;
    text-align: left;
    white-space: normal;
  }

  .site-header.kompakt .btn-login {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 0;
  }
  .site-header.kompakt .btn-login span { width: auto; min-width: 0; text-align: center; }

  

@media (max-width: 720px) {


  /* Weichzeichner blendet mobil auch nach oben weich aus

     ⚠ Der lange Auslauf von oben gilt hier genauso (02.09.2026) — Karstens
     Vorbild war ein Handy-Bildschirm. Nach OBEN bleibt es kurz: dort steht die
     Statusleiste des Telefons dicht am Rand, ein langer Verlauf wuerde sie
     unsauber anschneiden. Nach UNTEN laeuft es ueber 82px aus statt ueber 24px.
     Voll deckend bis 58px — so weit reicht das Menuezeichen (40px hoch, mittig
     in 85px). */
  .site-header::before {
    inset: 0 0 auto 0;
    height: 140px;
    -webkit-mask-image: linear-gradient(to bottom,
              transparent 0,
              rgba(0,0,0,0.18) 4px,
              rgba(0,0,0,0.55) 11px,
              #000 20px,
              #000 58px,
              rgba(0,0,0,0.94) 70px,
              rgba(0,0,0,0.78) 83px,
              rgba(0,0,0,0.58) 95px,
              rgba(0,0,0,0.35) 107px,
              rgba(0,0,0,0.16) 120px,
              rgba(0,0,0,0.04) 130px,
              transparent 140px);
            mask-image: linear-gradient(to bottom,
              transparent 0,
              rgba(0,0,0,0.18) 4px,
              rgba(0,0,0,0.55) 11px,
              #000 20px,
              #000 58px,
              rgba(0,0,0,0.94) 70px,
              rgba(0,0,0,0.78) 83px,
              rgba(0,0,0,0.58) 95px,
              rgba(0,0,0,0.35) 107px,
              rgba(0,0,0,0.16) 120px,
              rgba(0,0,0,0.04) 130px,
              transparent 140px);
  }

  /* ⛔ 300px auch auf dem Handy — Seitenstandard (Karsten, 19.08.2026).
     Vorher standen hier 60px, deshalb war der Abstand mobil viel zu klein. */
  .lp-inhalt { padding: 115px 20px 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.kompakt .nav-collapse,
  .site-header.kompakt .nav-collapse.open {
    transform: none;
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}


/* =========================================================
   ABSCHNITTE DER STARTSEITE
   Maße und Schriftgrößen im leano-Raster: Text Arial 14/27,
   Hilfstext 12/25, Überschriften Assistant SemiBold.
   ⛔ Keine Einblendungen beim Scrollen, keine hochlaufenden
      Balken — Animationen nur auf Ansage.
   ========================================================= */

.lp-start { display: block; }

/* ⚠ ABSTÄNDE SIND HIER INHALT, NICHT GESCHMACK (Karsten, 18.08.2026 — er hat sie
   einzeln durchgesprochen): „das ist alles zu dicht", „da muss mehr Platz rein",
   „100 Pixel oben und 100 Pixel drunter". Ein Abschnitt hat oben und unten
   120px, zwischen zwei Abschnitten liegen damit 240px. Wer hier kürzt, macht
   genau das rückgängig, was er bemängelt hat. */
.lp-abschnitt { padding: var(--luft) 0; }
.lp-abschnitt--grau { background: var(--bg-grey); }
/* Die Vertrauensleiste steht für sich — innen mehr Luft (Karsten 18.08.2026). */
.lp-abschnitt.lp-vertrauen { padding: 70px 0; }   /* dreimal flacher gemacht: 150 -> 130 -> 100 -> 70, Karsten 18.08.2026 */

/* Der Abstand einer Überschrift zu dem, was darunter kommt, ist genauso groß
   wie ihr Abstand zum Abschnitt darüber — an mehreren Stellen ausdrücklich so
   gewünscht. */
/* Ueberschrift -> Inhalt: genau so viel wie Ueberschrift -> Abschnittsrand. */
.lp-abschnitt h2.lp-mitte { margin-bottom: var(--luft); }
/* Steht ein Untertitel dazwischen, zaehlt der Abstand ab dem Untertitel. */
.lp-abschnitt h2.lp-mitte + .lp-vorspann {
  margin-top: calc(var(--luft) * -1 + 20px);   /* dicht unter die Ueberschrift */
  margin-bottom: var(--luft);                  /* und von dort die volle Luft */
}
.lp-bildraster { margin: 0; }

/* Knöpfe im Abschnitt: 100px Luft nach oben.
   ⛔ AUSSER IM KOPFBEREICH. Karsten am 18.08.2026: „den Abstand vom Button zum
   Text hast du geändert — das sollte nicht geändert werden." Dort gilt weiter
   der ursprüngliche Wert aus §5p (30px oben / 34px unten). */
/* Oben 200px — und nach UNTEN genauso viel bis zum naechsten (grauen) Abschnitt.
   Karsten am 18.08.2026: "der Abstand nach unten zu dem grauen Rand muss genauso
   weit sein wie der Abstand zum Text oben drueber." Der Abschnitt bringt unten
   schon var(--luft) mit, der Rest kommt als Aussenabstand dazu — deshalb die
   Rechnung, sonst stimmt es auf Handy/Tablet nicht mehr (dort ist --luft kleiner). */
.lp-abschnitt { --knopf-luft: 250px; }   /* 200 -> 250px oben UND unten, Karsten 18.08.2026 */
.lp-abschnitt .lp-knopf-reihe { margin: var(--knopf-luft) 0 calc(var(--knopf-luft) - var(--luft)); }
.lp-hero .lp-knopf-reihe { margin: 30px 0 34px; }

/* ⛔ NICHT der Innenabstand der grauen Box war gemeint (Karsten, 18.08.2026:
   „der Abstand von 'Das sagen Teilnehmer' zum grauen Rand oben ist viel zu
   groß, den solltest du gar nicht ändern"), sondern der Abstand des grauen
   Kastens zum Abschnitt DARÜBER — und der nach unten. Deshalb Aussenabstand
   statt Innenabstand. */
.lp-abschnitt--stimmen {
  padding-top: var(--luft);          /* damit oben = unten auch auf schmalen Geräten */
  margin-top: var(--luft);
  margin-bottom: var(--luft);
}

.lp-bahn {
  width: var(--page-width);
  max-width: 100%;
  margin-inline: auto;
  padding: 0 30px;
}

.lp-mitte { text-align: center; }

.lp-abschnitt h2 { font-size: 22px; line-height: 32px; }
.lp-abschnitt h3 { font-size: 18px; line-height: 28px; }
.lp-abschnitt p  { font-size: 14px; line-height: 27px; }

.lp-vorspann { font-size: 14px; line-height: 27px; max-width: 620px; }
.lp-mitte.lp-vorspann { margin-left: auto; margin-right: auto; }

.lp-fussnote { font-size: 12px; line-height: 25px; color: var(--text-grey); margin-top: 30px; }


/* Kopfbereich.
   ⚠ Der Kopf ist fest und 85px hoch — der Inhalt braucht also mindestens so
   viel Luft, sonst liegt die Überschrift darunter. Karsten am 17.08.2026:
   „oben und unten viel mehr Platz, noch mal 30 bis 50 Pixel." Deshalb 195px
   statt 145px oben und 140px statt 100px unten. */
/* 🔴 ZWEI KLASSEN, UND DAS MIT ABSICHT (17.08.2026):
   `.lp-abschnitt` steht in den Media Queries weiter unten und hat dieselbe
   Spezifität — es hat das Hero-Padding jedes Mal wieder auf 60px zurückgesetzt.
   Gemessen: das Siegel lag 25px UNTER der Menüleiste, obwohl hier 205px stand.
   Genau deshalb musste Karsten den Abstand zweimal melden.
   ⛔ Nicht auf eine Klasse zurückbauen. */
.lp-abschnitt.lp-hero { padding: 225px 0 250px; }   /* Band 50px weiter nach oben: 300 -> 250 (Karsten 18.08.2026) */

/* Aufteilung Text / Video — dritter und letzter Stand (Karsten, 17.08.2026):
   erst 50:50, dann zwei Drittel fürs Video, dann zurück auf 50:50, dann:
   „das Video muss tatsächlich mehr Platz einnehmen … 60 Prozent der Breite
   ungefähr." Also 40:60. Die Zwischenschritte stehen hier, damit niemand einen
   davon für den aktuellen Stand hält. */
.lp-hero__raster {
  display: grid;
  /* ⚠ NICHT `40% 60%` schreiben: der 60px-Abstand kommt oben drauf, zusammen
     also 100 % + 60px — das Video lief rechts aus der Seite heraus.
     `2fr 3fr` teilt den Platz NACH Abzug des Abstands, ergibt dieselben 40:60.
     `minmax(0, …)` verhindert, dass ein breites Bild die Spalte aufdrückt. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 60px;
  align-items: center;
}

/* Das kleine Siegel über der Überschrift, wie im Bestand */
.lp-hero__siegel { margin-bottom: 14px; }
.lp-hero__siegel img { width: 55px; height: auto; }

/* ⛔ HIER STAND DER leano-FARBVERLAUF (.hero-title mit background-clip:text,
   #333 → #999, Zeilen 26px/23px). Karsten hat ihn am 17.08.2026 gesehen und
   ausdrücklich zurückgenommen: „das hätte ich gerne wieder rückgängig, das fand
   ich vorher schöner." → Einfarbige Überschrift, beide Zeilen gleich groß.
   NICHT wieder einbauen. */
.lp-hero h1 {
  font-size: 26px;
  line-height: 39px;
  margin-bottom: 20px;
}

.lp-hero .lp-vorspann { margin-bottom: 0; }
.lp-hero__video .lp-video { border: 1px solid var(--light-grey); border-radius: var(--radius); }

/* ---------- Signet im Vorschaubild (Karsten, 23.08.2026) ----------
   Statt des eingebrannten Logos baut sich das Signet auf und bleibt stehen.
   ⛔ `pointer-events: none` — der ganze Kasten muss anklickbar bleiben, das
   Signet darf keine Klicks abfangen. Masse und Lage sind am Originalbild
   abgemessen: Mitte bei 64 % der Breite, 43 % der Höhe, Durchmesser 28 %. */
.lp-video--signet { position: relative; }
.lp-video__signet {
  position: absolute;
  left: 64%;
  top: 43%;
  width: 28%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.lp-video__signet svg { display: block; width: 100%; height: auto; }

/* Der Schriftzug unter dem Signet — der ORIGINALE aus der Logodatei.
   ⛔ Grössenverhältnis wie im Original-Logo (Karsten, 23.08.2026: „das
   Verhältnis von dem Kreis zur Schrift muss stimmen"): Der Schriftzug ist
   1,276 mal so breit wie der Signetkreis, der Abstand darunter beträgt 0,100
   Kreisdurchmesser. Das Signet ist 28 % der Bildbreite breit, der Kreis füllt
   es ganz aus (viewBox 1095 × 1095).
   → Schriftbreite 35,7 % der Bildbreite, Abstand 2,8 %.
   Er erscheint, sobald der Kreis geschlossen ist, und blendet in zwei Sekunden
   ein. */
.lp-video__marke {
  position: absolute;
  left: 64%;                    /* dieselbe Mitte wie das Signet */
  /* ⚠ Karsten, 23.08.2026: „fünf Pixel noch mal weiter nach unten" und
     „15 % kleiner". Der Kasten ist bei 1280 px Fensterbreite 394 px hoch —
     5 px sind dort 1,3 % der Höhe. Aus 35,7 % Breite werden mit 15 % weniger
     30,3 %. Das Verhältnis aus dem Original-Logo (1,276 × Kreis) ist damit
     bewusst verlassen. */
  top: 69.9%;
  width: 30.3%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
}
.lp-video__marke.ist-da { opacity: 1; transition: opacity 2s ease; }

/* ===================================================================
   DAS UNTERE VIDEO AUF DER STARTSEITE — ruhendes Signet, das sich dreht
   ⛔ Alle Masse stammen aus dem alten Vorschaubild von Bunny (1920 × 1080),
   damit es genauso gross bleibt wie vorher — nur eben lebendig:
     Kreis aussen 22,40 % der Kastenbreite  → SVG-Breite 24,45 %
       (der Kreis füllt das SVG nur zu 91,6 %: r 493 plus Strich 17 von 1095)
     Abstand Kreis bis Schriftzug 44 px bei 430 px Kreis → 5,17 % der SVG-Breite
       unterhalb des SVG-Kastens
   ⛔ Die Breite des Schriftzugs ist NICHT die des alten Bildes (28,54 %),
   sondern 109,8 % der SVG-Breite. Nur so ist seine Strichdicke genau die des
   Signets (Karsten: „mit der gleichen Dicke") — im alten Bild war er 10 %
   dünner als der Kreis.
   ⛔ Mitte auf 50 % / 50 %: genau auf dem Abspielknopf. =================== */
.lp-video__ruhe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24.45%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.lp-video__ruhe svg { display: block; width: 100%; height: auto; }
/* Der Abspielknopf BEIDER Signet-Videos: 25 % kleiner und in die untere Ecke
   statt in die Mitte — unten links beim Schleifenvideo, oben rechts beim
   Kopfvideo (Karsten, 23.08.2026: „genau so wie unten, bloss rechts unten").
   Das Elternthema setzt ihn auf 74 px in die Mitte; hier wird beides
   überschrieben.
     74 px − 25 %  = 55,5 px      Pfeil 26 × 30 → 19,5 × 22,5
     56 px − 25 %  = 42 px        (unter 600 px Fensterbreite)
   ⚠ `top: auto` ist Pflicht, sonst zieht das `top: 50 %` des Elternthemas den
   Knopf weiter nach unten aus dem Kasten heraus — dasselbe gilt für `left`.
   ⛔ Das `transform` des Elternthemas muss weg. Es vergrössert den Knopf beim
   Überfahren mit `translate(-50%,-50%) scale(1.08)` — das `translate` schob ihn
   zurück in die Mitte. Und weil die Regel des Elternthemas genau gleich stark
   ist wie eine mit `.lp-video--signet`, gewann sie; deshalb steht die Klasse in
   der Hover-Regel DOPPELT (`.lp-video.lp-video--signet`): eine Stufe stärker.

   ⛔ VERGRÖSSERN BEIM ÜBERFAHREN — aber NICHT mit `scale` (Karsten,
   23.08.2026: „wenn er grösser wird, soll er nicht näher an die Kanten
   rankommen"). `scale` wächst um die Mitte, der Knopf käme also der Ecke näher.
   Stattdessen wächst die Grösse selbst: Weil er über `right`/`bottom` bzw.
   `left`/`bottom` verankert ist, wachsen die verankerten Kanten nicht mit — er
   dehnt sich von allein nach innen aus, und die 15 px zum Rand bleiben stehen.
     55,5 px + 30 % = 72,15 px      Pfeil 19,5 × 22,5 → 25,35 × 29,25
     42 px   + 30 % = 54,6 px       (unter 600 px Fensterbreite) */
.lp-video--signet .lp-video__knopf {
  top: auto;
  bottom: 15px;
  transform: none;
  width: 55.5px;
  height: 55.5px;
}
.lp-video--signet .lp-video__knopf svg { width: 19.5px; height: 22.5px; margin-left: 3.75px; }

.lp-video--signet .lp-video__knopf,
.lp-video--signet .lp-video__knopf svg {
  transition: width .18s ease, height .18s ease, margin-left .18s ease;
}
.lp-video.lp-video--signet:hover .lp-video__knopf,
.lp-video.lp-video--signet:focus .lp-video__knopf,
.lp-video.lp-video--signet:focus-within .lp-video__knopf {
  transform: none;
  width: 72.15px;
  height: 72.15px;
}
.lp-video.lp-video--signet:hover .lp-video__knopf svg,
.lp-video.lp-video--signet:focus .lp-video__knopf svg,
.lp-video.lp-video--signet:focus-within .lp-video__knopf svg {
  width: 25.35px;
  height: 29.25px;
  margin-left: 4.9px;
}
@media (prefers-reduced-motion: reduce) {
  .lp-video--signet .lp-video__knopf,
  .lp-video--signet .lp-video__knopf svg { transition: none; }
}

.lp-video--ruhe .lp-video__knopf { left: 15px; right: auto; }                    /* unteres Video */
.lp-video--signet:not(.lp-video--ruhe) .lp-video__knopf { left: auto; right: 15px; }  /* Kopfvideo */

@media (max-width: 600px) {
  .lp-video--signet .lp-video__knopf { width: 42px; height: 42px; }
  .lp-video--signet .lp-video__knopf svg { width: 15px; height: 17.25px; margin-left: 3px; }
  .lp-video.lp-video--signet:hover .lp-video__knopf,
  .lp-video.lp-video--signet:focus .lp-video__knopf,
  .lp-video.lp-video--signet:focus-within .lp-video__knopf { width: 54.6px; height: 54.6px; }
  .lp-video.lp-video--signet:hover .lp-video__knopf svg,
  .lp-video.lp-video--signet:focus .lp-video__knopf svg,
  .lp-video.lp-video--signet:focus-within .lp-video__knopf svg {
    width: 19.5px; height: 22.4px; margin-left: 3.9px;
  }
}

/* ===================================================================
   DAS POPUP-FENSTER DES VIDEOS — kleiner und heller (Karsten, 23.08.2026:
   „das Popup-Fenster 15 % kleiner … und die Verdunkelung um ein paar
   Grade transparenter").
   ⛔ Beides steht im ELTERNTHEMA (`maya-reloaded/functions.php`), dort nicht
   ändern. Und wie beim Abspielknopf (§157) reicht eine gleich starke Regel
   nicht — die Klasse steht deshalb doppelt.
     Rahmen : 1500 px − 15 % = 1275 px, dazu 85 % Breite, damit es auch auf
              breiten Bildschirmen wirklich 30 % kleiner ist und nicht nur
              gedeckelt. 30 % waren zu viel (Karsten, 23.08.2026).
              Unter 700 px Fensterbreite wieder volle Breite,
              sonst wird das Video auf dem Telefon winzig.
     Schleier: rgba(0,0,0,.88) → .72
   =================================================================== */
.lp-leinwand.lp-leinwand { background: rgba(0, 0, 0, .72); }
.lp-leinwand .lp-leinwand__rahmen { width: 85%; max-width: 1275px; }
@media (max-width: 700px) {
  .lp-leinwand .lp-leinwand__rahmen { width: 100%; }
}

.lp-video__ruhe-marke {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 109.8%;
  /* ⚠ Ohne das greift die allgemeine Regel `img { max-width: 100% }` und
     kappt den Schriftzug auf die Breite des Signets — nachgemessen. */
  max-width: none;
  height: auto;
  margin-top: 5.17%;
  transform: translateX(-50%);
}

/* 🔴 DER ABSPIELKNOPF WAR BRAUN — UND DAS KAM NICHT VON BUNNY.
   Karsten am 17.08.2026: „ich habe bei Bunny die Farbe für den Player auf grau
   gestellt, sehe aber immer noch den braunen — muss man da erst den Cache
   löschen?" Nein: Bunnys Einstellung gilt für den PLAYER, also erst nach dem
   Klick. Der Knopf auf dem Vorschaubild ist unser eigener und wird im
   Elternthema eingefärbt — je Bibliothek eine Farbe:
       .lp-video[data-lib="727883"] { --lp-knopf: rgba(106,79,63,.9) }   (braun)
   Hier wird er für die neuen Seiten auf Grau gesetzt. Kein Cache-Thema. */
/* ⚠ Die Regel des Elternthemas steht als Inline-CSS WEITER UNTEN im Kopf und
   ist gleich stark (`.lp-video[data-lib="…"]`) — sie würde also gewinnen.
   Deshalb hier über den Elternteil `.lp-start` mitqualifiziert: eine Klasse
   mehr, damit gewinnt diese Regel. Kein !important nötig. */
.lp-start .lp-video,
.lp-start .lp-video[data-lib="727868"],
.lp-start .lp-video[data-lib="727883"],
.lp-start .lp-video[data-lib="727902"],
.lp-inhalt .lp-video,
.lp-inhalt .lp-video[data-lib="727868"],
.lp-inhalt .lp-video[data-lib="727883"],
.lp-inhalt .lp-video[data-lib="727902"] { --lp-knopf: rgba(153, 153, 153, 0.92); }   /* #999999, Karsten 18.08.2026: vorher zu dunkel */


/* =========================================================
   EINBLENDEN BEIM ANKOMMEN (Karsten, 18.08.2026)
   "das Einblendeffekt ist immer 500 Millisekunden" — ein fester Wert fuer die
   ganze Seite, nicht je Stelle einer.
   ⛔ Ohne JavaScript bleibt alles sichtbar: die Deckkraft 0 setzt erst die
   Klasse lp-anim, die das Skript im Kopf setzt. Suchmaschinen und
   Vorleseprogramme sehen den Inhalt immer.
   ========================================================= */
/* SCHREIBMASCHINE (Karsten, 18.08.2026): „das muss geschrieben werden wie eine
   Schreibmaschine, von links nach rechts, kein Cursor" — je Überschrift 2
   Sekunden, der Untertitel „mit Leitfäden und Vorlagen" 1 Sekunde danach.
   ⛔ NICHT Buchstabe für Buchstabe in den Text schreiben: bei mittig gesetzten
   Überschriften würde jeder neue Buchstabe alles verschieben, und die Zeile
   springt beim Umbruch. Stattdessen steht der ganze Text da und wird von links
   nach rechts freigelegt (clip-path) — in Stufen, eine je Zeichen. Das sieht
   aus wie getippt, die Zeile steht aber vom ersten Moment an fest.
   ⚠ Der Text ist immer im HTML — Suchmaschine und Vorleseprogramm sehen ihn. */
.lp-anim .lp-tippen { display: inline-block; clip-path: inset(0 100% 0 0); }
.lp-tippen.ist-fertig { clip-path: none; }
@media (prefers-reduced-motion: reduce) { .lp-anim .lp-tippen { clip-path: none; } }

.lp-anim [data-blende] { opacity: 0; }
.lp-anim [data-blende].lp-da { opacity: 1; transition: opacity 500ms ease; }
/* ⚠ Kurz auf 1000ms gestreckt und am selben Tag wieder zurueckgenommen
   (Karsten: „die Animationen wieder gleich schnell machen wie vorher").
   Es gilt also wieder der Seitenstandard von 500ms — deshalb steht hier keine
   Sonderregel mehr. */
/* ⚠ ZURUECKGEDREHT am 18.08.2026: Die Bilder hatten eine Sekunde Einblendung,
   Karsten fand das zu langsam — „doppelt so schnell, genau so wie die Texte."
   Sie laufen jetzt wieder mit den 500ms der ganzen Seite; nur der Versatz von
   einer Sekunde zwischen den Bildern bleibt (Stueck fuer Stueck). */
@media (prefers-reduced-motion: reduce) {
  .lp-anim [data-blende] { opacity: 1; transition: none; }
}


/* =========================================================
   WOERTERBUCH-BROWSER (Seite 728) — drei Spalten wie in Karstens Vorlage
   Links Buchstaben, Mitte Begriffe, rechts der Inhalt. Weisser Grund, unsere
   Schriften. Auf dem Handy stapeln sich die drei Bereiche.
   ========================================================= */
/* ⚠ Beschriftung nur fuer Vorleseprogramme — sichtbar waere sie doppelt, weil
   im Feld schon „Suchen" steht. WordPress bringt diese Klasse NICHT mit, wenn
   das Theme sie nicht definiert; ohne diese Regel stand „Im Woerterbuch suchen"
   sichtbar ueber dem Feld (am 18.08.2026 im Screenshot gesehen). */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.lp-wbb__vorspann { font-size: 14px; line-height: 27px; color: var(--text-grey); margin-bottom: 30px; }

/* ⛔ 46px Luft zwischen Untertitel und der ersten Linie (Karsten, 24.08.2026):
   „Der Abstand vom Suchfeld zu diesem Text … den finde ich bei Downloads viel
   besser. Beim Woerterbuch muss das genauso sein."
   Gemessen vorher: Woerterbuch **0 px**, Downloads **46 px** — der Untertitel
   klebte hier direkt auf der Linie.
   ⚠ Bewusst am Suchblock und nicht am Kopf: so bleibt der Knopf
   „Woerterbuch herunterladen" rechts genau dort, wo er ist. */
.lp-wbb__suche { position: relative; border-top: 1px solid var(--light-grey); border-bottom: 1px solid var(--light-grey); padding: 14px 0; margin: 46px 0 0; }
.lp-wbb__suche input {
  width: 100%; height: 40px; border: 0; padding: 0 90px 0 4px;
  font-family: var(--font-body); font-size: 15px; background: transparent;
}
.lp-wbb__suche input:focus { outline: none; }

/* 🔴 FÜNFTE UND PRÄZISE FASSUNG (Karsten, 18.08.2026, drittes Mal erklärt):
     · Buchstaben: FESTE Höhe „bis Z" — nie mehr, nie scrollbar.
     · Begriffe: dieselbe FESTE Höhe „bis Z" — aber scrollbar, wenn die
       Wortliste länger ist.
     · Inhalt: darf sich beliebig erweitern, ist NIE scrollbar.
     · Die Trennlinien müssen dabei immer so lang sein wie der Inhalt.

   ⚠ Das erste Mal hatte ich Begriffe auf „streckt sich mit" gebaut — dann
   wäre die Begriffe-Spalte bei langem Inhalt plötzlich viel höher als „bis Z"
   und hätte NICHT mehr scrollen müssen. Falsch. Die Lösung ist eine Trennung
   zwischen AUSSEN (traegt nur die Rahmenlinie, streckt sich per Grid auf die
   Zeilenhöhe — damit läuft die Linie bis zum Inhalt durch) und INNEN (die
   eigentliche Liste, FEST auf `--wbb-hoehe` begrenzt, scrollt dort für sich
   und wächst nie mit). Buchstaben bekommt dieselbe Aufteilung, rein damit auch
   dort die Linie mitwächst — die Buchstaben selbst brauchen nie einen
   Scrollbalken, weil `--wbb-hoehe` ja genau von ihnen gemessen wird. */
.lp-wbb__raster {
  --wbb-hoehe: 620px;
  display: grid;
  grid-template-columns: 64px 260px 1fr;
  grid-auto-rows: minmax(var(--wbb-hoehe), auto);
  align-items: stretch;
}

/* 🔴 NUR DIE LINIE NEBEN DEM INHALT WÄCHST MIT (Karsten, 18.08.2026, vierte
   Erklärung): „Es geht nur um die Linie rechts, genau neben den Inhalten.
   Nicht die Linie zwischen Buchstaben und Wörtern — die bleibt immer fest bis
   zum letzten Buchstaben, mehr nicht."
   Also: Buchstaben (AUSSEN) bekommt eine FESTE Höhe = --wbb-hoehe, genau wie
   ihr eigenes Inneres — ihre Linie endet also immer exakt dort, auch wenn die
   Zeile durch einen langen Inhalt viel höher wird. NUR Begriffe (AUSSEN)
   bleibt ohne eigene Höhe und streckt sich per Grid mit — ihre Linie ist die,
   die „genau neben den Inhalten" liegt. */
.lp-wbb__buchstaben { border-right: 1px solid var(--light-grey); height: var(--wbb-hoehe); }
.lp-wbb__begriffe   { border-right: 1px solid var(--light-grey); }

/* INNEN: die tatsächliche Liste, fest auf --wbb-hoehe, box-sizing:border-box
   haelt Padding und Hoehe konsistent (sonst waere die Box wenige Pixel zu
   niedrig fuer ihr eigenes Padding). */
.lp-wbb__buchstaben-liste {
  display: flex; flex-direction: column; align-items: center;
  box-sizing: border-box;
  height: var(--wbb-hoehe);
  padding: 20px 0;
  overflow: hidden;   /* nie noetig — --wbb-hoehe ist ja exakt von dieser Liste gemessen */
}
/* ⚠ `min-width: 24px` + `text-align: center` wegen des Seitenchecks
   (19.08.2026): Ein einzelner Buchstabe ist nur 5–12px breit — als Klickziel
   auf dem Handy zu klein (Richtwert 24px). Die Spalte ist 63px breit und die
   Liste zentriert ihre Kinder, der Buchstabe steht dadurch weiterhin exakt an
   derselben Stelle; nachgemessen: Mitte bleibt bei x=51,5. Sichtbar aendert
   sich nichts, nur die Flaeche, die auf den Klick reagiert. */
.lp-wbb__buchstaben-liste button {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  min-width: 24px;
  font-family: var(--font-heading); font-size: 18px; line-height: 26px;
  color: var(--text-grey); text-align: center;
}
.lp-wbb__buchstaben-liste button:hover { color: var(--black); }
.lp-wbb__buchstaben-liste button.ist-da { color: var(--black); font-weight: 600; }

.lp-wbb__begriffe-scroll {
  box-sizing: border-box;
  height: var(--wbb-hoehe);
  padding: 20px 20px 20px 18px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.lp-wbb__kopfzeile { font-size: 12px; line-height: 20px; color: var(--text-grey); margin-bottom: 14px; }
.lp-wbb__gruppentitel { font-size: 13px; line-height: 20px; color: var(--text-grey); margin: 18px 0 6px; }
.lp-wbb__begriffe-scroll ul { list-style: none; margin: 0; padding: 0; }
.lp-wbb__begriffe-scroll li a {
  display: block; padding: 6px 0; font-size: 16px; line-height: 24px;
  color: var(--text-grey); text-decoration: none;
}
.lp-wbb__begriffe-scroll li a:hover { color: var(--black); }
.lp-wbb__begriffe-scroll li a.ist-da { color: var(--black); font-weight: 600; }
.lp-wbb__leer { font-size: 14px; color: var(--text-grey); }

/* 🔴 DER INHALT SCROLLT NICHT — NIE (Karsten, 18.08.2026, unmissverstaendlich
   nach dem dritten Anlauf): er zeigt sich immer vollstaendig, auch wenn er
   dadurch hoeher wird als das Alphabet. Kein `height`, kein `overflow-y`,
   kein `scrollbar-gutter` — nur Platz drumherum. Wird er hoeher, wird die
   ganze Zeile (`grid-auto-rows: minmax(...)` oben) und mit ihr die Seite
   hoeher; Buchstaben und Begriffe strecken sich mit (siehe dort). */
.lp-wbb__inhalt {
  padding: 20px 30px 20px 40px;
}
.lp-wbb__inhalt img { max-width: 100%; height: auto; }
.lp-wbb__hinweis { font-size: 14px; color: var(--text-grey); }
.lp-wbb__titel { font-size: 22px; line-height: 32px; margin-bottom: 20px; }
.lp-wbb__titel a { color: var(--black); text-decoration: none; }
.lp-wbb__titel a:hover { text-decoration: underline; }
.lp-wbb__inhalt .lp-textblock p { font-size: 14px; line-height: 27px; }

/* 🔴 BLAU IM BEGRIFFSTEXT WAR ZU HELL (Seitencheck, 19.08.2026)
   In den Begriffstexten steht das Blau als feste Farbe im Text selbst
   (`style="color: #507dbf"`, aus der alten Fassung übernommen). Auf Weiss
   ergibt das 4,18:1 — gefordert sind 4,5:1, es traf auf der 5S-Seite drei
   Textstellen („Vorteile:" und die Aufzählung darunter).
   ⛔ ES BLEIBT DASSELBE BLAU, nur der Ton, den dieses Theme seit jeher für
   GESCHRIEBENE Wörter benutzt: --office-blue-text #3C6BA8 (5,44:1). Genau
   diese Trennung steht oben bei den Farbwerten — Flächen behalten #507DBF,
   Wörter nehmen den dunkleren Ton. Rot (#DA0202, 5,26:1) und Violett
   (#7030A0, 8,02:1) sind in Ordnung und bleiben unangetastet.
   ⚠ `!important` ist hier nötig: Die Farbe steht direkt am Element, ein
   normales Stylesheet käme nicht dagegen an.
   ⚠ Gilt für beide Ansichten — Begriffsseite und rechte Spalte im Browser,
   beide benutzen `.lp-textblock`. */
.lp-textblock [style*="#507dbf"],
.lp-textblock [style*="#507DBF"] { color: var(--office-blue-text) !important; }

/* ⚠ KLICKZIELE „Weitere Begriffe" (Seitencheck, 19.08.2026): Die Links waren
   16px hoch — auf dem Handy zu wenig zum Treffen (Richtwert 24px). 4px Luft
   oben und unten machen 24px daraus. Sichtbar wird die Liste dadurch etwas
   luftiger; die Schrift bleibt unveraendert.
   ⛔ Das Kopfmenue bleibt unangetastet, obwohl es dieselbe Meldung ausloest —
   Kopf, Menue und Fusszeile sind von Karsten abgenommen und gesperrt (§17). */
/* 🔴 Seit 07.09.2026 sind es Knöpfe (Karsten, siehe `lp_wb_weitere()`): die
   Begriffe stehen nebeneinander und brechen um, darunter eine freie Zeile, dann
   der Knopf „Alle N Begriffe im Wörterbuch". Das Klickziel von oben erledigt
   sich damit von selbst — ein `.btn-ghost` ist 35px hoch. */
.lp-wb-weitere__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* 🔴 MITTIG (Karsten, 07.09.2026): „die weiteren Begriffe genauso wie die 213
     Begriffe im Wörterbuch würde ich auch alles mittig machen."
     ⛔ Gemeint sind die KNÖPFE. Die Überschrift „Weitere Begriffe" bleibt
     linksbündig (Karsten am selben Tag, nachdem ich sie mitzentriert hatte). */
  justify-content: center;
  gap: 10px;
}
.lp-wb-weitere__liste li { margin: 0; }
/* 🔴 30px MEHR LUFT NACH OBEN (Karsten, 07.09.2026): „dieser ganze Block
   weitere Begriffe, der muss noch mal 30 Pixel mehr Abstand haben von diesem
   Button oben" — gemeint ist der Absenden-Knopf des Meinungsformulars.
   Vorher 40px, jetzt 70px.
   ⛔ Der Abstand steht am Block, nicht mehr an der Überschrift: Der
   h2-Aussenabstand schlug durch den Block hindurch (zusammenfallende
   Aussenabstände) — zwei Werte an zwei Stellen für einen Abstand. */
.lp-wb-weitere { margin-top: 70px; }
/* ⛔ DIE ÜBERSCHRIFT BLEIBT LINKSBÜNDIG (Karsten, 07.09.2026: „Überschrift
   weitere Begriffe, die bitte linksbündig halten."). Ich hatte sie beim
   Zentrieren der Knöpfe ungefragt mitgenommen — nicht bestellt, wieder raus.
   Mittig stehen nur die Knöpfe darunter. */
.lp-wb-weitere h2 { margin-top: 0; }
/* Die freie Zeile zwischen den Begriffen und dem Knopf darunter. */
.lp-wb-weitere__alle { margin-top: 40px; text-align: center; }
/* 🔴 „Den Abstand zwischen ‚alle 213 Begriffe im Wörterbuch‘ zu ‚oder lade dir
   das komplette Lean Wörterbuch runter‘ würde ich auch etwas grösser machen."
   (Karsten, 07.09.2026) */
.lp-wb-weitere + .lp-mitte { margin-top: 70px; }
.lp-wbb__inhalt .lp-bild { margin: 20px 0; border-radius: var(--radius); overflow: hidden; }
.lp-wbb__laedt { font-size: 13px; color: var(--text-grey); }


/* =========================================================
   MEINUNGSFORMULAR — im Stil von leanos Kontaktformular
   (1:1 aus `Leano/Webseite/css/kontakt.css`: Unterstrich-Felder, versteckte
   Labels, Pfeil-Knopf, der zu Warnzeichen/Haken morpht — Karsten, 18.08.2026:
   „das sollte in dem gleichen Stil sein wie bei leano die Kontaktanfrage.")
   ⚠ ANDERS ALS BEI LEANO: kein festes Figma-Raster mit absoluten Positionen —
   das Formular sitzt eingebettet in einer fliessenden Textspalte (dem
   Woerterbuch-Inhalt), nicht auf einer eigenen Seite. Normaler Fluss statt
   Pixel-Positionen; Farben/Schriften aus unseren eigenen Tokens statt leanos
   Orange. Skript dazu in huelle-fuss.php.
   ========================================================= */
.lp-mf { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--light-grey); }
.lp-mf h2 { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 28px; margin-bottom: 12px; }
.lp-mf__sub { font-size: 14px; line-height: 25px; color: var(--text-grey); margin-bottom: 26px; }
.lp-mf__danke { font-size: 14px; color: var(--office-blue-text); margin-bottom: 20px; }
.lp-mf__fehler { font-size: 14px; color: #DA0202; margin-bottom: 20px; }

.lp-mf__feld { margin-bottom: 26px; }
.lp-mf__feld input,
.lp-mf__feld textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--dark-grey);
  border-radius: 0;      /* ueberschreibt die site-weite Pillenform der Formularfelder */
  background: transparent;
  height: auto;
  padding: 0 0 8px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--black);
}
.lp-mf__feld textarea { min-height: 90px; resize: vertical; padding-top: 4px; }
.lp-mf__feld input::placeholder,
.lp-mf__feld textarea::placeholder { color: var(--dark-grey); opacity: 1; }
.lp-mf__feld input:focus,
.lp-mf__feld textarea:focus { outline: none; border-bottom-color: var(--black); }

.lp-mf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-mf__aktion { display: flex; align-items: center; justify-content: flex-end; margin-top: 10px; }

/* Knopf: btn-ghost-Grundform (siehe Kopfmenue), zusaetzlich die drei morphenden Symbole. */
.lp-mf-send { cursor: pointer; font-family: inherit; }
.lp-mf-send-icon { position: relative; width: 14px; height: 14px; flex: none; margin-right: 5px; transition: margin-right 500ms ease; }
.lp-mf-send-icon .ic { position: absolute; inset: 0; width: 14px; height: 14px; opacity: 0; transform: scale(0.55); transition: opacity 500ms ease, transform 500ms ease; }
.lp-mf-send-icon .ic-pfeil { opacity: 1; transform: translate3d(0, 0, 0); }
.lp-mf-send.ist-fehler .ic-pfeil,
.lp-mf-send.ist-erfolg .ic-pfeil { opacity: 0; transform: scale(0.55); }
.lp-mf-send.ist-fehler .ic-warn  { opacity: 1; transform: translateX(3px); }
.lp-mf-send.ist-erfolg .ic-haken { opacity: 1; transform: translateX(5px); }
.lp-mf-send.ist-fehler .lp-mf-send-icon { margin-right: -2px; }
.lp-mf-send.ist-erfolg .lp-mf-send-icon { margin-right: 7px; }
.lp-mf-send .lp-mf-send-text { white-space: nowrap; overflow: hidden; box-sizing: border-box; text-align: center; flex: none; }
.lp-mf-send .lp-mf-send-text-inner { display: inline-block; white-space: nowrap; }
.lp-mf-send:not(.ist-fehler):not(.ist-erfolg):hover .ic-pfeil { transform: translate3d(5px, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  .lp-mf-send-icon,
  .lp-mf-send .ic,
  .lp-mf-send-text,
  .lp-mf-send-text-inner { transition: none !important; }
}

/* ⚠ 18.08.2026, Karsten, auf dem Handy gesehen: „warum ist der Absenden-Knopf
   beim Meinungsformular auf der Mobilversion so lang gezogen? Muss nicht
   sein, kann genauso sein wie auf der Desktopversion." Zu Recht — hier stand
   eine Vollbreite-Regel, die niemand wollte. Ersatzlos gestrichen, der Knopf
   bleibt jetzt auf jeder Breite so gross wie sein Text. */


/* Handy und Tablet: gestapelt, Buchstaben als waagerechte Reihe */
/* Abstand zur Fusszeile — Karsten, 18.08.2026: „mindestens 200, eher 300 Pixel." */
.lp-wbb { margin-bottom: 300px; }
@media (max-width: 1023px) { .lp-wbb { margin-bottom: 200px; } }

@media (max-width: 1023px) {
  /* Gestapelt: jeder Bereich ist eine eigene Zeile, die Alphabet-Kopplung
     (grid-auto-rows/minmax) gilt nur am Schreibtisch bei drei Spalten
     nebeneinander — hier deshalb wieder auf `auto` zurueckgesetzt. Aussen/
     Innen-Trennung wird ebenfalls nicht gebraucht (keine gemeinsame Zeile,
     also keine durchlaufende Linie noetig) — Rahmen und Hoehenbegrenzung
     wandern deshalb hier auf die INNEREN Elemente. */
  .lp-wbb__raster { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .lp-wbb__buchstaben,
  .lp-wbb__begriffe { border-right: 0; height: auto; }   /* die feste Aussen-Hoehe vom Schreibtisch gilt hier nicht */

  .lp-wbb__buchstaben-liste {
    height: auto;
    flex-direction: row; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--light-grey); padding: 14px 0;
  }
  .lp-wbb__buchstaben-liste button { min-width: 34px; min-height: 34px; text-align: center; }
  .lp-wbb__begriffe-scroll { border-bottom: 1px solid var(--light-grey); padding: 16px 0; height: 340px; }
  .lp-wbb__inhalt { padding: 20px 0; }
}


/* =========================================================
   WOERTERBUCH-LINKS im Fliesstext (§25)
   Dezent: gepunktete Unterlinie statt voller Unterstreichung — der Text bleibt
   lesbar, der Hinweis ist trotzdem da. Farbe erst beim Ueberfahren.
   ⚠ Nicht die Textfarbe aendern: sonst sieht ein Absatz mit vier Begriffen aus
   wie ein Flickenteppich.
   ========================================================= */
.lp-wb-link {
  color: inherit;
  text-decoration: underline dotted var(--office-blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lp-wb-link:hover { color: var(--office-blue-text); text-decoration: underline solid var(--office-blue); }


/* Vertrauensleiste — drei Punkte: Nutzerzahl, LinkedIn, ZFU (Karsten 18.08.2026) */
.lp-vertrauen__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  align-items: center;
  text-align: center;
}
.lp-vertrauen__punkt { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp-vertrauen p { font-size: 13px; line-height: 22px; }
.lp-zahl__klein { font-size: 13px; color: var(--black); line-height: 1.2; }   /* gleiche Farbe wie die uebrigen Texte im Banner */
.lp-zahl__gross {
  font-family: var(--font-heading);
  font-weight: 400;              /* Karsten 18.08.2026: „die Schrift ist viel zu fett" */
  font-size: 28px;               /* 30 % kleiner als die 40px, Karsten 18.08.2026 */
  line-height: 1.1;
  font-variant-numeric: tabular-nums;   /* die Ziffern springen beim Hochzaehlen nicht */
}
.lp-vertrauen__punkt .lp-zahl__klein + .lp-zahl__gross { margin-top: -4px; }
/* 🔴 DIE KLASSE LANDET AUF <picture>, NICHT AUF <img> (gefunden 18.08.2026).
   Das WebP-Plugin haengt um jedes Bild ein <picture> und reicht die Klasse an
   dieses weiter. Eine Breite nur auf der Klasse macht deshalb den Rahmen breit,
   waehrend das Bild darin auf seiner eigenen Breite (dem width-Attribut aus
   WordPress) stehen bleibt — es klebt dann links im Rahmen. Genau das hat
   Karsten gesehen: „der muss mittig ueber dem Text sein, das sieht scheisse aus."
   Das Siegel stand 9px = (78-60)/2 links neben der Mitte.
   ⛔ Deshalb IMMER beide ansprechen: den Rahmen und das Bild darin. */
.lp-vertrauen__logo,
.lp-vertrauen__siegel { display: block; margin-inline: auto; }
.lp-vertrauen__logo,
.lp-vertrauen__logo img { width: 109px; height: auto; }
/* Groesse: 60 -> 78 -> 100 -> 80px (Karsten, 18.08.2026).
   ✅ SCHAERFE IST ERLEDIGT: Karsten hat eine hochaufloesende, freigestellte
   Fassung geliefert. Sie liegt als `neu/assets/img/zfu-siegel.png` mit 240px im
   Theme — dreifache Aufloesung fuer 80px Anzeige.
   ⛔ Nicht zum Mediathek-Bild 9442 (ZFUSq, 60px) zurueckwechseln. */
.lp-vertrauen__siegel,
.lp-vertrauen__siegel img { width: 80px; height: auto; }   /* 100 -> 80px, Karsten 18.08.2026 */


/* Bildraster */
.lp-bildraster { display: grid; gap: 24px; margin: 40px 0; }
/* ⚠ Waren vier nebeneinander. Karsten am 17.08.2026: "die Bilder sind
   vollkommen gequetscht". Zwei nebeneinander geben rund 590px. */
.lp-bildraster--vier { grid-template-columns: repeat(2, 1fr); gap: 40px; }
.lp-bildraster .lp-bild { margin: 0; border-radius: var(--radius); overflow: hidden; }


/* Drei Spalten — Karsten 18.08.2026: "etwas enger geschrieben, damit die nicht
   zu dicht aufeinander haengen" -> mehr Abstand zwischen den Spalten, engerer
   Zeilenabstand im Text. */
/* ⛔ align-items:start ist PFLICHT. Ohne das streckt das Raster die Spalten auf
   gleiche Höhe und die dritte rutscht optisch nach unten — genau das, was
   Karsten am 18.08.2026 bemängelt hat („das dritte ist nach unten gerutscht").
   ⚠ Blocksatz, nicht linksbündig (ebenfalls seine Ansage). */
.lp-dreier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* ⚠ 80 -> 60px (Karsten, 18.08.2026: „die Boxen muessen groesser"). Die Bahn
     ist fest 1140px breit — breitere Karten gibt es nur ueber den Abstand
     dazwischen. 60px ist zugleich leanos Wert zwischen seinen Karten.
     ⛔ Die 80px stammten von Karsten selbst, als die Spalten noch OHNE Kasten
     nebeneinander standen (§19-c). Mit Karten ist der Abstand sichtbar.
     Zweiter Schritt am selben Tag: 60 -> 40px, damit die Karten breiter werden
     und der Text mehr Platz bekommt. */
  /* ⚠ Zurück auf 40px am 02.09.2026: Die 14px waren nur nötig, solange die
     Zettelbilder ihren eigenen weissen Rand mitbrachten. Die Glasplatten haben
     keinen. */
  gap: 40px;
  margin-top: var(--luft);
  align-items: stretch;       /* mit Karten: alle drei gleich hoch */
}
/* 🔲 KARTEN WIE BEI LEANO (Karsten, 18.08.2026, mit Screenshot):
   Werte 1:1 aus `Leano/Webseite/css/style.css`, `.req-card`:
   weisser Grund, 15px Rundung, Schatten `0 0 36.4px -7px rgba(0,0,0,.25)`,
   45px Innenabstand.
   ⚠ `align-items: start` ist damit erledigt — es war noetig, solange die Spalten
   ohne Kasten nebeneinander standen (§19-b). Karten sollen gleich hoch sein. */
.lp-dreier__spalte {
  /* 🔷 GLASPLATTE (Karsten, 02.09.2026, nach zwei Vorlagenbildern: Apples
     Mikrofonknopf und eine Tauschmaske auf unscharfem Grund).
     Die Post-it-Zettel davor sind verworfen — komplette Geschichte in §401.
     Sichtbar wird die Platte durch drei Dinge: die ganz leichte Milchigkeit,
     die feine helle Kante und den Schatten darunter.
     ⛔ KEINE FARBE (Karsten ausdrücklich, zweimal): In diesen Regeln steht kein
     einziger Wert, bei dem Rot, Grün und Blau verschieden sind — auch der
     Schatten nicht. Der war zuerst blaugrau (`rgba(45,75,125,…)`), und genau das
     hat Karsten als „da ist noch blau drin" gesehen.
     ⛔ KEIN farbiges Leuchten dahinter. War gebaut, ist verworfen.
     ⚠ `backdrop-filter` bleibt stehen: auf dem weissen Abschnitt hat er nichts
     zu verwischen, aber falls die Platte je auf einem Bild oder einer Farbfläche
     liegt, arbeitet sie sofort richtig. */
  position: relative;
  border-radius: 26px;
  padding: 30px 30px 32px;
  background: linear-gradient(158deg, rgba(249, 249, 249, 0.94) 0%, rgba(253, 253, 253, 0.88) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  outline: 1px solid rgba(0, 0, 0, 0.07);
  outline-offset: -1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 20px 46px -20px rgba(0, 0, 0, 0.30);
}
/* Statt der Zahlen 1. 2. 3. steht auf jeder Platte ein Zeichen: Phosphor in der
   Strichstärke „thin" (Karsten, 02.09.2026: „viel zierlicher"), schwarz-weiss,
   Lizenz MIT. Die Zeichen liegen als SVG direkt in `vorlage-seite-5555.php`,
   damit sie mit der Schriftfarbe mitgehen und nichts nachgeladen wird. */
.lp-dreier__zeichen {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  color: var(--black);
}
/* ⚠ Stärke 400 statt der 600 aus dem Seitenstandard (Karsten, 02.09.2026: „die
   Überschriften sind mir einfach zu fett … schlichter, das ist edler"). Grösse,
   Zeilenhöhe, Abstand und Farbe bleiben, wie sie auf der Seite überall sind. */
.lp-dreier h3 {
  margin-bottom: 24px;
  font-weight: 400;
}
/* Der Text ist wieder wie vor der Post-it-Runde: 14px im Blocksatz (Karsten,
   18.08.2026), keine Handschrift, keine Sonderfarbe. */
.lp-dreier p {
  font-size: 14px;
  line-height: 23px;
  text-align: justify;
  hyphens: auto;              /* sonst reisst der Blocksatz Löcher */
  -webkit-hyphens: auto;
}

/* 🖊 TINTE SCHWARZ (Karsten, 02.09.2026: „mit schwarzer Schrift hat mir das
   tatsächlich besser gefallen").
   ⛔ Der Versuch mit Kugelschreiberblau und schwankendem Farbverlauf durch die
   Schrift (`background-clip: text`) ist damit erledigt — nicht erneut anbieten. */
.lp-dreier h3,
.lp-dreier p { color: #333333; }
/* Der letzte Knopf braucht 200px Luft nach oben und 200px bis zur Fußzeile
   (Karsten, 18.08.2026 — ausdrücklich nachgefragt). */
/* Der Abschluss hat oben 30px weniger Luft (Karsten 18.08.2026) — und die
   Ueberschrift haelt nach unten denselben Abstand ein. Deshalb wird --luft
   fuer diesen Abschnitt einmal umgesetzt, statt einzelne Werte zu pflegen. */
.lp-schluss { --luft: 90px; padding-bottom: 300px; }   /* 100px mehr bis zur Fusszeile, Karsten 18.08.2026 */
@media (max-width: 1279px) { .lp-schluss { --luft: 60px; padding-bottom: 220px; } }
.lp-schluss .lp-knopf-reihe { margin: 300px 0 0; }   /* 100px mehr nach oben, Karsten 18.08.2026 */


/* Zwei Spalten */
.lp-zweier { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.lp-zweier h2 { margin-bottom: 16px; }
.lp-zweier img { border: 1px solid var(--light-grey); border-radius: var(--radius); }
/* Das Zertifikat bringt seinen eigenen Rand mit — kein zweiter drumherum. */
.lp-zweier__bild--ohne-rahmen img { border: 0; border-radius: 0; }


/* Der Balken-Abschnitt bekommt doppelte Luft (Karsten 18.08.2026: da muss
   Abstand oben und unten doppelt so hoch sein). */
.lp-abschnitt--balken { padding: calc(var(--luft) * 2 + 30px) 0; }   /* je 30px mehr zu den grauen Feldern, Karsten 18.08.2026 */

/* Vergleichsbalken — nebeneinander (Karsten 18.08.2026) */
.lp-vergleiche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.lp-vergleich { max-width: none; margin: 0; }
.lp-vergleich__titel { margin-bottom: 18px; font-size: 17px; line-height: 26px; }
.lp-vergleich__zeile { display: block; margin-bottom: 12px; }
.lp-vergleich__marke { display: block; font-size: 12px; line-height: 20px; color: var(--text-grey); margin-bottom: 4px; }
.lp-balken {
  display: block;
  height: 5px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 3px;
  overflow: hidden;
}
.lp-balken__fuellung {
  display: block;
  height: 100%;
  width: 0;                       /* Startwert — die Breite kommt aus dem Skript */
  transition: width 4s ease-out;  /* Karsten: "innerhalb von vier Sekunden hochfahren" */
}
.lp-balken__fuellung--ohne { background: #bbbbbb; }
.lp-balken__fuellung--mit  { background: var(--balken-mit); }
/* Ergebnis: doppelt so gross wie vorher (Karsten 18.08.2026) */
/* Doppelt so gross wie der Fliesstext (Karsten 18.08.2026: "das muss doppelt
   so gross geschrieben werden") — 14px Grundschrift, also 28px. */
.lp-vergleich__ergebnis { margin-top: 20px; font-size: 28px; line-height: 38px; }

/* Fussnote rechtsbuendig und kleiner.
   🔴 SPEZIFITAETSFALLE (gefunden 18.08.2026): `.lp-fussnote` allein reicht NICHT.
   Weiter oben steht `.lp-abschnitt p { font-size: 14px }` — zwei Klassen gegen
   eine, die Regel gewinnt. Die Fussnote war deshalb die ganze Zeit **14px**,
   nicht 11, wie ich in §19 notiert hatte. Darum hier mit `p` mitqualifiziert.
   ⚠ 9px sind rund 35 % kleiner als die gemessenen 14px (Karsten wollte „30 bis
   40 Prozent kleiner"). Das ist die Untergrenze: leanos kleinster Schriftgrad
   ist 12px. */
.lp-abschnitt p.lp-fussnote,
.lp-fussnote {
  font-size: 11px;
  line-height: 16px;
  color: var(--text-grey);
  margin-top: 40px;
  text-align: right;
}


/* Praxisbeispiele */
.lp-beispiele { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin-top: 60px; }
.lp-beispiel .lp-bild { margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; }


/* =========================================================
   STIMMEN ALS SCHIEBER (Karsten, 18.08.2026, nach seinem Vorlagenbild)
   „Es soll bloss ein Testimonial zu sehen sein, man kann sich durchklicken …
   und das muss mobil auch funktionieren."
   Farbe: NUR Office Blue (#507DBF). Die Vorlage war orange — das ist die einzige
   Abweichung davon, so von Karsten angesagt.

   ⛔ KEIN display:none fuer die inaktiven Stimmen. Alle liegen uebereinander im
   selben Rasterfeld: dann ist die Buehne so hoch wie die LAENGSTE Stimme und
   springt beim Weiterklicken nicht. Ausgeblendet wird ueber Deckkraft und
   visibility — beides laesst die Hoehe stehen.
   ========================================================= */
/* ⚠ 20px hoeher, aber die Punkte bleiben, wo sie waren (Karsten, 18.08.2026):
   „Text und Bild etwas weiter nach oben, um 20 Pixel — genauso die Pfeile. Die
   Punkte unten dort, wo sie sind."
   🔴 `margin-top` am Block anzufassen bringt NICHTS: der Aussenabstand der
   Ueberschrift darueber (120px) ist groesser und die beiden Abstaende fallen
   zusammen (margin collapsing) — gemessen blieb die Buehne exakt stehen. Der
   Block ruecht also ueber die UEBERSCHRIFT hoch: deren margin-bottom -20px.

   Deshalb drei zusammengehoerige Werte: die Ueberschrift gibt 20px ab,
   die Steuerzeile bekommt die 20px als Abstand zurueck (50 -> 70), und die
   Pfeile — die auf die Mitte des GANZEN Blocks zentriert sind, der jetzt 20px
   hoeher ist — bekommen -10px, damit auch sie exakt 20px hoeher stehen.
   ⛔ Einen der drei Werte allein aendern verschiebt die anderen mit. */
.lp-abschnitt--stimmen h2.lp-mitte { margin-bottom: calc(var(--luft) - 20px); }
.lp-stimmen {
  position: relative;
  margin-top: 40px;
  padding: 0 76px;              /* Platz fuer die beiden Pfeile */
}
.lp-stimmen__buehne { display: grid; }
.lp-stimme {
  grid-area: 1 / 1;             /* alle uebereinander -> Hoehe = laengste Stimme */
  margin: 0;
  display: flex;
  align-items: center;
  /* Bild und Text stehen als Paar MITTIG zwischen den beiden Pfeilen
     (Karsten, 18.08.2026). Vorher klebten sie links: 20px Luecke zum linken
     Pfeil, 258px zum rechten. */
  justify-content: center;
  gap: 60px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  /* Karsten, 18.08.2026: „500 Millisekunden ausblenden und DANN 500 Millisekunden
     einblenden" — nacheinander, nicht ueberblendet. Die Reihenfolge steuert das
     Skript, hier stehen nur die Dauern.
     Dazu (gleicher Tag, zweiter Wunsch): „beim Ausblenden soll es gleichzeitig
     nach links wegrutschen, hoechstens 50 Pixel, und das neue kommt von rechts."
     ⛔ `visibility` erst NACH der halben Sekunde umschalten (`0s linear 500ms`),
     sonst waere die Stimme sofort weg und das Wegrutschen unsichtbar — Deckkraft
     allein reicht nicht, `visibility: hidden` wirkt sofort. */
  transition: opacity 500ms ease, transform 500ms ease, visibility 0s linear 500ms;
}
.lp-stimme.ist-da {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 500ms ease, transform 500ms ease, visibility 0s linear 0s;
}
/* Die beiden Seiten, auf denen eine Stimme kommt bzw. geht — 50px, mehr nicht:
   sonst laeuft sie unter die Pfeile. */
.lp-stimme.nach-links  { transform: translateX(-50px); }
.lp-stimme.nach-rechts { transform: translateX(50px); }
@media (prefers-reduced-motion: reduce) {
  .lp-stimme, .lp-stimme.nach-links, .lp-stimme.nach-rechts { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-stimme { transition: none; } }

/* Ohne Skript ist keine Stimme ausgeblendet — sonst waere der Abschnitt leer. */
html:not(.lp-anim) .lp-stimme,
/* ⛔ DASSELBE MUSTER WIE AUF DER KONTOSEITE (04.09.2026, mitrepariert):
   Diese Rückfallebene galt, BIS das Karussell-Skript `data-bereit` setzt — also
   sah man für einen Moment ALLE Stimmen untereinander und dann den Umbau.
   ✅ Jetzt greift sie nur, wenn wirklich kein Skript läuft.
   ⛔ SICHERHEITSNETZ in `huelle-fuss.php`: Bleibt `data-bereit` nach vier
   Sekunden aus (Ladefehler), wird `data-bereit="aus"` gesetzt und die
   Rückfallebene über die Klasse `lp-stimmen--roh` doch noch aktiv. Niemand
   sitzt vor einer leeren Fläche. */
@media (scripting: none) {
  .lp-stimmen .lp-stimme { opacity: 1; visibility: visible; margin-bottom: 40px; }
  .lp-stimmen .lp-stimmen__buehne { display: block; }
  .lp-stimmen .lp-stimmen__pfeil,
  .lp-stimmen .lp-stimmen__punkte { display: none; }
}
.lp-stimmen--roh .lp-stimme { opacity: 1; visibility: visible; margin-bottom: 40px; }
.lp-stimmen--roh .lp-stimmen__buehne { display: block; }
.lp-stimmen--roh .lp-stimmen__pfeil,
.lp-stimmen--roh .lp-stimmen__punkte { display: none; }

/* ⛔ DER BLAUE FLECK HINTER DEM BILD IST RAUS (Karsten, 18.08.2026: „das blaue
   Zeug hinter dem Bild finde ich einfach nur haesslich — nur das Bild").
   Aus der Vorlage bleibt also nur das runde Bild. Es ist zugleich 35 % kleiner:
   200px -> 130px. */
.lp-stimme__bild { position: relative; flex: none; width: 130px; height: 130px; }
.lp-stimme__fleck { display: none; }
.lp-stimme__bild img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Kein Foto -> graue Silhouette auf Weiss, damit der Kreis auf dem grauen
   Abschnitt ueberhaupt als Kreis zu erkennen ist. */
.lp-stimme__ohnebild { background: var(--white); padding: 20px; }

/* Der Text daneben */
/* ⚠ Breite begrenzen: ueber die volle Bahn gezogen steht das Zitat als eine
   duenne Zeile quer ueber den Bildschirm (am 18.08.2026 im Screenshot gesehen).
   In Karstens Vorlage ist es eine ruhige Spalte neben dem Bild. */
.lp-stimme__text { flex: 1; min-width: 0; max-width: 640px; }
.lp-stimme__zitat {
  font-size: 18px;
  line-height: 32px;
  font-style: italic;
  color: var(--text-grey);
  margin: 0 0 28px;
}
.lp-stimme__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: var(--office-blue-text);
  margin: 0;
}
.lp-stimme__rolle { font-size: 12px; line-height: 20px; color: var(--text-grey); margin: 4px 0 0; }

/* Pfeile */
.lp-stimmen__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  /* ⛔ NICHT BLAU (Karsten, 18.08.2026). Zweiter Schritt am selben Tag:
     „die zwei Pfeile machst du mit weissem Hintergrund, der Rand soll bleiben,
     und sie duerfen keinen Hover-Effekt haben."
     Also weisser Kreis mit grauem Rand und grauem Zeichen — auf dem grauen
     Abschnitt gut zu sehen, ohne Farbe. */
  background: var(--white);
  border: 1px solid var(--light-grey);
  color: var(--text-grey);
  cursor: pointer;
  margin-top: -10px;            /* siehe Rechnung oben: ergibt 20px hoeher */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lp-stimmen__pfeil { flex: none; }
/* ⛔ KEIN HOVER-EFFEKT (Karsten, 18.08.2026): „wenn ich rueber gehe, sehe ich die
   Maus, und dann kann ich klicken" — mehr soll nicht passieren. */
.lp-stimmen__pfeil:focus-visible { outline: 2px solid var(--dark-grey); outline-offset: 3px; }
.lp-stimmen__pfeil--zurueck { left: 0; }
.lp-stimmen__pfeil--vor { right: 0; }
.lp-stimmen__pfeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Steuerzeile: Pfeile (am Schreibtisch absolut daneben) und Punkte */
.lp-stimmen__steuerung { display: flex; align-items: center; justify-content: center; margin-top: 70px; }
.lp-stimmen__punkte { display: flex; justify-content: center; gap: 10px; }
/* ⛔ 26 × 5 PX SIND NICHT ZU TREFFEN (gemessen 28.08.2026, Startseite).
   Der Knopf ist jetzt 26 × 26 px groß; der sichtbare Strich sitzt als
   `::before` mittig darin und bleibt 5 px hoch mit runden Enden.
   ⚠ Der negative Außenabstand nimmt die gewonnene Höhe wieder weg — die
   Steuerzeile darunter steht auf derselben Stelle wie vorher (nachgemessen).

   🔴 ZWEI IRRWEGE, DIE ICH ZUERST GENOMMEN HABE, damit sie niemand wiederholt:
   1. `padding` + `background-clip: content-box` am Knopf selbst: Die
      Kurzschreibweise `background: …` DAHINTER setzt `background-clip` wieder
      auf `border-box` zurück — die Farbe lief über die ganze Fläche.
   2. Selbst mit richtiger Reihenfolge wäre es falsch geworden: Bei
      `box-sizing: border-box` frisst der Innenabstand die 5 px Höhe auf
      (gemessen: Kasten 34 × 20 statt 26 × 25), und der Eckenradius wird beim
      Zuschnitt auf den Inhaltskasten zu 0 — aus den runden Strichen wären
      Rechtecke geworden. */
.lp-stimmen__punkt {
  width: 26px;
  height: 26px;
  margin: -10px 0;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  cursor: pointer;
  transition: width 200ms ease;
}
.lp-stimmen__punkt::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 3px;
  background: var(--light-grey);
  transition: background 200ms ease;
}
.lp-stimmen__punkt.ist-da { width: 34px; }
.lp-stimmen__punkt.ist-da::before { background: var(--office-blue); }
.lp-stimmen__punkt:focus-visible { outline: 2px solid var(--office-blue); outline-offset: 3px; }


/* Abschluss */
/* Ueberschrift -> Video genauso weit wie Ueberschrift -> oberer Rand:
   beides haengt an --luft (die Ueberschrift bringt den Abstand selbst mit). */
/* 🔴 „Gewinnen beginnt mit Beginnen" soll MITTIG zwischen der grauen Box darüber
   und dem Video stehen (Karsten, 18.08.2026). Der Abstand nach oben setzt sich
   aus ZWEI Werten zusammen: dem Aussenabstand der Stimmen-Box (--luft der Seite)
   und dem Innenabstand des Abschlusses (--luft im Abschluss, 90px). Der Abstand
   nach unten ist der margin-bottom der Ueberschrift — der muss also die SUMME
   der beiden sein, nicht nur einer davon.
   ⛔ Genau dieser Denkfehler (zwei Werte, einer angefasst) hat schon in §19-c
   drei Korrekturrunden gekostet. */
.lp-schluss h2.lp-mitte { margin-bottom: 210px; }                                  /* 120 (Stimmen) + 90 (Abschluss) */
@media (max-width: 1279px) { .lp-schluss h2.lp-mitte { margin-bottom: 135px; } }   /* 75 + 60 */
@media (max-width: 720px)  { .lp-schluss h2.lp-mitte { margin-bottom: 120px; } }   /* 60 + 60 */

.lp-schluss__video { max-width: 760px; margin: 0 auto; }
.lp-schluss__video .lp-video { border: 1px solid var(--light-grey); border-radius: var(--radius); }


@media (max-width: 1279px) {
  /* ⛔ NICHT das padding überschreiben, sondern die Variable setzen — sonst
     bleibt der Abstand UNTER der Überschrift bei 120px stehen, während oben
     nur noch 75px sind. Genau dieser Fehler ist am Schreibtisch dreimal
     aufgefallen; auf dem Handy wäre er unbemerkt geblieben. */
  :root { --luft: 75px; }
  /* ⚠ Karsten am 17.08.2026, zweimal gemeldet: erst „die Überschrift wird vom
     Menü überdeckt", dann „das Siegel liegt unter der Menüleiste, der Abstand
     muss oben 30 bis 40 Pixel höher". Der Kopf ist fest und 85px hoch, darüber
     sitzt jetzt zusätzlich das Siegel.
     ⚠ 235 -> 205 -> 180px am 02.09.2026 (zwei Runden, Karsten: „es muss wirklich
     ein bisschen höher"). Der Wert für den Desktop (225px, weiter oben) ist
     ausdrücklich unangetastet geblieben.
     ⛔ Wird hier je weiter gekürzt: unter dem Menü sitzt das Siegel, und genau
     dessen Abstand musste Karsten am 17.08.2026 zweimal melden. */
  .lp-abschnitt.lp-hero { padding: 180px 0 120px; }
  .lp-bahn { padding: 0 20px; }

  /* 🔴 .lp-vergleiche MUSS hier mit rein (gefunden 18.08.2026 bei der
     Handy-Prüfung): sonst bleiben die drei Balken dreispaltig, jede Spalte war
     gemessene 99px breit — die Überschriften brachen um und die Seite lief
     43px über den Rand hinaus. */
  .lp-hero__raster,
  .lp-zweier,
  .lp-dreier,
  .lp-beispiele,
  .lp-vergleiche { grid-template-columns: 1fr; gap: 40px; }
  /* 🔴 Untereinander brauchen die Glasplatten denselben Abstand, den der Block
     nach oben hat (Karsten, 02.09.2026: „die drei sind wirklich gequetscht …
     genauso viel Abstand wie der obere Glaskasten zum Bild darüber").
     `--luft` ist genau dieser Wert — er steht auch in `margin-top` des Blocks,
     und beide gehen dadurch immer gemeinsam mit.
     ⛔ Vorher standen hier 6px. Die stammten aus der Post-it-Zeit, als jedes
     Zettelbild seinen eigenen weissen Rand mitbrachte. Die Glasplatten haben
     keinen — dadurch klebten sie aneinander. */
  .lp-dreier { gap: var(--luft); }
  .lp-dreier__spalte { padding: 26px 24px 28px; }

  /* Untereinander brauchen die Balken weniger Luft dazwischen als nebeneinander. */
  .lp-vergleiche { gap: 50px; }
  .lp-vergleich__ergebnis { font-size: 22px; line-height: 30px; }

  .lp-hero__raster { gap: 32px; }
  .lp-bildraster--vier { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .lp-vertrauen__raster { grid-template-columns: 1fr; gap: 60px; }   /* untereinander doppelt so viel Luft — Karsten, 18.08.2026 */

  /* Schieber auf schmalen Geraeten: Bild oben, Text darunter, Pfeile UNTER die
     Buehne neben die Punkte — seitlich waere zu eng (Karsten: „das muss mobil
     auch funktionieren"). */
  .lp-stimmen { padding: 0; }
  .lp-stimme { flex-direction: column; gap: 28px; text-align: center; }
  /* 35 % kleiner, wie am Schreibtisch — hier 130 statt 200px. */
  .lp-stimme__bild { width: 130px; height: 130px; margin: 0 auto; }
  .lp-stimme__bild img { width: 130px; height: 130px; }
  .lp-stimme__fleck { inset: 0 20px 20px 0; }
  .lp-stimme__zitat { font-size: 16px; line-height: 28px; }
  .lp-stimmen__pfeil { position: static; transform: none; width: 44px; height: 44px; }
  .lp-stimmen__steuerung { margin-top: 36px; gap: 14px; }
  /* ⛔ flex:none ist Pflicht — sonst quetscht die Zeile die runden Pfeile zu
     Ovalen (am 18.08.2026 im Handy-Screenshot gesehen). Und die Punkte werden
     schmaler, damit acht Stueck plus zwei Pfeile auf 390px passen. */
  .lp-stimmen__pfeil { flex: none; margin-top: 0; }   /* in der Zeile, kein Versatz noetig */
  .lp-stimmen__punkte { gap: 6px; flex-wrap: wrap; justify-content: center; }
  /* ⛔ 18 px SIND UNTER DER GRENZE (gemessen 28.08.2026 — genau auf dem
     kleineren Bildschirm, wo mit dem Finger getippt wird, war das Ziel am
     schmalsten). 24 px fuer die stillen Striche, 32 fuer den aktiven; bei
     8 Stimmen sind das 234 px — passt auch auf 390 px Breite.
     ⚠ Die Hoehe kommt von der Grundregel (26 px), hier zaehlt nur die Breite. */
  .lp-stimmen__punkt { width: 24px; }
  .lp-stimmen__punkt.ist-da { width: 32px; }
}

@media (max-width: 720px) {
  /* 🔴 BILDER AUF DEM HANDY UNTEREINANDER, EINES PRO ZEILE (Karsten, 18.08.2026):
     „die vier Bilder muessen einzeln gezeigt werden … die sollen ihren Platz
     nutzen fuer die mobile Version." Gilt fuer beide Bildraster.
     ⚠ Auf dem Tablet (bis 1279px) bleiben es zwei nebeneinander — dort ist genug
     Breite, und es war nie bemaengelt. */
  .lp-bildraster--vier { grid-template-columns: 1fr; gap: 24px; }

  /* 🔴 AUF DEM HANDY BRAUCHEN DIE GLASPLATTEN MEHR LUFT (Karsten, 02.09.2026:
     „von riesiges Online Seminar, Zertifizierung und Vorlagen zum Herunterladen
     — sowohl vom ersten Bild darüber als auch untereinander, das ist mir noch
     zu dicht"). Auf dem Handy galten bis hierher 60px, jetzt 90px.
     ⚠ EIN Wert für beides: `--luft` steuert `margin-top` (Abstand zum Bild
     darüber) und `gap` (Abstand untereinander) gemeinsam. Wer den Abstand
     ändern will, ändert genau diese eine Zahl — dann bleiben beide gleich. */
  .lp-dreier { --luft: 90px; }

  /* 🔴 220 -> 190 -> 150px am 02.09.2026 (Karsten, zwei Runden: „das muss noch
     mehr … mach mal 150 Pixel").
     ⚠ GEMESSEN, damit nichts verdeckt wird: Die Menüleiste ist fest 85px hoch,
     das Siegel (55px breit) ist der erste Inhalt darunter. Bei 150px bleiben
     also rund 65px Luft zwischen Menü und Siegel. Viel weniger geht nicht —
     genau dieser Abstand war am 17.08.2026 schon zweimal zu knapp. */
  .lp-abschnitt.lp-hero { padding: 150px 0 100px; }  /* fester Kopf + Menue-Panel + Siegel darueber */
  .lp-hero__raster { grid-template-columns: 1fr; }
  :root { --luft: 60px; }
  .lp-vergleich__marke { flex-basis: 76px; }
}


/* =========================================================
   DER COOKIE-HINWEIS (Complianz) IM LEANO-DESIGN
   Karsten, 18.08.2026: „Das Design muss auch angepasst werden — Knöpfe, Farben,
   Schriftart. Hübsch machen."

   ⚠ Das Fenster gehoert dem Plugin. Es wird NICHT umgebaut, nur eingekleidet:
   dieselbe Rundung wie unsere Karten (15px), derselbe weiche Schatten, Assistant
   fuer die Ueberschrift, Arial fuer den Text, unsere Pillenknoepfe.
   ⛔ Nichts ausblenden, was rechtlich hingehoert (Ablehnen, Einstellungen,
   Links zu Richtlinie/Datenschutz/Impressum). Ein Cookie-Hinweis, bei dem
   „Ablehnen“ schwerer zu finden ist als „Akzeptieren“, ist angreifbar —
   deshalb sind beide Knoepfe gleich gross und gleich sichtbar.
   ⚠ Gilt nur in der neuen Fassung (die Datei wird nur dort geladen).
   ========================================================= */
/* ⚠ DER PLUGIN-BANNER IST SEIT 05.09.2026 ABGESCHALTET (§453,
   `disable_cookiebanner` = 1 an Banner 1). Den ersten Besuch macht jetzt unser
   eigenes Fenster `.lp-cookie` — weiter unten in dieser Datei.
   ⛔ Die folgenden Regeln bleiben trotzdem stehen: Sie sind der Rückweg. Wird
   das Feld wieder auf 0 gesetzt, sieht der Plugin-Banner sofort wieder aus wie
   das Haus — sonst stünde da eine fremde Kiste.
   🗑 ENTFERNT AM 05.09.2026: `.cmplz-cookiebanner.lp-cookie-offen`. Die Klasse
   wurde von `huelle-fuss.php` gesetzt, und dieser Zuhörer ist mit §450
   abgerissen worden. Eine Regel ohne Setzer ist toter Code. */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  box-shadow: 0 0 36.4px -7px rgba(0, 0, 0, 0.25);
  padding: 34px 36px 30px;
  font-family: var(--font-body);
  background: var(--white);
}

/* Kopf: Titel in Assistant, Kreuz dezent */
#cmplz-cookiebanner-container .cmplz-header { margin-bottom: 6px; }
#cmplz-cookiebanner-container .cmplz-title {
  /* 🔴 AUF DEM HANDY FEHLTE DIE ÜBERSCHRIFT (Karsten, 19.08.2026, danach
     nachgemessen): Complianz setzt `.cmplz-title` unterhalb seiner eigenen
     Grenze auf `display: none`. Der Text „Einwilligung verwalten" steht im
     Quelltext, war aber ausgeblendet — oben im Kasten blieb eine leere Zeile
     mit dem Schließkreuz daneben. Gemessen bei 390px: display none, Höhe 0;
     bei 1280px: display block, Höhe 28px.
     ⚠ Deshalb hier ausdrücklich wieder anschalten. Die Regel ist stärker als
     die des Plugins (id + Klasse gegen Klasse), sie greift also unabhängig
     von der Reihenfolge der Stylesheets. */
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--black);
}
#cmplz-cookiebanner-container .cmplz-close { color: var(--text-grey); }
#cmplz-cookiebanner-container .cmplz-close:hover { color: var(--black); }

/* Die feinen Trennlinien wie im uebrigen Design */
#cmplz-cookiebanner-container .cmplz-divider { background: var(--light-grey); height: 1px; border: 0; }

/* Text */
#cmplz-cookiebanner-container .cmplz-body,
#cmplz-cookiebanner-container .cmplz-message {
  font-size: 14px;
  line-height: 25px;
  color: var(--black);
}

/* Knoepfe: unsere Pillen, 40px hoch, Radius 30 — wie „Anmelden“ im Kopf.
   Akzeptieren gefuellt in Office Blue, Ablehnen weiss mit Rand: gleich gross,
   gleich auffaellig, unterschiedliche Gewichtung nur ueber die Farbe. */
#cmplz-cookiebanner-container .cmplz-buttons { gap: 10px; margin-top: 18px; }
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 26px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 40px;
  font-weight: 400;
  border: 1px solid var(--light-grey);
  background: var(--white);
  color: var(--black);
  transition: background 0.15s ease, color 0.15s ease;
}
/* 🔴 KONTRAST (Seitencheck, 19.08.2026): Weiss auf --office-blue (#507DBF)
   ergibt nur 4,18:1 — gefordert sind 4,5:1. Der Knopf traegt jetzt den
   lesbaren Blauton --office-blue-text (#3C6BA8, 5,44:1), der auf dieser
   Seite ohnehin schon fuer blaue Schrift benutzt wird. Damit der Hover noch
   zu sehen ist, wird er dunkler statt heller — heller waere wieder zu blass.
   ⛔ Nicht auf #507DBF zurueckdrehen: Das ist der Zustimmen-Knopf des
   Cookie-Hinweises, den jeder Besucher als Erstes sieht. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-accept {
  background: var(--office-blue-text);
  border-color: var(--office-blue-text);
  color: var(--white);
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-accept:hover { background: var(--office-blue-dunkel); border-color: var(--office-blue-dunkel); }

/* „Immer aktiv" beim Pflicht-Cookie: Complianz nimmt dafuer ein Gruen, das auf
   dem hellen Grund nur 4,47:1 schafft. Ein Hauch dunkler, sonst unveraendert. */
#cmplz-cookiebanner-container .cmplz-always-active { color: #006400; }
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-save-preferences:hover { background: var(--bg-grey); }

/* Kategorien-Schalter in Office Blue statt Plugin-Gruen */
#cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox input:checked + .cmplz-label::before,
#cmplz-cookiebanner-container input[type=checkbox]:checked + label::before { background: var(--office-blue); }
#cmplz-cookiebanner-container .cmplz-category { font-size: 13px; line-height: 24px; }

/* Die Links unten (Cookie-Richtlinie, Datenschutz, Impressum) */
#cmplz-cookiebanner-container .cmplz-links a,
#cmplz-cookiebanner-container .cmplz-documents a {
  font-size: 12px;
  line-height: 22px;
  color: var(--text-grey);
  text-decoration: underline;
  text-decoration-color: var(--light-grey);
}
#cmplz-cookiebanner-container .cmplz-links a:hover,
#cmplz-cookiebanner-container .cmplz-documents a:hover { color: var(--black); text-decoration-color: currentColor; }

/* ⚠ DOPPELTER LINK NACH DER UMSTELLUNG (18.08.2026): Seit die Cookie-Angaben in
   der Datenschutzerklaerung stehen, zeigen ZWEI Links im Fenster auf dieselbe
   Seite — einmal als „Cookie-Richtlinie", einmal als „Datenschutz". Der erste
   wird ausgeblendet; die Information bleibt vollstaendig erreichbar, nur eben
   ueber einen Link statt zwei.
   ⛔ Nicht den Datenschutz-Link ausblenden — der muss bleiben. */
#cmplz-cookiebanner-container .cmplz-documents .cmplz-link.cookie-statement { display: none; }

/* ⛔ DER DAUER-REITER UNTEN RECHTS IST AUS (§403, 02.09.2026)
   Karsten: „dass da rechts unten immer so eine Einwilligung verwalten ist …
   Das nervt mich. Das wollte ich nicht, dass das so aussieht."
   Complianz laesst den Reiter „Einwilligung verwalten" nach der Zustimmung
   dauerhaft 15px aus der unteren rechten Ecke lugen (Hoehe 50px, Versatz
   -35px) und faehrt ihn beim Ueberfahren aus. Abgeschaltet ueber die
   Plugin-Einstellung `manage_consent_options` = `hide-everywhere` — NICHT
   ueber eigenes CSS, damit ein Plugin-Update es nicht zurueckholt.
   ✅ Ersatz: der Knopf im Abschnitt „Einwilligung und Widerruf" der
   Datenschutzseite (`neu/vorlage-seite-713.php`). Art. 7 Abs. 3 DSGVO
   verlangt einen Widerruf, der so leicht geht wie die Zustimmung — die
   Fusszeile verlinkt „Datenschutz" auf jeder Seite.
   ⛔ Hier nichts einblenden, was der Reiter war. Wer ihn zurueck will, stellt
   die Plugin-Einstellung um, nicht dieses CSS.
   ⚠ Die Regel unten bleibt: Sie kleidet den AUFKLAPPKASTEN
   (`.cmplz-manage-consent-container`) ein, den der Kurzbefehl
   `[cmplz-manage-consent]` erzeugt — nicht den Reiter. */
.cmplz-manage-consent .cmplz-manage-consent-container,
#cmplz-manage-consent .cmplz-manage-consent-container {
  border-radius: 30px 30px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  color: var(--black);
}

@media (max-width: 720px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner { padding: 26px 22px 22px; }
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn { width: 100%; }
}


/* =========================================================
   WOERTERBUCH — DOWNLOAD-KNOPF NEBEN DER UEBERSCHRIFT (18.08.2026)
   Karsten, mit Screenshot: „links Ueberschrift + Begriffszahl, rechts der
   Download-Knopf." Vorlage war ein dunkler Knopf (leano-Referenz) — hier
   umgedreht: weisser Grund, grauer Rand, --text-grey (#333-Optik), genau wie
   die uebrigen Knoepfe der Seite (vergleiche .btn-ghost/.btn-login).
   ========================================================= */
.lp-wbb__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
/* ⛔ 20px zwischen Ueberschrift und Untertitel (Karsten, 24.08.2026): derselbe
   Abstand wie auf der Downloadseite, wo er aus `.lp-inhalt h1` kommt. Gemessen
   vorher: Woerterbuch **6 px**, Downloads **20 px**.
   ⚠ Der Knopf „Woerterbuch herunterladen" wandert dadurch von selbst mit nach
   unten — `.lp-wbb__kopf` ist ein Flex-Kasten mit `align-items: flex-end`, der
   Knopf haengt also an der Unterkante der linken Spalte. Genau so wollte
   Karsten es: „dass der Button auch ein bisschen weiter runter geht." */
.lp-wbb__kopf h1 { margin-bottom: 20px; }
.lp-wbb__kopf .lp-wbb__vorspann { margin-bottom: 0; }

/* ⚠ 18.08.2026, mehrfach nachgebessert. Zuletzt (Karsten, deutlich): „genauso
   aussehen wie der Knopf auf der Startseite (.btn-ghost, ‚Jetzt Online-Seminar
   starten') — gleiche Höhe, gleiche Rundung, bloß ohne Pfeil links, dafür
   rechts der graue Abschnitt mit Download-Pfeil, und beim Hover darf der
   Pfeil ruhig nach unten wandern." Masse jetzt exakt von .btn-ghost
   uebernommen (Hoehe 35px, Radius 20px, Schrift 13px).
   ⛔ Der letzte Halbsatz gilt seit 26.08.2026 NICHT mehr — die Hover-Fahrt ist
   abgeschafft, siehe `.btn-download__pfeil` weiter unten. */
.btn-download {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  height: 35px;
  margin-bottom: 15px;
  border: 1px solid var(--dark-grey);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--black);
  font-family: var(--font-body);
}
.btn-download__text {
  padding: 0 16px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.btn-download__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  border-left: 1px solid var(--dark-grey);
  background: var(--bg-grey);
}
.btn-download__icon svg { width: 12px; height: 12px; overflow: visible; }
/* 🔴 NUR DER PFEIL BEWEGT SICH, DER STRICH STEHT (Karsten, 19.08.2026):
   „der Strich ist an der Stelle, wo er sein soll, und der Pfeil ist ungefähr
   5 Pixel weiter nach oben — und wenn ich rüberfahre, bewegt sich der Pfeil
   zum Strich hin und berührt ihn."
   ⛔ Vorher wanderte das ganze Zeichen (`svg { transform: translateY(2px) }`).
   Pfeil und Strich behielten dabei ihren Abstand — es sah aus, als rutsche
   das Symbol, statt dass der Pfeil ankommt.
   Rechnung: Das Zeichen ist 14 Einheiten breit und wird 12px gross gezeigt,
   eine Einheit sind also 0,857px. Die Pfeilspitze sitzt bei y=10, der Strich
   bei y=12. In Ruhe steht der Pfeil 4 Einheiten hoeher (Abstand zum Strich:
   6 Einheiten = 5,1px), beim Ueberfahren faehrt er 6 Einheiten herunter und
   die Spitze landet genau auf dem Strich.
   ⚠ `overflow: visible` am <svg> ist Pflicht — in Ruhe ragt der Pfeil oben
   aus dem Zeichenbereich heraus und wuerde sonst abgeschnitten.

   🔴 ZWEITE RUNDE (Karsten, 19.08.2026): „Der Pfeil sollte zwei Pixel naeher
   dran sein. Und er beruehrt nicht nur den Strich, er ueberlagert ihn — er muss
   am Strich selber aufhoeren, davor aufhoeren. Und die Bewegung geht zu
   schnell."
   ⛔ WARUM ER VORHER UEBERLAGERT HAT — der Denkfehler beim Messen: Bei SVG
   liefert getBoundingClientRect die GEOMETRIE ohne Strichstaerke. „Abstand 0"
   hiess also: Pfeilspitzen-MITTE liegt auf Strich-MITTE — beide Linien sind
   1,3 Einheiten dick, der Pfeil lag damit voll auf dem Strich. Sichtbar
   beruehren sie sich erst, wenn zwischen den Mitten eine volle Strichstaerke
   liegt.
   ⚠ Ab jetzt bei solchen Sachen immer mit der halben Strichstaerke rechnen
   (0,65 Einheiten je Seite), nicht mit der nackten Geometrie.

   Rechnung (1 Einheit = 12px/14 = 0,857px; Spitze y=10, Strich y=12):
     Hover:  Spitzen-Mitte 1,3 Einheiten ueber der Strich-Mitte -> y=10,7
             -> translateY 0,7. Die Aussenkanten beruehren sich, nichts liegt
             uebereinander.
     Ruhe:   sichtbare Luecke war 4,03px, minus 2px -> 2,03px
             -> 2,333 Einheiten tiefer als vorher -> translateY -1,667. */
/* ⛔ BEWEGUNG ABGESCHAFFT (Karsten, 26.08.2026): „Ich gehe hier Hover,
   dann bewegt sich der Pfeil von oben nach unten. Das will ich nicht. Ich will,
   dass der so aussieht wie im Ausgangszustand."
   ⚠ Die Ruhelage bleibt exakt wie berechnet — der Pfeil steht weiterhin
   2,03 px über dem Strich (translateY(-1.667px)). Weg ist ausschliesslich die
   Hover-/Fokus-Fahrt samt Übergang; deshalb braucht es auch die
   prefers-reduced-motion-Ausnahme nicht mehr, es bewegt sich nichts.
   ⚠ `overflow: visible` am <svg> bleibt Pflicht — der Pfeil ragt in der
   Ruhelage oben aus dem Zeichenbereich heraus. Nicht wieder animieren. */
.btn-download__pfeil { transform: translateY(-1.667px); }

/* ---------- Marke „Registrierung nötig" unter dem Downloadknopf ----------
   Karsten, 26.08.2026: „Wir wissen ja, dass dieses Wörterbuch nur im
   registrierten Zustand zu erhalten ist. Darum soll auch da eine Markierung
   sein … damit man das sofort Bescheid weiß."
   ⚠ Das Aussehen der Pille kommt unveraendert aus `.lp-baum__sperre` weiter
   unten — gelb, 11 px, rund. Hier steht nur die Lage.
   ⚠ Der Knopf trug den `margin-bottom: 15px`, der ihn an der Unterkante der
   linken Spalte ausrichtet. Der wandert an die Huelle, sonst stuende die Pille
   in diesem Abstand statt darunter. */
.lp-wbb__dl { display: flex; flex-direction: column; align-items: center;
              gap: 10px; flex: none; margin-bottom: 15px; }
.lp-wbb__dl .btn-download { margin-bottom: 0; }

@media (max-width: 720px) {
  /* Karsten, 18.08.2026, auf dem Handy: Abstand Text->Knopf muss genauso
     gross sein wie Knopf->Suchfeld-Linie darunter — vorher liess der
     allgemeine Zeilenabstand (24px) und der eigene margin-bottom (15px) des
     Knopfs zwei unterschiedliche Werte stehen. Jetzt beide auf 20px. */
  .lp-wbb__kopf { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* ⚠ Seit 26.08.2026 steckt der Knopf in `.lp-wbb__dl`; gestreckt wird jetzt
     die Huelle, sonst bliebe der Knopf auf dem Handy schmal. */
  .lp-wbb__dl { align-self: stretch; margin-bottom: 20px; }
  .btn-download { align-self: stretch; margin-bottom: 0; }
  .btn-download__text { flex: 1; justify-content: center; }
}


/* =========================================================
   „WOERTERBUCH ERHALTEN" — LANDINGPAGE FUERS PDF (Seite 13620, 18.08.2026)
   Buch-Bild (zu + aufgeschlagen) oben, Text, dann das Anmeldeformular
   ([lp_wb_status], siehe inc/lp-wb-einwilligung.php). Formular nutzt bewusst
   dieselben .lp-mf-Bausteine wie das Meinungsformular im Woerterbuch (siehe
   dort) — ein Knopf-Baustein fuer die ganze Seite, das JS ist bereits
   formularunabhaengig gebaut (huelle-fuss.php).
   ========================================================= */
/* 🔴 DAS WAR DER GRUND, WARUM DIE SEITE AUF DEM HANDY SEITLICH AUS DEM BILD
   LIEF (Karsten, 19.08.2026: „Das funktioniert nicht auf der mobilen
   Version!"; danach nachgemessen).
   `.lp-inhalt` setzt `width: 800px` UND `max-width: 100%`. Diese Zeile hier
   überschrieb das `max-width` mit einem FESTEN Wert — damit war die
   100%-Bremse weg, und die Seite blieb auf einem 390px-Bildschirm stur
   720px breit. Gemessen: main 720px in einem 390px-Fenster, alles nach links
   verschoben und abgeschnitten.
   ⚠ Ein fester `max-width`-Wert muss hier immer zusammen mit `width: 100%`
   stehen, sonst hebelt er die Bremse der Grundregel aus. */
.lp-wbe { width: 100%; max-width: 720px; box-sizing: border-box; }
/* Bild 30% groesser + 30px mehr Luft oben/unten (Karsten, 18.08.2026, nach
   Ansicht) — symmetrisch per negativem Rand ausgebeult, nicht einseitig. */
.lp-wbe__bild { width: 130%; margin: 30px 0 70px -15%; }
.lp-wbe__bild img { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .lp-wbe__bild { width: 100%; margin: 24px 0 54px; }
}
.lp-wbe__vorspann { font-size: 14px; line-height: 27px; color: var(--text-grey); margin-bottom: 30px; }

/* Punkte bleiben — nur die FARBE war das Problem (Karsten, 18.08.2026, zwei
   Runden: „nicht blau, schwarz" — beim ersten Mal versehentlich die Punkte
   ganz entfernt statt nur die Farbe zu tauschen, das war falsch). */
.lp-wbe__vorteile { margin: 0 0 40px; padding: 0; list-style: none; }
.lp-wbe__vorteile li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 27px;
  color: var(--black);
}
.lp-wbe__vorteile li::before {
  content: "";
  position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--black);
}

/* Registrierungsspalte — Maße 1:1 aus leano css/login.css (.auth-main:
   max-width 460px, zentriert). Die Felder selbst bleiben linksbündig, nur
   Umschalter-Pille und Überschriften sind mittig — genau wie dort. */
.lp-wbe__anmeldung { max-width: 460px; margin: 50px auto 0; text-align: center; }
.lp-wbe__anmeldung .lp-wb label { text-align: left; }
.lp-wbe__anmeldung .lp-wb-meldung { text-align: center; }

/* ⚠ 18.08.2026 korrigiert (Karsten: „der Button ist mittig, warum? Es war
   doch vorher gut mit Text drüber, warum ist der weg?"). Bei leano steht der
   Rechtshinweis ÜBER dem Knopf, rechtsbündig (.auth-legal), und der Knopf
   selbst rechts (.auth-actions { justify-content: flex-end }). Genau so. */
.lp-wbe__anmeldung .lp-wbe__zustimmung {
  text-align: right;
  margin: 4px 0 0;
  font: 400 13px/20px "Arial", sans-serif;
  color: var(--dark-grey);
}
.lp-wbe__anmeldung .lp-wbe__zustimmung a { color: var(--dark-grey); text-decoration: none; }
.lp-wbe__anmeldung .lp-wbe__zustimmung a:hover { text-decoration: underline; }
.lp-wbe__aktion { display: flex; justify-content: flex-end; margin-top: 36px; }

/* Umschalter „Anmelden | Einrichten" ganz oben (leano: .auth-main-switch).
   ⚠ Ohne den hatte ein bereits Registrierter, der ausgeloggt ist, gar keinen
   Weg, sich anzumelden — er kam nicht an sein Wörterbuch (18.08.2026). */
.lp-wbe__ansichtswahl { margin-bottom: 44px; }
.lp-wb-ansicht { display: none; }
.lp-wb-ansicht.ist-sichtbar { display: block; }
.lp-wbe__vergessen { text-align: right; margin: 6px 0 0; font-size: 13px; }
.lp-wbe__vergessen a { color: var(--dark-grey); text-decoration: none; }
.lp-wbe__vergessen a:hover { text-decoration: underline; }
/* Wer schon eingeloggt ist, sieht statt des Formulars nur den Download-Knopf
   — der steht dann mittig, nicht rechts (kein Formular drumherum). */
.lp-wbe__aktion--mittig { justify-content: center; }
.lp-wb-knopf[href] { text-decoration: none; }

/* Privat-/Firmenkunde-Umschalter — 1:1 nach leano.net/de/anmelden.html
   (css/login.css dort, Klassen .auth-switch/.auth-switch-fill), nur die
   Klassennamen an lp-wbe__kontotyp* angepasst (Karsten, 18.08.2026,
   ausdrücklich korrigiert: „das ist eine völlig eigene Version, ich wollte
   das eins zu eins von leano"). Eine graue Pille, eine WEISSE Füllung
   gleitet darüber; eine schwarze Textkopie liegt IN der Füllung und wird
   durch deren overflow:hidden nur dort sichtbar — die Buchstaben kippen
   Kante für Kante von Grau auf Schwarz, während die Füllung wandert. Die
   Füllung selbst baut das Skript in huelle-fuss.php (initWbeSlideToggle). */
.lp-wbe__kontotyp-label {
  font: 400 11px/1 "Arial", sans-serif;
  letter-spacing: 0.2px;
  color: var(--dark-grey);
  text-align: center;
  margin-bottom: 8px;
}
.lp-wbe__kontotyp {
  position: relative;
  display: flex;
  max-width: 340px;
  margin: 0 auto 30px;
  padding: 4px;
  border-radius: 22px;
  background: var(--bg-grey);
}
.lp-wbe__kontotyp-fuellung {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px; width: 0;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: left 700ms ease, width 700ms ease;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.lp-wbe__kontotyp-fuellung-text {
  position: absolute;
  top: 0; left: 0; height: 100%;
  display: flex;
  pointer-events: none;
  white-space: nowrap;
  transition: left 700ms ease;
}
.lp-wbe__kontotyp-fuellung-text span {
  position: relative; top: 1px;
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 8px;
  font: 400 12px/1 var(--font-body);
  color: var(--black);
  white-space: nowrap;
  box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
  .lp-wbe__kontotyp-fuellung, .lp-wbe__kontotyp-fuellung-text { transition: none; }
}
.lp-wbe__kontotyp button {
  position: relative; top: 1px; z-index: 1;
  flex: 1;
  height: 38px;
  border: 0;
  background: transparent;
  text-align: center;
  color: var(--dark-grey);
  font: 400 12px/1 var(--font-body);
  cursor: pointer;
}
.lp-wbe__kontotyp button.ist-aktiv { background: var(--white); color: var(--black); border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.lp-wbe__kontotyp.hat-fuellung button,
.lp-wbe__kontotyp.hat-fuellung button.ist-aktiv { background: transparent; color: var(--dark-grey); box-shadow: none; }

.lp-wbe__zustimmung {
  font-size: 13px;
  line-height: 22px;
  color: var(--text-grey);
  margin-top: 14px;
}

/* Das Anmeldeformular selbst ([lp_wb_einwilligung]/[lp_wb_status], gebaut in
   inc/lp-wb-einwilligung.php) — eigene, schlichte Klassen (lp-wb-*), kein
   Bezug zum alten lp-ew- oder lp-knopf-web-System (siehe Begruendung dort). */
.lp-wb { max-width: 100%; }
.lp-wb-zeile { margin: 0 0 22px; }
.lp-wb .lp-form p { margin: 0 0 18px; }
/* ⚠ 18.08.2026, Karsten: Beschriftungen standen braun da statt grau. Kam von
   einer Alt-Theme-Regel, die hier staerker griff als erwartet — deshalb hart
   mit !important dagegengesetzt, nicht nur Spezifitaet erhoeht. */
.lp-wb label { display: block; font-size: 13px; color: var(--text-grey) !important; margin-bottom: 6px; }
.lp-wb input[type=email],
.lp-wb input[type=password] {
  width: 100%; height: 44px; border: 0; border-bottom: 1px solid var(--light-grey);
  font-family: var(--font-body); font-size: 15px; background: transparent; padding: 0;
}
.lp-wb input[type=email]:focus,
.lp-wb input[type=password]:focus { outline: none; border-bottom-color: var(--black); }

/* ⚠ 18.08.2026, Karsten, deutlich: „soll genauso Button sein wie bei leano,
   der gleiche wie auf der Startseite mit dem Pfeil" — also 1:1 .btn-ghost-Maße
   (Startseite, „Jetzt Online-Seminar starten"): 35px hoch, 20px Radius,
   13px Schrift, NICHT fett. */
.lp-wb-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  height: 35px; padding: 0 8px;
  border: 1px solid var(--dark-grey); border-radius: 20px;
  background: var(--white); color: var(--black);
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  cursor: pointer; transition: border-color 0.2s ease;
}
.lp-wb-knopf span { padding: 0 10px; }
.lp-wb-knopf:hover { border-color: var(--black); }
.lp-wb-knopf:hover svg { transform: translateX(3px); }
.lp-wb-knopf svg { transition: transform 0.2s ease; flex: none; }
.lp-wb-knopf[disabled] { opacity: 0.55; cursor: default; }

.lp-wb-meldung { font-size: 14px; line-height: 24px; margin-top: 14px; }
.lp-wb-meldung.ist-fehler { color: #DA0202; }
.lp-wb-meldung.ist-erfolg { font-size: 15px; padding: 10px 0; color: var(--office-blue-text); }


/* =========================================================

   ANMELDEN / EINRICHTEN — 1:1 VON leano.net/de/anmelden.html
   (Karsten, 19.08.2026: „Bitte übernimm das eins zu eins von der
   Anmelden-Seite von leano. Die Optik! Das Design!")

   ⛔ HERKUNFT: `Leano/Webseite/css/login.css`, Werte unverändert
   übernommen — Abstände (44px zwischen den Feldern, 58px unter dem
   Untertitel, −37px für den Rechtshinweis), Schriftgrößen, die
   700ms-Gleitfüllung der Pille, das 350+350ms-Überblenden.
   ⛔ NICHT „verschönern". Wer hier etwas ändert, ändert es zuerst in
   leanos login.css und übernimmt es dann.

   🔴 WAS VORHER FALSCH WAR (19.08.2026): Die Seite war nachEMPFUNDEN,
   nicht übernommen — Felder als Kästen statt Linien, harter Umsprung
   statt Überblenden, eigene Abstände, eigene Klassennamen. Karsten:
   „Es ist alles so falsch." Die alten `.lp-wbe__…`-Regeln für das
   Formular sind damit tot; im Markup steht nur noch leanos Struktur.

   UNTERSCHIEDE ZU leano — alle von Karsten angesagt:
   · kein eigener Seitenrahmen: die Seite hat Kopf und Fußzeile wie alle
     anderen, deshalb steht hier KEIN `#main { padding: 220px 0 }`
   · leanos Zitate über dem Anmelden-Formular bleiben vorerst weg
   ========================================================= */

/* ⚠ EIN EINZIGER UNTERSCHIED ZU leano, und der ist begründet (Karsten,
   19.08.2026: „Wenn der Seitencheck sagt, das muss geändert werden, dann pass
   es an."): Überall dort, wo leano --dark-grey (#999) als TEXTfarbe benutzt —
   Untertitel, Feldbeschriftungen, Platzhalter, „Passwort vergessen?",
   Rechtshinweis, Pillenbeschriftung — steht hier --text-grey (#6E6E6E).
   #999 ergibt auf Weiß nur 2,85:1, gefordert sind 4,5:1; #6E6E6E schafft
   5,10:1. Es ist derselbe Grauton, den diese Seite seit §24-b für lesbaren
   Grautext verwendet. Alles andere — Maße, Abstände, Zeiten, Bewegungen —
   bleibt unverändert leano.
   ⛔ Nicht auf #999 zurückdrehen. */

.lp-auth { margin-top: 70px; }

/* ⛔ DIE ANMELDESEITE STEHT 25 PIXEL HÖHER (Karsten, 02.09.2026):
   „das ganze Element … muss etwas höher, um ich sag 20-30 Pixel ungefähr.
   Die Fußzeile bitte an der Stelle lassen, wo es ist."
   ⚠ NUR SEITE 2829 (/anmelden/) — `.lp-auth` steckt auch in
   /kennwort-vergessen/, /kennwort-festlegen/, /konto/ und /leanberater/.
   Über die Seitennummer bleibt die Änderung dort, wo sie gemeint war.
   ⚠ Die Fußzeile bewegt sich nicht mit: Sie hängt nicht an diesem Abstand,
   sondern steht am Ende des Dokuments. Nur der Inhalt rückt nach oben. */
body.page-id-2829 .lp-auth { margin-top: 15px; }

.lp-auth .auth-main {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
}
/* Die Überschrift hat einen EIGENEN, breiteren Rahmen — sie darf kein Kind
   von .auth-main sein, sonst deckelt dessen 460px auch sie (leano). */
.lp-auth .auth-heading-wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}
/* Eigene Kompositionsebene gegen ein bekanntes Safari-Problem: ohne das kann
   die Fade-Fläche als weißes Rechteck hängen bleiben. */
.lp-auth .auth-content,
.lp-auth .auth-heading-wrap {
  opacity: 1;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .lp-auth .auth-content,
  .lp-auth .auth-heading-wrap { transition: none !important; }
}

.lp-auth .auth-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--black);
  margin: 0;
}
.lp-auth .auth-sub {
  margin: 58px 0 58px;
  font: 400 15px/24px var(--font-body);
  color: var(--text-grey);
}
/* „Zugang einrichten" ist eine kurze, einzeilige Überschrift — dort wirkt der
   große obere Abstand zu weit weg (leano). Nur oben kleiner, unten gleich. */
.lp-auth .auth-content.view-signup > .auth-sub { margin-top: 7px; }

/* ---------- Umschaltpille ---------- */
.lp-auth .auth-switch {
  position: relative;
  display: flex;
  max-width: 340px;
  margin: 0 auto 60px;
  padding: 4px;
  border-radius: 22px;
  background: var(--bg-grey);
}
.lp-auth .auth-switch-fill {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px; width: 0;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: left 700ms ease, width 700ms ease;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.lp-auth .auth-switch-fill-text {
  position: absolute;
  top: 0; left: 0; height: 100%;
  display: flex;
  pointer-events: none;
  white-space: nowrap;
  transition: left 700ms ease;
}
.lp-auth .auth-switch-fill-text span {
  position: relative;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 8px;
  font: 400 12px/1 var(--font-body);
  color: var(--black);
  white-space: nowrap;
  box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
  .lp-auth .auth-switch-fill,
  .lp-auth .auth-switch-fill-text { transition: none; }
}
/* ⚠ ABWEICHUNG VON leano, aber nur bei der Textfarbe (Karsten, 19.08.2026:
   „Wenn der Seitencheck sagt, das muss geändert werden, dann pass es an."):
   leanos --dark-grey (#999) auf dem hellgrauen Pillengrund ergibt 2,61:1,
   gefordert sind 4,5:1. --text-grey (#6E6E6E) schafft 4,68:1 — genau der Ton,
   den diese Seite seit §24-b für lesbaren Grautext benutzt. Form, Größe,
   Abstände und die gleitende Füllung bleiben unverändert leano. */
/* ⛔ BEIDE TEXTSCHICHTEN MÜSSEN GLEICH ZENTRIEREN (Karsten, 08.09.2026)
   „Mir fällt auf, dass Geschäftskunde/Privatkunde einen Tick nach unten gehen,
   wenn ich sie aktiviere. Die sollen in der gleichen Position bleiben."

   Der Wortlaut sass hier in ZWEI Schichten übereinander: unten der graue Text
   im `<button>`, darüber der schwarze in `.auth-switch-fill-text span`. Der
   Knopf zentrierte über sein eigenes Verhalten, der span über Flexbox.
   ⚠ CHROME RECHNET BEIDES GLEICH — dort war der Versatz 0,000 px, in zwölf
     Bildschirmlagen und Bild für Bild. Erst in WebKit, also in Safaris eigener
     Engine, kam heraus: **0,5 px**, bei jeder Breite. Genau der halbe Pixel,
     den Karsten gesehen hat.
   ⛔ LEHRE: Karsten benutzt Safari. Wer eine seiner Beobachtungen nur in Chrome
      nachmisst und dann „nichts gefunden" meldet, hat am falschen Ort gemessen
      (Regel C11). Werkzeug: `_Werkzeuge/webkit/mess`.
   ✅ Jetzt zentriert der Knopf genauso wie der span — gleiche Methode, gleiches
      Ergebnis in beiden Engines. */
.lp-auth .auth-switch button {
  position: relative;
  top: 1px;
  z-index: 1;
  flex: 1;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  /* ⛔ HIER STECKTE DER HALBE PIXEL. Ein `<button>` bringt vom Browser ein
     Innenmass mit — gemessen: 2 px oben, 3 px unten. Bei mittiger Ausrichtung
     zählt nur der Inhaltsbereich, dessen Mitte damit einen halben Pixel höher
     liegt als die des Kastens. Der graue Text sass also 0,5 px zu hoch, und
     beim Umschalten sah es aus, als rutsche das Wort nach unten.
     ⚠ Die schwarze Schicht (`.auth-switch-fill-text span`) hat 0/0 — deshalb
       stimmte sie und der Unterschied blieb. */
  padding: 0;
  background: transparent;
  text-align: center;
  color: var(--text-grey);
  font: 400 12px/1 var(--font-body);
  cursor: pointer;
}
/* Ohne JavaScript: aktiver Knopf weiß hinterlegt. */
.lp-auth .auth-switch button.is-active {
  background: var(--white); color: var(--black);
  border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
/* Mit JavaScript übernimmt die gleitende Füllung — die Knöpfe bleiben immer
   grau und durchsichtig, sonst blitzt beim Wechsel zweimal Weiß auf. */
.lp-auth .auth-switch.has-fill button,
.lp-auth .auth-switch.has-fill button.is-active {
  background: transparent; color: var(--text-grey); box-shadow: none;
}

.lp-auth .auth-field-center { text-align: center; }
.lp-auth .auth-field-center .auth-customer-switch { margin: 0 auto; }

/* ---------- Formulare ---------- */
.lp-auth .auth-view { display: none; text-align: left; }
.lp-auth .auth-view.is-active { display: block; }

.lp-auth .auth-field { margin-bottom: 44px; }
.lp-auth .auth-field label {
  display: block;
  margin-bottom: 8px;
  font: 400 11px/1 var(--font-body);
  letter-spacing: 0.2px;
  color: var(--text-grey) !important;   /* schlägt eine Alt-Theme-Regel, die hier braun einfärbt */
}
/* 🔴 KEINE KÄSTEN. Nur eine Linie unten — das war Karstens Hauptkritik
   (19.08.2026): „bei leano ist das überhaupt nicht viereckig, da ist bloß eine
   Linie unten drunter". */
/* ⚠ `!important` ist hier Pflicht, nicht Bequemlichkeit (19.08.2026
   nachgemessen): Das gekaufte Theme setzt für alle Eingabefelder
   `border: 1px solid #d1d1d1`, `border-radius: 5px`, weißen Grund, 52px Höhe
   und 14/16px Innenabstand — und gewinnt gegen diese Regeln. Genau daher kamen
   die Kästen, die Karsten gesehen hat. Ohne `!important` bleibt es dabei. */
.lp-auth .auth-field input {
  width: 100%;
  box-sizing: border-box;
  height: 30px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dark-grey) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 0 2px !important;
  font: 400 16px/27px var(--font-body) !important;
  color: var(--black) !important;
}
.lp-auth .auth-field input::placeholder { color: var(--text-grey); opacity: 1; }
.lp-auth .auth-field input:focus { outline: none; border-bottom-color: var(--black) !important; }

/* Dicht an der Passwortlinie (~7px): das Feld bringt 44px mit, davon 37 weg. */
.lp-auth .auth-forgot { margin: -37px 0 0; text-align: right; }
.lp-auth .auth-forgot a {
  font: 400 12px/1 var(--font-body);
  color: var(--text-grey);
  text-decoration: none;
}
.lp-auth .auth-forgot a:hover { text-decoration: underline; }

/* ⛔ „PASSWORT VERGESSEN?" WAR MIT 12 PIXELN ZU KLEIN ZUM TREFFEN (§386, 02.09.2026)
   Die Norm (WCAG 2.2, 2.5.8) verlangt 24 × 24 Pixel. Mit dem Daumen traf man
   stattdessen daneben — ausgerechnet den, der ohnehin gerade nicht weiterkommt.

   ⚠ WARUM KEIN `padding`: Padding vergrößert die Box, und der Tastatur-Fokus-
   rahmen folgt der Box — der Rahmen wäre sichtbar größer geworden. Das
   unsichtbare Pseudo-Element vergrößert NUR die Trefferfläche. Am Aussehen
   ändert sich nichts, weder im Ruhezustand noch beim Fokus.

   ⚠ NACHGERECHNET, DAMIT NICHTS KOLLIDIERT: Über dem Link liegen 7 px Luft bis
   zur Passwortlinie (44 px Feldabstand minus 37 px), darunter 25 px. Die
   Fläche wächst 5 px nach oben (2 px Luft bleiben) und 7 px nach unten —
   zusammen 24 px. Sie berührt weder das Eingabefeld noch den Anmeldeknopf. */
.lp-auth .auth-forgot a { position: relative; }
.lp-auth .auth-forgot a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -5px; bottom: -7px;
}

.lp-auth .auth-actions { display: flex; justify-content: flex-end; margin-top: 36px; }
.lp-auth .auth-submit {
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  font-size: 13px;
}
.lp-auth .auth-submit > .auth-submit-text { top: 0; line-height: 25px; }
.lp-auth .auth-submit > .auth-submit-icon { top: 0; }
.lp-auth .auth-submit-icon {
  position: relative; width: 14px; height: 14px; flex: none;
  margin-right: 5px; transition: margin-right 500ms ease;
}
.lp-auth .auth-submit-icon .ic {
  position: absolute; inset: 0; width: 14px; height: 14px;
  opacity: 0; transform: scale(0.55);
  transition: opacity 500ms ease, transform 500ms ease;
}
.lp-auth .auth-submit-icon .ic-arrow {
  opacity: 1; transform: translate3d(0, 0, 0);
  will-change: transform; backface-visibility: hidden;
}
.lp-auth .auth-submit.is-error .ic-arrow,
.lp-auth .auth-submit.is-success .ic-arrow { opacity: 0; transform: scale(0.55); }
.lp-auth .auth-submit.is-error .ic-warn { opacity: 1; transform: translateX(3px); }
.lp-auth .auth-submit.is-success .ic-check { opacity: 1; transform: translateX(5px); }
.lp-auth .auth-submit.is-error .auth-submit-icon { margin-right: -2px; }
.lp-auth .auth-submit.is-success .auth-submit-icon { margin-right: 7px; }
.lp-auth .auth-submit .auth-submit-text {
  white-space: nowrap; overflow: hidden; box-sizing: border-box;
  text-align: center; flex: none; padding-left: 0;
}
.lp-auth .auth-submit .auth-submit-text-inner { display: inline-block; white-space: nowrap; }
.lp-auth .auth-submit:not(.is-error):not(.is-success):hover .ic-arrow { transform: translate3d(5px, 0, 0); }

/* Rechtshinweis: rechtsbündig, dicht über dem Knopf — kein Zwangshäkchen. */
.lp-auth .auth-legal {
  margin: -37px 0 0;
  text-align: right;
  font: 400 13px/20px var(--font-body);
  color: var(--text-grey);
}
.lp-auth .auth-legal a { color: var(--text-grey); text-decoration: none; }
.lp-auth .auth-legal a:hover { text-decoration: underline; }

/* =========================================================
   HINWEISSEITEN — 404 und „Zugang eingeschraenkt" (27./28.08.2026)
   Eine Optik, zwei Seiten: Zeichen, Ueberschrift, ein Satz, dann Wege.
   ⛔ Die Klassen heissen `lp-hinweis…`, NICHT `lp-404…`: Am 28.08.2026 kam die
   zweite Seite dazu (Karsten: „ein Link mit der Optik und auch ein Icon oben,
   so wie wir es jetzt gerade hatten"). Kommt eine dritte Hinweisseite, benutzt
   sie dieselben Klassen — nicht kopieren.
   (frueherer Kopf: SEITE NICHT GEFUNDEN (404) — 27.08.2026)
   Karsten: „versuch sie wirklich sauber und schoen zu machen."
   Eine Spalte, mittig, in dieser Reihenfolge: Marke, Ueberschrift, ein Satz,
   das Suchfeld, vier Orte, Zurueck.
   ⛔ Keine eigenen Farben, keine eigene Schrift, kein Schatten — alles kommt
   aus dem Fundament. Die Seite soll wie das Haus aussehen, nicht wie ein
   Sonderfall.
   ⚠ Die Pille des Suchfelds kommt aus dem Abschnitt SUCHSEITE; das <main>
   traegt dafuer zusaetzlich die Klasse `lp-suchseite`. Nicht verdoppeln.
   ========================================================= */
.lp-hinweis { text-align: center; }

/* 🔴 DIE VORSCHLAEGE STEHEN LINKS — IMMER (Karsten, 27.08.2026, mit Bild):
   „Die Ergebnisse sind mittig? Das war links, wir hatten das schon mal! Guck
   dir das bei Google an."
   Ursache: `.lp-hinweis { text-align: center }` faerbt auf ALLES darin ab, also
   auch auf die Vorschlagsliste des Suchfelds — auf /suche/ gibt es diese
   Mittigkeit nicht, deshalb fiel es dort nie auf.
   ⛔ Wer kuenftig einen Bereich mittig stellt, in dem das Suchfeld steht, muss
   diese Zeilen mitnehmen. Trefferzeilen sind IMMER linksbuendig. */
.lp-hinweis .lp-suche__vorschlaege,
.lp-hinweis .lp-suche__vorschlag a,
.lp-hinweis .lp-suche__feld,
.lp-hinweis .lp-suche__feld input { text-align: left; }

/* ⛔ HIER STAND DIE MARKE „FEHLER 404" — ersatzlos gestrichen am 27.08.2026.
   Karsten: „Die meisten koennen damit ueberhaupt nichts anfangen." */
/* Phosphor „file-dashed", Thin. Gross genug, um als Zeichen zu wirken, aber in
   --dark-grey und ohne Fuellung — es soll die Ueberschrift stuetzen, nicht mit
   ihr konkurrieren. */
.lp-hinweis__zeichen {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
  color: var(--dark-grey);
}

.lp-inhalt.lp-hinweis h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 24px;
}
/* ⚠ Die Abstaende sind am 27.08.2026 durchgehend groesser geworden (Karsten:
   „die Sachen sind alle ein bisschen unangenehm zusammengequetscht"). Wer hier
   etwas enger stellt, macht genau das rueckgaengig. */
.lp-hinweis__satz {
  max-width: 560px;
  margin: 0 auto 52px;
  font: 400 16px/30px var(--font-body);
  color: var(--text-grey);
}
.lp-hinweis__satz strong { font-weight: 400; color: var(--black); }

/* Ueberschrift ueber den vier Orten — ohne sie stehen die Felder unvermittelt
   unter dem Suchfeld und wirken wie ein zweiter Anlauf statt wie ein Angebot. */
/* ⚠ Karsten, 27.08.2026: „Der Abstand von ‚Oder sieh dich hier um' zum
   Suchfeld sollte genauso weit sein wie der Abstand nach unten zu den
   einzelnen Texten." Also oben und unten derselbe Wert — wer einen davon
   aendert, aendert beide. */
/* ⚠ `.lp-inhalt p` bringt einen unteren Abstand mit, der staerker gewichtet ist
   als eine reine Klasse — deshalb steht hier `.lp-inhalt` davor. Ohne das
   sammelte sich unter der Zeile stillschweigend zusaetzliche Luft, und der
   Abstand nach unten war 11 px groesser als der nach oben. */
.lp-inhalt .lp-hinweis__ueberschrift {
  margin: 36px 0 0;
  font: 400 16px/26px var(--font-body);
  color: var(--text-grey);
}

/* Vier Orte, zwei nebeneinander. Optik wie die Vorschlagszeilen der Suche:
   runde Felder, beim Ueberfahren grau, kein Rahmen — damit die Seite nicht
   nach Kacheln aussieht, sondern nach derselben Liste wie ueberall. */
.lp-hinweis__ziele {
  list-style: none;
  /* ⚠ 16, nicht 36 — und das ist kein Widerspruch zur Regel darueber:
     Die Felder bringen 20 px eigenen Innenabstand mit, bevor ihr Text anfaengt.
     16 + 20 = 36, also SICHTBAR derselbe Abstand wie oben zwischen Suchfeld und
     „Oder sieh dich hier um". Karsten hat genau das gemessen (27.08.2026, mit
     Bild): „Da ist mir die Entfernung zu weit weg."
     ⛔ Wer hier 36 einsetzt, macht daraus wieder 56 sichtbare Pixel. */
  margin: 16px auto 0;
  padding: 0;
  max-width: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}
.lp-hinweis__ziele a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 22px;
  border-radius: 18px;
  color: var(--black);
  text-decoration: none;
}
.lp-hinweis__ziele a:hover { background: var(--bg-grey); }
.lp-hinweis__ziele a:hover .lp-hinweis__ziel-name { text-decoration: underline; }
.lp-hinweis__ziel-name { display: block; font: 400 17px/26px var(--font-body); }
.lp-hinweis__ziel-satz {
  display: block;
  margin-top: 6px;
  font: 400 14px/22px var(--font-body);
  color: var(--text-grey);
}

/* ⚠ Der Knopf steht mittig — `.btn-ghost` ist ein Inline-Element, die
   Ausrichtung kommt vom `text-align: center` des Bereichs. */
.lp-hinweis__zurueck { margin-top: 64px; }

/* Zweiter Weg als Textzeile unter dem Knopf (28.08.2026, „Zugang
   eingeschraenkt"): Zwei gleich starke Knoepfe nebeneinander zwingen zu einer
   Entscheidung, die der Besucher an dieser Stelle nicht treffen will. */
.lp-hinweis__nebenweg {
  margin: 16px 0 0;
  font: 400 14px/22px var(--font-body);
  color: var(--text-grey);
}
/* ⚠ Innenabstand, damit das Klickziel mindestens 24 px hoch ist: Der Text
   allein waere 16 px, und der Seitencheck zaehlt jedes Ziel darunter. 16 + 2×6
   = 28. Betrifft vor allem den Daumen auf dem Handy. */
.lp-hinweis__nebenweg a { color: var(--text-grey); display: inline-block; padding: 6px 4px; }

@media (max-width: 620px) {
  /* Nebeneinander wird auf dem Handy zu eng — die Erklaersaetze braechen auf
     drei Zeilen um. Untereinander, ohne dass sich sonst etwas aendert. */
  .lp-hinweis__ziele { grid-template-columns: 1fr; }
  .lp-inhalt.lp-hinweis h1 { font-size: 30px; }
}


/* ⛔ HIER STAND DAS MORPHENDE WORT im AGB-Link („AGB fuer Privatkunden" ->
   „... Geschaeftskunden"). Weg seit 26.08.2026, Karsten: „Mach nur AGB statt
   Privatkunde. Ich will nicht, dass sich das bewegt." Der Satz steht jetzt
   still, nur das Ziel des Links wechselt. Nicht wieder einbauen. */

.lp-auth .lp-wb-meldung { font-size: 14px; line-height: 24px; margin-top: 14px; text-align: right; }
.lp-auth .lp-wb-meldung.ist-fehler { color: #DA0202; }
.lp-auth .lp-wb-meldung.ist-erfolg { color: var(--office-blue-text); }

@media (max-width: 520px) {
  .lp-auth .auth-heading { font-size: 20px; line-height: 34px; }
  .lp-auth .auth-actions { margin-top: 46px; }
}

/* Die Meldung nach dem Absenden: mittig, normale Textfarbe (Karsten,
   19.08.2026: „den Text zentriert machen und in der normalen Textfarbe, nicht
   blau"). Sie ersetzt das Formular, nachdem dieses ausgeblendet wurde. */
.lp-auth .lp-auth-fertig {
  margin: 0;
  text-align: center;
  color: var(--black);
  font: 400 15px/27px var(--font-body);
}

/* =========================================================
   DIE ANTWORT NACH DEM KLICK IN DER MAIL (Seite 13620)
   Karsten, 19.08.2026, nach dem Echttest: „Diese Seite sieht nicht gut aus …
   die Seite sollte nochmal designt werden."
   Gleiche Bausteine wie der Anmeldeblock darüber: mittig, schmal, leanos
   Überschriftgröße, leanos Grautext. Werbetext und Aufzählung fallen in
   diesem Zustand weg (siehe vorlage-seite-13620.php).
   ========================================================= */
.lp-wb-antwort {
  max-width: 460px;
  margin: 70px auto 0;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
}
.lp-wb-antwort h3 {
  margin: 0 0 22px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--black);
}
.lp-wb-antwort p {
  margin: 0 0 18px;
  font: 400 15px/27px var(--font-body);
  color: var(--text-grey);
}
.lp-wb-antwort p:last-child { margin-bottom: 0; }
.lp-wb-antwort strong { color: var(--black); font-weight: 400; }
.lp-wb-antwort a { color: var(--text-grey); }
/* Der Download-Knopf in der Antwort steht mittig und ist derselbe wie im
   Wörterbuch — nicht der alte lp-wb-knopf. */
.lp-wb-antwort .lp-wbe__aktion { display: flex; justify-content: center; margin-top: 30px; }
@media (max-width: 720px) { .lp-wb-antwort { margin-top: 40px; } }

/* Abmeldeseite (3094): zwei Antworten nebeneinander, mittig unter der Frage. */
.lp-abmelden__knoepfe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.lp-abmelden__zurueck {
  font: 400 13px/1 var(--font-body);
  color: var(--text-grey);
  text-decoration: none;
}
.lp-abmelden__zurueck:hover { text-decoration: underline; }

/* „Keine Post mehr" (Seite 14285, §574, 17.09.2026): Frage mit Name und
   Adresse, Ja/Nein, darunter die Systemmails, die weiter kommen (Phosphor thin). */
/* Überschrift ist ein h1 (Seitencheck: genau eins), sieht aus wie die Antwort-h3. */
.lp-kp .lp-kp__titel { margin: 0 0 22px; font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 36px; color: var(--black); }
.lp-kp .lp-kp__person { margin: 0 0 24px; }
.lp-kp .lp-kp__name { margin: 0; font: 600 18px/27px var(--font-heading); color: var(--black); }
.lp-kp .lp-kp__adresse { margin: 0; }
.lp-kp .lp-abmelden__knoepfe { margin-top: 30px; }
.lp-kp__ausnahmen { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--light-grey); text-align: left; }
.lp-kp .lp-kp__ausnahmen-titel { margin: 0 0 14px; font-size: 14px; }
.lp-kp__ausnahmen ul { margin: 0; padding: 0; list-style: none; }
.lp-kp__ausnahmen li { display: flex; align-items: center; gap: 14px; font: 400 14px/27px var(--font-body); color: var(--text-grey); padding: 4px 0; }
.lp-kp__icon { flex: none; width: 24px; height: 24px; color: var(--black); }


/* =========================================================
   KONTAKTSEITE (644) — 1:1 VON leano.net/de/kontakt.html
   Karsten, 19.08.2026: „Die soll genauso funktionieren wie von leano …
   du übernimmst quasi 1:1 das Ding."

   ⛔ HERKUNFT: `Leano/Webseite/css/kontakt.css`, Werte unverändert —
   Formular 510px breit und 558px hoch, Felder auf den Figma-Positionen
   (Name 161 / E-Mail 256 / Nachricht 351 / Knopf 523), drei Spalten
   à 200px mit 150px Abstand zum Formular.
   ⛔ NICHT „verschönern". Wer hier etwas ändert, ändert es zuerst in
   leanos kontakt.css und übernimmt es dann.

   UNTERSCHIED zu leano: `#main` bringt bei uns schon seinen Abstand mit
   (.lp-inhalt, §53) — deshalb steht hier KEIN eigenes padding-top/bottom.
   Grauer Text nimmt --text-grey statt #999 (§54).
   ========================================================= */

/* ⚠ `width: 100%` MUSS dabeistehen (dieselbe Falle wie bei der Registrierseite,
   §52): `.lp-inhalt` setzt `width: 800px/--page-width` UND `max-width: 100%`.
   Ein nackter fester `max-width`-Wert hebelt die 100%-Bremse aus — die Seite
   bliebe auf dem Handy 1140px breit. Gemessen: mit `max-width` allein
   Seitenbreite 1140px im 390px-Fenster. */
.lp-kontaktseite { width: 100%; max-width: 1140px; box-sizing: border-box; }

/* Auftakt: Überschrift und Untertext werden getippt, danach blenden Felder und
   Knopf gemeinsam ein (1 s), dann die drei Spalten nacheinander (je 0,5 s),
   zum Schluss die Fußzeile. Ohne JavaScript ist alles sofort sichtbar. */
.lp-anim .lp-kontaktseite .kf-field,
.lp-anim .lp-kontaktseite .kf-actions { opacity: 0; transition: opacity 1000ms ease; }
.lp-anim .lp-kontaktseite .kc-col { opacity: 0; transition: opacity 500ms ease; }
.lp-kontaktseite .kf-typing::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.15em;
  animation: kf-caret 800ms steps(1) infinite;
}
@keyframes kf-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lp-anim .lp-kontaktseite .kf-field,
  .lp-anim .lp-kontaktseite .kf-actions,
  .lp-anim .lp-kontaktseite .kc-col { opacity: 1; transition: none; }
  .lp-kontaktseite .kf-typing::after { display: none; }
}

/* Der Honigtopf darf nie zu sehen sein — auch nicht kurz beim Laden. */
.lp-kontaktseite .kf-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Formular (510px, zentriert) ---------- */
.lp-kontaktseite .kf {
  position: relative;
  width: 510px;
  max-width: calc(100% - 40px);
  height: 558px;
  margin: 0 auto;
}
.lp-kontaktseite .kf-heading,
.lp-kontaktseite .kf-sub,
.lp-kontaktseite .kf-field,
.lp-kontaktseite .kf-actions { position: absolute; left: 0; width: 100%; }

.lp-kontaktseite .kf-heading {
  top: 0; margin: 0;
  font-family: var(--font-heading);
  font-weight: 600; font-size: 22px; line-height: 32px;
  color: var(--black);
}
.lp-kontaktseite .kf-sub {
  top: 51px; margin: 0;
  font: 400 14px/27px var(--font-body);
  color: var(--black);
}

.lp-kontaktseite .kf-name  { top: 161px; }
.lp-kontaktseite .kf-email { top: 256px; }
.lp-kontaktseite .kf-msg   { top: 351px; }

/* ⚠ `!important` wie beim Anmeldeblock: Das gekaufte Theme setzt für alle
   Eingabefelder Rahmen, Rundung, Höhe und Innenabstand und gewinnt sonst. */
.lp-kontaktseite .kf-field input,
.lp-kontaktseite .kf-field textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;
  border: 0 !important;
  border-bottom: 1px solid var(--dark-grey) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 400 16px/27px var(--font-body) !important;
  color: var(--black) !important;
  padding: 0 0 0 15px !important;
}
.lp-kontaktseite .kf-field input { height: 25px !important; min-height: 0 !important; }
.lp-kontaktseite .kf-field textarea { height: 122px !important; resize: none; padding-top: 0 !important; }
.lp-kontaktseite .kf-field input::placeholder,
.lp-kontaktseite .kf-field textarea::placeholder { color: var(--text-grey); opacity: 1; }
.lp-kontaktseite .kf-field input:focus,
.lp-kontaktseite .kf-field textarea:focus { outline: none; border-bottom-color: var(--black) !important; }

.lp-kontaktseite .kf-actions { top: 523px; display: flex; justify-content: flex-end; }
.lp-kontaktseite .kf-actions .btn-ghost { cursor: pointer; font-family: inherit; }

/* Senden-Knopf: Zeichen morpht Pfeil → „!" → Haken, der Text wird breiter
   gezogen und weich getauscht. Zeiten 1:1 leano. */
.lp-kontaktseite .kf-send { box-sizing: border-box; }
.lp-kontaktseite .kf-send-icon {
  position: relative; width: 14px; height: 14px; flex: none;
  /* ⚠ Karsten, 04.09.2026: „Der Pfeil im Knopf ‚Nachricht senden‘ muss einen
     halben Pixel nach unten — generell die Zeichen dort, das sitzt etwas zu
     hoch." Von -1px auf -0.5px — und nach seinem Bildschirmfoto noch einmal
     eine halbe Haaresbreite tiefer auf 0: „Der Pfeil sitzt da nicht richtig
     drunter." Es ist EIN Kasten für alle drei Zeichen (Pfeil, Ausrufezeichen,
     Haken) — sie rutschen also gemeinsam. */
  top: 0; margin-right: 5px; transition: margin-right 500ms ease;
}
.lp-kontaktseite .kf-send-icon .ic {
  position: absolute; inset: 0; width: 14px; height: 14px;
  opacity: 0; transform: scale(0.55);
  transition: opacity 500ms ease, transform 500ms ease;
}
.lp-kontaktseite .kf-send-icon .ic-arrow {
  opacity: 1; transform: translate3d(0, 0, 0);
  will-change: transform; backface-visibility: hidden;
}
.lp-kontaktseite .kf-send.is-error .ic-arrow,
.lp-kontaktseite .kf-send.is-success .ic-arrow { opacity: 0; transform: scale(0.55); }
.lp-kontaktseite .kf-send.is-error .ic-warn { opacity: 1; transform: translateX(3px); }
.lp-kontaktseite .kf-send.is-success .ic-check { opacity: 1; transform: translateX(5px); }
.lp-kontaktseite .kf-send.is-error .kf-send-icon { margin-right: -2px; }
.lp-kontaktseite .kf-send.is-success .kf-send-icon { margin-right: 7px; }
.lp-kontaktseite .kf-send .kf-send-text {
  white-space: nowrap; overflow: hidden; box-sizing: border-box;
  text-align: center; flex: none; padding-left: 0;
}
.lp-kontaktseite .kf-send .kf-send-text-inner { display: inline-block; white-space: nowrap; }
.lp-kontaktseite .kf-send:not(.is-error):not(.is-success):hover .ic-arrow { transform: translate3d(5px, 0, 0); }

/* ---------- Drei Spalten ---------- */
.lp-kontaktseite .kc-cols {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: calc(100% - 40px);
  max-width: 940px;
  margin: 150px auto 0;
}
.lp-kontaktseite .kc-col { position: relative; width: 200px; flex: none; height: 158px; }
.lp-kontaktseite .kc-col-title,
.lp-kontaktseite .kc-col-text,
.lp-kontaktseite .kc-col-link,
.lp-kontaktseite .kc-col-addr { position: absolute; left: 0; width: 100%; margin: 0; }
.lp-kontaktseite .kc-col-title { top: 0;    font: 700 15px/24px var(--font-body); color: var(--black); }
.lp-kontaktseite .kc-col-text  { top: 29px; font: 400 14px/27px var(--font-body); color: var(--text-grey); }
.lp-kontaktseite .kc-col-link  { top: 83px; font: 400 14px/27px var(--font-body); color: var(--black); }
.lp-kontaktseite .kc-col-link a { color: inherit; text-decoration: underline; }
.lp-kontaktseite .kc-col-addr  { top: 83px; font: 400 14px/27px var(--font-body); color: var(--black); }

/* ---------- Handy: alles fließend gestapelt (leano: ab 820px) ---------- */
@media (max-width: 820px) {
  .lp-kontaktseite .kf { position: static; height: auto; }
  .lp-kontaktseite .kf-heading,
  .lp-kontaktseite .kf-sub,
  .lp-kontaktseite .kf-field,
  .lp-kontaktseite .kf-actions { position: static; width: auto; }
  .lp-kontaktseite .kf-sub { margin-top: 21px; }
  .lp-kontaktseite .kf-name,
  .lp-kontaktseite .kf-email,
  .lp-kontaktseite .kf-msg { margin-top: 45px; }
  .lp-kontaktseite .kf-actions { margin-top: 40px; }

  .lp-kontaktseite .kc-cols {
    flex-direction: column; align-items: flex-start; gap: 80px;
    width: min(510px, calc(100% - 40px)); margin-top: 90px;
  }
  .lp-kontaktseite .kc-col { position: static; width: 100%; height: auto; }
  .lp-kontaktseite .kc-col-title,
  .lp-kontaktseite .kc-col-text,
  .lp-kontaktseite .kc-col-link,
  .lp-kontaktseite .kc-col-addr { position: static; width: auto; }
  .lp-kontaktseite .kc-col-text { margin-top: 20px; }
  .lp-kontaktseite .kc-col-link,
  .lp-kontaktseite .kc-col-addr { margin-top: 2px; }
}

/* 🔴 DER SENDEKNOPF WAR BRAUN UND KLOBIG (19.08.2026 gemessen: Grund
   rgb(115,86,69), 7px Rundung, 67px hoch, weiße Schrift). Das kommt vom
   gekauften Theme, das jeden `button[type=submit]` einfärbt und gegen
   `.btn-ghost` gewinnt. Hier also ausdrücklich dagegen — dieselben Werte wie
   `.btn-ghost`, nur durchgesetzt. */
.lp-kontaktseite .kf-send {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 35px !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  border: 1px solid var(--dark-grey) !important;
  border-radius: 20px !important;
  background: var(--white) !important;
  color: var(--black) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
}
.lp-kontaktseite .kf-send:hover { border-color: var(--black) !important; background: var(--white) !important; }

/* Nur auf der Kontaktseite startet die Fußzeile unsichtbar und blendet nach der
   dritten Spalte ein — 1:1 leano (Karsten, 19.08.2026: „Das mit dem Einblenden
   meinte ich nur bezogen auf die Kontaktseite."). Ohne JavaScript bleibt sie
   sichtbar, weil die Klasse `lp-anim` dann fehlt. */
.lp-anim body:has(.lp-kontaktseite) .site-footer { opacity: 0; }


/* ==========================================================================
   DIE GELBE MARKE „Registrierung nötig" / „Zugang nötig"
   ⛔ EIN ROTER FADEN, EINE DEFINITION (Karsten, 25.08.2026): „Ich will, dass
   es genau die gleichen Pillen sind, dass ich das wie einen roten Faden
   durchziehe die ganze Zeit."
   ⚠ Stand bis dahin nur in `seminar.css` — dort wird sie auf anderen Seiten
   gar nicht geladen. Genau diese Falle hat schon zweimal zugeschlagen
   (`btn-ghost--klein`). Deshalb hier im Fundament: jede Seite hat sie.
   ⛔ Wer diesen Stil aendert, aendert ihn ueberall — das ist der Sinn.
   Gelb ist Office Yellow #f2d680; Schrift #333 (8,85 : 1). Weiss waere auf
   diesem Gelb unlesbar (1,43 : 1).
   ⚠ Als Link mindestens 24 px hoch — Klickziel (Seitencheck 20.08.2026).
   ========================================================================== */
/* 🔴 INNENABSTAND MUSS MINDESTENS SO GROSS SEIN WIE DIE RUNDUNG
   (Karsten, 25.08.2026, am Handy gesehen): „Innerhalb der Pille steht der Text
   viel zu weit rechts und links, der ist schon in der Rundung drin. Da muss
   mehr Abstand sein. Das gilt fuer alle diese gelben Pillen."
   ⚠ Die Rechnung dahinter: Bei `border-radius: 30px` greift die Rundung so
   weit, wie die Pille HOCH ist — genauer: `min(30, Hoehe/2)`. Einzeilig sind
   das 12 px, dreizeilig auf dem Handy **20 px**. Der Innenabstand war 10 px —
   der Text sass also 10 px tief in der Kurve.
   ⛔ Regel: waagerechter Innenabstand ≥ groesstmoegliche Rundung. Deshalb
   20 px, nicht „ein bisschen mehr".
   ⚠ Dazu der Radius von 30 auf **20 px**: Damit ist die Rundung NIE groesser
   als der Innenabstand, egal wie viele Zeilen die Pille bekommt.
   ⛔ Einzeilige Marken sehen dadurch **unveraendert** aus — bei 24 px Hoehe
   greift ohnehin nur `Hoehe/2 = 12 px`, ob dort 30 oder 20 steht, ist egal.
   Es aendert sich ausschliesslich das Bild bei mehrzeiligen Pillen. */
.lp-baum__sperre { display: inline-block; background: #f2d680; color: var(--black);
                   border-radius: 20px; padding: 3px 20px; font-size: 11px; line-height: 1.4; }
a.lp-baum__sperre { text-decoration: none; padding-top: 4.5px; padding-bottom: 4.5px;
                    min-height: 24px; display: inline-flex; align-items: center; }
a.lp-baum__sperre:hover { background: #ecc95f; color: var(--black); }


/* ===================================================================
   STANDARD-HAKEN  (.lp-haken)            — hierher gewandert 28.08.2026
   ===================================================================
   Karsten am 28.08.2026 zur Einwilligung auf „Kauf abgeschlossen":
   *„Das ‚Ja‘ ist total gequetscht an diesem Kasten … das Blau ist nicht das
   Standardblau … es gab eine bestimmte Art von Häkchen, die wir mögen. Die
   siehst du bei ‚Zugang erhalten‘ … Das ist der Standard dafür."*

   Vorher hing dort der EINGEBAUTE Haken des Browsers: eckig, Systemblau, ohne
   Abstand zum Text. Die Form, die Karsten meint, ist über drei Runden am
   25.08.2026 entstanden (§180) und stand bis heute nur in `zugang.css` — also
   genau auf der einen Seite, für die sie gemacht wurde.

   ⛔ WERTE 1:1 von dort, nichts „verbessert": Marke 20px rund, Tippfläche 24px
   (darunter meldet der Seitencheck), Abstand 10px, Haken 10 x 5,5px mit 2px
   Linien, 1px nach OBEN versetzt und waagerecht NICHT verschoben (Karsten hat
   das damals in drei Schritten eingestellt — nicht erneut verschieben).

   ⚠ `/zugang-erhalten/` benutzt weiterhin seine eigenen `.lp-zugang__hakerl`.
   Diese Seite ist abgenommen und wartet nur noch auf den Livegang — sie jetzt
   umzuklemmen hiesse, an fertiger Arbeit zu schrauben, ohne dass sich etwas
   verbessert. ➡ Beim nächsten Anfassen dieser Seite auf `.lp-haken` umstellen
   und die Kopie in `zugang.css` löschen.
   =================================================================== */

.lp-haken {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 13px/20px var(--font-body);
  color: var(--text-grey);
  cursor: pointer;
}

/* Der echte Knopf ist unsichtbar und GRÖSSER als die sichtbare Marke — nur so
   sind 20px Optik und 24px Tippfläche gleichzeitig zu haben. */
.lp-haken input {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.lp-haken__marke {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 1px 2px 0 2px;
  border: 1px solid var(--dark-grey);
  border-radius: 50%;
  background: var(--white);
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Der Haken: zwei Linien, um 45 Grad gedreht. Der Kreis zentriert sie selbst;
   das eine Pixel nach oben ist optischer Ausgleich, kein Rechenfehler — ein
   Haken wirkt sonst zu tief, weil die lange Linie nach oben zeigt. */
.lp-haken__marke::after {
  content: "";
  width: 10px;
  height: 5.5px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: translate(0, -1px) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* ⚠ DAS BLAU. Nicht --office-blue (#507DBF): dasselbe nachgedunkelte #4A72B0
   wie auf `/zugang-erhalten/`, damit beide Haken identisch aussehen.
   ⛔ Nicht auf #507DBF „zurücksetzen" — dann sind es zwei verschiedene Blaus
   für dieselbe Sache. */
.lp-haken { --haken-blau: #4A72B0; }
.lp-haken input:checked ~ .lp-haken__marke {
  background: var(--haken-blau);
  border-color: var(--haken-blau);
}
.lp-haken input:checked ~ .lp-haken__marke::after { opacity: 1; }
.lp-haken input:focus-visible ~ .lp-haken__marke {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.lp-haken a { color: var(--black); }


/* ===================================================================
   MELDEKNOPF — Zeichen und Breite
   ⛔ Werte 1:1 vom Kontaktknopf (`.kf-send`). Dort hingen sie an
   `.lp-kontaktseite`, waren also auf anderen Seiten nicht zu haben.
   ⚠ Am 28.08.2026 aus `konto.css` hierher gewandert: Die Seite „Kauf
   abgeschlossen" braucht denselben Knopf, und `konto.css` wird nur auf der
   Kontoseite geladen. Wer den Knopf aendert, aendert ihn hier — fuer alle.
   =================================================================== */

.lp-mknopf { box-sizing: border-box; }

/* 🔴 DAS WAR DIE URSACHE DER „RIESEN ABSTAENDE" (Karsten, 26.08.2026).
   `.btn-ghost span { padding: 0 10px }` aus dem Fundament trifft JEDES span im
   Knopf — also auch das Zeichenfeld und den Textkasten. Gemessen: das
   Zeichenfeld war dadurch 20px breit, obwohl `width: 0` daneben stand, und der
   Text bekam links und rechts nochmal 10px zu den 18px des Knopfes.
   ⛔ Hier deshalb ausdruecklich zuruecknehmen — der Abstand kommt allein vom
   Knopf (18px, §203). */
.lp-mknopf span { padding: 0; line-height: inherit; top: 0; }

/* 🔴 IM RUHEZUSTAND IST DAS ZEICHENFELD NICHT DA (Karsten, 26.08.2026: „dieser
   Pfeil sollte nicht rein und auch nicht diese riesen Abstaende … der Button,
   den du vorher gemacht hast, war genau richtig, er soll halt diese Art von
   Animation haben").
   Also: 0px breit, kein Rand — der Knopf steht da wie jeder andere. Erst wenn
   es etwas zu melden gibt, klappt das Feld in 500ms auf und der Haken (oder
   das Warnzeichen) blendet ein. Beim Zuruecksetzen klappt es wieder zu. */
.lp-mknopf__zeichen { position: relative; width: 0; height: 14px; flex: none;
  top: -1px; margin-right: 0; overflow: visible;
  transition: width 500ms ease, margin-right 500ms ease; }
.lp-mknopf__zeichen .ic { position: absolute; top: 0; left: 0; width: 14px; height: 14px;
  opacity: 0; transform: scale(0.55);
  transition: opacity 500ms ease, transform 500ms ease; }
.lp-mknopf.is-error   .lp-mknopf__zeichen,
.lp-mknopf.is-success .lp-mknopf__zeichen { width: 14px; margin-right: 7px; }
.lp-mknopf.is-error   .ic-warn  { opacity: 1; transform: none; }
.lp-mknopf.is-success .ic-check { opacity: 1; transform: none; }
.lp-mknopf__text { white-space: nowrap; overflow: hidden; box-sizing: border-box;
  text-align: center; flex: none; padding-left: 0; }
.lp-mknopf__innen { display: inline-block; white-space: nowrap; }
.lp-mknopf:not(.is-error):not(.is-success):hover .ic-arrow { transform: translate3d(5px, 0, 0); }

/* ---------- MIT PFEIL (.lp-mknopf--pfeil) ----------
   Karsten am 28.08.2026: *„Warum benutzen wir denn nicht unseren Standardbutton,
   der auch bei der Startseite ist? Da gehe ich rüber, und dann bewegt sich der
   Pfeil nach rechts. Und da gibt es auch keinen Hover-Effekt"* — gemeint: kein
   schwarz werdender Rand.

   ⚠ Das ist KEIN Widerspruch zur Kontoseite, wo der Pfeil ausdrücklich weg
   sollte (26.08.2026: „dieser Pfeil sollte nicht rein"). Dort sind es
   Speicherknöpfe mitten im Formular; hier ist es der eine Knopf, der die Sache
   abschliesst — dieselbe Rolle wie „Jetzt Online-Seminar starten" auf der
   Startseite. ⛔ Deshalb steht der Pfeil in einer eigenen Variante und nicht
   im Grundzustand.

   Im Ruhezustand ist das Zeichenfeld also NICHT 0 breit, sondern zeigt den
   Pfeil. Meldet der Knopf etwas, tauscht der Pfeil gegen Haken oder Warnzeichen
   — an derselben Stelle, ohne dass die Breite springt. */
.lp-mknopf--pfeil .lp-mknopf__zeichen { width: 14px; margin-right: 7px; }
.lp-mknopf--pfeil .ic-arrow { opacity: 1; transform: none; }
.lp-mknopf--pfeil.is-error   .ic-arrow,
.lp-mknopf--pfeil.is-success .ic-arrow { opacity: 0; transform: scale(0.55); }



/* ===================================================================
   KURZE SEITEN — die Fusszeile darf nicht ins erste Bild rutschen
   ===================================================================
   Karsten am 28.08.2026 zur Abmeldeseite: *„Was mich stört ist, dass die
   Fusszeile hochrutscht. Kann sie nicht ein bisschen weiter weg sein, so
   doppelte Entfernung — oder generell die Fusszeile da raus? Das nervt mich an
   der Stelle."*

   Nachgemessen bei 1440 x 900: Der Inhalt endete bei 679 px, und genau dort
   begann die Fusszeile — unter drei Zeilen Text. Die 300 px Abstand aus §53
   standen zwar da, sie reichen bei einer so kurzen Seite aber nicht: Der
   Abstand ist richtig, die SEITE ist zu kurz.

   ⛔ Nicht einfach den Abstand verdoppeln. 600 px waeren auf einem 900er
   Bildschirm knapp richtig und auf einem 1440er wieder falsch — ein fester
   Wert kann das nicht loesen.
   ✅ Stattdessen: Der Inhaltsbereich ist mindestens einen Bildschirm hoch.
   Dann liegt die Fusszeile IMMER unter der Kante, auf jedem Geraet. Bei langen
   Seiten aendert die Regel nichts, weil deren Inhalt ohnehin hoeher ist.
   ⛔ Die Fusszeile NICHT entfernen: Impressum und Datenschutz muessen von jeder
   Seite erreichbar sein.
   ⚠ `min-height` statt `height` — sonst waere eine laengere Seite abgeschnitten. */
.lp-inhalt.lp-hinweis,
.lp-inhalt.lp-kw,
.lp-inhalt.lp-wbe,
.lp-inhalt.lp-danke-seite {
  min-height: 100vh;
  box-sizing: border-box;
}


/* ===================================================================
   ABMELDEN — die Rueckmeldung passiert IM KNOPF   (28.08.2026, §257)
   ===================================================================
   Ablauf: Wort blendet aus · Rad dreht · Rad blendet aus · „Abgemeldet" ·
   danach neu laden (dann steht dort wieder „Anmelden").

   ⛔ DER KNOPF WIRD NICHT ANGEFASST. Kein `width`, kein `padding`, keine
   Innenhuelle. Nachgemessen: „Anmelden", „Abmelden" und „Abgemeldet" ergeben
   alle **132 px** — die 70 px Mindestbreite am span tragen das laengste Wort
   bereits. Karsten am 28.08.2026: „besser, wenn der Button innerhalb einer
   Groesse bleibt" — sonst schoebe er auf schmalen Geraeten das Menue an.

   🔴 DAS RAD LIEGT UEBER DEM KNOPF (`position:absolute; inset:0`) und bezieht
   sich damit auf den naechsten POSITIONIERTEN Vorfahren. Am Rechner ist
   `.btn-login` bereits `position:absolute` — dort stimmt es von allein.
   ⛔ IM KLAPPMENUE NICHT: Dort steht der Knopf auf `position: static`, das Rad
   landete deshalb irgendwo oben auf der Seite (Karsten hat es sofort gesehen).
   ⚠ UND `top`/`right` MUESSEN MIT ZURUECK: `.btn-login` bringt `top:24px;
   right:30px` mit. Solange er `static` ist, tun sie nichts — sobald er
   `relative` wird, verschieben sie ihn 24 px nach unten und 30 px nach links.
   ⛔ Wer `static` auf `relative` aendert, setzt sie ausdruecklich zurueck. */

.lp-abmelden__rad {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.lp-abmelden__rad svg { width: 15px; height: 15px; color: var(--black); }
.lp-abmelden.dreht .lp-abmelden__rad { opacity: 1; }
.lp-abmelden.dreht .lp-abmelden__rad svg {
  animation: lp-abmelden-dreh 800ms linear infinite;
  transform-origin: 50% 50%;
}
@keyframes lp-abmelden-dreh { to { transform: rotate(360deg); } }

/* 🔴 DER ZEIGER MUSS EINE HAND BLEIBEN (Karsten, 28.08.2026: „wenn ich über den
   Anmelden-Button gehe, zeigt es nur einen Pfeil an, also nicht die Hand, und
   wenn ich über den Text gehe, zeigt er mir ein Textfeld an").
   Ursache: Wir nehmen dem Knopf beim Laden die Adresse ab (das ist der Grund,
   warum das Abmelden ueberhaupt funktioniert) — ein `<a>` OHNE `href` ist fuer
   den Browser aber kein Link mehr. Also kein Handzeiger, und ueber dem Wort der
   Textcursor.
   ⛔ Die Adresse NICHT zurueckgeben, um den Zeiger zu retten — dann waere das
   Abmelden wieder kaputt. Der Zeiger wird gesetzt, nicht die Ursache geaendert. */
.lp-abmelden, .lp-abmelden > span, .lp-abmelden__rad { cursor: pointer; }

/* Das Wort blendet an Ort und Stelle aus und wieder ein. */
.lp-abmelden > span { transition: opacity 200ms ease; }
.lp-abmelden.wort-weg > span { opacity: 0; }

/* Der weiche Uebergang. ⚠ Er gilt JEDES MAL, nicht nur auf geschuetzten Seiten
   (Karsten, 28.08.2026: „das wollte dann aus- und eingeblendet werden").
   Vorher war er an den geschuetzten Fall gebunden — auf einer oeffentlichen
   Seite sprang die Seite dadurch hart um. */
/* 🔴 EINE HALBE SEKUNDE, UND ES GIBT EIN GEGENSTUECK (Karsten, 01.09.2026):
   „Wirklich halbe Sekunde ausblenden, halbe Sekunde einblenden — und nicht
   einfach verschwinden und dann da sein."
   ⛔ Diese Klasse ist jetzt nur noch der ALTE NAME fuers Weggehen. Die Regeln
   selbst stehen als `lp-geht` / `lp-kommt` im Kopf (`huelle-kopf.php`) — sie
   MUESSEN dort stehen, weil die ankommende Seite schon verdeckt starten muss,
   bevor irgendein Stylesheet geladen ist. Sonst blitzt sie auf. */
/* 🔴 DER KOPF BLEIBT AUCH HIER STEHEN (Karsten, 07.09.2026): „Ich will nur,
   dass ich beim Anmelden und Abmelden das Menü weiterhin sehe."
   ⛔ HIER STAND `.lp-abmelden-fort { opacity: 0 }` — auf dem KÖRPER selbst.
   Damit ging alles weg, die Kopfzeile eingeschlossen. Ich hatte zuerst nur die
   Regel in `huelle-kopf.php` umgestellt und diese hier übersehen; Karsten sah
   das Menü weiterhin verschwinden.
   ⚠ UND MEINE MESSUNG FAND ES NICHT: Ich hatte die Deckkraft der Menüpille
   gemessen — die steht auf 1, während der Körper darüber auf 0 geht. Der
   eigene Wert sagt nichts über das, was man sieht („Ankommen ist nicht
   Wirken", §471). Gemessen werden muss die Deckkraft ÜBER ALLE VORFAHREN.
   ✅ Jetzt blendet alles im Körper ausser der Kopfzeile. */
.lp-abmelden-fort > *:not(.site-header) { transition: opacity 500ms ease; opacity: 0; }

/* ⚠ OHNE Medienabfrage: `kompakt` ist eine Klasse, die das Skript in
   `huelle-fuss.php` setzt, kein Breitenbereich. Eine Medienabfrage drumherum
   waere geraten und traefe den Fall nicht zuverlaessig. */
.site-header.kompakt .btn-login.lp-abmelden { position: relative; top: 0; right: auto; }

@media (prefers-reduced-motion: reduce) {
  .lp-abmelden > span, .lp-abmelden__rad, .lp-abmelden-fort { transition: none; }
  .lp-abmelden.dreht .lp-abmelden__rad svg { animation: none; }
}

/* =========================================================
   KLICKFLÄCHEN AUF 24 PX — ohne dass sich etwas verschiebt
   (28.08.2026)
   =========================================================
   🔴 `seitencheck.py` meldete auf JEDER Seite „Klickziele unter 24px". Ich
   hatte das zuerst nur eingeordnet („kommt aus dem Seitenkopf, steht überall").
   Karsten: „Du schreibst zwei Meldungen, dann kümmere dich um die zwei
   Meldungen. Mach es doch einfach." Also gemessen und repariert.

   GEMESSEN bei 1280 px: Menüpunkte 70 × **15**, Lupe 17 × **17**, Logo
   111 × **20**, die zwei Links im Cookie-Hinweis 67 × **14**, sein
   Schließen-Kreuz 20 × 20. Alles unter den 24 px, die als kleinste sichere
   Trefferfläche gelten (WCAG 2.2, Zielgröße). Auf dem Handy trifft man da
   danebem.

   ⛔ KEIN PADDING, KEIN GRÖSSERER TEXT. Die Kopfzeile ist 1:1 nach leano
   gebaut; jede Änderung an Höhe oder Abstand würde das Menü verschieben.
   Stattdessen legt ein leeres `::after` eine unsichtbare Fläche über den Link.
   Sie nimmt Klicks entgegen, hat aber keinen Platzbedarf — das Aussehen bleibt
   Pixel für Pixel gleich (nachgemessen: alle Menüpunkte, Logo und Lupe stehen
   danach exakt auf denselben Koordinaten).
   ⚠ Die Menüpunkte stehen 100 px auseinander und sind 70 px breit — die
   Flächen wachsen nur nach oben und unten, sie überlappen sich nicht.
   ========================================================= */
/* ⛔ INNENABSTAND PLUS NEGATIVER AUSSENABSTAND, nicht `::after`. Ein leeres
   Pseudo-Element nimmt zwar Klicks entgegen, aber der Kasten des Links bleibt
   15 px hoch — für jedes Prüfwerkzeug und für die Bedienungshilfen des
   Betriebssystems ist das Ziel dann weiter zu klein. Der Innenabstand
   vergrößert den Kasten wirklich, der gleich große negative Außenabstand nimmt
   den Platz wieder weg. Das Menü steht danach auf denselben Koordinaten
   (nachgemessen, mit und ohne Regel verglichen).
   ⚠ `.main-nav` ist ein Flex-Kasten mit `align-items: center` — deshalb bleibt
   der Text mittig, obwohl der Kasten wächst. */
.main-nav a { padding: 5.5px 0; margin: -5.5px 0; }
/* Die Lupe ist quadratisch und nur 17 px — sie braucht auch seitlich Fläche. */
.main-nav .btn-suche {
  padding: 4.5px; margin: -4.5px;
  box-sizing: content-box;   /* sonst frisst der Innenabstand die 17 px auf */
}
/* Das Logo ist ein Textlink im Fluss — `inline-block`, sonst wirkt kein
   Innenabstand nach oben und unten. */
.logo { display: inline-block; padding: 3px 0; margin: -3px 0; }

/* 🔴 IM BURGERMENÜ NICHT (sofort gemessen und repariert, 28.08.2026):
   Dort steht das Menü untereinander, und der negative Außenabstand hat die
   Zeilen zusammengezogen — die Liste schrumpfte von 268 auf 200 px, jeder
   Punkt rückte 10 px hoch. Das Burgermenü hatte seine Tippflächen schon am
   23.08.2026 richtig gelöst: 20 px Text plus 2 × 7 px Innenabstand = 34 px.
   ⛔ Da wird nichts nachgebessert — nur der eigene Außenabstand zurückgenommen. */
.site-header.kompakt .main-nav a { margin: 0; }
.site-header.kompakt .main-nav .btn-suche { margin: 0; box-sizing: border-box; }

/* ⚠ Der Cookie-Hinweis gehört dem Plugin (Complianz). Das Plugin wird NICHT
   angefasst — hier steht nur unser eigenes CSS darüber. `inline-block` ist
   nötig, damit die Höhe überhaupt wirkt; der negative Außenabstand nimmt den
   gewonnenen Platz wieder zurück, damit die Zeile nicht auseinanderfährt. */
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner a.cmplz-link {
  display: inline-block; padding: 6px 0; margin: -6px 0;
}
/* ⚠ `!important`: Das Plugin setzt die 20 px mit höherem Gewicht. Unsere Regel
   ohne Nachdruck blieb wirkungslos (nachgemessen: weiter 20 × 20). */
.cmplz-cookiebanner .cmplz-header .cmplz-close { width: 24px !important; height: 24px !important; }

/* Die Unterstrich-Felder im Meinungsformular waren 23 px hoch. */
.lp-mf__feld input { min-height: 26px; }

/* ===================================================================
 * DAS COOKIE-FENSTER — UNSER EIGENES (§449, 04.09.2026)
 * ⛔ Ersetzt den Weg über das Plugin-Fenster: dessen Knopf ging in Karstens
 *    Safari nie auf, vier Anläufe lang. Hier hängt nichts an fremdem Code.
 * ⚠ Aussehen wie überall im Haus: weisse Platte, `--radius`, graue Linien,
 *    `.btn-ghost` für die Knöpfe. Nichts Neues erfunden.
 * =================================================================== */
/* 🔴 DIESE ZWEI ZEILEN SIND DER WICHTIGSTE TEIL DER GANZEN DATEI (04.09.2026).
   Ohne sie lag das Fenster UNSICHTBAR über der kompletten Seite und schluckte
   JEDEN Klick — Menü, Links, alles tot. Karsten: „Ich kann nicht mal mehr das
   Menü klicken, du hast irgendwas richtig heftig kaputt gemacht." Er hatte
   recht, und es war genau das.
   ⛔ `[hidden]` allein reicht NICHT: Die Browserregel `[hidden] { display: none }`
   ist schwächer als jede Klassenregel — mein `display: flex` hat sie geschlagen.
   ⛔ Wer hier ein `display` an eine Klasse schreibt, MUSS den `[hidden]`-Fall
   mit derselben oder höherer Kraft ausschliessen. */
.lp-cookie[hidden] { display: none !important; pointer-events: none; }
/* ⛔ KLICKBAR, SOBALD ES NICHT MEHR VERSTECKT IST — nicht erst mit der Klasse
   `ist-offen`. Die wird per Skript gesetzt; hängt man die Bedienbarkeit daran,
   ist das Fenster bei jedem ausgefallenen Bildaufbau zwar da, aber tot. */
.lp-cookie { pointer-events: auto; }

/* Karsten, 05.09.2026: "Ich haette die Cookie-Meldung bitte nicht in der Mitte,
   sondern wenn die kommt, dann rechts unten." — und zum Handy: "Da ist sie
   schoen in der Mitte, da finde ich's richtig gut."
   ⛔ Also zwei Lagen, nicht eine: am Rechner in die Ecke, am Handy mittig.
   ⚠ Die graue Flaeche dahinter BLEIBT. Karsten: "Ich muss irgendwas machen,
   bevor ich auf die Seite komme. Das finde ich eigentlich gut." */
.lp-cookie {
  position: fixed;
  /* ⚠ `inset` erst ab Safari 14.1 (2021). Fällt es aus, säße dieses Fenster
     irgendwo statt über der Seite — bei einer Sperre der schlechteste Ausfall,
     den es gibt. Die vier Einzelangaben kosten nichts und kennt jeder Browser. */
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  background: rgba(51, 51, 51, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lp-cookie.ist-offen { opacity: 1; }

/* ⛔ DIE KNÖPFE STEHEN FEST, DER TEXT SCROLLT (§455).
   Gemessen im Querformat 812 x 375: Platte 323 px hoch, Inhalt 552 px — „Alle
   annehmen" und „Alle ablehnen" lagen unter dem Rand. Bei einem Fenster, das
   die Seite sperrt, ist das kein Schönheitsfehler, sondern eine Sackgasse. */
.lp-cookie__platte {
  width: 560px;
  max-width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.35);
  transform: translateY(10px);
  transition: transform 0.25s ease;
}
.lp-cookie.ist-offen .lp-cookie__platte { transform: none; }
/* 🔴 DER SCHWARZE RAND UM DEN SCHALTER (05.09.2026, §454)
   Karsten: "Das ist ein schwarzer dicker fetter Rand, den einfach wegmachen,
   das ist einfach eklig." ⛔ URSACHE: Beim Aufmachen sprang der Fokus auf das
   ERSTE Bedienelement — und das ist das Kaestchen der Reichweitenmessung. Ein
   per Skript gesetzter Fokus zaehlt in Safari und Chrome als
   Tastaturfokus, also zog `:focus-visible` seinen Ring um den Schalter.
   ✅ Der Fokus geht jetzt auf die Platte selbst (`tabindex="-1"`), damit
   Vorleseprogramme trotzdem im Fenster landen — und die zeigt keinen Rand.
   ⛔ Den Ring am Schalter NICHT loeschen: Wer mit der Tabulatortaste bedient,
   muss sehen, wo er steht. Er kommt jetzt nur noch dann. */
.lp-cookie__platte:focus,
.lp-cookie__platte:focus-visible { outline: none; }

.lp-cookie h2 { font-family: var(--font-heading); font-size: 20px; line-height: 28px; margin: 0 0 10px; }
.lp-cookie__vorspann,
.lp-cookie__fuss { font-size: 13px; line-height: 22px; color: var(--text-grey); margin: 0; }
.lp-cookie__fuss { margin-top: 18px; }

.lp-cookie__zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--light-grey);
  cursor: pointer;
}
.lp-cookie__zeile:first-of-type { border-top: 1px solid var(--light-grey); margin-top: 18px; }
.lp-cookie__text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.lp-cookie__text strong { font-size: 14px; color: var(--black); }
.lp-cookie__text span   { font-size: 12px; line-height: 19px; color: var(--text-grey); }
.lp-cookie__immer { font-size: 12px; color: var(--office-green-text); white-space: nowrap; }

/* Der Schalter — die Kästchen selbst bleiben bedienbar, aber unsichtbar. */
.lp-cookie__zeile input { position: absolute; opacity: 0; width: 0; height: 0; }
.lp-cookie__schalter {
  flex: none;
  width: 44px; height: 24px;
  border-radius: 12px;
  background: var(--light-grey);
  position: relative;
  transition: background 0.2s ease;
}
.lp-cookie__schalter::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--white);
  transition: transform 0.2s ease;
}
.lp-cookie__zeile input:checked ~ .lp-cookie__schalter { background: var(--office-blue); }
.lp-cookie__zeile input:checked ~ .lp-cookie__schalter::after { transform: translateX(20px); }
.lp-cookie__zeile input:focus-visible ~ .lp-cookie__schalter { outline: 2px solid var(--office-blue); outline-offset: 3px; }

.lp-cookie__inhalt { overflow-y: auto; min-height: 0; }
.lp-cookie__knoepfe { flex: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lp-cookie__fuss { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-cookie, .lp-cookie__platte, .lp-cookie__schalter, .lp-cookie__schalter::after { transition: none; }
}
@media (max-width: 720px) {
  .lp-cookie { align-items: center; justify-content: center; }
}
/* Auf Papier hat ein Cookie-Fenster nichts zu suchen. */
@media print {
  .lp-cookie { display: none !important; }
}
@media (max-width: 560px) {
  .lp-cookie__platte { padding: 22px; }
  .lp-cookie__knoepfe .btn-ghost { flex: 1 1 100%; }
}


/* ==========================================================================
   ERKLÄRTEXTE DER DOWNLOADSEITEN ABSCHALTEN (§535, 08.09.2026)

   🔴 KARSTEN: „Wenn ich den Schalter drücke, entfernt der grundsätzlich alle
      Erklärtexte von diesen Downloadseiten … Der Strich, den ich meinte, muss
      dann auch weg, den brauche ich dann nicht mehr."

   ⛔ ERKANNT WIRD AN DER TRENNLINIE, NICHT AN EINER LISTE. `:has(~ …)` wählt
      alles, was VOR dem Strich steht — egal wie die Seite aufgebaut ist.
      ✅ Damit greift die Regel auf jeder künftigen Downloadseite von selbst.
      ⚠ Bei REFA und SIPOC steht vor dem Strich noch eine Grafik-Sektion. Ein
        Selektor nur auf `header` hätte die stehen lassen — nachgemessen.
      ⚠ `:has()` können Safari seit 15.4 und Chrome seit 105. Fehlt es, bleibt
        der Erklärtext einfach stehen: unschön, aber nichts geht kaputt.
   ⛔ Die Klasse setzt der Server (`body_class`), nicht ein Skript — sonst
      blitzte der Text bei jedem Aufruf kurz auf (§510).
   ========================================================================== */
/* ⛔ NUR DER TRENNER AUF OBERSTER EBENE (08.09.2026, beim Nachmessen gefunden):
   Das 5S-Audit hat DREI Trennlinien — eine trennt Erklärung vom Werkzeug, zwei
   liegen tiefer im Auditbogen selbst und gehören dorthin. Ohne das `>` hätte
   die Regel auch die beiden inneren weggenommen. */
body.lp-dl-kurz .lp-inhalt > *:has(~ hr.lp-oee__trenner),
body.lp-dl-kurz .lp-inhalt > hr.lp-oee__trenner { display: none; }

/* ⛔ UND DIE SPALTEN MÜSSEN SOFORT EINGEHAKT SEIN (Karsten, 08.09.2026):
   „Die sind noch gar nicht ganz oben. Wenn ich nach unten scrolle, scrollen die
   immer noch ein bisschen weiter oben ran und dann haken sie erst ein. Die
   sollen ganz oben sein und schon eingehakt an der Stelle."

   ⛔ GEMESSEN, nicht geschätzt: `.lp-inhalt` beginnt bei **125 px**, die
      klebende Spalte (`.lp-oee__kleber`) sitzt bei **155** und klebt erst ab
      **95**. Macht 60 px, die man erst wegscrollen muss — mit Erklärtext fällt
      das nicht auf, ohne ihn steht es sofort ins Auge.
   ✅ Ohne Erklärteil beginnt der Inhalt bei 95 px. Der Seitenkopf endet bei
      85 px, es bleiben also 10 px Luft — dieselben 10, mit denen der
      Klebewert 95 gerechnet ist. Damit sitzt die Spalte von Anfang an dort,
      wo sie beim Scrollen kleben würde.
   ⚠ Wer den Kopf höher macht, muss BEIDE Zahlen anfassen: hier und `top: 95px`
     in `oee.css`. */
/* ⛔ NUR AUF SEITEN MIT TRENNLINIE (08.09.2026, Karsten sah es sofort):
   Ohne die Bedingung galt der Abstand AUCH auf der Übersicht — dort entstand
   „ein riesengroßer Abstand zwischen Alle Elemente und der Linie oben". Die
   Übersicht hat keine Trennlinie, also fasst die Regel sie jetzt nicht an. */
body.lp-dl-kurz .lp-inhalt:has(> hr.lp-oee__trenner) { padding-top: 95px; }
/* ⚠ Die 30 px Innenabstand der Ergebnisspalte halten sonst Abstand zur
   Trennlinie — die es ohne Erklärteil gar nicht mehr gibt. Ohne sie sitzt die
   klebende Spalte genau auf ihrem Klebewert und ist von Anfang an eingehakt.
   Gemessen: Kleber vorher bei 155, dann 125, jetzt 95 = `top: 95px`. */
body.lp-dl-kurz .lp-oee__raster > * { padding-top: 0; }
body.lp-dl-kurz .lp-oee__raster,
body.lp-dl-kurz .lp-oee__kleber { margin-top: 0; }

/* ---------- Der Schalter über den Karten ---------- */
/* 🔴 MASSE 1:1 VON LEANOS PREISSCHALTER (`Leano/Webseite/css/preise.css`).
   Nur die Zeit ist anders: 500 ms statt 200, ausdrücklich angesagt.

   ⛔ DER KASTEN DARUNTER WIRD NICHT ANGETASTET (Karsten, 08.09.2026):
      „Warum steht das nicht unter Alle Elemente? Warum sind die Vorschaubilder
      auf einmal weiter nach unten gedrückt? Das war doch gut! Sollte einfach
      nur ein Button rechts danebenrein."
      Mein erster Anlauf machte `.lp-dl-lage` zum Raster — dadurch wurde die
      erste Zeile so hoch wie der Schalter samt Satz, die Überschrift rutschte
      in die Mitte, die Sätze darunter nach unten und die Karten hinterher.
   ✅ Jetzt liegt der Schalter ABSOLUT daneben. Er nimmt keinen Platz im Fluss,
      also bleibt der Kasten Zeile für Zeile so, wie er war.
   ⚠ `top: 52px` ist kein geratener Wert: `.lp-dl-lage` hat `padding-top: 52px`
     (downloads.css), und ein absolut gesetztes Kind beginnt an der Oberkante
     des Innenabstands — nicht an der des Textes. Ohne die 52 sass es genau um
     diesen Betrag zu hoch. */
.lp-dl-lage { position: relative; }
/* ⛔ NUR DER KASTEN WIRD GESETZT, NICHT DIE GELBE MARKE (Karsten, 08.09.2026:
     „der Zugang möglich, der klebt da drüber. Der muss unten drunter sein, ein
     bisschen Abstand. Das ist hässlich.").
     Die Marke steht INNERHALB des Kastens. Stand sie mit in dieser Regel, bekam
     sie dasselbe `top: 52px` — gerechnet ab dem Kasten, der ja selbst absolut
     steht. Sie landete damit auf dem Erklärsatz. Als Kind im Fluss setzt der
     Kasten sie von selbst darunter. */
.lp-dlk-feld {
  position: absolute; right: 0; top: 52px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  max-width: 330px;
}
/* ⚠ Die Überschrift ist 36 px hoch (28 px bei 1,3). Der Schalter misst 27 px —
   die knapp 5 px Versatz heben ihn auf die Textmitte. */
.lp-dlk-feld { padding-top: 4px; }

.lp-dlk-satz {
  margin: 0 !important;
  font-size: 12px; line-height: 1.5;
  /* ⚠ „Der Erklärtext, der darunter ist, sollte ein bisschen hellgrau sein."
     ⛔ NICHT `--light-grey` (#d0d0d0): Auf Weiss gemessen rgb(208,208,208) —
        das ist als Fliesstext kaum noch lesbar und fiele beim Seitencheck als
        zu schwacher Kontrast auf. `--dark-grey` (#999) ist heller als das
        bisherige #6e6e6e und bleibt lesbar; es ist dasselbe Grau wie in der
        Fusszeile. */
  color: var(--dark-grey) !important;
  text-align: right;
}

.lp-dlk {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 14px/27px var(--font-body); color: var(--black);
}
.lp-dlk__wort { white-space: nowrap; }
.lp-dlk__wippe {
  position: relative; flex: none; box-sizing: border-box;
  width: 44px; height: 22px;
  border: 1px solid var(--dark-grey); border-radius: 11px; background: transparent;
}
.lp-dlk__knopf {
  position: absolute; top: 1.5px; left: 1.5px;
  width: 17px; height: 17px; box-sizing: border-box;
  border: 1px solid var(--dark-grey); border-radius: 50%; background: var(--white);
  transition: left 500ms cubic-bezier(.22,.61,.36,1);
}
.lp-dlk[data-an="1"] .lp-dlk__knopf { left: 23.5px; }
/* ⚠ Ohne Zugang steht der Schalter grau da — sichtbar, aber nicht schaltbar.
   Karsten: „Man muss sehen, dass es geht." */
.lp-dlk--gesperrt { cursor: default; opacity: .55; }
.lp-dlk--gesperrt .lp-dlk__wippe { border-color: var(--light-grey); }
.lp-dlk--gesperrt .lp-dlk__knopf { border-color: var(--light-grey); }
/* ⚠ `margin-top` kommt zum `gap: 8px` des Kastens dazu — zusammen 14 px Luft
     zwischen Erklärsatz und gelber Marke. Karsten wollte „ein bisschen
     Abstand", nicht klebend. */
.lp-dlk-sperre { white-space: nowrap; margin-top: 6px; }

@media (max-width: 1100px) {
  /* ⚠ Schmal ist neben der Überschrift kein Platz — dann in den Fluss, unter
     die Überschrift. Erst hier wird der Kasten überhaupt angefasst. */
  /* 🔴 UNTEN FEHLTE DIE LUFT (Karsten, 08.09.2026): „Er hat auf der mobilen
     Version nicht genügend Abstand unten zur Überschrift, der ist viel zu
     dicht dran — sowohl als Gast als auch mit Zugang."
     ⛔ Der Kasten steht IM QUELLTEXT VOR der Überschrift; sobald er hier in
        den Fluss rutscht, sitzt er also darüber. Oben hatte er 14 px, unten
        gar nichts — die Überschrift klebte daran.
     ⚠ 28 px ist das Doppelte des oberen Abstands und bleibt im Raster der
        Seite (die Zahl darunter hat ebenfalls 14 px). Es gilt für beide
        Zustände: Der Abstand hängt am Kasten, nicht an seinem Inhalt — die
        gelbe Marke der Gäste steht innerhalb desselben Kastens. */
  .lp-dlk-feld {
    position: static; align-items: flex-start; margin: 0 0 33px; max-width: none;
  }
  .lp-dlk-satz { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-dlk__knopf { transition: none; }
}

/* ---------- Die Vorschaubilder rutschen hoch ---------- */
/* 🔴 KARSTEN, 08.09.2026, zum dritten Mal: „Ich möchte, dass das vorhandene
   Vorschaubild einfach nach oben rutscht und dann nur noch den unteren Teil
   zeigt … und dann richtig oben in der Position ist. Mehr nicht."

   ⛔ ZWEI ANLÄUFE WAREN FALSCH und sind zurückgebaut: die Seite neu
      fotografieren (anderes Layout) und zwei Bilder übereinanderlegen (wirkten
      „gequetscht").
   ✅ Jetzt trägt die Karte EIN Bild, das höher ist als ihr Rahmen. Es wird
      GESCHOBEN, nicht ausgeschnitten: volle Breite, eigene Höhe, der Rahmen
      schneidet ab. Oben der Erklärteil, unten das Werkzeug.

   ⛔ ERST STAND HIER `object-fit: cover` MIT `object-position` — das war
      falsch, und Karsten hat es sofort gesehen: „Es schiebt tatsächlich nach
      oben, aber es schiebt halt nicht bis zur Linie."
      Der Grund: Wie viel Seite ein Rahmen zeigt, hängt von seiner Breite ab.
      Der Kasten ist zwar 3:4, aber `padding: 15px` und `border: 1px` sind
      absolut — bei 1440 px Fenster zeigt er 1986 px Seite, bei 1200 px schon
      2011, bei 1280 nur 1777. Mit `object-position: bottom` müsste das Bild
      für JEDE Breite eine andere Höhe haben. Geht nicht.
   ✅ `translateY` in Prozent rechnet gegen die EIGENE Höhe des Bildes, und die
      wächst mit der Rahmenbreite mit. Derselbe Prozentwert trifft deshalb bei
      jeder Fensterbreite dieselbe Stelle im Blatt — die Trennlinie.
      Den Wert setzt `teil-dl-karte.php` je Karte als `--lp-schub`; er folgt
      allein aus der Bildhöhe (unter der Linie liegen immer 700 Bildpunkte).
   ⚠ NUR Bilder mit `data-lang`. Ohne langes Bild bleibt `contain` aus
     `dl-karte.css` stehen und alles sieht aus wie vorher. */
.lp-dl-karte__bild img[data-lang] {
  /* ⛔ `height: auto` ist der Kern: Damit ist die Bildhöhe proportional zur
     Rahmenbreite — und nur deshalb trifft ein fester Prozentwert immer. */
  height: auto;
  object-fit: fill;
  transform: translateY(0);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
body.lp-dl-kurz .lp-dl-karte__bild img[data-lang] {
  transform: translateY(var(--lp-schub, 0%));
}
/* 🔴 DER WEISSE RAND OBEN MUSS WEISS BLEIBEN (Karsten, 08.09.2026: „Ich sehe
   oben immer noch den Teil, wo noch die Erklärung drin ist … mit einer weissen
   Box nochmal zusätzlich ausblenden").
   ⛔ Der Rahmen hat 15 px weissen Innenabstand, das Bild beginnt darunter. Der
      Kasten schneidet aber erst an seiner Kante ab — sobald das Bild hochfährt,
      rutscht der Erklärtext GENAU in diesen weissen Streifen und bleibt dort
      als Rest stehen. Im Ruhezustand fällt das nicht auf, weil dort nichts
      hinaufragt.
   ✅ Ein weisses Feld über dem Innenabstand. Es liegt nur auf dem Rand, nie auf
      dem Inhalt: Es endet dort, wo das Bild anfängt.
   ⚠ Es braucht KEINE Ein-/Ausblendung. Im Ruhezustand ist die Fläche ohnehin
     weiss — sichtbar wird sie erst, wenn Inhalt darunterfährt, und dann soll sie
     schon dasein. So schiebt sich das Blatt unter den Rand, statt am Rand zu
     erscheinen und dann überdeckt zu werden.
   ⚠ `inset: 0 0 auto` bleibt INNERHALB des Rahmens — die graue Umrandung und
     die runden Ecken bleiben unberührt (`overflow: hidden` am Kasten). */
.lp-dl-karte__bild--bild:has(img[data-lang])::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 15px;
  background: #fff; z-index: 2; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .lp-dl-karte__bild img[data-lang] { transition: none; }
}