/* Mind on Yellow: Stil wie die Filme. Gelb, Kreide, Rot nur für die innere Stimme.
   Abgenommener Entwurf: https://claude.ai/artifact/NgfPtbuSbArABJprtujCkq */

@font-face {
  font-family: "Kalam";
  src: url("/fonts/kalam-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --gelb: #FFD23F;
  --kreide: #141414;
  --rot: #D62828;
  --hand: "Kalam", "Marker Felt", "Comic Sans MS", cursive;
  --text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* leicht unregelmäßige Ecken, wie mit der Hand gezogen */
  --ecke-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --ecke-b: 15px 225px 15px 255px / 255px 15px 225px 15px;
  --ecke-kasten: 40px 18px 46px 22px / 22px 46px 18px 40px;
  --ecke-bild: 18px 22px 16px 24px;
  --breite: 1200px;
  --rand: 32px;
}

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

html { background: var(--gelb); color-scheme: light; }

body {
  margin: 0;
  background: var(--gelb);
  color: var(--kreide);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--kreide); text-underline-offset: 3px; }
a:hover { color: #000; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px dashed var(--kreide);
  outline-offset: 4px;
}

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

h1, h2, h3, .hand {
  font-family: var(--hand);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
}
h1 { font-size: clamp(48px, 6.4vw, 84px); letter-spacing: -1px; }
h2 { font-size: clamp(38px, 4.4vw, 56px); }
h3 { font-size: 26px; }
p { margin: 0; }

.huelle { max-width: var(--breite); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }

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

/* ---------- Kopf ---------- */

.kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 24px; padding-bottom: 24px;
}
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo img { width: 52px; height: 52px; border: 3px solid var(--kreide); border-radius: 50%; object-fit: cover; }
.logo span { font-family: var(--hand); font-weight: 700; font-size: 30px; line-height: 1; }

.menue-knopf { display: none; }
.navi { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; font-weight: 700; }
.navi a { text-decoration: none; }
.navi a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }

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

.knopf, .knopf-zwei {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.knopf { background: var(--kreide); color: var(--gelb); border: 0; border-radius: var(--ecke-a); }
.knopf:hover { color: var(--gelb); background: #000; }
.knopf-zwei { background: transparent; color: var(--kreide); border: 3px solid var(--kreide); border-radius: var(--ecke-b); padding: 0 26px; }
.navi .knopf { min-height: 44px; padding: 0 20px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Bodenlinie ---------- */

.linie { display: block; width: 100%; height: 24px; }

/* ---------- Start: oben ---------- */

.oben {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 56px;
  padding-top: 48px;
}
.oben-text { flex: 1 1 520px; min-width: 0; padding-bottom: 72px; }
.oben-text .unterzeile { margin-top: 28px; font-size: 22px; max-width: 560px; }
.stimme { font-family: var(--hand); font-weight: 700; color: var(--rot); font-size: 36px; line-height: 1; }
.oben-text .stimme { margin-top: 20px; }
.oben-text .knoepfe { margin-top: 36px; }
.oben-film { flex: 0 0 300px; display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 auto; }
.oben-film p { font-size: 15px; text-align: center; margin-bottom: 24px; }

.telefon {
  position: relative; display: block; width: 280px; aspect-ratio: 9 / 16;
  border: 4px solid var(--kreide); border-radius: 28px 34px 26px 38px; overflow: hidden;
}
.telefon img { width: 100%; height: 100%; object-fit: cover; }
.abspielen {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: var(--kreide); display: flex; align-items: center; justify-content: center;
}

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

.abschnitt { padding-top: 112px; }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }
.abschnitt-kopf a { font-weight: 700; }

.themen { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.thema {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--kreide); border-radius: var(--ecke-a);
  background: transparent; color: var(--kreide);
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
}
.thema[aria-pressed="true"] { background: var(--kreide); color: var(--gelb); }

.raster {
  margin-top: 36px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 32px 24px;
}
.karte { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--kreide); }
.karte-bild { display: block; aspect-ratio: 9 / 16; border: 3px solid var(--kreide); border-radius: var(--ecke-bild); overflow: hidden; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.karte:hover .karte-bild img { transform: scale(1.03); }
.karte-titel { font-family: var(--hand); font-weight: 700; font-size: 24px; line-height: 1.1; }
.karte-info { font-size: 15px; }
.karte[hidden] { display: none; }

/* ---------- Über ---------- */

.ueber { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.ueber-bild { flex: 0 0 300px; display: flex; justify-content: center; margin: 0 auto; }
.ueber-bild img { width: 280px; height: 280px; border: 4px solid var(--kreide); border-radius: 50% 46% 52% 48%; object-fit: cover; }
.ueber-text { flex: 1 1 520px; min-width: 0; }
.ueber-text > p { margin-top: 24px; font-size: 20px; }
.drei { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.drei p { margin-top: 6px; font-size: 16px; }

/* ---------- Anmeldung ---------- */

.kasten { border: 4px solid var(--kreide); border-radius: var(--ecke-kasten); }
.anmeldung { padding: 64px 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.anmeldung-text { flex: 1 1 440px; min-width: 0; }
.anmeldung-text p { margin-top: 20px; font-size: 20px; }
.formular { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.formular label { font-weight: 700; font-size: 16px; }
.formular-zeile { display: flex; flex-wrap: wrap; gap: 12px; }
.formular input[type="email"] {
  flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 18px;
  font: inherit; font-size: 18px; color: var(--kreide); background: var(--gelb);
  border: 3px solid var(--kreide); border-radius: var(--ecke-b);
}
.formular input::placeholder { color: #5a4a10; }
.formular .knopf { min-height: 52px; }
.formular .klein { margin-top: 4px; font-size: 14px; }
.formular .hinweis { font-weight: 700; font-size: 16px; }
.hp { position: absolute; left: -9999px; }

/* ---------- Filmseite ---------- */

.pfad { font-size: 15px; }
.film { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 64px; }
.film-video { flex: 0 0 380px; max-width: 100%; margin: 0 auto; }
.film-video video {
  width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--gelb);
  border: 4px solid var(--kreide); border-radius: 28px 34px 26px 38px;
}
.film-video p { margin-top: 12px; font-size: 14px; }
.film-video .plattformen { margin-top: 8px; font-size: 15px; font-weight: 700; }
.film-text { flex: 1 1 520px; min-width: 0; }
.film-text .meta { font-weight: 700; font-size: 15px; }
.film-text h1 { margin-top: 8px; font-size: clamp(52px, 6vw, 80px); }
.film-text .einleitung { margin-top: 24px; font-size: 21px; }
.film-text .einleitung p + p { margin-top: 16px; }
.kernsatz { margin-top: 28px; font-family: var(--hand); font-weight: 700; font-size: 34px; line-height: 1.2; }
.frage { margin-top: 40px; padding: 28px 32px; border: 3px solid var(--kreide); border-radius: var(--ecke-kasten); }
.frage .klein { font-weight: 700; font-size: 15px; }
.frage .hand { margin-top: 8px; font-size: 32px; line-height: 1.2; }
.film-text .knoepfe { margin-top: 32px; gap: 12px; }
.film-text .auch { margin-top: 20px; font-size: 16px; }
.meldung { margin-top: 10px; font-size: 15px; font-weight: 700; min-height: 24px; }
.erzaehlung { margin-top: 32px; border-top: 3px solid var(--kreide); padding-top: 8px; }
.erzaehlung summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.erzaehlung p { margin-top: 12px; font-size: 17px; }

.streifen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px;
  border-top: 3px solid var(--kreide); border-bottom: 3px solid var(--kreide); padding: 40px 0;
}
.streifen > p { flex: 1 1 420px; font-family: var(--hand); font-weight: 700; font-size: 36px; line-height: 1.15; }

/* ---------- Einfache Textseiten ---------- */

.textseite { max-width: 760px; padding-top: 32px; }
.textseite h1 { margin-bottom: 24px; }
.textseite h2 { font-size: 34px; margin-top: 48px; }
.textseite p, .textseite ul { margin-top: 14px; }
.textseite li + li { margin-top: 6px; }
.platzhalter { font-weight: 700; }
.rechtstext { margin-top: 8px; font-size: 16px; }
.rechtstext h3 { font-size: 28px; margin-top: 40px; }
.rechtstext h4 { font-family: var(--text); font-size: 18px; font-weight: 700; margin: 28px 0 0; line-height: 1.3; }
.rechtstext h5 { font-family: var(--text); font-size: 16px; font-weight: 700; margin: 18px 0 0; }
.rechtstext p, .rechtstext ul { margin-top: 10px; }

/* ---------- Fuß ---------- */

.fuss { padding-top: 128px; padding-bottom: 56px; }
.fuss-zeile { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.fuss-zeile > div { flex: 1 1 360px; min-width: 0; }
.fuss .name { font-family: var(--hand); font-weight: 700; font-size: 28px; }
.fuss .klein { margin-top: 8px; font-size: 15px; max-width: 460px; }
.konten { flex: 1 1 360px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-content: flex-start; font-weight: 700; font-size: 16px; }
.rechtliches { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; }

/* ---------- Handy ---------- */

@media (max-width: 720px) {
  :root { --rand: 20px; }
  body { font-size: 17px; }
  .kopf { padding-top: 16px; padding-bottom: 16px; }
  .logo img { width: 40px; height: 40px; }
  .logo span { font-size: 24px; }
  .js .menue-knopf {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; background: transparent; border: 0; cursor: pointer;
  }
  .js .navi { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
  .js .navi.offen { display: flex; }
  .navi a { min-height: 44px; display: flex; align-items: center; font-size: 20px; }
  .navi .knopf { justify-content: center; margin-top: 8px; }
  .oben { padding-top: 24px; gap: 32px; }
  .oben-text { padding-bottom: 0; }
  .oben-text .unterzeile { font-size: 18px; margin-top: 18px; }
  .stimme { font-size: 30px; }
  .oben-text .knoepfe { flex-direction: column; }
  .oben-text .knoepfe a { width: 100%; min-height: 52px; }
  .telefon { width: 240px; }
  .abschnitt { padding-top: 72px; }
  .themen { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .thema { flex: 0 0 auto; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .karte-titel { font-size: 21px; }
  .karte-info { font-size: 14px; }
  .ueber { gap: 20px; }
  .ueber-bild { flex-basis: auto; margin: 0; justify-content: flex-start; }
  .ueber-bild img { width: 160px; height: 160px; }
  .anmeldung { padding: 32px 22px; gap: 20px; }
  .formular-zeile { flex-direction: column; }
  .formular input[type="email"] { flex-basis: auto; }
  .film { gap: 32px; }
  .film-video { flex-basis: auto; width: 100%; max-width: 340px; }
  .kernsatz { font-size: 28px; }
  .frage { padding: 22px; }
  .frage .hand { font-size: 26px; }
  .streifen > p { font-size: 30px; }
  .fuss { padding-top: 72px; padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .karte-bild img { transition: none; }
}