/* ==========================================================================
   Unterseiten · gemeinsame Bausteine (seit Theme 0.47.0, includes/unterseiten.php)
   Hero, Kapitelkopf, Ergänzungen zu FAQ (11) und Schluss (12). «Nächste Station» seit 0.50.1 entfernt.
   Lädt nach base.css und den Abschnitts-Stilen. Keine Plus-Kreuze (seit 22.09.2026 entfernt).
   ========================================================================== */

.unterseite .chapter { overflow-x: clip; }
.unterseite {
  /* Federkurven als CSS linear() wie 11-faq: lebendig (Nachschwingen) und weich */
  --sub-feder: cubic-bezier(.34, 1.56, .64, 1);
  --sub-feder: linear(0, 0.029, 0.107, 0.218, 0.347, 0.485, 0.621, 0.748, 0.861, 0.956, 1.032, 1.09, 1.13, 1.153, 1.162, 1.161, 1.15, 1.134, 1.113, 1.091, 1.069, 1.047, 1.028, 1.012, 0.998, 0.988, 0.981, 0.977, 0.976, 0.977, 0.979, 0.982, 0.986, 0.99, 0.994, 0.997, 1);
  --sub-weich: cubic-bezier(.16, 1, .3, 1);
}
.sub-sec { padding-block: var(--section-pad); }

/* Erster Bildschirm ohne Aufblitzen: bis die Engine bereit ist, bleiben die Einblendungen des ersten Kapitels verborgen
   (unterseiten.js meldet sie früh an). Lädt die Engine nicht oder spät, erscheinen sie nach 1 s trotzdem
   (seit 0.48.8 statt 3 s: Auf langsamen Handys blieb der erste Bildschirm sonst bis zu drei Sekunden leer). */
html.js-motion:not(.is-ready) #main > .chapter:first-child [data-appear] { opacity: 0; animation: sub-notfall 0s linear 1s forwards; }
@keyframes sub-notfall { to { opacity: 1; } }

/* Auftakt (seit 0.48.20): Die grossen Bildflächen des ersten Bildschirms (Kacheln auf /preise/, Tafeln auf /projekte/)
   blenden per CSS ab dem ersten Bild ein, unabhängig vom Skriptstart. Als Einblendung der Engine (data-appear) blieben
   sie bis zum Start verborgen; ihr Standbild ist aber das grösste Element der Seite (LCP) und zählte deshalb erst nach
   dem Skript (PageSpeed Handy, 03.10.2026: LCP 8,8 s auf /preise/, 7,9 s auf /projekte/). --auftakt-n staffelt,
   --auftakt-weg ist der Weg. Nur «backwards»: Nach dem Ende greift die Animation nicht mehr in opacity und transform ein. */
html.js-motion [data-auftakt] { animation: sub-auftakt .9s var(--sub-weich) var(--auftakt-d, calc(var(--auftakt-n, 0) * .09s)) backwards; }
/* Seit 0.48.21 auch die Texte des ersten Bildschirms (Vorzeile, Titelzeilen, Lead, Knöpfe): Auf /projekte/ ist am Handy
   der Lead das grösste Element und wartete als Einblendung der Engine auf das Skript (LCP 8,0 s nach 0.48.20).
   «zeile» fährt in der Maske hoch (wie data-appear="line"), «blende» blendet nur ein. Verzögerung in --auftakt-d. */
html.js-motion [data-auftakt="zeile"] { animation-name: sub-auftakt-zeile; animation-duration: 1s; }
html.js-motion [data-auftakt="blende"] { animation-name: sub-auftakt-blende; }
@keyframes sub-auftakt { from { opacity: 0; transform: translateY(var(--auftakt-weg, 48px)); } }
@keyframes sub-auftakt-zeile { from { transform: translateY(108%); } }
@keyframes sub-auftakt-blende { from { opacity: 0; } }

/* Schwebender Knopf tritt zurück, solange der Knopf des Hero im Bild ist (unterseiten.js, seit 0.49.0) */
html.sub-cta-im-blick .float-cta > .btn { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s; }

/* ---------- Kapitelkopf ---------- */
.sub-kopf { display: grid; gap: clamp(16px, calc(1.6 * var(--u)), 28px); max-width: 1100px; margin-bottom: clamp(48px, calc(5.2 * var(--u)), 100px); }
.sub-kopf--mitte { justify-items: center; margin-inline: auto; text-align: center; }
.sub-kopf__titel { max-width: 15em; }
.sub-kopf__akzent { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-variation-settings: var(--serif-axes); letter-spacing: -0.015em; color: var(--muted); }
.sub-kopf__lead { max-width: 32em; }

/* ---------- Hero ---------- */
.sub-hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(48px, calc(5 * var(--u)), 88px);
  min-height: min(100svh, 1100px);
  padding: calc(var(--header-h) + clamp(40px, calc(5.5 * var(--u)), 104px)) 0 0;
  background:
    radial-gradient(60% 70% at 86% 6%, color-mix(in srgb, var(--c-forest) 58%, transparent), transparent 70%),
    radial-gradient(36% 40% at 94% 14%, color-mix(in srgb, var(--c-signal) 14%, transparent), transparent 70%),
    var(--c-ink);
}
.sub-hero__raster { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sub-hero__linie {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  transform-origin: 50% 0; animation: sub-linie 1.8s var(--sub-weich) .15s both;
}
@keyframes sub-linie { from { transform: scaleY(0); } }

.sub-hero__inner { display: grid; grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.8fr); gap: var(--gap); align-items: end; }

/* Seit 0.50.4 im Mass der Startseite (dort clamp(40px, 4.7vw, 88px), Gewicht 600): Der Gründer fand die Titel «riesig»
   (vorher clamp(46px, 7.1vw, 136px), Gewicht 700 – 102 statt 68 px bei 1440 px Fensterbreite). */
.sub-hero__titel { font-size: clamp(40px, calc(4.7 * var(--u)), 88px); line-height: 1.02; font-weight: 600; letter-spacing: -0.045em; }
.sub-hero__vor { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(18px, calc(2 * var(--u)), 32px); font-size: clamp(14px, calc(1.05 * var(--u)), 20px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--c-mint); }
.sub-hero__vor .eyebrow__dot { transform: none; }
.sub-hero__akzent-maske { margin-top: .06em; }
.sub-hero__akzent { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-variation-settings: var(--serif-axes); font-size: .8em; line-height: 1.04; letter-spacing: -0.02em; color: var(--c-paper); }
.sub-hero__lead { max-width: 33em; margin-top: clamp(24px, calc(2.4 * var(--u)), 40px); font-size: clamp(16px, calc(1.25 * var(--u)), 20px); line-height: 1.5; color: rgba(242, 244, 238, .78); }
.sub-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(28px, calc(3 * var(--u)), 44px); }
.sub-hero__sprung { color: var(--fg); }
.sub-hero__mikro { margin-top: 18px; font-size: var(--fs-small); letter-spacing: .01em; color: var(--muted); }
.sub-hero__slot { min-width: 0; }

/* ---------- FAQ (11) als Unterseiten-Kapitel ---------- */
.sub-faq .faq-card__btn { white-space: nowrap; }

/* ---------- Schluss (12) mit Zusatzlink ---------- */
.sub-end__link { margin-top: 18px; }
.sub-end__link .link-u { color: var(--fg); }

/* ---------- Handy ---------- */
@media (max-width: 1100px) {
  .sub-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .sub-hero__linie:nth-child(2n+1) { display: none; }
}
@media (max-width: 800px) {
  .sub-hero { min-height: 0; padding-top: calc(var(--header-h) + 36px); gap: 40px; }
  .sub-hero__cta .btn { width: 100%; justify-content: space-between; }
  .sub-hero__linie { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sub-hero__linie { animation: none; }
}