/* ============================================================================
   SD-Link — Startseiten-Design (High-Fidelity-Rebuild des Mocks)
   ----------------------------------------------------------------------------
   Vollstaendiges Design der Startseite. Quelle: design_handoff_homepage/mock/site/
   (colors_and_type.css + home.css + shop.css). Die Content-Sektionen liegen als
   HTML-Bloecke mit den Mock-Klassen (.home-hero, .sd-section, .sd-feature,
   .sd-why-card, .sd-faq …) in der Seite; die Produkt-Grids sind WooCommerce-
   Shortcodes ([products …]) und werden hier als Karten gestylt (.sd-products-woo).

   Wird NUR auf der Startseite geladen (functions.php, is_front_page()).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ===== Design-Tokens ====================================================== */
:root {
  --sd-navy-900: #0a1b2e;
  --sd-navy-800: #0f2742;
  --sd-navy-700: #163558;
  --sd-navy-600: #1f4878;
  --sd-navy-500: #2c5e95;
  --sd-navy-400: #5384b6;
  --sd-navy-300: #8fadcf;
  --sd-navy-200: #cfdce9;
  --sd-navy-100: #e7eef5;
  --sd-navy-050: #f4f7fa;
  --sd-amber-700: #b3590e;
  --sd-amber-600: #d76b14;
  --sd-amber-500: #ee8127;
  --sd-amber-100: #fde9d4;
  --sd-sky-600: #1a8cd8;
  --sd-sky-500: #4ba9e8;
  --sd-ink: #0e1620;
  --sd-ink-2: #3b4654;
  --sd-ink-3: #6b7888;
  --sd-line: #d7dde4;
  --sd-line-soft: #ebeef2;
  --sd-paper: #ffffff;
  --sd-paper-2: #fafbfc;

  --fg-1: var(--sd-ink);
  --fg-2: var(--sd-ink-2);
  --fg-3: var(--sd-ink-3);
  --fg-brand: var(--sd-navy-700);
  --bg-sunken: var(--sd-navy-050);

  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;

  --shadow-1: 0 1px 2px rgba(14,22,32,.06), 0 1px 1px rgba(14,22,32,.04);
  --shadow-2: 0 2px 6px rgba(14,22,32,.07), 0 4px 12px rgba(14,22,32,.06);
  --shadow-3: 0 6px 16px rgba(14,22,32,.10), 0 12px 32px rgba(14,22,32,.08);
  --shadow-focus: 0 0 0 3px rgba(44,94,149,.32);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===== Storefront-Integration (nur Startseite) ===========================
   Volle Breite, kein Seitentitel/Breadcrumb/Sidebar – damit die Sektionen
   ihre eigene Breite steuern koennen. */
.page-id-2235 .entry-header,
.page-id-2235 .storefront-breadcrumb,
.page-id-2235 #secondary { display: none !important; }

.page-id-2235.page .content-area { width: 100% !important; float: none !important; margin: 0 !important; }
/* margin auch nullen: unterhalb des Storefront-Desktop-Breakpoints (~1064px)
   setzt das Theme margin: 0 2.618em auf .col-full -> weisse Seitenraender */
.page-id-2235 #content .col-full {
  max-width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
.page-id-2235 #primary { width: 100% !important; margin: 0 !important; }
.page-id-2235 .entry-content { margin-top: 0 !important; }
.page-id-2235 .site-content { padding-top: 0 !important; }
.page-id-2235 .site-header { margin-bottom: 0 !important; }

/* Storefront-Standardabstaende zwischen Bloecken auf der Startseite neutralisieren */
.page-id-2235 .entry-content > * { margin-top: 0; margin-bottom: 0; }

/* Basis-Typo auf der Startseite */
.page-id-2235 .entry-content {
  font-family: var(--font-body);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}
.page-id-2235 .entry-content img { max-width: 100%; height: auto; display: block; }

/* ===== Hero =============================================================== */
.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--sd-navy-800);
  color: #fff;
  padding: 60px 24px 156px;
  text-align: center;
}
.home-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 38%;
  filter: brightness(0.42) saturate(1.05);
}
.home-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,27,46,0.35) 0%, rgba(10,27,46,0.55) 60%, rgba(15,39,66,0.92) 100%);
}
.home-hero-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.home-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sd-amber-500); margin-bottom: 16px;
}
.home-hero .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sd-amber-500); box-shadow: 0 0 0 4px rgba(238,129,39,0.2); }
.home-hero h1 {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06;
  letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance;
}
.home-hero .lede {
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 400; line-height: 1.55;
  color: rgba(255,255,255,0.86); margin: 0 auto; max-width: 60ch; text-wrap: pretty;
}
.home-trust { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.home-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-size: 13.5px; font-weight: 600;
  backdrop-filter: blur(4px);
}
.home-chip svg { color: var(--sd-amber-500); }
.home-chip .mono { font-family: var(--font-mono); font-weight: 500; }

/* ===== Produktfinder (Karte ueber den Hero gezogen) ====================== */
.home-finder { background: var(--bg-sunken); padding: 0 24px 84px; }
.home-finder-wrap {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto;
  transform: translateY(-112px);
  margin-bottom: -92px;
}
.home-finder-wrap iframe,
.home-finder-wrap #sd-finder {
  width: 100%;
  /* Kein grosses min-height: der Finder meldet seine echte Hoehe (postMessage),
     der Listener setzt sie per JS. Ein hohes min-height wuerde den iframe auf
     kuerzeren Folgeseiten NICHT schrumpfen lassen -> weisser Gap unten.
     Niedriger Sicherheitswert gegen Kollaps, bevor die erste Hoehe gemeldet ist. */
  min-height: 200px;
  border: 0;
  display: block;
  border-radius: var(--r-xl);
  /* Dunkel wie die Finder-Oberflaeche (navy-900): kein weisser Blitz vor der
     ersten Hoehenmeldung, und ein evtl. Rest-Pixel-Gap faellt nicht auf. */
  background: var(--sd-navy-900);
  box-shadow: var(--shadow-3);
}
.home-finder-foot { text-align: center; color: var(--fg-3); font-size: 14.5px; margin-top: 26px; }
.home-finder-foot a { color: var(--sd-navy-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.home-finder-foot a:hover { color: var(--sd-amber-600); }

/* ===== Sektionen ========================================================= */
.sd-section { max-width: 1280px; margin: 0 auto; padding: 80px 24px; }
.sd-section h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15;
  color: var(--fg-brand); margin: 0 0 8px;
  letter-spacing: -0.01em; text-wrap: balance;
}
.sd-section .section-eyebrow {
  font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-amber-600); margin: 0 0 10px;
}
.sd-section .section-lede { font-size: 18px; color: var(--fg-2); max-width: 64ch; margin: 0 0 32px; }
.sd-section--sunken { background: var(--bg-sunken); max-width: none; }
.sd-section--sunken > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
/* .sd-section h2 (Spezifitaet 0,1,1) ueberschreibt mit margin:0 die
   >*-Zentrierung (0,1,0) -> die h2-Box klebte links, der zentrierte Text
   sass sichtbar links von der Seitenmitte. Explizit nachziehen. */
.sd-section--sunken > h2 { margin-left: auto; margin-right: auto; }
.home-sec-center { text-align: center; }
.home-sec-center .section-eyebrow,
.home-sec-center .section-lede { margin-left: auto; margin-right: auto; }
.home-sec-center .section-lede { max-width: 60ch; }

/* About-Kopf */
.home-about-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.home-about-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); color: var(--fg-brand); margin: 0 0 12px; letter-spacing: -0.01em; }
.home-about-head .section-eyebrow { color: var(--sd-amber-600); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 10px; }
.home-about-head p { font-size: 18px; color: var(--fg-2); margin: 0; line-height: 1.6; }

/* ===== Feature-Reihe (Ueber uns) ========================================= */
.sd-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sd-feature { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.sd-feature .img { aspect-ratio: 4/3; background: var(--sd-navy-050) center/cover no-repeat; }
.sd-feature .body { padding: 20px 22px 24px; }
.sd-feature .eyebrow { font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-amber-600); margin-bottom: 6px; }
.sd-feature h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 0 0 6px; color: var(--fg-1); }
.sd-feature p { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.55; }

/* ===== Video ============================================================= */
.home-video {
  max-width: 900px; margin: 28px auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-2); background: var(--sd-navy-900);
}
.home-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== Warum (Why-Cards) ================================================= */
.sd-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sd-why-card {
  position: relative; overflow: hidden; border-radius: 16px;
  aspect-ratio: 3/4; color: #fff;
  background: var(--sd-navy-700) center/cover no-repeat;
  box-shadow: var(--shadow-2);
  display: flex; align-items: flex-end;
}
.sd-why-card::after { content:''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,27,46,0) 30%, rgba(10,27,46,.85) 100%); }
.sd-why-card .body { position: relative; z-index: 1; padding: 22px; }
.sd-why-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin: 0 0 6px; color: #fff; }
.sd-why-card p { font-size: 14px; line-height: 1.5; margin: 0; color: rgba(255,255,255,.85); }

/* ===== FAQ (native <details>) ============================================ */
.sd-faq { max-width: 880px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: var(--shadow-1); overflow: hidden; text-align: left; }
.sd-faq details { border-bottom: 1px solid var(--sd-line-soft); }
.sd-faq details:last-child { border-bottom: 0; }
.sd-faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--fg-1); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sd-faq summary::-webkit-details-marker { display: none; }
.sd-faq summary .ic { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--sd-navy-100); color: var(--sd-navy-700); display: inline-flex; align-items: center; justify-content: center; transition: transform 200ms var(--ease-out), background 200ms; }
.sd-faq details[open] summary .ic { transform: rotate(45deg); background: var(--sd-amber-100); color: var(--sd-amber-700); }
.sd-faq .body { padding: 0 24px 22px; color: var(--fg-2); line-height: 1.6; font-size: 14.5px; }
.sd-faq .body a { color: var(--sd-navy-600); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Buttons (eigene .btn im Markup) =================================== */
.sd-section .btn, .home-hero .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  height: 44px; padding: 0 20px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: background 120ms var(--ease-out), box-shadow 120ms var(--ease-out), color 120ms var(--ease-out);
}
.btn-primary { background: var(--sd-amber-600); color: #fff; border-color: rgba(0,0,0,.08); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--sd-amber-500); box-shadow: var(--shadow-2); color: #fff; }
.btn-secondary { background: transparent; color: var(--sd-navy-700); border-color: var(--sd-navy-700); }
.btn-secondary:hover { background: var(--sd-navy-100); }

/* ===== WooCommerce-Produkt-Grid als Karten (.sd-products-woo) =============
   Der [products]-Shortcode rendert .woocommerce ul.products li.product.
   Wir formen diese Standardausgabe in das Karten-Layout des Mocks (.sd-prod). */
.sd-products-woo .woocommerce,
.sd-products-woo.woocommerce { margin: 0; }
.sd-products-woo ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin: 0 !important; padding: 0 !important; list-style: none;
}
.sd-products-woo ul.products::before,
.sd-products-woo ul.products::after { content: none !important; display: none !important; }
/* Kartendesign (Foto, Ribbon, Eyebrow, Preis, Meta, CTA) kommt site-weit aus
   sdlink-base.css ("WOO-PRODUKTKARTEN") — hier nur noch Grid-Positionierung. */
.sd-products-woo ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important;
}

/* ===== Responsive ======================================================== */
@media (max-width: 1024px) {
  .sd-features { grid-template-columns: 1fr 1fr; }
  .sd-why { grid-template-columns: 1fr 1fr; }
  .sd-products-woo ul.products { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .home-hero { padding: 52px 20px 130px; }
  .home-finder-wrap { transform: translateY(-96px); margin-bottom: -76px; }
}
@media (max-width: 720px) {
  .sd-section { padding: 56px 20px; }
  .sd-features { grid-template-columns: 1fr; }
  .sd-why { grid-template-columns: 1fr; }
  .sd-products-woo ul.products { grid-template-columns: 1fr 1fr; }
  .home-finder-wrap iframe, .home-finder-wrap #sd-finder { border-radius: 14px; }
}
@media (max-width: 520px) {
  .home-finder-wrap { transform: translateY(-72px); margin-bottom: -56px; }
  .sd-products-woo ul.products { grid-template-columns: 1fr; }
}