/* ============================================================
   Montessori-Schule Münster — Relaunch v3
   Pure HTML/CSS — keine Frameworks, keine Build-Step.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Papier & Tinte */
  --background:  hsl(42 38% 96%);
  --paper:       hsl(40 45% 94%);
  --paper-deep:  hsl(36 30% 88%);
  --paper-card:  hsl(42 45% 97%);
  --ink:         hsl(25 25% 12%);
  --ink-soft:    hsl(28 15% 32%);
  --ink-muted:   hsl(28 15% 48%);

  /* Montessori-Perlen */
  --bead-rose:     hsl(350 75% 78%);
  --bead-yellow:   hsl(45 92% 65%);
  --bead-mint:     hsl(165 55% 70%);
  --bead-lavender: hsl(270 45% 75%);
  --bead-coral:    hsl(12 80% 68%);
  --bead-sky:      hsl(200 70% 70%);
  --bead-gold:     hsl(38 70% 60%);
  --bead-leaf:     hsl(145 40% 50%);

  /* Semantik */
  --primary:   hsl(12 75% 55%);    /* Korallrot */
  --secondary: hsl(200 65% 45%);   /* Tafelblau */
  --accent:    hsl(45 92% 60%);    /* Sonnengelb */
  --sage:      hsl(140 22% 55%);   /* Salbei */
  --sage-dark: hsl(140 28% 36%);   /* Salbei dunkel */

  /* Schriften */
  --font-hand:    'Caveat', 'Patrick Hand', cursive;
  --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
  --font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;

  /* Schatten */
  --shadow-sketch:  6px 7px 0 hsl(25 25% 12% / 0.88);
  --shadow-sketch-sm: 3px 4px 0 hsl(25 25% 12% / 0.85);
  --shadow-card:    0 8px 24px -10px hsl(25 25% 12% / 0.25), 0 2px 4px hsl(25 25% 12% / 0.06);
  --shadow-polaroid:0 12px 30px -12px hsl(25 25% 12% / 0.35), 0 3px 6px hsl(25 25% 12% / 0.1);
  --shadow-tape:    0 2px 4px hsl(25 25% 12% / 0.15);

  /* Layout */
  --container-max: 1200px;
  --radius: 1.25rem;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink-soft);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Papier-Dots als Textur */
  background-image:
    radial-gradient(hsl(25 25% 12% / 0.035) 1px, transparent 1px),
    radial-gradient(hsl(25 25% 12% / 0.025) 1px, transparent 1px);
  background-size: 28px 28px, 17px 17px;
  background-position: 0 0, 14px 9px;
}

/* Papier-Rauschen — SVG fractalNoise als feines Overlay.
   Performance-Fix: kein mix-blend-mode (sehr teuer auf alten GPUs),
   statt dessen dezente opacity. Auf Mobile komplett aus, dort reicht das Dot-Grid als Textur. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (max-width: 720px) {
  body::before { display: none; }
}

h1, h2, h3, h4 {
  font-family: 'Caveat', 'Patrick Hand', cursive;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.4em;
  line-height: 1.04;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: hsl(45 92% 60% / 0.6); color: var(--ink); }

/* ---------- Utilities ---------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

.font-display { font-family: 'Caveat', cursive; font-weight: 700; }
.font-hand    { font-family: 'Patrick Hand', 'Caveat', cursive; }
.font-body    { font-family: 'Nunito', sans-serif; }

.text-ink      { color: var(--ink); }
.text-soft     { color: var(--ink-soft); }
.text-primary  { color: var(--primary); }
.text-secondary{ color: var(--secondary); }

.eyebrow {
  font-family: 'Patrick Hand', cursive;
  color: var(--secondary);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  display: block;
}

.section { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.section--deep { background: var(--paper-deep); }

.squiggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8' fill='none'><path d='M0 4 Q 10 0 20 4 T 40 4 T 60 4 T 80 4' stroke='%23d96a3a' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 80px 8px;
  padding-bottom: 6px;
}

.underline-wavy { text-decoration: underline wavy var(--primary); text-underline-offset: 4px; }

/* Textmarker — gelbes, leicht gedrehtes Rechteck hinter einem Wort */
.marker {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  isolation: isolate;
}
.marker::after {
  content: '';
  position: absolute;
  left: -5%; right: -5%;
  top: 28%;
  height: 0.75em;
  background: hsl(45 92% 70%);
  z-index: -1;
  border-radius: 3px;
  /* Initial: nicht gezeichnet, Breite 0, Startpunkt links */
  transform: scaleX(0) rotate(-1.5deg);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.55, 0, 0.2, 1);
}
/* Beim Reveal des umgebenden .reveal-Blocks wird der Marker "gezeichnet" */
.reveal.is-visible .marker::after {
  transform: scaleX(1) rotate(-1.5deg);
  transition-delay: 0.7s;
}
@media (prefers-reduced-motion: reduce) {
  .marker::after { transform: scaleX(1) rotate(-1.5deg); transition: none; }
}

/* Kicker — Eyebrow-Variante mit gedrehter Handschrift, Kapitel-Nummer vorn */
.eyebrow.eyebrow--num {
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--sage-dark);
  transform: rotate(-2deg);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

/* Section-Lede — literarische Sub-Lede in Serif-Italic */
.section-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Logbuch — liniertes Papier-Aside für Pädagogik-Section */
.logbuch {
  position: relative;
  transform: rotate(1.6deg);
  max-width: 440px;
  margin: 0 auto;
  filter: drop-shadow(0 18px 30px hsl(25 25% 12% / 0.18));
}
.logbuch__page {
  background: hsl(42 55% 97%);
  padding: 30px 28px 24px 58px;
  position: relative;
  border-radius: 2px;
  /* Linierung (hellblau) + roter Randstrich links */
  background-image:
    linear-gradient(90deg, transparent 44px, hsl(12 65% 58% / 0.55) 44px, hsl(12 65% 58% / 0.55) 45px, transparent 45px),
    repeating-linear-gradient(hsl(42 55% 97%) 0px, hsl(42 55% 97%) 29px, hsl(200 45% 68% / 0.38) 30px);
  background-position: 0 0, 0 18px;
  box-shadow: 6px 7px 0 hsl(25 25% 12% / 0.12), 0 3px 8px hsl(25 25% 12% / 0.06);
}
/* Lochrand — 3 Ringbuch-Löcher */
.logbuch__page::before {
  content: '';
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 78%;
  background-image: radial-gradient(circle, hsl(25 25% 12% / 0.18) 4px, transparent 5px);
  background-size: 12px 33%;
  background-repeat: repeat-y;
}
.logbuch__date {
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--sage-dark);
  margin-bottom: 12px;
  line-height: 30px;
}
.logbuch__entries {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.logbuch__entry {
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 30px;
  color: var(--ink);
  padding-left: 26px;
  position: relative;
  letter-spacing: 0.01em;
}
.logbuch__entry::before {
  position: absolute;
  left: -2px;
  top: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 30px;
}
.logbuch__entry--done              { text-decoration: line-through; text-decoration-color: hsl(140 28% 40% / 0.6); color: var(--ink-soft); }
.logbuch__entry--done::before      { content: '✓'; color: var(--sage-dark); }
.logbuch__entry--todo::before      { content: '→'; color: var(--primary); }
.logbuch__entry--heart::before     { content: '♥'; color: hsl(350 70% 58%); font-size: 18px; top: 2px; }
.logbuch__entry--note              { color: var(--ink-muted); font-style: italic; }
.logbuch__entry--note::before      { content: '~'; color: var(--ink-muted); }
.logbuch__sign {
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--ink-soft);
  text-align: right;
  line-height: 30px;
  padding-right: 4px;
}

/* Leere Logbuch-Variante (ohne fiktive Einträge) */
.logbuch__page--empty {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logbuch__placeholder {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-muted);
  text-align: center;
  font-style: italic;
  line-height: 1.6;
  padding: 0 24px;
}

.logbuch-block { margin-top: 72px; }
.logbuch-block .grid-2 { align-items: center; }
@media (max-width: 820px) {
  .logbuch { transform: rotate(1deg); margin-top: 24px; }
}

/* Kooperationspartner — staffed fly-in aus wechselnden Richtungen */
.partners {
  position: relative;
  overflow: hidden;
}
.partners__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.partners__kicker {
  font-family: var(--font-hand);
  color: var(--sage-dark);
  font-size: 1.4rem;
  transform: rotate(-1.5deg);
  display: inline-block;
  margin-bottom: 8px;
}
/* Gruppen-Label (Partner / Auszeichnungen) */
.partners__group-label {
  font-family: var(--font-hand);
  font-size: 1.8rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 40px 0 20px;
  position: relative;
  display: block;
}
.partners__group-label::before,
.partners__group-label::after {
  content: '';
  display: inline-block;
  width: 60px;
  height: 1px;
  border-top: 1px dashed hsl(25 25% 12% / 0.25);
  vertical-align: middle;
  margin: 0 14px 8px;
}

.partners__grid {
  display: grid;
  gap: 28px 24px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 12px;
}
.partners__grid--partner {
  grid-template-columns: repeat(3, minmax(140px, 200px));
  max-width: 720px;
  justify-content: center;
}
.partners__grid--awards {
  grid-template-columns: repeat(4, 1fr);
  max-width: 920px;
}
@media (max-width: 900px) {
  .partners__grid { gap: 24px 20px; }
  .partners__grid--partner { grid-template-columns: repeat(3, 1fr); }
  .partners__grid--awards  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .partners__grid--partner { grid-template-columns: repeat(2, 1fr); }
  .partners__grid--awards  { grid-template-columns: repeat(2, 1fr); }
}
.partner-card {
  position: relative;
  background: var(--paper-card);
  border: 1.5px solid hsl(25 25% 12% / 0.85);
  border-radius: 14px 10px 16px 8px / 10px 14px 8px 16px;
  box-shadow: var(--shadow-sketch-sm);
  padding: 20px 16px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Initial-Zustand für Fly-in: außerhalb, gedreht, unsichtbar */
  opacity: 0;
  /* Kurze Basis-Transition für Hover-Interaktionen (Fly-in läuft separat als @keyframes) */
  transition:
    transform 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo);
  will-change: transform, opacity;
}
.partner-card img {
  max-width: 100%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: contrast(0.96);
}
.partner-card::before {
  /* Tape */
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 56px;
  height: 14px;
  background: hsl(45 92% 72% / 0.85);
  background-image: repeating-linear-gradient(90deg,
    hsl(45 92% 72% / 0.85) 0 10px,
    hsl(45 92% 65% / 0.55) 10px 12px);
  box-shadow: var(--shadow-tape);
  border-radius: 1px;
}
.partner-card:hover,
.partner-card:focus-within {
  transform: translate(0,0) rotate(0deg) scale(1.45) !important;
  box-shadow:
    0 18px 36px hsl(25 25% 12% / 0.22),
    6px 9px 0 hsl(25 25% 12% / 0.12);
  z-index: 5;
}
.partner-card:hover img,
.partner-card:focus-within img {
  filter: contrast(1);
}

/* Richtungen (initial) — fünf Varianten im Wechsel für interessantere Choreografie */
.partner-card[data-fly="L"]  { transform: translate(-120%, 20%)  rotate(-14deg); }
.partner-card[data-fly="R"]  { transform: translate(120%, -15%)  rotate(12deg); }
.partner-card[data-fly="TL"] { transform: translate(-80%, -100%) rotate(-20deg); }
.partner-card[data-fly="TR"] { transform: translate(80%, -100%)  rotate(18deg); }
.partner-card[data-fly="B"]  { transform: translate(0, 120%)     rotate(-6deg); }

/* Ziel-Zustand, wenn die Section "is-visible" hat — als einmalige Animation (entkoppelt von Hover-Transitions) */
.partners.is-visible .partner-card {
  animation: partner-fly-in 0.9s var(--ease-out-expo) both;
}
@keyframes partner-fly-in {
  to {
    opacity: 1;
    transform: translate(0,0) rotate(var(--rest-rot, -1.2deg));
  }
}

/* Nach Animation-End: stabiler Zustand ohne Animation — Hover-Transition greift jetzt sauber.
   Spezifität muss die .partners.is-visible .partner-card Regel überschreiben. */
.partners.is-visible .partner-card.flown {
  animation: none;
  opacity: 1;
  transform: translate(0,0) rotate(var(--rest-rot, -1.2deg));
}

/* Leichte Rest-Rotationen für Papier-Wackel-Optik */
.partner-card:nth-child(1) { --rest-rot:  -2deg; }
.partner-card:nth-child(2) { --rest-rot:   1.4deg; }
.partner-card:nth-child(3) { --rest-rot:  -0.8deg; }
.partner-card:nth-child(4) { --rest-rot:   2deg; }
.partner-card:nth-child(5) { --rest-rot:  -1.5deg; }
.partner-card:nth-child(6) { --rest-rot:   1deg; }
.partner-card:nth-child(7) { --rest-rot:  -2.2deg; }
.partner-card:nth-child(8) { --rest-rot:   0.8deg; }
.partner-card:nth-child(9) { --rest-rot:  -1.6deg; }
.partner-card:nth-child(10){ --rest-rot:   1.8deg; }

/* Staggered Fly-in-Verzögerung */
.partners.is-visible .partner-card:nth-child(1) { animation-delay: 60ms; }
.partners.is-visible .partner-card:nth-child(2) { animation-delay: 160ms; }
.partners.is-visible .partner-card:nth-child(3) { animation-delay: 120ms; }
.partners.is-visible .partner-card:nth-child(4) { animation-delay: 240ms; }
.partners.is-visible .partner-card:nth-child(5) { animation-delay: 180ms; }
.partners.is-visible .partner-card:nth-child(6) { animation-delay: 320ms; }
.partners.is-visible .partner-card:nth-child(7) { animation-delay: 280ms; }
.partners.is-visible .partner-card:nth-child(8) { animation-delay: 400ms; }
.partners.is-visible .partner-card:nth-child(9) { animation-delay: 360ms; }
.partners.is-visible .partner-card:nth-child(10){ animation-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  .partner-card { animation: none !important; transform: none !important; opacity: 1; }
}

/* Mitmachen-Sektionen (Stellen + Freunde & Förderer) — kompakte Teaser mit 3 Cards */
.mitmachen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 820px) {
  .mitmachen-grid { grid-template-columns: 1fr; gap: 20px; }
}
.mitmachen-card {
  background: var(--paper-card);
  border: 1.5px solid hsl(25 25% 12% / 0.85);
  border-radius: 18px 12px 20px 10px / 12px 18px 10px 20px;
  box-shadow: var(--shadow-sketch-sm);
  padding: 24px 22px 22px;
  position: relative;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.mitmachen-card:hover {
  transform: translateY(-3px) rotate(0deg);
  box-shadow: 6px 9px 0 hsl(25 25% 12% / 0.12);
}
.mitmachen-card:nth-child(1) { transform: rotate(-0.8deg); }
.mitmachen-card:nth-child(2) { transform: rotate(0.6deg); }
.mitmachen-card:nth-child(3) { transform: rotate(-0.4deg); }
.mitmachen-card__bead {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  margin-bottom: 14px;
}
.mitmachen-card h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  margin-bottom: 10px;
}
.mitmachen-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.mitmachen-card .status {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 16px;
  color: var(--sage-dark);
  margin-bottom: 8px;
}
.mitmachen-card .status--offen { color: var(--primary); }
.mitmachen-card .card-link {
  font-size: 14px;
}

/* Einladung-Closer — letzte Sektion vor dem Footer, statt harter CTA */
.einladung {
  padding: clamp(80px, 10vw, 140px) 0 clamp(100px, 12vw, 160px);
  text-align: center;
  background: var(--paper-deep);
  border-top: 1px dashed hsl(25 25% 12% / 0.25);
  position: relative;
  overflow: hidden;
}
.einladung .doodle-heart {
  position: absolute;
  top: 44px; left: 18%;
  width: 44px; height: 40px;
  transform: rotate(-20deg);
  opacity: 0.75;
  pointer-events: none;
}
.einladung .doodle-star {
  position: absolute;
  top: 58px; right: 20%;
  width: 54px; height: 54px;
  transform: rotate(15deg);
  opacity: 0.8;
  pointer-events: none;
}
.einladung__text {
  font-family: 'Caveat', 'Patrick Hand', cursive;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 auto 22px;
  max-width: 22ch;
  text-wrap: balance;
}
.einladung__text em {
  font-style: normal;
  color: var(--primary);
}
.einladung__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 auto;
}
.einladung__sub a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--bead-gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.einladung__sub a:hover {
  text-decoration-color: var(--primary);
}

/* Headline-Größen */
h1, .h1 { font-size: clamp(44px, 7vw, 108px); }
h2, .h2 { font-size: clamp(36px, 5vw, 72px); }
h3, .h3 { font-size: clamp(22px, 2.5vw, 36px); }
h4, .h4 { font-size: clamp(18px, 1.5vw, 22px); }

/* ---------- Karten ---------- */
.paper-card {
  background: var(--paper-card);
  border: 1.5px solid hsl(25 25% 12% / 0.85);
  border-radius: 20px 14px 22px 12px / 14px 20px 12px 22px;
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 2.5vw, 32px);
  position: relative;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
}
.paper-card:hover { transform: translateY(-3px) rotate(0deg); box-shadow: 0 16px 36px hsl(25 25% 12% / 0.12); }

.sketch-border {
  border: 2.5px solid var(--ink);
  border-radius: 24px 18px 26px 16px / 18px 24px 16px 26px;
  box-shadow: var(--shadow-sketch);
}

/* Polaroid */
.polaroid {
  background: hsl(40 50% 98%);
  padding: 14px 14px 58px;
  box-shadow: var(--shadow-polaroid);
  /* Kein border — der verursacht die stufigen Kanten bei Rotation. Stattdessen outline. */
  position: relative;
  display: inline-block;
  max-width: 420px;
  /* Minimaler border-radius verschluckt den Treppenstufeneffekt an Ecken */
  border-radius: 2px;
  /* Hardware-Acceleration erzwingen */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  isolation: isolate;
  /* filter: blur(0) zwingt separaten Compositing-Layer mit AA */
  filter: drop-shadow(0 0 0 transparent);
}
/* Kantenmaske: ein Pseudo-Element mit identischem Hintergrund + minimalem Blur */
.polaroid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: hsl(40 50% 98%);
  border-radius: inherit;
  filter: blur(0.5px);
  z-index: -1;
}
.polaroid img,
.polaroid video {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; max-width: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Parent des Polaroid: perspective triggert 3D-Kontext → smoothere Rotation */
.hero__visual, .polaroid-wrap { perspective: 1200px; }

/* Video-Polaroid: Aspect-Ratio passend zum Video (1610x1286 ≈ 1.25/1) */
.polaroid--video { max-width: 460px; }
.polaroid--video video { aspect-ratio: 1.25 / 1; }
.polaroid__caption {
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.25rem;
  color: var(--ink);
}

/* Klebeband */
.tape {
  position: absolute;
  background: hsl(45 92% 60% / 0.55);
  border: 1px dashed hsl(25 25% 12% / 0.2);
  box-shadow: var(--shadow-tape);
  width: 96px; height: 24px;
  top: -10px; left: 30%;
  transform: rotate(-6deg);
  z-index: 2;
}

/* Bead */
.bead {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.bead-dot {
  display: inline-block;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

/* Perlenkette horizontaler Divider */
.pearl-chain {
  display: flex; justify-content: center; align-items: center;
  gap: 6px;
  padding: 24px 0;
}
.pearl-chain .bead:nth-child(3n+1) { width: 22px; height: 22px; }

/* ---------- Tilts (mit translateZ für Hardware-AA bei Rotationen) ---------- */
.tilt-1 { transform: rotate(-1.5deg) translateZ(0); }
.tilt-2 { transform: rotate(2deg)    translateZ(0); }
.tilt-3 { transform: rotate(-3deg)   translateZ(0); }

/* ---------- Animationen ---------- */
@keyframes wobble {
  0%,100% { transform: rotate(0); }
  25%     { transform: rotate(-3deg) scale(1.03); }
  75%     { transform: rotate(3deg) scale(1.03); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes sway {
  0%,100% { transform: rotate(-2deg); }
  50%     { transform: rotate(2deg); }
}

.wobble:hover { animation: wobble 0.6s ease-in-out; }
.float   { animation: float 6s ease-in-out infinite; }
.sway    { animation: sway 8s ease-in-out infinite; transform-origin: top center; }

/* Scroll-Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
  transition-delay: var(--stagger, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Ken-Burns: sehr langsamer Zoom + Drift auf Fotos */
@keyframes ken-burns {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1%, 0.5%); }
  100% { transform: scale(1.02) translate(0.8%, -0.8%); }
}
.polaroid img {
  animation: ken-burns 24s ease-in-out infinite alternate;
  will-change: transform;
}

/* Handgezeichneter Kreis mit Draw-on-Animation */
.circle-draw { position: relative; display: inline-block; }
.circle-draw .hand-circle {
  position: absolute;
  left: -12%; top: -34%;
  width: 144%; height: 174%;
  pointer-events: none;
  overflow: visible;
}
.circle-draw .hand-circle path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-on 1.6s 0.9s var(--ease-out-expo) forwards;
}
@keyframes draw-on {
  to { stroke-dashoffset: 0; }
}

/* Hover-Scale subtil für Karten */
.paper-card:hover { transform: scale(1.02) rotate(0) !important; }

/* Scroll-Progress Perlenkette oben */
.scroll-progress {
  position: fixed;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  z-index: 100;
  pointer-events: none;
}
.scroll-progress span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: hsl(25 25% 12% / 0.14);
  transition: background 0.4s var(--ease-out-expo), transform 0.3s;
}
.scroll-progress span.active { transform: scale(1.15); }

/* Mouse-Parallax — translate separat von transform (damit Float/Sway weiterlaufen) */
.doodle {
  will-change: transform, translate;
  translate: var(--px, 0) var(--py, 0);
  transition: translate 0.3s var(--ease-out-expo);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .polaroid img { animation: none; }
  .circle-draw .hand-circle path { stroke-dashoffset: 0 !important; animation: none !important; }
  .scroll-progress { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: hsl(40 45% 94% / 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid hsl(25 25% 12% / 0.12);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 0;
}
/* Logo ragt spielerisch unter den Header heraus, ohne die Header-Höhe zu vergrößern.
   Trick: das <a> bleibt schmal im Flex-Layout, das <img> sitzt absolute und ragt raus. */
.logo {
  display: inline-block;
  position: relative;
  color: var(--ink);
  /* Schmal im Flex — diktiert nicht die Header-Höhe */
  width: clamp(120px, 12vw, 170px);
  height: 44px;
  flex-shrink: 0;
}
.logo img {
  position: absolute;
  left: 0; top: 50%;
  height: clamp(120px, 13vw, 190px);
  width: auto; max-width: none; display: block;
  transform-origin: center left;
  transform: translateY(-50%) translateY(32px) rotate(-2.5deg);
  transition: transform 0.4s var(--ease-out-expo);
  filter: drop-shadow(2px 4px 6px hsl(25 25% 12% / 0.18));
  z-index: 2;
}
.logo:hover img {
  transform: translateY(-50%) translateY(32px) rotate(-5deg) scale(1.05);
}
.nav { display: flex; gap: 4px; flex: 1; justify-content: center; font-family: 'Patrick Hand', cursive; font-size: 18px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  background: transparent;
  border: none;
  font: inherit;
}
.nav__link:hover, .nav__item.is-open .nav__link { background: hsl(25 25% 12% / 0.07); color: var(--ink); }
.nav__submenu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px;
  background: var(--paper-card);
  border: 1.5px solid hsl(25 25% 12% / 0.2);
  border-radius: 20px 14px 22px 12px / 14px 20px 12px 22px;
  box-shadow: var(--shadow-card);
  padding: 10px;
  display: none;
  z-index: 60;
}
/* Unsichtbare Brücke zwischen Link und Submenu, damit die 6px-Lücke
   den Hover-Bereich nicht unterbricht. */
.nav__item.is-open::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 59;
}
.nav__item.is-open .nav__submenu { display: block; }
.nav__sublink {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
}
.nav__sublink:hover { background: hsl(45 92% 60% / 0.3); color: var(--ink); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid hsl(25 25% 12% / 0.3);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
@media (max-width: 1020px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header.mobile-open .nav {
    display: flex; flex-direction: column; padding: 16px 0; border-top: 1px solid hsl(25 25% 12% / 0.12);
  }
  .site-header.mobile-open .nav__item { width: 100%; }
  .site-header.mobile-open .nav__link { width: 100%; justify-content: flex-start; font-size: 22px; padding: 12px 0; }
  .site-header.mobile-open .nav__submenu { position: static; display: block; box-shadow: none; border: none; background: transparent; padding-left: 18px; }
  .site-header.mobile-open .nav__sublink { font-size: 17px; }
}

/* ---------- Hero ---------- */
/* Pin-Wrapper: Explizite Höhe schafft Scroll-Strecke, während das Hero sticky bleibt.
   Der Scroll-Bereich dieses Wrappers wird für den Video-Scrub genutzt.
   (Wichtig: explizite height, kein padding-bottom — sonst greift sticky in Chrome nicht.) */
.hero-pin {
  position: relative;
  /* 1x Hero-Viewport + 1x Extra-Scroll für Video-Scrub */
  height: 200vh;
}
.hero {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px) 0;
  overflow: hidden;
  background: var(--background);
}
.hero > .container { flex: 0 0 auto; }
.hero > .pearl-chain { flex: 0 0 auto; margin-top: clamp(16px, 3vw, 32px); }

@media (prefers-reduced-motion: reduce) {
  .hero-pin { height: auto; }
  .hero { position: static; min-height: 0; display: block; }
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}
.hero__claim {
  font-family: 'Patrick Hand', cursive;
  color: var(--secondary);
  font-size: clamp(20px, 1.6vw, 24px);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.hero__title { font-size: clamp(52px, 9vw, 128px); margin-bottom: 24px; line-height: 0.95; }
.hero__title .sq { position: relative; display: inline-block; }
.hero__title .sq svg { position: absolute; bottom: -8px; left: 0; width: 100%; height: 12px; pointer-events: none; }

.hero__lede {
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.45vw, 23px);
  max-width: 560px;
  letter-spacing: -0.005em;
  /* Extra Abstand nach oben, damit der gezeichnete Kreis um „Kind" den Text nicht überlappt */
  margin-top: clamp(24px, 3vw, 48px);
  margin-bottom: 20px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.hero__lede strong { color: var(--ink); }
.hero__lede-heart {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 6px;
}
.hero__note { font-family: 'Patrick Hand', cursive; font-size: 17px; max-width: 560px; color: var(--ink-soft); }

.hero__visual { position: relative; min-height: 480px; }
.hero__visual .giraffe-wrap {
  position: absolute; top: 20px; right: -60px; width: clamp(160px, 18vw, 220px);
  z-index: 1;                       /* hinter dem Polaroid */
  animation: giraffe-walk 9s ease-in-out infinite;
  transform-origin: 30% 85%;
}
.hero__visual .polaroid-wrap {
  z-index: 2;                       /* Polaroid davor */
}

/* Giraffe wandert hinter dem Polaroid hervor und zurück — meist gut sichtbar */
@keyframes giraffe-walk {
  0%, 100% { transform: translateX(0)    rotate(-2deg); }
  25%      { transform: translateX(20px) rotate(4deg); }
  50%      { transform: translateX(50px) rotate(9deg); }    /* weit rechts raus */
  70%      { transform: translateX(30px) rotate(5deg); }
  85%      { transform: translateX(10px) rotate(1deg); }
}
.hero__visual .polaroid-wrap {
  position: absolute; top: 120px; left: 0;
}
.hero__visual .sparkle-bottom {
  position: absolute; bottom: 4px; right: 30px; width: 40px; color: var(--accent);
}

/* Hero doodles */
.hero .doodle { position: absolute; z-index: 1; pointer-events: none; }
.hero .d-sun   { top: 30px; right: 8%; width: clamp(80px, 8vw, 112px); }
.hero .d-cloud1{ top: 90px; left: 6%; width: clamp(112px, 10vw, 144px); opacity: 0.85; }
.hero .d-cloud2{ top: 170px; right: 36%; width: 96px; opacity: 0.6; }
.hero .d-star  { top: 70px; left: 35%; width: 26px; }
.hero .d-sparkle1 { top: 140px; right: 28%; width: 32px; color: var(--primary); }

/* ---------- Grid-Helpers ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ===========================================================
   Wegweiser — Holzpfosten mit Schildern
   Pfosten in der Mitte, Schilder hängen abwechselnd links/rechts.
   Beim Reveal "nageln" sich die Schilder nacheinander an.
   =========================================================== */

/* Pin-Wrapper: gibt extra Scroll-Distanz, in der Section sticky bleibt */
.wegweiser-pin {
  position: relative;
  /* height wird per JS gesetzt: section-height + ~120vh Scrub */
}
.wegweiser-section {
  position: sticky;
  top: 0;
  overflow: hidden;
  background: var(--background);            /* gleiche helle Cremefarbe wie der Body */
  /* Kompaktere Padding, damit die Section in übliche Viewports passt */
  padding-top: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(32px, 4vw, 64px);
}
.wegweiser-section > .container > .reveal:first-child {
  /* Header-Margin kompakter auf diesem Screen */
  margin-bottom: clamp(24px, 4vw, 48px) !important;
}
/* Ohne JS / Reduced-Motion: kein Pin */
@media (prefers-reduced-motion: reduce) {
  .wegweiser-pin { height: auto !important; }
  .wegweiser-section { position: relative; }
}
/* Wenn JS läuft, Pin aktiv → CSS-Keyframe-Animation der Schilder ausblenden,
   weil JS via Web Animations API steuert */
.signpost.is-pinned.is-visible .sign--right,
.signpost.is-pinned.is-visible .sign--left {
  animation: none !important;
}
.wegweiser-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
  filter: brightness(1.15) saturate(0.88);
  pointer-events: none;
  /* Weiche Verblendung NUR oben/unten — Seiten bleiben hart */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
          mask-image:
    linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
}
.wegweiser-bg-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Innere Aufhellung Mitte — Text bleibt lesbar */
    radial-gradient(ellipse 60% 50% at 50% 50%,
      hsl(42 38% 98% / 0.20) 0%,
      transparent 70%),
    /* Vertikales Fade oben/unten gegen helle Section-Bg */
    linear-gradient(180deg,
      var(--background) 0%,
      hsl(42 38% 96% / 0) 14%,
      hsl(42 38% 96% / 0) 86%,
      var(--background) 100%);
  pointer-events: none;
}
.wegweiser-section > .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce),
       (max-width: 720px) {
  .wegweiser-bg { display: none; }
}

.signpost {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 0 60px;
  /* Höhe als Custom-Property, damit die Row-Tops daraus berechnet werden können */
  --signpost-h: clamp(680px, 75vh, 1100px);
  height: var(--signpost-h);
}

/* ---------- Pfosten (verwittertes Altholz) ---------- */
.signpost__post {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;                    /* schwebt — kein Boden mehr */
  width: 42px;
  transform: translateX(-50%) rotate(-1.6deg);
  transform-origin: bottom center;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
/* Spitze — abgenutzt, leicht schief */
.signpost__cap {
  width: 0; height: 0;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 18px solid hsl(28 12% 24%);
  margin: 0 auto -1px;
  transform: skewX(-3deg);
}
/* Stamm: Grundfarbe + Maserung + Astlöcher + Risse */
.signpost__shaft {
  position: relative;
  flex: 1;
  background:
    /* Astlöcher (knots) — runde dunkle Flecken */
    radial-gradient(ellipse 8px 13px at 60% 14%,
      hsl(20 30% 12%) 0%,
      hsl(20 25% 18%) 35%,
      hsla(20 18% 30% / 0.6) 65%,
      transparent 80%),
    radial-gradient(ellipse 6px 9px at 30% 38%,
      hsl(20 28% 14%) 0%,
      hsl(20 22% 22%) 50%,
      transparent 75%),
    radial-gradient(ellipse 9px 14px at 70% 62%,
      hsl(20 32% 11%) 0%,
      hsl(20 24% 20%) 40%,
      hsla(20 18% 28% / 0.5) 70%,
      transparent 85%),
    radial-gradient(ellipse 5px 8px at 40% 86%,
      hsl(20 28% 14%) 0%,
      transparent 75%),
    /* Vertikale Risse/Splits */
    linear-gradient(90deg,
      transparent 22%,
      hsla(15 25% 8% / 0.5) 23%,
      hsla(15 25% 8% / 0.5) 23.6%,
      transparent 24%,
      transparent 71%,
      hsla(15 25% 8% / 0.4) 72%,
      hsla(15 25% 8% / 0.4) 72.5%,
      transparent 73%),
    /* Maserungslinien — feine horizontale Streifen */
    repeating-linear-gradient(0deg,
      transparent 0 17px,
      hsla(15 25% 8% / 0.15) 17px 18px,
      transparent 18px 41px,
      hsla(15 25% 8% / 0.08) 41px 42px,
      transparent 42px 73px,
      hsla(40 35% 70% / 0.06) 73px 74px,
      transparent 74px 109px,
      hsla(15 25% 8% / 0.10) 109px 110px),
    /* Grundfarbe: verwittertes Grau-Braun mit leichter Tonierung */
    linear-gradient(94deg,
      hsl(28 10% 22%) 0%,
      hsl(30 14% 36%) 18%,
      hsl(32 16% 44%) 38%,
      hsl(30 12% 40%) 58%,
      hsl(28 10% 32%) 78%,
      hsl(25 12% 24%) 100%);
  box-shadow:
    inset 0 0 0 1px hsla(15 25% 6% / 0.55),
    inset 1px 0 0 hsla(40 30% 70% / 0.12),
    inset -1px 0 0 hsla(15 25% 6% / 0.4);
}
/* Schild-Schatten unten/außen ebenfalls deutlich reduzieren — alles soll schweben */
.sign__face {
  /* Ersetze ggf. später schwere Schatten — siehe Override unten */
}
/* Zweiter Riss-Layer als Pseudo — diagonal/kürzer für mehr Chaos */
.signpost__shaft::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(91deg,
      transparent 47%,
      hsla(15 25% 8% / 0.45) 48%,
      hsla(15 25% 8% / 0.45) 48.5%,
      transparent 49%);
  /* Riss verläuft nur über die obere Hälfte */
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 42%, transparent 50%);
          mask-image: linear-gradient(180deg, black 0%, black 42%, transparent 50%);
  pointer-events: none;
}
/* Kratzer/Verwitterung als Pseudo am unteren Drittel */
.signpost__shaft::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(96deg,
      transparent 0 4px,
      hsla(15 25% 8% / 0.05) 4px 5px,
      transparent 5px 11px),
    radial-gradient(ellipse 80% 30px at 50% 100%,
      hsla(15 25% 6% / 0.55) 0%,
      transparent 70%);
  pointer-events: none;
}

/* Erde + Gras komplett aus — Pfosten schwebt */
.signpost__ground { display: none; }

/* ---------- Schilder-Liste ---------- */
.signpost__signs {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.sign {
  position: absolute;
  /* Skaliert auf Mobile runter bis 175px, auf Desktop bis 380px */
  width: clamp(175px, 42vw, 380px);
  opacity: 0;                                 /* Initial — wird per Animation eingeblendet */
  will-change: transform, opacity;
}
.sign--right {
  left: 50%;
  margin-left: -10px;                          /* leicht über Pfosten ragen */
  transform-origin: 0% 50%;                    /* Hinge am Pfosten */
  transform: rotate(-22deg);
}
.sign--left {
  right: 50%;
  margin-right: -10px;
  transform-origin: 100% 50%;
  transform: rotate(22deg);
}
/* Row-Tops berechnet aus --signpost-h (via calc, weil Prozente auf top
   sich auf containing-block-height beziehen — die ul hat keine eigene Höhe) */
.sign[data-row="1"] { top: calc(var(--signpost-h, 1230px) * 0.016); }
.sign[data-row="2"] { top: calc(var(--signpost-h, 1230px) * 0.138); }
.sign[data-row="3"] { top: calc(var(--signpost-h, 1230px) * 0.260); }
.sign[data-row="4"] { top: calc(var(--signpost-h, 1230px) * 0.382); }
.sign[data-row="5"] { top: calc(var(--signpost-h, 1230px) * 0.504); }
.sign[data-row="6"] { top: calc(var(--signpost-h, 1230px) * 0.626); }
/* Falling-Schilder: pivotieren um den OBEREN Nagel auf der Pfostenseite */
.sign--falls.sign--right {
  transform-origin: 9px 8px !important;             /* oberer Nagel links */
}
.sign--falls.sign--left {
  transform-origin: calc(100% - 9px) 8px !important; /* oberer Nagel rechts */
}
.sign--falls .nail--bottom {
  transform-origin: center;
}

/* ---------- Schild-Fläche (Altholz, gleicher Stil wie Pfosten, etwas heller) ---------- */
.sign__face {
  position: relative;
  display: block;
  padding: 18px 38px 18px 30px;
  text-decoration: none;
  background:
    /* kleines Astloch */
    radial-gradient(ellipse 7px 5px at 88% 30%,
      hsl(20 30% 14%) 0%,
      hsl(20 22% 24%) 50%,
      transparent 80%),
    radial-gradient(ellipse 5px 4px at 22% 78%,
      hsl(20 28% 16%) 0%,
      transparent 75%),
    /* horizontale Maserung */
    repeating-linear-gradient(94deg,
      transparent 0 14px,
      hsla(15 25% 8% / 0.13) 14px 15px,
      transparent 15px 38px,
      hsla(15 25% 8% / 0.07) 38px 39px,
      transparent 39px 71px,
      hsla(40 35% 80% / 0.07) 71px 72px),
    /* feiner vertikaler Riss */
    linear-gradient(180deg,
      transparent 18%,
      hsla(15 25% 8% / 0.35) 19%,
      hsla(15 25% 8% / 0.35) 19.4%,
      transparent 20%,
      transparent 100%),
    /* Grundfarbe — etwas heller als Pfosten, gleiche Kalt-Patina */
    linear-gradient(178deg,
      hsl(32 18% 50%) 0%,
      hsl(30 16% 44%) 50%,
      hsl(28 14% 38%) 100%);
  color: hsl(40 30% 92%);
  font-family: 'Patrick Hand', cursive;
  border: 1.5px solid hsl(20 30% 18%);
  box-shadow:
    0 6px 18px -8px hsla(15 25% 6% / 0.5),
    0 2px 4px hsla(15 25% 6% / 0.15),
    inset 0 1px 0 hsla(40 35% 80% / 0.18),
    inset 0 -3px 0 hsla(15 25% 6% / 0.32);
  transition: filter 0.2s, transform 0.2s;
}
/* Verwitterungs-Overlay: leichte Flecken + Kratzer */
.sign__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(92deg,
      transparent 0 5px,
      hsla(15 25% 8% / 0.04) 5px 6px,
      transparent 6px 13px),
    radial-gradient(ellipse 30% 80% at 100% 50%,
      hsla(15 25% 6% / 0.18) 0%,
      transparent 70%);
  pointer-events: none;
  clip-path: inherit;
  mix-blend-mode: multiply;
}
.sign--right .sign__face {
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
  padding-right: 44px;
}
.sign--left .sign__face {
  clip-path: polygon(26px 0, 100% 0, 100% 100%, 26px 100%, 0 50%);
  padding-left: 44px;
  padding-right: 30px;
  text-align: right;
}
.sign__face:hover { filter: brightness(1.07); }
.sign__face:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.sign__who {
  display: block;
  font-family: 'Stick No Bills', sans-serif;
  font-weight: 400;                              /* Regular — leichtes Sub-Label */
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: hsla(40 50% 96% / 0.82);
  margin-bottom: 4px;
}
.sign__what {
  display: block;
  font-family: 'Stick No Bills', sans-serif;
  font-weight: 700;                              /* Bold — die Destination */
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: hsl(40 55% 97%);
  text-shadow: 1px 1px 0 hsla(15 25% 6% / 0.35); /* leichte Tiefe wie eingraviert */
}

/* ---------- Nägel/Schrauben (bunte Perlen) ---------- */
.nail {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid hsl(15 30% 16%);
  box-shadow:
    inset -1.5px -1.5px 0 hsla(15 30% 10% / 0.45),
    inset 1px 1px 0 hsla(40 50% 96% / 0.4),
    1px 1px 0 hsla(15 25% 10% / 0.3);
  z-index: 3;
}
.nail--top    { top: 8px; }
.nail--bottom { bottom: 8px; }
.sign--right .nail { left: 9px; }
.sign--left  .nail { right: 9px; }

/* ---------- Anschlag-Animation ---------- */
@keyframes sign-nail-right {
  0%   { opacity: 0; transform: rotate(-22deg); }
  55%  { opacity: 1; transform: rotate(2.4deg); }
  74%  { opacity: 1; transform: rotate(-1.1deg); }
  88%  { opacity: 1; transform: rotate(0.5deg); }
  100% { opacity: 1; transform: rotate(-0.6deg); }
}
@keyframes sign-nail-left {
  0%   { opacity: 0; transform: rotate(22deg); }
  55%  { opacity: 1; transform: rotate(-2.4deg); }
  74%  { opacity: 1; transform: rotate(1.1deg); }
  88%  { opacity: 1; transform: rotate(-0.5deg); }
  100% { opacity: 1; transform: rotate(0.6deg); }
}
.signpost.is-visible .sign--right {
  animation: sign-nail-right 800ms var(--ease-out-expo) forwards;
}
.signpost.is-visible .sign--left {
  animation: sign-nail-left 800ms var(--ease-out-expo) forwards;
}
.signpost.is-visible .sign[data-row="1"] { animation-delay: 220ms; }
.signpost.is-visible .sign[data-row="2"] { animation-delay: 440ms; }
.signpost.is-visible .sign[data-row="3"] { animation-delay: 660ms; }
.signpost.is-visible .sign[data-row="4"] { animation-delay: 880ms; }

/* Reduced-Motion: keine Schwingung, einfach da */
@media (prefers-reduced-motion: reduce) {
  .sign,
  .sign--right,
  .sign--left { opacity: 1; animation: none !important; }
  .sign--right { transform: rotate(-0.6deg); }
  .sign--left  { transform: rotate(0.6deg); }
}

/* ---------- Mobile: Desktop-Struktur beibehalten, nur kompakter ---------- */
@media (max-width: 720px) {
  .signpost {
    padding: 20px 0 60px;
  }
  .signpost__post {
    width: 32px;                   /* schmaler Pfosten */
  }
  .signpost__cap {
    border-left-width: 16px;
    border-right-width: 16px;
    border-bottom-width: 14px;
  }
  .sign--right { margin-left: -6px; }
  .sign--left  { margin-right: -6px; }
  .sign__face {
    padding: 12px 28px 12px 22px;
  }
  .sign--left .sign__face {
    padding: 12px 22px 12px 28px;
  }
  .sign__who  { font-size: 11px; letter-spacing: 0.10em; }
  .sign__what { font-size: clamp(18px, 5.2vw, 24px); }
  /* Pfeilspitze kleiner (entspricht Padding rechts/links) */
  .sign--right .sign__face {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
  }
  .sign--left .sign__face {
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
  }
  /* Gras-Büschel auf Mobile weg (sitzt mit Post-Left-Center-Transform seltsam) */
  .signpost__ground { display: none; }
}

/* Prinzip-Karten */
.prinzip {
  padding: 28px;
}
.prinzip h3 {
  white-space: pre-line;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.1;
  margin-bottom: 12px;
}
.prinzip p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* Timeline Schultag */
.timeline {
  position: relative;
  margin-left: 16px;
  border-left: 2.5px dashed hsl(25 25% 12% / 0.4);
  padding-left: 0;
  list-style: none;
}
.timeline li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 32px;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: -15px; top: 4px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--bg, var(--bead-rose));
}
.timeline .time {
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--ink); line-height: 1;
}
.timeline .time-label { font-size: clamp(20px, 1.8vw, 26px); color: var(--ink-soft); }
.timeline p { margin-top: 8px; max-width: 640px; }

/* Haus-Karten */
.haus { position: relative; overflow: hidden; padding: 32px; }
.haus .haus-svg {
  position: absolute; top: -20px; right: -20px;
  width: 128px; opacity: 0.9;
}
.haus .klasse { font-family: 'Patrick Hand', cursive; color: var(--secondary); font-size: 18px; margin-bottom: 4px; }
.haus h3 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 12px; }
.haus__facts { list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid hsl(25 25% 12% / 0.15); font-size: 14px; color: var(--ink-soft); }
.haus__facts li { display: flex; gap: 8px; margin-bottom: 6px; }
.haus__facts li::before { content: '•'; color: var(--primary); flex-shrink: 0; }

/* Stimmen */
.stimme {
  padding: 28px;
  position: relative;
}
.stimme::before {
  content: '„';
  position: absolute; top: -16px; left: -16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--q-color, var(--bead-rose));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: var(--ink);
  font-weight: 700;
}
.stimme blockquote { margin: 0 0 16px; font-size: 17px; color: var(--ink); line-height: 1.6; }
.stimme figcaption {
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: var(--ink-soft);
  border-top: 1px solid hsl(25 25% 12% / 0.15);
  padding-top: 12px;
}
.stimme figcaption strong { color: var(--ink); }

/* Weg Schritte */
.schritt {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 28px;
  margin-bottom: 24px;
}
.schritt__num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  box-shadow: 2.5px 2.5px 0 var(--ink);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Caveat', cursive;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}
.schritt h3 { font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 8px; }
.schritt p { color: var(--ink-soft); }

/* Glossar */
.glossar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
}
@media (max-width: 720px) { .glossar { grid-template-columns: 1fr; } }
.glossar dt {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ink);
  margin-bottom: 4px;
}
.glossar dd {
  margin: 0 0 16px;
  color: var(--ink-soft);
  padding-bottom: 16px;
  border-bottom: 1px dashed hsl(25 25% 12% / 0.3);
}
.glossar dd:last-child { border-bottom: none; }

/* Aktuelles */
.news {
  padding: 24px;
}
.news .tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--ink);
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  margin-bottom: 12px;
}
.news .date { font-family: 'Patrick Hand', cursive; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.news h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 12px; line-height: 1.15; }
.news p { font-size: 14px; }

/* Jubilaeum */
.jubilaeum {
  padding: clamp(32px, 4vw, 56px);
  background: linear-gradient(135deg, hsl(45 92% 60% / 0.25), hsl(12 75% 55% / 0.12));
  position: relative;
  overflow: hidden;
}
.jubilaeum h2 { line-height: 0.95; }

/* Kontakt-Box */
.kontakt-card { padding: 28px; }
.kontakt-card address { font-style: normal; color: var(--ink); margin-bottom: 16px; line-height: 1.7; }

/* Footer */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 0 32px;
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}
.site-footer .cloud-deco {
  position: absolute; top: 24px; right: 40px; width: 128px; opacity: 0.1;
}
.site-footer a { color: var(--paper); opacity: 0.85; transition: color 0.15s, opacity 0.15s; }
.site-footer a:hover { color: var(--accent); opacity: 1; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 2fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-columns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 900px) {
  .footer-columns { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) { .footer-columns { grid-template-columns: repeat(2, 1fr); } }
.footer-col h3 { color: var(--accent); font-size: 20px; margin-bottom: 12px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.8; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 24px;
  border-top: 1px solid hsl(40 45% 94% / 0.15);
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  color: hsl(40 45% 94% / 0.6);
  flex-wrap: wrap;
}
.footer-bottom a { color: hsl(40 45% 94% / 0.6); }
.footer-bottom a:hover { color: var(--accent); }
.site-footer .brand-logo {
  background: var(--paper);
  padding: 8px;
  border-radius: 12px;
  height: 64px; width: auto;
  display: inline-block;
  margin-bottom: 16px;
}

/* Inline-SVG-Primitives (Farbhinweise) */
.svg-ink   { color: var(--ink); }
.svg-accent { color: var(--accent); }
.svg-primary { color: var(--primary); }

/* ============================================================
   SPIELEREIEN
   ============================================================ */

/* ---------- 1) Glossar-Tooltips inline (g-term + g-tip) ---------- */
.g-term {
  position: relative;
  border-bottom: 2px dotted var(--primary);
  cursor: help;
  font-style: normal;
  text-decoration: none;
  color: inherit;
}
.g-term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.g-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: max-content;
  max-width: 280px;
  padding: 12px 16px;
  background: var(--paper-card);
  color: var(--ink);
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  line-height: 1.4;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out-expo), transform 0.22s var(--ease-out-expo);
  z-index: 80;
  white-space: normal;
  text-align: left;
}
.g-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--ink);
  margin-top: 0;
}
.g-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  border: 7px solid transparent;
  border-top-color: var(--paper-card);
  z-index: 1;
}
.g-term:hover .g-tip,
.g-term:focus .g-tip,
.g-term:focus-within .g-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 2) Schultag-Symbole je Timeline-Item ---------- */
.timeline > li {
  position: relative;
}
.timeline-icon {
  display: inline-block;
  width: 28px; height: 28px;
  vertical-align: middle;
  margin-right: 10px;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.5) rotate(-12deg);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.timeline.is-visible .timeline-icon,
.reveal.is-visible .timeline-icon {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.timeline > li:nth-child(1) .timeline-icon { transition-delay: 100ms; }
.timeline > li:nth-child(2) .timeline-icon { transition-delay: 220ms; }
.timeline > li:nth-child(3) .timeline-icon { transition-delay: 340ms; }
.timeline > li:nth-child(4) .timeline-icon { transition-delay: 460ms; }
.timeline > li:nth-child(5) .timeline-icon { transition-delay: 580ms; }
.timeline > li:nth-child(6) .timeline-icon { transition-delay: 700ms; }

/* ---------- 3) Schulen Stat-Bubbles bei Hover ---------- */
.haus { position: relative; overflow: visible; }
.haus__stat {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--accent);
  color: var(--ink);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  padding: 10px 16px 8px;
  border-radius: 50% 50% 50% 8px;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sketch-sm);
  transform: rotate(8deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
  pointer-events: none;
  z-index: 3;
}
.haus__stat small {
  display: block;
  font-family: 'Patrick Hand', cursive;
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px;
}
.haus:hover .haus__stat,
.haus:focus-within .haus__stat {
  opacity: 1;
  transform: rotate(-3deg) scale(1);
}
#gesamtschule .haus__stat { background: var(--bead-mint); }

.card-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-family: 'Patrick Hand', cursive;
  font-size: 17px;
  color: var(--primary);
  text-decoration: none;
  transition: gap 0.2s;
}
.card-link svg { width: 32px; height: 18px; transition: transform 0.2s; }
.card-link:hover { gap: 14px; }
.card-link:hover svg { transform: translateX(4px); }

/* ---------- 4) Anmeldungs-Pfad: SVG-Linie verbindet die 5 Schritte ---------- */
.weg-path {
  position: absolute;
  left: 28px;
  top: 30px;
  bottom: 30px;
  width: 30px;
  pointer-events: none;
  z-index: 0;
}
.weg-path svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.weg-path path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 9;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.6s var(--ease-out-expo);
}
.weg-path.is-visible path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .weg-path path { stroke-dashoffset: 0; transition: none; }
}
@media (max-width: 720px) {
  .weg-path { display: none; }
}
.schritt-list { position: relative; }

/* ---------- 5) Jubiläum-Konfetti ---------- */
.jubilaeum { position: relative; overflow: hidden; }
.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px; height: 14px;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(0) rotate(0);
}
.jubilaeum.is-visible .confetti-piece {
  animation: confetti-fall 2.6s var(--ease-out-expo) forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 0; transform: translateY(-30px) rotate(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(420px) rotate(720deg); }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-layer { display: none; }
}