/* Kontaktbogen design system – wiederverwendbare Tokens und Basis-Komponenten.
   Einbinden: @import './tokens.css';  Beschreibung: ../DESIGN.md */

:root {
  color-scheme: light;

  /* Farbe: neutral, Schwarz als einziger Akzent */
  --ink: #000;            /* Primäraktion, Text auf Hell */
  --ink-soft: #333;       /* Fließtext in Panels, Icons aktiv */
  --text-muted: #737373;  /* Labels, Zähler, Hinweise */
  --text-faint: #aaa;     /* Griffe, deaktivierte Icons */
  --canvas: #f5f5f5;      /* App-Hintergrund */
  --surface: #fff;        /* Karten, aktives Segment, Blatt */
  --control: #e9e9e9;     /* Segmented/Stepper/Select/Wert-Chips */
  --control-hover: #dedede;
  --line: #e6e6e6;        /* Rahmen von Karten */
  --line-strong: #bdbdbd; /* gestrichelte Dropzone, Slider-Track */
  --focus: #555;
  --danger: #ae331a;

  /* Typografie: nur Arial/Helvetica, kleine Größen, kein Fettdruck */
  --font: Arial, Helvetica, sans-serif;
  --fs-base: 13px;
  --fs-panel: 12px;   /* Bedienfeld */
  --fs-small: 11px;   /* Dateinamen, Chips, Zähler */
  --lh-tight: 1.2;
  --lh-body: 1.4;

  /* Form: fast eckig, 3–5px Radien; Kreis nur für Carousel-Buttons */
  --radius-s: 3px;
  --radius-m: 5px;

  /* Raum: 4px-Raster */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 20px; --space-5: 28px; --space-6: 48px;

  --ease: 150ms ease;
}

body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--fs-base) var(--font); }
* { box-sizing: border-box; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; }

/* Segmented Control (Layout, Ausrichtung) */
.ds-segmented { display: flex; gap: 2px; padding: 3px; background: var(--control); border-radius: var(--radius-m); }
.ds-segmented button { border: 0; border-radius: var(--radius-s); padding: 8px 10px; background: transparent; color: var(--text-muted); font-size: var(--fs-small); }
.ds-segmented button:hover { color: var(--ink); }
.ds-segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }

/* Stepper (−  3  +) */
.ds-stepper { display: flex; align-items: center; padding: 2px; background: var(--control); border-radius: var(--radius-m); }
.ds-stepper button { width: 28px; height: 28px; border: 0; border-radius: var(--radius-s); background: transparent; color: #555; font-size: 16px; }
.ds-stepper button:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.ds-stepper button:disabled { opacity: .2; cursor: default; }
.ds-stepper output { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }

/* Slider mit Wert-Chip */
.ds-range > span { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-1); }
.ds-range output { min-width: 54px; padding: 5px 7px; text-align: right; background: var(--control); border-radius: 4px; color: var(--ink-soft); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.ds-range input[type="range"] { appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.ds-range input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: #d0d0d0; }
.ds-range input[type="range"]::-moz-range-track { height: 2px; border-radius: 1px; background: #d0d0d0; }
.ds-range input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 24px; margin-top: -11px; border: 0; background: linear-gradient(#333, #333) center / 3px 14px no-repeat; }
.ds-range input[type="range"]::-moz-range-thumb { width: 20px; height: 24px; border: 0; background: linear-gradient(#333, #333) center / 3px 14px no-repeat; }

/* Checkbox: Box links, Label rechts */
.ds-check { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; min-height: 32px; color: #444; font-size: var(--fs-panel); cursor: pointer; }
.ds-check input { appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid #a6a6a6; border-radius: var(--radius-s); background: var(--surface); }
.ds-check input:hover { border-color: var(--ink); }
.ds-check input:checked { border-color: #333; background: #333 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6 2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E") center no-repeat; }

/* Buttons: primär schwarz, sekundär grau, eckig, Text links + Pfeil rechts */
.ds-button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 13px 18px; border: 0; border-radius: 0; background: var(--ink); color: #fff; }
.ds-button:disabled { opacity: .35; cursor: default; }
.ds-button--secondary { background: var(--control); color: var(--ink-soft); }
.ds-button--secondary:hover:not(:disabled) { background: var(--control-hover); }

/* Select */
.ds-select { padding: 8px; max-width: 160px; border: 0; border-radius: var(--radius-m); background: var(--control); color: var(--ink-soft); }

/* Dropzone */
.ds-dropzone { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 64px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-m); }
.ds-dropzone:hover, .ds-dropzone.dragging { background: #ebebeb; }

/* Listenkarte (Bildzeile) */
.ds-card { display: grid; grid-template-columns: 20px 40px minmax(0, 1fr) 28px; gap: var(--space-2); align-items: center; padding: 10px var(--space-2); margin-bottom: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); transition: background-color var(--ease); }
.ds-card .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); line-height: 16px; color: var(--ink-soft); }
.ds-icon-button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; color: #666; }
.ds-icon-button:hover:not(:disabled) { background: #f2f2f2; color: var(--ink); }
.ds-icon-button:disabled { color: #ccc; }

/* Rund nur hier: Carousel-Navigation */
.ds-round { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #e5e5e5; font-size: 19px; }
.ds-round:hover:not(:disabled) { background: #d8d8d8; }
.ds-round:disabled { opacity: .3; cursor: default; }

/* Eingefügte Marke beim Sortieren */
.ds-insert::before { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #222; }

/* Feldzeile im Bedienfeld */
.ds-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--space-4); font-size: var(--fs-panel); }
.ds-meta { font-size: var(--fs-small); letter-spacing: .07em; color: var(--text-muted); }
.ds-error { color: var(--danger); font-size: var(--fs-panel); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ds-card { transition: none; } }