/* SKELETT – eine Stilvorlage für alle Designs. Die Stellschrauben stehen als data-Attribute am -Tag. */ :root{ --haupt:#1f3a5f; --akzent:#c2410c; --schrift:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --ueber:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ---------- Schraube: Farbschema ---------- */ [data-schema="hell"]{ --grund:#fbfcfe; --flaeche:#f4f6fa; --karte:#fff; --karte2:#f8fafc; --ink:#131820; --text:#2b3240; --grau:#646c7b; --leise:#98a0ae; --linie:#e3e7ee; --kopf-grund:var(--haupt); --kopf-text:#fff; --kopf-leise:rgba(255,255,255,.66); --band-grund:var(--haupt); --band-text:#fff; --band-leise:rgba(255,255,255,.78); --bildplatte:#f1f4f8; --gruen:#137a4a; --rot:#b3261e; } [data-schema="creme"]{ --grund:#fdfbf6; --flaeche:#f6f1e7; --karte:#fffdf9; --karte2:#f9f5ec; --ink:#1f1a14; --text:#3a332a; --grau:#6e6355; --leise:#a2978a; --linie:#e8e0d2; --kopf-grund:var(--haupt); --kopf-text:#fff; --kopf-leise:rgba(255,255,255,.68); --band-grund:#efe7d8; --band-text:var(--ink); --band-leise:#6e6355; --bildplatte:#f4efe4; --gruen:#3d6b3d; --rot:#9c3125; } [data-schema="dunkel"]{ --grund:#0f1217; --flaeche:#171b22; --karte:#151920; --karte2:#1d222b; --ink:#fff; --text:#d9dee7; --grau:#8b94a4; --leise:#79818f; --linie:#2a313d; --kopf-grund:#151920; --kopf-text:#fff; --kopf-leise:#8b94a4; --band-grund:#0f1217; --band-text:#fff; --band-leise:#8b94a4; --bildplatte:#eef1f5; --gruen:#35c98a; --rot:#ff6a5e; } /* ---------- Schraube: Ecken ---------- */ [data-ecken="scharf"]{ --r:3px; --r-klein:2px; --r-pille:4px } [data-ecken="leicht"]{ --r:9px; --r-klein:6px; --r-pille:999px } [data-ecken="rund"] { --r:16px; --r-klein:11px;--r-pille:999px } /* ---------- Schraube: Schatten ---------- */ [data-schatten="keine"]{ --schatten:none; --schatten-hoch:none; --rahmen:1px solid var(--linie) } [data-schatten="weich"]{ --schatten:0 1px 2px rgba(17,23,31,.05),0 10px 26px -14px rgba(17,23,31,.22); --schatten-hoch:0 2px 5px rgba(17,23,31,.07),0 20px 44px -18px rgba(17,23,31,.3); --rahmen:1px solid var(--linie) } [data-schatten="hart"] { --schatten:4px 4px 0 var(--linie); --schatten-hoch:6px 6px 0 var(--akzent); --rahmen:2px solid var(--ink) } /* ---------- Schraube: Dichte ---------- */ [data-dichte="luftig"] { --pad:18px; --gap:16px; --block:52px; --zeile:1.65 } [data-dichte="kompakt"]{ --pad:13px; --gap:11px; --block:34px; --zeile:1.5 } /* ---------- Grundgerüst ---------- */ *{box-sizing:border-box} body{margin:0;background:var(--grund);color:var(--text); font:15.5px/var(--zeile) var(--schrift);-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{color:var(--haupt)} [data-schema="dunkel"] a{color:var(--akzent)} .huelle{max-width:1180px;margin:0 auto;padding:0 20px} main{padding-bottom:calc(var(--block) + 20px)} h1,h2,h3{font-family:var(--ueber);color:var(--ink);letter-spacing:-.015em} h1{font-size:clamp(1.45rem,1.1rem + 1.5vw,2.05rem);line-height:1.18;margin:.15em 0 .4em} h2{font-size:1.2rem;margin:0} h3{font-size:1rem;margin:0;line-height:1.35} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;background:var(--karte);color:var(--ink);padding:12px 18px;z-index:99;border-radius:var(--r-klein)} :focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px} /* Zierstreifen – nur bei „kante“ */ .zierstreifen{display:none;height:6px; background:repeating-linear-gradient(135deg,var(--akzent) 0 14px,transparent 14px 28px)} [data-akzentform="kante"] .zierstreifen{display:block} /* Servicezeile – nur bei kompakter Dichte */ .oben{display:none;background:var(--karte2);border-bottom:1px solid var(--linie); font-size:.77rem;color:var(--grau)} [data-dichte="kompakt"] .oben{display:block} .oben .huelle{display:flex;justify-content:space-between;gap:18px;padding-block:8px;flex-wrap:wrap} .oben b{color:var(--text)} /* ---------- Kopf ---------- */ .kopf{background:var(--kopf-grund);color:var(--kopf-text);position:sticky;top:0;z-index:20; border-bottom:1px solid transparent} [data-schema="dunkel"] .kopf,[data-schema="creme"] .kopf{border-bottom-color:var(--linie)} .kopf .huelle{display:flex;align-items:center;gap:20px;min-height:66px;flex-wrap:wrap;padding-block:10px} .marke{display:flex;align-items:center;gap:12px;color:var(--kopf-text);text-decoration:none;margin-right:auto} .logo{width:42px;height:42px;border-radius:var(--r-klein);display:grid;place-items:center; background:var(--akzent);color:#12161c;font-weight:800;font-size:1.1rem;flex:0 0 auto} .marke b{display:block;font-size:1rem;line-height:1.25} .marke small{display:block;font-size:.76rem;color:var(--kopf-leise);font-weight:400} .kopf nav{display:flex;gap:3px} .kopf nav a{color:var(--kopf-leise);text-decoration:none;padding:9px 14px;font-size:.93rem; font-weight:600;border-radius:var(--r-klein)} .kopf nav a:hover{color:var(--kopf-text);background:rgba(127,127,127,.16)} .kopf-tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700; font-size:.9rem;padding:9px 15px;border-radius:var(--r-pille); border:1px solid var(--kopf-leise);color:var(--kopf-text)} [data-akzentform="pille"] .kopf-tel{background:var(--akzent);color:#12161c;border-color:transparent} @media(max-width:700px){.kopf-tel span{display:none}} /* ---------- Kopfband ---------- */ .band{background:var(--band-grund);color:var(--band-text)} [data-ecken="rund"] .band{border-radius:0 0 26px 26px} .band .huelle{padding-block:var(--block)} .band-text h1{color:var(--band-text);max-width:19ch} .kicker{color:var(--akzent);font-weight:700;letter-spacing:.14em;text-transform:uppercase; font-size:.74rem;margin:0 0 12px} .lead{color:var(--band-leise);font-size:1.04rem;max-width:54ch;margin:0} .tafel{display:none;background:rgba(127,127,127,.12);border:1px solid var(--linie);border-radius:var(--r)} .tafel-kopf{margin:0;padding:11px 18px;border-bottom:1px solid var(--linie); font-family:var(--mono);font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;color:var(--band-leise)} .tafel dl{margin:0;padding:4px 18px 12px} .tafel div{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px dashed var(--linie)} .tafel div:last-child{border-bottom:0} .tafel dt{color:var(--band-leise);font-size:.86rem} .tafel dd{margin:0 0 0 auto;font-family:var(--mono);font-size:1.25rem;font-weight:700;color:var(--band-text)} /* Kopfvarianten */ [data-kopf="schlank"] .band .huelle{padding-block:26px} [data-kopf="schlank"] .band h1{font-size:1.5rem} [data-kopf="schlank"] .lead{display:none} [data-kopf="gross"] .band .huelle{padding-block:calc(var(--block) * 1.25)} [data-kopf="tafel"] .band .huelle{display:grid;gap:36px; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center} [data-kopf="tafel"] .tafel{display:block} @media(max-width:860px){[data-kopf="tafel"] .band .huelle{grid-template-columns:1fr}} /* ---------- Abschnitte ---------- */ .abschnitt{padding-top:var(--block)} .kopfzeile{display:flex;align-items:center;gap:16px;margin-bottom:calc(var(--gap) + 4px)} .kopfzeile h2{white-space:nowrap;order:1} .kopfzeile::after{content:"";flex:1;height:1px;background:var(--linie);order:2} [data-akzentform="unterstrich"] .kopfzeile h2{border-bottom:3px solid var(--akzent);padding-bottom:6px} [data-akzentform="unterstrich"] .kopfzeile::after{display:none} .kopfzeile a{order:3;font-size:.88rem;font-weight:700;text-decoration:none;white-space:nowrap; color:var(--akzent);margin-left:auto} /* ---------- Warengruppen ---------- */ .kats{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(264px,1fr))} .kats a{display:flex;align-items:center;gap:13px;min-width:0;background:var(--karte); border:var(--rahmen);border-radius:var(--r);padding:var(--pad);text-decoration:none; color:var(--ink);font-weight:650;box-shadow:var(--schatten)} .kats a:hover{border-color:var(--akzent);box-shadow:var(--schatten-hoch)} .kats .idx{display:none;font-family:var(--mono);font-size:.78rem;color:var(--akzent);flex:0 0 auto} .kats .sym{width:38px;height:38px;border-radius:var(--r-klein);display:grid;place-items:center;flex:0 0 auto; background:color-mix(in srgb,var(--akzent) 14%,var(--karte));color:var(--akzent)} .kats .nam{min-width:0;overflow-wrap:break-word;hyphens:auto;line-height:1.25;font-size:.96rem} .kats .zahl{margin-left:auto;flex:0 0 auto;background:var(--flaeche);color:var(--grau); font-size:.8rem;border-radius:var(--r-pille);padding:3px 11px} .kats .pfeil{display:none;color:var(--leise);flex:0 0 auto} /* Listenform der Warengruppen, wenn die Kacheln Listen sind */ [data-kachel="liste"] .kats{display:block;border-top:1px solid var(--linie)} [data-kachel="liste"] .kats a{border:0;border-bottom:1px solid var(--linie);border-radius:0; box-shadow:none;background:none} [data-kachel="liste"] .kats .idx{display:block;width:30px} [data-kachel="liste"] .kats .sym{display:none} [data-kachel="liste"] .kats .pfeil{display:block} [data-kachel="liste"] .kats .zahl{background:none} /* ---------- Produktkacheln ---------- */ .raster{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .kachel{position:relative;display:flex;flex-direction:column;background:var(--karte); border:var(--rahmen);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit; box-shadow:var(--schatten);transition:box-shadow .16s,border-color .16s,transform .16s} .kachel:hover{border-color:var(--akzent);box-shadow:var(--schatten-hoch)} [data-schatten="weich"] .kachel:hover{transform:translateY(-3px)} .kachel-bild{aspect-ratio:4/3;background:var(--bildplatte);position:relative;overflow:hidden;flex:0 0 auto} .kachel-bild img{width:100%;height:100%;object-fit:contain;padding:10px} .kachel-text{padding:var(--pad);display:flex;flex-direction:column;flex:1;min-width:0} .knr{font-family:var(--mono);font-size:.73rem;letter-spacing:.04em;color:var(--akzent);font-weight:700} .kachel h3{margin:5px 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .kachel .preis{margin-top:auto} .fahne{position:absolute;top:10px;left:10px;z-index:2;font-size:.69rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-klein); background:var(--ink);color:var(--grund)} .fahne.akz{background:var(--akzent);color:#12161c} .fahne.weg{background:var(--rot);color:#fff} [data-akzentform="kante"] .fahne{top:0;left:0;border-radius:0} /* Kachelvarianten */ [data-kachel="bild-links"] .kachel{flex-direction:row;align-items:stretch} [data-kachel="bild-links"] .kachel-bild{width:38%;aspect-ratio:auto} [data-kachel="bild-links"] .raster{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))} [data-kachel="liste"] .raster{display:block;border-top:1px solid var(--linie)} [data-kachel="liste"] .kachel{flex-direction:row;align-items:center;border:0;border-radius:0; border-bottom:1px solid var(--linie);box-shadow:none;background:none} [data-kachel="liste"] .kachel:hover{background:var(--karte2);transform:none} [data-kachel="liste"] .kachel-bild{width:96px;aspect-ratio:1;flex:0 0 auto;border-radius:var(--r-klein)} [data-kachel="liste"] .kachel-text{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap} [data-kachel="liste"] .kachel h3{flex:1;min-width:190px;margin:0;-webkit-line-clamp:1} [data-kachel="liste"] .knr{order:-1;width:100%} [data-kachel="liste"] .kachel .preis{margin:0} [data-kachel="liste"] .fahne{position:static;align-self:flex-start} /* ---------- Preis + Bestand ---------- */ .preis{font-weight:750;font-size:1.1rem;color:var(--ink);margin:0} [data-schrift-mono] .preis{font-family:var(--mono)} .preis small{font-weight:400;font-size:.73rem;color:var(--leise)} .lager{font-size:.85rem;font-weight:650;margin:6px 0 0;display:inline-flex;align-items:center;gap:7px} .lager::before{content:"";width:8px;height:8px;border-radius:var(--r-pille);background:currentColor;flex:0 0 auto} .lager.da{color:var(--gruen)} .lager.weg{color:var(--rot)} /* ---------- Brotkrume, Pillen ---------- */ .brot{font-size:.85rem;color:var(--leise);padding:20px 0 16px} .brot a{color:var(--grau);text-decoration:none} .brot span{color:var(--text);font-weight:600} .merkzeile{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 22px} .pille{font-size:.79rem;font-weight:650;padding:5px 12px;border-radius:var(--r-pille); background:var(--karte2);color:var(--grau);border:1px solid var(--linie);text-decoration:none} .pille.stark{background:var(--akzent);color:#12161c;border-color:transparent} .hinweis{color:var(--leise);font-size:.9rem;margin:-.2em 0 0} /* ---------- Produktseite ---------- */ .produkt{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:start} @media(max-width:900px){.produkt{grid-template-columns:1fr;gap:24px}} .gal{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px} @media(max-width:560px){.gal{grid-template-columns:1fr}} .gal input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .gal-thumbs{display:flex;flex-direction:column;gap:8px} @media(max-width:560px){.gal-thumbs{flex-direction:row;flex-wrap:wrap;order:1}} .gal-thumbs label{height:60px;background:var(--bildplatte);border:2px solid var(--linie); border-radius:var(--r-klein);overflow:hidden;cursor:pointer} @media(max-width:560px){.gal-thumbs label{width:70px}} .gal-thumbs img{width:100%;height:100%;object-fit:contain;padding:4px} .gal-haupt{position:relative;background:var(--bildplatte);border:var(--rahmen);border-radius:var(--r); overflow:hidden;aspect-ratio:4/3;box-shadow:var(--schatten)} .gal-haupt figure{margin:0;position:absolute;inset:0;display:none} .gal-haupt img{width:100%;height:100%;object-fit:contain;padding:20px} .preisbox{background:var(--karte);border:var(--rahmen);border-radius:var(--r);box-shadow:var(--schatten)} .preisbox .innen{padding:calc(var(--pad) + 4px)} .preisbox .gross{font-size:2rem;font-weight:780;color:var(--ink);margin:0;line-height:1.1} [data-schema="dunkel"] .preisbox .gross{font-family:var(--mono)} .preisbox .mwst{font-size:.81rem;color:var(--leise);margin:5px 0 0} .preisbox .lager{margin-top:13px;font-size:.93rem} .knopf{display:block;text-align:center;background:var(--akzent);color:#12161c;text-decoration:none; font-weight:750;padding:15px 22px;border-radius:var(--r-klein);margin-top:16px} .knopf:hover{filter:brightness(1.08)} .knopf.leise{background:transparent;color:var(--text);border:1px solid var(--linie);margin-top:9px;font-weight:650} .knopf.leise:hover{border-color:var(--akzent);filter:none} .antwort{text-align:center;font-size:.79rem;color:var(--leise);margin:11px 0 0} .datenblatt{margin-top:22px;border:var(--rahmen);border-radius:var(--r);overflow:hidden;background:var(--karte)} .merkmale{width:100%;border-collapse:collapse;font-size:.91rem} .merkmale th{text-align:left;font-weight:500;color:var(--grau);width:44%;padding:10px 16px; border-bottom:1px dashed var(--linie);vertical-align:top} .merkmale td{padding:10px 16px;border-bottom:1px dashed var(--linie);color:var(--ink);font-weight:600} .merkmale tr:last-child th,.merkmale tr:last-child td{border-bottom:0} .textblock{margin-top:var(--block);max-width:74ch} /* ---------- Suche ---------- */ .suchfeld{position:relative;max-width:540px} .suchfeld input{width:100%;font-size:1.02rem;padding:14px 18px 14px 48px;border:1px solid var(--linie); border-radius:var(--r-klein);background:var(--karte);color:var(--ink);box-shadow:var(--schatten)} .suchfeld svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--leise)} label[for=q]{display:block;font-weight:650;margin-bottom:8px;color:var(--ink)} /* ---------- Vertrauen + Fuß ---------- */ .vertrauen{background:var(--karte);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie); margin-top:var(--block)} .vertrauen .huelle{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); padding-block:calc(var(--pad) + 10px)} .vertrauen div{display:flex;gap:13px;align-items:flex-start} .vertrauen svg{flex:0 0 auto;color:var(--akzent);margin-top:2px} .vertrauen b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:2px} .vertrauen span{font-size:.86rem;color:var(--grau)} .fuss{background:var(--kopf-grund);color:var(--kopf-leise);padding-block:40px 26px;font-size:.88rem} .fuss .huelle{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .fuss b{color:var(--kopf-text);display:block;margin-bottom:10px;font-size:.93rem} .fuss a{color:var(--kopf-leise);text-decoration:none;display:block;padding:3px 0} .fuss a:hover{color:var(--akzent)} .fuss-unten{border-top:1px solid rgba(127,127,127,.25);margin-top:30px;padding-top:16px;font-size:.8rem}