
:root{--haupt:#111827;--akzent:#e11d48;--r:10px;--rk:7px;--pille:999px;--luft:18px;--schatten:none;--schrift:"Iowan Old Style",Georgia,serif;--ueber:"Iowan Old Style",Georgia,serif}
html[data-schema="creme"]{--grund:#fdfbf6;--flaeche:#f5efe3;--linie:#e6dcc9;--text:#2a2520;--leise:#7a6f60}
html[data-schema="hell"]{--grund:#fff;--flaeche:#f4f4f5;--linie:#e4e4e7;--text:#18181b;--leise:#71717a}
html[data-schema="dunkel"]{--grund:#121215;--flaeche:#1d1d22;--linie:#2f2f36;--text:#f2f2f3;--leise:#a3a3ad}
html[data-schrift="modern"]{--schrift:system-ui,sans-serif;--ueber:system-ui,sans-serif}
html[data-schrift="technisch"]{--schrift:system-ui,sans-serif;--ueber:ui-monospace,Menlo,Consolas,monospace}
html[data-ecken="scharf"]{--r:2px;--rk:2px;--pille:3px} html[data-ecken="rund"]{--r:20px;--rk:14px}
html[data-schatten="weich"]{--schatten:0 2px 14px rgba(0,0,0,.09)} html[data-schatten="hart"]{--schatten:4px 4px 0 var(--text)}
html[data-dichte="kompakt"]{--luft:12px}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--grund);color:var(--text);font:16px/1.6 var(--schrift)}
h1,h2,h3{font-family:var(--ueber);font-weight:600;line-height:1.2;letter-spacing:-.01em}
a{color:inherit}
.h{max-width:880px;margin:0 auto;padding:0 18px}
header{background:var(--haupt);color:#fff}
header a{text-decoration:none}
header .oben{display:flex;align-items:center;gap:12px;padding:14px 0}
html[data-kopf="gross"] .oben{flex-direction:column;text-align:center;padding:24px 0 18px}
html[data-kopf="tafel"] header{border-bottom:6px solid var(--akzent)}
.zeichen{flex:0 0 42px;width:42px;height:42px;border-radius:var(--pille);background:var(--akzent);display:grid;place-items:center;font:700 15px/1 system-ui;color:#fff}
html[data-kopf="gross"] .zeichen{flex:0 0 58px;width:58px;height:58px;font-size:21px}
.nam{font-size:20px;font-weight:600;font-family:var(--ueber)} html[data-kopf="gross"] .nam{font-size:27px}
.cl{font-size:12.5px;opacity:.75;font-family:system-ui,sans-serif}
nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none} html[data-kopf="gross"] nav{justify-content:center}
nav a{flex:0 0 auto;padding:10px 13px 11px;font:600 13px/1 system-ui,sans-serif;color:rgba(255,255,255,.75);white-space:nowrap;border-bottom:2.5px solid transparent}
nav a.an{color:#fff} html[data-akzentform="unterstrich"] nav a.an{border-bottom-color:var(--akzent)}
html[data-akzentform="pille"] nav a.an{background:var(--akzent);border-radius:var(--pille) var(--pille) 0 0}
html[data-akzentform="kante"] nav a.an{box-shadow:inset 3px 0 0 var(--akzent)}
section{padding:var(--luft) 0 4px} section h2{font-size:19px;margin-bottom:8px}
.kopfbild{aspect-ratio:16/8;background:var(--flaeche);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);margin-bottom:14px;border:1px solid var(--linie)}
.kopfbild img{width:100%;height:100%;object-fit:cover;display:block}
.gruss h1{font-size:clamp(24px,6vw,32px);margin-bottom:6px} .gruss p{color:var(--leise);font-size:15.5px;max-width:34em}
.gitter{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:10px}
html[data-kachel="liste"] .gitter{grid-template-columns:1fr}
.kachel{background:var(--grund);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--schatten);text-decoration:none;position:relative}
html[data-kachel="bild-links"] .kachel,html[data-kachel="liste"] .kachel{flex-direction:row}
.kachel .bi{aspect-ratio:4/3;background:var(--flaeche);overflow:hidden;position:relative}
html[data-kachel="bild-links"] .kachel .bi,html[data-kachel="liste"] .kachel .bi{flex:0 0 38%;aspect-ratio:auto;min-height:90px}
.kachel .bi img{width:100%;height:100%;object-fit:cover;display:block}
.kachel .tx{padding:11px 12px 12px;flex:1;min-width:0}
.kachel h3{font-size:15.5px} .kachel .kz{font-size:12.5px;color:var(--leise);font-family:system-ui,sans-serif}
.kachel .pr{margin-top:7px;font:700 16px/1 system-ui,sans-serif;color:var(--akzent)}
.bestand{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.92);color:#18181b;font:600 11px/1 system-ui,sans-serif;padding:5px 8px;border-radius:6px}
.bestand.knapp{background:var(--akzent);color:#fff} .bestand.aus{background:#18181b;color:#fff}
.kachel.weg .bi img{filter:saturate(.45) brightness(1.05)} .kachel.weg .pr{color:var(--leise);text-decoration:line-through}
.mehr{display:inline-block;margin-top:12px;font:600 14px system-ui,sans-serif;color:var(--akzent)}
.zeiten{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:520px){.zeiten{grid-template-columns:1fr}}
.box{background:var(--flaeche);border-radius:var(--r);padding:14px 15px;font-size:14.5px;box-shadow:var(--schatten)}
.box b{display:block;font-family:system-ui,sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--leise);margin-bottom:5px}
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.kontakt a{display:block;text-align:center;padding:14px 10px;border-radius:var(--r);background:var(--akzent);color:#fff;font:600 15px/1.2 system-ui,sans-serif;text-decoration:none;box-shadow:var(--schatten)}
.kontakt a.zweit{background:var(--flaeche);color:var(--text);border:1px solid var(--linie)}
.kontakt a small{display:block;font-weight:400;font-size:12px;opacity:.8;margin-top:3px}
/* Artikel */
.zurueck{display:inline-block;margin:16px 0 2px;font:600 14px/1 system-ui,sans-serif;color:var(--akzent);text-decoration:none}
.gross{aspect-ratio:4/3;background:var(--flaeche);border-radius:var(--r);overflow:hidden;border:1px solid var(--linie);box-shadow:var(--schatten);margin-top:10px}
.gross img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.mini{display:flex;gap:8px;margin-top:9px;overflow-x:auto} .mini a{flex:0 0 72px;height:56px;border:1.5px solid var(--linie);border-radius:var(--rk);overflow:hidden}
.mini img{width:100%;height:100%;object-fit:cover;display:block}
.kopfzeile{margin-top:var(--luft)} .kopfzeile h1{font-size:clamp(22px,5vw,29px)}
.preiszeile{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-top:10px}
.preis{font:700 27px/1 system-ui,sans-serif;color:var(--akzent)} .preis.weg{color:var(--leise);text-decoration:line-through;font-size:20px}
.mwst{font-size:12.5px;color:var(--leise);font-family:system-ui,sans-serif}
.marke{display:inline-block;padding:4px 10px;border-radius:var(--pille);font:600 12px/1.5 system-ui,sans-serif;background:var(--flaeche);border:1px solid var(--linie)}
.marke.aus{background:#18181b;color:#fff;border-color:#18181b}
.abschnitt{margin-top:var(--luft)} .abschnitt h2{font-size:17px;margin-bottom:8px}
table{width:100%;border-collapse:collapse;font-family:system-ui,sans-serif} td{padding:9px 0;border-bottom:1px solid var(--linie);font-size:14.5px;vertical-align:top}
td:first-child{color:var(--leise);width:44%;padding-right:12px} tr:last-child td{border-bottom:0}
ul.stich{margin:8px 0 0 18px;font-size:15px}
.serie{margin-top:10px;font-size:14px;color:var(--leise);font-style:italic}
.verkauft-band{margin-top:18px;padding:12px 14px;background:var(--flaeche);border-left:3px solid var(--akzent);font:14.5px/1.5 system-ui,sans-serif}
form.anfrage{margin-top:20px;background:var(--flaeche);border-radius:var(--r);padding:16px}
form.anfrage h2{font-size:17px;margin-bottom:8px}
form.anfrage label{display:block;font:500 12.5px system-ui,sans-serif;color:var(--leise);margin:8px 0 3px}
form.anfrage input,form.anfrage textarea{width:100%;padding:10px 12px;border:1.5px solid var(--linie);border-radius:var(--rk);background:var(--grund);color:var(--text);font:inherit}
form.anfrage button{margin-top:12px;width:100%;padding:14px;border:0;border-radius:var(--r);background:var(--akzent);color:#fff;font:600 16px/1 system-ui,sans-serif;cursor:pointer}
form.anfrage small{display:block;margin-top:8px;font:12px system-ui,sans-serif;color:var(--leise)}
.danke{margin-top:12px;padding:12px;border-radius:var(--rk);background:#ecfdf3;color:#15803d;font:14px system-ui,sans-serif;display:none}
footer{margin-top:34px;border-top:1px solid var(--linie);background:var(--flaeche)}
footer .in{padding:18px 0 26px;font-size:13px;color:var(--leise);font-family:system-ui,sans-serif}
footer .rei{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px} footer .rei a{color:inherit}
.recht{max-width:40em;white-space:pre-line;font-size:15px;margin-top:14px}
