:root{--bg:#f5f7f7;--card:#fff;--text:#172426;--muted:#657477;--line:#dfe7e7;--primary:#007782;--primary2:#005b63;--soft:#e8f5f5;--danger:#c83c3c;--shadow:0 14px 34px rgba(17,47,51,.08);--radius:18px}html[data-theme=dark]{--bg:#111718;--card:#192224;--text:#eef6f6;--muted:#9daeb0;--line:#2b393b;--primary:#20a6af;--primary2:#6bc8cf;--soft:#17383b;--shadow:none}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}.app{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:22px;background:#083f44;color:#fff}.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.brand small{display:block;opacity:.7;margin-top:2px}.logo{width:42px;height:42px;border-radius:13px;background:#fff;color:#08626b;display:grid;place-items:center;font-weight:900;font-size:22px}.sidebar nav{display:grid;gap:7px}.sidebar nav a{padding:11px 13px;border-radius:11px;opacity:.88}.sidebar nav a:hover{background:rgba(255,255,255,.1);opacity:1}.main{padding:28px;min-width:0}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.topbar h1{margin:0;font-size:30px}.topbar p{margin:5px 0 0;color:var(--muted)}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--text);padding:10px 14px;border-radius:11px;cursor:pointer;font-weight:700}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.ghost{background:transparent}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.small{padding:7px 10px;font-size:13px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}.stat{min-height:110px;display:flex;flex-direction:column;justify-content:center}.stat span{color:var(--muted);font-size:13px}.stat strong{font-size:26px;margin-top:8px}.toolbar{margin-bottom:18px}.filters,.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.filters{grid-template-columns:2fr repeat(3,1fr) auto}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:18px}.product-card{padding:0;overflow:hidden}.thumb{aspect-ratio:4/3;display:block;background:var(--soft)}.thumb img,.preview-grid img,.main-image img{width:100%;height:100%;object-fit:cover}.placeholder{height:100%;display:grid;place-items:center;color:var(--muted)}.pc-body{padding:17px}.pc-body h3{margin:9px 0 5px;font-size:17px}.muted,.hint{color:var(--muted)}.price-row,.title-line,.card-actions,.actions,.copy-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-actions,.actions{justify-content:flex-start;margin-top:15px}.actions.wrap{flex-wrap:wrap}.badge{font-size:12px;font-weight:800;padding:5px 9px;border-radius:99px}.status-draft{background:#e8ecec;color:#526164}.status-online{background:#dcf6f4;color:#066f73}.status-reserved{background:#fff0d9;color:#a55b00}.status-sold{background:#dff4e7;color:#20733b}.status-archived{background:#d9dddd;color:#41494a}.form-card label,.modal-card label{display:grid;gap:7px;font-weight:700;margin-bottom:14px}input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit}textarea{resize:vertical}.span2{grid-column:1/-1}.dropzone{min-height:190px;border:2px dashed #8db8bb;border-radius:16px;background:var(--soft);display:grid;place-items:center;text-align:center;padding:30px;position:relative;margin-bottom:18px}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.dropzone.drag{border-color:var(--primary);transform:scale(1.005)}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:24px}.preview-item{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid transparent;cursor:grab}.preview-item:first-child{border-color:var(--primary)}.preview-item:first-child:after{content:'Titelbild';position:absolute;left:7px;top:7px;background:var(--primary);color:white;padding:4px 7px;border-radius:8px;font-size:11px;font-weight:800}.preview-item button{position:absolute;right:6px;top:6px;border:0;border-radius:99px;width:28px;height:28px;background:#fff;color:#222;cursor:pointer}.split,.product-detail,.settings-grid,.analytics-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:18px}.product-detail{grid-template-columns:minmax(300px,.9fr) minmax(0,1.25fr)}.stack{display:grid;gap:18px}.gallery{align-self:start;position:sticky;top:20px}.main-image{aspect-ratio:1;background:var(--soft);border-radius:14px;overflow:hidden}.thumbs{display:flex;gap:8px;margin-top:10px;overflow:auto}.thumbs button{width:68px;height:68px;padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:none}.thumbs img{width:100%;height:100%;object-fit:cover}.description{line-height:1.65;margin:16px 0}.price-list{display:grid;grid-template-columns:1fr auto;gap:11px;margin:0}.price-list dt{color:var(--muted)}.price-list dd{margin:0;font-weight:800}.copy-row{padding:10px 0;border-bottom:1px solid var(--line)}.copy-row small{display:block;color:var(--muted);margin-top:4px}.history{display:grid;gap:8px}.history div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}.history time{color:var(--muted)}.compare{margin-top:18px;padding:14px;border-radius:12px;background:var(--soft)}.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:30;padding:24px;place-items:center}.modal.open{display:grid}.modal-card{width:min(520px,100%);background:var(--card);border-radius:18px;padding:22px;position:relative}.modal-x{position:absolute;right:13px;top:11px;border:0;background:none;color:var(--text);font-size:28px;cursor:pointer}.toast{position:fixed;right:22px;bottom:22px;background:#173f42;color:#fff;padding:13px 16px;border-radius:12px;z-index:60;box-shadow:var(--shadow)}.toast.inline{position:static;margin:0 0 18px;background:var(--primary)}.bar-row{display:grid;grid-template-columns:80px 1fr 130px;gap:10px;align-items:center;margin:12px 0}.bar{height:10px;background:var(--soft);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--primary);border-radius:99px}.empty{grid-column:1/-1;text-align:center;padding:50px}.danger-zone{max-width:720px}.inline-form{display:inline-block;margin-top:12px}.settings-grid,.analytics-grid{align-items:start}.analytics-grid{grid-template-columns:1.4fr 1fr 1fr}.drag-hint{font-size:12px;color:var(--muted)}
@media(max-width:950px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:12px 16px}.brand{margin-bottom:10px}.sidebar nav{display:flex;overflow:auto}.sidebar nav a{white-space:nowrap}.main{padding:18px}.split,.product-detail,.settings-grid,.analytics-grid{grid-template-columns:1fr}.gallery{position:static}.filters{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start}.topbar p{display:none}}
@media(max-width:600px){.main{padding:12px}.topbar h1{font-size:24px}.topbar .btn{display:none}.stats-grid{grid-template-columns:1fr 1fr}.stat{min-height:90px;padding:14px}.stat strong{font-size:20px}.filters,.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.product-grid{grid-template-columns:1fr}.actions .btn{flex:1}.bar-row{grid-template-columns:65px 1fr}.bar-row b{grid-column:2}.history div{grid-template-columns:1fr}.card{padding:16px}}
.token-once{margin-top:16px;padding:14px;border:1px solid var(--border,#d9e2e5);border-radius:14px;background:rgba(0,140,140,.06)}
.token-once code{display:block;max-width:100%;overflow-wrap:anywhere;font-size:.85rem}.check{display:flex!important;gap:10px;align-items:center}.check input{width:auto}.vinted-extension-card{border-left:4px solid #0aa6a6}

/* Multi-User */
.sidebar{display:flex;flex-direction:column}.sidebar-user{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);display:grid;gap:6px}.sidebar-user small{opacity:.7}.sidebar-user .badge{justify-self:start;background:rgba(255,255,255,.15);color:#fff}.sidebar-user .btn{color:#fff;border-color:rgba(255,255,255,.3);justify-self:start}
.toast.inline.error{background:var(--danger)}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:16px}.auth-card{width:100%;max-width:440px}.auth-card form{display:grid;gap:12px}
.check-list{display:grid;gap:8px;max-height:520px;overflow:auto;margin:12px 0;padding:4px}.check-list .check{display:flex;gap:8px;align-items:center}
.preview-item .check{display:flex;gap:6px;align-items:center;font-size:13px;padding:6px}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:18px}.folder-grid form{display:grid;gap:8px}
.row-form{display:flex;gap:10px;flex-wrap:wrap}.row-form input{flex:1;min-width:200px}
.folder-tag{display:inline-block;font-size:12px;color:var(--muted);margin-left:6px}

img.logo{display:block;width:42px;height:42px;background:none;padding:0;border-radius:11px;flex:none}

/* Marke */
.brand-logo{display:grid;gap:4px;margin-bottom:28px}.brand-logo img{width:170px;height:auto;display:block}.brand-logo small{opacity:.7;padding-left:2px}
.auth-page{background:radial-gradient(circle at 15% 10%,rgba(20,184,166,.35),transparent 45%),radial-gradient(circle at 90% 95%,rgba(255,122,89,.25),transparent 45%),linear-gradient(135deg,#093a42,#06222a)}
.auth-wrap{width:100%;max-width:760px;display:grid;gap:22px;justify-items:center}
.auth-banner{width:100%;height:auto;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.auth-logo{display:grid;gap:6px;justify-items:center;margin-bottom:8px}.auth-logo img{width:220px;height:auto}.auth-logo small{color:var(--muted)}
.logo-dark{display:none}html[data-theme=dark] .logo-dark{display:block}html[data-theme=dark] .logo-light{display:none}
@media (max-width:640px){.auth-banner{display:none}.brand-logo img{width:140px}}
.filters{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card-actions{flex-wrap:wrap}.quick-sold{margin:0}.sold-btn{background:#16a378;border-color:#16a378;color:#fff}
.input-row{display:flex;gap:8px}.input-row input{flex:1;min-width:0}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.5px}
.credentials{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:18px}.credentials code{font-size:15px}


/* Handy-Anleitung */
.guide{max-width:720px;display:grid;gap:14px}.guide h2{margin:0 0 6px}.guide h3{margin:0 0 6px;font-size:17px}.guide p{margin:0 0 6px}
.guide-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}.guide-steps li{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start}
.guide-steps .step{display:grid;place-items:center;width:42px;height:42px;border-radius:21px;background:var(--primary);color:#fff;font-weight:800;font-size:18px}
.guide-steps li:last-child .step{background:#16a378}.guide-tips ul{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}
.browser-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.addon-page .guide-steps{margin-top:0}.guide-steps li.guide-note .step{background:#e0a100}.addon-page code{background:var(--soft);padding:2px 6px;border-radius:6px}
.copy-url{font:600 13px ui-monospace,Menlo,Consolas,monospace;background:var(--soft);color:var(--primary);border:1px dashed var(--primary);border-radius:8px;padding:4px 8px;cursor:pointer;margin:2px 0}.copy-url:hover{background:var(--card)}

/* ===== Navigation (Desktop + Handy) ===== */
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sidebar-menu{display:flex;flex-direction:column;flex:1;min-height:0}
.sidebar nav a.active{background:rgba(255,255,255,.16);opacity:1;font-weight:700}
.nav-toggle{display:none}
.fab{display:none}
.main{min-width:0}
.copy-row small,.muted,.hint{overflow-wrap:anywhere}

/* ===== Tablet & Handy ===== */
@media (max-width:950px){
  .sidebar{position:sticky;top:0;z-index:50;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));box-shadow:0 6px 20px rgba(0,0,0,.18)}
  .sidebar .brand-logo{margin:0}.sidebar .brand-logo small{display:none}.sidebar .brand-logo img{width:130px}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer}
  .nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
  .nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .sidebar-menu{display:none;padding-top:10px;max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow:auto}
  .sidebar.open .sidebar-menu{display:flex}
  .sidebar nav{display:grid;gap:2px;overflow:visible}
  .sidebar nav a{padding:13px 14px;white-space:normal;font-size:16px}
  .sidebar-user{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .sidebar-user small{flex-basis:100%}
  .sidebar-user form{margin-left:auto}
}

/* ===== Handy ===== */
@media (max-width:600px){
  html,body{overflow-x:hidden}
  input,select,textarea{font-size:16px}  /* verhindert Auto-Zoom auf dem iPhone */
  .main{padding:12px 12px calc(96px + env(safe-area-inset-bottom))}
  .topbar{margin-bottom:14px}
  .btn{min-height:44px}.btn.small{min-height:38px}
  .card-actions .btn,.card-actions form{flex:1 1 auto}.card-actions form .btn{width:100%}
  .copy-row{flex-wrap:wrap}.copy-row>span{flex:1 1 200px;min-width:0}
  .title-line{flex-wrap:wrap;justify-content:flex-start}
  .price-list{grid-template-columns:1fr auto;font-size:15px}
  .thumbs button{width:60px;height:60px;flex:none}
  .modal{padding:12px;align-items:end}
  .modal-card{width:100%;max-height:88vh;max-height:88dvh;overflow:auto;border-radius:18px 18px 12px 12px;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
  .input-row{flex-wrap:wrap}.input-row input{flex:1 1 100%}.input-row .btn{flex:1}
  .row-form input{min-width:0;flex:1 1 100%}.row-form .btn{flex:1}
  .toast{left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom))}
  .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:29px;background:var(--primary);color:#fff;font-size:30px;line-height:1;box-shadow:0 10px 24px rgba(0,0,0,.28);z-index:40}
  .folder-grid,.product-grid{gap:12px}
  .guide-steps li{grid-template-columns:36px 1fr;gap:10px}.guide-steps .step{width:36px;height:36px;font-size:16px}
  .browser-tabs .btn{flex:1}
  .dropzone{min-height:150px;padding:20px}
  .preview-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .stats-grid{gap:8px;margin-bottom:12px}.stat{min-height:0;padding:12px 14px}.stat span{font-size:12px}.stat strong{font-size:18px;margin-top:4px}
  .filters{grid-template-columns:1fr 1fr;gap:8px}
  .toolbar{padding:12px;margin-bottom:12px}
  /* Produktkarten als kompakte Liste: Bild links, Text rechts */
  .product-card{padding:0;display:grid;grid-template-columns:104px minmax(0,1fr)}
  .product-card .thumb{aspect-ratio:auto;height:100%;min-height:128px}
  .product-card .pc-body{padding:12px}
  .product-card h3{font-size:15px;margin:6px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .product-card .muted{font-size:13px;margin:2px 0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .product-card .price-row{margin-top:6px}
  .product-card .card-actions{margin-top:10px;gap:6px}
  .product-card .card-actions .btn{padding:6px 8px;font-size:13px;min-height:36px}
}
@media (max-width:950px){.app{grid-template-rows:auto 1fr;align-content:start}}
@media (max-width:950px){
  .split,.product-detail,.settings-grid,.analytics-grid{grid-template-columns:minmax(0,1fr)}
  .stack,.gallery,.product-detail>*{min-width:0}
  .actions{flex-wrap:wrap}
}
@media (max-width:600px){
  .actions .btn,.actions form{flex:1 1 auto}.actions form .btn{width:100%}
  .product-detail .title-line h2{font-size:20px;margin:6px 0 0}
  .description{overflow-wrap:anywhere}
}
.modal{z-index:70}.toast{z-index:80}
@media (max-width:600px){
  .form-card form>.btn.primary,.modal-card form>.btn.primary,.auth-card form>.btn.primary{width:100%}
}
/* PC: Menü scrollt bei wenig Höhe, Abmelden bleibt immer sichtbar */
@media (min-width:951px){
  .sidebar{overflow:hidden}
  .sidebar-menu{overflow:hidden}
  .sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;scrollbar-width:thin}
  .sidebar-user{flex:none}
}
@media (min-width:951px) and (max-height:860px){
  .sidebar{padding:16px 18px}.brand-logo{margin-bottom:14px}
  .sidebar nav{gap:2px}.sidebar nav a{padding:8px 12px}
  .sidebar-user{padding-top:12px;gap:4px}
}