/* ── Farben ── */
    :root {
      --bg:       #090d0c;
      --card:     #111715;
      --card2:    #151d1b;
      --text:     #f2f7f5;
      --muted:    #8d9a96;
      --line:     rgba(255,255,255,.09);
      --accent:   #00e1c3;
      --accent2:  #7cfbe9;
      --danger:   #ff7474;
      --field:    #0d1211;
      --shadow:   10px 0 0 rgba(0,10,10,.38);
    }

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

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

    html { overflow: hidden; }
    body { overflow-y: auto; overflow-x: hidden; }

    body {
      min-height: var(--app-height, 100vh);
      display: flex;
      flex-direction: column;
      align-items: center;
      background:
        radial-gradient(circle at top, rgba(0,225,195,.13), transparent 38%),
        linear-gradient(180deg, #071311 0%, var(--bg) 48%);
    }

    button, input { font: inherit; }

    /* ── App-Container ── */
    .app {
      width: min(100%, 480px);
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding:
        max(12px, env(safe-area-inset-top))
        max(8px,  env(safe-area-inset-right))
        max(8px,  env(safe-area-inset-bottom))
        max(8px,  env(safe-area-inset-left));
      overflow: hidden;
      transition: height 0.15s ease;
    }

    /* ── Tabs ── */
    .tabs {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: 1fr 1fr 40px;
      gap: 8px;
      background: rgba(255,255,255,.045);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 8px;
      box-shadow: var(--shadow);
    }

    .menu-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      border-radius: 999px;
      height: 41px;
      width: 41px;
	  padding: 16px 16px;
      font-size: 21px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .menu-btn:hover { color: var(--accent2); }

    .tab {
      border: 0;
      background: transparent;
      color: var(--muted);
      border-radius: 999px;
      height: 41px;
      font-size: clamp(15px, 3.5vw, 14px);
      font-weight: 800;
      letter-spacing: 0;
      cursor: pointer;
    }

    .tab-display {
      cursor: pointer;
    }

    .tab.active {
      background: linear-gradient(165deg, var(--accent), var(--accent2));
      color: #02110f;
      box-shadow: 0 6px 20px rgba(0,225,195,.22);
    }

    /* ── Ergebnis-Card ── */
    .result-card {
      flex-shrink: 0;
      position: relative;
      height: 130px;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(0,225,195,.17), rgba(0,225,195,.04)),
        var(--card);
      border: 1px solid rgba(0,225,195,.23);
      border-radius: 16px;
      padding: 14px 28px 6px;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow);
    }

    /* Fase-Tab im Browser-Tab: durch den verschlankten Info-Bereich ist mehr Platz da → 180px.
       Im PWA-Modus wird unten per @media auf 210px erhöht (mehr Platz ohne Footer/Browser-Leiste). */
    :root[data-tab="fase"] .result-card {
      height: 180px;
    }

    /* Leuchtender Schimmer unten (feste Höhe, wächst nicht mit der Kartenhöhe mit) */
    .result-card::after {
      content: "";
      position: absolute;
      left: -20%;
      right: -20%;
      bottom: -51px;
      height: 95px;
      background: radial-gradient(circle, rgba(0,225,195,.18), transparent 62%);
      pointer-events: none;
    }

    /* Oberer Teil: Wert + Einheit */
    .result-display {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding-top: 6px;
    }

    .result-display.left { justify-content: flex-start; }

    .result-value {
      font-size: clamp(24px, 7vw, 44px);
      font-weight: 780;
      letter-spacing: -.035em;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }

    .result-value.empty {
      font-size: clamp(24px, 7vw, 44px);
      font-weight: 850;
      letter-spacing: .02em;
      color: rgba(124,251,233,.34);
    }

    .result-unit {
      font-size: 12px;
      color: var(--muted);
    }

    /* Unterer Teil: Buttons */
    .result-actions {
      position: relative;
      flex-shrink: 0;
      display: flex;
      padding: 6px;
      justify-content: center;
      gap: 10px;
      height: 36px;
    }

    .btn {
      height: 30px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(0,225,195,.4);
      background: rgba(0,225,195,.10);
      color: var(--accent2);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }

    .btn.show { display: flex; }
    .btn.copied { background: rgba(124,251,233,.20); }

    .btn-clear {
      border-color: rgba(255,255,255,.16);
      color: var(--text);
      background: rgba(255,255,255,.04);
    }

    .btn-mirror {
      width: 30px;
      flex-shrink: 0;
      padding: 0;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
    }

    .btn-mirror.active {
      background: rgba(0,225,195,.22);
      border-color: var(--accent2);
      color: var(--accent2);
    }

    .btn-info {
      width: 30px;
      flex-shrink: 0;
      padding: 0;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      font-style: italic;
      border-radius: 999px;
    }

    .btn-thread-system {
      min-width: 42px;
      padding: 0 10px;
      justify-content: center;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .03em;
    }

    .btn-thread-system.active-l97 {
      background: rgba(0,225,195,.22);
      border-color: var(--accent2);
      color: var(--accent2);
    }

    .btn-zoom {
      width: 30px;
      flex-shrink: 0;
      padding: 0;
      justify-content: center;
      border-radius: 999px;
    }

    .hint {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: -26px;
      font-size: 12px;
      color: var(--danger);
      text-align: center;
      pointer-events: none;
    }

    /* ── Work-Card (Skizze + Eingabe) ── */
    .work-card {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: opacity .12s ease;
    }

    .work-card.fade-out {
      opacity: 0;
    }

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

    .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;
    }
    
    .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(0,225,195,.8)); }
    .svg-hot.active .svg-label { fill: var(--accent2); }

    /* ── Fase-Tab: Ergebnis-Infoboxen statt Skizze ── */
    .fase-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
	  background: var(--card2);
      gap: 8px;
      padding: 12px 10px;
      width: 100%;
    }

    .fase-info-row {
      display: flex;
      gap: 10px;
    }

    .fase-info-row.single {
      justify-content: center;
    }

    .fase-info-box {
      flex: 1;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px;
      padding: 12px 10px;
      text-align: center;
      font-size: clamp(13px, 3.6vw, 16px);
      font-weight: 600;
      color: var(--text);
      background: var(--field);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fase-info-row.single .fase-info-box {
      flex: 0 1 auto;
      min-width: 180px;
    }

    /* Kompakte Referenz-Box im Gewinde-Tab (3. Zeile, einzeiliger Wert) */
    #gewindeInfo .fase-info-row.single .fase-info-box {
      min-width: 160px;
    }

    /* Gestapelte Variante: Label oben, Wert darunter — für engere 3er-Reihen (z.B. Gewinde-Tab) */
    #gewindeInfo {
      overflow-y: auto;
    }

    /* Legend-im-Rahmen-Variante für Infoboxen (Gewinde-Tab): Label sitzt im Rahmen,
       spart eine komplette Textzeile gegenüber der gestapelten Variante.
       Bewusst KEIN echtes <fieldset>, da Browser bei fieldset + border-radius
       den Hintergrund oft nicht sauber an die Rundung clippen (sichtbarer Bug im Light Mode). */
    .fase-info-box.framed {
      flex: 1;
      position: relative;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 10px;
      background: var(--field);
      padding: 9px 8px 6px;
      overflow: visible;
    }

    .fase-info-box.framed .box-legend {
      position: absolute;
      top: -7px;
      left: 8px;
      padding: 0 4px;
      background: var(--card2);
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      white-space: nowrap;
    }

    .fase-info-box.framed .box-value {
      display: block;
      font-size: clamp(13px, 3.6vw, 16px);
      font-weight: 800;
      line-height: 1.2;
    }

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

    .gewinde-row-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
      margin: 6px 2px 6px;
      text-align: start;
    }

    /* Dritte Reihe: gleiche Größe und Abstand wie obere Reihen, als Gruppe mittig */
    .gewinde-info-row {
      margin-top: 26px;
      width: 100%;
    }

    .gewinde-row-title:first-child {
      margin-top: 0;
    }

    /* ── Eingabe-Bereich ── */
    .input-area {
      flex-shrink: 0;
      background: var(--card2);
      border-top: 1px solid var(--line);
    }

    /* Chips */
    .chips {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      padding: 6px;
    }

    .chip {
      height: 32px;
      border: 1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius: 10px;
      font-size: clamp(13px, 4vw, 17px);
      font-weight: 850;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chip.active {
      border-color: rgba(0,225,195,.65);
      background: linear-gradient(180deg, rgba(0,225,195,.20), rgba(0,225,195,.09));
      color: var(--accent2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 26px rgba(0,225,195,.11);
    }

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

    .form.no-chips {
      border-top: 0;
      padding-top: 6px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 20px;
      flex: 1;
    }

    .form-grid > div {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .field {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 8px;
      align-items: center;
    }

    .field label {
      color: var(--accent2);
      font-size: 18px;
      font-weight: 850;
      text-align: center;
      cursor: pointer;
    }

    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;
    }

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

    input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(0,225,195,.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(0,225,195,.12);
    }

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

    /* ── Nav Drawer ── */
    .drawer-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 100;
    }

    .drawer-overlay.open { display: block; }

    /* ── 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(0,225,195,.4);
      background: rgba(0,225,195,.10);
      color: var(--accent2);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }

    #legalOverlay .info-modal {
      max-width: 420px;
      max-height: 80vh;
      overflow-y: auto;
    }

    #legalOverlay .info-modal p {
      font-size: 13px;
      line-height: 1.45;
      margin: 0 0 12px;
    }



    /* ── Easter Egg: Entwicklermodus ── */
    .dev-mode-modal {
      position: relative;
      max-width: 360px;
      text-align: center;
    }

    .dev-mode-close {
      position: absolute;
      top: 8px;
      right: 10px;
      width: 30px;
      height: 30px;
      border: 0;
      background: transparent;
      color: var(--text);
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
      opacity: .85;
    }

    .dev-mode-close:hover {
      opacity: 1;
    }

    .dev-mode-text {
      margin: 12px 0 0;
      white-space: pre-wrap;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 15px;
      line-height: 1.55;
      color: var(--text);
    }

    /* ── G-Code Zoom-Popup ── */
    .gcode-zoom-modal {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      max-width: 480px;
      width: 100%;
      padding: 18px;
      box-shadow: var(--shadow);
    }

    .gcode-zoom-text {
      font-family:'SF Mono','SFMono-Regular','JetBrains Mono','Roboto Mono','Consolas','Menlo','Liberation Mono',monospace;
      font-size: clamp(16px, 5.5vw, 24px);
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: .02em;
      color: var(--gcode-color,var(--accent2));
      white-space: pre;
      overflow-x: auto;
      margin-bottom: 16px;
    }

    .gcode-result-text {
      font-family:'SF Mono','SFMono-Regular','JetBrains Mono','Roboto Mono','Consolas','Menlo','Liberation Mono',monospace;
      font-size: clamp(12px, 3.4vw, 16px);
      font-weight: 500;
      line-height: 1.45;
      letter-spacing: .02em;
      color: var(--gcode-color,var(--accent2));
      white-space: pre;
      display: block;
      margin-top: -6px;
      margin-bottom: 6px;
    }

    .drawer {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 260px;
      background: var(--card);
      border-right: 1px solid var(--line);
      z-index: 101;
      display: flex;
      flex-direction: column;
      transform: translateX(-100%);
      transition: transform .28s cubic-bezier(.4,0,.2,1);
      padding-top: max(16px, env(safe-area-inset-top));
    }

    .drawer.open { transform: translateX(0); }

    .drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px 16px;
      border-bottom: 1px solid var(--line);
    }

    .drawer-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--accent2);
      letter-spacing: .04em;
    }

    .drawer-version {
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0;
    }

    .drawer-close {
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 18px;
      cursor: pointer;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .drawer-close:hover { color: var(--text); }

    .drawer-items {
      display: flex;
      flex-direction: column;
      padding: 8px 0;
    }

    .drawer-item {
      border: 0;
      background: transparent;
      color: var(--text);
      text-align: left;
      padding: 10px 16px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .drawer-item-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
    }
    
    .shape-icon {
      fill: none;
      stroke: var(--gcode-color,var(--accent2));
      stroke-width: 2;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
    }

    .drawer-item-icon svg {
      width: 36px;
      height: 36px;
    }

    .drawer-item-label {
      font-size: 15px;
      font-weight: 500;
    }

    .drawer-item:hover { background: rgba(255,255,255,.05); color: var(--accent2); }
    .drawer-item.active {
      color: var(--accent2);
      font-weight: 700;
      background: rgba(255,255,255,.055);
    }

    .drawer-item.active .drawer-item-icon {
      border-color: rgba(0,225,195,.36);
      background: rgba(0,225,195,.08);
      box-shadow: 0 0 18px rgba(0,225,195,.10);
    }

    .drawer-divider {
      height: 1px;
      background: var(--line);
      margin: 6px 16px;
    }

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

    :root[data-theme="light"] body {
      background: var(--bg);
    }

    :root[data-theme="light"] .result-card {
      background: #ffffff;
      border-color: rgba(0,0,0,.12);
    }
	
	/* Leuchtender Schimmer unten */
    :root[data-theme="light"] .result-card::after {
	  background: radial-gradient(circle, rgba(137, 137, 137,.2), transparent 62%);
    }

    :root[data-theme="light"] .result-value.empty {
      color: rgba(0,0,0,.20);
    }

    :root[data-theme="light"] .tabs {
      background: #ffffff;
      border-color: rgba(0,0,0,.10);
    }

    :root[data-theme="light"] .tab.active {
      background: rgba(101,101,101,.22);
      border-color: #1a1a1a;
      color: #1a1a1a;
      box-shadow: none;
    }

    :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"] .input-area {
      background: var(--card2);
      border-top-color: var(--line);
    }

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

    :root[data-theme="light"] .chip {
      border-color: #1a1a1a;
      background: #ffffff;
      color: var(--text);
    }

    :root[data-theme="light"] .chip.active {
      background: rgba(101,101,101,.1);
      border-color: #1a1a1a;
      color: var(--text);
      box-shadow: none;
    }
    
    :root[data-theme="light"] .info-modal-close {
      border-color: rgba(0,0,0,.10);
      background: rgba(0,0,0,.04);
    } 
    
    :root[data-theme="light"] .fase-info-box {
      border-color: #1a1a1a;
      background: #ffffff;
    }

    :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;
    }

    :root[data-theme="light"] .btn.copied {
      background: rgba(0,0,0,.10);
    }

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

    :root[data-theme="light"] .drawer-item-icon {
      background: #f0f2f4;
      border-color: rgba(0,0,0,.10);
    }

    :root[data-theme="light"] .drawer-item.active {
      background: rgba(0,0,0,.05);
      color: #1a1a1a;
      font-weight: 700;
    }

    :root[data-theme="light"] .menu-btn {
      color: #1a1a1a;
    }

    /* ── Theme Toggle ── */
    .theme-toggle-wrap {
      margin-top: auto;
      padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
    }

    .theme-toggle {
      width: 100%;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.045);
      color: var(--text);
      border-radius: 999px;
      padding: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .theme-toggle-label {
      padding-left: 8px;
      font-size: 14px;
      font-weight: 700;
    }

    .theme-toggle-pill {
      width: 54px;
      height: 28px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid var(--line);
      position: relative;
      flex-shrink: 0;
    }

    .theme-toggle-pill::before {
      content: "🌙";
      position: absolute;
      left: 3px;
      top: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--card);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      box-shadow: 0 3px 10px rgba(0,0,0,.18);
      transition: transform .22s ease;
    }

    :root[data-theme="light"] .theme-toggle {
      background: rgba(255,255,255,.78);
    }

    :root[data-theme="light"] .theme-toggle-pill {
      background: rgba(74,109,136,.14);
    }

    :root[data-theme="light"] .theme-toggle-pill::before {
      content: "☀️";
      transform: translateX(26px);
    }

    /* ── Footer mit Impressum/Datenschutz ── */
    .legal-footer {
      flex-shrink: 0;
      width: 100%;
      max-width: 480px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 16px max(8px, env(safe-area-inset-bottom));
      font-size: 12px;
      color: var(--muted);
    }

    .legal-footer a {
      color: var(--muted);
      text-decoration: underline;
    }

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

    .legal-sep {
      margin: 0 8px;
    }

    /* Footer nur im normalen Browser-Tab sichtbar, nicht in der installierten PWA */
    @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
      .legal-footer {
        display: none;
      }

      /* PWA hat mehr Platz (kein Footer, keine Browser-Leiste) → Fase-Eingabefelder wieder auf Originalhöhe */
      .field-framed input,
      .field-framed select {
        height: 40px;
      }

      /* PWA hat mehr Platz → Ergebnisfeld darf wieder etwas höher sein */
      :root[data-tab="fase"] .result-card {
        height: 210px;
      }
    }

/* ── Kontur-Programmierung ──────────────────────────────────────────────── */
.kontur-wrap { display: flex; flex-direction: column; gap: 12px; }

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

.kontur-segtype {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.kontur-seg-btn {
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text, #eee);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.kontur-seg-btn.active {
  background: rgba(0,225,195,.16);
  border-color: var(--accent2);
  color: var(--accent2);
}

/* Pad zentriert (keine Segmenttyp-Spalte mehr – Übergänge sitzen jetzt in der Kompass-Mitte) */
.kontur-pad-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}

.kontur-pad {
  display: grid;
  grid-template-columns: repeat(3, 68px);
  grid-template-rows: repeat(3, 68px);
  gap: 8px;
  justify-content: center;
  margin: 10px 0;
}
.kontur-pad-btn {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text, #eee);
  font-size: 26px;
  cursor: pointer;
}
.kontur-pad-btn.active {
  background: rgba(0,225,195,.18);
  border-color: var(--accent2);
  color: var(--accent2);
}
.kontur-pad-btn:disabled { opacity: .2; cursor: not-allowed; }

.kontur-pad-center-group {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
}
.kontur-trans-mini {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text, #eee);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  width: 38px; height: 32px;
  padding: 0;
  -webkit-appearance: none; appearance: none;
}
.kontur-trans-arc-row { display: flex; gap: 6px; }
.kontur-trans-arc { font-size: 22px; font-weight: 400; }
.kontur-trans-mini:disabled { opacity: .2; cursor: not-allowed; }

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

.kontur-cw-toggle { display: flex; gap: 8px; }
.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(0,225,195,.16);
  border-color: var(--accent2);
  color: var(--accent2);
}

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

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

.kontur-list { display: flex; flex-direction: column; gap: 6px; }
.kontur-empty { font-size: 13px; opacity: .5; margin: 4px 0; }
.kontur-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.kontur-list-num {
  min-width: 20px;
  font-weight: 800;
  opacity: .5;
  font-size: 12px;
}
.kontur-list-desc { flex: 1; font-size: 13px; }
.kontur-list-del {
  border: none; background: none;
  color: inherit; opacity: .6;
  font-size: 15px; cursor: pointer; padding: 2px 4px;
}
.kontur-list-del:hover { opacity: 1; }

.kontur-sketch { width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden; }
.kontur-sketch .cnc-svg { width: auto; height: 100%; max-width: 100%; }

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

/* ── Kontur: Bearbeiten⇄G-Code-Umschaltung ──────────────────────────────── */
/* Bearbeitungsmodus: Result-Card (G-Code-Box) ausblenden, SVG bekommt mehr Platz */
:root[data-tab="kontur"][data-kontur-view="edit"] .result-card {
  display: none;
}
/* G-Code-Ansicht: SVG-Skizze ausblenden, Result-Card nimmt den Platz ein */
:root[data-tab="kontur"][data-kontur-view="code"] .sketch {
  display: none;
}
:root[data-tab="kontur"][data-kontur-view="edit"] .sketch {
  min-height: 260px;
}

.kontur-list-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; opacity: .7; margin-top: 4px;
}
.kontur-list-actions { display: flex; gap: 6px; }
.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;
}
.kontur-mini-btn:disabled { opacity: .3; cursor: not-allowed; }

.kontur-code-btn {
  border-color: var(--accent-warm, var(--accent2));
  background: rgba(255,150,60,.12);
  color: var(--accent-warm, var(--accent2));
}
.kontur-code-btn:disabled { opacity: .35; cursor: not-allowed; }
.kontur-code-btn-top {
  width: auto;
  height: auto;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
}

.kontur-pad-4 {
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(3, 52px);
}

: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;
}

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

/* ── Kontur: Schritt-Icons neben der SVG ─────────────────────────────────── */
.kontur-sketch-row { display: flex; width: 100%; height: 100%; gap: 6px; }
.kontur-sketch-row .kontur-sketch { flex: 1; min-width: 0; }
.kontur-steps {
  width: 40px;
  flex-shrink: 0;
  overflow-y: auto;
}
.kontur-steps-inner { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.kontur-step {
  position: relative;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 14px;
  color: inherit;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.kontur-step:active { background: rgba(255,255,255,.12); }
.kontur-step-start {
  color: var(--accent-warm, var(--accent2));
  cursor: pointer;
  font: inherit;
}

.kontur-step-insert {
  width: 32px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: inherit; opacity: .35;
  font-size: 12px; 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(0,225,195,.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-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  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,.55);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.kontur-modal-overlay.open { display: flex; }
.kontur-modal {
  background: #171d1c;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 16px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:root[data-theme="light"] .kontur-modal {
  background: #fff;
  border-color: rgba(0,0,0,.12);
}
.kontur-modal-title { font-weight: 800; 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: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(0,225,195,.12);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  font-size: 15px;
}
.kontur-modal-actions { display: flex; gap: 8px; margin-top: 4px; }
.kontur-modal-actions .btn { display: inline-flex; flex: 1; justify-content: center; }
.kontur-modal-delete {
  border-color: rgba(220,60,60,.5) !important;
  background: rgba(220,60,60,.12) !important;
  color: #e05a5a !important;
}