/* ============================================================
   Përkujtuesi Ditor — Përvoja interaktive
   BAUSTEIN-MODUS (28.07.2026): nur Text und Hintergrund.
   Keine Animationen, keine Illustrationen. Der Besucher blättert
   selbst: ein Schritt zur Zeit, ein Gedanke zur Zeit.
   Plus Jakarta Sans (UI) · Lora (Zitate) · IBM Plex Mono (Tags)
   · Amiri (Arabisch)
   ============================================================ */

:root {
  --pill: 999px;
  --step-max: 33rem;
  --body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --serif: 'Lora', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --arabic: 'Amiri', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Fazat e dritës: der Bogen von Nacht zu Morgen,
   erzählt allein über Text und Hintergrund ---- */
body.theme-black, body.theme-dark, body.theme-dusk {
  --lift: rgba(244, 239, 230, .07);
  --sh-1: 0 4px 14px rgba(0, 0, 0, .45);
  --sh-2: 0 14px 38px rgba(0, 0, 0, .5), 0 0 40px rgba(244, 239, 230, .05);
  --sh-btn: 0 10px 26px rgba(0, 0, 0, .5), 0 0 34px rgba(244, 239, 230, .09);
  --sh-btn-down: 0 3px 10px rgba(0, 0, 0, .45);
}
body.theme-dawn, body.theme-light {
  --lift: rgba(255, 253, 247, .55);
  --sh-1: 0 4px 12px rgba(59, 45, 22, .14);
  --sh-2: 0 14px 34px rgba(59, 45, 22, .18);
  --sh-btn: 0 10px 24px rgba(59, 45, 22, .3);
  --sh-btn-down: 0 3px 8px rgba(59, 45, 22, .22);
}
body.theme-black { --bg: #000; --ink: #f6f2ea; --soft: rgba(246,242,234,.6); --hair: rgba(246,242,234,.16); }
body.theme-dark  { --bg: #060409; --ink: #f4efe6; --soft: rgba(244,239,230,.55); --hair: rgba(244,239,230,.14); }
body.theme-dusk  { --bg: #0e1626; --ink: #f4efe6; --soft: rgba(244,239,230,.6);  --hair: rgba(244,239,230,.16); }
body.theme-dawn  { --bg: #eaddc6; --ink: #26200f; --soft: rgba(38,32,15,.62); --hair: rgba(38,32,15,.16); }
body.theme-light { --bg: #faf6ec; --ink: #26200f; --soft: rgba(38,32,15,.6);  --hair: rgba(38,32,15,.13); }

::selection { background: rgba(244, 239, 230, .22); }

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---- Mono-Tag ---- */
.tag {
  font-family: var(--mono);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--soft);
}

/* ---- Lese-Faden ---- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--ink); }

/* ---- Wizard-Chrom ---- */
.wiz-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(1rem + env(safe-area-inset-top)) 1.1rem 1rem;
}
.leave {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--soft); border: 1px solid var(--hair);
  text-decoration: none;
  background: var(--lift); box-shadow: var(--sh-1);
}
.leave:active { box-shadow: none; translate: 0 1px; }
.leave:hover { color: var(--ink); border-color: var(--soft); }
.leave svg { width: 1.05rem; height: 1.05rem; }
.counter { font-variant-numeric: tabular-nums; }

.wfoot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 3.2rem 1fr 3.2rem;
  align-items: center; justify-items: center; gap: .8rem;
  max-width: 26rem; margin: 0 auto;
  padding: 1.1rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom));
}
.wfoot .wiz-next { grid-column: 2; }
.wfoot.off { visibility: hidden; }

.wiz-back {
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair); color: var(--soft);
  background: var(--lift); box-shadow: var(--sh-1);
}
.wiz-back:active { box-shadow: none; translate: 0 1px; }
.wiz-back:hover { color: var(--ink); border-color: var(--soft); }
.wiz-back svg { width: 1.1rem; height: 1.1rem; }
.wiz-back.off { visibility: hidden; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  border-radius: var(--pill);
  padding: 1rem 1.9rem;
  font-size: .96rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: box-shadow .12s ease, translate .12s ease;
}
.btn svg { width: 1.05rem; height: 1.05rem; }
.btn-solid { background: var(--ink); color: var(--bg); box-shadow: var(--sh-btn); }
.btn-solid:hover { opacity: .92; }
.btn-solid:active { box-shadow: var(--sh-btn-down); translate: 0 2px; }
.btn-ghost { border-color: var(--hair); color: var(--soft); }
.btn-ghost:hover { color: var(--ink); border-color: var(--soft); }

/* ---- Schritte ---- */
main { position: relative; z-index: 1; }

.chapter {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 5.5rem 1.5rem 8.5rem;
}
.js .chapter { display: none; }
.js .chapter.active { display: flex; }

.chapter-inner {
  max-width: var(--step-max); width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 1.5rem;
}

/* ---- Textstufen ---- */
.kicker, .ref { font-family: var(--mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kicker { color: var(--soft); }
.ref { color: var(--soft); }

.title {
  font-size: clamp(2.1rem, 6.5vw, 3.2rem);
  font-weight: 300; line-height: 1.16; letter-spacing: -.015em;
}
.sub {
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  color: var(--soft); font-weight: 300; line-height: 1.65;
  max-width: 27rem;
}

.chapter--tekst p, .chapter--drite p {
  font-size: clamp(1.12rem, 2.5vw, 1.38rem);
  line-height: 1.75; font-weight: 300;
}
.chapter--tekst p strong, .chapter--drite p strong { font-weight: 600; }

/* ---- Ajete & Hadithe ---- */
.chapter--ajet .chapter-inner::before,
.chapter--hadith .chapter-inner::before {
  content: ''; display: block; width: 2.6rem; height: 1px;
  background: var(--ink); opacity: .55;
}
.arabic {
  font-family: var(--arabic);
  font-size: clamp(1.65rem, 4.6vw, 2.35rem);
  line-height: 2; color: var(--ink);
}
.ajet-sq {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  line-height: 1.7; font-weight: 400;
  border: 0;
}

/* ---- Reflektim & Fryme ---- */
.reflect {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 3.1vw, 1.65rem);
  line-height: 1.65; font-weight: 400;
}
.breath-text { color: var(--soft); font-size: clamp(1.05rem, 2.4vw, 1.25rem); font-weight: 300; line-height: 1.7; }

/* ---- Libra ---- */
.books { display: flex; flex-direction: column; gap: .8rem; width: 100%; margin-top: .3rem; }
.book {
  display: flex; align-items: center; gap: 1rem; text-align: left;
  padding: 1.05rem 1.2rem; border: 1px solid var(--hair); border-radius: 14px;
  text-decoration: none; color: var(--ink);
  background: var(--lift); box-shadow: var(--sh-2);
  transition: box-shadow .12s ease, translate .12s ease;
}
.book:hover { border-color: var(--soft); }
.book:active { box-shadow: var(--sh-1); translate: 0 2px; }
.book-icon svg { width: 1.35rem; height: 1.35rem; color: var(--soft); }
.book-meta { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.book-meta strong { font-size: 1rem; font-weight: 600; }
.book-meta em { font-size: .85rem; color: var(--soft); font-style: normal; }
.book-note { font-size: .85rem; color: var(--soft); font-weight: 300; margin-top: .15rem; }
.book-arrow svg { width: 1rem; height: 1rem; color: var(--soft); }

/* ---- Rrugët e tjera: der Besucher wählt selbst weiter ---- */
.choose { width: 100%; margin-top: 1.6rem; display: flex; flex-direction: column; }
.choose-label { margin-bottom: .4rem; text-align: left; }
.choice {
  display: flex; align-items: center; gap: .9rem; text-align: left;
  padding: .95rem .35rem;
  border-top: 1px solid var(--hair);
  text-decoration: none; color: var(--ink);
  font-weight: 300; font-size: 1.02rem;
}
.choice:last-child { border-bottom: 1px solid var(--hair); }
.choice:hover { opacity: .75; }
.choice span { flex: 1; }
.choice svg { width: 1rem; height: 1rem; color: var(--soft); flex-shrink: 0; }

/* ---- Dua ---- */
.dua {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.9rem 1.5rem; border: 1px solid var(--hair); border-radius: 18px; width: 100%;
  background: var(--lift); box-shadow: var(--sh-2);
}
.dua-ar { font-size: clamp(1.35rem, 3.8vw, 1.8rem); line-height: 2; }
.dua-sq { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.7; color: var(--soft); }

/* ---- Audio ---- */
.audio-toggle {
  margin-top: .3rem; width: 2.7rem; height: 2.7rem; border-radius: 50%;
  border: 1px solid var(--hair); color: var(--soft);
  display: flex; align-items: center; justify-content: center;
  background: var(--lift); box-shadow: var(--sh-1);
}
.audio-toggle:active { box-shadow: none; translate: 0 1px; }
.audio-toggle:hover, .audio-toggle.playing { color: var(--ink); border-color: var(--soft); }
.audio-toggle svg { width: 1.15rem; height: 1.15rem; }

/* ================= HUB ================= */

.hub-main {
  position: relative; z-index: 1;
  min-height: 100svh;
  max-width: 37rem; margin: 0 auto;
  padding: calc(1.6rem + env(safe-area-inset-top)) calc(1.5rem + env(safe-area-inset-right)) calc(1.8rem + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left));
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hub-center {
  flex: 1; width: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.wordmark { font-size: .92rem; font-weight: 700; letter-spacing: .01em; color: var(--ink); opacity: .85; }
.wordmark em { font-style: normal; font-weight: 300; color: var(--soft); }

.hub-kicker { margin-bottom: 1rem; }
.hub-title {
  font-size: clamp(2.15rem, 8.2vw, 3rem);
  font-weight: 300; line-height: 1.14; letter-spacing: -.015em;
  margin-bottom: 2rem;
}

/* Hintergrund-Verlauf als fixe Ebene (background-attachment: fixed
   bricht auf iOS) — viele Zwischenstufen, damit nichts kantet */
body.hub { background: #060409; }
body.hub::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    #0c0914 0%, #0a0712 18%, #080510 34%, #060409 52%,
    #04030a 72%, #030206 88%, #020104 100%);
}
.hub-main { position: relative; z-index: 1; }
.hub-center { position: relative; }
.hub-center::before {
  content: ''; position: absolute; inset: -18% -60%;
  background: radial-gradient(ellipse 85% 58% at 50% 58%,
    rgba(244, 239, 230, .042) 0%,
    rgba(244, 239, 230, .03) 30%,
    rgba(244, 239, 230, .016) 50%,
    rgba(244, 239, 230, .006) 66%,
    transparent 82%);
  pointer-events: none;
}

/* ---- Karten-Deck (Handy): wischen, Karte in der Mitte rastet ein.
   --f (0 = Fokus, 1 = weit weg) und --dir (-1/1) setzt hub.js,
   alles ist direkt an die Wischposition gekoppelt. ---- */
.deck {
  width: 100vw; margin-left: calc(50% - 50vw);
  display: flex; gap: .6rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  padding: 3rem 16vw 2.8rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  perspective: 1100px;
}
.deck::-webkit-scrollbar { display: none; }
.card {
  --f: 0; --dir: 0;
  position: relative;
  flex: 0 0 68vw; max-width: 20rem;
  min-height: min(50svh, 30rem);
  scroll-snap-align: center;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: box-shadow .15s ease, translate .12s ease;
  padding: 1.5rem 1.4rem; text-align: left;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(244, 239, 230, .11), rgba(244, 239, 230, .05));
  text-decoration: none; color: var(--ink);
  transform-origin: center;
  transform: rotateY(calc(var(--dir) * var(--f) * 9deg + var(--gy, 0deg)))
             rotateX(var(--gx, 0deg))
             scale(calc(1.05 - var(--f) * .13));
  opacity: calc(1 - var(--f) * .45);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, calc(.5 - var(--f) * .35)),
    0 0 64px rgba(244, 239, 230, calc(.11 - var(--f) * .11));
}
/* Lichtkante: fällt von oben auf die Fokus-Karte, verblasst zur Seite */
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 239, 230, .68), rgba(244, 239, 230, .08) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: calc(1 - var(--f) * .75);
}
.card:active {
  background: linear-gradient(180deg, rgba(244, 239, 230, .16), rgba(244, 239, 230, .09));
  translate: 0 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.card-top { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; min-height: 1.1em; }
.card-badge { color: var(--ink); }
.card-badge--soon { color: var(--soft); }
.card-title {
  flex: 1; display: flex; align-items: center;
  text-wrap: balance;
}
.card-go {
  border-top: 1px solid var(--hair); padding-top: 1.05rem; margin-top: 1.05rem;
  opacity: calc(.7 + (1 - var(--f)) * .3);
}
.card-go svg { transform: translateX(calc((1 - var(--f)) * 3px)); }

/* Entrance beim Laden: Karten treten kurz nacheinander an */
@keyframes card-in {
  from { opacity: 0; translate: 0 18px; }
  to   { translate: 0 0; }
}
.card:nth-child(1) { animation-delay: .05s; }
.card:nth-child(2) { animation-delay: .14s; }
.card:nth-child(3) { animation-delay: .23s; }
.card:nth-child(4) { animation-delay: .32s; }
.card:nth-child(5) { animation-delay: .41s; }
.card:nth-child(6) { animation-delay: .5s; }
.card:nth-child(7) { animation-delay: .59s; }
.card:nth-child(8) { animation-delay: .68s; }

.dots { display: flex; gap: .45rem; justify-content: center; margin-top: -1.9rem; position: relative; }
.dots span {
  width: 1.1rem; height: 2px; border-radius: 2px;
  background: var(--ink); opacity: .18;
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
  .dots span { transition: none; }
}
.card-title {
  font-size: clamp(1.7rem, 8vw, 2.2rem);
  font-weight: 300; line-height: 1.2; letter-spacing: -.01em;
}
.card-go { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.card-go svg { width: 1.15rem; height: 1.15rem; color: var(--soft); }

.hub-footer {
  margin-top: auto; padding-top: 3.5rem;
  display: flex; gap: .8rem; align-items: center;
}
.hub-footer, .hub-footer a { font-size: .85rem; color: var(--soft); text-decoration: none; }
.hub-footer a:hover { color: var(--ink); }


/* ================= EMPFANG & REVEAL ================= */

.welcome {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  background: linear-gradient(180deg, #0f0b18 0%, #090612 45%, #040309 100%);
  transition: opacity .9s ease;
}
.welcome-text {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  color: var(--ink); text-align: center; line-height: 1.4;
  animation: welcome-in 1.4s ease both;
  transition: opacity .7s ease, translate .7s ease;
}
body.revealed .welcome-text { opacity: 0; translate: 0 -30px; }
.welcome-hint {
  text-align: center; margin-top: 1.3rem;
  animation: welcome-in 1s ease 1.6s both;
  transition: opacity .4s ease;
}
body.revealed .welcome-hint { opacity: 0; }
@keyframes welcome-in {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
body.revealed .welcome { opacity: 0; pointer-events: none; }

/* Vor dem Empfang ist die Buehne leer, danach treten alle auf */
.js body:not(.revealed) .card,
.js body:not(.revealed) .reveal { opacity: 0 !important; }
body.revealed .card { animation: card-in .6s ease backwards; }
body.revealed .reveal { animation: card-in .7s ease backwards; animation-delay: .55s; }
body.revealed.no-intro .card,
body.revealed.no-intro .reveal { animation: none; }
html:not(.js) .welcome { display: none; }

/* ================= SOFORT-AJET ================= */

.ajeti-tani {
  margin-top: 1.6rem;
  font-size: .92rem; font-weight: 300; color: var(--soft);
  text-decoration: underline dotted; text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hair);
}
.ajeti-tani:active { color: var(--ink); }

.ajeti-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.6rem;
  background: rgba(5, 3, 8, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .35s ease;
}
.ajeti-overlay.open { opacity: 1; }
.ajeti-inner {
  max-width: 30rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.3rem;
  text-align: center;
}
.ajeti-inner .btn { margin-top: 1rem; }

/* ================= FOOTER ================= */

.hub-footer { flex-direction: column; gap: .6rem; padding-top: 2.6rem; }
.hub-privacy {
  font-size: .82rem; color: var(--soft); font-weight: 300;
}
.hub-call { font-size: .88rem; color: var(--soft); font-weight: 300; }
.hub-call a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hub-links { display: flex; gap: .8rem; align-items: center; justify-content: center; }

/* ================= BILD-KARTEN IM DECK =================
   Bild abgedunkelt + leicht unscharf, Scrim oben/unten für
   Lesbarkeit, feines Grain obendrauf. Text bleibt König. */
.card--img { overflow: hidden; }
.card--img::after {
  content: ''; position: absolute; inset: -12px; z-index: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.28'/></svg>"),
    radial-gradient(ellipse 130% 105% at 50% 45%,
      transparent 42%, rgba(5, 3, 8, .38) 72%, rgba(5, 3, 8, .8) 100%),
    linear-gradient(90deg,
      rgba(5, 3, 8, .65) 0%, rgba(5, 3, 8, .16) 20%,
      transparent 40%, transparent 60%,
      rgba(5, 3, 8, .16) 80%, rgba(5, 3, 8, .65) 100%),
    linear-gradient(180deg,
      rgba(5, 3, 8, .8) 0%, rgba(5, 3, 8, .34) 26%,
      rgba(5, 3, 8, .26) 52%, rgba(5, 3, 8, .84) 100%),
    var(--card-img);
  background-size: 140px 140px, cover, cover, cover, 190%;
  background-position: center, center, center, center, var(--card-pos, 50% 56%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  filter: blur(3px) saturate(.65) brightness(.62) contrast(1.08);
  opacity: calc(.24 - var(--f) * .1);
}
.card--img .card-top, .card--img .card-title, .card--img .card-go { position: relative; z-index: 2; }
/* Grain als scharfe Ebene UEBER dem geblurten Bild + Lichtkante oben */
.card--img::before {
  z-index: 1; padding: 0;
  -webkit-mask: none; mask: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 140px 140px;
  mix-blend-mode: overlay;
  opacity: calc(.45 - var(--f) * .2);
  border-top: 1px solid rgba(246, 242, 234, .35);
}
.card--img .card-title {
  text-shadow: 0 2px 22px rgba(0, 0, 0, .92), 0 1px 5px rgba(0, 0, 0, .65);
}
.card--img .card-badge,
.card--img .card-badge--soon,
.card--img .card-go .tag { text-shadow: 0 1px 12px rgba(0, 0, 0, .9), 0 1px 3px rgba(0, 0, 0, .6); }
.card--img .card-badge--soon, .card--img .card-go .tag, .card--img .card-go svg { color: rgba(246, 242, 234, .85); }
.card--img .card-go { border-top-color: rgba(246, 242, 234, .22); }

/* iOS-Einschalter für den Bewegungssensor */
.gyro-btn { margin-top: 1.4rem; display: block; }
.gyro-btn + .ajeti-tani { margin-top: .7rem; }

/* Licht-Reflex: wandert gegenläufig zur Neigung über die Karte,
   wie Licht auf einer glänzenden Karte. Liegt unter dem Text. */
.card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(
    220% 160% at calc(50% - var(--gyn, 0) * 7%) calc(20% - var(--gxn, 0) * 7%),
    rgba(246, 242, 234, .17) 0%,
    rgba(246, 242, 234, .13) 22%,
    rgba(246, 242, 234, .08) 42%,
    rgba(246, 242, 234, .035) 60%,
    transparent 82%);
  opacity: calc(1 - var(--f) * .75);
}

/* Der Screen atmet: der Lichtraum hinter dem Deck hebt und senkt sich ganz langsam */
.hub-center::before { animation: breathe-light 8s ease-in-out infinite alternate; }
@keyframes breathe-light {
  from { opacity: .7; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-center::before { animation: none; }
}

/* Gedrückt halten gehört uns (Teilen), nicht dem System-Menü */
.card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }


/* ================= FEINSCHLIFF-PAKET ================= */

/* das warme Wort im Titel */
.hub-title em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Wortmarken-Balance */
.wordmark em { color: rgba(244, 239, 230, .42); }

/* das Deck wippt einmal an: hier kann man wischen */
.deck.nudge { animation: deck-nudge .9s ease; }
@keyframes deck-nudge {
  0%, 100% { transform: none; }
  45% { transform: translateX(-26px); }
}

/* beim Druck flammt das Licht der Karte kurz auf */
.card:active::after { opacity: 1; }

/* nachts ist das Licht wärmer */
body.night .card::after {
  background: radial-gradient(
    220% 160% at calc(50% - var(--gyn, 0) * 7%) calc(20% - var(--gxn, 0) * 7%),
    rgba(248, 236, 210, .18) 0%,
    rgba(248, 236, 210, .13) 22%,
    rgba(248, 236, 210, .08) 42%,
    rgba(248, 236, 210, .035) 60%,
    transparent 82%);
}

/* Dots sind tappbar, mit unsichtbar größerer Trefferfläche */
.dots span { position: relative; cursor: pointer; }
.dots span::after { content: ''; position: absolute; inset: -12px -4px; }

/* Overlay tritt mit feinem Scale auf */
.ajeti-inner { transform: scale(.97); transition: transform .35s ease; }
.ajeti-overlay.open .ajeti-inner { transform: none; }

/* Aktionen im Ajet-Overlay */
.ajeti-actions { display: flex; gap: .7rem; margin-top: .6rem; }
.ajeti-actions .btn, .ajeti-close { padding: .75rem 1.5rem; font-size: .88rem; }
.ajeti-close { margin-top: .2rem; }
.ajeti-tomorrow { margin-top: .9rem; opacity: .7; }

/* Fokus-Ringe für Tastatur, unsichtbar bei Touch */
.card:focus-visible, .btn:focus-visible, .ajeti-tani:focus-visible, .leave:focus-visible {
  outline: 2px solid var(--soft); outline-offset: 3px;
}

/* der Së-shpejti-Screen grüßt mit */
.soon-greet {
  font-family: var(--serif); font-style: italic;
  font-size: .95rem; color: var(--soft); opacity: .85;
  margin-top: .2rem;
}

/* Querformat bleibt benutzbar */
@media (orientation: landscape) and (max-height: 520px) {
  .hub-header { margin-bottom: 1rem; }
  .hub-kicker { margin-bottom: .5rem; }
  .hub-title { font-size: 1.5rem; margin-bottom: .9rem; }
  .card { flex: 0 0 44vw; min-height: 62svh; }
  .deck { padding: 2.2rem 28vw 2.2rem; }
}

/* reduzierte Bewegung = wirklich ruhig */
@media (prefers-reduced-motion: reduce) {
  .welcome-text, .welcome-hint, .deck.nudge,
  body.revealed .card, body.revealed .reveal { animation: none; }
  .welcome-text { transition: opacity .3s ease; }
  .card-go svg, .ajeti-inner { transition: none; }
}

/* ================= PAUSE-KARTE (/sonte): Flip + Player ================= */
.card--flip { padding: 0; cursor: pointer; perspective: 900px; }
.flip-inner {
  position: relative; z-index: 2; flex: 1;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, .7, .3, 1);
}
.card--flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 1.5rem 1.4rem;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.flip-front { justify-content: space-between; }
.flip-back {
  transform: rotateY(180deg);
  align-items: center; justify-content: center; gap: 1.3rem;
  text-align: center;
}

.pause-play {
  width: 4.6rem; height: 4.6rem; border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-btn);
  transition: box-shadow .12s ease, translate .12s ease;
}
.pause-play:active { box-shadow: var(--sh-btn-down); translate: 0 2px; }
.pause-play svg { width: 1.5rem; height: 1.5rem; }
.pause-play .ic-play { margin-left: 3px; }
.card--flip .ic-pause { display: none; }
.card--flip.playing .ic-pause { display: block; }
.card--flip.playing .ic-play { display: none; }

/* Wellen: ruhen flach, atmen beim Abspielen */
.waves { display: flex; gap: 5px; align-items: center; height: 1.6rem; }
.waves span {
  width: 3px; height: 100%; border-radius: 2px;
  background: var(--ink); opacity: .75;
  transform: scaleY(.3); transform-origin: center;
}
.card--flip.playing .waves span { animation: wave 1.1s ease-in-out infinite; }
.card--flip.playing .waves span:nth-child(1) { animation-delay: 0s; }
.card--flip.playing .waves span:nth-child(2) { animation-delay: .18s; }
.card--flip.playing .waves span:nth-child(3) { animation-delay: .36s; }
.card--flip.playing .waves span:nth-child(4) { animation-delay: .54s; }
.card--flip.playing .waves span:nth-child(5) { animation-delay: .72s; }
@keyframes wave {
  0%, 100% { transform: scaleY(.3); }
  50% { transform: scaleY(1); }
}

.pause-count { font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.pause-hint { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .card--flip.playing .waves span { animation: none; transform: scaleY(.8); }
}

/* Text-Rückseiten der Flip-Karten */
.flip-back--text { gap: .95rem; padding: 1.6rem 1.5rem; }
.back-line {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.98rem, 4vw, 1.08rem);
  line-height: 1.6; color: var(--ink);
}
.back-ar { font-size: clamp(1.25rem, 5vw, 1.55rem); line-height: 1.9; }
.flip-back--text .ref { margin-top: .2rem; }

/* ================= GANZE KARTE DREHT SICH =================
   Die Hülle wird unsichtbar; Fläche, Verlauf und Lichtkante
   sitzen auf Vorder- und Rückseite und rotieren mit. */
.card--flip { background: none; }
.card--flip:active { background: none; translate: none; }
.card--flip::before { content: none; }
.flip-front, .flip-back {
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(244, 239, 230, .11), rgba(244, 239, 230, .05));
  overflow: hidden;
}
.flip-front::before, .flip-back::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 239, 230, .68), rgba(244, 239, 230, .08) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: calc(1 - var(--f) * .75);
}
.card--flip:active .flip-front,
.card--flip:active .flip-back {
  background: linear-gradient(180deg, rgba(244, 239, 230, .16), rgba(244, 239, 230, .09));
}

/* Auch Schatten und Licht-Reflex drehen mit — hinter der Karte bleibt nichts */
.card--flip { box-shadow: none; }
.card--flip::after { content: none; }
.flip-front, .flip-back {
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .5),
    0 0 64px rgba(244, 239, 230, .11);
}
.flip-front::after, .flip-back::after {
  content: ''; position: absolute; z-index: 1;
  inset: -85% -55% -35% -55%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(246, 242, 234, .17) 0%,
    rgba(246, 242, 234, .13) 22%,
    rgba(246, 242, 234, .08) 42%,
    rgba(246, 242, 234, .035) 60%,
    transparent 82%);
  transform: translate(calc(var(--gyn, 0) * -.4%), calc(var(--gxn, 0) * -.4%));
  will-change: transform;
  opacity: calc(1 - var(--f) * .75);
}
body.night .flip-front::after, body.night .flip-back::after {
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(248, 236, 210, .18) 0%,
    rgba(248, 236, 210, .13) 22%,
    rgba(248, 236, 210, .08) 42%,
    rgba(248, 236, 210, .035) 60%,
    transparent 82%);
}

/* Die Hauptseite ist eine feste Bühne: vertikal kann nichts rutschen,
   auch nicht durch Fokus-Scroll beim Antippen einer Karte */
body.hub { height: 100dvh; overflow: hidden; }
body.hub .hub-main { min-height: 100%; height: 100%; }

/* GPU-Hinweise für die Dreh- und Fokus-Ebenen */
.flip-inner { will-change: transform; }


/* Sanfter Auftritt der ganzen Bühne */
.hub-center { animation: stage-in .5s ease both; }
@keyframes stage-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-center { animation: none; }
}

/* Das Motto: der Vers spricht zuerst */
.moto {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.98rem, 4.2vw, 1.12rem);
  color: var(--soft); line-height: 1.55;
  max-width: 30rem; margin-bottom: .5rem;
}
.moto-ref { font-size: .6rem; opacity: .75; margin-bottom: 1.5rem; }

/* Motto unten statt Ajet-Link */
.moto-bottom { margin: 1.4rem auto 0; text-align: center; }
.moto-ref-bottom { margin: .3rem 0 0; }