/* ThrowPilot – Oberfläche. Dunkel ist die Grundstimmung (Event-/Technik-Look), Hell folgt prefers-color-scheme.
   Tokens als CSS-Variablen auf :root. Mobile-first: alles ab 360 px ohne Seitwärts-Scrollen, Tap-Ziele >= 44 px. */
:root {
  --bg: #0a0f15; --bg-raster: rgba(120, 160, 200, .055);
  --flaeche: #121a23; --flaeche-2: #19232f; --linie: #263444; --linie-stark: #3a4d63;
  --text: #e8eef5; --text-2: #a4b3c4; --text-3: #7d8da0;
  --akzent: #3fc1ff; --akzent-text: #04202f; --akzent-weich: rgba(63, 193, 255, .14);
  --ok: #35d07f; --ok-bg: rgba(53, 208, 127, .13); --warn: #ffb938; --warn-bg: rgba(255, 185, 56, .13); --schlecht: #ff6b62; --schlecht-bg: rgba(255, 107, 98, .14);
  --strahl: rgba(63, 193, 255, .22); --strahl-linie: #3fc1ff;
  --radius: 14px; --radius-klein: 9px; --schatten: 0 10px 30px rgba(0, 0, 0, .35);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
  --tab-h: 62px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef2f6; --bg-raster: rgba(40, 80, 120, .06);
    --flaeche: #ffffff; --flaeche-2: #f3f6f9; --linie: #d6dee7; --linie-stark: #b3c0cf;
    --text: #0f1a26; --text-2: #3f5064; --text-3: #66788c;
    --akzent: #0a6fb0; --akzent-text: #ffffff; --akzent-weich: rgba(10, 111, 176, .1);
    --ok: #12804a; --ok-bg: rgba(18, 128, 74, .1); --warn: #a8630a; --warn-bg: rgba(200, 120, 10, .12); --schlecht: #c42a21; --schlecht-bg: rgba(196, 42, 33, .09);
    --strahl: rgba(10, 111, 176, .16); --strahl-linie: #0a6fb0; --schatten: 0 8px 24px rgba(20, 40, 70, .12);
  }
}
:root[data-theme="light"] {
  --bg: #eef2f6; --bg-raster: rgba(40, 80, 120, .06); --flaeche: #ffffff; --flaeche-2: #f3f6f9; --linie: #d6dee7; --linie-stark: #b3c0cf;
  --text: #0f1a26; --text-2: #3f5064; --text-3: #66788c; --akzent: #0a6fb0; --akzent-text: #fff; --akzent-weich: rgba(10, 111, 176, .1);
  --ok: #12804a; --ok-bg: rgba(18, 128, 74, .1); --warn: #a8630a; --warn-bg: rgba(200, 120, 10, .12); --schlecht: #c42a21; --schlecht-bg: rgba(196, 42, 33, .09);
  --strahl: rgba(10, 111, 176, .16); --strahl-linie: #0a6fb0; --schatten: 0 8px 24px rgba(20, 40, 70, .12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background-color: var(--bg); color: var(--text); font: 16px/1.5 var(--font);
  background-image: linear-gradient(var(--bg-raster) 1px, transparent 1px), linear-gradient(90deg, var(--bg-raster) 1px, transparent 1px); background-size: 32px 32px;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); overflow-wrap: anywhere;
}
body.szene-voll { overflow: hidden; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.65rem; letter-spacing: -.01em; } h2 { font-size: 1.12rem; } h3 { font-size: 1rem; }
p { margin: 0; } a { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }
h1:focus { outline: none; }
.sprung { position: absolute; left: -999px; } .sprung:focus { left: 8px; top: 8px; z-index: 99; background: var(--flaeche); padding: 8px 12px; }
[hidden] { display: none !important; }

/* Kopf + Navigation */
.kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.marke { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .01em; }
.marke img { border-radius: 7px; }
.einheit { display: flex; align-items: center; gap: 8px; } .einheit-label { font-size: .75rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 430px) { .einheit-label { display: none; } }
.tabbar { position: fixed; inset: auto 0 0 0; z-index: 20; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--flaeche); border-top: 1px solid var(--linie); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; color: var(--text-3); text-decoration: none; font-size: .74rem; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.aktiv { color: var(--akzent); font-weight: 600; box-shadow: inset 0 2px 0 var(--akzent); }
.schritte { display: flex; align-items: center; gap: 6px; max-width: 760px; margin: 0 auto; padding: 8px 10px 0; }
.schritte .zurueck { flex: none; min-height: 44px; min-width: 44px; padding: 0 10px; background: none; border: 0; color: var(--text-2); font: inherit; cursor: pointer; border-radius: 8px; }
.schritte ol { list-style: none; display: flex; flex: 1; gap: 4px; margin: 0; padding: 0; }
.schritte li { flex: 1; min-width: 0; } .schritte li.jetzt { flex: 2.4; }
.schritte li > a, .schritte li > .schritt { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border-radius: 9px; color: var(--text-3); text-decoration: none; font-size: .82rem; border: 1px solid transparent; }
.schritte b { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 .72rem var(--mono); }
.schritte span:not(.schritt) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schritte li.fertig > a { color: var(--ok); } .schritte li.fertig b { background: var(--ok-bg); }
.schritte li.jetzt > .schritt { color: var(--akzent-text); background: var(--akzent); font-weight: 700; } .schritte li.jetzt b { border-color: var(--akzent-text); }
@media (max-width: 520px) { .schritte li:not(.jetzt) span:not(.schritt) { display: none; } .schritte li:not(.jetzt) > a { justify-content: center; } }

main { display: block; max-width: 760px; margin: 0 auto; padding: 12px 14px 28px; outline: none; }
body:has(.ergebnis) main { max-width: 1120px; }
.seite { display: flex; flex-direction: column; gap: 14px; }
.seitenkopf { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.unter { color: var(--text-2); }
.laden { color: var(--text-3); text-align: center; padding: 40px 0; }

/* Karten, Felder */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
button.karte, .link-karte { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
button.karte:hover, .link-karte:hover { border-color: var(--akzent); }
.gruppe { display: flex; flex-direction: column; gap: 8px; } .gruppe-titel { font-weight: 600; font-size: .92rem; } .gruppe-hinweis { color: var(--text-2); font-size: .9rem; }
.feld { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.feld label { font-weight: 600; font-size: .9rem; }
.feld-zeile { display: flex; align-items: stretch; border: 1.5px solid var(--linie-stark); border-radius: 11px; background: var(--flaeche-2); overflow: hidden; }
.feld-zeile:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.feld input, .suchfeld, select, .dlg input { font: 500 1.15rem var(--mono); color: var(--text); background: transparent; border: 0; padding: 0 12px; min-height: 48px; width: 100%; min-width: 0; outline: none; }
.feld-suffix { display: grid; place-items: center; padding: 0 12px; color: var(--text-3); font: .95rem var(--mono); border-left: 1px solid var(--linie); }
.feld-hinweis, .hinweis-klein { color: var(--text-3); font-size: .84rem; }
.feld-reihe { display: flex; gap: 10px; flex-wrap: wrap; } .feld-reihe > .feld { flex: 1 1 130px; } .feld-reihe .feld-hinweis { flex-basis: 100%; }
.feld-reihe.mit-knopf { align-items: flex-end; }
.suchfeld, select { border: 1.5px solid var(--linie-stark); border-radius: 11px; background: var(--flaeche-2); font-family: var(--font); font-size: 1rem; }
.suchfeld:focus { border-color: var(--akzent); }
select { appearance: auto; }
.auswahl { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; } .auswahl select { font-weight: 400; }
.schalter { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; } .schalter input { width: 24px; height: 24px; accent-color: var(--akzent); flex: none; }

.umschalter { display: flex; gap: 4px; padding: 3px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 12px; }
.umschalter button { flex: 1; min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: 600 .95rem var(--font); cursor: pointer; }
.umschalter button.an { background: var(--akzent); color: var(--akzent-text); }
.umschalter.chips { flex-wrap: wrap; } .umschalter.chips button { flex: 1 0 auto; }
.umschalter.klein button { min-height: 44px; padding: 0 12px; } .umschalter.klein { min-height: 44px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-knopf { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--linie-stark); background: var(--flaeche-2); color: var(--text-2); border-radius: 999px; font: 600 .92rem var(--font); cursor: pointer; }
.chip-knopf.an { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.chip { display: inline-block; font: 600 .72rem var(--font); padding: 2px 8px; border-radius: 999px; background: var(--akzent-weich); color: var(--akzent); letter-spacing: .02em; white-space: nowrap; }
.chip.grau { background: var(--flaeche-2); color: var(--text-3); border: 1px solid var(--linie); }
.passung-sehrGut { background: var(--ok-bg); color: var(--ok); } .passung-gut { background: var(--akzent-weich); color: var(--akzent); } .passung-knapp { background: var(--warn-bg); color: var(--warn); }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--linie-stark); background: var(--flaeche-2); color: var(--text); font: 600 1rem var(--font); cursor: pointer; text-decoration: none; }
.knopf:hover { border-color: var(--akzent); } .knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.knopf.gross { min-height: 54px; font-size: 1.05rem; width: 100%; }
.knopf.klein { min-height: 44px; padding: 0 14px; font-size: .92rem; }
.knopf.gefahr { color: var(--schlecht); border-color: color-mix(in srgb, var(--schlecht) 50%, var(--linie)); }
.knopf.mehr { width: 100%; }
.aktionsleiste { position: sticky; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px); padding-top: 6px; z-index: 5; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; } .aktionen .knopf { flex: 1 1 140px; }
.fehlertext { color: var(--warn); font-size: .92rem; min-height: 0; }

/* Info „Was ist das?“ */
details.info { font-size: .9rem; color: var(--text-2); }
details.info summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--akzent); font-weight: 600; list-style: none; }
details.info summary::-webkit-details-marker { display: none; }
.info-i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--akzent); font: italic 700 .8rem Georgia, serif; flex: none; }
details.info p { padding: 2px 0 10px; line-height: 1.55; }
details > summary { cursor: pointer; }
details.karte > summary, details.mehr > summary { font-weight: 700; min-height: 44px; display: flex; align-items: center; }
details.mehr { border-top: 1px solid var(--linie); padding-top: 4px; }

/* Start */
.hero h1 { font-size: 2rem; }
.wege { display: grid; gap: 12px; }
.weg { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; text-align: left; padding: 18px; border-radius: 18px; border: 1.5px solid var(--linie-stark); background: linear-gradient(160deg, var(--flaeche), var(--flaeche-2)); color: var(--text); font: inherit; cursor: pointer; box-shadow: var(--schatten); }
.weg:hover { border-color: var(--akzent); }
.weg-nr { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--akzent-weich); color: var(--akzent); font: 800 1.4rem var(--mono); }
.weg-text { display: flex; flex-direction: column; gap: 4px; } .weg-text strong { font-size: 1.2rem; } .weg-text span { color: var(--text-2); font-size: .95rem; }
.weg-los { grid-column: 2; color: var(--akzent); font-weight: 700; padding-top: 4px; }
.link-karte strong { display: block; } .link-karte span { color: var(--text-2); font-size: .92rem; }
.ablauf { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .ablauf li { padding-left: 4px; }
.ablauf.gross li strong { display: block; } .ablauf.gross li span { color: var(--text-2); }
.install { border-color: var(--akzent); background: var(--akzent-weich); }

/* Listen */
.liste, .stapel { display: flex; flex-direction: column; gap: 8px; }
.zeile { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; }
.zeile:hover { border-color: var(--akzent); }
.zeile-haupt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .zeile-haupt strong { font-size: 1.05rem; } .plus { color: var(--text-3); }
.zeile-neben { color: var(--text-2); font-size: .88rem; }
.gruppenkopf { margin: 10px 2px 2px; font: 700 .78rem var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.zaehler { color: var(--text-3); font-size: .88rem; }
.karte.objektiv, .karte.treffer { gap: 6px; }
.werte { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0; } .werte div { display: flex; flex-direction: column; } .werte dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); } .werte dd { margin: 0; font: 600 1.02rem var(--mono); }
.objektiv-shift { color: var(--text-2); font-size: .88rem; } .objektiv-bei { font-size: .92rem; color: var(--text); }
.hinweis { padding: 10px 12px; border-radius: 10px; background: var(--akzent-weich); font-size: .92rem; } .hinweis.warn { background: var(--warn-bg); }
.leer { text-align: center; padding: 28px 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-2); } .leer h2 { color: var(--text); }
.ergibt { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .ergibt-text.warn { color: var(--warn); }
.leinwand-bild { width: 100%; max-width: 300px; height: auto; } .leinwand-flaeche { fill: var(--akzent-weich); stroke: var(--akzent); stroke-width: 2; }
.angaben p { margin: 0; }

/* Ergebnis */
.ergebnis-raster { gap: 14px; }
@media (min-width: 900px) { .ergebnis-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } .spalte-links { position: sticky; top: 70px; } }
.ergebnis-raster { display: flex; flex-direction: column; gap: 14px; } .spalte-links, .spalte-rechts { display: contents; }
@media (min-width: 900px) { .ergebnis-raster { display: grid; } .spalte-links, .spalte-rechts { display: flex; flex-direction: column; gap: 14px; min-width: 0; } }
.ampel { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius); border: 1.5px solid; align-items: flex-start; }
.ampel p { color: var(--text); font-size: .95rem; } .ampel-titel { font-size: 1.25rem; display: block; margin-bottom: 2px; }
.ampel-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 800 1.3rem var(--mono); color: var(--bg); }
.ampel-ok { background: var(--ok-bg); border-color: var(--ok); } .ampel-ok .ampel-icon { background: var(--ok); } .ampel-ok .ampel-titel { color: var(--ok); }
.ampel-warn { background: var(--warn-bg); border-color: var(--warn); } .ampel-warn .ampel-icon { background: var(--warn); } .ampel-warn .ampel-titel { color: var(--warn); }
.ampel-bad { background: var(--schlecht-bg); border-color: var(--schlecht); } .ampel-bad .ampel-icon { background: var(--schlecht); } .ampel-bad .ampel-titel { color: var(--schlecht); }
.abstand-gross { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); }
.kachel-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); font-weight: 600; }
.gross-zahl { font: 700 clamp(2.4rem, 11vw, 3.4rem)/1.05 var(--mono); color: var(--akzent); letter-spacing: -.02em; } .gross-unter { color: var(--text-2); font-size: .95rem; }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kachel { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); min-width: 0; }
.kachel.breit { grid-column: 1 / -1; } .kachel-wert { font: 700 1.45rem var(--mono); } .kachel-wert.klein { font-size: 1.1rem; } .kachel-neben { color: var(--text-2); font-size: .88rem; }
.zoombalken { position: relative; height: 8px; border-radius: 4px; background: var(--flaeche-2); border: 1px solid var(--linie); margin: 4px 0; } .zoombalken i { position: absolute; top: -5px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--akzent); }
.regler { width: 100%; height: 44px; accent-color: var(--akzent); margin: 0; } .regler-skala { display: flex; justify-content: space-between; font: .8rem var(--mono); color: var(--text-3); margin-top: -8px; }
.kopierfeld { width: 100%; font: .85rem var(--mono); background: var(--flaeche-2); color: var(--text); border: 1px solid var(--linie); border-radius: 8px; padding: 8px; }

/* Zeichnungen + 3D */
.zeichnung-wrap { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.zeichnung { width: 100%; height: auto; max-height: 340px; display: block; }
.zeichnung .boden { stroke: var(--text-3); stroke-width: .5; } .zeichnung .achse { stroke: var(--text-3); stroke-width: .3; stroke-dasharray: 1.4 1.1; }
.zeichnung .strahl { fill: var(--strahl); stroke: var(--strahl-linie); stroke-width: .4; stroke-linejoin: round; }
.zeichnung .strahl-warn { fill: var(--warn-bg); stroke: var(--warn); } .zeichnung .strahl-bad { fill: var(--schlecht-bg); stroke: var(--schlecht); }
.zeichnung .leinwand { fill: var(--text); } .zeichnung .projektor { fill: var(--flaeche-2); stroke: var(--text-2); stroke-width: .5; } .zeichnung .linse { fill: var(--akzent); } .zeichnung .staender { stroke: var(--text-3); stroke-width: .6; }
.zeichnung .mass-linie { stroke: var(--text-2); stroke-width: .3; } .zeichnung .mass-hilfs { stroke: var(--text-3); stroke-width: .2; stroke-dasharray: .8 .8; }
.zeichnung .mass-text, .leinwand-bild .mass-text { fill: var(--text); font-family: var(--mono); font-weight: 600; paint-order: stroke; stroke: var(--flaeche); stroke-width: .9px; } .leinwand-bild .mass-text { stroke-width: 3px; }
.zeichnung .beschr { fill: var(--text-3); font-family: var(--font); }
.szene-rahmen { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); background: #0b1118; }
.szene { width: 100%; height: clamp(300px, max(78vw, 56vh), 640px); position: relative; touch-action: none; }
.szene canvas { display: block; width: 100%; height: 100%; }
.szene-overlay { position: absolute; inset: 0; pointer-events: none; } .szene-overlay > * { pointer-events: auto; }
.szene-rahmen .voll { position: absolute; top: 8px; right: 8px; z-index: 3; background: color-mix(in srgb, var(--flaeche) 85%, transparent); }
.szene-fehlt { display: grid; place-items: center; height: 100%; padding: 20px; text-align: center; color: #a4b3c4; }
.szene-wrap.vollbild { position: fixed; inset: 0; z-index: 60; background: #0b1118; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); display: flex; flex-direction: column; }
.szene-wrap.vollbild .szene-rahmen { flex: 1; border-radius: 0; border: 0; } .szene-wrap.vollbild .szene { height: 100%; }
.ar-layer { position: fixed; inset: 0; z-index: 100; background: #000; } .ar-container, .ar-overlay { position: absolute; inset: 0; } .ar-overlay { pointer-events: none; } .ar-overlay > * { pointer-events: auto; }
.ar-box { display: flex; flex-direction: column; gap: 6px; }

/* Aufstellungen, Hilfe, Daten */
.aufstellung strong { font-size: 1.1rem; } .glossar { display: flex; flex-direction: column; }
.begriff { border-top: 1px solid var(--linie); } .begriff summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; } .begriff p { padding: 0 0 12px; color: var(--text-2); }
.feld-hinweis a, .hinweis-klein a, .ergebnis a { display: inline-block; padding: 12px 2px; min-height: 44px; } .marke.karte h2 { font-size: 1.2rem; }

/* Dialog, Toast */
.dlg { width: min(92vw, 460px); border: 1px solid var(--linie-stark); border-radius: 18px; background: var(--flaeche); color: var(--text); padding: 18px; box-shadow: var(--schatten); }
.dlg::backdrop { background: rgba(0, 0, 0, .6); } .dlg h2 { margin-bottom: 8px; } .dlg-inhalt { display: flex; flex-direction: column; gap: 10px; color: var(--text-2); }
.dlg input { border: 1.5px solid var(--linie-stark); border-radius: 11px; background: var(--flaeche-2); font-family: var(--font); }
.dlg-aktionen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
#toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 80; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 520px); padding: 10px 14px; border-radius: 12px; background: var(--text); color: var(--bg); box-shadow: var(--schatten); transition: .2s; }
#toast.sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } #toast .knopf { background: var(--bg); color: var(--text); border-color: transparent; min-height: 40px; }
body.offline .kopf::after { content: "offline"; position: absolute; right: 120px; font: 600 .7rem var(--mono); color: var(--warn); }

.druck-kopf { display: none; }
@media print {
  body { background: #fff; color: #000; padding: 0; --text: #000; --text-2: #222; --text-3: #444; --flaeche: #fff; --flaeche-2: #fff; --linie: #999; --akzent: #000; }
  .kopf, .tabbar, .schritte, .aktionen, .eingaben, .szene-wrap, .ar-box, details, #toast, .regler, .knopf { display: none !important; }
  .druck-kopf { display: block; } main { max-width: none; padding: 0; } .ergebnis-raster { display: block; } .spalte-links, .spalte-rechts { position: static; }
  .zeichnung-wrap, .kachel, .abstand-gross, .ampel { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.skizze-zeile { display: flex; flex-direction: column; gap: 10px; } .skizze-felder { display: flex; flex-direction: column; gap: 12px; }
.hoehen-skizze { width: 100%; max-width: 260px; align-self: center; height: auto; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; }
.hoehen-skizze .boden { stroke: var(--text-3); stroke-width: 1; } .hoehen-skizze .leinwand { fill: var(--text); } .hoehen-skizze .strahl { fill: var(--strahl); stroke: var(--strahl-linie); stroke-width: .8; }
.hoehen-skizze .projektor { fill: var(--flaeche); stroke: var(--text-2); } .hoehen-skizze .linse { fill: var(--akzent); } .hoehen-skizze .staender { stroke: var(--text-3); stroke-width: 1.5; }
.hoehen-skizze .beschr { fill: var(--text-3); }
.hm-linie { stroke: var(--text-3); stroke-width: 1; } .hm-text { fill: var(--text-3); font: 9px var(--font); } .hm.an .hm-linie { stroke: var(--akzent); stroke-width: 2.4; } .hm.an .hm-text { fill: var(--akzent); font-weight: 700; }
@media (min-width: 520px) { .skizze-zeile { flex-direction: row; align-items: flex-start; } .skizze-felder { flex: 1; } .hoehen-skizze { flex: 0 0 190px; } }

/* Projektor-Auswahl: Liste zuerst, Filter eingeklappt; Marken einzeilig scrollbar */
.karte.filter > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.filter-aktiv { color: var(--akzent); font-weight: 600; font-size: .9rem; }
.chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.chip-knopf { flex: none; }
/* Ergebnis auf dem Handy: schmale Status-Leiste (fix, 40 px) erscheint erst, wenn die volle Ampelkarte aus dem Bild gescrollt ist */
.ampel-leiste { position: fixed; left: 0; right: 0; top: calc(62px + env(safe-area-inset-top)); z-index: 9; height: 40px; display: none; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-bottom: 1.5px solid; width: 100%; text-align: left; font: 600 .9rem var(--font); cursor: pointer; background-color: var(--bg); color: var(--text); }
.ampel-leiste i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 .8rem var(--mono); font-style: normal; color: var(--bg); }
.ampel-leiste span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ampel-leiste.ok { border-color: var(--ok); } .ampel-leiste.ok i { background: var(--ok); } .ampel-leiste.warn { border-color: var(--warn); } .ampel-leiste.warn i { background: var(--warn); } .ampel-leiste.bad { border-color: var(--schlecht); } .ampel-leiste.bad i { background: var(--schlecht); }
@media (max-width: 899px) { .ampel-leiste.zeigen { display: flex; } }
@media print { .ampel-leiste { display: none !important; } }

.weg.c { border-style: dashed; } .weg.c .weg-nr { background: var(--warn-bg); color: var(--warn); }
.antwort { padding: 14px; border-radius: var(--radius); background: var(--akzent-weich); border: 1.5px solid var(--akzent); display: flex; flex-direction: column; gap: 6px; }
.antwort-satz { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.platz-urteil { font-weight: 600; padding: 8px 10px; border-radius: 9px; } .platz-urteil.ok { background: var(--ok-bg); color: var(--ok); } .platz-urteil.bad { background: var(--schlecht-bg); color: var(--schlecht); }
.vorschlag { display: flex; flex-direction: column; gap: 6px; } .vorschlag-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.messliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: m; }
.messpunkt { flex-direction: row; gap: 14px; align-items: flex-start; counter-increment: m; }
.messpunkt .hoehen-skizze { flex: 0 0 96px; max-width: 96px; align-self: flex-start; }
.messtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .messtext strong::before { content: counter(m) ". "; color: var(--akzent); }
.messtext p { color: var(--text-2); font-size: .92rem; } .messfeld { font-family: var(--mono); color: var(--text) !important; }
@media print { .messblatt .aktionen, .messblatt .hinweis-klein { display: none !important; } .messblatt .karte { border: 1px solid #999; break-inside: avoid; } .messfeld { margin-top: 6px; font-size: 1rem; } .messblatt .druck-kopf { display: block; } .antwort { border-color: #000; background: #fff; } }

/* Kopfzeile: rechts Installieren-Button + Einheiten */
.kopf-rechts { display: flex; align-items: center; gap: 8px; }
.install-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--akzent); background: var(--akzent-weich); color: var(--akzent); font: 700 .86rem var(--font); cursor: pointer; }
.install-knopf:hover { background: var(--akzent); color: var(--akzent-text); }
.install-symbol { font-size: 1.15rem; line-height: 1; }
@media (max-width: 400px) { .install-text { display: none; } .install-knopf { padding: 0; width: 44px; } }
.install-dialog { width: min(92vw, 460px); max-height: 86vh; overflow: auto; padding: 20px; border-radius: 16px; border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.install-dialog::backdrop { background: rgba(5, 10, 16, .66); backdrop-filter: blur(3px); }
.install-dialog h2 { margin: 0 0 8px; font-size: 1.25rem; } .install-dialog h3 { margin: 16px 0 6px; font-size: 1rem; }
.install-vorteile { padding-left: 1.1rem; margin: 10px 0; display: grid; gap: 6px; }
.install-schritte { padding-left: 1.3rem; margin: 6px 0; display: grid; gap: 6px; }
.install-ok { padding: 10px 12px; border-radius: 10px; background: var(--akzent-weich); font-weight: 600; }
.install-dialog .aktionen { margin-top: 16px; display: flex; gap: 8px; }
@media print { .install-knopf, .install-dialog { display: none !important; } }

.marke { flex: 0 0 auto; } .marke span { white-space: nowrap; }
/* Schmale Handys (≤ 380 px): Kopfzeile enger, damit Schriftzug + Installieren + Einheiten in eine Zeile passen */
@media (max-width: 380px) {
  .kopf { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .marke { gap: 6px; } .marke span { font-size: .92rem; }
  .kopf-rechts { gap: 6px; }
  .einheit button { min-width: 40px; }
}