:root {
  --nacht: #06121c; --tief: #0a1f2e; --meer: #0f3448; --schaum: #e8f4f1; --sand: #e8dcc0; --sand-dunkel: #c9b88f;
  --papier: #f3ead4; --tinte: #2b2418; --leise: #9fb6c0; --glut: #ffd58a; --tuerkis: #7fd4c1; --linie: rgba(232, 244, 241, .14);
  --schrift: "Inter", system-ui, sans-serif; --erzaehlt: "Lora", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--nacht); color: var(--schaum); font-family: var(--schrift); font-size: 16px; line-height: 1.6; }
a { color: var(--tuerkis); }
img, video, canvas { display: block; max-width: 100%; }
.leise { color: var(--leise); font-size: 14.5px; }
[hidden] { display: none !important; }

/* Sprachumschalter DE · EN */
.sprache { position: fixed; top: 12px; right: 12px; z-index: 15; border: 1px solid var(--linie); background: rgba(6, 18, 28, .72); color: var(--leise);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; letter-spacing: .06em; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sprache .an { color: var(--schaum); font-weight: 600; }
/* Strand mit Calypso */
.held { position: relative; }
.held-bild { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: #1a2a33; }
.held-bild img, .held-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held-bild video { opacity: 0; transition: opacity 1.2s; }
.held-bild video.laeuft { opacity: 1; }
.held-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(6,18,28,0) 88%, rgba(6,18,28,.5) 96%, var(--nacht) 100%); }
/* Flaschenpost am Strand (25.10., Marc: gezeichnete Flasche „total fake“): die echte blaue Flasche vor Calypso schimmert –
   eine weich maskierte Kopie genau dieser Flasche aus demselben Bild wird heller, ein Lichtreflex läuft darüber. */
.flaschen-glanz { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: fg-schein 4.5s ease-in-out infinite; }
.flaschen-glanz .fg-bild, .flaschen-glanz .fg-reflex { position: absolute; inset: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201920%201080%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27w%27%3E%3CfeGaussianBlur%20stdDeviation%3D%275%27/%3E%3C/filter%3E%3Cpath%20d%3D%27M945%2C968%20L1110%2C1000%20L1122%2C1013%20L1140%2C1011%20L1155%2C1026%20L1147%2C1046%20L1124%2C1042%20L1100%2C1056%20L942%2C1032%20Q925%2C1000%20945%2C968%20Z%27%20fill%3D%27white%27%20filter%3D%27url%28%23w%29%27/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201920%201080%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27w%27%3E%3CfeGaussianBlur%20stdDeviation%3D%275%27/%3E%3C/filter%3E%3Cpath%20d%3D%27M945%2C968%20L1110%2C1000%20L1122%2C1013%20L1140%2C1011%20L1155%2C1026%20L1147%2C1046%20L1124%2C1042%20L1100%2C1056%20L942%2C1032%20Q925%2C1000%20945%2C968%20Z%27%20fill%3D%27white%27%20filter%3D%27url%28%23w%29%27/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.flaschen-glanz .fg-bild { background-size: 100% 100%; animation: fg-hell 4.5s ease-in-out infinite; }
.flaschen-glanz .fg-reflex { background: linear-gradient(105deg, transparent 0 46%, rgba(255,255,255,.55) 49%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.55) 51%, transparent 54% 100%) no-repeat;
  background-size: 40% 100%; background-position: 30% 0; mix-blend-mode: screen; animation: fg-reflex 7s ease-in-out infinite; }
@keyframes fg-hell { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.32) saturate(1.15); } }
@keyframes fg-schein { 0%, 100% { filter: drop-shadow(0 0 0 rgba(140,200,255,0)); } 50% { filter: drop-shadow(0 0 8px rgba(150,205,255,.55)); } }
@keyframes fg-reflex { 0%, 55% { background-position: 30% 0; opacity: 0; } 60% { opacity: 1; } 80% { background-position: 72% 0; opacity: 1; } 85%, 100% { background-position: 72% 0; opacity: 0; } }
.flaschen-klick { position: absolute; left: 48.4%; top: 88.8%; width: 12%; height: 9.4%; z-index: 4; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 40%; }
.flaschen-klick:focus-visible { outline: 2px solid var(--tuerkis); }
.held-text { position: relative; z-index: 3; max-width: 760px; margin: 10px auto 0; padding: 0 20px 10px; text-align: center; }
.ueber { margin: 0; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--glut); }
h1 { font-family: var(--erzaehlt); font-weight: 500; font-size: clamp(38px, 7vw, 74px); line-height: 1.05; margin: 6px 0 10px; letter-spacing: .01em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.unter { margin: 0 auto; max-width: 600px; color: #d3e2e3; font-size: 17px; }

main { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
section { padding: 54px 0 10px; }
h2 { font-family: var(--erzaehlt); font-weight: 500; font-size: clamp(26px, 4vw, 36px); margin: 0 0 6px; }
.teil-kopf { max-width: 720px; margin-bottom: 18px; }
.lage { margin: 0; font-size: 17px; color: var(--sand); }

/* animierter Ozean mit Karte */
.ozean { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--linie); background: var(--tief);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9), inset 0 0 80px rgba(0, 0, 0, .35); }
#karte { width: 100%; height: auto; aspect-ratio: 2 / 1; touch-action: pan-y; }
.karten-hinweis { position: absolute; pointer-events: none; background: rgba(6, 18, 28, .92); border: 1px solid var(--linie); color: var(--schaum);
  font-size: 13px; padding: 6px 10px; border-radius: 10px; transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap; }
.zahlen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 14px 0 0; }
.zahlen li { background: rgba(255, 255, 255, .04); border: 1px solid var(--linie); border-radius: 12px; padding: 8px 14px; font-size: 14px; color: var(--leise); }
.zahlen b { color: var(--schaum); font-size: 18px; font-weight: 600; margin-right: 4px; }

/* Geschichte */
.geschichte { list-style: none; padding: 0; margin: 0; max-width: 720px; }
.geschichte li { position: relative; padding: 0 0 26px 26px; border-left: 1px dashed rgba(232, 220, 192, .3); margin-left: 8px; }
.geschichte li::before { content: ""; position: absolute; left: -6px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--tuerkis);
  box-shadow: 0 0 10px var(--tuerkis); }
.geschichte li.calypso::before { background: var(--glut); box-shadow: 0 0 10px var(--glut); }
.geschichte .wer { font-size: 13px; color: var(--leise); margin-bottom: 4px; }
.geschichte .wer b { color: var(--sand); font-weight: 600; }
.geschichte .text { font-family: var(--erzaehlt); font-size: 18px; line-height: 1.75; color: #eef3ef; white-space: pre-wrap; }
.geschichte li.neu .text { animation: auftauchen 1.6s ease; }
.geschichte .leer { font-family: var(--erzaehlt); font-style: italic; color: var(--leise); border: 0; padding-left: 0; }
.geschichte .leer::before { display: none; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } }

.schritte { padding-left: 20px; max-width: 720px; }
.schritte li { margin-bottom: 10px; }
.fuss { max-width: 1100px; margin: 50px auto 0; padding: 26px 16px 40px; border-top: 1px solid var(--linie); color: var(--leise); font-size: 14px; }
.fuss p { display: flex; gap: 10px; align-items: center; }
.fuss-bild { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sand-dunkel); }
.fuss summary { cursor: pointer; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 20px;
  font: inherit; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #f6d48f, #e6a95c); color: #2a1a07; text-decoration: none; }
.knopf.gross { padding: 14px 28px; font-size: 17px; }
.knopf.hell { background: rgba(255, 255, 255, .08); color: var(--schaum); border: 1px solid var(--linie); font-weight: 500; }
.knopf:disabled { opacity: .5; cursor: default; }

/* Fund: Flasche aus dem Wasser fischen */
.fund { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: radial-gradient(ellipse at 50% 0%, #15435a 0%, #06121c 70%); }
.fund-szene { position: relative; height: min(46vh, 380px); overflow: hidden; }
.wellen { position: absolute; left: -50%; width: 200%; height: 60%; bottom: 0; background-repeat: repeat-x; }
.wellen.hinten { bottom: 8%; opacity: .55; animation: wogen 9s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q50 20 100 40 T200 40 T300 40 T400 40 V100 H0z' fill='%231b5770'/%3E%3C/svg%3E");
  background-size: 400px 100%; }
.wellen.vorne { z-index: 3; height: 48%; animation: wogen 6s linear infinite reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q50 10 100 30 T200 30 T300 30 T400 30 V100 H0z' fill='%230e3a4f'/%3E%3Cpath d='M0 30 Q50 10 100 30 T200 30 T300 30 T400 30' stroke='%23cfeee6' stroke-opacity='.35' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-size: 320px 100%; }
@keyframes wogen { to { transform: translateX(25%); } }
.treibgut { position: absolute; z-index: 2; left: 50%; bottom: 30%; width: 54px; margin-left: -27px; aspect-ratio: 40 / 90;
  transform: rotate(72deg); animation: schaukeln 3.4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255, 213, 138, .55)); }
.treibgut svg { width: 100%; height: 100%; }
@keyframes schaukeln { 0%, 100% { transform: translateY(0) rotate(68deg); } 50% { transform: translateY(-12px) rotate(80deg); } }
.hand { position: absolute; z-index: 4; left: 50%; top: -60%; width: 92px; margin-left: -46px; transition: top 1.1s cubic-bezier(.5, 0, .3, 1); }
.hand svg { width: 100%; }
.korken { position: absolute; z-index: 5; left: 50%; top: 40%; width: 14px; height: 18px; border-radius: 3px; background: #a8743f; opacity: 0; }
.fund-szene.gefischt .hand { top: 4%; animation: heben 1.4s 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
.fund-szene.gefischt .treibgut { animation: herausziehen 1.4s 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
.fund-szene.gefischt .korken { animation: plopp 1s 2.4s ease-out forwards; }
@keyframes heben { to { top: -18%; } }
@keyframes herausziehen { 0% { transform: translateY(0) rotate(72deg); } 100% { transform: translateY(-38vh) rotate(0deg) scale(1.5); bottom: 30%; } }
@keyframes plopp { 0% { opacity: 1; transform: translate(-50%, 0) rotate(0); } 100% { opacity: 0; transform: translate(80px, -120px) rotate(400deg); } }
.fund-karte { position: relative; z-index: 6; max-width: 720px; width: calc(100% - 24px); margin: -40px auto 40px; padding: 26px 22px; background: rgba(8, 24, 36, .9);
  border: 1px solid var(--linie); border-radius: 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fund-karte h2, .fund-karte h3 { font-family: var(--erzaehlt); font-weight: 500; margin: 0 0 8px; }
.zettel { background: var(--papier); color: var(--tinte); border-radius: 6px; padding: 26px 24px; font-family: var(--erzaehlt); font-size: 17.5px;
  line-height: 1.75; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); transform-origin: top; animation: entrollen 1.2s cubic-bezier(.3, .8, .3, 1);
  background-image: linear-gradient(90deg, rgba(120, 90, 40, .07), transparent 12%, transparent 88%, rgba(120, 90, 40, .07)); max-height: 60vh; overflow-y: auto; }
@keyframes entrollen { from { transform: scaleY(.05); opacity: .4; } }
.zettel h3 { font-family: var(--erzaehlt); margin: 0 0 14px; font-size: 24px; }
.zettel .absatz { margin: 0 0 18px; white-space: pre-wrap; }
.zettel .von { display: block; font-family: var(--schrift); font-size: 12.5px; color: #7a6a4c; margin-bottom: 2px; }
.weiter { margin-top: 26px; display: grid; gap: 12px; }
.weiter label { display: grid; gap: 6px; font-size: 14px; color: var(--leise); }
.weiter textarea, .weiter input:not([type=checkbox]), .link-zeile input { width: 100%; font: inherit; font-size: 16px; color: var(--schaum); background: rgba(0, 0, 0, .3);
  border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; }
.weiter textarea { font-family: var(--erzaehlt); font-size: 17px; line-height: 1.7; resize: vertical; }
.weiter textarea:focus, .weiter input:focus { outline: 2px solid var(--tuerkis); outline-offset: 1px; }
.zaehler { margin: -6px 0 0; font-size: 12.5px; color: var(--leise); text-align: right; }
.spende { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(127, 212, 193, .07); }
.haken { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important; }
.fehler { color: #ffb4a2; margin: 0; }
#fund-warten { text-align: center; padding: 30px 0; font-family: var(--erzaehlt); font-size: 19px; }
.tinte { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid var(--linie); border-top-color: var(--glut); animation: drehen 1.1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.hinweis-calypso { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 213, 138, .08); border: 1px solid rgba(255, 213, 138, .3); border-radius: 14px; padding: 12px 14px; margin-top: 14px; }
.hinweis-calypso img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.link-zeile { display: flex; gap: 8px; margin: 14px 0; }
.teilen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.qr { margin: 10px 0 18px; }
.qr summary { cursor: pointer; color: var(--tuerkis); }
#qr svg { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 10px; margin: 12px 0; }

@media (max-width: 700px) {
  .unter { font-size: 15.5px; }
  #karte { aspect-ratio: 4 / 3; }
  .geschichte .text { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  body * { visibility: hidden; }
  #qr, #qr * { visibility: visible; }
  #qr { position: absolute; left: 0; top: 0; }
}