/* Retter-Portal v1.3.6 – stärkerer Liquid-Glass-Look.
   Nur Material, Licht, Transparenz und Tiefe werden verändert; Layout und Struktur bleiben bestehen. */
:root{
  --glass-136-bg:rgba(255,255,255,.54);
  --glass-136-bg-strong:rgba(255,255,255,.72);
  --glass-136-bg-soft:rgba(248,250,252,.40);
  --glass-136-line:rgba(255,255,255,.82);
  --glass-136-line-soft:rgba(100,116,139,.20);
  --glass-136-shadow:0 28px 78px rgba(15,23,42,.14),0 8px 24px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(148,163,184,.08);
  --glass-136-shadow-soft:0 16px 42px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.76);
  --glass-136-red:rgba(225,29,72,.18);
  --glass-136-blue:rgba(37,99,235,.16);
  --glass-136-teal:rgba(20,184,166,.13);
  --glass-136-violet:rgba(124,58,237,.10);
}
body[data-theme="dark"]{
  --glass-136-bg:rgba(8,17,31,.53);
  --glass-136-bg-strong:rgba(15,27,46,.72);
  --glass-136-bg-soft:rgba(24,39,62,.34);
  --glass-136-line:rgba(255,255,255,.15);
  --glass-136-line-soft:rgba(255,255,255,.085);
  --glass-136-shadow:0 32px 86px rgba(0,0,0,.42),0 10px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(255,255,255,.025);
  --glass-136-shadow-soft:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.075);
  --glass-136-red:rgba(244,63,94,.18);
  --glass-136-blue:rgba(59,130,246,.17);
  --glass-136-teal:rgba(45,212,191,.12);
  --glass-136-violet:rgba(139,92,246,.12);
}
@media (prefers-color-scheme:dark){
  body[data-theme="system"]{
    --glass-136-bg:rgba(8,17,31,.53);
    --glass-136-bg-strong:rgba(15,27,46,.72);
    --glass-136-bg-soft:rgba(24,39,62,.34);
    --glass-136-line:rgba(255,255,255,.15);
    --glass-136-line-soft:rgba(255,255,255,.085);
    --glass-136-shadow:0 32px 86px rgba(0,0,0,.42),0 10px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(255,255,255,.025);
    --glass-136-shadow-soft:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.075);
    --glass-136-red:rgba(244,63,94,.18);
    --glass-136-blue:rgba(59,130,246,.17);
    --glass-136-teal:rgba(45,212,191,.12);
    --glass-136-violet:rgba(139,92,246,.12);
  }
}

/* Bewegte Lichtflächen hinter dem eigentlichen Portal erzeugen Tiefe, ohne Inhalte zu verschieben. */
html body{
  background:
    radial-gradient(ellipse at 4% -10%,var(--glass-136-red),transparent 34rem),
    radial-gradient(ellipse at 95% 2%,var(--glass-136-blue),transparent 39rem),
    radial-gradient(ellipse at 52% 108%,var(--glass-136-teal),transparent 40rem),
    radial-gradient(ellipse at 66% 36%,var(--glass-136-violet),transparent 31rem),
    linear-gradient(145deg,var(--bg),var(--bg2))!important;
  background-attachment:fixed!important;
}
html body .app-shell::before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:-18vh -12vw;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 30%,var(--glass-136-red),transparent 20%),
    radial-gradient(circle at 78% 18%,var(--glass-136-blue),transparent 22%),
    radial-gradient(circle at 56% 82%,var(--glass-136-teal),transparent 21%);
  filter:blur(70px);
  opacity:.62;
}

/* Große Oberflächen: deutlich transparenter, stärker gebrochenes Licht und feinere Innenkante. */
html body :is(
  .card,.stat-card,.toolbar,.pagination,.page-head,.page-hero,.login-card,
  .rp55-focus-card,.rp55-own-card,.rp55-table-card,.rp55-kpi-card,.rp55-dash-hero,
  .admin-panel,.admin-card,.admin-account-card,.admin-overview-card,.admin-command-nav,
  .form-subcard,.smart-person-picker,.detail-item,.info-grid>div,.table-wrap
){
  background:
    linear-gradient(118deg,rgba(255,255,255,.22),transparent 23%,transparent 68%,rgba(255,255,255,.065)),
    radial-gradient(circle at 0 0,var(--glass-136-red),transparent 42%),
    radial-gradient(circle at 100% 0,var(--glass-136-blue),transparent 44%),
    linear-gradient(145deg,var(--glass-136-bg-strong),var(--glass-136-bg))!important;
  border-color:var(--glass-136-line)!important;
  box-shadow:var(--glass-136-shadow)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.32) contrast(1.02)!important;
  backdrop-filter:blur(30px) saturate(1.32) contrast(1.02)!important;
}
body[data-theme="dark"] :is(
  .card,.stat-card,.toolbar,.pagination,.page-head,.page-hero,.login-card,
  .rp55-focus-card,.rp55-own-card,.rp55-table-card,.rp55-kpi-card,.rp55-dash-hero,
  .admin-panel,.admin-card,.admin-account-card,.admin-overview-card,.admin-command-nav,
  .form-subcard,.smart-person-picker,.detail-item,.info-grid>div,.table-wrap
){
  background:
    linear-gradient(118deg,rgba(255,255,255,.075),transparent 24%,transparent 68%,rgba(255,255,255,.025)),
    radial-gradient(circle at 0 0,var(--glass-136-red),transparent 45%),
    radial-gradient(circle at 100% 0,var(--glass-136-blue),transparent 47%),
    linear-gradient(145deg,var(--glass-136-bg-strong),var(--glass-136-bg))!important;
}

/* Kleine Karten und Kennzahlen wirken wie eingelassene Glaselemente. */
html body :is(
  .rp55-own-metrics article,.rp55-focus-grid article,.rp55-priority-list a,
  .timeline-item,.department-chip,.person-choice,.admin-inline-assignment-list article,
  .admin-current-link,.check,.calendar-day,.youth-day,.admin-command-nav a,
  .dashboard-grid article,.stat-grid article
){
  background:
    linear-gradient(135deg,rgba(255,255,255,.16),transparent 42%),
    linear-gradient(145deg,var(--glass-136-bg-soft),color-mix(in srgb,var(--glass-136-bg-soft) 68%,transparent))!important;
  border-color:var(--glass-136-line-soft)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-136-line) 75%,transparent),0 12px 30px rgba(15,23,42,.075)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
  backdrop-filter:blur(18px) saturate(1.18)!important;
}
body[data-theme="dark"] :is(
  .rp55-own-metrics article,.rp55-focus-grid article,.rp55-priority-list a,
  .timeline-item,.department-chip,.person-choice,.admin-inline-assignment-list article,
  .admin-current-link,.check,.calendar-day,.youth-day,.admin-command-nav a,
  .dashboard-grid article,.stat-grid article
){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 14px 34px rgba(0,0,0,.18)!important;
}

/* Header und Sidebar als eigenständige Glasschichten. */
html body .topbar{
  background:
    linear-gradient(115deg,rgba(255,255,255,.15),transparent 36%),
    color-mix(in srgb,var(--glass-136-bg-strong) 82%,transparent)!important;
  border-bottom-color:var(--glass-136-line-soft)!important;
  box-shadow:0 18px 50px rgba(15,23,42,.11),inset 0 -1px 0 rgba(255,255,255,.16)!important;
  -webkit-backdrop-filter:blur(34px) saturate(1.38)!important;
  backdrop-filter:blur(34px) saturate(1.38)!important;
}
html body .sidebar{
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),transparent 26%),
    radial-gradient(circle at 12% 0,rgba(225,29,72,.18),transparent 24rem),
    radial-gradient(circle at 100% 18%,rgba(59,130,246,.15),transparent 23rem),
    linear-gradient(180deg,rgba(3,9,20,.90),rgba(7,18,34,.87) 55%,rgba(11,25,43,.91))!important;
  border-right-color:rgba(255,255,255,.10)!important;
  box-shadow:24px 0 70px rgba(2,6,23,.34),inset -1px 0 0 rgba(255,255,255,.055)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.28)!important;
  backdrop-filter:blur(30px) saturate(1.28)!important;
}
html body .sidebar .brand{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  border-color:rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 42px rgba(0,0,0,.20)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
}
html body .sidebar nav a:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.055))!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.13)!important;
}
html body .sidebar nav a.active{
  background:linear-gradient(135deg,rgba(238,20,64,.98),rgba(172,16,49,.88) 62%,rgba(116,13,42,.91))!important;
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:0 18px 46px rgba(225,29,72,.31),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.12)!important;
}

/* Formfelder und Auswahlmenüs erhalten sichtbarere Glasbrechung. */
html body :is(input,select,textarea){
  background:
    linear-gradient(145deg,rgba(255,255,255,.11),transparent 38%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 70%,transparent),color-mix(in srgb,var(--surface) 58%,transparent))!important;
  border-color:var(--glass-136-line-soft)!important;
  box-shadow:inset 0 2px 5px rgba(15,23,42,.08),0 1px 0 rgba(255,255,255,.42)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15)!important;
  backdrop-filter:blur(16px) saturate(1.15)!important;
}
body[data-theme="dark"] :is(input,select,textarea){
  box-shadow:inset 0 2px 6px rgba(0,0,0,.30),0 1px 0 rgba(255,255,255,.05)!important;
}
html body :is(input,select,textarea):focus{
  border-color:color-mix(in srgb,var(--primary) 74%,var(--glass-136-line-soft))!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 17%,transparent),0 12px 28px color-mix(in srgb,var(--primary) 10%,transparent),inset 0 1px 3px rgba(15,23,42,.05)!important;
}
html body .smart-select-results{
  background:
    linear-gradient(135deg,rgba(255,255,255,.14),transparent 35%),
    color-mix(in srgb,var(--glass-136-bg-strong) 94%,var(--surface))!important;
  border-color:var(--glass-136-line)!important;
  box-shadow:0 28px 78px rgba(15,23,42,.20),inset 0 1px 0 rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(34px) saturate(1.35)!important;
  backdrop-filter:blur(34px) saturate(1.35)!important;
}
body[data-theme="dark"] .smart-select-results{
  background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 34%),rgba(8,17,31,.91)!important;
  box-shadow:0 30px 86px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Buttons und Status-Pills wirken wie polierte Glasflächen. */
html body .btn{
  background:
    linear-gradient(145deg,rgba(255,255,255,.24),transparent 46%),
    linear-gradient(145deg,var(--glass-136-bg-strong),var(--glass-136-bg-soft))!important;
  border-color:var(--glass-136-line-soft)!important;
  box-shadow:var(--glass-136-shadow-soft)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.24)!important;
  backdrop-filter:blur(20px) saturate(1.24)!important;
}
html body .btn:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--primary) 36%,var(--glass-136-line-soft))!important;
  box-shadow:0 20px 48px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.84)!important;
}
html body .btn.primary{
  background:
    linear-gradient(145deg,rgba(255,255,255,.19),transparent 42%),
    linear-gradient(135deg,#ef1745,#c30f35 56%,#8e1029)!important;
  border-color:rgba(255,255,255,.19)!important;
  box-shadow:0 20px 48px rgba(200,16,46,.34),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(95,5,27,.25)!important;
}
html body :is(.pill,.status,.role,.secure-pill){
  background:
    linear-gradient(145deg,rgba(255,255,255,.20),transparent 44%),
    linear-gradient(145deg,var(--glass-136-bg-strong),var(--glass-136-bg-soft))!important;
  border-color:var(--glass-136-line-soft)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 9px 24px rgba(15,23,42,.085)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
  backdrop-filter:blur(18px) saturate(1.18)!important;
}

/* Tabellen bleiben klar lesbar, zeigen aber stärker die Materialtiefe. */
html body .table-wrap{
  background:color-mix(in srgb,var(--glass-136-bg) 73%,transparent)!important;
  border-color:var(--glass-136-line-soft)!important;
}
html body table thead th{
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),transparent),
    color-mix(in srgb,var(--glass-136-bg-strong) 84%,transparent)!important;
  border-bottom-color:var(--glass-136-line-soft)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  backdrop-filter:blur(20px)!important;
}
html body table tbody td{
  background:color-mix(in srgb,var(--glass-136-bg-soft) 30%,transparent)!important;
}
html body table tbody tr:hover td{
  background:color-mix(in srgb,var(--primary) 8%,var(--glass-136-bg-soft))!important;
}

/* Admin-interne Navigation bleibt die einzige Detailnavigation und erhält eine klarere Glasleiste. */
html body.admin-surface .admin-command-nav{
  background:
    linear-gradient(118deg,rgba(255,255,255,.18),transparent 28%),
    linear-gradient(145deg,var(--glass-136-bg-strong),var(--glass-136-bg))!important;
  border-color:var(--glass-136-line)!important;
  box-shadow:0 24px 64px rgba(15,23,42,.13),inset 0 1px 0 rgba(255,255,255,.74)!important;
}
html body.admin-surface .admin-command-nav a.is-active{
  background:linear-gradient(135deg,rgba(225,29,72,.98),rgba(154,18,47,.88))!important;
  border-color:rgba(255,255,255,.17)!important;
  color:#fff!important;
  box-shadow:0 12px 30px rgba(225,29,72,.27),inset 0 1px 0 rgba(255,255,255,.23)!important;
}

@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  html body :is(.card,.toolbar,.pagination,.page-head,.page-hero,.admin-panel,.admin-card,.admin-command-nav,.table-wrap){
    background:var(--surface)!important;
  }
}

@media (max-width:860px){
  html body :is(.card,.toolbar,.pagination,.page-head,.page-hero,.admin-panel,.admin-card,.admin-command-nav,.table-wrap){
    -webkit-backdrop-filter:blur(22px) saturate(1.22)!important;
    backdrop-filter:blur(22px) saturate(1.22)!important;
  }
  html body .sidebar,
  html body .topbar{
    -webkit-backdrop-filter:blur(24px) saturate(1.25)!important;
    backdrop-filter:blur(24px) saturate(1.25)!important;
  }
}

@media (prefers-reduced-transparency:reduce){
  html body :is(.card,.toolbar,.pagination,.page-head,.page-hero,.admin-panel,.admin-card,.admin-command-nav,.table-wrap){
    background:var(--surface)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}