/*
 * Responsive Breakpoints (used in @media queries):
 * 360px  – Very small screens: reduced container padding, hero nav, newsletter input
 * 520px  – Testimonials: 1 column
 * 640px  – Blog list view: stack; Abschluss CTA: reduced padding
 * 768px  – Header: burger menu; Footer: 1 column
 * 920px  – Hero/Hero-Slider: stack; Magazine: horizontal scroll; Testimonials: 2 cols; Mission values: 1 col
 * 980px  – Grid: 2 columns
 * 1024px – Footer: 3 columns
 * 1100px – Trainingsablauf (4 steps): 2 columns
 */
:root{
  /* --- Athletenschmiede-inspiriert: Dunkel, Weiß, Gold --- */
  --bg: #1a1a1a;           /* Dunkel, industriell */
  --surface: #242424;      /* Karten, Panels */
  --surface-2: #2e2e2e;    /* Hover, Akzente */

  --white: #ffffff;
  --text: #f5f5f5;        /* Hell auf dunkel */
  --text2: rgba(255,255,255,.75);
  --text3: rgba(255,255,255,.55);

  --gold: #C6A75E;         /* Weiß-Gold wie Athletenschmiede */
  --gold-light: #D4BC7A;
  --gold-dark: #9C824A;

  --desert: #C2B280;
  --desert2: #B8AA79;
  --ink: #111417;

  --usNavy: #1F3A5F;
  --usRed: #B22234;

  /* --- Neue Farbpalette (aus Bild) --- */
  --olive-camo: #4B5B4A;       /* Camo-Basis, natürlich, sportlich */
  --olive-grey: #697661;       /* Natürliche Akzente */
  --warm-brown: #6E6455;       /* Erdig, vertrauensvoll */
  --warm-tan: #A09687;         /* Sand/Stein, Hintergründe */
  --sky-blue: #3D89BF;         /* Trust, CTAs, Freiheit */
  --sky-blue-light: #4D94C4;   /* Hover/Highlights */
  --charcoal: #282828;         /* Text, seriös */
  --rust: #784632;             /* Dezenter warmer Akzent */
  --teal: #46AAB4;             /* Paradiesvogel-Akzent */
  --cool-grey: #BEBEBE;
  --cool-grey-warm: #A5AAA0;

  --radius: 6px;
  --border: 1px solid rgba(255,255,255,.12);
  --shadow: 0 8px 32px rgba(0,0,0,.4);

  --header-bg: rgba(36,36,36,.9);
  --link-border: rgba(255,255,255,.15);
  --link-hover-bg: rgba(255,255,255,.08);
  --btn-border: rgba(255,255,255,.2);
  --btn-bg: rgba(255,255,255,.1);
  --bg-grid: rgba(255,255,255,.04);
  --bg-glow: rgba(255,255,255,.03);
  --swatch-bg: rgba(0,0,0,.2);
  --swatch-border: rgba(255,255,255,.12);
  --foot-border: rgba(255,255,255,.12);
  --dot-bg: rgba(255,255,255,.3);
  --dot-blue: rgba(255,255,255,.5);
  --dot-red: rgba(198,167,94,.8);
  --chip-border: rgba(255,255,255,.15);
  --chip-bg: rgba(255,255,255,.08);
  --tile-border: rgba(255,255,255,.12);
  --tile-bg: rgba(255,255,255,.06);
  --dna-bar: rgba(255,255,255,.2);
  --dna-bar-blue: rgba(255,255,255,.4);
  --monogram-bg: linear-gradient(135deg, var(--surface-2), var(--surface));
  --btn-primary-bg: var(--sky-blue);
  --btn-primary-hover: var(--sky-blue-light);
  --btn-primary-color: #fff;
  --btn-primary-trim: var(--sky-blue-light);
  --btn-primary-border: rgba(61,137,191,.5);
  --btn-ghost-border: rgba(105,118,97,.4);
  --btn-ghost-hover-bg: rgba(75,91,74,.15);

  --container: 1120px;
  --h1: clamp(36px, 5vw, 72px);
  --h2: clamp(20px, 2.2vw, 32px);

  --blog-hero-bg: linear-gradient(135deg, var(--surface), var(--surface-2));
  --blog-article-hero-bg: #1a1a1a;
}

/* Light Mode */
[data-theme="light"]{
  --blog-hero-bg: linear-gradient(135deg, #fcfbf8 0%, #f7f6f4 100%);
  --blog-article-hero-bg: #e8e4dc;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #F0EBE0;

  --text: #1a1a1a;
  --text2: rgba(26,26,26,.75);
  --text3: rgba(26,26,26,.55);

  --border: 1px solid rgba(26,26,26,.12);
  --shadow: 0 8px 32px rgba(0,0,0,.08);

  --header-bg: #ffffff;
  --link-border: rgba(26,26,26,.15);
  --link-hover-bg: rgba(26,26,26,.06);
  --btn-border: rgba(26,26,26,.2);
  --btn-bg: rgba(26,26,26,.06);
  --bg-grid: transparent;
  --bg-glow: transparent;
  --swatch-bg: rgba(255,255,255,.6);
  --swatch-border: rgba(26,26,26,.12);
  --foot-border: rgba(26,26,26,.12);
  --dot-bg: rgba(26,26,26,.25);
  --dot-blue: rgba(65,90,119,.5);
  --dot-red: rgba(198,167,94,.8);
  --chip-border: rgba(26,26,26,.14);
  --chip-bg: rgba(26,26,26,.06);
  --tile-border: rgba(26,26,26,.12);
  --tile-bg: rgba(26,26,26,.04);
  --dna-bar: rgba(26,26,26,.2);
  --dna-bar-blue: rgba(65,90,119,.4);
  --monogram-bg: linear-gradient(135deg, rgba(47,62,70,.15), rgba(65,90,119,.1));
  --btn-primary-bg: var(--sky-blue);
  --btn-primary-hover: var(--sky-blue-light);
  --btn-primary-color: #fff;
  --btn-primary-trim: var(--sky-blue-light);
  --btn-primary-border: rgba(61,137,191,.5);
  --btn-ghost-border: rgba(105,118,97,.4);
  --btn-ghost-hover-bg: rgba(75,91,74,.15);
}

*{ box-sizing: border-box; }
html{
  transition: background-color .25s ease, color .25s ease;
  scrollbar-gutter: stable;
}
html,body{ height: 100%; }
body{
  margin:0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  transition: background-color .25s ease, color .25s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Modern background: "topo grid" meets calm desert */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(198,167,94,.06), transparent 65%),
    radial-gradient(800px 500px at 85% 15%, var(--bg-glow), transparent 55%),
    var(--bg);
}
[data-theme="light"] .bg{
  background: var(--bg);
}
.bg:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.08;
  background:
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
[data-theme="light"] .bg:before{
  opacity: 0;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 18px 40px;
}
.container--wide{
  max-width: 1320px;
}
.container:has(.grid){
  padding-top: 0;
}

/* --- Header (new approach): slim, modern, utility-like --- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 240px;
}
.header-logo{
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
}
[data-theme="dark"] .header-logo{
  filter: invert(1);
}
[data-theme="light"] .header-logo{
  filter: none;
}
.brand .name{
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text);
}
.brand .sub{
  display:block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text3);
  margin-top: 2px;
}
.nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items:center;
}
.nav-links{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Nav link: modern hover + active */
.nav-link{
  font-size: 15px;
  font-weight: 600;
  font-family: Oswald, sans-serif;
  color: var(--text);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.nav-link:hover{
  background: var(--link-hover-bg);
  color: var(--text);
}
.nav-link.active{
  background: var(--link-hover-bg);
  color: var(--text);
}

/* Lang switcher – Flaggen */
.lang-switcher{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang-switcher .lang-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--radius);
  transition: opacity .2s ease, transform .15s ease;
}
.lang-switcher .lang-link:hover{
  opacity: 1;
  transform: scale(1.1);
}
.lang-switcher .lang-link:not(.lang-active){
  opacity: .6;
}
.lang-switcher .lang-link.lang-active{
  opacity: 1;
  box-shadow: 0 0 0 2px var(--sky-blue);
}
.lang-flag{
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}
.lang-flag-de{
  background: linear-gradient(to bottom, #000 0 33.33%, #D00 33.33% 66.66%, #FFCE00 66.66% 100%);
}
.lang-flag-us{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect fill='%233C3B6E' width='12' height='20'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='2' cy='2' r='.8'/%3E%3Ccircle cx='5' cy='2' r='.8'/%3E%3Ccircle cx='8' cy='2' r='.8'/%3E%3Ccircle cx='11' cy='2' r='.8'/%3E%3Ccircle cx='3.5' cy='4' r='.8'/%3E%3Ccircle cx='6.5' cy='4' r='.8'/%3E%3Ccircle cx='9.5' cy='4' r='.8'/%3E%3C/g%3E%3Crect fill='%23B22234' x='12' width='18' height='1.54'/%3E%3Crect fill='%23fff' x='12' y='1.54' width='18' height='1.54'/%3E%3Crect fill='%23B22234' x='12' y='3.08' width='18' height='1.54'/%3E%3Crect fill='%23fff' x='12' y='4.62' width='18' height='1.54'/%3E%3Crect fill='%23B22234' x='12' y='6.16' width='18' height='1.54'/%3E%3Crect fill='%23fff' x='12' y='7.7' width='18' height='1.54'/%3E%3Crect fill='%23B22234' x='12' y='9.24' width='18' height='1.54'/%3E%3Crect fill='%23fff' x='12' y='10.78' width='18' height='1.54'/%3E%3Crect fill='%23B22234' x='12' y='12.32' width='18' height='1.54'/%3E%3Crect fill='%23fff' x='12' y='13.86' width='18' height='1.54'/%3E%3Crect fill='%23B22234' x='12' y='15.4' width='18' height='1.54'/%3E%3Crect fill='%23fff' x='12' y='16.94' width='18' height='1.54'/%3E%3Crect fill='%23B22234' x='12' y='18.46' width='18' height='1.54'/%3E%3C/svg%3E") center/cover;
}

.link{
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--link-border);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  text-decoration:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.link:hover{
  background: var(--link-hover-bg);
  border-color: rgba(198,167,94,.35);
  color: var(--text);
}

/* --- Buttons: modern "action" without glam --- */
.btn{
  position: relative;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--btn-ghost-border);
  background: var(--btn-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  transition: background .15s ease, border-color .15s ease, transform .10s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover{
  background: var(--btn-ghost-hover-bg);
  border-color: var(--olive-grey);
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-color);
}
.btn-primary:hover{
  background: var(--btn-primary-hover);
  border-color: var(--sky-blue-light);
}

.arrow{
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 2px;
}

/* --- Hero (new approach): asymmetric, modern, "editorial-tech" --- */
.hero{
  margin-top: 18px;
  border-radius: var(--radius);
  border: var(--border);
  background:
    linear-gradient(135deg, var(--surface), var(--surface-2)),
    radial-gradient(800px 400px at 20% 0%, rgba(198,167,94,.08), transparent 60%);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  padding: 26px;
  align-items: stretch;
}
@media (max-width: 920px){
  .hero-inner{ grid-template-columns: 1fr; padding: 18px; }
}

.hero-left{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

h1{
  margin: 0;
  font-size: var(--h1);
  font-weight: 500; /* medium, not bold */
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text);
}

.lead{
  margin: 12px 0 0;
  font-size: 16.5px;
  font-weight: 400;
  color: var(--text2);
  max-width: 62ch;
}

/* Micro-accent: calm "flag DNA" bar */
.dna{
  display:flex;
  gap: 8px;
  align-items:center;
  margin-top: 12px;
}
.dna .bar{
  height: 2px;
  flex: 1;
  background: var(--dna-bar);
}
.dna .bar.blue{ background: var(--dna-bar-blue); }
.dna .bar.red{ background: rgba(198,167,94,.7); }
.dna .bar.desert{ background: var(--gold); }

.hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Right "module": modern tiles like the screenshot vibe */
/* Hero image container */
.hero-image{
  position: relative;
  min-height: 280px;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-image img{
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
}
.hero-inner.has-image{
  grid-template-columns: 1fr 1.1fr .9fr;
}
@media (max-width: 920px){
  .hero-inner.has-image{ grid-template-columns: 1fr; }
}

/* --- Hero Section (subpages: full-width, text left, image right) --- */
.hero-section{
  width: 100%;
  min-height: 60vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  margin: 0;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
}
.hero-section-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px 48px 56px;
}
.hero-section-content h1{
  margin: 0 0 16px;
  font-size: var(--h1);
  font-weight: 600;
}
.hero-section-content .lead{
  margin: 0 0 24px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
}
.hero-section-content .hero-actions{
  margin-top: 0;
}
.hero-section-image{
  position: relative;
  min-height: 280px;
  overflow: hidden;
}
.hero-section-image img{
  width: 100%;
  height: 100%;
  min-height: 60vh;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 920px){
  .hero-section{
    display: flex;
    flex-direction: column;
    min-height: auto;
    overflow: hidden;
  }
  .hero-section-content{
    padding: 40px 24px 32px;
    order: 0;
  }
  .hero-section-image{
    order: -1;
    position: relative;
    width: 100%;
    min-height: 45vh;
  }
  .hero-section-image img{
    min-height: 45vh;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Hero Slider – Bild und Text synchron, aber getrennt */
.hero-slider{
  width: 100%;
  min-height: 60vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  position: relative;
}
.hero-slider-content-track{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ACADB1;
  border-right: var(--border);
  min-height: 60vh;
  position: relative;
}
.hero-slider[data-active-slide="2"] .hero-slider-content-track,
.hero-slider[data-active-slide="3"] .hero-slider-content-track,
.hero-slider[data-active-slide="4"] .hero-slider-content-track{
  border-right-color: #1a1a1a;
}
/* Blur-Kreise: weiche Scheinwerfer-Spots wandern über die linke Fläche (nur Slide 1) */
.hero-slider[data-active-slide="1"] .hero-slider-content-track::before,
.hero-slider[data-active-slide="1"] .hero-slider-content-track::after{
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  filter: blur(80px);
  pointer-events: none;
}
.hero-slider[data-active-slide="1"] .hero-slider-content-track::before{
  width: 280px;
  height: 280px;
  animation: hero-blur-glow-1 12s ease-in-out infinite;
}
.hero-slider[data-active-slide="1"] .hero-slider-content-track::after{
  width: 180px;
  height: 180px;
  animation: hero-blur-glow-2 10s ease-in-out infinite 2s;
}
@keyframes hero-blur-glow-1 {
  0%, 100% { transform: translate(15%, 30%); }
  25% { transform: translate(70%, 20%); }
  50% { transform: translate(55%, 75%); }
  75% { transform: translate(20%, 55%); }
}
@keyframes hero-blur-glow-2 {
  0%, 100% { transform: translate(60%, 60%); }
  33% { transform: translate(25%, 25%); }
  66% { transform: translate(70%, 45%); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slider[data-active-slide="1"] .hero-slider-content-track::before,
  .hero-slider[data-active-slide="1"] .hero-slider-content-track::after{
    animation: none;
  }
}
.hero-slider-content-inner{
  flex: 1;
  display: flex;
  width: 400%;
  min-height: 60vh;
  overflow: hidden;
  transition: transform 0.5s ease;
  position: relative;
  z-index: 1;
}
.hero-slider-content-slide{
  width: 25%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 56px;
  min-height: 100%;
}
/* Ab Slide 2: Hintergrundbild hinter dem Text – bis zur unteren Sliderkante */
.hero-slider-content-slide:nth-child(n+2){
  background-image: url("../img/home-slider/left-slider-personaltrainer-neuss-duesseldorf.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.hero-slider-content-slide:nth-child(n+2) h1,
.hero-slider-content-slide:nth-child(n+2) h2,
.hero-slider-content-slide:nth-child(n+2) .lead {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.hero-slider-images-track{
  overflow: hidden;
  min-height: 60vh;
  position: relative;
}
.hero-slider-images-inner{
  display: flex;
  width: 400%;
  min-height: 60vh;
  flex-shrink: 0;
  transition: transform 0.5s ease;
}
.hero-slider-images-slide{
  width: 25%;
  flex-shrink: 0;
  min-height: 60vh;
  display: flex;
  overflow: hidden;
}
.hero-slider-images-slide img{
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  flex: 1;
  align-self: stretch;
}
.hero-slider-content-slide h1,
.hero-slider-content-slide h2{
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.hero-slider-content-slide .lead{
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.5;
  margin: 0 0 32px;
}
.hero-slider-content-slide .hero-actions .btn{
  padding: 14px 20px;
  font-size: 15px;
}
.hero-slider-badges{
  display: none; /* vorübergehend ausgeblendet */
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 20px 32px 28px;
  width: fit-content;
  max-width: calc(100% - 48px);
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  z-index: 5;
}
[data-theme="dark"] .hero-slider-badges{
  box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.2);
}
.hero-slider-badges a{
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.hero-slider-badges a:hover{
  opacity: 1;
}
.hero-slider-badges img{
  height: 52px;
  width: auto;
  object-fit: contain;
}
.hero-slider-google-badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.hero-slider-google-badge .stars{
  font-size: 20px;
  color: #fbbc04;
}
.hero-slider-nav{
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  padding: 12px 20px;
  background: rgba(255,255,255,.95);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
[data-theme="dark"] .hero-slider-nav{
  background: rgba(255,255,255,.12);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
[data-theme="light"] .hero-slider-nav{
  background: rgba(0,0,0,.12);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
[data-theme="light"] .hero-slider-nav .hero-slider-dot{
  background: rgba(255,255,255,.4);
}
[data-theme="light"] .hero-slider-nav .hero-slider-dot.active{
  background: var(--sky-blue);
}
[data-theme="light"] .hero-slider-nav .hero-slider-arrow{
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
  color: #fff;
}
[data-theme="light"] .hero-slider-nav .hero-slider-arrow:hover{
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.4);
}
.hero-slider-dots{
  display: flex;
  gap: 8px;
}
.hero-slider-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot-bg);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}
.hero-slider-dot.active{
  background: var(--sky-blue);
}
.hero-slider-arrow{
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--btn-bg);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hero-slider-arrow:hover{
  background: var(--link-hover-bg);
  border-color: rgba(198,167,94,.35);
}
@media (max-width: 920px){
  .hero-slider{
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: auto;
    position: relative;
  }
  .hero-slider-content-slide{
    padding: 16px 32px 120px;
    justify-content: flex-start;
  }
  .hero-slider-content-inner{
    min-height: auto;
  }
  .hero-slider-content-track{
    order: 0;
    min-height: auto;
    border-right: none;
    border-bottom: none;
    background: #ACADB1;
  }
  .hero-slider-images-track{
    order: -1;
    position: relative;
    width: 100%;
    min-height: auto;
  }
  .hero-slider-badges{
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
    padding: 18px 20px 24px;
    gap: 18px;
    flex-wrap: wrap;
  }
  .hero-slider-badges img{
    height: 44px;
  }
  .hero-slider-google-badge{
    font-size: 16px;
  }
  .hero-slider-google-badge .stars{
    font-size: 18px;
  }
  .hero-slider-images-slide{
    min-height: auto;
    aspect-ratio: 4/3;
  }
  .hero-slider-images-slide img{
    min-height: auto;
    height: 100%;
  }
  .hero-slider-images-inner{
    min-height: auto;
  }
  /* Mobile: Hintergrundbild der Content-Slides 2–4 entfernen, stattdessen Bild aus rechter Spalte unten */
  .hero-slider-content-slide:nth-child(n+2){
    background-image: none;
    background-color: var(--surface);
  }
  .hero-slider-content-slide:nth-child(n+2) h1,
  .hero-slider-content-slide:nth-child(n+2) h2,
  .hero-slider-content-slide:nth-child(n+2) .lead {
    color: var(--text);
    text-shadow: none;
  }
}

/* Mobile: CTAs als Block (volle Breite) */
@media (max-width: 920px){
  .hero-actions .btn,
  .hero-actions a.btn,
  .hero-actions .btn-primary{
    display: block;
    width: 100%;
    text-align: center;
  }
}
/* Mobile: weißen Strich/Caret in CTAs entfernen */
@media (max-width: 920px){
  .btn, .btn-primary, a.btn, .nav-cta{
    caret-color: transparent;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Trainingsablauf-Section – Screenshot-Stil: große Zahlen, rote Titel */
/* Dark mode (default) */
.trainingsablauf-section{
  width: 100%;
  padding: 32px 24px 32px;
  background: #000;
  text-align: center;
}
.trainingsablauf-section h2{
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  color: #fff;
}
.trainingsablauf-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  text-align: left;
}
/* 4 Schritte nebeneinander, über volle Breite verteilt */
.trainingsablauf-steps--four{
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: min(1520px, calc(100vw - 48px));
}
.trainingsablauf-step{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}
.trainingsablauf-num{
  flex-shrink: 0;
  display: block;
  font-size: clamp(72px, 10vw, 120px);
  font-weight: 700;
  font-family: Oswald, sans-serif;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.4);
  transition: -webkit-text-stroke-color .2s ease;
}
.trainingsablauf-step:hover .trainingsablauf-num{
  -webkit-text-stroke-color: var(--usRed);
}
.trainingsablauf-text{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.trainingsablauf-step h3{
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  font-family: Oswald, sans-serif;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--usRed);
}
.trainingsablauf-optional{
  color: var(--sky-blue);
}
.trainingsablauf-step--optional:hover .trainingsablauf-num{
  -webkit-text-stroke-color: var(--sky-blue);
}
.trainingsablauf-step p{
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,.75);
  margin: 0;
  line-height: 1.5;
}

/* Light mode */
[data-theme="light"] .trainingsablauf-section{
  background: var(--surface-2);
  border-top: var(--border);
  border-bottom: var(--border);
}
[data-theme="light"] .trainingsablauf-section h2{
  color: var(--text);
}
[data-theme="light"] .trainingsablauf-num{
  -webkit-text-stroke: 2px rgba(26,26,26,.25);
}
[data-theme="light"] .trainingsablauf-step:hover .trainingsablauf-num{
  -webkit-text-stroke-color: var(--usRed);
}
[data-theme="light"] .trainingsablauf-step--optional:hover .trainingsablauf-num{
  -webkit-text-stroke-color: var(--sky-blue);
}
[data-theme="light"] .trainingsablauf-step p{
  color: var(--text2);
}
@media (max-width: 920px){
  .trainingsablauf-section{
    padding: 32px 20px 32px;
  }
  .trainingsablauf-steps{
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: left;
  }
  .trainingsablauf-steps--four{
    grid-template-columns: 1fr;
  }
  .trainingsablauf-step{
    flex-direction: row;
    align-items: flex-start;
  }
  .trainingsablauf-num{
    -webkit-text-stroke-width: 1.5px;
    font-size: clamp(56px, 15vw, 80px);
  }
}

/* --- Mission Statement Section (Meine Mission page) --- */
.mission-statement-section{
  padding: 48px 0 56px;
}
.mission-statement-section h2{
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 600;
  font-family: Oswald, sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--text);
}
.mission-lead{
  font-size: 17px;
  line-height: 1.65;
  color: var(--text2);
  margin: 0 0 40px;
  max-width: 65ch;
}
.mission-werte{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}
.mission-werte-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--surface);
  transition: border-color .2s ease, background .2s ease;
}
.mission-werte-item:hover{
  border-color: rgba(61,137,191,.35);
  background: var(--surface-2);
}
.mission-werte-item--icon-left{
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
.mission-werte-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mission-werte-body h3{
  margin: 0;
}
.mission-werte-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  font-size: 18px;
  font-weight: 700;
  font-family: Oswald, sans-serif;
  flex-shrink: 0;
}
.mission-werte-icon svg{
  width: 22px;
  height: 22px;
}
.mission-werte-item h3{
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  font-family: Oswald, sans-serif;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.mission-werte-item p{
  font-size: 15px;
  line-height: 1.5;
  color: var(--text2);
  margin: 0;
}
@media (max-width: 920px){
  .mission-werte{
    grid-template-columns: 1fr;
  }
}

/* --- Online Coaching Programme / Zielgruppen (shared) --- */
.online-coaching-program,
.zielgruppen-section{
  padding: 48px 0 56px;
}
.online-coaching-program h2,
.zielgruppen-section h2{
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 600;
  font-family: Oswald, sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--text);
}
.program-lead{
  font-size: 17px;
  line-height: 1.65;
  color: var(--text2);
  margin: 0 0 40px;
  max-width: 65ch;
}

/* --- PT Intro (copy under hero) --- */
.pt-intro{
  padding: 40px 0 32px;
}
.pt-intro-text{
  font-size: 17px;
  line-height: 1.65;
  color: var(--text2);
  margin: 0 0 16px;
  max-width: 65ch;
}
.pt-intro-text:last-child{
  margin-bottom: 0;
}
.pt-intro-text--lead{
  font-size: 20px;
  line-height: 1.6;
}
.pt-intro-text--left{
  text-align: left;
  margin-left: 0;
}
.pt-intro-group{
  break-inside: avoid;
}
@media (min-width: 768px){
  .pt-intro--columns .pt-intro-group--right{
    break-before: column;
  }
}
.pt-intro--columns{
  max-width: 100%;
}
@media (min-width: 768px){
  .pt-intro--columns{
    columns: 2;
    column-gap: 40px;
  }
  .pt-intro--columns .pt-intro-text{
    max-width: none;
    break-inside: avoid;
  }
}

/* --- PT Intro New (hook links, steps rechts) --- */
.pt-intro--new{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 100%;
}
.pt-intro-left{
  max-width: 65ch;
}
.pt-intro-right{
  max-width: 40ch;
}
@media (max-width: 768px){
  .pt-intro--new{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pt-intro-right{
    max-width: none;
  }
}
.pt-intro-title{
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 600;
  font-family: Oswald, sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--text);
}
.pt-intro-text--punch{
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.pt-intro-divider{
  border: none;
  height: 1px;
  background: var(--border);
  margin: 0 0 24px;
}
.pt-intro-section{
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pt-intro-steps{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: pt-step;
}
.pt-intro-step{
  counter-increment: pt-step;
  margin-bottom: 24px;
  padding-left: 0;
}
.pt-intro-step:last-child{
  margin-bottom: 0;
}
.pt-intro-step strong{
  display: block;
  font-size: 17px;
  margin-bottom: 10px;
  color: var(--text);
}
.pt-intro-step strong::before{
  content: counter(pt-step) ". ";
}
.pt-intro-step ul{
  list-style: none;
  padding: 0;
  margin: 0 0 0 1.5em;
}
.pt-intro-step ul li{
  position: relative;
  padding-left: 1em;
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--text2);
}
.pt-intro-step ul li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text3);
}

.zielgruppen-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}
.zielgruppen-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--surface);
  transition: border-color .2s ease, background .2s ease;
}
.zielgruppen-card--with-icon,
.zielgruppen-card--highlight{
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
.zielgruppen-card-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zielgruppen-card:hover{
  border-color: rgba(61,137,191,.35);
  background: var(--surface-2);
}
.zielgruppen-card-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  flex-shrink: 0;
}
.zielgruppen-card-icon svg{
  width: 22px;
  height: 22px;
}
.zielgruppen-card h3{
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  font-family: Oswald, sans-serif;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.zielgruppen-card-body h3{
  margin: 0;
}
.zielgruppen-card p{
  font-size: 15px;
  line-height: 1.5;
  color: var(--text2);
  margin: 0;
}
.zielgruppen-card--highlight{
  border-color: rgba(61,137,191,.4);
  background: linear-gradient(135deg, var(--surface), rgba(61,137,191,.06));
}
.zielgruppen-card--highlight p{
  font-size: 16px;
}
.zielgruppen-card--highlight .zielgruppen-stat{
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  font-family: Oswald, sans-serif;
  color: var(--sky-blue);
  flex-shrink: 0;
  line-height: 1;
  min-width: 56px;
  text-align: left;
}
@media (max-width: 920px){
  .zielgruppen-grid{
    grid-template-columns: 1fr;
  }
}

/* --- Vorteile-Section (Text links, Liste mit Icons rechts) --- */
.vorteile-section{
  padding: 48px 0 56px;
}
.vorteile-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.vorteile-text{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vorteile-headline{
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 600;
  font-family: Oswald, sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.vorteile-fliesstext{
  font-size: 17px;
  line-height: 1.65;
  color: var(--text2);
  margin: 0;
  max-width: 65ch;
}
.vorteile-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
}
.vorteile-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.vorteile-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  flex-shrink: 0;
}
.vorteile-icon svg{
  width: 22px;
  height: 22px;
}
.vorteile-item span:last-child{
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
}
@media (max-width: 768px){
  .vorteile-inner{
    grid-template-columns: 1fr;
  }
}

/* Abschluss-Section */
.abschluss-section{
  text-align: center;
  padding: 64px 24px;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border: var(--border);
  border-radius: var(--radius);
  margin: 0;
}
.abschluss-section h2{
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--text);
}
.abschluss-section .hero-actions{
  justify-content: center;
  margin-top: 0;
}

/* Impressum / Imprint – legal prose */
.impressum-prose{
  text-align: left;
}
.impressum-prose .impressum-content{
  max-width: 65ch;
  margin: 0 auto;
}
.impressum-prose h3{
  font-size: 1rem;
  font-weight: 600;
  margin: 24px 0 8px;
  color: var(--text);
}
.impressum-prose h3:first-of-type{
  margin-top: 0;
}
.impressum-prose h4{
  font-size: 0.95rem;
  font-weight: 600;
  margin: 20px 0 8px;
  color: var(--text);
}
.impressum-prose ul{
  margin: 0 0 16px;
  padding-left: 1.5em;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text2);
}
.impressum-prose ul li{
  margin-bottom: 6px;
}
.impressum-prose .datenschutz-content{
  max-width: 72ch;
}
.impressum-prose address,
.impressum-prose p{
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text2);
}
.impressum-prose a{
  color: var(--sky-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.impressum-prose a:hover{
  color: var(--sky-blue-light);
}

/* Abschluss-Section CTA – hypermodern */
.abschluss-section--cta{
  padding: 80px 32px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(240,235,224,.95) 100%);
  border: 1px solid rgba(26,26,26,.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.04), 0 0 0 1px rgba(255,255,255,.5) inset;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .abschluss-section--cta{
  background:
    linear-gradient(135deg, rgba(36,36,36,.95) 0%, rgba(46,46,46,.98) 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 24px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.abschluss-section--cta::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events: none;
}
.abschluss-section--cta h2{
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 32px;
  position: relative;
}
.abschluss-section--cta .hero-actions{
  position: relative;
}
.abschluss-section--cta .btn-primary{
  box-shadow: 0 4px 16px rgba(61,137,191,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease;
}
.abschluss-section--cta .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(61,137,191,.4);
}
@media (max-width: 640px){
  .abschluss-section--cta{
    padding: 56px 24px;
  }
  .abschluss-section--cta h2{
    font-size: clamp(28px, 6vw, 36px);
  }
}

/* Shine-Overlay – diagonaler Glanz beim Scrollen */
.abschluss-section--cta::after{
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.4) 50%,
    transparent 60%,
    transparent 100%
  );
  transform: skewX(-25deg) translateX(-100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.abschluss-section--cta.is-shine-visible::after{
  opacity: 1;
  animation: shine-sweep 8s ease-out forwards;
}
.abschluss-section--cta.is-shine-hover::after{
  opacity: 1;
  animation: shine-sweep 2s ease-out forwards;
}
@keyframes shine-sweep{
  0%{ transform: skewX(-25deg) translateX(-100%); }
  25%{ transform: skewX(-25deg) translateX(100%); }
  25.1%{ transform: skewX(-25deg) translateX(-100%); }
  75%{ transform: skewX(-25deg) translateX(-100%); }
  100%{ transform: skewX(-25deg) translateX(100%); }
}

/* Cover Section – full width, Bild als Cover zwischen CTA und Footer */
.section-cover{
  width: 100%;
  min-height: 50vh;
  overflow: hidden;
}
.section-cover-inner{
  width: 100%;
  height: 100%;
  min-height: 50vh;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (max-width: 640px){
  .section-cover,
  .section-cover-inner{
    min-height: 40vh;
  }
}

/* Magazine Section – full width, horizontale Reihe, leicht überlappend */
.magazine-section{
  width: 100%;
  margin-top: 0;
  padding: 48px 24px 56px;
  background: var(--surface);
  text-align: center;
  overflow: visible;
}
.magazine-section h2{
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text);
}
.magazine-lead{
  font-size: 15px;
  color: var(--text2);
  margin: 0 0 32px;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
.magazine-covers{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 64px 64px 32px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  min-height: 360px;
}
.magazine-cover{
  flex-shrink: 0;
  width: 210px;
  height: 280px;
  scroll-snap-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border-radius: 4px;
  overflow: hidden;
  transform-origin: center bottom;
  transition: transform 0.25s ease-out;
  z-index: 0;
}
.magazine-cover:hover{
  transform: scale(1.2);
  z-index: 1;
}
.magazine-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Magazine Carousel Nav – nur Desktop sichtbar, Mobile wird per CSS gesteuert */
.magazine-carousel-nav{
  display: none;
}
.magazine-carousel-nav .magazine-carousel-dots{
  display: flex;
  gap: 8px;
}
.magazine-carousel-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot-bg);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}
.magazine-carousel-dot.active{
  background: var(--sky-blue);
}
.magazine-carousel-arrow{
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--btn-bg);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.magazine-carousel-arrow:hover{
  background: var(--link-hover-bg);
  border-color: rgba(198,167,94,.35);
}

@media (max-width: 920px){
  .magazine-section{
    padding: 32px 16px 40px;
    position: relative;
  }
  .magazine-covers{
    justify-content: flex-start;
    padding: 48px 24px 56px;
    min-height: 300px;
    scroll-behavior: smooth;
  }
  .magazine-cover{
    width: 165px;
    height: 220px;
  }
  .magazine-carousel-nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    margin-top: -40px;
    position: relative;
    z-index: 5;
    background: rgba(255,255,255,.95);
    border-radius: var(--radius);
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  [data-theme="dark"] .magazine-carousel-nav{
    background: rgba(255,255,255,.12);
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
  }
  [data-theme="light"] .magazine-carousel-nav{
    background: rgba(0,0,0,.12);
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
  }
  [data-theme="light"] .magazine-carousel-nav .magazine-carousel-dot{
    background: rgba(255,255,255,.4);
  }
  [data-theme="light"] .magazine-carousel-nav .magazine-carousel-dot.active{
    background: var(--sky-blue);
  }
  [data-theme="light"] .magazine-carousel-nav .magazine-carousel-arrow{
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.25);
    color: #fff;
  }
  [data-theme="light"] .magazine-carousel-nav .magazine-carousel-arrow:hover{
    background: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.4);
  }
}

/* Testimonial Section – Flip Cards (S/W Business → Sport mit Name + kg) */
.testimonial-section{
  width: 100%;
  padding: 48px 24px 56px;
  background: var(--surface);
  text-align: center;
}
.testimonial-section h2{
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text);
}
.testimonial-lead{
  font-size: 15px;
  color: var(--text2);
  margin: 0 0 32px;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
.testimonial-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.testimonial-card{
  aspect-ratio: 1/1;
  perspective: 1000px;
  cursor: pointer;
}
.testimonial-card-inner{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.testimonial-card:hover .testimonial-card-inner,
.testimonial-card.flipped .testimonial-card-inner{
  transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce){
  .testimonial-card-inner{
    transition: none;
  }
}
.testimonial-card-front,
.testimonial-card-back{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.testimonial-card-front{
  background: var(--surface-2);
}
.testimonial-card-front img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%);
}
.testimonial-card-back{
  transform: rotateY(180deg);
  background: var(--surface-2);
}
.testimonial-card-back img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.testimonial-info{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.testimonial-name{
  font-weight: 600;
  font-size: 15px;
}
.testimonial-kg{
  font-size: 13px;
  opacity: .9;
}
@media (max-width: 920px){
  .testimonial-section{
    padding: 32px 16px 40px;
  }
  .testimonial-cards{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 16px;
  }
  .testimonial-card:hover .testimonial-card-inner{
    transform: none;
  }
  .testimonial-card.flipped .testimonial-card-inner{
    transform: rotateY(180deg);
  }
}
@media (max-width: 520px){
  .testimonial-cards{
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Kundenstimmen Section (round avatar + quote + name) --- */
.kundenstimmen-section{
  padding: 56px 24px 64px;
  background: var(--ink);
  --quote-muted: rgba(255,255,255,.38);
}
.kundenstimmen-headline{
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text);
  text-align: center;
}
.kundenstimmen-lead{
  font-size: 15px;
  color: var(--text2);
  margin: 0 0 40px;
  text-align: center;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
.kundenstimmen-grid{
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.kundenstimme-card{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
  padding: 20px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .2s, transform .2s;
}
.kundenstimme-card:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.kundenstimme-avatar{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.kundenstimme-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kundenstimme-quote{
  position: relative;
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  padding-left: 36px;
  padding-right: 24px;
  color: transparent;
  background: linear-gradient(90deg, var(--text) 0%, var(--text) var(--fill, 0%), var(--quote-muted) var(--fill, 0%), var(--quote-muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: background .15s ease-out;
}
.kundenstimme-quote::before{
  content: "„";
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 3.5em;
  line-height: 1;
  font-style: normal;
  font-family: Georgia, serif;
}
.kundenstimme-quote::after{
  content: """;
  font-size: 3em;
  line-height: 0.5;
  vertical-align: -0.3em;
  font-family: Georgia, serif;
}
.kundenstimme-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-style: normal;
  padding-left: 36px;
}
@media (max-width: 920px){
  .kundenstimmen-section{
    padding: 40px 16px 48px;
  }
  .kundenstimmen-grid{
    max-width: 100%;
  }
  .kundenstimme-card{
    flex-direction: column;
  }
  .kundenstimme-body{
    display: flex;
    flex-direction: column;
  }
  .kundenstimme-name{
    order: 1;
    padding-left: 0;
  }
  .kundenstimme-quote{
    order: 2;
  }
  .kundenstimme-avatar{
    width: 120px;
    height: 120px;
  }
}
[data-theme="light"] .kundenstimmen-section{
  background: #F0EBE0;
  --quote-muted: rgba(26,26,26,.38);
}
[data-theme="light"] .kundenstimme-card{
  border-color: rgba(26,26,26,.12);
}
[data-theme="light"] .kundenstimme-card:hover{
  border-color: rgba(26,26,26,.22);
}

/* Right "module": modern tiles like the screenshot vibe */
.module{
  border-left: var(--border);
  padding-left: 16px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 920px){
  .module{ border-left: 0; padding-left: 0; border-top: var(--border); padding-top: 14px; }
}

.module-top{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.kicker{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text3);
}
.chip{
  font-size: 12px;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--text2);
  white-space: nowrap;
}

.tiles{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.tile{
  border-radius: var(--radius);
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  padding: 12px;
}
.tile .icon{
  width: 34px; height: 34px;
  border-radius: var(--radius);
  border: 1px solid rgba(198,167,94,.3);
  background: rgba(198,167,94,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}
.tile b{
  display:block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.tile span{
  display:block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text3);
}

/* --- Sections --- */
.grid{
  margin-top: 0;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px){ .grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .grid{ grid-template-columns: 1fr; } }

.card{
  border-radius: var(--radius);
  border: var(--border);
  background: var(--surface);
  padding: 16px;
}
.card h2{
  font-size: var(--h2);
  font-weight: 500;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.card h3{
  font-size: 15px;
  font-weight: 600;
  margin: 16px 0 8px;
  letter-spacing: -0.01em;
}
.card h3:first-of-type{ margin-top: 16px; }
.card p{
  margin: 0;
  color: var(--text2);
  font-weight: 400;
  font-size: 14px;
}
.card h3{ color: var(--text); }

/* Color tokens (compact) */
.swatches{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.swatch{
  border-radius: var(--radius);
  border: 1px solid var(--swatch-border);
  overflow:hidden;
  background: var(--swatch-bg);
}
.swatch .color{ height: 46px; }
.swatch .info{
  padding: 10px;
  font-size: 12.5px;
  color: var(--text2);
}
.swatch .info b{ color: var(--text); }
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--text3);
}

/* Footer line */
.foot-brand{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.foot-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.foot-sub{
  font-size: 12px;
  color: var(--text3);
}
.foot{
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid var(--foot-border);
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text3);
  font-size: 13px;
  font-weight: 400;
}
.tiny{
  display:inline-flex;
  gap: 10px;
  align-items:center;
}
.dot{
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--dot-bg);
}
.dot.blue{ background: var(--dot-blue); }
.dot.red{ background: var(--dot-red); }
.dot.desert{ background: var(--gold); }

.foot-social{
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--foot-border);
}
.foot-social a{
  color: var(--text3);
  transition: color .2s ease;
}
.foot-social a:hover{
  color: var(--gold);
}
.foot-social svg{
  width: 24px;
  height: 24px;
  display: block;
}

/* Theme Toggle */
.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius: var(--radius);
  border: 1px solid var(--link-border);
  background: var(--btn-bg);
  color: var(--text2);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.theme-toggle:hover{
  background: var(--link-hover-bg);
  border-color: rgba(198,167,94,.35);
  color: var(--text);
}
.theme-toggle svg{
  width: 18px;
  height: 18px;
  opacity: .9;
}
.nav-cta{
  margin-left: 8px;
}
.nav-cta-group{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
.nav-cta-group .nav-cta{
  margin-left: 0;
}
.nav-contact-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--btn-bg);
  border: var(--border);
  color: var(--text);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nav-contact-icon:hover{
  background: var(--link-hover-bg);
  border-color: rgba(198,167,94,.35);
  color: var(--gold);
}
.nav-contact-icon svg{
  width: 18px;
  height: 18px;
}
.nav-contact-icon--wa:hover{
  background: rgba(37,211,102,.15);
  border-color: rgba(37,211,102,.4);
  color: #25D366;
}
.nav-mobile-contact{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: var(--border);
}
.nav-mobile-contact-link{
  color: var(--gold);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: color .2s ease;
}
.nav-mobile-contact-link:hover{
  color: var(--gold-light);
}

/* --- Contact Bar (mobile, fixed at bottom) --- */
.contact-bar{
  display: none;
}
@media (max-width: 768px){
  body{ padding-bottom: 72px; }
  .contact-bar{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    gap: 12px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    border-top: var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.2);
  }
  .contact-bar-link{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: var(--border);
    background: var(--btn-bg);
    color: var(--text);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .contact-bar-link:hover{
    background: var(--link-hover-bg);
    border-color: rgba(198,167,94,.35);
    color: var(--gold);
  }
  .contact-bar-link--wa:hover{
    background: rgba(37,211,102,.15);
    border-color: rgba(37,211,102,.4);
    color: #25D366;
  }
  .contact-bar-icon{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contact-bar-icon svg{
    width: 20px;
    height: 20px;
  }
}
.theme-toggle-bar{
  display: flex;
  justify-content: center;
  padding: 20px 18px;
  background: var(--bg);
}

/* --- Burger Button (mobile) --- */
.burger-btn{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: var(--border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.burger-btn:hover{
  background: var(--link-hover-bg);
  border-color: rgba(198,167,94,.35);
}
.burger-line{
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.burger-btn[aria-expanded="true"] .burger-line:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.burger-btn[aria-expanded="true"] .burger-line:nth-child(2){
  opacity: 0;
}
.burger-btn[aria-expanded="true"] .burger-line:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Nav Overlay (mobile) --- */
.nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.nav-overlay.open{
  opacity: 1;
  visibility: visible;
}
.nav-mobile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 24px;
  height: 100vh;
  position: relative;
}
.nav-close-btn{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.nav-close-btn:hover{
  background: var(--link-hover-bg);
  border-color: rgba(198,167,94,.35);
}
.nav-mobile .nav-link{
  font-size: 18px;
}
.nav-mobile .nav-cta{
  margin: 8px 0 0;
}

@media (max-width: 1024px){
  header{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
  }
  .brand{
    min-width: 0;
  }
  .header-logo{
    height: 32px;
  }
  .nav{
    display: flex;
    justify-content: center;
    grid-column: 2;
  }
  .nav-links{
    display: none;
  }
  .burger-btn{
    display: flex;
    grid-column: 3;
    justify-self: end;
  }
}

/* --- Page Hero (subpages) --- */
.page-hero{
  margin-top: 18px;
}

/* --- FAQ Accordion --- */
.faq-hero{
  padding: 48px 24px 40px;
  background: #000;
}
[data-theme="light"] .faq-hero{
  background: var(--surface-2);
}
.faq-hero .faq-title{
  margin-bottom: 24px;
}
.faq-hero .faq-search-wrap{
  margin-bottom: 0;
}
.faq-section{
  padding: 32px 24px 56px;
  max-width: var(--container);
  margin: 0 auto;
}
.faq-section h2{
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  color: var(--text);
  text-align: center;
}
.faq-section h1.faq-title,
.faq-title{
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0 0 24px;
  color: var(--text);
  text-align: center;
}
.faq-subline{
  display: block;
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 500;
  color: var(--text2);
  margin-top: 0.25em;
}
.faq-search-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.faq-search-input{
  max-width: 480px;
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  font-family: inherit;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-search-input::placeholder{
  color: var(--text3);
}
.faq-search-input:focus{
  border-color: var(--sky-blue);
  box-shadow: 0 0 0 2px rgba(61,137,191,.2);
}
.faq-results-row{
  font-size: 13px;
  color: var(--text3);
}
.faq-filter-buttons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.faq-filter-btn{
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text2);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.faq-filter-btn:hover{
  background: var(--link-hover-bg);
  border-color: rgba(61,137,191,.35);
  color: var(--text);
}
.faq-filter-btn.active{
  background: rgba(61,137,191,.15);
  border-color: var(--sky-blue);
  color: var(--sky-blue);
}
.faq-item.hidden{
  display: none;
}
.faq-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item{
  border-radius: var(--radius);
  border: var(--border);
  background: var(--surface);
  overflow: hidden;
}
.faq-question{
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  font-family: Oswald, sans-serif;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background .15s ease;
}
.faq-question:hover{
  background: var(--link-hover-bg);
}
.faq-question::after{
  content: "+";
  font-size: 20px;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item.open .faq-question::after{
  transform: rotate(45deg);
}
.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-item.open .faq-answer{
  max-height: 500px;
}
.faq-answer-inner{
  padding: 15px 20px 18px;
  font-size: 15px;
  color: var(--text2);
  line-height: 1.6;
}

/* --- Global Footer (dark theme, full width) --- */
.footer-global{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  background: #1a1a1a;
  color: rgba(255,255,255,.85);
  margin-top: 0;
  padding: 48px 18px 0;
  text-align: left;
}
.footer-main{
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  gap: 32px 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-col{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.footer-col-logo .footer-logo{
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: invert(1);
}
.footer-col-logo .footer-logo-link{
  display: inline-block;
}
.footer-hero-text{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
  margin: 8px 0 0;
  max-width: 24ch;
}
.footer-heading{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin: 0 0 4px;
}
.footer-address{
  font-size: 14px;
  line-height: 1.6;
  font-style: normal;
  color: rgba(255,255,255,.85);
}
.footer-address a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-address a:hover{
  color: var(--gold);
}
.footer-hours p{
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 8px;
  color: rgba(255,255,255,.85);
}
.footer-hours p:last-child{
  margin-bottom: 0;
}
.footer-nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-nav a{
  font-size: 14px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-nav a:hover{
  color: var(--gold);
}
.footer-newsletter-desc{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
  margin: 0 0 12px;
}
.footer-newsletter-form{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.footer-newsletter-input{
  flex: 1;
  min-width: 180px;
  padding: 10px 0;
  font-size: 14px;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.4);
  outline: none;
  font-family: inherit;
}
.footer-newsletter-input::placeholder{
  color: rgba(255,255,255,.5);
}
.footer-newsletter-input:focus{
  border-bottom-color: rgba(255,255,255,.8);
}
.footer-newsletter-btn{
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--usRed);
  cursor: pointer;
  font-family: inherit;
  transition: opacity .2s ease;
}
.footer-newsletter-btn:hover{
  opacity: .9;
}
.footer-newsletter-disclaimer{
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,.5);
  margin: 0;
}
.footer-newsletter-disclaimer a{
  color: rgba(255,255,255,.7);
  text-decoration: underline;
}
.footer-newsletter-disclaimer a:hover{
  color: var(--gold);
}
.footer-bottom{
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom-left{
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-phone-icon{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fbbc04;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-phone-icon svg{
  width: 18px;
  height: 18px;
}
.footer-contact-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 14px;
  margin-top: 4px;
  transition: color .2s ease;
}
/* Tel-Link: Sky-Blue (Dark) */
a.footer-contact-link[href^="tel:"]{
  color: var(--sky-blue);
}
a.footer-contact-link[href^="tel:"]:hover{
  color: var(--sky-blue-light);
}
/* WhatsApp-Link: Grün */
a.footer-contact-link[href*="wa.me"]{
  color: #25D366;
}
a.footer-contact-link[href*="wa.me"]:hover{
  color: #2ee66d;
}
.footer-contact-link .footer-phone-icon,
.footer-contact-link .footer-wa-icon{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-contact-link .footer-phone-icon{
  background: transparent;
  color: inherit;
}
.footer-contact-link .footer-wa-icon{
  width: 18px;
  height: 18px;
}
.footer-contact-link .footer-wa-icon svg,
.footer-contact-link .footer-phone-icon svg{
  width: 16px;
  height: 16px;
  color: currentColor;
}
[data-theme="light"] a.footer-contact-link[href^="tel:"]{
  color: #1a73e8;
}
[data-theme="light"] a.footer-contact-link[href^="tel:"]:hover{
  color: #4285f4;
}
[data-theme="light"] a.footer-contact-link[href*="wa.me"]{
  color: #25D366;
}
[data-theme="light"] a.footer-contact-link[href*="wa.me"]:hover{
  color: #2ee66d;
}
.footer-copyright{
  font-size: 13px;
  color: rgba(255,255,255,.75);
}
.footer-bottom-center{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.footer-bottom-center a{
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-bottom-center a:hover{
  color: var(--gold);
}
.footer-sep{
  color: rgba(255,255,255,.4);
}
.footer-col-social{
  overflow: visible;
  align-items: flex-end;
  text-align: right;
}
.footer-col-social .footer-heading{
  text-align: right;
}
.footer-col-social .footer-social{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.footer-col-social .footer-social-stack{
  align-items: flex-end;
}
.footer-social-stack{
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.footer-social-link{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 14px;
  transition: color .2s ease;
}
.footer-social-link:hover{
  color: var(--gold);
}
.footer-social-icon{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social-icon svg{
  width: 18px;
  height: 18px;
}
.footer-social-label{
  line-height: 1.2;
}
@media (max-width: 1024px){
  .footer-main{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 768px){
  .footer-global{
    padding: 32px 18px 0;
  }
  .footer-main{
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 32px;
  }
  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0 28px;
  }
}

/* --- Footer Light Mode --- */
[data-theme="light"] .footer-global{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: #e8e4dc;
  color: rgba(26,26,26,.85);
}
[data-theme="light"] .footer-main{
  border-bottom-color: rgba(26,26,26,.12);
}
[data-theme="light"] .footer-col-logo .footer-logo{
  filter: none;
}
[data-theme="light"] .footer-hero-text{
  color: rgba(26,26,26,.75);
}
[data-theme="light"] .footer-heading{
  color: rgba(26,26,26,.6);
}
[data-theme="light"] .footer-address,
[data-theme="light"] .footer-address a,
[data-theme="light"] .footer-hours p{
  color: rgba(26,26,26,.85);
}
[data-theme="light"] .footer-nav a{
  color: rgba(26,26,26,.85);
}
[data-theme="light"] .footer-copyright,
[data-theme="light"] .footer-bottom-center a{
  color: rgba(26,26,26,.75);
}
[data-theme="light"] .footer-sep{
  color: rgba(26,26,26,.4);
}
[data-theme="light"] .footer-social-link{
  color: rgba(26,26,26,.85);
}
[data-theme="light"] .footer-social-link:hover{
  color: var(--gold);
}

/* Marquee Carousel – Pressebilder */
.marquee-presse {
  width: 100%;
  overflow: hidden;
  padding: 2rem 0;
  z-index: 10;
}
.marquee-presse-inner {
  position: relative;
  display: flex;
  max-width: 90vw;
  overflow: hidden;
  margin: 0 auto;
  padding: 1.25rem 0;
}
.marquee-presse-track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration, 30s) linear infinite;
}
.marquee-presse-track:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
.marquee-presse-item {
  flex-shrink: 0;
  margin: 0 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee-presse-item img {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.1);
  opacity: 0.9;
}
.marquee-presse-item img:hover {
  filter: none;
  opacity: 1;
}
/* Light Mode: Logos farblich umkehren für gute Lesbarkeit auf hellem Hintergrund */
[data-theme="light"] .marquee-presse-item img {
  filter: invert(1) grayscale(100%) brightness(1.1);
}
[data-theme="light"] .marquee-presse-item img:hover {
  filter: invert(1);
}
/* Light Mode: Weißer Hintergrund für Presse-Marquee */
[data-theme="light"] .marquee-presse {
  background: #ffffff;
}
/* Dark Mode: Schwarzer Hintergrund, Full Width ohne seitliches Padding */
[data-theme="dark"] .marquee-presse {
  background: #000000;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding-left: 0;
  padding-right: 0;
}
[data-theme="dark"] .marquee-presse-inner {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 640px) {
  .marquee-presse-item img {
    height: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-presse-track {
    animation: none;
  }
}

/* --- Blog Header: gleiche BG wie Trainingsablauf --- */
.blog-header-bg {
  background: #000;
}
[data-theme="light"] .blog-header-bg {
  background: var(--surface-2);
}

/* --- Blog View Switch (Kachel / Liste) --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.blog-view-switch {
  display: inline-flex;
  gap: 0;
  border-radius: var(--radius, 6px);
  overflow: hidden;
}
.blog-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-view-btn-icon {
  width: 16px;
  height: 16px;
  color: currentColor;
}
.blog-view-btn--first {
  border-radius: var(--radius, 6px) 0 0 var(--radius, 6px);
  border-right-width: 0;
}
.blog-view-btn--last {
  border-radius: 0 var(--radius, 6px) var(--radius, 6px) 0;
  border-left-width: 0;
}
.blog-view-btn.active {
  background: var(--sky-blue);
  color: #fff;
  border-color: var(--sky-blue);
}
/* Dark Mode: View-Buttons besser sichtbar */
[data-theme="dark"] .blog-view-switch {
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
}
[data-theme="dark"] .blog-view-btn:not(.active) {
  background: var(--surface-2);
  border-color: rgba(255,255,255,.18);
  color: var(--text2);
}
[data-theme="dark"] .blog-view-btn:not(.active):hover {
  background: rgba(255,255,255,.12);
  border-color: var(--olive-grey);
  color: var(--text);
}
/* Dark Mode: Blog-Karten (Kachel + Liste) */
[data-theme="dark"] .blog-card {
  background: var(--surface);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .blog-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.blog-grid.blog-grid--list {
  grid-template-columns: 1fr;
}
.blog-grid.blog-grid--list article a {
  display: flex;
  flex-direction: row;
  gap: 24px;
}
.blog-grid.blog-grid--list article .aspect-video {
  aspect-ratio: 16/10;
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
}
.blog-grid.blog-grid--list article .p-6 {
  flex: 1;
  min-width: 0;
}
@media (max-width: 640px) {
  .blog-grid.blog-grid--list article a {
    flex-direction: column;
  }
  .blog-grid.blog-grid--list article .aspect-video {
    width: 100%;
    min-width: 0;
  }
}

/* --- Very small viewports (<360px) --- */
@media (max-width: 360px){
  .container{
    padding: 18px 14px 32px;
  }
  .hero-slider-nav{
    bottom: 16px;
    padding: 10px 16px;
  }
  .footer-newsletter-input{
    min-width: 120px;
  }
}

/* --- Contact Bar (Mobile) --- */
.contact-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--surface);
  border-top: var(--border);
  padding: 12px 16px;
  gap: 12px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
@media (max-width: 768px) {
  .contact-bar {
    display: flex;
  }
  body {
    padding-bottom: 72px;
  }
}
.contact-bar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}
.contact-bar-btn:active {
  transform: scale(0.98);
}
.contact-bar-btn--tel {
  background: var(--sky-blue);
  color: var(--btn-primary-color);
}
.contact-bar-btn--tel:hover {
  background: var(--btn-primary-hover);
  color: var(--btn-primary-color);
}
.contact-bar-btn--wa {
  background: #25D366;
  color: #fff;
}
.contact-bar-btn--wa:hover {
  background: #2ee66d;
  color: #fff;
}
.contact-bar-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- Hero / Abschluss contact line --- */
.hero-contact-line {
  margin-top: 14px;
  font-size: 15px;
  color: var(--text2);
}
.hero-contact-line a {
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Tel-Link: Telefon-Icon + Sky-Blue */
.hero-contact-line a[href^="tel:"] {
  color: var(--sky-blue);
}
.hero-contact-line a[href^="tel:"]:hover {
  color: var(--sky-blue-light);
}
.hero-contact-line a[href^="tel:"]::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}
/* WhatsApp-Link: WhatsApp-Icon + Grün */
.hero-contact-line a[href*="wa.me"] {
  color: #25D366;
}
.hero-contact-line a[href*="wa.me"]:hover {
  color: #2ee66d;
}
.hero-contact-line a[href*="wa.me"]::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}
[data-theme="light"] .hero-contact-line {
  color: rgba(0,0,0,.7);
}
[data-theme="light"] .hero-contact-line a[href^="tel:"] {
  color: #1a73e8;
}
[data-theme="light"] .hero-contact-line a[href^="tel:"]:hover {
  color: #4285f4;
}
[data-theme="light"] .hero-contact-line a[href*="wa.me"] {
  color: #25D366;
}
[data-theme="light"] .hero-contact-line a[href*="wa.me"]:hover {
  color: #2ee66d;
}
[data-theme="light"] .contact-bar {
  background: #fff;
  border-top-color: rgba(0,0,0,.1);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}

/* --- Cookie Consent Banner --- */
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--surface);
  border-top: var(--border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
  padding: 16px 20px;
  animation: cookie-consent-slide-up 0.35s ease-out;
}
.cookie-consent-banner[hidden] {
  display: none;
}
@media (max-width: 768px) {
  .cookie-consent-banner:not([hidden]) {
    bottom: 72px;
  }
  body.cookie-banner-visible {
    padding-bottom: 180px;
  }
}
@keyframes cookie-consent-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.cookie-consent-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.cookie-consent-text {
  flex: 1;
  min-width: 260px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text2);
}
.cookie-consent-link {
  color: var(--sky-blue);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.cookie-consent-link:hover {
  color: var(--sky-blue-light);
}
.cookie-consent-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-consent-btn {
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
}
.cookie-consent-btn--accept {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border);
}
.cookie-consent-btn--accept:hover {
  background: var(--btn-primary-hover);
}
.cookie-consent-btn--reject {
  background: var(--btn-bg);
  color: var(--text2);
  border-color: var(--btn-border);
}
.cookie-consent-btn--reject:hover {
  background: var(--link-hover-bg);
  color: var(--text);
}
.cookie-consent-btn--settings {
  background: var(--btn-bg);
  color: var(--text2);
  border-color: var(--btn-border);
}
.cookie-consent-btn--settings:hover {
  background: var(--link-hover-bg);
  border-color: rgba(198,167,94,.35);
  color: var(--text);
}
.cookie-consent-btn--save {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border);
}
.cookie-consent-btn--save:hover {
  background: var(--btn-primary-hover);
}
[data-theme="light"] .cookie-consent-banner {
  background: #fff;
  border-top-color: rgba(0,0,0,.12);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}
[data-theme="light"] .cookie-consent-text {
  color: rgba(0,0,0,.75);
}
[data-theme="light"] .cookie-consent-btn--reject {
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.7);
  border-color: rgba(0,0,0,.15);
}
[data-theme="light"] .cookie-consent-btn--reject:hover {
  background: rgba(0,0,0,.1);
  color: rgba(0,0,0,.9);
}
[data-theme="light"] .cookie-consent-btn--settings {
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.7);
  border-color: rgba(0,0,0,.15);
}
[data-theme="light"] .cookie-consent-btn--settings:hover {
  background: rgba(0,0,0,.1);
  color: rgba(0,0,0,.9);
}

/* --- Cookie Consent Modal --- */
.cookie-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookie-consent-modal[hidden] {
  display: none;
}
.cookie-consent-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  cursor: pointer;
}
.cookie-consent-modal-content {
  position: relative;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 420px;
  width: 100%;
}
.cookie-consent-modal-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
}
.cookie-consent-category {
  padding: 14px 0;
  border-bottom: var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cookie-consent-category:last-of-type {
  border-bottom: none;
}
.cookie-consent-category--toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-consent-category--toggle > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cookie-consent-category-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.cookie-consent-category-desc {
  font-size: 13px;
  color: var(--text3);
}
.cookie-consent-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.cookie-consent-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-consent-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cookie-consent-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: var(--text2);
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.cookie-consent-toggle input:checked + .cookie-consent-toggle-slider {
  background: rgba(61,137,191,.25);
  border-color: var(--sky-blue);
}
.cookie-consent-toggle input:checked + .cookie-consent-toggle-slider::before {
  transform: translateX(20px);
  background: var(--sky-blue);
}
.cookie-consent-modal-buttons {
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--border);
}
.cookie-consent-modal-buttons .cookie-consent-btn {
  width: 100%;
}
[data-theme="light"] .cookie-consent-modal-content {
  background: #fff;
  border-color: rgba(0,0,0,.12);
}
[data-theme="light"] .cookie-consent-modal-title {
  color: rgba(0,0,0,.9);
}
[data-theme="light"] .cookie-consent-category-name {
  color: rgba(0,0,0,.9);
}
[data-theme="light"] .cookie-consent-category-desc {
  color: rgba(0,0,0,.55);
}
[data-theme="light"] .cookie-consent-toggle-slider {
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.2);
}
[data-theme="light"] .cookie-consent-toggle input:checked + .cookie-consent-toggle-slider {
  background: rgba(26,115,232,.2);
  border-color: #1a73e8;
}
[data-theme="light"] .cookie-consent-toggle input:checked + .cookie-consent-toggle-slider::before {
  background: #1a73e8;
}

.cookie-consent-reset-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--sky-blue);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}
.cookie-consent-reset-btn:hover {
  color: var(--sky-blue-light);
}
[data-theme="light"] .cookie-consent-reset-btn {
  color: #1a73e8;
}
[data-theme="light"] .cookie-consent-reset-btn:hover {
  color: #4285f4;
}