/* erzeugt von bau-rechner.mjs, nicht von Hand ändern */
:root {
  color-scheme: light;
  --mt-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mt-font-display: var(--mt-font);
  --mt-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mt-bg: #ffffff;
  --mt-surface: #ffffff;
  --mt-surface-2: #f5f6f8;
  --mt-border: #e4e6eb;
  --mt-border-strong: #c8ccd4;
  --mt-text: #15171c;
  --mt-muted: #5a6170;
  --mt-faint: #6f7685;
  --mt-accent: #1a4fd6;
  --mt-accent-hover: #143fae;
  --mt-accent-soft: #e8eefc;
  --mt-accent-ink: #ffffff;
  --farbe: var(--mt-accent);
  --farbe-knopf: var(--mt-accent);
  --mt-gruen: #0f6b3f;
  --mt-gruen-soft: #e6f4ec;
  --mt-warn: #7a4a00;
  --mt-warn-soft: #fff4e0;
  --mt-fehler: #b3261e;
  --mt-fehler-soft: #fdecec;
  --mt-radius: 10px;
  --mt-radius-s: 6px;
  --mt-shadow: none;
  --mt-shadow-hoch: 0 8px 24px rgba(21, 23, 28, .12);
  --mt-breite: 1200px;
  --mt-lese: 72ch;
  --mt-rand: clamp(16px, 4vw, 32px);
  --mt-kopf-h: 64px;
  --mt-s1: 4px; --mt-s2: 8px; --mt-s3: 12px; --mt-s4: 16px; --mt-s5: 24px; --mt-s6: 32px; --mt-s7: 48px; --mt-s8: 64px;
  --mt-ease-out: cubic-bezier(.23, 1, .32, 1);
  --mt-dauer-kurz: 120ms;
  --mt-dauer: 180ms;
  /* Redesign Agentur (25.10.2026): Bühnenfarben der Startseite, zweiter Tonbandton */
  --mt-buehne: #1a4fd6;
  --mt-buehne-2: #15171c;
  --mt-ton-2: #eceef2;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:6px;background:transparent;color:var(--mt-text);font:400 1rem/1.6 var(--mt-font)}
:root{--farbe:#0fa5a0;--farbe-knopf:color-mix(in srgb,var(--farbe) 65%,#000)}
.sr-nur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2,h3{font-family:var(--mt-font-display)}
.mt-w-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.mt-w-karte { min-width: 0; background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-radius); padding: 24px; }
.mt-w-karte > h2 { font-size: 1.0625rem; line-height: 1.35; margin: 0 0 4px; }
.mt-w-karte > .mt-w-hinweis { margin: 0 0 16px; }
.mt-w-karte p { color: var(--mt-text); }   /* Fließtext; Meta-Angaben setzen --mt-muted über eigene Klassen weiter unten */
.mt-w-feld { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; }
.mt-w-feld > span { font-weight: 500; font-size: .875rem; }
.mt-w-feld small { color: var(--mt-muted); font-size: .8125rem; font-weight: 400; }
.mt-w-feld input, .mt-w-feld select, .mt-w-feld textarea { width: 100%; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--mt-border-strong); border-radius: var(--mt-radius-s); background: var(--mt-surface); font: inherit; font-size: 16px; color: var(--mt-text); font-variant-numeric: tabular-nums; transition: border-color var(--mt-dauer-kurz) var(--mt-ease-out); }
.mt-w-feld textarea { min-height: 120px; resize: vertical; }
.mt-w-feld input:focus, .mt-w-feld select:focus, .mt-w-feld textarea:focus { border-color: var(--mt-accent); }
.mt-w-feld input::placeholder, .mt-w-feld textarea::placeholder { color: var(--mt-faint); }
.mt-w-feld input:disabled, .mt-w-feld select:disabled, .mt-w-feld textarea:disabled { opacity: .5; cursor: not-allowed; }
.mt-w-feld[data-fehler] input, .mt-w-feld[data-fehler] select, .mt-w-feld[data-fehler] textarea { border-color: var(--mt-fehler); }
.mt-w-wahl-titel { font-weight: 500; font-size: .875rem; color: var(--mt-text); }
.mt-w-wahl { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mt-w-wahl button { min-height: 40px; padding: 0 14px; border-radius: var(--mt-radius-s); border: 1px solid var(--mt-border-strong); background: var(--mt-surface); font: inherit; font-weight: 500; font-size: .875rem; cursor: pointer; color: var(--mt-text); touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background-color var(--mt-dauer-kurz) var(--mt-ease-out), border-color var(--mt-dauer-kurz) var(--mt-ease-out), transform var(--mt-dauer-kurz) var(--mt-ease-out); }
.mt-w-wahl button:active { transform: scale(.97); }
.mt-w-wahl button[aria-pressed='true'] { background: var(--farbe-knopf, var(--mt-accent)); border-color: var(--farbe-knopf, var(--mt-accent)); color: var(--mt-accent-ink); }
.mt-w-wahl button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.mt-w-wahl--gleich { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mt-w-wahl--gleich button { padding: 6px 10px; line-height: 1.2; }
.mt-w-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--mt-radius-s); border: 1px solid var(--farbe-knopf, var(--mt-accent)); background: var(--farbe-knopf, var(--mt-accent)); color: var(--mt-accent-ink); font: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.2; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background-color var(--mt-dauer-kurz) var(--mt-ease-out), border-color var(--mt-dauer-kurz) var(--mt-ease-out), transform var(--mt-dauer-kurz) var(--mt-ease-out); }
.mt-w-knopf:active { transform: scale(.97); }
.mt-w-knopf:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.mt-w-knopf--leise { background: var(--mt-surface); color: var(--mt-text); border-color: var(--mt-border-strong); }
.mt-w-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; min-width: 0; }
.mt-w-ablage { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; min-height: 190px; padding: 24px; border: 1.5px dashed var(--mt-border-strong); border-radius: var(--mt-radius); background: var(--mt-surface-2); text-align: center; cursor: pointer; min-width: 0; overflow-wrap: anywhere; transition: background-color var(--mt-dauer-kurz) var(--mt-ease-out), border-color var(--mt-dauer-kurz) var(--mt-ease-out); }
.mt-w-ablage[data-ueber] { background: var(--mt-accent-soft); border-color: var(--mt-accent); }
.mt-w-ablage strong { font-size: 1rem; font-weight: 600; }
.mt-w-ablage span { color: var(--mt-muted); font-size: .875rem; }
.mt-w-ablage svg { color: var(--mt-accent); }
.mt-w-ablage input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.mt-w-ablage:focus-within { outline: 2px solid var(--mt-accent); outline-offset: 2px; }   /* Fokus der unsichtbaren Datei-Auswahl am Rahmen zeigen */
.mt-w-ergebnis { font-variant-numeric: tabular-nums; position: relative; min-width: 0; overflow: hidden; border-radius: var(--mt-radius); padding: 20px; background: var(--mt-surface-2); overflow-wrap: anywhere; transition: opacity var(--mt-dauer) var(--mt-ease-out); }
.mt-w-wert { font-family: var(--mt-font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: 0; line-height: 1.1; color: var(--mt-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mt-w-wert-label { color: var(--mt-muted); font-size: .8125rem; font-weight: 500; }
.mt-w-tabelle { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.mt-w-tabelle th, .mt-w-tabelle td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--mt-border); overflow-wrap: anywhere; }
.mt-w-tabelle th { font-size: .75rem; font-weight: 500; color: var(--mt-muted); hyphens: manual; overflow-wrap: normal; word-break: normal; }   /* Kopf bricht nur an Leerzeichen, nie mitten im Wort */
.mt-w-tabelle td { font-variant-numeric: tabular-nums; hyphens: auto; overflow-wrap: break-word; }   /* schmale Spalten: Silbentrennung statt Bruch mitten im Wort */
.mt-w-tabelle td:last-child, .mt-w-tabelle th:last-child { text-align: right; }
.mt-w-tabelle tfoot th, .mt-w-tabelle tfoot td, .mt-w-tabelle .mt-w-summe th, .mt-w-tabelle .mt-w-summe td { font-size: .9375rem; font-weight: 600; color: var(--mt-text); border-top: 2px solid var(--mt-border-strong); }
.mt-w-tabelle-wrap { max-width: 100%; overflow-x: auto; }   /* Wrapper für breite Tabellen */
.mt-w-leer { display: grid; place-items: center; min-height: 220px; text-align: center; color: var(--mt-muted); border: 1px dashed var(--mt-border-strong); border-radius: var(--mt-radius); padding: 20px; min-width: 0; }
.mt-w-hinweis { color: var(--mt-text); font-size: .875rem; }
.mt-w-warnung, .mt-w-info, .mt-w-fehler { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--mt-radius-s); border: 1px solid; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.mt-w-warnung { background: var(--mt-warn-soft); border-color: color-mix(in srgb, var(--mt-warn) 30%, transparent); color: var(--mt-warn); }
.mt-w-info { background: var(--mt-accent-soft); border-color: color-mix(in srgb, var(--mt-accent) 30%, transparent); color: var(--mt-accent-hover); }
.mt-w-fehler { background: var(--mt-fehler-soft); border-color: color-mix(in srgb, var(--mt-fehler) 30%, transparent); color: var(--mt-fehler); }
.mt-w-warnung a, .mt-w-info a, .mt-w-fehler a { color: inherit; text-decoration: underline; }
.mt-w-fortschritt { height: 6px; border-radius: var(--mt-radius-s); background: var(--mt-surface-2); overflow: hidden; }
.mt-w-fortschritt > i { display: block; height: 100%; background: var(--mt-accent); border-radius: inherit; transition: width var(--mt-dauer) var(--mt-ease-out); }
.mt-w-schritte { display: flex; gap: 8px 16px; margin: 0 0 16px; padding: 0; counter-reset: s; flex-wrap: wrap; }
.mt-w-schritte li { list-style: none; counter-increment: s; display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--mt-muted); font-weight: 500; }
.mt-w-schritte li::before { content: counter(s); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mt-surface-2); font-size: .75rem; font-variant-numeric: tabular-nums; }
.mt-w-schritte li[data-aktiv]::before { background: var(--farbe-knopf, var(--mt-accent)); color: var(--mt-accent-ink); }
.mt-w-schritte li[data-aktiv] { color: var(--mt-text); }
.mt-w-ohne-rand.mt-w-ohne-rand { margin: 0; }  /* vor abstand/unten: Kombination ergibt z. B. margin N 0 0 */
.mt-w-abstand-1.mt-w-abstand-1 { margin-top: 8px; }
.mt-w-abstand-2.mt-w-abstand-2 { margin-top: 16px; }
.mt-w-abstand-3.mt-w-abstand-3 { margin-top: 24px; }
.mt-w-abstand-4.mt-w-abstand-4 { margin-top: 32px; }
.mt-w-unten-1.mt-w-unten-1 { margin-bottom: 8px; }
.mt-w-unten-2.mt-w-unten-2 { margin-bottom: 16px; }
.mt-w-unten-3.mt-w-unten-3 { margin-bottom: 24px; }
.mt-w-ohne-oben.mt-w-ohne-oben { margin-top: 0; }
.mt-w-ohne-unten.mt-w-ohne-unten { margin-bottom: 0; }
.mt-w-rechts.mt-w-rechts { text-align: right; }
.mt-w-links.mt-w-links { text-align: left; }
.mt-w-mitte.mt-w-mitte { text-align: center; }
.mt-w-klapp.mt-w-klapp { cursor: pointer; font-weight: 600; }
.mt-w-mono.mt-w-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mt-w-zeile { display: flex; gap: 12px; min-width: 0; flex-wrap: wrap; align-items: center; }
.mt-w-zeile--eng.mt-w-zeile--eng { gap: 8px; flex-wrap: nowrap; }
.mt-w-hakenzeile { display: flex; gap: 10px; align-items: flex-start; min-width: 0; cursor: pointer; }
.mt-w-hakenzeile--mitte.mt-w-hakenzeile--mitte { align-items: center; }
.mt-w-sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-w-knopf:not(.mt-w-knopf--leise){background:#0b7c78}
.mt-w-wahl button[aria-pressed='true']{background:#0b7c78;border-color:#0b7c78}
.mt-w-griff{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:transparent;cursor:grab;touch-action:none;display:grid;place-items:center}
.mt-w-griff:active{cursor:grabbing}
.mt-w-griff i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--farbe);box-shadow:0 1px 6px rgba(0,0,0,.45);font-style:normal}
.mt-w-griff:focus-visible{outline:none}
.mt-w-griff:focus-visible i{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px #111}
.mt-w-ecken{position:relative;line-height:0;border-radius:10px;overflow:visible;background:#222;user-select:none;-webkit-user-select:none}
.mt-w-ecken canvas{width:100%;height:auto;display:block;border-radius:10px}
.mt-w-ecken svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mt-w-seiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.mt-w-seiten{grid-template-columns:minmax(0,1fr)}}
.mt-w-vorschau canvas{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;border:1px solid var(--mt-border-strong);border-radius:6px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.mt-w-haken{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-weight:600;font-size:.92rem;cursor:pointer}
.mt-w-haken input{width:22px;height:22px;margin-top:1px;accent-color:var(--farbe);flex:none}
/* Druck: nur das Blatt (A4, ohne Rand, 100 %) */
#druckblatt{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body{margin:0!important;padding:0!important;background:#fff!important}
  #wurzel{display:none!important}
  #druckblatt{display:block}
  #druckblatt img{display:block;width:210mm;height:297mm}
}