*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{background:var(--st-surface);color:var(--st-text);font-family:var(--st-font);flex-direction:column;min-height:100vh;margin:0;font-size:15px;line-height:1.6;display:flex}button,input,select{font:inherit;color:inherit}a{color:var(--st-primary)}h1,h2{margin:0;line-height:1.3}.kopf{z-index:10;background:var(--st-bg);border-bottom:1px solid var(--st-border);align-items:center;gap:24px;padding:12px 24px;display:flex;position:sticky;top:0}.marke{color:var(--st-text);align-items:center;gap:12px;text-decoration:none;display:flex}.marke img{width:auto;height:24px}.marke span{letter-spacing:.08em;text-transform:uppercase;color:var(--st-text-muted);font-size:13px;font-weight:500}.nav{gap:4px;display:flex}.nav a{border-radius:var(--st-radius);color:var(--st-text-muted);padding:6px 12px;font-weight:500;text-decoration:none}.nav a:hover{background:var(--st-surface);color:var(--st-text)}.nav a[aria-current=true]{background:var(--st-blue-50);color:var(--st-primary)}.kopf-rechts{align-items:center;gap:12px;margin-left:auto;display:flex}.sprache{border:1px solid var(--st-border-strong);border-radius:var(--st-radius);display:inline-flex;overflow:hidden}.sprache button{background:var(--st-bg);cursor:pointer;color:var(--st-text-muted);border:0;padding:4px 10px;font-size:13px;font-weight:500}.sprache button[aria-pressed=true]{background:var(--st-navy);color:var(--st-white)}.primaer{border-radius:var(--st-radius);background:var(--st-primary);height:40px;color:var(--st-white);cursor:pointer;transition:background var(--st-ease);border:0;padding:0 20px;font-weight:500}.primaer:hover:not(:disabled){background:var(--st-primary-hover)}.primaer:disabled{background:var(--st-gray-300);cursor:not-allowed}.leise{border:1px solid var(--st-border-strong);border-radius:var(--st-radius);background:var(--st-bg);cursor:pointer;height:36px;padding:0 12px;font-weight:500}.leise:disabled{opacity:.5;cursor:not-allowed}:focus-visible{outline:2px solid var(--st-focus);outline-offset:2px}.inhalt{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:32px 24px 64px}.leise-text{color:var(--st-text-muted);font-size:13px}.meldung{border-radius:var(--st-radius);margin:0 0 16px;padding:12px 16px;font-weight:500}.meldung.ok{background:var(--st-success-50);color:var(--st-success)}.meldung.fehler{background:var(--st-danger-50);color:var(--st-danger)}.meldung.info{background:var(--st-orange-50);color:var(--st-text)}.login{background:var(--st-bg);border:1px solid var(--st-border);border-radius:var(--st-radius);text-align:center;max-width:440px;margin:48px auto;padding:40px 32px}.login img{width:auto;height:68px;margin-bottom:16px}.login h1{margin-bottom:8px;font-size:22px}.login p{color:var(--st-text-muted);margin:0 0 24px}.login form{text-align:left;flex-direction:column;gap:12px;display:flex}.login label{flex-direction:column;gap:4px;font-size:13px;font-weight:500;display:flex}.login input{border:1px solid var(--st-border-strong);border-radius:var(--st-radius-sm);height:44px;padding:0 12px}.login .meldung{text-align:left;margin:16px 0 0}.korb-link{border-radius:var(--st-radius);width:40px;height:40px;color:var(--st-text);justify-content:center;align-items:center;display:inline-flex;position:relative}.korb-link:hover,.korb-link[aria-current=true]{background:var(--st-surface)}#korb-anzahl{border-radius:var(--st-radius-pill);background:var(--st-primary);min-width:18px;height:18px;color:var(--st-white);text-align:center;padding:0 5px;font-size:11px;font-weight:700;line-height:18px;position:absolute;top:2px;right:0}.raster{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;display:grid}.produkt{color:var(--st-text);background:var(--st-bg);border:1px solid var(--st-border);border-radius:var(--st-radius);transition:box-shadow var(--st-ease), transform var(--st-ease);flex-direction:column;text-decoration:none;display:flex;overflow:hidden}.produkt:hover{box-shadow:var(--st-shadow);transform:translateY(-2px)}.produkt-bild{aspect-ratio:4/3;background:linear-gradient(160deg, var(--st-gray-50) 0%, var(--st-gray-100) 100%);border-bottom:1px solid var(--st-border);place-items:center;display:grid;position:relative}.produkt-bild img{object-fit:cover;width:100%;height:100%}.produkt-bild .marke-special{position:absolute;top:12px;left:12px}.bild-leer{letter-spacing:.06em;color:var(--st-gray-300);text-transform:uppercase;font-size:32px;font-weight:700}.produkt-text{flex-direction:column;gap:6px;padding:16px 20px 20px;display:flex}.produkt-text h2{font-size:20px}.produkt-text p{margin:0}.farben{align-items:center;gap:6px;display:flex}.farben .leise-text{margin-left:4px}.aus{color:var(--st-danger);font-size:13px;font-weight:500}.marke-special{background:var(--st-orange-50);color:var(--st-text);border-radius:var(--st-radius-pill);vertical-align:middle;padding:2px 8px;font-size:12px;font-weight:500}.farbpunkt{background:#d9dce5;border:1px solid #0003302e;border-radius:50%;flex:none;width:14px;height:14px;display:inline-block}.chip .farbpunkt{width:18px;height:18px}.fp-schwarz{background:#15171c}.fp-transparent{background:linear-gradient(135deg,#fff 0%,#e3e7f0 55%,#c9cfdd 100%)}.fp-tort{background:linear-gradient(135deg,#3b2010 0%,#8a5226 45%,#d19a55 60%,#4a2812 100%)}.fp-gruen{background:#3f6b45}.fp-navy{background:#1b2a5c}.fp-blau{background:#2d5bd8}.fp-gelb{background:#f2c230}.fp-braun{background:#7a4b2a}.fp-orange{background:#f08a24}.fp-pink{background:#f2a3c0}.fp-grau{background:#8a8f9c}.fp-rot{background:#c8323c}.fp-weiss{background:#fff}.fp-gold{background:#c9a34a}.fp-silber{background:#c3c7cf}.zurueck{color:var(--st-text-muted);margin-bottom:16px;font-weight:500;text-decoration:none;display:inline-block}.zurueck:hover{color:var(--st-text)}.detail{background:var(--st-bg);border:1px solid var(--st-border);border-radius:var(--st-radius);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;padding:32px;display:grid}.detail-bild{aspect-ratio:1;background:linear-gradient(160deg, var(--st-gray-50) 0%, var(--st-gray-100) 100%);border-radius:var(--st-radius);place-items:center;display:grid;overflow:hidden}.detail-bild img{object-fit:cover;width:100%;height:100%}.detail-bild .bild-leer{font-size:48px}.detail-info h1{font-size:32px;line-height:40px}.detail-preis{margin:8px 0 24px;font-size:22px}.detail-preis .leise-text{margin-left:8px;font-size:13px}.wahl{border:0;margin:0 0 20px;padding:0}.wahl legend{color:var(--st-text-muted);margin-bottom:8px;font-size:14px}.wahl legend b{color:var(--st-text);font-weight:500}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--st-border-strong);border-radius:var(--st-radius-pill);background:var(--st-bg);cursor:pointer;height:40px;transition:border-color var(--st-ease), box-shadow var(--st-ease);align-items:center;gap:8px;padding:0 14px 0 10px;font-size:14px;font-weight:500;display:inline-flex}.chip:hover{border-color:var(--st-navy)}.chip.an{border-color:var(--st-navy);box-shadow:inset 0 0 0 1px var(--st-navy)}.chip.leer{color:var(--st-gray-500);text-decoration:line-through;-webkit-text-decoration-color:var(--st-gray-300);text-decoration-color:var(--st-gray-300)}.chip:disabled{display:none}.bestand{margin:4px 0 16px;font-size:14px;font-weight:500}.bestand.ok{color:var(--st-success)}.bestand.knapp{color:var(--st-text)}.bestand.aus{color:var(--st-danger)}.kauf{flex-wrap:wrap;align-items:stretch;gap:12px;display:flex}.stepper{border:1px solid var(--st-border-strong);border-radius:var(--st-radius);align-items:center;height:48px;display:inline-flex;overflow:hidden}.stepper button{background:var(--st-bg);cursor:pointer;width:44px;height:100%;color:var(--st-text);border:0;font-size:20px}.stepper button:hover:not(:disabled){background:var(--st-surface)}.stepper button:disabled{color:var(--st-gray-300);cursor:not-allowed}.stepper input{text-align:center;-moz-appearance:textfield;border:0;width:52px;height:100%;font-size:16px;font-weight:500}.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stepper.klein{height:36px}.stepper.klein button{width:34px;font-size:16px}.stepper.klein span{text-align:center;min-width:28px;font-weight:500}.primaer.gross{height:48px;padding:0 28px;font-size:16px}.primaer.breit{width:100%}.klein{margin-top:12px;font-size:12px;line-height:18px}.toast{z-index:20;background:var(--st-navy);color:var(--st-white);border-radius:var(--st-radius);box-shadow:var(--st-shadow);align-items:center;gap:16px;max-width:calc(100vw - 32px);padding:12px 16px 12px 20px;font-size:14px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast a{color:var(--st-white);white-space:nowrap;font-weight:700}.korb-seite{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:24px;display:grid}.korb-liste{background:var(--st-bg);border:1px solid var(--st-border);border-radius:var(--st-radius);margin:0;padding:0;list-style:none}.korb-liste li{border-top:1px solid var(--st-border);grid-template-columns:72px minmax(0,1fr) auto 88px 32px;align-items:center;gap:16px;padding:16px 20px;display:grid}.korb-liste li:first-child{border-top:0}.korb-bild{border-radius:var(--st-radius-sm);background:var(--st-gray-100);place-items:center;width:72px;height:72px;text-decoration:none;display:grid;overflow:hidden}.korb-bild img{object-fit:cover;width:100%;height:100%}.korb-bild .bild-leer{font-size:11px}.korb-text{flex-direction:column;gap:2px;min-width:0;display:flex}.korb-text span{align-items:center;gap:6px;font-size:14px;display:flex}.korb-summe{text-align:right}.entfernen{border-radius:var(--st-radius);width:32px;height:32px;color:var(--st-gray-500);cursor:pointer;background:0 0;border:0;font-size:20px}.entfernen:hover{background:var(--st-danger-50);color:var(--st-danger)}.zusammenfassung{background:var(--st-bg);border:1px solid var(--st-border);border-radius:var(--st-radius);padding:24px;position:sticky;top:88px}.zusammenfassung h2{margin-bottom:12px;font-size:16px}.arten-karten{gap:8px;margin-bottom:20px;display:grid}.art-karte{border:1px solid var(--st-border-strong);border-radius:var(--st-radius);cursor:pointer;grid-template-columns:auto 1fr;gap:2px 10px;padding:12px 14px;display:grid}.art-karte input{accent-color:var(--st-primary);grid-row:1/3;margin-top:4px}.art-karte small{color:var(--st-text-muted);font-size:12px;line-height:18px}.art-karte.an{border-color:var(--st-primary);background:var(--st-blue-50)}.summen{grid-template-columns:1fr auto;gap:8px;margin:0 0 16px;font-size:14px;display:grid}.summen dd{text-align:right;font-variant-numeric:tabular-nums;margin:0}.summen .gesamt{border-top:1px solid var(--st-border);padding-top:8px;font-size:18px;font-weight:700}.warn{color:var(--st-danger);margin:0 0 12px;font-size:14px;font-weight:500}.leer-box{background:var(--st-bg);border:1px solid var(--st-border);border-radius:var(--st-radius);text-align:center;padding:48px}.knopf{align-items:center;text-decoration:none;display:inline-flex}dialog.bestaetigen{border-radius:var(--st-radius);width:calc(100vw - 32px);max-width:420px;box-shadow:var(--st-shadow);color:var(--st-text);border:0;padding:28px}dialog.bestaetigen::backdrop{background:#00033066}dialog.bestaetigen h2{margin-bottom:8px;font-size:20px}.dialog-knoepfe{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.dialog-knoepfe .leise{height:40px}.seitentitel{margin-bottom:16px;font-size:24px}.karten{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:16px;display:grid}.karte{background:var(--st-bg);border:1px solid var(--st-border);border-radius:var(--st-radius);padding:24px}.karte h2{margin-bottom:12px;font-size:18px;font-weight:500}.karte dl{grid-template-columns:max-content 1fr;gap:8px 16px;margin:0;display:grid}.karte dt{font-weight:500}.karte dd{margin:0}table.liste{border-collapse:collapse;width:100%;font-size:14px}table.liste th{text-align:left;text-transform:uppercase;letter-spacing:.08em;color:var(--st-text-muted);padding:4px 8px;font-size:12px;font-weight:500}table.liste td{border-top:1px solid var(--st-border);padding:8px}table.liste .zahl{text-align:right;white-space:nowrap}.fuss{text-align:center;color:var(--st-text-muted);padding:16px 24px 32px;font-size:13px}@media (max-width:768px){.kopf{flex-wrap:wrap;gap:8px 16px;padding:12px 16px}.nav{order:3;width:100%}.inhalt{padding:16px 16px 48px}.detail{grid-template-columns:1fr;gap:20px;padding:16px}.detail-info h1{font-size:26px;line-height:32px}.korb-seite{grid-template-columns:1fr}.zusammenfassung{position:static}.korb-liste li{grid-template-columns:56px minmax(0,1fr) 32px;grid-template-areas:"bild text weg""bild menge summe";gap:8px 12px;padding:12px}.korb-bild{grid-area:bild;width:56px;height:56px}.korb-text{grid-area:text}.korb-liste .stepper{grid-area:menge;justify-self:start}.korb-summe{grid-area:summe}.entfernen{grid-area:weg}.kauf .primaer{flex:1}}.monat-wahl{align-items:center;gap:12px;margin:8px 0 12px;font-size:13px;font-weight:500;display:flex}.monat-wahl select{border:1px solid var(--st-border-strong);border-radius:var(--st-radius-sm);background:var(--st-bg);height:36px;padding:0 8px}table.liste.melden input{text-align:center;border:1px solid var(--st-border-strong);border-radius:var(--st-radius-sm);width:72px;height:36px}table.liste small.warn{color:var(--st-danger);font-weight:500}.melde-summe{min-height:22px;margin:12px 0;font-size:14px}
