:root {
  /* Panolocal-Palette – übernommen aus panolocal-main (tailwind.config.js + Logo) */
  --pl-orange:      #F48638;   /* Primärfarbe der Marke */
  --pl-orange-soft: #FDB17E;
  --pl-blau:        #3462EA;
  --pl-blau-hell:   #4EA0F6;
  --pl-blau-bg:     #DCECFD;
  --pl-gelb:        #FFEB5B;

  --bg: #FFFFFF; --panel: #FFFFFF; --sidebar: #FAFAFA;
  --ink: #000000; --soft: #666666; --line: #E6E6E6; --line-weich: #F2F2F2;
  --accent: var(--pl-orange); --accent-soft: #FEF0E4;
  --warn: #B45309; --err: #C2321F; --ok: #17803D;
  --r: 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
/* Die Oberflaeche darf sich NIE als Ganzes verschieben. Jacob: „die Werkzeuge
   sind oben hinter dem Fensterrand" - das Dokument war um eine Leistenhoehe
   nach oben gescrollt: overflow:hidden verhindert nur das Scrollen von Hand,
   scrollIntoView() und focus() schieben das Dokument trotzdem, sobald
   irgendetwas ueber die Fensterhoehe hinausragt. Ein fest am Fenster
   verankerter body hat keinen scrollbaren Ueberlauf mehr - dann gibt es
   nichts, was sich verschieben koennte. app.js setzt zusaetzlich jeden
   Versuch sofort zurueck. */
html { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; height: 100vh; overflow: clip; position: fixed; inset: 0;
  /* Spalte aus Oberflaeche (fuellt) und Protokoll (unten, feste Hoehe).
     Das Protokoll stand bisher UNTER einem 100vh hohen Raster - sichtbar
     nur, wenn die Seite um seine Hoehe nach unten gescrollt war, und genau
     dann fehlten oben die Werkzeuge. */
  display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--pl-blau); }

/* overflow: clip statt hidden - ein Kasten mit hidden ist fuer den Browser
   noch ein Scrollbehaelter, den scrollIntoView() und focus() verschieben
   duerfen (gemessen: die Marke stand danach 286 px ueber dem Rand). clip
   ist keiner: solche Aufrufe lassen ihn aus. */
.app { display: grid; grid-template-columns: 232px 380px 1fr; grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; overflow: clip; }
/* Die Spalten duerfen die Zeile nicht hoeher machen als das Fenster. Ein
   Kasten mit overflow:clip ist kein Scrollbehaelter - seine Mindesthoehe
   waere sonst die seines Inhalts, und die lange Projektliste zog die ganze
   Zeile ueber den Fensterrand: das Prompt-Feld unten war weg. */
.app > * { min-height: 0; min-width: 0; }
/* Auch in der Breite: overflow:clip macht keinen Scrollbehaelter, also
   behaelt eine Spalte sonst die Mindestbreite ihres Inhalts (die Leiste
   ueber der Vorschau mit allen Knoepfen) - und das Raster wurde breiter als
   das Fenster; rechts fehlten Knoepfe, und die Auswahl-Leiste „ragte
   hinaus". Die Vorschau-Spalte darf schrumpfen, ihre Leiste bricht um. */
.vorschau > * { min-width: 0; }
/* Eine Zeile (Aashir: „fit this in one line"): enger gesetzt, der
   Link-Chip darf schrumpfen, das Wort „Vorschau" faellt bei wenig Platz
   weg. Umbruch nur, wenn es wirklich nicht anders geht. */
/* Bleibt rechts Platz, verteilt er sich gleichmaessig zwischen den Gruppen
   (Aashir: „we have a lot of space at the left, justify space between"). */
.vorschau .leiste { flex-wrap: wrap; row-gap: 6px; gap: 5px; padding: 8px 12px; justify-content: space-between; }
.vorschau .leiste .seitenwahl { max-width: 110px; }
.vorschau .leiste .ikon { padding: 6px 8px; }
.vorschau .leiste .ikon svg { width: 16px; height: 16px; }
.vorschau .leiste #vUrl { flex: 0 1 150px; min-width: 64px; overflow: hidden; }
.vorschau .leiste #vUrlText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vorschau .leiste .weg { flex: 0 0 0; }
.vorschau .leiste .geraete button { padding: 4px 7px; }
.vorschau .leiste .zoomer button { min-width: 24px; }
.vorschau .leiste #zoomWert { min-width: 40px; }
@media (max-width: 1750px) { .vorschau .leiste #vTitel { display: none; } }
/* Der Auswahlmodus ist der Einstieg ins direkte Bearbeiten und soll als
   solcher auffallen (Aashir: „make the selection mode button stand out"):
   orange Kontur, Schrift und Beschriftung immer sichtbar - eingeschaltet
   ist er gefuellt. Erst wenn es richtig eng wird, faellt die Beschriftung. */
.vorschau .leiste .auswahl-knopf { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; padding: 6px 11px; }
.vorschau .leiste .auswahl-knopf svg { color: var(--accent); }
.vorschau .leiste .auswahl-knopf:hover:not(:disabled) { background: #FCE0C8; color: var(--accent); }
.vorschau .leiste .auswahl-knopf[aria-pressed="true"], .vorschau .leiste .auswahl-knopf[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.vorschau .leiste .auswahl-knopf[aria-pressed="true"] svg { color: #fff; }
/* Damit die Beschriftung bei ueblichen Fensterbreiten (ab etwa 1400 px)
   in die eine Zeile passt, rueckt die Kennung frueher zusammen; darunter bleibt nur das orange Symbol. */
@media (max-width: 1550px) { .vorschau .leiste #vUrl { flex-basis: 88px; } .vorschau .leiste #vUrlText { max-width: 8ch; } }
@media (max-width: 1439px) { .vorschau .leiste #vBearbeiten span { display: none; } .vorschau .leiste #vBearbeiten { padding: 6px 9px; } }
@media (max-width: 1100px) { .app { grid-template-columns: 200px 1fr; } .vorschau { display: none; } }

/* ---------- Seitenleiste ---------- */
.seite { position: relative; background: var(--sidebar); color: var(--ink); display: flex; flex-direction: column; overflow: clip; border-right: 1px solid var(--line); }
.marke { padding: 18px; border-bottom: 1px solid var(--line); }
.seite h5 { padding: 18px 18px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--soft); font-weight: 600; }
.projekte { flex: 1; overflow-y: auto; padding: 0 10px 14px; }
/* Rechts bleibt Platz fuer die zwei Zeilen-Knoepfe (Duplizieren, Loeschen) -
   sonst lagen sie ueber dem Namen (Aashir: „fix this bad UX"). Lange Namen
   brechen auf hoechstens zwei Zeilen um, der volle Name steht im Tooltip. */
/* Projektzeile: Punkt oben an der ersten Zeile, Name in hoechstens zwei
   Zeilen, darunter EINE ruhige Zeile mit der Seitenzahl. Vorher brach auch
   die Unterzeile um und der Punkt hing irgendwo in der Mitte (Aashir:
   „looks weird"). */
.pj { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; padding: 7px 30px 7px 10px; border: 0; background: none; color: var(--ink); border-radius: 8px; cursor: pointer; font-size: 12px; }
.pj > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pj b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; overflow-wrap: anywhere; font-weight: 500; }
.pj:hover { background: #F2F2F2; }
.pj[aria-current="true"] { background: var(--accent-soft); }
.pj[aria-current="true"] b { font-weight: 700; }
/* Der Punkt vorn: orange = seit dem letzten Öffnen geändert, blinkend =
   wird gerade erstellt oder bearbeitet, rot = abgebrochen, grauer Ring =
   fertig und nichts Neues. */
.pj i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 4px; box-sizing: border-box; }
.pj--ruhig i { background: none; border: 1.5px solid #C4C4C4; }
.pj small { display: block; color: var(--soft); font-size: 11px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seite footer { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--soft); }
.neu-btn { margin: 14px; padding: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: var(--r); cursor: pointer; font-size: 13px; font-weight: 500; }
.neu-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Formularspalte ---------- */
.form > header h1 { font-size: 14px; letter-spacing: -.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.form > header p { font-size: 12px; color: var(--soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
fieldset { border: 0; padding: 0; margin-bottom: 26px; }
legend { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); font-weight: 600; margin-bottom: 12px; }
label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 5px; }
.f { margin-bottom: 13px; }
.f input, .f select, .f textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; transition: border-color .13s;
}
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.f textarea { min-height: 96px; resize: vertical; font-size: 13px; }
.f small { display: block; color: var(--soft); font-size: 11.5px; margin-top: 4px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 11px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: var(--accent-soft); color: #8A4514; border-radius: 20px; font-size: 12px; }
.chip button { border: 0; background: none; cursor: pointer; color: inherit; opacity: .6; padding: 0; line-height: 1; }
.chip button:hover { opacity: 1; }

.drop { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 22px; text-align: center; color: var(--soft); font-size: 12.5px; cursor: pointer; transition: .13s; }
.drop:hover, .drop.an { border-color: var(--accent); background: var(--accent-soft); color: #0D4A46; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; font-size: 13px; font-weight: 500; }
.btn--p { background: var(--accent); color: #fff; }
.btn--p:hover { background: #DE7527; }
.btn--p:disabled { background: #F0C9A8; cursor: not-allowed; }
.btn--g { border-color: var(--line); background: #fff; }
.btn--g:hover { border-color: var(--soft); }
.btn--voll { width: 100%; padding: 11px; }

/* ---------- Vorschauspalte ---------- */
.vorschau { display: flex; flex-direction: column; background: var(--bg); overflow: clip; }
.leiste { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.leiste b { font-size: 13.5px; }
.leiste .weg { flex: 1; }
.url { font-size: 12px; color: var(--soft); background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; }
.pill { font-size: 11.5px; padding: 3px 9px; border-radius: 20px; font-weight: 500; }
.pill--ok { background: #E4F1E9; color: var(--ok); }
.pill--lauf { background: #FBF0E2; color: var(--warn); }
.pill--err { background: #FBE9E6; color: var(--err); }
.rahmen { flex: 1; padding: 16px; overflow: auto; position: relative; }
.rahmen iframe { width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.leer { height: 100%; display: grid; place-items: center; text-align: center; color: var(--soft); font-size: 13px; }

/* Protokoll: unten in der Vorschau-Spalte (Aashir: „move console to the
   preview section"). Beide Teile flex:none, die Vorschau darueber schrumpft. */
.log { flex: none; border-top: 1px solid var(--line); background: #16181A; color: #A8B3AD; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; padding: 11px 16px; height: 132px; overflow-y: auto; white-space: pre-wrap; }
.log b { color: #7FD1C5; font-weight: 400; }
.log .e { color: #F0857B; }
.log .w { color: #E8C07A; }

.hinweis { padding: 10px 12px; border-radius: var(--r); font-size: 12.5px; margin-bottom: 16px; }
.hinweis--err { background: #FBE9E6; color: var(--err); }
.hinweis--warn { background: #FBF3E4; color: var(--warn); }
.tabs button { border: 0; background: none; padding: 10px 7px; cursor: pointer; font-size: 12.5px; color: var(--soft); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); font-weight: 500; }
.bloecke { display: grid; gap: 5px; }
.bl { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 12.5px; }
.bl span { flex: 1; }
.bl small { color: var(--soft); font-size: 11px; }
.seitenliste { display: grid; gap: 4px; margin-bottom: 14px; }
.sl { text-align: left; padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; font-size: 12.5px; }
.sl[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Prompt-Box für Änderungen ---------- */
.fokus { font-size: 11.5px; color: var(--soft); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 10px; margin-bottom: 12px; }
.fokus b { color: var(--ink); font-weight: 600; }

/* max-height weg: der Chat scrollt mit dem ganzen oberen Teil (prompt-oben),
   ein zweiter Scrollbereich darin war doppelt. Kein Abstand nach unten -
   die Luecke zum Eingabefeld kam von hier (Aashir: „why this extra white
   space"). */
.chat { display: grid; gap: 9px; margin-bottom: 0; }
.chat__leer { font-size: 12.5px; color: var(--soft); line-height: 1.5; }
.nachricht { border-radius: var(--r); padding: 9px 11px; font-size: 12.5px; }
.nachricht--ich { background: var(--pl-blau-bg); color: #16305F; }
.nachricht--du { background: var(--bg); border: 1px solid var(--line); }
.nachricht b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  opacity: .6; margin-bottom: 4px; font-weight: 600; }
.nachricht ul { margin: 5px 0 0; padding-left: 16px; display: grid; gap: 3px; }
.nachricht li { font-size: 12px; color: var(--soft); }
.nachricht .kosten { font-size: 11px; color: var(--soft); margin-top: 6px; }
.nachricht--lauf { opacity: .65; font-style: italic; }
.zurueck { margin-top: 8px; padding: 4px 9px; font-size: 11.5px; border: 1px solid var(--line);
  background: #fff; border-radius: 5px; cursor: pointer; }
.zurueck:hover { border-color: var(--err); color: var(--err); }

.vorschlaege { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.vorschlaege button { font-size: 11.5px; padding: 5px 10px; border: 1px solid var(--line);
  background: #fff; border-radius: 20px; cursor: pointer; color: var(--soft); text-align: left; }
.vorschlaege button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.promptbox { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.promptbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Eine Zeile, die mit dem Text waechst (die Hoehe setzt app.js beim Tippen);
   kein Ziehgriff mehr, ab etwa 40 % der Fensterhoehe rollt der Text. */
.promptbox textarea { display: block; width: 100%; border: 0; padding: 10px 12px; resize: none;
  min-height: 0; font-size: 13px; line-height: 1.45; overflow-y: hidden; }
.promptbox textarea:focus { outline: none; }
.promptbox textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promptbox__fuss { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-top: 1px solid var(--line); background: var(--bg); }
.promptbox__fuss span { font-size: 11px; color: var(--soft); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promptbox__fuss .btn { flex: none; white-space: nowrap; }

.verlauf { margin-top: 0; }
.verlauf__hinweis { font-size: 12px; color: var(--soft); margin: 0 0 12px; }
.verlauf > div { display: grid; gap: 4px; }
.vs { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 5px; font-size: 11.5px; background: #fff; }
.vs span { flex: 1; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs button { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 11.5px; }

.farbzeile { display: flex; gap: 7px; align-items: center; }
.farbzeile input[type=color] { width: 40px; height: 36px; padding: 2px; border: 1px solid var(--line);
  border-radius: var(--r); background: #fff; cursor: pointer; flex: none; }
.farbzeile input[type=text] { flex: 1; }
.farbzeile button { width: 32px; height: 36px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--r); cursor: pointer; color: var(--soft); flex: none; }
.farbzeile button:hover { border-color: var(--err); color: var(--err); }

.seitenwahl { font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; max-width: 220px; }
.assetliste { display: grid; gap: 4px; margin-top: 10px; }
.asset { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; font-size: 11.5px; background: #fff; }
.asset span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset small { color: var(--soft); flex: none; }
/* Frueher max-height: 260px - der Verlauf darf jetzt den Reiter fuellen. */

button.url { cursor: pointer; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; transition: border-color .15s, color .15s; }
button.url:hover { border-color: var(--accent); color: var(--accent); }

.pj--laeuft i, .pj--arbeitet i { background: var(--accent); animation: pulsieren 1.2s ease-in-out infinite; }
.pj--abgebrochen i { background: var(--err); }
.pj--laeuft small, .pj--arbeitet small { color: var(--warn); }
.pj--abgebrochen small { color: var(--err); }
@keyframes pulsieren { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.modus { display: grid; gap: 6px; margin-bottom: 12px; }
.modus label { display: block; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; font-size: 12px; }
.modus label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.modus input { margin-right: 7px; }
.modus b { font-size: 12.5px; }
.modus span { display: block; color: var(--soft); margin-top: 2px; margin-left: 21px; line-height: 1.4; }

/* ---------- Fortschritt während der Generierung ---------- */
.lauf { border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; margin-bottom: 14px; background: #fff; }
.lauf-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.lauf-kopf b { font-size: 13px; }
.lauf-kopf span { font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.lauf-balken { height: 4px; background: var(--line-weich); border-radius: 2px; overflow: hidden; }
.lauf-balken i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px;
  transition: width .5s cubic-bezier(.16,1,.3,1); }
.lauf-balken.unbestimmt i { width: 35% !important; animation: laufWandern 1.5s ease-in-out infinite; }
@keyframes laufWandern { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.lauf-text { font-size: 12px; color: var(--soft); margin-top: 9px; line-height: 1.45; }
.lauf-liste { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.lauf-liste li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--soft); }
.lauf-liste li::before { content: "○"; color: var(--line); font-size: 13px; }
.lauf-liste li.laeuft::before { content: "◐"; color: var(--accent); }
.lauf-liste li.laeuft { color: var(--ink); font-weight: 500; }
.lauf-liste li.fertig::before { content: "●"; color: var(--ok); }
.lauf-liste li.fertig { color: var(--ink); }
.lauf-liste li small { margin-left: auto; color: var(--soft); font-weight: 400; }
.lauf--richtung { font-style: italic; color: var(--ink); background: var(--accent-soft);
  padding: 8px 10px; border-radius: 5px; margin-top: 9px; font-size: 12px; line-height: 1.45; }

/* ---------- Geräteumschalter in der Vorschau ---------- */
.geraete { display: flex; gap: 2px; background: var(--line-weich); padding: 2px; border-radius: var(--r); }
.geraete button { border: 0; background: none; padding: 4px 10px; font-size: 11.5px; border-radius: 5px; cursor: pointer; color: var(--soft); }
.geraete button:hover { color: var(--ink); }
.geraete button.aktiv { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rahmen.eng { display: grid; place-items: start center; background: #EDEDEA; }
.zoomer { margin-left: 4px; }
.zoomer button { min-width: 28px; font-variant-numeric: tabular-nums; }
#zoomWert { min-width: 52px; }
.rahmen.eng iframe { box-shadow: 0 8px 32px -8px rgba(0,0,0,.22); border-radius: 14px; transition: width .3s ease; }
.rahmen-hinweis { position: absolute; bottom: 8px; right: 16px; font-size: 11px; color: var(--soft);
  background: rgba(255,255,255,.9); padding: 3px 8px; border-radius: 20px; }
.vorschau { position: relative; }

/* ---------- Logo-Feld ---------- */
.logofeld { display: flex; gap: 16px; align-items: flex-start; border: 1.5px dashed var(--line);
  border-radius: var(--r); padding: 16px; transition: .15s; }
.logofeld.an { border-color: var(--accent); background: var(--accent-soft); }
.logofeld__bild { width: 84px; height: 84px; flex: none; border: 1px solid var(--line);
  border-radius: var(--r); display: grid; place-items: center; background: #fff; overflow: hidden; }
.logofeld__bild img { max-width: 74px; max-height: 74px; width: auto; height: auto; }
.logofeld__bild span { font-size: 10.5px; color: var(--soft); text-align: center; padding: 4px; }
.logofeld__text { flex: 1; }
.logofeld__text b { display: block; font-size: 13px; }
.logofeld__text small { display: block; color: var(--soft); font-size: 11.5px; line-height: 1.45; margin: 4px 0 9px; }
.logofeld__text .btn { padding: 6px 12px; font-size: 12px; }

/* Knöpfe im Logofeld: eigener Kasten mit echtem Abstand.
   Vorher standen sie als lose Geschwister nebeneinander - beim Umbruch
   fehlte deshalb jeder senkrechte Abstand, und die dritte Schaltfläche
   klebte an der Zeile darüber. */
.logofeld__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.logofeld__knoepfe .btn { white-space: nowrap; }

/* ---------- Bereitschaftsliste ---------- */
.bereit { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px; background: #fff; }
.bereit__kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.bereit__kopf b { font-size: 12.5px; }
.bereit__kopf span { font-size: 11.5px; color: var(--soft); font-variant-numeric: tabular-nums; }
.bereit ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.bereit li { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.bereit li button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent);
  font-size: 12px; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.bereit li::before { content: "○"; color: var(--line); font-size: 13px; flex: none; }
.bereit li.da::before { content: "●"; color: var(--ok); }
.bereit li.da { color: var(--soft); }
.bereit li.da button { color: var(--soft); text-decoration: none; cursor: default; }
.bereit li small { margin-left: auto; color: var(--soft); font-size: 11px; }
.bereit--fertig { border-color: var(--ok); }

/* ---------- Vorschauleiste: platzsparend mit Symbolen ---------- */
.leiste { gap: 8px; flex-wrap: nowrap; min-height: 46px; }
.leiste b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.leiste svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Symbole in JEDEM Symbolknopf, nicht nur in der Vorschauleiste.
   Die Maßangaben hingen an „.leiste svg" - die Auswahlleiste heißt aber
   .wahlleiste. Ihr Schließen-Knopf bekam deshalb weder Größe noch
   Strichfarbe und sah aus wie eine leere Pille. */
.ikon svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.wahlleiste svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.wahlleiste .ikon { padding: 6px 8px; background: transparent; }
.wahlleiste .ikon:hover:not(:disabled) { background: #fff; }

.ikon { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line);
  background: #fff; border-radius: var(--r); cursor: pointer; color: var(--ink); font-size: 12px; }
.ikon:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ikon:disabled { opacity: .38; cursor: not-allowed; }
#vUrlText { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--soft); }
#vUrl:hover #vUrlText { color: var(--accent); }
.geraete button { display: inline-flex; padding: 5px 9px; }
.geraete button svg { width: 15px; height: 15px; }
.seitenwahl { max-width: 150px; }
@media (max-width: 1180px) {
  .leiste b { max-width: 14ch; }
  #vUrlText { display: none; }
}

/* ---------- Funktionen ---------- */
.fn-vor { font-size: 12.5px; color: var(--soft); padding: 20px 0; text-align: center; }
/* Der negative Rand oben war fuer Hinweise gedacht, die direkt unter einer
   Beschriftung stehen. Folgt der Hinweis auf Inhalt - etwa auf die Reihe mit
   „neu erzeugen / archivieren / loeschen" -, zog er sich in die letzte Zeile
   hinein und der Text klebte am Kasten. Also nur dort eng, wo es gemeint war. */
.fn-hinweis { font-size: 11.5px; color: var(--soft); line-height: 1.45; margin: 0 0 11px; }
legend + .fn-hinweis { margin-top: -4px; }
.fn-bausteine + .fn-hinweis,
.fn + .fn-hinweis { margin-top: 12px; }
.fn { display: flex; gap: 11px; align-items: flex-start; padding: 10px 11px; border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 6px; background: #fff; }
.fn:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.fn input[type=checkbox] { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--accent); }
.fn__text { flex: 1; }
.fn__text b { display: block; font-size: 12.5px; }
.fn__text small { display: block; color: var(--soft); font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.fn__warn { display: block; color: var(--warn); font-size: 11px; margin-top: 4px; }
.fn__feld { margin-top: 8px; }
.fn__feld input { width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.fn-bausteine { display: grid; gap: 5px; }
.fn-baustein { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 12.5px; }
.fn-baustein button { border: 1px solid var(--line); background: none; border-radius: 5px; padding: 4px 10px;
  font-size: 11.5px; cursor: pointer; color: var(--accent); flex: none; }
.fn-baustein button:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Einstellungen ---------- */
.fuss-zahnrad { border: 0; background: none; padding: 0 6px 0 0; cursor: pointer; color: var(--soft); }
.fuss-zahnrad:hover { color: var(--accent); }
.fuss-zahnrad svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.seite footer { display: flex; align-items: center; gap: 4px; }
/* Der Reset oben setzt "* { margin: 0 }" - damit faellt auch das margin:auto
   weg, mit dem der Browser einen modalen Dialog von selbst mittig stellt.
   Deshalb klebte das Fenster in der linken oberen Ecke. */
dialog.dlg { border: 0; border-radius: 14px; padding: 0; margin: auto;
  width: min(760px, 94vw); max-width: none;
  box-shadow: 0 24px 70px -20px rgba(0,0,0,.4); }
dialog.dlg::backdrop { background: rgba(0,0,0,.35); }
.dlg header { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px;
  border-bottom: 1px solid var(--line); }
.dlg header button { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--soft); line-height: 1; }
.dlg-inhalt { padding: 20px 22px; max-height: min(72vh, 640px); overflow-y: auto;
  display: grid; gap: 18px; }
.dlg-inhalt fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin: 0; }
.dlg-inhalt legend { padding: 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--soft); }
/* Zwei Spalten, wo es passt - sonst wird der Dialog unnötig lang. */
.dlg-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dlg-feld { display: grid; gap: 4px; }
.dlg-feld > span { font-size: 12px; font-weight: 500; }
.dlg-feld small { color: var(--soft); font-size: 11px; }
.dlg-feld input, .dlg-feld select { padding: 7px 9px; border: 1px solid var(--line);
  border-radius: var(--r); font-size: 12.5px; background: #fff; width: 100%; }
.dlg footer { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.zustand { list-style: none; padding: 0; display: grid; gap: 6px; }
.zustand li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.zustand li::before { content: "●"; font-size: 11px; }
.zustand li.ok::before { color: var(--ok); }
.zustand li.aus::before { color: var(--line); }
.zustand li small { margin-left: auto; color: var(--soft); font-size: 11px; }

/* ---------- Startbildschirm des Werkzeugs ---------- */
.start { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: var(--bg); transition: opacity .45s ease, visibility .45s; overflow: hidden; isolation: isolate; }
/* Ein weiches Farbspiel in den Markenfarben hinter dem Logo - drei grosse
   Lichtflecken, die langsam wandern (Aashir: „gradient type animation on
   bg on this loader page"). Unter dem Inhalt, sehr hell, damit Logo und
   Balken lesbar bleiben; wer weniger Bewegung wuenscht, bekommt sie still. */
.start::before, .start::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
/* Unten: ein fliessender Farbverlauf ueber die ganze Flaeche, dessen Lage
   in vier Sekunden einmal durchlaeuft - in der einen Sekunde, die der Start
   dauert, wandert er sichtbar ein Viertel (Aashir: „can't sense animation";
   die langsamen Lichtflecken davor bewegten sich in der Zeit kaum). */
.start::before {
  inset: 0; opacity: .34; filter: blur(18px);
  /* Helle Toene (Aashir: „colors too dark") - der Verlauf soll nur ahnen
     lassen, nicht leuchten. */
  background: linear-gradient(115deg, #FDD5B8 0%, #FFF3A6 22%, #EAF3FE 44%, #A9D2FA 62%, #FBC9A6 82%, #FFF3A6 100%);
  background-size: 320% 320%;
  animation: start-wasch 4s ease-in-out infinite alternate;
}
/* Oben: zwei Lichtflecken, die schnell kreisen - Tiefe und Bewegung. */
.start::after {
  inset: -30%; filter: blur(30px);
  background:
    radial-gradient(30% 34% at 68% 66%, rgba(78,160,246,.20), transparent 70%),
    radial-gradient(28% 30% at 32% 70%, rgba(253,177,126,.26), transparent 70%);
  animation: start-farbspiel 5s ease-in-out infinite alternate;
}
@keyframes start-wasch {
  0%   { background-position: 0% 40%; }
  100% { background-position: 100% 60%; }
}
@keyframes start-farbspiel {
  0%   { transform: translate3d(-10%, -8%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(8%, 10%, 0) rotate(10deg) scale(1.15); }
  100% { transform: translate3d(12%, -10%, 0) rotate(-8deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .start::before, .start::after { animation: none; } }
.start--weg { opacity: 0; visibility: hidden; }
.start__inhalt { display: grid; justify-items: center; gap: 18px; width: min(280px, 70vw); }
.start__logo { height: 26px; width: auto; }
.start__balken { width: 100%; height: 3px; background: var(--line-weich); border-radius: 2px; overflow: hidden; }
.start__balken i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px;
  transition: width .35s cubic-bezier(.16,1,.3,1); }
.start__text { font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
/* Bis alles geladen ist, ist die Oberfläche nicht nur unsichtbar, sondern
   auch nicht bedienbar. Reine Durchsichtigkeit würde Klicks durchlassen –
   man könnte auf Knöpfe drücken, die noch keine Daten haben. */
.app {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease, visibility .4s;
}
.app--da { opacity: 1; visibility: visible; pointer-events: auto; }

/* ---------- Wortmarke ----------
   "pano" ist der Original-Schriftzug aus dem Logo, hinter dem "local"
   abgeschnitten. Darunter, buendig zum "p", steht die Gattung.
   Der Einzug entspricht dem Anteil des Zeichens am Bild (36,6 von 87,7). */
.pano-marke { display: inline-block; }
.pano-marke__wort { display: block; height: auto; width: 138px; }
.pano-marke__unter {
  display: block;
  margin-left: 47%;
  margin-top: -4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.pano-marke--gross .pano-marke__wort { width: 208px; }
.pano-marke--gross .pano-marke__unter { font-size: 15px; letter-spacing: .17em; margin-top: -6px; }

/* ---------- Eigene Funktionen und Projektaktionen ---------- */
.eigen-neu { margin-top: 9px; border: 1px dashed var(--line); border-radius: var(--r); padding: 10px 12px; }
.eigen-neu summary { font-size: 12px; color: var(--accent); cursor: pointer; }
.eigen-neu[open] summary { margin-bottom: 10px; }
.eigen-neu .f { margin-bottom: 9px; }
.eigen-neu label { font-size: 11.5px; }
.fn-baustein button.gefahr { color: var(--err); }
.fn-baustein button.gefahr:hover { border-color: var(--err); background: #FBE9E6; }
.fn-baustein .weg { border: 0; background: none; color: var(--soft); cursor: pointer; padding: 0 4px; font-size: 15px; }
.fn-baustein .weg:hover { color: var(--err); }
.archiv-box { margin: 0 10px 12px; }
.archiv-box summary { font-size: 11.5px; color: var(--soft); cursor: pointer; padding: 6px 10px; }
.archiv-box > div { display: grid; gap: 3px; padding: 4px 0; }
.arch { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; font-size: 12px; color: var(--soft); }
.arch button { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 11.5px; }

/* ---------- Prompt-Reiter: Eingabe bleibt sichtbar ----------
   Vorher musste man an Vorschlägen und Moduswahl vorbeiscrollen, um zum
   Eingabefeld zu kommen. Jetzt liegt es unten fest, der Rest scrollt. */
.prompt-oben { flex: 1; overflow-y: auto; padding: 18px 22px 8px; min-height: 0; }
.prompt-unten { flex: none; padding: 10px 22px 16px; border-top: 1px solid var(--line);
  background: var(--panel); box-shadow: 0 -8px 18px -14px rgba(0,0,0,.25); }
/* Die Vorschlaege standen in einem 62 Pixel hohen Rollbereich, in dem
   ganzsatzlange Knoepfe auf volle Breite umbrachen: sichtbar war anderthalb
   Vorschlaege, der Rest lag hinter einer winzigen Rollleiste. Man sah nicht,
   was es gibt, und das Eingabefeld ging daneben unter.

   Jetzt eine einzige Zeile, waagerecht schiebbar, jeder Vorschlag auf eine
   Zeile gekuerzt. Der ganze Text steht im title und im Feld, sobald man
   klickt. Das Eingabefeld ist wieder das Auffaellige. */
.prompt-unten .vorschlaege {
  display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 9px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding-bottom: 1px;
}
.prompt-unten .vorschlaege::-webkit-scrollbar { display: none; }
.prompt-unten .vorschlaege button {
  white-space: nowrap; max-width: 15rem; overflow: hidden; text-overflow: ellipsis;
  flex: none;
}
.modus { margin-top: 14px; }

/* ---------- Aufbau der Formularspalte ----------
   Kopf und Reiter stehen fest, nur der Panel-Inhalt scrollt. Vorher waren
   sie "sticky" – das vertrug sich nicht mit dem Flex-Aufbau und die Reiter
   wurden abgeschnitten. */
.form {
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: clip; min-height: 0;
}
/* Kompakt (Aashir: „this top part is taking too much space"): der Name
   in hoechstens zwei Zeilen (voll im Tooltip), Unterzeile in einer. */
/* Eine Zeile (Aashir: „maybe just one liner bar"): Name, Fassung, Stift,
   Duplizieren. Die Unterzeile erscheint nur, wenn sie etwas meldet
   („wird gerade erstellt …") - die Seitenzahl steht schon in der Liste. */
.form > header {
  flex: 0 0 auto; padding: 7px 16px 7px 18px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.form > header p:not(.wichtig) { display: none; }
.form > header p.wichtig { color: var(--warn, #b7791f); font-weight: 500; }
.tabs {
  flex: 0 0 auto; display: flex; gap: 2px; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  /* Zur Not schiebbar. Ein Reiter, der aus dem Bild rutscht und sich nicht
     mehr anklicken lässt, ist schlimmer als eine Bildlaufleiste. */
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
/* Jeder Reiterinhalt füllt den Rest und scrollt für sich */
.form > div[id^="panel"] {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px;
}
/* Der Prompt-Reiter teilt sich zusätzlich in scrollend oben und fest unten */
#panelPrompt { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
/* Ein ID-Selektor schlaegt das display:none des hidden-Attributs. Ohne diese
   Zeile bleibt der Prompt-Reiter sichtbar und liegt ueber allen anderen. */
[hidden] { display: none !important; }
/* flex: 0 1 auto statt 1: bei wenig Inhalt rueckt das Eingabefeld direkt
   unter den Inhalt, statt dass eine Luecke klafft (Aashir: „so much extra
   space"). Bei viel Inhalt schrumpft der obere Teil und scrollt, das
   Eingabefeld bleibt unten stehen. */
/* Und seit 2.5.5 wie ein Chat: der obere Teil fuellt den Reiter, sein
   Inhalt haengt unten am Eingabefeld (margin-top: auto am ersten Kind -
   justify-content: flex-end wuerde bei Ueberlauf den Anfang abschneiden).
   So klafft weder ueber dem Feld noch darunter eine leere weisse Flaeche
   (Aashir: „the below white space not needed"); der Verlauf waechst nach
   oben und scrollt, das Feld bleibt unten stehen. */
.prompt-oben { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 22px 10px; display: flex; flex-direction: column; }
.prompt-oben > :first-child { margin-top: auto; }
.prompt-oben > * { flex: none; }
.prompt-unten {
  flex: none; padding: 8px 22px 14px;
  border-top: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 -8px 18px -14px rgba(0,0,0,.25);
}

/* ═══════════════ Einstellungen als Seite ═══════════════
   Liegt im Raster ueber Formular und Vorschau (Spalten 2 bis Ende), die
   Seitenleiste bleibt bedienbar. Links die Bereiche, rechts der Inhalt in
   Lesebreite; die Felder tragen dieselben Klassen wie frueher im Dialog. */
/* Nicht ins Raster gelegt (ein explizit platziertes Kind schob die anderen
   in eine zweite Zeile), sondern absolut ueber Formular und Vorschau - vom
   rechten Rand der Seitenleiste bis zum Ende. */
.app { position: relative; }
.einst { position: absolute; top: 0; bottom: 0; right: 0; left: 232px; z-index: 6; background: var(--bg); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.app--schmal .einst { left: 60px; }
@media (max-width: 1100px) { .einst { left: 200px; } .app--schmal .einst { left: 60px; } }
/* Im Vollbild gibt es keine Seitenleiste - dann ueber alles. */
.app--voll .einst { left: 0; }
.einst__kopf { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--panel); }
.einst__kopf h1 { font-size: 16px; margin: 0; font-weight: 700; }
.einst__stand { margin-left: auto; font-size: 12px; color: var(--soft); }
.einst__zurueck { padding: 6px 12px; }
.einst__koerper { display: grid; grid-template-columns: 200px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.einst__nav { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-right: 1px solid var(--line); background: var(--panel); }
.einst__nav button { display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--r); background: none; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.einst__nav button:hover { background: #fff; border-color: var(--line); }
.einst__nav button[aria-pressed="true"] { background: var(--accent-soft); border-color: rgba(244,134,56,.35); font-weight: 600; }
.einst__nav button em { font-style: normal; font-size: 11px; color: var(--soft); margin-left: auto; }
.einst__inhalt { overflow-y: auto; min-height: 0; }
.einst__tafel.dlg-inhalt { max-height: none; padding: 22px 28px 40px; max-width: 860px; display: grid; gap: 18px; }
.einst__fuss { display: flex; align-items: center; gap: 12px; }
.einst__gespeichert { font-size: 12px; color: var(--ok); }
@media (max-width: 900px) { .einst__koerper { grid-template-columns: 1fr; } .einst__nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); } }

/* ═══════════════ Seitenleiste: Licht und Einklappen ═══════════════ */

/* Ein weiches Leuchten in den Logofarben, oben links – als käme das Licht
   vom Zeichen selbst. Sehr zurückhaltend, damit es die Projektliste nicht
   stört. Dazu eine feine Körnung, die dem Weiß Tiefe gibt. */
.seite {
  position: relative;
  background:
    radial-gradient(760px 300px at -8% -6%,  rgba(255,235,91,.30), transparent 62%),
    radial-gradient(560px 260px at 4% 2%,    rgba(244,134,56,.20), transparent 58%),
    radial-gradient(680px 420px at -12% 30%, rgba(78,160,246,.13), transparent 60%),
    var(--sidebar);
  transition: width .28s cubic-bezier(.4,0,.2,1);
}
/* Feine Körnung – ohne Bilddatei, als eingebettetes Rauschen */
.seite::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='.055'/%3E%3C/svg%3E");
}
.seite > * { position: relative; z-index: 1; }

/* Ein schmaler Lichtstreifen an der Kante zum Arbeitsbereich */
.seite::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom,
    rgba(244,134,56,.42) 0%, rgba(255,235,91,.22) 18%,
    var(--line) 46%, var(--line) 100%);
}

/* ---------- Einklappen ---------- */
/* Aufgeklappt: oben rechts neben dem Logo, auf dessen Hoehe - nicht als
   eigene Zeile darunter. Eingeklappt: mittig unter dem Zeichen. */
.klapp-zeile { position: absolute; top: 14px; right: 10px; display: flex; padding: 0; z-index: 3; }
.klapp {
  width: 30px; height: 28px; border: 1px solid transparent; border-radius: 7px;
  background: none; cursor: pointer; color: var(--soft);
  display: grid; place-items: center;
}
.klapp:hover { background: rgba(0,0,0,.05); color: var(--ink); border-color: var(--line); }
.klapp svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .28s cubic-bezier(.4,0,.2,1); }

.app--schmal { grid-template-columns: 60px 380px 1fr; }

.app--schmal .seite h5,
.app--schmal .seite footer span,
.app--schmal .pano-marke__unter,
.app--schmal .pj span,
.app--schmal .archiv-box { display: none; }
.app--schmal .marke { padding: 16px 0 14px; display: grid; place-items: center; }
.app--schmal .pano-marke__wort {
  width: 34px; object-fit: cover; object-position: left center;
}
.app--schmal .neu-btn {
  margin: 10px; padding: 9px 0; font-size: 0; display: grid; place-items: center;
}
.app--schmal .neu-btn::after { content: "+"; font-size: 18px; line-height: 1; }
/* Eingeklappt: statt eines Punkts ein Kuerzel-Plaettchen je Projekt; der
   Status-Punkt haengt klein an dessen Ecke. Zeilenknoepfe (Duplizieren,
   Loeschen) bleiben weg - dafuer ist kein Platz. */
.pj-kuerzel { display: none; }
.app--schmal .pj { justify-content: center; padding: 6px 0; position: relative; }
.app--schmal .pj i { position: absolute; width: 8px; height: 8px; right: 9px; top: 5px; box-shadow: 0 0 0 2px var(--sidebar, #fff); }
.app--schmal .pj-kuerzel { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; font-style: normal; }
.app--schmal .pj[aria-current="true"] { background: none; }
.app--schmal .pj[aria-current="true"] .pj-kuerzel { outline: 2px solid var(--accent); outline-offset: 1px; }
.app--schmal .pj-mehr, .app--schmal .pj-menue { display: none !important; }
/* Eingeklappt traegt nur ein Projekt mit Neuigkeit oder Lauf einen Punkt. */
.app--schmal .pj--ruhig i { display: none; }
/* Plugins nicht in der schmalen Leiste (Aashir) - sie sind ueber die
   aufgeklappte Leiste erreichbar. */
.app--schmal .seiten-eintrag { display: none; }
.app--schmal .projekte { padding: 0 6px 10px; }
.app--schmal #pjSuche, .app--schmal .pj-suche { display: none; }
.app--schmal .seite footer { justify-content: center; padding: 14px 0; }
@media (max-width: 1100px) { .app--schmal { grid-template-columns: 60px 1fr; } }

/* Im schmalen Zustand nur das Zeichen – kein angeschnittener Schriftzug */
.pano-marke__nur-zeichen { display: none; height: 26px; width: auto; }
.app--schmal .pano-marke__wort { display: none; }
.app--schmal .pano-marke__nur-zeichen { display: block; }

/* Eingeklappt: der Klappknopf mittig unter dem Zeichen */
.app--schmal .klapp-zeile { position: static; justify-content: center; padding: 4px 0 0; }
.app--schmal .klapp:hover { border-color: var(--accent); color: var(--accent); }
/* Beim Überfahren der schmalen Leiste wird der Knopf deutlicher */
.seite:hover .klapp { color: var(--ink); }

.abmelden { margin-left: auto; color: var(--soft); display: grid; place-items: center; padding: 0 2px; }
.abmelden:hover { color: var(--err); }
.abmelden svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.app--schmal .abmelden { display: none; }
.offen-hinweis { background: #FBF3E4; color: var(--warn); font-size: 11px; padding: 6px 10px;
  border-radius: 5px; margin: 0 10px 8px; line-height: 1.45; }

.entwurf-hinweis { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 7px 11px; background: var(--pl-blau-bg); color: #16305F;
  border-radius: var(--r); font-size: 11.5px; }
.entwurf-hinweis span { flex: 1; }
.entwurf-hinweis button { border: 0; background: none; color: #16305F; cursor: pointer;
  font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Briefing einlesen ---------- */
.einlesen { border: 1px solid var(--line); border-radius: var(--r); padding: 11px 13px;
  margin-bottom: 12px; background: #fff; }
.einlesen summary { font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--accent); }
.einlesen[open] summary { margin-bottom: 8px; }
.einlesen textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: var(--r); font-size: 12.5px; resize: vertical; margin-bottom: 9px; }
.einlesen .btn { width: 100%; }
.einlese-erg { margin-top: 10px; font-size: 11.5px; line-height: 1.55; }
.einlese-erg b { display: block; margin-bottom: 3px; }
.einlese-erg .gut { color: var(--ok); }
.einlese-erg .fehlt { color: var(--warn); }

/* ---------- Aufbau in der Vorschau mitverfolgen ----------
   Die Regeln dieses Abschnitts sind irgendwann entfallen; zurück blieb
   eine schließende Klammer ohne Anfang. Sie stand seitdem im Stylesheet
   und wurde vom Browser stillschweigend übersprungen. Entfernt. */

/* ── Direkt bearbeiten ─────────────────────────────────────────────────
   Fünfhundert Felder in einer flachen Liste sind unbenutzbar. Deshalb
   Seite → Abschnitt → Feld, jede Ebene zugeklappt. Wer eine Zeile sucht,
   klappt genau den Abschnitt auf, in dem sie steht. */

.in-gruppe { border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 6px; background: #fff; }
.in-gruppe > summary { cursor: pointer; padding: 8px 11px; font-weight: 600;
  font-size: 12.5px; list-style: none; display: flex; align-items: baseline; gap: 7px; }
.in-gruppe > summary::-webkit-details-marker { display: none; }
.in-gruppe > summary::before { content: "\25B8"; font-size: .85em; color: var(--soft);
  transition: transform .15s ease; }
.in-gruppe[open] > summary::before { transform: rotate(90deg); }
.in-gruppe > summary small { font-weight: 400; color: var(--soft);
  margin-left: auto; font-size: 11px; }
.in-gruppe > summary:hover { background: var(--line-weich); }

.in-gruppe--seite > summary { font-size: 13px; }
.in-gruppe--abschnitt { margin: 5px 8px 5px 16px; background: var(--sidebar); }

.in-feld { display: block; padding: 6px 11px 9px; }
.in-feld__name { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--soft); margin-bottom: 4px; }
.in-feld input, .in-feld textarea { width: 100%; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--r); font-size: 12.5px;
  background: #fff; resize: vertical; }
.in-feld input:focus, .in-feld textarea:focus { outline: 2px solid var(--accent);
  outline-offset: -1px; border-color: transparent; }

.in-leiste { position: sticky; bottom: 0; display: flex; align-items: center;
  gap: 9px; padding: 11px 0; margin-top: 12px; background: var(--panel);
  border-top: 1px solid var(--line); }
.in-stand { font-size: 11.5px; color: var(--soft); }
#inSpeichern[disabled] { opacity: .45; cursor: default; }

/* Ein Link, der noch nirgendwo hinführt, muss auch so aussehen. Vorher stand
   dort die Kennung des vorigen Projekts – wer klickte, verschickte die
   Website eines anderen Kunden. */
#vUrl[disabled] { opacity: .4; cursor: default; pointer-events: none; }

/* ── Fortschritt links im Bedienteil ───────────────────────────────────
   Der Vorschaubereich rechts zeigt die Seite. Alles Zählbare gehört hierhin,
   zu den übrigen Angaben über das Projekt. */
.lauf-zeit { font-size: 11.5px; color: var(--soft); font-variant-numeric: tabular-nums;
  display: flex; gap: 7px; align-items: baseline; }
.lauf-zeit em { font-style: normal; opacity: .8; }
.lauf-richtung { font-size: 11.5px; line-height: 1.5; color: var(--soft); font-style: italic;
  border-left: 2px solid var(--line); padding-left: 9px; margin: 8px 0; }
.lauf-liste li small { color: var(--soft); font-size: 10.5px; margin-left: 6px; font-weight: 400; }
.lauf-wissen { font-size: 11px; color: var(--soft); line-height: 1.55; margin-top: 10px;
  min-height: 3.1em; opacity: 0; }
.lauf-wissen.ein { animation: laufText .5s ease-out forwards; }
@keyframes laufText { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }

/* ── Vorschau während des Aufbaus ──────────────────────────────────────
   Nur die Seite selbst, sobald sie aus dem Zwischenstand gebaut werden kann. */
.bauv { height: 100%; display: flex; flex-direction: column; }
.bauv__warten { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; color: var(--soft); font-size: 12.5px; padding: 24px;
  text-align: center; }
.bauv__puls { display: inline-flex; gap: 4px; }
.bauv__puls i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: bauPuls 1.4s ease-in-out infinite; }
.bauv__puls i:nth-child(2) { animation-delay: .18s; }
.bauv__puls i:nth-child(3) { animation-delay: .36s; }
@keyframes bauPuls { 0%,60%,100% { opacity: .22; transform: scale(.8) } 30% { opacity: 1; transform: scale(1) } }

.bauv__buehne { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bauv__reiter { display: flex; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--line);
  background: var(--sidebar); overflow-x: auto; scrollbar-width: none; flex: none; }
.bauv__reiter::-webkit-scrollbar { display: none; }
.bauv__reiter button { border: 0; background: none; padding: 4px 9px; border-radius: 5px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--soft);
  cursor: pointer; white-space: nowrap; }
.bauv__reiter button[aria-current="true"] { background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bauv__schirm { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #fff; }
.bauv__schirm iframe { position: absolute; top: 0; left: 0; border: 0;
  transform-origin: top left; animation: bauRein .45s ease-out; }
@keyframes bauRein { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .bauv__puls i, .bauv__schirm iframe, .lauf-wissen.ein { animation: none; }
  .lauf-wissen { opacity: 1; }
}

/* ── Plugins ───────────────────────────────────────────────────────────
   Eingebaute und eigene stehen in derselben Liste, weil sie dasselbe tun:
   der Seite etwas hinzufügen. Unterschiedlich ist nur, wer sie geschrieben
   hat – und ob sie etwas kosten. */

.seiten-eintrag {
  display: flex; align-items: center; gap: 9px; width: calc(100% - 20px);
  margin: 4px 10px; padding: 8px 10px; border: 1px solid transparent;
  border-radius: var(--r); background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink); text-align: left;
}
.seiten-eintrag:hover { background: #fff; border-color: var(--line); }
.seiten-eintrag svg { width: 15px; height: 15px; flex: none; fill: none;
  stroke: var(--soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seiten-eintrag span { flex: 1; }
.seiten-eintrag em { font-style: normal; font-size: 11px; color: var(--soft); }

.dlg--breit { width: min(820px, 94vw); }

.pg-liste { display: grid; gap: 5px; }
.pg-eintrag {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.pg-eintrag__text { flex: 1; display: grid; gap: 3px; min-width: 0; }
.pg-eintrag__text b { font-size: 12.5px; display: flex; align-items: center;
  gap: 7px; flex-wrap: wrap; }
.pg-eintrag__text span { font-size: 11.5px; color: var(--soft); line-height: 1.5; }
.pg-warnung { color: var(--warn) !important; }

.pg-marke { font-style: normal; font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em; color: var(--soft);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.pg-marke--frei { color: var(--ok); border-color: currentColor; }

.pg-eintrag__knoepfe { display: flex; gap: 5px; flex: none; }
.pg-eintrag__knoepfe button {
  border: 1px solid var(--line); background: none; border-radius: 5px;
  padding: 4px 10px; font-size: 11.5px; cursor: pointer; color: var(--accent);
}
.pg-eintrag__knoepfe button:hover { border-color: var(--accent); background: var(--accent-soft); }
.pg-eintrag__knoepfe button.gefahr { color: var(--err); }
.pg-eintrag__knoepfe button.gefahr:hover { border-color: var(--err); background: #FBE9E6; }

.pg-neu { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line);
  display: grid; gap: 10px; }
.pg-neu textarea { resize: vertical; font-family: inherit; }
.pg-neu__leiste { display: flex; gap: 8px; }

/* ── Rückfrage ─────────────────────────────────────────────────────────
   Der eingebaute confirm() des Browsers schneidet längere Texte ab – bei
   „neu erzeugen" fehlte ausgerechnet der Satz mit der Dauer. Ausserdem
   sieht er auf jedem System anders aus und lässt sich nicht gestalten.
   Deshalb ein eigener Dialog mit demselben Verhalten: Enter bestätigt,
   Esc bricht ab. */
.dlg--frage { width: min(460px, 92vw); }
.dlg-frage__inhalt { padding: 22px 24px 4px; display: grid; gap: 10px; }
.dlg-frage__inhalt b { font-size: 15px; line-height: 1.4; }
#frageText { font-size: 12.5px; line-height: 1.6; color: var(--soft); display: grid; gap: 9px; }
#frageText p { margin: 0; }
#frageText strong { color: var(--ink); font-weight: 600; }
.dlg--frage footer { padding: 16px 24px 18px; display: flex; gap: 9px; justify-content: flex-end; }
.dlg--frage.gefahr #frageJa { background: var(--err); border-color: var(--err); }

/* ── Asset-Kacheln ─────────────────────────────────────────────────────
   Vorher nur Vorschaubilder in einer Reihe – man sah zwar, welche Bilder es
   gibt, aber nicht, welche davon irgendwo stehen und welche nur herumliegen.
   Jetzt trägt jede Kachel, wo das Bild vorkommt, und lässt sich austauschen. */
#thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.kachel { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: #fff; display: flex; flex-direction: column; }
.kachel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--line-weich); }
.kachel__fuss { display: flex; align-items: center; gap: 6px; padding: 5px 7px;
  border-top: 1px solid var(--line-weich); }
.kachel__fuss span { flex: 1; font-size: 10px; color: var(--soft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.kachel__fuss button { border: 1px solid var(--line); background: none; border-radius: 4px;
  padding: 2px 7px; font-size: 10px; cursor: pointer; color: var(--accent); flex: none; }
.kachel__fuss button:hover { border-color: var(--accent); background: var(--accent-soft); }
/* Was nirgends steht, soll auch nicht so aussehen, als stünde es irgendwo. */
.kachel--ungenutzt img { opacity: .45; }
.kachel--ungenutzt .kachel__fuss span { font-style: italic; }

/* ── Bildsuche ─────────────────────────────────────────────────────────
   Beide Bilddienste in einem Raster. Woher ein Bild stammt, steht an der
   Kachel – nicht aus Ordnungsliebe, sondern weil die Kontingente sehr
   unterschiedlich sind und man wissen soll, welches man gerade verbraucht. */
.bs-suche { display: flex; gap: 8px; }
.bs-suche input { flex: 1; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: var(--r); font-size: 13px; }
.bs-suche input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.bs-treffer { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; max-height: 46vh; overflow-y: auto;
  /* Ohne align-content:start quetscht das Raster seine Zeilen in die
     max-height hinein, statt zu rollen - die Kacheln wurden auf 56 statt
     184 Pixel gestaucht und der Fuß mit der Quelle verschwand. */
  align-content: start; }
.bs-kachel { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: #fff; cursor: pointer; padding: 0; text-align: left; }
.bs-kachel:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bs-kachel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  background: var(--line-weich); }
.bs-kachel__fuss { padding: 5px 7px; display: grid; gap: 1px; }
.bs-kachel__fuss b { font-size: 10px; font-weight: 500; color: var(--soft);
  text-transform: uppercase; letter-spacing: .04em; }
.bs-kachel__fuss span { font-size: 10.5px; color: var(--soft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bs-leer { font-size: 12px; color: var(--soft); padding: 14px 0; }

/* ── Bild-Einzelheiten ─────────────────────────────────────────────────
   Drei Knöpfe und der Verwendungsort passten nicht in eine Kachelzeile –
   der Text wurde auf „r." gequetscht. Also trägt die Kachel nur noch das
   Nötigste, und alles Weitere steht hier, wo Platz dafür ist. */
.bd-inhalt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 640px) { .bd-inhalt { grid-template-columns: 1fr; } }
.bd-bild { background: var(--line-weich); border-radius: var(--r); overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 200px; }
.bd-bild img { max-width: 100%; max-height: 44vh; display: block; }
.bd-rechts { display: grid; gap: 16px; align-content: start; }
.bd-daten { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12px; }
.bd-daten dt { color: var(--soft); }
.bd-daten dd { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
  overflow-wrap: anywhere; }
.bd-wo b { font-size: 12px; display: block; margin-bottom: 6px; }
.bd-wo div { display: flex; flex-wrap: wrap; gap: 4px; }
.bd-wo span { font-size: 11px; padding: 3px 8px; border: 1px solid var(--line);
  border-radius: 20px; color: var(--soft); }
.bd-wo .bd-nirgends { border-style: dashed; font-style: italic; }
.bd-tun { display: grid; gap: 6px; }
.btn--gefahr { color: var(--err); border-color: var(--line); }
.btn--gefahr:hover { border-color: var(--err); background: #FBE9E6; }

/* Die Kachel selbst wird wieder ruhig: Bild, ein kleiner Zähler, sonst nichts. */
.kachel { cursor: pointer; }
.kachel:hover { border-color: var(--accent); }
/* Nur noch der Zähler. Alles Weitere steht in den Einzelheiten – im
   Kachelfuß wurde selbst „nicht verwendet" auf „r." gekürzt. */
.kachel__fuss { justify-content: center; padding: 4px 6px; }
.kachel__zahl { font-size: 10px; color: var(--soft); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; }
.kachel__zahl--an { color: var(--ink); font-weight: 600; }

/* Ein gesperrter Knopf muss auch gesperrt aussehen – „Löschen" in Rot, aber
   wirkungslos, ist eine Einladung zum Ratlosigkeit. */
.bd-tun .btn[disabled] { opacity: .4; cursor: not-allowed; color: var(--soft); }
.bd-tun .btn[disabled]:hover { border-color: var(--line); background: none; }

/* ── Bild erzeugen ─────────────────────────────────────────────────────
   Der Warnhinweis steht bewusst im Dialog und nicht im Kleingedruckten:
   ein erfundenes Foto unter „unsere Projekte" ist eine Aussage über
   ausgeführte Arbeit, die so nicht stattgefunden hat. */
.bz-warnung { border-left: 2px solid var(--warn); padding-left: 10px; color: var(--warn) !important; }
.bz-warnung code { font-size: 11px; background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 3px; }
.bz-stand { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--soft);
  padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sidebar); }
.bz-stand__puls { display: inline-flex; gap: 3px; flex: none; }
.bz-stand__puls i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: bauPuls 1.4s ease-in-out infinite; }
.bz-stand__puls i:nth-child(2) { animation-delay: .18s; }
.bz-stand__puls i:nth-child(3) { animation-delay: .36s; }

/* ── Bilder beschaffen ─────────────────────────────────────────────────
   Zwei Wege neben dem Hochladen: suchen oder erzeugen. Der Unterschied in
   Preis und Dauer steht dabei, nicht im Kleingedruckten – sonst greift man
   zum teuren Weg, ohne es zu merken. */
.asset-holen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; }
.asset-holen small { flex: 1 1 100%; font-size: 11px; color: var(--soft); line-height: 1.45; }

/* ── Projektzeile mit Löschknopf ───────────────────────────────────────
   Löschen lag im Reiter „Funktionen" – der ein geöffnetes Projekt braucht.
   Ein Lauf, der beim ersten Versuch scheitert, hat keine Seiten und öffnet
   deshalb nicht: er war weder zu benutzen noch loszuwerden. */
.pj-zeile { position: relative; display: flex; align-items: stretch; }
.pj-zeile .pj { flex: 1; min-width: 0; }
/* Drei Punkte am Zeilenende: erscheinen beim Ueberfahren und bleiben,
   solange ihr Menue offen ist. */
.pj-mehr {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; background: none; color: var(--soft); cursor: pointer;
  border-radius: 6px; display: grid; place-items: center;
  opacity: 0; transition: opacity .12s ease;
}
.pj-mehr svg { width: 16px; height: 16px; }
.pj-zeile:hover .pj-mehr, .pj-mehr:focus-visible, .pj-mehr[aria-expanded="true"] { opacity: 1; }
.pj-mehr:hover, .pj-mehr[aria-expanded="true"] { background: #EAEAEA; color: var(--ink); }
.pj-menue {
  position: absolute; right: 4px; top: calc(50% + 14px); z-index: 20;
  min-width: 150px; padding: 4px; display: grid;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.pj-menue--oben { top: auto; bottom: calc(50% + 14px); }
.pj-menue button {
  border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 5px;
  font-size: 12.5px; color: var(--ink); cursor: pointer;
}
.pj-menue button:hover, .pj-menue button:focus-visible { background: #F2F2F2; outline: none; }
.pj-menue button.gefahr { color: var(--err); }
.pj-menue button.gefahr:hover, .pj-menue button.gefahr:focus-visible { background: #FBE9E6; }
.pj-menue hr { border: 0; border-top: 1px solid var(--line-weich); margin: 3px 4px; }

/* Vorläufiger Eintrag, solange der Server das Projekt anlegt. */
.pj-zeile--vorab .pj { opacity: .7; pointer-events: none; }

/* Logogröße – vierzig Pixel passen nicht zu jedem Zeichen: ein breites
   Wortzeichen braucht weniger Höhe als ein quadratisches Signet. */
.logo-groesse { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--soft); }
.logo-groesse input[type=range] { width: 100%; accent-color: var(--accent); }
.logo-groesse output { font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* ---------- Logo entsteht gerade ----------
   Die Erzeugung dauert eine gute halbe Minute. Ohne sichtbares Zeichen
   klickt man in der Zeit ein zweites Mal – und zahlt zweimal. Deshalb:
   der Knopf sperrt und zählt die Sekunden mit, das Feld pulst ruhig. */
.logofeld--arbeitet { border-style: solid; border-color: var(--accent); }
.logofeld--arbeitet .logofeld__bild {
  position: relative;
  overflow: hidden;
  animation: logo-pulsen 1.6s ease-in-out infinite;
}
.logofeld--arbeitet .logofeld__bild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%,
    color-mix(in srgb, var(--accent) 26%, transparent) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: logo-wischen 1.5s ease-in-out infinite;
}
.logofeld--arbeitet .btn { opacity: .55; pointer-events: none; }
.logofeld--arbeitet #logoErzeugen { opacity: 1; }

@keyframes logo-pulsen { 50% { opacity: .72; } }
@keyframes logo-wischen { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .logofeld--arbeitet .logofeld__bild,
  .logofeld--arbeitet .logofeld__bild::after { animation: none; }
  .logofeld--arbeitet .logofeld__bild { opacity: .7; }
}

/* ---------- Projekttitel mit Umbenennen ----------
   Der Stift steht neben dem Titel und wird beim Überfahren deutlicher.
   Vorher war der Titel nur über einen Hinweistext als anklickbar erkennbar –
   das findet niemand, der nicht danach sucht. */
.kopf-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kopf-zeile h1 { margin: 0; flex: 1 1 auto; }
.stift {
  border: 0; background: none; padding: 4px; border-radius: 6px;
  color: var(--soft, #8a8580); cursor: pointer; line-height: 0;
  opacity: .55; transition: opacity .2s ease, color .2s ease, background .2s ease;
}
.stift svg { width: 16px; height: 16px; }
.stift:hover { opacity: 1; color: var(--accent, #C4622D); background: var(--line-weich, #f1ece5); }
.stift:focus-visible { outline: 2px solid var(--accent, #C4622D); outline-offset: 1px; opacity: 1; }

/* ---------- Abschnitt in der Vorschau wählen ----------
   Der Umschalter oben, die Leiste unten. Beides nur sichtbar, wenn ein
   Projekt offen ist – ohne Seite gibt es nichts anzuklicken. */
.ikon--text { display: inline-flex; align-items: center; gap: 6px; padding-inline: 9px; }
.ikon--text span { font-size: 12px; }
.ikon--text[aria-pressed="true"] { background: var(--accent, #C4622D); color: #fff; border-color: transparent; }
.ikon--text[aria-pressed="true"] svg { color: #fff; }
/* Gedrückt UND überfahren: die allgemeine Regel .ikon:hover setzt die
   Schriftfarbe auf den Akzent - und der ist im gedrückten Zustand schon der
   Hintergrund. Orange auf Orange, der Knopf sah leer aus. */
.ikon--text[aria-pressed="true"]:hover:not(:disabled),
.ikon--text[aria-pressed="true"]:focus-visible {
  color: #fff;
  border-color: transparent;
  filter: brightness(1.08);
}
.ikon--text[aria-pressed="true"]:hover:not(:disabled) svg { color: #fff; }

/* Die Leiste zum gewählten Baustein.

   Sie stand früher unten quer über die ganze Vorschau. Das hat zwei Dinge
   schlecht gemacht: man klickt oben in der Seite und muss die Augen nach
   unten nehmen, um zu lesen, was man getroffen hat - und die Knöpfe lagen
   weit weg von der Stelle, um die es ging. Jetzt hängt sie direkt am
   gewählten Element, wie in einem Zeichenprogramm. */
.wahlleiste {
  position: absolute; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--line, #e6e0d8);
  border-radius: 10px;
  background: var(--panel, #fff);
  box-shadow: 0 8px 26px rgba(16, 24, 40, .17), 0 1px 3px rgba(16, 24, 40, .09);
  max-width: min(820px, calc(100% - 24px));
  /* Ohne das rutscht die Leiste beim Umsetzen sichtbar über den Schirm. */
  animation: wahl-auf .13s ease-out;
}
@keyframes wahl-auf { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wahlleiste { animation: none; } }
.wahlleiste .btn { padding: 7px 11px; font-size: 12.5px; white-space: nowrap; }
.wahlleiste__text { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; min-width: 0; }
.wahlleiste__text b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.wahlleiste__text small { font-size: 10.5px; color: var(--soft, #8a8580); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }

/* Kurz hervorheben, wohin gesprungen wurde – sonst sucht man die Stelle. */
.hebt-hervor { animation: hervor 2.2s ease; border-radius: 8px; }
/* Eine ganze Feldzeile wird zusätzlich unterlegt - ein Ring allein geht
   zwischen zwanzig gleich aussehenden Feldern unter. */
.in-feld.hebt-hervor { animation: hervor-feld 2.6s ease; padding: 4px; margin: -4px; }
@keyframes hervor-feld {
  0%, 55% { box-shadow: 0 0 0 3px var(--accent, #C4622D); background: var(--accent-soft, #FDF1E7); }
  100% { box-shadow: 0 0 0 3px transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .in-feld.hebt-hervor { animation: none; } }
@keyframes hervor {
  0%, 60% { box-shadow: 0 0 0 3px var(--accent, #C4622D); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) { .hebt-hervor { animation: none; } }

/* ── Wahl zwischen Einseiter und mehreren Seiten ───────────────────────
   Zwei grosse Flaechen statt zweier kleiner Punkte: die Entscheidung soll
   sich anklicken lassen, ohne den Radioknopf zu treffen. */
.modus-wahl { display: grid; gap: .6rem; margin-top: .9rem; }
.modus {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem .9rem; border: 1px solid var(--rand, #d8d5cf);
  border-radius: 10px; cursor: pointer;
}
.modus:hover { border-color: var(--akzent, #8a7a5c); }
.modus:has(input:checked) {
  border-color: var(--akzent, #8a7a5c);
  box-shadow: inset 0 0 0 1px var(--akzent, #8a7a5c);
}
.modus input { margin-top: .25rem; }
.modus b { display: block; }
.modus small { display: block; opacity: .72; line-height: 1.4; margin-top: .15rem; }

/* ── Web-Icon und Ladebild ─────────────────────────────────────────────
   Eingeklappt unter dem Logo: bei den meisten Betrieben ist es dieselbe
   Datei, und drei gleichwertige Felder nebeneinander würden mehr Fragen
   aufwerfen, als sie beantworten. */
.markenbilder { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.markenbilder > summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.markenbilder > summary small { font-weight: 400; opacity: .65; }
.markenbild { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.markenbild__vorschau {
  flex: 0 0 64px; height: 64px; border: 1px dashed var(--line); border-radius: 8px;
  display: grid; place-items: center; overflow: hidden; background: var(--bg2, #fafafa);
}
.markenbild__vorschau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.markenbild__vorschau span { font-size: 11px; opacity: .55; text-align: center; padding: 0 4px; }
.markenbild__text { flex: 1; min-width: 0; }
.markenbild__text b { display: block; font-size: 13px; }
.markenbild__text small { display: block; opacity: .7; line-height: 1.45; margin: 2px 0 7px; }
.markenbild__knoepfe { display: flex; gap: 7px; flex-wrap: wrap; }
/* Vorhangfarbe des Ladebilds */
.ausrichtwahl__knoepfe.bildlagewahl__darstellung { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.ausrichtwahl__knoepfe.ausrichtwahl__senkrecht { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bildlagewahl__darstellung .ausrichtwahl__knopf { padding: 6px 2px; }
.bildlagewahl__darstellung .ausrichtwahl__knopf b { font-size: 11.5px; letter-spacing: -.01em; }
.bildlagewahl__darstellung .ausrichtwahl__knopf span { font-size: 10px; color: var(--soft, #8a8580); }
.spaltenwahl__hinweis { font-size: 11.5px; color: var(--soft); margin: 0 0 8px; line-height: 1.4; }
.spaltenwahl__hinweis b { color: var(--ink); }
.ausrichtwahl__hinweis { margin: 6px 0 2px; max-width: 300px; }
.spaltenwahl__titel.gilt::after { content: ' – gilt in der Vorschau'; color: var(--accent); font-weight: 600; text-transform: none; letter-spacing: 0; }
.farbflieger__spalten { font-size: 12px; }
/* Eintraege im Reiter Inhalt (Kundenstimmen, Karten): ein Kasten je Eintrag */
.in-eintrag { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 8px; margin: 8px 0; background: #FAFAFA; }
.in-eintrag__kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11.5px; }
.in-eintrag__kopf b { color: var(--soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.in-eintrag__platz { flex: 1; }
.in-eintrag__kopf .btn { padding: 3px 8px; font-size: 11px; }
.in-eintrag__weg:hover { color: var(--err); border-color: var(--err); }
.laderfarbe { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.laderfarbe b { display: block; font-size: 12px; }
.laderfarbe small { display: block; opacity: .7; line-height: 1.4; margin: 2px 0 6px; }
.laderfarbe__zeile { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
.laderfarbe__zeile input[type="color"] { width: 32px; height: 28px; padding: 0 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.laderfarbe__zeile input[type="text"] { width: 118px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.laderfarbe__zeile input[type="range"] { flex: 1 1 90px; min-width: 70px; accent-color: var(--accent); }
.laderfarbe__kacheln { display: flex; gap: 4px; flex-wrap: wrap; }
.laderfarbe__kacheln button { width: 20px; height: 20px; border: 1px solid rgba(0,0,0,.15); border-radius: 5px; cursor: pointer; padding: 0; }
.laderfarbe__kacheln button:hover { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Fassungsnummer und Neuerungen ─────────────────────────────────────
   Die Nummer steht klein im Kopf und lässt sich anklicken – so kommt man
   auch später noch an die Liste, ohne den Browser-Speicher zu leeren. */
.fassung {
  font-size: 11px; opacity: .5; cursor: pointer; padding: 2px 6px;
  border: 1px solid var(--line); border-radius: 999px; margin-left: 8px;
  white-space: nowrap;
}
.fassung:hover { opacity: .9; border-color: var(--accent); }
.dlg--neu { width: min(560px, 94vw); }
.neu__kopf { display: flex; align-items: baseline; gap: 10px; padding: 20px 24px 6px; }
.neu__kopf b { font-size: 16px; }
.neu__nummer { font-size: 12px; opacity: .6; margin-left: auto; white-space: nowrap; }
.neu__liste { padding: 6px 24px 4px; max-height: min(60vh, 460px); overflow-y: auto; }
.neu__punkt { padding: 9px 0; border-bottom: 1px solid var(--line); }
.neu__punkt:last-child { border-bottom: 0; }
.neu__punkt b { display: block; font-size: 13px; }
.neu__punkt small { display: block; opacity: .75; line-height: 1.5; margin-top: 2px; }
.dlg--neu footer { padding: 12px 24px 18px; display: flex; justify-content: flex-end; }

/* ── Vorschauleiste: nichts bricht mitten im Wort um ───────────────────
   Bei schmalem Fenster sah die Leiste zerrupft aus: „Vors…" statt
   „Vorschau", „Abschnitt / wählen" auf zwei Zeilen, „Aufbau / läuft …"
   ebenso, und die Kennung „ellena-s- / back" mit Trennstrich mitten im
   Namen. Alles derselbe Grund – die Elemente durften umbrechen und
   schrumpfen, statt einfach eng zu stehen.

   Regel: Beschriftungen bleiben einzeilig. Was wirklich zu lang ist,
   wird gekürzt (Kennung) oder ausgeblendet (der Titel „Vorschau", der
   ohnehin nur benennt, was man sieht). */
.leiste { flex-wrap: nowrap; min-width: 0; }
/* Drei Zonen (links / mitte / rechts) - im normalen Aufbau unsichtbar
   (display: contents), im Vollbild ein Raster mit Mitte in der Mitte. */
.leiste-links, .leiste-mitte, .leiste-rechts { display: contents; }
.leiste > *, .leiste-links > *, .leiste-mitte > *, .leiste-rechts > * { flex-shrink: 0; }
.leiste b#vTitel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  flex-shrink: 1;
  min-width: 0;
}
.leiste .ikon,
.leiste .ikon--text,
.leiste .pill { white-space: nowrap; }
.leiste .ikon--text span { white-space: nowrap; }

/* Die Kennung darf kürzen – aber am Ende, nicht mitten im Wort. */
#vUrlText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
  display: inline-block;
  vertical-align: bottom;
}

/* Wird es wirklich eng, verschwindet zuerst das Wort „Vorschau" –
   der Balken darunter zeigt ja bereits die Vorschau. */
@media (max-width: 1180px) {
  .leiste b#vTitel { display: none; }
}
@media (max-width: 980px) {
  .leiste .ikon--text span { display: none; }   /* nur noch das Symbol */
  #vUrlText { max-width: 9ch; }
}

/* ── Wartefläche während des Aufbaus ───────────────────────────────────
   Vier Minuten vor einer leeren Fläche wirken wie ein Hänger. Der Entwurf
   braucht diese Zeit wirklich – also steht hier, was gerade läuft, wie
   lange schon, welche Richtung das Modell gewählt hat und welche Seiten
   noch kommen. Fertige Seiten werden abgehakt. */
.bauv__schritt { display: block; font-size: 15px; margin-top: 16px; }
.bauv__uhr { font-size: 12.5px; color: var(--soft); margin-top: 5px; }
.bauv__uhr span {
  font-family: ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bauv__richtung {
  max-width: 52ch; margin: 16px auto 0; font-size: 13px; line-height: 1.6;
  color: var(--soft); text-align: left;
  border-left: 2px solid var(--accent); padding-left: 12px;
}
.bauv__plan {
  list-style: none; margin: 18px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  max-width: 60ch;
}
.bauv__plan li {
  font-size: 11.5px; font-family: ui-monospace, Menlo, monospace;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px;
  color: var(--soft); background: var(--panel);
}
.bauv__plan li.fertig {
  border-color: var(--ok, #2E7D53); color: var(--ok, #2E7D53);
  background: #E4F1E9;
}
.bauv__plan li.fertig::before { content: "✓ "; }

/* Die gerade entstehende Seite: sichtbar, aber noch nicht anklickbar. */
.bauv__reiter button.laeuft {
  opacity: .75; cursor: default;
  border-style: dashed;
}
.bauv__reiter button.laeuft::after {
  content: " …";
  animation: pano-punkte 1.4s steps(4, end) infinite;
}
.bauv__plan li.laeuft { border-color: var(--accent); color: var(--accent); }
@keyframes pano-punkte { 0% { opacity: .3 } 50% { opacity: 1 } 100% { opacity: .3 } }

/* ── Vorschau lädt ─────────────────────────────────────────────────────
   Beim Projektwechsel blitzte bisher kurz etwas auf und verschwand; der
   Rahmen blieb leer zurück, ohne dass man wusste, ob noch etwas kommt.
   Die Anzeige liegt über dem iframe, damit der erhalten bleibt und
   Schriften nicht neu geladen werden. */
#rahmen { position: relative; }
.vorschau-laedt {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: var(--bg); color: var(--soft); font-size: 13px;
}
.vorschau-laedt p { margin: 0; }

/* Ladeanzeige über der mittleren Spalte – siehe spalteLaedt(). */
section.form { position: relative; }
.spalte-laedt {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: var(--panel); color: var(--soft); font-size: 13px;
}
.spalte-laedt p { margin: 0; }

/* „Neu erzeugen" kostet Geld und dreizehn Minuten – das Symbol soll sich
   vom harmlosen Neuladen daneben unterscheiden. */
.ikon--warnung { color: var(--warn, #B4761E); }
.ikon--warnung:hover:not(:disabled) { border-color: var(--warn, #B4761E); color: var(--warn, #B4761E); }

/* ── Bild ersetzen ─────────────────────────────────────────────────────
   Der Vorrat des Projekts als Kacheln. Ein Klick tauscht sofort – Bilder
   austauschen ist kein Fall für die KI, sondern ein Dateiwechsel. */
.bildwahl__leiste {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 14px 20px 6px;
}
.bildwahl__leiste small { opacity: .65; font-size: 11.5px; }
.bildwahl__raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr));
  gap: 9px; padding: 10px 20px 20px; max-height: min(56vh, 460px); overflow-y: auto;
}
.bildwahl__kachel {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  padding: 0; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3;
}
.bildwahl__kachel:hover { border-color: var(--accent); }
.bildwahl__kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bildwahlWas { opacity: .6; font-size: 11.5px; margin-left: 8px; }

/* ---------- Großer Editor ----------
   Das Bearbeitungsfeld ist im Normalfall 380 px breit. Für ein Stichwort
   reicht das; für einen Absatz Fließtext oder eine lange Änderungsanweisung
   nicht. In diesem Modus bekommt die Vorschau den ganzen Schirm und das
   Feld schwebt darüber – verschiebbar, in der Größe ziehbar, einklappbar.
   Lage und Größe bleiben gespeichert, damit man sie nicht bei jedem
   Projektwechsel neu einstellt. */
.nur-voll { display: none; }
.app--voll .nur-voll { display: inline-flex; }
.kopf-zeile .weg { flex: 1; }

.app--voll { grid-template-columns: 1fr; }
.app--voll .seite { display: none; }

.app--voll .form {
  position: fixed;
  z-index: 40;                 /* über der Vorschau, unter den Dialogen */
  top: var(--ed-y, 84px);
  left: var(--ed-x, 26px);
  width: var(--ed-b, 460px);
  height: var(--ed-h, 76vh);
  min-width: 330px; min-height: 260px;
  max-width: 96vw; max-height: 94vh;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 54px rgba(16, 24, 40, .24);
  resize: both;                /* der Griff unten rechts kommt vom Browser */
  /* Der Griff wirkt nur an einem Scroll-Behaelter - mit overflow:clip (das
     die Spalte im normalen Aufbau braucht) zeigte der Browser keinen. Hier
     schwebt das Feld frei, also darf es hidden sein. */
  overflow: hidden;
}
/* Der Griff soll zu sehen sein: ein kleines Dreieck unten rechts. */
.app--voll .form::after {
  content: ""; position: absolute; right: 4px; bottom: 4px; width: 12px; height: 12px; pointer-events: none;
  background: linear-gradient(135deg, transparent 0 50%, var(--line) 50% 60%, transparent 60% 70%, var(--line) 70% 80%, transparent 80%);
  opacity: .9;
}
.app--voll .form > header {
  border-radius: 14px 14px 0 0;
  cursor: grab;
  /* Beim Ziehen soll nicht der Titel markiert werden. */
  user-select: none; -webkit-user-select: none;
}
.app--voll .form.zieht { transition: none; }
.app--voll .form.zieht > header { cursor: grabbing; }
/* Der Titel selbst bleibt anklickbar (Umbenennen), nur nicht markierbar. */
.app--voll .form > header h1 { cursor: text; }

/* Eingeklappt: nur noch die Kopfzeile, als Streifen am Rand. */
.app--voll .form--klein { height: auto !important; resize: none; }
.app--voll .form--klein > .tabs,
.app--voll .form--klein > div[id^="panel"] { display: none !important; }
.app--voll .form--klein > header { border-bottom: 0; border-radius: 14px; }

/* Im großen Editor braucht die Vorschau keinen Rand mehr. */
.app--voll .vorschau { border-left: 0; }
/* Vollbild-Leiste (Aashir: „make the top part better"): statt ueber die
   ganze Breite verstreut drei Zonen - links Marke und Seite, in der Mitte
   Geraete, Zoom und Auswahlmodus, rechts Link und Werkzeuge. Dunkler Grund,
   damit sie sich von der Website darunter abhebt, wie bei Elementor. */
.app--voll .vorschau .leiste {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 7px 14px; background: #1E1E22; border-bottom: 1px solid #2C2C31; color: #E8E8EA;
}
.app--voll .leiste-links, .app--voll .leiste-mitte, .app--voll .leiste-rechts { display: flex; align-items: center; gap: 6px; min-width: 0; }
.app--voll .leiste-links { justify-self: start; }
.app--voll .leiste-mitte { justify-self: center; }
.app--voll .leiste-rechts { justify-self: end; }
.app--voll .leiste .ikon, .app--voll .leiste .geraete, .app--voll .leiste .seitenwahl {
  background: #2A2A2F; border-color: #3A3A40; color: #E8E8EA;
}
.app--voll .leiste .geraete button { color: #C9C9CE; }
.app--voll .leiste .geraete button.aktiv { background: #3E3E45; color: #fff; }
.app--voll .leiste .ikon:hover:not(:disabled) { border-color: var(--accent); color: #fff; }
.app--voll .leiste #vUrlText { color: #B8B8BE; }
.app--voll .leiste .leiste-trenner { background: #3A3A40; }
.app--voll .voll-marke { background: transparent; border-color: transparent; color: #fff; padding-left: 0; }
.app--voll .voll-marke:hover { color: var(--accent); }
.app--voll .leiste .auswahl-knopf { background: rgba(196, 98, 45, .18); }
.app--voll .leiste .auswahl-knopf[aria-pressed="true"] { background: var(--accent); }
.app--voll .leiste #vTitel { display: inline-block; color: #C9C9CE; font-weight: 500; font-size: 13px; max-width: 26ch; }
/* Der Vollbild-Knopf sagt im Vollbild, dass er es beendet. */
.app--voll #vVoll { border-color: var(--accent); color: #fff; background: rgba(196, 98, 45, .25); }
.app--voll #vVoll::after { content: "Beenden"; font-size: 12px; margin-left: 2px; }
.app--voll #vVoll svg { transform: rotate(180deg); }

/* Kleine Marke in der Vorschauleiste - nur im großen Editor. */
.voll-marke {
  align-items: center; gap: 8px; text-decoration: none;
  color: var(--ink); font-size: 13px; font-weight: 600;
  padding: 3px 10px 3px 4px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--bg);
}
.voll-marke:hover { border-color: var(--accent); color: var(--accent); }
.voll-marke img { width: 18px; height: 18px; }
.app--voll .voll-marke { display: inline-flex; }

/* Eingeklappt darf die Mindesthöhe nicht mehr gelten - sonst bleibt der
   Streifen so hoch wie das ganze Feld. */
.app--voll .form--klein { min-height: 0 !important; }

/* Auswahl, welches von mehreren Hintergrundbildern ersetzt wird. */
.bildwahl__welches {
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.bildwahl__welches small { color: var(--soft); font-size: 12px; }
.bildwahl__slides { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bildwahl__slides button {
  padding: 0; border: 2px solid var(--line); border-radius: 8px;
  background: none; cursor: pointer; line-height: 0; position: relative;
}
.bildwahl__slides button img { width: 92px; height: 58px; object-fit: cover; border-radius: 6px; }
.bildwahl__slides button:hover { border-color: var(--soft); }
.bildwahl__slides button[aria-pressed="true"] { border-color: var(--accent); }
.bildwahl__slides button i {
  position: absolute; left: 4px; top: 4px; font-style: normal;
  background: rgba(0,0,0,.62); color: #fff; font-size: 10px;
  padding: 1px 6px; border-radius: 10px;
}

/* ---------- Kopfzeilen-Editor ---------- */
.kopf-ueber { font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--soft); margin: 18px 0 8px; font-weight: 600; }
.kopf-liste { display: flex; flex-direction: column; gap: 8px; }
/* Achtung: NICHT .kopf-zeile nennen - so heisst bereits die Titelzeile des
   Bearbeitungsfeldes (Projektname, Fassung, Stift). Genau diese Kollision
   hat den Titel zweizeilig umbrechen und die Fassungsnummer ueber ihn
   rutschen lassen. */
.menue-zeile {
  display: grid; grid-template-columns: 22px 1fr 1fr auto;
  gap: 6px; align-items: center;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px; background: var(--panel);
}
.menue-zeile input {
  /* Der Reiter ist schmal: zwei Felder nebeneinander brauchen eine echte
     Mindestbreite, sonst schrumpfen sie auf wenige Zeichen zusammen. */
  min-width: 0; padding: 7px 9px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
}
.menue-zeile input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.kopf-griff { cursor: grab; color: var(--soft); text-align: center; user-select: none; font-size: 15px; }
.menue-zeile--zieht { opacity: .45; }
.menue-zeile--ueber { border-color: var(--accent); }
.kopf-weg {
  border: 0; background: none; cursor: pointer; color: var(--soft);
  font-size: 17px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.kopf-weg:hover { background: #FDEAEA; color: #B3261E; }
.kopf-fuss { display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.kopf-fuss small { color: var(--soft); font-size: 11.5px; }
.fn-hinweis--warn { background: #FDF1E7; border: 1px solid #EBCBAE; border-radius: 8px;
  padding: 10px 12px; color: #8A4B18; }

/* Abstand vor dem Knopf „neu erzeugen". Er ist der einzige in der Leiste,
   der Geld und eine Viertelstunde kostet - er soll nicht mit den
   harmlosen Nachbarn verwechselt werden. */
.leiste-trenner {
  width: 1px; height: 22px; margin: 0 4px 0 10px;
  background: var(--line, #e6e0d8); flex: 0 0 auto;
}

/* Handgriffe am Abschnitt im Reiter „Inhalt". Sie sitzen in der
   Zusammenfassung, dürfen die Klappe aber nicht auslösen - das erledigt
   der Klick-Handler. */
.abs-griffe { float: right; display: inline-flex; gap: 2px; margin-left: 8px; }
.abs-griff {
  border: 0; background: none; cursor: pointer; color: var(--soft);
  font-size: 13px; line-height: 1; padding: 3px 6px; border-radius: 5px;
}
.abs-griff:hover { background: var(--accent-soft, #FDF1E7); color: var(--accent); }
.abs-griff--weg:hover { background: #FDEAEA; color: #B3261E; }
.in-gruppe--abschnitt > summary { position: relative; }

/* Schnellwahl für die Logohöhe. Der Regler allein sagt niemandem, was eine
   gute Höhe ist - beide Kollegen fanden die Logos durchweg zu klein. */
.logo-stufen { display: flex; gap: 4px; margin-top: 8px; }
.logo-stufen button {
  flex: 1; padding: 5px 6px; font-size: 11.5px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  color: var(--soft);
}
.logo-stufen button:hover { border-color: var(--soft); color: var(--ink); }
.logo-stufen button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
  font-weight: 600;
}

/* Projektsuche in der Seitenleiste. */
.pj-suche { padding: 0 12px 8px; }
.pj-suche input {
  width: 100%; padding: 7px 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink);
}
.pj-suche input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Eingeklappte Seitenleiste: die Suche würde nur ein Stummel sein. */
.app--schmal .pj-suche { display: none; }

/* Einzeiler im „Was ist neu?"-Fenster. Ein Punkt ohne Beschreibung ist
   eine Zeile - keine Überschrift mit Leerraum darunter. */
.neu__punkt--zeile { padding: 5px 0; border-bottom: 0; }
.neu__punkt--zeile b { font-weight: 400; font-size: 13px; }
.neu__punkt--zeile b::before { content: "– "; opacity: .5; }
.neu__gruppe {
  margin: 16px 0 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--soft); font-weight: 600;
}
.neu__gruppe:first-child { margin-top: 0; }

/* Beta-Marke an einer Überschrift im Einstellungsdialog. */
.beta {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 10px;
  background: var(--accent-soft, #FDF1E7); color: var(--accent, #C4622D);
  margin-left: 6px; vertical-align: middle;
}

/* Seiten fest vorgeben - im Fenster „Wie viele Seiten?" */
.seiten-vorgabe { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie, #e6e2da); }
.seiten-vorgabe > b { display: block; margin-bottom: 4px; }
.seiten-vorgabe > b small { font-weight: 400; color: var(--text-2, #777); }
.seiten-vorgabe .f textarea { min-height: 120px; font-family: inherit; }
.seiten-vorgabe__sitemap { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.seiten-vorgabe__sitemap .f { flex: 1; }
.seiten-vorgabe__sitemap .f input { width: 100%; }
#seitenVorgabeStand { display: block; margin-top: 6px; color: var(--text-2, #777); min-height: 1.2em; }

/* ── Textfarbe: schwebender Farbwaehler ─────────────────────────────── */
/* Breite so, dass drei Knoepfe nebeneinander passen; Zeilen als Raster mit
   minmax(0, 1fr), damit das Eingabefeld wirklich schrumpft - ein <input>
   hat eine Eigenbreite von rund 20 Zeichen und ragte sonst rechts hinaus. */
.farbflieger { position: fixed; z-index: 60; width: 400px; max-width: calc(100vw - 16px); box-sizing: border-box;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 12px; display: grid; gap: 10px; font-size: 13px;
  /* Die eine Rasterspalte darf nie breiter werden als der Kasten. Ohne das
     nahm sie die Breite des breitesten Kindes - der drei Knoepfe in einer
     Zeile - und alles ragte rechts hinaus. */
  grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.farbflieger > * { min-width: 0; }
.farbflieger__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.farbflieger__zu { font-size: 18px; line-height: 1; padding: 2px 8px; flex: none; }
.farbflieger__text { margin: 0; color: #555; }
.farbflieger__fuss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.farbflieger__fuss .btn { white-space: nowrap; padding: 8px 12px; }
.farbflieger__platz { display: none; }
.farbdlg__weg { margin-right: auto; font-size: 12px; padding: 8px 10px; }
.farbdlg__zeile { display: grid; grid-template-columns: 52px minmax(0, 1fr) 48px; gap: 10px; align-items: center; }
.farbdlg__wahl { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--line, #d5d5d5);
  border-radius: 6px; background: transparent; cursor: pointer; }
.farbdlg__hex { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line, #d5d5d5); border-radius: 6px;
  font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.farbdlg__probe { width: 48px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line, #d5d5d5); border-radius: 6px; font-weight: 700; font-size: 20px;
  /* Halb dunkel, halb hell: so ist jede Farbe auf einer Seite zu sehen -
     Weiss auf dem hellen Karo war unsichtbar. */
  background: linear-gradient(90deg, #1f1f1f 50%, #fff 50%); }
.farbdlg__kacheln { display: flex; flex-wrap: wrap; gap: 8px; }
.farbdlg__kachel { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18);
  cursor: pointer; padding: 0; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.farbdlg__kachel.ist-aktiv { outline: 2px solid var(--accent, #2b6cb0); outline-offset: 2px; }

/* ── Symbolwahl ───────────────────────────────────────────────────────── */
/* Kompakt (Aashir: „this height is too big"): kleinere Kacheln, zwoelf je
   Reihe, kuerzere Liste, flachere Farb- und Groessenzeilen. Der Kasten
   rollt, falls er doch hoeher als das Fenster wird. */
.farbflieger.symbolwahl { width: 520px; gap: 8px; max-height: calc(100vh - 20px); overflow-y: auto; }
.symbolwahl .farbdlg__zeile { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; }
.symbolwahl .farbdlg__wahl { width: 40px; height: 32px; }
.symbolwahl .farbdlg__hex { padding: 5px 9px; font-size: 12.5px; }
.symbolwahl .farbdlg__probe { width: 40px; height: 32px; font-size: 14px; }
.symbolwahl .farbdlg__kacheln { gap: 6px; }
.symbolwahl .farbdlg__kachel { width: 22px; height: 22px; }

.symbolwahl__suche { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; }
.symbolwahl__liste { max-height: min(32vh, 240px); overflow-y: scroll; padding-right: 6px; display: grid; gap: 4px; padding-bottom: 14px; }
/* Der Rollbereich schneidet die unterste Kachelreihe an - ohne sichtbare
   Rollleiste (macOS blendet sie aus) sah das wie ein Fehler aus (Aashir:
   „why is this cutting"). Deshalb: immer eine schmale Rollleiste, und die
   Kante laeuft weich aus, damit man sieht, dass es weitergeht. */
.symbolwahl__liste {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}
.symbolwahl__liste::-webkit-scrollbar, .sliderwahl__dazu::-webkit-scrollbar, .sliderwahl__liste::-webkit-scrollbar { width: 8px; }
.symbolwahl__liste::-webkit-scrollbar-thumb, .sliderwahl__dazu::-webkit-scrollbar-thumb, .sliderwahl__liste::-webkit-scrollbar-thumb { background: #D2D2D2; border-radius: 4px; }
.symbolwahl__liste::-webkit-scrollbar-track, .sliderwahl__dazu::-webkit-scrollbar-track, .sliderwahl__liste::-webkit-scrollbar-track { background: #F3F3F3; border-radius: 4px; }
.symbolwahl__gruppe { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--soft, #8a8580); margin-top: 6px; }
.symbolwahl__gruppe:first-child { margin-top: 0; }
.symbolwahl__leer { font-size: 12.5px; color: var(--soft, #8a8580); margin: 8px 0; }
.symbolwahl__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.symbolwahl__kachel { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--ink); }
.symbolwahl__kachel svg { width: 18px; height: 18px; display: block; }
.symbolwahl__kachel:hover { border-color: var(--accent); color: var(--accent); }
.symbolwahl__kachel.ist-aktiv { outline: 2px solid var(--accent); outline-offset: 1px; }
.symbolwahl__name { font-size: 12px; color: #555; }
.symbolwahl__flaeche { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }
.symbolwahl__flaeche input { margin: 0; accent-color: var(--accent); }
.symbolwahl__flaeche span { grid-column: 2; font-size: 11.5px; color: var(--soft, #8a8580); }
.symbolwahl__lage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Spalten: PC / Handy / Karussell */
.spaltenwahl__titel { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--soft, #8a8580); margin-bottom: -4px; }
.spaltenwahl__knoepfe.ist-aus { opacity: .4; pointer-events: none; }
.spaltenwahl__karussell { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; cursor: pointer; }
.spaltenwahl__karussell input { grid-row: span 2; }
.spaltenwahl__karussell span { font-size: 11px; color: var(--soft, #8a8580); }
/* Bildausschnitt: 3×3 Felder + Regler */
.farbflieger.bildlagewahl { width: 400px; }
.bildlagewahl__netz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 120px; margin: 0 auto; }
.bildlagewahl__feld { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; position: relative; }
.bildlagewahl__feld::after { content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.bildlagewahl__feld:hover { border-color: var(--accent); }
.bildlagewahl__feld[aria-pressed="true"] { border-color: var(--accent); background: #FDF1E7; }
.bildlagewahl__feld[aria-pressed="true"]::after { background: var(--accent); }
.bildlagewahl__hinweis { font-size: 11.5px; color: var(--soft, #8a8580); }
/* Abstand: zwei Gruppen mit je vier Feldern */
.farbflieger.abstandwahl { width: 380px; }
.abstandwahl__gruppe { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.abstandwahl__kopf { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.abstandwahl__kopf small { color: var(--soft, #8a8580); font-size: 11px; flex: 1; }
.abstandwahl__gleich { font-size: 11.5px; color: var(--soft, #8a8580); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.abstandwahl__felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.abstandwahl__feld { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 4px; font-size: 12px; }
/* Der Schieber unter der Zahl, ueber alle drei Spalten. */
.abstandwahl__schieber { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; accent-color: var(--accent); height: 18px; cursor: ew-resize; }
.abstandwahl__feld input { width: 100%; min-width: 0; padding: 5px 4px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12.5px; text-align: right; }
.abstandwahl__feld em { font-style: normal; font-size: 10.5px; color: var(--soft, #8a8580); }
.symbolwahl__lage .ausrichtwahl__knopf { padding: 7px 6px; }
.symbolwahl__lage .ausrichtwahl__knopf span { font-size: 11px; color: var(--soft, #8a8580); }
.symbolwahl__groesse .btn { padding: 4px 9px; font-size: 11.5px; }
.symbolwahl__groesse .btn.ist-aktiv { border-color: var(--accent); color: var(--accent); background: #FDF1E7; }
.farbdlg__weg.ist-aktiv { border-color: var(--accent); color: var(--accent); }

/* ── Ladeanzeige in der Vorschau ─────────────────────────────────────────
   Aashir: „we need loading, not full page reload - the updates should
   append live". Also kein Schleier ueber der ganzen Seite, sondern ein
   kleines Schild in der Ecke der Vorschau, das nichts verdeckt und nicht
   im Weg ist; die Seite darunter bleibt sichtbar und wird live getauscht. */
.ladeschleier { position: absolute; top: 28px; right: 28px; z-index: 25; pointer-events: none; }
.ladeschleier[hidden] { display: none; }
.ladeschleier__kern { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: rgba(255,255,255,.96);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.14); max-width: 460px; }
.ladeschleier__logo { width: 26px; height: auto; animation: ladepuls 1.4s ease-in-out infinite; }
.ladeschleier__text { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladeschleier__punkte { display: flex; gap: 4px; }
.ladeschleier__punkte i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .35;
  animation: ladepunkt 1.2s ease-in-out infinite; }
.ladeschleier__punkte i:nth-child(2) { animation-delay: .2s; }
.ladeschleier__punkte i:nth-child(3) { animation-delay: .4s; }
@keyframes ladepuls { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes ladepunkt { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ladeschleier__logo, .ladeschleier__punkte i { animation: none; } }

/* ── Protokoll-Kopf mit Klappe ────────────────────────────────────────── */
.log-kopf { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 16px; border-top: 1px solid var(--line);
  background: #1D2023; color: #A8B3AD; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; }
.log-kopf__name { color: #7FD1C5; flex: none; }
.log-kopf__letzte { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s; }
.log.zu ~ .log-kopf .log-kopf__letzte, .log-kopf:has(+ .log.zu) .log-kopf__letzte { opacity: .9; }
.log-kopf__zu { padding: 3px 6px; background: transparent; border-color: transparent; color: #A8B3AD; }
.log-kopf__zu:hover:not(:disabled) { background: #2A2E33; color: #fff; border-color: transparent; }
.log-kopf__zu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.log-kopf:has(+ .log.zu) .log-kopf__zu svg { transform: rotate(180deg); }
.log { border-top: 0; transition: height .2s ease, padding .2s ease; }
.log.zu { height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }

/* ── Bildwechsel anordnen ─────────────────────────────────────────────── */
/* Galerie bearbeiten: Kacheln statt Zeilen, damit sechs Bilder zwei Reihen
   sind und nicht ein halber Bildschirm. Der ganze Kasten rollt, falls er
   doch hoeher als das Fenster wird. */
.farbflieger.sliderwahl { width: 480px; max-height: calc(100vh - 20px); overflow-y: auto; }
.sliderwahl__liste { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: 236px; overflow-y: auto; }
.sliderwahl__zeile { position: relative; aspect-ratio: 3 / 2; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #eee; cursor: grab; }
.sliderwahl__zeile.zieht { opacity: .5; }
.sliderwahl__zeile.ziel { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.sliderwahl__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sliderwahl__nr { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.5; pointer-events: none; }
.sliderwahl__werkzeuge { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 3px; padding: 4px 3px 3px;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); opacity: 0; transition: opacity .12s ease; }
.sliderwahl__zeile:hover .sliderwahl__werkzeuge, .sliderwahl__zeile:focus-within .sliderwahl__werkzeuge, .sliderwahl__zeile.tauscht .sliderwahl__werkzeuge { opacity: 1; }
.sliderwahl__werkzeuge .ikon { width: 22px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 13px; line-height: 1; display: grid; place-items: center; }
.sliderwahl__werkzeuge .ikon:hover:not(:disabled) { background: #fff; color: var(--accent); }
.sliderwahl__werkzeuge .ikon:disabled { opacity: .35; cursor: default; }
.sliderwahl__zeile.tauscht { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.sliderwahl__zeile.tauscht .sliderwahl__tausch { background: var(--accent); color: #fff; }
.sliderwahl__hinweis { font-size: 12px; color: #555; }
.sliderwahl__dazu-titel { font-size: 12px; color: #555; margin-top: 2px; }
.sliderwahl__dazu { display: flex; flex-wrap: wrap; gap: 6px; max-height: 96px; overflow-y: auto; padding-bottom: 12px; padding-right: 4px; font-size: 12px; color: #777; }
.sliderwahl__kachel { width: 56px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #eee; cursor: pointer; }
.sliderwahl__kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sliderwahl__kachel:hover { border-color: var(--accent); }

/* ── Ausrichten ───────────────────────────────────────────────────────── */
.farbflieger.ausrichtwahl { width: 340px; }
.ausrichtwahl__knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ausrichtwahl__knopf { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); cursor: pointer; font-size: 12px; }
.ausrichtwahl__knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ausrichtwahl__knopf:hover { border-color: var(--accent); color: var(--accent); }
.ausrichtwahl__knopf[aria-pressed="true"] { border-color: var(--accent); background: #FDF1E7; color: var(--accent); }
.ausrichtwahl__ebenen { display: flex; gap: 6px; flex-wrap: wrap; }
.ausrichtwahl__ebene { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; cursor: pointer; color: var(--ink); }
.ausrichtwahl__ebene[aria-pressed="true"] { border-color: var(--accent); background: #FDF1E7; color: var(--accent); }

.logo-zahl { width: 64px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; text-align: right; }
.schleierwahl__regler { display: grid; grid-template-columns: auto 1fr 48px; align-items: center; gap: 10px; font-size: 12.5px; }
.schleierwahl__regler output { text-align: right; font-variant-numeric: tabular-nums; }
/* Symbolgroesse: der Knopf „Wie gestaltet" gehoert in dieselbe Zeile (steht
   hier, damit die Regel nach .schleierwahl__regler kommt und gewinnt). */
.symbolwahl__groesse.schleierwahl__regler { grid-template-columns: auto minmax(0, 1fr) 48px auto auto; gap: 8px; }
/* Das px-Feld traegt auch .logo-zahl (oben); damit die schmalere Breite und
   das engere Polster gewinnen, steht die Regel hier und nicht weiter oben. */
.symbolwahl__zahl { width: 58px; padding: 4px 6px; font-size: 12px; }
/* Farbe / Verlauf: Art oben, Richtung als sechs Kacheln, zweite Farbe eingerueckt. */
.farbflieger.schleierwahl { width: 360px; }
.schleierwahl__art { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schleierwahl__art .ausrichtwahl__knopf { padding: 7px 6px; }
.schleierwahl__art .ausrichtwahl__knopf span { font-size: 11px; color: var(--soft, #8a8580); }
.schleierwahl__titel { font-size: 11.5px; font-weight: 600; color: var(--soft, #8a8580); margin: 4px 0 -4px; }
.schleierwahl__zweite { display: grid; gap: 8px; }
.schleierwahl__richtungen { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.schleierwahl__richtung { padding: 6px 2px; gap: 1px; }
.schleierwahl__richtung b { font-size: 15px; line-height: 1; }
.schleierwahl__richtung span { font-size: 9.5px; white-space: nowrap; }
/* Hinweis-Punkt am Leistenknopf: das Bild ist unscharf. */
.wl.wl--achtung::after { content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: #E8862F; box-shadow: 0 0 0 2px #fff; }
.farbflieger.effektwahl { width: 380px; }
.effektwahl__liste { display: grid; gap: 6px; }
.effektwahl__eintrag { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; color: var(--ink); }
.effektwahl__eintrag small { color: #666; font-size: 11.5px; }
.effektwahl__eintrag[aria-checked="true"] { border-color: var(--accent); background: #FDF1E7; }
.effektwahl__eintrag:disabled { opacity: .55; cursor: not-allowed; }
.farbflieger.spaltenwahl { width: 420px; }
.spaltenwahl__knoepfe { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.spaltenwahl__knoepfe .ausrichtwahl__knopf b { font-size: 15px; } .spaltenwahl__knoepfe .ausrichtwahl__knopf span { font-size: 10.5px; }
.sliderwahl__lade { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #555; }

/* ── Abschnitts-Leiste: eine Zeile, Symbole, Tooltips ──────────────────
   Ein schwebendes Werkzeug, kein Formular: 32-px-Knoepfe mit Symbol, das
   Wort erscheint beim Ueberfahren. Gruppen durch feine Striche getrennt,
   eine orange Taste fuer die KI, Schliessen rechts. */
/* Zwei feste Zeilen (Aashir: „make toolbar better UX"): oben der Name des
   Bausteins mit den Hauptaktionen (Ändern, Neu gestalten, Schließen),
   darunter die Werkzeuge als Symbole MIT Beschriftung, in Gruppen. Reicht
   die Breite nicht, bricht nur die Werkzeugzeile um - nie ein einzelner
   Knopf allein. */
.wahlleiste { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0;
  border-radius: 12px; max-width: min(760px, calc(100% - 24px)); overflow: visible; }
.wl-kopf { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 4px; border-bottom: 1px solid var(--line, #e6e0d8); }
.wl-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 0; padding: 4px 6px 5px; }
/* Der Chip startet schmal (110 px) und waechst nur, wenn Platz ist - bis
   300 px. Bei flex-wrap entscheidet die Startbreite ueber den Umbruch:
   mit breitem Start rutschte allein das Schliessen-Kreuz in eine zweite
   Zeile (Aashir: „toolbar looks a bit odd"). Das Kreuz gehoert jetzt zur
   KI-Gruppe, damit es nie allein umbricht. */
.wl-chip { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; flex: 1 1 110px; max-width: 420px; min-width: 0;
  padding: 2px 8px 2px 8px; margin-right: auto; }
.wl-chip b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-chip small { font-size: 11px; color: var(--soft, #8a8580); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-gruppe { display: flex; align-items: center; gap: 2px; flex: none; }
.wl-zeile .wl-gruppe::before { content: ''; width: 1px; height: 30px; background: var(--line, #e6e0d8); margin: 0 6px 0 4px; }
/* Kein Strich vor der ersten sichtbaren Gruppe. (Achtung, Klammern: eine
   fehlende hat hier einmal den Rest des Stylesheets verschluckt.) */
.wl-zeile .wl-gruppe:has(.wl:not([hidden])):not(.wl-gruppe:has(.wl:not([hidden])) ~ .wl-gruppe)::before { display: none; }
.wl-gruppe:not(:has(.wl:not([hidden]))) { display: none; }
.wl-gruppe--ki { margin-left: 2px; gap: 4px; }
/* Kopfzeile: kompakte Knoepfe ohne Beschriftung darunter; Werkzeugzeile:
   Symbol oben, Wort darunter. */
.wl-kopf .wl { width: 36px; height: 36px; flex-direction: row; }
.wl-kopf .wl svg { width: 19px; height: 19px; }
.wl-kopf .wl--ki { width: auto; height: 36px; padding: 0 12px 0 9px; }
.wl-zeile .wl { flex-direction: column; gap: 3px; width: auto; min-width: 48px; height: 50px; padding: 2px 5px 0; }
.wl-zeile .wl svg { width: 20px; height: 20px; }
.wl-zeile .wl .l { position: static; width: auto; height: auto; clip: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  max-width: 78px; font-size: 10px; line-height: 1.1; color: var(--soft, #8a8580); }
.wl-zeile .wl:hover .l, .wl-zeile .wl:focus-visible .l { color: var(--ink); }
.wl-zeile .wl.wl--gefahr .l { color: var(--err, #c0392b); }
.wl-zeile .wl[data-tip]:hover::after, .wl-zeile .wl[data-tip]:focus-visible::after { top: calc(100% + 4px); }
/* Groessere Knoepfe (Aashir: „make toolbar options bigger"): 40 statt 32 px,
   Symbole 21 statt 17 px - besser zu treffen, leichter zu unterscheiden. */
.wl { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; flex: none; }
.wl:hover:not(:disabled), .wl:focus-visible { background: #F1EDE6; border-color: var(--line, #e6e0d8); }
.wl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wl svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wl .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wl .l--sichtbar { position: static; width: auto; height: auto; clip: auto; overflow: visible; margin-left: 6px; font-size: 13px; font-weight: 600; }
.wl--ki { width: auto; padding: 0 14px 0 10px; background: var(--accent); color: #fff; border-color: var(--accent); }
.wl--ki:hover:not(:disabled), .wl--ki:focus-visible { background: #DE7527; border-color: #DE7527; }
.wl--gefahr { color: var(--err, #c0392b); }
.wl--gefahr:hover:not(:disabled) { background: #FBE9E6; border-color: #F0C9C4; }
.wl--zu { margin-left: 3px; color: var(--soft, #8a8580); }
.wl--zu:hover:not(:disabled) { color: var(--ink); }
/* Zaehler am Symbol (Hintergrund mit mehreren Bildern) */
.wl[data-zahl]::before { content: attr(data-zahl); position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; }
/* Tooltip: sofort, unter dem Knopf */
.wl[data-tip]:hover::after, .wl[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: #1F2328; color: #fff; font-size: 11.5px; font-weight: 500; padding: 5px 8px; border-radius: 6px; white-space: nowrap; z-index: 5; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); line-height: 1.3; text-align: center; }
/* Laengere Hinweise (z. B. „Bild ist unscharf …") umbrechen, statt aus der
   Leiste zu laufen; Knoepfe am rechten Rand haengen ihn nach links. */
.wl[data-tip-lang]:hover::after, .wl[data-tip-lang]:focus-visible::after { white-space: normal; width: max-content; max-width: 230px; }
.wl-gruppe:last-of-type .wl[data-tip-lang]:hover::after, .wl[data-tip-lang].wl--rechts:hover::after { left: auto; right: 0; transform: none; }
.wl--ki[data-tip]:hover::after { display: none; }
/* ── Verlauf: Knopf vorn, Text abgeschnitten ─────────────────────────── */
.vs { display: flex !important; align-items: center; gap: 8px; min-width: 0; }
.vs .vs__knopf { flex: none; order: -1; padding: 4px 9px; font-size: 11.5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--accent); cursor: pointer; white-space: nowrap; }
.vs .vs__knopf:hover:not(:disabled) { border-color: var(--accent); }
.vs .vs__knopf:disabled { opacity: .6; cursor: default; }
.vs .vs__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
#verlaufListe { overflow: hidden; }

/* ── Textfarbe: Zustaende (Normal / Überfahren / Klicken) ─────────────── */
.farbflieger.zustandwahl { width: 420px; }
.farbflieger__zustaende { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  padding: 3px; border: 1px solid var(--line, #d5d5d5); border-radius: 8px; background: #f6f5f2; }
.farbflieger__zustaende button { position: relative; padding: 7px 8px 7px 22px; border: 0; border-radius: 6px;
  background: transparent; font: inherit; font-size: 12.5px; color: var(--soft, #666); cursor: pointer; white-space: nowrap; }
.farbflieger__zustaende button::before { content: ""; position: absolute; left: 8px; top: 50%; width: 9px; height: 9px;
  margin-top: -5px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); background: var(--punkt, transparent); }
.farbflieger__zustaende button:not(.hat-farbe)::before { background: repeating-linear-gradient(45deg, #fff 0 2px, #cfcac2 2px 4px); }
.farbflieger__zustaende button.ist-aktiv { background: #fff; color: var(--text, #222); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.farbflieger__zustandHinweis { display: block; color: var(--soft, #666); font-size: 11.5px; margin-top: -2px; }
.farbdlg__zeile.ist-leer .farbdlg__probe, .ist-leer .farbdlg__probe { color: #999; }
.farbdlg__alleWeg { font-size: 12px; padding: 8px 10px; }

/* ── Kopf: beim Scrollen (fest / mitscrollen / wie entworfen) ─────────── */
.kopf-fest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px;
  border: 1px solid var(--line); border-radius: 8px; background: #f6f5f2; margin-bottom: 6px; }
.kopf-fest label { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px;
  border-radius: 6px; font-size: 12px; color: var(--soft); cursor: pointer; white-space: nowrap; }
.kopf-fest label:has(input:checked) { background: #fff; color: var(--text, #222); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.kopf-fest input { position: absolute; opacity: 0; width: 0; height: 0; }
#kopfFestStand { margin-bottom: 14px; }

/* ── Was ist neu?: fruehere Fassungen zugeklappt darunter ─────────────── */
.neu__gruppe--fruehere { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.neu__fassung { border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; background: #faf9f6; }
.neu__fassung summary { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; cursor: pointer; font-size: 12.5px; list-style: none; }
.neu__fassung summary::-webkit-details-marker { display: none; }
.neu__fassung summary::before { content: "›"; display: inline-block; width: 10px; opacity: .55; transition: transform .15s; }
.neu__fassung[open] summary::before { transform: rotate(90deg); }
.neu__fassung summary b { font-weight: 600; white-space: nowrap; }
.neu__fassung summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.neu__fassung summary i { font-style: normal; font-size: 11px; color: var(--soft); white-space: nowrap; }
.neu__fassungInnen { padding: 2px 12px 8px 24px; }
.neu__fassungInnen .neu__gruppe { margin-top: 8px; }

/* ── Ziehen: Kaesten am Kopf, Leiste am Chip ──────────────────────────── */
.ziehgriff { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.zieht .ziehgriff, .zieht { cursor: grabbing; }
.farbflieger.zieht { box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.wahlleiste.zieht { box-shadow: 0 14px 36px rgba(0,0,0,.28); }
/* Der Griff: sechs Punkte in zwei Spalten, gezeichnet statt getippt - das
   „⋮⋮" davor war 11 px klein und zu 35 % sichtbar, also fuer niemanden ein
   Griff (Aashir: „dragger not visible"). An der Leiste und an jedem
   schwebenden Dialog (Abstand, Farbe, Ausrichten …) derselbe. */
.wl-chip.ziehgriff, .farbflieger__kopf.ziehgriff > b { position: relative; padding-left: 18px; }
.wl-chip.ziehgriff::before, .farbflieger__kopf.ziehgriff > b::before {
  content: ""; position: absolute; left: 3px; top: 50%; width: 9px; height: 15px; transform: translateY(-50%);
  background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px);
  background-size: 4.5px 5px; background-position: 0 0; opacity: .55;
}
.farbflieger__kopf.ziehgriff:hover > b::before, .wl-chip.ziehgriff:hover::before { opacity: .9; }

/* ── Breite ─────────────────────────────────────────────────────────── */
.farbflieger.breitewahl { width: 360px; }
.breitewahl__knoepfe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.breitewahl__knopf small { display: block; font-size: 10px; color: var(--soft); margin-top: 2px; }
.breitewahl__zeile { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.breitewahl__zeile input[type="range"] { flex: 1; accent-color: var(--accent); }
.breitewahl__zeile label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--soft); }
.breitewahl__zeile input[type="number"] { width: 64px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12.5px; }
.breitewahl__ergebnis { margin: 0 0 8px; }

/* ── Bildeffekt ─────────────────────────────────────────────────────── */
.farbflieger.bildeffektwahl { width: 400px; }
.bildeffektwahl__vorgaben { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bildeffektwahl__vorgabe { display: grid; gap: 5px; justify-items: center; padding: 7px 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; color: var(--ink); }
.bildeffektwahl__vorgabe small { font-size: 11px; white-space: nowrap; }
.bildeffektwahl__vorgabe[aria-checked="true"] { border-color: var(--accent); background: #FDF1E7; }
.bildeffektwahl__probe { width: 34px; height: 34px; border-radius: 6px; background: conic-gradient(from 90deg, #E8862F, #2b6cb0, #3aa66a, #E8862F); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.bildeffektwahl__regler { display: grid; grid-template-columns: 78px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font-size: 12.5px; }
.bildeffektwahl__regler input { width: 100%; accent-color: var(--accent); }
.bildeffektwahl__regler b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Kopf-Reiter: Untermenüs (Aufklapp-/Megamenü) ────────────────────── */
.menue-unter { display: grid; gap: 4px; margin: 2px 0 10px 14px; padding-left: 8px; border-left: 2px solid var(--line); }
/* Unterzeile: Griff · Bild · Beschriftung · Ziel · × in einer Reihe; ohne
   Bild-Spalte, wenn das Menue keine Bilder zeigt. Die Felder stehen
   untereinander? Nein - nebeneinander, aber schmaler als in der Hauptzeile. */
.menue-zeile--unter { grid-template-columns: 14px 38px minmax(0, 1fr) minmax(0, 1fr) 24px; padding: 6px; gap: 5px; }
.menue-zeile--unter:not(:has(.kopf-bild)) { grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1fr) 24px; }
.menue-zeile--unter input { font-size: 12px; padding: 6px 7px; }
.menue-zeile--unter .kopf-griff { font-size: 13px; }
.menue-zeile--unter .kopf-weg { padding: 2px 4px; }
.kopf-bild { width: 38px; height: 28px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 5px;
  background: #f3f1ec; cursor: pointer; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  color: var(--soft); font-size: 15px; line-height: 1; }
.kopf-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kopf-bild:hover { border-color: var(--accent); }
.kopf-unter-neu { justify-self: start; padding: 5px 9px; font-size: 11.5px; }
/* Untermenue-Eintrag, den der Entwurf am PC ausblendet: gedaempft, mit Hinweis. */
.menue-zeile--versteckt { opacity: .55; }
.menue-zeile--versteckt::after { content: "nur Handy"; grid-column: 1 / -1; font-size: 10.5px; color: var(--soft); margin-top: -2px; padding-left: 20px; }