/* ==========================================================================
   Sami Rekibi – AI Skills
   Design system: hell, präzise, ruhig. Eine Akzentfarbe, ein Radius-System,
   Bewegung nur dort, wo sie Aufmerksamkeit lenkt.
   ========================================================================== */

@font-face { font-family: 'Jakarta'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-e2e017e1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Jakarta'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext-3c951162.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/inter-latin-bec94a4d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-367ba69a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }

:root {
  /* Farbe */
  --paper: #ffffff;
  --mist: #f4f5f6;
  --mist-2: #e9ebee;
  --ink: #16181c;
  --graphite: #5b616a;
  --rule: #e2e5e9;
  --accent: #2c4bd6;
  --accent-ink: #2039b4;
  --accent-tint: #eef1fd;
  --band: #101215;
  --band-2: #1a1d22;
  --band-text: #f1f2f4;
  --band-muted: #a0a6ae;
  --band-rule: #2a2e34;
  --danger: #b3261e;

  /* Typo */
  --f-display: 'Jakarta', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-lead: clamp(1.125rem, 0.45vw + 1.02rem, 1.375rem);
  --t-h3: clamp(1.3125rem, 0.6vw + 1.15rem, 1.625rem);
  --t-h2: clamp(2rem, 2.8vw + 1.1rem, 3.5rem);
  --t-display: clamp(2.6rem, 5.6vw + 0.9rem, 5.5rem);

  /* Raum, Radius, Tiefe */
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --s-section: clamp(88px, 11vw, 160px);
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --shadow-sm: 0 1px 2px rgba(16, 18, 21, .06), 0 2px 8px -2px rgba(16, 18, 21, .08);
  --shadow-md: 0 2px 4px rgba(16, 18, 21, .04), 0 14px 32px -10px rgba(16, 18, 21, .18);
  --shadow-lg: 0 2px 6px rgba(16, 18, 21, .05), 0 24px 60px -18px rgba(16, 18, 21, .28);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 64px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-base)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video, iframe { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); color: inherit; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
[hidden] { display: none !important; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; color: #fff; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typo-Rollen ---------- */
.display { font-size: var(--t-display); font-weight: 760; line-height: 1; letter-spacing: -0.045em; }
.display > span { display: block; }
.display--md { font-size: clamp(2.4rem, 4.4vw + 0.8rem, 4.5rem); }
.h2 { font-size: var(--t-h2); font-weight: 720; line-height: 1.06; letter-spacing: -0.035em; }
.h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--graphite); }
.muted { color: var(--graphite); }
.center-head { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.center-head .h2 { margin-bottom: 20px; }
.center-head .lead { margin: 0 auto; max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 999px; font: 600 1rem/1 var(--f-body); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: .9375rem; }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(32, 57, 180, .3), 0 6px 18px -6px rgba(44, 75, 214, .55); }
.btn--primary:hover { background: var(--accent-ink); color: #fff; box-shadow: 0 2px 4px rgba(32, 57, 180, .3), 0 12px 28px -8px rgba(44, 75, 214, .6); }
.btn--ghost { background: rgba(255,255,255,.7); color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: #c5cad1; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--light { background: #fff; color: var(--ink); box-shadow: 0 8px 30px -10px rgba(0,0,0,.5); }
.btn--light:hover { background: #fff; color: var(--accent-ink); box-shadow: 0 14px 40px -12px rgba(0,0,0,.6); }
.btn__arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
/* Ladezustand während der Checkout geöffnet wird */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__arrow { opacity: 0; }
.btn.is-loading::after { content: ''; position: absolute; right: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Einmaliger Lichtschimmer, wenn der Angebots-Button sichtbar wird */
.btn--attention::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); }
.btn--attention.is-shining::before { animation: sheen 1.4s var(--ease) .4s 1 both; }
@keyframes sheen { to { transform: translateX(120%); } }
.linklike { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.linklike:hover { color: var(--accent); }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.78); backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.is-scrolled { border-bottom-color: rgba(16,18,21,.08); }
.nav__inner { display: flex; align-items: center; gap: 32px; height: var(--nav-h); }
.wordmark { font: 800 .9375rem/1 var(--f-display); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; margin: 0; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { font-size: .9375rem; color: var(--graphite); text-decoration: none; }
.nav__links a:hover { color: var(--ink); }

/* ---------- Sektionen ---------- */
.section { padding: var(--s-section) 0; }
.section--mist { background: var(--mist); }
.section--ink { background: var(--band); color: var(--band-text); }
.section--ink .lead { color: var(--band-muted); }

/* ---------- 1 Hero ---------- */
.hero { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 120px); overflow: hidden; }
.hero__intro { text-align: center; max-width: 920px; }
.hero__product { display: inline-block; font-weight: 600; font-size: .9375rem; color: var(--accent); margin-bottom: 22px; }
.hero .display { margin: 0 auto 26px; }
.hero__lead { font-size: var(--t-lead); line-height: 1.55; color: var(--graphite); max-width: 700px; margin: 0 auto 32px; }
.hero__buy { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 24px; }
.assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: var(--t-sm); color: var(--graphite); }
.assurances li { position: relative; padding-left: 22px; }
.assurances li::before { content: ''; position: absolute; left: 0; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-radius: 50%; background:
  var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6 9l4-4.2' fill='none' stroke='%232c4bd6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

.stage { position: relative; margin: clamp(40px, 4.5vw, 64px) 0 0; aspect-ratio: 16 / 8.2; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--mist) 55%, var(--mist-2) 100%); box-shadow: inset 0 0 0 1px rgba(16,18,21,.05); }
.stage__set { position: absolute; inset: 0; }
.stage .placeholder-note { position: absolute; left: 20px; bottom: 16px; margin: 0; z-index: 6; }

/* Produkt-Mockups (CSS – werden durch echte Renderings ersetzt) */
.m { position: absolute; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.m__head { font: 700 .8125rem/1.2 var(--f-display); letter-spacing: -0.01em; }
.m--guide { background: linear-gradient(160deg, #23262c 0%, var(--band) 60%); color: #fff; border-radius: 4px 10px 10px 4px; padding: 9% 8%;
  justify-content: space-between; aspect-ratio: 3 / 4.1; }
.m--guide::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6%; background: linear-gradient(90deg, rgba(255,255,255,.1), transparent); border-right: 1px solid rgba(255,255,255,.06); border-radius: 4px 0 0 4px; }
.m--guide::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.09) 0%, transparent 40%); pointer-events: none; }
.m-guide__brand { font: 800 .625rem/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--band-muted); }
.m-guide__title { font: 760 clamp(1.15rem, 2.2vw, 2rem)/1 var(--f-display); letter-spacing: -0.04em; margin-top: auto; }
.m-guide__sub { font-size: .6875rem; color: var(--band-muted); margin-top: 10px; }
.m-guide__sub::after { content: ''; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--accent); margin-top: 14px; }

.m--tablet { background: #1c1f24; border-radius: 22px; padding: 2.2%; aspect-ratio: 4 / 3; }
.tablet__screen { flex: 1; background: #fff; border-radius: 14px; padding: 7% 7% 0; display: flex; flex-direction: column; gap: 6%; overflow: hidden; }
.tablet__head { display: flex; justify-content: space-between; align-items: baseline; font: 700 clamp(.75rem, 1.1vw, 1rem)/1 var(--f-display); letter-spacing: -0.02em; }
.tablet__head b { font-weight: 760; font-size: 1.8em; color: var(--accent); letter-spacing: -0.05em; }
.tablet__cats { display: flex; flex-wrap: wrap; gap: 5px; }
.tablet__cats i, .chips i { font-style: normal; font-size: .625rem; padding: 4px 9px; border-radius: 999px; background: var(--mist); color: var(--graphite); }
.tablet__cats i:first-child { background: var(--accent-tint); color: var(--accent-ink); }
.tablet__rows { display: flex; flex-direction: column; gap: 10px; }
.tablet__rows i { display: block; height: 22px; border-radius: 8px; background: linear-gradient(90deg, var(--mist) 0 60%, transparent 60%), var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.tablet__rows i:nth-child(2n) { background: linear-gradient(90deg, var(--mist) 0 44%, transparent 44%), var(--paper); }

.m--workbook { background: #fdfdfc; border-radius: 6px; padding: 7%; aspect-ratio: 3 / 4; }
.m-lines { display: flex; flex-direction: column; gap: 16%; margin-top: 22%; flex: 1; }
.m-lines i { display: block; height: 1px; background: var(--rule); }
.m-lines i:nth-child(odd)::before { content: ''; display: block; width: 9px; height: 9px; border: 1px solid #b9bec4; border-radius: 3px; transform: translateY(-12px); }
.m--video { background: var(--band); border-radius: 14px; aspect-ratio: 16 / 9; justify-content: center; align-items: center; }
.m-video__play { width: 40px; height: 40px; border-radius: 50%; background: #fff; position: relative; }
.m-video__play::after { content: ''; position: absolute; left: 16px; top: 12px; border-left: 12px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.m-video__bar { position: absolute; left: 7%; right: 7%; bottom: 10%; height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; }
.m-video__bar i { display: block; width: 34%; height: 100%; background: var(--accent); border-radius: 2px; }

.stage .m--tablet   { left: 31%; top: 12%; width: 40%; z-index: 2; }
.stage .m--guide    { left: 13%; top: 20%; width: 22%; z-index: 3; rotate: -5deg; }
.stage .m--workbook { left: 68%; top: 24%; width: 17%; z-index: 1; rotate: 5deg; }
.stage .m--video    { left: 58%; top: 58%; width: 24%; z-index: 4; rotate: -1.5deg; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
  .js-motion .reveal.is-in { opacity: 1; transform: none; }

  /* sanftes Schweben der Mockups im Hero */
  .stage .m { animation: float 7s ease-in-out infinite alternate; }
  .stage .m--guide { animation-duration: 8s; animation-delay: -2s; }
  .stage .m--workbook { animation-duration: 9s; animation-delay: -4s; }
  .stage .m--video { animation-duration: 6.5s; animation-delay: -1s; }
  @keyframes float { from { translate: 0 0; } to { translate: 0 -10px; } }

  /* dezente Parallaxe beim Scrollen – rein per CSS, ohne JS-Schleife */
  @supports (animation-timeline: view()) {
    .stage__set { animation: parallax linear both; animation-timeline: view(); animation-range: cover 50% cover 100%; }
    @keyframes parallax { from { transform: translateY(0); } to { transform: translateY(-36px); } }
  }
}

/* ---------- Platzhalter ---------- */
[data-placeholder] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  font: 600 .8125rem/1.4 var(--f-body); color: var(--graphite); padding: 16px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(22,24,28,.025) 10px 20px), var(--mist); border: 1px dashed #bfc4cb; }
[data-placeholder] small { font-weight: 400; }
.placeholder-note { font-size: .75rem; color: var(--graphite); margin: 12px 0 0; }
.dev-ribbon { display: none; }
html[data-env="dev"] .dev-ribbon { display: block; position: fixed; bottom: 84px; right: 0; z-index: 90; padding: 4px 10px; font-size: 11px; background: #ffe58a; color: #3a2f00; border-radius: 6px 0 0 6px; pointer-events: none; }
html[data-env="dev"] [data-confirm] { outline: 2px dashed #e0a800; outline-offset: 4px; }
html:not([data-env="dev"]) .placeholder-note { display: none; }

/* ---------- 2 Problem ---------- */
.problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.problem__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.problem__intro { color: var(--band-muted); font-size: var(--t-lead); margin-top: 28px; max-width: 42ch; }
.problem__list li { padding: 26px 0; border-top: 1px solid var(--band-rule); color: var(--band-muted); font-size: 1.0625rem; }
.problem__list li:last-child { border-bottom: 1px solid var(--band-rule); }
.problem__list strong { display: block; font: 650 clamp(1.25rem, 1vw + 1rem, 1.625rem)/1.25 var(--f-display); letter-spacing: -0.02em; color: var(--band-text); margin-bottom: 6px; }

/* ---------- 3 Veränderung ---------- */
.demo { max-width: 860px; margin: 0 auto; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; }
.demo__tabs { display: flex; gap: 4px; padding: 8px; background: var(--mist); border-bottom: 1px solid var(--rule); }
.demo__tabs button, .viewer__tabs button { flex: 1 1 auto; background: transparent; border: 0; border-radius: 999px; padding: 12px 18px;
  font-weight: 600; font-size: .9375rem; color: var(--graphite); white-space: nowrap; transition: background-color .25s var(--ease), color .25s, box-shadow .25s; }
.demo__tabs button:hover, .viewer__tabs button:hover { color: var(--ink); }
.demo__tabs [aria-selected="true"], .viewer__tabs [aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.demo__panel { padding: clamp(28px, 4.5vw, 56px); }
.demo__panel:not([hidden]) { animation: fadeIn .45s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.demo__prompt { font: 500 clamp(1.25rem, 1.2vw + 1rem, 1.75rem)/1.45 var(--f-display); letter-spacing: -0.015em; margin-bottom: 20px; }
.demo__prompt b { font-weight: 700; color: var(--accent); }
.demo__note { color: var(--graphite); margin: 0; }
.demo__caption { margin: 0; padding: 12px clamp(28px, 4.5vw, 56px); border-top: 1px solid var(--rule); font-size: .75rem; color: var(--graphite); }

.shift { max-width: 860px; margin: clamp(48px, 6vw, 80px) auto 0; }
.shift li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid var(--rule); }
.shift li:last-child { border-bottom: 1px solid var(--rule); }
.shift li::after { content: ''; grid-column: 2; grid-row: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-tint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%232c4bd6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.shift__from { grid-column: 1; grid-row: 1; color: var(--graphite); }
.shift__to { grid-column: 3; grid-row: 1; font-weight: 600; }

/* ---------- 4 Produkt ---------- */
.parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.part { background: var(--paper); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(16,18,21,.05); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.part:hover { box-shadow: 0 0 0 1px rgba(16,18,21,.05), var(--shadow-md); transform: translateY(-2px); }
.part__visual { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(180deg, #fafafa, var(--mist)); overflow: hidden; }
.part__text { padding: clamp(24px, 3vw, 40px); }
.part__text .h3 { margin-bottom: 10px; }
.part__text p { color: var(--graphite); margin-bottom: 0; }
.part__text .placeholder-note { margin-top: 12px; }
.part__n { font-size: var(--t-sm); font-weight: 600; color: var(--accent); margin-bottom: 10px !important; }
.part--wide { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.part--wide .part__visual { flex: 1.1; aspect-ratio: auto; min-height: 380px; }
.part--wide .part__text { flex: 1; align-self: center; }
.part--wide .part__visual .placeholder-note { position: absolute; left: 16px; bottom: 12px; margin: 0; }
.m--lg { position: relative; width: 38%; rotate: -4deg; transition: rotate .6s var(--ease), translate .6s var(--ease); }
.part--wide:hover .m--lg { rotate: -2deg; translate: 0 -6px; }
.big-num { font: 780 clamp(4.5rem, 9vw, 7.5rem)/1 var(--f-display); letter-spacing: -0.06em; color: var(--accent); }
.part__visual--prompts { align-content: center; gap: 18px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 16px; }
.chips i { font-size: .8125rem; padding: 6px 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.sheet { width: 30%; aspect-ratio: 3 / 3.8; background: #fff; box-shadow: var(--shadow-md); border-radius: 6px; padding: 8%; display: flex; flex-direction: column; gap: 9px; rotate: 2deg; transition: rotate .5s var(--ease); }
.part:hover .sheet { rotate: 0deg; }
.sheet__title { font: 700 .8125rem/1 var(--f-display); color: var(--accent); }
.sheet__q { height: 7px; background: var(--mist-2); border-radius: 3px; }
.sheet__q--short { width: 62%; }
.sheet__box { flex: 1; border: 1px solid var(--rule); border-radius: 4px; margin-top: 4px; }
.sheet__check { display: flex; gap: 6px; }
.sheet__check i { width: 12px; height: 12px; border: 1px solid #b9bec4; border-radius: 3px; }
.reel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 84%; }
.reel i { aspect-ratio: 16 / 10; background: var(--band); border-radius: 10px; position: relative; box-shadow: var(--shadow-sm); }
.reel i::before { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(255,255,255,.92); }
.reel i::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -3px; border-left: 9px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.cards-fan { position: relative; width: 70%; aspect-ratio: 2.2 / 1; }
.cards-fan i { position: absolute; top: 8%; width: 48%; aspect-ratio: 3 / 2; background: #fff; box-shadow: var(--shadow-md); border-radius: 8px; transition: rotate .5s var(--ease), translate .5s var(--ease);
  background-image: linear-gradient(var(--ink) 0 0), linear-gradient(var(--mist-2) 0 0), linear-gradient(var(--mist-2) 0 0), linear-gradient(var(--mist-2) 0 0);
  background-size: 40% 6px, 80% 4px, 70% 4px, 76% 4px; background-position: 12% 22%, 12% 48%, 12% 64%, 12% 80%; background-repeat: no-repeat; }
.cards-fan i:nth-child(1) { left: 0; rotate: -7deg; }
.cards-fan i:nth-child(2) { left: 26%; rotate: 1deg; z-index: 1; }
.cards-fan i:nth-child(3) { left: 52%; rotate: 8deg; }
.part:hover .cards-fan i:nth-child(1) { translate: -6px 0; rotate: -10deg; }
.part:hover .cards-fan i:nth-child(3) { translate: 6px 0; rotate: 11deg; }

.inside { margin-top: clamp(72px, 9vw, 120px); }
.inside__title { text-align: center; margin-bottom: 24px; }
.viewer { background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(16,18,21,.05); overflow: hidden; }
.viewer__tabs { display: flex; gap: 4px; padding: 6px; margin: 20px auto 0; width: max-content; max-width: calc(100% - 32px); overflow-x: auto; scrollbar-width: none;
  background: var(--mist); border-radius: 999px; }
.viewer__tabs::-webkit-scrollbar { display: none; }
.viewer__stage { padding: clamp(24px, 5vw, 64px); }
.viewer__panel:not([hidden]) { animation: fadeIn .45s var(--ease); }
.spread { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 20px); max-width: 720px; margin: 0 auto; }
.spread--single { grid-template-columns: 1fr; max-width: 860px; }
.page { aspect-ratio: 1 / 1.3; background-color: #fff !important; box-shadow: var(--shadow-md); border-radius: var(--r-xs); }
.page--wide { aspect-ratio: 16 / 10; }
.page--video { aspect-ratio: 16 / 9; }

.inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; margin-top: clamp(48px, 6vw, 72px); text-align: center; }
.inline-cta p { margin: 0; font-size: 1.0625rem; color: var(--graphite); }
.inline-cta strong { color: var(--ink); }

/* ---------- 5 Lernen ---------- */
.learn__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: clamp(48px, 6vw, 72px); }
.learn__head .lead { margin: 0; }
.learn__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px); }
.learn__list li { position: relative; padding-top: 52px; }
.learn__list li::before { content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.3 5.8 9.5 10.5 4.6' fill='none' stroke='%232c4bd6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.learn__list h3 { font-size: 1.1875rem; letter-spacing: -0.015em; margin-bottom: 8px; }
.learn__list p { color: var(--graphite); margin: 0; }

/* ---------- 6 Für wen ---------- */
.audience { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.audience__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.audience__list li { font: 600 clamp(1rem, .5vw + .9rem, 1.25rem)/1 var(--f-display); letter-spacing: -0.015em; padding: 15px 22px; background: var(--paper); border-radius: 999px; box-shadow: 0 0 0 1px rgba(16,18,21,.06); }
.notfor { background: var(--paper); padding: clamp(28px, 3.4vw, 44px); border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(16,18,21,.05); }
.notfor h3 { font-size: 1.125rem; margin-bottom: 14px; }
.notfor li { position: relative; padding: 8px 0 8px 22px; color: var(--graphite); font-size: .9375rem; }
.notfor li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 10px; height: 2px; border-radius: 1px; background: #b9bec4; }

/* ---------- 7 Warum + Über ---------- */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.why li { border-top: 2px solid var(--ink); padding-top: 22px; }
.why h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.why p { color: var(--graphite); margin: 0; }
.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(88px, 11vw, 150px); }
.about__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background-color: var(--mist-2) !important; overflow: hidden; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__copy .h2 { margin-bottom: 22px; }
.about__copy .lead { color: var(--ink); }
.about__copy > p:not(.lead):not(.part__n):not(.placeholder-note) { color: var(--graphite); max-width: 56ch; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--band); border-radius: var(--r-md); overflow: hidden; margin-top: 32px; box-shadow: var(--shadow-md); }
.video__poster { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: var(--band); display: grid; place-items: center; }
.video__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__label { position: absolute; inset: 0; background: var(--band) !important; color: var(--band-muted) !important; border: 0 !important; justify-content: flex-end !important; padding-bottom: 7% !important; font-size: .75rem !important; }
.video__play { position: relative; z-index: 2; width: clamp(56px, 6vw, 76px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.95); transition: transform .35s var(--ease), box-shadow .35s; box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); }
.video__play::after { content: ''; position: absolute; left: 40%; top: 31%; border-left: 18px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video__poster:hover .video__play { transform: scale(1.07); }
.video video, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__fallback { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px 16px; background: rgba(0,0,0,.72); color: #fff; font-size: .875rem; }

/* ---------- 8 Angebot ---------- */
.section--offer { background: linear-gradient(var(--paper) 0 30%, var(--mist) 30% 100%); }
.offer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px rgba(16,18,21,.06), 0 40px 100px -40px rgba(16,18,21,.35); }
.offer__what { padding: clamp(32px, 5vw, 64px); }
.offer__what .h2 { font-size: clamp(1.875rem, 2vw + 1.1rem, 2.75rem); margin-bottom: 32px; }
.offer__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0 16px 34px; border-top: 1px solid var(--rule); font-weight: 600; position: relative; }
.offer__list li:last-child { border-bottom: 1px solid var(--rule); }
.offer__list li::before { content: ''; position: absolute; left: 0; top: 17px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-tint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.3 5.8 9.5 10.5 4.6' fill='none' stroke='%232c4bd6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.offer__list small { font-size: var(--t-sm); color: var(--graphite); font-weight: 400; text-align: right; }
.offer__buy { padding: clamp(32px, 5vw, 64px); background: radial-gradient(120% 80% at 100% 0%, #23272e 0%, var(--band) 60%); color: var(--band-text); display: flex; flex-direction: column; }
.price { font: 780 clamp(4rem, 6vw, 5.75rem)/1 var(--f-display); letter-spacing: -0.055em; margin: 0 0 14px; }
.price__sub { font-size: 1rem; color: var(--band-text); margin: 0 0 4px; }
.price__tax { font-size: .875rem; color: var(--band-muted); margin-bottom: 28px; }
.offer__facts { margin-top: 28px; }
.offer__facts li { font-size: .875rem; color: var(--band-muted); padding: 11px 0; border-top: 1px solid var(--band-rule); }
.offer__facts a { color: var(--band-text); }
.offer__facts a:hover { color: #fff; }
.trustline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 64px); }
.trustline li { font-size: .9375rem; color: var(--graphite); }
.trustline strong { display: block; color: var(--ink); font-family: var(--f-display); font-size: 1rem; margin-bottom: 4px; }

/* ---------- 9 FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-wrap .h2 { margin-bottom: 18px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font: 600 1.0625rem/1.35 var(--f-display); letter-spacing: -0.01em; border-radius: var(--r-xs); transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; background:
  linear-gradient(var(--ink) 0 0) center / 10px 1.8px no-repeat, linear-gradient(var(--ink) 0 0) center / 1.8px 10px no-repeat, var(--mist);
  transition: transform .35s var(--ease), background-color .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq details p { color: var(--graphite); padding: 0 4px 24px; margin: 0; max-width: 62ch; }
.faq details[open] p { animation: fadeIn .4s var(--ease); }

/* ---------- 10 Abschluss ---------- */
.final { padding: var(--s-section) 0; background: radial-gradient(80% 120% at 50% 0%, #20252e 0%, var(--band) 65%); color: var(--band-text); text-align: center; }
.final__inner { max-width: 820px; }
.final__lead { font-size: var(--t-lead); color: var(--band-muted); margin: 24px auto 40px; max-width: 46ch; }
.final__note { margin: 22px 0 0; font-size: var(--t-sm); color: var(--band-muted); }

/* ---------- Footer ---------- */
.footer { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); font-size: .875rem; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.footer .wordmark { font-size: .8125rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__links a, .footer__links button { color: var(--graphite); text-decoration: none; font-size: .875rem; }
.footer__links a:hover, .footer__links button:hover { color: var(--ink); text-decoration: underline; }
.footer__copy { margin: 0 0 0 auto; color: var(--graphite); }

/* ---------- Kaufleiste mobil, Toast, Consent ---------- */
.buybar { display: none; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 16px 16px 20px; background: var(--ink); color: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.toast p { margin: 0; font-size: .9375rem; flex: 1; }
.toast__close { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12) center / 12px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.consent { position: fixed; z-index: 60; left: 16px; bottom: 16px; max-width: 420px; padding: 20px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(16,18,21,.06), var(--shadow-lg); font-size: .875rem; }
.consent p { color: var(--graphite); }
.consent__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Unterseiten (Danke, Zugang, Rechtliches) ---------- */
.page-main { padding: clamp(48px, 8vw, 120px) 0; min-height: 70vh; }
.narrow { max-width: 760px; }
.status { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--mist); border-radius: var(--r-sm); margin: 28px 0; }
.status p { margin: 0; }
.status__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #b9bec4; margin-top: 7px; }
.status[data-state="paid"] .status__dot { background: #1f8a4c; }
.status[data-state="pending"] .status__dot { background: #d79b00; animation: pulse 1.2s infinite; }
.status[data-state="error"] .status__dot { background: var(--danger); }
@keyframes pulse { 50% { opacity: .35; } }
.next-steps { counter-reset: n; margin: 32px 0; }
.next-steps li { counter-increment: n; position: relative; padding: 16px 0 16px 46px; border-top: 1px solid var(--rule); }
.next-steps li::before { content: counter(n); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: .875rem; }
.files { margin: 28px 0; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; }
.files li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--rule); }
.files li:first-child { border-top: 0; }
.files li span small { display: block; color: var(--graphite); font-size: .8125rem; }
.legal h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); letter-spacing: -0.03em; margin-bottom: 12px; }
.legal h2 { font-size: 1.25rem; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--graphite); max-width: 70ch; }
.legal ul li { list-style: disc; margin-left: 1.2em; }
.legal .ph { background: #fff4c2; color: #4a3b00; padding: 0 4px; border-radius: 3px; }
.backlink { display: inline-block; margin-bottom: 32px; font-size: .9375rem; color: var(--graphite); }

/* Formulare */
.note { font-size: .9375rem; color: var(--graphite); background: var(--mist); padding: 14px 16px; border-radius: var(--r-sm); border-left: 3px solid #d79b00; }
.checkout__error { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r-sm); font-size: .9375rem; background: #fdecea; color: #7a1c16; }
.resend { margin-top: 32px; }
.resend label { display: block; font-weight: 600; margin-bottom: 8px; }
.resend__row { display: flex; gap: 8px; flex-wrap: wrap; }
.resend input { width: 100%; flex: 1 1 260px; min-height: 50px; padding: 0 16px; border: 1px solid #c5cad1; border-radius: var(--r-sm); font: inherit; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
.resend input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.resend input[aria-invalid="true"] { border-color: var(--danger); }
.resend .muted { font-size: .875rem; margin-top: 10px; }
.form-error { color: var(--danger); font-size: .9375rem; margin-top: 8px; }
.form-success { color: #1f6b3e; background: #e8f5ec; padding: 12px 14px; border-radius: var(--r-sm); margin-top: 12px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .learn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__inner .btn { margin-left: auto; }
  .problem, .audience, .faq-wrap, .about, .offer, .learn__head { grid-template-columns: minmax(0, 1fr); }
  .problem__head { position: static; }
  .stage { aspect-ratio: 4 / 3; }
  .stage .m--tablet   { left: 22%; top: 14%; width: 58%; }
  .stage .m--guide    { left: 6%; top: 26%; width: 30%; }
  .stage .m--workbook { left: 72%; top: 30%; width: 24%; }
  .stage .m--video    { left: 50%; top: 62%; width: 38%; }
  .parts { grid-template-columns: minmax(0, 1fr); }
  .part--wide { flex-direction: column; }
  .part--wide .part__visual { min-height: 0; aspect-ratio: 16 / 10; flex: none; }
  .why, .trustline { grid-template-columns: minmax(0, 1fr); }
  .about__photo { max-width: 460px; }
}

@media (max-width: 640px) {
  :root { --nav-h: 58px; --r-lg: 24px; }
  body { font-size: 1rem; }
  .hero { padding-top: 32px; }
  .hero__product { margin-bottom: 14px; font-size: .875rem; }
  .hero .display { margin-bottom: 18px; }
  .hero__lead { margin-bottom: 28px; }
  .hero__buy .btn { width: 100%; }
  .hero__buy .btn--ghost, .hero__buy .btn--quietlink { display: none; }
  .assurances { flex-direction: column; align-items: center; gap: 8px; }
  .stage { margin-top: 40px; aspect-ratio: 1 / 0.86; border-radius: var(--r-md); }
  .stage .m--tablet   { left: 16%; top: 10%; width: 70%; }
  .stage .m--guide    { left: 4%; top: 30%; width: 34%; }
  .stage .m--workbook { display: none; }
  .stage .m--video    { left: 48%; top: 60%; width: 46%; }
  .tablet__cats i:nth-child(n+3), .stage .m-guide__sub { display: none; }
  .shift li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .shift li::after { display: none; }
  .shift__from, .shift__to { grid-column: 1; grid-row: auto; }
  .shift__from { font-size: .9375rem; text-decoration: line-through; text-decoration-color: rgba(91,97,106,.5); }
  .demo__tabs button, .viewer__tabs button { padding: 10px 12px; font-size: .875rem; }
  .learn__list { grid-template-columns: minmax(0, 1fr); }
  .spread { grid-template-columns: 1fr; }
  .spread .page + .page { display: none; }
  .offer__list li { flex-wrap: wrap; }
  .offer__list small { text-align: left; }
  .inline-cta .btn { width: 100%; }
  .final .btn { width: 100%; }
  .footer__copy { margin-left: 0; }
  .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }

  /* Dezente Kaufleiste – nur zwischen Hero und Angebot sichtbar */
  .buybar { display: flex; position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 18px; background: rgba(255,255,255,.92); border-radius: 999px; box-shadow: 0 0 0 1px rgba(16,18,21,.06), var(--shadow-lg);
    backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); transform: translateY(140%); transition: transform .45s var(--ease); }
  .buybar.is-visible { transform: none; }
  .buybar__price { margin: 0; font-size: .75rem; color: var(--graphite); line-height: 1.25; }
  .buybar__price [data-price-short] { display: block; font: 760 1.125rem/1.1 var(--f-display); color: var(--ink); }
  body.has-buybar .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (hover: none) {
  .btn:hover, .part:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

.about__photo > span { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ==========================================================================
   Atmosphäre: KI-Visuals, Licht und Akzente
   Alles rein dekorativ (aria-hidden, pointer-events: none), hinter dem Inhalt,
   animiert nur über transform/opacity/stroke-dashoffset.
   ========================================================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero, .has-atmos, .has-grid, .has-lights { position: relative; isolation: isolate; }
.atmos { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* Hero: abstraktes KI-Orbit-Symbol hinter der Headline + weiches Licht */
.atmos--hero .orbit { position: absolute; left: 50%; top: -250px; width: min(1080px, 150vw); aspect-ratio: 1; margin-left: max(-540px, -75vw); opacity: .1;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.atmos__light { position: absolute; left: 50%; top: -18%; width: 1000px; height: 640px; margin-left: -500px;
  background: radial-gradient(closest-side, rgba(44, 75, 214, .11), rgba(109, 132, 239, .05) 55%, transparent 75%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(22, 24, 28, .09) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 50% 30%, #000, transparent 80%); mask-image: radial-gradient(ellipse 50% 40% at 50% 30%, #000, transparent 80%); }

/* Problem: neuronales Netz, sehr leise im Hintergrund */
.net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.3) 12%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.25) 86%, #000 100%); mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.3) 12%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.25) 86%, #000 100%); }
.net__lines line { stroke: rgba(150, 168, 255, .14); stroke-width: 1; }
.net__lines .flow { stroke: rgba(130, 152, 255, .55); stroke-dasharray: 4 18; }
.net__nodes circle { fill: rgba(150, 168, 255, .34); }

/* Veränderung: feines technisches Raster */
.has-grid::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(22, 24, 28, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 24, 28, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 38%, #000, transparent 78%); mask-image: radial-gradient(ellipse 55% 45% at 50% 38%, #000, transparent 78%); }

/* Produkt: zwei weiche Lichtflächen */
.has-lights::before, .has-lights::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.has-lights::before { width: 720px; height: 720px; left: -220px; top: 8%; background: radial-gradient(closest-side, rgba(44, 75, 214, .08), transparent); }
.has-lights::after { width: 640px; height: 640px; right: -200px; top: 46%; background: radial-gradient(closest-side, rgba(140, 120, 240, .07), transparent); }

/* Abschluss: Orbit-Symbol auf dunklem Grund */
.final { overflow: hidden; }
.atmos--final .orbit { position: absolute; left: 50%; top: 38%; width: min(980px, 160vw); aspect-ratio: 1; margin: max(-490px, -80vw) 0 0 max(-490px, -80vw); opacity: .22;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); }

/* Hero-Einstieg: Inhalte sind sofort sichtbar (LCP), sie gleiten nur leicht nach oben */
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: enterUp 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms); }
  @keyframes enterUp { from { translate: 0 18px; } to { translate: 0 0; } }
  .atmos .orbit { animation: orbitSpin 160s linear infinite; }
  .atmos--final .orbit { animation-duration: 220s; animation-direction: reverse; }
  @keyframes orbitSpin { to { rotate: 360deg; } }
  .atmos__light { animation: lightDrift 16s ease-in-out infinite alternate; }
  @keyframes lightDrift { from { transform: translateX(-70px); } to { transform: translateX(70px) translateY(30px); } }
  .net__lines .flow { animation: flow 3.5s linear infinite; }
  .net__lines .flow:nth-child(2n) { animation-duration: 5s; animation-direction: reverse; }
  @keyframes flow { to { stroke-dashoffset: -88; } }
  .net__nodes circle:nth-child(3n) { animation: nodePulse 4s ease-in-out infinite; }
  .net__nodes circle:nth-child(5n) { animation: nodePulse 5.5s ease-in-out infinite -2s; }
  @keyframes nodePulse { 50% { opacity: .25; } }
  .has-lights::before { animation: lightDrift 22s ease-in-out infinite alternate; }
  .has-lights::after { animation: lightDrift 26s ease-in-out infinite alternate-reverse; }
}

/* Tipp-Animation im Hero: zeigt, worum es geht – Fragen an die KI */
.m--prompt { left: 20%; top: 80%; width: 44%; z-index: 5; flex-direction: row; align-items: center; gap: 10px; padding: 12px 18px 12px 12px;
  background: rgba(255, 255, 255, .94); border-radius: 999px; box-shadow: 0 0 0 1px rgba(16,18,21,.06), var(--shadow-lg); backdrop-filter: blur(8px); }
.m-prompt__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3c.6 3.7 2 5.1 5.7 5.7C12 9.3 10.6 10.7 10 14.4 9.4 10.7 8 9.3 4.3 8.7 8 8.1 9.4 6.7 10 3Z' fill='white'/%3E%3C/svg%3E") center / 16px no-repeat; }
.m-prompt__text { font-size: clamp(.6875rem, .9vw, .875rem); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.m-prompt__caret { flex: none; width: 2px; height: 1.1em; margin-left: -8px; background: var(--accent); border-radius: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .m-prompt__caret { animation: caret 1s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
}

/* ---------- CTA-Feinschliff ---------- */
.btn--primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(32, 57, 180, .3), 0 6px 18px -6px rgba(44, 75, 214, .55); }
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(32, 57, 180, .3), 0 14px 30px -8px rgba(44, 75, 214, .62); }
.btn--lg.btn--primary:hover { transform: translateY(-2px); }
/* Wiederkehrender, sehr leiser Lichtstreif – nur auf dem Hero- und Abschluss-Button */
.btn--glint::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-130%); pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.32) 50%, transparent 68%); }
.btn--light.btn--glint::before { background: linear-gradient(105deg, transparent 32%, rgba(44,75,214,.14) 50%, transparent 68%); }
@media (prefers-reduced-motion: no-preference) {
  .btn--glint::before { animation: glint 7s var(--ease) 2.4s infinite; }
  .btn--glint:hover::before { animation-play-state: paused; }
  @keyframes glint { 0% { transform: translateX(-130%); } 16%, 100% { transform: translateX(130%); } }
}
/* Sekundär: reiner Textlink mit wachsender Unterstreichung */
.btn--quietlink { background: transparent; color: var(--ink); padding: 0 12px; box-shadow: none; }
.btn--quietlink span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 3px; transition: background-size .35s var(--ease); }
.btn--quietlink:hover { color: var(--accent); transform: none; }
.btn--quietlink:hover span { background-size: 100% 1.5px; }
.btn__arrow--down { transition: transform .3s var(--ease); }
.btn--quietlink:hover .btn__arrow--down { transform: translateY(3px); }
.btn--attention::before { background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); }
.btn--attention:hover::before { animation: sheen 1.1s var(--ease) 1 both; }

/* ---------- Angebot: leiser Lichtring um die Karte ---------- */
@property --ring-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.offer-ring { position: relative; padding: 1.5px; border-radius: calc(var(--r-lg) + 1.5px);
  background: conic-gradient(from var(--ring-angle), rgba(44,75,214,.08) 0 62%, rgba(44,75,214,.6) 78%, rgba(140,120,240,.35) 86%, rgba(44,75,214,.08) 100%);
  box-shadow: 0 40px 100px -40px rgba(16,18,21,.35); }
.offer-ring .offer { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .offer-ring { animation: ringSpin 10s linear infinite; }
  @keyframes ringSpin { to { --ring-angle: 360deg; } }
}
.price__value { font-size: .9375rem; color: #c9d1ff; margin: 0 0 6px; }

/* ---------- Produkt: Tiefe beim Leitfaden ---------- */
.part__visual--guide { perspective: 1100px; }
@media (hover: hover) {
  .part--wide:hover .m--lg { rotate: 0deg; translate: 0 -8px; transform: rotateY(-16deg) rotateX(5deg); box-shadow: 30px 40px 70px -30px rgba(16,18,21,.45); }
  .m--lg { transition: rotate .7s var(--ease), translate .7s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease); }
}

/* ---------- Mobil: Visuals vereinfachen, nichts über Text oder Buttons ---------- */
@media (max-width: 900px) {
  .atmos--hero .orbit { top: -60px; }
  .m--prompt { left: 10%; width: 62%; }
}
@media (max-width: 640px) {
  .atmos--hero .orbit { top: -40px; opacity: .08; }
  .atmos__light { width: 600px; margin-left: -300px; }
  .hero::after { background-size: 22px 22px; }
  .stage .m--video { display: none; }
  .m--prompt { left: 6%; top: 82%; width: 88%; padding: 10px 14px 10px 10px; }
  .net { opacity: .7; }
  .has-lights::before, .has-lights::after { display: none; }
}

/* ==========================================================================
   Leise KI-Unterhaltung als Hintergrund („Was du danach kannst“)
   Keine Flächen, keine Rahmen: nur wenige große Zeilen in sehr hellem Grau,
   die weich in den Hintergrund auslaufen.
   ========================================================================== */
.has-chat { position: relative; isolation: isolate; overflow: hidden; }
.chatbg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  font: 500 clamp(1.75rem, 2.6vw, 2.6rem)/1.35 var(--f-display); letter-spacing: -0.02em; color: rgba(22, 24, 28, .05);
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 55% 55%, #000 35%, transparent 85%); mask-image: radial-gradient(ellipse 70% 75% at 55% 55%, #000 35%, transparent 85%); }
.js-motion .chatbg.reveal { opacity: 1; transform: none; }
.chatbg p { margin: 0; white-space: nowrap; }
.chatbg__prompt { position: absolute; right: -4%; top: 12%; text-align: right; display: flex; flex-direction: column; gap: .35em;
  padding: .6em 1em; }
.chatbg__answer { position: absolute; left: 4%; top: 52%; display: flex; align-items: center; gap: .5em; }
.chatbg__mark { width: .9em; height: .9em; flex: none; border-radius: 50%; background: rgba(44, 75, 214, .07)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3c.6 3.7 2 5.1 5.7 5.7C12 9.3 10.6 10.7 10 14.4 9.4 10.7 8 9.3 4.3 8.7 8 8.1 9.4 6.7 10 3Z' fill='%232c4bd6' fill-opacity='.16'/%3E%3C/svg%3E") center / 70% no-repeat; }
.chatbg__input { position: absolute; left: 18%; bottom: 9%; display: flex; align-items: center; gap: .1em;
  padding: .45em 1.1em; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(22, 24, 28, .04); }
.chatbg__caret { display: inline-block; width: 2px; height: .95em; margin-left: .15em; border-radius: 1px; background: rgba(44, 75, 214, .22); }

@media (prefers-reduced-motion: no-preference) {
  .js-motion .chatbg .ln { opacity: 0; transition: opacity 2.4s ease; transition-delay: calc(var(--i) * 260ms); }
  .js-motion .chatbg.is-in .ln { opacity: 1; }
  .chatbg__caret { animation: caret 1.4s steps(1) infinite; }
  .chatbg__prompt { animation: chatDrift 40s ease-in-out infinite alternate; }
  .chatbg__answer, .chatbg__input { animation: chatDrift 48s ease-in-out infinite alternate-reverse; }
  @keyframes chatDrift { from { transform: translateX(0); } to { transform: translateX(-24px); } }
}

@media (max-width: 900px) {
  .chatbg__prompt { right: -30%; top: 8%; }
  .chatbg__answer { top: 48%; left: -6%; }
  .chatbg__input { left: 2%; bottom: 6%; }
}
@media (max-width: 640px) {
  .chatbg { font-size: 1.375rem; line-height: 1.3; color: rgba(22, 24, 28, .05);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
  .chatbg p { white-space: normal; }
  .chatbg__prompt { left: 14%; right: 4%; top: 22%; gap: .7em; }
  .chatbg__answer { left: 4%; right: 14%; top: 55%; align-items: flex-start; }
  .chatbg__input { left: 4%; right: 4%; bottom: 5%; font-size: 1.125rem; }
}

/* ==========================================================================
   Persönliche Marke: echtes Porträt, warme Töne
   ========================================================================== */
/* Etwas wärmere Neutraltöne (gleiche Palette, minimal wärmer) */
:root { --mist: #f5f4f2; --mist-2: #eceae6; }

.byline { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: .9375rem; color: var(--graphite); }
.byline img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(16,18,21,.08); }
.byline a { color: var(--ink); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.byline a:hover { background-size: 100% 1px; color: var(--ink); }

.about { position: relative; isolation: isolate; }
.about::before { content: ''; position: absolute; left: -12%; top: -12%; width: 62%; height: 124%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(244, 176, 120, .15), rgba(244, 176, 120, 0)); }
.about__photo { position: relative; background: none !important; box-shadow: 0 40px 80px -40px rgba(60, 40, 20, .35); }
.about__photo img { filter: saturate(1.02) contrast(1.02); }
.about__photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(16, 18, 21, .06); background: linear-gradient(180deg, transparent 70%, rgba(16, 18, 21, .08)); }

.contact-note { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.contact-note img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; }
.contact-note p { margin: 0; color: var(--graphite); font-size: .9375rem; }
.contact-note span { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--ink); font-size: .875rem; }

/* ==========================================================================
   Bausteine als Scroll-Sequenz: eine Karte nach der anderen im Fokus
   Desktop: Karten schieben sich beim Scrollen übereinander (sticky, kein Scroll-Hijacking).
   Mobil: normale Liste, die Karte in der Bildschirmmitte ist im Fokus.
   ========================================================================== */
.parts--stack { display: block; }
.parts--stack .part { margin-bottom: 20px; }
.parts--stack .part:last-child { margin-bottom: 0; }
.parts--stack .part:hover { transform: none; }
.kit-progress { display: none; }

@media (min-width: 901px) {
  .parts--stack .part { position: sticky; top: calc(var(--nav-h) + 84px + var(--i) * 14px); min-height: 420px; margin-bottom: 44px; }
  .js-focus .kit-progress { position: sticky; top: calc(var(--nav-h) + 22px); z-index: 6; display: flex; align-items: center; gap: 14px; width: max-content; margin: 0 auto 22px;
    padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(16,18,21,.06), var(--shadow-sm); font-size: .8125rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
  .kit-progress b { color: var(--ink); font-weight: 700; }
}
.kit-progress__bars { display: flex; gap: 5px; }
.kit-progress__bars i { width: 16px; height: 3px; border-radius: 2px; background: var(--mist-2); transition: width .5s var(--ease), background-color .5s var(--ease); }
.kit-progress__bars i.is-done { background: rgba(44,75,214,.35); }
.kit-progress__bars i.is-current { width: 30px; background: var(--accent); }

/* Karten bleiben immer deckend – inaktive werden über eine weiche Schicht zurückgenommen,
   damit gestapelte Karten nicht durchscheinen. */
.js-focus .part { position: relative; transform-origin: 50% 0; transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
@media (min-width: 901px) { .js-focus .part { position: sticky; } }
.js-focus .part::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: var(--mist); opacity: 0; transition: opacity .8s var(--ease); }
.js-focus .part.is-active { transform: scale(1); box-shadow: 0 0 0 1px rgba(44,75,214,.16), 0 30px 70px -28px rgba(16,18,21,.32); }
.js-focus .part.is-past { transform: scale(.955); }
.js-focus .part.is-past::after { opacity: .62; }
.js-focus .part.is-next { transform: scale(.975); }
.js-focus .part.is-next::after { opacity: .38; }
.js-focus .part.is-active .part__n { color: var(--accent); }

@media (max-width: 900px) {
  .js-focus .part.is-past, .js-focus .part.is-next { transform: scale(.985); }
  .js-focus .part.is-past::after, .js-focus .part.is-next::after { opacity: .45; }
  .js-focus .part.is-active { box-shadow: 0 0 0 1px rgba(44,75,214,.14), 0 20px 50px -24px rgba(16,18,21,.28); }
}

/* Lichtflächen im Produktbereich seitlich beschneiden, ohne die Sticky-Karten zu beeinträchtigen */
.has-lights { overflow-x: clip; }

/* ==========================================================================
   Lead-Seite /gratis-guide/ – ein Ziel: E-Mail eintragen
   ========================================================================== */
.lp-body { background: var(--paper); }
.lp-header { padding: 22px 0; }
.lp-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(16px, 3vw, 40px) 0 clamp(56px, 7vw, 96px); }
.lp-hero .atmos__light { top: -30%; }
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.lp-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-ink); font-size: .8125rem; font-weight: 600; }
.lp-label::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3c.6 3.7 2 5.1 5.7 5.7C12 9.3 10.6 10.7 10 14.4 9.4 10.7 8 9.3 4.3 8.7 8 8.1 9.4 6.7 10 3Z' fill='white'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lp-title { font-size: clamp(2rem, 1.9vw + 1.2rem, 3.1rem); font-weight: 760; line-height: 1.06; letter-spacing: -0.038em; margin-bottom: 18px; max-width: 21ch; }
.lp-lead { font-size: 1.125rem; line-height: 1.55; color: var(--graphite); max-width: 54ch; margin-bottom: 24px; }

.lp-card { background: var(--paper); border-radius: var(--r-md); padding: clamp(20px, 2.6vw, 28px);
  box-shadow: 0 0 0 1px rgba(16,18,21,.07), 0 24px 60px -30px rgba(16,18,21,.3); }
.lp-form__label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 8px; }
.lp-form__row { display: flex; flex-direction: column; gap: 10px; }
.lp-input { flex: 1; min-width: 0; min-height: 58px; padding: 0 18px; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--mist); border: 1px solid transparent; border-radius: var(--r-sm); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.lp-input::placeholder { color: #9aa0a8; }
.lp-input:hover { background: #f0efec; }
.lp-input:focus-visible { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.lp-input[aria-invalid="true"] { border-color: var(--danger); background: #fff; }
.lp-submit { flex: none; width: 100%; border-radius: var(--r-sm); }
.lp-submit.is-loading { padding-right: 52px; }
.lp-submit:disabled { cursor: progress; }
.lp-error { margin: 10px 0 0; color: var(--danger); font-size: .9375rem; }
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: .875rem; line-height: 1.5; color: var(--graphite); cursor: pointer; }
.lp-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.lp-legal { margin: 12px 0 0; font-size: .8125rem; line-height: 1.5; color: #7a8089; }
.lp-legal a { color: var(--graphite); }

.lp-success { text-align: left; animation: fadeIn .5s var(--ease); }
.lp-success__icon { display: block; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: #e7f5ec
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4 8.4 13.6 15 6.8' fill='none' stroke='%231f8a4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; }
.lp-success__title { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 10px; outline: none; }
.lp-success p { color: var(--graphite); margin-bottom: 10px; }
.lp-success__doi { padding: 12px 14px; background: var(--accent-tint); border-radius: var(--r-sm); color: var(--ink) !important; font-size: .9375rem; }
.lp-success__again { font-size: .875rem; color: var(--graphite); margin-top: 6px; }


/* PDF-Vorschau: Deckblatt vor einer Innenseite */
.lp-visual { position: relative; margin: 0; aspect-ratio: 1 / 1.08; border-radius: var(--r-lg);
  background: radial-gradient(110% 90% at 50% 10%, #fff 0%, var(--mist) 60%, var(--mist-2) 100%); box-shadow: inset 0 0 0 1px rgba(16,18,21,.05); }
.lp-visual .placeholder-note { position: absolute; left: 18px; bottom: 14px; right: 18px; margin: 0; }
.lp-doc { position: absolute; display: flex; flex-direction: column; aspect-ratio: 1 / 1.414; border-radius: 6px; box-shadow: var(--shadow-lg); }
.lp-doc--page { left: 40%; top: 12%; width: 44%; padding: 6%; gap: 9px; background: #fff; rotate: 6deg; }
.lp-doc__kicker { font: 700 .6875rem/1 var(--f-display); color: var(--accent); margin-top: 6px; }
.lp-doc__line { display: block; height: 9px; border-radius: 3px; background: var(--ink); opacity: .85; width: 80%; }
.lp-doc__line.short { width: 60%; }
.lp-doc__box { display: flex; flex-direction: column; gap: 6px; padding: 9px; border-radius: 6px; background: var(--mist); }
.lp-doc__box i { display: block; height: 5px; border-radius: 3px; background: #d5d8dc; }
.lp-doc__box i.short { width: 55%; }
.lp-doc--cover { left: 14%; top: 18%; width: 48%; padding: 8%; justify-content: space-between; rotate: -4deg; color: var(--ink);
  background: linear-gradient(160deg, #ffffff 0%, #f6f7fb 100%); box-shadow: 0 0 0 1px rgba(16,18,21,.06), var(--shadow-lg); }
.lp-doc--cover::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5%; border-radius: 6px 0 0 6px; background: var(--accent); }
.lp-cover__brand { font: 800 .625rem/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--graphite); }
.lp-cover__num { font: 780 clamp(4rem, 8vw, 6.5rem)/.9 var(--f-display); letter-spacing: -0.06em; color: var(--accent); margin-top: auto; }
.lp-cover__title { font: 740 clamp(1rem, 1.6vw, 1.375rem)/1.12 var(--f-display); letter-spacing: -0.025em; margin-top: 10px; }
.lp-cover__sub { font-size: .6875rem; color: var(--graphite); margin-top: 14px; }
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .lp-doc--cover { animation: float 8s ease-in-out infinite alternate; }
  .lp-doc--page { animation: float 9s ease-in-out infinite alternate-reverse; }
}

.lp-status { text-align: left; }
.lp-status .btn { margin-top: 8px; }

@media (max-width: 900px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-visual { max-width: 520px; width: 100%; margin: 0 auto; aspect-ratio: 1 / .82; }
  .lp-doc--cover { left: 18%; top: 10%; width: 40%; }
  .lp-doc--page { left: 46%; top: 8%; width: 36%; }
}
@media (max-width: 640px) {
  .lp-header { padding: 16px 0 4px; }
  .lp-title { font-size: clamp(1.9rem, 7.4vw, 2.4rem); }
  .lp-lead { font-size: 1.0625rem; margin-bottom: 22px; }
  .lp-form__row { flex-direction: column; }
  .lp-submit { width: 100%; }
  .lp-card { padding: 18px; border-radius: var(--r-md); }
  .lp-visual { aspect-ratio: 1 / .9; }
}

/* Cookie-Hinweis auf der Lead-Seite: kompakt und weg vom Formular */
.lp-body .consent { left: auto; right: 16px; max-width: 340px; padding: 16px; font-size: .8125rem; }
.lp-body .consent p { margin-bottom: 10px; }
@media (max-width: 640px) {
  .lp-body .consent { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
  .lp-body .consent p { margin: 0; font-size: .75rem; }
}

/* Nur für Screenreader sichtbar */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- /gratis-guide/ – Feinschliff Conversion ---------- */
.lp-label::before { display: none; }
.lp-label { gap: 10px; padding: 5px 14px 5px 5px; }
.lp-label img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }

/* Dezente, einmal einlaufende Unterstreichung einzelner Schlüsselwörter */
.mark { background: linear-gradient(rgba(44,75,214,.55), rgba(44,75,214,.55)) 0 94% / 100% .08em no-repeat; padding-bottom: .02em; }
.mark--soft { background-image: linear-gradient(rgba(44,75,214,.45), rgba(44,75,214,.45)); background-size: 100% 1.5px; }
@media (prefers-reduced-motion: no-preference) {
  .mark { background-size: 0 .08em; animation: markIn .9s var(--ease) forwards; animation-delay: calc(.55s + var(--m, 0) * .28s); }
  .mark--soft { background-size: 0 1.5px; animation-name: markInSoft; }
  @keyframes markIn { to { background-size: 100% .08em; } }
  @keyframes markInSoft { to { background-size: 100% 1.5px; } }
}

/* Formular als klarer Fokus */
.lp-card { position: relative; transition: box-shadow .4s var(--ease); }
.lp-card:focus-within { box-shadow: 0 0 0 1px rgba(44,75,214,.28), 0 0 0 6px rgba(44,75,214,.06), 0 30px 70px -30px rgba(16,18,21,.35); }
.lp-form__label { font-size: 1rem; margin-bottom: 10px; }
.lp-input { min-height: 60px; }
.lp-submit { min-height: 60px; font-size: 1.0625rem; letter-spacing: -0.005em; }
.lp-submit:hover { transform: translateY(-2px); }
.lp-submit:active { transform: translateY(0) scale(.985); }
.lp-trust { margin: 12px 0 0; text-align: center; font-size: .8125rem; color: var(--graphite); letter-spacing: .01em; }
.lp-optin { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.lp-check { margin-top: 0; font-size: .8125rem; }
.lp-check input { width: 18px; height: 18px; }
.lp-legal { margin-top: 8px; font-size: .75rem; }

/* Zustandswechsel Formular → Bestätigung */
.lp-form { animation: fadeIn .4s var(--ease); }
.lp-next { counter-reset: n; margin: 16px 0 14px; }
.lp-next li { counter-increment: n; position: relative; padding: 7px 0 7px 34px; font-size: .9375rem; color: var(--ink); }
.lp-next li::before { content: counter(n); position: absolute; left: 0; top: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-ink); font-size: .75rem; font-weight: 700; }

@media (max-width: 640px) {
  .lp-label { font-size: .75rem; }
  .lp-submit { min-height: 58px; }
  .lp-input { font-size: 1rem; }  /* ≥ 16 px: kein automatisches Zoomen auf iOS */
}

/* ==========================================================================
   Startseite „KI-Wissensplattform“ – neue Bausteine im bestehenden System
   ========================================================================== */
/* Hero: Unterhaltung statt Produktbild */
.cs { gap: 7% !important; }
.cs__user { align-self: flex-end; width: 62%; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px 16px 6px 16px; background: var(--mist); }
.cs__user i, .cs__ai i { display: block; height: 8px; border-radius: 4px; background: #d7dadf; }
.cs__user i.short, .cs__ai i.short { width: 58%; }
.cs__ai { display: flex; gap: 12px; width: 86%; }
.cs__ai b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-tint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3c.6 3.7 2 5.1 5.7 5.7C12 9.3 10.6 10.7 10 14.4 9.4 10.7 8 9.3 4.3 8.7 8 8.1 9.4 6.7 10 3Z' fill='%232c4bd6'/%3E%3C/svg%3E") center / 15px no-repeat; }
.cs__ai > span { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.m--pill { padding: 10px 18px; border-radius: 999px; background: #fff; font: 600 clamp(.75rem, .9vw, .9375rem)/1 var(--f-display); letter-spacing: -0.01em; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(16,18,21,.06), var(--shadow-md); flex-direction: row; align-items: center; gap: 8px; }
.m--pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.stage .m--tablet { left: 27%; top: 9%; width: 46%; }
.stage .m--pill-1 { left: 12%; top: 22%; rotate: -4deg; z-index: 3; }
.stage .m--pill-2 { left: 76%; top: 16%; rotate: 3deg; z-index: 3; }
.stage .m--pill-3 { left: 10%; top: 58%; rotate: 2deg; z-index: 3; }
.stage .m--pill-4 { left: 75%; top: 54%; rotate: -3deg; z-index: 3; }
.stage .m--prompt { left: 24%; top: 80%; width: 52%; }
@media (prefers-reduced-motion: no-preference) {
  .stage .m--pill-2 { animation-duration: 8.5s; animation-delay: -3s; }
  .stage .m--pill-3 { animation-duration: 7.5s; animation-delay: -1.5s; }
  .stage .m--pill-4 { animation-duration: 9s; animation-delay: -5s; }
}
.hero__guide { background: #fff; }

/* A · Grundlagen */
.lessons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.lesson { border-top: 2px solid var(--ink); padding-top: 22px; }
.lesson__n { font-size: var(--t-sm); font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.lesson .h3 { margin-bottom: 12px; font-size: clamp(1.25rem, .6vw + 1.05rem, 1.5rem); }
.lesson p:last-child { color: var(--graphite); margin: 0; }
.lessons__note { text-align: center; margin-top: 28px; }

/* A2 · Schritte – Visual: Prompt-Ausschnitt mit markiertem Baustein */
.step-vis { padding: clamp(24px, 4vw, 56px); }
.step-vis__prompt { margin: 0; max-width: 24ch; font: 500 clamp(1.25rem, 1.6vw + .8rem, 2rem)/1.35 var(--f-display); letter-spacing: -0.02em; color: var(--graphite); }
.step-vis__prompt mark { background: linear-gradient(transparent 58%, rgba(44,75,214,.16) 58%); color: var(--ink); padding: 0 .08em; border-radius: 2px; }

/* B · Prompts zum Kopieren */
.prompts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.prompt { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 0 0 1px rgba(16,18,21,.06); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.prompt:hover { box-shadow: 0 0 0 1px rgba(16,18,21,.06), var(--shadow-md); transform: translateY(-2px); }
.prompt__tag { align-self: flex-start; font-size: .75rem; font-weight: 600; color: var(--accent-ink); background: var(--accent-tint); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.prompt__title { font-size: 1.125rem; letter-spacing: -0.015em; margin-bottom: 10px; }
.prompt__text { flex: 1; font-size: .9375rem; line-height: 1.6; color: var(--graphite); margin-bottom: 20px; padding: 14px 16px; background: var(--mist); border-radius: var(--r-sm); }
.copy { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px;
  background: #fff; font: 600 .875rem/1 var(--f-body); color: var(--ink); transition: border-color .2s, background-color .25s, color .25s, transform .2s; }
.copy::before { content: ''; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5' y='5' width='8.5' height='8.5' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M10.5 3.5V3A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v5A1.5 1.5 0 0 0 4 9.5h.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5' y='5' width='8.5' height='8.5' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M10.5 3.5V3A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v5A1.5 1.5 0 0 0 4 9.5h.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.copy:hover { border-color: #c5cad1; }
.copy:active { transform: scale(.97); }
.copy.is-copied { background: #e7f5ec; border-color: #bfe3cc; color: #1f6b3e; }
.copy.is-copied::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.5 11.3 12.5 5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.5 11.3 12.5 5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* C · Alltag */
.usecases li::before { background-image: none !important; }
.usecases li { padding-top: 0; border-top: 1px solid var(--rule); padding-top: 20px; }
.usecases li::before { display: none; }
.usecase__ex { margin-top: 12px !important; font-size: .875rem; color: var(--accent-ink) !important; font-style: italic; }

/* D · Guide-Feature */
.guide-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.guide-feature__visual { position: relative; aspect-ratio: 1 / .9; border-radius: var(--r-lg); background: radial-gradient(110% 90% at 50% 10%, #fff 0%, var(--mist) 60%, var(--mist-2) 100%);
  box-shadow: inset 0 0 0 1px rgba(16,18,21,.05); }
.guide-feature__text .h2 { font-size: clamp(1.875rem, 2vw + 1.1rem, 2.75rem); margin-bottom: 16px; }
.guide-feature__text .lead { margin-bottom: 28px; }
.guide-feature__note { margin: 14px 0 0; font-size: .875rem; color: var(--graphite); }

/* Abschluss mit zwei Wegen */
.final__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; }
.btn--quietlink-dark { color: var(--band-text); }
.btn--quietlink-dark:hover { color: #fff; }

/* Mobile Leiste auf der Startseite: Gratis-Guide statt Preis */
.buybar__price strong { display: block; font: 760 1rem/1.1 var(--f-display); color: var(--ink); }

@media (max-width: 1000px) { .prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .lessons, .guide-feature { grid-template-columns: minmax(0, 1fr); }
  .guide-feature__visual { max-width: 520px; width: 100%; margin: 0 auto; }
  .stage .m--tablet { left: 16%; top: 8%; width: 68%; }
  .stage .m--prompt { left: 10%; width: 80%; top: 80%; }
}
@media (max-width: 640px) {
  .prompts { grid-template-columns: minmax(0, 1fr); }
  .copy { width: 100%; min-height: 48px; }
  .stage .m--pill { padding: 7px 12px; font-size: .6875rem; }
  .stage .m--pill-1 { left: 3%; top: 16%; }
  .stage .m--pill-2 { left: 66%; top: 4%; }
  .stage .m--pill-3 { left: 3%; top: 62%; }
  .stage .m--pill-4 { display: none; }
  .stage .m--tablet { left: 12%; top: 12%; width: 76%; }
  .hero__buy .hero__guide { display: inline-flex; width: 100%; }
  .final__actions .btn { width: 100%; }
  .buybar__price { font-size: .75rem; }
}
.cs__user--short { width: 40%; }

/* ==========================================================================
   Produktionsreife Startseite – Inhalte und Navigation
   ========================================================================== */
.lesson__ex { margin: 14px 0 0 !important; padding: 12px 14px; border-radius: var(--r-sm); background: var(--mist); font-size: .9375rem; color: var(--graphite); }
.lesson__ex strong { color: var(--ink); }

/* Anleitungen (aufklappbar) */
.guides-list { max-width: 860px; margin: clamp(56px, 7vw, 96px) auto 0; }
.guides-list__title { text-align: center; margin-bottom: 20px; }
.howto { border-radius: var(--r-md); background: var(--paper); box-shadow: 0 0 0 1px rgba(16,18,21,.07); margin-bottom: 12px; overflow: hidden; transition: box-shadow .3s var(--ease); }
.howto[open] { box-shadow: 0 0 0 1px rgba(44,75,214,.2), var(--shadow-md); }
.howto summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto 28px; align-items: center; gap: 6px 16px; padding: 20px 22px; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: ''; width: 28px; height: 28px; border-radius: 50%; background:
  linear-gradient(var(--ink) 0 0) center / 10px 1.8px no-repeat, linear-gradient(var(--ink) 0 0) center / 1.8px 10px no-repeat, var(--mist); transition: transform .35s var(--ease); }
.howto[open] summary::after { transform: rotate(45deg); }
.howto summary:hover .howto__t { color: var(--accent); }
.howto__n { font-size: .75rem; font-weight: 600; color: var(--accent-ink); background: var(--accent-tint); padding: 4px 10px; border-radius: 999px; }
.howto__t { font: 650 1.0625rem/1.3 var(--f-display); letter-spacing: -0.01em; transition: color .2s; }
.howto__time { font-size: .8125rem; color: var(--graphite); }
.howto__body { padding: 0 22px 24px; color: var(--graphite); animation: fadeIn .4s var(--ease); }
.howto__body p { max-width: 64ch; }
.howto__steps { counter-reset: s; margin: 8px 0 18px; }
.howto__steps li { counter-increment: s; position: relative; padding: 10px 0 10px 40px; border-top: 1px solid var(--rule); }
.howto__steps li::before { content: counter(s); position: absolute; left: 0; top: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; }
.howto__steps strong, .howto__body p strong { color: var(--ink); }
.howto__checks li, .howto__followups li { position: relative; padding: 7px 0 7px 26px; }
.howto__checks li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.howto__followups { margin-bottom: 14px; }
.howto__followups li { font-style: italic; color: var(--ink); }
.howto__followups li::before { content: '›'; position: absolute; left: 6px; top: 6px; color: var(--accent); font-style: normal; font-weight: 700; }
.howto__example { display: grid; gap: 8px; margin: 6px 0 16px; }
.howto__example p { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--mist); color: var(--ink); }
.howto__example span { display: block; font-size: .75rem; font-weight: 600; color: var(--graphite); margin-bottom: 4px; }
.howto__tip { padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--ink) !important; margin: 0; }

/* Fertiger Prompt aus den fünf Schritten */
.assembled { max-width: 860px; margin: clamp(40px, 5vw, 64px) auto 0; padding: clamp(24px, 3.4vw, 40px); background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(16,18,21,.06), var(--shadow-md); }
.assembled .h3 { margin-bottom: 14px; }
.assembled__text { font: 500 clamp(1.0625rem, .6vw + .95rem, 1.25rem)/1.55 var(--f-display); padding: 16px 18px; border-radius: var(--r-sm); background: var(--mist); }
.assembled__note { color: var(--graphite); font-size: .9375rem; }

/* Prompts: Anwendungsfall */
.prompt__use { font-size: .875rem; color: var(--graphite); margin-bottom: 12px; }

/* KI im Alltag: Erklärung + Prompt nebeneinander */
.usecases { display: grid; gap: 14px; }
.usecase { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 40px); align-items: center; padding: clamp(20px, 2.4vw, 28px);
  background: rgba(255,255,255,.86); backdrop-filter: blur(6px); border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(16,18,21,.06); }
.usecase h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.usecase__text p { margin: 0; color: var(--graphite); }
.usecase__text .usecase__ex { margin-top: 10px !important; font-style: normal; font-size: .875rem; color: var(--graphite) !important; }
.usecase__ex strong { color: var(--ink); }
.usecase__prompt { display: flex; flex-direction: column; gap: 12px; }
.usecase__promptText { margin: 0; padding: 14px 16px; border-radius: var(--r-sm); background: var(--mist); font-size: .9375rem; line-height: 1.55; color: var(--ink); }
.usecase__prompt .copy { align-self: flex-start; }

/* Gratis-Guide: so sieht die echte E-Mail aus */
.mailcard { position: absolute; left: 50%; top: 50%; width: min(86%, 380px); translate: -50% -50%; padding: 22px; background: #fff; border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(16,18,21,.06), var(--shadow-lg); }
.mailcard__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.mailcard__head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.mailcard__head strong { display: block; font-size: .9375rem; }
.mailcard__head small { color: var(--graphite); font-size: .75rem; }
.mailcard__subject { margin: 14px 0 6px; font: 700 1.0625rem/1.3 var(--f-display); letter-spacing: -0.015em; }
.mailcard__body { margin: 0 0 16px; color: var(--graphite); font-size: .9375rem; }
.mailcard__btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: .875rem; }
.mailcard__btn::before { content: 'PDF'; font-size: .625rem; font-weight: 800; letter-spacing: .06em; padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,.2); }
.mailcard__small { margin: 12px 0 0; font-size: .75rem; color: var(--graphite); }
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) { .mailcard { animation: float 8s ease-in-out infinite alternate; } }

/* Mobiles Menü */
.nav__toggle { display: none; width: 44px; height: 44px; margin-left: 4px; border: 0; border-radius: 50%; background: transparent; position: relative; }
.nav__toggle span { position: absolute; left: 13px; right: 13px; height: 1.8px; border-radius: 1px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); }
.nav__toggle span:first-child { top: 18px; }
.nav__toggle span:last-child { top: 25px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }
.nav__toggle:hover { background: var(--mist); }
.nav__menu { display: flex; flex-direction: column; padding: 8px var(--gutter) 18px; border-top: 1px solid var(--rule); background: rgba(255,255,255,.97); animation: fadeIn .3s var(--ease); }
.nav__menu a { padding: 13px 4px; border-bottom: 1px solid var(--rule); font: 600 1.0625rem/1.2 var(--f-display); text-decoration: none; color: var(--ink); }
.nav__menu a:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .nav__toggle { display: inline-block; }
  .nav__inner .nav__cta { margin-left: auto; }
  .usecase { grid-template-columns: minmax(0, 1fr); }
  .howto summary { grid-template-columns: 1fr 28px; }
  .howto__n { grid-column: 1; justify-self: start; }
  .howto__t { grid-column: 1; }
  .howto__time { grid-column: 1; }
  .howto summary::after { grid-column: 2; grid-row: 1 / span 3; }
}
@media (min-width: 901px) { .nav__menu { display: none !important; } }
@media (max-width: 640px) {
  .usecase__prompt .copy, .assembled .copy { align-self: stretch; }
  .nav__cta { padding: 0 14px; font-size: .875rem; }
}
.lp-visual__caption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: .8125rem; color: var(--graphite); }

/* „KI im Alltag“: Chat-Zeilen nur in den freien Rändern, nie hinter Überschrift oder Karten */
#alltag .chatbg { -webkit-mask-image: none; mask-image: none; }
#alltag .chatbg__prompt { top: 14px; right: -2%; font-size: .78em; gap: .2em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
#alltag .chatbg__prompt p:nth-child(3), #alltag .chatbg__answer { display: none; }
#alltag .chatbg__input { top: auto; bottom: 34px; left: 50%; translate: -50% 0; font-size: .7em; }
#alltag .learn__head { position: relative; z-index: 1; margin-top: 40px; }
@media (max-width: 640px) {
  #alltag .chatbg__prompt { display: none; }
  #alltag .chatbg__input { left: 4%; translate: none; bottom: 26px; }
}

/* E-Mail-Vorschau über das Layout zentrieren (die Schwebe-Animation nutzt „translate“) */
.lp-visual, .guide-feature__visual { display: grid; place-items: center; }
.mailcard { position: relative; left: auto; top: auto; translate: none; }
.lp-visual .mailcard { margin-bottom: 28px; }

/* Weniger Prompts: Hinweis auf den Guide und kurze Anwendungsbeispiele statt Kopier-Prompts */
.prompts__more { margin: 28px auto 0; max-width: 60ch; text-align: center; color: var(--graphite); }
.prompts__more a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.usecase__more { padding: 14px 16px; border-radius: var(--r-sm); background: var(--mist); }
.usecase__moreTitle { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.usecase__more ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: .9375rem; line-height: 1.5; color: var(--graphite); }
.usecases .usecase__more li { border-top: 0; padding: 0; list-style: disc; }

/* ==========================================================================
   Interaktive Demos: Chatfenster, Vorher/Nachher, Prompt-Baukasten,
   Alltags-Karten und ruhiger Abschluss
   ========================================================================== */
/* ---------- Chat (gemeinsamer Baustein) ---------- */
.chat { display: flex; flex-direction: column; gap: 12px; }
.chat__msg { position: relative; transition: opacity .45s var(--ease), translate .45s var(--ease); }
.chat__msg--user { align-self: flex-end; max-width: 92%; padding: 10px 14px; border-radius: 16px 16px 6px 16px; background: var(--mist); }
.chat__text { position: relative; margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.chat__typed { display: none; position: absolute; inset: 0; color: var(--ink); }
.chat__typed::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; border-radius: 1px; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chat__msg--ai { display: flex; gap: 10px; align-items: flex-start; }
.chat__avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-tint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3c.6 3.7 2 5.1 5.7 5.7C12 9.3 10.6 10.7 10 14.4 9.4 10.7 8 9.3 4.3 8.7 8 8.1 9.4 6.7 10 3Z' fill='%232c4bd6'/%3E%3C/svg%3E") center / 15px no-repeat; }
.chat__answer { flex: 1; min-width: 0; padding-top: 3px; font-size: .9375rem; line-height: 1.55; color: var(--ink); transition: opacity .55s var(--ease); }
.chat__answer p { margin: 0 0 8px; }
.chat__answer > :last-child { margin-bottom: 0; }
.chat__answer ul, .chat__answer ol { margin: 0 0 8px; padding-left: 1.15em; display: grid; gap: 4px; }
.chat__answer .chat__plan { list-style: none; padding-left: 0; }
.chat__plan b { display: inline-block; min-width: 2.8em; margin-right: 6px; font-weight: 600; color: var(--accent-ink); }
.chat__options li span { display: block; font-size: .875rem; color: var(--graphite); }
.chat__dots { display: none; position: absolute; left: 38px; top: 9px; gap: 5px; }
.chat__dots i { width: 6px; height: 6px; border-radius: 50%; background: #a9b0ba; animation: dot 1.1s ease-in-out infinite; }
.chat__dots i:nth-child(2) { animation-delay: .15s; }
.chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
.chat__note { margin: 0; font-size: .75rem; color: var(--graphite); }
.chat__demo { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-ink); font: 600 .625rem/1.2 var(--f-body, inherit); letter-spacing: .02em; }

/* ---------- Vorher / Nachher nebeneinander ---------- */
.compare { max-width: 1040px; }
.compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare .demo__panel { padding: clamp(24px, 3.4vw, 40px); }
.compare__col--after { background: linear-gradient(180deg, var(--accent-tint), rgba(238,241,253,0) 70%); border-left: 1px solid var(--rule); }
.compare__label { margin: 0 0 16px; font: 700 .8125rem/1 var(--f-display); color: var(--graphite); }
.compare__col--after .compare__label { color: var(--accent-ink); }
.compare__col--after .chat__msg--user { background: var(--paper); box-shadow: 0 0 0 1px var(--rule); }
.compare__verdict { margin: 20px 0 0; padding-left: 24px; position: relative; font-size: .9375rem; font-weight: 600; color: var(--graphite); }
.compare__verdict::before { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 1px; background: #b3b9c1; }
.compare__verdict--good { color: var(--accent-ink); }
.compare__verdict--good::before { width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6 9l4-4.2' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (min-width: 761px) {
  .compare .demo__tabs { display: none; }
  .compare .demo__panel[hidden] { display: block !important; }
}
@media (max-width: 760px) {
  .compare__grid { grid-template-columns: minmax(0, 1fr); }
  .compare__col--after { border-left: 0; }
  .compare__label { display: none; }
}

/* ---------- Abschluss: ruhig, editorial, menschlich ---------- */
.final--editorial { background-color: var(--mist); color: var(--ink); border-top: 1px solid var(--rule);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.final--editorial .final__inner { max-width: 760px; }
.final__by { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; font: 600 .9375rem/1 var(--f-display); color: var(--ink); }
.final__by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--paper); }
.final--editorial .final__lead { color: var(--graphite); }
.final--editorial .btn--quietlink { color: var(--ink); }
.chat__answer ul { list-style: disc; }
.chat__answer ol { list-style: decimal; }
.chat__answer .chat__plan { list-style: none; }
.chat__plan li { display: grid; grid-template-columns: minmax(2.4em, max-content) minmax(0, 1fr); gap: 8px; }
.chat__plan b { min-width: 0; margin: 0; }


/* ==========================================================================
   Finale Startseite: weniger Elemente, klare Hierarchie, eine Chat-Demo
   ========================================================================== */
/* ---------- A · Hero: Text links, Demo rechts ---------- */
.hero::after { display: none; }
.hero { padding: clamp(48px, 7vw, 112px) 0 clamp(72px, 8vw, 120px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5.5vw, 88px); align-items: center; }
.hero__grid .hero__intro { max-width: none; text-align: left; }
.hero__grid .display { margin: 0 0 24px; font-size: clamp(2.25rem, 3.6vw + .9rem, 4.5rem); line-height: 1.02; }
.hero__grid .hero__lead { max-width: 34ch; margin: 0 0 36px; }
.hero__grid .hero__buy { justify-content: flex-start; align-items: center; gap: 8px 20px; margin: 0; }
.hero__grid .byline { margin-top: 36px; }
.hero__demo { margin: 0; }
.hero__demoNote { margin: 12px 4px 0; font-size: .75rem; color: var(--graphite); }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__grid .hero__intro { text-align: center; }
  .hero__grid .hero__lead { margin-inline: auto; }
  .hero__grid .hero__buy { justify-content: center; }
  .hero__demo { max-width: 560px; width: 100%; margin: 0 auto; }
  .hero__demoNote { text-align: center; }
}
@media (max-width: 640px) {
  .hero__grid .hero__buy { flex-direction: column; align-items: stretch; }
  .hero__grid .hero__buy .btn { width: 100%; justify-content: center; }
}

/* ---------- D · Chatfenster der Demo ---------- */
.chatwin { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -40px rgba(16,18,21,.28); overflow: hidden; }
.chatwin__head { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--rule); font: 600 .875rem/1 var(--f-display); color: var(--ink); }
.chatwin__head small { padding: 4px 9px; border-radius: 999px; background: var(--mist); font: 600 .6875rem/1 var(--f-display); color: var(--graphite); }
.chatwin__log { display: flex; flex-direction: column; gap: 26px; padding: 26px 22px 6px; }
.chatwin .chat__msg--user { max-width: 86%; }
.chatwin .chat__text, .chatwin .chat__answer { font-size: .9375rem; line-height: 1.6; }
.chatwin .chat__answer { position: relative; margin: 0; }
.chatwin__input { display: flex; align-items: flex-end; gap: 12px; margin: 22px; padding: 12px 12px 12px 16px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--rule); }
.chatwin__input p { position: relative; flex: 1; min-height: 3em; margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.chatwin__placeholder { color: #9aa1aa; }
.chatwin__input i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 12V4M4.5 7.5 8 4l3.5 3.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
@media (max-width: 640px) {
  .chatwin__log { padding: 22px 16px 4px; gap: 22px; }
  .chatwin__input { margin: 18px 16px 16px; }
  .chatwin .chat__text, .chatwin .chat__answer, .chatwin__input p { font-size: .875rem; }
}

/* ---------- B · Was kann ChatGPT? ---------- */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); }
.use { display: flex; flex-direction: column; }
.use__tag { align-self: flex-start; margin: 0 0 12px; padding: 4px 10px; border-radius: 999px; background: var(--accent-tint); font-size: .75rem; font-weight: 600; color: var(--accent-ink); }
.use__title { margin: 0 0 18px; font-size: 1.1875rem; letter-spacing: -0.015em; }
.use .chat { flex: 1; gap: 16px; margin-bottom: 22px; }
.use .chat__msg--user { align-self: stretch; max-width: none; }
.use .chat__text, .use .chat__answer { font-size: .875rem; line-height: 1.6; }
.use .copy { align-self: flex-start; }
.uses__note { max-width: 60ch; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; font-size: .9375rem; color: var(--graphite); }
.uses__note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .uses { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .use .copy { align-self: stretch; }
}

/* ---------- C · Vorher/Nachher: ruhiger, ohne schwere Schatten ---------- */
.compare { box-shadow: 0 0 0 1px var(--rule); }

/* ---------- E · Guide und Abschluss ---------- */
#guides .guide-feature__note { margin-top: 14px; }
.final--editorial .btn { margin-top: 8px; }
/* Einzeiliges Eingabefeld (Starter-Kit): ruhiger, fester Cursor, sanftes Leeren vor dem nächsten Text */
.m-prompt__caret { animation: none !important; }
.m-prompt__text { transition: opacity .5s var(--ease); }
.m-prompt__text.is-clearing { opacity: 0; }
.hero__buy .btn--quietlink { min-height: 48px; }
@media (max-width: 640px) { .hero__grid .hero__buy .btn--quietlink { display: inline-flex; } }

/* ==========================================================================
   KI-Positionierung: Kopf mit Positionierung, Beispiele mit Vorlagen, Tipp-Phasen
   ========================================================================== */
/* ---------- Kopf: Schriftzug + leise Positionierung ---------- */
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.brand .wordmark { line-height: 1; }
.brand__tag { padding-left: 14px; border-left: 1px solid var(--rule); font-size: .75rem; line-height: 1.2; color: var(--graphite); white-space: nowrap; }
@media (max-width: 640px) {
  .brand { flex-direction: column; align-items: flex-start; gap: 4px; }
  .brand__tag { padding-left: 0; border-left: 0; font-size: .6875rem; }
}

/* ---------- Tipp-Animation (typing.js): Zeichen/Wörter haben ihren Platz schon ---------- */
.chatwin[data-phase]:not([data-phase="done"]) [data-unit="char"] .tk:not(.on) { visibility: hidden; }
[data-unit="word"] .tk { transition: opacity .35s var(--ease); }
.chatwin[data-phase]:not([data-phase="done"]) [data-unit="word"] .tk:not(.on) { opacity: 0; }
.chatwin__draft { display: none; }
.chatwin[data-phase="typing"] .chatwin__draft { display: inline; }
.chatwin[data-phase="typing"] .chatwin__placeholder { display: none; }
.chatwin[data-chat="loop"]:is([data-phase="idle"], [data-phase="typing"], [data-phase="reset"]) .chat__msg { opacity: 0; translate: 0 8px; }
.chatwin:is([data-phase="idle"], [data-phase="typing"], [data-phase="sent"]) .chat__msg--ai { opacity: 0; translate: 0 8px; }
.chatwin[data-phase="thinking"] .chat__dots { display: flex; }
.chat__answer > * + * { margin-top: 10px; }
.chat__steps { margin: 0; padding-left: 1.25em; list-style: decimal; display: grid; gap: 6px; }
.chat__steps em { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--mist); font-size: .75rem; font-style: normal; color: var(--graphite); white-space: nowrap; }
.chat__table { width: 100%; border-collapse: collapse; font-size: .8125rem; line-height: 1.45; }
.chat__table th, .chat__table td { padding: 7px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.chat__table th { font-weight: 600; color: var(--graphite); }
.chat__table td:first-child { color: var(--graphite); }

/* ---------- Was KI für dich tun kann: drei Bereiche als Reiter ---------- */
.uses { display: block; }
.uses__tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto clamp(32px, 4vw, 48px); padding: 5px; border-radius: 999px; background: var(--mist); }
.uses__tabs button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 .9375rem/1 var(--f-display); letter-spacing: -0.01em; color: var(--graphite); transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.uses__tabs button:hover { color: var(--ink); }
.uses__tabs [aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.uses__panel { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.uses__panel:not([hidden]) { animation: fadeIn .4s var(--ease); }
.uses__info { padding-top: 12px; }
.uses__info .h3 { margin: 0 0 10px; }
.uses__info > p { margin: 0 0 22px; color: var(--graphite); }
.uses__list { margin: 0 0 30px; padding: 0; list-style: none; display: grid; gap: 10px; }
.uses__list li { position: relative; padding-left: 22px; }
.uses__list li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.uses__hint { margin: 10px 0 0; font-size: .75rem; color: var(--graphite); }
.chatwin--example .chatwin__log { padding-bottom: 26px; }
.chatwin--example .chat__msg--user { max-width: 100%; }
.chat__prompt { white-space: pre-line; font-size: .875rem !important; line-height: 1.6 !important; }
.slot { padding: 1px 4px; border-radius: 4px; background: #e3e8fc; color: var(--accent-ink); font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.chatwin--example .chat__answer { font-size: .875rem; }
@media (max-width: 900px) {
  .uses__panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .uses__info { padding-top: 0; }
}
@media (max-width: 480px) {
  .uses__tabs { width: 100%; }
  .uses__tabs button { flex: 1; padding: 0 8px; font-size: .875rem; }
}
/* Nummerierte Antworten: eigene Zähler (unabhängig vom Listen-Reset), Nummer erscheint mit ihrer Zeile */
.chat__answer .chat__steps { counter-reset: step; list-style: none; padding-left: 0; }
.chat__steps li { position: relative; padding-left: 1.6em; counter-increment: step; }
.chat__steps li::before { content: counter(step) "."; position: absolute; left: 0; font-weight: 600; color: var(--accent-ink); transition: opacity .35s var(--ease); }
.chatwin[data-phase]:not([data-phase="done"]) .chat__steps li:not(:has(.tk.on))::before { opacity: 0; }
.chat__steps em { margin: 0 6px 0 0; }
/* Schriftzug als Link zur Startseite (Kopf und Footer aller Unterseiten) */
a.wordmark { color: var(--ink); text-decoration: none; }
a.wordmark:hover { color: var(--accent); }
a.wordmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
/* 404-Seite */
.notfound { padding: clamp(64px, 12vw, 160px) 0; }
.notfound .lead { margin: 12px 0 32px; color: var(--graphite); }