/* Design-System der Demo „Hamit Abis Möbelstudio · Händlerportal“ (s1-t185) — Farben nur hier in :root, Beschreibung in DESIGN.md. */
:root {
  --grund: #f3f5f4;
  --flaeche: #ffffff;
  --feld: #eceff0;
  --tinte: #1c2b2a;
  --leise: #4d5c5b;
  --linie: #d3dbd8;
  --akzent: #2e5e4e;
  --akzent-hell: #e1ece7;
  --auf-akzent: #ffffff;
  --sonder: #7a4a0c;
  --sonder-hell: #fbefd9;
  --fehler: #a3261b;
  --fokus: #0b57d0;
  --stoff-a: #3f6b5a;
  --stoff-b: #c8b597;
  --stoff-c: #4a4e57;
  --holz: #b98b5e;
  --schatten: 0 1px 2px rgba(28, 43, 42, 0.06), 0 8px 24px rgba(28, 43, 42, 0.08);
  --schrift: "Segoe UI Variable Text", "Segoe UI", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 40px;
  --radius-s: 8px;
  --radius-m: 14px;
  --breite: 1120px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 16px/1.5 var(--schrift); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--abstand-3); }
h1 { font-size: 28px; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 650; }
h3 { font-size: 16px; font-weight: 650; }
p { margin: 0 0 var(--abstand-3); max-width: 68ch; }
a { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.leise { color: var(--leise); }
.zahl { font-variant-numeric: tabular-nums; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Kopfleiste */
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: var(--abstand-3) var(--abstand-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3) var(--abstand-5); }
.marke { font-weight: 650; color: var(--tinte); text-decoration: none; }
.marke span { color: var(--leise); font-weight: 400; }
.kunde { color: var(--leise); font-size: 14px; }
.kopf nav { margin-left: auto; display: flex; gap: var(--abstand-1); }
.kopf nav a { color: var(--tinte); text-decoration: none; padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius-s); }
.kopf nav a:hover { background: var(--grund); }
.kopf nav a[aria-current="page"] { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }

/* Seite und Kachel */
main { max-width: var(--breite); margin: 0 auto; padding: var(--abstand-6) var(--abstand-4); }
.kachel { background: var(--flaeche); border-radius: var(--radius-m); box-shadow: var(--schatten); padding: var(--abstand-5); }
main > .kachel, main > .zwei { margin-bottom: var(--abstand-5); }
.raster { display: grid; gap: var(--abstand-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.zwei { display: grid; gap: var(--abstand-5); }
@media (min-width: 640px) { .zwei { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .produkt { grid-template-columns: 3fr 2fr; align-items: start; } }

/* Knöpfe, Eingaben, Abzeichen */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: 44px; padding: 0 var(--abstand-5); border-radius: var(--radius-s); border: 1px solid var(--akzent); background: var(--akzent); color: var(--auf-akzent); font: 600 15px var(--schrift); text-decoration: none; cursor: pointer; }
.knopf.zweit { background: var(--flaeche); color: var(--akzent); }
.knopf.klein { min-height: 36px; padding: 0 var(--abstand-3); font-size: 14px; }
.feld { display: grid; gap: var(--abstand-1); margin-bottom: var(--abstand-4); }
.feld label, legend { font-weight: 600; font-size: 14px; }
input, select { font: inherit; color: var(--tinte); background: var(--flaeche); border: 1px solid var(--leise); border-radius: var(--radius-s); min-height: 44px; padding: 0 var(--abstand-3); }
input[type="number"] { width: 6em; }
input[aria-invalid="true"] { border-color: var(--fehler); }
.meldung { min-height: 1.5em; font-size: 14px; }
.meldung.fehler { color: var(--fehler); }
.abzeichen { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px var(--abstand-2); border-radius: 999px; background: var(--akzent-hell); color: var(--akzent); }
.abzeichen.sonder { background: var(--sonder-hell); color: var(--sonder); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--abstand-5); }
.wahl { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.wahl label { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 44px; padding: 0 var(--abstand-4); border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--flaeche); cursor: pointer; }
.wahl label:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.wahl label:has(input:disabled) { color: var(--leise); cursor: not-allowed; }
.wahl input { min-height: 0; margin: 0; accent-color: var(--akzent); }
.punkt { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.stoff-a { background: var(--stoff-a); }
.stoff-b { background: var(--stoff-b); }
.stoff-c { background: var(--stoff-c); }

/* Artikel-Kachel */
.artikel { display: flex; flex-direction: column; gap: var(--abstand-2); padding: 0; overflow: hidden; }
.artikel svg { display: block; width: 100%; height: auto; background: var(--feld); }
.artikel .innen { padding: var(--abstand-4) var(--abstand-5) var(--abstand-5); display: grid; gap: var(--abstand-2); }
.artikel h2 { font-size: 17px; margin: 0; }
.artikel h2 a { color: var(--tinte); text-decoration: none; }
.preis { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.preis-gross { font-size: 34px; font-weight: 650; font-variant-numeric: tabular-nums; }
.liste { color: var(--leise); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.seitenkopf { display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: end; justify-content: space-between; margin-bottom: var(--abstand-5); }
.werkzeug { display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: end; margin-bottom: var(--abstand-5); }
.werkzeug .feld { margin: 0; }

/* Illustrationen und Grundriss (SVG) */
.ill-polster { fill: var(--stoff-a); }
.ill-B { fill: var(--stoff-b); }
.ill-C { fill: var(--stoff-c); }
.ill-holz { fill: var(--holz); }
.ill-metall { fill: var(--tinte); }
.ill-boden { fill: var(--linie); }
.gr-sitz, .gr-ecke, .gr-arm, .gr-chaise { stroke: var(--akzent); stroke-width: 2; }
.gr-sitz { fill: var(--akzent-hell); }
.gr-ecke { fill: var(--stoff-b); }
.gr-arm { fill: var(--leise); }
.gr-chaise { fill: var(--sonder-hell); }
.gr-mass { stroke: var(--leise); stroke-width: 1.5; }
.gr-text { fill: var(--leise); font: 13px var(--schrift); }
.legende { display: flex; flex-wrap: wrap; gap: var(--abstand-3); list-style: none; padding: 0; margin: var(--abstand-3) 0 0; font-size: 14px; }
.legende .punkt { border-radius: 3px; vertical-align: -2px; margin-right: var(--abstand-1); }
.legende .sitz { background: var(--akzent-hell); outline: 2px solid var(--akzent); }
.legende .ecke { background: var(--stoff-b); }
.legende .arm { background: var(--leise); }
.legende .chaise { background: var(--sonder-hell); outline: 2px solid var(--akzent); }
.umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--radius-s); overflow: hidden; margin-bottom: var(--abstand-3); }
.umschalter button { font: 600 14px var(--schrift); min-height: 40px; padding: 0 var(--abstand-4); border: 0; background: var(--flaeche); color: var(--tinte); cursor: pointer; }
.umschalter button[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); }

/* Herleitung: graues Feld wie eine Stückliste */
.herleitung { background: var(--feld); border-radius: var(--radius-s); padding: var(--abstand-4); margin: var(--abstand-4) 0; }
.herleitung table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.herleitung td { padding: var(--abstand-1) 0; }
.herleitung td:last-child { text-align: right; white-space: nowrap; padding-left: var(--abstand-3); }
.herleitung tr.summe td { border-top: 1px solid var(--leise); font-weight: 650; padding-top: var(--abstand-2); }

/* Tabellen (Profil, Merkliste) */
.tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabelle th, .tabelle td { text-align: left; padding: var(--abstand-2) var(--abstand-2) var(--abstand-2) 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: 14px; color: var(--leise); font-weight: 600; }
.tabelle .r { text-align: right; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--abstand-4); margin: 0 0 var(--abstand-5); }
.kennzahlen div { background: var(--feld); border-radius: var(--radius-s); padding: var(--abstand-3) var(--abstand-4); }
.kennzahlen dt { font-size: 14px; color: var(--leise); }
.kennzahlen dd { margin: 0; font-size: 22px; font-weight: 650; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--abstand-4); }
.login .kachel { width: 100%; max-width: 420px; }

@media (prefers-reduced-motion: no-preference) { .knopf, .wahl label { transition: background-color 0.15s, border-color 0.15s; } }
@media print {
  .kopf nav, .knopf, .kein-druck { display: none; }
  body { background: var(--flaeche); }
  .kachel { box-shadow: none; padding: 0; }
}