/* Logbuch · Visenza. Look wie Naturewalk-App und Landingpage (Stand 11.09.2026):
   dunkler Waldgrund, warmes Gold fuer Buttons, Glas-Flaechen, runde Pillen. */
:root {
  --kalk: #F4F1EC; --sand: #E7E0D4; --stein: #D6CEC2; --lehm: #C8B9A6;
  --erde: #A69887; --moos: #4E5A51; --fels: #3D3D38; --nacht: #1E1D1B;
  --tiefe: #222518;
  --flaeche: #2F3324;
  --glas: rgb(47 51 36 / 72%);
  --glas-leise: rgb(47 51 36 / 14%);
  --rand: rgb(214 206 194 / 22%);
  --gold-tief: #5C4929;
  --gold-tief-hell: #6E5934;
  --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 { min-height: 100%; margin: 0; background: var(--tiefe); color: var(--kalk); }
body { font-family: var(--font-body); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }

/* ---------- App ---------- */
body.app { height: 100%; overflow: hidden; -webkit-user-select: none; user-select: none; }
.stage { position: fixed; inset: 0; background: var(--tiefe); }
.layer { position: absolute; inset: 0; }
.video { width: 100%; height: 100%; object-fit: cover; 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 / 45%) 0%, rgb(34 37 24 / 30%) 30%, rgb(34 37 24 / 70%) 60%, rgb(34 37 24 / 94%) 100%); }
.scrim.on { opacity: 1; }
.view { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(64px + var(--safe-top)) 24px calc(40px + var(--safe-bottom)); display: flex; flex-direction: column; }
.view > * { flex: none; }
.view > .spacer { flex: 1 0 0; min-height: 0; }
.view.top > .spacer { display: none; }

.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: .12em; text-transform: uppercase; line-height: 1.2; margin: 8px 0 0; color: var(--kalk); text-wrap: balance; }
.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: 6px 0 0; color: var(--kalk); text-wrap: balance; }
.akzent { font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: clamp(20px, 5.6vw, 26px); color: var(--kalk); margin-top: 10px; letter-spacing: .02em; }
.text { font-size: clamp(16px, 4.3vw, 18px); line-height: 1.75; color: var(--kalk); max-width: 36ch; white-space: pre-line; }
.text.soft { color: var(--text-ruhig); }
.small { font-size: 13px; color: var(--text-leise); line-height: 1.6; }
.hint { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-leise); margin-top: 18px; }

.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; 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 30px; border-radius: 999px; cursor: pointer; margin-top: 22px; min-width: 190px; line-height: 1; text-decoration: none; transition: background .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 { background: rgb(244 241 236 / 12%); border-color: var(--kalk); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.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: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; cursor: pointer; min-width: 44px; }
.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; text-decoration: underline; text-underline-offset: 5px; }

/* Karten im Bild */
.card { background: var(--glas); border: 1px solid var(--rand); border-radius: 18px; padding: 20px 20px 22px; margin-top: 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card .kicker { display: block; margin-bottom: 6px; }
.card .text { font-size: clamp(16px, 4.3vw, 18px); }
.card .akzent { margin-top: 0; }
.playbtn { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; }
.playbtn .ring { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgb(244 241 236 / 70%); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.playbtn.playing .ring { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.impulse { margin-top: 12px; }
.impulse .text { color: var(--text-ruhig); }
details.impulse > summary { list-style: none; cursor: pointer; }
details.impulse > summary::-webkit-details-marker { display: none; }

textarea { width: 100%; min-height: 110px; margin: 14px 0 0; display: block; background: rgb(34 37 24 / 55%); color: var(--kalk); border: 1px solid var(--rand); border-radius: 16px; padding: 14px 16px; font-family: var(--font-head); font-weight: 400; font-size: 20px; line-height: 1.5; resize: vertical; }
textarea:focus { outline: none; border-color: rgb(214 206 194 / 55%); }
textarea::placeholder { color: var(--text-leise); font-style: italic; }
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); }
.err { color: #d9a08f; font-size: 14px; margin-top: 12px; }
.line-saved { font-family: var(--font-head); font-style: italic; font-size: clamp(20px, 5.6vw, 26px); color: var(--kalk); margin-top: 10px; line-height: 1.4; }
.date { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lehm); margin-top: 8px; }

/* Logbuch-Liste */
.logbook { padding-top: 4px; }
.lb-row { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rand); align-items: baseline; }
.lb-row b { font-family: var(--font-body); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--lehm); font-size: 13px; letter-spacing: .1em; }
.lb-row .t { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.lb-row .l { font-family: var(--font-head); font-size: clamp(18px, 5vw, 22px); line-height: 1.4; color: var(--kalk); margin-top: 2px; }
.lb-row.missed .l, .lb-row.open .l { color: var(--text-leise); font-style: italic; font-size: 16px; }
.lb-row.now b { color: var(--kalk); }
.lb-phase { margin: 26px 0 4px; font-family: var(--font-head); font-size: 20px; letter-spacing: .1em; text-transform: uppercase; color: var(--lehm); }
.lb-row[data-day] { cursor: pointer; }

/* Kopfzeile, Menue, Tor */
.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; }
.top-title { font-family: var(--font-head); font-style: italic; font-size: 16px; color: var(--text-ruhig); text-align: center; flex: 1; }
.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-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rand); padding: 16px 0; font-family: var(--font-body); font-size: 16px; font-weight: 300; color: var(--kalk); cursor: pointer; }
.menu-item small { display: block; color: var(--text-leise); font-size: 13px; margin-top: 2px; }
.sheet-foot { padding: 14px 24px calc(16px + var(--safe-bottom)); border-top: 1px solid var(--rand); display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.gate { position: fixed; inset: 0; z-index: 30; background: var(--tiefe); 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 .h-big { font-size: clamp(26px, 7.5vw, 38px); }
.gate .text { margin: 0 auto; }
.gate hr { border: 0; border-top: 1px solid var(--rand); margin: 30px 0 22px; }
.gate .btn { margin-top: 24px; }

/* ---------- Verkaufsseite ---------- */
body.landing { overflow-x: hidden; }
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(40px + var(--safe-top)) 24px 56px; background: var(--tiefe) center/cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(34 37 24 / 35%) 0%, rgb(34 37 24 / 20%) 40%, rgb(34 37 24 / 92%) 100%); }
.hero > * { position: relative; }
.wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.wrap.wide { max-width: 720px; }
section { padding: 88px 24px; }
section.sand { background: var(--flaeche); }
.hero .h-big { font-size: clamp(34px, 10vw, 60px); letter-spacing: .1em; }
.lead { font-family: var(--font-head); font-weight: 300; font-size: clamp(22px, 6vw, 30px); line-height: 1.4; color: var(--kalk); margin-top: 18px; text-wrap: balance; }
.steps { margin-top: 30px; display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.step b { font-family: var(--font-head); font-weight: 300; font-size: 34px; line-height: 1; color: var(--lehm); }
.step .t { font-family: var(--font-head); font-size: 22px; color: var(--kalk); }
.step .d { color: var(--text-ruhig); font-size: 16px; }
.phases { margin-top: 26px; border-top: 1px solid var(--rand); }
.phase { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rand); align-items: baseline; }
.phase span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lehm); }
.phase b { font-family: var(--font-head); font-weight: 400; font-size: 21px; color: var(--kalk); display: block; }
.phase i { font-style: italic; color: var(--text-ruhig); font-family: var(--font-head); font-size: 18px; }
.price { font-family: var(--font-head); font-weight: 300; font-size: clamp(44px, 12vw, 64px); color: var(--kalk); line-height: 1; margin-top: 14px; }
.price small { font-family: var(--font-body); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--lehm); display: block; margin-top: 8px; }
.cur { display: inline-flex; border: 1px solid var(--rand); border-radius: 999px; overflow: hidden; margin-top: 18px; }
.cur button { appearance: none; background: transparent; border: 0; color: var(--text-leise); font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; }
.cur button.on { background: var(--kalk); color: var(--tiefe); }
.faq details { border-bottom: 1px solid var(--rand); padding: 14px 0; }
.faq summary { cursor: pointer; font-family: var(--font-head); font-size: 20px; color: var(--kalk); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--text-ruhig); margin: 10px 0 0; }
.lang-switch { position: fixed; top: calc(12px + var(--safe-top)); right: 14px; z-index: 5; }
footer { padding: 40px 24px calc(40px + var(--safe-bottom)); text-align: center; color: var(--text-leise); font-size: 13px; }
footer a { color: var(--lehm); }
.signature { font-family: var(--font-head); font-style: italic; font-size: 22px; color: var(--kalk); margin-top: 26px; }