/* Planbild App, Marke Planbild v1.
 * Tokens aus marke/planbild.css. Ein Baustein: das Feld.
 *   umrandetes Feld  = Angabe, Status, Nebenknopf
 *   gefülltes Feld   = die eine wichtigste Handlung einer Fläche (höchstens eines)
 * Tinte und Papier, Grau nur zum Abstufen. Kein Akzent, kein Schatten, kein Verlauf, Radius 0.
 * Grössen 32 / 20 / 16 / 12, Raster 8 px. Text steht unter dem Bild, auf dem Bild nur Felder oben links. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--pb-papier); color: var(--pb-tinte); }
body {
  font-family: var(--pb-schrift); font-size: var(--pb-lauftext); line-height: var(--pb-lauftext-zeile);
  font-weight: var(--pb-normal); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--pb-grau-3); }
a.blank { text-decoration: none; }
/* Fokus: immer Tinte mit Papier-Abstand, auf jedem Grund sichtbar (vorher currentColor = weiss auf gefüllten Knöpfen) */
:focus-visible { outline: 2px solid var(--pb-tinte); outline-offset: 2px; box-shadow: 0 0 0 2px var(--pb-papier); }
.buehne :focus-visible, .ws-lightbox :focus-visible, .ul-tipp :focus-visible { outline-color: var(--pb-papier); box-shadow: 0 0 0 2px var(--pb-tinte); }
::selection { background: var(--pb-tinte); color: var(--pb-papier); }

h1, h2, h3, h4, p { margin: 0; }
pre, code { font-family: inherit; }      /* eine Schrift: keine Monospace-Fassung (Lektionen, Integrationen) */
/* hidden heisst unsichtbar, auch wenn eine Regel wie «.knopf, button { display: inline-flex }» sonst gewinnt («KI-Chat» stand immer da) */
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: var(--pb-medium); }
strong, b { font-weight: var(--pb-medium); }

/* ------------------------------------------------------------------ Schriftstufen */
.display, .display-m, .zahl-gross, .status-gross {
  font-size: var(--pb-titel); line-height: var(--pb-titel-zeile); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-titel);
}
.h2 { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-titel); }
.meta { font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); }
/* Bezeichnung: Versalien, +12 % */
.bez, .kicker, .label, .feld label, .tab th, .schriftfeld dt, .nr, .abb, .zurueck, .fuss,
details.mehr > summary, .zahlen .k, .kopfzeile .meta, .kopfzeile-a .meta {
  font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); font-weight: var(--pb-medium);
  letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase;
}
.leise { color: var(--pb-grau-3); }
.satz { max-width: var(--pb-satz-max); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Raster */
.rahmen { width: 100%; max-width: var(--pb-breite-max); margin: 0 auto; padding: 0 var(--pb-rand); }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pb-rinne); }
.s-12 { grid-column: span 12; } .s-8 { grid-column: span 8; } .s-7 { grid-column: span 7; } .s-6 { grid-column: span 6; }
.s-5 { grid-column: span 5; } .s-4 { grid-column: span 4; } .s-3 { grid-column: span 3; } .s-9 { grid-column: span 9; }
@media (max-width: 900px) { .raster > * { grid-column: span 12 !important; } .raster:not(.seitenkopf) { row-gap: var(--pb-6); } .raster > .spalte-1:empty { display: none; } }   /* gestapelte Spalten mit Abstand */
.nowrap { white-space: nowrap; }
.linie-o { border-top: var(--pb-rahmen) solid var(--pb-tinte); }
.linie-h { border-top: var(--pb-rahmen) solid var(--pb-grau-2); }
.abstand { margin-top: var(--pb-8); }
.abstand-s { margin-top: var(--pb-5); }
.abstand-xs { margin-top: var(--pb-2); }
/* Hilfsklassen statt Inline-Styles in den Vorlagen (Design-Durchgang 16.10.2026) */
.kopf-rechts { align-self: end; text-align: right; }
.kopf-unten { align-self: end; }
.oben-0 { padding-top: 0; }
.oben-2 { padding-top: var(--pb-2); }
.oben-3 { padding-top: var(--pb-3); }
.senkrecht-2 { padding-top: var(--pb-2); padding-bottom: var(--pb-2); }
.abstand-1 { margin-top: var(--pb-1); }
.rand-0 { margin: 0; }
.block { display: block; }
.umbruch { white-space: pre-wrap; }
.spalte-1 { grid-column: span 1; }
.zitat-gross { font-weight: var(--pb-normal); margin: var(--pb-1) 0; }
.farbfeld { display: inline-block; width: 1em; height: 1em; vertical-align: middle; border: var(--pb-rahmen) solid var(--pb-grau-3); }
@media (max-width: 900px) {      /* Zahlfeld nicht als eigene rechtsbündige Zeile: links und flach */
  .kopf-rechts { text-align: left; align-self: start; }
}
.nur-schmal { display: none; }
@media (max-width: 900px) { .nur-schmal { display: block; } }

/* ------------------------------------------------------------------ Kopf und Fuss */
.kopf { border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; height: var(--pb-8); gap: var(--pb-3); }
.kopf .marke { display: block; text-decoration: none; flex-shrink: 0; }
.kopf .marke img { width: 128px; height: 32px; }            /* H = 32 px, Fassung _klein */
@media (max-width: 760px) { .kopf .marke img { width: 96px; height: 24px; } }   /* H = 24 px, über der Mindestgrösse 20 */
main { flex: 1; padding-bottom: var(--pb-16); }
.fuss { border-top: var(--pb-rahmen) solid var(--pb-grau-2); color: var(--pb-grau-3); }
.fuss .rahmen { display: flex; justify-content: space-between; gap: var(--pb-3); padding-top: var(--pb-2); padding-bottom: var(--pb-3); flex-wrap: wrap; }

/* ------------------------------------------------------------------ Feld: Knöpfe
 * button ist neutral. Das Feld macht den Knopf: .knopf = umrandet (Angabe, Nebenhandlung),
 * .knopf.voll = gefüllt (die eine Haupthandlung der Fläche). .leer bleibt als Alias für umrandet. */
button { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
.knopf {
  font: inherit; font-size: var(--pb-lauftext); font-weight: var(--pb-medium); line-height: 1.2; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pb-1); text-align: center;
  min-height: var(--pb-feld-h); min-width: calc(var(--pb-feld-h) * 2); padding: 0 var(--pb-2);
  background: var(--pb-papier); color: var(--pb-tinte); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--pb-tinte);
  cursor: pointer; text-decoration: none; transition: background var(--pb-dauer) var(--pb-kurve), color var(--pb-dauer) var(--pb-kurve);
}
.knopf:hover { background: var(--pb-grau-1); }
.knopf.voll { background: var(--pb-tinte); color: var(--pb-papier); box-shadow: none; }
.knopf.voll:hover { background: var(--pb-grau-4); }
.knopf.klein { min-height: 32px; min-width: 0; padding: 0 var(--pb-1); font-size: var(--pb-bezeichnung); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; }
.knopf.gross { min-height: 56px; padding: 0 var(--pb-4); font-size: var(--pb-zwischentitel); }
@media (pointer: coarse) { .knopf, .knopf.klein, .ws-preset { min-height: 44px; } .ws-preset.quadrat { min-width: 44px; } }
button.link, .knopf.link { background: none; border: 0; box-shadow: none; min-height: 0; min-width: 0; padding: 0; font-size: inherit; font-weight: var(--pb-normal);
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button.link:hover { background: none; color: var(--pb-grau-3); }
.knopf:disabled, .knopf:disabled:hover, .knopf[aria-disabled="true"] { background: var(--pb-papier); color: var(--pb-grau-3); box-shadow: inset 0 0 0 1px var(--pb-grau-2); cursor: not-allowed; }
button:disabled { cursor: not-allowed; }
.pfeil { font-weight: var(--pb-normal); }

/* ------------------------------------------------------------------ Feld: Eingaben */
.feld { margin-top: var(--pb-3); }
.feld label, .label { display: block; color: var(--pb-grau-3); margin-bottom: var(--pb-1); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
  font: inherit; width: 100%; height: var(--pb-feld-h); padding: 0 var(--pb-2); color: var(--pb-tinte); background: var(--pb-papier);
  border: 0; box-shadow: inset 0 0 0 1px var(--pb-grau-3); border-radius: 0; outline: none; -webkit-appearance: none; appearance: none;
}   /* Rahmen grau-3 (4.9:1): Feldgrenze erkennbar (WCAG 1.4.11), vorher grau-2 mit 1.4:1 */
input::placeholder, textarea::placeholder { color: var(--pb-grau-3); }
input:hover, textarea:hover, select:hover { box-shadow: inset 0 0 0 1px var(--pb-grau-4); }
input:focus, textarea:focus, select:focus { box-shadow: inset 0 0 0 1px var(--pb-tinte); }
/* Die Feldregel setzt outline:none und schlägt das allgemeine :focus-visible (geringere Spezifität).
   Tastaturfokus bleibt damit unsichtbar, obwohl die Maus den Rahmen nur von Grau auf Tinte hebt. */
input:not([type]):focus-visible, input[type=text]:focus-visible, input[type=email]:focus-visible,
input[type=password]:focus-visible, input[type=number]:focus-visible, input[type=search]:focus-visible,
textarea:focus-visible, select:focus-visible, input[type=checkbox]:focus-visible {
  outline: 2px solid var(--pb-tinte); outline-offset: 2px;
}
textarea { height: auto; min-height: 128px; padding: var(--pb-2); resize: vertical; }
select { padding-right: var(--pb-5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141414'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
/* Kästchen: eigenes Feld 24 px, 1 px Tinte, gefüllt wenn an (statt Browser-Standard mit Radius und Akzentfarbe) */
input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0; vertical-align: middle;
  background: var(--pb-papier) no-repeat center / 16px 16px; box-shadow: inset 0 0 0 1px var(--pb-tinte); border: 0; border-radius: 0; cursor: pointer; }
input[type=checkbox]:checked { background-color: var(--pb-tinte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
input[type=checkbox]:disabled { box-shadow: inset 0 0 0 1px var(--pb-grau-2); cursor: not-allowed; }
input[type=checkbox]:checked:disabled { background-color: var(--pb-grau-3); }
.zeile { display: flex; gap: var(--pb-2); align-items: center; flex-wrap: wrap; }
.zeile.ende { justify-content: space-between; }

/* Hinweis: umrandetes Feld, Fehler mit Bezeichnung statt Farbe */
.hinweis { box-shadow: inset 0 0 0 1px var(--pb-grau-2); background: var(--pb-grau-1); padding: var(--pb-2); margin: var(--pb-3) 0; }
.hinweis.fehler { background: var(--pb-papier); box-shadow: inset 0 0 0 1px var(--pb-tinte); }
.hinweis.fehler::before { content: "Fehler"; display: inline-block; margin-right: var(--pb-1); padding: 0 var(--pb-1); line-height: 24px; height: 24px;
  background: var(--pb-tinte); color: var(--pb-papier); font-size: var(--pb-bezeichnung); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; vertical-align: 1px; }
.flash { border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); padding: var(--pb-2) 0; }

.kicker { color: var(--pb-grau-3); display: flex; gap: var(--pb-1); align-items: center; flex-wrap: wrap; }
.kicker .nr { color: var(--pb-tinte); }
/* Feld als Bezeichnung, klein (Höhe 24) */
.kicker .nr, .marke-t, .version {
  display: inline-flex; align-items: center; height: var(--pb-feld-h-klein); padding: 0 var(--pb-1); white-space: nowrap;
  font-size: var(--pb-bezeichnung); line-height: 1; font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase;
  box-shadow: inset 0 0 0 1px currentColor; background: var(--pb-papier); color: var(--pb-tinte);
}
.zurueck { text-decoration: none; color: var(--pb-grau-3); }
.zurueck:hover { color: var(--pb-tinte); }

/* ------------------------------------------------------------------ Status (Felder) */
.marke-t { color: var(--pb-tinte); box-shadow: inset 0 0 0 1px var(--pb-tinte); }       /* Status, der zählt: Tinte (vorher gleich wie .leise) */
.marke-t.leise { color: var(--pb-grau-3); box-shadow: inset 0 0 0 1px var(--pb-grau-2); } /* Herkunft, erledigt: Angabe */
.marke-t.voll { color: var(--pb-tinte); box-shadow: inset 0 0 0 1px var(--pb-tinte); }   /* bestätigt */
.marke-t.voll::before { content: "✓"; margin-right: 6px; letter-spacing: 0; }
.marke-t.strich { color: var(--pb-tinte); box-shadow: none; outline: 1px dashed var(--pb-tinte); outline-offset: -1px; }  /* Annahme */
.marke-t.fehler { color: var(--pb-papier); background: var(--pb-tinte); box-shadow: none; }                                /* Fehler: gefülltes Feld */

/* Tabellen: Haarlinien */
table.tab { width: 100%; border-collapse: collapse; }
.tab th { text-align: left; color: var(--pb-grau-3); padding: var(--pb-1) var(--pb-2) var(--pb-1) 0; border-bottom: var(--pb-rahmen) solid var(--pb-tinte); }
.tab td { padding: 12px var(--pb-2) 12px 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); vertical-align: baseline; }
.tab td.r, .tab th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* Wert und Einheit auf einer Zeile */
.protokoll-tab td.zeit { width: 9.5rem; white-space: nowrap; }
.tab .klein { font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); color: var(--pb-grau-3); }
.tab tr.fail td:first-child::after { content: "Abweichung"; margin-left: var(--pb-1); display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  font-size: var(--pb-bezeichnung); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--pb-tinte); }

/* Schriftfeld (wie im Plankopf) */
.schriftfeld { margin: 0; border: var(--pb-rahmen) solid var(--pb-tinte); }
.schriftfeld div { display: grid; grid-template-columns: minmax(96px, 144px) 1fr; gap: var(--pb-2); padding: 12px var(--pb-2); border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); align-items: baseline; }
.schriftfeld div:last-child { border-bottom: 0; }
.schriftfeld dt, .schriftfeld .k { color: var(--pb-grau-3); }
.schriftfeld dd { margin: 0; }
.schriftfeld dd.email { overflow-wrap: anywhere; }
.schriftfeld dd.kurz { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* Modellnamen nicht mitten im Wort brechen */
@media (max-width: 760px) { .schriftfeld div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }   /* Bezeichnung über dem Wert */

/* ------------------------------------------------------------------ Anmeldung */
.anmeldung { display: grid; grid-template-columns: 7fr 5fr; min-height: calc(100vh - 65px); }
.anmeldung .bild { margin: 0; display: flex; flex-direction: column; border-right: var(--pb-rahmen) solid var(--pb-grau-2); }
.anmeldung .bild .bildflaeche { position: relative; flex: 1; min-height: 320px; background: var(--pb-grau-1); overflow: hidden; }
.anmeldung .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anmeldung .bild figcaption { padding: var(--pb-2) var(--pb-rand); color: var(--pb-grau-3); border-top: var(--pb-rahmen) solid var(--pb-grau-2); }
.anmeldung .form { padding: var(--pb-8) var(--pb-rand) var(--pb-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--pb-8); }
.anmeldung .form form { max-width: 416px; }
.anmeldung .form .display-m { margin: var(--pb-3) 0 var(--pb-1); }
.anmeldung .unten { color: var(--pb-grau-3); display: flex; flex-direction: column; gap: var(--pb-1); max-width: 416px; }
.anmeldung .unten a { color: var(--pb-tinte); }
@media (max-width: 900px) {
  .anmeldung { grid-template-columns: 1fr; min-height: 0; }
  .anmeldung .bild { border-right: 0; }
  .anmeldung .bild .bildflaeche { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
  .anmeldung .form { padding-top: var(--pb-5); gap: var(--pb-5); }
}
@media (max-width: 760px) {        /* Telefon: flaches Bild ohne Legende, «Anmelden» über der Falz */
  .anmeldung .bild .bildflaeche { aspect-ratio: 3 / 1; }
  .anmeldung .bild figcaption { display: none; }
  .anmeldung .form { padding-top: var(--pb-4); gap: var(--pb-4); }
}

/* Felder auf Bildern: nur oben links. Umrandet = weiss gefüllt (zweifarbig), gefüllt = Tinte. */
.bildfelder { position: absolute; left: var(--pb-2); top: var(--pb-2); display: flex; gap: 0; z-index: 1; pointer-events: none; }
.bildfelder span { display: inline-flex; align-items: center; height: var(--pb-feld-h-klein); padding: 0 var(--pb-1);
  font-size: var(--pb-bezeichnung); line-height: 1; font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; white-space: nowrap;
  background: var(--pb-papier); color: var(--pb-tinte); box-shadow: inset 0 0 0 1px var(--pb-tinte); }
.bildfelder span + span { margin-left: -1px; }
.bildfelder span.voll { background: var(--pb-tinte); color: var(--pb-papier); box-shadow: none; }
.bildfelder.gross span { height: var(--pb-4); padding: 0 12px; }
/* Lange Status brechen um, statt die Seite zu verbreitern (Telefon: Bild/Galerie waren 790 px breit) */
.bildfelder { right: var(--pb-2); flex-wrap: wrap; }
.bildfelder span { white-space: normal; height: auto; min-height: var(--pb-feld-h-klein); padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 760px) { .bildfelder span:nth-child(n+3) { display: none; } }   /* Inhalt-Status steht unter dem Bild */
.drei-status { display: flex; flex-wrap: wrap; gap: 4px; }
.drei-status .marke-t { white-space: normal; height: auto; min-height: var(--pb-feld-h-klein); padding: 4px var(--pb-1);
  line-height: var(--pb-bezeichnung-zeile); max-width: 100%; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Seitenkopf */
.seitenkopf { padding-top: var(--pb-8); padding-bottom: var(--pb-5); row-gap: var(--pb-3); }
.seitenkopf .display { margin-top: var(--pb-2); }
.seitenkopf .unter { margin-top: var(--pb-1); color: var(--pb-grau-3); }
.seitenkopf .unter.h2 { font-weight: var(--pb-normal); }
.seitenkopf .drei-status { margin-top: var(--pb-1); }

/* Zählfeld (grosse Zahl rechts im Seitenkopf) */
.zahlfeld { display: inline-flex; flex-direction: column; align-items: flex-start; box-shadow: inset 0 0 0 1px var(--pb-tinte); padding: var(--pb-1) var(--pb-2); min-width: 96px; text-align: left; }
.zahlfeld .meta { color: var(--pb-grau-3); text-transform: uppercase; letter-spacing: var(--pb-sperrung-bez); font-weight: var(--pb-medium); }
.zahlfeld.leise { color: var(--pb-grau-3); box-shadow: inset 0 0 0 1px var(--pb-grau-2); }   /* null: nichts zu tun */
@media (max-width: 900px) {
  .zahlfeld { flex-direction: row; align-items: baseline; gap: var(--pb-1); min-width: 0; }
  .zahlfeld .zahl-gross { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); }
}

/* ------------------------------------------------------------------ Projektliste */
.neu { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--pb-2); align-items: end; }
.neu .feld { margin: 0; }
@media (max-width: 900px) { .neu { grid-template-columns: 1fr; } }
.liste { list-style: none; margin: 0; padding: 0; border-top: var(--pb-rahmen) solid var(--pb-tinte); }
.liste li { border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
.liste a.eintrag { display: grid; grid-template-columns: 64px 192px 1fr 224px 96px; gap: var(--pb-rinne); padding: var(--pb-2) 0; text-decoration: none; align-items: start; }
.liste a.eintrag:hover { background: var(--pb-grau-1); }
.liste a.eintrag:hover .titel { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.liste .nr { color: var(--pb-grau-3); padding-top: 4px; }
.liste .thumb { aspect-ratio: 3 / 2; background: var(--pb-grau-1); overflow: hidden; }
.liste .thumb img { width: 100%; height: 100%; object-fit: cover; }
.liste .thumb .leer { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--pb-grau-3);
  font-size: var(--pb-bezeichnung); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; font-weight: var(--pb-medium); box-shadow: inset 0 0 0 1px var(--pb-grau-2); }
.liste .titel { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-titel); }
.liste .ort { color: var(--pb-grau-3); margin-top: 4px; }
.liste .st { padding-top: 2px; }
.liste .anz { text-align: right; padding-top: 2px; }
/* bis 900 px: Nummer, kleines Vorschaubild, Text daneben (vorher volle Breite je Karte, 7 Projekte = 5164 px); erst unter 480 px stapeln */
@media (max-width: 900px) {
  .liste a.eintrag { grid-template-columns: 48px 128px minmax(0, 1fr); column-gap: var(--pb-2); row-gap: 4px; }
  .liste a.eintrag > .thumb { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .liste a.eintrag > :nth-child(n+3) { grid-column: 3; min-width: 0; }
  .liste .st, .liste .anz { text-align: left; padding-top: 0; }
  .liste .anz .h2 { font-size: var(--pb-lauftext); line-height: var(--pb-lauftext-zeile); }
  .liste .anz .h2 + .block { display: inline; margin-left: 6px; }
}
@media (max-width: 480px) {
  .liste a.eintrag { grid-template-columns: 96px minmax(0, 1fr); }
  .liste a.eintrag > .nr { display: none; }
  .liste a.eintrag > .thumb { grid-column: 1; }
  .liste a.eintrag > :nth-child(n+3) { grid-column: 2; }
}

/* ------------------------------------------------------------------ Projekt: Ablauf (13 Schritte) */
.ablauf-rahmen { position: sticky; top: var(--pb-3); }
.kopfzeile-a { display: flex; justify-content: space-between; align-items: baseline; border-top: var(--pb-rahmen) solid var(--pb-tinte); padding-top: var(--pb-1); padding-bottom: var(--pb-2); }
.ablauf { list-style: none; margin: 0; padding: 0; border-top: var(--pb-rahmen) solid var(--pb-grau-2); }
.ablauf li { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--pb-2); padding: var(--pb-1) 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); line-height: 20px; color: var(--pb-grau-3); align-items: start; }
.ablauf li .n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 20px; font-size: var(--pb-bezeichnung); font-weight: var(--pb-medium); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ablauf li .d { display: block; font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); color: var(--pb-grau-3); margin-top: 2px; }
.ablauf li .z { font-size: var(--pb-bezeichnung); white-space: nowrap; font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; }
.ablauf li.done { color: var(--pb-tinte); }
.ablauf li.done .n { box-shadow: inset 0 0 0 1px var(--pb-tinte); color: var(--pb-tinte); }           /* erledigt: umrandet */
.ablauf li.done .z { color: var(--pb-grau-3); }
.ablauf li.current { color: var(--pb-tinte); }
.ablauf li.current .t { font-weight: var(--pb-medium); }
.ablauf li.current .n { background: var(--pb-tinte); color: var(--pb-papier); }                        /* jetzt: das eine gefüllte Feld */
.ablauf li.todo .n { box-shadow: inset 0 0 0 1px var(--pb-grau-2); }
.ablauf li.error { color: var(--pb-tinte); }
.ablauf li.error .n { outline: 1px dashed var(--pb-tinte); outline-offset: -1px; }
@media (max-width: 900px) { .ablauf-rahmen { position: static; margin-bottom: var(--pb-5); } .ablauf-spalte { order: 1; } }   /* Telefon: Status vor der Schrittliste */

.abschnitt { padding-top: var(--pb-5); }
.abschnitt + .abschnitt { margin-top: var(--pb-5); }
.kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pb-2); border-top: var(--pb-rahmen) solid var(--pb-tinte); padding-top: var(--pb-1); margin-bottom: var(--pb-3); }
.kopfzeile .nr { color: var(--pb-grau-3); min-width: 48px; }
.kopfzeile h2 { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-titel); flex: 1; }
.kopfzeile .meta { color: var(--pb-grau-3); }
.laeuft:not(section):not(div)::after { content: " ·"; animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .laeuft::after { animation: none; } }

.ablage { position: relative; outline: 1px dashed var(--pb-grau-3); outline-offset: -1px; background: var(--pb-grau-1); padding: var(--pb-5) var(--pb-3); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--pb-2); align-items: end; }
.ablage:hover, .ablage.ueber { outline: 1px solid var(--pb-tinte); background: var(--pb-papier); }
.ablage input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ablage .gross { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-titel); }
.ablage .leise { margin-top: 4px; }
.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--pb-rahmen) solid var(--pb-grau-2); margin-top: var(--pb-3); }
.zahlen div { padding: var(--pb-2) var(--pb-2) 0 0; }
.zahlen .w { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); }
.zahlen .k { color: var(--pb-grau-3); }
@media (max-width: 760px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
details.mehr { margin-top: var(--pb-2); }
details.mehr > summary { cursor: pointer; color: var(--pb-grau-3); list-style: none; display: inline-block; }
details.mehr > summary:hover { color: var(--pb-tinte); }
details.mehr > summary::before { content: "+ "; }
details.mehr[open] > summary::before { content: "− "; }
details.mehr > summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------------------------ Tafeln (Bilder) */
.tafeln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pb-5) var(--pb-rinne); }
.tafeln.eins { grid-template-columns: 1fr; gap: var(--pb-8); }
@media (max-width: 760px) { .tafeln { grid-template-columns: 1fr; } }
figure.tafel { margin: 0; }
figure.tafel .bildrahmen { position: relative; background: var(--pb-grau-1); aspect-ratio: 16 / 9; overflow: hidden; }
figure.tafel .bildrahmen img { width: 100%; height: 100%; object-fit: cover; }
figure.tafel figcaption { display: grid; grid-template-columns: auto 1fr auto; gap: 4px var(--pb-2); align-items: baseline; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); padding: var(--pb-1) 0; font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); }
figure.tafel figcaption .abb { color: var(--pb-grau-3); }
figure.tafel figcaption .tt { font-size: var(--pb-lauftext); line-height: var(--pb-lauftext-zeile); font-weight: var(--pb-medium); }
figure.tafel figcaption .v { white-space: nowrap; font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; }
figure.tafel figcaption > :nth-child(n+4) { grid-column: 2 / -1; }
figure.tafel figcaption .gp { color: var(--pb-grau-3); }
figure.tafel .platzhalter { aspect-ratio: 16 / 9; background: var(--pb-grau-1); outline: 1px dashed var(--pb-grau-3); outline-offset: -1px; display: flex; align-items: center; justify-content: center; color: var(--pb-grau-3); }
.version { margin-left: var(--pb-1); }

/* ------------------------------------------------------------------ Bühne: dunkler Grund, wo Bilder beurteilt werden */
.buehne { background: var(--pb-grau-4); color: var(--pb-papier); padding: var(--pb-6) 0 var(--pb-8); }
.buehne a { color: var(--pb-papier); }
.buehne a:hover { text-decoration-color: var(--pb-grau-2); }
.buehne .leise, .buehne .abb, .buehne .gp, .buehne figure.tafel figcaption .gp, .buehne figure.tafel figcaption .abb,
.buehne details.mehr > summary, .buehne .protokoll { color: var(--pb-grau-2); }
.buehne details.mehr > summary:hover { color: var(--pb-papier); }
.buehne .marke-t.leise { color: var(--pb-grau-3); }     /* Feld hat Papiergrund: grau-2 auf Weiss war 1.4:1 */
.buehne figure.tafel figcaption, .buehne .protokoll li { border-bottom-color: var(--pb-grau-3); }
.buehne figure.tafel .bildrahmen { background: var(--pb-tinte); }
.seitenkopf + .buehne { margin-top: 0; }

/* Galerie */
.galerie-eintrag { border-top: var(--pb-rahmen) solid var(--pb-grau-3); padding-top: var(--pb-2); }
.galerie-eintrag .titelzeile { display: grid; grid-template-columns: 80px 1fr auto; gap: var(--pb-rinne); align-items: baseline; margin-bottom: var(--pb-2); }
.galerie-eintrag .titelzeile h2 { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); letter-spacing: var(--pb-sperrung-titel); font-weight: var(--pb-medium); }
.galerie-eintrag .gross { position: relative; display: block; }
.galerie-eintrag .gross img { width: 100%; height: auto; background: var(--pb-tinte); }
.galerie-eintrag .fusszeile { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; gap: var(--pb-rinne); padding: var(--pb-1) 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-3); font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); align-items: baseline; }
.galerie-eintrag .fusszeile .aktionen { display: flex; gap: var(--pb-3); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; }
.frueher { display: grid; grid-template-columns: 80px repeat(4, minmax(0, 1fr)); gap: var(--pb-rinne); margin-top: var(--pb-2); }
.frueher figure { margin: 0; } .frueher img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.frueher figcaption { font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); color: var(--pb-grau-2); padding-top: 4px; }
.protokoll { list-style: none; padding: 0; margin: var(--pb-1) 0 0; font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); color: var(--pb-grau-3); }
.protokoll li { padding: 4px 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
@media (max-width: 760px) { .galerie-eintrag .titelzeile, .galerie-eintrag .fusszeile { grid-template-columns: 1fr; } .frueher { grid-template-columns: repeat(2, 1fr); } }

/* Bild + Markierung */
.markierung { position: relative; cursor: crosshair; background: var(--pb-tinte); }
.markierung img { width: 100%; height: auto; }
.markierung .punkt { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; box-shadow: inset 0 0 0 1px var(--pb-tinte), 0 0 0 1px var(--pb-papier); pointer-events: none; }
.markierung .punkt.alt { opacity: .6; }
.markierung .punkt::after { content: ""; position: absolute; left: 11px; top: 11px; width: 2px; height: 2px; background: var(--pb-papier); }

/* ------------------------------------------------------------------ Projektblatt (Werte) */
.legende { display: flex; flex-wrap: wrap; gap: var(--pb-2) var(--pb-3); color: var(--pb-grau-3); font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); margin-top: var(--pb-1); align-items: center; }
.legende > span { display: inline-flex; gap: var(--pb-1); align-items: center; }
.blattgruppe { margin-top: var(--pb-8); }
.blattgruppe > .kopfzeile { display: grid; grid-template-columns: 64px 1fr; gap: var(--pb-rinne); margin-bottom: 0; }
.wert { display: grid; grid-template-columns: 64px 240px 1fr 208px; gap: var(--pb-rinne); padding: 12px 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
.wert .nr { color: var(--pb-grau-3); padding-top: 4px; }
.wert .lbl { color: var(--pb-grau-3); }
.wert .beleg { display: block; font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); color: var(--pb-grau-3); margin-top: 4px; }
.wert .herkunft { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wert .herkunft .meta { color: var(--pb-grau-3); }
.wert .frage { grid-column: 2 / -1; box-shadow: inset 0 0 0 1px var(--pb-tinte); padding: var(--pb-3); margin-top: var(--pb-1); background: var(--pb-papier); }
.wert .frage .q { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-titel); margin: var(--pb-1) 0 var(--pb-2); max-width: 640px; }
.wert .frage form { display: inline-block; margin: 0 var(--pb-1) var(--pb-1) 0; }
.wert .frage .eingaben { display: flex; gap: var(--pb-2); align-items: end; flex-wrap: wrap; }
.wert .frage .eingaben .feld { margin: 0; width: 160px; }
.wert details.frage.zu { padding: 12px var(--pb-2); box-shadow: inset 0 0 0 1px var(--pb-grau-2); }
.wert details.frage.zu[open] { padding: var(--pb-3); box-shadow: inset 0 0 0 1px var(--pb-tinte); }
.wert details.frage.zu > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--pb-2); }
.wert details.frage.zu > summary::-webkit-details-marker { display: none; }
.wert details.frage.zu > summary .label { margin: 0; }
.wert details.frage.zu > summary::after { content: "ändern"; margin-left: auto; text-decoration: underline; text-underline-offset: .2em; }
.wert details.frage.zu[open] > summary::after { content: "zuklappen"; }
.wert details.frage.zu.gesperrt > summary::after { content: "ansehen"; }      /* Blatt bestätigt: nichts mehr zu ändern */
.wert details.frage.zu.gesperrt[open] > summary::after { content: "zuklappen"; }
.blatt-text { padding: var(--pb-2) 0 0 calc(64px + var(--pb-rinne)); }
@media (max-width: 900px) { .blattgruppe > .kopfzeile { grid-template-columns: 48px 1fr; } .blatt-text { padding-left: calc(48px + var(--pb-rinne)); } .wert { grid-template-columns: 48px 1fr; row-gap: 4px; } .wert > *:not(.nr) { grid-column: 2; min-width: 0; } .wert .herkunft { text-align: left; align-items: flex-start; flex-direction: row; flex-wrap: wrap; } .wert .frage { grid-column: 1 / -1; } }

/* Gestaltete Leerstände (VAL-UI-004): kein leeres Blatt, sondern ein ruhiges Feld mit nächstem Schritt.
   Genutzt für: keine Projekte, keine Bilder, keine Dateien. */
.leer-stand { border: var(--pb-rahmen) solid var(--pb-grau-2); background: var(--pb-grau-1); padding: var(--pb-4) var(--pb-3); margin: var(--pb-3) 0 0; max-width: 640px; display: grid; gap: var(--pb-1); }
.leer-stand .bez { color: var(--pb-grau-4); }   /* Grau-4 auf Grau-1 = 10:1; Grau-3 gäbe genau 4.5:1 (Grenzfall, axe) */
.leer-stand .leer-titel { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-titel); }
.leer-stand .leer-text { color: var(--pb-grau-4); }
.leer-stand .leer-hinweis { margin-top: var(--pb-1); }
.leer-stand .knopf { justify-self: start; margin-top: var(--pb-2); }
@media (max-width: 760px) { .leer-stand { padding: var(--pb-3) var(--pb-2); } }
.buehne .leer-stand { background: var(--pb-grau-4); border-color: var(--pb-grau-3); }
.buehne .leer-stand .bez, .buehne .leer-stand .leer-text, .buehne .leer-stand .leer-hinweis { color: var(--pb-grau-2); }

/* ------------------------------------------------------------------ Admin */
.anfrage { border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); padding: var(--pb-3) 0; display: grid; grid-template-columns: 96px 1fr 1fr 224px; gap: var(--pb-rinne); }
.anfrage .nr { color: var(--pb-grau-3); }
.anfrage .nr .dt { display: block; margin-top: 4px; }
.anfrage .nachricht { white-space: pre-wrap; }
.anfrage .zeile { flex-wrap: nowrap; gap: var(--pb-1); }
.anfrage select { flex: 1; min-width: 0; }
.anfrage button.leer { min-width: 0; }
.status-st { margin-bottom: var(--pb-1); }
@media (max-width: 900px) { .anfrage { grid-template-columns: 1fr; } }

.fehlerseite { padding-top: var(--pb-16); }
.raster > .abschnitt + .abschnitt { margin-top: 0; }
.lageskizze { margin: var(--pb-2) 0; max-width: 560px; }
.lageskizze img { display: block; width: 100%; height: auto; box-shadow: inset 0 0 0 1px var(--pb-tinte); border: var(--pb-rahmen) solid var(--pb-tinte); }
/* Solange die Lageskizze geholt wird: Platzhalter in der Grösse des Bilds (Befund B-claude-04) */
.lageskizze .bild-wartet { width: 100%; aspect-ratio: 1 / 1; border: 1px dashed var(--pb-grau-3); background: var(--pb-grau-1);
  display: grid; place-content: center; justify-items: center; gap: var(--pb-2); text-align: center; padding: var(--pb-2); }
.lageskizze .bild-wartet .ws-laden-linie { width: 140px; }
.lageskizze figcaption { margin-top: var(--pb-1); }

/* ================================================================== Arbeitsfläche (Oktober 2026)
 * Ein Bildschirm in 4 Phasen. Links Fortschritt, Mitte das Projekt, rechts ab dem Rendering der KI-Chat.
 * Fragen im Typeform-Stil in Titelgrösse Web (48/52), sonst App-Grössen. Status als Feld: umrandet = offen,
 * gefüllt = erledigt, umrandet mit Kern = jetzt. Bewegung: ruhig, eine Kurve (0.65, 0, 0.35, 1). */
.ws-body { height: 100vh; overflow: hidden; }
.ws-body > main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ws-body > .rahmen { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: 720px; }
.ws-kopf { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: var(--pb-3); padding: 0 var(--pb-3); border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
.ws-kopf .marke { flex-shrink: 0; display: block; }
.ws-kopf .marke img { width: 112px; height: 28px; }
.ws-titel { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: var(--pb-3); border-left: var(--pb-rahmen) solid var(--pb-grau-2); }
.ws-titel strong { font-weight: var(--pb-medium); }
.ws-nav { display: flex; align-items: center; gap: var(--pb-2); font-size: var(--pb-bezeichnung); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; font-weight: var(--pb-medium); }
.ws-nav a { text-decoration: none; }
.ws-nav form { margin: 0; }
.ws-nav button.link { font: inherit; letter-spacing: inherit; text-transform: inherit; }
button.link { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* --ws-seite: eine linke Einrückung für alle Schritte (Text, Perspektiven, Bau, Bilder), damit der Rand nicht springt */
.ws { --ws-ease: cubic-bezier(.65, 0, .35, 1); --ws-seite: clamp(24px, 4vw, 64px); flex: 1; min-height: 0; display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 0px; transition: grid-template-columns .95s var(--ws-ease); }
.ws.mit-chat.chat-offen { grid-template-columns: 232px minmax(0, 1fr) 384px; }

/* ---- Fortschritt */
.ws-fortschritt { border-right: var(--pb-rahmen) solid var(--pb-grau-2); padding: var(--pb-4) var(--pb-3); display: flex; flex-direction: column; min-height: 0; }
.ws-fortschritt-kopf { display: none; }
.ws-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ws-schritte li { display: flex; align-items: center; gap: 12px; height: 36px; color: var(--pb-grau-3); transition: color .4s; }
.ws-schritte li.done, .ws-schritte li.current { color: var(--pb-tinte); }
.ws-schritte li.current { font-weight: var(--pb-medium); }
.ws-schritte .punkt { width: 14px; height: 14px; border: var(--pb-rahmen) solid var(--pb-grau-2); flex-shrink: 0; position: relative; transition: background .4s, border-color .4s; }
.ws-schritte li.done .punkt { background: var(--pb-tinte); border-color: var(--pb-tinte); }
.ws-schritte li.current .punkt { border-color: var(--pb-tinte); }
.ws-schritte li.current .punkt::after { content: ""; position: absolute; inset: 3px; background: var(--pb-tinte); animation: ws-puls 1.8s var(--ws-ease) infinite; }
.ws-schritte li.error .punkt { border-color: var(--pb-tinte); background: repeating-linear-gradient(45deg, var(--pb-tinte) 0 1px, transparent 1px 4px); }
.ws-schritte li.error { color: var(--pb-tinte); }
.ws-schritte li.klickbar { cursor: pointer; }
.ws-schritte li.klickbar:hover span:last-child, .ws-schritte li.klickbar span:last-child:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.ws-schritte li.offen span:last-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@keyframes ws-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ws-stand { margin-top: auto; display: grid; gap: 4px; }
.ws-prozent { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); font-variant-numeric: tabular-nums; }
.ws-balken { display: block; height: 2px; background: var(--pb-grau-2); }
.ws-balken span { display: block; height: 2px; background: var(--pb-tinte); transition: width .8s var(--ws-ease); }

/* ---- Mitte und Szenenwechsel */
.ws-mitte { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ws-buehne { position: relative; flex: 1; min-height: 0; }
.ws-statusband { flex: 0 0 auto; max-height: 30%; overflow: auto; overflow-wrap: anywhere; }
.ws-sitzung { flex: 0 0 auto; margin: 12px 16px 0; }
.ws-szene { position: absolute; inset: 0; overflow: auto; transition: transform .55s var(--ws-ease), opacity .45s var(--ws-ease); }
.ws-szene.rein-up { transform: translateY(48px); opacity: 0; }
.ws-szene.raus-up { transform: translateY(-48px); opacity: 0; pointer-events: none; transition: opacity .12s linear, transform .12s linear; }
.ws-szene.rein-down { transform: translateY(-48px); opacity: 0; }
.ws-szene.raus-down { transform: translateY(48px); opacity: 0; pointer-events: none; transition: opacity .12s linear, transform .12s linear; }
.ws-szene.rein-links { transform: translateX(64px); opacity: 0; }
.ws-szene.raus-links { transform: translateX(-64px); opacity: 0; pointer-events: none; transition: opacity .12s linear, transform .12s linear; }
.ws-szene.rein-fade { opacity: 0; transform: scale(.985); }
.ws-szene.raus-fade { opacity: 0; pointer-events: none; transition: opacity .12s linear; }
.ws-laden { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--pb-3); }
.ws-laden-linie { display: block; width: 160px; height: 1px; background: var(--pb-grau-2); position: relative; overflow: hidden; }
/* Ladegerüst der Arbeitsfläche: die Form des kommenden Bildschirms, ruhig und grau (Befund B-claude-08, VAL-UI-004) */
.ws-skelett { width: min(520px, 78%); display: grid; gap: 12px; }
.ws-skelett > span { display: block; background: var(--pb-grau-1); box-shadow: inset 0 0 0 1px var(--pb-grau-2); animation: ws-sk-puls 1.6s var(--pb-kurve) infinite; }
.ws-sk-titel { height: 32px; width: 62%; }
.ws-sk-zeile { height: 14px; }
.ws-sk-zeile.kurz { width: 74%; }
.ws-sk-feld { height: 48px; }
@keyframes ws-sk-puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.ws-laden-text { text-align: center; margin: 0; }
@media (prefers-reduced-motion: reduce) { .ws-skelett > span { animation: none; } }
.ws-laden-linie::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 1px; background: var(--pb-tinte); animation: ws-lauf 1.4s var(--ws-ease) infinite; }
@keyframes ws-lauf { to { left: 100%; } }
.ws-mitte-text { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: var(--pb-8) var(--ws-seite); }

/* ---- Typeform */
.tf { max-width: 760px; display: grid; gap: var(--pb-3); }
.tf.sendet { opacity: .5; pointer-events: none; transition: opacity .2s; }
.tf-nr { font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; font-weight: var(--pb-medium); color: var(--pb-grau-3); }
.tf-frage { font-size: var(--pb-frage); line-height: var(--pb-frage-zeile); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-titel); }
.tf-frage.klein { font-size: var(--pb-titel); line-height: var(--pb-titel-zeile); }
.tf-hilfe { max-width: 38rem; }
.tf-optionen { display: grid; gap: 12px; max-width: 520px; }
.tf-option { display: flex; align-items: center; gap: var(--pb-2); min-height: 56px; padding: 0 var(--pb-2); border: var(--pb-rahmen) solid var(--pb-tinte); background: var(--pb-papier); color: var(--pb-tinte); font: inherit; font-size: var(--pb-zwischentitel); text-align: left; cursor: pointer; transition: background .18s, color .18s; }
.tf-option:hover { background: var(--pb-grau-1); }
.tf-option.gewaehlt { background: var(--pb-tinte); color: var(--pb-papier); }
.tf-vorschlaege .tf-option { font-size: var(--pb-lauftext); min-height: var(--pb-feld-h); }
.tf-vorschlag-wert { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--pb-medium); }
.tf-taste { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border: var(--pb-rahmen) solid currentColor; font-size: var(--pb-bezeichnung); font-weight: var(--pb-medium); flex-shrink: 0; }
.tf-eingaben { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pb-3); }
.tf-feld { display: grid; gap: 4px; }
.tf-zeile { display: flex; align-items: baseline; gap: 8px; border-bottom: var(--pb-rahmen) solid var(--pb-tinte); }
.tf-zeile input { border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--pb-titel); line-height: var(--pb-titel-zeile); font-weight: var(--pb-medium); width: 6ch; padding: 4px 0; color: var(--pb-tinte); }
/* Zahlen: Feld so breit wie der Wert, die Einheit steht direkt dahinter («30°» statt «30      °») */
@supports (field-sizing: content) { .tf-zeile input:not([name=name]):not([name=address]) { field-sizing: content; width: auto; min-width: 4ch; max-width: 9ch; } }
/* Texteingabe (Projektname, Adresse): Feld füllt die Zeile bis 540 px, «OK» bleibt daneben */
.tf-text .tf-eingaben { flex-wrap: nowrap; }
.tf-text .tf-feld { flex: 1 1 auto; min-width: 0; max-width: 540px; }
.tf-text .tf-zeile input { width: 100%; }
.tf-einheit { font-size: var(--pb-zwischentitel); color: var(--pb-grau-3); }
.tf-enter { font-size: var(--pb-bezeichnung); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; }
.tf-zurueck { justify-self: start; font-size: var(--pb-bezeichnung); }
.tf-skizze { width: 280px; height: 280px; border: var(--pb-rahmen) solid var(--pb-grau-2); }
/* Lageskizze: Platzhalter, solange das Luftbild geholt wird (Befund B-claude-04) – kein leeres weisses Feld */
.tf-skizze-feld { position: relative; width: 280px; height: 280px; }
.tf-skizze-feld .tf-skizze { display: block; }
.tf-skizze-platzhalter { background: var(--pb-grau-1); display: grid; place-content: center; justify-items: center; gap: var(--pb-2); text-align: center; padding: var(--pb-2); }
.tf-skizze-platzhalter .ws-laden-linie { width: 120px; }
.tf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pb-2) var(--pb-3); }
.knopf.gross { height: 56px; padding: 0 var(--pb-4); font-size: var(--pb-zwischentitel); }
.ws-zf { display: grid; gap: 0; margin: 0; border-top: var(--pb-rahmen) solid var(--pb-tinte); max-width: 640px; }
.ws-zf-zeile { display: grid; grid-template-columns: 140px 1fr; gap: var(--pb-2); padding: 10px 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
.ws-zf-zeile dd { margin: 0; }

/* ---- Unterlagen */
.ws-schritt-unterlagen > .tf-frage { margin: var(--pb-1) 0 var(--pb-3); }         /* Titel berührt das Feld nicht mehr */
.ws-ablage { border: var(--pb-rahmen) solid var(--pb-tinte); min-height: 180px; display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; padding: var(--pb-4); cursor: pointer; max-width: 760px; transition: background .2s; }
.ws-ablage .nur-touch { display: none; }
@media (pointer: coarse) {                       /* Telefon/Tablet: nichts zum Ziehen, ein Knopf zum Wählen */
  .ws-ablage .nur-maus { display: none; }
  .ws-ablage .nur-touch { display: inline; }
  .ws-ablage .knopf.nur-touch { display: inline-flex; margin-top: var(--pb-1); }
}
.ws-ul-kopf, .ws-dateien-box { max-width: 760px; }
.ws-ablage:hover, .ws-ablage.ueber { background: var(--pb-grau-1); }
.ws-ablage-titel { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); }
.ws-dateien { list-style: none; margin: 0; padding: 0; max-width: 760px; display: grid; }
.ws-dateien li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
.ws-lesen { display: flex; align-items: center; gap: var(--pb-2); }
/* ---- Warten, das leicht fällt (Status der Auswertung, docs/konzept/status_warten.png) */
.ws-warten { max-width: 760px; border: var(--pb-rahmen) solid var(--pb-tinte); padding: var(--pb-3); display: grid; gap: 8px; margin: var(--pb-2) 0; }
.ws-warten[hidden] { display: none; }
.ws-warten-titel { margin: 0; font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); }
.ws-warten-datei, .ws-warten-teil { margin: 0; overflow-wrap: anywhere; }
.ws-warten-balken { height: 14px; border: var(--pb-rahmen) solid var(--pb-tinte); margin-top: 6px; }
.ws-warten-balken span { display: block; height: 100%; background: var(--pb-tinte); transition: width .8s var(--ws-ease); }
.ws-warten-zeit { margin: 0; }
.ws-warten-k { margin-top: var(--pb-2); }
.ws-warten-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ws-warten-schritte li { display: flex; gap: 12px; align-items: baseline; }
.ws-warten-schritte .w-z { width: 1em; flex: none; }
.ws-warten-schritte li.w-done, .ws-warten-schritte li.w-current { font-weight: var(--pb-medium); }
.ws-warten-schritte li.w-todo { color: var(--pb-grau-3); }
.ws-warten-schritte li.w-error { color: var(--pb-tinte); font-weight: var(--pb-medium); }
.ws-warten-los { background: var(--pb-grau-1); padding: 12px 16px; margin-top: var(--pb-2); display: grid; gap: 2px; }
.ws-bg-hinweis { max-width: 760px; border-left: 2px solid var(--pb-tinte); padding: 4px 10px; margin: 0 0 var(--pb-2); }
.ws-bg-hinweis[hidden] { display: none; }

/* ---- Perspektiven */
/* Kopf, Bühne (Rest der Höhe, mind. 240 px), Kameras + Weiter: bei 1280×720 alles ohne Scrollen sichtbar */
.ws-persp { min-height: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(240px, 1fr) auto; gap: var(--pb-2); padding: var(--pb-3) var(--ws-seite); }
.ws-persp-kopf { display: grid; gap: 4px; }
.ws-viewer-stage { position: relative; min-height: min-content; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--pb-2); background: var(--pb-grau-1); padding: var(--pb-2); }
.ws-viewer { position: relative; min-height: 0; display: grid; place-items: center; }
/* Leinwand nimmt keinen Platz im Fluss: sonst bestimmt ihre Höhe (aus der Breite) die Zeile und drückt «Weiter» unter die Falz */
.ws-viewer canvas { position: absolute; inset: 0; margin: auto; display: block; border: var(--pb-rahmen) solid var(--pb-grau-2); background: var(--pb-papier); touch-action: none; }
.ws-viewer-knopfe { display: flex; flex-direction: column; gap: 6px; }
.ws-viewer-knopfe .bez { margin-top: 8px; }
.ws-preset-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ws-preset-spalte { display: grid; gap: 4px; }
.ws-preset { height: 32px; border: var(--pb-rahmen) solid var(--pb-tinte); background: var(--pb-papier); font: inherit; font-size: var(--pb-bezeichnung); font-weight: var(--pb-medium); cursor: pointer; padding: 0 8px; text-align: left; }
.ws-preset.quadrat { text-align: center; padding: 0; }
.ws-preset.aktiv, .ws-preset:active { background: var(--pb-tinte); color: var(--pb-papier); }
.ws-fixieren { position: absolute; right: calc(var(--pb-2) + 16px); bottom: calc(var(--pb-2) + 16px); transition: transform .2s; }
.ws-fixieren.blitz { transform: scale(.94); }
.ws-fixieren.warn, .ws-fixieren.warn:hover { background: var(--pb-papier); color: var(--pb-tinte); box-shadow: inset 0 0 0 2px var(--pb-tinte); }
/* ---- Möbel (Drag & Drop je Innenkamera) */
.ws-moebel-liste { overflow-y: auto; }
.ws-preset.ws-moebel-typ { touch-action: none; user-select: none; -webkit-user-select: none; height: auto; min-height: 32px; padding: 6px 8px; line-height: 1.2; }
.ws-moebel-typ.zieht { background: var(--pb-tinte); color: var(--pb-papier); }
.ws-viewer.ziel canvas { outline: 2px dashed var(--pb-tinte); outline-offset: -2px; }
.ws-moebel-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-moebel-status { min-width: 200px; }
/* Häkchen im Kästchen, nicht darunter (Befund B-claude-07): eigene Fläche über der Taste, zentriert.
   Vorher: .tf-mehrfach … .tf-taste::after { content: " ✓" } – als zweites Rasterfeld landete das Zeichen unter dem Kästchen. */
.tf-haken { display: none; }
.tf-option.gewaehlt .tf-haken { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.ws-thumbs-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pb-3); }
.ws-thumbs { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.ws-thumb { margin: 0; width: 160px; flex-shrink: 0; cursor: pointer; }
.ws-thumb img { width: 160px; height: 90px; border: var(--pb-rahmen) solid var(--pb-tinte); object-fit: cover; }
.ws-thumb.auto img { border-color: var(--pb-grau-2); }
.ws-thumb figcaption { display: flex; gap: var(--pb-1); align-items: center; font-size: var(--pb-bezeichnung); line-height: 16px; padding-top: 4px; }
/* Zwei Zeilen: «Vorschlag ·» allein füllte die schmale Karte, der Kameraname (Süd, Nordost, …) verschwand. */
.ws-thumb-name { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; white-space: normal; line-height: 16px; max-height: 32px; }
.ws-thumb.plus { height: 90px; border: var(--pb-rahmen) solid var(--pb-tinte); background: var(--pb-papier); font: inherit; font-size: var(--pb-bezeichnung); font-weight: var(--pb-medium); }
.ws-persp-fuss { display: flex; align-items: center; gap: var(--pb-3); flex-shrink: 0; }

/* ---- Bau-Animation */
.ws-bau { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto auto; padding: var(--pb-4) var(--ws-seite) var(--pb-3); gap: var(--pb-2); }
.ws-bau-kopf { display: grid; gap: 6px; max-width: 640px; }
.ws-bau-balken { height: 2px; background: var(--pb-grau-2); margin-top: 8px; }
.ws-bau-balken span { display: block; height: 2px; width: 0; background: var(--pb-tinte); transition: width 1s linear; }
.ws-bau-bild { position: relative; min-height: 0; display: grid; place-items: center; }
.ws-bau-bild canvas { display: block; }
.ws-bau-stufen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ws-bau-stufen li { display: grid; gap: 8px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; font-size: var(--pb-bezeichnung); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; color: var(--pb-grau-3); font-weight: var(--pb-medium); transition: color .5s; }
.ws-bau-strich { height: 3px; background: var(--pb-grau-2); transition: background .6s; }
.ws-bau-stufen li.done, .ws-bau-stufen li.current { color: var(--pb-tinte); }
.ws-bau-stufen li.done .ws-bau-strich { background: var(--pb-tinte); }
.ws-bau-stufen li.current .ws-bau-strich { background: linear-gradient(90deg, var(--pb-tinte) 0 50%, var(--pb-grau-2) 50% 100%); background-size: 200% 100%; animation: ws-strich 2.4s linear infinite; }
@keyframes ws-strich { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---- Bilder */
.ws-bilder { padding: var(--pb-4) var(--ws-seite); display: grid; grid-template-rows: max-content max-content; gap: var(--pb-3); align-content: start; }
.ws-bilder-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--pb-2) var(--pb-3); }
.ws-bilder-titel { flex: 1 1 320px; display: grid; gap: var(--pb-1); max-width: var(--pb-satz-max); }
.ws-bilder-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pb-2) var(--pb-3); }
.ws-bild-stand { margin: 0; }
.ws-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pb-3); }
.ws-bild { margin: 0; animation: ws-bild-rein .7s var(--ws-ease) both; }
@keyframes ws-bild-rein { from { opacity: 0; transform: translateY(16px); } }
.ws-bild-flaeche { position: relative; display: block; width: 100%; padding: 0; border: var(--pb-rahmen) solid var(--pb-grau-2); background: var(--pb-grau-1); cursor: zoom-in; aspect-ratio: 16 / 9; }
.ws-bild-flaeche img { width: 100%; height: 100%; object-fit: cover; }
.ws-bild.bezug .ws-bild-flaeche { outline: 2px solid var(--pb-tinte); outline-offset: 2px; }
.ws-bild figcaption { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 8px; overflow-wrap: anywhere; }
.ws-bild-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--pb-bezeichnung); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; font-weight: var(--pb-medium); }
.ws-bild .bildfelder { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.ws-bild .bildfelder span { background: var(--pb-papier); color: var(--pb-tinte); font-size: var(--pb-bezeichnung); line-height: 16px; padding: 2px 6px; font-weight: var(--pb-medium); letter-spacing: .04em; }
.ws-lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(20, 20, 20, .94); display: grid; place-items: center; align-content: center; gap: var(--pb-2); padding: var(--pb-3); color: var(--pb-papier); cursor: zoom-out; animation: ws-bild-rein .3s both; }
.ws-lightbox img { max-width: 94vw; max-height: 84vh; }

/* ---- Stelle im Bild zeigen (Markierung) */
.bf-dialog [hidden] { display: none !important; }
.bf-dialog { position: fixed; inset: 0; z-index: 60; background: var(--pb-papier); color: var(--pb-tinte); display: grid; grid-template-rows: auto 1fr; animation: ws-bild-rein .25s both; }
.bf-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--pb-2); padding: var(--pb-2) var(--pb-3); border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
.bf-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--pb-3); padding: var(--pb-3); min-height: 0; overflow: auto; align-items: start; }
.bf-bild { display: grid; gap: var(--pb-1); }
.bf-flaeche { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; border: var(--pb-rahmen) solid var(--pb-grau-2); background: var(--pb-grau-1); }
.bf-flaeche img { width: 100%; height: auto; pointer-events: none; }
.bf-ebene { position: absolute; inset: 0; pointer-events: none; }
.bf-marke { position: absolute; display: grid; place-items: center; }
.bf-marke.rahmen { outline: 2px solid var(--pb-papier); box-shadow: inset 0 0 0 2px var(--pb-tinte), 0 0 0 4px var(--pb-tinte); }
.bf-marke.nadel { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--pb-tinte); box-shadow: 0 0 0 3px var(--pb-papier); }
.bf-marke.nadel::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pb-papier); }
.bf-marke.alt { opacity: .75; }
.bf-marke.alt.rahmen { box-shadow: inset 0 0 0 2px var(--pb-tinte); outline-style: dashed; }
.bf-marke b { position: absolute; top: -10px; left: -10px; min-width: 20px; height: 20px; padding: 0 4px; background: var(--pb-papier); color: var(--pb-tinte); font-size: var(--pb-bezeichnung); line-height: 20px; text-align: center; box-shadow: inset 0 0 0 1px var(--pb-tinte); }
.bf-marke.nadel b { top: -14px; left: 16px; }
.bf-marke.nadel.alt::after { display: none; }
.bf-hinweis { font-size: var(--pb-bezeichnung); color: var(--pb-grau-3); }
.bf-seite { display: grid; gap: var(--pb-2); align-content: start; }
.bf-panel, .bf-antwort { display: grid; gap: var(--pb-2); }
.bf-typen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pb-1); }
.bf-typ { justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 44px; padding: 8px; background: var(--pb-papier); color: var(--pb-tinte); box-shadow: inset 0 0 0 1px var(--pb-tinte); font-size: var(--pb-bezeichnung); line-height: 1.25; }
.bf-typ:hover { background: var(--pb-grau-1); }
.bf-typ[aria-pressed="true"] { background: var(--pb-tinte); color: var(--pb-papier); }
.bf-panel input { font: inherit; height: var(--pb-feld-h); padding: 0 12px; border: var(--pb-rahmen) solid var(--pb-tinte); border-radius: 0; width: 100%; }
.bf-knoepfe { display: flex; gap: var(--pb-1); flex-wrap: wrap; }
.bf-liste { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: var(--pb-bezeichnung); }
.bm-bild { position: relative; }
.bm-bild .bm-rahmen { position: absolute; box-shadow: inset 0 0 0 2px var(--pb-tinte), 0 0 0 2px var(--pb-papier); }
.bm-bild .bm-nadel { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--pb-tinte); box-shadow: 0 0 0 3px var(--pb-papier); }
.bm-fragen input[name=antwort] { min-width: 0; flex: 1 1 240px; }
/* Projektakte/Antworten im dunklen Lightbox-Rahmen: Text dunkel auf Weiss (vorher weiss auf weiss, Fund 14.10.2026) */
.ws-akte-box .ws-akte { color: var(--pb-tinte); cursor: default; }
@media (max-width: 760px) {
  .ws-bild figcaption { flex-wrap: wrap; row-gap: 4px; }
  .ws-bild-aktionen { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .bf-inhalt { grid-template-columns: 1fr; padding: var(--pb-2); gap: var(--pb-2); }
  .bf-kopf { padding: 12px var(--pb-2); }
}

/* ---- Chat */
.ws-chat[hidden] { display: none; }
.ws-chat { min-width: 0; min-height: 0; overflow: hidden; background: var(--pb-grau-1); display: grid; grid-template-rows: auto 1fr auto; border-left: var(--pb-rahmen) solid var(--pb-grau-2); }
.ws-chat > * { opacity: 0; transform: translateX(32px); transition: opacity .6s var(--ws-ease) .35s, transform .7s var(--ws-ease) .3s; }
.ws.mit-chat .ws-chat > * { opacity: 1; transform: none; }
.ws-chat-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: var(--pb-3) var(--pb-3) var(--pb-1); border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.h-chat { font-size: var(--pb-zwischentitel); font-weight: var(--pb-medium); }
.ws-chat-verlauf { overflow-y: auto; padding: var(--pb-1) var(--pb-3); display: flex; flex-direction: column; gap: 10px; }
.ws-msg { max-width: 88%; padding: 10px 12px; background: var(--pb-papier); animation: ws-msg-rein .4s var(--ws-ease) both; }
.ws-msg.user { align-self: flex-end; background: var(--pb-tinte); color: var(--pb-papier); }
.ws-msg.wartet { opacity: .6; }
.ws-msg-aktionen { display: flex; gap: 8px; margin-top: 10px; }
.knopf.klein { height: 32px; padding: 0 12px; font-size: var(--pb-bezeichnung); }
.ws-msg.tippt { display: flex; gap: 4px; padding: 14px 12px; }
.ws-msg.tippt span { width: 6px; height: 6px; background: var(--pb-grau-3); animation: ws-puls 1s infinite; }
.ws-msg.tippt span:nth-child(2) { animation-delay: .2s; } .ws-msg.tippt span:nth-child(3) { animation-delay: .4s; }
@keyframes ws-msg-rein { from { opacity: 0; transform: translateY(8px); } }
.ws-chat-form { padding: var(--pb-2) var(--pb-3) var(--pb-3); display: grid; gap: 8px; }
.ws-bezug { display: flex; justify-content: space-between; gap: 8px; font-size: var(--pb-bezeichnung); border: var(--pb-rahmen) solid var(--pb-tinte); background: var(--pb-papier); padding: 4px 8px; }
.ws-chat-eingabe { display: flex; gap: 8px; align-items: flex-end; }
.ws-chat-eingabe textarea { flex: 1; resize: none; min-height: 48px; border: var(--pb-rahmen) solid var(--pb-grau-3); background: var(--pb-papier); font: inherit; padding: 12px; outline: 0; }
.ws-chat-eingabe textarea:focus { border-color: var(--pb-tinte); }
.ws-chat-eingabe .knopf { height: 48px; }

/* ---- Mobil (390 px): Fortschritt als Leiste oben, Chat als Blatt unten */
@media (max-width: 760px) {
  .ws-body { overflow: auto; height: auto; }
  .ws-kopf { padding: 0 var(--pb-2); gap: var(--pb-2); }
  .ws-kopf .marke img { width: 96px; height: 24px; }
  .ws-titel { padding-left: var(--pb-2); font-size: var(--pb-lauftext); }
  .ws-titel .leise { display: none; }          /* das Profilmenü (Konto, Abmelden) bleibt auf dem Telefon voll bedienbar */
  .ws, .ws.mit-chat { display: flex; flex-direction: column; height: calc(100vh - 57px); height: calc(100dvh - 57px); }
  .ws-fortschritt { border-right: 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); padding: 0; flex-shrink: 0; position: relative; }
  .ws-fortschritt-kopf { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 var(--pb-2); border: 0; background: none; font: inherit; font-weight: var(--pb-medium); cursor: pointer; }
  .ws-fortschritt-kopf::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--ws-p, 0%); background: var(--pb-tinte); }
  .ws-schritte { display: none; padding: 0 var(--pb-2) var(--pb-2); }
  .ws.fortschritt-offen .ws-schritte { display: grid; }
  .ws-stand { display: none; }
  .ws-mitte { flex: 1; min-height: 0; }
  .ws-mitte-text { padding: var(--pb-4) var(--pb-2) 120px; justify-content: flex-start; }
  .tf-frage { font-size: var(--pb-titel); line-height: var(--pb-titel-zeile); }
  .tf-frage.klein { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); }
  .tf-option { font-size: var(--pb-lauftext); min-height: 52px; }
  .tf-skizze { width: 200px; height: 200px; }
  .ws-zf-zeile { grid-template-columns: minmax(0, 1fr); gap: 2px; }      /* Bezeichnung über dem Wert: volle Breite für Werte */
  .ws-persp { padding: var(--pb-2); grid-template-rows: max-content max-content max-content; align-content: start; padding-bottom: 88px; }
  .ws-viewer-stage { grid-template-columns: 1fr; padding: 8px; }
  .ws-viewer-knopfe { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ws-viewer-knopfe .bez, .ws-viewer-knopfe .meta { display: none; }
  .ws-preset-spalte { display: flex; gap: 4px; }
  .ws-preset-reihe { display: flex; }
  .ws-preset.quadrat { width: 44px; min-height: 44px; }
  .ws-viewer { min-height: 0; aspect-ratio: 16 / 9; }
  .ws-persp { height: auto; }
  .ws-fixieren { position: static; width: 100%; }
  .ws-thumbs-zeile { flex-direction: column; align-items: stretch; }
  .ws-thumb, .ws-thumb img { width: 120px; } .ws-thumb img { height: 68px; } .ws-thumb.plus { height: 68px; }
  .ws-persp-fuss { justify-content: space-between; }
  .ws-moebel-liste { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ws-preset.ws-moebel-typ { flex-shrink: 0; height: 40px; min-height: 40px; white-space: nowrap; }
  .ws-moebel-aktionen .knopf { min-height: 40px; }
  .ws-bau { padding: var(--pb-2) var(--pb-2) 88px; }
  .ws-bau-stufen { gap: 4px; } .ws-bau-stufen li { font-size: var(--pb-bezeichnung); letter-spacing: .06em; }
  .ws-bilder { padding: var(--pb-2) var(--pb-2) 96px; }
  .ws-galerie { grid-template-columns: 1fr; gap: var(--pb-2); }
  .ws-chat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 64px; border-left: 0; border-top: var(--pb-rahmen) solid var(--pb-tinte);
    transform: translateY(100%); transition: height .5s var(--ws-ease), transform .6s var(--ws-ease); }
  .ws.mit-chat .ws-chat { transform: none; }
  .ws.chat-offen .ws-chat { height: 72vh; height: 72dvh; }
  .ws-chat-kopf { cursor: pointer; padding: 0 var(--pb-2); min-height: 64px; align-items: center; }
  .ws-chat-kopf::before { content: ""; position: absolute; top: 6px; left: 50%; width: 32px; height: 3px; margin-left: -16px; background: var(--pb-grau-2); }
  .ws-chat-verlauf, .ws-chat-form { padding-left: var(--pb-2); padding-right: var(--pb-2); }
  .ws:not(.chat-offen) .ws-chat-verlauf, .ws:not(.chat-offen) .ws-chat-form { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Alles still: Szenenwechsel, Einblendungen und die Endlos-Animationen (Puls, Ladelinie, Baustrich, Tipp-Punkte) */
  .ws, .ws-szene, .ws-chat > *, .ws-bild, .ws-msg, .ws-lightbox, .bf-dialog, .knopf, .tf-option, .ws-balken span, .ws-warten-balken span,
  .ws-bau-balken span, .ws-schritte li, .ws-schritte .punkt { transition: none !important; animation: none !important; }
  .ws-schritte li.current .punkt::after, .ws-laden-linie::after, .ws-bau-stufen li.current .ws-bau-strich, .ws-msg.tippt span { animation: none !important; }
  .ws-laden-linie::after { left: 30%; }
  .ws-bau-stufen li.current .ws-bau-strich { background: var(--pb-tinte); }
}
.ws-body > main { padding: 0 !important; margin: 0 !important; }
.tf .tf-zeile input { border: 0 !important; border-radius: 0; box-shadow: none; height: auto; background: transparent; }
/* Arbeitsfläche: Knöpfe, die nicht die eine Haupthandlung sind (globale button-Regel = gefülltes Feld) */
.ws-preset, .ws-thumb.plus, .tf-option, .ws-chat-kopf, .ws-fortschritt-kopf, .ws-bild-flaeche {
  color: var(--pb-tinte); min-width: 0; letter-spacing: normal; line-height: inherit; white-space: normal; }
.ws-preset { justify-content: flex-start; height: 32px; background: var(--pb-papier); box-shadow: inset 0 0 0 1px var(--pb-tinte); border: 0; font-size: var(--pb-bezeichnung); }
.ws-preset.quadrat { justify-content: center; }
.ws-preset:hover, .ws-thumb.plus:hover, .tf-option:hover { background: var(--pb-grau-1); }
.ws-preset.aktiv, .ws-preset.aktiv:hover, .tf-option.gewaehlt, .tf-option.gewaehlt:hover { background: var(--pb-tinte); color: var(--pb-papier); }
.ws-thumb.plus { justify-content: center; width: 160px; background: var(--pb-papier); box-shadow: inset 0 0 0 1px var(--pb-tinte); border: 0; }
.tf-option { height: auto; border: 0; box-shadow: inset 0 0 0 1px var(--pb-tinte); }
.ws-chat-kopf, .ws-chat-kopf:hover, .ws-fortschritt-kopf, .ws-fortschritt-kopf:hover { background: none; }
.ws-bild-flaeche, .ws-bild-flaeche:hover { height: auto; background: var(--pb-grau-1); border: 0; box-shadow: inset 0 0 0 1px var(--pb-grau-2); }
.ws-preset-reihe .ws-preset { padding: 0; }
.ws-mitte-text { justify-content: safe center; }
.tf-frage.lang { font-size: var(--pb-titel); line-height: var(--pb-titel-zeile); max-width: 30em; }
/* Frage mit Skizze (Drehung): breit rechts neben der ganzen Frage, bis 1180 px eine Spalte, Skizze unter dem Hilfetext */
.tf.mit-skizze { max-width: calc(760px + 280px + var(--pb-4)); grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--pb-4); }
.tf.mit-skizze > * { grid-column: 1; }
.tf.mit-skizze > .tf-skizze { grid-column: 2; grid-row: 1 / span var(--zeilen, 4); align-self: start; }
@media (max-width: 1180px) {
  .tf.mit-skizze { grid-template-columns: minmax(0, 1fr); }
  .tf.mit-skizze > .tf-skizze { grid-column: 1; grid-row: auto; }
}
.ws-persp, .ws-bau, .ws-bilder { grid-template-columns: minmax(0, 1fr); }
.ws-viewer, .ws-viewer-stage, .ws-bau-bild { min-width: 0; }
.ws-viewer canvas, .ws-bau-bild canvas { max-width: 100%; }
.ws-bezug[hidden] { display: none; }
.ws-bau-kopf, .ws-bau-stufen { min-width: 0; }
.ws [hidden], .ws-lightbox [hidden] { display: none !important; }
.ws-bild.platzhalter .ws-bild-flaeche { cursor: default; display: grid; place-items: center; }
.ws-bild.platzhalter .ws-laden-linie { width: 120px; }
.ws-msg p { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .tf-frage.lang { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); }
}
.ws-bild-leer { display: flex; align-items: center; justify-content: center; padding: var(--pb-3); text-align: center; color: var(--pb-grau-3); aspect-ratio: 16 / 9; }

/* Admin: Freigabe (Sperre 5) */
.fg-seitenkopf { padding-top: var(--pb-4); padding-bottom: var(--pb-3); }   /* kompakt: Bilder und Knöpfe über der Falz */
.fg-bild { border-bottom: var(--pb-rahmen) solid var(--pb-tinte); padding: var(--pb-2) 0 0; }
.fg-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-bottom: var(--pb-2); }
.fg-kopf .drei-status { display: contents; }
.fg-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fg-bilder figure { margin: 0; position: relative; min-width: 0; }      /* ohne Standard-Rand (40 px) der figure */
.fg-bilder figure > .marke-t { position: absolute; left: var(--pb-1); top: var(--pb-1); }   /* Feld oben links auf dem Bild */
.fg-bilder img { width: 100%; height: auto; max-height: max(240px, calc(100vh - 440px)); object-fit: contain; display: block; border: var(--pb-rahmen) solid var(--pb-tinte); background: var(--pb-grau-1); }
.fg-text { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.fg-urteil { margin-top: var(--pb-2); }
.fg-details { margin-top: var(--pb-2); border-top: var(--pb-rahmen) solid var(--pb-grau-2); }
.fg-details > summary { cursor: pointer; padding: var(--pb-1) 0; font-size: var(--pb-bezeichnung); line-height: var(--pb-bezeichnung-zeile);
  text-transform: uppercase; letter-spacing: var(--pb-sperrung-bez); }
.fg-liste { margin: 4px 0 12px 18px; padding: 0; font-size: var(--pb-lauftext); line-height: 1.45; }
.fg-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pb-1) var(--pb-2); margin-top: var(--pb-2); padding: var(--pb-2) 0;
  position: sticky; bottom: 0; z-index: 2; background: var(--pb-papier); border-top: var(--pb-rahmen) solid var(--pb-tinte); }
.fg-aktionen form { display: flex; flex-wrap: wrap; gap: var(--pb-1); min-width: 0; }
.fg-aktionen input { min-width: 0; flex: 1 1 200px; }
.fg-ohne-pruefer { flex: 1 1 280px; margin: 0; display: flex; gap: var(--pb-1); align-items: baseline; }
@media (max-width: 760px) { .fg-aktionen { position: static; } }    /* Telefon: drei Zeilen Knöpfe würden die Bilder ganz verdecken */
@media (max-width: 760px) { .fg-bilder, .fg-text { grid-template-columns: 1fr; } }
/* Arbeitsfläche: Projektakte im Bestätigungsschritt */
.ws-akte { border-top: var(--pb-rahmen) solid var(--pb-tinte); margin: var(--pb-2) 0; padding-top: var(--pb-1); }
/* Prüfen: Häkchen und «Bilder machen lassen» bleiben unten sichtbar, die Akte läuft mit der Szene (kein zweiter Scrollbalken) */
.ws-pruefen-fuss { position: sticky; bottom: 0; z-index: 2; display: grid; gap: var(--pb-1); background: var(--pb-papier);
  border-top: var(--pb-rahmen) solid var(--pb-tinte); padding: var(--pb-2) 0; }
.ws-pruefen-fuss .ws-kamera-ok { margin: 0; }
/* Die Szene selbst scrollt und hat unten Innenabstand: Chrome hält «sticky» um diesen Abstand vom Rand weg. Darum hier ohne. */
.ws-mitte-text.ws-pruefen { padding-bottom: 0; }
.ws-pruefen > .tf { padding-bottom: var(--pb-3); }
@media (max-width: 760px) {      /* Telefon: Häkchen, Knopf und «Kameras ändern» knapp, damit die Akte Platz behält */
  .ws-pruefen-fuss { padding: var(--pb-1) 0; }
  .ws-pruefen-fuss .knopf.gross { font-size: var(--pb-lauftext); height: var(--pb-feld-h); min-height: var(--pb-feld-h); padding: 0 var(--pb-2); }
}
.ws-pruefen-fuss > p:empty { display: none; }
.ws-zf-zeile dd { white-space: pre-line; }
.ws-akte h2 { font-size: var(--pb-lauftext); font-weight: 500; margin: 16px 0 4px; }
.ws-akte .ws-zf-zeile dd { font-size: var(--pb-lauftext); }
/* Arbeitsfläche: echter Auftragsstand (Unterbruch/Fehler) über jeder Phase, mit «Erneut starten» */
.ws-statusband { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; padding: 10px 14px;
  border: var(--pb-rahmen) solid var(--pb-tinte); background: var(--pb-grau-1); }
.ws-statusband p { margin: 0; flex: 1 1 320px; }
/* Fortschritt der langen lokalen Arbeiten (VAL-UI-002): Phasentext, Schritt x von y, Balken, Restzeit, «seit N s».
   Das «seit N s» zählt im Browser weiter – kein Ladekreis bleibt länger als 10 s unverändert stehen.
   Eigene Klasse: «.ws-fortschritt» ist die linke Fortschrittsspalte; das Band darf deren Regeln (Rahmen, Rollbereich)
   nicht erben (sonst verlangt axe Tastaturzugang für einen Scrollbereich, Befund B-ui-polish-04). */
.ws-lauf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--pb-2);
  max-height: none; overflow: visible; }
.ws-lauf .ws-fb-text { grid-column: 1 / -1; }
.ws-lauf .ws-fb-balken { height: 2px; background: var(--pb-grau-2); }
.ws-lauf .ws-fb-balken span { display: block; height: 2px; background: var(--pb-tinte); transition: width .8s var(--pb-kurve); }
.ws-lauf .ws-fb-rest { white-space: nowrap; }
@media (max-width: 760px) { .ws-lauf { grid-template-columns: minmax(0, 1fr); } .ws-lauf .ws-fb-rest { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .ws-lauf .ws-fb-balken span { transition: none; } }
.ws-btn-wartet { margin: var(--pb-1) 0 0; }
.ws-statusband.fehler { background: var(--pb-papier); }
.ws-statusband.fehler::before, .tf-error::before { content: "Fehler"; display: inline-flex; align-items: center; height: var(--pb-feld-h-klein); padding: 0 var(--pb-1);
  background: var(--pb-tinte); color: var(--pb-papier); font-size: var(--pb-bezeichnung); font-weight: var(--pb-medium); letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; flex: none; }

/* ================================================================== E2E 13.10.2026: Kopf, Verwaltung, Unterlagen, Kameras
 * Navigation oben rechts nur noch als Profilmenü (Konto/Abmelden, Admin: Verwaltung); Logo = zurück zu den Projekten.
 * Verwaltung (Anfragen, Freigabe, Lektionen, Integrationen, Projekte/Ablauf) unter /admin mit eigener Leiste. */
.profilmenue { position: relative; margin-left: auto; }
.profilmenue > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; min-height: 44px; min-width: 44px; padding: 0 4px; }
.profilmenue > summary::-webkit-details-marker { display: none; }
.profil-kreis { width: 32px; height: 32px; display: inline-grid; place-items: center; border: var(--pb-rahmen) solid var(--pb-tinte); font-weight: var(--pb-medium); font-size: var(--pb-bezeichnung); }
.profil-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: var(--pb-normal); color: var(--pb-grau-3); }
.profil-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 220px; background: var(--pb-papier); border: var(--pb-rahmen) solid var(--pb-tinte);
  display: grid; padding: 8px 0; text-transform: none; letter-spacing: 0; font-weight: var(--pb-normal); font-size: var(--pb-lauftext); }
.profil-liste > a, .profil-liste button.link { display: block; text-align: left; padding: 8px 16px; text-decoration: none; width: 100%; font-size: var(--pb-lauftext); text-transform: none; letter-spacing: 0; }
.profil-liste > a:hover, .profil-liste button.link:hover { background: var(--pb-grau-1); }
.profil-liste form { margin: 0; }
.profil-wer { padding: 4px 16px 8px; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); margin-bottom: 4px; font-size: var(--pb-bezeichnung); overflow-wrap: anywhere; }
.admin-nav { border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); background: var(--pb-grau-1); }
.admin-nav .rahmen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 44px; }
.admin-nav a { text-decoration: none; padding: 0 8px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 760px) {      /* eine Zeile, seitlich verschiebbar, statt zwei Zeilen mit 32-px-Feldern */
  .admin-nav .rahmen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .admin-nav .rahmen > .bez { display: none; }
}
.admin-nav a.aktiv { box-shadow: inset 0 0 0 1px var(--pb-tinte); }
.tab-scroll { overflow-x: auto; }
.admin-projekte td { padding: 8px 12px 8px 0; }
.admin-projekte td.email { overflow-wrap: anywhere; }
@media (max-width: 760px) {      /* Telefon: jede Zeile eine Karte statt 7 Spalten, die überlaufen */
  .admin-projekte thead { display: none; }
  .admin-projekte, .admin-projekte tbody { display: block; }
  .admin-projekte tr { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--pb-2); padding: 12px 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
  .admin-projekte td { display: block; grid-column: 2; padding: 2px 0; border: 0; }
  .admin-projekte td.nr { grid-column: 1; grid-row: 1 / span 6; }
  .admin-projekte td[data-k]::before { content: attr(data-k) " "; color: var(--pb-grau-3); font-size: var(--pb-bezeichnung); font-weight: var(--pb-medium);
    letter-spacing: var(--pb-sperrung-bez); text-transform: uppercase; margin-right: 4px; }
}
.tab-kennzahlen td:first-child { white-space: nowrap; }     /* «2026-10» nicht trennen */
.ws-ablauf-link { display: block; margin-top: var(--pb-3); }
.ws-fortschritt { overflow-y: auto; }

/* Unterlagen: Status je Datei, Ordner aufklappbar (bleibt offen, auch wenn der Stand neu geladen wird) */
.ws-ul-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: var(--pb-2) 0; }
.ws-ul-zahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--pb-bezeichnung); }
.ws-ul-zahlen span b { font-weight: var(--pb-medium); }
.ws-ul-zahlen .ws-ul-satz { font-size: var(--pb-lauftext); line-height: var(--pb-lauftext-zeile); }
.ws-ul-ordner { border-top: var(--pb-rahmen) solid var(--pb-grau-2); }
.ws-ul-ordner > summary { cursor: pointer; padding: 10px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.ws-ul-ordner > summary > :first-child { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.ws-ul-ordner > summary .meta { white-space: nowrap; }
.ws-dateien li { align-items: baseline; flex-wrap: wrap; }
.ws-dateien li .dn { min-width: 0; overflow-wrap: anywhere; flex: 1 1 260px; }
.ws-dateien li .ds { flex: 0 1 auto; text-align: right; font-size: var(--pb-bezeichnung); }
.ul-st { display: inline-block; padding: 1px 6px; border: var(--pb-rahmen) solid var(--pb-grau-2); font-size: var(--pb-bezeichnung); white-space: nowrap; }
.ul-st.verwendet { border-color: var(--pb-tinte); background: var(--pb-tinte); color: var(--pb-papier); }
.ul-st.gelesen { border-color: var(--pb-tinte); }
.ul-st.fehler { border-color: var(--pb-tinte); color: var(--pb-tinte); font-weight: var(--pb-medium);
  background: repeating-linear-gradient(45deg, var(--pb-grau-2) 0 1px, var(--pb-papier) 1px 4px); }   /* Schraffur wie im Fortschritt */
.ul-st.wird_gelesen { border-style: dashed; }
.ul-detail { display: block; color: var(--pb-grau-3); font-size: var(--pb-bezeichnung); overflow-wrap: anywhere; }

/* Widersprüche nebeneinander, Kameras zur Bestätigung */
.ws-konflikt { border: var(--pb-rahmen) solid var(--pb-tinte); padding: 12px; margin: 12px 0; }
.ws-konflikt-quellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.ws-konflikt-quellen > div { border-left: 2px solid var(--pb-grau-2); padding-left: 8px; font-size: var(--pb-lauftext); overflow-wrap: anywhere; }
.ws-kameras { width: 100%; border-collapse: collapse; font-size: var(--pb-lauftext); }
.ws-kameras th, .ws-kameras td { text-align: left; vertical-align: top; padding: 6px 8px 6px 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); }
.ws-kameras td { overflow-wrap: anywhere; }
.ws-kameras td select { min-width: 9ch; }
.ws-kamera-ok { display: flex; gap: 12px; align-items: center; min-height: 44px; margin: 12px 0; cursor: pointer; }
.ws-zf-zeile dd .quelle { display: block; font-size: var(--pb-bezeichnung); color: var(--pb-grau-3); }

/* Kleinere Fenster: nichts abschneiden */
@media (max-width: 1180px) and (min-width: 761px) {
  .ws { grid-template-columns: 188px minmax(0, 1fr) 0px; }
  .ws.mit-chat.chat-offen { grid-template-columns: 188px minmax(0, 1fr) 300px; }
  .ws-fortschritt { padding: var(--pb-3) var(--pb-2); }
  .ws-mitte-text { padding: var(--pb-5) var(--ws-seite); }
}
@media (max-height: 640px) and (min-width: 761px) { .ws-body { overflow: auto; height: auto; } .ws { min-height: 560px; } }
@media (max-width: 760px) {
  .profil-name { display: none; }
  .ws-nav { display: flex !important; }
  .ws-kameras thead { display: none; }
  .ws-kameras tr { display: grid; grid-template-columns: 1fr; border-bottom: var(--pb-rahmen) solid var(--pb-grau-2); padding: 6px 0; }
  .ws-kameras td { border: 0; padding: 2px 0; }
}

/* Ihr Standort (Standort-Skizze, 13.10.2026): erste Karte der Arbeitsfläche */
.ws-standort { max-width: 760px; margin: 0 0 var(--pb-6); padding: var(--pb-3); border: var(--pb-rahmen) solid var(--pb-tinte); background: var(--pb-papier); transition: opacity .2s; }
.ws-standort[hidden] { display: none; }
.ws-standort.sendet { opacity: .55; pointer-events: none; }
.ws-standort.laeuft, .ws-standort.ruhig { border-color: var(--pb-grau-2); }
.ws-standort .tf-nr { margin: 0 0 var(--pb-1); }
.ws-standort-frage { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); margin: 0; }
.ws-standort-adr { font-size: var(--pb-lauftext); font-weight: var(--pb-medium); margin: var(--pb-1) 0 0; }
.ws-standort.gross { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: var(--pb-4); align-items: start; }
.ws-standort-text { position: sticky; top: var(--pb-2); }
.ws-standort-hilfe { margin: var(--pb-2) 0; color: var(--pb-grau-4); }
.ws-standort-skizze { border: var(--pb-rahmen) solid var(--pb-grau-2); line-height: 0; }
.ws-standort-skizze svg { display: block; width: 100%; height: auto; max-height: 78vh; }
@media (max-width: 900px) { .ws-standort.gross { grid-template-columns: 1fr; } .ws-standort-text { position: static; order: -1; } }
.ws-standort-skizze.pin { cursor: crosshair; outline: 2px solid var(--pb-tinte); }
.ws-standort-knoepfe { display: flex; gap: var(--pb-2); align-items: center; flex-wrap: wrap; margin-top: var(--pb-2); }
.ws-standort-suche { display: grid; gap: var(--pb-1); margin-top: var(--pb-2); }
.ws-standort-suche input { height: 44px; border: var(--pb-rahmen) solid var(--pb-tinte); padding: 0 12px; font: inherit; }
.ws-standort-treffer { list-style: none; margin: 0; padding: 0; }
.ws-standort-treffer li { padding: 6px 0; border-bottom: var(--pb-rahmen) solid var(--pb-grau-1); }

/* Unterlagen: Grund bei «nicht lesbar»/«offen», i-Hinweis, Filter (14.10.2026) */
.ul-grund { display: block; font-size: var(--pb-bezeichnung); color: var(--pb-tinte); margin-top: 2px; }
li.ul-empfangen .ul-grund, li.ul-wird_gelesen .ul-grund { color: var(--pb-grau-4); }
.ws-dateien li .ds { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ul-info { position: relative; display: inline-flex; }
button.ul-i { min-width: 0; flex: 0 0 22px; box-shadow: none; }
.ul-i { width: 22px; height: 22px; border: var(--pb-rahmen) solid var(--pb-tinte); background: var(--pb-papier); color: var(--pb-tinte);
  font: italic var(--pb-medium) var(--pb-bezeichnung)/1 var(--pb-schrift); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }
button.ul-i:hover, .ul-i:focus-visible, .ul-info.offen .ul-i { background: var(--pb-tinte); color: var(--pb-papier); outline: none; }
.ul-tipp { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(320px, 80vw); text-align: left;
  background: var(--pb-tinte); color: var(--pb-papier); padding: 10px 12px; font-size: var(--pb-bezeichnung); line-height: 1.45; }
.ul-tipp b { display: block; font-weight: var(--pb-medium); margin-bottom: 2px; }
.ul-tipp span { display: block; }
.ul-tipp .ul-tech { margin-top: 6px; opacity: .7; font-size: var(--pb-bezeichnung); overflow-wrap: anywhere; }
@media (hover: hover) { .ul-info:hover .ul-tipp { display: block; } }
.ul-info:focus-within .ul-tipp, .ul-info.offen .ul-tipp { display: block; }
button.ul-zahl { height: auto; min-width: 0; box-shadow: none; display: inline; line-height: inherit; font-weight: var(--pb-normal); }
button.ul-zahl:hover { background: none; color: var(--pb-grau-4); }
button.ul-zahl.aktiv:hover { background: var(--pb-tinte); color: var(--pb-papier); }
.ul-zahl { font: inherit; font-size: var(--pb-bezeichnung); background: none; border: 0; border-bottom: var(--pb-rahmen) solid var(--pb-tinte); padding: 0 0 1px; cursor: pointer; color: var(--pb-tinte); }
.ul-zahl b { font-weight: var(--pb-medium); }
.ul-zahl.aktiv { background: var(--pb-tinte); color: var(--pb-papier); padding: 0 6px 1px; }
.ws-ul-filter { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: var(--pb-rahmen) solid var(--pb-tinte); font-size: var(--pb-lauftext); }
@media (max-width: 760px) { .ul-tipp { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; box-shadow: 0 0 0 1px var(--pb-papier); } }

/* Lage-Karte (14.10.2026): Umriss ziehen/drehen, Karte zoomen; Touch ohne Seiten-Scroll */
.ws-standort-skizze.lage { cursor: grab; outline: 2px solid var(--pb-tinte); overflow: hidden; }
.ws-standort-skizze.lage svg { touch-action: none; user-select: none; -webkit-user-select: none; aspect-ratio: 1 / 1; max-height: 78vh; }
.ws-standort-skizze.lage .lage-umriss { cursor: move; }
.ws-standort-skizze.lage .lage-griff { cursor: grab; }
.ws-lage-werkzeug { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 .4rem; }
.ws-lage-werkzeug .knopf.klein { min-width: 2.75rem; min-height: 2.75rem; }
@media (max-width: 900px) { .ws-standort.lage-modus .ws-standort-text { order: 1; } }   /* Lage-Karte: Karte oben */

/* Audit regression fixes: shared modal and resilient caption controls. */
dialog.ws-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; box-sizing: border-box; }
dialog.ws-lightbox:not([open]) { display: none; }
dialog.ws-lightbox::backdrop { background: rgba(20,20,20,.94); }
.ws-lightbox .modal-close { position: absolute; top: var(--pb-2); right: var(--pb-2); background: transparent; color: var(--pb-papier); box-shadow: inset 0 0 0 1px var(--pb-papier); }
.ws-lightbox .modal-close:hover { background: var(--pb-grau-4); }
.ws-bild-aktionen > button { flex: 0 0 auto; white-space: nowrap; }
.tf-error { color: var(--pb-tinte); margin: var(--pb-1) 0; display: flex; gap: var(--pb-1); align-items: baseline; flex-wrap: wrap; }
.tf-error:empty { display: none; }           /* leeres Fehlerfeld zeigte sonst immer das Feld «Fehler» */
.tf-error:focus { outline: none; box-shadow: none; }
.ws-szene[data-raus] { pointer-events: none; }
/* Readable scene names and real status take their own space at every viewport. */
.ws-preset { height: auto; min-height: 36px; line-height: 1.35; padding: 8px; white-space: normal; overflow-wrap: anywhere; }
.ws-preset.quadrat { min-height: 36px; padding: 4px; }
.ws-preset-spalte { min-width: 0; }
.ws-bau { grid-template-rows: auto auto minmax(140px, 1fr) auto auto auto; }
@media (max-width: 760px) {
  .ws-preset-spalte { flex-wrap: wrap; }
  .ws-preset-spalte .ws-preset { max-width: 160px; }
  .ws-bau { min-height: 520px; }
}
.ws-pausiert .ws-bau-stufen li.current .ws-bau-strich { animation: none; }
/* wie details.mehr: «+»/«−» als Marker, 16 px (vorher 12 px grau ohne Marker) */
.ws-bild-pruefung { margin-top: var(--pb-1); padding-top: var(--pb-1); border-top: var(--pb-rahmen) solid var(--pb-grau-2); color: var(--pb-grau-3); }
.ws-bild-pruefung summary { cursor: pointer; min-height: 24px; list-style: none; }
.ws-bild-pruefung summary::-webkit-details-marker { display: none; }
.ws-bild-pruefung summary::before { content: "+"; display: inline-block; width: 1em; }
.ws-bild-pruefung[open] summary::before { content: "−"; }
.ws-bild-pruefung summary:hover { color: var(--pb-tinte); }
.ws-bild-pruefung p { margin: 4px 0; }

.ws-thumb img { object-fit: contain; background: var(--pb-grau-1); }
.ws-msg-zeit { display: block; margin-bottom: 6px; font-size: var(--pb-bezeichnung); opacity: .65; }

/* ================================================================== Design Runde 2 (QA 16.10.2026): Dialoge, Fokus, Tippflächen */
/* Statuszeile für Screenreader (Meilensteine); die Bühne selbst ist keine Live-Region mehr */
.ws-ansage { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Fokus beim Szenenwechsel liegt auf der Überschrift (tabindex=-1): kein Rahmen um den Titel */
.ws-szene [tabindex="-1"]:focus, .ws-blatt [tabindex="-1"]:focus { outline: none; box-shadow: none; }
/* Typeform-Eingabe: Fokus als 2-px-Linie (vorher nur der Cursor) */
.tf-zeile:focus-within { box-shadow: 0 1px 0 var(--pb-tinte); }
.ws-antwort-felder { display: inline-flex; gap: var(--pb-1); }
select[multiple] { height: auto; padding: var(--pb-1); background-image: none; }       /* Mehrauswahl: alle Zeilen zeigen */
.ws-thumbs-wrap { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1 1 auto; }
.ws-thumbs-wrap .ws-thumbs { min-width: 0; }
.ws-thumbs-wrap .ws-thumb.plus { flex: 0 0 auto; }                                         /* «+ Kamera» nie abgeschnitten */
.ws-antwort-felder input { width: 96px; }

/* Blatt im Dialog (Antworten, Akte, Umbenennen, Rückfrage): Papier, Tinte, keine Inline-Styles mehr */
.ws-frage-box, .ws-akte-box { cursor: default; }
.ws-blatt { background: var(--pb-papier); color: var(--pb-tinte); cursor: default; text-align: left; display: grid; gap: var(--pb-2);
  width: min(760px, 100%); max-height: 80vh; max-height: 80dvh; overflow: auto; padding: var(--pb-3); margin: 0; border: 0; }
.ws-blatt-klein { width: min(480px, 100%); }
.ws-blatt-titel { font-size: var(--pb-zwischentitel); line-height: var(--pb-zwischentitel-zeile); font-weight: var(--pb-medium); }
.ws-blatt .feld { margin: 0; }
.ws-blatt-knoepfe { display: flex; flex-wrap: wrap; gap: var(--pb-1); }
.ws-blatt :focus-visible { outline-color: var(--pb-tinte); box-shadow: 0 0 0 2px var(--pb-papier); }
.ws-akte.ws-blatt { max-height: 80vh; max-height: 80dvh; border-top: 0; }
.ws-akte.ws-blatt h2.ws-blatt-titel { margin: 0; font-size: var(--pb-zwischentitel); }
/* «Kamera ändern» nach dem Start (B-e2e-pps-09): Viewer im Blatt, darunter Format und Brennweite */
.ws-kamera-box { cursor: default; }
.ws-kamera.ws-blatt { width: min(1100px, 100%); max-height: 94vh; max-height: 94dvh; }
.ws-kamera .ws-viewer { height: min(58vh, 560px); height: min(58dvh, 560px); background: var(--pb-grau-1); }
.ws-kamera-werte { display: flex; flex-wrap: wrap; gap: var(--pb-2) var(--pb-3); align-items: end; }
.ws-kamera-werte select { font: inherit; height: var(--pb-feld-h); padding: 0 12px; border: var(--pb-rahmen) solid var(--pb-tinte); border-radius: 0; background: var(--pb-papier); }
.ws-kamera-lens { display: flex; align-items: center; gap: var(--pb-1); }
.ws-kamera-lens input[type=range] { width: min(260px, 50vw); accent-color: var(--pb-tinte); }
.ws-kamera-lens input[type=number] { font: inherit; width: 76px; height: var(--pb-feld-h); padding: 0 8px; border: var(--pb-rahmen) solid var(--pb-tinte); border-radius: 0; }
@media (max-width: 760px) { .ws-kamera.ws-blatt { padding: var(--pb-2); } .ws-kamera .ws-viewer { height: auto; aspect-ratio: 16 / 9; } }

/* «Stelle zeigen» als echter modaler <dialog> */
dialog.bf-dialog { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; }
dialog.bf-dialog:not([open]) { display: none; }
dialog.bf-dialog::backdrop { background: var(--pb-papier); }
.bf-kopf h2 { margin: 0; }

/* Perspektiven: Vorschaubild = Knopf, Umbenennen/Löschen als eigene Felder (vorher 7 × 16 px) */
figure.ws-thumb { cursor: default; }
.ws-thumb-bild { display: block; width: 100%; padding: 0; cursor: pointer; }
.ws-thumb-knopf { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; box-shadow: inset 0 0 0 1px var(--pb-grau-2);
  font-size: var(--pb-lauftext); line-height: 1; }
.ws-thumb-knopf:hover { box-shadow: inset 0 0 0 1px var(--pb-tinte); background: var(--pb-grau-1); }
.ws-viewer-fehler { display: grid; gap: var(--pb-2); justify-items: start; padding: var(--pb-3); max-width: 480px; }

/* Bau-Stufen auf dem Telefon: Wörter brechen statt seitlich zu laufen */
@media (max-width: 760px) {
  .ws-bau-stufen { gap: var(--pb-1); }
  .ws-fortschritt .ws-ablauf-link { margin: 0; padding: var(--pb-1) var(--pb-2); }
  .ws-mitte-text { justify-content: flex-start; }      /* Telefon: oben beginnen, kein Leerraum über dem Titel */
}

/* Touch: jede Tippfläche mindestens 44 × 44 px (das Zeichen darf klein bleiben) */
@media (pointer: coarse) {
  .ws-preset, .ws-preset.quadrat, .ws-preset.ws-moebel-typ { min-height: 44px; }
  .ws-preset.quadrat { min-width: 44px; }
  .ws-preset-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* N O / S W: 2 × 2 statt überlappend in 112 px */
  .tf-enter { display: none; }                                              /* keine Tastatur-Hilfe auf dem Telefon */
  .ws-schritte li { height: auto; min-height: 44px; }
  .profil-liste > a, .profil-liste button.link { min-height: 44px; display: flex; align-items: center; }
  .ws button.link, .ws-nav button.link, .bf-dialog button.link, .ws-bild-aktionen > a { min-height: 44px; display: inline-flex; align-items: center; }
  .ws-bezug button.link { min-width: 44px; justify-content: center; text-decoration: none; }
  button.ul-zahl, button.ul-zahl.aktiv { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; border-bottom: 0;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }   /* Linie am Text, nicht 44 px tiefer */
  button.ul-i { width: 44px; height: 44px; flex: 0 0 44px; margin: -11px; border: 11px solid transparent; background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--pb-tinte); }
  .ws-thumb-knopf { width: 44px; height: 44px; }
  .ws-thumb figcaption { flex-wrap: wrap; }
  .ws-thumb figcaption .ws-thumb-name { flex: 1 0 100%; }
  .ws-bild-pruefung summary { min-height: 44px; display: flex; align-items: center; }
}

/* Projektakte auf der Prüfseite: Nebensachen gesammelt hinter «Details» */
.ws-akte-details { border-top: var(--pb-rahmen) solid var(--pb-grau-2); margin-top: var(--pb-3); }
.ws-akte-details > summary { cursor: pointer; padding: 12px 0; }