/* Senses 21, Landingpage auf senses21.visenza.co (13.10.2026). Look wie visenza.co/senses21 (tokens.css, styles.css,
   dark.css sind Kopien von dort, bei Aenderungen neu kopieren). Hier nur, was die Verkaufsseite zusaetzlich braucht:
   Kaufschalter, Kaufblock mit Einwilligung, Leiste am Handy. Werte nur aus tokens.css. */

/* Kaufschalter: der Worker setzt data-kauf="offen" oder "zu" am <html> (KAUF_OFFEN in wrangler.jsonc).
   Ohne Worker (Vorschau, lokale Datei) gilt "zu", mit ?kauf=1 in der Adresse zeigt die Seite den Kaufstand. */
html[data-kauf="zu"] .nur-kauf{display:none!important}
html[data-kauf="offen"] .nur-vormerken{display:none!important}

.kopf-haut{font-size:clamp(2.4rem,4.4vw,4.2rem);margin:0 0 1.6rem}
.copy .lead+p{margin-top:0}
.nav .nav-still{opacity:.78}
/* Block A (14.10.2026): Titel in Kalk, Frage im echten Kursivschnitt der Cormorant (Jost hat keinen). */
.abende strong{color:var(--text)}
.abende p em{font-family:var(--serif);font-style:italic;font-size:1.18em;line-height:1.3;color:var(--text)}
.abende .kicker.wert{margin-top:2.6rem}

/* Kaufblock */
.kauf{max-width:720px;margin-inline:auto}
.kauf .preis{font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,7vw,6.2rem);line-height:1;margin:.4rem 0 1.4rem;color:var(--text)}
.kauf .preis small{display:block;font-family:var(--sans);font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:var(--erde);margin-top:1rem}
.kauf .fact-row{justify-content:center;margin:1.6rem 0 2.2rem}
.einwilligung{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;text-align:left;max-width:560px;margin:0 auto 1.6rem;padding:1.3rem 1.4rem;border:1px solid var(--rand);border-radius:var(--radius-karte);background:var(--tiefe-flaeche)}
.einwilligung input{width:22px;height:22px;margin:.15rem 0 0;accent-color:var(--gold-tief);flex:none}
.einwilligung label{font-size:.92rem;line-height:1.6;color:var(--text-ruhig)}
.einwilligung a{color:var(--lehm);border-bottom:1px solid var(--rand-stark)}
.kauf-knopf{min-width:260px;cursor:pointer}
.kauf-knopf[disabled]{opacity:.55;cursor:default}
.kauf-hinweis{min-height:1.4rem;margin:.9rem auto 0;font-size:.95rem;color:var(--text)}
.kauf-hinweis.fehler{color:var(--lehm)}
.abbruch{display:none;margin:0 auto 2rem;padding:1rem 1.3rem;border:1px solid var(--rand);border-radius:var(--radius-karte);max-width:560px;font-size:.95rem;color:var(--text-ruhig)}
.abbruch.zeigen{display:block}

/* Was drin ist: ruhige Zeilen, kein Listenpunkt */
.drin{margin:2rem auto 0;border-top:1px solid var(--line);max-width:620px;text-align:left}
.drin p{margin:0;padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.02rem;line-height:1.55;color:var(--text-ruhig)}
.drin p span{display:block;font-family:var(--serif);font-size:1.35rem;line-height:1.25;color:var(--text);margin-bottom:.15rem}

/* Leiste am Handy: ein Schritt, immer erreichbar, erst wenn das Titelbild aus dem Blick ist */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem max(16px,4vw) calc(.8rem + env(safe-area-inset-bottom,0px));background:rgb(var(--scrim) / 92%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--rand);transform:translateY(110%);transition:transform .4s}
.leiste.sichtbar{transform:none}
.leiste .leiste-text{margin:0;font-size:.78rem;letter-spacing:.06em;line-height:1.4;color:var(--text-leise)}
.leiste .leiste-text b{display:block;font-weight:400;color:var(--text);font-size:.9rem;letter-spacing:.02em}
.leiste .button{min-height:44px;padding:.6rem 1.3rem;font-size:.78rem;white-space:nowrap}
@media(max-width:920px){.leiste{display:flex}body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.leiste{transition:none}}

/* Stimme von Christina im Kaufblock */
.wer{display:grid;grid-template-columns:120px 1fr;gap:1.6rem;align-items:center;max-width:620px;margin:3rem auto 0;text-align:left}
.wer img{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:center 30%;filter:saturate(.8) brightness(.9)}
.wer p{margin:0;color:var(--text-ruhig)}
.wer p strong{display:block;font-weight:400;color:var(--text);font-family:var(--serif);font-size:1.4rem;margin-bottom:.3rem}
@media(max-width:600px){.wer{grid-template-columns:1fr;text-align:center;justify-items:center}.kauf .fact-row{justify-content:center}}

/* Schritte mit Bild wie auf visenza.co */
.step:has(.step-bild){grid-template-columns:60px 1fr minmax(0,38%);align-items:start}
.step-bild{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-karte);filter:saturate(.75) brightness(.82)}
@media(max-width:920px){.step:has(.step-bild){grid-template-columns:60px 1fr}.step-bild{grid-column:2;margin-top:1.2rem}}
@media(max-width:600px){.step:has(.step-bild){grid-template-columns:44px 1fr}}

/* Rechtsseiten dieser Adresse */
.legal-page h1{overflow-wrap:anywhere;hyphens:auto}
.legal-page h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:1.8rem 0 .5rem;color:var(--text)}
.legal-page .hinweis{padding:1rem 1.2rem;border:1px solid var(--rand);border-radius:var(--radius-karte);font-size:.95rem;color:var(--text-ruhig)}