/* ==========================================================================
   So lerne ich! – gemeinsames Stylesheet
   Farbpalette aus dem Maskottchen-Styleguide
   ========================================================================== */

:root {
  /* Markenfarben */
  --lila: #4A1E60;
  --tuerkis: #17B2C3;
  --rot: #E14B3B;
  --gelb: #F8BD00;
  --creme: #FDFBF7;

  /* Abgeleitete Töne */
  --lila-dunkel: #33123F;
  --lila-hell: #F1EAF4;
  --tuerkis-dunkel: #0E7F8B;
  --tuerkis-hell: #E4F6F8;
  --rot-hell: #FCEAE7;
  --gelb-hell: #FFF3CC;
  --weiss: #FFFFFF;
  --text: #3A2747;
  --text-leise: #6B5A75;
  --linie: #E9E1EC;

  --schrift-titel: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --schrift-text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 22px;
  --radius-klein: 14px;
  --schatten: 0 10px 30px -12px rgba(74, 30, 96, .25);
  --schatten-klein: 0 4px 14px -6px rgba(74, 30, 96, .22);
  --breite: 1160px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--lila); text-underline-offset: 3px; }
a:hover { color: var(--rot); }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  color: var(--lila);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--tuerkis); outline-offset: 3px; border-radius: 6px; }

.container { width: min(var(--breite), 100% - 2rem); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Maskottchen-Bilder haben einen hellen Hintergrund – so verschmilzt er mit der Fläche */
.blend { mix-blend-mode: multiply; }
/* Die Ausschnitte aus dem Charakterbogen laufen an den Rändern weich aus, damit keine Bildkante sichtbar ist */
img.blend[src*="maskottchen"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}

/* ---------- Kleine Bausteine ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--schrift-titel); font-weight: 500;
  font-size: .95rem; letter-spacing: .02em;
  color: var(--tuerkis-dunkel);
  margin-bottom: .75rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gelb);
}

/* Gelbe „Sonnenstrahlen“ wie im Logo */
.strahlen { position: relative; display: inline-block; }
.strahlen::after {
  content: ""; position: absolute; right: -34px; top: -10px; width: 30px; height: 30px;
  background:
    linear-gradient(var(--gelb), var(--gelb)) 4px 14px / 12px 4px no-repeat,
    linear-gradient(var(--gelb), var(--gelb)) 10px 2px / 4px 10px no-repeat;
  transform: rotate(-12deg);
  border-radius: 3px;
}

.unterstrichen {
  background: linear-gradient(transparent 68%, var(--gelb-hell) 68%, var(--gelb-hell) 92%, transparent 92%);
  padding: 0 .1em;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--schrift-titel); font-weight: 500; font-size: 1.05rem;
  padding: .8rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn-primaer { background: var(--lila); color: var(--weiss); box-shadow: 0 6px 0 -1px var(--lila-dunkel); }
.btn-primaer:hover { color: var(--weiss); background: #5A2775; }
.btn-gelb { background: var(--gelb); color: var(--lila); box-shadow: 0 6px 0 -1px #C99600; }
.btn-gelb:hover { color: var(--lila); }
.btn-rahmen { background: transparent; color: var(--lila); border-color: var(--lila); }
.btn-rahmen:hover { background: var(--lila-hell); color: var(--lila); }

.chip {
  display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .03em;
  padding: .25rem .7rem; border-radius: 999px; text-transform: uppercase;
}
.chip-tuerkis { background: var(--tuerkis-hell); color: var(--tuerkis-dunkel); }
.chip-gelb { background: var(--gelb-hell); color: #7A5500; }
.chip-rot { background: var(--rot-hell); color: #A8291B; }
.chip-lila { background: var(--lila-hell); color: var(--lila); }

/* Sprechblase des Maskottchens */
.blase {
  position: relative; background: var(--weiss); color: var(--lila);
  font-family: var(--schrift-titel); font-weight: 500; font-size: 1.05rem; line-height: 1.35;
  padding: .85rem 1.1rem; border-radius: 20px; box-shadow: var(--schatten-klein);
  border: 2px solid var(--lila-hell);
}
.blase::after {
  content: ""; position: absolute; bottom: -11px; left: 34px; width: 20px; height: 20px;
  background: var(--weiss); border-right: 2px solid var(--lila-hell); border-bottom: 2px solid var(--lila-hell);
  transform: rotate(45deg); border-bottom-right-radius: 4px;
}

/* Gestrichelter „Flugpfad“ des Schmetterlings */
.pfad { display: block; width: 100%; height: 60px; color: var(--gelb); }

section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-kopf { max-width: 720px; margin-bottom: 2.5rem; }
.section-kopf.zentriert { margin-inline: auto; text-align: center; }
.section-kopf p { color: var(--text-leise); font-size: 1.12rem; }

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

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--creme); /* deckend, damit die Wortmarke (multiply) sauber aussieht */
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kopf.gescrollt { border-bottom-color: var(--linie); box-shadow: 0 4px 18px -12px rgba(74, 30, 96, .3); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 78px; }
.marke img { height: 54px; width: auto; }
.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  font-family: var(--schrift-titel); font-weight: 500; text-decoration: none; color: var(--lila);
  padding: .5rem .9rem; border-radius: 999px; transition: background .15s ease;
}
.nav a:hover { background: var(--lila-hell); color: var(--lila); }
.nav a[aria-current="page"] { background: var(--lila-hell); }
.nav .btn { margin-left: .5rem; padding: .6rem 1.15rem; }
.nav a.btn-primaer { color: var(--weiss); background: var(--lila); }
.nav .btn:hover { background: #5A2775; color: var(--weiss); }

.menu-knopf {
  display: none; background: var(--lila-hell); border: 0; border-radius: 12px; width: 46px; height: 46px;
  cursor: pointer; align-items: center; justify-content: center;
}
.menu-knopf span, .menu-knopf span::before, .menu-knopf span::after {
  display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--lila); position: relative; content: "";
  transition: transform .2s ease;
}
.menu-knopf span::before { position: absolute; top: -7px; }
.menu-knopf span::after { position: absolute; top: 7px; }

@media (max-width: 880px) {
  .menu-knopf { display: inline-flex; }
  .nav {
    position: absolute; top: 78px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--creme); padding: .75rem 1rem 1.25rem; border-bottom: 1px solid var(--linie);
    box-shadow: 0 16px 24px -18px rgba(74, 30, 96, .4);
    display: none;
  }
  .nav.offen { display: flex; }
  .nav a { padding: .8rem 1rem; }
  .nav .btn { margin: .5rem 0 0; }
  .marke img { height: 44px; }
}

/* ---------- Hero ---------- */

.hero { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); position: relative; }
.hero-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero p.lead { font-size: 1.2rem; color: var(--text-leise); max-width: 560px; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.75rem 0 1.5rem; }
.hero-merkmale { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0; list-style: none; font-weight: 700; color: var(--lila); }
.hero-merkmale li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-merkmale li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tuerkis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.hero-bild { position: relative; }
.hero-bild .logo-kreis { width: min(100%, 480px); margin-inline: auto; border-radius: 50%; }
.hero-bild .blase { position: absolute; bottom: 8%; left: -6%; max-width: 230px; animation: schweben 5s ease-in-out infinite; }
.hero-bild .blase::after { left: auto; right: 40px; }

@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 880px) {
  .hero-raster { grid-template-columns: 1fr; }
  .hero-bild { order: -1; }
  .hero-bild .logo-kreis { width: min(78%, 360px); }
  .hero-bild .blase { left: 0; top: auto; bottom: 4%; font-size: .95rem; max-width: 190px; }
}

/* ---------- Rechen-Experiment 43 − 18 ---------- */

.experiment { background: var(--lila); color: #EDE3F2; position: relative; overflow: hidden; }
.experiment h2, .experiment h3 { color: var(--weiss); }
.experiment .eyebrow { color: var(--gelb); }
.experiment .section-kopf p { color: #D9CBE0; }
.experiment-raster { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.aufgabe {
  font-family: var(--schrift-titel); font-weight: 600; color: var(--weiss);
  font-size: clamp(4rem, 11vw, 7.5rem); line-height: 1; letter-spacing: .02em; margin: .25rem 0 1.25rem;
}
.aufgabe .minus { color: var(--gelb); }

.antwort-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.antwort-form input {
  width: 120px; font: 600 1.6rem var(--schrift-titel); text-align: center; color: var(--lila);
  border: 0; border-radius: 16px; padding: .5rem .75rem; background: var(--creme);
}
.antwort-rueckmeldung { min-height: 1.6em; margin-top: .75rem; font-weight: 700; color: var(--gelb); }

.wege { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.weg {
  text-align: left; background: rgba(255, 255, 255, .07); color: #EDE3F2; border: 2px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-klein); padding: 1rem 1.1rem; cursor: pointer; font: inherit;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.weg:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.weg[aria-expanded="true"] { background: var(--creme); color: var(--text); border-color: var(--gelb); }
.weg-titel { display: flex; align-items: center; gap: .6rem; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.08rem; color: inherit; }
.weg[aria-expanded="true"] .weg-titel { color: var(--lila); }
.weg-nr {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gelb); color: var(--lila); font-size: .95rem;
}
.weg-schritte { display: none; margin-top: .6rem; font-family: var(--schrift-titel); font-size: 1.05rem; color: var(--tuerkis-dunkel); }
.weg[aria-expanded="true"] .weg-schritte { display: block; }
.weg-hinweis { display: block; font-size: .9rem; color: var(--text-leise); font-family: var(--schrift-text); margin-top: .25rem; }

.experiment-fazit {
  margin-top: 2.25rem; display: flex; gap: 1.25rem; align-items: center;
  background: rgba(255, 255, 255, .06); border-radius: var(--radius); padding: 1.25rem 1.5rem;
}
.experiment-fazit strong.gross { font-family: var(--schrift-titel); font-size: 3.2rem; color: var(--gelb); line-height: 1; }
.experiment-fazit p { margin: 0; }

@media (max-width: 880px) {
  .experiment-raster { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wege { grid-template-columns: 1fr; }
  .experiment-fazit { flex-direction: column; align-items: flex-start; }
}

/* ---------- Zahlen & Fakten ---------- */

.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.fakt {
  background: var(--weiss); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--schatten-klein);
  border-top: 6px solid var(--tuerkis);
}
.fakt:nth-child(2) { border-top-color: var(--rot); }
.fakt:nth-child(3) { border-top-color: var(--gelb); }
.fakt-zahl { font-family: var(--schrift-titel); font-weight: 600; font-size: 2.8rem; color: var(--lila); line-height: 1; margin-bottom: .6rem; }
.fakt p { margin: 0 0 .75rem; }
.fakt small { color: var(--text-leise); font-size: .8rem; }

.botschaft {
  margin-top: 2.5rem; text-align: center; font-family: var(--schrift-titel); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); color: var(--lila); max-width: 800px; margin-inline: auto; line-height: 1.35;
}
.botschaft em { font-style: normal; color: var(--rot); }

@media (max-width: 880px) { .fakten { grid-template-columns: 1fr; } }

/* ---------- So funktioniert's ---------- */

.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: schritt; position: relative; }
.schritt {
  background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-klein);
  display: flex; flex-direction: column;
}
.schritt-bild { background: var(--tuerkis-hell); padding: 1rem 1rem 0; display: grid; place-items: end center; height: 220px; }
.schritt:nth-child(2) .schritt-bild { background: var(--gelb-hell); }
.schritt:nth-child(3) .schritt-bild { background: var(--rot-hell); }
.schritt-bild img { max-height: 200px; width: auto; }
.schritt-text { padding: 1.5rem 1.5rem 1.75rem; }
.schritt-text h3::before {
  counter-increment: schritt; content: counter(schritt);
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--lila); color: var(--weiss); font-size: 1rem; margin-right: .6rem; vertical-align: 2px;
}
.schritt-text p { margin: 0; color: var(--text-leise); }

@media (max-width: 880px) { .schritte { grid-template-columns: 1fr; } }

/* ---------- Vier Dimensionen ---------- */

.dimensionen-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.dimensionen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.dimension { background: var(--weiss); border-radius: var(--radius-klein); padding: 1.35rem; border: 2px solid var(--linie); }
.dimension-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: .8rem;
  background: var(--lila-hell); color: var(--lila);
}
.dimension:nth-child(2) .dimension-icon { background: var(--tuerkis-hell); color: var(--tuerkis-dunkel); }
.dimension:nth-child(3) .dimension-icon { background: var(--rot-hell); color: var(--rot); }
.dimension:nth-child(4) .dimension-icon { background: var(--gelb-hell); color: #8F6200; }
.dimension h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.dimension p { margin: 0; font-size: .97rem; color: var(--text-leise); }
.dimensionen-bild { position: relative; }
.dimensionen-bild img { width: min(100%, 380px); margin-inline: auto; }
.dimensionen-bild .blase { margin: 0 auto 1.5rem; max-width: 320px; }

@media (max-width: 880px) { .dimensionen-raster { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dimensionen { grid-template-columns: 1fr; } }

/* ---------- Für wen ---------- */

.zielgruppen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.zielgruppe { border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.zielgruppe.eltern { background: var(--tuerkis-hell); }
.zielgruppe.paedagogen { background: var(--lila-hell); }
.zielgruppe ul { padding: 0; margin: 1rem 0 0; list-style: none; display: grid; gap: .6rem; }
.zielgruppe li { padding-left: 1.75rem; position: relative; }
.zielgruppe li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 4px 50% 4px 50%;
  background: var(--tuerkis); transform: rotate(-10deg);
}
.zielgruppe.paedagogen li::before { background: var(--lila); }

.empfehlung {
  margin-top: 1.5rem; background: var(--weiss); border-radius: var(--radius); padding: 1.75rem clamp(1.25rem, 3vw, 2rem);
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; box-shadow: var(--schatten-klein);
  border-left: 6px solid var(--gelb);
}
.empfehlung img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; }
.empfehlung blockquote { margin: 0; font-family: var(--schrift-titel); font-size: 1.2rem; color: var(--lila); line-height: 1.4; }
.empfehlung .klein { display: block; font-family: var(--schrift-text); font-size: .9rem; color: var(--text-leise); margin-bottom: .35rem; font-weight: 700; }

@media (max-width: 760px) {
  .zielgruppen { grid-template-columns: 1fr; }
  .empfehlung { grid-template-columns: 1fr; }
}

/* ---------- Werte / Persönlichkeit ---------- */

.werte-streifen { background: var(--weiss); border-block: 1px solid var(--linie); }
.werte { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; text-align: center; }
.wert-icon {
  width: 76px; height: 76px; margin: 0 auto .75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--creme); border: 2px dashed var(--linie);
}
.wert h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.wert p { font-size: .92rem; color: var(--text-leise); margin: 0; }

@media (max-width: 880px) { .werte { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; } }
@media (max-width: 520px) { .werte { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Fahrplan ---------- */

.fahrplan { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; }
.fahrplan::before {
  content: ""; position: absolute; top: 22px; left: 6%; right: 6%; border-top: 3px dashed var(--gelb);
}
.etappe { position: relative; padding-top: 3.5rem; }
.etappe-punkt {
  position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--weiss); border: 3px solid var(--tuerkis); font-family: var(--schrift-titel); font-weight: 600; color: var(--lila);
}
.etappe.jetzt .etappe-punkt { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 0 6px var(--gelb-hell); }
.etappe .zeit { font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tuerkis-dunkel); }
.etappe h3 { font-size: 1.15rem; margin: .2rem 0 .35rem; }
.etappe p { font-size: .97rem; color: var(--text-leise); margin: 0; }

@media (max-width: 880px) {
  .fahrplan { grid-template-columns: 1fr; gap: 1.75rem; }
  .fahrplan::before { top: 0; bottom: 0; left: 22px; right: auto; border-top: 0; border-left: 3px dashed var(--gelb); }
  .etappe { padding: 0 0 0 4.25rem; min-height: 46px; }
}

/* ---------- Shop-Teaser & Karten ---------- */

.produkte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.produkt {
  background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-klein);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.produkt:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.produkt-bild { height: 210px; display: grid; place-items: center; background: var(--tuerkis-hell); position: relative; overflow: hidden; }
.produkt-bild img { max-height: 190px; width: auto; }
.produkt-bild img.foto { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.produkt-bild .chip { position: absolute; top: 14px; left: 14px; }
.produkt-bild.gelb { background: var(--gelb-hell); }
.produkt-bild.rot { background: var(--rot-hell); }
.produkt-bild.lila { background: var(--lila-hell); }
.produkt-text { padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.produkt-text h3 { margin-bottom: .35rem; }
.produkt-text p { color: var(--text-leise); font-size: .98rem; flex: 1; }
.produkt-fuss { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .5rem; flex-wrap: wrap; }
.produkt-fuss .alter { font-size: .88rem; font-weight: 700; color: var(--lila); }
.produkt-fuss .btn { padding: .55rem 1.05rem; font-size: .95rem; }

@media (max-width: 980px) { .produkte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .produkte { grid-template-columns: 1fr; } }

/* ---------- Mitmachen / Warteliste ---------- */

.mitmachen-box {
  background: var(--tuerkis); color: var(--lila-dunkel); border-radius: calc(var(--radius) * 1.4);
  padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center;
  position: relative; overflow: hidden;
}
.mitmachen-box h2 { color: var(--weiss); }
.mitmachen-box p { color: #06363B; font-size: 1.1rem; }
.mitmachen-box .eyebrow { color: var(--lila); }
.mitmachen-box .eyebrow::before { background: var(--weiss); }
.mitmachen-box img { width: min(100%, 300px); margin-inline: auto; border-radius: 50%; border: 6px solid rgba(255, 255, 255, .5); }

.formular { display: grid; gap: .75rem; margin-top: 1.25rem; max-width: 520px; }
.formular-zeile { display: flex; gap: .6rem; flex-wrap: wrap; }
.formular input[type="email"], .formular input[type="text"], .formular select, .formular textarea {
  flex: 1 1 220px; font: inherit; padding: .85rem 1.1rem; border-radius: 999px; border: 2px solid transparent; background: var(--weiss); color: var(--text);
}
.formular textarea { border-radius: 18px; min-height: 120px; resize: vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--gelb); }
.formular .rollen { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.formular .rollen legend { font-weight: 700; margin-bottom: .4rem; font-size: .95rem; }
.formular .rollen label {
  display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .55); padding: .4rem .9rem; border-radius: 999px;
  cursor: pointer; font-weight: 700; font-size: .95rem;
}
.formular .rollen input { accent-color: var(--lila); }
.formular .einwilligung { font-size: .85rem; display: flex; gap: .5rem; align-items: flex-start; }
.formular .einwilligung input { margin-top: .3rem; accent-color: var(--lila); }
.formular-danke { display: none; background: var(--weiss); color: var(--lila); padding: 1rem 1.25rem; border-radius: 16px; font-weight: 700; }
.formular.gesendet .formular-danke { display: block; }

@media (max-width: 760px) {
  .mitmachen-box { grid-template-columns: 1fr; }
  .mitmachen-box img { width: 180px; order: -1; margin: 0; }
}

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

.fuss { background: var(--lila-dunkel); color: #D6C8DD; padding: 3.5rem 0 2rem; margin-top: 2rem; }
.fuss a { color: #F1EAF4; text-decoration: none; }
.fuss a:hover { color: var(--gelb); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.fuss-marke img { width: 210px; background: var(--creme); border-radius: 18px; padding: .6rem 1rem; margin-bottom: 1rem; }
.fuss h4 { color: var(--weiss); font-size: 1.05rem; margin-bottom: .75rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.fuss-unten {
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .9rem;
}

@media (max-width: 880px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss-raster { grid-template-columns: 1fr; } }

/* ---------- Begleiter (schwebendes Maskottchen) ---------- */

.begleiter {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: flex-end; gap: .6rem;
  pointer-events: none;
}
.begleiter-blase {
  pointer-events: auto; max-width: 250px; font-size: .95rem; padding: .7rem .95rem; margin-bottom: 30px;
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.begleiter-blase::after { left: auto; right: -6px; bottom: 16px; transform: rotate(-45deg); }
.begleiter.offen .begleiter-blase { opacity: 1; transform: none; }
.begleiter-knopf {
  pointer-events: auto; width: 74px; height: 74px; border-radius: 50%; border: 4px solid var(--weiss); padding: 0;
  overflow: hidden; cursor: pointer; box-shadow: var(--schatten); background: var(--weiss);
  transition: transform .2s ease;
}
.begleiter-knopf:hover { transform: scale(1.06) rotate(-4deg); }
.begleiter-knopf img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 520px) {
  .begleiter-knopf { width: 60px; height: 60px; }
  .begleiter-blase { max-width: 200px; font-size: .88rem; }
}

/* ---------- Unterseiten-Hero ---------- */

.seiten-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.seiten-hero-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.seiten-hero p.lead { font-size: 1.18rem; color: var(--text-leise); max-width: 600px; }
@media (max-width: 880px) { .seiten-hero-raster { grid-template-columns: 1fr; } }

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

.portrait {
  position: relative; aspect-ratio: 4 / 5; width: min(100%, 400px); margin-inline: auto;
  border-radius: 46% 54% 50% 50% / 42% 44% 56% 58%; overflow: hidden;
  background: linear-gradient(160deg, var(--tuerkis-hell), var(--lila-hell));
  display: grid; place-items: center; text-align: center; border: 6px solid var(--weiss); box-shadow: var(--schatten);
}
.portrait img.blend { width: 62%; }
.portrait .platzhalter-text { position: absolute; bottom: 5%; left: 0; right: 0; font-weight: 800; color: var(--lila); font-size: .85rem; }
.portrait-deko { position: absolute; width: 90px; right: 4%; bottom: -4%; }

.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.kennzahl { background: var(--weiss); border-radius: var(--radius-klein); padding: 1.1rem 1.25rem; box-shadow: var(--schatten-klein); }
.kennzahl strong { display: block; font-family: var(--schrift-titel); font-size: 2rem; color: var(--lila); line-height: 1.1; }
.kennzahl span { font-size: .92rem; color: var(--text-leise); }
@media (max-width: 760px) { .kennzahlen { grid-template-columns: repeat(2, 1fr); } }

.geschichte { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.geschichte .zitat {
  background: var(--lila); color: var(--weiss); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.75rem);
  font-family: var(--schrift-titel); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.4; position: relative;
}
.geschichte .zitat::before {
  content: "„"; position: absolute; top: -.35em; left: .3em; font-size: 5rem; color: var(--gelb); line-height: 1;
}
.geschichte .zitat cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--schrift-text); font-size: .95rem; color: #D9CBE0; }
@media (max-width: 880px) { .geschichte { grid-template-columns: 1fr; } }

.stationen { list-style: none; padding: 0; margin: 0; position: relative; max-width: 820px; margin-inline: auto; }
.stationen::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; border-left: 3px dashed var(--tuerkis); }
.station { position: relative; padding: 0 0 2rem 4.25rem; }
.station:last-child { padding-bottom: 0; }
.station-punkt {
  position: absolute; left: 0; top: 0; width: 45px; height: 45px; border-radius: 50%; background: var(--weiss);
  border: 3px solid var(--tuerkis); display: grid; place-items: center; color: var(--lila);
}
.station.highlight .station-punkt { background: var(--gelb); border-color: var(--gelb); }
.station h3 { margin-bottom: .25rem; font-size: 1.2rem; }
.station p { margin: 0; color: var(--text-leise); }
.station .ort { font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tuerkis-dunkel); }

.robinson {
  text-align: center; background: var(--gelb-hell); border-radius: calc(var(--radius) * 1.4); padding: clamp(2rem, 5vw, 3.5rem);
}
.robinson .durchgestrichen { text-decoration: line-through; text-decoration-color: var(--rot); text-decoration-thickness: 4px; color: var(--text-leise); }
.robinson h2 { margin-bottom: .25rem; }
.robinson p { max-width: 640px; margin: 1rem auto 0; }

.mitbauen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.mitbauen-karte { background: var(--weiss); border-radius: var(--radius-klein); padding: 1.35rem; border: 2px solid var(--linie); }
.mitbauen-karte h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.mitbauen-karte p { font-size: .95rem; margin: 0; color: var(--text-leise); }
@media (max-width: 880px) { .mitbauen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mitbauen { grid-template-columns: 1fr; } }

/* ---------- Shop ---------- */

.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter button {
  font: 600 .98rem var(--schrift-titel); padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--linie); background: var(--weiss); color: var(--lila); transition: all .15s ease;
}
.filter button:hover { border-color: var(--lila); }
.filter button[aria-pressed="true"] { background: var(--lila); color: var(--weiss); border-color: var(--lila); }
.produkt[hidden] { display: none; }

.shop-einbettung {
  border: 3px dashed var(--tuerkis); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--weiss); display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center;
}
.shop-einbettung img { width: 120px; }
.shop-einbettung p { margin: 0 0 .75rem; color: var(--text-leise); }
@media (max-width: 620px) { .shop-einbettung { grid-template-columns: 1fr; } }

.vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.vorteil { display: flex; gap: .9rem; align-items: flex-start; }
.vorteil-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tuerkis-hell); color: var(--tuerkis-dunkel); }
.vorteil h3 { font-size: 1.05rem; margin-bottom: .15rem; }
.vorteil p { margin: 0; font-size: .95rem; color: var(--text-leise); }
@media (max-width: 760px) { .vorteile { grid-template-columns: 1fr; } }

/* ---------- Rechtliches ---------- */

.rechtstext { max-width: 760px; }
.rechtstext h2 { font-size: 1.6rem; margin-top: 2.25rem; }
.rechtstext .platzhalter { background: var(--gelb-hell); padding: 0 .3em; border-radius: 4px; }

/* ---------- Einblenden beim Scrollen ---------- */

.einblenden { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.einblenden.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .einblenden { opacity: 1; transform: none; transition: none; }
  .hero-bild .blase { animation: none; }
}