/* ==========================================================================
   powergym.css — Marken-Theme PowerGym
   Dunkles Premium-Design. Hexagon-System aus Vorlage/Designelemente.jpg:
   Hexagone in Gelb/Lime auf Schwarz (#D9DB58 → #55551A), teils mit
   Halftone-Linienmuster, dazu weißes Punktraster. Farben exakt übernommen.
   ========================================================================== */

:root {
  --bg: #0a0a0a;
  --surface: #121210;
  --ink: #f2f2ec;
  --muted: #9a9a8e;
  --line: rgba(242, 242, 236, 0.14);

  --accent: #bfc02e;
  --accent-bright: #d9db58;
  --accent-olive: #55551a;
  --accent-ink: #0a0a0a;
  --accent-text: #d9db58;
  --accent-soft: rgba(191, 192, 46, 0.14);

  --footer-bg: #060606;
  --footer-ink: #f2f2ec;
  --footer-muted: #8b8b80;

  --shadow: 0 1.75rem 4rem -1.5rem rgba(0, 0, 0, 0.65);

  /* Halftone-Linienmuster (diagonal, aus Designelemente.jpg) */
  --halftone: repeating-linear-gradient(
    45deg,
    rgba(217, 219, 88, 0.16) 0 2px,
    transparent 2px 12px
  );
  /* Weißes Punktraster */
  --dotgrid: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.6px);
}

body { background-color: var(--bg); }

/* Display-Typo: breit, schwer, kursiv — athletisch */
h1, h2, .hero h1, .section-head h2 {
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

@supports (font-stretch: 125%) {
  h1, h2, .hero h1, .section-head h2 { font-stretch: 125%; }
}

/* ---------- Hero ---------- */
.hero {
  background-image: var(--dotgrid);
  background-size: 26px 26px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 9rem;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.hero__content { position: relative; z-index: 1; }

/* Dekorative Hexagone (Inline-SVG im HTML, Parallax via JS) */
.hex-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.hex-deco--tl { top: 6%; left: -3%; width: clamp(9rem, 14vw, 15rem); }
.hex-deco--br { bottom: 4%; right: -4%; width: clamp(11rem, 17vw, 19rem); }
.hex-deco--tr { top: 10%; right: 8%; width: clamp(5rem, 8vw, 8rem); }

/* ---------- Karten ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent-olive));
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}

.card:hover { border-color: rgba(217, 219, 88, 0.35); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }

.card__icon {
  border-radius: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
}

/* ---------- Über uns ---------- */
.split-layout__media::after {
  content: "";
  position: absolute;
  inset: auto -6% -8% auto;
  width: 62%;
  aspect-ratio: 1;
  background: var(--halftone);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  z-index: 0;
}

.split-layout__media img {
  clip-path: polygon(25% 2%, 75% 2%, 99% 50%, 75% 98%, 25% 98%, 1% 50%);
}

/* ---------- Sektions-Dekor: Halftone-Streifen ---------- */
.section--lined { position: relative; }

.section--lined::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5rem;
  background: var(--halftone);
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, transparent, black 40%, black 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%, black 60%, transparent);
}

/* ---------- Öffnungszeiten ---------- */
.hours td { color: var(--muted); }

.hours th,
.hours td { border-bottom-color: var(--line); }

/* ---------- Kontakt ---------- */
.contact-form {
  background: var(--surface);
  box-shadow: var(--shadow);
}

.field input,
.field textarea { background: #0d0d0b; }

.contact-info__icon { border-radius: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }