/* Jona Kids e. V. – Stylesheet (Stand 11.11.2026)
   Angelehnt an jona-sozialwerk.de, Theme "Kids": Fliederblau + Gelb, Violett als Akzent.
   Schriften lokal eingebunden, beide SIL Open Font License 1.1 (Lizenztexte in assets/fonts):
   - Nunito (Überschriften, freie Alternative zu Pluto)
   - Inter (Fließtext, wie auf jona-sozialwerk.de)
   Icons: Tabler Icons, MIT-Lizenz (siehe assets/LIZENZEN.txt). */

@font-face { font-family: "Nunito"; src: url("../fonts/nunito-var-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --violett: #5a2382;
  --violett-50: #ad91c1;
  --dunkellila: #332752;
  --fliederblau: #7d8cea;
  --flieder-hell: #e9ecfc;
  --gelb: #feea9b;
  --gelb-hell: #fff8dc;
  --weiss: #ffffff;
  --ink: #1d1a24;
  --ink-soft: #45404f;
  --linie: #e4e0ec;

  --display: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-karte: 3px 90px 3px 3px;
  --radius-pill: 999px;
  --max: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--weiss); color: var(--ink); font: 400 1.0625rem/1.7 var(--text); }
main { flex: 1 0 auto; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--violett); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--dunkellila); }
:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--weiss); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 16px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; color: var(--violett); }
h3 { font-size: 1.3rem; font-weight: 800; color: var(--violett); }
p { margin: 0; }

/* Kopf: weiß, Logo links, Navigation rechts */
.kopf { background: var(--weiss); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-block: 14px; }
.marke { display: block; line-height: 0; }
.marke img { width: 96px; height: auto; }
.nav { display: flex; gap: 8px 32px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav a { font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violett); text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--fliederblau); }

/* Bühne */
.buehne { background: var(--fliederblau); position: relative; overflow: hidden; }
.buehne::before, .buehne::after { content: ""; position: absolute; pointer-events: none; }
.buehne::before { width: 340px; height: 300px; right: -60px; top: -80px; background: var(--gelb); border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; }
.buehne::after { width: 190px; height: 170px; right: 14%; bottom: -70px; background: var(--weiss); opacity: .9; border-radius: 45% 55% 42% 58% / 55% 45% 55% 45%; }
.buehne .wrap { position: relative; z-index: 1; padding-block: clamp(56px, 9vw, 104px); }
.buehne-text { max-width: 40rem; display: flex; flex-direction: column; gap: 20px; }
.buehne h1 { color: var(--ink); }
.buehne .lead { font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; line-height: 1.45; color: var(--ink); }

.btn { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 12px 24px; border-radius: var(--radius-pill); background: var(--violett); color: var(--weiss); }
.btn:hover { background: var(--dunkellila); color: var(--weiss); }

/* Abschnitte */
.abschnitt { padding-block: clamp(56px, 8vw, 96px); }
.abschnitt.band { background: var(--gelb-hell); }
.mitte { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 44rem; margin: 0 auto 44px; }
.mitte p { color: var(--ink-soft); }

.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.karte { background: var(--weiss); border-radius: var(--radius-karte); padding: 34px 30px 36px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.icon { width: 76px; height: 70px; display: grid; place-items: center; background: var(--flieder-hell); border-radius: 52% 48% 45% 55% / 58% 46% 54% 42%; color: var(--violett); }
.icon svg { width: 38px; height: 38px; }
.karte p { color: var(--ink-soft); }

.cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* Kontakt- und Rechtsseiten */
.seite { padding-block: clamp(44px, 6vw, 80px); }
.seite .inhalt { max-width: 46rem; display: flex; flex-direction: column; gap: 14px; }
.seite h1 { color: var(--violett); font-size: clamp(2rem, 4.5vw, 2.8rem); margin-bottom: 6px; }
.seite h2 { font-size: 1.3rem; margin-top: 22px; }
.seite .stand { color: var(--ink-soft); font-size: 0.9rem; margin-top: 16px; }
.kontaktkarte { background: var(--flieder-hell); border-radius: var(--radius-karte); padding: 30px 32px; display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.kontaktkarte .zeile { display: flex; gap: 14px; align-items: flex-start; }
.kontaktkarte .zeile svg { flex: none; width: 26px; height: 26px; color: var(--violett); margin-top: 2px; }

/* Fuß */
.fuss { background: var(--dunkellila); color: var(--weiss); font-size: 0.95rem; }
.fuss .wrap { padding-block: 36px; display: flex; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.fuss p { color: #e4def0; }
.fuss strong { color: var(--weiss); font-family: var(--display); font-weight: 800; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 24px; flex-wrap: wrap; }
.fuss a { color: var(--weiss); }
.fuss a:hover { color: var(--gelb); }

@media (max-width: 880px) {
  .karten { grid-template-columns: 1fr; }
  .buehne::before { width: 220px; height: 200px; right: -90px; top: -90px; }
  .buehne::after { display: none; }
}
@media (max-width: 520px) {
  .marke img { width: 78px; }
  .nav { gap: 6px 20px; }
  .nav a { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }