/* Prüfassistent — Tokens aus dem Raumrechner (app/styles.css) übernommen,
   damit die drei Apps dieses Repos zusammen aussehen. Ergänzt um das, was
   eine App für den Feldeinsatz braucht: große Ziele, Statusfarben mit Symbol,
   und einen Tageslicht-Modus, der nur Tokens umschreibt.

   Schriftgrößen in rem, Bedienziele in rem: html.big skaliert damit die ganze
   Oberfläche, statt nur den Text zu vergrößern und Buttons zu sprengen. */
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* surfaces */
  --surface-app-1:#14181f;
  --surface-app-2:#0a0c10;
  --surface-card:#13161d;
  --surface-tile:#191c23;
  --surface-input:#0f1217;
  --surface-control:#23272f;

  /* borders */
  --border-subtle:rgba(255,255,255,.07);
  --border-medium:rgba(255,255,255,.1);
  --border-strong:rgba(255,255,255,.14);
  --border-dashed:rgba(255,255,255,.18);

  /* text */
  --text-primary:#f7f8fa;
  --text-secondary:#dfe2e8;
  --text-tertiary:#9aa0ac;
  /* Beide Grautöne halten auf Karte und Kachel 4,5:1 — sie tragen kleine
     Schrift (Quellen, Prüfstand, Hinweise), die man im Keller lesen können muss. */
  --text-muted:#9097a3;
  --text-muted-2:#838a96;
  --text-on-accent:#0c0e12;

  /* accent */
  --accent-amber:#E9B44C;
  --accent-emerald:#5BD6A0;
  --accent-azure:#5BA8F0;
  --accent:var(--accent-azure);

  /* status — mit Symbol und Text kombiniert, nie allein tragend */
  --status-ok:#5BD6A0;
  --status-mangel:#F0676C;
  --status-grenzwertig:#E9B44C;
  --status-na:#6f7682;

  /* fonts */
  --font-ui:'Hanken Grotesk', system-ui, sans-serif;
  --font-display:'Space Grotesk', system-ui, sans-serif;

  /* radii */
  --radius-control:10px;
  --radius-control-lg:12px;
  --radius-tile:15px;
  --radius-card:22px;
  --radius-pill:99px;

  --shadow-card:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 34px rgba(0,0,0,.4);

  /* Feldeinsatz: Handschuhe, Zeitdruck, schlechtes Licht */
  --tap-min:3.5rem;      /* 56px — jedes Bedienelement */
  --tap-primary:4rem;    /* 64px — Hauptaktionen */
  --tap-answer:4.75rem;  /* 76px — Antwortkarten im Wizard */
  --focus-ring:0 0 0 3px rgba(91,168,240,.5);

  color-scheme:dark;
}

html[data-world="efh"]{ --accent:var(--accent-azure) }
html[data-world="industrie"]{ --accent:var(--accent-amber) }
/* Akzent als Schriftfarbe: im Dunkeln dieselbe Farbe wie die Flächen, im
   Tageslicht-Modus ein dunklerer Ton — helles Bernstein auf Weiß hat 1,7:1. */
html{ --accent-text:var(--accent) }
html.hc[data-world="efh"]{ --accent-text:#1a5c9c }
html.hc[data-world="industrie"]{ --accent-text:#8a5a00 }

/* Tageslicht-Modus: dunkel ist im Keller richtig, in der Halle mit Oberlicht
   oder draußen an der Wallbox unlesbar. Nur Tokens, keine zweite Struktur. */
html.hc{
  --surface-app-1:#ffffff;
  --surface-app-2:#ffffff;
  --surface-card:#ffffff;
  --surface-tile:#f1f3f6;
  --surface-input:#ffffff;
  --surface-control:#e9ecf1;
  --border-subtle:rgba(0,0,0,.16);
  --border-medium:rgba(0,0,0,.28);
  --border-strong:rgba(0,0,0,.45);
  --border-dashed:rgba(0,0,0,.3);
  --text-primary:#0b0d11;
  --text-secondary:#1b1f26;
  --text-tertiary:#414852;
  --text-muted:#535b66;
  --text-muted-2:#666e79;
  --text-on-accent:#0b0d11;
  --status-ok:#0f7a4f;
  --status-mangel:#c0202a;
  --status-grenzwertig:#8a5a00;
  --status-na:#535b66;
  --shadow-card:none;
  color-scheme:light;
}
html.big{ font-size:19px }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{
  margin:0;
  background:var(--surface-app-2);
  font-family:var(--font-ui);
  font-size:1rem;
  color:var(--text-primary);
  -webkit-tap-highlight-color:transparent;
}
input,select,textarea,button{font-family:inherit}
button{-webkit-appearance:none;appearance:none;background:none;border:none;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ─── Shell ─── */
#app{
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:radial-gradient(1200px 700px at 50% -10%, var(--surface-app-1), var(--surface-app-2));
}
.header{
  position:sticky;top:0;z-index:5;
  background:var(--surface-app-2);
  border-bottom:1px solid var(--border-subtle);
  padding:calc(env(safe-area-inset-top,0px) + .625rem) 1rem .5rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:.625rem}
.brand{min-width:0}
.eyebrow{font:600 .688rem/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.brand-name{font:600 1.063rem/1.2 var(--font-display);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-tools{display:flex;gap:.375rem;flex:none}
.icon-btn{
  min-width:3rem;min-height:3rem;padding:0 .5rem;cursor:pointer;
  background:var(--surface-control);border:1px solid var(--border-medium);
  border-radius:var(--radius-control-lg);color:var(--text-secondary);
  font:600 .875rem/1 var(--font-ui);
}
.icon-btn.on{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}

/* Welt-Umschalter: ein Modus, keine versteckte Einstellung */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;background:var(--surface-input);
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:.25rem}
.seg-btn{
  min-height:var(--tap-min);border-radius:var(--radius-pill);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;
  color:var(--text-tertiary);transition:background .18s ease,color .18s ease;
}
.seg-btn .t{font:600 .938rem/1 var(--font-ui)}
/* Die Bereichsbeschreibung erklärt den Modus — sie darf dafür aber nicht drei
   Zeilen des Kopfbereichs fressen. Auf schmalen Geräten bleibt sie weg. */
.seg-btn .s{font:400 .688rem/1.25 var(--font-ui);opacity:.85;display:none;padding:0 .5rem;text-align:center}
.seg-btn.active{background:var(--accent);color:var(--text-on-accent)}

.context-strip{display:flex;align-items:center;gap:.5rem;min-width:0}
.context-strip .txt{flex:1;min-width:0;font:400 .813rem/1.3 var(--font-ui);color:var(--text-tertiary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.world-dot{width:.5rem;height:.5rem;border-radius:99px;background:var(--accent);flex:none}

.tabbar{display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;background:var(--surface-input);
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:.25rem}
/* Fünf Reiter auf 360 px: kleinere Schrift und kein Innenabstand, damit
   „Leitungen“ und „Assistent“ ohne Abschneiden passen. */
.tab-btn{min-height:3rem;min-width:0;padding:0;border-radius:var(--radius-pill);cursor:pointer;
  font:600 .75rem/1 var(--font-ui);letter-spacing:-.01em;color:var(--text-tertiary);transition:background .18s ease,color .18s ease}
.tab-btn.active{background:var(--accent);color:var(--text-on-accent)}
.tab-btn:disabled{opacity:.4;cursor:default}

.content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:1rem 1rem calc(env(safe-area-inset-bottom,0px) + 1.75rem);
  display:flex;flex-direction:column;gap:.875rem}
.view{display:flex;flex-direction:column;gap:.875rem}

/* Untere Aktionsleiste: einhändig heißt Primäraktion unten, nie oben rechts */
.bottom-bar{
  position:sticky;bottom:0;z-index:4;display:flex;gap:.5rem;
  background:var(--surface-app-2);
  border-top:1px solid var(--border-subtle);
  padding:.625rem 1rem calc(env(safe-area-inset-bottom,0px) + .75rem);
}
.bottom-bar .btn{flex:1}
.bottom-bar .btn.back{flex:0 0 32%}

/* ─── Bausteine ─── */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:1.125rem}
.card.hero{box-shadow:var(--shadow-card)}
.card-title{font:600 .688rem/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.card-body{display:flex;flex-direction:column;gap:.75rem}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding:0 .25rem}
.section-head .h{font:600 .938rem/1.2 var(--font-display);color:var(--text-primary)}
.section-head .hint{font:400 .688rem/1.3 var(--font-ui);color:var(--text-muted-2)}
.hint-text{font:400 .75rem/1.5 var(--font-ui);color:var(--text-muted)}
.empty-note{font:400 .813rem/1.5 var(--font-ui);color:var(--text-muted);padding:.25rem 0}

.btn{min-height:var(--tap-primary);padding:0 1rem;cursor:pointer;border-radius:var(--radius-pill);
  font:600 .938rem/1.2 var(--font-ui);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  touch-action:manipulation}
.btn-primary{background:var(--accent);color:var(--text-on-accent)}
.btn-ghost{background:var(--surface-control);border:1px solid var(--border-medium);color:var(--text-primary)}
.btn-outline{background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary)}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:default}
.btn:active:not(:disabled){transform:scale(.99)}
.mini-btn{min-height:3rem;padding:0 .75rem;cursor:pointer;background:var(--surface-tile);
  border:1px solid var(--border-medium);border-radius:var(--radius-pill);
  color:var(--text-tertiary);font:500 .75rem/1 var(--font-ui)}

.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:var(--radius-pill);
  font:600 .688rem/1.2 var(--font-ui);background:var(--surface-tile);color:var(--text-tertiary);
  border:1px solid var(--border-subtle);white-space:nowrap}
.badge.accent{color:var(--accent-text);border-color:color-mix(in srgb, var(--accent-text) 40%, transparent)}
.badge.ok{color:var(--status-ok);border-color:color-mix(in srgb, var(--status-ok) 40%, transparent)}
.badge.mangel{color:var(--status-mangel);border-color:color-mix(in srgb, var(--status-mangel) 45%, transparent)}
.badge.grenzwertig{color:var(--status-grenzwertig);border-color:color-mix(in srgb, var(--status-grenzwertig) 45%, transparent)}
.badge.na{color:var(--status-na)}

.chips{display:flex;gap:.375rem;flex-wrap:wrap}
.chip{min-height:3rem;padding:0 .875rem;cursor:pointer;border-radius:var(--radius-pill);
  background:var(--surface-control);border:1px solid var(--border-medium);
  color:var(--text-secondary);font:600 .813rem/1 var(--font-ui);
  display:inline-flex;align-items:center;gap:.375rem}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.chip .dot{width:.375rem;height:.375rem;border-radius:99px;background:var(--accent)}
.chip.active .dot{background:var(--text-on-accent)}

.field{display:flex;flex-direction:column;gap:.375rem}
.field-label{font:400 .75rem/1.2 var(--font-ui);color:var(--text-tertiary)}
.field-label.missing{color:var(--status-mangel);font-weight:600}
.field-group{font:600 .688rem/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);padding-top:.5rem;border-top:1px solid var(--border-subtle);margin-top:.25rem}
.card-body>.field-group:first-child{padding-top:0;border-top:none;margin-top:0}
.input{min-height:var(--tap-min);background:var(--surface-input);border:1px solid var(--border-medium);
  border-radius:var(--radius-control-lg);color:var(--text-primary);
  font:500 1rem/1.2 var(--font-ui);padding:0 .875rem;outline:none;width:100%}
.input:focus{border-color:var(--border-strong)}
textarea.input{padding:.75rem .875rem;min-height:4.5rem;font:400 .938rem/1.5 var(--font-ui);resize:vertical}

.progress{display:flex;flex-direction:column;gap:.375rem}
.progress .bar{height:.375rem;border-radius:99px;background:var(--surface-control);overflow:hidden}
.progress .fill{height:100%;background:var(--accent);border-radius:99px;transition:width .2s ease}
.progress .txt{font:500 .75rem/1 var(--font-ui);color:var(--text-tertiary)}

/* ─── Aufträge ─── */
.job-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:18px;
  padding:.875rem 1rem;display:flex;flex-direction:column;gap:.625rem}
.job-card.active{border-color:var(--border-strong)}
.job-open{display:flex;align-items:center;gap:.75rem;width:100%;cursor:pointer;text-align:left;
  min-height:var(--tap-min);padding:0}
.job-open .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.job-open .name{font:600 1rem/1.25 var(--font-ui);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-open .meta{font:400 .75rem/1.3 var(--font-ui);color:var(--text-tertiary)}
.job-open .chevron{font:400 1.125rem/1 sans-serif;color:var(--text-muted-2);flex:none}
.job-actions{display:flex;gap:.375rem;border-top:1px solid var(--border-subtle);padding-top:.625rem}
.job-actions .mini-btn{flex:1;min-width:2.75rem}
.norm-card{display:flex;align-items:center;gap:.75rem;width:100%;cursor:pointer;text-align:left;
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:18px;
  padding:.875rem 1rem;min-height:var(--tap-answer)}
.norm-card[disabled]{cursor:default;opacity:.55}
.norm-card .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.norm-card .norm{font:600 .938rem/1.2 var(--font-display);color:var(--text-primary)}
.norm-card .sub{font:400 .813rem/1.35 var(--font-ui);color:var(--text-tertiary);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ─── Wizard ─── */
.q-head{display:flex;flex-direction:column;gap:.5rem}
.q-title{font:600 1.375rem/1.25 var(--font-display);color:var(--text-primary)}
.q-help{font:400 .938rem/1.5 var(--font-ui);color:var(--text-tertiary)}
.q-hint{font:400 .813rem/1.45 var(--font-ui);color:var(--text-muted)}
.answers{display:flex;flex-direction:column;gap:.5rem}
.answer{display:flex;align-items:center;gap:.875rem;width:100%;text-align:left;cursor:pointer;
  min-height:var(--tap-answer);padding:.875rem 1rem;
  background:var(--surface-card);border:1px solid var(--border-medium);border-radius:var(--radius-tile);
  touch-action:manipulation;transition:border-color .15s ease,background .15s ease}
.answer:active{transform:scale(.985)}
.answer.checked{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface-card))}
.answer .ind{width:1.75rem;height:1.75rem;flex:none;border-radius:99px;border:2px solid var(--border-strong);
  display:grid;place-items:center;font:700 .875rem/1 var(--font-ui);color:var(--text-on-accent)}
.answer.multi .ind{border-radius:.5rem}
.answer.checked .ind{background:var(--accent);border-color:var(--accent)}
.answer .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.answer .t{font:600 1.063rem/1.3 var(--font-ui);color:var(--text-primary)}
.answer .s{font:400 .813rem/1.4 var(--font-ui);color:var(--text-tertiary)}

/* ─── Prüfplan ─── */
.phase-head{display:flex;align-items:baseline;gap:.5rem;padding:.5rem .25rem 0}
.phase-head .n{font:600 .688rem/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.phase-head .h{font:400 .688rem/1.3 var(--font-ui);color:var(--text-muted-2);flex:1;min-width:0}
.step-list{display:flex;flex-direction:column;gap:.5rem}
.step-card{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;cursor:pointer;
  min-height:4.5rem;padding:.75rem 1rem;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-tile);touch-action:manipulation}
.step-card.blocked{border-style:dashed;border-color:var(--border-dashed)}
.step-card .mark{width:2.25rem;height:2.25rem;flex:none;border-radius:99px;background:var(--surface-tile);
  display:grid;place-items:center;font:600 .813rem/1 var(--font-display);color:var(--text-tertiary)}
.step-card.done .mark{background:color-mix(in srgb, var(--status-ok) 20%, var(--surface-tile));color:var(--status-ok)}
.step-card.bad .mark{background:color-mix(in srgb, var(--status-mangel) 20%, var(--surface-tile));color:var(--status-mangel)}
.step-card .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.step-card .t{font:600 1rem/1.25 var(--font-ui);color:var(--text-primary)}
.step-card .s{font:400 .75rem/1.4 var(--font-ui);color:var(--text-tertiary)}
.step-card .s.blocked-why{color:var(--status-grenzwertig)}

.verdict{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem}
.verdict-btn{min-height:var(--tap-primary);border-radius:var(--radius-control-lg);cursor:pointer;
  background:var(--surface-control);border:1px solid var(--border-medium);color:var(--text-secondary);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;
  font:600 .813rem/1 var(--font-ui);touch-action:manipulation}
.verdict-btn .sym{font:700 1.125rem/1 var(--font-ui)}
.verdict-btn.on.ok{background:color-mix(in srgb, var(--status-ok) 22%, transparent);border-color:var(--status-ok);color:var(--status-ok)}
.verdict-btn.on.mangel{background:color-mix(in srgb, var(--status-mangel) 22%, transparent);border-color:var(--status-mangel);color:var(--status-mangel)}
.verdict-btn.on.na{background:var(--surface-tile);border-color:var(--border-strong);color:var(--text-secondary)}

.measure-row{display:flex;flex-direction:column;gap:.375rem;background:var(--surface-tile);
  border-radius:var(--radius-tile);padding:.75rem}
.measure-line{display:flex;align-items:center;gap:.625rem}
.measure-line .lbl{flex:0 0 5.5rem;font:600 .875rem/1.2 var(--font-ui);color:var(--text-secondary)}
.measure-line .input{flex:1;min-width:0;font:600 1.375rem/1 var(--font-display);text-align:right}
.measure-line .unit{flex:none;min-width:2.25rem;font:500 .875rem/1 var(--font-display);color:var(--text-tertiary)}
.measure-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-left:.125rem}
.limit-badge{font:500 .75rem/1.3 var(--font-ui);color:var(--text-tertiary)}
.limit-badge.ok{color:var(--status-ok)}
.limit-badge.mangel{color:var(--status-mangel)}
.limit-badge.grenzwertig{color:var(--status-grenzwertig)}
.punkt-row{gap:.5rem}
.punkt-kopf{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.punkt-nr{font:600 .688rem/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
/* „+" allein ist mit Handschuhen und in der Sonne zu wenig — mit Text. */
.punkt-add{font:600 .938rem/1 var(--font-ui)}
.quick-chip{min-height:var(--tap-min);min-width:var(--tap-min);padding:0 1rem;cursor:pointer;border-radius:var(--radius-pill);
  background:var(--surface-control);border:1px solid var(--border-medium);
  color:var(--text-secondary);font:600 .813rem/1 var(--font-display)}

.check-row{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;cursor:pointer;
  min-height:var(--tap-min);padding:.625rem .75rem;background:var(--surface-tile);
  border:1px solid transparent;border-radius:var(--radius-tile);touch-action:manipulation}
.check-row .box{width:2rem;height:2rem;flex:none;border-radius:.5rem;border:2px solid var(--border-strong);
  display:grid;place-items:center;font:700 1rem/1 var(--font-ui);color:var(--text-tertiary)}
.check-row.ok .box{background:var(--status-ok);border-color:var(--status-ok);color:var(--text-on-accent)}
.check-row.mangel .box{background:var(--status-mangel);border-color:var(--status-mangel);color:#fff}
.check-row.mangel{border-color:color-mix(in srgb, var(--status-mangel) 45%, transparent)}
/* „n. a." bleibt ruhig: beantwortet, aber ohne Aussage über die Anlage. */
.check-row.na .box{background:var(--surface-control);border-color:var(--border-strong);color:var(--text-tertiary)}
.check-row.na .t{color:var(--text-tertiary)}
.check-row .t{flex:1;min-width:0;font:400 .938rem/1.35 var(--font-ui);color:var(--text-secondary)}

.step-meta{display:flex;flex-direction:column;gap:.5rem}
.step-safety{display:flex;gap:.625rem;background:color-mix(in srgb, var(--status-grenzwertig) 12%, var(--surface-tile));
  border:1px solid color-mix(in srgb, var(--status-grenzwertig) 35%, transparent);
  border-radius:var(--radius-tile);padding:.75rem}
.step-safety .sym{flex:none;color:var(--status-grenzwertig);font:700 1rem/1.3 var(--font-ui)}
.step-safety .t{font:400 .875rem/1.45 var(--font-ui);color:var(--text-secondary)}
.proc-list{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.375rem}
.proc-list li{font:400 .938rem/1.45 var(--font-ui);color:var(--text-secondary)}

/* ─── Wiki ─── */
.wiki-card{display:flex;flex-direction:column;gap:.375rem;width:100%;text-align:left;cursor:pointer;
  min-height:var(--tap-min);padding:.875rem 1rem;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-tile)}
.wiki-card .t{font:600 1rem/1.3 var(--font-ui);color:var(--text-primary);display:flex;align-items:center;gap:.5rem}
.wiki-card .s{font:400 .813rem/1.45 var(--font-ui);color:var(--text-tertiary)}
.wiki-body{display:flex;flex-direction:column;gap:.875rem}
.w-p{font:400 1rem/1.6 var(--font-ui);color:var(--text-secondary);margin:0}
.w-steps,.w-bullets{margin:0;padding-left:1.375rem;display:flex;flex-direction:column;gap:.5rem}
.w-steps li,.w-bullets li{font:400 .938rem/1.5 var(--font-ui);color:var(--text-secondary)}
.w-warn,.w-note{display:flex;gap:.625rem;border-radius:var(--radius-tile);padding:.875rem}
.w-warn{background:color-mix(in srgb, var(--status-mangel) 12%, var(--surface-tile));
  border:1px solid color-mix(in srgb, var(--status-mangel) 35%, transparent)}
.w-note{background:var(--surface-tile);border:1px solid var(--border-subtle)}
.w-warn .sym{color:var(--status-mangel);font:700 1rem/1.4 var(--font-ui);flex:none}
.w-note .sym{color:var(--text-tertiary);font:700 1rem/1.4 var(--font-ui);flex:none}
.w-warn .t,.w-note .t{font:400 .938rem/1.5 var(--font-ui);color:var(--text-secondary)}
.w-kv{display:flex;flex-direction:column;gap:.625rem}
.w-kv .row{display:flex;flex-direction:column;gap:.25rem;background:var(--surface-tile);
  border-radius:var(--radius-tile);padding:.75rem}
.w-kv .k{font:600 .688rem/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.w-kv .v{font:400 .938rem/1.5 var(--font-ui);color:var(--text-secondary)}
.w-formula{background:var(--surface-tile);border-radius:var(--radius-tile);padding:.875rem;
  display:flex;flex-direction:column;gap:.375rem}
.w-formula .expr{font:600 1.125rem/1.3 var(--font-display);color:var(--accent-text)}
.w-formula .lbl{font:600 .688rem/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.w-formula .note{font:400 .875rem/1.5 var(--font-ui);color:var(--text-tertiary)}
.w-table{display:flex;flex-direction:column;gap:.5rem}
.w-table .cap{font:600 .875rem/1.3 var(--font-ui);color:var(--text-primary)}
.w-table .src{font:400 .688rem/1.4 var(--font-ui);color:var(--text-muted-2)}
/* Tabellen scrollen quer statt zu schrumpfen — Grenzwerte müssen lesbar bleiben */
.table-scroll{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-tile)}
table.grid{border-collapse:collapse;width:100%;min-width:22rem}
table.grid th,table.grid td{padding:.625rem .75rem;text-align:left;
  border-bottom:1px solid var(--border-subtle);white-space:nowrap}
table.grid th{font:600 .688rem/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);background:var(--surface-tile)}
table.grid td{font:400 .875rem/1.35 var(--font-ui);color:var(--text-secondary)}
table.grid td.v{font-family:var(--font-display);font-weight:600;color:var(--text-primary)}
table.grid tr:last-child td{border-bottom:none}
table.grid tr.marked td{background:color-mix(in srgb, var(--accent) 12%, transparent)}

.toast-host{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 5.5rem);z-index:60;max-width:min(calc(100% - 2rem),28rem)}
.toast{padding:.625rem 1rem;border-radius:var(--radius-pill);
  background:var(--surface-card);border:1px solid var(--border-medium);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  font:500 .813rem/1.45 var(--font-ui);color:var(--accent-text);text-align:center}
.toast-host[hidden]{display:none!important}

.footnote{font:400 .75rem/1.6 var(--font-ui);color:var(--text-muted-2);text-align:center;padding:.5rem 0 0}

/* ─── Leitungsberechnung ─── */
/* Einstellige Chips (cos φ „1“) sonst schmaler als ein Daumen. */
.card .chips .chip{min-width:3rem;justify-content:center}
.calc-num{background:var(--surface-tile);border-radius:var(--radius-tile);padding:.5rem .625rem}
.calc-num .lbl{flex:0 0 6.5rem}
.calc-inline{display:flex;flex-direction:column;gap:.5rem}
.input.calc-small{max-width:8rem;text-align:right;font:600 1.125rem/1 var(--font-display)}
.calc-va{min-height:var(--tap-min)}
.calc-va .va-code{flex:none;min-width:2.75rem;height:2.75rem;border-radius:var(--radius-control);display:flex;
  align-items:center;justify-content:center;background:var(--surface-control);
  font:700 1rem/1 var(--font-display);color:var(--text-primary)}
.calc-va.checked .va-code{background:var(--accent);color:var(--text-on-accent)}
.calc-head .q-title{word-break:break-word}
/* Die Ergebniszeile läuft beim Scrollen mit: jede Eingabe weiter unten
   ändert sie, und man soll die Wirkung sehen, ohne hochzuscrollen. */
.calc-head{position:sticky;top:-1rem;z-index:5;gap:.375rem;padding-top:.75rem;padding-bottom:.75rem;box-shadow:0 6px 18px rgba(0,0,0,.35)}
html.hc .calc-head{box-shadow:0 4px 12px rgba(0,0,0,.12)}
.calc-rung{min-height:var(--tap-min)}
.calc-rung .t{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.calc-rung.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.calc-tag{font:600 .688rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);
  border:1px solid color-mix(in srgb, var(--accent-text) 45%, transparent);border-radius:var(--radius-pill);padding:.2rem .45rem}
.calc-proof{display:flex;flex-direction:column;gap:.625rem}
.calc-proof-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.calc-proof-head .section-head{padding:0}
.calc-kv{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.calc-formula{display:flex;flex-direction:column;gap:.375rem;background:var(--surface-tile);border-radius:var(--radius-tile);
  padding:.75rem .875rem;font:500 .875rem/1.45 var(--font-display);color:var(--text-secondary);overflow-wrap:anywhere}
.calc-proof .src{font:400 .75rem/1.4 var(--font-ui);color:var(--text-muted-2)}

@media (min-width:420px){
  .seg-btn.active .s{display:block}
  .tab-btn{font-size:.813rem;letter-spacing:0}
}
@media (min-width:560px){
  #app{align-items:center}
  .header,.content,.bottom-bar{width:100%;max-width:34rem}
}

/* ─── Druckbogen (Protokoll als PDF über den Druckdialog) ─── */
#print-root{display:none}
@media print{
  html,body{background:#fff!important;height:auto!important;overflow:visible!important}
  body>#app,.toast-host{display:none!important}
  #print-root{display:block!important}
  @page{size:A4 portrait;margin:14mm}
  .p-doc{color:#1a1d22;font-family:'Hanken Grotesk',system-ui,sans-serif;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .p-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    border-bottom:2px solid #1a1d22;padding-bottom:10px;margin-bottom:14px}
  .p-title{font:600 20px/1.2 'Space Grotesk',sans-serif}
  .p-eyebrow{font:600 8px/1.2 sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8b91a0;margin-bottom:3px}
  .p-sub{font:400 11px/1.4 sans-serif;color:#5a6070;margin-top:3px}
  .p-date{font:500 11px/1.4 'Space Grotesk',sans-serif;color:#5a6070;text-align:right;flex:none}
  .p-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-bottom:14px}
  .p-field{border-bottom:1px solid #dcdfe6;padding-bottom:4px}
  .p-field .k{font:600 7.5px/1.2 sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8b91a0}
  .p-field .v{font:400 11px/1.4 sans-serif;color:#1a1d22;min-height:13px}
  .p-section{font:600 9px/1.2 sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8b91a0;margin:14px 0 6px}
  .p-row{display:grid;grid-template-columns:2.2fr 1.1fr 1.1fr .9fr;gap:6px;
    border-bottom:1px solid #eceef2;padding:5px 0;font:400 10px/1.35 sans-serif;align-items:baseline}
  .p-row>div:not(:first-child){text-align:right;font-family:'Space Grotesk',sans-serif}
  .p-row-head{border-bottom:1px solid #c8ccd4;font:600 7.5px/1.2 sans-serif;letter-spacing:.08em;
    text-transform:uppercase;color:#8b91a0;padding-bottom:5px}
  .p-row-head>div:not(:first-child){font-family:sans-serif}
  .p-note{font:400 10px/1.5 sans-serif;color:#3c424d;margin:3px 0 0;grid-column:1 / -1}
  /* Anhang: Bezeichnung links, Wert rechts — zwei Spalten statt vier. */
  .p-row-punkt{grid-template-columns:3fr 1fr}
  /* Erläuterung unter einer Zeile: linksbündig über die ganze Breite, nicht wie die Zahlenspalten. */
  .p-row>div.p-note{text-align:left;font-family:sans-serif}
  /* Besichtigen und Erproben: dreispaltiges Raster mit Kästchen, wie im
     Formular — nur dass das Kästchen schon ausgefüllt ist. */
  .p-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 10px;margin-bottom:6px}
  .p-check{display:flex;gap:5px;align-items:baseline;font:400 9px/1.35 sans-serif;
    break-inside:avoid;border-bottom:1px solid #f0f1f4;padding:1.5px 0}
  .p-check .b{flex:none;width:11px;height:11px;border:1px solid #6b7280;border-radius:2px;
    font:600 8px/11px sans-serif;text-align:center;color:#1a1d22}
  .p-check .t{flex:1;min-width:0}
  /* Messtabelle: die Spalten des Formulars, feste Breiten, damit auch
     siebzehn davon ins Hochformat passen. */
  .p-table-wrap{break-inside:avoid}
  table.p-mess{width:100%;border-collapse:collapse;table-layout:fixed}
  table.p-mess th,table.p-mess td{border:1px solid #c8ccd4;padding:2px 2px;
    font:400 7px/1.25 'Space Grotesk',sans-serif;text-align:center;
    overflow-wrap:anywhere;vertical-align:top}
  table.p-mess th{font:600 6px/1.2 sans-serif;letter-spacing:.02em;color:#3c424d;background:#f4f5f8}
  table.p-mess th.w,table.p-mess td.w{width:14%;text-align:left}
  table.p-mess tbody td{height:16px}
  thead{display:table-header-group}
  .p-inline{display:flex;flex-wrap:wrap;gap:4px 18px;font:400 10px/1.5 sans-serif;color:#1a1d22;margin:4px 0}
  .p-leitsatz{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    border:1px solid #1a1d22;border-radius:3px;padding:7px 9px;margin-top:10px;break-inside:avoid}
  .p-leitsatz .t{font:400 10px/1.45 sans-serif;color:#1a1d22;flex:1}
  .p-leitsatz .jn{display:flex;gap:12px;flex:none;font:600 10px/1.45 sans-serif}
  .p-legal{font:400 8px/1.6 sans-serif;color:#8b91a0;margin-top:14px;border-top:1px solid #dcdfe6;padding-top:8px}
  .p-sign{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
  .p-sign div{border-top:1px solid #1a1d22;padding-top:5px;font:400 9px/1.3 sans-serif;color:#5a6070}
}