/* ── Design-Tokens (Stil angelehnt an mimikama.org) ────────────────
       Alle Farben der Seite laufen über diese Variablen – hier ändern,
       wirkt überall (auch in den Inline-Styles und JS-Templates). */
    :root {
      --font:          'Source Sans 3', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
      --font-display:  'Playfair Display', Georgia, serif;

      --bg:            #F4F2ED;   /* Seitenhintergrund, warmes Off-White */
      --header-bg:     #CFC3B5;   /* Beige-Band oben */
      --surface:       #FFFFFF;   /* Karten */
      --surface-2:     #FAFAF8;   /* innere Felder (Kurzzeile, Beschreibung) */
      --surface-3:     #F2EFE9;   /* Sekundär-Buttons, Hover */
      --field:         #FFFFFF;   /* Eingabefelder */

      --header-border: #B9AC99;   /* gestrichelte Linie unter dem Kopfband */
      --pill-bg:       #FFFDFA;   /* Pills (Modus, Filter) */
      --pill-text:     #273233;
      --hairline:      rgba(0, 0, 0, .07);

      --border:        #E6E0D6;   /* Kartenrahmen */
      --border-field:  #DDD2C3;   /* Eingabefelder, Pills */
      --divider:       #EEEAE3;   /* Tabellenzeilen, Trenner */

      --text:          #2E2E2E;
      --text-2:        #4E5F6B;   /* Sekundärtext, Schiefer */
      --heading:       #253235;
      --muted:         #687477;   /* Labels */
      --muted-2:       #899194;   /* dezente Hinweise */

      --accent:        #4D7076;   /* Petrol */
      --accent-hover:  #3F5E63;
      --accent-soft:   #E4ECEB;
      --accent-muted:  #A0B3BA;
      --on-accent:     #FFFFFF;
      --focus-ring:    rgba(77, 112, 118, .18);

      --sage:          #7A9A8B;
      --ok:            #4F7362;
      --ok-soft:       #EEF4F0;
      --ok-border:     #CFE0D6;
      --warn:          #6B4F20;
      --warn-soft:     #FBF5E9;
      --warn-border:   #EAD9B8;
      --warn-accent:   #B28A5C;
      --danger:        #A0514A;
      --danger-text:   #7A2B25;
      --danger-soft:   #FBF0EE;
      --danger-border: rgba(217, 99, 85, .5);
      --plus-text:     #1D7342;   /* Gewinn */
      --plus-bg:       #DFF1E5;
      --minus-text:    #B42318;   /* Verlust */
      --minus-bg:      #FCE4E1;

      --radius:        14px;
      --radius-sm:     9px;
      --shadow:        0 1px 2px rgba(37, 50, 53, .04), 0 2px 10px rgba(37, 50, 53, .03);
    }

    /* ── Dunkles Design (Schalter oben rechts, Wahl bleibt gespeichert) ── */
    :root[data-theme="dark"] {
      color-scheme: dark;

      --bg:            #151A1B;
      --header-bg:     #262320;   /* dunkles Beige-Band */
      --header-border: #4A4339;
      --surface:       #1E2425;
      --surface-2:     #232A2B;
      --surface-3:     #2A3233;
      --field:         #182021;
      --pill-bg:       #1E2425;
      --pill-text:     #D9DEDD;
      --hairline:      rgba(255, 255, 255, .07);

      --border:        #2F3839;
      --border-field:  #3B4647;
      --divider:       #283031;

      --text:          #E3E1DC;
      --text-2:        #B3BEC2;
      --heading:       #F0EEE9;
      --muted:         #8D999C;
      --muted-2:       #6F7B7E;

      --accent:        #7FB0B6;   /* Petrol, aufgehellt */
      --accent-hover:  #96C2C7;
      --accent-soft:   #22363A;
      --accent-muted:  #50696E;
      --on-accent:     #0F1A1B;
      --focus-ring:    rgba(127, 176, 182, .25);

      --sage:          #8FB3A2;
      --ok:            #82BA9E;
      --ok-soft:       #1B2B24;
      --ok-border:     #2E4A3D;
      --warn:          #E0BF8A;
      --warn-soft:     #2B2519;
      --warn-border:   #54452B;
      --warn-accent:   #C9A06E;
      --danger:        #E08A80;
      --danger-text:   #F2AAA1;
      --danger-soft:   #2E1E1C;
      --danger-border: rgba(224, 138, 128, .45);
      --plus-text:     #74D19E;
      --plus-bg:       #17301F;
      --minus-text:    #FF8F84;
      --minus-bg:      #3A1E1B;

      --shadow:        0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
    }
    [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color: var(--text); }
    [data-theme="dark"] button:not(:disabled):hover { filter: brightness(1.12); }

    #theme-toggle {
      position: absolute; top: 14px; right: 16px;
      width: 58px; height: 30px; padding: 0 7px; border-radius: 999px;
      display: flex; align-items: center; justify-content: space-between;
      border: 1px solid var(--header-border); background: var(--surface-2); color: var(--muted);
      cursor: pointer;
    }
    #theme-toggle svg { width: 14px; height: 14px; position: relative; z-index: 1; }
    #theme-toggle .theme-knob {
      position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
      background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
      transition: transform .2s, background-color .2s;
    }
    #theme-toggle .ic-sun  { color: var(--warn-accent); }
    [data-theme="dark"] #theme-toggle .theme-knob { transform: translateX(28px); background: var(--accent-soft); }
    [data-theme="dark"] #theme-toggle .ic-moon { color: var(--accent); }
    @media (max-width: 600px) {
      body > header { padding-top: 50px; }   /* Platz für den Schalter über dem Titel */
      #theme-toggle { top: 12px; right: 12px; }
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.45;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 20px 60px;
      -webkit-font-smoothing: antialiased;
    }

    input, select, textarea, button { font-family: inherit; }
    button { transition: background-color .15s, border-color .15s, color .15s, filter .15s; }
    button:not(:disabled):hover { filter: brightness(.95); }
    input[type=checkbox] { accent-color: var(--accent); }

    /* Fokus-Ring für alle Felder – schlägt die Inline-Rahmenfarbe */
    input:focus, select:focus, textarea:focus {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 3px var(--focus-ring);
      outline: none;
    }
    ::placeholder { color: var(--muted-2); opacity: 1; }

    .sku-input.field-missing, .price-input.field-missing, .lot-input.field-missing {
      border-color: var(--danger) !important;
      box-shadow: 0 0 0 3px rgba(217, 99, 85, .15);
      background: var(--danger-soft) !important;
    }

    /* Kopfband */
    header {
      align-self: stretch;
      margin: 0 -20px 26px;
      padding: 26px 20px 22px;
      background: var(--header-bg);
      border-bottom: 1px dashed var(--header-border);
      text-align: center;
      position: relative;
    }
    header h1 {
      display: inline-flex; align-items: center; gap: 16px;
      font-family: var(--font-display);
      font-size: 2rem; font-weight: 700;
      color: var(--text-2);
      letter-spacing: -.01em;
    }
    header .brand-logo { height: 88px; width: auto; flex-shrink: 0; }
    header p { color: var(--text-2); opacity: .8; margin-top: 4px; font-size: .92rem; }

    #mode-toggle { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
    .mode-btn {
      padding: 9px 18px; border-radius: 999px;
      border: 1px solid var(--border-field); background: var(--pill-bg); color: var(--pill-text);
      font-weight: 700; font-size: .95rem; cursor: pointer;
    }
    .mode-btn:hover { border-color: var(--accent-muted); }
    .mode-btn.active { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }