/* =========================================================================
   Mein Malbuch — Website
   Aufbau: 1 Grundlagen · 2 Bausteine · 3 Abschnitte · 4 Bewegung · 5 Mobil
   ========================================================================= */

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

:root {
  /* Farben identisch zur App (tailwind.config.ts), damit Website und
     App als ein Produkt wirken. */
  --creme-50: #fffbf5;
  --creme-100: #fff5e6;
  --creme-200: #fde8c9;
  --pfirsich-200: #ffd9c2;
  --pfirsich-300: #ffc1a3;
  --pfirsich-400: #ffa57a;
  --pfirsich-500: #ff8859;
  --beere-200: #f7c6d9;
  --beere-300: #efa4c0;
  --beere-400: #e17ba1;
  --beere-500: #c95484;
  /* Nur für kleine Schrift: #c95484 erreicht auf Creme keine 4,5:1. */
  --beere-600: #a63e68;
  --minze-200: #c8ebd8;
  --minze-300: #a2dcbf;
  --minze-400: #72c7a0;
  --minze-600: #2f7a5a;
  --himmel-200: #d4e9f7;
  --himmel-300: #a9d2ed;
  --himmel-400: #7bb9df;
  --himmel-600: #2f6f96;
  --sonne: #ffd45a;
  --flieder: #c9bff0;
  --tinte-700: #4a3f4a;
  --tinte-800: #332b33;
  --tinte-900: #1f1a1f;

  --schatten-weich: 0 20px 60px rgba(94, 66, 73, 0.1);
  --schatten-karte: 0 12px 38px rgba(74, 63, 74, 0.07);
  --schatten-pop: 0 18px 45px rgba(201, 84, 132, 0.24);

  --radius-s: 16px;
  --radius-m: 24px;
  --radius-l: 32px;
  --radius-xl: 42px;

  --breite: 1180px;
  --luft: clamp(72px, 9vw, 118px);

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

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Sprungziele nicht unter der fixen Kopfzeile parken. */
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--tinte-800);
  background: var(--creme-50);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--tinte-900);
  font-family: var(--schrift-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  margin-bottom: 22px;
  font-size: clamp(2.7rem, 6.2vw, 5.4rem);
  letter-spacing: -0.045em;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2.05rem, 4.2vw, 3.6rem);
  letter-spacing: -0.035em;
}

h3 {
  margin-bottom: 10px;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
}

p {
  color: var(--tinte-700);
}

/* Sichtbarer Fokusring — die Seite muss vollständig mit der Tastatur
   bedienbar bleiben (Screenreader-Nutzung, Motorik-Einschränkungen). */
:focus-visible {
  outline: 3px solid var(--beere-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.springmarke {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 999px;
  color: #fff;
  background: var(--tinte-900);
  font-weight: 800;
  transform: translateY(-250%);
  transition: transform 0.2s;
}

.springmarke:focus {
  transform: none;
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 2 Bausteine ------------------------------------------------- */

.spur {
  width: min(calc(100% - 40px), var(--breite));
  margin-inline: auto;
}

.abschnitt {
  position: relative;
  padding: var(--luft) 0;
}

.augenbraue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--beere-600);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.augenbraue::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 99px;
  background: var(--pfirsich-500);
}

.kopf {
  max-width: 750px;
  margin-bottom: 54px;
}

.kopf.mittig {
  margin-inline: auto;
  text-align: center;
}

.kopf.mittig .augenbraue::before {
  display: none;
}

.kopf p {
  max-width: 660px;
  margin-bottom: 0;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
}

.kopf.mittig p {
  margin-inline: auto;
}

/* Handgemalter Marker-Strich unter einem Wort. */
.marker {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
}

.marker::after {
  content: "";
  position: absolute;
  right: -3%;
  bottom: 0.04em;
  left: -3%;
  z-index: -1;
  height: 0.22em;
  border-radius: 99px;
  background: var(--pfirsich-300);
  transform: rotate(-1.4deg);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--pfirsich-500), var(--beere-400));
  box-shadow: 0 12px 28px rgba(225, 123, 161, 0.28);
  font-family: var(--schrift-text);
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.knopf:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten-pop);
}

.knopf--stumm {
  color: var(--tinte-900);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 2px rgba(74, 63, 74, 0.14);
}

.knopf--stumm:hover {
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(201, 84, 132, 0.4), var(--schatten-karte);
}

/* Google-Play-Badge: Originaldatei von Google.
   Die Brand Guidelines verbieten jede Veränderung — also kein Zuschneiden,
   keine eigenen Farben, keine Ecken, kein Schatten auf dem Bild selbst. Der
   durchsichtige Rand im PNG ist der vorgeschriebene Schutzraum und bleibt
   deshalb stehen; nur die Anzeigegröße wird gesetzt. */
.store-badge {
  display: inline-block;
  transition: transform 0.2s;
}

.store-badge:hover {
  transform: translateY(-2px);
}

.store-badge img {
  width: 210px;
  height: auto;
}

.karte {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--schatten-karte);
  backdrop-filter: blur(6px);
}

.symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 9px 24px rgba(74, 63, 74, 0.09);
}

.symbol svg {
  width: 25px;
  height: 25px;
}

/* ---------- Ausmal-Hintergrund (fixiert, färbt sich beim Scrollen) ------ */

.mal-hintergrund {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 6% 3%, rgba(255, 217, 194, 0.6), transparent 26%),
    radial-gradient(circle at 97% 12%, rgba(247, 198, 217, 0.5), transparent 24%),
    radial-gradient(circle at 10% 86%, rgba(200, 235, 216, 0.45), transparent 26%),
    radial-gradient(circle at 92% 92%, rgba(212, 233, 247, 0.5), transparent 25%);
}

.mal-hintergrund svg {
  width: 100%;
  height: 100%;
  opacity: 0.42;
}

.mal-hintergrund .linien {
  fill: none;
  stroke: var(--tinte-900);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
}

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

/* Kopfzeile */
.kopfzeile {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  padding: 14px 0;
  transition: background 0.25s, box-shadow 0.25s, padding 0.25s;
}

.kopfzeile.gescrollt {
  padding: 8px 0;
  background: rgba(255, 251, 245, 0.9);
  box-shadow: 0 8px 30px rgba(74, 63, 74, 0.09);
  backdrop-filter: blur(16px);
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--tinte-900);
  font: 700 1.22rem var(--schrift-display);
}

.marke img {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  box-shadow: 0 7px 17px rgba(201, 84, 132, 0.18);
}

.nav-liste {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 0.94rem;
  font-weight: 700;
}

.nav-liste a:not(.knopf) {
  color: var(--tinte-700);
  transition: color 0.2s;
}

.nav-liste a:not(.knopf):hover {
  color: var(--beere-600);
}

/* Ladeknopf, der ab Tablett neben dem Menü-Knopf in der Kopfzeile steht.
   Auf dem Desktop steckt der Knopf in der Navigationsliste, deshalb hier aus. */
.kopf-knopf {
  display: none;
  margin-left: auto;
}

.menue-knopf {
  display: none;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--tinte-900);
  cursor: pointer;
}

/* Hero */
.hero {
  padding: 148px 0 80px;
}

.hero-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 46px;
}

.hero-schild {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 9px 15px;
  border: 1px solid rgba(225, 123, 161, 0.24);
  border-radius: 999px;
  color: var(--beere-600);
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.83rem;
  font-weight: 800;
}

.hero h1 .weich {
  color: var(--beere-500);
}

.hero-text {
  max-width: 560px;
  margin-bottom: 30px;
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.7;
}

.hero-aktionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

.hero-hinweise {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0;
  list-style: none;
  color: var(--tinte-700);
  font-size: 0.86rem;
  font-weight: 700;
}

.hero-hinweise li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-hinweise svg {
  flex: 0 0 auto;
  color: var(--minze-600);
}

.hero-bild {
  position: relative;
}

.hero-rahmen {
  position: relative;
  overflow: hidden;
  border: 9px solid rgba(255, 255, 255, 0.75);
  border-radius: 44px 44px 96px 44px;
  background: var(--creme-100);
  box-shadow: var(--schatten-weich);
  transform: rotate(1.4deg);
}

.hero-rahmen img {
  width: 100%;
}

.schwebekarte {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 17px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--schatten-weich);
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
  font-weight: 800;
  animation: schweben 5s ease-in-out infinite;
}

.schwebekarte .blase {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 13px;
}

.schwebekarte--oben {
  top: 42px;
  right: -22px;
}

.schwebekarte--oben .blase {
  color: var(--minze-600);
  background: var(--minze-200);
}

.schwebekarte--unten {
  bottom: 38px;
  left: -26px;
  animation-delay: -2.4s;
}

.schwebekarte--unten .blase {
  color: var(--beere-600);
  background: var(--beere-200);
}

/* Vertrauensleiste */
.vertrauen {
  padding-bottom: 30px;
}

.vertrauen-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid rgba(74, 63, 74, 0.08);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--schatten-karte);
}

.vertrauen-punkt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.vertrauen-punkt + .vertrauen-punkt {
  border-left: 1px solid rgba(74, 63, 74, 0.09);
}

.vertrauen-punkt svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--beere-500);
}

/* Leitsatz */
.leitsatz {
  text-align: center;
}

.leitsatz .spur {
  max-width: 920px;
}

.leitsatz p {
  margin-bottom: 0;
  color: var(--tinte-800);
  font: 600 clamp(1.5rem, 3.2vw, 2.7rem) / 1.4 var(--schrift-display);
}

.leitsatz strong {
  color: var(--beere-500);
  font-weight: 600;
}

.leitsatz .kringel {
  width: 116px;
  margin: 26px auto 0;
  color: var(--pfirsich-500);
}

/* --- Ausmal-Demo: bleibt stehen, während sich das Bild füllt ------------ */
.demo {
  position: relative;
}

.demo-bahn {
  /* Scroll-Weg, über den sich das Bild füllt. */
  height: 340vh;
}

.demo-buehne {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 90px 0 40px;
}

/* Kein width:100% — das würde die Randbreite aus .spur überschreiben und
   den Abschnitt bis an die Fensterkante schieben. */
.demo-raster {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  align-items: center;
  gap: 50px;
}

.demo-blatt {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--schatten-weich);
  transform: rotate(-1.2deg);
}

.demo-blatt svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
}

.demo-blatt .linien {
  fill: none;
  stroke: var(--tinte-900);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ecke oben rechts: aktueller Buntstift */
.demo-eckchen {
  position: absolute;
  top: -16px;
  right: -14px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--schatten-karte);
  font-size: 0.8rem;
  font-weight: 800;
}

.demo-eckchen .tupfen {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pfirsich-400);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
  transition: background 0.4s;
}

/* Fortschritt als Buntstift-Leiste */
.stiftleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.stiftleiste li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  opacity: 0.35;
  transform: scale(0.82);
  transition: opacity 0.35s, transform 0.35s;
}

.stiftleiste li.aktiv {
  opacity: 1;
  transform: scale(1);
}

.demo-schritte {
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.demo-schritte li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 18px;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  opacity: 0.45;
  transition: opacity 0.4s, background 0.4s, transform 0.4s;
}

.demo-schritte li.aktiv {
  background: #fff;
  box-shadow: var(--schatten-karte);
  opacity: 1;
  transform: translateX(4px);
}

.demo-schritte .nummer {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--beere-600);
  background: var(--beere-200);
  font: 600 0.85rem var(--schrift-display);
}

/* Schritte */
.wie {
  color: #fff;
  background: var(--tinte-900);
}

.wie::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background:
    radial-gradient(circle at 14% 8%, var(--beere-400), transparent 26%),
    radial-gradient(circle at 87% 88%, var(--pfirsich-500), transparent 24%);
}

.wie .spur {
  position: relative;
}

.wie h2,
.wie h3 {
  color: #fff;
}

.wie .kopf p {
  color: rgba(255, 255, 255, 0.68);
}

.wie .augenbraue {
  color: var(--pfirsich-300);
}

.schritte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: schritte;
}

.schritt {
  position: relative;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
}

/* Jede Karte bildet wegen backdrop-filter einen eigenen Stapelkontext. Ein
   z-index am Pfeil wirkt deshalb nur INNERHALB seiner Karte — die nächste
   Karte legte sich trotzdem darüber und schnitt ihn mittendrin ab. Erst eine
   absteigende Reihenfolge auf den Karten selbst löst das. */
.schritt:nth-child(1) {
  z-index: 3;
}

.schritt:nth-child(2) {
  z-index: 2;
}

.schritt:nth-child(3) {
  z-index: 1;
}

.schritt::before {
  counter-increment: schritte;
  content: "0" counter(schritte);
  display: block;
  margin-bottom: 40px;
  color: var(--pfirsich-300);
  font: 600 0.85rem var(--schrift-display);
  letter-spacing: 0.12em;
}

.schritt p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
}

/* Mittig in der 24px-Lücke: 14px über die eine, 14px über die nächste Karte. */
.schritt-pfeil {
  position: absolute;
  top: 50%;
  right: -38px;
  color: var(--pfirsich-300);
  transform: translateY(-50%);
}

/* Funktionen (Bento) */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.funktion {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-weich);
}

.funktion h3 {
  max-width: 380px;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.funktion p {
  max-width: 440px;
  margin-bottom: 0;
  font-size: 0.99rem;
}

.funktion .plakette {
  position: absolute;
  top: 26px;
  right: 24px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.73rem;
  font-weight: 800;
}

.funktion--stift {
  grid-column: span 7;
  min-height: 400px;
  background: linear-gradient(145deg, #ffdcca, #f9cbdc);
}

/* Text und Zeichenblatt teilen sich die Kachel. Ohne diese Grenzen liefe
   der Absatz unter das Blatt und wäre dort nicht mehr lesbar. */
.funktion--stift h3 {
  max-width: 62%;
}

.funktion--stift p {
  max-width: 46%;
}

.funktion--sicher {
  grid-column: span 5;
  background: linear-gradient(145deg, #d9f2e4, #c8ebd8);
}

.funktion--vorlesen {
  grid-column: span 5;
  background: linear-gradient(145deg, #fdeccd, #fadfdc);
}

.funktion--haustier {
  grid-column: span 7;
  background: linear-gradient(145deg, #e3e0fb, #d2e6f8);
}

.funktion--profile {
  grid-column: span 4;
  background: linear-gradient(145deg, #e5f2fb, #cde6f6);
}

.funktion--drucken {
  grid-column: span 4;
  background: linear-gradient(145deg, #fff1d9, #fde3bb);
}

.funktion--offline {
  grid-column: span 4;
  background: linear-gradient(145deg, #f9dbea, #f4c7d9);
}

/* Kleine Zeichenblatt-Deko in der großen Stift-Kachel */
.stift-deko {
  position: absolute;
  right: 22px;
  bottom: 12px;
  width: 44%;
  max-width: 300px;
  aspect-ratio: 1;
}

.stift-deko .blatt {
  position: absolute;
  inset: 10% 6% 4% 12%;
  display: grid;
  place-items: center;
  border: 8px solid #fff;
  border-radius: 20px;
  background: #fffefa;
  box-shadow: 0 17px 35px rgba(74, 63, 74, 0.15);
  transform: rotate(5deg);
}

.stift-deko .blatt svg {
  width: 78%;
  height: 78%;
}

.stift-deko .zettel {
  position: absolute;
  bottom: 14%;
  left: 0;
  max-width: 172px;
  padding: 12px 16px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(74, 63, 74, 0.14);
  font-size: 0.8rem;
  font-weight: 800;
  transform: rotate(-5deg);
}

.stift-deko .zettel::before {
  content: "✨";
  margin-right: 5px;
}

/* Figuren-Laufband */
.laufband {
  padding: 0 0 var(--luft);
  overflow: hidden;
}

.laufband-fenster {
  position: relative;
  padding: 22px 0;
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--schatten-karte);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.laufband-reihe {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: laufen 46s linear infinite;
}

.laufband-fenster:hover .laufband-reihe {
  animation-play-state: paused;
}

.laufband-reihe img {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(74, 63, 74, 0.09);
}

/* Für Eltern */
.eltern-raster {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: 80px;
}

.geraet {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--schatten-weich);
  transform: rotate(-1deg);
}

.geraet-schirm {
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
}

.schirm-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--creme-200);
}

.schirm-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 1rem var(--schrift-display);
}

.schirm-marke img {
  width: 37px;
  height: 37px;
  border-radius: 11px;
}

.schirm-chip {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--minze-600);
  background: var(--minze-200);
  font-size: 0.7rem;
  font-weight: 800;
}

.schirm-koerper {
  padding: 20px;
  background: linear-gradient(145deg, #fffaf5, #fff);
}

.schirm-gruss {
  margin-bottom: 16px;
  font: 600 1.45rem var(--schrift-display);
}

.schirm-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--creme-200);
  border-radius: 18px;
  background: #fff;
}

.schirm-zeile .kachel {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 13px;
}

.schirm-zeile strong {
  display: block;
  font-size: 0.86rem;
}

.schirm-zeile small {
  color: var(--tinte-700);
  font-size: 0.7rem;
}

.schirm-zeile > svg:last-child {
  margin-left: auto;
  color: #b7abb4;
}

.siegel {
  position: absolute;
  right: -34px;
  bottom: -28px;
  display: grid;
  place-items: center;
  width: 138px;
  aspect-ratio: 1;
  padding: 14px;
  border-radius: 50%;
  color: #fff;
  background: var(--beere-500);
  box-shadow: var(--schatten-pop);
  font: 600 0.82rem/1.32 var(--schrift-display);
  hyphens: none;
  text-align: center;
  transform: rotate(8deg);
}

.hakenliste {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.hakenliste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 700;
}

.hakenliste .haken {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--minze-600);
  background: var(--minze-200);
  font-size: 0.85rem;
}

/* Preise */
.preis-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.preis {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid rgba(74, 63, 74, 0.08);
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--schatten-karte);
}

.preis--beliebt {
  border-color: transparent;
  background: linear-gradient(150deg, #fff, #fff5ee);
  box-shadow: var(--schatten-weich);
  outline: 3px solid var(--pfirsich-300);
  outline-offset: -3px;
}

/* Als Fähnchen über der Karte statt im Textfluss — sonst rutschte im
   mittleren Paket alles um die Höhe der Plakette nach unten und die drei
   Karten stünden nicht mehr auf einer Linie. */
.preis .plakette {
  position: absolute;
  top: -13px;
  left: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--beere-600);
  background: var(--beere-200);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.preis h3 {
  margin-bottom: 4px;
}

.preis .zahl {
  margin: 12px 0 2px;
  color: var(--tinte-900);
  font: 600 2.6rem/1 var(--schrift-display);
}

.preis .zahl span {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--schrift-text);
  color: var(--tinte-700);
}

.preis .info {
  margin-bottom: 18px;
  font-size: 0.88rem;
}

.preis ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  font-weight: 600;
}

.preis li {
  display: flex;
  gap: 9px;
}

.preis li::before {
  content: "✓";
  color: var(--minze-600);
  font-weight: 800;
}

.preis-fussnote {
  margin: 26px auto 0;
  max-width: 780px;
  color: var(--tinte-700);
  font-size: 0.88rem;
  text-align: center;
}

/* Galerie mit echten Ausmalbildern */
/* 240px als Mindestbreite ergibt bei 1180px Inhaltsbreite genau vier
   Spalten — acht Blätter füllen damit zwei volle Reihen. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.malblatt {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: var(--schatten-karte);
  transition: transform 0.3s;
}

.malblatt:hover {
  transform: translateY(-5px) rotate(-0.8deg);
}

.malblatt-bild {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

/* Die Farbe liegt UNTER der Strichzeichnung. Weil das PNG reines
   Schwarz auf Weiß ist, lässt "multiply" das Weiß durchsichtig werden —
   dadurch färbt sich das Bild, ohne dass jede Fläche einzeln vorliegen muss. */
.malblatt-farbe {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.5, 0, 0.2, 1);
}

.malblatt.gefuellt .malblatt-farbe {
  clip-path: inset(0 0 0 0);
}

.malblatt-linien {
  position: relative;
  width: 100%;
  mix-blend-mode: multiply;
}

.malblatt figcaption {
  padding: 12px 6px 4px;
  color: var(--tinte-700);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

/* Hinweis unter der Galerie: führt zu den kostenlosen Vorlagen unter
   /ausmalbilder/ (erzeugt von scripts/build-ausmalbilder-seiten.mjs). */
.galerie-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 26px;
  padding: 24px 28px;
  border-radius: var(--radius-m);
  background: var(--creme-100);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.galerie-hinweis p {
  flex: 1 1 320px;
  margin-bottom: 0;
}

.galerie-hinweis strong {
  display: block;
  color: var(--tinte-900);
  font-family: var(--schrift-display);
  font-size: 1.16rem;
  font-weight: 600;
}

.galerie-nachsatz {
  margin: 16px 0 0;
  font-size: 0.92rem;
  text-align: center;
}

.galerie-nachsatz a {
  color: var(--beere-600);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Momente */
.momente-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.moment {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: 36px;
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-weich);
}

.moment::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 26, 31, 0.74), transparent 66%);
}

.moment > * {
  position: relative;
  z-index: 1;
}

.moment h3 {
  max-width: 420px;
  margin-bottom: 8px;
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.moment p {
  max-width: 430px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.moment .moment-symbol {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: auto;
  border-radius: 18px;
  color: var(--tinte-900);
  background: rgba(255, 255, 255, 0.88);
}

.moment--weg {
  background: linear-gradient(145deg, var(--himmel-400), #4b8db7);
}

.moment--daheim {
  background: linear-gradient(145deg, var(--beere-400), #ad5278);
}

.moment .klecks {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 280px;
  height: 280px;
  border-radius: 43% 57% 62% 38% / 52% 42% 58% 48%;
  background: rgba(255, 255, 255, 0.13);
  transform: rotate(20deg);
}

.moment .szene {
  position: absolute;
  top: 46px;
  right: 52px;
  z-index: 0;
  width: 180px;
  height: 180px;
  color: rgba(255, 255, 255, 0.6);
}

/* FAQ */
.faq-raster {
  display: grid;
  grid-template-columns: 0.62fr 1fr;
  align-items: start;
  gap: 70px;
}

.faq-kopf {
  position: sticky;
  top: 118px;
}

.faq-liste {
  border-top: 1px solid rgba(74, 63, 74, 0.15);
}

details {
  border-bottom: 1px solid rgba(74, 63, 74, 0.15);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  color: var(--tinte-900);
  font: 600 1.08rem var(--schrift-display);
  list-style: none;
  cursor: pointer;
}

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

summary .plus {
  position: relative;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--creme-200);
}

summary .plus::before,
summary .plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 99px;
  background: var(--tinte-800);
  transform: translate(-50%, -50%);
  transition: transform 0.2s;
}

summary .plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

details[open] summary .plus::after {
  transform: translate(-50%, -50%) rotate(0);
}

details .antwort {
  max-width: 700px;
  padding: 0 46px 22px 0;
}

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

/* Schluss-Aufruf */
.schluss {
  padding: 40px 0 90px;
}

.schluss-karte {
  position: relative;
  overflow: hidden;
  padding: 82px 30px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #ffd7c0 0%, #f6c3d7 50%, #d1e9f7 100%);
  box-shadow: var(--schatten-weich);
  text-align: center;
}

.schluss-karte::before,
.schluss-karte::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border: 2px dashed rgba(255, 255, 255, 0.65);
  border-radius: 45% 55% 57% 43%;
}

.schluss-karte::before {
  top: -100px;
  left: -120px;
  transform: rotate(20deg);
}

.schluss-karte::after {
  right: -100px;
  bottom: -120px;
  transform: rotate(-25deg);
}

.schluss-karte > * {
  position: relative;
  z-index: 1;
}

.schluss-karte h2 {
  max-width: 780px;
  margin-inline: auto;
}

.schluss-karte p {
  max-width: 600px;
  margin: 0 auto 28px;
  font-size: 1.1rem;
}

/* Fußzeile */
.fusszeile {
  padding: 0 0 40px;
}

.fusszeile-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
  padding-top: 28px;
  border-top: 1px solid rgba(74, 63, 74, 0.13);
}

.fusszeile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--tinte-700);
  font-size: 0.84rem;
  font-weight: 700;
}

.fusszeile-links a:hover {
  color: var(--beere-600);
}

.urheber {
  color: rgba(74, 63, 74, 0.62);
  font-size: 0.78rem;
}

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext {
  padding: 138px 0 var(--luft);
}

.rechtstext .spur {
  max-width: 800px;
}

.rechtstext .karte {
  padding: clamp(26px, 4vw, 48px);
}

.rechtstext h2 {
  margin-top: 40px;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
}

.rechtstext h2:first-of-type {
  margin-top: 0;
}

.rechtstext h3 {
  margin-top: 28px;
  font-size: 1.12rem;
}

.rechtstext p,
.rechtstext li {
  font-size: 0.98rem;
}

.rechtstext ul {
  padding-left: 20px;
}

.rechtstext li {
  margin-bottom: 7px;
}

.rechtstext .stand {
  margin-bottom: 26px;
  color: rgba(74, 63, 74, 0.65);
  font-size: 0.85rem;
}

.rechtstext a {
  color: var(--beere-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--beere-600);
  font-size: 0.9rem;
  font-weight: 800;
}

/* ---------- 4 Bewegung -------------------------------------------------- */

[data-auftritt] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-auftritt].sichtbar {
  opacity: 1;
  transform: none;
}

@keyframes schweben {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-9px) rotate(1deg);
  }
}

@keyframes laufen {
  from {
    transform: translateX(0);
  }
  to {
    /* Die Reihe liegt doppelt im HTML — bei -50 % greift nahtlos die Kopie. */
    transform: translateX(-50%);
  }
}

/* ---------- 5 Mobil ----------------------------------------------------- */

@media (max-width: 1000px) {
  /* Ab Tablett hochkant passt die Linkzeile nicht mehr neben Marke und Knopf.
     Die Links wandern deshalb ins Klappmenü; der Ladeknopf bleibt sichtbar. */
  .menue-knopf {
    display: block;
  }

  .kopf-knopf {
    display: inline-flex;
  }

  #navListe {
    position: absolute;
    top: 76px;
    right: 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 246px;
    padding: 10px;
    border: 1px solid rgba(74, 63, 74, 0.09);
    border-radius: 20px;
    background: rgba(255, 251, 245, 0.98);
    box-shadow: var(--schatten-weich);
  }

  #navListe.offen {
    display: flex;
  }

  #navListe a:not(.knopf) {
    padding: 12px 14px;
  }

  #navListe .knopf {
    display: none;
  }

  .hero {
    padding-top: 128px;
  }

  .hero-raster,
  .demo-raster,
  .eltern-raster {
    grid-template-columns: 1fr;
  }

  .eltern-raster {
    gap: 60px;
  }

  .demo-bahn {
    height: 300vh;
  }

  .demo-buehne {
    padding-top: 80px;
  }

  .demo-blatt {
    order: -1;
    max-width: 460px;
    margin-inline: auto;
  }

  .demo-blatt svg {
    max-height: 44vh;
  }

  .demo-schritte {
    display: none;
  }

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

  .vertrauen-punkt:nth-child(3) {
    border-left: 0;
  }

  .vertrauen-punkt:nth-child(3),
  .vertrauen-punkt:nth-child(4) {
    border-top: 1px solid rgba(74, 63, 74, 0.09);
  }

  .funktion--stift,
  .funktion--sicher,
  .funktion--vorlesen,
  .funktion--haustier {
    grid-column: span 12;
  }

  .funktion--profile,
  .funktion--drucken,
  .funktion--offline {
    grid-column: span 4;
  }

  .preis-raster {
    grid-template-columns: 1fr;
  }

  .faq-raster {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .faq-kopf {
    position: static;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 74px;
  }

  .spur {
    width: min(calc(100% - 28px), var(--breite));
  }

  .kopfzeile {
    padding: 10px 0;
  }

  /* Auf dem Handy ist neben dem Menü-Knopf kein Platz mehr für den Ladeknopf,
     er rutscht deshalb ans Ende des Klappmenüs. */
  .kopf-knopf {
    display: none;
  }

  #navListe {
    top: 68px;
    left: 14px;
  }

  #navListe .knopf {
    display: inline-flex;
    margin-top: 6px;
  }

  .hero {
    padding: 108px 0 56px;
  }

  .hero-rahmen {
    border-width: 6px;
    border-radius: 30px 30px 64px 30px;
  }

  .schwebekarte {
    padding: 9px 12px;
    font-size: 0.74rem;
  }

  .schwebekarte .blase {
    width: 32px;
    height: 32px;
  }

  .schwebekarte--oben {
    top: 16px;
    right: -6px;
  }

  .schwebekarte--unten {
    bottom: 14px;
    left: -6px;
  }

  .vertrauen-raster {
    grid-template-columns: 1fr;
  }

  .vertrauen-punkt + .vertrauen-punkt {
    border-top: 1px solid rgba(74, 63, 74, 0.09);
    border-left: 0;
  }

  .kopf {
    margin-bottom: 34px;
  }

  .demo-bahn {
    height: 260vh;
  }

  .demo-eckchen {
    top: -12px;
    right: -6px;
    padding: 8px 13px;
    font-size: 0.72rem;
  }

  .bento {
    display: block;
  }

  .funktion {
    min-height: 0;
    margin-bottom: 15px;
    padding: 26px;
  }

  /* Auf dem Handy rückt das Zeichenblatt aus der Ecke heraus und stellt sich
     unter den Text. Absolut positioniert läge es sonst darüber — und zwar
     unterschiedlich weit, je nachdem wie viele Zeilen der Absatz gerade
     braucht. */
  .funktion--stift h3,
  .funktion--stift p {
    max-width: none;
  }

  .stift-deko {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 290px);
    margin: 30px auto 0;
  }

  .schritte {
    grid-template-columns: 1fr;
  }

  .schritt::before {
    margin-bottom: 16px;
  }

  .schritt-pfeil {
    display: none;
  }

  .galerie {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .momente-raster {
    grid-template-columns: 1fr;
  }

  .moment {
    min-height: 350px;
    padding: 26px;
  }

  .geraet {
    order: 2;
  }

  .siegel {
    right: -6px;
    width: 98px;
  }

  details .antwort {
    padding-right: 8px;
  }

  .schluss-karte {
    padding: 60px 20px;
    border-radius: 30px;
  }

  .fusszeile-inhalt {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Wer Systemanimationen abgeschaltet hat, bekommt die Seite ruhig — das
   Ausmal-Bild erscheint dann fertig koloriert statt scroll-gesteuert. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-auftritt] {
    opacity: 1;
    transform: none;
  }

  .demo-bahn {
    height: auto;
  }

  .demo-buehne {
    position: static;
    min-height: 0;
    padding: var(--luft) 0;
  }

  .malblatt-farbe {
    clip-path: inset(0 0 0 0);
  }
}

@media print {
  .kopfzeile,
  .mal-hintergrund,
  .laufband,
  .schluss {
    display: none;
  }

  body {
    background: #fff;
  }
}