/* SALITA Design-System — Basis Terra (aus der Vorgänger-Site v3), erweitert um Stufen-Motive.
   Quelle der Gestaltung: Claude-Design «SALITA Landing» vom 13.8.2026.
   Diese Datei gehört Agent A (Seiten-Migration); Agent B erweitert NUR per
   seiteneigenem <style>, nie hier. */

/* ---------- Fonts (lokal, keine externen Requests) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens (identisch mit Terra, Hex aus dem Claude-Design) ---------- */
:root {
  --terra-950: #451A0C;
  --terra-900: #5E2313;
  --terra-800: #7D331B;   /* Markenfläche */
  --terra-700: #944123;   /* Aktion auf hell */
  --terra-100: #F4E4DD;   /* zarte Tönung */
  --bg:        #FBF4F1;   /* warmes Off-White */
  --paper-w:   #FBF3ED;   /* warmes Weiss auf Terra */
  --ink:       #281C18;
  --ink-soft:  #62514B;
  --line:      #E0D5CF;
  --focus:     #0F74C5;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Basis ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Der Kopf ist fixiert, also muss beim Sprung auf einen Anker Platz dafuer
   bleiben — sonst liegt die angesprungene Ueberschrift darunter und der Nutzer
   landet scheinbar mitten im Text. */
:target, section[id] { scroll-margin-top: 96px; }
body {
  font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 1.125rem; line-height: 1.6; font-weight: 410;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
h1, h2, h3 { text-wrap: balance; line-height: 1.1; letter-spacing: -0.02em; }
img { max-width: 100%; display: block; }
a { color: var(--terra-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terra-900); }
::selection { background: var(--terra-700); color: var(--paper-w); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input[type=range] { accent-color: var(--terra-700); }
summary::-webkit-details-marker { display: none; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }

/* ---------- Gestufte Fortschrittsleiste (Ableitung 2 aus dem Branding) ---------- */
.stair-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 10px; z-index: 60;
  display: grid; grid-template-columns: repeat(8, 1fr); align-items: start;
  pointer-events: none;
}
.stair-progress span { background: var(--terra-700); height: 0; transition: height .3s var(--ease); }
.stair-progress span.on:nth-child(1) { height: 3px; }
.stair-progress span.on:nth-child(2) { height: 4px; }
.stair-progress span.on:nth-child(3) { height: 5px; }
.stair-progress span.on:nth-child(4) { height: 6px; }
.stair-progress span.on:nth-child(5) { height: 7px; }
.stair-progress span.on:nth-child(6) { height: 8px; }
.stair-progress span.on:nth-child(7) { height: 9px; }
.stair-progress span.on:nth-child(8) { height: 10px; }

/* ---------- Header mit Wortmarke + Signet ---------- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(251, 244, 241, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 32px; padding-block: 16px; }
.brand { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; }
.brand strong {
  font-size: 21px; font-weight: 720; letter-spacing: -0.01em; line-height: 1;
  color: var(--ink); font-optical-sizing: none; font-variation-settings: 'opsz' 96;
}
.brand-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; align-items: end; height: 7px; }
.brand-steps span { background: var(--terra-700); border-radius: 1px; }
.brand-steps span:nth-child(1) { height: 2px; }
.brand-steps span:nth-child(2) { height: 3.5px; }
.brand-steps span:nth-child(3) { height: 5px; }
.brand-steps span:nth-child(4) { height: 7px; }
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 30px); }
.site-nav a { font-size: 15px; text-decoration: none; color: var(--ink); }
.site-nav a:hover { color: var(--terra-700); }

/* ---------- Shop aus (Umbau 25.9.2026) ----------
   Der Shop (Werkbank, Gratis-Funnel, Danke/Abbruch, Download, Kaufknoepfe) ist
   deaktiviert, siehe docs/STATUS.md. Jedes Shop-Element traegt [data-shop].
   Seit 3.10.26: der Worker haengt bei offenem Shop (live oder Testphase mit
   Geheimlink) die Klasse shop-an an <html>, dann werden die Elemente sichtbar. */
html:not(.shop-an) [data-shop] { display: none !important; }

/* ---------- Mobile-Menue (Umbau 25.9.2026) ----------
   Ohne JavaScript ist .site-nav eine ganz normale, umbrechende Liste in der
   Kopfzeile, nichts haengt an einem Skript. Erst salita.js setzt "js" auf
   <html>, blendet die Liste unterhalb von 900px aus und ersetzt sie durch den
   Menueknopf mit Vollflaechen-Panel. */
.nav-toggle {
  display: none;
  position: relative; z-index: 60; /* ueber dem eigenen Geschwister .site-nav (z-index 55), bleibt bei offenem Menue sicht- und klickbar */
  align-items: center; justify-content: center; gap: 8px;
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 620; color: var(--ink);
  padding: 10px 8px; min-width: 44px; min-height: 44px;
}
.nav-toggle-box { display: flex; flex-direction: column; gap: 4px; width: 20px; flex: none; }
.nav-toggle-box span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
/* Bei offenem Menue liegt der Knopf ueber dem dunklen Panel, nicht mehr ueber
   der hellen Kopfzeile (das Panel deckt deren Hintergrund ab): Farbe wechselt mit. */
.nav-open .nav-toggle { color: var(--paper-w); }
.nav-open .nav-toggle-box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle-box span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
html.nav-open { overflow: hidden; } /* Hintergrund-Scroll gesperrt, solange das Menue offen ist */

@media (max-width: 900px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    /* top/left als feste Laenge statt "inset:0": .site-head ist selbst position:fixed
       und wird in manchen Engines zum Containing Block des verschachtelten fixed-Panels.
       Breite/Hoehe darum explizit in Viewport-Einheiten, damit sie nicht ueber
       top+Hoehe+bottom gegen den (dann falschen) Containing Block aufgeloest wird. */
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    background: var(--terra-900);
    padding: 96px 24px 48px;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
    z-index: 55; margin-left: 0;
  }
  .nav-open .site-nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
  }
  .js .site-nav a { color: var(--paper-w); font-size: 1.35rem; padding: 14px 20px; }
  .js .site-nav a.btn { margin-top: 18px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 0; border-radius: 999px; font-size: 16px; padding: 15px 28px;
  font-family: inherit;
  transition: transform .16s ease-out, background-color .2s ease-out;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-terra { background: var(--terra-700); color: var(--paper-w); }
.btn-terra:hover { background: var(--terra-800); color: var(--paper-w); }
.btn-paper { background: var(--paper-w); color: var(--terra-800); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Sektionen ---------- */
.sec { padding-block: clamp(88px, 11vw, 150px); }
.sec-tint { background: var(--paper-w); border-top: 1px solid var(--line); }
.sec-brand { background: var(--terra-800); color: var(--paper-w); }
.sec-dark { background: var(--terra-900); color: var(--paper-w); }

/* Treppen-Kante zwischen Sektionen (Ableitung 3): unten rechts absteigend */
.stair-edge-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 75% calc(100% - 16px),
    50% calc(100% - 16px), 50% calc(100% - 32px), 25% calc(100% - 32px),
    25% calc(100% - 48px), 0 calc(100% - 48px));
}
.stair-edge-top {
  clip-path: polygon(0 48px, 25% 48px, 25% 32px, 50% 32px, 50% 16px,
    75% 16px, 75% 0, 100% 0, 100% 100%, 0 100%);
}

/* Sektionstitel mit Signet-Marke davor */
.sec-mark { display: flex; align-items: center; gap: 14px; }
.sec-mark svg { flex: none; }
.sec-mark h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; }

/* ---------- Karten und Listen ---------- */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px 30px; }
.card-pick { background: var(--terra-100); border-color: var(--terra-700); }
.card-brand { background: var(--terra-800); border-color: var(--terra-800); color: var(--paper-w); }
.rows { list-style: none; }
.rows li { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }

/* FAQ */
details { border-top: 1px solid var(--line); padding: 22px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-size: 1.15rem; font-weight: 620; letter-spacing: -0.01em; }
summary::after { content: '+'; color: var(--terra-700); font-weight: 500; }
details[open] summary::after { content: '–'; }
details > p { margin-top: 16px; max-width: 62ch; font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); }

/* Formulare (Gratis-Funnel, schlicht) */
.field { display: flex; flex-direction: column; gap: 8px; font-size: 1rem; font-weight: 560; }
.field input[type=text], .field input[type=email] {
  font: inherit; font-weight: 410; padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 16px; /* 16px: kein iOS-Zoom */
}
.field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* Footer */
.site-foot { border-top: 1px solid rgba(251, 243, 237, .18); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; padding-block: 26px; font-size: .92rem; }

/* ---------- Bildplatzhalter (Phase 3 ersetzt durch echte Bilder) ---------- */
.fig-slot { margin: 0; position: relative; border-radius: 15px; overflow: hidden; border: 1px solid var(--line); background: var(--terra-100); }
.fig-slot.on-brand { border-color: transparent; background: var(--terra-950); }
.fig-slot .img-slot {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; font-size: .85rem; line-height: 1.5; font-weight: 550;
  color: var(--ink-soft);
  background: repeating-linear-gradient(135deg, rgba(148, 65, 35, .07) 0 12px, transparent 12px 24px);
}
.fig-slot.on-brand .img-slot { color: rgba(251, 243, 237, .78); background: repeating-linear-gradient(135deg, rgba(251, 243, 237, .09) 0 12px, transparent 12px 24px); }

/* Bildrahmen mit Loop: Standbild liegt unten, Video blendet darueber, sobald
   es laeuft. Gleiches Prinzip wie im Hero (siehe salita.js/videoLoops). */
.fig-slot.has-loop > img,
.fig-slot.has-loop > .fig-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fig-slot.has-loop > .fig-video {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s var(--ease);
}
.fig-slot.has-loop > .fig-video.playing { opacity: 1; }
.r-16-9 { aspect-ratio: 16 / 9; }
.r-4-3 { aspect-ratio: 4 / 3; }
.r-4-5 { aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto 0; }
.r-21-9 { aspect-ratio: 21 / 9; }

/* ---------- Hero (Startseite) ----------
   Das Reel liegt vollflaechig hinter dem Text (wie auf der DUECI-Vorgaengerseite),
   der Satzspiegel bleibt links. Zwei Scrims sichern die Lesbarkeit unabhaengig
   davon, was im Video gerade passiert: ein Verlauf von links und ein leichter
   Schleier ueber die ganze Flaeche. Ohne die waere weisser Text auf fliegendem
   weissem Papier ein Glueckspiel. */
.hero { position: relative; overflow: hidden; padding: clamp(150px, 17vw, 220px) 0 clamp(96px, 11vw, 150px); }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero .wrap > div { max-width: 60ch; }

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media .hero-poster,
.hero-media .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
  display: block;
}
/* Video liegt ueber dem Poster und wird erst sichtbar, wenn es laeuft —
   so gibt es keinen schwarzen Rahmen, falls es nie startet. */
.hero-media .hero-video { opacity: 0; transition: opacity .9s var(--ease); }
.hero-media .hero-video.playing { opacity: 1; }

.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      var(--terra-900) 0%,
      rgba(94, 35, 19, .88) 24%,
      rgba(94, 35, 19, .45) 46%,
      rgba(94, 35, 19, .08) 66%,
      rgba(94, 35, 19, 0) 100%);
  /* 27.9.26: Schleier rechts geoeffnet, damit das Licht auf der Treppe wirkt */
}
@media (max-width: 860px) {
  /* Schmale Bildschirme: Text laeuft ueber die ganze Breite, also braucht es
     einen kraeftigeren, gleichmaessigeren Schleier statt eines Seitenverlaufs. */
  .hero-media::after {
    background: linear-gradient(rgba(94, 35, 19, .86), rgba(94, 35, 19, .78));
  }
  .hero-media .hero-poster, .hero-media .hero-video { object-position: 68% 50%; }
}
.hero-kicker { margin: 0 0 22px; font-size: 15px; font-weight: 500; color: rgba(251, 243, 237, .78); }
.hero h1 { margin: 0; font-size: clamp(2.7rem, 6.6vw, 5rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.0; }
.hero h1 span.dim { color: rgba(251, 243, 237, .62); }
.hero-sub { margin: 30px 0 0; max-width: 52ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: rgba(251, 243, 237, .86); }
.hero-cta-row { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.hero-alt { font-size: 16px; color: rgba(251, 243, 237, .86); text-decoration: none; border-bottom: 1px solid rgba(251, 243, 237, .4); padding-bottom: 2px; }
.hero-alt:hover { color: var(--paper-w); border-bottom-color: var(--paper-w); }
.hero-trust { margin: 34px 0 0; font-size: 14px; line-height: 1.7; color: rgba(251, 243, 237, .68); }

/* ---------- Sektionstitel mit Signet ---------- */
.sec-mark { margin-bottom: 28px; }
.sec-head-row { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: end; justify-content: space-between; margin-bottom: clamp(44px, 5vw, 72px); }
.sec-head-row .sec-mark { margin-bottom: 0; }
.sec-head-row > p { margin: 0; max-width: 46ch; font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); }
.sec-lede { margin: 0 0 clamp(48px, 6vw, 80px); max-width: 56ch; font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); }
.sec-foot { margin-top: clamp(36px, 4vw, 56px); font-size: 1rem; line-height: 1.65; color: var(--ink-soft); max-width: 56ch; }

/* ---------- Problem-Zeilen (Kommt dir bekannt vor) ---------- */
.problem-lines { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(32px, 4vw, 56px); }
.problem-lines p { margin: 0; max-width: 44ch; font-size: clamp(1.25rem, 2.5vw, 1.95rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.problem-lines p em { font-style: normal; color: var(--terra-700); }
.problem-lines p:nth-child(2) { margin-left: clamp(0px, 5vw, 84px); }
.problem-lines p:nth-child(3) { margin-left: clamp(0px, 10vw, 168px); }
.problem-note { margin: clamp(44px, 5vw, 72px) 0 0; margin-left: clamp(0px, 10vw, 168px); max-width: 46ch; font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- Statement-Zeile (Plan/Bau/Betrieb) ---------- */
.statement-band { padding-block: clamp(96px, 12vw, 170px); }
.statement-band .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 72px); align-items: end; }
.statement-band p.big { margin: 0; font-size: clamp(1.8rem, 3.9vw, 3.2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
.statement-band p.small { margin: 0; max-width: 48ch; font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); }

/* ---------- Zwei-Spalten-Layout (Bild + Liste) ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(36px, 4vw, 64px); align-items: start; }

/* ---------- Was Salita macht (vier Leistungen, Startseite) ---------- */
.leistungen-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 2vw, 28px); }
.leistungen-grid li { display: flex; }
.leistungen-grid .card { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.leistungen-grid .card h3 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.leistungen-grid .card-media {
  margin: -28px -24px 0; border-radius: 14px 14px 0 0; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--terra-100);
}
.leistungen-grid .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Vier Stufen (Angebotskarten mit Riser) ---------- */
.stufen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 2vw, 28px); align-items: stretch; }
.stufen li { display: flex; flex-direction: column; }
.stufen [data-riser] { display: block; height: 0; flex: none; }
.stufen .card { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.card svg { flex: none; }
.card h3 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; }
.card .price { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--terra-700); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.card-brand .price { color: var(--paper-w); }
.card .price small { font-size: 0.62em; font-weight: 500; opacity: .72; }
.card p.desc { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.card-pick p.desc { color: var(--terra-950); }
.card-brand p.desc { color: rgba(251, 243, 237, .88); }
.card p.note { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--terra-700); font-weight: 560; }
.card-brand p.note { color: var(--paper-w); }
.card p.meta { margin: auto 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.card-brand p.meta { color: rgba(251, 243, 237, .72); }
.card .more { margin: 0; font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--terra-700); }
.card .more:hover { text-decoration: underline; }

/* ---------- ROI-Rechner ---------- */
.roi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(40px, 5vw, 80px); align-items: start; }
.roi-intro { margin: 0 0 40px; max-width: 46ch; font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); }
.roi-inputs { display: flex; flex-direction: column; gap: 30px; }
.roi-field { display: flex; flex-direction: column; gap: 12px; font-size: 1rem; font-weight: 560; }
.roi-field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.roi-field output { font-size: 1.15rem; font-weight: 700; color: var(--terra-700); font-variant-numeric: tabular-nums; }
.roi-field input[type=range] { width: 100%; height: 22px; margin: 0; cursor: pointer; }
.roi-result { background: var(--terra-800); color: var(--paper-w); border-radius: 15px; padding: clamp(30px, 4vw, 48px); }
.roi-result p { margin: 0; font-size: 1rem; color: rgba(251, 243, 237, .78); }
.roi-result .roi-chf { margin: 14px 0 0; font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 730; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--paper-w); }
.roi-result .roi-hrs { margin: 16px 0 0; font-size: 1rem; line-height: 1.6; color: rgba(251, 243, 237, .78); }
.roi-result .btn { margin-top: 34px; }
.roi-result .roi-note { margin: 26px 0 0; font-size: 0.95rem; line-height: 1.6; color: rgba(251, 243, 237, .72); }

/* ---------- Eine Person. Direkt erreichbar. ---------- */
.solo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(36px, 5vw, 72px); align-items: center; }
.solo-grid > p { margin: 0; max-width: 48ch; font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; margin-top: 44px; }
.trust-grid > div { padding-top: 18px; border-top: 1px solid var(--line); }
.trust-grid p.t-head { margin: 0; font-size: 1.05rem; font-weight: 620; }
.trust-grid p.t-body { margin: 6px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); }

/* ---------- Unterseiten: Subhero ---------- */
.subhero { padding: clamp(140px, 20vh, 220px) 0 clamp(56px, 8vw, 96px); }
.subhero h1 { margin: 0 0 24px; font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 720; letter-spacing: -0.02em; max-width: 16ch; }
.subhero .lead { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.subhero .fig-slot { margin-top: clamp(32px, 5vw, 56px); }

/* ---------- Sektionstitel ohne Signet (Unterseiten) ---------- */
.sec-title { font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 clamp(36px, 5vw, 64px); max-width: 22ch; }

/* ---------- Nummerierte 3er-Schritte (Unterseiten) ---------- */
.num-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); counter-reset: step; }
.num-steps li { padding: 34px clamp(22px, 2.5vw, 36px) 40px; border-right: 1px solid var(--line); counter-increment: step; }
.num-steps li:first-child { padding-left: 0; }
.num-steps li:last-child { border-right: 0; padding-right: 0; }
.num-steps li::before {
  content: counter(step, decimal-leading-zero); display: block; margin-bottom: 20px;
  font-size: 0.95rem; font-weight: 650; color: var(--terra-700); font-variant-numeric: tabular-nums;
}
.num-steps h3 { font-size: 1.3rem; font-weight: 650; margin: 0 0 8px; }
.num-steps p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
@media (max-width: 760px) {
  .num-steps { grid-template-columns: 1fr; }
  .num-steps li { border-right: 0; border-bottom: 1px solid var(--line); padding-inline: 0; }
  .num-steps li:last-child { border-bottom: 0; }
}

/* ---------- Zeilenlisten (Zielgruppe, Ergebnis, Betrieb) ---------- */
.row-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row-list li { border-bottom: 1px solid var(--line); padding-block: clamp(24px, 3.4vw, 34px); }
.row-list p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--ink); max-width: 60ch; }
.row-list .label-strong { font-weight: 650; }

/* ---------- Vorher/Nachher-Beispiele (Prozess-Sprint) ---------- */
.ex-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ex-row { border-bottom: 1px solid var(--line); padding-block: clamp(28px, 4vw, 40px); }
.ex-row h3 { font-size: 1.3rem; font-weight: 650; margin: 0 0 18px; }
.ex-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.ex-cols p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink); max-width: 46ch; }
.ex-label { display: block; font-size: 0.85rem; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; color: var(--terra-700); margin-bottom: 8px; }
@media (max-width: 720px) { .ex-cols { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Warum monatlich kündbar (KI im Betrieb) ---------- */
.commitment p { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--ink); max-width: 60ch; }
.commitment p + p { margin-top: 18px; color: var(--ink-soft); }

/* ---------- Preis-Hinweis (Unterseiten) ---------- */
.price-note p { margin: 0; font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }
.price-note p a { font-weight: 600; }

/* ---------- Pakete (Fertig gebaut) ---------- */
.prod-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.prod-row { border-bottom: 1px solid var(--line); padding-block: clamp(32px, 4.5vw, 52px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) auto; gap: clamp(20px, 3vw, 48px); align-items: start; }
.prod-row h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 680; margin: 0 0 10px; }
.prod-row .desc { margin: 0; color: var(--ink-soft); max-width: 52ch; font-size: 1.05rem; line-height: 1.55; }
.prod-price { margin: 0; font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 720; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.prod-price small { display: block; font-size: 0.55em; font-weight: 500; color: var(--ink-soft); }
.prod-tiers { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.prod-tiers span { font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod-tiers span b { font-weight: 720; }
@media (max-width: 860px) {
  .prod-row { grid-template-columns: 1fr; gap: 16px; }
  .prod-price, .prod-tiers { text-align: left; }
}
.prod-foot { margin: 0; padding-top: 34px; color: var(--ink-soft); max-width: 64ch; font-size: 1rem; line-height: 1.6; }
.prod-foot + .prod-foot { padding-top: 10px; }

/* ---------- Kontakt / Finale ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(40px, 5vw, 72px); align-items: center; }
.contact-grid h2 { margin: 0; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.08; }
.contact-grid p.lead { margin: 26px 0 0; max-width: 50ch; font-size: 1.1rem; line-height: 1.7; color: rgba(251, 243, 237, .86); }
.contact-grid .mailline { margin: 22px 0 0; font-size: 1rem; color: rgba(251, 243, 237, .78); }
.contact-grid .mailline a { color: var(--paper-w); }
.contact-grid .btn { margin-top: 38px; }

/* ---------- Utility ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Scroll-Motion: Text und Inhalte treten beim Erscheinen ein ----------
   Zurueckhaltend bewusst: 18px Weg, ein Hauch Unschaerfe, 620ms. Kein Zoom,
   kein Slide von der Seite, keine Rotation — die Seite soll sich setzen, nicht
   auffuehren. Gestaffelt ueber --i, damit Zeilen einer Gruppe nacheinander
   kommen statt gleichzeitig aufzuploppen. Steuerung: salita.js/scrollMotion(). */
/* Der versteckte Anfangszustand haengt an .motion-ready, das salita.js als
   erstes auf <html> setzt. Ohne JavaScript greift keine dieser Regeln und die
   Seite ist vollstaendig lesbar — Text darf nie an einem Skript haengen. */
.motion-ready [data-motion] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(3px);
  transition:
    opacity .62s var(--ease),
    transform .62s var(--ease),
    filter .62s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion-ready [data-motion].in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Hero: eigene Eintritts-Choreografie beim Laden, nicht scrollgesteuert.
   Kicker, Headline-Zeilen, Lauftext, Buttons, Trust-Zeile nacheinander. */
.motion-ready .hero [data-enter] {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-enter .82s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}
@keyframes hero-enter {
  to { opacity: 1; transform: none; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stair-progress span, .btn { transition: none; }
  .motion-ready [data-motion], .motion-ready .hero [data-enter] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
  .js .site-nav, .nav-toggle-box span { transition: none; }
}

/* ---------- Tippflaechen auf dem Handy (Umbau 25.9.2026) ----------
   Padding statt groesserer Schrift: die Optik bleibt ruhig, die Klickflaeche
   wird trotzdem mindestens 44px hoch. Negative Margin gleicht die zusaetzliche
   Hoehe im Layout wieder aus, damit sich am Abstand zu Nachbarelementen nichts
   sichtbar aendert. */
@media (max-width: 760px) {
  .card .more,
  .contact-grid .mailline a,
  .site-foot .wrap a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 11px;
    margin-block: -11px;
  }
}

/* 18.10.2026: Menü-Knopf überall hell beschriftet (vorher dunkel auf Terra auf Seiten ohne v4.css) */
.site-nav a.btn-terra, .site-nav a.btn-terra:hover { color: var(--paper-w); }