/* Liakim Live · Kabbalah-Webinar (kabbalah.syncretism.live), Fassung 2 seit 24.10.2026
   Eine Seite zum Durchscrollen im klassischen Funnel-Aufbau. Alles Bewegte hängt am Scrollen (mit Trägheit)
   oder atmet ruhig vor sich hin; Liakim begleitet als Dschinn und dockt an der Kaufleiste an.
   Bewusst eine Nachtwelt, darum nur ein Farbschema. Schriften liegen im Projekt, nichts kommt von fremden Servern. */

@font-face { font-family: "Google Sans Flex"; src: url("../fonts/google-sans-flex-latin.woff2") format("woff2"); font-weight: 1 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans Flex"; src: url("../fonts/google-sans-flex-latin-ext.woff2") format("woff2"); font-weight: 1 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Frank Ruhl Libre (OFL), nur die 13 Buchstaben, die die Seite zeigt (Google-Fonts-Ausschnitt, 2 KB) */
@font-face { font-family: "Frank Ruhl Libre"; src: url("../fonts/frank-ruhl-libre-500-hebr-subset.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+5D0, U+5D4-5D9, U+5DC, U+5E0-5E2, U+5E6-5E7; }
:root {
  --nacht: #100D24; --nacht-2: #17132F; --karte: #1C1840; --stich: #2B2453;
  --creme: #F7F3EA; --creme-2: rgba(247,243,234,.78); --creme-3: rgba(247,243,234,.56);
  --am: #B3A1FF; --am-tief: #5A45D4; --cy: #4CC9DD; --linie: rgba(247,243,234,.14);
  --tinte: #211B43;
  --schrift: "Google Sans Flex", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hebr: "Frank Ruhl Libre", "Times New Roman", serif;
  --spalte: 620px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { margin: 0; }
body { background: var(--nacht); color: var(--creme); font-family: var(--schrift); font-size: 17px; line-height: 1.55; font-weight: 420; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--am); outline-offset: 3px; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--creme); color: var(--tinte); padding: 10px 16px; text-decoration: none; font-weight: 600; }
.sprung:focus { top: 12px; }
.weit { font-stretch: 151%; font-weight: 280; letter-spacing: -.01em; }
.am { color: var(--am); }

/* Himmel und Rauch liegen fest hinter allem */
#himmel { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, footer, .hinter { position: relative; z-index: 2; }

.rahmen { width: 100%; max-width: calc(var(--spalte) + 32px); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.abschnitt { padding-block: 72px; }
.augenbraue { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--am); }
h2 { font-size: clamp(32px, 7.4vw, 50px); line-height: 1.02; font-weight: 660; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.text { color: var(--creme-2); text-wrap: pretty; }
.text strong { color: var(--creme); font-weight: 600; }
.stapel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* Sternbilder zwischen den Abschnitten (seit 24.10.2026 statt des Fadens): echte Sternbilder aus den Daten
   der Startseite, in der Reihenfolge des Tierkreises; nach der Zeichenwahl begleitet das eigene Sternbild. */
.sternbild { display: grid; justify-items: center; gap: 6px; padding-top: 4px; view-timeline-name: --sternbild; }
.sternbild svg { width: 176px; height: auto; overflow: visible; }
.sternbild line { stroke: rgba(179,161,255,.6); stroke-width: 1.3; stroke-linecap: round; }
.sternbild circle { fill: var(--creme); }
.sternbild circle.hell { filter: drop-shadow(0 0 5px rgba(179,161,255,.95)); }
.sternbild small { font-size: 11px; font-weight: 560; letter-spacing: .16em; text-transform: uppercase; color: var(--creme-3); }
.sternbild small b { color: var(--am); font-weight: 600; }

/* Hero */
.hero { min-height: min(100svh, 920px); display: grid; align-content: end; padding-block: 64px 40px; position: relative; }
.hero__oben { position: absolute; top: max(18px, env(safe-area-inset-top, 0px)); left: 0; right: 0; }
.hero__oben .rahmen { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--creme-3); }
.marke { display: inline-flex; align-items: center; gap: 8px; color: var(--creme); text-decoration: none; font-weight: 640; font-size: 16px; letter-spacing: -.02em; }
.marke .weit { font-weight: 300; }
.marke svg { width: 26px; height: 26px; }
.erscheinung { height: clamp(270px, 42svh, 470px); position: relative; display: grid; place-items: end center; margin-bottom: 8px; }
#geist-anker { position: absolute; left: 50%; bottom: 17%; width: min(62vw, 290px, 34svh); aspect-ratio: 1; transform: translateX(-50%); }
#leiste-start { position: absolute; left: 0; top: 38%; width: 1px; height: 1px; pointer-events: none; }
/* Weiches Leuchten, aus dem der Dschinn aufsteigt (der Schirm ist seit 24.10.2026 aus dem Einstieg raus) */
.glut { width: 220px; height: 64px; border-radius: 50%; background: radial-gradient(closest-side, rgba(179,161,255,.42), rgba(90,69,212,.16) 60%, transparent); margin-bottom: 4px; }
.am-stueck { white-space: nowrap; } /* „Neuzeit-Sklaven“ nicht am Bindestrich trennen */
.hero h1 { font-size: clamp(38px, 9.6vw, 60px); line-height: 1; font-weight: 660; letter-spacing: -.04em; text-wrap: balance; }
.hero .stapel { gap: 16px; }
.fakten { display: flex; flex-wrap: wrap; gap: 8px; }
.fakten span { font-size: 13.5px; padding: 6px 11px; background: rgba(247,243,234,.06); box-shadow: inset 0 0 0 1px var(--linie); }
.fakten b { color: var(--am); font-weight: 650; }
.knopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 6px 6px 6px 22px; border: 0; background: var(--creme); color: var(--tinte); font-size: 16.5px; font-weight: 620; cursor: pointer; text-decoration: none; transition: background-color .3s, transform .3s cubic-bezier(.22,.9,.3,1); }
.knopf > span:last-child { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(33,27,67,.08); transition: background-color .3s, color .3s; }
@media (hover: hover) { .knopf:hover { background: #fff; } .knopf:hover > span:last-child { background: var(--am-tief); color: var(--creme); } }
.knopf:active { transform: scale(.99); }
.kasse-hinweis { font-size: 13.5px; color: var(--am); min-height: 1.4em; }
.klein { font-size: 13px; color: var(--creme-3); }

/* Problem */
.schmerz { display: grid; gap: 12px; margin-top: 8px; }
.schmerz li { padding: 16px 18px; background: rgba(28,24,64,.72); box-shadow: inset 0 0 0 1px var(--linie); color: var(--creme-2); }
.schmerz b { display: block; color: var(--creme); font-weight: 620; margin-bottom: 2px; }

/* Inhalte: der Baum zeichnet sich beim Scrollen */
.strecke { height: 300svh; position: relative; }
.strecke__haft { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr; align-content: start; padding-top: max(56px, 9svh); }
.strecke__kopf { text-align: center; display: grid; gap: 10px; justify-items: center; }
.strecke__buehne { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; position: relative; min-height: 0; }
.lernbaum { height: min(48svh, 440px); width: auto; overflow: visible; }
.lernbaum .p { stroke: rgba(247,243,234,.16); stroke-width: 1.3; }
.lernbaum .blitz { fill: none; stroke: var(--am); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(179,161,255,.7)); }
.lernbaum circle { fill: var(--nacht); stroke: rgba(247,243,234,.45); stroke-width: 1.5; transition: fill .6s, stroke .6s; }
.lernbaum circle.an { fill: var(--am); stroke: var(--am); }
.lernbaum use { color: rgba(247,243,234,.75); transition: color .6s; }
.lernbaum use.an { color: var(--nacht); }
.lernpunkte { position: absolute; left: 0; right: 0; bottom: max(22px, 4svh); display: grid; }
.lernpunkt { grid-area: 1 / 1; text-align: center; display: grid; gap: 6px; justify-items: center; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .8s cubic-bezier(.22,.9,.3,1); padding-inline: 8px; }
.lernpunkt.an { opacity: 1; transform: none; }
.lernpunkt small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--am); }
.lernpunkt b { font-size: 21px; font-weight: 640; letter-spacing: -.02em; }
.lernpunkt span { color: var(--creme-2); font-size: 15.5px; max-width: 34ch; }
html:not(.js-bewegt) .strecke { height: auto; }
html:not(.js-bewegt) .strecke__haft { position: static; height: auto; padding-block: 72px; }
html:not(.js-bewegt) .lernpunkte { position: static; gap: 18px; margin-top: 24px; }
html:not(.js-bewegt) .lernpunkt { grid-area: auto; opacity: 1; transform: none; }

/* Dein Pfad */
.zeichen { display: flex; flex-wrap: wrap; gap: 8px; }
.zeichen button { border: 0; padding: 9px 13px; background: rgba(28,24,64,.8); box-shadow: inset 0 0 0 1px var(--linie); color: var(--creme-2); font-size: 14.5px; cursor: pointer; transition: background-color .3s, color .3s; }
.zeichen button[aria-pressed="true"] { background: var(--am); color: var(--tinte); }
.pfad-ergebnis { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; background: rgba(28,24,64,.72); box-shadow: inset 0 0 0 1px var(--linie); }
.pfad-ergebnis svg { width: 100%; height: auto; overflow: visible; }
.pfad-ergebnis .p { stroke: rgba(247,243,234,.16); stroke-width: 1.6; }
.pfad-ergebnis .p.dein { stroke: var(--am); stroke-width: 6; stroke-linecap: round; }
.pfad-ergebnis circle { fill: var(--nacht); stroke: rgba(247,243,234,.5); stroke-width: 2; }
.pfad-ergebnis circle.an { fill: var(--am); stroke: var(--am); }
.pfad-text { display: grid; gap: 4px; }
.pfad-text .buchst { font-family: var(--hebr); font-size: 56px; line-height: .9; color: var(--am); text-shadow: 0 0 22px rgba(179,161,255,.45); min-height: 50px; }
.pfad-text b { font-size: 18px; font-weight: 640; }
.pfad-text span { font-size: 14.5px; color: var(--creme-2); }

/* Liakim */
.person { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; }
.person img { width: 132px; height: 176px; object-fit: cover; filter: grayscale(.15) contrast(1.04); box-shadow: 0 0 0 1px var(--linie); }

/* Stimmen */
.stimmen { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 420px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
.stimmen::-webkit-scrollbar { display: none; }
.stimmen blockquote { scroll-snap-align: start; padding: 20px; background: rgba(28,24,64,.82); box-shadow: inset 0 0 0 1px var(--linie); display: grid; gap: 14px; align-content: space-between; }
.stimmen p { font-size: 16px; color: var(--creme); line-height: 1.5; }
.stimmen cite { font-style: normal; font-size: 13.5px; color: var(--creme-3); }

/* Angebot */
.angebot { padding: 24px 22px 22px; background: linear-gradient(160deg, rgba(90,69,212,.28), rgba(28,24,64,.9) 55%); box-shadow: inset 0 0 0 1px rgba(179,161,255,.35); display: grid; gap: 18px; }
.angebot h3 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.angebot ul { display: grid; gap: 10px; }
.angebot li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--creme-2); }
.angebot li::before { content: ""; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--am); box-shadow: 0 0 10px rgba(179,161,255,.7); }
.preis { display: flex; align-items: baseline; gap: 10px; }
.preis b { font-size: 46px; font-weight: 660; letter-spacing: -.04em; line-height: 1; }
.preis span { color: var(--creme-3); font-size: 14px; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: rgba(28,24,64,.72); box-shadow: inset 0 0 0 1px var(--linie); }
.faq summary { list-style: none; cursor: pointer; padding: 17px 18px; font-weight: 580; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--am); font-size: 20px; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 18px 18px; color: var(--creme-2); font-size: 15.5px; }

footer { padding-block: 40px 140px; font-size: 13px; color: var(--creme-3); }
footer .rahmen { display: grid; gap: 14px; }
footer b { color: var(--creme-2); font-weight: 600; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss-links a { color: var(--creme-2); text-decoration: none; }
.fuss-links a:hover { color: var(--am); }
[hidden] { display: none !important; }

/* Cookie-Banner aus js/funnel.js, in der Nachtwelt */
.consent-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; width: min(calc(100% - 24px), 620px); display: flex; align-items: center; gap: 14px 20px; padding: 16px 18px; background: var(--karte); box-shadow: inset 0 0 0 1px rgba(179,161,255,.3), 0 24px 50px -20px rgba(0,0,0,.6); }
.consent-banner__text { flex: 1; font-size: 14px; color: var(--creme-2); line-height: 1.45; margin: 0; }
.consent-banner__text a { color: var(--am); }
.consent-banner__actions { display: flex; gap: 8px; flex: none; }
.consent-banner .button { font: inherit; font-size: 14.5px; font-weight: 560; padding: 10px 18px; cursor: pointer; border: 0; }
.consent-banner .button-secondary { background: rgba(247,243,234,.08); color: var(--creme); box-shadow: inset 0 0 0 1px var(--linie); }
.consent-banner .button-primary { background: var(--creme); color: var(--tinte); }
@media (max-width: 560px) { .consent-banner { flex-direction: column; align-items: stretch; bottom: 10px; } .consent-banner__actions .button { flex: 1; } }

/* Kaufleiste mit Platz für den Dschinn */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: linear-gradient(transparent, rgba(16,13,36,.92) 30%); transform: translateY(110%); transition: transform .7s cubic-bezier(.22,.9,.3,1); pointer-events: none; }
.leiste.da { transform: none; }
.leiste__innen { max-width: calc(var(--spalte) + 8px); margin-inline: auto; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 8px 8px 8px; background: rgba(28,24,64,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(179,161,255,.3), 0 18px 40px -16px rgba(0,0,0,.6); pointer-events: auto; }
#leiste-platz { width: 64px; height: 52px; }
.leiste__text { display: grid; line-height: 1.25; min-width: 0; container-type: inline-size; }
@container (max-width: 107px) { .leiste__zusatz { display: none; } } /* „8 € · Qabbalah“ braucht 106 px, sonst nur „8 €“ statt „8 € · Qabba…“ */
.leiste__text b { font-size: 15px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leiste__text > span { font-size: 12.5px; color: var(--creme-3); }
.leiste .knopf { width: auto; min-height: 46px; font-size: 15px; padding-left: 16px; gap: 10px; }
.leiste .knopf > span:last-child { width: 36px; height: 36px; }

/* Der Dschinn: liegt fest über der Seite, die Position rechnet das Skript */
#geist { position: fixed; left: 0; top: 0; width: 330px; z-index: 25; pointer-events: none; will-change: transform; transform-origin: 50% 50%; }
#geist .lage { position: relative; width: 100%; aspect-ratio: 560 / 563; }
#geist img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: linear-gradient(#000 58%, transparent 96%); mask-image: linear-gradient(#000 58%, transparent 96%); filter: drop-shadow(0 0 18px rgba(179,161,255,.28)); }
html:not(.js-bewegt) #geist { position: absolute; left: 50%; top: 90px; transform: translateX(-50%); width: min(74vw, 330px); }

/* Sanftes Auftauchen beim Scrollen, nur wo der Browser es nativ kann; der Ruhezustand bleibt sichtbar */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .auftauchen { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes auftauchen { from { opacity: .2; transform: translateY(22px); } to { opacity: 1; transform: none; } }
    /* Linien ziehen sich beim Scrollen von Stern zu Stern, die Sterne gehen vorher auf */
    .sternbild line { stroke-dasharray: 1; animation: sternlinie linear both; animation-timeline: --sternbild; }
    @keyframes sternlinie { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    .sternbild circle { animation: sternauf linear both; animation-timeline: --sternbild; animation-range: entry 0% entry 80%; }
    @keyframes sternauf { from { opacity: 0; } to { opacity: 1; } }
  }
}

/* Niedrige Handy-Bildschirme: Knopf 1 muss ohne Scrollen sichtbar bleiben */
@media (max-height: 740px) and (max-width: 1099px) {
  .hero { padding-block: 52px 18px; }
  .erscheinung { height: 30svh; min-height: 196px; }
  #geist-anker { width: min(60vw, 26svh); bottom: 14%; }
  .hero .stapel { gap: 11px; }
  .hero h1 { font-size: clamp(31px, 8.4vw, 40px); }
}
@media (max-height: 600px) and (max-width: 1099px) {
  .erscheinung { height: 26svh; min-height: 140px; }
  #geist-anker { width: min(60vw, 23svh); }
  .hero h1 { font-size: 28px; }
  .hero .text { font-size: 15px; }
}
@media (max-width: 360px) {
  h2 { font-size: 28px; }
  .ab-361 { display: none; }
  .fakten { gap: 6px; }
  .fakten span { font-size: 12.5px; padding: 5px 9px; }
}
@media (min-width: 1100px) {
  .abschnitt { padding-block: 96px; }
  .hero { grid-template-columns: 1fr minmax(0, 620px) minmax(0, 440px) 1fr; align-content: center; align-items: center; column-gap: 24px; padding-top: 88px; }
  .hero > .rahmen.stapel { grid-column: 2; grid-row: 1; padding: 0; max-width: none; }
  .hero > .erscheinung { grid-column: 3; grid-row: 1; height: min(560px, 66svh); margin: 0; }
  .hero #geist-anker { width: min(400px, 46svh); bottom: 20%; }
  .hero h1 { font-size: clamp(44px, 4.8vw, 66px); }
  #leiste-platz { display: none; }
  .leiste__innen { grid-template-columns: minmax(0, 1fr) auto; padding-left: 20px; }
}

/* ── Der Dschinn spricht (24.10.2026): Sprechblase hängt an ihm, Text erscheint wie gesprochen,
   an den wichtigen Stellen mit eigenem Kaufknopf. Position rechnet js/kabbalah.js je Bild. ── */
#geist .lage { pointer-events: auto; cursor: pointer; }
.blase { position: fixed; left: 0; top: 0; z-index: 26; width: max-content; max-width: min(76vw, 300px); padding: 12px 15px 13px; background: var(--creme); color: var(--tinte);
  border-radius: 16px; box-shadow: 0 16px 36px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(179,161,255,.45); display: grid; gap: 10px; justify-items: start; will-change: transform; }
.blase::after { content: ""; position: absolute; left: var(--zx, 32px); width: 14px; height: 14px; background: var(--creme); border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.blase[data-seite="oben"]::after { bottom: -6px; }
.blase[data-seite="unten"]::after { top: -6px; }
.blase__text { font-size: 15.5px; line-height: 1.42; font-weight: 520; letter-spacing: -.005em; text-wrap: pretty; min-height: 1.42em; }
.blase__text b { color: #5A45D4; font-weight: 650; }
.blase__knopf { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; background: var(--tinte); color: var(--creme); text-decoration: none; font-size: 14.5px; font-weight: 620; }
.blase__knopf > span:last-child { width: 28px; height: 28px; display: grid; place-items: center; background: rgba(247,243,234,.12); }
@media (hover: hover) { .blase__knopf:hover > span:last-child { background: #5A45D4; } }
@media (min-width: 1100px) { .blase { max-width: 290px; } }

/* ── Kostprobe (Probe 25.10.2026): Aleph setzt sich beim Scrollen zusammen, Liakim fliegt und erklärt ── */
.aleph-strecke { height: 340svh; position: relative; overflow-x: clip; } /* 3D-Leinwand ist breiter als die Bühne; clip statt hidden, damit sticky bleibt */
.aleph-haft { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; padding-block: max(52px, 8svh) max(104px, 14svh); }
.aleph-kopf { display: grid; gap: 10px; justify-items: center; }
.aleph-titel { font-size: clamp(28px, 4.2vw, 44px); }
.aleph-buehne { width: 100%; min-height: 0; display: grid; place-items: end center; }
#aleph-cv { width: min(76vw, 46svh, 470px); height: auto; aspect-ratio: 1; display: block; }
.aleph-merke { font-size: 15px; color: var(--creme-2); max-width: 36ch; margin-top: 10px; text-wrap: pretty; }
.aleph-merke .hebr { font-family: var(--hebr); font-size: 1.3em; color: var(--am); }
html.js-bewegt .aleph-merke { opacity: 0; transform: translateY(8px); transition: opacity .8s, transform .9s cubic-bezier(.22,.9,.3,1); }
html.js-bewegt .aleph-merke.da { opacity: 1; transform: none; }
html:not(.js-bewegt) .aleph-strecke { height: auto; }
html:not(.js-bewegt) .aleph-haft { position: static; height: auto; padding-block: 72px; }
/* Am Handy fliegt Liakim über dem Buchstaben, darum dort nur die Augenbraue */
@media (max-width: 760px) { .aleph-titel { display: none; } }
/* Sprechblase seitlich am Dschinn (beim Fliegen in der Kostprobe) */
.blase[data-seite="links"]::after { left: -6px; top: 22px; transform: rotate(45deg); }
.blase[data-seite="rechts"]::after { left: auto; right: -6px; top: 22px; transform: rotate(45deg); }
/* 3D-Fassung (js/kabbalah-aleph.js): eigene Leinwand über der flachen, etwas größer, damit fliegende Module nicht abgeschnitten werden */
.aleph-buehne { position: relative; }
.aleph-drei { position: absolute; pointer-events: none; }
.aleph-buehne.drei-an #aleph-cv { visibility: hidden; }
.aleph-wert { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; pointer-events: none; white-space: nowrap; font-size: 15px; font-weight: 620; color: var(--creme); letter-spacing: .01em; text-shadow: 0 0 12px rgba(16,13,36,.9); }
.aleph-wert b { font-family: var(--hebr); font-weight: 500; font-size: 1.45em; color: var(--am); margin-right: 2px; }
/* Sehr niedrige Handys (iPhone SE): kleinerer Buchstabe, damit Liakims Blase darüber Platz hat */
@media (max-height: 620px) and (max-width: 760px) {
  #aleph-cv { width: min(62vw, 36svh); }
  .aleph-merke { font-size: 13.5px; }
  .aleph-haft { padding-bottom: 96px; }
}