/* ============================================================
   home.css — Startseite (Paket P5)
   Nur HOME-spezifische Sektionen. Basis-Tokens, Buttons, Hero,
   Kategorie-Karten, Feature-Band, 3D-Teaser & Footer kommen aus
   site.css (P3) und werden hier wiederverwendet, nicht dupliziert.
   ============================================================ */

/* ---------- Hero-Ergänzungen ---------- */
.hero .eyebrow .live-dot{ /* statischer Punkt im Eyebrow, ohne Pulse-Layout-Shift */ position:static }
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--muted-2);border:1px solid var(--line-2);background:var(--panel);
  padding:.4rem .75rem;border-radius:999px
}
.hero-badge svg{width:15px;height:15px;color:var(--steel-2);flex:none}/* Deko-Icon entfärbt (Rot nur Signal) 2026-07-16 */

/* ---------- Bedarfsachse „Was lagern Sie?" (P3 / BEST_PATTERNS 2+8) ----------
   Ersetzt das frühere Chips-Band: bedarfszentrierter Einstieg, jede Kachel mündet
   in Katalog-Deeplink + Hallenplaner (?add=). Keine neue Deko, nur Produktbilder. */
.need-axis{padding:22px 0 4px}
.need-eyebrow{
  display:block;font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--muted);font-weight:var(--fw-semibold);margin-bottom:14px;line-height:var(--lh-caps)
}
.need-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.need-card{
  display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--panel);overflow:hidden;transition:.2s var(--ease)
}
.need-card:hover{border-color:var(--steel);box-shadow:var(--sh-1)}/* Design-Refresh 2026-07-16 P6: Karten-Hover ortsfest (translateY entfernt) */
.need-main{display:flex;flex-direction:column;gap:0;flex:1}
.need-photo{
  aspect-ratio:4/3;position:relative;/* Mobile-Fix 2026-07-18: Portrait-Tiles (z. B. 800×1157) sprengten die 4/3-Box —
     die min-content-Höhe des img gewinnt im Grid gegen aspect-ratio, max-height:100% löst zirkulär nicht auf.
     Bild absolut positioniert = Box hält IMMER 4/3, Hochformat wird per object-fit eingepasst (kein Layout-Shift beim Lazy-Load). */
  background:var(--panel);/* Flat 2026-07-16: Dark-Theme-Radial raus, META-Fotos sind auf Weiß freigestellt */
  border-bottom:1px solid var(--line)
}
.need-photo img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}
.need-body{display:flex;flex-direction:column;gap:.15rem;padding:14px 15px 6px}
.need-what{font-family:'Sora';font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--text);line-height:1.2}
.need-sys{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--red-600)}
.need-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:.25rem;line-height:1.35}
.need-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:10px 15px 14px;margin-top:auto
}
.need-link{font-size:var(--fs-ms);font-weight:var(--fw-semibold);color:var(--muted-2)}
.need-card:hover .need-link{color:var(--text)}
.need-plan{
  display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--red-600);white-space:nowrap
}
.need-plan svg{flex:none;transition:transform .2s var(--ease)}
.need-plan:hover svg{transform:translateX(2px)}

/* ---------- Bestseller / Featured-Rail ---------- */
.home-featured{padding-top:0}
.home-featured .rail-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.rail-nav{display:flex;gap:.5rem}
.rail-btn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--panel);color:var(--muted-2);
  cursor:pointer;transition:.2s var(--ease)
}
.rail-btn:hover:not(:disabled){color:var(--text);border-color:var(--steel);background:var(--panel-2)}
.rail-btn:disabled{opacity:.35;cursor:default}
.rail-btn svg{width:20px;height:20px}

.home-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(264px,288px);
  gap:16px;margin-top:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;scrollbar-width:thin;scroll-behavior:smooth;
  scrollbar-color:var(--line-2) transparent;
  /* Peek-Signal (#1, 2026-07-24): die 5. Karte wurde am rechten Containerrand hart
     abgeschnitten und las sich wie ein versehentlicher Overflow statt „hier geht's weiter".
     Weiche rechte Kante = eindeutiger „scroll für mehr"-Hinweis, passt zu den prev/next-Buttons.
     Nur rechts (linke Kante bleibt scharf, sonst würde beim Weiterscrollen die 1. Karte faden).
     Im ≤720px-Block (nicht-scrollendes 2-Spalten-Raster) unten wieder zurückgesetzt. */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)
}
.home-rail::-webkit-scrollbar{height:8px}
.home-rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.home-rail .pcard{scroll-snap-align:start}

/* "rank" Hervorhebung der Bestseller */
/* Overlap-Fix 2026-07-19 (Ludwig-Feedback): Rang-Badge lag deckungsgleich unter dem runden
   Merken-Herz (.pcard-merk: top:8px/right:8px, ~34px, opak) und lugte nur als Rand hervor.
   Herz bleibt ortsfest oben rechts (erwartete Position des Controls); Rang weicht nach links
   daneben aus (right = Herz-Breite 34 + right-Offset 8 + Gap 6 = 48px). Flach, keine neue Pill. */
.pcard .rank{
  position:absolute;top:10px;right:48px;z-index:2;
  font-family:'Sora';font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:.04em;
  color:#fff;background:rgba(16,24,40,.6);border:1px solid rgba(255,255,255,.14);
  padding:.18rem .5rem;border-radius:7px
}
.home-rail .pcard-art svg{width:54%}
/* Flat 2026-07-16: Dark-Theme-Radial auf den Rail-Kacheln raus; Basis var(--panel-2) aus site.css greift. */

.featured-foot{display:flex;justify-content:center;margin-top:30px}

/* ---------- Beratungs-CTA ---------- */
/* Vertikaler Rhythmus untere Seitenhälfte (#2, 2026-07-24): Bestseller(#bestseller) → 3D-Teaser
   (#planer) stapelten je die volle .section-Padding (clamp 56–104px), plus .featured-foot
   margin-top:30px → ~250px leeres Grau zwischen „Alle … Artikel ansehen" und der 3D-Karte.
   Denselben Naht-Straff-Trick wie unten (Planer→CTA) auf diese Naht anwenden: beide Seiten
   ~halbieren. .home-featured setzt bereits padding-top:0, daher nur unten trimmen. #id schlägt
   .section im Cascade — .section in site.css bleibt unangetastet. */
#bestseller{padding-bottom:clamp(28px,4vw,52px)}
#planer{padding-top:clamp(28px,4vw,52px)}

/* Isa-Feedback 2026-07-12 (#4): Übergang Planer(#planer) → Fachberatung(.home-cta) entzerren.
   Beide sind .section und stapeln je clamp(56–104px) Padding → ~2× Lücke (mobil ~112px, sichtbar
   als großer Leerraum vor der Trennlinie). Beide Seiten halbieren → eine ruhige Distanz, die
   Trennlinie sitzt mittig statt in einem übergroßen Gap. #id/.class schlägt .section im Cascade. */
#planer{padding-bottom:clamp(28px,4vw,52px)}
.home-cta{position:relative;overflow:hidden;border-top:1px solid var(--line);padding-top:clamp(28px,4vw,52px)}
.home-cta .cta-card{
  position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);
  align-items:center;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--panel);padding:clamp(30px,4vw,56px);/* Flat-Panel 2026-07-16: Diagonal-Verlauf raus */
  box-shadow:var(--sh-2)
}
/* Aufhellen 2026-07-05 (Deko #7): roter Radial-Glow der CTA-Karte entfernt. */
.home-cta .cta-copy{position:relative}
.home-cta h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.home-cta .cta-copy>p{color:var(--muted-2);margin-top:1rem;max-width:48ch;font-size:var(--fs-lg)}
.home-cta .cta-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.cta-phone{display:inline-flex;flex-direction:column;justify-content:center;padding:.5rem 0}
.cta-phone span{font-size:var(--fs-sm);color:var(--muted);letter-spacing:.04em}
.cta-phone b{font-family:'Sora';font-size:var(--fs-2xl);color:var(--text);line-height:var(--lh-tight)}
.cta-meta{display:flex;align-items:center;gap:.5rem;margin-top:1.4rem;color:var(--muted);font-size:var(--fs-ms)}
.cta-meta .live-dot{position:static;flex:none}

.home-cta .cta-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.home-cta .cta-list li{
  display:flex;gap:.85rem;align-items:flex-start;padding:14px 16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel-2)
}
.home-cta .cta-list .ico{
  flex:none;width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;/* Design-Refresh 2026-07-16 P6: Icon-Kachel-Radius tokenisiert */
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--steel-2)/* Rot-Kachel entfärbt 2026-07-16: Deko-Icons neutral */
}
.home-cta .cta-list h4{font-size:var(--fs-md)}
.home-cta .cta-list p{color:var(--muted);font-size:var(--fs-ms);margin-top:.2rem}

/* ---------- Trust-Band ---------- */
.home-trust{border-top:1px solid var(--line);background:var(--ink-2)}/* Design-Refresh 2026-07-16 P6: Dunkelband-Fade → flach */
.trust-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-tile{
  display:flex;flex-direction:column;gap:.5rem;padding:24px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel)/* Flat-Panel 2026-07-16: Verlauf raus */
}
.trust-tile .ico{
  width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;/* Design-Refresh 2026-07-16 P6: Icon-Kachel-Radius tokenisiert */
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--steel-2)/* Deko-Icon entfärbt 2026-07-16 */
}
.trust-tile h4{font-size:var(--fs-md);margin-top:.3rem}
.trust-tile p{color:var(--muted);font-size:var(--fs-ms)}

.pay-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line)
}
.pay-row .pay-label{color:var(--muted);font-size:var(--fs-base);margin-right:.4rem}
.pay-chip{
  display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--muted-2);border:1px solid var(--line-2);background:var(--panel);
  padding:.5rem .85rem;border-radius:10px
}
.pay-chip svg{width:16px;height:16px;color:var(--steel-2);flex:none}

/* P3 (Audit 2026-07-05): echter Sozialbeweis (FairCommerce/Händlerbund) — keine Fake-Reviews. */
.proof-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.proof-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .9rem;border-radius:999px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--text);font-size:var(--fs-base);font-weight:var(--fw-medium);transition:.16s}
.proof-badge svg{color:var(--good);flex:none}
.proof-badge b{font-weight:var(--fw-bold)}
.proof-badge:hover{border-color:var(--good)}
.proof-note{color:var(--muted);font-size:var(--fs-ms)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .need-grid{grid-template-columns:repeat(3,1fr)}
  /* Overflow-Audit 2026-07-24: langer EN-CTA "Start in the planner" wurde in der 3-Spalten-Karte (~211px) am overflow:hidden abgeschnitten — Gap/Innenabstand leicht straffen. */
  .need-foot{gap:.3rem;padding-left:14px;padding-right:14px}
}
@media (max-width:980px){
  .home-cta .cta-card{grid-template-columns:1fr}
  .trust-tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .need-grid{grid-template-columns:1fr 1fr;gap:12px}
  .need-what{font-size:var(--fs-base)}
  .rail-nav{display:none}
  /* Marketing-Audit 2026-07-05 (P2): Bestseller mobil als 2-spaltiges Raster statt Blind-Swipe
     (vorher nur 1 von 6 sichtbar). Alle Bestseller ohne verstecktes Scrollen sichtbar.
     Peek-Maske (#1) hier zurücksetzen — das nicht-scrollende Raster zeigt alle Karten, ein
     rechter Fade würde die 2. Spalte fälschlich abschwächen. */
  .home-rail{display:grid;grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;
    gap:12px;overflow:visible;scroll-snap-type:none;margin-top:20px;
    -webkit-mask-image:none;mask-image:none}
  .trust-tiles{grid-template-columns:1fr}
  .cta-phone{padding-top:.8rem}
}
@media (max-width:460px){
  .home-rail{grid-template-columns:1fr}
  .need-grid{grid-template-columns:1fr}
}

/* ============================================================
   HERO-3D-STAGE 2026-07-17 (experimentell) — interaktive Montage-Bühne + Kennzahlen.
   Rückbau: diesen Block entfernen und src/templates/pages/home.html aus
   _backups/hero3d_2026-07-17/ zurückspielen (+ home-hero-3d.js löschen).
   Doktrin „Industriekatalog-Präzision": flach, ortsfest, Rot nur als CTA-Signal.
   ============================================================ */
.hero-right{display:flex;flex-direction:column;gap:14px;align-self:center;min-width:0}

.hero-stage{
  position:relative;overflow:hidden;
  /* Freisteller (Ludwig 2026-07-19 „das Weiß verschwindet"): keine weiße Panel-Kachel mehr —
     das Regal steht direkt auf dem Seitenhintergrund (Canvas rendert alpha:0, der
     ShadowMaterial-Bodenschatten erdet es). Box bleibt für Layout/Chips/Foot bestehen. */
  background:transparent;border:none;border-radius:0;
  aspect-ratio:4/3.4;   /* Startwert — per Screenshot iteriert, damit die Spalte mit H1+Lead+CTAs+Badges abschließt */
  display:flex;flex-direction:column
}
/* Poster = robuster Default (JS aus/kaputt/kein WebGL/Mobil ⇒ normales Produktbild). */
.hero-stage-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;
  opacity:1;transition:opacity .45s var(--ease);z-index:1
  /* Freisteller 2026-07-19: Poster ist ein Alpha-WebP aus der 3D-Szene (assets/img/hero/) —
     steht wie das Live-Modell frei auf dem Seitengrund, kein Blend-Trick nötig. */
}
.hero-stage.is-live .hero-stage-poster{opacity:0;pointer-events:none}
/* Canvas-Container (cad_engine hängt sein <canvas> hier ein; ResizeObserver liest die Höhe).
   bottom:42px = Fußleisten-Höhe — sonst zentriert frameView das Modell über die VOLLE Stage
   und die Regalfüße verschwinden hinter der Fußleiste (Screenshot-Iteration 1). */
.hero-stage-canvas{position:absolute;inset:64px 0 6px;z-index:0}/* 2026-07-19: Kopfzeile oben (Chips+CTA ~34px + Maß-Zeile ~24px) — Canvas beginnt darunter, unten nur Minimal-Rand */
.hero-stage-canvas canvas{display:block;width:100%;height:100%}

/* Kopfzeile (Ludwig 2026-07-19 „Beschriftung über das Regal"): Chips links + Planer-CTA rechts,
   darunter die Maß-Zeile — alles im Fluss (Stage = flex column), der Canvas beginnt darunter.
   visibility-Gating hält den Platz frei (kein Layout-Shift beim is-ready-Einblenden). */
.hero-stage-top{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:2px 2px 0;opacity:0;visibility:hidden;transition:opacity .3s var(--ease);pointer-events:none
}
.hero-stage.is-ready .hero-stage-top{opacity:1;visibility:visible;pointer-events:auto}
.hero-stage-chips{display:flex;gap:6px;flex-wrap:wrap}
.hero-chip{
  font-family:'Inter',system-ui,sans-serif;font-weight:var(--fw-semibold);font-size:var(--fs-sm);line-height:var(--lh-caps);
  color:var(--muted-2);background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.42rem .66rem;cursor:pointer;transition:.16s var(--ease)
}
.hero-chip:hover{border-color:var(--steel);color:var(--text)}
.hero-chip.is-active{border-color:var(--text);color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}

/* Hint: dezent unten mittig über dem Canvas; verschwindet via .is-touched (oder JS-Timer). */
.hero-stage-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
  font-size:var(--fs-xs);color:var(--muted);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:.28rem .7rem;opacity:0;transition:opacity .35s var(--ease);pointer-events:none/* entpillt (Doktrin 2026-07-16) */
}
.hero-stage.is-ready .hero-stage-hint{opacity:.92}
.hero-stage.is-touched .hero-stage-hint{opacity:0}

/* Zeile 2 unter den Chips (2026-07-19: vormals Fußzeile — Ludwig wollte die Beschriftung
   überm Regal): Maße links, Planer-CTA rechts — Chips-Reihe bleibt dadurch einzeilig. */
.hero-stage-sub{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:6px 2px 0;min-height:1.5em;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease)
}
.hero-stage.is-ready .hero-stage-sub{opacity:1;visibility:visible}
.hero-stage-spec{
  font-size:var(--fs-sm);color:var(--muted);line-height:1.25;min-width:0;
  font-variant-numeric:tabular-nums lining-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.hero-stage-plan{
  display:inline-flex;align-items:center;gap:.3rem;flex:none;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--red-600);white-space:nowrap
}
.hero-stage-plan svg{flex:none;transition:transform .2s var(--ease)}
.hero-stage-plan:hover svg{transform:translateX(2px)}

/* Kennzahlen unter der Bühne: Desktop = kompakte 4er-Reihe statt 2x2 (Bühne trägt die Höhe). */
.hero-right .trust.hero-stats{grid-template-columns:repeat(4,1fr);gap:10px;align-self:stretch}
.hero-right .trust.hero-stats .t{padding:.85rem .75rem;border-radius:var(--r)}
.hero-right .trust.hero-stats .t b{font-size:clamp(1.15rem,1.5vw,1.5rem);line-height:var(--lh-tight)}
.hero-right .trust.hero-stats .t span{font-size:var(--fs-xs);margin-top:.2rem}

/* ≤980px: 3D-JS bleibt AUS (Gate in home-hero-3d.js → return ≤980px), also läuft die Bühne
   nie live. Stats fallen auf ihr bestehendes 2x2-Layout zurück (site.css unangetastet). */
@media (max-width:980px){
  .hero-right .trust.hero-stats{grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
  .hero-right .trust.hero-stats .t{padding:clamp(1.1rem,2vw,1.7rem) clamp(1.15rem,2vw,1.8rem);border-radius:var(--r-lg)}
  .hero-right .trust.hero-stats .t b{font-size:clamp(1.7rem,2.6vw,2.4rem)}
  .hero-right .trust.hero-stats .t span{font-size:var(--fs-ms)}
}
/* Tablet-Band (#0, 2026-07-24): im 640–980px-Bereich blieb der Hero ohne Produkt-Moment —
   die Bühne war für den GESAMTEN ≤980px-Bereich display:none. Da das 3D-JS hier ohnehin
   gated ist (kein is-ready ⇒ Chips/Spec/Hint bleiben visibility:hidden), zeigen wir die
   Bühne im Tablet-Band POSTER-ONLY: das statische Freisteller-Render (MULTIPAL) steht
   gestapelt unter den CTAs/Badges in der .hero-right-Spalte, über den Kennzahlen. Höhe
   gekappt, damit das Poster die Spalte nicht dominiert. Erst <640px komplett weg. */
@media (max-width:639.98px){
  .hero-stage{display:none}
}
@media (min-width:640px) and (max-width:980px){
  .hero-stage{
    display:flex;
    /* aspect-ratio 4/3.4 bleibt, aber gekappt: auf Tablet soll das Poster ein ruhiger
       Produkt-Anker sein, keine halbe Bildschirmhöhe. contain-Poster skaliert brief innerhalb. */
    aspect-ratio:auto;height:clamp(280px,42vw,360px);
    margin-bottom:2px
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-stage-poster{transition:none}
}