/* Die Morgenrot-Piraten – Prototyp */
:root {
  --holz-dunkel: #2b1a10;
  --holz: #5a3720;
  --holz-hell: #8a5a35;
  --pergament: #f3e6c8;
  --pergament-dunkel: #e4d0a6;
  --tinte: #2a1d14;
  --tinte-weich: #4a3a2c;
  --rot: #b8322a;
  --rot-dunkel: #8e221c;
  --morgenrot: #d9532b;
  --meer: #2e5c8a;
  --navy: #1f2f45;
  --gold: #d4a93c;
  --gold-hell: #f0cf73;
  --schatten: 0 10px 24px rgba(20, 10, 4, .45), 0 2px 4px rgba(20, 10, 4, .35);
  --rund: 6px;
  --display: "Shantell Sans", "Comic Sans MS", system-ui, sans-serif;
  --hand: "Kalam", "Shantell Sans", cursive;
  --text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font: 400 1rem/1.55 var(--text);
  color: var(--tinte);
  background: var(--holz-dunkel) url("../img/holz.webp") center top / 900px auto repeat;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0 0 .5em; }
p { margin: 0 0 .8em; }
a { color: inherit; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 99; left: 1rem; top: 1rem; background: var(--pergament); padding: .5rem 1rem; border-radius: var(--rund); }
:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; border-radius: 4px; }

/* ---------- Knöpfe ---------- */
.knopf {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: .55em;
  font: 700 1rem/1 var(--display);
  text-decoration: none; color: #fff8ec;
  padding: .75em 1.2em; border-radius: 8px; border: 0; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.25), 0 3px 8px rgba(30,10,0,.35);
  transition: transform .15s ease, filter .15s ease;
}
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf:hover { transform: translateY(-2px); filter: brightness(1.08); }
.knopf:active { transform: translateY(1px); }
.knopf--rot { background: linear-gradient(#c93c31, var(--rot-dunkel)); }
.knopf--blau { background: linear-gradient(#a9c3d8, #7fa1bd); color: var(--navy); }
.knopf--holz { background: linear-gradient(var(--holz-hell), var(--holz)); border: 2px solid #3a2213; }
.knopf--gross { font-size: clamp(1.05rem, 1.6vw, 1.35rem); padding: .8em 1.4em; }

/* ---------- Kopf ---------- */
.kopf {
  position: absolute; z-index: 10; inset: 0 0 auto 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: clamp(.75rem, 1.6vw, 1.4rem) clamp(1rem, 2.5vw, 2.2rem);
}
.schild {
  position: relative; display: block; text-decoration: none;
  padding: .9rem 1.3rem 1rem 1.2rem; transform: rotate(-2deg);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 22px, rgba(0,0,0,.18) 22px 24px),
    linear-gradient(100deg, #6e4627, #4c2e18 55%, #61401f);
  border: 3px solid #2e1b0e; border-radius: 6px; box-shadow: var(--schatten);
}
.schild::before, .schild::after { content: ""; position: absolute; top: -26px; width: 3px; height: 28px; background: repeating-linear-gradient(#c7a46b 0 4px, #8a6a3a 4px 7px); }
.schild::before { left: 22%; } .schild::after { right: 22%; }
.schild__sonne { position: absolute; width: 44px; top: .5rem; left: 50%; color: var(--gold); }
.schild__die, .schild__name { display: block; font-family: var(--display); font-weight: 800; color: var(--gold-hell); text-shadow: 0 2px 0 #3a210f, 0 0 1px #3a210f; }
.schild__die { font-size: 1.1rem; }
.schild__name { font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: .95; letter-spacing: .01em; }

.navi { flex: 1; display: flex; justify-content: center; }
.navi__liste {
  list-style: none; margin: 0; padding: .55rem 1.8rem; display: flex; gap: clamp(.6rem, 1.8vw, 1.8rem);
  background: linear-gradient(var(--pergament), var(--pergament-dunkel));
  border-radius: 3px; box-shadow: var(--schatten);
  clip-path: polygon(0 8%, 3% 0, 50% 5%, 97% 0, 100% 10%, 99% 92%, 96% 100%, 50% 95%, 3% 100%, 0 90%);
}
.navi__liste a { font: 700 1rem var(--display); text-decoration: none; color: var(--tinte); padding: .2rem .1rem; white-space: nowrap; }
.navi__liste a:hover { color: var(--rot); }
.navi__liste a[aria-current] { color: var(--rot); box-shadow: inset 0 -2px 0 var(--rot); }
.navi__knopf { display: none; }

.kopf__rechts { display: flex; align-items: center; gap: .5rem; }
.sozial { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--holz-dunkel); background: rgba(255, 240, 215, .85); box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .15s; }
.sozial:hover { transform: scale(1.08); }
.sozial svg { width: 22px; height: 22px; }
.kopf .sozial:first-child { color: #c4302b; }
.kopf__rechts .knopf { margin-left: .5rem; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: #e7895a; min-height: 520px; }
.hero__bild { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: 30% 50%; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60px; background: linear-gradient(transparent, rgba(43,26,16,.55)); pointer-events: none; }
.hero__text {
  position: absolute; z-index: 2; top: 50%; right: clamp(1rem, 7vw, 8rem); transform: translateY(-38%);
  width: min(46%, 640px); text-align: center; color: var(--navy);
}
.hero__sonne { width: clamp(70px, 8vw, 110px); color: var(--morgenrot); margin: 0 auto -.4rem; filter: drop-shadow(0 1px 0 rgba(255,240,210,.8)); }
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 6rem); font-weight: 800; line-height: .9; letter-spacing: -.01em; color: var(--navy);
  text-shadow: 0 2px 0 rgba(255, 236, 200, .7), 0 0 30px rgba(255, 220, 170, .7);
  transform: rotate(-3deg); margin-bottom: .3em;
}
.hero h1 span { display: block; font-size: .5em; margin-bottom: .1em; transform: translateX(-30%); }
.hero__claim { font: 700 clamp(1.05rem, 1.8vw, 1.6rem)/1.25 var(--display); text-shadow: 0 1px 12px rgba(255, 228, 190, .9); margin-bottom: 1.1rem; }
.hero__klein { font: 700 .95rem var(--hand); margin-top: .7rem; text-shadow: 0 1px 8px rgba(255, 228, 190, .95); }

/* ---------- Planken & Karten ---------- */
.planken { padding: clamp(1rem, 2vw, 1.6rem) clamp(.75rem, 2vw, 1.6rem) clamp(1.5rem, 3vw, 2.5rem); max-width: 1680px; margin: 0 auto; }
.reihe { display: grid; gap: clamp(1rem, 1.6vw, 1.4rem); margin-bottom: clamp(1rem, 1.6vw, 1.4rem); }
.reihe--eins { grid-template-columns: 1.15fr 1.35fr .8fr; }
.reihe--zwei { grid-template-columns: 1fr 1fr; }
.reihe--zwei .crew { grid-column: 1 / -1; }

.karte {
  position: relative; padding: clamp(1.1rem, 2vw, 1.8rem);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(150, 100, 40, .18), transparent 60%),
    linear-gradient(var(--pergament), var(--pergament-dunkel));
  border-radius: var(--rund); box-shadow: var(--schatten);
}
.karte::before { /* Papierkorn */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.karte > * { position: relative; }
.karte h2 { font-size: clamp(1.35rem, 1.9vw, 1.8rem); color: var(--tinte); }
.karte p { color: var(--tinte-weich); }

/* Einstieg */
.karte--einstieg { display: grid; grid-template-columns: 1fr .85fr; gap: .5rem; align-items: center; }
.karte--einstieg h2 { font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
.einstieg__text { align-self: center; }
.einstieg__pip { margin: 0; position: relative; }
.einstieg__pip img { mix-blend-mode: multiply; width: 100%; max-width: 360px; margin-left: auto; }
.notiz { position: absolute; top: 4%; right: -2%; font: 700 1.05rem/1.15 var(--hand); color: var(--tinte); transform: rotate(6deg); text-align: center; }

/* Logbuch der Morgenrot */
.logbuch__kopf { position: relative; padding-right: 7rem; }
.logbuch__kopf h2 { margin-bottom: .1em; }
.logbuch__kopf p { font: 700 1rem var(--display); margin: 0 0 .9rem; }
.zettel {
  position: absolute !important; right: -.4rem; top: -.6rem; width: 7.2rem; padding: .7rem .5rem;
  font: 700 1rem/1.15 var(--hand) !important; text-align: center; color: var(--tinte) !important;
  background: #fbf2d8; transform: rotate(5deg); box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.zettel::before { content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e05a4b, #8e221c); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.logbuch__karte { border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(80,50,20,.25); margin-bottom: 1rem; }
.logbuch__karte img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }

.folgen { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.folge__link { display: block; text-decoration: none; }
.folge__bild { position: relative; display: block; border-radius: 5px; overflow: hidden; border: 3px solid #fff7e6; box-shadow: 0 3px 8px rgba(0,0,0,.3); aspect-ratio: 16/9; background: #6d5a45; }
.folge__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.folge__link:hover .folge__bild img { transform: scale(1.05); }
.folge__play, .folge__schloss { position: absolute; inset: 0; display: grid; place-items: center; }
.folge__play svg { width: 40px; height: 40px; padding: 9px 7px 9px 11px; border-radius: 50%; color: #fff; background: rgba(184, 50, 42, .9); box-shadow: 0 2px 8px rgba(0,0,0,.4); opacity: 0; transform: scale(.8); transition: .2s ease; }
.folge__link:hover .folge__play svg, .folge__link:focus-visible .folge__play svg { opacity: 1; transform: scale(1); }
.folge--zu .folge__bild img { filter: blur(5px) grayscale(.6) brightness(.7); transform: scale(1.1); }
.folge__schloss svg { width: 30px; height: 30px; color: #f6ead0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.folge__titel { display: block; font: 700 .9rem/1.2 var(--display); margin-top: .45rem; }
.folge__info { display: block; font-size: .82rem; color: var(--tinte-weich); }
.folge--zu .folge__titel { color: var(--tinte-weich); }

.fortschritt { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.fortschritt__punkte { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex: 1; min-width: 200px; }
.fortschritt__punkte li { flex: 1; position: relative; height: 14px; }
.fortschritt__punkte li::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tinte-weich); background: var(--pergament); }
.fortschritt__punkte li::after { content: ""; position: absolute; left: 18px; right: 4px; top: 6px; border-top: 2px dotted var(--tinte-weich); }
.fortschritt__punkte li.voll::before { background: var(--rot); border-color: var(--rot-dunkel); }
.fortschritt__sonne { width: 44px; color: var(--morgenrot); }
.fortschritt__text { font: 700 .9rem var(--hand); }

/* Pips Heft */
.karte--heft {
  background:
    linear-gradient(90deg, transparent 2.2rem, rgba(200, 80, 70, .45) 2.2rem 2.3rem, transparent 2.3rem),
    repeating-linear-gradient(transparent 0 27px, rgba(70, 110, 160, .22) 27px 28px),
    linear-gradient(#fbf6e9, #f1e7cf);
  padding-left: 3.2rem;
}
.karte--heft::after { /* Spirale */
  content: ""; position: absolute; left: .55rem; top: 1rem; bottom: 1rem; width: 1.1rem;
  background: radial-gradient(circle at 50% 50%, #3b2a1c 0 3px, transparent 4px) 0 0 / 100% 28px repeat-y;
}
.karte--heft h2 { font-family: var(--hand); font-size: 2rem; text-align: center; }
.heft__frage { font: 700 1.15rem/1.3 var(--hand); color: var(--tinte) !important; text-align: center; }
.heft__skizze { mix-blend-mode: multiply; margin: .3rem 0 .8rem; border-radius: 2px; }

/* Crew */
.crew { position: relative; padding: 2.4rem 1.2rem 1.4rem; border-radius: var(--rund); background: linear-gradient(rgba(30,16,8,.55), rgba(30,16,8,.75)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.brett {
  position: absolute; top: -1.1rem; left: 1.4rem; margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.75rem); color: var(--tinte);
  padding: .45rem 1.4rem; background: linear-gradient(var(--pergament), var(--pergament-dunkel));
  box-shadow: var(--schatten); transform: rotate(-1.5deg);
  clip-path: polygon(0 10%, 4% 0, 96% 4%, 100% 0, 99% 90%, 96% 100%, 4% 96%, 0 100%);
}
.crew__inhalt { display: grid; grid-template-columns: 1fr minmax(260px, 22%); gap: 1.2rem; align-items: start; }
.crew__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
.figur img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px 6px 0 0; }
.figur__zettel { padding: .6rem .55rem .7rem; text-align: center; background: linear-gradient(var(--pergament), var(--pergament-dunkel)); border-radius: 0 0 6px 6px; box-shadow: 0 4px 10px rgba(0,0,0,.35); min-height: 7.6rem; }
.figur:nth-child(odd) { transform: rotate(-1deg); } .figur:nth-child(even) { transform: rotate(1deg) translateY(4px); }
.figur h3 { font-size: 1rem; margin-bottom: .25rem; }
.figur p { font-size: .82rem; line-height: 1.3; margin: 0; color: var(--tinte-weich); }
.rivalin {
  display: grid; grid-template-columns: 1fr; gap: .8rem; align-content: start;
  padding: .9rem; border-radius: 6px; color: #f3e8ff;
  background: linear-gradient(110deg, #3b2650, #5b3a7a 60%, #3b2650);
  box-shadow: 0 0 0 2px rgba(212,169,60,.5), var(--schatten);
}
.rivalin img { border-radius: 4px; aspect-ratio: 4/3; object-fit: cover; object-position: center 30%; width: 100%; }
.rivalin h3 { font-size: 1.5rem; color: var(--gold-hell); margin-bottom: .3rem; }
.rivalin p { margin-bottom: .4rem; }
.rivalin__vor { font: 700 1rem var(--hand); color: #d8c4ef; margin: 0 !important; }
.rivalin__zitat { font: 700 1.1rem var(--hand); color: var(--gold-hell); }

/* Buch & Eltern */
.karte--buch img { aspect-ratio: 16/9; object-fit: cover; width: 100%; border-radius: 4px; margin: .2rem 0 1rem; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.karte--eltern h2 { padding-right: 3.5rem; }
.eltern__sonne { position: absolute !important; right: 1.2rem; top: 1.2rem; width: 54px; color: var(--morgenrot); }
.eltern__punkte { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.eltern__punkte li { padding-left: 1.6rem; position: relative; font-weight: 700; color: var(--tinte); }
.eltern__punkte li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: .7rem; background: var(--morgenrot); clip-path: polygon(0 100%, 0 70%, 50% 0, 100% 70%, 100% 100%); border-radius: 1px; }

/* Fussband */
.fuss-band { position: relative; overflow: hidden; color: #fff6e6; }
.fuss-band__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.fuss-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 18, 30, .78), rgba(30, 18, 30, .35) 55%, rgba(30,18,30,.7)); }
.fuss-band__inhalt { position: relative; max-width: 1500px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.fuss-band h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: .2em; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.fuss-band p { font: 700 1.1rem var(--hand); margin: 0; }
.newsletter { display: grid; gap: .4rem; min-width: min(100%, 340px); }
.newsletter label { font: 700 1rem var(--hand); }
.newsletter__zeile { display: flex; gap: .5rem; }
.newsletter input { flex: 1; min-width: 0; font: 600 1rem var(--text); padding: .7rem .9rem; border-radius: 8px; border: 2px solid #3a2213; background: var(--pergament); color: var(--tinte); }
.newsletter__danke { display: none; }
.newsletter.ok .newsletter__danke { display: block; }

.fuss { text-align: center; padding: 1.4rem 1rem 2rem; color: #e9d7b8; font-size: .9rem; }
.fuss__sozial { display: flex; justify-content: center; gap: .6rem; margin-bottom: .8rem; }
.fuss a { color: #f3e2c3; }
.fuss .sozial { color: var(--holz-dunkel); }

/* ---------- Responsiv ---------- */
@media (max-width: 1280px) {
  .reihe--eins { grid-template-columns: 1fr 1fr; }
  .karte--logbuch { grid-column: 1 / -1; grid-row: 1; }
  .reihe--zwei { grid-template-columns: 1fr 1fr; }
  .crew__inhalt { grid-template-columns: 1fr; }
  .crew__liste { grid-template-columns: repeat(3, 1fr); }
  .rivalin { grid-template-columns: 160px 1fr; align-items: center; }
  .navi__liste { padding: .5rem 1.1rem; }
  .navi__liste a { font-size: .92rem; }
}
@media (max-width: 1020px) {
  .kopf { align-items: center; }
  .kopf__rechts .sozial { display: none; }
  .navi { order: 3; flex: 0; }
  .navi__knopf { display: grid; gap: 5px; width: 46px; height: 46px; padding: 12px 11px; border: 0; border-radius: 8px; background: linear-gradient(var(--pergament), var(--pergament-dunkel)); box-shadow: var(--schatten); cursor: pointer; }
  .navi__knopf span { display: block; height: 3px; background: var(--tinte); border-radius: 2px; }
  .navi__liste { display: none; position: absolute; right: 1rem; top: calc(100% - .4rem); flex-direction: column; gap: .2rem; padding: 1rem 1.6rem; clip-path: none; border-radius: 6px; }
  .navi__liste.offen { display: flex; }
  .navi__liste a { font-size: 1.1rem; display: block; padding: .35rem 0; }
  .hero { min-height: 0; }
  .hero__bild { min-height: 0; aspect-ratio: 16 / 10; object-position: 22% 50%; }
  .hero__text { position: relative; top: auto; right: auto; transform: none; width: auto; padding: 1.6rem 1rem 2.2rem; background: linear-gradient(#f2b483, #f6d3a5); }
  .hero h1 { font-size: clamp(2.6rem, 10vw, 4.4rem); }
  .hero::after { display: none; }
}
@media (max-width: 760px) {
  .reihe--eins, .reihe--zwei { grid-template-columns: 1fr; }
  .karte--logbuch { grid-row: auto; }
  .knopf { white-space: normal; text-align: left; }
  .fuss-band .knopf--gross { font-size: 1rem; }
  .karte--einstieg { grid-template-columns: 1fr; }
  .einstieg__pip img { max-width: 260px; margin: 0 auto; }
  .folgen { grid-template-columns: repeat(2, 1fr); }
  .logbuch__kopf { padding-right: 0; }
  .zettel { display: none; }
  .crew__liste { grid-template-columns: repeat(2, 1fr); }
  .rivalin { grid-template-columns: 100px 1fr; }
  .karte--einstieg h2 { font-size: 1.35rem; }
  .kopf__rechts .knopf { display: none; }
  .schild { padding: .6rem .9rem .7rem; }
  .schild__sonne { width: 34px; }
  .newsletter__zeile { flex-direction: column; }
}


/* =====================================================================
   Handgemacht: ausgefranste Ränder, Schräglagen, Klebeband, Nägel
   ===================================================================== */
html, body { overflow-x: clip; }

/* Papier: Hintergrund wandert in ::before, damit nur der Rand ausfranst, nicht der Text */
.karte, .figur__zettel, .rivalin, .crew { background: transparent; box-shadow: none; isolation: isolate; }
.karte::before, .figur__zettel::before, .rivalin::before, .crew::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 1; mix-blend-mode: normal; border-radius: 3px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .16 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(ellipse at 85% 95%, rgba(150,95,35,.22), transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(160,110,50,.10), transparent 18%),
    linear-gradient(170deg, #f6ead0, var(--pergament) 40%, var(--pergament-dunkel));
  box-shadow: inset 0 0 0 1px rgba(120,80,30,.12), inset 0 0 42px rgba(140,85,25,.38), inset 0 0 6px rgba(110,60,15,.35);
  filter: url(#papierrand) drop-shadow(0 9px 12px rgba(20,10,4,.45)) drop-shadow(0 2px 2px rgba(20,10,4,.3));
}
/* Pips Heft: liniertes Papier behalten */
.karte--heft::before {
  background:
    linear-gradient(90deg, transparent 2.2rem, rgba(200,80,70,.45) 2.2rem 2.3rem, transparent 2.3rem),
    repeating-linear-gradient(transparent 0 27px, rgba(70,110,160,.22) 27px 28px),
    radial-gradient(ellipse at 80% 90%, rgba(150,95,35,.15), transparent 55%),
    linear-gradient(#fbf6e9, #f0e5cb);
}
/* Elster: violettes Stoffstück */
.rivalin::before {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.12), transparent 50%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 5px),
    linear-gradient(110deg, #3b2650, #5b3a7a 60%, #3b2650);
  box-shadow: inset 0 0 0 2px rgba(212,169,60,.45), inset 0 0 30px rgba(0,0,0,.35);
  filter: url(#stoffrand) drop-shadow(0 8px 12px rgba(10,5,15,.5));
}
.rivalin { box-shadow: none; }
/* Crew: dunkles Brett hinter den Figuren */
.crew::before {
  background: linear-gradient(rgba(30,16,8,.62), rgba(30,16,8,.8));
  box-shadow: inset 0 0 30px rgba(0,0,0,.5);
  filter: url(#stoffrand);
}
.figur__zettel { position: relative; }
.figur__zettel::before { filter: url(#papierrand-fein) drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.figur img { border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.4); }

/* Klebeband */
.karte--einstieg::after, .karte--buch::after, .karte--eltern::after, .rivalin::after {
  content: ""; position: absolute; z-index: 3; width: 120px; height: 30px; top: -13px;
  background: linear-gradient(rgba(255,250,230,.55), rgba(240,225,190,.65));
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  clip-path: polygon(3% 0, 97% 4%, 100% 20%, 97% 38%, 100% 58%, 97% 80%, 99% 100%, 2% 96%, 0 78%, 3% 56%, 0 36%, 3% 18%);
}
.karte--einstieg::after { left: 18px; transform: rotate(-9deg); }
.karte--buch::after { left: 50%; margin-left: -60px; transform: rotate(3deg); }
.karte--eltern::after { right: 20px; transform: rotate(8deg); width: 90px; }
.rivalin::after { left: 50%; margin-left: -45px; width: 90px; transform: rotate(-4deg); }

/* Nägel in den Ecken des Crew-Bretts */
.crew::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: 2;
  --nagel: radial-gradient(circle at 40% 35%, #d9cdb6 0 1.5px, #7c6a55 2.5px, #3b2f24 4.5px, transparent 5.5px);
  background: var(--nagel) left top / 12px 12px no-repeat, var(--nagel) right top / 12px 12px no-repeat,
              var(--nagel) left bottom / 12px 12px no-repeat, var(--nagel) right bottom / 12px 12px no-repeat;
}
.brett { z-index: 3; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }

/* Knöpfe: von Hand ausgeschnitten */
.knopf { border-radius: 14px 7px 12px 6px / 7px 13px 6px 12px; }
.knopf--rot { transform: rotate(-1.2deg); }
.knopf--blau { transform: rotate(1.5deg); }
.knopf:hover { transform: rotate(0deg) translateY(-2px); }

/* Fotos und Karte */
.logbuch__karte { overflow: hidden; border-radius: 2px; transform: rotate(-.8deg); box-shadow: 0 4px 10px rgba(60,35,10,.35); }
.logbuch__karte img { transform: scale(1.09); }
.folge__bild { border-radius: 2px; border-width: 4px 4px 5px; }
.folge:nth-child(1) .folge__bild { transform: rotate(-2.2deg); }
.folge:nth-child(2) .folge__bild { transform: rotate(1.6deg) translateY(3px); }
.folge:nth-child(3) .folge__bild { transform: rotate(-1deg) translateY(-2px); }
.folge:nth-child(4) .folge__bild { transform: rotate(2.4deg); }
.heft__skizze { transform: rotate(-1.5deg); box-shadow: 0 3px 8px rgba(60,35,10,.25); }
.karte--buch img { transform: rotate(1.2deg); border: 5px solid #fbf4e4; border-bottom-width: 7px; }
.einstieg__pip img { transform: rotate(3deg); }

/* Überschriften nicht ganz gerade */
.karte h2 { transform: rotate(-.8deg); transform-origin: left center; }
.karte--heft h2 { transform: rotate(1.2deg); transform-origin: center; }

/* Startbild und Fussband mit gerissenen Kanten */
.hero::after { display: none; }
.hero {
  background: transparent; margin-bottom: -14px; z-index: 1;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 40px) no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 0 L0.0 77.4 L3.3 80.3 L6.7 85.2 L10.0 76.3 L13.3 76.2 L16.7 72.9 L20.0 83.7 L23.3 81.4 L26.7 72.3 L30.0 78.2 L33.3 81.5 L36.7 71.0 L40.0 79.7 L43.3 73.5 L46.7 73.1 L50.0 84.8 L53.3 77.8 L56.7 82.4 L60.0 86.9 L63.3 81.2 L66.7 81.5 L70.0 79.4 L73.3 75.1 L76.7 82.2 L80.0 79.5 L83.3 75.0 L86.7 70.7 L90.0 68.4 L93.3 66.8 L96.7 70.6 L100.0 65.2 L103.3 56.1 L106.7 55.2 L110.0 58.2 L113.3 52.1 L116.7 52.1 L120.0 54.0 L123.3 56.5 L126.7 33.8 L130.0 55.5 L133.3 47.5 L136.7 50.5 L140.0 46.2 L143.3 48.6 L146.7 48.0 L150.0 28.9 L153.3 45.3 L156.7 47.9 L160.0 43.8 L163.3 47.8 L166.7 41.8 L170.0 42.2 L173.3 40.5 L176.7 43.8 L180.0 49.2 L183.3 40.9 L186.7 37.5 L190.0 36.9 L193.3 34.5 L196.7 33.5 L200.0 39.2 L203.3 11.6 L206.7 29.4 L210.0 29.5 L213.3 28.9 L216.7 40.8 L220.0 43.0 L223.3 43.2 L226.7 43.3 L230.0 40.8 L233.3 38.6 L236.7 49.8 L240.0 43.3 L243.3 51.0 L246.7 52.1 L250.0 50.4 L253.3 45.2 L256.7 54.6 L260.0 54.3 L263.3 49.2 L266.7 51.4 L270.0 51.1 L273.3 37.0 L276.7 43.6 L280.0 43.8 L283.3 4.2 L286.7 31.1 L290.0 31.7 L293.3 40.4 L296.7 36.8 L300.0 31.8 L303.3 33.9 L306.7 40.5 L310.0 19.2 L313.3 39.3 L316.7 43.9 L320.0 34.4 L323.3 43.8 L326.7 33.7 L330.0 45.3 L333.3 41.2 L336.7 44.1 L340.0 35.6 L343.3 44.7 L346.7 31.3 L350.0 40.3 L353.3 32.0 L356.7 34.6 L360.0 33.8 L363.3 23.4 L366.7 22.9 L370.0 17.3 L373.3 15.6 L376.7 18.6 L380.0 18.1 L383.3 3 L386.7 17.0 L390.0 19.5 L393.3 10.9 L396.7 22.4 L400.0 22.3 L403.3 21.5 L406.7 22.6 L410.0 28.2 L413.3 29.5 L416.7 30.1 L420.0 27.6 L423.3 21.8 L426.7 25.6 L430.0 22.7 L433.3 23.0 L436.7 23.4 L440.0 25.8 L443.3 25.1 L446.7 21.1 L450.0 32.4 L453.3 28.2 L456.7 4.8 L460.0 32.2 L463.3 30.5 L466.7 33.4 L470.0 29.3 L473.3 30.6 L476.7 35.0 L480.0 28.2 L483.3 38.5 L486.7 40.4 L490.0 38.9 L493.3 43.3 L496.7 53.1 L500.0 47.7 L503.3 50.6 L506.7 62.3 L510.0 56.1 L513.3 63.7 L516.7 38.8 L520.0 62.2 L523.3 63.8 L526.7 68.8 L530.0 57.7 L533.3 69.0 L536.7 67.8 L540.0 58.9 L543.3 57.7 L546.7 66.7 L550.0 64.4 L553.3 56.8 L556.7 67.0 L560.0 65.2 L563.3 62.5 L566.7 59.5 L570.0 59.2 L573.3 58.8 L576.7 61.5 L580.0 75.2 L583.3 75.2 L586.7 74.3 L590.0 78.5 L593.3 76.1 L596.7 76.3 L600.0 74.5 L603.3 68.8 L606.7 72.8 L610.0 67.5 L613.3 67.5 L616.7 72.0 L620.0 65.3 L623.3 34.5 L626.7 57.2 L630.0 57.3 L633.3 65.3 L636.7 55.2 L640.0 57.4 L643.3 52.4 L646.7 63.1 L650.0 61.9 L653.3 54.5 L656.7 61.3 L660.0 52.0 L663.3 64.3 L666.7 61.8 L670.0 62.5 L673.3 64.3 L676.7 68.7 L680.0 62.2 L683.3 67.6 L686.7 71.3 L690.0 72.6 L693.3 69.5 L696.7 68.7 L700.0 73.7 L703.3 60.4 L706.7 65.5 L710.0 66.0 L713.3 59.6 L716.7 66.8 L720.0 64.9 L723.3 68.3 L726.7 31.7 L730.0 63.1 L733.3 54.9 L736.7 55.8 L740.0 58.4 L743.3 70.1 L746.7 70.7 L750.0 66.5 L753.3 63.4 L756.7 78.6 L760.0 78.9 L763.3 78.3 L766.7 80.2 L770.0 43.7 L773.3 85.7 L776.7 83.9 L780.0 82.4 L783.3 77.9 L786.7 76.5 L790.0 72.4 L793.3 74.8 L796.7 71.2 L800.0 68.9 L803.3 68.2 L806.7 67.1 L810.0 71.7 L813.3 67.8 L816.7 64.1 L820.0 72.0 L823.3 60.6 L826.7 58.1 L830.0 60.2 L833.3 65.1 L836.7 56.9 L840.0 58.4 L843.3 56.4 L846.7 58.7 L850.0 56.7 L853.3 60.6 L856.7 64.1 L860.0 68.8 L863.3 57.0 L866.7 66.0 L870.0 64.6 L873.3 61.5 L876.7 55.9 L880.0 45.4 L883.3 43.1 L886.7 45.9 L890.0 40.4 L893.3 44.2 L896.7 30.2 L900.0 30.3 L903.3 33.0 L906.7 31.8 L910.0 26.7 L913.3 33.7 L916.7 24.7 L920.0 3 L923.3 31.0 L926.7 32.9 L930.0 20.9 L933.3 31.1 L936.7 23.7 L940.0 29.0 L943.3 29.4 L946.7 24.1 L950.0 34.2 L953.3 25.6 L956.7 31.6 L960.0 30.1 L963.3 30.1 L966.7 30.4 L970.0 29.2 L973.3 20.0 L976.7 29.8 L980.0 18.1 L983.3 20.5 L986.7 20.2 L990.0 17.7 L993.3 24.6 L996.7 28.8 L1000.0 19.5 L1000 0 Z'/></svg>") bottom / 100% 42px no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 40px) no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 0 L0.0 77.4 L3.3 80.3 L6.7 85.2 L10.0 76.3 L13.3 76.2 L16.7 72.9 L20.0 83.7 L23.3 81.4 L26.7 72.3 L30.0 78.2 L33.3 81.5 L36.7 71.0 L40.0 79.7 L43.3 73.5 L46.7 73.1 L50.0 84.8 L53.3 77.8 L56.7 82.4 L60.0 86.9 L63.3 81.2 L66.7 81.5 L70.0 79.4 L73.3 75.1 L76.7 82.2 L80.0 79.5 L83.3 75.0 L86.7 70.7 L90.0 68.4 L93.3 66.8 L96.7 70.6 L100.0 65.2 L103.3 56.1 L106.7 55.2 L110.0 58.2 L113.3 52.1 L116.7 52.1 L120.0 54.0 L123.3 56.5 L126.7 33.8 L130.0 55.5 L133.3 47.5 L136.7 50.5 L140.0 46.2 L143.3 48.6 L146.7 48.0 L150.0 28.9 L153.3 45.3 L156.7 47.9 L160.0 43.8 L163.3 47.8 L166.7 41.8 L170.0 42.2 L173.3 40.5 L176.7 43.8 L180.0 49.2 L183.3 40.9 L186.7 37.5 L190.0 36.9 L193.3 34.5 L196.7 33.5 L200.0 39.2 L203.3 11.6 L206.7 29.4 L210.0 29.5 L213.3 28.9 L216.7 40.8 L220.0 43.0 L223.3 43.2 L226.7 43.3 L230.0 40.8 L233.3 38.6 L236.7 49.8 L240.0 43.3 L243.3 51.0 L246.7 52.1 L250.0 50.4 L253.3 45.2 L256.7 54.6 L260.0 54.3 L263.3 49.2 L266.7 51.4 L270.0 51.1 L273.3 37.0 L276.7 43.6 L280.0 43.8 L283.3 4.2 L286.7 31.1 L290.0 31.7 L293.3 40.4 L296.7 36.8 L300.0 31.8 L303.3 33.9 L306.7 40.5 L310.0 19.2 L313.3 39.3 L316.7 43.9 L320.0 34.4 L323.3 43.8 L326.7 33.7 L330.0 45.3 L333.3 41.2 L336.7 44.1 L340.0 35.6 L343.3 44.7 L346.7 31.3 L350.0 40.3 L353.3 32.0 L356.7 34.6 L360.0 33.8 L363.3 23.4 L366.7 22.9 L370.0 17.3 L373.3 15.6 L376.7 18.6 L380.0 18.1 L383.3 3 L386.7 17.0 L390.0 19.5 L393.3 10.9 L396.7 22.4 L400.0 22.3 L403.3 21.5 L406.7 22.6 L410.0 28.2 L413.3 29.5 L416.7 30.1 L420.0 27.6 L423.3 21.8 L426.7 25.6 L430.0 22.7 L433.3 23.0 L436.7 23.4 L440.0 25.8 L443.3 25.1 L446.7 21.1 L450.0 32.4 L453.3 28.2 L456.7 4.8 L460.0 32.2 L463.3 30.5 L466.7 33.4 L470.0 29.3 L473.3 30.6 L476.7 35.0 L480.0 28.2 L483.3 38.5 L486.7 40.4 L490.0 38.9 L493.3 43.3 L496.7 53.1 L500.0 47.7 L503.3 50.6 L506.7 62.3 L510.0 56.1 L513.3 63.7 L516.7 38.8 L520.0 62.2 L523.3 63.8 L526.7 68.8 L530.0 57.7 L533.3 69.0 L536.7 67.8 L540.0 58.9 L543.3 57.7 L546.7 66.7 L550.0 64.4 L553.3 56.8 L556.7 67.0 L560.0 65.2 L563.3 62.5 L566.7 59.5 L570.0 59.2 L573.3 58.8 L576.7 61.5 L580.0 75.2 L583.3 75.2 L586.7 74.3 L590.0 78.5 L593.3 76.1 L596.7 76.3 L600.0 74.5 L603.3 68.8 L606.7 72.8 L610.0 67.5 L613.3 67.5 L616.7 72.0 L620.0 65.3 L623.3 34.5 L626.7 57.2 L630.0 57.3 L633.3 65.3 L636.7 55.2 L640.0 57.4 L643.3 52.4 L646.7 63.1 L650.0 61.9 L653.3 54.5 L656.7 61.3 L660.0 52.0 L663.3 64.3 L666.7 61.8 L670.0 62.5 L673.3 64.3 L676.7 68.7 L680.0 62.2 L683.3 67.6 L686.7 71.3 L690.0 72.6 L693.3 69.5 L696.7 68.7 L700.0 73.7 L703.3 60.4 L706.7 65.5 L710.0 66.0 L713.3 59.6 L716.7 66.8 L720.0 64.9 L723.3 68.3 L726.7 31.7 L730.0 63.1 L733.3 54.9 L736.7 55.8 L740.0 58.4 L743.3 70.1 L746.7 70.7 L750.0 66.5 L753.3 63.4 L756.7 78.6 L760.0 78.9 L763.3 78.3 L766.7 80.2 L770.0 43.7 L773.3 85.7 L776.7 83.9 L780.0 82.4 L783.3 77.9 L786.7 76.5 L790.0 72.4 L793.3 74.8 L796.7 71.2 L800.0 68.9 L803.3 68.2 L806.7 67.1 L810.0 71.7 L813.3 67.8 L816.7 64.1 L820.0 72.0 L823.3 60.6 L826.7 58.1 L830.0 60.2 L833.3 65.1 L836.7 56.9 L840.0 58.4 L843.3 56.4 L846.7 58.7 L850.0 56.7 L853.3 60.6 L856.7 64.1 L860.0 68.8 L863.3 57.0 L866.7 66.0 L870.0 64.6 L873.3 61.5 L876.7 55.9 L880.0 45.4 L883.3 43.1 L886.7 45.9 L890.0 40.4 L893.3 44.2 L896.7 30.2 L900.0 30.3 L903.3 33.0 L906.7 31.8 L910.0 26.7 L913.3 33.7 L916.7 24.7 L920.0 3 L923.3 31.0 L926.7 32.9 L930.0 20.9 L933.3 31.1 L936.7 23.7 L940.0 29.0 L943.3 29.4 L946.7 24.1 L950.0 34.2 L953.3 25.6 L956.7 31.6 L960.0 30.1 L963.3 30.1 L966.7 30.4 L970.0 29.2 L973.3 20.0 L976.7 29.8 L980.0 18.1 L983.3 20.5 L986.7 20.2 L990.0 17.7 L993.3 24.6 L996.7 28.8 L1000.0 19.5 L1000 0 Z'/></svg>") bottom / 100% 42px no-repeat;
}
.fuss-band {
  margin-top: -6px;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 100 L0.0 52.4 L3.3 27.4 L6.7 33.1 L10.0 41.5 L13.3 33.9 L16.7 35.6 L20.0 44.7 L23.3 43.5 L26.7 45.2 L30.0 51.0 L33.3 57.9 L36.7 52.9 L40.0 59.2 L43.3 64.0 L46.7 66.1 L50.0 69.3 L53.3 61.5 L56.7 69.8 L60.0 75.6 L63.3 63.8 L66.7 68.4 L70.0 68.6 L73.3 92.8 L76.7 87.7 L80.0 68.7 L83.3 69.4 L86.7 66.1 L90.0 66.8 L93.3 66.4 L96.7 74.5 L100.0 67.3 L103.3 72.8 L106.7 63.7 L110.0 69.0 L113.3 76.9 L116.7 81.0 L120.0 73.6 L123.3 73.5 L126.7 80.7 L130.0 78.3 L133.3 81.5 L136.7 97 L140.0 82.8 L143.3 84.0 L146.7 81.6 L150.0 76.1 L153.3 97 L156.7 70.3 L160.0 69.7 L163.3 67.2 L166.7 72.2 L170.0 67.8 L173.3 59.5 L176.7 60.5 L180.0 56.6 L183.3 66.6 L186.7 64.1 L190.0 52.4 L193.3 66.0 L196.7 63.5 L200.0 58.4 L203.3 62.8 L206.7 60.8 L210.0 68.5 L213.3 60.9 L216.7 65.2 L220.0 61.6 L223.3 60.4 L226.7 63.1 L230.0 60.8 L233.3 71.5 L236.7 64.9 L240.0 62.7 L243.3 59.6 L246.7 69.2 L250.0 61.8 L253.3 61.6 L256.7 59.1 L260.0 57.4 L263.3 63.7 L266.7 51.2 L270.0 56.2 L273.3 51.0 L276.7 55.2 L280.0 60.9 L283.3 56.2 L286.7 57.9 L290.0 62.5 L293.3 70.4 L296.7 67.7 L300.0 71.4 L303.3 66.1 L306.7 65.4 L310.0 70.5 L313.3 70.1 L316.7 79.1 L320.0 71.6 L323.3 78.8 L326.7 72.4 L330.0 77.6 L333.3 71.9 L336.7 74.9 L340.0 65.1 L343.3 57.8 L346.7 68.3 L350.0 64.9 L353.3 63.9 L356.7 63.7 L360.0 51.1 L363.3 58.2 L366.7 56.3 L370.0 57.4 L373.3 59.1 L376.7 55.3 L380.0 56.5 L383.3 62.6 L386.7 51.8 L390.0 59.6 L393.3 54.4 L396.7 61.7 L400.0 57.6 L403.3 47.1 L406.7 46.7 L410.0 45.3 L413.3 41.9 L416.7 48.6 L420.0 42.0 L423.3 42.8 L426.7 39.2 L430.0 38.0 L433.3 30.6 L436.7 30.3 L440.0 28.5 L443.3 29.7 L446.7 27.7 L450.0 19.8 L453.3 19.4 L456.7 21.3 L460.0 16.8 L463.3 17.4 L466.7 20.5 L470.0 28.4 L473.3 22.9 L476.7 25.7 L480.0 23.9 L483.3 21.7 L486.7 24.8 L490.0 32.4 L493.3 32.0 L496.7 30.1 L500.0 20.5 L503.3 22.3 L506.7 18.1 L510.0 27.7 L513.3 23.6 L516.7 23.1 L520.0 24.2 L523.3 13.9 L526.7 25.4 L530.0 25.1 L533.3 13.4 L536.7 13.4 L540.0 23.2 L543.3 22.0 L546.7 26.6 L550.0 21.3 L553.3 25.5 L556.7 43.8 L560.0 27.7 L563.3 39.6 L566.7 40.3 L570.0 32.7 L573.3 44.3 L576.7 42.8 L580.0 35.9 L583.3 40.7 L586.7 50.3 L590.0 45.7 L593.3 42.2 L596.7 42.7 L600.0 36.3 L603.3 44.0 L606.7 37.3 L610.0 44.5 L613.3 33.3 L616.7 36.3 L620.0 42.9 L623.3 33.2 L626.7 42.5 L630.0 41.7 L633.3 42.2 L636.7 41.6 L640.0 42.0 L643.3 49.0 L646.7 48.9 L650.0 49.4 L653.3 46.0 L656.7 42.5 L660.0 42.2 L663.3 50.3 L666.7 50.3 L670.0 48.9 L673.3 43.3 L676.7 53.1 L680.0 46.0 L683.3 43.4 L686.7 66.3 L690.0 48.0 L693.3 42.9 L696.7 67.3 L700.0 42.6 L703.3 40.0 L706.7 33.4 L710.0 36.7 L713.3 37.2 L716.7 62.7 L720.0 39.7 L723.3 43.4 L726.7 35.1 L730.0 38.9 L733.3 47.5 L736.7 40.6 L740.0 51.7 L743.3 47.3 L746.7 51.2 L750.0 45.4 L753.3 52.2 L756.7 60.1 L760.0 57.1 L763.3 58.1 L766.7 55.0 L770.0 61.1 L773.3 51.1 L776.7 59.3 L780.0 56.0 L783.3 48.9 L786.7 48.9 L790.0 53.3 L793.3 53.8 L796.7 63.3 L800.0 59.2 L803.3 52.4 L806.7 54.0 L810.0 69.3 L813.3 71.9 L816.7 66.4 L820.0 68.5 L823.3 75.8 L826.7 79.7 L830.0 77.3 L833.3 84.9 L836.7 76.5 L840.0 83.9 L843.3 85.1 L846.7 83.6 L850.0 83.5 L853.3 86.5 L856.7 83.7 L860.0 90.7 L863.3 80.1 L866.7 88.8 L870.0 80.3 L873.3 85.2 L876.7 76.3 L880.0 71.7 L883.3 83.8 L886.7 73.4 L890.0 69.2 L893.3 71.8 L896.7 82.4 L900.0 75.5 L903.3 75.8 L906.7 78.4 L910.0 81.9 L913.3 74.9 L916.7 78.4 L920.0 80.8 L923.3 72.7 L926.7 81.5 L930.0 76.0 L933.3 82.6 L936.7 75.9 L940.0 74.2 L943.3 75.7 L946.7 64.0 L950.0 72.8 L953.3 59.3 L956.7 62.1 L960.0 65.5 L963.3 61.7 L966.7 49.0 L970.0 49.2 L973.3 54.7 L976.7 53.9 L980.0 42.6 L983.3 48.9 L986.7 50.0 L990.0 52.2 L993.3 46.8 L996.7 43.4 L1000.0 81.9 L1000 100 Z'/></svg>") top / 100% 42px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 40px) no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 100 L0.0 52.4 L3.3 27.4 L6.7 33.1 L10.0 41.5 L13.3 33.9 L16.7 35.6 L20.0 44.7 L23.3 43.5 L26.7 45.2 L30.0 51.0 L33.3 57.9 L36.7 52.9 L40.0 59.2 L43.3 64.0 L46.7 66.1 L50.0 69.3 L53.3 61.5 L56.7 69.8 L60.0 75.6 L63.3 63.8 L66.7 68.4 L70.0 68.6 L73.3 92.8 L76.7 87.7 L80.0 68.7 L83.3 69.4 L86.7 66.1 L90.0 66.8 L93.3 66.4 L96.7 74.5 L100.0 67.3 L103.3 72.8 L106.7 63.7 L110.0 69.0 L113.3 76.9 L116.7 81.0 L120.0 73.6 L123.3 73.5 L126.7 80.7 L130.0 78.3 L133.3 81.5 L136.7 97 L140.0 82.8 L143.3 84.0 L146.7 81.6 L150.0 76.1 L153.3 97 L156.7 70.3 L160.0 69.7 L163.3 67.2 L166.7 72.2 L170.0 67.8 L173.3 59.5 L176.7 60.5 L180.0 56.6 L183.3 66.6 L186.7 64.1 L190.0 52.4 L193.3 66.0 L196.7 63.5 L200.0 58.4 L203.3 62.8 L206.7 60.8 L210.0 68.5 L213.3 60.9 L216.7 65.2 L220.0 61.6 L223.3 60.4 L226.7 63.1 L230.0 60.8 L233.3 71.5 L236.7 64.9 L240.0 62.7 L243.3 59.6 L246.7 69.2 L250.0 61.8 L253.3 61.6 L256.7 59.1 L260.0 57.4 L263.3 63.7 L266.7 51.2 L270.0 56.2 L273.3 51.0 L276.7 55.2 L280.0 60.9 L283.3 56.2 L286.7 57.9 L290.0 62.5 L293.3 70.4 L296.7 67.7 L300.0 71.4 L303.3 66.1 L306.7 65.4 L310.0 70.5 L313.3 70.1 L316.7 79.1 L320.0 71.6 L323.3 78.8 L326.7 72.4 L330.0 77.6 L333.3 71.9 L336.7 74.9 L340.0 65.1 L343.3 57.8 L346.7 68.3 L350.0 64.9 L353.3 63.9 L356.7 63.7 L360.0 51.1 L363.3 58.2 L366.7 56.3 L370.0 57.4 L373.3 59.1 L376.7 55.3 L380.0 56.5 L383.3 62.6 L386.7 51.8 L390.0 59.6 L393.3 54.4 L396.7 61.7 L400.0 57.6 L403.3 47.1 L406.7 46.7 L410.0 45.3 L413.3 41.9 L416.7 48.6 L420.0 42.0 L423.3 42.8 L426.7 39.2 L430.0 38.0 L433.3 30.6 L436.7 30.3 L440.0 28.5 L443.3 29.7 L446.7 27.7 L450.0 19.8 L453.3 19.4 L456.7 21.3 L460.0 16.8 L463.3 17.4 L466.7 20.5 L470.0 28.4 L473.3 22.9 L476.7 25.7 L480.0 23.9 L483.3 21.7 L486.7 24.8 L490.0 32.4 L493.3 32.0 L496.7 30.1 L500.0 20.5 L503.3 22.3 L506.7 18.1 L510.0 27.7 L513.3 23.6 L516.7 23.1 L520.0 24.2 L523.3 13.9 L526.7 25.4 L530.0 25.1 L533.3 13.4 L536.7 13.4 L540.0 23.2 L543.3 22.0 L546.7 26.6 L550.0 21.3 L553.3 25.5 L556.7 43.8 L560.0 27.7 L563.3 39.6 L566.7 40.3 L570.0 32.7 L573.3 44.3 L576.7 42.8 L580.0 35.9 L583.3 40.7 L586.7 50.3 L590.0 45.7 L593.3 42.2 L596.7 42.7 L600.0 36.3 L603.3 44.0 L606.7 37.3 L610.0 44.5 L613.3 33.3 L616.7 36.3 L620.0 42.9 L623.3 33.2 L626.7 42.5 L630.0 41.7 L633.3 42.2 L636.7 41.6 L640.0 42.0 L643.3 49.0 L646.7 48.9 L650.0 49.4 L653.3 46.0 L656.7 42.5 L660.0 42.2 L663.3 50.3 L666.7 50.3 L670.0 48.9 L673.3 43.3 L676.7 53.1 L680.0 46.0 L683.3 43.4 L686.7 66.3 L690.0 48.0 L693.3 42.9 L696.7 67.3 L700.0 42.6 L703.3 40.0 L706.7 33.4 L710.0 36.7 L713.3 37.2 L716.7 62.7 L720.0 39.7 L723.3 43.4 L726.7 35.1 L730.0 38.9 L733.3 47.5 L736.7 40.6 L740.0 51.7 L743.3 47.3 L746.7 51.2 L750.0 45.4 L753.3 52.2 L756.7 60.1 L760.0 57.1 L763.3 58.1 L766.7 55.0 L770.0 61.1 L773.3 51.1 L776.7 59.3 L780.0 56.0 L783.3 48.9 L786.7 48.9 L790.0 53.3 L793.3 53.8 L796.7 63.3 L800.0 59.2 L803.3 52.4 L806.7 54.0 L810.0 69.3 L813.3 71.9 L816.7 66.4 L820.0 68.5 L823.3 75.8 L826.7 79.7 L830.0 77.3 L833.3 84.9 L836.7 76.5 L840.0 83.9 L843.3 85.1 L846.7 83.6 L850.0 83.5 L853.3 86.5 L856.7 83.7 L860.0 90.7 L863.3 80.1 L866.7 88.8 L870.0 80.3 L873.3 85.2 L876.7 76.3 L880.0 71.7 L883.3 83.8 L886.7 73.4 L890.0 69.2 L893.3 71.8 L896.7 82.4 L900.0 75.5 L903.3 75.8 L906.7 78.4 L910.0 81.9 L913.3 74.9 L916.7 78.4 L920.0 80.8 L923.3 72.7 L926.7 81.5 L930.0 76.0 L933.3 82.6 L936.7 75.9 L940.0 74.2 L943.3 75.7 L946.7 64.0 L950.0 72.8 L953.3 59.3 L956.7 62.1 L960.0 65.5 L963.3 61.7 L966.7 49.0 L970.0 49.2 L973.3 54.7 L976.7 53.9 L980.0 42.6 L983.3 48.9 L986.7 50.0 L990.0 52.2 L993.3 46.8 L996.7 43.4 L1000.0 81.9 L1000 100 Z'/></svg>") top / 100% 42px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 40px) no-repeat;
}
.fuss-band__inhalt { padding-top: clamp(3.5rem, 7vw, 6rem); }

/* Schräglagen der Karten: auf grossen Bildschirmen deutlicher */
@media (min-width: 761px) {
  .karte--einstieg { transform: rotate(-.8deg) translateY(6px); }
  .karte--logbuch  { transform: rotate(.5deg) translateY(-4px); }
  .karte--heft     { transform: rotate(1.6deg) translate(4px, 14px); }
  .crew            { transform: rotate(-.35deg); margin-top: .6rem; }
  .rivalin         { transform: rotate(1.8deg) translateY(10px); }
  .karte--buch     { transform: rotate(-1.1deg) translateY(4px); }
  .karte--eltern   { transform: rotate(.9deg) translateY(12px); }
  .figur:nth-child(3n+1) { transform: rotate(-1.8deg); }
  .figur:nth-child(3n+2) { transform: rotate(1.2deg) translateY(8px); }
  .figur:nth-child(3n)   { transform: rotate(-.6deg) translateY(-3px); }
}
@media (max-width: 760px) {
  .karte--einstieg, .karte--buch { transform: rotate(-.5deg); }
  .karte--logbuch, .karte--eltern { transform: rotate(.4deg); }
  .karte--heft { transform: rotate(.7deg); }
  .reihe { gap: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .knopf:hover { transform: none; } }

.einstieg__pip img {
  mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 52%, #000 62%, transparent 100%);
          mask: radial-gradient(ellipse 50% 50% at 50% 52%, #000 62%, transparent 100%);
}
@media (min-width: 761px) {
  .karte--einstieg { grid-template-columns: 1fr .95fr; }
  .einstieg__pip img { max-width: none; width: 118%; margin: 0 -9% 0 -9%; }
  .notiz { top: -4%; right: 0; }
}
.rivalin { position: relative; }
@media (max-width: 760px) { .einstieg__pip img { max-width: 230px; } }

/* =====================================================================
   Figurenseiten (crew/*.html)
   ===================================================================== */
.seite-figur .kopf { position: relative; background: linear-gradient(rgba(30,16,8,.55), rgba(30,16,8,.15)); }
.figur-seite { max-width: 1320px; margin: 0 auto; padding: 0 clamp(.75rem, 2vw, 1.6rem) clamp(2rem, 4vw, 3rem); }
.brotkrumen { margin: .2rem 0 1.4rem; }
.brotkrumen a { font: 700 1.05rem var(--hand); color: #f6e7c8; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.brotkrumen a:hover { text-decoration: underline; }

.figur-kopf { display: grid; grid-template-columns: minmax(260px, .9fr) 1.3fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.figur-foto { margin: 0; position: relative; padding: 14px 14px 46px; background: #fbf4e4; box-shadow: 0 12px 26px rgba(20,10,4,.5); transform: rotate(-2.4deg); }
.figur-foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.figur-foto::after { content: ""; position: absolute; top: -14px; left: 50%; margin-left: -60px; width: 120px; height: 30px; background: linear-gradient(rgba(255,250,230,.55), rgba(240,225,190,.7)); transform: rotate(4deg);
  clip-path: polygon(3% 0, 97% 4%, 100% 20%, 97% 38%, 100% 58%, 97% 80%, 99% 100%, 2% 96%, 0 78%, 3% 56%, 0 36%, 3% 18%); }

.steckbrief { transform: rotate(.8deg); padding: clamp(1.4rem, 3vw, 2.4rem); }
.steckbrief h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--tinte); transform: rotate(-1.5deg); transform-origin: left; margin: .1em 0 .2em; }
.steckbrief__vor { font: 700 1.1rem var(--hand); color: var(--figur); margin: 0; }
.steckbrief__einzeiler { font: 700 1.3rem/1.25 var(--hand); color: var(--figur) !important; }
.steckbrief__intro { font-size: 1.08rem; }
.steckbrief__stempel {
  position: absolute !important; right: 1.4rem; top: 1.4rem; margin: 0; padding: .35rem .7rem; max-width: 9.5rem; text-align: center;
  font: 800 .8rem/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; color: rgba(184,50,42,.8) !important;
  border: 3px double rgba(184,50,42,.75); border-radius: 6px; transform: rotate(9deg); mix-blend-mode: multiply;
}
.seite-figur--rivalin .steckbrief__stempel { color: rgba(91,58,122,.85) !important; border-color: rgba(91,58,122,.8); }
.steckbrief__liste { margin: 1.2rem 0 1.4rem; display: grid; gap: .1rem; }
.steckbrief__liste div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; padding: .55rem 0; border-bottom: 1.5px dashed rgba(90,55,32,.3); }
.steckbrief__liste dt { font: 700 1.05rem var(--hand); color: var(--tinte-weich); }
.steckbrief__liste dd { margin: 0; color: var(--tinte); font-weight: 600; }
.sprechblase { position: relative; margin: 0; display: inline-block; max-width: 100%; padding: .8rem 1.3rem; background: #fff; border: 3px solid var(--tinte); border-radius: 22px 26px 24px 18px; transform: rotate(-1.2deg); box-shadow: 4px 5px 0 rgba(43,26,16,.2); }
.sprechblase::before { content: ""; position: absolute; left: 1.6rem; bottom: -17px; width: 22px; height: 18px; background: #fff; border-left: 3px solid var(--tinte); border-bottom: 3px solid var(--tinte); transform: skewX(-25deg); }
.sprechblase p { margin: 0; font: 800 1.25rem/1.25 var(--display); color: var(--tinte) !important; }

.figur-szene { position: relative; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.figur-szene img { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: 3px;
  -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0); filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }

.figur-szene__zettel { position: absolute; left: clamp(1rem, 4vw, 3rem); bottom: -1.4rem; max-width: 26rem; margin: 0; padding: .8rem 1.1rem;
  font: 700 1.1rem/1.3 var(--hand); color: var(--tinte); background: #fbf2d8; transform: rotate(-2deg); box-shadow: 0 6px 12px rgba(0,0,0,.35); }

.figur-reihe { display: grid; grid-template-columns: 1.2fr .9fr 1.1fr; gap: clamp(1rem, 2vw, 1.6rem); margin-bottom: clamp(1.4rem, 3vw, 2.2rem); align-items: start; }
.figur-fakt__vor { font: 700 1rem var(--hand); color: var(--rot) !important; margin: 0 0 .2rem; }
.karte--heft.figur-fakt h2 { font-family: var(--display); font-size: 1.35rem; text-align: left; }
.figur-fakt p { font-size: 1.05rem; line-height: 1.75; }
.figur-gag h2 { color: var(--figur); }
.figur-gag p { font: 700 1.15rem/1.4 var(--hand); color: var(--tinte) !important; }
.figur-freunde ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.figur-freunde a { display: grid; grid-template-columns: 64px 1fr; gap: .8rem; align-items: center; text-decoration: none; color: var(--tinte-weich); font-size: .95rem; line-height: 1.35; }
.figur-freunde img { width: 64px; height: 64px; object-fit: cover; object-position: center 25%; border-radius: 50%; border: 3px solid #fbf4e4; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.figur-freunde strong { display: block; color: var(--tinte); font-family: var(--display); }
.figur-freunde a:hover strong { color: var(--rot); }

.figur-folgen { margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
.figur-folgen .folgen { grid-template-columns: repeat(auto-fill, minmax(200px, 260px)); margin: 0; }
.folge__bild--leer { background: repeating-linear-gradient(45deg, #4a3a2c 0 10px, #3d2f23 10px 20px); }

.crew-leiste { position: relative; padding: 2.6rem 1rem 1.2rem; }
.crew-leiste::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(30,16,8,.6), rgba(30,16,8,.78)); filter: url(#stoffrand); }
.crew-leiste { isolation: isolate; }
.crew-leiste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.6rem, 2vw, 1.6rem); }
.crew-leiste a { display: grid; justify-items: center; gap: .4rem; text-decoration: none; color: #f6e7c8; font: 700 1rem var(--display); transition: transform .15s ease; }
.crew-leiste img { width: 92px; height: 92px; object-fit: cover; object-position: center 25%; border-radius: 50%; border: 4px solid #fbf4e4; box-shadow: 0 4px 10px rgba(0,0,0,.45); }
.crew-leiste li:nth-child(odd) a { transform: rotate(-3deg); } .crew-leiste li:nth-child(even) a { transform: rotate(2deg) translateY(4px); }
.crew-leiste a:hover { transform: scale(1.06) rotate(0); }
.crew-leiste [aria-current] img { border-color: var(--gold-hell); box-shadow: 0 0 0 4px var(--rot), 0 4px 10px rgba(0,0,0,.45); }

/* Startseite: Crew-Karten verlinken */
.figur > a { display: block; text-decoration: none; color: inherit; transition: transform .15s ease; }
.figur > a:hover { transform: translateY(-4px) rotate(-.5deg); }
.figur > a:hover h3 { color: var(--rot); }
.rivalin__link { font: 700 1rem var(--hand); color: var(--gold-hell); }

@media (max-width: 900px) {
  .figur-kopf { grid-template-columns: 1fr; }
  .figur-foto { max-width: 340px; margin: 0 auto; }
  .figur-reihe { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .steckbrief__liste div { grid-template-columns: 1fr; gap: .1rem; }
  .steckbrief__stempel { position: static !important; display: inline-block; margin-bottom: .6rem; transform: rotate(-3deg); }
  .figur-szene img { aspect-ratio: 4/3; }
  .figur-szene__zettel { position: relative; left: auto; bottom: auto; margin: -1.2rem .8rem 0; }
  .crew-leiste img { width: 70px; height: 70px; }
}

.figur-szene img { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><path d='M0.0 5.6 L8.3 6.7 L16.7 7.2 L25.0 8.5 L33.3 6.7 L41.7 8.3 L50.0 0.3 L58.3 4.2 L66.7 8.5 L75.0 5.8 L83.3 8.1 L91.7 1.0 L100.0 4.2 L108.3 2.2 L116.7 4.9 L125.0 5.2 L133.3 0.1 L141.7 2.0 L150.0 2.5 L158.3 8.2 L166.7 6.9 L175.0 1.4 L183.3 7.2 L191.7 1.2 L200.0 5.6 L208.3 1.1 L216.7 0.0 L225.0 7.8 L233.3 1.9 L241.7 1.9 L250.0 8.8 L258.3 7.9 L266.7 2.6 L275.0 8.7 L283.3 4.9 L291.7 6.1 L300.0 1.8 L308.3 8.5 L316.7 6.2 L325.0 8.7 L333.3 8.0 L341.7 2.7 L350.0 3.3 L358.3 1.5 L366.7 1.3 L375.0 0.6 L383.3 2.7 L391.7 5.4 L400.0 0.0 L408.3 6.1 L416.7 3.0 L425.0 2.8 L433.3 7.4 L441.7 4.3 L450.0 2.8 L458.3 4.3 L466.7 6.3 L475.0 0.5 L483.3 8.8 L491.7 0.2 L500.0 6.7 L508.3 7.6 L516.7 0.2 L525.0 7.1 L533.3 3.3 L541.7 5.2 L550.0 0.1 L558.3 0.4 L566.7 1.6 L575.0 8.6 L583.3 1.8 L591.7 6.8 L600.0 8.4 L608.3 8.5 L616.7 3.1 L625.0 3.2 L633.3 4.7 L641.7 7.0 L650.0 1.0 L658.3 6.7 L666.7 7.2 L675.0 7.7 L683.3 0.3 L691.7 8.5 L700.0 0.8 L708.3 3.1 L716.7 5.5 L725.0 8.3 L733.3 3.1 L741.7 8.3 L750.0 4.9 L758.3 2.8 L766.7 2.9 L775.0 1.6 L783.3 0.7 L791.7 1.3 L800.0 6.2 L808.3 9.0 L816.7 1.5 L825.0 0.4 L833.3 8.9 L841.7 4.8 L850.0 3.7 L858.3 2.1 L866.7 5.3 L875.0 7.4 L883.3 4.1 L891.7 3.8 L900.0 0.5 L908.3 8.2 L916.7 0.3 L925.0 4.4 L933.3 7.5 L941.7 1.2 L950.0 6.6 L958.3 8.5 L966.7 5.7 L975.0 7.1 L983.3 1.0 L991.7 3.9 L1000.0 1.3 L994.1 0.0 L997.9 12.5 L996.8 25.0 L993.0 37.5 L994.0 50.0 L993.2 62.5 L996.8 75.0 L996.6 87.5 L994.9 100.0 L996.6 112.5 L998.0 125.0 L997.2 137.5 L999.0 150.0 L997.4 162.5 L993.1 175.0 L993.3 187.5 L995.6 200.0 L996.5 212.5 L997.6 225.0 L999.4 237.5 L998.1 250.0 L994.5 262.5 L993.9 275.0 L997.5 287.5 L994.5 300.0 L994.6 312.5 L995.1 325.0 L995.4 337.5 L994.7 350.0 L997.5 362.5 L995.1 375.0 L998.0 387.5 L996.6 400.0 L994.6 412.5 L995.2 425.0 L997.9 437.5 L993.4 450.0 L995.5 462.5 L995.9 475.0 L999.9 487.5 L996.2 500.0 L998.2 512.5 L995.3 525.0 L996.8 537.5 L994.3 550.0 L995.5 562.5 L994.4 575.0 L997.6 587.5 L995.5 600.0 L994.8 612.5 L994.2 625.0 L997.5 637.5 L994.1 650.0 L993.9 662.5 L995.2 675.0 L993.2 687.5 L993.3 700.0 L996.4 712.5 L996.3 725.0 L998.8 737.5 L994.1 750.0 L993.4 762.5 L996.7 775.0 L995.2 787.5 L995.0 800.0 L994.9 812.5 L998.8 825.0 L994.5 837.5 L995.9 850.0 L995.3 862.5 L997.1 875.0 L995.6 887.5 L994.6 900.0 L995.5 912.5 L995.0 925.0 L999.8 937.5 L998.9 950.0 L996.9 962.5 L995.4 975.0 L998.5 987.5 L995.2 1000.0 L1000.0 994.3 L991.7 999.6 L983.3 995.8 L975.0 998.0 L966.7 999.5 L958.3 998.8 L950.0 997.1 L941.7 998.4 L933.3 998.3 L925.0 999.7 L916.7 995.8 L908.3 996.6 L900.0 994.5 L891.7 994.7 L883.3 997.9 L875.0 991.9 L866.7 1000.0 L858.3 996.4 L850.0 997.5 L841.7 996.3 L833.3 999.0 L825.0 992.5 L816.7 996.6 L808.3 999.7 L800.0 994.5 L791.7 999.1 L783.3 995.1 L775.0 996.9 L766.7 994.8 L758.3 991.4 L750.0 992.6 L741.7 996.2 L733.3 992.7 L725.0 994.2 L716.7 996.7 L708.3 998.7 L700.0 994.6 L691.7 994.9 L683.3 991.4 L675.0 991.3 L666.7 994.5 L658.3 996.8 L650.0 992.0 L641.7 1000.0 L633.3 999.0 L625.0 994.9 L616.7 994.5 L608.3 998.7 L600.0 994.3 L591.7 992.0 L583.3 996.6 L575.0 996.1 L566.7 998.0 L558.3 997.4 L550.0 991.2 L541.7 996.6 L533.3 991.3 L525.0 991.8 L516.7 994.6 L508.3 997.7 L500.0 991.2 L491.7 995.5 L483.3 996.3 L475.0 997.1 L466.7 991.1 L458.3 995.6 L450.0 997.4 L441.7 995.7 L433.3 998.9 L425.0 994.4 L416.7 996.0 L408.3 997.4 L400.0 993.0 L391.7 992.6 L383.3 999.9 L375.0 995.2 L366.7 997.5 L358.3 991.6 L350.0 993.0 L341.7 997.8 L333.3 997.6 L325.0 998.6 L316.7 991.1 L308.3 997.4 L300.0 994.5 L291.7 995.7 L283.3 994.2 L275.0 994.6 L266.7 993.3 L258.3 998.9 L250.0 993.2 L241.7 997.3 L233.3 995.2 L225.0 997.0 L216.7 997.3 L208.3 995.2 L200.0 995.8 L191.7 996.8 L183.3 993.3 L175.0 994.7 L166.7 999.7 L158.3 997.7 L150.0 995.9 L141.7 991.8 L133.3 992.0 L125.0 995.1 L116.7 999.9 L108.3 993.0 L100.0 996.2 L91.7 994.8 L83.3 993.6 L75.0 994.3 L66.7 995.7 L58.3 991.8 L50.0 996.5 L41.7 996.5 L33.3 992.3 L25.0 998.2 L16.7 997.3 L8.3 992.5 L0.0 999.4 L5.9 1000.0 L4.9 987.5 L3.0 975.0 L2.0 962.5 L5.5 950.0 L6.4 937.5 L1.0 925.0 L3.3 912.5 L3.8 900.0 L3.5 887.5 L2.3 875.0 L1.1 862.5 L4.1 850.0 L5.7 837.5 L0.5 825.0 L1.6 812.5 L5.7 800.0 L5.5 787.5 L4.6 775.0 L0.2 762.5 L5.1 750.0 L6.9 737.5 L7.0 725.0 L4.9 712.5 L0.3 700.0 L5.9 687.5 L1.5 675.0 L4.5 662.5 L6.7 650.0 L5.0 637.5 L0.9 625.0 L2.0 612.5 L6.4 600.0 L1.0 587.5 L4.3 575.0 L2.9 562.5 L1.1 550.0 L4.4 537.5 L0.3 525.0 L0.8 512.5 L2.7 500.0 L0.5 487.5 L0.4 475.0 L4.0 462.5 L5.2 450.0 L6.1 437.5 L0.9 425.0 L3.0 412.5 L2.2 400.0 L4.2 387.5 L3.4 375.0 L6.6 362.5 L2.6 350.0 L0.4 337.5 L4.9 325.0 L1.1 312.5 L4.4 300.0 L3.5 287.5 L6.4 275.0 L3.9 262.5 L4.3 250.0 L1.8 237.5 L3.9 225.0 L1.8 212.5 L5.3 200.0 L3.6 187.5 L0.9 175.0 L1.6 162.5 L2.6 150.0 L5.2 137.5 L1.3 125.0 L5.0 112.5 L4.6 100.0 L0.6 87.5 L4.7 75.0 L0.6 62.5 L0.9 50.0 L4.2 37.5 L1.7 25.0 L6.1 12.5 L3.4 0.0 Z'/></svg>") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><path d='M0.0 5.6 L8.3 6.7 L16.7 7.2 L25.0 8.5 L33.3 6.7 L41.7 8.3 L50.0 0.3 L58.3 4.2 L66.7 8.5 L75.0 5.8 L83.3 8.1 L91.7 1.0 L100.0 4.2 L108.3 2.2 L116.7 4.9 L125.0 5.2 L133.3 0.1 L141.7 2.0 L150.0 2.5 L158.3 8.2 L166.7 6.9 L175.0 1.4 L183.3 7.2 L191.7 1.2 L200.0 5.6 L208.3 1.1 L216.7 0.0 L225.0 7.8 L233.3 1.9 L241.7 1.9 L250.0 8.8 L258.3 7.9 L266.7 2.6 L275.0 8.7 L283.3 4.9 L291.7 6.1 L300.0 1.8 L308.3 8.5 L316.7 6.2 L325.0 8.7 L333.3 8.0 L341.7 2.7 L350.0 3.3 L358.3 1.5 L366.7 1.3 L375.0 0.6 L383.3 2.7 L391.7 5.4 L400.0 0.0 L408.3 6.1 L416.7 3.0 L425.0 2.8 L433.3 7.4 L441.7 4.3 L450.0 2.8 L458.3 4.3 L466.7 6.3 L475.0 0.5 L483.3 8.8 L491.7 0.2 L500.0 6.7 L508.3 7.6 L516.7 0.2 L525.0 7.1 L533.3 3.3 L541.7 5.2 L550.0 0.1 L558.3 0.4 L566.7 1.6 L575.0 8.6 L583.3 1.8 L591.7 6.8 L600.0 8.4 L608.3 8.5 L616.7 3.1 L625.0 3.2 L633.3 4.7 L641.7 7.0 L650.0 1.0 L658.3 6.7 L666.7 7.2 L675.0 7.7 L683.3 0.3 L691.7 8.5 L700.0 0.8 L708.3 3.1 L716.7 5.5 L725.0 8.3 L733.3 3.1 L741.7 8.3 L750.0 4.9 L758.3 2.8 L766.7 2.9 L775.0 1.6 L783.3 0.7 L791.7 1.3 L800.0 6.2 L808.3 9.0 L816.7 1.5 L825.0 0.4 L833.3 8.9 L841.7 4.8 L850.0 3.7 L858.3 2.1 L866.7 5.3 L875.0 7.4 L883.3 4.1 L891.7 3.8 L900.0 0.5 L908.3 8.2 L916.7 0.3 L925.0 4.4 L933.3 7.5 L941.7 1.2 L950.0 6.6 L958.3 8.5 L966.7 5.7 L975.0 7.1 L983.3 1.0 L991.7 3.9 L1000.0 1.3 L994.1 0.0 L997.9 12.5 L996.8 25.0 L993.0 37.5 L994.0 50.0 L993.2 62.5 L996.8 75.0 L996.6 87.5 L994.9 100.0 L996.6 112.5 L998.0 125.0 L997.2 137.5 L999.0 150.0 L997.4 162.5 L993.1 175.0 L993.3 187.5 L995.6 200.0 L996.5 212.5 L997.6 225.0 L999.4 237.5 L998.1 250.0 L994.5 262.5 L993.9 275.0 L997.5 287.5 L994.5 300.0 L994.6 312.5 L995.1 325.0 L995.4 337.5 L994.7 350.0 L997.5 362.5 L995.1 375.0 L998.0 387.5 L996.6 400.0 L994.6 412.5 L995.2 425.0 L997.9 437.5 L993.4 450.0 L995.5 462.5 L995.9 475.0 L999.9 487.5 L996.2 500.0 L998.2 512.5 L995.3 525.0 L996.8 537.5 L994.3 550.0 L995.5 562.5 L994.4 575.0 L997.6 587.5 L995.5 600.0 L994.8 612.5 L994.2 625.0 L997.5 637.5 L994.1 650.0 L993.9 662.5 L995.2 675.0 L993.2 687.5 L993.3 700.0 L996.4 712.5 L996.3 725.0 L998.8 737.5 L994.1 750.0 L993.4 762.5 L996.7 775.0 L995.2 787.5 L995.0 800.0 L994.9 812.5 L998.8 825.0 L994.5 837.5 L995.9 850.0 L995.3 862.5 L997.1 875.0 L995.6 887.5 L994.6 900.0 L995.5 912.5 L995.0 925.0 L999.8 937.5 L998.9 950.0 L996.9 962.5 L995.4 975.0 L998.5 987.5 L995.2 1000.0 L1000.0 994.3 L991.7 999.6 L983.3 995.8 L975.0 998.0 L966.7 999.5 L958.3 998.8 L950.0 997.1 L941.7 998.4 L933.3 998.3 L925.0 999.7 L916.7 995.8 L908.3 996.6 L900.0 994.5 L891.7 994.7 L883.3 997.9 L875.0 991.9 L866.7 1000.0 L858.3 996.4 L850.0 997.5 L841.7 996.3 L833.3 999.0 L825.0 992.5 L816.7 996.6 L808.3 999.7 L800.0 994.5 L791.7 999.1 L783.3 995.1 L775.0 996.9 L766.7 994.8 L758.3 991.4 L750.0 992.6 L741.7 996.2 L733.3 992.7 L725.0 994.2 L716.7 996.7 L708.3 998.7 L700.0 994.6 L691.7 994.9 L683.3 991.4 L675.0 991.3 L666.7 994.5 L658.3 996.8 L650.0 992.0 L641.7 1000.0 L633.3 999.0 L625.0 994.9 L616.7 994.5 L608.3 998.7 L600.0 994.3 L591.7 992.0 L583.3 996.6 L575.0 996.1 L566.7 998.0 L558.3 997.4 L550.0 991.2 L541.7 996.6 L533.3 991.3 L525.0 991.8 L516.7 994.6 L508.3 997.7 L500.0 991.2 L491.7 995.5 L483.3 996.3 L475.0 997.1 L466.7 991.1 L458.3 995.6 L450.0 997.4 L441.7 995.7 L433.3 998.9 L425.0 994.4 L416.7 996.0 L408.3 997.4 L400.0 993.0 L391.7 992.6 L383.3 999.9 L375.0 995.2 L366.7 997.5 L358.3 991.6 L350.0 993.0 L341.7 997.8 L333.3 997.6 L325.0 998.6 L316.7 991.1 L308.3 997.4 L300.0 994.5 L291.7 995.7 L283.3 994.2 L275.0 994.6 L266.7 993.3 L258.3 998.9 L250.0 993.2 L241.7 997.3 L233.3 995.2 L225.0 997.0 L216.7 997.3 L208.3 995.2 L200.0 995.8 L191.7 996.8 L183.3 993.3 L175.0 994.7 L166.7 999.7 L158.3 997.7 L150.0 995.9 L141.7 991.8 L133.3 992.0 L125.0 995.1 L116.7 999.9 L108.3 993.0 L100.0 996.2 L91.7 994.8 L83.3 993.6 L75.0 994.3 L66.7 995.7 L58.3 991.8 L50.0 996.5 L41.7 996.5 L33.3 992.3 L25.0 998.2 L16.7 997.3 L8.3 992.5 L0.0 999.4 L5.9 1000.0 L4.9 987.5 L3.0 975.0 L2.0 962.5 L5.5 950.0 L6.4 937.5 L1.0 925.0 L3.3 912.5 L3.8 900.0 L3.5 887.5 L2.3 875.0 L1.1 862.5 L4.1 850.0 L5.7 837.5 L0.5 825.0 L1.6 812.5 L5.7 800.0 L5.5 787.5 L4.6 775.0 L0.2 762.5 L5.1 750.0 L6.9 737.5 L7.0 725.0 L4.9 712.5 L0.3 700.0 L5.9 687.5 L1.5 675.0 L4.5 662.5 L6.7 650.0 L5.0 637.5 L0.9 625.0 L2.0 612.5 L6.4 600.0 L1.0 587.5 L4.3 575.0 L2.9 562.5 L1.1 550.0 L4.4 537.5 L0.3 525.0 L0.8 512.5 L2.7 500.0 L0.5 487.5 L0.4 475.0 L4.0 462.5 L5.2 450.0 L6.1 437.5 L0.9 425.0 L3.0 412.5 L2.2 400.0 L4.2 387.5 L3.4 375.0 L6.6 362.5 L2.6 350.0 L0.4 337.5 L4.9 325.0 L1.1 312.5 L4.4 300.0 L3.5 287.5 L6.4 275.0 L3.9 262.5 L4.3 250.0 L1.8 237.5 L3.9 225.0 L1.8 212.5 L5.3 200.0 L3.6 187.5 L0.9 175.0 L1.6 162.5 L2.6 150.0 L5.2 137.5 L1.3 125.0 L5.0 112.5 L4.6 100.0 L0.6 87.5 L4.7 75.0 L0.6 62.5 L0.9 50.0 L4.2 37.5 L1.7 25.0 L6.1 12.5 L3.4 0.0 Z'/></svg>") 0 0 / 100% 100% no-repeat; filter: none; }
.figur-szene { filter: drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
.figur-szene__zettel { z-index: 2; }
.brotkrumen { margin-top: .6rem; }
.figur-reihe--zwei { grid-template-columns: 1.6fr 1fr; }
.figur-reihe:not(.figur-reihe--zwei) { grid-template-columns: 1fr 1fr; }
.figur-reihe .figur-folgen { margin-bottom: 0; }
@media (max-width: 900px) { .figur-reihe--zwei, .figur-reihe:not(.figur-reihe--zwei) { grid-template-columns: 1fr; } }

.bald { display: inline-block; margin: .2rem 0 0; padding: .35rem .8rem; font: 700 1.05rem var(--hand); color: var(--tinte) !important; background: #fbf2d8; transform: rotate(-1.5deg); box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.newsletter__titel { font: 700 1rem var(--hand); margin: 0; }
.brotkrumen a { font-size: 1.2rem; background: rgba(43,26,16,.55); padding: .2rem .7rem; border-radius: 4px; }

/* ---------- Unterseiten Abenteuer & Logbuch ---------- */
.staffel-kopf { grid-template-columns: 1fr 1.15fr; align-items: center; }
.staffel-kopf .figur-foto { transform: rotate(2deg); }
.staffel-kopf .figur-foto img, .logbuch-kopf .figur-foto img { aspect-ratio: 16/10; }
.staffel-karte { margin-bottom: clamp(2.4rem, 4vw, 3.4rem); transform: rotate(-.4deg); }
.staffel-karte h2 { margin-top: 0; }
.staffel-folgen { position: relative; padding-top: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.staffel-folgen .brett { left: .4rem; top: -.4rem; }
.abenteuer-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(1.1rem, 2.2vw, 1.8rem); }
.abenteuer { display: flex; flex-direction: column; scroll-margin-top: 6rem; }
.abenteuer:nth-child(3n+1) { transform: rotate(-.9deg); }
.abenteuer:nth-child(3n+2) { transform: rotate(.7deg) translateY(6px); }
.abenteuer:nth-child(3n) { transform: rotate(-.3deg) translateY(-3px); }
.abenteuer .folge__bild { margin-bottom: .7rem; transform: rotate(-1.2deg); }
.abenteuer:nth-child(even) .folge__bild { transform: rotate(1.4deg); }
.abenteuer .folge__play svg { opacity: 1; transform: none; }
.abenteuer--zu .folge__bild img { filter: blur(5px) grayscale(.6) brightness(.7); transform: scale(1.1); }
.abenteuer h3 { font-family: var(--display); font-size: 1.3rem; margin: .1em 0 .3em; color: var(--tinte); }
.abenteuer p { margin: 0 0 .7rem; }
.abenteuer__nr { font: 700 1rem var(--hand); color: var(--rot); display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.abenteuer__status { font: 700 .78rem var(--body, inherit); color: var(--tinte-weich); background: rgba(90,55,32,.12); padding: .15em .6em; border-radius: 99px; white-space: nowrap; }
.abenteuer__status--offen { background: var(--rot); color: #fff; }
.abenteuer__lernen { margin-top: auto; display: block; padding: .6rem .8rem; background: rgba(46,92,138,.1); border-left: 4px solid #2e5c8a; border-radius: 2px; font: 700 1rem/1.3 var(--hand); color: var(--tinte); text-decoration: none; }
.abenteuer__lernen span { display: block; font-size: .82rem; color: #2e5c8a; }
.abenteuer__lernen:hover { background: rgba(46,92,138,.18); }
.abenteuer--weiter { justify-content: center; text-align: center; opacity: .82; }
.abenteuer--weiter h3 { font-family: var(--hand); font-size: 1.6rem; }
.rituale { max-width: 760px; margin: 0 auto; transform: rotate(.6deg); }
.rituale ul { padding-left: 1.2rem; }
.rituale li { margin-bottom: .5rem; }

.logbuch-kopf { grid-template-columns: 1fr 1fr; align-items: start; }
.logbuch-deckel h1 { font-family: var(--hand); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--tinte); margin: .05em 0 .3em; transform: rotate(-1.5deg); transform-origin: left; text-align: left; }
.logbuch-deckel { transform: rotate(.7deg); }
.logbuch-inhalt ol { margin: .2rem 0 1rem; padding-left: 1.6rem; }
.logbuch-inhalt li { margin: .15rem 0; }
.logbuch-inhalt a { color: var(--tinte); font-weight: 600; }
.logbuch-hinweis { font-size: .92rem; padding: .6rem .8rem; background: rgba(240,162,58,.18); border-radius: 2px; }
.experiment__titel { font: 700 1.05rem var(--hand); color: #2e5c8a !important; margin: .6rem 0 .2rem; }
.eintraege { display: grid; gap: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.eintrag { scroll-margin-top: 6rem; max-width: 1080px; width: 100%; justify-self: center; }
.eintrag:nth-child(odd) { transform: rotate(-.6deg); }
.eintrag:nth-child(even) { transform: rotate(.5deg) translateX(.6rem); }
.eintrag h2 { text-align: left !important; margin: .1em 0 .5em; }
.eintrag__vor { font: 700 .95rem var(--hand); color: var(--tinte-weich); margin: 0; }
.eintrag__vor a { color: var(--rot); }
.eintrag__inhalt { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
.eintrag--bild .eintrag__inhalt { grid-template-columns: minmax(220px, .8fr) 1.2fr; align-items: start; }
.eintrag:nth-child(even).eintrag--bild .eintrag__inhalt .heft__skizze { transform: rotate(1.8deg); }
.eintrag__antwort { font-size: 1.08rem; }
.experiment { position: relative; margin-top: .8rem; padding: 1rem 1.2rem 1rem; background: #fffbe9; box-shadow: 0 4px 10px rgba(60,35,10,.22); transform: rotate(-.8deg); }
.experiment::before { content: ""; position: absolute; top: -12px; left: 2rem; width: 90px; height: 24px; background: linear-gradient(rgba(255,250,230,.55), rgba(240,225,190,.75)); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.experiment h3 { font: 700 1.45rem var(--hand); color: var(--rot); margin: 0 0 .2rem; transform: rotate(-1deg); }
.experiment ul, .experiment ol { margin: 0 0 .3rem; padding-left: 1.4rem; }
.experiment li { margin: .15rem 0; }
.logbuch-ende { max-width: 760px; margin: 0 auto; text-align: center; transform: rotate(-.5deg); }

@media (max-width: 900px) {
  .staffel-kopf, .logbuch-kopf, .eintrag--bild .eintrag__inhalt { grid-template-columns: 1fr; }
  .staffel-kopf .figur-foto { order: -1; }
  .eintrag:nth-child(even) { transform: rotate(.5deg); }
}
@media (min-width: 901px) {
  .eintrag:not(.eintrag--bild) .eintrag__inhalt > div { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; align-items: start; }
  .eintrag:not(.eintrag--bild) .experiment { margin-top: 0; }
}

/* Logbuch: was noch kommt */
.logbuch-inhalt--bald a { color: var(--tinte-weich) !important; font-weight: 400 !important; }
.logbuch-inhalt--bald span { font: 700 .78rem var(--hand); color: #2e5c8a; background: rgba(46,92,138,.12); padding: .05em .5em; border-radius: 99px; white-space: nowrap; }
.bald-liste { position: relative; padding-top: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.bald-liste .brett { left: .4rem; top: -.4rem; }
.bald-liste ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(.9rem, 2vw, 1.4rem); }
.zettel-bald a { display: block; height: 100%; padding: 1rem 1.1rem 1.2rem; background: #fffbe9; box-shadow: 0 4px 10px rgba(30,15,5,.35); text-decoration: none; color: var(--tinte); position: relative; transition: transform .2s ease; }
.zettel-bald:nth-child(odd) a { transform: rotate(-1.6deg); }
.zettel-bald:nth-child(even) a { transform: rotate(1.3deg) translateY(4px); }
.zettel-bald a:hover { transform: rotate(0) translateY(-3px); }
.zettel-bald a::before { content: ""; position: absolute; top: -8px; left: 50%; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e46b5c, #a42b20); box-shadow: 0 2px 3px rgba(0,0,0,.4); }
.zettel-bald__nr { display: block; font: 700 .9rem var(--hand); color: var(--rot); margin-bottom: .3rem; }
.zettel-bald__frage { display: block; font: 700 1.1rem/1.3 var(--hand); }
.zettel-bald a::after { content: "folgt bald"; display: inline-block; margin-top: .6rem; font: 700 .78rem var(--hand); color: #2e5c8a; background: rgba(46,92,138,.12); padding: .1em .6em; border-radius: 99px; }
.bald-seite { max-width: 820px; margin: 0 auto clamp(2rem, 4vw, 3rem); transform: rotate(-.5deg); }
.bald-seite h1 { font-family: var(--hand); font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--tinte); margin: .05em 0 .3em; transform: rotate(-1.5deg); }
.bald-seite__text { font-size: 1.08rem; }
.bald-seite__liste { padding-left: 1.4rem; margin: .3rem 0 1.4rem; }
.bald-seite__liste li { margin: .35rem 0; padding: .3rem .6rem; border-radius: 2px; scroll-margin-top: 6rem; }
.bald-seite__liste li strong { display: block; font: 700 1.1rem/1.3 var(--hand); }
.bald-seite__liste li:target { background: rgba(240,162,58,.28); box-shadow: inset 4px 0 0 var(--morgenrot); }
.bald-seite__liste { list-style: none; padding-left: 0; }
/* Luft zwischen Folgen und Logbuchseiten */
.abenteuer-liste { gap: 60px clamp(1.4rem, 3vw, 2.4rem); }
.eintraege { gap: 60px; }
.bald-liste ol { gap: 40px clamp(1rem, 2vw, 1.6rem); }
.staffel-folgen, .eintraege, .bald-liste { margin-bottom: 60px; }