/* Layout: Katalog wie ein Datenblatt. Kachelraster mit Foto, Detailseite mit Foto und Konfigurator, darunter Spec-Tabelle mit Punktlinien. */
:root{
  --bg:#E8EBE6;
  --surface:#F6F7F3;
  --ink:#14191A;
  --ink-2:#47514F;
  --line:#C9D0CA;
  --accent:#0B7A66;
  --accent-ink:#FFFFFF;
  --warn:#B3471A;
  --shade:#11181A;
  --f-display:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1312;--surface:#171C1B;--ink:#E7ECE8;--ink-2:#A3AEAA;--line:#2A3331;--accent:#46D1AC;--accent-ink:#06201A;--warn:#F08A55;--shade:#0B0F10;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1312;--surface:#171C1B;--ink:#E7ECE8;--ink-2:#A3AEAA;--line:#2A3331;--accent:#46D1AC;--accent-ink:#06201A;--warn:#F08A55;--shade:#0B0F10;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--f-body);padding-inline:clamp(16px,4vw,48px);padding-block:20px 56px}
#root{max-width:1180px;margin-inline:auto}
h1,h2,h3,p,ul,dl,dd,fieldset,legend{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Kopfzeile */
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.7rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;min-width:0;overflow-wrap:anywhere}
.mark{flex:none;width:14px;height:14px;background:var(--accent)}

/* Buttons */
.btn{font:600 14px/1.2 var(--f-body);padding:.62rem 1rem;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:3px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.btn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--warn);border-color:var(--warn)}
.btn.small{padding:.4rem .7rem;font-size:13px}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* Bearbeiten-Leiste */
.strip{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:16px;padding:12px 14px;background:var(--surface);border:1px dashed var(--accent)}
.strip p{font-size:14px;min-width:0}
.strip .acts{display:flex;flex-wrap:wrap;gap:8px}
.note{margin-top:10px;font:400 13px/1.5 var(--f-mono);color:var(--ink-2)}
.msg{margin-top:10px;padding:10px 12px;border:1px solid var(--warn);color:var(--warn);font-size:14px}

/* Startseite */
.hero{padding-block:clamp(28px,6vw,56px) 24px;display:flex;flex-direction:column;gap:10px}
.hero h1{font:600 clamp(2.1rem,6vw,3.6rem)/1.02 var(--f-display);max-width:18ch;text-wrap:balance;letter-spacing:.01em}
.hero p{font:400 13px var(--f-mono);color:var(--ink-2);letter-spacing:.03em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr));gap:20px}
.grid>li{min-width:0;display:flex;flex-direction:column;gap:8px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;text-decoration:none;flex:1;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.shot{position:relative;aspect-ratio:4/3;max-width:100%;background:var(--shade);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.tag{position:absolute;top:10px;left:10px;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--bg);color:var(--ink);padding:3px 7px;border-radius:2px}
.cb{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1}
.cb h2{font:600 1.55rem/1.1 var(--f-display);letter-spacing:.02em}
.short{color:var(--ink-2);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{font:400 12px/1.3 var(--f-mono);border:1px solid var(--line);padding:3px 7px;border-radius:2px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.price{margin-top:auto;padding-top:6px;font:600 1.7rem/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.price span{font:400 12px var(--f-mono);color:var(--ink-2);margin-right:4px;letter-spacing:.06em;text-transform:uppercase}
.ctl{display:flex;flex-wrap:wrap;gap:8px}
.empty{padding:40px 16px;border:1px dashed var(--line);color:var(--ink-2);text-align:center}

/* Detailseite */
.back{display:inline-block;margin-block:22px 14px;font:500 13px var(--f-mono);letter-spacing:.04em;text-decoration:none;color:var(--ink-2)}
.back:hover{color:var(--accent)}
.detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
.detail .shot{border-radius:4px;border:1px solid var(--line)}
.info{display:flex;flex-direction:column;gap:18px;min-width:0}
.sku{font:400 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.info h1{font:700 clamp(2rem,5vw,3rem)/1 var(--f-display);letter-spacing:.015em;text-wrap:balance;overflow-wrap:anywhere}
.lead{color:var(--ink-2);max-width:60ch}
.cfg{display:flex;flex-direction:column;gap:16px;padding-top:6px}
.cfg h2,.specs-h{font:600 1.1rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.opts legend{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.optgrid{display:grid;gap:8px}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border:1px solid var(--line);background:var(--surface);padding:.7rem .85rem;border-radius:3px;cursor:pointer}
.opt b{font-weight:600;min-width:0;overflow-wrap:anywhere}
.opt em{font:400 12px var(--f-mono);font-style:normal;color:var(--ink-2);white-space:nowrap}
.opt input:checked+span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.total{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;border-top:2px solid var(--ink);padding-top:12px}
.total span{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.total strong{font:700 clamp(2.2rem,6vw,3rem)/1 var(--f-display);font-variant-numeric:tabular-nums}
.ask{display:flex;flex-direction:column;gap:10px}
.ask pre{margin:0;padding:12px;background:var(--surface);border:1px solid var(--line);font:400 13px/1.6 var(--f-mono);white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.contact{font-size:14px}
.contact span{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-right:8px}
.specs-wrap{margin-top:clamp(28px,5vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px)}
.specs-wrap>div{min-width:0}
.desc{max-width:62ch;margin-top:12px;white-space:pre-line}
.specs{margin-top:12px;border-top:2px solid var(--ink)}
.row{display:flex;gap:12px;align-items:baseline;padding:.6rem 0;border-bottom:1px dotted var(--ink-2)}
.row dt{flex:0 0 8.5rem;font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.row dd{flex:1;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* Editor */
.editor{display:flex;flex-direction:column;gap:22px;padding-top:22px}
.ehead{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.ehead h1{font:700 2rem/1 var(--f-display);letter-spacing:.02em}
.ehead .acts{display:flex;flex-wrap:wrap;gap:8px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.wide{grid-column:1/-1}
.f label,.lbl{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
input,textarea,select{font:400 15px/1.4 var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:.6rem .7rem;width:100%;min-width:0}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{resize:vertical}
.grp{border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface);min-width:0}
.grp legend{font:600 1.1rem var(--f-display);letter-spacing:.12em;text-transform:uppercase;padding-inline:6px}
.hint{font-size:13px;color:var(--ink-2)}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 2.4rem;gap:8px;align-items:center}
.opt-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 2.4rem}
.rrow input{background:var(--bg)}
.incl{font:400 12px var(--f-mono);color:var(--ink-2);padding-inline:6px}
.x{height:2.4rem;border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:3px;cursor:pointer;font-size:18px;line-height:1}
.x:hover{color:var(--warn);border-color:var(--warn)}
.upl{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.upl .shot{width:min(100%,14rem);border-radius:3px;border:1px solid var(--line)}
.upl .col{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.upl input[type=file]{padding:.45rem}

.busy{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:3px;font-size:14px;z-index:5}
.foot{margin-top:48px;padding-top:14px;border-top:1px solid var(--line);font:400 12px var(--f-mono);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{color:var(--ink);text-underline-offset:3px}
.foot a:hover{color:var(--accent)}
.legal{max-width:68ch;display:flex;flex-direction:column;gap:12px}
.legal h1{font:700 clamp(2rem,5vw,2.8rem)/1 var(--f-display);letter-spacing:.015em;margin-bottom:6px}
.legal h2{font:600 1.1rem/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:14px}
.legal ul{list-style:disc;padding-left:1.3rem;display:flex;flex-direction:column;gap:2px}
.legal .stand{font:400 12px var(--f-mono);color:var(--ink-2);margin-top:10px}
.todo{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);padding:0 4px;border-radius:2px}

@media (max-width:820px){
  .detail,.specs-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .row{flex-direction:column;gap:2px}
  .row dt{flex:none}
  .rrow{grid-template-columns:minmax(0,1fr) 2.4rem}
  .rrow input:nth-child(2),.rrow .incl{grid-column:1}
  .rrow .x{grid-row:1;grid-column:2}
  .opt-row{grid-template-columns:minmax(0,1fr) 2.4rem}
}
@media (prefers-reduced-motion:reduce){
  .card{transition:none}
  .card:hover{transform:none}
}

/* Verwaltung und Zusatz */
.ask .acts{display:flex;flex-wrap:wrap;gap:8px}
.anav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.anav form{margin:0 0 0 auto}
.ok{margin-top:10px;padding:10px 12px;border:1px solid var(--accent);color:var(--accent);font-size:14px}
.msg a{color:inherit}
.alist{display:flex;flex-direction:column;border-top:2px solid var(--ink);margin-top:14px}
.arow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dotted var(--ink-2)}
.arow img{width:72px;height:54px;object-fit:cover;background:var(--shade);display:block}
.arow .t{min-width:0;display:flex;flex-direction:column;gap:2px}
.arow .t b{overflow-wrap:anywhere}
.arow .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.tag-inline{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:1px 6px;border-radius:2px;margin-left:6px;color:var(--ink-2)}
details.del summary{list-style:none;cursor:pointer}
details.del summary::-webkit-details-marker{display:none}
details.del form{margin:8px 0 0}
details.del[open]{flex-basis:100%}
.login{max-width:26rem;display:flex;flex-direction:column;gap:14px;padding-top:28px}
.login h1{font:700 2rem/1 var(--f-display)}
.chk{display:flex;gap:8px;align-items:center;font-size:14px;text-transform:none;letter-spacing:0;font-family:var(--f-body);color:var(--ink)}
.chk input{width:auto}
.note{margin-top:12px}
@media (max-width:560px){
  .arow{grid-template-columns:56px minmax(0,1fr)}
  .arow img{width:56px;height:42px}
  .arow .acts{grid-column:1/-1;justify-content:flex-start}
}

/* Anmelden und Verwaltungsleiste */
.top .signin{margin-left:auto}
.anav .who{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:4px}
.grid .ctl{align-items:flex-start}
.grid .ctl details.del{flex-basis:auto}
.grid .ctl details.del[open]{flex-basis:100%}