/* ============================================================================
   HOMES & FLOORS — CASE STUDIES auf der Startseite
   ----------------------------------------------------------------------------
   Loest die drei Hub-Kacheln "Insight & Inspiration" ab (Guides / Case Studies
   / Trade). Markup: HF_Home_V2::case_studies() in inc/hf-home-v2.php.

   Eigener Namensraum hfproj statt einer Erweiterung von .hfv2-icard: die
   Kachelfamilie wird von sechs Seiten geteilt (Startseite, Geo, Artikel,
   Landing, Kategorie-Landing, Trends). Ein Umbau dort haette alle sechs
   mitgerissen — und ausserdem gibt es .hfv2-icard-Regeln in mehreren
   Stylesheets gleichzeitig.

   Zu den Namen: hf-kantig.css greift ueber Teilzeichenketten zu
   (`[class*="pill"]`, `[class*="chip"]`, `[class*="badge"]`, `[class*="tag"]`,
   `[class*="__ic"]`, `[class*="__dot"]`). Keiner der Namen hier trifft eines
   dieser Muster — deshalb heisst die Bildmarke `__mark` und nicht `__badge`,
   und die Sammlungs-Links heissen `__link` und nicht `__chip`. Wo eine Rundung
   gewollt ist, steht sie ausgeschrieben.

   Die Optik folgt der Kachelsprache des Designsystems (weiss, 1px
   rgba(18,43,76,.1), 8px Radius, weicher Schatten, Anheben beim Zeigen,
   Bildzoom) und setzt sie fuer den Aufmacher eine Stufe hoeher.
   ========================================================================== */

.hfproj{
  --hfp-navy:#122B4C;
  --hfp-body:#3F4858;
  --hfp-muted:#66707F;
  --hfp-line:rgba(18,43,76,.1);
  --hfp-green:#237a3a;
  --hfp-green-soft:rgba(74,213,93,.09);
}

/* --- Aufmacher ------------------------------------------------------------
   Zwei Spalten, Bild leicht breiter als der Text. Der Aufmacher ist bewusst
   KEIN Link als Ganzes: die Sammlungs-Links darin sind eigene Ziele. */
.hfproj .hfproj__feat{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  margin-top:clamp(30px,4vw,44px);
  background:#fff;
  border:1px solid var(--hfp-line);
  border-radius:0;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(16,35,61,.10);
  transition:box-shadow .25s ease;
}
.hfproj .hfproj__feat:hover{box-shadow:0 26px 60px rgba(16,35,61,.15)}

.hfproj .hfproj__feat-m{
  position:relative;display:block;
  min-height:100%;
  background:#e7ecf3;
  overflow:hidden;
  /* transform:translateZ(0) haelt den Bildzoom in seiner eigenen Ebene —
     ohne das flackert der Rahmen in Safari beim Skalieren. */
  transform:translateZ(0);
}
.hfproj .hfproj__feat-m img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.75,.3,1);
}
.hfproj .hfproj__feat:hover .hfproj__feat-m img{transform:scale(1.045)}

/* Bildmarke: heller Traeger auf dem Foto, damit sie auf jedem Motiv liest. */
.hfproj .hfproj__mark{
  position:absolute;left:16px;top:16px;
  padding:7px 13px;
  border-radius:0;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--hfp-navy);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;
  box-shadow:0 4px 14px rgba(16,35,61,.14);
}

.hfproj .hfproj__feat-b{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(26px,3vw,40px);
}

.hfproj .hfproj__kicker{
  color:var(--hfp-green);
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  line-height:1;
}

.hfproj .hfproj__t{
  margin:12px 0 0;
  color:var(--hfp-navy);
  font-weight:800;letter-spacing:-.01em;line-height:1.2;
  font-size:18px;
}
.hfproj .hfproj__t--feat{font-size:clamp(21px,2.3vw,29px);line-height:1.16}
.hfproj .hfproj__t a{color:inherit;text-decoration:none;transition:color .18s ease}
.hfproj .hfproj__t a:hover{color:var(--hfp-green)}

.hfproj .hfproj__d{
  margin:12px 0 0;
  color:var(--hfp-body);
  font-size:15px;line-height:1.65;
  text-wrap:pretty;
}

/* Die zweite Textebene bekommt eine gruene Haarlinie — sie trennt die
   Einordnung von der Beschreibung, ohne eine weitere Ueberschrift zu brauchen. */
.hfproj .hfproj__story{
  margin:18px 0 0;
  padding-left:15px;
  border-left:2px solid rgba(74,213,93,.45);
  color:var(--hfp-muted);
  font-size:13.5px;line-height:1.7;
  text-wrap:pretty;
}

/* --- Sammlungs-Links ------------------------------------------------------
   Der kommerzielle Teil: von der Ansicht direkt in die Kategorie. */
.hfproj .hfproj__links{margin-top:22px;width:100%}
.hfproj .hfproj__lbl{
  display:block;margin-bottom:10px;
  color:var(--hfp-muted);
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.hfproj .hfproj__linkrow{display:flex;flex-wrap:wrap;gap:8px}
.hfproj .hfproj__link{
  display:inline-flex;align-items:center;
  padding:9px 15px;
  border:1px solid rgba(18,43,76,.16);
  border-radius:0;
  color:var(--hfp-navy);
  font-size:12.5px;font-weight:600;line-height:1;
  text-decoration:none;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.hfproj .hfproj__link:hover{
  border-color:var(--hfp-green);
  color:var(--hfp-green);
  background:var(--hfp-green-soft);
}

.hfproj .hfproj__cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:24px;
  color:var(--hfp-green);
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
}
.hfproj .hfproj__cta i,
.hfproj .hfproj__x i{transition:transform .18s ease}
.hfproj .hfproj__cta:hover i,
.hfproj .hfproj__card:hover .hfproj__x i{transform:translateX(4px)}

/* --- Die drei kleineren Projekte ------------------------------------------ */
.hfproj .hfproj__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,24px);
  margin-top:clamp(16px,2vw,24px);
}
.hfproj .hfproj__card{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;
  border:1px solid var(--hfp-line);
  border-radius:0;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(16,35,61,.08);
  transition:transform .2s ease,box-shadow .2s ease;
}
.hfproj .hfproj__card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(16,35,61,.16);
}
.hfproj .hfproj__card-m{
  position:relative;display:block;
  aspect-ratio:16/11;
  background:#e7ecf3;
  overflow:hidden;
  transform:translateZ(0);
}
.hfproj .hfproj__card-m img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.22,.75,.3,1);
}
.hfproj .hfproj__card:hover .hfproj__card-m img{transform:scale(1.06)}
.hfproj .hfproj__card-m .hfproj__mark{left:13px;top:13px;padding:6px 11px;font-size:9.5px}

.hfproj .hfproj__card-b{
  display:flex;flex-direction:column;flex:1;
  padding:20px;
}
/* Der Text sitzt oben, der Verweis immer unten an der Karte — sonst haengt
   er bei kuerzeren Beschreibungen mitten in der Flaeche. */
.hfproj .hfproj__card .hfproj__d{
  font-size:13.5px;line-height:1.6;
  margin-bottom:16px;
}
.hfproj .hfproj__x{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:auto;
  color:var(--hfp-green);
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}

.hfproj .hfproj__foot{
  display:flex;justify-content:center;
  margin-top:clamp(26px,3.4vw,38px);
}

/* --- Tablet und schmaler ---------------------------------------------------
   Unter 1000px stapelt der Aufmacher, und die drei Projekte werden zur
   wischbaren Reihe. Zwei Spalten waeren hier die schlechtere Loesung: bei drei
   Karten haengt die dritte allein in der zweiten Reihe (gemessen 495/495/473px)
   — eine Waise, die wie ein Fehler aussieht. Reines CSS: scroll-snap, kein
   Skript.

   Bewusst OHNE Vollbreiten-Trick (negativer Aussenabstand oder 50vw):
   .hfv2-wrap haelt seinen Rand ueber die BREITE, nicht ueber padding —
   gemessen 0px padding bei 393px Inhalt auf 430px Bildschirm. Ein
   `margin-inline:-20px` greift dort ins Leere und schiebt die Reihe ueber den
   Bildschirmrand; die Seite liess sich dann 3px waagerecht schieben. Die
   naechste Karte ragt durch ihre Breite ohnehin sichtbar ins Bild und zeigt
   an, dass es weitergeht. */
@media (max-width:1000px){
  .hfproj .hfproj__feat{grid-template-columns:1fr}
  .hfproj .hfproj__feat-m{aspect-ratio:16/10}

  .hfproj .hfproj__grid{
    display:flex;
    grid-template-columns:none;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hfproj .hfproj__grid::-webkit-scrollbar{display:none}
  .hfproj .hfproj__card{
    flex:0 0 46%;
    scroll-snap-align:start;
  }
}

/* --- Telefon --------------------------------------------------------------- */
@media (max-width:767px){
  .hfproj .hfproj__feat-m{aspect-ratio:4/3}
  .hfproj .hfproj__story{font-size:13px}
  .hfproj .hfproj__grid{gap:14px}
  /* Eine Karte fuellt den Bildschirm fast aus, die naechste schaut ein Stueck
     herein — das ist der Hinweis, dass sich die Reihe schieben laesst. */
  .hfproj .hfproj__card{flex:0 0 78%}
  /* Anheben beim Zeigen ergibt auf dem Telefon nichts und stoert das Wischen. */
  .hfproj .hfproj__card:hover{transform:none;box-shadow:0 10px 26px rgba(16,35,61,.08)}
  .hfproj .hfproj__foot .hfv2-btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .hfproj .hfproj__feat-m img,
  .hfproj .hfproj__card,
  .hfproj .hfproj__card-m img,
  .hfproj .hfproj__cta i,
  .hfproj .hfproj__x i{transition:none}
  .hfproj .hfproj__card:hover{transform:none}
  .hfproj .hfproj__feat:hover .hfproj__feat-m img,
  .hfproj .hfproj__card:hover .hfproj__card-m img{transform:none}
}

/* ============================================================================
   CASE STUDIES — vier nebeneinander, ein Bereich (21.08.2026)
   ----------------------------------------------------------------------------
   Auf Wunsch des Eigentuemers ersetzt ein gleichmaessiges Raster den frueheren
   Aufbau "ein grosser Aufmacher plus drei kleine". Der las sich als zwei
   getrennte Abschnitte, obwohl es dieselbe Sache ist.

   Nur eine neue Klasse (`--four`) statt einer Aenderung an `.hfproj__grid`:
   dieselbe Rasterklasse wird auch von den Geo-Landingseiten ueber `insight()`
   benutzt. Wer sie hier auf vier Spalten stellt, stellt sie dort mit um — und
   das faellt erst auf einer Seite auf, die niemand gerade ansieht.

   Das Wisch-Verhalten unter 1000px bleibt unveraendert: es kommt aus der
   bestehenden Regel fuer `.hfproj__grid` und traegt hier genauso. Vier Karten
   nebeneinander gibt es also nur dort, wo dafuer Platz ist.
   ========================================================================== */
.hfproj .hfproj__grid--four{
  grid-template-columns:repeat(4,1fr);
}
/* Zwischenbreiten: vier Karten wuerden zu schmal. Zwei Reihen zu zwei sind
   immer noch EIN Bereich — die Trennung, die weg sollte, war die zwischen
   Aufmacher und Raster, nicht die zwischen zwei Zeilen gleicher Karten. */
@media (max-width:1240px) and (min-width:1001px){
  .hfproj .hfproj__grid--four{grid-template-columns:repeat(2,1fr)}
}

/* =============================================================================
   SAMPLE-FIRST — dunkle Fassung, Startseite  (2026-08-31, v1.11.40)
   Neubau nach dem Entwurf "Sample Section", vom Kunden als Zielbild freigegeben.

   Warum --v4 und nicht --v3: --v3 ist die HELLE Fassung derselben Sektion und
   wird von search.php und shopall.php benutzt. Dort umzubauen haette beide
   Seiten mitgenommen. Das hier ist eine geschlossene Schicht, in einem Stueck
   rueckbaubar: diesen Block loeschen und die Sektion faellt auf .hfv2-sec--dark
   zurueck.

   ZWEI GRUENS, nach Flaeche benannt (hf-ds-v4.css):
     Textakzente  --hf-accent-on-dark #3ecf4c
     Knopfflaeche #377f20 mit weisser Schrift  -> 4,98:1
   Weiss auf #3ecf4c waere 1,9:1. Deshalb traegt der Knopf NICHT das helle Gruen.

   2026-08-31 — FLAECHE AUF NAVY UMGESTELLT (auf Wunsch: dunkelblau statt
   schwarz). Vorher lief die Sektion auf der --hf-surface-dark-Familie
   (#07090a) und stand damit als einzige neben einem navyfarbenen Footer,
   den PDP-Reitern und der Abschluss-CTA, die alle schon auf
   --hf-surface-navy laufen. Jetzt dieselbe Familie.
   Die gedaempfte Schrift wechselt dabei von --hf-ink-muted-on-dark auf
   --hf-ink-label-on-navy: auf Navy ist die erste zu leise. Alle Rollen sind
   nach der Umstellung neu gemessen, nicht uebernommen.
   ========================================================================== */
.hfv2-sample--v4,
.hfv2-why--v4{
  --smp4-bg:      var(--hf-surface-navy,#0a1f3a);
  --smp4-card:    var(--hf-surface-navy-raised,#0d2440);
  --smp4-inset:   var(--hf-surface-navy-inset,#122a45);
  --smp4-accent:  var(--hf-accent-on-dark,#3ecf4c);
  --smp4-btn:     #377f20;
  --smp4-btn-hov: #2c6619;
  --smp4-body:    var(--hf-ink-body-on-dark,#c8d1d6);
  --smp4-muted:   var(--hf-ink-label-on-navy,#95a0ac);
  --smp4-line:    rgba(255,255,255,.13);
  --smp4-mono:    ui-monospace,'IBM Plex Mono',Menlo,monospace;
  --smp4-serif:   'Cormorant Garamond',Georgia,'Times New Roman',serif;
  /* hf-design-system.css setzt .hfv2-page .hfv2-btn--green{background:var(--green)!important}.
     Statt dagegen anzuschreiben wird die Variable hier lokal umdefiniert --
     dieselbe Regel greift und liefert das Gruen, auf dem Weiss lesbar ist. */
  --green:#377f20; --green-ink:#ffffff; --glow:none;
  background:var(--smp4-bg);
  padding:clamp(40px,5vw,72px) 0
}
.hfv2-sample--v4 *,.hfv2-why--v4 *{box-sizing:border-box}

/* Karte mit gruener Oberkante */
.hfv2-sample--v4 .hfv2-sample__grid{
  display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:0;align-items:stretch;width:100%;margin:0;
  background:var(--smp4-card);border-top:2px solid var(--smp4-accent);border-radius:0
}

/* --- Bild --- */
.hfv2-sample--v4 .hfv2-sample__media{position:relative;min-height:420px;overflow:hidden;background:#132b47;border-radius:0}
.hfv2-sample--v4 .hfv2-sample__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hfv2-sample--v4 .hfv2-sample__badge{
  position:absolute;top:20px;left:20px;z-index:2;padding:9px 14px;border-radius:0;
  background:var(--smp4-btn);color:#fff;
  font-family:var(--smp4-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase
}
/* Fussleiste im Bild. Eigene Flaeche statt Verlauf: ueber einem Foto ist die
   Lesbarkeit sonst vom Bildinhalt abhaengig und nicht mehr nachweisbar. */
.hfv2-sample--v4 .hfv2-sample__note{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 20px;background:rgba(10,31,58,.93);
  font-size:13.5px;line-height:1.45;color:#e8edf0
}
/* Beide erben border-radius:50% aus dem Bestand (Kreis-Badge). Der Kunde hat
   halbrunde Formen ausdruecklich abgelehnt -- hier ausdruecklich zurueckgesetzt. */
.hfv2-sample--v4 .hfv2-sample__ic{flex:none;display:inline-flex;color:var(--smp4-accent);font-size:15px;line-height:1.45;border-radius:0;background:none;width:auto;height:auto}
.hfv2-sample--v4 .hfv2-sample__ic svg{width:16px;height:16px}

/* --- Text --- */
.hfv2-sample--v4 .hfv2-sample__copy{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(28px,3.2vw,48px);text-align:left
}
.hfv2-page .hfv2-sample--v4 .hfv2-eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 14px;
  font-family:var(--smp4-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smp4-accent)
}
.hfv2-page .hfv2-sample--v4 .hfv2-eyebrow::before{content:"";width:26px;height:2px;background:var(--smp4-accent);flex:none}
.hfv2-page .hfv2-sample--v4 .hfv2-sample__h{
  margin:0 0 12px;font-size:clamp(27px,3.3vw,42px);font-weight:800;line-height:1.05;
  letter-spacing:-1px;color:#fff!important
}
/* !important ist hier nicht Bequemlichkeit: hf-design-system.css setzt
   .hfv2-page h1,h2,h3,h4,h5,p{font-family:Poppins...!important}. Ein !important
   schlaegt jede nicht-wichtige Regel unabhaengig von der Spezifitaet -- ohne
   das hier fiel die Kursive stumm auf Poppins zurueck (im Render gemessen,
   die Schrift war geladen, nur nicht angewendet). */
.hfv2-page .hfv2-sample--v4 .hfv2-sample__h em{
  font-family:var(--smp4-serif)!important;font-style:italic;font-weight:600;
  letter-spacing:-.5px;color:var(--smp4-accent)
}
.hfv2-page .hfv2-sample--v4 .hfv2-lead{margin:0 0 22px;max-width:56ch;font-size:15px;line-height:1.6;color:var(--smp4-body)}

/* --- Drei Schritte --- */
.hfv2-sample--v4 .hfv2-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  width:100%;margin:0 0 20px
}
/* Der Bestand gestaltet .hfv2-step als Raster mit rundem Ziffern-Badge und
   .hfv2-step__n mit gruenem Schein (box-shadow rgba(74,213,93,.55)) plus
   grid-area:1/1/3. Beides muss ausdruecklich zurueck: im Render war sonst ein
   leuchtender gruener Balken hinter jeder Ziffer zu sehen. Gemessen, nicht
   vermutet -- die Regel steht in hf-design-system.css. */
.hfv2-sample--v4 .hfv2-step{
  display:block;min-width:0;padding:16px 16px 18px;
  background:var(--smp4-inset);border:1px solid var(--smp4-line);border-radius:0;
  box-shadow:none
}
.hfv2-sample--v4 .hfv2-step__n{
  display:block;margin:0 0 10px;width:auto;height:auto;
  grid-area:auto;place-items:start;align-self:auto;
  background:none;border:0;border-radius:0;box-shadow:none;
  font-family:var(--smp4-serif)!important;font-style:normal;font-weight:600;
  font-size:26px;line-height:1;color:var(--smp4-accent)
}
.hfv2-sample--v4 .hfv2-step b{display:block;margin:0 0 6px;font-size:14.5px;font-weight:700;line-height:1.3;color:#fff}
.hfv2-sample--v4 .hfv2-step span:not(.hfv2-step__n){display:block;font-size:13px;line-height:1.5;color:var(--smp4-muted)}

/* --- Faktenzeile --- */
.hfv2-sample--v4 .hfv2-sample__facts{
  width:100%;margin:0 0 18px;padding-top:16px;border-top:1px solid var(--smp4-line);
  font-size:13px;line-height:1.5;color:var(--smp4-muted)
}

/* --- Knopf --- */
.hfv2-page .hfv2-sample--v4 .hfv2-btn--green{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  width:100%;max-width:420px;min-height:56px;padding:0 26px;
  border:0;border-radius:0;background:var(--smp4-btn);color:#fff;
  font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;box-shadow:none
}
.hfv2-page .hfv2-sample--v4 .hfv2-btn--green:hover{background:var(--smp4-btn-hov);box-shadow:none}
.hfv2-sample--v4 .hfv2-sample__arw{display:inline-flex;font-size:15px;line-height:1}
.hfv2-sample--v4 .hfv2-sample__arw svg{width:16px;height:16px}

/* --- Schmal --- */
@media(max-width:900px){
  .hfv2-sample--v4 .hfv2-sample__grid{grid-template-columns:1fr}
  .hfv2-sample--v4 .hfv2-sample__media{min-height:0;height:230px}
  /* Drei Kaesten nebeneinander sind unter 900px zu schmal: der Titel bricht
     mitten im Wort. Zwei Spalten, der dritte darf die volle Breite nehmen. */
  .hfv2-sample--v4 .hfv2-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hfv2-sample--v4 .hfv2-step:last-child{grid-column:1/-1}
}
@media(max-width:560px){
  .hfv2-sample--v4 .hfv2-steps{grid-template-columns:1fr}
  .hfv2-sample--v4 .hfv2-step:last-child{grid-column:auto}
  .hfv2-page .hfv2-sample--v4 .hfv2-btn--green{max-width:none;min-height:52px;padding:0 16px;gap:9px;font-size:11.5px;letter-spacing:.05em}
  .hfv2-sample--v4 .hfv2-sample__note{font-size:12.5px;padding:13px 16px}
}

/* =============================================================================
   WHY HOMES & FLOORS — dunkle Fassung, Startseite  (2026-08-31, v1.11.41)
   Neubau nach dem Entwurf "Why Section", vom Kunden als Zielbild freigegeben.
   Teilt die Palette mit .hfv2-sample--v4 (Token-Block weiter oben).

   ALLES ist unter .hfv2-why--v4 gekapselt. Nachgezaehlt: .hfv2-wstat,
   .hfv2-checks, .hfv2-why__grid und .hfv2-why__media werden von sechs
   PHP-Dateien benutzt und in pdp-full.css UND hf-design-system.css gestylt.
   Eine ungekapselte Regel haette PDP und weitere Seiten mitgenommen.
   ========================================================================== */
.hfv2-why--v4{background:var(--smp4-bg);padding:clamp(40px,5vw,72px) 0}
.hfv2-why--v4 .hfv2-why__grid{
  display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:0;align-items:stretch;width:100%;margin:0;
  background:var(--smp4-card);border-top:2px solid var(--smp4-accent);border-radius:0
}

/* --- Bild --- */
.hfv2-why--v4 .hfv2-why__media{position:relative;min-height:420px;overflow:hidden;background:#132b47;border-radius:0}
.hfv2-why--v4 .hfv2-why__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Vertrauenskarte: helle Flaeche, damit die Lesbarkeit nicht vom Foto abhaengt. */
.hfv2-why--v4 .hfv2-why__trust{
  position:absolute;top:20px;left:20px;z-index:2;max-width:min(280px,72%);
  padding:14px 16px;background:#fff;border-radius:0
}
.hfv2-why--v4 .hfv2-why__stars{display:flex;align-items:center;gap:8px;margin:0 0 6px;flex-wrap:wrap}
.hfv2-why--v4 .hfv2-why__st{color:#c9ced6;font-size:15px;line-height:1}
.hfv2-why--v4 .hfv2-why__st.on{color:var(--smp4-btn)}
.hfv2-why--v4 .hfv2-why__cnt{
  font-family:var(--smp4-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#5c6773
}
.hfv2-why--v4 .hfv2-why__tt{margin:0;font-size:14px;line-height:1.35;font-weight:400;color:#141722}
.hfv2-why--v4 .hfv2-why__tt b{font-weight:700;color:#020306}

/* Fussleiste im Bild */
.hfv2-why--v4 .hfv2-why__note{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  display:flex;align-items:flex-start;gap:12px;padding:16px 20px;
  background:rgba(10,31,58,.93);font-size:13.5px;line-height:1.45;color:#e8edf0
}
.hfv2-why--v4 .hfv2-why__ic{flex:none;display:inline-flex;color:var(--smp4-accent);font-size:15px;line-height:1.45;border-radius:0;background:none;width:auto;height:auto}

/* --- Text --- */
.hfv2-why--v4 .hfv2-why__copy{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,3.2vw,44px);text-align:left}
.hfv2-page .hfv2-why--v4 .hfv2-eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 14px;
  font-family:var(--smp4-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smp4-accent)
}
.hfv2-page .hfv2-why--v4 .hfv2-eyebrow::before{content:"";width:26px;height:2px;background:var(--smp4-accent);flex:none}
.hfv2-page .hfv2-why--v4 .hfv2-why__h{
  margin:0 0 18px;font-size:clamp(25px,2.9vw,36px);font-weight:800;line-height:1.12;
  letter-spacing:-.8px;color:#fff!important
}
/* Zweite Zeile eigenstaendig, wie im Entwurf. !important, weil
   hf-design-system.css font-family auf h1..h5 mit !important setzt. */
.hfv2-page .hfv2-why--v4 .hfv2-why__h em{
  display:block;font-family:var(--smp4-serif)!important;font-style:italic;font-weight:600;
  letter-spacing:-.3px;color:var(--smp4-accent)
}

/* --- Haken --- */
.hfv2-why--v4 .hfv2-checks{list-style:none;margin:0 0 22px;padding:0;width:100%}
.hfv2-why--v4 .hfv2-checks li{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;
  font-size:14.5px;line-height:1.5;color:var(--smp4-body)
}
.hfv2-why--v4 .hfv2-checks li:last-child{margin-bottom:0}
.hfv2-why--v4 .hfv2-checks .ic{
  flex:none;display:inline-flex;width:auto;height:auto;
  background:none;border:0;border-radius:0;box-shadow:none;
  color:var(--smp4-accent);font-size:14px;line-height:1.5
}
.hfv2-why--v4 .hfv2-checks b{font-weight:700;color:var(--smp4-accent)}

/* --- Vier Kennkarten, 2x2 --- */
.hfv2-why--v4 .hfv2-wstats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin:0 0 20px
}
.hfv2-why--v4 .hfv2-wstat{
  display:flex;align-items:center;gap:12px;min-width:0;padding:14px 14px;
  background:var(--smp4-inset);border:1px solid var(--smp4-line);border-radius:0;
  box-shadow:none;text-decoration:none
}
/* Die hervorgehobene Karte aus dem Entwurf. */
.hfv2-why--v4 .hfv2-wstat--mark{border-color:var(--smp4-btn)}
.hfv2-why--v4 .hfv2-wstat .ic{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:0;background:var(--smp4-btn);color:#fff;font-size:16px
}
.hfv2-why--v4 .hfv2-wstat .ic--brand{background:#fff;color:inherit;padding:6px}
.hfv2-why--v4 .hfv2-wstat .ic--brand svg,.hfv2-why--v4 .hfv2-wstat .ic--brand img{width:100%;height:100%;object-fit:contain}
.hfv2-why--v4 .hfv2-wstat>span:last-child{display:block;min-width:0}
.hfv2-why--v4 .hfv2-wstat b{display:block;font-size:14.5px;font-weight:700;line-height:1.25;color:#fff}
.hfv2-why--v4 .hfv2-wstat small{display:block;font-size:12.5px;line-height:1.35;color:var(--smp4-muted)}

/* --- Schlusszeile --- */
.hfv2-why--v4 .hfv2-why__foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  width:100%;padding-top:18px;border-top:1px solid var(--smp4-line)
}
.hfv2-why--v4 .hfv2-why__line{margin:0;font-size:13px;line-height:1.5;color:var(--smp4-muted)}
.hfv2-page .hfv2-why--v4 .hfv2-btn--green{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 24px;border:0;border-radius:0;
  background:var(--smp4-btn);color:#fff;font-family:inherit;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;box-shadow:none;white-space:nowrap
}
.hfv2-page .hfv2-why--v4 .hfv2-btn--green:hover{background:var(--smp4-btn-hov);box-shadow:none}
.hfv2-why--v4 .hfv2-why__arw{display:inline-flex;font-size:15px;line-height:1}

/* --- Schmal --- */
@media(max-width:900px){
  .hfv2-why--v4 .hfv2-why__grid{grid-template-columns:1fr}
  .hfv2-why--v4 .hfv2-why__media{min-height:0;height:240px}
}
@media(max-width:560px){
  .hfv2-why--v4 .hfv2-wstats{grid-template-columns:1fr}
  /* Der Knopf neben dem Text wird sonst schmaler als sein eigener Text. */
  .hfv2-why--v4 .hfv2-why__foot{grid-template-columns:1fr;gap:14px}
  .hfv2-page .hfv2-why--v4 .hfv2-btn--green{width:100%;white-space:normal;padding:0 14px;font-size:11.5px;letter-spacing:.05em}
  .hfv2-why--v4 .hfv2-why__trust{max-width:82%;padding:12px 14px}
  .hfv2-why--v4 .hfv2-why__note{font-size:12.5px;padding:13px 16px}
}

/* 2026-08-31 — Der Beschreibungstext der Projektkarten ist auf Wunsch aus dem
   Markup (hf-home-v2.php). Damit fiel auch der Abstand weg, den er trug:
   .hfproj__d hatte margin-bottom:16px, und .hfproj__x steht auf margin-top:auto,
   was in einer Karte ohne Restplatz zu 0 aufloest. Gemessen: "See the project"
   sass auf allen vier Karten mit 0px direkt unter dem Titel.
   Die Regel ist an .hfproj__card gebunden; .hfproj wird ausschliesslich von
   hf-home-v2.php gerendert (nachgezaehlt), andere Seiten sind nicht betroffen. */
.hfproj .hfproj__card .hfproj__t{margin-bottom:16px}