/* Naturewalk Forest · Visenza. Look wie Landingpage und Naturewalk-Erlebnis (Stand 11.09.2026):
   dunkler Waldgrund, warmes Gold für Buttons, Glas-Flächen, runde Pillen, Linien-Icons in Lehm. */
:root {
  --kalk: #F4F1EC; --sand: #E7E0D4; --stein: #D6CEC2; --lehm: #C8B9A6;
  --erde: #A69887; --moos: #4E5A51; --fels: #3D3D38; --nacht: #1E1D1B;
  --tiefe: #222518;                       /* Seitengrund, tiefer Waldboden */
  --flaeche: #2F3324;                     /* Karten */
  --glas: rgb(47 51 36 / 72%);            /* Glasfläche */
  --glas-leise: rgb(47 51 36 / 14%);      /* Chip in Ruhe */
  --rand: rgb(214 206 194 / 22%);         /* Karten- und Chip-Rand */
  --gold-tief: #5C4929;                   /* Primär-Button */
  --gold-tief-hell: #6E5934;              /* Primär-Button gedrückt */
  --text-ruhig: rgb(244 241 236 / 86%);
  --text-leise: rgb(244 241 236 / 68%);
  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--tiefe); color: var(--kalk); overflow: hidden; }
body { font-family: var(--font-body); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
.hidden { display: none !important; }

/* Bühne: alles vollflächig, das Bild ist der Raum */
.stage { position: fixed; inset: 0; background: var(--tiefe); }
.layer { position: absolute; inset: 0; }
.video { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .6s ease; background: var(--tiefe); }
.video.on { opacity: 1; }
.img { background-size: cover; background-position: center; opacity: 0; transition: opacity .9s ease; }
.img.on { opacity: 1; }
.scrim { pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background: linear-gradient(to bottom, rgb(34 37 24 / 40%) 0%, rgb(34 37 24 / 14%) 30%, rgb(34 37 24 / 14%) 55%, rgb(34 37 24 / 62%) 100%); }
.scrim.on { opacity: 1; }
.scrim.strong { background: linear-gradient(to bottom, rgb(34 37 24 / 40%) 0%, rgb(34 37 24 / 32%) 25%, rgb(34 37 24 / 66%) 50%, rgb(34 37 24 / 90%) 100%); }
.scrim.full { background: rgb(34 37 24 / 62%); }

/* Text im Bild */
.overlay { display: flex; flex-direction: column; justify-content: flex-end; padding: calc(24px + var(--safe-top)) 28px calc(40px + var(--safe-bottom)); text-align: center; }
.overlay.center { justify-content: center; }
.overlay.top { justify-content: flex-start; padding-top: calc(72px + var(--safe-top)); }
.kicker { font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--lehm); }
.h-big { font-family: var(--font-head); font-weight: 300; font-size: clamp(30px, 9vw, 44px); letter-spacing: .2em; text-transform: uppercase; line-height: 1.25; margin: 10px 0 0; color: var(--kalk); text-wrap: balance; }
.h-big .sub { display: block; font-size: .5em; letter-spacing: .34em; color: var(--lehm); margin-top: 6px; }
.h-mid { font-family: var(--font-head); font-weight: 300; font-size: clamp(26px, 7.5vw, 36px); letter-spacing: .04em; line-height: 1.25; margin: 0; color: var(--kalk); text-wrap: balance; }
.akzent { font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: clamp(21px, 5.8vw, 27px); color: var(--kalk); margin-top: 12px; letter-spacing: .02em; }
.zeile { font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: clamp(21px, 5.8vw, 27px); color: var(--kalk); margin-top: 14px; opacity: 0; transition: opacity 1.4s ease; }
.zeile.on { opacity: 1; }
.zeile.ruhig { font-style: normal; font-family: var(--font-body); font-weight: 300; font-size: clamp(16px, 4.4vw, 19px); letter-spacing: .12em; color: var(--text-ruhig); }
.text { font-size: clamp(16px, 4.4vw, 19px); line-height: 1.75; color: var(--kalk); max-width: 34ch; margin: 0 auto; white-space: pre-line; text-wrap: balance; }
.text.soft { color: var(--text-ruhig); }
.caption { font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: clamp(22px, 6vw, 30px); color: var(--kalk); letter-spacing: .02em; }
.hint { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-leise); margin-top: 22px; }
.fussnote { font-size: 13px; color: var(--text-leise); margin-top: 20px; letter-spacing: .02em; }

/* Abschlussseite */
.text.schluss { font-family: var(--font-head); font-weight: 300; font-size: clamp(20px, 5.6vw, 26px); line-height: 1.45; max-width: 30ch; }
.text.schluss.klein { font-size: clamp(17px, 4.8vw, 22px); opacity: .9; }
.unterschrift { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.unterschrift span { font-size: clamp(16px, 4.4vw, 19px); color: var(--text-ruhig); }
.unterschrift img { height: 44px; width: auto; }
.textlink { display: inline-block; margin-top: 26px; color: var(--kalk); font-family: var(--font-body); font-weight: 400; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; }

/* Kapitel-Icons: Linienzeichnung in Lehm, aus /icons */
.icon { width: 30px; height: 30px; flex: none; opacity: .9; }
.ch-icon { display: block; width: 40px; height: 40px; margin: 26px auto 0; opacity: .9; }

/* „Das erwartet dich“: sechs Kapitel mit Icon, Name, Ziel */
.erwartet { text-align: left; max-width: 360px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 18px; }
.erwartet .row { display: flex; align-items: center; gap: 18px; }
.erwartet .row b { display: block; font-family: var(--font-head); font-weight: 300; font-size: clamp(20px, 5.6vw, 25px); letter-spacing: .2em; text-transform: uppercase; line-height: 1.2; color: var(--kalk); }
.erwartet .row span { display: block; font-size: clamp(14px, 4vw, 17px); color: var(--text-ruhig); line-height: 1.5; }
.cta-slot { min-height: 74px; margin-top: 26px; }
.cta-slot .btn { opacity: 0; transition: opacity 1.2s ease; }
.cta-slot .btn.on { opacity: 1; }

/* Buttons: runde Pillen. Primär gefüllt in tiefem Gold, Light als Outline auf Bild, Ghost als Glas. */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 1.2em; border: 1px solid var(--gold-tief); background: var(--gold-tief); color: var(--kalk); font-family: var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; padding: 15px 32px; border-radius: 999px; cursor: pointer; margin-top: 24px; min-width: 200px; line-height: 1; text-decoration: none; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.btn:hover, .btn:active { background: var(--gold-tief-hell); border-color: var(--gold-tief-hell); box-shadow: 0 10px 34px rgb(92 73 41 / 32%); }
.btn.light { background: transparent; border-color: rgb(244 241 236 / 45%); color: var(--kalk); box-shadow: none; }
.btn.light:hover, .btn.light:active { background: rgb(244 241 236 / 12%); border-color: var(--kalk); }
.btn.light.sel { background: var(--kalk); color: var(--tiefe); border-color: var(--kalk); }
.btn.dark { background: transparent; border-color: rgb(244 241 236 / 45%); color: var(--kalk); box-shadow: none; }
.btn.dark:hover { background: rgb(244 241 236 / 12%); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.btn-row .btn { margin-top: 0; min-width: 0; padding: 13px 22px; }
.ghost { appearance: none; background: var(--glas); border: 1px solid var(--rand); color: var(--kalk); font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; cursor: pointer; }
.link { appearance: none; background: none; border: 0; color: var(--lehm); font-family: var(--font-body); font-size: 13px; letter-spacing: .04em; padding: 8px 0; cursor: pointer; }

/* Anteilsbalken, fast unsichtbar */
.progress { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 0px); height: 2px; background: rgb(244 241 236 / 15%); }
.progress i { display: block; height: 100%; background: var(--lehm); width: 0; transition: width .8s ease; }

/* Kopfzeile */
.topbar { position: fixed; top: var(--safe-top); left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; z-index: 20; opacity: 0; transition: opacity .4s; }
.topbar.show { opacity: 1; }
.top-title { font-family: var(--font-head); font-style: italic; font-size: 16px; color: var(--text-ruhig); letter-spacing: .02em; text-align: center; flex: 1; }

/* Atemkreis */
.breath { width: min(58vw, 260px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(244 241 236 / 70%); margin: 0 auto 34px; transform: scale(.55); animation: breathe var(--cycle, 8s) ease-in-out infinite; }
@keyframes breathe { 0% { transform: scale(.55); } 50% { transform: scale(1); } 100% { transform: scale(.55); } }

/* Auswahl-Chips (Glas-Pillen), Formulare */
.choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.choices .btn { margin-top: 0; min-width: 0; padding: 11px 20px; font-family: var(--font-head); font-weight: 400; font-size: 18px; letter-spacing: .06em; text-transform: none; line-height: 1.25; background: var(--glas-leise); border: 1px solid var(--rand); color: var(--kalk); box-shadow: none; }
.choices .btn.sel { background: var(--flaeche); border-color: rgb(214 206 194 / 45%); color: var(--kalk); }
textarea { width: 100%; max-width: 420px; min-height: 130px; margin: 22px auto 0; display: block; background: var(--glas); color: var(--kalk); border: 1px solid var(--rand); border-radius: 18px; padding: 16px 18px; font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.6; resize: vertical; }
textarea:focus { outline: none; border-color: rgb(214 206 194 / 50%); }
textarea::placeholder { color: var(--text-leise); }
input[type=email], input[type=password], input[type=text] { width: 100%; background: transparent; color: var(--kalk); border: 0; border-bottom: 1px solid var(--rand); padding: 12px 2px; font-family: var(--font-body); font-size: 17px; font-weight: 300; margin-top: 18px; border-radius: 0; }
input:focus { outline: none; border-bottom-color: var(--lehm); }
input::placeholder { color: var(--text-leise); }

/* Tor: Anmeldung, Weitermachen. Dunkler Waldgrund, Glas-Karte. */
.gate { position: fixed; inset: 0; z-index: 30; background: var(--tiefe); color: var(--kalk); display: flex; align-items: center; justify-content: center; padding: calc(28px + var(--safe-top)) 20px calc(28px + var(--safe-bottom)); overflow-y: auto; }
.gate-card { width: 100%; max-width: 420px; text-align: center; background: var(--glas); border: 1px solid var(--rand); border-radius: 18px; padding: 34px 24px 30px; }
.gate .kicker { color: var(--lehm); }
.gate .h-big { font-size: clamp(26px, 7.5vw, 38px); }
.gate .text { color: var(--kalk); }
.gate .text.soft { color: var(--text-ruhig); }
.gate .btn { margin-top: 26px; }
.gate .btn.dark { margin-top: 12px; }
.gate hr { border: 0; border-top: 1px solid var(--rand); margin: 34px 0 26px; }
.gate .small { font-size: 13px; color: var(--text-leise); margin-top: 14px; line-height: 1.6; }
.gate .err { color: #d9a08f; font-size: 14px; margin-top: 12px; }

/* Stationsmenü, dunkel */
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--tiefe); color: var(--kalk); display: flex; flex-direction: column; padding-top: var(--safe-top); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px 24px; border-bottom: 1px solid var(--rand); }
.menu-list { flex: 1; overflow-y: auto; padding: 8px 24px calc(24px + var(--safe-bottom)); }
.menu-top { text-align: center; padding: 18px 0 6px; }
.menu-top .btn { margin-top: 0; }
.menu-chapter { display: flex; align-items: center; gap: 14px; font-family: var(--font-head); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; margin: 28px 0 6px; color: var(--kalk); }
.menu-chapter .icon { width: 26px; height: 26px; }
.menu-chapter em { display: block; font-family: var(--font-body); font-style: normal; font-size: 10px; letter-spacing: .24em; color: var(--lehm); margin-bottom: 3px; }
.menu-chapter small { display: block; font-family: var(--font-head); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 16px; color: var(--lehm); }
.menu-item { display: flex; gap: 14px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rand); padding: 12px 0; font-family: var(--font-body); font-size: 15px; font-weight: 300; color: var(--text-ruhig); cursor: pointer; }
.menu-item b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--lehm); min-width: 26px; }
.menu-item.now { color: var(--kalk); }
.menu-item.done { color: var(--text-leise); }
.sheet-foot { padding: 14px 24px calc(16px + var(--safe-bottom)); border-top: 1px solid var(--rand); text-align: center; }