/* ==========================================================================
   Kitzrettungsflieger – Coming-soon-Seite
   Stylesheet: styles/main.css

   Aufbau
   1.  Schriften
   2.  Design-Variablen
   3.  Grundlagen
   4.  Seitenrahmen (.page) mit Hintergrundbild
   5.  Kopfbereich: Marke (Emblem, Name, Slogan)
   6.  Hauptbereich: Überschrift und Hinweis
   7.  Hamburger-Menü (nur schmale Bildschirme)
   8.  Menüleiste in der Fußzeile (nur breite Bildschirme)
   9.  Breite Bildschirme (ab 600 px)
   10. Schmale Bildschirme (unter 600 px)
   11. Inhaltsseiten (Verein, Kontakt, Impressum …)
   12. Animationen

   Größen sind fließend (clamp/min/calc) und hängen von Breite (vw)
   und Höhe (vh) des Fensters ab. Umschaltpunkt: 600 px.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Schriften – lokal eingebunden, keine Verbindung zu Google-Servern
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Design-Variablen
   -------------------------------------------------------------------------- */
:root {
  /* ---- Farben ----
     Grundfarben als Hexwert; die *-rgb-Varianten enthalten denselben Ton als
     RGB-Zahlen für halbtransparente Anwendungen: rgb(var(--ink-rgb) / .5).
     Bei Änderung einer Farbe immer beide Zeilen anpassen. */
  --cream: #fceed6;            /* Text */
  --cream-rgb: 252 238 214;
  --amber: #f3b36a;            /* Akzent, Hover */
  --olive: #8fa548;            /* Linien am Slogan */
  --ink:   #141b12;            /* Seitenhintergrund */
  --ink-rgb: 20 27 18;
  --ink-2: #1d2817;            /* Menüfläche */
  --shadow-rgb: 0 0 0;         /* Schatten unter Schrift und Emblem */

  /* ---- Schriften ----
     Familien (Schriftdateien siehe Abschnitt 1) und verwendete Stärken */
  --font-serif-name: "Fraunces";
  --font-sans-name:  "Outfit";
  --serif: var(--font-serif-name), Georgia, "Times New Roman", serif;
  --sans:  var(--font-sans-name), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --weight-regular: 500;       /* Überschrift, Menüpunkte */
  --weight-bold:    600;       /* Name, Slogan */

  /* Seitenrand links/rechts */
  --pad: clamp(1.5rem, 5vw, 4.5rem);

  /* Platz rechts oben für das Hamburger-Symbol
     (wird unter 600 px gesetzt, wenn das Menü vorhanden ist – Klasse has-menu am <html>) */
  --menu-space: 0px;

  /* Schriftgröße „Kitzrettungsflieger“ – auch für die Menüpunkte im Hamburger-Menü.
     Faktor 11.3 = Breite von „Kitzrettungsflieger e.V.“ in Schrifthöhen,
     damit später „e.V.“ ohne Umbruch ergänzt werden kann.
     3.6vh begrenzt die Größe auf niedrigen Bildschirmen. */
  --name: min(1.6rem, 3.6vh, calc((100vw - 2 * var(--pad) - var(--menu-space)) / 11.3));
}


/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  height: 100%;
  background: var(--ink);
  color: var(--cream);
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Kein Scrollen der Seite, solange das Hamburger-Menü geöffnet ist */
body:has(.menu__toggle:checked) {
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   4. Seitenrahmen mit Hintergrundbild
      Raster: Kopf (auto) – Hauptbereich (Rest) – Fuß (auto).
      Das Bild ist auf breiten Fenstern vollflächig; je schmaler und höher
      das Fenster, desto kürzer wird es und blendet unten weich aus.
   -------------------------------------------------------------------------- */
.page {
  position: relative;
  isolation: isolate;                 /* eigener Stapelkontext für Bild + Verlauf */
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;                   /* Ersatz für alte Browser */
  overflow: clip;                     /* schneidet ab, ohne „sticky“ (Menüleiste) zu verhindern */
  padding:
    max(1.5rem, env(safe-area-inset-top))
    var(--pad)
    max(1.5rem, env(safe-area-inset-bottom));
}

.page__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -2;
  height: 100%;                                  /* Ersatz für alte Browser */
  height: clamp(58vh, 110vw, 100%);
  height: clamp(58svh, 110vw, 100%);             /* min. 58 % Höhe auf dem Handy */
  /* Maske: #000 = sichtbar, transparent = ausgeblendet (keine Gestaltungsfarbe) */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.page__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 42%;
}

/* Abdunklung oben (Lesbarkeit Marke) und unten (Lesbarkeit Text) */
.page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgb(var(--ink-rgb) / .45) 0%,
    rgb(var(--ink-rgb) / 0)   20%,
    rgb(var(--ink-rgb) / 0)   45%,
    rgb(var(--ink-rgb) / .5)  75%,
    rgb(var(--ink-rgb) / .85) 100%);
}


/* --------------------------------------------------------------------------
   5. Kopfbereich: Marke (Emblem, Name, Slogan)
      Der Slogan ist immer genau so breit wie der Name;
      die olivgrünen Linien füllen den Rest.
   -------------------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.brand__emblem {
  display: block;
  width: auto;
  height: clamp(48px, min(11vw, 12vh), 90px);
  filter: drop-shadow(0 2px 8px rgb(var(--shadow-rgb) / .3));
}

.brand__text {
  display: inline-grid;
  font-size: var(--name);
}

.brand__name {
  font-family: var(--serif);
  font-weight: var(--weight-bold);
  font-variation-settings: "opsz" 72;
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgb(var(--shadow-rgb) / .35);
}

.brand__slogan {
  display: flex;
  align-items: center;
  gap: .35em;
  margin-top: .4em;
  white-space: nowrap;
}

/* Linien links und rechts vom Slogan */
.brand__slogan::before,
.brand__slogan::after {
  content: "";
  flex: 1 1 auto;
  min-width: .5em;
  height: .09em;
  background: var(--olive);
  border-radius: 1px;
}

.brand__slogan-text {
  font-size: .37em;
  font-weight: var(--weight-bold);
  letter-spacing: .2em;
  margin-right: -.2em;               /* gleicht den Buchstabenabstand am Ende aus */
  text-transform: uppercase;
  opacity: .9;
}


/* --------------------------------------------------------------------------
   6. Hauptbereich: Überschrift und Hinweis „Wir starten bald.“
      Jede Zeile der Überschrift bleibt einzeilig.
      Faktor 13.9 = Breite der längsten Zeile in Schrifthöhen (+ Sicherheitsrand).
   -------------------------------------------------------------------------- */
.hero {
  align-self: end;
  padding-bottom: clamp(1rem, 4vh, 3rem);
}

.hero__title {
  font-family: var(--serif);
  font-weight: var(--weight-regular);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: min(2.3rem, calc((100vw - 2 * var(--pad)) / 13.9), 6.5vh);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-shadow: 0 2px 24px rgb(var(--shadow-rgb) / .35);
}

.hero__line {
  display: block;
  white-space: nowrap;
}

.hero__title em {
  font-style: italic;
  color: var(--amber);
}

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: clamp(1.2rem, 3vh, 2rem);
  font-size: min(clamp(.95rem, 1.6vw, 1.1rem), 2.4vh);
  letter-spacing: .06em;
}

/* kurze Linie vor dem Hinweis */
.hero__note::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: var(--amber);
}


/* --------------------------------------------------------------------------
   7. Hamburger-Menü
      Vorlage: „Morphing Fullscreen Hamburger Menu“ (havardob, MIT-Lizenz).
      Reines CSS: Ein verstecktes Kontrollkästchen speichert „offen/zu“.
      Der Viertelkreis oben rechts wächst beim Öffnen über die Menüfläche.

      --q        Größe des sichtbaren Viertelkreises
      --grow     Vergrößerungsfaktor des Kreises beim Öffnen
      --panel-w  Breite der Menüfläche
      --panel-h  Höhe der Menüfläche
   -------------------------------------------------------------------------- */
.menu {
  display: none;                     /* sichtbar nur unter 600 px, siehe Abschnitt 10 */
  --q: 70px;
  --grow: 12;
  --panel-w: min(100vw, 460px);
  --panel-h: min(100svh, 600px);
}

/* Desktop / Maus: Symbol 30 % kleiner, Menüfläche max. 250 px breit */
@media (hover: hover) and (pointer: fine) {
  .menu {
    --q: 49px;
    --grow: 17;
    --panel-w: min(100vw, 250px);
  }
}

/* Handy im Hochformat: Menü als Vollbild */
@media (pointer: coarse) and (orientation: portrait) {
  .menu {
    --panel-w: 100vw;
    --panel-h: 100svh;
    --grow: 16;
  }
}

/* Kontrollkästchen: unsichtbar, aber per Tastatur erreichbar */
.menu__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Begrenzt die wachsende Kreisfläche auf die Menügröße */
.menu__panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  width: var(--panel-w);
  height: min(100vh, 600px);         /* Ersatz für alte Browser */
  height: var(--panel-h);
  overflow: hidden;
  pointer-events: none;
}

/* Der Kreis – Mittelpunkt liegt genau in der Bildschirmecke */
.menu__backdrop {
  position: absolute;
  top: calc(var(--q) * -1);
  right: calc(var(--q) * -1);
  width: calc(var(--q) * 2);
  height: calc(var(--q) * 2);
  border-radius: 50%;
  background: var(--ink-2);
  transform: scale(1);
  transition: transform .6s cubic-bezier(.6, 0, .3, 1);
  will-change: transform;
  pointer-events: none;
}

/* Klickfläche für Öffnen/Schließen */
.menu__button {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 104;
  width: var(--q);
  height: var(--q);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Die drei Striche: mittlerer Strich + ::before (oben) + ::after (unten) */
.menu__icon,
.menu__icon::before,
.menu__icon::after {
  display: block;
  width: calc(var(--q) * .34);
  height: 2px;
  background: var(--cream);
  transition: .5s ease-in-out;
}

.menu__icon {
  position: absolute;
  left: calc(var(--q) * .43);
  top: calc(var(--q) * .37 - 1px);
  transform-origin: center;
}

.menu__icon::before,
.menu__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu__icon::before { top: calc(var(--q) * -.115); }
.menu__icon::after  { bottom: calc(var(--q) * -.115); }

/* Tastaturfokus sichtbar machen */
.menu__toggle:focus-visible ~ .menu__button {
  outline: 2px solid var(--amber);
  outline-offset: -4px;
}

/* Zustand „offen“: Kreis wächst, Striche werden zum X */
.menu__toggle:checked ~ .menu__panel .menu__backdrop {
  transform: scale(var(--grow));
}
.menu__toggle:checked ~ .menu__button .menu__icon {
  transform: rotate(45deg);
}
.menu__toggle:checked ~ .menu__button .menu__icon::before {
  top: 0;
  transform: rotate(90deg);
}
.menu__toggle:checked ~ .menu__button .menu__icon::after {
  bottom: 0;
  transform: rotate(90deg);
}

/* Menüpunkte – mittig in der Menüfläche */
.menu__list {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 103;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  width: var(--panel-w);
  height: min(100vh, 600px);         /* Ersatz für alte Browser */
  height: var(--panel-h);
  padding: 0;
  list-style: none;
  pointer-events: none;              /* nur die Links selbst sind klickbar */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s 0s ease-in-out, visibility 0s .25s;
}

.menu__toggle:checked ~ .menu__list {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s .35s ease-in-out, visibility 0s 0s;   /* erscheint nach dem Kreis */
}

/* Schriftgröße = Größe von „Kitzrettungsflieger“,
   höchstens so groß, dass der längste Punkt mit Rand in die Menübreite passt */
.menu__link {
  pointer-events: auto;
  font-family: var(--serif);
  font-weight: var(--weight-regular);
  font-variation-settings: "opsz" 144;
  font-size: min(var(--name), calc((var(--panel-w) - 3.5rem) / 11.4));
  white-space: nowrap;
  color: var(--cream);
  text-decoration: none;
}

.menu__link:hover,
.menu__link:focus-visible {
  color: var(--amber);
}


/* --------------------------------------------------------------------------
   8. Menüleiste in der Fußzeile
      Unauffällig und transparent, Punkte rechtsbündig.
      Sichtbar nur ab 600 px, siehe Abschnitt 9.
   -------------------------------------------------------------------------- */
.footer-nav {
  display: none;
}


/* --------------------------------------------------------------------------
   9. Breite Bildschirme (ab 600 px)
      Überschrift und Hinweis 60 % größer als auf dem Handy, mit fließendem
      Übergang ab 600 px (kein Sprung) und Begrenzung durch die Fensterhöhe.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {

  /* Startet bei 2.3rem (= Handy-Wert), wächst bis 3.68rem,
     sinkt auf breiten Fenstern bis 2.88rem */
  .hero__title {
    font-size: min(
      10.4vh,
      calc((100vw - 2 * var(--pad)) / 13.9),
      calc(2.3rem + (100vw - 600px) * .08),
      clamp(2.88rem, calc(3.68rem - (100vw - 600px) * .01424), 3.68rem)
    );
  }

  /* Startet bei .95rem (= Handy-Wert), wächst bis 1.52rem,
     sinkt auf breiten Fenstern bis .992rem */
  .hero__note {
    font-size: min(
      3.84vh,
      calc(.95rem + (100vw - 600px) * .05),
      clamp(.992rem, calc(1.52rem - (100vw - 600px) * .0072), 1.52rem)
    );
  }

  /* Menüleiste bleibt am unteren Fensterrand sichtbar, auch auf langen Seiten.
     Der untere Seitenabstand wandert dafür in die Fußzeile. */
  .page {
    padding-bottom: 0;
  }

  .site-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  /* Auf Inhaltsseiten scrollt Text unter der Leiste durch –
     dort bekommt sie einen dezenten, abgedunkelten Hintergrund über die volle Breite */
  .page--text .site-footer {
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    background: rgb(var(--ink-rgb) / .88);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }

  .footer-nav {
    display: block;
    margin-top: clamp(.58rem, 2.16vh, 1.44rem);
    padding-top: 1.22rem;
    border-top: 1px solid rgb(var(--cream-rgb) / .14);
  }

  /* Divisor 60 = Gesamtbreite der Menüleiste (5 Punkte inkl. Abstände)
     in Schrifthöhen + Sicherheitsrand, damit sie auch bei 600 px einzeilig bleibt.
     Bei weiteren Menüpunkten muss dieser Wert erhöht werden. */
  .footer-nav__list {
    display: flex;
    justify-content: flex-end;
    gap: 1.6em;
    font-size: min(.96rem, calc((100vw - 2 * var(--pad)) / 60));
    padding: 0;
    list-style: none;
  }

  .footer-nav__link {
    font-family: var(--sans);
    font-size: 1em;
    font-weight: var(--weight-regular);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: .7;
    text-decoration: none;
    transition: opacity .2s, color .2s;
  }

  .footer-nav__link:hover,
  .footer-nav__link:focus-visible {
    opacity: 1;
    color: var(--amber);
  }
}


/* --------------------------------------------------------------------------
   10. Schmale Bildschirme (unter 600 px)
       Emblem aus, Hamburger-Menü an, Slogan ohne Linien und dafür größer.
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  /* Menü ist nur nach der Eintragung vorhanden (siehe config/site.php) */
  html.has-menu {
    --menu-space: 76px;
  }

  .brand__emblem {
    display: none;
  }

  .menu {
    display: block;
  }

  .brand__slogan::before,
  .brand__slogan::after {
    display: none;
  }

  /* .44em = größtmöglich, ohne breiter als der Name zu werden */
  .brand__slogan-text {
    font-size: .44em;
  }
}


/* --------------------------------------------------------------------------
   11. Inhaltsseiten (Verein, Kontakt, Impressum, Datenschutz, Fehlerseite)
       Ohne Hintergrundbild, gut lesbarer Fließtext.
       Ob Menü und Inhalte erscheinen, steuert der Schalter in config/site.php.
   -------------------------------------------------------------------------- */
.page--text .site-header {
  padding-bottom: clamp(1.5rem, 5vh, 3rem);
}

.content {
  align-self: start;
  max-width: 42rem;
  padding-bottom: clamp(1.5rem, 5vh, 3rem);
  line-height: 1.6;
}

.content__title {
  font-family: var(--serif);
  font-weight: var(--weight-regular);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: 1.2em;
}

/* Unterzeile unter der Seitenüberschrift, z. B. „Transparenz – Satzung, …“ */
.content__lead {
  margin-top: -.9em;
  margin-bottom: 1.6em;
  font-size: .78rem;
  font-weight: var(--weight-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}

.content h2 {
  font-family: var(--serif);
  font-weight: var(--weight-bold);
  font-size: 1.15rem;
  margin: 1.8em 0 .4em;
}

.content p + p {
  margin-top: .8em;
}

.content a {
  color: var(--amber);
  text-underline-offset: .2em;
}

/* --------------------------------------------------------------------------
   12. Animationen
       Nur, wenn im System keine reduzierte Bewegung eingestellt ist.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero {
    animation: hero-rise 1.4s cubic-bezier(.2, .7, .2, 1) both .2s;
  }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}