/* ==================================================================
   MOBIL — 23.09.2026
   Eigene Datei, damit die Handy-Korrekturen an einer Stelle liegen
   und die grossen Stylesheets unberuehrt bleiben.

   Befund vor dieser Datei (headless Chrome, 390x844):
   scrollWidth 876 bei Viewport 390 — die Seite war doppelt so breit
   wie das Geraet. Auf dem Handy zoomt der Browser dann heraus und
   alles wird winzig. Gemessene Ursache: allein #ablauf. Alle anderen
   Sektionen lagen bereits sauber bei 390.

   Zwei Gruende in #ablauf:
   1. Grid-Blowout — .ab__media/.ab__body sind Grid-Items mit
      min-width:auto und schrumpfen darum nicht unter ihre
      Inhaltsbreite (430px in einer 298px-Spalte).
   2. Die acht Ablauf-Grafiken sind auf feste 430x340 gebaut.
      Gemessen: ihre kleinste Schrift liegt schon am Desktop bei
      3,1-8,6px — sie ist Textur, kein Text. Herunterskalieren
      verliert also nichts, was jemand liest. Deshalb skalieren
      statt abschneiden oder ausblenden.
   ================================================================== */

/* Ab hier wird das Ablauf-Layout einspaltig (900er-Breakpoint in
   style.css) — genau dort muessen die Grafiken mitskalieren. */
@media (max-width: 900px) {

  /* --- 1. Grid-Blowout abstellen ----------------------------------
     Ohne min-width:0 diktiert der Inhalt die Spaltenbreite. */
  .ab__step > * { min-width: 0; }

  /* --- 2. Grafikflaeche als Buehne --------------------------------
     Die Flaeche zieht sich ueber das Kartenpolster nach aussen
     (mehr Platz = groesserer Massstab), behaelt das Seitenverhaeltnis
     der Vorlage und schneidet ab, was darueber hinausragt. */
  .ab__media {
    width: calc(100% + 48px);
    margin: 0 -24px;
    container-type: inline-size;
    aspect-ratio: 430 / 340;
    overflow: hidden;
    position: relative;
  }

  /* --- 3. Grafik proportional verkleinern -------------------------
     100cqw ist die Breite der Buehne. Geteilt durch die 430px der
     Vorlage ergibt das den Massstab — ohne JavaScript, und er passt
     sich jeder Geraetebreite an. Bei 390px Viewport: Faktor 0,69. */
  .gfx {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 !important;
    width: 430px;
    max-width: none;
    flex: none;
    transform-origin: 0 0;
    transform: scale(calc(100cqw / 430px));
  }
  .gfx > div { max-width: none; }

  /* --- 4. Sicherheitsnetz -----------------------------------------
     Falls in den Grafiken einzelne Teile absolut aus ihrer Flaeche
     ragen: clip statt hidden, damit kein Scroll-Container entsteht
     und position:sticky im Inneren weiter funktioniert. */
  #ablauf { overflow-x: clip; }
}

/* ------------------------------------------------------------------
   03 · Bausteine — Labels im Wischslider
   Drei der neun Labels brechen bei 390px zweizeilig um („Seite fuer
   lukrativste Leistung", „Die 60-Sekunden-Bewerbung", „Optimierung
   fuer Google Maps"). Einzeilig bekommt man sie auf dieser Breite nur
   mit deutlich kleinerer Schrift — dafuer sind sie zu wichtig.
   Darum hier gleiche Label-Hoehe statt Schrumpfen: die Headlines der
   Karten starten auf derselben Linie, beim Wischen springt nichts.
   Die Regel „Labels einzeilig, Angleichen kommt nicht in Frage"
   (20.09.2026) galt fuer die Desktop-Reihe mit drei sichtbaren Karten.
   Sauberer waeren kuerzere Labels — das ist eine Copy-Entscheidung.
   ------------------------------------------------------------------ */
@media (max-width: 680px) {
  #bausteine .lk__c--kurz .lk__lbl { min-height: 22px; }
}

/* ------------------------------------------------------------------
   „Nach dem Launch — SEO und Google Ads"
   Liegt im .ab__panel, aber ausserhalb der Schritte, und ist als
   830x470 inline gebaut (darum kein Klassen-Selektor moeglich).
   Gleiche Bauweise wie oben, nur mit ihrem Seitenverhaeltnis.
   Bis 1000px, weil sie mit Polster erst darueber von selbst passt.
   ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  #ablauf div:has(> [style*="width:830px"]) {
    container-type: inline-size;
    aspect-ratio: 830 / 470;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  #ablauf [style*="width:830px"] {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 !important;
    transform-origin: 0 0;
    transform: scale(calc(100cqw / 830px));
  }
}

/* ==================================================================
   KOPFBALKEN UND MENUE — 23.09.2026
   Drei Befunde, drei Aenderungen.

   1. Der Portal-Link war ab 900 px ausgeblendet (final.css 977) und
      damit am Handy nicht erreichbar. Im Kopfbalken ist dafuer kein
      Platz — neben Logo und Burger bleiben 150 px. Er gehoert ins
      aufgeklappte Menue, unten abgesetzt.
   2. Der Kopfbalken schaltete bei scrollY 724 auf hell, der Hero ist
      am Handy aber 1.090 px hoch: ein weisser Balken lag dann auf dem
      dunklen Hero-Foto. Behoben in script.js (Zustand folgt der
      Hero-Unterkante).
   3. Gemessener Kontrast des weissen Logos ueber dem Hero: 6,5 bis
      16,6:1, also durchweg lesbar — das Problem war nicht die
      Lesbarkeit, sondern dass der Balken ueber einem Foto nicht
      verankert wirkt. Ein Verlauf nach unten aufloesend gibt ihm
      Halt, ohne eine sichtbare Leiste zu erzeugen, und hebt den
      schlechtesten Wert von 6,5 auf ueber 10:1.

   Das Menue selbst folgt dem Aufbau von expectleads.de (dort
   gemessen bei 375 px: Zeile 58 px hoch, Haarlinie darunter, Schrift
   18,9/400, Reihenabstand 73 px, Zweitnavigation und Knopf unten
   abgesetzt).
   ================================================================== */
@media (max-width: 900px) {

  /* Sprungziele aus dem Menue: der Kopfbalken ist am Handy 72 px hoch,
     scroll-padding-top stand auf 110 (Desktop-Wert). */
  html{scroll-padding-top:86px}

  /* Antippen: der Browser legt sonst sein hellblaues Standardrechteck
     ueber jedes Ziel (gemessen rgba(51,181,229,.4)). Eigene, leise
     Rueckmeldung statt Fremdfarbe. */
  a,button,[role=button]{-webkit-tap-highlight-color:transparent}
  .btn:active{transform:translateY(1px)}
  .hdr__nav .hdr__link:active,.ft__col a:active,.fq__q:active{opacity:.6}

  /* Fester Knopf: 16 px zur Unterkante reichen auf Geraeten mit
     Home-Leiste nicht — die Leiste liegt darueber. */
  .bkrFab{bottom:calc(16px + env(safe-area-inset-bottom,0px))}

  /* --- Verlauf statt Leiste ------------------------------------------
     Die Regel steht jetzt allgemein in style.css (gilt auch am
     Desktop). Hier nur die Hoehe: der Kopfbalken ist am Handy 72 px
     statt 88, der Verlauf zieht entsprechend kuerzer. */
  .hdr::before{height:132px;
    background:linear-gradient(180deg,
      rgba(6,19,45,.64) 0%,rgba(6,19,45,.40) 42%,
      rgba(6,19,45,.14) 74%,rgba(6,19,45,0) 100%);
  }

  /* --- Menue als Vollflaeche -----------------------------------------
     FEHLER (gefunden 23.09.2026): Das Menue war ueberall kaputt ausser
     ganz oben auf der Seite — gemessen 772 px hoch bei scrollY 0, aber
     nur 34 px bei scrollY 2500.
     Ursache: .hdr.light traegt backdrop-filter. Ein Element mit
     backdrop-filter (wie mit filter oder transform) wird zum
     Bezugsrahmen fuer position:fixed-Kinder. Sobald der Balken auf
     hell schaltet, bezieht sich das fixierte Menue also nicht mehr auf
     das Fenster, sondern auf den 73 px hohen Balken — top:72px und
     bottom:0 ergeben darin 1 px plus 34 px Polster.
     Im offenen Zustand ist der Balken ohnehin deckend weiss, die
     Unschaerfe dahinter hat keine Aufgabe. Sie wird abgeschaltet,
     damit der Bezugsrahmen verschwindet. */
  .hdr.open{background:#fff;border-bottom-color:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none}

  /* Die Seite scrollte hinter dem offenen Menue weiter (gemessen:
     scrollY 0 -> 400 bei offenem Menue). Gesperrt wird an <html>,
     nicht an <body>: das Buchungs-Popup setzt dort ein eigenes
     inline-overflow, die beiden wuerden sich sonst gegenseitig
     zuruecksetzen. */
  html:has(.hdr.open){overflow:hidden}
  /* Das Kreuz war weiss auf weiss: .hdr__burger span ist #fff und nur
     .hdr.light faerbt es dunkel — im offenen Menue greift light aber
     nicht, der Balken ist trotzdem weiss. */
  .hdr.open .hdr__burger span{background:var(--ink)}
  /* Der Telefonknopf lag auf dem Menue-Knopf. Solange das Menue offen
     ist, gibt es einen Knopf, der dasselbe tut — der zweite geht weg. */
  body:has(.hdr.open) .bkrFab,
  body:has(.hdr.open) .bkrTeaser,
  body:has(.hdr.open) .bkrTeaser__schleier{opacity:0;pointer-events:none}
  .hdr__nav{
    top:72px;bottom:0;height:auto;
    display:flex;flex-direction:column;align-items:stretch;
    padding:10px 22px calc(24px + env(safe-area-inset-bottom,0px));
    border-bottom:0;overflow-y:auto;overscroll-behavior:contain;
  }
  /* Zeilenhoehe 56 statt 50, Haarlinie darunter: der Daumen trifft
     sicher, und die Liste bekommt Struktur statt nur Abstand. */
  .hdr__nav .hdr__link{
    height:auto;padding:18px 2px;font-size:18.5px;font-weight:400;
    line-height:1.4;letter-spacing:-.005em;color:var(--ink);
    border-bottom:1px solid rgba(10,23,48,.10);justify-content:space-between;
  }

  /* --- Portal und Knopf unten abgesetzt ------------------------------ */
  .hdr__portal--m{
    display:inline-flex;align-items:center;justify-content:space-between;
    margin:auto 0 0;padding:18px 2px 17px;border:0;
    border-top:1px solid rgba(10,23,48,.10);
    font-size:18.5px;font-weight:400;letter-spacing:-.005em;
    color:var(--ink-2);text-shadow:none;text-decoration:none;
  }
  .hdr__portal--m svg{width:17px;height:17px;filter:none;color:var(--ink-3)}
  .hdr__nav-cta{
    display:flex;align-self:stretch;justify-content:center;
    margin-top:16px;padding:18px 22px;font-size:15.5px;width:100%;
  }
}
@media (min-width: 901px){ .hdr__portal--m{display:none} }

/* ==================================================================
   HANDY-GESTALTUNG — 23.09.2026
   Bis hierher war die Seite ein Desktop-Entwurf, der bei 900 px auf
   eine Spalte umklappt. Das ist etwas anderes als eine Seite, die
   fuer das Handy gemacht ist. Gemessen bei 390 px vor diesem Block:

     Hero        1.190 px hoch bei 844 px Bildschirm, davon 150 px
                 leerer Raum ueber dem ersten Wort. Das Foto war eine
                 164 px schmale Spalte am rechten Rand — vom Mann war
                 ein Streifen Jacke zu sehen. Die drei Meldungen
                 standen auf 0,58 skaliert, Schriftgroesse effektiv
                 8 px: Dekoration, kein Inhalt.
     Karten      Bis zu drei Polster ineinander. In der Garantie
                 blieben von 390 px Geraetebreite 232 px Textbreite,
                 also 59 Prozent. Am Desktop faellt das nicht auf,
                 am Handy ist es die halbe Seite.
     Medien      Website-Aufnahmen in den Fallstudien 290 px breit in
                 einer 346 px breiten Karte — eingerueckt statt
                 randlos, dadurch unlesbar klein.
     Knoepfe     Zufaellige Breiten nebeneinander (245 und 159 px).

   Der Block setzt darauf eine eigene Skala, einen eigenen Rhythmus
   und fuer Hero und Systemgrafik eine eigene Anordnung.
   Greift ab 600 px abwaerts; Tablets behalten ihre Proportionen.
   ================================================================== */

@media (max-width: 600px) {

  /* ------------------------------------------------------------------
     1 · SKALA
     Eine Groesse pro Rolle, statt dass jede Sektion ihre eigene
     mitbringt. Die Werte sind auf 346 px Textbreite gerechnet.
     ------------------------------------------------------------------ */
  .lbl,.hero__lbl,.gt__kick{font-size:11px;letter-spacing:.13em;line-height:1.5}
  .h2{font-size:25px;line-height:1.2;letter-spacing:-.018em}
  .lede,.pm-lede,#lage .pm-lede,.fs__lede,.ab__note,.hd .lede,
  .contact__panel .lede{font-size:16.5px;line-height:1.55;letter-spacing:0}
  .pm-br,#lage .pm-br{font-size:15.5px}
  .pm-t,.lk__h,.lk__c--kurz .lk__h,.ab__t,.fst__name,.gt__card h3{
    font-size:19px;line-height:1.3;letter-spacing:-.01em}
  .pm-p,.ab__sub,.lk__do,.lk__c--kurz .lk__do,.fst__note,.gt__card p,
  .ab__list li,.sy__who li{font-size:15.5px;line-height:1.6}

  /* ------------------------------------------------------------------
     2 · RHYTHMUS
     150 px Sektionspolster stammen vom Desktop. Am Handy scrollt man,
     statt zu ueberblicken — die Luft darf kleiner sein, muss aber
     gleich bleiben, sonst zerfaellt die Seite in Bloecke.
     ------------------------------------------------------------------ */
  .sec{padding:60px 0}
  .pain{padding:60px 0}
  /* 60/60 wie alle anderen: die Sonderwerte stammten aus der Zeit, als
     die Grafik ihre eigene Leerflaeche mitbrachte. */
  #system.sec{padding:60px 0}
  #bausteine.sec{padding-bottom:0}
  /* Sektionen mit eigenem Polster nachziehen, sonst bleibt der
     Rhythmus loechrig. #fuerwen traegt es als style-Attribut im
     Markup (110/110) — dagegen hilft nur !important. */
  #fuerwen{padding-top:60px!important;padding-bottom:60px!important}
  #fragen.sec{padding:60px 0}
  #formel.sec{padding-bottom:60px}
  .head-mitte,.head-left,.head-split,.fx__head,.vt__head,.gt__head,
  .fs__head,.pm-head,.ab__head,.sy .head-mitte,.bst .head-mitte{margin-bottom:30px}

  /* ------------------------------------------------------------------
     3 · KARTEN: EIN POLSTER, NICHT DREI
     Wo eine graue Flaeche eine weisse Karte umschliesst, verliert die
     graue am Handy ihr seitliches Polster. Die Karte bekommt dadurch
     die volle Spaltenbreite, der Text 40 statt 59 Prozent Rand.
     ------------------------------------------------------------------ */
  .gt__panel{padding:20px 0;background:transparent;border:0}
  .gt__vouch,.gt__cards,.gt__card{width:auto}
  /* GARANTIE nach dem Aufbau von netfame.de (mobil nachgemessen).
     Ihre Loesung, in unseren Stil uebertragen:
       Person als kleiner runder Ausschnitt in EINER Zeile mit Name und
       Rolle — statt eines 230 x 299 px Blocks, unter dem Name und
       Rolle nochmal separat stehen.
       Siegel NEBEN dem Titel statt darueber.
     Gemessen war unser Abschnitt 2.043 px hoch, ihrer mit
     vergleichbarem Inhalt rund 1.280. Der Unterschied steckte fast
     vollstaendig in diesen beiden Stellen.
     Radius bleibt bei uns 2 px statt ihrer 12 — Markenregel. Nur das
     Portrait ist rund; bei Avataren ist das ausdruecklich erlaubt. */
  .gt__vouch{display:grid;grid-template-columns:auto 1fr;gap:0 14px;
    grid-template-areas:"foto name" "text text" "sig sig"}
  .gt__ava{grid-area:foto;width:72px;height:72px;max-width:none;
    border-radius:50%;border-width:2px;margin:0;
    object-fit:cover;object-position:50% 14%}
  .gt__sig-txt{grid-area:name;align-self:center;display:flex;
    flex-direction:column;gap:2px;margin:0}
  .gt__sig-name{font-size:16px;font-weight:500}
  .gt__sig-role{font-size:13.5px}
  .gt__vouch-txt{grid-area:text;margin:20px 0 0}
  .gt__signature{grid-area:sig;justify-self:end;margin:6px 0 0;width:200px;height:auto}

  .gt__card{padding:22px 20px 24px;display:grid;
    grid-template-columns:88px 1fr;gap:0 16px;
    grid-template-areas:"siegel titel" "text text"}
  .gt__sealg{grid-area:siegel;width:88px;height:auto;margin:0;align-self:start}
  .gt__card h3{grid-area:titel;align-self:center;margin:0}
  .gt__card p{grid-area:text;margin:14px 0 0}
  .gt__cards{gap:16px}
  .fst__c{padding:0}
  .ab__panel{padding:0;background:transparent;border:0}

  /* ------------------------------------------------------------------
     4 · MEDIEN RANDLOS
     Eine Website-Aufnahme in einer Karte ist der Beleg. Eingerueckt
     bleibt sie ein Briefmarkenbild; an den Kartenkanten wird sie
     lesbar. Gewinn: 290 -> 346 px, also ein Fuenftel mehr.
     ------------------------------------------------------------------ */
  /* Die graue Platte unter der Website-Aufnahme ist Absicht — sie
     zeigt die Seite wie ein aufgestelltes Blatt. Am Desktop hat sie
     36 px Polster, am Handy frisst das ein Fuenftel der Breite.
     Polster klein statt Platte weg: die Aufnahme waechst von 290 auf
     318 px, die Bauform bleibt. */
  .fsx .fst__c{padding:6px}
  .fsx .fst__shot{padding:8px}
  .fsx .fst__body{padding:24px 20px 26px}
  .fsx .fst{gap:16px}
  .fsx .fs__head{margin-bottom:30px}
  .fsx .vn{margin-top:52px}
  .fsx .vn__shots{padding:6px 6px 0;gap:6px}
  .fsx .vn__fig{padding:34px 8px 8px}
  .fsx .vn__fig figcaption{left:10px;top:14px}
  .fsx .vn__content{padding:24px 20px 28px}

  /* ------------------------------------------------------------------
     5 · KNOEPFE
     Am Handy gibt es keine Zeile, in der zwei Knoepfe nebeneinander
     Sinn ergeben. Voll breit, gestapelt, gleiche Groesse — der
     Daumen trifft ueberall.
     ------------------------------------------------------------------ */
  .hero__cta .btn,.contact__act .btn,#gespraech .btn,.gt__cta-act .btn,
  .fx__cta .btn,.final .btn,.ab__body > .btn{width:100%;justify-content:center}
  /* Der Block war fuer den Desktop auf 330 px Blockbreite gesetzt
     (final.css). Am Handy nimmt er die volle Spalte. */
  .final__act{width:auto}
  .final__gt{max-width:none}
  .contact__act{display:flex;flex-direction:column;gap:12px;align-items:stretch}
  .hero__cta{flex-direction:column;align-items:stretch;gap:14px;margin-top:24px}
  .hero__cta .hero__risk{align-self:flex-start}

  /* ------------------------------------------------------------------
     6 · HERO
     Neue Anordnung, keine verkleinerte alte.

     Das Foto war eine 164 px schmale Spalte rechts — bei 42vw auf
     390 px Breite. Am Handy gibt es keine zweite Spalte, also wird
     es zum Band ueber die volle Breite am unteren Ende des Heros:
     der Mann steht in natuerlicher Groesse da, der Text liegt
     darueber im Navy, die Kante dazwischen loest eine Maske auf.

     Die drei Meldungen standen auf 0,58 skaliert und damit bei 8 px
     Schrift. Sie sind aber der Beleg fuer die Headline — was die
     Seite verspricht, kommt hier als Mitteilung an. Deshalb am Handy
     gestapelt in voller Breite und voller Schriftgroesse, liegend
     auf dem Foto. Auf einem Telefon ist ein Stapel Mitteilungen
     ohnehin die natuerlichere Form als ein Faecher.
     ------------------------------------------------------------------ */
  /* Die Hoehe kam nicht vom Zentrieren, sondern von
     .hero--v2{padding:150px 0 110px} (style.css 3077) — 260 px
     Polster fuer eine Desktop-Komposition. Am Handy reicht oben so
     viel, dass der Kopfbalken frei steht.
     Alle Hero-Regeln tragen #start: der Inline-Block <style id="hero">
     im Kopf der Seite arbeitet mit ID-Selektoren und steht nach
     dieser Datei — ohne #start verliert hier jede Zeile. */
  #start.hero{min-height:0;display:block;padding:0}
  #start.hero--v2{padding:0}
  /* Das Polster unten haelt den Platz fuer das Fotoband frei, damit
     nichts darauf liegt. 426 war fuer den alten dreiteiligen
     Meldungsblock gerechnet; mit dem Stapel (94 statt 246 px) blieben
     230 px leeres Navy dazwischen stehen. */
  /* Polster unten haelt die Bildzone frei: Band 376 px plus 118 px
     Streifengrund darunter, minus der oberen Aufloesungszone. */
  html #start .hero__inner{display:block;padding:92px 22px 530px}

  /* ------------------------------------------------------------------
     HERO — Ruhe nach den eigenen Systemregeln (23.09.2026)
     Gemessen im alten Zustand bei 390 px:
       8 Hierarchie-Ebenen, das Designsystem erlaubt drei.
       9 Hervorhebungen, das Designsystem erlaubt genau eine —
       „mehrere hervorgehobene Elemente im selben Sichtfeld heben
       sich gegenseitig auf" (Isolationseffekt).
       Letzte H1-Zeile 38 Prozent der Breite, mit der Linie darunter:
       ein Hurenkind. Unterzeile endet auf 30 Prozent.
     ------------------------------------------------------------------ */

  /* 1 · EINE Hervorhebung statt neun.
     Die Linie unter „Mehr verdienen pro Auftrag" ist am Desktop das
     staerkste Mittel — dort laeuft die Zeile durch. Am Handy bricht
     sie um, und die Linie steht unter einem einzelnen Wort. Sie geht
     deshalb hier weg; die Betonung traegt das Gewicht 500 in
     Unterzeile und Vorspann, konsequent und nur dort. */
  /* html davor: der Inline-Block <style id="hero"> hat dieselbe
     Spezifitaet und steht spaeter — ohne das zusaetzliche Element
     verliert jede dieser Zeilen. */
  html #start.hero--v2 h1 .h1-u{border-bottom:0;padding-bottom:0}

  /* 2 · Zeilenumbrueche.
     balance auf einer zweizeiligen Headline teilt sie gleichmaessig
     („Mehr verdienen / pro Auftrag" statt „… pro / Auftrag").
     pretty auf dem Fliesstext verhindert nur die Waisenzeile, ohne
     die Zeilen auf gleiche Laenge zu ziehen — der Blockstil, der
     abgelehnt ist, entsteht dadurch nicht. */
  html #start.hero--v2 h1 .h1-lead{text-wrap:balance}
  html #start.hero--v2 h1 .h1-mit{text-wrap:balance}
  html #start.hero--v2 .hero__sub{text-wrap:pretty}

  /* Gewicht 500 statt 600. Das Designsystem fuehrt Ueberschriften in
     300 und betont ueber <strong> in 500 — „fette Display-Headlines
     gehoeren nicht zum System". Der Hero weicht am Desktop bewusst ab,
     am Handy standen dadurch aber Vorspann (600) und Zusatzzeile (300
     mit 500er Betonung) fast gleich schwer nebeneinander: zwei
     Headlines statt einer mit Zusatz. In 500 traegt die erste Zeile,
     ohne die zweite zu erschlagen. */
  /* Laufweite -.02em und Zeilenhoehe 1,10 wie bei contentcut.de —
     enger gesetzte Headlines wirken gebauter, nicht breiter. */
  /* EINZEILIG (Melvin, 23.09.2026).
     „Mehr Gewinn und Entlastung" braucht bei dieser Laufweite 12,1 px
     Breite je px Schriftgroesse. Verfuegbar sind Bildschirmbreite
     minus 44 px Rand. Die Formel rechnet die groesste Schrift aus, bei
     der die Zeile noch in EINE Zeile passt — Teiler 12,3 statt 12,11
     als Sicherheitsabstand gegen Rundung und Schriftvarianten.
       390 px -> 28,1   360 px -> 25,7   320 px -> Untergrenze 24,5,
     dort bricht sie wieder auf zwei Zeilen um (dann ausgeglichen).
     .h1-lead geht auf 1em, sonst multipliziert die alte 1,03 den
     errechneten Wert wieder ueber die Grenze.
     Der Block wird dadurch 134 -> 93 px, und die Zeile liest sich als
     eine Aussage statt als zwei Haelften. */
  html #start.hero--v2 h1{
    font-size:clamp(24.5px,calc((100vw - 44px) / 12.3),28.2px);
    line-height:1.14;letter-spacing:-.02em}
  html #start.hero--v2 h1 .h1-lead{font-weight:500;font-size:1em;line-height:1.14}
  html #start.hero--v2 h1 .h1-mit{font-size:.80em;line-height:1.24;margin-top:.30em}
  /* Dritte Betonungsstelle im Kopf: das System erlaubt genau eine.
     Sie bleibt in der Zusatzzeile der Headline, der Vorspann wird
     ruhig. */
  html #start.hero--v2 .hero__sub strong{font-weight:400;color:rgba(255,255,255,.92)}
  /* 3 · Rhythmus. Gemessen standen hier 14 / 7 / 26 / 34 / 36 / 18 /
     34 px — keine Ordnung. Jetzt eine Stufenfolge: was zusammen
     gehoert, steht eng; was eine neue Ebene ist, bekommt mehr Luft. */
  html #start.hero--v2 .hero__lbl{margin-bottom:14px;font-size:11px;letter-spacing:.13em}
  html #start.hero--v2 .hero__sub{margin-top:24px;font-size:16.5px;line-height:1.5;max-width:none;text-wrap:pretty}
  html #start.hero--v2 .hero__cta{flex-direction:column;align-items:stretch;gap:14px;margin-top:28px}
  html #start.hero--v2 .hero__cta .btn{width:100%;justify-content:center}
  /* p.hero__risk statt .hero__risk: der Inline-Block <style id="hero">
     setzt align-self:center mit gleicher Spezifitaet und steht spaeter. */
  html #start.hero--v2 .hero__cta p.hero__risk{align-self:flex-start}
  html #start.hero--v2 .hero__risk b{font-size:14px}
  html #start.hero--v2 .hero__trust{margin-top:28px;gap:12px}
  html #start .hero__trust-ava .ava{width:34px;height:34px;margin-left:-11px}
  html #start .hero__trust-txt{font-size:13.5px;line-height:1.45}

  /* Reihenfolge am Handy: Vertrauenszeile VOR den Knopf.
     Am Desktop steht sie unter dem Knopf, weil dort das Foto rechts
     liegt und der Blick zurueckspringt. Am Handy liegt das Foto
     darunter — stand die Zeile dort, lag sie auf dem Gesicht des
     Mannes und war weder lesbar noch das Bild zu erkennen. */
  html #start .hero__txt{display:flex;flex-direction:column}
  /* Reihenfolge nach dem Muster von contentcut.de (dort gemessen bei
     375 px): Eyebrow, Headline, Handeln — und ERST DANACH der Beleg.
     Vorher stand die Vertrauenszeile zwischen Unterzeile und Knopf und
     hat den Weg zum Knopf unterbrochen.
     Beleg und Garantie ruecken eng zusammen und lesen sich dadurch als
     EIN Block statt als zwei Ebenen: der Abstand zum Knopf ist gross,
     der zwischen ihnen klein. */
  html #start.hero--v2 .hero__cta{order:4;margin-top:30px}
  /* Raus aus dem Hero (Melvin, 23.09.2026). Die Garantie steht in
     ihrer eigenen Sektion und im Schluss-CTA — hier war sie die
     vierte Ebene zwischen Knopf und Beleg. */
  html #start.hero--v2 .hero__cta .hero__risk{display:none}
  html #start.hero--v2 .hero__trust{order:5;margin:14px 0 0}
  html #start .hero__viz{order:6}

  /* Das Foto war eine 164 px schmale Spalte am rechten Rand — vom
     Mann blieb ein Streifen Jacke. Am Handy laeuft es ueber die volle
     Breite. Das Bild steht auf 132 Prozent und nach links versetzt:
     bei voller Breite waere der Mann so klein, dass er Hintergrund
     bliebe.

     Fassung 23.09.2026 (Melvin): Das Band endet nicht mehr an der
     Hero-Unterkante, sondern 118 px darueber — darunter laeuft der
     diagonale Streifengrund des Heros weiter, derselbe wie oben.
     Der Schnitt oben ist knapper (weniger Himmel und Fahrzeugdach),
     dafuer reicht das Bild jetzt bis unter die Haende mit dem Handy.
     Beide Kanten loesen sich in den Grund auf, oben wie unten. */
  html #start .hv__foto{
    inset:auto 0 118px 0;width:100%;height:420px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  }
  /* max-width:none ist noetig: das globale img{max-width:100%} hat die
     132 Prozent wieder auf 390 gekappt — das Bild sass dann bei
     -70..320 und rechts blieb eine senkrechte Navy-Kante stehen. */
  html #start .hv__foto img{width:132%;max-width:none;left:-18%;position:relative;
    object-position:64% 28%}
  html #start .hv__foto::before{display:none}
  html #start .hv__foto::after{
    background:linear-gradient(180deg,
      rgba(11,37,87,.82) 0%,rgba(10,32,74,.40) 20%,
      rgba(8,24,56,.14) 46%,rgba(7,20,48,.30) 78%,
      rgba(6,19,45,.56) 100%);
  }

  /* ---- Grund unter dem Bild ---------------------------------------
     Gemessen bei 390 px: oben laeuft der Hero-Grund diagonal von
     rgb(12,25,52) links auf rgb(45,63,100) rechts — ein klarer
     Anstieg ueber die Breite. Unter dem Bild stand rgb(14,18,26),
     flach und fast entsaettigt: kein Navy, sondern Schwarzgrau.
     Ursache ist der graue 190-Grad-Verlauf des Heros, der unten auf
     #303030 endet und im Multiplizieren Farbe wie Helligkeit
     wegnimmt. Solange das Foto bis zur Unterkante lief, sah das
     niemand.
     Diese Flaeche legt den diagonalen Anstieg von oben wieder darueber
     — dieselbe Richtung, dieselben Endwerte, nur leiser. Sie blendet
     sich von oben ein, damit die untere Bildkante weiter ausklingt. */
  /* Statt eines erfundenen Verlaufs (wirkte wie ein Leuchtfleck) jetzt
     DER ECHTE Hero-Grund: derselbe 135-Grad-Verlauf mit denselben
     Stops wie .hero--v2::after in style.css, herausgeschnitten auf die
     ersten 30 Prozent — genau der Bereich, den man oben neben der
     Headline sieht (rgb(4,20,48) bis rgb(36,59,99)) — und auf diese
     Zone gestreckt. Dazu dieselbe Navy-Auflage mit 26 Prozent im
     Multiplizieren.
     Weggelassen ist nur der graue 190-Grad-Verlauf des Heros: der
     endet unten auf #303030 und war die Ursache, dass hier vorher
     Schwarzgrau statt Navy stand. */
html #start.hero--v2::before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:210px;
    z-index:2;pointer-events:none;
    background:
      linear-gradient(rgba(11,37,87,.26),rgba(11,37,87,.26)),
      linear-gradient(135deg,rgb(4,20,48) 3.30%,rgb(5,20,49) 6.77%,rgb(4,20,49) 10.21%,rgb(3,20,49) 13.68%,rgb(5,22,51) 17.12%,rgb(6,23,53) 20.59%,rgb(6,23,53) 24.03%,rgb(7,24,55) 27.50%,rgb(7,25,56) 30.94%,rgb(8,26,58) 34.38%,rgb(8,25,58) 37.85%,rgb(8,27,60) 41.29%,rgb(8,26,59) 44.76%,rgb(8,26,60) 48.20%,rgb(8,27,60) 51.67%,rgb(20,39,74) 51.67%,rgb(11,30,64) 51.67%,rgb(20,39,74) 55.10%,rgb(22,41,77) 58.54%,rgb(24,44,80) 62.01%,rgb(25,45,82) 65.45%,rgb(26,46,83) 68.92%,rgb(28,49,87) 72.36%,rgb(29,50,88) 75.83%,rgb(30,51,89) 79.27%,rgb(31,53,92) 82.74%,rgb(33,54,95) 86.18%,rgb(34,56,96) 89.62%,rgb(35,57,98) 93.09%,rgb(35,58,98) 96.53%,rgb(36,59,99) 100.00%);
    background-blend-mode:multiply,normal;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 52%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 52%,#000 100%);
  }
  /* Die Meldungen liegen jetzt UNTER der Hand mit dem Handy, leicht
     in die untere Bildkante hinein — so liest man, dass sie auf
     diesem Telefon ankommen. Vorher standen sie ueber dem Bild in
     einem eigenen Abschnitt und gehoerten zu nichts. */
  html #start .hero__viz{position:absolute;left:22px;right:22px;bottom:46px;
    z-index:5;margin:0;height:auto;min-height:0;padding:0}
  /* 58 statt 46: darunter soll der Streifengrund noch als Flaeche
     lesbar sein, nicht nur als Saum. */
  html #start .hero__viz{bottom:58px}
  html #start .hv{position:static;width:auto;height:auto;margin:0;transform:none;
    display:block}
  html #start .hv__such{display:none}

  /* ---- Echte iPhone-Mitteilung ----------------------------------
     Masse vom Sperrbildschirm: Ecke 22, Polster 13/16, Symbol 38 mit
     Radius 9 (iOS-Kachelradius ist rund 22 Prozent der Kantenlaenge),
     Titel 15/600, Text 15/400, Zeitangabe 13 rechts oben. Kein
     Schlagschatten — iOS traegt die Karte ueber das Material, nicht
     ueber einen Schatten. Der Name der App steht in normaler
     Schreibweise, nicht in Versalien mit Sperrung. */
  html #start .hv div.hv__k{position:relative;top:auto;left:auto;
    width:100%;margin-inline:auto;padding:13px 16px 14px;gap:12px;
    border-radius:22px;align-items:flex-start;
    background:rgba(28,28,30,.52);
    -webkit-backdrop-filter:blur(30px) saturate(1.7);
    backdrop-filter:blur(30px) saturate(1.7);
    box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16);
  }
  html #start .hv div.hv__k .ic{width:38px;height:38px;border-radius:9px}
  html #start .hv div.hv__k .ic::after{border-radius:9px}
  html #start .hv div.hv__k .app{font-size:13px;font-weight:400;
    letter-spacing:0;text-transform:none;color:rgba(255,255,255,.62);
    line-height:1.2}
  html #start .hv div.hv__k .app i{font-size:13px;color:rgba(255,255,255,.48);
    letter-spacing:0}
  html #start .hv div.hv__k .ti{margin-top:1px;font-size:15px;font-weight:600;
    letter-spacing:-.01em;line-height:1.26;color:#fff;white-space:normal}
  html #start .hv div.hv__k .su{margin-top:1px;font-size:15px;font-weight:400;
    line-height:1.28;color:rgba(255,255,255,.78);white-space:normal}

  /* Stapel: die oberste vollstaendig, die beiden darunter als Kanten.
     display:none statt visibility:hidden — sonst brechen die
     verborgenen Texte in den schmaleren Karten um und ziehen sie auf
     (gemessen 323 statt 97 px Stapelhoehe). Mit fester Hoehe ist der
     Ueberstand exakt 7 px wie auf dem Sperrbildschirm. */
  html #start .hv div.hv__k--b > *,
  html #start .hv div.hv__k--c > *{display:none}
  html #start .hv div.hv__k--b{width:94%;height:30px;margin-top:-23px;
    padding:0;z-index:-1;background:rgba(28,28,30,.44)}
  html #start .hv div.hv__k--c{width:88%;height:30px;margin-top:-23px;
    padding:0;z-index:-2;background:rgba(28,28,30,.34)}
  html #start .hv__k .ti{font-size:13.5px}

  /* ------------------------------------------------------------------
     7 · SYSTEMGRAFIK
     Die Handy-Fassung der Grafik ist 390 x 1.180 px — eine Kette, die
     anderthalb Bildschirme hoch ist. Sie kleiner zu rechnen macht die
     Bildunterschriften unlesbar (gemessen 9,6 px bei 250 px Buehne).
     Stattdessen neue Geometrie: kleinere Kacheln, kuerzere Abstaende,
     volle Breite. 1.180 -> 780 px, Schrift bleibt bei 14 px.
     Die Leitung zwischen den Kacheln zieht mit (Pfad unten).
     ------------------------------------------------------------------ */
  /* Die Buehne darf die volle Breite haben — die neue Geometrie der
     Grafik steckt in ihrem eigenen Handy-Block in index.html, bei
     .wg--g1 im @media(max-width:900px). Dort gehoert sie hin: nur so
     zieht die Leitung zwischen den Kacheln mit. */
  .sy__stage{max-width:none}

  /* ------------------------------------------------------------------
     8 · ABLAUF
     Die Schrittkarten lagen in einer grauen Flaeche mit 16 px Polster
     (Punkt 3 nimmt sie weg). Die Schrittzahl stand als 62-px-Ziffer
     im Kartenkopf und hat 78 px Polster nach oben erzwungen — am
     Handy ist das ein Achtel Bildschirm fuer eine Ziffer. Sie wird
     kleiner und ruecht in die Zeile des Titels.
     ------------------------------------------------------------------ */
  /* .ab__step:first-child{margin-top:-58px} (style.css 2315) hat die
     erste Karte unter die Lede gezogen — am Desktop verschraenkt sie
     sich mit dem Kopfblock, am Handy verdeckte sie den zweiten Satz. */
  .ab__step:first-child{margin-top:0}
  .ab__steps{gap:14px}
  .ab__step{padding:20px 20px 24px;gap:18px}
  .ab__no{position:static;font-size:15px;font-weight:600;line-height:1;
    letter-spacing:.06em;color:var(--blue);opacity:1;margin-bottom:-6px}
  /* Die Grafikflaeche zieht ueber das Kartenpolster hinaus (Regel im
     900er-Block oben). Dort sind es 24 px, hier ist das Polster 20. */
  .ab__media{order:2;width:calc(100% + 40px);margin:0 -20px}
  .ab__body{order:3}
  .ab__sub{margin-bottom:16px}
  .ab__list{gap:10px}

  /* ------------------------------------------------------------------
     9 · KONTAKT
     Das Freisteller-Foto stand 238 px breit in einer 340 px breiten
     Spalte, rechts daneben 102 px Nichts. Am Handy bekommt es die
     volle Breite.
     ------------------------------------------------------------------ */
  .contact__photo{width:100%}
  /* Voll breit waere der Freisteller 520 px hoch und damit die halbe
     Seite. 320 px ist die Breite, bei der Kopf und verschraenkte Arme
     beide gross herauskommen, ohne den Abschnitt zu uebernehmen. */
  .contact__photo img{width:100%;max-width:320px}
  .contact__panel{margin-top:4px}
  .crow{padding:14px 0}

  /* ------------------------------------------------------------------
     10 · BAUSTEINE — Wischstreifen, aber richtig gebaut
     Vorbefund bei 390 px: neun Karten auf 291 x 578 px Zwangshoehe.
     Weil .lk__g mit margin-top:auto an die Kartenunterkante geht,
     entstand bei kurzem Text ein Loch von bis zu 177 px zwischen
     Textende und Grafik (Karte 01: 53, Karte 05/07/08: 177). Neun
     Karten, neun verschiedene Abstaende. Dazu die Mockups auf
     gs=0,70 gerechnet — ihre 10-px-Beschriftungen landeten bei 7.

     Geloest nach dem Muster von expectleads.de (dort gemessen bei
     375 px: Karte 236 = 0,63 der Breite, Luecke 22,7, alle Karten
     genau 453 hoch):

     1. GRAFIK NACH OBEN, mit fester Hoehe auf jeder Karte. Dadurch
        beginnen alle Grafiken auf derselben Linie, und der Rest, den
        eine kurze Textlaenge uebrig laesst, sammelt sich unten am
        Kartenboden — wo man ihn nicht sieht. Das Loch in der Mitte
        kann so nicht mehr entstehen.
     2. BESCHNEIDEN STATT SCHRUMPFEN. expectleads stellt ein 286 px
        breites Bild in einen 236 px Rahmen und schneidet ab
        (.scale-1-5, Versatz -35). Genauso hier: das Mockup bleibt auf
        lesbarer Groesse, der Rahmen zeigt den Ausschnitt. Der
        Brennpunkt ist je Karte einstellbar (--gx), weil bei jedem
        Mockup etwas anderes in der Mitte stehen muss.
     3. Karte 0,72 der Bildschirmbreite statt 0,84 — die naechste
        Karte schaut sichtbar herein, sonst kuendigt nichts an, dass
        es neun sind.
     ------------------------------------------------------------------ */
  .bst__grid{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;margin:0 -22px;padding:4px 22px 28px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bst__grid::-webkit-scrollbar{display:none}
  .bst .lk{display:contents}
  /* 80 statt 72 Prozent: bei 72 war der Rahmen 247 px breit und hat
     vom 406er Mockup 26 Prozent abgeschnitten — bei neun verschiedenen
     Mockups traf das jedes Mal etwas anderes (Preis, Schaltflaeche,
     halbe Zeile). Bei 80 Prozent ist der Rahmen 312 px, es bleiben
     8 Prozent Schnitt, und die naechste Karte schaut immer noch
     64 px herein. Die Kartenbreite ist hier der bessere Hebel als
     neun einzeln gesetzte Brennpunkte. */
  /* 80vw statt 80%: Prozent bezieht sich auf den Streifen (346 px bei
     390 Geraetebreite) und ergab nur 277 px Karte. vw rechnet gegen
     den Bildschirm — 312 px bei 390, und der Wert bleibt vorhersagbar. */
  .bst .lk__c{flex:0 0 min(80vw,330px);scroll-snap-align:center;margin:0;
    display:flex;flex-direction:column;padding:0 0 22px}

  /* Grafik an den Kartenkopf: order -1 holt sie vor Nummer, Label,
     Headline und Text. margin 0 statt auto — kein Fuellabstand mehr. */
  .bst .lk__g{order:-1;margin:0 0 18px;height:196px;flex:none;
    border-radius:2px 2px 0 0;overflow:hidden;position:relative}
  /* Der Rahmen zeigt einen AUSSCHNITT des 406x246-Mockups. Welchen,
     bestimmen --fx/--fy je Karte: Werte in Entwurfs-Pixeln, positiv
     schiebt das Mockup nach rechts/unten. Die Verschiebung steht
     NACH scale(), rechnet also in den Koordinaten des Mockups —
     so kann man sie direkt aus dem Entwurf ablesen. */
  .bst .lk__g > *{position:absolute!important;left:50%;top:50%;
    transform:translate(-50%,-50%) scale(var(--gs,1))
              translate(var(--fx,0px),var(--fy,0px));
    transform-origin:50% 50%}
  /* Brennpunkte je Karte, in Entwurfs-Pixeln des 406er Mockups.
     Ablesbar aus der Rastermontage aller neun Rahmen: die meisten
     Mockups sitzen leicht links von ihrer eigenen Rahmenmitte, weil
     sie am Desktop rechts auslaufen duerfen. Positiv = nach rechts.
     01 „…dsanierung in Tulln" links angeschnitten
     03 „sponsert" links angeschnitten
     04 „In der N[aehe]" rechts angeschnitten
     05 „…60 Sekunden beworben" links angeschnitten
     06 „…ORGEN FUER / R, WAERME" links angeschnitten
     07 „…rufen" und „…etrieb" links angeschnitten
     08 „…er macht ein Komplettbad in Tulln?" links angeschnitten
     09 „…bMount" und „…bungen" links angeschnitten */
  .bst .lk--6 .lk__c:nth-child(1) .lk__g{--fx:24px}
  .bst .lk--6 .lk__c:nth-child(3) .lk__g{--fx:14px}
  .bst .lk--6 .lk__c:nth-child(4) .lk__g{--fx:-16px}
  .bst .lk--6 .lk__c:nth-child(5) .lk__g{--fx:10px}
  .bst .lk--6 .lk__c:nth-child(6) .lk__g{--fx:18px}
  .bst .lk--3 .lk__c:nth-child(1) .lk__g{--fx:26px}
  .bst .lk--3 .lk__c:nth-child(2) .lk__g{--fx:12px}
  .bst .lk--3 .lk__c:nth-child(3) .lk__g{--fx:16px}

  /* Text und Kopfzeile bekommen das Polster, die Grafik nicht. */
  .bst .lk__lbl,.bst .lk__c--kurz .lk__lbl,
  .bst .lk__h,.bst .lk__c--kurz .lk__h,
  .bst .lk__do,.bst .lk__c--kurz .lk__do{margin-left:20px;margin-right:20px}
  .bst .lk__c--kurz .lk__lbl{margin-right:46px}
  /* Nummer und Aufklapp-Knopf sassen am Kartenkopf — der ist jetzt die
     Grafik, sie lagen also auf dem Mockup. 214 px = Grafikhoehe 196
     plus 18 Abstand, also genau die Zeile des Labels. Das ist auf
     jeder Karte dieselbe Linie, weil die Grafik feste Hoehe hat. */
  .bst .lk__no{top:214px;right:20px}

  /* ------------------------------------------------------------------
     10b · ABLAUF — „Nach dem Launch: Werbung schalten auf Google"
     Die Grafik ist als 830 x 470 gebaut: Ads-Dashboard mit steigender
     Kurve links, die Google-Anzeige rechts oben, drei Kennzahlen
     ueberlappend unten. Am Handy lag sie in einem 274 px breiten
     Kaesten und war damit auf Faktor 0,330 gerechnet — ihre 13-px-
     Beschriftungen landeten bei 4 px.

     Zusammenschieben geht hier nicht, also wird neu gestapelt. Die
     drei Bloecke sind eigene absolute Elemente, das laesst sich per
     CSS umsetzen. Massstab nach Aufgabe: was Text traegt, bleibt
     lesbar — die Anzeige in Originalgroesse, die Kennzahlen bei 0,78.
     Das Dashboard darunter ist Bild, keine Schrift: seine Aussage ist
     die steigende Kurve, und die haelt auch 0,60 aus.
     ------------------------------------------------------------------ */
  /* Der 1000er-Block weiter oben rechnet diese Grafik per Container-
     Query klein. Beim Neustapeln stoert das — hier abschalten. */
  #ablauf div:has(> [style*="width:830px"]){
    container-type:normal;aspect-ratio:auto;overflow:visible;
    height:auto;position:static}
  /* Der Kasten hat inline padding:44px 36px — davon blieben dem Text
     274 von 346 px, also 28 Zeichen pro Zeile. Am Handy 22 seitlich,
     die Grafikbuehne darunter bekommt die volle Breite. */
  #ablauf div:has(> div > div > [style*="width:830px"]){padding:26px 22px 0!important}
  #ablauf div:has(> div > [style*="width:830px"]){
    padding:22px 0 0!important;margin-left:-22px;margin-right:-22px}
  #ablauf [style*="width:830px"]{
    position:relative!important;transform:none!important;
    width:346px!important;height:498px!important;margin:0 auto!important}
  /* Anzeige nach oben, Originalgroesse */
  /* Die Anzeige ist mit Suchfeld 372 Entwurfseinheiten breit, also
     26 mehr als die Buehne — mittig gesetzt statt links angeschlagen. */
  #ablauf [style*="width:830px"] > [style*="left:492px"]{
    left:-13px!important;top:0!important;transform:none;transform-origin:0 0}
  /* Dashboard darunter */
  #ablauf [style*="width:830px"] > [style*="left:8px"]{
    left:0!important;top:186px!important;transform:scale(.60);transform-origin:0 0}
  /* Kennzahlen zum Schluss */
  /* 474 x 0,73 = 346, passt damit genau in die Buehne: „Klickrate"
     wurde bei 0,78 rechts angeschnitten. */
  #ablauf [style*="width:830px"] > [style*="left:183px"]{
    left:0!important;top:404px!important;transform:scale(.73);transform-origin:0 0}

  /* ------------------------------------------------------------------
     10c · FUSSBEREICH
     Gemessen: alle 14 Anfassziele unter 44 px lagen hier. Die
     Linkzeilen waren 17 px hoch — auf einem Telefon trifft man das
     nicht zuverlaessig. 44 px ist das Mindestmass, das Apple und die
     WCAG nennen.
     Damit der Fussbereich davon nicht waechst, stehen „Branchen" und
     „Ressourcen" am Handy nebeneinander statt untereinander: gemessen
     598 -> rund 420 px, trotz groesserer Ziele.
     ------------------------------------------------------------------ */
  .ft__top{grid-template-columns:1fr 1fr;gap:26px 20px}
  .ft__brand{grid-column:1/3;margin-bottom:6px}
  /* Kontakt ueber die volle Breite mit seinen zwei Eintraegen
     nebeneinander, darunter Branchen und Ressourcen als Paar — beide
     haben drei Eintraege und stehen damit auf gleicher Hoehe. */
  /* nth-of-type zaehlt nach Tag, nicht nach Klasse: das erste div im
     Fuss ist .ft__brand, deshalb trifft .ft__col:first-of-type nichts
     — auch die gleichlautende Desktop-Regel in style.css (Zeile 902)
     laeuft ins Leere. Kontakt ist das ZWEITE div. */
  .ft__col,.ft__col:first-of-type{grid-column:span 1;margin-bottom:0}
  .ft__col:nth-of-type(2){grid-column:1/3}
  .ft__col:nth-of-type(2) ul{grid-template-columns:1fr 1fr;gap:0 20px}
  .ft__col h5{margin-bottom:6px}
  .ft__col ul{gap:0}
  .ft__col li{display:flex}
  .ft__col a{display:flex;align-items:center;min-height:44px;width:100%;
    font-size:15px;line-height:1.35}
  .ft__col a::after{bottom:10px}
  .ft__legal{margin-top:40px;gap:10px;flex-direction:column;align-items:flex-start}
  .ft__legal a{display:inline-flex;align-items:center;min-height:44px}

  /* Restliche Ziele unter 44 px, gemessen am 23.09.2026:
     Telefonnummer und E-Mail im Kontaktblock (25 px), der
     Garantie-Link im Hero (16 px), die Wortmarke im Fuss (30 px). */
  #kontakt .crow a,#kontakt .crow strong a{display:inline-flex;align-items:center;min-height:44px}
  html #start.hero--v2 .hero__risk a{padding:14px 0}
  .ft__logo{min-height:44px}
  .hdr__logo{min-height:44px;align-items:center}

  /* ------------------------------------------------------------------
     10d · UMBRUECHE — Waisenzeilen
     Gemessen bei 390 px: acht Stellen mit einem einzelnen Wort auf der
     letzten Zeile, 16 bis 28 Prozent der Kastenbreite. Alle vier
     Pain-Headlines waren betroffen ("… die Qualitaet.", "… Team.",
     "… Auftrag.", "… nicht.").

     Verglichen wurden drei Wege:
       kleinere Schrift  -> Karte 1 wird einzeilig, die anderen bleiben
                            waisig; die vier Karten haben dann
                            unterschiedliche Groessen. Verworfen.
       text-wrap:pretty  -> letzte Zeile 27 bis 38 Prozent. Besser,
                            aber noch kurz.
       text-wrap:balance -> 53 bis 58 Prozent, zwei fast gleich lange
                            Zeilen. Gewaehlt.
     Bemerkenswert: balance bricht bei allen vier Karten genau am
     Gedankenstrich um — die typografische Optimierung trifft dieselbe
     Stelle wie die Satzstruktur ("Nur der Preis zaehlt – / nicht die
     Qualitaet.").

     Fliesstext bekommt pretty, nicht balance: balance zieht alle
     Zeilen auf gleiche Laenge und erzeugt genau den schmalen
     Blockstil, der fuer Ledes abgelehnt ist. pretty repariert nur die
     letzte Zeile. */
  .h2,.pm-t,.lk__h,.lk__c--kurz .lk__h,.ab__t,.fst__name,.cs__h,
  #garantie .gt__card h3,#ablauf h2,.wh__c h3,.fq__q{text-wrap:balance}
  .lede,.pm-lede,#lage .pm-lede,.ab__sub,.pm-p,.lk__do,
  .lk__c--kurz .lk__do,.fs__lede,.gt__card p,.fst__note{text-wrap:pretty}

  /* Harte <br> im Fliesstext stammen vom Desktop, wo sie „ein Satz pro
     Zeile" erzeugen. Am Handy laeuft derselbe Text ueber drei bis
     sechs Zeilen — der erzwungene Umbruch sitzt dann mitten in der
     Spalte und schneidet eine kurze Zeile ab. Sie werden hier zu
     einem Leerzeichen.
     AUSGENOMMEN .fst__note: dort trennen sie zwei eigenstaendige
     Belege ("Platz 1 bei Google …" / "Platz 1 bei ChatGPT …"), die
     nicht zu einem Satz verschmelzen duerfen. */
  br.br-desktop{display:none}

  /* ------------------------------------------------------------------
     10e · RASTER BEGRADIGEN
     Gemessen bei 390 px ueber alle Sektionen. Die linke Kante stimmte
     bereits (84 Elemente auf x = 22), die Stufen dagegen nicht:

       H2            elf Sektionen 25/600 — #garantie stand auf 30,
                     die Innen-H2 im Ablauf auf 28/300.
       Sektionslabel elf Stueck auf 11 px / .13em — #vertrauen auf
                     14 px / .18em.
       Kartenlabel   zwei Groessen im Umlauf: 10 px / .12em in den
                     Bausteinen, 11 px / .14em in Fallstudien und
                     "Fuer wen".
       Lede          16,5 px / 1,55 — #garantie 17,5 / 1,6.
       Polster       60/60 — garantie 96/96, fallstudien oben 80,
                     ablauf unten 84.

     Jetzt zwei Label-Stufen statt drei (Sektion 11, Karte 10,5 — bei
     gleicher Laufweite), eine H2-Stufe plus eine klar darunter
     liegende fuer Ueberschriften INNERHALB einer Sektion, ein
     Lede-Wert, ein Polster.
     ------------------------------------------------------------------ */
  #garantie .h2{font-size:25px;line-height:1.2;font-weight:600}
  #ablauf h2[style]{font-size:23px!important;font-weight:600!important;
    line-height:1.24!important;letter-spacing:-.015em!important}
  #vertrauen .lbl{font-size:11px;letter-spacing:.13em}
  /* Spezifitaet: .fsx .fst__lbl und #bausteine .lk__c--kurz .lk__lbl
     setzen font/letter-spacing selbst und muessen entsprechend
     adressiert werden. */
  .fsx .fst__lbl,#fuerwen .wh__k{font-size:10.5px;letter-spacing:.13em}
  #bausteine .lk__c--kurz .lk__lbl,#bausteine .lk__lbl{
    font-size:10.5px;letter-spacing:.13em}
  html #start.hero--v2 .hero__sub{line-height:1.55}
  #garantie .gt__note{font-size:16.5px;line-height:1.55}
  /* final.css 903 setzt hier !important — deshalb hier ebenfalls. */
  #garantie.sec{padding-top:60px!important;padding-bottom:60px!important}
  #fallstudien.sec{padding-top:60px}
  #ablauf.sec{padding-bottom:60px}

  /* ------------------------------------------------------------------
     10f · BEWEGUNG AM HANDY
     Befund aus dem Vergleich: netfame.de hat mobil GAR KEINE
     Scroll-Einblendungen — nichts unterhalb des Sichtfelds steht auf
     opacity 0 oder versetzt, nur Hover-Uebergaenge (0,3 / 0,4 s).
     Ihre Seite traegt ueber Layout und Typografie. Von dort ist an
     Bewegung also nichts zu uebernehmen; unser Reveal-System ist
     bereits weiter und respektiert prefers-reduced-motion.

     Was am Handy aber stoert, ist die Taktung: Dauer 0,85 s und
     Staffelung in 0,09-Schritten bis 0,64 s. Am Schreibtisch scrollt
     man langsamer und sieht die Kette; am Telefon ist das letzte
     Element einer Gruppe erst da, wenn man es schon halb vorbei
     gescrollt hat.
     Dauer 0,55 s und Schritte von 0,05 s (letztes Element 0,30 statt
     0,64) — dieselbe Reihenfolge, nur im Tempo des Daumens.
     ------------------------------------------------------------------ */
  .anim [data-rv]{transition-duration:.55s}
  .anim [data-rv="m"]{transition-duration:.7s}
  .anim [data-d="1"]{transition-delay:.05s}
  .anim [data-d="2"]{transition-delay:.10s}
  .anim [data-d="3"]{transition-delay:.15s}
  .anim [data-d="4"]{transition-delay:.20s}
  .anim [data-d="5"]{transition-delay:.25s}
  .anim [data-d="6"]{transition-delay:.30s}

  /* ------------------------------------------------------------------
     11 · LAGE
     ------------------------------------------------------------------ */
  .pm-card{padding-bottom:26px}
  /* Die Grafikflaeche ist auf feste 196 px gesetzt, damit die vier
     Karten am Desktop auf einer Linie stehen. Am Handy stehen sie
     untereinander — die Hoehe darf dem Inhalt folgen. Gemessen sind
     die Grafiken 103 bis 164 px hoch, es standen also bis zu 60 px
     leer. */
  #lage .pm-graphic,#lage .pm-graphic.pg{height:auto;padding:14px 12px;margin-bottom:20px}
  .lk__c{padding:22px 22px 0}
  .lk__g{margin:auto -22px 0}
  .lk__lbl,.lk__c--kurz .lk__lbl{font-size:10px;letter-spacing:.12em}
  .pscene{margin-bottom:52px}
  .pscene__viz{margin-top:24px}
}