/* Schatzwelten – Homepage (Prototyp 29.09.2026)
   Eine bewusst dunkle Welt (Nacht auf See) – deshalb nur ein Farbschema. */

@font-face {
  font-family: "Almendra";
  src: url("../assets/fonts/almendra_regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Almendra";
  src: url("../assets/fonts/almendra_bold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}

:root {
  --nacht: #06080d;
  --tiefe: #0c1422;
  --gold: #e7b65a;
  --gold-hell: #ffdc8f;
  --gold-dunkel: #9a6b1f;
  --text: #efe6d3;
  --leise: #a39479;
  --glut: #d97a34;
  --nebel: #9fc3bd;
  --anzeige: "Almendra", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --lese: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--nacht); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--nacht); color: var(--text);
  font-family: var(--lese); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--gold-hell); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; border-radius: 6px; }

/* Sprache: nur die aktive zeigen */
html[data-sprache="de"] .en, html[data-sprache="en"] .de { display: none !important; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 4vw, 40px) 14px;
  background: linear-gradient(180deg, rgba(6, 8, 13, .78), rgba(6, 8, 13, 0));
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.marke {
  font-family: var(--anzeige); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em;
  color: var(--gold-hell); text-decoration: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.kopf-rechts { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.kopf-recht { display: flex; gap: clamp(10px, 1.6vw, 18px); }
.kopf-recht a { color: var(--leise); font-size: .82rem; letter-spacing: .04em; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.kopf-recht a:hover { color: var(--gold-hell); }
.sprache {
  font: 700 .8rem/1 var(--lese); letter-spacing: .14em; color: var(--gold-hell);
  background: rgba(12, 20, 34, .6); border: 1px solid rgba(231, 182, 90, .45);
  border-radius: 999px; padding: .55rem .9rem; cursor: pointer; backdrop-filter: blur(6px);
}
.sprache:hover { border-color: var(--gold-hell); }
.ton {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 700 .8rem/1 var(--lese); letter-spacing: .1em; color: var(--gold-hell);
  background: rgba(12, 20, 34, .6); border: 1px solid rgba(231, 182, 90, .45);
  border-radius: 999px; padding: .42rem .85rem .42rem .62rem; cursor: pointer; backdrop-filter: blur(6px);
  transition: background-color .25s, border-color .25s;
}
.ton:hover { border-color: var(--gold-hell); }
.ton[aria-pressed="true"] { background: rgba(231, 182, 90, .18); border-color: var(--gold); }
.ton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ton .lautsprecher { fill: currentColor; stroke: none; }
.ton[aria-pressed="false"] .wellen, .ton[aria-pressed="true"] .stumm { display: none; }
/* Ton ist an, der Browser wartet aber noch auf die erste Berührung: sanftes Pulsieren als Hinweis */
.ton.wartet { animation: ton-wartet 2.4s ease-in-out infinite; }
@keyframes ton-wartet { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 182, 90, 0); } 50% { box-shadow: 0 0 0 6px rgba(231, 182, 90, .28); } }
@media (prefers-reduced-motion: reduce) { .ton.wartet { animation: none; } }
.ton:focus-visible, .sprache:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 2px; }
.ton, .sprache { box-sizing: border-box; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Logleine (Fortschritt der Reise) ---------- */
.logleine {
  position: fixed; right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); z-index: 15;
  display: flex; flex-direction: column; gap: 14px; padding: 10px 0;
}
.logleine::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(var(--gold-dunkel), rgba(154, 107, 31, .2)); transform: translateX(-50%);
}
.logleine a {
  position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nacht); border: 1px solid rgba(231, 182, 90, .35); text-decoration: none;
  font: 700 .55rem/1 var(--lese); color: var(--leise); letter-spacing: .02em; transition: .25s;
}
.logleine a.erreicht { border-color: var(--gold); color: var(--nacht); background: var(--gold); }
.logleine a.jetzt { box-shadow: 0 0 0 4px rgba(231, 182, 90, .18); }

/* ---------- Szenen ---------- */
.szene { position: relative; height: calc(var(--laenge, 200) * 1svh); }
.buehne {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}

/* Text-Takte: Sichtbarkeit (--sicht 0..1) setzt das Skript */
.takt {
  position: absolute; z-index: 5; max-width: min(34rem, 86vw);
  opacity: var(--sicht, 0); transform: translateY(calc((1 - var(--sicht, 0)) * 26px));
  will-change: opacity, transform;
}
.takt p { margin: .6rem 0 0; color: var(--text); font-size: clamp(1rem, 1.15vw + .6rem, 1.22rem); max-width: 34ch; text-wrap: pretty; }
.takt-titel { text-align: center; top: 13svh; max-width: 92vw; }
.takt-links { left: clamp(20px, 7vw, 110px); bottom: 14svh; }
.takt-rechts { right: clamp(56px, 8vw, 130px); bottom: 14svh; max-width: min(34rem, 44vw); }
.takt-mitte { text-align: center; bottom: 12svh; }
.takt-mitte p { margin-inline: auto; }

.titel {
  margin: 0; font-family: var(--anzeige); font-weight: 700; line-height: .95;
  font-size: clamp(3rem, 10vw, 8.2rem); letter-spacing: .01em; text-wrap: balance;
  background: linear-gradient(180deg, #fff1c9 8%, var(--gold-hell) 38%, var(--gold) 70%, var(--gold-dunkel));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 28px rgba(231, 182, 90, .28));
}
.unterzeile { font-size: clamp(1.05rem, 1.6vw + .5rem, 1.5rem) !important; letter-spacing: .06em; color: var(--text) !important; max-width: none !important; }
.hinweis {
  margin-top: 1.7rem !important; font-size: .8rem !important; letter-spacing: .24em; text-transform: uppercase;
  color: var(--leise) !important; max-width: none !important; animation: nicken 2.4s ease-in-out infinite;
}
.hinweis::after { content: ""; display: block; width: 1px; height: 28px; margin: .6rem auto 0; background: linear-gradient(var(--gold), transparent); }
@keyframes nicken { 50% { transform: translateY(6px); opacity: .7; } }

h2 {
  margin: .2rem 0 0; font-family: var(--anzeige); font-weight: 700; line-height: 1.08;
  font-size: clamp(1.9rem, 3.4vw + .6rem, 3.4rem); color: var(--gold-hell); text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .55);
}
.kicker {
  margin: 0 !important; font-size: .78rem !important; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold) !important; font-weight: 700;
}

/* ---------- I · Truhe (3D) ---------- */
#truheCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#truhe .buehne { background: radial-gradient(ellipse at 50% 30%, #13213a 0%, var(--nacht) 70%); }
/* Ohne WebGL: das Emblem statt der 3D-Truhe */
#truhe.ohne-3d .buehne { background: url("../assets/img/emblem_de.webp") center 62% / min(46vh, 70vw) no-repeat, radial-gradient(ellipse at 50% 30%, #13213a 0%, var(--nacht) 70%); }
html[data-sprache="en"] #truhe.ohne-3d .buehne { background-image: url("../assets/img/emblem_en.webp"), radial-gradient(ellipse at 50% 30%, #13213a 0%, var(--nacht) 70%); }

/* ---------- II · Zeit ---------- */
#zeit .buehne { background: radial-gradient(ellipse at 35% 50%, #101b2e 0%, var(--nacht) 72%); }
#sanduhrCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.kompass {
  position: absolute; width: min(120vh, 130vw); opacity: .12; fill: none; stroke: var(--gold); stroke-width: .4;
  transform: rotate(var(--drehung, 0deg));
}
.kompass path:first-of-type { fill: rgba(231, 182, 90, .25); }
.kompass .fein { stroke-dasharray: 2 3; }

/* ---------- III · Hafen ---------- */
#hafen .buehne { background: #05070b; }
.gemaelde {
  position: absolute; top: 0; left: 50%; width: min(100vw, 980px);
  transform: translate(-50%, var(--schwenk, 0px));
  will-change: transform;
}
.gemaelde img { display: block; width: 100%; height: auto; }
.gemaelde .nacht, .gemaelde .glut { position: absolute; inset: 0; }
.gemaelde .nacht { opacity: var(--nacht-anteil, 0); }
.gemaelde .glut { opacity: var(--glut-anteil, 0); mix-blend-mode: screen; animation: flackern 3.4s ease-in-out infinite; }
@keyframes flackern { 0%, 100% { filter: brightness(1); } 38% { filter: brightness(1.22); } 52% { filter: brightness(.9); } 70% { filter: brightness(1.1); } }
#hafen .buehne::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 7, 11, .94) 0, rgba(5, 7, 11, .72) 26%, rgba(5, 7, 11, 0) 52%, rgba(5, 7, 11, 0) 84%, #05070b 100%),
    linear-gradient(0deg, rgba(5, 7, 11, .9) 0, rgba(5, 7, 11, 0) 38%);
}
@media (max-width: 760px) {
  #hafen .buehne::after { background: linear-gradient(0deg, rgba(5, 7, 11, .95) 0, rgba(5, 7, 11, .6) 30%, rgba(5, 7, 11, 0) 55%); }
}

/* ---------- IV · Kombüse ---------- */
.kombuese-bild {
  position: absolute; inset: 0;
  background: url("../assets/img/kombuese.webp") center / cover no-repeat;
  filter: brightness(.42) saturate(.9); transform: scale(calc(1.08 - var(--p, 0) * .06));
}
#kombuese .buehne::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 40% 45%, rgba(217, 122, 52, .16), rgba(6, 8, 13, .85) 75%);
}
.dampf { position: absolute; left: 34%; bottom: 30%; width: 180px; height: 60vh; z-index: 2; pointer-events: none; }
.dampf i {
  position: absolute; bottom: 0; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 230, 211, .22), rgba(239, 230, 211, 0) 70%);
  filter: blur(6px); animation: dampf 7s linear infinite; opacity: 0;
}
.dampf i:nth-child(2) { left: 40px; animation-delay: -1.2s; }
.dampf i:nth-child(3) { left: 80px; animation-delay: -2.4s; }
.dampf i:nth-child(4) { left: 20px; animation-delay: -3.6s; }
.dampf i:nth-child(5) { left: 60px; animation-delay: -4.8s; }
.dampf i:nth-child(6) { left: 100px; animation-delay: -6s; }
@keyframes dampf {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: .9; }
  100% { transform: translateY(-55vh) translateX(30px) scale(2.2); opacity: 0; }
}
.pergament {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: min(340px, 64vw);
  transform: translate(-106%, -50%) rotate(-3deg);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
}
.rolle { height: 22px; border-radius: 11px; background: linear-gradient(180deg, #d9c49a, #a88a55 55%, #7c6135); }
.blatt {
  position: relative; margin: -6px 10px; overflow: hidden;
  height: calc(var(--auf, 0) * min(430px, 60svh));
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .25), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(120, 80, 30, .18), transparent 55%),
    linear-gradient(180deg, #efe3c4, #e2cfa2);
}
/* Das Rezept steht fest oben auf dem Blatt – beim Aufrollen kommt es Zeile für Zeile zum Vorschein */
.rezept {
  position: absolute; top: 20px; left: 22px; right: 22px;
  font-family: var(--anzeige); color: #3d2513; line-height: 1.3;
}
.rezept p { margin: 0; }
.rezept-titel { font-weight: 700; font-size: clamp(1.1rem, 1.2vw + .6rem, 1.4rem); color: #5a2e12; }
.rezept-unter { font-size: .82rem; font-style: italic; color: #7a5530; margin: .1rem 0 .55rem !important; }
.rezept ul { margin: 0; padding-left: 1.05rem; font-size: clamp(.82rem, .5vw + .62rem, .98rem); }
.rezept li { margin: 0 0 .15rem; }
.rezept li::marker { color: #8a5a2b; }
.rezept-text { margin-top: .6rem !important; font-size: clamp(.78rem, .45vw + .6rem, .92rem); }
.siegel {
  position: absolute; right: 22px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #c2463a, #7e1d17 70%); box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* ---------- V · Fluch ---------- */
/* Kontrast: fast schwarzer Grund, nur hinter dem Geist ein kaltes Gegenlicht – die Silhouette hebt sich ab,
   die Schrift steht daneben auf Schwarz statt auf seinem leuchtenden Nebel. */
#fluch { --geist-x: clamp(120px, 20vw, 300px); --licht-x: calc(50% + var(--geist-x)); }
#fluch .buehne {
  background:
    radial-gradient(circle at var(--licht-x) 40%, rgba(96, 196, 182, .26) 0%, rgba(30, 84, 80, .14) 20%, transparent 44%),
    radial-gradient(ellipse at 50% 50%, #060a0b 0%, #010203 78%);
}
.geist {   /* Fluch-Kapitän: ganze Figur im Hochformat (918 × 1527) – Größe über die Höhe */
  position: absolute; height: min(80svh, 125vw); width: auto; z-index: 2;   /* Hut bleibt unter der Kopfzeile */
  opacity: var(--geist, 0);
  transform: translateX(var(--geist-x, 0px)) translateY(calc((1 - var(--geist, 0)) * 40px)) scale(calc(.9 + var(--geist, 0) * .12));
  filter: blur(calc((1 - var(--geist, 0)) * 10px)) contrast(1.14) brightness(1.1) saturate(1.06)
    drop-shadow(0 0 22px rgba(110, 225, 205, .3));
}
#fluch .takt-links {   /* links neben dem Geist, senkrecht mittig – seine Klaue greift nach der Schrift */
  top: 50%; bottom: auto; max-width: min(30rem, 42vw);
  transform: translateY(calc(-50% + (1 - var(--sicht, 0)) * 26px));
}
#fluch h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, .9); }
#fluch .nebel.n1 { opacity: calc(.3 + var(--p, 0) * .3); }
/* Vorderer Nebel nur unten bei den Füßen – über Gesicht und Körper machte er alles milchig */
#fluch .nebel.n2 {
  opacity: calc(.15 + var(--p, 0) * .3);
  -webkit-mask-image: linear-gradient(to top, #000 18%, transparent 42%); mask-image: linear-gradient(to top, #000 18%, transparent 42%);
}
.nebel {
  position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 22% at 30% 60%, rgba(159, 195, 189, .16), transparent 70%),
    radial-gradient(ellipse 36% 18% at 70% 40%, rgba(159, 195, 189, .12), transparent 70%),
    radial-gradient(ellipse 50% 26% at 50% 80%, rgba(159, 195, 189, .14), transparent 70%);
  animation: treiben 26s ease-in-out infinite alternate;
}
.nebel.n1 { z-index: 1; opacity: calc(.5 + var(--p, 0) * .5); }
.nebel.n2 { z-index: 3; opacity: calc(.25 + var(--p, 0) * .45); animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes treiben { to { transform: translateX(8%) translateY(-3%); } }

/* ---------- VI · Finale ---------- */
#finale .buehne { background: radial-gradient(ellipse at 50% 38%, #1a1409 0%, var(--nacht) 68%); }
.muenze {
  position: absolute; top: 16svh; width: min(34vh, 52vw); aspect-ratio: 1; perspective: 900px;
  transform: translateY(var(--fall, 0px));
}
.muenze img {
  position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden;
  transform: rotateY(var(--dreh, 0deg)); filter: drop-shadow(0 12px 30px rgba(231, 182, 90, .35));
}
.muenze .hinten { transform: rotateY(calc(var(--dreh, 0deg) + 180deg)); }
.takt-finale { bottom: 10svh; }
.knopf {
  display: inline-block; margin-top: 1.4rem; padding: .85rem 1.5rem; border-radius: 999px;
  font: 700 .95rem/1 var(--lese); letter-spacing: .08em; text-decoration: none;
  color: var(--nacht); background: linear-gradient(180deg, var(--gold-hell), var(--gold));
}
.knopf.gesperrt { color: var(--gold-hell); background: transparent; border: 1px solid rgba(231, 182, 90, .5); cursor: default; }

/* ---------- Fuß ---------- */
.fuss {
  position: relative; z-index: 6; padding: 72px clamp(16px, 5vw, 60px) calc(56px + env(safe-area-inset-bottom));
  text-align: center; border-top: 1px solid rgba(231, 182, 90, .18);
  background: linear-gradient(180deg, var(--nacht), #030406);
}
.fuss-marke { margin: 0 0 1.2rem; font-family: var(--anzeige); font-weight: 700; font-size: 1.6rem; color: var(--gold); }
.fuss nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; }
.fuss nav a, .kontakt a { color: var(--leise); text-decoration: none; font-size: .95rem; }
.fuss nav a:hover, .kontakt a:hover { color: var(--gold-hell); }
.kontakt { margin: 1.4rem 0 0; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .marke { font-size: 1rem; white-space: nowrap; }
  .kopf-rechts { gap: 10px; }
  .kopf-recht { gap: 10px; }
  .kopf-recht a { font-size: .72rem; }
  .sprache { padding: .45rem .7rem; }
  .ton { padding: 0 .5rem; }
  .ton, .sprache { height: 1.85rem; }
  /* Am Handy nur das Symbol – das Wort bleibt für Screenreader lesbar */
  .ton-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .logleine { right: 8px; gap: 10px; }
  .logleine a { width: 20px; height: 20px; font-size: .48rem; }
  .takt-links, .takt-rechts, .takt-mitte { left: 18px; right: 40px; bottom: max(24px, env(safe-area-inset-bottom)); text-align: left; max-width: none; }
  .takt-mitte p { margin-inline: 0; }
  .takt-links::before, .takt-rechts::before, .takt-mitte::before {
    content: ""; position: absolute; inset: -40px -40px -30px -30px; z-index: -1;
    background: linear-gradient(0deg, rgba(6, 8, 13, .92) 40%, rgba(6, 8, 13, 0));
  }
  .pergament { width: 72vw; transform: translate(-50%, -78%) rotate(-3deg); }
  .blatt { height: calc(var(--auf, 0) * min(380px, 50svh)); }
  .dampf { left: 30%; bottom: 45%; }
  .muenze { top: 12svh; }
}
/* Sehr schmale Handys: oben nur das Impressum (Datenschutz steht in der Fußzeile und auf der Impressum-Seite) */
@media (max-width: 400px) {
  .kopf-recht a[href="datenschutz.html"] { display: none; }
}

/* Kombüse: Pergament links, Text rechts – beide mit festem Abstand zur Bildmitte und auf gleicher Höhe,
   damit sich Siegel, Rolle und Text bei keiner Fensterbreite berühren. */
#kombuese .pergament { transform: translate(calc(-100% - 2.5rem), -50%) rotate(-3deg); }
#kombuese .takt-rechts {
  left: calc(50% + 2.5rem); right: auto; top: 50%; bottom: auto; max-width: min(30rem, 40vw);
  transform: translateY(calc(-50% + (1 - var(--sicht, 0)) * 26px));
}
@media (max-width: 760px) {
  #kombuese .pergament { transform: translate(-50%, -78%) rotate(-3deg); }
  #kombuese .takt-rechts {
    left: 18px; right: 40px; top: auto; bottom: max(24px, env(safe-area-inset-bottom)); max-width: none;
    transform: translateY(calc((1 - var(--sicht, 0)) * 26px));
  }
  /* Fluch am Handy: Geist mittig oben, Schrift unten auf dunklem Verlauf */
  #fluch { --geist-x: 0px; --licht-x: 50%; }
  #fluch .takt-links {
    top: auto; bottom: max(24px, env(safe-area-inset-bottom)); max-width: none;
    transform: translateY(calc((1 - var(--sicht, 0)) * 26px));
  }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .szene { height: auto; }
  .buehne { position: relative; height: 100svh; }
  .takt { opacity: 1 !important; transform: none !important; }
  .hinweis, .dampf i, .nebel { animation: none !important; }
  .hinweis { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  #kombuese .takt-rechts, #fluch .takt-links { transform: translateY(-50%) !important; }
}