/*
 * module-hg.css – Ergänzungen zur übernommenen Optik der bisherigen Website.
 *
 * hg.css ist die unveränderte style.css von hit-gym.de und wird nie von Hand geändert;
 * module.css wird aus dem CMS-Stylesheet erzeugt (scripts/erzeuge-module-css.py).
 * Alles, was darüber hinaus nötig ist, steht hier – jeder Block mit Begründung.
 */

/* 1. Schriftpfad: hg.css lädt die Schrift relativ ('fonts/…'), was von /assets/css/ aus ins Leere liefe.
      Dieselbe Schrift noch einmal mit dem tatsächlichen, unveränderten alten Pfad /fonts/ anmelden. */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/inter-v20-latin-regular.woff2') format('woff2'),
       url('/fonts/inter-v20-latin-regular.woff') format('woff');
}

/* 2. Inline-Stil der alten Seite als Klasse: Der HTML-Filter des CMS entfernt style-Attribute.
      Ersetzt style="padding-left:30px" im Abschnitt „Für jede Altersgruppe“. */
.hg-einzug { padding-left: 30px; }
@media (max-width: 560px) { .hg-einzug { padding-left: 0; } }

/* 3. Sprunglink: Die bisherige Website hatte keinen; das CMS gibt ihn aus (Tastaturbedienung).
      Er bleibt unsichtbar, bis er den Fokus bekommt – die Optik ändert sich dadurch nicht. */
.skip-link {
  /* ausserhalb des Sichtfelds, aber ohne negative Position (die erzeugt sonst Scrollbreite) */
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-200%);
  z-index: 10000;
  padding: 10px 16px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  transform: none;
}

/* 4. Sichtbarer Fokus: hg.css setzt keine Fokusstile, Tastaturbedienung war dadurch nicht erkennbar.
      Nur :focus-visible – mit der Maus bleibt alles wie bisher. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero a:focus-visible,
.cta a:focus-visible,
.footer a:focus-visible,
.hit-menu-nav a:focus-visible {
  outline-color: #fff;
}

/* 5. Zielbereich des Sprunglinks: main darf keinen eigenen Fokusrahmen zeigen, wenn er
      programmgesteuert angesprungen wird (tabindex="-1"). */
main:focus { outline: none; }

/* 6. Fuß: Die Kopfleiste liegt fest über der Seite (position:fixed in hg.css). Seiten des CMS,
      die nicht mit dem Titelbereich beginnen (Impressum, Datenschutz, CMS-Seiten, 404),
      brauchen deshalb Abstand nach oben, damit nichts unter der Leiste verschwindet. */
body.hg-innenseite main { padding-top: 110px; }
@media (max-width: 700px) { body.hg-innenseite main { padding-top: 150px; } }

/* 7. Startseiten-Abschnitte aus dem CMS: Das CMS umschließt jeden Abschnitt mit
      <section class="section …"><div class="container">. Die übernommenen Abschnitte bringen ihre
      Abstände selbst mit (.section-inner aus hg.css, Hintergrund über die Variante), deshalb werden
      die Abstände des CMS-Rahmens innerhalb dieser Varianten aufgehoben. */
.section.colorado-teaser,
.section.family,
.section.about {
  padding: 0;
}
.section.colorado-teaser > .container,
.section.family > .container,
.section.about > .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* Die Abschnitte selbst behalten die Abstände der bisherigen Website. */
.section.colorado-teaser > .container > * { padding: clamp(48px, 6vw, 72px) 0; }
.section.family > .container > * { padding: clamp(42px, 5vw, 58px) 0; }
.section.about > .container > * { padding: clamp(58px, 7vw, 90px) 0; }

/* 8. Innenseiten (Impressum, Datenschutz, CMS-Seiten) in der Optik der bisherigen Rechtsseiten:
      schwarzer Titelbereich mit orangem Abschluss, weißer Inhaltsbereich, Großbuchstaben-Überschrift
      (bisher .legal-header/.legal-content in hg.css). Das CMS liefert zusätzlich ein
      Inhaltsverzeichnis (.legal-toc) – das ist neu und wird hier nur eingefärbt. */
body.hg-innenseite { background: #fff; }
body.hg-innenseite main { padding-top: 0; }
.legal-hero {
  padding-top: calc(clamp(34px, 5vw, 56px) + 92px);   /* 92px = Höhe der festen Kopfleiste */
  padding-bottom: clamp(34px, 5vw, 56px);
  background: var(--dark);
  border-bottom: 8px solid var(--orange);
  color: #fff;
}
.legal-hero h1 {
  color: #fff;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1;
  text-transform: uppercase;
  font-weight: 800;
  /* lange Woerter wie DATENSCHUTZERKLAERUNG duerfen auf schmalen Bildschirmen umbrechen */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.legal-hero .eyebrow { color: var(--orange); }
.legal-hero p:last-child { color: rgba(255, 255, 255, .82); }
.legal-hero + .section { background: #fff; color: var(--text); }
.legal-content { background: transparent; padding: 0; color: #111; }
.legal-toc {
  border-top-color: var(--orange);
  background: #f4f4f4;
}
.legal-toc a { color: #111; }
.legal-toc a:hover { color: var(--orange); }

/* Überlauf auf schmalen Bildschirmen: Die Grid-Spalten dürfen nicht breiter werden als der
   Platz; lange Wörter in den Links brechen um. */
.legal-layout > * { min-width: 0; }
.legal-toc a,
.legal-content { overflow-wrap: anywhere; }

/* 9. Kontrast (WCAG 2.1 AA): Das Orange #ff6a00 erreicht auf Weiß nur 2,87:1 – zu wenig für Text.
      Auf hellen Flächen wird deshalb ein dunkleres Orange genutzt (#c25100 = 4,70:1); auf dunklem
      Grund (Titelbereich, Bänder, Fuß) bleibt das Original-Orange unverändert. */
.legal-content a,
.about-content a,
.section.about a {
  color: #c25100;
}
.legal-content a:hover,
.about-content a:hover,
.section.about a:hover {
  color: #8f3b00;
}
/* Die 404-Seite nutzt dieselben Bereiche wie die Rechtsseiten; der Titelbereich der bisherigen
   Website heißt dort .legal-header. */
body.error-page main { padding-top: 0; }
.legal-header {
  padding-top: calc(34px + 92px);   /* 92px = Höhe der festen Kopfleiste */
}

/* ======================================================================
   10. Seite „Colorado Experiment 2.0“ (CMS-Seite /colorado-experiment)
   Inhalt der bisherigen Subdomain colorado-experiment.hit-gym.de, Optik aus dem
   HIT-GYM-System: Schwarz/Orange, Inter, dieselben Abstände wie die übrigen Abschnitte.
   ====================================================================== */

/* Die CMS-Abschnitte bringen ihre Abstände selbst mit. */
.section[class*="hg-colorado"] { padding: 0; }
.section[class*="hg-colorado"] > .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.section.hg-colorado-zahlen,
.section.hg-colorado-story,
.section.hg-colorado-phasen,
.section.hg-colorado-cta { background: var(--dark); color: #fff; }
.section.hg-colorado-zitat { background: var(--orange); color: #fff; }

/* Überzeile wie auf der bisherigen Subdomain */
.hg-eyebrow {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- Titelbereich mit Bild --- */
.hg-colorado-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(78vh, 680px);
  padding: calc(92px + clamp(40px, 8vw, 90px)) clamp(20px, 4vw, 50px) clamp(34px, 5vw, 60px);
  background: var(--dark);
  overflow: hidden;
}
.hg-colorado-hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
}
.hg-colorado-hero__text {
  position: relative;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  color: #fff;
}
.hg-colorado-hero__titel {
  margin: 0 0 14px;
  font-size: clamp(38px, 7vw, 86px);
  line-height: 1.02;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.hg-colorado-hero__sub {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
}
.hg-colorado-hero__text p { color: rgba(255, 255, 255, .86); }
.hg-bildhinweis {
  position: relative;
  max-width: var(--max);
  width: 100%;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
}

/* --- Kennzahlen --- */
.hg-zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 3vw, 36px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(42px, 5vw, 64px) clamp(20px, 4vw, 50px);
}
.hg-zahl { display: flex; flex-direction: column; gap: 4px; }
.hg-zahl__wert {
  color: var(--orange);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  line-height: 1;
}
.hg-zahl__titel { font-weight: 700; }
.hg-zahl__text { color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.5; }

/* --- Geschichte mit Seitenkasten --- */
.hg-colorado-geschichte {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 50px);
}
.hg-colorado-geschichte h2 {
  margin: 0 0 18px;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.hg-colorado-geschichte p { margin-bottom: 14px; color: rgba(255, 255, 255, .8); line-height: 1.65; }
.hg-notiz {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid #303030;
  border-top: 4px solid var(--orange);
  border-radius: 14px;
  background: #151515;
}
.hg-notiz__jahr {
  margin: 0 0 6px;
  color: var(--orange);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1;
}
.hg-notiz h3 { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: #fff; }
.hg-notiz a { color: var(--orange); font-weight: 700; }

/* --- Drei Phasen --- */
.hg-phasen {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 50px);
}
.hg-phasen h2 {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.hg-phasen__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 32px);
}
.hg-phase {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid #303030;
  border-radius: 14px;
  background: #151515;
}
.hg-phase__nummer {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
}
.hg-phase h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: #fff; }
.hg-phase p { color: rgba(255, 255, 255, .75); line-height: 1.6; }

/* --- Leitsatz --- */
.hg-zitat {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(42px, 5vw, 70px) clamp(20px, 4vw, 50px);
  text-align: center;
}
/* Dunkler Text auf Orange: Weiss erreicht auf #ff6a00 nur 2,87:1, #111 dagegen 6,58:1. */
.hg-zitat__text {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
  color: #111;
}
.hg-zitat__klein { margin: 0; color: #1a1a1a; font-weight: 700; letter-spacing: .08em; }

/* --- Probetraining --- */
.hg-colorado-kontakt {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 50px);
}
.hg-colorado-kontakt h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.hg-colorado-kontakt p { color: rgba(255, 255, 255, .8); line-height: 1.65; max-width: 62ch; }
.hg-colorado-kontakt .back,
.hg-colorado-hero .back { background: var(--orange); color: #111 !important; }
.hg-colorado-kontakt .back:hover,
.hg-colorado-hero .back:hover { background: #fff; }

/* --- schmalere Bildschirme --- */
@media (max-width: 980px) {
  .hg-zahlen { grid-template-columns: repeat(2, 1fr); }
  .hg-colorado-geschichte { grid-template-columns: 1fr; }
  .hg-phasen__raster { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hg-zahlen { grid-template-columns: 1fr; }
}

/* 11. Seitenkopf weiterer CMS-Seiten (.content-hero) im HIT-GYM-Stil – greift für Seiten, die
      keinen eigenen Titelbereich mitbringen (die Colorado-Seite blendet ihn aus, siehe seite.php). */
.content-hero {
  padding-top: calc(92px + clamp(34px, 5vw, 56px));
  padding-bottom: clamp(34px, 5vw, 56px);
  background: var(--dark);
  border-bottom: 8px solid var(--orange);
  color: #fff;
}
.content-hero h1 {
  color: #fff;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1;
  text-transform: uppercase;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.content-hero .crumb,
.content-hero .crumb a { color: rgba(255, 255, 255, .75); }
.content-hero .crumb a:hover { color: var(--orange); }
.content-hero + .section { background: #fff; color: var(--text); }

/* 12. Variablen des neutralen CMS auf die HIT-GYM-Palette abbilden.
   ------------------------------------------------------------------------
   module.css wird aus dem gemeinsamen CMS erzeugt und greift auf Variablen
   zu (--blue, --yellow, --ink …), die dort in assets/css/style.css stehen.
   HIT-GYM lädt statt style.css die unveränderte hg.css der bisherigen
   Website – die Variablen waren damit undefiniert, und jede CMS-Komponente
   verlor Hintergrund- und Textfarbe. Sichtbar wurde das am Knopf „Auswahl
   speichern“ des Einwilligungsbanners (axe: color-contrast, .btn-primary).
   Hier bekommen sie HIT-GYM-Werte; alle Paare erfüllen WCAG 2.1 AA.
   Nicht in hg.css eintragen – die Datei bleibt unverändert. */
:root {
  --blue:        #101010;   /* Leitfarbe des CMS -> HIT-GYM-Schwarz */
  --blue-dark:   #000000;
  --white:       #ffffff;
  --ink:         #121212;
  --muted:       #5a5a5a;   /* 7,0:1 auf Weiß */
  --line:        rgba(0, 0, 0, .14);
  --soft:        #f5f5f5;
  --warm:        #faf8f6;
  --shadow:      0 24px 70px rgba(0, 0, 0, .18);
  --font-heading: 'Inter', Arial, sans-serif;

  /* Akzent: Orange trägt dunklen Text – Weiß darauf erreicht nur 2,87:1
     (siehe Abschnitt 9). --on-accent setzt module.css bereits ein. */
  --yellow:      #ff6a00;
  --yellow-dark: #e65f00;
  --on-accent:   #101010;
}

/* Knöpfe des CMS (u. a. Einwilligungsbanner) in HIT-GYM-Optik. */
.btn-primary {
  background: var(--yellow);
  border-color: var(--blue);
  color: var(--on-accent);
  font-weight: 800;
}
.btn-primary:hover { background: var(--yellow-dark); }

/* 13. Aktions-Popup (Admin: Inhalte → Popups) in den Farben des beworbenen
   Angebots. Die Grundform kommt aus module.css; hier nur Farbe, Rundung und
   Typografie, damit das Fenster als Werbung einer anderen Marke erkennbar
   bleibt und sich nicht als HIT-GYM-Inhalt ausgibt.
   Palette von begleitraum.com (deren assets/css/style.css, :root). */
.aktion-modal {
  --br-violett:      #4d267c;
  --br-violett-hell: #6f4aa0;
  --br-tuerkis:      #3b9aaa;
  --br-dunkel:       #1f2340;
  --br-creme:        #fbf7f2;
}
.aktion-modal__backdrop {
  background: color-mix(in srgb, var(--br-dunkel) 78%, transparent);
}
.aktion-modal__dialog {
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(31, 35, 64, .45);
}
/* Der Dialog bekommt beim Öffnen programmatisch den Fokus (tabindex="-1"), damit
   Tastatur und Screenreader im Fenster landen. Die allgemeine Fokusregel aus
   Abschnitt 4 legte deshalb einen orangen Rahmen um das ganze Popup. Am Behälter
   ist er überflüssig – das geöffnete Fenster ist schon deutlich genug, und die
   Bedienelemente darin haben weiter ihren eigenen, sichtbaren Fokus. */
.aktion-modal__dialog:focus,
.aktion-modal__dialog:focus-visible { outline: none; }
.aktion-modal__close {
  border-color: rgba(255, 255, 255, .85);
  background: color-mix(in srgb, var(--br-violett) 90%, transparent);
}
.aktion-modal__close:hover { background: var(--br-violett); }
.aktion-modal__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.aktion-popup {
  background: var(--br-creme);
  color: var(--br-dunkel);
}
.aktion-popup__inhalt { padding: 30px 32px 34px; }
/* Überzeile: Türkis wäre auf Creme zu hell (2,6:1) – deshalb das Violett. */
.aktion-popup__label {
  color: var(--br-violett);
  font-size: .76rem;
  text-transform: uppercase;
}
.aktion-popup h2.aktion-popup__titel {
  color: var(--br-violett);
  font-size: clamp(1.45rem, 4vw, 1.75rem);
  text-transform: none;   /* HIT-GYM schreibt Überschriften sonst in Versalien */
  letter-spacing: -.01em;
}
/* Das Betragsfeld trägt hier keine Zahl, sondern den Programmnamen: kleiner
   als die 2,75rem der Standardfassung, sonst erschlüge es die Überschrift. */
.aktion-popup__betrag {
  color: var(--br-dunkel);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
}
.aktion-popup__betrag span {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 600;
}
.aktion-popup__text {
  color: #3a3747;          /* 9,4:1 auf Creme */
  font-size: 1.02rem;
  line-height: 1.6;
}
.aktion-popup__button {
  border: 2px solid var(--br-violett);
  border-radius: 10px;
  background: var(--br-violett);
  color: #fff !important;  /* 10,7:1 */
  text-transform: none;
}
.aktion-popup__button:hover {
  background: var(--br-violett-hell);
  border-color: var(--br-violett-hell);
}
.aktion-popup__button:focus-visible {
  outline: 3px solid var(--br-tuerkis);
  outline-offset: 3px;
}
.aktion-popup__hinweis {
  margin-top: 14px;
  color: #4a4757;          /* 7,6:1 auf Creme */
  font-size: .85rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .aktion-popup__inhalt { padding: 24px 20px 26px; }
}