/* mijo-Sportschule – Stylesheet
   Design-Nachbau der Elementor-Seite: hellgrüner Grund, weiße und blaue
   Karten mit 20px-Radius, Wellen-Übergänge, Barlow Condensed + Montserrat.
   Farben und Maße stammen aus den Elementor-Globals des Originals.
   Breakpoints wie bei den anderen Kundenseiten: 991 / 767 / 479 */

/* ---------------------------------------------------------------- Fonts */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- Tokens */

:root {
  --blau: #004F88;         /* Primär */
  --blau-text: #003F6C;    /* Fließtext */
  --gruen: #B5FFAD;        /* Akzent (Buttons, Labels) */
  --gruen-hell: #F2FFF0;   /* Seitenhintergrund */
  --koralle: #FF8372;      /* Zweitakzent (Hover im Dropdown) */
  --weiss: #FFFFFF;

  --schrift-titel: 'Barlow Condensed', sans-serif;
  --schrift-text: 'Montserrat', sans-serif;

  --inhaltsbreite: 1200px;
  --radius: 20px;
  --radius-klein: 8px;
}

/* ---------------------------------------------------------------- Basis */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.7;
  color: var(--blau-text);
  background: var(--gruen-hell);
}

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.1;
  color: var(--blau-text);
}

h2 { font-size: 44px; }
h3 { font-size: 30px; }

a { color: var(--blau); }

img, video, svg { max-width: 100%; height: auto; }

p + p { margin-top: 12px; }

.sektion {
  max-width: var(--inhaltsbreite);
  margin: 0 auto;
  padding: 56px 5% 40px;
}

.sektion > h2 { margin-bottom: 28px; }

/* ------------------------------------------------------ Wellen-Übergänge */

.welle {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: -1px;   /* Subpixel-Säume an den Übergängen vermeiden */
  margin-bottom: -1px;
}

/* -------------------------------------------------------------- Header */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding: 10px 3%;
}

.logo { display: flex; align-items: center; }
.logo img { height: 44px; width: auto; }

/* Startseite: kein kleines Logo im Header (großes Logo liegt im Hero) */
.start .logo { visibility: hidden; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.site-nav a {
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 28px;
  color: var(--weiss);
  text-decoration: none;
  padding: 4px 11px;
}

.site-nav a:hover { color: var(--gruen); }

.site-nav li { position: relative; }

.site-nav > ul > li { display: flex; align-items: center; }

.sub-toggle {
  border: 0;
  background: none;
  color: var(--weiss);
  cursor: pointer;
  padding: 0 2px;
  font-size: 15px;
}

.sub-toggle::after { content: '▾'; }

.site-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  padding: 10px 0;
  background: var(--blau);
  border-radius: 0 0 var(--radius-klein) var(--radius-klein);
  box-shadow: 0 16px 20px -6px rgba(0, 0, 0, 0.5);
}

.has-sub.offen > .sub-menu { display: block; }

.sub-menu li { display: block; }

.sub-menu a {
  display: block;
  padding: 8px 18px;
  font-size: 22px;
  font-weight: 500;
}

.sub-menu a:hover { color: var(--koralle); }

.nav-toggle { display: none; }

/* ----------------------------------------------------------------- Hero */

/* Startseite: Video-Hero mit blauem Overlay und großem Logo */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--blau);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 79, 136, 0.6);
}

.hero-inhalt {
  position: relative;
  z-index: 1;
  width: min(680px, 72%);
  padding-bottom: 120px;
}

.hero-cta {
  position: absolute;
  z-index: 2;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 92%);
  display: block;
  text-align: center;
  background: var(--gruen);
  color: var(--blau);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 20px 40px;
}

.hero-cta:hover { background: var(--weiss); }

/* Unterseiten: Foto-Hero mit Overlay, Wellen-Kante und weißem Titel */
.seiten-hero {
  position: relative;
  background-color: var(--blau);
  background-size: cover;
  background-position: center top;
  padding: 150px 0 0;
  text-align: center;
}

.seiten-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 79, 136, 0.55);
}

.seiten-hero h1 {
  position: relative;
  z-index: 1;
  color: var(--weiss);
  font-size: 60px;
  padding: 0 5% 40px;
}

.seiten-hero .welle { position: relative; z-index: 1; }

/* Großer grüner CTA-Knopf, der die Hero-Kante überlappt */
.cta-gross {
  position: relative;
  z-index: 2;
  display: table;
  margin: -46px auto 0;
  background: var(--gruen);
  color: var(--blau);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 18px 44px;
  box-shadow: 0 6px 24px rgba(0, 63, 108, 0.18);
}

.cta-gross:hover { background: var(--weiss); }

/* ----------------------------------------------------- Blaue Sektionen */

.blau-sektion { background: var(--blau); }

.blau-sektion .sektion { padding-top: 24px; padding-bottom: 32px; }

.blau-sektion h2, .blau-sektion h3, .blau-sektion p { color: var(--weiss); }

/* --------------------------------------------------------------- Karten */

.karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 4px 18px rgba(0, 63, 108, 0.05);
}

.karte + .karte { margin-top: 32px; }

.karten-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.karten-raster .karte { display: flex; flex-direction: column; }

.karte h3 { text-align: center; margin-bottom: 18px; }
.karte h3 a { text-decoration: none; }

.karte .karten-bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.karte .karten-text {
  text-align: center;
  margin: 16px 0 20px;
}

.karte .knopf-stapel {
  margin-top: auto;
  display: grid;
  justify-items: center;
  gap: 12px;
}

/* Breite Karte mit Bild + Text nebeneinander (Fördertraining, Trainer) */
.karte-geteilt {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.karte-geteilt.bild-rechts { grid-template-columns: 1fr 1.2fr; }
.karte-geteilt.bild-rechts .karten-medien { order: 2; }

.karte-geteilt h2, .karte-geteilt h3 { text-align: left; margin-bottom: 12px; }

.fakten { list-style: none; }
.fakten li { padding: 2px 0; }

/* --------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-block;
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  padding: 12px 28px;
  border-radius: var(--radius-klein);
  background: var(--blau);
  color: var(--weiss);
  border: 0;
  cursor: pointer;
}

.knopf:hover { background: var(--gruen-hell); color: var(--blau); }

.knopf-gruen {
  display: inline-block;
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  padding: 12px 28px;
  border-radius: var(--radius-klein);
  background: var(--gruen);
  color: var(--blau);
  border: 0;
  cursor: pointer;
}

.knopf-gruen:hover { background: var(--blau); color: var(--weiss); }

/* ------------------------------------------------------------ Slideshow */

.slideshow {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
}

.slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;
}

.slideshow img.aktiv { opacity: 1; }

.slideshow-punkte {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  display: flex;
  gap: 8px;
  z-index: 1;
}

.slideshow-punkte span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.slideshow-punkte span.aktiv { background: var(--blau); }

/* ------------------------------------------------------ Runde Portraits */

.trainer-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 8px;
}

.trainer-kachel { text-decoration: none; }

.trainer-kachel img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.trainer-kachel figcaption {
  font-family: var(--schrift-text);
  font-weight: 700;
  font-size: 20px;
  color: var(--weiss);
  padding-top: 14px;
  text-align: center;
}

/* Auf hellem Grund (Coach-Seite) dunkle Namen */
.helle-namen .trainer-kachel figcaption { color: var(--blau-text); }

/* ------------------------------------------------------------------ FAQ */

.faq-karte { padding: 16px 28px; }

.faq-punkt summary {
  cursor: pointer;
  padding: 10px 0;
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 20px;
  color: var(--blau);
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.faq-punkt summary::-webkit-details-marker { display: none; }

.faq-punkt summary::before {
  content: '›';
  font-weight: 700;
  transition: transform 0.2s;
  transform: rotate(0deg);
}

.faq-punkt[open] summary::before { transform: rotate(90deg); }

.faq-punkt .faq-antwort { padding: 4px 0 14px 24px; }

.faq-punkt .faq-antwort ul { padding-left: 24px; margin-top: 8px; }

/* ------------------------------------------------- Termine (Camp-Karten) */

.termin-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 560px));
  gap: 32px;
}

.camp-karte {
  background: var(--blau);
  border-radius: var(--radius);
  padding: 28px 40px 36px;
  color: var(--weiss);
}

.camp-karte .camp-termin {
  color: var(--weiss);
  font-size: 34px;
  text-align: center;
  margin-bottom: 4px;
}

.camp-karte .camp-meta {
  text-align: center;
  margin-bottom: 20px;
  color: var(--gruen);
  font-weight: 500;
}

.camp-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
}

.camp-zeile .camp-jahrgang-label { font-weight: 700; font-size: 18px; }

.camp-zeile .knopf-gruen { font-size: 18px; padding: 8px 14px; min-width: 210px; }

.camp-leer { font-weight: 500; }

/* ------------------------------------------------------- Anmelde-Dialog */

.anmelde-dialog {
  margin: auto; /* der globale Reset entfernt das UA-Default-Zentrieren */
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  width: min(680px, 94vw);
  height: min(860px, 92vh);
  overflow: hidden;
}

.anmelde-dialog::backdrop { background: rgba(0, 63, 108, 0.7); }

.anmelde-dialog iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.anmelde-dialog .dialog-schliessen {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--blau);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

/* -------------------------------------------------------------- Kontakt */

.kontakt-raster {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: start;
}

.kontakt-liste { list-style: none; }

.kontakt-liste li { padding: 14px 0; display: flex; align-items: center; gap: 16px; }

.kontakt-liste .kontakt-icon { flex: 0 0 28px; color: var(--weiss); }

.kontakt-liste a {
  color: var(--gruen);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
}

.kontakt-liste a:hover { text-decoration: underline; }

.social-leiste {
  display: flex;
  gap: 28px;
  margin-top: 24px;
}

.social-leiste a { color: var(--weiss); }
.social-leiste a:hover { color: var(--gruen); }
.social-leiste svg { width: 34px; height: 34px; fill: currentColor; }

/* Formular */

form.anfrage { display: grid; gap: 16px; }

.formular-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

form.anfrage label.feld-label {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 22px;
  color: var(--gruen);
  margin-bottom: 4px;
}

form.anfrage input[type="text"],
form.anfrage input[type="email"],
form.anfrage textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--schrift-text);
  font-size: 16px;
  color: var(--blau-text);
  border: 0;
  border-radius: 4px;
  background: var(--weiss);
}

form.anfrage textarea { resize: vertical; }

.einwilligung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--gruen);
  font-size: 15px;
}

.einwilligung a { color: var(--weiss); font-weight: 700; }

.einwilligung input { margin-top: 6px; }

.formular-senden {
  justify-self: start;
  cursor: pointer;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 24px;
  padding: 8px 60px;
  background: var(--gruen);
  color: var(--blau);
  border: 0;
  border-radius: var(--radius-klein);
}

.formular-senden:hover { background: var(--weiss); }
.formular-senden:disabled { opacity: 0.6; cursor: wait; }

.hp-feld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#formular-hinweis {
  padding: 12px 16px;
  border-radius: var(--radius-klein);
  background: var(--gruen);
  color: var(--blau);
  font-weight: 500;
}

#formular-hinweis.fehler { background: var(--koralle); color: var(--weiss); }

/* -------------------------------------------------------------- Partner */

.partner-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  gap: 40px;
  padding: 24px 0 40px;
}

.partner-raster img { max-height: 110px; width: auto; max-width: 100%; }

/* --------------------------------------------------------------- Footer */

.site-footer { background: var(--blau); }

.footer-inhalt {
  max-width: var(--inhaltsbreite);
  margin: 0 auto;
  padding: 8px 5% 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.footer-inhalt .firmenname {
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 24px;
  color: var(--weiss);
}

.footer-nav {
  list-style: none;
  text-align: right;
}

.footer-nav a {
  color: var(--weiss);
  font-weight: 500;
  text-decoration: none;
  line-height: 2;
}

.footer-nav a:hover { color: var(--gruen); }

/* Nach-oben-Knopf */
.nach-oben {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blau);
  color: var(--weiss);
  text-decoration: none;
  font-size: 22px;
  box-shadow: 0 0 5px 6px rgba(242, 255, 240, 0.38);
}

.nach-oben:hover { background: var(--koralle); }

/* ---------------------------------------------------------------- Prosa */

.prosa { max-width: 900px; }
.prosa .karte { padding: 40px; }
.prosa h1 { font-size: 48px; margin-bottom: 24px; }
.prosa h2 { font-size: 32px; margin-top: 36px; }
.prosa h3 { font-size: 22px; margin-top: 22px; font-family: var(--schrift-text); font-weight: 600; }
.prosa h4 { font-size: 18px; margin-top: 16px; font-family: var(--schrift-text); font-weight: 600; }
.prosa p, .prosa ul { margin-top: 12px; }
.prosa ul { padding-left: 24px; }

/* ------------------------------------------------------ Barrierefreiheit */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 991px) {
  h2 { font-size: 36px; }

  .nav-toggle {
    display: grid;
    gap: 5px;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 8px;
    z-index: 21;
  }

  .nav-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--weiss);
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blau);
    padding: 8px 5% 20px;
    box-shadow: 0 16px 20px -6px rgba(0, 0, 0, 0.4);
  }

  .site-nav.offen { display: block; }

  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }

  .site-nav .sub-menu {
    position: static;
    box-shadow: none;
    padding: 0 0 0 20px;
    min-width: 0;
  }

  .seiten-hero h1 { font-size: 46px; }
  .hero-cta, .cta-gross { font-size: 30px; }

  .karten-raster { grid-template-columns: 1fr 1fr; }
  .trainer-raster { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .karte-geteilt, .karte-geteilt.bild-rechts { grid-template-columns: 1fr; gap: 20px; }
  .karte-geteilt.bild-rechts .karten-medien { order: 0; }
  .kontakt-raster { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 767px) {
  h2 { font-size: 32px; }
  .sektion { padding: 40px 5% 28px; }
  .seiten-hero { padding-top: 120px; }
  .seiten-hero h1 { font-size: 38px; }
  .hero-cta, .cta-gross { font-size: 24px; padding: 14px 24px; }
  .karten-raster { grid-template-columns: 1fr; }
  .formular-zeile { grid-template-columns: 1fr; gap: 16px; }
  .partner-raster { grid-template-columns: 1fr; }
  .footer-inhalt { flex-direction: column; }
  .footer-nav { text-align: left; }
  .camp-zeile { flex-direction: column; align-items: flex-start; }
  .camp-zeile .knopf-gruen { width: 100%; }
  .welle { height: 44px; }
}

@media (max-width: 479px) {
  .trainer-raster { grid-template-columns: 1fr; }
  .seiten-hero h1 { font-size: 32px; }
  .karte { padding: 20px; }
  .camp-karte { padding: 20px; }
}