/* ==========================================================================
   Splashsite – typografische und gestalterische Vereinheitlichung
   Wird von den Splashsite-Seiten geladen: index.html und rechtliches.html
   (kombiniertes Impressum/Datenschutz). styles.css und pages.css bleiben
   unverändert, damit das 1:1-Figma-Gerüst der übrigen Seiten (CMS-Vorlage)
   intakt bleibt.
   ========================================================================== */

/* ==========================================================================
   1. Typografische Skala
   Vorher waren 11 verschiedene Schriftgrade im Einsatz, teils für Elemente
   derselben Hierarchiestufe („Kosten" 36 px vs. „Stundenplan" 45 px).
   Neu: 7 Stufen, jede mit einer klaren Rolle.
   ========================================================================== */
:root {
  /* Vollkorn – Display
     Seitentitel und Statement stehen in der schmaleren linken Spalte und
     skalieren mit der Viewportbreite, sonst bricht „TANZTRAINING" unter
     ~1400 px mitten im Wort um. */
  --fs-display: clamp(45px, 4.4vw, 72px);  /* Seitentitel                 */
  --fs-h2:      45px;   /* Sektionstitel: Kosten, Stundenplan             */
  --fs-h3:      28px;   /* Zeilentitel: Vereinsmitglieder, Datum          */

  /* Raleway – Text */
  --fs-lead:    clamp(22px, 2.3vw, 38px);  /* Statement                   */
  --fs-body:    20px;   /* Fliesstext                                     */
  --fs-small:   16px;   /* Sekundärangaben: Zeiten, Trainingsart          */
  --fs-meta:    13px;   /* Labels, Ferienhinweise                         */

  --lh-display: 1.18;
  --lh-tight:   1.25;
  --lh-body:    1.6;

  /* Rasterabstand beider Spalten – identisch in allen Sektionen */
  --col-gap:    clamp(40px, 6vw, 104px);
  /* Maximale Zeilenlänge im Fliesstext (~62 Zeichen) */
  --measure:    640px;
}

/* ---------- Display-Stufen ---------- */
.page-title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

.pricing h2,
.section-title {
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: 0.9px;
  margin-bottom: 0;
}

/* „Vereinsmitglieder", „Du möchtest schnuppern?" und die Termindaten sind
   strukturell dasselbe: der Schlüssel einer Schlüssel-Wert-Zeile. */
.pricing__row dt,
.pricing__probe-title,
.schedule__date {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

/* ---------- Text-Stufen ---------- */
.intro__statement {
  font-size: var(--fs-lead);
  line-height: var(--lh-display);
}

.intro__text,
.training-intro__text,
.schedule__intro,
.pricing__probe {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.pricing__row dd .price {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Preis und Bezeichnung zusammenhalten – über die volle Spaltenbreite
   reisst der Blicksprung von der Bezeichnung zum Betrag zu weit auf. */
.pricing dl { max-width: var(--measure); }

.pricing__row dd .note,
.schedule__time,
.schedule__type {
  font-size: var(--fs-small);
  line-height: 1.5;
}

.schedule__filters,
.filter-pill,
.schedule__date em {
  font-size: var(--fs-meta);
}

/* ==========================================================================
   2. Vertikaler Rhythmus
   Einheitliche Abstände statt gewachsener Einzelwerte (10/20/22/40/44 px).
   ========================================================================== */
.intro__text p + p,
.training-intro__text p + p { margin-top: 24px; }

.schedule__intro.strong { margin-top: 12px; }
.schedule__filters      { margin-top: 40px; }
.schedule__list         { margin-top: 24px; }
.pricing__probe         { margin-top: 40px; }

.schedule__date em { margin-top: 4px; }

/* ==========================================================================
   3. Bedienelemente: Hover- und Fokuszustände
   Die Filter-Pills hatten bisher weder Hover- noch sichtbaren Fokuszustand.
   ========================================================================== */
.filter-pill {
  letter-spacing: 0.04em;
  padding: 9px 20px;
}
.filter-pill:hover { background: rgba(255, 117, 80, 0.15); }
.filter-pill.is-active:hover { background: var(--orange); }

.filter-pill:focus-visible,
a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Die Mailadresse im Intro war als Link nicht erkennbar (a { text-decoration:
   none } aus styles.css) – hier unterstrichen; im Footer bleibt sie durch die
   orange Farbe erkennbar. Der Abstand kommt aus dem Absatzrhythmus, die
   Adresse steht im Markup in einem eigenen <p>. */
.intro__text .mail {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.intro__text .mail:hover { color: var(--orange); }

/* ==========================================================================
   4. Desktop: einheitliches Zweispaltenraster
   Vorher startete die rechte Spalte in jeder Sektion an einer anderen
   Position (Intro 1fr/1fr, Tanztraining 1fr/1.4fr, Kosten 1fr/2.4fr,
   Stundenplan einspaltig). Neu laufen alle vier auf derselben Flucht.
   ========================================================================== */
@media (min-width: 768px) {

  .intro,
  .training-intro,
  .pricing,
  .schedule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--col-gap);
    align-items: start;
    max-width: 1677px;
  }

  /* Der Einzug im Statement war absolut (210 px) und sprengte die schmalere
     linke Spalte – neu relativ zur Spaltenbreite. */
  .intro__statement .indent { margin-left: 15%; }

  /* Terminliste: Datum trägt jetzt den grösseren Schriftgrad. Breite wie die
     Tarifliste, damit beide Listen auf derselben rechten Kante enden. */
  .schedule__list,
  .schedule__filters {
    max-width: var(--measure);
  }
  /* Proportionale statt fixer Spalten – so bleibt „Training mit Jorge" auch
     bei mittleren Breiten einzeilig. */
  .schedule__list li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.1fr);
    gap: 24px;
    padding: 20px 0;
  }

  /* Footer auf dieselbe Display-Stufe wie die Sektionstitel, aber fluid:
     bei 45 px fix ist „TITTWIESENSTRASSE" breiter als die verfügbare
     Spalte, sobald das Fenster schmaler wird – der Text lief dann aus
     seinem Bereich heraus. */
  .site-footer__verein,
  .site-footer__adresse {
    font-size: clamp(28px, 3.1vw, 45px);
    line-height: 1.15;
  }

}

/* ==========================================================================
   5. Mobile: Skala wird über die Tokens heruntergestuft,
   das einspaltige Layout aus styles.css/pages.css bleibt bestehen.
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-display: 45px;
    --fs-h2:      32px;
    --fs-h3:      22px;
    --fs-lead:    25px;
    --fs-body:    18px;
    --fs-small:   15px;
    --fs-meta:    12px;
    --measure:    none;
  }
}

/* ==========================================================================
   6. Header: orange Trennlinie entfernt
   ========================================================================== */
.hero__line { display: none; }

/* Scrollbar-Falle des 100vw-Bleed-Tricks: auf Systemen mit raumgreifender
   Scrollbar (Windows/Linux, klassische Scrollbars) ist 100vw ein paar
   Pixel breiter als die tatsächlich sichtbare Breite – ohne diese Zeile
   entsteht ein minimaler horizontaler Scrollbalken. Nur für die Splashsite,
   da nur hier randabfallende Elemente vorkommen. */
html, body { overflow-x: hidden; }

/* ==========================================================================
   7. Footer: randabfallender Hintergrund
   Gleicher Bleed-Trick wie .quote in pages.css (100vw + negative Margin).
   .site-footer wird zur reinen Hintergrundfläche, der Inhalt liegt im
   zentrierten .site-footer__frame. Dort steckt auch das Layout des
   Footers (siehe Block weiter unten), das die absolute Figma-
   Positionierung aus styles.css ersetzt.
   ========================================================================== */
.site-footer {
  width: 100vw;
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* Der Footer ist das letzte Element der Seite. Der untere Innenabstand von
   .page (25 px Desktop, 77 px Mobile aus styles.css) blieb darunter als
   beiger Streifen stehen – auf der Splashsite schliesst der weinrote
   Footer links, rechts und unten bündig ab. */
.page { padding-bottom: 0; }
.site-footer__frame {
  position: relative;
  height: 100%;
  max-width: 1727px;      /* 1677 Inhaltsbreite + 2 × 25 px Innenabstand:
                             der Footer-Inhalt steht damit auf derselben
                             Flucht wie die Sektionen der Seite, auch auf
                             sehr breiten Bildschirmen. */
  margin: 0 auto;
  padding: 0 25px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  /* Footer-Layout: Fluss statt absoluter Figma-Positionierung.
     styles.css setzte Logo, Adresstexte, Fusszeile und Tänzerin auf feste
     %-Positionen in einem 470 px hohen Kasten. Weil die Positionen nicht
     voneinander wissen, kollidierten sie bei mehreren Fensterbreiten:
       768–1050 px  umgebrochene Adresszeile läuft in die Fusszeile
       1100–1250 px "Dance Center …" läuft in die Tänzerin
       ab ~1700 px  die (prozentual mitwachsende) Tänzerin in die Fusszeile
     Neu tragen Flexbox und Grid die Abstände: Das Logo steht oben, die
     Adresszeile darunter, die Fusszeile am unteren Rand, die Tänzerin in
     einer eigenen Rasterspalte. Der Kasten wächst mit, wenn der Inhalt
     mehr Platz braucht – eine Überschneidung ist damit bei jeder Breite
     ausgeschlossen. Bei Designbreite (1678 px) bleibt die Optik gleich.
     Der Einzug kommt jetzt aus dem Innenabstand des Rahmens: 25 px links
     statt zuvor 15 px, damit auf derselben Flucht wie der Seiteninhalt.
     Rechts 50 px, weil die Tänzerin im Figma so weit von der Kante steht. */
  .site-footer { height: auto; min-height: 470px; }

  .site-footer__frame {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 470px;
    padding: 50px 50px 20px 25px;
  }
  .site-footer__logo {
    position: static;
    width: 11.12%;
    margin-bottom: 75px;
  }
  .site-footer__inner {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(120px, 13vw, 210px);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "address dancer"
      "meta    dancer";
    column-gap: 40px;
    row-gap: 24px;
  }
  .site-footer__verein,
  .site-footer__adresse,
  .site-footer__meta,
  .site-footer__dancer { position: static; }

  .site-footer__address-row {
    grid-area: address;
    display: flex;
    flex-wrap: wrap;
    column-gap: 60px;
    row-gap: 20px;
  }
  .site-footer__meta {
    grid-area: meta;
    align-self: end;
  }
  .site-footer__dancer {
    grid-area: dancer;
    align-self: end;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767px) {
  /* Mobile: styles.css macht .site-footer bereits zum Flex-Container mit
     Padding (50/25/25) – das reicht als Innenabstand zum bleeding Rand.
     .frame bleibt unsichtbar im Boxmodell, damit Logo/Inner weiterhin
     direkte Flex-Kinder von .site-footer sind wie im Original. */
  .site-footer__frame { display: contents; }
}

/* ---------- Footer-Fusszeile: Schriftgrösse, Ausrichtung, Klassenkollision
   Der Wrapper um „Impressum | Datenschutz" hiess bisher .legal – dieselbe
   Klasse, die pages.css für ganze Rechtstext-Seiten (16 px, zentriert,
   max-width) verwendet. Da pages.css auch hier geladen ist, kollidierten
   die Regeln (falsche Grösse/Breite/Zentrierung). Im Markup jetzt auf
   .site-footer__legal umbenannt; alle nötigen Regeln werden hier aus
   styles.css nachgebildet, aber linksbündig auf gleicher Flucht wie
   „Verein Flamenco sin fronteras" / „Dance Center" statt zentriert. ---------- */
.site-footer__meta {
  text-align: left;
}
.site-footer__meta .mail,
.site-footer__meta .site-footer__legal {
  font-size: var(--fs-small);
  line-height: 1.5;
}
.site-footer__meta .site-footer__legal { color: var(--white); }
.site-footer__meta .site-footer__legal a { color: var(--orange); }
.site-footer__meta .site-footer__legal .sep { color: var(--orange); }

@media (min-width: 768px) {
  .site-footer__meta .site-footer__legal { margin-left: 55px; }
}
@media (max-width: 767px) {
  .site-footer__meta .mail,
  .site-footer__meta .site-footer__legal {
    display: block;
    margin: 0;
    line-height: 1.7;
  }
  .site-footer__meta .site-footer__legal { margin-top: 8px; }
}

/* ==========================================================================
   8. Rechtsseite (rechtliches.html): kombiniertes Impressum & Datenschutz
   ========================================================================== */

/* Kein Menü auf der Splashsite – anstelle des Burgers führt ein Pfeil
   zurück auf index.html. Gleiche Position/Grösse wie zuvor .nav-burger. */
.back-arrow {
  position: fixed;
  top: 25px;
  left: 25px;
  z-index: 100;
  width: 100px;
  height: 100px;
  background: var(--plum);
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-arrow img {
  width: 40px;
  height: 40px;
  transform: scaleX(-1);   /* arrow-right.svg zeigt gespiegelt nach links */
}
@media (max-width: 767px) {
  .back-arrow { width: 75px; height: 75px; }
  .back-arrow img { width: 32px; height: 32px; }
}

/* Der Pfeil liegt fix über der Seite (Desktop 100 px hoch ab 25 px oben)
   und überdeckte den Seitentitel „Rechtliches", der bei .page schon 100 px
   unter dem Seitenanfang beginnt. Die Rechtsseite bekommt darum so viel
   Vorlauf, dass der Titel 25 px unter dem Pfeil beginnt. Mobil ist der
   Pfeil kleiner (75 px) und der Titel steht bereits darunter – dort bleibt
   der Wert aus styles.css. */
@media (min-width: 768px) {
  .back-arrow + .page { margin-top: 150px; }
}

/* Orange Trennlinie im Seiten-Header entfernt – konsistent mit .hero__line
   auf der Startseite. */
.page-header hr { display: none; }

/* Titelhierarchie für die kombinierte Seite:
   h1.page-title „Rechtliches" (Display) > h2.legal-part-title
   „Impressum"/„Datenschutz" (H2, wie .section-title) > h3 „Kontaktadresse"
   etc. (H3, bisheriges Aussehen von pages.css .legal h2 – hier auf h3
   verlagert, damit die Überschriftenebenen nicht überspringen). */
/* .page zentriert seine Kinder per Flexbox (align-items:center); solange sie
   width:100% haben, hat das keine Wirkung. Sobald .legal schmaler als der
   Container ist (max-width:720px), würde es sonst zentriert statt bündig
   mit .page-title stehen – deshalb explizit linksbündig verankert. Nur ab
   Desktop-Breite: auf Mobile hätte ein unconditionelles max-width:720px
   pages.css' eigene, engere mobile Breite (calc(100% - 50px)) überschrieben. */
.legal { align-self: flex-start; }

@media (min-width: 768px) {
  .legal { max-width: 720px; }
}

.legal .legal-part-title {
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: 0.9px;
  margin-top: 90px;
  margin-bottom: 24px;
  /* Direktlinks aus dem Footer springen auf #impressum/#datenschutz. Ohne
     scroll-margin-top setzt der Browser die Zielüberschrift bündig an die
     Viewport-Oberkante – „Rechtliches" (h1) direkt darüber wäre komplett
     weggescrollt. Der Wert hält Platz für Zurück-Pfeil-Bereich + Titel frei,
     damit die Seite beim Sprung sichtbar „oben" beginnt. */
  scroll-margin-top: 230px;
}
.legal .legal-part-title:first-child { margin-top: 0; }

.legal h3 {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: var(--fs-h3);
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 44px;
  margin-bottom: 14px;
}

@media (max-width: 767px) {
  .legal .legal-part-title { margin-top: 60px; }
}

/* Der Zurück-Pfeil (fixed, 25/25) überlappte bisher „Rechtliches" und den
   Seitenanfang, weil .page bis ~1828 px Viewportbreite links exakt auf
   derselben 25-px-Flucht startet wie der Pfeil. Lösung: Titel und Rechtstext
   nach rechts verschieben, damit sie ab der neuen Kante bündig beginnen –
   klar unterhalb/rechts des Pfeils.
   Wichtig: Der Versatz sitzt auf .page-title/.legal selbst (padding-left,
   box-sizing:border-box hält die Aussenbreite bei 100%), NICHT auf .page.
   .page bekäme sonst eine asymmetrische Polsterung (links 175, rechts 25),
   und der Footer-Randabfall-Trick (negative Margins, siehe Abschnitt 7)
   setzt eine symmetrische Polsterung des Elternelements voraus – sonst
   verschiebt sich der Footer mit und fällt nicht mehr randabfallend aus. */
.back-arrow + .page .page-title,
.back-arrow + .page > .legal {
  padding-left: 150px;
}

@media (max-width: 767px) {
  /* Auf Mobile ist links kein Platz für einen seitlichen Ausweich – der
     Titel rückt stattdessen unter den Pfeil und auf dieselbe Flucht wie
     .legal (352 px, zentriert, wie im Rest der Seite). */
  .back-arrow + .page .page-title {
    padding-left: 0;
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 70px auto 0;
  }
}

/* ==========================================================================
   9. Startseite: Hero kürzen (nur Desktop)
   styles.css bindet die Hero-Höhe starr an die Breite (aspect-ratio
   1728/1117 ≈ 1.55) – auf jedem 16:9-Bildschirm (1.78) ist der Hero damit
   immer höher als der sichtbare Viewport, Claim und Textanfang fallen unter
   die Falz. Hier durch eine vh-basierte, gedeckelte Höhe ersetzt; die intern
   absolut positionierten Elemente (Logo/Linie/Titel) bleiben unverändert
   in styles.css, ihre top-Prozentwerte skalieren automatisch mit der neuen
   Höhe mit. Bildausschnitt zusätzlich nach oben verschoben, damit unten
   Bodenfläche statt Rocksaum wegfällt. Nur Desktop – auf Mobile ist der
   volle Viewport als Hero bewusst so gewollt (styles.css, unverändert). */
@media (min-width: 768px) {
  .hero {
    aspect-ratio: auto;
    height: 68vh;
    min-height: 520px;
    max-height: 820px;
  }
  .hero__img { object-position: center 8%; }

  /* .hero__title top:68.129% ist auf die alte 1117-px-Referenzhöhe
     berechnet; im gekürzten Hero würde der Claim („Flamenco tanzen lernen
     in Chur") unten aus der Box heraus- und damit weggeschnitten werden
     (overflow:hidden). Der Titelblock (2-zeiliges "¡Hola y Bienvenidos!"
     + Claim) ist ca. 260 px hoch, unabhängig von der (variablen, 520–820 px)
     Hero-Höhe. 58% passt bei grösseren Höhen gut, reicht aber bei den
     kleineren nicht – min() wechselt automatisch auf einen festen
     280-px-Abstand zur Unterkante, sobald das nötig ist. */
  .hero__title { top: min(58%, calc(100% - 280px)); }
}