/* Aufmaß – Millimeterpapier, Tintenblau, Zollstock-Gelb. Keine externen Schriften (DSGVO). */
:root {
  --papier: #edf1ef;
  --raster: #dce4e1;
  --weiss: #ffffff;
  --tinte: #1c3554;
  --tinte-hell: #2e5480;
  --text: #24292d;
  --leise: #5e6a70;
  --linie: #c5d0cd;
  --gelb: #f2c230;
  --rot: #a8362b;
  --ok: #2f6b45;
  --schrift: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --schmal: "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif-condensed, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 var(--schrift);
  color: var(--text);
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 24px 24px;
}
a { color: var(--tinte-hell); }
h1, h2, h3 { font-family: var(--schmal); color: var(--tinte); line-height: 1.15; margin: 0; }
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 0.95rem; font-weight: 600; color: var(--leise); margin-bottom: .25rem; }
.leise { color: var(--leise); }
.klein { font-size: .875rem; }
.umbruch { white-space: pre-wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }

/* ---------- Kopfleiste mit Zollstock ---------- */
.leiste { background: var(--tinte); color: #fff; position: sticky; top: 0; z-index: 10; }
.leiste-innen {
  max-width: 1100px; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.marke { font-family: var(--schmal); font-size: 1.5rem; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: .01em; }
#nav { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
#nav a, #nav .link {
  color: #d6e1ee; text-decoration: none; padding: .35rem .7rem; border-radius: 3px;
  font: inherit; background: none; border: 0; cursor: pointer;
}
#nav a:hover, #nav .link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
#nav a.aktiv { color: var(--tinte); background: var(--gelb); }

.zollstock {
  height: 14px;
  background-color: var(--gelb);
  background-image:
    repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 120px),
    repeating-linear-gradient(90deg, var(--text) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, var(--text) 0 1px, transparent 1px 12px);
  background-size: 100% 100%, 100% 70%, 100% 40%;
  background-repeat: no-repeat;
  border-bottom: 1px solid #b38d12;
}

/* ---------- Inhalt ---------- */
.inhalt { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.kopf:first-child { margin-top: 0; }
.kopf p { margin: .2rem 0 0; }
.nummer { font-family: var(--schmal); font-weight: 700; color: var(--tinte-hell); margin: 0; font-variant-numeric: tabular-nums; }
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.zurueck { display: inline-block; margin-bottom: .75rem; text-decoration: none; font-size: .95rem; }
.zurueck::before { content: "‹ "; }

.tafel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: 1.25rem; }
.schmal { max-width: 480px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 .95rem/1 var(--schrift); padding: .65rem 1rem; min-height: 42px;
  border: 1px solid var(--linie); border-radius: 3px; background: var(--weiss); color: var(--tinte);
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--tinte-hell); }
.btn.primaer { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.btn.primaer:hover { background: var(--tinte-hell); }
.btn.gefahr { color: var(--rot); }
.btn.gefahr:hover { border-color: var(--rot); }
.btn.klein { padding: .4rem .65rem; min-height: 34px; font-size: .85rem; }
.icon {
  width: 34px; height: 34px; border: 1px solid var(--linie); border-radius: 3px; background: var(--weiss);
  color: var(--tinte); cursor: pointer; font-size: .7rem;
}
.icon:disabled { opacity: .3; cursor: default; }

/* Formulare */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; color: var(--leise); }
input, textarea, select {
  font: 400 1rem/1.4 var(--schrift); color: var(--text); padding: .6rem .7rem;
  border: 1px solid var(--linie); border-radius: 3px; background: var(--weiss); width: 100%;
}
input:focus, textarea:focus { border-color: var(--tinte-hell); outline: none; box-shadow: 0 0 0 3px rgba(242, 194, 48, .55); }
textarea { resize: vertical; }
label.haken { flex-direction: row; align-items: center; gap: .6rem; color: var(--text); font-weight: 400; }
label.haken input { width: 20px; height: 20px; }
.suche { margin-bottom: 1rem; }
.fehler { color: var(--rot); margin: .5rem 0 0; min-height: 1em; }
.stapel { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.25rem; }
.stapel .btn { align-self: flex-start; }

/* Listen */
.liste { display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; }
.zeile {
  display: grid; grid-template-columns: 7.5rem 1fr auto auto; gap: 1rem; align-items: center;
  padding: .85rem 1rem; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none;
}
.zeile:last-child { border-bottom: 0; }
a.zeile:hover { background: #f7f9f8; }
.zeile .nr { font-family: var(--schmal); color: var(--tinte-hell); font-weight: 700; font-variant-numeric: tabular-nums; }
.zeile .haupt { display: flex; flex-direction: column; min-width: 0; }
.zaehler { font-size: .85rem; color: var(--leise); white-space: nowrap; }
.zeile.zwei { grid-template-columns: 1fr auto; }
.leer { padding: 1.5rem 1rem; margin: 0; color: var(--leise); text-align: center; }

.stammdaten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.stammdaten p { margin: 0; }
.breit { grid-column: 1 / -1; }

/* ---------- Aufmaß ---------- */
.kopfdaten { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr; gap: 1rem 1.5rem; margin: 0 0 1rem; }
.kopfdaten dt { font-size: .85rem; font-weight: 600; color: var(--leise); }
.kopfdaten dd { margin: .15rem 0 0; }

.blatt { padding: 0; overflow-x: auto; }
.positionen { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.positionen th {
  text-align: left; font: 600 .85rem var(--schrift); color: var(--leise);
  padding: .7rem 1rem; border-bottom: 2px solid var(--tinte);
}
.positionen td { padding: .85rem 1rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.positionen .nr { width: 3.5rem; font-family: var(--schmal); font-weight: 700; color: var(--tinte); }
.positionen .menge { text-align: right; font-weight: 700; white-space: nowrap; width: 8rem; }
.positionen .einheit { width: 4.5rem; }
.positionen .aktionen { white-space: nowrap; text-align: right; width: 1%; }
.positionen .aktionen > * { margin-left: .25rem; }
.positionen tr.wird-bearbeitet td { background: #fff7d9; }
.beschr { font-weight: 600; }
.rechenweg { list-style: none; margin: .35rem 0 0; padding: 0 0 0 .75rem; border-left: 2px solid var(--gelb); font-size: .9rem; }
.rechenweg li { display: flex; gap: .6rem; flex-wrap: wrap; }
.rechenweg .ausdruck { color: var(--text); }
.rechenweg .teil { color: var(--tinte-hell); }
.rechenweg .kommentar { color: var(--leise); font-style: italic; }

.summen { display: flex; justify-content: flex-end; gap: 1.5rem; flex-wrap: wrap; padding: 1rem; align-items: baseline; }
.summen:empty { display: none; }
.summen span { color: var(--leise); font-size: .9rem; }
.summen strong { font-family: var(--schmal); font-size: 1.25rem; color: var(--tinte); font-variant-numeric: tabular-nums; }

.eingabe { margin-top: 1.5rem; border-top: 4px solid var(--gelb); }
.eingabe form { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.eingabe-raster { display: grid; grid-template-columns: 1fr 8rem; gap: .8rem; }
.eingabe-raster .breit { grid-column: auto; }
.eingabe textarea { font-variant-numeric: tabular-nums; line-height: 1.7; }
.eingabe p.klein { margin: -.3rem 0 0; }
.vorschau:empty { display: none; }
.vorschau { border: 1px dashed var(--linie); border-radius: 3px; padding: .6rem .8rem; font-variant-numeric: tabular-nums; }
.v-zeile, .v-summe { display: flex; justify-content: space-between; gap: 1rem; }
.v-zeile.fehlerhaft { color: var(--rot); }
.v-summe { border-top: 1px solid var(--linie); margin-top: .35rem; padding-top: .35rem; font-weight: 700; color: var(--tinte); }
.knoepfe { display: flex; justify-content: flex-end; gap: .5rem; }

/* ---------- Dialog ---------- */
dialog { border: 0; border-radius: 4px; padding: 0; width: min(560px, calc(100vw - 2rem)); box-shadow: 0 20px 50px rgba(28, 53, 84, .35); }
dialog::backdrop { background: rgba(28, 53, 84, .45); }
.dlg { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; border-top: 6px solid var(--gelb); }
.dlg .raster { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* ---------- Meldung ---------- */
#toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 150%);
  background: var(--ok); color: #fff; padding: .7rem 1.2rem; border-radius: 3px; font-weight: 600;
  transition: transform .2s ease; z-index: 50; max-width: calc(100vw - 2rem);
}
#toast.sichtbar { transform: translate(-50%, 0); }
#toast.fehler { background: var(--rot); }

/* ---------- Login ---------- */
.login-seite { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.login-box { width: min(400px, 100%); background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; }
.login-form { padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.login-form h1 { font-size: 2.25rem; }
.login-form p { margin: 0; }


/* ---------- Heizung: Art-Auswahl, Merkmale, Räume, Materialauszug ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .25rem; }
.chip {
  font: 600 .875rem/1 var(--schrift); padding: .55rem .8rem; min-height: 38px;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--tinte); cursor: pointer;
}
.chip:hover { border-color: var(--tinte-hell); }
.chip[aria-checked="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; box-shadow: inset 0 -3px 0 var(--gelb); }

.merkmale {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem;
  padding: .9rem; background: #f6f8f7; border: 1px solid var(--linie); border-radius: 3px;
}
select {
  font: 400 1rem/1.4 var(--schrift); color: var(--text); padding: .6rem .7rem; width: 100%;
  border: 1px solid var(--linie); border-radius: 3px; background: var(--weiss);
}
select:focus { border-color: var(--tinte-hell); outline: none; box-shadow: 0 0 0 3px rgba(242, 194, 48, .55); }

.rechenweg .faktor { color: var(--tinte-hell); font-weight: 600; }

.material { margin-top: 1.5rem; }
.klein-kopf { margin: 0 0 .25rem; align-items: center; }
.auszug { width: 100%; border-collapse: collapse; margin-top: .75rem; font-variant-numeric: tabular-nums; }
.auszug td { padding: .45rem .5rem; border-bottom: 1px solid var(--linie); }
.auszug td.menge { text-align: right; font-weight: 700; width: 8rem; white-space: nowrap; }
.auszug td.einheit { width: 4rem; color: var(--leise); }
.auszug tr.artkopf th { text-align: left; font: 600 .85rem var(--schrift); color: var(--leise); padding: 1rem .5rem .3rem; }
.auszug tr.artkopf:first-child th { padding-top: 0; }

.anlage { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem 1.5rem; margin: 0 0 1rem; }
.anlage h2 { font-size: 1.1rem; }
.anlage dt { font-size: .85rem; font-weight: 600; color: var(--leise); }
.anlage dd { margin: .15rem 0 0; }
.anlage-leer { margin: -.25rem 0 1rem; font-size: .9rem; }

.v-zeile em { color: var(--leise); }
.v-tipp {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: .6rem; padding: .6rem .7rem; background: #fff7d9; border-radius: 3px;
}
dialog { max-height: calc(100vh - 2rem); overflow: auto; }

/* Materialerfassung */
.eingabe { margin: 0 0 1.5rem; }
.menge-zeile { display: grid; grid-template-columns: 1fr 7rem auto; gap: .8rem; align-items: end; }
.menge-zeile input[name=formel] { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.menge-zeile input { min-height: 48px; }
.menge-zeile .btn { min-height: 48px; padding: 0 1.4rem; }
#mengen-hinweis { margin: -.4rem 0 0; min-height: 0; }
#mengen-hinweis.ergebnis { color: var(--tinte-hell); font-weight: 600; }
.zuletzt { margin-top: 1rem; }
.zuletzt p { margin: 0 0 .1rem; }
.zuletzt .chips { margin-top: .3rem; }
.klein-chip { font-weight: 400; background: #f6f8f7; }

/* Katalog bearbeiten */
a.chip { text-decoration: none; display: inline-flex; align-items: center; }
a.chip[aria-current="page"] { background: var(--tinte); border-color: var(--tinte); color: #fff; box-shadow: inset 0 -3px 0 var(--gelb); }
.katalog { margin-top: .75rem; }
.katalog .stapel { margin-top: .75rem; }
.listen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.listen textarea { line-height: 1.6; }
.listen .klein { font-weight: 400; }
.schmal-feld { max-width: 12rem; }
.marker { font: 600 .8rem var(--schrift); background: var(--gelb); color: var(--tinte); padding: .25rem .55rem; border-radius: 999px; }
.marke small { font: 600 .9rem var(--schrift); color: var(--gelb); margin-left: .4rem; }

/* ---------- Handy ---------- */
@media (max-width: 720px) {
  h1 { font-size: 1.6rem; }
  .zeile { grid-template-columns: 1fr auto; gap: .2rem 1rem; }
  .zeile .nr { grid-column: 1 / -1; font-size: .85rem; }
  .stammdaten, .dlg .raster { grid-template-columns: 1fr; }
  .kopfdaten { grid-template-columns: 1fr 1fr; gap: .6rem 1rem; padding: 1rem; }
  .eingabe-raster { grid-template-columns: 1fr 6.5rem; }
  .positionen thead { display: none; }
  .positionen, .positionen tbody { display: block; }
  .positionen tr { display: grid; grid-template-columns: 2rem 1fr auto 2.4rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linie); }
  .positionen td { border: 0; padding: 0; }
  .positionen td.nr { width: auto; }
  .positionen td.menge { width: auto; padding-left: .6rem; }
  .positionen td.einheit { grid-column: 4; grid-row: 1; text-align: left; padding-left: .3rem; width: auto; color: var(--leise); }
  .positionen td.aktionen { grid-column: 1 / -1; text-align: left; margin-top: .6rem; }
  .positionen td.aktionen { display: flex; flex-wrap: wrap; gap: .35rem; white-space: normal; width: auto; }
  .positionen td.aktionen > * { margin: 0; }
  .positionen td.leer { grid-column: 1 / -1; }
  .merkmale { grid-template-columns: 1fr 1fr; }
  .menge-zeile { grid-template-columns: 1fr 5.5rem; }
  .menge-zeile .btn { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Druck / PDF ---------- */
@media print {
  @page { size: A4; margin: 15mm; }
  body { background: none; font-size: 11pt; }
  .no-print, #toast { display: none !important; }
  .inhalt { padding: 0; max-width: none; }
  .tafel { border: 0; padding: 0; }
  .kopf { margin: 0 0 .5rem; }
  .kopfdaten { border-bottom: 1px solid #999; padding-bottom: .5rem; }
  .positionen th { border-bottom: 1.5pt solid #000; }
  .positionen tr { break-inside: avoid; }
  .rechenweg { border-left-color: #999; }
  .material { break-before: page; }
  .auszug td { border-bottom-color: #bbb; }
  .anlage { border-bottom: 1px solid #999; padding-bottom: .5rem; }
}

/* Passwortfeld mit Anzeigen-Knopf */
.pw-feld { position: relative; display: block; }
.pw-feld input { padding-right: 6.5rem; }
.pw-zeigen {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--tinte-hell); font: 600 .85rem var(--schrift);
  padding: .5rem .7rem; cursor: pointer; border-radius: 3px;
}
.pw-zeigen:hover { background: var(--papier); }
.btn:disabled { opacity: .6; cursor: wait; }