/* =========================================================================
   Landingpages — Design-System v1.1, §4 (Branchenfarben), §12 (Hero-System),
   §16/§17 (Blockaufbau und Komponenten).

   Wird nur auf LP-Templates geladen (functions.php, Muster woocommerce.css):
   kein LP-CSS auf Startseite, Shop- oder Rechtsseiten.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Branchenfarben (§4) — nur Akzente (~5 % Fläche), jede Seite bleibt Zweisam.
   Die Body-Klasse lp--{accent} setzt inc/lp-render.php aus der Config.
   ------------------------------------------------------------------------- */
:root{
  --branch-industrie:#3E5B70;
  --branch-metall:#4B555F;
  --branch-kunststoff:#4F7E82;
  --branch-handwerk:#A8643E;
  --branch-service:#9B7049;
  --branch-aussen:#5E7048;
  --branch-medical:#6EA99A;
  --branch-business:#243A5E;
  --branch-gastro:#7A523A;
  --branch-schutz:#B89A36;
}
body.lp{--page-accent:var(--zcf-forest)} /* Fallback (z. B. Region, Service) */
body.lp--industrie{--page-accent:var(--branch-industrie)}
body.lp--metall{--page-accent:var(--branch-metall)}
body.lp--kunststoff{--page-accent:var(--branch-kunststoff)}
body.lp--handwerk{--page-accent:var(--branch-handwerk)}
body.lp--service{--page-accent:var(--branch-service)}
body.lp--aussen{--page-accent:var(--branch-aussen)}
body.lp--medical{--page-accent:var(--branch-medical)}
body.lp--business{--page-accent:var(--branch-business)}
body.lp--gastro{--page-accent:var(--branch-gastro)}
body.lp--schutz{--page-accent:var(--branch-schutz)}

/* Akzent als TEXTFARBE braucht eine dunklere Variante, wo die §4-Töne
   auf Cream keine 4,5:1 erreichen (WCAG 2.1 AA). Flächen/Kanten nutzen
   weiter --page-accent; Text (Eyebrow, FAQ-Marker) nutzt --page-accent-text. */
body.lp{--page-accent-text:var(--page-accent)}
body.lp--handwerk{--page-accent-text:#8F5535}
body.lp--service{--page-accent-text:#7D5A3A}
body.lp--medical{--page-accent-text:#3F7A6B}
body.lp--schutz{--page-accent-text:#7A661F}

/* Akzent-Einsatzstellen (bewusst wenige — 80/15/5-Regel §4):
   Eyebrow, Kachel-Hover, FAQ-Marker. Buttons bleiben Petrol (§11). */
body.lp .eyebrow{color:var(--page-accent-text)}
body.lp .section--dark .eyebrow{color:var(--zcf-camel)} /* dunkler Grund: Kontrast vor Akzent */

/* -------------------------------------------------------------------------
   Hero (§12.2) — eigener Namensraum .lp-hero, weil .hero der Startseiten-
   Hero ist (Grid mit Aside statt Vollbild mit Overlay).
   Links ~45 % ruhiger Textfreiraum via Overlay, Motiv rechts.
   ------------------------------------------------------------------------- */
.lp-hero{
  position:relative;
  min-height:clamp(560px,72vh,760px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--zcf-cream);
  border-bottom:1px solid var(--zcf-border);
}
.lp-hero__media{position:absolute;inset:0}
.lp-hero__media img{
  width:100%;height:100%;
  object-fit:cover;
  /* Motiv rechts (§12.1); vertikal nahe der Oberkante ankern (10 % statt
     center), damit der Cover-Beschnitt IMMER von unten (Füße) wegnimmt und
     die Köpfe auf keiner Viewport-Breite angeschnitten werden. Die /seitenbild-
     Motive setzen die Köpfe knapp unter die Oberkante (~5–8 % Luft). */
  object-position:100% 10%;
}
.lp-hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(252,250,245,.98) 0%,
    rgba(252,250,245,.92) 35%,
    rgba(252,250,245,.42) 62%,
    rgba(252,250,245,.06) 100%);
}
.lp-hero .container{position:relative;z-index:2;width:100%}
/* 580px statt 640px: lange H1s (z. B. Region) liefen über die Bildmitte
   hinaus — der Textblock bleibt jetzt sicher in den linken ~45 % (§12.1). */
.lp-hero__content{max-width:580px;padding-block:clamp(3rem,8vw,6rem)}
.lp-hero h1{color:var(--zcf-ink);text-wrap:balance}
.lp-hero .lead{max-width:580px;color:var(--zcf-ink)} /* auf Bildgrund: Ink statt Muted (Kontrast ≥ 4,5:1) */

/* Mobil (§12.1): stärkeres Overlay statt Motiv-Verzicht — Text bleibt lesbar,
   das Bild bleibt Stimmungsträger. */
@media (max-width:768px){
  .lp-hero{min-height:0}
  .lp-hero__overlay{
    background:linear-gradient(180deg,
      rgba(252,250,245,.96) 0%,
      rgba(252,250,245,.9) 55%,
      rgba(252,250,245,.55) 100%);
  }
  /* Mobil: Hochformat-Box beschneidet ohnehin die Seiten; y=20 % schützt die
     Köpfe zusätzlich, falls die Box durch kurzen Text mal breiter als 16:9 wird. */
  .lp-hero__media img{object-position:50% 20%}
}

/* Hero-Testvariante „Split" (Nutzer 2026-07-11, Config 'hero_split'):
   Bildbühne statt Überlagerung — Text auf eigener Sand-Fläche (~45 %),
   Bild vollständig sichtbar rechts (~55 %), kein Overlay, kein Beschnitt
   durch den Verlauf. Standard bleibt der Overlay-Hero oben. */
.lp-hero--split{display:grid;grid-template-columns:45fr 55fr;align-items:stretch}
.lp-hero--split .lp-hero__media{position:relative;inset:auto;order:2;min-height:100%}
.lp-hero--split .lp-hero__media img{object-position:center}
.lp-hero--split .container{
  order:1;display:flex;align-items:center;
  background:linear-gradient(180deg,var(--zcf-cream),var(--zcf-sand));
}
.lp-hero--split .lp-hero__content{max-width:none;padding-inline:clamp(1rem,3vw,2rem)}
@media (max-width:768px){
  .lp-hero--split{grid-template-columns:1fr}
  .lp-hero--split .lp-hero__media{order:0;aspect-ratio:16/10;min-height:0}
}

/* Bildband (Feedback 2026-07-11): Bild-Atempause in voller Breite zwischen
   den Textabschnitten. 21:8 Desktop, mobil höher, Caption unaufdringlich. */
.lp-bildband{margin:0;position:relative}
.lp-bildband img{display:block;width:100%;aspect-ratio:21/8;object-fit:cover}
.lp-bildband figcaption{
  position:absolute;left:0;bottom:0;
  background:rgba(30,37,45,.72);color:#fff;
  font-size:.85rem;padding:.45rem .9rem;border-radius:0 10px 0 0;
}
@media (max-width:768px){.lp-bildband img{aspect-ratio:16/9}}

/* Media-Row-Variante der lp-box (Veredelung, Feedback 2026-07-11):
   Situationsbild links, Text rechts — bricht die weiße Textbox auf. */
.lp-box--media{display:grid;grid-template-columns:5fr 7fr;gap:clamp(16px,3vw,32px);align-items:center}
.lp-box--media .lp-box__media{margin:0}
.lp-box--media .lp-box__media img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
}
@media (max-width:768px){.lp-box--media{grid-template-columns:1fr}}

/* -------------------------------------------------------------------------
   Blöcke
   ------------------------------------------------------------------------- */
.lp-block-gap{margin-top:clamp(20px,3vw,32px)}

/* Kategorie-Kacheln: ganze Karte klickbar, Bild ruhig im 4:3-Rahmen (§15).
   aspect-ratio fest, damit beim Nachladen nichts springt (Bildstrategie). */
a.lp-tile{display:block;text-decoration:none;color:inherit}
a.lp-tile:hover{border-color:var(--page-accent)}
a.lp-tile:hover h3{color:var(--page-accent)}
.lp-tile__media{
  display:block;
  aspect-ratio:4/3;
  margin-bottom:.8rem;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--zcf-sand);
}
.lp-tile__media img{width:100%;height:100%;object-fit:cover}

/* Vertrauensboxen (§17): eine Grundform, drei Stimmungen. Die linke
   Akzentkante ist die einzige Farbmarkierung — Information steht im Text,
   nie nur in der Farbe (WCAG). */
.lp-box{
  background:var(--zcf-white);
  border:1px solid var(--zcf-border);
  border-left:6px solid var(--page-accent);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:clamp(22px,4vw,40px);
}
.lp-box p{max-width:64ch}
.lp-box__link{margin-top:1.2rem}
.lp-box--veredelung{border-left-color:var(--zcf-camel)}
.lp-box--showroom{border-left-color:var(--zcf-petrol)}
.lp-box--region{border-left-color:var(--zcf-forest);background:linear-gradient(180deg,var(--zcf-white),var(--zcf-sand))}
.lp-box--region .eyebrow{color:var(--zcf-forest)}
.lp-box--veredelung .eyebrow{color:var(--zcf-camel)}
.lp-box--showroom .eyebrow{color:var(--zcf-petrol)}

/* FAQ: <details> nativ, Fokus sichtbar, Touch-Ziel ≥ 44 px über Padding. */
.lp-faq{display:grid;gap:12px;max-width:820px}
.lp-faq__item{
  background:var(--zcf-white);
  border:1px solid var(--zcf-border);
  border-radius:var(--radius-sm);
}
.lp-faq__item summary{
  cursor:pointer;
  padding:.95rem 1.2rem;
  font-weight:700;
  list-style-position:inside;
}
.lp-faq__item summary::marker{color:var(--page-accent-text)}
.lp-faq__item[open] summary{border-bottom:1px solid var(--zcf-border)}
.lp-faq__item p{padding:.95rem 1.2rem;color:var(--zcf-muted)}

/* Saison-Rückverweis (Sommer/Winter -> Haupt-LP) */
.lp-season-back{margin-top:1rem;font-size:.95rem}

/* =========================================================================
   Feedback-Runde 1/2 (2026-07-10): globale Bausteine
   ========================================================================= */

/* --- Ultrawide-Fix: Hero-Bild nicht endlos in die Breite ziehen.
   Auf Curved-/Ultrawide-Monitoren (>1920px) beschnitt object-fit:cover das
   Motiv bis zur Unkenntlichkeit. Deshalb: Bildfläche bei 1920px deckeln und
   zentrieren; außen läuft die ruhige Cream-Fläche weiter. Overlay wandert
   mit, damit der Textfreiraum-Verlauf auf dem Bild bleibt. */
@media (min-width: 1921px){
  .lp-hero__media,
  .lp-hero__overlay{
    left:50%;
    right:auto;
    width:1920px;
    transform:translateX(-50%);
  }
  /* Innerhalb der 1920px-Bühne bleibt der vertikale Beschnitt bestehen —
     darum auch hier oben ankern, damit die Köpfe erhalten bleiben. */
  .lp-hero__media img{object-position:100% 10%}
}

/* --- Slider (Karussell): schmaler Scroll-Snap-Streifen unter dem Hero.
   pages-Modus (LP-Übersicht) und kategorien-Modus (Warengruppen) teilen
   das Layout. Pfeile: assets/js/lp.js; ohne JS bleibt Touch-Scroll. */
.lp-slider{padding-block:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--line)}
.lp-slider__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.lp-slider__head .eyebrow{margin:0}
.lp-slider__nav{display:flex;gap:.4rem}
.lp-slider__btn{
  width:44px;height:44px; /* Touch-Ziel ≥44px (WCAG) */
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--zcf-white);
  color:var(--zcf-petrol);
  font-size:1.1rem;
  cursor:pointer;
}
.lp-slider__btn:hover{border-color:var(--zcf-petrol)}
.lp-slider__track{
  list-style:none;
  margin:0;padding:0 0 .5rem;
  display:flex;gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.lp-slider__slide{
  flex:0 0 clamp(200px,24%,280px);
  scroll-snap-align:start;
}
.lp-slider__slide a{display:block;text-decoration:none;color:inherit}
.lp-slider__media{
  display:block;
  /* Hochformat 4:5 statt 3:2: die LP-Vorschaubilder ziehen die Hero-Motive,
     die nach §12.1 links ~45 % Textfreiraum haben. Im Querformat-Thumb
     dominierte diese Leerfläche. Quadratisch (1:1) + object-position rechts
     schneidet den leeren Textraum weg und zeigt das Motiv formatfüllend,
     ohne die Personen zu beschneiden (4:5 war für breite Waren-Flatlays wie
     Region zu eng — Nutzer 2026-07-19). Volle Bildhöhe bleibt sichtbar.
     (Betrifft nur den Seiten-/Kategorien-Slider; die Referenz-Composites
     liegen in .card__media und bleiben unberührt.) */
  aspect-ratio:1/1;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--zcf-sand);
  border:1px solid var(--line);
}
.lp-slider__media img{width:100%;height:100%;object-fit:cover;object-position:80% 40%;display:block}
.lp-slider__slide a:hover .lp-slider__media{border-color:var(--zcf-camel)}
.lp-slider__label{
  display:block;
  margin-top:.55rem;
  font-weight:700;
  font-size:.95rem;
  color:var(--zcf-ink);
}
.lp-slider__slide a:hover .lp-slider__label{color:var(--zcf-petrol)}

/* --- Coming-Soon-Button (details/summary, kein JS): Funktion angekündigt,
   aber noch nicht gebaut (z. B. Showroom-Selbstanmeldung). */
.zw-coming-soon{position:relative;display:inline-block}
.zw-coming-soon summary{list-style:none;cursor:pointer}
.zw-coming-soon summary::-webkit-details-marker{display:none}
.zw-coming-soon__note{
  margin-top:.75rem;
  padding:1rem 1.1rem;
  background:var(--zcf-white);
  color:var(--zcf-text);
  border:1px solid var(--zcf-camel);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  max-width:34rem;
}
.zw-coming-soon__note p{margin:0 0 .7rem}
.section--dark .zw-coming-soon__note{color:var(--zcf-text)}

/* --- CTA-Band: Unterzeile unter der Frage (neuer Wortlaut 2026-07-10). */
.cta-band__sub{opacity:.85;max-width:44rem;margin-top:.5rem}

/* --- Gründer-Trust-Block (Quelle: Video-Transcript). Sage/Cream-Umfeld. */
.lp-gruender__card{
  background:linear-gradient(135deg, var(--zcf-sand), var(--zcf-cream));
  border:1px solid var(--zcf-sage);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,4vw,3rem);
  display:grid;
  gap:clamp(1.25rem,3vw,2.5rem);
}
.lp-gruender__card--with-img{grid-template-columns:minmax(180px,260px) 1fr;align-items:center}
.lp-gruender__media{margin:0}
.lp-gruender__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
}
.lp-gruender__body h2{margin-bottom:.6rem}
@media (max-width:768px){
  .lp-gruender__card--with-img{grid-template-columns:1fr}
  .lp-gruender__media{max-width:240px}
}

/* --- Bildslot in Nutzen-Karten (3:2, optional). */
.card__media{
  margin:-1.5rem -1.5rem 1rem; /* bündig an die Kartenkante */
  overflow:hidden;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.card__media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}

/* --- Startseite: zweites Bildelement + dezenter SKC-Hinweis. */
.home-band{
  margin:clamp(20px,3vw,32px) 0 0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.home-band img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
@media (max-width:768px){.home-band img{aspect-ratio:16/9}}
.home-skc-hint{
  margin-top:.8rem;
  font-size:.85rem;
  color:var(--zcf-muted);
}
.home-skc-hint span{color:var(--zcf-petrol);font-weight:700}

/* --- Leistungspakete (inklusive vs. Zusatz, Service-LP 2026-07-10) */
.lp-pakete{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:768px){.lp-pakete{grid-template-columns:1fr}}
.lp-pakete__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.lp-pakete__list li{padding-left:1.5rem;position:relative}
.lp-pakete__list li::before{
  content:"✓";
  position:absolute;left:0;
  color:var(--zcf-forest);
  font-weight:800;
}
.lp-pakete__note{font-size:.92rem;color:var(--zcf-muted)}

/* --- Referenz-/Testimonialblock (2026-07-11): Grid bei <=3, Slider bei "alle".
   Karten nutzen die card-Basis; Kundenname verlinkt (Backlink-Regel). */
.lp-referenzen__grid{list-style:none;margin:0;padding:0}
.lp-referenzen__card{margin:0}
.lp-referenzen__card h3 a{color:var(--zcf-ink);text-decoration:none}
.lp-referenzen__card h3 a:hover{color:var(--zcf-petrol);text-decoration:underline}
.lp-referenzen__card > p{font-size:.95rem}
.lp-referenzen__produkte{
  margin-top:.7rem;
  padding-top:.7rem;
  border-top:1px solid var(--line);
  font-size:.88rem;
  color:var(--zcf-muted);
}
.lp-referenzen__produkte a{color:var(--zcf-petrol)}
/* Zweitbilder (Nutzerwunsch 2026-07-11): kleine Vorschau weiterer Produkte
   derselben Kundenreferenz, unaufdringlich unter der Produktzeile. */
.lp-referenzen__weitere{list-style:none;display:flex;gap:.5rem;margin:.6rem 0 0;padding:0}
.lp-referenzen__weitere li{width:56px;height:56px;border-radius:8px;overflow:hidden;flex:none;border:1px solid var(--line)}
.lp-referenzen__weitere img{width:100%;height:100%;object-fit:cover;display:block}
/* Slider-Variante: Karten breiter als LP-Slides, Bild oben bündig. */
.lp-referenzen__track .lp-slider__slide{flex-basis:clamp(260px,30%,340px)}
.lp-referenzen__track{padding-bottom:.75rem}

/* -------------------------------------------------------------------------
   Shop-Hauptseite: Vorauswahl-Hub (templates/shop-hub.php, 2026-07-11).
   Dramaturgie: Gefühl → Identifikation → Orientierung → Vertrauen →
   Entlastung. Kacheln = Spiegel („Wo sind Sie zu Hause?"), keine Regale.
   ------------------------------------------------------------------------- */
.shop-hub__hero{
  display:grid;grid-template-columns:46fr 54fr;align-items:stretch;
  background:linear-gradient(180deg,var(--zcf-cream),var(--zcf-sand));
  border-bottom:1px solid var(--zcf-border);
}
.shop-hub__hero-txt{
  display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,4vw,3rem);
}
.shop-hub__hero-txt h1{color:var(--zcf-ink);text-wrap:balance;margin:0}
.shop-hub__hero-txt .lead{max-width:46ch;margin:0}
.shop-hub__hero-media{min-height:320px}
.shop-hub__hero-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:768px){
  .shop-hub__hero{grid-template-columns:1fr}
  .shop-hub__hero-media{order:-1;min-height:0;aspect-ratio:16/10}
}

.shop-hub__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.shop-hub__tile{
  position:relative;display:block;border-radius:12px;overflow:hidden;
  aspect-ratio:4/3;text-decoration:none;
  transition:transform .18s ease;
}
.shop-hub__tile:hover{transform:translateY(-3px)}
.shop-hub__tile img{width:100%;height:100%;object-fit:cover;display:block}
.shop-hub__tile-label{
  position:absolute;inset:auto 0 0 0;padding:2rem 1rem .85rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(30,37,45,.82));
}
.shop-hub__tile-label b{display:block;font-size:1.05rem}
.shop-hub__tile-label span{font-size:.85rem;opacity:.92}
.shop-hub__all{margin-top:1rem}
@media (max-width:768px){.shop-hub__tiles{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.shop-hub__tiles{grid-template-columns:1fr}}

.shop-hub__chips{display:flex;gap:.6rem;flex-wrap:wrap}
.shop-hub__chip{
  display:inline-block;border:1.5px solid var(--zcf-border);background:#fff;
  border-radius:999px;padding:.5rem 1.05rem;font-size:.9rem;font-weight:600;
  color:var(--zcf-petrol);text-decoration:none;
}
.shop-hub__chip:hover{border-color:var(--zcf-petrol)}

.shop-hub__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.shop-hub__step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.15rem}
.shop-hub__step h3{font-size:1rem;margin:.6rem 0 .25rem}
.shop-hub__step p{font-size:.9rem;color:var(--zcf-muted);margin:0}
.shop-hub__step-no{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--zcf-sage);color:var(--zcf-forest);
  font-weight:650;font-size:.9rem;
}
@media (max-width:768px){.shop-hub__steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.shop-hub__tile{transition:none}}