/* ═══════════════════════════════════════════════════════════════════════
   KONTURO – STYLESHEET
   ═══════════════════════════════════════════════════════════════════════
   Struktur dieser Datei (für zukünftige Korrekturen):

     1. Variablen & Reset          – Farben, Grundmaße, Box-Modell
     2. Basis-Layout               – App-Rahmen, Skizze, Formularbereich
     3. Bausteine                  – Buttons, Eingabefelder, Overlays/Popups
     4. Kontur-Komponenten         – Kompass, Timeline, Listen, 3D-Ansicht
     5. Light Mode                 – liegt direkt bei den jeweiligen Regeln
        (:root[data-theme="light"] …), NICHT in einem eigenen Block, damit
        helle und dunkle Variante derselben Komponente nebeneinander bleiben
     6. Animationen (@keyframes)
     7. RESPONSIVE (ganz am Ende, in genau EINEM Block pro Breakpoint):
          a) Tablet/Desktop  – (min-width: 900px) and (min-height: 620px)
          b) Sehr breit      – (min-width: 1400px) and (min-height: 700px)
          c) Smartphone      – (max-width: 899px)
             → letzter Abschnitt darin: nur-mobile Schriftgrößen-Anhebung
          d) Standalone/PWA  – (display-mode: standalone/fullscreen/minimal-ui)

   Vorher gab es denselben Breakpoint an bis zu drei verschiedenen Stellen
   in der Datei (z. B. „min-width:900px + min-height:620px“ dreifach,
   „max-width:899px“ zweifach) sowie mehrere doppelte/überschreibende
   Basis-Regeln (u.a. body, .app, .btn, .sketch). Das ist hier zu je EINEM
   Block je Selektor bzw. Breakpoint zusammengeführt. Für eine Korrektur an
   einer Komponente jetzt IMMER nur noch eine Stelle suchen: die Basisregel
   oben und – falls responsive – genau einen der vier Blöcke unten.
   ═══════════════════════════════════════════════════════════════════════ */



/* ── Farben ── */
:root {
  --bg: #090d0c;
  --card: #111715;
  --card2: #151d1b;
  --text: #f2f7f5;
  --muted: #8d9a96;
  --line: rgba(255,255,255,.09);
  --accent: #00e1c3;
  --accent2: #7cfbe9;
  --accent-rgb: 0,225,195;
  --danger: #ff7474;
  --window-close-hover: #c42b1c;
  --window-close-active: #a4261a;
  --field: #0d1211;
  --shadow: 10px 0 0 rgba(0,10,10,.38);
  --kontur-pad-height: clamp(220px, 28vh, 260px);
  --control-surface: rgba(255,255,255,.025);
  --control-surface-hover: rgba(255,255,255,.05);
  --control-surface-active: rgba(255,255,255,.09);
  --control-divider: var(--line);
  --control-radius: 14px;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  background: #071311;
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: var(--app-height, 100vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  margin: 0;
  color: var(--text);
  font-family: -apple-system, system-ui, sans-serif;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

button, input {
  font: inherit;
}


/* ── App-Container ── */
.app {
  width: min(100%, 480px);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  transition: height 0.15s ease;
  max-width: 640px;
  margin: 0 auto;
}


/* ── Buttons (z.B. Kopieren/Zurücksetzen im G-Code-Bereich) ── */
.btn {
  height: 30px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn.show {
  display: flex;
}


/* ── Skizze ── */
.sketch {
  flex: 1 1 auto;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent),
        #0c1110;
  max-height: 32vh;
}

.cnc-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  display: block;
}

/* SVG Stil */
.shape {
  fill: #676767;
  stroke: #f4f4f4;
  stroke-width: 3.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.shape-nofill {
  fill: none;
  stroke: #f4f4f4;
  stroke-width: 3.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.shape-highlight {
  fill: none;
  stroke: var(--accent2);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .9;
}

/* Andere (nicht aktive) Konturen als gedämpfte Hintergrund-Ebene, damit man
   beim Bearbeiten einer zweiten Kontur (z.B. Innenkontur) weiterhin sieht,
   wo die erste liegt. */
.kontur-bg-contour {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 5 4;
  opacity: .35;
  pointer-events: none;
}

.kontur-bg-contour--aussen {
  stroke: var(--muted);
}

.kontur-bg-contour--innen {
  stroke: var(--accent2);
}

.kontur-bg-contour--gewinde {
  stroke: var(--accent2);
  stroke-dasharray: 3 3;
  /* Mindestens so stark wie die normale Segment-Linie (.shape-nofill:
     3.5px), Musti wollte eher 1.5× - 5.25px, damit die Linie trotz
     Strichelung gut erkennbar bleibt. */
  stroke-width: 5.25;
  /* WICHTIG: .kontur-bg-contour (Basis-Klasse) setzt opacity:.35 für die
     gedämpfte Darstellung anderer Konturen - das erbte diese Regel bisher
     mit, wodurch die Linie trotz dickerem Strich neben der deckenden
     aktiven Kontur kaum zu erkennen war (Musti's Screenshot). Hier
     explizit deutlich weniger gedämpft, da die Gewinde-Markierung anders
     als die "andere Kontur"-Dämpfung bewusst gut sichtbar bleiben soll. */
  opacity: .9;
}

/* Maßstäbliche Längsprojektion der 3D-Formelemente in der Hauptskizze.
   Gestrichelt, weil diese Kanten nicht zur gedrehten G-Code-Kontur gehören. */
.kontur-formelement-projection {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 4;
  opacity: .8;
  pointer-events: none;
}

.kontur-formelement-projection--innen {
  stroke: var(--muted);
}

/* Gewinde-Kontur-Vorschau (im Gewinde-Editor selbst): gestrichelte Linie in
   Akzentfarbe, zeigt Start-Z bis Ziel-Z bei konstantem Gewinde-Ø. Bewusst
   auf der ursprünglichen (dünneren) Stärke belassen - die verstärkte
   1.5×-Variante (s.o.) gilt NUR für die Anzeige in der normalen Kontur-
   Ansicht (.kontur-bg-contour--gewinde), nicht hier im eigenen Editor. */
.kontur-gewinde-preview-line {
  fill: none;
  stroke: var(--accent2);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
}

/* Formelement-Stirnansicht (Sechskant/Vierkant): gestrichelter Kreis =
   umgebender Kontur-Ø an der Formelement-Position, Polygon = das
   Formelement selbst. Außen (konvex, auf Rundmaterial gefräst): gefüllt in
   Akzentfarbe, deutlich sichtbar. Innen (Ausnehmung/Bohrungs-Sechskant):
   umgekehrt - heller/"ausgeschnitten" wirkend, gestrichelter Rand, damit es
   wie ein Loch statt wie ein aufgesetztes Teil wirkt. */
.kontur-formelement-preview-circle {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
  opacity: .5;
}

.kontur-formelement-preview-shape {
  fill: rgba(var(--accent-rgb), .28);
  stroke: var(--accent2);
  stroke-width: 3;
  stroke-linejoin: round;
}

.kontur-formelement-preview-shape--innen {
  fill: var(--sketch-bg, rgba(0,0,0,.35));
  stroke-dasharray: 4 3;
}

/* Gewinde-Tab-Icon: abstrakte Gewindeprofil-Wellenlinie, bewusst KEINE
   Schrauben-Grafik, s.
   Musti's Wunsch). Nutzt currentColor, damit es die aktive/inaktive
   Tab-Farbe automatisch mitgeht. */
.kontur-contour-tab-icon {
  width: 16px;
  height: 9px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .85;
}

.dim-line, .dim-ext {
  stroke: #f4f4f4;
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svg-label {
  fill: #f4f4f4;
  font-size: 33px;
  font-weight: 650;
  font-family: system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
}

.svg-hot {
  cursor: pointer;
}

.svg-hot.active {
  filter: drop-shadow(0 0 7px rgba(var(--accent-rgb),.8));
}

.svg-hot.active .svg-label {
  fill: var(--accent2);
}


/* ── Eingabe-Bereich ── */
.form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--line);
}

input {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--field);
  color: var(--text);
  border-radius: 10px;
  padding: 0 10px;
  font-size: 18px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  scroll-margin-bottom: 160px;
  scroll-margin-top: 120px;
}

/* Automatisch aus der Konturkette berechnete Werte bleiben sichtbar, sind
   aber keine festen Nutzervorgaben. Die graue Schrift macht diesen Status
   in allen Eingabeformularen eindeutig erkennbar. */
input[data-auto-filled="1"] {
  color: var(--muted) !important;
}

input::placeholder {
  color: rgba(242,247,245,.24);
}

input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.12);
}


/* ── Eingerahmte Labels (Label sitzt im Rahmen, wie in der Android-App) ── */
.field-framed {
  margin-top: 4px;
}

.field-framed fieldset {
  margin: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  padding: 0 10px;
  background: var(--field);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.field-framed legend {
  padding: 0 6px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.field-framed input, .field-framed select {
  width: 100%;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  outline: none;
  padding: 0 2px;
  appearance: none;
  -webkit-appearance: none;
}

.field-framed select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%238d9a96' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 22px;
}


/* Nativen Browser-Fokusring/-Schatten direkt im Eingabefeld unterdrücken
       (die optische Fokus-Markierung liefert allein der Rahmen via :focus-within) */
.field-framed input:focus, .field-framed select:focus {
  outline: none;
  box-shadow: none;
}

.field-framed:focus-within fieldset {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.12);
}

.field-framed:focus-within legend {
  color: var(--accent2);
}


/* ── Hinweis-Popup (Fase: keine DIN-Norm) ── */
.info-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.info-overlay.open {
  display: flex;
}

.info-modal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  max-width: 340px;
  width: 100%;
  padding: 20px;
  box-shadow: var(--shadow);
}

.info-modal h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--accent2);
}

.info-modal p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.info-modal-close {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb),.4);
  background: rgba(var(--accent-rgb),.10);
  color: var(--accent2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}


/* ── Echter Light Mode ── */
:root[data-theme="light"] {
  --bg: #f0f2f4;
  --card: #ffffff;
  --card2: #e8eaed;
  --text: #1a1a1a;
  --muted: #6b7280;
  --line: rgba(0,0,0,.10);
  --accent: #d97706;
  --accent2: #b45309;
  --accent-warm: #b45309;
  --accent-rgb: 217,119,6;
  --danger: #d94b4b;
  --field: #ffffff;
  --gcode-color: #1a1a1a;
  --shadow: 0 4px 16px rgba(0,0,0,.08);
  --control-surface: rgba(0,0,0,.025);
  --control-surface-hover: rgba(0,0,0,.07);
  --control-surface-active: rgba(0,0,0,.12);
}


/* Leuchtender Schimmer unten */
:root[data-theme="light"] .sketch {
  background: #f8f9fa;
}

:root[data-theme="light"] .shape {
  fill: #d0d4d8;
  stroke: #1a1a1a;
}

:root[data-theme="light"] .shape-nofill {
  fill: none;
  stroke: #1a1a1a;
}

:root[data-theme="light"] .dim-line, :root[data-theme="light"] .dim-ext {
  stroke: #1a1a1a;
}

:root[data-theme="light"] .svg-label {
  fill: #1a1a1a;
}

:root[data-theme="light"] .svg-hot.active {
  filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
}

:root[data-theme="light"] .svg-hot.active .svg-label {
  fill: #000000;
  font-weight: 850;
}

:root[data-theme="light"] .form {
  border-top-color: var(--line);
}

:root[data-theme="light"] .info-modal-close {
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}

:root[data-theme="light"] input {
  border-color: rgba(0,0,0,.34);
  box-shadow: none;
}

:root[data-theme="light"] input:focus {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

:root[data-theme="light"] input::placeholder {
  color: rgba(0,0,0,.28);
}

:root[data-theme="light"] .field-framed fieldset {
  border-color: rgba(0,0,0,.34);
  box-shadow: none;
}

:root[data-theme="light"] .field-framed:focus-within fieldset {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

:root[data-theme="light"] .field-framed input:focus, :root[data-theme="light"] .field-framed select:focus {
  outline: none;
  box-shadow: none;
}

:root[data-theme="light"] .btn {
  border-color: rgba(0,0,0,.15);
  background: rgba(0,0,0,.06);
  color: #1a1a1a;
}


/* ── Footer mit Impressum/Datenschutz ── */
.legal-sep {
  margin: 0 8px;
}


/* Tablet / Desktop */

/* ── Kontur-Programmierung ──────────────────────────────────────────────── */
.kontur-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--control-divider);
  border-radius: var(--control-radius);
  overflow: hidden;
  background: var(--control-surface);
}

/* Der Startscreen-Container trägt zusätzlich zu .kontur-start-screen auch
   die Klasse .kontur-wrap (siehe screen.js) und hat dadurch ungewollt den
   Rahmen/Hintergrund/gap:0 des Editor-„Bedienfelds“ oben geerbt – dort gibt
   es nur ein einziges Kind-Element, ein Karten-Rahmen war nie beabsichtigt
   und hat die Start-Ø/Start-Z-Felder sichtbar verschoben. Gezielt auf den
   alten, unverpackten Look zurücksetzen (nur hier, Editor bleibt unberührt). */
.kontur-wrap.kontur-start-screen {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  /* Höher spezifisch als die Desktop-/Mobile-Overrides von .kontur-wrap
     weiter unten (min-height:0 bzw. justify-content:flex-start), damit die
     Zentrierung der Start-Felder auf allen Bildschirmgrößen erhalten bleibt. */
  min-height: 55vh;
  justify-content: center;
}

.kontur-start-screen {
  min-height: 55vh;
  justify-content: center;
}

.kontur-start-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.kontur-start-fields {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.kontur-start-fields .field-framed {
  width: 130px;
}

.kontur-start-hint {
  text-align: center;
  width: 100%;
  max-width: none;
  margin: 0;
  white-space: nowrap;
}

.kontur-startpoint-modal .kontur-start-fields {
  width: 100%;
}

.kontur-startpoint-modal .kontur-start-filename {
  width: 100%;
}

.kontur-startpoint-modal .kontur-start-filename input::placeholder {
  color: var(--muted);
  opacity: .62;
}

.kontur-startpoint-modal .kontur-start-fields .field-framed {
  flex: 1 1 0;
  min-width: 0;
}

.kontur-row {
  display: flex;
  gap: 8px;
}

/* Die eigentlichen direkten Kinder von .kontur-row sind .field-framed-Divs
   (input/select stecken jeweils noch in einem fieldset darin) - die
   vorherige "input"-Regel griff daher nie und die Felder teilten sich die
   Breite NICHT gleichmäßig, sondern nach Inhaltsbreite (Musti's Beispiel:
   Start-Z/Ziel-Z im Gewinde-Formular). Jetzt auf den tatsächlichen
   direkten Kind-Container korrigiert - wirkt sich auf ALLE .kontur-row-
   Stellen in der App gleichermaßen aus (dort war eine echte Gleichver-
   teilung ohnehin immer schon die Absicht). */
.kontur-row > .field-framed {
  flex: 1;
  min-width: 0;
}

.kontur-row input {
  flex: 1;
}

.kontur-section-divider {
  height: 1px;
  background: var(--control-divider);
  margin: 0px 0;
}

/* Modifier NUR für den Divider zwischen "Aktuelle Position" und Kompass:
   der liegt direkt in .kontur-wrap (padding:0), bekommt daher OHNE diesen
   Zusatz keinen seitlichen Einzug - anders als der Divider oberhalb von
   "3D Ansicht/G-Code", der automatisch vom padding seines Elternelements
   .kontur-editor-status eingerückt wird. Werte hier spiegeln GENAU dessen
   padding je Breakpoint (10px Basis, s.u. 12px ≥900px, 8px Mobile), damit
   beide Trennlinien optisch identisch eingerückt wirken. */
.kontur-section-divider--inset {
  margin: 0 10px;
}


/* Rechteckiger Kompass */
.kontur-pad-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 4px 0;
}

.kontur-pad {
  position: relative;
  width: 100%;
  height: var(--kontur-pad-height, clamp(220px, 28vh, 260px));
  margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  /* Die Mittelgruppe ist insgesamt 12 px groesser als ihre 2×2-Rasterzelle.
     Dadurch gewinnt jeder der vier Buttons etwa 6 px in Breite und Hoehe,
     waehrend Groesse und Position des aeusseren Kompasses gleich bleiben. */
  --kontur-center-width: calc(100% + 12px);
  --kontur-center-height: calc(100% + 12px);
}


/* Alte Kreis-, Diagonal- und Mittellinien vollständig ausblenden. */
.kontur-pad::before, .kontur-pad::after, .kontur-pad-center-group::before, .kontur-pad-center-group::after {
  content: none;
  display: none;
}

.kontur-pad-btn, .kontur-trans-mini {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text, #eee);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* Trennlinien nur noch zwischen den mittleren Mini-Buttons (C/R/CW/CCW) –
   die 8 äußeren Richtungstasten bleiben absichtlich ohne Trennlinien. */
.kontur-trans-mini {
  border-right: 1px solid var(--control-divider);
  border-bottom: 1px solid var(--control-divider);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.kontur-compass-icon {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transform-origin: center;
}

.kontur-dir-e {
  transform: rotate(0deg);
}

.kontur-dir-se {
  transform: rotate(45deg);
}

.kontur-dir-s {
  transform: rotate(90deg);
}

.kontur-dir-sw {
  transform: rotate(135deg);
}

.kontur-dir-w {
  transform: rotate(180deg);
}

.kontur-dir-nw {
  transform: rotate(225deg);
}

.kontur-dir-n {
  transform: rotate(270deg);
}

.kontur-dir-ne {
  transform: rotate(315deg);
}

.kontur-pad-btn:hover, .kontur-trans-mini:hover {
  background: rgba(255,255,255,.05);
}

.kontur-pad-btn:active, .kontur-trans-mini:active {
  background: rgba(255,255,255,.10);
}

.kontur-pad-btn.active {
  background: rgba(var(--accent-rgb),.16);
  color: var(--accent2);
}

.kontur-pad-btn:disabled, .kontur-trans-mini:disabled {
  opacity: .2;
  cursor: not-allowed;
}

.kontur-pad-center-group {
  position: static;
  grid-column: 2;
  grid-row: 2;
  z-index: 2;
  width: var(--kontur-center-width);
  height: var(--kontur-center-height);
  justify-self: center;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,.018);
}

/* Nur die Trennlinien zwischen den vier mittleren Buttons behalten. */
.kontur-trans-mini:nth-child(2n) {
  border-right: 0;
}

.kontur-trans-mini:nth-child(n/**/+3) {
  border-bottom: 0;
}

.kontur-center-cw, .kontur-center-ccw {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.kontur-step-trans {
  opacity: .75;
  margin-left: -2px;
}

.kontur-cw-btn {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text, #eee);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.kontur-cw-btn-mirror {
  transform: scaleX(-1);
}

.kontur-cw-btn.active {
  background: rgba(var(--accent-rgb),.16);
  border-color: var(--accent2);
  color: var(--accent2);
}

.kontur-conn-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.kontur-axis-toggle {
  display: flex;
  gap: 8px;
}

.kontur-conn-toggle {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kontur-axis-btn {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text, #eee);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.kontur-conn-toggle .kontur-axis-btn {
  padding: 6px 4px;
}

.kontur-axis-btn.active {
  background: rgba(var(--accent-rgb),.16);
  border-color: var(--accent2);
  color: var(--accent2);
}

.kontur-radius-preview {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.kontur-radius-preview svg {
  width: 100%;
  height: 100px;
  display: block;
}

.kontur-radius-preview .krp-line {
  stroke: rgba(255,255,255,.35);
  stroke-width: 2;
  fill: none;
}

.kontur-radius-preview .krp-arc {
  stroke: var(--accent2);
  stroke-width: 3;
  fill: none;
}

.kontur-radius-preview .krp-dot {
  fill: var(--accent2);
}

.kontur-radius-preview .krp-empty {
  font-size: 11px;
  opacity: .5;
  padding: 0 8px;
  text-align: center;
}

.kontur-add-btn {
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--accent2);
  background: rgba(var(--accent-rgb),.10);
  color: var(--accent2);
  font-weight: 800;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.kontur-add-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb),.18);
}

/* Ruhiger, kontinuierlicher Ladebalken ohne künstliche Prozentstufen. Die
   transform-Animation kann der Browser flüssiger zeichnen als Breitenänderungen. */
.kontur-3d-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.kontur-3d-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(45, 212, 191, 0);
  transition: background 180ms ease;
}

.kontur-3d-btn.is-loading:disabled {
  opacity: 1;
  cursor: wait;
  color: #f4fffd;
}

.kontur-3d-btn.is-loading::before {
  background: rgba(45, 212, 191, 0.12);
}

.kontur-3d-btn.is-loading::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(45,212,191,0.72), transparent);
  transform: translate3d(-110%, 0, 0);
  animation: kontur-3d-loading-slide 2.4s ease-in-out infinite;
  will-change: transform;
}

/* Im hellen Farbschema verwendet der Loader Konturos warme Orange-/
   Bernsteinpalette statt der türkisfarbenen Darkmode-Lichtspur. */
:root[data-theme="light"] .kontur-3d-btn.is-loading:disabled {
  color: #92400e;
  border-color: #d97706;
  background: #fff7ed;
}

:root[data-theme="light"] .kontur-3d-btn.is-loading::before {
  background: rgba(217, 119, 6, 0.12);
}

:root[data-theme="light"] .kontur-3d-btn.is-loading::after {
  background: linear-gradient(90deg, transparent, rgba(217,119,6,0.68), transparent);
}

@keyframes kontur-3d-loading-slide {
  from { transform: translate3d(-110%, 0, 0); }
  to   { transform: translate3d(348%, 0, 0); }
}

.kontur-hint {
  font-size: 12px;
  opacity: .6;
  margin: 0;
}

.kontur-hint-tight {
  margin-top: 6px;
  text-align: justify;
}

/* Zwei Eingabefelder nebeneinander (z.B. Schlichtaufmaß X/Z) */
.field-framed-split {
  display: flex;
  gap: 8px;
}
.field-framed-split fieldset { flex: 1; min-width: 0; }

/* Werkzeuge-je-Kontur-Liste im ⌀R-Popup (seit v3.0.70): eine Zeile pro
   Außen-/Innenkontur bzw. Nut, jeweils mit eigenem Schneidenradius/
   Schlichtaufmaß(+Werkzeugbreite bei Nut) - ersetzt die frühere einzelne
   globale Eingabe. */
.kontur-srk-list-modal {
  max-height: 70vh;
  overflow-y: auto;
}
.kontur-srk-row {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--control-divider);
}
.kontur-srk-row:last-of-type {
  border-bottom: none;
  margin-bottom: 4px;
  padding-bottom: 0;
}
.kontur-srk-row-label {
  font-size: 13px;
  font-weight: 700;
  opacity: .85;
  margin-bottom: 6px;
}
.kontur-srk-row .field-framed-split fieldset { min-width: 84px; }

/* Werkzeugspitzen-Richtung-Skizze im Schneidenradius-Popup: 3x3-Raster wie
   auf echten Werkzeugtabellen-Bildschirmen. Die zur vorhandenen Kontur
   passenden Lagen werden automatisch hervorgehoben; reine Orientierung,
   nicht interaktiv (s. Kommentar controller.js). */
.kontur-radiuskomp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 150px;
  margin: 10px auto 0;
}
.krk-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--field);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  font-size: 13px;
  opacity: .5;
}
.krk-cell.krk-center {
  opacity: 1;
  color: var(--text);
  border-style: dashed;
}
.krk-cell.krk-active {
  opacity: 1;
  font-weight: 800;
  border-width: 2px;
}
.krk-cell.krk-aussen {
  color: var(--accent2);
  border-color: var(--accent2);
}
.krk-cell.krk-innen {
  color: var(--accent);
  border-color: var(--accent);
}
.krk-cell.krk-neutral {
  color: var(--accent2);
  border-color: var(--accent2);
}

.kontur-mitte-details {
  margin: 8px 0;
}

.kontur-mitte-details summary {
  font-size: 13px;
  opacity: .75;
  cursor: pointer;
  padding: 4px 0;
}

.kontur-mitte-details[open] summary {
  opacity: 1;
  margin-bottom: 6px;
}

.kontur-sketch {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Safari darf das SVG beim horizontalen Ziehen nicht als auswählbaren
     Seiteninhalt bzw. natives Drag-Bild behandeln. Konturos eigene
     Pointer-Steuerung für Auswahl, Pan und Zoom bleibt davon unberührt. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.kontur-sketch .cnc-svg {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.kontur-sketch-zoom-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.kontur-sketch-zoom-wrap .kontur-sketch {
  flex: 1;
  min-height: 0;
  display: flex;
}

.kontur-zoom-controls {
  position: absolute;
  top: 2px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}

.kontur-zoom-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,26,25,.85);
  color: var(--text, #eee);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

:root[data-theme="light"] .kontur-zoom-btn {
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.12);
}

.kontur-zoom-btn.active {
  background: rgba(var(--accent-rgb),.22);
  border-color: var(--accent2);
  color: var(--accent2);
}

.kontur-zoom-btn:hover:not(.active) {
  border-color: var(--accent2);
  color: var(--accent2);
}

.kontur-ruler-toggle {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 6;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,26,25,.85);
  color: var(--text, #eee);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.kontur-ruler-toggle svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kontur-ruler-toggle.active {
  color: var(--accent2);
  border-color: var(--accent2);
  background: rgba(var(--accent-rgb),.22);
}

:root[data-theme="light"] .kontur-ruler-toggle {
  background: rgba(255,255,255,.9);
  border-color: rgba(0,0,0,.12);
}

.kontur-ruler-bg {
  fill: transparent;
  fill-opacity: 0;
}

.kontur-ruler-axis,
.kontur-ruler-tick {
  stroke: currentColor;
  stroke-opacity: .48;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.kontur-ruler-tick--minor { stroke-opacity: .28; }

.kontur-ruler-text {
  fill: currentColor;
  fill-opacity: .68;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 500;
  user-select: none;
}

.kontur-ruler-crosshair {
  fill: none;
  stroke: rgba(8,17,25,.96);
  stroke-width: 1.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.95));
}

.kontur-ruler-crosshair circle {
  fill: var(--accent2);
  stroke: rgba(255,255,255,.82);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.kontur-ruler-crosshair line {
  vector-effect: non-scaling-stroke;
}

:root[data-theme="light"] .kontur-ruler-crosshair {
  stroke: rgba(255,255,255,.82);
}

.kontur-seg-label {
  position: absolute;
  top: 6px;
  left: 40px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(20,26,25,.85);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

/* WICHTIG: die explizite display:inline-flex oben überschreibt sonst die
   Browser-Standardregel "[hidden]{display:none}" (gleiche Spezifität,
   Autor-Regel gewinnt IMMER gegen User-Agent-Regel) - das Badge blieb
   dadurch nach v2.6.218 IMMER sichtbar, auch mit hidden-Attribut/
   .hidden=true (Musti's Screenshot: leeres Badge über der Segment-
   Positionsanzeige). Explizite [hidden]-Regel mit höherer Spezifität
   stellt das Ausblenden wieder sicher. */
.kontur-seg-label[hidden] {
  display: none;
}

:root[data-theme="light"] .kontur-seg-label {
  background: rgba(255,255,255,.9);
}

.kontur-formelement-label-icon {
  font-size: 1.35em;
  line-height: 1;
}

.kontur-step-picked {
  box-shadow: 0 0 0 2px var(--accent2);
}

.kontur-sketch .cnc-svg {
  width: auto;
  flex: 1;
  min-height: 0;
  max-width: 100%;
}

:root[data-theme="light"] .kontur-pad-btn, :root[data-theme="light"] .kontur-cw-btn {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}

/* Die Regel oben hat wegen :root[data-theme="light"] (zählt wie 2 Klassen)
   eine höhere Spezifität als die allgemeine .kontur-pad-btn:hover-Regel
   weiter unten im Stylesheet – sie gewann dadurch IMMER, auch beim Hovern,
   und überschrieb den Hover-Hintergrund komplett. Betraf NUR die äußeren
   8 Kompass-Tasten (.kontur-pad-btn), NICHT die 4 mittleren Mini-Buttons
   (.kontur-trans-mini), da die in der Regel oben gar nicht gelistet sind –
   genau das hat Musti beobachtet. Eigene, noch spezifischere Regel nötig. */
:root[data-theme="light"] .kontur-pad-btn:hover {
  background: var(--control-surface-hover);
}

:root[data-theme="light"] .kontur-pad-btn:active {
  background: var(--control-surface-active);
}

/* Dieselbe Spezifitätsfalle betrifft auch die Auswahl-Markierung der
   aktuell gewählten Richtung (.active, die Klasse – nicht :active) im
   Light Mode: ohne diese Regel würde die Akzent-Hervorhebung der
   ausgewählten Kompass-Taste ebenfalls von der Regel oben überschrieben. */
:root[data-theme="light"] .kontur-pad-btn.active {
  background: rgba(var(--accent-rgb),.16);
}

.kontur-list-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.kontur-mini-btn {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: inherit;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

.history-buttons {
  display: flex;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.025);
}

.history-buttons button {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  height: 42px;
}

.history-buttons button:last-child {
  border-right: none;
}

.history-buttons button:hover:not(:disabled) {
  background: rgba(255,255,255,.05);
}

.history-buttons button:active:not(:disabled) {
  background: rgba(255,255,255,.10);
}

.history-buttons button:disabled {
  opacity: .35;
  cursor: default;
}

.kontur-history-new {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.history-buttons .kontur-history-new-btn {
  color: var(--accent2);
  background: rgba(var(--accent-rgb), .18);
}

.history-buttons .kontur-history-new-btn:hover:not(:disabled) {
  color: var(--accent2);
  background: rgba(var(--accent-rgb), .28);
}

.history-buttons svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trash-icon {
  transform: scale(1.5);
}

.kontur-mini-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.kontur-mini-btn.active {
  background: rgba(var(--accent-rgb),.25);
  border-color: var(--accent2);
  color: var(--accent2);
}

.kontur-bottom-actions {
  display: flex;
  width: 100%;
  margin: 6px 0 0;
  border: 1px solid var(--control-divider);
  border-radius: var(--control-radius);
  overflow: hidden;
  background: var(--control-surface);
  margin-top: 0;
}

.kontur-bottom-actions button {
  flex: 1;
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: none;
  border-right: 1px solid var(--control-divider);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.kontur-bottom-actions button:last-child {
  border-right: none;
}

.kontur-bottom-actions button:hover:not(:disabled) {
  background: rgba(255,255,255,.05);
}

.kontur-bottom-actions button:active:not(:disabled) {
  background: rgba(255,255,255,.10);
}

.kontur-bottom-actions button:disabled {
  opacity: .35;
  cursor: not-allowed;
}


.kontur-3d-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}

/* Kopfleisten-Buttons: flach, nur Trennlinien, kleinere Schrift/Innenabstand
   (vorher liefen "◐ Querschnitt" & Co. sonst leicht in einen Zeilenumbruch).
   flex:1 lässt die Leiste automatisch die volle Breite einnehmen UND die
   Buttons dabei gleichmäßig verteilen (Musti's Wunsch), statt eng am
   Inhalt geschrumpft am linken Rand zu kleben. */
.kontur-3d-topbar-actions .kontur-mini-btn {
  flex: 1;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.14);
  border-radius: 0;
  background: transparent;
  padding: 6px 8px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Das Schnittlicht ist bewusst nur ein kleines Symbol direkt neben dem
   Querschnitt-Schalter. So bleibt die Kopfleiste auch auf dem Smartphone
   einzeilig; der Querschnitt-Button erhält dafür etwas mehr Platz. */
.kontur-3d-topbar-actions [data-3d-action="cross-section"] {
  flex-grow: 1.35;
}

.kontur-3d-topbar-actions .kontur-section-light-btn {
  flex: 0 0 40px;
  padding-inline: 4px;
  font-size: 16px;
}

.kontur-3d-topbar-actions .kontur-mini-btn:last-child {
  border-right: 0;
}

.kontur-3d-topbar-actions .kontur-mini-btn:hover:not(:disabled) {
  /* .kontur-3d-overlay hat IMMER einen dunklen (jetzt dunkelblauen, #0a1420)
     Hintergrund, unabhängig vom Theme – hier absichtlich fest hell statt der
     theme-abhängigen Variable (die im Light Mode auf Schwarz kippt und auf
     dunklem Grund unsichtbar wäre). */
  background: rgba(255,255,255,.10);
}

.kontur-3d-topbar-actions .kontur-mini-btn:active:not(:disabled) {
  background: rgba(255,255,255,.14);
}

.kontur-3d-topbar-actions .kontur-mini-btn.active {
  background: rgba(var(--accent-rgb),.18);
  color: var(--accent2);
}

/* Smartphone: Der Werkzeugbereich braucht einen eigenen Scrollraum. Ohne ihn
   wird sein unteres Ende vom höhenbegrenzten App-Container abgeschnitten. */
.kontur-3d-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #0a1420;
  display: flex;
  flex-direction: column;
}

.kontur-3d-overlay[hidden] {
  display: none;
}

/* WebGL darf beim Aufbau bereits die endgültige Fenstergröße ausmessen,
   bleibt aber bis zum fertigen Modell unsichtbar. Der 3D-Ladebalken im
   Formular wird dadurch nicht von einer leeren Bühne verdeckt. */
.kontur-3d-overlay.is-preparing {
  visibility: hidden;
  pointer-events: none;
}

.kontur-3d-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  color: #eee;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.kontur-3d-canvas-wrap {
  flex: 1;
  min-height: 0;
  touch-action: none;
  position: relative;
}

.kontur-3d-canvas-holder {
  position: absolute;
  inset: 0;
}

.kontur-3d-canvas-holder canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.kontur-3d-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.kontur-3d-ctrl-group {
  pointer-events: auto;
  display: flex;
  gap: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}

/* Modus-Leiste (Musti's Wunsch): statt vieler einzelner Richtungs-/Zoom-
   Buttons steuert man Drehen/Verschieben/Zoomen/Schnittfläche-drehen jetzt
   direkt per Fingerziehen auf dem Objekt (deutlich präziser) - diese 4
   Buttons legen nur noch fest, WAS ein Ein-Finger-Zug gerade bewirkt.
   Zwei-Finger-Pinch (Zoom) und Zwei-Finger-Zug (Verschieben) funktionieren
   IMMER zusätzlich, unabhängig vom gewählten Modus. */
.kontur-3d-mode-group button {
  padding: 9px 12px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: #eee;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.kontur-3d-mode-group button:last-child {
  border-right: 0;
}

.kontur-3d-mode-group button:hover:not(:disabled) {
  background: rgba(255,255,255,.10);
}

.kontur-3d-mode-group button.active {
  background: rgba(var(--accent-rgb),.28);
  color: #fff;
}

.kontur-3d-mode-group button:disabled {
  opacity: .35;
  cursor: default;
}

.kontur-3d-hint {
  text-align: center;
  font-size: 12px;
  opacity: .6;
  color: #eee;
  padding: 8px 0 max(10px, env(safe-area-inset-bottom));
  margin: 0;
}

:root[data-theme="light"] .kontur-mini-btn {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}


/* ── Kontur: aktuelle Positions-Infobox ──────────────────────────────────── */
.kontur-current-box {
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

.kontur-current-box-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.kontur-position-title-accent {
  color: var(--accent2);
}

:root[data-theme="light"] .kontur-current-box {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}


/* ── Kontur: Schritt-Icons unter der SVG (horizontale Timeline) ─────────── */
.kontur-sketch-row {
  display: flex;
  width: 100%;
  gap: 6px;
  flex: 1;
  min-height: 0;
  max-height: 32vh;
}

.kontur-steps {
  width: 100%;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0;
}

.kontur-steps-inner {
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
  align-items: center;
  width: max-content;
  min-width: 100%;
  margin-left: auto;
}

.kontur-steps-inner::before, .kontur-steps-inner::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
}

.kontur-step {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 18px;
  color: inherit;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Gewinde-Timeline-Icons zeigen die Gewindebezeichnung als Text (z.B.
   "M56x5.5x60") statt eines Symbols - dürfen laut Musti ruhig breiter als
   die quadratischen 44px-Segment-Icons sein (realistisch nur 2-3 Gewinde
   pro Kontur). MUSS nach der .kontur-step-Basisregel stehen (gleiche
   Spezifität, sonst gewinnt die spätere Basisregel in der Kaskade und
   erzwingt wieder die feste 44px-Breite/18px-Schrift - genau der Bug,
   den Musti gemeldet hat: Text ragte aus dem viel zu kleinen Button). */
.kontur-step-gewinde,
.kontur-step-formelement {
  width: auto;
  min-width: 44px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text, #f4f4f4);
}

.kontur-step-gewinde.active,
.kontur-step-formelement.active {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(var(--accent-rgb), .1);
}

.kontur-step:active {
  background: rgba(255,255,255,.12);
}

.kontur-step-unresolved {
  opacity: .45;
  border-style: dashed;
}

.kontur-step-unresolved:active {
  opacity: .65;
}

.kontur-step-start {
  color: var(--accent-warm, var(--accent2));
  cursor: pointer;
  font: inherit;
}

.kontur-step-insert {
  width: 42px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  opacity: .35;
  font-size: 17px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.kontur-step-insert:hover, .kontur-step-insert:active {
  opacity: 1;
  color: var(--accent2);
}

.kontur-insert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb),.12);
  border: 1px solid var(--accent2);
  font-size: 13px;
  font-weight: 700;
}

.kontur-error {
  color: #e05a5a;
  font-size: 12px;
  margin: 2px 0 0;
}

:root[data-theme="light"] .kontur-step {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
}


/* ── Kontur: ±-Vorzeichen-Umkehr-Button für Z-Felder ────────────────────── */
.kontur-z-field {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.kontur-z-field input {
  flex: 1;
  min-width: 0;
}

.kontur-sign-btn {
  flex-shrink: 0;
  width: 34px;
  border: 0px;
  background: transparent;
  color: var(--text, #eee);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

:root[data-theme="light"] .kontur-sign-btn {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}


/* ── Kontur: Segment-Bearbeiten-Popup ─────────────────────────────────────── */
.kontur-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 100;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.kontur-modal-overlay.open {
  display: flex;
}

.kontur-modal {
  background: #171d1c;
  border: 1px solid rgba(255,255,255,.12);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 85vh;
  overflow-y: auto;
  animation: konturSheetUp .18s ease-out;
}

:root[data-theme="light"] .kontur-modal {
  background: #fff;
  border-color: rgba(0,0,0,.12);
}

.kontur-modal-title {
  font-weight: 600;
  font-size: 14px;
  opacity: .85;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kontur-modal-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(var(--accent-rgb),.12);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  font-weight: 400;
  font-size: 10px;
}

.kontur-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.kontur-modal-actions .btn {
  display: inline-flex;
  flex: 1;
  justify-content: center;
}

/* "Weitere Kontur hinzufügen"-Popup: Auswahl-Buttons in derselben Optik wie
   die Speichern/Laden-Leiste (.kontur-btn-bar/.kontur-io-btn) */
.kontur-newcontour-options {
  margin: 4px 0;
}

/* Kontur-Umschalt-Leiste: gleicher flacher Balken-Stil wie
   .kontur-bottom-actions (3D Ansicht/G-Code) bzw. .kontur-io-bar
   (Speichern/Laden) – füllt die volle Breite, Tabs teilen sich den Platz
   automatisch gleichmäßig auf (flex:1), auch wenn neue Konturen dazukommen. */
/* Äußerer Rahmen um Tabs + "+"-Button gemeinsam - der "+"-Button bleibt
   dadurch IMMER sichtbar, nur der innere Tab-Bereich scrollt (Musti:
   "+" soll nicht mitscrollen). */
.kontur-contour-tabs-row {
  display: flex;
  width: 100%;
  margin: 6px 0 0;
  border: 1px solid var(--control-divider);
  border-radius: var(--control-radius);
  background: var(--control-surface);
  overflow: hidden;
}

.kontur-contour-tabs {
  display: flex;
  min-width: 0;
  flex: 1;
  /* Bei vielen Konturen quetschten sich die Tab-Beschriftungen bisher
     zusammen (flex:1 auf .kontur-contour-tab, s.u.) - jetzt wie die
     Timeline (#konturSteps) horizontal scrollbar, Tabs behalten dabei
     ihre volle Länge (Musti's Wunsch). */
  overflow-x: auto;
  overflow-y: hidden;
}

.kontur-contour-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* War flex:1 (schrumpft mit wachsender Tab-Anzahl) - jetzt feste
     natürliche Breite, der Container scrollt stattdessen horizontal. */
  flex: 0 0 auto;
  min-width: 120px;
  height: 42px;
  padding: 0 14px;
  border: none;
  border-right: 1px solid var(--control-divider);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  /* Long-Press (v2.6.143) wurde vom nativen Long-Press-Verhalten des
     Handys (Textauswahl-Lupe/Kontextmenü, spürbar als kurze Vibration)
     unterbrochen, bevor der eigene 600ms-Timer auslösen konnte - hier
     unterbunden, damit NUR die eigene Logik reagiert. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.kontur-contour-tab:last-child {
  border-right: none;
}

.kontur-contour-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kontur-contour-tabs-title {
  margin: 1px 0 0px 10px;
}

.kontur-contour-tab.active {
  color: var(--accent2);
  background: rgba(var(--accent-rgb), .10);
}

/* Long-Press-Kennzeichnung: Kontur ist von der 3D-Ansicht ausgeschlossen
   (Musti: viele Gewinde-Konturen verlangsamen das CSG-Laden, gezieltes
   Ausblenden einzelner Konturen für schnelles Prüfen). Dezent gedämpft +
   kleines Augen-Symbol, damit der Zustand auch ohne Tooltip erkennbar ist. */
.kontur-contour-tab.hidden3d {
  opacity: .5;
}

.kontur-contour-tab.hidden3d::after {
  content: "🚫";
  font-size: 10px;
  margin-left: 2px;
}

/* "+"-Button jetzt rechts in derselben Leiste wie die Kontur-Tabs (statt
   vorher separat in der oberen Icon-Leiste) – feste Breite statt flex:1,
   damit er den Tabs nicht unnötig Platz wegnimmt. */
.kontur-contour-tab-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  height: 42px;
  border: none;
  border-left: 1px solid var(--control-divider);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.kontur-contour-tab-add svg {
  width: 18px;
  height: 18px;
}

.kontur-contour-tab-add:hover:not(:disabled) {
  background: var(--control-surface-hover);
  color: var(--accent2);
}

.kontur-contour-tab-add:disabled {
  opacity: .3;
  cursor: default;
}

.kontur-contour-tab-del {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: .6;
}

.kontur-contour-tab-del::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateY(1px);
  z-index: -1;
  pointer-events: none;
}

.kontur-contour-tab-del:hover {
  opacity: 1;
  color: #fff;
}

.kontur-contour-tab-del:hover::before {
  background: var(--window-close-hover);
}

.kontur-contour-tab-del:active {
  opacity: 1;
  color: #fff;
}

.kontur-contour-tab-del:active::before {
  background: var(--window-close-active);
}

/* Reorder-Pfeile (‹ ›) in den Kontur-Tabs - dieselbe kleine, runde
   Trefferfläche wie das ✕-Löschen-Symbol, damit sie sich optisch
   einfügen. Größere Trefferfläche (20px statt 16px) ist hier vertretbar,
   da die Tabs deutlich breiter sind als die Timeline-Segment-Icons. */
.kontur-contour-tab-move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: .6;
  font-size: 15px;
  flex-shrink: 0;
}

.kontur-contour-tab-move:hover {
  opacity: 1;
  background: var(--control-surface-active);
}

.kontur-contour-tab-move--disabled {
  opacity: .2;
  pointer-events: none;
}

.kontur-modal-delete {
  border-color: rgba(220,60,60,.5) !important;
  background: rgba(220,60,60,.12) !important;
  color: #e05a5a !important;
}

.titlebar {
  font-weight: 800;
  font-size: 16px;
  opacity: .85;
  padding: 4px 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.titlebar-version {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 11px;
  opacity: .55;
  margin-left: -2px;
  margin-top: -4px;
}

.titlebar-filename {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  opacity: .72;
}

.titlebar-filename[hidden] {
  display: none;
}

.update-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 2px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb),.12);
  border: 1px solid var(--accent2, #00e1c3);
  font-size: 13px;
}

.update-banner[hidden] {
  display: none;
}

.update-banner button {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--accent2, #00e1c3);
  color: #04211d;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

:root[data-theme="light"] .update-banner button {
  /* --accent2 ist im Light Mode ein dunkles Orange (#b45309) - der dunkle
     Text von oben ist darauf kaum lesbar. Heller Text stattdessen. */
  color: #fff7ed;
}

.result-output-wrap {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px;
}

:root[data-theme="light"] .result-output-wrap {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}

#resultOutput {
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Kontur, deren Schneidenradius-Kompensation nicht berechenbar war (s.
   buildKonturCode()/gcode.js) - unkompensierte Bemaßung wird weiterhin
   angezeigt, aber gedämpft/grau statt in normaler Textfarbe. */
.kontur-gcode-fail {
  color: var(--muted);
  opacity: .7;
}

.result-toolbar {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid var(--control-divider);
  border-radius: var(--control-radius);
  overflow: hidden;
  background: var(--control-surface);
  /* Bei langem G-Code presste #resultOutput (flex:1, wächst UND schrumpft)
     die Toolbar in der Höhe zusammen, weil sie standardmäßig ebenfalls
     schrumpfbar ist (flex-shrink:1) - jetzt fest auf ihre natürliche
     Höhe verankert, unabhängig von der Codemenge darunter. */
  flex-shrink: 0;
}

.result-toolbar .btn {
  display: none;
  flex: 1;
  height: 42px;
  border: 0;
  border-right: 1px solid var(--control-divider);
  border-radius: 0;
  background: transparent;
}

.result-toolbar .btn:last-child {
  border-right: 0;
}

.result-toolbar .btn:hover:not(:disabled) {
  background: var(--control-surface-hover);
}

.result-toolbar .btn:active:not(:disabled) {
  background: var(--control-surface-active);
}

.result-toolbar .btn.show {
  display: inline-flex;
}

/* Gemeinsamer Schließen-Button der G-Code- und 3D-Ansicht. Beide Ansichten
   verwenden bewusst dieselben Maße, Schrift- und Interaktionsstile. */
.kontur-view-close-btn.btn {
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  flex: 0 0 35px;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1;
}

/* Die 3D-Buehne bleibt auch im Light Mode dunkel. Die allgemeine helle
   Theme-Regel fuer .btn darf das Schliessen-Zeichen deshalb hier nicht auf
   die dunkle Textfarbe umstellen. Der G-Code-Schliessen-Button bleibt davon
   unberuehrt und folgt weiterhin dem jeweiligen Theme. */
:root[data-theme="light"] #kontur3dClose.kontur-view-close-btn.btn {
  color: #f2f7f5;
}

#konturToEditorBtn.kontur-view-close-btn.btn:hover:not(:disabled),
#kontur3dClose.kontur-view-close-btn.btn:hover:not(:disabled) {
  background: var(--window-close-hover);
  color: #fff;
}

#konturToEditorBtn.kontur-view-close-btn.btn:active:not(:disabled),
#kontur3dClose.kontur-view-close-btn.btn:active:not(:disabled) {
  background: var(--window-close-active);
  color: #fff;
}

/* Auch die expliziten Schliessen-Aktionen der Zyklus-Infoblaetter folgen
   demselben Windows-aehnlichen Hover. Neutrale Aktionen wie Verstanden oder
   Abbrechen bleiben bewusst ausgenommen. */
[data-l95-info-close]:hover:not(:disabled),
[data-l97-info-close]:hover:not(:disabled) {
  background: var(--window-close-hover);
  color: #fff;
}

[data-l95-info-close]:active:not(:disabled),
[data-l97-info-close]:active:not(:disabled) {
  background: var(--window-close-active);
  color: #fff;
}

/* Jeder tatsächlich aktive Gewinde- oder Schruppzyklus wird mit der
   Akzentfarbe gekennzeichnet. Nur die Stellung "Zyklen" ohne aktiven
   Schruppzyklus bleibt neutral. */
#threadSystemBtn.active-cycle,
#roughingSystemBtn.active-cycle {
  color: var(--accent2);
  font-weight: 800;
}

.l95-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 7px;
  padding: 0;
  vertical-align: 2px;
  border: 1px solid var(--accent2);
  border-radius: 50%;
  background: rgba(var(--accent-rgb),.12);
  color: var(--accent2);
  cursor: pointer;
  font: 700 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.l95-info-btn::before {
  content: "i";
}

.l95-info-btn:hover,
.l95-info-btn:focus-visible {
  background: rgba(var(--accent-rgb),.24);
  outline: none;
}

.l95-info-modal {
  gap: 10px;
}

.l95-info-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--accent2);
  border-radius: 50%;
  color: var(--accent2);
  font-weight: 800;
}

.l95-info-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.l95-info-list > div {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--control-divider);
}

.l95-info-list > div:last-child {
  border-bottom: 0;
}

.l95-info-list dt {
  color: var(--accent2);
  font-weight: 800;
}

.l95-info-list dd {
  margin: 0;
  color: var(--text);
  line-height: 1.35;
}

.l95-info-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Schneidenradius-Komp.-Button (#konturRadiusKompBtn): dieselbe farbliche
   Hervorhebung, sobald ein Radius > 0 hinterlegt ist. */
#konturRadiusKompBtn.active-radiuskomp {
  color: var(--accent2);
  font-weight: 800;
}

:root[data-theme="light"] .result-toolbar .btn {
  background: transparent;
}


/* Container für die Editor-Seitenleiste. Auf dem Handy bleiben Formular und
   Datei-Leiste über display:contents im bisherigen Layout. */
.kontur-sidebar-shell {
  display: contents;
}

.kontur-io-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 0;
  padding: 8px calc(12px + env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-right, 0px));
  background: var(--control-surface);
  border-top: 1px solid rgba(255,255,255,.1);
  z-index: 50;
  overflow: hidden;
  border: 1px solid var(--control-divider);
  border-radius: var(--control-radius);
}

/* Gleiche Optik wie .kontur-io-bar (Speichern/Laden-Leiste), aber OHNE die
   fixe Bildschirm-Positionierung – für Button-Gruppen mitten im normalen
   Layout (Start-Screen Abbrechen/Übernehmen, Kontur-Art-Auswahl im
   "+"-Modal). Kinder bekommen weiterhin die Klasse .kontur-io-btn. */
.kontur-btn-bar {
  display: flex;
  gap: 0;
  background: var(--control-surface);
  overflow: hidden;
  border: 1px solid var(--control-divider);
  border-radius: var(--control-radius);
}

:root[data-theme="light"] .kontur-io-bar {
  border-top-color: rgba(0,0,0,.12);
}

.kontur-io-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border-right: 1px solid var(--control-divider);
}

/* Footer zeigt je nach Kontext passende Aktionsgruppen (normaler
   Editor: Speichern/Laden, G-Code-Ansicht: Speichern/Kopieren,
   Gewinde-Editor: Abbrechen/Übernehmen) - NUR dort (nicht bei den vielen
   anderen .kontur-io-btn-Verwendungen wie Modals/Start-Screen/Absolut-
   Inkrementell-Umschalter!) standardmäßig ausgeblendet, controller.js
   schaltet das passende Paar per .show frei. */
.kontur-io-bar .kontur-io-btn {
  display: none;
}

.kontur-io-bar .kontur-io-btn.show {
  display: block;
}

.kontur-io-btn.active {
  background: rgba(var(--accent-rgb), .16);
  color: var(--accent2);
}

.kontur-incremental-toggle {
  margin-bottom: 10px;
}

:root[data-theme="light"] .kontur-io-btn {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}

.legal-footer {
  text-align: center;
  padding: 10px 0 4px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(255,255,255,.4);
}

:root[data-theme="light"] .legal-footer {
  color: rgba(0,0,0,.4);
}

.legal-footer a, .legal-link-btn {
  color: rgba(255,255,255,.4);
  text-decoration: underline;
}

.legal-footer a:hover {
  color: var(--text);
}

.legal-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

:root[data-theme="light"] .legal-footer a, :root[data-theme="light"] .legal-link-btn {
  color: rgba(0,0,0,.4);
}

.kontur-gcode-mode-group {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
  width: 100%;
}

.kontur-gcode-mode-btn {
  margin: 0;
  border: 1px solid rgba(127,127,127,.55);
}

.kontur-gcode-mode-btn:first-child {
  border-radius: 12px 0 0 12px;
}

.kontur-gcode-mode-btn:last-child {
  margin-left: -1px;
  border-radius: 0 12px 12px 0;
}

.kontur-transition-assumption {
  display: none;
}


/* Im installierten PWA-Modus (Standalone) ausgeblendet – rechtliche
   Hinweise sind nur in der regulären Web-Ansicht relevant. */
.ios-standalone .legal-footer {
  display: none;
}


:root[data-kontur-view="code"] .sketch {
  display: none;
}

/* Im G-Code-Bereich enthält #form nur den "weiter bearbeiten"-Button –
   im kompakten Mobile-Layout hat die Sidebar-Shell (und #form darin)
   trotzdem flex:1 1 auto geerbt und dadurch die komplette Resthöhe als
   leere Fläche beansprucht. Außerdem stand die Speichern/Laden-Leiste
   dadurch VOR statt NACH der G-Code-Ausgabe. Reihenfolge korrigieren
   (G-Code-Box zuerst, Speichern/Laden danach, Fußzeile ganz unten) und
   die Sidebar-Shell auf ihre tatsächliche Inhaltshöhe schrumpfen lassen. */
:root[data-kontur-view="code"] .kontur-sidebar-shell {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  /* Desktop/Tablet gibt der Shell sonst einen sichtbaren Rahmen +
     Verlaufshintergrund (≥900px-Block) - da #form hier immer leer ist
     (s.u.), blieb dieser Rahmen als sichtbare "leere Box" über der
     Speichern/Laden-Leiste stehen (Musti's Screenshot). Hier explizit
     zurückgesetzt. */
  border: 0;
  border-radius: 0;
  background: none;
  /* WICHTIG: border/background allein reichten nicht - align-self:stretch
     (900px-Basisregel) lässt die Shell als GRID-Element weiterhin die
     komplette Zeilenhöhe einnehmen, UNABHÄNGIG von flex:0 0 auto (das
     betrifft nur ihre eigenen Kinder, nicht wie .app's Grid SIE selbst
     behandelt) - dadurch blieb trotz unsichtbarem Rahmen eine leere
     Fläche in Zeilenhöhe stehen. Jetzt zusätzlich auf den tatsächlichen
     Inhalt (nur die fixierte Speichern/Laden-Leiste) geschrumpft. */
  align-self: start;
}

/* Seit v2.6.106 ist #form in der Code-Ansicht IMMER leer (der "zurück"-
   Button lebt jetzt als Toolbar-Button, s. #konturToEditorBtn) - die reine
   Box (Padding/Rand der Sidebar-Shell) blieb aber weiterhin sichtbar und
   wirkte wie ein leeres Feld über der Speichern/Laden-Leiste (Musti's
   Screenshot, Desktop/Tablet). Komplett ausblenden statt nur schrumpfen. */
:root[data-kontur-view="code"] .kontur-sidebar-shell .form {
  display: none;
}

/* Speichern/Laden wieder wie früher unten am Bildschirmrand fixiert,
   statt (bedingt durch dieselbe Sidebar-Shell wie der "weiter
   bearbeiten"-Button) direkt hinter diesem Button zu stehen. */
:root[data-kontur-view="code"] .kontur-io-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  margin-top: 0;
  width: auto;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding:
    8px
    calc(12px + env(safe-area-inset-right, 0px))
    calc(8px + env(safe-area-inset-bottom, 0px))
    calc(12px + env(safe-area-inset-left, 0px));
}

/* Platz für die jetzt fixierte Leiste freihalten, damit sie die letzten
   G-Code-Zeilen nicht verdeckt. */
:root[data-kontur-view="code"] .app {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Der Button überläuft mit langem Text + nowrap sonst den Rahmen des
   umschließenden .kontur-wrap (overflow:hidden) und wirkt dadurch links/
   rechts vom Bildschirmrand abgeschnitten. Text darf hier umbrechen,
   zusätzlich mehr Randabstand für das umschließende Bedienfeld. */
:root[data-kontur-view="code"] .kontur-wrap {
  margin: 0 10px;
}

/* Die Fußzeile landete durch die jetzt fixierte Speichern/Laden-Leiste
   zwischen G-Code-Feld und Leiste statt (wie in der App sonst üblich)
   ganz unten – im Code-View blendet sie sich deshalb aus. */
:root[data-kontur-view="code"] .legal-footer {
  display: none;
}

/* G-Code-Feld soll zwischen dem Button oben und der Speichern/Laden-
   Leiste unten scrollen, statt vom App-Container (overflow:hidden)
   einfach unten abgeschnitten zu werden. */
:root[data-kontur-view="code"] .result-output-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:root[data-kontur-view="code"] #resultOutput {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-kontur-view="edit"] .result-output-wrap {
  display: none;
}

:root[data-kontur-view="start"] .sketch {
  display: none;
}

:root[data-kontur-view="start"] .result-output-wrap {
  display: none;
}

.kontur-start-dot {
  cursor: pointer;
}


/* ── Tablet / Desktop Layout ──────────────────────────────────────────────
   Mobile bleibt unverändert. Ab 900 px wird Konturo zu einer zweispaltigen
   Arbeitsfläche: große SVG/G-Code-Fläche links, Werkzeugleiste rechts. */

/* Sehr breite Displays: Seitenleiste nicht unnötig aufblähen, SVG bekommt
   den zusätzlichen Platz. */

/* ── UI-Feinschliff: Startbutton und Editor-Status ─────────────────────── */
.kontur-start-actions {
  width: 270px;
  max-width: 100%;
  margin-top: 10px;
  align-self: center;
}

.kontur-editor-status {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kontur-actions-card, .kontur-pad {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

/* "Aktuelle Position" hat bewusst KEINE eigene Kartenumrandung mehr
   (Musti's Wunsch) - der Übergang zum Kompass wird jetzt von einer
   echten Trennlinie (.kontur-section-divider im Markup, s. screen.js)
   übernommen statt von einer eigenen border-bottom hier. */
.kontur-position-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 4px 2px 10px;
  text-align: left;
}

.kontur-position-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .015em;
}

.kontur-position-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.kontur-position-value {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: baseline;
  gap: 5px;
  padding: 8px 9px;
  border-radius: 9px;
  background: rgba(0,0,0,.13);
  font-variant-numeric: tabular-nums;
}

.kontur-position-axis {
  color: var(--accent2);
  font-weight: 800;
}

.kontur-position-value strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 800;
  text-align: right;
}

.kontur-position-unit {
  color: var(--muted);
  font-size: 10px;
}

.kontur-actions-card {
  justify-content: center;
  padding: 0;
}

:root[data-theme="light"] .kontur-actions-card, :root[data-theme="light"] .kontur-pad {
  background: rgba(0,0,0,.025);
  border-color: rgba(0,0,0,.12);
}

:root[data-theme="light"] .kontur-position-value {
  background: rgba(0,0,0,.04);
}


/* Im Light Mode darf die warme Akzentfarbe die Überschrift übernehmen. */
:root[data-theme="light"] .kontur-position-title-accent {
  color: var(--accent-warm, #d97706);
}

.brand-kon {
  color: inherit;
}

.brand-turo {
  color: var(--accent,#f59e0b);
}


/* ── Smartphone: kompakter, zuverlässig scrollbar ─────────────────────────
   Tablet/Desktop bleiben durch den max-width-Breakpoint unverändert. */

/* Die bisherigen Einzelkarten verlieren ihre Außenrahmen. */
.kontur-position-card, .kontur-actions-card, .history-buttons, .kontur-bottom-actions {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Ohne eigenen Rahmen fehlte der Undo/Redo/Löschen-Leiste eine sichtbare
   Trennlinie zur "Aktuelle Position"-Karte darunter – NUR die Linie,
   kein zusätzlicher Abstand (der hat vorher alles darunter verschoben). */
.history-buttons {
  border-bottom: 1px solid var(--control-divider);
}


/* Ruhige Abschnitte innerhalb derselben Fläche */
.kontur-editor-status, .kontur-pad-row, .kontur-bottom-actions {
  padding: 10px;
}

/* .kontur-pad-row hatte früher (v2.6.75) noch eine eigene border-bottom -
   seit der fluiden Umstellung (v2.6.86) hat .kontur-pad-row mehr eigenen
   Leerraum unterhalb des Kompasses, wodurch diese Linie als überflüssige
   zusätzliche Trennlinie AM UNTEREN RAND des Kompasses sichtbar wurde
   (Musti's Screenshot). Der Kompass hat ohnehin seinen eigenen vollen
   Kartenrahmen (v2.6.74) - komplett entfernt statt nur verschoben. */

/* Trennlinie oberhalb von "3D Ansicht/G-Code" kommt jetzt von einem
   echten .kontur-section-divider-Element im Markup (s. screen.js) statt
   von einem eigenen border-top hier - eigenständig, unabhängig von
   anderen Regeln (Musti's ausdrücklicher Wunsch). */


/* Alle linearen Buttongruppen folgen demselben Muster. */
.history-buttons, .kontur-bottom-actions {
  width: 100%;
  overflow: hidden;
}

.history-buttons button, .kontur-bottom-actions button {
  border: 0;
  border-right: 1px solid var(--control-divider);
  border-radius: 0;
  background: transparent;
}

.history-buttons button:last-child, .kontur-bottom-actions button:last-child {
  border-right: 0;
}

.history-buttons button:hover:not(:disabled), .kontur-bottom-actions button:hover:not(:disabled), .kontur-pad-btn:hover, .kontur-trans-mini:hover {
  background: var(--control-surface-hover);
}

.history-buttons button:active:not(:disabled), .kontur-bottom-actions button:active:not(:disabled), .kontur-pad-btn:active, .kontur-trans-mini:active {
  background: var(--control-surface-active);
}

:root[data-theme="light"] .kontur-pad-center-group {
  background: rgba(0,0,0,.018);
}

.kontur-io-btn:last-child {
  border-right: 0;
}

.kontur-io-btn:hover:not(:disabled) {
  background: var(--control-surface-hover);
}

.kontur-io-btn:active:not(:disabled) {
  background: var(--control-surface-active);
}


/* ── Animationen ──────────────────────────────────────────────────────── */
@keyframes konturSheetUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TABLET / DESKTOP (≥900px Breite UND ≥620px Höhe) ────────────────── */
@media (min-width: 900px) and (min-height: 620px) {
  /* Fluider, an die tatsächliche Fensterhöhe gekoppelter Abstand für die
     gesamte Editor-Seitenleiste (Musti's Wunsch: automatisch passend statt
     manuell gepixelt) - dieselbe clamp()-Technik, die im Mobile-Breakpoint
     schon lange bewährt ist (--mobile-section-gap). Schrumpft auf kurzen
     Fenstern (iPad im Split-View, kleine Laptop-Fenster) automatisch,
     wächst auf großen. Ersetzt die bisherige Ansammlung fester
     negativer margin-top-Korrekturen (v2.6.62-85), die bei jeder neuen
     Anpassung erneut von Hand austariert werden mussten. */
  :root {
    --kontur-section-gap: clamp(2px, 0.7dvh, 6px);
  }

  html, body {
    height: 100%;
  }

  body {
    min-height: 100dvh;
    padding-bottom: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .app {
    width: 100%;
    max-width: none;
    height: 100dvh;
    margin: 0;
    padding: max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 390px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "title title"
      "update update"
      "workspace sidebar"
      "legal sidebar";
    column-gap: clamp(14px, 1.8vw, 26px);
    row-gap: 12px;
    overflow: hidden;
  }

  .titlebar {
    grid-area: title;
    font-size: 21px;
    padding: 2px 4px;
  }

  .titlebar-version {
    font-size: 13px;
  }

  .titlebar-filename {
    font-size: 15px;
  }

  .update-banner {
    grid-area: update;
    font-size: 15px;
    padding: 10px 14px;
  }

  /* Der Textbutton braucht in der schmalen Desktop-Seitenleiste mehr Platz
     als die drei reinen Symbolbuttons. Eine eigene flexible Breite plus
     beidseitiges Padding verhindert, dass „Neue Kontur“ am rechten Rand
     vom overflow:hidden der Leiste abgeschnitten wird. */
  .history-buttons .kontur-history-new-btn {
    flex: 0 0 clamp(132px, 40%, 146px);
    max-width: 48%;
    padding: 0 12px;
  }

  .sketch {
    grid-area: workspace;
    min-width: 0;
    min-height: 0;
    max-height: none;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    justify-content: stretch;
  }

  .kontur-sketch-row {
    min-height: 0;
    max-height: none;
    height: 100%;
  }

  .kontur-sketch-zoom-wrap, .kontur-sketch, .kontur-sketch-zoom-wrap .kontur-sketch {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .kontur-sketch .cnc-svg, .cnc-svg {
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .kontur-steps {
    padding: 10px 8px;
  }

  .kontur-step {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    font-size: 22px;
  }

  /* .kontur-step-gewinde muss auch hier (Desktop/Tablet) wieder auf
     auto gesetzt werden - sonst gewinnt die 54px-Breite von .kontur-step
     oben (gleiche Spezifität, später in der Kaskade). */
  .kontur-step-gewinde,
  .kontur-step-formelement {
    width: auto;
    font-size: 12px;
  }

  .kontur-step-insert {
    width: 48px;
    height: 54px;
    font-size: 20px;
  }

  .kontur-zoom-controls {
    top: 12px;
    right: 12px;
    gap: 7px;
  }

  .kontur-zoom-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 21px;
  }

  .kontur-ruler-toggle {
    top: 12px;
    left: 12px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    padding: 6px;
  }

  .kontur-seg-label {
    top: 12px;
    left: 58px;
    padding: 7px 12px;
    font-size: 15px;
  }

  .kontur-sidebar-shell {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-self: stretch;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 32%),
      var(--card);
    scrollbar-gutter: stable;
  }

  .form {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: clamp(14px, 1.5vw, 20px);
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .kontur-io-bar {
    position: static;
    margin-top: 16px;
    padding: 0;
    background: transparent;
    border-top: 1px solid var(--control-divider);
    flex-shrink: 0;
    flex: 0 0 auto;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    margin: 0 clamp(14px, 1.5vw, 20px) clamp(14px, 1.5vw, 20px);
  }

  .kontur-wrap {
    min-height: 0;
    gap: var(--kontur-section-gap);
    /* Verankerung an der Fußleiste (.kontur-io-bar): .kontur-wrap füllt
       exakt die von .form (flex:1 1 auto) zugewiesene Höhe zwischen
       Sidebar-Oberkante und Fußleiste, statt wie zuvor (v2.6.64-66) immer
       auf volle Inhaltshöhe zu wachsen und dadurch .form scrollen zu
       lassen. .kontur-editor-status behält seine natürliche Höhe,
       .kontur-pad-row (Kompass) ist flex:1 und absorbiert automatisch den
       verbleibenden Platz (s.u.) - overflow-y:auto nur als Sicherheitsnetz
       für sehr kleine Höhen (Breakpoint erlaubt ab min-height:620px). */
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .kontur-current-box {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.35;
  }

  .kontur-current-box strong {
    font-size: 20px;
    letter-spacing: .01em;
  }

  .kontur-current-box-row {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .kontur-position-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 18px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--accent-warm, var(--accent2)) 42%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--accent-warm, var(--accent2)) 7%, var(--card));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }

  .kontur-position-title {
    font-size: 17px;
    font-weight: 750;
    letter-spacing: .01em;
  }

  .kontur-position-title-accent {
    color: var(--accent-warm, var(--accent2));
  }

  .kontur-list-actions {
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
  }

  .kontur-mini-btn {
    min-height: 46px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 14px;
  }

  .kontur-pad-row {
    /* flex:1 1 auto statt 1 0 auto: darf jetzt auch schrumpfen (bis zur
       min-height:160px von .kontur-pad, s.u.), damit sich die Höhe
       zwischen .kontur-editor-status (natürliche Höhe) und dem Kompass
       hier automatisch aufteilt, statt dass nur gewachsen wird.
       margin:0 statt fester Werte: der Abstand zu .kontur-editor-status
       kommt jetzt allein vom fluiden .kontur-wrap-Gap (s.o.) - keine
       zusätzliche, separat zu pflegende margin mehr nötig. */
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    align-items: stretch;
  }

  .kontur-pad {
    width: 100%;
    max-width: none;
    height: auto;
    /* Fluide statt feste Grenzen: der bisherige feste min-height:160px
       war vermutlich die eigentliche Ursache dafür, dass v2.6.86's
       fluider Gap allein den Tablet-Scrollbalken NICHT verhindern konnte
       - ein fester Floor kann per Definition nicht mit einer knappen
       Fensterhöhe mitschrumpfen. Jetzt an dvh gekoppelt wie der Rest. */
    min-height: clamp(110px, 20dvh, 160px);
    /* max-height deutlich höher angesetzt als die min-height-Untergrenze:
       soll auf Desktop praktisch NIE greifen, damit flex:1 1 auto (s.
       .kontur-pad-row) den Kompass wirklich an die TATSÄCHLICH verfügbare
       Resthöhe anpasst, statt künstlich gedeckelt zu werden (Musti:
       Kompass "nach oben gewandert" statt sich anzupassen - Ursache war
       diese zu knappe Deckelung). Bleibt trotzdem als Sicherheitsnetz für
       extrem hohe Fenster vorhanden. */
    max-height: clamp(180px, 50dvh, 480px);
    margin: clamp(3px, 0.7dvh, 8px) 0;
  }

  .kontur-pad-btn span {
    font-size: 28px;
  }

  .kontur-trans-mini {
    font-size: 24px;
  }

  .kontur-trans-mini svg {
    width: 25px;
    height: 25px;
  }

  .kontur-bottom-actions button {
    height: 50px;
    font-size: 16px;
  }

  .kontur-add-btn {
    width: 100%;
    min-height: 50px;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 16px;
  }

  .field-framed legend {
    font-size: 15px;
  }

  .field-framed input, .field-framed select, input {
    font-size: 19px;
  }

  .field-framed input, .field-framed select {
    height: 44px;
  }

  .kontur-hint, .kontur-error {
    font-size: 14px;
    line-height: 1.45;
  }

  .result-output-wrap {
    grid-area: workspace;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 18px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Code-Ansicht: die Seitenleiste ist hier leer (v2.6.106/115), das
     G-Code-Feld soll daher nicht nur die schmalere "workspace"-Spalte
     einnehmen (wirkt dann nach links verschoben, mit Leerraum rechts
     in der jetzt ungenutzten "sidebar"-Spalte), sondern über beide
     Spalten spannen und dann selbst mittig zentriert werden. */
  :root[data-kontur-view="code"] .result-output-wrap {
    grid-column: 1 / -1;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
  }

  /* Musti: das G-Code-Feld schloss bündig mit der io-Leiste (Speichern/
     Laden) ab, kein sichtbarer Abstand. Der globale reservierte
     Freiraum (64px, für die fixierte Leiste selbst) reichte gerade
     für die Leiste, aber nicht für zusätzlichen Luftraum darüber - hier
     auf Desktop/Tablet um weitere 20px erhöht (direkt am reservierten
     Platz statt über margin-bottom auf dem Feld selbst, das dort keinen
     sichtbaren Effekt hatte). */
  :root[data-kontur-view="code"] .app {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  #resultOutput {
    flex: 1;
    min-height: 0;
    overflow: auto;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.55;
    padding: 8px 10px 14px;
  }

  .result-toolbar {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-bottom: 14px;
  }

  .result-toolbar .btn,
  .kontur-view-close-btn.btn {
    min-height: 42px;
    padding: 9px 18px;
    font-size: 15px;
  }

  .kontur-view-close-btn.btn {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
    flex-basis: 35px;
    padding: 0;
  }

  .legal-footer {
    grid-area: legal;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    font-size: 12px;
  }

  .legal-link-btn {
    font-size: 12px;
  }

  .kontur-io-btn {
    min-width: 0;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  :root[data-kontur-view="start"] .kontur-sidebar-shell {
    grid-column: 1 / -1;
    grid-row: workspace;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  :root[data-kontur-view="start"] .kontur-sidebar-shell .form {
    width: min(620px, 100%);
    height: auto;
    min-height: 420px;
    overflow: visible;
  }

  :root[data-kontur-view="start"] .kontur-io-bar {
    position: static;
    width: min(620px, 100%);
    margin: 0;
    flex-shrink: 0;
  }

  .kontur-start-screen {
    min-height: 380px;
  }

  .kontur-start-fields .field-framed {
    width: 190px;
  }

  .kontur-start-hint {
    max-width: 420px;
    font-size: 15px;
  }

  .kontur-start-actions {
    width: 390px;
    max-width: 100%;
    margin-top: 20px;
    align-self: center;
  }

  .kontur-modal {
    max-width: 620px;
    padding: 22px;
    gap: 16px;
    border-radius: 20px 20px 0 0;
  }

  .kontur-modal-title {
    font-size: 17px;
  }

  .kontur-modal-title-icon {
    width: 34px;
    height: 34px;
    font-size: 19px;
  }

  .kontur-modal-actions .btn {
    min-height: 46px;
    font-size: 15px;
  }

  .info-modal {
    max-width: 520px;
    padding: 26px;
  }

  .info-modal h3 {
    font-size: 19px;
  }

  .info-modal p {
    font-size: 16px;
  }

  .kontur-editor-status {
    gap: var(--kontur-section-gap);
  }

  /* .kontur-contour-tabs-row bringt aus der Basis-Regel margin-top:6px mit
     (für Mobile gedacht) - hier auf 0 gesetzt, damit der Abstand zu
     "Konturen" oben ausschließlich vom fluiden .kontur-editor-status-Gap
     kommt (keine doppelte, separat zu pflegende Buchführung mehr). */
  .kontur-contour-tabs-row {
    margin-top: 0;
  }

  /* Musti's Wunsch: 6px zusätzlicher oberer Abstand für "Konturen"-Titel
     und "Aktuelle Position" - oben auf den fluiden Gap draufgesetzt
     (7px statt Basis-1px bei "Konturen", da margin-top dort schon 1px
     Basiswert hat; 6px neu bei "Aktuelle Position", die vorher gar kein
     eigenes margin-top mehr hatte, s. v2.6.86). */
  .kontur-contour-tabs-title {
    margin-top: 17px;
  }

  .kontur-position-card {
    padding: clamp(6px, 1dvh, 12px) 18px;
    margin-top: 6px;
  }

  .kontur-position-values {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 13px;
  }

  .kontur-position-value {
    grid-template-columns: 24px minmax(0,1fr) auto;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .kontur-position-value strong {
    font-size: 21px;
  }

  .kontur-position-axis {
    font-size: 17px;
  }

  .kontur-position-unit {
    font-size: 12px;
  }

  .kontur-actions-card {
    padding: 12px;
    border-radius: 12px;
  }

  .kontur-editor-status {
    padding: clamp(6px, 1dvh, 10px);
  }

  .kontur-pad-row {
    padding: clamp(3px, 0.7dvh, 8px);
  }

  .kontur-bottom-actions {
    padding: clamp(3px, 0.7dvh, 8px);
  }

  .kontur-section-divider--inset {
    margin: 0 12px;
  }

}

/* ── TABLET (innerhalb desselben ≥900px-Breakpoints, aber via pointer:coarse
   vom Desktop/Maus-Betrieb entkoppelt) ─────────────────────────────────
   Bildschirmbreite allein reicht NICHT, um iPad Pro von MacBook zu
   unterscheiden (beide landen im selben ≥900px-Bereich, iPad Pro teils
   sogar breiter als kleinere Laptops) - daher hier stattdessen
   pointer:coarse (Touch als primärer Zeigemechanismus, MacBook-Trackpad/
   Maus melden pointer:fine) als Unterscheidungsmerkmal.
   Seit v2.6.86 übernimmt der fluide --kontur-section-gap (gemeinsamer
   900px-Block, clamp() an die Fensterhöhe gekoppelt) automatisch das,
   wofür hier vorher eine lange Reihe fester, tablet-spezifischer
   negativer margin/padding-Korrekturen nötig war (v2.6.68-71/85) - die
   sind jetzt komplett entfernt. Übrig bleibt hier NUR noch eine bewusste,
   vom Scrollbalken-Problem unabhängige gestalterische Entscheidung: die
   Fußzeile (Speichern/Laden) ist auf Touch-Geräten kompakter. */
@media (min-width: 900px) and (min-height: 620px) and (pointer: coarse) {
  /* Fußzeile (.kontur-io-bar mit Speichern/Laden) auf Tablet kompakter -
     Höhe kommt ausschließlich aus den Buttons selbst (min-height+padding
     aus dem gemeinsamen 900px-Block), .kontur-io-bar hat dort padding:0. */
  .kontur-io-btn {
    min-height: 22px;
    padding: 5px 8px;
  }
}

/* ── SEHR BREITE DISPLAYS (zusätzlich zu Tablet/Desktop) ──────────────── */
@media (min-width: 1400px) and (min-height: 700px) {
  .app {
    grid-template-columns: minmax(0, 1fr) 400px;
  }

}

/* ── SMARTPHONE (<900px Breite) ──────────────────────────────────────── */
@media (max-width: 899px) {
  :root {
    --kontur-pad-height: var(--mobile-compass-height);
    --mobile-app-gap: 8px;
    --mobile-section-gap: clamp(8px, 1.4dvh, 14px);
   /*  --mobile-svg-height: clamp(165px, 25dvh, 205px); */
   --mobile-svg-height: clamp(185px, 30dvh, 230px);
    --mobile-field-height: 40px;
    --mobile-button-height: 34px;
    --mobile-compass-height: clamp(150px, 22dvh, 190px);
  }

  /* Die Einfüge-Banner-Leiste ("Einfügen vor Segment X" + Abbrechen, s.
     screen.js) braucht zusätzlichen Platz IM NORMALEN Seitenfluss (kein
     Modal) – ohne Gegenmaßnahme schiebt sie auf kleinen/mobilen Bildschirmen
     den Kompass unter den unteren Bildschirmrand. Ist sie aktiv
     (:has()-Selektor, moderne Browser inkl. Safari ≥16.4), Kompass und
     SVG-Vorschau etwas verkleinern, um wieder Platz zu schaffen. */
  .kontur-wrap:has(.kontur-insert-banner) {
    --mobile-compass-height: clamp(120px, 17dvh, 155px);
    --mobile-svg-height: clamp(150px, 22dvh, 190px);
  }

  html, body {
    height: 100%;
  }

  body {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    /* Im normalen Browser muss die komplette Seite bis zum rechtlichen
       Footer scrollbar bleiben. Der installierte PWA-Modus stellt weiter
       unten wieder auf die feste, bildschirmfuellende Arbeitsansicht um. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    padding-bottom: 0;
  }

  .app {
    width: min(100%, 640px);
    height: auto;
    min-height: 100%;
    flex: none;
    gap: var(--mobile-app-gap);
    padding: max(6px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      6px
      max(8px, env(safe-area-inset-left));
    overflow: visible;
  }

  .titlebar {
    flex: 0 0 auto;
    padding: 0 2px 2px;
  }

  .sketch {
    flex: 0 0 var(--mobile-svg-height);
    min-height: 125px;
    max-height: none;
  }

  .kontur-sketch-row {
    max-height: none;
  }

  .kontur-steps {
    padding: 3px 0;
  }

  .kontur-step, .kontur-step-insert {
    height: 36px;
  }

  .kontur-step {
    width: 38px;
    border-radius: 8px;
  }

  /* Auch hier (Mobile) muss .kontur-step-gewinde nach der 38px-Breite von
     .kontur-step erneut auf auto gesetzt werden. */
  .kontur-step-gewinde,
  .kontur-step-formelement {
    width: auto;
  }

  .kontur-step-insert {
    width: 34px;
  }

  .kontur-sidebar-shell {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
  }

  .form {
    flex: 0 0 auto;
    min-height: 0;
    overflow-y: visible;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 3px 6px 6px;
    border-top: 0;
  }

  .kontur-wrap {
    flex: 0 0 auto;
    gap: var(--mobile-section-gap);
    /* Resthoehe nicht mehr als Leerstelle zwischen Positionsfeld und
       Kompass verteilen. */
    justify-content: flex-start;
  }

  .kontur-editor-status {
    gap: var(--mobile-section-gap);
  }

  .field-framed input, .field-framed select {
    height: var(--mobile-field-height);
  }

  .history-buttons button {
    height: var(--mobile-button-height);
  }

  .history-buttons svg {
    width: 18px;
    height: 18px;
  }

  .kontur-position-card {
    padding: 7px 9px;
    margin-top: -10px;
  }

  .kontur-position-values {
    gap: 6px;
    margin-top: 15px;
  }

  .kontur-position-value {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 4px;
    padding: 5px 7px;
    border-radius: 8px;
  }

  .kontur-pad-row {
    margin: -15px 0 0;
  }

  .kontur-contour-tabs-row {
    margin-top: 2px;
  }

  .kontur-pad {
    height: var(--mobile-compass-height);
    margin: 0;
  }

  .kontur-bottom-actions {
    position: static;
    z-index: auto;
    flex: 0 0 auto;
    background: transparent;
    box-shadow: none;
  }

  /* Musti: Abstand zwischen den beiden Trennlinien und dem "3D Ansicht/
     G-Code"-Feld auf Mobile halbieren (vermuteter Auslöser für den
     dortigen Scrollbalken) - NUR dieses eine Element betroffen, der
     geteilte --mobile-section-gap bleibt für alle anderen Geschwister-
     Paare (z.B. history-buttons↔Titel, Kompass-Umgebung) unangetastet,
     um dort nichts zu verschieben. Eigenes Padding halbiert (8px→4px,
     überschreibt die weiter unten stehende Sammelregel dank höherer
     Spezifität/späterer Reihenfolge), zusätzlich negative Margins, um
     auch den Anteil des geteilten Gaps auf beiden Seiten zu kappen. */
  .kontur-bottom-actions {
    padding: 4px 8px;
    margin-top: -6px;
    margin-bottom: -6px;
  }

  .kontur-bottom-actions button {
    height: var(--mobile-button-height);
    padding: 0 8px;
  }

  .kontur-io-bar {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    margin-top: 8px;
    gap: 6px;
    padding: 0;
    border-top: 1px solid var(--line);
    background: transparent;
  }

  .kontur-io-btn {
    min-height: var(--mobile-button-height);
    padding: 6px 7px;
  }

  .legal-footer {
    flex: 0 0 auto;
    padding: 4px 0 1px;
  }

  .kontur-editor-status, .kontur-pad-row {
    padding: 8px;
  }

  .kontur-section-divider--inset {
    margin: 0 8px;
  }


  /* ── NUR Smartphone: Schrift etwas größer als auf Tablet/Desktop ──────
     Betrifft ausschließlich diesen max-width:899px-Block; Tablet- und
     Desktop-Ansicht bleiben unverändert. Werte überschreiben absichtlich
     die kleineren mobilen Größen weiter oben in diesem Block. */
  .btn { font-size: 17px; }
  input,
  .field-framed input,
  .field-framed select { font-size: 19px; }
  .field-framed legend { font-size: 15px; }
  .kontur-hint,
  .kontur-error { font-size: 13px; }
  .kontur-list-desc { font-size: 14px; }
  .kontur-center-c,
  .kontur-center-r { font-size: 18px; }
  .kontur-center-cw,
  .kontur-center-ccw { font-size: 22px; }
  .kontur-mini-btn { font-size: 12px; }
  .kontur-current-box { font-size: 13.5px; }
  .kontur-step { font-size: 17px; }
  .kontur-step-gewinde { font-size: 11px; }
  .kontur-step-formelement { font-size: 11px; }
  .kontur-step-insert { font-size: 16px; }
  .kontur-position-title { font-size: 13px; }
  .kontur-position-value strong { font-size: 15px; }
  .kontur-io-btn { font-size: 13px; }
  .kontur-bottom-actions button { font-size: 13px; }
  #resultOutput { font-size: 15.5px; line-height: 1.55; }
  .legal-footer,
  .legal-link-btn { font-size: 12px; }
  .kontur-modal-title { font-size: 15px; }
  .kontur-modal-title-icon { font-size: 16px; }
  .info-modal h3 { font-size: 17px; }
  .info-modal p,
  .info-modal-close { font-size: 15px; }
  .titlebar { font-size: 17px; }
  .update-banner { font-size: 14px; }

  /* Die allgemeinen Mobile-Regeln stellen .app fuer den Editor auf
     automatische Hoehe und sichtbaren Ueberlauf. In der G-Code-Ansicht
     braucht #resultOutput dagegen zwingend einen begrenzten Flex-Raum,
     damit es selbst scrollen kann. Browser und installierte PWA verwenden
     hier deshalb dieselbe bildschirmfuellende Code-Ansicht. */
  :root[data-kontur-view="code"] body {
    height: var(--app-height, 100dvh);
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  :root[data-kontur-view="code"] .app {
    height: var(--app-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }

  :root[data-kontur-view="code"] .result-output-wrap {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  :root[data-kontur-view="code"] #resultOutput {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

}

/* ── STANDALONE / PWA-INSTALLIERT ──────────────────────────────────────── */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .legal-footer {
    display: none;
  }

}

/* ── MOBILE STANDALONE / PWA ─────────────────────────────────────────────
   Ohne Browserleiste steht mehr Hoehe zur Verfuegung. Diese Resthoehe
   waechst nun in die SVG-Arbeitsflaeche statt als Luecke zwischen
   Positionsanzeige und Kompass zu erscheinen. Kleine Displays behalten
   dank min-height und den schrumpfbaren unteren Bereichen ihre Bedienung. */
@media (max-width: 899px) and (display-mode: standalone),
       (max-width: 899px) and (display-mode: fullscreen),
       (max-width: 899px) and (display-mode: minimal-ui) {
  body {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
  }

  .app {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .sketch {
    flex: 1 1 var(--mobile-svg-height);
    min-height: 125px;
    max-height: none;
  }

  .kontur-sidebar-shell {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

/* iOS-Fallback fuer navigator.standalone; entspricht dem Media-Query oben. */
@media (max-width: 899px) {
  .ios-standalone body {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
  }

  .ios-standalone .app {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .ios-standalone .sketch {
    flex: 1 1 var(--mobile-svg-height);
    min-height: 125px;
    max-height: none;
  }

  .ios-standalone .kontur-sidebar-shell {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .ios-standalone .form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

/* ── Datei-Input "Kontur laden" ──────────────────────────────────────────
   Bewusst NICHT über `hidden`/`display:none` versteckt: einige Android-
   WebViews (v.a. installierte PWAs) liefern das "change"-Event nach der
   nativen Dateiauswahl bei einem display:none-Input unzuverlässig zurück –
   der erste Tap auf die Datei "verpufft" dadurch scheinbar und man landet
   wieder auf dem vorherigen Bildschirm, erst der zweite Versuch klappt.
   Visuell unsichtbar statt aus dem Layout entfernt behebt das. */
.kontur-visually-hidden-input {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}


/* Prismatische 3D-Formelemente */
.kontur-formelement-form{ overflow:auto; }
.kontur-formelement-title{ font-weight:700; font-size:1.05rem; margin:12px 0 8px; }
.kontur-formelement-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.kontur-newcontour-modal .kontur-newcontour-options{
  display:flex;
  flex-direction:column;
  gap:6px;
  border:0;
  background:transparent;
}
.kontur-newcontour-modal .kontur-newcontour-options .kontur-io-btn{
  flex:0 0 auto;
  width:100%;
  min-height:42px;
  border:1px solid var(--control-divider);
  border-radius:var(--control-radius);
  font-size:14px;
}
@media (max-width:599px){ .kontur-formelement-grid{ grid-template-columns:1fr; } }
.kontur-scroll-target{
  animation:kontur-scroll-target-pulse .9s ease-out;
}

@keyframes kontur-scroll-target-pulse{
  0%,100%{ box-shadow:inherit; }
  35%{ box-shadow:0 0 0 3px rgba(148,163,184,.75),0 0 14px rgba(148,163,184,.55); }
}