/* ============================================================================ HOMES & FLOORS — HERO OPTIK (Design "Featured Hero.dc.html") ---------------------------------------------------------------------------- Zwei Teile: Teil 1 gilt fuer JEDEN Hero der Seite (.hfv2-hero, .hf-phero), Teil 2 nur fuer den Startseiten-Slider (.hfx-hero, gesetzt von hf-home-v2.php). Warum ein Modifikator und KEIN neuer Namespace: .hfv2-hero__* ist eine seitenweit geteilte Familie — Kontakt, FAQ, Lieferung, AGB, Kategorie und ein Dutzend weitere Seiten bauen ihre Hero-Baender daraus. Umbenennen haette dreissig Seiten mitgerissen. Die Zusatzklasse hebt stattdessen die Spezifitaet an (.hfx-hero .hfv2-hero__t schlaegt .hfv2-hero__t), sodass hier fast ohne !important gewonnen wird. Ausnahme: die drei Basisregeln in hf-design-system.css Zeile 398-400 setzen Farben mit !important. Wo diese Datei dieselbe Eigenschaft braucht, steht !important dahinter — nicht aus Bequemlichkeit, sondern weil es die einzige Moeglichkeit ist, eine !important-Regel zu ueberstimmen. Jede solche Stelle ist unten einzeln vermerkt. Token-Quelle: claude.ai/design "Featured Hero.dc.html". ========================================================================== */ /* ========================================================================== TEIL 1 — gilt fuer JEDEN Hero der Seite -------------------------------------------------------------------------- .hfv2-hero (26 Dateien) und .hf-phero (6 Dateien) sind die beiden Hero-Familien. Beide bekommen dieselbe Optik: Overlays, Eyebrow mit Gruenstrich, Titelskala, Fliesstext, Buttons. Was hier NICHT steht: Hoehe und Spaltenlayout. Die Unterseiten-Heroes sind schmale Baender; eine Mindesthoehe von 520px wuerde aus einem Kontakt-Kopfbereich eine halbe Bildschirmseite machen. Diese Regeln stehen in Teil 2 und haengen an .hfx-hero, das nur der Startseiten-Slider traegt. ========================================================================== */ .hfv2-hero, .hf-phero{ --hfxh-navy:#0c2038; --hfxh-green:#3aaa4c; --hfxh-green-hi:#2f9440; --hfxh-accent:#3fe06b; position:relative; overflow:hidden; background-color:var(--hfxh-navy); background-size:cover; background-position:center; } /* Beide Overlay-Ebenen des Entwurfs. pointer-events:none ist Pflicht, sonst schlucken sie Klicks auf alles, was im Hero liegt. */ .hfv2-hero::before, .hfv2-hero::after, .hf-phero::before, .hf-phero::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; } .hfv2-hero::before, .hf-phero::before{ background:linear-gradient(100deg, rgba(10,26,44,.92) 0%, rgba(10,26,44,.74) 40%, rgba(10,26,44,.30) 68%, rgba(10,26,44,.08) 100%); } .hfv2-hero::after, .hf-phero::after{ top:auto;height:120px; background:linear-gradient(transparent,rgba(10,26,44,.55)); } .hfv2-hero > *, .hf-phero > *{position:relative;z-index:2} /* Eyebrow mit dem 28x2px-Strich des Entwurfs. */ .hfv2-hero .hfv2-eyebrow, .hf-phero .hfv2-eyebrow{ display:inline-flex;align-items:center;gap:12px; font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase; color:var(--hfxh-accent); background:none;border:0;padding:0;margin:0; } .hfv2-hero .hfv2-eyebrow::before, .hf-phero .hfv2-eyebrow::before{ content:"";width:28px;height:2px;background:var(--hfxh-accent);flex:none; } /* Titel und Fliesstext. color mit !important, weil hf-design-system.css:398-400 dieselben Eigenschaften ebenfalls mit !important setzt — anders nicht zu ueberstimmen. */ .hfv2-hero h1, .hfv2-hero .hfv2-hero__t, .hf-phero h1{ font-size:clamp(34px,6vw,56px); line-height:1.06;font-weight:700;letter-spacing:-.015em; color:#fff!important; text-wrap:balance; } .hfv2-hero .hfv2-lead, .hf-phero .hfv2-lead, .hf-phero p{ font-size:clamp(13.5px,1.6vw,15px); line-height:1.65; color:rgba(255,255,255,.84)!important; max-width:480px; text-wrap:pretty; } /* ========================================================================== TEIL 2 — nur der Startseiten-Slider ========================================================================== */ .hfx-hero{ position:relative; display:block; /* war flex/center — der Entwurf stapelt */ min-height:clamp(440px,72vw,520px); padding:0; overflow:hidden; } .hfx-hero .hfv2-hero__t{font-size:clamp(38px,7.5vw,64px)} /* --- Innerer Rahmen ------------------------------------------------------- Der Entwurf setzt Karte und Steuerung in EINE Spalte mit space-between. Vorher lag .hfv2-hero__nav absolut positioniert unten links, was bei langen Beschreibungen mit der Karte kollidieren konnte. */ .hfx-hero > .hfv2-hero__card, .hfx-hero > .hfv2-hero__nav{position:relative;z-index:2} .hfx-hero{ display:flex; flex-direction:column; justify-content:space-between; max-width:none; padding:clamp(36px,6vw,64px) clamp(20px,4.5vw,56px) clamp(24px,3vw,36px); } .hfx-hero > .hfv2-hero__card{ width:100%; max-width:540px; margin-inline:auto 0; padding:0; animation:hfxHeroIn .4s ease both; } /* Der Innenbereich folgt derselben Maximalbreite wie der Rest der Seite. */ .hfx-hero{align-items:center} .hfx-hero > .hfv2-hero__card, .hfx-hero > .hfv2-hero__nav{width:min(1360px,100%)} .hfx-hero > .hfv2-hero__card{max-width:min(1360px,100%)} .hfx-hero .hfv2-hero__card > *{max-width:540px} @keyframes hfxHeroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .hfx-hero > .hfv2-hero__card{animation:none} } /* --- Buttons (alle Heroes) ------------------------------------------------- */ .hfv2-hero .hfv2-hero__btns, .hf-phero .hfv2-hero__btns{ display:flex;align-items:stretch;gap:10px; margin-top:clamp(20px,3vw,26px); flex-wrap:wrap; } .hfv2-hero .hfv2-hero__btns .hfv2-btn, .hf-phero .hfv2-hero__btns .hfv2-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:14px clamp(18px,2.5vw,24px); border-radius:0; white-space:nowrap; flex:1 1 auto;max-width:max-content; transition:background .15s ease,border-color .15s ease; } .hfv2-hero .hfv2-hero__btns .hfv2-btn--green, .hf-phero .hfv2-hero__btns .hfv2-btn--green{ background:var(--hfxh-green);border:none;color:#fff; } .hfv2-hero .hfv2-hero__btns .hfv2-btn--green:hover, .hf-phero .hfv2-hero__btns .hfv2-btn--green:hover{background:var(--hfxh-green-hi)} .hfv2-hero .hfv2-hero__btns .hfv2-btn--ghost, .hf-phero .hfv2-hero__btns .hfv2-btn--ghost{ background:rgba(10,26,44,.3); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); border:1.5px solid rgba(255,255,255,.5); color:#fff;font-weight:600;padding:13px clamp(18px,2.5vw,24px); } .hfv2-hero .hfv2-hero__btns .hfv2-btn--ghost:hover, .hf-phero .hfv2-hero__btns .hfv2-btn--ghost:hover{ border-color:#fff;background:rgba(255,255,255,.08); } /* --- Steuerleiste --------------------------------------------------------- */ .hfx-hero .hfv2-hero__nav{ position:static; /* war absolute */ left:auto;bottom:auto; display:flex;align-items:center; gap:clamp(14px,2.5vw,24px); margin-top:clamp(26px,4vw,36px); flex-wrap:wrap; } /* Pfeile: im Entwurf zwei aneinanderliegende Rechtecke, nicht zwei Kreise. */ .hfx-hero .hfv2-hero__arws{display:flex;gap:0} .hfx-hero .hfv2-hero__arw{ width:40px;height:40px;border-radius:0; display:grid;place-items:center; background:rgba(10,26,44,.35); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.28); color:#fff; /* KEIN font-size:0. hf-home-v2.php liefert die Pfeile ueber self::icon() als Tabler-Glyph , nicht als SVG — eine Schriftgroesse von 0 laesst die Kaestchen leer. Der Entwurf zeigt 15px. */ font-size:15px;line-height:1; transition:background .18s ease,border-color .18s ease; } .hfx-hero .hfv2-hero__arw:first-child{border-radius:0 0 0 4px;border-right:none} .hfx-hero .hfv2-hero__arw:last-child{border-radius:0 4px 4px 0} .hfx-hero .hfv2-hero__arw:hover{ background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);transform:none; } .hfx-hero .hfv2-hero__arw .ti{font-size:15px;line-height:1;display:block} .hfx-hero .hfv2-hero__arw svg{width:15px;height:15px} /* falls doch SVG */ /* Dots: 18px inaktiv, 44px aktiv, 2px hoch. Die Fuellung faehrt ueber die Variable --hfv2-hero-p, die das rAF-Skript in hf-home-v2.js schon pflegt — deshalb bleibt der Fortschrittsbalken hier ohne eine Zeile JS erhalten. */ .hfx-hero .hfv2-hero__dots{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden} .hfx-hero .hfv2-hero__dots > button{ position:relative;width:18px;height:14px; background:none;border:0;padding:0;cursor:pointer; transition:width .35s cubic-bezier(.4,0,.2,1); } .hfx-hero .hfv2-hero__dots > button.on{width:44px} .hfx-hero .hfv2-hero__dot-track{ position:absolute;left:0;right:0;top:6px; width:auto;height:2px;border-radius:0; background:rgba(255,255,255,.25); box-shadow:none; } .hfx-hero .hfv2-hero__dot-fill{ position:absolute;left:0;top:0;height:100%; width:calc(var(--hfv2-hero-p,0) * 100%); background:var(--hfxh-accent); border-radius:0; } /* --- Zaehler 06 — 07 ------------------------------------------------------ */ .hfx-hero .hfx-hero__count{ margin-left:auto; display:flex;align-items:baseline;gap:6px; font-variant-numeric:tabular-nums; } .hfx-hero .hfx-hero__count-cur{font-size:15px;font-weight:700;letter-spacing:.06em;color:#fff} .hfx-hero .hfx-hero__count-rule{width:22px;height:1px;background:rgba(255,255,255,.35);align-self:center} .hfx-hero .hfx-hero__count-total{font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.45)} /* --- Muster-Knopf (2026-08-10) -------------------------------------------- "Order a sample · £1.99" steht auf JEDER Breite im Markup. Unter 768px traegt ihn hf-mobile-hero.css im Stil des Entwurfs; hier steht die Desktop-Fassung. Ohne diese Regeln faellt er auf die Grundwerte von .hfv2-btn zurueck — und die sind dunkles Navy auf Weiss gedacht. Auf dem dunklen Hero ergibt das dunkelblaue Schrift ohne Flaeche, praktisch unsichtbar. Die Rangfolge der drei Knoepfe: gruen gefuellt (Kategorie kaufen), gruene Haarlinie auf dunklem Glas (Muster bestellen), weisse Linie (Beratung). Der Preis steht im Akzentgruen — er ist das Argument, nicht die Beschriftung. */ .hfx-hero .hfv2-hero__btns .hfx-hero__sample{ background:rgba(10,26,44,.38); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border:1.5px solid rgba(63,224,107,.55); color:#fff; font-weight:700; padding:13px clamp(18px,2.5vw,24px); transition:background .18s ease,border-color .18s ease; } .hfx-hero .hfv2-hero__btns .hfx-hero__sample:hover{ background:rgba(63,224,107,.14); border-color:var(--hfxh-accent); } .hfx-hero .hfv2-hero__btns .hfx-hero__sample b{ color:var(--hfxh-accent); font-weight:800; } /* --- Gleiche Hoehe fuer jede Folie (2026-08-10) ---------------------------- Vorher wuchs der Hero mit dem Inhalt: gemessen bei 1440px lagen die sieben Folien zwischen 520px und 634px — beim Weiterschalten sprang die halbe Seite um bis zu 114px. Zwei Ursachen, beide hier abgestellt: 1) Der Titel steht auf 82px (aus hf-design-system.css, nicht aus dieser Datei) und passt damit bei "Engineered Wood", "Porcelain Tiles" und "Outdoor Paving" nicht mehr in die 540px-Spalte — drei von sieben Folien liefen auf zwei Zeilen. Der Deckel von 64px, den Teil 2 oben ohnehin vorsah, bringt sie alle auf eine Zeile zurueck. 2) Die Kategoriebeschreibung schwankt zwischen einer und vier Zeilen. trim_sentences() deckelt zwar auf 28 Woerter, nimmt den ERSTEN Satz aber immer vollstaendig — nach oben ist also nichts garantiert. Deshalb feste drei Zeilen: kuerzere Texte bekommen den Platz reserviert, laengere werden abgeschnitten. Zusaetzlich eine feste height statt min-height. Sie ist die Garantie: was auch immer eine kuenftige Kategorie an Text mitbringt, die Seite darunter bleibt stehen. Der Inhalt kann nicht anstossen — Titel eine Zeile plus Text drei Zeilen plus zwei Knopfreihen sind rund 500px, die Hoehe faengt bei 480px an. 2026-08-10 gekuerzt: von clamp(520px,40vw,576px) auf clamp(480px,34vw,530px). Traegt jetzt, weil die Beschreibung kuerzer ist (HERO_BLURB_WORDS in hf-home-v2.php) und der reservierte Platz dafuer von drei auf zwei Zeilen sinkt — zusammen rund 70px weniger Inhalt. */ @media (min-width:768px){ .hfx-hero{ height:clamp(480px,34vw,530px); min-height:0; } /* 720px statt der 540px, die fuer die ganze Karte gelten: bei 64px braucht "Engineered Wood" gemessene 553px und lief deshalb als einziger der sieben Namen auf zwei Zeilen — 13px zu wenig. Der laengste heutige Name ("Engineered Wood") passt jetzt mit Reserve, ebenso "Wall & Floor Tiles" (524px). Ein kuenftiger Name jenseits von 720px — "Bespoke Oak Collection" braeuchte 738px — bricht wieder um; die Hoehe des Heros bleibt davon unberuehrt, nur die Knopfreihe rutscht dann eine Zeile tiefer. */ .hfv2-page .hfx-hero .hfv2-hero__card .hfv2-hero__t{ max-width:720px; font-size:clamp(38px,4.6vw,64px); min-height:1.06em; } /* Zwei Zeilen statt drei (2026-08-10): die gekuerzte Beschreibung braucht in aller Regel eine. Reserviert bleiben zwei, damit eine zweizeilige Zeile die Knopfreihe nicht verschiebt. */ .hfv2-page .hfx-hero .hfv2-hero__card .hfv2-lead{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; min-height:calc(2 * 1.65em); } } /* --- Schmal --------------------------------------------------------------- */ @media (max-width:820px){ .hfx-hero{min-height:clamp(400px,86vw,520px)} .hfx-hero .hfv2-hero__card > *{max-width:none} .hfv2-hero .hfv2-hero__btns .hfv2-btn, .hf-phero .hfv2-hero__btns .hfv2-btn{flex:1 1 100%;max-width:none} .hfx-hero .hfv2-hero__nav{gap:14px} .hfx-hero .hfx-hero__count{margin-left:auto} } /* ============================================================================= HERO AUF STARTSEITEN-MASS — Opt-in (2026-08-31, v1.11.45) Die Angleichung aus 1.11.38 (.hf-herostatic auf die Hoehe des Startseiten-Sliders) steht in extra-category.css. Die wird nur fuer category, shopall und search geladen -- .hf-herostatic rendern aber VIERZEHN Dateien. Trade, Case Studies, Geo, Room, Shop und die uebrigen bekamen die Regel deshalb nie und behielten die Grundhoehe clamp(560px,78vh,720px), mobil 82vh. Gemessen (Viewport 900 hoch): Kategorie-Hero 520 px bei 1440 und 336 px bei 375. Trade dagegen 702 und 738 -- und zwar rein aus min-height, die Textkarte ist nur 304 bzw. 372 px hoch. Diese Datei wird auf JEDER v2-Seite geladen. Die Regel liegt hier also richtig, ist aber bewusst ein OPT-IN ueber .hf-hero--compact statt einer Aenderung an .hf-herostatic: die uebrigen neun Seiten wurden nicht gemessen, und eine ungemessene Aenderung an neun Seiten gehoert nicht in dieselbe Lieferung wie ein benannter Wunsch. Wer sie nachziehen will, setzt die Klasse -- eine Zeile je Seite. ========================================================================== */ .hfv2-page .hfv2-hero.hf-hero--compact{min-height:clamp(400px,86vw,520px)} @media(max-width:760px){ .hfv2-page .hfv2-hero.hf-hero--compact{min-height:clamp(300px,64vw,420px)} } /* ============================================================================= KATEGORIE-HERO AUF DEM TELEFON: "COLLECTION" IST RAUS (2026-08-31, v1.11.71) DER BEFUND, am Bildschirm gezeigt (Unterkategorie "Antique Oak", mobil): das gruene Eyebrow "COLLECTION" lag QUER UEBER der Brotkrume — zwei Zeilen, die um dieselbe Stelle kaempfen, und das Wort traegt dort nichts: dass eine Sammlung eine Sammlung ist, sagt die Seite selbst. Bestellung dazu: "entferne das wort collection im mobile hero, das sind die heros der product categorie." NUR die statischen Kategorie-Heros (.hf-herostatic aus pages/category.php) und NUR unter 768px. Der Startseiten-Slider traegt sein eigenes Eyebrow ("Featured", .hfmob-hero) und bleibt unberuehrt; auf dem Desktop hat die Zeile Platz und bleibt stehen. display:none nimmt sie auch aus dem Vorlesefluss — ein Wort, das nichts sagt, muss auch niemand hoeren. ========================================================================== */ @media (max-width:767px){ .hf-herostatic .hfv2-eyebrow{display:none} } /* Kategorie-/Unterkategorie-Hero auf dem Telefon (31.08.2026): live gemessen lag der Brotkrumen (top 118-136) KOMPLETT im H1 (102-138) -- "die Ueberschrift haengt in der Verlinkung". Seit die Eyebrow mobil ausgeblendet ist (1.11.71), fehlte ihr Platz als Abstandhalter. 56px Kopf-Polster + etwas mehr Mindesthoehe: nachgemessen bleiben 22px Luft zwischen Krume und Titel. */ @media (max-width:767px){ .hf-herostatic{min-height:340px} .hf-herostatic .hfv2-hero__card{padding-top:56px} }