/* ---------------------------------------------------------------------------
   Der Balken „Diese Seite bearbeiten" — sichtbar nur für angemeldete Redakteure.

   ⚠ **Eigene Datei, nicht in den beiden Gestaltungs-Stylesheets.** Der
   Vorschaubalken steht dort zweimal, und das ist die Duplizierung, die dieses
   Projekt sonst vermeidet. Hier gibt es dafür drei Gründe:

   1. Er ist **kein Teil der Gestaltung**, sondern ein Werkzeug. Er soll in
      beiden Gestaltungen **gleich** aussehen — gerade damit ihn niemand für
      einen Bestandteil der Website hält.
   2. Er **überlebt die Gestaltungsentscheidung**. Was in `style.css` oder
      `design-farbregal.css` steht, muss dann jemand herauslösen.
   3. Er ist winzig; eine eigene Datei kostet praktisch nichts. Dasselbe Muster
      wie bei `gestaltungsleiste.css`.
   --------------------------------------------------------------------------- */

/* Die Website ist gesperrt (Vorgang #264) — nur vor Angemeldeten, rot und über
   dem Bearbeiten-Balken. Er soll auffallen: Eine vergessene Sperre hält die
   Website für alle Besucher geschlossen. */
.wartung-balken {
  padding: 0.5rem 1rem;
  background: #b02a37;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  line-height: 1.4;
}
.wartung-balken a { color: #fff; font-weight: 700; margin-left: 0.5rem; }
@media print { .wartung-balken { display: none; } }

.bearbeiten-balken {
  display: flex;
  flex-wrap: wrap;            /* auf dem Telefon untereinander statt über den Rand */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.45rem 1rem;
  background: #1f2933;
  color: #cbd5dd;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.82rem;
  line-height: 1.4;
}

.bearbeiten-balken__wer {
  opacity: 0.8;
}

/* Die Verweise rechts als eine Gruppe — sonst zerrisse `space-between` sie über
   die ganze Breite, sobald es zwei sind. */
.bearbeiten-balken__werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.bearbeiten-balken__link,
.bearbeiten-balken__melden {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  /* 44 px Trefferfläche: Der Balken ist niedrig, der Link soll trotzdem auf dem
     Telefon zu treffen sein. Das Innenabstands-Rechteck erledigt das, ohne den
     Balken sichtbar aufzublähen. */
  padding: 0.55rem 0.75rem;
  margin: -0.35rem -0.35rem;
  border-radius: 3px;
}

/* ⚠ **Leiser als der Bearbeiten-Verweis, und das mit Absicht.** Wer etwas
   ändern darf, soll es ändern; gemeldet wird, was man selbst nicht beheben
   kann. Stünden beide gleich stark da, wäre das Melden der bequemere Weg — und
   aus jeder Korrektur würde ein Vorgang für jemand anderen. */
.bearbeiten-balken__melden {
  color: #cbd5dd;
  font-weight: 400;
}

.bearbeiten-balken__link:hover,
.bearbeiten-balken__link:focus-visible,
.bearbeiten-balken__melden:hover,
.bearbeiten-balken__melden:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  text-decoration: underline;
}

.bearbeiten-balken__melden:hover,
.bearbeiten-balken__melden:focus-visible {
  color: #fff;
}

/* Der Fokusrahmen ist hier nötig: Auf dem dunklen Grund ist der voreingestellte
   des Browsers kaum auszumachen. Dieselbe Überlegung wie beim Klappmenü. */
.bearbeiten-balken__link:focus-visible,
.bearbeiten-balken__melden:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ⚠ Beim Drucken weg — er gehört nicht auf Papier, und auf einer ausgedruckten
   Buchseite stünde sonst der Name der angemeldeten Person. */
@media print {
  .bearbeiten-balken { display: none; }
}

/* ---------------------------------------------------------------------------
   Bearbeiten direkt im Text (app/static/js/inline-edit.js)
   --------------------------------------------------------------------------- */

/* ⚠ Die bearbeitbare Stelle muss **erkennbar** sein, aber die Seite nicht
   umgestalten: Wer sie ansieht, soll beurteilen können, wie sie aussieht.
   Deshalb nur beim Überfahren ein Hinweis, und zwar außerhalb des Textflusses
   (`outline` statt `border` — ein Rahmen verschöbe die Zeilen). */
[data-inline],
[data-inline-text] {
  cursor: text;
  border-radius: 3px;
  transition: outline-color .12s, background-color .12s;
  outline: 2px dashed transparent;
  outline-offset: 6px;
}

[data-inline]:hover,
[data-inline-text]:hover {
  outline-color: rgba(31, 41, 51, .35);
  background: rgba(31, 41, 51, .02);
}

[data-inline]:hover::before,
[data-inline-text]:hover::before {
  content: "Klicken zum Bearbeiten";
  float: right;
  margin: -1.7rem -0.2rem 0 0;
  padding: .12rem .45rem;
  border-radius: 3px;
  background: #1f2933;
  color: #fff;
  font-size: .72rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

/* ⚠ **Der leere Platz, und zwar in CSS statt im Rumpf.**
   `data-leertext` gab es bisher nur für den Rumpf-Editor; der Textweg kannte
   ihn nicht, und ein leeres Feld wäre damit null Pixel hoch — also unsichtbar
   und nicht anklickbar. Genau der Zustand, den der Einladungstext bei den
   Reihentexten schon einmal verhindern musste.

   **Warum nicht als Inhalt in die Vorlage:** Dann stünde der Einladungstext im
   DOM, `starten_titel()` läse ihn als Ausgangstext, und die erste Eingabe
   schriebe „Warum passt dieser Titel dazu?" in die Datenbank. Genau so ist es
   beim Reihentext einmal passiert. Als `::before` gibt es ihn im Textinhalt
   nicht — er kann also gar nicht gespeichert werden.

   `:empty` greift wieder, sobald jemand den Kommentar leert: Der Platz kommt
   von selbst zurück, statt lautlos zu verschwinden. */
[data-inline-text]:empty::before {
  content: attr(data-leertext);
  opacity: .55;
  font-style: italic;
}

/* 🛑 **Beim Überfahren darf der leere Platz kein Etikett werden** (15.09.2026).
   Das Etikett „Klicken zum Bearbeiten" und der Einladungstext teilen sich
   dasselbe `::before`, und beide Regeln sind gleich spezifisch: Der Text kam
   von `:empty`, `float`, negativer Rand und dunkler Grund von `:hover`. Der
   Einladungstext schwamm als Etikett nach oben weg, der Absatz fiel auf 0 px
   (gemessen, vorher 23), der Zeiger verlor die Stelle, und sie sprang zurück
   — das „Zittern". Ein Klick traf dann den Link darunter; beim Satz in den
   eigenen Bändern ist das die Karte, also die Buchseite. Die gestrichelte
   Umrandung bleibt der Hinweis. */
[data-inline-text]:empty:hover::before {
  content: attr(data-leertext);
  float: none; margin: 0; padding: 0; border-radius: 0;
  background: none; color: inherit;
  font: inherit; font-style: italic;
  letter-spacing: inherit; text-transform: inherit;
}

[data-inline].inline-edit-aktiv,
[data-inline-text].inline-edit-aktiv {
  outline-color: transparent;
  background: none;
  cursor: auto;
}

[data-inline].inline-edit-aktiv:hover::before,
[data-inline-text].inline-edit-aktiv:hover::before { content: none; }

/* ⚠ **Ein offener Editor darf keine Zierzeichen der fertigen Ansicht tragen.**
   Das Zitat setzt seine Anführungszeichen im Stylesheet — am ersten und
   letzten Absatz, mit einem Rückfall auf das `<blockquote>` für Zitate ohne
   Absatzelement. Sobald der Editor den Inhalt ersetzt, gibt es kein `<p>` als
   direktes Kind mehr: Der Rückfall greift, und die Zeichen landen **vor der
   Knopfleiste** und **hinter dem Speichern-Knopf**.

   ⚠ **Und eines davon flackerte je nach Mausposition.** Die Regel darüber
   setzt `::before` beim Überfahren auf `content: none` — gemeint war der
   ✎-Hinweis, getroffen wurde dasselbe Pseudoelement, an dem das öffnende
   Anführungszeichen hängt. Ergebnis: oben ein Zeichen, das kommt und geht,
   unten eines, das bleibt. Gemeldet am 2026-08-16 mit zwei Bildschirmfotos,
   die genau diesen Unterschied zeigen — **das Flackern war der Hinweis auf die
   Ursache, nicht der Fehler selbst.**

   Beide Zeichen gehören für die Dauer des Bearbeitens weg; sie beschreiben das
   fertige Zitat, nicht die Schreibfläche. */
.press-quote__text.inline-edit-aktiv::before,
.press-quote__text.inline-edit-aktiv::after,
.press-quote__text.inline-edit-aktiv > p:first-child::before,
.press-quote__text.inline-edit-aktiv > p:last-child::after { content: none; }

.inline-edit__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .85rem;
}

.inline-edit__speichern,
.inline-edit__abbrechen {
  padding: .45rem .9rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.inline-edit__speichern { background: #1f2933; color: #fff; }
.inline-edit__speichern:disabled { opacity: .55; cursor: progress; }
.inline-edit__abbrechen { background: #fff; color: #1f2933; border-color: #c3ccd4; }
.inline-edit__hinweis { color: #6b7680; font-size: .78rem; }

/* Die Rückmeldung sitzt wie im Backend unten rechts — dieselbe Stelle, damit
   man sie an beiden Orten am selben Fleck sucht. */
#inline-melder {
  position: fixed;
  right: 16px;
  bottom: 64px;                /* über der Gestaltungsleiste der Testphase */
  z-index: 1200;
  max-width: 32rem;
  padding: .6rem 1rem;
  border-radius: 4px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .88rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}

#inline-melder.sichtbar { opacity: 1; }
#inline-melder.gut      { background: #1c7430; }
#inline-melder.schlecht { background: #a02622; }

/* Die Rückfrage in der Seite — gehört zu `fragen()` in `inline-edit.js`.
   Sie steht am Platz der Meldezeile und sieht aus wie sie: eine zweite Ecke
   für Rückmeldungen wäre eine Stelle mehr, an der man nachsehen muss.
   ⚠ **Anders als die Meldezeile bleibt sie stehen und ist anklickbar** — sie
   wartet auf eine Antwort, statt nach zwei Sekunden zu verschwinden. */
#inline-frage {
  position: fixed;
  right: 16px;
  bottom: 64px;
  z-index: 1300;               /* über der Meldezeile */
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 32rem;
  padding: .6rem 1rem;
  border-radius: 4px;
  background: #7a4a08;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .88rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

#inline-frage button {
  flex: none;
  padding: .3rem .8rem;
  border: 0;
  border-radius: 3px;
  font: inherit;
  cursor: pointer;
}
.inline-frage__ja   { background: #a02622; color: #fff; }
.inline-frage__nein { background: #fff; color: #14202c; }
/* ⚠ Sichtbarer Fokus: Der Knopf bekommt ihn beim Öffnen, und ohne Rahmen
   sähe man auf dem dunklen Grund nicht, worauf die Eingabetaste wirkt. */
#inline-frage button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  [data-inline], #inline-melder { transition: none; }
}

/* Der leere Platz, den nur Angemeldete sehen: eine Einladung, kein Inhalt.
   ⚠ Bewusst abgeblendet und kursiv — er darf nicht wie ein Text der Website
   aussehen, sonst hält ihn jemand für einen versehentlich veröffentlichten
   Platzhalter. */
.inline-leer {
  color: #6b7680;
  font-style: italic;
}

.inline-leer.inline-edit-aktiv {
  color: inherit;
  font-style: normal;
}

/* Der Weg in die Redaktion, unten im Fuß. Zurückhaltend: Er richtet sich an
   wenige und soll den Fuß nicht mitgestalten. Vorher stand das als
   `style`-Attribut im Template — hier steht es bei dem, wozu es gehört. */
.site-footer__anmelden {
  margin-left: 1.5em;
  opacity: .4;
  font-size: .8em;
}

.site-footer__anmelden:hover,
.site-footer__anmelden:focus-visible {
  opacity: .9;
}

/* Der Weg hinaus, neben dem Namen im Balken. Zurückhaltender als der
   Bearbeiten-Verweis rechts: Abmelden ist die seltenere Handlung. */
.bearbeiten-balken__abmelden {
  color: #cbd5dd;
  text-decoration: underline;
  padding: .35rem .2rem;      /* Trefferfläche, ohne den Balken zu erhöhen */
}

.bearbeiten-balken__abmelden:hover,
.bearbeiten-balken__abmelden:focus-visible {
  color: #fff;
}

.bearbeiten-balken__abmelden:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Der Hinweis auf einen vom VLB abgekoppelten Text — nur für Angemeldete.
   ⚠ Deutlich, aber nicht alarmierend: Es ist kein Fehler, sondern ein Zustand,
   den jemand absichtlich herbeigeführt hat. Er muss nur sichtbar sein. */
.vlb-abgekoppelt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  padding: .4rem .7rem;
  border-left: 3px solid #b8860b;
  background: #fdf6e3;
  color: #5c4a12;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .82rem;
}

.vlb-zurueck {
  padding: .3rem .7rem;
  border: 1px solid #b8860b;
  border-radius: 3px;
  background: #fff;
  color: #5c4a12;
  font: inherit;
  cursor: pointer;
}

.vlb-zurueck:hover:not(:disabled) { background: #b8860b; color: #fff; }
.vlb-zurueck:disabled { opacity: .5; cursor: progress; }


/* ══ Überschriften ══
   Reiner Text, kein Editor — Begründung in inline-edit.js.

   ⚠ **Die Schreibfläche erbt die Schrift der Überschrift.** Sie in der
   Systemschrift zu zeigen wäre bequemer, aber dann tippt man in einer anderen
   Type, als hinterher dasteht — und schätzt die Länge falsch ein. Genau das
   soll das Bearbeiten auf der Seite ja abschaffen. */
.inline-titel__flaeche {
  display: inline-block;
  min-width: 4ch;
  font: inherit;
  color: inherit;
  outline: 2px solid rgba(31, 41, 51, .45);
  outline-offset: 4px;
  border-radius: 3px;
}

/* ⚠ Die Leiste steht **hinter** der Überschrift, nicht darunter: Ein Block
   darunter schöbe den ganzen Seiteninhalt nach unten, sobald man hineinklickt —
   und der Text, den man gerade ändert, wanderte aus dem Blick. */
.inline-titel__leiste {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-left: 1rem;
  vertical-align: middle;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .8rem;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
}


/* ══ Umstellen an Ort und Stelle ══
   Bänder und Pressestimmen, nur für Angemeldete und nur im Modus.

   ⚠ **Nichts davon ist zu sehen, solange der Modus aus ist.** Der erste Bau
   zeigte die Griffleisten dauernd — gemessen **350 px mehr Seite**, die erste
   Überschrift 52 px tiefer. Wer angemeldet liest, sah damit eine andere Seite
   als ihre Leserinnen. Eingeschaltet wird über „Umstellen" im
   Bearbeiten-Balken; die Marke sitzt am `<html>`, damit sie überall greift.

   ⚠ **Die Leiste liegt über dem Abschnitt, nicht daneben.** Ein Griff am Rand
   wäre auf schmalen Schirmen entweder außerhalb des Bildes oder im Text. */
.buchband__leiste,
.press-quote__leiste { display: none; }
.js-umstellen .buchband__leiste,
.js-umstellen .press-quote__leiste { display: flex; }

.buchband,
.press-quote { position: relative; }

.buchband__leiste,
.press-quote__leiste {
  align-items: center;
  gap: .6rem;
  margin: 1.5rem 0 -.5rem;
  padding: .3rem .6rem;
  border: 1px dashed rgba(31, 41, 51, .3);
  border-radius: 4px;
  background: rgba(31, 41, 51, .04);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .8rem;
  line-height: 1.2;
  color: #4a5561;
}

.press-quote__leiste { margin: .8rem 0 -.2rem; }

/* ⚠ **Der Griff wird erst vom Skript beschriftet.** Ohne JavaScript gibt es
   nichts zu ziehen — dann soll dort auch kein Griff stehen, der nichts greift.
   Dieselbe Regel wie in admin-sortieren.js. */
.buchband__griff,
.press-quote__griff {
  cursor: grab;
  /* 24 px Trefferfläche (WCAG 2.2, 2.5.8) ohne größer zu wirken. */
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #6b7580;
  user-select: none;
}
.buchband__griff:empty,
.press-quote__griff:empty { display: none; }
.buchband__name { font-weight: 600; }
.buchband__lage { font-style: italic; }
.buchband__lage:empty { display: none; }

.buchband__schalter,
.press-quote__form {
  margin-left: auto;
  border: 1px solid rgba(31, 41, 51, .3);
  border-radius: 3px;
  background: #fff;
  padding: .2rem .6rem;
  min-height: 24px;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.buchband__schalter:hover,
.press-quote__form:hover { background: #f0f2f4; }

/* Ein ausgeblendetes Band zeigt nur seine Leiste — der Inhalt steht gar nicht
   erst in der Seite (siehe book.html). */
.buchband--aus .buchband__leiste {
  border-style: solid;
  border-color: rgba(31, 41, 51, .18);
  color: #8a939d;
}

/* Die Marken beim Ziehen sind für beide Listen dieselben — es ist dieselbe
   Geste, und zwei Sätze Klassen liefen auseinander. */
.zieht { opacity: .45; }
.zieht-ziel-oben { box-shadow: 0 -3px 0 0 #1a8bb3; }
.zieht-ziel-unten { box-shadow: 0 3px 0 0 #1a8bb3; }

/* Der Hinweis unter den Pressestimmen: Angemeldete sehen alle, Leserinnen die
   ersten fünf. Ohne ihn hielte man die lange Liste für das, was draußen steht. */
.press-quotes__hinweis {
  display: none;
  margin-top: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .8rem;
  font-style: italic;
  color: #6b7580;
}
.js-umstellen .press-quotes__hinweis { display: block; }

.buchbaender__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 1.5rem 0;
  padding: .6rem .8rem;
  border-radius: 4px;
  background: #fdf3d7;
  border: 1px solid #e0c96a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .85rem;
}
.buchbaender__hinweis { margin-right: auto; }

/* Der Schalter im Bearbeiten-Balken. Er sieht aus wie die übrigen Werkzeuge
   dort — ein Knopf, der sich als Knopf des Browsers zu erkennen gäbe, fiele aus
   dem Balken heraus. */
.bearbeiten-balken__baender {
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: .1rem .55rem;
  min-height: 24px;
  cursor: pointer;
}
.bearbeiten-balken__baender:hover { background: rgba(255, 255, 255, .12); }
.bearbeiten-balken__baender[aria-pressed="true"] {
  background: #fdf3d7;
  border-color: #e0c96a;
  color: #3a3320;
}

/* ⚠ Beim Drucken verschwindet alles davon — sonst stünde auf jedem Ausdruck
   einer Buchseite eine Werkzeugleiste. Dieselbe Regel wie beim
   Bearbeiten-Balken. */
@media print {
  .buchband__leiste,
  .press-quote__leiste,
  .press-quotes__hinweis,
  .buchbaender__leiste,
  .bearbeiten-balken__baender { display: none !important; }
}