/* Midnight Embrach – Stylesheet
   Gestaltung: modern und weich. Weisser Grund, Rot als Hauptfarbe (angelehnt
   an das Rot der Gemeinde Embrach), warmes Schwarz für Schrift. Farbige
   Bereiche sind abgerundete Flächen, Karten haben runde Ecken und sanfte
   Schatten, Knöpfe und Etiketten sind Pillen. Es gibt keine dunklen Flächen.
   Mobile first: Die Grundregeln gelten ab 360 px, grössere Bildschirme
   kommen weiter unten in den @media-Blöcken dazu. */

/* ---------- Schriften (selbst gehostet, Lizenz: fonts/LIZENZ.txt) ---------- */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/roboto-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/roboto-condensed-latin-700-normal.woff2") format("woff2");
}

/* ---------- Farben und Masse ---------- */

:root {
  color-scheme: light;

  --rot: #d2212b;           /* Hauptfarbe: Hero, Kontakt, Knöpfe, Datum; Schrift darauf immer weiss */
  --rot-dunkel: #a8161f;    /* Rot beim Überfahren, rote Schrift auf zartem Rot */
  --rot-hell: #e0323c;      /* nur im Verlauf des Hero */
  --rot-zart: #fdeced;      /* Fläche hinter Symbolen und Datumsangaben */
  --schwarz: #1f1d1d;       /* warmes Schwarz ohne Blaustich: Schrift, dunkle Knöpfe */
  --schwarz-hell: #3a3636;  /* Schwarz beim Überfahren */
  --weiss: #ffffff;
  --grau-50: #f7f5f4;       /* helle Flächen und Karten */
  --grau-100: #efebe8;      /* Fläche «Für Eltern» */
  --grau-200: #e4e0dd;      /* Linien */
  --grau-600: #5f5a58;      /* Nebentext */
  --text: #1f1d1d;
  --hinweis: #ffd24d;       /* nur für Entwurfs-Hinweise auf den Textseiten */

  --schrift: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --schrift-titel: "Roboto Condensed", "Arial Narrow", "Roboto", Arial, sans-serif;

  --rund-s: 0.75rem;        /* kleine Elemente */
  --rund: 1.25rem;          /* Karten */
  --rund-l: 1.75rem;        /* grosse Flächen */
  --pille: 999px;

  --schatten-s: 0 1px 2px rgb(31 29 29 / 0.05), 0 3px 10px rgb(31 29 29 / 0.06);
  --schatten: 0 2px 4px rgb(31 29 29 / 0.04), 0 12px 28px rgb(31 29 29 / 0.1);
  --schatten-l: 0 6px 12px rgb(31 29 29 / 0.06), 0 22px 48px rgb(31 29 29 / 0.16);

  --rand: 1rem;
  --flaeche-rand: 0.5rem;   /* Abstand der farbigen Flächen zum Bildschirmrand */
  --breite: 70rem;          /* 1120 px */
  --kopf-hoehe: 4rem;
}

/* ---------- Grundlagen ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.1;
}

p {
  margin: 0 0 1rem;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

address {
  font-style: normal;
  margin-bottom: 1rem;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Sichtbarer Tastaturfokus: dunkler und weisser Ring, erkennbar auf hellem und rotem Grund */
:focus-visible {
  outline: 3px solid var(--schwarz);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--weiss);
}

.innen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.icon {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.symbole {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  left: 0.5rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--pille);
  background: var(--rot);
  color: var(--weiss);
  font-weight: 700;
}

.sprunglink:focus {
  top: 0.5rem;
}

.etikett {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.15rem 0.7rem;
  border-radius: var(--pille);
  background: var(--rot);
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hinweis {
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: var(--rund);
  background: var(--grau-50);
}

.abschnitt--grau .hinweis {
  background: var(--weiss);
}

/* «Wird geladen …» nur zeigen, wenn JavaScript läuft; sonst gilt der <noscript>-Text */
html:not(.js) .laedt {
  display: none;
}

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.65rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--pille);
  background: var(--schwarz);
  color: var(--weiss);
  font-weight: 500;
  text-decoration: none;
}

.knopf:hover {
  background: var(--schwarz-hell);
}

.knopf--rot {
  background: var(--rot);
}

.knopf--rot:hover {
  background: var(--rot-dunkel);
}

.knopf--hell {
  background: var(--weiss);
  color: var(--schwarz);
}

.knopf--hell:hover {
  background: var(--grau-100);
}

/* Durchsichtiger Knopf mit weissem Rand, nur auf rotem Grund */
.knopf--umriss {
  border-color: rgb(255 255 255 / 0.75);
  background: transparent;
  color: var(--weiss);
}

.knopf--umriss:hover {
  border-color: var(--weiss);
  background: rgb(255 255 255 / 0.14);
}

.knopf .icon {
  width: 1.15em;
  height: 1.15em;
}

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.92);
  border-bottom: 1px solid var(--grau-200);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}

.kopf__innen {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 86rem;
  min-height: var(--kopf-hoehe);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Logo links, Navigation bzw. Menü-Knopf rechts */
.kopf__logo {
  display: block;
  flex: none;
  order: -1;
  margin-right: auto;
  border-radius: var(--rund-s);
}

.kopf__logo img {
  width: auto;
  height: 2.4rem;
}

.menue-knopf {
  display: none;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--pille);
  background: var(--grau-50);
  font-weight: 500;
}

.js .menue-knopf {
  display: inline-flex;
}

.menue-knopf__striche,
.menue-knopf__striche::before,
.menue-knopf__striche::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.menue-knopf__striche {
  position: relative;
}

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

.menue-knopf__striche::before {
  top: -6px;
}

.menue-knopf__striche::after {
  top: 6px;
}

/* Offenes Menü: Die drei Striche werden zum Kreuz */
.menue-knopf[aria-expanded="true"] .menue-knopf__striche {
  background: transparent;
}

.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before {
  transform: translateY(6px) rotate(45deg);
}

.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after {
  transform: translateY(-6px) rotate(-45deg);
}

.navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.25rem;
  padding-block: 0.5rem;
}

.navigation a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--pille);
  font-weight: 500;
  text-decoration: none;
}

.navigation a:hover {
  background: var(--grau-50);
}

/* Der Abschnitt, in dem man gerade ist */
.navigation a[aria-current] {
  background: var(--rot-zart);
  color: var(--rot-dunkel);
}

.navigation .icon,
.navigation__info {
  display: none;
}

/* Handy und Tablet mit JavaScript: Die Navigation klappt als Karte unter der Kopfzeile auf */
@media (max-width: 61.99rem) {
  .js .navigation {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    top: calc(100% + 0.5rem);
    max-height: calc(100vh - var(--kopf-hoehe) - 1rem);
    max-height: calc(100dvh - var(--kopf-hoehe) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--rund-l);
    background: var(--weiss);
    box-shadow: var(--schatten-l);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
  }

  .js .navigation--offen {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .js .navigation ul {
    display: block;
    padding: 0.6rem;
  }

  .js .navigation a {
    gap: 0.9rem;
    min-height: 3.6rem;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    border-radius: var(--rund);
    font-family: var(--schrift-titel);
    font-size: 1.4rem;
    font-weight: 700;
  }

  /* Symbol in einer runden Kachel, Pfeil am rechten Rand */
  .js .navigation .icon {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.6rem;
    border-radius: var(--rund-s);
    background: var(--rot-zart);
    color: var(--rot-dunkel);
  }

  .js .navigation a::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    margin: 0 0.35rem 0 auto;
    border-top: 2px solid var(--grau-600);
    border-right: 2px solid var(--grau-600);
    transform: rotate(45deg);
  }

  .js .navigation a[aria-current] {
    color: var(--text);
  }

  .js .navigation a[aria-current] .icon {
    background: var(--rot);
    color: var(--weiss);
  }

  .js .navigation__info {
    display: block;
    margin: 0 0.6rem 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: var(--rund);
    background: var(--grau-50);
    color: var(--grau-600);
    font-size: 0.98rem;
    text-align: center;
  }

  /* Abgedunkelte Seite hinter dem offenen Menü */
  .js body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(31 29 29 / 0.45);
    opacity: 0;
    pointer-events: none;
  }

  .menue-offen body::after {
    opacity: 1;
    pointer-events: auto;
  }

  /* Ohne JavaScript bleibt die Navigation als Zeile sichtbar */
  html:not(.js) .kopf__innen {
    flex-wrap: wrap;
    padding-block: 0.5rem;
  }

  html:not(.js) .navigation {
    order: 3;
    width: 100%;
  }
}

/* ---------- Farbige Flächen ----------
   Hero, «Für Eltern», die grauen Abschnitte und der Kontakt sind abgerundete
   Flächen mit etwas Abstand zum Bildschirmrand. */

.hero,
.eltern,
.abschnitt--grau,
.kontakt,
.seitenkopf {
  width: calc(100% - 2 * var(--flaeche-rand));
  max-width: 86rem;
  margin-inline: auto;
  border-radius: var(--rund-l);
}

/* ---------- 1. Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  margin-top: var(--flaeche-rand);
  background:
    radial-gradient(circle at 15% -10%, rgb(255 255 255 / 0.2), transparent 45%),
    linear-gradient(155deg, var(--rot-hell), var(--rot) 45%, var(--rot-dunkel));
  color: var(--weiss);
  text-align: center;
}

/* Schmuck: zwei Kreise wie der Mittelkreis einer Turnhalle */
.hero__linien,
.eltern__linien {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__linien::before,
.hero__linien::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

.hero__linien::before {
  right: -9rem;
  top: -7rem;
  width: 22rem;
  border: 2px solid rgb(255 255 255 / 0.2);
}

.hero__linien::after {
  left: -6rem;
  bottom: -9rem;
  width: 18rem;
  background: rgb(255 255 255 / 0.07);
}

.hero__innen {
  position: relative;
  max-width: var(--breite);
  margin-inline: auto;
  padding: 3rem var(--rand) 6.5rem;
}

.hero h1 {
  font-size: clamp(2.9rem, 13vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.hero__claim {
  max-width: 40rem;
  margin: 1rem auto 0;
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  line-height: 1.35;
  text-wrap: balance;
}

.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.6rem 0 0;
}

/* Karte «Nächstes Midnight»: ragt in den Hero hinein */
.naechstes-band {
  padding-bottom: 1rem;
}

.naechstes {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  max-width: 50rem;
  margin: 0 auto;
  translate: 0 -3.25rem;
  margin-bottom: -3.25rem;
  padding: 0.6rem;
  border-radius: var(--rund-l);
  background: var(--weiss);
  box-shadow: var(--schatten-l);
}

.naechstes__text {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.25rem 0.6rem 0.75rem;
}

.naechstes__text p {
  margin: 0;
}

.naechstes__marke {
  color: var(--rot-dunkel);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.naechstes__titel {
  padding-block: 0.15rem 0.3rem;
  font-family: var(--schrift-titel);
  font-size: clamp(1.45rem, 6.2vw, 2.2rem);
  line-height: 1.12;
}

.naechstes__event {
  padding-bottom: 0.3rem;
  font-weight: 700;
}

.naechstes__event .etikett {
  margin: 0 0.25rem 0 0;
}

.naechstes__detail {
  font-size: 1rem;
}

.naechstes__pause {
  padding-top: 0.35rem;
  color: var(--grau-600);
  font-size: 0.95rem;
}

.naechstes__kachel {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5rem;
  border-radius: var(--rund);
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--schrift-titel);
  text-decoration: none;
}

a.naechstes__kachel:hover {
  background: var(--schwarz-hell);
}

.naechstes__kachel-tag {
  font-size: 2.5rem;
  line-height: 1;
}

.naechstes__kachel-monat {
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.naechstes--live .naechstes__marke::before {
  content: "";
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--rot);
}

/* Die vier Fakten unter dem Hero als Pillen */
.fakten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  max-width: 50rem;
  margin: 1.25rem auto 0;
}

.fakten li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.9rem 0.5rem 0.75rem;
  border-radius: var(--rund);
  background: var(--grau-50);
  font-weight: 500;
  line-height: 1.2;
}

.fakten .icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--rot);
}

/* ---------- Abschnitte ---------- */

.abschnitt {
  padding-block: 3.5rem;
}

.abschnitt--grau {
  background: var(--grau-50);
}

.abschnitt__titel {
  margin-bottom: 1.1rem;
  font-size: clamp(2.1rem, 8.5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  hyphens: auto;
}

/* Kurzer roter Strich über dem Titel */
.abschnitt__titel::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 0.35rem;
  margin-bottom: 0.9rem;
  border-radius: var(--pille);
  background: var(--rot);
}

.abschnitt__text {
  max-width: 44rem;
  margin-bottom: 1.75rem;
  color: var(--grau-600);
}

.einleitung {
  max-width: 46rem;
  margin-bottom: 2rem;
}

.einleitung__gross {
  font-size: 1.3rem;
  line-height: 1.45;
  font-weight: 500;
}

/* ---------- 2. Info-Kacheln ---------- */

.kacheln {
  display: grid;
  gap: 0.75rem;
}

.kachel {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: start;
  padding: 1.1rem 1.25rem 1.1rem 1.1rem;
  border-radius: var(--rund);
  background: var(--grau-50);
}

/* Symbol im zartroten Kreis */
.kachel .icon {
  grid-row: 1 / span 2;
  width: 3rem;
  height: 3rem;
  padding: 0.7rem;
  border-radius: 50%;
  background: var(--rot-zart);
  color: var(--rot-dunkel);
}

.kachel h3 {
  margin-bottom: 0.3rem;
  font-size: 1.5rem;
}

.kachel p {
  margin: 0;
}

/* ---------- 3. Für Eltern ---------- */

.eltern {
  position: relative;
  overflow: hidden;
  padding-block: 2rem;
  background: var(--grau-100);
}

.eltern__linien::after {
  content: "";
  position: absolute;
  right: -8rem;
  bottom: -8rem;
  width: 22rem;
  aspect-ratio: 1;
  border: 2px solid rgb(31 29 29 / 0.08);
  border-radius: 50%;
}

.eltern__raster {
  position: relative;
  display: grid;
  gap: 2rem;
}

.eltern__tafel {
  padding: 1.75rem 1.25rem 1.25rem;
  border-radius: var(--rund-l);
  background: var(--weiss);
  box-shadow: var(--schatten);
}

.eltern__fragen-titel {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.5rem;
}

/* Häufige Fragen: jede Frage eine abgerundete Zeile */
.fragen details {
  margin-bottom: 0.5rem;
  border-radius: var(--rund);
  background: var(--grau-50);
}

.fragen summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.4rem;
  padding: 0.75rem 3.5rem 0.75rem 1.1rem;
  border-radius: var(--rund);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

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

.fragen summary:hover {
  color: var(--rot-dunkel);
}

/* Roter Kreis mit Plus: Der Kreis bleibt stehen, nur das Plus dreht sich */
.fragen summary::before,
.fragen summary::after {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  width: 1.9rem;
  height: 1.9rem;
  margin-top: -0.95rem;
}

.fragen summary::before {
  content: "";
  border-radius: 50%;
  background: var(--rot);
}

.fragen summary::after {
  content: "+";
  color: var(--weiss);
  font-family: var(--schrift);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.85rem;
  text-align: center;
}

/* Offen: Das Plus dreht sich zum Kreuz («.schliesst» setzt js/bewegung.js während des Zuklappens) */
.fragen details[open]:not(.schliesst) summary::after {
  transform: rotate(45deg);
}

.fragen__antwort {
  overflow: hidden;
}

.fragen__antwort p {
  margin: 0;
  padding: 0 1.1rem 1.1rem;
}

.eltern__punkte {
  display: grid;
  gap: 1.25rem;
  align-content: center;
  padding-inline: 0.5rem;
}

.eltern__punkte li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.eltern__punkte .icon {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.75rem;
  border-radius: 50%;
  background: var(--weiss);
  color: var(--rot);
  box-shadow: var(--schatten-s);
}

.eltern__punkte strong {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 1.6rem;
  line-height: 1.15;
}

/* ---------- Datumsangabe (Kalender und Events) ---------- */

.datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  min-height: 4.5rem;
  padding: 0.5rem 0.25rem;
  border-radius: var(--rund-s);
  background: var(--rot-zart);
  color: var(--rot-dunkel);
  font-family: var(--schrift-titel);
}

.datum__tag {
  font-size: 2.1rem;
  line-height: 1;
}

.datum__rest {
  display: flex;
  gap: 0.3em;
  font-size: 0.8rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- 4. Kalender ---------- */

.termine {
  display: grid;
  gap: 0.75rem;
}

.termin {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem 0.8rem 0.8rem;
  border: 1px solid var(--grau-200);
  border-radius: var(--rund);
  background: var(--weiss);
  box-shadow: var(--schatten-s);
}

.termin .datum {
  flex: none;
}

.termin__text {
  min-width: 0;
}

.termin h3 {
  margin-bottom: 0.15rem;
  font-size: 1.35rem;
}

.termin p {
  margin: 0;
  color: var(--grau-600);
  font-size: 0.98rem;
  line-height: 1.45;
}

.termin p a {
  color: var(--text);
}

/* Special Event: roter Rand, rote Datumsangabe */
.termin--event {
  border: 2px solid var(--rot);
}

.termin--event .datum {
  background: var(--rot);
  color: var(--weiss);
}

/* Ausfall: flach und grau, Tag durchgestrichen */
.termin--ausfall {
  border-style: dashed;
  background: var(--grau-50);
  box-shadow: none;
}

.termin--ausfall h3 {
  color: var(--grau-600);
}

.termin--ausfall .datum {
  background: var(--grau-200);
  color: var(--grau-600);
}

.termin--ausfall .datum__tag {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ---------- 5. Special Events ---------- */

.events {
  display: grid;
  gap: 1.25rem;
}

.event {
  display: grid;
  grid-template-columns: 1fr;
  padding: 1.1rem;
  border-radius: var(--rund-l);
  background: var(--weiss);
  box-shadow: var(--schatten);
}

.event__flyer {
  display: block;
  aspect-ratio: 210 / 297;
  width: 100%;
  max-width: 15rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--rund);
  background: var(--grau-50);
}

.event__flyer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.event__flyer--leer {
  display: grid;
  place-items: center;
  border: 2px dashed var(--grau-200);
  color: var(--grau-600);
  font-weight: 500;
}

.event__text {
  padding: 1.1rem 0.25rem 0.5rem;
}

.event__text h3 {
  margin: 0.8rem 0 0.35rem;
  font-size: 1.8rem;
}

.event__zeit {
  font-weight: 500;
}

.event__text p:last-child {
  margin-bottom: 0;
}

.event__knopf {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 3rem;
  margin-top: 0.75rem;
  padding: 0.65rem 1.4rem;
  border: 0;
  border-radius: var(--pille);
  background: var(--rot);
  color: var(--weiss);
  font-weight: 500;
}

.event__knopf:hover {
  background: var(--rot-dunkel);
}

/* ---------- 6. Aktueller Flyer ---------- */

.flyer-raster {
  display: grid;
  gap: 1.75rem;
}

.flyer-raster .abschnitt__text {
  margin-bottom: 1.25rem;
}

.flyer {
  display: block;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border-radius: var(--rund-l);
  box-shadow: var(--schatten);
}

.flyer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 7. Team ---------- */

.teamgruppe + .teamgruppe {
  margin-top: 2.25rem;
}

.teamgruppe h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.personen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.person {
  padding: 1.25rem 0.75rem 1.1rem;
  border-radius: var(--rund);
  background: var(--weiss);
  box-shadow: var(--schatten-s);
  text-align: center;
}

.person__bild {
  width: 6rem;
  height: 6rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grau-50);
}

.person__bild--leer,
.person__bild--initialen {
  display: grid;
  place-items: center;
}

.person__bild--leer {
  color: var(--grau-600);
}

.person__bild--leer .icon {
  width: 2.6rem;
  height: 2.6rem;
}

.person__bild--initialen {
  font-family: var(--schrift-titel);
  font-size: 2.2rem;
  letter-spacing: 0.02em;
}

.person__bild--farbe1 {
  background: var(--rot);
  color: var(--weiss);
}

.person__bild--farbe2 {
  background: var(--rot-zart);
  color: var(--rot-dunkel);
}

.person__bild--farbe3 {
  background: var(--schwarz);
  color: var(--weiss);
}

.person p {
  margin: 0;
}

.person__name {
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  line-height: 1.2;
}

.person__rolle {
  color: var(--grau-600);
  font-size: 0.95rem;
}

.mitglied {
  max-width: 44rem;
  margin-top: 2.25rem;
  padding: 1.5rem 1.4rem 0.75rem;
  border-radius: var(--rund-l);
  background: var(--weiss);
  box-shadow: var(--schatten-s);
}

.mitglied h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

/* ---------- 8. Kontakt ---------- */

.kontakt {
  margin-block: 3.5rem 0;
  padding-block: 3rem;
  background: linear-gradient(155deg, var(--rot-hell), var(--rot) 45%, var(--rot-dunkel));
  color: var(--weiss);
}

.kontakt .abschnitt__titel::before {
  background: var(--weiss);
}

.kontakt__raster {
  display: grid;
  gap: 2rem;
}

.kontakt h3 {
  margin-bottom: 0.6rem;
  font-size: 1.4rem;
}

.kontakt__liste li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
}

.kontakt__liste a {
  padding-block: 0.6rem;
}

.kontakt a:not(.knopf):hover {
  text-decoration-thickness: 0.16em;
}

.kontakt :focus-visible {
  outline-color: var(--weiss);
  box-shadow: 0 0 0 7px var(--schwarz);
}

/* ---------- 9. Footer ---------- */

.fuss {
  padding-block: 1.75rem 2rem;
  color: var(--grau-600);
  font-size: 0.98rem;
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.fuss p {
  margin: 0;
}

.fuss ul {
  display: flex;
  gap: 1.25rem;
}

.fuss a {
  display: inline-block;
  padding-block: 0.6rem;
  color: var(--text);
}

/* ---------- Flyer in gross ---------- */

.lightbox {
  opacity: 0;
  max-width: min(94vw, 44rem);
  max-height: 94vh;
  padding: 0.6rem;
  border: 0;
  border-radius: var(--rund-l);
  background: var(--weiss);
  box-shadow: var(--schatten-l);
  overflow: auto;
}

.lightbox[open] {
  opacity: 1;
}

.lightbox::backdrop {
  background: rgb(31 29 29 / 0.8);
}

.lightbox img {
  width: 100%;
  max-height: calc(94vh - 5.2rem);
  border-radius: var(--rund);
  object-fit: contain;
}

.lightbox__zu {
  display: block;
  min-height: 2.75rem;
  margin: 0 0 0.6rem auto;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: var(--pille);
  background: var(--schwarz);
  color: var(--weiss);
  font-weight: 500;
}

.lightbox__zu:hover {
  background: var(--schwarz-hell);
}

/* ---------- Textseiten: Impressum, Datenschutz, 404 ---------- */

.seitenkopf {
  margin-top: var(--flaeche-rand);
  padding-block: 2.5rem;
  background: linear-gradient(155deg, var(--rot-hell), var(--rot) 45%, var(--rot-dunkel));
  color: var(--weiss);
}

.seitenkopf h1 {
  font-size: clamp(2.3rem, 9.5vw, 3.75rem);
  line-height: 1.02;
  hyphens: auto;
}

.seitenkopf p {
  margin: 0.6rem 0 0;
  font-size: 1.15rem;
}

.textseite {
  padding-block: 2.5rem 3.5rem;
}

.textseite > * {
  max-width: 46rem;
}

.textseite h2 {
  margin: 2.25rem 0 0.6rem;
  font-size: 1.6rem;
}

.textseite ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.textseite li {
  margin-bottom: 0.35rem;
}

.textseite li::marker {
  color: var(--rot);
}

.entwurf {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border-radius: var(--rund);
  background: var(--hinweis);
  color: var(--text);
  font-weight: 700;
}

.entwurf span {
  display: block;
  font-weight: 400;
}

.platzhalter {
  padding: 0.05em 0.35em;
  border-radius: 0.35em;
  background: #fff1bf;
}

.zurueck {
  margin-top: 2.5rem;
}

/* ---------- Ab 600 px ---------- */

@media (min-width: 37.5rem) {
  :root {
    --rand: 1.5rem;
    --flaeche-rand: 0.75rem;
  }

  .kacheln,
  .termine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .naechstes {
    padding: 0.75rem;
  }

  .naechstes__text {
    padding: 0.7rem 0.5rem 0.75rem 1rem;
  }

  .naechstes__kachel {
    width: 6.5rem;
  }

  .naechstes__kachel-tag {
    font-size: 3.2rem;
  }

  .eltern {
    padding-block: 3rem;
  }

  .eltern__tafel {
    padding: 2.25rem 2rem 1.75rem;
  }

  .eltern__punkte {
    grid-template-columns: repeat(3, 1fr);
  }

  .eltern__punkte li {
    flex-direction: column;
    gap: 0.6rem;
  }

  .event {
    grid-template-columns: 12rem 1fr;
    column-gap: 1.5rem;
    padding: 1.4rem;
  }

  .event__flyer {
    max-width: none;
    grid-row: 1 / span 2;
  }

  .event__text {
    padding: 0.25rem 0 0;
  }

  .event__knopf {
    grid-column: 2;
    align-self: end;
  }

  .personen {
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 1rem;
  }

  .kontakt__raster {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Ab 832 px: die vier Fakten in einer Zeile ---------- */

@media (min-width: 52rem) {
  .fakten {
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 0.6rem;
  }

  .fakten li {
    padding-right: 1.1rem;
  }
}

/* ---------- Ab 992 px: Navigation in der Kopfzeile, mehr Spalten ---------- */

@media (min-width: 62rem) {
  :root {
    --kopf-hoehe: 5rem;
    --flaeche-rand: 1rem;
    --rund-l: 2rem;
  }

  body {
    font-size: 1.125rem;
  }

  .js .menue-knopf {
    display: none;
  }

  .navigation ul {
    padding: 0;
  }

  .kopf__logo img {
    height: 3rem;
  }

  .hero__innen {
    padding: 5.5rem var(--rand) 9rem;
  }

  .hero__linien::before {
    right: -8rem;
    top: -10rem;
    width: 36rem;
  }

  .hero__linien::after {
    left: -9rem;
    bottom: -14rem;
    width: 30rem;
  }

  .abschnitt {
    padding-block: 5rem;
  }

  .kacheln {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }

  .kachel {
    display: block;
    padding: 1.6rem 1.6rem 1.5rem;
  }

  .kachel .icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 0 1rem;
  }

  .termine {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .termin {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    min-height: 12.5rem;
    padding: 1.1rem 1.1rem 1.25rem;
  }

  .eltern {
    padding-block: 4.5rem;
  }

  .eltern__raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 3.5rem;
  }

  .eltern__punkte {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .eltern__punkte li {
    flex-direction: row;
    gap: 1.1rem;
  }

  .events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flyer-raster {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
  }

  .flyer {
    width: 20rem;
  }

  .kontakt {
    margin-top: 5rem;
    padding-block: 4.5rem;
  }

  .kontakt__raster {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/* ---------- Bewegung nur, wenn sie nicht stört ----------
   Alle Animationen stehen in diesem Block. Wer im Betriebssystem «Bewegung
   reduzieren» eingestellt hat, sieht die Seite ohne Animationen.
   Bewegt werden nur «transform» und «opacity», damit es auch auf älteren
   Handys flüssig bleibt. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Knöpfe und Menüpunkte */
  .knopf,
  .event__knopf,
  .lightbox__zu,
  .naechstes__kachel,
  .menue-knopf,
  .navigation a {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
  }

  .knopf:hover,
  .event__knopf:hover {
    transform: translateY(-1px);
  }

  .knopf:active,
  .event__knopf:active {
    transform: translateY(1px);
  }

  /* Hero beim Laden: Titel, Claim, Knöpfe und Terminkarte steigen nacheinander auf */
  .hero h1,
  .hero__claim,
  .hero__knoepfe,
  .naechstes,
  .fakten {
    animation: aufsteigen 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero__claim {
    animation-delay: 0.07s;
  }

  .hero__knoepfe {
    animation-delay: 0.14s;
  }

  .naechstes {
    animation-delay: 0.2s;
  }

  .fakten {
    animation-delay: 0.28s;
  }

  /* «Läuft gerade!»: Der rote Punkt pulsiert */
  .naechstes--live .naechstes__marke::before {
    animation: puls 1.8s ease-out infinite;
  }

  /* Menü-Knopf: Striche werden zum Kreuz */
  .menue-knopf__striche {
    transition: background-color 0.15s ease;
  }

  .menue-knopf__striche::before,
  .menue-knopf__striche::after {
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Häufige Fragen: Plus dreht sich (das Aufklappen selbst steuert js/bewegung.js) */
  .fragen summary {
    transition: color 0.15s ease;
  }

  .fragen summary::after {
    transition: transform 0.2s ease;
  }

  /* Inhalte erscheinen beim Scrollen (Klassen setzt js/bewegung.js) */
  .einblenden {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .einblenden--da {
    opacity: 1;
    transform: none;
  }

  /* Flyer in gross: blendet ein und aus */
  .lightbox {
    transform: scale(0.96);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      overlay 0.2s allow-discrete,
      display 0.2s allow-discrete;
  }

  .lightbox[open] {
    transform: none;
  }

  .lightbox::backdrop {
    opacity: 0;
    transition:
      opacity 0.2s ease,
      overlay 0.2s allow-discrete,
      display 0.2s allow-discrete;
  }

  .lightbox[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .lightbox[open] {
      opacity: 0;
      transform: scale(0.96);
    }

    .lightbox[open]::backdrop {
      opacity: 0;
    }
  }
}

/* Handy-Menü: gleitet auf, die Einträge folgen leicht versetzt */
@media (prefers-reduced-motion: no-preference) and (max-width: 61.99rem) {
  .js .navigation {
    transition:
      opacity 0.2s ease,
      transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
      visibility 0s linear 0.28s;
  }

  .js .navigation--offen {
    transition-delay: 0s;
  }

  .js .navigation li,
  .js .navigation__info {
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .js .navigation--offen li,
  .js .navigation--offen .navigation__info {
    opacity: 1;
    transform: none;
  }

  .js .navigation--offen li:nth-child(1) { transition-delay: 0.04s; }
  .js .navigation--offen li:nth-child(2) { transition-delay: 0.07s; }
  .js .navigation--offen li:nth-child(3) { transition-delay: 0.1s; }
  .js .navigation--offen li:nth-child(4) { transition-delay: 0.13s; }
  .js .navigation--offen li:nth-child(5) { transition-delay: 0.16s; }
  .js .navigation--offen li:nth-child(6) { transition-delay: 0.19s; }
  .js .navigation--offen .navigation__info { transition-delay: 0.22s; }

  .js body::after {
    transition: opacity 0.25s ease;
  }
}

/* Grosse Bildschirme: Kacheln einer Reihe erscheinen leicht versetzt */
@media (prefers-reduced-motion: no-preference) and (min-width: 62rem) {
  .kacheln .einblenden:nth-child(3n + 2) {
    transition-delay: 0.08s;
  }

  .kacheln .einblenden:nth-child(3n) {
    transition-delay: 0.16s;
  }
}

@keyframes aufsteigen {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

@keyframes puls {
  from {
    box-shadow: 0 0 0 0 rgb(210 33 43 / 0.55);
  }

  to {
    box-shadow: 0 0 0 0.55em rgb(210 33 43 / 0);
  }
}

@media print {
  .kopf,
  .menue-knopf,
  .event__knopf,
  .hero__knoepfe,
  .sprunglink {
    display: none;
  }

  .einblenden {
    opacity: 1;
    transform: none;
  }
}