/* ============================================================================
   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:4px;
  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 <i class="ti ti-chevron-left">, 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:4px 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)}

/* --- 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}
}