/* Gear-Liste — Design übernommen aus dem TODO-Dashboard (../public/style.css) */

:root{
  --bg:#F5F4EF;
  --card:#FFFFFF;
  --ink:#2B2A27;
  --ink-soft:#6B675E;
  --ink-faint:#9C978C;
  --line:#E6E2D8;
  --line-soft:#EDEAE2;
  --accent:#C96442;
  --accent-soft:#F6E9E3;
  --green:#4B8A5A;
  --green-soft:#EDF4EE;
  --green-line:#D5E5D8;
  --amber:#B8813A;
  --amber-soft:#FAF0DF;
  --radius:12px;
  --shadow:0 1px 2px rgba(43,42,39,.05), 0 1px 8px rgba(43,42,39,.04);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}

.wrap{max-width:1080px; margin:0 auto; padding:0 22px 80px}

/* ------------------------------------------------------- Kopfzeile */
header{border-bottom:1px solid var(--line); background:rgba(255,255,255,.65); margin-bottom:26px}
.head-in{max-width:1080px; margin:0 auto; padding:34px 22px 26px}
h1{font-size:29px; font-weight:600; letter-spacing:-.015em; margin:0 0 8px}
.sub{color:var(--ink-soft); font-size:15.5px; margin:0; max-width:62ch}
.meta{margin-top:16px; font-size:13px; color:var(--ink-faint); display:flex; gap:14px; flex-wrap:wrap}

/* ------------------------------------------- Filter & Ansichtswechsel */
.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:20px;
}
.filter{display:flex; gap:6px; flex-wrap:wrap}
.filter button{
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  font:inherit; font-size:13.5px; padding:5px 13px; border-radius:99px; cursor:pointer;
}
.filter button:hover{border-color:#D8D2C6; color:var(--ink)}
.filter button.on{background:var(--ink); border-color:var(--ink); color:#fff}

/* Segment-Schalter Kacheln/Liste — gleiche Bauart wie im Dashboard */
.seg{display:flex; background:var(--line-soft); border-radius:9px; padding:3px; flex:none}
.seg button{
  border:0; background:transparent; font:inherit; font-size:13.5px; color:var(--ink-soft);
  padding:5px 14px; border-radius:7px; cursor:pointer; white-space:nowrap;
}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--card); color:var(--ink); font-weight:550; box-shadow:var(--shadow)}

/* ---------------------------------------------------------- Karten */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}

.item{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.item.verkauft{opacity:.5}

.shot{
  aspect-ratio:4/3; background:var(--line-soft); overflow:hidden; position:relative;
  border-bottom:1px solid var(--line-soft);
}
.shot img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.shot .none{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-size:13px;
}
.shot .cnt{
  position:absolute; right:8px; bottom:8px; background:rgba(43,42,39,.62); color:#fff;
  font-size:11.5px; padding:2px 8px; border-radius:99px; backdrop-filter:blur(4px);
  pointer-events:none;
}

/* Blätterpfeile direkt auf der Karte — dezent, aber ohne Hover auffindbar,
   sonst weiss am Handy niemand, dass es weitere Bilder gibt. */
.shot .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:99px; cursor:pointer;
  background:rgba(255,255,255,.82); color:var(--ink);
  font:inherit; font-size:19px; line-height:1; padding:0 0 3px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(43,42,39,.18); opacity:.75; transition:opacity .15s;
}
.shot .nav:hover{opacity:1}
.shot .prev{left:8px}
.shot .next{right:8px}

.body{padding:14px 15px 15px; display:flex; flex-direction:column; flex:1}
.top{display:flex; align-items:baseline; gap:10px; margin-bottom:3px}
.name{font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0; flex:1}
.price{font-size:16px; font-weight:600; white-space:nowrap; color:var(--accent)}
.item.verkauft .price{color:var(--ink-faint); text-decoration:line-through}
.price .vb{font-size:11.5px; color:var(--ink-faint); font-weight:400; text-decoration:none; display:block; text-align:right}

.tags{display:flex; gap:6px; flex-wrap:wrap; margin:9px 0 0}
.tag{
  font-size:11.5px; padding:2px 8px; border-radius:99px;
  background:var(--line-soft); color:var(--ink-soft); white-space:nowrap;
}
.tag.zustand{background:var(--green-soft); color:#3C6B4B; border:1px solid var(--green-line)}
.tag.reserviert{background:var(--amber-soft); color:var(--amber)}
.tag.verkauft{background:var(--line-soft); color:var(--ink-faint)}
.tag.neu{background:var(--accent-soft); color:#A24C2F}

.kurz{margin:9px 0 0; font-size:14px; color:var(--ink)}
.desc{margin:8px 0 0; font-size:13.5px; color:var(--ink-soft)}
.lief{margin:10px 0 0; font-size:12.5px; color:var(--ink-faint)}
.lief b{font-weight:550; color:var(--ink-soft)}

/* ------------------------------------------------------ Listenansicht */
/* Bild links, Text rechts. Das Bild bekommt eine feste Breite, damit die
   Karten untereinander bündig stehen — sonst wackelt die Textkante je
   nach Hoch- oder Querformat des Fotos. */
body.liste .grid{grid-template-columns:1fr; gap:12px}
body.liste .item{flex-direction:row}
body.liste .shot{
  width:270px; flex:none; aspect-ratio:4/3;
  border-bottom:0; border-right:1px solid var(--line-soft);
}
body.liste .body{padding:16px 18px}
body.liste .kurz{max-width:70ch}
body.liste .desc{max-width:80ch}
body.liste .tags{margin-top:auto; padding-top:10px}

/* Paket- oder Alternativangebot — sticht hervor, ohne wie ein Knopf
   auszusehen; hier wird nichts geklickt, nur gelesen. */
.angebot{
  margin:10px 0 0; font-size:13px; color:#A24C2F; line-height:1.4;
  background:var(--accent-soft); border-radius:8px; padding:8px 11px;
}
.item.verkauft .angebot{background:var(--line-soft); color:var(--ink-faint)}

footer{margin-top:44px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-faint)}

/* -------------------------------------------------------- Lightbox */
#lb{
  position:fixed; inset:0; background:rgba(43,42,39,.86); display:none;
  align-items:center; justify-content:center; z-index:50; cursor:zoom-out; padding:30px;
}
#lb.on{display:flex}
#lb img{max-width:100%; max-height:88vh; object-fit:contain; border-radius:8px}
#lb .nav{
  position:absolute; bottom:20px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.8); font-size:13px;
}

/* Schmales Fenster: die Listenansicht fällt auf gestapelt zurück — 270 px
   Bild plus Text nebeneinander ergibt auf dem Handy zwei zu enge Spalten. */
@media (max-width:700px){
  body.liste .item{flex-direction:column}
  body.liste .shot{
    width:auto; border-right:0; border-bottom:1px solid var(--line-soft);
  }
  body.liste .body{padding:14px 15px 15px}
}

@media (max-width:600px){
  h1{font-size:24px}
  .head-in{padding:26px 18px 20px}
  .wrap{padding:0 18px 60px}
  .grid{grid-template-columns:1fr}
  .toolbar{align-items:flex-start}
}