/* Industrie — „Lohnt es sich, das zu bauen?"
   Die Frage ist das Formular: der Gegenstand steht als Eingabe in der
   Überschrift. Das eine auffällige Element ist der Preisstab: der Marktpreis
   als Bahn, darin von links Material, Jobkosten, Blaupause, Steuern — was
   übrig bleibt, ist Gewinn; was über die Marke ragt, Verlust.
   Farbe steht nur für die Teile der Rechnung, nirgends für Schmuck.
   Familie tonicdock: gleicher Grund, gleiche Systemschrift. Monospace nur
   für Zahlen. */
:root {
  color-scheme: dark light;

  --grund: #151A23;
  --flaeche: #1B212D;
  --tinte: #E4E7ED;
  --tinte-2: #A5ADBC;
  --strich: #2C3445;
  --feld: #10141B;

  --mat: #4B94E0;       /* Blaupausenblau: Material */
  --job: #D6A23E;       /* Jobkosten */
  --bp: #A486DC;        /* Blaupause, Erfindung */
  --geb: #8892A5;       /* Steuer und Gebühr */
  --gewinn: #5CCB95;
  --verlust: #F06A55;

  --sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
          Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", "DejaVu Sans Mono", monospace;
  --rand: clamp(1rem, 4.5vw, 4rem);
}
@media (prefers-color-scheme: light) {
  :root {
    --grund: #EEF0F4;
    --flaeche: #FFFFFF;
    --tinte: #161B26;
    --tinte-2: #4A5264;
    --strich: #CDD2DB;
    --feld: #FFFFFF;

    --mat: #1D63B8;
    --job: #9A6400;
    --bp: #6B48B0;
    --geb: #687286;
    --gewinn: #177A4B;
    --verlust: #BF3420;
  }
}

* { box-sizing: border-box; }
html { background: var(--grund); }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font: 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--rand); top: .75rem; z-index: 10; padding: .4rem .8rem; background: var(--tinte); color: var(--grund); }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .9375em; }

.kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.25rem var(--rand) 0;
  font-size: .875rem; color: var(--tinte-2);
}
.kopf .name { color: var(--tinte); font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; text-decoration: none; }
.kopf .wege { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1.25rem; }
.kopf .wege a { padding-block: .3rem; }

/* ---------- Die Frage ---------- */

.frage { padding: clamp(2rem, 6vh, 4rem) var(--rand) clamp(1.5rem, 4vh, 2.5rem); max-width: 76rem; }
h1 {
  margin: 0; font-size: clamp(2rem, 5.2vw, 3.75rem); line-height: 1.12;
  letter-spacing: -.035em; font-weight: 750; text-wrap: balance;
}
h1 label { cursor: text; }
.wahl { position: relative; display: inline-block; max-width: 100%; vertical-align: baseline; }
/* Das Feld muss als Feld zu erkennen sein (Ruby, 9.10.2026: „und wo gebe
   ich an, was ich bauen will?“ — ein blaues, unterstrichenes Wort las sich
   als Link oder Hervorhebung, nicht als Eingabe). Darum: Kasten, Lupe. */
#typ {
  font: inherit; letter-spacing: inherit; color: var(--mat);
  background: var(--flaeche); border: 2px solid var(--strich); border-radius: .18em;
  padding: 0 1.15em 0 .22em; margin: 0; min-width: 4ch; max-width: 100%;
  cursor: text;
}
#typ:hover { border-color: var(--tinte-2); }
#typ::placeholder { color: var(--tinte-2); opacity: .7; }
#typ:focus { outline: none; border-color: var(--mat); }
#typ:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; }
.lupe {
  position: absolute; right: .3em; top: 50%; width: .62em; height: .62em;
  transform: translateY(-50%); color: var(--tinte-2); pointer-events: none;
}
.mass { position: absolute; visibility: hidden; white-space: pre; font: inherit; letter-spacing: inherit; left: 0; top: 0; }

.vorschlag {
  position: absolute; z-index: 20; left: 0; top: calc(100% + .35rem);
  min-width: min(26rem, 90vw); max-height: 22rem; overflow-y: auto;
  margin: 0; padding: .3rem 0; list-style: none;
  background: var(--flaeche); border: 1px solid var(--strich); border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  font: 1rem/1.35 var(--sans); letter-spacing: 0; font-weight: 400;
}
.vorschlag li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .8rem; cursor: pointer; }
.vorschlag li small { color: var(--tinte-2); font-size: .8125rem; white-space: nowrap; }
.vorschlag li:hover, .vorschlag li[aria-selected="true"] { background: var(--strich); }

/* ---------- Die Antwort ---------- */

#antwort { margin-top: clamp(1.25rem, 3vh, 2rem); max-width: 60rem; }
.urteil { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.35; text-wrap: pretty; min-height: 1.35em; }
.urteil strong { font-weight: 750; }
.urteil[data-ton="gut"] strong { color: var(--gewinn); }
.urteil[data-ton="schlecht"] strong { color: var(--verlust); }
.urteil[data-ton="offen"] { color: var(--tinte-2); }

.stab { margin: 1.5rem 0 0; }
.stab-bahn { position: relative; height: 2.75rem; padding-top: 0; }
.stab-teile { display: flex; height: 100%; width: 100%; border-radius: 3px; overflow: visible; }
.teil { display: block; height: 100%; min-width: 2px; }
.teil + .teil { box-shadow: inset 2px 0 0 var(--grund); }
.t-mat { background: var(--mat); }
.t-job { background: var(--job); }
.t-bp { background: var(--bp); }
.t-geb { background: var(--geb); }
.t-gewinn { background: var(--gewinn); }
/* Verlust: eine rote Klammer unter dem Teil der Kosten, der über den
   Marktpreis hinausragt — die Kostenteile selbst bleiben lesbar. */
.stab-ueber {
  position: absolute; top: calc(100% + 4px); height: 4px;
  background: var(--verlust); border-radius: 0 2px 2px 0;
}
.stab-marke {
  position: absolute; top: -.6rem; bottom: -.6rem; width: 0;
  border-left: 2px solid var(--tinte); transform: translateX(-1px);
}
.stab[data-verlust="ja"] .stab-marke { border-color: var(--verlust); }
.stab[data-verlust="ja"] .stab-teile { background: none; }
.stab-marke::after {
  content: attr(data-label); position: absolute; top: calc(100% + .2rem); right: 0;
  white-space: nowrap; font-size: .8125rem; color: var(--tinte-2);
  font-variant-numeric: tabular-nums; padding-right: .35rem;
}
.stab[data-seite="rechts"] .stab-marke::after { left: 0; right: auto; padding: 0 0 0 .35rem; }
.stab[data-verlust="ja"] .stab-marke::after { color: var(--verlust); }

.legende {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none;
  font-size: .9375rem; color: var(--tinte-2);
}
.legende li { display: flex; align-items: baseline; gap: .45rem; }
.legende i { width: .75rem; height: .75rem; border-radius: 2px; align-self: center; }
.legende b { color: var(--tinte); font-weight: 600; font-variant-numeric: tabular-nums; }
.l-mat i { background: var(--mat); } .l-job i { background: var(--job); } .l-bp i { background: var(--bp); }
.l-geb i { background: var(--geb); } .l-gewinn i { background: var(--gewinn); }
.l-verlust i { background: var(--verlust); } .l-verlust b { color: var(--verlust); }

.eckdaten { margin: .75rem 0 0; color: var(--tinte-2); font-size: .9375rem; }

/* Womit gerechnet wurde, als Satz; jeder Teil führt zu seinem Feld. */
.annahmen { margin: .5rem 0 0; color: var(--tinte-2); font-size: .9375rem; max-width: 70ch; text-wrap: pretty; }
.annahme {
  font: inherit; color: var(--tinte); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--tinte-2); text-decoration-thickness: 1px; text-underline-offset: .22em;
  padding-block: .2rem;
}
.annahme:hover { text-decoration-color: var(--tinte); text-decoration-thickness: 2px; }
.annahmen .stueck { white-space: nowrap; }

.beispiele { margin: 1.5rem 0 0; font-size: .875rem; color: var(--tinte-2); }
.beispiele ul { display: inline; margin: 0; padding: 0; list-style: none; }
.beispiele li { display: inline; }
.beispiele li + li::before { content: ", "; }
.beispiele button {
  font: inherit; color: var(--tinte); background: none; border: 0; padding: .3rem 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--tinte-2); text-underline-offset: .2em;
}
.beispiele button:hover { text-decoration-color: var(--tinte); }

/* Schmale Leiste mit dem Urteil, solange die Antwort nicht im Bild ist */
.leiste {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  padding: .55rem var(--rand) calc(.55rem); padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--grund) 94%, transparent); border-bottom: 1px solid var(--strich);
  font-size: .9375rem; backdrop-filter: blur(6px);
}
.leiste a { text-decoration: none; display: block; }
#leiste-name { font-weight: 700; color: var(--mat); }
.leiste[data-ton="gut"] #leiste-urteil strong { color: var(--gewinn); }
.leiste[data-ton="schlecht"] #leiste-urteil strong { color: var(--verlust); }
.einstellungen .feld:focus-within > label { color: var(--tinte); }
.annahme[aria-expanded="true"] { text-decoration-color: var(--tinte); text-decoration-thickness: 2px; }

/* Bearbeiten an Ort und Stelle: die Felder eines Satzteils unter dem Satz */
.vor-ort {
  margin: .9rem 0 0; padding: 1rem 1.1rem .9rem; max-width: 30rem;
  background: var(--flaeche); border: 1px solid var(--strich); border-radius: 6px;
}
.vor-ort .feld:last-child { margin-bottom: .6rem; }
.vor-ort .wahl-gruppe { margin: 0 0 .6rem !important; border: 0; padding: 0; }
.vor-ort .haken.alpha { margin-bottom: 1.15rem; }
.fertig {
  font: inherit; font-size: .9375rem; color: var(--tinte); background: transparent; cursor: pointer;
  border: 1px solid var(--strich); border-radius: 4px; padding: .45rem 1rem; min-height: 2.5rem;
}
.fertig:hover { border-color: var(--tinte-2); }

/* ---------- Werte und Rechnung ---------- */

.werk {
  display: grid; grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  padding: clamp(1.5rem, 4vh, 2.5rem) var(--rand) clamp(2.5rem, 7vh, 4rem);
  border-top: 1px solid var(--strich);
  max-width: 90rem;
}
.werk[hidden] { display: none; }

.einstellungen fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; min-width: 0; }
.einstellungen > fieldset > legend {
  font-weight: 700; font-size: 1.0625rem; padding: 0; margin-bottom: .75rem;
}
.wahl-gruppe { margin: 0 0 .9rem !important; }
.wahl-gruppe > legend { font-size: .875rem; color: var(--tinte-2); padding: 0; margin-bottom: .35rem; }
.feld { margin-bottom: .8rem; position: relative; }
.feld > label { display: block; font-size: .875rem; color: var(--tinte-2); margin-bottom: .25rem; }
.feld input[type="text"], .feld select {
  width: 100%; font: inherit; color: var(--tinte); background: var(--feld);
  border: 1px solid var(--strich); border-radius: 4px; padding: .45rem .6rem; min-height: 2.5rem;
}
.feld input.zahl { font-family: var(--mono); }
.feld select:disabled, .feld input:disabled { opacity: .55; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; align-items: end; }
.haken { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.haken > label { margin: 0; color: var(--tinte); font-size: .9375rem; }
.haken input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--mat); flex: none; }
.hinweis { margin: .3rem 0 0; font-size: .8125rem; color: var(--tinte-2); line-height: 1.4; }
.hinweis:empty { display: none; }
.wahl-feld .vorschlag { top: 4.4rem; min-width: 100%; }

.rechnung { min-width: 0; max-width: 46rem; }
.bilanz { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.bilanz th, .bilanz td { padding: .4rem 0; border-bottom: 1px solid var(--strich); text-align: left; font-weight: 400; }
.bilanz td { text-align: right; white-space: nowrap; padding-left: 1rem; }
.bilanz th.unter { padding-left: 1.25rem; color: var(--tinte-2); font-size: .875rem; }
.bilanz tr:has(th.unter) td { color: var(--tinte-2); font-size: .875rem; }
.bilanz tr.erloes th, .bilanz tr.erloes td { font-weight: 600; }
.bilanz tr.info th, .bilanz tr.info td { color: var(--tinte-2); }
.bilanz tr.summe th, .bilanz tr.summe td { font-weight: 700; border-top: 2px solid var(--tinte); border-bottom: 0; padding-top: .6rem; font-size: 1.0625rem; }
.bilanz tr.summe.gut td { color: var(--gewinn); }
.bilanz tr.summe.schlecht td { color: var(--verlust); }

.zwischen { font-size: 1.0625rem; margin: 2.5rem 0 .25rem; }
.tabelle { overflow-x: auto; margin-top: .75rem; }
.materialien { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.materialien th, .materialien td { padding: .35rem .5rem; border-bottom: 1px solid var(--strich); text-align: left; vertical-align: middle; }
.materialien thead th { font-weight: 600; font-size: .8125rem; color: var(--tinte-2); }
.materialien th:first-child, .materialien td:first-child { padding-left: 0; }
.materialien .zahl, .materialien .rechts { text-align: right; white-space: nowrap; }
.materialien[data-bauen="nein"] .bauen, .materialien[data-bauen="nein"] .bauen-kopf { display: none; }
.materialien tbody th { font-weight: 400; }
.mname { display: block; }
.mgruppe { display: block; font-size: .8125rem; color: var(--tinte-2); }
.materialien .preis { width: 9.5rem; padding-block: .2rem; }
.materialien .preis input {
  width: 100%; text-align: right; color: var(--tinte); background: transparent;
  border: 1px solid transparent; border-bottom-color: var(--strich); border-radius: 3px; padding: .3rem .4rem; font-size: .9375rem;
}
.materialien .preis input::placeholder { color: var(--tinte); opacity: 1; }
.materialien .preis input:focus { border-color: var(--tinte-2); background: var(--feld); }
.materialien .preis input:focus::placeholder { color: var(--tinte-2); }
.materialien .preis input:disabled::placeholder { color: var(--tinte-2); font-family: var(--sans); }
.materialien tr.ohne .preis input::placeholder { color: var(--verlust); font-family: var(--sans); }
.materialien .bauen label { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--tinte-2); cursor: pointer; }
.materialien .bauen input { width: 1.05rem; height: 1.05rem; accent-color: var(--mat); }

.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.knoepfe button {
  font: inherit; font-size: .9375rem; color: var(--tinte); background: var(--flaeche); cursor: pointer;
  border: 1px solid var(--strich); border-radius: 4px; padding: .5rem 1rem; min-height: 2.5rem;
}
.knoepfe button:hover { border-color: var(--tinte-2); }

.fuss {
  padding: 1.5rem var(--rand) 2.5rem; border-top: 1px solid var(--strich);
  font-size: .8125rem; color: var(--tinte-2); max-width: 90rem;
}
.fuss p { margin: 0 0 .5rem; max-width: 72ch; }
.fuss .stand { color: var(--tinte); }

@media (max-width: 52rem) {
  .werk { grid-template-columns: minmax(0, 1fr); }
  .rechnung { order: -1; }
}
@media (max-width: 34rem) {
  .materialien thead { display: none; }
  .materialien tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .1rem .4rem; padding: .55rem 0; border-bottom: 1px solid var(--strich); }
  .materialien th, .materialien td { border: 0; padding: 0; }
  .materialien tbody th { grid-column: 1 / -1; }
  .materialien .menge { text-align: left; }
  .materialien .menge::after { content: " ×"; color: var(--tinte-2); }
  .materialien .preis { width: auto; }
  .materialien .preis input { text-align: left; padding-left: .2rem; max-width: 8rem; }
  .materialien .bauen { grid-column: 1 / -1; }
  .materialien .bauen:empty { display: none; }
  .stab-bahn { height: 2.25rem; }
  .leiste { font-size: .875rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .teil { transition: width .25s ease; }
  .stab-marke { transition: left .25s ease; }
}

.leer-hinweis { padding: .55rem .8rem; color: var(--tinte-2); font-size: .9375rem; }
.feld input[aria-invalid="true"] { border-color: var(--verlust); }
.fehler { margin: .3rem 0 0; font-size: .8125rem; color: var(--verlust); }
.fehler:empty { display: none; }
.vor-ort .paar { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); align-items: start; }
.vor-ort .rigname { margin: -.4rem 0 .9rem; }
.vor-ort .rigname + .rigname { margin-top: -.6rem; }