/* ============================================================================ HOMES & FLOORS — MOBILER HERO (Design "Homes & Floors Mobile.dc.html") ---------------------------------------------------------------------------- Gilt AUSSCHLIESSLICH unter 768px und AUSSCHLIESSLICH fuer den Startseiten-Slider. Der Desktop-Hero (hf-hero-optik.css, Entwurf "Featured Hero") bleibt Zeichen fuer Zeichen unangetastet. Warum eine eigene Datei und ein Doppelklassen-Selektor: .hfv2-hero__* wird von DREI Stylesheets bedient — hf-design-system.css (78 Regeln, davon drei mit !important), hf-hero-optik.css (106) und hf-kantig.css (9, alle mit vorangestelltem `html`). Ein einfacher .hfmob-hero-Selektor (0-1-0) verliert gegen fast jede davon. Der hier durchgaengig benutzte Doppelklassen-Selektor .hfmob-hero.hfx-hero (0-3-0 inklusive Kindklasse) schlaegt sie alle, ohne dass hier ein einziges neues !important noetig waere. Die EINE Ausnahme ist unten einzeln vermerkt: hf-design-system.css:399-400 setzt die Fliesstextfarbe im Hero mit !important. Gegen !important hilft nur !important — deshalb steht es genau an dieser einen Stelle. Token-Quelle: claude.ai/design, Projekt ffd1bb0e, Datei "Homes & Floors Mobile.dc.html". Alle Werte 1:1 uebernommen. ========================================================================== */ @media (max-width:767px){ /* --- Buehne ------------------------------------------------------------ 2026-08-10 gekuerzt. Vorher fuellte der Hero den Bildschirm bis auf die Kopfleiste (`max(560px, 100svh - 116px)`, auf einem 932px-Telefon also 816px) — das war zu viel, der Rest der Startseite begann erst nach einem ganzen Wisch. Jetzt rund zwei Drittel der Bildschirmhoehe, gedeckelt bei 560px, mit 430px Boden fuer kleine Geraete. Moeglich wurde das durch die kuerzere Beschreibung (HERO_BLURB_WORDS in hf-home-v2.php): statt bis zu fuenf Zeilen steht dort jetzt meist eine. Wer die Zeile wieder verlaengert, sollte hier mitziehen. */ .hfmob-hero.hfx-hero{ --hfm-ink:#0A1622; --hfm-green:#3FCF5F; --hfm-green-press:#35BC52; --hfm-green-ink:#06210E; position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; min-height:480px; /* Ruecklage ohne svh-Einheit */ min-height:clamp(430px,64svh,560px); /* Der Fussabstand war 134px — Freiraum, damit die schwebende Tab-Leiste den Text nicht verdeckte, als der Hero noch bis zur Bildschirmkante reichte. Seit der Kuerzung endet er darueber (bei 932px Bildschirm auf 687px, die Leiste beginnt erst bei 834px), die Leiste liegt also ueber dem naechsten Abschnitt. Der grosse Freiraum wurde damit zu einem Loch unter den Punkten. */ padding:56px 24px 40px; overflow:hidden; background-color:var(--hfm-ink); /* Das Hintergrundbild wandert in die Spur (.hfmob-hero__track). Ohne !important gaebe es das inline gesetzte style="background-image:..." aus hf-home-v2.php und das spaetere hero.style.backgroundImage des Skripts weiterhin aus — und das Telefon laed dasselbe Bild zweimal. */ background-image:none!important; touch-action:pan-y; } /* Die beiden Overlay-Ebenen des Desktop-Entwurfs (100deg von links) sind hier falsch — der mobile Entwurf legt seinen Verlauf pro Folie an. */ .hfmob-hero.hfx-hero::before, .hfmob-hero.hfx-hero::after{display:none} /* --- Bildspur ----------------------------------------------------------- Sieben Folien nebeneinander, verschoben per translate3d. Waehrend des Ziehens nimmt .is-drag die Transition heraus, damit das Bild am Finger klebt statt hinterherzulaufen. */ .hfmob-hero.hfx-hero .hfmob-hero__track{ position:absolute;inset:0;z-index:0; display:flex; will-change:transform; transition:transform .62s cubic-bezier(.22,.75,.3,1); } .hfmob-hero.hfx-hero .hfmob-hero__track.is-drag{transition:none} .hfmob-hero.hfx-hero .hfmob-hero__slide{ position:relative;flex:0 0 100%;height:100%;overflow:hidden; } .hfmob-hero.hfx-hero .hfmob-hero__slide img{ display:block;width:100%;height:100%;object-fit:cover; } .hfmob-hero.hfx-hero .hfmob-hero__slide::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(10,22,34,.55) 0%, rgba(10,22,34,.15) 30%, rgba(10,22,34,.68) 68%, rgba(10,22,34,.94) 100%); } /* --- Textblock ---------------------------------------------------------- Der Entwurf zentriert. hf-hero-optik.css setzt die Karte linksbuendig auf 540px — beides wird hier zurueckgenommen. */ .hfmob-hero.hfx-hero > .hfv2-hero__card{ position:relative;z-index:2; width:100%;max-width:none;margin:0;padding:0; display:flex;flex-direction:column;align-items:center; text-align:center; animation:hfmobRise .55s cubic-bezier(.22,.75,.3,1) both; } .hfmob-hero.hfx-hero .hfv2-hero__card > *{max-width:none} @keyframes hfmobRise{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} } /* Eyebrow: im mobilen Entwurf reiner Sperrsatz, ohne den 28px-Gruenstrich des Desktop-Heros. */ .hfmob-hero.hfx-hero .hfv2-eyebrow{ display:block; margin:0 0 12px;padding:0; color:rgba(255,255,255,.6); font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase; } .hfmob-hero.hfx-hero .hfv2-eyebrow::before{display:none} .hfmob-hero.hfx-hero .hfv2-hero__t{ margin:0; font-size:38px;line-height:1.04;font-weight:600;letter-spacing:-.035em; text-wrap:balance; } /* !important: hf-design-system.css:399-400 setzt genau diese Eigenschaft ebenfalls mit !important (dort rgba(255,255,255,.92) bzw. #fff). Der Entwurf will .68 — anders nicht zu erreichen. */ .hfv2-page .hfmob-hero.hfx-hero .hfv2-hero__card .hfv2-lead{ margin:12px auto 0; max-width:300px; font-size:14px;line-height:1.55; color:rgba(255,255,255,.68)!important; text-wrap:pretty; } /* --- Knoepfe ------------------------------------------------------------ Gestapelt und randlos breit. Radius 2px wie im Entwurf — die Kantig-Schicht (hf-kantig.css) laesst Buttons ohnehin eckig. */ .hfmob-hero.hfx-hero .hfv2-hero__btns{ display:flex;flex-direction:column;flex-wrap:nowrap; gap:10px;width:100%;margin-top:28px; } .hfmob-hero.hfx-hero .hfv2-hero__btns .hfv2-btn{ width:100%;max-width:none;flex:0 0 auto; justify-content:center; border-radius:2px; letter-spacing:.04em; padding:0 16px; } /* !important bei background/color: hf-design-system.css setzt `.hfv2-page .hfv2-btn--green{background:var(--green)!important}` — dagegen kommt keine Spezifitaet an. box-shadow braucht kein !important, muss aber genannt werden: `.hfv2-hero .hfv2-btn--green` legt dort einen gruenen Schein (0 14px 34px -10px) unter den Knopf, den der Entwurf nicht hat. */ .hfv2-page .hfmob-hero.hfx-hero .hfv2-hero__btns .hfv2-btn--green{ height:56px; background:var(--hfm-green)!important; color:var(--hfm-green-ink)!important; border:0;box-shadow:none; font-size:14px;font-weight:700; transition:transform .2s cubic-bezier(.22,.75,.3,1),background .2s ease; } .hfv2-page .hfmob-hero.hfx-hero .hfv2-hero__btns .hfv2-btn--green:active{ transform:scale(.985);background:var(--hfm-green-press)!important; } /* Der Muster-Knopf traegt auf dem Telefon die flache Fassung des Entwurfs: durchsichtig, weisse Haarlinie, alles in einer Schriftstaerke. Die gruene Preis-Hervorhebung der Desktop-Fassung (hf-hero-optik.css) wird hier bewusst zurueckgenommen — der Entwurf zeigt eine ruhige Zeile. */ .hfmob-hero.hfx-hero .hfv2-hero__btns .hfx-hero__sample{ height:52px; background:transparent; -webkit-backdrop-filter:none;backdrop-filter:none; border:1px solid rgba(255,255,255,.28); color:#fff; font-size:13px;font-weight:600; transition:transform .2s cubic-bezier(.22,.75,.3,1),border-color .2s ease; } .hfmob-hero.hfx-hero .hfv2-hero__btns .hfx-hero__sample b{ color:inherit;font-weight:600; } .hfmob-hero.hfx-hero .hfv2-hero__btns .hfx-hero__sample:active{ transform:scale(.985);border-color:rgba(255,255,255,.6); } /* "Speak to our team" ist der Desktop-Zweitknopf. Der mobile Entwurf setzt dort das Muster-Angebot; die Telefonnummer steht weiterhin in der Topbar. */ .hfmob-hero.hfx-hero .hfv2-hero__btns .hfv2-btn--ghost{display:none} /* --- Steuerleiste: Punkte + Zaehler, mittig ------------------------------ */ .hfmob-hero.hfx-hero > .hfv2-hero__nav{ position:relative;z-index:2; display:flex;align-items:center;justify-content:center;flex-wrap:nowrap; width:auto;gap:14px;margin-top:30px; } /* Auf dem Telefon wird gewischt, nicht auf 40px-Pfeile getippt. */ .hfmob-hero.hfx-hero .hfv2-hero__arws{display:none} /* flex-direction MUSS hier stehen: hf-design-system.css stellt die Punkte unter 760px auf flex-direction:column ("Design-System, Zeile 1") — eine Regel aus der Zeit, als die Punkte am linken Rand untereinander standen. Ohne diese Zeile faellt die Leiste dort in eine senkrechte Kette zurueck. Die 8px Abstand sind die 6px des Entwurfs plus dessen 1px Innenabstand je Seite; der Balken ist dadurch wirklich 5px bzw. 22px breit statt 3px/20px. */ .hfmob-hero.hfx-hero .hfv2-hero__dots{ flex-direction:row; align-items:center; gap:8px; overflow:visible; } /* border-radius:0 muss ueberall ausgeschrieben stehen. hf-kantig.css enthaelt `html [class*="__dot"]:not([class*="__dots"]){border-radius:50%}` (0-2-1) — gemeint waren Statuspunkte, getroffen wird aber auch jedes Element mit __dot im Namen, also Knopf, Schiene und Fuellung. Aus den 4px-Balken des Entwurfs wuerden sonst wieder Kreise. */ .hfmob-hero.hfx-hero .hfv2-hero__dots > button{ width:5px;height:24px;padding:0; display:flex;align-items:center; border-radius:0; transition:width .45s cubic-bezier(.22,.75,.3,1); } .hfmob-hero.hfx-hero .hfv2-hero__dots > button.on{width:22px} .hfmob-hero.hfx-hero .hfv2-hero__dot-track{ position:static; width:100%;height:4px; border-radius:0; background:rgba(255,255,255,.28); box-shadow:none; overflow:hidden; } /* Die Fuellung faehrt ueber --hfv2-hero-p, das die rAF-Schleife in hf-home-v2.js ohnehin schon pro Punkt pflegt. */ .hfmob-hero.hfx-hero .hfv2-hero__dot-fill{ position:static;display:block; width:calc(var(--hfv2-hero-p,0) * 100%);height:100%; border-radius:0; background:var(--hfm-green); } /* Zaehler "05 / 07". Der Trennstrich des Desktop-Entwurfs wird zum Schraegstrich, der 1px-Steg davor kommt aus dem ::before. */ .hfmob-hero.hfx-hero .hfx-hero__count{ margin-left:0;gap:4px; align-items:baseline; font-size:11px;font-weight:500;color:rgba(255,255,255,.5); } .hfmob-hero.hfx-hero .hfx-hero__count::before{ content:"";align-self:center; width:1px;height:12px;margin-right:10px; background:rgba(255,255,255,.2); } .hfmob-hero.hfx-hero .hfx-hero__count-cur{ font-size:11px;font-weight:600;letter-spacing:0;color:#fff; } .hfmob-hero.hfx-hero .hfx-hero__count-rule{ width:auto;height:auto;background:none; } .hfmob-hero.hfx-hero .hfx-hero__count-rule::before{content:"/"} .hfmob-hero.hfx-hero .hfx-hero__count-total{ font-size:11px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.5); } } /* Ueber 768px gibt es keine Bildspur — der Desktop-Hero arbeitet unveraendert mit dem Hintergrundbild des
-Elements. Der Muster-Knopf bleibt dagegen stehen und bekommt in hf-hero-optik.css seine Desktop-Fassung. display:none braucht hier `.hfmob-hero .hfmob-hero__track` und nicht nur `.hfmob-hero__track`: hf-hero-optik.css setzt `.hfv2-hero > *{position:...}` und `.hfv2-hero .hfv2-hero__btns .hfv2-btn{display:inline-flex}` mit 0-3-0. Genau daran ist die erste Fassung dieser Regel gescheitert — der Muster-Knopf war auf dem Desktop sichtbar, aber ungestylt. */ @media (min-width:768px){ .hfmob-hero .hfmob-hero__track{display:none} } @media (prefers-reduced-motion:reduce){ .hfmob-hero.hfx-hero > .hfv2-hero__card{animation:none} .hfmob-hero.hfx-hero .hfmob-hero__track{transition:none} .hfmob-hero.hfx-hero .hfv2-hero__dots > button{transition:none} } /* ============================================================================= HERO CAROUSEL — mobiler Neustand (2026-08-31, v1.11.49) Nach dem vom Kunden als Zielbild freigegebenen Entwurf "Hero Carousel". Der Design-Import ueber die claude_design MCP ist blockiert (/design-login laeuft in dieser Sitzung nicht); umgesetzt ist, was das Bild zeigt. Die Schicht darueber stammt aus dem AELTEREN Entwurf "Homes & Floors Mobile.dc.html". Sie bleibt vollstaendig stehen; hier stehen nur die fuenf Punkte, an denen der neue Entwurf abweicht. Rueckbau: diesen Block weg. Weiterhin gilt: NUR unter 768px. Der Desktop-Hero bleibt Zeichen fuer Zeichen unangetastet -- der Kunde hat ihn ausdruecklich so bestaetigt. ========================================================================== */ @media (max-width:767px){ /* 1 — Der dritte Knopf ist zurueck. Der aeltere Entwurf blendete "Speak to our team" aus (Zeile 194) und setzte dort das Musterangebot; der neue zeigt alle drei untereinander. */ .hfmob-hero.hfx-hero .hfv2-hero__btns .hfv2-btn--ghost{ display:flex;align-items:center;justify-content:center;width:100% } /* 2 — Alle drei Knoepfe auf volle Breite und gleiche Hoehe. */ .hfmob-hero.hfx-hero .hfv2-hero__btns{ display:flex;flex-direction:column;gap:10px;width:100% } .hfmob-hero.hfx-hero .hfv2-hero__btns > *{width:100%;min-height:52px} /* 3 — Der erste Knopf traegt das DUNKLE Gruen mit weisser Schrift. Vorher war es das helle #4ad55d mit dunkler Schrift. Weiss auf #377f20 sind 4,98:1; auf dem hellen Gruen waeren es 1,9:1 -- deshalb kann der Knopf nicht einfach weisse Schrift bekommen, die Flaeche muss mit. */ /* hf-design-system.css:414 setzt .hfv2-page .hfv2-btn--green{background:var(--green)!important;color:var(--green-ink)!important}. Gegen zwei !important hilft keine Spezifitaet -- also werden die VARIABLEN lokal umdefiniert, dieselbe Regel greift und liefert die Werte des Entwurfs. Dasselbe Muster wie in .hfv2-sample--v3/--v4. Gemessen hatte mein erster Versuch mit direkten Werten keine Wirkung. */ /* Zwei Regeln mit !important treffen diesen Knopf: hf-design-system.css:414 background:var(--green)!important die Schicht darueber background:var(--hfm-green)!important Die Variable --green umzudefinieren genuegt deshalb NICHT -- die zweite Regel liest --hfm-green und gewinnt, weil sie spaeter steht. Gemessen: --green stand korrekt auf #377f20, der Hintergrund blieb #3fcf5f. Hier hilft nur, die spaetere Regel ausdruecklich zu ueberbieten. */ .hfv2-page .hfmob-hero.hfx-hero .hfv2-hero__btns .hfv2-btn--green{ background:#377f20!important;color:#fff!important; border:0;box-shadow:none } /* Zweiter und dritter Knopf: Rahmen statt Flaeche, weisse Schrift. */ .hfmob-hero.hfx-hero .hfv2-hero__btns .hfx-hero__sample, .hfmob-hero.hfx-hero .hfv2-hero__btns .hfv2-btn--ghost{ background:rgba(8,12,16,.42);border:1px solid rgba(255,255,255,.34);color:#fff } .hfmob-hero.hfx-hero .hfv2-hero__btns .hfx-hero__sample b{color:var(--hfm-green,#3ecf4c)} /* 4 — Augenbraue gruen statt grau. */ .hfmob-hero.hfx-hero .hfv2-eyebrow{color:var(--hfm-green,#3ecf4c)} /* 5 — Steuerleiste: Striche links, Zaehler rechts. Die Schicht darueber stellt beides mittig nebeneinander (justify-content:center, Zeile 199). Der neue Entwurf trennt sie an die beiden Raender. */ .hfmob-hero.hfx-hero > .hfv2-hero__nav{ justify-content:space-between;width:100%;gap:12px } /* Breitere Striche: im Entwurf sind sie deutlich laenger als die 5px der Vorfassung. Das ist zugleich die Tippflaeche -- gemessen waren es 5x44 CSS-Pixel, was die 24px aus WCAG 2.5.8 in der Breite verfehlt. */ .hfmob-hero.hfx-hero .hfv2-hero__dots > button{width:26px} .hfmob-hero.hfx-hero .hfv2-hero__dots > button.on{width:26px} .hfmob-hero.hfx-hero .hfv2-hero__dots{gap:10px} /* Der Zaehler bekommt den langen Trennstrich des Entwurfs zurueck. */ .hfmob-hero.hfx-hero .hfx-hero__count::before{display:none} .hfmob-hero.hfx-hero .hfx-hero__count{gap:10px} .hfmob-hero.hfx-hero .hfx-hero__count-cur{font-size:15px;font-weight:700} .hfmob-hero.hfx-hero .hfx-hero__count-total{font-size:13px} .hfmob-hero.hfx-hero .hfx-hero__count-rule::before{content:""} .hfmob-hero.hfx-hero .hfx-hero__count-rule{ width:26px;height:1px;background:rgba(255,255,255,.45);align-self:center } } /* ============================================================================= HERO CAROUSEL — nach der QUELLE des Entwurfs (2026-08-31, v1.11.60) WARUM ES DIESEN BLOCK GIBT. Der Block darueber (1.11.49) wurde nach einem BILD des Entwurfs gebaut; sein eigener Kommentar sagt das und nennt den Grund (der Design-Import war blockiert). Inzwischen liegt die Quelle vor — "Hero Carousel.html", ein selbstentpackendes Buendel, dessen Vorlage sich aus dem