/* ═══════════════════════════════════════════════════════════════
   BOXERSCHMIEDE GRAZ — Design System & Foundation
   Fight-Poster-Stil · Boxclub Boxerschmiede · 2026
   ═══════════════════════════════════════════════════════════════ */


/* ── 1. CSS Custom Properties (Design Tokens) ─────────────────── */
:root {
  /* Farben */
  --red:         #A31223;
  --red-dark:    #7E0E1B;
  --red-glow:    rgba(163, 18, 35, .18);
  --black:       #111111;
  --black-deep:  #0A0A0A;
  --paper:       #F3E8D7;
  --beige:       #E6D6BF;
  --gray:        #5B5B5B;
  --gray-light:  #9A9A93;
  --gold:        #B08A3C;
  --white:       #FFFFFF;
  --border-dark: rgba(255, 255, 255, .06);
  --border-red:  rgba(163, 18, 35, .25);

  /* Typografie */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-accent:  'Special Elite', serif;

  /* Abstände */
  --section-py:    96px;
  --container-w:   1200px;
  --container-px:  clamp(20px, 4vw, 48px);
  --nav-h:         64px;

  /* Übergänge */
  --ease:          cubic-bezier(.25, .46, .45, .94);
  --dur:           .22s;
  --dur-slow:      .4s;

  /* Schatten */
  --shadow-card:   0 2px 24px rgba(0, 0, 0, .45);
  --shadow-strong: 0 8px 48px rgba(0, 0, 0, .7);
}


/* ── 2. Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
body {
  font-family:             var(--font-body);
  background:              var(--black);
  color:                   var(--paper);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:              hidden;
  line-height:             1.5;
}
body.nav-is-open { overflow: hidden; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea {
  font-family: var(--font-body);
  font-size:   1rem;
}


/* ── 3. Typografie-Hierarchie ──────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family:    var(--font-display);
  line-height:    .92;
  letter-spacing: .01em;
  text-transform: uppercase;
}
h1 { font-size: clamp(52px, 9vw, 104px); }
h2 { font-size: clamp(36px, 5.5vw, 72px); }
h3 { font-size: clamp(22px, 3vw, 36px); }
h4 { font-size: clamp(16px, 2vw, 24px); }
p  {
  font-size:   .9rem;
  line-height: 1.75;
  color:       var(--gray-light);
}
strong { font-weight: 600; color: var(--paper); }


/* ── 4. Layout-Helfer ──────────────────────────────────────────── */
.container {
  max-width:  var(--container-w);
  margin:     0 auto;
  padding:    0 var(--container-px);
}
section {
  padding: var(--section-py) 0;
  position: relative;
}

/* Hintergrundflächen */
.bg-dark  { background: var(--black); }
.bg-deep  { background: var(--black-deep); }
.bg-paper {
  background: var(--paper);
  color:      var(--black);
}
.bg-paper p { color: #555; }
.bg-red   { background: var(--red); }

/* Papier-Textur (CSS-Näherung, ersetzbar durch PNG-Textur)
   Tipp: für echte Plakat-Textur hier ein
   background-image: url('assets/paper-texture.png') center/cover einbinden */
.bg-paper::before {
  content:  '';
  position: absolute;
  inset:    0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent              0,
      transparent              2px,
      rgba(0, 0, 0, .018)      2px,
      rgba(0, 0, 0, .018)      4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent              0,
      transparent              2px,
      rgba(0, 0, 0, .012)      2px,
      rgba(0, 0, 0, .012)      4px
    );
  pointer-events: none;
  z-index: 0;
}
.bg-paper > .container,
.bg-paper > * { position: relative; z-index: 1; }

/* Körnung auf dunklen Sektionen */
.bg-dark::after,
.bg-deep::after {
  content:  '';
  position: absolute;
  inset:    0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, .012) 0,
    rgba(255, 255, 255, .012) 1px,
    transparent               1px,
    transparent               4px
  );
  pointer-events: none;
  z-index: 0;
}
.bg-dark > .container,
.bg-dark > *,
.bg-deep > .container,
.bg-deep > * { position: relative; z-index: 1; }

/* ── 5. Kicker (Sektions-Labels) ───────────────────────────────── */
.kicker {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-family:    var(--font-body);
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  16px;
}
.kicker::before,
.kicker::after {
  content:    '';
  display:    inline-block;
  width:      24px;
  height:     2px;
  background: var(--red);
  flex-shrink: 0;
}
/* Kicker auf dunklem Hintergrund (kein Anpassungsbedarf) */
/* Kicker auf hellem Hintergrund: Farbe bleibt Rot */


/* ── 6. Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display:         inline-block;
  padding:         15px 28px;
  background:      var(--red);
  color:           var(--white);
  font-family:     var(--font-display);
  font-size:       1rem;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  border:          2px solid transparent;
  transition:
    background var(--dur) var(--ease),
    transform  var(--dur) var(--ease);
}
.btn-primary:hover {
  background: var(--red-dark);
  transform:  translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display:         inline-block;
  padding:         15px 28px;
  background:      transparent;
  color:           var(--paper);
  font-family:     var(--font-display);
  font-size:       1rem;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  border:          2px solid var(--gray);
  transition:
    border-color var(--dur) var(--ease),
    color        var(--dur) var(--ease),
    transform    var(--dur) var(--ease);
}
.btn-secondary:hover {
  border-color: var(--paper);
  color:        var(--white);
  transform:    translateY(-1px);
}

/* Variante auf hellem Hintergrund */
.btn-secondary--filled {
  background:   var(--gray);
  border-color: var(--white);
  color:        var(--white);
}
.btn-secondary--filled:hover {
  background:   var(--gray-light);
  border-color: var(--gray-light);
}

/* ── 7. Ring-Rope Divider ──────────────────────────────────────── */
.rope-divider {
  width:    100%;
  height:   8px;
  position: relative;
  overflow: hidden;
}
.rope-divider::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     3px;
  background: var(--red);
  opacity:    .9;
}
.rope-divider::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  height:     2px;
  background: var(--gray);
  opacity:    .4;
}

/* Sternchen-Divider (Fight-Poster-Akzent) */
.star-divider {
  display:        flex;
  align-items:    center;
  gap:            12px;
  margin:         16px 0;
  color:          var(--red);
  font-size:      .6rem;
  letter-spacing: .5em;
}
.star-divider::before,
.star-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--red);
  opacity:    .4;
}


/* ── 8. Bild-Platzhalter ───────────────────────────────────────── */
/* Entfernen, sobald echte Fotos eingebunden sind */
.img-placeholder {
  background: #1C1C1C;
  display:    flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gray);
  font-size:       .65rem;
  letter-spacing:  .2em;
  text-transform:  uppercase;
  font-family:     var(--font-body);
  border:          1px solid rgba(255,255,255,.04);
}


/* ── 9. Stamp / Label (Stempel-Elemente) ───────────────────────── */
.stamp {
  display:        inline-block;
  font-family:    var(--font-accent);
  font-size:      .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border:         2.5px solid currentColor;
  padding:        6px 12px;
  transform:      rotate(-3deg);
  line-height:    1.2;
}
.stamp-red {
  color:        var(--red);
  border-color: var(--red);
}
/* Runder Badge (EST. 2013) */
.badge-round {
  width:          80px;
  height:         80px;
  border-radius:  50%;
  border:         2px solid var(--gold);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  text-align:     center;
  font-family:    var(--font-accent);
  font-size:      .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--gold);
  line-height:    1.4;
}


/* ══════════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════════ */
.navbar {
  position:      fixed;
  top:           0;
  left:          0;
  right:         0;
  z-index:       1000;
  background:    var(--black);
  border-bottom: 1px solid var(--border-red);
  transition:    box-shadow var(--dur-slow) var(--ease);
  height:        var(--nav-h);
}
.navbar.scrolled {
  box-shadow: 0 4px 32px rgba(0, 0, 0, .75);
}

.nav-container {
  max-width:      var(--container-w);
  margin:         0 auto;
  padding:        0 var(--container-px);
  height:         var(--nav-h);
  display:        flex;
  align-items:    center;
  gap:            24px;
}

/* Logo */
.nav-logo {
  font-family:    var(--font-display);
  font-size:      1.2rem;
  letter-spacing: .04em;
  color:          var(--white);
  white-space:    nowrap;
  flex-shrink:    0;
  transition:     opacity var(--dur) var(--ease);
}
.nav-logo:hover { opacity: .8; }
.nav-logo span  { color: var(--red); }

/* Links */
.nav-links {
  display:      flex;
  align-items:  center;
  gap:          24px;
  margin-left:  auto;
}
.nav-links a {
  font-size:      .7rem;
  font-weight:    500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--gray);
  transition:     color var(--dur) var(--ease);
  padding:        4px 0;
  position:       relative;
}
.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--red);
  transition: width var(--dur) var(--ease);
}
.nav-links a:hover         { color: var(--paper); }
.nav-links a:hover::after  { width: 100%; }

/* CTA Button in der Nav */
.btn-nav {
  display:        inline-block;
  padding:        9px 18px;
  background:     var(--red);
  color:          var(--white);
  font-family:    var(--font-display);
  font-size:      .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex-shrink:    0;
  transition:     background var(--dur) var(--ease);
}
.btn-nav:hover { background: var(--red-dark); }

/* CTA nur im mobilen Menü — auf Desktop versteckt */
.nav-cta-mobile { display: none; }

/* Hamburger */
.nav-toggle {
  display:        none;
  flex-direction: column;
  gap:            5px;
  padding:        8px;
  margin-left:    auto;
  flex-shrink:    0;
}
.nav-toggle span {
  display:    block;
  width:      22px;
  height:     2px;
  background: var(--paper);
  transition:
    transform  var(--dur) var(--ease),
    opacity    var(--dur) var(--ease);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── Responsive Navigation ─────────────────────────────────────── */
@media (max-width: 860px) {

  .nav-toggle       { display: flex; }
  .btn-nav          { display: none; }
  .nav-cta-mobile   { display: block; }

  .nav-links {
    position:       fixed;
    top:            var(--nav-h);
    left:           0;
    right:          0;
    background:     var(--black);
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
    max-height:     0;
    overflow:       hidden;
    transition:     max-height var(--dur-slow) var(--ease);
    border-bottom:  1px solid var(--border-red);
  }
  .nav-links.nav-open { max-height: 420px; }

  .nav-links li a {
    display:        block;
    padding:        16px var(--container-px);
    font-size:      .78rem;
    color:          var(--gray-light);
    border-bottom:  1px solid var(--border-dark);
  }
  .nav-links li a:hover { color: var(--paper); background: rgba(255,255,255,.02); }
  .nav-links li a::after { display: none; }

  /* CTA im mobilen Menü */
  .nav-cta-mobile a {
    background:  var(--red) !important;
    color:       var(--white) !important;
    text-align:  center;
    font-family: var(--font-display);
    border:      none;
  }
  .nav-cta-mobile a:hover { background: var(--red-dark) !important; }
}

.nav-logo-img {
  height:    50px;   /* Höhe anpassen bis es passt */
  width:     auto;
  display:   block;
}
/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline:        2px solid var(--red);
  outline-offset: 3px;
}
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}


/* ══════════════════════════════════════════════════════════════════
   SEKTIONEN — kommen hier rein (Sektion für Sektion)
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   SEKTION 1: HERO
   ══════════════════════════════════════════════════════════════════ */
.hero {
  position:    relative;
  min-height:  100vh;
  display:     flex;
  align-items: flex-start;
  padding-top: var(--nav-h);
  overflow:    hidden;
}

/* Hintergrundbild-Container */
.hero-bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  background: var(--black-deep); /* Fallback bis Foto eingebunden */
}
/* Fallback-Gradient wenn Foto fehlt */
.hero-bg--no-img {
  background: linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 60%, #1a0505 100%);
}
.hero-img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 30%;
  opacity:          1;
}

/* Dunkler Gradient-Overlay: links (Text) → rechts (Bild frei) */
.hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    100deg,
    rgba(17,17,17,.97) 0%,
    rgba(17,17,17,.85) 20%,
    rgba(17,17,17,.45) 40%,
    rgba(17,17,17,.1)  60%,
    transparent        100%
  );
}

/* EST. 2013 Badge */
.hero-badge {
  position: absolute;
  margin-right: 150px;
  top:      calc(var(--nav-h) + 28px);
  right:    var(--container-px);
  z-index:  2;
}
.hero-badge-inner {
  width:           108px;      /* +20% von 90px */
  height:          108px;
  border-radius:   50%;
  border:          2px solid var(--gold);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  font-family:     var(--font-accent);
  font-size:       .65rem;     /* +20% */
  letter-spacing:  .12em;
  text-transform:  uppercase;
  color:           var(--gold);
  line-height:     1.55;
  position:        relative;
  transform:       rotate(15deg);
}
/* Innerer Doppelring */
.hero-badge-inner::before {
  content:       '';
  position:      absolute;
  inset:         6px;
  border-radius: 50%;
  border:        1px solid rgba(176,138,60,.35);
}
.hero-badge-star {
  font-size:      .58rem;     /* +20% */
  margin:         1px 0;
  letter-spacing: .06em;
}

/* Haupt-Content */
.hero > .container {
  margin-left:  0;          /* Container bleibt links, nicht auto-zentriert */
  margin-right: auto;
  width:        100%;
}
.hero-content {
  position:   relative;
  z-index:    2;
  max-width:  600px;
  padding:    64px 0;
  text-align: left;
}
.hero-title {
  font-size:   clamp(56px, 10vw, 112px);
  line-height: .88;
  color:       var(--white);
  text-shadow: 0 4px 40px rgba(0,0,0,.6);
  margin-bottom: 20px;
}
.hero-title span {
  color:   var(--red);
  display: block;
}
.hero-claim {
  font-family:    var(--font-display);
  font-size:      clamp(18px, 3.2vw, 30px);
  letter-spacing: .02em;
  color:          var(--paper);
  margin-bottom:  10px;
  line-height:    1;
}
.hero-sub {
  font-family:    var(--font-accent);
  font-size:      clamp(12px, 1.5vw, 15px);
  letter-spacing: .1em;
  color:          var(--gold);
  margin-bottom:  38px;
  line-height:    1;
}
.hero-ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       14px;
}

/* Rope Divider unten */
.hero > .rope-divider {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  z-index:  3;
}

/* ── Responsive Hero ──────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Auf Mobile: Text unten, Bild füllt alles */
  .hero {
    min-height:     100svh;
    align-items:    flex-end;
    padding-bottom: 52px;
  }
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(17,17,17,.97) 0%,
      rgba(17,17,17,.88) 35%,
      rgba(17,17,17,.5)  65%,
      rgba(17,17,17,.2)  100%
    );
  }
  .hero-content {
    max-width: 100%;
    padding:   0;
  }
  .hero-badge {
  position: absolute;
  margin-right: 10px;
  top:      calc(var(--nav-h) + 28px);
  right:    var(--container-px);
  z-index:  2;
}
  .hero-badge-inner {
    width:  77px;        /* +20% von 64px */
    height: 77px;
    font-size: .46rem;
  }
  .hero-badge-star { font-size: .4rem; }
  .hero-ctas {
    flex-direction: column;
    gap:            10px;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    text-align: center;
    width:      100%;
  }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(44px, 16vw, 62px); }
}
@media (max-width: 860px) {
  .hero-img {
    object-position: 70% 30%;    /* Mobile: leicht nach rechts verschoben */
  }
}

@media (max-width: 480px) {
  .hero-img {
    object-position: 85% 30%;    /* Sehr schmal: noch weiter rechts */
  }
}
/* ══════════════════════════════════════════════════════════════════
   SEKTION 2: PHILOSOPHIE
   ══════════════════════════════════════════════════════════════════ */
.philosophie {
  position: relative;
  overflow: hidden;
  padding:  var(--section-py) 0;
}

/* Hintergrundbild-Container — identisch zum Hero */
.philosophie-bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  background: var(--black); /* Fallback bis Foto eingebunden */
}
.philosophie-bg--no-img {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}
.philosophie-bg-img {
  width:           100%;
  height:          100%;
  object-fit:      fill;
  object-position: center;
  opacity:         1;
}

/* Overlay deaktiviert — reines Hintergrundbild */
.philosophie-overlay {
  display: none;
}

/* ── 2-Spalten-Layout: Headline+Copy links | Foto rechts ─────── */
.philosophie > .container {
  position: relative;
  z-index:  1;
}
.philosophie-grid {
  display:               grid;
  grid-template-columns: 1.2fr 1fr;
  gap:                   56px;
  align-items:           start;
}
.philosophie-copy {
  margin-top: 24px;
}

/* Spalte 1: Headline */
.philosophie-headline {
  font-size:   clamp(27px, 4vw, 50px);  /* -10% */
  line-height: .92;
  color:       var(--black);
  margin-top:  10px;
}
.philosophie-headline span { color: var(--red); }

/* Spalte 2: Fließtext */
.philosophie-body {
  font-size:     .92rem;
  font-weight:   500;          /* etwas fetter für bessere Lesbarkeit */
  line-height:   1.8;
  color:         #2e2620;      /* dunkel für Kontrast auf Papier */
  margin-bottom: 18px;
}

/* Spalte 3: Foto */
.philosophie-img {
  width:        100%;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
  display:      block;
}
div.philosophie-img { min-height: 200px; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .philosophie-grid {
    grid-template-columns: 1fr;
    gap:                   28px;
  }
  .philosophie-headline { font-size: clamp(28px, 8vw, 44px); }
}

/* ══════════════════════════════════════════════════════════════════
   SEKTION 3: TRAINING
   ══════════════════════════════════════════════════════════════════ */
.training-header {
  text-align:    center;
  margin-bottom: 48px;
}
.training-title {
  font-size:   clamp(32px, 5vw, 64px);
  color:       var(--paper);
  line-height: .92;
}

/* 3-Spalten Karten-Grid */
.training-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   25px;
}

/* ── Karte: 3-Layer-Struktur ────────────────────────────────────── */
.training-card {
  position:        relative;
  overflow:        hidden;
  aspect-ratio:    3 / 4;         /* Karte immer im gleichen Verhältnis,
                                     skaliert proportional mit der Breite */

  transition:      transform var(--dur) var(--ease);
  min-width: 0;
  
}
.training-card:hover { transform: translateY(-4px); }

/* ── Layer 0: Hintergrund-Grafik (vollflächig) ── */
.training-card-graphic {
  position: absolute;
  inset:    -5px;
  z-index:  0;
}
.training-card-graphic-img {
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
}
.training-card-graphic--no-img {
  /* Fallback: Paper-Ton als Hintergrund bis Grafik eingebunden
     Hier z.B. url('assets/card-bg-texture.jpg') eintragen */
  background: var(--beige);
}

/* ── Layer 1: Foto (obere Zone, separates div) ── */
.training-card-photo {
  position: absolute;
  top:      0;
  left:     0;
  right:    0;
  height:   60%;      /* Foto-Anteil anpassbar: z.B. 50%–65% */
  width:  auto;
  z-index:  1;
  overflow: hidden;
}
.training-card-photo-img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
  transition: transform .5s var(--ease);
}
/* .training-card:hover .training-card-photo-img { transform: scale(1.05); }*/
.training-card-photo--no-img {
  background: #1C1C1C;
  width:      100%;
  height:     100%;
}

/* ── Layer 2: Content (unten) ── */
.training-card-body {
  position: absolute;
top:      59%;
left:     0;
right:    0;
bottom:   0;
overflow: hidden;
  z-index:  2;
  padding:  18px 20px 20px ;
}

/* Icon + Titel */
.training-card-meta {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 5px;
}
.training-card-icon {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       14px;
  line-height:     1;
}
.training-card-icon img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  filter: brightness(5) invert(1); /* macht das Icon weiß */
}
.training-card-title {
  font-size:      clamp(40px, 3vw, 45px);
  color:          var(--black);
  letter-spacing: .01em;
  line-height:    1;
}
.training-card--featured .training-card-title { color: var(--red); }
.training-card-text {
  font-size:   0.85rem;
  font-weight: 600;
  line-height: 1.2;
  color:       #3a3028;
}
.training-card--sparring .training-card-text {
  color: rgba(243,232,215,.70);  /* z.B. heller auf dunklem Bild */
}
.training-card--athletik .training-card-text {
  color: rgba(243,232,215,.70);  /* z.B. dunkler auf hellem Bild */
}
/* ── Responsive ── */
@media (max-width: 860px) {
  .training-grid  { grid-template-columns: 1fr; gap: 10px;}
  .training-card  { aspect-ratio: 1 / 1.25; width: 90%; margin-right: auto; margin-left: auto;}   /* Mobile: breiter, kürzer */
  .training-card-photo { height: 75%;}        /* Foto-Anteil leicht anpassen */
  .training-card-body { top: 60%;}
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .training-grid { grid-template-columns: 1fr; gap: 30px; }
  .training-card-img,
  .training-card-img--placeholder { height: 200px; }
}

/* ══════════════════════════════════════════════════════════════════
   SEKTION 4: ANFÄNGERKURS
   ══════════════════════════════════════════════════════════════════ */
.anfaengerkurs {
  position: relative;
  overflow: hidden;
  padding:  var(--section-py) 0;
}

/* Hintergrundbild — wie Hero/Philosophie */
.anfaengerkurs-bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  background: var(--red); /* Fallback */
}
.anfaengerkurs-bg--no-img {
  background: var(--red-dark);
}
.anfaengerkurs-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
  opacity:    1; /* Bild dezent, Rot bleibt dominant */
}
/* Roter Overlay — Markenpräsenz sichern */
.anfaengerkurs-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(163, 18, 35, .0);
}

/* Container über dem Bild */
.anfaengerkurs > .container {
  position: relative;
  z-index:  1;
}

/* 2-Spalten-Grid */
.anfaengerkurs-grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items:           start;
}

/* ── Linke Seite ── */
.anfaengerkurs-title {
  font-size:     clamp(60px, 8vw, 100px);
  color:         var(--paper);
  line-height:   .88;
  margin-bottom: 28px;
}

.anfaengerkurs-stamp {
  display:       inline-block;
  margin-bottom: 28px;
  font-size:     1.2rem;        /* +20% von 1rem */
  line-height:   1.3;
  transform:     rotate(-4deg);
  color:         var(--paper);  /* schwarz */
  border-color:  var(--paper);  /* schwarz */
}

.anfaengerkurs-list {
  list-style:    none;
  margin-bottom: 32px;
}
.anfaengerkurs-list li {
  font-size:     .88rem;
  font-weight:   500;
  color:         rgba(243,232,215,.9);
  padding:       7px 0;
  border-bottom: 1px solid rgba(243,232,215,.15);
  display:       flex;
  align-items:   center;
  gap:           10px;
}
.anfaengerkurs-list li::before {
  content:    '✓';
  color:      var(--paper);
  font-weight: 700;
  flex-shrink: 0;
  font-size:  .8rem;
}

.anfaengerkurs-price        { 
      display:        flex;
  flex-direction: column;
  gap:            4px;
  align-items:    center;      /* zentriert */
  text-align:     center;
  border:         1px solid rgba(243,232,215,.45); /* feiner Rahmen */
  padding:        20px 28px;
  margin-top:     8px;
}
.anfaengerkurs-price-label  {
  font-family:    var(--font-accent);
  font-size:      .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          rgba(243,232,215,.7);
}
.anfaengerkurs-price-amount {
  font-family: var(--font-display);
  font-size:   clamp(48px, 6vw, 72px);
  color:       var(--paper);
  line-height: 1;
}
.anfaengerkurs-price-sub {
  font-size:      .72rem;
  letter-spacing: .12em;
  color:          rgba(243,232,215,.65);
  text-transform: uppercase;
}

/* ── Rechte Seite: Formular ── */
.anfaengerkurs-form-wrap {
  position:            relative;
  overflow:            hidden;
  padding:             20px;
  min-width:             0;
  background-image: url('assets/grafik/boxen-anfaengerkurs-formular-HG.jpg');
  background-size:     103% 103%;
  background-position: center;
  background-repeat:   no-repeat;
  background-color:    rgba(0,0,0,.35); /* Fallback bis Bild eingebunden */
}

.anfaengerkurs-form-title {
  font-size:      clamp(30px, 4vw, 40px);
  color:          var(--black);
  margin-bottom:  28px;
  padding-top: 10px;
  letter-spacing: .02em;
}

.anfaengerkurs-form        { display: flex; flex-direction: column; gap: 16px; }
.form-row                  { display: grid; grid-template-columns: 1fr; gap: 12px; }
.form-group                { display: flex; flex-direction: column; gap: 6px; }

.form-group label {
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--black);   /* schwarz */
}
.form-group input,
.form-group select {
  background: rgba(255,255,255,.15);
  border:     1px solid rgba(0,0,0,.55);
  color:      var(--black);
  padding:    12px 14px;
  font-size:  .88rem;
  outline:    none;
  transition: border-color var(--dur) var(--ease);
}
.form-group input::placeholder { color: rgba(0,0,0,.95); }
.form-group input:focus,
.form-group select:focus       { border-color: var(--black); }
.form-group select option      { background: var(--white); color: var(--black); }

.form-check              { display: flex; align-items: flex-start; gap: 10px; }
.form-check input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--black);
}
.form-check label {
  font-size:   .78rem;
  color:       var(--black);     /* schwarz */
  line-height: 1.5;
}
.form-check label a { color: var(--black); text-decoration: underline; }

/* Submit Button — schwarz, Text 30% größer */
.anfaengerkurs-submit {
  width:       100%;
  text-align:  center;
  padding:     5px;
  font-family: var(--font-display);
  font-size:   calc(1.3rem * 1.3);  /* +30% = ~1.43rem */
  letter-spacing: .1em;
  text-transform: uppercase;
  background:  var(--red-dark);
  color:       var(--paper);
  border:      2px solid transparent;
  cursor:      pointer;
  transition:  background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.anfaengerkurs-submit:hover {
  background: var(--black-deep);
  color:      var(--white);
}
.anfaengerkurs-form-hint {
  font-size:   .85rem;
  font-weight: 600;
  line-height: 1.6;
  color:       var(--black);
  opacity:     .8;
  margin-top:  10px;
  text-align:  center;
}
.anfaengerkurs-submit:disabled {
  opacity: .7;
  cursor:  default;
}

/* Statusmeldungen nach Absenden */
.form-status {
  font-size:    .82rem;
  font-weight:  600;
  line-height:  1.5;
  margin-top:   14px;
  padding:      12px 14px;
  text-align:   center;
}
.form-status--success {
  background:  rgba(17,17,17,.9);
  color:       var(--paper);
  border-left: 3px solid var(--red);
}
.form-status--error {
  background:  rgba(163,18,35,.12);
  color:       var(--black);
  border-left: 3px solid var(--red);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .anfaengerkurs-grid     { grid-template-columns: 1fr; gap: 40px; }
  .form-row               { grid-template-columns: 1fr; }
  .anfaengerkurs-form-wrap { padding: 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   SEKTION 5: WEG IN DIE SCHMIEDE
   ══════════════════════════════════════════════════════════════════ */
.weg { position: relative; overflow: hidden; }

/* Hintergrundbild — wie Hero/Philosophie/Anfängerkurs */
.weg-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.weg-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
  opacity:    1;
}
.weg-bg--no-img { background: transparent; }

/* Container über dem Bild */
.weg > .container {
  position: relative;
  z-index:  1;
}

.weg-header {
  text-align:    center;
  margin-bottom: 48px;
}
.weg-title {
  font-size:   clamp(26px, 3.6vw, 48px);
  color:       var(--black);
  line-height: .92;
  margin-top:  14px;
}

/* 3-Spalten-Layout: Foto | Mitte (gestapelte Karten) | Foto */
.weg-layout {
  display:               grid;
  grid-template-columns: .8fr 2.4fr .8fr;
  gap:                   0;
  align-items:           stretch;
}

/* Mittelblock: Karten gestapelt, ODER dazwischen */
.weg-middle {
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

/* ── Fotos links/rechts ── */
.weg-photo {
  overflow:  hidden;
  min-width: 0;
  position:  relative;   /* Anker für absolutes Bild */
}
.weg-photo img,
.weg-photo-img,
img.weg-photo-img {
  position:   absolute;  /* füllt die Spalte, ohne ihre Höhe zu bestimmen */
  inset:      0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  display:      block;
}

/* ── Karte: Hintergrund-Layer + Content-Body ── */
.weg-card {
  position:  relative;
  overflow:  hidden;
  min-width: 0;
}
.weg-card-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.weg-card-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
}
.weg-card-bg--no-img { background: var(--beige); }

/* Layer 1: Content über dem Bild — zentriert */
.weg-card-body {
  position:   relative;
  z-index:    1;
  padding:    44px 40px 40px;
  text-align: center;
}


/* WEG 1 / WEG 2 Badge */
.weg-badge {
  display:        block;
  background:     var(--red);
  color:          var(--paper);
  font-family:    var(--font-display);
  font-size:      .9rem;
  letter-spacing: .1em;
  padding:        6px 16px;
  transform:      rotate(-3deg);
  margin-right: auto;
  width: fit-content;
}

.weg-card-title {
  font-size:     clamp(30px, 2.9vw, 37px);
  color:         var(--black);
  line-height:   1.05;
  margin-bottom: 26px;
}
.weg-card-title span {
  display:        block;
  font-family:    var(--font-body);
  font-size:      .45em;
  font-weight:    600;
  letter-spacing: .1em;
  color:          var(--gray);
  text-transform: uppercase;
  margin-top:     4px;
}

/* ── Schritt-Flow — Standard: HORIZONTAL + zentriert ── */
.weg-steps {
  display:         flex;
  flex-direction:  row;
  align-items:     flex-start;
  justify-content: center;
  flex-wrap:       nowrap;
  gap:             clamp(8px, 2.5vw, 32px);
  margin-bottom:   24px;
}
.weg-step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            10px;
  flex:           0 1 auto;
  min-width:      0;
}
.weg-step-icon {
  width:           70px;
  height:          70px;
  background:      transparent;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .55rem;
  letter-spacing:  .04em;
  color:           var(--black);
  flex-shrink:     0;
}
.weg-step-icon img {
  width:  80%;
  height: 80%;
  object-fit: contain;
}
.weg-step span {
  font-size:      .64rem;
  font-weight:    600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--black);
  line-height:    1.25;
}
/* Pfeil horizontal, auf Icon-Höhe ausgerichtet */
.weg-arrow {
  font-size:   2rem;
  color:       var(--red);
  flex-shrink: 0;
  align-self:  flex-start;
  margin-top:  20px;   /* mittig zum 70px-Icon */
  transform:   none;
}

.weg-caption {
  font-size:   .9rem;
  font-weight: 600;
  line-height: 1.5;
  color:       #3a3028;
  text-align:  center;
  margin-bottom: 10px;
}

/* ── ODER Badge: sitzt auf der Naht zwischen den Karten ── */
.weg-oder {
  display:         flex;
  justify-content: center;
  margin:          -30px 0;   /* überlappt Karte oben & unten */
  position:        relative;
  z-index:         5;
}
.weg-oder span {
  width:           60px;
  height:          60px;
  border-radius:   50%;
  background:      var(--black);
  color:           var(--gold);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       .95rem;
  letter-spacing:  .1em;
  border:          3px solid var(--gold);
  outline:         1px solid var(--black);
  outline-offset:  3px;
  box-shadow:      0 0 0 1px var(--black);
}

/* ── Responsive: Fotos ausblenden, Mitte volle Breite ── */
@media (max-width: 980px) {
  .weg-layout      { grid-template-columns: 1fr; }
  .weg-photo       { display: none; }   /* mobil/tablet ohne Fotos */
}

/* Sehr schmal: Icons/Labels kleiner, damit 3 Schritte passen */
@media (max-width: 480px) {
  .weg-step span   { font-size: .56rem; letter-spacing: .04em; }
  .weg-step-icon   { width: 54px; height: 54px; }
  .weg-arrow       { font-size: 1.4rem; margin-top: 15px; }
  .weg-card-body   { padding: 32px 20px; }
}


/* ══════════════════════════════════════════════════════════════════
   SEKTION 6: MITGLIEDSCHAFT
   ══════════════════════════════════════════════════════════════════ */
.mitgliedschaft-header {
  text-align:    center;
  max-width:     640px;
  margin:        0 auto 56px;
}
.mitgliedschaft-header .kicker { justify-content: center; }
.mitgliedschaft-title {
  font-size:     clamp(28px, 4vw, 52px);
  color:         var(--paper);
  margin-bottom: 14px;
}
.mitgliedschaft-lead {
  font-size: .9rem;
  color:     var(--gray-light);
}

/* 3-Spalten-Grid */
.mitgliedschaft-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   20px;
  margin-bottom:         16px;
}

/* Dezenter Einschreibgebühr-Hinweis unterhalb der Cards */
.mitgliedschaft-fee-note {
  font-size:      .78rem;
  color:          var(--gray-light);
  text-align:     center;
  padding-bottom: 32px;
  border-bottom:  1px solid rgba(255,255,255,.06);
  margin-bottom:  32px;
  letter-spacing: .15em;
}

/* Basis-Karte: Hintergrund-Layer + Content-Body (analog Training-Cards) */
.mitgliedschaft-card {
  position:  relative;
  overflow:  hidden;
  min-width: 0;
}

/* Layer 0: Hintergrund-Grafik (vollflächig) */
.mitgliedschaft-card-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.mitgliedschaft-card-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;     /* streckt exakt auf Kartengröße, wie bei Training */
  display:    block;
}
.mitgliedschaft-card-bg--no-img {
  background: #1a1a1a;  /* bisheriger Karten-Hintergrund als Fallback */
}

/* Layer 1: Content über dem Bild */
.mitgliedschaft-card-body {
  position: relative;
  z-index:  1;
  padding:  32px 28px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
}

.mitgliedschaft-card-freq {
  font-size:      .78rem;
  font-weight:    600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--paper);
  margin-bottom:  14px;
}

.mitgliedschaft-card-price {
  display:        flex;
  align-items:    baseline;
  gap:            6px;
  margin-bottom:  6px;
}
.mitgliedschaft-card-price .amount {
  font-family: var(--font-display);
  font-size:   clamp(36px, 4vw, 48px);
  color:       var(--paper);
  line-height: 1;
}
.mitgliedschaft-card-price .period {
  font-size: .78rem;
  color:     var(--paper);
}

.mitgliedschaft-card-bind {
  font-size:     .76rem;
  color:         var(--paper);
  margin-bottom: 22px;
}

.mitgliedschaft-card-list li {
  font-size:     .85rem;
  color:         var(--gray-light);
  padding:       8px 0;
  border-top:    1px solid rgba(255,255,255,.06);
  display:       flex;
  align-items:   center;
  gap:           8px;
}
.mitgliedschaft-card-list li::before {
  content: '✓';
  color:   var(--red);
}

/* Featured Karte (3x/Woche) — roter Overlay statt voller Background,
   damit das Hintergrundbild sichtbar bleibt */
.mitgliedschaft-card--featured .mitgliedschaft-card-bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(163, 18, 35, .1);  /* roter Ton über dem Bild */
}
.mitgliedschaft-card--featured .mitgliedschaft-card-freq,
.mitgliedschaft-card--featured .mitgliedschaft-card-bind,
.mitgliedschaft-card--featured .mitgliedschaft-card-list li,
.mitgliedschaft-card--featured .mitgliedschaft-card-price .period {
  color: rgba(243,232,215,.85);
}
.mitgliedschaft-card--featured .mitgliedschaft-card-price .amount { color: var(--white); }
.mitgliedschaft-card--featured .mitgliedschaft-card-list li::before { color: var(--paper); }
.mitgliedschaft-card--featured .mitgliedschaft-card-list li { border-color: rgba(243,232,215,.18); }

/* Einschreibgebühr-Karte — bewusst NICHT wie ein dritter Tarif */
.mitgliedschaft-card--fee {
  /* border: 1px dashed rgba(255,255,255,.25); */
}
.mitgliedschaft-card--fee .mitgliedschaft-card-body {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  justify-content: center;
  height:          100%;
}
.mitgliedschaft-fee-icon {
  width:           80px;
  height:          80px;
  border-radius:   50%;
  background:      rgba(255,255,255,.0);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  margin-bottom:   15px;
}
.mitgliedschaft-card--fee .mitgliedschaft-card-freq { font-size: .7rem; }
.mitgliedschaft-card--fee .mitgliedschaft-card-price { justify-content: center; margin-bottom: 4px; }
.mitgliedschaft-card--fee .mitgliedschaft-card-bind  { margin-bottom: 0; }

/* Hinweis-Block unten */
.mitgliedschaft-note {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             20px;
  border-top:      1px solid rgba(255,255,255,.08);
  padding-top:     32px;
}
.mitgliedschaft-note p {
  font-size:  .85rem;
  max-width:  620px;
  color:      var(--gray-light);
}
.mitgliedschaft-note strong { color: var(--paper); }
.mitgliedschaft-note-ctas {
  display:     flex;
  gap:         12px;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .mitgliedschaft-grid { grid-template-columns: 1fr; }
  .mitgliedschaft-note { flex-direction: column; align-items: flex-start; }
   .mitgliedschaft-note-ctas { width: 100%; }
  .mitgliedschaft-note-ctas .btn-primary,
  .mitgliedschaft-note-ctas .btn-secondary {
    flex:       1;
    text-align: center;
  }
}


/* ══════════════════════════════════════════════════════════════════
   SEKTION 7: TRAININGSZEITEN
   ══════════════════════════════════════════════════════════════════ */
.zeiten { position: relative; overflow: hidden; }

/* Hintergrundbild — wie Sektion "Weg in die Schmiede" */
.zeiten-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.zeiten-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
  opacity:    1;   /* dezent, Paper-Look bleibt dominant */
}
.zeiten-bg--no-img { background: transparent; }

/* Container über dem Bild */
.zeiten > .container {
  position: relative;
  z-index:  1;
}

.zeiten-header {
  text-align:    center;
  margin-bottom: 48px;
}
.zeiten-header .kicker { justify-content: center; }
.zeiten-title {
  font-size:   clamp(28px, 4vw, 52px);
  color:       var(--black);
}

.zeiten-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   20px;
  margin-bottom:         32px;
}

/* Karte: Hintergrund-Layer + Content-Body (analog Training-/Mitgliedschaft-Cards) */
.zeiten-card {
  position:  relative;
  overflow:  hidden;
  /*border:    0px solid rgba(0,0,0,.0); */
  min-width: 0; 
}

/* Layer 0: Hintergrund-Grafik (vollflächig) */
.zeiten-card-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.zeiten-card-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;   /* streckt exakt auf Kartengröße, responsiv */
  display:    block;
}
.zeiten-card-bg--no-img {
  background: rgba(0,0,0,.03);  /* bisheriger Karten-Hintergrund als Fallback */
}

/* Layer 1: Content über dem Bild */
.zeiten-card-body {
  position:   relative;
  z-index:    1;
  padding:    32px 24px;
  text-align: center;
}

.zeiten-card-day {
  font-family:    var(--font-display);
  font-size:      1.4rem;
  letter-spacing: .04em;
  color:          var(--black);
  margin-bottom:  14px;
}

.zeiten-card-time {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 3vw, 38px);
  color:          var(--black);
  line-height:    1;
  margin-bottom:  10px;
}

.zeiten-card-focus {
  font-size:      .76rem;
  font-weight:    600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--gray);
}

/* Hervorgehobener Tag (Mittwoch / Sparring) — roter Overlay über dem Bild */
.zeiten-card--featured { border-color: var(--black); }
.zeiten-card--featured .zeiten-card-bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(17, 17, 17, .0);
}
.zeiten-card--featured .zeiten-card-day,
.zeiten-card--featured .zeiten-card-focus { color: var(--paper); }
.zeiten-card--featured .zeiten-card-time  { color: var(--paper); }

.zeiten-note {
  position:   relative;
  z-index:    1;
  text-align: center;
  font-size:  .82rem;
  color:      var(--gray);
}

@media (max-width: 700px) {
  .zeiten-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   SEKTION 8: GALERIE
   ══════════════════════════════════════════════════════════════════ */
.galerie-header {
  text-align:    center;
  margin-bottom: 40px;
}
.galerie-header .kicker { justify-content: center; }
.galerie-title {
  font-size:   clamp(24px, 3.5vw, 48px);
  color:       var(--paper);
}

/* ── 8-Foto-Grid: 4 Spalten × 2 Zeilen ── */
.galerie-grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   4px;
  margin-bottom:         48px;
}

.galerie-item {
  overflow:    hidden;
  aspect-ratio: 1 / 1;    /* quadratisch — skaliert immer proportional */
  background:  #1a1a1a;   /* Fallback bis Foto geladen */
}

.galerie-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.galerie-item:hover img { transform: scale(1.06); }

/* Fallback wenn Bild nicht gefunden */
.galerie-img--missing {
  background: #222;
  width:      100%;
  height:     100%;
  display:    block;
}

/* ── Video-Block ── */
.galerie-video {
  text-align:    center;
  max-width:     860px;
  margin:        0 auto;
}
.galerie-video-label {
  font-family:    var(--font-accent);
  font-size:      .72rem;
  letter-spacing: .22em;
  color:          var(--red);
  margin-bottom:  8px;
}
.galerie-video-title {
  font-size:      clamp(18px, 2vw, 24px);
  color:          var(--paper);
  font-family:    var(--font-body);
  font-weight:    500;
  margin-bottom:  24px;
}

/* 16:9-Wrapper mit Padding-Trick — iframe immer proportional */
.galerie-video-wrap {
  position:    relative;
  width:       100%;
  padding-top: 56.25%;   /* 16:9 */
  background:  #111;
}
.galerie-video-wrap iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   none;
}
/* ── Responsive ── */
@media (max-width: 860px) {
  .galerie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .galerie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
}

/* ══════════════════════════════════════════════════════════════════
   SEKTION 9: TEAM
   ══════════════════════════════════════════════════════════════════ */
.team-header {
  text-align:    center;
  max-width:     640px;
  margin:        0 auto 52px;
}
.team-header .kicker { justify-content: center; }
.team-title {
  font-size:     clamp(26px, 3.5vw, 48px);
  color:         var(--paper);
  margin-bottom: 14px;
}
.team-lead {
  font-size: .9rem;
  color:     var(--gray-light);
}

/* ── Sektion Hintergrundbild ── */
.team { position: relative; overflow: hidden; }
.team-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.team-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
  opacity:    .55;
}
.team-bg--no-img { background: transparent; }
.team > .container { position: relative; z-index: 1; }

.team-header {
  text-align:    center;
  max-width:     640px;
  margin:        0 auto 52px;
}
.team-header .kicker { justify-content: center; }
.team-title {
  font-size:     clamp(26px, 3.5vw, 48px);
  color:         var(--paper);
  margin-bottom: 14px;
}
.team-lead {
  font-size: .9rem;
  color:     var(--gray-light);
}

/* ── Günter: volle Breite ── */
.team-main {
  margin-bottom: 24px;
}

/* ── Basis-Karte ── */
.team-card {
  position:  relative;
  border:    5px solid rgba(154,154,147,.9);
  min-width: 0;
    
}
.team-card::after {
  content:        '';
  position:       absolute;
  inset:          -5px;
  border:         6px solid rgba(154,154,147,.9);
  z-index:        20;
  pointer-events: none;
  filter:         url(#rough-border);
}
/* Hintergrundbild-Layer — analog Training/Mitgliedschaft */
.team-card-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
  overflow: hidden;
}
.team-card-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
}
.team-card-bg--no-img { background: var(--black); }

/* Günter — Foto links, Bio rechts (horizontal) */
.team-card--photo {
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
}
.team-card-img-wrap {
  width:       38%;
  flex-shrink: 0;
  overflow:    hidden;
  background:  #111;
  position:    relative;
  z-index:     1;   /* Portrait-Foto über dem Card-BG */
}
.team-card-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .45s var(--ease);
}
.team-card--photo:hover .team-card-img { transform: scale(1.04); }
.team-card-img-wrap--missing {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gray);
  font-size:       .7rem;
  letter-spacing:  .14em;
}

/* Text-Karten (Said, Richard, Patrick) */
.team-card--text { width: 100%; }

/* Body — immer über dem Hintergrundbild */
.team-card-body {
  position: relative;
  z-index:  1;
  padding:  32px 36px ;
}

.team-card-role {
  font-family:    var(--font-accent);
  font-size:      .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  15px;
}
team-card-name {
  font-size:     clamp(22px, 2.5vw, 32px);
  color:         var(--paper);
  line-height:   1;
  margin-bottom: 8px;   /* weniger Abstand, Titel folgt direkt */
}

/* Staatlich geprüfter Boxtrainer */
.team-card-title {
  font-family:    var(--font-body);
  font-size:      .78rem;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  18px;
}

.team-card-bio {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  margin-bottom: 10px;
  margin-top: 15px;
}
.team-card-bio p {
  font-size:   .88rem;
  font-weight: 500;
  line-height: 1.75;
  color:       var(--gray-light);
}
.team-card-bio-note {
  font-size:   .8rem !important; 
  font-style:  italic;
  color:       var(--paper) !important;
  padding-top: 7px;
}

/* ── Said — volle Breite, unterhalb Günter ── */
.team-said {
  margin-bottom: 24px;
}
.team-said .team-card--text { width: 100%; }

/* ── Richard + Patrick — 2-Spalten-Grid ── */
.team-staff {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   24px;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .team-staff { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .team-card--photo {
    flex-direction: column;
  }
  .team-card-img-wrap {
    width:        100%;
    aspect-ratio: 2 / 3;
    height:       auto;
  }
  .team-card-body { padding: 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   SEKTION 10: FAQ
   ══════════════════════════════════════════════════════════════════ */
.faq { position: relative; overflow: hidden; }

/* Hintergrundbild */
.faq-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.faq-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
  opacity:    .95;
}
.faq-bg--no-img { background: transparent; }
.faq > .container { position: relative; z-index: 1; }

.faq-header {
  text-align:    center;
  margin-bottom: 48px;
}
.faq-header .kicker { justify-content: center; }
.faq-title {
  font-size:   clamp(28px, 4vw, 56px);
  color:       var(--paper);
}
.faq .kicker {
  color: var(--paper);
}
.faq .kicker::before,
.faq .kicker::after {
  background: var(--paper);
}
/* Accordion-Liste */
.faq-list {
  max-width:  800px;
  margin:     0 auto;
  display:    flex;
  flex-direction: column;
  gap:        2px;
}

/* Einzelner FAQ-Eintrag */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,.18); }

/* Frage (klickbarer Header) */
.faq-question {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         20px 0;
  font-family:     var(--font-display);
  font-size:       clamp(20px, 2.5vw, 30px);
  color:           var(--paper);
  letter-spacing:  .04em;
  cursor:          pointer;
  list-style:      none;  /* default Dreieck entfernen */
  gap:             12px;
  transition:      color var(--dur) var(--ease);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content:     '+';
  font-family: var(--font-body);
  font-size:   1.4rem;
  font-weight: 300;
  color:       var(--paper);
  flex-shrink: 0;
  line-height: 1;
  transition:  transform var(--dur) var(--ease);
}
.faq-item[open] .faq-question { color: var(--paper); }
.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
  color:     var(--white);
}
.faq-question:hover { color: var(--paper); opacity: .8; }

/* Antwort */
.faq-answer {
  padding:        0 0 20px;
  padding-right:  40px;
}
.faq-answer p {
  font-size:   .9rem;
  font-weight: 500;
  line-height: 1.55;
  color:       var(--paper);
}

/* ══════════════════════════════════════════════════════════════════
   SEKTION 11: KONTAKT
   ══════════════════════════════════════════════════════════════════ */
.kontakt { position: relative; overflow: hidden; overflow-x: hidden;}

.kontakt-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.kontakt-bg-img {
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
  opacity:    1;
}
.kontakt-bg--no-img { background: transparent; }
.kontakt > .container { position: relative; z-index: 1; }

/* 2-Spalten: Info links | Karte rechts */
.kontakt-grid {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap:                   56px;
  align-items:           start;
}

.kontakt-title {
  font-size:     clamp(28px, 4vw, 56px);
  color:         var(--black);
  margin-bottom: 16px;
}
.kontakt-lead {
  font-size:     .9rem;
  font-weight:   600;
  color:         var(--gray);
  line-height:   1.75;
  margin-bottom: 36px;
}

/* Kontaktliste */
.kontakt-list {
  list-style:    none;
  margin-bottom: 20px;
  display:       flex;
  flex-direction: column;
  gap:           10px;
}
.kontakt-list li {
  display:   flex;
  gap:       20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-bottom: 18px;
}
.kontakt-list-label {
  font-size:      .6rem;
  font-weight:    600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--red);
  flex-shrink:    0;
  width:          100px;
  padding-top:    4px;
}
.kontakt-list-value {
  font-size:   .9rem; 
  font-weight: 600;
  color:       var(--gray);
  line-height: 1.5;
}
a.kontakt-list-value {
  transition: color var(--dur) var(--ease);
}
a.kontakt-list-value:hover { color: var(--red); }

/* CTAs */
.kontakt-ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       14px;
}

/* Google Maps */
.kontakt-map {
  width:    100%;
  
  position: relative;
  /*border:    5px solid rgba(133,11,11,.7);*/
  padding: 10px 10px 5px; 
  margin-top: 20px;
}
.kontakt-map-frame {
  width:        100%;
  
  aspect-ratio: 4 / 3;
  border:       none;
  display:      block;
  filter:       grayscale(1) contrast(1.1);  /* Fight-Poster-Optik */
}
.kontakt-info,
.kontakt-map {
  min-width: 0;
  max-width: 100%;
}
.kontakt-map-rahmen {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     fill;    /* Rahmen dehnt sich exakt auf Kartengröße */
  pointer-events: none;    /* Karte bleibt klickbar/scrollbar */
  z-index:        2;       /* über iframe und Overlay */
}
@media (max-width: 860px) {
  .kontakt-grid        { grid-template-columns: 1fr;}
  .kontakt-map         { padding: 12px; }  /* Rahmen-Padding auf Mobile kleiner */
  .kontakt-map-frame   { aspect-ratio: 16 / 9; }
  .kontakt-map-rahmen  { inset: 0; }       /* Rahmen-PNG passt sich an */
 .kontakt-info,
  .kontakt-map {
    width: 100%;
    max-width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */
.footer {
  background:  var(--black-deep);
  border-top:  1px solid rgba(163,18,35,.2);
  padding:     56px 0 32px;
}

.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   48px;
  margin-bottom:         48px;
}

/* Brand */
.footer-logo {
  font-family:    var(--font-display);
  font-size:      1.4rem;
  letter-spacing: .04em;
  color:          var(--white);
  margin-bottom:  8px;
}
.footer-logo span { color: var(--red); }
.footer-sub {
  font-size: .8rem;
  color:     var(--light-gray);
  margin-top: 15px;
}

/* Nav */
.footer-nav-title {
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--gray);
  margin-bottom:  16px;
}
.footer-nav ul,
.footer-legal ul {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        10px;
}
.footer-nav a,
.footer-legal a {
  font-size:  .82rem;
  color:      var(--gray-light);
  transition: color var(--dur) var(--ease);
}
.footer-nav a:hover,
.footer-legal a:hover { color: var(--paper); }

/* Social Icons */
.footer-social {
  display:     flex;
  gap:         16px;
  margin-top:  24px;
}
.footer-social a {
  color:      var(--gray);
  transition: color var(--dur) var(--ease);
}
.footer-social a:hover { color: var(--paper); }

/* Bottom Bar */
.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-top:      1px solid rgba(255,255,255,.06);
  padding-top:     24px;
  gap:             16px;
  flex-wrap:       wrap;
}
.footer-bottom p {
  font-size: .75rem;
  color:     var(--gray);
}
.footer-badge .badge-round {
  width:     60px;
  height:    60px;
  font-size: .36rem;
}
.footer-logo-img {
  height:    100px;   /* etwas größer als Nav, passt zum Footer-Kontext */
  width:     auto;
  display:   block;
}
.bxf-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.bxf-modal-content {
  background: #111820;
  color: #f2f2f2;
  width: min(92%, 920px);
  margin: 40px auto;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  font-family: inherit;
}

.bxf-modal-header {
  padding: 34px 36px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}

.bxf-modal-header h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
}

.bxf-modal-body {
  padding: 36px;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.45;
}

.bxf-modal-body p {
  margin: 0 0 32px;
}

.bxf-modal-body a {
  color: #ffffff;
  text-decoration: none;
}

.bxf-modal-body a:hover {
  text-decoration: underline;
}

.bxf-close {
  position: absolute;
  top: 34px;
  right: 42px;
  background: none;
  border: none;
  color: #cfd4d8;
  font-size: 56px;
  line-height: 1;
  cursor: pointer;
}

.bxf-modal-footer {
  padding: 26px 36px 32px;
  border-top: 1px solid rgba(255,255,255,0.16);
  text-align: right;
}

.bxf-modal-footer button {
  background: #8d969f;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-size: 24px;
  cursor: pointer;
}

.bxf-modal-footer button:hover {
  background: #a1abb4;
}

@media (max-width: 640px) {
  .bxf-modal-content {
    margin: 20px auto;
  }

  .bxf-modal-header,
  .bxf-modal-body,
  .bxf-modal-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .bxf-close {
    top: 24px;
    right: 26px;
    font-size: 44px;
  }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════
   COOKIE-CONSENT (DSGVO) — Fight-Poster-Stil
   ══════════════════════════════════════════════════════════════════ */
.consent {
  position: fixed;
  left:     0;
  right:    0;
  bottom:   0;
  z-index:  9999;
  background: var(--black-deep, #0d0d0d);
  border-top: 3px solid var(--red);
  box-shadow: 0 -8px 40px rgba(0,0,0,.6);
  animation: consent-in .4s var(--ease, ease) both;
}
@keyframes consent-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.consent[hidden] { display: none; }

.consent-inner {
  max-width:   1100px;
  margin:      0 auto;
  padding:     22px 24px;
  display:     flex;
  align-items: center;
  gap:         28px;
}
.consent-title {
  font-family:    var(--font-display, sans-serif);
  font-size:      1.1rem;
  letter-spacing: .06em;
  color:          var(--paper);
  margin-bottom:  6px;
}
.consent-body {
  font-size:   .82rem;
  line-height: 1.6;
  color:       var(--gray-light, #b0a898);
  max-width:   680px;
}
.consent-body a {
  color:           var(--red);
  text-decoration: underline;
}
.consent-actions {
  display:     flex;
  gap:         12px;
  flex-shrink: 0;
  margin-left: auto;
}
.consent-btn {
  font-family:    var(--font-display, sans-serif);
  font-size:      .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding:        12px 22px;
  cursor:         pointer;
  border:         2px solid transparent;
  transition:     background var(--dur, .2s) var(--ease, ease),
                  color var(--dur, .2s) var(--ease, ease),
                  border-color var(--dur, .2s) var(--ease, ease);
  white-space:    nowrap;
}
.consent-btn--decline {
  background:   transparent;
  color:        var(--gray-light, #b0a898);
  border-color: rgba(255,255,255,.25);
}
.consent-btn--decline:hover {
  color:        var(--paper);
  border-color: var(--paper);
}
.consent-btn--accept {
  background: var(--red);
  color:      var(--paper);
}
.consent-btn--accept:hover {
  background: var(--black);
  color:      var(--paper);
}

@media (max-width: 720px) {
  .consent-inner {
    flex-direction: column;
    align-items:    stretch;
    gap:            16px;
    padding:        20px;
  }
  .consent-actions { margin-left: 0; }
  .consent-btn     { flex: 1; text-align: center; }
}


/* ══════════════════════════════════════════════════════════════════
   IUBENDA COOKIE CONSENT — Boxerschmiede Look
   Externer Iubenda-Banner wird optisch an das Beispiel angepasst.
   ══════════════════════════════════════════════════════════════════ */

/* Floating Cookie-Einstellungsbutton unten rechts ausblenden */
.iubenda-tp-btn,
.iubenda-cs-preferences-link,
button.iubenda-tp-btn,
a.iubenda-tp-btn,
#iubenda-cs-banner .iubenda-cs-opt-group-custom,
#iubenda-cs-banner .iubenda-cs-customize-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Banner-Grundfläche */
#iubenda-cs-banner,
#iubenda-cs-banner.iubenda-cs-default,
#iubenda-cs-banner.iubenda-cs-visible {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 2147483647 !important;
  width: 100% !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
}

#iubenda-cs-banner .iubenda-cs-container,
#iubenda-cs-banner .iubenda-cs-content,
#iubenda-cs-banner .iubenda-cs-rationale {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--black-deep) !important;
  color: var(--gray-light) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,.6) !important;
}

#iubenda-cs-banner .iubenda-cs-content {
  border-top: 3px solid var(--red) !important;
  padding: 24px clamp(20px, 6vw, 96px) 28px !important;
}

#iubenda-cs-banner .iubenda-cs-rationale {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 28px !important;
  align-items: center !important;
}

/* Textblock */
#iubenda-cs-banner .iubenda-cs-title {
  display: block !important;
  margin: 0 0 8px !important;
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--paper) !important;
}

#iubenda-cs-banner .iubenda-cs-brand,
#iubenda-cs-banner .iubenda-cs-brand-badge,
#iubenda-cs-banner .iubenda-cs-close-btn,
#iubenda-cs-banner .iubenda-cs-expand-btn {
  display: none !important;
}

#iubenda-cs-banner .iubenda-cs-paragraph,
#iubenda-cs-banner .iubenda-banner-content,
#iubenda-cs-banner p {
  margin: 0 !important;
  max-width: 880px !important;
  font-size: .9rem !important;
  line-height: 1.65 !important;
  color: var(--gray-light) !important;
}

#iubenda-cs-banner a {
  color: var(--red) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Button-Gruppe */
#iubenda-cs-banner .iubenda-cs-opt-group,
#iubenda-cs-banner .iubenda-cs-opt-group-consent,
#iubenda-cs-banner .iubenda-cs-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

#iubenda-cs-banner button,
#iubenda-cs-banner .iubenda-cs-btn-primary,
#iubenda-cs-banner .iubenda-cs-accept-btn,
#iubenda-cs-banner .iubenda-cs-reject-btn {
  min-width: 150px !important;
  border-radius: 0 !important;
  padding: 14px 24px !important;
  font-family: var(--font-display) !important;
  font-size: .98rem !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

#iubenda-cs-banner .iubenda-cs-accept-btn,
#iubenda-cs-banner .iubenda-cs-btn-primary {
  background: var(--red) !important;
  border: 2px solid var(--red) !important;
  color: var(--white) !important;
}

#iubenda-cs-banner .iubenda-cs-reject-btn {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.35) !important;
  color: var(--gray-light) !important;
}

#iubenda-cs-banner .iubenda-cs-accept-btn:hover,
#iubenda-cs-banner .iubenda-cs-btn-primary:hover {
  background: var(--red-dark) !important;
  border-color: var(--red-dark) !important;
}

#iubenda-cs-banner .iubenda-cs-reject-btn:hover {
  border-color: var(--paper) !important;
  color: var(--paper) !important;
}

@media (max-width: 760px) {
  #iubenda-cs-banner .iubenda-cs-content {
    padding: 20px !important;
  }

  #iubenda-cs-banner .iubenda-cs-rationale {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  #iubenda-cs-banner .iubenda-cs-opt-group,
  #iubenda-cs-banner .iubenda-cs-opt-group-consent,
  #iubenda-cs-banner .iubenda-cs-buttons {
    width: 100% !important;
    justify-content: stretch !important;
  }

  #iubenda-cs-banner button,
  #iubenda-cs-banner .iubenda-cs-btn-primary,
  #iubenda-cs-banner .iubenda-cs-accept-btn,
  #iubenda-cs-banner .iubenda-cs-reject-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
  }
}