/* SALITA v4 (29.9.2026): Startseite «Wir bauen die KI. Du gibst frei.»
   Ergänzt salita.css (Tokens, Header, Buttons, Kontakt, Footer bleiben dort).
   Regeln: Terra-Farben, Bricolage als einzige Familie, kein Dunkelmodus, kein Tech-Look,
   Bewegung expo.out, nie mehr als eine Bewegung gleichzeitig im Blick. */

.v4 { --expo: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Typo-Grundmuster ---------- */
.v4-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--terra-700); margin-bottom: 18px; }
.v4-eyebrow.on-brand { color: rgba(251, 243, 237, .74); }
.v4-h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 720; letter-spacing: -0.028em; line-height: 1.02; max-width: 18ch; }
.v4-lede { margin-top: 24px; max-width: 54ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-soft); }
.v4-lede.on-brand { color: rgba(251, 243, 237, .84); }

/* ---------- Header über dem Hero: transparent, danach wie gewohnt ---------- */
.v4 .v4-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(251, 244, 241, .97); transition: background-color .35s ease, border-color .35s ease; }
.v4 .v4-head.on-hero { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.v4 .v4-head.on-hero .brand strong,
.v4 .v4-head.on-hero .site-nav a:not(.btn),
.v4 .v4-head.on-hero .nav-toggle { color: var(--paper-w); }
.v4 .v4-head.on-hero .brand-steps span { background: var(--paper-w); }
.v4 .v4-head.on-hero .btn-terra { background: var(--paper-w); color: var(--terra-800); }

/* ---------- 1 · Hero ---------- */
.v4-hero { position: relative; background: var(--terra-800); color: var(--paper-w); }
.v4-hero-stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.v4-stair { position: absolute; inset: 0; }
.v4-stair canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v4-stair-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.v4-stair.is-still .v4-stair-still { opacity: .9; } /* nur ohne WebGL, sonst blitzte das alte Treppenbild beim Laden auf */
.v4-stair.is-live .v4-stair-still { display: none; }
.v4-hero-stage::after { /* Lesbarkeit links, ohne Verlauf über die ganze Fläche */
  content: ""; position: absolute; inset: 0 45% 0 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(94, 35, 19, .55), rgba(94, 35, 19, 0));
}
.v4-hero-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.v4-hero-copy > * { max-width: 34rem; }
.v4-kicker { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 243, 237, .72); margin-bottom: 26px; }
.v4-h1 { font-size: clamp(3rem, 7.4vw, 6.4rem); font-weight: 760; letter-spacing: -0.035em; line-height: .96; max-width: none; }
.v4-h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.v4-h1 .line > span { display: inline-block; }
.v4-h1 .dim { color: rgba(251, 243, 237, .6); }
.v4-hero-sub { margin-top: 30px; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; color: rgba(251, 243, 237, .88); }
.v4-hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.v4-link-light { color: rgba(251, 243, 237, .9); text-decoration: none; border-bottom: 1px solid rgba(251, 243, 237, .4); padding-bottom: 2px; font-size: 16px; }
.v4-link-light:hover { color: var(--paper-w); border-bottom-color: var(--paper-w); }

.v4-step-labels { list-style: none; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.v4-step-labels li {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--paper-w);
  margin: -44px 0 0 -8px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: rgba(69, 26, 12, .5); border: 1px solid rgba(251, 243, 237, .22);
  opacity: 0; transition: opacity .6s var(--expo), margin .6s var(--expo);
}
.v4-step-labels li b { font-weight: 800; margin-right: 6px; opacity: .6; }
.v4-step-labels li.on { opacity: 1; margin-top: -52px; }
.v4-stair:not(.is-live) .v4-step-labels { display: none; }

.v4-scroll-hint { position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 13px; color: rgba(251, 243, 237, .7); display: flex; align-items: center; gap: 10px; }
.v4-scroll-hint span { width: 1px; height: 28px; background: rgba(251, 243, 237, .5); transform-origin: top; animation: v4hint 2.4s var(--expo) infinite; }
@keyframes v4hint { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 899px) {
  .v4-hero-copy { justify-content: flex-start; padding-top: 118px; }
  .v4-hero-stage::after { inset: 0 0 45% 0; background: linear-gradient(180deg, rgba(94, 35, 19, .6), rgba(94, 35, 19, 0)); }
  .v4-hero-sub { font-size: 1rem; }
  .v4-step-labels { display: none; }
  .v4-scroll-hint { display: none; }
}
@media (max-width: 899px) and (max-height: 760px) { .v4-hero-sub { display: none; } }

/* ---------- 2 · Ein Dienstag ---------- */
.v4-day { padding-block: clamp(96px, 12vw, 170px); }
.v4-day-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 110px); }
.v4-day-sticky { position: sticky; top: 120px; }
.v4-clock { margin-top: 38px; font-size: clamp(4.5rem, 10vw, 8.5rem); font-weight: 300; letter-spacing: -0.05em; line-height: .9; color: var(--terra-700); font-variant-numeric: tabular-nums; }
.v4-clock span { display: inline-block; }
.v4-day-note { margin-top: 26px; max-width: 42ch; color: var(--ink-soft); }
.v4-feed { list-style: none; display: grid; gap: 22px; padding-block: 8vh 16vh; }
.v4-card { background: var(--paper-w); border: 1px solid var(--line); border-radius: 18px; padding: 26px 26px 22px; opacity: .35; transform: translateY(24px) scale(.985); transition: opacity .8s var(--expo), transform .8s var(--expo), border-color .8s var(--expo); }
.v4-card.is-on { opacity: 1; transform: none; border-color: #D8C6BD; }
.v4-card-meta { font-size: 13.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 9px; }
.v4-card-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terra-700); }
.v4-card-title { margin-top: 12px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.v4-card-body { margin-top: 14px; font-size: 1rem; color: var(--ink-soft); }
.v4-card-body b { color: var(--ink); font-weight: 600; }
.v4-card-foot { margin-top: 12px; font-size: 13.5px; }
.v4-card-slides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.v4-card-slides span { aspect-ratio: 4 / 5; border-radius: 8px; background: var(--terra-800); color: rgba(251, 243, 237, .8); font-size: 12px; font-weight: 600; display: flex; align-items: flex-end; padding: 8px; }
.v4-card-slides span:nth-child(n+2) { background: var(--terra-100); color: var(--terra-800); }
.v4-approve { margin-top: 18px; display: flex; align-items: center; gap: 14px; min-height: 40px; }
.v4-approve button { font: inherit; font-size: 15px; font-weight: 600; border: 0; border-radius: 999px; padding: 9px 20px; background: var(--terra-700); color: var(--paper-w); cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform .4s var(--expo); }
.v4-approve button:hover { transform: translateY(-2px); }
.v4-approve button > span { position: relative; z-index: 1; }
.v4-card.is-on:not(.is-approved) .v4-approve button { animation: v4pulse 1.8s var(--expo) infinite; }
@keyframes v4pulse { 0% { box-shadow: 0 0 0 0 rgba(148, 65, 35, .45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(148, 65, 35, 0); } }
.v4-approve button::after { content: ""; position: absolute; inset: 0; background: var(--terra-900); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--expo); z-index: 0; }
.v4-approve .done { font-size: 14px; color: var(--terra-700); font-weight: 600; opacity: 0; transform: translateX(-8px); transition: opacity .6s var(--expo) .35s, transform .6s var(--expo) .35s; }
.v4-approve .done::before { content: "✓ "; }
.v4-card.is-approved .v4-approve button::after { transform: scaleX(1); }
.v4-card.is-approved .v4-approve .done { opacity: 1; transform: none; }
.v4-card.is-approved .v4-approve button { pointer-events: none; }
.v4-card-brand { background: var(--terra-800); border-color: var(--terra-800); color: var(--paper-w); }
.v4-card-brand.is-on { border-color: var(--terra-800); }
.v4-card-brand .v4-card-meta { color: rgba(251, 243, 237, .72); }
.v4-card-brand .dot { background: var(--paper-w); }
.v4-card-fine { margin-top: 14px; font-size: 13px; color: rgba(251, 243, 237, .66); }
@media (max-width: 899px) {
  .v4-day-grid { grid-template-columns: 1fr; }
  .v4-day-sticky { position: static; }
  .v4-clock { position: sticky; top: 70px; z-index: 3; margin-top: 28px; font-size: 3.4rem; background: var(--bg); padding-block: 8px; }
  .v4-feed { padding-block: 0; }
}

/* ---------- 3 · Vier Stufen ---------- */
.v4-steps { padding-block: clamp(96px, 12vw, 170px); background: var(--paper-w); border-top: 1px solid var(--line); overflow: hidden; }
.v4-steps-head { margin-bottom: clamp(56px, 7vw, 96px); }
.v4-stair-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; }
.v4-step { display: flex; flex-direction: column; }
/* Höhenstaffel wie im Signet: 7 / 12 / 17 / 22 → Versatz pro Stufe */
.v4-step { padding-bottom: calc((var(--lvl) - 1) * clamp(28px, 4.2vw, 64px)); position: relative; }
.v4-riser { position: absolute; left: 0; right: 0; bottom: 0; height: calc((var(--lvl) - 1) * clamp(28px, 4.2vw, 64px)); background: var(--terra-100); border-radius: 0 0 14px 14px; transform-origin: bottom; }
.v4-step:first-child .v4-riser { display: none; }
.v4-step-card { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 24px; display: flex; flex-direction: column; height: 100%; }
.v4-step-card figure { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; margin-bottom: 20px; background: var(--terra-800); }
.v4-step-card figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--expo); }
.v4-step-card:hover figure img { transform: scale(1); }
.v4-step-card > :not(figure) { padding-inline: 10px; }
.v4-step-no { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--terra-700); }
.v4-step-card h3 { margin-top: 10px; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 700; }
.v4-step-card > p:not(.v4-step-no) { margin-top: 10px; font-size: 1rem; color: var(--ink-soft); }
.v4-step-card ul { margin-top: 16px; list-style: none; display: grid; gap: 6px; font-size: .95rem; }
.v4-step-card ul li { padding-left: 18px; position: relative; }
.v4-step-card ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 5px; background: var(--terra-700); clip-path: polygon(0 100%, 0 60%, 33% 60%, 33% 30%, 66% 30%, 66% 0, 100% 0, 100% 100%); }
.v4-more { margin-top: auto; padding-top: 22px; font-weight: 600; text-decoration: none; }
.v4-step-pick { background: var(--terra-100); border-color: var(--terra-700); }
.v4-step-brand { background: var(--terra-800); border-color: var(--terra-800); color: var(--paper-w); }
.v4-step-brand .v4-step-no, .v4-step-brand .v4-more { color: var(--paper-w); }
.v4-step-brand > p:not(.v4-step-no) { color: rgba(251, 243, 237, .84); }
.v4-step-brand ul li::before { background: var(--paper-w); }
.v4-steps-foot { margin-top: 42px; color: var(--ink-soft); font-size: 1rem; }
@media (max-width: 1100px) { .v4-stair-grid { grid-template-columns: repeat(2, 1fr); } .v4-step { --lvl: 1 !important; } .v4-riser { display: none; } }
@media (max-width: 640px) { .v4-stair-grid { grid-template-columns: 1fr; } }

/* ---------- 4 · Statement: Schrift steigt ---------- */
.v4-climb { position: relative; height: 240vh; background: var(--bg); }
.v4-climb-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.v4-climb-text { width: 100%; padding-inline: clamp(20px, 5vw, 64px); font-size: clamp(2.6rem, 8.6vw, 9rem); line-height: 1.02; letter-spacing: -0.04em; color: var(--terra-800); }
.v4-climb-text span { display: inline-block; font-weight: 200; font-stretch: 75%; font-variation-settings: 'wght' 200, 'wdth' 75; will-change: transform; }

/* ---------- 5 · Lernen / Content ---------- */
.v4-learn { background: var(--terra-800); color: var(--paper-w); padding-top: clamp(96px, 12vw, 170px); padding-bottom: clamp(80px, 10vw, 140px); overflow: hidden; }
.v4-learn-head { margin-bottom: clamp(48px, 6vw, 80px); }
.v4-reel-track { position: relative; }
.v4-reel-rail { display: flex; gap: clamp(14px, 1.6vw, 22px); padding-inline: clamp(20px, 5vw, 64px); width: max-content; will-change: transform; }
.v4-post { flex: none; width: clamp(250px, 24vw, 340px); aspect-ratio: 4 / 5; border-radius: 16px; background: var(--paper-w); color: var(--ink); padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.v4-post .p-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--terra-700); }
.v4-post .p-big { margin-top: auto; font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.v4-post .p-small { margin-top: 14px; font-size: .95rem; color: var(--ink-soft); }
.v4-post-cover { background: var(--terra-950); color: var(--paper-w); }
.v4-post-cover .p-tag { color: rgba(251, 243, 237, .7); }
.v4-post-cover .p-hook { margin-top: auto; font-size: clamp(1.8rem, 2.6vw, 2.35rem); font-weight: 760; line-height: 1.02; letter-spacing: -0.03em; }
.v4-post-cover .p-swipe { margin-top: 20px; font-size: 14px; color: rgba(251, 243, 237, .7); }
.v4-post-cover::before { /* Signet als Bildmarke oben rechts */
  content: ""; position: absolute; top: 22px; right: 22px; width: 30px; height: 30px;
  background: var(--paper-w); clip-path: polygon(0 100%, 0 71%, 21% 71%, 21% 100%, 26% 100%, 26% 50%, 47% 50%, 47% 100%, 53% 100%, 53% 29%, 74% 29%, 74% 100%, 79% 100%, 79% 8%, 100% 8%, 100% 100%);
}
.v4-post-reel { background: var(--terra-900); color: var(--paper-w); aspect-ratio: 9 / 16; width: clamp(200px, 17vw, 250px); align-self: center; }
.v4-post-reel .p-tag { color: rgba(251, 243, 237, .7); }
.v4-post-reel .p-bars { margin-top: auto; display: flex; align-items: center; gap: 4px; height: 44px; }
.v4-post-reel .p-bars i { flex: 1; background: rgba(251, 243, 237, .8); border-radius: 2px; height: 30%; animation: v4bar 1.6s var(--expo) infinite alternate; }
.v4-post-reel .p-bars i:nth-child(3n) { animation-delay: -.4s; } .v4-post-reel .p-bars i:nth-child(3n+1) { animation-delay: -.9s; } .v4-post-reel .p-bars i:nth-child(4n) { animation-delay: -1.3s; }
@keyframes v4bar { from { height: 18%; } to { height: 92%; } }
.v4-post-reel .p-mundart { margin-top: 22px; font-size: 1.35rem; font-weight: 760; line-height: 1.1; min-height: 2.3em; }
.v4-post-reel .p-sub { margin-top: 8px; font-size: .88rem; color: rgba(251, 243, 237, .7); min-height: 2.6em; }
.v4-post-list ol { margin-top: 16px; padding-left: 1.2em; font-size: .98rem; display: grid; gap: 4px; }
.v4-post-list .p-big { margin-top: 18px; }
.v4-post-end { background: var(--terra-100); }
.v4-post-end .p-handle { margin-top: 16px; font-weight: 700; color: var(--terra-700); }
.v4-signup { margin-top: clamp(64px, 8vw, 110px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; padding-top: 44px; border-top: 1px solid rgba(251, 243, 237, .2); }
.v4-signup h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1.12; max-width: 22ch; }
.v4-signup p { margin-top: 12px; color: rgba(251, 243, 237, .8); max-width: 48ch; }
.v4-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.v4-field { flex: 1 1 240px; display: grid; gap: 8px; font-size: 14px; color: rgba(251, 243, 237, .78); }
.v4-field input { font: inherit; font-size: 1.05rem; color: var(--paper-w); background: transparent; border: 0; border-bottom: 2px solid rgba(251, 243, 237, .45); padding: 10px 0; border-radius: 0; }
.v4-field input::placeholder { color: rgba(251, 243, 237, .45); }
.v4-field input:focus { outline: none; border-bottom-color: var(--paper-w); }
@media (max-width: 899px) {
  .v4-reel-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .v4-reel-track::-webkit-scrollbar { display: none; }
  .v4-post { scroll-snap-align: center; width: 76vw; }
  .v4-post-reel { width: 56vw; }
  .v4-signup { grid-template-columns: 1fr; }
}

/* ---------- 6 · Für wen ---------- */
.v4-who { padding-block: clamp(96px, 12vw, 170px); }
.v4-who .v4-h2 { max-width: 22ch; }
.v4-who-grid { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.v4-who-item { border-top: 2px solid var(--ink); padding-top: 22px; }
.v4-who-item .n { font-size: 14px; font-weight: 800; color: var(--terra-700); }
.v4-who-item h3 { margin-top: 12px; font-size: 1.35rem; font-weight: 700; }
.v4-who-item p:last-child { margin-top: 10px; color: var(--ink-soft); font-size: 1.02rem; }
@media (max-width: 899px) { .v4-who-grid { grid-template-columns: 1fr; } }

/* ---------- 7 · Ablauf ---------- */
.v4-how { padding-block: clamp(96px, 12vw, 170px); }
.v4-how-row { list-style: none; margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 2.6vw, 40px); align-items: end; }
.v4-how-bar { display: block; height: calc(var(--h) * 6px); background: var(--terra-800); border-radius: 4px 4px 0 0; margin-bottom: 22px; transform-origin: bottom; }
.v4-how-row li:nth-child(1) .v4-how-bar { background: var(--terra-100); }
.v4-how-row li:nth-child(2) .v4-how-bar { background: #D9A58E; }
.v4-how-row li:nth-child(3) .v4-how-bar { background: var(--terra-700); }
.v4-how-row h3 { font-size: 1.25rem; font-weight: 700; }
.v4-how-row p { margin-top: 8px; color: var(--ink-soft); font-size: 1rem; }
@media (max-width: 899px) { .v4-how-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .v4-how-row { grid-template-columns: 1fr; } .v4-how-bar { height: calc(var(--h) * 3px); } }

/* ---------- 8 · Fragen ---------- */
.v4-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); }
@media (max-width: 899px) { .v4-faq { grid-template-columns: 1fr; } }

/* ---------- 9 · Kontakt, grosse Wortmarke ---------- */
.v4-contact { padding-top: clamp(96px, 12vw, 170px); }
.v4-bigmark { margin-top: clamp(80px, 10vw, 140px); display: flex; align-items: flex-end; gap: clamp(10px, 1.5vw, 24px); color: var(--paper-w); overflow: hidden; }
.v4-bigmark-word { font-size: clamp(4.5rem, 19vw, 17rem); font-weight: 760; letter-spacing: -0.045em; line-height: .78; }
.v4-bigmark-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(4px, .5vw, 8px); align-items: end; width: clamp(60px, 11vw, 170px); height: clamp(52px, 13vw, 190px); padding-bottom: .5vw; }
.v4-bigmark-steps i { background: var(--paper-w); border-radius: 2px; transform-origin: bottom; }
.v4-bigmark-steps i:nth-child(1) { height: 32%; } .v4-bigmark-steps i:nth-child(2) { height: 55%; }
.v4-bigmark-steps i:nth-child(3) { height: 77%; } .v4-bigmark-steps i:nth-child(4) { height: 100%; }
.v4-contact .site-foot { margin-top: 40px; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .v4-card { opacity: 1; transform: none; }
  .v4-card .v4-approve button::after, .v4-card .v4-approve .done { transition: none; }
  .v4-climb { height: auto; }
  .v4-climb-pin { position: static; height: auto; padding-block: 120px; }
  .v4-climb-text span { font-variation-settings: 'wght' 700, 'wdth' 100; font-weight: 700; }
  .v4-post-reel .p-bars i, .v4-scroll-hint span { animation: none; }
}

/* ---------- Zähler Freigaben ---------- */
.v4-tally { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--ink); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.v4-tally span[data-tally] { font-variant-numeric: tabular-nums; color: var(--terra-700); font-size: 1.4em; }
.v4-tally-hint { font-weight: 450; color: var(--ink-soft); font-size: 14px; }

/* ---------- Laufband ---------- */
.v4-marquee { background: var(--terra-900); color: var(--paper-w); padding-block: clamp(28px, 4vw, 48px); overflow: hidden; display: grid; gap: 14px; }
.v4-mq-row { overflow: hidden; }
.v4-mq-inner { display: flex; gap: 14px; width: max-content; will-change: transform; }
.v4-mq-inner span { flex: none; font-size: clamp(1.15rem, 2.1vw, 1.9rem); font-weight: 650; letter-spacing: -0.02em; padding: .45em 1em .5em; border: 1px solid rgba(251, 243, 237, .28); border-radius: 999px; white-space: nowrap; }
.v4-mq-alt .v4-mq-inner span { background: var(--paper-w); color: var(--terra-900); border-color: var(--paper-w); }

/* ---------- Überschriften aus der Maske ---------- */
.v4-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.v4-split .w > i { display: inline-block; font-style: normal; will-change: transform; }

/* ---------- Karten: Neigung und Lichtfleck ---------- */
.v4-step-card { transform-style: preserve-3d; will-change: transform; }
.v4-step-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--expo);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 236, 214, .35), transparent 60%); }
.v4-step-card:hover::after { opacity: 1; }
.v4-post { transition: transform .6s var(--expo); }
@media (hover: hover) { .v4-post:hover { transform: translateY(-8px) rotate(-.6deg); } }

@media (prefers-reduced-motion: reduce) {
  .v4-card .v4-approve button { animation: none !important; }
  .v4-mq-inner { transform: none !important; flex-wrap: wrap; width: auto; }
}
@media (min-width: 1101px) { .v4-step-card { min-height: 600px; } }

/* Ablauf-Treppe (Korrektur 29.9.): Balken stehen auf gemeinsamer Grundlinie,
   Texte beginnen alle auf derselben Höhe darunter. Höhenstaffel 7/12/17/22 wie das Signet. */
.v4-how-row { align-items: start; --u: 7px; }
.v4-how-row li { display: flex; flex-direction: column; }
.v4-how-bar { height: calc(var(--h) * var(--u)); margin-top: calc((22 - var(--h)) * var(--u)); border-radius: 4px 4px 0 0; margin-bottom: 0; }
.v4-how-row h3 { margin-top: 0; padding-top: 22px; border-top: 2px solid var(--terra-800); }
@media (max-width: 520px) { .v4-how-row { --u: 3px; } }

/* Kopier-Kästen der Bibliothek (29.9.): Markenschrift statt Monospace, ruhige Umbrüche */
.copy-box pre { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 1.05rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* ---------- Drei Wege (18.10.2026): Startseite #wege, /selbst-machen/, /machen-lassen/ ----------
   Stufenidee der Marke: Lernen hell, Selbst machen mittel, Machen lassen dunkel (Terra-Töne).
   Nur Tokens aus salita.css. Ganze Fläche klickbar über den Link im Knopf (::after). */
#wege .v4-h2 { max-width: 22ch; }
.v4-ways { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: stretch; }
.v4-way { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); border-radius: 14px; min-height: clamp(380px, 34vw, 470px); transition: transform .5s var(--expo); }
.v4-way-1 { background: var(--terra-100); color: var(--ink); }
.v4-way-2 { background: var(--terra-700); color: var(--paper-w); }
.v4-way-3 { background: var(--terra-900); color: var(--paper-w); }
.v4-way-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.v4-way-num { font-size: clamp(4rem, 6.4vw, 5.5rem); font-weight: 800; line-height: .8; letter-spacing: -0.04em; font-variant-numeric: lining-nums; }
.v4-way-1 .v4-way-num { color: var(--terra-700); }
.v4-way-2 .v4-way-num { color: var(--terra-100); }
.v4-way-3 .v4-way-num { color: rgba(251, 243, 237, .72); }
.v4-way-steps { display: grid; grid-template-columns: repeat(3, 10px); gap: 3px; align-items: end; height: 26px; }
.v4-way-steps i { display: block; border-radius: 2px; background: currentColor; opacity: .22; }
.v4-way-steps i:nth-child(1) { height: 9px; } .v4-way-steps i:nth-child(2) { height: 17px; } .v4-way-steps i:nth-child(3) { height: 26px; }
.v4-way-1 .v4-way-steps i:nth-child(-n+1), .v4-way-2 .v4-way-steps i:nth-child(-n+2), .v4-way-3 .v4-way-steps i { opacity: 1; }
.v4-way h3 { margin-top: clamp(36px, 4.4vw, 60px); font-size: clamp(1.8rem, 2.5vw, 2.3rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.05; }
.v4-way-text { margin-top: 14px; max-width: 34ch; font-size: 1.05rem; line-height: 1.55; }
.v4-way-1 .v4-way-text { color: var(--ink); }
.v4-way-2 .v4-way-text, .v4-way-3 .v4-way-text { color: rgba(251, 243, 237, .92); }
.v4-way-cta { margin-top: auto; padding-top: 36px; }
.v4-way-go { position: static; }
.v4-way-go:hover, .v4-way-go:active { transform: none; }
.v4-way-go::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.v4-way-go:focus-visible { outline: none; }
.v4-way-go:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 4px; }
.v4-way .btn-paper:hover, .v4-offer-main .btn-paper:hover { background: var(--terra-100); color: var(--terra-800); }
@media (hover: hover) {
  .v4-way:hover { transform: translateY(-6px); }
  .v4-way-1:hover .btn-terra { background: var(--terra-800); }
  .v4-way-2:hover .btn-paper, .v4-way-3:hover .btn-paper { background: var(--terra-100); }
}
@media (max-width: 899px) {
  .v4-ways { grid-template-columns: 1fr; }
  .v4-way { min-height: 0; }
  .v4-way h3 { margin-top: 28px; }
}

/* Übersichtsseiten */
.subhero-wide h1 { max-width: 21ch; }
.subhero-wide .lead { max-width: 46ch; }
.v4-offers { display: grid; gap: clamp(14px, 1.6vw, 24px); }
.v4-offers-selbst { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.v4-offers-lassen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v4-offer { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3vw, 40px); border-radius: 14px; background: var(--paper-w); border: 1px solid var(--line); color: var(--ink); transition: transform .5s var(--expo), border-color .3s ease; }
.v4-offers-selbst .v4-offer { grid-column: span 6; }
.v4-offers-selbst .v4-offer-main { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 80px); align-items: end; background: var(--terra-800); border-color: var(--terra-800); color: var(--paper-w); }
.v4-offers-lassen .v4-offer { grid-column: span 2; }
.v4-offers-lassen .v4-offer.wide { grid-column: span 3; background: var(--terra-100); border-color: var(--terra-100); }
.v4-offer-status { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; font-size: 14px; font-weight: 650; line-height: 1.2; background: var(--terra-700); color: var(--paper-w); }
.v4-offer-status.is-wait { background: transparent; color: var(--terra-800); border: 1px solid currentColor; padding: 4px 12px; }
.v4-offer-main .v4-offer-status { background: var(--paper-w); color: var(--terra-800); }
.v4-offer h3 { margin-top: clamp(28px, 3.6vw, 48px); font-size: clamp(1.5rem, 2.1vw, 1.9rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.08; }
.v4-offer-main h3 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); letter-spacing: -0.03em; }
.v4-offer-price { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.v4-offer-main .v4-offer-price { font-size: clamp(2.6rem, 4.6vw, 4rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1; color: var(--paper-w); }
.v4-offer-text { margin-top: 14px; max-width: 46ch; font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); }
.v4-offers-lassen .v4-offer.wide .v4-offer-text { color: var(--ink); }
.v4-offer-main .v4-offer-text { color: rgba(251, 243, 237, .92); font-size: 1.15rem; max-width: 40ch; }
.v4-offer-go { margin-top: auto; padding-top: 32px; }
.v4-offer-go a { position: static; color: inherit; font-weight: 650; font-size: 1.02rem; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.v4-offer-go a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.v4-offer-go a:focus-visible { outline: none; }
.v4-offer-go a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 4px; }
@media (hover: hover) {
  .v4-offer:hover { transform: translateY(-5px); border-color: var(--terra-700); }
  .v4-offer-main:hover { border-color: var(--terra-700); }
  .v4-offer:hover .v4-offer-go a { text-decoration-thickness: 3px; }
}
@media (max-width: 899px) {
  .v4-offers-selbst, .v4-offers-lassen { grid-template-columns: 1fr; }
  .v4-offers-selbst .v4-offer, .v4-offers-selbst .v4-offer-main, .v4-offers-lassen .v4-offer, .v4-offers-lassen .v4-offer.wide { grid-column: auto; grid-row: auto; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .v4-offers-lassen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4-offers-lassen .v4-offer, .v4-offers-lassen .v4-offer.wide { grid-column: auto; }
}
.v4-otherways { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; }
.v4-otherways a { font-weight: 650; }
.v4-how-cta { margin-top: clamp(40px, 5vw, 64px); }
.v4-foot-only { padding-top: clamp(48px, 6vw, 88px); }
.v4-foot-only .site-foot { margin-top: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .v4-way, .v4-offer { transition: none; }
  .v4-way:hover, .v4-offer:hover { transform: none; }
}

/* Aktuelle Seite im Menü (aria-current) */
.site-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--terra-700); }
.v4 .v4-head.on-hero .site-nav a[aria-current] { text-decoration-color: var(--paper-w); }
.site-nav a.btn-terra, .site-nav a.btn-terra:hover { color: var(--paper-w); }
.v4 .v4-head.on-hero .site-nav a.btn-terra { color: var(--terra-800); }
.v4-way-1 .v4-way-steps { color: var(--terra-700); }
.v4-offer-body { display: flex; flex-direction: column; align-items: flex-start; }
.v4-offer-side { display: flex; flex-direction: column; align-items: flex-start; }
.v4-offer-main .v4-offer-side { padding-bottom: 2px; }
.v4-offer-main .v4-offer-go { margin-top: 18px; padding-top: 0; }
.v4-offer-main .v4-offer-price { margin-top: 0; }
@media (max-width: 899px) {
  .v4-offers-selbst .v4-offer-main { display: flex; flex-direction: column; align-items: flex-start; }
  .v4-offer-main .v4-offer-side { margin-top: 24px; }
}
.sec-dark .site-foot a { color: inherit; }