/* Tetik Auftragsportal · Gestaltung nach dem Prototyp V10 (docs/prototyp), angeglichen an tetik-immobilien.de
   (Design-Runde 06.11.2026): eckige Formen (höchstens 2 px), Hintergrund #F6F6F4, Karten weiß mit feiner Linie ohne Schatten,
   Hauptknopf Navy, Blau für Links, Auswahl und Akzente, Überschriften DM Sans 500/600, Abstände auf einem 4-px-Raster.
   Immer hell (CI), kein automatischer dunkler Modus. Schrift DM Sans selbst ausgeliefert (SIL OFL, fonts/OFL.txt). */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/DMSans-Regular.14ecdd9d5d0a.woff2") format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/DMSans-Medium.bffbf7174512.woff2") format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/DMSans-SemiBold.4c331407e360.woff2") format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/DMSans-Bold.2f5d3f01dc7b.woff2") format('woff2'); }

/* Layout: Arbeitsportal im Tetik-CI. Navy-Seitenleiste mit Originallogo, helle Arbeitsfläche, Karten nur für abgeschlossene Aufgaben-Einheiten. Mobil: Leiste wird zur Kopfzeile. */
:root {
  color-scheme: light;
  --navy: #0A2C72; --navy-dunkel: #071B38; --navy-ink: #FFFFFF; --navy-muted: #B9C8E6; --navy-hi: rgba(255,255,255,0.14);
  --blue: #034EA1; --blue-hover: #0A2C72; --on-blue: #FFFFFF;
  --ink: #231F20; --muted: #4F4B4C; --faint: #6B6768;
  --bg: #F6F6F4; --surface: #FFFFFF; --surface-2: #EEF1F7; --grau: #EFEFEC; --line: #DCDBD7; --line-strong: #A9A7A3;
  --sel: #E8EEF7; --sel-line: #034EA1;
  --ok: #1D6B43; --ok-soft: #E3F2EA; --warn: #8A5300; --warn-soft: #FCF0DC; --crit: #B42318; --crit-soft: #FBE8E6;

  --illu-wall: #E7ECF4; --illu-wall2: #F3EFE7; --illu-floor: #C7B59A; --illu-floor2: #D9CDB8; --illu-win: #BFD5F0; --illu-line: #7F8BA0; --illu-furn: #5B6E91; --illu-soft: #AEBBD3; --illu-box: #B89C72;
  --font: 'DM Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --r: 2px; --r-lg: 2px;
  --karte: 20px 24px;
}
@media (max-width: 600px) { :root { --karte: 16px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
h1, h2, h3 { text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 18px; line-height: 1.32; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 16px; line-height: 1.36; font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--sel-line); outline-offset: 2px; border-radius: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }

/* Shell: Seitenleiste bündig am Rand, oben und unten (body ohne Rand) */
.shell { display: flex; align-items: stretch; min-height: 100vh; }
.side { flex: 0 0 248px; background: var(--navy); color: var(--navy-ink); display: flex; flex-direction: column; gap: 24px; padding-block: 28px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: 20px; }
.side .logo { width: 168px; height: auto; display: block; }
.side .bereich { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-muted); font-weight: 600; }
.side nav { display: flex; flex-direction: column; gap: 4px; }
.side nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--r); color: var(--navy-ink); text-decoration: none; font-size: 15px; white-space: nowrap; }
.side nav a:hover { background: var(--navy-hi); color: var(--navy-ink); }
.side nav a[aria-current="page"] { background: var(--navy-hi); font-weight: 600; box-shadow: inset 3px 0 0 #FFFFFF; }
.badge { min-width: 24px; height: 24px; border-radius: var(--r); background: #FFFFFF; color: #0A2C72; font-size: 12px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.side .unten { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.side .info a { color: var(--navy-muted); font-size: 14px; }
.user { display: flex; gap: 12px; align-items: center; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 16px; }
.avatar { width: 40px; height: 40px; border-radius: var(--r); background: #FFFFFF; color: #0A2C72; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; flex: none; }
.user .txt span { display: block; } /* nur Name und Rolle; der Avatar bleibt zentriert (Korrektur 02.11.2026) */
.user .rolle { font-size: 12px; color: var(--navy-muted); }
.main { flex: 1 1 auto; min-width: 0; padding-block: 32px 72px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.wrap.schmal { max-width: 900px; }
@media (min-width: 901px) { .main { padding-left: 40px; padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .side { flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block: 12px; padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); }
  .side .logo { width: 120px; }
  .side .bereich { display: none; }
  .side nav { flex-direction: row; flex-wrap: wrap; gap: 4px; width: 100%; }
  .side nav a { min-height: 40px; font-size: 14px; padding: 0 12px; }
  .side nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #FFFFFF; }
  .side .unten { display: none; }
  .main { padding-block: 24px 64px; }
}

/* Bausteine */
.kopf { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; }
.kopf > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 380px; }
.kopf > .pill { margin-bottom: 4px; }
.lead { color: var(--muted); font-size: 15px; max-width: 68ch; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--karte); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card.hervor { border: 2px solid var(--navy); padding: 19px 23px; }
@media (max-width: 600px) { .card.hervor { padding: 15px; } }
.card.leise { background: var(--surface-2); border-color: var(--surface-2); }
.card.gestrichelt { border-style: dashed; border-color: var(--line-strong); }
.card.zeile { flex-direction: row; } /* Karte mit Text links und Knöpfen rechts (vorher als Spalte mit Leerraum) */
.zeile { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.zeile.ende { justify-content: flex-end; }
.zeile.spread { justify-content: space-between; }
.stapel { display: flex; flex-direction: column; gap: 12px; }
.stapel.eng { gap: 8px; }
.raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.raster.klein { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.trenner { border-top: 1px solid var(--line); padding-top: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--navy); color: var(--navy); }
.btn.primaer { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.btn.primaer:hover:not(:disabled) { background: var(--navy-dunkel); border-color: var(--navy-dunkel); color: #FFFFFF; }
.btn.rand { border-color: var(--navy); color: var(--navy); }
.btn.klein { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-size: 14px; font-weight: 600; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.wahl { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.wahl.kompakt { display: flex; flex-wrap: wrap; gap: 8px; }
/* Passt, Weglassen, Fehler: drei gleich breite Knöpfe ohne Umbruch im Wort (Entscheidung 07.11.2026, D1) */
.wahl.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wahl.drei .opt { white-space: nowrap; padding: 8px; display: flex; align-items: center; justify-content: center; }
/* Kategorie in Schritt 1: sechs Knöpfe als 3 + 3 (D3), auf dem Handy 2 + 2 + 2 */
.wahl.kat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .wahl.kat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opt { min-height: 48px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.3; cursor: pointer; text-align: center; }
.opt:hover { border-color: var(--line-strong); }
.opt[aria-pressed="true"] { border: 1px solid var(--sel-line); box-shadow: inset 0 0 0 1px var(--sel-line); background: var(--sel); color: var(--ink); font-weight: 600; }
.wahl.kompakt .opt { min-height: 44px; font-size: 14px; }
.opt.aus { border-style: dashed; color: var(--faint); background: var(--surface-2); cursor: not-allowed; }
/* Chips: eckige Tags, Inhalt senkrecht und waagrecht mittig (Befund Design-Runde 06.11.2026) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.25; text-align: center; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #FFFFFF; font-weight: 600; }
.chip.info { min-height: 28px; padding: 4px 8px; font-size: 13px; cursor: default; background: var(--surface-2); border-color: var(--surface-2); color: var(--ink); }

/* Felder: Frage und „Pflicht“ in einer Zeile, darunter das Eingabefeld */
.feld { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; min-width: 0; }
.feld > input, .feld > select, .feld > textarea { display: block; margin-top: 8px; }
.feld > div, .feld > .datei { margin-top: 8px; }
.feld .hilfe { display: block; margin-top: 4px; font-weight: 400; color: var(--muted); font-size: 13px; }
.pflicht { display: inline-block; margin-left: 4px; color: var(--blue); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 0.12em; white-space: nowrap; }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="email"], select, textarea { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0 12px; font: inherit; font-size: 15px; font-weight: 400; letter-spacing: normal; background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
textarea { padding: 8px 12px; resize: vertical; min-height: 80px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 8px 0; font-size: 15px; font-weight: 400; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.zwei { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }

/* Status: gleicher Status immer gleiche Farbe; „Aktion für mich“ zeigt .tag.aktion, nicht die Farbe (Design-Runde 06.11.2026) */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 24px; padding: 3px 8px; border-radius: var(--r); font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; white-space: nowrap; }
.pill.neutral { background: var(--grau); color: var(--muted); }
.pill.info { background: var(--sel); color: var(--blue); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.crit { background: var(--crit-soft); color: var(--crit); }
.pill.aktion, .tag.aktion { background: var(--navy); color: #FFFFFF; }
.tag { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 2px 8px; border-radius: var(--r); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; vertical-align: 0.08em; white-space: nowrap; }
.hinweis { border-radius: var(--r); padding: 12px 16px; font-size: 14px; background: var(--surface-2); }
.hinweis.warn { background: var(--warn-soft); color: var(--ink); }
.hinweis.ok { background: var(--ok-soft); }
.hinweis.fehler { background: var(--crit-soft); color: var(--ink); box-shadow: inset 4px 0 0 var(--crit); } /* Fehler rot (Freigabe Marcel 08.11.2026) */

.tabelle { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 12px 16px; background: var(--grau); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
td .titel { font-weight: 600; }
td select { min-height: 40px; font-size: 14px; }
tr.fuer-mich td:first-child { box-shadow: inset 3px 0 0 var(--navy); }
.aktion-spalte { text-align: right; white-space: nowrap; }
.tabelle .btn { white-space: nowrap; }
.stapel > .datei { align-self: flex-start; }
details > summary.btn { align-self: flex-start; list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }

/* Assistent: Stepper als eckige Kacheln, alle gleich hoch, Text einzeilig (Design-Runde 06.11.2026) */
.stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.stepper li { flex: 1 1 auto; min-width: 0; }
.stepper a { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper a:hover { border-color: var(--blue); color: var(--ink); }
.stepper a .n { width: 28px; height: 28px; border: 1px solid var(--blue); border-radius: 0; background: var(--surface-2); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; flex: none; }
.stepper a.fertig .n { background: var(--surface-2); color: var(--blue); }
.stepper a[aria-current="step"] { border-color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); color: var(--ink); font-weight: 600; }
.stepper a[aria-current="step"] .n { background: var(--blue); color: #FFFFFF; }
@media (max-width: 600px) { .stepper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.checkliste li { display: flex; gap: 12px; align-items: center; font-size: 14px; min-height: 32px; }
.checkliste .ico { width: 24px; height: 24px; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; font-weight: 700; line-height: 1; }
.checkliste .ja .ico { background: var(--ok-soft); color: var(--ok); }
.checkliste .nein .ico { background: var(--warn-soft); color: var(--warn); }
/* Uploads überall gleich: ein Knopf „… wählen“, der sofort hochlädt (kern/formular.js); ohne JavaScript bleibt der Knopf zum Absenden */
.datei { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r); border: 1px solid var(--navy); color: var(--navy); background: var(--surface); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; position: relative; text-align: center; }
.datei:hover { background: var(--sel); }
.datei:focus-within { outline: 3px solid var(--sel-line); outline-offset: 2px; }
.datei input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.datei.laedt { opacity: 0.6; pointer-events: none; }
.dropzone { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--surface-2); }
.rl-zeile { display: grid; grid-template-columns: 68px minmax(0, 1fr) 104px; /* feste Spalten: alle Namensfelder gleich breit */ gap: 8px; align-items: center; min-width: 0; }
.rl-editor { min-width: 0; }
.rl-editor .rl-zeile, .rl-editor > .zeile { max-width: 640px; } /* Trennlinie über die ganze Karte, Zeilen schmal */
.feld .hilfe.warn-text { color: var(--warn); font-weight: 600; }
.mt-einheit { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.mt-grid .feld { min-width: 0; }
.mt-grid input, .mt-grid select { width: 100%; min-width: 0; min-height: 40px; }
.mt-tabelle td, .mt-tabelle th { white-space: nowrap; }
.feld.schmal-feld { max-width: 360px; }
.rl-zeile input[type="text"], .rl-zeile select { width: 100%; min-width: 0; min-height: 40px; padding: 0 8px; font-size: 14px; }
.rl-zeile .btn { min-height: 40px; }
.rl-zeile .check { min-height: 40px; padding: 0; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.rl-zeile .check input { margin: 0; }
.rl-zeile > .muted { white-space: nowrap; }
.rl-etage { display: block; margin-top: 12px; }
.chips .rl-etage { flex-basis: 100%; margin-top: 4px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--surface-2); border-radius: var(--r); padding: 1px 4px; }
.raum-zeile { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.einbauten { background: var(--surface-2); border-radius: var(--r); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }

/* Fortschritt: am PC acht Balken mit Beschriftung darunter, auf dem Handy kompakt „Schritt 3 von 8 · Fotos“ mit einer Leiste */
.fortschritt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.fortschritt li { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.3; color: var(--muted); min-width: 0; }
.fortschritt li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fortschritt .bar { height: 4px; border-radius: 0; background: var(--line); }
.fortschritt .fertig .bar { background: var(--blue); }
.fortschritt .jetzt .bar { background: var(--blue); opacity: 0.45; }
.fortschritt .jetzt { color: var(--ink); font-weight: 600; }
.fortschritt-kompakt { display: none; }
@media (max-width: 600px) {
  .fortschritt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fortschritt-kompakt { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
  .fortschritt-kompakt progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: 0; background: var(--line); color: var(--blue); }
  .fortschritt-kompakt progress::-webkit-progress-bar { background: var(--line); border-radius: 0; }
  .fortschritt-kompakt progress::-webkit-progress-value { background: var(--blue); border-radius: 0; }
  .fortschritt-kompakt progress::-moz-progress-bar { background: var(--blue); }
}

/* Exposé-Vorschau */
.seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.seite { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.seite[aria-pressed="true"] { border: 1px solid var(--sel-line); box-shadow: inset 0 0 0 1px var(--sel-line); background: var(--sel); }
.mini { aspect-ratio: 3 / 2; max-width: 100%; border-radius: var(--r); background: var(--surface-2); display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; gap: 4px; position: relative; overflow: hidden; }
.mini::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--navy); }
.mini i { display: block; height: 4px; border-radius: 0; background: var(--line-strong); }
.mini i.kurz { width: 55%; }
.mini.bild { background: var(--illu-soft); }
.seite .lbl { font-size: 13px; }
.gross { aspect-ratio: 3 / 2; max-width: 100%; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; padding: 20px; }

/* Visualisierungen */
.vis-paar { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); flex: 999 1 460px; min-width: 0; }
.vis-paar figure { margin: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
.vis-paar figcaption { font-size: 13px; font-weight: 600; }
.kennung { position: absolute; right: 8px; bottom: 32px; font-size: 11px; font-weight: 600; line-height: 1.2; color: #FFFFFF; background: #0A2C72; border-radius: var(--r); padding: 4px 8px; }
svg.raum { width: 100%; height: auto; display: block; border-radius: var(--r); }
svg.raum .w { fill: var(--illu-wall); } svg.raum .w2 { fill: var(--illu-wall2); }
svg.raum .f { fill: var(--illu-floor); } svg.raum .f2 { fill: var(--illu-floor2); }
svg.raum .win { fill: var(--illu-win); stroke: var(--illu-line); stroke-width: 2; }
svg.raum .ln { fill: none; stroke: var(--illu-line); stroke-width: 2; }
svg.raum .ln1 { fill: none; stroke: var(--illu-line); stroke-width: 1.5; }
svg.raum .furn { fill: var(--illu-furn); } svg.raum .soft { fill: var(--illu-soft); } svg.raum .box { fill: var(--illu-box); }
.vis-karte { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.vis-karte .entscheid { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.pfad, .vis-paar figcaption { overflow-wrap: anywhere; word-break: break-word; } /* lange Dateinamen und Prüfsummen bleiben in der Karte (B10) */
details.technik > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
details.technik code { overflow-wrap: anywhere; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.drei .opt { min-height: 44px; font-size: 14px; padding: 4px 8px; }

.kpis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--karte); display: flex; flex-direction: column; gap: 4px; }
.kpi .wert { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; }
.kpi .name { font-size: 14px; font-weight: 600; }
/* Nummerierte Schritte („So läuft ein Auftrag“) wie die Prozessschritte der Homepage: eckiges Kästchen, dünner blauer Rahmen */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); counter-reset: schritt; }
.schritte li { counter-increment: schritt; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.schritte li::before { content: counter(schritt, decimal-leading-zero); width: 40px; height: 40px; margin-bottom: 8px; border: 1px solid var(--blue); background: var(--surface-2); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; line-height: 1; }
.schritte .nr { font-size: 12px; color: var(--blue); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.schritte .nm { font-weight: 600; }
.schritte .zahl { margin-top: 4px; font-size: 13px; color: var(--muted); }
.verlauf { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
/* Aufklappbare Karten mit Pfeil, damit sie nicht leer wirken (Design-Runde 06.11.2026) */
details.card > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; position: relative; padding-right: 32px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); transition: transform 0.15s; }
details.card[open] > summary::after { margin-top: -2px; transform: rotate(225deg); }
details.card > summary:hover::after { border-color: var(--navy); }
details.card > summary .summary-zusatz { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { details.card > summary::after { transition: none; } }
/* Handy-Check 05.11.2026: geschlossene Karte ohne Leerraum (der verborgene Inhalt zählt in Chrome sonst als Flex-Element mit Abstand) */
details.card:not([open]) { gap: 0; }
.liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

.band { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; background: #B42318; border-radius: var(--r); padding: 4px 8px; }
.gross { position: relative; }
.gross-band { left: 12px; top: 12px; font-size: 12px; }
.mini.rot::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: #B42318; }
pre.json { margin: 0; max-height: 420px; overflow: auto; background: var(--surface-2); border-radius: var(--r); padding: 12px 16px; font-size: 12.5px; line-height: 1.5; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; white-space: pre; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); max-width: min(520px, calc(100vw - 32px)); background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: var(--r); font-size: 14px; font-weight: 600; z-index: 50; transition: opacity 0.2s; }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* ---------- Ergänzungen Portal (ohne Inline-Stile, wegen Content-Security-Policy) ---------- */
/* Menü auf dem Handy einklappen (05.11.2026). Auf dem PC und ohne JavaScript wirkt der Rahmen nicht (display: contents). */
.menue { display: contents; }
.menue-knopf { display: none; }
@media (max-width: 900px) {
  .menue-js .menue-knopf { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--navy-muted); border-radius: var(--r); background: none; color: var(--navy-ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; }
  .menue-js .menue-knopf:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
  .menue-js .menue-knopf[aria-expanded="true"] { background: var(--navy-hi); }
  .menue-knopf .striche, .menue-knopf .striche::before, .menue-knopf .striche::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 0; }
  .menue-knopf .striche { position: relative; }
  .menue-knopf .striche::before, .menue-knopf .striche::after { content: ""; position: absolute; left: 0; }
  .menue-knopf .striche::before { top: -6px; }
  .menue-knopf .striche::after { top: 6px; }
  .menue-js .menue { display: none; }
  .menue-js .menue.offen { display: contents; }
}
.side .abmelden { margin: 0; }
.side .abmelden button { background: none; border: 0; padding: 0; color: var(--navy-muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; min-height: 32px; }
.side .abmelden button:hover { color: var(--navy-ink); }
.einfach { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy); padding: 24px 16px; }
.einfach .card { max-width: 460px; width: 100%; }
.einfach .logo-kopf { background: var(--navy); margin: -20px -24px 4px; padding: 24px; border-radius: 0; }
@media (max-width: 600px) { .einfach .logo-kopf { margin: -16px -16px 4px; padding: 20px 16px; } }
.einfach .logo-kopf img { width: 168px; height: auto; display: block; }
.voll { width: 100%; justify-content: center; }
.nachrichten { display: flex; flex-direction: column; gap: 8px; }
.main:has(.wrap.schmal) .nachrichten { max-width: 900px; } /* Meldungen bündig mit der Inhaltsspalte (B10) */
.code-block { align-self: flex-start; }
.form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.form-inline select { width: auto; flex: 1 1 128px; min-height: 40px; font-size: 14px; }
.form-inline .btn { flex: none; }
.spalte-breit { flex: 1 1 300px; min-width: 0; }
a.opt { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
/* Mobil: „So läuft ein Auftrag“ und Abmelden bleiben erreichbar (im Prototyp ausgeblendet) */
@media (max-width: 900px) {
  .side .unten { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 0; width: 100%; }
  .side .unten .user { display: none; }
}

/* ---------- Formularelemente im Aussehen des Prototyps (M2): Radio und Checkbox als .opt und .chip ---------- */
label.opt, label.chip { display: inline-flex; align-items: center; justify-content: center; position: relative; }
.opt input, .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.opt:has(input:checked) { border: 1px solid var(--sel-line); box-shadow: inset 0 0 0 1px var(--sel-line); background: var(--sel); color: var(--ink); font-weight: 600; }
.chip:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #FFFFFF; font-weight: 600; }
.opt:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 3px solid var(--sel-line); outline-offset: 2px; }
.opt:has(input:disabled) { border-style: dashed; color: var(--faint); background: var(--surface-2); cursor: not-allowed; }
.himmel .opt { min-width: 52px; }
.janein .opt { min-width: 72px; }
.speicherstand { font-size: 13px; color: var(--muted); }
[data-zeige-wenn][hidden] { display: none !important; }
.verbergen-mit-js { }
.mit-js .ohne-js { display: none; }
.user .rolle span { text-wrap: balance; } /* kein einzelnes Wort allein in der letzten Zeile */
/* Gäste-Masken (M2): Auftragsauswahl links, Arbeitsbereich rechts, wie im Prototyp, ohne Inline-Stile */
.gast-raster { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.gast-raster > .auswahl { flex: 1 1 260px; min-width: 0; }
.gast-raster > .arbeit { flex: 999 1 540px; min-width: 0; }
.auswahl a.opt { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; text-decoration: none; }
.auswahl a.opt[aria-current="true"] { border: 1px solid var(--sel-line); box-shadow: inset 3px 0 0 var(--sel-line); background: var(--sel); }
/* onOffice-Suche (M6 Teil 1): Treffer wie im Prototyp, gesperrte Objekte gestrichelt */
.auswahl .opt.aus { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; }
.tabelle table.breit { min-width: 560px; }
/* Handy-Check 05.11.2026: Auftragsliste auf dem Handy als Karten, damit der Stand ohne Wischen sichtbar ist */
@media (max-width: 600px) {
  .tabelle table.karten-mobil { min-width: 0; }
  .karten-mobil thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .karten-mobil tr { display: block; padding: 12px 0; border-top: 1px solid var(--line); }
  .karten-mobil tbody tr:first-child { border-top: 0; }
  .karten-mobil td { display: block; border-top: 0; padding: 4px 16px; }
  .karten-mobil .aktion-spalte { text-align: left; padding-top: 8px; }
  .karten-mobil tr.fuer-mich { box-shadow: inset 3px 0 0 var(--navy); }
  .karten-mobil tr.fuer-mich td:first-child { box-shadow: none; }
}
.rl-zeile select { flex: 0 0 auto; }

/* ---------- M4: Exposé prüfen, Seitenvorschau aus dem PDF, Bildvergleich (ohne Inline-Stile wegen CSP) ---------- */
.pruef-raster { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.pruef-seiten { flex: 999 1 520px; min-width: 0; }
.pruef-notiz { flex: 1 1 300px; }
.seite-gross { position: relative; display: flex; flex-direction: column; gap: 8px; }
.seite-bild { position: relative; }
.seite-gross img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--r); background: #FFFFFF; }
a.seite { text-decoration: none; }
.seite img { width: 100%; height: auto; display: block; border-radius: var(--r); border: 1px solid var(--line); background: #FFFFFF; }
.vis-paar img { width: 100%; height: auto; display: block; border-radius: var(--r); background: var(--surface-2); }
.pill-start { align-self: flex-start; }
.karte-text { flex: 1 1 300px; min-width: 0; }
.schmal-karte { max-width: 760px; }

/* Name in einer Kopfzeile in Versalien (Befund M2-Abnahme 04.11.2026): Namen bleiben, wie sie sind */
.eyebrow .name { text-transform: none; letter-spacing: normal; }