/* ===== Light Clean Theme (v3.5) ===== */
:root{
  --bg: #F6F2EA;        /* Hintergrund */
  --panel: #FFFFFF;
  --text: #1F2328;
  --muted: #6C727F;
  --link: #0F172A;
  --border: #E6E2DA;
  --shadow: 0 6px 20px rgba(20,23,28,.06);

  --radius: 20px;
  --radius-sm: 14px;
}

/* Optionales Tuning für den Admin-Pill-Button (greift wegen Inline-Styles nur teilweise) */
a.btn[href*="page=admin_products"]:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
  transition: all .15s ease;
}

/* --- Layout: Footer immer unten --- */
html, body { height: 100%; }
body{
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;

  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
main{ flex: 1; }

/* Profil: Tabs & Cards (dezent) */
.profile-tab { transition: transform .12s ease, filter .12s ease; }
.profile-tab:hover { transform: translateY(-1px); filter: brightness(0.98); }
.card.pro .head { background:#fafafa; }


*{ box-sizing: border-box }
img{ max-width:100%; display:block }
a{ color: inherit; text-decoration: none }
.container{ max-width: 1180px; margin: 0 auto; padding: 24px }
.section{ padding: 40px 0 }
.muted{ color: var(--muted) }
.small{ font-size: 12px; color: var(--muted) }
hr.sep{ border: none; border-top: 1px solid var(--border); margin: 14px 0 }

/* --- Header (hell, minimal) --- */
.header{
  position: sticky; top: 0; z-index: 20;
  background: #FFF; border-bottom: 1px solid var(--border);
}
.nav{
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px;
}
.brand{ display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand img{ height: 30px; width: auto }
.nav a{ color: var(--link); opacity: .88; }
.nav a:hover{ opacity: 1; text-decoration: underline; text-underline-offset: 4px }
.spacer{ flex: 1 }

/* --- Buttons: pill, weich, hell --- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow); color: var(--text); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(20,23,28,.10) }
.btn.primary{ background: #111; color: #fff; border-color: #111 }
.btn.link{ background: transparent; border: none; box-shadow: none; padding: 8px 10px }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border); color: var(--muted);
}

/* --- Produktgrid clean --- */
.grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.card{
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20,23,28,.10) }
.card img{ width: 100%; height: 240px; object-fit: cover; background: #F5F3EE }
.card .body{ padding: 12px 14px; display: grid; gap: 8px }
.price{ font-weight: 700 }

/* --- Tabellen & Formulare minimal --- */
.table{ width:100%; border-collapse: collapse; border-radius: 14px; overflow: hidden }
.table th,.table td{ padding: 12px 10px; border-bottom: 1px solid var(--border); text-align: left }
.input,.select,.textarea{
  width:100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.qty{
  display:inline-flex; align-items:center; gap:10px; padding: 6px 10px;
  border:1px solid var(--border); border-radius: 12px; background: #fff
}

/* --- Footer ultraleicht, am Ende --- */
.footer{
  background: #FFF; border-top: 1px solid var(--border);
  color: var(--muted); padding: 22px 0;
}
.footer a{ color: var(--muted) }
.footer .links{ display:flex; gap:16px; flex-wrap: wrap; justify-content: center }

/* ===== Alerts v2 (schön & clean) ===== */
.alert{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:14px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  box-shadow: var(--shadow); margin:12px 0;
}
.alert:before{
  content:"ℹ️"; flex:0 0 auto; line-height:1.2; font-size:18px; opacity:.9;
}
.alert.success{ border-color:#CBE7D2; background:#F6FBF8 }
.alert.success:before{ content:"✅" }
.alert.error{ border-color:#F4C7C7; background:#FFF6F6 }
.alert.error:before{ content:"⛔" }
.alert.warning{ border-color:#FFE0AA; background:#FFF9EC }
.alert.warning:before{ content:"⚠️" }
.alert .close{
  margin-left:auto; opacity:.6; cursor:pointer; border:none; background:transparent;
}
.alert .close:hover{ opacity:1 }