/* Befundassistent: Look nach dem Briefpapier des Büros Lackner. Navy-Bänder, Weiß, Silbergrau aus dem Siegel,
   geometrische Grotesk (Questrial) in Versalien für Titel und Kennzahlen, Systemschrift für alles, was man draußen lesen muss.
   Farbwerte stehen in unterlagen/marke/farben.json, der Test prüft die beiden :root-Blöcke unten. */

@font-face { font-family: "Questrial"; src: url("schrift/questrial-latin.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: light dark;
  --navy: #0f2d5b;
  --navy-tief: #0a1f40;
  --silber: #899196;
  --silber-hell: #d5dade;
  --grund: #eef1f5;
  --flaeche: #ffffff;
  --flaeche2: #f5f7fa;
  --text: #0b1a30;
  --text2: #4d5a6b;
  --text3: #5f6978;
  --trenner: rgba(15, 45, 91, .12);
  --aktion: #0f2d5b;
  --aktion-hell: #e6ecf5;
  --auf-aktion: #ffffff;
  --gruen: #1d7a4c;
  --gruen-hell: #e2f2e9;
  --orange: #9a5b00;
  --orange-hell: #fbf0dc;
  --rot: #b42318;
  --leiste: rgba(255, 255, 255, .86);
  --papier: #ffffff;
  /* Diagramme auf heller Fläche */
  --d1: #0f2d5b; --d2: #4a6fa5; --d3: #899196; --d4: #9fb6d6; --d5: #c9cfd5;
  /* Schrift, Abstände (4er-Skala), Radien, Tiefe, Bewegung */
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --titel: "Questrial", "Century Gothic", "Avenir Next", var(--schrift);
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 20px; --a6: 24px; --a8: 32px;
  --r-klein: 10px; --radius: 16px; --r-gross: 24px;
  --schatten-1: 0 1px 2px rgba(11, 26, 48, .06), 0 8px 24px -14px rgba(11, 26, 48, .28);
  --schatten-2: 0 2px 6px rgba(11, 26, 48, .08), 0 24px 48px -22px rgba(11, 26, 48, .45);
  --dauer-kurz: .18s; --dauer-mittel: .5s; --kurve: cubic-bezier(.2, .8, .2, 1);
  --tabhoehe: 60px; --kopfhoehe: 56px; --tabbreite: 76px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: #071830; --flaeche: #0e2445; --flaeche2: #15305a; --text: #f1f4f9; --text2: #b3c0d2; --text3: #96a5bc;
    --trenner: rgba(169, 196, 239, .16); --aktion: #a8c4ef; --aktion-hell: #1b3a68; --auf-aktion: #0a1f40;
    --gruen: #63d69e; --gruen-hell: #11372a; --orange: #f2b45a; --orange-hell: #3a2a0c; --rot: #ff8a80;
    --leiste: rgba(7, 24, 48, .86);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --d1: #ffffff; --d2: #8fb0e0; --d3: #b8c0c7; --d4: #4f78b5; --d5: #6b7a8c;
    --papier: #eef1f5;
    --schatten-1: 0 0 0 1px rgba(169, 196, 239, .08), 0 10px 28px -16px rgba(0, 0, 0, .7);
    --schatten-2: 0 0 0 1px rgba(169, 196, 239, .1), 0 26px 50px -22px rgba(0, 0, 0, .8);
  }
}

/* Einstellungen › Darstellung: „Dunkel“ gilt auch bei hellem System, „Hell“ schaltet die beiden Blöcke oben ab */
:root[data-thema="dunkel"] {
  color-scheme: dark;
    --grund: #071830; --flaeche: #0e2445; --flaeche2: #15305a; --text: #f1f4f9; --text2: #b3c0d2; --text3: #96a5bc;
    --trenner: rgba(169, 196, 239, .16); --aktion: #a8c4ef; --aktion-hell: #1b3a68; --auf-aktion: #0a1f40;
    --gruen: #63d69e; --gruen-hell: #11372a; --orange: #f2b45a; --orange-hell: #3a2a0c; --rot: #ff8a80;
    --leiste: rgba(7, 24, 48, .86);
    --d1: #ffffff; --d2: #8fb0e0; --d3: #b8c0c7; --d4: #4f78b5; --d5: #6b7a8c;
    --papier: #eef1f5;
    --schatten-1: 0 0 0 1px rgba(169, 196, 239, .08), 0 10px 28px -16px rgba(0, 0, 0, .7);
    --schatten-2: 0 0 0 1px rgba(169, 196, 239, .1), 0 26px 50px -22px rgba(0, 0, 0, .8);
}
:root[data-thema="hell"] { color-scheme: light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--grund); }
body {
  margin: 0; color: var(--text); background: var(--grund); font: 17px/1.45 var(--schrift);
  -webkit-text-size-adjust: 100%; letter-spacing: -.005em; padding-top: env(safe-area-inset-top);
}
input, textarea, select, button { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
.icon { flex: none; }
a { color: var(--aktion); }
:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; }
/* Versalien mit Laufweite wie auf dem Briefpapier; <b> darin = der fette Teil („ERWIN LACKNER“) */
.versal { font-family: var(--titel); text-transform: uppercase; letter-spacing: .12em; font-weight: 400; }
.versal b { font-weight: 400; -webkit-text-stroke: .045em currentColor; }

/* ---------- Kopf: Navy-Band ---------- */
#kopf {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--a3); min-height: var(--kopfhoehe);
  padding: 6px var(--a4); background: var(--navy); color: #fff; view-transition-name: kopf;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 24px -18px rgba(10, 31, 64, .9);
}
#kopf::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, var(--silber-hell), var(--silber) 60%, transparent); opacity: .7; }
.marke { display: flex; align-items: center; gap: var(--a3); flex: 1; min-width: 0; }
.siegel { width: 34px; height: 34px; flex: none; }
.wortmarke { font-size: 15px; letter-spacing: .2em; white-space: nowrap; }
/* Flex-Kind schrumpft sonst nicht unter seine Textbreite und läuft unter den Abgleich-Stand: kürzen statt überlappen */
#kopf .wortmarke { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zurueck { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: #fff; text-decoration: none; font-size: 16px; min-width: 0; opacity: .92; }
.zurueck span { white-space: nowrap; }
.kopftitel { flex: 1; text-align: center; min-width: 0; }
.kopftitel b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 15px/1.2 var(--titel); text-transform: uppercase; letter-spacing: .16em; }
#kopf .dring { --spur: rgba(255, 255, 255, .18); --bogen: #fff; font-size: 11px; }
#status { font-size: 12px; color: #cfe8da; position: absolute; right: 64px; top: 20px; }
#status:not(:empty) { animation: auftauchen var(--dauer-kurz) var(--kurve); }

/* ---------- Gerüst ---------- */
.rahmen { display: flex; align-items: flex-start; min-height: calc(100vh - var(--kopfhoehe)); }
#seiten { display: none; }
#inhalt { flex: 1; min-width: 0; padding: var(--a5) var(--a4) calc(30px + env(safe-area-inset-bottom)); max-width: 1000px; margin: 0 auto; view-transition-name: inhalt; }
.grosstitel { font: 400 26px/1.15 var(--titel); text-transform: uppercase; letter-spacing: .1em; margin: 6px 0 var(--a5); color: var(--text); }
.grosstitel::after { content: ''; display: block; width: 40px; height: 3px; margin-top: 10px; background: var(--aktion); border-radius: 2px; }
#inhalt.rein { animation: rein .3s var(--kurve); }
@keyframes rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes zeichnen { from { stroke-dasharray: 0 100; } }

/* Seitenwechsel per View Transitions (Safari 18); ohne Unterstützung greift .rein */
::view-transition-old(inhalt) { animation: .16s ease-in both raus; }
::view-transition-new(inhalt) { animation: .34s var(--kurve) both rein; }
@keyframes raus { to { opacity: 0; transform: translateY(-6px); } }

/* Gestaffeltes Einblenden */
.gliste > *, .kacheln > *, .aktionen > *, .neben > *, .bkacheln > *, .fkacheln > *, .home-neben > *, .held-text > *, .kennzahlen > *, .wertkarte > * { animation: auftauchen var(--dauer-mittel) var(--kurve) both; }
:is(.gliste, .kacheln, .aktionen, .neben, .bkacheln, .fkacheln, .home-neben, .held-text, .kennzahlen, .wertkarte) > :nth-child(2) { animation-delay: 50ms; }
:is(.gliste, .kacheln, .aktionen, .neben, .bkacheln, .fkacheln, .home-neben, .held-text, .kennzahlen, .wertkarte) > :nth-child(3) { animation-delay: 100ms; }
:is(.gliste, .kacheln, .aktionen, .neben, .bkacheln, .fkacheln, .home-neben, .held-text, .kennzahlen, .wertkarte) > :nth-child(4) { animation-delay: 150ms; }
:is(.gliste, .kacheln, .aktionen, .neben, .bkacheln, .fkacheln, .home-neben, .held-text, .kennzahlen, .wertkarte) > :nth-child(5) { animation-delay: 200ms; }
:is(.gliste, .kacheln, .aktionen, .neben, .bkacheln, .fkacheln, .home-neben, .held-text, .kennzahlen, .wertkarte) > :nth-child(n+6) { animation-delay: 250ms; }

/* ---------- Tab-Leiste (Handy, iPad hochkant): immer senkrecht am rechten Rand, auch nach dem Drehen ---------- */
#tabs {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 29; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
  width: calc(var(--tabbreite) + env(safe-area-inset-right));
  padding: calc(var(--kopfhoehe) + 11px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;   /* Kopf liegt darüber */
  background: var(--leiste); backdrop-filter: saturate(160%) blur(20px); border-left: 1px solid var(--trenner); view-transition-name: tabs; overflow-y: auto;
}
#tabs:empty { display: none; }
@media (max-width: 899px) { body:has(#tabs:not(:empty)) #inhalt { padding-right: calc(var(--tabbreite) + var(--a4) + env(safe-area-inset-right)); } }
#tabs a { flex: 0 1 68px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
  color: var(--text2); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
#tabs a .icon { padding: 3px 14px; width: 52px; height: 30px; border-radius: 999px; transition: background var(--dauer-kurz), color var(--dauer-kurz); }
#tabs a.an { color: var(--aktion); }
#tabs a.an .icon { background: var(--aktion-hell); }

/* ---------- Seitenleiste (iPad, Desktop) ---------- */
@media (min-width: 900px) {
  body.im-gutachten #seiten {
    display: block; position: sticky; top: var(--kopfhoehe); flex: 0 0 300px; height: calc(100vh - var(--kopfhoehe)); overflow-y: auto;
    padding: var(--a5) var(--a3) 30px; background: var(--flaeche); border-left: 1px solid var(--trenner); view-transition-name: seiten;
    order: 2; padding-right: calc(var(--a3) + env(safe-area-inset-right));   /* Bedienung immer rechts */
  }
  body.im-gutachten #tabs { display: none; }
  body.im-gutachten #inhalt { padding-bottom: 60px; }
  .kopftitel { text-align: left; }
}
.sl-kopf { padding: 4px 10px 14px; display: grid; gap: 4px; }
.sl-kopf b { font: 400 16px/1.25 var(--titel); text-transform: uppercase; letter-spacing: .08em; }
.sl-kopf small { color: var(--text2); font-size: 13.5px; }
.sl-titel { font: 400 12px var(--titel); color: var(--text2); text-transform: uppercase; letter-spacing: .16em; padding: 16px 12px 8px; }
.sl-gruppe { display: grid; gap: 2px; }
.sl-zeile { display: flex; align-items: center; gap: var(--a3); padding: 8px 10px; min-height: 50px; color: var(--text); text-decoration: none;
  border-radius: 14px; transition: background var(--dauer-kurz), transform var(--dauer-kurz); }
.sl-zeile:active { transform: scale(.98); }
.sl-zeile.an { background: var(--navy); color: #fff; box-shadow: var(--schatten-1); }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .sl-zeile.an { background: #1d4785; } }
:root[data-thema="dunkel"] .sl-zeile.an { background: #1d4785; }
.sl-zeile.an .dring { --spur: rgba(255, 255, 255, .2); --bogen: #fff; color: #fff; }
.sl-zeile .icon:last-child { color: var(--text3); margin-left: 2px; }
.sl-zeile.an .icon:last-child { color: rgba(255, 255, 255, .8); }
.sl-ik { width: 34px; height: 34px; border-radius: 50%; background: var(--aktion-hell); color: var(--aktion); display: grid; place-items: center; }
.sl-zeile.an .sl-ik { background: rgba(255, 255, 255, .16); color: #fff; }
.sl-zeile .dring { color: var(--aktion); }
.sl-text { flex: 1; font-weight: 500; }
.sl-stand { font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; }
.sl-zeile.an .sl-stand { color: rgba(255, 255, 255, .85); }
.sl-unterliste { display: grid; margin: 0 0 4px 27px; padding-left: 20px; border-left: 2px solid var(--trenner); }
.sl-unter { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--text2); text-decoration: none; font-size: 15px; }
.sl-unter.an { color: var(--aktion); background: var(--aktion-hell); font-weight: 600; }
.sl-version { color: var(--text3); font-size: 12px; padding: 16px 12px 0; }

/* ---------- Diagramme ---------- */
.dring { --g: 44px; --spur: var(--trenner); --bogen: var(--aktion); position: relative; display: inline-grid; place-items: center; width: var(--g); height: var(--g); flex: none; }
.dring > svg, .kapitelring > svg, .donut-bild > svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dring-mitte .icon { display: block; }
.dring-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
circle { fill: none; }
.spur { stroke: var(--spur, var(--trenner)); }
.bogen { stroke: var(--bogen, var(--aktion)); stroke-linecap: round; animation: zeichnen 1s var(--kurve) both; }
.bogen.voll { stroke: var(--gruen); }
.kapitelring { --spur: var(--trenner); position: relative; width: 200px; aspect-ratio: 1; }
.kapitelring circle { stroke-width: 8; }
.kapitelring .siegel { stroke: var(--silber); stroke-width: .6; stroke-dasharray: 1 1.6; opacity: .8; }
.kapitelring .bogen { stroke-linecap: butt; }
.kapitelring b { font: 400 46px/1 var(--titel); letter-spacing: .02em; }
.kapitelring small { font-size: 12px; color: var(--text2); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.donut { display: flex; align-items: center; gap: var(--a6); flex-wrap: wrap; }
.donut-bild { position: relative; width: 168px; aspect-ratio: 1; flex: none; }
.donut-bild circle { stroke-width: 13; }
.donut .seg { animation: zeichnen 1.1s var(--kurve) both; }
.donut .dring-mitte b { font: 400 22px/1 var(--titel); }
.donut .dring-mitte small { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 210px; flex: 1; }
.legende li { display: grid; grid-template-columns: 12px 1fr auto; column-gap: 10px; align-items: baseline; font-size: 14.5px; }
.legende i { width: 12px; height: 12px; border-radius: 4px; align-self: center; }
.legende b { font-variant-numeric: tabular-nums; font-weight: 600; }
.legende small { grid-column: 2 / 4; font-size: 12.5px; opacity: .8; font-variant-numeric: tabular-nums; }

/* ---------- Abschnitte als Karten ---------- */
.block { margin: 0 0 var(--a6); background: var(--flaeche); border-radius: var(--r-gross); box-shadow: var(--schatten-1); overflow: hidden;
  animation: auftauchen var(--dauer-mittel) var(--kurve) both; }
.block + .block { animation-delay: 60ms; }
/* Navy-Kopfband je Karte, wie das Band des Briefpapiers */
.block > h2 { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 13px var(--a5);
  font: 400 13px var(--titel); text-transform: uppercase; letter-spacing: .14em; color: #fff;
  background: linear-gradient(90deg, var(--navy-tief), var(--navy) 70%, #1b4280); }
.block > h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--silber), transparent); opacity: .6; }
.block h2 .nr { font: 600 12px var(--schrift); font-variant-numeric: tabular-nums; color: #fff; background: rgba(255, 255, 255, .16); border-radius: 6px; padding: 2px 7px; letter-spacing: .02em; }
.block h2 .titel { flex: 1; min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }   /* lange Wörter (BEHÖRDENUNTERLAGEN) laufen am Handy nicht in den Stand */
.block h2 .klein, .block h2 .kopfaktionen { text-transform: none; letter-spacing: 0; font-family: var(--schrift); }
.block > h2 .klein { min-height: 44px; padding: 4px 12px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 14px; }
.stand { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 600 11.5px var(--schrift); letter-spacing: .02em; text-transform: none; }
.stand.offen { background: rgba(255, 255, 255, .14); color: #dbe3ee; }
.stand.fertig { background: rgba(127, 217, 168, .2); color: #b6f2d1; }
.gruppe { padding: 0 var(--a5) var(--a2); overflow-x: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .block > h2 { background: linear-gradient(90deg, #12366b, #1b4280 70%, #23508f); } }
:root[data-thema="dunkel"] .block > h2 { background: linear-gradient(90deg, #12366b, #1b4280 70%, #23508f); }
.gruppe > .hinweis:first-child { margin-top: 14px; }
h3 { font-size: 15px; font-weight: 600; margin: 18px 0 8px; }

/* Felder als Zeilen: Label links, Wert rechts */
.raster { display: block; }
.feld { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 0; box-shadow: inset 0 -1px 0 var(--trenner); position: relative; }
.feld:last-child { box-shadow: none; }
.feld > span:first-child { flex: 0 0 auto; max-width: 42%; color: var(--text); font-size: 16px; }
.feld > span:first-child:empty { display: none; }
.feld i { font-style: normal; color: var(--text2); font-size: 14px; }
.feld small { display: none; }
.feld:focus-within { box-shadow: inset 0 -2px 0 var(--aktion); }
input, select { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: transparent; text-align: right; font-size: 17px;
  font-variant-numeric: tabular-nums; color: var(--text); }
input:not([type=radio]):not([type=checkbox]), select { min-height: 44px; }   /* Touch-Ziel ≥ 44 px */
input::placeholder, textarea::placeholder { color: var(--text3); }
input:focus, select:focus, textarea:focus { outline: none; }
select { appearance: none; padding-right: 18px; background-image: linear-gradient(45deg, transparent 50%, var(--text2) 50%), linear-gradient(135deg, var(--text2) 50%, transparent 50%);
  background-position: calc(100% - 8px) 55%, calc(100% - 3px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.feld:has(textarea) { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 0; }
.feld:has(textarea) > span { max-width: none; color: var(--text2); font-size: 13px; }
textarea { width: 100%; border: 0; background: transparent; padding: 2px 0; resize: none; font-size: 17px; line-height: 1.45; min-height: 76px; }
.feld.breit { width: 100%; }

/* Tabellen */
.tab { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.tab th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text2); padding: 10px 6px 6px; text-transform: uppercase; letter-spacing: .06em; }
.tab td { padding: 2px 3px; }
.tab .feld { box-shadow: none; min-height: 44px; padding: 0; }
.tab input { text-align: left; padding: 8px; background: var(--flaeche2); border-radius: 8px; font-size: 15px; }

/* ---------- Knöpfe ---------- */
button { cursor: pointer; }
.knopf, .klein, .gross {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 8px 16px;
  border: 0; border-radius: 12px; background: var(--aktion-hell); color: var(--aktion); font-size: 15px; font-weight: 600;
  transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz), opacity var(--dauer-kurz);
}
.knopf:active, .klein:active, .gross:active { transform: scale(.96); }
.knopf { background: var(--aktion); color: var(--auf-aktion); }
.knopf.leise, .klein { background: var(--aktion-hell); color: var(--aktion); }
.gross { width: 100%; min-height: 54px; background: var(--aktion); color: var(--auf-aktion); font-size: 17px; border-radius: 14px; margin: 12px 0; box-shadow: var(--schatten-1); }
.knopf.rund { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; }
.dateiknopf { cursor: pointer; }
.kopfaktionen, .planneu { display: flex; gap: 8px; flex-wrap: wrap; }
.planneu { padding: 12px 0; }
.gruppe > .klein, .gruppe > .kopfaktionen { margin: 12px 0 16px; }
.fusszeile-aktion { margin: var(--a8) 0 0; text-align: center; }
@media (hover: hover) {
  .knopf:hover, .klein:hover { box-shadow: 0 6px 16px -10px rgba(15, 45, 91, .6); }
}

/* ---------- Start (Dashboard) ---------- */
.start { max-width: 1120px; margin: 0 auto; }
.held {
  position: relative; overflow: hidden; margin: 0 0 var(--a6); border-radius: var(--r-gross); isolation: isolate;
  background: var(--papier); color: var(--navy); box-shadow: var(--schatten-2);
}
/* Papierbogen wie das Briefpapier: weiß oben, Navy-Band unten. Bleibt auch im dunklen Modus Papier. */
.held-oben { position: relative; min-height: 300px; padding: var(--a8) var(--a8) var(--a6); display: flex; align-items: center; }
.held-text { position: relative; max-width: 46%; }
.held .datum { margin: 0 0 8px; font: 400 12.5px var(--titel); text-transform: uppercase; letter-spacing: .2em; color: #4d5a6b; }
.held h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); line-height: 1.05; letter-spacing: .08em; }
.held-unter { margin: 12px 0 0; font-size: 15px; color: #4d5a6b; max-width: 360px; }
.held-bild { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 72%; object-fit: cover; object-position: right center;
  mix-blend-mode: multiply; animation: bild-rein 1.2s var(--kurve) both; }
@keyframes bild-rein { from { opacity: 0; transform: translateX(24px) scale(1.03); } }
/* Leichte Parallaxe beim Scrollen, wo der Browser scroll-gesteuerte Animationen kann */
@supports (animation-timeline: view()) {
  .held-bild { animation: bild-rein 1.2s var(--kurve) both, parallaxe linear both; animation-timeline: auto, view(); animation-range: normal, exit; }
  @keyframes parallaxe { to { transform: translateY(-28px); } }
}
.kennzahlen { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); color: #fff;
  background: linear-gradient(90deg, var(--navy-tief), var(--navy) 50%, #1b4280); border-bottom: 4px solid var(--silber); }
.kennzahlen > div { padding: var(--a4) var(--a6) var(--a5); display: grid; gap: 4px; align-content: start; }
.kennzahlen > div + div { border-left: 1px solid rgba(255, 255, 255, .14); }
.kennzahlen b { font: 400 38px/1 var(--titel); font-variant-numeric: tabular-nums; }
.kennzahlen span { font-size: 12px; color: #c9d4e4; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.statusbalken { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .14); margin-top: 6px; gap: 2px; }
.statusbalken i { display: block; height: 100%; animation: wachsen .9s var(--kurve) both; transform-origin: left; }
@keyframes wachsen { from { transform: scaleX(0); } }
.statusbalken .s-neu { background: #8fa8cc; } .statusbalken .s-arbeit { background: #f2c46d; } .statusbalken .s-fertig { background: #7fd9a8; }
.spalten { display: grid; grid-template-columns: 1fr; gap: var(--a6); }
@media (min-width: 960px) { .spalten { grid-template-columns: 1fr 320px; align-items: start; } }
.abschnittstitel { display: flex; align-items: center; gap: 10px; font: 400 14px var(--titel); text-transform: uppercase; letter-spacing: .18em; color: var(--text2); margin: var(--a8) 0 var(--a3); }
.abschnittstitel::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--aktion); }
.aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a4); }
.aktionen .kachel { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--a3); align-items: center; min-height: 92px; }
.aktionen .kachel .ki { grid-row: span 2; margin: 0; }
.aktionen .kachel .kl { align-self: end; }
.aktionen .kachel small { align-self: start; }
.kachel { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--a5); min-height: 124px; border: 0;
  border-radius: var(--r-gross); background: var(--flaeche); color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
  box-shadow: var(--schatten-1); transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz); }
.kachel:active { transform: scale(.98); }
@media (hover: hover) { .kachel:hover, .gkarte:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); } }
.kachel .ki { width: 44px; height: 44px; border-radius: 50%; background: var(--aktion-hell); color: var(--aktion); display: grid; place-items: center; margin-bottom: 6px; }
.kachel .ki.gelb { background: var(--orange-hell); color: var(--orange); }
.kachel .kl { font-weight: 600; font-size: 17px; }
.kachel small { color: var(--text2); font-size: 14px; }
.kachel.primaer { background: linear-gradient(135deg, #1b4280, var(--navy) 55%, var(--navy-tief)); color: #fff; box-shadow: 0 16px 34px -18px rgba(15, 45, 91, .9); }
.kachel.primaer::after { content: ''; position: absolute; right: -50px; bottom: -70px; width: 170px; height: 170px; border-radius: 50%;
  border: 14px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 18px rgba(255, 255, 255, .04); }
.kachel.primaer .ki { background: #fff; color: var(--navy); }
.kachel.primaer small { color: #c9d4e4; }
.karte { position: relative; background: var(--flaeche); border-radius: var(--r-gross); padding: var(--a5); margin-bottom: var(--a4); display: grid; gap: var(--a3); box-shadow: var(--schatten-1); }
.karte .kopfzeile { display: flex; align-items: center; gap: 10px; }
.karte .kopfzeile > .icon { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--aktion-hell); color: var(--aktion); }
.karte .kopfzeile b { flex: 1; font: 400 14px var(--titel); text-transform: uppercase; letter-spacing: .14em; }
.karte p { margin: 0; color: var(--text2); font-size: 14px; }
.karte .mail { color: var(--text); font-size: 15px; }
.karte .reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.karte input { text-align: left; background: var(--flaeche2); border: 1px solid var(--trenner); border-radius: 12px; padding: 11px 12px; font-size: 16px; }
.karte input:focus { border-color: var(--aktion); }
.konto.aus { box-shadow: var(--schatten-1), inset 4px 0 0 var(--orange); }
.konto.aus .kopfzeile > .icon { background: var(--orange-hell); color: var(--orange); }
.speicher-zeile { display: flex; align-items: center; gap: var(--a4); }
.speicher-zeile .dring { --g: 64px; font-size: 13px; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--text3); }
.punkt.an { background: var(--gruen); box-shadow: 0 0 0 4px var(--gruen-hell); animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 7px var(--gruen-hell); } }
#syncstatus { font-size: 13px; color: var(--text2); }
#mfa-bereich { display: grid; gap: var(--a3); justify-items: start; }
#mfa-bereich:empty { display: none; }
#mfa-bereich form { display: flex; gap: 8px; width: 100%; }
#mfa-bereich form input { flex: 1; min-width: 0; }
.balken { height: 6px; border-radius: 999px; background: var(--trenner); overflow: hidden; }
.balken.dick { height: 8px; }
.balken i { display: block; height: 100%; background: var(--aktion); border-radius: inherit; animation: wachsen .9s var(--kurve) both; transform-origin: left; }
.gliste { display: grid; gap: var(--a3); }
.gkarte { position: relative; display: grid; grid-template-columns: 88px 1fr auto auto; gap: var(--a4); align-items: center; padding: var(--a3) var(--a4) var(--a3) var(--a3);
  background: var(--flaeche); border-radius: 20px; color: var(--text); text-decoration: none; box-shadow: var(--schatten-1);
  transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz); }
.gkarte:active { transform: scale(.99); }
.gkarte .dring { --g: 52px; font-size: 13px; }
.gbild { --f: #0f2d5b; width: 88px; height: 76px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--f), color-mix(in srgb, var(--f) 60%, #000)); color: #fff; font: 400 30px var(--titel); }
.gbild img { width: 100%; height: 100%; object-fit: cover; }
.gtext { display: grid; gap: 4px; min-width: 0; }
.gzeile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gzeile b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pille { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--flaeche2); color: var(--text2); text-transform: uppercase; letter-spacing: .06em; }
.pille.arbeit { background: var(--orange-hell); color: var(--orange); }
.pille.fertig { background: var(--gruen-hell); color: var(--gruen); }
.pille.neu { background: var(--aktion-hell); color: var(--aktion); }
.gtext small { color: var(--text2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmeta .stichtag { color: var(--text); font-weight: 600; }
.gmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text2); font-size: 13px; font-variant-numeric: tabular-nums; }
.suchfeld { display: flex; align-items: center; gap: 10px; margin-top: var(--a5); padding: 4px 16px; max-width: 520px; border-radius: 16px;
  background: #fff; color: #4d5a6b; box-shadow: 0 0 0 1px rgba(15, 45, 91, .16), 0 10px 24px -16px rgba(15, 45, 91, .5); }
.suchfeld:focus-within { box-shadow: 0 0 0 2px var(--navy), 0 10px 24px -16px rgba(15, 45, 91, .5); }
.held #suche { flex: 1; margin: 0; padding: 12px 0; border: 0; box-shadow: none; background: transparent; color: #0b1a30; font-size: 17px; }
.held #suche::placeholder { color: #5f6978; }
.filter-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--a3); }
.filter { min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(15, 45, 91, .2); background: rgba(255, 255, 255, .7); color: var(--navy); font-size: 14px; font-weight: 600;
  transition: background var(--dauer-kurz), color var(--dauer-kurz), transform var(--dauer-kurz) var(--kurve); }
.filter:active { transform: scale(.95); }
.filter.an { background: var(--navy); color: #fff; border-color: var(--navy); }
.aktengruppe + .aktengruppe { margin-top: var(--a5); }
.gruppentitel { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--text2); font-weight: 600; }
#suche { width: 100%; margin: 0 0 var(--a3); padding: 12px 16px; border-radius: 14px; border: 1px solid var(--trenner); background: var(--flaeche); text-align: left; box-shadow: var(--schatten-1); }
#suche:focus { border-color: var(--aktion); }
.leerbild { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 30px 20px; background: var(--flaeche); border-radius: var(--r-gross); box-shadow: var(--schatten-1); }
.leerbild b { font-size: 18px; margin-top: 6px; }
.leerbild p { margin: 0; color: var(--text2); max-width: 360px; }
.fuss { color: var(--text3); font-size: 12px; padding: 6px 4px; }
/* Illustrationen haben weißen Grund: immer auf einer runden Papierfläche, auch auf Navy und im dunklen Modus */
.ill { display: grid; place-items: center; width: 132px; aspect-ratio: 1; border-radius: 50%; background: #fff; overflow: hidden; flex: none;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); animation: auftauchen var(--dauer-mittel) var(--kurve) both; }
.ill img { width: 118%; height: 118%; object-fit: cover; }
.ill.gross { width: 200px; }
.konto.aus .ill { position: absolute; right: 14px; top: 14px; width: 64px; box-shadow: none; }
.konto.aus .kopfzeile, .konto.aus p { padding-right: 70px; }

/* ---------- Gutachten-Übersicht ---------- */
.home { padding-top: 0; }
.wertkarte {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a6); align-items: center;
  padding: var(--a8); margin: 0 0 var(--a6); border-radius: var(--r-gross); color: #fff; isolation: isolate; box-shadow: var(--schatten-2);
  background: radial-gradient(120% 160% at 100% 0%, #1b4280 0%, var(--navy) 50%, var(--navy-tief) 100%);
  --d1: #ffffff; --d2: #8fb0e0; --d3: #c3cad0; --d4: #5c84c0; --d5: #7d8a99; --spur: rgba(255, 255, 255, .12);
}
.wertkarte::before { content: ''; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, var(--silber-hell), var(--silber)); opacity: .55; }
.wertkarte .wk-text small { color: #c9d4e4; font: 400 12.5px var(--titel); text-transform: uppercase; letter-spacing: .2em; }
.wk-text { display: grid; gap: 8px; min-width: 0; }
.wk-text > b { font: 400 clamp(36px, 6vw, 56px)/1 var(--titel); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-text > span { color: #dbe3ee; font-size: 15px; }
.wk-leer { justify-self: center; display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 240px; color: #dbe3ee; font-size: 14px; }
.wertkarte .legende { color: #fff; min-width: 200px; }
.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--a6); align-items: start; }
.home > .wertkarte { grid-column: 1 / -1; }
.home-neben { display: grid; gap: var(--a4); margin-top: var(--a8); }
.home-neben .karte { margin: 0; }
@media (min-width: 760px) { .home { grid-template-columns: minmax(0, 1fr) 270px; } .home-neben { position: sticky; top: calc(var(--kopfhoehe) + 16px); } }
.abschnittstitel small { font: 500 13px var(--schrift); letter-spacing: 0; text-transform: none; color: var(--text2); margin-left: 4px; }
.home .abschnittstitel:first-child { margin-top: var(--a2); }
/* Baulichkeiten: große Kacheln, eine je Gebäude, plus „Nebengebäude“ */
.bkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--a3); }
.bkachel { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--a3); align-items: center; padding: var(--a4) var(--a5);
  min-height: 92px; border: 0; border-radius: var(--r-gross); background: var(--flaeche); color: var(--text); text-decoration: none; text-align: left;
  box-shadow: var(--schatten-1); border-left: 5px solid var(--navy); transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz); }
.bkachel .ki { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; background: var(--aktion-hell); color: var(--aktion); display: grid; place-items: center; }
.bkachel b { font-size: 17px; align-self: end; }
.bkachel small { color: var(--text2); font-size: 13.5px; align-self: start; }
.bkachel.neu { border-left-color: var(--silber); background: transparent; box-shadow: inset 0 0 0 1.5px var(--trenner); }
.bkachel:active, .fkachel:active { transform: scale(.98); }
/* Foto-Bereiche: die ganze Kachel ist der Auslöser */
.fkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--a3); }
.fkachel { position: relative; display: grid; align-content: start; gap: 2px; padding: var(--a4); min-height: 118px; border-radius: 20px; cursor: pointer;
  background: var(--flaeche); box-shadow: var(--schatten-1); transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz); }
.fk-zahl { font: 400 30px/1 var(--titel); font-variant-numeric: tabular-nums; color: var(--aktion); }
.fk-name { font-weight: 600; font-size: 15px; line-height: 1.25; }
.fk-kamera { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--aktion); }
@media (hover: hover) { .bkachel:hover, .fkachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); } }
.kapitel-alle { display: flex; flex-wrap: wrap; gap: var(--a5) var(--a4); }
.kapitelgruppe { flex: var(--n) 1 calc(var(--n) * 170px); min-width: 0; }
.kapiteltitel, .sl-titel { display: flex; align-items: center; gap: 8px; }
.kapiteltitel { margin: 0 0 10px; font: 400 13px var(--titel); text-transform: uppercase; letter-spacing: .14em; color: var(--text2); }
.kapiteltitel .nr, .sl-titel .nr { font: 600 11.5px var(--schrift); letter-spacing: 0; color: var(--auf-aktion); background: var(--aktion); border-radius: 6px; padding: 2px 7px; }
.vorschlaege ul { list-style: none; margin: 0; padding: 0; display: grid; }
.vorschlaege li + li { box-shadow: inset 0 1px 0 var(--trenner); }
.vorschlaege a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; color: var(--text); text-decoration: none; }
.vorschlaege a > span:first-child { display: grid; gap: 2px; }
.vorschlaege b { font-size: 15px; }
.vorschlaege small { color: var(--text2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fortschrittkarte { justify-items: center; text-align: center; padding: var(--a6) var(--a5); }
.fortschrittkarte p { max-width: 220px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--a3); }
.kachel.bereich { gap: 4px; min-height: 132px; }
.kachel.bereich .dring { --g: 50px; position: absolute; right: 16px; top: 16px; font-size: 12px; }
.kachel.fertig .ki { background: var(--gruen-hell); color: var(--gruen); }
.kachel .ks { font-size: 13px; color: var(--text2); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: auto; }

/* ---------- Zeilenlisten ---------- */
.zeilen { display: grid; }
.zeile { display: flex; gap: 12px; align-items: center; min-height: 54px; padding: 10px 0; color: var(--text); text-decoration: none; box-shadow: inset 0 -1px 0 var(--trenner); }
.zeile:last-child { box-shadow: none; }
.zeile b { flex: 1; font-size: 16px; font-weight: 500; }
.zeile span { color: var(--text2); font-size: 14px; }
.zeile::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--text3); border-top: 1.5px solid var(--text3); transform: rotate(45deg); }

/* ---------- Bauteile ---------- */
.bauteil { padding: 14px 0 6px; box-shadow: inset 0 -1px 0 var(--trenner); }
.bauteil:last-child { box-shadow: none; }
.bauteil-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bauteil h3 { margin: 0; font-size: 17px; }
.variante { padding: 6px 0 10px; }
.varlabel { max-width: 200px; margin: 6px 0; text-align: left; background: var(--flaeche2); border-radius: 8px; padding: 8px 10px; font-size: 16px; }   /* iOS zoomt unter 16 px */
.feldzeile { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; flex-wrap: wrap; }
.feldname { flex: 0 0 110px; padding-top: 11px; font-size: 14px; color: var(--text2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; align-items: flex-start; }   /* gewählter Chip (mit Zusätzen) zieht die anderen nicht in die Länge */
.chipbox { display: inline-flex; flex-direction: column; border-radius: 12px; background: var(--flaeche2); border: 1px solid var(--trenner);
  transition: background var(--dauer-kurz), color var(--dauer-kurz), transform var(--dauer-kurz) var(--kurve); }
.chipbox:active { transform: scale(.96); }
.chipbox.an { background: var(--aktion); color: var(--auf-aktion); border-color: transparent; animation: plopp .3s var(--kurve); }
@keyframes plopp { 40% { transform: scale(1.05); } }
.chip { padding: 10px 14px; min-height: 44px; border: 0; background: transparent; color: inherit; font-size: 15.5px; text-align: left; font-weight: 500; }
.chip em { font-style: normal; font-size: 12.5px; opacity: .8; }
.flaggen { display: flex; border-top: 1px solid rgba(255, 255, 255, .3); }
.flagge { position: relative; flex: 1; min-height: 36px; padding: 4px 8px; font-size: 11.5px; font-weight: 600; background: transparent; color: inherit; opacity: .8; border: 0; border-left: 1px solid rgba(255, 255, 255, .3); }
.flagge:first-child { border-left: 0; }
.flagge::after { content: ''; position: absolute; inset: 0 0 -8px; }
.flagge:first-child { border-bottom-left-radius: 11px; } .flagge:last-child { border-bottom-right-radius: 11px; }   /* Tippfläche 44 px, ragt in den Abstand darunter */
.flagge.an { background: rgba(255, 255, 255, .25); opacity: 1; }
.chipfeld { text-align: left; background: var(--flaeche2); border-radius: 10px; padding: 10px 12px; font-size: 16px; max-width: 340px; }
.ergebnis { margin-top: 8px; }
.ergebnis textarea { background: var(--flaeche2); border-radius: 10px; padding: 10px 12px; min-height: 64px; font-size: 16px; }
.ueberschrieben { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--orange); }
.ueberschrieben span { color: var(--text2); font-style: italic; }

/* ---------- Zustandsnote ---------- */
.noten { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 14px; }
.note { min-width: 62px; min-height: 44px; padding: 8px; border-radius: 10px; border: 1px solid var(--trenner); background: var(--flaeche2);
  font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; transition: background var(--dauer-kurz); }
.note.an { background: var(--aktion); color: var(--auf-aktion); border-color: transparent; }

/* ---------- Bewertung ---------- */
.protokoll { width: 100%; border-collapse: collapse; font-size: 15px; }
.protokoll td { padding: 11px 0; box-shadow: inset 0 -1px 0 var(--trenner); }
.protokoll .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.protokoll .summe td { font-weight: 650; }
.protokoll i { color: var(--text2); font-size: 12.5px; }
.gesamt { font-size: 20px; margin: 16px 0 12px; }
.gesamt b { color: var(--aktion); font: 400 26px var(--titel); }
.hinweis { background: var(--aktion-hell); color: var(--text); padding: 10px 14px; border-radius: 12px; border-left: 3px solid var(--aktion); font-size: 14px; margin: 12px 0; }
.fehler { color: var(--rot); font-weight: 600; }
.pfad { margin: 0 0 8px; font-size: 15px; }
.pfad a { text-decoration: none; }
.leer { color: var(--text2); padding: 12px 0; }

/* ---------- Abfragen, Pläne, Fotos ---------- */
.abfrage, .fach { padding: 14px 0; box-shadow: inset 0 -1px 0 var(--trenner); }
.abfrage:last-child, .fach:last-child { box-shadow: none; }
.abfrage-kopf, .fach-kopf { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.abfrage-kopf b, .fach-kopf b { font-size: 16.5px; }
.abfrage-kopf > span, .fach-kopf > span { display: flex; gap: 8px; flex-wrap: wrap; }
.abfrage small { color: var(--text2); font-size: 13px; }
.abfrage-inhalt { margin: 10px 0; }
.abfrage img { max-width: min(100%, 560px); border-radius: 12px; }
.abfrage textarea { background: var(--flaeche2); border-radius: 10px; padding: 10px 12px; min-height: 56px; margin-top: 8px; font-size: 15.5px; }
.planliste { display: grid; gap: 12px; padding-bottom: 12px; }
.plan { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 14px; padding: 12px; background: var(--flaeche2); border-radius: 14px; }
.plan .feld { box-shadow: inset 0 -1px 0 var(--trenner); }
.planbild img { width: 100%; border-radius: 10px; background: #fff; }
.planfelder { display: grid; align-content: start; }
.planaktionen { display: flex; gap: 8px; padding-top: 10px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 12px 0 4px; }
.galerie figure { margin: 0; display: grid; gap: 6px; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--flaeche2); }
.galerie input { text-align: left; background: var(--flaeche2); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.galerie small { color: var(--text2); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Ausgeblendet heißt ausgeblendet, auch bei Klassen mit display:flex (Suche auf der Startseite) */
[hidden] { display: none !important; }
/* Art. 18 DSGVO: eingeschränktes Gutachten, nur lesen */
fieldset.gesperrt { border: 0; margin: 0; padding: 0; min-width: 0; opacity: .75; }
.hinweis-einschraenkung { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; box-shadow: var(--schatten-1), inset 4px 0 0 var(--orange); color: var(--text); }
.hinweis-einschraenkung > .icon { color: var(--orange); }
.hinweis-einschraenkung .knopf { margin-left: auto; }

/* Büro: großer Bildschirm, mehrspaltig */
@media (min-width: 1500px) {
  #inhalt { max-width: 1480px; }
  .start { max-width: 1560px; }
  .spalten { grid-template-columns: 1fr 380px; }
  .home { grid-template-columns: minmax(0, 1fr) 340px; }
  .kapitelring { width: 230px; }
}
@media (max-width: 720px) {
  #inhalt { padding-top: var(--a4); }
  .grosstitel { font-size: 22px; }
  .held-oben { min-height: 200px; padding: var(--a5); align-items: flex-start; }
  .held-text { max-width: 100%; }
  .suchfeld { margin-top: var(--a3); }
  .gmeta span:nth-child(2), .gmeta span:nth-child(n+4) { display: none; }
  .held-bild { max-width: none; height: 132px; top: 4px; right: -14px; }
  .held h1 { font-size: 28px; }
  .filter-reihe { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--a5)); padding-right: var(--a5); scrollbar-width: none; }
  .filter { flex: none; min-height: 44px; padding: 5px 12px; font-size: 13.5px; }
  .aktionen .kachel { display: flex; align-items: flex-start; min-height: 0; padding: var(--a4); }
  .aktionen .kachel .ki { width: 38px; height: 38px; margin-bottom: 4px; }
  .held-unter { display: none; }
  .gzeile { flex-wrap: wrap; row-gap: 2px; }
  .gzeile b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; line-height: 1.25; flex-basis: 100%; text-overflow: clip; hyphens: auto; overflow-wrap: anywhere; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahlen > div { padding: 10px var(--a4) var(--a3); }
  .kennzahlen > div:nth-child(3) { border-left: 0; }
  .kennzahlen > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .kennzahlen b { font-size: 26px; }
  .gkarte { grid-template-columns: 60px 1fr auto auto; gap: var(--a3); padding-right: var(--a2); }
  .gkarte .dring { --g: 42px; font-size: 11px; }
  .gkarte .knopf.rund { width: 44px; height: 44px; }
  .gbild { width: 60px; height: 56px; }
  .feldname { flex-basis: 100%; padding-top: 0; }
  .plan { grid-template-columns: 1fr; }
  .wertkarte { grid-template-columns: 1fr; padding: var(--a5) var(--a5) var(--a6); gap: var(--a4); }
  .wk-text > b { font-size: 40px; }
  .donut { flex-wrap: nowrap; gap: var(--a4); }
  .donut-bild { width: 112px; }
  .donut .dring-mitte b { font-size: 18px; }
  .donut .dring-mitte small { font-size: 9.5px; }
  .wertkarte .legende { min-width: 0; gap: 8px; }
  .legende li { grid-template-columns: 10px minmax(0, 1fr); column-gap: 8px; font-size: 13.5px; }
  .legende li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .legende i { width: 10px; height: 10px; }
  .legende b { grid-column: 2; font-size: 13px; }
  .legende small { display: none; }
  .kapitelring { width: 170px; }
}
/* Einstellungen › Darstellung › Bewegung reduzieren: wie die Systemeinstellung */
:root[data-ruhig="an"] *, :root[data-ruhig="an"] ::before, :root[data-ruhig="an"] ::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
:root[data-ruhig="an"] .held-bild { animation: none !important; }
:root[data-ruhig="an"]::view-transition-group(*), :root[data-ruhig="an"]::view-transition-old(*), :root[data-ruhig="an"]::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .held-bild { animation: none !important; }   /* scroll-gesteuerte Parallaxe kennt keine Dauer */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print { #seiten, #kopf, #tabs { display: none; } }

/* ---------- Rollout: Formulare, Diagramme, Abgabe ---------- */
/* Segment-Schalter statt Auswahlliste (bis 4 Möglichkeiten) */
.feld:has(.segment) { flex-wrap: wrap; }
.segment { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: auto; padding: 3px; border-radius: 12px; background: var(--flaeche2); border: 1px solid var(--trenner); }
.segment label { position: relative; display: block; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.segment span { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--text2); transition: background var(--dauer-kurz), color var(--dauer-kurz); }
.segment input:checked + span { background: var(--aktion); color: var(--auf-aktion); box-shadow: 0 4px 10px -6px rgba(15, 45, 91, .7); }
.segment input:focus-visible + span { outline: 2px solid var(--aktion); outline-offset: 2px; }
/* Klick-Katalog: Bauteil mit Symbol und Haken */
.bauteil-kopf { justify-content: flex-start; }
.bt-ik { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--aktion-hell); color: var(--aktion); flex: none; }
.bauteil.fertig .bt-ik { background: var(--gruen-hell); color: var(--gruen); }
.bt-fertig { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gruen); color: #fff; }
.bt-platz { flex: 1; }
.erklaerung { color: var(--text2); font-size: 14px; margin: 4px 0 14px; }
/* Wasserfall Bauwert */
.wasserfall { display: grid; gap: 8px; margin: 12px 0 16px; }
.wf-zeile { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) minmax(96px, auto); gap: 12px; align-items: center; font-size: 14.5px; }
.wf-text small { color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-spur { position: relative; height: 24px; border-radius: 6px; background: var(--flaeche2); overflow: hidden; }
.wf-spur i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--d2); animation: wachsen .9s var(--kurve) both; transform-origin: left; }
.wf-zeile.abzug .wf-spur i { background: repeating-linear-gradient(135deg, var(--silber) 0 4px, var(--silber-hell) 4px 8px); }
.wf-zeile.ende .wf-spur i { background: var(--aktion); }
.wf-zeile b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.wf-zeile.abzug b { color: var(--text2); font-weight: 500; }
.wf-zeile.ende { padding-top: 6px; border-top: 1px solid var(--trenner); }
.wf-zeile.ende b, .wf-zeile.ende .wf-text { font-weight: 700; }
.wf-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: var(--a4) var(--a6); padding: var(--a2) 0; }
.wf-karte h3 { margin: 10px 0 0; }
.wf-karte h3 a { color: var(--text); text-decoration: none; }
/* Vergleichspreise, Zustandsnote, Marktanpassung */
.vgl, .skala, .markt { margin: 14px 0 10px; }
.vgl svg, .skala svg, .markt svg { width: 100%; height: auto; display: block; overflow: visible; }
.skala svg, .markt svg { max-width: 760px; }
.vgl svg { max-width: 860px; }
.vgl-band { fill: var(--aktion-hell); }
.vgl-achse, .vgl-punkt text, .sk-achse, .mk-achse { fill: var(--text2); font: 500 12px var(--schrift); }
.vgl-mittel { stroke: var(--aktion); stroke-width: 1.5; stroke-dasharray: 6 5; }
.vgl-ansatz { stroke: var(--gruen); stroke-width: 2; }
.vgl-punkt { animation: auftauchen var(--dauer-mittel) var(--kurve) both; }
.vgl-punkt line { stroke: var(--silber); stroke-width: 2; }
.vgl-punkt .roh { fill: var(--flaeche); stroke: var(--silber); stroke-width: 2.5; }
.vgl-punkt .angepasst { fill: var(--aktion); }
.vgl-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text2); margin-top: 6px; }
.vgl-legende i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; }
.vgl-legende .roh { border: 2.5px solid var(--silber); } .vgl-legende .angepasst { background: var(--aktion); }
.vgl-legende .mittel { border-radius: 0; height: 0; border-top: 2px dashed var(--aktion); }
.vgl-legende .band { border-radius: 3px; background: var(--aktion-hell); border: 1px solid var(--trenner); }
.vgl-legende .ansatz { border-radius: 0; height: 0; border-top: 2px solid var(--gruen); }
.sk-raster { stroke: var(--trenner); }
.sk-kurve { fill: none; stroke: var(--aktion); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; animation: zeichnen 1.2s var(--kurve) both; }
.sk-lot { stroke: var(--aktion); stroke-dasharray: 3 4; }
.sk-punkt, .mk-punkt { fill: var(--aktion); stroke: var(--flaeche); stroke-width: 3; }
.sk-wert, .mk-wert { fill: var(--text); font: 700 15px var(--schrift); }
.skala figcaption { font-size: 13px; color: var(--text2); }
.mk-spur { fill: var(--flaeche2); stroke: var(--trenner); }
.mk-null { stroke: var(--text3); stroke-width: 1.5; }
.mk-vorschlag line { stroke: var(--silber); stroke-width: 3; stroke-dasharray: 4 3; }
.mk-vorschlag text { fill: var(--text2); font: 600 13px var(--schrift); }
.wertkarte .legende b { color: #fff; }
.gesamtzeile td { font-size: 17px; box-shadow: inset 0 2px 0 var(--aktion); }
/* Abgabe */
.abgabe { display: grid; gap: var(--a4); }
@media (min-width: 1100px) { .abgabe { grid-template-columns: 1fr 1fr; align-items: start; } .abgabe-haupt { grid-column: 1 / -1; } }
.abgabe .karte { margin: 0; }
.abgabe-haupt { background: linear-gradient(135deg, #1b4280, var(--navy) 55%, var(--navy-tief)); color: #fff; }
.abgabe-haupt p { color: #dbe3ee; }
.abgabe-haupt .kopfzeile > .icon { background: #fff; color: var(--navy); }
.abgabe-haupt .gross { background: #fff; color: var(--navy); max-width: 420px; }
.pruefliste { list-style: none; margin: 0; padding: 0; display: grid; }
.pruefliste li + li { box-shadow: inset 0 1px 0 var(--trenner); }
.pruefliste a { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--text); text-decoration: none; }
.pruefliste a > span:nth-of-type(2) { flex: 1; font-weight: 500; }
.pruefliste .dring { color: var(--aktion); }
/* Anmeldung und zweiter Faktor */
.anmeldung { overflow: hidden; }
.anmelde-bild { display: block; width: calc(100% + 2 * var(--a5)); height: 130px; margin: calc(-1 * var(--a5)) calc(-1 * var(--a5)) 0; object-fit: cover; object-position: 75% 40%; background: #fff; }
.schritte { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.schritte li { counter-increment: s; display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--text); }
.schritte li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--aktion); color: var(--auf-aktion); font: 700 12px var(--schrift); }
details.passwort summary { cursor: pointer; color: var(--aktion); font-weight: 600; font-size: 14.5px; padding: 6px 0; }
details.passwort form { display: grid; gap: 8px; margin-top: 8px; }
/* Fotos, Abfragen, Pläne */
.fach-zahl { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: 999px; background: var(--aktion-hell); color: var(--aktion); font-size: 12.5px; font-weight: 700; vertical-align: 2px; }
.fach-zahl:empty { display: none; }
.abfrage-kopf b .pille { margin-left: 6px; vertical-align: 2px; }
.galerie figure { padding: 8px; border-radius: 16px; background: var(--flaeche2); }
.galerie img { box-shadow: 0 6px 16px -12px rgba(11, 26, 48, .6); }
.plan { box-shadow: inset 0 0 0 1px var(--trenner); }
@media (max-width: 720px) {
  .wf-zeile { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .wf-spur { grid-column: 1 / -1; grid-row: 2; height: 18px; }
  .wf-raster { grid-template-columns: 1fr; }
  .segment { margin-left: 0; }
  .vgl-achse, .vgl-punkt text, .sk-achse, .mk-achse { font-size: 21px; }
  .sk-wert, .mk-wert, .mk-vorschlag text { font-size: 24px; }
  .tab { min-width: 560px; }
  .block > h2 { padding: 12px var(--a4); }
  .gruppe { padding: 0 var(--a4) var(--a2); }
}

/* nur für Screenreader sichtbar */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Vollständiger Befund (Okt. 2026) ---------- */
.listzeilen { display: grid; }
.listzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.listzeile .feld { flex: 1 1 200px; min-width: 0; }
.listzeile input { text-align: left; }
.gruppe > .listzeilen + .klein { margin: 12px 0 16px; }
.baustein .klein, .merkmal-aktionen, .lastzeile > .klein { margin: 10px 0 14px; }
.baustein + .bausteinkopf, .lastzeile + .lastzeile, .merkmal + .merkmal { box-shadow: inset 0 1px 0 var(--trenner); }
.bausteinkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 16px; }
.bausteinkopf b { font: 600 13px var(--schrift); color: var(--text2); font-variant-numeric: tabular-nums; }
.merkmal-aktionen, .fachknoepfe, .fachzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fachzeile { justify-content: space-between; padding: 12px 0; box-shadow: inset 0 1px 0 var(--trenner); }
.vorschlagzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: var(--aktion-hell); color: var(--text); font-size: 15px; }
.kernhinweise { margin: 8px 0 4px; padding-left: 18px; color: var(--text2); font-size: 13.5px; line-height: 1.45; }
.anhang { display: grid; gap: 6px; justify-items: start; margin: 0 0 12px; }
.konsistenz a > span:nth-of-type(2) { font-weight: 400; font-size: 14.5px; line-height: 1.4; }

/* Fotos: je Fach eine Kopfzeile mit vollem Namen, ein Hauptknopf, Rest im ⋯-Menü */
.fach-kopf { flex-wrap: nowrap; align-items: flex-start; }
.fach-titel { flex: 1; min-width: 0; margin: 6px 0 0; font-size: 16.5px; line-height: 1.3; overflow-wrap: anywhere; }
.fach-leer { display: none; margin-top: 2px; color: var(--text3); font-size: 13px; font-weight: 400; }
.fach.ist-leer { padding: 10px 0; }
.fach.ist-leer .fach-leer { display: block; }
.fach.ist-leer .galerie { display: none; }
.fach-aktion { position: relative; display: flex; flex: none; align-items: center; gap: 6px; }
.fotografieren { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; }
.fach-aktion .rund { width: 44px; height: 44px; display: grid; place-items: center; }
.mehr > summary { list-style: none; cursor: pointer; font-size: 20px; line-height: 1; }
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; }
.mehr[open] > summary { background: var(--aktion); color: var(--auf-aktion); }
.mehr-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(320px, calc(100vw - 32px)); padding: 6px 14px 12px;
  border-radius: 14px; background: var(--flaeche); box-shadow: var(--schatten-2, 0 12px 32px -12px rgba(11, 26, 48, .45)); border: 1px solid var(--trenner); }
.mehr-menue .feld { flex-wrap: wrap; }
.mehr-menue input, .mehr-menue select { text-align: left; font-size: 16px; padding: 8px 26px 8px 10px; border-radius: 8px; background-color: var(--flaeche2); }
.mehr-menue .klein { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }
.galerie figcaption { display: flex; align-items: center; gap: 6px; }
.galerie figure { min-width: 0; }
.galerie figcaption input { flex: 1; min-width: 0; width: 100%; }
.foto-weg { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text2); }
.foto-weg:hover, .foto-weg:focus-visible { background: var(--rot-hell, rgba(200, 60, 60, .12)); color: var(--rot, #b3261e); }
@media (max-width: 600px) {
  .galerie { grid-template-columns: 1fr; }
  .fach-kopf { flex-wrap: wrap; }
  .fach-titel { flex-basis: 100%; }
  .fotografieren { flex: 1; justify-content: center; }
  .fach-aktion { flex: 1; }
}

/* ---------- Einstellungen ---------- */
.kopf-knopf { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; color: #fff; opacity: .92; }
.kopf-knopf:active { background: rgba(255, 255, 255, .14); }
@media (hover: hover) { .kopf-knopf:hover { background: rgba(255, 255, 255, .12); } }
#kopf:has(.kopf-knopf) #status { right: 70px; }
.sl-einst { margin-top: 18px; box-shadow: inset 0 1px 0 var(--trenner); border-radius: 0 0 14px 14px; }
/* Statuszeile auf der Startseite: Konto, Abgleich, Speicher in einer Zeile, Tipp öffnet die Einstellungen */
.statuszeile { display: flex; align-items: center; gap: var(--a3); margin: 0 0 var(--a6); padding: 12px var(--a4); min-height: 64px;
  background: var(--flaeche); color: var(--text); text-decoration: none; border-radius: var(--r-gross); box-shadow: var(--schatten-1); animation: auftauchen var(--dauer-mittel) var(--kurve) both; }
.statuszeile .sz-ik { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gruen-hell); color: var(--gruen); }
.statuszeile.tun { box-shadow: var(--schatten-1), inset 4px 0 0 var(--aktion); }
.statuszeile.tun .sz-ik { background: var(--aktion-hell); color: var(--aktion); }
.statuszeile.aus { box-shadow: var(--schatten-1), inset 4px 0 0 var(--orange); }
.statuszeile.aus .sz-ik { background: var(--orange-hell); color: var(--orange); }
.sz-text { flex: 1; min-width: 0; display: grid; }
.sz-text b, .sz-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-text small { color: var(--text2); font-size: 13.5px; }
.sz-speicher { display: flex; align-items: center; gap: 6px; color: var(--text2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.statuszeile > .icon:last-child { color: var(--text3); }
@media (max-width: 420px) { .sz-speicher small { display: none; } }
/* Übersicht (Handy) und Zeilen in den Seiten */
.einst-liste { display: grid; background: var(--flaeche); border-radius: var(--r-gross); box-shadow: var(--schatten-1); padding: 0 var(--a4); }
.block .einst-liste { background: none; box-shadow: none; padding: 0; }
.einst-liste .zeile > .icon:last-child { color: var(--text3); }
.einst-liste .zeile b { flex: 1; min-width: 0; }
.einst-liste div.zeile::after { display: none; }   /* nur Links bekommen den Pfeil */
.einst .zeile { flex-wrap: wrap; row-gap: 2px; }
.einst .zeile > b { flex: 1 1 55%; }
.einst .zeile > span { margin-left: auto; text-align: right; }
.einst select { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.einst-text { flex: 1; display: grid; min-width: 0; }
.einst-text b { font-weight: 600; }
.einst-text span { color: var(--text2); font-size: 14px; }
.einst .gruppe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-bottom: var(--a4); }
.einst .feld .wert { margin-left: auto; text-align: right; color: var(--text2); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.einst .reihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.einst .knopf[disabled] { opacity: .45; cursor: not-allowed; }
.klein-text { margin: 10px 0 0; color: var(--text2); font-size: 14px; }
.einst-form .meldung, #geraetstatus, #exportstatus { font-size: 13px; color: var(--text2); }
.hinweis.kommt { display: flex; gap: 10px; align-items: baseline; border-left-color: var(--silber); background: var(--flaeche2); color: var(--text2); }
.hinweis.kommt .pille { flex: none; }
.einst-punkte { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; color: var(--text2); }
.einst-punkte b { color: var(--text); }
.einst-schritte { margin-top: 14px; }
.einst > .karte { max-width: 560px; }
.einst .speicher-zeile { padding: 14px 0 4px; }
.einst .speicher-zeile p { margin: 0; color: var(--text2); }

/* ---------- Befund-Phase (Oktober 2026) ---------- */
.pille.phase-befund { background: #e3f1fb; color: #163e63; }
.pille.phase-gutachten { background: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .pille.phase-befund { background: #1b3a68; color: #cfe6f8; } :root:not([data-thema="hell"]) .pille.phase-gutachten { background: #a8c4ef; color: #0a1f40; } }
:root[data-thema="dunkel"] .pille.phase-befund { background: #1b3a68; color: #cfe6f8; }
:root[data-thema="dunkel"] .pille.phase-gutachten { background: #a8c4ef; color: #0a1f40; }
.sl-kopf .pille { justify-self: start; margin-top: 6px; }
.gzeile .pille + .pille { margin-left: 4px; }
.sl-zeile.gesperrt { color: var(--text3); cursor: default; }
.sl-zeile.gesperrt:active { transform: none; }
.sl-uebernahme { width: calc(100% - 8px); margin: 8px 4px 4px; }
.kachel.bereich.gesperrt { opacity: .75; border-left-color: var(--silber); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.befundkarte { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 700px) { .befundkarte { grid-template-columns: 1fr; padding: var(--a5); } .befundkarte .wk-aktion .knopf { width: 100%; } }
.wk-aktion { display: grid; gap: 10px; }
.knopf.hell { background: #fff; color: #163e63; }
.gesperrt-hinweis .luecken, .uebernahme-karte .luecken, .uebernahme-dialog .luecken { text-align: left; }
.luecken ul { margin: 6px 0 12px; padding-left: 20px; columns: 2 220px; color: var(--text2); }
.luecken p { margin: 0; }

/* Dialoge (Foto groß, Übernahme) */
.dialog { border: 0; border-radius: var(--r-gross); padding: var(--a5); background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-2); max-width: min(960px, calc(100vw - 24px)); width: 100%; max-height: calc(100dvh - 24px); }
.dialog::backdrop { background: rgba(7, 24, 48, .55); }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dialog-kopf b { font: 400 18px var(--titel); letter-spacing: .04em; }
.uebernahme-dialog { max-width: 560px; }
.fd-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--a5); align-items: start; }
.fd-bild { width: 100%; max-height: 70dvh; object-fit: contain; border-radius: 12px; background: var(--flaeche2); }
.fd-felder { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fd-felder h3 { margin: 6px 0 0; font-size: 15px; }
.fd-flaeche { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--trenner); }
.ki-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ki-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--aktion-hell); }
.ki-liste li span { flex: 1 1 140px; font-weight: 600; }
.fehler { color: var(--rot); }
/* Bedienung rechts vom Foto, auch quer am Handy; nur sehr schmal hochkant (unter 500 px) darunter */
@media (max-width: 700px) { .fd-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a3); } }
@media (max-width: 499px) { .fd-raster { grid-template-columns: 1fr; } .fd-bild { max-height: 38dvh; } }

/* Foto: Großansicht öffnen, Maß als Marke */
.foto-bild { position: relative; display: block; padding: 0; border: 0; background: none; border-radius: 12px; cursor: zoom-in; }
.foto-mass { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 8px; border-radius: 999px; background: rgba(11, 26, 48, .82); color: #fff; font-size: 12px; font-weight: 600; }
.foto-zuordnen { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--aktion-hell); color: var(--aktion); }

/* Zustandsnote: Knöpfe und Liste nebeneinander (iPad), untereinander (Handy) */
.zustand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a5); align-items: start; }
@media (max-width: 900px) { .zustand { grid-template-columns: 1fr; } }
.zustandsliste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.zst { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 8px 10px;
  border: 1px solid var(--trenner); border-radius: 10px; background: var(--flaeche); color: var(--text); font: inherit; }
.zst small { display: block; color: var(--text2); font-size: 13px; margin-top: 2px; }
.zst-note { font: 400 18px var(--titel); text-align: center; }
.zst-abschlag { font-variant-numeric: tabular-nums; color: var(--text2); font-size: 13px; white-space: nowrap; }
.zst.an { background: var(--aktion); color: var(--auf-aktion); border-color: transparent; }
.zst.an small, .zst.an .zst-abschlag { color: inherit; opacity: .9; }
.zst-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.hk-gebaeude > .abschnittstitel { display: flex; align-items: center; gap: 8px; }

/* Büro-Logo im Kopf: groß und blass wie ein Wasserzeichen zwischen Begrüßung (links) und Haus (rechts), hinter dem Text */
.held-logo { position: absolute; left: 60%; top: 50%; transform: translate(-50%, -50%); z-index: 0; height: min(86%, 320px); width: auto;
  opacity: .16; pointer-events: none; user-select: none; }
.held-oben > .held-text { z-index: 1; }
@media (max-width: 720px) { .held-logo { left: auto; right: 4px; top: 28px; transform: none; height: 170px; opacity: .12; } }
/* Personen und Stichtage am Handy: je Eintrag ein Block statt Tabellenzeile */
@media (max-width: 700px) {
  .tab.personen, .tab.stichtage, .tab.personen tbody, .tab.stichtage tbody { display: block; width: 100%; min-width: 0; }
  .tab.personen tr:first-child, .tab.stichtage tr:first-child { display: none; }
  .tab.personen tr, .tab.stichtage tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--trenner); }
  .tab.personen td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .tab.personen td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .tab.personen td, .tab.stichtage td { padding: 0; min-width: 0; }
}
.fd-status:empty { display: none; }

/* Stichtage: Pflichtzeilen mit fester Art, freie Zeilen mit Auswahl im Stil der Tabellenfelder */
.tab td { vertical-align: middle; }
.stichtag-art { display: block; font-size: 15px; font-weight: 500; padding: 0 8px; overflow-wrap: anywhere; }
.tab select { text-align: left; padding: 8px 26px 8px 8px; background-color: var(--flaeche2); border-radius: 8px; font-size: 15px;
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; }
.tab input[type=date] { text-align: left; }
textarea.wachsen { min-height: 44px; padding: 10px 0; line-height: 1.4; overflow: hidden; }
@media (max-width: 700px) { .tab.stichtage td { align-self: center; } }
/* Anwesende je Stichtag: eigene Liste unter der Zeile, bei der Befundaufnahme nur der Verweis */
.tab.stichtage tr.anwesend td { padding: 0 3px 10px; }
.stichtag-anwesend { padding: 4px 0 0 12px; border-left: 2px solid var(--trenner); }
.stichtag-anwesend > b { display: block; font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; padding: 4px 0; }
.anwesend-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.stichtag-anwesend .noten { padding: 6px 0 0; align-items: center; }
.stichtag-anwesend input { font-size: 16px; }   /* iOS zoomt unter 16 px beim Fokus */
@media (max-width: 600px) {   /* Handy: Funktion unter dem Namen, sonst sind beide Felder nur ~80 px breit */
  .anwesend-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .anwesend-zeile > .feld:nth-child(2) { grid-column: 1; }
  .anwesend-zeile > .klein { grid-column: 2; grid-row: 1 / span 2; }
  .stichtag-anwesend .feld { flex-direction: column; align-items: stretch; gap: 2px; min-height: 0; }   /* Beschriftung über dem Feld: volle Breite für den Namen */
  .stichtag-anwesend .feld > span:first-child { max-width: none; font-size: 13px; color: var(--text2); }
}
.anwesend-info { margin: 0; padding: 0 8px; font-size: 14px; color: var(--text2); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .tab.stichtage tr.anwesend td { grid-column: 1 / -1; }
  .tab.stichtage tr:has(+ tr.anwesend) { border-bottom: 0; padding-bottom: 0; }
}
a.klein { text-decoration: none; }
@media (max-width: 520px) { .abschnittstitel:has(small) { flex-wrap: wrap; row-gap: 2px; } .abschnittstitel small { flex-basis: 100%; margin-left: 32px; } }
/* Live-Update der Bewertung: ersetzte Ergebnisse ohne erneutes Einblenden */
.statisch, .statisch *, .statisch *::before, .statisch *::after { animation: none !important; }

/* Rechenwerte als Vorschlag zum Bestätigen */
.vchip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: var(--aktion-hell); color: var(--text); font-size: 15px; }
.vchip p { margin: 0; flex: 1 1 260px; line-height: 1.5; overflow-wrap: anywhere; }
.vchip p .pille { margin-right: 6px; vertical-align: 1px; }
.vchip small { color: var(--text2); font-size: 13.5px; }
.vchip-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.vchip-knoepfe .klein { min-height: 44px; }
.vchip-bestaetigt, .vchip-eigen { background: var(--flaeche2); }
.vchip-geaendert { box-shadow: inset 4px 0 0 var(--orange); }
.vchip-liste .vchip { margin: 8px 0; }

/* Abgabe: Prüfpunkte abhaken, mit Notiz */
.pruefpunkt { padding-bottom: 8px; }
.pruef-aktion { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
.pruef-aktion .feld { flex: 1 1 220px; }
.pruef-knopf { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.pruef-knopf[aria-pressed="true"] { background: var(--gruen-hell); color: var(--gruen); }

/* Pläne und Behördenunterlagen groß */
.planbild .foto-bild { width: 100%; }
.bild-dialog { max-width: min(1200px, calc(100vw - 24px)); }
.bild-gross { display: block; width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 12px; background: #fff; }
.bild-aktion { margin: 10px 0 0; }

/* Handy: Tabellen (Flächen, Personen, Stichtage, Vergleichspreise, Adaptierungen) als Karten mit Spaltenbeschriftung.
   .gruppe davor: gleich stark wie die älteren Personen-/Stichtag-Regeln (≤ 700 px) und später, gewinnt also. */
@media (max-width: 600px) {
  .gruppe .tab, .gruppe .tab tbody { display: block; width: 100%; min-width: 0; }
  .gruppe .tab tr:has(> th) { display: none; }
  .gruppe .tab tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0 0 10px; padding: 10px 12px; border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--trenner); }
  .gruppe .tab td { display: grid; gap: 2px; padding: 0; min-width: 0; align-self: start; }
  .gruppe .tab td:first-child { grid-column: 1 / -1; }
  .gruppe .tab td[data-label]::before { content: attr(data-label); font-size: 11.5px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; }
  .gruppe .tab td:last-child:not([data-label]) { grid-column: 1 / -1; justify-self: end; }
  .tab.personen td:nth-child(3) { grid-column: auto; grid-row: auto; }
  .tab.personen td:nth-child(4) { grid-column: 1 / -1; grid-row: auto; }
  .gruppe .tab td:empty { display: none; }
  .gruppe .tab .klein { min-height: 44px; min-width: 44px; }
  .gruppe .tab td > *, .gruppe .tab td input { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .gruppe .tab td input { width: 100%; }
  .gruppe .tab.stichtage tr.anwesend { box-shadow: none; padding: 0 0 0 12px; margin-top: -4px; }
  .gruppe .tab.stichtage tr.anwesend td { justify-self: stretch; }
  /* Datum (und „Gilt für“ bei mehreren Objekten) über die volle Breite: in der halben Karte fehlt das Jahr; der Löschknopf steht darunter */
  .gruppe .tab.stichtage td:nth-child(2), .gruppe .tab.stichtage td:nth-child(3):not(:last-child) { grid-column: 1 / -1; }
}

/* Kein horizontaler Überlauf: schmale Tabellen teilen die Breite fest auf (Felder schrumpfen mit),
   breite Tabellen (ab 5 Spalten, Klasse .breit von beschrifte()) werden bis 1100 px Karten wie am Handy. */
.gruppe .tab { table-layout: fixed; width: 100%; min-width: 0; }
.gruppe .tab td input, .gruppe .tab td select, .gruppe .tab td .feld { width: 100%; min-width: 0; box-sizing: border-box; }
.gruppe .tab th { overflow-wrap: anywhere; }
.gruppe .tab tr > :last-child:empty, .gruppe .tab th:last-child:empty { width: 52px; }
@media (max-width: 1100px) {
  .gruppe .tab.breit, .gruppe .tab.breit tbody { display: block; }
  .gruppe .tab.breit tr:has(> th) { display: none; }
  .gruppe .tab.breit tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--trenner); }
  .gruppe .tab.breit td { display: grid; gap: 2px; padding: 0; min-width: 0; align-self: start; }
  .gruppe .tab.breit td:first-child { grid-column: 1 / -1; }
  .gruppe .tab.breit td[data-label]::before { content: attr(data-label); font-size: 11.5px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; }
  .gruppe .tab.breit td:last-child:not([data-label]) { grid-column: -2 / -1; justify-self: end; align-self: end; }
  .gruppe .tab.breit td:empty { display: none; }
  .gruppe .tab.breit .klein { min-height: 44px; min-width: 44px; }
}
/* Büro-Logo im Navy-Kopf: weißes Rund, damit es auf Navy lesbar bleibt; am Handy kleiner, Schriftzug bricht nie um */
.kopf-logo { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.kopf-logo img { width: 30px; height: 30px; object-fit: contain; display: block; }
@media (max-width: 420px) { .marke:has(.kopf-logo) { gap: 8px; } .marke:has(.kopf-logo) .wortmarke { font-size: 13px; letter-spacing: .12em; }
  .kopf-logo { width: 30px; height: 30px; } .kopf-logo img { width: 26px; height: 26px; } }
/* Gutachten-Übersicht: Logo blass in der Navy-Kopfkarte, hinter Text und Diagramm */
.wk-logo { position: absolute; left: 58%; top: 50%; transform: translate(-50%, -50%); z-index: -1; height: min(90%, 260px); width: auto;
  opacity: .1; pointer-events: none; user-select: none; animation: none; }
@media (max-width: 700px) { .wk-logo { left: auto; right: 12px; top: 12px; transform: none; height: 110px; } }
.anmelde-logo { display: block; width: 64px; height: 64px; object-fit: contain; margin: calc(-32px - var(--a3)) auto var(--a3); position: relative; border-radius: 50%; background: #fff; box-shadow: var(--schatten-2); }
/* Anmeldeseite vor der App: ohne Kopfband, Marke wie das App-Symbol (Navy-Quadrat, weiße Marke), Karte zentriert */
#kopf:empty { display: none; }
.anmelde-seite { max-width: 480px; margin: 0 auto; padding: var(--a8) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.anmelde-marke { display: flex; flex-direction: column; align-items: center; gap: var(--a3); margin-bottom: var(--a6); color: var(--text); }
.anmelde-marke .siegel { width: 76px; height: 76px; padding: 8px; border-radius: 23%; background: var(--navy); }
.anmelde-marke .wortmarke { font-size: 18px; }
.anmelde-links { display: flex; justify-content: center; gap: var(--a2); flex-wrap: wrap; }
.anmelde-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--a3); font-size: 15px; }

/* ---------- Befundaufnahme: sechs Schritte nach Erwins Ablauf ---------- */
nav.schritte { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 var(--a4); }
.schritt { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; min-height: 44px; border-radius: var(--radius); background: var(--flaeche);
  box-shadow: var(--schatten-1); color: var(--text); text-decoration: none; text-align: center; font-size: 13.5px; font-weight: 600; }
.schritt small { color: var(--text2); font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; min-height: 1em; }
.schritt.an { box-shadow: var(--schatten-1), inset 0 0 0 2px var(--aktion); }
@media (max-width: 600px) { nav.schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.abgleichzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--a3); font-size: 14.5px; }
.abgleichzeile > span { flex: 1; min-width: 200px; }
.abgleichzeile.aus { box-shadow: var(--schatten-1), inset 4px 0 0 var(--orange); }
.abgleichzeile.aus > .icon { color: var(--orange); }
.kamerazeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.kamerazeile .knopf.gross { flex: 1 1 260px; min-height: 60px; font-size: 17px; }
.galerie.mini { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.galerie.mini .foto-bild { padding: 0; border: 0; background: none; border-radius: 10px; }
.galerie.mini img { aspect-ratio: 1; }
/* Befund Außen: je Außenanlage bzw. Baulichkeit ein Block mit eigenen Fotos */
.aussenteil { padding: 12px 0 14px; box-shadow: inset 0 -1px 0 var(--trenner); }
.aussenteil > h3 { margin: 0 0 6px; font-size: 17px; }
/* Namensfeld „Eigenes Gebäude/Eigene Außenanlage“: Beschriftung über dem Feld, sonst bleiben am Handy neben der Tab-Leiste ~100 px */
.namezeile .feld { flex-direction: column; align-items: stretch; gap: 2px; }
.namezeile .feld > span:first-child { max-width: none; font-size: 13px; color: var(--text2); }
.namezeile input { font-size: 16px; }
.noten a.note { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; font-weight: 600; }
.note.neu { background: transparent; }
.objektwahl { padding-top: 0; }
.pflichthinweis { color: var(--orange); background: var(--orange-hell); padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 14.5px; }
.raster.person + .raster.person { box-shadow: inset 0 1px 0 var(--trenner); padding-top: 8px; }
.raster.person > .klein { margin: 8px 0 12px; }
.listzeile.nachreichen .note { min-width: 44px; }
.listzeile.nachreichen.erledigt textarea { text-decoration: line-through; color: var(--text2); }
.stichtagzeile .chipfeld { max-width: 110px; }
.chipfeld.sonst { flex: 1 1 140px; max-width: 260px; }

/* Abgleich-Stand im Kopfband: „Offline · 5 Fotos warten“, „Lädt hoch 2/5“, „Alles auf dem Server“ */
.abgleich-stand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #dbe6f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.abgleich-stand:empty { display: none; }
.abgleich-stand::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: #63d69e; }
.abgleich-stand.offen::before { background: #f2b45a; }
.abgleich-stand.laeuft::before { background: #a8c4ef; animation: auftauchen 1s ease-in-out infinite alternate; }
.abgleich-stand.fehler::before { background: #ff8a80; }
@media (min-width: 601px) {
  /* Meldung („gespeichert“) und Abgleich-Stand teilen sich den Platz: solange eine Meldung steht, tritt der Stand zurück */
  #kopf:has(#status:not(:empty)) .abgleich-stand { visibility: hidden; }
  /* Die Meldung reicht nach links bis über den Fortschrittsring: er tritt ebenso zurück, sonst sind die ersten Buchstaben unlesbar */
  #kopf:has(#status:not(:empty)) .dring { visibility: hidden; }
}
/* Handy: im Kopf ist neben Zurück und Titel kein Platz, längere Meldungen lägen darüber: eigene Zeile unter dem Kopf */
@media (max-width: 600px) {
  #kopf #status:not(:empty) { top: calc(100% + 6px); right: var(--a4); max-width: calc(100% - 2 * var(--a4)); padding: 6px 12px; border-radius: 10px; background: var(--navy); box-shadow: var(--schatten-1); pointer-events: none; }
}
.knopf.loeschen { color: var(--rot); }
/* Handy quer: wenig Höhe, die Leiste rechts zeigt nur Symbole (Beschriftung bleibt für Vorleser) und scrollt nicht */
@media (max-height: 480px) {
  #tabs { gap: 0; padding-top: calc(var(--kopfhoehe) + 6px + env(safe-area-inset-top)); --tabbreite: 64px; }
  #tabs a { flex: 1 1 0; min-height: 44px; max-height: 64px; }
  #tabs a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body:has(#tabs:not(:empty)) { --tabbreite: 64px; }
}