:root{
  --ds-bg:rgba(10,14,24,.82);
  --ds-border:rgba(255,255,255,.14);
  --ds-text:#fff7ed;
  --ds-muted:rgba(255,255,255,.62);
  --ds-accent:#f59e0b;
  --ds-accent-2:#ec4899;
  --ds-dark:#120f18;
}
.designSwitch{
  display:inline-grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:3px;
  padding:5px;
  border-radius:999px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04)),
    rgba(10,14,24,.78);
  border:1px solid var(--ds-border);
  box-shadow:0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  white-space:nowrap;
  margin:0;
  isolation:isolate;
}
.designSwitch::before{
  content:'Design';
  grid-column:1 / -1;
  text-align:center;
  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ds-muted);
  line-height:1;
  padding:2px 4px 1px;
}
.designSwitchBtn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:9px 13px;
  min-width:86px;
  font-weight:950;
  cursor:pointer;
  color:rgba(255,247,237,.86);
  background:rgba(255,255,255,.06);
  font-size:12px;
  line-height:1;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, filter .16s ease;
  width:auto;
  margin:0;
  border:1px solid rgba(255,255,255,.08);
}
.designSwitchBtn[value="modern"]::before{content:'✨ ';}
.designSwitchBtn[value="classic"]::before{content:'↩ ';}
.designSwitchBtn:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
.designSwitchBtn.active{
  background:linear-gradient(135deg,var(--ds-accent),var(--ds-accent-2));
  color:#17111a;
  border-color:rgba(255,255,255,.18);
  box-shadow:0 10px 26px rgba(236,72,153,.25), 0 8px 18px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.designSwitch--header{
  position:static;
  z-index:auto;
  margin-left:8px;
}
.designSwitch--floating{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:99999;
}
.header-quick-links .designSwitch{
  margin-left:8px;
  align-self:center;
}
.classic-header-switch{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px auto 4px;
}
.classic-header-switch .designSwitch{
  margin:0 auto;
}
@media(max-width:760px){
  .designSwitch--header{
    order:10;
    flex:1 1 100%;
    justify-content:center;
    margin:8px 0 0 0;
  }
  .designSwitchBtn{min-width:80px;padding:9px 10px;font-size:12px;}
}
@media(max-width:420px){
  .designSwitch{width:100%;justify-content:center;}
  .designSwitchBtn{flex:1;min-width:0;}
}


/* Sichtbarer Header-Pill-Switch */
.header-quick-links .designSwitch,
.designSwitch--header{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:4px!important;
  padding:4px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(17,24,39,.95),rgba(39,24,54,.92))!important;
  border:1px solid rgba(251,191,36,.34)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.header-quick-links .designSwitch::before,
.designSwitch--header::before{
  content:'Design'!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 8px 0 6px!important;
  color:#fbbf24!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  border-right:1px solid rgba(251,191,36,.25)!important;
  height:24px!important;
  grid-column:auto!important;
}
.designSwitchBtn{
  min-width:0!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:transparent!important;
  border:0!important;
  color:rgba(255,247,237,.78)!important;
  box-shadow:none!important;
}
.designSwitchBtn.active{
  background:linear-gradient(135deg,#f59e0b,#ec4899)!important;
  color:#160f1c!important;
  box-shadow:0 6px 18px rgba(236,72,153,.28)!important;
}
@media(max-width:520px){
  .header-quick-links .designSwitch,
  .designSwitch--header{width:auto!important;flex:0 0 auto!important;margin:0!important;}
  .header-quick-links .designSwitch::before,
  .designSwitch--header::before{display:none!important;}
  .designSwitchBtn{font-size:11px!important;padding:8px 9px!important;}
}


/* === FINAL HEADER DESIGN SWITCH (Modern/Klassisch) === */
.site-header .header-quick-links .designSwitch,
header .header-quick-links .designSwitch,
.designSwitch.designSwitch--header{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  width:auto !important;
  max-width:none !important;
  min-height:42px !important;
  padding:5px !important;
  margin:0 0 0 6px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,184,77,.55) !important;
  background:linear-gradient(135deg, rgba(255,184,77,.18), rgba(236,72,153,.16) 45%, rgba(20,20,32,.92)) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  overflow:hidden !important;
  grid-template-columns:none !important;
}
.site-header .header-quick-links .designSwitch::before,
header .header-quick-links .designSwitch::before,
.designSwitch.designSwitch--header::before{
  content:'🎨' !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:30px !important;
  height:30px !important;
  padding:0 !important;
  margin:0 2px 0 0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  color:#ffd166 !important;
  font-size:14px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.site-header .header-quick-links .designSwitchBtn,
header .header-quick-links .designSwitchBtn,
.designSwitch.designSwitch--header .designSwitchBtn{
  width:auto !important;
  min-width:78px !important;
  height:32px !important;
  margin:0 !important;
  padding:0 12px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.07) !important;
  color:rgba(255,247,237,.82) !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:32px !important;
  box-shadow:none !important;
  text-align:center !important;
  cursor:pointer !important;
}
.site-header .header-quick-links .designSwitchBtn.active,
header .header-quick-links .designSwitchBtn.active,
.designSwitch.designSwitch--header .designSwitchBtn.active{
  color:#1f1308 !important;
  background:linear-gradient(135deg,#ffd166,#ff8a00 55%,#ff4fb8) !important;
  box-shadow:0 8px 20px rgba(255,138,0,.28) !important;
}
.site-header .header-quick-links .designSwitchBtn[value="modern"]::before,
header .header-quick-links .designSwitchBtn[value="modern"]::before,
.site-header .header-quick-links .designSwitchBtn[value="classic"]::before,
header .header-quick-links .designSwitchBtn[value="classic"]::before{
  content:'' !important;
}
@media(max-width:560px){
  .site-header .header-quick-links .designSwitch,
  header .header-quick-links .designSwitch,
  .designSwitch.designSwitch--header{min-height:38px!important;padding:4px!important;margin-left:0!important;}
  .site-header .header-quick-links .designSwitch::before,
  header .header-quick-links .designSwitch::before,
  .designSwitch.designSwitch--header::before{display:none!important;}
  .site-header .header-quick-links .designSwitchBtn,
  header .header-quick-links .designSwitchBtn,
  .designSwitch.designSwitch--header .designSwitchBtn{min-width:68px!important;height:30px!important;line-height:30px!important;font-size:11px!important;padding:0 9px!important;}
}


/* === sichtbar neuer Header-Design-Switch === */
.designSwitch.designSwitch--header{
  display:inline-flex!important;align-items:center!important;gap:0!important;padding:4px!important;margin-left:8px!important;
  border-radius:18px!important;border:2px solid rgba(255,209,102,.75)!important;
  background:linear-gradient(135deg,#17111f,#2a1730 60%,#17111f)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 3px rgba(255,209,102,.10)!important;
  overflow:hidden!important;min-height:44px!important;position:relative!important;
}
.designSwitch.designSwitch--header:before{
  content:'🎨 Design'!important;display:inline-flex!important;align-items:center!important;height:34px!important;padding:0 12px!important;
  color:#ffd166!important;font-weight:950!important;font-size:12px!important;letter-spacing:.04em!important;border-right:1px solid rgba(255,209,102,.25)!important;
}
.designSwitch.designSwitch--header .designSwitchBtn{
  appearance:none!important;border:0!important;border-radius:14px!important;margin:0 2px!important;padding:0 14px!important;height:34px!important;min-width:86px!important;
  background:transparent!important;color:#fff7ed!important;font-size:12px!important;font-weight:950!important;cursor:pointer!important;box-shadow:none!important;
}
.designSwitch.designSwitch--header .designSwitchBtn.active{
  background:linear-gradient(135deg,#ffd166,#ff8a00 48%,#ff4fb8)!important;color:#1a0f10!important;box-shadow:0 8px 22px rgba(255,138,0,.32)!important;
}
.designSwitch.designSwitch--header .designSwitchBtn[value="modern"]:before,
.designSwitch.designSwitch--header .designSwitchBtn[value="classic"]:before{content:''!important;}
@media(max-width:560px){.designSwitch.designSwitch--header:before{display:none!important}.designSwitch.designSwitch--header .designSwitchBtn{min-width:70px!important;padding:0 10px!important;font-size:11px!important}}

/* Modern header switch: sichtbarer Pill-Toggle */
body:not(.classic-design) .design-switch-header,
body:not(.classic-design) .design-switch,
.header-design-switch {
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:5px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(14px)!important;
}
body:not(.classic-design) .design-switch-header a,
body:not(.classic-design) .design-switch a,
.header-design-switch a,
body:not(.classic-design) .design-switch-header button,
body:not(.classic-design) .design-switch button,
.header-design-switch button {
  border:0!important;
  border-radius:999px!important;
  padding:9px 13px!important;
  color:#f8fafc!important;
  text-decoration:none!important;
  font-weight:900!important;
  font-size:13px!important;
  background:transparent!important;
  line-height:1!important;
}
body:not(.classic-design) .design-switch-header .active,
body:not(.classic-design) .design-switch .active,
.header-design-switch .active,
body:not(.classic-design) .design-switch-header a[href*="modern"],
body:not(.classic-design) .design-switch a[href*="modern"] {
  background:linear-gradient(135deg,#f97316,#ec4899)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(249,115,22,.35)!important;
}