/* Begehung – ein Daumen, eine Hand, schlechtes Licht auf der Baustelle: große Flächen, kräftiger Kontrast,
   nichts Kleines zum Zielen. Marke Mission Brandschutz (steuerung/marke/brand-system.md), keine Emojis.
   Navigation nach Pflichtenheft „Menü links, oben eine Leiste je Bereich“ (Vorlage plan/prototyp-navigation.html):
   links das dunkle Menü mit allen Bereichen, oben eine Leiste mit Projektwahl und den Handgriffen des Bereichs,
   am Handy klappt das Menü über einen Knopf auf. Die Arbeitsfläche im Plan bleibt: Plan in der Mitte, Tickets daneben
   (am Handy über den ganzen Bildschirm). */

:root {
  --rot: #821535; --dunkel: #5A0E24; --hell: #FBF5F0; --creme: #F0E6DF; --text: #2A1A1A;
  --leise: #7A5050; --linie: #D4B8B8; --gruen: #2E7D32; --schatten: 0 4px 20px rgba(130,21,53,.10);
  --seite: #3a0f1d; --seite-text: #f3e6ea; --seite-leise: #c9aab4; --seite-an: #821535;
  --spaeter: #9a8c8c; --seitenbreite: 220px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin: 0; font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: var(--hell); }
body.plan-seite { overflow: hidden; }
a { color: var(--dunkel); }
h1, h2 { color: var(--dunkel); margin: 0 0 8px; }
h1 { font-size: 22px; } h2 { font-size: 17px; }
p { margin: 0 0 10px; }
.leise { color: var(--leise); font-size: 14px; }
input, select, button, textarea { font: inherit; }
label { display: block; font-size: 13px; color: var(--leise); margin-bottom: 10px; }
label input, label select { display: block; width: 100%; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=search], select {
  width: 100%; padding: 12px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; color: var(--text);
}
input[type=file] { width: 100%; padding: 8px 0; }
button { cursor: pointer; }
.haupt { width: 100%; padding: 13px; background: var(--rot); color: #fff; border: 0; border-radius: 10px; font-weight: 600; }
.haupt:disabled { opacity: .6; }
.neben { padding: 10px 14px; background: #fff; color: var(--dunkel); border: 1px solid var(--linie); border-radius: 10px; }
a.neben, a.chip, a.karte { text-decoration: none; display: inline-block; }
.neben.klein { padding: 7px 10px; font-size: 14px; }
.neben.rot { color: var(--rot); }
.neben.voll { background: var(--rot); color: #fff; border-color: var(--rot); font-weight: 600; }
.reihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hinweis { min-height: 1.4em; color: var(--leise); font-size: 14px; }
.hinweis.fehler { color: var(--rot); }
.spaeter { color: var(--spaeter) !important; }
.marke-spaeter { font-size: 11px; border: 1px solid var(--linie); border-radius: 4px; padding: 0 5px; margin-left: 6px; color: var(--spaeter); white-space: nowrap; }

/* Die Tür */
body.tuer { background: var(--hell); }
.tuer-main { max-width: 420px; margin: 0 auto; padding: 80px 20px 40px; }
.tuer-main form { margin-top: 20px; }

/* Die Hülle: Menü links, rechts Leiste und Inhalt */
.huelle { display: grid; grid-template-columns: var(--seitenbreite) minmax(0, 1fr); min-height: 100%; }
body.plan-seite .huelle { height: 100vh; height: 100dvh; }
.seite { background: var(--seite); color: var(--seite-text); display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; height: 100dvh;
  padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); overflow-y: auto; }
.seite .wer { padding: 6px 10px 14px; font-size: 14px; position: relative; }
/* Hauptmenü einklappen (1.11.2026): am Rechner wird die Spalte ein schmaler Streifen mit „▸ Menü“ */
.seite #menueZuKnopf { position: absolute; right: 2px; top: 4px; background: none; border: 1px solid rgba(255,255,255,.25); color: var(--seite-text); border-radius: 6px; padding: 2px 7px; font-size: 13px; cursor: pointer; min-height: 0; display: none; }
.seite #menueAuf { display: none; }
@media (min-width: 861px) {
  .seite #menueZuKnopf { display: block; }
  .huelle.menue-zu { grid-template-columns: 30px minmax(0, 1fr); }
  .huelle.menue-zu .seite { padding: 8px 0; align-items: stretch; overflow: hidden; }
  .huelle.menue-zu .seite > *:not(#menueAuf) { display: none !important; }
  .huelle.menue-zu .seite #menueAuf { display: block; writing-mode: vertical-rl; background: none; border: 0; color: #fff; font: inherit; font-size: 14px; padding: 10px 4px; cursor: pointer; text-align: left; }
}
.seite .wer b { display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seite .wer span { color: var(--seite-leise); font-size: 13px; }
.seite button { background: none; border: 0; color: var(--seite-text); text-align: left; padding: 11px 10px; border-radius: 7px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.seite button:hover { background: rgba(255,255,255,.08); }
.seite button[aria-current="true"] { background: var(--seite-an); font-weight: 600; color: #fff; }
.seite button.spaeter { color: var(--seite-leise) !important; }
.seite button.unterpunkt { padding: 8px 10px 8px 26px; font-size: 14px; color: var(--seite-leise); margin-top: -2px; }
.seite button.unterpunkt::before { content: "›"; position: absolute; margin-left: -14px; }
.seite button.unterpunkt[aria-current="true"] { color: #fff; background: rgba(255,255,255,.1); }
.seite button[hidden] { display: none; }
.seite .abschnitt { font-size: 11px; border: 1px solid var(--seite-leise); border-radius: 4px; padding: 0 4px; color: var(--seite-leise); }
.seite hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 8px 0; width: 100%; }
.seite .grow { flex: 1; }
.inhalt { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
/* Die Leiste oben: wechselt mit dem Bereich – links die Projektwahl, wo ein Projekt gebraucht wird, rechts die Handgriffe */
.leiste { background: #fff; border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px 16px; }
.leiste b { color: var(--dunkel); font-size: 17px; }
.leiste .label { font-size: 13px; color: var(--leise); }
.leiste select, .leiste input { width: auto; padding: 8px 10px; border-radius: 8px; min-width: 0; }
.leiste select { padding-right: 30px; appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235A0E24' stroke-width='2'/></svg>") no-repeat right 10px center; }
.leiste select.projektwahl { font-weight: 600; color: var(--dunkel); max-width: 100%; }
.leiste select.planwahl { max-width: 100%; }
.leiste input[type=search] { min-width: 160px; }
.leiste .platz { flex: 1; }
.leiste .neben.klein { white-space: nowrap; }
.leiste .menue-knopf { display: none; }
.leiste .zurueck { text-decoration: none; color: var(--leise); white-space: nowrap; }
.filterleiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 16px; background: var(--creme); border-bottom: 1px solid var(--linie); }
.filterleiste[hidden] { display: none; }
.filterleiste select, .filterleiste input { width: auto; padding: 6px 9px; border-radius: 8px; font-size: 14px; }
.filterleiste input[type=search] { min-width: 120px; }

/* Inhalt */
.main { padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 16px; width: 100%; max-width: 1200px; }
.main.plan-seite { padding: 0; max-width: none; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.kopfzeile h1 { margin: 0; }
/* Übersicht: Gesamtzahlen, dann die Projektkarten mit der Zahl der Tickets je Zustand */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kennzahl { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; }
.kennzahl b { font-size: 22px; display: block; font-variant-numeric: tabular-nums; color: var(--dunkel); }
.kennzahl span { font-size: 13px; color: var(--leise); }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.karte { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #fff; border: 1px solid var(--linie); border-radius: 10px; text-decoration: none; color: var(--text); text-align: left; width: 100%; }
.karte:hover { border-color: var(--leise); }
.karte:active { background: var(--creme); }
.karte .zeile1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.karte b { color: var(--dunkel); }
.karte small { color: var(--leise); font-size: 13px; }
.karte .kuerzel { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--leise); font-size: 13px; white-space: nowrap; }
.zreihen { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 13px; }
.zreihen div { display: flex; justify-content: space-between; gap: 6px; border-left: 3px solid; padding-left: 6px; }
.zreihen .zahl { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; background: #9a8c8c; }
.kasten { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.kasten h2 { margin-bottom: 10px; }
.platzhalter { background: #fff; border: 1px dashed var(--leise); border-radius: 10px; padding: 24px; color: var(--leise); }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.feld-frei { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: end; margin-bottom: 8px; }
.feld-frei label { margin-bottom: 0; }
.banner { background: var(--creme); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 14px; }
.banner a { font-weight: 600; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle td, .tabelle th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--creme); vertical-align: middle; }
.tabelle th { color: var(--leise); font-weight: 500; }
.zustand-gesperrt { color: var(--rot); }
/* Listen und Felder: am Handy je Zeile ein Block – Name in voller Breite, darunter Farbe, Reihenfolge, Speichern */
.tabelle.listen input[type=text] { min-width: 120px; }
@media (max-width: 860px) {
  .tabelle.listen tr:first-child { display: none; }
  .tabelle.listen tr { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--creme); }
  .tabelle.listen td { display: block; border: 0; padding: 0; }
  .tabelle.listen td:first-child { grid-column: 1 / -1; }
}
.startkennwort { font: 600 18px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; background: var(--creme); padding: 8px 12px; border-radius: 8px; display: inline-block; margin: 6px 0; user-select: all; }
/* Tickets als Liste über alle Pläne: am Rechner eine Tabelle, am Handy je Ticket ein Block */
.tliste-tabelle { background: #fff; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; overflow-x: auto; }
.tliste-tabelle .tabelle th, .tliste-tabelle .tabelle td { padding: 9px 10px; white-space: nowrap; }
.tliste-tabelle .tabelle td.titel, .tliste-tabelle .tabelle td.planname { white-space: normal; overflow-wrap: anywhere; min-width: 140px; }
.tliste-tabelle .tabelle th { font-size: 13px; }
.tliste-tabelle tr.zeile { cursor: pointer; }
.tliste-tabelle tr.zeile:hover { background: var(--hell); }
.tliste-tabelle .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.tliste-tabelle .titel { overflow-wrap: anywhere; }

/* Die Arbeitsfläche eines Projekts: Plan in der Mitte, Tickets daneben */
.arbeit { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.planbereich { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.plan { position: relative; flex: 1; min-height: 240px; background: #e9e2dc; touch-action: none; }
.plan .osd { position: absolute; inset: 0; }
.zoom { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.zoom button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linie); background: #fff; color: var(--dunkel); font-size: 22px; box-shadow: var(--schatten); }
.plan-leer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--leise); gap: 8px; }
.lade { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(255,255,255,.92); border: 1px solid var(--linie); border-radius: 8px; padding: 4px 10px; font-size: 13px; color: var(--leise); z-index: 5; }
.tickets { border-left: 1px solid var(--linie); background: #fff; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; overflow-y: auto; }
.tickets .tk { padding: 12px 14px; border-bottom: 1px solid var(--linie); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tickets .tk h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; flex: 1; }   /* lange Plannamen brechen um, statt die Seite zu verbreitern */
.tickets .leer { padding: 16px 14px; color: var(--leise); font-size: 14px; }
.tickets .zum-plan { display: none; }
.tickets .filterhinweis { padding: 8px 14px; font-size: 13px; color: var(--leise); border-bottom: 1px solid var(--creme); }
.blatt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; background: #fff; border-top: 1px solid var(--linie); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgba(0,0,0,.12); max-height: 85%; overflow: auto; }
.blatt h2 { margin-bottom: 10px; }
.blatt.breit { max-width: 720px; }
.main:not(.plan-seite) .blatt { position: relative; border-radius: 12px; border: 1px solid var(--linie); box-shadow: var(--schatten); margin-bottom: 14px; max-height: none; }
@media (min-width: 861px) {
  .main.plan-seite .blatt { left: auto; right: 16px; bottom: 16px; width: 400px; border-radius: 16px; border: 1px solid var(--linie); }
  .main.plan-seite .blatt.breit { width: min(720px, calc(100% - 32px)); }
}
/* Handy: das Menü klappt über den Knopf auf, der Plan füllt den Bildschirm, die Tickets kommen über einen Knopf über den ganzen Bildschirm */
@media (max-width: 860px) {
  .huelle { grid-template-columns: 1fr; }
  .seite { position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); z-index: 40; transform: translateX(-100%); transition: transform .2s; height: 100%; }
  .seite.offen { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .leiste .menue-knopf { display: inline-block; }
  .leiste { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 6px; }
  .leiste .nur-rechner { display: none; }
  .leiste select.projektwahl { flex: 1 1 150px; min-width: 150px; }
  .leiste input[type=search] { flex: 1 1 160px; }
  .tliste-tabelle tr.zeile td.nur-rechner { display: none; }
  .main { padding-left: max(16px, env(safe-area-inset-left)); }
  .arbeit { grid-template-columns: 1fr; }
  .tickets { display: none; }
  .tickets.offen { display: flex; position: fixed; inset: 0; z-index: 25; padding-top: env(safe-area-inset-top); border-left: 0; }
  .tickets .zum-plan { display: inline-block; }
  .tliste-tabelle thead { display: none; }
  .tliste-tabelle tr.zeile { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--creme); }
  .tliste-tabelle tr.zeile td { display: block; border: 0; padding: 0; }
  .tliste-tabelle tr.zeile td.titel { grid-column: 2; font-weight: 600; }
  .tliste-tabelle tr.zeile td.nr { grid-row: 1 / span 3; align-self: start; }
  .tliste-tabelle tr.zeile td.sub { grid-column: 2; font-size: 13px; color: var(--leise); white-space: normal; overflow-wrap: anywhere; }
  .bauteile-tabelle tr.zeile td.tickets-zelle { grid-column: 2; }
}
@media (min-width: 861px) { .nur-handy { display: none !important; } .tliste-tabelle td.sub { display: none; } }
@media (max-width: 860px) { .nur-rechner { display: none !important; } }
/* Die schlanke Leiste am Handy in der Planansicht: einzeilig, der Kontextknopf „Kürzel · Plan“ kürzt sich, „Tickets“ sitzt unten rechts über dem Plan */
.leiste .kontext { font-weight: 600; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; min-width: 0; flex: 0 1 auto; }
.tickets-knopf { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6; width: auto; border-radius: 999px; padding: 11px 18px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.blatt .eintrag { display: block; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--linie); text-align: left; padding: 13px 2px; font-size: 16px; color: var(--dunkel); }
@media (max-width: 860px) {
  .leiste.einzeilig { flex-wrap: nowrap; }
  .plan .zoom { bottom: calc(66px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .seite { transition: none; } }

/* Tickets am Plan (Abschnitt 2): Nadeln und Bündel, das Ticket mit Nachprüfung und Verlauf, Plan ersetzen */
/* Die Stecknadel wie in Planradar: Spitze an der Stelle (das Element hängt unten-mittig am Punkt), Kopf in der Farbe des
   Zustands, die Nummer im Kopf. Der durchsichtige Rand macht sie 44 Pixel breit – ein Daumen trifft sie. */
.nadel { width: 44px; height: 46px; padding: 6px 7px 0; cursor: pointer; pointer-events: auto; user-select: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.nadel svg { display: block; width: 30px; height: 40px; overflow: visible; }
.nadel path { stroke: #fff; stroke-width: 2; }
.nadel text { fill: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; }
.nadel text.lang { font-size: 9px; }
.nadel.aktiv { width: 54px; height: 56px; z-index: 2; }
.nadel.aktiv svg { width: 40px; height: 50px; }
.nadel.aktiv text { font-size: 12px; } .nadel.aktiv text.lang { font-size: 10px; }
.nadel.neu { pointer-events: none; filter: none; }
.nadel.neu path { stroke: var(--rot); stroke-width: 2.5; stroke-dasharray: 4 3; }
.nadel.zieht { cursor: grabbing; opacity: .85; }
/* Das Fadenkreuz in der Mitte der Planfläche – die Nadel steht mit der Spitze genau darunter; nichts davon fängt Tipps ab */
.fadenkreuz { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.fadenkreuz::before, .fadenkreuz::after { content: ""; position: absolute; background: var(--rot); opacity: .7; }
.fadenkreuz::before { left: -40px; top: -1px; width: 80px; height: 2px; }
.fadenkreuz::after { left: -1px; top: -40px; width: 2px; height: 80px; }
.fadenkreuz .nadel { position: absolute; left: -22px; top: -46px; pointer-events: none; }
.fadenkreuz .nadel.aktiv { left: -27px; top: -56px; }
.fadenkreuz[hidden] { display: none; }
/* Das Bündel: ein Kreis mit der Anzahl, drumherum ein weicher Hof – ein Tipp zoomt hinein.
   Kein Flex: OpenSeadragon setzt dem Element selbst „display: block“ – der Kreis sitzt über seine Ränder in der Mitte. */
.buendel { width: 56px; height: 56px; border-radius: 50%; background: rgba(130,21,53,.20); cursor: pointer; pointer-events: auto; user-select: none; }
.buendel b { display: block; margin: 10px auto 0; width: 36px; height: 36px; border-radius: 50%; background: var(--rot); border: 2px solid #fff; color: #fff; font: 700 15px/32px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.buendel:active b { background: var(--dunkel); }
/* Bauteile im Plan (Abschnitt 3): ein kleines Quadrat mit der Nummer daneben, einblendbar über den Filter; hervorgehoben aus der Akte */
.quadrat { width: 18px; height: 18px; background: var(--rot); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; pointer-events: auto; position: relative; }
.quadrat span { position: absolute; left: 20px; top: -3px; font: 600 11px/18px ui-monospace, Menlo, Consolas, monospace; color: var(--dunkel); background: rgba(255,255,255,.85); padding: 0 4px; border-radius: 3px; white-space: nowrap; }
.quadrat.hervor { width: 24px; height: 24px; box-shadow: 0 0 0 4px rgba(130,21,53,.3), 0 1px 4px rgba(0,0,0,.35); z-index: 2; }
.quadrat.neu { background: rgba(255,255,255,.6); border: 2px dashed var(--rot); pointer-events: none; }
.fadenkreuz .quadrat { position: absolute; left: -9px; top: -9px; pointer-events: none; }
.fadenkreuz .quadrat.hervor { left: -12px; top: -12px; }
.filterleiste .schalter { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text); margin: 0; }
/* Bauteile und Anlagen: Liste, die Akte, Arten unter Listen und Felder */
.chips .zahl { opacity: .7; font-size: 12px; }
.artwahl { width: auto; max-width: 100%; flex: 0 1 auto; padding: 10px 36px 10px 12px; font-weight: 600; color: var(--dunkel); appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%235A0E24' stroke-width='2'/></svg>") no-repeat right 12px center; }
.reihe .label { font-size: 13px; color: var(--leise); }
.bauteile-tabelle td.angaben { white-space: normal; overflow-wrap: anywhere; min-width: 140px; }
.akte-kopf { margin-bottom: 12px; }
.akte-kopf h1 { font-family: ui-monospace, Menlo, Consolas, monospace; margin: 2px 0 0; }
.akte-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.akte-raster .kasten { margin-bottom: 0; }
.plan-vorschau { display: block; position: relative; width: 100%; background: var(--creme); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.plan-vorschau img { display: block; width: 100%; height: 100%; object-fit: contain; }
.quadrat-vorschau { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--rot); border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(130,21,53,.3); }
.medium { position: relative; }
.medium .marke { position: absolute; left: 4px; bottom: 4px; font: 600 11px/16px ui-monospace, Menlo, Consolas, monospace; background: rgba(42,26,26,.8); color: #fff; padding: 0 5px; border-radius: 4px; }
.feld-art { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: 6px; align-items: end; margin-bottom: 8px; }
.feld-art label { margin-bottom: 0; }
.feld-art label[hidden] { display: none; }
@media (max-width: 860px) { .feld-art { grid-template-columns: 1fr 1fr; } .feld-art label:first-child { grid-column: 1 / -1; } }
.pass { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--rot); background: rgba(255,255,255,.85); color: var(--rot); font: 700 12px/16px -apple-system, Arial, sans-serif; text-align: center; pointer-events: none; }
.modus { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: var(--dunkel); color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 14px; z-index: 6; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 92%; width: max-content; text-align: center; }
.modus[hidden] { display: none; }
.modus .neben { padding: 4px 8px; font-size: 13px; }
.tickets .tkopf { padding: 12px 14px 4px; }
.tickets .tkopf h2 { margin-bottom: 4px; overflow-wrap: anywhere; }
.tickets .tinhalt { padding: 10px 14px; }
.tickets .tinhalt h2 { font-size: 15px; margin: 4px 0 8px; }
.tickets .tinhalt .kasten { margin-bottom: 0; background: var(--hell); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--linie); background: #fff; color: var(--dunkel); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.chip.aktiv { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }
.tliste { display: flex; flex-direction: column; }
.titem { display: flex; gap: 10px; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--creme); background: #fff; text-align: left; width: 100%; color: var(--text); }
.titem:active { background: var(--creme); }
.titem .punkt { margin-top: 6px; }
.titem .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.titem .sub { font-size: 13px; color: var(--leise); }
.tform { padding: 10px 14px 20px; }
.tform textarea, .nachpruefung textarea { width: 100%; padding: 10px; border: 1px solid var(--linie); border-radius: 10px; margin-top: 4px; font: inherit; }
.zst { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.zst button { border: 1px solid var(--linie); background: #fff; border-radius: 8px; padding: 7px 10px; display: inline-flex; align-items: center; color: var(--text); font-size: 14px; }
.zst button[aria-pressed="true"] { border-color: var(--dunkel); box-shadow: inset 0 0 0 1px var(--dunkel); font-weight: 600; }
.fotos { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.foto { width: 84px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie); background: var(--creme); }
.foto-plus { width: 84px; height: 64px; border: 1px dashed var(--leise); border-radius: 6px; background: none; color: var(--leise); font-size: 14px; }
/* Alle Medien eines Tickets: Vorschaubilder, die neuesten zuerst; der Leuchtkasten zeigt eines groß über den ganzen Bildschirm */
.medien { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.medium { padding: 0; border: 0; background: none; }
.medium .foto { width: 100%; height: 84px; display: block; }
.leuchtkasten { position: fixed; inset: 0; z-index: 60; background: rgba(20,10,12,.96); color: #fff; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.leuchtkasten .kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }
.leuchtkasten .zaehler { font-size: 14px; color: #e8d8d8; }
.leuchtkasten .mitte { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; }
.leuchtkasten .gross { max-width: 100%; max-height: 100%; object-fit: contain; flex: 1; min-width: 0; }
.leuchtkasten .blaettern { width: 44px; height: 64px; flex: 0 0 auto; border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; }
.leuchtkasten .blaettern:disabled { opacity: .25; }
.leuchtkasten .fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); font-size: 14px; }
.leuchtkasten .fuss .text { min-width: 0; }
.leuchtkasten .fuss .text .leise { color: #d8c4c4; overflow-wrap: anywhere; }
.leuchtkasten .fuss .neben { white-space: nowrap; }
@media (max-width: 860px) { .leuchtkasten .blaettern { display: none; } .leuchtkasten .fuss { flex-direction: column; align-items: flex-start; } }
.kv { display: grid; grid-template-columns: 100px 1fr; gap: 5px 10px; font-size: 14px; margin: 0; }
.kv dt { color: var(--leise); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.verlauf { border-left: 2px solid var(--linie); margin-left: 4px; }
.ve { padding: 4px 0 12px 12px; position: relative; font-size: 14px; }
.ve::before { content: ""; position: absolute; left: -6px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--leise); }
.ve .wann { font-size: 12px; color: var(--leise); }
.ersetzen-seite { padding: 0; max-width: none; }
.ersetzen { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; max-width: 1200px; }
.ersetzen .ekopf { display: flex; align-items: center; gap: 10px; }
.ersetzen h1 { margin: 0; }
.schritte { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.schritte span { padding: 4px 9px; border-radius: 999px; background: var(--creme); color: var(--leise); }
.schritte span.an { background: var(--rot); color: #fff; }
.paare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paare .pane { border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: #fff; min-width: 0; }
.paare .pane h3 { margin: 0; padding: 6px 10px; font-size: 13px; color: var(--leise); border-bottom: 1px solid var(--linie); }
.paare .osd2 { position: relative; height: 52vh; min-height: 260px; background: #e9e2dc; touch-action: none; }
.paare .osd2.leer-neu { touch-action: auto; }
@media (max-width: 860px) { .paare { grid-template-columns: 1fr; } .paare .osd2 { height: 40vh; } .kv { grid-template-columns: 1fr; } .kv dt { margin-top: 4px; } }

/* Bibliothek (Abschnitt 4): Listen mit Marke Hersteller/Produkt/Norm, Dokumente, Vorgaben als aufklappbare Karten, die PDF-Seite */
.marke-bib { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.marke-bib.herst { background: #e4ecf8; color: #2c5aa0; } .marke-bib.norm { background: #efeaf8; color: #6b4fa3; } .marke-bib.warn { background: #fbf0d9; color: #a06200; }
.geprueft { color: var(--gruen); font-weight: 600; font-size: 13px; white-space: nowrap; }
.bib-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.zeile-bib { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 11px 13px; text-decoration: none; color: var(--text); }
.zeile-bib:hover { border-color: var(--leise); }
.zeile-bib .grow { flex: 1; min-width: 0; } .zeile-bib b { color: var(--dunkel); } .zeile-bib .sub { color: var(--leise); font-size: 13px; }
.dok { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--creme); flex-wrap: wrap; }
.dok:last-child { border-bottom: 0; } .dok .grow { flex: 1; min-width: 0; } .dok b { color: var(--dunkel); }
.fund { font-size: 13px; color: var(--leise); }
details.vorgabe { border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
details.vorgabe summary { list-style: none; cursor: pointer; padding: 11px 13px; display: flex; gap: 10px; align-items: flex-start; }
details.vorgabe summary::-webkit-details-marker { display: none; }
details.vorgabe summary .grow { flex: 1; min-width: 0; }
details.vorgabe .inhalt { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 8px; }
details.vorgabe blockquote { margin: 0; padding: 9px 11px; background: var(--creme); border-radius: 6px; font-size: 15px; }
details.vorgabe .korrektur { padding: 0 13px 13px; }
details.vorgabe .korrektur textarea { width: 100%; padding: 8px; border: 1px solid var(--linie); border-radius: 8px; margin-top: 4px; }
.gewerkwahl { width: auto; }
/* Vorgaben am Bauteil und im Ticket (Abschnitt 5): Gelten hier, Suche nur darin, Treffer hervorgehoben, Gemerktes mit grünem Rand */
.cmp { display: inline-block; font-size: 11px; border: 1px solid var(--linie); border-radius: 4px; padding: 0 5px; color: var(--leise); margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.quellen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.pille { font-size: 12px; border-radius: 999px; padding: 2px 9px; background: var(--creme); border: 1px solid var(--linie); text-decoration: none; color: var(--text); white-space: nowrap; }
.pille.herst { border-color: var(--rot); color: var(--rot); } .pille.norm { border-color: #6b4fa3; color: #6b4fa3; }
/* Projektunterlagen (Abschnitt 7): Marke „Projekt“, Lesestand, ersetzte Fassungen, Hinweiskasten */
.pille.proj { border-color: var(--gruen); color: var(--gruen); }
.marke-bib.proj { background: #e3f1e5; color: #1f5a29; }
.st { font-size: 12px; font-weight: 600; white-space: nowrap; } .st.ok { color: var(--gruen); } .st.run { color: #b07800; } .st.no { color: var(--leise); }
.dok-zeile.alt { opacity: .65; }
.warnbox { border: 1px solid #e0b400; background: #fff8dc; border-radius: 9px; padding: 9px 12px; font-size: 14px; margin-bottom: 10px; }
details.vorgabe.alt { border-left: 4px solid #e0b400; } details.vorgabe .warnbox { margin: 0 13px 8px; }
details.vorgabe.fund-stelle { border-left: 4px solid var(--gruen); }
.lauf { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--linie); border-top-color: var(--rot); border-radius: 50%; animation: lauf 1s linear infinite; vertical-align: -2px; }
@keyframes lauf { to { transform: rotate(360deg); } }
details.vorgabe summary { flex-wrap: wrap; } details.vorgabe summary .grow { flex: 1 1 220px; } details.vorgabe summary .pille { flex: none; }
.vorgaben-suche { width: 100%; margin-bottom: 8px; }
.klein { font-size: 13px; }
mark { background: #fff1a8; color: var(--text); border-radius: 2px; padding: 0 1px; }
details.vorgabe.gemerkt { border-left: 4px solid var(--gruen); }
details.dok-gruppe { border: 1px solid var(--linie); border-radius: 10px; background: #fff; margin-bottom: 8px; }
details.dok-gruppe summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
details.dok-gruppe summary::-webkit-details-marker { display: none; }
details.dok-gruppe summary::after { content: "+"; color: var(--leise); } details.dok-gruppe[open] summary::after { content: "–"; }
details.dok-gruppe .bib-liste { margin-bottom: 0; }
.banner.leer { background: #fff; color: var(--leise); }
.feld-art .vergleich { grid-column: 1 / -1; font-size: 13px; margin-bottom: 2px; display: inline-flex; align-items: center; gap: 6px; }
.feld-art .vergleich input { width: auto; margin: 0; }
.tickets .vorgaben-block { margin: 0; }
.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 10px 0; }
.pdf-halter { background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 6px; max-width: 980px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pdf-seite { display: block; width: 100%; height: auto; }
/* Am Handy ist die Seite doppelt so breit wie der Bildschirm und wird seitlich geschoben – so bleibt der Text lesbar, ohne dass die Seite selbst scrollt */
@media (max-width: 860px) { .pdf-seite { width: 200%; max-width: none; } }

/* Räume und 360-Grad-Fotos (Abschnitt 6): Flächen im Plan, Namensschild, Ecken beim Einzeichnen, Raumkarten, Fotostreifen, Rundumsicht */
.raum-flaeche { overflow: visible; pointer-events: none; }
.raum-flaeche polygon, .raum-flaeche polyline { fill: rgba(44,111,176,.08); stroke: #2c6fb0; stroke-width: 1.5px; stroke-dasharray: 6 4; }
.raum-flaeche.hervor polygon { fill: rgba(44,111,176,.14); stroke-width: 2.5px; stroke-dasharray: none; }
.raum-flaeche.entwurf polygon, .raum-flaeche.entwurf polyline { fill: rgba(44,111,176,.12); stroke-width: 2.5px; stroke-dasharray: none; }
.raum-schild { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid #2c6fb0; color: #2c6fb0; font-size: 12px; line-height: 16px; cursor: pointer; white-space: nowrap; }
.raum-schild b { font-weight: 600; } .raum-schild.hervor { background: #2c6fb0; color: #fff; }
.raum-schild .rund { background: #2c6fb0; color: #fff; border-radius: 4px; padding: 0 4px; font-size: 10px; font-weight: 700; } .raum-schild.hervor .rund { background: #fff; color: #2c6fb0; }
.raum-ecke { display: block; width: 12px; height: 12px; border-radius: 50%; background: #2c6fb0; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(44,111,176,.4); }
.raum-ecke.greifbar { width: 22px; height: 22px; cursor: grab; box-shadow: 0 0 0 3px rgba(44,111,176,.3); }
.raum-ecke.greifbar.zieht { cursor: grabbing; }
.raum-ecke.gewaehlt { background: var(--rot); box-shadow: 0 0 0 4px rgba(130,21,53,.35); }
.fadenkreuz .raum-ecke { position: absolute; left: -6px; top: -6px; pointer-events: none; }
.modus.zeichnen { gap: 6px; } .modus.zeichnen .satz { flex-basis: 100%; }
.modus.zeichnen input { width: 220px; max-width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linie); font: inherit; }
.raumkarten .karte small { display: block; }
/* Der Raumbaum (Befund 24): Ebenen mit Pfeil, Räume mit Punkt, Zahlen rechts, Handgriffe im Modus „Struktur“ */
.baum-suche { width: 100%; margin-bottom: 10px; font-size: 16px; }
.struktur-leiste { margin-bottom: 10px; } .struktur-leiste[hidden] { display: none; }
.baum { padding: 4px 0; }
.knoten { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px; border-bottom: 1px solid var(--creme); min-height: 40px; flex-wrap: wrap; }
.zweig:last-child > .knoten:last-child { border-bottom: 0; }
.knoten .tog { width: 26px; height: 26px; border: 0; background: none; color: var(--leise); font-size: 14px; flex: none; cursor: pointer; padding: 0; }
.knoten .name { flex: 1; min-width: 0; background: none; border: 0; text-align: left; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-decoration: none; }
.knoten .name b { color: var(--dunkel); }
.knoten .lvl { display: block; font-size: 12px; color: var(--leise); }
.knoten .meta { font-size: 13px; color: var(--leise); white-space: nowrap; }
.knoten .offen { color: var(--rot); font-weight: 600; }
.knoten.raum { min-height: 36px; padding-top: 5px; padding-bottom: 5px; }
.knoten.raum .pip { width: 8px; height: 8px; border-radius: 50%; background: #2c6fb0; flex: none; margin-left: 9px; }
.knoten.raum .name:hover { text-decoration: underline; }
.marke-360 { background: #2c6fb0; color: #fff; border-radius: 4px; padding: 0 5px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.knoten .acts { display: none; gap: 6px; flex-wrap: wrap; flex-basis: 100%; padding-left: 34px; }
.baum.struktur .knoten .acts { display: flex; }
.knoten .acts select { width: auto; max-width: 220px; padding: 4px 8px; font-size: 13px; }
.knoten.leer { border-bottom: 0; min-height: 0; padding-top: 2px; }
.raumkarten .zaehler { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--leise); margin-top: 4px; }
.strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.shot { flex: none; width: 200px; scroll-snap-align: start; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; padding: 0; background: var(--creme); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.shot .img { height: 100px; background-size: cover; background-position: center; position: relative; }
.shot .badge { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 600; border-radius: 5px; padding: 1px 6px; }
.shot .meta { padding: 6px 8px; font-size: 13px; background: #fff; } .shot .meta b { display: block; }
@media (max-width: 860px) { .shot { width: 160px; } }
.raum-ausschnitt { position: relative; width: 100%; background: #e9e2dc; border-radius: 8px; overflow: hidden; touch-action: none; max-height: 60vh; }
.raum-ausschnitt .osd { position: absolute; inset: 0; }
.quadrat-klein { display: inline-block; width: 10px; height: 10px; background: var(--rot); flex: none; margin-top: 5px; }
.pano { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
.pano-leiste { display: flex; gap: 8px; align-items: center; padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: #111; color: #eee; flex-wrap: wrap; }
.pano-leiste b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pano-leiste .neben, .pano-leiste select { background: #222; border: 1px solid #444; color: #eee; border-radius: 8px; padding: 6px 9px; width: auto; }
.pano-leiste .neben[aria-pressed="true"] { background: #eee; color: #111; }
.pano-flaeche { flex: 1; min-height: 0; }
.pano-hinweis { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 999px; pointer-events: none; text-align: center; max-width: 90vw; }
.pano-hinweis[hidden] { display: none; }

/* Meldung unten */
.meldung { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--dunkel); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 50; max-width: 90%; box-shadow: var(--schatten); }
.meldung[hidden] { display: none; }

/* Berichte (Abschnitt 8, Befund 28): die Vorschau ist das echte Blatt (Seiten als Bild aus dem Dienst), die Fotoauswahl im
   Blatt des Ticketberichts, „im Bericht“ an den Medien, die Liste der Berichte, das Blatt des Begehungsberichts */
.late { color: #c0392b; font-weight: 600; }
/* Der Plan des Tickets wurde entfernt (Befund 1.11.2026): Kasten mit Zuordnen oder Löschen */
.plan-weg { background: #fdecea; border-left: 4px solid var(--rot); } .plan-weg b { color: var(--rot); } .plan-weg p { margin: 4px 0 8px; }
.plan-weg .reihe { flex-wrap: wrap; gap: 8px; align-items: center; } .plan-weg select.planwahl { max-width: 100%; }
.pille.eil { border-color: #c0392b; color: #c0392b; }
.blattseiten, .blattvorschau { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.blattbild { display: block; width: 100%; max-width: 744px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.2); min-height: 120px; }
.blattbild:not([src]) { visibility: hidden; min-height: 0; }
.blattseiten.laedt .blattbild, .blattvorschau.laedt .blattbild { opacity: .55; transition: opacity .2s; }
.fotowahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.fotowahl .fw { position: relative; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--creme); }
.fotowahl .fw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotowahl .fw[aria-pressed="true"] { border-color: var(--rot); }
.fotowahl .n { position: absolute; top: 4px; right: 4px; min-width: 22px; height: 22px; border-radius: 11px; background: rgba(0,0,0,.5); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.fotowahl .fw[aria-pressed="true"] .n { background: var(--rot); }
.fotowahl .rep, .medium-halter .rep { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 16px; border-radius: 4px; padding: 1px 6px; border: 0; }
.medium-halter { position: relative; }
.medium-halter .rep.an { background: var(--rot); }
.bericht-zeile { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--creme); }
.bericht-zeile:last-child { border-bottom: 0; }
.bericht-zeile .grow { flex: 1; min-width: 0; }
.bericht-zeile .neben { flex-shrink: 0; }
.bericht-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bericht-form .feld { margin-bottom: 10px; }
.bericht-form .zwei-felder label { flex: 1; }
.bericht-form .haken { display: flex; flex-direction: column; gap: 6px; }
/* Ticket an Personen (Befund 34, Befund 35): Auswahlmenü, darunter die gewählten Personen als Marken mit „entfernen“ */
.personen-wahl { display: flex; flex-direction: column; gap: 8px; }
.personen-wahl .personen-liste:empty { display: none; }
.personen-wahl .chip.person { display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; }
.personen-wahl .chip.person .weg { border: 0; background: transparent; color: var(--leise); font-size: 16px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 999px; }
.personen-wahl .chip.person .weg:hover { background: var(--hell); color: var(--rot); }
.chk { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--text); margin-bottom: 0; }
.chk input { width: auto; margin: 0; }
.seg { display: flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: #fff; padding: 8px 10px; color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--dunkel); color: #fff; }
.kasten.fertig { border-color: var(--gruen); }
@media (max-width: 860px) {
  .bericht-raster { grid-template-columns: 1fr; }
  .bericht-zeile { flex-wrap: wrap; }
}
.main:not(.plan-seite) .blatt.bericht-blatt { max-width: 1100px; }

/* Abschnitt 10 (Vorlage plan/prototyp-freigaben.html): Beteiligte, Freigaben und Meine Schotts, der Ablauf in der Akte, der Zähler im Menü */
.seite .zaehler { font-size: 11px; background: rgba(255,255,255,.18); border-radius: 999px; padding: 0 7px; margin-left: 6px; }
.seite .zaehler[hidden] { display: none; }
.schritt { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; color: #fff; white-space: nowrap; }
.schritt.offen { background: #fff; color: var(--leise); border: 1px solid var(--linie); font-weight: 500; }
.kette { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.flow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.flow .b { border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; background: #fff; }
.flow .b b { display: block; font-size: 12px; color: var(--leise); font-weight: 500; }
.flow .ar { color: var(--leise); }
.freigaben-tabelle td.nr { cursor: pointer; }
.freigaben-tabelle .sub { display: none; }
input.chk { width: 20px; height: 20px; accent-color: var(--rot); flex: none; margin: 0; }
.chk-platz { display: inline-block; width: 20px; }
.aktionsleiste { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; box-shadow: 0 -2px 10px rgba(0,0,0,.06); margin-top: 10px; z-index: 3; }
.aktionsleiste[hidden] { display: none; }
.aktionsleiste .platz { flex: 1; }
.aktionsleiste .small { font-size: 13px; color: var(--leise); }
.person { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--creme); }
.person:last-child { border-bottom: 0; }
.person .grow { flex: 1; min-width: 0; }
.tag { font-size: 12px; border: 1px solid var(--linie); border-radius: 999px; padding: 1px 8px; color: var(--leise); white-space: nowrap; }
.tag.aktiv { border-color: var(--gruen); color: var(--gruen); }
.tag.gesperrt { border-color: var(--rot); color: var(--rot); }
.kasten.freigabe .verlauf { margin-top: 10px; }
.ablauf-editor .ablauf-zeile { grid-template-columns: 2fr 1fr 2fr auto; }
@media (max-width: 860px) {
  .freigaben-tabelle thead { display: none; }
  .freigaben-tabelle tr.zeile { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--creme); align-items: start; }
  .freigaben-tabelle td { border: 0; padding: 2px 0; }
  .freigaben-tabelle td.nr { grid-column: 2; }
  .freigaben-tabelle td:has(.schritt) { grid-column: 3; justify-self: end; }
  .freigaben-tabelle .sub { display: block; grid-column: 2 / 4; font-size: 13px; color: var(--text); }
  .person { flex-wrap: wrap; }
}
/* Befund 30: ein Textfeld in einer Beschriftung steht wie Eingabe und Auswahl unter ihr, über die volle Breite */
label textarea { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; color: var(--text); }

/* Modul 3D (Abschnitt 12): der Bereich „3D“ – das Modell füllt die Fläche, Chips links oben, Tafel rechts, am Handy als Blatt unten */
.modell3d { position: relative; flex: 1; min-height: 0; background: #e9e4df; }
.modell3d canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.modell3d .chips { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.modell3d .chipreihe { display: flex; gap: 6px; flex-wrap: wrap; background: rgba(255,255,255,.92); padding: 6px; border-radius: 12px; box-shadow: 0 2px 10px rgba(130,21,53,.12); }
.modell3d .chip { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--linie); background: #fff; cursor: pointer; font-size: 14px; color: var(--dunkel); }
.modell3d .chip.an { background: var(--rot); color: #fff; border-color: var(--rot); font-weight: 600; }
.modell3d .chip.schalter.an { background: var(--creme); color: var(--dunkel); border-color: var(--dunkel); }
.modell3d .chip { min-height: 44px; }
.modell3d .chipmehr { display: flex; flex-direction: column; gap: 8px; } .modell3d .chipmehr[hidden] { display: none; }
.modell3d .chip.mehr { margin-left: auto; } .modell3d .chip.mehr.an { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }
.modell3d .hinweisbox { position: absolute; left: 12px; bottom: 12px; max-width: min(360px, calc(100% - 24px)); background: rgba(255,255,255,.94); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; font-size: 14px; z-index: 3; box-shadow: 0 2px 10px rgba(130,21,53,.12); }
.modell3d .hinweisbox b { color: var(--dunkel); }
.modell3d .tafel { position: absolute; right: 12px; top: 12px; width: min(340px, calc(100% - 24px)); background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; z-index: 3; box-shadow: var(--schatten); font-size: 14px; max-height: calc(100% - 24px); overflow: auto; }
.modell3d .tafel[hidden] { display: none; }
.modell3d .tafel h3 { margin-bottom: 6px; padding-right: 28px; }
.modell3d .tafel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; } .modell3d .tafel dt { color: var(--leise); } .modell3d .tafel dd { margin: 0; overflow-wrap: anywhere; }
.modell3d .tafel .schliessen { position: absolute; right: 8px; top: 8px; border: 0; background: none; color: var(--leise); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.modell3d .tafel .reihe { margin-top: 10px; }
.modell3d .massblatt { margin-top: 10px; border-top: 1px solid var(--creme); padding-top: 10px; }
.modell3d .massblatt input { width: 100%; padding: 10px; border: 1px solid var(--linie); border-radius: 10px; }
.modell3d .steuerkreuz { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: none; grid-template-columns: repeat(3, 48px); gap: 4px; }
.modell3d .steuerkreuz button { height: 48px; border-radius: 10px; border: 1px solid var(--linie); background: rgba(255,255,255,.94); font-size: 18px; color: var(--dunkel); }
.modell3d .steuerkreuz .leer { visibility: hidden; }
.marke { display: inline-block; font-size: 12px; border-radius: 5px; padding: 1px 7px; margin-right: 4px; border: 1px solid var(--linie); color: var(--leise); }
.marke.blass { color: #b07800; border-color: #b07800; } .marke.ok { color: var(--gruen); border-color: var(--gruen); } .marke.quelle { color: #2c6fb0; border-color: #2c6fb0; }
.modell-leer { max-width: 640px; padding: 24px 16px; }
.modell-leer p { margin-bottom: 14px; }
/* Plan aufnehmen: sechs Schritte */
/* Schrittleiste „Plan einlesen“ (2.11.2026: eigene Klassen – .schritt ist das farbige Abzeichen der Freigaben mit weißer Schrift, die erbte sie) */
.lauf-schritte { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.lauf-schritt { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 40px; border-radius: 10px; border: 1px solid var(--linie); background: #fff; color: var(--dunkel); cursor: pointer; font: inherit; font-size: 14px; }
.lauf-schritt .nr { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--creme); color: var(--dunkel); align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.lauf-schritt.an { border-color: var(--rot); background: var(--creme); color: var(--dunkel); font-weight: 600; } .lauf-schritt.fertig .nr { background: var(--gruen); color: #fff; }
.ki { border-left: 4px solid var(--rot); padding: 8px 12px; background: var(--hell); border-radius: 0 10px 10px 0; margin: 10px 0; }
.ki b { color: var(--dunkel); }
.tabelle .zahl { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tabelle.inventur select { padding: 6px 26px 6px 8px; max-width: 220px; }
.tabelle.inventur tr.unsicher td { background: #fff8e6; } .tabelle.inventur tr.weg td { color: var(--spaeter); }
.tabelle.inventur input, .tabelle input[type=text] { padding: 6px 8px; }
.knoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.zaehler { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.zaehler div { background: var(--hell); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; }
.zaehler b { display: block; font-size: 22px; color: var(--dunkel); font-variant-numeric: tabular-nums; } .zaehler span { font-size: 13px; color: var(--leise); }
.zaehler .offen b { color: var(--rot); }
.fehlt { background: #fff8e6; border: 1px solid #e8c45a; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.gut { background: #eef7ef; border: 1px solid #9ccfa3; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.liste { margin: 6px 0 0; padding-left: 18px; } .liste li { margin: 4px 0; }
.fuss { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
@media (max-width: 860px) {
  .modell3d .chips { left: 8px; top: 8px; right: 8px; } .modell3d .chipreihe { padding: 4px; }
  .modell3d .tafel { right: 8px; left: 8px; top: auto; bottom: 8px; width: auto; max-height: 55%; }
  .modell3d .hinweisbox { display: none; }
  .modell3d .steuerkreuz.an { display: grid; }
  .tabelle.inventur td:nth-child(3) { display: none; }
}
.blatt label.haken { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--text); margin-bottom: 6px; }
.blatt label.haken input { width: auto; margin: 0; }

/* Rohbau antippen (Abschnitt 12 neu, Vorlage plan/3d-rohbau/prototyp-rohbau-antippen.html) */
.rohbau { display: flex; flex-direction: column; flex: 1; min-height: 0; --rand: var(--linie); --leise2: #6b7280; }
.rohbau .rb-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; background: #fff; border-bottom: 1px solid var(--linie); font-size: 14px; position: relative; z-index: 6; }
.rohbau .grp { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--linie); }
.rohbau .grp:last-child { border-right: 0; } .rohbau .rb-kopf .platz { flex: 1; }
.rohbau .rb-kopf button, .rohbau .menue > summary { font: inherit; border: 1px solid var(--linie); background: #fff; border-radius: 8px; padding: 8px 12px; cursor: pointer; white-space: nowrap; color: var(--dunkel); min-height: 44px; }
.rohbau .rb-kopf button:hover, .rohbau .menue > summary:hover { background: #f0f2f5; }
.rohbau .rb-kopf button.an, .rohbau .menue > summary.an { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }
.rohbau .rb-kopf .k { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.rohbau .rb-kopf #sdWahl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; } .rohbau .rb-kopf #sdWahl[hidden] { display: none; } .rohbau .rb-kopf #sdWahl select { font: inherit; min-height: 36px; max-width: 220px; }
/* Aufklappmenüs der Leiste (Karte 1649): Knopf = summary, Einträge ≥ 44 px, der gewählte Eintrag steht auf dem Knopf */
.rohbau .menue { position: relative; }
.rohbau .menue > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; user-select: none; -webkit-user-select: none; }
.rohbau .menue > summary::-webkit-details-marker { display: none; }
.rohbau .menue > summary .pfeil { font-size: 11px; opacity: .7; }
.rohbau .menue .mi { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 250px; max-height: 70vh; overflow: auto; }
.rohbau .menue .mi button, .rohbau .menue .mi label { min-height: 44px; text-align: left; border: 0; border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 14px; background: transparent; display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; color: var(--dunkel); white-space: nowrap; }
.rohbau .menue .mi button:hover, .rohbau .menue .mi label:hover { background: #f0f2f5; }
.rohbau .menue .mi button.an { background: var(--dunkel); color: #fff; }
.rohbau .menue .mi .trenn { border-top: 1px solid var(--linie); margin: 4px 0; }
.rohbau .menue .mi select { min-height: 36px; font: inherit; flex: 1; max-width: 220px; }
.rohbau .menue .mi input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; }
.rohbau #maske { display: flex; flex-direction: column; gap: 2px; }
.rohbau .rb-haupt { display: grid; grid-template-columns: 1fr 300px; flex: 1; min-height: 0; position: relative; }
.rohbau .rb-haupt.ohneTafel { grid-template-columns: 1fr 0; }
.rohbau .rb-haupt.ohneTafel aside { display: none; }
.rohbau .rb-mitte { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rohbau .rb-mk { display: flex; gap: 6px; align-items: center; padding: 4px 8px; background: #fff; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.rohbau .rb-mk .grp { padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--linie); }
.rohbau .rb-mk button, .rohbau .rb-mk .menue > summary { font: inherit; border: 1px solid var(--linie); background: #fff; border-radius: 8px; padding: 6px 10px; min-height: 36px; cursor: pointer; color: var(--dunkel); font-size: 13px; }
.rohbau .rb-mk button.an { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }
.rohbau .rb-mk .platz { flex: 1; }
.rohbau .rb-mk #m-anzeige .mi { left: auto; right: 0; }
.rohbau .rb-flaechen { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; position: relative; }
.rohbau .rb-haupt.nur2d .rb-flaechen { grid-template-columns: 1fr 0; } .rohbau .rb-haupt.nur3d .rb-flaechen { grid-template-columns: 0 1fr; }
.rohbau #schwebe { position: absolute; right: 8px; top: 8px; width: 300px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow: auto; background: #fff; border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.16); z-index: 5; }
.rohbau #schwebe[hidden] { display: none; }
.rohbau #schwebe #eig { border-top: 0; max-height: none; }
.rohbau #plan, .rohbau #drei { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--linie); }
.rohbau #plan { background: #fff; touch-action: none; } .rohbau #plan canvas { display: block; width: 100%; height: 100%; }
.rohbau #drei { background: #dfe3e8; } .rohbau #drei canvas { display: block; touch-action: none; }
.rohbau #hinweis { position: absolute; left: 10px; bottom: 10px; right: 10px; pointer-events: none; display: flex; justify-content: center; }
.rohbau #hinweis span { background: rgba(29,34,41,.88); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 13px; max-width: 640px; }
.rohbau #drei { display: flex; flex-direction: column; } .rohbau #drei canvas { flex: none; }
.rohbau #dreiwerk { order: -1; padding: 4px 6px; background: #fff; border-bottom: 1px solid var(--linie); display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.rohbau #dreiwerk label, .rohbau #dreiwerk button { padding: 2px 6px; font-size: 12px; line-height: 1.3; min-height: 26px; } .rohbau #dreiwerk input[type=range] { width: 80px; }
.rohbau #eig .gruppe-kasten { border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 8px; padding: 8px 10px; margin: 6px 0; font-size: 13px; }
.rohbau #eig .gruppe-kasten.frei { border-color: #fcd34d; background: #fffbeb; } .rohbau #eig .gruppe-kasten .gelb { color: #b45309; }
.rohbau #dreiwerk label, .rohbau #dreiwerk button { background: rgba(255,255,255,.92); border: 1px solid var(--linie); border-radius: 6px; padding: 4px 7px; font-size: 12px; font-family: inherit; color: var(--dunkel); }
.rohbau #dreiwerk input[type=range] { width: 110px; vertical-align: middle; }
.rohbau aside { background: #fff; display: flex; flex-direction: column; min-height: 0; }
.rohbau aside h2 { font-size: 13px; margin: 0; padding: 10px 12px 6px; color: var(--leise2); text-transform: uppercase; letter-spacing: .04em; }
.rohbau #stat { padding: 0 12px 8px; color: var(--leise2); font-size: 13px; }
.rohbau #stat .rot { color: #c0392b; } .rohbau #stat .gelb { color: #b45309; }
.rohbau #liste { flex: 1; overflow: auto; border-top: 1px solid var(--linie); min-height: 80px; }
.rohbau .zeile { display: flex; gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #eef0f3; cursor: pointer; font-size: 13px; }
.rohbau .zeile:hover { background: #f6f7f9; } .rohbau .zeile.sel { background: #fff3e0; }
.rohbau .zeile .dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.rohbau .zeile .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rohbau .zeile .w { color: #b45309; font-size: 12px; }
.rohbau #eig { border-top: 1px solid var(--linie); padding: 10px 12px; flex: 1 1 54%; min-height: 220px; overflow: auto; font-size: 14px; }
.rohbau #liste { flex: 0 1 40%; }
.rohbau #eig .tafel-aktionen { position: sticky; top: -10px; z-index: 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: 6px 8px; margin: -4px 0 8px; }
.rohbau #eig .tafel-aktionen button { margin: 0 !important; } .rohbau #eig .tafel-aktionen select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--linie); border-radius: 6px; }
.rohbau #eig .feld { display: grid; grid-template-columns: 110px 1fr; gap: 2px 6px; align-items: center; margin: 5px 0; }
.rohbau #eig .feld .quelle { grid-column: 2; font-size: 11px; color: var(--leise2); }
.rohbau #eig .feld.gelb input, .rohbau #eig .feld .quelle.gelb { border-color: #f5c26b; color: #b45309; }
.rohbau #eig .feld.gelb input { background: #fff7e6; }
.rohbau #eig input, .rohbau #eig select { font: inherit; padding: 6px 7px; border: 1px solid var(--linie); border-radius: 6px; width: 100%; min-height: 36px; }
.rohbau #eig .warn { background: #fff7e6; border: 1px solid #f5c26b; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin: 6px 0; }
.rohbau #eig .leer, .rohbau #eig .quelle { color: var(--leise2); font-size: 12px; }
.rohbau #eig .tipp { color: var(--leise2); font-size: 12px; margin: 6px 0; }
/* Zuordnen im Plan (Cowork-Befund, 30.10.2026): „Das ist …“ – zwölf Knöpfe, darüber die Wahl Block oder Ebene */
.rohbau #eig h3 { margin: 4px 0 6px; font-size: 15px; }
.rohbau #eig .zu-art { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: 13px; }
.rohbau #eig .zu-art label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.rohbau #eig .zu-art input { width: 20px; height: 20px; flex: none; margin: 0; }
.rohbau #eig .zu-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.rohbau #eig .zu-wahl button { min-height: 44px; padding: 6px 8px; font-size: 13px; text-align: left; }
/* Bibliothek: Reiter und Liste der Planzuordnungen */
.bib-reiter { display: flex; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.bib-reiter a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie); text-decoration: none; color: inherit; min-height: 20px; }
.bib-reiter a.an { background: var(--rot); border-color: transparent; color: #fff; }
.pz-tabelle select, .pz-tabelle input { width: 100%; min-height: 36px; }
.pz-tabelle td { vertical-align: middle; }
.pz-tabelle td:nth-child(2) { min-width: 280px; }
.pz-tabelle td:nth-child(3) { min-width: 200px; }
.rohbau #eig button { font: inherit; border: 1px solid var(--linie); background: #fff; border-radius: 7px; padding: 6px 10px; cursor: pointer; min-height: 36px; color: var(--dunkel); }
.rohbau #eig button:disabled { opacity: .5; cursor: default; }
/* Unter 1200 px (iPad quer 1024): 2D oder 3D, nicht nebeneinander – „2D + 3D“ entfällt, die Tafel bleibt einklappbar */
@media (max-width: 1199px) {
  .rohbau [data-a=beide] { display: none; }
  .rohbau .rb-haupt { grid-template-columns: 1fr 280px; }
  .rohbau .rb-haupt.ohneTafel { grid-template-columns: 1fr 0; }
  .rohbau .rb-flaechen, .rohbau .rb-haupt.nur2d .rb-flaechen, .rohbau .rb-haupt.nur3d .rb-flaechen { grid-template-columns: 1fr; }
  .rohbau .rb-haupt #drei { display: none; } .rohbau .rb-haupt.nur3d #drei { display: block; } .rohbau .rb-haupt.nur3d #plan { display: none; }
  .rohbau #dreiwerk label, .rohbau #dreiwerk button { min-height: 36px; }
}
@media (max-width: 900px) {
  /* die Leiste bricht um statt abzuschneiden (Cowork-Befund 30.10.2026: „Aus Plan übernehmen“ war rechts weg) */
  .rohbau .rb-kopf { padding: 6px; gap: 4px; }
  .rohbau .grp { padding-right: 4px; margin-right: 2px; }
  .rohbau .menue .mi { position: fixed; left: 8px; right: 8px; top: auto; max-height: 60vh; }
  .rohbau .rb-haupt, .rohbau .rb-haupt.ohneTafel { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .rohbau .rb-haupt.ohneTafel, .rohbau .rb-haupt.ohneTafel.nur2d, .rohbau .rb-haupt.ohneTafel.nur3d { grid-template-columns: 1fr; grid-template-rows: 1fr 0; }
  .rohbau #plan, .rohbau #drei { border-right: 0; border-bottom: 1px solid var(--linie); }
  .rohbau aside { max-height: 42vh; }
  .rohbau #liste { max-height: 30vh; }
  .rohbau #eig { max-height: 60%; }
}

/* Inventur (Abschnitt 12 neu, 27.10.2026): Fragen oben, Zusammenfassung, Liste eingeklappt */
.fragen { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.frage { border: 1px solid #f5c26b; background: #fff7e6; border-radius: 10px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.frage .knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.frage select { padding: 8px; border: 1px solid var(--linie); border-radius: 8px; font: inherit; max-width: 260px; }
.inventur-liste { margin-top: 12px; } .inventur-liste summary { cursor: pointer; color: var(--rot); padding: 6px 0; }
.inventur select { max-width: 220px; }

/* Rohbau: Vorschläge aus anderen Plänen des Geschosses (28.10.2026) */
.rohbau .vorschlaege { border: 1px solid #f5c26b; background: #fff7e6; border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; font-size: 13px; }
.rohbau .vorschlaege .w { color: #6b7280; font-weight: normal; }
.rohbau .vorschlag { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid #f3e2bf; }
.rohbau .vorschlag button { font: inherit; font-size: 12px; padding: 3px 8px; border: 1px solid var(--rot); background: #fff; color: var(--rot); border-radius: 6px; cursor: pointer; }

/* Bereich 3D: Geschoss ohne FFB (28.10.2026) */
.chip.gelb { border-color: #f5c26b; background: #fff7e6; color: #7a4a00; }

/* Produkt aus dem Datenblatt und Systemdurchführung (Cowork-Auftrag, Karte 1649, 30.10.2026) */
.db-form h3 { margin: 12px 0 6px; font-size: 15px; }
.db-form label.db-feld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); }
.db-form label.db-feld input, .db-form label.db-feld select, .db-form label.db-feld textarea { font-size: 15px; color: var(--text, #111); }
.db-feld.gelb input, .db-feld.gelb select, .db-feld.gelb textarea { border-color: #eab308; background: #fffbeb; }
.db-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.db-masse { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.db-tabelle .db-zeile, .db-kopf { display: grid; grid-template-columns: 1.4fr .7fr 2fr auto; gap: 6px; margin: 4px 0; align-items: center; }
.db-kopf { font-size: 12px; color: var(--leise); }
.db-farbe { display: flex; gap: 10px; align-items: center; }
.db-farbe label { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.db-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; border: 1px solid #999; }
.db-varianten { display: flex; flex-wrap: wrap; gap: 4px; }
.db-dl dt { font-size: 12px; color: var(--leise); margin-top: 6px; } .db-dl dd { margin: 0; }
.gelb-text { color: #b45309; }
/* Vorlage aus dem Detailplan (107 Punkt 8): Blätter, Prüfansicht Plan · Maße · 3D */
/* Oberflächen am Material (107 Punkt 8, Schritt 3) */
.obf-reihe { gap: 6px; align-items: center; } .obf-vorschau { display: inline-block; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--linie); background: #f1efe9 center / cover; flex: none; }
.obf-wahl { max-width: 190px; min-height: 34px; font: inherit; }
.obf-neu { margin-top: 10px; } .obf-neu summary { cursor: pointer; color: #821535; font-weight: 600; } .obf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .obf-form input[type=text] { font: inherit; min-height: 34px; }
@media (max-width: 700px) { .obf-form { grid-template-columns: 1fr; } }
.ungeprueft { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fef3c7; color: #92400e; border: 1px solid #eab308; font-size: 12px; font-weight: 600; vertical-align: middle; }
.sd-raster { display: grid; gap: 4px; margin-top: 4px; }
.sd-zelle { font-size: 11px; padding: 6px 2px; border-radius: 4px; border: 1px solid #999; background: #fff; cursor: pointer; }
.sd-zelle.verschlossen { background: #c8102e; color: #fff; border-color: #c8102e; }
.sd-zelle.belegt { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }

/* Bibliothek des 3D-Moduls (Entscheidung 107, 31.10.2026): Bauteil-Typen, Materialien, Querschnitt */
.typ-zeile { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.typ-zeile .grow { flex: 1; min-width: 0; } .typ-zeile .sub { color: var(--leise); font-size: 13px; }
.typ-liste h3 { margin: 12px 0 4px; font-size: 15px; }
.schichten .schicht { display: grid; grid-template-columns: 1.3fr 1.6fr .7fr .8fr auto; gap: 6px; align-items: center; margin: 4px 0; }
.schichten .schicht.kopf { font-size: 12px; color: var(--leise); }
.schichten input, .schichten select, .typ-blatt input[type=text], .typ-blatt select, .typ-blatt textarea { font: inherit; padding: 6px 7px; border: 1px solid var(--linie); border-radius: 6px; width: 100%; min-height: 36px; }
.typ-blatt input[type=color] { width: 44px; height: 36px; padding: 0 2px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
.qs-bild { display: block; max-width: 100%; border: 1px solid var(--linie); border-radius: 8px; background: #fff; margin: 8px 0; }
.mat-zeile { display: grid; grid-template-columns: 44px 1fr auto auto auto; gap: 8px; align-items: center; margin: 4px 0; }
.mat-zeile input[type=text] { font: inherit; padding: 6px 7px; border: 1px solid var(--linie); border-radius: 6px; width: 100%; min-height: 36px; }
.mat-zeile input[type=color] { width: 44px; height: 36px; padding: 0 2px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
.rohbau #eig .typ-blatt { padding: 8px; margin: 0; } .rohbau #eig .schichten .schicht { grid-template-columns: 1fr 1fr .6fr .6fr auto; }
.rohbau #eig .db-zwei, .rohbau #eig .db-masse { grid-template-columns: 1fr; }
.rohbau #eig .typ-zeile { padding: 6px 8px; } .rohbau #eig .mat-zeile { grid-template-columns: 36px 1fr auto; } .rohbau #eig .mat-zeile > .leise { display: none; }
/* Menüs, die rechts über den Fensterrand ragen würden, rückt rohbau.js beim Öffnen nach links (107, 31.10.2026) */
.rohbau .rb-kopf #typWahl, .rohbau .rb-kopf #bgWahl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; white-space: nowrap; }
.rohbau .rb-kopf #typWahl[hidden], .rohbau .rb-kopf #bgWahl[hidden] { display: none; }
.rohbau #typWahl select { max-width: 200px; min-height: 36px; font: inherit; } .rohbau #bgWahl select { max-width: 150px; min-height: 36px; font: inherit; } .rohbau #bgWahl input { min-height: 36px; font: inherit; }

/* „3D-Modell erstellen“ (Entscheidung 111): links Baum, Handgriffe und Bibliothek (einklappbar), in der Mitte das Bau-Werkzeug */
.main.erstellen-seite { position: relative; }
.erst { display: flex; flex: 1; min-height: 0; }
.erst .erst-links { flex: 0 0 280px; width: 280px; display: flex; flex-direction: column; min-height: 0; overflow: auto; background: #fff; border-right: 1px solid var(--linie); }
.erst.zu .erst-links { display: none; }
.erst .erst-auf { display: none; flex: 0 0 28px; width: 28px; border: 0; border-right: 1px solid var(--linie); background: #fff; color: var(--dunkel); font: inherit; cursor: pointer; padding: 0; }
.erst.zu .erst-auf { display: block; }
.erst .erst-mitte { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.erst .links-kopf { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; }
.erst .links-kopf b { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.erst .baum { padding: 0 6px 8px; }
.erst .baum .kn { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: 7px; padding: 7px 8px; color: var(--text); cursor: pointer; min-height: 36px; }
.erst .baum .kn small { color: #6b7280; font-size: 12px; }
.erst .baum .kn:hover { background: #f6f7f9; }
.erst .baum .kn.wurzel { font-weight: 700; color: var(--dunkel); cursor: default; margin-top: 6px; }
.erst .baum .kn.wurzel:hover { background: none; }
.erst .baum .kn.ebene { font-weight: 600; padding-left: 16px; cursor: default; }
.erst .baum .kn.ebene:hover { background: none; }
.erst .baum .kn.ebene.leise .kt { color: #6b7280; font-weight: 500; }
.erst .baum .kn.hier .kt { color: var(--rot); }
.erst .baum .kn.plan { padding-left: 30px; position: relative; }
.erst .baum .kn.plan.vorlage { color: var(--rot); font-weight: 600; text-decoration: none; padding-top: 2px; padding-bottom: 6px; } .erst .baum .kn.plan.vorlage .kt::before { content: "→ "; }
.erst .baum .kn.plan::before { content: "›"; position: absolute; left: 18px; color: #9aa0a8; }
.erst .baum .kn.plan.offen .kt { color: #b45309; }
.erst .baum .kn.plan.leer { color: #9aa0a8; font-size: 13px; cursor: default; }
.erst .baum .kn.plan.leer::before { content: ""; }
.erst .baum .kn.an { background: #fff3e0; }
.erst .baum .kn.an .kt { font-weight: 700; color: var(--dunkel); }
.erst .baum .kn.plan .kennung { color: #9aa0a8; font-size: 11px; letter-spacing: .02em; }
.erst .baum .kn.plan .kt { overflow-wrap: anywhere; line-height: 1.25; }
.erst .baum .kn.plan.doppelt .kt::after { content: ""; }
.erst .baum .marke-doppelt { font-size: 11px; background: #fff3e0; color: #b45309; border: 1px solid #f5c26b; border-radius: 999px; padding: 0 7px; margin: 2px 0; }
.erst .baum .hinweis-doppelt { display: block; cursor: default; background: #fff7e6; border: 1px solid #f5c26b; border-radius: 8px; padding: 8px 10px; margin: 6px 0; font-size: 13px; color: var(--text); }
.erst .baum .hinweis-doppelt b { color: #b45309; } .erst .baum .hinweis-doppelt small { display: block; color: #6b7280; margin-top: 4px; }
.erst .baum .hinweis-doppelt:hover { background: #fff7e6; }
.erst .handgriffe { padding: 6px 10px 10px; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 6px; }
.erst .handgriffe details.mehr summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--leise); padding: 6px 2px; user-select: none; }
.erst .handgriffe details.mehr summary::-webkit-details-marker { display: none; }
.erst .handgriffe details.mehr summary::before { content: "▸ "; } .erst .handgriffe details.mehr[open] summary::before { content: "▾ "; }
.erst .handgriffe .mehr-liste { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 4px; }
.erst .handgriffe .mehr-liste button { font: inherit; text-align: left; border: 1px solid var(--linie); background: #fff; border-radius: 7px; padding: 8px 10px; min-height: 40px; cursor: pointer; color: var(--dunkel); }
.erst .handgriffe .mehr-liste button.rot { color: #c0392b; border-color: #f0c2bd; }
.erst .handgriffe .haupt { width: 100%; }
.erst .handgriffe .reihe { display: flex; gap: 6px; flex-wrap: wrap; }
.erst .bib-links { border-top: 1px solid var(--linie); padding: 10px 12px 16px; font-size: 14px; }
.erst .bib-links h3 { margin: 0 0 6px; font-size: 15px; }
.erst .bib-links .tipp { color: #6b7280; font-size: 12px; margin: 4px 0 8px; }
.erst .bib-links button { font: inherit; border: 1px solid var(--linie); background: #fff; border-radius: 7px; padding: 6px 10px; cursor: pointer; min-height: 36px; color: var(--dunkel); }
.erst .bib-links button:disabled { opacity: .5; cursor: default; }
.erst .bib-links input, .erst .bib-links select { font: inherit; padding: 6px 7px; border: 1px solid var(--linie); border-radius: 6px; width: 100%; min-height: 36px; }
/* Das Einlese-Fenster über der Fläche */
.main.plan-seite .blatt.fenster { width: min(960px, calc(100% - 32px)); max-height: calc(100% - 32px); top: 16px; bottom: 16px; left: 50%; right: auto; transform: translateX(-50%); display: flex; flex-direction: column; padding: 10px 16px 16px; }
.blatt.fenster .fenster-kopf { margin-bottom: 4px; }
.blatt.fenster .fenster-inhalt { overflow: auto; min-height: 0; flex: 1; }
.blatt.fenster .fenster-inhalt h2:first-child { margin-top: 0; }
@media (max-width: 860px) {
  .erst { flex-direction: column; }
  .erst .erst-links { flex: 0 0 auto; width: auto; max-height: 45vh; border-right: 0; border-bottom: 1px solid var(--linie); }
  .erst .erst-auf { flex: 0 0 28px; width: auto; height: 28px; border-right: 0; border-bottom: 1px solid var(--linie); }
  .main.plan-seite .blatt.fenster { left: 0; right: 0; transform: none; width: auto; top: 8px; bottom: 0; }
}

/* Werkstatt (Pflichtenheft „Modul 3D – 3D-Modell erstellen“, 1.11.2026): Bibliothek als Fenster, Teil-Werkstatt, Detailplan-Werkstatt */
.main.plan-seite .blatt.fenster.bib-fenster { width: min(1400px, calc(100% - 32px)); }
.bib-fenster h2 { margin: 0; font-size: 18px; } .bib-fenster .bib-sub { margin-left: 10px; }
.bib-inhalt h3 { margin: 12px 0 6px; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.bib-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 8px; }
.bib-karte { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; background: #fff; min-height: 56px; }
.bib-karte .bib-text { flex: 1; min-width: 0; } .bib-karte b { display: block; font-size: 15px; }
.bib-karte .bib-zeile { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bib-karte .neben.klein, .bib-karte a.neben.klein { white-space: nowrap; }
.bib-karte[data-baugruppe] { grid-column: 1 / -1; }
button.bib-mat { font: inherit; cursor: pointer; } button.bib-mat.an { border-color: var(--rot); box-shadow: 0 0 0 1px var(--rot); } .bib-mat small { color: #6b7280; }
.bib-mat-halter { flex-basis: 100%; } .bib-mat-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; background: #fafafa; }
.bib-mat-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #6b7280; } .bib-mat-form input, .bib-mat-form select { font: inherit; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; }
/* Gelände einlesen nach Ebenen */
.ge .ge-filter { gap: 6px; margin: 6px 0 10px; align-items: center; } .ge .ge-filter button.an { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }
.ge .ge-liste { display: flex; flex-direction: column; gap: 6px; }
.ge .ge-zeile { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(300px, 2fr) 170px; gap: 10px; align-items: center; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; background: #fff; }
.ge .ge-zeile.frage { border-color: #f5c26b; background: #fffaf0; } .ge .ge-zeile.zu:not(.frage) { background: #f6fbf7; }
.ge .ge-name b { display: block; } .ge .ge-name small { display: block; color: #6b7280; font-size: 12px; line-height: 1.3; }
.ge .ge-wahl { display: flex; flex-direction: column; gap: 4px; } .ge .ge-wahl select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--linie); border-radius: 6px; max-width: 100%; }
.ge .ge-woher { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .ge .ge-woher small { color: #6b7280; font-size: 12px; }
.ge .ge-neu { grid-column: 1 / -1; display: flex; gap: 10px; align-items: end; flex-wrap: wrap; border-top: 1px dashed var(--linie); padding-top: 8px; }
.ge .ge-neu label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #6b7280; } .ge .ge-neu input, .ge .ge-neu select { font: inherit; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; }
.ge .ge-stand { font-size: 13px; margin: 0 0 10px; color: #374151; } .ge .ge-unsicher { margin-top: 4px; } .ge .ge-unsicher .gelb, .ge .gelb { color: #b45309; }
@media (max-width: 900px) { .ge .ge-zeile { grid-template-columns: 1fr; } }
.bib-farbe { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); flex: none; display: inline-block; vertical-align: middle; }
.bib-farbe.klein { width: 12px; height: 12px; margin-right: 6px; }
.st { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex: none; }
.st.v { background: #fff7e6; color: #8a5a00; border: 1px solid #f5c26b; } .st.g { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.bib-mats { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bib-mat { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie); border-radius: 14px; padding: 4px 10px; font-size: 13px; background: #fff; }
.bib-mat-neu { display: flex; gap: 6px; align-items: center; } .bib-mat-neu input[type=text], .bib-mat-neu input:not([type]) { width: 180px; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; font: inherit; }
.bib-mat-neu input[type=color] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--linie); border-radius: 6px; }
.bib-neu { border: 1px solid #f5c26b; background: #fff7e6; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.bib-neu h3 { grid-column: 1 / -1; margin: 0; text-transform: none; color: var(--dunkel); font-size: 16px; } .bib-neu .reihe, .bib-neu .hinweis { grid-column: 1 / -1; }
.bib-neu label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; } .bib-neu input, .bib-neu select { font: inherit; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; }
.leiste .kontext { font-weight: 600; }
/* Teil-Werkstatt: links Unterlagen, Mitte 3D groß, rechts Werte */
.tw { display: grid; grid-template-columns: 300px 1fr 400px; flex: 1; min-height: 0; }
.tw-links, .tw-rechts { overflow: auto; background: #fff; min-height: 0; padding: 10px 12px 20px; font-size: 14px; }
.tw-links { border-right: 1px solid var(--linie); } .tw-rechts { border-left: 1px solid var(--linie); }
.tw-mitte { position: relative; min-width: 0; min-height: 0; background: #eef0f3; }
.tw-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.tw-3dhinweis { position: absolute; left: 10px; bottom: 10px; background: rgba(29,34,41,.85); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.tw h3, .dp h3 { margin: 12px 0 6px; font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.tw-kopf h2, .dp-kopf h2 { margin: 0; font-size: 18px; } .tw-stand { font-size: 12px; }
.tw-block { border-top: 1px solid var(--linie); padding-top: 6px; margin-top: 8px; }
.tw-feld { display: grid; grid-template-columns: 170px 1fr; gap: 2px 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed #eef0f3; font-size: 13px; }
.tw-feld label { color: var(--text); } .tw-feld input, .tw-feld select { font: inherit; padding: 5px 7px; border: 1px solid var(--linie); border-radius: 6px; width: 100%; min-height: 34px; }
.tw-feld input.unsicher, .tw-feld.gelb input { background: #fff7e6; border-color: #f5c26b; }
.tw-feld .quelle { grid-column: 2; font-size: 11px; color: #6b7280; } .tw-feld .quelle a { color: var(--rot); } .tw-feld .quelle a.weg { color: #b91c1c; text-decoration: none; font-weight: 700; }
.tw-feld .mit-einheit { display: flex; align-items: center; gap: 6px; } .tw-feld .mit-einheit small { color: #6b7280; width: 28px; }
.tw-neu { display: flex; gap: 6px; margin-top: 8px; } .tw-neu input { font: inherit; padding: 5px 7px; border: 1px solid var(--linie); border-radius: 6px; flex: 1; min-width: 0; }
.tw-tab { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; } .tw-tab th { text-align: left; color: #6b7280; font-weight: 500; padding: 2px 3px; } .tw-tab td { padding: 2px 3px; }
.tw-tab input, .tw-tab select { font: inherit; font-size: 12px; padding: 3px 4px; border: 1px solid var(--linie); border-radius: 4px; }
.tw-tab a.weg { color: #b91c1c; text-decoration: none; font-weight: 700; }
.tw-teile { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tw-teil { border: 1px solid var(--linie); border-radius: 8px; padding: 6px 8px; background: #fafafa; }
.tw-teil-kopf { display: flex; gap: 6px; align-items: center; } .tw-teil-kopf .tw-name { flex: 1; min-width: 0; }
.tw-teil-kopf input, .tw-teil-kopf select, .tw-teil-zahlen input { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--linie); border-radius: 5px; background: #fff; min-height: 30px; }
.tw-teil-kopf select { flex: 1; min-width: 0; margin-top: 4px; } .tw-teil-kopf a.weg { color: #b91c1c; text-decoration: none; font-weight: 700; font-size: 18px; padding: 0 4px; }
.tw-teil-zahlen { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; }
.tw-z { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6b7280; } .tw-z span { min-width: 12px; }
.tw-haken { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; } .tw-haken input { width: 18px; height: 18px; margin: 0; }
.tw .reihe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tw-gross { border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: #f6f7f9; }
.tw-gross img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #fff; }
.tw-gross.leer { padding: 14px; color: #6b7280; font-size: 13px; } .tw-gross-kopf { padding: 6px 8px; font-size: 13px; gap: 6px; }
.tw-quellen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tw-quelle { width: 86px; border: 1px solid var(--linie); border-radius: 8px; padding: 4px; background: #fff; cursor: pointer; font: inherit; font-size: 11px; text-align: left; }
.tw-quelle.an { border-color: var(--rot); box-shadow: 0 0 0 1px var(--rot); } .tw-quelle img { width: 100%; height: 56px; object-fit: cover; border-radius: 4px; display: block; }
.tw-quelle span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.tw-hoch { margin-top: 10px; } .tw-hoch select { font: inherit; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; max-width: 100%; }
.tw-ki { margin-top: 8px; font-size: 13px; }
.tw details.mehr summary, .dp details.mehr summary { list-style: none; cursor: pointer; color: var(--leise); font-size: 14px; padding: 6px 2px; }
.tw .mehr-liste button, .dp .mehr-liste button { font: inherit; border: 1px solid #f0c2bd; color: #c0392b; background: #fff; border-radius: 7px; padding: 8px 10px; cursor: pointer; }
/* Detailplan-Werkstatt */
/* Detailplan-Werkstatt (2.11.2026): Leiste über allem, darunter Plan | 3D | Werte – Plan und 3D gleich groß, ganze Breite */
.dp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr); flex: 1; min-height: 0; }
.dp.ohne3d { grid-template-columns: minmax(0, 1fr) 420px; }
.dp > .dp-leiste { grid-column: 1 / -1; }
.dp-plan { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e9eaee; border-right: 1px solid var(--linie); display: flex; flex-direction: column; }
.dp-canvas { display: block; width: 100%; height: 0; flex: 1 1 0; min-height: 0; touch-action: none; cursor: grab; }
.dp-leiste { padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--linie); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 15px; }
.dp-leiste select, .dp-leiste button { font: inherit; border: 1px solid var(--linie); background: #fff; border-radius: 8px; padding: 7px 12px; min-height: 40px; cursor: pointer; color: var(--dunkel); }
.dp-leiste select { max-width: min(330px, 100%); } .dp-leiste button.ki { background: #fde68a; border-color: #d4a017; color: #3b2a00; font-weight: 600; } .dp-leiste button.ki:disabled { opacity: .7; cursor: wait; } .dp-leiste button.an { background: var(--dunkel); color: #fff; border-color: var(--dunkel); } .dp-leiste button.haupt { background: var(--rot); color: #fff; border-color: var(--rot); }
.dp-leiste .leg { background: #fff; color: #374151; border: 1px solid var(--linie); border-radius: 7px; padding: 5px 9px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.dp-leiste .dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.15); } .dp-leiste .dot.gestrichelt { background: transparent; border: 2px dashed #1d4ed8; } .dp-leiste .dot.ki { background: rgba(232,163,23,.25); border: 2px dashed #c98a00; }
.dp-legende .dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.15); } .dp-legende .dot.gestrichelt { background: transparent; border: 2px dashed #1d4ed8; } .dp-legende .dot.ki { background: rgba(232,163,23,.25); border: 2px dashed #c98a00; }
.dp-legende { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; width: fit-content; max-width: calc(100% - 16px); background: rgba(255,255,255,.95); color: #374151; border: 1px solid var(--linie); border-radius: 8px; padding: 4px 9px; font-size: 13px; pointer-events: none; }
.dp-hinweis { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: center; pointer-events: none; }
.dp-hinweis span { background: rgba(29,34,41,.9); color: #fff; padding: 7px 11px; border-radius: 8px; font-size: 14px; max-width: 700px; }
.dp-rechts { overflow: auto; min-height: 0; background: #fff; padding: 10px 12px 20px; font-size: 15px; }
.dp-plan, .dp-3d, .dp-rechts { grid-row: 2; }
.dp-3d { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #f4f5f7; border-right: 1px solid var(--linie); }
.dp-kopf3 { padding: 6px 10px; background: #fff; border-bottom: 1px solid var(--linie); display: flex; gap: 2px 10px; flex-wrap: wrap; align-items: baseline; font-size: 15px; color: var(--dunkel); }
.dp-kopf3 .leise { font-size: 13px; color: #4b5563; }
.dp-canvas3 { display: block; width: 100%; height: 0; flex: 1 1 0; min-height: 0; touch-action: none; cursor: grab; }
.dp-3d .kein-webgl { flex: 1; color: #374151; font-size: 15px; }
.dp-zeile.ki { background: #fffbeb; } .dp-zeile.ki.an { background: #fde68a; } .dp .st.ki { background: #fde68a; color: #3b2a00; border: 1px solid #d4a017; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.dp-aktionen.ki { background: #fffbeb; border-color: #f5c26b; } .dp-aktionen button.haupt, .dp-aktionen button.neben { width: auto; }
.dp-leiste button.zurueck-blatt { background: #eef2ff; border-color: #c7d2fe; color: #1e3a8a; font-weight: 600; }
.dp-kiliste { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 4px; } .dp-kiliste .reihe button { width: auto; }
.dp-fehlt { border: 1px solid #f5c26b; background: #fffbeb; border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 14px; } .dp-fehlt ul { margin: 4px 0 0 18px; padding: 0; }
.dp .tw-feld select { font: inherit; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; min-width: 0; }
.dp .gelb-text { color: #92400e; }
.dp-knoepfe { gap: 6px; flex-wrap: wrap; margin: 8px 0; } .dp .reihe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dp-liste { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 4px; }
.dp-zeile { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-bottom: 1px solid #eef0f3; padding: 7px 4px; cursor: pointer; min-height: 40px; }
.dp-zeile.an { background: #fbeff1; } .dp-zeile .grow { flex: 1; min-width: 0; } .dp-zeile small { color: #6b7280; }
.dp-teil { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid #eef0f3; } .dp-teil input { width: 18px; height: 18px; margin: 0; } .dp-teil small { color: #6b7280; }
.dp-was { border: 1px solid #f5c26b; background: #fff7e6; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.dp-was h3 { margin: 0; color: var(--dunkel); text-transform: none; font-size: 16px; } .dp-was label { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; font-size: 14px; }
.dp-was input, .dp-was select { font: inherit; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; min-width: 0; }
.dp-fuss { margin-top: 10px; }
.dp-aktionen { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.dp-aktionen select { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--linie); border-radius: 6px; } .dp-aktionen small { flex-basis: 100%; }
.dp-zeile-halter { border-bottom: 1px solid #eef0f3; } .dp-zeile-halter .dp-zeile { border-bottom: 0; } .dp-zeile-knoepfe { gap: 6px; padding: 0 4px 8px; }
button.neben.rot { color: #b91c1c; border-color: #fca5a5; }
.kein-webgl { padding: 16px; color: var(--leise2); font-size: 14px; }
@media (max-width: 1199px) { .tw { grid-template-columns: 260px 1fr 340px; } .dp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 36%); } .dp-leiste { padding: 6px 8px; gap: 5px; } .dp-leiste select, .dp-leiste button { padding: 6px 10px; } .dp-leiste select { max-width: 230px; } .dp.ohne3d { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr); } .dp:not(.ohne3d) .dp-rechts { grid-column: 1 / -1; grid-row: 3; border-top: 1px solid var(--linie); } }
@media (max-width: 860px) { .tw { grid-template-columns: 1fr; grid-template-rows: auto 50vh auto; } .dp, .dp.ohne3d { grid-template-columns: 1fr; grid-template-rows: auto 48vh 48vh auto; overflow: auto; } .dp .dp-rechts { overflow: visible; min-height: auto; } .dp .dp-plan { grid-row: 2; } .dp .dp-3d { grid-row: 3; } .dp .dp-rechts, .dp:not(.ohne3d) .dp-rechts { grid-column: 1; grid-row: 4; } }
/* Knöpfe in Leisten sind so breit wie ihr Text, nicht wie die Zeile */
.leiste button.haupt, .leiste .haupt, .dp-leiste button.haupt, .fenster-kopf button.haupt, .tw .reihe button.haupt { width: auto; }
/* Fenster nutzen die Breite (Sascha, 1.11.2026) – kein Deckel aus .blatt.breit */
.main.plan-seite .blatt.fenster { max-width: none; }
.bib-karte .bib-zeile { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
/* Blätter für „KI schlägt vor“ (2.11.2026): Haken je Blatt in einem Klappmenü an der Leiste der Werkstatt */
.dp-kiwahl { position: relative; }
.dp-kiwahl > summary { list-style: none; border: 1px solid #d4a017; background: #fffbeb; color: #3b2a00; border-radius: 8px; padding: 7px 12px; min-height: 40px; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; }
.dp-kiwahl > summary::-webkit-details-marker { display: none; }
.dp-kiwahl .menue-inhalt { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: min(440px, 92vw); max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 10px 12px; }
.dp-kiwahl .menue-inhalt p { margin: 0 0 8px; font-size: 13px; }
.dp-kiwahl .menue-inhalt .reihe { display: flex; gap: 6px; margin-bottom: 6px; }
.dp-kiblatt { display: flex; gap: 8px; align-items: flex-start; padding: 7px 2px; border-top: 1px solid #f1f1f1; font-size: 14px; cursor: pointer; min-height: 32px; }
.dp-kiblatt input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; }

/* Fortschritt schwerer Arbeit an einem Plan (2.11.2026) */
.arbeit-fortschritt { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #eef2ff; border: 1px solid #c7d2fe; color: #1e3a8a; font-size: 14px; }
.arbeit-fortschritt.fehler { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Planart (Befund 2.11.2026): beim Hochladen gefragt, über „Mehr …“ → „Planart ändern“ umzustellen */
.planart-frage { margin: 4px 0 12px; } .planart-frage > b { display: block; color: var(--dunkel); margin-bottom: 6px; }
.planart-wahl { display: flex; flex-direction: column; gap: 6px; }
.blatt label.planart-karte, label.planart-karte { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; cursor: pointer; color: var(--text); font-size: 15px; }
label.planart-karte input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--rot); }
label.planart-karte span { display: flex; flex-direction: column; gap: 2px; } label.planart-karte small { color: var(--leise); font-size: 13px; line-height: 1.35; }
label.planart-karte:has(input:checked) { border-color: var(--rot); background: #fdf3f5; box-shadow: inset 3px 0 0 var(--rot); }
.planart-woher { margin: 6px 0 0; }
.leiste details.leiste-mehr { position: relative; }
.leiste details.leiste-mehr > summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--dunkel); padding: 7px 12px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; white-space: nowrap; }
.leiste details.leiste-mehr > summary::-webkit-details-marker { display: none; }
.leiste .leiste-mehr-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid var(--linie); border-radius: 10px; box-shadow: var(--schatten); padding: 6px; min-width: 200px; }
.leiste .leiste-mehr-liste button { font: inherit; width: 100%; text-align: left; border: 0; background: none; border-radius: 7px; padding: 9px 10px; cursor: pointer; color: var(--dunkel); }
.leiste .leiste-mehr-liste button:hover { background: #f6eef0; }
/* „Was ist das?“ mit dem Blatt eines neuen Typs (Karte 1649, 2.11.2026): die Liste darüber weicht, das Blatt hat die ganze Höhe */
.rohbau aside.blatt-offen #liste, .rohbau aside.blatt-offen #stat { display: none; }
.rohbau #eig .typ-blatt input[type=checkbox] { width: auto; min-height: 0; } .rohbau #eig .typ-blatt input[type=color] { width: 44px; flex: none; }
/* Form im Detail (3.11.2026): gewähltes Unterteil, fehlendes Maß, Fundstelle; „Aus dem Detail neu bauen“ */
.tw-teil.an { border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(29,78,216,.18); background: #f5f8ff; }
.tw-teil.gelb { border-color: #f5c26b; }
.tw-z.gelb span { color: #b45309; font-weight: 600; } .tw-z input.unsicher { background: #fff7e0; border-color: #e8a317; }
.tw-teil > small { display: block; margin-top: 4px; font-size: 11px; }
a.fs-mini { color: #1d4ed8; text-decoration: none; font-weight: 700; }
.dp-aktionen.dp-neubau { background: #f5f3ff; border-color: #c4b5fd; display: block; }
.dp-aktionen.dp-neubau p { margin: 6px 0; } .dp-aktionen.dp-neubau .reihe { gap: 6px; }
.dp-neubau-liste { margin: 6px 0 8px 18px; padding: 0; font-size: 14px; } .dp-neubau-liste a.weg { color: #b91c1c; text-decoration: none; font-weight: 700; }
.tw-block a.haupt { text-decoration: none; display: inline-flex; align-items: center; width: auto; }

/* Tafel am Teil (teiltafel.js, 3.11.2026): nur die Werte der Form, direkt am angetippten Teil – Teil-Werkstatt, Detailplan-Werkstatt, Lageplan */
.tt { position: absolute; z-index: 30; width: 252px; max-height: calc(100% - 12px); overflow: auto; background: #fff; border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 6px 24px rgba(42,26,26,.18); padding: 8px 10px 10px; font-size: 13px; }
.tt-kopf { display: flex; align-items: flex-start; gap: 6px; } .tt-kopf b { flex: 1; color: var(--dunkel); font-size: 14px; line-height: 1.3; }
.tt-zu { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--leise); padding: 0 2px; }
.tt-unter { font-size: 12px; margin: 1px 0 4px; } .tt-info { font-size: 12px; margin: 2px 0 4px; }
.tt-hinweis { background: #fff7e6; border: 1px solid #f5c26b; border-radius: 6px; padding: 4px 6px; margin: 4px 0 6px; font-size: 12px; color: #6b4a00; }
.tt label.tt-zeile { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; font-size: 13px; color: var(--text); }
.tt-zeile > span:first-child { flex: 1; min-width: 0; }
.tt-wert { display: flex; align-items: center; gap: 3px; } .tt-wert small { width: 18px; color: var(--leise); }
.tt .tt-zeile input, .tt .tt-zeile select { display: inline-block; width: 82px; margin: 0; padding: 4px 6px; min-height: 30px; border-radius: 6px; font-size: 13px; text-align: right; }
.tt .tt-zeile select { width: 130px; text-align: left; }
.tt-zeile.gelb input { background: #fff7e6; border-color: #f5c26b; }
.tt-alle { margin-top: 4px; } .tt-alle summary { cursor: pointer; color: var(--leise); font-size: 12px; margin-bottom: 4px; }
.tt-teile { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.tt-teile button { font-size: 12px; padding: 3px 7px; border: 1px solid var(--linie); border-radius: 12px; background: #fafafa; }
.tt-teile button.gelb { border-color: #f5c26b; background: #fff7e6; }
.ut-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.ut-chips button { font-size: 13px; padding: 5px 9px; border: 1px solid var(--linie); border-radius: 14px; background: #fafafa; text-align: left; }
.ut-chips button.an { border-color: #1d4ed8; background: #f5f8ff; } .ut-chips button.gelb { border-color: #f5c26b; background: #fff7e6; }
.ut-alle > summary { cursor: pointer; color: var(--leise); font-size: 13px; margin: 6px 0; }

/* Hineingehen (Bearbeiten im Kontext, 3.11.2026): oben im 3D der Ort und die Knöpfe */
.tt-ort { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 31; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: rgba(255,255,255,.95); border: 1px solid var(--linie); border-radius: 8px; padding: 5px 8px; font-size: 13px; }
.tt-ort > span:first-child { flex: 1; min-width: 0; }
.tt-teile button.rot { border-color: #f1b5b5; color: #b91c1c; background: #fff5f5; }