:root {
  --sand: #F2E4D0;
  --papier: #FCF6EC;
  --tinte: #4B3327;
  --tinte-leicht: #8A6F5E;
  --terra: #C4633F;
  --rost: #A34428;
  --senf: #DFA13C;
  --salbei: #7E9B76;
  --rose: #D98B86;
  --olive: #6D7C50;
  --rand: #C9A98A;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; min-height: 100%;
  background: var(--sand);
  color: var(--tinte);
  font-family: Karla, 'Segoe UI', system-ui, sans-serif;
  font-size: 17px; line-height: 1.5;
  overflow-x: hidden;
}

body::before {
  content: ''; position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse at 50% -5%, #FBF1E2 0%, transparent 55%),
    radial-gradient(ellipse at 15% 100%, #E8C9A8 0%, transparent 45%),
    linear-gradient(165deg, #F6EADA, #EFDFC7 70%, #E7D3B8);
}

/* Kulisse: Sonnenkreis, Torbögen, Pampasgras */
.kulisse { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }

.sonne {
  position: absolute; left: 50%; top: 6vh;
  width: 52vmin; height: 52vmin; margin-left: -26vmin;
  border-radius: 50%;
  background: radial-gradient(circle, #DFA13C22 0%, #C4633F14 58%, transparent 72%);
  border: 2px solid #C4633F2e;
  box-shadow: 0 0 0 14px #DFA13C10, 0 0 0 28px #C4633F0d;
  animation: atmen 10s ease-in-out infinite;
}

.bogen { position: absolute; border-radius: 50% 50% 4px 4px; border: 2px solid; animation: schweben 15s ease-in-out infinite; }
.bogen-1 { left: -6vw;  bottom: -8vh;  width: 38vw; height: 60vh; border-color: #C4633F33; }
.bogen-2 { right: -9vw; bottom: -14vh; width: 44vw; height: 72vh; border-color: #7E9B7638; animation-delay: -5s; }
.bogen-3 { left: 34vw;  bottom: -22vh; width: 32vw; height: 50vh; border-color: #D98B8630; animation-delay: -9s; }

.halm {
  position: absolute; bottom: 0; width: 3px; height: 30vh;
  background: linear-gradient(to top, #A3835F55, #A3835F00);
  transform-origin: bottom center;
  animation: wiegen 8s ease-in-out infinite;
}
.halm::after {
  content: ''; position: absolute; left: 50%; top: -8vh;
  width: 7vh; height: 13vh; margin-left: -3.5vh;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(ellipse at 50% 70%, #D9BE9A88, #D9BE9A00 70%);
}
.halm-1 { left: 9vw; }
.halm-2 { right: 12vw; height: 23vh; animation-delay: -3.5s; }

@keyframes atmen    { 0%,100% { transform: scale(1) } 50% { transform: scale(1.04) } }
@keyframes schweben { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-13px) } }
@keyframes wiegen   { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(5deg) } }

@media (prefers-reduced-motion: reduce) {
  .sonne, .bogen, .halm { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Typografie */
.eyebrow { margin: 0 0 12px; font-size: .92rem; letter-spacing: .26em; color: var(--terra); }
.titel {
  margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.06; color: var(--rost);
}
.fliess { margin: 20px auto 32px; max-width: 40ch; color: var(--tinte-leicht); font-size: 1.1rem; }
.klein { margin-top: 26px; color: var(--tinte-leicht); font-size: .95rem; }

.screen { display: none; }
.screen.is-active { display: block; }
.mitte { max-width: 640px; margin: 0 auto; padding: 12vh 22px 60px; text-align: center; }

/* Knöpfe */
.knopf {
  appearance: none; border: 0; cursor: pointer; display: inline-block;
  font: inherit; font-size: 1.05rem; font-weight: 700;
  padding: 15px 34px; border-radius: 999px; text-decoration: none;
  color: #FFF6EA;
  background: linear-gradient(180deg, #D2764C, var(--terra));
  box-shadow: 0 6px 0 var(--rost), 0 12px 24px #A3442822;
  transition: transform .12s ease, box-shadow .12s ease;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--rost), 0 16px 28px #A344282e; }
.knopf:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--rost); }
.knopf-leise { color: var(--tinte); background: transparent; border: 2px solid var(--rand); box-shadow: none; }
.knopf-leise:hover { background: #C9A98A26; box-shadow: none; }
:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }

/* Kopf */
#screen-game.is-active { display: grid; }
.kopf {
  grid-area: kopf; position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-top));
  background: #F6EADAe6; backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}
.kopf-stufe { display: flex; flex-direction: column; line-height: 1.15; }
.kopf-label { font-size: .7rem; letter-spacing: .2em; color: var(--tinte-leicht); }
.kopf-name { font-family: Fraunces, serif; font-size: 1.25rem; color: var(--rost); }
.kopf-zaehler {
  margin-left: auto; padding: 5px 13px; border-radius: 999px;
  background: #C4633F1a; border: 1px solid #C4633F44;
  color: var(--terra); font-variant-numeric: tabular-nums;
}

/* Bühne */
.buehne {
  grid-area: buehne; width: min(880px, 100%); margin: 0 auto;
  padding: 22px 18px 48px; display: flex; flex-direction: column; gap: 20px;
}

.film {
  position: relative; border-radius: 120px 120px 16px 16px; overflow: hidden;
  background: #2A211C; border: 3px solid var(--terra);
  box-shadow: 0 14px 30px #A344281f;
}
.film video, .film img { display: block; width: 100%; max-height: 46vh; object-fit: contain; background: #2A211C; }
.film-start {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  appearance: none; cursor: pointer; font: inherit; font-weight: 700;
  padding: 14px 26px; border: 0; border-radius: 999px; color: #FFF6EA; background: var(--terra);
}
.film-weiter {
  position: absolute; right: 10px; bottom: 10px;
  appearance: none; cursor: pointer; font: inherit;
  padding: 9px 16px; border-radius: 999px;
  color: var(--tinte); background: #FCF6ECdd; border: 1px solid var(--rand);
}

.frage {
  position: relative; padding: 26px 26px 24px; text-align: center;
  border-radius: 120px 120px 18px 18px;
  background: var(--papier); border: 2px solid var(--rand);
  box-shadow: 0 10px 26px #A3835f1f;
}
.frage::before {
  content: ''; position: absolute; left: 50%; top: 14px;
  width: 46px; height: 3px; margin-left: -23px; border-radius: 2px; background: var(--senf);
}
.frage p {
  margin: 8px 0 0; font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.15rem, 4.2vw, 1.6rem); line-height: 1.3;
}

/* Joker */
.joker { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.joker-knopf {
  appearance: none; cursor: pointer; font: inherit; font-weight: 500;
  padding: 10px 18px; border-radius: 26px 26px 8px 8px;
  color: var(--olive); background: var(--papier); border: 2px solid var(--salbei);
  transition: transform .12s ease, background .2s ease, opacity .2s ease;
}
.joker-knopf:hover:not(:disabled) { transform: translateY(-2px); background: #7E9B7622; }
.joker-knopf:disabled { cursor: default; opacity: .4; border-color: var(--rand); color: var(--tinte-leicht); text-decoration: line-through; }
.joker-knopf[hidden] { display: none; }

/* Antworten */
.antworten { display: grid; gap: 12px; grid-template-columns: 1fr; }
.antwort {
  appearance: none; cursor: pointer; font: inherit;
  display: flex; align-items: center; gap: 14px;
  min-height: 66px; padding: 12px 22px; text-align: left;
  color: var(--tinte); background: var(--papier);
  border: 2px solid var(--rand); border-radius: 40px 40px 12px 12px;
  box-shadow: 0 4px 14px #A3835f1a;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, opacity .3s ease;
}
.antwort b { font-family: Fraunces, serif; font-size: 1.3rem; color: var(--terra); min-width: 1.1em; }
.antwort span { font-size: 1.05rem; }
.antwort:hover:not(:disabled):not(.gewaehlt) { transform: translateY(-3px); border-color: var(--terra); background: #FFFBF4; }
.antwort:disabled { cursor: default; }
.antwort.gewaehlt { background: linear-gradient(180deg, #F0C377, var(--senf)); border-color: var(--rost); animation: warten 1.1s ease-in-out infinite; }
.antwort.richtig { background: linear-gradient(180deg, #A6C39D, var(--salbei)); border-color: var(--olive); color: #223018; }
.antwort.richtig b { color: #223018; }
.antwort.falsch { background: linear-gradient(180deg, #D98166, var(--terra)); border-color: var(--rost); color: #FFF3EC; }
.antwort.falsch b { color: #FFF3EC; }
.antwort.weg { opacity: .28; }
@keyframes warten { 0%,100% { filter: brightness(1) } 50% { filter: brightness(1.12) } }
@media (prefers-reduced-motion: reduce) { .antwort.gewaehlt { animation: none } }

.fuss { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 64px; }
.notiz { margin: 0; text-align: center; color: var(--tinte-leicht); }
.notiz.gut { color: var(--olive); font-weight: 700; }
.notiz.schlecht { color: var(--rost); font-weight: 700; }

/* Die Reise */
.reise { grid-area: reise; }
.reise-titel { margin: 0 0 10px; font-family: Fraunces, serif; font-size: 1rem; color: var(--tinte-leicht); letter-spacing: .12em; }
.reise ol { list-style: none; margin: 0; padding: 0; }
.reise li { position: relative; color: var(--tinte-leicht); transition: color .25s ease, background .25s ease; }
.reise li.geschafft { color: var(--olive); }
.reise li.jetzt { color: #FFF6EA; background: var(--terra); font-weight: 700; }

@media (max-width: 899px) {
  #screen-game.is-active { grid-template-areas: 'kopf' 'reise' 'buehne'; }
  .reise {
    position: sticky; top: 58px; z-index: 15; padding: 8px 0 10px;
    background: #F6EADAe6; backdrop-filter: blur(8px); border-bottom: 1px solid var(--rand);
  }
  .reise-titel { display: none; }
  .reise ol { display: flex; gap: 7px; overflow-x: auto; padding: 2px 16px 4px; scrollbar-width: none; }
  .reise ol::-webkit-scrollbar { display: none; }
  .reise li {
    flex: 0 0 auto; padding: 6px 13px; border-radius: 999px;
    border: 1px solid var(--rand); background: var(--papier);
    font-size: .85rem; white-space: nowrap;
  }
  .reise li.geschafft { border-color: var(--salbei); background: #7E9B761f; }
  .reise li.jetzt { border-color: var(--rost); }
}

@media (min-width: 900px) {
  #screen-game.is-active {
    grid-template-areas: 'kopf kopf' 'buehne reise';
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: start;
  }
  .antworten { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .reise { position: sticky; top: 88px; padding: 18px 16px; }
  .reise ol { display: flex; flex-direction: column-reverse; gap: 2px; }
  .reise li { padding: 9px 12px 9px 34px; border-radius: 10px; font-size: .97rem; }
  .reise li::before {
    content: ''; position: absolute; left: 13px; top: 50%;
    width: 9px; height: 9px; margin-top: -4px; border-radius: 50%;
    border: 2px solid var(--rand); background: var(--papier);
  }
  .reise li::after {
    content: ''; position: absolute; left: 17px; top: -50%; height: 50%;
    border-left: 2px dotted var(--rand);
  }
  .reise li:last-child::after { display: none; }
  .reise li.geschafft::before { background: var(--salbei); border-color: var(--olive); }
  .reise li.jetzt::before { background: #FFF6EA; border-color: #FFF6EA; }
  #screen-game.ohne-reise.is-active { grid-template-areas: 'kopf' 'buehne'; grid-template-columns: minmax(0, 1fr); }
}

/* Vorhänge */
.vorhang {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: #4B3327cc; backdrop-filter: blur(6px);
}
.vorhang[hidden] { display: none; }

.blatt {
  width: min(540px, 100%); padding: 30px 26px 26px; text-align: center;
  border-radius: 150px 150px 20px 20px;
  background: var(--papier); border: 2px solid var(--rand);
  box-shadow: 0 24px 60px #2A1B1266;
}
.blatt-titel { margin: 6px 0 14px; font-family: Fraunces, serif; font-size: 1.45rem; color: var(--rost); }
.blatt-text { margin: 0 0 22px; font-size: 1.1rem; }
.blatt-knoepfe { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.uhr {
  margin: 6px 0 20px; font-family: Fraunces, serif; font-size: 2.6rem;
  color: var(--olive); font-variant-numeric: tabular-nums;
}
.uhr.knapp { color: var(--rost); animation: pochen 1s ease-in-out infinite; }
@keyframes pochen { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } }

.anruf-name { margin: 0 0 18px; font-size: 1.2rem; }
.anruf-waehlen { margin-bottom: 10px; }
.anruf-nummer { margin: 0 0 8px; color: var(--tinte-leicht); font-size: 1.05rem; letter-spacing: .06em; }

.rahmen { width: min(880px, 100%); text-align: center; }
.rahmen-label { margin: 0 0 12px; letter-spacing: .22em; color: var(--senf); }
.vorhang-film video, .vorhang-film img {
  width: 100%; max-height: 62vh; border-radius: 26px 26px 14px 14px;
  background: #2A211C; border: 3px solid var(--senf);
}
.rahmen-text { font-size: 1.1rem; margin: 16px auto; max-width: 50ch; color: var(--sand); }
#loesung-fertig { margin-top: 12px; }

/* Der Sektmoment */
.sekt {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: #FBF1E2f2; overflow: hidden;
}
.sekt[hidden] { display: none; }
.sekt-mitte { text-align: center; }

.flasche { width: min(180px, 42vw); height: auto; overflow: visible; }
.flasche-koerper { transform-origin: 60px 250px; animation: kippen 2.4s cubic-bezier(.3,.7,.3,1) forwards; }
.korken { animation: knallen 2.4s cubic-bezier(.2,.9,.4,1) forwards; }

@keyframes kippen {
  0% { transform: rotate(0) } 18% { transform: rotate(-6deg) }
  30% { transform: rotate(-32deg) } 70% { transform: rotate(-26deg) }
  100% { transform: rotate(-20deg) }
}
@keyframes knallen {
  0%, 22% { transform: translate(0,0) rotate(0); opacity: 1 }
  40%  { transform: translate(60px,-180px) rotate(140deg); opacity: 1 }
  70%  { transform: translate(150px,-60px) rotate(400deg); opacity: .7 }
  100% { transform: translate(210px,140px) rotate(620deg); opacity: 0 }
}

.sekt-stufe {
  margin: 26px 0 2px; font-family: Fraunces, serif;
  font-size: clamp(1.9rem, 8vw, 3.1rem); color: var(--rost);
  animation: auftauchen .6s .5s both;
}
.sekt-text { margin: 0; letter-spacing: .22em; color: var(--tinte-leicht); animation: auftauchen .6s .7s both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.krumen { position: absolute; width: 11px; height: 15px; border-radius: 2px; animation: fallen linear forwards; }
@keyframes fallen {
  0% { transform: translate3d(0,0,0) rotate(0); opacity: 1 }
  100% { transform: translate3d(var(--dx), 108vh, 0) rotate(var(--spin)); opacity: .15 }
}

@media (prefers-reduced-motion: reduce) {
  .flasche-koerper, .korken, .krumen, .sekt-stufe, .sekt-text, .uhr.knapp { animation: none !important; }
  .krumen { display: none; }
}