/* ===========================
 Four2Four – STYLES (REVISED)
 Design-Polish: ruhiger, wertiger Look ohne Bruch
 Corporate Color: MAGENTA bleibt (#D61C8C)
 =========================== */
/* Root-Variablen */
:root {
  /* CORPORATE MAGENTA (Brand) */
  --color-primary: #D61C8C; /* Haupt-Magenta */
  --color-primary-2: #7A0060; /* dunklere Magenta-Schattierung für Verläufe */
  --color-primary-hover: #FF58B9;/* Hover-Variante im Brand */
  --color-accent: #D4AF37;
  /* Layout & FX */
  --max-w: 1200px;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.28);
  --space: clamp(1rem, 2vw, 2.2rem);
  /* === Overlay-Steuerung (leicht beruhigt) === */
  /* Stage/Hero (Startseite) */
  --stage-overlay-tint: .18;
  --stage-overlay-dark: .55; /* etwas mehr Tiefe, aber ohne Härte */
  /* Slider Overlay (Technik etc.) */
  --slider-overlay-top: .05;
  --slider-overlay-mid: .38;
  /* About-Hintergrund Verlauf */
  --about-overlay-left: .42;
  --about-overlay-mid: .28;
  --about-overlay-right: .12;
  /* Hero-Bildhelligkeit (sanft abgedunkelt) */
  --hero-brightness: .74;
}
/* Reset & Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #000;
  color: #eee;
  font: 16px/1.65 system-ui, Segoe UI, Roboto, sans-serif; /* ruhigeres line-height */
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }
a:visited { color: var(--color-primary); }
.container { max-width: var(--max-w); margin: auto; padding: 0 1rem; }
/* Visually hidden (für Tabellen-Captions etc.) */
.visually-hidden {
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
/* Skip-Link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  background:#111; color:#fff; border:2px solid #fff; border-radius:10px;
  padding:.5rem .75rem; z-index:2000;
}
/* Header & Navigation */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(0,0,0,.85);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.nav{ display: flex; align-items: center; gap: 1rem; padding: .6rem 0; }
.brand img{ height: 44px; }
.nav-links{
  margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap;
}
.nav-links a{
  display:inline-flex; align-items:center; padding:.45rem .85rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.25); color:#fff; text-decoration:none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.nav-links a:hover{
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
  transform: none;
  box-shadow: none;
  color: var(--color-primary-hover);
}
.nav-links a:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.nav-links a.active{
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.05);
  background: rgba(0,0,0,.35); color:#fff; font-weight:700;
}
/* === Mobile Navigation (Offcanvas/Overlay) === */
.nav-toggle{
  display:none; margin-left:auto; background:transparent;
  border:1px solid rgba(255,255,255,.22); color:#fff;
  border-radius:10px; padding:.45rem .6rem; cursor:pointer;
}
.nav-toggle:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.nav-toggle__bar{ display:block; width:22px; height:2px; background:#fff; margin:4px 0; border-radius:2px; }
@media (max-width: 960px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-links{
    position: fixed; top:0; right:0; height:100dvh; width:min(85vw, 420px);
    display:flex; flex-direction:column; gap:.35rem; padding:1rem;
    background:rgba(10,10,10,.96); border-left:1px solid rgba(255,255,255,.08);
    transform: translateX(100%); transition: transform .25s ease; z-index:1100;
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ display:block; width:100%; padding:.7rem .9rem; border-radius:12px; }
  .brand{ z-index:1200; }
  /* Backdrop */
  .nav-dim{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1050;
  }
  body.nav-open .nav-dim{ opacity:1; pointer-events:auto; }
  body.nav-open{ overflow:hidden; }
}
/* Hero (generisch) */
.hero{ position: relative; isolation: isolate; }
.hero .bg{
  position: absolute; inset: 0;
  background: url('../img/hero.jpg') center 30%/cover no-repeat;
  filter: brightness(var(--hero-brightness));
  z-index: -2; pointer-events:none;
}
.hero .overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.72)); z-index: -1; pointer-events:none; }
.hero .content{ padding: clamp(3rem, 8vw, 8rem) 0; }
.hero .hero-logo{
  position: absolute; left: 2%; top: 2%;
  width: min(18vw, 220px); opacity: .9;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); z-index: 1; pointer-events:none;
}
/* Typografie / Chips / Buttons */
h1, h2, h3 { letter-spacing: .15px; line-height: 1.22; font-weight: 700; }
.kicker{ letter-spacing: .12em; text-transform: uppercase; opacity: .85; font-weight: 700; }
.lead { color: #d4d4d9; font-weight: 350; }
.pill-list{ display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0; }
.pill{
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: #d7d7d7;
  background: rgba(255,255,255,.05);
}
/* CTA-Buttons – Premium ruhiger */
.cta{
  display:inline-block; margin-top:1rem; padding:.85rem 1.3rem; border-radius:999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
  color:#fff !important; text-decoration:none;
  font-weight:700; letter-spacing:.2px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
  text-shadow: none;
}
.cta:visited{ color:#fff !important; text-decoration:none; }
.cta:hover{ filter: brightness(1.06); color:#fff !important; text-decoration:none; }
.cta:active{ transform: translateY(1px); }
.cta--ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff !important;
  font-weight:700;
  text-shadow: none;
}
/* Bevorzugter hoher Kontrast */
@media (prefers-contrast: more){
  .cta, .cta--ghost{ text-shadow: none; }
}
/* Sections – einheitliches Spacing */
.section{
  padding: calc(var(--space)*2.5) 0;
  background: #0b0b0b;
  border-top: 1px solid rgba(255,255,255,.06);
}
.section.alt{ background: linear-gradient(135deg, #090909, #141414); }
/* Cards */
.cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space)*1.1); }
.card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Table */
.table{
  width: 100%; border-collapse: collapse;
  background: #0e0e0e; border-radius: var(--radius); overflow: hidden;
}
.table th, .table td{
  padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left;
}
.table th{ background: #121212; }
/* Video */
.video{
  position: relative; padding-top: 56.25%;
  background: #000; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video video{ border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.small{ font-size: .92rem; color: #bbb; }
/* Footer */
.site-footer{
  background: #090909;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid{
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem; padding: 2rem 0; row-gap: 2rem;
}
.footer-grid h4{ margin-bottom: .6rem; color: #fff; font-weight: 600; }
.footer-grid a{ color: #d4d4d9; }
.footer-grid a:hover{ color: var(--color-primary-hover); }
/* Responsive Grid-Anpassungen */
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}
/* Galerie & Lightbox */
.gallery-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .gallery-grid{ grid-template-columns: 1fr; } }
.gallery-item{ background: #111; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; }
.gallery-item img{ width: 100%; }
.lb-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 2000; }
.lb-overlay.open{ display: flex; animation: lbFade .18s ease-out; }
@keyframes lbFade { from{ opacity:0 } to{ opacity:1 } }
.lb-content{ max-width: min(92vw, 1400px); max-height: 92vh; position: relative; }
.lb-content img{ width: 100%; height: auto; border-radius: 12px; display:block; }
.lb-caption{ text-align: center; color: #ddd; margin-top: .5rem; }
.lb-close, .lb-prev, .lb-next{
  position: absolute; background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.2); color: #fff;
  border-radius: 8px; padding: .45rem .7rem; cursor: pointer;
}
.lb-close{ top: .6rem; right: .6rem; }
.lb-prev, .lb-next{ top: 50%; transform: translateY(-50%); }
.lb-prev{ left: .6rem; }
.lb-next{ right: .6rem; }
/* Über-uns Hero */
.hero-ueber-uns{ position: relative; background-image: url("../img/banner.png"); background-size: cover; background-position: center right; }
.hero-ueber-uns::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
  rgba(10, 0, 20, var(--about-overlay-left)) 0%,
  rgba(10, 0, 20, var(--about-overlay-mid)) 10%,
  rgba(10, 0, 20, var(--about-overlay-right)) 100%);
  pointer-events:none;
}
.hero-ueber-uns .container{ position: relative; z-index: 1; padding-top: 6rem; padding-bottom: 6rem; }
.hero-ueber-uns h1{ max-width: 780px; margin-bottom: 1rem; }
.hero-ueber-uns .lead{ max-width: 760px; }
/* Mitglieder-Cards */
.cards.members-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.card.member{ background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; }
.card.member .card-body{ padding: 1rem 1rem 1.1rem; }
.card.member h3{ margin: 0 0 .5rem; }
.card.member p{ margin: .3rem 0; }
/* Pill-List nur auf Startseite zentrieren */
body.home .pill-list{ justify-content: center; }
/* ===================== HERO STAGE – SHOW MODE ===================== */
.hero--stage{ position: relative; min-height: 100vh; overflow: hidden; }
.stage-bg{
  position: absolute; inset: 0;
  background:
  radial-gradient(circle at 20% 20%, rgba(214,28,140,var(--stage-overlay-tint)), transparent 40%),
  radial-gradient(circle at 80% 30%, rgba(212,175,55,var(--stage-overlay-tint)), transparent 45%),
  url("../img/hero.jpg") center 30% / cover no-repeat;
  filter: brightness(var(--hero-brightness));
  animation: bgZoom 22s ease-in-out infinite alternate;
  z-index: -3; pointer-events:none;
}
.stage-lights{
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
  rgba(214,28,140, .15),
  rgba(0,0,0,var(--stage-overlay-dark)),
  rgba(122,0,96, .18)
  );
  animation: lightsMove 6s ease-in-out infinite;
  z-index: -2; pointer-events:none;
}
.hero--stage .hero-logo{
  position: absolute; top: 2rem; left: 2rem; width: min(100px, 30vw);
  height: auto; opacity: .88;
  filter: drop-shadow(0 12px 35px rgba(0,0,0,.85)); z-index: 1; pointer-events:none;
}
.stage-content{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.stage-in{ opacity: 0; transform: translateY(30px); animation: stageIn 1s cubic-bezier(.2,.8,.2,1) forwards; }
.delay-1{ animation-delay: .3s; }
.delay-2{ animation-delay: .6s; }
.delay-3{ animation-delay: .9s; }
.delay-4{ animation-delay: 1.2s; }
.stage-actions{ display: flex; gap: 1rem; margin-top: 1.5rem; }
.cta--pulse{ animation: pulse 2.4s ease-in-out infinite; }
@keyframes stageIn{ to{ opacity: 1; transform: translateY(0); } }
@keyframes bgZoom{ from{ transform: scale(1); } to{ transform: scale(1.08); } }
@keyframes lightsMove{ 0%{ opacity: .58; } 50%{ opacity: .78; } 100%{ opacity: .58; } }
@media (max-width: 700px){
  .stage-content{ text-align: center; }
  .stage-actions{ justify-content: center; flex-wrap: wrap; }
}
/* ===================== HERO SLIDER (Technik) – Overlay ruhiger ===================== */
.hero--slider{
  position: relative; isolation: isolate;
  min-height: clamp(60vh, 70vh, 84vh);
  display: grid; align-items: end;
  background: #000; overflow: hidden;
}
.hero--slider .hero__content{ position: relative; z-index: 2; padding: clamp(2rem, 6vw, 5rem) 0 2rem; }
.hero--slider::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,var(--slider-overlay-top)) 0%,
    rgba(0,0,0,var(--slider-overlay-mid)) 70%,
    rgba(0,0,0,.82) 100%
  );
  z-index: 1; pointer-events:none;
}
.slider{ position: absolute; inset: 0; z-index: 0; }
.slides{ position: relative; height: 100%; }
.slide{
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .5s ease; will-change: opacity;
  display: grid; place-items: stretch; background: #000;
}
.slide.is-active{ opacity: 1; }
.slide img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  filter: brightness(.80);
}
.slide figcaption{
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  color: #eee; font-size: .95rem;
  padding: .4rem .6rem; border-radius: 8px;
  z-index: 2; pointer-events:none;
}
.slider-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 10px;
  padding: .45rem .7rem; cursor: pointer;
  z-index: 20; pointer-events:auto;
}
.slider-btn:hover{ border-color: rgba(255,255,255,.45); background: rgba(0,0,0,.28); }
.slider-btn.prev{ left: .75rem; }
.slider-btn.next{ right: .75rem; }
.slider-dots{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: .85rem; z-index: 15; display: flex; gap: .35rem;
  pointer-events:auto;
}
.dot{ width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.25); cursor: pointer; }
.dot.is-active{ background: var(--color-primary); border-color: rgba(255,255,255,.55); }
@media (max-width: 700px){
  .slider-btn{ padding: .6rem .8rem; }
  .slide figcaption{ left: .75rem; right: .75rem; bottom: .75rem; }
}
/* Form Selects (lesbar) */
select{ background:#0e0e0e; color:#eee; border:1px solid rgba(255,255,255,.18); border-radius: var(--radius); }
select option{ background:#0e0e0e; color:#eee; }
select:focus{ outline:2px solid var(--color-primary); outline-offset:2px; }
/* Subnavigation als Pill Chips */
.subnav{ background:#0b0b0b; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.subnav .container{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.75rem 1rem; }
.subnav a{
  display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .85rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.25); color:#fff; text-decoration:none;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.subnav a:hover{
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
  color: var(--color-primary-hover);
}
.subnav a:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.subnav a.active{
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.05);
  background: rgba(0,0,0,.35); color:#fff; font-weight:700; position: relative;
}
.subnav a.active::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:-6px; height:2px; background:var(--color-primary); opacity:.7; border-radius:2px;
}
@media (max-width: 480px){
  .subnav .container{ gap:.6rem; }
  .subnav a{ padding:.55rem 1rem; }
}
/* Feature-Grid & -Cards */
.feature-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space)*1.1); }
@media (max-width: 1024px){ .feature-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .feature-grid{ grid-template-columns: 1fr; } }
.feature-card{
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; padding: 1.5rem 1.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.02);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.feature-card:hover{
  border-color: rgba(244, 63, 94, 0.6);
  box-shadow: 0 6px 20px rgba(0,0,0,0.38), 0 0 0 1px rgba(244, 63, 94, 0.22);
  transform: translateY(-2px);
}
.feature-card h3{ margin: .25rem 0 .75rem; font-weight: 700; }
.feature-card p{ margin: 0 0 .75rem; color: #e5e7eb; line-height: 1.6; }
.feature-icon{ margin-bottom: .5rem; }
.feature-icon .icon{ width: 28px; height: 28px; display: inline-block; color: #f43f5e; }
.feature-link{ color: #f43f5e; font-weight: 600; text-decoration: none; }
.feature-link:hover{ text-decoration: underline; }
/* Booking – Pakete & Formular */
.package-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space)*1.1); margin-top:1rem; }
@media (max-width: 1024px){ .package-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .package-grid{ grid-template-columns: 1fr; } }
.package-card{
  background:#111; border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow);
}
.package-card h3{ margin:.25rem 0 .5rem; }
.package-card p{ margin:0 0 .6rem; color:#e5e7eb; }
.package-icon{ margin-bottom:.35rem; }
.package-icon .icon{ width:34px; height:34px; display:inline-block; color: var(--color-primary); }
.package-card .pill-list{ margin:.5rem 0 .4rem; }
.package-actions{ margin-top:.4rem; }
.package-card ul{ list-style: none; padding-left: 0; margin-left: 0; }
/* Booking/Kontakt Formulare */
.booking-form .form-grid,
.contact-form .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.booking-form .form-grid .full,
.contact-form .form-grid .full{ grid-column: 1 / -1; }
.booking-form input, .booking-form textarea, .booking-form select,
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; background:#0e0e0e; color:#eee; border:1px solid rgba(255,255,255,.18);
  border-radius: var(--radius); padding:.65rem .75rem; font:inherit;
}
.booking-form textarea, .contact-form textarea{ resize: vertical; }
.booking-form input:focus, .booking-form textarea:focus, .booking-form select:focus,
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
  outline:2px solid var(--color-primary); outline-offset:2px;
}
@media (max-width: 640px){
  .booking-form .form-grid, .contact-form .form-grid{ grid-template-columns: 1fr; }
}
/* Kontakt – Map */
.map-embed{
  position: relative; width: 100%; padding-top: 56.25%;
  background: #0e0e0e; border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.map-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Layout-Utilities */
.container.grid.grid--cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 1024px){ .container.grid.grid--cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .container.grid.grid--cards{ grid-template-columns: 1fr; } }
.container.grid.grid--three{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1024px){ .container.grid.grid--three{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .container.grid.grid--three{ grid-template-columns: 1fr; } }
.panel{ background: #111; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); }
/* Udo beginnt eine neue Zeile */
.cards.members-cards > .member.member--row2-start{ grid-column-start: 1; }
/* ===== Motion Preferences: Animationen reduzieren ===== */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .stage-in,
  .cta--pulse,
  .stage-bg,
  .stage-lights{
    animation: none !important;
    transition: none !important;
  }
}
/* === FIX: Overlay-Menü "Full Overlay" (bei Bedarf) === */
@media (max-width: 960px) {
  .site-header .nav { position: relative; z-index: 1001; }
  .nav-toggle { position: relative; z-index: 1002; }
  /* Vollbild-Overlay statt Seiten-Drawer (optional) */
  #primary-nav.nav-links {
    position: fixed !important;
    inset: 0 !important; left: 0 !important; right: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    border-left: none !important;
    transform: none !important;
    opacity: 0; pointer-events: none;
    display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: .25rem;
    background: rgba(0,0,0,.96);
    z-index: 1102; transition: opacity .2s ease;
  }
  body.nav-open #primary-nav.nav-links { opacity: 1; pointer-events: auto; }
  #primary-nav.nav-links a {
    display: block; width: 100%; max-width: 540px; text-align: center;
    font-size: clamp(1.15rem, 3.8vw, 1.4rem); line-height: 1.25;
    padding: .9rem 1rem; border-radius: 12px; color: #fff; text-decoration: none;
  }
  #primary-nav.nav-links a:hover { background: rgba(255,255,255,.06); }
  #primary-nav.nav-links a:focus-visible { outline: 2px solid var(--color-primary, #D61C8C); outline-offset: 3px; }
  .nav-dim { z-index: 1050 !important; }
}

/* ===== Social Links (NEU) ===== */
.social {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.social__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
  color: #fff;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.social__link:hover {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
  color: var(--color-primary-hover);
}
.social__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.social__link .icon {
  width: 22px;
  height: 22px;
  color: currentColor;
}
/* Header-spezifisch: rechts neben Navigation */
.social--header {
  margin-left: .5rem;
}
@media (max-width: 960px) {
  /* Im mobilen Vollbild-Menü mittig und größer */
  .social--header {
    width: 100%;
    justify-content: center;
    margin-top: .25rem;
  }
  .social__link {
    padding: .6rem .85rem;
  }
  .social__link .icon {
    width: 24px;
    height: 24px;
  }
}
/* Footer-spezifisch */
.social--footer {
  margin: .25rem 0 .75rem;
}
``