/* =====================================================================
   style.css - Oberflaeche der Pruefungsformate-Werkstatt.
   Shell-Struktur und Klassennamen aus der Chunk-Werkstatt und der
   Stundenplanung uebernommen (ribbon · masthead · onboard-strip ·
   werkbank · tabs · panels), damit die Familie sich gleich anfuehlt.
   Farben kommen ausschliesslich aus tokens.css.

   Dunkelmodus wie im Einheitsplaner ueber [data-theme="dunkel"].
   ===================================================================== */

/* ── Grundlagen ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem 4rem; }
a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.hidden { display: none !important; }
.spacer-sm { height: .6rem; }
.dot { color: var(--accent); }

/* ── Ribbon ─────────────────────────────────────────────────────────── */
.ribbon {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
  font: 500 12px/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted);
}
.ribbon .vol { color: var(--ink-soft); }
.ribbon .nr { color: var(--accent); }
.ribbon-right { margin-left: auto; display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.ribbon a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.ribbon a:hover { color: var(--accent); border-bottom-color: var(--accent-line); }
.beta-pill {
  text-transform: uppercase; letter-spacing: .08em; padding: .1rem .45rem;
  border-radius: 4px; background: var(--warn-soft); color: var(--warn);
  font-weight: 700; font-size: 10.5px;
}
.beta-hinweis {
  margin: 0 0 .8rem; max-width: 60ch; padding: .5rem .75rem;
  border-left: 3px solid var(--warn); background: var(--warn-soft);
  color: var(--ink-soft); font-size: .9rem; line-height: 1.5;
}
.beta-hinweis strong { color: var(--warn); }
.coffee-pill {
  text-transform: none; letter-spacing: 0; padding: .18rem .6rem;
  border: 1px solid var(--rule); border-radius: 99px; background: var(--bg-card);
}

/* ── Masthead ───────────────────────────────────────────────────────── */
.masthead { padding: 2.6rem 0 1.6rem; border-bottom: 3px double var(--rule); }
.eyebrow {
  font: 600 11.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .5rem;
}
.masthead h1 { margin: 0 0 .5rem; font: 800 clamp(2.1rem, 5.4vw, 3.4rem)/1.05 var(--display); letter-spacing: -.01em; }
.masthead-sub { margin: 0; max-width: 60ch; color: var(--ink-soft); font: 400 1.05rem/1.55 var(--serif); }

/* ── Onboarding-Strip ───────────────────────────────────────────────── */
.onboard-strip {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 1rem 0 0; padding: .6rem .9rem;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  font-size: .92rem; color: var(--accent-ink);
}

/* ── Werkbank-Leiste ────────────────────────────────────────────────── */
.werkbank {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: 1rem 0 0; padding: .6rem .9rem;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  box-shadow: var(--paper-shadow-sm);
}
.werkbank-id { display: flex; align-items: baseline; gap: .55rem; min-width: 0; flex-wrap: wrap; }
.werkbank-unit { font-weight: 600; font-size: .98rem; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.werkbank-unit.is-empty { color: rgba(255,255,255,.55); font-weight: 400; font-style: italic; }
.werkbank-meta { font-size: .78rem; color: rgba(255,255,255,.62); }
.werkbank-actions { margin-left: auto; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.werkbank-count { font-size: .82rem; color: rgba(255,255,255,.75); }
.werkbank-count b { color: #fff; }
.werkbank-sep { width: 1px; height: 18px; background: rgba(255,255,255,.2); }
.save-status { font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; }
.save-status.saved { color: rgba(255,255,255,.8); }
.werkbank .btn {
  background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22);
  padding: .28rem .6rem; font-size: .82rem;
}
.werkbank .btn:hover { background: rgba(255,255,255,.2); }
.fortschritt { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: rgba(255,255,255,.75); }
.fortschritt-bar { width: 90px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.fortschritt-bar i { display: block; height: 100%; background: var(--accent-line); }

/* ── Tabs ───────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: .25rem; flex-wrap: wrap; align-items: center;
  margin: 1.1rem 0 0; padding-bottom: .5rem; border-bottom: 1px solid var(--rule);
}
.tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink-soft); font: 500 .92rem/1 var(--sans); cursor: pointer;
}
.tab:hover { background: var(--bg-deep); color: var(--ink); }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tab-nr { font: 600 .72rem/1 var(--mono); opacity: .65; }
.tab.active .tab-nr { opacity: .85; }
.tab-group {
  font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 .5rem 0 .8rem;
}

/* ── Panels & Modulkopf ─────────────────────────────────────────────── */
.panel { display: none; padding-top: 1.6rem; }
.panel.active { display: block; }
.module-head { margin-bottom: 1.3rem; }
.module-title-row { display: flex; align-items: center; gap: .5rem; }
.module-title { margin: 0; font: 700 1.7rem/1.2 var(--display); }
.module-lead { margin: .5rem 0 0; max-width: 68ch; color: var(--ink-soft); font: 400 1rem/1.6 var(--serif); }
.module-body { display: block; }

/* ── Karten & Layout ────────────────────────────────────────────────── */
.card {
  background: var(--bg-card); border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--paper-shadow-sm);
}
.card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.card-head h3 { margin: 0; font: 600 1.05rem/1.3 var(--sans); }
.card-sub { margin: 0; color: var(--ink-muted); font-size: .87rem; }
.stack > * + * { margin-top: 1.1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ── Formularfelder ─────────────────────────────────────────────────── */
.field { margin-bottom: .8rem; }
.field > label, .lbl {
  display: block; margin-bottom: .25rem;
  font: 600 .78rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.field-hint { margin: .25rem 0 0; font-size: .82rem; color: var(--ink-muted); }
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; padding: .45rem .6rem; font: 400 .95rem/1.5 var(--sans);
  color: var(--ink); background: var(--bg-card);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
textarea { min-height: 90px; resize: vertical; font-family: var(--sans); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.inline-fields { display: flex; gap: .6rem; flex-wrap: wrap; }
.inline-fields .field { flex: 1 1 150px; margin-bottom: 0; }
.check { display: flex; align-items: flex-start; gap: .5rem; padding: .3rem 0; font-size: .93rem; }
.check input { width: auto; margin-top: .22rem; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .65rem; border: 1px solid var(--rule); border-radius: 99px;
  background: var(--bg-card); font-size: .85rem; cursor: pointer;
}
.chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); font-weight: 600; }
.tag {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  background: var(--bg-deep); color: var(--ink-muted);
  font: 600 .72rem/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase;
}
.tag.akzent { background: var(--accent-soft); color: var(--accent-ink); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.err { background: var(--err-soft); color: var(--err); }
.inline-note { margin: .3rem 0 0; font-size: .86rem; color: var(--ink-muted); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .42rem .85rem; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--ink); font: 500 .9rem/1.3 var(--sans); cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--bg-card); border-color: var(--rule); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-danger { background: var(--err-soft); border-color: var(--err); color: var(--err); }
.btn-sm { padding: .25rem .6rem; font-size: .82rem; }
.btn-ghost { background: none; border-color: transparent; color: var(--ink-muted); }
.btn-ghost:hover { background: var(--bg-deep); }
.btn .ic { font-size: .95em; line-height: 1; }
.btn.ok-flash { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.btn-help {
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink);
  font: 700 12px/1 var(--sans); cursor: pointer; flex: none;
}
.btn-help:hover, .btn-help.active { background: var(--accent); color: #fff; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Roundtrip (Prompt · Ausführen · Einfügen) ─────────────────────── */
.step-label { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font: 600 .95rem/1.3 var(--sans); }
.step-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%; background: var(--accent); color: #fff;
  font: 700 .74rem/1 var(--sans); flex: none;
}
.step-hint {
  display: flex; align-items: flex-start; gap: .5rem; padding: .6rem .8rem;
  background: var(--bg-deep); border-radius: var(--radius-sm); font-size: .92rem; color: var(--ink-soft);
}
.prompt-block { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-inset); overflow: hidden; }
.prompt-block-head {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  background: var(--bg-deep); border-bottom: 1px solid var(--rule);
}
.prompt-block-head .lbl { margin: 0; }
.prompt-block-head > div { margin-left: auto; display: flex; gap: .4rem; }
.prompt-text {
  margin: 0; padding: .8rem; max-height: 340px; overflow: auto;
  font: 400 12.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--ink-soft);
}
.paste-zone { border: 1px dashed var(--rule); border-radius: var(--radius); padding: .8rem; background: var(--bg-card); }
.paste-zone textarea { min-height: 120px; font: 400 13px/1.5 var(--mono); }
.parse-feedback { display: none; margin-top: .7rem; padding: .55rem .75rem; border-radius: var(--radius-sm); font-size: .9rem; }
.parse-feedback.show { display: block; }
.parse-feedback.ok { background: var(--ok-soft); color: var(--ok); }
.parse-feedback.warn { background: var(--warn-soft); color: var(--warn); }
.parse-feedback.err { background: var(--err-soft); color: var(--err); }
.parse-feedback .raw {
  display: block; margin-top: .5rem; padding: .4rem; max-height: 130px; overflow: auto;
  background: rgba(0,0,0,.05); border-radius: 4px; font: 400 11.5px/1.4 var(--mono); white-space: pre-wrap;
}

/* ── Validator-Seitenleiste ─────────────────────────────────────────── */
.validator {
  position: sticky; top: 66px;
  background: var(--bg-card); border: 1px solid var(--rule-soft); border-radius: var(--radius);
  box-shadow: var(--paper-shadow-sm); overflow: hidden;
}
.validator-head {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem;
  background: var(--bg-deep); border-bottom: 1px solid var(--rule-soft);
}
.validator-head h3 { margin: 0; font: 600 .9rem/1.3 var(--sans); }
.validator-status { margin-left: auto; font-size: .8rem; color: var(--ink-muted); }
.validator-body { max-height: 62vh; overflow: auto; padding: .5rem; }
.validator-empty { padding: .8rem; color: var(--ink-muted); font-size: .88rem; }
.v-msg { display: flex; gap: .55rem; padding: .5rem; border-radius: var(--radius-sm); font-size: .87rem; line-height: 1.45; }
.v-msg + .v-msg { border-top: 1px solid var(--rule-soft); }
.v-ico {
  flex: none; width: 19px; height: 19px; margin-top: .1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 700 11px/1 var(--sans); color: #fff;
}
.v-ico.err { background: var(--err); } .v-ico.warn { background: var(--warn); }
.v-ico.ok { background: var(--ok); } .v-ico.info { background: var(--accent); }
.v-src { margin-top: .2rem; font-size: .76rem; color: var(--ink-muted); }
.v-quelle { background: none; border: none; padding: 0; margin-top: .2rem; font: inherit; font-size: .76rem; color: var(--accent-ink); text-decoration: underline; cursor: pointer; text-align: left; }

/* ── Presetkarten ───────────────────────────────────────────────────── */
.preset-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.preset {
  display: flex; flex-direction: column; gap: .4rem; text-align: left;
  padding: .9rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg-card); cursor: pointer; font: inherit; color: inherit;
}
.preset:hover { border-color: var(--accent-line); box-shadow: var(--paper-shadow-sm); }
.preset.aktiv { border-color: var(--accent); background: var(--accent-soft); }
.preset.gesperrt { opacity: .55; cursor: not-allowed; }
.preset.gesperrt:hover { border-color: var(--rule); box-shadow: none; }
.preset-titel { font: 700 1.02rem/1.25 var(--display); }
.preset-sub { font-size: .86rem; color: var(--ink-soft); }
.preset-meta { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .2rem; }

/* ── Bausteinliste / Werkbank-Editor ────────────────────────────────── */
.baustein {
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  background: var(--bg-card); margin-bottom: .7rem; overflow: hidden;
}
.baustein-head {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem;
  background: var(--bg-deep); border-bottom: 1px solid var(--rule-soft); cursor: pointer;
}
.baustein-head .name { font-weight: 600; font-size: .95rem; }
.baustein-head .rechts { margin-left: auto; display: flex; gap: .35rem; align-items: center; }
.baustein-body { padding: .8rem; }
.baustein.zu .baustein-body { display: none; }
.baustein.abgewaehlt { opacity: .55; }
.block-edit { border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); padding: .6rem; margin-bottom: .6rem; background: var(--bg-inset); }
.block-edit-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.block-edit-head .btn { margin-left: 0; }
.block-edit-head .rechts { margin-left: auto; display: flex; gap: .25rem; }
.zeile-liste { display: flex; flex-direction: column; gap: .3rem; }
.zeile { display: flex; gap: .35rem; align-items: center; }
.zeile input { flex: 1; }
.tabelle-edit { width: 100%; border-collapse: collapse; }
.tabelle-edit td, .tabelle-edit th { border: 1px solid var(--rule-soft); padding: 0; }
.tabelle-edit input { border: none; border-radius: 0; background: transparent; }

/* ── Raster-Editor ──────────────────────────────────────────────────── */
.raster-dim { border: 1px solid var(--rule-soft); border-radius: var(--radius); margin-bottom: .8rem; overflow: hidden; }
.raster-dim-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: var(--accent-soft); color: var(--accent-ink); }
.raster-dim-head .name { font-weight: 600; }
.raster-dim-head .rechts { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.raster-dim-head input[type="number"] { width: 68px; }
.raster-krit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) auto; gap: .4rem; padding: .4rem .7rem; align-items: start; }
.raster-krit + .raster-krit { border-top: 1px solid var(--rule-soft); }
@media (max-width: 700px) { .raster-krit { grid-template-columns: minmax(0,1fr); } }

/* Vorschautabelle Kriterium x Skala */
.skala-tab { width: 100%; border-collapse: collapse; font-size: .8rem; }
.skala-tab th, .skala-tab td { border: 1px solid var(--rule-soft); padding: .3rem .4rem; vertical-align: top; }
.skala-tab thead th { background: var(--accent); color: #fff; font-weight: 600; font-size: .72rem; }
.skala-tab .krit { text-align: left; width: 26%; }
.skala-tab .beschr { color: var(--ink-muted); font-size: .74rem; width: 24%; }
.skala-tab thead th.beschr { color: #fff; }
.tab-scroll { overflow-x: auto; }

/* ── Sperr-Hinweis Export ───────────────────────────────────────────── */
.sperre { border: 1px solid var(--err); background: var(--err-soft); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; }
.sperre h3 { margin: 0 0 .4rem; font: 600 1rem/1.3 var(--sans); color: var(--err); }
.sperre ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.sperre li { margin-bottom: .35rem; font-size: .9rem; }
.sperre .v-src { color: var(--err); opacity: .8; }
.frei { border: 1px solid var(--ok); background: var(--ok-soft); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; color: var(--ok); font-size: .92rem; }

/* ── Modal / Popover / Toast ────────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 1.2rem;
  background: rgba(19,18,16,.45);
}
.modal-back.show { display: flex; }
.modal {
  width: min(640px, 100%); max-height: 84vh; overflow: auto;
  background: var(--bg-card); border-radius: var(--radius); padding: 1.2rem 1.3rem;
  box-shadow: var(--paper-shadow);
}
.modal h3 { margin: 0 0 .7rem; font: 700 1.25rem/1.3 var(--display); }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.popover {
  position: absolute; z-index: 210; width: min(430px, calc(100vw - 2rem));
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--paper-shadow); font-size: .9rem;
}
.popover-head { padding: .5rem .8rem; border-bottom: 1px solid var(--rule-soft); font-weight: 600; background: var(--bg-deep); }
.popover-body { padding: .7rem .8rem; max-height: 60vh; overflow: auto; }
.popover-body p { margin: 0 0 .5rem; }
.popover-body p:last-child { margin-bottom: 0; }
.pop-privacy { color: var(--ink-muted); font-size: .85rem; }
.hilfe-tab { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .82rem; }
.hilfe-tab th, .hilfe-tab td { border: 1px solid var(--rule-soft); padding: .25rem .4rem; vertical-align: top; text-align: left; }
.hilfe-tab th { background: var(--accent-soft); color: var(--accent-ink); font-size: .74rem; }
.hilfe-tab td:last-child { color: var(--warn); }
.toast-wrap { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.toast {
  padding: .5rem .9rem; border-radius: 99px; background: var(--ink); color: #fff;
  font-size: .88rem; box-shadow: var(--paper-shadow-sm);
}
.toast.err { background: var(--err); }

/* Kompendium-Overlay (Muster KA-Planer) */
.komp-quote {
  margin: .6rem 0; padding: .5rem .8rem; border-left: 3px solid var(--accent);
  background: var(--accent-soft); font: 400 .92rem/1.5 var(--serif);
}
.komp-quote b { font-family: var(--sans); font-size: .85rem; }
.komp-src { margin-top: .7rem; font-size: .78rem; color: var(--ink-muted); }
.modal .quote { margin: .6rem 0; padding: .5rem .8rem; border-left: 3px solid var(--accent); background: var(--accent-soft); font: 400 .92rem/1.5 var(--serif); }
.modal .src { margin-top: .7rem; font-size: .78rem; color: var(--ink-muted); }

/* ── Anleitung ──────────────────────────────────────────────────────── */
.anleitung h3 { margin: 1.4rem 0 .4rem; font: 700 1.15rem/1.3 var(--display); }
.anleitung p, .anleitung li { max-width: 72ch; }
.anleitung ol, .anleitung ul { padding-left: 1.2rem; }
.anleitung li { margin-bottom: .35rem; }
.schritt-liste { counter-reset: schritt; list-style: none; padding: 0; }
.schritt-liste li { counter-increment: schritt; position: relative; padding-left: 2.1rem; margin-bottom: .8rem; }
.schritt-liste li::before {
  content: counter(schritt); position: absolute; left: 0; top: .05rem;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 .78rem/1 var(--sans);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: .82rem; color: var(--ink-muted);
}
.footer a { color: var(--ink-muted); }
.ampersand { font-family: var(--display); font-style: italic; }

/* ── Dunkelmodus (Muster Einheitsplaner) ────────────────────────────── */
[data-theme="dunkel"] {
  --bg: #17161a; --bg-deep: #201e25; --bg-card: #1e1c22; --bg-inset: #24222a;
  --ink: #ece9f2; --ink-soft: #c4bfd0; --ink-muted: #948da5; --ink-faint: #6f687e;
  --rule: #3a3545; --rule-soft: #2e2a38;
  --accent: #a58fd6; --accent-ink: #c9b8ec; --accent-soft: #2c2440; --accent-line: #574a77;
  --format: #a58fd6; --format-soft: #2c2440;
  --ok: #9dc47f; --ok-soft: #24301c; --warn: #d8a75c; --warn-soft: #35281440;
  --err: #e08585; --err-soft: #3a2020;
  --paper-shadow: 0 6px 20px rgba(0,0,0,.35); --paper-shadow-sm: 0 3px 10px rgba(0,0,0,.3);
}
[data-theme="dunkel"] .werkbank { background: #0f0e12; }
[data-theme="dunkel"] .tab.active, [data-theme="dunkel"] .btn-primary, [data-theme="dunkel"] .step-nr,
[data-theme="dunkel"] .skala-tab thead th { color: #17161a; }

/* ── Formatlandkarte & Varianten (Modul „Ideen") ────────────────────
   Die Karten leben von zwei Zeilen: was sichtbar wird und was schiefgeht.
   Deshalb bekommen beide eine eigene Marke, damit man sie beim Überfliegen
   auseinanderhält. */
.landkarte-karte {
  border: 1px solid var(--rule-soft); border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-sm); padding: .6rem .75rem; background: var(--bg-card);
}
.lk-titel { font: 600 .95rem/1.3 var(--sans); margin-bottom: .35rem; }
.lk-zeile { display: flex; gap: .45rem; align-items: flex-start; font-size: .85rem; line-height: 1.45; margin-top: .25rem; }
.lk-marke {
  flex: none; min-width: 5.6rem; padding: .05rem .4rem; border-radius: 4px;
  font: 600 .68rem/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; text-align: center;
}
.lk-marke.sichtbar { background: var(--ok-soft); color: var(--ok); }
.lk-marke.gefahr { background: var(--warn-soft); color: var(--warn); }
.lk-marke.absicherung { background: var(--accent-soft); color: var(--accent-ink); }

.variante {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .8rem .9rem; margin-bottom: .8rem; background: var(--bg-card);
}
.variante-kopf { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .4rem; }
.variante-titel { font: 700 1.05rem/1.25 var(--display); }
.variante-text { margin: 0 0 .5rem; font-size: .92rem; color: var(--ink-soft); }
.variante details { margin-top: .5rem; }
.variante summary::marker { color: var(--accent); }

/* Regler-Ansicht der acht Öffnungsdimensionen */
.regler { display: grid; grid-template-columns: 7rem repeat(3, 1fr); gap: .3rem .5rem; align-items: center; font-size: .84rem; }
.regler-label { font-weight: 600; }
.regler-stufe {
  padding: .3rem .5rem; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--bg-card); cursor: pointer; font: inherit; text-align: left; line-height: 1.35;
}
.regler-stufe.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
@media (max-width: 760px) {
  .regler { grid-template-columns: 1fr; }
  .regler-label { margin-top: .5rem; }
}

/* ── Druck (Spezifikation §9.2) ────────────────────────────────────
   Gedruckt wird NICHT die Oberflaeche, sondern die von js/export/druck.js
   gebaute Fassung in #druck: ein Dokument je Seite, ohne Eingabefelder. */
#druck { display: none; }

@media print {
  @page { size: A4; margin: 16mm 15mm; }
  body { background: #fff; color: #000; font: 400 10.5pt/1.45 var(--sans); }
  .shell, .toast-wrap, .modal-back, .popover { display: none !important; }
  #druck { display: block; }

  .d-seite { page-break-after: always; break-after: page; }
  .d-seite:last-child { page-break-after: auto; break-after: auto; }

  .d-kopf { border-bottom: 1.5pt solid #5b4191; padding-bottom: 2mm; margin-bottom: 5mm; }
  .d-schule { font-size: 8pt; color: #555; letter-spacing: .04em; }
  .d-kopf h1 { margin: 1mm 0 0; font: 700 19pt/1.15 var(--display); color: #5b4191; }
  .d-sub { margin: 1mm 0 0; font-size: 9pt; color: #555; }

  #druck h2 { margin: 5mm 0 1.5mm; font: 700 12pt/1.25 var(--sans); color: #5b4191; page-break-after: avoid; }
  #druck p { margin: 0 0 2.5mm; }
  #druck ul { margin: 0 0 3mm; padding-left: 6mm; }
  #druck li { margin-bottom: 1.2mm; }
  #druck .d-check { list-style: none; padding-left: 1mm; }
  #druck .d-check li::before { content: "\2610  "; font-size: 12pt; }
  #druck .d-check li { margin-bottom: 2.6mm; }
  #druck .d-beispiele { list-style: none; padding-left: 1mm; font-style: italic; }
  #druck .d-beispiele li::before { content: "\2192  "; color: #5b4191; font-style: normal; }
  .d-hinweis { border-left: 2pt solid #5b4191; padding-left: 3mm; font-style: italic; color: #444; }

  .d-feld { margin: 2mm 0 4mm; }
  .d-linie { border-bottom: .5pt solid #9a9a9a; height: 7mm; }

  .d-tab, .d-raster { width: 100%; border-collapse: collapse; margin: 1mm 0 4mm; page-break-inside: avoid; }
  .d-tab th, .d-tab td, .d-raster th, .d-raster td { border: .5pt solid #777; padding: 1.6mm 2mm; vertical-align: top; }
  .d-tab th, .d-raster th { background: #ece5f5; font-weight: 700; font-size: 8.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .d-tab td { height: 7mm; }
  .d-lab { font-weight: 700; white-space: nowrap; width: 1%; }
  .d-namenszeile td { height: 8mm; }
  .d-fuss .d-hoch td { height: 22mm; }

  .d-raster { font-size: 8pt; }
  .d-raster .d-krit { width: 24%; }
  .d-raster .d-beschr { width: 26%; color: #444; font-size: 7.5pt; }
  .d-raster .d-kreuz { width: 8.3%; height: 9mm; }
  .d-raster .d-dim td { background: #ece5f5; font-weight: 700; font-size: 9pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .d-raster .d-gesamt td:first-child { font-style: italic; color: #444; background: #f5f1e8; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .d-bezug { font-size: 8pt; color: #444; margin-bottom: 1.5mm; }

  .d-fussnote { margin-top: 8mm; font-size: 7.5pt; color: #777; }
}