/* ============================================================
   responsive.css — alles unter 1024 px (Story-Poster + Tablet)
   Branch `responsive` (05.09.2026). REGEL: Diese Datei enthält NUR @media-Blöcke
   für Viewports < 1024 px. styles.css / act1.css / js/main.js bleiben der
   unveränderte Desktop-Pfad („Cinema", Querformat ≥ 1024). Beweis: Regressions-Set
   qa-tools/regress_capture.js + regress_compare.py (Pixel-Diff < 0,1 %).

   Drei Stufen:
     Cinema        ≥ 1024 px UND Querformat → WebGL-Karton (unangetastet)
     Story-Tablet  600–1023 px, oder Hochformat → Poster-Story, zweispaltig wo sinnvoll
     Story-Phone   ≤ 599 px → Poster-Story, einspaltig
   Die Story nutzt DIESELBEN DOM-Knoten wie der Karton (Overlays sind im Poster-Modus
   statisch): Hero-Kachel → Pain-Statement → Painpoint-Slider (Band) → Cut-Kachel → Cyan.
   Bens Mobile-Storyboard ersetzt/verfeinert diese Vorgabe; das hier ist der Startpunkt.
   ============================================================ */

/* ---------- Stufe Story (alles < 1024) ---------- */
/* Vol.7 / Walter 09.09.: das iPad Pro funktioniert noch nicht, die Schriften sind zum Teil
   unnoetig klein. Ursache: die Stufen gingen rein nach BREITE. Ein iPad Pro hochkant ist 1024 px
   breit und landete damit im Desktop-Raster mit Desktop-Typo-Minima (H2 bis 90 px), waehrend der
   Karton daneben im Hochformat-Regime lief. Hochformat gehoert bis 1280 px in die Tablet-
   Behandlung, Querformat erst ab 1024 in die Desktop-Behandlung. */
@media (max-width: 1023px), (orientation: portrait) and (max-width: 1280px) {
  :root {
    /* Zweite Typo-Skala: Bens 1920er-System liefert unter 1024 nur seine Desktop-Minima
       (H1 64, H2 50 …) — das ist auf 390 px Plakatgröße. Diese Skala läuft fluid von
       Phone (390) bis Tablet (1023) und trifft dort exakt die Desktop-Minima → kein Sprung
       an der Cinema-Grenze. Ben definiert die finalen Mobile-Werte, das hier ist der Vorschlag. */
    --h1: clamp(38px, 2.2rem + 3.4vw, 64px);
    --h2: clamp(32px, 1.75rem + 2.6vw, 50px);
    --h3: clamp(26px, 1.4rem + 1.6vw, 36px);
    --h4: clamp(24px, 1.35rem + 0.9vw, 30px);
    --h5: clamp(20px, 1.15rem + 0.55vw, 24px);
    --h6: clamp(17px, 1rem + 0.3vw, 19px);
    --p1: clamp(17px, 1rem + 0.2vw, 18px);
    --p2: 16px;
    --wrap-pad: clamp(20px, 5vw, 40px);
  }
  .wrap { padding-inline: var(--wrap-pad); }
  .band { padding-block: clamp(48px, 9vw, 96px); }
  .section-h2 { max-width: none; }

  /* Touch: Ziele ≥ 44 px, kein Hover-Kleben */
  .btn { min-height: 46px; padding: 11px 26px; }
  .site-header .btn--sm { min-height: 40px; }

  /* Header: Burger bis zur Cinema-Grenze (Desktop-Menü mit 6 Punkten + Pille wird ab
     ~1000 px eng; die 767er-Regel aus styles.css gilt hier zusätzlich) */
  /* Vol.7 (Ben 15:47 + 16:14): „wenn du es zumachst, soll die Typo nicht in Y-Hoehe unproportional
     skalieren, sieht scheisse aus. On Click bitte Fullscreen Overlay schwarz, Buttons koennen
     bleiben, alle bitte um 50 % vergroessern."
     Vorher war das Menue ein Panel mit transform: scaleY(0 -> 1) OHNE Gegenskalierung der Kinder —
     genau daher die gequetschte Schrift. Jetzt schwarze Vollflaeche ueber Opacity. */
  .navmenu {
    position: fixed; inset: 0; z-index: 60;
    /* Vol.8 (Ben 02:08): „rechtsbündig auf dieser Kante mit dem gleichen Margin wie das Close-Icon" —
       Kreuz-Außenkante = 16 px Header-Polster + 8 px Knopf-Polster. */
    flex-direction: column; align-items: flex-end; justify-content: center;
    gap: clamp(18px, 3.5vh, 34px);
    background: var(--black); padding: 0 24px 0 0; border-radius: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease-out, visibility 0s linear .28s;
  }
  .mainnav.is-open .navmenu {
    opacity: 1; visibility: visible;
    transition: opacity .28s ease-out, visibility 0s linear 0s;
  }
  .navtoggle { display: grid; gap: 6px; background: none; border: 0; padding: 8px; cursor: pointer; position: relative; z-index: 61; }
  .navtoggle__bar { width: clamp(24px, 6.7vw, 32px); height: 3px; background: #fff; transition: transform .28s ease-out, opacity .2s ease-out; }
  /* Burger wird zum Kreuz, sonst liegt er unsichtbar auf der schwarzen Flaeche */
  .mainnav.is-open .navtoggle__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .mainnav.is-open .navtoggle__bar:nth-child(2) { opacity: 0; }
  .mainnav.is-open .navtoggle__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  /* Eintraege 50 % groesser als die 16 px am Desktop */
  .navmenu a:not(.btn) { font-size: 24px; padding-block: 6px; border-bottom-width: 3px; text-align: right; }

  /* ---------- Story-Poster: Akt 1 als gestaltete Kacheln ---------- */
  .act1--static .act1__stage {
    padding-block: 0;
    background-size: cover; background-position: center top;
  }
  /* Jede Kachel = ein Beat, klar getrennt, mit Luft; die ::after-Verläufe bleiben aus */
  .act1--static .hero-overlay,
  .act1--static .face-overlay,
  .act1--static .band-overlay {
    margin-top: 0; padding: clamp(28px, 6vw, 48px) var(--wrap-pad);
  }

  /* Hero-Kachel: Claim volle Breite, Copy darunter, CTAs voll breit, Stempel klein in der Ecke */
  .act1--static .hero-overlay {
    display: grid; gap: clamp(20px, 5vw, 36px);
    min-height: calc(100svh - var(--header-h));
    align-content: center;
    padding-top: clamp(24px, 5vw, 40px);
    --stamp-w: clamp(72px, 18vw, 110px);
  }
  .act1--static .hero-claim { width: 100%; max-width: 720px; height: auto; margin: 0; }
  .act1--static .hero-bottom { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
  .act1--static .hero-copy { max-width: 640px; }
  .act1--static .hero-copy__badge { font-size: var(--h6); margin-bottom: .6em; }
  .act1--static .hero-copy__h1 { font-size: var(--h2); line-height: 1.04; text-shadow: 0 2px 10px rgba(60,40,20,.3); }
  .act1--static .hero-copy__sub { font-size: var(--p2); margin-bottom: 1.1em; }
  .act1--static .hero-copy__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .act1--static .hero-copy__cta .btn { padding-inline: 14px; }
  .act1--static .hero-stamp { width: var(--stamp-w); align-self: end; justify-self: end; }

  /* Pain- und Cut-Kachel: Kicker + Headline + kleines Icon in einer Zeile, Text darunter */
  /* grid-template-rows: auto — act1.css legt für den Karton die Band-Zeile (50 % − Streifen) an,
     die im Poster als leere Lücke zwischen Headline und Text durchschlug */
  .act1--static .face-overlay { display: grid; grid-template-rows: auto auto; gap: 0; }
  .act1--static .face__top, .act1--static .face__foot { padding: 0; grid-row: auto; align-self: start; }
  .act1--static .face__row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; }
  .act1--static .face__col .band-kicker { margin: 0 0 .5em; }
  .act1--static .face__h { font-size: var(--h2); line-height: 1.02; }
  .act1--static .face__icon { width: clamp(64px, 16vw, 96px); margin: 0; }
  .act1--static .face__foot { margin-top: clamp(18px, 4vw, 28px); }
  .act1--static .face__lead { font-size: var(--h4); line-height: 1.12; }
  .act1--static .face__sub { font-size: var(--p2); }
  .act1--static .face__cta { gap: 10px; }
  .act1--static .face__cta .btn { flex: 1 1 auto; }

  /* Painpoint-Slider: das Paketband als horizontaler Swipe (Scroll-Snap, nativ, kein JS-Scroll-
     Jacking). Karten = die fünf Band-Abschnitte, Icon links, Text rechts wie auf dem Band. */
  .act1--static .band-overlay { padding: clamp(36px, 8vw, 64px) 0 clamp(28px, 6vw, 48px); }
  .act1--static .band-overlay .band-kicker { display: none; }   /* steht schon über dem Pain-Statement */
  .act1--static .pkgband {
    padding: 14px 0 18px;
    background: #262624 url("assets/ben/parcel_tape_background.svg") center / auto 100% repeat-x;
    box-shadow: inset 0 6px 10px -8px rgba(0,0,0,.6), inset 0 -6px 10px -8px rgba(0,0,0,.6);
  }
  .act1--static .pains__track {
    display: flex; grid-template-columns: none; gap: 12px;
    padding: 0 var(--wrap-pad);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .act1--static .pains__track::-webkit-scrollbar { display: none; }
  .act1--static .pains__card {
    flex: 0 0 min(82vw, 420px); scroll-snap-align: center; scroll-snap-stop: always;
    flex-direction: row; align-items: center; gap: 14px;
    padding: 12px 6px; min-width: 0;
  }
  .act1--static .pains__icon { height: 56px; width: auto; flex: none; }
  .act1--static .pains__text { font-size: var(--p2); line-height: 1.35; }
  /* Nav unter dem Band: zurück / weiter / Skip (js/mobile.js bedient den Slider) + Punkte */
  .act1--static .pains__nav {
    display: flex; position: static; opacity: 1; pointer-events: auto;
    justify-content: center; gap: 10px; padding: 16px var(--wrap-pad) 0;
  }
  .act1--static .pains__nav .btn { padding-inline: 18px; }
  .pains__dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 0; }
  .pains__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(38,38,36,.25); transition: background .2s, transform .2s; }
  .pains__dots i.is-on { background: var(--cyan); transform: scale(1.25); }

  /* Cut-Kachel: der letzte Karton-Beat vor dem Cyan — Luft nach unten, dann die Modell-Sektion */
  .act1--static #cut-overlay { padding-bottom: clamp(40px, 10vw, 72px); }

  /* ---------- OnePager < 1024 (Overrides oberhalb der bestehenden ≤900er-Regeln) ---------- */
  /* Modell: Foto im Fluss statt absolut (die ≤900er-Regel aus styles.css, hier bis 1023) */
  .modell { min-height: 0; padding-top: clamp(40px, 8vw, 72px); padding-bottom: calc(10.94vw + 24px); }
  .modell__grid { grid-template-columns: 1fr; row-gap: 20px; }
  .modell__photo { position: static; width: min(100%, 360px); margin: 12px 0 0; }
  .modell__photo img { height: auto; }
  .modell__text { grid-column: 1; }
  .modell__h2 { white-space: normal; }
  .modell__sub { font-size: var(--h4); }        /* war .0354·cw = 12 px auf dem Phone */
  .modell__cols { columns: 1; margin-bottom: clamp(16px, 4vw, 32px); }
  /* Services: Karten einspaltig, mittig; Umsetzung gestapelt (≤900er-Regeln bis 1023 gezogen) */
  .svc-grid { grid-template-columns: 1fr; max-width: 560px; }
  .services .umsetzung { grid-template-columns: 1fr; row-gap: 18px; }
  .services .umsetzung::before { display: none; }
  .umsetzung__lead { grid-column: 1; grid-row: 1; }
  .umsetzung__price { grid-column: 1; grid-row: 2; font-size: var(--h5); }
  .services .umsetzung__text { grid-column: 1; grid-row: 3; }
  .umsetzung__cta { align-self: flex-start; }
  /* Beweis: Zahlen untereinander, volle Breite */
  .bene__stats { gap: clamp(20px, 5vw, 40px); }
  .stat { max-width: none; }
  /* Workflow: zwei Spalten (Tablet), Pfeile aus */
  .wf__grid { grid-template-columns: repeat(2, 1fr); }
  .wf__arrow { display: none; }
  /* Über / FAQ / Footer */
  .ueber__grid { grid-template-columns: 1fr; }
  .ueber__side { max-width: 420px; }
  .faq summary { padding-right: 44px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Stufe Tablet (600–1023) — Vol.7 (Ben 10:15-10:49) ----------
   „Du bist jetzt auf Responsive Stufe zwei, also Tablet. Dann nimm doch bitte auch hier fuer diese
    Elemente die volle Breite. Erstmal, und mach aus dieser Spalte zwei. Dann hast du zwei Punkte
    auf jeweils zwei Spalten, dann nutzt du hier weniger Platz und nutzt die Breite aus."
   Der Block oben zieht die urspruenglich bei 720/900/1099 px greifenden Einspalter bis 1023 hoch —
   deshalb bekam das iPad hochkant (820 px) bisher das Handy-Layout. Hier wird das fuer die Stufe
   Tablet zurueckgenommen, das Handy (unten, ≤599) bleibt einspaltig. */
@media (min-width: 600px) and (max-width: 1023px), (orientation: portrait) and (min-width: 600px) and (max-width: 1280px) {
  /* Leistungskarten: zwei nebeneinander, die dritte darunter mittig */
  /* Vol.8 (Ben 07:55): drei Karten im Zweispalter ließen die Account-Diagnose allein unten links —
     „einspaltig bleiben". */
  .svc-grid { grid-template-columns: 1fr; max-width: 640px; }
  /* Umsetzung: Kopf und Preis nebeneinander, Text darunter ueber die volle Breite */
  .services .umsetzung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 40px); }
  .umsetzung__lead { grid-column: 1; grid-row: 1; }
  .umsetzung__price { grid-column: 2; grid-row: 1; align-self: end; }
  .services .umsetzung__text { grid-column: 1 / -1; grid-row: 2; border-left: 0; padding-left: 0; }
  /* Beweis: drei Zahlen nebeneinander, dafuer ist die Breite da */
  .bene__stats { flex-wrap: nowrap; gap: clamp(16px, 3vw, 32px); }
  /* Ueber: Text und Foto nebeneinander */
  .ueber__grid { grid-template-columns: 1.25fr .75fr; }
  .ueber__side { max-width: none; }
  /* v21.5: Etikett-Steckbrief hier einspaltig (Label ueber dem Wert) — die rechte Spalte ist
     in dieser Stufe am schmalsten, zweispaltig brachen zwei der vier Werte um. */
  .idlabel__specs { grid-template-columns: 1fr; gap: 1px 0; }
  .idlabel__specs dt { margin-top: 7px; }
  .idlabel__specs dt:first-of-type { margin-top: 0; }
  /* Modell: Foto neben den Text */
  .modell__grid { grid-template-columns: 1.1fr .9fr; column-gap: clamp(20px, 3vw, 40px); }
  .modell__text { grid-column: 1; }
  .modell__cols { columns: 2; column-gap: clamp(18px, 2.4vw, 32px); }
  /* Footer: zurueck auf zwei Spalten */
  .site-footer__grid { grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 48px); }
  /* Vol.7 / Walter 09.09.: „die komplette rechte Seite ist ungenutzt." Das Raster hat hier zwei
     Spalten, aber die Handy-Regel oben zwingt den Text mit grid-column: 1 in die erste — Spalte
     zwei blieb leer und die Sektion nutzte nur 53 % der Breite (Desktop: 88 %). Text gehoert wie
     am Desktop in Spalte zwei, das Foto behaelt Spalte eins und darf mitwachsen. */
  .modell__text { grid-column: 2; }
  .modell__photo { width: min(100%, 460px); }
  .modell__cols { columns: 1; }
  /* Vol.7 / Walter 09.09.: „Outcome ist beim iPad nicht zentriert, das ist linksbuendig."
     Am Desktop steht der Befund-Stapel links im Fluss und der Text daneben — auf dem Tablet gibt
     es dieses Nebeneinander nicht, der Stapel klebt dann allein am linken Rand. Auf dieser Stufe
     ruecken Stapel und Text deshalb in die Mitte. */
  #outcome .befundstapel { justify-items: center; text-align: center; }
  #outcome .befundstapel__stack { margin-inline: auto; width: min(420px, 62vw); }
  #outcome .befundstapel__caption { max-width: 46ch; margin-inline: auto; }
  #outcome .ix, #outcome .section-h2 { text-align: center; }
  #outcome .btn { display: inline-flex; }
  #outcome > .wrap { text-align: center; }
}

/* ---------- Uebergang 1024–1099 (Vol.7, Ben 10:25 „nutzt die Breite aus") ----------
   styles.css:516 macht die Leistungskarten bis 1099 px einspaltig mit 560 px Deckel — eine alte
   Regel aus der Zeit vor den Stufen. Dadurch sprangen die Karten bei 1024 von zwei Spalten
   (Tablet) zurueck auf eine, obwohl MEHR Platz da ist. Hier zweispaltig, ab 1100 greift das
   Desktop-Raster mit drei Spalten. */
@media (min-width: 1024px) and (max-width: 1099px) and (orientation: landscape) {
  /* Vol.8 (Ben 07:55): drei Karten im Zweispalter ließen die Account-Diagnose allein unten links —
     „einspaltig bleiben". */
  .svc-grid { grid-template-columns: 1fr; max-width: 640px; }
}

/* ---------- Stufe Phone (≤ 599) — Verfeinerungen ---------- */
@media (max-width: 599px) {
  .act1--static .hero-copy__cta { grid-template-columns: 1fr; }
  .act1--static .hero-bottom { grid-template-columns: 1fr; }
  .act1--static .hero-stamp { justify-self: end; margin-top: -8px; }
  .act1--static .face__row { grid-template-columns: 1fr auto; }
  .act1--static .pains__card { flex-basis: 84vw; }
  .wf__grid { grid-template-columns: 1fr; }
  .site-footer__col--right { grid-template-columns: repeat(2, max-content); gap: 0 clamp(32px, 10vw, 64px); }
  .modal__card { padding: 22px 16px; }
  .popover { width: min(320px, 88vw); }
}

/* ============================================================
   HOCHFORMAT-KARTON (WebGL läuft, html[data-aspect="portrait"], gesetzt von js/main.js)
   Der Karton ist im Hochformat ein hochkantiges Paket (js/main.js: BOX.d = BOX.h = w × Seiten-
   verhältnis) — Deckel und Front haben das Format des Bildschirms und FÜLLEN ihn wie am Desktop.
   Deshalb gelten die Desktop-Overlay-Layouts (inset 0, Band bei 50 %) unverändert; hier nur die
   Hochformat-Verteilung (Claim oben, Copy unten, kleinere Typo/Icons/Stempel) und die Zoom-
   Kopplung. Walter 05.09.: „die Seite muss AUF dem Karton sein" — Poster nur noch Fallback.
   ============================================================ */
/* Header-Logo im Hochformat kleiner (Walter 05.09.: „viel zu groß") */
@media (max-width: 1023px), (orientation: portrait) and (max-width: 1280px) {
  /* Vol.8 (Ben 00:23): Logo „viel kleiner als im PDF", Burger-Striche länger. Aus dem PDF: Logo 37 %
     der Bildbreite (139 px bei 375), Striche 25 px = 6,7 %. Vorher fest 116 px / 26 px. */
  .brandlogo { width: clamp(120px, 37vw, 180px); height: auto; }
  .site-header__inner { padding: 12px 16px; }
  .btn { font-weight: 900; }   /* Vol.8 (Ben 01:52): „alle Buttons global … den Heavy-Schnitt nehmen" */
}
/* Hero auf dem Deckel: Claim oben über die volle Breite (gedruckt), Copy + CTAs im unteren Drittel,
   Stempel klein rechts unter den Buttons (gedruckt). Alles liegt auf dem Karton. */
.js:not(.no-motion)[data-aspect="portrait"] .hero-overlay {
  display: grid; grid-template-rows: auto 1fr auto; gap: 0;
  padding: calc(var(--header-h) + clamp(16px, 3vh, 32px)) var(--wrap-pad, 20px) clamp(20px, 4vh, 40px);
  --stamp-w: clamp(64px, 17vw, 96px);
}
.js:not(.no-motion)[data-aspect="portrait"] .hero-shade { height: 58%; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-claim { grid-row: 1; width: 100%; max-width: none; height: auto; margin: 0; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-bottom {
  grid-row: 3; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px;
}
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy { max-width: none; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-stamp { width: var(--stamp-w); align-self: end; }
/* Vol.7 / Walter 09.09.: „in der iPad-Ansicht ist alles unnoetig klein, wir haben Platz ohne
   Ende." Gemessen: Kicker 14 px und Fliesstext 15 px standen FEST — auf jedem Geraet gleich,
   von 390 bis 1280 px Breite. Auf dem Handy stimmt das, auf 1024 px ist es verloren.
   Beide wachsen jetzt mit der Bildbreite (390: 14/15 · 820: 16/17 · 1024: 19/21). */
/* Vol.8 (11.09.): Werte aus Bens 14_AM-PDF gemessen (qa-tools/pdf_spec.py, Artboard 375 px): Badge 18 px
   Black, H1 34 px Black, Sub 14 px SemiBold, Knöpfe 16 px Black UNTEREINANDER. Als Anteil der Bildbreite
   fließend, Deckel bei Tablet-Breite. Vorher: 14 / 28 / 15 / 17 px, Knöpfe nebeneinander (das
   display:grid dieser Zeile hatte die Vol.7-Stapelregel weiter unten ausgehebelt). */
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy__badge { font-size: clamp(16px, 4.8vw, 22px); font-weight: 900; margin-bottom: .45em; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy__h1 { font-size: clamp(30px, 9vw, 50px); line-height: 1.04; margin-bottom: .45em; text-shadow: 0 2px 10px rgba(60,40,20,.3); }
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy__sub { font-size: clamp(14px, 3.75vw, 19px); line-height: 1.45; margin-bottom: .9em; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy__cta .btn { padding-inline: 22px; font-size: clamp(15px, 4.27vw, 18px); }
/* Vol.8: Im PDF läuft die Copy über die volle Breite (79 %), nur die gestapelten Knöpfe teilen sich die
   Zeile mit dem Stempel rechts. Vorher stand der Stempel als eigene Spalte neben dem GANZEN Textblock
   (Copy nur 69 % breit, H1 fünfzeilig). Jetzt: Copy über beide Spalten, Stempel in derselben Zeile
   unten rechts — er ist so hoch wie die zwei Knöpfe, überdeckt also keinen Text. Silbentrennung wie
   im PDF („Nie-mand"), damit die H1 dreizeilig bleibt. Bei Bens Artboard-Höhe (666 px) fiel der zweite
   Knopf unter die Kante — ab 720 px Höhe abwärts eine Stufe kleiner. */
.js:not(.no-motion)[data-aspect="portrait"] .hero-bottom { grid-template-columns: 1fr auto; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy { grid-column: 1 / -1; grid-row: 1; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-stamp { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy__h1,
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy__badge { hyphens: auto; -webkit-hyphens: auto; }
@media (orientation: portrait) and (max-height: 720px) {
  .js:not(.no-motion)[data-aspect="portrait"] .hero-overlay { padding-top: calc(var(--header-h) + 10px); }
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy__badge { font-size: clamp(14px, 4.2vw, 18px); margin-bottom: .3em; }
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy__h1 { font-size: clamp(26px, 8vw, 40px); margin-bottom: .35em; }
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy__sub { font-size: clamp(13px, 3.5vw, 16px); line-height: 1.4; margin-bottom: .7em; }
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy__cta { gap: 6px; }
}

/* Text-Flächen (Pain/Cut) auf der Front: Desktop-Grid gilt (Band bei 50 %), nur Paddings/Typo für
   das Hochformat — oberer Block über dem Band, unterer darunter, alles auf dem Karton. */
/* Vol.8 (Ben 03:13–03:43, 05:22): „Richte dich genau nach dem Layout … Paddings von Sektion zu Sektion
   immer gleich und weniger … Icon soll überhalb der Headline sitzen." Aus dem PDF (375): Icon 25 % der
   Breite oben, dann Kicker 18 px, Headline 34 px, Lead 24 px, Copy 14 px, Knöpfe 16 px nebeneinander
   unten; ein Abstandsmaß zwischen allen Blöcken. Vorher: Icon rechts neben der Headline, Knöpfe gestapelt. */
/* Höhen-Deckel in svh (kleiner Viewport = Safari-Leiste sichtbar): auf 390×664 passt die Fläche sonst
   nicht bis zu den Knöpfen (Leisten-Emulation: Knopfzeile endete bei 685 statt ≤ 664). svh bleibt beim
   Einziehen der Leiste konstant, die Typo springt also nicht während der Leisten-Animation. */
.js:not(.no-motion)[data-aspect="portrait"] .face-overlay { --face-gap: clamp(10px, 1.8svh, 20px); }
.js:not(.no-motion)[data-aspect="portrait"] .face__top { padding: calc(var(--header-h) + clamp(10px, 2.2svh, 40px)) var(--wrap-pad, 20px) var(--face-gap); }
.js:not(.no-motion)[data-aspect="portrait"] .face__row { flex-direction: column; align-items: flex-start; gap: var(--face-gap); }
.js:not(.no-motion)[data-aspect="portrait"] .face__col .band-kicker { font-size: min(clamp(16px, 4.8vw, 24px), 2.7svh); margin-bottom: .35em; }
.js:not(.no-motion)[data-aspect="portrait"] .face__h { font-size: min(clamp(30px, 9vw, 50px), 5.2svh); line-height: 1.0; }
.js:not(.no-motion)[data-aspect="portrait"] .face__icon { order: -1; width: min(clamp(80px, 25vw, 130px), 15svh); align-self: flex-start; }
.js:not(.no-motion)[data-aspect="portrait"] .face__foot { padding: var(--face-gap) var(--wrap-pad, 20px) 0; }
.js:not(.no-motion)[data-aspect="portrait"] .face__lead { font-size: min(clamp(22px, 6.4vw, 32px), 3.7svh); line-height: 1.08; margin-bottom: var(--face-gap); }
.js:not(.no-motion)[data-aspect="portrait"] .face__sub { font-size: min(clamp(14px, 3.75vw, 18px), 2.2svh); line-height: 1.45; margin-bottom: var(--face-gap); }
.js:not(.no-motion)[data-aspect="portrait"] .face__cta { flex-wrap: nowrap; gap: 10px; }
.js:not(.no-motion)[data-aspect="portrait"] .face__cta .btn { flex: 0 0 auto; font-size: clamp(15px, 4.27vw, 18px); }
.js:not(.no-motion)[data-aspect="portrait"] .pains__text { font-weight: 900; }   /* Vol.8: Bandtext Black wie im PDF */

/* Paketband: Zoom-Inhalt an Zmax gekoppelt (js/main.js setzt --kfs/--kic: Text 17 px, Icon 48 px
   bei voller Vergrößerung — Desktop-Faktor 0,72 wäre hier Plakatschrift) */
.js:not(.no-motion)[data-aspect="portrait"] .pkgband .pains__card { gap: calc(var(--gap0, 8px) * var(--Z, 1) * var(--kfs, .2)); }
.js:not(.no-motion)[data-aspect="portrait"] .pkgband .pains__icon { height: calc(var(--strip-h, 40px) * .75 * var(--Z, 1) * var(--kic, .3)); }
.js:not(.no-motion)[data-aspect="portrait"] .pkgband .pains__text { font-size: calc(var(--fs0, 14px) * var(--Z, 1) * var(--kfs, .18)); line-height: 1.3; }
.js:not(.no-motion)[data-aspect="portrait"] .pkgband.is-measure .pains__card { gap: clamp(6px, .6vw, 12px); }
.js:not(.no-motion)[data-aspect="portrait"] .pkgband.is-measure .pains__icon { height: calc(var(--strip-h, 40px) * .75); }
.js:not(.no-motion)[data-aspect="portrait"] .pkgband.is-measure .pains__text { font-size: clamp(11px, .85vw, 14px); width: auto; }
.js:not(.no-motion)[data-aspect="portrait"] .band-shade { width: 8%; }
.js:not(.no-motion)[data-aspect="portrait"] .pains__nav { bottom: clamp(18px, 4vh, 40px); gap: 10px; }
.js:not(.no-motion)[data-aspect="portrait"] .pains__nav .btn { padding-inline: 18px; }

/* Hover nur, wo es Hover gibt — auf Touch kein klebender Zustand nach dem Tap */
@media (hover: none) {
  .brandmark:hover .brandlogo__smile { transform: none; }
  .befundstapel__stack:hover img { box-shadow: 0 16px 34px rgba(16,16,16,.22); }
}

/* ============================================================
   HOCHFORMAT: senkrechtes Paketband (Vol.7 / Bens Screendesign 14_AM)
   ============================================================
   Ben liefert fuers Handy ein um 90 Grad gedrehtes Akt 1: das Band laeuft senkrecht am rechten
   Rand, die Painpoint-Karten stehen aufrecht darauf gestapelt (Icon oben, Text darunter), links
   daneben bleibt die Kartonflaeche mit Kicker, Headline, Copy und Knoepfen.
   Gemessen aus seinem PDF: Bandbreite 18,8 % der Bildbreite, rechte Kante bei 90,4 %; im Zoom
   fuellt das Band 67,7 % der Breite, mittig.
   js/main.js liefert dazu --seam-x (Bildschirm-x der Nahtmitte) und --strip-h (Bandbreite quer),
   beide folgen der Kamera. Der Selektor traegt zusaetzlich .vcut, damit ?vcut=0 auf das alte
   Querband zurueckfaellt. */
.js:not(.no-motion)[data-aspect="portrait"].vcut .pkgband {
  top: 0; height: 100%; right: auto;
  left: calc(var(--seam-x, 74%) - var(--strip-h, 60px) * var(--Z, 1) / 2);
  width: calc(var(--strip-h, 60px) * var(--Z, 1));
}
/* Karten untereinander statt nebeneinander */
.js:not(.no-motion)[data-aspect="portrait"].vcut .pains__track {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 1fr);
  padding: clamp(20px, 4vh, 48px) 0;
  gap: clamp(12px, 2vh, 32px);
}
/* Karte: Icon oben, Text darunter, zentriert — Bens Layout */
.js:not(.no-motion)[data-aspect="portrait"].vcut .pains__card {
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; width: 100%;
  /* min-height 0 ist Pflicht: ohne sie waechst eine Grid-Zeile ueber ihr 1fr hinaus, sobald der
     Karteninhalt hoeher ist. Der Track lief dadurch ueber die Bandhoehe hinaus und die fuenfte
     Station landete AUSSERHALB des Kartons (gemessen: Welt-z 4,18 bei halber Boxhoehe 3,25) —
     die Kamera schaute an der Kiste vorbei. */
  height: 100%; min-height: 0; overflow: hidden;
}
.js:not(.no-motion)[data-aspect="portrait"].vcut .pains__text { text-align: center; }
/* Zoom-Layout: JS setzt --cy je Karte, die Naht liegt bei 50 % der Bandspalte */
.js:not(.no-motion)[data-aspect="portrait"].vcut .pkgband.is-abs .pains__card {
  position: absolute; left: 50%; top: var(--cy, 50%);
  transform: translate(-50%, -50%); height: auto; width: 100%;
}
/* Verlaeufe kippen mit: statt links und rechts jetzt oben und unten */
.js:not(.no-motion)[data-aspect="portrait"].vcut .band-shade {
  width: 100%; height: 14%; left: 0; right: auto; top: auto;
}
.js:not(.no-motion)[data-aspect="portrait"].vcut .band-shade--l {
  top: 0; background: linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,0));
}
.js:not(.no-motion)[data-aspect="portrait"].vcut .band-shade--r {
  bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,.66), rgba(0,0,0,0));
}
/* Kartonflaeche links neben dem Band: Text bekommt die Restbreite */
.js:not(.no-motion)[data-aspect="portrait"].vcut .face__top,
.js:not(.no-motion)[data-aspect="portrait"].vcut .face__foot {
  padding-right: calc(100% - var(--seam-x, 74%) + var(--strip-h, 60px));
}

/* Vol.7 (Ben 12:26 + 12:48) + Screendesign Seite 1 — Hero im Hochformat
   „Nutzt hier nicht die Text-Diff-Kappen, sondern wirklich zum Rand laufen lassen, abzueglich des
    Paddings, was du da hast." und „die Buttons auch auf Breite ziehen, sodass Diagnose buchen in
    eine Zeile kommt."
   Bens PDF zeigt die beiden Knoepfe UNTEREINANDER, linksbuendig, jeweils nur so breit wie der Text
   braucht — „auf Breite ziehen" heisst also eine Zeile pro Knopf, nicht volle Breite.
   Gemessen vorher: Knoepfe nebeneinander mit je 131 px (Text brach um), Copy 272 px von 350 px
   verfuegbarer Breite. */
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy { max-width: none; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy p { max-width: none; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy__cta {
  flex-direction: column; align-items: flex-start; gap: 10px;
}
.js:not(.no-motion)[data-aspect="portrait"] .hero-copy__cta .btn {
  width: auto; white-space: nowrap;
}
/* Auch auf den Flaechen (Pain/Cut) laeuft der Text bis an den Rand, abzueglich Padding */
.js:not(.no-motion)[data-aspect="portrait"] .face__lead,
.js:not(.no-motion)[data-aspect="portrait"] .face__sub { max-width: none; }

/* Vol.7 / Walter 09.09.: die Ueberschriften auf dem Karton hingen an --h3 bzw. --h4 und waren damit
   bei 36 bzw. 30 px gedeckelt — neben einer Sektions-Ueberschrift von 50 px auf demselben Schirm
   wirkt das falsch. Ab Tablet-Breite je eine Stufe hoeher.
   Dieser Block MUSS hinter den allgemeinen Portrait-Regeln stehen: gleiche Spezifitaet, also
   entscheidet die Reihenfolge in der Datei. */
@media (min-width: 600px) {
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy__h1 { font-size: var(--h2); }
  .js:not(.no-motion)[data-aspect="portrait"] .face__lead { font-size: var(--h3); }
  .js:not(.no-motion)[data-aspect="portrait"] .face__sub { font-size: var(--p1); }
}

/* ============================================================
   Walter 10.09. (Video, Pixel 8 + iPhone) — drei Hochformat-Fehler, gemessen 11.09.
   ============================================================ */
/* (1) Loop-/Cut-Flaeche: Buttons unter der Bildkante. Das Flaechen-Raster hielt die mittlere
   Zeile in Bandbreite (70–84 px) frei, obwohl das Band senkrecht rechts laeuft — tote Zeile,
   dazu Desktop-Paddings. Gemessen: 360×800 → 73 px Ueberhang (beide Buttons weg), 390×844 → 29 px
   (Skip weg), iPhone mit sichtbarer Safari-Leiste 390×664 → 114 px (kein Button sichtbar).
   Jetzt: Zeile 2 = 0; Zeile 1 waechst nur bis zur 50-%-Linie, wenn dafuer Platz ist — Bens
   Komposition bleibt, sobald es passt; der untere Block haengt an der Unterkante. Das Minimum
   MUSS 0 sein (nicht auto): mit auto wurde Zeile 1 vor der fr-Zeile auf ihr Maximum gezogen und
   die Knopfzeile lief bei 360×800 weiterhin 3 px ueber. Oberes Polster des unteren Blocks faellt
   weg (es war der Abstand zur Bandzeile); Puffer nach oben ist das Header-Polster des oberen Blocks. */
.js:not(.no-motion)[data-aspect="portrait"].vcut .face-overlay {
  /* 50svh statt 50 %: die Flaeche folgt seit dem 11.09. der sichtbaren Hoehe (dvh, s. u.), der
     Kopfblock mit dem gebackenen Icon muss aber stehen bleiben, sonst laeuft der DOM-Text
     gegen den Aufdruck, sobald Safari die Leiste einzieht. */
  /* Vol.8: Kopfblock nach Inhalt (Icon über Kicker/Headline), der untere Block füllt den Rest und hängt
     die Knöpfe an die Unterkante — alle Blöcke mit demselben Abstand (--face-gap). Der Kopfblock hängt
     damit nicht mehr an 50svh; er ist viewport-unabhängig, der gebackene Icon-Aufdruck bleibt stehen. */
  grid-template-rows: auto 0 1fr;
}
.js:not(.no-motion)[data-aspect="portrait"].vcut .face__foot {
  align-self: stretch; display: flex; flex-direction: column;
  padding-top: 0;
  padding-bottom: clamp(16px, 3vh, 32px);
}
.js:not(.no-motion)[data-aspect="portrait"].vcut .face__cta { margin-top: auto; }
/* (2) Karton bis zur Unterkante (Walters iPhone: „unten war der Karton nicht bis zur Unterseite,
   das blaue Feld schiebt sich rein"). Die Stage mass 100svh (Hoehe MIT Safari-Leiste); zieht
   sich die Leiste ein, wuchs der Viewport um ~90 px, die Stage nicht — darunter lag
   #modell-frame (margin-top −100svh, Cyan). Jetzt: Stage = 100lvh (Leiste eingezogen).
   Walter 11.09. (iPhone, v19.3): Overlays auf 100svh liessen beim Einziehen der Leiste den
   weissen Verlauf und die Knoepfe 86 px ueber der Unterkante enden — darunter blanker Karton.
   In der Leisten-Emulation (qa-tools/toolbar_emu.js) reproduziert. Deshalb folgen die Overlays
   jetzt der SICHTBAREN Hoehe (100dvh: 664 mit Leiste, 750 ohne — iPhone 390): Verlauf und Knoepfe
   liegen immer an der echten Unterkante, der Kopfblock haengt an 50svh (s. o.). Reflow nur
   waehrend der Leisten-Animation, kein Rebake. Am Desktop sind svh, dvh und lvh gleich —
   dort aendert sich nichts (Regression 56/56). */
.js:not(.no-motion)[data-aspect="portrait"] .act1__stage { height: 100vh; height: 100lvh; }
/* Walter 12.09. (Pixel, Chrome): beim ERSTEN Scrollen schiebt Chrome die Adressleiste mit dem Finger weg und gibt
   unten 56 px frei, aktualisiert dvh aber erst beim Loslassen. Overlay auf 100dvh = solange der Finger liegt, steht
   unten Karton ohne Verlauf, beim Loslassen „flippt" der Verlauf nach. Deshalb: Overlays so hoch wie die Bühne
   (100lvh, der Verlauf deckt immer den ganzen Karton), nur die Knopfzeilen hängen an der sichtbaren Kante
   (Polster unten + (100lvh − 100dvh), dasselbe Muster wie die Band-Knopfzeile). Bei sichtbarer Leiste liegt der
   Rest des Overlays unter der Leiste — dort ist nichts, was fehlen dürfte. */
.js:not(.no-motion)[data-aspect="portrait"] .hero-overlay,
.js:not(.no-motion)[data-aspect="portrait"] .face-overlay { bottom: auto; height: 100vh; height: 100lvh; }
.js:not(.no-motion)[data-aspect="portrait"] .hero-overlay { padding-bottom: calc(clamp(20px, 4vh, 40px) + (100lvh - 100dvh)); transition: padding-bottom .25s ease-out; }
.js:not(.no-motion)[data-aspect="portrait"].vcut .face__foot { padding-bottom: calc(clamp(16px, 3vh, 32px) + (100lvh - 100dvh)); transition: padding-bottom .25s ease-out; }
/* Walter 12.09.: „die Schrift macht nochmal einen kompakten Sprung" — wenn Chrome dvh beim Loslassen auf einmal um 56 px
   nachzieht, gleitet die Knopfzeile jetzt in 0,25 s statt zu springen (Transition auf dem Polster). */
.js:not(.no-motion)[data-aspect="portrait"] .pains__nav { bottom: clamp(18px, 4vh, 40px); bottom: calc(100lvh - 100dvh + clamp(18px, 4vh, 40px)); }
.js:not(.no-motion)[data-aspect="portrait"] #modell-frame:not(.is-fixed) { margin-top: -100vh; margin-top: -100lvh; }

/* ============================================================
   Vol.8 (Ben 01:35, Vol.7 01:18/03:30/07:57; Walter-Go 11.09.): Hover-Regel für ALLE Knöpfe —
   Hintergrund weiß, Schrift orange. Ersetzt die Invertier-Hover je Variante.
   ============================================================ */
.btn--primary:hover, .btn--roast:hover, .btn--ghost:hover, .btn--pillcyan:hover, .btn--pillwhite:hover,
.btn--pillyellow:hover, .btn--dark:hover,
.site-header .btn--roast:hover, .site-footer .btn--primary:hover,
.services .btn--pillcyan:hover, .services .btn--pillyellow:hover, .services .svc__cta.btn--primary:hover,
.services .umsetzung .btn--pillwhite:hover, #ueber .btn--pillwhite:hover {
  background: #fff; color: var(--orange); border-color: transparent;
}

/* ============================================================
   TABLET-STUFE HOCHFORMAT (12.09.2026, Walter-Go nach Sichtung 820/1024 + iPad-Air-Simulator)
   Befund: Layout stimmt, Größen nicht — alles handygroß auf einem 2–3× größeren Schirm (Hero-Block unten mit
   40 % leerem Karton darüber, Flächen-Copy in Handy-Schrift, Fließtext 16 px in großen Flächen, Leistungskarten
   640 px breit auf 1024). Kein Ben-Mockup — Vorschlag nach Augenmaß, Vorher/Nachher-Bögen in feedback/.
   Steht am Ende der Datei, damit die Regeln die Handy-Deckel und den 600er-Block überstimmen.
   ============================================================ */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1280px) {
  :root {
    --h2: clamp(50px, 2rem + 3vw, 64px);
    --h3: clamp(36px, 1.6rem + 1.9vw, 44px);
    --h4: clamp(30px, 1.4rem + 1.2vw, 36px);
    --h5: clamp(24px, 1.2rem + 0.8vw, 28px);
    --h6: clamp(19px, 1.05rem + 0.4vw, 22px);
    --p1: clamp(19px, 1.05rem + 0.45vw, 22px);
    --p2: clamp(18px, 1rem + 0.35vw, 20px);
  }
  /* Hero: Textblock auf drei Viertel der Breite, direkt unter dem Claim (12 vh Luft), Rest bleibt unten frei */
  .js:not(.no-motion)[data-aspect="portrait"] .hero-overlay { grid-template-rows: auto minmax(0, 12vh) auto 1fr; --stamp-w: clamp(96px, 14vw, 140px); }
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy { max-width: 76%; }
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy__badge { font-size: clamp(20px, 2.4vw, 26px); }
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy__h1 { font-size: clamp(50px, 6.2vw, 68px); hyphens: manual; } /* Platz genug: kein „dei-nen" */
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy__sub { font-size: clamp(19px, 2.3vw, 23px); }
  .js:not(.no-motion)[data-aspect="portrait"] .hero-copy__cta .btn { font-size: clamp(18px, 2.2vw, 21px); }
  /* Flächen (Loop/Cut): eine Stufe größer, Icon größer, Abstände mitwachsend */
  .js:not(.no-motion)[data-aspect="portrait"] .face-overlay { --face-gap: clamp(16px, 2.2vh, 28px); }
  .js:not(.no-motion)[data-aspect="portrait"] .face__col .band-kicker { font-size: clamp(24px, 2.9vw, 30px); }
  .js:not(.no-motion)[data-aspect="portrait"] .face__h { font-size: clamp(52px, 6.4vw, 68px); }
  .js:not(.no-motion)[data-aspect="portrait"] .face__icon { width: clamp(150px, 19vw, 200px); }
  .js:not(.no-motion)[data-aspect="portrait"] .face__lead { font-size: clamp(34px, 4.2vw, 44px); }
  .js:not(.no-motion)[data-aspect="portrait"] .face__sub { font-size: clamp(19px, 2.3vw, 23px); }
  .js:not(.no-motion)[data-aspect="portrait"] .face__cta .btn { font-size: clamp(18px, 2.2vw, 21px); }
  /* Band-Knöpfe im Zoom */
  .js:not(.no-motion)[data-aspect="portrait"] .pains__nav .btn { font-size: clamp(18px, 2.2vw, 21px); }
  /* Modell (Walter 12.09., iPad live): Foto und Text nebeneinander statt Foto oben links, Text unten rechts.
     Das Foto steht außerhalb des .wrap-Rasters (seit v19 statisch, damit es nicht über die Sektionshöhe
     gestreckt wird) — deshalb wird die Sektion selbst zum Zwei-Spalten-Raster: links das Foto (44 %),
     rechts Kicker + Text in EINER Spalte, beide oben bündig. */
  .modell { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); align-items: start; align-content: center; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }   /* align-content: ab 901 px hat die Sektion min-height 100svh (styles.css) — Block mittig im Kartonboden statt oben mit leerem Cyan darunter */
  .modell__photo { position: static; grid-column: 1; width: 100%; margin: 0; }
  .modell__photo img { height: auto; }
  .modell .modell__grid { grid-column: 2; max-width: none; width: 100%; margin: 0; padding: 0; grid-template-columns: 1fr; row-gap: 10px; }
  .modell__kicker, .modell__text { grid-column: 1; }
  .modell__cols { columns: 1; }
}
/* Leistungen ab 900 px hochkant: Bens eigener Vorschlag aus Vol.8 (08:05) — zwei Spalten, dritte Karte und
   Umsetzungs-Kasten nebeneinander. Der Kasten wird per expliziter Rasterposition neben die dritte Karte gesetzt,
   die eigene Umsetzungs-Überschrift entfällt hier (der Kasten trägt seinen Titel + Fahne). */
@media (orientation: portrait) and (min-width: 900px) and (max-width: 1280px) {
  .services .wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2.6vw, 32px); row-gap: clamp(20px, 2.6vw, 32px); align-items: stretch; } /* gleiche Kartenhöhe je Zeile, Knöpfe unten bündig (.svc__cta margin-top:auto) */
  .services .wrap > .services__kicker { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .services .wrap > .services__h2 { grid-column: 1 / -1; grid-row: 2; }
  .services .svc-grid { display: contents; }
  .services .svc:nth-child(1) { grid-column: 1; grid-row: 3; }
  .services .svc:nth-child(2) { grid-column: 2; grid-row: 3; }
  .services .svc:nth-child(3) { grid-column: 1; grid-row: 4; }
  .services .services__h2--umsetzung { display: none; }
  .services .umsetzung { grid-column: 2; grid-row: 4; margin: 0; grid-template-columns: 1fr; align-self: stretch; }
  .services .umsetzung__lead { grid-column: 1; grid-row: 1; }
  .services .umsetzung__price { grid-column: 1; grid-row: 2; align-self: start; }
  .services .umsetzung__text { grid-column: 1; grid-row: 3; }
}