/* Senses 21 · 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, [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 .6s 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; }

/* Vorher und nachher (seit 01.10.2026): Schieber 1 bis 10 und Gegenueberstellung, nur vorhandene Werte */
.q { margin-top: 18px; }
.q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.q-text { font-size: 15px; line-height: 1.55; color: var(--text-ruhig); }
.q-val { font-family: var(--font-head); font-size: 26px; color: var(--kalk); min-width: 1.4em; text-align: right; }
.q input[type=range] { width: 100%; margin: 10px 0 4px; accent-color: var(--gold-tief-hell); }
.q-scale { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-leise); line-height: 1.4; }
.q-scale span:last-child { text-align: right; }
.cmp-row { display: grid; grid-template-columns: 1fr 44px 44px 44px 44px; gap: 6px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.cmp-row.cmp-head { padding-top: 2px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--lehm); }
.cmp-label { font-size: 15px; color: var(--text-ruhig); }
.cmp-num { text-align: center; font-family: var(--font-head); font-size: 24px; color: var(--text-leise); }
.cmp-num.now { color: var(--kalk); }
.cmp-head .cmp-num { font-family: var(--font-body); font-size: 11px; }
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary .kicker { text-decoration: underline; text-underline-offset: 5px; }

/* 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; }

/* Marke und Unterschrift (02.10.2026): Zeichen plus Wortmarke oben links, Christinas Unterschrift unter ihren Worten. */
.marke-oben { position: absolute; top: calc(18px + var(--safe-top)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--kalk); text-shadow: 0 1px 14px rgb(0 0 0 / 45%); }
.marke-oben img { width: 76px; height: auto; filter: drop-shadow(0 1px 8px rgb(0 0 0 / 40%)); }
.marke-oben span { font-family: var(--font-head); font-weight: 400; font-size: 22px; letter-spacing: .28em; padding-left: .28em; text-transform: uppercase; }
.willkommen { font-size: clamp(28px, 8vw, 38px); line-height: 1.2; margin-top: 12px; text-wrap: balance; }
.unterschrift { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.unterschrift span { font-family: var(--font-head); font-style: italic; font-size: clamp(18px, 4.8vw, 21px); color: var(--text-ruhig); }
.unterschrift img { height: 46px; width: auto; max-width: 100%; }
.gate-zeichen { width: 64px; height: auto; display: block; margin: 0 auto 14px; }
#menuKicker { display: inline-flex; align-items: center; gap: 12px; }
#menuKicker img { width: 30px; height: auto; }
#menuKicker span { font-family: var(--font-head); font-size: 17px; letter-spacing: .28em; color: var(--kalk); }
.view.willkommen-view > .spacer { flex: 1 0 auto; min-height: 44vh; }

/* Regler als Glut (02.10.2026, Christina: "etwas Sinnliches statt dem weissen Knopf"). Je hoeher der Wert, desto waermer und groesser leuchtet sie. Jede Frage hat ihr Zeichen: Mond, Mitte, Flamme. */
.q-val { font-size: calc(22px + var(--v, 5) * 1.1px); color: rgb(244 226 190); transition: font-size .2s; }
.q input[type=range].glut { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 6px 0 2px; background: transparent; cursor: pointer; --p: calc((var(--v, 5) - 1) / 9 * 100%); }
.glut:focus { outline: none; }
.glut::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgb(200 185 166 / 70%) 0, #e2b46e var(--p), rgb(214 206 194 / 22%) var(--p)); }
.glut::-moz-range-track { height: 2px; border-radius: 2px; background: rgb(214 206 194 / 22%); }
.glut::-moz-range-progress { height: 2px; background: linear-gradient(90deg, rgb(200 185 166 / 70%), #e2b46e); }
.glut::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -14px; border-radius: 50%; border: 1px solid rgb(250 236 205 / 60%);
  background: var(--zeichen) center / 16px 16px no-repeat, radial-gradient(circle at 38% 32%, #fbe9c4 0, #e0ae66 42%, #8a6431 100%);
  box-shadow: 0 0 calc(4px + var(--v, 5) * 2.4px) calc(var(--v, 5) * .55px) rgb(232 178 98 / calc(.12 + var(--v, 5) * .055)); transition: box-shadow .3s; }
.glut::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgb(250 236 205 / 60%);
  background: var(--zeichen) center / 16px 16px no-repeat, radial-gradient(circle at 38% 32%, #fbe9c4 0, #e0ae66 42%, #8a6431 100%);
  box-shadow: 0 0 calc(4px + var(--v, 5) * 2.4px) calc(var(--v, 5) * .55px) rgb(232 178 98 / calc(.12 + var(--v, 5) * .055)); }
.glut:active::-webkit-slider-thumb { transform: scale(1.12); }
.glut-q1 { --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2810' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5a8 8 0 1 0 4 12.5 7 7 0 0 1-4-12.5z'/%3E%3C/svg%3E"); }
.glut-q2 { --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2810' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%233a2810'/%3E%3C/svg%3E"); }
.glut-q3 { --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2810' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.6 3.2 5.5 5.6 5.5 10.5a5.5 5.5 0 0 1-11 0c0-2.6 1.6-4 2.4-5.6.7 1.3 1 2.4 1 3.4C11 8.6 11 5.6 12 3z'/%3E%3C/svg%3E"); }

/* Drei Atemzuege vor dem Abend */
.atem-link { display: block; margin: 2px 0 2px; font-size: 13px; }
.atem { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 24px; background: rgb(24 26 17 / 97%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .6s ease; }
.atem.da { opacity: 1; }
.atem.weg { opacity: 0; }
.atem-kreis { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgb(250 236 205 / 45%);
  background: radial-gradient(circle at 40% 35%, rgb(251 233 196 / 55%), rgb(224 174 102 / 30%) 45%, rgb(92 73 41 / 10%) 75%); box-shadow: 0 0 40px 6px rgb(232 178 98 / 18%);
  transform: scale(.75); transition: transform 6s cubic-bezier(.45,0,.55,1), box-shadow 6s ease; }
.atem-kreis.ein { transform: scale(1.6); box-shadow: 0 0 80px 22px rgb(232 178 98 / 32%); transition-duration: 4s; }
.atem-wort { font-family: var(--font-head); font-style: italic; font-size: 22px; color: var(--kalk); }
.atem-hinweis { max-width: 300px; text-align: center; font-size: 14px; color: var(--text-leise); margin: 0; }
.atem-weiter { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 90px; }
.atem-weiter .btn { margin-top: 0; }

/* Lichtspur unter dem Finger */
.spur { position: fixed; z-index: 15; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(251 233 196 / 34%) 0, rgb(224 174 102 / 14%) 38%, transparent 70%); mix-blend-mode: screen; animation: spur 1.4s ease-out forwards; }
@keyframes spur { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spur { display: none; } .atem-kreis { transition-duration: .01s; } }

/* Abspielen gut sichtbar auf jedem Bild (02.10.2026): Glas-Pille hinter Ring und Wort. */
.playbtn { padding: 6px 18px 6px 6px; border-radius: 999px; background: rgb(30 32 22 / 58%); border: 1px solid var(--rand); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--kalk); font-size: 15px; letter-spacing: .04em; align-self: flex-start; }
.playbtn .ring { border-color: rgb(250 236 205 / 85%); background: rgb(224 174 102 / 18%); }

/* Persoenlicher Abschluss unter dem Tag */
.abschied { margin: 34px -24px 10px; padding: 44px 30px 40px; background: radial-gradient(ellipse 85% 70% at 50% 45%, rgb(24 26 17 / 96%) 0, rgb(24 26 17 / 90%) 55%, rgb(24 26 17 / 0%) 100%); display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity 1.4s ease, transform 1.4s ease; }
.abschied.da { opacity: 1; transform: none; }
.abschied-bild { width: 190px; height: 230px; background-size: cover; background-position: center 30%; border-radius: 50%;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, rgb(0 0 0 / 0%) 70%); mask-image: radial-gradient(ellipse at center, #000 38%, rgb(0 0 0 / 0%) 70%);
  transform: scale(.94); transition: transform 3s ease; }
.abschied.da .abschied-bild { transform: scale(1); }
.abschied-titel { font-size: clamp(24px, 6.6vw, 30px); margin-top: 6px; }
.abschied-text { max-width: 30ch; margin: 10px auto 0; }
.abschied-morgen { font-family: var(--font-head); font-style: italic; font-size: 18px; color: rgb(244 226 190); margin: 18px 0 0; }
.abschied .unterschrift { align-items: center; }
.abschied-motto { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--lehm); margin: 22px 0 0; }

/* Weiter-Pfeil in der Kopfzeile, nur fuer schon offene Tage */
.topbar { gap: 8px; }
#btnNext { order: 1; }
#btnMenu { order: 2; }

/* Das ganze Bild: Text, Kopfzeile und Schleier weichen, das Foto bleibt */
.view, .topbar, .scrim { transition: opacity 1.3s ease; }
body.voll .view, body.voll .topbar, body.voll .scrim.on, body.voll .vorschau-hinweis { opacity: 0 !important; pointer-events: none; }
body.voll .img { background-size: contain; background-color: var(--nacht); }
.voll-hinweis { position: fixed; left: 50%; bottom: calc(26px + var(--safe-bottom)); transform: translateX(-50%); z-index: 45; pointer-events: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); background: rgb(30 32 22 / 60%); border: 1px solid var(--rand); border-radius: 999px; padding: 7px 14px; white-space: nowrap; opacity: 0; transition: opacity 1s ease; }
.voll-hinweis.da { opacity: 1; }

/* Deine Spur: vier Punkte je Frage als Glut-Linie */
.spur-row { border-bottom: 1px solid var(--rand); }
.spur-row .cmp-row { border-bottom: 0; padding-bottom: 2px; }
.glutspur { display: block; width: 100%; height: 44px; margin: 0 0 8px; overflow: visible; }
.glut-line { fill: none; stroke: #e2b46e; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.glut-dot { fill: #e0ae66; stroke: rgb(250 236 205 / 60%); stroke-width: 1; }
.glut-dot.end { fill: #fbe9c4; filter: drop-shadow(0 0 6px rgb(232 178 98 / 80%)); }

/* Dein Stein in der Kopfzeile (Idee 1): --w 0 bis 1 ist die Waerme */
.stein { appearance: none; border: 0; width: 26px; height: 22px; padding: 0; cursor: pointer; border-radius: 48% 52% 50% 50% / 58% 56% 44% 42%;
  background: radial-gradient(circle at 36% 32%, rgb(251 233 196 / calc(.18 + var(--w, 0) * .82)), rgb(224 174 102 / calc(.14 + var(--w, 0) * .76)) 48%, rgb(92 73 41 / .95) 100%);
  box-shadow: 0 0 calc(2px + var(--w, 0) * 14px) calc(var(--w, 0) * 4px) rgb(232 178 98 / calc(.1 + var(--w, 0) * .6)), inset 0 -2px 3px rgb(0 0 0 / 35%); transition: box-shadow 1.2s ease, background 1.2s ease; margin-right: 2px; }
.toast { position: fixed; left: 50%; bottom: calc(28px + var(--safe-bottom)); transform: translateX(-50%) translateY(8px); z-index: 45; max-width: 86vw; text-align: center; font-size: 13px; line-height: 1.5; color: var(--kalk); background: rgb(30 32 22 / 88%); border: 1px solid var(--rand); border-radius: 14px; padding: 10px 16px; opacity: 0; transition: opacity .5s ease, transform .5s ease; }
.toast.da { opacity: 1; transform: translateX(-50%); }

/* Der Weg an Tag 1 */
.weg-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.weg-row:last-child { border-bottom: 0; }
.weg-nr { font-family: var(--font-head); font-size: 20px; color: var(--lehm); min-width: 28px; text-align: right; }
.weg-titel { font-family: var(--font-head); font-style: italic; font-size: 19px; color: var(--kalk); }

/* Dein Satz kommt zurueck */
.abschied-echo { margin: 16px 0 0; max-width: 32ch; font-size: 14px; color: var(--text-leise); }
.abschied-echo q { display: block; margin-top: 4px; font-family: var(--font-head); font-style: italic; font-size: 18px; color: var(--kalk); quotes: "„" "“"; }

/* Lichtspur je Woche (Idee 3) */
.spur.w2 { width: 170px; height: 170px; margin: -85px 0 0 -85px; animation-duration: 1.9s; background: radial-gradient(circle, rgb(251 226 180 / 36%) 0, rgb(226 170 96 / 16%) 40%, transparent 70%); }
.spur.w3 { width: 190px; height: 190px; margin: -95px 0 0 -95px; animation-duration: 2.3s; background: radial-gradient(circle, rgb(252 222 176 / 38%) 0, rgb(228 166 100 / 18%) 42%, transparent 70%); }
.spur.w3.zwei { width: 150px; height: 150px; margin: -75px 0 0 -75px; opacity: .8; }
/* Tag 1: ein Satz von Christina unter der Ueberschrift */
.einstieg { font-family: var(--font-head); font-style: italic; font-size: clamp(19px, 5.2vw, 23px); line-height: 1.45; color: rgb(244 226 190); margin: 10px 0 4px; max-width: 30ch; text-wrap: balance; }

/* Willkommen gesprochen (Fassung 09, 02.10.2026): Abspielknopf unter dem Text, vor der Unterschrift */
.willkommen-audio{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.willkommen-audio .small{opacity:.75}