/* Public start page: sizes, spacing, breakpoints (721/981 px) and motion 1:1 from public-v1-r17 index.html
   (user decision 27.09.2026); colours, surfaces and buttons from FINAL v18 tokens, light and dark. */
@layer components, layout;
@layer components {
  .home { font-size: 16px; line-height: 1.62; }
  .home :is(h1, h2, h3) { letter-spacing: normal; }
  .home-band { padding-block: 50px; }
  .home-stats, .home-stance { background: var(--surface-muted); box-shadow: 0 0 0 100vmax var(--surface-muted); clip-path: inset(0 -100vmax); }
  .home-doubt { background: var(--band-behind-card); box-shadow: 0 0 0 100vmax var(--band-behind-card); clip-path: inset(0 -100vmax); }
  .home-creed { position: relative; overflow: hidden; background: var(--surface-strong); box-shadow: 0 0 0 100vmax var(--surface-strong); clip-path: inset(0 -100vmax); text-align: center; }
  /* Paket V: colours of the central R4X mark (also for Ready4nexxt). */ .home-wm { color: var(--mark-rx); font-style: normal; }
  .home-wm i { color: var(--mark-four); font-style: normal; }
  /* r17 eyebrow: small gold capitals without the v18 rule. */
  .home .eyebrow { display: block; margin: 0 0 14px; color: var(--accent-text); font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
  .home .eyebrow::before { content: none; }
  .home-divider { position: relative; overflow: hidden; width: 100%; height: 2px; margin: 0; border: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 5%, transparent), var(--gold), color-mix(in srgb, var(--gold) 5%, transparent)); }
  .home-section-title { margin: 0 0 14px; font-size: 24px; font-weight: 600; line-height: 1.28; }

  /* 1 Hero */
  /* Paket BR (Daniel 27.10.2026: „den gesamten Textblock an ‚Hier verstehst du …‘ ein bisschen weiter runter, so dass der
     ‚Mach den Check‘-CTA am unteren Rand des Viewports anfängt zu verschwinden“): the head fills the first screen and its lower
     part stands at its foot, so the lower edge of the window cuts the card of the 3-Fragen-Check and the page shows that more
     follows. Paket BS (Daniel 27.10.2026: „einen halben Zentimeter weiter rauf“): the cut is --s5 + --s1 (28 px) instead of
     --s7 (48 px), the block stands 20 px higher. A head taller than the screen (phones) stays as it is. --home-hero-foot is the
     padding below. Above the head stand the sticky bars (--shell-sticky-height) and the scrolling info bar (.info-bar__inner
     plus its 1px border). */
  .home-hero { --home-hero-foot: 44px; display: flex; flex-direction: column; min-height: calc(100svh - var(--shell-sticky-height) - var(--touch-target) - var(--s1) - 1px - var(--bottom-nav-space, 0px) + var(--s5) + var(--s1) + var(--home-hero-foot)); padding: 38px 0 var(--home-hero-foot); overflow: hidden; text-align: center; }
  .home-hero__below { margin-top: auto; }
  .home-eyebrow-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
  .home .home-eyebrow-row .eyebrow { margin: 0; }
  .home-flags { display: inline-flex; align-items: center; gap: 5px; }
  .home-flags svg { display: block; width: auto; height: 12px; border-radius: 1.5px; box-shadow: 0 0 0 1px var(--border); }
  /* Paket BD _v2 (Daniel 25.10.2026, his own structure): a question to open, the logo again (smaller than up to BB, its
     lettering readable; the light and the dark picture switch in the layout layer like the header logo), heading and two
     sentences, what R4X is not (on phones in two lines, as in BD), one main step for first visitors and, for those who
     doubt, the card of the 3-Fragen-Check. Tokens only. Paket BD _v3 (Daniel 25.10.2026): the answer right under the
     question, then a small but visible gap before the logo („einen kleinen aber visuell wahrnehmbaren Abstand“). */
  .home-hero__hook { max-width: 24ch; margin: var(--s5) auto 0; color: var(--text); font-family: var(--font-beginner); font-size: 1.6rem; font-style: italic; line-height: 1.2; }
  .home-brand { display: block; width: 10.5rem; height: auto; aspect-ratio: 290 / 146; margin: var(--s7) auto var(--s3); object-fit: cover; }
  .home-brand.logo-light { mix-blend-mode: multiply; }
  .home-hero h1 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.32; }
  .home-sub { max-width: 52ch; margin: var(--s2) auto 0; color: var(--text-muted); font-size: 15.5px; }
  .home-hero__line { margin: var(--s4) auto 0; font-size: 1rem; font-weight: 600; }
  .home-hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3); margin: var(--s3) 0 0; padding: 0; list-style: none; font-size: .86rem; font-weight: 600; }
  .home-hero__trust li { display: inline-flex; align-items: center; gap: var(--s2); }
  .home-hero__trust svg { flex: none; color: var(--accent-text); }
  .home-hero__actions { display: grid; justify-items: center; gap: var(--s2); margin-top: var(--s5); }
  .home-hero__note { margin: 0; color: var(--text-muted); font-size: .86rem; }
  /* Paket BC (S1): the free course as a quiet line under the main step. */
  .home-hero__note a { color: var(--accent-text); font-weight: 700; }
  .home-checkcard { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 30rem; margin: var(--s5) auto 0; padding: 18px; border: 1px solid var(--gold-border); border-radius: var(--radius-card); text-align: left;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 7%, transparent), color-mix(in srgb, var(--gold) 2%, transparent)); }
  .home-checkcard p { margin: 0; font-size: 15.5px; font-weight: 600; }
  .home-checkcard small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 13px; font-weight: 400; }
  .home-checkcard .btn { width: 100%; }

  /* Paket BR (Daniel 27.10.2026, Text A): after the questions a new way in, „Jetzt starten“ to the Krypto-Überblick, on the
     stage of the page, centred, with the main step of the head. */
  .home-cta__card { display: grid; justify-items: center; gap: var(--s3); max-width: 41rem; margin: 0 auto; padding: var(--s6) var(--s5); text-align: center; }
  .home-cta__card > * { margin: 0; }
  .home .home-cta__card .eyebrow { margin: 0; }
  .home-cta__card h2 { font-family: var(--font-beginner); font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
  .home-cta__card p:not(.eyebrow) { max-width: 40ch; color: var(--text-muted); }
  .home-cta__card .btn { margin-top: var(--s2); }

  /* 2 Unsicher */
  .home-doubt__box { padding: 26px 8px 30px; border: 1px solid var(--border); border-radius: 16px; text-align: center;
    background: radial-gradient(80% 120% at 4% 0%, var(--gold-soft) 0%, transparent 52%), radial-gradient(80% 120% at 96% 100%, var(--gold-soft) 0%, transparent 52%), var(--surface); }
  /* Paket BD _v3 (Daniel 25.10.2026: „Blende sie erst ein wenn man runterscrollt“): the box waits hidden until it comes into
     view and then rises in once; its questions start with it (home-runtime.mjs). Only the animated path adds is-waiting, and
     the hidden state has no transition, so nothing fades out. Opacity and transform only, no layout shift. */
  .home-doubt__box.is-waiting { opacity: 0; transform: translateY(var(--s6)); }
  .home-doubt__box.is-in { transition: opacity .8s ease, transform 1s cubic-bezier(.16, .84, .34, 1); }
  .home-doubt__box h2 { max-width: 34ch; margin: 0 auto 20px; color: var(--accent-text); font-size: 19px; font-weight: 700; line-height: 1.35; }
  .home-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: repeat(3, auto); align-items: center; justify-items: center; column-gap: 5px; row-gap: 20px; max-width: 880px; margin: 0 auto; }
  .home-stage > img { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / 4; width: min(24vw, 260px); height: auto; animation: home-swim 9s ease-in-out infinite; }
  .home-stage::before { content: ''; position: absolute; top: 50%; left: 50%; z-index: 0; width: min(72vw, 400px); height: min(72vw, 400px); border-radius: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 18%, transparent) 0%, transparent 62%); opacity: 0; transition: opacity 1.4s ease; }
  .is-settled .home-stage::before { opacity: 1; }
  .home-qs { display: contents; }
  /* UI-182 (Paket BG): the smallest size at the v18 floor .66rem (r17 had 10.5 px below 377 px width). */
  .home-q { position: relative; z-index: 2; width: 100%; color: var(--text-muted); font-size: clamp(.66rem, 2.8vw, 15px); line-height: 1.32; hyphens: none; text-wrap: balance;
    --tx: 0px; --ty: 0px; --rot: 0deg; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
  .home-q1 { grid-column: 1; grid-row: 1; text-align: right; --tx: -3px; --ty: -7px; --rot: -.7deg; }
  .home-q3 { grid-column: 1; grid-row: 2; text-align: right; --tx: -11px; --ty: 3px; --rot: .5deg; }
  .home-q5 { grid-column: 1; grid-row: 3; text-align: right; --tx: -1px; --ty: 7px; --rot: -.5deg; }
  .home-q2 { grid-column: 3; grid-row: 1; text-align: left; --tx: 5px; --ty: -10px; --rot: .8deg; }
  .home-q4 { grid-column: 3; grid-row: 2; text-align: left; --tx: 12px; --ty: 1px; --rot: -.6deg; }
  .home-q6 { grid-column: 3; grid-row: 3; text-align: left; --tx: 2px; --ty: 9px; --rot: .6deg; }
  .is-revealed .home-q { opacity: 0; animation: home-q-in .95s cubic-bezier(.16, .84, .34, 1) forwards; }
  .is-revealed .home-q1 { animation-delay: .15s; } .is-revealed .home-q2 { animation-delay: .53s; } .is-revealed .home-q3 { animation-delay: .91s; }
  .is-revealed .home-q4 { animation-delay: 1.29s; } .is-revealed .home-q5 { animation-delay: 1.67s; } .is-revealed .home-q6 { animation-delay: 2.05s; }
  .home-doubt__box .home-divider { max-width: 340px; margin: 22px auto 18px; }
  .is-settled .home-divider::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--surface) 50%, transparent 100%); animation: home-sweep 1.5s ease-out .15s 1; }
  .home-doubt__box h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; }
  .home-doubt__box h3 em { color: var(--accent-text); font-style: normal; }
  .is-shining h3 { animation: home-rise 1.1s cubic-bezier(.16, .84, .34, 1) .3s both; }
  /* Paket AC (Daniel 17.10.2026, entry card A3): the link to Prüfen under the clarity line, on the central stage
     (.r4x-stage). Shield, title and round silver arrow, nothing else. Its place is taken from the start (opacity only, no
     layout shift). Only the animated path (is-shining, home-runtime.mjs) lets it rise with the clarity line and then crosses
     it once with a fine gold sheen, below title and arrow; with reduced motion or without IntersectionObserver it is
     visible at once. Paket BD _v2 (Daniel 25.10.2026: „muss der CTA Situation prüfen sofort einblenden wenn es in den
     Viewport rutscht“): line and card no longer wait for the questions, they rise as soon as the box comes into view. */
  .home-entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); width: min(100%, 32rem); margin: var(--s5) auto 0; padding: var(--s3); text-align: left; text-decoration: none; }
  .home-entry > * { position: relative; z-index: 1; }
  /* Paket AC v2 (Daniel 17.10.2026: square crop looked blurred): the whole picture in its own 16:9 frame, 88 px high on
     wide screens; narrower on phones so the title keeps its room down to 320 px. */
  .home-entry__media { width: clamp(5rem, 50vw - 5rem, 9.75rem); height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--gold-border); border-radius: var(--radius-control); object-fit: cover; }
  .home-entry__title { color: var(--text); font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
  .home-entry__go { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-pill); background: var(--action-free); color: var(--button-text); font-size: 1.25rem; line-height: 1; transition: background-color .22s ease; }
  .home-entry:hover .home-entry__go { background: var(--action-free-hover); }
  .home-entry::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(105deg, transparent 35%, var(--gold-glow) 50%, transparent 65%); transform: translateX(-100%); pointer-events: none; }
  .is-shining .home-entry { animation: home-rise 1.1s cubic-bezier(.16, .84, .34, 1) .45s both; }
  .is-shining .home-entry::after { animation: home-sheen 1.4s ease-in-out 1.7s 1 forwards; }

  /* 2b Beispiel (Paket BD, Daniel 25.10.2026, full version): a Kauf Check result in the order of the check, first the market
     data with their classification, then the buyer's own position by area. A depiction in this page's composition (the public
     site does not load the dashboard's check styles); states in the report's colours (success, info, danger), the
     classification as the check's staged note. Phones get the tiles as rows (label and value in one line, a thin scale
     without marks, the note inline) so no data is dropped (Daniel: „anders kürzen für Mobile und nicht an den Daten“); from
     721 px each tile is its own box with the 0/50/100 marks, three in a row.
     Paket BD _v2 (Daniel 25.10.2026): the bridge is the card's heading, both steps are central accordion lines, closed at
     first; only when open the mark ("Beispielwerte", "Erfundene Antworten") stands at the start of the data. The lighthouse
     lies behind the opened card: faint, from the top on phones and from the right on wider screens, fading out into the
     card (a mask, no second picture); closed, it is not shown. Text in the content keeps the card's colours.
     Paket BD _v3 (Daniel 25.10.2026: „das selbe Einblenden gilt auch für Beispiel · Kauf Check / So kann Klarheit aussehen.“):
     eyebrow, heading, lead and card wait hidden and rise in one after another when the section comes into view. */
  .home-example.is-waiting > * { opacity: 0; transform: translateY(var(--s5)); }
  .home-example.is-in > * { transition: opacity .8s ease, transform 1s cubic-bezier(.16, .84, .34, 1); }
  .home-example.is-in > :nth-child(2) { transition-delay: .12s; }
  .home-example.is-in > :nth-child(3) { transition-delay: .24s; }
  .home-example.is-in > :nth-child(4) { transition-delay: .36s; }
  .home-example__card { position: relative; display: grid; overflow: hidden; isolation: isolate; padding: var(--s5) var(--s4); border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 3px 0 var(--gold); }
  .home-example__card > :not(.home-example__beacon) { position: relative; z-index: 1; }
  .home-example__beacon { position: absolute; inset: 0 0 auto auto; z-index: 0; width: 100%; height: 18rem; object-fit: cover; object-position: 50% 12%; opacity: 0; visibility: hidden; pointer-events: none;
    mask-image: linear-gradient(to bottom, var(--gold) 0%, transparent 70%); transition: opacity .7s ease, visibility .7s; }
  .home-example__card:has(> details[open]) .home-example__beacon { opacity: .14; visibility: visible; }
  html[data-theme='dark'] .home-example__card:has(> details[open]) .home-example__beacon { opacity: .2; }
  .home-example__heading { margin: 0 0 var(--s3); font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
  .home-example__step { display: grid; flex: 1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
  .home-example__title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
  .home-example__card > details > .accordion-content { gap: var(--s4); padding-bottom: var(--s4); color: var(--text); }
  .home-example__marked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
  /* The number sits on the card's own surface, so the lighthouse behind the opened card never shows through it (measured:
     3.97:1 at 320 px light with the translucent gold alone). */
  .home-example__num { display: grid; place-items: center; width: var(--s5); height: var(--s5); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: linear-gradient(var(--gold-soft), var(--gold-soft)), var(--surface); color: var(--accent-text); font-size: .8rem; font-weight: 800; }
  .home-example__tag { padding: var(--s1) var(--s2); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .home-example__intro { color: var(--text-muted); font-size: .86rem; line-height: 1.5; }
  .home-example__tiles { display: grid; gap: var(--s2); }
  .home-example__tile { display: grid; gap: var(--s2); padding-block: var(--s3); border-top: 1px solid var(--border); }
  .home-example__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
  .home-example__label { margin: 0; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .home-example__value { flex: none; margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
  .home-example__gauge, .home-example__track { position: relative; height: var(--s1); margin-block: var(--s2); border-radius: var(--radius-pill); }
  .home-example__gauge { background: linear-gradient(90deg, var(--danger), var(--attention) 50%, var(--success)); }
  .home-example__track { background: var(--border); }
  .home-example__track::before { content: ''; position: absolute; top: calc(-1 * var(--s1)); bottom: calc(-1 * var(--s1)); left: 50%; width: 1px; background: var(--text-muted); }
  .home-example__gauge i, .home-example__track i { position: absolute; top: 50%; width: var(--s3); height: var(--s3); border-radius: var(--radius-pill); transform: translate(-50%, -50%); }
  .home-example__gauge i { left: 55%; border: 2px solid var(--text); background: var(--surface); }
  .home-example__track i { left: 41.3%; background: var(--gold); }
  .home-example__scale { display: none; justify-content: space-between; color: var(--text-muted); font-size: .72rem; }
  .home-example__insight { --tone: var(--info); margin: 0; padding: var(--s2) var(--s3); border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--border)); border-left: 3px solid var(--tone); border-radius: var(--radius-control); background: color-mix(in srgb, var(--tone) 8%, var(--surface)); font-size: .86rem; font-weight: 600; line-height: 1.5; }
  .home-example__insight b { color: var(--tone); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
  .home-example__bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: var(--s2); overflow: hidden; border-radius: var(--radius-pill); }
  .home-example__seg--clear { background: var(--success); }
  .home-example__seg--partial { background: var(--info); }
  .home-example__seg--open { background: var(--danger); }
  .home-example__axes { display: grid; gap: var(--s2); }
  .home-example__axis { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); align-items: start; padding: var(--s2) var(--s3); border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--border)); border-radius: var(--radius-control); }
  .home-example__axis--clear { --tone: var(--success); }
  .home-example__axis--partial { --tone: var(--info); }
  .home-example__axis--open { --tone: var(--danger); }
  .home-example__axis strong { font-size: .92rem; line-height: 1.3; }
  .home-example__status { padding: 2px var(--s2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--tone) 12%, var(--surface)); color: var(--tone); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  .home-example__axis p { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: .86rem; line-height: 1.5; }
  .home-example__note { margin: var(--s4) 0 0; color: var(--text-muted); font-size: .8rem; }
  .home-example__more { margin: var(--s2) 0 0; }
  .home .home-example__more a { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--touch-target); color: var(--accent-text); font-weight: 700; text-decoration: none; }
  .home .home-example__more a:hover { text-decoration: underline; text-underline-offset: var(--s1); }

  /* 3 Haltung */
  .home-creed { padding-block: 56px; }
  .home-creed::before { content: ''; position: absolute; left: 50%; top: -200px; z-index: 0; width: 900px; height: 700px; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--gold) 16%, transparent) 0%, transparent 58%); animation: home-beam 10s ease-in-out infinite; }
  .home-creed > * { position: relative; z-index: 1; }
  /* Paket BD _v2: without the claim (said by the head) and the lighthouse (now behind the example), centred on every width. */
  .home-creed h2 { margin: 0; font-family: var(--font-beginner); font-weight: 400; font-size: 40px; line-height: 1.02; }
  .home-creed h2 i { display: block; color: var(--accent-text); font-style: italic; }
  .home-creed__after { margin: 14px 0 0; font-size: 17px; font-weight: 400; opacity: .85; }
  /* Paket BD _v3 (Daniel 25.10.2026: „bitte animiere Verstehen statt Zocken. Erst Klarheit. Dann Handlung. beim Einblenden“):
     when the section comes into view, „Verstehen“ comes into focus, then „statt Zocken.“, „Erst Klarheit.“ and „Dann
     Handlung.“ rise one after another. Inline-block so the parts can move; the hidden state only on the animated path. */
  .home-creed h2 span, .home-creed__after span { display: inline-block; }
  .home-creed.is-waiting :is(h2 i, h2 span, .home-creed__after span) { opacity: 0; }
  .home-creed.is-in h2 i { animation: home-focus 1.2s cubic-bezier(.16, .84, .34, 1) .1s both; }
  .home-creed.is-in h2 span { animation: home-rise 1s cubic-bezier(.16, .84, .34, 1) .6s both; }
  .home-creed.is-in .home-creed__after span:first-child { animation: home-rise .9s cubic-bezier(.16, .84, .34, 1) 1.2s both; }
  .home-creed.is-in .home-creed__after span:last-child { animation: home-rise .9s cubic-bezier(.16, .84, .34, 1) 1.6s both; }
  .home-creed__grid { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 32px auto 0; text-align: left; }
  .home-creed__item { display: flex; align-items: flex-start; gap: 14px; }
  .home-creed__item svg { flex: none; margin-top: 2px; color: var(--accent-text); opacity: .9; }
  .home-creed__item p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.58; }

  /* 4 Zahlen: tiles with the r17 count-up */
  .home-stats { padding-block: 52px; }
  .home-lead { max-width: 64ch; margin: 0 0 30px; color: var(--text-muted); font-size: 15.5px; }
  .home-stat-grid { display: grid; grid-template-columns: 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--border); }
  .home-stat { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--surface); }
  .home-stat b { flex: none; min-width: 68px; color: var(--accent-text); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
  .home-stat span { display: block; color: var(--text-muted); font-size: 14px; line-height: 1.45; }
  .home-src { margin: 14px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
  .home-src a { color: var(--text); text-underline-offset: 2px; }
  .home-src a:hover { color: var(--accent-text); }

  /* 6 Drei Haltungen ("5 Wie willst du starten" is gone since Paket BD _v2: its check card is in the head, its two ways
     are the main step there and Mein Bereich in the header) */
  .home-stance { padding-block: 54px; }
  .home-frames { display: flex; flex-direction: column; gap: 14px; }
  .home-frame { padding: 24px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: radial-gradient(120% 90% at 0% 0%, var(--gold-soft) 0%, transparent 46%), var(--surface); }
  .home-frame__num { display: block; margin-bottom: 10px; color: var(--accent-text); font-family: var(--font-beginner); font-size: 21px; letter-spacing: .08em; }
  .home-frame h3 { margin: 0 0 9px; font-size: 18px; font-weight: 600; line-height: 1.3; }
  .home-frame p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.58; }
  /* Paket BD: the way to report an error under the third stance. */
  .home-frame .home-frame__more { margin-top: var(--s2); }
  .home .home-frame__more a { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--touch-target); color: var(--accent-text); font-weight: 700; text-decoration: none; }
  .home .home-frame__more a:hover { text-decoration: underline; text-underline-offset: var(--s1); }

  /* 7 Insights: r337 text; the sign-up itself is the footer card below (decision Daniel 12.10.2026, one CTA). */
  .home-insights { text-align: center; }
  .home-insights h2 { margin: 0 0 10px; font-size: 21px; font-weight: 600; }
  .home-insights p:not(.eyebrow) { max-width: 60ch; margin: 0 auto; color: var(--text-muted); font-size: 15.5px; }

  /* 8 Fragen zu R4X (Paket AP, CHG-003, Variante B): a band after "Drei Haltungen" and before "R4X Insights", which stays
     next to its sign-up in the footer (Daniel 21.10.2026). On the page tone, so it does not merge with the filled band
     above. The question rows are the central accordion line variant; phones show intro and questions one below the other. */
  .home-faq { padding-block: var(--s7); }
  .home-faq__inner { display: grid; gap: var(--s5); max-width: 68rem; margin-inline: auto; }
  .home-faq__intro { display: grid; gap: var(--s3); align-content: start; }
  .home-faq__intro > *, .home .home-faq__intro .eyebrow { margin: 0; }
  .home-faq__mark { display: grid; place-items: center; width: var(--s7); height: var(--s7); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--gold-soft); color: var(--accent-text); font-size: 1.25rem; font-weight: 800; }
  .home-faq__intro h2 { font-family: var(--font-beginner); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 600; line-height: 1.08; }
  .home-faq__intro p:not(.eyebrow) { color: var(--text-muted); line-height: 1.6; }
  .home-faq__list .accordion--line:first-child { border-block-start: 1px solid var(--border); }
  .home-faq__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
  .home .home-faq__links a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
  .home .home-faq__links a:hover { text-decoration: underline; text-underline-offset: var(--s1); }

  @keyframes home-swim { 0%, 100% { transform: translateY(-5px) rotate(-1deg); } 50% { transform: translateY(5px) rotate(1deg); } }
  @keyframes home-beam { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
  @keyframes home-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
  @keyframes home-rise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
  @keyframes home-focus { 0% { opacity: 0; filter: blur(var(--s2)); transform: translateY(var(--s2)); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } }
  @keyframes home-sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
  @keyframes home-q-in { 0% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 16px)) scale(.95) rotate(var(--rot)); } 100% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot)); } }

  @media (min-width: 721px) {
    .home { font-size: 16.5px; }
    .home .eyebrow { margin-bottom: 16px; font-size: 13px; }
    .home-section-title { font-size: 30px; }
    .home-lead { margin-bottom: 38px; font-size: 16.5px; }
    .home-hero { --home-hero-foot: 62px; padding: 56px 0 var(--home-hero-foot); }
    .home-hero h1 { font-size: 27px; }
    .home-sub { font-size: 16.5px; }
    .home-doubt { padding-block: 66px; }
    .home-doubt__box { padding: 38px 30px 40px; }
    .home-doubt__box h2 { max-width: 36ch; margin-bottom: 26px; font-size: 25px; }
    .home-doubt__box h3 { font-size: 24px; }
    .home-entry { gap: var(--s4); padding-inline-end: var(--s4); }
    .home-checkcard { flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 26px; }
    .home-checkcard .btn { width: auto; }
    .home-example__card { padding: var(--s6); }
    .home-example__beacon { width: 62%; height: 100%; object-position: 50% 30%; mask-image: linear-gradient(to left, var(--gold) 0%, transparent 95%); }
    .home-example__card:has(> details[open]) .home-example__beacon { opacity: .2; }
    html[data-theme='dark'] .home-example__card:has(> details[open]) .home-example__beacon { opacity: .32; }
    .home-example__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
    .home-example__tile { align-content: start; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
    .home-example__top { display: grid; gap: var(--s2); }
    .home-example__value { font-size: 1.75rem; }
    .home-example__gauge, .home-example__track { height: var(--s2); margin-block: var(--s1); }
    .home-example__gauge i, .home-example__track i { width: var(--s4); height: var(--s4); }
    .home-example__scale { display: flex; }
    .home-example__insight { display: grid; gap: var(--s1); padding: var(--s3); }
    .home-example__axes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-example__axis { grid-template-columns: 1fr; padding: var(--s3); }
    .home-example__status { justify-self: start; }
    .home-stage { column-gap: 18px; row-gap: 32px; }
    .home-q1 { --tx: -6px; --ty: -12px; } .home-q3 { --tx: -20px; --ty: 4px; } .home-q5 { --tx: -2px; --ty: 13px; }
    .home-q2 { --tx: 9px; --ty: -16px; } .home-q4 { --tx: 22px; --ty: 2px; } .home-q6 { --tx: 4px; --ty: 15px; }
    .home-stage > img { width: min(30vw, 240px); }
    .home-creed { padding-block: 78px; }
    .home-creed h2 { font-size: 60px; }
    .home-creed__after { font-size: 21px; }
    .home-creed__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; margin-top: 44px; }
    .home-creed__item p { font-size: 15.5px; }
    .home-stats { padding-block: 70px; }
    .home-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .home-stat { display: block; padding: 26px 20px; }
    .home-stat b { display: block; min-width: 0; margin-bottom: 8px; font-size: 38px; }
    .home-stat span { font-size: 14.5px; }
    .home-stance { padding-block: 74px; }
    .home-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .home-frame { padding: 30px 26px; }
    .home-insights { padding-block: 66px; }
    .home-insights h2 { font-size: 27px; }
    .home-cta__card { padding: var(--s7) var(--s6); }
    .home-cta__card h2 { font-size: 2.4rem; }
  }
  @media (min-width: 981px) {
    /* Paket BD: a little less room above than up to BB and a larger heading; _v2 a larger question, logo and check card.
       _v3: the gap before the logo grows by 24 px, so the head starts 24 px higher (16 px less padding, 8 px less above the
       question): „Mach den Check“ stays where it was in _v2 (Daniel: on Full HD about half visible). */
    .home-hero { --home-hero-foot: var(--s8); padding: var(--s6) 0 var(--home-hero-foot); }
    .home-hero__hook { margin-top: var(--s4); font-size: 2.1rem; }
    .home-brand { width: 12.5rem; }
    .home-hero h1 { font-size: 2.5rem; }
    .home-checkcard { max-width: 41rem; }
    .home-doubt__box { padding: 42px 40px 46px; }
    .home-doubt__box h2 { font-size: 29px; }
    .home-doubt__box h3 { font-size: 27px; }
    .home-stage { min-height: 300px; column-gap: 26px; row-gap: 52px; }
    .home-q1 { --tx: -10px; --ty: -16px; } .home-q3 { --tx: -34px; --ty: 6px; } .home-q5 { --tx: -4px; --ty: 18px; }
    .home-q2 { --tx: 14px; --ty: -22px; } .home-q4 { --tx: 36px; --ty: 3px; } .home-q6 { --tx: 6px; --ty: 20px; }
    .home-stage > img { width: 260px; }
    .home-stage::before { width: 420px; height: 420px; }
    .home-q { max-width: 210px; font-size: 15px; }
    .home-q1, .home-q3, .home-q5 { justify-self: end; }
    .home-q2, .home-q4, .home-q6 { justify-self: start; }
    .home-creed { padding-block: 92px 86px; }
    .home-creed h2 { font-size: 74px; }
    .home-stat-grid { grid-template-columns: repeat(4, 1fr); }
    .home-stat b { font-size: 40px; }
    .home-faq { padding-block: var(--s8); }
    .home-faq__inner { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s8); align-items: start; }
    .home-faq__list .accordion--line:first-child { border-block-start: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .home-creed::before, .home-stage > img { animation: none; }
    .is-revealed .home-q { animation: none; opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
    .is-settled .home-divider::after { display: none; }
    .is-shining h3, .is-shining .home-entry, .is-shining .home-entry::after { animation: none; }
    .home-example__beacon { transition: none; }
    .home-doubt__box.is-in, .home-example.is-in > * { transition: none; }
    .home-creed.is-in :is(h2 i, h2 span, .home-creed__after span) { animation: none; }
  }
}
@layer layout {
  /* The page opens with the hero, as in r17; sections carry their own spacing. */
  .main-content:has(> [data-home]) { padding-block: 0; }
  /* Paket AC: the decided A3 look on the central stage (layout layer, like .r4x-stage): a full gold edge on top and gold
     light below; the frame turns gold on hover and focus. */
  .home-entry.r4x-stage { box-shadow: var(--shadow-elevated), 0 var(--s4) var(--s7) var(--gold-glow); transition: border-color .22s ease; }
  .home-entry.r4x-stage::before { height: 3px; background: var(--gold); }
  .home-entry.r4x-stage:is(:hover, :focus-visible) { border-color: var(--gold); }
}