/* Geschäftskunden-Shop der SMD GmbH.
   Gleiche Formensprache wie die Website — warmes Papier, tiefes Tannengrün —
   damit Kunden nicht das Gefühl haben, in ein anderes Haus zu wechseln. */
:root{
  --papier:#f7f6f2; --weiss:#fff; --tinte:#0d1f1a; --grau:#4f5d56; --grau-hell:#7d8b83;
  --rahmen:#e5e4dc; --rahmen-2:#d6d5cb; --gruen:#0f6b52; --gruen-hell:#14855f;
  --lime:#a4d65e; --kupfer:#b4762a; --rot:#a8402a;
  --band:#0d1f1a;
  --radius:14px; --max:1240px;
  --schatten:0 1px 2px rgba(13,31,26,.04), 0 8px 26px rgba(13,31,26,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--gruen)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.2;margin:0;font-weight:800}
h1{font-size:clamp(23px,3.2vw,31px)}
h2{font-size:clamp(19px,2.4vw,24px)}
h3{font-size:16.5px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.balken{height:3px;background:linear-gradient(90deg,var(--gruen),var(--lime))}
.marke-txt{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gruen)}

/* ---------- Kopf ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(247,246,242,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rahmen)}
header .zeile{display:flex;align-items:center;gap:16px;padding:11px 0}
.marke{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:0 0 auto}
.marke .z{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
.marke b{display:block;font-size:16px;letter-spacing:-.02em;line-height:1.05}
.marke span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gruen)}
header .suche{flex:1 1 auto;max-width:420px;position:relative}
header .suche input{width:100%;padding:9px 13px 9px 34px;border:1px solid var(--rahmen-2);
  border-radius:10px;background:var(--weiss);font:inherit;font-size:14.5px}
header .suche::before{content:"";position:absolute;left:11px;top:50%;width:14px;height:14px;
  transform:translateY(-50%);background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8b83' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.3-4.3'/%3E%3C/svg%3E")}
header nav{display:flex;align-items:center;gap:4px;margin-left:auto}
header nav a,header nav button{background:none;border:0;font:inherit;font-size:14.5px;
  color:var(--grau);text-decoration:none;padding:8px 11px;border-radius:9px;cursor:pointer}
header nav a:hover,header nav button:hover{color:var(--tinte);background:rgba(15,107,82,.07)}
header nav a.aktiv{color:var(--gruen);font-weight:700}
.korbknopf{position:relative}
.korbknopf .zahl{position:absolute;top:2px;right:2px;min-width:17px;height:17px;
  border-radius:9px;background:var(--gruen);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;padding:0 4px}
@media(max-width:820px){header .suche{order:3;max-width:none;flex-basis:100%}
  header .zeile{flex-wrap:wrap}}

/* ---------- Grundbausteine ---------- */
main{padding:26px 0 70px}
.karte{background:var(--weiss);border:1px solid var(--rahmen);border-radius:var(--radius);
  padding:20px;box-shadow:var(--schatten)}
.knopf{display:inline-block;padding:10px 18px;border-radius:10px;border:1px solid transparent;
  font:inherit;font-size:14.5px;font-weight:650;cursor:pointer;text-decoration:none;text-align:center}
.knopf.primaer{background:var(--gruen);color:#fff}
.knopf.primaer:hover{background:var(--gruen-hell)}
.knopf.primaer:disabled{background:var(--rahmen-2);color:var(--grau-hell);cursor:not-allowed}
.knopf.zweit{background:var(--weiss);border-color:var(--rahmen-2);color:var(--tinte)}
.knopf.zweit:hover{border-color:var(--gruen);color:var(--gruen)}
.knopf.gefahr{background:none;border-color:transparent;color:var(--rot);padding:6px 8px}
.knopf.klein{padding:7px 12px;font-size:13.5px}
.hinweis{border-left:3px solid var(--gruen);background:rgba(15,107,82,.055);
  border-radius:0 12px 12px 0;padding:14px 17px;font-size:14.5px;color:var(--grau);margin:0 0 18px}
.hinweis.warn{border-color:var(--kupfer);background:rgba(180,118,42,.08)}
.hinweis b{color:var(--tinte)}
.leer{text-align:center;padding:56px 20px;color:var(--grau-hell)}
.lade{padding:40px;text-align:center;color:var(--grau-hell)}
.fehler{background:rgba(168,64,42,.08);border:1px solid rgba(168,64,42,.3);color:#82301d;
  border-radius:11px;padding:12px 15px;font-size:14.5px;margin:0 0 16px}
.gut{background:rgba(15,107,82,.09);border:1px solid rgba(15,107,82,.3);color:#0b4c3b;
  border-radius:11px;padding:12px 15px;font-size:14.5px;margin:0 0 16px}

/* ---------- Filterleiste ---------- */
.filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.filter select{padding:8px 11px;border:1px solid var(--rahmen-2);border-radius:9px;
  background:var(--weiss);font:inherit;font-size:14px;color:var(--tinte)}
.filter .info{margin-left:auto;font-size:13.5px;color:var(--grau-hell)}

/* ---------- Artikelraster ---------- */
.raster{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.artikel{background:var(--weiss);border:1px solid var(--rahmen);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--schatten);
  transition:border-color .16s ease,transform .16s ease}
.artikel:hover{border-color:var(--gruen);transform:translateY(-2px)}
.artikel .bild{background:linear-gradient(160deg,#f2f1ec,#e9e8e1);padding:22px;
  display:grid;place-items:center;min-height:168px;position:relative}
.artikel .bild svg{height:126px;width:auto}
.artikel .grade{position:absolute;top:11px;left:11px;background:var(--band);color:var(--lime);
  font-size:11px;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:6px}
.artikel .txt{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.artikel h3{font-size:15.5px;line-height:1.3}
.artikel .merkmale{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:13px;
  color:var(--grau)}
.punkt{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.18);
  display:inline-block;flex:0 0 auto}
.artikel .preis{margin-top:auto;padding-top:9px}
.artikel .preis b{font-size:19px;letter-spacing:-.02em}
.artikel .preis .netto{font-size:12px;color:var(--grau-hell);font-weight:400}
.artikel .gesperrt{font-size:13.5px;color:var(--grau-hell)}
.artikel .lager{font-size:12.5px;color:var(--gruen);font-weight:650}
.artikel .lager.knapp{color:var(--kupfer)}
.mengezeile{display:flex;gap:8px;margin-top:11px}
.mengezeile input{width:64px;padding:8px 9px;border:1px solid var(--rahmen-2);border-radius:9px;
  font:inherit;font-size:14px;text-align:center}
.mengezeile .knopf{flex:1}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--rahmen);vertical-align:top}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--grau);font-weight:800}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap}
.tabelle{background:var(--weiss);border:1px solid var(--rahmen);border-radius:var(--radius);
  overflow-x:auto}
.kennung{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--grau)}
.merker{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  padding:3px 8px;border-radius:6px;text-transform:uppercase}
.merker.offen{background:rgba(180,118,42,.14);color:#8a5719}
.merker.bezahlt{background:rgba(15,107,82,.13);color:#0b4c3b}
.merker.versandt{background:rgba(15,107,82,.13);color:#0b4c3b}
.merker.storniert{background:rgba(168,64,42,.12);color:#82301d}

/* ---------- Zwei Spalten ---------- */
.spalten{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
@media(max-width:900px){.spalten{grid-template-columns:1fr}}
.summe{position:sticky;top:82px}
.summe dl{margin:0;display:grid;gap:9px}
.summe dl div{display:flex;justify-content:space-between;gap:14px;font-size:14.5px}
.summe dt{color:var(--grau)}
.summe dd{margin:0;font-weight:700}
.summe .gesamt{border-top:1px solid var(--rahmen);margin-top:12px;padding-top:12px;font-size:17px}

/* ---------- Formulare ---------- */
label.feld{display:block;margin-bottom:15px}
label.feld>span{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
label.feld .zus{font-weight:400;color:var(--grau-hell)}
input,select,textarea{font:inherit}
.feld input,.feld select,.feld textarea{width:100%;font-size:15px;color:var(--tinte);
  background:var(--papier);border:1px solid var(--rahmen-2);border-radius:10px;padding:10px 12px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid rgba(15,107,82,.32);
  outline-offset:1px;border-color:var(--gruen);background:var(--weiss)}
.feld textarea{min-height:96px;resize:vertical}
.reihe{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--grau);
  margin:2px 0 16px}
.zustimmung input{width:17px;height:17px;flex:0 0 auto;margin-top:2px}

/* ---------- Einzelseite (Anmeldung, Bestätigung) ---------- */
body.einzeln{display:grid;place-items:center;min-height:100vh;padding:24px}
.karte-mitte{background:var(--weiss);border:1px solid var(--rahmen);border-radius:16px;
  padding:32px;max-width:440px;box-shadow:var(--schatten);text-align:center}
.karte-mitte .marke{justify-content:center;margin-bottom:14px}
.karte-mitte img.zeichen{width:52px;height:52px;margin:0 auto 14px}
.karte-mitte p.marke{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gruen);margin:0 0 8px}
.mitte{max-width:520px;margin:0 auto}
.mitte.breit{max-width:760px}

/* ---------- Fuß ---------- */
footer{border-top:1px solid var(--rahmen);padding:26px 0 40px;font-size:13.5px;color:var(--grau-hell)}
footer a{color:var(--grau)}
footer .zeile{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* ---------- Kennzahlen (Schaufenster) ---------- */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--rahmen);border:1px solid var(--rahmen);border-radius:var(--radius);
  overflow:hidden;text-align:left}
.kennzahl{background:var(--weiss);padding:16px 18px}
.kennzahl b{display:block;font-size:22px;letter-spacing:-.03em;line-height:1.15}
.kennzahl span{display:block;font-size:12.5px;color:var(--grau);margin-top:2px}

/* ---------- Dunkelmodus ----------
   Wie auf der Website: Voreinstellung ist die Systemvorgabe, eine ausdrückliche
   Wahl auf smd-tech.de gilt hier mit — der Shop läuft unter derselben Adresse
   und liest denselben Eintrag im Browser. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --papier:#111f1a; --weiss:#182721; --tinte:#e8efeb; --grau:#a9bcb3;
    --grau-hell:#8fa49c; --rahmen:#2c4238; --rahmen-2:#5f7f70;
    --gruen:#5cc79c; --gruen-hell:#74d5ad; --kupfer:#d99b4e; --band:#0a1712;
    --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 26px rgba(0,0,0,.35);
  }

:root:not([data-thema="hell"]) header{background:rgba(17,31,26,.94)}
:root:not([data-thema="hell"]) .knopf.primaer{color:#08150f}
:root:not([data-thema="hell"]) .knopf.primaer:disabled{background:#2c4238;color:#6d8378}
:root:not([data-thema="hell"]) .artikel .bild{background:linear-gradient(160deg,#20342c,#182721)}
:root:not([data-thema="hell"]) .feld input,:root:not([data-thema="hell"]) .feld select,:root:not([data-thema="hell"]) .feld textarea,
:root:not([data-thema="hell"]) header .suche input{background:#0f1c17;color:var(--tinte)}
:root:not([data-thema="hell"]) .fehler{background:rgba(214,110,80,.14);border-color:rgba(214,110,80,.42);color:#f0b6a4}
:root:not([data-thema="hell"]) .gut{background:rgba(92,199,156,.13);border-color:rgba(92,199,156,.4);color:#a8e8ca}
:root:not([data-thema="hell"]) .hinweis{background:rgba(92,199,156,.08)}
:root:not([data-thema="hell"]) .hinweis.warn{background:rgba(217,155,78,.1)}
:root:not([data-thema="hell"]) .merker.offen{background:rgba(217,155,78,.18);color:#f0c48a}
:root:not([data-thema="hell"]) .merker.bezahlt,:root:not([data-thema="hell"]) .merker.versandt{background:rgba(92,199,156,.16);color:#a8e8ca}
:root:not([data-thema="hell"]) .merker.storniert{background:rgba(214,110,80,.16);color:#f0b6a4}
:root:not([data-thema="hell"]) .karte,:root:not([data-thema="hell"]) .artikel,:root:not([data-thema="hell"]) .tabelle{box-shadow:none}
}
:root[data-thema="dunkel"] {
    --papier:#111f1a; --weiss:#182721; --tinte:#e8efeb; --grau:#a9bcb3;
    --grau-hell:#8fa49c; --rahmen:#2c4238; --rahmen-2:#5f7f70;
    --gruen:#5cc79c; --gruen-hell:#74d5ad; --kupfer:#d99b4e; --band:#0a1712;
    --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 26px rgba(0,0,0,.35);
}

:root[data-thema="dunkel"] header{background:rgba(17,31,26,.94)}
:root[data-thema="dunkel"] .knopf.primaer{color:#08150f}
:root[data-thema="dunkel"] .knopf.primaer:disabled{background:#2c4238;color:#6d8378}
:root[data-thema="dunkel"] .artikel .bild{background:linear-gradient(160deg,#20342c,#182721)}
:root[data-thema="dunkel"] .feld input,:root[data-thema="dunkel"] .feld select,:root[data-thema="dunkel"] .feld textarea,
:root[data-thema="dunkel"] header .suche input{background:#0f1c17;color:var(--tinte)}
:root[data-thema="dunkel"] .fehler{background:rgba(214,110,80,.14);border-color:rgba(214,110,80,.42);color:#f0b6a4}
:root[data-thema="dunkel"] .gut{background:rgba(92,199,156,.13);border-color:rgba(92,199,156,.4);color:#a8e8ca}
:root[data-thema="dunkel"] .hinweis{background:rgba(92,199,156,.08)}
:root[data-thema="dunkel"] .hinweis.warn{background:rgba(217,155,78,.1)}
:root[data-thema="dunkel"] .merker.offen{background:rgba(217,155,78,.18);color:#f0c48a}
:root[data-thema="dunkel"] .merker.bezahlt,:root[data-thema="dunkel"] .merker.versandt{background:rgba(92,199,156,.16);color:#a8e8ca}
:root[data-thema="dunkel"] .merker.storniert{background:rgba(214,110,80,.16);color:#f0b6a4}
:root[data-thema="dunkel"] .karte,:root[data-thema="dunkel"] .artikel,:root[data-thema="dunkel"] .tabelle{box-shadow:none}

/* Sichtbarer Fokus, auch im Shop. */
:focus-visible{outline:3px solid var(--gruen);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
.sprunglink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--band);
  color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:650;text-decoration:none}
.sprunglink:focus{left:0}