:root{--left-top:0px}
/*
  Seakrauts V5 – Theme Styles (optimized)
  - Fixed global BG via <picture>/<img>
  - Slices full-height, top-anchored (per Variablen)
  - Right slice = Logo (Customizer: Größe/Position)
  - CTA Styles gebündelt
  - Content-Staking über BG/Slices/Effekte gesichert
*/

/* weiches Ausblenden fürs Logo */
.brand--logo,
.brand--logo img,
.brand--logo .custom-logo{
  transition: opacity 200ms ease !important;
  will-change: opacity;
}

/* wenn nahezu unsichtbar: blockiert keine Klicks */
.brand--logo.is-inert{ pointer-events: none !important; }




/* Defaults, damit die Variablen immer gesetzt sind */
:root{
  --left-shift: -11%;
  --left-scale: .92;
}

/* Gemeinsame Basis für die Slice (stabil & performant) */
.sk-site-bg__slice{
  position:absolute;
  display:block;
  top: var(--sk-top-offset);
  aspect-ratio: 1920 / 1012;   /* entspricht dem 1920er Export */
  will-change: transform;
  backface-visibility: hidden;
  image-rendering: auto;        /* kein crisp-edges, sonst Artefakte */
}

/* Links (DEIN Block, unverändert – plus optionaler 3D-Translate für GPU) */
.sk-site-bg__slice--left{
  left:0; transform-origin:0 0;
  /* optional etwas robuster: translate3d statt translateX */
  transform: translate3d(var(--left-shift), var(--left-top), 0);
  height: calc(100dvh - var(--sk-top-offset) + var(--sk-bleed) * 2);
}

/* Deine Breakpoints */
@media (min-width:1600px){ :root{ --left-shift: -14%; --left-scale: .88; } }
@media (max-width:1200px){ :root{ --left-shift:  -8%; --left-scale: .95; } }














































/* ================== Root Variablen ================== */
:root{
  /* Farben/Theme */
  --sk-bg:#0b0f14;
  --sk-card:#121821;
  --sk-gold:#f0c43a;
  --sk-text:#e7edf6;

  /* Layout */
  --sk-top-offset: 0px;     /* WP-Adminbar addiert automatisch */
  --sk-bleed: 4px;          /* Anti-Gap: 2–6px */
  --header-h: 64px;
  --header-h-mobile: 60px;

  /* Header/Brand */
  --brand-col-w: 350px;     /* Spalte links fürs Logo */
  --brand-col-w-mobile: 160px;
  --brand-logo-h: 44px;
  --brand-logo-h-mobile: 38px;
  --brand-logo-x: 0px;      /* via Customizer verstellbar */
  --brand-logo-y: 0px;
  --brand-logo-x-mobile: 0px;
  --brand-logo-y-mobile: 0px;

  /* Nav */
  --nav-gap: clamp(.5rem, 1.2vw, 1rem);
  --nav-underline-h: 2px;
  --nav-underline-radius: 2px;
  --nav-weight: 600;
  --nav-alpha: .92;

  /* CTA (global) */
  --cta-bg1: rgba(240,196,58,.36);
  --cta-bg2: rgba(240,196,58,.26);
  --cta-brd: rgba(240,196,58,.85);
  --cta-glow: rgba(240,196,58,.38);
  --cta-text: #0b0f14;

  /* Slices */
  --left-shift: -12%;
  --left-scale: .92;
  --right-offset: -5vw;
  --right-height: 56;     /* nur Zahl → 56 = 56vh */
  --right-min: 380px;
  --right-max: 1100px;
  --right-top-shift: 0px;

  /* Lightning (Glow) */
  --sk-lightning-on: 1;
  --sk-lightning-alpha: .85;
  --sk-lightning-color: 210 100% 85%;
  --sk-lightning-blur: 18px;

  /* Bolts (SVG) */
  --bolt-on: 1;
  --bolt-color: 210 100% 95%;
  --bolt-alpha: .95;
  --bolt-width: 1.6px;
  --bolt-glow1: 6px;
  --bolt-glow2: 12px;
  --bolt-period: 5s;
  --bolt-scale-x: .55;

  /* Front/Quicknav */
  --front-pad: clamp(80px, 16vh, 240px);
  --quicknav-lift: -50px;        /* -20 … -100 je nach Geschmack */
  --quicknav-spacer: 100px;      /* Abstand von Quicknav zu Content */
  --quicknav-gap-bottom: 8px;
}
body.admin-bar{ --sk-top-offset: 32px; }

/* ================== Base ================== */
*{ box-sizing:border-box; }
html,body{ margin:0; overflow-x:hidden; background:var(--sk-bg); color:var(--sk-text); }
body{ font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; }
.container{ max-width:1150px; margin:0 auto; padding:0 1.2rem; }

/* ================== Glass Header ================== */
.site-header--glass{
  position: fixed; top: var(--sk-top-offset); left:0; right:0; z-index:80;
  height: var(--header-h) !important;
  background: rgba(15,20,28,.34);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.06);
  overflow: visible;
}
.site-header__inner{
  display: grid !important;
  grid-template-columns: var(--brand-col-w) 1fr auto auto; /* Brand | Menü | CTA | Toggle */
  align-items: center;
  gap: clamp(.4rem, 1vw, .8rem);
  height: var(--header-h) !important;
}
.brand--logo{ display:flex; align-items:center; height: var(--header-h); transform: translate(var(--brand-logo-x), var(--brand-logo-y)); }
.brand--logo img{ display:block; height: var(--brand-logo-h); width:auto; }
@media (max-width:980px){
  .site-header--glass{ height: var(--header-h-mobile) !important; }
  .site-header__inner{ grid-template-columns: var(--brand-col-w-mobile) 1fr; height: var(--header-h-mobile) !important; }
  .brand--logo{ height: var(--header-h-mobile); transform: translate(var(--brand-logo-x-mobile), var(--brand-logo-y-mobile)); }
  .brand--logo img{ height: var(--brand-logo-h-mobile); }
}

/* Primary nav */
.primary-nav{ justify-self: start; }
.primary-nav .menu{ display:flex; align-items:center; gap: var(--nav-gap); margin:0; padding:0; list-style:none; }
.primary-nav .menu > li > a{
  position:relative; display:inline-block; padding:.45rem 0;
  font-weight: var(--nav-weight); letter-spacing:.15px;
  color: var(--sk-text); text-decoration:none; opacity: var(--nav-alpha);
  transition: opacity .18s ease, color .18s ease, text-shadow .18s ease;
}
.primary-nav .menu > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height: var(--nav-underline-h);
  background: linear-gradient(90deg, rgba(240,196,58,.0), var(--sk-gold), rgba(240,196,58,.0));
  border-radius: var(--nav-underline-radius); transform: scaleX(0.2); transform-origin: 50% 50%;
  opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.primary-nav .menu > li > a:hover,
.primary-nav .menu > li > a:focus-visible{ opacity: 1; text-shadow: 0 0 .01px rgba(255,255,255,.65); }
.primary-nav .menu > li > a:hover::after,
.primary-nav .menu > li > a:focus-visible::after{ transform: scaleX(1); opacity:.95; }
.primary-nav .menu > li.current-menu-item > a,
.primary-nav .menu > li.current-menu-ancestor > a{ opacity: 1; }
.primary-nav .menu > li.current-menu-item > a::after,
.primary-nav .menu > li.current-menu-ancestor > a::after{ transform: scaleX(1); opacity: 1; }
@media (max-width:980px){ .primary-nav .menu > li > a::after{ display:none; } }

/* Burger + Overlay (blur nur wenn offen) */
.nav-toggle{ display:none; position:relative; width:40px; height:40px; border:0; background:transparent; cursor:pointer; justify-self:end; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after{
  content:""; position:absolute; left:8px; right:8px; height:2px; background:#e7edf6; border-radius:2px;
}
.nav-toggle__bar{ top:50%; transform:translateY(-50%); }
.nav-toggle__bar::before{ top:-9px; } .nav-toggle__bar::after{ top:9px; }
@media (max-width:980px){
  .nav-toggle{ display:block; }
  .primary-nav{
    position: fixed; inset: calc(var(--sk-top-offset) + var(--header-h-mobile)) 0 0 0;
    background: rgba(11,15,20,.72); transform: translateY(-8px);
    opacity:0; visibility:hidden; display:none; transition:.25s ease;
  }
  .site-header--glass.is-open .primary-nav{
    display:block; transform:none; opacity:1; visibility:visible;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}

/* ================== CTA (gebündelt) ================== */
/* Utility-Klasse für Buttons/Links im Header */
.cta-btn{
  display:inline-block; padding:.65rem 1rem; border-radius:14px;
  font-weight:800; letter-spacing:.2px; color:var(--cta-text) !important; text-decoration:none !important;
  background: linear-gradient(180deg, var(--cta-bg1), var(--cta-bg2)) !important;
  border:1px solid var(--cta-brd) !important;
  -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px);
  box-shadow: 0 10px 28px var(--cta-glow), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.22) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease, opacity .18s ease;
}
.cta-btn:hover, .cta-btn:focus-visible{
  background: linear-gradient(180deg, rgba(240,196,58,.44), rgba(240,196,58,.30)) !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 38px rgba(240,196,58,.48), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(0,0,0,.24) !important;
  outline: 0;
}

/* Menüpunkt als CTA (auch bei Platzhalter-Links) */
.site-header .menu li.is-cta > a,
.primary-nav .menu li.is-cta > a,
.header-cta .menu li.is-cta > a{ composes: cta-btn; } /* (falls PostCSS) */
.site-header .menu li.is-cta > a,
.primary-nav .menu li.is-cta > a,
.header-cta .menu li.is-cta > a{ /* Fallback ohne composes */
  @supports not (selector(:has(*))){ /* no-op block to keep CSS valid if composes missing */ }
}
.site-header .menu li.is-cta > a,
.primary-nav .menu li.is-cta > a,
.header-cta .menu li.is-cta > a{ /* echte Regeln */
  display:inline-block; pad
	padding:.65rem 1rem; border-radius:14px; font-weight:800; letter-spacing:.2px;
  color:var(--cta-text) !important; text-decoration:none !important;
  background: linear-gradient(180deg, var(--cta-bg1), var(--cta-bg2)) !important;
  border:1px solid var(--cta-brd) !important;
  -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px);
  box-shadow: 0 10px 28px var(--cta-glow), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.22) !important;
}
.primary-nav .menu li.is-cta > a:hover{ background: linear-gradient(180deg, rgba(240,196,58,.44), rgba(240,196,58,.30)) !important; transform: translateY(-1px) scale(1.02); }
.primary-nav .menu li.is-cta > a::after{ display:none !important; } /* keine Unterlinie am CTA */
.header-cta{ justify-self:end; }
.header-cta .menu{ display:flex; gap:.6rem; margin:0; padding:0; list-style:none; }
@media (max-width:980px){ .header-cta{ display:none; } }



/* ================== HEADER-CTA (consolidated, glass + shine) ================== */
:root{
  /* Helligkeit/Leuchte zentral regeln */
  --cta-bg1: rgba(240,196,58,.38);
  --cta-bg2: rgba(240,196,58,.24);
  --cta-brd: rgba(240,196,58,.85);
  --cta-glow: rgba(240,196,58,.35);
  --cta-text: #0b0f14;
  --cta-hover1: rgba(240,196,58,.48);
  --cta-hover2: rgba(240,196,58,.30);
}

/* Basisaussehen nur für den Header-CTA rechts */
.site-header--glass .header-cta .menu a,
.site-header--glass .header-cta__btn,
.site-header--glass .header-cta .menu .menu-item > span{ /* falls Platzhalter ohne <a> */
  position: relative;
  display:inline-block;
  padding:.68rem 1.05rem;
  border-radius:14px;
  font-weight:800; letter-spacing:.2px;
  color:var(--cta-text) !important;
  text-decoration:none !important;

  background: linear-gradient(180deg, var(--cta-bg1), var(--cta-bg2));
  border:1px solid var(--cta-brd);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:
    0 10px 28px var(--cta-glow),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.22);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    filter .18s ease,
    opacity .18s ease;
  overflow: hidden; /* Shine-Effekt */
}

/* Shine-Sweep über den Button */
.site-header--glass .header-cta .menu a::after,
.site-header--glass .header-cta__btn::after,
.site-header--glass .header-cta .menu .menu-item > span::after{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 55%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
}

/* Hover/Focus – etwas heller + leichtes Anheben */
.site-header--glass .header-cta .menu a:hover,
.site-header--glass .header-cta__btn:hover,
.site-header--glass .header-cta .menu .menu-item > span:hover,
.site-header--glass .header-cta .menu a:focus-visible,
.site-header--glass .header-cta__btn:focus-visible,
.site-header--glass .header-cta .menu .menu-item > span:focus-visible{
  background: linear-gradient(180deg, var(--cta-hover1), var(--cta-hover2));
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 38px rgba(240,196,58,.45),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.24);
  outline: 0;
}
.site-header--glass .header-cta .menu a:hover::after,
.site-header--glass .header-cta__btn:hover::after,
.site-header--glass .header-cta .menu .menu-item > span:hover::after{
  transform: translateX(120%);
}

/* Optional: sanftes „Atmen“ – nur bei Klasse .is-breathe */
@media (prefers-reduced-motion:no-preference){
  .site-header--glass .header-cta .menu a.is-breathe{
    animation: sk-cta-breathe 3.8s ease-in-out infinite;
  }
  @keyframes sk-cta-breathe{
    0%,100% { box-shadow: 0 10px 28px rgba(240,196,58,.35), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.22); }
    50%     { box-shadow: 0 14px 38px rgba(240,196,58,.45), inset 0 1px 0 rgba(255,255,255,.5),  inset 0 -1px 0 rgba(0,0,0,.24); }
  }
}

/* Sicherheit: Unterstreichung der Hauptnav greift hier nicht */
.site-header--glass .header-cta .menu a::before,
.site-header--glass .header-cta .menu a::after:where(.nav-underline){ display:none !important; }



/* ================== HEADER-CTA — zentriert + helle Schrift ================== */
:root{
  /* dezenter Glas-Gold Look (gute Lesbarkeit mit weißer Schrift) */
  --cta-bg1: rgba(240,196,58,.18);
  --cta-bg2: rgba(240,196,58,.10);
  --cta-brd: rgba(240,196,58,.70);
  --cta-glow: rgba(240,196,58,.28);
  --cta-text: #ffffff;            /* <— statt schwarz jetzt hell */
  --cta-hover1: rgba(240,196,58,.28);
  --cta-hover2: rgba(240,196,58,.16);
}

.site-header--glass .header-cta .menu a,
.site-header--glass .header-cta__btn,
.site-header--glass .header-cta .menu .menu-item > span{
  /* perfekte Zentrierung im Button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  /* Höhe an Header koppeln → optisch mittig in der Leiste */
  height: calc(var(--header-h, 64px) - 18px);
  padding: 0 clamp(.9rem, 1.4vw, 1.2rem);

  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--cta-text) !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.15); /* dezent, für Kontrast */

  background: linear-gradient(180deg, var(--cta-bg1), var(--cta-bg2));
  border: 1px solid var(--cta-brd);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow:
    0 10px 28px var(--cta-glow),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.22);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    filter .18s ease,
    opacity .18s ease;
  overflow: hidden; /* für Shine */
}

/* Shine Sweep beibehalten */
.site-header--glass .header-cta .menu a::after,
.site-header--glass .header-cta__btn::after,
.site-header--glass .header-cta .menu .menu-item > span::after{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 55%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
}

/* Hover/Focus */
.site-header--glass .header-cta .menu a:hover,
.site-header--glass .header-cta__btn:hover,
.site-header--glass .header-cta .menu .menu-item > span:hover,
.site-header--glass .header-cta .menu a:focus-visible,
.site-header--glass .header-cta__btn:focus-visible,
.site-header--glass .header-cta .menu .menu-item > span:focus-visible{
  background: linear-gradient(180deg, var(--cta-hover1), var(--cta-hover2));
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 38px rgba(240,196,58,.42),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(0,0,0,.24);
  outline: 0;
}
.site-header--glass .header-cta .menu a:hover::after,
.site-header--glass .header-cta__btn:hover::after,
.site-header--glass .header-cta .menu .menu-item > span:hover::after{
  transform: translateX(120%);
}

/* Sicherheit: keine Unterstreichungen aus der Primärnav */
.primary-nav .menu li.is-cta > a::after{ display:none !important; }

/* Mobile etwas kompakter (optional) */
@media (max-width:980px){
  .site-header--glass .header-cta .menu a,
  .site-header--glass .header-cta__btn,
  .site-header--glass .header-cta .menu .menu-item > span{
    height: calc(var(--header-h-mobile,60px) - 18px);
    padding: 0 .9rem;
  }
}

/* ================== HEADER-CTA — ICON-SLOT ================== */
/* Default-Icon per CSS-Variable (optional) */
:root{
  --cta-icon: "🔒"; /* leer lassen "" = kein Default-Icon */
}

/* Basis: Icon vor dem Text (für <a> und Platzhalter-<span>) */
.site-header--glass .header-cta .menu li.is-cta > a::before,
.site-header--glass .header-cta .menu li.is-cta > span::before{
  content: var(--cta-icon);
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  margin-right: .55rem;
  transform: translateY(.5px);
  transition: transform .18s ease, opacity .18s ease;
}

/* Kleine Reaktion beim Hover */
.site-header--glass .header-cta .menu li.is-cta > a:hover::before,
.site-header--glass .header-cta .menu li.is-cta > span:hover::before{
  transform: translateY(-1px) scale(1.04);
}

/* ---------- Icon per Menü-Klasse wählen (über WP-Menü „CSS-Klassen“) ---------- */
/* Beispiel: is-cta icon-lock */
.site-header--glass .header-cta .menu li.is-cta.icon-none   > a::before,
.site-header--glass .header-cta .menu li.is-cta.icon-none   > span::before{ content: ""; }
.site-header--glass .header-cta .menu li.is-cta.icon-lock   > a::before,
.site-header--glass .header-cta .menu li.is-cta.icon-lock   > span::before{ content: "🔒"; }
.site-header--glass .header-cta .menu li.is-cta.icon-user   > a::before,
.site-header--glass .header-cta .menu li.is-cta.icon-user   > span::before{ content: "👤"; }
.site-header--glass .header-cta .menu li.is-cta.icon-star   > a::before,
.site-header--glass .header-cta .menu li.is-cta.icon-star   > span::before{ content: "★"; }
.site-header--glass .header-cta .menu li.is-cta.icon-play   > a::before,
.site-header--glass .header-cta .menu li.is-cta.icon-play   > span::before{ content: "▶"; }
.site-header--glass .header-cta .menu li.is-cta.icon-rocket > a::before,
.site-header--glass .header-cta .menu li.is-cta.icon-rocket > span::before{ content: "🚀"; }

/* Icon rechts statt links: Klasse ‚icon-right‘ am gleichen Menüpunkt */
.site-header--glass .header-cta .menu li.is-cta.icon-right > a,
.site-header--glass .header-cta .menu li.is-cta.icon-right > span{
  display: inline-flex;            /* falls nicht schon gesetzt */
  flex-direction: row-reverse;
}
.site-header--glass .header-cta .menu li.is-cta.icon-right > a::before,
.site-header--glass .header-cta .menu li.is-cta.icon-right > span::before{
  margin-right: 0;
  margin-left: .55rem;
}


/* === HEADER-CTA — Reset & One-True-Style ================================= */

/* 1) Container immer schön vertikal mittig, unabhängig vom Menü-Wrapper */
.site-header--glass .header-cta{
  justify-self: end;
  align-self: stretch;
  display: flex;
  align-items: center;        /* vertikal mittig */
}

/* WordPress packt oft einen Wrapper um das Menü */
.site-header--glass .header-cta > div{
  display: flex;
  align-items: center;
}

/* 2) Liste neutralisieren (kein Bullet, kein extra Abstand) */
.site-header--glass .header-cta .menu{
  display: flex;
  align-items: center;
  gap: var(--cta-gap, .6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header--glass .header-cta .menu > li{ margin:0; padding:0; }

/* 3) Button-Stil – konsistent für <a> UND <span> (Platzhalter) */
.site-header--glass .header-cta .menu > li > a,
.site-header--glass .header-cta .menu > li > span{
  /* Design-Variablen */
  --cta-h: 42px;
  --cta-xpad: 16px;
  --cta-radius: 14px;
  --cta-text: #fff;                       /* Textfarbe (weiß statt schwarz) */
  --cta-bg1: rgba(240,196,58,.22);
  --cta-bg2: rgba(240,196,58,.14);
  --cta-brd: rgba(240,196,58,.70);
  --cta-glow: rgba(240,196,58,.26);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cta-h);
  padding: 0 var(--cta-xpad);
  white-space: nowrap;
  border-radius: var(--cta-radius);
  text-decoration: none !important;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  color: var(--cta-text) !important;

  background: linear-gradient(180deg, var(--cta-bg1), var(--cta-bg2));
  border: 1px solid var(--cta-brd);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow:
    0 10px 28px var(--cta-glow),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.20);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
}

/* 4) Hover/Focus – heller & leicht „heben“ */
.site-header--glass .header-cta .menu > li > a:hover,
.site-header--glass .header-cta .menu > li > span:hover{
  background: linear-gradient(180deg, rgba(240,196,58,.32), rgba(240,196,58,.22));
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 38px rgba(240,196,58,.36),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.22);
  filter: saturate(110%);
}
.site-header--glass .header-cta .menu > li > a:focus-visible,
.site-header--glass .header-cta .menu > li > span:focus-visible{
  outline: 2px solid var(--sk-gold);
  outline-offset: 2px;
}



/* 6) Icon-Slot kompatibel halten (kommt aus deinem vorherigen Block) */
.site-header--glass .header-cta .menu li.is-cta > a::before,
.site-header--glass .header-cta .menu li.is-cta > span::before{
  /* Falls du per :root --cta-icon gesetzt hast oder Klassen wie .icon-lock nutzt */
  margin-right: .55rem;
  font-size: 1.05em;
  line-height: 1;
  transform: translateY(.5px);
  transition: transform .18s ease, opacity .18s ease;
}
.site-header--glass .header-cta .menu li.is-cta.icon-right > a,
.site-header--glass .header-cta .menu li.is-cta.icon-right > span{
  flex-direction: row-reverse;
}
.site-header--glass .header-cta .menu li.is-cta.icon-right > a::before,
.site-header--glass .header-cta .menu li.is-cta.icon-right > span::before{
  margin-right: 0; margin-left: .55rem;
}

/* === HEADER-CTA – Effekte zurück ====================================== */
/* Hover: etwas stärkerer Lift + Glow */
.site-header--glass .header-cta .menu > li > a:hover,
.site-header--glass .header-cta .menu > li > span:hover{
  background: linear-gradient(180deg, rgba(240,196,58,.38), rgba(240,196,58,.26));
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 16px 42px rgba(240,196,58,.42),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(0,0,0,.24);
  filter: saturate(112%);
}

/* Idle „Atmen“ (sanfte Leuchte), per Klasse .is-breathe zuschalten */
@media (prefers-reduced-motion:no-preference){
  .site-header--glass .header-cta .menu > li > a.is-breathe,
  .site-header--glass .header-cta .menu > li > span.is-breathe{
    animation: sk-cta-breathe 3.6s ease-in-out infinite;
  }
  @keyframes sk-cta-breathe{
    0%,100%{
      box-shadow:
        0 10px 28px rgba(240,196,58,.26),
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -1px 0 rgba(0,0,0,.20);
      transform: translateY(0) scale(1);
      filter: saturate(100%);
    }
    50%{
      box-shadow:
        0 16px 44px rgba(240,196,58,.40),
        inset 0 1px 0 rgba(255,255,255,.46),
        inset 0 -1px 0 rgba(0,0,0,.22);
      transform: translateY(-1px) scale(1.01);
      filter: saturate(110%);
    }
  }
}

































/* ================== Global fixed background ================== */
.sk-site-bg{ position:fixed; inset: calc(-1 * var(--sk-bleed)); z-index:0; pointer-events:none; }
.sk-bg-picture,.sk-site-bg__img{
  position:fixed; inset: calc(-1 * var(--sk-bleed));
  width: calc(100vw + var(--sk-bleed) * 2); height: calc(100dvh + var(--sk-bleed) * 2);
  object-fit:cover; object-position:center; z-index:0; pointer-events:none;
  transform: translateZ(0); backface-visibility: hidden;
}

/* ================== Slices (fixiert, voll hoch) ================== */
.sk-site-bg__slice{
  position:fixed;
  top: calc(var(--sk-top-offset) - var(--sk-bleed));
  height: calc(100dvh - var(--sk-top-offset) + var(--sk-bleed) * 2);
  width:auto; pointer-events:none; user-select:none; image-rendering:auto; filter:none; z-index:1;
  transform: translateZ(0); backface-visibility: hidden;
}
/* Links */
.sk-site-bg__slice--left{
  left:0; transform-origin:0 0;
  transform: translate3d(var(--left-shift), var(--left-top), 0);
  height: calc(100dvh - var(--sk-top-offset) + var(--sk-bleed) * 2);
}
@media (min-width:1600px){ :root{ --left-shift: -14%; --left-scale: .88; } }
@media (max-width:1200px){ :root{ --left-shift:  -8%; --left-scale: .95; } }
/* Rechts (Logo) – Desktop präzise */
.sk-site-bg__slice--right{ right: var(--right-offset); }
@media (min-width:1200px){
  body .sk-site-bg__slice--right{
    right: var(--right-offset) !important;
    top: calc(50% + var(--sk-top-offset) / 2 + var(--right-top-shift)) !important;
    transform: translate3d(0,-50%,0) !important;
    height: clamp(var(--right-min), calc(var(--right-height) * 1vh), var(--right-max)) !important;
    width:auto !important;
  }
}
/* Mobile Logo-Position */
@media (max-width:1024px){
  .sk-site-bg__slice--right{
    right: max(env(safe-area-inset-right,0px),6px);
    position: fixed; top: calc(50% + var(--right-top-shift)) !important; transform: translate3d(0,-50%,0) !important;
    height: clamp(260px, 48vh, 720px);
  }
}
@supports (top: max(0px)){
  @media (max-width:1024px){
    .sk-site-bg__slice--right{ top: calc(50% + var(--right-top-shift) + env(safe-area-inset-top, 0px) / 2) !important; }
  }
}
@media (max-width:768px){
  .sk-site-bg__slice--left{ display:none !important; } /* nur Logo auf Phone */
}

/* ================== Hero & Content + Stacking ================== */
html, body { height:100%; }
.sk-hero{
  min-height: calc(100dvh - var(--sk-top-offset)); display:flex; align-items:center;
  position:relative; z-index:3;
}
.sk-hero__inner{ position:relative; z-index:3; max-width:1150px; margin:0 auto; padding:clamp(2rem,6vw,6rem) 1.2rem; text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* Content sicher über BG/Slices/Effekten */
.sk-bg-picture,.sk-site-bg__img{ z-index:0 !important; }
.sk-site-bg__slice{ z-index:1 !important; }
.sk-lightning,.sk-lightning-bolts{ z-index:2 !important; }
.site,.site-content,.site-main,.entry-content,.sk-section,.wp-block-group,.wp-block-columns,.post-card{
  position:relative; z-index:3;
}
.entry-content *[style*="z-index:-1"]{ z-index: 0 !important; }

/* ================== Lightning FX (Glow) ================== */
.sk-lightning{ position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: var(--sk-lightning-on); }
.sk-lightning__flash{
  position:absolute; width:36vmax; height:36vmax; left:0; top:0; transform: translate(-50%,-50%) scale(.8);
  mix-blend-mode: screen; filter: blur(var(--sk-lightning-blur)); opacity:0; will-change: opacity, transform;
  background: radial-gradient(closest-side, hsl(var(--sk-lightning-color) / var(--sk-lightning-alpha)) 0%, hsl(var(--sk-lightning-color) / .25) 35%, transparent 60%);
  animation: sk-flash 7s infinite both;
}
.sk-lightning .f1{ left:20%; top:35%; transform: translate(-50%,-50%) scale(.7); animation-delay:.6s; }
.sk-lightning .f2{ left:72%; top:48%; transform: translate(-50%,-50%) scale(1.0); animation-delay:2.3s; }
.sk-lightning .f3{ left:40%; top:72%; transform: translate(-50%,-50%) scale(1.2); animation-delay:4.8s; }
@keyframes sk-flash{
  0%, 88% { opacity: 0; transform: translate(-50%,-50%) rotate(0.001deg); }
  89%     { opacity: .85; }
  90%     { opacity: .25; }
  92%     { opacity: .55; }
  95%,100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .sk-lightning{ display:none !important; } }

/* ================== SVG-Blitze (dünn) ================== */
.sk-lightning-bolts{ position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: var(--bolt-on); }
.sk-bolt{
  position: fixed; width: 16vmin; height: 46vmin;
  mix-blend-mode: screen; opacity: 0;
  filter: drop-shadow(0 0 var(--bolt-glow1) hsl(var(--bolt-color) / .95)) drop-shadow(0 0 var(--bolt-glow2) hsl(var(--bolt-color) / .55));
  animation: boltFlash var(--bolt-period) infinite both; will-change: opacity, transform, filter;
  transform: translate(-50%,-50%) scaleX(var(--bolt-scale-x)) rotate(0.001deg);
}
.sk-bolt .bolt{ stroke: hsl(var(--bolt-color) / var(--bolt-alpha)); stroke-width: var(--bolt-width); stroke-linejoin: bevel; stroke-linecap: round; fill:none; }
.sk-bolt .branch{ stroke: hsl(var(--bolt-color) / .55); stroke-width: calc(var(--bolt-width) - 0.6px); stroke-linejoin: round; stroke-linecap: round; fill:none; }
.sk-bolt.b1{ left: 22%; top: 28%; animation-delay:.7s;  }
.sk-bolt.b2{ left: 71%; top: 44%; animation-delay:3.1s; }
.sk-bolt.b3{ left: 45%; top: 72%; animation-delay:5.2s; }
@keyframes boltFlash{
  0%, 86% { opacity: 0; }
  87%     { opacity: .95; }
  88%     { opacity: .35; }
  90%     { opacity: .75; }
  93%,100%{ opacity: 0; }
}
@media (max-width:768px){ .sk-bolt{ width: 28vmin; height: 54vmin; } }
@media (prefers-reduced-motion: reduce){ .sk-lightning-bolts{ display:none !important; } }

/* ================== Front-Page Grid / Cards ================== */
.sk-front-grid{ display:grid; gap:clamp(16px,2.2vw,24px); grid-template-columns:minmax(0,2fr) minmax(280px,1fr); align-items:start; }
@media (max-width:1024px){ .sk-front-grid{ grid-template-columns:1fr; } }
.sk-card{ background: var(--sk-card); border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.28); overflow:hidden; }
.sk-section{ margin-top: clamp(18px,2.2vw,26px); }
.sk-h{ margin:0 0 .6rem; } .sk-h-sm{ margin:.8rem 1rem .6rem; font-size:1.05rem; opacity:.9; }

.sk-live .sk-live__thumb{
  position:relative; display:block; aspect-ratio: 16/9;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)), var(--bg) center/cover no-repeat;
}
.sk-badge{
  position:absolute; left:12px; top:12px; padding:.25rem .5rem; font-weight:800; letter-spacing:.2px;
  background:#e74c3c; color:#fff; border-radius:8px; font-size:.85rem; box-shadow:0 6px 16px rgba(231,76,60,.35);
}
.sk-live__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  background: radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,255,255,.84)), conic-gradient(from 0deg,#0000,#0000);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.sk-live__play::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-40%, -50%);
  border-style:solid; border-width:12px 0 12px 18px; border-color:transparent transparent transparent #0b0f14;
}
.sk-live__meta{ position:absolute; left:14px; right:14px; bottom:14px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }

/* News Cards */
.sk-cards{ display:grid; gap:clamp(12px,1.6vw,18px); }
.sk-cards--row3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .sk-cards--row3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .sk-cards--row3{ grid-template-columns:1fr; } }
.sk-news a{ display:block; color:inherit; text-decoration:none; }
/* News Cards – Bildbereich immer 16:9 und sauber beschnitten */
.sk-news .sk-media{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Bild füllt den Bereich vollständig */
.sk-news .sk-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sk-news h3{ margin:.6rem .8rem .2rem; font-size:1.05rem; }
.sk-news .sk-meta{ display:block; margin:0 .8rem .8rem; opacity:.75; font-size:.9rem; }

/* Chips */
.sk-cards--chips{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.75rem; }
@media (max-width:900px){ .sk-cards--chips{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:600px){ .sk-cards--chips{ grid-template-columns: repeat(2,1fr); } }
.sk-chip{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:.5rem; display:flex; gap:.6rem; align-items:center;
  color:var(--sk-text); text-decoration:none; transition:background .2s ease, transform .2s ease;
}
.sk-chip:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }
.sk-chip img{ width:44px; height:44px; object-fit:cover; border-radius:10px; }

/* Sidebar */
.sk-list{ list-style:none; margin:0; padding:.2rem .6rem .8rem; display:grid; gap:.6rem; }
.sk-clips li a{ display:grid; grid-template-columns:84px 1fr; gap:.7rem; color:inherit; text-decoration:none; }
.sk-clips img{ width:84px; height:56px; object-fit:cover; border-radius:10px; }
.sk-li .sk-title{ display:block; font-weight:700; } .sk-li .sk-sub{ display:block; opacity:.75; font-size:.92rem; }
.sk-events-list li a{ display:grid; grid-template-columns:72px 1fr; gap:.8rem; align-items:center; color:inherit; text-decoration:none; }
.sk-date{ display:grid; place-items:center; width:72px; aspect-ratio:1/1; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.sk-date strong{ font-size:1.25rem; }

/* ================== Quicknav (eine Definition) ================== */


/* Band direkt unter Header */
.sk-quicknav{ position: relative; z-index: 4; margin-bottom: clamp(16px, 3vw, 32px); }

/* Variante A: 3 Kacheln nebeneinander */
.sk-quicknav__grid{
  display: grid; gap: clamp(12px, 1.8vw, 20px);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:980px){ .sk-quicknav__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:640px){ .sk-quicknav__grid{ grid-template-columns: 1fr; } }

/* Kachel (Glas) */
.sk-qtile{
  display: grid; grid-template-rows: 118px auto;
  background: rgba(15,20,28,.55);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--sk-text);
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sk-qtile:hover{ transform: translateY(-2px); border-color: rgba(240,196,58,.45); box-shadow: 0 22px 54px rgba(0,0,0,.36); }
.sk-qtile__media{
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.35)), radial-gradient(60% 60% at 60% 40%, rgba(240,196,58,.18), transparent 60%);
  background-size: cover; background-position: center;
}
.sk-qtile__body{ padding: clamp(12px, 1.6vw, 16px) clamp(14px, 1.8vw, 18px); }
.sk-qtile__title{ margin: 0 0 4px; font-size: clamp(16px, 1.2vw, 18px); font-weight: 800; letter-spacing:.2px; }
.sk-qtile__meta{ margin: 0; color: #a9b3c2; font-size: .95rem; opacity: .95; }

/* Bildzuweisungen (per Klasse am Menü-Item) */
.sk-qtile.bg-ueber   .sk-qtile__media{ background-image:url("/wp-content/themes/DEIN-THEME/assets/img/placeholders/tile-01.jpg"); }
.sk-qtile.bg-recruit .sk-qtile__media{ background-image:url("/wp-content/themes/DEIN-THEME/assets/img/placeholders/tile-02.jpg"); }
.sk-qtile.bg-clips   .sk-qtile__media{ background-image:url("/wp-content/themes/DEIN-THEME/assets/img/placeholders/tile-03.jpg"); }

/* Variante B: Spalten-Menüs (auto-fit) */
.sk-quicknav--cols{
  position:relative; z-index:4;
  margin-top: calc(var(--header-h,64px) + var(--quicknav-lift));
  margin-bottom: var(--quicknav-gap-bottom);
}
.sk-quicknavcols{ display:grid; gap: clamp(12px, 1.8vw, 22px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sk-qcol{
  background: rgba(15,20,28,.55); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.28);
  padding: clamp(12px, 1.6vw, 16px);
}
.sk-qcol__title{ margin:.1rem 0 .2rem; font-weight:800; letter-spacing:.2px; }
.sk-qcol__meta{ margin:0 0 .4rem; color:#a9b3c2; opacity:.95; }
.sk-qmenu{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.35rem; }
.sk-qmenu > li > a{
  display:block; text-decoration:none; color:var(--sk-text);
  padding:.45rem .55rem; border-radius:10px; opacity:.92; transition: background .18s ease, opacity .18s ease;
}
.sk-qmenu > li > a:hover,
.sk-qmenu > li > a:focus-visible{ background: rgba(255,255,255,.06); opacity:1; outline: none; }
.sk-qmenu > li > a{ position:relative; }
.sk-qmenu > li > a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background: linear-gradient(90deg, rgba(240,196,58,0), var(--sk-gold), rgba(240,196,58,0));
  border-radius:2px; transform: scaleX(0); transform-origin:50% 50%; opacity:0; transition: transform .2s ease, opacity .2s ease;
}
.sk-qmenu > li > a:hover::after{ transform: scaleX(1); opacity:.95; }

/* Spacer: kontrolliert Abstand Quicknav → Content */
.sk-quicknav-spacer{ height: var(--quicknav-spacer) !important; }

/* ================== Footer ================== */
.footer-wrap{ display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:1rem; }
@media (max-width: 900px){ .footer-wrap{ grid-template-columns: 1fr; gap:.6rem; } }
.site-footer{
  margin-top: 4rem; padding: 1.2rem 0 1.6rem;
  border-top: 1px solid rgba(255,255,255,.06); color: #a9b3c2; background: transparent; z-index: 1;
}
.footer-nav .menu,.footer-legal .menu{ display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; margin:0; padding:0; list-style:none; }
.footer-nav .menu a,.footer-legal .menu a{
  color: #a9b3c2; text-decoration:none; padding:.25rem .1rem; border-radius:8px; opacity:.95; transition: color .2s ease, opacity .2s ease, background .2s ease;
}
.footer-nav .menu a:hover,.footer-legal .menu a:hover{ color:#e7edf6; opacity:1; background: rgba(255,255,255,.05); }
.footer-legal .menu a::after{ content:none; }
.footer-copy{ margin-left:auto; font-size:.95rem; color:#94a0b2; opacity:.9; }
@media (max-width:900px){ .footer-copy{ margin-left:0; } }




/* Global: Scroll-Offset für festen Header */
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h,64px) + var(--sk-top-offset,0px) + 12px);
}

/* Für Sprungziele (#anker) – Überschreibt pro Element */
[id]{
  scroll-margin-top: calc(var(--header-h,64px) + var(--sk-top-offset,0px) + 12px);
}

/* Nicht-Startseite: genug Platz unter der Glasleiste */
body:not(.home) .site-content{
  padding-top: calc(var(--header-h,64px) + 20px);
}



/* Brand-Block neben dem Logo */
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand .custom-logo,
.brand--logo img{ height: var(--brand-logo-h); width:auto; display:block; }

.brand-meta{ line-height:1.1; }
.brand-meta .site-title{
  display:inline-block;
  font-weight:800;
  font-size: clamp(18px,1.6vw,22px);
  color: var(--sk-text);
  text-decoration:none;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.brand-meta .site-title:hover{ opacity:.95; }
.brand-meta .site-tagline{
  margin-top:.15rem;
  font-size:.9rem;
  color: rgba(231,237,246,.82);
}

@media (max-width:980px){
  .brand-meta .site-tagline{ display:none; }
  :root{ --brand-col-w: clamp(200px, 24vw, 320px); }
}

/* Scroll-Offset für fixed header (Anker & Seitenanfang) */
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h,64px) + var(--sk-top-offset,0px) + 12px); }
[id]{  scroll-margin-top: calc(var(--header-h,64px) + var(--sk-top-offset,0px) + 12px); }
body:not(.home) .site-content{ padding-top: calc(var(--header-h,64px) + 20px); }





/* ===== Intro (Startseite) – unter Glasleiste, rechts neben dem Logo ===== */
.site-intro{
  position: relative;
  z-index: 4; /* sicher über Slices/Blitzen/Content-Layer */
  margin-top: calc(var(--sk-top-offset,0px) + var(--header-h,64px) - 2px);
}

.site-intro__inner{
  display: grid;
  grid-template-columns: var(--brand-col-w) 1fr; /* Logo-Spalte + freie Fläche */
  align-items: center;
  gap: clamp(.6rem, 1vw, 1rem);
  min-height: clamp(84px, 12vw, 140px);
}

.site-intro__text{
  grid-column: 2 / 3;        /* rechts neben dem Logo */
  padding-left: clamp(8px, 1.2vw, 16px);
}

.site-intro__title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.site-intro__tagline{
  margin: .15rem 0 0;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  color: rgba(231,237,246,.9);
}






/* Mobile: Tagline optional ausblenden, Intro kompakter */
@media (max-width:980px){
  .site-intro__inner{ grid-template-columns: 1fr; }
  .site-intro__text{ grid-column: 1 / -1; padding-left: 0; }
}


/* ===== Intro: schlichte Premium-Typo für Seitentitel + Tagline ===== */

/* Titel */
.site-intro__title{
  position: relative;
  display: inline-block;
  margin: 0 0 .35rem;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.12;
  color: var(--sk-text);
  text-shadow: 0 1px 2px rgba(0,0,0,.28);  /* dezent, für Tiefe */
}
.site-intro__title a{
  color: inherit;
  text-decoration: none;
}

/* dezente, zentrierte Gold-Unterstreichung */
.site-intro__title::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  margin: 0 auto;
  bottom: -8px;
  height: 3px;
  width: clamp(44px, 6vw, 80px);
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(240,196,58,0),
    var(--sk-gold),
    rgba(240,196,58,0)
  );
  opacity: .95;
  box-shadow: 0 0 10px rgba(240,196,58,.35);
}
@media (hover:hover){
  .site-intro__title a:hover{ text-shadow: 0 0 .01px rgba(255,255,255,.8); }
  .site-intro__title:hover::after{ filter: saturate(115%); }
}

/* Tagline */
.site-intro__tagline{
  margin: .5rem 0 0;
  font-weight: 500;
  letter-spacing: .2px;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  color: rgba(231,237,246,.88);
}

/* Optional (wenn du’s einen Tick „reicher“ willst):
   Glas-Hintergrund als dezentes Pad hinter dem Text aktivieren, indem
   du am <section> zusätzlich die Klasse .site-intro--glass setzt */
.site-intro--glass .site-intro__text{
  background: rgba(15,20,28,.22);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: clamp(10px,1.4vw,14px) clamp(12px,1.6vw,18px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}




/* OVERRIDE – Intro höher, Content nicht weiter nach unten schieben */
:root { --intro-nudge: -12px; } /* negativ = nach oben, anpassen nach Wunsch */

body.home .site-intro,
body.front-page .site-intro{
  margin-top: calc(
    var(--sk-top-offset, 0px) +
    var(--header-h, 64px) +
    var(--intro-nudge)
  ) !important;

  /* Wichtig: gleicht die Verschiebung nach oben nach unten wieder aus */
  margin-bottom: var(--intro-nudge) !important;
  /* KEIN height:auto hier */
}











/* Mobile: Tagline kompakter/abschaltbar */
@media (max-width: 980px){
  .site-intro__tagline{ opacity: .85; }
  /* Wenn du die Tagline auf Phones komplett aus willst:
  .site-intro__tagline{ display:none; } */
}


/* Brand-Link soll nur so groß sein wie das Logo */
.site-header--glass .brand--logo{
  display: inline-flex;       /* shrink-to-fit */
  align-items: center;
  justify-self: start;        /* NICHT auf Spaltenbreite stretchen */
  align-self: center;         /* vertikal mittig in der Leiste */
  height: auto;               /* nicht Header-Höhe übernehmen */
  padding: 0;                 /* keine „unsichtbaren“ Ränder */
}

/* Logo-Größe bleibt variablen-gesteuert */
.site-header--glass .brand--logo img{
  height: var(--brand-logo-h);
  width: auto;
  display: block;
}
@media (max-width:980px){
  .site-header--glass .brand--logo img{ height: var(--brand-logo-h-mobile); }
}


/* === PRIMARY NAV: vertikal mittig in der Glasleiste "locken" ============ */

/* Header-Row fix und Items mittig ausrichten */
.site-header--glass{
  height: var(--header-h) !important;
}
.site-header--glass .site-header__inner{
  height: var(--header-h) !important;
  align-items: center !important;
}

/* NAV selbst auf Header-Höhe ziehen und zentrieren */
.site-header--glass .primary-nav{
  align-self: center !important;     /* falls Grid die Zeile streckt */
  display: flex !important;
  align-items: center !important;
  height: var(--header-h) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* UL neutralisieren + Items mittig */
.site-header--glass .primary-nav .menu{
  display: flex !important;
  align-items: center !important;
  gap: var(--nav-gap);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* Links nicht „aufblähen“ – kompakte Zeilenhöhe */
.site-header--glass .primary-nav .menu > li > a{
  line-height: 1.1 !important;
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
}

/* Brand-Link soll NICHT 350px breit sein – nur so groß wie das Logo */
.site-header--glass .brand--logo{
  display: inline-flex !important;   /* shrink-to-fit */
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  align-self: center !important;
}
.site-header--glass .brand--logo img{
  height: var(--brand-logo-h);
  width: auto;
  display: block;
}
@media (max-width:980px){
  .site-header--glass .brand--logo img{ height: var(--brand-logo-h-mobile); }
}

/* Sicherheit: der Intro-Block darunter drückt nichts nach unten */
.site-intro{
  position: relative;
  z-index: 3;
  margin-top: calc(var(--header-h,64px) + var(--sk-top-offset,0px) + clamp(10px, 1.6vw, 18px)) !important;
}


/* === HEADER: optischer Lift für Nav & CTA (stärker) ==================== */
:root{
  /* Negativ = höher. Probier -10px bis -14px */
  --nav-optical-lift: -50px;
}

/* Nav & CTA hochziehen */
.site-header--glass .primary-nav{
  height: var(--header-h) !important;
  display: flex !important;
  align-items: center !important;
  transform: translateY(var(--nav-optical-lift));
}

.site-header--glass .header-cta{
  display: flex !important;
  align-items: center !important;
  transform: translateY(var(--nav-optical-lift));
}

/* etwas kompaktere Zeilenhöhe, damit nichts nach unten „zieht“ */
.site-header--glass .primary-nav .menu > li > a{
  line-height: 1.05 !important;
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
}

/* Optional: auf Mobile etwas weniger Lift */
@media (max-width:980px){
  :root{ --nav-optical-lift: -7px; }
}


.sk-embed-16x9 { position: relative; padding-bottom:56.25%; height:0; }
.sk-embed-16x9 iframe, .sk-embed-16x9 video {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}




/* === Abstand unter der Glas-Headerleiste (Home) ====================== */
/* Drehknopf: wie dicht der Content (bzw. dein erster Block) am Header hängt */
:root{
  --content-gap: 0px; /* <— hier feintunen: 0–20px je nach Geschmack */
}



/* Falls deine Quicknav als erster Block kommt UND selbst noch top-Margin hat: weg damit */
/*.home .sk-quicknav,
.home .sk-quicknav--cols{ margin-top: 0 !important; }*/

/* Optional: Quicknav unten etwas enger machen */
.home .sk-quicknav,
.home .sk-quicknav--cols{ margin-bottom: clamp(8px, 1.5vw, 16px) !important; }

/* (Nur falls vorhanden) Abstandshalter unter Quicknav kleiner stellen */
.sk-quicknav-spacer{ height: 40px !important; } /* frei anpassen */


/* Front: keine weiteren Polster mehr auf dem Content */


:root{
  /* Abstand, der den fixen Header „freiräumt“ */
  --header-gap: calc(var(--sk-top-offset, 0px) + var(--header-h, 64px));

  /* Feintuning */
  --after-quicknav-gap: 8px;     /* Abstand UNTER der Quicknav zum Content */
}

/* Container: nur Header freihalten */
.home .site-content{
  padding-top: var(--header-gap);
}

/* Quicknav sitzt im selben Container → Padding neutralisieren + Feingap setzen */
.home .site-content > .sk-quicknav--cols{
  margin-top: calc(-1 * var(--header-gap) + var(--after-quicknav-gap));
  /*margin-top: 100px; */
  z-index: 4;
}

/* Sicherheit: erster Block unter der Quicknav ohne zusätzlichen Top-Margin */
.home .site-content > .sk-quicknav--cols + *{
  margin-top: var(--after-quicknav-gap);
}

/* Einziger Spacer unter der Glasleiste */
:root{
  /* Feintuning hier: positiv = weiter runter, negativ = weiter rauf */
  --intro-gap: -16px;   /* probier -24px, -12px, 0px etc. */
}

.home .site-intro{
  position: relative;
  z-index: 3;
  /* nur Headerhöhe + dein Feintuning, keine extra clamp-Polster mehr */
  margin-top: calc(var(--header-h, 64px) + var(--sk-top-offset, 0px) + var(--intro-gap)) !important;
  height: 0;  /* der Spacer erzeugt nur Abstand, kein eigenes Layout */
}

.home .sk-quicknav--cols{
  margin-top: calc(var(--header-gap) * -1 + var(--after-quicknav-gap));
}

/* Widgets in den Quicknav-Boxen sollen sich benehmen */
.sk-qcol .sk-qwidget img{max-width:100%;height:auto;border-radius:12px;display:block;}
.sk-qcol .sk-qwidget iframe{max-width:100%;}








/* Linke Quicknav-Spalte: Letzter Beitrag soll die Box komplett füllen */
.sk-qcol--lastpost{
  padding: 0;                 /* kein Innenabstand – Inhalt darf bis an den Rand */
  overflow: hidden;           /* saubere Radien/Überläufe */
}

/* Der komplette Inhalt füllt die Box-Höhe */
.sk-qcol--lastpost .sk-lastpost{
  display: grid;
  grid-template-rows: minmax(190px, 1fr) auto;  /* oben Bild flexibel, unten Text */
  height: 100%;
  color: var(--sk-text);
  text-decoration: none;
}

/* Bildbereich: vollflächig, sicherer Fallback-Glow */
.sk-qcol--lastpost .sk-lastpost__media{
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.35)),
    var(--thumb) center/cover no-repeat;
  min-height: 190px;          /* darf wachsen (wegen 1fr in grid) */
}

/* Typo */
.sk-qcol--lastpost .sk-lastpost__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .2px;
}
.sk-qcol--lastpost .sk-lastpost__date{
  margin: 0;
  opacity: .9;
  font-size: .95rem;
  color: #a9b3c2;
}

/* Hover: leichte Anhebung + Rahmenbetonung wie bei den anderen Kacheln */
.sk-qcol--lastpost .sk-lastpost:hover{
  transform: translateY(-1px);
  border-color: rgba(240,196,58,.45);
}

/* Mini-Glass CTA – Look wie Header-CTA, aber kompakter */
.sk-btn--cta{
  /* gleiche Variablen wie Header-CTA, nur dezentere Werte */
  --cta-bg1: rgba(240,196,58,.18);
  --cta-bg2: rgba(240,196,58,.10);
  --cta-brd: rgba(240,196,58,.70);
  --cta-glow: rgba(240,196,58,.28);
  --cta-text: #ffffff;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1rem;            /* kleiner als Header */
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  text-decoration: none !important;
  color: var(--cta-text);
  background: linear-gradient(180deg, var(--cta-bg1), var(--cta-bg2));
  border: 1px solid var(--cta-brd);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow:
    0 10px 26px var(--cta-glow),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.20);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
  overflow: hidden; /* Shine */
}

/* Shine wie im Header-CTA */
.sk-btn--cta::after{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 55%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
}

.sk-btn--cta:hover,
.sk-btn--cta:focus-visible{
  background: linear-gradient(180deg, rgba(240,196,58,.28), rgba(240,196,58,.16));
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 34px rgba(240,196,58,.40),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.22);
  outline: 0;
}
.sk-btn--cta:hover::after{ transform: translateX(120%); }

@media (prefers-reduced-motion: reduce){
  .sk-btn--cta{ transition: none; }
  .sk-btn--cta::after{ display:none; }
}

/* In der Lastpost-Kachel mittig unten ausrichten */
.sk-lastpost__cta{
  margin-top: auto;        /* nach unten drücken */
  align-self: center;      /* horizontal zentrieren */
}







/* ===== Partners (clean) =============================================== */
:root{
  --partner-logo-h: 136px;  /* Höhe der Logo-Zeile (120–160 je nach Geschmack) */
  --partner-logo-pad: 12px; /* Innenabstand, verhindert abgeschnittene Kanten */
}

.sk-partners{
  display: grid;
  gap: clamp(.75rem, 1.8vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Karte: Logo-Zeile (auto aus Container), dann Text, dann CTA */
.sk-partner-card{
  background: rgba(15,20,28,.55);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto; /* Logo | Body | CTA */
  min-height: 260px;
}

/* Logo-Feld: immer gleiche Höhe, Inhalt proportional (contain) */
.sk-partner-logo{
  height: var(--partner-logo-h);
  display: grid;
  place-items: center;
  padding: var(--partner-logo-pad);
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22)),
    radial-gradient(60% 60% at 60% 40%, rgba(240,196,58,.18), transparent 60%);
  overflow: hidden;
}

.sk-partner-logo picture,
.sk-partner-logo img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.sk-partner-logo img{
  object-fit: contain;          /* zeigt immer das komplette Logo */
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

/* Platzhalter, falls kein Logo vorhanden */
.sk-partner-logo__ph{
  width: 80px; height: 56px; border-radius: 10px;
  display:grid; place-items:center; font-weight:800; opacity:.65;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

/* Textblock */
.sk-partner-body{ padding: .8rem .95rem .4rem; }
.sk-partner-title{ margin:0 0 .3rem; font-weight:800; letter-spacing:.2px; }
.sk-partner-text{ margin:0; color:#a9b3c2; opacity:.95; }

/* CTA unten, Button mittig – im Header-Stil, aber nur hier gescoped */
.sk-partner-cta{
  padding: .6rem .95rem .9rem;
  display:flex; justify-content:center;
}

.sk-partner-cta .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.48rem .9rem; border-radius:12px;
  font-weight:800; letter-spacing:.2px; font-size:.95rem;
  color:#fff; text-decoration:none !important;
  background: linear-gradient(180deg, rgba(240,196,58,.22), rgba(240,196,58,.14));
  border:1px solid rgba(240,196,58,.70);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:
    0 10px 28px rgba(240,196,58,.26),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.20);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
}
.sk-partner-cta .cta-btn:hover{
  background: linear-gradient(180deg, rgba(240,196,58,.32), rgba(240,196,58,.22));
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 38px rgba(240,196,58,.36),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
.sk-partner-cta .cta-btn:focus-visible{
  outline: 2px solid var(--sk-gold, #f0c43a);
  outline-offset: 2px;
}


/* === PARTNER-LOGOS – NIE BESCHNEIDEN (PNG & JPG), IMMER VOLL SICHTBAR === */

:root{
  --partner-logo-h: 140px;   /* Höhe der Logo-Zeile (130–160px nach Geschmack) */
  --partner-logo-pad: 14px;  /* Innenabstand, verhindert Rand-Cropping */
}

/* Logo-Zeile fix, Body flexibel, CTA unten */
.sk-partner-card{
  grid-template-rows: var(--partner-logo-h) 1fr auto;
}

/* Logo-Zelle: sauber zentrieren */
.sk-partner-card .sk-partner-logo{
  height: var(--partner-logo-h);
  padding: var(--partner-logo-pad);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* okay – Bild wird gleich nicht geclippt */
}

/* Falls <picture> benutzt: kein eigenes Box-Layout erzwingen */
.sk-partner-card .sk-partner-logo picture{ display: contents; }

/* >>> NUKLEARER RESET NUR IN PARTNER-KARTEN <<< 
   Hebt aggressive globale Regeln wie "height:100%; object-fit:cover" auf */
.sk-partner-card .sk-partner-logo img{
  width: auto !important;          /* NICHT in die Breite zwängen */
  height: auto !important;         /* NICHT in die Höhe zwängen */
  max-width: 100% !important;      /* maximal Box-Breite */
  max-height: 100% !important;     /* maximal Box-Höhe */
  object-fit: contain !important;  /* immer vollständig sichtbar */
  object-position: center !important;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

/* Falls irgendwo "img { height:100% }" o.ä. in Cards gesetzt ist: neutralisieren NUR hier */
.sk-partner-card img{
  height: auto !important;
  object-fit: contain !important;
}






/* NAV-CARDS: CTA nicht global beeinflussen */
.sk-btn--cta,
.sk-btn--cta:hover,
.sk-btn--cta:focus {
  transform: none !important;
  transition-property: color, background-color, box-shadow, filter !important;
}