/* =========================================================
   Shop Stylesheet – Theme-System per CSS-Variablen
   Signature: Artikel wirken wie beschriftete Werkstatt-Karten
   (Zustands-Stempel, Lochstreifen-Rand, Katalog-Typografie)
   ========================================================= */

:root{
  --radius: 10px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---- Theme: classic (Werkstatt-Blau) ---- */
body.theme-classic{
  --bg: #f3f1ec;
  --surface: #ffffff;
  --text: #1c2430;
  --text-muted: #5b6472;
  --accent: #1d4e89;
  --accent-contrast: #ffffff;
  --border: #dcd7cb;
  --tag-bg: #eef1f6;
}

/* ---- Theme: dark (Werkstattlampe bei Nacht) ---- */
body.theme-dark{
  --bg: #14161a;
  --surface: #1d2026;
  --text: #eef0f2;
  --text-muted: #9aa1ab;
  --accent: #e5943a;
  --accent-contrast: #14161a;
  --border: #2c3038;
  --tag-bg: #262a31;
}

/* ---- Theme: earth (Flohmarkt / Second-Hand) ---- */
body.theme-earth{
  --bg: #efe8dc;
  --surface: #fbf7ef;
  --text: #34281f;
  --text-muted: #7a6a58;
  --accent: #5f7350;
  --accent-contrast: #ffffff;
  --border: #ddd0b8;
  --tag-bg: #e9e1cd;
}

/* ---- Theme: fresh ---- */
body.theme-fresh{
  --bg: #f0f5f3;
  --surface: #ffffff;
  --text: #10221d;
  --text-muted: #56685f;
  --accent: #0f8a6c;
  --accent-contrast: #ffffff;
  --border: #d6e5df;
  --tag-bg: #e6f2ec;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration: underline; }
img{ max-width:100%; display:block; }

.container{ max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 50;
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px; max-width:1140px; margin:0 auto; gap: 16px;
}
.brand{
  font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--text);
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block; }
.header-search{
  flex:1; max-width: 560px; display:flex; align-items:center; gap:8px;
  background: var(--bg); border:1.5px solid var(--border); border-radius: 9px;
  padding: 8px 8px 8px 14px;
}
.header-search input[type=text]{
  border:none; background:transparent; padding:2px 0; font-size:14.5px; flex:1;
}
.header-search input[type=text]:focus{ outline:none; }
.header-search button{
  background: var(--accent); color: var(--accent-contrast); border:none; border-radius:6px;
  padding:8px 16px; font-weight:700; font-size:13.5px; cursor:pointer; white-space:nowrap;
}
.main-nav{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; flex-shrink:0; }
.main-nav a{ color: var(--text); font-size: 13.5px; font-weight:600; }
.main-nav a:hover{ color: var(--accent); text-decoration:none; }
.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.cart-pill{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--tag-bg); border:1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px; font-weight:700; color:var(--text);
}
.cart-pill .count{
  background: var(--accent); color: var(--accent-contrast);
  border-radius:999px; min-width:20px; height:20px; display:inline-flex;
  align-items:center; justify-content:center; font-size:11.5px; padding:0 5px;
}

/* ---------- Category bar (unter dem Header) ---------- */
.category-bar{
  background: var(--surface); border-bottom:1px solid var(--border);
  overflow-x:auto; white-space:nowrap;
}
.category-bar .inner{ display:flex; gap:0; max-width:1140px; margin:0 auto; padding:0 20px; }
.category-bar a{
  display:inline-block; padding: 12px 16px; font-size:13.5px; font-weight:600; color: var(--text-muted);
  border-bottom:2.5px solid transparent; flex-shrink:0;
}
.category-bar a:hover{ color:var(--text); text-decoration:none; }
.category-bar a.active{ color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Theme-Switcher (Besucher-Design-Auswahl) ---------- */
.theme-switcher{ position:relative; }
.theme-switcher summary{
  list-style:none; cursor:pointer; font-size:18px; line-height:1;
  padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface);
}
.theme-switcher summary::-webkit-details-marker{ display:none; }
.theme-switcher-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.14); padding:8px; min-width:150px;
}
.theme-swatch{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px;
  font-size:13.5px; font-weight:600; color:var(--text);
}
.theme-swatch:hover{ background:var(--tag-bg); text-decoration:none; }
.theme-swatch.active{ background:var(--tag-bg); }
.theme-swatch span{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.15); flex-shrink:0; }
.theme-swatch-classic span{ background:#f3f1ec; box-shadow:inset 0 0 0 2px #1d4e89; }
.theme-swatch-dark span{ background:#14161a; box-shadow:inset 0 0 0 2px #e5943a; }
.theme-swatch-earth span{ background:#efe8dc; box-shadow:inset 0 0 0 2px #5f7350; }
.theme-swatch-fresh span{ background:#f0f5f3; box-shadow:inset 0 0 0 2px #0f8a6c; }

/* ---------- Cookie / DSGVO notice ---------- */
.cookie-notice{
  background: var(--text); color: var(--bg);
  padding: 14px 20px; font-size: 13.5px; display:flex; gap:16px; align-items:center;
  justify-content:center; flex-wrap:wrap; position: fixed; bottom:0; left:0; right:0; z-index: 100;
}
.cookie-notice button{
  background: var(--accent); color: var(--accent-contrast); border:none;
  padding: 8px 16px; border-radius:6px; font-weight:700; cursor:pointer; font-size:13px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; background: var(--accent); color: var(--accent-contrast);
  border:none; padding: 11px 20px; border-radius: 7px; font-weight:700; font-size:14.5px;
  cursor:pointer; text-align:center;
}
.btn:hover{ filter: brightness(1.07); text-decoration:none; }
.btn.secondary{ background: transparent; color: var(--text); border:1.5px solid var(--border); }
.btn.small{ padding:7px 13px; font-size:13px; }
.btn.danger{ background:#b3452c; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Flash messages ---------- */
.flash{ padding: 12px 16px; border-radius:8px; margin: 14px 0; font-size:14px; }
.flash.success{ background:#dcf5e4; color:#155d34; }
.flash.error{ background:#fbdede; color:#7a1f1f; }
.flash.info{ background: var(--tag-bg); color: var(--text); }

/* ---------- Ergebnis-Kopfzeile (statt Hero) ---------- */
.results-bar{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px;
  margin: 20px 0 16px;
}
.results-bar h1{ font-size: 21px; margin:0; }
.results-bar .count{ color: var(--text-muted); font-size:13.5px; }

/* ---------- Such-/Listing-Layout: Sidebar + Ergebnisse ---------- */
.listing-layout{ display:grid; grid-template-columns: 220px 1fr; gap: 28px; align-items:start; margin-bottom:50px; }
@media (max-width: 860px){ .listing-layout{ grid-template-columns: 1fr; } }

.filter-sidebar{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 18px; position: sticky; top: 84px;
}
.filter-sidebar h4{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
  margin: 0 0 10px; font-family: var(--font-mono);
}
.filter-sidebar .cat-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:2px; }
.filter-sidebar .cat-list a{
  display:flex; justify-content:space-between; padding: 7px 8px; border-radius:6px;
  font-size:13.5px; color: var(--text); font-weight:500;
}
.filter-sidebar .cat-list a:hover{ background: var(--tag-bg); text-decoration:none; }
.filter-sidebar .cat-list a.active{ background: var(--accent); color: var(--accent-contrast); font-weight:700; }
.filter-sidebar .price-inputs{ display:flex; align-items:center; gap:6px; margin-bottom:18px; }
.filter-sidebar .price-inputs input{ width:100%; padding:7px 8px; font-size:13px; }
.filter-sidebar button.apply{
  width:100%; background: var(--accent); color:var(--accent-contrast); border:none;
  padding:9px; border-radius:7px; font-weight:700; font-size:13.5px; cursor:pointer;
}

/* ---------- Article grid / cards (Kleinanzeigen-artiges Listing) ---------- */
.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 16px;
}
.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.card .thumb{ aspect-ratio: 4/3; background: var(--tag-bg); overflow:hidden; position:relative; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .price-badge{
  position:absolute; left:10px; bottom:10px;
  background: var(--surface); color: var(--text); font-weight:800; font-size:15px;
  padding: 4px 10px; border-radius:7px; box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.card .cond-badge{
  position:absolute; right:10px; top:10px;
  background: rgba(0,0,0,.55); color:#fff; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; padding: 3px 8px; border-radius:5px;
}
.card .body{ padding: 12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card h3{ font-size: 14.5px; margin:0; line-height:1.35; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .meta{ font-size:12px; color: var(--text-muted); margin-top:auto; padding-top:6px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:13px; color: var(--text-muted); margin: 16px 0 6px; }
.breadcrumb a{ color: var(--text-muted); }
.breadcrumb a:hover{ color: var(--accent); }
.breadcrumb .sep{ margin: 0 6px; }

/* ---------- Article detail ---------- */
.article-detail{ display:grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px; margin: 10px 0 50px; }
@media (max-width: 860px){ .article-detail{ grid-template-columns: 1fr; } }
.gallery-main{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; background:var(--tag-bg); }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.gallery-thumbs img{
  width:64px; height:64px; object-fit:cover; border-radius:6px; cursor:pointer;
  border:2px solid transparent; opacity:.75;
}
.gallery-thumbs img.active{ border-color: var(--accent); opacity:1; }

.detail-panel{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 22px; position: sticky; top: 84px; align-self:start;
}
.detail-panel .price{ font-size: 28px; font-weight:800; margin: 0 0 4px; }
.detail-panel .shipping-note{ font-size:13px; color: var(--text-muted); margin-bottom:16px; }
.detail-panel h1{ font-size: 19px; margin: 0 0 10px; line-height:1.35; }
.detail-panel .meta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.detail-panel .tag{
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  background: var(--tag-bg); color: var(--text-muted); padding:4px 9px; border-radius:5px;
}
.description-box{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 22px; margin-top:22px;
}
.description-box h3{ margin-top:0; font-size:15.5px; }
.description{ white-space: pre-line; color: var(--text); }

/* ---------- Forms ---------- */
.form-box{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 28px; max-width: 480px; margin: 30px auto;
}
.form-box.wide{ max-width: 720px; }
.form-box h1{ font-size:22px; margin-top:0; }
label{ display:block; font-weight:700; font-size:13.5px; margin: 14px 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], textarea, select{
  width:100%; padding: 10px 12px; border:1px solid var(--border); border-radius:7px;
  font-size:14.5px; font-family: var(--font-body); background: var(--bg); color: var(--text);
}
textarea{ min-height:120px; resize:vertical; }
.form-row{ display:flex; gap:14px; }
.form-row > div{ flex:1; }
.hint{ color: var(--text-muted); font-size:12.5px; margin-top:4px; }
fieldset{ border:1px solid var(--border); border-radius:8px; margin-top:18px; padding:6px 16px 14px; }
legend{ font-weight:700; font-size:13px; padding:0 6px; }

/* ---------- Tables (orders, admin) ---------- */
table.data{ width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--radius); overflow:hidden; }
table.data th, table.data td{ padding:11px 14px; border-bottom:1px solid var(--border); text-align:left; font-size:14px; }
table.data th{ font-family: var(--font-mono); text-transform:uppercase; font-size:11.5px; letter-spacing:.04em; color:var(--text-muted); }
.status-badge{ padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.status-pending_payment{ background:#fef3c7; color:#92400e; }
.status-paid{ background:#dcfce7; color:#166534; }
.status-processing{ background:#dbeafe; color:#1e40af; }
.status-shipped{ background:#e0e7ff; color:#3730a3; }
.status-completed{ background:#dcfce7; color:#166534; }
.status-cancelled{ background:#fee2e2; color:#991b1b; }
.status-refunded{ background:#ede9fe; color:#5b21b6; }
.status-draft{ background:#f1f5f9; color:#475569; }
.status-active{ background:#dcfce7; color:#166534; }
.status-reserved{ background:#fef3c7; color:#92400e; }
.status-sold{ background:#e2e8f0; color:#334155; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); margin-top:60px; padding: 30px 0 90px; color: var(--text-muted); font-size:13.5px; }
.site-footer .inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.site-footer a{ color: var(--text-muted); }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- Admin layout ---------- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width: 220px; background: var(--text); color: var(--bg); flex-shrink:0; padding: 20px 0;
}
.admin-sidebar .brand{ color:#fff; padding: 0 20px 18px; font-size:16px; }
.admin-sidebar a{
  display:block; padding: 10px 20px; color: #cfd3d8; font-size:14px; font-weight:600;
}
.admin-sidebar a:hover, .admin-sidebar a.active{ background: rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.admin-main{ flex:1; padding: 26px 32px; background: var(--bg); }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.admin-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:22px; margin-bottom:20px; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.stat-card .num{ font-size:26px; font-weight:800; }
.stat-card .label{ font-size:12.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-mono); }

/* ---------- QR mobile upload box ---------- */
.qr-box{
  border: 1px dashed var(--accent); border-radius: var(--radius); padding: 20px; text-align:center;
  background: var(--tag-bg); margin: 16px 0;
}
.qr-box #qr-canvas-wrap{ display:inline-block; background:#fff; padding:12px; border-radius:8px; margin:12px 0; }
.upload-thumb-grid{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.upload-thumb-grid .thumb-item{ position:relative; width:88px; height:88px; border-radius:7px; overflow:hidden; border:1px solid var(--border); }
.upload-thumb-grid .thumb-item img{ width:100%; height:100%; object-fit:cover; }
.upload-thumb-grid .thumb-item button{
  position:absolute; top:2px; right:2px; background:rgba(0,0,0,.65); color:#fff; border:none;
  border-radius:4px; font-size:11px; padding:2px 5px; cursor:pointer;
}

/* Mobile upload page */
.mobile-upload-page{ max-width:420px; margin: 0 auto; padding: 30px 18px; text-align:center; }
.mobile-upload-page .capture-btn{
  display:block; width:100%; padding: 18px; font-size:17px; margin-top:20px;
}
.mobile-preview-grid{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; justify-content:center; }
.mobile-preview-grid img{ width:80px; height:80px; object-fit:cover; border-radius:8px; }

@media (max-width: 640px){
  .site-header .inner{ flex-wrap:wrap; }
  .main-nav{ order:3; width:100%; justify-content:center; padding-top:8px; }
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; display:flex; overflow-x:auto; padding:10px 0; }
  .admin-sidebar .brand{ display:none; }
  .admin-sidebar a{ white-space:nowrap; padding:8px 14px; }
}

/* Accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .card{ transition: none; }
}