/* Masterclass Blut – Landingpage für Meta Ads.
   Tokens: Design System „Dr. Spitzbart“, Theme „masterclass“ (tokens.json).
   Komponenten-Klassen (.sb-*) stehen in components.css. */

@font-face { font-family: "Cormorant"; src: url("../fonts/Cormorant.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hind"; src: url("../fonts/Hind.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --color-back: #041922;
  --color-front: #ffffff;
  --color-ci: #041922;
  --color-switch: hsl(198, 57%, 14%);
  --switch-masterclass: hsl(198, 57%, 14%);
  --front-high: rgba(255, 255, 255, 0.71);
  --front-middle: rgba(255, 255, 255, 0.51);
  --back-light: rgba(255, 255, 255, 0.07);
  --back-deep: rgba(4, 25, 34, 0.49);
  --input-back: rgba(255, 255, 255, 0.06);
  --input-hover: rgba(255, 255, 255, 0.10);
  --checkbox-hover: rgba(255, 255, 255, 0.14);
  --table-rule: rgba(255, 255, 255, 0.5);
  --text-shadow: -0.1px -0.1px 2px rgba(4,25,34,0.4), 0.1px -0.1px 2px rgba(4,25,34,0.4), 0.1px 0.1px 2px rgba(4,25,34,0.4), 0.1px 0.1px 2px rgba(4,25,34,0.4);

  --font-display: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-text: "Hind", "Helvetica Neue", Arial, sans-serif;

  --opacity-high: 0.71;
  --opacity-middle: 0.51;
  --opacity-label: 0.21;
  --opacity-hover: 0.29;
  --opacity-button-fill: 0.11;
  --opacity-sheen: 0.17;

  --padding-link: 4px;
  --padding-horizontal: 2%;
  --radius-none: 0;
  --radius-round: 50%;
  --backdrop-blur: blur(7px);
  --sheen-angle: -22.5deg;

  --duration-link: 0.27s;
  --duration-hover: 0.57s;
  --duration-button: 0.71s;
  --duration-transform: 0.97s;
  --duration-fadein-fast: 870ms;
  --duration-fadein-slow: 1710ms;
  --duration-color: 1.27s;

  /* Seitlicher Rand: 2 % wie im Original, auf dem Handy mindestens 18px. */
  --gutter: max(18px, 3vw);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--color-back); transition: background-color var(--duration-color) ease-in-out; overflow-x: hidden; }
body.is-switch { background: var(--color-switch); }

/* Papiertextur über dem ganzen Grund (Textur-Hell.webp, Kachel 93×70px, .91 Masterclass) */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("../img/textur-hell.webp") repeat; background-size: 93px 70px; opacity: .91; }
.page { position: relative; z-index: 1; }
.sb-root { --sb-space-high: calc(10 * var(--sb-pv)); }
@media (max-width: 1039px) { .sb-root { --sb-space-high: calc(6 * var(--sb-pv)); } }

img, video { max-width: 100%; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--sb-space-high); }
.section:first-of-type { padding-top: calc(2 * var(--sb-pv)); }
.space-mini { height: calc(var(--sb-pv) / 3); }
.space-flat { height: var(--sb-pv); }
.space-default { height: calc(3 * var(--sb-pv)); }
.stack-flat > * + * { margin-top: var(--sb-pv); }
.stack-mini > * + * { margin-top: calc(var(--sb-pv) / 3); }
.measure { max-width: 34em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Raster im Goldenen Schnitt */
.grid { display: grid; gap: calc(2 * var(--sb-pv)) calc(3 * var(--sb-pv)); align-items: start; }
@media (min-width: 1040px) {
  .grid-618 { grid-template-columns: 61.8fr 38.2fr; }
  .grid-382 { grid-template-columns: 38.2fr 61.8fr; }
  .grid-5545 { grid-template-columns: 55.55fr 44.44fr; }
  .grid-center { align-items: center; }
  .order-desktop-2 { order: 2; }
}

/* Bilder sinken diagonal in den Grund ein (Maske im sheen-angle) */
.media { position: relative; overflow: hidden; background: var(--color-back); }
.media img, .media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media .is-dim { opacity: var(--opacity-high); }
.mask-diag { -webkit-mask-image: linear-gradient(var(--sheen-angle), rgba(0,0,0,0) 0%, #000 29%, #000 71%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(var(--sheen-angle), rgba(0,0,0,0) 0%, #000 29%, #000 71%, rgba(0,0,0,0) 100%); }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-2-3 { aspect-ratio: 2 / 3; }
.portrait-top img { object-position: center 20%; }

/* ---------- Kopfzeile: nur das Logo ---------- */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: calc(var(--sb-pv) / 1.5); padding-bottom: calc(var(--sb-pv) / 1.5); }
.top .logo { display: block; width: calc(120px + 6vw); max-width: 48%; }
.top .logo img { display: block; width: 100%; height: auto; }

/* ---------- Hero ---------- */
.hero-label { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--sb-pv) / 2); }
.hero-grid { margin-top: calc(2 * var(--sb-pv)); }
.trust { display: flex; flex-wrap: wrap; gap: 0 calc(2 * var(--padding-link)); color: var(--front-high); }
.trust span + span::before { content: "·"; margin-right: calc(2 * var(--padding-link)); }

/* Video-Kachel mit „Video mit Ton öffnen“ */
.video { position: relative; overflow: hidden; background: var(--color-back); }
.video > img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: var(--opacity-high); transition: transform var(--duration-transform) ease-in-out, opacity var(--duration-hover) ease-in-out; }
.video:hover > img { transform: scale(1.07); }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--sb-pv) / 3); width: 100%; border: 0; padding: 0; background: none; color: var(--color-front); cursor: pointer; font: inherit; }
.video-play .ring { display: flex; align-items: center; justify-content: center; width: calc(3 * var(--sb-pv)); height: calc(3 * var(--sb-pv)); border-radius: var(--radius-round); background: rgba(255,255,255,var(--opacity-button-fill)); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); transition: transform var(--duration-hover) ease-in-out; }
.video-play .ring img { width: 56%; height: auto; }
.video-play:hover .ring { transform: scale(1.07); }
.video-play .sb-linktext { text-shadow: var(--text-shadow); text-align: left; }
.video.is-playing .video-play, .video.is-playing > img { display: none; }
.video-play.is-small { padding: calc(var(--sb-pv) / 2); }
.video-play.is-small .ring { width: calc(2.2 * var(--sb-pv)); height: calc(2.2 * var(--sb-pv)); }

/* ---------- Normbereich-Grafik ---------- */
.norm { display: flex; flex-direction: column; gap: calc(1.5 * var(--sb-pv)); }
.norm-row { display: grid; gap: calc(var(--sb-pv) / 2); }
.norm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--sb-pv); }
.norm-bar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: calc(1.6 * var(--sb-pv)); background: var(--back-light); }
.norm-zone { background: rgba(255,255,255,var(--opacity-button-fill)); }
.norm-zone.is-target { background: var(--color-front); opacity: .87; }
.norm-zone + .norm-zone { box-shadow: inset 1px 0 0 rgba(4,25,34,.6); }
.norm-scale { display: flex; justify-content: space-between; color: var(--front-high); }
.norm-marker { position: absolute; top: calc(-0.5 * var(--sb-pv)); bottom: calc(-0.5 * var(--sb-pv)); width: 2px; background: var(--color-front); }
.norm-marker span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; padding-bottom: 2px; }
.norm-values { color: var(--front-high); }

/* ---------- Themen ---------- */
.topics { display: flex; flex-wrap: wrap; gap: calc(var(--sb-pv) / 3); margin: 0; padding: 0; list-style: none; }
.topics li { padding: calc(var(--sb-pv) / 4) calc(var(--sb-pv) / 2); background: var(--back-light); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); }

/* ---------- Steps (Markup wie Spitzbart.Steps) ---------- */
.sb-step { display: grid; grid-template-columns: calc(1.7 * var(--sb-pv)) 1fr; gap: calc(0.5 * var(--sb-pv)); align-items: start; }
.sb-step > div { display: flex; flex-direction: column; gap: calc(var(--sb-pv) / 4); }

/* ---------- Stimmen ---------- */
.voices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(68%, 1fr); gap: calc(var(--sb-pv) / 1.5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) calc(var(--sb-pv) / 2); list-style: none; }
.voices::-webkit-scrollbar { display: none; }
.voices > li { scroll-snap-align: start; display: flex; flex-direction: column; gap: calc(var(--sb-pv) / 2); }
@media (min-width: 700px) { .voices { grid-auto-columns: minmax(40%, 1fr); } }
@media (min-width: 1040px) { .voices { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; } }
.voice-quote { font-family: var(--font-display); font-weight: 500; }
.voice-meta { color: var(--front-high); }
.swipe-hint { color: var(--front-high); }
@media (min-width: 1040px) { .swipe-hint { display: none; } }

/* ---------- Dr. Spitzbart ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--sb-pv)) calc(2 * var(--sb-pv)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1040px) { .stats { grid-template-columns: repeat(4, auto); justify-content: start; } }
.stats .sb-stat { align-items: flex-start; text-align: left; }
.stats .sb-small { color: var(--front-high); }
.quote-line { display: grid; grid-template-columns: calc(1.7 * var(--sb-pv)) 1fr; gap: calc(var(--sb-pv) / 2); align-items: start; }

/* ---------- Große Aussage über Foto ---------- */
.statement { position: relative; }
.statement .media { aspect-ratio: 3 / 2; }
@media (max-width: 1039px) { .statement .media { aspect-ratio: 4 / 5; } }
.statement .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--back-deep) 0%, rgba(4,25,34,.35) 40%, transparent 65%); pointer-events: none; }
.statement h2 { text-shadow: var(--text-shadow);  position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(1.5 * var(--sb-pv)); max-width: 12ch; }

/* ---------- Angebot ---------- */
.offer-list { margin: 0; padding: 0; list-style: none; }
.offer-list li { display: grid; gap: calc(var(--sb-pv) / 4); padding: calc(var(--sb-pv) / 1.5) 0; box-shadow: inset 0 1.5px 0 var(--table-rule); }
@media (min-width: 700px) { .offer-list li { grid-template-columns: 1fr 1fr; gap: var(--sb-pv); align-items: baseline; } }
.offer-list .sb-p { color: var(--front-high); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(var(--sb-pv) / 2); }
.price .sb-h2 { line-height: 1; }
.note { color: var(--front-high); }
.offer .sb-payment span { color: var(--front-high); }

/* ---------- FAQ ---------- */
.sb-acc-q .sb-p { font-weight: 500; }
.sb-acc-a .sb-p { color: var(--front-high); }

/* ---------- Footer ---------- */
.footer { padding-top: var(--sb-space-high); padding-bottom: calc(6 * var(--sb-pv)); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 calc(2 * var(--padding-link)); margin: 0; padding: 0; list-style: none; }
.footer-links button { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.footer .disclaimer { color: var(--front-middle); max-width: 60em; }

/* ---------- Fester Kauf-Button unten (nur Handy) ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--sb-pv); padding: calc(var(--sb-pv) / 2) var(--gutter) calc(var(--sb-pv) / 2 + env(safe-area-inset-bottom)); background: rgba(4,25,34,.82); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); transform: translateY(110%); transition: transform var(--duration-hover) ease-in-out; }
.sticky-cta.is-visible { transform: none; }
.sticky-cta .sb-btn { padding: calc(var(--sb-pb) * 1.1) var(--sb-pb); }
@media (min-width: 1040px) { .sticky-cta { display: none; } }

/* ---------- Cookie-Hinweis ---------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: var(--sb-pv) var(--gutter) calc(var(--sb-pv) + env(safe-area-inset-bottom)); background: rgba(4,25,34,.94); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); box-shadow: inset 0 1.5px 0 var(--back-light); }
.consent[hidden] { display: none; }
.consent-inner { display: grid; gap: var(--sb-pv); max-width: 1100px; }
@media (min-width: 1040px) { .consent-inner { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.consent .sb-small { color: var(--front-high); }
.consent-actions { display: flex; flex-wrap: wrap; gap: calc(var(--sb-pv) / 2); }
.consent-actions .sb-btn { flex: 1 1 160px; justify-content: center; }
.consent-options { display: grid; gap: calc(var(--sb-pv) / 2); margin: 0; padding: 0; border: 0; }
.consent-options[hidden] { display: none; }
.consent-options .sb-optin { color: var(--color-front); }

/* ---------- Scroll-Einblendung (27px diagonal / 29px vertikal) ---------- */
.js .fade { opacity: 0; transform: translateY(29px); transition: opacity var(--duration-fadein-fast) ease-in-out 87ms, transform var(--duration-fadein-fast) ease-in-out 87ms; }
.js .fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .js .fade { opacity: 1; transform: none; transition: none; }
}
body.has-consent .sticky-cta { display: none; }

/* hidden muss gegen display-Regeln der Komponenten gewinnen */
[hidden] { display: none !important; }
/* TextLink als <button> (Cookie-Einstellungen) */
button.sb-link { border: 0; background: none; font: inherit; color: var(--color-front); }