:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --bg: #f2f3f5;
  --karte: #ffffff;
  --text: #1d1d1f;
  --leise: #6e6e73;
  --linie: #dcdde2;
  --dunkel: #0b0f14;
  --rot: #e60004;
  --gruen: #00873a;
  --gruen-hell: #e8f6ee;
  --warn: #b25000;
  --warn-hell: #fff3e6;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; }
button, input, select { font: inherit; color: inherit; }

.app { min-height: 100vh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.kopf {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  background: var(--dunkel); color: #fff;
  border-bottom: 3px solid var(--rot);
}
.kopf img { width: 52px; height: auto; }
.kopf strong { display: block; font-size: 1.15rem; }
.kopf small { color: #b8bcc4; }
.zurueck { width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgb(255 255 255 / 12%); color: #fff; font-size: 1.8rem; line-height: 1; }

main { padding: 16px; width: 100%; overflow-x: hidden; display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }

.karte { background: var(--karte); border-radius: 18px; padding: 16px; box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 8px 24px rgb(0 0 0 / 5%); display: grid; gap: 12px; }
.karte h2 { margin: 0; font-size: 1.1rem; }

.hauptKnopf, .zweitKnopf {
  width: 100%; min-height: 56px; border-radius: 16px; font-weight: 700; font-size: 1.05rem;
}
.hauptKnopf { border: 0; background: var(--gruen); color: #fff; }
.zweitKnopf { border: 2px dashed var(--linie); background: transparent; color: var(--leise); }
.textKnopf { border: 0; background: none; color: var(--gruen); font-weight: 600; padding: 6px 0; text-align: left; }

.leer, .klein { color: var(--leise); font-size: 0.9rem; margin: 0; }
.quelle { text-align: center; }

.baustelle { grid-template-columns: 1fr auto; align-items: center; padding: 0; }
.baustelle > button:first-child { border: 0; background: none; text-align: left; padding: 16px; display: grid; gap: 4px; }
.baustelle span { color: var(--leise); font-size: 0.9rem; }
.loeschen { border: 0; background: none; color: var(--leise); width: 52px; height: 52px; font-size: 1.1rem; }

.feld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.feld > span { font-size: 0.85rem; color: var(--leise); font-weight: 600; }
.feld select, .feldEingabe {
  min-height: 52px; border: 1.5px solid var(--linie); border-radius: 12px; background: #fff; width: 100%;
}
.feld select { padding: 0 12px; }
.feldEingabe { display: flex; align-items: center; }
.feldEingabe input { flex: 1; width: 100%; min-width: 0; border: 0; background: none; padding: 0 12px; height: 50px; font-size: 1.1rem; font-weight: 600; outline: none; }
.feldEingabe em { font-style: normal; color: var(--leise); padding-right: 12px; }
.feldEingabe:focus-within, .feld select:focus { border-color: var(--gruen); outline: none; }

.raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.raster > *, .ergebnis > *, .karte > * { min-width: 0; }
.hinweis { margin: 0; background: var(--warn-hell); color: var(--warn); border-radius: 12px; padding: 10px 12px; font-size: 0.88rem; }

.dachKopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dachName { border: 0; font-size: 1.15rem; font-weight: 700; background: none; min-width: 0; flex: 1; padding: 4px 0; }

.steuerung { display: grid; gap: 10px; }
.stepper { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg); border-radius: 14px; padding: 8px 8px 8px 14px; }
.stepper > span { font-weight: 600; flex: 1; min-width: 0; }
.stepper > div { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.stepper button { width: 48px; height: 48px; border-radius: 12px; border: 0; background: var(--dunkel); color: #fff; font-size: 1.6rem; }
.stepper strong { min-width: 56px; text-align: center; font-size: 1.15rem; }

.ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ergebnis > div { background: var(--bg); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.ergebnis span { font-size: 0.8rem; color: var(--leise); }
.ergebnis strong { font-size: 1.1rem; }
.ergebnis .gross { background: var(--gruen-hell); }
.ergebnis .gross strong { font-size: 1.5rem; color: var(--gruen); }
.ergebnis .gross.falsch { background: var(--warn-hell); }
.ergebnis .gross.falsch strong { color: var(--warn); }

.warnung { margin: 0; background: var(--warn-hell); color: var(--warn); border-radius: 12px; padding: 10px 12px; font-weight: 600; }

.aufmass summary { font-weight: 700; padding: 6px 0; }
.aufmass[open] { display: grid; gap: 12px; }
.varianten { display: grid; gap: 6px; }
.varianten span { border-radius: 10px; padding: 8px 10px; background: var(--bg); }
.varianten .passt { background: var(--gruen-hell); color: var(--gruen); }
.varianten .passtNicht { color: var(--leise); }
.varianten .aktuell { font-weight: 700; outline: 2px solid currentColor; }

@media (max-width: 360px) {
  .raster, .ergebnis { grid-template-columns: 1fr; }
}

/* Lattung-Skizze */
.skizze { margin: 0; background: #fbfbfd; border: 1.5px solid var(--linie); border-radius: 14px; padding: 8px 6px 6px; }
.skizze svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.skizze figcaption { font-size: 0.78rem; color: var(--leise); padding: 2px 6px 0; }
.skSparren { fill: #d9b98c; stroke: #8a6a3d; stroke-width: 1; }
.skBruch { stroke: #8a6a3d; stroke-width: 2; fill: none; }
.skLatte { fill: #6b4f2a; }
.skLatteErste { fill: var(--rot); }
.skRinne { fill: none; stroke: #6e6e73; stroke-width: 2; }
.skFirst { stroke: var(--dunkel); stroke-width: 2; stroke-dasharray: 3 2; }
.skEnde { font-size: 13px; font-weight: 700; fill: var(--dunkel); }
.skKlein { font-size: 11px; fill: var(--leise); }
.skFelder { font-size: 12px; font-weight: 700; fill: var(--leise); }
.skHilfslinie { stroke: #b8bcc4; stroke-width: 0.8; stroke-dasharray: 2 2; }
.skMasslinie { stroke-width: 1.4; }
.skWert { font-size: 17px; font-weight: 800; }
.skLabel { font-size: 11.5px; font-weight: 600; fill: var(--leise); }
.skMassErste .skMasslinie { stroke: var(--rot); }
.skMassErste .skWert { fill: var(--rot); }
.skMassLatt .skMasslinie { stroke: var(--gruen); }
.skMassLatt .skWert { fill: var(--gruen); }
.skMassFalsch .skMasslinie { stroke: var(--warn); }
.skMassFalsch .skWert { fill: var(--warn); }
.skMassLaf .skMasslinie { stroke: #1f6fb2; }
.skMassLaf .skWert { fill: #1f6fb2; }

.skZiegel polygon, .skZiegel circle { fill: #b5482e; stroke: #6d2614; stroke-width: 0.8; }
.skFirstziegel { fill: none; stroke: #6d2614; stroke-width: 5; stroke-linecap: round; }
.skBruchFlaeche { fill: #fbfbfd; }
.skMassPuet .skMasslinie { stroke: #6e6e73; }
.skMassPuet .skWert { fill: #6e6e73; }

/* Dachskizze: größere Schrift (SVG wird aufs Handy verkleinert) */
.skizze .skWert { font-size: 21px; }
.skizze .skLabel { font-size: 14px; }
.skizze .skEnde { font-size: 15px; }
.skizze .skFelder { font-size: 14px; }

.skKonter { fill: #c79f6b; stroke: #8a6a3d; stroke-width: 0.8; }
.skZiegelFlaeche { fill: #b5482e; stroke: #6d2614; stroke-width: 0.8; }
.skRinneneisen { stroke: #6e6e73; stroke-width: 1.5; }
.skizze .skWert { font-size: 17px; }

.skizze .skWert { font-size: 22px; }
.skizze .skLabel { font-size: 13px; }
.skizze .skEnde { font-size: 16px; }

.skTitel { font-weight: 800; font-size: 0.85rem; color: var(--dunkel); padding: 2px 6px 0; }
.skDazwischen { text-align: center; color: var(--leise); font-weight: 700; font-size: 0.9rem; padding: 2px 0 6px; border-bottom: 1px dashed var(--linie); margin-bottom: 4px; }
.skizze svg + .skDazwischen { margin-top: -6px; }

.skizze svg image { image-rendering: auto; }
.skMarkeErste { fill: none; stroke: var(--rot); stroke-width: 3; }
.skGestrichelt { stroke: #8e8e93; stroke-dasharray: 5 4; }
.skizze .skWert { font-size: 21px; }
.skizze .skLabel { font-size: 13px; }
.skizze .skFelder { font-size: 16px; }

.skizze .skWertBreite { font-size: 46px; }
.skizze .skLabelBreite { font-size: 26px; }
.skMassLuecke .skWert, .skMassLuecke .skLabel { fill: #6e6e73; }
.skMassLuecke .skMasslinie { stroke: #8e8e93; stroke-dasharray: 6 5; }

.warnungStark { background: #fdecea; border: 2px solid #d93025; color: #7a1a10; font-weight: 700; }
.warnungStark p { margin: 0 0 8px; }
.warnKnoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.warnKnoepfe button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: #d93025; color: #fff; font-weight: 800; font-size: 1rem; }

.grDach { fill: #e9ecef; stroke: #3a3f45; stroke-width: 2; }
.grWand { fill: rgba(255,255,255,.55); stroke: #0b0f14; stroke-width: 1.6; stroke-dasharray: 6 4; }
.grFirst { stroke: #6e6e73; stroke-width: 1.5; fill: none; stroke-dasharray: 2 3; }
.grText { font-size: 11px; fill: #3a3f45; font-weight: 700; }
.grLeise { fill: #8e8e93; font-weight: 600; }
.grMass line, .grMass path { stroke: currentColor; stroke-width: 1.6; fill: none; }
.grMass .grHilf { stroke-width: .8; stroke-dasharray: 3 3; opacity: .7; }
.grMass text { fill: currentColor; }
.grWert { font-size: 19px; font-weight: 800; }
.grWert.grKlein { font-size: 15px; }
.grLabel { font-size: 11.5px; font-weight: 700; }
.grLaenge { color: #0b7a3e; }
.grDach { stroke-width: 1.6; }
.grTiefe { color: #1f5fbf; }
.grTraufe { color: #c25400; }
.grOrtgang { color: #d10a10; }

/* Eingabefelder in den Farben der Draufsicht */
.feld-laenge { --feldfarbe: #0b7a3e; }
.feld-tiefe { --feldfarbe: #1f5fbf; }
.feld-traufe { --feldfarbe: #c25400; }
.feld-ortgang { --feldfarbe: #d10a10; }
.feld[class*="feld-"] > span { color: var(--feldfarbe); font-weight: 800; }
.feld[class*="feld-"] .feldEingabe { border-color: var(--feldfarbe); box-shadow: inset 4px 0 0 var(--feldfarbe); }
.feld[class*="feld-"] .feldEingabe em { color: var(--feldfarbe); }

.grZoneTraufe { fill: rgba(194, 84, 0, .22); }
.grZoneOrtgang { fill: rgba(209, 10, 16, .18); }
.grDachRand { fill: none; stroke: #3a3f45; stroke-width: 2; }
.grMass line, .grMass path { stroke-width: 2; }

.feldErrechnet .feldEingabe { background: #eef1f4; border-style: dashed; }
.feldErrechnet strong { flex: 1; font-size: 1.15rem; padding: 0 2px; }

.skMassMessung .skWert, .skMassMessung .skLabel { fill: #6a1b9a; }
.skMassMessung .skMasslinie, .skMassMessung .skHilfslinie { stroke: #6a1b9a; }
.skFelderOk { fill: #0b7a3e; }
.skFelderFalsch { fill: #b42318; }
.aufmassSeite { display: grid; gap: 6px; margin-top: 8px; }
.aufmassEmpfehlung { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #e7f5ec; color: #0b5a2e; font-weight: 600; }

.aufmassSpalten { display: grid; gap: 8px; margin-top: 8px; grid-template-columns: 1fr 1fr; align-items: start; }
.aufmassSeite { margin-top: 0; }
.aufmassSeite .skTitel { font-size: 0.78rem; }

.brWand { fill: #9aa0a6; }
.brWandText { font-size: 17px; fill: #5f6368; font-weight: 700; }
.brWindfeder { fill: #c8a575; stroke: #7a5a2e; stroke-width: 1.5; }
.brUeber line, .brUeber path { stroke: currentColor; stroke-width: 2.4; fill: none; }
.brUeber .brHilf { stroke-width: 1.2; stroke-dasharray: 5 4; }
.brUeber text { fill: currentColor; }
.brUeberLatte { color: #c25400; }
.brUeberWind { color: #d10a10; }
.brUeberWert { font-size: 30px; font-weight: 800; }
.brUeberLabel { font-size: 19px; font-weight: 700; }

.ogWand { fill: #9aa0a6; }
.ogWandText { font-size: 14px; font-weight: 800; fill: #fff; }
.ogLatte { fill: #e8cfa4; stroke: #8a6a3a; stroke-width: 1.2; }
.ogBrett { fill: #c8a575; stroke: #7a5a2e; stroke-width: 1.4; }
.ogZiegel { fill: #5f6368; }
.ogKlein { font-size: 11px; font-weight: 700; fill: #5f6368; }
.ogBrettText { fill: #7a5a2e; }
.ogHilf { stroke: #5f6368; stroke-width: 1; stroke-dasharray: 4 3; }
.ogHilf.ogOrange { stroke: #c25400; }
.ogHilf.ogRot { stroke: #d10a10; }
.ogMass line, .ogMass path { stroke: currentColor; stroke-width: 2; fill: none; }
.ogMass text { fill: currentColor; }
.ogOrange { color: #c25400; }
.ogRot { color: #d10a10; }
.ogWert { font-size: 17px; font-weight: 800; }
.ogLabel { font-size: 12px; font-weight: 700; }

.skizzeSteuerung { display: grid; gap: 6px; margin-top: -4px; }

.ogZiegelNext { fill: #9aa0a6; }
.ogGesamt { display: block; margin: 2px 0 6px; padding: 8px 10px; border-radius: 10px; background: #fdf3e7; color: #7a3a00; font-size: 0.95rem; }
.ogGesamt b { font-size: 1.15rem; }

.ogGesamtBild { font-size: 24px; font-weight: 800; fill: #b25000; }
.ogGesamtBildLabel { font-size: 14px; font-weight: 700; fill: #7a3a00; }

.ogOrangeText { fill: #b25000; }

.breitenAufmass { display: grid; gap: 8px; margin-top: 8px; }
.breitenAufmass { grid-template-columns: 1fr 1fr; } .breitenAufmass > p { grid-column: 1 / -1; }
.breitenKarte { min-width: 0; font-size: 0.9rem; }
.breitenKarte { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #f1f3f5; border: 2px solid transparent; }
.breitenKarte.ok { background: #e7f5ec; border-color: #0b7a3e; }
.breitenKarte.falsch { background: #fdecea; border-color: #d93025; }
.breitenKarte .dreiZiegel { font-size: 1.05rem; color: #0b5a2e; }
.breitenKarte .warnText { color: #b42318; font-weight: 700; }
.dreiZiegelZeile { display: block; margin: 2px 0 4px; padding: 6px 10px; border-radius: 10px; background: #e7f5ec; color: #0b5a2e; font-size: 1rem; }

.aufmassSpalten .aufmassSeite { min-width: 0; }
.aufmassSpalten .varianten span { font-size: 0.85rem; padding: 6px 8px; }
.aufmassSpalten .skizze { padding: 4px 2px 2px; }
@media (max-width: 599px) { .aufmassSpalten .skTitel { font-size: 0.7rem; } }

.freischaltung { display: grid; gap: 10px; }
.freischaltung h2 { margin: 0; }
.freischaltung p { margin: 0; }
.geraetecode { font-size: 1.9rem; font-weight: 800; letter-spacing: 0.08em; text-align: center; padding: 12px; border-radius: 12px; background: #f1f3f5; user-select: all; }
.codeFeld { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9rem; padding: 10px; border-radius: 12px; border: 1.5px solid var(--linie); word-break: break-all; }
.hauptKnopf:disabled { opacity: 0.5; }
.lizenzFuss { font-size: 0.75rem; color: var(--leise); text-align: center; margin: 12px 0 0; }
.lizenzWarnung { margin: 8px 12px 0; padding: 10px 12px; border-radius: 12px; background: #fff4e5; color: #8a4b00; font-weight: 700; }

.kopf img.kopfLogo { width: auto; height: 44px; max-width: 46vw; }
.freischaltLogo { display: block; width: 100%; max-width: 320px; height: auto; margin: 4px auto 8px; }

/* Schnellaufmaß: auffällige Leiste statt kleiner Zeile */
.aufmass > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #6a1b9a; color: #fff; font-weight: 800; font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 8px rgba(106, 27, 154, 0.35); }
.aufmass > summary::-webkit-details-marker { display: none; }
.aufmass > summary::after { content: "▾"; margin-left: auto; font-size: 1.4rem; transition: transform 0.2s; }
.aufmass[open] > summary::after { transform: rotate(180deg); }
.aufmassSymbol { font-size: 1.6rem; line-height: 1; }
.aufmassTitel { display: grid; gap: 2px; }
.aufmassTitel small { font-size: 0.8rem; font-weight: 600; color: #e9d7f5; }
.aufmass[open] > summary .aufmassTitel small { visibility: hidden; height: 0; }
.aufmass { margin-top: 6px; }