/* =============================================================================
   LINKINBIO-MENUE.CSS — Optik des neuen linken Menues fuer Link in Bio
   (Paket P1+P2+P3+P4+P5 des Menue-Umbaus, 05.-06.08.2026 — P2 ergaenzt: Grenz-/
   Deaktiviert-Zustand der „+"-Eintraege, die Dialog-Bausteine der Seiten-
   Sicht/Link-Karte (.libm-dialog/.libm-fld/.libm-hk*, ganz unten) und die
   Auflagen C3/C6/D der Opus-Kontrolle zu P1 — jeweils an ihrer Stelle
   einzeln kommentiert. P3 ergaenzt ganz unten die Gruppe „Übergang &
   Bewegung" (.libm-abschnitt*, .wv-tile-opt[disabled]) — die Kacheln selbst
   (.wv-tiles/.wv-tile-opt) und das eingebettete Dreheffekt-Stueck (.fxe-*)
   sind KEINE neuen Klassen, sie kommen fertig aus basis.css bzw. aus dem
   <style>-Block der Eingangsdatei (Design-Gesetz §10c bzw. bestehende
   Wiederverwendung, siehe linkinbio-menue.js, uebergangHTML). P5 (06.08.2026)
   ergaenzt .libm-rueckweg (Rueckweg zur Plattform, weiter unten bei .libm-kopf)
   und raeumt die dash-menu.js-Ausblendregeln auf (siehe deren frueheren Platz
   ganz unten in dieser Datei) — dash-menu.js laedt seit P5 gar nicht mehr.)

   ZWECK: Nur die Zeichnung (Masse/Farben/Handy-Schublade). Die Datenliste und
   der Klick-Verteiler stehen in assets/js/linkinbio-menue.js — siehe dort fuer
   die Begruendung des Aufbaus. Diese Datei zeichnet NUR, wenn <html> die
   Klasse .pp-menue-neu traegt. Bis P5 stand diese Klasse hinter der Weiche
   ?menue=neu; seit P5 setzt die Eingangsdatei sie IMMER (das Menue ist
   Standard) — die Klasse selbst blieb bewusst unveraendert (siehe deren
   Kommentar in der Eingangsdatei), nur ihre Bedingung ist entfallen.

   VORBILD: das linke Menue des Rechnungsprogramms (assets/js/dash-menu.js,
   Klassen .dash-side/.dash-item/.dash-burger/.dash-back), festgehalten im
   Design-Gesetz §5a/§16 (uebergabe/design-gesetz/MASCHINE.md). GLEICHE Masse,
   GLEICHE --p-*-Token — aber EIGENE Klassennamen (Praefix libm-, „Link in
   Bio Menue"), bewusst NICHT die dash-*-Namen von dash-menu.js:
     Radar (radar-geruest.js/radar-optik.css) durfte die dash-*-Namen
     wiederverwenden, weil eine Radar-Seite dash-menu.js NIE gleichzeitig
     laedt. Diese Seite hier tut das im Programm-Kontext (?kontext=programm)
     SEHR WOHL noch (P1 laesst dash-menu.js unangetastet) — mit identischen
     Klassennamen liesse sich „das andere Menue verstecken, meines zeigen"
     nicht mehr eindeutig per Selektor ausdruecken (siehe die Ausblend-Regeln
     ganz unten). Eigene Namen loesen das sauber, ohne dash-menu.js
     anzufassen (Tabu: gemeinsame Datei, 30 Seiten haengen daran).

   TOKEN: ausschliesslich var(--p-*) aus basis.css (das diese Seite laedt,
   Eingang Z. 26). Keine eigenen Hex-Farben, keine --dm-*-Zwischenvariablen
   wie bei dash-menu.js noetig — die sind dort nur ein Fallback fuer Seiten
   OHNE basis.css; diese Seite hat es immer geladen, also braucht es den
   Umweg nicht. Damit gilt Hell UND Dunkel automatisch mit (auch wenn die
   Eingangsdatei data-theme heute fest auf "light" haelt und keinen
   Umschalter zeigt — s. Auftrag: kein Theme-Schalter in P1). */

/* ---------------------------------------------------------------- Grundlage */
.libm-side, .libm-burger, .libm-back { box-sizing: border-box; }
.libm-side *, .libm-burger * { box-sizing: border-box; }

/* Nur im aktiven Zustand (?menue=neu) ueberhaupt Platz fuer die 230px
   reservieren. Ohne die Klasse existieren die Elemente gar nicht im DOM
   (siehe linkinbio-menue.js) — diese Regel ist daher reiner Vollstaendigkeits-
   Schutz, falls einmal Markup vor dem Skript-Lauf kurz aufblitzen sollte. */
@media (min-width: 1001px) {
  html.pp-menue-neu body.plattform { margin-left: 230px; }
}

/* ----------------------------------------------------------------- Seitenleiste */
.libm-side {
  position: fixed; left: 0; top: 0; bottom: 0; width: 230px; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--p-surface); color: var(--p-fg);
  border-right: 1px solid var(--p-line);
  font-family: var(--p-font);
  transition: left .22s ease;
}

/* ---- P5: Rueckweg zur Plattform (06.08.2026), nur im Programm-Kontext ----
   Ersatz fuer dash-menu.js' angepinnten "Dashboard"-Punkt, seit die
   Eingangsdatei dash-menu.js nicht mehr laedt (siehe deren Kommentar
   "DASH-MENU.JS STILLGELEGT"). Bewusst GEDAEMPFT (--p-muted, kein eigenes
   Icon-Gewicht) und ALS ERSTES Element vor .libm-kopf: es ist ein Ausgang
   aus diesem Projekt, keine Einstellung darin -- optisch wie ein
   Breadcrumb, nicht wie ein weiterer Menuepunkt. */
.libm-rueckweg {
  display: flex; align-items: center; gap: .4rem; margin: .7rem .9rem 0;
  padding: .3rem 0; font: 600 .78rem/1.2 var(--p-font); color: var(--p-muted);
  text-decoration: none;
}
.libm-rueckweg svg { width: 15px; height: 15px; flex: none; }
.libm-rueckweg:hover { color: var(--p-accent-text); }
.libm-rueckweg:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; border-radius: 6px; }

/* ---- Kopf: Projektname (Design-Gesetz §19) — Regeln .libm-kopf/__lbl/__val
   ENTFERNT (Runde 15, 09.08.2026, Befund 2: Max' Auftrag, siehe
   seiteInnerHTML()/linkinbio-menue.js fuer die Begruendung). Die frei
   gewordene Flaeche braucht keinen Ersatz -- .libm-scroll/.libm-grp bringen
   ihr eigenes Kopf-Polster bereits mit, die Seiten-Liste ruedt automatisch
   nach oben nach. Die zugehoerige Schublade-Polster-Regel steht bei
   .libm-side.is-open weiter unten, ebenfalls entfernt (Ziel-Klasse gibt es
   nicht mehr) -- .libm-rueckweg traegt seine eigene, unveraenderte
   Polster-Regel dort unabhaengig davon weiter. */

/* ---- ".libm-pub" (Kopf-Knopf "Online stellen"/spaeter "Veröffentlichen")
   ENDGUELTIG ENTFERNT (08.08.2026, Umbau „Moeglichkeit 1", Max' Auswahl aus
   menue-entwurf/links-veroeffentlichen-entwuerfe.html: "ein zu grosses
   Durcheinander" aus VIER Einstiegen fuer dieselbe Sache soll EINER werden).
   Der Kopf-Knopf war einer davon. Ersatz: die EINE Zeile "Meine Links" mit
   Zustands-Pille weiter unten (.libm-mlpille, bei .libm-it[aria-current]) —
   kein zweiter gefuellter oranger Knopf im Kopf mehr noetig (Design-Gesetz
   §3/§6, EINER pro Flaeche: das ist seither "Link erstellen"/"Kopieren" im
   Zustandskasten des Fensters selbst, siehe linkinbio-menue.js). */

/* ---- Scroll-Bereich mit den Eintraegen ---- */
.libm-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 .6rem .5rem; }

/* MAN SIEHT JETZT, DASS ES WEITERGEHT (15.08.2026, Rundumcheck-Befunde 10+27)
   ---------------------------------------------------------------------------
   GEMESSEN (Puppeteer, 320x584, elementFromPoint auf jeden Menuepunkt): die
   Liste ist 265px hoch bei 460px Inhalt — und FUENF Punkte („Alle Bilder",
   „Seiteneinstellungen", „Datenschutz", „Schnellzugriff", „Vorschau") waren
   ohne Rollen nicht erreichbar. Der Schnitt oben und unten war dabei hart:
   keine Trennlinie, kein Verlauf, kein Schatten (`mask:none`, `box-shadow:
   none` gemessen) — die Liste sah aus, als sei sie zu Ende.
   ACHTUNG, EIGENE FEHLMESSUNG (festgehalten, damit sie nicht wiederkommt):
   Ein erster Durchgang meldete „alle Punkte sichtbar", weil er nur
   `top >= 0 && bottom <= innerHeight` geprueft hatte. Die Punkte STEHEN dort,
   sie sind nur aus dem Rollfenster herausgeschnitten. Nur elementFromPoint
   zeigt, was wirklich zu treffen ist.
   DER SCHATTEN, NICHT DAS LAYOUT: An Max' Aufteilung (fester Fussblock mit
   „Womit du arbeitest"/„Vorschau zeigen als"/Hell-Dunkel/Zuruecksetzen) wird
   NICHTS geaendert — die ist so gewollt. Es fehlte nur der Hinweis, dass die
   Liste weitergeht. Technik: die beiden `local`-Verlaeufe liegen fest am
   Inhalt und decken den Schatten ab, solange man am Anfang bzw. Ende steht;
   die beiden `scroll`-Schatten haengen am Rahmen. Ergebnis: der Schatten
   erscheint von selbst NUR, wenn in dieser Richtung wirklich noch etwas
   kommt — ohne eine Zeile JavaScript und ohne Messung der Hoehe.
   Die Deckfarbe muss dieselbe sein wie der Menue-Hintergrund (--p-surface),
   sonst blitzte oben und unten ein heller Streifen auf; im Dunkelmodus zieht
   der Token von selbst mit. */
.libm-scroll {
  background:
    linear-gradient(var(--p-surface) 30%, transparent) top    / 100% 16px no-repeat local,
    linear-gradient(transparent, var(--p-surface) 70%) bottom / 100% 16px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(17,26,46,.16), rgba(17,26,46,0)) top    / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(17,26,46,.16), rgba(17,26,46,0)) bottom / 100% 9px no-repeat scroll;
}

/* Seiten-Aktionsmenue (07.08.2026): Abstand zwischen den Zeilen von
   "Deine Seiten" (ID-Selektor). VERALTETER HINWEIS HIER KORRIGIERT
   (Opus-Kontrolle, Runde 4, 07.08.2026 abends): dieser Kommentar behauptete
   bis eben noch, "Deine Links" bleibe mit Null-Abstand unberuehrt — das
   stimmte fuer Runde 2, ist aber seit Runde 3 ("Links auch ein Aktionsmenue
   geben") ueberholt: #libmLinkListe weiter unten traegt seit Runde 3
   DIESELBEN 16px, aus demselben Grund (siehe dortiger, eigener Kommentar).
   Grund: der Drei-Punkte-Knopf jeder Zeile (.libm-it__mehr
   weiter unten) vergroessert seine Trefferflaeche unsichtbar per ::before
   ueber die eigene Zeilenhoehe (33px) hinaus, um die angestrebten 44x44px zu
   erreichen (Design-Gesetz-Auftrag, Vorbild .ms4sl-kachel::before in
   link-in-bio-konfigurator-eingang.html) — GEMESSEN (siehe Bau-Bericht):
   33px Zeile, 24px sichtbarer Knopf ergibt 5.5px noetigen Ueberstand JE SEITE
   ueber die eigene Zeile hinaus.
   ECHTER MESSFEHLER, HIER KORRIGIERT (Puppeteer-Ecken-Probe,
   test-seiten-aktionsmenue.js Abschnitt 7, erster Bauversuch mit 8px): 8px
   schien auf den ersten Blick zu reichen (5.5 < 8), UEBERSAH aber, dass die
   naechste Zeile aus der ANDEREN Richtung ebenfalls 5.5px in DENSELBEN
   Zwischenraum hineinragt — zwei Zeilen teilen sich EINEN Zwischenraum, macht
   zusammen 5.5+5.5=11px Bedarf, nicht 5.5px. Bei nur 8px ueberlappten sich
   die beiden ::before-Flaechen benachbarter Knoepfe um 3px; da beide
   position:relative sind (kein z-index), gewinnt bei einer Ueberlappung die
   SPAETERE im Quelltext (die naechste Zeile) — ein Tipp knapp unter Zeile N
   haette darum manchmal das Aktions-Fenster von Zeile N+1 geoeffnet statt
   das gemeinte. GEMESSEN (elementFromPoint Zeile-fuer-Zeile von y=280..306):
   der tatsaechliche Umschlagpunkt lag bei y=296/297, nicht bei den
   errechneten 300 — genau die fehlenden 3px. ERSTE KORREKTUR: 12px (deckt
   die errechneten 11px Bedarf, aber nur mit 0.5px Sicherheitsspanne je Seite).
   ZWEITE KORREKTUR (Opus-Kontrolle, W1, 07.08.2026): 0.5px ist eine
   Rechen-, keine Bau-Reserve — jede kuenftige Verschiebung von Zeilenhoehe
   (33px), Knopfgroesse (24px) oder dem ::before-inset (-10px) haette den
   3px-Diebstahl unbemerkt wieder hergestellt, und schon gewoehnliche
   Sub-Pixel-Rundung (Zoom, Schriftmetrik, Geraete-Pixel-Verhaeltnis) haette
   0.5px auffressen koennen. 16px statt 12px: deckt dieselben 11px Bedarf
   jetzt mit 2.5px echter Spanne je Seite — eine bewusste Gestaltungs-
   entscheidung (siehe test-seiten-aktionsmenue.js, Kanten-Kapitel: dort
   erzwingt eine 0.25px-Abtastung zusaetzlich, dass ein kuenftiger Ruecksprung
   auf zu wenig Abstand sofort als roter Test auffaellt, nicht erst bei einer
   erneuten Handmessung). Optik nach der Aenderung erneut geprueft (Screenshot
   im Bau-Bericht) — 4px mehr je Zwischenraum bei 33px Zeilenhoehe bleiben
   unauffaellig.
   NACHBESSERUNG 08.08.2026 (Befund, Max mit Bild: "der Abstand zwischen den
   Eintraegen ist zu gross"): 16px -> 12px. Die harte Untergrenze aus der
   Rechnung oben bleibt UNVERAENDERT 11px (5.5px Ueberstand JE SEITE, zwei
   Zeilen teilen sich den Zwischenraum) -- 12px behaelt davon 1px echte
   Spanne je Seite, WENIGER als die vorherigen 2.5px, aber nicht null. Diese
   Zahl ist NICHT nur nachgerechnet, sondern per elementFromPoint an allen
   vier Ecken beider betroffener Elemente (Zeile UND Drei-Punkte-Knopf, siehe
   Bau-Bericht) nachgemessen -- exakt die im Projekt dokumentierte Lektion
   ("miss die Ecken nach, glaub nicht die Rechnung"), die schon den 8px- und
   12px-Fehlversuch von 07.08.2026 aufgedeckt hatte.

   NACHBESSERUNG RUNDE 15 (09.08.2026, Befund 3, Max mit Bild: "im linken
   Menue ist zu viel Abstand... als Beispiel weiter unten 'Gilt fuer alle
   Seiten' -- dort stimmt der Abstand"): eigene Nachmessung (Puppeteer,
   getBoundingClientRect) bestaetigte exakt die 11px-Untergrenze von oben
   UND ergab fuer "Gilt fuer alle Seiten" (.libm-it direkt in .libm-scroll,
   ohne .libm-sub-Huelle) ein GAP VON 0 -- dort stapeln die Zeilen ohne
   jeden Zwischenraum, ihr einziger "Abstand" ist das eigene Innenpolster
   von .libm-it (.5rem oben/unten). Ein reines Absenken auf 0 waere HIER
   NICHT sicher moeglich (0 < 11px-Untergrenze, der Mehr-Knopf jeder Zeile
   braucht seine vollen 44px, siehe .libm-it__mehr) -- LOESUNG: statt die
   fehlenden 5.5px je Seite weiter aus dem (jetzt entfallenden) Zwischenraum
   zu leihen, bekommt jede Zeile ihre 44px komplett in der EIGENEN Hoehe
   (min-height auf .libm-it-zeile, siehe zwei Regeln unten) -- der
   44px-Trefferbereich des Mehr-Knopfs liegt dann exakt bündig mit dem
   eigenen Zeilenrand, nicht mehr im Zwischenraum zur Nachbarzeile. Damit
   wird gap:0 (identisch zu "Gilt fuer alle Seiten") ohne jeden Verlust an
   Trefferflaeche moeglich. Die um Xpx groessere Zeilenhoehe (33px -> 48px)
   ist bewusst NICHT auf die globale .libm-it-Klasse gelegt (haette auch
   "Gilt fuer alle Seiten" mitgezogen und dort ein Trefferflaechen-Problem
   geloest, das dort nie bestand) -- die Regel darum ausdruecklich auf
   #libmSeitenListe .libm-it-zeile eingegrenzt.
   NACHGEMESSEN, NICHT NUR GERECHNET (zweite Nachbesserung, noch in Runde
   15): 44px exakt (rechnerisch bündig) bestand die eigene Ecken-Probe,
   fiel aber bei der VORHANDENEN Dauer-Testreihe durch (Abschnitte 10/11,
   "Kantenabtastung" mit 0.25px-Schritt) -- bei exakt 44px liegt die
   44px-Trefferzone eines Mehr-Knopfs bündig auf der eigenen Zeilengrenze,
   und exakt AUF dieser gemeinsamen Grenzlinie zweier Nachbarzeilen ist das
   Messergebnis eines einzelnen Bildpunkts (elementFromPoint) nicht mehr
   verlaesslich der einen oder anderen Zeile zuzuordnen (Rundung/Sub-Pixel).
   48px (statt 44px) schafft 2px echten Puffer je Seite zwischen den
   44px-Trefferzonen zweier Nachbarzeilen -- danach bestehen 10/11 wieder
   sauber (Bau-Bericht Runde 15). Werte-Tabelle fuer das Design-Gesetz siehe
   Bau-Bericht. */
#libmSeitenListe { display: flex; flex-direction: column; gap: 0; }
#libmSeitenListe .libm-it-zeile { min-height: 48px; }

/* "Deine Links" bekommt denselben Abstand aus demselben Grund (07.08.2026
   abends, Max' Entscheidung "Links auch ein Aktionsmenue geben" — Anlass war
   ausgerechnet die sichtbare Uneinheitlichkeit, die die 16px oben ohne dieses
   Gegenstueck hinterliessen: "Deine Seiten" luftig, "Deine Links" bündig im
   selben Menue). Die Rechnung ist IDENTISCH (Zeile 33px, Knopf 24px, dieselbe
   .libm-it__mehr-Klasse mit demselben ::before-inset -10px, siehe deren
   Kommentar weiter unten) — kein zweites Mass noetig, kein eigener
   Korrektur-Roman: der Ableitungsweg oben bei #libmSeitenListe gilt
   unveraendert auch hier. NACHGEMESSEN fuer die Link-Spalte eigens (nicht nur
   angenommen, weil die Formel gleich aussieht) — siehe test-seiten-
   aktionsmenue.js, Kanten-Kapitel Links. */
#libmLinkListe { display: flex; flex-direction: column; gap: 16px; }

.libm-grp {
  /* AUFLAGE D (Opus-Kontrolle P1): Design-Gesetz §5a / dash-menu.js
     (.dash-grp__hd, assets/js/dash-menu.js Z. ~167) schreiben .72rem/.05em
     vor — das Muster-Blatt (menue-umbau-plan.html, #b-muster .grp) weicht
     mit .66rem/.07em davon ab; der Widerspruch ist erkannt und wird Max
     separat berichtet. Hier gilt das GESETZ, nicht das Muster.
     NACHBESSERUNG 08.08.2026 (Befund, Max mit Bild: "Abstand von der
     Ueberschrift zum ersten Eintrag ist zu klein"): unterer Wert .25rem
     (4px) -> 7px (+3px, Auftrag woertlich "um etwa 3 px vergroessern").
     .libm-grp ist die GETEILTE Kopf-Klasse fuer "Deine Seiten" UND "Gilt
     fuer alle Seiten" (dieselbe CSS-Quelle) -- die Vergroesserung gilt
     darum automatisch fuer beide, wie beauftragt ("gilt sinngemaess auch
     fuer die Liste unter 'Gilt fuer alle Seiten', falls dieselbe
     CSS-Quelle"). Bewusst px statt rem fuer NUR diesen einen Wert (Mischung
     in einem shorthand ist gueltiges CSS, an anderer Stelle dieser Datei
     ebenso ueblich, z. B. .libm-it__mehr): Max nannte die Aenderung in px,
     ein px-Wert macht die Absicht (+3px) direkt nachvollziehbar, ohne
     Rundung auf eine rem-Stufe. */
  padding: .55rem .5rem 7px; font: 700 .72rem/1 var(--p-font);
  letter-spacing: .05em; text-transform: uppercase; color: var(--p-muted);
}
/* Nachbesserung Befund 1 (Opus-Kontrolle Runde 5, 07.08.2026 spaet abends):
   "Deine Links" als Knopf (linksKopfHTML in linkinbio-menue.js) -- NUR fuer
   diese Gruppe, "Deine Seiten" bleibt der reine .libm-grp-<div> von oben
   unveraendert. Alle Schrift-/Abstands-/Farb-Eigenschaften von .libm-grp
   gelten unveraendert weiter (beide Klassen stehen gemeinsam auf demselben
   Element) -- hier NUR der Button-eigene Chrome-Reset + die interaktiven
   Zustaende, die ein <div> nie brauchte. border-radius/hover/focus-visible
   lehnen sich an .libm-it an (dasselbe Vokabular), nicht neu erfunden. */
.libm-grp--klick {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem;
  width: 100%; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
}
.libm-grp--klick svg { width: 13px; height: 13px; flex: none; color: var(--p-muted); }
.libm-grp--klick:hover { color: var(--p-accent-text); background: var(--p-surface-2); }
.libm-grp--klick:hover svg { color: var(--p-accent-text); }
.libm-grp--klick:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.libm-trenn { height: 1px; background: var(--p-line); margin: .5rem .35rem; }

/* ---- Menuepunkt (§5a: padding .5rem .5rem .5rem 1.2rem, Radius 8px,
   Schrift .9rem/600, Icon 17x17 --p-muted) ---- */
.libm-it {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .5rem .5rem .5rem 1.2rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--p-fg);
  font: 600 .9rem/1.2 var(--p-font); text-align: left; cursor: pointer;
}
.libm-it svg { width: 17px; height: 17px; flex: none; color: var(--p-muted); }
.libm-it span.libm-it__txt { flex: 1; min-width: 0; overflow-wrap: break-word; }
.libm-it:hover { background: var(--p-surface-2); }
.libm-it:hover svg { color: var(--p-accent); }
.libm-it:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }

/* Aktiv (§5a: Flaeche --p-accent-soft, Schrift --p-accent-text/700, orange
   Innenkante links) */
.libm-it[aria-current="page"] {
  background: var(--p-accent-soft); color: var(--p-accent-text); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--p-accent);
}
.libm-it[aria-current="page"] svg { color: var(--p-accent-text); }

/* ---- "Meine Links": Zustands-Pille rechts in der Zeile (08.08.2026, Umbau
   „Moeglichkeit 1" — Auftrag: "eine kleine Zustands-Pille rechts in der
   Zeile — online (grün getönt) bzw. offline (orange getönt), damit man den
   Zustand sieht, ohne zu klicken"). linkinbio-menue.js: meineLinksZeileHTML/
   meineLinksPilleHTML. .libm-it__txt traegt bereits flex:1 — die Pille
   braucht kein eigenes margin-left:auto, sie landet automatisch am Zeilenende.
   Farben nach Design-Gesetz §3 Statusfarben-Semantik: "online" nutzt
   --p-good (Gruen = erledigt) als getoenten Hintergrund per color-mix() (wie
   .libm-it--warn/.libm-badflaeche weiter unten dasselbe Rezept fuer Rot
   nutzen); "offline" nutzt dasselbe Orange-Paar (--p-accent-soft/-text), das
   diese Plattform bereits ueberall fuer "Sie sind dran" verwendet (u. a.
   .libm-it[aria-current] direkt darueber) — keine neue Farbkombination
   erfunden. */
.libm-mlpille {
  flex: none; font: 700 .68rem/1 var(--p-font); border-radius: 999px;
  padding: .18rem .5rem;
}
.libm-mlpille--on {
  background: color-mix(in srgb, var(--p-good) 16%, var(--p-surface));
  color: var(--p-good);
}
.libm-mlpille--off { background: var(--p-accent-soft); color: var(--p-accent-text); }

/* Kleinere Unterpunkte (Gruppen-Eintraege wie im Muster "it--klein") */
.libm-it--klein { padding-left: 1.2rem; font-size: .83rem; }
/* "+ Link anlegen" (und "Alle Links ansehen"): gedaempfter Ton — auch als
   echte, anklickbare Zeile am Ende von „Deine Links" (seit P2). "+ Seite
   kopieren" trug diese Klasse bis 08.08.2026 ebenso fuer „Deine Seiten",
   ist seither entfernt (siehe linkinbio-menue.js, Entfernungs-Vermerk bei
   den EINTRAEGEN) — „Deine Seiten" nutzt .libm-it--leise seither nicht
   mehr. */
.libm-it--leise { color: var(--p-muted); font-weight: 600; }
.libm-it--leise:hover { color: var(--p-fg); }
/* Grenze erreicht (5/5, P2): der Knopf bleibt sichtbar stehen (kein
   raetselhaftes Verschwinden, siehe die BEFUND-Kommentare zu varPillenHTML/
   varGruppeHTML im Motor), ist aber disabled — title/aria-label tragen die
   Begruendung (linkinbio-menue.js, linkNeuHTML). Galt bis 08.08.2026 ebenso
   fuer Seiten (seiteNeuHTML) — seit deren Entfernung lebt dieselbe
   Begruendung fuer Seiten stattdessen im Drei-Punkte-Aktionsfenster
   (.libm-aktion-it[disabled] weiter unten, seiteAktionenInhaltZeichnen). */
.libm-it[disabled] { cursor: default; opacity: .55; }
.libm-it[disabled]:hover { background: transparent; }

/* "Alles zuruecksetzen": eigene, gefaehrliche Farbe (Design-Gesetz: Rot nur
   fuer Gefahr/Fehler) */
.libm-it--warn { color: var(--p-bad); }
.libm-it--warn svg { color: var(--p-bad); }
.libm-it--warn:hover { background: color-mix(in srgb, var(--p-bad) 10%, transparent); }
.libm-it--warn:hover svg { color: var(--p-bad); }

/* ---- Fuss: Handy/Desktop-Umschalter + "Alles zuruecksetzen", abgesetzt
   (Design-Gesetz-Tabelle: "abgesetzt unten, damit 'Alles zuruecksetzen'
   nicht neben den Bau-Punkten steht") ---- */
.libm-fuss { flex: none; padding: .5rem .6rem .8rem; border-top: 1px solid var(--p-line); }
.libm-seg {
  display: flex; gap: .25rem; padding: .25rem; margin-bottom: .3rem;
  background: var(--p-surface-2); border: 1px solid var(--p-line); border-radius: 10px;
}
.libm-seg button {
  flex: 1; padding: .4rem .3rem; border: 0; border-radius: 7px;
  background: transparent; color: var(--p-muted);
  font: 600 .78rem/1 var(--p-font); cursor: pointer;
}
.libm-seg button[aria-pressed="true"] {
  background: var(--p-surface); color: var(--p-fg); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.libm-seg button:focus-visible { outline: 3px solid var(--focus); }

/* ============================================================== Handy: Schublade
   Vorbild dash-menu.js (Design-Gesetz §16): Burger fest oben, Seitenleiste
   ausserhalb des Bildes (left:-260px), Rueckwand faengt den Klick daneben ab.
   Dieselbe Schwelle (1000/1001px) wie dash-menu.js — NICHT PP_DESKTOP_MIN
   (1040px, Eingang): das ist die getrennte, unveraenderte Schwelle fuer das
   Handy-/Desktop-BILD der Kundenseite selbst (Kachel/Vollbild), diese hier
   ist nur fuer MEIN Menue. ================================================= */
.libm-burger {
  display: none; position: fixed; left: 12px; top: 12px; z-index: 70;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1.5px solid var(--p-line-strong); border-radius: 9px;
  background: var(--p-surface); color: var(--p-fg); cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.35);
}
.libm-burger svg { width: 19px; height: 19px; }
.libm-burger:focus-visible { outline: 3px solid var(--focus); }

.libm-back {
  position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.libm-back.show { opacity: 1; pointer-events: auto; }

@media (max-width: 1000px) {
  html.pp-menue-neu body.plattform { margin-left: 0; }
  /* Runde 17 (09.08.2026), Befund von Max mit Bild: nach der Kopf-Entfernung
     (Runde 15, Befund 2 -- .libm-kopf/"Dein Projekt" raus) ruckte die erste
     Gruppen-Ueberschrift ("DEINE SEITEN") so weit nach oben, dass sie jetzt
     selbst hinter dem Burger beginnt -- "oben angeschnitten, nur der untere
     Teil der Buchstaben sichtbar". GEMESSEN (elementFromPoint/
     getBoundingClientRect, Voruntersuchung zum Auftrag): Burger-Unterkante
     bei y:52, erste .libm-grp-Ueberschrift begann bei y:35.78 -- 16.22px
     Ueberlappung.
     KEIN Einzelfall-Patch auf .libm-grp (Auftrag woertlich: "so, dass der
     Kopfbereich des Menues generell frei bleibt, egal welches Element
     gerade als erstes kommt"): das Polster sitzt darum auf .libm-side
     SELBST, nicht auf .libm-rueckweg oder .libm-grp -- ganz gleich, was in
     Zukunft das erste Kind ist (heute .libm-rueckweg, dann sofort .libm-grp
     als naechstes Kind von .libm-scroll), es beginnt hinter diesem Polster,
     nie darunter. 56px = dieselbe Burger-Rechnung wie ueberall in dieser
     Datei (40px Burger-Hoehe + 12px oberer Abstand + 4px Luft), keine neue
     Zahl erfunden -- derselbe Wert, den Befund 1 aus Runde 15 bereits fuer
     .pp-stil__top/.pp-fertig__top nutzt (dort als padding-left, hier als
     padding-top).
     NUR in diesem @media-Block (Burger nur <1000px sichtbar) -- am
     aufgeklappten Desktop-Menue (>1000px, eigener Block weiter unten, ohne
     Burger) bleibt .libm-side ohne dieses Polster, keine unnoetige Luecke
     dort (nachgemessen, Bau-Bericht Runde 17). */
  .libm-side { left: -260px; padding-top: 56px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
  .libm-side.is-open { left: 0; }
  .libm-burger { display: inline-flex; }
  /* AUFLAGE C3 (Opus-Kontrolle P1, BEFUND, 05./06.08.2026, urspruenglich auf
     .pp-top): .libm-burger liegt fest bei (12,12)–(52,52) (z-index 70) und
     verdeckte dort den ersten sichtbaren Inhalt — unterhalb von 1040px
     (PP_DESKTOP_MIN, siehe Eingang) wird .pp-phone `position:absolute;
     left:0; top:0` (Eingang, @media max-width:1040px), und die Buehne
     beginnt daher GENAU in der linken oberen Ecke des Viewports — derselben
     Ecke, die der Burger belegt. GEMESSEN (elementFromPoint, Bau-Bericht
     Messung d): ohne diese Regel liegt der Burger tatsaechlich ueber dem
     ersten Inhalt. LOESUNG „Stage-Abstand bei aktiver Weiche" (eine der zwei
     im Auftrag genannten Optionen — die andere, den Burger zu versetzen,
     haette die aus dash-menu.js uebernommene Konvention „Burger fest oben
     links" gebrochen): zusaetzliches Kopf-Polster NUR hinter der Weiche
     ?menue=neu UND nur auf dieser schmalen Breite, ohne die Konvention oder
     die Bildschirmhoehen-Rechnung der Kundenseite (--ms4-off, .pp-wrap/
     .pp-phone) anzufassen. 54px = 40px Burger-Hoehe + 12px oberer Abstand +
     2px Luft.
     UMZUG 06.08.2026 (Nacharbeit K-1, zweiter Anlauf nach Max' Entscheidung):
     .pp-top (die vier alten Kopf-Knoepfe) ist seither IMMER display:none
     (siehe unten, „Kopfknoepfe optisch aus") — das Polster darauf haette
     keine Wirkung mehr. GEMESSEN (eigene Messung 06.08.2026,
     elementFromPoint): ohne Gegenmassnahme ruecken .pp-ansichtleiste (bei
     dieser Breite ohnehin display:none, Eingang Z. ~413) und danach
     .pp-live (die Bau-Flaeche) bis ganz nach oben — derselbe Burger-Konflikt
     wie oben, jetzt an der Bau-Flaeche statt an #btnStil. Deshalb zieht das
     Polster auf .pp-live um (den tatsaechlichen ersten sichtbaren Inhalt bei
     dieser Breite); in den Screens „Einstellungen"/„Links"/
     „Veroeffentlichen" ist .pp-live ohnehin bereits display:none (Zeilen
     weiter unten in der Eingangsdatei), das Polster dort also wirkungslos
     und beruehrt deren eigenes Kopf-Layout nicht. */
  html.pp-menue-neu .pp-live { padding-top: 54px; }
  /* Befund C (P6-Browser-Abnahme, 06.08.2026): bei OFFENER Schublade lag
     .libm-burger (fest, 12/12, 40x40, z-index 70 -- hoeher als .libm-side
     mit z-index 60) ueber dem Kopf der Schublade selbst: "DEIN PROJEKT"/
     "Meine Karte" (.libm-kopf) bzw. "Zur Plattform" (.libm-rueckweg) begann
     abgeschnitten. GEMESSEN (elementFromPoint auf der Kopfzeilen-
     Textposition, Bau-Bericht Befund C): ohne diese Regel liegt der Burger
     tatsaechlich ueber dem Kopftext. VORBILD dash-menu.js loest das
     strukturell anders (sein Burger sitzt IN der eigenen Kopfleiste, nicht
     unabhaengig fest positioniert -- Design-Gesetz §16: "Hamburger in der
     Kopfleiste") -- dieselbe Umstrukturierung waere hier ein groesserer,
     nicht durch diesen Befund gedeckter Eingriff. Stattdessen dasselbe
     Muster, das schon AUFLAGE C3 direkt oberhalb dieser Regel fuer denselben
     Burger auf der ANDEREN Achse verwendet (Kopf-Polster statt Burger-
     Versatz): der Schubladen-Kopf bekommt bei offener Schublade einen
     linken Versatz, der die Burger-Breite frei haelt. 56px = 40px
     Burger-Breite + 12px linker Abstand + 4px Luft (gleiche Rechnung wie
     C3s 54px, nur auf der X- statt der Y-Achse). Icon/Funktion des Burgers
     bleiben unveraendert (er schliesst die Schublade weiterhin per Klick,
     zusaetzlich zu Rueckwand-Klick/Escape) -- nur der Kopftext weicht ihm
     aus, statt dahinter zu verschwinden. */
  /* .libm-side.is-open .libm-kopf{padding-left:56px} ENTFERNT (Runde 15,
     09.08.2026, Befund 2) -- .libm-kopf existiert nicht mehr, siehe Vermerk
     weiter oben bei dessen fruehrer Regel. .libm-rueckweg ist seit jeher die
     ERSTE Zeile der Schublade und traegt ihre eigene, unveraenderte
     Polster-Regel direkt darunter -- an ihrem Schutz vor dem offenen Burger
     aendert die Entfernung nichts. */
  .libm-side.is-open .libm-rueckweg { margin-left: 56px; }

  /* Runde 15 (09.08.2026), Befund 1 -- "Fertig"-Rueckweg auf "Links &
     Sichtbarkeit"/dem Abschluss-Screen wird vom Burger verdeckt: Max' Bild
     zeigte im Knopf nur noch "ertig" statt "Fertig". GEMESSEN
     (elementFromPoint, Voruntersuchung zum Auftrag): der Knopf liegt bei
     (14,11)-(93,51) -- oben-links UND unten-links treffen dort den Burger,
     die ersten rund 38px des Knopfes (das "F") liegen unter ihm.
     .pp-stil__top/.pp-fertig__top (Basis-Regel in link-in-bio-konfigurator-
     eingang.html, waehrend Runde 15 TABU -- dort arbeitet ein anderer
     Agent) reservieren dort bereits RECHTS Platz fuer den Vorschau-Knopf
     (padding-right:calc(.9rem + 60px), siehe dortiger Kommentar "PLATZ FUER
     DEN KNOPF IM EIGENEN KOPF VON LINKS UND FERTIG"), aber links fehlte die
     entsprechende Regel fuer den Burger komplett. GENAU dasselbe additive
     Muster wie AUFLAGE C3/Befund C oben in dieser Datei: eigene Regel mit
     demselben (durch zwei Klassen bereits hoeher spezifischen) Selektor wie
     das Original, hier nur padding-left statt padding-right -- keine
     Ueberschreibung eines fremden Werts noetig, beide Regeln gelten
     nebeneinander fuer je ihre eigene Seite. 56px = dieselbe Burger-Rechnung
     wie bei .libm-rueckweg zwei Regeln oberhalb (40px Burger-Breite + 12px
     linker Abstand + 4px Luft) -- keine neue Zahl erfunden, dieselbe wie
     dort. NUR .zeigt-links/.zeigt-fertig (wie das rechte Vorbild), NICHT
     .pp-stil__top ohne Bedingung -- dieselbe Klasse traegt auch der
     Einstellungs-Kopf, den der Burger auf dieser Breite nie beruehrt (siehe
     Blatt-Kommentar dort). */
  .pp-screen.zeigt-links .pp-stil__top,
  .pp-screen.zeigt-fertig .pp-fertig__top { padding-left: calc(.9rem + 56px); }
}
@media (min-width: 1001px) {
  .libm-back { display: none; }
}

/* ============================================================ KOPFKNOEPFE
   OPTISCH AUS (Nacharbeit K-1, Max' Entscheidung 06.08.2026 abends: Knoepfe
   ausblenden + die 8 betroffenen Testreihen auf den Menue-Weg umschreiben,
   als EIN Paket — erster Anlauf am selben Tag frueher erprobt und wegen der
   damaligen 8 echten-Klick-Tests zurueckgenommen, siehe _START-NEUE-
   SITZUNG.md)
   Die vier alten Kopf-Knoepfe (#btnStil/#btnLinks/#btnVorschau/#btnPub in
   .pp-top, Eingang Z. ~2702) sind seit dem Menue-Umbau doppelte Bedienwege:
   das Menue erreicht dieselben Ziele (g-schrift/g-button/g-bilder/g-effekte
   -> #btnStil, sichtbarkeit -> #btnLinks, vorschau -> #btnVorschau, online
   -> #btnPub, siehe linkinbio-menue.js). Zusaetzlich standen #btnPub und
   „Online stellen" im Menue als ZWEI gefuellte orange Knoepfe gleichzeitig
   auf dem Schirm (Design-Gesetz §5a: genau einer).
   NUR OPTISCH ausgeblendet — die vier Knoepfe bleiben im DOM und bekommen
   ihre Klicks weiterhin programmatisch vom Menue (linkinbio-menue.js ruft
   z. B. document.getElementById('btnStil').click()); ein display:none-
   Element ist per .click() weiterhin bedienbar (kein elementFromPoint/keine
   Geometrie noetig fuer einen synthetischen Klick).
   .pp-top selbst (nicht nur die Knoepfe) verschwindet hier komplett: der
   einzige andere Inhalt darin ist #hinweis (.pp-hinweis), das bereits seit
   dem 27.07.2026 unbedingt display:none ist (Zeile „Die Hinweiszeile im
   Kopf ist … ersatzlos ausgeblendet", Eingang ~Z. 359) — .pp-top haette also
   nach dem Ausblenden nur der Knoepfe ohnehin nichts Sichtbares mehr
   enthalten und waere als leere, aber weiterhin Platz beanspruchende Leiste
   (Polster + Trennlinie) stehen geblieben. Komplettes Ausblenden von .pp-top
   vermeidet diesen Leerraum vollstaendig UND spart der Bau-Flaeche die
   frueher von .pp-top belegte Hoehe (mehr Platz fuer .pp-live) — geprueft,
   dass dadurch nichts an --ms4-off/.pp-wrap/.pp-phone haengt (--ms4-off
   misst ausschliesslich .dash-nav aus dem Programm-Kontext, Eingang
   ~Z. 3908, nicht .pp-top). Zur Burger-Kollision durch den dadurch freien
   Platz siehe die AUFLAGE-C3-Ergaenzung weiter oben (.pp-live bekommt das
   Polster). Diesmal KEINE Test-Kopfvermerke mehr noetig — die 8 betroffenen
   Testreihen sind stattdessen direkt auf den Menue-Weg umgeschrieben
   (.bak-vor-menueweg-06-08 je Datei). */
html.pp-menue-neu .pp-top { display: none; }
/* Runde 15 (09.08.2026) -- Doppelweg-Befund der Voruntersuchung: bei
   Fensterbreiten >1040px erschien der Handy/Desktop-Umschalter DOPPELT,
   sobald man im Menuefuss auf "Handy"/"Desktop" klickte -- zusaetzlich zur
   neuen Leiste (.libm-seg, Menuefuss) tauchte die ALTE Pillen-Leiste
   #ansichtWahl (.pp-ansichtleiste, link-in-bio-konfigurator-eingang.html
   Z. ~3331) ueber der Karte auf. URSACHE (Voruntersuchung, dort nicht diese
   Datei): das Verschiebe-/Umschreib-Skript der Eingangsdatei greift nur
   "if(!DESKTOP)", die einzige Versteck-Regel fuer #ansichtWahl war dort eine
   Breiten-Medienabfrage @media(max-width:1040px), die am Desktop nicht
   zieht. Der Kopfkommentar der Eingangsdatei selbst will ausdruecklich "nur
   einen Umschalter mit einem Klickweg" -- GENAU dasselbe Ziel wie die neue
   Leiste hier im Menuefuss (itemHTML(von('reset')) zwei Zeilen ueber
   themeSegHTML(), s. linkinbio-menue.js). LOESUNG wie von der
   Voruntersuchung vorgegeben: dieselbe UNBEDINGTE, breitenunabhaengige
   Regel wie .pp-top direkt oberhalb -- additiv in dieser Datei (meine
   Hoheit), die Eingangsdatei bleibt dafuer unangetastet (dort arbeitet
   waehrend Runde 15 ein anderer Agent). ID statt Klasse (#ansichtWahl statt
   .pp-ansichtleiste), um ausschliesslich dieses eine Element zu treffen. */
html.pp-menue-neu #ansichtWahl { display: none; }

/* ==========================================================================
   ARBEITEN „WIE AM HANDY" — DAS MENUE ZIEHT IN DEN RAHMEN (11.08.2026, Max)
   ==========================================================================
   MAX' BEFUND, woertlich: „Wenn ich am Desktop arbeite und auf ,Handy'
   klicke, dann bleibt das linke Menue AUSSERHALB des Handys, das rechte
   Menue ist aber INNERHALB des Handys. Das ergibt keinen Sinn. Entweder sind
   beide Menues innerhalb des Handys oder gar keines."

   VORHER GEMESSEN (1280x800, Blatt offen, ?ansicht=handy, Layout-Pixel ueber
   die offsetParent-Kette — NICHT getBoundingClientRect, der Rahmen ist mit
   scale(0.8318) gezeichnet):
     .libm-side   0 … 230     (position:fixed, im Rahmen? NEIN)
     .pp-phone  560 … 950     (390 breit)
     .pp-sheet  560 … 950     (im Rahmen? JA, exakt Rahmenbreite)
   Menue links VOR der Rahmenkante (230 < 560), Blatt komplett DAHINTER —
   genau der gemischte Zustand.

   DIE LOESUNG hat zwei Haelften, und nur die zweite steht hier:
     1. linkinbio-menue.js haengt .libm-side/.libm-burger/.libm-back bei
        gesetzter Klasse in .pp-screen um (in den Rahmen hinein) —
        DOM-Umzug, siehe rahmenUmzug() dort.
     2. Diese Regeln machen aus dem fest am Fenster klebenden Menue eine
        Schublade IM Rahmen: position:absolute statt fixed, damit sie sich
        auf .pp-screen bezieht (dessen overflow:hidden schneidet die
        geschlossene Schublade sauber ab) statt aufs Fenster.

   KEINE NEUE BAUART, KEINE NEUEN ZAHLEN: es sind Wort fuer Wort dieselben
   Werte wie in der vorhandenen Handy-Schublade weiter oben
   (@media max-width:1000px) — -260px Parkposition, 56px Kopfpolster,
   derselbe Schatten, derselbe Burger an (12,12). Nur „fixed" wird zu
   „absolute". Umgekehrt heisst das auch: UNTER 1040px aendert sich nichts,
   dort wird die Klasse gar nicht erst gesetzt (Eingang, setzeRahmenModus()) —
   und sie kann dort auch nichts bewirken, weil .pp-phone unter der Schwelle
   ohnehin das ganze Fenster ist.

   .pp-desktop („Am Schreibtisch") bekommt diese Klasse nie: dort stehen
   Menue UND Blatt ausserhalb — die andere saubere Haelfte von Max' Regel.
   ========================================================================== */
html.pp-imrahmen body.plattform { margin-left: 0; }
html.pp-imrahmen .libm-side {
  position: absolute; left: -260px; top: 0; bottom: 0;
  padding-top: 56px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
html.pp-imrahmen .libm-side.is-open { left: 0; }
html.pp-imrahmen .libm-burger { display: inline-flex; position: absolute; left: 12px; top: 12px; }
html.pp-imrahmen .libm-back { position: absolute; }
/* Befund C (P6-Abnahme) gilt hier genauso: bei OFFENER Schublade liegt der
   Burger (z-index 70) ueber deren erster Zeile. Die erprobte Gegenmassnahme
   steht in der @media(max-width:1000px)-Klammer und greift auf dieser Breite
   nicht — darum WORTGLEICH noch einmal, keine zweite Bauart. Die senkrechte
   Haelfte (padding-top:56px) traegt die Regel oben bereits. */
html.pp-imrahmen .libm-side.is-open .libm-rueckweg { margin-left: 56px; }

/* ============================================================ dash-menu.js
   AUFGERAEUMT (Menue-Umbau P5, 06.08.2026, Bauanleitung Item 4: "Die CSS-
   Ausblend-Regeln fuer dash-menu ... werden hinfaellig, wenn dash-menu gar
   nicht mehr laedt — aufraeumen").
   Bis P5 standen hier fuenf Regeln, die dash-menu.js' Elemente
   (.dash-side/.dash-nav/.dash-back/.dash-create-pop/.dash-sysov) per
   display:none abblendeten, WAEHREND dash-menu.js im Hintergrund weiter
   parallel mitbaute (die Eingangsdatei lud es unveraendert, nur diese Datei
   versteckte seine Wirkung). Seit P5 laedt die Eingangsdatei dash-menu.js in
   KEINEM Kontext mehr (siehe deren Kommentar "DASH-MENU.JS STILLGELEGT") —
   die fuenf Klassen koennen darum nie mehr im Dokument auftauchen, die
   Regeln waeren toter Code. Entfernt (kein Loesch-Eingriff an lebendem
   Verhalten: die Regeln trafen strukturell nichts mehr, ihr Fehlen aendert
   das Bild nicht). dash-menu.js SELBST bleibt unangetastet (gemeinsame
   Datei, ~30 andere Seiten laden sie weiterhin). */

/* ============================================================ P2 – Dialoge
   Seiten-Sicht + Link-Karte (linkinbio-menue.js, dialogAufbauen/
   seiten-/linkDialogInhaltZeichnen). Das Fenster selbst (.wv-dialog, Kopf,
   .wv-x, Rumpf, Zentrierung, Hell/Dunkel, Mobil-Vollbild, Ein-/Ausblenden)
   kommt komplett aus basis.css (Design-Gesetz §11a) — hier nur, was dort
   NICHT feststeht: Inhalts-Bausteine dieses einen Dialogs. */
.libm-dialog .wv-dialog__head svg { width: 20px; height: 20px; color: var(--p-accent-text); flex: none; }
/* Fuss (Runde 14, Max: "Leiste ueberall nachruesten"): .wv-dialog__foot kommt
   FERTIG aus basis.css (Design-Gesetz §11a) -- dialogAufbauen() erzeugt ihn
   jetzt fuer JEDEN Dialog, aber NUR befuellte Fenster sollen ihn zeigen
   ("ein leerer Fuss waere schlechter als keiner", Auftrag woertlich). :empty
   deckt das ohne JS-Sonderfall ab: leer bleibt er unsichtbar, jede
   Aufrufstelle, die ihn per dialogFussSetzen()/dem vierten dialogAufbauen()-
   Parameter befuellt, macht ihn dadurch automatisch sichtbar. */
.libm-dialog .wv-dialog__foot:empty { display: none; }
/* Kopf-Titel "Einstellungen · Name" (Nachbesserung 08.08.2026, Befund 1):
   NUR die zwei Dialoge, die linkinbio-menue.js per kopfTitelSetzen() fuellt
   (Klasse wird dort per JS vergeben), werden einzeilig+kuerzbar -- alle
   anderen .wv-dialog__head h3 (kurze feste Titel wie "Meine Links"/"Neuer
   Link") bleiben unveraendert im bisherigen, umbruchfaehigen Standard aus
   basis.css. Ohne diese Eingrenzung wuerde ein ANDERER, nicht per JS
   gekuerzter langer Titel hart (ohne Punkt/Ellipse) am Rand abgeschnitten
   -- schlechter als das bisherige Umbrechen. */
.libm-dialog .wv-dialog__head h3.libm-kopf-kurz { white-space: nowrap; overflow: hidden; }
/* "Link erstellen" -- Kopf-Hauptknopf des Anlege-Fensters (08.08.2026,
   linkinbio-menue.js: linkAnlegenOeffnen/linkAnlegenKopfKnopfHTML). Max'
   Auftrag: "rechts oben... orange, deutlich: 'Link erstellen'". Farbe/
   Fuellung kommen unveraendert aus .btn/.btn--accent (Design-Gesetz §6, EINE
   gefuellte Hauptaktion je Flaeche) -- diese Klasse ergaenzt NUR die Groesse:
   die Gesetz-Standardhoehe eines Knopfes (31-33px, §6) unterschreitet die
   geforderte 44x44px-Mindest-Trefflaeche fuer Touch, darum hier angehoben,
   OHNE die geteilten Bausteine .btn/.btn--sm selbst anzufassen (die haengen
   an rund 30 anderen Seiten). Die Breite braucht keine eigene Regel: der
   Knopftext allein liegt mit der bestehenden .btn--sm-Polsterung schon klar
   ueber 44px. */
.libm-anlegen-btn { min-height: 44px; }
/* Gestapeltes Feld (Design-Gesetz §10b „gestapelte Variante"): Label ueber
   dem Feld, .72rem/700 GROSSBUCHSTABEN grau. */
.libm-fld { display: flex; flex-direction: column; gap: .3rem; }
.libm-fld label {
  font: 700 .72rem/1 var(--p-font); letter-spacing: .07em; text-transform: uppercase;
  color: var(--p-muted);
}
/* Haekchenliste (Vorbild: Blatt "Muster zum Durchklicken", .kast) — eigene
   Klasse statt Wiederverwendung, weil das Muster eine eigenstaendige
   Entwurfsseite mit lokalem CSS ist, keine gemeinsame Datei. */
.libm-hkliste { display: flex; flex-direction: column; gap: .1rem; }
.libm-hkzeile {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .5rem .3rem; border: 0; border-radius: 8px; background: transparent;
  font: 600 .88rem/1.3 var(--p-font); color: var(--p-fg); text-align: left; cursor: pointer;
}
.libm-hkzeile:hover { background: var(--p-surface-2); }
.libm-hkzeile:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.libm-hk {
  width: 19px; height: 19px; flex: none; border: 2px solid var(--p-line-strong);
  border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
}
.libm-hk.is-on { background: var(--p-accent); border-color: var(--p-accent); }
.libm-hk.is-on::after {
  content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px,-1px);
}
/* „…entfernen": Ghost-Knopf mit gefaehrlicher Farbe (Design-Gesetz: Rot nur
   fuer Gefahr/Fehler) — eigene Klasse zusaetzlich zu .btn.btn--ghost, weil
   dessen Grundfarbe --p-fg ist. */
.libm-dlg-bad { align-self: flex-start; color: var(--p-bad); border-color: var(--p-line-strong); }
.libm-dlg-bad:hover { border-color: var(--p-bad); background: color-mix(in srgb, var(--p-bad) 8%, transparent); color: var(--p-bad); }
.libm-dlg-hint { margin: 0; font-size: .82rem; color: var(--p-muted); }
/* Paket H (07.08.2026, Auftrag „Datenschutz-Erklärung für Kundenseiten"):
   dezenter Warnhinweis (Pixel/GA gesetzt, Datenschutz-Seite aus) — dasselbe
   Muster wie .pp-hint__achtung (link-in-bio-konfigurator-eingang.html, A5,
   02.08.2026): Akzentfarbe statt Rot/--p-bad, faellt auf ohne wie eine
   Fehlermeldung zu wirken. */
.libm-dlg-hint__achtung { color: var(--p-accent-text); font-weight: 600; }

/* ---- Befund B (P6-Browser-Abnahme, 06.08.2026): Inline-Rueckfrage "Seite
   entfernen" innerhalb der Seiten-Sicht -- Ersatz fuer die Motor-Rueckfrage
   (WVDialog), die als eigenes Overlay UNTER dem Top-Layer dieses nativen
   <dialog> lag und darum unklickbar war (siehe linkinbio-menue.js,
   seitenWegRueckfrageZeigen). Vorbild ist die "badflaeche" des Blatts
   "Muster zum Durchklicken" (menue-entwurf/menue-umbau-plan.html,
   #b-muster .badflaeche/.knopf--bad) -- hier mit den echten --p-*-Token
   statt der dortigen lokalen Muster-Hexfarben, im selben color-mix()-Rezept
   wie .libm-it--warn/.libm-dlg-bad oben in dieser Datei. */
.libm-badflaeche {
  border: 1px solid color-mix(in srgb, var(--p-bad) 35%, var(--p-line-strong));
  background: color-mix(in srgb, var(--p-bad) 8%, var(--p-surface));
  border-radius: 14px; padding: .9rem 1rem;
}
.libm-badflaeche h4 {
  margin: 0 0 .2rem; font: 700 .92rem/1.3 var(--p-display); color: var(--p-bad);
}
.libm-badflaeche p { margin: 0; font-size: .82rem; color: var(--p-muted); }
.libm-badflaeche__reihe { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }

/* ============================================================ P3 – Übergang & Bewegung
   (linkinbio-menue.js, uebergangHTML/uebergangVerdrahten). Abschnitts-Kopf
   INNERHALB des Link-Dialogs — kein zweiter .wv-dialog-Rahmen darin (der
   Dialog selbst ist schon die eine Karte, siehe Muster-Blatt: dort sitzt
   „Übergang & Bewegung" als eigene .mkarte NEBEN der Häkchenliste; hier im
   fertigen Programm ist der ganze Link EIN Dialog, darum trennt ein
   Kopfzeile+Trennlinie statt eines zweiten Kartenrahmens). Die Auswahl-
   Kacheln selbst sind .wv-tiles/.wv-tile-opt aus basis.css (Design-Gesetz
   §10c) — hier nur der gesperrte Zustand ergaenzt (Wisch-Richtung, wenn ein
   Dreheffekt sie automatisch bestimmt, siehe Motor-Kommentar zu `bewAktiv`
   in wechselKastenHTML/uebergangHTML). */
.libm-abschnitt {
  margin-top: .2rem; padding-top: .8rem; border-top: 1px solid var(--p-line);
  font: 700 .92rem/1.3 var(--p-display); color: var(--p-fg);
}
.libm-abschnitt-u { margin: -.3rem 0 0; font-size: .82rem; color: var(--p-muted); line-height: 1.5; }
/* ---- Zuklappbarer Abschnitts-Kopf (08.08.2026, Nachbesserung "Moeglichkeit
   1": "Eigene Domain" faltet sich zu EINER Zeile zusammen statt vier
   Absaetze Fliesstext dauerhaft zu zeigen — linkinbio-menue.js:
   domainKlappHTML/domainKlappVerdrahten). Eigenstaendige, komplette Regel
   statt einer Kombination mit .libm-abschnitt (ein <button> braucht einen
   eigenen Chrome-Reset, siehe .libm-grp--klick weiter oben fuer dasselbe
   Muster) — Schrift/Abstand/Trennlinie bewusst GLEICH .libm-abschnitt
   abgeschrieben, damit ein zu- UND ein aufgeklappter Abschnitts-Kopf im
   selben Fenster gleich aussehen. Der Chevron ist .wz-chev (Design-Gesetz
   §8, aus basis.css) -- DIESELBE Aufklapp-Bauart wie die QR-Codes jeder
   Link-Zeile weiter unten, nur die Dreh-Kopplung an aria-expanded ist hier
   (wie dort) lokal ergaenzt, weil basis.css nur .is-collapsed kennt. */
.libm-abschnitt--klapp {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; margin-top: .2rem; padding: .8rem 0 0; border: 0; border-top: 1px solid var(--p-line);
  background: transparent; cursor: pointer; text-align: left;
  font: 700 .92rem/1.3 var(--p-display); color: var(--p-fg);
}
/* Nachbesserung 08.08.2026 (Koordinator, Screenshot-Nachmessung: "leerer
   Streifen oben ... rund 40px Luft ohne Inhalt"): margin-top+padding-top+
   border-top oben sind die Trennung ZUM KASTEN DARUEBER (Erst-Zustand) --
   ist der Kasten weg (Auftrag A, online), steht "Eigene Domain" als
   ERSTES Kind direkt im .wv-dialog__body, und dieselbe Trennung haengt
   dann in der Luft (Trennlinie ohne Vorgaenger, plus deren eigenes
   margin/padding ADDIERT zum Kopf-Polster von .wv-dialog__body selbst).
   :first-child braucht KEINEN JS-Zustand (ob der Kasten gerade gerendert
   wurde oder nicht) -- die tatsaechliche DOM-Position entscheidet von
   selbst, GEMESSEN korrekt in beiden Faellen. */
.wv-dialog__body > .libm-abschnitt--klapp:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.libm-abschnitt--klapp:hover { color: var(--p-accent-text); }
.libm-abschnitt--klapp:hover .wz-chev { color: var(--p-accent); border-color: var(--p-accent); }
.libm-abschnitt--klapp:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.libm-abschnitt--klapp .wz-chev svg { transition: transform .18s; }
.libm-abschnitt--klapp[aria-expanded="true"] .wz-chev svg { transform: rotate(180deg); }
.libm-domain-panel { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.libm-domain-panel[hidden] { display: none; }
.libm-dialog .wv-tile-opt[disabled] { opacity: .5; cursor: default; }
.libm-dialog .wv-tile-opt[disabled]:hover { border-color: var(--p-line-strong); color: var(--p-muted); }

/* ============================================================ Seiten-Aktionsmenue
   (07.08.2026, linkinbio-menue.js: seiteMehrKnopfHTML/seiteAktionenOeffnen/
   seiteAktionenInhaltZeichnen). Drei-Punkte-Knopf je Zeile in "Deine Seiten"
   + das kleine <dialog> mit Kopieren/Umbenennen/Löschen, das er oeffnet.

   ZEILEN-HUELLE .libm-it-zeile: der bestehende Zeilen-Knopf (.libm-it,
   unveraendert aus itemHTML()) und der neue Drei-Punkte-Knopf stehen als
   ZWEI GESCHWISTER nebeneinander (Begruendung: button-in-button ist laut
   HTML-Parser ungueltig — ein verschachtelter <button>-Starttag schliesst
   den aeusseren automatisch; ein DIV-als-Knopf haette eigene Tastatur-
   Verdrahtung gebraucht, die ein echtes zweites <button> umsonst mitbringt,
   siehe Kopfkommentar bei seiteMehrKnopfHTML). .libm-it behaelt sein eigenes
   Aussehen (Hover/Fokus/aria-current) vollstaendig -- hier wird nur seine
   Breite von width:100% auf flex:1 umgestellt, damit der Mehr-Knopf daneben
   Platz hat. */
.libm-it-zeile { display: flex; align-items: center; }
.libm-it-zeile > .libm-it { width: auto; flex: 1 1 auto; min-width: 0; }
/* "Meine Seiten" (08.08.2026, Auftrag 1, linkinbio-menue.js:
   seitenUebersichtZeileHTML): dieselbe Zeilen-Huelle .libm-it-zeile wie im
   Seiten-Aktionsmenue oben, hier mit .az-row (Design-Gesetz §7) statt
   .libm-it als Hauptknopf — die ganze Zeile fuehrt direkt zur Seite, der
   Drei-Punkte-Knopf bleibt derselbe Geschwister-Knopf daneben. EIGENE
   Selektor-Zeile statt die Regel direkt darueber zu erweitern, damit die
   bereits getestete Seitenleisten-Regel unangetastet bleibt (additiv). */
.libm-it-zeile > .az-row { width: auto; flex: 1 1 auto; min-width: 0; }

/* MEHR-KNOPF: sichtbar klein (24px, im vorgegebenen 24-28px-Rahmen — eine
   sichtbare 44px-Flaeche passt nicht in die nur 33px hohe Zeile, siehe
   Bau-Bericht), Trefferflaeche unsichtbar auf 44x44px vergroessert per
   ::before{inset:-10px} -- GENAU das Muster von .ms4sl-kachel::before
   (link-in-bio-konfigurator-eingang.html, dort inset:-5px fuer denselben
   Zweck). GEMESSEN statt geschaetzt (Bau-Bericht): 24px Knopf + 2×10px
   Ueberstand = 44px in beiden Richtungen; senkrecht bleiben 4.5px des
   Ueberstands INNERHALB der 33px-Zeile (Knopf ist mittig, align-items:
   center), die restlichen 5.5px landen im 16px-Zeilenabstand (#libmSeitenListe
   oben — 16px statt der urspruenglich angenommenen 8px, siehe dortiger
   Korrektur-Kommentar: ZWEI Nachbarzeilen teilen sich denselben Zwischenraum,
   5.5+5.5=11px Bedarf), NIE in der Nachbarzeile. Waagrecht bleibt links Luft
   im padding-right von .libm-it (.5rem), rechts im padding-right von
   .libm-scroll (.6rem) -- beide Richtungen bleiben damit im jeweils leeren
   Rand, ohne fremden Klick-Bereich zu ueberdecken. */
.libm-it__mehr {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0 6px 0 2px;
  border: 0; border-radius: 7px; background: transparent; color: var(--p-muted);
}
.libm-it__mehr::before { content: ""; position: absolute; inset: -10px; }
.libm-it__mehr svg { width: 15px; height: 15px; flex: none; pointer-events: none; }
.libm-it__mehr:hover { background: var(--p-surface-2); color: var(--p-accent); }
.libm-it__mehr:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* AKTIONS-LISTE im kleinen Dialog (Kopieren/Umbenennen/Löschen) — eigene,
   schlanke Klasse statt Wiederverwendung von .libm-it: .libm-it ist auf die
   230px schmale Seitenleiste zugeschnitten (kleine Schrift, knappes Polster),
   im deutlich breiteren Dialog (§11a, min(40rem, 100vw-2rem)) darf die
   Schrift normal gross sein und die Zeile ruhig grosszuegiger ausfallen
   (Auftrag: "die drei Zeilen werden groß und sicher tippbar"). */
.libm-aktion-liste { display: flex; flex-direction: column; gap: .15rem; }
.libm-aktion-it {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .75rem .6rem; border: 0; border-radius: 10px; background: transparent;
  font: 600 .95rem/1.3 var(--p-font); color: var(--p-fg); text-align: left; cursor: pointer;
}
.libm-aktion-it svg { width: 19px; height: 19px; flex: none; color: var(--p-muted); }
.libm-aktion-it:hover { background: var(--p-surface-2); }
.libm-aktion-it:hover svg { color: var(--p-accent); }
.libm-aktion-it:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
/* "Löschen": gefaehrliche Farbe (Design-Gesetz: Rot nur fuer Gefahr/Fehler) —
   dieselbe Farb-Systematik wie .libm-it--warn/.libm-dlg-bad weiter oben.
   LOESCHEN ABSETZEN (Opus-Kontrolle, Runde 4, 07.08.2026 abends, Max:
   "Löschen absetzen"): GEMESSEN (Bau-Bericht) stand "Löschen" vorher nur
   2.39px unter "Umbenennen" (Zeilen je 43.75px, .libm-aktion-liste gap:
   .15rem) — bei Links loescht ein Tipp hier SOFORT ohne Rueckfrage
   (linkAktionenInhaltZeichnen), ein Fehltipp aus der Umbenennen-Zeile heraus
   haette den Link gekostet. margin-top schafft echten, unklickbaren
   Zwischenraum VOR der Löschen-Zeile (nicht padding-top — das würde die
   eigene, absichtlich klickbare Flaeche von Löschen selbst nur nach oben
   verlaengern, statt eine neutrale Zone davor zu schaffen, die zu KEINEM der
   beiden Knoepfe gehoert). 1rem (16px) GEMESSEN als deutlich ausreichend
   (siehe test-seiten-aktionsmenue.js, Abschnitt "Nachbarschaft Löschen":
   0.25px-Abtastung zwischen den beiden Zeilen zeigt eine durchgehende,
   niemandem gehoerende Luecke ueber die volle margin-Breite — ein Fehltipp
   noch innerhalb dieser Zone trifft nach dem Umbau weder Umbenennen noch
   Löschen, sondern schlicht nichts). border-top zieht dieselbe Trennlinie,
   die man aus Menues mit gefährlichen/harmlosen Eintraegen nebeneinander
   kennt (Vorbild im selben Fenster: .libm-abschnitt weiter unten nutzt
   dasselbe Rezept margin-top+border-top+--p-line fuer Abschnittsgrenzen
   INNERHALB eines Dialogs) — nur --p-line, kein eigenes Hex. Gilt fuer BEIDE
   Gruppen (Seiten UND Links): .libm-aktion-it--bad ist in beiden Faellen
   AUSSCHLIESSLICH die Löschen-Zeile, ein einziger Selektor traegt darum
   automatisch beide. */
.libm-aktion-it--bad { color: var(--p-bad); margin-top: 1rem; border-top: 1px solid var(--p-line); }
.libm-aktion-it--bad svg { color: var(--p-bad); }
.libm-aktion-it--bad:hover { background: color-mix(in srgb, var(--p-bad) 10%, transparent); }
.libm-aktion-it--bad:hover svg { color: var(--p-bad); }
/* Grenze erreicht (5/5) bzw. erste Seite (nicht entfernbar) — derselbe
   still-stehende, abgedunkelte Zustand wie .libm-it[disabled] oben. */
.libm-aktion-it[disabled] { cursor: default; opacity: .55; }
.libm-aktion-it[disabled]:hover { background: transparent; }
.libm-aktion-it[disabled]:hover svg { color: var(--p-muted); }
.libm-aktion-it--bad[disabled]:hover svg { color: var(--p-bad); }

/* ============================================================ Links-Uebersicht
   (07.08.2026 abends, Max' Auftrag "ein Menue, wo man auf Links klickt...").
   GROSSER UMBAU 08.08.2026 (Max, in fuenf Bildern): der Aufklapp-Pfeil samt
   Panel ist ERSATZLOS ENTFALLEN. Jede Kachel zeigt jetzt IMMER zwei Zeilen
   (linkinbio-menue.js: linksUebersichtZeileHTML): Name+Pille+Drei-Punkte-
   Knopf, darunter drei gleichwertige Knoepfe Vorschau/Teilen/Einstellungen.
   "Teilen" (neu) und "Einstellungen" oeffnen je ein EIGENES Fenster statt
   eines Panels (linkTeilenOeffnen()/linkAktionEinstellungen()); der
   Drei-Punkte-Knopf nutzt wieder denselben geteilten Baustein wie bei den
   Seiten (mehrKnopfHTML/mehrKnopfAusloesen, seit Runde 8 reaktiviert).
   .az-list/.az-row/.az-row__*/.wv-pill kommen weiterhin fertig aus
   basis.css (Design-Gesetz §7). */
/* UMGEBAUT Runde 13 (Max, Befund per Bild: "die Knöpfe Vorschau/Teilen/
   Einstellungen stehen AUSSERHALB der Kachel... muss innerhalb der Kachel
   selbst sein"): bisher trug NUR Zeile1 (.libm-lu-row1.az-row) die
   Design-Gesetz-§7-Kartenoptik (weiss, Kante, oranger Objekt-Streifen
   links, Radius) -- Zeile2 (die drei Knoepfe) stand als eigenes,
   UNGERAHMTES Geschwister direkt darunter, nur durch den Item-gap optisch
   getrennt: zwei Zeilen sahen wie EIN Kasten + ein loses Extra aus, nicht
   wie EIN Block. Jetzt traegt .libm-lu-item selbst die komplette
   §7-Kartenoptik (Kante/Streifen/Radius/Innenabstand, WOERTLICH aus
   basis.css' .az-row-Werten uebernommen, NICHT dort geaendert -- das ist
   die gemeinsame Basis fuer ALLE Objekt-Listen der Plattform, hier nur
   NACHGEBAUT); Zeile1 (.az-row) verliert darum ihre EIGENE Kante/Radius/
   Innenabstand (kommt jetzt vom Item), bleibt aber weiterhin ein "echtes"
   .az-row fuer Titel-Kuerzung/Pille-Layout/Tastatur-Fokus-Ring ihrer
   Kinder. Zeile2 braucht keinen eigenen Innenabstand mehr (erbt ihn vom
   Item). Sichtbarer Abstand ZWISCHEN zwei Kacheln bleibt der bestehende
   .az-list-gap (.5rem, basis.css) -- unveraendert, unangetastet.
   Zeile1-zu-Zeile2-Abstand NACHGEMESSEN auf .85rem angehoben (vorher .5rem,
   wie zuvor der reine Item-gap): der Mehr-Knopf traegt eine unsichtbar
   vergroesserte 44px-Trefferflaeche (Ecken-Probe, Design-Gesetz), die bei
   .5rem Abstand knapp in die Kopf-Ecke von Zeile2 hineinreichte (Puppeteer-
   Ecken-Probe schlug an der rechten oberen Ecke von "Einstellungen" fehl,
   Ursache: elementFromPoint traf dort den Mehr-Knopf statt den Knopf
   selbst) -- .85rem schafft ausreichend Abstand, beide Trefferflaechen
   ueberlappen seither nicht mehr (nachgemessen, alle vier Ecken aller drei
   Knoepfe UND des Mehr-Knopfs treffen). */
.libm-lu-item, .libm-lu-row1.az-row { box-sizing: border-box; }
.libm-lu-row1.az-row {
  width: auto; border: none; border-radius: 0; background: transparent; padding: 0;
}
.libm-lu-item {
  display: flex; flex-direction: column; gap: .85rem;
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-left: 3px solid var(--p-accent); border-radius: 0 11px 11px 0;
  padding: .7rem .95rem; transition: border-color .12s ease;
}
.libm-lu-row1.az-row:hover { background: transparent; }
/* Zeile 1 (Nachbesserung 08.08.2026, Befund 1 -- Koordinator/Max, bei
   390px gemessen: "der Zustands-Hinweis wandert von der zweiten Zeile
   nach oben rechts"): Name LINKS, Pille+Drei-Punkte RECHTS, IMMER in EINER
   Zeile, auch am Handy. basis.css sieht fuer GEWOEHNLICHE Objekt-Listen bei
   <=560px vor, dass die ganze Meta-Gruppe unter den Titel wandert (§7,
   dort meist richtig: mehr Metafelder als hier) -- diese Kachel braucht
   das Gegenteil, darum eine eigene, hoeher-spezifische Regel NUR fuer
   .libm-lu-row1 (jede ANDERE .az-row-Nutzung, z. B. "Meine Seiten", bleibt
   von dieser Regel unberuehrt). Name kuerzt statt umzubrechen (Auftrag,
   woertlich: "kürzt der Name, nicht die Pille") -- overflow:hidden+
   white-space:nowrap auf dem Titel, min-width:0 auf seiner Huelle (hebt
   NUR hier basis.css' allgemeine 11rem-Mindestbreite auf), die eigentliche
   Kuerzung uebernimmt linksUebersichtNamenKuerzen() (linkinbio-menue.js). */
.libm-lu-row1 .az-row__title { overflow: hidden; white-space: nowrap; }
.libm-lu-row1 .az-row__main { min-width: 0; }
.libm-lu-row1 .wv-pill { flex: none; }
@media (max-width: 560px) {
  .libm-lu-row1.az-row { flex-wrap: nowrap; }
  .libm-lu-row1 .az-row__meta { margin-left: 0; width: auto; justify-content: flex-end; flex: none; }
}
/* Zeile 2: drei gleichwertige Knoepfe (Auftrag, woertlich). NACHBESSERUNG
   08.08.2026, Befund 2 (Koordinator/Max, bei 390px gemessen: "Einstellungen"
   brach in eine zweite Zeile um) -- Max' ausdruecklicher Auftrag: alle drei
   bleiben AUCH bei 390px nebeneinander, ueber kleinere Beschriftung/weniger
   Innenabstand, NICHT ueber Abschneiden/Ellipse/Umbenennen, Hoehe und
   Trefferflaeche unangetastet. .74rem Schrift + .45rem seitlicher
   Innenabstand + .4rem Zeilenabstand NACHGEMESSEN (Puppeteer, Bau-Bericht):
   bei 390px landen alle drei Knoepfe auf derselben y-Position, je 112px
   breit, 44px hoch, Kanten-Mitten treffen den jeweils eigenen Knopf --
   keine Kuerzung/Ellipse noetig, "Einstellungen" bleibt vollstaendig
   lesbar. min-height 44px bleibt unveraendert (.libm-lu-item .btn weiter
   unten). */
.libm-lu-row2 { display: flex; gap: .4rem; flex-wrap: nowrap; }
.libm-lu-row2 .btn { flex: 1 1 0; padding-left: .45rem; padding-right: .45rem; font-size: .74rem; white-space: nowrap; }
/* Aufleuchten (Nachbesserung 08.08.2026, Max' Handy-Befund: "es muss
   erkennbar sein, dass der Link... jetzt unten in der Liste erscheint") --
   die Kachel traegt schon eine orange linke Kante (Design-Gesetz §7); der
   Hintergrund faengt hier zusaetzlich, EINMALIG, bei --p-accent-soft an und
   laeuft ohne JS-Zutun auf transparent aus (KEIN animation-fill-mode:
   forwards -- nach dem letzten Keyframe gilt wieder die normale Kachel-
   Farbe, "kein Blinken, kein Balken", Auftrag woertlich). Nur das
   --p-*-Token --p-accent-soft, keine eigene Farbe. linkinbio-menue.js:
   zustandsKachelAufleuchten() setzt/entfernt nur die Klasse.
   UMGEBAUT Runde 13: Ziel jetzt .libm-lu-item SELBST statt nur seiner
   Zeile1 (.az-row) -- seit dem Kachel-Umbau traegt das Item die
   Hintergrundflaeche, ein Aufleuchten NUR in Zeile1 wuerde nach dem Umbau
   nur einen Teil der Kachel treffen. */
.libm-lu-item--neu { animation: libm-lu-aufleuchten 1.5s ease-out; }
@keyframes libm-lu-aufleuchten {
  from { background: var(--p-accent-soft); }
  to   { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .libm-lu-item--neu .az-row { animation: none; }
}
/* Neue Seite aufleuchten (Nachbesserung 08.08.2026, Befund 3) -- dieselbe
   Animation/Farbregel wie oben, EIGENE Klasse (seitenKachelAufleuchten(),
   linkinbio-menue.js), weil die Seiten-Zeile schlanker aufgebaut ist: .az-row
   TRAEGT hier data-libm-su-oeffnen direkt, kein zusaetzlicher Wrapper wie bei
   der Link-Kachel, die Klasse landet darum unmittelbar auf .az-row selbst. */
.libm-su-row--neu { animation: libm-lu-aufleuchten 1.5s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .libm-su-row--neu { animation: none; }
}
.libm-lu-item .btn { min-height: 44px; }
/* .wz-chev/.libm-lu-panel-Regeln HIER ENTFERNT (GROSSER UMBAU 08.08.2026):
   Aufklapp-Chevron und Panel gibt es in dieser Kachel nicht mehr (s.
   Kopfkommentar oben). .wz-chev/.libm-aktion-liste/.libm-aktion-it BLEIBEN
   als Bausteine im Rest der Datei (Domain-Aufklappklappe bzw. das
   Drei-Punkte-Fenster) unveraendert bestehen -- nur ihre Nutzung HIER
   entfaellt, die Regeln selbst sind nicht verwaist. */

/* ============================================================ Pub-Uebersicht (ENTFERNT)
   .libm-lu-pub/.libm-lu-pub__reihe/#libmLuPubText STANDEN HIER (08.08.2026
   vormittags: "der Button 'Online stellen' soll raus ... im Bereich 'Deine
   Links' angelegt werden") UND SIND JETZT SELBST ENTFERNT (08.08.2026,
   spaeter am selben Tag, Umbau „Moeglichkeit 1"): Knopf+Pille+Text dieses
   Blocks sind im neuen Zustandskasten aufgegangen (.libm-lu-kasten weiter
   unten, linkinbio-menue.js: zustandsKastenHTML) — "der bisherige
   Veroeffentlichen-Block der Uebersicht geht in Punkt 1 auf, er darf nicht
   doppelt erscheinen" (Auftrag, woertlich).

   ============================================================ Zustandskasten
   (08.08.2026, Umbau „Moeglichkeit 1", Vorlage menue-entwurf/links-
   veroeffentlichen-entwuerfe.html: Kasten „Moeglichkeit 1"). GANZ OBEN im
   Fenster "Meine Links" — Aufbau nach demselben Rezept wie .libm-badflaeche
   weiter oben (Kante+Flaeche aus einem color-mix()/Token-Ton je nach
   Zustand), hier --p-line/--p-surface-2 offline bzw. --p-accent/--p-accent-
   soft online statt --p-bad. Die Pille selbst (.wv-pill) UND ein evtl.
   mitkopierter Status-Text (.pp-fertig-info/.pp-fertig-fehler/.pp-fertig-sub,
   siehe pubZustandDetailHTML) sind KEINE neuen Klassen — sie kommen
   unveraendert aus basis.css bzw. dem <style>-Block der Eingangsdatei (wie
   schon bei adresseAbschnittHTML/domainAbschnittHTML weiter oben). */
.libm-lu-kasten {
  display: flex; flex-direction: column; gap: .55rem;
  border: 1px solid var(--p-line); border-radius: 12px;
  padding: .9rem 1rem; background: var(--p-surface-2);
  margin-bottom: .2rem;
}
/* .libm-lu-kasten--on ENTFERNT (08.08.2026, Auftrag A: "das orange Feld
   gibt es dann nicht mehr, wenn die Seite online ist") -- der Kasten
   erscheint seither AUSSCHLIESSLICH im Erst-Zustand (nie veroeffentlicht),
   eine "online getoente" Fassung wird nicht mehr gebraucht. */
.libm-lu-kasten__tit { margin: 0; font: 700 1.04rem/1.3 var(--p-display); color: var(--p-fg); }
/* Zaehler "1 von 5" (08.08.2026, Auftrag C) -- gedaempft neben der
   Ueberschrift, dieselbe Zurueckhaltung wie andere Meta-Angaben im Menue
   (vgl. .libm-kopf__lbl/.az-row__sub: Text traegt die Aussage, die Zahl
   daneben nur die Einordnung). */
.libm-lu-kasten__zaehler { font: 600 .78rem/1.3 var(--p-font); color: var(--p-muted); margin-left: .35rem; }
/* Erfolgsmeldung (08.08.2026, Runde 6 neu gebaut, Koordinator woertlich:
   "Der Platz, auf dem der Anlege-Kasten stand, wird von der Erfolgsmeldung
   eingenommen ... Die Flaeche darf denselben Raum fuellen, den der Kasten
   hatte"): darum bewusst dieselbe Kasten-Optik wie .libm-lu-kasten (Rahmen+
   Rundung+Polster+Flaeche), nur mit gruener statt neutraler Tönung, nicht
   mehr die duenne einzeilige Fassung der Vorrunde. Design-Gesetz §11e
   "Passiert von allein" -> leise im Formular, KEINE Snackbar, KEIN Balken.
   Farbe --p-good (Statusfarben-Semantik §3: Gruen = erledigt). Verschwindet
   NICHT selbst animiert -- das uebernimmt seit dieser Runde der Hoehen-
   Uebergang in linkinbio-menue.js (zustandsHoeheWeichLoesen), sobald die
   Ablaufzeit um ist. */
.libm-lu-erfolg {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--p-good) 35%, var(--p-line));
  border-radius: 12px; padding: 1.1rem 1rem;
  background: color-mix(in srgb, var(--p-good) 10%, var(--p-surface-2));
  margin-bottom: .2rem;
  animation: libm-lu-erfolg-ein .2s ease;
}
.libm-lu-erfolg__hak {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--p-good) 18%, var(--p-surface));
  color: var(--p-good);
}
.libm-lu-erfolg__hak svg { width: 19px; height: 19px; }
.libm-lu-erfolg__tit { margin: 0; font: 700 1.02rem/1.3 var(--p-display); color: var(--p-fg); }
.libm-lu-erfolg__txt { margin: 0; font: 500 .86rem/1.35 var(--p-font); color: var(--p-muted); }
@keyframes libm-lu-erfolg-ein { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .libm-lu-erfolg { animation: none; } }

/* ============================================================ Pub-Einstieg (ENTFERNT, INHALT LEBT WEITER)
   (08.08.2026, Max' Auftrag "Ich bin neu auf der Seite ... ich weiss nicht,
   wie ich meinen Link herbekomme"). Das fruehere EIGENSTAENDIGE
   Einstiegs-Fenster (linkinbio-menue.js: pubEinstiegOeffnen/
   pubEinstiegInhaltZeichnen) IST ENTFERNT (08.08.2026, spaeter am selben
   Tag, Umbau „Moeglichkeit 1") — sein Inhalt lebt unveraendert INLINE im
   Zustandskasten oben weiter ("Verwende dessen Logik wieder, aber inline im
   Kasten", Auftrag). Die Bausteine unten sind darum WEITERHIN in Gebrauch,
   nur ihr Aufrufer zog um (linkinbio-menue.js: zustandsKastenOfflineHTML/
   -OnlineHTML/linksUebersichtFussHTML) — die Adressbox selbst bleibt
   .pp-fertig-url (Eingangsdatei-<style>, dieselbe Wiederverwendung wie schon
   bei adresseAbschnittHTML()), Feld/Hinweis/Pille/Text kommen ebenso
   unveraendert aus .wv-input/.libm-fld/.libm-dlg-hint/.wv-pill/basis.css
   bzw. dem <style>-Block der Eingangsdatei. */
/* "Link erstellen"/"Änderungen veröffentlichen": volle Breite ueber
   .btn--block (Design-Gesetz §4, plattform.css), diese Klasse ergaenzt NUR
   die 44px-Mindesthoehe fuer Touch -- dieselbe Beruendung wie
   .libm-anlegen-btn weiter oben, eigene Klasse statt jener, weil deren Name/
   Kommentar auf das Anlege-Fenster gemuenzt sind. */
.libm-pube-btn { min-height: 44px; }
/* Status-Block waehrend Senden/Fehler/Anmelden/Vergeben/Zugross/Aus -- Pille
   (.wv-pill) ueber dem mitkopierten Text (pubKopfZustand()/
   pubZustandDetailHTML()). Seit dem Umbau „Moeglichkeit 1" an ZWEI Stellen
   im Gebrauch: im Zustandskasten (Zustand offline, "Link erstellen") UND im
   Fuss weiter unten (Zustand online, "Änderungen veröffentlichen"). */
.libm-pube-status { display: flex; flex-direction: column; gap: .5rem; }
/* .libm-pube-erfolg ENTFERNT (08.08.2026, Umbau „Moeglichkeit 1") -- die
   grosse Erfolgszeile ("Ihre Seite ist jetzt online erreichbar.") ist durch
   die Kasten-Ueberschrift .libm-lu-kasten__tit weiter oben ersetzt (dieselbe
   Groessen-/Schrift-Kalibrierung, 1.04rem/700 Space Grotesk, --p-fg, jetzt
   fuer BEIDE Kasten-Zustaende gemeinsam statt nur fuer den Online-Fall). */
/* Adress-Kasten, jetzt im eigenen Fenster "Teilen" (Nachbesserung
   08.08.2026, Max' Befund mit Bild: "Der Link muss deutlicher zu sehen
   sein. Er ist zu unscheinbar." -- stand urspruenglich als blasser
   .az-row__sub-Text da). Die Adresse ist das, was der Kunde weitergibt --
   darum das auffaelligste Element dieses Bereichs: eigener Kasten, dieselbe
   12px-Rundung wie .libm-lu-kasten/.libm-lu-erfolg, Flaeche in
   --p-accent-soft (dasselbe gedaempfte Orange-Paar wie .libm-mlpille--off/
   .libm-it[aria-current] an anderer Stelle dieser Datei -- kein neuer
   Farbton).
   UMGEBAUT (grosser Umbau 08.08.2026, Auftrag Punkt 1 "Kopiersymbol in den
   Adress-Kasten"): .libm-lu-adrbox ist jetzt ein reiner <div>-Rahmen mit
   ZWEI Kindern -- .libm-lu-adrbox__link (der bisherige <a>, traegt
   weiterhin Icon+Text als echten Link) und .libm-lu-adrbox__kop (NEUES
   Kopiersymbol). Grund: ein <button> INNERHALB eines <a> ist ungueltiges
   HTML (zwei interaktive Elemente ineinander) -- darum jetzt Geschwister
   statt Eltern/Kind, optisch UNVERAENDERT derselbe Kasten.
   Umbruch: KEIN Ellipsen-Abschneiden, overflow-wrap:anywhere + min-width:0
   auf dem Flex-Kind (ohne min-width:0 verhindert der Flexbox-Default
   min-width:auto das Schrumpfen/Umbrechen unter der Inhaltsbreite -- genau
   der Fall, der am Handy zu waagerechtem Überlauf fuehren wuerde). */
.libm-lu-adrbox {
  display: flex; align-items: flex-start; gap: .5rem;
  border: 1px solid var(--p-line); border-radius: 12px;
  padding: .7rem .85rem; margin-bottom: .1rem;
  background: var(--p-accent-soft);
}
.libm-lu-adrbox__link {
  display: flex; align-items: flex-start; gap: .5rem;
  flex: 1 1 auto; min-width: 0;
  text-decoration: none;
  border-radius: 6px;
}
.libm-lu-adrbox__link:hover .libm-lu-adrbox__txt { text-decoration: underline; }
.libm-lu-adrbox__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--p-brand-soft); }
.libm-lu-adrbox__ic { flex: none; width: 18px; height: 18px; margin-top: .17rem; color: var(--p-accent-text); }
.libm-lu-adrbox__ic svg { width: 100%; height: 100%; }
.libm-lu-adrbox__txt {
  flex: 1 1 auto; min-width: 0;
  font: 700 .95rem/1.4 var(--p-font); color: var(--p-accent-text);
  overflow-wrap: anywhere;
}
/* Kopiersymbol (Auftrag Punkt 1): 24x24 sichtbar + ::before inset:-10px ->
   44x44 Trefferflaeche, DIESELBE Technik/DASSELBE Mass wie .libm-it__mehr
   weiter oben (dort dokumentiert per Ecken-Probe nachgemessen) -- kein
   zweites, abweichendes Kalibrierungsmass fuer denselben Zweck. */
.libm-lu-adrbox__kop {
  position: relative; flex: none; align-self: center;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; background: transparent; color: var(--p-accent-text);
  cursor: pointer;
}
.libm-lu-adrbox__kop::before { content: ""; position: absolute; inset: -10px; }
.libm-lu-adrbox__kop svg { width: 16px; height: 16px; pointer-events: none; }
.libm-lu-adrbox__kop:hover { background: color-mix(in srgb, var(--p-accent) 18%, transparent); }
.libm-lu-adrbox__kop:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* Kopieren/Öffnen unter der Adresse -- dieselbe Knopf-Reihe wie in der
   Links-Uebersicht (.libm-lu-item .btn), hier eigene, kleinere Huelle statt
   .az-row/.az-row__meta (dieses Fenster zeigt keine Zeilenliste). */
/* flex:1 seit Runde 14 (steht jetzt in .wv-dialog__foot, s. linkTeilenFussHTML):
   ohne flex:1 wuerde .wv-dialog__foot (justify-content:flex-end) diese Zeile
   auf ihre Inhaltsbreite zusammenschieben, das eigene flex-wrap liefe damit
   nie an -- flex:1 gibt ihr die volle Fuss-Breite, WORIN sie bei schmalen
   Fenstern (390px, drei Knoepfe) selbst umbricht. */
.libm-pube-adrreihe { display: flex; flex: 1; gap: .5rem; flex-wrap: wrap; }
.libm-pube-adrreihe .btn { min-height: 44px; }

/* ============================================================ Fuss der Links-Uebersicht
   (08.08.2026, Umbau „Moeglichkeit 1"). GANZ UNTEN im Fenster "Meine Links"
   (Auftrag Punkt 3): "+ Link anlegen" + ggf. "Änderungen veröffentlichen" —
   siehe linkinbio-menue.js: linksUebersichtFussHTML. Beide Knoepfe bleiben
   .btn--ghost (Design-Gesetz §3/§6, EIN gefuellter oranger Knopf pro Flaeche
   — der ist im Zustandskasten darueber bereits vergeben).
   UMGEZOGEN Runde 14 (Max: "Leiste ueberall nachruesten"): steht jetzt im
   echten .wv-dialog__foot statt lose am Ende des scrollenden Koerpers --
   die fruehere eigene Trennlinie (border-top/padding-top/margin-top) entfaellt
   darum (der Fuss trennt sich bereits durch den Sprung aus dem scrollenden
   Bereich selbst, keine zweite Kante noetig). .libm-lu-fuss bleibt die
   INNERE senkrechte Stapel-Huelle (zwei Knoepfe + optionaler Status-Text
   untereinander, ".wv-dialog__foot" selbst ist eine WAAGERECHTE Zeile fuer
   den ueblichen Fall "1-2 Knoepfe nebeneinander") -- flex:1, damit sie die
   GANZE Fuss-Breite einnimmt statt an den rechten Rand zu schrumpfen. */
.libm-lu-fuss { display: flex; flex: 1; flex-direction: column; gap: .5rem; }
.libm-lu-fussbtn { min-height: 44px; }

/* "Speichern" (Runde 14, Design-Gesetz §10d: "Sonderform 'Speichern' im
   Editor: Umriss-Knopf mit orangem Text und Disketten-Icon"). .btn--ghost
   liefert den Umriss (basis.css/plattform.css) UND faerbt Text/Kante beim
   Hover bereits orange -- diese Klasse macht GENAU das den STAENDIGEN
   Zustand (nicht erst bei :hover), wie die Sonderform es verlangt. */
.libm-speichern-btn { display: inline-flex; align-items: center; gap: .45rem; color: var(--p-accent-text); border-color: var(--p-accent); min-height: 44px; }
.libm-speichern-btn:hover { color: var(--p-accent-text); }
.libm-speichern-btn svg { width: 18px; height: 18px; flex: none; }

/* DER ALTE SCREEN DARF NICHT SICHTBAR DAZWISCHENSPRINGEN (Auftrag, GEMESSEN
   per Screenshot, echter Befund): "Veroeffentlichen" im Pub-Kopf schaltet
   den dahinterliegenden #fertigScreen unveraendert ein (konfigurator-
   motor.js, veroeffentlichen()) -- der native Dialog-Backdrop ist aber
   ABSICHTLICH TRANSPARENT (Design-Gesetz §11a, "kein Grauschleier") UND das
   Fenster selbst schmaler als der Bildschirm (min(40rem, 100vw - 2rem)).
   #fertigScreen fuellt dagegen die GANZE Buehne (Kommentar in der
   Eingangsdatei: "Verdeckt Kopf + Arbeitsflaeche") -- an den Raendern NEBEN/
   UEBER dem schmaleren Dialog blieb es darum sichtbar (Kopfzeile "Weiter
   bearbeiten"/Titel ragte oben heraus, GEMESSEN am Screenshot). visibility
   (nicht display:none) haelt Layout/Groessen unangetastet, falls Motor-Code
   sie je abfragt -- nimmt sie nur aus dem Bild und aus der Tab-Reihenfolge.
   :has() ist in Chrome/Chromium seit Version 105 verfuegbar (diese Plattform
   nutzt an anderer Stelle bereits @starting-style, Design-Gesetz §11a --
   ein neuerer Baustein als :has()). Gilt fuer JEDEN offenen Dialog dieses
   Menues, nicht nur die Links-Uebersicht — betrifft aber praktisch nur sie,
   weil ausschliesslich ihr Veroeffentlichen-Knopf 'zeigt-fertig' ausloesen
   kann. */
body:has(.libm-dialog[open]) #fertigScreen { visibility: hidden; }

/* ============================================================ AUFGEHOBEN
   (10.08.2026, Stift zurueckgeholt, konfigurator-motor.js ~Z. 3134 hat die
   ganze Geschichte): die #app-Uebersteuerung, die hier seit Runde 19
   (09.08.2026) padding-right:0 erzwang, WEIL die Eingangsdatei fuer jene
   Runde tabu war, ist ersatzlos entfernt. Diese Runde durfte beide Dateien
   tragen, darum steht der wahre Wert jetzt direkt an der Quelle
   (link-in-bio-konfigurator-eingang.html, ".ms4-live .ms4-blk", selbst auf
   padding-right:0 gesetzt, Kommentar dort) -- zwei Regeln fuer denselben
   Wert waeren nur noch Verwirrung ohne Nutzen gewesen. */
