/*
 * Schule des Aufbruchs — Site Components
 * Header, Footer und globale Navigation.
 * Nutzt die Tokens aus design-system.css.
 */

/* ============================================================
   Header
   Mobile-first: Logo + Language Switch + Hamburger.
   Ab 1200px: volle Navigation, kein Hamburger.
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  background-color: var(--color-warm-white);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: var(--page-margin);
  text-decoration: none;
}

.site-header__logo-img {
  display: block;
  height: 44px;
  width: auto;
}

.site-header__right {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--grid-gap);
  padding: var(--grid-gap);
  padding-inline-end: var(--page-margin);
}

.site-header__lang {
  display: flex;
  align-items: center;
}

.site-header__nav {
  display: none;
}

/* Hamburger Button — nur unter 1200px sichtbar */
/* Platzhalter im Flex-Layout: reserviert die 44×44 px Position des
   Buttons, damit der Lang-Switch bei Position-fixed-Button nicht nach
   rechts wandert. Wird ab Desktop ausgeblendet, da dort der Toggle eh
   verschwindet. */
.site-header__toggle-slot {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.menu-toggle {
  position: fixed;
  top: calc((var(--header-height) - 44px) / 2);
  inset-inline-end: var(--page-margin);
  z-index: 999;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--color-black);
  border: 0;
  border-radius: var(--border-radius-m);
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 16px;
  height: 2px;
  background-color: var(--color-warm-white);
  border-radius: 2px;
}

@media (min-width: 1200px) {
  .site-header {
    align-items: flex-end;
  }

  .site-header__logo {
    padding: var(--spacer-s);
  }

  .site-header__logo-img {
    height: 68px;
  }

  .site-header__right {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0;
    padding: 0;
  }

  .site-header__lang {
    padding: var(--grid-gap) var(--grid-gap) 0;
  }

  .site-header__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
    padding: var(--grid-gap);
  }

  .menu-toggle,
  .site-header__toggle-slot {
    display: none;
  }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacer-l);
  background-color: var(--color-red);
  padding: var(--spacer-2xl) var(--page-margin) var(--page-margin);
}

.site-footer__nav,
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

/* ============================================================
   Nav Link (Header)
   ============================================================ */
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 8px var(--nav-link-padding-x);
  border-radius: var(--border-radius-m);
  background-color: var(--color-warm-white);
  color: var(--text-body);
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: var(--text-navigation);
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  background-color: var(--color-light-grey-trans-50);
}

.nav-link.is-active {
  background-color: var(--color-sand);
  color: var(--text-body);
}

/* Language Switch Variante: kein Hintergrund-Hover, stattdessen Unterstrich */
.nav-link--lang:hover,
.nav-link--lang:focus-visible {
  background-color: transparent;
  text-decoration: underline;
}

/* ============================================================
   Footer Link
   ============================================================ */
.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 8px var(--nav-link-padding-x);
  border-radius: var(--border-radius-m);
  background-color: var(--color-orange);
  color: var(--text-body);
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: var(--text-navigation);
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
  background-color: var(--color-black);
  color: var(--color-warm-white);
}

.footer-link.is-active {
  background-color: var(--color-black);
  color: var(--color-warm-white);
}

/* ============================================================
   Page Title (Default Page Hero)
   Mobile-first: 150px → Tablet 250px → Desktop 333px
   ============================================================ */
.page-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: var(--spacer-2xl) var(--page-margin);
  text-align: center;
  overflow: hidden;
}

.page-title h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 640px;
}

.page-title--green {
  background-color: var(--color-green);
}

.page-title--red {
  background-color: var(--color-red);
}

/* Hintergrund-Grafik: zwei dekorative SVGs flush am linken/rechten
   Rand des durch --page-margin gepadddeten Containers, dazwischen
   ein farbig gefüllter Bereich (orange bei rotem Hero, lime bei grünem). */
.page-title__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  padding: var(--page-margin);
  pointer-events: none;
  overflow: hidden;
  /* Reihenfolge nicht spiegeln, wenn die Seite auf RTL läuft —
     left-shape soll immer links sitzen, right-shape immer rechts. */
  direction: ltr;
}

.page-title__bg picture {
  display: contents;
}

.page-title__bg-shape {
  display: block;
  flex-shrink: 0;
  height: 100%;
  width: auto;
}

.page-title__bg-fill {
  flex: 1 1 0;
  align-self: stretch;
}

.page-title--red .page-title__bg-fill {
  background-color: var(--color-orange);
}

.page-title--green .page-title__bg-fill {
  background-color: var(--color-lime);
}

@media (min-width: 768px) {
  .page-title {
    min-height: 250px;
  }
}

@media (min-width: 1200px) {
  .page-title {
    min-height: 333px;
  }

  .page-title h1 {
    max-width: 830px;
  }
}

/* ============================================================
   Home Stage
   Mobile-first: kein Padding-X im Text-Box.
   Ab Tablet bekommt der Text-Box zusätzlich Spacer-2XL Padding-X.
   ============================================================ */
.home-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(80vh - var(--header-height));
  padding: var(--spacer-2xl) var(--page-margin);
  background-color: var(--color-red);
  overflow: hidden;
}

@media (min-width: 768px) {
  .home-stage {
    min-height: calc(100vh - var(--header-height));
  }
}

.home-stage__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacer-l);
  width: 100%;
  max-width: 1040px;
  padding: var(--spacer-2xl);
  text-align: center;
}

/* Dekorativer Hintergrund (nur home-experiment): 6 Shapes horizontal,
   erste linke Kante bündig links, letzte rechte Kante bündig rechts,
   die vier dazwischen gleichmäßig verteilt. Erreicht über
   left: i*20% + transform: translateX(-(i*20%)), dadurch ist die
   Verteilung unabhängig von der Shape-Breite. Innerer Wrapper bildet
   die Stage-Fläche minus Page-Margin nach (absolute Kinder werden
   relativ zur Padding-Edge des Wrappers positioniert, daher braucht
   es diesen extra Layer für das Padding). */
.home-stage__bg {
  position: absolute;
  inset: 0;
  padding: var(--page-margin);
  pointer-events: none;
  overflow: hidden;
}

.home-stage__bg-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Picture-Element überträgt seine Box nicht — display: contents lässt
   das innere <img> direkt im flex/positioned Layout des Wrappers landen,
   damit die Positions-Klasse auf dem img sauber greift. */
.home-stage__bg picture {
  display: contents;
}

/* --i (Index 0..n-1) wird inline pro Shape gesetzt, --bg-shape-denom
   (Anzahl - 1) am Container; so passt sich die Verteilung beim
   Ändern der Wiederholungs-Anzahl automatisch an. */
.home-stage__bg-shape {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  left: calc(100% / var(--bg-shape-denom) * var(--i));
  transform: translateX(calc(-100% / var(--bg-shape-denom) * var(--i)));
}

.home-stage__headline {
  margin: 0;
  width: 100%;
}

.home-stage__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  align-items: center;
  justify-content: center;
  width: 100%;
}


/* ============================================================
   Button
   Base ohne Shadow; *-on-color Varianten bekommen Shadow.
   ============================================================ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 8px var(--button-padding-x);
  border-radius: var(--border-radius-m);
  border: 0;
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: var(--text-button);
  font-weight: 550;
  line-height: 1.1;
  color: var(--text-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, padding 0.15s ease;
}

.button:hover,
.button:focus-visible {
  background-color: var(--color-black);
  color: var(--color-warm-white);
  padding-left: var(--button-padding-x-hover);
  padding-right: var(--button-padding-x-hover);
}

/* Primary — auf hellem Hintergrund (z. B. Chapter, Intro …) */
.button--primary {
  background-color: var(--color-orange);
  color: var(--text-body);
}

/* Secondary — auf hellem Hintergrund */
.button--secondary {
  background-color: var(--color-light-grey);
  color: var(--text-body);
}

/* Primary (on colored bg) — z. B. in der Hero-Stage */
.button--primary-on-color {
  background-color: var(--color-light-grey);
  color: var(--text-body);
  box-shadow: var(--shadow-button);
}

/* Secondary (on colored bg) — z. B. in der Hero-Stage */
.button--secondary-on-color {
  background-color: var(--color-earth);
  color: var(--text-body);
  box-shadow: var(--shadow-button);
}

/* ============================================================
   Main wrapper
   ============================================================ */
main {
  display: block;
  min-height: calc(100vh - var(--header-height));
}

/* ============================================================
   Mobile Menü (Overlay, < 1200px)
   Voller Bildschirm; öffnet via Hamburger im Header.
   Pro Reihe DE-Pill links, AR-Pill rechts mit sandfarbenem
   Zwischenraum; positionsabhängige Eck-Rundungen erzeugen den
   Tab-Effekt aus dem Figma.
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: auto;
  /* Layout-Richtung fest auf LTR — die deutschen Pills bleiben links,
     die arabischen rechts, egal welche Sprache gerade aktiv ist.
     Die arabischen <a> haben ihr eigenes dir="rtl", damit der Text
     innen weiterhin korrekt von rechts nach links läuft. */
  direction: ltr;
  /* Farbschema folgt dem Page-Title Hero. Default red:
       --menu-warm ersetzt die ursprünglich warm-white Flächen
       (Container, Pills, Peak-Wrapper, Close-X) durch orange/lime;
       --menu-sand ersetzt die ursprünglich sandfarbenen Flächen
       (Reihen, Peak-Bar, Divider-Bar) durch red/green. */
  --menu-warm: var(--color-orange);
  --menu-sand: var(--color-red);
  background-color: var(--menu-warm);
  transition: opacity 0.3s ease;
}

.mobile-menu--green {
  --menu-warm: var(--color-lime);
  --menu-sand: var(--color-green);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.mobile-menu-open {
  overflow: hidden;
}

.mobile-menu__top {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: var(--page-margin);
}

/* Close-Button auf Arabisch nach links — die Pills bleiben aber LTR
   (siehe direction: ltr auf .mobile-menu). */
:lang(ar) .mobile-menu__top {
  justify-content: flex-start;
}

.mobile-menu__close {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--color-black);
  border: 0;
  border-radius: var(--border-radius-m);
  cursor: pointer;
  color: var(--color-warm-white);
}

.mobile-menu__close-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  margin-left: -10px;
  background-color: var(--color-warm-white);
  border-radius: 2px;
  transform: rotate(45deg);
}

.mobile-menu__close-bar:nth-child(2) {
  transform: rotate(-45deg);
}

.mobile-menu__list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--page-margin);
}

/* Reihe trägt den Sand-Hintergrund — Pills überdecken den Sand
   an Anfang/Ende; in der Mitte ist er sichtbar (bzw. wird in der
   ersten/letzten Reihe von einer verschachtelten Peak-Box mit
   warm-white-Wrapper und nur teilweise gerundetem Sand-Bar
   gebrochen). */
.mobile-menu__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 44px;
  flex-shrink: 0;
  background-color: var(--menu-sand);
}

.mobile-menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--button-padding-x);
  background-color: var(--menu-warm);
  color: var(--text-body);
  text-decoration: none;
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: var(--text-navigation);
  font-weight: 400;
  line-height: 1.1;
}

/* Peak-Box (nur in erster/letzter Reihe): aussen warm-white
   (überdeckt den Sand-BG der Row), innen sand-Bar mit nur an
   oben bzw. unten gerundeten Ecken — erzeugt den Kuppel-Effekt
   zur warm-white-Fläche darüber/darunter. */
.mobile-menu__peak {
  flex: 1 1 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background-color: var(--menu-warm);
}

.mobile-menu__peak-bar {
  flex: 1 1 0;
  width: 100%;
  background-color: var(--menu-sand);
}

.mobile-menu__peak--top .mobile-menu__peak-bar {
  border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
}

.mobile-menu__peak--bottom .mobile-menu__peak-bar {
  border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
}

/* Pill-Rundungen — jeweils an den inneren, zum Sand zeigenden Ecken */
.mobile-menu__row--first .mobile-menu__link--de {
  border-radius: 0 0 var(--border-radius-m) 0;
}
.mobile-menu__row--first .mobile-menu__link--ar {
  border-radius: 0 0 0 var(--border-radius-m);
}

.mobile-menu__row--middle .mobile-menu__link--de {
  border-radius: 0 var(--border-radius-m) var(--border-radius-m) 0;
}
.mobile-menu__row--middle .mobile-menu__link--ar {
  border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);
}

.mobile-menu__row--last .mobile-menu__link--de {
  border-radius: 0 var(--border-radius-m) 0 0;
}
.mobile-menu__row--last .mobile-menu__link--ar {
  border-radius: var(--border-radius-m) 0 0 0;
}

/* Divider zwischen Reihen: außen transparent (warm-white durchscheinen
   lassen) mit page-margin Inset, innen Sand-Bar allseitig gerundet.
   Wächst vertikal und füllt den freien Raum zwischen den Reihen. */
.mobile-menu__divider {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--page-margin);
  min-height: var(--page-margin);
}

.mobile-menu__divider-bar {
  flex: 1 1 0;
  width: 100%;
  background-color: var(--menu-sand);
  border-radius: var(--border-radius-m);
}

/* Ab Tablet: größere Pill-Schrift */
@media (min-width: 768px) {
  .mobile-menu__link {
    font-size: 24px;
  }
}

/* Ab Desktop überflüssig — feste Nav ist da. */
@media (min-width: 1200px) {
  .mobile-menu {
    display: none !important;
  }
}