/*
  RodPlek 1.5a: zurueckhaltendes Dark-Aero-Finish.
  Der blau-graue Hintergrund bleibt sichtbar, waehrend Bedienelemente und Panels
  ueber drei leicht transparente Navy-Ebenen wieder eine gemeinsame Tiefe erhalten.
*/
:root{
  --panel:rgba(12,24,41,.84);
  --panel-2:rgba(24,40,63,.78);
  --panel-3:rgba(35,54,80,.8);
  --line:rgba(177,204,235,.18);
  --shadow:
    0 18px 44px rgba(2,8,18,.34),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Roter Header: etwas tiefer, glaenzender und klar vom Hintergrund getrennt. */
.site-header{
  border-bottom:1px solid rgba(255,190,190,.16);
  background:
    linear-gradient(180deg,rgba(222,68,70,.97) 0%,rgba(190,38,45,.97) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 30px rgba(3,10,22,.32),
    0 2px 18px rgba(202,49,52,.16);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  backdrop-filter:blur(12px) saturate(115%);
}

.site-header::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,210,210,.46),transparent);
  box-shadow:0 4px 18px rgba(216,81,79,.28);
}

.site-nav a{
  border-color:rgba(255,255,255,.2);
  background:rgba(72,10,20,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.site-nav a:hover{
  border-color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 18px rgba(65,8,15,.18);
}

.site-nav a[aria-current="page"]{
  background:rgba(255,255,255,.94);
  box-shadow:
    0 7px 20px rgba(67,8,15,.2),
    inset 0 1px 0 #fff;
}

/* Erste Ebene: grosse Bedien- und Inhaltsflaechen. */
.filters-shell,
.toolbar-top,
#pleks .layout > .active-filter-bar,
#statistik .layout > .active-filter-bar,
.content-card,
.stat-panel{
  border-color:rgba(177,204,235,.19) !important;
  background:
    linear-gradient(180deg,rgba(24,42,66,.84),rgba(10,23,40,.8)) !important;
  box-shadow:
    0 18px 44px rgba(2,8,18,.3),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  -webkit-backdrop-filter:blur(11px) saturate(112%);
  backdrop-filter:blur(11px) saturate(112%);
}

/* Zweite Ebene: Filtergruppen und wiederkehrende Karten. */
.filter-group,
.stat-card,
.knowledge-highlight-card,
.knowledge-item{
  border-color:rgba(177,204,235,.16);
  background:
    linear-gradient(180deg,rgba(35,54,80,.78),rgba(19,35,56,.74));
  box-shadow:
    0 13px 30px rgba(2,8,18,.24),
    inset 0 1px 0 rgba(255,255,255,.045);
}

/* Die freie Galerie bleibt frei; nur echte Kartenansichten erhalten Glasflaechen. */
#gallery-view .card{
  background:transparent;
  box-shadow:none;
}

.filters-shell .filters-desktop{
  background:transparent !important;
}

.filter-status-card{
  border-color:rgba(177,204,235,.16) !important;
  background:
    linear-gradient(180deg,rgba(31,50,76,.68),rgba(16,32,53,.62)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* Dritte Ebene: Segmente, Chips und kleine Bedienelemente. */
.member-filter,
.chip,
.chip-hint,
.btn,
.icon-btn,
.sort-wrap select,
.drawer-nav a{
  border-color:rgba(177,204,235,.16);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.member-filter{
  background:rgba(6,17,31,.35);
}

.chip-hint{
  background:rgba(17,34,56,.58) !important;
}

.sort-wrap select{
  border-color:rgba(177,204,235,.17) !important;
  background:linear-gradient(180deg,rgba(36,55,81,.92),rgba(19,35,57,.94)) !important;
}

.sort-wrap select option,
.sort-wrap select optgroup{
  background:#13233a;
}

.member-filter-btn:hover,
.btn:hover,
.icon-btn:hover,
.drawer-nav a:hover{
  background:rgba(255,255,255,.1);
}

.member-filter-btn.active,
.member-filter-btn[aria-pressed="true"]{
  border-color:rgba(239,106,103,.7);
  background:linear-gradient(180deg,rgba(225,75,75,.28),rgba(172,40,47,.2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 18px rgba(225,75,75,.09);
}

.filter-group .badge,
.swatch-count,
.ink-dot-count,
.knowledge-count-badge{
  border-color:rgba(177,204,235,.15);
  background:rgba(7,18,33,.72);
}

.drawer{
  border-left:1px solid rgba(177,204,235,.18);
  background:rgba(10,22,39,.95);
  box-shadow:-20px 0 52px rgba(1,6,15,.44);
  -webkit-backdrop-filter:blur(14px) saturate(112%);
  backdrop-filter:blur(14px) saturate(112%);
}

.drawer-header{
  background:linear-gradient(180deg,rgba(218,64,67,.98),rgba(184,35,43,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

.drawer-footer{
  background:linear-gradient(180deg,rgba(19,35,56,.9),rgba(9,21,37,.97));
}

.filter-results-btn{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg,var(--brand),var(--brand-dark));
  color:#fff;
}

.site-footer{
  border-top-color:rgba(177,204,235,.15);
  background:rgba(5,15,28,.62);
}

@media (max-width:980px){
  .filters-shell,
  .toolbar-top,
  #pleks .layout > .active-filter-bar,
  #statistik .layout > .active-filter-bar,
  .content-card,
  .stat-panel{
    -webkit-backdrop-filter:blur(9px) saturate(108%);
    backdrop-filter:blur(9px) saturate(108%);
  }
}