@font-face{font-family:"Archivo";font-weight:400;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:600;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo Black";font-weight:400;font-display:swap;src:url(fonts/archivo-black-latin-400-normal.woff2) format("woff2")}
/* Design wie insotrader.de: dunkle Maschinenhalle, Bernstein als Akzent, Archivo Black für Überschriften, feine Linien statt Schatten */
:root{--bg:#1b1b1b;--flaeche:#20272f;--tief:#171d25;--ink:#eeebe2;--blass:#999183;--linie:rgba(255,255,255,.1);--akzent:#e38f10;--akzent-ink:#0f0f0f;--akzent-tief:#6c420f;--akzent-weich:rgba(227,143,16,.14);--hover:#232932;
  --eile:#f08a5d;--eile-weich:rgba(240,138,93,.14);--gut:#6fcf97;--gut-weich:rgba(111,207,151,.13);--warn:#e8b95a;--warn-weich:rgba(232,185,90,.13);
  --f-kopf:"Archivo Black","Arial Black",Arial,sans-serif;--f-text:"Archivo","Helvetica Neue",Arial,sans-serif;--f-zahl:"Archivo","Helvetica Neue",Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
.breit{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.kopf{background:var(--bg);border-bottom:1px solid var(--linie);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.kopf .breit{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:12px;min-width:0}
.marke{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;letter-spacing:-.025em;min-width:0}
.marke img{width:36px;height:36px;border-radius:50%;background:#f4f2ec;padding:4px;box-shadow:0 0 0 1px var(--linie);flex:none}
.marke span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marke em{font-style:normal;color:var(--blass)}
nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:14px;opacity:.85}
nav a:hover{color:var(--akzent);opacity:1}
nav a.heim{color:var(--akzent);opacity:1;margin-right:6px}
a{color:var(--akzent)}
main{padding-block:24px 64px;display:flex;flex-direction:column;gap:20px;min-height:60vh}
h1{font-family:var(--f-kopf);font-weight:400;font-size:32px;line-height:1.05;letter-spacing:-.025em;margin:0;text-wrap:balance}
h2{font-family:var(--f-kopf);font-weight:400;font-size:21px;letter-spacing:-.02em;margin:0}
.ueber{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--akzent);margin:0 0 12px}
.held{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:32px;align-items:center;padding-block:16px 8px}
.held h1{font-size:clamp(2.5rem,6vw,4rem);line-height:.95}
.held h1 span{background:linear-gradient(to bottom,var(--akzent),var(--akzent-tief));-webkit-background-clip:text;background-clip:text;color:transparent}
.held h1 b{display:block;font-weight:400}
.held p.text{margin-top:16px;max-width:46ch}
.held img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px var(--linie);display:block}
p{margin:0}
.blass{color:var(--blass)}
.klein{font-size:14px}
.zahl{font-family:var(--f-zahl);font-variant-numeric:tabular-nums;font-weight:500}
.filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter input,.filter select{flex:0 1 auto}
.filter #suche{flex:1 1 220px;min-width:0}
.reiter{display:inline-flex;box-shadow:0 0 0 1px var(--linie);border-radius:10px;overflow:hidden}
.reiter button{border:0;background:none;color:var(--ink);padding:9px 14px;font:600 14px var(--f-text);cursor:pointer}
.reiter button[aria-pressed="true"]{background:var(--akzent);color:var(--akzent-ink)}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.kachel{background:var(--flaeche);border:0;box-shadow:0 0 0 1px var(--linie);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.kachel:hover{box-shadow:0 0 0 1px var(--akzent)}
.kachel .bild{aspect-ratio:4/3;background:var(--tief);max-width:100%}
.kachel img{width:100%;height:100%;object-fit:cover;display:block}
.kachel .text{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.kachel b{font-weight:600;line-height:1.3;letter-spacing:-.015em;font-size:17px}
.zeile{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.preis{font-family:var(--f-kopf);font-size:20px;color:var(--akzent);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.marke-chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--akzent-weich);color:var(--akzent)}
.marke-chip.eile{background:var(--eile-weich);color:var(--eile)}
.marke-chip.gut{background:var(--gut-weich);color:var(--gut)}
.marke-chip.warn{background:var(--warn-weich);color:var(--warn)}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.galerie{display:flex;flex-direction:column;gap:8px;min-width:0}
.galerie .gross{background:var(--tief);box-shadow:0 0 0 1px var(--linie);border-radius:12px;overflow:hidden}
.galerie .gross img{width:100%;display:block;max-height:560px;object-fit:contain}
.leiste{display:flex;gap:8px;flex-wrap:wrap}
.leiste button{padding:0;border:2px solid transparent;border-radius:4px;background:none;cursor:pointer;width:84px;height:64px;overflow:hidden}
.leiste button[aria-current="true"]{border-color:var(--akzent)}
.leiste img{width:100%;height:100%;object-fit:cover;display:block}
.tafel{background:var(--flaeche);box-shadow:0 0 0 1px var(--linie);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tafel.sticky{position:sticky;top:calc(72px + env(safe-area-inset-top,0px))}
.rest{font-family:var(--f-kopf);font-size:20px;font-variant-numeric:tabular-nums}
.rest.eile{color:var(--eile)}
.daten{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0}
.daten dt{color:var(--blass)}
.daten dd{margin:0}
.fliess{white-space:pre-wrap;overflow-wrap:anywhere;max-width:70ch}
.feld{display:flex;flex-direction:column;gap:4px;font-size:15px;font-weight:600;color:var(--blass)}
input[type=text],input[type=email],input[type=password],input[type=search],select{font:inherit;color:var(--ink);background:var(--tief);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px 12px;width:100%;min-width:0}
.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.haken{display:flex;gap:8px;align-items:flex-start;font-size:15px}
.haken input{margin-top:4px}
.knopf{display:inline-flex;justify-content:center;border:0;box-shadow:0 0 0 1px var(--linie);background:none;color:var(--ink);padding:12px 18px;border-radius:10px;font:600 14px var(--f-text);cursor:pointer;text-decoration:none}
.knopf:hover{background:var(--hover)}
.knopf.haupt{background:var(--akzent);color:var(--akzent-ink);box-shadow:0 0 0 1px rgba(227,143,16,.4)}
.knopf.haupt:hover{background:#cf820e}
.knopf:disabled{opacity:.5;cursor:not-allowed}
.knopf:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.schmal{max-width:560px;width:100%;margin:0 auto}
.zeilen{display:flex;gap:10px;flex-wrap:wrap}
.meldung{border-radius:10px;padding:11px 13px;font-size:15px;background:var(--akzent-weich)}
.meldung.warn{background:var(--warn-weich)}
.meldung.fehler{background:var(--eile-weich)}
.verlauf{width:100%;border-collapse:collapse;font-size:15px}
.verlauf td{padding:4px 0;border-bottom:1px solid var(--linie)}
.verlauf td:last-child{text-align:right;font-family:var(--f-zahl)}
.tabelle{overflow-x:auto}
.tabelle table{border-collapse:collapse;width:100%}
.tabelle th{font-size:13px;text-align:left;color:var(--blass);padding:6px 8px;border-bottom:1px solid var(--linie);white-space:nowrap}
.tabelle td{padding:8px;border-bottom:1px solid var(--linie);vertical-align:top}
.leer{text-align:center;color:var(--blass);padding:48px 16px}
.fuss{background:var(--tief);border-top:1px solid var(--linie);padding-block:18px;font-size:15px}
.fuss .breit{display:flex;gap:18px;flex-wrap:wrap}
.fuss a{color:var(--blass)}
.hinweis{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--akzent);color:var(--akzent-ink);padding:11px 16px;border-radius:10px;font-weight:600;z-index:20;max-width:calc(100% - 32px)}
@media (max-width:760px){.held{grid-template-columns:1fr;gap:20px}.held img{display:none}}
@media (max-width:900px){.detail{display:flex;flex-direction:column;gap:12px}.galerie{display:contents}.gross{order:1}.leiste{order:2}.tafel.sticky{position:static;order:3}.beschreibung{order:4}h1{font-size:26px}}
@media (max-width:520px){.marke span{display:none}nav{flex-wrap:nowrap;flex:none;gap:10px}nav a.heim{margin-right:0}nav a{font-size:14px;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}