/* Das Geheimnis vom Grundlsee – Stationsvideos. Papier-Collage wie in den Videos. */
@font-face { font-family: "Caveat Brush"; src: url("../fonts/CaveatBrush-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url("../fonts/PatrickHand-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; src: url("../fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; src: url("../fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype"); font-display: swap; }

:root {
  --cream: #F3E9D2; --cream-light: #FFF8E6; --kraft: #C9A877; --ink: #2B2A33; --ink-soft: #4A4652;
  --lake: #4F8FA8; --lake-deep: #2F6B85; --forest: #3E6B48; --forest-mid: #5E8C55; --orange: #E8833A; --orange-deep: #C9622B;
  --red: #C8553D; --gold: #E9B949;
  --shadow: rgba(55, 35, 15, .32);
  --title: "Caveat Brush", "Comic Sans MS", cursive;
  --hand: "Patrick Hand", "Comic Sans MS", cursive;
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--cream) url("../img/papier.png") repeat; background-size: 512px;
  color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.45;
  min-height: 100vh;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kopf mit Buchstaben-Girlande ---------- */
.kopf { position: relative; padding: 0 16px 8px; text-align: center; }
.girlande { position: relative; display: flex; justify-content: center; gap: clamp(2px, .6vw, 8px); padding-top: 26px; margin: 0 auto; max-width: 1100px; }
.girlande::before { content: ""; position: absolute; left: 2%; right: 2%; top: 22px; height: 40px; border-top: 3px solid #5A3A22; border-radius: 50% 50% 0 0 / 22px 22px 0 0; transform: scaleY(-1); transform-origin: top; }
.girlande img { width: clamp(28px, 6.4vw, 70px); height: auto; transform-origin: 50% 0; animation: wehen 3.2s ease-in-out infinite; position: relative; }
.girlande img:nth-child(odd) { animation-delay: -1.1s; }
.girlande img:nth-child(3n) { animation-delay: -2s; }
@keyframes wehen { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.titel { font-family: var(--title); font-weight: 400; font-size: clamp(42px, 8vw, 92px); line-height: 1; margin: 18px 0 6px; letter-spacing: .5px; }
.titel span { background: linear-gradient(transparent 78%, rgba(232, 131, 58, .55) 78%, rgba(232, 131, 58, .55) 90%, transparent 90%); }
.band {
  display: inline-block; background: var(--lake-deep); color: var(--cream-light); font-family: var(--hand); font-size: clamp(18px, 3vw, 28px);
  padding: 8px 26px 10px; transform: rotate(-1deg); margin: 6px 0 4px;
  clip-path: polygon(0 8%, 3% 0, 12% 6%, 22% 1%, 34% 7%, 47% 0, 60% 6%, 72% 1%, 85% 7%, 95% 0, 100% 9%, 99% 92%, 90% 100%, 78% 93%, 64% 100%, 50% 94%, 37% 100%, 24% 93%, 12% 100%, 2% 94%);
}
.einleitung { font-family: var(--hand); font-size: clamp(19px, 2.4vw, 24px); max-width: 640px; margin: 14px auto 0; color: var(--ink-soft); }

/* Ziege im Kopf: steht neben dem Einleitungstext */
.intro-zeile { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 30px); max-width: 980px; margin: 18px auto 0; }
.intro-zeile .einleitung { margin: 0 0 18px; text-align: left; }
.ziege-kopf { position: relative; flex: none; width: clamp(130px, 16vw, 200px); padding: 0; border: 0; background: none; cursor: pointer; }
.ziege-kopf:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.ziege-kopf img { transform: scaleX(-1); transition: transform .2s; filter: drop-shadow(3px 5px 4px var(--shadow)); }
.ziege-kopf.hopp img { animation: hopp .55s ease-out; }
@keyframes hopp { 0% { transform: scaleX(-1) translateY(0); } 30% { transform: scaleX(-1) translateY(-26px) rotate(-6deg); } 60% { transform: scaleX(-1) translateY(0) rotate(2deg); } 80% { transform: scaleX(-1) translateY(-6px); } 100% { transform: scaleX(-1) translateY(0); } }
.sprechblase {
  position: absolute; background: var(--cream-light); font-family: var(--hand); font-size: 19px; line-height: 1.2; padding: 10px 14px; border-radius: 18px;
  box-shadow: 2px 4px 8px var(--shadow); width: max-content; max-width: 210px; text-align: center; transition: opacity .25s, transform .25s;
}
.ziege-kopf .sprechblase { right: 62%; bottom: 78%; transform: rotate(-3deg); color: var(--ink); }
.sprechblase::after { content: ""; position: absolute; right: 18px; bottom: -12px; border: 8px solid transparent; border-top: 12px solid var(--cream-light); border-bottom: 0; }

/* ---------- Karten ---------- */
.stationen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: clamp(26px, 4vw, 44px) clamp(18px, 3vw, 34px); max-width: 1260px; margin: 30px auto 0; padding: 22px 16px 40px; }
.karte { position: relative; display: block; text-decoration: none; filter: drop-shadow(4px 7px 7px var(--shadow)); transform: rotate(var(--dreh, -1deg)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), filter .25s; outline: none; }
.karte:hover, .karte:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.02); filter: drop-shadow(7px 14px 12px var(--shadow)); }
.karte:focus-visible .papier { outline: 4px solid var(--orange); outline-offset: -10px; }
.papier { background: var(--cream-light) url("../img/papier.png"); background-size: 400px; background-blend-mode: multiply; padding: 18px 18px 20px; clip-path: var(--riss); }
.karte::before, .karte::after { content: ""; position: absolute; top: -12px; width: 92px; height: 30px; background: rgba(234, 223, 196, .82); z-index: 2; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%); }
.karte::before { left: 10%; transform: rotate(-7deg); }
.karte::after { right: 10%; transform: rotate(6deg); }
.bild { position: relative; background: #fffdf7; padding: 8px 8px 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); transform: rotate(var(--bilddreh, .6deg)); }
.bild img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--orange); box-shadow: 0 4px 10px rgba(0, 0, 0, .3); display: grid; place-items: center; transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.play::after { content: ""; margin-left: 7px; border-left: 26px solid var(--cream-light); border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.karte:hover .play { transform: scale(1.12) rotate(-6deg); }
.nummer { position: absolute; left: -10px; top: -14px; width: 64px; height: 64px; border-radius: 50%; background: var(--orange); color: var(--cream-light); font-family: var(--title); font-size: 46px; line-height: 64px; text-align: center; box-shadow: 2px 3px 6px var(--shadow); z-index: 1; transform: rotate(-8deg); }
.karte h2 { font-family: var(--title); font-weight: 400; font-size: clamp(30px, 3vw, 38px); line-height: 1.05; margin: 14px 4px 6px; }
.karte p { font-family: var(--hand); font-size: 21px; line-height: 1.2; margin: 0 4px 12px; color: var(--ink-soft); }
.marken { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 4px; }
.marke { font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .3px; padding: 4px 10px 5px; border-radius: 4px; color: #fff; transform: rotate(-1.5deg); }
.marke.bibel { background: var(--lake-deep); }
.marke.geschick { background: var(--forest); }
.marke.spass { background: var(--orange-deep); }
.marke.betreut { background: var(--ink-soft); }
.dauer { margin-left: auto; font-family: var(--hand); font-size: 20px; color: var(--ink-soft); }
.dauer::before { content: "⏱ "; }

/* ---------- Abspieler ---------- */
.buehne { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(43, 42, 51, .72); }
.buehne.offen { display: flex; animation: einblenden .25s ease-out; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
.blatt { position: relative; width: min(1100px, 100%); min-width: 0; overflow-x: hidden; max-height: 100%; overflow: auto; background: var(--cream-light) url("../img/papier.png"); background-size: 420px; background-blend-mode: multiply; padding: clamp(14px, 3vw, 28px); box-shadow: 6px 12px 24px rgba(0, 0, 0, .35); animation: aufklappen .35s cubic-bezier(.3, 1.5, .5, 1); transform: rotate(-.4deg); }
@keyframes aufklappen { from { transform: rotate(-4deg) scale(.88); opacity: 0; } to { transform: rotate(-.4deg) scale(1); opacity: 1; } }
.blatt-kopf { display: flex; align-items: center; gap: 14px; margin: 0 48px 12px 0; }
.blatt-kopf .nummer { position: static; flex: none; width: 56px; height: 56px; line-height: 56px; font-size: 40px; }
.blatt-kopf h2 { font-family: var(--title); font-weight: 400; font-size: clamp(26px, 4vw, 46px); line-height: 1.05; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.blatt video { width: 100%; aspect-ratio: 16 / 9; background: #1c1e28; display: block; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.blatt-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.blatt-fuss p { flex: 1 1 320px; margin: 0; font-family: var(--hand); font-size: 21px; line-height: 1.25; color: var(--ink-soft); }
.knopf { font-family: var(--hand); font-size: 21px; padding: 8px 18px 9px; background: var(--cream); border: 0; color: var(--ink); cursor: pointer; text-decoration: none; box-shadow: 2px 3px 0 rgba(0, 0, 0, .18); transform: rotate(-1deg); transition: transform .15s; }
.knopf:hover, .knopf:focus-visible { transform: rotate(0) translateY(-2px); outline: 3px solid var(--orange); }
.knopf[hidden] { display: none; }
.zu { position: absolute; right: 12px; top: 10px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--orange); color: var(--cream-light); font-size: 30px; line-height: 46px; cursor: pointer; box-shadow: 2px 3px 6px var(--shadow); transform: rotate(8deg); }
.zu:hover, .zu:focus-visible { background: var(--orange-deep); outline: 3px solid var(--ink); }

/* ---------- Fuß ---------- */
.fuss { position: relative; max-width: 1220px; margin: 10px auto 0; padding: 0 16px 24px; text-align: center; }
.wiese { position: relative; height: clamp(150px, 22vw, 250px); margin-top: 10px; }
.wiese::before { content: ""; position: absolute; left: -16px; right: -16px; bottom: 0; height: 46%; background: #9DBB7A; clip-path: polygon(0 30%, 10% 18%, 22% 28%, 35% 12%, 50% 24%, 63% 10%, 78% 26%, 90% 14%, 100% 22%, 100% 100%, 0 100%); }
.wiese .team { position: absolute; left: 4%; bottom: 8%; height: 92%; width: auto; }
.wiese .kiste { position: absolute; right: 22%; bottom: 10%; height: 62%; width: auto; }
.wiese .ziege-fuss { position: absolute; right: 2%; bottom: 8%; height: 58%; width: auto; cursor: pointer; }
.fuss .hinweis { display: inline-block; font-family: var(--hand); font-size: 22px; background: var(--cream-light); padding: 10px 20px; transform: rotate(.8deg); box-shadow: 3px 5px 8px var(--shadow); margin-top: 18px; }
.fuss .klein { font-size: 14px; color: var(--ink-soft); margin-top: 16px; }

/* ---------- Login ---------- */
.login-seite { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.login { position: relative; width: min(520px, 100%); background: var(--cream-light) url("../img/papier.png"); background-size: 420px; background-blend-mode: multiply; padding: 36px clamp(20px, 5vw, 44px) 34px; box-shadow: 6px 12px 22px var(--shadow); transform: rotate(-1deg); text-align: center; clip-path: polygon(0 1%, 6% 0, 15% 1.5%, 30% 0, 46% 1.2%, 60% 0, 75% 1.4%, 90% 0, 100% 1%, 99.4% 30%, 100% 60%, 99.2% 99%, 88% 100%, 72% 98.8%, 55% 100%, 40% 98.9%, 24% 100%, 9% 98.8%, 0 100%, .6% 70%, 0 40%); }
.login h1 { font-family: var(--title); font-weight: 400; font-size: clamp(36px, 7vw, 54px); line-height: 1; margin: 6px 0 10px; }
.login .band { font-size: 20px; }
.login p { font-family: var(--hand); font-size: 22px; margin: 14px 0; }
.login input { width: 100%; font-family: var(--hand); font-size: 28px; padding: 10px 14px; border: 0; border-bottom: 3px solid var(--ink); background: transparent; text-align: center; outline: none; }
.login input:focus { border-color: var(--orange); background: rgba(232, 131, 58, .08); }
.login button { margin-top: 18px; font-family: var(--title); font-size: 30px; padding: 8px 34px 10px; background: var(--orange); color: var(--cream-light); border: 0; cursor: pointer; box-shadow: 3px 4px 0 rgba(0, 0, 0, .2); transform: rotate(-1.5deg); }
.login button:hover, .login button:focus-visible { background: var(--orange-deep); outline: 3px solid var(--ink); }
.waechterin { width: 210px; margin: -10px auto 0; filter: drop-shadow(3px 5px 4px var(--shadow)); }
.fehler { color: var(--red); font-weight: 700; }
.login .sprechblase { position: relative; display: inline-block; max-width: none; margin-top: 4px; transform: rotate(2deg); }
.login .sprechblase::after { right: auto; left: 40%; }

@media (max-width: 720px) {
  .intro-zeile { flex-direction: column; align-items: center; }
  .intro-zeile .einleitung { text-align: center; margin-bottom: 40px; }
  .ziege-kopf { width: 140px; }
  .ziege-kopf .sprechblase { right: auto; left: 50%; bottom: 96%; transform: translateX(-60%) rotate(-3deg); font-size: 17px; max-width: 230px; }
  .ziege-kopf .sprechblase::after { right: 30%; }
  .buehne { padding: 8px; }
  .blatt { transform: none; animation: none; }
  .wiese .kiste { right: 30%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Finale-Karte (ohne Video) */
.karte.finale .papier { background-color: #F6EBCF; text-align: center; padding-top: 22px; }
.karte.finale .nummer { background: var(--lake-deep); font-size: 34px; }
.karte.finale .bild { background: transparent; box-shadow: none; padding: 0; }
.karte.finale .bild img { aspect-ratio: auto; width: 74%; margin: 0 auto; object-fit: contain; }
.karte.finale .mini-ziege { position: absolute; right: -14px; bottom: 6px; width: 44%; transform: scaleX(-1); filter: drop-shadow(2px 3px 3px var(--shadow)); }
video::cue { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; font-weight: 700; background: rgba(28, 30, 40, .8); color: #FFFDF5; }