/* ==========================================================================
   Flamenco sin fronteras – Stylesheet der Website
   Aufbau: Schriften · styles.css (Figma-Grundlage) · pages.css · veranstaltung.css
           · splash.css (Gestaltungsstand der Live-Site) · Ergänzungen
   Schriften: Vollkorn und Raleway (SIL Open Font License), lokal als WOFF2.
   ========================================================================== */
@font-face { font-family: "Vollkorn"; src: url("/_vindelis/datei/schriften/vollkorn-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/_vindelis/datei/schriften/raleway-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/_vindelis/datei/schriften/raleway-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/_vindelis/datei/schriften/raleway-600.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ======================== styles.css ======================== */
/* ==========================================================================
   Flamenco Sin Fronteras – Startseite
   1:1-Umsetzung des Figma-Designs
   Desktop-Frame: 1728 px Inhaltsbreite (+ 25 px Seitenrand)
   Mobile-Frame:  402 px (Inhaltsbreite 352 px, 25 px Seitenrand)
   ========================================================================== */

/* ---------- Design-Tokens (exakte Figma-Werte) ---------- */
:root {
  --beige:  #F3F0E3;   /* Hintergrund + helle Schrift */
  --plum:   #300419;   /* Footer, Buttons, dunkle Schrift */
  --orange: #FF7550;   /* Akzent */
  --white:  #FFFFFF;

  --vollkorn: "Vollkorn", Georgia, serif;
  --raleway:  "Raleway", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

img, svg { display: block; }

a { text-decoration: none; color: inherit; }

body {
  background: var(--beige);
  font-family: var(--raleway);
  color: var(--plum);
  -webkit-font-smoothing: antialiased;
}

/* Seitengerüst: 25 px Rand, Sektionen mit 100 px Abstand (Figma: gap 100).
   Der Hero liegt ausserhalb und läuft randlos über die volle Breite. */
.page {
  max-width: 1778px;
  margin: 100px auto 0;
  padding: 0 25px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

.page > * { width: 100%; }

/* ==========================================================================
   Navigation (Burger, Figma 28:5021 – 100×100, Icon 75 px)
   ========================================================================== */
.nav-burger {
  position: fixed;
  top: 25px;
  left: 25px;
  z-index: 100;
  width: 100px;
  height: 100px;
  background: var(--plum);
  border: none;
  cursor: pointer;
  padding: 12px;
}
.nav-burger img { width: 75px; height: 75px; }

/* X-Zustand des Burgers (im offenen Menü) */
.nav-burger__close { display: none; position: relative; width: 75px; height: 75px; }
.nav-burger__close::before,
.nav-burger__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 2px;
  background: var(--beige);
}
.nav-burger__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-burger__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

body.menu-open .nav-burger img { display: none; }
body.menu-open .nav-burger__close { display: block; }

/* ==========================================================================
   Menü (Seiten-Drawer von links, wie im Figma-Prototyp)
   ========================================================================== */
.menu-overlay {
  position: fixed;
  inset: 0;
  right: 38%;                 /* Drawer bedeckt die linken ~62% der Fläche */
  z-index: 90;
  background: var(--plum);
  display: flex;
  flex-direction: column;
  padding: 12vh 8vw 50px;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
}
body.menu-open .menu-overlay { transform: translateX(0); }
body.menu-open { overflow: hidden; }

.menu-overlay nav { margin-top: auto; }
.menu-overlay ul { list-style: none; }
.menu-overlay li + li { margin-top: 18px; }
.menu-overlay ul a {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orange);
  transition: opacity 0.2s ease;
}
.menu-overlay ul a:hover { opacity: 0.75; }

.menu-overlay__bottom {
  margin-top: auto;
  padding-top: 60px;
  display: flex;
  align-items: center;
  gap: 19px;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
}
.menu-overlay__bottom img { width: 31px; height: 31px; }
.menu-overlay__bottom .mail { color: var(--orange); }
.menu-overlay__bottom .legal { margin-left: 36px; color: var(--white); }
.menu-overlay__bottom .legal .sep { color: var(--orange); }

.menu-overlay__dancer {
  position: absolute;
  right: -6%;
  bottom: 6%;
  width: 14%;
}

/* ==========================================================================
   Hero (Figma 28:4961 – 1728×1117, randlos über die volle Breite)
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1728 / 1117;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Verlauf: unten rgba(0,0,0,.5) → transparent bei 39.839 % (Figma-Gradient) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 9.087%,
    rgba(0, 0, 0, 0) 39.839%
  );
  pointer-events: none;
}

/* Logo: 420×144 bei y=100, zentriert */
.hero__logo {
  position: absolute;
  z-index: 1;
  top: 8.953%;                 /* 100 / 1117 */
  left: 50%;
  transform: translateX(-50%);
  width: 24.306%;              /* 420 / 1728 */
}
/* Linie: 1258 px breit bei y=344 (Figma Line 1, #FF7550) */
.hero__line {
  position: absolute;
  z-index: 1;
  top: 30.797%;                /* 344 / 1117 */
  left: 50%;
  transform: translateX(-50%);
  width: 72.801%;              /* 1258 / 1728 */
  border: none;
  border-top: 1px solid var(--orange);
}
/* Titelblock: 1258 px breit bei y=761 */
.hero__title {
  position: absolute;
  z-index: 1;
  top: 68.129%;                /* 761 / 1117 */
  left: 50%;
  transform: translateX(-50%);
  width: 72.801%;
  text-align: center;
  color: var(--beige);
}
.hero__title h1 {
  text-transform: uppercase;
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 72px;
  line-height: 85px;
  letter-spacing: 1.6px;
}
.hero__title p {
  margin-top: 45px;
  font-weight: 500;
  font-size: 38px;
  line-height: 45px;
  letter-spacing: 1.6px;
}
.hero__title .br-mobile { display: none; }

/* ==========================================================================
   Intro (Figma 28:4963 – zwei Spalten à ~839 px)
   ========================================================================== */
.intro {
  max-width: 1677px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.intro__statement {
  font-weight: 500;
  font-size: 38px;
  line-height: 45px;
}
.intro__statement span { display: block; }
.intro__statement span + span { margin-top: 5px; }   /* Zeilenraster 50 px */
.intro__statement .indent { margin-left: 210px; }
.intro__statement .accent { color: var(--orange); }

.intro__text {
  font-weight: 500;
  font-size: 25px;
  line-height: 38px;
  max-width: 838px;
}
.intro__text p + p { margin-top: 38px; }             /* Leerzeile im Figma */
.intro__text .signature { font-weight: 600; }

/* ==========================================================================
   Veranstaltungen (Figma 44:1984)
   ========================================================================== */
.events { max-width: 1680px; }

.events__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.events__head h2 {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 72px;
  line-height: 85px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--orange);
}
.events__head .btn { margin-top: 30px; }

/* Button-Grundform (Figma: h 55, Padding 25, Gap 10, Text 20/36) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 55px;
  padding: 0 25px;
  font-weight: 500;
  font-size: 20px;
  line-height: 36px;
  cursor: pointer;
  white-space: nowrap;
}
.btn img { width: 25px; height: 25px; }
.btn--orange { background: var(--orange); color: var(--plum); }
.btn--plum   { background: var(--plum);  color: var(--orange); }

/* Kartenraster: 4 × 420 px, keine Lücke */
.events__grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Karte (Figma „Veranstaltung“ – 420×940) */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--orange);  /* Linie ab Bildunterkante – s. Maske */
}
/* Die Linie beginnt im Figma erst unter dem Bild (y 525) */
.event-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 55.85%;
  background: var(--beige);
}
.event-card figure {
  aspect-ratio: 420 / 500;
  overflow: hidden;
}
.event-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bildausschnitte wandern wie im Figma über das Panorama */
.event-card:nth-child(1) figure img { object-position: 0% 50%; }
.event-card:nth-child(2) figure img { object-position: 33% 50%; }
.event-card:nth-child(3) figure img { object-position: 66% 50%; }
.event-card:nth-child(4) figure img { object-position: 100% 50%; }

.event-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 25px 25px 0;
}
.event-card__body h3 {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 50px;
  line-height: 55px;
  letter-spacing: 1px;
  text-transform: uppercase;
  min-height: 110px;           /* Titelzone: alle Daten auf gleicher Höhe */
}
.event-card__date {
  margin-top: 55px;            /* Leerzeile (55 px) im Figma */
  font-weight: 500;
  font-size: 38px;
  line-height: 45px;
}
.event-card__text {
  margin-top: 20px;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  min-height: 150px;
}
.event-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Mobiler „Alle Veranstaltungen“-Button – nur im Mobile-Layout sichtbar */
.events__all-mobile { display: none; }

/* ==========================================================================
   Footer (Figma 28:7851 – 1678×470, #300419)
   ========================================================================== */
.site-footer {
  position: relative;
  height: 470px;
  background: var(--plum);
  color: var(--beige);
}
.site-footer__logo {
  position: absolute;
  top: 50px;
  left: 1.49%;
  width: 11.12%;               /* 186.6 / 1678 */
}
.site-footer__verein {
  position: absolute;
  top: 40.21%;
  left: 1.49%;
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 50px;
  line-height: 55px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orange);
}
.site-footer__adresse {
  position: absolute;
  top: 40.21%;
  left: 37.49%;
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 50px;
  line-height: 55px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.site-footer__dancer {
  position: absolute;
  top: 229px;
  left: 84.51%;
  width: 12.51%;
}
.site-footer__meta {
  position: absolute;
  top: 419px;
  left: 1.55%;
  right: 1.55%;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
}
.site-footer__meta .insta { width: 31px; height: 31px; }
.site-footer__meta .mail {
  color: var(--orange);
  margin-left: 19px;
}
.site-footer__meta .legal { margin-left: 55px; color: var(--white); }
.site-footer__meta .legal .sep { color: var(--orange); }

/* ==========================================================================
   Mobile (Figma-Frame 402 px – Layout 50:2676)
   ========================================================================== */
@media (max-width: 767px) {

  .page {
    margin-top: 50px;
    padding: 0 0 77px;         /* unten 77 px (Figma) */
    gap: 50px;
  }

  /* Auf schmalen Screens nimmt der Drawer die volle Breite ein */
  .menu-overlay {
    right: 0;
    padding: 100px 32px 32px;
  }
  .menu-overlay ul a {
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: 0.6px;
  }
  .menu-overlay__bottom {
    flex-wrap: wrap;
    row-gap: 12px;
    padding-right: 90px;      /* Platz für die Tänzerin-Silhouette freihalten */
  }
  .menu-overlay__bottom .legal { margin-left: 0; width: 100%; }
  .menu-overlay__dancer {
    width: 72px;
    right: 24px;
    bottom: 20px;
  }

  /* Burger: 75×75 bei 25/25, Icon füllt die Fläche */
  .nav-burger {
    top: 25px;
    left: 25px;
    width: 75px;
    height: 75px;
    padding: 0;
  }
  .nav-burger img { width: 75px; height: 75px; }

  /* ---------- Hero (402×874) ---------- */
  .hero {
    aspect-ratio: auto;
    height: 100svh;
    min-height: 640px;
  }
  .hero__img { object-position: 80% 50%; }   /* Figma-Bildausschnitt mobile */
  .hero::after {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.5) 18.549%,
      rgba(0, 0, 0, 0) 39.839%
    );
  }
  /* Logo 262.5×90 bei y=200, Linie 352 px 50 px darunter */
  .hero__logo {
    top: 200px;
    width: 262.5px;
  }
  .hero__line {
    top: 340px;
    width: calc(100% - 50px);
    max-width: 352px;
  }
  .hero__title {
    top: 550px;
    width: calc(100% - 50px);
    max-width: 352px;
  }
  .hero__title h1 {
    font-size: 45px;
    line-height: 50px;
    letter-spacing: 0.9px;
  }
  /* Im mobilen Figma steht die Headline ohne Ausrufezeichen */
  .hero__title .only-desktop { display: none; }
  .hero__title p {
    margin-top: 25px;
    font-size: 25px;
    line-height: 36px;
    letter-spacing: 1.6px;
  }
  .hero__title .br-mobile { display: inline; }

  /* ---------- Intro ---------- */
  .intro {
    grid-template-columns: minmax(0, 1fr);
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
  }
  .intro__statement {
    font-size: 25px;
    line-height: 36px;
  }
  .intro__statement span + span { margin-top: 0; }
  .intro__statement .indent { margin-left: 0; }
  /* Im mobilen Figma fliessen Zeile 2+3 zusammen */
  .intro__statement .flow { display: inline; }
  .intro__text {
    margin-top: 61px;          /* Figma: Textblock bei mt 169 (169−108) */
    font-size: 18px;
    line-height: 25px;
    max-width: none;
  }
  .intro__text p + p { margin-top: 25px; }

  /* ---------- Veranstaltungen ---------- */
  .events {
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
  }
  .events__head h2 {
    font-size: 45px;
    line-height: 50px;
    letter-spacing: 0.9px;
    hyphens: manual;
  }
  .events__head .btn { display: none; }      /* Button steht mobil unter den Karten */

  .events__grid {
    margin-top: 25px;          /* Figma: Karten bei mt 125 (125−100) */
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
  }
  .event-card figure { aspect-ratio: 352 / 450; }
  .event-card figure img { object-position: center !important; }
  .event-card__body { padding: 25px 17px 0 25px; }
  .event-card__body h3 {
    font-size: 45px;
    line-height: 50px;
    letter-spacing: 0.9px;
    min-height: 100px;
  }
  .event-card__date {
    margin-top: 55px;
    font-size: 25px;
    line-height: 36px;
  }
  .event-card__text {
    margin-top: 25px;
    margin-right: 4px;
    min-height: 150px;
  }
  .event-card .btn {
    margin-top: 25px;
    align-self: center;
    width: 302px;
    max-width: 100%;
  }

  .events__all-mobile {
    display: flex;
    margin: 50px auto 0;
    width: 302px;
    max-width: 100%;
  }

  /* ---------- Footer (352 px, zentriert) ---------- */
  .site-footer {
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
    height: auto;
    padding: 50px 25px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }
  .site-footer__logo {
    position: static;
    width: 177.917px;
  }
  .site-footer__inner {
    position: relative;
    width: 302px;
    max-width: 100%;
  }
  .site-footer__verein {
    position: static;
    font-size: 25px;
    line-height: 32px;
    letter-spacing: 0.5px;
  }
  .site-footer__adresse {
    position: static;
    margin-top: 57px;          /* Figma: mt 89 − 32 */
    font-size: 25px;
    line-height: 32px;
    letter-spacing: 0.5px;
  }
  .site-footer__meta {
    position: static;
    margin-top: 50px;
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 35px;
  }
  .site-footer__meta .mail { display: block; margin: 0; }
  .site-footer__meta .legal { display: block; margin: 0; }
  .site-footer__dancer {
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    width: 88px;
  }
  .site-footer__insta-mobile {
    display: inline-block;
    margin-top: 78px;
  }
  .site-footer__insta-mobile img { width: 35px; height: 35px; }

  /* Desktop-Instagram-Zeile ausblenden */
  .site-footer__meta .insta { display: none; }
}

/* Desktop: mobile Sonder-Elemente verbergen */
@media (min-width: 768px) {
  .site-footer__insta-mobile { display: none; }
  .intro__statement .flow { display: block; }
}

/* ======================== pages.css ======================== */
/* ==========================================================================
   Gemeinsame Bausteine für die Inhaltsseiten
   (Über uns, Tanztraining, Veranstaltungen, Bildergalerie, Kontakt,
   Impressum, Datenschutz)
   Ergänzt styles.css – gleiche Design-Tokens, gleiches Seitenraster.
   ========================================================================== */

/* ---------- Einfacher Seiten-Header: Logo + Linie, ohne Hero-Foto ---------- */
.page-header {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-header__logo { width: 24.306%; max-width: 420px; }
.page-header hr {
  width: 72.801%;
  max-width: 1258px;
  margin-top: 44px;
  border: none;
  border-top: 1px solid var(--orange);
}

/* ---------- Seitentitel (Vollkorn, gross, orange) ---------- */
.page-title {
  max-width: 1677px;
  min-width: 0;
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 72px;
  line-height: 85px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--orange);
  overflow-wrap: break-word;
}

/* ==========================================================================
   Über uns
   ========================================================================== */
.about {
  max-width: 1677px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 6vw;
  align-items: start;
}
.about__text {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
}
.about__text p + p { margin-top: 24px; }
.about__text .strong { font-weight: 700; }

.photo-strip {
  max-width: 1677px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.photo-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 420 / 320;
  object-fit: cover;
}

/* ---------- Zitat-Block (plum, zentriert) ---------- */
.quote {
  width: 100vw;
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: var(--plum);
  color: var(--orange);
  text-align: center;
  padding: 90px 25px;
}
.quote p {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.quote cite {
  display: block;
  margin-top: 22px;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  color: var(--beige);
}

/* ---------- Links (Partnervereine) ---------- */
.section-title {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 40px;
}
.links { max-width: 1677px; }
.links__card {
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--beige);
}
.links__logo { width: 130px; height: 130px; flex-shrink: 0; }
.links__body h3 {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.links__body p { font-size: 14px; opacity: 0.75; margin-bottom: 18px; }

/* ==========================================================================
   Tanztraining
   ========================================================================== */
.training-intro {
  max-width: 1677px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 6vw;
  align-items: start;
}
.training-intro__text {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
}
.training-intro__text p + p { margin-top: 24px; }

.pricing {
  max-width: 1677px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 6vw;
}
.pricing h2 {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 36px;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.pricing__row {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 117, 80, 0.4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
}
.pricing__row:first-child { padding-top: 0; }
.pricing__row dt {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 28px;
  text-transform: uppercase;
}
.pricing__row dd { text-align: right; }
.pricing__row dd .price {
  font-weight: 500;
  font-size: 18px;
}
.pricing__row dd .note {
  display: block;
  font-size: 14px;
  opacity: 0.75;
  margin-top: 2px;
}

/* Hinweis unter der Tarifliste (Probelektion) */
.pricing__body { min-width: 0; }
.pricing__probe {
  margin-top: 44px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
}
.pricing__probe-title {
  display: block;
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ---------- Stundenplan ---------- */
.schedule { max-width: 1677px; }
.schedule__intro {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  max-width: 838px;
}
.schedule__intro.strong { font-weight: 700; margin-top: 10px; }

.schedule__filters {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
}
.filter-pill {
  font-family: var(--raleway);
  font-weight: 500;
  font-size: 14px;
  color: var(--plum);
  background: transparent;
  border: 1px solid var(--orange);
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.filter-pill.is-active { background: var(--orange); color: var(--plum); }

.schedule__list {
  list-style: none;
  margin-top: 20px;
}
.schedule__list li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 117, 80, 0.4);
  display: grid;
  grid-template-columns: 200px 220px minmax(0, 1fr);
  align-items: baseline;
  gap: 20px;
}
.schedule__date {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 22px;
  color: var(--plum);
}
.schedule__date em { font-style: normal; font-size: 12px; opacity: 0.7; display: block; }
.schedule__time { font-size: 14px; line-height: 1.4; }
.schedule__type { font-weight: 600; font-size: 14px; }
.schedule__type--accent { color: var(--orange); }

/* ==========================================================================
   Bildergalerie
   ========================================================================== */
.gallery {
  max-width: 1677px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery li:nth-child(3n+1) { aspect-ratio: 420 / 520; }
.gallery li:nth-child(3n+2) { aspect-ratio: 420 / 560; margin-top: 60px; }
.gallery li:nth-child(3n+3) { aspect-ratio: 420 / 480; }
.gallery { list-style: none; }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact-map {
  max-width: 1677px;
}
.contact-map iframe {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 420px;
  border: 0;
}
.contact-table {
  max-width: 1677px;
}
.contact-table__row {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 117, 80, 0.4);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
}
.contact-table__row:first-child { border-top: 1px solid rgba(255, 117, 80, 0.4); }
.contact-table__row dt {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.contact-table__row dd {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
}
.contact-table__row a.orange { color: var(--orange); }

/* ==========================================================================
   Impressum / Datenschutz
   ========================================================================== */
.legal {
  max-width: 900px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
}
.legal h2 {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 28px;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 44px;
  margin-bottom: 14px;
}
.legal h2:first-child { margin-top: 0; }
.legal p + p { margin-top: 14px; }
.legal a { color: var(--orange); }
.legal address { font-style: normal; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  .page-header { padding-top: 60px; }
  .page-header__logo { width: 262.5px; max-width: none; }
  .page-header hr { width: calc(100% - 50px); max-width: 352px; margin-top: 30px; }

  .page-title { font-size: 45px; line-height: 50px; letter-spacing: 0.9px; }

  .about,
  .training-intro,
  .pricing {
    grid-template-columns: minmax(0, 1fr);
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
    gap: 40px;
  }
  .pricing__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pricing__row dd { text-align: left; }

  .contact-table {
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
  }
  .contact-table__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .photo-strip {
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery {
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery li:nth-child(3n+2) { margin-top: 0; }

  .quote { padding: 60px 25px; }
  .quote p { font-size: 24px; }

  .schedule {
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
  }
  .schedule__filters { flex-wrap: wrap; }
  .schedule__list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .section-title { font-size: 32px; }
  .links {
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
  }
  .links__card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .contact-map {
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
  }

  .legal {
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
  }
}

/* ======================== veranstaltung.css ======================== */
/* ==========================================================================
   Veranstaltungs-Detailseite (z.B. "Bajo los focos")
   Ergänzt styles.css – gleiche Design-Tokens, gleiches Seitenraster.
   ========================================================================== */

/* Hero-Titel: Eventname statt "Hola y Bienvenidos" */
.hero__venue {
  margin-top: 12px;
  font-weight: 400;
  font-size: 22px;
  opacity: 0.9;
}

/* ---------- Detailbereich ---------- */
.event-detail {
  max-width: 1677px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6vw;
}
.event-detail__facts,
.event-detail__body { min-width: 0; }

.event-detail__facts h2 {
  font-family: var(--vollkorn);
  font-weight: 400;
  font-size: 45px;
  line-height: 50px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 40px;
  overflow-wrap: break-word;
}

.event-detail__row {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 117, 80, 0.4);
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
}
.event-detail__row dt {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.event-detail__row dd {
  min-width: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
}
.event-detail__row .muted { font-weight: 400; opacity: 0.75; }

.event-detail__body {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
}
.event-detail__body p + p { margin-top: 18px; }
.event-detail__body .strong { font-weight: 700; }
.event-detail__body .btn { margin-top: 25px; }
.event-detail__body .event-detail__poster {
  margin-top: 40px;
  width: 100%;
  max-width: 420px;
}

@media (max-width: 767px) {
  .event-detail {
    grid-template-columns: minmax(0, 1fr);
    width: 352px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
    gap: 50px;
  }
  .event-detail__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* ======================== splash.css ======================== */
/* ==========================================================================
   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 (aus der Splashsite, ohne Zurück-Pfeil) */
.page-header hr { display: none; }
.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; }
}


/* ==========================================================================
   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)); }
}

/* ==========================================================================
   Ergänzungen für die vollständige Website (vindelis, Markenkern CMS-Kern)
   Baut auf styles.css, pages.css, veranstaltung.css und splash.css auf.
   Gestaltung bleibt beim Splash-Stand; hier kommen nur die Bausteine dazu,
   die die Splashsite nicht hatte: Menü, Veranstaltungen, Unterseiten, CMS-Bilder.
   ========================================================================== */

/* ---------- Barrierefreiheit ---------- */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 25px; top: -60px; z-index: 200;
  background: var(--orange); color: var(--plum); padding: 12px 18px; font-weight: 600;
}
.skip:focus { top: 25px; }

/* ---------- Menü: Icon als Inline-SVG, aktuelle Seite markiert ---------- */
/* Quadrat 25 % kleiner als im Figma: Desktop 100 → 75 px, Handy 75 → 56 px (unten). Position bleibt 25/25. */
.nav-burger { width: 75px; height: 75px; padding: 9px; }
.nav-burger svg, .nav-burger__close { width: 57px; height: 57px; }
.nav-burger__close::before, .nav-burger__close::after { width: 35px; }
body.menu-open .nav-burger svg { display: none; }
.menu-overlay ul a[aria-current="page"] { color: var(--orange); }
.menu-overlay__bottom .menu-overlay__legal { margin-left: 36px; }
.menu-overlay__bottom .menu-overlay__legal a { color: var(--orange); }
.menu-overlay:not(.is-open) { visibility: hidden; transition: transform 0.35s ease, visibility 0s 0.35s; }
body.menu-open .menu-overlay { visibility: visible; transition: transform 0.35s ease; }
@media (max-width: 767px) {
  .menu-overlay__bottom .menu-overlay__legal { margin-left: 0; width: 100%; }
  .nav-burger { width: 56px; height: 56px; padding: 0; }
  .nav-burger svg, .nav-burger__close { width: 56px; height: 56px; }
}

/* ---------- Schaltflächen: Pfeil als Inline-SVG ---------- */
.btn .btn__pfeil { width: 25px; height: 25px; flex: none; }
.btn { gap: 12px; }
.btn:hover { filter: brightness(1.06); }
.btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.btn--orange:focus-visible { outline-color: var(--plum); }
/* <button> erbt Schrift, Farbe und Rahmen nicht von selbst («Karte anzeigen» stand in Arial mit grauem Rahmen) */
button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; }

/* ---------- Logo in Kopf und Footer verlinkt ---------- */
/* Kopfzeile der Inhaltsseiten: Burger links, Logo rechts – beide 25 px vom Rand und gleich hoch
   (Desktop 75 px, Handy 56 px). Ersetzt das zentrierte Logo mit 100 px Polster darüber:
   zwei Kanten statt drei Achsen, der Seitentitel steht im ersten Bildschirm. */
.page-header { height: 75px; margin-top: -75px; margin-bottom: -25px; padding-top: 0; align-items: flex-end; }
.page-header > a { display: block; }
.page-header__logo { width: 219px; max-width: none; height: auto; margin: 0; }
.page-header > a:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
/* Bild-Header (Startseite, Veranstaltungen): .hero__logo ist der Link, das Bild füllt ihn */
.hero__logo img { width: 100%; height: auto; }
.hero__logo:focus-visible { outline: 2px solid var(--orange); outline-offset: 8px; }
.site-footer__frame > a { display: block; }
@media (max-width: 767px) {
  .site-footer__frame > a { display: contents; }
  .page-header { height: 56px; margin-top: -25px; margin-bottom: 0; padding: 0 25px 0 0; }
  .page-header__logo { width: 163px; }
}

/* ---------- Grosse Titel auf dem Handy: mit der Breite skalieren ----------
   Bei fixen 45 px ist «TANZTRAINING» breiter als die 340-px-Spalte und brach
   auf der Splashsite mitten im Wort um («TANZTRAININ / G»). */
@media (max-width: 767px) {
  :root { --fs-display: min(45px, 10.2vw); }
  .page-title { font-size: var(--fs-display); line-height: var(--lh-display); }
}

/* ---------- Startseite: Block «Tanztraining» ---------- */
.seite-start .training-intro .page-title { font-size: var(--fs-display); }
.training-intro__text .btn { margin-top: 8px; }

/* ---------- Veranstaltungen ---------- */
/* Kartentitel skalieren mit; ohne Skript lange Wörter («Schülervorstellung») trennen statt überlaufen.
   Mit Skript gilt «Titel: wo immer es geht, nicht trennen» (ganz unten). */
.event-card__body h3 {
  font-size: clamp(30px, 2.7vw, 50px);
  line-height: 1.1;
  min-height: 2.2em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 767px) {
  .event-card__body h3 { font-size: min(45px, 9.5vw); }
}
.event-card:not(.event-card--platzhalter) figure img { object-position: center !important; }
.events--liste .events__head h2 { font-size: var(--fs-h2); }
.events--liste + .events--liste { margin-top: 0; }
/* Übersicht: Zwischentitel näher an Seitentitel und Karten – Nähe zeigt Zugehörigkeit */
.page-title + .events--liste, .page-title + .leer-hinweis { margin-top: -50px; }
.events--liste .events__grid { margin-top: 30px; }
@media (max-width: 767px) {
  .page-title + .events--liste, .page-title + .leer-hinweis { margin-top: -20px; }
  .events--liste .events__grid { margin-top: 25px; }
}
/* Linie links an der Karte: beginnt auf Titelhöhe, 25 px unter dem Bild (Figma). Bisher maskierte
   eine feste Prozenthöhe den oberen Teil – bei unterschiedlich langen Titeln begann die Linie mitten
   im Titel. Jetzt ist sie der linke Rand des Textteils (Verlauf: oben 25 px frei); die 1-px-Fuge
   zwischen den Bildern macht das Raster. */
.event-card { border-left: 0; }
.event-card::before { content: none; }
.events__grid { column-gap: 1px; }
.event-card__body { border-left: 1px solid transparent; border-image: linear-gradient(to bottom, transparent 25px, var(--orange) 25px) 1; }
/* Ganze Karte klickbar: «Mehr lesen» spannt seine Klickfläche über die Karte (ein Link, ein Tab-Halt) */
.event-card .btn::after { content: ""; position: absolute; inset: 0; }
/* Kein Filter beim Hover: filter macht den Knopf zum Bezugsrahmen – die Klickfläche schrumpfte im Moment des Klicks auf den Knopf */
.event-card .btn:hover, .event-feature__mehr:hover { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .event-card figure img, .event-feature__bild img { transition: transform 0.5s ease; }
  .event-card:hover figure img, .event-feature:hover .event-feature__bild img { transform: scale(1.03); }
}
.events__grid { row-gap: 50px; }
.leer-hinweis,
.galerie-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
  align-self: flex-start;
}
.leer-hinweis a,
.galerie-text a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

/* Kopf einer Veranstaltung: gleiches Bild-Hero, ohne Startseiten-Claim */
.hero--anlass .hero__title { top: auto; bottom: 9%; }
.hero--anlass .hero__title h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
.hero--anlass .hero__title p { margin-top: 18px; font-size: clamp(20px, 2vw, 32px); line-height: 1.3; }
.hero__kicker {
  font-size: var(--fs-meta) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 10px !important;
}
.hero--anlass .hero__venue { margin-top: 8px; font-size: clamp(16px, 1.4vw, 22px); }

.event-detail__facts h2 { font-size: var(--fs-h2); line-height: 1.15; }
.event-detail__body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); }
.event-detail__body p + p { margin-top: 18px; }
.event-detail__body ul { margin: 12px 0 0 1.2em; }
.event-detail__body a:not(.btn) { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.event-detail__body .btn { margin-top: 10px; }
.event-detail__body .event-detail__poster { margin-top: 40px; }
.event-detail--einspaltig { grid-template-columns: minmax(0, 1fr); }
.event-detail__row dd { font-size: var(--fs-small); }

.anlass-galerie { max-width: 1677px; }
.anlass-galerie .gallery { margin-top: 32px; }

/* ---------- Über uns ---------- */
.about { gap: var(--col-gap); }
.about__text { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); }
.about__text a { color: var(--orange); text-decoration: underline; }
.photo-strip--1 { grid-template-columns: minmax(0, 1fr); }
.photo-strip--1 img { aspect-ratio: 1677 / 640; }
.photo-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.links__logo--leer {
  display: grid; place-items: center;
  background: var(--plum); color: var(--orange);
  font-family: var(--vollkorn); font-size: 56px; text-transform: uppercase;
}
/* Links: Partner nebeneinander, so viele Spalten wie Platz haben (ab 1280 px zwei). Der Titel
   spannt über alle Spalten; der negative Rand hält seinen Abstand zu den Karten bei 40 px. */
.links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: 56px 40px;
}
.links > .section-title { grid-column: 1 / -1; margin-bottom: -16px; }
.links__body p { font-size: var(--fs-body); line-height: 1.4; margin-bottom: 20px; }
@media (max-width: 767px) {
  .links { grid-template-columns: minmax(0, 1fr); row-gap: 72px; }
  .links > .section-title { margin-bottom: -32px; }
}

/* ---------- Kontakt: Karte erst nach Klick (Datenschutz) ---------- */
.contact-map {
  position: relative;
  background: var(--plum);
  color: var(--beige);
  aspect-ratio: 21 / 9;
  max-height: 420px;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 32px 25px;
}
.contact-map.is-geladen { padding: 0; background: none; }
.contact-map.is-geladen iframe { width: 100%; height: 100%; aspect-ratio: auto; max-height: none; }
.contact-map__hinweis { max-width: 560px; text-align: center; font-size: var(--fs-small); line-height: 1.5; }
.contact-map__titel {
  font-family: var(--vollkorn); font-size: var(--fs-h3); line-height: 1.25;
  text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
}
.contact-map__knoepfe { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.contact-map .btn { font-size: 16px; }
.contact-map .btn--plum { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.contact-table__row dd { font-size: var(--fs-body); }
@media (max-width: 767px) {
  .contact-map { aspect-ratio: auto; min-height: 360px; width: 352px; max-width: calc(100% - 50px); margin: 0 auto; }
}

/* ---------- Rechtliches: Listen und Links im Fliesstext ---------- */
.legal ul { margin: 10px 0 0 1.2em; }
.legal p + ul, .legal ul + p { margin-top: 14px; }

/* ---------- Bilder aus dem CMS: ruhiger Platzhalter, solange sie laden ---------- */
.gallery img, .photo-strip img, .event-card figure img { background: rgba(48, 4, 25, 0.06); }

/* Bildstreifen «Über uns»: Ausschnitt etwas oberhalb der Mitte – bei Hochformaten bleiben die Köpfe im Bild */
.photo-strip img { object-position: center 30%; }

/* Untertitel einer Veranstaltung: ohne Skript lange Wörter mit Trennstrich trennen statt mitten im Wort umbrechen («Flamencoschüler*innen»).
   Mit Skript gilt «Titel: wo immer es geht, nicht trennen» (ganz unten). */
.event-detail__facts h2 { hyphens: auto; }

/* ---------- Veranstaltungen: kommender Anlass als Aufmacher ----------
   Ein einzelner Anlass im Viererraster liess drei Viertel leer, das Ticket stand erst auf der Detailseite. */
.events__aufmacher { margin-top: 30px; }
.event-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--col-gap); align-items: center; }
.event-feature + .event-feature { margin-top: 50px; }
.event-feature__bild { aspect-ratio: 4 / 3; overflow: hidden; }
.event-feature__bild img { width: 100%; height: 100%; object-fit: cover; }
.event-feature h3 { font-family: var(--vollkorn); font-weight: 400; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: 0.9px; text-transform: uppercase; }
.event-feature__unter { margin-top: 10px; font-size: var(--fs-body); line-height: var(--lh-body); }
.event-feature__datum { margin-top: 24px; font-family: var(--vollkorn); font-size: var(--fs-h3); line-height: var(--lh-tight); }
.event-feature__ort { margin-top: 4px; font-size: var(--fs-body); line-height: var(--lh-body); }
.event-feature__teaser { margin-top: 20px; font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); }
.event-feature__knoepfe { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.event-feature__mehr::after { content: ""; position: absolute; inset: 0; }
.event-feature__ticket { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .events__aufmacher { margin-top: 25px; }
  .event-feature { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .event-feature__bild { aspect-ratio: 352 / 300; }
  .event-feature__knoepfe .btn { width: 100%; }
}

/* ---------- Stundenplan: alle Termine, vergangene aufklappbar ----------
   Zeiten einmal über der Liste statt in jeder Zeile; das nächste Training ist markiert,
   vergangene Termine stehen gedämpft in einem aufklappbaren Block. */
.schedule__zeiten { margin-top: 24px; font-size: var(--fs-small); line-height: 1.5; }
.schedule__zeiten span { margin-right: 10px; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.schedule__list li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; }
.schedule__type { text-align: right; }
.schedule__naechstes {
  display: table; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--orange); color: var(--plum);
  font-family: var(--raleway); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.schedule__vergangen { margin-top: 16px; max-width: var(--measure); }
.schedule__vergangen > summary {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; list-style: none;
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6e6862;
}
.schedule__vergangen > summary::-webkit-details-marker { display: none; }
.schedule__vergangen > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.2s ease;
}
.schedule__vergangen[open] > summary::before { transform: rotate(45deg); }
.schedule__vergangen > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.schedule__vergangen .schedule__list { margin-top: 4px; }
.schedule__vergangen li { border-bottom-color: rgba(48, 4, 25, 0.12); }
.schedule__vergangen .schedule__date,
.schedule__vergangen .schedule__type { color: #6e6862; }
.schedule__vergangen + .schedule__list { margin-top: 0; }

/* ---------- Bildergalerie: Vollbild ----------
   Jedes Bild ist ein Link aufs Original (geht auch ohne Skript); site.js öffnet es im Vollbild. */
.gallery__link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gallery__link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
html.leuchtkasten-offen { overflow: hidden; }
.leuchtkasten {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(48, 4, 25, 0.97); color: var(--beige);
}
.leuchtkasten::backdrop { background: rgba(48, 4, 25, 0.97); }
.leuchtkasten[open] { display: grid; place-items: center; }
.leuchtkasten__bild { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.leuchtkasten__bild img { width: auto; height: auto; max-width: calc(100vw - 200px); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
.leuchtkasten__zaehler { font-size: var(--fs-meta); letter-spacing: 0.12em; color: var(--orange); }
.leuchtkasten button { position: fixed; width: 56px; height: 56px; cursor: pointer; }
.leuchtkasten button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.leuchtkasten__zu { top: 25px; right: 25px; }
.leuchtkasten__zu::before,
.leuchtkasten__zu::after { content: ""; position: absolute; top: 50%; left: 50%; width: 35px; height: 2px; background: var(--orange); }
.leuchtkasten__zu::before { transform: translate(-50%, -50%) rotate(45deg); }
.leuchtkasten__zu::after { transform: translate(-50%, -50%) rotate(-45deg); }
.leuchtkasten__nav { top: 50%; margin-top: -28px; }
.leuchtkasten__nav::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  border-top: 2px solid var(--orange); border-right: 2px solid var(--orange);
}
.leuchtkasten__nav--zurueck { left: 25px; }
.leuchtkasten__nav--weiter { right: 25px; }
.leuchtkasten__nav--zurueck::before { transform: translate(-30%, -50%) rotate(-135deg); }
.leuchtkasten__nav--weiter::before { transform: translate(-70%, -50%) rotate(45deg); }
.leuchtkasten--einzeln .leuchtkasten__nav { display: none; }
@media (max-width: 767px) {
  .leuchtkasten__bild img { max-width: 100vw; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); }
  .leuchtkasten__nav { top: auto; bottom: 25px; margin-top: 0; }
}

/* ---------- Text-Orange für kleine Schrift ----------
   Das Markenorange #FF7550 erreicht auf Beige nur 2,3:1 – für grosse Titel vertretbar, für Labels,
   Links und Akzente in Textgrösse zu schwach. Kleine Schrift auf hellem Grund nimmt darum das
   Text-Orange derselben Farbfamilie (4,8:1, WCAG AA). Titel und alles auf Plum bleiben im Markenorange. */
:root { --orange-text: #BB3D1B; }
.schedule__filters,
.schedule__type--accent,
.contact-table__row dt,
.contact-table__row a.orange,
.event-detail__row dt,
.legal a,
.leer-hinweis a,
.galerie-text a,
.event-detail__body a:not(.btn),
.about__text a,
.intro__text .mail:hover { color: var(--orange-text); }

/* ---------- Karten: der Titel führt, das Datum folgt ----------
   Das Datum (38 px) war grösser als der Titel – jetzt eine Stufe darunter und näher am Titel. */
.event-card__date { margin-top: 30px; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; }
@media (max-width: 767px) {
  .event-card__date { margin-top: 25px; font-size: 22px; line-height: 1.3; }
}

/* ---------- Footer: Adresse eine Stufe kleiner ----------
   In Titelgrösse (bis 45 px) konkurrierte die Adresse mit dem Seiteninhalt. */
@media (min-width: 768px) {
  .site-footer__verein,
  .site-footer__adresse { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.2; }
}

/* Handy: Seitentitel, die direkt in der Seite stehen (Galerie, Kontakt, Rechtliches, Übersichten), auf dieselbe Flucht wie der Inhalt */
@media (max-width: 767px) {
  .page > .page-title { width: 352px; max-width: calc(100% - 50px); margin: 0 auto; }
  .page > .leer-hinweis, .page > .galerie-text { width: 352px; max-width: calc(100% - 50px); margin-left: auto; margin-right: auto; align-self: center; }
}

/* ---------- Titel: wo immer es geht, nicht trennen ----------
   site.js setzt .titel-fit an <html> und prüft jeden Titel einzeln:
   1. Passt jedes Wort in die Zeile, wird nichts getrennt – auch nicht an weichen Trennstellen (&shy;).
   2. Ragt ein Wort hinaus, wird der Titel schrittweise kleiner, höchstens auf 75 %.
   3. Reicht auch das nicht, darf der Browser trennen (.titel--trennen), und zwar nur lange Wörter.
   Kartentitel einer Reihe bleiben gleich gross. Ohne Skript gelten die Regeln weiter oben. */
html.titel-fit :is(h1, h2, h3, .page-title) {
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  min-width: 0;   /* in Flex- und Grid-Zeilen nicht mit dem längsten Wort mitwachsen – sonst sieht das Skript den Überlauf nicht */
}
html.titel-fit :is(h1, h2, h3, .page-title).titel--trennen {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: anywhere;
}