/* Optik der schwebenden Editor-Leiste (editor-shell.js).
   Bewusst neutral (schwarz/weiss/grau, System-Schrift) - wie der Verwaltungsbereich eines
   CMS und bei jedem Kunden gleich. Liest KEINE Kundenfarben. Wird nur hinter dem Login
   geladen; ein Besucher ohne Login sieht diese Leiste nie. */

/* =====================================================================================
   Werkzeug-Sprache (kanonisch): die gemeinsame, NEUTRALE Optik aller Inline-Editoren -
   schwarz/weiss/grau, System-Schrift, ein Stil je Sache. Immer sichtbar im Bearbeiten-Modus
   (KEIN Hover-Zwang - die Kunden bearbeiten am Handy), Tippflaechen >= 44px. Bausteine
   (datei/galerie/text) nutzen diese Tokens + Klassen statt eigener Optik. Liest KEINE
   Kundenfarben. (Weitere Muster, z.B. ein dunkler Primaer-Knopf oder ein ×-Entfernen-Kreis,
   kommen dazu, wenn ein Baustein sie wirklich braucht - nichts auf Vorrat.)
   ===================================================================================== */
:root {
  --wz-ink: #111;
  --wz-bg: #fff;
  --wz-linie: #cfcfcf;
  --wz-linie-stark: #111;
  --wz-muted: #6b6b6b;            /* dunkler als frueher (#999) -> Kontrast >= 4.5:1 auf Weiss */
  --wz-fokus: rgba(17, 17, 17, 0.12);
  --wz-radius: 8px;
  --wz-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wz-ziel: 44px;                /* Mindest-Tippflaeche fuer den Finger */
}

/* Kleine Beschriftung ueber einem Feld/einer Zeile */
.wz-label {
  display: block;
  font-family: var(--wz-font);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wz-muted);
}

/* Editierbares Feld (Eingabe/contenteditable) - ueberall gleich */
.wz-feld {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: var(--wz-ziel);
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--wz-linie);
  border-radius: var(--wz-radius);
  background: var(--wz-bg);
  color: var(--wz-ink);
  font-family: var(--wz-font);
  font-size: 0.95rem;
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wz-feld:hover { border-color: #999; }
.wz-feld:focus,
.wz-feld[contenteditable="true"] {
  border-color: var(--wz-linie-stark);
  box-shadow: 0 0 0 3px var(--wz-fokus);
  outline: none;
}
.wz-feld:empty::before { content: attr(data-platzhalter); color: #9a9a9a; }

/* Neutraler Werkzeug-Knopf (zurueckhaltend: weiss, Rahmen, dunkle Schrift) */
.wz-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wz-ziel);
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--wz-linie);
  border-radius: var(--wz-radius);
  background: var(--wz-bg);
  color: var(--wz-ink);
  font-family: var(--wz-font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wz-knopf:hover { border-color: var(--wz-linie-stark); background: #f5f5f5; }
/* :focus-visible (nicht :focus): Ring nur bei Tab-Tasten-Navigation, nie bei einem reinen
   Maus-Klick (Kundenwunsch - wirkte bei jedem Klick "unprofessionell"). box-shadow statt
   outline: outline rundet sich bei der Pillenform (border-radius:999px) nicht immer sauber. */
.wz-knopf:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wz-ink); }

/* Geschuetzte Stellen bleiben im CMS gesperrt. `inert` in editor-shell.js verhindert
   Interaktion; CSS versteckt die Werkzeug-Anzeichen. */
.editor-bearbeiten [data-geschuetzt] .wz-knopf,
.editor-bearbeiten [data-geschuetzt] .wz-gruppe { display: none; }
/* Aufleuchtende Umrandungen der Bausteine abschalten - sonst sieht die Stelle bearbeitbar aus,
   reagiert aber nicht. !important, weil die Baustein-Regeln (text-inline.css usw.) sonst gewinnen;
   eng auf geschuetzte Stellen begrenzt. */
.editor-bearbeiten [data-geschuetzt],
.editor-bearbeiten [data-geschuetzt] * {
  outline: none !important;
  cursor: default !important;
}

/* Container, der zusammengehoerige Bearbeiten-Teile buendelt - nur im Bearbeiten-Modus sichtbar */
.wz-gruppe {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--wz-linie);
  border-radius: var(--wz-radius);
  background: var(--wz-bg);
  font-family: var(--wz-font);
}
.editor-bearbeiten .wz-gruppe { display: flex; }

/* --es-pad-x/-y gelten fuer die Ghost-Knoepfe drinnen (.es-modus/.es-logout) - die muessen auf
   BEIDEN moeglichen Rahmen
   definiert sein: .es-leiste (eigenstaendige Leiste,
   z.B. Demo-Seiten ohne Login) UND .cms-console-app (geteilter Container mit dem Login-
   Formular, siehe login-panel.css - so laeuft es auf der echten V1-Seite). Nur auf .es-leiste
   waere ein var() ohne Fallback auf .cms-console-app gewesen -> Wert loest ins Leere auf ->
   Padding wird 0 (schon live so gewesen, bis hier gemessen wurde). */
.es-leiste,
.cms-console-app {
  /* Eigene Zeilenhoehe, damit die Kundenseite nicht in die Knopfhoehen hineinregiert: die Knoepfe
     tragen `font: inherit`, und die font-KURZFORM zieht die line-height mit. Die Rollsport-Seite
     setzt `body { line-height: 1.6 }` -> Knopf-Inhalt 24.3px statt ~18px. Weil .es-speichern
     rundum 0.75rem polstert (--es-speichern-pad), seine Nachbarn aber nur 0.5rem oben/unten,
     wuchs NUR er ueber die 44px-Untergrenze hinaus: gemessen 48.3px gegen 44.0px. In den Demos
     faellt das nie auf, deren <body> setzt keine line-height. Mit einer festen 1.2 landen alle
     drei Knoepfe ueber min-height verlaesslich auf 44px - auf JEDER Kundenseite. */
  line-height: 1.2;

  --es-pad-y: 0.5rem;
  --es-pad-x: 1.1rem;
  /* NUR fuer .es-speichern (Kilian-Wunsch): oben/unten genauso viel Abstand wie links/rechts -
     EIN Wert statt --es-pad-x/-y getrennt, damit das automatisch auf allen vier Seiten
     gleich ist. 0.75rem = gemessen (Inhalt 21px hoch) so gewaehlt, dass Innenabstand +
     Inhaltshoehe nah an die 44px-Mindesttipfflaeche kommt, ohne dass min-height extra Luft
     dazuschummelt (siehe .es-speichern unten). */
  --es-speichern-pad: 0.75rem;
}

.es-leiste {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 2147483000; /* moeglichst weit oben, ueber allem auf der Seite */
  /* Dieselbe Kurve wie der Karte->Leiste-Uebergang beim Anmelden (login-panel.css,
     ::view-transition-group(cms-konsole): ease-out-quart, bewusst laenger als die ueblichen
     150-250ms, weil ein Shared-Element-Weg an der STRECKE haengt, nicht an einer festen Zeit).
     Dort sind es 0.35s fuer knapp den halben Bildschirm (Karte -> Leiste unten); dieser Weg (an
     den oberen Rand) ist laenger als das - nach derselben Logik entsprechend laenger: 0.45s. */
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);

  display: flex;
  align-items: center;
  gap: 0.9rem;

  padding: 0.55rem 0.7rem;
  background: #141414; /* EINE Konsolen-Flaeche - identisch mit .cms-console-login/.cms-console-app */
  color: #fff;
  border-radius: 16px; /* wie .cms-console-login (Login-Karte) - crisp, kohaerent */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); /* strafferer, weniger bubbly Schatten (wie die Konsole) */

  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
}
/* Verschoben an den oberen Bildschirmrand (Griff getippt). translateY kombiniert vh (Bildschirm-
   hoehe) mit % (der EIGENEN Hoehe des Elements, CSS loest translateY(%) gegen die eigene Boxhoehe
   auf) - dadurch muss die genaue Pixel-Hoehe der Leiste nicht bekannt sein, sie passt sich von
   selbst an Inhalt/Schriftgroesse an. 2.5rem = 1.25rem oberer + 1.25rem unterer Zielabstand
   (derselbe Abstand, den sie unten auch hat). dvh zuerst genannt, vh als Rueckfall fuer aeltere
   Browser (zwei Deklarationen derselben Eigenschaft - der Browser nimmt die letzte, die er
   versteht). */
.es-leiste.es-oben {
  transform: translateX(-50%) translateY(calc(-100vh + 100% + 2.5rem));
  transform: translateX(-50%) translateY(calc(-100dvh + 100% + 2.5rem));
}

/* Der Griff: sitzt MIT in der Knopf-Zeile, ganz rechts (kein eigener Balken mehr darueber - der
   kostete eine ganze zusaetzliche 44px-Zeile und machte die Leiste fast doppelt so schwarz,
   Kilian, live: "zu viel Schwarz"). In der Zeile kostet er nur Breite, keine Hoehe - flex-shrink:0
   haelt ihn auf fester Breite, waehrend die uebrigen Knoepfe (am Handy) den Rest unter sich
   aufteilen. Mindest-Tippflaeche 44px (--wz-ziel) TROTZ kleinem Pfeil-Symbol - dieselbe Regel wie
   ueberall (DESIGN.md 5d: Tinte statt Flaeche skalieren), aber jetzt ohne eigene Zeile zu kosten,
   weil die Nachbar-Knoepfe ohnehin schon 44px hoch sind. Ghost-Optik wie .es-modus/.es-logout,
   aber ohne Rahmen - er ist kein "Knopf mit Aktion auf der Seite", sondern ein
   Werkzeug-Steuerelement der Leiste selbst. */
/* Runder Hover-Kreis wie bei den Slider-Pfeilen (slider.css) - dieselbe Kreis-Sprache, aber ohne
   deren Matte-Glas-Weichzeichner: der war dort noetig, um ein Foto darunter lesbar zu halten,
   hier liegt der Knopf auf flachem Schwarz, ein Weichzeichner haette dort nichts zu tun. Nur der
   runde Umriss + die Aufhellung bei Hover/Fokus wird uebernommen (Kilian, live: "vom Kreis her
   und vom Hover-Effekt her schon ganz cool"). */
.es-griff {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: var(--wz-ziel, 44px);
  min-height: var(--wz-ziel, 44px);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #999;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.es-griff:hover,
.es-griff:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; }
.es-griff:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }

/* Modus-Umschalter (.es-modus) und Abmelden (.es-logout): beide ruhige Ghost-Knoepfe
   (transparent, 1px Rahmen, Text weiss) - die zurueckhaltende Seite der Leiste. Speichern bleibt
   der einzige gefuellte weisse Knopf und damit die klar wichtigste Aktion ("One Bright Button
   Rule", DESIGN.md). .es-modus wechselt nur sein Wort (Vorschau <-> Bearbeiten, siehe
   editor-shell.js) - kein Zwei-Segment-Schalter mehr, kein hell hinterlegtes Segment. */
.es-modus,
.es-logout {
  font: inherit;
  background: transparent;
  color: #fff;
  border: 1px solid #555;
  border-radius: 10px; /* wie .ga-submit/.ga-input (Login) - crisp, kohaerent */
  padding: var(--es-pad-y) var(--es-pad-x);
  min-height: var(--wz-ziel, 44px);
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Feste Mindestbreite, damit die Leiste beim Wechsel "Vorschau" <-> "Bearbeiten" nicht wackelt -
   dieselbe Ueberlegung wie bei .es-speichern ("Speichern"/"Gespeichert", siehe unten), nur hier
   bisher uebersehen. "Bearbeiten" ist rund 17px breiter als "Vorschau"; weil die Leiste mittig
   sitzt, wandern beim Umschalten BEIDE Kanten nach aussen. Am deutlichsten beim Abmelden aus dem
   Bearbeiten-Modus: dort faellt das Wort genau in den Moment, in dem die Leiste ausblendet - sie
   scheint seitlich wegzurutschen, waehrend sie verschwindet (Kilian, live). 120px liegt mit
   Reserve ueber dem laengeren Wort, damit es auf JEDER Systemschrift (Windows/Mac/Linux) passt. */
.es-modus { min-width: 120px; }

.es-modus:hover,
.es-logout:hover { border-color: #fff; }
.es-modus:focus-visible,
.es-logout:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }
/* Waehrend des Speicherns/Abmeldens (siehe editor-shell.js) gesperrt, sah sonst unveraendert
   klickbar aus - kein Hinweis, dass der erste Klick schon verarbeitet wird. */
.es-modus:disabled,
.es-logout:disabled { color: #777; border-color: #444; cursor: default; }

/* Statustext ("Nicht gespeicherte Aenderungen", "Gespeichert", ...) */
.es-status { color: #bbb; font-size: 0.9rem; }
.es-status[hidden] { display: none; }

/* Der "Speichern"-Knopf (auffaellig, weil wichtig). Alle Zustaende (Speichern/Gespeichert)
   GLEICH BREIT, damit die Leiste beim Speichern nicht wackelt, dazu oben/unten
   genauso viel Abstand wie links/rechts - darum EIN Innenabstand-Wert (--es-speichern-pad) auf
   allen vier Seiten, statt --es-pad-y/-x getrennt (die bleiben nur fuer .es-logout).
   min-width 130px haelt die Breite konstant zwischen "Speichern" und "Gespeichert" (das laengere
   Wort). Bewusst mit Reserve gewaehlt statt knapp gemessen: "Gespeichert" braucht in system-ui
   ~90-95px + 24px Innenabstand (~115-119px); 130px liegt sicher darueber, damit der Knopf auf
   JEDER Systemschrift (Windows/Mac/Linux) gleich breit bleibt und beim Speichern nicht wackelt.
   Die Leiste wird dadurch nur ~10px breiter als die 380px-Login-Karte - kaum sichtbar, und beide
   sind ohnehin nie gleichzeitig zu sehen (Karte = ausgeloggt, Leiste = beim Bearbeiten). */
.es-speichern {
  font: inherit;
  font-weight: 600;
  background: #fff;
  color: #111;
  border: none;
  border-radius: 10px; /* wie .ga-submit/.ga-input (Login) - crisp, kohaerent */
  padding: var(--es-speichern-pad);
  min-height: var(--wz-ziel, 44px);
  min-width: 130px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Das Erloeschen (weiss -> grau) traegt die Aussage "gespeichert": weicher als ein Hover
     (ease-out-quart, kein Bounce), aber innerhalb der 250ms-Obergrenze fuer Produkt-UI - der
     Kunde ist mitten in einer Aufgabe und soll nicht auf eine Choreografie warten. */
  transition: background-color 0.25s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.25s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.2s ease,
              box-shadow 0.15s ease,
              transform 0.1s ease;
}
.es-speichern:hover { background: #e8e8e8; }
.es-speichern:active:not(:disabled) { transform: scale(0.98); }
.es-speichern:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }
/* Text #b0b0b0 (nicht #999): auf #555 ~3,4:1 statt ~2,6:1 - immer noch klar "inaktiv", aber der
   Ruhezustand (nichts zu speichern) ist der am haeufigsten gesehene, das Wort "Speichern" muss
   lesbar bleiben. disabled ist WCAG-ausgenommen, aber Erkennbarkeit geht vor. */
.es-speichern:disabled { background: #555; color: #b0b0b0; cursor: default; }
.es-speichern[hidden] { display: none; }
/* Speichert gerade: bleibt WEISS, nur gedaempft. Frueher sprang der Knopf beim Klick sofort auf
   Grau - damit passierte die auffaelligste Bewegung (das Helle erlischt) im Moment des KLICKS und
   bedeutete dort nur "ich arbeite"; der eigentlich wichtige Moment (fertig gespeichert) blieb
   bewegungslos und musste mit einem weissen Aufblitzen nachgeholt werden -> hell/dunkel/hell/
   dunkel, das wirkte hektisch (Kilian, live).
   Jetzt laeuft alles in EINE Richtung: hell -> gedaempft (arbeitet) -> ruhig grau "Gespeichert".
   Das Erloeschen faellt mit dem Fertigwerden zusammen und IST die Quittung.
   Steht bewusst NACH :disabled - gleiche Spezifitaet, die spaetere Regel gewinnt.
   Heisst .is-speichert und NICHT .is-busy: .is-busy ist in dieser Datei schon fuer die
   Status-Zeile vergeben (siehe editor-shell.js) - zwei Bedeutungen fuer einen Klassennamen
   waeren eine Falle fuer den naechsten, der hier arbeitet. */
.es-speichern.is-speichert {
  background: #fff;
  color: #111;
  opacity: 0.55;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .wz-feld,
  .wz-knopf,
  .es-modus,
  .es-logout,
  .es-speichern {
    transition-duration: 0.01ms;
  }
  .es-speichern:active:not(:disabled) { transform: none; }
}

/* (Hier stand die Einstell-Lade: der dritte Zustand der Konsole, in dem die Einstellungen eines
    Karten-Knopfes aufgingen - schwarz, ueber der Leiste. Am 14.07.2026 ersatzlos entfernt, samt
    ihrer Mobil-Regeln. Begruendung steht in kern/editor-shell.js an derselben Stelle: die dunkle
    Konsole ist die Sprache des WERKZEUGS, nicht die des Seiteninhalts. Die Knopf-Einstellung wohnt
    jetzt in einem hellen Blatt am Knopf - bloecke/liste/liste-inline.css, Abschnitt DAS BLATT.) */

@media (max-width: 480px) {
  .es-leiste {
    left: 0.75rem;
    right: 0.75rem;
    transform: none;
    justify-content: space-between;
  }
}