/* 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-doubt, .home-stats, .home-stance { background: var(--surface-muted); box-shadow: 0 0 0 100vmax var(--surface-muted); 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; }
  .home-wm { color: var(--accent-text); font-style: normal; }
  .home-wm i { color: var(--text); 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 */
  .home-hero { padding: 38px 0 44px; overflow: hidden; text-align: center; }
  .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); }
  /* The light logo file has a white ground; multiply lets the page canvas show through. */
  .home-brand.logo-light { mix-blend-mode: multiply; }
  .home-brand { width: min(58vw, 200px); height: auto; aspect-ratio: 290 / 146; object-fit: cover; margin: 0 auto 18px; }
  .home-hero h1 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.32; }
  .home-sub { max-width: 52ch; margin: 14px auto 0; color: var(--text-muted); font-size: 15.5px; }

  /* 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); }
  .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; }
  .home-q { position: relative; z-index: 2; width: 100%; color: var(--text-muted); font-size: clamp(10.5px, 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-revealed .home-divider { opacity: 0; }
  .is-settled .home-divider { opacity: 1; transition: opacity .8s ease; }
  .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-revealed h3 { opacity: 0; }
  .is-settled h3 { animation: home-rise 1.1s cubic-bezier(.16, .84, .34, 1) .3s forwards; }

  /* 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; }
  .home-creed__top { display: flex; flex-direction: column; align-items: center; gap: 26px; }
  .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; }
  .home-creed__claim { position: relative; max-width: 27ch; margin: 28px auto 0; padding-top: 26px; font-size: 17.5px; font-weight: 600; line-height: 1.44; }
  .home-creed__claim::before { content: ''; position: absolute; top: 0; left: 50%; width: 110px; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), transparent); }
  .home-beacon { position: relative; order: -1; align-self: center; width: min(70vw, 300px); }
  .home-beacon::before { content: ''; position: absolute; inset: -14%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent) 0%, transparent 66%); animation: home-breathe 8s ease-in-out infinite; }
  .home-beacon img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
  .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); }

  /* 5 Wie willst du starten */
  .home-start { padding-block: 54px; }
  .home-start__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .home-start__head h2 { margin: 0; font-size: 24px; font-weight: 600; }
  .home-start__head .home-divider { display: none; }
  .home-paths { display: flex; flex-direction: column; gap: 12px; }
  .home-path { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); text-decoration: none;
    transition: border-color .22s ease, background-color .22s ease; }
  .home-path:hover { border-color: var(--gold-border); background: var(--surface-muted); }
  .home-path img { flex: none; width: 44px; height: 44px; border-radius: 11px; }
  .home-path__txt { flex: 1; min-width: 0; }
  .home-path__txt b { display: block; margin-bottom: 3px; color: var(--accent-text); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
  .home-path__txt span { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; }
  .home-path__arrow { flex: none; color: var(--accent-text); transition: transform .22s ease; }
  .home-path:hover .home-path__arrow { transform: translateX(4px); }
  .home-checkcard { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 18px 0 0; padding: 18px; border: 1px solid var(--gold-border); border-radius: var(--radius-card);
    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%; }

  /* 6 Drei Haltungen */
  .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; }

  /* 7 Insights */
  .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 22px; color: var(--text-muted); font-size: 15.5px; }

  @keyframes home-swim { 0%, 100% { transform: translateY(-5px) rotate(-1deg); } 50% { transform: translateY(5px) rotate(1deg); } }
  @keyframes home-breathe { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
  @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-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 { padding: 56px 0 62px; }
    .home-brand { width: 240px; }
    .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-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, .home-creed__claim { 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-start { padding-block: 74px; }
    .home-start__head { flex-direction: row; align-items: center; gap: 22px; margin-bottom: 30px; }
    .home-start__head h2 { font-size: 30px; white-space: nowrap; }
    .home-start__head .home-divider { display: block; }
    .home-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .home-path { gap: 18px; padding: 24px 26px; }
    .home-path img { width: 54px; height: 54px; }
    .home-path__txt span { font-size: 20px; }
    .home-checkcard { flex-direction: row; align-items: center; justify-content: space-between; max-width: 660px; margin: 24px auto 0; padding: 20px 26px; }
    .home-checkcard .btn { width: auto; }
    .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; }
  }
  @media (min-width: 981px) {
    .home-hero { padding: 70px 0 76px; }
    .home-brand { width: 290px; }
    .home-hero h1 { font-size: 32px; }
    .home-creed__top { display: grid; grid-template-columns: 1fr .68fr; gap: 52px; align-items: center; text-align: left; }
    .home-beacon { order: 0; align-self: auto; justify-self: center; width: 340px; }
    .home-creed__claim { max-width: 36ch; margin-inline: 0; }
    .home-creed__claim::before { left: 0; transform: none; }
    .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; }
  }
  @media (prefers-reduced-motion: reduce) {
    .home-beacon::before, .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-revealed .home-divider, .is-revealed h3 { opacity: 1; }
    .is-settled .home-divider::after { display: none; }
    .is-settled h3 { animation: none; opacity: 1; }
    .home-path:hover .home-path__arrow { transform: 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; }
}