:root{
  /*  eckig, sehr flach */
  --radius: 4px;
  --radius2: 4px;
  --shadow: 0 1px 0 rgba(0,0,0,.03);

  /* Hintergrund/Panel */
  --bg:#f6f6f6;
  --panel:#ffffff;
  --panel2:#f5f5f5;

  --text:#2b2f36;
  --muted:#7a8796;

  /* Border sehr dünn */
  --border: rgba(0,0,0,.10);

  /*  Blau */
  --brand:#1e91cf;   /* primary */
  --brand2:#1878ab;  /* hover/darker */
  --accent:#1e91cf;

  --focus: rgba(30,145,207,.25);

  /* Sidebar */
  --sidebar-bg:#1f2d3d;
  --sidebar-bg2:#243447;
  --sidebar-text:#cfd8e3;
  --sidebar-muted: rgba(207,216,227,.78);
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active: rgba(30,145,207,.22);
  --sidebar-active-border: #1e91cf;
}

html,body{height:100%}
body{
  background: var(--bg);
  color: var(--text);
}

/* =====================
   Admin – 
   ===================== */

/* Shell: keine Rundungen, kein Luxus-Schatten */
.wrap{ padding: 0; }
.admin-shell{ gap: 0; min-height: 100vh; }

/* Sidebar */
.admin-side{
  width: 260px;
  flex: 0 0 260px;
  padding: 10px 10px 14px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}

/* Brand */
.admin-side .brand{
  padding: 12px 12px 10px;
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Navigation */
.admin-nav details{ margin: 6px 0; }
.admin-nav summary{
  border-radius: 4px;
  font-weight: 700;
  padding: 10px 12px;
  color: var(--sidebar-text);
}
.admin-nav summary:hover{
  background: var(--sidebar-hover);
}
.admin-sub{
  margin: 6px 0 10px 14px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.10);
}
.admin-sub a{
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--sidebar-muted);
}
.admin-sub a:hover{
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

/* Active state (wenn du .active setzt) */
.admin-side .active,
.admin-side a.active,
.admin-side summary.active{
  background: var(--sidebar-active);
  border-left: 3px solid var(--sidebar-active-border);
  padding-left: 9px;
}

/* Main */
.admin-main{
  background: var(--bg);
  border-radius: 0;
  padding: 18px 18px 30px;
}

/* Topbar: flach, weiß */
.admin-topbar{
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--border);
}

/*Title & Breadcrumb */
.oc-pagehead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.oc-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.oc-title{
  font-size: 34px;
  font-weight: 300;
  letter-spacing: .2px;
  margin: 0;
}
.oc-breadcrumb{
  font-size: 13px;
  color: var(--muted);
}
.oc-breadcrumb a{ color: var(--brand); }
.oc-breadcrumb a:hover{ color: var(--brand2); }

/* Cards */
.oc-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: none;
  /* Tabellen/Grids dürfen horizontal scrollen (sonst verschwinden Spalten wie "Edit") */
  overflow: visible;
}
.oc-card-h{
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  padding: 12px 14px;
}
.oc-card-b{
  padding: 14px;
  overflow: auto;
}

/* Pagehead: Aktionen rechts sauber halten */
.oc-pagehead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.oc-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Tables: look */
.oc-table{
  width: 100%;
  border-collapse: collapse;
}
.oc-table th,
.oc-table td{
  padding: 10px 10px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.oc-table thead th{
  border-top: 0;
  background: #fff;
  color: var(--brand);
  font-weight: 700;
}
.oc-table tbody tr:hover td{
  background: #fbfbfb; /* sehr dezenter Hover */
}

/* checkbox column */
.oc-table td:first-child,
.oc-table th:first-child{ width: 34px; }

/* Links in table */
.oc-table a{ color: var(--brand); font-weight: 600; }
.oc-table a:hover{ color: var(--brand2); text-decoration: underline; }

/* Buttons: eckig */
.oc-btn{
  height: 36px;
  border-radius: 4px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: #2b2f36;
  font-weight: 600;
}
.oc-btn:hover{
  background: #f7f7f7;
}
.oc-btn.primary{
  background: var(--brand);
  border-color: var(--brand2);
  color: #fff;
}
.oc-btn.primary:hover{
  background: var(--brand2);
  border-color: var(--brand2);
}
.oc-btn.danger{
  background: #e3503e;
  border-color: #d63f2e;
  color: #fff;
}
.oc-btn.danger:hover{
  filter: brightness(.95);
}
.oc-btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}

/* Filter inputs */
.oc-filter label{
  font-weight: 700;
  color: #2b2f36;
}
.oc-filter input[type="text"],
.oc-filter input[type="number"],
.oc-filter select{
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  height: 36px;
  padding: 6px 10px;
}
.oc-filter input:focus,
.oc-filter select:focus{
  outline: none;
  border-color: rgba(30,145,207,.65);
  box-shadow: 0 0 0 4px var(--focus);
}

/* Quantity badges:solid small */
.qty{
  border-radius: 4px;
  border: 0;
  color: #fff;
  font-weight: 700;
  height: 20px;
  line-height: 20px;
  min-width: 34px;
  display: inline-block;
  text-align: center;
  padding: 0 8px;
  font-size: 12px;
}
.qty.ok{ background:#28a745; }
.qty.low{ background:#f0ad4e; }
.qty.zero{ background:#dc3545; }
/* =========================
   Products-Seite: 2-Spalten Layout
   Links: Liste | Rechts: Filter
   ========================= */

/* Container für die Seite (falls vorhanden) */
.page-wrap,
.oc-page,
.admin-page{
  width: 100%;
}

/* Grid-Hülle: musst du im HTML um die 2 Cards legen (siehe Punkt 2) */
.oc-grid{
  display: grid;
  grid-template-columns: 1fr 320px; /* rechts Filter */
  gap: 18px;
  align-items: start;
}

/* Rechte Spalte: Filter bleibt sichtbar */
.oc-grid .oc-right{
  position: sticky;
  top: 70px;           /* unter Topbar */
}

/* Cards sollen wie im Bild sitzen */
.oc-card{ border-radius: 4px; }
.oc-card-h{ font-size: 15px; }

/* Tabelle mehr wie im Bild: sauberer Kopf + Linien */
.oc-table{
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.oc-table th, .oc-table td{
  border-top: 1px solid rgba(0,0,0,.08);
}
.oc-table thead th{
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.oc-table tbody tr:hover td{ background:#f7fbff; }

/* kleine Checkboxen wie im Bild */
.oc-table input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

/* Action Buttons rechts kompakter */
.oc-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.oc-btn.icon{
  width: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive: untereinander auf Mobile */
@media (max-width: 1100px){
  .oc-grid{ grid-template-columns: 1fr; }
  .oc-grid .oc-right{ position: static; }
}

/* =========================
   Shop – Light Layout
   ========================= */

/* Product grid card like classic storefront */
.grid{ gap: 22px; }

.prod{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.prod .img{
  background: #fff;
  height: 240px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 18px;
}

.prod .img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prod .body{
  padding: 14px 16px 0;
}

.prod .p-name{
  display:block;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 6px;
}
.prod .p-name:hover{ color: var(--brand2); text-decoration: none; }

.prod .p-desc{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  min-height: 46px;
}

.prod .p-price{
  margin-top: 10px;
  font-weight: 800;
  font-size: 16px;
  color: #222;
}
.prod .p-tax{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Footer action bar */
.prod .foot{
  margin-top: 14px;
  display:flex;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #f2f2f2;
}
.prod .foot a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  color: #6b7280;
  border-right: 1px solid rgba(0,0,0,.08);
}
.prod .foot a:last-child{ border-right:0; }
.prod .foot a:hover{
  background: #e9eef4;
  color: var(--brand);
}

.prod .ico{
  width: 18px;
  height: 18px;
  display:block;
}

/* Featured / section headings */
.section-title{
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0 12px;
}


/* =========================================================
   LIGHT Theme – Turbo-Bau (Shop + Admin)
   ========================================================= */

/* Admin: volle Breite wie im Referenz-Layout */
body.admin .container{max-width:none;width:100%;padding-left:18px;padding-right:18px;}
body.admin .admin-main{padding:18px 18px 30px;}

/* Admin: Produktliste – Action Buttons immer sichtbar */
body.admin .oc-table{table-layout:auto;}
body.admin .oc-table td, body.admin .oc-table th{white-space:nowrap;}
body.admin .oc-table td.action, body.admin .oc-table th.action{width:120px;text-align:right;}
body.admin .oc-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;}

/* Admin: Edit-Formulare etwas „sauberer“ */
body.admin .form-row{display:grid;grid-template-columns:220px 1fr;gap:10px;align-items:center;margin:8px 0;}
body.admin .form-row label{font-weight:700;color:#2b2f36;}
body.admin input[type="text"], body.admin input[type="number"], body.admin input[type="email"], body.admin textarea, body.admin select{
  width:100%;
  border-radius:4px;
  border:1px solid rgba(0,0,0,.14);
  height:36px;
  padding:6px 10px;
  background:#fff;
}
body.admin textarea{height:auto;min-height:120px;}

/* Admin: Upload Dropzone */
.dropzone{
  border:2px dashed rgba(30,145,207,.45);
  background:#fafcfe;
  border-radius:6px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.dropzone.dragover{background:#f0f8ff;border-color:rgba(30,145,207,.9);}
.dropzone .dz-left{display:flex;flex-direction:column;gap:2px;}
.dropzone .dz-title{font-weight:800;color:#2b2f36;}
.dropzone .dz-hint{font-size:13px;color:#7a8796;}
.dropzone .dz-actions{display:flex;gap:10px;align-items:center;}

/* Shop: Layout näher am Referenz-Shop */
body.shop .container{max-width:1140px;}
body.shop .grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:1100px){body.shop .grid-products{grid-template-columns:repeat(3,1fr);}}
@media (max-width:820px){body.shop .grid-products{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){body.shop .grid-products{grid-template-columns:1fr;}}

.product-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:4px;
  box-shadow:none;
  overflow:hidden;
}
.product-card .p-img{
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
.product-card .p-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.product-card .p-body{padding:14px;}
.product-card .p-title{font-weight:700;color:#1e91cf;margin:0 0 8px;}
.product-card .p-desc{font-size:13px;color:#7a8796;min-height:40px;margin:0 0 10px;}
.product-card .p-price{font-weight:800;margin:0;}
.product-card .p-tax{font-size:12px;color:#7a8796;margin-top:3px;}
.product-card .p-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(0,0,0,.10);
  background:#f5f5f5;
}
.product-card .p-actions a,
.product-card .p-actions button{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  border:0;
  border-right:1px solid rgba(0,0,0,.08);
  color:#7a8796;
  cursor:pointer;
}
.product-card .p-actions a:last-child,
.product-card .p-actions button:last-child{border-right:0;}
.product-card .p-actions svg{width:18px;height:18px;}
.product-card .p-actions a:hover,
.product-card .p-actions button:hover{color:#1e91cf;background:#eef6fb;}

/* Shop: falls SVG-Icons zu groß werden */
svg{max-width:100%;max-height:100%;}

body.admin .btn{height:36px;border-radius:4px;padding:0 12px;border:1px solid rgba(0,0,0,.10);background:#fff;color:#2b2f36;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
body.admin .btn.primary{background:var(--brand);border-color:var(--brand2);color:#fff;}
body.admin .btn.danger{background:#e3503e;border-color:#d63f2e;color:#fff;}