/* ==========================================================================
   DR.LECHNER Herzgesundheit - Komponenten-CSS
   Corporate Design: DR.LECHNER Grau (Pantone 423 C) als Hauptfarbe,
   Kardio-Violett (269 C) als Leitakzent, Omega-3/Mineral-Rot (206 C) sekundaer.
   Nutzt die in theme.json definierten Preset-Variablen.
   ========================================================================== */

:root {
  --dl-white: var(--wp--preset--color--white, #FFFFFF);
  --dl-paper: var(--wp--preset--color--paper, #FBFBFC);
  --dl-grey-light: var(--wp--preset--color--grey-light, #F2F3F3);
  --dl-line: var(--wp--preset--color--line, #DCDDDE);
  --dl-grey: var(--wp--preset--color--grey, #898D8D);
  --dl-grey-dark: var(--wp--preset--color--grey-dark, #3A3B3D);
  --dl-charcoal: var(--wp--preset--color--charcoal, #2C2D2F);
  --dl-violet: var(--wp--preset--color--kardio-violet, #512D6D);
  --dl-violet-deep: var(--wp--preset--color--kardio-violet-deep, #3C2151);
  --dl-violet-soft: var(--wp--preset--color--kardio-violet-soft, #6E4A8E);
  --dl-red: var(--wp--preset--color--omega-red, #CE0E2D);
  --dl-display: var(--wp--preset--font-family--fraunces, Georgia, serif);
  --dl-body: var(--wp--preset--font-family--inter, system-ui, sans-serif);
  --dl-mono: var(--wp--preset--font-family--mono, monospace);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Eyebrow / Label ---------- */
.dl-eyebrow {
  font-family: var(--dl-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dl-grey);
}

/* ---------- Abschnittsabstaende ---------- */
.dl-section { padding-top: 96px; padding-bottom: 96px; }

/* ---------- Header / Navigation ---------- */
.dl-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--dl-line);
}
.dl-header .wp-block-navigation { font-family: var(--dl-body); }
.dl-header .wp-block-navigation a { font-size: .9rem; font-weight: 500; color: var(--dl-grey-dark); }
.dl-header .wp-block-navigation a:hover { color: var(--dl-violet); }
.dl-header .wp-block-site-logo img { height: 40px; width: auto; }

/* ---------- Hero ---------- */
.dl-hero { background: linear-gradient(180deg, #fff 0%, var(--dl-paper) 55%, var(--dl-grey-light) 100%); }
.dl-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.5rem); letter-spacing: -.01em; color: var(--dl-grey-dark); }
.dl-hero h1 em { font-style: italic; color: var(--dl-violet); }
.dl-hero .dl-lead { font-size: 1.13rem; color: var(--dl-grey); max-width: 40ch; }

/* Logo-Motiv: zwei ueberlappende Rundquadrate hinter dem Produktbild */
.dl-hero__art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 380px; }
.dl-hero__art::before,
.dl-hero__art::after { content: ""; position: absolute; border-radius: 24px; }
.dl-hero__art::before {
  width: min(260px, 64%); aspect-ratio: 1;
  border: 2px solid var(--dl-grey); opacity: .5;
  transform: translate(-44px, -34px);
}
.dl-hero__art::after {
  width: min(260px, 64%); aspect-ratio: 1;
  background: linear-gradient(135deg, #fff 0%, var(--dl-grey-light) 100%);
  border: 1px solid var(--dl-line);
  transform: translate(40px, 30px);
}
.dl-hero__art img { position: relative; z-index: 1; width: min(310px, 76%); height: auto; filter: drop-shadow(0 24px 40px rgba(44, 45, 47, .18)); }

/* ---------- Pulslinie (EKG) - Rot = Herz-/Kreislauf-Akzent ---------- */
.dl-pulse { background: var(--dl-grey-light); line-height: 0; border-top: 1px solid var(--dl-line); border-bottom: 1px solid var(--dl-line); }
.dl-pulse svg { display: block; width: 100%; height: 60px; }
.dl-pulse .ecg {
  fill: none; stroke: var(--dl-red); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dl-draw 5s linear infinite;
}
@keyframes dl-draw { to { stroke-dashoffset: -1400; } }

/* ---------- Thesis (Violett) ---------- */
.dl-thesis { text-align: center; }
.dl-thesis p {
  font-family: var(--dl-display); font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.32;
  max-width: 24ch; margin-left: auto; margin-right: auto; font-weight: 400;
}
.dl-thesis strong { color: #d9c8ea; font-weight: 500; }

/* ---------- Wirkprofil (Ledger) ---------- */
.dl-ledger { border-top: 1px solid var(--dl-line); }
.dl-row { border-bottom: 1px solid var(--dl-line); padding-top: 26px; padding-bottom: 26px; align-items: baseline; }
.dl-row .dl-idx { font-family: var(--dl-mono); font-size: .8rem; color: var(--dl-grey); }
.dl-row .dl-nutrient { font-family: var(--dl-display); font-size: 1.3rem; color: var(--dl-violet); font-weight: 500; line-height: 1.25; }
.dl-row .dl-claim { font-size: 1.05rem; color: var(--dl-grey-dark); }
.dl-row .dl-hint { display: block; font-size: .82rem; color: var(--dl-grey); margin-top: 5px; font-family: var(--dl-mono); }
.dl-legal { font-size: .82rem; color: var(--dl-grey); }

/* ---------- Produktkarten ---------- */
.dl-pcard { background: #fff; border: 1px solid var(--dl-line); border-radius: 4px; transition: transform .2s, box-shadow .2s; }
.dl-pcard:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(44, 45, 47, .10); }
.dl-pcard img { width: 116px; height: 116px; object-fit: contain; }
.dl-pcard .dl-tag { font-family: var(--dl-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.dl-pcard h3 { font-size: 1.5rem; }
.dl-pcard p { font-size: .97rem; color: var(--dl-grey); }
.dl-pcard .dl-more { font-size: .86rem; font-weight: 600; }
/* Produktspezifische Akzente */
.dl-acc-violet .dl-tag, .dl-acc-violet h3, .dl-acc-violet .dl-more a { color: var(--dl-violet); }
.dl-acc-red .dl-tag, .dl-acc-red h3, .dl-acc-red .dl-more a { color: var(--dl-red); }

/* ---------- Sortiment-Kacheln ---------- */
.dl-tiles .wp-block-column { display: flex; }
.dl-tile { background: #fff; border: 1px solid var(--dl-line); border-radius: 4px; width: 100%; text-align: center; transition: transform .18s, border-color .2s; }
.dl-tile:hover { transform: translateY(-3px); border-color: var(--dl-violet-soft); }
.dl-tile img { height: 88px; width: auto; object-fit: contain; margin: 0 auto; }
.dl-tile .dl-tile__name { font-size: .82rem; font-weight: 600; }
.dl-tile .dl-tile__name a { color: var(--dl-grey-dark); }
.dl-tile:hover .dl-tile__name a { color: var(--dl-violet); }

/* ---------- Qualitaet (Anthrazit) ---------- */
.dl-quality h3 { color: #fff; font-size: 1.35rem; }
.dl-quality p { color: #c2c4c5; font-size: .96rem; }
.dl-quality .dl-eyebrow { color: #b9bbbc; }
.dl-quality .dl-qnum { font-family: var(--dl-mono); font-size: .78rem; color: var(--dl-violet-soft); letter-spacing: .18em; }

/* ---------- Apotheken-CTA (Violett) ---------- */
.dl-pharma { background: linear-gradient(135deg, var(--dl-violet) 0%, var(--dl-violet-deep) 100%); text-align: center; }
.dl-pharma .dl-eyebrow { color: #d9c8ea; }
.dl-pharma h2 { color: #fff; }
.dl-pharma p { color: #e6dcf0; max-width: 46ch; margin-left: auto; margin-right: auto; }
.dl-pharma .wp-block-button__link { background: #fff; color: var(--dl-violet); }
.dl-pharma .wp-block-button__link:hover { background: var(--dl-grey-light); color: var(--dl-violet-deep); }
.dl-pharma .dl-fk { font-size: .9rem; color: #e6dcf0; }
.dl-pharma .dl-fk a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ---------- Footer (Anthrazit) ---------- */
.dl-footer { background: var(--dl-charcoal); color: #cfd0d1; }
.dl-footer .wp-block-site-logo img { filter: brightness(0) invert(1); opacity: .92; height: 34px; width: auto; }
.dl-footer h4 { font-family: var(--dl-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #b9bbbc; font-weight: 500; }
.dl-footer p, .dl-footer a { font-size: .92rem; color: #cfd0d1; }
.dl-footer a:hover { color: #fff; }
.dl-footer .dl-disclaimer { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 24px; font-size: .78rem; color: #9a9c9d; line-height: 1.7; }
.dl-footer .dl-copy { font-size: .78rem; color: #898d8d; }

/* ---------- Scroll-Reveal ---------- */
.dl-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.dl-reveal.dl-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
  .dl-section { padding-top: 64px; padding-bottom: 64px; }
  .dl-hero__art { order: -1; min-height: 300px; }
  .dl-hero__art img { width: 210px; }
  .dl-hero__art::before { transform: translate(-30px, -24px); }
  .dl-hero__art::after { transform: translate(28px, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .dl-reveal { transition: none; opacity: 1; transform: none; }
  .dl-pulse .ecg { animation: none; stroke-dashoffset: 0; }
}