/* Liste-Baustein: Inline-Bearbeiten. Nutzt die gemeinsame Werkzeug-Sprache (.wz-* aus
   kern/editor-shell.css) - neutral, im Bearbeiten-Modus immer sichtbar (kein Hover), fingergroß.
   Das Karten-DESIGN kommt von der Kundenseite; hier nur die Bearbeiten-Hilfen. */

/* Editierbares Feld in der Karte: dezenter Umriss (outline statt border -> verschiebt nichts am
   Seitendesign), kein Hover nötig. Wie beim Text-Baustein. */
.editor-bearbeiten .li-feld {
  cursor: text;
  outline: 1px dashed rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
  border-radius: 2px;
  min-height: 1em;
  /* Ein langes WORT ohne Leerzeichen (Kilian, live: Testtext ohne Umbruch) bricht sonst nicht um,
     sondern sprengt den Kasten - die Karte daneben (kuerzerer Text) bleibt normal hoch, die
     Knoepfe darunter rutschen dadurch auf unterschiedliche Hoehen. overflow-wrap:anywhere bricht
     zur Not MITTEN im Wort, nicht erst an Leerzeichen (staerker als break-word). */
  overflow-wrap: anywhere;
}
.editor-bearbeiten .li-feld:hover { outline-color: var(--wz-linie-stark); }
.editor-bearbeiten .li-feld[contenteditable="true"] { outline: 2px solid var(--wz-ink); }
.editor-bearbeiten .li-feld:empty::before {
  content: attr(data-platzhalter);
  color: #9a9a9a;
  font-style: italic;
}

/* Bild-Feld. Aufbau: .li-bild ist nur die Huelle (Anker fuer die Zeichen), DARIN zwei Knoepfe:
   .li-bild-waehlen (das Bild selbst - antippen waehlt/tauscht) und .li-bild-weg (das × oben
   rechts IM Bild - entfernt es). Einen separaten "Bild ändern"-Knopf gibt es nicht mehr; der lag
   frueher unten drueber, waehrend der leere "+"-Kasten blosse Deko war und auf nichts reagierte. */
.li-bild { position: relative; display: block; }

/* Das Bild IST der Knopf: hier nur der Reset der Browser-Optik eines <button> - er soll wie das
   nackte Bild aussehen, nicht wie ein Knopf. Der Klassen-Selektor (0,1,0) schlaegt dabei sicher
   ein globales `button { ... }` (0,0,1) aus der Kundenseite. */
/* DAS BILD IST DER ANKER, NICHT DER KNOPF (14.07.2026, dritter Anlauf - die ersten beiden waren
   Regler-Drehen an einer falschen Struktur).
   Das Tausch-Zeichen sass hartnaeckig zu tief. Erst lag es am margin-bottom des Kundenbildes (15px
   Abstand zur Bildunterschrift), dann am Baseline-Spalt (ein <img> ist inline, sitzt auf der
   Schriftlinie, darunter bleibt Platz fuer Unterlaengen). Beide Male habe ich das LOCH gestopft und
   nicht gefragt, warum staendig eins da ist.
   Der Grund: das Zeichen hing an der Box des KNOPFES - und wie hoch die ist, entscheidet die
   Kundenseite (margin, line-height, padding, Rahmen des Bildes). Das CMS kennt diese Werte nicht und
   wird sie nie alle kennen. Jede neue Kundenseite haette eine neue Sorte Restpixel mitgebracht.
   Jetzt liegen Bild und Zeichen in DERSELBEN Rasterzelle (display: grid, beide grid-area 1/1). Die
   Zelle IST das Bild, das Zeichen sitzt mit align-self/justify-self in dessen Ecke. Da kann kein
   Abstand mehr dazwischenrutschen - unabhaengig davon, was die Kundenseite ihrem Bild antut.
   Nebenbei blockifiziert grid das Bild: der Baseline-Spalt kann gar nicht mehr entstehen. */
.li-bild-waehlen {
  position: relative;
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
/* Das Bild belegt die Zelle EXPLIZIT - sonst schiebt die automatische Platzierung es in eine zweite
   Zeile, weil das Zeichen die erste schon fuer sich beansprucht hat. Beide sollen uebereinander
   liegen, nicht untereinander.
   margin: 0 ist die SICHERUNG. Ein Kundenbild traegt fast immer Abstand nach aussen (hier 15px zur
   Bildunterschrift), und der wuerde die Rasterzelle aufblaehen: die Zelle waere hoeher als das Bild,
   das Zeichen saesse an der Zellenkante - also unter dem Bild. Die Zelle muss das Bild sein, nichts
   sonst. Der Abstand wandert dafuer an die Huelle (siehe liste-inline.js); geht das schief, fehlt nur
   Luft zur Bildunterschrift - das Zeichen sitzt trotzdem richtig. Position vor Kosmetik. */
.li-bild-waehlen > img { grid-area: 1 / 1; margin: 0; }
/* :focus-visible statt :focus - Ring nur bei Tab-Navigation, nie beim blossen Maus-Klick
   (dieselbe Regel wie .wz-knopf in editor-shell.css). */
.li-bild-waehlen:focus-visible { outline: 2px solid var(--wz-ink); outline-offset: 2px; }
/* Kein natives Antipp-Aufblitzen (manche Mobil-Browser faerben sonst nur EIN Kind-Element kurz
   ein, nicht Icon und Wort gleich) - der Druck-Effekt unten ist die einzige Rueckmeldung. */
.li-bild-waehlen { -webkit-tap-highlight-color: transparent; }

/* × zum Bild-Entfernen: obere Ecke IM Bild. Dieselbe Machart wie die anderen Ecken-Werkzeuge
   (44px Flaeche, 18px Zeichen, rund, heller Grund fuer Lesbarkeit ueber dunklen Fotos).
   Praefix-Selektor (.li-bild ...) ist PFLICHT: .wz-knopf aus editor-shell.css hat dieselbe
   Spezifitaet und laedt auf manchen Seiten SPAETER - ohne Praefix saehe das × wie ein weisser
   Kasten-Knopf aus. */
.li-bild .li-bild-weg {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  width: var(--wz-ziel);
  min-width: var(--wz-ziel);
  height: var(--wz-ziel);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  /* Schlagschatten: der helle Kreis geht sonst auf einem HELLEN/weissen Foto unter (Kilian, live:
     "das Kreuz kann ich fast nicht mehr sehen"). Die Annahme "Fotos sind dunkler als Weiss" (siehe
     Kommentar oben) stimmt bei einem hellen Produktfoto nicht - der Schatten schafft eine sichtbare
     Kante unabhaengig davon, was darunter liegt. */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  color: var(--wz-ink);
  transition: background 0.15s ease; /* 0.15s ease = derselbe Uebergang wie .wz-knopf (kern) */
}
.li-bild .li-bild-weg:hover { border: none; background: rgba(255, 255, 255, 0.95); }
.li-bild .li-bild-weg svg { display: block; width: 18px; height: 18px; }
/* Kein Bild da -> nichts zu entfernen. Der leere Kasten zeigt nur das "+". */
.li-bild-leer .li-bild-weg { display: none; }

/* Neuer Eintrag ohne Bild: statt des von der Vorlage geklonten Fotos ein neutraler Kasten
   mit "+ Bild" - macht sofort klar "hier fehlt noch ein Bild", statt so auszusehen, als waere
   schon ein (falsches) Bild gesetzt. Das <img> bleibt im Layout (visibility, nicht display),
   damit die Karte ihre Groesse/ihr Seitenverhaeltnis behaelt. */
.li-bild-leer img { visibility: hidden; }
/* "+ Bild": Icon UND Wort, dieselbe BAUART wie der Knopf-Platzhalter (.li-knoepfe .li-knopf-add
   weiter unten: gestrichelter Rahmen, #f2f2f2-Grund, var(--wz-muted), Hover dunkelt nach) - eine
   Sprache fuers ganze System statt zweier aehnlicher.
   14.07.2026 (Kilian, live): frueher stand hier nur ein Hintergrund-SVG ohne Text, weil die
   FORM (16:9-Kasten) allein schon "Bild" sagen sollte - tat sie nicht zuverlaessig genug. Jetzt
   traegt der Kasten dasselbe Wort wie der Knopf-Platzhalter. Echtes Element statt Hintergrundbild
   (in liste-inline.js angelegt): ein background-image kann keinen Text tragen.
   Die GROESSE ist bewusst NICHT 1:1 vom Knopf uebernommen (18px/0.9rem): der Bildkasten ist ein
   Vielfaches der Flaeche eines Knopfes (aspect-ratio 1:1 oder 16:9 auf voller Kartenbreite vs.
   ~44px hoher Knopf) - bei gleicher Schrift wirkte "Bild" darin verloren (Kilian, live).
   ERSTER ANLAUF (verworfen): Icon und Text UNABHAENGIG hochgesetzt (32px / 1rem). Das Icon war
   dann 2x so hoch wie der Text - beim Knopf ist es nur 1,25x (18px Icon zu 0.9rem/14.4px Text).
   Das Icon erschlug den Text optisch, obwohl der in Pixeln sogar groesser war als beim Knopf
   (Kilian, live: "die Schrift ist kleiner als beim Knopf", obwohl 1rem > 0.9rem) - das eigentliche
   Problem war das VERHAELTNIS, nicht die absolute Groesse.
   Jetzt: Icon UND Text um denselben Faktor (~1.5x) aus dem Knopf hochskaliert - dasselbe
   Verhaeltnis, nur groesser, statt zwei einzeln gewuerfelter Werte. */
.li-bild-plus {
  display: none;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  border: 1px dashed var(--wz-linie, #cfcfcf);
  border-radius: 8px;
  color: var(--wz-muted);
  font-family: var(--wz-font);
  font-size: 1.35rem;
  font-weight: 500;
  pointer-events: none;
}
.li-bild-leer .li-bild-plus { display: flex; }
.li-bild-plus svg { display: block; width: 28px; height: 28px; }
/* KEINE eigene Reaktion mehr (weder Hover-Nachdunkeln noch Druck-Effekt) - die Karte hat laengst
   ihr eigenes ".li-edit.li-gedrueckt { scale(0.985) }" (siehe oben in dieser Datei), das reicht
   als Rueckmeldung (Kilian, live: "der ganze Eintrag wird schon reingedrueckt, das reicht").
   Zwei fruehere Anlaeufe hier (Hover-Nachdunkeln, dann ein eigener Druck-Effekt) wirkten auf
   Icon und Wort ungleich - beide sassen unterschiedlich weit vom Mittelpunkt der grossen
   Bild-Flaeche entfernt, ein Kreis-Icon reagiert auf Farb-/Groessenaenderung ausserdem
   auffaelliger als ein duennes Wort. Einfacher, ohne den Widerspruch zu riskieren: der
   Platzhalter bleibt optisch ruhig, das Antipp-Aufblitzen bleibt trotzdem abgeschaltet
   (.li-bild-waehlen oben). */
/* Stilles Zeichen in der Ecke eines BEFUELLTEN Bildes: sagt "tauschbar", ohne das Foto zu
   verdecken. Am Handy gibt es kein Hover - der Hinweis muss also immer sichtbar sein (DESIGN.md).
   Masse NICHT geraten, sondern vom vorhandenen Ecken-Werkzeug uebernommen (.li-wz-weg, das × zum
   Entfernen): 44px Flaeche, 18px Zeichen, rund, heller Grund fuer Lesbarkeit ueber dunklen Fotos.
   Es ist dessen Zwilling in der unteren Ecke - kein neues Werkzeug-Vokabular. */
.li-bild-icon {
  /* In der Zelle DES BILDES (siehe .li-bild-waehlen oben), unten rechts, 0.4rem von seinen Kanten -
     dieselben 0.4rem, die das × oben im Bild traegt. Kein position/right/bottom mehr: die haetten
     sich wieder auf die KNOPF-Box bezogen, und genau die ist der falsche Anker. */
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  margin: 0.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wz-ziel);
  height: var(--wz-ziel);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  /* Schlagschatten aus demselben Grund wie bei .li-bild-weg oben: sichtbare Kante unabhaengig von
     der Bildhelligkeit (Kilian, live: "den Knopf, um Bilder zu aendern, kann ich auch fast nicht
     mehr sehen"). */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  color: var(--wz-ink);
  pointer-events: none; /* der ganze Bild-Knopf faengt den Klick - das Zeichen ist nur Anzeige */
  transition: background 0.15s ease; /* 0.15s ease = derselbe Uebergang wie .wz-knopf (kern) */
}
.li-bild-icon svg { display: block; width: 18px; height: 18px; }
/* Hover MUSS vom Eltern-Knopf kommen: das Zeichen hat pointer-events:none (der Bild-Knopf soll den
   Klick fangen, nicht das Zeichen) - ein :hover auf .li-bild-icon selbst wuerde deshalb NIE feuern.
   Genau daran wirkte es tot, waehrend das × daneben reagierte. Die Maus faehrt ohnehin ueber das
   Bild, nicht ueber das Zeichen: der Knopf ist die richtige Stelle, das zu bemerken. */
.li-bild-waehlen:hover .li-bild-icon { background: rgba(255, 255, 255, 0.95); }
/* Leerer Kasten: hier spricht schon das grosse "+" in der Mitte. Ein zweites Zeichen daneben
   waere genau die Redundanz, die wir abgeschafft haben. */
.li-bild-leer .li-bild-icon { display: none; }

/* Karte im Bearbeiten-Modus dezent umranden (outline verschiebt nichts), damit die Werkzeuge
   klar zu ihrer Karte gehören. */
.li-edit {
  position: relative; /* Anker für die Mülltonne in der Ecke */
  outline: 1px solid var(--wz-linie);
  outline-offset: 4px;
  border-radius: var(--wz-radius);
}
/* Bearbeiten-Modus: der Karten-Hintergrund ist Greifzone zum Ziehen (Sortieren). Bedienelemente
   (Felder/Knöpfe/Bild) setzen ihren eigenen Cursor und lösen kein Ziehen aus (siehe JS).
   user-select: none - sonst markiert der Browser beim Wegziehen Text/Bilder statt zu schieben. */
.editor-bearbeiten .li-edit {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
/* Bilder/Links nicht vom Browser selbst ziehbar (natives HTML-Drag), sonst "greift" man das Bild. */
.editor-bearbeiten .li-edit img,
.editor-bearbeiten .li-edit a {
  -webkit-user-drag: none;
  user-drag: none;
}
/* Eingabe/Editier-Stellen behalten ihre Text-Auswahl - dort MUSS man markieren können. */
.editor-bearbeiten .li-edit input,
.editor-bearbeiten .li-edit textarea,
.editor-bearbeiten .li-edit select,
.editor-bearbeiten .li-feld,
.editor-bearbeiten .li-edit [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}

/* Eintrags-Werkzeuge: enthält jetzt nur noch die versteckten Sortier-Pfeile (Tastatur-Reserve)
   und die absolut positionierte Mülltonne - nimmt daher selbst keinen Platz mehr. */
.li-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.li-wz-btn { min-width: var(--wz-ziel); padding: 0.4rem 0.7rem; font-size: 0.85rem; }
.li-wz-btn:disabled { opacity: 0.4; cursor: default; }
/* Icon-only Werkzeug: quadratisch, alle drei gleich gross - eine Form. Icon erbt --wz-ink.
   Bewusst dezent (schlichter Knopf, kein hervorgehobener Hintergrund): es sind HILFSwerkzeuge,
   kein Inhalt - und "Loeschen" darf man nicht in den Vordergrund stellen. Die einzige betonte
   Aktion bleibt "+ Eintrag hinzufuegen". */
/* Icon-Werkzeug OHNE Kaestchen: reines Symbol, keine Box/Rahmen (drei gerahmte Kaestchen sehen
   aus wie eine alte Toolbar). Volle Tippflaeche bleibt (44px), nur unsichtbar. Immer sichtbar
   (kein Hover-Zwang - Handy), Hover nur als dezenter runder Schimmer fuer die Maus.
   Selektoren mit .li-werkzeuge-Praefix, damit sie .wz-knopf sicher schlagen (Ladereihenfolge-fest). */
.li-werkzeuge .li-wz-icon {
  width: var(--wz-ziel); min-width: var(--wz-ziel); height: var(--wz-ziel);
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  color: inherit;
}
.li-werkzeuge .li-wz-icon:hover { border: none; background: rgba(127, 127, 127, 0.36); }
/* Groesse an die vorhandenen Seiten-Icons gekoppelt (Nav/Instagram/Chevrons = 18px), damit die
   Werkzeuge Teil DESSELBEN Systems sind und nicht ueberdimensioniert wirken. */
.li-werkzeuge .li-wz-icon svg { display: block; width: 18px; height: 18px; }

/* Sortier-Pfeile nur noch für Tastatur/Screenreader - visuell versteckt (a11y-Reserve). */
.li-wz-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}

/* Eintrag löschen (Mülltonne): UNTERE rechte Ecke der KARTE - der spiegelbildliche Zwilling des ×
   in der OBEREN rechten Ecke des BILDES. Beide tragen exakt dieselben Werte (0.4rem zur Ecke,
   44px Flaeche, 18px Zeichen), damit kein Zeichen weiter von seiner Ecke weg sitzt als das andere.
   Zwei Sackgassen sind belegt und duerfen nicht zurueckkommen:
   1. OBEN rechts in der Karten-Ecke (der Urzustand): Weil das Foto die obere Kartenbreite ganz
      ausfuellt, lag das Zeichen mitten AUF dem Bild - es sah aus, als loesche es das Foto.
   2. Im normalen FLUSS unter dem Text: Dort landet das Zeichen 13px (unsichtbare Innenluft des
      44px-Knopfes) + 24px (Karten-Padding) = 37px von der Kante - fast doppelt so weit weg wie
      seine Geschwister im Bild (19px). Es wirkte verloren und unsymmetrisch, nicht "in der Ecke".
   Der Grund liegt IMMER, nicht erst beim Hover: sonst waere die Muelltonne das einzige der drei
   Zeichen ohne Kreis (die beiden im Bild tragen einen hellen Grund, damit sie ueber Fotos lesbar
   bleiben) - sie saehe daneben tot und unfertig aus. Der Ton ist derselbe Schimmer, der bisher nur
   beim Hover erschien (7% Schwarz auf Weiss); der Hover geht dann auf --wz-fokus (12%) hoch.
   Das ist KEINE Betonung des Loeschens (dagegen spricht weiterhin alles) - es ist EINE Form fuer
   drei Zeichen. Auf hellem Grund traegt die Karte den Kontrast selbst, ein weisser Kreis wie im
   Bild waere hier unsichtbar; deshalb Grau statt Weiss. */
.li-werkzeuge .li-wz-icon.li-wz-weg {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  z-index: 2;
  background: rgba(127, 127, 127, 0.28);
  transition: background 0.15s ease; /* 0.15s ease = derselbe Uebergang wie .wz-knopf (kern) */
}
.li-werkzeuge .li-wz-icon.li-wz-weg:hover { background: rgba(127, 127, 127, 0.36); }

/* DAS WERKZEUG ZEIGT SEINE REICHWEITE. Beruehrt man die Muelltonne, markiert sich die GANZE KARTE -
   der Umriss, den sie im Bearbeiten-Modus ohnehin traegt, wird kraeftig (var(--wz-linie-stark), kein
   neuer Wert, keine Alarmfarbe).
   Warum das noetig ist: Die Muelltonne sitzt in der unteren rechten Ecke - also direkt unter der
   Knopfzeile. Naehe liest sich als Zugehoerigkeit (Kilian, live: "sie sieht aus, als stuende sie im
   Zusammenhang mit den Knoepfen"). Und die Position laesst sich nicht retten: oben rechts lag sie
   auf dem Foto, im Fluss unter dem Text wirkte sie verloren - beide Sackgassen stehen oben.
   Also behauptet das Werkzeug seine Reichweite nicht mehr durch seine LAGE, es ZEIGT sie, sobald man
   es anfasst. Man sieht vor dem Klick, was verschwinden wuerde.
   :focus-visible ist mitgenommen, damit die Tastatur dieselbe Auskunft bekommt wie die Maus. Am Handy
   gibt es kein Hover - dort traegt die Rueckfrage die Last (siehe liste-inline.js). */
.editor-bearbeiten .li-edit:has(.li-wz-weg:hover),
.editor-bearbeiten .li-edit:has(.li-wz-weg:focus-visible) {
  outline-color: currentColor;
}
/* Platz fuer die Ecke schaffen - sonst laege die Muelltonne auf dem Text. Der Baustein kennt das
   Padding der Kundenkarte nicht, also reserviert er die Hoehe selbst und NUR im Bearbeiten-Modus:
   Knopf (44px) + 0.4rem Abstand oben und unten. Danach faellt die Karte auf ihr eigenes Mass
   zurueck - die oeffentliche Seite sieht nichts davon. */
.editor-bearbeiten .li-edit { padding-bottom: calc(var(--wz-ziel) + 0.8rem); }

/* Hinweis über der Liste (nur im Bearbeiten-Modus): erklärt die einzige Sache, die man NICHT
   sehen kann - dass Einträge greif- und ziehbar sind. Bewusst ein Satz statt eines Tutorials.
   grid-column/flex-basis: der Hinweis liegt im Layout-Container der Karten und soll dort eine
   eigene volle Zeile bekommen, statt sich als "Karte" in die Reihe zu stellen. */
.li-hinweis {
  grid-column: 1 / -1;
  flex-basis: 100%;
  width: 100%;
  margin: 0 0 0.8rem;
  /* Der Hinweis spannt die ganze Listenbreite; zentriert steht er mittig ueber den
     Karten statt linksbuendig an der Kante (Kilian, Shop am Handy: "wirkt komisch"). */
  text-align: center;
  font-family: var(--wz-font);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--wz-muted);
}

/* --- Ziehen zum Sortieren: Bewegung --- */
/* Motion-Sprache wie das Anmeldefenster (login-panel.css): ease-out-quart, 150-250ms, KEIN Federn.
   Modell: die Karte KLEBT auf der Seite. Drücken drückt sie ein Stück ein (Haftung), beim Ablösen
   löst sie sich und schwebt. Kein Kippen/Rotieren - Dinge kippen nicht, wenn man sie anhebt. */
.editor-bearbeiten .li-edit {
  transition: transform 0.14s cubic-bezier(0.25, 1, 0.5, 1);
}
/* TRANSFORM GEHOERT IM BEARBEITEN-MODUS DEM WERKZEUG - und zwar mit !important.
   Die Kundenseite darf transform auf ihren Karten benutzen, und sie tut es: Hover hebt die Karte an,
   eine Einblend-Animation setzt sie zurueck. Auf index.html steht dahinter
   `.community-grid.js-stagger.is-visible .community-member` - vier Klassen. Dieser Baustein kennt
   den Selektor nicht und koennte ihn auch nicht ueberbieten: er weiss nicht, wie die Karte der
   naechsten Kundenseite heisst. Das Ergebnis war eine Karte, die sich ziehen liess, aber auf das
   Anfassen sichtbar nicht reagierte - das Eindruecken kam nie an.
   Genau dafuer ist !important da: das Greifen ist ein WERKZEUG-Zustand und muss die Seitenoptik
   schlagen, solange die Hand auf der Karte liegt. Danach faellt alles zurueck an die Kundenseite.
   Die Reihenfolge zaehlt weiterhin - :hover steht VOR .li-gedrueckt, beide !important, die
   spaetere Regel gewinnt. */
.editor-bearbeiten .li-edit:hover { transform: none !important; }
/* Gedrückt: geht ein Stück REIN. */
.editor-bearbeiten .li-edit.li-gedrueckt { transform: scale(0.985) !important; }

/* Der abgehobene Klon: startet im gedrückten Zustand und "ploppt" heraus. Der Plopp entsteht aus
   dem KONTRAST (eingedrückt -> abgehoben), nicht aus einem Gummi-Overshoot. */
/* --ghost-skala: 1 bei normalen Karten. Sehr hohe Karten werden beim Anheben VERKLEINERT (Wert
   < 1, gesetzt in liste-inline.js) - ganz, nicht abgeschnitten. Der Plopp multipliziert sich
   darauf, bleibt also in jeder Groesse erhalten. */
.li-ghost {
  position: fixed; z-index: 1000; margin: 0; pointer-events: none;
  background: #fff; border-radius: var(--wz-radius);
  transform: scale(calc(var(--ghost-skala, 1) * 0.985));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.li-ghost.li-ghost-an {
  transform: scale(calc(var(--ghost-skala, 1) * 1.03));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

/* Bewegung ist nie Pflicht: wer sie abbestellt hat, bekommt den Zustand ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  .editor-bearbeiten .li-edit,
  .li-ghost { transition: none; }
  /* !important muss hier mitziehen: die Regel oben traegt es (sie muss die Kundenseite schlagen),
     und ohne !important koennte diese hier sie nicht mehr abschalten. Wer Bewegung abbestellt hat,
     bekommt sie sonst trotzdem. */
  .editor-bearbeiten .li-edit.li-gedrueckt { transform: none !important; }
  .li-ghost, .li-ghost.li-ghost-an { transform: none; }
}
/* Die zurückbleibende Lücke zeigt, wohin der Eintrag fällt. */
.li-platzhalter { opacity: 0.4; }
.li-platzhalter > * { visibility: hidden; }
/* Während des Ziehens: kein Scrollen/Markieren, Cursor als "Faust". */
body.li-zieht-gerade { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.li-zieht-gerade .editor-bearbeiten .li-edit { cursor: grabbing; }

/* "+ Eintrag hinzufügen" als eigener, gut sichtbarer Block. Icon + Text mit Abstand. */
.li-add { margin-top: 1rem; gap: 0.45rem; }
.li-add svg { display: block; }

/* Link/Kontakt-Feld: Typ-Wahl (Telefon/E-Mail/Web) + Eingabe unter dem Knopf. */
.li-link { margin-top: 0.6rem; }
.li-link-zeile { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; }
.li-link-typ { flex: 0 0 auto; }
.li-link-wert { flex: 1 1 9rem; min-width: 0; }

/* ============================================================================
   KARTEN-KNOEPFE (data-knoepfe)
   ----------------------------------------------------------------------------
   In der Karte steht NUR, was der Besucher sieht: der Knopf und seine Beschriftung. Sonst NICHTS -
   kein Feld, kein Dropdown, kein zweites Zeichen daneben. Alles, was eine EINSTELLUNG ist
   (Beschriftung, Art, Datei, Nummer, Zielseite), steht im BLATT (siehe unten), das am Knopf haengt.

   DER KNOPF IST SELBST DER AUSLOESER - antippen oeffnet sein Blatt. Genau wie beim Bild ("das Bild
   IST der Knopf", siehe .li-bild-waehlen oben). Hier stand frueher ein "Regler" NEBEN dem Knopf:
   er sass damit in der Luecke des Rasters, gehoerte optisch zu keinem seiner beiden Nachbarn und
   frass 44px aus der Zelle - die Knoepfe wurden dadurch ungleich breit, und ein Raster, das nicht
   ausrichtet, ist keins. (Kilian, live: "sollte nirgendwo sein, der ist unnoetig.")

   Die ANORDNUNG (Raster, Spaltenbreite) bestimmt die KUNDENSEITE, nicht das CMS - siehe
   .info-card [data-knoepfe] in deren style.css. Hier steht nur, was die Werkzeuge angeht.
   Deshalb setzt .li-knoepfe KEIN eigenes display/gap: das wuerde das Raster der Kundenseite
   ueberschreiben. (Genau das ist die Grenze zwischen CMS und Kundendesign.) */
.li-knopf-wrap { position: relative; display: flex; max-width: 100%; }
.li-knopf-text { min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; cursor: pointer; }

/* Noch nie beschriftet: der Knopf zeigt, was auf ihm STEHEN KOENNTE, und sagt durch seinen Ton,
   dass es noch niemand getippt hat. Dieselbe Sprache wie die leeren Felder der Karte (kursiv,
   gedaempft) - nur eben in der Farbe, die der Knopf ohnehin traegt.

   EIN VORSCHLAG DARF DIE GEOMETRIE DES KNOPFES NICHT VERAENDERN (14.07.2026).
   Er tat es: "Anmeldung herunterladen" ist laenger, als eine Rasterzelle breit ist - der Knopf brach
   auf zwei Zeilen um und stand hoeher da als sein Nachbar (Kilian, live: "sieht ziemlich schwanger
   aus"). Tippte man ihn an, verschwand der Vorschlag und der Knopf sprang wieder zusammen. Ein
   Knopf, der seine Groesse aendert, je nachdem ob man ihn gerade anschaut, ist kaputt.
   Der Vorschlag ist eine AUSKUNFT - er bleibt einzeilig, egal wie schmal die Zelle ist. Der ECHTE
   Text des Kunden darf weiter umbrechen: das ist sein Knopf, seine Entscheidung. */
.li-knopf-text.li-knopf-blind {
  opacity: 0.6;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ein Knopf ohne Ziel fuehrt nirgendwohin - man sieht es ihm sonst nicht an, er sieht FERTIG aus.
   Er bekommt deshalb den gestrichelten Umriss, den die Karte ohnehin fuer "hier fehlt noch was"
   spricht: exakt die Werte des leeren Feldes (.li-feld oben) - 1px dashed, 35 % Schwarz, 2px Luft.

   Hier stand ein ROTER PUNKT in der Ecke (14.07., verworfen). Zwei Fehler in einem Zeichen:
   1. Rot ist ALARM - "noch kein Ziel gesetzt" ist aber kein Fehler, sondern unfertig. Und die
      Kundenseite hat gar kein Rot; der Punkt kam aus einer fremden Welt (Notification-Badge).
   2. Er behauptete etwas NEBEN dem Knopf, statt den Knopf selbst unfertig aussehen zu lassen.
   Der gestrichelte Rand sagt dasselbe in der Sprache, die der Kunde auf dieser Karte schon zweimal
   gelernt hat (leeres Feld, leerer Bildkasten, Knopf-Platzhalter). Kein neues Vokabular. */
.li-knopf-unfertig .li-knopf-text {
  outline: 1px dashed rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
}

/* Solange das Blatt eines Knopfes offen steht, ist ER markiert - bei drei Knoepfen nebeneinander
   muss man sehen, welchen man gerade einstellt. Kein Farbwechsel, nur ein ruhiger Ring.
   Steht NACH der gestrichelten Regel (gleiche Spezifitaet, die spaetere gewinnt): ein Knopf, den man
   gerade einstellt, traegt den vollen Ring - auch wenn er noch unfertig ist. */
.li-knopf-offen .li-knopf-text { outline: 2px solid var(--wz-ink); outline-offset: 2px; }
/* Und NUR dann laesst er sich beschriften (contenteditable, siehe liste-inline.js). Der Cursor sagt
   es: ueber einem geschlossenen Knopf steht die Hand ("antippen"), ueber dem offenen der Schreib-
   balken ("hier kannst du tippen"). Der erste Klick waehlt also den Knopf, der zweite schreibt -
   deshalb faehrt am Handy keine Tastatur hoch, nur weil man nachschauen wollte. */
.li-knopf-offen .li-knopf-text[contenteditable="true"] { cursor: text; }

/* Sortieren. DIESELBE GESTE wie beim Karten-Ziehen (Maus ab 6px, Finger nach kurzem Halten) -
   niemand soll zwei Bedienweisen lernen. Bewusst OHNE Ghost-Klon: bei hoechstens drei Elementen in
   einer Zeile sieht man beide Nachbarn ohnehin; der gezogene Knopf wird nur gedaempft. */
.li-knopf-zieht { opacity: 0.55; transform: scale(0.97); }
body.li-zieht-gerade .li-knopf-wrap { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .li-knopf-zieht { transform: none; }
}

/* Der Knopf-Platzhalter. Er traegt im HTML die Klassen eines ECHTEN Knopfes der Kundenseite
   (btn secondary-btn, siehe liste-inline.js) und erbt damit deren Hoehe, Rundung und Innenabstand -
   auf jeder Kundenseite, ohne dass hier eine Zahl steht, die von irgendwo abgeschrieben ist.
   Hier drueber liegt nur die PLATZHALTER-SPRACHE, und zwar exakt dieselbe, die der leere Bildkasten
   schon spricht (siehe .li-bild-leer oben): gestrichelter Rahmen, grauer Grund, Plus, neutrale
   Werkzeugfarbe statt Kundenfarbe.

   Der Unterschied zum Bildkasten liegt damit allein in der FORM - und genau das ist der Punkt:
   ein 16:9-Kasten sagt "hier kommt ein Bild hin", ein knopffoermiger Platzhalter sagt "hier kommt
   ein Knopf hin". Vorher waren beide ein 44px-Kreis mit "+" und man konnte sie nicht
   auseinanderhalten (Kilian, live: "man weiss nicht, dass das obere fuer Bilder und das untere
   fuer Knoepfe ist"). Das Wort "Knopf" macht es endgueltig eindeutig.

   Zwei Selektor-Ebenen (.li-knoepfe .li-knopf-add), damit die Regeln sicher ueber der
   .secondary-btn-Regel der Kundenseite liegen - die hat dieselbe Spezifitaet, und welche Datei
   spaeter laedt, ist von Seite zu Seite verschieden. */
.li-knoepfe .li-knopf-add {
  display: flex;                /* fuellt seine Rasterzelle - er ist ein Knopfplatz, kein Etikett */
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 44px;
  border: 1px dashed var(--wz-linie);
  background: #f2f2f2;          /* derselbe Grund wie der leere Bildkasten - eine Sprache */
  color: var(--wz-muted);       /* neutral: ein Platzhalter ist ein Werkzeug, kein Kunden-Knopf */
  font-family: var(--wz-font);
  font-size: 0.9rem;
  font-weight: 500;
  transform: none;              /* die Kundenseite hebt .btn beim Hover an - ein Platzhalter huepft nicht */
}
.li-knoepfe .li-knopf-add:hover {
  border-color: var(--wz-linie-stark);
  background: #ebebeb;
  color: var(--wz-ink);
  transform: none;
}
.li-knoepfe .li-knopf-add:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wz-ink); }
.li-knoepfe .li-knopf-add svg { display: block; width: 18px; height: 18px; }

/* ============================================================================
   DAS BLATT (.li-blatt) - die Einstellung eines Knopfes, direkt AM Knopf
   ----------------------------------------------------------------------------
   ZWEI SPRACHEN, und sie waren vermischt (14.07.2026, teuer gelernt):

     dunkle Konsole  = das WERKZEUG selbst (Anmelden, Modus, Speichern). Es gehoert nicht zur
                       Webseite - deshalb sieht es aus wie ein fremdes Geraet, das man daneben haelt.
     helle .wz-*     = das BEARBEITEN AM INHALT (Felder, Bildkasten, Muelltonne). Es sitzt an dem
                       Ding, das es aendert, und spricht die Sprache der Seite: hell, rund, ruhig.

   Ein Knopf in einer Karte ist INHALT. Seine Einstellung ging trotzdem als schwarze Lade in der
   Konsole auf - quer ueber der Karte, den Nachbarknopf verdeckend. Kilian, live: "Das ist ein
   externes Tool und hat gar nichts mehr mit dem Knopf zu tun, deswegen ist es so haesslich."
   Das ist kein Geschmacksurteil, das ist ein Kategorienfehler - wie ein Systemdialog, der aufgeht,
   weil man in Word ein Wort fett machen will.

   ZWEITER ANLAUF, auch verworfen (14.07.): Das Blatt war dann hell und haengte am Knopf - aber es
   war IMMER NOCH EIN OVERLAY (Popover-API, Top-Layer). Es lag ueber Bild und Text: der Kunde stellte
   seinen Knopf ein und sah dabei genau das nicht mehr, woran er arbeitete. Ein weisses Overlay ist
   ein besseres Overlay, aber es bleibt eins.

   JETZT: Das Blatt liegt IM FLUSS DER KARTE - eine eigene Zeile unter den Knoepfen, volle Breite,
   mit einer Spitze hoch zu dem Knopf, den es einstellt. Die Karte wird hoeher; verdeckt wird nichts.
   Nebenbei ist es weniger Apparat: kein Top-Layer, keine Positionsrechnung, keine Scroll-Verfolgung. */
/* EINE WANNE, KEINE VIERTE KARTE. Das Blatt war weiss, gerundet und umrandet - in einer Karte, die
   weiss, gerundet und umrandet ist, und es enthielt selbst weisse, gerundete, umrandete Kaesten:

     Karte  ->  Blatt  ->  Arten-Liste / Datei-Knopf      = VIER Rahmen-Ebenen ineinander

   Das ist es, was "hochkomplex" aussieht - nicht die Zahl der Funktionen (Kilian: "man wird glatt
   erschlagen"). Verschachtelte Karten sind IMMER falsch.

   Jetzt ist das Blatt eine eingelassene graue Flaeche: #f2f2f2 (exakt der Ton des leeren
   Bildkastens, .li-bild-leer oben - kein neuer Wert), KEIN Rahmen, kein Schatten. Damit gibt es nur
   noch eine Kastenebene, und die weissen Bedienelemente darin heben sich endlich ab, statt Weiss
   auf Weiss zu stehen. Der graue Grund sagt ausserdem, was das Blatt IST: Werkzeug, nicht Inhalt. */

/* DIE FARBREGEL IN DER WANNE (14.07.2026, nach dem letzten Entrempeln):
   Beim Gewicht-Rausnehmen stand am Ende ALLES auf --wz-muted - die Art-Zeile, der Dateiname,
   "Andere wählen", "Knopf entfernen", "Fertig". Fuenf Zeilen, vier davon anfassbar, alle gleich grau.
   Und Grau heisst in JEDER Oberflaeche "deaktiviert". Die Hierarchie war repariert, die Affordanz
   dabei mitgerissen.

   Der erste Versuch war, das ueber die FARBE zu heilen (schwarz = anfassbar, grau = Auskunft) und
   sonst nichts anzufassen. Das reicht nicht. Kilian, live: "Man muss ja auch Knoepfe druecken und
   nicht einfach nur auf Texte." Er hat recht - Affordanz ist Kontrast UND Form. Ein schwarzes Wort in
   einer grauen Flaeche ist immer noch ein Wort.

   DIE REGEL, DIE JETZT GILT:

     weisser Kasten    = BEDIENELEMENT. Was man druecken soll, sieht aus wie ein Knopf.
                         -> die Art-Zeile, der Datei-Knopf, die Seiten-Chips
     schwarz (--wz-ink)= was FUEHRT: die Aufschrift eines Knopfes, die Woerter der Fusszeile
     grau (--wz-muted) = was nur AUSKUNFT gibt: die Fragen, der Dateiname im Knopf

   Weiss war vorher fuer "hier ist noch eine Aufgabe offen" reserviert (der leere Datei-Knopf trug
   einen Kasten, der gefuellte nicht). Die Regel klang gut und kostete zuviel: der gefuellte Zustand
   sah nicht mehr bedienbar aus. Dass ein Knopf noch kein Ziel hat, sagt jetzt allein der gestrichelte
   Rand am Knopf IN DER KARTE - dafuer braucht die Wanne kein eigenes Vokabular.

   Wichtigkeit wird ueber das Gewicht IM Element geregelt (grauer Dateiname, schwarze Aufschrift, graue
   Zeichen), nicht dadurch, dass man dem Element seine Form nimmt. Ein leises Bedienelement ist immer
   noch ein Bedienelement; ein formloses ist keins mehr.

   Die FUSSZEILE bleibt Text - sie sind Ausgaenge, keine Handlung am Inhalt. Und KEINE Unterstreichung:
   in dieser Karte stehen echte Links (die Kartenknoepfe SIND <a>), und die Karte fuehrt schon zwei
   bedeutungstragende Linien (gestrichelt = unfertig, Ring = offen). */
.li-blatt {
  /* Volle Breite im Raster der Kundenseite (die Knoepfe stehen in Spalten, das Blatt darunter quer).
     flex-basis fuer den Fall, dass eine Kundenseite ihre Knopfzeile als flex-wrap baut. */
  grid-column: 1 / -1;
  flex-basis: 100%;
  position: relative;                /* Anker fuer die Spitze und das × */
  margin-top: 0.5rem;
  box-sizing: border-box;
  padding: 0.9rem;

  background: #f2f2f2;
  color: var(--wz-ink);
  border: none;
  border-radius: var(--wz-radius);
  font-family: var(--wz-font);
  font-size: 0.95rem;

  /* Auftritt wie ueberall im System (DESIGN.md 5b): Deckkraft plus ein kurzer Weg aus dem Knopf
     heraus, 200ms, ease-out-quart. Die HOEHE wird bewusst nicht animiert (Layout-Eigenschaft) -
     die Karte waechst sofort, der Inhalt kommt weich nach. */
  animation: li-blatt-auf 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes li-blatt-auf {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .li-blatt { animation: none; }
}

/* Die Spitze zeigt hoch auf den Knopf, der gerade eingestellt wird. Jetzt EIN Dreieck statt zwei
   (frueher: Kontur + Fuellung, damit der Rahmen sauber um die Spitze lief) - die Wanne hat keinen
   Rahmen mehr, also braucht die Spitze auch keinen. Weniger Rahmen, weniger Regeln.
   --li-blatt-pfeil ist die Knopfmitte in px (liste-inline.js), gemessen ab der linken Kante des
   Knopf-Slots - also genau da, wo das Blatt selbst beginnt. */
.li-blatt::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: var(--li-blatt-pfeil, 50%);
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: #f2f2f2;
  transform: translateX(-8px);
  pointer-events: none;
}

.li-blatt-satz { display: grid; gap: 0.4rem; }

/* Fusszeile: links "Knopf entfernen", rechts "Fertig". Beide leise, beide in EINER Zeile.
   (Hier sass frueher ein × absolut in der oberen rechten Ecke der Wanne - und damit genau auf dem
   Aufklapp-Haken der Art-Zeile, die dort als erstes Element beginnt. Zwei Bedienelemente auf einem
   Fleck.)

   DIE TRENNLINIE KOMMT ZURUECK. Sie war weg mit der Begruendung "sie trennt nichts, was nicht ohnehin
   getrennt waere" - falsch. Die Wanne besteht aus ZWEI Teilen, und ohne Linie hing die Fusszeile als
   dritte gleichaussehende Zeile darunter (Kilian, live: "steht auch nicht im Zusammenhang"):

     oben  = wie dieser Knopf EINGESTELLT ist   (Art, Datei)
     unten = wie man hier WIEDER RAUSKOMMT      (entfernen, fertig)

   Das ist ein echter Bruch, und ein Strich ist die billigste Art, ihn zu zeigen: kein Kasten, keine
   Flaeche, keine Farbe. Die Fusszeile DARF gespreizt bleiben (space-between) - sie ist die Kante der
   Wanne, und zwei Ausgaenge an den zwei Enden sind ueberall so. Sie war nie das Problem. */
.li-blatt-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--wz-linie);
}

/* Die Fragen im Blatt. Ein SATZ in normaler Schrift, kein gesperrtes "BESCHRIFTUNG" in
   Grossbuchstaben (.wz-label kann das, und genau so sah es zuerst aus): Versalien mit Sperrung sind
   der Ton eines Behoerdenformulars - und ausgerechnet dieses Etikett ueber jedem Feld ist der
   Standard-Tick, an dem man KI-Oberflaechen erkennt. Das Blatt redet mit einem Vereinsvorstand.
   Deshalb steht hier "Was soll beim Klick passieren?" und nicht "AKTION". */
.li-blatt-frage {
  color: var(--wz-muted);
  font-size: 0.85rem;
  line-height: 1.3;
}
/* Luft VOR einer neuen Frage, nicht zwischen Frage und ihrer Antwort - die beiden gehoeren zusammen.
   (:not(:first-child), sonst bekaeme die erste Frage oben eine Delle.) */
.li-blatt-frage:not(:first-child) { margin-top: 0.5rem; }

/* Die ART des Knopfes. Normal steht hier EINE Zeile - die aktuelle Art, mit einem Haken am Ende
   ("hier gibt es mehr"). Erst wenn man sie antippt, klappen alle fuenf auf.

   Vorher standen die fuenf IMMER offen. Das war der Grund, warum das Blatt erschlug (Kilian, live:
   "viel zu viele Zeichen untereinander, man wird glatt erschlagen"): Es stellte fuenf Fragen,
   obwohl der Vorstand fast immer dieselbe Antwort hat - er laedt sein Anmeldeformular hoch.

   Das ist NICHT das verworfene <select>: dort versteckte ein fremdes Klappmenue die Antworten hinter
   einer Behoerdenformular-Mechanik. Hier bleibt es dieselbe offene Liste - sie ist nur zusammen-
   gelegt, solange niemand sie braucht, und sieht aufgeklappt exakt so aus wie vorher. */
/* DREI STUFEN IN DER WANNE - und warum die Art nicht weiss ist:
 *
 *   Datei-Knopf   Rahmen + WEISSE FUELLUNG   die HANDLUNG. Der Vorstand tauscht sein Anmeldeformular,
 *                                            wann immer sich das Formular aendert. Das ist der Grund,
 *                                            aus dem er das Blatt ueberhaupt aufmacht.
 *   Art-Zeile     Rahmen, KEINE Fuellung     die EINSTELLUNG. Einmal beim Anlegen gewaehlt - und beim
 *                                            Anlegen steht sie schon auf "datei" (bauePlatzhalter).
 *                                            Danach fasst er sie nie wieder an.
 *   Fusszeile     nur Text                   AUSGAENGE. Keine Handlung am Inhalt.
 *
 * Das Haeufige ist laut, das Seltene ist leise - dieselbe Regel, nach der auch die Kartenknoepfe
 * funktionieren (der erste gefuellt, die anderen getoent). Ein Kasten OHNE Fuellung ist unverkennbar
 * ein Knopf, draengt sich aber nicht vor: Form ja, Gewicht nein. Genau das war frueher der Fehler in
 * BEIDE Richtungen - erst trug die Art einen vollen weissen Kasten ("der Dateityp wird unnoetig in den
 * Mittelpunkt gestellt"), dann gar keinen mehr ("man muss ja Knoepfe druecken, nicht auf Texte").
 *
 * KEIN background hier: die graue Wanne scheint durch. Das ist Absicht, nicht Vergesslichkeit. */
.li-blatt-arten {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wz-linie);
  border-radius: var(--wz-radius);
  overflow: hidden;
}
.li-blatt-art {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: var(--wz-ziel);
  padding: 0.5rem 0.7rem;
  border: none;
  background: none;
  color: var(--wz-ink);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.li-blatt-art + .li-blatt-art { border-top: 1px solid var(--wz-linie); }
.li-blatt-art:hover { background: rgba(17, 17, 17, 0.04); }
.li-blatt-art:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wz-ink); }
/* Das einzige Zeichen, das hier noch steht, ist der Aufklapp-Haken (die fuenf Arten-Piktogramme sind
   raus, Begruendung in liste-inline.js). Er bleibt gedaempft - der Satz fuehrt. */
.li-blatt-art svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--wz-muted); }
/* Die gewaehlte Art: Flaeche + Gewicht, KEIN Farbakzent und kein Balken an der Seite. Das Blatt ist
   ein Werkzeug; es traegt keine Kundenfarbe und keine eigene erfundene. */
.li-blatt-art[aria-pressed="true"] { background: rgba(17, 17, 17, 0.06); font-weight: 600; }

/* ZUGEKLAPPT IST DIE ART EIN KNOPF - und sieht auch so aus.
   Sie war hier eine nackte graue Textzeile (kein Rahmen, kein Grund). Die Begruendung damals: sie ist
   nur eine AUSKUNFT, man waehlt sie einmal und ruehrt sie nie wieder an, also darf sie nicht so schwer
   aussehen wie der Datei-Knopf darunter. Der Gedanke stimmt - der Preis war falsch: Ein Bedienelement,
   dem man die FORM nimmt, ist kein leises Bedienelement mehr, sondern gar keins. Kilian, live:
   "Man muss ja auch Knoepfe druecken und nicht einfach nur auf Texte."

   Wichtigkeit regelt man ueber das Gewicht IM Element (Icon und Haken bleiben grau, der Satz fuehrt),
   nicht ueber das Weglassen des Elements. Zugeklappt und aufgeklappt ist es derselbe Kasten - er waechst
   nur von einer Zeile auf fuenf. Deshalb gibt es hier auch keine Sonderregel mehr fuer "is-zu". */
.li-blatt-art-jetzt {
  color: var(--wz-ink);
  font-size: 0.9rem;
  font-weight: 500;
}
.li-blatt-art-jetzt:hover { background: rgba(17, 17, 17, 0.04); }
/* Der Satz spannt die Zeile auf, der Haken sitzt an der rechten KANTE des Kastens.
   (Vorher stand er an der rechten Kante der WANNE - 600px vom Wort entfernt, in freier Flaeche, und
   niemand sah, dass die beiden zusammengehoeren. Ein Kasten hat eine Kante; eine 750px-Wanne hat keine.
   Genau deshalb ist "ganz rechts" hier plötzlich eine Aussage und dort keine war.) */
.li-blatt-art-jetzt span { flex: 1 1 auto; }
.li-blatt-art-jetzt svg:last-child {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--wz-muted);
}

/* Seitenwahl (Typ "intern"): die Namen SEINER Seiten, aus der Navigation gelesen. Offen
   nebeneinander - der Vorstand tippt keinen Pfad, er erkennt "Kontakt". */
.li-blatt-seiten { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.li-blatt-seite {
  min-height: var(--wz-ziel);
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--wz-linie);
  border-radius: var(--wz-radius);
  background: var(--wz-bg);
  color: var(--wz-ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.li-blatt-seite:hover { border-color: var(--wz-linie-stark); }
.li-blatt-seite:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wz-ink); }
.li-blatt-seite[aria-pressed="true"] {
  border-color: var(--wz-linie-stark);
  background: rgba(17, 17, 17, 0.06);
  font-weight: 600;
}

/* DER DATEI-KNOPF - EIN Element fuer beide Zustaende.
   Vorher waren es zwei: leer ein weisser Kasten ("Datei wählen"), gefuellt eine nackte graue Textzeile
   (Name links, "Andere wählen" rechts, 500px Nichts dazwischen). Der Kunde musste damit ZWEIMAL lernen,
   wo seine Datei sitzt - und die gefuellte Fassung sah nicht bedienbar aus.

   Jetzt: immer derselbe Knopf, gleiche Breite wie die Art-Zeile darueber, gleiche Kante links. Er
   traegt, was drin liegt (Name, grau, zurueckgenommen) und was er tut (Aufschrift, schwarz). Die
   Rangfolge lebt INNERHALB des Knopfes; sie kostet ihn nicht seine Form.
   Kein Datei-Zeichen darauf: das steht schon in der Art-Zeile direkt darueber. */
.li-blatt-datei {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: var(--wz-ziel);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--wz-linie);
  border-radius: var(--wz-radius);
  background: var(--wz-bg);
  color: var(--wz-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.li-blatt-datei:hover { border-color: var(--wz-linie-stark); }
.li-blatt-datei:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wz-ink); }

/* Der Name spannt die Zeile auf und kuerzt sich mit … - er ist KONTROLLE ("liegt die richtige drin?"),
   kein Inhalt. Grau und leicht: das Schwerste im Knopf darf nicht die 52-Zeichen-Buchhaltung sein. */
.li-blatt-dateiname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wz-muted);
  font-size: 0.85rem;
}
/* Die Aufschrift des Knopfes ("Datei wählen" / "Andere wählen") - sie fuehrt, also schwarz. Kein
   eigenes Bedienelement mehr, sondern Teil des Knopfes: der GANZE Kasten oeffnet den Datei-Dialog.
   Ohne Name (leerer Zustand) rutscht sie automatisch nach links - sie ist dann der einzige Inhalt. */
.li-blatt-tausch {
  flex: 0 0 auto;
  color: var(--wz-ink);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Nur im Fehlerfall: warum die Datei NICHT drin liegt. Eine Meldung "alles in Ordnung" waere Laerm. */
.li-blatt-info { font-size: 0.85rem; overflow-wrap: anywhere; }
.li-blatt-info.is-fehler { color: #b00020; }

/* "Knopf entfernen" und "Fertig": Woerter ohne Flaeche, ohne Rahmen, ohne Rot - aber SCHWARZ.
   Loeschen wird nie hervorgehoben (keine Flaeche, keine Farbe, kein Extra-Gewicht); es soll gefunden
   werden, wenn man es sucht. "Nicht hervorgehoben" heisst aber nicht "sieht deaktiviert aus" - genau
   das war es, solange es grau war. Der Unterschied zu "Fertig" ist das Gewicht (500), nicht die Farbe.
   OHNE Trennlinie: bei einem Blatt aus zwei Zeilen war die Linie ein drittes Element, das nichts
   trennt, was nicht ohnehin getrennt waere. Der graue Grund der Wanne setzt das Wort schon genug ab. */
.li-blatt-weg,
.li-blatt-fertig {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* 44px hoch (--wz-ziel), nicht bloss "ueber die Zeilenhoehe" - das ergab 29px. Die Fusszeile ist am
     Handy die Zeile, in der man loescht; sie darf nicht die kleinste Tippflaeche des Blattes sein. */
  min-height: var(--wz-ziel);
  padding: 0.4rem 0;
  border: none;
  background: none;
  color: var(--wz-ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.li-blatt-weg:hover,
.li-blatt-fertig:hover { opacity: 0.65; }
.li-blatt-weg:focus-visible,
.li-blatt-fertig:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wz-ink); border-radius: 6px; }
/* BEIDE tragen KEIN Zeichen - nur Wörter. "Schließen" ist ein Ausgang, keine Handlung an einem Ding.
   Und die Muelltonne steht in dieser Karte schon einmal (unten in der Ecke) und meint dort die
   GANZE KARTE; hier haette dasselbe Zeichen eine andere Reichweite gehabt. Ein Zeichen, eine
   Bedeutung - sonst raet der Kunde, ob er den Knopf oder seine Trainingsgruppe wegwirft. */
.li-blatt-fertig { font-weight: 500; }

/* DIE RUECKFRAGE BEIM LOESCHEN - an Ort und Stelle, kein Dialogfenster.
   Aus "Knopf entfernen" wird beim Klick "Wirklich entfernen?  Ja  Nein" - in DERSELBEN Zeile, in
   DERSELBEN Sprache. Ein Systemdialog waere hier derselbe Kategorienfehler wie die schwarze Lade.
   Kein Rot: die Seite hat gar kein Rot, und Rot heisst "Fehler" - ein Loeschen ist keiner. */
.li-blatt-weg-box {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
/* "Ja" und "Nein" sind zwei Zeichen breit - ohne Mindestbreite waeren es 20px Tippflaeche direkt
   neben dem Loeschen. Am Handy ist das die gefaehrlichste Stelle des ganzen Blattes. */
.li-blatt-wahl {
  justify-content: center;
  min-width: var(--wz-ziel);
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
}
/* Die SICHERE Wahl fuehrt (Gewicht), die zerstoerende bleibt normal. Loeschen wird nie hervorgehoben -
   auch nicht als "Ja" in seiner eigenen Rueckfrage. */
.li-blatt-nein { font-weight: 600; }