@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("/static/fonts/Syne-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ===========================================================================
   P14 — Design-Tokens der neuen Schale (verbindlich fuer ALLE drei
   Bauabschnitte, siehe P14_FUNDAMENT.md "PL-FESTLEGUNG"). Ab hier gilt: kein
   Hex-Wert direkt im Selektor - neue Regeln nutzen ausschliesslich diese
   Variablen. Die alte :root-Palette darunter bleibt bestehen, ist aber auf
   diese Tokens gemappt (keine doppelte Farbwahrheit). ======================== */
:root {
  /* Flaechen */
  --k-grund:        #f6f4ef;  /* warmes Off-White, Seitengrund + Leisten */
  --k-grund-tief:   #efece5;  /* leicht abgesetzt: Leisten-Untergruende, inaktive Segmente */
  --k-canvas:       #fcfdff;  /* leicht kuehles Weiss, NUR die Arbeitsflaeche */
  --k-panel:        #ffffff;  /* Karten/Kacheln auf dem Grund */
  /* Linien */
  --k-linie:        #e2ded5;  /* dezente Trennlinie (sparsam einsetzen) */
  --k-linie-stark:  #cdc8bc;  /* Rahmen aktiver Elemente, Slider-Track-Rand */
  /* Typografie */
  --k-ink:          #161d38;  /* Ink-Navy, Ueberschriften + Zahlen */
  --k-text:         #2c3350;  /* Fliesstext */
  --k-text-leise:   #6f7590;  /* Hilfstexte, Einheiten, Sekundaerinfo */
  /* Aktive Kontrollen */
  --k-kobalt:       #27275a;  /* Flora 07.10.2026: Blau der Bildmarke (vorher #2b4fe8) */
  --k-kobalt-tief:  #474773;  /* Hover: Bildmarken-Blau, 15 % aufgehellt */  /* Hover/Active des Primaerbuttons */
  --k-flieder:      #eeebfb;  /* sehr helles Flieder: Sekundaerauswahl, aktiver Listeneintrag */
  --k-flieder-rand: #d9d3f5;  /* Rand der Sekundaerauswahl */
  /* Status */
  --k-gruen:        #1e9e62;  /* AUSSCHLIESSLICH Speicherstatus "Gespeichert" */
  --k-rot:          #c0392b;  /* Fehlerzustand */
  /* Tiefe */
  --k-schatten:        0 1px 2px rgba(22, 29, 56, .05), 0 4px 14px rgba(22, 29, 56, .06);
  --k-schatten-canvas: 0 2px 6px rgba(22, 29, 56, .06), 0 18px 44px rgba(22, 29, 56, .07);
  --k-fokus:           0 0 0 3px rgba(39, 39, 90, .28);  /* sichtbarer Fokusring, IMMER sichtbar */
  /* Radien */
  --k-r-klein: 6px;
  /* EIN Radius und EINE Farbe fuer alle rechteckigen Knoepfe (Paket 4c) */
  --k-knopf-radius: 999px;  /* Flora 07.10.2026: alle Knoepfe und Eingabefelder als Pille */
  --k-knopf-farbe: var(--k-kobalt);
  --k-r: 10px;
  --k-r-gross: 16px;
  /* Abstandsskala (4px-Raster) */
  --k-1: 4px; --k-2: 8px; --k-3: 12px; --k-4: 16px; --k-5: 24px; --k-6: 32px; --k-7: 48px;
  /* Typo-Skala */
  --k-t-mikro: 11px;
  --k-t-klein: 12px;
  --k-t-basis: 14px;
  --k-t-gross: 18px;
  --k-t-zahl:  22px;
}

:root {
  /* Alte Palette - Werte auf die neuen k-Tokens gemappt, damit unveraendert
     gebliebene Regeln (Kolorier-Module, Restbestand dieser Datei) weiter
     funktionieren, ohne dass zwei Farbwahrheiten nebeneinander existieren. */
  --bg-1: var(--k-grund);
  --bg-2: var(--k-grund-tief);
  --panel: var(--k-panel);
  --border: var(--k-linie);
  --border-strong: var(--k-linie-stark);
  --text: var(--k-text);
  --text-strong: var(--k-ink);
  --text-dim: var(--k-text-leise);
  --accent: var(--k-kobalt);
  --accent-soft: var(--k-flieder);
  --shadow: var(--k-schatten);
  --shadow-strong: 0 4px 14px rgba(22, 29, 56, 0.22);
  --radius: var(--k-r);
  --radius-lg: var(--k-r-gross);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  letter-spacing: 0.005em;
}

header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 5px 16px 5px 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  flex-shrink: 0;
}

.user-pill .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1 inherit;
  color: var(--text-strong);
}

.user-pill .credits {
  font: 600 13px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: var(--text-strong);
}

.user-pill .credits-dim {
  color: var(--text-dim);
  font-weight: 400;
}

.credit-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-left: auto;
}

.low-quality-hint {
  margin: 0 0 16px;
  padding: 10px 16px;
  font-size: 0.82rem;
  color: #8a5a1f;
  background: #fbf1de;
  border: 1px solid #ecd9b4;
  border-radius: 10px;
}

.credit-hint em {
  font-style: normal;
  opacity: 0.75;
}

.logo-full {
  height: 32px;
  width: auto;
  display: block;
}

.claim-line {
  margin: 8px 0 0;
  min-height: 1.2em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}

.claim-cursor {
  display: inline-block;
  width: 1px;
  margin-left: 1px;
  border-left: 2px solid var(--text-strong);
  animation: claim-blink 1s step-end infinite;
}

@keyframes claim-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .claim-cursor { animation: none; }
}

.subtitle {
  margin: 6px 0 0;
  max-width: 46ch;
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}

.mode-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  padding: 9px 20px;
  border-radius: var(--k-knopf-radius);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease;
}

.mode-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-strong);
}

/* ---------- Verfahren x Variante (Output-Wahl) ---------- */
.choice {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 28px 0 18px;
}

.choice .group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.choice .label {
  font: 600 0.68rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.seg {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--k-knopf-radius);
  padding: 3px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.seg button {
  border: 0;
  background: none;
  padding: 8px 18px;
  font: 500 0.82rem/1 inherit;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: var(--k-knopf-radius);
  transition: background 0.15s ease, color 0.15s ease;
}

.seg button.active {
  background: var(--accent-soft);
  color: var(--text-strong);
  font-weight: 600;
}

.seg button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.seg.seg-small { display: inline-flex; padding: 2px; }

.seg.seg-small button {
  padding: 5px 12px;
  font-size: 0.74rem;
}

.choice .hint {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.pdf-hint {
  color: inherit;
  font-weight: inherit;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px;
}

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 60px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, background 0.15s, padding 0.2s ease;
}

.dropzone:hover, .dropzone.drag {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone .hint {
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* Kompakter Zustand, sobald eine Datei geladen ist: Box wird etwas kleiner
   (weniger Innenabstand), aber der Beschreibungstext BLEIBT sichtbar - der
   Nutzer soll weiter sehen, dass er hier weitere Dateien ablegen kann
   (ausdrueckliche Vorgabe). Die separate Dateinamen-Zeile entfaellt; der
   Dateiname steht ohnehin im Arbeitsbereich (Vorschau + Namensfeld). */
.dropzone.compact {
  padding: 24px 20px;
  border-radius: var(--radius-lg);
}

/* Dateinamen-only-Zeile deaktiviert - Volltext bleibt in beiden Zustaenden. */
.dropzone-compact { display: none; }

/* Rechte-Bestaetigung (BRIEF_KALAMO_RECHTE_CHECKBOX.md) - dezent im Stil der
   uebrigen Labels, bewusst kein Warnbanner. */
.consent-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}

.consent-check input { margin-top: 2px; }

.consent-hint {
  margin: 10px 2px 0;
  font-size: 0.76rem;
  color: var(--text-dim);
}

.consent-hint a { color: var(--text-dim); }

.site-footer {
  max-width: 1100px;
  margin: 8px auto 24px;
  padding: 0 28px;
  font-size: 0.76rem;
}

.site-footer a { color: var(--text-dim); }

/* Block C.1: sobald script.js den Link nach #k-footer-legal-mount verschoben
   hat, ist dieser alte Footer leer - margin/padding auf einem leeren
   Element trieb das Dokument trotzdem 22px ueber die 100vh-Schale hinaus
   (Margin/Padding zaehlen auch ohne sichtbaren Inhalt). Ohne diese Klasse
   (z.B. JS deaktiviert) bleibt der alte Footer unveraendert sichtbar - der
   Link entfaellt so nie. */
.site-footer.k-legal-footer-emptied { margin: 0; padding: 0; }

#k-footer-legal-mount {
  position: absolute;
  left: var(--k-5);
  bottom: 6px;
  font-size: var(--k-t-mikro);
}
#k-footer-legal-mount a {
  color: var(--k-text-leise);
  font-size: var(--k-t-mikro);
  white-space: nowrap;
}
#k-footer-legal-mount a:focus-visible { outline: none; box-shadow: var(--k-fokus); border-radius: var(--k-r-klein); }

.progress-bar {
  margin-top: 10px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--text-dim);
  transition: width 0.2s ease;
}

.hidden { display: none !important; }

.workspace { margin-top: 24px; }

.color-switch {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow);
}

.color-switch .mode-btn {
  padding: 7px 18px;
  font-size: 0.78rem;
}

.preview-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.preview-pair figure {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  position: relative;
  box-shadow: var(--shadow);
}

.preview-pair figcaption {
  font-family: "Syne", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.preview-pair img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: zoom-in;
}

.loupe {
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  background-repeat: no-repeat;
  background-color: #fff;
  display: none;
  z-index: 20;
  /* P16 Teil A3: die Lupe zeigt jetzt BEIDE Fassungen uebereinander (siehe
     script.js setupLoupe()) - #k-loupe-ergebnis liegt als zweite Hinter-
     grundebene INNERHALB dieses Kreises, overflow:hidden sorgt dafuer, dass
     auch sie kreisrund abgeschnitten bleibt, nicht nur der eigene Hintergrund. */
  overflow: hidden;
}
/* Zweite Ebene der Lupe (Vorschau/Ergebnis), per clip-path auf den Teil
   rechts der lokal umgerechneten Trennlinie beschraenkt - siehe script.js
   setupLoupe()::place(). Dieselbe Technik wie .k-compare-result .k-compare-clip. */
.k-loupe-ergebnis {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

.variant-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}

.variant-check input {
  accent-color: var(--accent);
  cursor: pointer;
}

.stats {
  float: right;
  color: var(--text-strong);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.8rem;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.controls {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.control label {
  display: block;
  font-family: "Syne", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  color: var(--text-dim);
}

.control output {
  color: var(--text-strong);
  font-weight: 600;
}

/* Zierlicher, moderner Slider: duenne einfarbige Linie (Fuellstand per
   Verlauf), keine Outline/Border auf dem unausgewaehlten Teil, kleiner
   Punkt-Thumb statt der schweren Browser-Standardoptik. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--fill, 50%),
    var(--border-strong) var(--fill, 50%),
    var(--border-strong) 100%
  );
  outline: none;
  border: none;
  cursor: pointer;
  margin: 10px 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
  border: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  margin-top: -4.5px;
  box-shadow: 0 1px 3px rgba(39, 39, 90, 0.35);
  transition: transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Block A: outline:none oben (Zeile ~535) braucht einen Ersatz - IMMER
   sichtbarer Fokusring statt gar keinem. Gilt fuer ALLE Regler der Seite
   (Vektor/Batch/PDF/Kolorier-Duplikate), nicht nur die rechte Leiste. */
input[type="range"]:focus-visible {
  outline: none;
  box-shadow: var(--k-fokus);
  border-radius: 999px;
}
/* Dragging (Slider): waehrend der Maustaste gedrueckt gehalten wird, ist der
   Punkt sichtbar vergroessert - dasselbe visuelle Signal wie :hover, aber
   eigenstaendig pruefbar (kein reines Vermuten aus dem Hover-Wert). */
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.3); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.3); }

input[type="range"]::-moz-range-track {
  height: 2px;
  background: transparent;
  border: none;
}

input[type="range"]::-moz-range-progress {
  height: 2px;
  background: var(--accent);
  border: none;
  border-radius: 999px;
}

input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: 0 1px 3px rgba(39, 39, 90, 0.35);
}

input[type="range"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.export-row {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.name-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.name-field input[type="text"] {
  font-family: inherit;
  font-size: 0.82rem;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  min-width: 140px;
}

.btn {
  border: 1px solid var(--k-knopf-farbe);
  background: var(--panel);
  color: var(--k-knopf-farbe);
  padding: 11px 20px;
  border-radius: var(--k-knopf-radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn:hover:not(:disabled) {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn.primary {
  background: var(--k-knopf-farbe);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-strong);
}

.btn.primary:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(39, 39, 90, 0.36);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn.ghost {
  border-color: var(--k-knopf-farbe);
  background: transparent;
  color: var(--k-knopf-farbe);
  box-shadow: none;
}

/* P14 Abschnitt 3 (Block A): jeder Knopf im Bestand nutzt die Basisklasse
   .btn - ob er inzwischen eine eigene k-*-Huelle mit eigenem Fokusring hat
   (spezifischere Regel gewinnt, siehe P14_FUNDAMENT.md Spezifitaets-Falle)
   oder nicht (z.B. "Datei waehlen"/"Farbschema"/"Palette aus Bild", Modal-
   Knoepfe, Push-Hinweis) - hier bekommt JEDER .btn einen sichtbaren
   Fokusring als Grundsicherung, kein outline:none ohne Ersatz. */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--k-fokus);
}
.btn.primary:focus-visible {
  box-shadow: var(--k-fokus), 0 6px 20px rgba(39, 39, 90, 0.36);
}

.push-hint-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--text-strong);
  color: #fff;
  padding: 14px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-strong);
  z-index: 50;
  font-size: 0.85rem;
}

.push-hint-bar .btn.primary {
  background: #fff;
  color: var(--text-strong);
  padding: 8px 16px;
}

.push-hint-bar .btn.ghost {
  color: rgba(255, 255, 255, 0.75);
  padding: 8px 10px;
}

.batch-list {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

.batch-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.batch-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-dim);
}

.batch-list li:last-child { border-bottom: none; }

.pdf-gallery {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

.pdf-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pdf-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.pdf-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s;
}

.pdf-item:hover, .pdf-item.editing {
  border-color: var(--accent);
}

.pdf-item img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  display: block;
  margin-bottom: 6px;
}

.pdf-item-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.pdf-item-label input { accent-color: var(--accent); cursor: pointer; }

.pdf-item-name {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-family: inherit;
  font-size: 0.72rem;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.pdf-item-credit {
  display: inline-block;
  margin-top: 4px;
  font: 600 0.68rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-strong);
}

select {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.85rem;
}

/* ---------- Kolorieren (BRIEF_KALAMO_FARBE_FLAECHENMODELL.md) ---------- */

.kolorier-palette-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: -6px 0 18px;
}

.kolorier-palette-bar .label {
  font: 600 0.68rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* P7-Nachzug (Auftrag Punkt 4): der Trigger-Knopf ersetzt das alte
   <select> - zeigt die aktive Palette (Farbkreise + Name) kompakt in der
   Leiste, oeffnet per Klick die visuelle Zeilenliste (Modal). */
.kolorier-palette-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
}
.kolorier-palette-trigger:hover { border-color: var(--accent); }
.kolorier-palette-trigger-swatches {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* Kompaktere Kreise NUR im Trigger (statt der vollen 30px) - sieben
   Rollenkreise plus Name muessen dort in einer einzeiligen Leiste bleiben;
   Leiste (#kolorier-palette-swatches) und Zeilenliste behalten die volle,
   mit dem Farbschema-Panel konsistente Groesse. */
.kolorier-palette-trigger-swatches .kolorier-swatch {
  width: 18px;
  height: 18px;
}
.kolorier-palette-trigger-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-strong);
}
.kolorier-palette-trigger-caret {
  color: var(--text-dim);
  font-size: 0.7rem;
}

/* ---------- Paletten-Liste (Modal, ersetzt den alten "Paletten
   verwalten"-Dialog - P7-Nachzug) ---------- */
.kolorier-palette-list-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.kolorier-palette-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.kolorier-palette-row:hover { border-color: var(--accent); }
.kolorier-palette-row.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--accent-soft);
}
.kolorier-palette-row-swatches {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kolorier-palette-row-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-strong);
  min-width: 100px;
}
.kolorier-palette-row-actions {
  display: flex;
  gap: 6px;
  /* Zeilen-Kontextaktionen (Umbenennen/Loeschen) sollen nicht die
     Paletten-Auswahl ausloesen - siehe script.js-Listener (prueft Rename-/
     Delete-Knopf VOR dem Zeilen-Klick per closest()). */
}

.kolorier-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Farbkreis als Klick-Button (Zuweisungs-Leiste) ODER reines Vorschau-Chip
   (Paletten-Leiste oben, dort aria-hidden/nicht klickbar). */
.kolorier-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.kolorier-swatch:hover { transform: scale(1.12); }

.kolorier-swatch.active {
  box-shadow: 0 0 0 2px var(--accent);
  transform: scale(1.12);
}

.kolorier-swatch.weiss { background: #fff; }
.kolorier-swatch.text-label {
  width: auto;
  height: 30px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
  display: inline-flex;
  align-items: center;
}

/* P7-Nachzug: Rollen-Farbkreise (Paletten-Leiste, Trigger-Knopf, visuelle
   Zeilenliste) sind per Doppelklick editierbar - dieselbe Stift-Andeutung
   wie kolorier_farbwaehler.css's .kfw-editable-swatch (dortiger Kommentar),
   hier auf .kolorier-swatch als geteilter Basis-Klasse aufgesetzt, damit
   BEIDE Module (script.js UND kolorier_farbwaehler.js) sie nutzen koennen. */
.kolorier-swatch-editable {
  cursor: pointer;
  position: relative;
}
.kolorier-swatch-editable::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px dashed transparent;
  transition: border-color 0.15s ease;
}
.kolorier-swatch-editable:hover::after { border-color: var(--accent); }

/* Unbesetzte Rolle (noch keine Farbe zugewiesen) - gleiches Schraffur-Muster
   wie kolorier_farbwaehler.css's .kfw-rollen-swatch.unbesetzt. */
.kolorier-swatch-unbesetzt {
  background: repeating-linear-gradient(
    45deg, var(--bg-2), var(--bg-2) 4px, var(--border) 4px, var(--border) 8px
  );
}

.kolorier-referenz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.kolorier-preview-pair img { height: 460px; }

.kolorier-preview-wrap { position: relative; }

/* Spezifischer als ".preview-pair img" (dessen cursor:zoom-in sonst gewinnt -
   gleiche Selektor-Gewichtsklasse, aber ".preview-pair img" kommt zuerst und
   hat ein Element plus eine Klasse vs. hier nur eine Klasse). */
.kolorier-preview-pair img.kolorier-clickable { cursor: crosshair; }

.kolorier-region-box {
  position: absolute;
  border: 2px dashed var(--accent);
  border-radius: 4px;
  background: rgba(74, 81, 120, 0.08);
  pointer-events: none;
  transition: left 0.1s ease, top 0.1s ease, width 0.1s ease, height 0.1s ease;
}

/* F1-Fix (BRIEF_KALAMO_FARBE_QUALITAET_FIX.md): Ersatzsignal fuer die
   entfernte Dauer-Toenung unkolorierter Flaechen - beim Hover zeigt dieses
   SVG NUR den Umriss der Flaeche unter dem Cursor. viewBox wird in
   script.js dynamisch auf die Bild-Pixelmasse gesetzt, die Polygon-Punkte
   vom Server (region_outline_polygon) sind bereits in genau diesem
   Koordinatensystem - kein manuelles Skalieren der Punkte noetig. */
.kolorier-hover-outline {
  position: absolute;
  pointer-events: none;
}

.kolorier-hover-outline polygon {
  fill: rgba(74, 81, 120, 0.14);
  stroke: var(--accent);
  stroke-width: 6;
  vector-effect: non-scaling-stroke;
}

/* NOTFALL-Fix ("Ich klicke und es passiert nichts"): kurzes Aufblitzen der
   gerade gefaerbten Flaeche - dasselbe Polygon-Overlay-Prinzip wie
   .kolorier-hover-outline, aber ein eigenes Element (siehe script.js
   flashRegion()), damit die Maus-Hover-Anzeige das Aufblitzen nicht
   mittendrin abschneidet. */
.kolorier-assign-flash polygon {
  fill: rgba(58, 168, 107, 0.32);
  stroke: rgba(43, 138, 87, 0.9);
  stroke-width: 8;
  vector-effect: non-scaling-stroke;
  animation: kolorier-flash-pulse 0.6s ease-out;
}

@keyframes kolorier-flash-pulse {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

/* Kurzer Hinweis-Toast statt stillem Nichtstun bei einem Pick-404 (z.B.
   echter Hintergrund-Klick) - fest positioniert, unabhaengig vom Scroll-
   Zustand, damit er auch bei einer langen Seite sicher sichtbar ist. */
/* Bewusst NICHT die globale .hidden-Klasse (display:none !important) fuer
   den Sichtbarkeits-Wechsel - die wuerde die opacity-transition unten
   sofort abwuergen (display ist nicht animierbar), der Toast wuerde nur
   noch hart an/aus springen statt einzublenden. Start-/Endzustand daher
   ueber eine eigene Klasse. */
.kolorier-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--k-ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--k-r);
  font-size: var(--k-t-basis);
  box-shadow: var(--k-schatten-canvas);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.kolorier-toast.kolorier-toast-show { opacity: 1; }

/* Block A (Error): derselbe Toast-Mechanismus zeigt auch echte Fehler
   (script.js ruft zeigeToast(data.error) bei fehlgeschlagenen Requests,
   siehe z.B. Zeile 1745/1796/1809) - eine eigene Klasse faerbt NUR diesen
   Fall in die Token-Fehlerfarbe, statt jeden Hinweis rot zu machen (die
   meisten Toasts sind neutrale Rueckmeldungen, kein Fehler). */
.kolorier-toast.kolorier-toast-error { background: var(--k-rot); }

.kolorier-assign-bar {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

.kolorier-assign-bar .hint { color: var(--text-dim); font-size: 0.82rem; }

/* P9: Startvorschlag-Banner - dieselbe Panel-Sprache wie .kolorier-assign-
   bar (Flaeche/Radius/Schatten), aber mit --accent-soft eingefaerbt, damit
   sie sich klar als "hier ist automatisch etwas passiert" von der neutralen
   Werkzeugleiste absetzt, ohne wie ein Fehler/eine Warnung zu wirken. */
.kolorier-vorschlag-banner {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 18px;
  color: var(--accent);
  font-size: 0.86rem;
}

.kolorier-vorschlag-banner .btn.ghost {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- Paletten-Dialog (Modal) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(56, 62, 99, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-box {
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  padding: 26px 28px;
  max-width: 480px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
}

.modal-box h3 {
  margin: 0 0 14px;
  font-family: "Syne", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1rem;
}

.modal-box h4 {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.modal-box hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

.modal-box p { margin: 12px 0; }

.kolorier-hex-input {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  width: 74px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  text-transform: uppercase;
}

.kolorier-remove-color {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 6px;
}

/* ===========================================================================
   P14 Abschnitt 1 — neue Schale (Kopfleiste, linke/rechte Leiste, Canvas,
   Fussleiste) + Vektor-Modus-Migration. Nur k-Tokens, kein Hex im Selektor.
   Der Kolorier-Modus (kolorier_*.css) bleibt unveraendert und "alt" - er
   sitzt einfach in der Canvas-Spalte dieser Schale (Abschnitt 2 baut ihn
   ins rechte Panel um). ======================================================= */

html, body { height: 100%; }

.k-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--k-grund);
  overflow: hidden; /* kein Seitenscroll der Schale selbst - die Canvas-Spalte scrollt bei Bedarf innen */
}

/* -------- Kopfleiste -------- */
.k-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-4);
  height: 52px;  /* Flora 07.10.2026: Menuezeile 33 % niedriger (78 -> 52 px) */
  padding: 0 var(--k-5);
  background: var(--k-panel);
  border-bottom: 1px solid var(--k-linie);
}

.k-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--k-2);
  flex: 1 1 0;
  min-width: 0;
}

/* Entscheidung 122: Logo = Link zur Landingpage; sieht aus wie vorher (Zeichen + Schriftzug nebeneinander) */
.k-logo-link { display: flex; align-items: center; gap: var(--k-2); flex-shrink: 0; color: inherit; text-decoration: none; border-radius: var(--k-r-klein); }
.k-logo-link:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-logo-icon { width: 26px; height: 26px; display: block; flex-shrink: 0; }

.k-logo-word {
  font-family: "Syne", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--k-ink);
}

/* Der Typewriter-Claim ("Every pixel gets a say.", script.js ganz unten)
   ist in Floras Zielbild nicht vorgesehen und steht auch nicht auf der
   Liste "verbindlich zu erhaltender Funktionen" des Kopfbereichs (nur
   Logo/Dateiname/Speicherstatus/Avatar/Credits/Chevron) - er lief bisher
   als zweite Zeile unter einem groesseren Logo, das es in der neuen,
   kompakteren Kopfleiste nicht mehr gibt. Element + Typewriter-Skript
   bleiben FUNKTIONAL unangetastet (keine Funktion entfaellt), nur visuell
   verborgen, damit er die einzeilige Kopfleiste nicht sprengt. */
.k-claim-line { display: none; }

.k-topbar-center {
  display: flex;
  align-items: center;
  gap: var(--k-2);
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  font-size: var(--k-t-basis);
}

.k-werkname {
  color: var(--k-text-leise);
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-topbar-sep { color: var(--k-linie-stark); }

.k-speicherstatus {
  display: inline-flex;
  align-items: center;
  gap: var(--k-1);
  color: var(--k-text-leise);
}

.k-speicherstatus-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--k-gruen);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.k-speicherstatus-check svg { width: 10px; height: 10px; }

.k-account {
  flex: 1 1 0;
  justify-content: flex-end;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: var(--k-1) var(--k-2);
  border-radius: var(--k-r-gross);
}
.k-account:hover { background: var(--k-grund-tief); }
.k-account:focus-visible { outline: none; box-shadow: var(--k-fokus); }

.k-account .avatar {
  width: 36px;
  height: 36px;
  background: var(--k-flieder);
  color: var(--k-kobalt);
  font-weight: 700;
  font-size: 13px;
}

.k-account .credits {
  color: var(--k-ink);
  font-weight: 600;
  font-size: 15px;
}
.k-account .credits-dim { color: var(--k-text-leise); }

.k-chevron { color: var(--k-text-leise); width: 14px; height: 14px; }

/* -------- Gesamt-Koerper (drei Spalten) -------- */
.k-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0; /* Kind darf innerhalb der festen Schalen-Hoehe scrollen */
}

.k-sidebar-left {
  flex: 0 0 285px;
  display: flex;
  flex-direction: column;
  gap: var(--k-4);
  padding: var(--k-4);
  background: var(--k-grund);
  border-right: 1px solid var(--k-linie);
  overflow: hidden; /* Spalte bleibt fest; nur .k-werke-liste scrollt */
}

.k-sidebar-right {
  flex: 0 0 335px;
  background: var(--k-grund);
  border-left: 1px solid var(--k-linie);
  overflow-y: auto;
}

.k-canvas-col {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--k-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* -------- Linke Leiste -------- */
.k-newfile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-2);
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--k-knopf-radius);
  background: var(--k-knopf-farbe);
  color: #fff;
  font: 600 var(--k-t-basis)/1 inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.k-newfile-btn:hover { background: var(--k-kobalt-tief); }
.k-newfile-btn:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-newfile-btn svg { width: 16px; height: 16px; }

.k-file-preview {
  height: 155px;
  border-radius: var(--k-r-gross);
  background: var(--k-panel);
  border: 2px solid var(--k-kobalt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--k-3);
  overflow: hidden;
  /* P16 Teil B4: containing block fuer die Mini-Zuschnittwerkstatt
     (#crop-workspace.crop-mini, siehe crop.css/crop.js zeigeMini()), die
     hier per appendChild hineinwandert und sich absolut ueber die Karte legt. */
  position: relative;
}
.k-file-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.k-file-preview-empty {
  font-size: var(--k-t-klein);
  color: var(--k-text-leise);
  text-align: center;
  padding: 0 var(--k-3);
}

.k-divider { height: 1px; background: var(--k-linie); margin: 0; flex-shrink: 0; }

.k-modes { display: flex; flex-direction: column; gap: var(--k-1); }

.k-mode-row {
  display: flex;
  align-items: center;
  gap: var(--k-3);
  height: 46px;
  padding: 0 var(--k-3);
  border: none;
  border-radius: var(--k-r);
  background: transparent;
  color: var(--k-text);
  font: 500 var(--k-t-basis)/1 inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.k-mode-row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--k-text-leise); }
.k-mode-row:hover { background: var(--k-grund-tief); }
.k-mode-row:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-mode-row.active {
  background: var(--k-flieder);
  color: var(--k-kobalt);
  font-weight: 600;
}
.k-mode-row.active svg { color: var(--k-kobalt); }

.k-section-title {
  margin: 0;
  font-size: var(--k-t-klein);
  color: var(--k-text-leise);
  font-weight: 400;
}

.k-presets { display: flex; flex-direction: column; gap: var(--k-1); }

.k-preset-row {
  display: flex;
  align-items: flex-start;
  gap: var(--k-3);
  padding: var(--k-2) var(--k-3);
  border: none;
  border-radius: var(--k-r);
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.k-preset-row svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--k-text-leise); }
.k-preset-row:hover { background: var(--k-grund-tief); }
.k-preset-row:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-preset-row.active { background: var(--k-flieder); }
.k-preset-row.active svg { color: var(--k-kobalt); }
.k-preset-text { display: flex; flex-direction: column; gap: 1px; }
.k-preset-title { font-size: var(--k-t-basis); font-weight: 600; color: var(--k-ink); }
.k-preset-sub { font-size: var(--k-t-klein); color: var(--k-text-leise); }

.k-sidebar-spacer { flex: 1 1 auto; }

.k-help-row {
  display: flex;
  align-items: center;
  gap: var(--k-3);
  height: 44px;
  padding: 0 var(--k-3);
  border: none;
  border-top: 1px solid var(--k-linie);
  background: transparent;
  color: var(--k-text);
  font: 500 var(--k-t-basis)/1 inherit;
  cursor: pointer;
  width: 100%;
  border-radius: 0;
}
.k-help-row svg:first-child { width: 18px; height: 18px; color: var(--k-text-leise); }
.k-help-row .k-chevron { margin-left: auto; }
.k-help-row:hover { color: var(--k-kobalt); }
.k-help-row:focus-visible { outline: none; box-shadow: var(--k-fokus); }

/* -------- Canvas-Spalte -------- */
.k-canvas-card {
  flex: 1 1 auto;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  background: var(--k-canvas);
  border: 1px solid var(--k-linie);
  border-radius: var(--k-r-gross);
  box-shadow: var(--k-schatten-canvas);
  padding: var(--k-5);
  position: relative;
  overflow: hidden;
}

.k-compare {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--k-r);
  touch-action: none;
}

.k-compare-viewport {
  position: absolute;
  inset: 0;
  transform-origin: center center;
}

.k-compare-figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.k-compare-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: default;
}

.k-compare-clip {
  position: absolute;
  inset: 0;
}

.k-compare-result .k-compare-clip {
  clip-path: inset(0 0 0 var(--k-split, 50%));
}

.k-chip {
  position: absolute;
  top: var(--k-3);
  z-index: 4;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--k-grund-tief);
  color: var(--k-text);
  font-size: var(--k-t-mikro);
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.k-chip-left { left: var(--k-3); }
.k-chip-right { right: var(--k-3); }
.k-compare .stats.k-visually-hidden { display: none; }

.k-compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Klare schwarze Linie: vorher weiss (#fff) - auf einer Tuschezeichnung
     mit weissem Grund war der Regler dadurch schlicht unsichtbar. Ink statt
     eines rohen Hex-Werts, damit die Linie auch im dunklen Modus traegt. */
  width: 2px;
  background: var(--k-ink);
  z-index: 5;
  transform: translateX(-1px);
  pointer-events: none;
}

.k-compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--k-linie-stark);
  box-shadow: var(--k-schatten);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k-text);
  cursor: col-resize;
  pointer-events: all;
}
.k-compare-handle svg { width: 16px; height: 16px; }
.k-compare-handle:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-compare-handle:active { cursor: col-resize; }
/* Dragging (Vergleichsregler): script.js setzt/entfernt diese Klasse bei
   pointerdown/-up/-cancel (siehe dort) - eigenstaendiges Signal, kein reines
   Vermuten aus :active (das griffe bei Touch nicht zuverlaessig). */
.k-compare-handle.dragging {
  border-color: var(--k-kobalt);
  box-shadow: var(--k-fokus);
  transform: translate(-50%, -50%) scale(1.06);
}

/* Lupen-Querband (BRIEF_LUPE_QUERBAND, Flora 31.08.): erscheint NUR waehrend
   des Ziehens am Vergleichsregler (script.js setupScanBand()) - ersetzt fuer
   die Dauer des Ziehens die runde Lupe (die sich bereits waehrend "dragging"
   versteckt, siehe .loupe/.k-loupe-ergebnis oben und Commit b76c697). Ein
   waagrechtes, vergroessertes Band auf Maushoehe, zentriert auf die
   Trennlinie. Gleicher z-index wie .k-compare-line, aber VOR ihr im Markup
   eingehaengt, damit Trennlinie/Griff beim Ziehen sichtbar obenauf bleiben
   (Stapelreihenfolge bei gleichem z-index folgt der DOM-Reihenfolge).
   scaleY(0)->1 statt display:none/block: "der aufmacht, wenn ich es ziehe"
   (Floras Wortlaut) - kurze Oeffnungs-Bewegung statt hartem Einblenden, und
   getComputedStyle bleibt waehrenddessen messbar (kein display:none-
   Fallstrick). */
.k-scan-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transform: scaleY(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.k-scan-band.open {
  transform: scaleY(1);
  opacity: 1;
}
.k-scan-band-original,
.k-scan-band-result {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-color: #fff;
}
/* Fest auf 50% statt einer pro Frame berechneten Prozentzahl: Original- und
   Ergebnis-Ebene bekommen in script.js IMMER dieselbe background-position
   (dieselbe Formel, kein zweiter Rechenweg der auseinanderlaufen koennte) -
   die Naht sitzt dadurch per Konstruktion exakt in der Bandmitte. */
.k-scan-band-result {
  clip-path: inset(0 0 0 50%);
}
.k-scan-band-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--accent);
  transform: translateX(-1px);
}

.k-canvas-controls {
  position: absolute;
  left: var(--k-5);
  bottom: var(--k-5);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--k-2);
}

.k-canvas-btn {
  height: 40px;
  min-width: 40px;
  padding: 0 var(--k-2);
  border-radius: var(--k-knopf-radius);
  background: #fff;
  border: 1px solid var(--k-linie-stark);
  box-shadow: var(--k-schatten);
  color: var(--k-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.k-canvas-btn:hover { background: var(--k-grund-tief); }
.k-canvas-btn:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-canvas-btn[aria-pressed="true"] {
  background: var(--k-flieder);
  color: var(--k-kobalt);
  border-color: var(--k-kobalt);
}
.k-canvas-btn svg { width: 18px; height: 18px; }

.k-zoom-group {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: var(--k-r);
  background: #fff;
  border: 1px solid var(--k-linie-stark);
  box-shadow: var(--k-schatten);
  overflow: hidden;
}
.k-zoom-btn {
  height: 40px;
  width: 34px;
  border: none;
  background: transparent;
  color: var(--k-text);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.k-zoom-btn:hover { background: var(--k-grund-tief); }
.k-zoom-btn:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-zoom-value {
  min-width: 46px;
  text-align: center;
  font-size: var(--k-t-klein);
  color: var(--k-text);
  border-left: 1px solid var(--k-linie);
  border-right: 1px solid var(--k-linie);
  padding: 0 var(--k-2);
}

/* Rest der urspruenglichen Arbeitsbereiche (Batch/PDF/Crop/Kolorieren) sitzt
   unveraendert unter der Vektor-Canvas-Karte in derselben Spalte - eigener
   Abstand nach oben, damit sie nicht an der Karte kleben. */
.k-canvas-col > .workspace,
.k-canvas-col > .batch-list,
.k-canvas-col > .pdf-gallery,
.k-canvas-col > .pdf-progress,
.k-canvas-col > .controls#batch-controls,
.k-canvas-col > .controls#pdf-controls {
  margin-top: var(--k-5);
}
.k-canvas-col > #workspace.workspace { margin-top: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.k-canvas-col > #dropzone,
.k-canvas-col > .choice,
.k-canvas-col > #kolorier-palette-bar,
.k-canvas-col > #consent-gate,
.k-canvas-col > #consent-hint {
  flex: 0 0 auto;
}

/* -------- Rechte Leiste (Vektor-Panel) -------- */
.k-panel { padding: var(--k-4); display: flex; flex-direction: column; gap: var(--k-4); }

.k-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.k-panel-title-row h2 {
  margin: 0;
  font-family: "Syne", "Helvetica Neue", Helvetica, sans-serif;
  font-size: var(--k-t-gross);
  font-weight: 600;
  color: var(--k-ink);
}

.k-icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--k-knopf-radius);
  color: var(--k-text-leise);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.k-icon-btn:hover { background: var(--k-grund-tief); color: var(--k-ink); }
.k-icon-btn:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-icon-btn svg { width: 18px; height: 18px; }

.k-row-livepreview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--k-t-basis);
  color: var(--k-text);
}

.k-toggle {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: var(--k-linie-stark);
  position: relative;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.k-toggle:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 29, 56, 0.25);
  transition: transform 0.15s ease;
}
.k-toggle[aria-checked="true"] { background: var(--k-kobalt); }
.k-toggle[aria-checked="true"] .k-toggle-knob { transform: translateX(20px); }

.k-stats-tile {
  display: flex;
  background: var(--k-panel);
  border: 1px solid var(--k-linie);
  border-radius: var(--k-r);
}
.k-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--k-3) var(--k-2);
}
.k-stat:first-child { border-right: 1px solid var(--k-linie); }
.k-stat-num {
  font: 600 var(--k-t-zahl)/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: var(--k-kobalt);
}
.k-stat-label { font-size: var(--k-t-klein); color: var(--k-text-leise); }

.k-slider-row { display: flex; flex-direction: column; gap: var(--k-2); }
.k-slider-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-2);
}
.k-slider-row-head label {
  font-size: var(--k-t-basis);
  color: var(--k-ink);
  font-weight: 500;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}
.k-numfield {
  width: 62px;
  height: 32px;
  border: 1px solid var(--k-linie-stark);
  border-radius: var(--k-r-klein);
  background: #fff;
  color: var(--k-ink);
  text-align: center;
  font: 600 var(--k-t-basis)/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  padding: 0 var(--k-1);
}
.k-numfield:focus-visible { outline: none; box-shadow: var(--k-fokus); border-color: var(--k-kobalt); }

/* Regler in der rechten Leiste teilen sich die globale input[type=range]-
   Optik (weiter oben in dieser Datei, gemappt auf --accent = --k-kobalt) -
   hier nur die Spurfarbe/Rahmen praezisiert. */
.k-panel input[type="range"] {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--k-kobalt) 0%, var(--k-kobalt) var(--fill, 50%),
    var(--k-linie) var(--fill, 50%), var(--k-linie) 100%);
  margin: 4px 0 0;
}
.k-panel input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  background: var(--k-kobalt);
  border: 2px solid #fff;
  box-shadow: var(--k-schatten);
  margin-top: -5px;
}
.k-panel input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--k-kobalt);
  border: 2px solid #fff;
}

.k-advanced { border-top: 1px solid var(--k-linie); padding-top: var(--k-3); }
.k-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  font: 500 var(--k-t-basis)/1 inherit;
  color: var(--k-text);
  cursor: pointer;
}
.k-advanced-toggle:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-advanced-toggle .k-chevron { transition: transform 0.15s ease; }
.k-advanced-toggle[aria-expanded="true"] .k-chevron { transform: rotate(180deg); }
/* P16 Teil B3: "Erweitert" ist immer aufgeklappt, kein Chevron mehr - der
   Knopf bleibt im DOM (Waechter-Test-Vorsicht), wirkt aber nur noch als
   Abschnitts-Ueberschrift (kein Cursor-Pointer/Hover, nicht fokussierbar -
   siehe tabindex="-1" im Template). */
.k-advanced-toggle-fest { cursor: default; font-weight: 600; }
.k-advanced-body {
  margin-top: var(--k-3);
  display: flex;
  flex-direction: column;
  gap: var(--k-3);
}
/* Die verschobenen Original-.control-Bloecke (Schwelle/Farbanzahl/
   Wiederherstellung/Ausgabe) behalten ihre alte Struktur/Beschriftung im
   "Erweitert"-Bereich - hier nur die Panel-Optik statt der alten Karten-
   Optik (kein doppelter Rahmen-in-Rahmen). */
.k-advanced-body .control {
  padding: 0;
}
.k-advanced-body .control label {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--k-t-klein);
  color: var(--k-text-leise);
  font-weight: 500;
}

/* -------- Fussleiste -------- */
.k-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--k-5);
  height: 92px;
  padding: 0 var(--k-5);
  background: var(--k-panel);
  border-top: 1px solid var(--k-linie);
}

.k-footer-filename { display: flex; flex-direction: column; gap: var(--k-1); }
.k-footer-filename label {
  font-size: var(--k-t-klein);
  color: var(--k-text-leise);
}
.k-filename-field {
  position: relative;
  width: 230px;
}
.k-filename-field input[type="text"] {
  width: 100%;
  height: 38px;
  padding: 0 32px 0 var(--k-2);
  border: 1px solid var(--k-linie-stark);
  border-radius: var(--k-r);
  background: #fff;
  color: var(--k-text);
  font: var(--k-t-basis)/1 inherit;
}
.k-filename-field input[type="text"]:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-filename-field svg {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--k-text-leise);
  pointer-events: none;
}

.k-footer-format { display: flex; flex-direction: column; gap: var(--k-1); }
.k-footer-format-label { font-size: var(--k-t-klein); color: var(--k-text-leise); }
.k-format-seg {
  display: flex;
  border-radius: var(--k-knopf-radius);
  overflow: hidden;
  border: 1px solid var(--k-linie-stark);
}
.k-format-seg button {
  border: none;
  border-right: 1px solid var(--k-linie-stark);
  background: #fff;
  color: var(--k-text);
  padding: 8px 16px;
  font: 500 var(--k-t-basis)/1 inherit;
  cursor: pointer;
}
.k-format-seg button:last-child { border-right: none; }
.k-format-seg button.active { background: var(--k-kobalt); color: #fff; font-weight: 600; }
.k-format-seg button:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-format-seg button:disabled { opacity: 0.4; cursor: not-allowed; }

.k-footer-actions { display: flex; align-items: center; gap: var(--k-3); margin-left: auto; }

.k-export-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--k-2);
  height: 52px;
  padding: 0 var(--k-5);
  border: none;
  border-radius: var(--k-knopf-radius);
  background: var(--k-knopf-farbe);
  color: #fff;
  font: 600 var(--k-t-basis)/1 inherit;
  cursor: pointer;
}
.k-export-btn:hover:not(:disabled) { background: var(--k-kobalt-tief); }
.k-export-btn:focus-visible { outline: none; box-shadow: var(--k-fokus); }
.k-export-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.k-export-btn svg { width: 16px; height: 16px; }

/* Block A "Export laeuft": wiederverwendet dieselbe Spin-Animation wie
   .spinner (style.css oben, @keyframes spin) statt eine zweite zu bauen -
   nur als kleiner Ring VOR dem Label, der Knopf bleibt disabled/opak-normal
   lesbar statt komplett zu verblassen (Disabled-Optik ist ein ANDERER
   Zustand als Loading). */
.k-export-btn.k-loading,
.k-footer-kolorier-group .btn.primary#kolorier-export.k-loading,
#kolorier-export-zip.k-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.k-export-btn.k-loading svg,
.k-footer-kolorier-group .btn.primary#kolorier-export.k-loading svg,
#kolorier-export-zip.k-loading svg { visibility: hidden; }
.k-export-btn.k-loading::after,
.k-footer-kolorier-group .btn.primary#kolorier-export.k-loading::after,
#kolorier-export-zip.k-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
#kolorier-export-zip.k-loading::after {
  border: 2px solid var(--k-linie-stark);
  border-top-color: var(--k-kobalt);
}

.k-legacy-export-btn { display: none !important; }

/* Block B: Drawer-Toggles/Schliessen-Knopf existieren im DOM auf JEDER
   Breite, sind aber nur unter 960px sichtbar - Desktop und "Reduzierte
   Breite" zeigen beide Leisten weiterhin inline, dort braucht es die
   Knoepfe nicht. display:none HIER (ausserhalb jeder Media-Query) ist der
   Default; die Media-Query bei 960px unten schaltet auf inline-flex zurueck.
   Der Scrim braucht keine eigene Regel hier - er startet per HTML-Attribut
   "hidden" verborgen (index.html), das wirkt unabhaengig von der Breite. */
.k-drawer-toggle, .k-drawer-close { display: none; }

/* ===========================================================================
   P14 Abschnitt 3 (Block B): Responsive Verhalten, drei Stufen unter dem
   1536px-Zielbild (siehe P14_FUNDAMENT.md "Gesamtaufteilung"). Grenzen an
   den BESTEHENDEN Breakpoints der Kolorier-/Crop-Module ausgerichtet (768px
   ist der scharfe Uebergang dort UND hier - "in Einklang bringen" statt
   einen vierten, unabhaengigen Wert zu erfinden):
     > 1200px  Desktop  - Zielbild unveraendert.
    961-1200px Reduzierte Breite - Leisten schmaler, Canvas behaelt Prioritaet,
                keine Funktion verschwindet (alles bleibt inline sichtbar).
     769-960px Tablet   - Leisten ein-/ausklappbar (Drawer/Bottom-Sheet, siehe
                #k-drawer-files-btn/#k-drawer-tools-btn in script.js), Canvas
                zentral und immer sichtbar, Export bleibt in der Fussleiste
                dauerhaft erreichbar (die Fussleiste ist NIE Teil der
                Leisten-Umklappung).
       <=768px Mobile   - dieselbe Drawer-Mechanik wie Tablet (kein separater
                Mechanismus noetig - "Canvas zuerst, Einstellungen als Drawer/
                Bottom-Sheet" gilt fuer beide), ZUSAETZLICH greifen ab hier
                die bestehenden 44px-Trefferflaechen-Regeln aus kolorier_
                touch.css/crop.css (ebenfalls <=768px - siehe deren Kopf-
                kommentare) und kolorier_farbwaehler.css ab 480px darunter.
   ============================================================================ */

/* -------- Stufe 1: Reduzierte Breite (961-1200px) -------- */
@media (max-width: 1200px) {
  .k-sidebar-left { flex-basis: 240px; }
  .k-sidebar-right { flex-basis: 280px; }
}

/* -------- Stufe 2+3: Tablet + Mobile (<=960px) - Drawer-Mechanik --------
   Ab hier sind .k-sidebar-left/-right per Default AUSSERHALB des Viewports
   (transform), keine Layoutbreite mehr - die Canvas-Spalte bekommt dadurch
   automatisch die volle Breite ("Canvas behaelt Prioritaet"/"Canvas
   zentral"). .k-drawer-toggle-Knoepfe (nur hier sichtbar) und
   .k-drawer-open-left/-right (auf <body>, siehe script.js) schalten je EINE
   Leiste sichtbar. Keine Funktion entfaellt: beide Leisten bleiben im DOM,
   vollstaendig bedienbar, nur ihre Sichtbarkeit ist an einen Klick
   gebunden statt permanent Platz zu beanspruchen. */
@media (max-width: 960px) {
  .k-drawer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: var(--k-r);
    color: var(--k-ink);
    cursor: pointer;
    flex-shrink: 0;
    position: relative; overflow: hidden; /* verstecktes Label nicht ueber den Rand (1 px Seitenbreite am Handy) */
  }
  .k-drawer-toggle svg { width: 20px; height: 20px; }
  .k-drawer-toggle:hover { background: var(--k-grund-tief); }
  .k-drawer-toggle:focus-visible { outline: none; box-shadow: var(--k-fokus); }
  .k-drawer-toggle[aria-expanded="true"] { background: var(--k-flieder); color: var(--k-kobalt); }

  /* Kopfleiste ist auf Schmalformaten enger - Dateiname/Status duerfen
     schrumpfen, die Bedienknoepfe (Drawer-Toggles, Logo, Konto) nicht: ohne
     flex-shrink:0 wuerde der Flex-Algorithmus sonst .k-topbar-left (Logo)
     schrumpfen (Inhalt ueberlief dabei sichtbar seine eigene Box und
     ueberlagerte optisch den Drawer-Knopf daneben - genau der Fehler, den
     ein getComputedStyle()-Nachweis auffangen soll: Breite der Box war
     59px, der Inhalt "KALAMO" braucht deutlich mehr). */
  .k-topbar { padding: 0 var(--k-3); gap: var(--k-2); }
  .k-topbar-left { flex: 0 0 auto; }
  .k-drawer-toggle { flex-shrink: 0; }
  .k-account { flex-shrink: 0; }
  .k-topbar-center { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .k-claim-line { display: none; }

  .k-body { position: relative; overflow: visible; }
  .k-canvas-col { flex: 1 1 auto; width: 100%; padding: var(--k-4); }

  .k-sidebar-left,
  .k-sidebar-right {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 60;
    max-height: none;
    box-shadow: var(--k-schatten-canvas);
    transition: transform 0.2s ease;
  }
  .k-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    align-self: flex-end;
    border: none;
    background: transparent;
    color: var(--k-text-leise);
    border-radius: var(--k-r);
    cursor: pointer;
    margin-bottom: var(--k-2);
  }
  .k-drawer-close:hover { background: var(--k-grund-tief); }
  .k-drawer-close:focus-visible { outline: none; box-shadow: var(--k-fokus); }

  /* Links: echter Drawer, schiebt von links ein. */
  .k-sidebar-left {
    left: 0;
    width: min(320px, 86vw);
    transform: translateX(-100%);
  }
  /* Rechts: Bottom-Sheet (Auftrag woertlich: "Einstellungen als Drawer/
     Bottom-Sheet") - schiebt von unten ein, volle Breite, gedeckelte Hoehe
     mit eigenem Scroll (Werkzeugkasten ist lang). */
  .k-sidebar-right {
    left: 0;
    right: 0;
    top: auto;
    height: min(80vh, 640px);
    border-radius: var(--k-r-gross) var(--k-r-gross) 0 0;
    transform: translateY(100%);
  }
  body.k-drawer-open-left .k-sidebar-left { transform: translateX(0); }
  body.k-drawer-open-right .k-sidebar-right { transform: translateY(0); }

  .k-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(22, 29, 56, 0.32);
  }
  .k-drawer-scrim[hidden] { display: none; }

  /* Fussleiste (Export) ist NIE Teil der Umklappung - "Export dauerhaft
     zugaenglich"/"Export dauerhaft erreichbar" (Tablet UND Mobile). Sie
     verdichtet sich stattdessen proportional: umbricht statt abzuschneiden,
     die feste 92px-Hoehe faellt zugunsten des tatsaechlichen Inhalts. */
  .k-footer { height: auto; min-height: 72px; flex-wrap: wrap; padding: var(--k-3) var(--k-4); gap: var(--k-3); }
  .k-footer-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
  .k-footer #k-footer-legal-mount { position: static; margin-top: var(--k-1); }
  .k-footer #k-footer-consent-mount { position: static; max-width: none; white-space: normal; }
}

/* -------- Stufe 3: Mobile (<=768px) - Canvas zuerst, kompaktere
   Beschriftungen, deckt sich mit dem bestehenden Touch-Breakpoint. -------- */
@media (max-width: 768px) {
  /* Beruehrungsziele >= 44px (Auftrag, gemessen getestet fuer crop.css) -
     hier zusaetzlich als Grundsicherung fuer JEDEN .btn, nicht nur die dort
     schon abgedeckten Crop-Knoepfe (z.B. "Mit Handy fotografieren" kam vor
     dieser Zeile auf 41px Hoehe). */
  .btn { min-height: 44px; }
  .k-sidebar-left, .k-sidebar-right { width: 100vw; max-width: 100vw; }
  .k-topbar-center .k-werkname { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
  /* Kopfzeile kompakter statt Informationen abzuschneiden - "765/200
     Credits" bleibt vollstaendig lesbar (Pflichtenheft: vollstaendig
     erhalten), nur der Zwischenraum zum Avatar wird knapper. */
  .k-account { padding: var(--k-1); gap: var(--k-1); }
  .k-account .credits { font-size: 13px; }
  /* Fussleiste: Dateiname-Feld verschmaelert statt zu verschwinden - "keine
     Funktion entfaellt" gilt auch fuer die Fussleiste. */
  .k-filename-field { width: 150px; }
  .k-footer-filename { flex: 1 1 150px; min-width: 0; }
  .k-footer-format { flex: 0 0 auto; }
  .k-export-btn { flex: 1 1 auto; justify-content: center; }
  .k-canvas-card { padding: var(--k-3); }
  .k-canvas-controls { left: var(--k-3); bottom: var(--k-3); flex-wrap: wrap; }
}

/* Nachtrag: Stapelreihenfolge der Vergleichs-Figuren + Sonderposition des
   "Zuschnitt anpassen"-Knopfs (crop.css positioniert ihn oben rechts - dort
   liegt im Vergleichsmodus meist die Vektor-Seite obenauf, siehe
   .k-compare-result). Er gehoert zur Original-Seite, deshalb hier bewusst
   links verankert statt rechts. */
.k-compare-original { z-index: 1; }
.k-compare-result { z-index: 2; }
.k-compare-original .crop-anpassen-btn { left: 10px; right: auto; }

/* ===========================================================================
   PL-Nacharbeit (Befund 1+2, siehe Abnahme-Rueckmeldung): Vorher/Nachher-
   Ueberlagerung reparieren + Arbeitsflaeche freiraeumen. ======================= */

/* Befund 1: die alte .preview-pair-Klasse ist NICHT mehr auf dem Vektor-
   Vergleichs-Viewport (index.html) - dieser Kommentar dokumentiert WARUM:
   ".preview-pair"/".preview-pair figure"/".preview-pair img" (weiter oben in
   dieser Datei) sind class-Selektoren, die Kolorieren's EIGENE .preview-pair
   (kolorier-preview-pair, unveraendert) weiterhin braucht - die duerfen NICHT
   angetastet werden. Der Vektor-Vergleich nutzt jetzt AUSSCHLIESSLICH die
   k-compare-*-Klassen unten (ohne die alte Klasse auf demselben Element),
   damit keine Spezifitaets-/Kaskaden-Kollision mehr entsteht (vorher gewann
   ".preview-pair figure { position:relative }" gegen ".k-compare-figure
   { position:absolute }" - hoehere Spezifitaet durch den zusaetzlichen
   Typ-Selektor "figure" - und die beiden Bilder ueberlagerten sich nie). */

/* Befund 2: Dropzone verschwindet visuell, sobald eine Datei aktiv ist -
   bleibt im DOM, "+ Neue Datei" bleibt unveraendert per JS ansteuerbar
   (fileInput.click() ist unabhaengig von der Sichtbarkeit des Eltern-
   Elements), Drag-and-Drop wandert auf die Canvas-Spalte (script.js). */
.k-dropzone-collapsed { display: none; }

/* Befund 2: die alte Verfahren/Variante-Segmentleiste (.choice) ist in der
   Canvas-Spalte visuell verborgen - "Verfahren" wird von der linken Leiste
   bedient, "Variante" (SW/Farbe) hat jetzt einen echten Spiegel-Regler in
   der rechten Leiste unter "Erweitert" (#k-variante-seg-mirror). Die alten
   Knoepfe bleiben im DOM und verdrahtet (Waechter-Test, script.js-Handler
   unveraendert), nur nicht mehr sichtbar. */
.k-canvas-col > .choice { display: none; }

/* ===========================================================================
   P14 Abschnitt 2: Kolorier-Modus in der neuen Schale. Alle Selektoren hier
   sind NEUE Aussenhuellen um bestehende, unveraendert weiterverwendete
   Elemente (#kolorier-palette-bar/.kolorier-preview-pair/.kolorier-assign-bar
   etc.) - siehe script.js "P14 Abschnitt 2" fuer die appendChild-Umzuege, die
   diese Selektoren erst mit Inhalt fuellen. =============================== */

/* -------- Linke Leiste: Paletten-Zeile ersetzt Schnell-Presets -------- */
.k-kolorier-palette-slot { display: flex; flex-direction: column; }
.k-kolorier-palette-slot .kolorier-palette-bar {
  margin: 0;
  flex-wrap: wrap;
  gap: var(--k-2);
}
.k-kolorier-palette-slot .kolorier-palette-bar .label {
  width: 100%;
  font: 600 var(--k-t-klein)/1.3 inherit;
  color: var(--k-text-leise);
  text-transform: none;
  letter-spacing: normal;
}

/* -------- Kolorier-Arbeitscanvas: EIN Bild statt Zwei-Panel-Grid --------
   .kolorier-preview-pair/.kolorier-preview-wrap/#img-kolorier-preview
   BEHALTEN ihre urspruengliche innere Struktur (Bruchstelle 2) - hier wird
   nur die AEUSSERE Anordnung von "zwei Spalten nebeneinander" auf "ein Bild,
   das andere per Umschalter sichtbar" umgestellt. getBoundingClientRect() ist
   viewport-relativ, unabhaengig von dieser Umstellung korrekt (siehe
   Klick-Genauigkeits-Messung im Abschlussbericht). */
.k-kolorier-canvas-card .kolorier-preview-pair {
  display: block;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}
.k-kolorier-canvas-card .kolorier-preview-pair figure {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0;
  position: relative;
}
.k-kolorier-canvas-card #k-kolorier-figure-original { display: none; }
.k-kolorier-canvas-card.k-kolorier-show-original #k-kolorier-figure-original { display: flex; }
.k-kolorier-canvas-card.k-kolorier-show-original #k-kolorier-figure-preview { display: none; }
.k-kolorier-canvas-card .kolorier-preview-pair img { height: 100%; }
.k-kolorier-canvas-card .kolorier-preview-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: block;
}
.k-kolorier-canvas-card .kolorier-preview-wrap img { height: 100%; width: 100%; }
.k-kolorier-canvas-card { padding: var(--k-5); gap: var(--k-3); }

/* Original/Vorschau-Umschalter - gleiche Formsprache wie die Vektor-Pan/Zoom-
   Controls (.k-canvas-btn, wiederverwendet statt neu erfunden). */
.k-kolorier-canvas-card .k-canvas-controls { margin-top: var(--k-3); }
.k-kolorier-canvas-card #k-kolorier-original-toggle[aria-pressed="true"] {
  background: var(--k-flieder);
  border-color: var(--k-kobalt);
  color: var(--k-kobalt);
}

/* -------- Rechte Leiste: Kolorier-Werkzeugkasten -------- */
.k-kolorier-section { display: flex; flex-direction: column; gap: var(--k-2); }
.k-kolorier-section + .k-kolorier-section:not(:empty) { border-top: 1px solid var(--k-linie); padding-top: var(--k-3); }
/* Die verschobenen Original-Elemente behalten ihre eigene Optik
   (kolorier_touch.css/kolorier_farbwaehler.css/kolorier_gruppen.css) -
   hier nur so viel Anpassung, dass sie in der schmaleren Leiste nicht
   ueberlaufen. */
#k-kolorier-werkzeuge-mount .kolorier-assign-bar,
#k-kolorier-referenz-mount .kolorier-referenz-row {
  flex-wrap: wrap;
}

/* -------- Fussleiste: Kolorier-Gruppe (Ebenen-PDF-Export + ZIP) -------- */
/* Die Vektor-Fussleistengruppe war seit P14/2 ohne eigene Regel und fiel
   damit auf display:block zurueck: Dateiname, Format und Exportknopf
   stapelten sich in einer 311px schmalen Spalte und ragten 165px hoch aus
   der 92px hohen Leiste heraus. Sie bekommt dieselbe Zeilen-Anordnung wie
   ihr Kolorier-Gegenstueck. */
.k-footer-vektor-group { display: flex; align-items: center; gap: var(--k-4); flex: 1 1 auto; flex-wrap: wrap; }
.k-footer-kolorier-group { display: flex; align-items: center; gap: var(--k-4); flex: 1 1 auto; flex-wrap: wrap; }
.k-footer-kolorier-group .btn.primary#kolorier-export {
  height: 52px;
  padding: 0 var(--k-5);
  border-radius: var(--k-knopf-radius);
  background: var(--k-kobalt);
  border: none;
  color: #fff;
  font-weight: 600;
}
.k-footer-kolorier-group .btn.primary#kolorier-export:hover { background: var(--k-kobalt-tief); }

/* ===========================================================================
   P14 Abschnitt 2b: Gestaltungs-Nacharbeit am Kolorier-Werkzeugkasten (PL-
   Befunde). Reine Optik auf bestehenden, unveraendert weiterverwendeten
   Elementen - keine ID/kein Handler wird hier veraendert, siehe die
   begleitenden DOM-Umbauten ganz unten in index.html (nur appendChild von
   Bestandsknoten in neue Huellen, wie schon in Abschnitt 2 vorgemacht).
   =========================================================================== */

/* -------- Befund 1+3: rohe Ankreuzfelder -> Zeilen im Stil von
   -------- "Live-Vorschau" (.k-row-livepreview/.k-toggle aus Abschnitt 1).
   -------- Trifft ALLE .variant-check-Zeilen im Kolorier-Panel: die drei
   -------- statischen (Fein/Aehnliche/Markieren) + "Werkzeuge" (Laufzeit,
   -------- kolorier_touch.js) + "Auswahl fuer neue Gruppe" (Laufzeit,
   -------- kolorier_gruppen.js) - alle nutzen dieselbe Klasse. */
#k-panel-kolorier .variant-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  gap: var(--k-3);
  font-size: var(--k-t-basis);
  color: var(--k-text);
  cursor: pointer;
}
#k-panel-kolorier .variant-check input[type="checkbox"] {
  order: 2;
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: var(--k-linie-stark);
  position: relative;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
#k-panel-kolorier .variant-check input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 29, 56, 0.25);
  transition: transform 0.15s ease;
}
#k-panel-kolorier .variant-check input[type="checkbox"]:checked { background: var(--k-kobalt); }
#k-panel-kolorier .variant-check input[type="checkbox"]:checked::before { transform: translateX(18px); }
#k-panel-kolorier .variant-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--k-fokus);
  border-radius: 999px;
}

/* -------- Befund 3: Eingabefelder (Name/Rolle der Gruppe, Ueberfuellung-
   -------- Wert+Einheit, Referenzbild bleibt ein <button>) im Stil der
   -------- Vektor-Zahlenfelder (.k-numfield). -------- */
#k-panel-kolorier input[type="text"],
#k-panel-kolorier input[type="number"],
#k-panel-kolorier select {
  height: 34px;
  border: 1px solid var(--k-linie-stark);
  border-radius: var(--k-r-klein);
  background: #fff;
  color: var(--k-ink);
  font: 500 var(--k-t-basis)/1 inherit;
  padding: 0 var(--k-2);
}
#k-panel-kolorier input[type="text"]:focus-visible,
#k-panel-kolorier input[type="number"]:focus-visible,
#k-panel-kolorier select:focus-visible {
  outline: none;
  box-shadow: var(--k-fokus);
  border-color: var(--k-kobalt);
}
/* "Als Gruppe speichern" ist bereits .btn.primary (= --accent = --k-kobalt,
   per :root-Mapping oben) - hier nur die Panel-eigene Kartenoptik der
   Gruppen-Liste an die schmalere Leiste angleichen. */
#k-panel-kolorier .kolorier-gruppen-panel {
  margin-top: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}
#k-panel-kolorier .kolorier-gruppen-panel h3 {
  margin: 0;
  font-family: "Syne", "Helvetica Neue", Helvetica, sans-serif;
  font-size: var(--k-t-gross);
  font-weight: 600;
  color: var(--k-ink);
}

/* -------- Befund 2: Verlauf-Zeile (Rueckgaengig/Wiederholen) als Icon-
   -------- Knoepfe statt grauer Textzeilen. Markup-Umbau siehe index.html
   -------- (P14 Abschnitt 2b-Script) - #kolorier-undo/#kolorier-redo bleiben
   -------- dieselben Knoten mit denselben Listenern, wandern nur in eine
   -------- neue Huelle und bekommen ein SVG-Icon ergaenzt. -------- */
.k-kolorier-verlauf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.k-kolorier-verlauf-titel {
  font-size: var(--k-t-basis);
  color: var(--k-text);
}
.k-kolorier-verlauf-btns { display: flex; align-items: center; gap: var(--k-2); }
.k-kolorier-verlauf-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--k-knopf-radius);
  border: 1px solid var(--k-linie-stark);
  background: #fff;
  color: var(--k-text);
  box-shadow: none;
}
.k-kolorier-verlauf-btn.btn:hover:not(:disabled) {
  background: var(--k-grund-tief);
  transform: none;
  box-shadow: none;
}
.k-kolorier-verlauf-btn.btn:disabled {
  opacity: 0.35;
  border-color: var(--k-linie);
}
.k-icon-inline { display: inline-flex; width: 16px; height: 16px; }
.k-icon-inline svg { width: 100%; height: 100%; }
.k-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------- Befund 4: Palette links doppelt - der Trigger-Knopf zeigt seine
   -------- eigene, kompakte Vorschau der Rollenfarben (18px), UNTER ihm
   -------- rendert dieselben Farben nochmal die interaktive Zeile
   -------- (#kolorier-palette-swatches, 30px, traegt die Doppelklick-Rollen-
   -------- Bearbeitung - siehe script.js paletteSwatchesBar) - im schmalen
   -------- linken Slot stehen beide sichtbar untereinander. Genau EINE
   -------- Darstellung bleibt: die interaktive Zeile (Doppelklick-Funktion
   -------- erhalten), die rein dekorative Trigger-Vorschau wird ausgeblendet. */
.k-kolorier-palette-slot .kolorier-palette-trigger-swatches { display: none; }
.k-kolorier-palette-slot .kolorier-palette-trigger {
  width: 100%;
  justify-content: space-between;
}
.k-kolorier-palette-slot .kolorier-swatches { padding-left: 2px; }
.k-kolorier-palette-slot .kfw-toolbar-btn {
  border: 1px solid var(--k-linie-stark);
  border-radius: var(--k-r-klein);
  color: var(--k-text);
  padding: 6px 10px;
  font-size: var(--k-t-klein);
}
.k-kolorier-palette-slot .kfw-toolbar-btn:hover { background: var(--k-grund-tief); }

/* Block C.2: "Datei waehlen" (Referenzbild-Zeile) angeglichen an dieselbe
   Formsprache wie "Farbschema"/"Palette aus Bild" oben (Rahmen --k-linie-
   stark, Radius --k-r-klein, gleiche Zeilenhoehe) statt des nackten,
   randlosen .btn.ghost-Textlooks. */
#k-panel-kolorier .kolorier-referenz-row .btn.ghost {
  border: 1px solid var(--k-linie-stark);
  border-radius: var(--k-r-klein);
  color: var(--k-text);
  background: #fff;
  padding: 6px 12px;
  font-size: var(--k-t-klein);
  min-height: 44px;
}
#k-panel-kolorier .kolorier-referenz-row .btn.ghost:hover { background: var(--k-grund-tief); }

/* -------- Befund 5: "Einzeldateien (ZIP)" als erkennbarer Sekundaerknopf
   -------- (statt nacktem .btn.ghost-Text) + Credits IN den Primaerknopf
   -------- (Struktur/Text per Script ergaenzt, siehe index.html). Farbe des
   -------- Primaerknopfs war schon korrekt (--accent = --k-kobalt), hier nur
   -------- Layout fuer Icon+Label. */
.k-footer-kolorier-group .btn.primary#kolorier-export {
  display: inline-flex;
  align-items: center;
  gap: var(--k-2);
}
#kolorier-export-zip.k-kolorier-secondary-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--k-4);
  border-radius: var(--k-r);
  border: 1px solid var(--k-linie-stark);
  background: #fff;
  color: var(--k-text);
  font-weight: 500;
  box-shadow: none;
}
#kolorier-export-zip.k-kolorier-secondary-btn:hover {
  background: var(--k-grund-tief);
  transform: none;
}
#kolorier-credit-hint.k-visually-hidden-hint { display: none; }

/* -------- Befund 7: feste Bildhoehe faellt - #kolorier-workspace bekommt
   -------- dieselbe Flex-Spalten-Behandlung wie #workspace im Vektor-Modus
   -------- (Abschnitt 1, ".k-canvas-col > #workspace.workspace"), damit die
   -------- Canvas-Karte die verfuegbare Spaltenhoehe fuellt statt laenger
   -------- als die Leiste zu werden. Klick-Koordinaten haengen NICHT an
   -------- dieser Hoehe (getBoundingClientRect() ist viewport-relativ, siehe
   -------- P14_FUNDAMENT.md Bruchstelle 2) - Nachweis im Abschlussbericht. */
.k-canvas-col > #kolorier-workspace.workspace {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.k-canvas-col > #kolorier-workspace.workspace .k-kolorier-canvas-card {
  min-height: 0;
}

/* -------- Befund 8: Original/Vorschau-Umschalter UND Werkzeugwahl als
   -------- schwebende Canvas-Controls, gleiche Formsprache wie die Vektor-
   -------- Pan/Zoom-Gruppe (.k-canvas-btn/.seg.seg-small, beide bereits auf
   -------- k-Tokens gemappt ueber --panel/--border/--shadow/--accent, siehe
   -------- :root-Aliasblock oben). Die Werkzeugwahl wird per Script (siehe
   -------- index.html) aus der rechten Leiste hierher verschoben - dieselbe
   -------- Node, derselbe Klick-Handler in kolorier_touch.js. */
.k-kolorier-canvas-card .k-canvas-controls { margin-top: var(--k-3); }
.k-kolorier-floating-werkzeuge {
  background: #fff;
  border-color: var(--k-linie-stark);
  box-shadow: var(--k-schatten);
}
.k-kolorier-floating-werkzeuge.hidden { display: none; }
.k-kolorier-floating-werkzeuge button.active {
  background: var(--k-flieder);
  color: var(--k-kobalt);
}

/* -------- Befund 9 (Nachzug Abschnitt 1): "Zuschnitt anpassen" ueberlappte
   -------- die "Original"-Chip-Ecke (beide oben-links) - wird stattdessen
   -------- als eigener schwebender Control unten rechts der Canvas-Karte
   -------- platziert (Formsprache wie .k-canvas-btn), fuer Vektor UND
   -------- Kolorieren gleichermassen (crop.css definiert die Basisklasse
   -------- .crop-anpassen-btn, hier nur Position/Optik ueberschrieben). */
.crop-anpassen-btn {
  top: auto !important;
  left: auto !important;
  right: var(--k-5) !important;
  bottom: var(--k-5) !important;
  height: 40px !important;
  padding: 0 var(--k-3) !important;
  border-radius: var(--k-r) !important;
  background: #fff !important;
  border: 1px solid var(--k-linie-stark) !important;
  box-shadow: var(--k-schatten) !important;
  color: var(--k-text) !important;
  font-size: var(--k-t-klein) !important;
}
.crop-anpassen-btn:hover { background: var(--k-grund-tief) !important; }
.k-compare-original .crop-anpassen-btn,
.k-kolorier-canvas-card .crop-anpassen-btn {
  left: auto;
  right: var(--k-5);
}

/* -------- Befund 10: Rechtehinweis zieht dezent in die Fussleiste (statt
   -------- als eigene Zeile Hoehe von der Arbeitsflaeche zu nehmen) - bleibt
   -------- IMMER sichtbar (Rechtsdokumentation, siehe index.html-Script),
   -------- unabhaengig vom aktiven Modus. */
.k-footer { position: relative; }
#k-footer-consent-mount {
  position: absolute;
  right: var(--k-5);
  bottom: 6px;
  max-width: 320px;
  font-size: var(--k-t-mikro);
  color: var(--k-text-leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#k-footer-consent-mount a { color: var(--k-text-leise); }
#k-footer-consent-mount.hidden { display: none; }

/* "Nur Linien": beschrifteter Strichstaerke-Regler */
.k-strichbreite-label { display: block; margin-top: var(--k-2); font-size: var(--k-t-klein); color: var(--k-text-leise); }
.k-strichbreite-val { margin-left: var(--k-1); }

/* Seiten-Streifen mehrseitiger PDFs */
.pdf-seiten { margin-bottom: var(--k-4, 16px); }
.pdf-seiten-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--k-3, 12px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--k-2, 8px);
}
.pdf-seite {
  flex: 0 0 auto;
  width: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.pdf-seite img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: var(--k-panel, #fff);
  border: 2px solid var(--k-linie, #ddd);
  border-radius: var(--k-r, 8px);
  display: block;
}
.pdf-seite:hover img { border-color: var(--k-kobalt, #2a4fd6); }
.pdf-seite.active img { border-color: var(--k-kobalt, #2a4fd6); }
.pdf-seite span { font-size: var(--k-t-klein, 0.8rem); color: var(--k-text-leise, #666); }
.pdf-seite:focus-visible { outline: none; box-shadow: var(--k-fokus); }

/* "Inhalt melden" ist aus der Arbeitsflaeche entfernt (Link bleibt im DOM,
   Meldefunktion = /settings?report=rechtsverletzung#feedback, siehe Einstellungen). */
#k-footer-legal-mount, .site-footer { display: none !important; }

@media (max-width: 960px) {
  /* Regler nicht hinter dem Symbol verstecken: rechte Leiste wird ein normaler
     Abschnitt UNTER der Vorschau (vor Dateiname/Format/Export in der Fussleiste);
     der Regler-Knopf in der Kopfzeile entfaellt. */
  #k-drawer-tools-btn { display: none; }
  .k-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .k-canvas-col { flex: 0 0 auto; overflow: visible; }
  .k-sidebar-right {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    height: auto;
    flex: 0 0 auto;
    border-radius: 0;
    border-left: none;
    border-top: 1px solid var(--k-linie);
    box-shadow: none;
    overflow: visible;
  }
  .k-sidebar-right .k-drawer-close { display: none; }
}
@media (max-width: 480px) {
  .k-logo-word { display: none; }
}

/* Burger-Menue (schmales Layout): Flyout dockt RECHTS an und schiebt sich von
   der rechten Kante nach links herein; Schliessen schiebt es nach rechts hinaus. */
@media (max-width: 960px) {
  .k-sidebar-left {
    left: auto;
    right: 0;
    transform: translateX(100%);
    border-right: none;
    border-left: 1px solid var(--k-linie);
  }
  body.k-drawer-open-left .k-sidebar-left { transform: translateX(0); }
}

/* Bricolage Grotesque (OFL 1.1, selbst gehostet): Zahlen in den Credits ohne Spruenge */
.k-account .credits, .user-pill .credits { font-family: inherit; font-variant-numeric: tabular-nums; }

/* Flora 07.10.2026: Eingabefelder ebenfalls als Pille */
input[type=text], input[type=email], input[type=number], input[type=search], select { border-radius: 999px; }

/* Flora 07.10.2026: "Auto" statt Kreispfeil - nur Umrisslinie, dunkle Schrift */
.k-auto-btn {
  border: 1px solid var(--k-ink); background: transparent; color: var(--k-ink);
  border-radius: 999px; padding: 4px 14px; font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; line-height: 1.4;
}
.k-auto-btn:hover { background: var(--k-grund-tief); }
.k-auto-btn:focus-visible { outline: none; box-shadow: var(--k-fokus); }
/* Entscheidung 122: "Auto" an (alle Regler auf der Auto-Stellung) = dezent gruener Grund, gruener Rand, dunkelgruene Schrift
   (Gruen der App-Palette --k-gruen); aus = neutral wie oben. */
.k-auto-btn.k-an { border-color: var(--k-gruen); background: rgba(30, 158, 98, .12); color: #14683f; }
.k-auto-btn.k-an:hover { background: rgba(30, 158, 98, .18); }
/* Flora 07.10.2026: Rechtszeile rechts unten in der Seitenleiste statt in der Fussleiste */
.k-sidebar-right { display: flex; flex-direction: column; }
.k-sidebar-recht { margin-top: auto; padding: 16px 24px 20px; font-size: 12px; line-height: 1.5; color: var(--k-text-leise); }
.k-sidebar-recht .consent-hint { margin: 0 0 4px; font-size: 12px; }
.k-sidebar-recht a { color: var(--k-text-leise); }
.k-canvas-btn[hidden] { display: none; }
/* Flora 07.10.2026: Schwelle sichtbar, Auto-Haken rechts in der Kopfzeile */
.k-schwelle-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--k-ink); cursor: pointer; text-transform: none; letter-spacing: 0; }
.k-schwelle-auto input { accent-color: var(--k-kobalt); margin: 0; }
#threshold:disabled { opacity: .45; }

/* Flora 10.10.2026: kein Grau, kein Ladesymbol bei der Vorschau (Entscheidung 114) - das neue Bild steht sofort ungegraut da. */

/* Flora 07.10.2026: Gast-Menuezeile - Credits/Profil/Zahnrad verborgen, stattdessen "Anmelden" */
.k-account > [hidden] { display: none !important; }
.k-gast-anmelden-btn{display:inline-flex;align-items:center;gap:.4rem;height:34px;padding:0 16px;border:1px solid var(--k-kobalt);border-radius:999px;background:var(--k-kobalt);color:#fff;font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap}
.k-gast-anmelden-btn:hover{background:var(--k-kobalt-tief)}

/* Flora 07.10.2026: Exportleiste vertikal zentriert, darunter die Fusszeile (Kalamo / Rechtliches).
   100dvh statt 100vh: die Schale passt in die sichtbare Fensterhoehe, nichts wird unten abgeschnitten. */
.k-app { height: 100vh; height: 100dvh; }
.k-footer { height: auto; min-height: 92px; padding-top: 14px; padding-bottom: 14px; align-items: center; }
.k-footer-vektor-group, .k-footer-actions { align-items: center; }
.k-app-fuss { flex: 0 0 auto; display: flex; align-items: center; gap: var(--k-5); height: 44px; padding: 0 var(--k-5);
  background: #fff; border-top: 1px solid var(--k-linie); font-size: 12px; color: var(--k-text-leise); }
.k-app-fuss-marke { display: inline-flex; align-items: center; }
.k-app-fuss-marke img { display: block; height: 14px; width: auto; }
.k-app-fuss-recht { display: flex; gap: var(--k-4); margin-left: auto; }
.k-app-fuss-recht a { color: var(--k-text-leise); text-decoration: none; }
.k-app-fuss-recht a:hover { color: var(--k-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .k-app-fuss { gap: var(--k-3); padding: 0 16px; } .k-app-fuss-copy { display: none; } .k-app-fuss-recht { gap: 10px; } }
#k-footer-consent-mount:empty { display: none; } /* leerer Platzhalter (Rechtshinweis steht rechts in der Leiste) nahm eine eigene Zeile ein */
.k-app > .k-footer { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 640px) { .k-app-fuss-marke { display: none; } .k-app-fuss-recht { margin: 0 auto; gap: 12px; font-size: 11px; flex-wrap: wrap; justify-content: center; } }

#img-preview { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* Flora 07.10.2026 (2): Fusszeile ausserhalb der App-Schale - erst beim Scrollen sichtbar, ohne Logo, mittig */
.k-app-fuss { justify-content: center; height: 56px; }
.k-app-fuss-recht { margin: 0; justify-content: center; align-items: center; flex-wrap: wrap; }
.k-app-fuss-copy { color: var(--k-text-leise); }

/* Flora 07.10.2026: "Auto" direkt neben "Schwelle", Zahl als Pille wie bei den Reglern darueber; Zahl unter dem Regler weg */
.k-schwelle-kopf { display: inline-flex; align-items: center; gap: 12px; }
#threshold-control #threshold-val { display: none !important; }
#k-threshold-num:disabled { opacity: .5; }
/* Flora 07.10.2026: Dateiname ueber die ganze Breite bis zu "Format"; Format rechts direkt neben dem Export-Knopf */
@media (min-width: 961px) {
  .k-footer-vektor-group { flex-wrap: nowrap; }
  .k-footer-filename { flex: 1 1 auto; min-width: 0; }
  .k-footer-filename .k-filename-field { width: 100%; }
  .k-footer-format { flex: 0 0 auto; }
  .k-footer-actions { margin-left: 0; flex: 0 0 auto; }
}

/* Unterhalb der Seitenleisten-Schwelle: Dateiname in eigener Zeile,
   Format und Download darunter. Die volle Aktionsbreite darf nicht neben
   Dateiname und Format in eine einzelne Flex-Zeile gezwungen werden. */
@media (max-width: 960px) {
  .k-footer-vektor-group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--k-3) var(--k-4);
    width: 100%;
    min-width: 0;
  }
  .k-footer-filename { grid-column: 1 / -1; min-width: 0; }
  .k-footer-filename .k-filename-field { width: 100%; }
  .k-footer-format { justify-self: start; }
  .k-footer-vektor-group .k-footer-actions { width: auto; min-width: 0; margin-left: 0; }
  .k-footer-vektor-group .k-export-btn { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 480px) {
  .k-footer-vektor-group { grid-template-columns: minmax(0, 1fr); }
  .k-footer-vektor-group .k-footer-actions { justify-content: stretch; }
  .k-footer-vektor-group .k-export-btn { width: 100%; justify-content: center; }
}

/* Flora 07.10.2026: nach der Anmeldung den Download-Knopf kurz wackeln lassen */
@keyframes k-wackeln { 0%,100% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-5px) rotate(-2deg); }
  30% { transform: translateX(5px) rotate(2deg); } 45% { transform: translateX(-4px) rotate(-1.5deg); }
  60% { transform: translateX(4px) rotate(1.5deg); } 75% { transform: translateX(-2px) rotate(-.5deg); } }
body.k-export-wackeln #k-export-btn { animation: k-wackeln .7s ease-in-out .8s 2; }
@media (prefers-reduced-motion: reduce) { body.k-export-wackeln #k-export-btn { animation: none; } }
/* Flora 07.10.2026: Exportleiste ohne "Dateiname"/"Format"-Beschriftung (nur optisch weg, fuer Screenreader da),
   alles auf einer Linie vertikal mittig, Dateinamen-Feld rund wie die Knoepfe */
.k-footer-filename > label, .k-footer-format-label {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.k-footer-filename, .k-footer-format { gap: 0; justify-content: center; }
.k-footer-vektor-group { align-items: center; }
.k-filename-field input[type="text"] { border-radius: 999px; height: 44px; padding-left: 18px; padding-right: 40px; }
.k-filename-field svg { right: 16px; }
.k-format-seg { height: 44px; }

/* Flora 07.10.2026: "In Fotos sichern" unter dem Bild (nur Handy) */
.k-in-fotos{width:100%;margin-top:8px}
.k-in-fotos[hidden]{display:none!important}


/* ===========================================================================
   Entscheidung 118 (Flora 10.10.2026): Handy-Ansicht nach Floras Skizze - NUR bis 768 px Breite.
   Darueber (Desktop/Tablet) bleibt alles wie vorher: die Handy-Elemente sind dort display:none.
   Von oben nach unten: Kopfzeile, Hochladen-Knopf, Namenszeile (Werkname + Verlauf), Umschalter Original|Ergebnis,
   Bildbuehne (feste Hoehe), Verfeinern-Bereich (scrollt innen), Exportleiste unten. Kein Dokument-Scroll.
   Die Regeln stehen mit etwas mehr Spezifitaet (body .k-app ...), weil settings.css spaeter geladen wird.
   =========================================================================== */
.k-mobil-kopf, .k-verlauf-scrim, .k-verlauf-blatt { display: none; }
.k-mobil-reiter { display: none; }
.k-logo-voll, .k-credits-muenze { display: none; }
.k-verlauf-scrim[hidden], .k-verlauf-blatt[hidden], .k-mobil-hinweis[hidden], .k-mobil-rufzeichen[hidden],
.k-mobil-rufzeichen-text[hidden] { display: none !important; }

@media (max-width: 768px) {
  html, body { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  body .k-app { height: 100vh; height: 100dvh; }
  body .k-app .k-body { flex-direction: column; overflow-x: hidden; overflow-y: auto; min-height: 0; }
  body.k-m-buehne .k-app .k-body { overflow-y: hidden; }

  /* Hochladen-Knopf, Namenszeile, Umschalter, Buehne */
  body .k-app .k-mobil-kopf { display: flex; flex-direction: column; flex: 0 0 auto; gap: 8px; padding: 8px 12px; }
  /* Entscheidung 121: mit Bildbuehne waechst der Kopfbereich ueber die ganze freie Hoehe, die Buehne nimmt den Rest (Reglerbereich unten hat feste Hoehe) */
  body.k-m-buehne .k-app .k-mobil-kopf { flex: 1 1 0; min-height: 0; }
  .k-mobil-knopfzeile { display: flex; align-items: center; gap: 8px; }
  .k-mobil-hochladen {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-width: 0; height: 48px;
    border: none; border-radius: var(--k-knopf-radius, 999px); background: var(--k-knopf-farbe, var(--k-kobalt)); color: #fff;
    font: 600 var(--k-t-basis, 15px)/1 inherit; cursor: pointer;
  }
  .k-mobil-hochladen svg { width: 18px; height: 18px; }
  .k-mobil-hochladen:focus-visible { outline: none; box-shadow: var(--k-fokus); }
  .k-mobil-recht { display: none; margin: 0; font-size: 12px; line-height: 1.5; color: var(--k-text-leise); }
  body:not(.k-datei-aktiv) .k-mobil-recht:not(:empty) { display: block; }
  .k-mobil-recht .consent-hint { margin: 0; font-size: 12px; }

  .k-mobil-namenszeile { display: none; align-items: center; gap: 8px; flex: 0 0 auto; }
  body.k-m-buehne .k-mobil-namenszeile { display: flex; }
  .k-mobil-name-slot { flex: 1 1 auto; min-width: 0; }
  .k-mobil-name-slot .k-footer-filename { width: 100%; }
  .k-mobil-name-slot .k-filename-field { width: 100%; }
  .k-mobil-name-slot .k-filename-field input[type="text"] { border: 1.5px solid var(--k-kobalt); background: #fff; font-weight: 500; }
  .k-mobil-verlauf {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px;
    border: 1px solid var(--k-linie-stark, var(--k-linie)); border-radius: 999px; background: #fff; color: var(--k-ink);
    font: 500 14px/1 inherit; cursor: pointer;
  }
  .k-mobil-verlauf svg { width: 18px; height: 18px; }
  .k-mobil-verlauf:focus-visible { outline: none; box-shadow: var(--k-fokus); }

  .k-mobil-buehne {
    display: none; position: relative; flex: 1 1 0; min-height: 150px; overflow: hidden; touch-action: none;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    border: 1px solid var(--k-linie); border-radius: var(--k-r); background: var(--k-grund-tief);
  }
  body.k-m-buehne .k-mobil-buehne { display: block; }
  .k-mobil-ebene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
  .k-mobil-ebene img { position: absolute; display: block; max-width: none; pointer-events: none; -webkit-user-drag: none; user-select: none; visibility: hidden; }
  .k-mobil-ebene img.da { visibility: visible; }
  /* Schiebe-Vergleich (Entscheidung 121): links Original, rechts Ergebnis; die Klammer liegt in der bewegten Ebene und wird von script.js
     passend zur Trennlinie (Bildschirm-Prozent) beschnitten; Linie + Griff liegen fest ueber der Buehne */
  .k-mobil-ergebnis-klammer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .k-mobil-linie { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--k-ink); z-index: 5; pointer-events: none; }
  .k-mobil-griff {
    position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%;
    background: #fff; border: 1px solid var(--k-linie-stark); box-shadow: var(--k-schatten); display: flex; align-items: center; justify-content: center;
    color: var(--k-text); pointer-events: all; touch-action: none; cursor: col-resize;
  }
  .k-mobil-griff svg { width: 18px; height: 18px; }
  .k-mobil-griff:focus-visible { outline: none; box-shadow: var(--k-fokus); }
  .k-mobil-griff.dragging { border-color: var(--k-kobalt); box-shadow: var(--k-fokus); }
  /* Entscheidung 122: Zuschnitt-Rahmen. Der Container hat keinen Stapelkontext (kein z-index): Kanten (4) liegen unter Trennlinie/Griff (5),
     Eckgriffe (6) darueber - an den Ecken gewinnt der Rahmen, in der Mitte der Vergleichsgriff. */
  .k-mobil-rahmen { position: absolute; inset: 0; pointer-events: none; }
  .k-mobil-rahmen[hidden] { display: none; }
  .k-mobil-rahmen-linie { position: absolute; z-index: 3; box-sizing: border-box; border: 1.5px solid var(--k-kobalt); pointer-events: none; }
  .k-mobil-rahmen-kante { position: absolute; z-index: 4; pointer-events: auto; touch-action: none; }
  .k-mobil-rahmen-griff { position: absolute; z-index: 6; pointer-events: auto; touch-action: none; }
  /* sichtbarer Eckwinkel (App-Farbe), die Trefferflaeche ist das ganze Feld (mind. 32 px, nach innen) */
  .k-mobil-rahmen-griff::before, .k-mobil-rahmen-griff::after { content: ""; position: absolute; box-sizing: border-box; width: 18px; height: 18px; }
  .k-mobil-rahmen-griff::before { display: none; }   /* keine weisse Unterlegung (unbestellt) */
  .k-mobil-rahmen-griff::after { border: 0 solid var(--k-kobalt); }
  .k-mobil-rahmen-griff[data-griff="nw"]::before, .k-mobil-rahmen-griff[data-griff="nw"]::after { left: 3px; top: 3px; border-top-width: 3px; border-left-width: 3px; }
  .k-mobil-rahmen-griff[data-griff="ne"]::before, .k-mobil-rahmen-griff[data-griff="ne"]::after { right: 3px; top: 3px; border-top-width: 3px; border-right-width: 3px; }
  .k-mobil-rahmen-griff[data-griff="sw"]::before, .k-mobil-rahmen-griff[data-griff="sw"]::after { left: 3px; bottom: 3px; border-bottom-width: 3px; border-left-width: 3px; }
  .k-mobil-rahmen-griff[data-griff="se"]::before, .k-mobil-rahmen-griff[data-griff="se"]::after { right: 3px; bottom: 3px; border-bottom-width: 3px; border-right-width: 3px; }
  .k-mobil-rahmen-griff::before { width: 20px; height: 20px; margin: -1px; }
  .k-mobil-hinweis {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px;
    background: rgba(22, 29, 56, .78); color: #fff; font-size: 13px; pointer-events: none; white-space: nowrap;
  }
  .k-mobil-rufzeichen {
    position: absolute; left: 10px; bottom: 10px; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%;
    background: #fbf1de; color: #8a5a1f; box-shadow: 0 0 0 1px #ecd9b4, var(--k-schatten); font: 700 16px/28px inherit; text-align: center; cursor: pointer;
  }
  .k-mobil-rufzeichen:focus-visible { outline: none; box-shadow: 0 0 0 1px #ecd9b4, var(--k-fokus); }
  .k-mobil-rufzeichen-text {
    position: absolute; left: 10px; bottom: 46px; right: 10px; max-width: 320px; padding: 10px 14px; border: 1px solid #ecd9b4; border-radius: 10px;
    background: #fbf1de; color: #8a5a1f; font-size: 13px; line-height: 1.4; box-shadow: var(--k-schatten-canvas);
  }

  /* Entscheidung 121: Kopfzeile - links das volle Logo, rechts "0/275" + Muenze und der Burger */
  .k-topbar .k-logo-icon, .k-topbar .k-logo-word { display: none; }
  .k-topbar .k-logo-voll { display: block; height: 22px; width: auto; }
  .k-account .k-credits-wort { display: none; }
  .k-account .k-credits-btn { display: inline-flex; align-items: center; gap: 6px; }
  .k-account .k-credits-btn .k-credits-muenze { display: block; width: 16px; height: 16px; color: var(--k-kobalt); flex: 0 0 auto; }
  /* Kopfzeile am Handy: Kinder duerfen schrumpfen, Burger und Credits nie; der Einladungsknopf ist hier nur das Symbol (runde Pille, 34 x 34) */
  .k-topbar-left { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .k-topbar .k-logo-voll, .k-topbar .k-logo-icon { flex-shrink: 0; }
  .k-topbar .k-account { flex-shrink: 0; }
  .k-topbar .k-drawer-toggle { flex-shrink: 0; }
  .k-account .k-invite-btn { width: 34px; padding: 0; justify-content: center; gap: 0; flex: 0 0 auto; }
  .k-account .k-invite-btn .k-invite-text { display: none; }
  /* Logo als letzte Stufe: reicht der Platz trotz allem nicht, setzt script.js (Kopfzeile-Pruefung) .k-kopf-kompakt - dann nur die Bildmarke, nie ein halber Schriftzug */
  .k-topbar.k-kopf-kompakt .k-logo-voll { display: none; }
  .k-topbar.k-kopf-kompakt .k-logo-icon { display: block; }
  /* Entscheidung 121: das Zahnrad entfaellt am Handy, der Burger oeffnet die Einstellungen */
  body .k-app .k-topbar .k-account .k-gear-btn { display: none !important; }

  /* Alte Flaechen am Handy (Schwarz-Weiss-Ansicht): Vergleichsflaeche, gelber Balken, Sucher, Zoomleiste, Upload-Feld */
  body .k-app .k-canvas-col > #dropzone { display: none; }
  body.k-m-buehne .k-app .k-canvas-col { display: none; }
  body.k-m-buehne .low-quality-hint { display: none; }
  body .k-app .k-sucher-slot { display: none !important; }
  body .k-app .k-canvas-controls, body .k-app .k-zoom-group, body .k-app #k-zoom-out, body .k-app #k-zoom-in, body .k-app #k-zoom-value,
  body .k-app #k-fullscreen, body .k-app #k-tool-pan { display: none !important; }

  /* Verfeinern-Bereich: scrollt innen, ohne Karte/Trennlinien */
  body .k-app .k-unterbau { display: none; flex: 1 1 0; min-height: 0; flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
  body.k-datei-aktiv .k-app .k-unterbau { display: flex; }
  body.k-m-buehne .k-app .k-unterbau { flex: 0 0 auto; max-height: 30dvh; }
  body.k-m-buehne .k-app .k-unterbau .k-sidebar-right { flex: 0 1 auto; }
  body .k-app .k-unterbau .k-sidebar-right {
    flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    border-top: 1px solid var(--k-linie); background: var(--k-grund);
  }
  /* Entscheidung 121: statt der Ueberschrift "Verfeinern" eine Reiterzeile Detail | Kurven | Flecken | Schwelle (+ Auto);
     darunter steht nur der Regler des gewaehlten Reiters. Ohne Bildbuehne (Farb-Ansicht) bleibt alles wie vorher. */
  body.k-m-buehne .k-titel-desktop { display: none; }
  body.k-m-buehne #k-panel-vektor { gap: 8px; padding: 10px 16px 0; }
  body.k-m-buehne #k-panel-vektor .k-panel-title-row { gap: 10px; }
  body.k-m-buehne .k-mobil-reiter { display: flex; flex: 1 1 auto; min-width: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  body.k-m-buehne .k-mobil-reiter::-webkit-scrollbar { display: none; }
  .k-mobil-reiter button {
    flex: 0 0 auto; height: 44px; padding: 0 8px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--k-text-leise);
    font: 500 14px/1 inherit; cursor: pointer; white-space: nowrap;
  }
  .k-mobil-reiter button.active { color: var(--k-ink); border-bottom-color: var(--k-kobalt); font-weight: 600; }
  .k-mobil-reiter button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--k-fokus-farbe, #8f8fc4); border-radius: 8px; }
  body.k-m-buehne #k-panel-vektor .k-auto-btn { flex: 0 0 auto; height: 34px; }
  body.k-m-buehne #k-panel-vektor .k-slider-row[data-target]:not(.k-reiter-aktiv) { display: none !important; }
  /* Entscheidung 122: die Beschriftung steht schon im Reiter - darunter nur Schieber + Zahlenfeld (bei Schwelle Haken Auto + Zahlenfeld).
     Die Labels bleiben im Baum (nur optisch verborgen), die Regler tragen zusaetzlich aria-label. */
  body.k-m-buehne #k-panel-vektor .k-slider-row[data-target] { flex-direction: row; align-items: center; gap: 12px; }
  body.k-m-buehne #k-panel-vektor .k-slider-row[data-target] > input[type="range"] { order: 1; flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
  body.k-m-buehne #k-panel-vektor .k-slider-row[data-target] > .k-slider-row-head { order: 2; flex: 0 0 auto; }
  body.k-m-buehne #k-panel-vektor .k-slider-row-head > label,
  body.k-m-buehne #k-panel-vektor .k-schwelle-kopf > label[for="threshold"] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Rechtszeile am Handy hoechstens einmal: vor dem ersten Bild als Hinweis unter dem Hochladen-Knopf, danach nur im Einstellungs-Fenster (Burger) */
  body .k-app-fuss, body.k-datei-aktiv #consent-hint { display: none !important; }
  .k-sidebar-right .k-app-fuss { height: auto; min-height: 0; padding: 12px 16px 20px; border-top: none; background: transparent; }

  /* Exportleiste unten feststehend: Format, Credits (im Knopf), Exportieren */
  body .k-app .k-footer { flex: 0 0 auto; min-height: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  body .k-app .k-footer-vektor-group { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; }
  body .k-app .k-footer-vektor-group .k-footer-format { flex: 0 0 auto; align-items: center; }
  body .k-app .k-footer-vektor-group .k-footer-actions { flex: 1 1 0; width: auto; min-width: 0; margin-left: 0; justify-content: stretch; }
  body .k-app .k-footer-vektor-group .k-export-btn { flex: 1 1 auto; width: auto; height: 44px; padding: 0 6px; justify-content: center; min-width: 0; white-space: nowrap; font-size: 13px; }
  body .k-app .k-format-seg button { padding: 0 8px; font-size: 13px; }
  body .k-app .k-footer-vektor-group .k-export-btn svg { display: none; }
  body .k-app .k-footer-vektor-group .k-export-btn span { overflow: hidden; text-overflow: ellipsis; }

  /* Verlauf als Blatt von unten ("Deine letzten Werke") */
  .k-verlauf-scrim { display: block; position: fixed; inset: 0; z-index: 400; background: rgba(22, 29, 56, .38); }
  .k-verlauf-blatt {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 410; max-height: 78dvh; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--k-r-gross) var(--k-r-gross) 0 0; background: var(--k-grund); box-shadow: var(--k-schatten-canvas);
  }
  .k-verlauf-zu {
    align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none;
    border-radius: 50%; background: transparent; color: var(--k-text-leise); cursor: pointer;
  }
  .k-verlauf-zu svg { width: 18px; height: 18px; }
  .k-verlauf-zu:focus-visible { outline: none; box-shadow: var(--k-fokus); }
  .k-verlauf-slot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .k-verlauf-slot .k-werke-liste-wrap { flex: 1 1 auto; min-height: 0; }
  .k-verlauf-slot .k-werke-liste { grid-template-columns: repeat(3, 1fr); }
}