/* Gemeinsames Design-System der Kameraplanung.
 *
 * Eine Datei für alle Seiten, damit Startseite, Erfassung, Planer und
 * Planausgabe wie ein Produkt wirken und nicht wie vier Werkzeuge. Farben,
 * Abstände und Bausteine stehen hier einmal; die Seiten bringen nur noch
 * ihr eigenes Layout mit.
 *
 * Gestalterische Linie: „Glas über Modell". Das 3D-Modell ist der Inhalt,
 * die Bedienung schwebt darüber statt es zuzudecken. Auf dem Schreibtisch
 * heißt das: heller, ruhiger Grund, schwebende Flächen mit weichen
 * Schatten statt harter Rahmen.
 *
 * Seit dem 14.09.2026 in der Richtung „A · Klar" (Entwurf mit dem Anwender
 * abgestimmt): helle Kopfleiste statt dunkler, Petrol als Akzent, IBM Plex
 * als Schrift, Symbole vor Schritten und Knöpfen, größere Tippflächen fürs
 * Tablet. Die Akzentfarbe ist ein Platzhalter bis zu den Markenfarben des
 * Anwenders — sie steht nur hier.
 */

/* Schrift: IBM Plex, selbst ausgeliefert statt von Google Fonts — kein Abruf
 * bei Dritten, auch nicht im WordPress-Modul (Lizenz: OFL, assets/fonts). */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

:root{
  /* Grundflächen */
  --ground:#e9eeec;
  --surface:#fff;
  --surface-2:#f4f7f6;
  --surface-3:#e6ecea;

  /* Text */
  --ink:#14201e;
  --ink-2:#5a6a66;
  --ink-3:#86958f;

  /* Linien: bewusst sehr zurückhaltend — Flächen trennen über Schatten */
  --line:#d5deda;
  --line-2:#c1ccc8;

  /* Akzent: Petrol — Platzhalter bis zur Markenfarbe */
  --accent:#0b6e7f;
  --accent-ink:#085866;
  --accent-soft:#dcecee;

  /* Sichtkegel und Kameras im Bild */
  --sicht:#e89b2e;

  /* Tippflächen: 48 px für alles, was man am Tablet trifft */
  --ziel:48px;

  /* Zustände */
  --ok:#2f8a52;      --ok-soft:#e4f3ea;
  --warn:#a8720a;    --warn-soft:#fbf1dc;
  --red:#c4382a;     --red-soft:#fbe9e6;

  /* Dunkle Flächen (Kopfleiste, Anzeigen über dem Modell) */
  --bar:#151d26;
  --bar-2:#1e2833;
  --bar-ink:#e8edf2;
  --bar-ink-2:#93a1b0;

  /* Glas */
  --glas:rgba(255,255,255,.9);
  --glas-rand:rgba(255,255,255,.7);
  --blur:blur(12px) saturate(1.3);

  /* Erhebung */
  --schatten-1:0 1px 2px rgba(20,32,30,.06), 0 2px 8px rgba(20,32,30,.05);
  --schatten-2:0 1px 2px rgba(20,32,30,.06), 0 6px 18px -10px rgba(20,32,30,.25);
  --schatten-3:0 10px 30px -12px rgba(20,32,30,.35), 0 0 0 1px rgba(20,32,30,.06);

  /* Maße */
  --r-s:8px; --r:12px; --r-l:14px; --r-xl:20px;
  --kopf-h:64px;

  --font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Arial,sans-serif;
  --mono:"IBM Plex Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
}

*{box-sizing:border-box}

/* `hidden` muss staerker sein als die Anzeigeart des Elements: die Vorgabe des
   Browsers ist nur `display:none` mit der Spezifitaet eines Elementselektors,
   und jede spaetere Regel mit display:flex oder display:block setzt das
   Attribut damit still ausser Kraft. Das Verstecken ist hier immer gewollt --
   die Seiten schalten Bereiche ueber .hidden = true, nicht ueber Klassen. */
[hidden]{display:none!important}

html,body{
  margin:0;height:100%;
  font-family:var(--font);font-size:14px;line-height:1.5;
  color:var(--ink);background:var(--ground);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ------------------------------------------------------------ Kopfleiste */

/* Hell seit dem 14.09.2026 (Richtung A): eine weiße Leiste mit feiner Linie,
   damit das Modell darunter der dunkelste, ruhigste Teil der Seite bleibt. */
.kopf{
  flex:0 0 auto;height:var(--kopf-h);display:flex;align-items:center;gap:14px;
  padding:0 18px;background:var(--surface);color:var(--ink);
  border-bottom:1px solid var(--line);position:relative;z-index:20;
}
.kopf .marke{display:flex;align-items:center;gap:10px;min-width:0}
/* Die Marke führt zur Startseite — dort liegen die Projekte. */
.kopf a.marke{
  text-decoration:none;color:inherit;border-radius:var(--r-s);
  padding:6px;margin-left:-6px;transition:background .12s;
}
.kopf a.marke:hover{background:var(--surface-2);text-decoration:none}
.kopf .marke img{height:22px;width:auto;display:block}
/* b oder h1 — Seiten ohne eigene Überschrift im Inhalt setzen hier ihr h1,
   damit das Dokument nicht nur aus h2-Abschnitten besteht. */
.kopf .marke b,.kopf .marke h1{font-size:15px;font-weight:600;white-space:nowrap}
/* Wortmarke „MB Tools" (seit 28.09.2026 fest, vorher Platzhalter „Ihr Logo").
   Als Schrift statt Bild: Es gibt noch keine Logodatei, und so bleibt sie in
   jeder Größe scharf. Das Kürzel sitzt in der Akzentfarbe, damit die Marke
   zum Rest der Oberfläche gehört. */
.logo{
  display:inline-flex;align-items:center;gap:6px;height:32px;white-space:nowrap;
  font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.logo-mb{
  display:grid;place-items:center;height:24px;padding:0 6px;border-radius:var(--r-s);
  background:var(--accent);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;
}
/* Der Weg (Luftbild, Grundriss, 3D-Modell) als leise Marke neben dem Logo —
   im Bild sieht man ihm nicht immer an, in welchem man steckt (core/kopf.js). */
.kopf .marke #kopfweg{
  font-size:11.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  padding:3px 9px;border-radius:99px;background:var(--surface-2);
}
@media (max-width:980px){ .kopf .marke #kopfweg{display:none} }

/* Projektname: gehört zum ganzen Stand, nicht zu einem Schritt — deshalb in
   der Leiste, die alle Arbeitsseiten teilen. */
.projektleiste{display:flex;align-items:center;gap:8px;min-width:0}
.projektfeld{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 12px;
  border-radius:var(--r-s);background:var(--surface-2);color:var(--ink-2);
}
/* Mit [type=text]: Die allgemeine Feldregel weiter unten hat sonst dieselbe
   Gewichtung, kommt später und setzt Rahmen und width:100% — das Feld schob
   dann die Schrittkette aus der Leiste (gemessen am 14.09.2026). */
.projektleiste input[type=text]{
  width:210px;padding:0;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink);background:transparent;border:none;border-radius:0;height:38px;
}
.projektleiste input[type=text]::placeholder{color:var(--ink-3);font-weight:500}
.projektleiste input[type=text]:focus{outline:none;box-shadow:none}
.projektfeld:focus-within{box-shadow:0 0 0 2px var(--accent)}
.projektleiste button{
  display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;
  font-size:12.5px;font-weight:600;color:var(--accent-ink);
  background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r-s) - 2px);box-shadow:none;
}
.projektleiste button:hover{border-color:var(--accent);box-shadow:none}
.projektleiste button .ic{width:16px;height:16px}
.projektleiste .meldung{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--ink-2);white-space:nowrap;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;
}
.projektleiste .meldung .ic{width:18px;height:18px;color:var(--ok)}
.projektleiste .meldung.fehler{color:var(--red)}
/* Eng wird es zuerst hier: die Schrittkette ist der Weg durch das Werkzeug und
   hat Vorrang vor dem Namensfeld. */
@media (max-width:1180px){ .projektleiste input[type=text]{width:150px} }
@media (max-width:1040px){ .projektleiste .meldung{display:none} }
@media (max-width:900px){ .projektleiste{display:none} }

/* Schrittnavigation: jeder Schritt mit Symbol, der aktuelle mit gefülltem
   Kreis. Kein Haken für „erledigt": Das Werkzeug weiß nicht verlässlich, ob
   ein Schritt fertig ist, und ein Haken wäre dann eine falsche Zusage. */
.schritte{display:flex;align-items:center;gap:2px;margin-left:auto}
.schritte a,.schritte button{
  display:flex;align-items:center;gap:7px;height:40px;padding:0 11px;
  font:inherit;font-size:13px;font-weight:500;
  color:var(--ink-2);background:transparent;border:none;border-radius:var(--r-s);
  cursor:pointer;white-space:nowrap;box-shadow:none;
}
.schritte a:hover,.schritte button:hover{color:var(--ink);background:var(--surface-2);text-decoration:none;box-shadow:none}
.schritte .aktiv,.schritte .aktiv:hover{color:var(--ink);font-weight:600;background:transparent}
/* „Start" steckt seit Richtung A im Logo links — ein zweiter Weg zur
   Startseite in der Kette wäre doppelt. */
.schritte a.start{display:none}
/* Die Ziffer bleibt im Markup (core/kopf.js zählt die sichtbaren Schritte),
   gezeigt wird das Symbol davor. */
.schritte .nr{display:none}
.schritte .sym{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2);flex:none;
}
.schritte .sym .ic{width:14px;height:14px;stroke-width:2}
.schritte .aktiv .sym{background:var(--accent);color:#fff}
/* Solange das Skript die Symbole noch nicht gesetzt hat, bleibt die Ziffer. */
.schritte a:not(:has(.sym)) .nr,.schritte button:not(:has(.sym)) .nr{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-size:11px;font-weight:600;background:var(--surface-2);
}
.schritte .aktiv:not(:has(.sym)) .nr{background:var(--accent);color:#fff}
/* Am Tablet nur noch Symbole, der aktuelle Schritt behält seinen Namen. */
@media (max-width:1280px){ .schritte .txt{display:none} .schritte .aktiv .txt{display:inline} .schritte a,.schritte button{padding:0 8px} }

/* Angemeldet als … (nur im WordPress-Modul) */
.konto{display:flex;align-items:center;gap:8px;margin-left:4px;color:var(--ink-2);text-decoration:none}
.konto:hover{text-decoration:none}
.konto .avatar{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--ink);font-size:12px;font-weight:600;
}
.konto:hover .avatar{box-shadow:0 0 0 2px var(--accent)}

/* Symbole (core/symbole.js) */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mit-symbol{display:flex;align-items:center;gap:8px}
.mit-symbol > .ic{color:var(--ink-2)}

/* ------------------------------------------------------------- Bausteine */

.karte{
  background:var(--surface);border-radius:var(--r-l);
  box-shadow:var(--schatten-1);padding:16px 18px;
}
.karte.hebt{box-shadow:var(--schatten-2)}

.gruppe{padding:16px 18px;border-bottom:1px solid var(--line)}
.gruppe:last-child{border-bottom:none}

h1{margin:0;font-size:22px;font-weight:680;letter-spacing:-.01em;line-height:1.25}
h2{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.09em;
   text-transform:uppercase;color:var(--ink-3)}
h3{margin:0 0 8px;font-size:15px;font-weight:650}
p{margin:0}

.leise{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.mini{font-size:11.5px;color:var(--ink-3)}

/* ------------------------------------------------------ Bedienelemente */

button,.knopf{
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  padding:9px 14px;cursor:pointer;
  transition:border-color .12s,background .12s,box-shadow .12s;
}
/* Nur Knöpfe mit Symbol richten sich als Zeile aus — Knöpfe mit mehrzeiligem
   Inhalt (Projektzeilen der Startseite) behalten ihre eigene Anordnung. */
button:has(> .ic),.knopf:has(> .ic){display:inline-flex;align-items:center;justify-content:center;gap:8px}
button:hover,.knopf:hover{border-color:var(--ink-3);box-shadow:var(--schatten-1)}
button:active,.knopf:active{transform:translateY(.5px)}
button[disabled]{opacity:.5;cursor:default;box-shadow:none}
button[disabled]:hover{border-color:var(--line)}
button .ic,.knopf .ic{width:18px;height:18px}

/* Hauptknopf: der häufigste Handgriff einer Fläche, in der Akzentfarbe */
button.haupt,a.knopf.haupt{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.haupt:hover,a.knopf.haupt:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
/* Links, die wie Knöpfe aussehen, tragen keinen Unterstrich. */
a.knopf,a.knopf:hover{text-decoration:none}
button.betont{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.betont:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
button.gefahr{color:var(--red);border-color:#e8c4be}
button.gefahr:hover{background:var(--red-soft);border-color:var(--red)}
button.schlicht{background:transparent;border-color:transparent}
button.schlicht:hover{background:var(--surface-2);border-color:transparent;box-shadow:none}
button.gross,.knopf.gross{min-height:var(--ziel);font-size:14px;padding:0 16px}

/* Umschalter aus wenigen Möglichkeiten (Außen/Innen, Von links/Von rechts) */
.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;border-radius:var(--r-s);background:var(--surface-2)}
.segment > button,.segment > label{
  min-height:40px;border:none;border-radius:calc(var(--r-s) - 3px);background:transparent;
  color:var(--ink-2);font-weight:500;box-shadow:none;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
}
.segment > button:hover,.segment > label:hover{background:rgba(255,255,255,.6);box-shadow:none}
.segment > .an,.segment > label:has(input:checked){background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.segment > label input{position:absolute;opacity:0;pointer-events:none}
.segment .ic{width:16px;height:16px}

/* −/+ Feld: Wert in der Mitte, am Tablet mit dem Finger zu treffen */
.stepper{
  display:grid;grid-template-columns:var(--ziel) 1fr var(--ziel);align-items:stretch;
  border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--surface);
}
.stepper > button{
  min-height:var(--ziel);border:none;border-radius:0;background:var(--surface-2);
  font-size:20px;font-weight:500;padding:0;box-shadow:none;
}
.stepper > button:hover{background:var(--surface-3);box-shadow:none}
.stepper > input,.stepper > output{
  border:none;border-radius:0;text-align:center;font-family:var(--mono);font-size:16px;font-weight:500;
  min-height:var(--ziel);padding:0 4px;background:var(--surface);display:grid;place-items:center;
}
.stepper > input:focus{box-shadow:inset 0 0 0 2px var(--accent)}

/* Wertekacheln: drei Kennwerte auf einen Blick */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kacheln > div{padding:8px 10px;border-radius:calc(var(--r-s) - 2px);background:var(--surface-2);display:grid;gap:2px;min-width:0}
.kacheln small{display:flex;align-items:center;gap:5px;color:var(--ink-2);font-size:11.5px}
.kacheln small .ic{width:14px;height:14px}
.kacheln b{font-family:var(--mono);font-size:15px;font-weight:500;white-space:nowrap}
.zahl-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* password seit dem 21.09.2026 dabei: Die Aufzählung entscheidet, welche Felder
   überhaupt gestaltet werden. Im Werkzeug gab es nie ein Passwortfeld, also
   fiel die Lücke nie auf — auf der Anmeldeseite rutschte das Feld auf die
   Standardbreite des Browsers (226 statt 326 px, inline-block statt block)
   und stand schmaler neben dem Feld darüber. */
input[type=text],input[type=search],input[type=number],input[type=password],select,textarea{
  font:inherit;font-size:13.5px;width:100%;padding:9px 11px;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-s);
  appearance:none;transition:border-color .12s,box-shadow .12s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a6773' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;
}
textarea{min-height:80px;line-height:1.5;resize:vertical}

label.feld{display:grid;gap:5px;font-size:12px;color:var(--ink-2);margin-bottom:12px}
label.feld b{color:var(--ink);font-size:13px;font-weight:600;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px}

input[type=range]{
  width:100%;height:26px;accent-color:var(--accent);background:transparent;padding:0;
  border:none;box-shadow:none;
}
input[type=range]:focus{box-shadow:none}

input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

.reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.reihe>.dehn{flex:1;min-width:0}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}

/* Chips: Auswahl aus wenigen Möglichkeiten */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;font-size:12.5px;font-weight:500;border-radius:99px;
  background:var(--surface-2);border:1px solid transparent;cursor:pointer;
}
.chip:hover{border-color:var(--line-2)}
.chip.an{background:var(--accent-soft);border-color:transparent;color:var(--ink);font-weight:600}
.chip .ic{width:16px;height:16px}

/* ---------------------------------------------------------- Datenzeilen */

.wert{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;font-size:13px;border-bottom:1px solid var(--line);
}
.wert:last-child{border-bottom:none}
.wert span{color:var(--ink-2)}
.wert b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.wert.summe{border-bottom:none;border-top:2px solid var(--line-2);margin-top:4px;padding-top:9px}
.wert.summe b{font-size:15px}

.marke-zahl{font-variant-numeric:tabular-nums}
code,.art{font-family:var(--mono);font-size:12px;letter-spacing:.02em}

/* --------------------------------------------------------------- Status */

.status{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:650;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status.gut{background:var(--ok-soft);color:var(--ok)}
.status.knapp{background:var(--warn-soft);color:var(--warn)}
.status.schlecht{background:var(--red-soft);color:var(--red)}
.status.neutral{background:var(--surface-3);color:var(--ink-2)}

.hinweis{
  padding:11px 13px;border-radius:var(--r);font-size:12.5px;line-height:1.55;
  border-left:3px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);
}
.hinweis.warnend{border-left-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.hinweis.schlecht{border-left-color:var(--red);background:var(--red-soft);color:var(--red)}
.hinweis b{color:inherit}

/* --------------------------------------------------- Flächen über dem 3D */

.glas{
  background:var(--glas);border:1px solid var(--glas-rand);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-radius:var(--r-l);box-shadow:var(--schatten-2);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glas{background:rgba(255,255,255,.96)}
}
@media (prefers-reduced-transparency:reduce){
  .glas{background:rgba(255,255,255,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
}

.dunkelglas{
  background:rgba(21,29,38,.9);color:#fff;border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-l);box-shadow:var(--schatten-2);
}

/* --------------------------------------------------------- Ablegebereich */

.ablegen{
  border:1.5px dashed var(--line-2);border-radius:var(--r-l);
  padding:18px 14px;text-align:center;font-size:12.5px;color:var(--ink-2);
  background:var(--surface-2);cursor:pointer;transition:border-color .12s,background .12s;
}
.ablegen:hover{border-color:var(--ink-3)}
.ablegen.heiss{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.ablegen b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}

/* ------------------------------------------------------------- Tabellen */

table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  text-align:left;padding:9px 10px;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  background:var(--surface-2);border-bottom:1px solid var(--line-2);white-space:nowrap;
}
tbody td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums}
.tabellenrahmen{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}

/* -------------------------------------------------------------- Leerlauf */

.leer{
  padding:22px 16px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.6;
}
.leer b{display:block;color:var(--ink-2);font-size:13.5px;margin-bottom:3px}

/* ----------------------------------------------------- Kennzahl und Notiz */

/* Beschriftung links, Wert rechts. Stand wortgleich in der Gebäudeerfassung und
   im Kamera-Planer und wird auf der Startseite und in den Stammdaten ebenfalls
   gebraucht — deshalb einmal hier. */
.stat{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line);
}
.stat:last-child{border-bottom:none}
.stat span{color:var(--ink-2)}
.stat b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.stat.sum{border-bottom:none;border-top:2px solid var(--line-2);margin-top:4px;padding-top:8px}
.empty{font-size:12px;color:var(--ink-3);line-height:1.55}

/* ------------------------------------------------- Kartenebenen im Bild */

/* Symbol unten rechts im Bild, das Menü klappt darüber auf. Die Regeln stehen
   hier und nicht in den Seiten, weil der Umschalter auf der Erfassungsseite und
   im Kamera-Planer derselbe sein soll — zwei Kopien laufen sonst auseinander.
   Der Kasten ist an der Unterkante verankert und wächst nach oben; das Menü
   steht im Markup vor dem Knopf und landet dadurch darüber. */
#ebenen{position:absolute;right:16px;bottom:16px;z-index:6;display:grid;justify-items:end;gap:7px}
#ebenen button{
  width:40px;height:40px;padding:0;display:grid;place-items:center;color:var(--ink);
  background:var(--glas);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glas-rand);border-radius:var(--r);box-shadow:var(--schatten-2);
}
#ebenen .menue{margin:0 0 7px}

/* Lizenzzeile. Steht dauerhaft unter dem Symbol, nicht erst im aufgeklappten
   Menü — die Nennung der Kartenquelle ist Bedingung der Nutzung. */
#mapattrib{
  margin:0;max-width:252px;text-align:right;font-size:10.5px;line-height:1.4;color:var(--ink-2);
  background:var(--glas);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  padding:3px 7px;border-radius:var(--r-s);
}

/* Klappmenüs an den Werkzeugen im Bild */
.werkzeug{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.menue{
  margin-top:6px;padding:12px 14px;min-width:232px;
  background:var(--glas);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glas-rand);border-radius:var(--r);box-shadow:var(--schatten-3);
}
.menue .titel{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 7px;
}
.menue label{
  display:flex;align-items:flex-start;gap:9px;padding:5px 0;
  font-size:12.5px;cursor:pointer;line-height:1.35;
}
.menue label:hover{color:var(--accent-ink)}
.menue label input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--accent)}
.menue label small{display:block;color:var(--ink-3);font-size:11px;font-weight:400}
.menue label span{font-weight:600}
.menue .fussnote{
  margin:9px 0 0;padding-top:8px;border-top:1px solid var(--glas-brd-in,rgba(16,22,32,.09));
  font-size:11px;color:var(--ink-3);line-height:1.45;
}
.menue .fussnote:empty{display:none}

/* --------------------------------------------------------- Bildlaufleiste */

*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--ground)}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* Das Fenster, das vor einem Klick fragt, der etwas zerstoeren kann
   (core/dialog.js): beim Speichern unter einem vorhandenen Namen und beim
   erneuten automatischen Platzieren.

   Vorher genuegte ein zweiter Druck auf den Speicherknopf zum Ueberschreiben —
   schnell und genau deshalb gefaehrlich: Wer den Hinweis in der Statuszeile
   nicht las, ueberschrieb ein fremdes Projekt mit einem Doppelklick. */
.kp-dialog{
  border:none;border-radius:var(--r-l);padding:24px 26px 20px;
  max-width:440px;box-shadow:var(--schatten-3);
  color:var(--ink);background:var(--surface);font-family:var(--font);
}
.kp-dialog::backdrop{background:rgba(16,24,32,.42);backdrop-filter:blur(2px)}
.kp-dialog h2{margin:0 0 8px;font-size:18px}
.kp-dialog p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.kp-dialog-tasten{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
/* Der Name, unter dem der Stand sonst landet — als Zeile darunter und nicht
   im Knopf: Ein Knopf mit einem langen Namen darin liest sich nicht mehr als
   Handlung. */
.kp-dialog-fuss{margin-top:12px;font-size:12px;color:var(--ink-3)}

/* Namensfeld im Formular-Fenster (core/dialog.js, formular()) — gebraucht
   beim Speichern: der Name steht im selben Fenster wie die Entscheidung, was
   mit dem bisherigen Stand geschieht. */
.kp-dialog-feld{margin-top:14px}
.kp-dialog-feld label{
  display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;
}
.kp-dialog-feld input{
  font:inherit;font-size:14.5px;width:100%;padding:9px 11px;
  color:var(--ink);background:var(--surface);border:1.5px solid var(--line-2);
  border-radius:var(--r);
}
.kp-dialog-feld input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.kp-dialog p.kp-dialog-formfehler{margin:8px 0 0;font-size:12.5px;color:var(--red)}

/* Die Wahl zwischen zwei Wegen — je eine anklickbare Zeile statt eines
   nativen radio-Eingabefelds, damit Titel und Erklaerung nebeneinander Platz
   haben. */
.kp-dialog-wahl{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.kp-dialog-wahlzeile{
  display:flex;gap:11px;align-items:flex-start;text-align:left;
  padding:11px 13px;border:1.5px solid var(--line-2);border-radius:var(--r);
  background:var(--surface);width:100%;font:inherit;
}
.kp-dialog-wahlzeile:hover{border-color:var(--ink-3);box-shadow:none}
.kp-dialog-wahlzeile.aktiv{border-color:var(--accent);background:var(--accent-soft)}
.kp-dialog-radiopunkt{
  width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink-3);
  flex:0 0 auto;margin-top:2px;position:relative;background:var(--surface);
}
.kp-dialog-wahlzeile.aktiv .kp-dialog-radiopunkt{border-color:var(--accent-ink)}
.kp-dialog-wahlzeile.aktiv .kp-dialog-radiopunkt::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent-ink);
}
.kp-dialog-wahltext{display:flex;flex-direction:column;gap:2px}
.kp-dialog-wahltitel{font-size:13.5px;font-weight:650;color:var(--ink)}
.kp-dialog-wahlunter{font-size:11.5px;color:var(--ink-2);line-height:1.4}

/* ------------------------------------------------------- Vorderseite

   Empfang und Anmeldung, bevor jemand angemeldet ist (wordpress/kameraplaner/
   inc/vorderseite.php). Dieselbe Idee wie über dem 3D-Modell: das Bild trägt,
   die Bedienung schwebt darüber. Entwurf: tasks/plan-webseite-anmeldung.md */

/* min-height statt height und ein Aufzug, sobald es eng wird: Mit
   height:100vh plus overflow:hidden verschwand alles, was nicht in die
   Fensterhoehe passte — ohne Aufzug, also unerreichbar. Das traf nicht nur
   Handys: ein niedriges Fenster am Schreibtisch, ein Tablet im Querformat
   (1024 breit, also jenseits der 820er-Regel) oder 150 % Zoom reichten, und
   der Anmeldeknopf lag unter dem Rand. */
body.vorderseite{margin:0;min-height:100vh;overflow-x:hidden;overflow-y:auto}

.buehne{position:relative;min-height:100vh;width:100%;overflow:hidden;display:flex;flex-direction:column}
.buehne > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Der Verlauf trägt die Glasfläche auch dort, wo das Bild hell wird — sonst
   steht der Text auf Scheinwerferlicht. */
.buehne::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,14,20,.72) 0%,rgba(8,14,20,.45) 42%,rgba(8,14,20,.1) 72%);
}

/* Keine weiße Leiste: Die würde das Bild oben abschneiden, statt darüber zu
   liegen. */
.buehne-kopf{
  position:absolute;top:0;left:0;right:0;z-index:3;height:72px;
  display:flex;align-items:center;gap:14px;padding:0 28px;color:#fff;
}
.buehne-kopf .marke{display:flex;align-items:center;gap:10px}
.buehne-kopf .marke b{font-size:15px;font-weight:600}
.buehne-kopf .logo{color:#fff}
.buehne-kopf .logo-mb{background:#fff;color:var(--accent-ink)}
.buehne-kopf .knopf{margin-left:auto}
.glas-knopf{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.glas-knopf:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);color:#fff}

/* flex:1 statt height:100%: Die Karte bleibt mittig, solange Platz ist,
   und schiebt die Buehne auseinander, sobald nicht. */
.buehne-mitte{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding:88px 28px 56px}
.buehne-karte{max-width:520px;padding:38px 40px;display:grid;gap:20px;justify-items:start}
.buehne-karte h1{font-size:34px;line-height:1.18;letter-spacing:-.02em}
.buehne-karte .fuehrung{font-size:15.5px;line-height:1.6;color:var(--ink-2)}

.buehne-fuss{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;gap:18px;align-items:center;padding:14px 28px;
  font-size:11.5px;color:rgba(255,255,255,.6);
}
.buehne-fuss a{color:rgba(255,255,255,.8)}

/* Unter 820 px trägt das Bild nicht mehr: Es ist 2,5:1, im Hochformat bliebe
   ein Streifen. Dann scrollt die Seite, statt den Text zu stauchen. */
/* Vor dem Medienblock weiter unten: Beide Regeln haben dieselbe
   Spezifitaet, also entscheidet die Reihenfolge in der Datei. Stand die
   Basisregel dahinter, gewann ihre Polsterung auch auf dem Handy. */
.anmeldekarte{width:100%;max-width:396px;padding:32px 34px 28px}

@media (max-width:820px){
  .buehne-mitte{padding:96px 18px 72px;align-items:flex-start}
  .buehne-karte{max-width:none;padding:26px 22px}
  .buehne-karte h1{font-size:27px}
  /* Die Anmeldekarte gehört mit in diesen Block: Sonst behält sie ihre
     Polsterung von 34px, und auf einem Handy bleibt für die Felder kaum
     Breite übrig. */
  .anmeldekarte{padding:26px 22px 24px}
}

/* Anmeldung: dieselbe Bühne, die Karte rückt in die Mitte. Der Wechsel vom
   Empfang wirkt dadurch wie ein Schritt nach vorn, nicht wie ein Seitenwechsel. */
.buehne-kopf.mittig{justify-content:center}
.buehne-mitte.mittig{justify-content:center}
/* Stärker abgedunkelt als der Empfang: Hier stehen Felder in der Mitte, und
   das Bild darf nicht mit ihnen um Kontrast ringen. */
body.vorderseite:has(.anmeldekarte) .buehne::after{
  background:radial-gradient(ellipse at center,rgba(8,14,20,.62) 0%,rgba(8,14,20,.82) 100%);
}

/* Kein eigenes margin: .buehne-mitte bringt schon seitliches Padding mit, und
   beides zusammen schob die Karte auf schmalen Geräten über den Rand hinaus
   (width:100% plus 2x20px margin ist breiter als der Platz, den der Container
   lässt). */
.anmeldekarte h1{font-size:23px;margin-bottom:6px}
.anmeldekarte .unter{font-size:13.5px;color:var(--ink-2);margin-bottom:22px}
.anmeldekarte label.feld{margin-bottom:16px}
/* Eigene volle Fläche statt durchscheinend: Auf Glas wird der eingetippte
   Text sonst unruhig, weil das Bild hindurchscheint. */
.anmeldekarte label.feld input{min-height:var(--ziel);font-size:14px;background:#fff}

.passfeld{position:relative;display:block}
.passfeld input{padding-right:46px}
.augeknopf{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;padding:0;display:grid;place-items:center;
  background:transparent;border:none;box-shadow:none;color:var(--ink-3);border-radius:var(--r-s);
}
.augeknopf:hover{background:var(--surface-2);color:var(--ink-2);box-shadow:none}

.merkzeile{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 20px;font-size:13px}
.merkzeile label{display:flex;align-items:center;gap:8px;color:var(--ink-2);cursor:pointer}
.merkzeile a{font-size:12.5px;font-weight:500}

button.absenden{width:100%;min-height:var(--ziel);font-size:15px;border-radius:var(--r)}

/* Über dem Formular, nicht darunter: Wer nach einem Fehlschlag zurückkommt,
   liest von oben. */
.meldungszeile{
  padding:11px 13px;border-radius:var(--r);margin-bottom:18px;
  font-size:12.5px;line-height:1.5;
}
.meldungszeile.schlecht{background:var(--red-soft);color:var(--red)}
.meldungszeile.gut{background:var(--ok-soft);color:var(--ok)}
.meldungszeile.warnend{background:var(--warn-soft);color:var(--warn)}

.kartenfuss{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);line-height:1.6;text-align:center;
}

/* ---------------------------------------------------------------- Fenster
   Auswahlfenster über der Ansicht: Kameramodell im Planer, Baukörper in der
   Erfassung. Beide stehen hier, damit sie gleich aussehen — als Kopie je
   Seite liefen sie beim nächsten Umbau auseinander. Die Breite legt jede
   Seite am Fenster selbst fest; 480 px sind der Grundwert für kurze Dialoge. */
.modal-backdrop{position:fixed;inset:0;background:rgba(16,22,29,.5);display:grid;place-items:center;
  z-index:50;padding:22px;backdrop-filter:blur(3px)}
.modal-backdrop[hidden]{display:none}
.modal-dialog{background:var(--surface);border-radius:var(--r-l);width:min(480px,100%);
  max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--schatten-3);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink)}
.modal-filters{padding:14px 18px 0}
.modal-dialog .prodlist{padding:14px 18px 18px;overflow-y:auto}

/* Eine Karte im Auswahlfenster: Bild links, Name, Kurzzeile und Merkmale
   rechts. Die Karte ist ein <button>, und der bringt vom Browser
   `text-align:center` mit; Name und Merkmale sollen aber an der linken Kante
   stehen, nicht mittig schwimmen. */
.prod-row{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:9px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);cursor:pointer;margin-bottom:6px;
  text-align:left;align-items:center}
.prod-row:hover{border-color:var(--accent);box-shadow:var(--schatten-1)}
.prod-row b{display:block;font-size:12.5px;font-weight:650}
.prod-row .meta{font-size:10.5px;color:var(--ink-3);margin:2px 0 5px}
.prod-row .chips{display:flex;flex-wrap:wrap;gap:4px}
.prod-row .chips span{padding:2px 7px;border-radius:var(--r-s);background:var(--surface-2);
  font-size:10px;color:var(--ink-2)}