/* AeroLab – Messprotokoll-Optik: kühles Papier, Tinte, Druckfarben als einzige Akzente */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..800&display=swap");

:root {
  --paper: #eceff2;
  --sheet: #f8f9fa;
  --ink: #14202b;
  --graphite: #566370;
  --muted: #7d8893;
  --rule: #cdd4db;
  --rule-soft: #dfe4e9;
  --suction: #2a6fd6;
  --suction-deep: #1c5cab;
  --suction-wash: #dde8f8;
  --stagnation: #c8402c;
  --stagnation-wash: #f7e0dc;
  --running: #b37a10;
  --running-wash: #f6ebd3;
  --done: #1b7f4a;
  --neutral-mid: #e6e8ea;
  --radius-s: 4px;
  --radius-m: 8px;
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono-nums: tabular-nums lining-nums;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: var(--mono-nums);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--suction-deep); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--suction); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.005em; }
h1 { font-size: 30px; line-height: 1.15; font-stretch: 112%; }
h2 { font-size: 19px; line-height: 1.3; font-stretch: 105%; }
h3 { font-size: 15px; line-height: 1.4; }
p { margin: 0 0 0.75em; max-width: 72ch; }
small, .klein { font-size: 13px; color: var(--graphite); }
.gedimmt { color: var(--graphite); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Kopfzeile */
.kopf {
  display: flex; align-items: center; gap: 28px;
  padding: 0 28px; height: 58px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
.marke { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.marke b { font-size: 21px; font-stretch: 125%; font-weight: 750; letter-spacing: -0.01em; }
.marke svg { align-self: center; }
.marke .version { font-size: 12px; color: var(--muted); font-weight: 500; }
.navi { display: flex; gap: 4px; }
.navi a {
  text-decoration: none; color: var(--graphite); padding: 7px 12px; border-radius: var(--radius-s);
  font-weight: 550;
}
.navi a:hover { color: var(--ink); background: var(--rule-soft); }
.navi a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.modus {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--graphite);
  padding: 4px 10px; border: 1px solid var(--rule); border-radius: 99px; background: var(--sheet);
}
.modus::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--done); }
.modus.demo::before { background: var(--running); }
.modus.aus::before { background: var(--stagnation); }

main { padding: 32px 28px 64px; max-width: 1440px; margin: 0 auto; }

/* ---------------------------------------------------------------- Bedienelemente */
button, .knopf {
  font: inherit; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
button:hover, .knopf:hover { border-color: var(--graphite); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.haupt, .knopf.haupt { background: var(--ink); color: #fff; border-color: var(--ink); }
button.haupt:hover, .knopf.haupt:hover { background: #24384a; }
button.leise { border-color: transparent; background: transparent; color: var(--graphite); padding: 6px 8px; }
button.leise:hover { color: var(--ink); background: var(--rule-soft); }
button.gefahr:hover { color: var(--stagnation); border-color: var(--stagnation); }

label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }
.feld { margin-bottom: 16px; }
.feld .hilfe { font-size: 13px; color: var(--graphite); margin-top: 5px; }
input[type="text"], input[type="number"], input[type="password"], select, textarea {
  font: inherit; width: 100%; padding: 8px 10px; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-s); background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--suction); outline: none; box-shadow: 0 0 0 3px var(--suction-wash); }
textarea { resize: vertical; min-height: 58px; }
.zeile { display: flex; gap: 12px; }
.zeile > * { flex: 1; }
.check { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; font-size: 14px; margin: 8px 0; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--ink); }

/* Segment-Auswahl (Qualität, Windkanal) */
.segmente { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--rule); border-radius: var(--radius-s); overflow: hidden; background: #fff; }
.segmente label { margin: 0; font-weight: 550; font-size: 13.5px; text-align: center; padding: 8px 6px; cursor: pointer; color: var(--graphite); border-left: 1px solid var(--rule-soft); }
.segmente label:first-child { border-left: 0; }
.segmente input { position: absolute; opacity: 0; pointer-events: none; }
.segmente label:has(input:checked) { background: var(--ink); color: #fff; }
.segmente label:has(input:focus-visible) { outline: 2px solid var(--suction); outline-offset: -2px; }

/* Dateiablage */
.ablage {
  border: 1.5px dashed var(--rule); border-radius: var(--radius-m); padding: 18px; background: #fff;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.ablage:hover, .ablage.ueber { border-color: var(--suction); background: var(--suction-wash); }
.ablage strong { display: block; font-size: 14.5px; }
.ablage span { font-size: 13px; color: var(--graphite); }
.ablage.gefuellt { border-style: solid; text-align: left; }
.ablage input { display: none; }
label.ablage { display: block; margin: 0; font-weight: 400; font-size: 15px; }
.ablage:focus-visible { outline: 2px solid var(--suction); outline-offset: 2px; }
.feldname { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }

/* Fortschritt für Upload und Modellprüfung */
.fortschritt { margin: 2px 0 16px; padding: 12px 14px; background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--suction); border-radius: var(--radius-s); }
.fortschritt-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.fortschritt-kopf b { font-variant-numeric: tabular-nums; }
.fortschritt-balken { height: 8px; margin: 8px 0 6px; background: var(--rule-soft); border-radius: 4px; overflow: hidden; }
.fortschritt-balken i { display: block; height: 100%; width: 0; background: var(--suction); border-radius: 4px; transition: width .3s ease; }
.fortschritt-detail { font-size: 12.5px; color: var(--graphite); overflow-wrap: anywhere; }
.fortschritt.unbestimmt .fortschritt-balken i { width: 30% !important; animation: hinundher 1.2s ease-in-out infinite alternate; }
@keyframes hinundher { from { transform: translateX(-10%); } to { transform: translateX(240%); } }
@media (prefers-reduced-motion: reduce) { .fortschritt-balken i { transition: none; } .fortschritt.unbestimmt .fortschritt-balken i { animation: none; width: 100% !important; opacity: .5; } }
.balken { height: 4px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.balken i { display: block; height: 100%; background: var(--suction); width: 0; transition: width .2s; }

/* Hinweise */
.hinweis { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-s); font-size: 13.5px; background: var(--sheet); border: 1px solid var(--rule-soft); margin-bottom: 8px; }
.hinweis::before { content: "i"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--graphite); color: #fff; margin-top: 1px; }
.hinweis.pruefen::before { content: "?"; background: var(--running); }
.hinweis.warnung::before { content: "!"; background: var(--stagnation); }
.hinweis.warnung { border-color: var(--stagnation-wash); }
.hinweis.demo { background: var(--running-wash); border-color: #ecd9ad; }
.hinweis.demo::before { content: "!"; background: var(--running); }
.fehlertext { color: var(--stagnation); font-size: 13.5px; white-space: pre-wrap; }
.protokoll tr.mitfehler td { border-bottom: 0; }
.protokoll tr.fehlerzeile td { padding-top: 0; }
.fehlermehr { max-width: 760px; margin-top: 4px; }
.fehlermehr summary { cursor: pointer; font-size: 12.5px; color: var(--graphite); }
.fehlermehr .fehlertext { display: block; margin-top: 6px; }

/* ---------------------------------------------------------------- Variantenliste */
.titelzeile { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.titelzeile .aktionen { margin-left: auto; display: flex; gap: 8px; }
.leer { padding: 56px 24px; text-align: center; background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--radius-m); }
.leer p { margin: 8px auto 18px; }

.laufkarte {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: center;
  padding: 16px 18px; margin-bottom: 22px; background: var(--sheet); border: 1px solid var(--rule); border-left: 3px solid var(--running); border-radius: var(--radius-s);
}
.laufkarte .name { font-weight: 650; }
.laufkarte .phase { font-size: 13.5px; color: var(--graphite); }
.laufkarte .balken { grid-column: 1 / -1; height: 6px; margin: 4px 0 0; }
.laufkarte .balken i { background: var(--running); }

table.protokoll { width: 100%; border-collapse: collapse; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden; }
.protokoll th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--graphite); padding: 10px 12px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.protokoll td { padding: 11px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; font-size: 14px; }
.protokoll tr:last-child td { border-bottom: 0; }
.protokoll tbody tr:hover { background: #fff; }
.protokoll .zahl { text-align: right; white-space: nowrap; }
.protokoll .name a { font-weight: 650; color: var(--ink); text-decoration: none; }
.protokoll .name a:hover { text-decoration: underline; }
.protokoll .name small { display: block; }
.protokoll .knoepfe { text-align: right; white-space: nowrap; }
.cwzelle { display: grid; gap: 3px; justify-items: end; }
.cwzelle .mini { width: 72px; height: 4px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.cwzelle .mini i { display: block; height: 100%; background: var(--suction); border-radius: 0 2px 2px 0; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status.fertig { color: var(--done); } .status.fertig::before { background: var(--done); }
.status.laeuft, .status.wartend, .status.auswertung { color: var(--running); } .status.laeuft::before, .status.auswertung::before { background: var(--running); animation: puls 1.4s ease-in-out infinite; }
.status.wartend::before { background: transparent; border: 1.5px solid var(--running); }
.status.fehler { color: var(--stagnation); } .status.fehler::before { background: var(--stagnation); }
.status.abgebrochen { color: var(--graphite); }
.status.entwurf { color: var(--graphite); } .status.entwurf::before { background: transparent; border: 1.5px dashed var(--muted); }
@keyframes puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .status::before { animation: none !important; } .balken i { transition: none; } }
.demomarke { font-size: 11.5px; font-weight: 650; color: var(--running); border: 1px solid #e3c98c; padding: 0 6px; border-radius: 3px; margin-left: 6px; }

/* ---------------------------------------------------------------- Neue Variante */
.werkbank { display: grid; grid-template-columns: minmax(330px, 400px) 1fr; gap: 28px; align-items: start; }
.schritte { display: grid; gap: 14px; }
.schritt { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 18px; }
.schritt[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.schritt > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.schritt > header .nr { font-weight: 750; font-stretch: 125%; color: var(--graphite); font-size: 14px; }
.buehne { position: sticky; top: 82px; }
.ansicht {
  position: relative; height: min(62vh, 620px); min-height: 380px; border-radius: var(--radius-m); overflow: hidden;
  background: linear-gradient(180deg, #f7f8fa 0%, #e5e9ee 100%); border: 1px solid var(--rule);
}
.ansicht canvas { display: block; width: 100%; height: 100%; }
.ansicht .leertext { position: absolute; inset: 0; display: grid; place-items: center; color: var(--graphite); text-align: center; padding: 24px; }
.ansicht .tipp { position: absolute; padding: 4px 8px; border-radius: 3px; background: var(--ink); color: #fff; font-size: 12.5px; pointer-events: none; transform: translate(12px, 12px); white-space: nowrap; }
.ansicht .steuer { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.ansicht .steuer button { padding: 5px 9px; font-size: 12.5px; background: rgba(248,249,250,.92); }
.ansicht .legende { position: absolute; left: 14px; bottom: 12px; right: 14px; max-width: 440px; font-size: 12px; color: var(--graphite); }
.legende .verlauf { height: 10px; border-radius: 2px; margin: 4px 0 3px; }
.legende .skala { display: flex; justify-content: space-between; }
.wartet { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(236,239,242,.8); font-weight: 600; text-align: center; padding: 24px; }

.fakten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius-s); overflow: hidden; margin-top: 14px; }
.fakten div { background: var(--sheet); padding: 9px 12px; }
.fakten dt { font-size: 12.5px; color: var(--graphite); }
.fakten dd { margin: 0; font-weight: 650; font-size: 15px; }
.schaetzung { margin-top: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius-s); font-size: 13.5px; }
.schaetzung strong { font-size: 18px; font-stretch: 112%; }
.dreh { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Einstellungen */
.einstellungen { max-width: 760px; display: grid; gap: 16px; }
.einstellungen .schritt { padding: 20px 22px; }
.pfad { display: flex; gap: 8px; }
code, .code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; background: var(--rule-soft); padding: 1px 5px; border-radius: 3px; }
ol.anleitung { margin: 6px 0 0; padding-left: 20px; }
ol.anleitung li { margin-bottom: 6px; }

/* ---------------------------------------------------------------- Meldungen */
.meldung { position: fixed; right: 24px; bottom: 24px; max-width: 420px; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-s); font-size: 14px; z-index: 50; box-shadow: 0 8px 28px rgba(20,32,43,.22); }
.meldung.fehler { background: var(--stagnation); }

@media (max-width: 960px) {
  .werkbank { grid-template-columns: 1fr; }
  .buehne { position: static; }
  .kopf { gap: 14px; padding: 0 16px; }
  main { padding: 22px 16px 48px; }
  .protokoll .weg { display: none; }
  .fakten { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- Diagramme */
.diagramm { width: 100%; height: auto; display: block; overflow: visible; }
.diagramm .achse { font-size: 11.5px; fill: var(--graphite); font-family: var(--font); }
.diagramm .beschriftung { font-size: 13px; fill: var(--ink); font-family: var(--font); font-weight: 550; }
.diagramm .wert { font-size: 12.5px; fill: var(--ink); font-family: var(--font); font-variant-numeric: tabular-nums; }
.diagrammtipp { position: absolute; z-index: 5; background: var(--ink); color: #fff; font-size: 12.5px; padding: 5px 8px; border-radius: 3px; pointer-events: none; white-space: nowrap; }

/* ---------------------------------------------------------------- Bericht */
.bericht { max-width: 1180px; }
.bericht section { margin-top: 44px; }
.bericht section > h2 { margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.berichtkopf { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.berichtkopf h1 { font-size: 38px; font-stretch: 118%; }
.berichtkopf .notiz { color: var(--graphite); margin: 6px 0 0; }
.eckdaten { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: 13.5px; color: var(--graphite); }
.eckdaten b { color: var(--ink); font-weight: 600; }
.berichtkopf .aktionen { display: flex; gap: 8px; }

.held { display: grid; grid-template-columns: 330px 1fr; gap: 28px; margin-top: 26px; align-items: stretch; }
.held .ansicht { height: 460px; }
.ansichtsblock { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.modi { display: flex; flex-wrap: wrap; gap: 6px; }
.heimnetz { display: flex; gap: 16px; align-items: center; margin-top: 10px; padding: 12px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-s); }
.heimnetz .qr svg { width: 132px; height: 132px; display: block; background: #fff; }
.modi button { padding: 6px 11px; font-size: 13px; }
.modi button.an { background: var(--ink); color: #fff; border-color: var(--ink); }
table.bereiche tbody tr { cursor: pointer; }
table.bereiche tbody tr:hover td { background: #fff; }
table.bereiche tbody tr.gewaehlt td { background: var(--suction-wash); }
table.bereiche td:nth-child(2), table.bereiche td:nth-child(4) { white-space: nowrap; }
table.bereiche .balkenzelle { width: 34%; }
.minibalken { display: block; height: 8px; border-radius: 2px; }
.minibalken.auf { background: var(--stagnation); }
.minibalken.ab { background: var(--suction); }
.cwblock { display: flex; flex-direction: column; justify-content: space-between; padding: 22px 0 6px; border-top: 3px solid var(--ink); }
.cwblock .zahl-gross { font-size: 104px; line-height: 0.92; font-weight: 700; font-stretch: 125%; letter-spacing: -0.035em; }
.cwblock .zahl-name { font-size: 15px; color: var(--graphite); margin-top: 10px; }
.cwblock .zahl-name b { color: var(--ink); }
.nebenwerte { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); margin-top: 24px; border-radius: var(--radius-s); overflow: hidden; }
.nebenwerte div { background: var(--sheet); padding: 10px 12px; }
.nebenwerte dt { font-size: 12.5px; color: var(--graphite); }
.nebenwerte dd { margin: 0; font-size: 22px; font-weight: 650; font-stretch: 110%; }
.korrektur { font-size: 13px; color: var(--graphite); margin-top: 10px; }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
table.werte { width: 100%; border-collapse: collapse; }
.werte td, .werte th { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14.5px; text-align: left; }
.werte th { font-weight: 600; font-size: 12.5px; color: var(--graphite); }
.werte td:not(:first-child), .werte th:not(:first-child) { text-align: right; }
.werte td:first-child { color: var(--graphite); }
.werte td b { font-weight: 650; }

.achslast { background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--radius-m); padding: 16px 18px; }
.achslast svg { width: 100%; height: auto; display: block; }
.balance { margin-top: 12px; }
.balance .leiste { display: flex; height: 26px; border-radius: 3px; overflow: hidden; font-size: 12.5px; font-weight: 650; }
.balance .leiste span { display: flex; align-items: center; padding: 0 9px; color: #fff; white-space: nowrap; }
.balance .vorne { background: var(--ink); }
.balance .hinten { background: var(--graphite); justify-content: flex-end; }
.diagrammkasten { background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--radius-m); padding: 14px 16px 8px; }
.diagrammkasten h3 { margin-bottom: 4px; }
.diagrammkasten p { font-size: 13px; color: var(--graphite); margin: 0 0 6px; }

.bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.bilder figure { margin: 0; }
.bilder img { width: 100%; display: block; border-radius: var(--radius-s); border: 1px solid var(--rule-soft); background: #eef1f4; }
.bilder figcaption { font-size: 13px; color: var(--graphite); margin-top: 6px; }
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
dl.daten dt { color: var(--graphite); }
dl.daten dd { margin: 0; }
.einordnung p { font-size: 14.5px; }

/* Vergleich */
.vergleichstabelle { width: 100%; border-collapse: collapse; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden; }
.vergleichstabelle th, .vergleichstabelle td { padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); text-align: right; font-size: 14px; }
.vergleichstabelle th:first-child, .vergleichstabelle td:first-child { text-align: left; color: var(--graphite); }
.vergleichstabelle thead th { background: var(--paper); color: var(--ink); font-weight: 650; vertical-align: bottom; }
.vergleichstabelle thead th small { display: block; font-weight: 500; color: var(--graphite); }
.vergleichstabelle .delta { display: block; font-size: 12.5px; color: var(--graphite); }
.ansichten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ansichten .ansicht { height: 340px; min-height: 0; }
.ansichten figcaption { font-weight: 600; margin-top: 6px; }

@media (max-width: 960px) {
  .held, .zweispaltig { grid-template-columns: 1fr; }
  .cwblock .zahl-gross { font-size: 80px; }
  .berichtkopf { grid-template-columns: 1fr; }
}
/* Ansicht vom Handy im Heimnetz: nur ansehen */
body.nur-ansehen .bearbeiten, body.nur-ansehen #neu-auswerten { display: none !important; }
#liste { overflow-x: auto; }
.berichtkopf .aktionen, .titelzeile .aktionen { flex-wrap: wrap; }
.ansicht .steuer { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 64px); }
@media (max-width: 640px) {
  .kopf { gap: 10px; padding: 0 12px; }
  .marke .version, .kopf .rechts { display: none; }
  .navi { overflow-x: auto; min-width: 0; }
  .navi a { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  .titelzeile { flex-direction: column; align-items: stretch; }
  .titelzeile .aktionen { margin-left: 0; }
  .berichtkopf h1 { font-size: 30px; }
  .berichtkopf .aktionen .knopf, .berichtkopf .aktionen button { padding: 7px 10px; font-size: 13px; }
  .ansicht .steuer button { padding: 4px 7px; font-size: 12px; }
  .held .ansicht { height: 380px; }
  .protokoll .knoepfe { white-space: normal; }
  table.bereiche .balkenzelle { display: none; }
}
.nur-druck { display: none; }
@media print {
  .nur-druck { display: block; }
  #ansichten-druck { break-before: page; }
  #ansichten-druck .druckseite + .druckseite { break-before: page; }
  #ansichten-druck h3 { font-size: 15px; margin: 10px 0 2px; }
  .ansichtsraster { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm 5mm; }
  .ansichtsraster figure { margin: 0; break-inside: avoid; }
  .ansichtsraster img { width: 100%; display: block; border: 1px solid #dfe4e9; border-radius: 3px; }
  .ansichtsraster figcaption { font-size: 10.5px; color: #566370; margin-top: 2px; }
  .schnittraster figure.breit { grid-column: 1 / -1; }
  .legende-druck { max-width: 120mm; margin: 4px 0 8px; font-size: 10.5px; color: #566370; }
  .legende .verlauf, .ansichtsraster img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 14mm; }
  body { background: #fff; font-size: 12px; }
  .kopf, .aktionen, .steuer, .nicht-drucken { display: none !important; }
  main { padding: 0; max-width: none; }
  .bericht section { margin-top: 22px; break-inside: avoid; }
  .held { grid-template-columns: 250px 1fr; }
  .held .ansicht { height: 340px; background: #fff; }
  .cwblock .zahl-gross { font-size: 72px; }
  .bilder { grid-template-columns: 1fr 1fr; }
  .diagrammkasten, .achslast { break-inside: avoid; }
}

/* Live-Vorschau während der Rechnung */
.laufkarte .livebild { grid-column: 1 / -1; margin: 10px 0 0; max-width: 640px; }
.laufkarte .livebild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--radius-s); border: 1px solid var(--rule-soft); background: #e6eaee; }
.laufkarte .livebild figcaption { font-size: 12.5px; color: var(--graphite); margin-top: 4px; }
.laufkarte .livetext { grid-column: 1 / -1; font-size: 13px; color: var(--graphite); }
.live-hilfe { margin: -2px 0 8px 26px; }
.live-hilfe b { font-weight: 650; color: var(--ink); }
.check input:disabled + * , .check:has(input:disabled) { color: var(--muted); }

/* Rechenweg OpenFOAM: nur FluidX3D-Optionen ausblenden */
#s3.of .nur-fx { display: none !important; }
#e-loeser label { white-space: normal; line-height: 1.25; }
.zeile { flex-wrap: wrap; }
.zeile > * { min-width: 150px; }
.ofmarke { font-size: 11.5px; font-weight: 650; color: var(--graphite); border: 1px solid var(--rule); padding: 0 6px; border-radius: 3px; margin-left: 6px; }

/* Variantenliste: Filter, Sortierung, Rechenweg, Auswahlleiste */
.listenkopf { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; flex-wrap: wrap; }
.klein-segmente { display: inline-grid; min-width: 300px; }
.klein-segmente label { padding: 6px 12px; font-size: 13px; }
.protokoll th.sortierbar { padding: 0; }
.protokoll th.sortierbar button { all: unset; box-sizing: border-box; display: flex; gap: 4px; align-items: center; width: 100%; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; white-space: nowrap; }
.protokoll th.zahl.sortierbar button { justify-content: flex-end; }
.protokoll th.sortierbar button:hover, .protokoll th.sortiert button { color: var(--ink); }
.protokoll th.sortierbar button:focus-visible { outline: 2px solid var(--suction); outline-offset: -2px; }
.protokoll th .pfeil { font-size: 9px; min-width: 9px; }
.protokoll tr[data-gewaehlt] td { background: #eef3fb; }
.loesermarke { font-size: 12px; font-weight: 650; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--rule); white-space: nowrap; }
.loesermarke.of { color: #1f4f8f; border-color: #b9cbe6; background: #f1f5fb; }
.loesermarke.fx { color: var(--graphite); }
.auswahlleiste { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; background: var(--ink); color: #fff; border-radius: var(--radius-m); box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 14px; max-width: calc(100% - 32px); flex-wrap: wrap; }
.auswahlleiste button.leise { color: #d5dbe1; }
.auswahlleiste button.haupt { background: #fff; color: var(--ink); }
.auswahlleiste button:disabled { opacity: .45; }
@media (max-width: 640px) { .klein-segmente { min-width: 0; width: 100%; } }

.tempozeile { display: flex; gap: 10px; align-items: stretch; }
.tempozeile .segmente { flex: 1; }
.tempozeile input { width: 96px; flex: none; }

.vergleichssteuer { display: flex; gap: 10px; flex-wrap: wrap; }
.vergleichssteuer .modi { display: flex; gap: 6px; flex-wrap: wrap; }

.fahrzeugmarke { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.fahrzeugmarke i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kleinwahl { width: auto; min-width: 170px; padding: 6px 10px; font-size: 13px; }
.auswahlleiste .zuweisen { display: inline-flex; gap: 6px; }
.auswahlleiste .zuweisen input { width: 190px; padding: 6px 9px; font-size: 13px; color: var(--ink); }
.auswahlleiste .zuweisen button { padding: 6px 10px; font-size: 13px; }

/* Dashboard */
.db-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
.db-fahrzeuge { display: flex; gap: 6px; flex-wrap: wrap; }
.fahrzeugchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 13px; border-radius: 999px; background: var(--sheet); color: var(--muted); }
.fahrzeugchip i { width: 10px; height: 10px; border-radius: 50%; opacity: .35; }
.fahrzeugchip.an { color: var(--ink); border-color: var(--graphite); }
.fahrzeugchip.an i { opacity: 1; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }
.kachel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 14px 16px; cursor: pointer; }
.kachel:hover { border-color: var(--graphite); }
.kachel-titel { font-size: 12.5px; color: var(--graphite); font-weight: 600; }
.kachel-wert { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.kachel-name { font-weight: 650; font-size: 14px; }
.kachel-meta { font-size: 12.5px; color: var(--graphite); margin-top: 3px; }
.db-zwei { margin-top: 18px; align-items: start; }
.db-zwei .diagrammkasten { padding: 14px 16px; }
.db-zwei h3 { margin: 0 0 10px; font-size: 15px; }
.db-rang, .db-streu { width: 100%; height: auto; display: block; }
.db-rang text { font-size: 12.5px; fill: var(--ink); }
.db-rang .db-rangnr, .db-rang .db-rangwert { fill: var(--graphite); font-variant-numeric: tabular-nums; }
.db-rang g:hover .db-rangname { text-decoration: underline; }
.db-gitter { stroke: #dfe4e9; }
.db-null { stroke: #9aa6b2; }
.db-besser { fill: var(--graphite); font-style: italic; }
.db-legende { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--graphite); }
.db-leg { display: inline-flex; align-items: center; gap: 5px; }
.db-tipp { position: absolute; z-index: 30; pointer-events: none; max-width: 300px; }
.db-tabelle td a { color: var(--ink); font-weight: 600; }

.tabellenrahmen { overflow-x: auto; border-radius: var(--radius-m); }
.protokoll td.knoepfe { white-space: nowrap; }
details.mehr { display: inline-block; position: relative; vertical-align: middle; margin-left: 4px; }
details.mehr summary { list-style: none; cursor: pointer; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-s); font-weight: 700; line-height: 1; background: var(--sheet); }
details.mehr summary::-webkit-details-marker { display: none; }
details.mehr[open] summary { background: var(--paper); }
details.mehr .menue { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; display: grid; min-width: 170px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; }
details.mehr .menue button { text-align: left; border: 0; background: none; padding: 8px 10px; }
details.mehr .menue button:hover { background: var(--paper); }
.auswahlleiste { width: max-content; }

.stromwahl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; }
.stromwahl .check { margin: 2px 0; font-size: 13px; }
.schnittwahl { display: grid; gap: 6px; margin: 0 0 8px; }
.stromregler { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.stromregler .modi.klein button { padding: 4px 12px; font-size: 12.5px; }
#strom-regler { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
#strom-regler[hidden] { display: none; }
#strom-pos { flex: 1; accent-color: var(--ink); }
#strom-wert { font-size: 12.5px; white-space: nowrap; min-width: 140px; }
#strom-reihen { margin-top: 6px; }
.schnittwahl .modi.klein button { padding: 4px 9px; font-size: 12.5px; }
.schnittwahl .check { margin: 0 0 0 6px; font-size: 13px; align-self: center; }

.teileliste { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.teileliste .teil { display: inline-flex; align-items: center; gap: 2px; }
.teileliste .check { margin: 4px 0; font-size: 13.5px; }
.teil-weg { border: 0; background: none; color: var(--muted); padding: 0 4px; font-size: 15px; line-height: 1; cursor: pointer; opacity: .55; }
.teil-weg:hover { color: var(--ink); opacity: 1; }
.teil-neu { display: flex; gap: 6px; margin-top: 6px; }
.teil-neu input { flex: 1; }
.modusmarke { font-size: 12px; font-weight: 650; padding: 1px 7px; border-radius: 3px; background: var(--ink); color: #fff; white-space: nowrap; }
.modusmarke.road { background: #52606d; } .modusmarke.sport { background: #c0392b; } .modusmarke.track { background: #1f4f8f; } .modusmarke.topspeed { background: #7a3db8; }
.teilezeile { display: block; font-size: 12px; color: var(--graphite); margin-top: 2px; }
.auswahlleiste .zuweisen select { padding: 6px 9px; font-size: 13px; color: var(--ink); width: auto; }

/* ---------------------------------------------------------------- AeroLab im Internet (3.0) */
body.internet .nur-pc { display: none !important; }
body:not(.internet) .nur-internet { display: none !important; }
.kopf .rechts { display: flex; align-items: center; gap: 8px; }
.klein-knopf { padding: 4px 10px; font-size: 12.5px; }
.umzugsband { background: #fff4d6; border-bottom: 1px solid #e8d49a; color: #4a3b10; padding: 10px 24px; font-size: 14px; }
.umzugsband a { color: inherit; font-weight: 650; }
.webvorgang { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-s); background: #fff; }
.webvorgang .fortschritt-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.webvorgang .fortschritt-balken { height: 6px; background: #e6eaee; border-radius: 3px; overflow: hidden; }
.webvorgang .fortschritt-balken i { display: block; height: 100%; background: var(--ink); transition: width .4s; }
.anmeldeseite { min-height: 100vh; display: grid; place-items: center; }
.anmeldung { width: min(380px, calc(100vw - 32px)); padding: 0; }
.anmeldemarke { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; justify-content: center; }
.anmeldemarke h1 { margin: 0; font-size: 28px; }
.anmeldung form button { width: 100%; margin-top: 4px; }

/* ---------------------------------------------------------------- Bereiche (3.0.4) */
.bereichsort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.bereichsort button { padding: 4px 11px; font-size: 13px; }
.bereichsliste { border-top: 1px solid var(--rule); }
.bereich { display: grid; grid-template-columns: minmax(150px, 1.2fr) 1fr 1fr; gap: 6px 18px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; }
.bereich:hover { background: #fff; }
.bereich.gewaehlt { background: var(--suction-wash); }
.bereich.kopfzeile { cursor: default; font-size: 12.5px; font-weight: 650; color: var(--graphite); background: none; }
.bereich .bname { font-weight: 550; }
.bereich .bwert { font-size: 13.5px; display: grid; gap: 4px; }
.bbalken { display: block; height: 7px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.bbalken i { display: block; height: 100%; border-radius: 2px; }
.bbalken i.auf { background: var(--stagnation); }
.bbalken i.ab { background: var(--suction); }
@media (max-width: 640px) {
  .bereich { grid-template-columns: 1fr 1fr; }
  .bereich .bname { grid-column: 1 / -1; }
  .bereich.kopfzeile { display: none; }
}

/* ---------------------------------------------------------------- Handy: Kopf und Variantenkarten (3.0.4) */
.nur-handy { display: none; }
.vkarten { display: grid; gap: 10px; }
.vkarte { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 12px 14px; }
.vkarte[data-gewaehlt] { border-color: var(--ink); }
.vk-kopf { display: flex; align-items: flex-start; gap: 10px; }
.vk-kopf input { margin-top: 3px; }
.vk-kopf .vk-name { flex: 1; font-weight: 650; font-size: 15.5px; line-height: 1.3; }
.vk-kopf .vk-name a { color: var(--ink); }
.vk-info { font-size: 12.5px; color: var(--graphite); margin: 4px 0 0 28px; }
.vk-werte { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0 28px; font-size: 14px; }
.vk-werte b { font-size: 16px; }
.vk-knoepfe { display: flex; gap: 8px; align-items: center; margin: 10px 0 0 28px; flex-wrap: wrap; }
.vk-knoepfe .knopf, .vk-knoepfe button { padding: 6px 12px; font-size: 13px; }
.vkarte .fehlertext, .vkarte .fehlermehr { margin-left: 28px; }
@media (max-width: 720px) {
  .nur-handy { display: initial; }
  .kopf .rechts { display: flex !important; gap: 6px; }
  .kopf .rechts .modus { display: none; }
  .listenkopf { flex-wrap: wrap; gap: 8px; }
  .listenkopf .kleinwahl { min-width: 0; flex: 1 1 140px; }
  .laufkarte { grid-template-columns: 1fr; }
  .laufkarte .gefahr { justify-self: start; }
}

/* ---------------------------------------------------------------- Vollbild und große Vergleichsansicht (3.0.4) */
.vollbildknopf { position: absolute; left: 10px; top: 10px; z-index: 3; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: rgba(255,255,255,.9); }
.ansicht.vollbild { position: fixed !important; inset: 0; z-index: 1000; width: 100vw; height: 100vh !important; height: 100dvh !important; max-height: none; min-height: 0; border-radius: 0; margin: 0; background: var(--paper, #eef1f4); }
body.mit-vollbild { overflow: hidden; }
.ansicht.vollbild .vollbildknopf { left: 12px; top: max(12px, env(safe-area-inset-top)); }
.ansichten.gross { grid-template-columns: 1fr; }
.ansichten.gross .ansicht { height: min(72vh, 680px); }
table.vbereiche td { white-space: nowrap; vertical-align: top; }
table.vbereiche .unterkopf th { font-size: 12px; font-weight: 600; color: var(--graphite); }
table.vbereiche .delta.mehr, table.vbereiche .delta.weniger { display: block; }
.stromanim { margin-left: auto; }
@media (max-width: 720px) { .stromanim { margin-left: 0; } }
.db-rangkopf { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.db-rangkopf h3 { margin-right: auto; }
.db-rangwahl button { padding: 4px 12px; font-size: 12.5px; }
.hinweistext { display: block; color: #8a5a00; font-size: 12.5px; margin-top: 3px; }