: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; }
body { background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; height: 100vh; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--pl-blau); }

.app { display: grid; grid-template-columns: 232px 380px 1fr; height: 100vh; }
@media (max-width: 1100px) { .app { grid-template-columns: 200px 1fr; } .vorschau { display: none; } }

/* ---------- Seitenleiste ---------- */
.seite { background: var(--sidebar); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; 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; }
.pj { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: none; color: var(--soft); border-radius: 6px; cursor: pointer; font-size: 13px; }
.pj:hover { background: #F2F2F2; color: var(--ink); }
.pj[aria-current="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.pj i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.pj small { display: block; color: var(--soft); font-size: 11px; font-weight: 400; }
.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: 16px; letter-spacing: -.015em; }
.form > header p { font-size: 12.5px; color: var(--soft); margin-top: 3px; }
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: hidden; }
.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; }
.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; }

.log { 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; }

.chat { display: grid; gap: 9px; margin-bottom: 14px; max-height: 300px; overflow-y: auto; }
.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); }
.promptbox textarea { width: 100%; border: 0; padding: 11px 12px; resize: vertical; min-height: 68px; font-size: 13px; }
.promptbox textarea:focus { outline: none; }
.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); }

.verlauf { margin-top: 16px; }
.verlauf summary { font-size: 12px; color: var(--soft); cursor: pointer; }
.verlauf > div { margin-top: 8px; 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; }
.chat { max-height: 260px; }
.promptbox textarea { min-height: 108px; }

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 { background: var(--warn); animation: pulsieren 1.2s ease-in-out infinite; }
.pj--abgebrochen i { background: var(--err); }
.pj--laeuft 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; }
.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: 14px; align-items: center; border: 1.5px dashed var(--line);
  border-radius: var(--r); padding: 14px; 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; }

/* ---------- 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; }
.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; }
.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;
}
.prompt-unten .promptbox textarea { min-height: 96px; }
.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: hidden; min-height: 0;
}
.form > header {
  flex: 0 0 auto; padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.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; }
.prompt-oben { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 8px; }
.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);
}

/* ═══════════════ 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 ---------- */
.klapp {
  position: absolute; top: 16px; right: 10px; z-index: 3;
  width: 24px; height: 24px; border: 0; border-radius: 6px;
  background: none; cursor: pointer; color: var(--soft);
  display: grid; place-items: center;
}
.klapp:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.klapp svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; 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 .klapp svg { transform: rotate(180deg); }
.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; }
.app--schmal .pj { justify-content: center; padding: 10px 0; }
.app--schmal .pj i { width: 9px; height: 9px; }
.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; }

/* Der Klappknopf rückt nach unten, damit er das Zeichen nicht überdeckt */
.app--schmal .klapp {
  top: auto; bottom: 52px; right: 50%; transform: translateX(50%);
  background: #fff; border: 1px solid var(--line);
}
.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 ---------- */
}

/* ── 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; }
.pj-weg {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--soft); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 3px 7px; border-radius: 5px;
  opacity: 0; transition: opacity .12s ease;
}
.pj-zeile:hover .pj-weg, .pj-weg:focus-visible { opacity: 1; }
.pj-weg:hover { color: var(--err); background: #FBE9E6; }

/* 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: 9px; margin-top: 10px; 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; }
}