/* peptide-polish.css — Sektions-System nach grundlagen.html-Vorbild:
   FULL-BLEED Sektionen + innerer Container, abwechselnd Weiss <-> kuehles
   Off-White, plus gruene Feature-Baender (Hero + CTA). Zuletzt geladen.
   Korrektur 13.06.2026: kein warmes Ivory/Sage mehr (las sich als Braun);
   Hintergruende jetzt full-bleed statt eingerueckter Panels. */

:root {
  --pep-white: #FFFFFF;
  --pep-offwhite: #F8F9F7;
  --pep-border: #E2E8E0;
  --pep-ink: #1A1A1A;
  --pep-muted: #5A5A5A;
  --pep-green: #2A6B44;
  --pep-green-d1: #234c36;
  --pep-green-d2: #16331f;
  --pep-gold: #C9A96E;
  --pep-sage: #EAF6EC;
  --pep-shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.06);
  --pep-shadow-md: 0 8px 24px rgba(26, 26, 26, 0.09);
}

body { background: var(--pep-offwhite); }

/* ============================================================
   1. FULL-BLEED Sektionen + innerer Container (grundlagen-Pattern)
   ============================================================ */
/* protokoll.css setzt main>section auf max-width:1100px; margin:auto.
   Hier auf volle Breite ueberschreiben und den Inhalt per .reveal zentrieren. */
main > section {
  max-width: none;
  margin: 0;
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--pep-white);
}
main > section:nth-of-type(even) {
  background: var(--pep-offwhite);
}
/* innerer Container = der vorhandene .reveal-Wrapper jeder Sektion */
main > section > .reveal {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* ============================================================
   2. Gruener Hero-Band (C) — full-bleed, eigener Container
   ============================================================ */
.peptide-hero {
  background: linear-gradient(160deg, var(--pep-green-d1), var(--pep-green-d2));
  color: #EAF3EC;
  padding: clamp(52px, 8vw, 96px) clamp(16px, 4vw, 48px);
}
.peptide-hero-inner { max-width: 1100px; margin: 0 auto; }
.peptide-hero-eyebrow {
  display: block;
  font-family: var(--font-main, 'Sora', sans-serif);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--pep-gold); margin: 0 0 14px;
}
.peptide-hero-title {
  font-family: var(--font-display, 'DM Serif Display', Georgia, serif);
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.07;
  letter-spacing: -0.015em; color: #fff; margin: 0 0 14px; max-width: 18ch;
}
.peptide-hero-intro {
  font-family: var(--font-main, 'Sora', sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.6;
  color: #A9C4B2; max-width: 58ch; margin: 0;
}
.peptide-hero-meta {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8FB39C;
}
.peptide-hero-meta span { position: relative; padding-left: 16px; }
.peptide-hero-meta span::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pep-gold);
  transform: translateY(-50%);
}
/* Gold-CTA im grünen Hero-Band → Funnel-LP */
.peptide-hero-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-family: var(--font-main, 'Sora', sans-serif);
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--pep-green-d2); background: var(--pep-gold);
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(201, 169, 110, 0.32);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.peptide-hero-cta:hover {
  transform: translateY(-2px); background: #D8BD87;
  box-shadow: 0 10px 28px rgba(201, 169, 110, 0.42);
}

/* Hero mit Bild-Spalte (overview: Reta-Vial + happy member) */
.peptide-hero--with-visual .peptide-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 320px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.peptide-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.peptide-hero-glow {
  position: absolute;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.32) 0%, rgba(201, 169, 110, 0) 70%);
}
.peptide-hero-vial {
  position: relative;
  width: auto;
  height: clamp(240px, 30vw, 360px);
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
}
.peptide-hero-person {
  position: absolute;
  left: -6px;
  bottom: 4px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.peptide-hero-person img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}
.peptide-hero-person figcaption {
  font-family: var(--font-main, 'Sora', sans-serif);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: #0F2E1D;
  background: var(--pep-gold);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .peptide-hero--with-visual .peptide-hero-inner { grid-template-columns: 1fr; }
  .peptide-hero-visual { margin-top: 24px; justify-content: flex-start; }
  .peptide-hero-vial { height: 220px; }
  .peptide-hero-person { left: auto; right: -6px; }
}

/* ============================================================
   3. Heading-Harmonisierung (links, DM-Serif, einheitlich)
   ============================================================ */
main h2 {
  font-family: var(--font-display, 'DM Serif Display', Georgia, serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18; letter-spacing: -0.01em;
  color: var(--pep-ink); text-align: left; margin: 0 0 16px;
}
/* Section-Headings vereinheitlichen — diverse portierte Sektionen brachten eigene
   (zentrierte/kleinere) Heading-Regeln mit. Auf den main-h2-Standard zwingen. */
.ernaehrung-header,
.hautprobleme-header,
.frauen-header { text-align: left; }
/* .edu-intro war auf max-width:720px + margin:auto zentriert → ganzen Block links/voll. */
.edu-intro { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
.ernaehrung-title,
.hautprobleme-header h2,
.frauen-header h2,
.edu-intro-headline {
  font-family: var(--font-display, 'DM Serif Display', Georgia, serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18; letter-spacing: -0.01em;
  color: var(--pep-ink); text-align: left; margin: 0 0 16px; max-width: none;
}
/* Subtitles unter diesen Headings ebenfalls linksbündig (kohärenter Block). */
.hautprobleme-subtitle,
.frauen-subtitle {
  text-align: left; margin-left: 0; margin-right: 0;
}
/* höhere Spezifität nötig: protokoll.css zentriert via .section-intro.edu-intro-constrained */
.section-intro.edu-intro-constrained {
  text-align: left; margin-left: 0; margin-right: 0;
}
.section-intro,
.daily-habits-subtitle,
.stack-timing-subtitle {
  font-family: var(--font-main, 'Sora', sans-serif);
  font-size: 1rem; line-height: 1.6; color: var(--pep-muted);
  max-width: 640px; margin: 0 0 32px; text-align: left;
}
.daily-habits-proto-label,
.stack-timing-proto-label,
.reta-calc .eyebrow {
  font-family: var(--font-main, 'Sora', sans-serif);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pep-green); display: block; margin: 0 0 12px;
}
.daily-habits-header,
.stack-timing-header {
  text-align: left; max-width: none; margin-left: 0; margin-right: 0;
}
/* Overview: quick-facts-section (Sektion 1) verhielt sich nicht wie die anderen
   Sektionen — ihr eigenes max-width:1100px (Klassen-Selektor) schlug den
   main>section Full-Bleed-Override und hatte kein margin:auto → der ganze Block
   klebte am linken Rand. Hier auf dasselbe Full-Bleed-Verhalten zwingen; der
   .reveal-Wrapper zentriert den Inhalt dann wie ueberall (Ueberschrift bleibt
   linksbuendig wie der Rest). */
.quick-facts-section {
  max-width: none; margin: 0;
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--pep-white);
}

/* ============================================================
   4. Karten (kuehl, weich) + Tabellen
   ============================================================ */
.protocol-card { border-radius: 14px; border-color: var(--pep-border); transition: box-shadow 0.2s, transform 0.2s; }
.protocol-card--dose,
.protocol-card--dose-target,
.stack-card { box-shadow: var(--pep-shadow-sm); border-radius: 14px; }
.stack-card:hover,
.protocol-card--dose:hover { box-shadow: var(--pep-shadow-md); transform: translateY(-2px); }

.dose-table th,
.stack-timing-table th {
  padding: 12px 14px; letter-spacing: 0.08em; color: var(--pep-green);
  border-bottom: 2px solid #DCE7E0;
}
.dose-table td,
.stack-timing-table td { padding: 13px 14px; vertical-align: middle; }
.dose-table tbody tr:nth-child(even) td { background: #FAFBFA; }
.dose-table td.risk-low  { color: #1E5434; font-weight: 500; }
.dose-table td.risk-mid  { color: #8A6400; font-weight: 500; }
.dose-table td.risk-high { color: #B23A3A; font-weight: 500; }
.dose-table tr.target-row td { background: var(--pep-sage); box-shadow: none; font-weight: inherit; }
.dose-table tr.target-row strong { font-weight: 600; }

/* ============================================================
   5. Gruenes CTA-Band (C) — community-block als zentrierte Karte
   ============================================================ */
.community-block {
  background: linear-gradient(160deg, var(--pep-green-d1), var(--pep-green-d2));
  border: none; border-radius: 22px;
  padding: clamp(28px, 4vw, 44px); margin: 36px auto; max-width: 1080px;
  box-shadow: 0 18px 44px rgba(22, 51, 31, 0.18);
}
.community-block-inner {
  display: flex; gap: 32px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.community-block-text { flex: 1 1 340px; }
.community-block-headline {
  font-family: var(--font-display, 'DM Serif Display', Georgia, serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.12; margin: 0 0 10px; color: #fff;
}
.community-block-body { color: #A9C4B2; margin: 0 0 20px; font-size: 1rem; }
.community-block .primary-cta { background: var(--pep-gold); color: #1c2b22; border: none; font-weight: 700; }
.community-block .primary-cta:hover { background: #d8b97e; }
.community-photo-grid { display: flex; gap: 16px; flex: 0 0 auto; align-items: center; }
.community-photo-item img {
  width: clamp(150px, 18vw, 200px);
  aspect-ratio: 3 / 4;      /* Hochformat-Rahmen (Quelle ist quadratisch) */
  object-fit: cover;        /* volle Höhe, nur Seiten minimal getrimmt */
  display: block;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
/* Foto-Versatz aus protokoll.css (40px) auf einen dezenten Treppen-Look reduzieren */
.community-photo-item:last-child { margin-top: 14px; }
@media (max-width: 560px) {
  .community-block-inner { flex-direction: column; gap: 18px; }
  .community-photo-grid { display: flex; width: 100%; justify-content: center; }
  .community-photo-item img { width: clamp(120px, 38vw, 150px); }
}

/* ============================================================
   6. Header durchgehend WEISS (Nav + SubNav als ein Block)
   ============================================================ */
.hero---navigation {
  margin-top: 0;
  background: var(--pep-white);
}
/* Header wie auf der Home spreizen (Logo links / Aktionen rechts) statt linksbündig. */
.hero---navigation .navigation { justify-content: space-between; align-items: center; }
.hero---navigation .nav-actions { margin-left: auto; }
.peptide-subnav {
  background: var(--pep-white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}