/* Schraubendreher Pro (Grau/Glass): helles Glassmorphism-Design, dezente Grautoene, weicher Verlauf */
:root{color-scheme:light;
  --bg:#eef0f2; --bg-elevated:rgba(255,255,255,.72); --text:#1e2226; --muted:#63696f;
  --accent:#5b6570; --accent-2:#454d56; --radius:16px; --font:'Segoe UI',Roboto,Arial,sans-serif;
}
body{
  background:linear-gradient(160deg,#eef0f2 0%,#e2e5e8 45%,#f3f5f7 100%);
  position:relative;
  min-height:100vh;
}
body::before,body::after{
  content:'';
  position:fixed;
  border-radius:50%;
  filter:blur(70px);
  z-index:0;
  pointer-events:none;
}
body::before{
  top:-10%; left:-8%;
  width:420px; height:420px;
  background:rgba(91,101,112,.18);
}
body::after{
  bottom:-12%; right:-6%;
  width:480px; height:480px;
  background:rgba(138,148,160,.22);
}
header.site-header,.card,.search-bar,.category-pill,.admin-card,form.box{position:relative;z-index:1}
header.site-header{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 32px rgba(11,29,51,.06);
}
.card{
  background:var(--bg-elevated);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 32px rgba(11,29,51,.08);
}
.card:hover{box-shadow:0 12px 36px rgba(11,29,51,.14)}
.search-bar{
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6);
  color:var(--text);
}
.search-bar:focus{border-color:var(--accent)}
.category-pill{
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.6);
  color:var(--muted);
}
.category-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.btn{background:var(--accent);color:#fff}
.btn:hover{background:var(--accent-2)}
.btn.secondary{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);color:var(--text)}