/* =====================================================================
   KUKANILEA PDF-Werkstatt -- Gestaltung (Startseite und alle Werkzeuge)

   Ein Stylesheet fuer alle Seiten: eine Wahrheit fuer Farben, Abstaende und
   Bauteile. Hell ist die Vorgabe; dunkel per Systemeinstellung oder Schalter
   (data-thema am <html>, gesetzt von thema.js VOR dem ersten Bild).

   Farben: Marke Petrol (#1B4965) und Gold, Bereichsfarben aus der Familie
   "pdf-dokumente" (website/webtools-bereichsfarben.json) -- dieselben Toene
   wie im Webtools-Katalog, damit ein Werkzeug dort und hier gleich aussieht.
   ===================================================================== */

:root {
  --grund: #f4f6f9;
  --grund-2: #eef2f6;
  --flaeche: #ffffff;
  --flaeche-2: #f8fafc;
  --tinte: #0f172a;
  --tinte-2: #334155;
  --tinte-3: #5b6678;
  --linie: #e3e8ef;
  --linie-2: #cbd5e1;
  --marke: #1b4965;
  --marke-2: #123449;
  --marke-hell: #e6eef3;
  --marke-tint: #f1f6f9;
  --gold: #e8b04a;
  --gold-tief: #8a5a0b;
  --gut: #17603f;
  --gut-hell: #e5f3eb;
  --warn: #8a4a12;
  --warn-hell: #fdf0dc;
  --fehler: #a32a2a;
  --fehler-hell: #fbe9e9;
  --fokus: #1a6fd1;
  --schatten-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --schatten-2: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -14px rgba(15, 23, 42, .22);
  --schatten-3: 0 24px 60px -24px rgba(15, 23, 42, .35);
  --r-s: 8px;
  --r: 14px;
  --r-l: 22px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --breite: 1200px;
  --kopf-h: 60px;

  /* Bereichsfarben [hell, dunkel] */
  --b-organisieren-1: #4a7fb0; --b-organisieren-2: #2d5c8a;
  --b-optimieren-1: #3f9191;  --b-optimieren-2: #246d6d;
  --b-umwandeln-1: #8a6fae;   --b-umwandeln-2: #644a8a;
  --b-bearbeiten-1: #c9803a;  --b-bearbeiten-2: #a15c17;
  --b-sicherheit-1: #d4575c;  --b-sicherheit-2: #ab3239;
  --b-formulare-1: #c2618c;   --b-formulare-2: #9b3d67;
  --b-pruefen-1: #3d7192;     --b-pruefen-2: #1b4965;
  color-scheme: light;
}

:root[data-thema="dunkel"] {
  --grund: #0b1620;
  --grund-2: #0f1d29;
  --flaeche: #132331;
  --flaeche-2: #172a3a;
  --tinte: #eaf1f6;
  --tinte-2: #c3d0db;
  --tinte-3: #93a5b5;
  --linie: #233748;
  --linie-2: #33495c;
  --marke: #7fc3d9;
  --marke-2: #a8d8e7;
  --marke-hell: #173445;
  --marke-tint: #12293a;
  --gold: #f0c26a;
  --gold-tief: #f0c26a;
  --gut: #7ed3a4;
  --gut-hell: #133528;
  --warn: #f3c58a;
  --warn-hell: #3a2a14;
  --fehler: #ff9b9b;
  --fehler-hell: #3d1b1e;
  --fokus: #79b8ff;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .4);
  --schatten-2: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px -16px rgba(0, 0, 0, .7);
  --schatten-3: 0 24px 60px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html body [hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); }
body {
  overflow-x: clip;
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; }
a { color: var(--marke); text-underline-offset: 2px; }
a:hover { color: var(--marke-2); }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.012em; color: var(--tinte); }
h1 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.35rem); letter-spacing: -.028em; font-weight: 780; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.05rem); font-weight: 740; }
h3 { font-size: 1.08rem; font-weight: 680; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.huelle { width: min(100% - 32px, var(--breite)); margin-inline: auto; }

/* Skip-Link: nimmt keinen Platz, erscheint nur mit Tastaturfokus (Workspace-Vertrag). */
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--marke); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 650; text-decoration: none;
}
.skip:focus { left: 12px; color: #fff; }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 12px;
  border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--tinte);
  font-weight: 640; font-size: .97rem; text-decoration: none; line-height: 1.2;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.knopf:hover { border-color: var(--tinte-3); color: var(--tinte); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf-haupt { background: var(--marke); border-color: var(--marke); color: #fff; box-shadow: 0 8px 20px -10px rgba(27, 73, 101, .7); }
.knopf-haupt:hover { background: var(--marke-2); border-color: var(--marke-2); color: #fff; }
:root[data-thema="dunkel"] .knopf-haupt { color: #06202c; }
:root[data-thema="dunkel"] .knopf-haupt:hover { color: #06202c; }
.knopf-gross { min-height: 54px; padding: 14px 26px; font-size: 1.06rem; border-radius: 14px; }
.knopf-breit { width: 100%; }
.knopf-still { background: transparent; border-color: transparent; color: var(--tinte-2); }
.knopf-still:hover { background: var(--grund-2); border-color: transparent; }
.knopf-gefahr { color: var(--fehler); }
.knopf-klein { min-height: 36px; padding: 6px 12px; font-size: .9rem; border-radius: 10px; }
.knopf-icon { min-width: 40px; min-height: 40px; padding: 0; width: 40px; border-radius: 10px; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf-zeile { display: flex; align-items: center; gap: 14px; min-height: var(--kopf-h); flex-wrap: wrap; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); flex: none; }
.marke:hover { color: var(--tinte); }
.marke-kachel { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, #de7277, #cf333b); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.marke-kachel svg { width: 24px; height: 24px; }
.marke-text { display: grid; line-height: 1.05; }
.marke-text b { font-size: .98rem; letter-spacing: .01em; font-weight: 780; }
.marke-text span { font-size: .72rem; color: var(--tinte-3); letter-spacing: .08em; text-transform: uppercase; font-weight: 650; }
.kopf-pfad { display: flex; align-items: center; gap: 8px; color: var(--tinte-3); font-size: .92rem; min-width: 0; }
.kopf-pfad::before { content: ""; width: 1px; height: 22px; background: var(--linie-2); margin-right: 4px; }
.kopf-pfad span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinte); font-weight: 600; }
.kopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.suchknopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--linie-2); border-radius: 11px; background: var(--flaeche-2); color: var(--tinte-3);
  min-width: 240px; font-size: .93rem;
}
.suchknopf:hover { border-color: var(--tinte-3); }
.suchknopf svg { width: 18px; height: 18px; }
.suchknopf kbd { margin-left: auto; font-family: var(--mono); font-size: .75rem; border: 1px solid var(--linie-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--tinte-3); background: var(--flaeche); }
.kopf-link { color: var(--tinte-2); text-decoration: none; font-weight: 600; font-size: .93rem; padding: 8px 10px; border-radius: 10px; white-space: nowrap; }
.kopf-link:hover { background: var(--grund-2); color: var(--tinte); }
@media (max-width: 860px) {
  .suchknopf { min-width: 0; width: 40px; padding: 0; justify-content: center; }
  .suchknopf .suchtext, .suchknopf kbd { display: none; }
  .kopf-link.breit { display: none; }
  .kopf-pfad::before { display: none; }
}
@media (max-width: 560px) { .kopf-pfad { display: none; } .marke-text span { display: none; } }

/* ---------- Kleine Bauteile ---------- */
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; color: var(--marke); margin-bottom: 14px; }
.kicker .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.24rem); color: var(--tinte-2); max-width: 46rem; }
.zusagen { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--tinte-2); font-size: .93rem; font-weight: 560; }
.zusagen li { display: inline-flex; align-items: center; gap: 7px; }
.zusagen svg { width: 18px; height: 18px; color: var(--gut); flex: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--grund-2); color: var(--tinte-2); font-size: .8rem; font-weight: 650; }
.chip-neu { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold-tief); }

/* ---------- Ablage (Drop-Zone) ---------- */
.ablage {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center;
  min-height: 300px; padding: 36px 24px; border-radius: var(--r-l);
  border: 2px dashed color-mix(in srgb, var(--marke) 45%, var(--linie-2));
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--marke) 9%, transparent), transparent 70%),
    var(--flaeche);
  box-shadow: var(--schatten-2);
  transition: border-color .15s, background .15s, transform .15s;
}
.ablage.ueber { border-color: var(--marke); border-style: solid; transform: scale(1.01); background: color-mix(in srgb, var(--marke) 10%, var(--flaeche)); }
.ablage-symbol { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #de7277, #cf333b); box-shadow: 0 14px 28px -14px rgba(207, 51, 59, .8); }
.ablage-symbol svg { width: 34px; height: 34px; }
.ablage-titel { font-size: 1.28rem; font-weight: 740; margin: 4px 0 0; }
.ablage-unter { color: var(--tinte-3); font-size: .92rem; margin: 0; max-width: 34rem; }
.ablage input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ablage-zeile { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ablage.laed { cursor: progress; }
.ablage.laed .ablage-symbol { animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { transform: scale(.92); opacity: .75; } }
.ablage-meldung { margin: 6px 0 0; font-size: .93rem; color: var(--fehler); font-weight: 600; max-width: 36rem; }
.ablage-meldung a { color: inherit; }
.ablage-leise { font-size: .85rem; color: var(--tinte-3); }
.ablage-leise svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--gut); }

/* ---------- Startseite: Held ---------- */
.held { position: relative; padding: 56px 0 40px; overflow: hidden; }
.held::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 640px; z-index: -1;
  background:
    radial-gradient(40% 50% at 18% 30%, color-mix(in srgb, #de7277 22%, transparent), transparent 70%),
    radial-gradient(45% 55% at 82% 20%, color-mix(in srgb, var(--marke) 20%, transparent), transparent 70%),
    radial-gradient(35% 40% at 60% 70%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%);
  filter: blur(8px);
}
.held-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.held h1 { margin-bottom: 18px; }
.held h1 em { font-style: normal; background: linear-gradient(100deg, #cf333b, #c9803a 55%, var(--marke)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.held-zahlen { display: flex; gap: 28px; margin-top: 26px; flex-wrap: wrap; }
.held-zahlen div { display: grid; }
.held-zahlen b { font-size: 1.6rem; font-weight: 780; letter-spacing: -.02em; }
.held-zahlen span { color: var(--tinte-3); font-size: .86rem; }
@media (max-width: 980px) { .held-raster { grid-template-columns: minmax(0, 1fr); gap: 28px; } .held { padding-top: 36px; } }

/* Analyse nach dem Ablegen auf der Startseite */
.analyse { margin-top: 18px; display: grid; gap: 14px; text-align: left; width: 100%; }
.analyse-kopf { display: flex; gap: 12px; align-items: center; }
.analyse-kopf canvas { width: 54px; height: auto; border-radius: 6px; box-shadow: var(--schatten-1); border: 1px solid var(--linie); }
.analyse-kopf b { display: block; word-break: break-all; }
.analyse-kopf span { color: var(--tinte-3); font-size: .88rem; }
.analyse-vorschlaege { display: grid; gap: 8px; }
.analyse-vorschlag { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche-2); text-align: left; width: 100%; }
.analyse-vorschlag:hover { border-color: var(--marke); background: var(--marke-tint); }
.analyse-vorschlag .wk-kachel { width: 36px; height: 36px; border-radius: 10px; }
.analyse-vorschlag .wk-kachel svg { width: 22px; height: 22px; }
.analyse-vorschlag b { display: block; font-size: .96rem; }
.analyse-vorschlag span { color: var(--tinte-3); font-size: .85rem; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 56px 0; }
.abschnitt-kopf { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.abschnitt-kopf p { color: var(--tinte-3); margin: 0; max-width: 40rem; }
.abschnitt-grau { background: var(--grund-2); border-block: 1px solid var(--linie); }

/* ---------- Werkzeugkacheln ---------- */
.wk-kachel { --k1: var(--b-organisieren-1); --k2: var(--b-organisieren-2); width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--k1), var(--k2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px -8px var(--k2); }
.wk-kachel svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* Die Kachel ist ein <span> in Karten, deren Textspans eigene Farben und
   display-Werte tragen (.wk span, .verwandt span, .analyse-vorschlag span).
   Ohne Vorrang erbte die Marke deren Grau und Blocklage -- gemessen
   2026-10-02 auf der neuen Startseite: graue, verrutschte Marken. */
span.wk-kachel { display: grid !important; place-items: center; color: #fff !important; }
.wk-kachel svg .duo { fill: rgba(255, 255, 255, .2); stroke: none; }
.wk-kachel svg .voll { fill: currentColor; stroke: none; }
[data-bereich="organisieren"] { --k1: var(--b-organisieren-1); --k2: var(--b-organisieren-2); }
[data-bereich="optimieren"] { --k1: var(--b-optimieren-1); --k2: var(--b-optimieren-2); }
[data-bereich="umwandeln"] { --k1: var(--b-umwandeln-1); --k2: var(--b-umwandeln-2); }
[data-bereich="bearbeiten"] { --k1: var(--b-bearbeiten-1); --k2: var(--b-bearbeiten-2); }
[data-bereich="sicherheit"] { --k1: var(--b-sicherheit-1); --k2: var(--b-sicherheit-2); }
[data-bereich="formulare"] { --k1: var(--b-formulare-1); --k2: var(--b-formulare-2); }
[data-bereich="pruefen"] { --k1: var(--b-pruefen-1); --k2: var(--b-pruefen-2); }

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filter button { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--tinte-2); font-weight: 630; font-size: .92rem; }
.filter button[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--flaeche); }
.filter-suche { position: relative; flex: 1 1 260px; max-width: 360px; margin-left: auto; }
.filter-suche input { width: 100%; min-height: 40px; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--flaeche); padding: 8px 14px 8px 38px; }
.filter-suche svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--tinte-3); }

.wk-gruppe { margin-bottom: 34px; }
.wk-gruppe-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.wk-gruppe-kopf h3 { font-size: 1.12rem; margin: 0; }
.wk-gruppe-kopf p { margin: 0; color: var(--tinte-3); font-size: .9rem; }
.wk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.wk {
  position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--linie);
  text-decoration: none; color: var(--tinte); box-shadow: var(--schatten-1);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.wk:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); border-color: color-mix(in srgb, var(--k2, var(--marke)) 40%, var(--linie)); color: var(--tinte); }
.wk b { display: block; font-size: 1rem; font-weight: 690; margin-bottom: 3px; }
.wk span { display: block; color: var(--tinte-3); font-size: .87rem; line-height: 1.4; }
.wk .chip { position: absolute; top: 10px; right: 10px; padding: 2px 8px; font-size: .7rem; }
.wk-leer { color: var(--tinte-3); padding: 20px 0; }

.beliebt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.beliebt .wk { flex-direction: column; padding: 20px; min-height: 160px; }
.beliebt .wk-kachel { width: 52px; height: 52px; border-radius: 15px; }
.beliebt .wk-kachel svg { width: 32px; height: 32px; }
.beliebt .wk b { font-size: 1.08rem; }
@media (max-width: 960px) { .beliebt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Vertrauen / Vergleich ---------- */
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 22px; box-shadow: var(--schatten-1); }
.karte h3 { display: flex; align-items: center; gap: 10px; }
.karte h3 svg { width: 24px; height: 24px; color: var(--marke); flex: none; }
.karte p { color: var(--tinte-2); margin: 0; font-size: .95rem; }
@media (max-width: 860px) { .drei { grid-template-columns: minmax(0, 1fr); } }

.vergleich { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten-1); font-size: .95rem; }
.vergleich th, .vergleich td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.vergleich tr:last-child th, .vergleich tr:last-child td { border-bottom: 0; }
.vergleich thead th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); background: var(--flaeche-2); }
.vergleich td.wir { background: color-mix(in srgb, var(--gold) 9%, var(--flaeche)); font-weight: 650; }
.vergleich td.wir::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: 2px; }
.vergleich-quelle { font-size: .82rem; color: var(--tinte-3); margin-top: 10px; }
/* Schmal: drei Spalten teilen sich die Breite, lange deutsche Woerter werden
   getrennt -- so bleibt es eine echte Tabelle (Semantik) und nichts ragt hinaus. */
@media (max-width: 600px) {
  .vergleich { table-layout: fixed; font-size: .84rem; }
  .vergleich th, .vergleich td { padding: 10px 8px; hyphens: auto; overflow-wrap: anywhere; }
  .vergleich thead th { font-size: .68rem; letter-spacing: .04em; }
  .vergleich td.wir::before { display: none; }
}
.tabelle-huelle { overflow-x: auto; }

.schritte { counter-reset: schritt; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.schritte li { counter-increment: schritt; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 20px 20px 20px 66px; position: relative; box-shadow: var(--schatten-1); }
.schritte li::before { content: counter(schritt); position: absolute; left: 20px; top: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--marke); color: #fff; font-weight: 760; }
:root[data-thema="dunkel"] .schritte li::before { color: #06202c; }
.schritte b { display: block; margin-bottom: 4px; }
.schritte span { color: var(--tinte-3); font-size: .93rem; }
@media (max-width: 860px) { .schritte { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 0 18px; }
.faq summary { cursor: pointer; padding: 16px 28px 16px 0; font-weight: 650; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 13px; font-size: 1.3rem; color: var(--tinte-3); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 16px; color: var(--tinte-2); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Fuss ---------- */
.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); padding: 34px 0 40px; color: var(--tinte-3); font-size: .9rem; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.fuss h4 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); margin-bottom: 10px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss a { color: var(--tinte-3); text-decoration: none; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }
.fuss-unten { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linie); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 860px) { .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   WERKZEUGSEITE
   ===================================================================== */
.wz-held { padding: 34px 0 30px; position: relative; overflow: hidden; }
.wz-held::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 520px; z-index: -1;
  background: radial-gradient(40% 50% at 15% 35%, color-mix(in srgb, var(--k1, var(--marke)) 16%, transparent), transparent 70%),
              radial-gradient(40% 50% at 85% 20%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%);
}
.wz-held-raster { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.wz-titel { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.wz-titel .wk-kachel { width: 58px; height: 58px; border-radius: 17px; }
.wz-titel .wk-kachel svg { width: 36px; height: 36px; }
.wz-titel h1 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
@media (max-width: 980px) { .wz-held-raster { grid-template-columns: minmax(0, 1fr); gap: 22px; } .wz-held .ablage { min-height: 240px; } }
/* "PDF zusammenfügen" ist bei 320 px ein Wort breiter als die Spalte: trennen statt hinausragen. */
.wz-titel > * { min-width: 0; }
.wz-titel h1 { hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 420px) { .wz-titel { gap: 12px; } .wz-titel .wk-kachel { width: 46px; height: 46px; border-radius: 14px; flex: none; } .wz-titel .wk-kachel svg { width: 28px; height: 28px; } }

/* ---------- Arbeitsmodus: ab der ersten Datei gehoert der Viewport der Aufgabe ---------- */
.app { display: none; }
[data-modus="arbeit"] .app { display: flex; }
[data-modus="arbeit"] #main > :not(.app) { display: none; }
[data-modus="arbeit"] .fuss { display: none; }

@media (min-width: 960px) {
  html[data-modus="arbeit"], html[data-modus="arbeit"] body { height: 100%; overflow: hidden; }
  html[data-modus="arbeit"] body { display: flex; flex-direction: column; }
  [data-modus="arbeit"] #main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  [data-modus="arbeit"] .app { flex: 1; min-height: 0; }
}
.app { flex-direction: column; background: var(--grund); }
.app-leiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.app-leiste .wk-kachel { width: 34px; height: 34px; border-radius: 10px; }
.app-leiste .wk-kachel svg { width: 21px; height: 21px; }
.app-leiste h1 { font-size: 1.08rem; margin: 0; letter-spacing: -.01em; font-weight: 720; }
.app-leiste .app-info { color: var(--tinte-3); font-size: .9rem; }
.app-leiste .rechts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.app-raster { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
@media (min-width: 960px) and (max-width: 1279px) { .app-raster { grid-template-columns: minmax(0, 1fr) minmax(320px, 340px); } }
@media (max-width: 959px) { .app-raster { grid-template-columns: minmax(0, 1fr); } }

.buehne { min-height: 0; overflow: auto; position: relative; display: flex; flex-direction: column; }
.buehne:focus { outline: none; }
.buehne-inhalt { flex: 1; padding: 22px; }
.buehne-fuss { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; padding: 8px 22px 12px; font-size: .8rem; color: var(--tinte-3); }
.buehne-fuss a { color: var(--tinte-3); }
@media (max-width: 959px) { .buehne { overflow: visible; } .buehne-inhalt { padding: 14px; } }

.inspektor {
  min-height: 0; overflow: auto; background: var(--flaeche); border-left: 1px solid var(--linie);
  display: flex; flex-direction: column;
}
.inspektor-inhalt { padding: 20px; display: grid; gap: 18px; align-content: start; flex: 1; }
.inspektor h2 { font-size: 1.02rem; margin: 0; }
.inspektor-fuss { position: sticky; bottom: 0; padding: 14px 20px 18px; background: linear-gradient(to top, var(--flaeche) 75%, transparent); display: grid; gap: 10px; }
@media (max-width: 959px) {
  .inspektor { border-left: 0; border-top: 1px solid var(--linie); overflow: visible; }
  .inspektor-fuss { position: sticky; bottom: 0; box-shadow: 0 -10px 24px -18px rgba(15, 23, 42, .5); border-top: 1px solid var(--linie); background: var(--flaeche); z-index: 5; }
}

/* ---------- Optionen ---------- */
.opt { display: grid; gap: 8px; }
.opt > label, .opt > .opt-titel { font-weight: 650; font-size: .93rem; }
.opt-hilfe { color: var(--tinte-3); font-size: .84rem; margin: 0; }
.opt input[type="text"], .opt input[type="number"], .opt input[type="password"], .opt select, .opt textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie-2); background: var(--flaeche);
}
.opt textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.opt input:focus-visible, .opt select:focus-visible, .opt textarea:focus-visible { outline-offset: 0; }
.opt-einheit { display: flex; align-items: center; gap: 8px; }
.opt-einheit span { color: var(--tinte-3); font-size: .9rem; white-space: nowrap; }
.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.wahl label { position: relative; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--linie-2); border-radius: 11px; cursor: pointer; background: var(--flaeche); min-height: 44px; align-content: center; }
.wahl label:hover { border-color: var(--tinte-3); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label:has(input:checked) { border-color: var(--marke); background: var(--marke-tint); box-shadow: inset 0 0 0 1px var(--marke); }
.wahl label:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.wahl b { font-size: .92rem; }
.wahl small { color: var(--tinte-3); font-size: .78rem; line-height: 1.3; }
.wahl.voll { grid-template-columns: minmax(0, 1fr); }
.schalter { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .93rem; }
.schalter input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marke); flex: none; }
.position { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); gap: 4px; padding: 6px; border: 1px solid var(--linie-2); border-radius: 10px; width: max-content; background: repeating-linear-gradient(0deg, transparent 0 39px, transparent 39px 40px), var(--flaeche-2); }
.position label { position: relative; display: grid; place-items: center; border-radius: 7px; cursor: pointer; }
.position label::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--linie-2); }
.position label:hover::before { background: var(--tinte-3); }
.position input { position: absolute; opacity: 0; }
.position label:has(input:checked)::before { background: var(--marke); width: 16px; height: 16px; }
.position label:has(input:focus-visible) { outline: 3px solid var(--fokus); }
.regler { display: flex; gap: 12px; align-items: center; }
.regler input[type="range"] { flex: 1; accent-color: var(--marke); min-height: 44px; }
.regler output { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; color: var(--tinte-2); }
.opt-datei { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.opt-datei span { color: var(--tinte-3); font-size: .88rem; word-break: break-all; }
.farben { display: flex; gap: 8px; flex-wrap: wrap; }
.farben label { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.farben input { position: absolute; opacity: 0; }
.farben label:has(input:checked) { box-shadow: 0 0 0 3px var(--flaeche), 0 0 0 5px var(--marke); }
.farben label:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 4px; }

/* ---------- Meldungen ---------- */
.meldung { padding: 12px 14px; border-radius: 12px; font-size: .92rem; border: 1px solid; display: grid; gap: 8px; }
.meldung p { margin: 0; }
.meldung-info { background: var(--marke-tint); border-color: color-mix(in srgb, var(--marke) 25%, transparent); color: var(--tinte-2); }
.meldung-warn { background: var(--warn-hell); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
.meldung-fehler { background: var(--fehler-hell); border-color: color-mix(in srgb, var(--fehler) 30%, transparent); color: var(--fehler); }
.meldung-gut { background: var(--gut-hell); border-color: color-mix(in srgb, var(--gut) 30%, transparent); color: var(--gut); }
.meldung .knopf { justify-self: start; }

/* ---------- Fortschritt ---------- */
.fortschritt { display: grid; gap: 8px; }
.fortschritt-balken { height: 8px; border-radius: 999px; background: var(--grund-2); overflow: hidden; }
.fortschritt-balken > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--marke), color-mix(in srgb, var(--marke) 60%, var(--gold))); border-radius: inherit; transition: width .25s; }
.fortschritt-balken.unbestimmt > div { width: 35%; animation: unbestimmt 1.3s ease-in-out infinite; }
@keyframes unbestimmt { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
.fortschritt-text { font-size: .88rem; color: var(--tinte-3); display: flex; justify-content: space-between; gap: 10px; }

/* ---------- Ergebnis ---------- */
.ergebnis { display: grid; gap: 14px; }
.ergebnis-kopf { display: flex; gap: 12px; align-items: center; }
.ergebnis-kopf .haken { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gut-hell); color: var(--gut); flex: none; }
.ergebnis-kopf .haken svg { width: 26px; height: 26px; }
.ergebnis-kopf b { display: block; font-size: 1.05rem; }
.ergebnis-kopf span { color: var(--tinte-3); font-size: .88rem; }
.ergebnis-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ergebnis-zahlen div { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 11px; padding: 10px 12px; }
.ergebnis-zahlen b { display: block; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.ergebnis-zahlen span { font-size: .78rem; color: var(--tinte-3); }
.ergebnis-dateien { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.ergebnis-datei { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; font-size: .9rem; }
.ergebnis-datei span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ergebnis-datei small { color: var(--tinte-3); white-space: nowrap; }
.weiter { display: grid; gap: 8px; }
.weiter h3 { font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); margin: 0; }
.weiter-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.weiter-liste button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 1px solid var(--linie-2); background: var(--flaeche); font-size: .88rem; font-weight: 620; }
.weiter-liste button:hover { border-color: var(--marke); background: var(--marke-tint); }
.weiter-liste .wk-kachel { width: 28px; height: 28px; border-radius: 8px; }
.weiter-liste .wk-kachel svg { width: 18px; height: 18px; stroke-width: 3.6; }

/* ---------- Buehne: Dateikarten ---------- */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; align-items: start; }
.dk { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 10px; box-shadow: var(--schatten-1); display: grid; gap: 8px; user-select: none; }
.dk[draggable="true"] { cursor: grab; }
.dk.zieht { opacity: .4; }
.dk.ziel { outline: 3px dashed var(--marke); outline-offset: 3px; }
.dk-bild { aspect-ratio: 3 / 4; border-radius: 8px; background: var(--grund-2); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--linie); }
.dk-bild canvas, .dk-bild img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: var(--schatten-1); }
.dk-bild.lädt::after { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--linie-2); border-top-color: var(--marke); animation: dreh 0.9s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.dk-name { font-size: .86rem; font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-info { font-size: .78rem; color: var(--tinte-3); margin-top: -6px; }
.dk-nr { position: absolute; top: 16px; left: 16px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--tinte); color: var(--flaeche); font-size: .78rem; font-weight: 760; display: grid; place-items: center; z-index: 2; }
.dk-aktionen { display: flex; gap: 4px; justify-content: center; }
.dk-aktionen button { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--linie); background: var(--flaeche); display: grid; place-items: center; color: var(--tinte-2); }
.dk-aktionen button:hover { border-color: var(--tinte-3); color: var(--tinte); }
.dk-aktionen button[disabled] { opacity: .35; cursor: default; }
.dk-aktionen svg { width: 18px; height: 18px; }
.dk-plus { display: grid; place-items: center; gap: 8px; align-content: center; min-height: 230px; border: 2px dashed var(--linie-2); border-radius: var(--r); background: transparent; color: var(--tinte-3); font-weight: 650; }
.dk-plus:hover { border-color: var(--marke); color: var(--marke); }
.dk-plus svg { width: 34px; height: 34px; }

/* ---------- Buehne: Seitenraster ---------- */
.seiten-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.seiten-werkzeuge .zaehler { margin-left: auto; color: var(--tinte-3); font-size: .9rem; }
.seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--seite-b, 150px), 1fr)); gap: 16px; align-items: start; }
.sk { position: relative; display: grid; gap: 6px; justify-items: center; padding: 8px; border-radius: 12px; border: 2px solid transparent; background: transparent; text-align: center; user-select: none; }
/* Bewusst KEIN content-visibility: die geschaetzte Kartenhoehe wich von der
   echten ab (Aktionszeile je Werkzeug verschieden), das Raster wuchs beim
   ersten Durchscrollen um ~1000 px und die Bildlaufleiste sprang
   (pdf-werkstatt-vorschau-speicher). Die Layoutkosten traegt stattdessen
   das inkrementelle Raster -- es baut keine Karten mehr neu. */
.sk-bild { position: relative; width: 100%; aspect-ratio: var(--seite-ar, 3 / 4); display: grid; place-items: center; border-radius: 6px; container-type: size; }
/* Zusaetzliche Drehung als CSS: die Box hat schon das gedrehte Seitenverhaeltnis;
   bei 90/270 Grad ist die Breite der ungedrehten Leinwand die HOEHE der Box (cqh). */
.sk-bild[data-dreh="90"] canvas, .sk-bild[data-dreh="270"] canvas { position: absolute; left: 50%; top: 50%; width: 100cqh !important; height: auto !important; max-width: none; max-height: none; }
.sk-bild[data-dreh="90"] canvas { transform: translate(-50%, -50%) rotate(90deg); }
.sk-bild[data-dreh="180"] canvas { transform: rotate(180deg); }
.sk-bild[data-dreh="270"] canvas { transform: translate(-50%, -50%) rotate(270deg); }
.sk-bild canvas, .sk-bild img { max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; border-radius: 3px; box-shadow: 0 1px 3px rgba(15,23,42,.18), 0 6px 14px -8px rgba(15,23,42,.35); background: #fff; transition: transform .2s; }
.sk-bild.lädt::after { content: ""; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--linie-2); border-top-color: var(--marke); animation: dreh .9s linear infinite; }
.sk-nr { font-size: .8rem; color: var(--tinte-3); font-weight: 600; }
.sk-knopf { position: absolute; inset: 0; border: 0; background: transparent; border-radius: 12px; z-index: 1; }
.sk:hover { background: var(--grund-2); }
.sk.gewaehlt { border-color: var(--marke); background: var(--marke-tint); }
.sk.gewaehlt::after { content: ""; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; z-index: 2; background: var(--marke) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 0 0 2px var(--flaeche); }
.sk.entfernen { border-color: var(--fehler); background: var(--fehler-hell); }
.sk.entfernen .sk-bild canvas { opacity: .35; filter: grayscale(1); }
.sk.entfernen::after { content: ""; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; z-index: 2; background: var(--fehler) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 2px var(--flaeche); }
.sk-aktionen { position: relative; z-index: 3; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.sk:hover .sk-aktionen, .sk:focus-within .sk-aktionen { opacity: 1; }
@media (hover: none) { .sk-aktionen { opacity: 1; } }
.sk-aktionen button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--linie-2); background: var(--flaeche); display: grid; place-items: center; color: var(--tinte-2); }
.sk-aktionen button:hover { color: var(--tinte); border-color: var(--tinte-3); }
.sk-aktionen svg { width: 17px; height: 17px; }
.sk[draggable="true"] { cursor: grab; }
.sk.zieht { opacity: .35; }
.sk.ziel-links::before, .sk.ziel-rechts::before { content: ""; position: absolute; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--marke); z-index: 4; }
.sk.ziel-links::before { left: -10px; }
.sk.ziel-rechts::before { right: -10px; }
.sk-quelle { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: .7rem; font-weight: 760; padding: 1px 6px; border-radius: 6px; background: var(--tinte); color: var(--flaeche); }

/* ---------- Buehne: Einzelseite (Schwaerzen, Unterschreiben, Zuschneiden ...) ---------- */
.einzel { display: grid; gap: 12px; justify-items: center; }
.einzel-leiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; position: sticky; top: 0; z-index: 6; padding: 8px; background: color-mix(in srgb, var(--grund) 90%, transparent); backdrop-filter: blur(6px); border-radius: 12px; }
.einzel-leiste .seitenwahl { font-variant-numeric: tabular-nums; color: var(--tinte-2); font-size: .92rem; min-width: 7em; text-align: center; }
.einzel-flaeche { position: relative; box-shadow: 0 2px 6px rgba(15,23,42,.18), 0 18px 40px -20px rgba(15,23,42,.45); background: #fff; touch-action: none; }
.einzel-flaeche canvas.seite { display: block; }
.einzel-ebene { position: absolute; inset: 0; }
.einzel-ebene.zeichnen { cursor: crosshair; }
.box { position: absolute; border: 2px solid var(--fehler); background: rgba(0, 0, 0, .78); border-radius: 2px; }
.box.weich { background: rgba(163, 42, 42, .18); }
.box button { position: absolute; top: -12px; right: -12px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--fehler); color: #fff; font-weight: 800; line-height: 1; display: grid; place-items: center; }
.platz { position: absolute; outline: 2px dashed var(--marke); outline-offset: 2px; cursor: move; touch-action: none; }
.platz img { width: 100%; height: 100%; display: block; pointer-events: none; }
/* Griff und Entfernen liegen AUSSERHALB des Felds: mittig auf der Ecke deckten sie ein 6-px-
   Kaestchen ganz zu, und ein Tipp darauf loeschte es (live, 2026-10-02). */
.platz .griff { position: absolute; left: 100%; top: 100%; width: 18px; height: 18px; border-radius: 50%; background: var(--marke); border: 2px solid #fff; cursor: nwse-resize; }
.platz .weg { position: absolute; bottom: 100%; right: 0; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--tinte); color: var(--flaeche); display: grid; place-items: center; font-weight: 800; }
.rahmen { position: absolute; border: 2px solid var(--marke); box-shadow: 0 0 0 9999px rgba(15, 23, 42, .45); }
.rahmen .griff { position: absolute; width: 16px; height: 16px; border-radius: 4px; background: var(--marke); border: 2px solid #fff; }

/* ---------- Text-Buehne ---------- */
.textbuehne { display: grid; gap: 10px; height: 100%; }
.textbuehne textarea { width: 100%; min-height: 60vh; border-radius: var(--r); border: 1px solid var(--linie-2); background: var(--flaeche); padding: 18px; font-family: var(--mono); font-size: .92rem; line-height: 1.6; resize: vertical; }

/* ---------- Leere/Ladezustand der Buehne ---------- */
.buehne-leer { display: grid; place-items: center; text-align: center; padding: 60px 20px; color: var(--tinte-3); gap: 10px; }
.lader { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--linie-2); border-top-color: var(--marke); animation: dreh .9s linear infinite; }

/* ---------- Dialog ---------- */
dialog.dlg { border: 0; padding: 0; border-radius: var(--r-l); background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten-3); width: min(460px, calc(100% - 32px)); }
dialog.dlg::backdrop { background: rgba(8, 15, 24, .55); backdrop-filter: blur(3px); }
.dlg form { padding: 24px; display: grid; gap: 16px; }
.dlg h2 { font-size: 1.2rem; margin: 0; }
.dlg p { margin: 0; color: var(--tinte-2); }
.dlg .dlg-knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.dlg ul { margin: 0; padding-left: 20px; color: var(--tinte-2); }

/* ---------- Befehlspalette (Werkzeugsuche) ---------- */
dialog.palette { border: 0; padding: 0; margin: 10vh auto auto; border-radius: 18px; width: min(640px, calc(100% - 24px)); background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten-3); }
dialog.palette::backdrop { background: rgba(8, 15, 24, .5); backdrop-filter: blur(3px); }
.palette-feld { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
.palette-feld svg { width: 20px; height: 20px; color: var(--tinte-3); }
.palette-feld input { flex: 1; border: 0; background: transparent; font-size: 1.08rem; padding: 6px 0; outline: none; }
.palette-liste { max-height: min(60vh, 520px); overflow: auto; padding: 8px; margin: 0; list-style: none; }
.palette-liste li a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; text-decoration: none; color: var(--tinte); }
.palette-liste li a .wk-kachel { width: 34px; height: 34px; border-radius: 10px; }
.palette-liste li a .wk-kachel svg { width: 21px; height: 21px; }
.palette-liste li a b { display: block; font-size: .95rem; }
.palette-liste li a span { display: block; font-size: .82rem; color: var(--tinte-3); }
.palette-liste li[aria-selected="true"] a, .palette-liste li a:hover { background: var(--marke-tint); }
.palette-leer { padding: 22px; text-align: center; color: var(--tinte-3); }

/* ---------- Inhalt unter dem Werkzeug ---------- */
.inhalt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
.inhalt-raster aside .karte { position: sticky; top: calc(var(--kopf-h) + 16px); }
.verwandt { display: grid; gap: 8px; }
.verwandt a { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--tinte); }
.verwandt a:hover { background: var(--grund-2); }
.verwandt .wk-kachel { width: 36px; height: 36px; border-radius: 10px; }
.verwandt .wk-kachel svg { width: 22px; height: 22px; }
.verwandt b { font-size: .93rem; display: block; }
.verwandt span { font-size: .8rem; color: var(--tinte-3); }
@media (max-width: 960px) { .inhalt-raster { grid-template-columns: minmax(0, 1fr); } }
.prosa { max-width: 46rem; color: var(--tinte-2); }
/* Schmale Bildschirme und grosse Schrift: lange deutsche Woerter trennen, statt
   die Spalte aufzudruecken (SC 1.4.10 / 1.4.4). */
@media (max-width: 600px) { body { hyphens: auto; } .prosa, .faq, .schritte, .lede, .abschnitt-kopf, .karte, .meldung { overflow-wrap: anywhere; } }
.prosa h2 { margin-top: 1.4em; }
.prosa ul { padding-left: 1.2em; }
.prosa li { margin-bottom: .4em; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .fuss, .ablage, .app { display: none !important; }
  body { background: #fff; }
}

/* ---------- Formularfelder auf der Seite (pdf.js-Anmerkungsebene) ---------- */
.annotationLayer { position: absolute; top: 0; left: 0; pointer-events: none; transform-origin: 0 0; --scale-round-x: 1px; --scale-round-y: 1px; }
.annotationLayer section { position: absolute; text-align: initial; pointer-events: auto; box-sizing: border-box; transform-origin: 0 0; }
.annotationLayer .linkAnnotation > a { position: absolute; inset: 0; }
.annotationLayer :is(.textWidgetAnnotation, .choiceWidgetAnnotation, .buttonWidgetAnnotation) :is(input, textarea, select) {
  background-color: rgba(26, 111, 209, .12); border: 1px solid rgba(26, 111, 209, .55); border-radius: 2px; box-sizing: border-box;
  font: calc(9px * var(--total-scale-factor)) Helvetica, Arial, sans-serif; height: 100%; width: 100%; margin: 0; padding: 0 2px; vertical-align: top; color: #111;
}
.annotationLayer .textWidgetAnnotation textarea { resize: none; }
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input { appearance: auto; accent-color: #1a6fd1; }
.annotationLayer :is(input, textarea, select):focus { background-color: #fff; outline: 2px solid var(--fokus); outline-offset: 0; }
.annotationLayer :is(input, textarea):disabled, .annotationLayer select:disabled { background: transparent; border-color: transparent; }
.annotationLayer .popupAnnotation, .annotationLayer .popup { display: none; }

/* ---------- Vergleich ---------- */
.vgl { display: grid; gap: 16px; }
.vgl-reiter { display: flex; gap: 8px; flex-wrap: wrap; }
.vgl-reiter button[aria-selected="true"] { background: var(--tinte); color: var(--flaeche); border-color: var(--tinte); }
.vgl-text { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 18px 20px; line-height: 1.7; max-width: 900px; }
.vgl-text p { margin: 0 0 .9em; }
.vgl-text .gleich { color: var(--tinte-3); }
.vgl-text ins, .vgl-text .neu { background: #d9f7e3; color: #0b4f2a; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.vgl-text del, .vgl-text .weg { background: #fde2e2; color: #8a1c1c; border-radius: 3px; padding: 0 2px; }
:root[data-thema="dunkel"] .vgl-text ins, :root[data-thema="dunkel"] .vgl-text .neu { background: #134e2c; color: #c6f6d5; }
:root[data-thema="dunkel"] .vgl-text del, :root[data-thema="dunkel"] .vgl-text .weg { background: #5c1d1d; color: #fed7d7; }
.vgl-text p.neu, .vgl-text p.weg { padding: 4px 8px; }
.vgl-text .ausgelassen { color: var(--tinte-3); font-style: italic; font-size: .9rem; }
.vgl-seite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 12px; }
.vgl-seite h4 { grid-column: 1 / -1; margin: 0; font-size: .95rem; }
.vgl-seite figure { margin: 0; position: relative; }
.vgl-seite figcaption { font-size: .8rem; color: var(--tinte-3); margin-bottom: 4px; }
.vgl-seite canvas { width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 4px; }
.vgl-markierung { position: absolute; border: 2px solid #e11d48; background: rgba(225, 29, 72, .12); border-radius: 2px; }
@media (max-width: 760px) { .vgl-seite { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Maus und Finger (2026-10-02)

   Gemessen auf 390 x 844 (Touch) und 1440 x 900 (Maus), alle 41 Werkzeuge:
   in 22 lag der Hauptknopf auf dem Telefon unter allen Seitenvorschauen, bis
   zu 37 Ziele waren kleiner als 44 px, 16 Werkzeuge verlangten Tippen, wo
   man auswaehlen koennte, und Eingaben unter 16 px Schrift lassen Safari auf
   dem iPhone beim Fokus hineinzoomen (WebKit, WKWebViewIOS.mm:
   webViewStandardFontSize = 16). Die Regeln stehen bewusst AM ENDE: ein
   Media Query erhoeht keine Spezifitaet, frueher stehende Regeln gewinnen
   sonst still (Workspace-Vertrag, Kaskadenfalle 1).
   ===================================================================== */

/* Minus/Plus und Schnellwerte statt Zahlentastatur */
.stepper { display: flex; align-items: stretch; gap: 6px; }
.stepper input[type="text"] { flex: 1; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.stepper-einheit { align-self: center; color: var(--tinte-3); font-size: .9rem; white-space: nowrap; }
.stufe { flex: none; width: 44px; min-height: 44px; padding: 0; border-radius: 10px; border: 1px solid var(--linie-2); background: var(--flaeche); display: grid; place-items: center; color: var(--tinte-2); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.stufe:hover:not([disabled]) { border-color: var(--tinte-3); color: var(--tinte); }
.stufe:active:not([disabled]) { background: var(--grund-2); }
.stufe[disabled] { opacity: .4; cursor: default; }
.stufe svg { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-knopf { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--flaeche); font-size: .88rem; font-weight: 620; color: var(--tinte-2); line-height: 1.2; touch-action: manipulation; }
.chip-knopf:hover { border-color: var(--tinte-3); color: var(--tinte); }
.chip-knopf[aria-pressed="true"] { border-color: var(--marke); background: var(--marke-tint); color: var(--marke); box-shadow: inset 0 0 0 1px var(--marke); }

/* Live-Vorschau: die Ueberlagerung liegt deckungsgleich auf der Seitenvorschau */
.ueber { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sk-bild[data-dreh="0"] canvas, .sk-bild[data-dreh="180"] canvas { width: 100% !important; height: 100% !important; }
.dk-bild { container-type: size; }
.dk-seite { position: relative; width: min(100cqw, calc(100cqh * var(--ar, .75))); aspect-ratio: var(--ar, .75); display: grid; place-items: center; box-shadow: var(--schatten-1); background: #fff; }
.dk-seite canvas { width: 100% !important; height: 100% !important; max-width: none; max-height: none; box-shadow: none; display: block; }
.dk-seite.lädt::after { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--linie-2); border-top-color: var(--marke); animation: dreh .9s linear infinite; }

/* Seiten, die man fuer eine Einstellung antippt ("ab hier nummerieren") */
.sk.klickbar .sk-knopf { cursor: pointer; }
.sk.vorschau-an { border-color: var(--marke); background: var(--marke-tint); }

/* Ergebnis: Herunterladen und Teilen nebeneinander */
.fuss-haupt { display: flex; gap: 8px; }
.fuss-haupt .knopf-haupt { flex: 1; min-width: 0; }
.knopf-teilen { flex: none; }
.fuss-neben { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Nur auf schmalen Bildschirmen: Anleitung ueber der Buehne und Blatt-Knopf */
.buehne-anleitung { display: none; }
.blatt-knopf { display: none; }

/* --- Grob zeigende Geraete (Finger): Ziele mindestens 44 px, Eingaben 16 px --- */
@media (pointer: coarse) {
  .knopf-klein { min-height: 44px; }
  .knopf-icon { min-width: 44px; width: 44px; min-height: 44px; }
  .suchknopf { min-height: 44px; }
  .sk-aktionen, .dk-aktionen { flex-wrap: wrap; justify-content: center; }
  .sk-aktionen button, .dk-aktionen button { width: 44px; height: 44px; }
  .chip-knopf { min-height: 44px; padding-inline: 14px; }
  .farben label { width: 44px; height: 44px; }
  .position { grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); }
  .schalter { min-height: 44px; align-items: center; }
  .schalter input { margin: 0; width: 22px; height: 22px; }
  .weiter-liste button { min-height: 44px; }
  .wahl label { min-height: 48px; }
  .buehne-fuss a { display: inline-block; padding: 12px 2px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
  .annotationLayer :is(input, textarea, select) { font-size: calc(9px * var(--total-scale-factor)); }
  .platz .griff { width: 28px; height: 28px; }
  .platz .weg { width: 36px; height: 36px; }
  .box button { width: 36px; height: 36px; top: -18px; right: -18px; }
  .rahmen .griff { width: 24px; height: 24px; }
}
/* Ziehen und Strg+V gibt es auf einem Touch-Bildschirm nicht -- der Hinweis waere Laerm. */
@media (hover: none) and (pointer: coarse) { .nur-maus { display: none !important; } }

/* --- Schmal (< 960 px): Daumenleiste unten, Einstellungen als Blatt --- */
@media (max-width: 959px) {
  html[data-modus="arbeit"] .kopf { display: none; }
  .app-leiste { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; gap: 10px; padding: 8px 8px 8px 14px; min-height: 60px; }
  .app-leiste > div:not(.rechts) { min-width: 0; flex: 1; }
  .app-leiste h1 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-leiste .app-info { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-leiste .rechts { flex-wrap: nowrap; gap: 4px; margin-left: 0; }
  .app-leiste .rechts .knopf { width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
  .app-leiste .rechts .knopf-text { display: none; }
  .buehne { padding-bottom: calc(var(--dock-h, 100px) + 12px); }
  .buehne-anleitung { display: block; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--marke-tint); border: 1px solid color-mix(in srgb, var(--marke) 22%, transparent); color: var(--tinte-2); font-size: .92rem; }
  .inspektor-anleitung { display: none; }
  .inspektor {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: flex; flex-direction: column; max-height: calc(100dvh - 64px);
    border: 0; border-top: 1px solid var(--linie); border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 36px -20px rgba(15, 23, 42, .5); overflow: hidden; background: var(--flaeche);
  }
  /* Blatt und Daumenleiste zusammen hoechstens die halbe Bildschirmhoehe (Workspace-Vertrag:
     live gemessen nahmen beide 58 % ein, ueber dem Blatt blieb eine einzige Seite sichtbar). */
  .inspektor-inhalt { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; max-height: max(170px, calc(50dvh - var(--dock-h, 132px))); padding: 18px 16px 8px; }
  /* Offenes Blatt: die Anleitung weicht, damit die Live-Vorschau der ersten Seiten ueber dem Blatt sichtbar bleibt. */
  html[data-blatt="auf"] .buehne-anleitung { display: none; }
  html:not([data-blatt="auf"]) .inspektor-inhalt { display: none; }
  .inspektor-fuss { position: static; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--flaeche); box-shadow: none; border-top: 0; gap: 8px; }
  html[data-blatt="auf"] .inspektor-fuss { border-top: 1px solid var(--linie); }
  .inspektor-fuss .knopf-gross { min-height: 52px; padding-block: 12px; }
  .blatt-knopf { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; border: 1px solid var(--linie-2); border-radius: 12px; background: var(--flaeche-2); color: var(--tinte); text-align: left; font-size: .92rem; font-weight: 620; touch-action: manipulation; }
  .blatt-knopf svg { width: 20px; height: 20px; }
  .blatt-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .blatt-pfeil { display: inline-grid; color: var(--tinte-3); transition: transform .2s; }
  .blatt-knopf[aria-expanded="true"] .blatt-pfeil { transform: rotate(180deg); }
  .inspektor h2:focus { outline: none; }
}
@media (max-width: 479px) {
  .knopf-teilen { width: 52px; padding: 0; }
  .knopf-teilen .knopf-text { display: none; }
}

/* Passwortvorschlag */
.opt-passwort { display: grid; gap: 8px; }
.opt-reihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Teilen: Schere zwischen zwei Seiten, Teile farbig (wie Sejdas farbcodierte Vorschau).
   Die Schere sitzt mittig in der Spaltenluecke; am Zeilenende braucht das Raster
   rechts Platz dafuer, sonst laeuft sie ueber den Bildschirmrand (gemessen auf
   390 px: die Seite zoomte heraus). */
.seiten.mit-schnitt { column-gap: 20px; padding-right: 18px; }
.sk-schnitt {
  position: absolute; z-index: 4; top: calc(50% - 30px); right: -28px; width: 32px; height: 32px; padding: 0;
  border-radius: 50%; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--tinte-3);
  display: grid; place-items: center; box-shadow: var(--schatten-1); touch-action: manipulation;
}
.sk-schnitt svg { width: 18px; height: 18px; transform: rotate(90deg); }
.sk-schnitt:hover { color: var(--marke); border-color: var(--marke); }
.sk-schnitt[aria-pressed="true"] { background: var(--marke); border-color: var(--marke); color: #fff; }
:root[data-thema="dunkel"] .sk-schnitt[aria-pressed="true"] { color: #06202c; }
.sk.schnitt-danach::before { content: ""; position: absolute; top: 6px; bottom: 6px; right: -13px; border-right: 2px dashed var(--marke); z-index: 3; }
.sk-gruppe { position: absolute; z-index: 2; top: 12px; left: 12px; font-size: .72rem; font-weight: 760; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--g, var(--marke)); }
.sk[data-gruppe] { --g: var(--marke); }
.sk[data-gruppe="0"] { --g: #2d5c8a; }
.sk[data-gruppe="1"] { --g: #a15c17; }
.sk[data-gruppe="2"] { --g: #246d6d; }
.sk[data-gruppe="3"] { --g: #644a8a; }
.sk[data-gruppe="4"] { --g: #9b3d67; }
.sk[data-gruppe="5"] { --g: #5b6678; }
.sk[data-gruppe]:not([data-gruppe=""]) .sk-bild canvas { box-shadow: 0 0 0 3px var(--g), 0 6px 14px -8px rgba(15,23,42,.35); }
.sk.ausgelassen .sk-bild canvas { opacity: .35; filter: grayscale(1); }
@media (pointer: coarse) {
  .seiten.mit-schnitt { column-gap: 28px; padding-right: 22px; }
  .sk-schnitt { width: 44px; height: 44px; right: -38px; top: calc(50% - 36px); }
  .sk.schnitt-danach::before { right: -17px; }
}

/* Zuschneiden: Rahmen mit Griffen -- verschieben (Flaeche) und anpassen (Ecken, Kanten) */
.rahmen { cursor: move; touch-action: none; }
.rahmen .griff { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.rahmen .griff-nw { left: 0; top: 0; cursor: nwse-resize; }
.rahmen .griff-n { left: 50%; top: 0; cursor: ns-resize; }
.rahmen .griff-ne { left: 100%; top: 0; cursor: nesw-resize; }
.rahmen .griff-e { left: 100%; top: 50%; cursor: ew-resize; }
.rahmen .griff-se { left: 100%; top: 100%; cursor: nwse-resize; }
.rahmen .griff-s { left: 50%; top: 100%; cursor: ns-resize; }
.rahmen .griff-sw { left: 0; top: 100%; cursor: nesw-resize; }
.rahmen .griff-w { left: 0; top: 50%; cursor: ew-resize; }
@media (pointer: coarse) {
  /* sichtbar 24 px, getroffen wird ein 44-px-Feld darum */
  .rahmen .griff { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .rahmen .griff::after { content: ""; position: absolute; inset: -10px; }
}

/* Haeufige Anlaesse: ein Klick stellt das Werkzeug ein (?anlass=...) */
.anlaesse-abschnitt { padding: 0 0 6px; }
.anlaesse-titel { font-size: 1rem; font-weight: 700; color: var(--tinte-2); margin: 0 0 12px; letter-spacing: 0; }
.anlaesse { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.anlass { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--linie); background: var(--flaeche); text-decoration: none; color: var(--tinte); box-shadow: var(--schatten-1); transition: border-color .15s, transform .15s, box-shadow .15s; }
.anlass:hover { border-color: color-mix(in srgb, var(--marke) 55%, var(--linie)); transform: translateY(-1px); box-shadow: var(--schatten-2); color: var(--tinte); }
.anlass b { font-size: .98rem; font-weight: 690; }
.anlass span { font-size: .86rem; color: var(--tinte-3); line-height: 1.45; }
.anlass[aria-current="true"] { border-color: var(--marke); background: var(--marke-tint); box-shadow: inset 0 0 0 1px var(--marke); }
.ablage-anlass { margin: 0; font-size: .9rem; color: var(--gut); font-weight: 600; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.ablage-anlass .sym svg { width: 16px; height: 16px; }
.knopf-link { background: none; border: 0; padding: 0 2px; color: var(--marke); text-decoration: underline; text-underline-offset: 2px; font: inherit; font-weight: 600; cursor: pointer; }
@media (pointer: coarse) { .knopf-link { padding: 12px 6px; margin: -12px -6px; } }
@media (max-width: 600px) { .anlaesse { grid-template-columns: minmax(0, 1fr); gap: 8px; } .anlass { padding: 12px 14px; } }

/* Werkzeugseite als eigenstaendige Landingpage: buendige Kanten, ruhige Abstaende */
.prosa > h2:first-child { margin-top: 0; }
.inhalt-raster { align-items: start; }
body[data-werkzeug] .abschnitt { padding-top: 40px; }
@media (max-width: 600px) { .wz-held .kicker { display: none; } .wz-held { padding-top: 22px; } }

/* Fuss der Buehne: Text und Links auf einer Grundlinie (gemessen: der Hinweis
   stand 12 px hoeher als die auf 44 px gepolsterten Links daneben). */
.buehne-fuss { align-items: center; }
@media (max-width: 959px) { .buehne-fuss { justify-content: center; row-gap: 0; padding: 4px 14px 8px; } }

/* Lesezeichenliste im Inspektor */
.lz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lz { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.lz.lz-unter { padding-left: 22px; }
.lz-seite { min-width: 48px; min-height: 40px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--linie-2); background: var(--flaeche-2); font-size: .82rem; font-weight: 700; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.lz-titel { width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--linie-2); background: var(--flaeche); }
.lz-ebene, .lz-weg { width: 40px; height: 40px; padding: 0; border-radius: 9px; border: 1px solid var(--linie-2); background: var(--flaeche); display: grid; place-items: center; color: var(--tinte-2); }
.lz-ebene svg, .lz-weg svg { width: 17px; height: 17px; }
.lz-ebene[aria-pressed="true"] { background: var(--marke-tint); border-color: var(--marke); color: var(--marke); }
.lz-weg:hover { color: var(--fehler); border-color: var(--fehler); }
@media (pointer: coarse) { .lz-seite, .lz-titel { min-height: 44px; } .lz-ebene, .lz-weg { width: 44px; height: 44px; } }

/* Bereichsfeld in der Seitenleiste (Extrahieren) -- auf Touch gross genug und ohne iOS-Zoom */
.bereich-feld { min-height: 36px; border-radius: 10px; border: 1px solid var(--linie-2); padding: 4px 10px; width: 150px; background: var(--flaeche); }
@media (pointer: coarse) {
  .bereich-feld { min-height: 44px; font-size: 16px; }
  .textbuehne textarea { font-size: 16px; }
  .buehne-fuss a { padding: 13px 2px; }
}

/* Formular erstellen: Feldattrappen auf der Seite */
.fe { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 4px; background: rgba(26, 111, 209, .12); border: 1px solid rgba(26, 111, 209, .7); border-radius: 2px; font: 600 11px/1 system-ui, sans-serif; color: #12406f; overflow: hidden; white-space: nowrap; }
.fe span { overflow: hidden; text-overflow: ellipsis; }
.fe-mehrzeilig { align-items: flex-start; padding-top: 3px; }
.fe-kaestchen { padding: 0; background: #fff; border-width: 1.5px; }
.leiste-trenner { width: 1px; align-self: stretch; background: var(--linie-2); margin: 0 4px; }
.einzel-leiste .knopf[aria-pressed="true"] { background: var(--marke); border-color: var(--marke); color: #fff; }
:root[data-thema="dunkel"] .einzel-leiste .knopf[aria-pressed="true"] { color: #06202c; }
.fe-eintraege-zeile { padding-left: 54px; }
.fe-eintraege { width: 100%; min-height: 64px; border-radius: 9px; border: 1px solid var(--linie-2); padding: 6px 10px; background: var(--flaeche); font: inherit; font-size: .9rem; }
@media (pointer: coarse) { .fe-eintraege { font-size: 16px; } }

/* Held-Bereiche: overflow:hidden machte sie zu Scrollcontainern -- das Farbfeld (::before)
   ragt 10 % ueber den Rand, und ein Fokus in der Ablage scrollte den Held um genau diese
   160 px nach links (live in Chrome bei 1600 px gemessen: Held bei x=40 statt 200).
   clip schneidet ab, ohne scrollbar zu werden. */
.held, .wz-held { overflow: hidden; overflow: clip; }

/* Platzierte Elemente (Formularfelder): Entfernen und Griff nur bei Zeiger darueber oder
   Fokus -- sonst verdecken die Knoepfe das naechste Feld. */
@media (hover: hover) and (pointer: fine) {
  .platz .weg, .platz .griff { opacity: 0; transition: opacity .12s; }
  .platz:hover .weg, .platz:hover .griff, .platz:focus-within .weg, .platz:focus-within .griff { opacity: 1; }
}
/* Auf Touch gibt es kein Darueber: Knoepfe nur am angetippten (fokussierten) Feld. Live
   (390 px, 2026-10-02) standen sieben 36-px-Kreise zugleich auf der Seite und verdeckten die
   erkannten Kaestchen samt Beschriftung. visibility statt opacity: ein unsichtbarer, aber
   tippbarer Entfernen-Knopf loeschte sonst ein Feld, das niemand gewaehlt hat.
   ::before vergroessert die Trefferflaeche winziger Felder (ein 10-pt-Kaestchen ist hier
   6 px breit) auf 24 px -- es liegt unter Griff und Knopf, gehoert aber zum Feld. */
@media (hover: none), (pointer: coarse) {
  /* nur fokussierbare Felder (kern/platzierung.js); "PDF bearbeiten" setzt .platz ohne
     tabindex -- dort koennte nie etwas fokussiert werden, und x bliebe fuer immer weg */
  .platz[tabindex]:not(:focus-within) .weg, .platz[tabindex]:not(:focus-within) .griff { visibility: hidden; }
  .platz[tabindex]::before { content: ""; position: absolute; inset: -9px; }
}

/* Touch-Auswahl beim Sortieren: statt sechs Knoepfen unter jeder Seite eine Leiste fuer die Auswahl */
.seiten.touch-auswahl .sk-aktionen { display: none; }
.auswahl-leiste {
  position: sticky; bottom: 12px; z-index: 20; margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px;
  border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie-2); box-shadow: var(--schatten-3);
}
.auswahl-text { flex: 1 1 100%; padding: 0 6px; font-size: .9rem; font-weight: 700; color: var(--tinte-2); }
.auswahl-leiste .knopf { min-width: 44px; min-height: 44px; }
@media (max-width: 959px) {
  .auswahl-leiste { position: fixed; left: 8px; right: 8px; bottom: calc(var(--dock-h, 132px) + 8px); margin: 0; }
  .auswahl-text { flex: 0 0 auto; }
  .auswahl-wort { display: none; }
}
@media (max-width: 959px) {
  /* Eine Reihe: sieben 44-px-Knoepfe passen in 358 px; die Anzahl sitzt als Fahne darueber */
  .auswahl-leiste { flex-wrap: nowrap; justify-content: space-between; gap: 4px; padding: 6px; }
  .auswahl-leiste .knopf { padding: 0; flex: 1 1 0; max-width: 56px; }
  .auswahl-text { position: absolute; top: -32px; left: 10px; padding: 4px 12px; border-radius: 999px; background: var(--marke); color: #fff; font-size: .82rem; box-shadow: var(--schatten-1); }
  :root[data-thema="dunkel"] .auswahl-text { color: #06202c; }
}

/* Werkzeugleiste der Einzelseite auf dem Telefon: EINE wischbare Reihe statt drei
   umbrochener (live: 164 px hoch, die Seite begann erst bei der Haelfte des Bildschirms) */
@media (max-width: 600px) {
  .einzel-leiste { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .einzel-leiste::-webkit-scrollbar { display: none; }
  .einzel-leiste > * { flex: none; }
  .einzel-leiste .seitenwahl { min-width: 0; padding: 0 4px; }
}