/* ═══════════════════════════════════════════════════════════
   TABLET- & MOBIL-OVERRIDES
   ───────────────────────────────────────────────────────────
   Sammelstelle für alles, was auf Tablets und Handys anders
   aussehen soll als am Desktop. Bewusst eine eigene Datei, weil
   die Breakpoints über wk-global.css und die Per-Page-<style>-
   Blöcke verstreut sind (14 verschiedene Werte) — hier ist auf
   einen Blick sichtbar, was abweicht, und der Desktop kann
   nicht versehentlich mitgezogen werden.

   Wird in build.mjs → htmlShell() NACH wk-global.css geladen.

   ⚠️ Jede Regel hier braucht den `body `-Präfix. Die Per-Page-
   Styles liegen in <style>-Blöcken IM BODY, stehen also in der
   Dokumentreihenfolge hinter diesem <link> im <head> — bei
   gleicher Spezifität würden sie gewinnen. `body .foo` (0,1,1)
   schlägt `.foo` (0,1,0) unabhängig von der Reihenfolge.
   Ohne den Präfix greift z. B. .rr-pain__grid nicht.
   Bei Page-Regeln mit ID-Selektor (z. B. `#ls-zielgruppen
   .ls-grid`) reicht `body ` nicht — dann hier ebenfalls die ID
   mitschreiben.

   ⚠️ Die Datei hat SECHS Media-Blöcke. Beim Einfügen einer neuen
   Regel zuerst entscheiden, in welchen sie gehört:

     1. `769–1024 px` — nur Tablet-Hochkant.
        iPad 820, iPad Pro 11" 834, iPad Pro 12,9" 1024.
        Querformat beginnt erst bei 1133 px und bleibt damit auf
        Desktop-Layout. iPad mini hochkant (744) fällt unter 769
        und nutzt das Mobil-Layout.

     2. `bis 1024 px` — Tablet UND Mobil, gleicher Wert.
        Deckt auch den Korridor 641–768 px ab, in dem sonst
        weder die Tablet- noch die Mobil-Regeln greifen.

     3. `769–900 px` — schmales Tablet-Hochkant. Für Abschnitte
        mit eigenem Umbruchpunkt bei 900 px, die zwischen 901
        und 1024 px noch zweispaltig sind. Wer dort `order`
        setzt, dreht die SPALTEN statt der Stapelreihenfolge.

     4. `bis 768 px` — nur Mobil, wenn der Wert vom Tablet
        abweichen muss (z. B. Pill-Abstand: Tablet 20, Mobil 32,
        weil die Pills mobil mehrzeilig umbrechen).

     5. `bis 640 px` — Handy im engeren Sinn. Nur nötig, wenn
        eine Seiten-Regel ihren eigenen 640er-Umbruch hat und
        exakt dort korrigiert werden muss. Der Unterschied zu
        Block 4 ist das **iPad mini hochkant (744 px)**: das
        fällt in Block 4, aber NICHT hierher — Werte, die für
        ein 744-px-Tablet zu knapp wären, gehören also hier
        hinein und nicht in Block 4.

     6. `bis 360 px` — sehr schmale Geräte (iPhone SE 1. Gen 320,
        alte Android-320dp). Nur für Raster, die rechnerisch
        nicht mehr nebeneinander passen. Vorher die
        min-content-Breiten messen, nicht schätzen — welcher
        Umbruchpunkt nötig ist, hängt am längsten Wort bzw. der
        größten Zahl im Raster.
═══════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* ── Karten-Dreier untereinander statt nebeneinander ────────
     Ralf-Feedback 2026-08-06: dreispaltig quetscht die Karten
     hochkant auf 233–304 px, der Fließtext bricht nach 2–3
     Wörtern um. Betrifft alle fünf 3er-Raster der Site:
       .wk-grid-3    → #ue-werte (ueber-uns), #vs-usp
                       (verkaufsservice), #sv-vorteile
                       (sie-wollen-vermieten), #jobs-warum
                       (karriere)
       .rr-pain__grid → #rr-pain (sie-wollen-verkaufen)
     Mobil kein Portierungs-Fall: wk-global.css:1447 (≤768) und
     die Seiten-Regeln stapeln dort schon.
     Nicht betroffen: 4er-Raster (.ho_services__grid, .mb-tiles,
     .wk-grid-4) und die Listen-Grids (.imm-grid, .ak-grid), die
     per auto-fill von selbst umbrechen. */
  body .wk-grid-3,
  body .rr-pain__grid {
    grid-template-columns: minmax(0, 1fr);
  }


  /* ── Einheitlicher Seitenrand: 40 px ────────────────────────
     Ralf-Feedback 2026-08-06: die Abschnitte springen hochkant
     zwischen 32 und 40 px hin und her, die Textkanten fluchten
     nicht.

     Ursache ist eine einzige Regel — wk-global.css
     `@media (max-width:1024px) { .wk-section { padding:80px 32px } }`.
     Sie greift nur auf `.wk-section`; alle seiteneigenen
     Abschnitte (.wk-hero, .rr-pain, .rr-steps, .rr-form,
     .ho_stats, .mb-section, .objd-*) und die per Page-CSS
     überschriebenen .wk-section (#ref-grid, #ak-marktberichte,
     #ak-blog, #imm-list) haben keinen Tablet-Breakpoint und
     bleiben bei 40. Gemessen bei 834 px: 38× 32 px gegen
     28× 40 px.

     40 px gewinnt, weil es auch der Desktop-Wert ist und die
     Mehrheit der Abschnitte ohnehin dort steht — so fluchten
     alle Kanten, ohne 28 Einzelregeln nachzuziehen.
     Die vertikale Tablet-Reduktion 100 → 80 px bleibt.
     Mobil kein Portierungs-Fall: dort setzt wk-global.css:1451
     schon einheitlich 64px 20px.

     `!important` ist nötig, weil die Basisregel in
     wk-global.css selbst `!important` setzt; der `body `-Präfix
     entscheidet dann über die Spezifität.

     Nicht betroffen: die randlosen Bildbänder (#sv-trenner,
     #vs-trenner, #svk-trenner) und .ho_reviews — die stehen
     absichtlich auf 0, damit Bild bzw. Marquee voll ausläuft
     (.ho_reviews .wk-inner hat seine eigenen 40 px). */
  body .wk-section {
    padding: 80px 40px !important;
  }

  /* ⚠️ REGRESSIONS-FIX zur Regel darüber (Fund Mobil-Audit
     2026-08-06): `.legal-page { padding-top:160px !important }`
     (legal/impressum.html:58, 0,1,0) verlor gegen
     `body .wk-section` (0,1,1) — Impressum + Datenschutz hatten
     am Tablet nur 16 px zwischen blauem Header und erster
     Textzeile statt der 160er-Kopfzone (mobil sind es 96 px).
     (0,2,1) stellt den Seitenwert wieder her. */
  body .wk-section.legal-page {
    padding-top: 160px !important;
  }


  /* ── Footer: Copyright-Zeile ausblenden ─────────────────────
     Tunahan 2026-08-06. Betrifft nur `.ri-footer__copy`
     („© 2026 Richter Immobilien GmbH · Mannheim · Designed by
     Webtastic"). Die Rechtslinks darunter (`.ri-footer__legal`:
     Impressum / Datenschutz / Cookie-Richtlinie) bleiben stehen
     — die sind Pflicht und gehören nicht zur Copyright-Zeile.

     ⚠️ Zwei Hinweise:
     - Bewusst NUR Tablet (Mobil-Audit 2026-08-06: mobil gibt es
       keinen Defekt, den die Regel lösen würde — Bottom-Bar ist
       dort ohnehin gestapelt).
     - Der Webtastic-Credit steckt in dieser Zeile und ist in
       CLAUDE.md als „Footer-Pflicht" vermerkt. Auf ausdrückliche
       Entscheidung von Tunahan (= Webtastic) hier ausgeblendet. */
  body .ri-footer__copy {
    display: none;
  }


  /* ── Startseite: Skyline tiefer setzen ──────────────────────
     Ralf-Feedback 2026-08-06. Die Silhouette wird per negativem
     margin-top unter die Stat-Zahlen gezogen (-70px, home.html:911).
     Am Tablet stehen die Stats in 2×2 statt 4 nebeneinander, die
     Zeile sitzt dadurch tiefer — die Türme liefen bis an die
     Labels. -16px ist derselbe Wert, den die Mobil-Regel schon
     nutzt (home.html:923) — deshalb mobil nichts zu portieren. */
  body .ho_stats__skyline {
    margin-top: -16px;
  }


  /* ── Leistungsübersicht: Zielgruppen-Karten nebeneinander ───
     Tunahan 2026-08-06 („in eine Zeile, ich schau ob das passt").
     Die Seite stapelt die zwei Foto-Cards ab 880 px
     (leistungsuebersicht.html:470) — im Tablet-Bereich also
     untereinander. Zwei Karten quetschen sich nicht wie die
     Dreier-Raster: bei 834 px sind es 367 px pro Karte, bei
     1024 px greift die 860-px-Kappung und es sind 420 px.
     Mobil bewusst NICHT: bei 375 px wären es 157-px-Karten mit
     Inhaltsüberlauf (gemessen +18–25 px).
     Selektor braucht die ID, weil die Page-Regel selbst eine
     ID nutzt (1,1,0). */
  body #ls-zielgruppen .ls-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 860px;
  }


  /* ── Verkaufsservice: Button "Die 8 Schritte ansehen" raus ──
     Tunahan 2026-08-06. Der Button existiert genau einmal
     (verkaufsservice.html:126) und ist ein Sprunglink auf
     #vs-schritte weiter unten auf derselben Seite — der
     Abschnitt kommt beim Weiterscrollen ohnehin.
     Über den href adressiert statt über eine neue Klasse, damit
     die Seiten-HTML unangetastet bleibt.
     ⚠️ Bewusst NUR Tablet (Mobil-Audit: mobil ist er die einzige
     Aktion des Abschnitts, und der Sprungweg ist dort LÄNGER als
     am Tablet — 800 vs. 676 px).
     `!important` nötig: .wk-btn setzt display selbst mit
     !important (wk-global.css:613). */
  body #vs-intro a.wk-btn[href="#vs-schritte"] {
    display: none !important;
  }


  /* ── Über uns: Portrait links, Fakten rechts, sticky ────────
     Tunahan 2026-08-06. Die rechte Spalte von #ue-story ist eine
     Flex-Spalte (Inline-`style="display:flex;flex-direction:column"`,
     ueber-uns.html:120) mit Portrait-Karte oben und den zwei
     Mini-Stats darunter. Am Tablet klappt das äußere .wk-grid-2
     auf eine Spalte, die Karte lief dadurch über die volle
     Breite und wurde sehr hoch.

     Jetzt nebeneinander: Portrait links (58 %), die beiden
     Fakten-Boxen rechts untereinander gestapelt.
     `!important` wegen der Inline-Styles am Container.
     Mobil bewusst NICHT: bei 375 px blieben 194/121 px — die
     „5.200+" stünde außerhalb ihrer Karte (gemessen +31 px).

     Selektor über `> div:nth-child(2)` statt über eine Klasse —
     die rechte Spalte hat nur `wk-fade wk-fade--d2`, also keine
     eigene, verlässliche Klasse. */
  body #ue-story .wk-grid-2 > div:nth-child(2) {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  body #ue-story .wk-grid-2 > div:nth-child(2) > div:first-child {
    flex: 0 0 58%;
  }
  body #ue-story .wk-grid-2 > div:nth-child(2) > .wk-mini-stats {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    /* Sticky gehört HIERHIN, nicht auf die Spalte darüber: die Spalte
       ist am Tablet das letzte Element im Abschnitt und sitzt bündig am
       Ende ihres Sticky-Containers — es bliebe kein Scrollweg zum
       Kleben. Die Fakten-Boxen sind dagegen nur ~200px hoch und stehen
       in einer ~670px hohen Flex-Zeile neben dem Portrait: dort haben
       sie echten Spielraum. `top` = Nav-Höhe plus Luft. */
    position: sticky;
    top: 96px;
  }


  /* ── Startseite: Chris-Portrait raus ────────────────────────
     Tunahan 2026-08-06. Das Kontaktformular bleibt am Tablet
     bewusst gestapelt (zweispaltig würden die Felder auf
     166–173 px schrumpfen, gemessen). Dadurch stand das Portrait
     in voller Breite ÜBER dem Formular und schob das eigentliche
     Ziel weit nach unten. Erst auf 336 px verkleinert, dann auf
     Ansage ganz raus.

     ⚠️ Bewusst NUR Tablet. Mobil ist das gestapelte Layout der
     eigens gestylte Normalfall (home.html:2099–2108) und das
     Portrait Ergebnis zweier Ralf-Runden (mail-15/16) — Christina
     kommt sonst nirgends auf der Site vor. Ob sie mobil bleibt,
     verkleinert wird oder auch fällt: Ralf-Frage (STATUS.md).

     Das Grid muss mit auf eine Spalte: zwischen 961 und 1024 px
     ist `.ho_kontakt__grid` noch `0.85fr 1.15fr` (home.html:2096
     greift erst ab 960 px). Ohne die zweite Regel bliebe die
     leere Foto-Spalte stehen und das Formular säße in der
     schmaleren 0.85fr-Spalte. */
  body .ho_kontakt__person {
    display: none;
  }
  body .ho_kontakt__grid {
    grid-template-columns: minmax(0, 1fr);
  }


  /* ── Marktbericht: KPI-Kacheln als 2×2 ──────────────────────
     Tunahan 2026-08-06. `.mb-tiles` ist
     `repeat(auto-fit, minmax(220px, 1fr))` (build.mjs:1365).
     Bei 754 px Inhaltsbreite passen rechnerisch drei Spalten
     rein — die vier Kacheln brachen deshalb als 3+1 um, die
     vierte stand allein. Feste zwei Spalten geben ein sauberes
     2×2. Die Vorlage rendert immer genau vier Kacheln
     (build.mjs:1251–1254), das Raster geht also auf.
     Mobil bewusst NICHT: „1.435.000 €" bricht dort zweizeilig. */
  body .mb-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* ── Leistungsübersicht: Zielgruppen-Kopf einzeilig ─────────
     Tunahan 2026-08-06: „mach hier den br raus … und den –".
     Die H2 lautet am Tablet „Wer zu uns kommt und warum" in
     einer Zeile, der Lead läuft ohne harten Umbruch durch.

     Warum ein <span> im HTML: den <br> könnte CSS allein
     ausblenden, den Gedankenstrich nicht — Text per CSS zu
     ersetzen wäre schlecht für Vorlesesoftware, Suchmaschinen
     und Kopieren. Deshalb sind <br> und „–" in
     leistungsuebersicht.html in .ls-zg-break gekapselt.

     ⚠️ Diese Tablet-Regel blendet BEIDE Spans aus (H2 + Lead).
     Mobil (Block 4) nur den Lead-Span: die H2 bricht bei
     375–400 px ohne den harten Umbruch mit der Waise „warum"
     um — dort bleibt der gesetzte Umbruch die bessere Wahl. */
  body #ls-zielgruppen .ls-zg-break {
    display: none;
  }


  /* ── Hero: Abstand über der Pill-Zeile auf 20 px ────────────
     Tunahan 2026-08-06: .wk-hero__pills hatte margin-top 52px
     (wk-global:421) → 20px.

     ⚠️ KORREKTUR eines ersten Fehlversuchs: Ich hatte zusätzlich
     `.wk-hero__sub { margin-bottom: 0 }` gesetzt, weil ich die
     36px des Subtextes für den Gegenpart der 52px hielt. Falsch
     — auf den meisten Heroes steht zwischen beiden noch ein
     `.wk-hero__ctas`-Block (Buttons). Die 36px sind also der
     Abstand Subtext → BUTTONS, nicht Subtext → Pills.

     Mobil gilt ein EIGENER Wert (32 px, Block 4): dort sind die
     CTAs eine gestapelte Vollbreiten-Spalte und die Pills brechen
     auf 2–3 Zeilen mit 12 px Zeilenabstand um — 20 px läsen sich
     als Teil der Pill-Liste. */
  body .wk-hero__pills {
    margin-top: 20px !important;
  }


  /* ── Objektseite: Galerie-Unterkante an die Eckdaten ────────
     Tunahan 2026-08-06 („von den Bildern den unteren Abstand 0").
     Die 32px Innenabstand der Eckdaten-Section darunter reichen
     als Trennung, vorher waren es 64 + 32 = 96px.
     Nur Tablet: die Ansage fiel im 40-px-Rand-Kontext; mobil hat
     die Galerie eigene 16/48-Werte (build.mjs ≤720). */
  body[data-page^="objektangebote/"] .objd-gallery {
    padding-bottom: 0;
  }


  /* ── Objektseite: Spaltenabstand im Content-Layout auf 0 ────
     Tunahan 2026-08-06. `.objd-content__layout` ist ab 980 px
     zweispaltig (`1fr 360px`, gap 64px — build.mjs:713).
     Nur der SPALTEN-Abstand geht auf 0, der Zeilen-Abstand
     bleibt: unterhalb von 980 px ist das Layout einspaltig, dort
     trennen die 48 px den Textteil von den Seitenkarten. Würde
     `gap: 0` gesetzt, klebten die beiden Blöcke bei 834 px
     aneinander. */
  body .objd-content__layout {
    column-gap: 0;
  }


  /* ── Vertikale Abstände auf den 80er-Rhythmus ───────────────
     Tunahan 2026-08-06. Fünf Abschnitte standen auf 100/100
     statt der 80/80, die `.wk-section` am Tablet vorgibt:
       /sie-wollen-verkaufen/  #rr-pain · #rr-steps · #rr-form
       /sie-wollen-verkaufen/  #reviews
       /                       #reviews
     Vier davon liegen auf sie-wollen-verkaufen — die Seite nutzt
     den eigenen `.rr-*`-Namespace und wurde nie auf das
     .wk-section-System umgestellt (`padding: 100px 40px`,
     sie-wollen-verkaufen.html:13/226/295).
     Mobil kein Portierungs-Fall: die Seite hat eigene
     ≤640-Regeln (72px 20px), #reviews steht dort auf 64/64.

     Nur die vertikalen Werte werden angefasst. Der Seitenrand
     stimmt bei den rr-* schon (40 px), und `.ho_reviews` steht
     absichtlich auf 0 horizontal, damit das Marquee voll
     ausläuft — ein `padding: 80px 40px` würde das kaputtmachen.

     Kein `!important` nötig: die Seiten-Regeln sind
     Klassen-Selektoren (0,1,0), `body #id` ist (1,0,1).

     ⚠️ Nicht dabei: #fakten („Fakten statt Versprechen",
     Startseite) steht weiter auf 100/100 — von Tunahan nicht
     mitgenannt, deshalb bewusst unangetastet. */
  body :is(#rr-pain, #rr-steps, #rr-form, #reviews) {
    padding-top: 80px;
    padding-bottom: 80px;
  }

}


/* ═══════════════════════════════════════════════════════════
   ZWEITER BLOCK: TABLET **UND** MOBIL (bis 1024 px)
   ───────────────────────────────────────────────────────────
   Alles hier gilt zusätzlich für Handys, mit IDENTISCHEM Wert.
   Deckt automatisch auch den Korridor 641–768 px ab, in dem
   sonst weder Tablet- noch Mobil-Breakpoints greifen.
   Desktop (ab 1025 px) bleibt außen vor.

   2026-08-06 per Mobil-Audit (13 Agenten, jede Empfehlung
   adversarial gegengeprüft) aus Block 1 hierher verschoben:
   Hero-Einzug, Kopf-Abstände, #ueber-Gap, Banner-Back,
   Hero-Sub vor Pills, Objektseiten-Umsortierung.
═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ══ REGEL: Kopf folgt dem Inhalt ═══════════════════════════
     Tunahan 2026-08-06: „Wenn der Inhalt eines Abschnitts
     zentriert ist, dürfen Titel, Eyebrow und Subtext zentriert
     sein. Ist der Inhalt linksbündig, wird auch der Kopf
     linksbündig." Gilt für den Text IN den Karten, nicht nur
     für deren Anordnung.

     Die Site hatte das gemischt: 13 von 40 Abschnitten hatten
     einen zentrierten Kopf über linksbündigem Inhalt. Alle 16
     Seiten wurden dafür vermessen — je Abschnitt die Ausrichtung
     des PRIMÄREN Inhaltsblocks (erste Karte bzw. erster Absatz)
     gegen die des Kopfes. Sekundäre Blöcke bleiben außen vor,
     sonst kippt eine linksbündige Trust-Zeile unter zentrierten
     Foto-Cards das Ergebnis (passiert bei #ls-zielgruppen).

     Reichweite (Entscheidung Tunahan): Tablet + Mobil, NICHT
     Desktop. Auf dem Desktop bleiben die 15 Abschnitte vorerst
     wie sie sind.

     Bewusst NICHT in der Liste:
       #ls-zielgruppen, #ls-leistungen, #ak-blog — Inhalt ist
         wirklich zentriert, Kopf darf mittig bleiben
       #kt-karte — der einzige zentrierte Text dort ist die
         Maps-Consent-Box, nicht der Inhalt (Fehlalarm im Audit)
     AUSNAHMEN — von Tunahan am 2026-08-06 ausdrücklich
     zurückgedreht, obwohl der Inhalt darunter linksbündig ist.
     Nicht versehentlich wieder in die Liste aufnehmen:
       #lokale-expertise (home) — Kopf „Lokale Expertise" +
         „Mannheim im Detail …" bleibt zentriert
       #reviews (home + sie-wollen-verkaufen) — Kopf
         „Was unsere Kunden über uns sagen" bleibt zentriert
       #ref-grid (referenzen) — „Verkaufte und vermietete
         Immobilien …" bleibt zentriert
       #imm-list (objektangebote) — „Immobilien in Mannheim …"
         bleibt zentriert
       #rr-pain (sie-wollen-verkaufen) — „Was viele Eigentümer
         beschäftigt" bleibt zentriert. Nachtrag 2026-08-08:
         Der Abschnitt war beim Tablet-Durchgang gar nicht erst
         aufgefallen, weil er `.rr-pain__*` statt
         `.wk-section-header` nutzt und damit durch den Selektor
         fiel. Gemessen steht er als einziger der Seite mit
         zentriertem Kopf über linksbündigen Karten (375 px:
         Heading Δ28,8 px · Subtext Δ7,8 px; 834 px: Δ161 px).
         Tunahan hat ihn ausdrücklich zentriert gelassen —
         NICHT „nachbessern".
     Muster dahinter: Listen-Abschnitte (viele gleichartige
     Karten) behalten den zentrierten Kopf; nur die inhaltlichen
     Karten-Abschnitte ziehen nach links.

     Drei Deklarationen nötig:
     1. `!important` — #lokale-expertise trägt die Zentrierung
        als Inline-`style` am Wrapper und am Lead. Eine wichtige
        Deklaration schlägt einen normalen Inline-Style; ohne
        sie bliebe die Regel wirkungslos.
     2. `margin-left: 0` — wk-global.css:1080/1081 zentriert H2
        und Lead zusätzlich als BOX (`max-width` + `margin-left:
        auto`). Ohne Zurücksetzen wäre der Text linksbündig,
        säße aber weiter in einem mittigen Kasten (gemessen
        127 px statt 40 px Kante). Die max-width (580/520 px)
        bleibt bewusst — als Zeilenmaß ist sie auch linksbündig
        richtig.
     3. Das Eyebrow ist ein Flex-Container und zentriert über
        `justify-content` (.wk-eyebrow--center), nicht über
        text-align — braucht also eine eigene Zeile. */
  body :is(#ue-werte, #warum, #faq,
           #svk-ansprechpartner, #sv-vorteile, #vs-usp, #vs-ansprechpartner,
           #jobs-warum, #jobs-stellen) :is(
      .wk-section-header,
      .wk-section-header .wk-h2,
      .wk-section-header .wk-lead) {
    text-align: left !important;
    margin-left: 0 !important;
  }
  body :is(#ue-werte, #warum, #faq,
           #svk-ansprechpartner, #sv-vorteile, #vs-usp, #vs-ansprechpartner,
           #jobs-warum, #jobs-stellen)
      .wk-section-header .wk-eyebrow {
    justify-content: flex-start !important;
  }

  /* Aktuelles nutzt einen eigenen Kopf-Container statt
     .wk-section-header — gleiche Regel, anderer Selektor. */
  body #ak-marktberichte .ak-section__head,
  body #ak-marktberichte .ak-section__title {
    text-align: left !important;
    margin-left: 0 !important;
  }
  body #ak-marktberichte .ak-section__head .wk-eyebrow {
    justify-content: flex-start !important;
  }


  /* ── Hero-Einzug raus ───────────────────────────────────────
     Ralf-Feedback 2026-08-06 (Tablet), Mobil-Audit bestätigt:
     die Heroes rücken 24 px weiter ein als der Rest der Seite.
     Der Einzug stammt aus dem Hero-Durchgang mail-15 (2026-06-23)
     und sitzt als margin-left auf dem Inner-Container, kommt also
     ZUSÄTZLICH zum Section-Rand: Tablet 40+24=64 gegen 40, mobil
     20+24=44 gegen 20. Mobil obendrein ein echter Box-Fehler:
     `.ho_hero__inner` läuft bei 375 px Viewport bis 379 px Breite,
     `overflow:hidden` kappt die rechte Rundung des weißen CTA.
     Betraf 12 von 13 Heroes; nur der Marktbericht-Banner
     (.wk-hero-banner) stand schon richtig.

     Drei Quellen, alle drei müssen überschrieben werden — die
     Spezifitäten unterscheiden sich, deshalb stehen sie einzeln
     im Selektor-Block (eine Selektorliste vererbt KEINE
     Spezifität untereinander):
       wk-global.css:222  .wk-hero__inner            (0,1,0)
       home.html:107      .ho_hero__inner            (0,1,0) !important
       ueber-uns.html:62  #wk-hero .wk-hero__inner   (1,1,0) !important
     `body .wk-hero__inner` (0,1,1) reicht für die ersten zwei,
     aber NICHT gegen den ID-Selektor — dafür die dritte Zeile. */
  body .wk-hero__inner,
  body .ho_hero__inner,
  body #wk-hero .wk-hero__inner {
    margin-left: 0 !important;
  }


  /* ── Startseite: Spaltenabstand "Über uns" halbiert ─────────
     Ralf-Feedback 2026-08-06: 80 → 40 px.
     Der Wert steht als Inline-`style="gap:80px"` am Grid, daher
     `!important`. Unter 1025 px ist das Grid einspaltig — die
     80 px wirkten als toter Raum zwischen Textblock und
     Ralf-Portrait, mobil genauso wie am Tablet. */
  body #ueber .wk-grid-2 {
    gap: 40px !important;
  }


  /* ── Marktbericht: Badge unter den Zurück-Link ──────────────
     Tunahan 2026-08-06. „Marktbericht 2025" saß neben
     „← Aktuelles & Marktberichte" statt darunter, weil beide
     inline-level sind (.wk-hero-banner__back = inline-flex,
     .wk-hero-banner__tag = inline-block). Das margin-bottom:36px
     am Zurück-Link läuft dadurch ins Leere.
     `display: flex` macht den Link block-level, die Badge rutscht
     auf die nächste Zeile; `width: fit-content` verhindert, dass
     die Klickfläche über die ganze Bannerbreite geht.
     Mobil-Audit: ab 397 px Viewport überlappte die Badge den
     Link sogar (−21 px vertikal), darunter No-Op — also auch
     mobil richtig.

     ⚠️ Dasselbe passiert auf dem Desktop (gemessen bei 1440 px:
     beide auf y=181). Bewusst nur bis 1024 px korrigiert. */
  body .wk-hero-banner__back {
    display: flex;
    width: fit-content;
  }


  /* ── Kopf-Abstände vereinheitlicht: 20 / 15 ─────────────────
     Tunahan 2026-08-06: „Eyebrow → Titel 20 px, Titel → Subtext
     15 px." Vorher war der Eyebrow-Abstand GRÖSSER als der
     Titel-Abstand (28 gegen 20) — der Kopf las sich dadurch als
     zwei getrennte Blöcke statt als eine Einheit.
     Ausgangslage mobil identisch zum Tablet (39/39 Nicht-Hero-
     Eyebrows auf 28 px, Schriftgrade bei 375 und 834 px gleich,
     alle clamp()-Werte am Boden), deshalb 2026-08-06 von Block 1
     hierher verschoben.

     ⚠️ Die 28 px stammen aus einem früheren Ralf-Wunsch —
     wk-global.css:110: „20px → 28px: global mehr Luft zwischen
     Eyebrow und H2 (Feedback Ralf, Mail 01)". Nach der
     Mobil-Portierung überlebt dieser Wunsch nur noch auf dem
     Desktop (≥1025 px) — bei der Abnahme mit Ralf ansprechen
     (steht in STATUS.md).

     ⚠️ HEROES SIND AUSGENOMMEN. Dort ist es ein anderes System:
     zwischen Headline und Subtext sitzt `.wk-hero__divider` (die
     120-px-Linie) — der große Abstand dort ist kein Fehler,
     sondern ein Gestaltungselement. Der echte Hero-Rhythmus ist
     28 / 22 / 28 / 36 (Eyebrow→Headline→Divider→Sub→CTAs).
     (Frühere Fassung dieses Kommentars behauptete „14 px
     Eyebrow-Abstand im Hero" — das war ein Messartefakt: die
     Bausteine tragen translateY(14px) als Reveal-Ausgangslage,
     gemessen wurde vor Abschluss der Animation. Real: 28 px.)
     Die Hero-Ausnahme ist zwingend Teil des Pakets — sonst kippt
     allein der Startseiten-Hero auf 20 px, weil er als einziger
     `.wk-eyebrow` statt `.wk-hero__eyebrow` nutzt.

     `:has(+ …)` trifft gezielt nur Titel, auf die WIRKLICH ein
     Subtext folgt. Ohne das würde die Regel auch den Abstand
     Titel → Karten-Raster ändern (z. B. #ref-grid,
     #ak-marktberichte, Impressum), wo derselbe margin-bottom
     doppelte Arbeit leistet. Ältere Browser ohne `:has()`
     behalten schlicht die alten Werte — unkritisch. */
  /* Nachtrag 2026-08-08: `.wk-body` ergänzt. Ohne sie fielen alle Köpfe
     durch, deren Subtext `.wk-body` statt `.wk-lead` nutzt — sie blieben
     auf den 20px aus `.wk-h2` (wk-global.css:543). Ein DOM-Scan über alle
     38 gebauten Routen findet dafür genau DREI Stellen, alle auf der
     Startseite: #regional, #ueber, #kontaktformular. Keine weitere Seite,
     auch keiner der 18 Marktberichte und keine Objekt-Detailseite.
     Beleg, dass 15px die Autorenabsicht ist: die H2 in #kontaktformular
     trägt seit jeher `style="margin-bottom:14px"` (home.html) — der
     Inline-Wert wird von wk-global.css:543 `!important` geschluckt und war
     nie wirksam.
     ⚠️ Bei #ueber ist der `.wk-body` streng genommen kein Subtext, sondern
     der erste von drei Fließtext-Absätzen. Bewusst mitgenommen: der Kopf
     bände sonst mit 20px enger ans Eyebrow als an seinen eigenen Text.
     ⚠️ H2 → Karten-Raster ist NICHT betroffen — dort folgt gar kein
     Element-Geschwister (geprüft an #fakten, #warum, #faq, #ref-grid,
     #imm-list), die `:has(+ …)`-Bedingung greift also nicht. */
  body :is(.wk-h1, .wk-h2, .rr-pain__heading, .rr-form__heading):has(
      + .wk-lead, + .rr-pain__sub, + .rr-form__text, + .wk-body) {
    margin-bottom: 15px !important;
  }
  body :is(.wk-eyebrow, .rr-pain__eyebrow, .rr-form__eyebrow) {
    margin-bottom: 20px !important;
  }
  /* Heroes zurück auf ihren eigenen Wert */
  body :is(.wk-hero, .wk-hero-banner) :is(.wk-eyebrow, .wk-hero__eyebrow) {
    margin-bottom: 28px !important;
  }


  /* ── Überschriften ausbalancieren (Waisen weg) ──────────────
     Mobil-Audit 2026-08-08. Keine einzige Überschriften-Klasse
     setzte `text-wrap`, computed war überall `wrap`. Auf Deutsch
     erzeugt das reihenweise Waisen — eine letzte Zeile aus einem
     einzelnen kurzen Wort. Gemessen bei 375px über alle 15
     Seiten: 21 Überschriften, deren letzte Zeile schmaler als
     30 % der breitesten Zeile war. Härtefälle: „Persönliche
     Präsentation vor ⏎ Ort" (12 %), „Empfänger von
     personenbezogenen ⏎ Daten" (17 %), „Wie viel ist Ihre
     Immobilie ⏎ wert?" (23 %).

     `balance` verteilt den Text gleichmäßig auf die vorhandenen
     Zeilen, statt jede Zeile maximal zu füllen. Gemessen:
     21 → 1 Waise. Der eine Rest ist eine Objekt-Überschrift, die
     schlicht sehr lang ist.

     Die Klassenliste ist gemessen, nicht geraten — genau diese
     kamen in den 21 Fällen vor. `h2`/`h3` sind für die
     Legal-Seiten dabei, deren Überschriften keine wk-Klasse
     tragen.

     Risikoarm: `balance` ändert nur, WO umgebrochen wird, nie
     die Boxbreite — es kann also kein Layout sprengen. Browser
     ohne Unterstützung (Safari < 17.5) ignorieren es und
     behalten das heutige Verhalten. Chrome balanciert von sich
     aus nur bis ~6 Zeilen, längere Blöcke bleiben unangetastet.

     Reichweite ≤1024 wie die übrigen Typo-Regeln dieses Strangs:
     Desktop bleibt bewusst außen vor. Dort ist derselbe Effekt
     erwünscht, gehört aber zur Desktop-Abnahme (STATUS.md). */
  body :is(h2, h3, .wk-h1, .wk-h2, .wk-h3,
           .wk-hero__headline, .rr-form__heading,
           .wk-steps__step-title, .ak-mb-card__title,
           .imm-card__title, .ls-card__title) {
    text-wrap: balance;
  }


  /* ── Hero: Subtext gibt den Pill-Abstand frei ───────────────
     Ohne Button-Block grenzt der Subtext direkt an die Pills
     (die 3 Objekt-Heroes). Dort kollabieren seine 36px mit dem
     margin-top der Pills zu max(36, x) — jeder Pill-Wert unter
     36 käme nie an. `:has(+ …)` nimmt dem Subtext den unteren
     Abstand NUR in diesem Fall; überall sonst bleiben die 36px
     als Abstand Subtext → Buttons erhalten.
     Wirkt zusammen mit: Pills 20px am Tablet (Block 1) bzw.
     32px mobil (Block 4). */
  body .wk-hero__sub:has(+ .wk-hero__pills) {
    margin-bottom: 0 !important;
  }


  /* ── Objektseite: Eckdaten hinter die Bilder ────────────────
     Tunahan 2026-08-06 (Tablet); Mobil-Audit: mobil noch stärker
     begründet — bei 375–393 px stehen sonst 555 px Eckdaten-
     Tabelle zwischen Hero und erstem Bild.

     `order` braucht einen Flex- oder Grid-Container, deshalb
     wird `main#content` hier zur Flex-Spalte. Der Selektor
     hängt an `data-page` (build.mjs:1870) und greift über das
     `^=` nur auf DETAILseiten — die Listenseite heißt schlicht
     "objektangebote", ohne Schrägstrich.

     ⚠️ Flex schaltet Margin-Collapsing zwischen den Abschnitten
     ab. Unkritisch, weil die objd-Abschnitte ihren Abstand über
     padding lösen, nicht über margin (geprüft).

     ⚠️ Audit-Werkzeuge müssen nach getBoundingClientRect().top
     sortieren, nicht nach DOM-Reihenfolge — `order` ändert nur
     die visuelle Position.

     ⚠️ Die Hintergründe müssen mittauschen. Am Desktop ist es
     weiß → getönt → weiß (Keyfacts, Galerie, Content). Unter
     1025 px ist die Reihenfolge anders, deshalb: Galerie weiß →
     Eckdaten weiß (optisch ein Block) → Content getönt. Die
     Alternanz bleibt damit erhalten. */
  body[data-page^="objektangebote/"] main#content {
    display: flex;
    flex-direction: column;
  }
  body[data-page^="objektangebote/"] .wk-hero      { order: 1; }
  body[data-page^="objektangebote/"] .objd-gallery { order: 2; background: #FFFFFF; }
  body[data-page^="objektangebote/"] .objd-content { order: 4; background: var(--wk-bg-1, #F8FAFC); }

  /* Eckdaten: weiß wie die Galerie, kompaktes 32/32-Padding.
     32 statt der ursprünglichen 48: erst ganz entfernt (Ansage
     „Abstand oben und unten weg"), dann auf Ansage wieder rein —
     ohne Padding lag die Rahmenlinie der Karte exakt auf der
     Abschnittskante. Mobil deckungsgleich mit dem nativen
     ≤720-Wert (32px 20px, build.mjs) — kein Konflikt. */
  body[data-page^="objektangebote/"] .objd-keyfacts {
    order: 3;
    background: #FFFFFF;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* ── Objektseite: Content-Layout-Gap auf 0 ──────────────────
     Tunahan 2026-08-19 — mobil ist das Layout einspaltig, der
     Grid-Gap (48px, build.mjs) stand als Lücke zwischen dem
     Beschreibungsteil und den Side-Cards. Die .objd-sections
     bringen mit ihren 32px Eigen-Padding genug Trennung mit.
     (Pendant zur column-gap-0-Regel im Tablet-Block ganz oben.) */
  body .objd-content__layout {
    gap: 0;
  }

  /* ── Objektseite: Ansprechpartner vor dem Anfrage-Formular ──
     Tunahan 2026-08-19 — mobil erst „Ihr Ansprechpartner", dann
     „Objekt anfragen". Die Side-Spalte ist Flex-Column
     (build.mjs), `order: 1` schiebt nur die Formular-Card ans
     Ende (alle anderen Cards stehen auf 0). Desktop unverändert. */
  body #objd-inquiry {
    order: 1;
  }


  /* ── Karriere: Hero-Ausschnitt nach rechts ──────────────────
     Tunahan 2026-08-19 — mobil zeigt der schmale Cover-Ausschnitt
     bei `center` nur die Frau, der Mann ist rechts abgeschnitten.
     68% rückt beide Personen (Köpfe + Oberkörper) ins Bild; für
     beide GANZEN Figuren ist der Ausschnitt zu schmal (Personen
     spannen ~27% der Bildbreite, sichtbar sind nur ~21%).
     !important nötig: wk-global setzt `center !important`. */
  body[data-page="karriere"] .wk-hero__bg {
    background-position: 68% center !important;
  }


  /* ── Karriere: Stellen-Bilder — Köpfe nicht abschneiden ─────
     Tunahan 2026-08-19 — .jobs-card__media img ist mobil fix
     208px hoch; je breiter das Handy, desto mehr wird vertikal
     weggeschnitten (bei 430px z. B. ~55% des Akquise-Bilds).
     Mit den Inline-Werten (32%/28%) wanderte der Schnitt in die
     Köpfe. Kleinere Y-Werte ankern den Ausschnitt oben bei den
     Gesichtern. !important nötig gegen die Inline-Styles. */
  body #jobs-stellen .jobs-card__media img[src*="backoffice"] {
    object-position: 50% 12% !important;
  }
  body #jobs-stellen .jobs-card__media img[src*="akquise"] {
    object-position: 60% 8% !important;
  }


  /* ── Referenzen + Objektangebote: Titel ohne 2-Zeilen-Deckel ─
     Tunahan 2026-08-19 — die Cards reservieren dem Titel per
     min-height fix zwei Zeilen (2.7em Referenzen / 2.6em
     Objektliste), damit die Karten im Desktop-Raster bündig
     abschließen. Mobil ist das Grid einspaltig — bei ein-
     zeiligen Titeln stand dadurch eine Leerzeile vor der
     Trennlinie. */
  body .imm-card__title {
    min-height: 0;
  }


  /* ── Banner-Hero: Abstand Zurück-Link → Eyebrow −25% ────────
     Tunahan 2026-08-19 (Marktbericht-Durchgang). 36px → 27px.
     Gilt für alle Seiten mit wk-hero-banner (Marktberichte,
     Blog-Beiträge). */
  body .wk-hero-banner__back {
    margin-bottom: 27px;
  }


  /* ── Formularfelder auf 16 px: kein iOS-Auto-Zoom ───────────
     Mobil-Audit 2026-08-08. iOS Safari zoomt beim Fokussieren
     JEDES Eingabefelds automatisch in die Seite hinein, sobald
     dessen `font-size` unter 16 px liegt — und zoomt danach
     nicht von selbst wieder heraus. Der Nutzer steht dann in
     einer vergrößerten, seitlich verschobenen Seite und muss
     manuell herauszoomen.

     Gemessen: 40 von 41 tippbaren Feldern der Site lagen
     darunter. Drei Quellen, alle mit `!important`:
       .wk-input             15px  (wk-global.css:1035)
         → 6 Felder je auf /, /kontakt/, /karriere/,
           /sie-wollen-vermieten/, /verkaufsservice/
           (inkl. <textarea> und dem <select> auf /karriere/,
            beide tragen dieselbe Klasse)
       .rr-form__input       15px  (sie-wollen-verkaufen.html:439)
       .objd-inquiry__input  14px  (build.mjs:981)
     Einzige Ausnahme, die schon richtig stand: .imm-search-input
     auf /objektangebote/ mit exakt 16 px.

     Nicht betroffen und deshalb NICHT in der Liste: Checkboxen
     (`.wk-consent__check`) lösen keinen Zoom aus, und die
     Honeypot-Felder (`name="hp_website"`) fokussiert nie jemand.
     Ein früherer Zähllauf hatte beide mitgezählt und kam auf 47.

     ⚠️ Reichweite ≤1024 statt ≤768: das größte iPhone ist quer
     932 px breit und läge sonst außerhalb. Der Block deckt damit
     jedes iPhone in beiden Ausrichtungen ab. Desktop bleibt
     bewusst bei 15 px — dort gibt es das Zoom-Verhalten nicht.

     16 px ist die exakte Schwelle, kein Sicherheitsaufschlag
     nötig; Safari zoomt erst UNTER 16. Die Feldhöhen sind
     padding-getrieben und ändern sich dadurch nur um ~1 px. */
  body :is(.wk-input, .rr-form__input, .objd-inquiry__input) {
    font-size: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   DRITTER BLOCK: NUR 769–900 px
   ───────────────────────────────────────────────────────────
   Schmales Tablet-Hochkant. Nötig, weil einzelne Abschnitte
   ihren eigenen Umbruchpunkt bei 900 px haben und zwischen
   901 und 1024 px noch zweispaltig sind.
═══════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 900px) {

  /* ── Startseite: #warum — Foto vor die blaue Box ────────────
     Tunahan 2026-08-06 („Reihenfolge tauschen"). Gestapelt kam
     bisher die blaue Textbox zuerst, das Foto darunter.
     `order` dreht die beiden Grid-Items, ohne die
     HTML-Reihenfolge anzufassen.

     ⚠️ Warum nur bis 900 px: .ho_warum stapelt erst ab 900 px
     (home.html:1101). Zwischen 901 und 1024 px ist der
     Abschnitt noch ZWEIspaltig — dort würde `order` nicht die
     Stapelreihenfolge drehen, sondern die Spalten vertauschen
     (Foto nach links, Box nach rechts). Genau das ist beim
     ersten Anlauf passiert und war nicht gewollt.
     Mobil: identische Regel in Block 4 (dort ist immer
     gestapelt, die 900er-Kante spielt keine Rolle). */
  body #warum .ho_warum__img {
    order: -1;
  }
}


/* ═══════════════════════════════════════════════════════════
   VIERTER BLOCK: NUR MOBIL (bis 768 px)
   ───────────────────────────────────────────────────────────
   Für Portierungen aus dem Tablet-Strang, deren WERT mobil
   abweichen muss, plus reine Mobil-Fixes. Quelle: Mobil-Audit
   2026-08-06 (13 Agenten, adversarial gegengeprüft).
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Startseite: #warum — Foto vor die blaue Box ────────────
     Mobiles Pendant zur Block-3-Regel; unter 769 px ist der
     Abschnitt immer gestapelt, `order` dreht also sicher die
     Stapelreihenfolge. Kosmetik-Hinweis: das Foto trägt
     `.wk-fade--d3` und blendet nach dem Tausch als LETZTES oben
     ein — fällt kaum auf, bei Gelegenheit Stagger-Klassen im
     HTML tauschen. */
  body #warum .ho_warum__img {
    order: -1;
  }


  /* ── Hero: Abstand über der Pill-Zeile 32 px (statt 20) ─────
     Bewusste Abweichung vom Tablet-Wert. Am Tablet sind CTAs
     eine waagerechte Zeile und die Pills eine Zeile — 20 px
     trennen zwei klare Bänder. Mobil sind die CTAs gestapelte
     Vollbreiten-Buttons und die Pills brechen auf 2–3 Zeilen
     mit 12 px Zeilenabstand — 20 px läsen sich als Teil der
     Pill-Liste. Härtefall /kontakt/: der Ghost-Button trägt
     denselben Text wie die erste Pill.
     Vorher mobil: 52 px. Wirkt zusammen mit der
     `sub:has(+pills)`-Regel in Block 2 (Objekt-Heroes). */
  body .wk-hero__pills {
    margin-top: 32px !important;
  }


  /* ── Leistungsübersicht: nur der Lead läuft durch ───────────
     Mobiles Pendant zur .ls-zg-break-Regel in Block 1 — aber
     bewusst NUR der Umbruch im Lead-Absatz. Die H2 behält ihren
     harten Umbruch: ohne ihn bricht „Wer zu uns kommt und warum"
     bei 375–400 px mit der Waise „warum" um. */
  body #ls-zielgruppen .wk-lead .ls-zg-break {
    display: none;
  }


  /* ── Overflow-Fix: .wk-grid-2-Kinder dürfen schrumpfen ──────
     Reiner Mobil-Fund (P1 im Audit): /verkaufsservice/ war die
     einzige Seite mit horizontalem Scroll (320 px: +56 · 360:
     +16 · 375: +1 px). Ursache: .wk-btn hat white-space:nowrap
     (wk-global:627); der Button „Wertermittlung für die Region
     anfragen" erzwingt 356 px min-content in einem 335-px-Track
     — Grid-Items haben default min-width:auto und geben
     min-content als Untergrenze weiter. Latent identisch auf
     /sie-wollen-verkaufen/ #rr-seo-mannheim (356,5 px).
     min-width:0 kappt die Untergrenze; dieselbe Fehlerklasse
     wurde auf der Startseite schon so gelöst (home.html:2102). */
  body .wk-grid-2 > * {
    min-width: 0;
  }


  /* ── Startseite: Hero-Overlay ohne Wisch-Animation ──────────
     Tunahan 2026-08-06: „auf Mobil die Animation mit dem Overlay,
     der von links nach rechts schießt, entfernen — das kann man
     nicht so clean darstellen."

     `.ho_hero__panel` fährt per `scaleX(0) → scaleX(1)` über
     1,6 s von links ein (home.html:82–86). Auf einem schmalen
     Schirm ist der Weg kurz, die Kante läuft sichtbar ruckelig
     durch und der Verlauf steht die halbe Zeit gestaucht da.
     `transform: none` = Identität, also derselbe Endzustand.

     ⚠️ Die Text-Staffelung MUSS mit: die Verzögerungen in
     home.html:92–98 (0,75 s bis 1,36 s) wurden bewusst so
     gewählt, dass der Text ERST NACH dem Overlay kommt. Ohne
     Overlay stünde der Hero sonst 0,75 s leer da. Hier auf
     0,05–0,66 s gestaucht — Reihenfolge bleibt, Wartezeit weg. */
  body .ho_hero__panel {
    transform: none !important;
    transition: none !important;
  }

  /* ⚠️ Zweite Regel nötig, sonst „spawnt" das Overlay (Tunahan
     2026-08-08: „wenn ich auf die Seite komme spawnt der Overlay
     drauf — auf Mobil sollte der schon drauf sein").

     wk-global.css:1108 hält die Hero-Bausteine im Startzustand,
     solange der Ladebildschirm läuft — für das Panel heißt das
     `html.ri-loading .ho_hero.is-visible .ho_hero__panel
      { transform: scaleX(0) !important }`.
     Das ist (0,4,1) !important und schlägt damit die Regel
     darüber (0,1,1) !important — bei zwei wichtigen
     Deklarationen entscheidet die Spezifität, nicht die
     Reihenfolge. Ergebnis mobil: Panel bleibt zusammengefaltet,
     bis `ri-loading` fällt, und schnappt dann wegen
     `transition: none` in EINEM Frame auf volle Breite. Als
     Filmstreifen gemessen: bei 3751 ms heller, ungedimmter Hero,
     bei 3972 ms sitzt das dunkle Overlay schlagartig drauf.

     Am Desktop ist genau das richtig — dort folgt der 1,6-s-Wisch,
     der ja erst nach dem Loader starten soll. Mobil gibt es
     keinen Wisch mehr (s. o.), also gibt es auch nichts zu
     staffeln: das Overlay ist ein Lesbarkeits-Layer und darf von
     der ersten Sekunde an stehen — hinter dem Ladebildschirm
     sieht es ohnehin niemand.

     Selektor 1:1 wie in wk-global gespiegelt → gleiche
     Spezifität (0,4,1), und tablet.css wird NACH wk-global.css
     geladen (build.mjs:1953/1956), also gewinnt diese hier.
     Die Text-Staffelung bleibt bewusst am Gate hängen — sie soll
     weiterhin erst nach dem Loader laufen. */
  html.ri-loading .ho_hero.is-visible .ho_hero__panel {
    transform: none !important;
  }
  body .ho_hero .wk-fade.is-visible          { animation-delay: 0.05s !important; }
  body .ho_hero.is-visible .wk-h1-line:nth-child(1) span { transition-delay: 0.12s !important; }
  body .ho_hero.is-visible .wk-h1-line:nth-child(2) span { transition-delay: 0.22s !important; }
  body .ho_hero.is-visible .wk-h1-line:nth-child(3) span { transition-delay: 0.32s !important; }
  body .ho_hero .wk-fade--d4.is-visible      { animation-delay: 0.42s !important; }
  body .ho_hero .wk-fade--d5.is-visible      { animation-delay: 0.54s !important; }
  body .ho_hero .wk-fade--d6.is-visible      { animation-delay: 0.66s !important; }


  /* ── Startseite: "Lokale Expertise" Kopf linksbündig ────────
     Tunahan 2026-08-06 — mobil ANDERS als am Tablet. Dort ist
     der Abschnitt eine ausdrückliche Ausnahme der Regel „Kopf
     folgt Inhalt" und bleibt zentriert (Block 2). Mobil soll er
     linksbündig sein wie die Textspalte darunter.

     `!important` + `margin-left: 0`: die Zentrierung steht als
     Inline-`style` am Wrapper und am Lead, zusätzlich zentriert
     wk-global.css:1080/1081 H2 und Lead als BOX (max-width +
     margin-left:auto). Beides muss weg, sonst säße linksbündiger
     Text weiter in einem mittigen Kasten. */
  body #lokale-expertise .wk-section-header,
  body #lokale-expertise .wk-section-header .wk-h2,
  body #lokale-expertise .wk-section-header .wk-lead {
    text-align: left !important;
    margin-left: 0 !important;
  }

  /* ── Startseite: "Lokale Expertise" Kopf-Abstand halbieren ──
     Tunahan 2026-08-19 — der Wrapper trägt `margin:0 auto 56px`
     als Inline-`style`, dadurch greift die globale Mobil-
     Reduktion (wk-global.css ≤640px: 40px) hier nie. 56 → 28px,
     `!important` nötig gegen das Inline-Style. */
  body #lokale-expertise .wk-section-header {
    margin-bottom: 28px !important;
  }


  /* ── Startseite: Stadtteil-Karte stark heranzoomen ──────────
     Tunahan 2026-08-06: „zoomen wir viel mehr an die Karte ran,
     sodass diese Mannheim-Karte fast den ganzen Bildschirm
     ausfüllt."

     Die Hotspots liegen alle zwischen 40–66 % links und
     34–71 % oben — die eigentlichen Stadtteile belegen also nur
     die mittleren ~26 × 37 % des Bildes, der Rest ist Rand.
     Bei 375 px waren die Klickpunkte dadurch wenige Pixel groß.

     Umgesetzt über die BREITE, nicht über `transform: scale()`:
     Hotspots und Tooltips sind in Prozent des Containers
     positioniert und wachsen dadurch korrekt mit — bei einem
     Scale würde auch die Tooltip-Schrift mitskalieren und
     unleserlich groß. Die negativen vertikalen Margins schneiden
     den leeren Rand oben/unten weg; die radiale Maske auf dem
     Bild (home.html:425) blendet die Kanten ohnehin aus, es gibt
     also keine harte Schnittkante.
     Der seitliche Überstand wird vom Abschnitt gekappt —
     `overflow-x: clip` statt `hidden`, damit die Tooltips nach
     oben/unten weiterhin herausragen dürfen. */
  body #lokale-expertise {
    overflow-x: clip;
  }
  body #lokale-expertise .ho_map {
    width: 185%;
    margin-left: -42.5%;   /* = -(185-100)/2 → die Karte bleibt mittig */
    margin-top: -16%;
    margin-bottom: -12%;
  }

  /* Tooltips mittig über die Karte statt an den Hotspot.
     Grund: sie erben die Prozent-Position ihres Hotspots und
     wandern beim Zoom mit nach außen. Gemessen ragte „Wallstadt"
     (der östlichste Punkt, damals left:66%, seit der
     Geo-Neukalibrierung 2026-08-08 left:64.5% — ändert nichts
     am Prinzip) bei 360–414 px um 1–12 px aus dem Bild und
     wurde vom `overflow-x: clip` abgeschnitten; bei kleineren
     Zoomstufen traf es stattdessen „Schwetzingerstadt" am
     Westrand. Den Zoom deswegen zu drosseln hätte den ganzen
     Effekt gekostet — mittig sitzen sie bei JEDER Zoomstufe
     sicher im Bild.
     `left` steht inline am Element, daher `!important`.
     Der Pfeil (`::after`) zeigt dann nicht mehr auf den Hotspot
     und wird ausgeblendet; die Zuordnung macht der angetippte
     Punkt selbst, der `.is-active` bekommt. */
  body #lokale-expertise .ho_map__tip {
    left: 50% !important;
    min-width: 0;
    max-width: 260px;
  }
  body #lokale-expertise .ho_map__tip::after {
    display: none;
  }


  /* ── Startseite: Skyline größer ─────────────────────────────
     Tunahan 2026-08-06: „ein bisschen größer, auch wenn links
     und rechts abschneidet — das ist nicht schlimm."
     Vorher 130 % / −15 % (home.html:923) → jetzt 190 % / −45 %.
     Der Abschnitt hat `overflow: hidden` (home.html:874), der
     Überstand wird also sauber gekappt. */
  body .ho_stats__skyline {
    width: 190%;
    margin-left: -45%;
  }


  /* ── Startseite: Google-Bewertung zentrieren ────────────────
     Tunahan 2026-08-06: „die 4,8 und die Sterne sind nicht
     zentriert."
     Der Badge (`.ho_reviews__google`) bricht mobil um: Logo in
     Zeile 1, Meta-Block in Zeile 2. Der Meta-Block ist eine
     Flex-Spalte mit `align-items: stretch`, die Bewertungszeile
     darin ein Flex-Container mit `justify-content: flex-start`
     — Zahl und Sterne standen also links, während der Text
     darunter zentriert war. */
  body .ho_reviews__google-meta {
    align-items: center;
  }
  body .ho_reviews__google-rating {
    justify-content: center;
  }
  body .ho_reviews__google-label {
    text-align: center;
  }


  /* ── Startseite: #leistungen — Cards ohne Seiten-Border ─────
     Tunahan 2026-08-19 — alle Fenster-Cards (blaue + drei Glas)
     sollen mobil links und rechts randlos bis an den Foto-Frame
     laufen. Oben/unten bleibt die 10px-Border als Fuge zu Frame
     und Nachbar-Card (gestapelt ergibt das 20px helle Fugen). */
  body #leistungen .ho_service-card {
    border-left: 0;
    border-right: 0;
  }


  /* ── Formular-Card: Padding halbieren ───────────────────────
     Tunahan 2026-08-19 — die „Termin anfragen"-Card (identisch
     auf 4 Seiten) trug `padding:44px 40px` als Inline-Style.
     Mobil auf die Hälfte. Das `!important` im Inline-Style
     wurde dafür in den 4 Pages entfernt — Inline-!important
     wäre von hier aus nicht überstimmbar. */
  body #jobs-form .wk-card,
  body #kt-kontakt .wk-card,
  body #sv-kontakt .wk-card,
  body #vs-kontakt .wk-card {
    padding: 22px 20px !important;
  }


  /* ── Eyebrow-Punkt an die erste Zeile ───────────────────────
     Mobil-Durchgang /sie-wollen-verkaufen/ 2026-08-08 (stand
     schon als Fund im Backlog). Die Eyebrow-Zeile ist ein
     Flex-Container mit `align-items: center`. Solange der Text
     einzeilig ist, sitzt der 6-px-Punkt damit korrekt auf
     Zeilenmitte. Sobald der Text mobil aber ZWEIzeilig umbricht,
     zentriert `center` den Punkt über beide Zeilen — er landet
     im Zwischenraum und zeigt auf nichts.
     Gemessen auf dieser Seite: `.rr-pain__eyebrow` („Die
     häufigsten Gedanken vor dem Verkauf") bricht bei 320 und
     375 px zweizeilig um, Punkt bei y=9 statt y=3.

     `flex-start` + `margin-top: 3px` reproduziert bei
     EINzeiligen Eyebrows exakt die alte Position und ist dort
     damit ein No-Op: Textzeile 12 px (font-size 12, line-height
     1), Punkt 6 px → zentriert wäre (12−6)/2 = 3 px. Deshalb
     darf die Regel gefahrlos site-weit stehen; sie wirkt nur
     dort, wo wirklich umgebrochen wird.

     Alle fünf Eyebrow-Familien der Site sind gelistet — sie sind
     baugleich (flex, align-items:center, gap 10, Punkt 6 px,
     Text 12 px/line-height 1), haben aber je eigene Klassen. */
  body :is(.wk-eyebrow, .wk-hero__eyebrow,
           .rr-pain__eyebrow, .rr-form__eyebrow, .rr-steps__eyebrow) {
    align-items: flex-start;
  }
  body :is(.wk-eyebrow__dot, .wk-hero__eyebrow-dot,
           .rr-pain__eyebrow-dot, .rr-form__eyebrow-dot, .rr-steps__eyebrow-dot) {
    margin-top: 3px;
  }


  /* ── Footer-Copyright: Zeilen überlappten sich ──────────────
     Mobil-Audit 2026-08-08. `.ri-footer__copy` und
     `.ri-footer__credit` stehen auf `line-height: 1 !important`
     (footer.html:125/131) bei 13px Schrift. Die Glyphenbox ist
     aber 16px hoch — sobald die Zeile umbricht, stehen die
     Zeilen 13px auseinander und überlappen sich um 3px.
     Gemessen bei 320 und 375px: 2 Zeilen, Zeilenabstand 13,
     Glyphenbox 16.

     Nur mobil nötig: ab 769px blendet Block 1 die Zeile ganz aus,
     und am Desktop läuft sie einzeilig — dort verursacht
     `line-height: 1` keine Überlappung (die Glyphen ragen bloß
     aus ihrer Box, was ohne overflow:hidden nichts abschneidet).
     Deshalb bewusst KEIN Eingriff in footer.html, der auch den
     Desktop verschöbe. */
  body :is(.ri-footer__copy, .ri-footer__credit) {
    line-height: 1.45 !important;
  }

}


/* ═══════════════════════════════════════════════════════════
   FÜNFTER BLOCK: HANDY IM ENGEREN SINN (bis 640 px)
   ───────────────────────────────────────────────────────────
   Abgegrenzt von Block 4 (≤768) durch das iPad mini hochkant
   (744 px): Werte, die auf einem 744-px-Tablet zu gedrängt
   wären, gehören hierher.
═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── /sie-wollen-verkaufen/: ein Rhythmus statt zwei ────────
     Tunahan 2026-08-08, gleiche Begründung wie beim
     Tablet-Durchgang („Abstände auf den 80er-Rhythmus"):
     ein vertikaler Wert pro Seite.

     Ausgangslage bei 375 px gemessen — die Seite mischte zwei
     Werte, weil sie zur Hälfte im eigenen `.rr-*`-Namespace
     lebt und nie auf `.wk-section` umgestellt wurde:
       #rr-pain · #rr-steps · #rr-form        72 / 72
       #svk-ansprechpartner · #rr-seo-mannheim ·
       #reviews                               64 / 64
     64 gewinnt, weil `.wk-section` mobil site-weit auf 64 steht
     (wk-global.css:1451) — die 72 sind der Sonderfall aus den
     seiteneigenen ≤640-Regeln (sie-wollen-verkaufen.html:
     215/281/498). #reviews steht schon auf 64 und fehlt deshalb
     in der Liste.

     ⚠️ Warum ≤640 und nicht Block 4 (≤768): im Korridor
     641–768 px greifen die seiteneigenen 72er gar nicht, dort
     stehen die rr-* auf ihrem Grundwert 100/100 und die
     .wk-section auf 80/80. Eine Regel in Block 4 würde die
     rr-* dort auf 64 ziehen und damit auf dem iPad mini
     hochkant (744) einen neuen Sprung 64 ↔ 80 erzeugen.
     ≤640 lässt den Korridor unangetastet. Dass er in sich
     uneinheitlich ist (100/40 gegen 80/32), ist ein eigener,
     älterer Punkt — steht als Fund in STATUS.md.

     Kein `!important` nötig: die Seiten-Regeln sind
     Klassen-Selektoren (0,1,0), `body :is(#id …)` ist (1,0,1). */
  body :is(#rr-pain, #rr-steps, #rr-form) {
    padding-top: 64px;
    padding-bottom: 64px;
  }

}


/* ═══════════════════════════════════════════════════════════
   SECHSTER BLOCK: SEHR SCHMALE GERÄTE (bis 360 px)
   ───────────────────────────────────────────────────────────
   iPhone SE 1. Gen (320), alte Android-320dp. Nur für Raster,
   die rechnerisch nicht mehr nebeneinander passen.
═══════════════════════════════════════════════════════════ */

@media (max-width: 360px) {

  /* ── Zahlen-Kacheln untereinander ───────────────────────────
     Mobil-Durchgang 2026-08-08. `.wk-mini-stats` steht auf
     `grid-template-columns: 1fr 1fr` (wk-global.css:938). Die
     Kacheln haben aber 24 px Innenabstand links/rechts und eine
     32-px-Zahl, die nicht umbrechen kann — ihre min-content-
     Breite ist damit größer als die halbe Spalte. Grid-Items
     haben `min-width: auto`, die Spur wächst also auf
     min-content und das Raster läuft aus dem Abschnitt heraus.

     Bei 320 px sichtbar: die rechte Kachel wird am Bildschirm-
     rand abgeschnitten (rechter Rahmen fehlt, statt 20 px
     Seitenrand 0). Betrifft 5 der 6 Vorkommen site-weit:
       /sie-wollen-verkaufen/ #rr-seo-mannheim   +20,9 px
       /sie-wollen-vermieten/ #sv-seo            +39,0 px
       /ueber-uns/            #ue-story           +2,8 px
       /verkaufsservice/      #vs-intro           +2,8 px
       /verkaufsservice/      #rr-seo-rheinneckar +4,0 px
     (/verkaufsservice/ #vs-seo passt als einziges — dort ist
     die größte Zahl „4.8 ★" statt „5.200+".)

     ⚠️ 360 px als Grenze, nicht 320: gemessene min-content-
     Breiten ergeben je Vorkommen einen eigenen Bedarf, der
     größte ist #sv-seo mit 187,2 + 16 + 115,8 = 319 px. Bei
     360 px Viewport stehen 320 px zur Verfügung — 1 px Spielraum.
     Auf diesem einen Pixel soll nichts stehen, deshalb stapelt
     360 mit. Ab 375 px ist der Abstand komfortabel (335 px
     verfügbar) und die Kacheln bleiben nebeneinander.

     ⚠️ NICHT über `minmax()`/auto-fit gelöst: eine feste
     Mindestbreite ersetzt die automatische min-content-Grenze,
     dann liefe der Text INNERHALB der Kachel über statt das
     Raster zu sprengen — bei #sv-seo (min-content 187 px) wäre
     das ein Rückschritt. */
  body .wk-mini-stats {
    grid-template-columns: minmax(0, 1fr);
  }

}
