/* ══════════════════════════════════════════════════════════════════════
   PFALLER — Mobil-Korrekturen (gemeinsam für alle Seiten). 2026-08-17
   ══════════════════════════════════════════════════════════════════════
   Additiv und bewusst eng gefasst: greift nur unterhalb 820px und nur
   an den Stellen, an denen die Messung auf 375px Breite einen echten
   Fehler ergeben hat. Bestehende Styles bleiben unangetastet.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* ── 1) Beispielberechnung auf der Wohnflächenseite ───────────────────
     Die Bühne war 338px breit, ihre Spalte aber 364px — die Tabelle wurde
     rechts um 24px abgeschnitten. Ursache: Die Mobilregel setzt 1fr, und
     1fr schrumpft nicht unter die Mindestbreite des Inhalts. Diese ergibt
     sich aus den Spaltenköpfen („GRUNDFLÄCHE", „ANRECHNUNG", „WOHNFLÄCHE"),
     die als einzelne Wörter nicht umbrechen können.
     minmax(0,1fr) hebt die Mindestbreite auf, die engeren Kopfzeilen
     sorgen dafür, dass die Tabelle trotzdem nicht gequetscht wirkt. */
  .wfl-dok-buehne { grid-template-columns: minmax(0, 1fr) !important; }

  /* Vier Spalten passten nur, weil die Kopfzeilen auf 7,4px gedrueckt
     wurden — unlesbar. Auf dem Handy entfaellt deshalb die Spalte
     „Grundflaeche": Wer die Beispielrechnung liest, will wissen WELCHER
     Raum mit WELCHEM Anteil in die Wohnflaeche eingeht. Die Grundflaeche
     steht weiter im Plan daneben und auf dem Desktop in der Tabelle.
     Mit drei Spalten reicht der Platz fuer lesbare Groessen. */
  .wfl-dok-tab th:nth-child(2),
  .wfl-dok-tab td:nth-child(2) { display: none !important; }
  .wfl-dok-tab      { font-size: .78rem !important; }
  .wfl-dok-tab th   { font-size: .58rem !important; letter-spacing: .06em !important;
                      padding: .5rem .45rem !important; }
  .wfl-dok-tab td   { padding: .38rem .45rem !important; font-size: .78rem !important; }

  /* ── 2) Pfeil im Menü ────────────────────────────────────────────────
     Das Aufklappmenü (.nav-dd-menu) ist mobil display:none und kann dort
     nicht geöffnet werden; ein Antippen führt direkt auf die Seite. Der
     Pfeil verspricht damit etwas, das nicht passiert — deshalb mobil weg. */
  .nav-dd .dd-arr { display: none !important; }

  /* ── 3) Eingabefelder ────────────────────────────────────────────────
     iOS Safari zoomt beim Antippen automatisch ins Bild, wenn ein
     Eingabefeld kleiner als 16px gesetzt ist. Danach steht die Seite
     verschoben da — auf einer Anfrageseite ein echter Abbruchgrund.
     Betroffen waren das Ausstiegsfenster (15px) und die Felder des
     Preisrechners (14px). */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"],
  input[type="date"], textarea, select { font-size: 16px !important; }

  /* ── 4) Pflicht-Häkchen der Datenschutz-Einwilligung ─────────────────
     War 13x13px und damit deutlich unter der Größe, die sich mit dem
     Finger zuverlässig treffen lässt. Der zugehörige Text bleibt
     zusätzlich anklickbar. */
  /* 20px waren mit dem Finger nicht zuverlaessig zu treffen — auf dem
     iPhone empfiehlt Apple 44pt fuer Bedienelemente. Das Kaestchen
     selbst bleibt schlank, bekommt aber eine groessere Trefferflaeche. */
  input[type="checkbox"] { width: 24px !important; height: 24px !important;
                           flex-shrink: 0; }
}

@media (max-width: 700px) {

  /* ── 5) Kundenlogos nebeneinander ────────────────────────────────────
     Die Logokästen waren je 240px breit und passten damit nicht zu zweit
     in die 311px breite Reihe — sie rutschten untereinander. Jeder Kasten
     bekommt nun die halbe Reihenbreite. Die Hintergrundgröße der Logos ist
     prozentual gesetzt und skaliert dadurch von selbst mit. */
  .pf-partner-reihe { gap: .9rem !important; flex-wrap: nowrap !important;
                      align-items: flex-start !important; }
  .pf-partner       { width: calc(50% - .45rem) !important; }
  .pf-partner > a   { width: 100% !important; height: 58px !important; }
  .pf-partner-tun   { font-size: .6rem !important; line-height: 1.4 !important; }

  /* ── 6) Google-Angabe im Seitenkopf als ein Kasten ───────────────────
     Bestand aus zwei getrennt gerahmten Teilen: dem weiß hinterlegten
     Logo und einer eigenen Pille mit dem Wert. Auf schmalen Geräten las
     sich das wie zwei Elemente. Jetzt trägt die Reihe selbst den weißen
     Kasten, die Kinder geben ihre eigenen Rahmen ab — dieselbe Optik wie
     die Google-Kachel auf der Startseite. */
  .trust-mini { display: inline-flex !important; flex-wrap: nowrap !important;
                align-items: center !important; gap: .5rem !important;
                background: #fff !important; border-radius: 9px !important;
                padding: .42rem .8rem !important;
                box-shadow: 0 4px 14px rgba(0,0,0,.18) !important; }
  .trust-mini img { background: none !important; padding: 0 !important;
                    height: 26px !important; border-radius: 0 !important; }
  .trust-mini .score { background: none !important; border: none !important;
                       padding: 0 !important; color: #1c2b42 !important;
                       font-size: .92rem !important; line-height: 1 !important; }
  /* Anzahl und Zeitraum gehören nach BGH I ZR 143/23 zur Sternewerbung dazu.
     Im weissen Kasten stehen sie in einer zweiten Zeile unter dem Wert. */
  .trust-mini { flex-wrap: wrap !important; }
  .trust-mini-anz { color: #5f6b7a !important; font-size: .6rem !important;
                    flex-basis: 100% !important; margin-top: -.15rem !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Bereich „Zusammenarbeit" — Überschrift „Kunden"
   ══════════════════════════════════════════════════════════════════
   Stand auf schmalen Geräten linksbündig über dem ersten Logo, weil
   der umgebende Flex-Container sie an dessen Kante ausrichtete.
   Eigene Klasse mit voller Breite, damit sie unter „Zusammenarbeit"
   mittig steht — auf jedem Gerät. */
.pf-kunden-titel{display:block;width:100%;text-align:center;font-size:1.05rem;
  font-weight:700;color:#fff;margin:-.9rem 0 1.4rem}

/* Eine Bestandsregel spricht dieselbe Stelle ueber ihre Position an
   (#kunden-partner > div > div:nth-of-type(3) > div:nth-child(2)) und macht
   sie zu einem zweispaltigen Raster — die Ueberschrift landete dadurch in
   der linken Spalte. Diese Regel ist spezifischer als eine reine Klasse,
   deshalb hier derselbe Strukturpfad mit angehaengter Klasse. */
@media(max-width:700px){
  #kunden-partner > div > div:nth-of-type(3) > div.pf-kunden-titel:nth-child(2){
    display:block!important;
    grid-template-columns:none!important;
    width:100%!important;
    text-align:center!important;
    font-size:.98rem!important;
    margin:-.6rem 0 1.1rem!important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Karten im Bereich „Über uns" — Team und Netzwerk
   ══════════════════════════════════════════════════════════════════
   Zweispaltig blieben auf 375px nur ~133px je Karte. Darin passte weder
   die Ueberschrift „Weitere Sachverstaendige" (lief 12px ueber den Rand)
   noch der Beschreibungstext, der zusaetzlich zentriert war und dadurch
   nur 94 von 148px nutzte. Einspaltig haben die Karten 274–308px, der
   Text steht linksbuendig ueber die volle Breite.

   Zur Spezifitaet: die Bestandsregeln arbeiten mit ".sec-about
   .about-team-grid { ... !important }" und Strukturpfaden. Deshalb hier
   durchgaengig mit "#page-home" davor. */
@media(max-width:700px){
  #page-home .sec-about .about-team-grid{ grid-template-columns:1fr!important; }
  #page-home .sec-about .about-team-grid > div > div:nth-child(2) > div:first-child{
    text-align:left!important;
    width:auto!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Porträt Moritz Pfaller — mobile Darstellung
   ══════════════════════════════════════════════════════════════════
   War auf dem Handy nur 84x84px gross und dadurch kaum zu erkennen.
   Jetzt laeuft es ueber die volle Kartenbreite und bis an deren
   Raender (angeschnitten); Rolle und Name liegen darueber im Bild.

   Zur Spezifitaet: pf-typography.css setzt die Groesse mit
   ".sec-about .about-founder-photo { ... !important }" und wird NACH
   dieser Datei geladen. Deshalb hier drei Klassen im Selektor —
   sonst gewinnt die alte Regel. */
@media (max-width: 700px) {

  .sec-about .about-founder-card{
    display:block!important;
    padding:0!important;
    overflow:hidden!important;
    position:relative!important;
    align-items:stretch!important;
    gap:0!important;
  }

  .sec-about .about-founder-card .about-founder-photo{
    width:100%!important;
    height:290px!important;
    flex:none!important;
    flex-basis:auto!important;
    object-fit:cover!important;
    /* Kopf sitzt im oberen Bilddrittel — dort wird angeschnitten */
    object-position:50% 16%!important;
    border-radius:0!important;
    display:block!important;
    box-shadow:none!important;
  }
  /* Kein Zoom beim Antippen — auf dem Handy stoert er nur */
  .sec-about .about-founder-card:hover .about-founder-photo{
    transform:none!important;
    box-shadow:none!important;
  }

  /* Verlauf ueber dem unteren Bildrand, damit die Beschriftung darauf
     lesbar bleibt. Er endet exakt am Bildende (150 + 140 = 290px). */
  .sec-about .about-founder-card::after{
    content:"";position:absolute;left:0;right:0;top:150px;height:140px;
    background:linear-gradient(180deg,rgba(12,24,40,0),rgba(12,24,40,.88));
    pointer-events:none;z-index:1;
  }

  /* WICHTIG — die Beschriftung wird an der BILDUNTERKANTE verankert,
     nicht mit einem festen Abstand hochgezogen.

     Zwei Anlaeufe scheiterten vorher an derselben Ursache: Die Zeile
     „GESCHÄFTSFÜHRER & SACHVERSTÄNDIGER" bricht bis 390px auf zwei
     Zeilen um, ab 414px passt sie in eine — der Block ist dann 16px
     kuerzer. Jeder feste Wert (transform, negativer Abstand) trifft
     deshalb immer nur eine Geraetebreite; auf allen anderen stand der
     Fliesstext im Bild.

     Loesung: Die Huelle .about-founder-cap wird absolut positioniert,
     ihre Oberkante auf die Bildhoehe (290px) gesetzt und per
     translateY(-100%) um die EIGENE Hoehe nach oben geschoben. Damit
     sitzt ihre Unterkante immer exakt am Bildende — unabhaengig davon,
     wie viele Zeilen die Rolle braucht. Der Fliesstext beginnt danach
     im normalen Fluss unterhalb des Bildes. */
  /* Der Textblock bleibt im normalen Fluss OHNE eigene Positionierung —
     sonst waere er der Bezugspunkt fuer die absolut gesetzte Beschriftung
     und diese landete 290px unterhalb des Bildes statt darauf.
     Bezugspunkt ist die Karte (position:relative, siehe oben). */
  .sec-about .about-founder-card .about-founder-copy{
    position:static!important;
    margin-top:0!important;
    padding:.9rem 1.15rem 1.25rem!important;
  }
  .sec-about .about-founder-card .about-founder-cap{
    position:absolute!important;
    left:0; right:0;
    top:290px;                 /* = Bildhoehe */
    transform:translateY(-100%);
    padding:0 1.15rem .8rem;
    z-index:2;
    pointer-events:none;
  }
  .sec-about .about-founder-card .about-founder-role{
    transform:none!important;
    margin:0 0 .1rem!important;
    color:#d4ae78!important;
    text-shadow:0 1px 10px rgba(0,0,0,.55)!important;
  }
  .sec-about .about-founder-card .about-founder-name{
    transform:none!important;
    margin:0!important;
    font-size:1.3rem!important;
    line-height:1.2!important;
    color:#fff!important;
    text-shadow:0 2px 14px rgba(0,0,0,.6)!important;
  }
  .sec-about .about-founder-card .about-founder-copy p{
    margin:0!important;
    font-size:.85rem!important;
    line-height:1.6!important;
  }
  .sec-about .about-founder-card .about-founder-tags{
    margin-top:.9rem!important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Startseite mobil — Kopfbereich und Leistungen entzerren
   ══════════════════════════════════════════════════════════════════
   Ausgangslage: Der Kopfbereich zeigte vier Auswahlfelder (513px), und
   unmittelbar darunter stand derselbe Inhalt noch einmal als vier
   Leistungskarten (1194px). Dieselben vier Leistungen zweimal, zusammen
   rund 1700px — das wirkte voll und wiederholte sich.

   Jetzt: Der Kopfbereich nennt nur noch Fach, Ort, Überschrift, einen
   Satz und EINE Handlung. Die Auswahl übernimmt der Leistungsbereich
   direkt darunter — dort gehört sie hin. Die Karten dort werden
   schlanker: Vorspann und Merkmal-Chips fallen mobil weg, es bleiben
   Symbol, Kennzeichnung, Titel, ein Satz und der Weiterführungs-Link. */

@media (max-width: 700px) {

  /* ── Kopfbereich: eine Handlung statt vier Kacheln ──────────────── */
  #page-home .hero-proof-list{ display:none !important; }
  /* Fach und Ort ueber der Ueberschrift — steht im HTML mit
     style="display:none", deshalb hier mit !important einblenden. */
  #page-home .hero-mobile-eye{ display:block !important; }
  #page-home .hero-mobile-tagline{
    display:block !important;
    font-size:.92rem !important;
    line-height:1.55 !important;
    color:rgba(255,255,255,.78) !important;
    margin:.5rem 0 1.15rem !important;
    max-width:20rem;
  }
  /* Der Hauptknopf war mobil ausgeblendet — bis zum Erscheinen der
     festen Leiste beim Scrollen gab es oben keine Handlung. */
  #page-home .hero-btns{
    display:flex !important;
    gap:.6rem !important;
    flex-wrap:wrap !important;
  }
  #page-home .hero-btns .btn-gold{
    flex:1 1 100% !important;
    min-height:48px !important;
    font-size:.86rem !important;
  }
  #page-home .hero-btns .hero-btn-secondary{ display:none !important; }

  /* ── Leistungskarten schlanker ──────────────────────────────────── */
  #page-home .home-service-kicker{ display:none !important; }
  #page-home .home-service-quick{ display:none !important; }
  #page-home .home-service-card{
    padding:.95rem 1rem 1rem !important;
  }
  #page-home .home-service-card h3{
    font-size:1rem !important;
    line-height:1.25 !important;
    margin:.15rem 0 .3rem !important;
  }
  #page-home .home-service-card p{
    font-size:.78rem !important;
    line-height:1.5 !important;
    margin:0 0 .55rem !important;
  }
  #page-home .home-service-link{
    font-size:.68rem !important;
    margin-top:0 !important;
  }
  #page-home .home-service-grid{ gap:.65rem !important; }
}

/* ══════════════════════════════════════════════════════════════════
   STARTSEITE MOBIL — HERO ALS VOLLBILD-COVER (Synthese, 2026-08-19)
   ══════════════════════════════════════════════════════════════════
   Ziel: Der Hero füllt unterhalb der klebenden Navigation den ganzen
   Bildschirm, das Hintergrundbild wird sichtbar (Verlauf statt 72%-
   Grauschleier), Inhalte verteilen sich wie auf einem Cover, unten
   lädt ein klickbarer Scroll-Hinweis „Unsere Leistungen" zum
   Weiterscrollen ein.

   Kaskadenlage (geprüft am 2026-08-19):
   – pf-mobil.css lädt nach den frühen Inline-Blöcken (u. a. Z. 490 ff.
     und 1279 ff. der index.html), aber VOR weiteren Inline-Blöcken
     (Z. 2810 ff., 3208 ff. pfHeroRise-Staffel, 3861 Hero-Pseudo-
     Elemente) und vor pf-typography.css. Deshalb überall das bewährte
     Muster #page-home + !important: die ID-Spezifität überstimmt alle
     klassenbasierten !important-Regeln der späteren Blöcke.
   – pf-typography.css fasst den Home-Hero nur über .hero-title an —
     die H1 im Markup trägt keine Klasse, kein Konflikt (verifiziert).
   – Die Nav ist mobil NICHT 62px: pf-nav.css setzt ≤900px 66px und
     ≤400px 52px (jeweils !important, verifiziert). calc() rechnet
     hier mit den realen Werten; min-height macht Abweichungen ohnehin
     unkritisch.
   – Dieser Block gehört ANS ENDE von pf-mobil.css (Reihenfolge
     entscheidet gegen gleichspezifische Regeln weiter oben in
     derselben Datei, z. B. hero-btns/hero-mobile-tagline ab Z. 245).
   – Desktop >700px bleibt durch den Media-Wrapper vollständig
     unberührt. */

@media (max-width: 700px) {

  /* ── 1) Bühne: volle Resthöhe unter der 66px-Navigation ───────────
     Erst 100vh als Fallback für ältere Browser, dann 100svh: das
     „small viewport"-Maß rechnet die iOS-/Android-Adressleiste ein —
     CTA und Scroll-Hinweis liegen sicher im Sichtbereich.
     min-height statt height: auf sehr kleinen oder quer gehaltenen
     Geräten darf der Hero wachsen und normal scrollen.
     align-items:stretch, damit .hero-inner die volle Höhe erbt.
     padding-bottom mit safe-area für iPhones mit Home-Balken. */
  #page-home .hero{
    display:flex !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
    min-height:calc(100vh - 62px) !important;
    min-height:calc(100svh - 62px) !important;
    padding:1.25rem 1.25rem calc(.7rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── 2) Innencontainer: Flex-Säule statt Grid ─────────────────────
     Bestandsregeln machen .hero-inner zum 1-Spalten-Grid mit gap.
     Als Flex-Spalte reicht sie die Höhe an .hero-content weiter und
     hält den Scroll-Hinweis (letztes Kind, siehe HTML) am unteren
     Rand. #hero-qf und der <script>-Block stören als Flex-Kinder
     nicht (beide display:none). */
  #page-home .hero-inner{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:0 !important;
    padding:0 !important;
  }
  /* Cover-Verteilung OHNE order-Tricks, rein über die DOM-Reihenfolge
     (Eyebrow → H1 → Tagline → Buttons → Trust-Zeile): margin-top:auto
     am Eyebrow und an .hero-btns teilt den freien Raum — Titelblock
     schwebt knapp über der Mitte, CTA + Vertrauenszeile ankern unten.
     Wird der Inhalt einmal höher als der Bildschirm (Querformat),
     kollabieren die auto-Margins folgenlos. */
  #page-home .hero-content{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* ── 3) Hintergrundbild sichtbar machen ───────────────────────────
     Bisher: flächiges rgba(8,15,26,.72) — das warme Symbolbild war
     praktisch unsichtbar. Jetzt ein vertikaler Verlauf: oben satt
     (nahtloser Anschluss an die dunkle Nav, Eyebrow lesbar), in der
     Bildmitte bewusst nur ~50% Abdunkelung (konservativer als die 34%
     des Atmosphäre-Entwurfs — Lesbarkeit vor Drama), unten wieder
     dicht für CTA, Trust-Zeile und Scroll-Hinweis. Das Overlay ist
     ein Inline-Style im Markup — !important im Stylesheet überstimmt
     Inline-Styles regulär. */
  #page-home #hero-mobile-img > div{
    background:linear-gradient(180deg,
      rgba(8,15,26,.88)  0%,
      rgba(8,15,26,.56) 30%,
      rgba(8,15,26,.50) 52%,
      rgba(9,16,27,.78) 74%,
      rgba(10,17,28,.94) 100%) !important;
  }
  /* Bildausschnitt leicht nach oben (Unterlagen/Grundrisse rücken ins
     Titel-Fenster), eine Spur mehr Wärme. Bewusst KEIN Ken-Burns-
     Zoom: großes PNG per transform zu skalieren kostet auf alten
     Geräten Leistung — der Verlauf trägt die Atmosphäre allein. */
  #page-home #hero-mobile-img{ overflow:hidden !important; }
  #page-home #hero-mobile-img img{
    object-position:center 38% !important;
    filter:saturate(1.05) contrast(1.02) !important;
  }

  /* Deko-Kreise der .hero-Pseudo-Elemente: bleiben mobil aus.
     (Ein später ladender Inline-Block, index.html Z. 3861, blendet
     sie ≤900px ohnehin aus — hier restated, damit dieser Block für
     sich vollständig ist. Bewusst NICHT für einen Scroll-Hinweis
     umgenutzt: zu fragil gegen genau diese spätere Regel.) */
  #page-home .hero::before,
  #page-home .hero::after{ display:none !important; }

  /* ── 4) Aufgeräumt: eine Geschichte, keine Kästen ─────────────────
     Restated für Selbstständigkeit dieses Blocks — Proof-Karten,
     Stats, Rechner und Schnellanfrage sind mobil bereits anderweitig
     ausgeblendet, die Kennzahlen stehen im Stats-Streifen darunter. */
  #page-home .hero-proof-list{ display:none !important; }
  #page-home .hero-stats{ display:none !important; }
  #page-home #hero-calc{ display:none !important; }
  #page-home #hero-qf{ display:none !important; }

  /* ── 5) Eyebrow: Fach & Ort mit goldener Auftaktlinie ─────────────
     Die klassische Magazin-Dachzeile. margin-top:auto ist Teil der
     Cover-Verteilung (Luft über dem Titelblock). Flex + wrap:
     kein Überlauf bei 320px. */
  #page-home .hero-mobile-eye{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:.55rem !important;
    margin:auto 0 1rem !important;
    font-size:.7rem !important;      /* .63rem waren nur 10,1px */
    font-weight:700 !important;
    letter-spacing:.22em !important;
    text-transform:uppercase !important;
    color:var(--gold2) !important;
    min-width:0;
  }
  #page-home .hero-mobile-eye::before{
    content:"";
    flex:0 0 26px;
    height:1px;
    background:linear-gradient(90deg, rgba(212,174,120,.15), rgba(212,174,120,.9));
  }

  /* ── 6) Überschrift: wächst mit dem Gerät ─────────────────────────
     8.4vw ist bewusst UNTER dem heutigen Fit-Verhältnis kalkuliert
     (2rem auf 375px = 8.53vw, „Sachverständigenbüro" passt dort
     nachweislich einzeilig): 375px → ~1.97rem, 414px → ~2.17rem,
     Deckel 2.35rem. hyphens:auto bleibt als Fangnetz für breite
     Android-Systemschriften. Kräftiger Schatten, weil das Bild
     darunter jetzt heller durchscheint. */
  #page-home .hero h1{
    font-size:clamp(1.65rem, 8.4vw, 2.35rem) !important;
    line-height:1.12 !important;
    letter-spacing:-.02em !important;
    margin:0 0 .9rem !important;
    text-shadow:0 2px 20px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4) !important;
    overflow-wrap:break-word;
    hyphens:auto;
    -webkit-hyphens:auto;
  }
  #page-home .hero h1 em{ color:var(--gold2) !important; }

  /* ── 7) Goldene Haarlinie + Tagline ───────────────────────────────
     Die einzelne, nach rechts auslaufende Haarlinie ist das leise
     Schmuckelement zwischen Titel und Satz; schmale Satzbreite für
     ruhige Zeilen, Schatten sichert die Lesbarkeit überm Bild. */
  #page-home .hero-mobile-tagline{
    display:block !important;
    max-width:21.5rem !important;
    margin:0 !important;
    font-size:.97rem !important;
    line-height:1.68 !important;
    color:rgba(255,255,255,.86) !important;
    text-shadow:0 1px 12px rgba(0,0,0,.5) !important;
  }
  #page-home .hero-mobile-tagline::before{
    content:"";
    display:block;
    width:2.75rem;
    height:1px;
    margin:0 0 .9rem;
    background:linear-gradient(90deg, var(--gold) 0%, rgba(184,147,90,0) 100%);
  }

  /* ── 8) CTA: die eine Handlung, unten verankert ───────────────────
     margin-top:auto = zweiter Teil der Cover-Verteilung. 52px Höhe,
     weicher Gold-Schein, Pfeil als Richtungssignal. Der zweite Knopf
     (Anrufen) bleibt aus — eine Geschichte, eine Handlung. */
  #page-home .hero-btns{
    display:flex !important;
    flex-wrap:wrap !important;
    margin-top:auto !important;
    margin-bottom:0 !important;
    padding-top:1.35rem !important;
    gap:.6rem !important;
  }
  #page-home .hero-btns .btn-gold{
    flex:1 1 100% !important;
    min-height:52px !important;
    font-size:.88rem !important;
    letter-spacing:.08em !important;
    border-radius:6px !important;
    box-shadow:0 12px 30px -10px rgba(184,147,90,.55), 0 2px 8px rgba(0,0,0,.35) !important;
  }
  #page-home .hero-btns .btn-gold::after{
    content:"→";
    margin-left:.55rem;
    font-weight:700;
  }
  #page-home .hero-btns .hero-btn-secondary{ display:none !important; }

  /* ── 9) Stille Vertrauenszeile unter dem CTA ──────────────────────
     Reaktiviert den global versteckten Pillen-Container (Regel
     .hero-trust-pills{display:none!important} in Z. 552 der
     index.html — lädt VOR pf-mobil.css und hat geringere Spezifität,
     wird hier also sauber überstimmt; Desktop bleibt dort weiterhin
     verborgen, weil dieser Block nur ≤700px gilt). Kästchen, Rahmen
     und Füllung der Inline-Styles werden entfernt: eine ruhige,
     zentrierte Textzeile. Inhaltlich AUSSCHLIESSLICH die erlaubten
     Anker (Festpreis · Zahlung nach Erhalt · Persönlicher
     Ansprechpartner) — keine Sterne, Zahlen, Zertifikate, Jahre. */
  #page-home .hero-trust-pills{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:.35rem .95rem !important;
    margin-top:.6rem !important;
    padding-right:0 !important;
  }
  #page-home .hero-trust-pills span{
    display:inline-flex !important;
    align-items:center !important;
    background:none !important;
    border:none !important;
    padding:0 !important;
    gap:.35rem !important;
    font-size:.73rem !important;
    color:rgba(255,255,255,.8) !important;
    white-space:nowrap;
  }
  /* Häkchen in Gold statt Grün — leiser und markenkonform. */
  #page-home .hero-trust-pills svg{ stroke:var(--gold2) !important; }

  /* ── 10) Scroll-Hinweis „Unsere Leistungen" ───────────────────────
     Echtes Element (siehe HTML), im Markup mit style="display:none" —
     der Desktop bleibt dadurch nachweislich pixelidentisch; erst
     dieser Block blendet es ≤700px ein. Bewusst ein <button>:
     klickbar (scrollt zum Leistungsbereich), mind. 44px Tippziel,
     fokussierbar. margin-top:auto pinnt ihn an den unteren Rand der
     Flex-Säule .hero-inner. */
  #page-home .hero-scroll-hint{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:.3rem;
    margin:1rem auto 0;
    margin-top:auto !important;
    padding:.45rem 1rem;
    min-height:44px;
    background:none;
    border:none;
    font-family:inherit;
    font-size:.58rem;
    font-weight:600;
    letter-spacing:.26em;
    padding-left:calc(1rem + .26em); /* gleicht die Sperrung optisch aus */
    text-transform:uppercase;
    color:rgba(255,255,255,.62);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  #page-home .hero-scroll-hint:focus-visible{
    outline:2px solid var(--gold2);
    outline-offset:3px;
  }
  #page-home .hero-scroll-hint svg{
    width:18px;
    height:18px;
    stroke:var(--gold2);
    fill:none;
    stroke-width:2;
    animation:pfmHintBob 2.6s ease-in-out 1.4s infinite backwards;
  }
  /* Ruhiges Auf- und Abwippen — nur transform, kein Layout-Reflow. */
  @keyframes pfmHintBob{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(6px); }
  }

  /* ── 11) Gestaffelter Auftritt beim Laden ─────────────────────────
     Eigene Keyframes (pfm-Präfix — pfHeroRise existiert bereits in
     einem Inline-Block). Die Staffel MIT !important, weil die globale
     pfHeroRise-Staffel (index.html Z. 3208 ff.) NACH pf-mobil.css
     lädt — so gibt es garantiert nur eine Animation pro Element.
     „both" hält den Startzustand während der Verzögerung. */
  @keyframes pfmHeroRise{
    from{ opacity:0; transform:translateY(18px); }
    to  { opacity:1; transform:translateY(0); }
  }
  #page-home .hero-mobile-eye{     animation:pfmHeroRise .65s cubic-bezier(.16,.68,.28,1) .05s both !important; }
  #page-home .hero h1{             animation:pfmHeroRise .75s cubic-bezier(.16,.68,.28,1) .16s both !important; }
  #page-home .hero-mobile-tagline{ animation:pfmHeroRise .75s cubic-bezier(.16,.68,.28,1) .28s both !important; }
  #page-home .hero-btns{           animation:pfmHeroRise .7s  cubic-bezier(.16,.68,.28,1) .42s both !important; }
  #page-home .hero-trust-pills{    animation:pfmHeroRise .7s  cubic-bezier(.16,.68,.28,1) .52s both !important; }
  #page-home .hero-scroll-hint{    animation:pfmHeroRise .7s  cubic-bezier(.16,.68,.28,1) .68s both !important; }
}

/* ── 12) Kleinste Geräte: Nav ist dort 52px (pf-nav.css ≤400px) ─────
   Bühne mit passendem Abzug; H1-Untergrenze etwas tiefer und engeres
   Padding, damit „Sachverständigenbüro" auch bei 320px einzeilig
   bleibt; Eyebrow-Sperrung reduziert. */
@media (max-width: 400px){
  /* Korrektur zur Jury-Annahme: pf-nav.css (52px-Regel) laedt auf der
     Startseite gar nicht — dort gelten die 62px aus pf-slim.css auf
     allen mobilen Breiten. Gemessen am 19.08.2026: Nav 62px bei 375px. */
  #page-home .hero{
    min-height:calc(100vh - 62px) !important;
    min-height:calc(100svh - 62px) !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
  }
  #page-home .hero h1{ font-size:clamp(1.55rem, 8.4vw, 1.95rem) !important; }
  #page-home .hero-mobile-eye{ letter-spacing:.16em !important; }
  #page-home .hero-mobile-tagline{ font-size:.92rem !important; }
}

/* ── 13) Reduzierte Bewegung: alles steht sofort ────────────────────
   Kein Einblenden, kein Wippen — Inhalte und Scroll-Hinweis sind
   statisch und vollständig sichtbar (animation:none verhindert auch
   die „both"-Startzustände). Der scrollIntoView-Klick des Hinweises
   prüft prefers-reduced-motion separat im HTML (behavior:auto). */
@media (max-width: 700px) and (prefers-reduced-motion: reduce){
  #page-home .hero-mobile-eye,
  #page-home .hero h1,
  #page-home .hero-mobile-tagline,
  #page-home .hero-btns,
  #page-home .hero-trust-pills,
  #page-home .hero-scroll-hint,
  #page-home .hero-scroll-hint svg{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}
/* ══════════════════════════════════════════════════════════════════
   KOPFBEREICH — GRUNDRISS-ZEICHNUNG UND SCROLL-TIEFE (mobil)
   ══════════════════════════════════════════════════════════════════
   Greift die Bildsprache der Haus-Animation weiter unten auf: dünne
   Goldlinien auf Dunkel, technisches Aufmaß. Die Zeichnung liegt
   zwischen Hintergrundbild (z-index 0) und Text (z-index 1) und
   bewegt sich beim Scrollen langsamer als der Text — dadurch entsteht
   Tiefe. Auf dem Desktop ist sie ausgeblendet.
   Das Zeichnen selbst und die Scroll-Werte steuert das Skript
   #hero-plan-skript am Ende des Hero. */

.hero-plan{ display:none; }

@media (max-width: 700px) {

  #page-home .hero-plan{
    display:block;
    position:absolute;
    /* rechts oben angeschnitten — wie ein aufgelegter Plan */
    /* nach oben rechts gerueckt, damit die Markierungspunkte nicht
       hinter der Ueberschrift sitzen */
    top:-6%;
    right:-22%;
    width:118%;
    height:66%;
    z-index:0;                 /* über dem Bild, unter dem Text */
    pointer-events:none;
    opacity:.7;
    will-change:transform, opacity;
  }

  /* Linien: zwei Stärken wie beim Haus — Hauptwände kräftiger,
     Nebenlinien dünner und blasser. */
  #page-home .hero-plan .hp-l{
    fill:none;
    stroke:rgba(212,174,120,.34);
    stroke-width:1;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }
  #page-home .hero-plan .hp-stark{ stroke:rgba(212,174,120,.6); stroke-width:1.7; }
  #page-home .hero-plan .hp-fein { stroke:rgba(212,174,120,.2);  stroke-width:.9; }
  #page-home .hero-plan .hp-mass { stroke:rgba(212,174,120,.28); stroke-width:.9; }
  #page-home .hero-plan .hp-tuer { stroke:rgba(212,174,120,.5);  stroke-width:1.2;
                                   stroke-dasharray:3 3 !important; }
  #page-home .hero-plan .hp-p{
    fill:var(--gold2,#d4ae78);
    opacity:0;                 /* Skript blendet sie zuletzt ein */
  }

  /* Zeichenvorgang: Das Skript setzt je Linie Strichmuster und Versatz
     und startet diese Animation gestaffelt. */
  @keyframes hpZeichnen{ to{ stroke-dashoffset:0; } }
  @keyframes hpPunkt{ from{ opacity:0; transform:scale(.4); } to{ opacity:.85; transform:scale(1); } }
  #page-home .hero-plan .hp-p{ transform-box:fill-box; transform-origin:center; }

  /* Bild und Text bewegen sich per Skript — hier nur die Vorbereitung,
     damit der Browser die Ebenen sauber trennt. */
  #page-home #hero-mobile-img{ will-change:transform; }
  #page-home .hero-content{ will-change:transform, opacity; }
}

/* Bei reduzierter Bewegung: Zeichnung steht fertig, nichts verschiebt
   sich. Das Skript setzt zusätzlich die Klasse „fertig" und rührt die
   Transformationen nicht an. */
@media (max-width: 700px) and (prefers-reduced-motion: reduce){
  #page-home .hero-plan .hp-l{
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
    animation:none !important;
  }
  #page-home .hero-plan .hp-tuer{ stroke-dasharray:3 3 !important; }
  #page-home .hero-plan .hp-p{ opacity:.85 !important; animation:none !important; }
  #page-home .hero-plan,
  #page-home .hero-content,
  #page-home #hero-mobile-img{ transform:none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Entschlackung: kleine Schrift und Kleinstsymbole            2026-08-19
   ══════════════════════════════════════════════════════════════════
   Gemessen auf 375px: 95 Textstellen unter 12px allein auf der
   Startseite, davon 38 unter 10,5px, dazu 39 Symbole unter 16px.
   Zwei Hebel: lesbar machen, wo der Text gebraucht wird — und
   weglassen, wo er nur wiederholt, was daneben schon steht. */

@media (max-width: 820px) {

  /* Die Feldbeschriftungen (.f-lbl, vorher 9,5px) sind direkt in den
     Style-Bloecken der Seiten korrigiert — die stehen dort nach dem
     Link auf diese Datei und haetten jede Regel von hier geschlagen. */

  /* Fusszeile, auf jeder Seite identisch. Die Spaltenkoepfe (9,9px)
     sind in den Style-Bloecken der Seiten korrigiert: dort standen
     drei !important-Regeln mit demselben Selektor uebereinander
     (.58rem, .78rem, .62rem) — von hier aus war das nicht zu gewinnen.
     Drei Seiten (koeln, duesseldorf, gewerbe-nutzflaeche) haben diese
     Regeln gar nicht und behielten den Inline-Wert 9,5px. Fuer sie
     greift die folgende Zeile; wo ein spezifischerer Konkurrent steht,
     verliert sie folgenlos. */
  #site-footer .footer-grid > div > div[style*="font-size:9.5px"]
        { font-size: 11px !important; letter-spacing: .14em !important; }
  #site-footer .footer-bottom,
  #site-footer .footer-bottom *  { font-size: 11.5px !important; }

  /* Die Etiketten in den Team-Karten („Ortstermine", „Aufmass",
     „Organisation", „Betreuung") wiederholen bei 10,6px genau das,
     was zwei Zeilen darueber schon im Fliesstext steht. Acht Marken
     weniger, ohne dass eine Aussage verloren geht. */
  .sec-about .about-team-grid span[style*="font-size:.78rem"]
        { display: none !important; }

  /* Symbole unter 13px sind neben Text nur noch ein Fleck. */
  .hero-trust svg  { width: 13px !important; height: 13px !important; }
  .sec-about svg[style*="width:11px"],
  .sec-about svg[width="11"] { width: 13px !important; height: 13px !important; }
  .wfl-offer-main svg { flex-shrink: 0 !important; }

  /* Erste Zeile im Aufmacher — die stand bei 10,1px. */
}

/* Ein Symbol neben Text darf nicht schrumpfen: im Fragenbereich war
   ein 14x14-Zeichen auf 7,3px Breite gequetscht und damit unkenntlich.
   flex-shrink greift nur an Flex-Kindern und ist sonst wirkungslos —
   deshalb ohne Nebenwirkung fuer alle uebrigen Symbole. */
a > svg, span > svg, li > svg, p > svg, label > svg { flex-shrink: 0 !important; }

/* ── Kleinstschrift: die Werte selbst ──────────────────────────────
   Die meisten dieser Klassen sind in den <style>-Bloecken der Seiten
   definiert, die NACH dem Link auf diese Datei stehen — bei gleicher
   Spezifitaet gewinnt dort die spaetere Regel. Die doppelte Klasse
   hebt die Spezifitaet und macht die Reihenfolge unerheblich. */
@media (max-width: 820px) {

  /* Marken auf den Leistungskarten („Flaeche", „Steuer", „Offiziell"):
     9px, und jede wiederholt nur die Ueberschrift darueber. */
  .home-service-badge.home-service-badge { display: none !important; }

  /* Vier Etiketten auf einem handygrossen Grundriss bei 8,3px machen
     den Plan unruhig, ohne lesbar zu sein. Es bleibt die eine, die
     etwas erklaert, was das Bild allein nicht sagt: wofuer die gruene
     Schraffur steht. */
  .wfl-dok-mark[data-m="0"], .wfl-dok-mark[data-m="1"],
  .wfl-dok-mark[data-m="3"] { display: none !important; }
  .wfl-dok-mark[data-m="2"] b { font-size: 10.5px !important; }

  .wfl-dok-fuss.wfl-dok-fuss       { font-size: 11px !important; }
  .wfl-dok-kick.wfl-dok-kick       { font-size: 11px !important; }

  /* Haus-Animation auf der Startseite: Ziffern, Kicker, Kopf- und
     Fusszeile der Rechnung lagen zwischen 8,3 und 9,6px. */
  .wfl3d-num.wfl3d-num       { font-size: 11px !important; }
  .wfl3d-kick.wfl3d-kick     { font-size: 11px !important; }
  .wfl3d-r-kopf.wfl3d-r-kopf { font-size: 10.5px !important; }
  .wfl3d-r-fuss.wfl3d-r-fuss { font-size: 10.5px !important; }
  .wfl3d-rechnung.wfl3d-rechnung td   { font-size: 11.5px !important; }
  .wfl3d-rechnung.wfl3d-rechnung td i { font-size: 10.5px !important; }
  .wfl3d-card .norm.norm              { font-size: 11px !important; }

  /* Weitere Einzelwerte unter 11px */
  .about-founder-role.about-founder-role { font-size: 11.2px !important; }
  .pf-partner-tun.pf-partner-tun         { font-size: 11.2px !important; }
  .hero-scroll-hint.hero-scroll-hint     { font-size: 11.5px !important; }
  .pf-elf-echt.pf-elf-echt               { font-size: 11px !important; }

  /* Inline gesetzte Kleinstwerte, jeweils auf ihren Bereich begrenzt */
  .sec-standorte [style*="font-size:.62rem"] { font-size: 11.2px !important; }
  .sec-leistungen [style*="font-size:.7rem"],
  .home-service-card [style*="font-size:.7rem"] { font-size: 11.2px !important; }

  /* Die Zuordnungen unter „Zusammenarbeit" (Kaeufer & Verkaeufer,
     Gutachterliche Restnutzungsdauer …) standen bei 9,9px. Der Selektor
     traegt hier eine ID, deshalb die doppelte Klasse dagegen. */
  #kunden-partner .kp-audience-sub.kp-audience-sub { font-size: 11.2px !important;
                                                     line-height: 1.3 !important; }

  /* Wohnflaechenseite: Beschriftungen im Grundriss-Widget. */
  .wfl-dok-kopf .t.t          { font-size: 11px !important; }
  .wfl-dok-zahl .l.l          { font-size: 10.5px !important; }
  .wfl-dok-zahl .v.v small    { font-size: 11px !important; }
  #page-wfl .wfl-video-caption.wfl-video-caption strong { font-size: 11.5px !important; }

  /* Die Kopfzeilen der Beispielrechnung: 9,3px waren der Rest aus der
     Zeit, als hier noch vier Spalten standen. Mit dreien ist Platz. */
  .wfl-dok-tab th { font-size: 10px !important; }
}

/* ── Die drei Landing-Seiten (koeln, duesseldorf, gewerbe-nutzflaeche) ──
   Sie stammen aus einer anderen Vorlage: ihr Fussbereich ist <footer
   class="footer"> mit <h3>-Spaltenkoepfen statt #site-footer mit <div>,
   deshalb greift dort keine der Regeln von weiter oben. */
@media (max-width: 820px) {

  /* Die Vertrauensleiste stand als vierspaltiges Raster auch auf dem
     Handy — rund 85px je Feld. Das Symbol wurde dabei von 16 auf 9px
     zusammengedrueckt und war nicht mehr zu erkennen. Zwei Spalten
     geben beiden Teilen ihren Platz zurueck. */
  .trust-strip-inner { grid-template-columns: repeat(2, minmax(0,1fr)) !important;
                       gap: .5rem !important; }
  .trust-item        { font-size: .78rem !important; }
  .trust-item > svg, .source-chip > svg { flex-shrink: 0 !important; }

  /* Diese Vorlage nennt die Feldbeschriftungen .field label statt
     .f-lbl — dieselbe Aufgabe, deshalb dieselbe Groesse. */
  .field label { font-size: 11.5px !important; }
}

/* ── Antippflaechen am Telefon ──────────────────────────────────────
   Auf dem iPhone gilt 44pt als Mindestmass fuer Bedienelemente. Der
   Menueknopf war 38px breit, aufklappbare Fragen teils nur 20px hoch —
   beides mit dem Daumen unsicher zu treffen. */
@media (max-width: 820px) {
  #mobile-menu-btn { min-width: 44px !important; min-height: 44px !important;
                     align-items: center !important; }
  summary { min-height: 44px !important; display: flex !important;
            align-items: center !important; }

  /* Die Merkmalszeilen (.ti, vorher 10,2px) sind in den Style-Bloecken
     der Seiten korrigiert: dort gewinnt .page:not(#page-home) .trust-bar
     .ti — :not() bringt die Spezifitaet einer ID mit. */

  /* Kopfzeilen der Beispielrechnung: 10px waren das Minimum aus der
     Zeit mit vier Spalten. Mit dreien ist Luft fuer etwas mehr. */
  .wfl-dok-tab th { font-size: 10.5px !important; }
}