/* ===========================================================================
   geruest.css - Kopfbereich, Navigation und Fussbereich

   Nur das Geruest der oeffentlichen Webseite. Hero, Angebotsliste,
   Stundenplan, Astrid, Studio und Kontaktformular folgen ab Phase P4.

   Setzt tokens.css und basis.css voraus. Keine externen URLs.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Skip-Link
   Sichtbar, sobald er den Tastaturfokus erhaelt.
   ------------------------------------------------------------------------ */
.skip-link {
  transition: transform var(--dauer-kurz) var(--kurve-standard);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   2. Kopfbereich
   ------------------------------------------------------------------------ */
.kopfbereich {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-l);
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--abstand-m) var(--seitenrand) var(--abstand-s);
  border-bottom: var(--rahmen-duenn) solid var(--linie-dezent);
}

.kopfbereich__logo {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
}

.kopfbereich__logo img {
  /* Die Untergrenze von 9rem waechst mit der Schriftgroesse des Besuchers
     mit - das ist richtig, denn das Logo traegt den Schriftzug "MAHADEVI
     YOGA". Bei 200 Prozent Schriftgroesse sind daraus aber 288 px, und auf
     einem 320 px schmalen Geraet ragte das Logo dann aus dem Bild.
     Gemessen in P10.

     Die Begrenzung rechnet deshalb mit 100vw und NICHT mit 100%: Prozente
     bezoegen sich auf den Elternlink, dessen Breite ihrerseits aus diesem
     Bild folgt. Das ist ein Ringschluss - im ersten Versuch schrumpfte das
     Logo dadurch sichtbar zusammen und die Navigation brach in eine zweite
     Zeile um. 100vw haengt nur am Fenster und kann das nicht. Abgezogen
     wird das Innenmass des Kopfbereichs, also zweimal der Seitenrand. */
  width: clamp(9rem, 18vw, 13.375rem); /* 144 -> 214 px */
  max-width: calc(100vw - 2 * var(--seitenrand));
  height: auto;
}

/* ---------------------------------------------------------------------------
   3. Hauptnavigation
   ------------------------------------------------------------------------ */
.hauptnavigation__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hauptnavigation__verweis {
  display: inline-flex;
  align-items: center;
  min-height: var(--touchziel-min);
  padding-bottom: var(--abstand-3xs);
  border-bottom: var(--rahmen-duenn) solid transparent;
  color: var(--text-haupt);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  /* Der Unterstrich uebernimmt hier die Rolle der Unterstreichung. */
  text-decoration: none;
  transition:
    color var(--dauer-kurz) var(--kurve-standard),
    border-color var(--dauer-kurz) var(--kurve-standard);
}

.hauptnavigation__verweis:hover,
.hauptnavigation__verweis:focus-visible {
  border-bottom-color: currentcolor;
  color: var(--akzent-primaer);
}

/* ---------------------------------------------------------------------------
   4. Mobilmenue

   Ohne JavaScript bleibt die Navigation sichtbar und vollstaendig
   bedienbar. Erst wenn navigation.js geladen ist, setzt es die Klasse
   js-navigation und der Schalter uebernimmt.
   ------------------------------------------------------------------------ */
.menue-schalter {
  display: none;
  align-items: center;
  gap: var(--abstand-2xs);
  min-height: var(--touchziel-min);
  min-width: var(--touchziel-min);
  padding: var(--abstand-2xs) var(--abstand-xs);
  border: var(--rahmen-duenn) solid var(--linie-bedienelement);
  background: transparent;
  color: var(--text-haupt);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  cursor: pointer;
}

.menue-schalter__strich,
.menue-schalter__strich::before,
.menue-schalter__strich::after {
  display: block;
  width: 1.125rem;
  height: var(--rahmen-duenn);
  background: currentcolor;
}

.menue-schalter__strich {
  position: relative;
}

.menue-schalter__strich::before,
.menue-schalter__strich::after {
  position: absolute;
  left: 0;
  content: "";
}

.menue-schalter__strich::before {
  top: -0.3125rem;
}

.menue-schalter__strich::after {
  top: 0.3125rem;
  width: 70%;
}

@media (max-width: 47.99rem) {
  .kopfbereich {
    align-items: center;
  }

  /* Nur mit JavaScript wird eingeklappt. */
  .js-navigation .menue-schalter {
    display: inline-flex;
  }

  .js-navigation .hauptnavigation {
    display: none;
    flex-basis: 100%;
  }

  .js-navigation .hauptnavigation[data-offen] {
    display: block;
  }

  .hauptnavigation {
    flex-basis: 100%;
  }

  .hauptnavigation__liste {
    flex-direction: column;
    gap: 0;
    border-top: var(--rahmen-duenn) solid var(--linie-dezent);
  }

  .hauptnavigation__liste li + li {
    border-top: var(--rahmen-duenn) solid var(--linie-dezent);
  }

  .hauptnavigation__verweis {
    width: 100%;
    min-height: 3.25rem;
    padding-block: var(--abstand-2xs);
    border-bottom: 0;
  }
}

/* ---------------------------------------------------------------------------
   5. Inhaltsbereich
   ------------------------------------------------------------------------ */
.inhalt {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--sektionsabstand-klein) var(--seitenrand);
}

.ueberzeile {
  margin: 0 0 var(--abstand-m);
  color: var(--text-gedaempft);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label-weit);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   6. Fussbereich
   ------------------------------------------------------------------------ */
.fussbereich {
  background-color: var(--grund-invers);
  color: var(--text-auf-invers);
}

.fussbereich a {
  color: var(--text-auf-invers);
}

.fussbereich a:hover,
.fussbereich a:focus-visible {
  color: var(--akzent-sekundaer);
}

.fussbereich .ueberzeile {
  color: var(--text-auf-invers-gedaempft);
}

.fussbereich__raster {
  display: grid;
  /* min() verhindert, dass die Spalte breiter wird als der
     verfuegbare Platz. Ohne das laeuft das Raster unterhalb von
     etwa 320 px waagrecht ueber - im Browser nachgemessen. */
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  /* Enger als zuvor: Auf der Startseite traegt der Fuss nur noch Logo,
     Verbandszeichen und die Rechtslinks - die Kontaktangaben stehen direkt
     darueber im Kontaktbereich. */
  gap: var(--abstand-xl);
  align-items: center;
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--abstand-2xl) var(--seitenrand) var(--abstand-l);
}

.fussbereich__logo {
  width: min(100%, 18rem);
  height: auto;
}

.fussbereich__adresse {
  line-height: var(--zeilenhoehe-weit);
}

/* Die beiden Zeichen stehen nur noch hier - vorher wiederholte sie der
   Kontaktbereich unmittelbar davor. Dafuer duerfen sie deutlich groesser
   sein: Qualicert bis 112 px, das runde Verbandszeichen bis 100 px. Beide
   Quellbilder sind 128 beziehungsweise 112 px breit, es wird also nie
   hochgerechnet. */
.fussbereich__zeichen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fussbereich__zeichen img {
  width: clamp(4.5rem, 14vw, 7rem); /* 72 -> 112 px */
  height: auto;
}

.fussbereich__zeichen li:last-child img {
  width: clamp(4rem, 12.5vw, 6.25rem); /* 64 -> 100 px, rundes Zeichen */
  border-radius: var(--radius-kreis);
}

.fussbereich__abschluss {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--abstand-m) var(--seitenrand) var(--abstand-l);
  border-top: var(--rahmen-duenn) solid rgb(242 236 226 / 18%);
  color: var(--text-auf-invers-gedaempft);
  font-size: var(--groesse-fein);
}

/* Rechtslinks im Fussbereich (P8). Impressum und Datenschutz muessen von
   jeder Seite aus erreichbar sein. */
.fussbereich__rechtslinks {
  margin-top: var(--abstand-2xs);
}

.fussbereich__rechtslinks ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Das Klickziel muss die 44 px aus dem Design-System erreichen. Mit
   blossem Innenabstand kam es im Browser nur auf 37 px - deshalb eine
   ausdrueckliche Mindesthoehe. */
.fussbereich__rechtslinks a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touchziel-min);
  padding-inline-end: var(--abstand-2xs);
}