/* ═══════════════════════════════════════════════════════
   Vertikaler Rhythmus

   Alle Sections beziehen ihren Innenabstand aus --pad.
   Vorher clamp(64px,8vw,132px) — bei 1440 px ergab das
   115 px oben plus 115 px unten, also 230 px Leerraum
   zwischen zwei Inhalten. Das bremst den Scroll.

   Eine einzige Variable, kein Eingriff in eine Section.
   ═══════════════════════════════════════════════════════ */

:root{--pad:clamp(42px,4.8vw,76px)}

/* Rechner → Entscheidung: beide Sections liegen auf Sand.
   Ohne Farbwechsel liest sich der Abstand nicht als Trennung,
   sondern als leere Fläche — deshalb hier zusätzlich enger.
   Die weisse Rechnerkarte trennt die beiden ohnehin sichtbar. */
#rechner{padding-bottom:clamp(28px,3vw,46px)}
#report{padding-top:clamp(28px,3vw,46px)}

/* ── Entscheidung: CTA unter die weisse Box ───────── */
/* .report__links fasst Box und CTA zu einer Rasterzelle
   zusammen. Ohne diese Hülle landete der CTA in einer
   zweiten Rasterzeile und damit wieder ganz unten. */
#report .report__links{display:flex;flex-direction:column;align-items:flex-start}
#report .report__inhalt{width:100%}
#report .report__cta{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:16px;margin-top:clamp(20px,2.2vw,28px);
}
#report .report__cta p{max-width:40ch}

/* ═══════════════════════════════════════════════════════
   Eine linke Kante für die ganze Seite

   Vorher liefen fünf verschiedene Bahnen nebeneinander:
   Hero 1020, Wandel 1180, Beispiele 1240, Projekt/Fragen 820
   und der Rest 1200. Weil alle zentriert waren, ergab das bei
   1440 px fünf linke Kanten: 203 · 123 · 93 · 303 · 113.

   Jetzt teilen sich alle dieselbe 1200er Bahn. Die schmaleren
   Zeilenmaße bleiben erhalten — sie werden nur linksbündig
   gesetzt statt zentriert.
   ═══════════════════════════════════════════════════════ */

.hero__in,
#automatisierung .bsp,
#wandel .wd,
#projekt .wrap--narrow,
#fragen .wrap--narrow{
  width:min(1200px,calc(100% - 48px));
  max-width:none;
  margin-inline:auto;
}

/* Zeilenlängen halten, ohne die Kante zu verschieben */
.hero__in > *{max-width:1020px}

/* Ausnahme: Der Fließtext unter der Überschrift behält sein
   eigenes Zeilenmaß aus styles.css (56ch). Ohne diese Zeile
   erbt er die 1020px von oben — beide Regeln sind gleich stark,
   und die spätere gewinnt. Auf breiten Schirmen liefe der Satz
   sonst bis unter das Foto und bräche mit einem Restwort um. */
.hero__in > .hero__promise{max-width:56ch}
#projekt .wrap--narrow > *,
#fragen .wrap--narrow > *{max-width:820px}

@media (max-width:720px){
  .hero__in,
  #automatisierung .bsp,
  #wandel .wd,
  #projekt .wrap--narrow,
  #fragen .wrap--narrow{width:calc(100% - 36px)}
}

/* ── Container 3 ──────────────────────────────────── */
/* Die Häkchenliste teilt sich über CSS-Spalten und würde nach
   Höhe umbrechen — bei diesen Textlängen also nicht 3 zu 3.
   Ein erzwungener Umbruch nach dem dritten Punkt hält die
   Aufteilung, ohne am Aussehen etwas zu ändern. */
.hakenliste__umbruch{break-after:column;-webkit-column-break-after:always}

@media (max-width:640px){
  .hakenliste__umbruch{break-after:auto;-webkit-column-break-after:auto}
}

/* ── CTA-Leiter ───────────────────────────────────── */
/* Nur Textelemente, die es vorher nicht gab. Schriften,
   Farben und Abstände stammen aus den bestehenden Tokens —
   kein neues Muster, keine neue Farbe. */

/* Brückensatz zwischen Schätzung und Buchung */
.result__brueck{
  margin:0 0 16px;font-family:var(--display);font-weight:600;
  font-size:.97rem;line-height:1.45;letter-spacing:-.012em;color:var(--ink);
}

/* Zwischentitel über den drei Punkten im Abschluss */
.start__k{
  margin:26px 0 0;font-family:var(--display);font-weight:600;
  font-size:.94rem;letter-spacing:-.01em;color:rgba(255,255,255,.72);
}
.start__k + .dotlist{margin-top:12px}

/* Das Formular ist der zweite Weg, nicht der erste */
.form__weg{
  margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line);
  font-size:.92rem;line-height:1.5;color:var(--ink2);
}
.form__weg b{color:var(--ink);font-weight:600}

/* Buchungsknopf im Abschluss — der Kalender liegt bei HubSpot,
   deshalb führt hier ein Knopf hin statt einer Einbettung. */
.start__buchen{margin-top:clamp(24px,2.6vw,32px)}
@media (max-width:900px){ .start__buchen{width:100%;justify-content:center} }

/* ── Rechengrundlage unter dem Preisabschnitt ─────────
   Kleiner, zurückgenommener Beleg unter der Häkchenliste.
   Die Seite behauptet Zahlen — hier steht, worauf sie
   beruhen, damit eine Nachfrage nicht ins Leere läuft. */
.grundlage{
  margin:28px 0 0;
  max-width:820px;
  font-size:.86rem;
  line-height:1.6;
  color:var(--ink2, #5b6472);
}

/* ── Kundenleiste: acht Logos statt sechs ─────────────
   Mit SieMatic und LEICHT sind es acht. Bei drei Spalten
   bliebe die letzte Reihe halb leer — vier Spalten ergeben
   zwei volle Reihen. Die Höhen sind je Logo eigen, weil
   gleiche Pixelhöhe bei so verschiedenen Formen ungleich
   aussieht (Systematik aus styles-wandel.css). */
.wd__logos{grid-template-columns:repeat(4,1fr)}
.wd__logo--siematic{--wd-h:16px}
.wd__logo--leicht{--wd-h:13px}

@media (max-width:820px){
  .wd__logos{grid-template-columns:repeat(4,1fr)}
}