/* =========================================================================
   Nature You — Brand-Website
   Leichtgewichtig, mobile-first, keine externen Requests (DSGVO-sicher).
   Akzentfarbe: Grün (echte Markenfarbe). Kraftbraun als warmer Neutralton.
   Radius-System: Buttons = pill (999px) · Container/Bilder = 14px.

   Farbregel: Flächentöne und Schrifttöne sind getrennte Tokens.
   --kraft ist ein Flächenton und für Text zu hell (3,1:1). Für Schrift
   gilt --kraft-text. Alle Textfarben sind gegen ihren Grund auf
   WCAG AA (4,5:1) geprüft, in beiden Modi.
   ========================================================================= */

/* ---- Display-Schrift ----
   Familjen Grotesk 700, SIL Open Font License 1.1 (Lizenztext:
   assets/familjen-grotesk-OFL.txt). Selbst gehostet, nur Latin-Subset
   inkl. Umlauten und ß, 12 KB. Kein Google-Fonts-Request, damit die
   Seite ohne Einwilligung DSGVO-konform bleibt.
   Nur für Überschriften und Wortmarke, Fließtext bleibt system-ui. */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/familjen-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design Tokens: Light (Standard) ---- */
:root {
  --paper:       #F3F3EC;   /* Off-White, minimal kühler als der Creme-Standard */
  --surface:     #FCFBF7;   /* Karten / erhöhte Flächen */
  --ink:         #23271F;   /* warmes Fast-Schwarz (Text) — 13,6:1 auf Papier */
  --ink-soft:    #575C4D;   /* gedämpfter Fließtext — 6,2:1 */
  --ink-faint:   #676B5D;   /* Metadaten, Labels — 4,9:1 (vorher 3,1:1) */
  --accent:      #35674D;   /* Marken-Grün (Akzent, CTA) — 5,9:1 */
  --accent-strong:#2A5340;  /* Hover */
  --on-accent:   #FFFFFF;   /* Text auf Grün — 6,6:1 */
  --kraft:       #9C7A52;   /* Kraftbraun: nur Flächen, Ränder, Grafik */
  --kraft-text:  #7A5C36;   /* Kraftbraun für Schrift — 5,1:1 bis 5,9:1 */
  --kraft-band:  #EDE4D5;   /* kraftgetönte Fläche */
  --line:        rgba(35,39,31,0.12);
  --line-soft:   rgba(35,39,31,0.07);
  --shadow:      0 18px 40px -24px rgba(35,39,31,0.45);
  --shadow-sm:   0 6px 18px -12px rgba(35,39,31,0.40);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Familjen Grotesk", var(--font);
  --wrap: 1120px;
  --pad-x: clamp(1.25rem, 5vw, 2.5rem);
  --sec-y: clamp(3.5rem, 8vw, 6.5rem);
  --r-card: 14px;
  --header-h: 64px;

  /* Typo-Skala: eine Leiter, keine Einzelfallwerte */
  --t-display: clamp(2.3rem, 7vw, 4rem);      /* H1 */
  --t-slogan:  clamp(2.4rem, 9vw, 4.25rem);   /* Grün-Block */
  --t-h2:      clamp(1.7rem, 4vw, 2.4rem);
  --t-h3:      1.2rem;
  --t-lead:    1.075rem;
  --t-body:    1rem;
  --t-small:   .95rem;
  --t-meta:    .85rem;
  --t-label:   .75rem;

  /* Naturgefühl-Block: fester tiefer Grünton in beiden Modi (bewusster Farb-Block) */
  --mood-bg: #2E5E45;
  --mood-fg: #F3F6F1;
}

/* ---- Reset / Basis ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;               /* Seite ist bewusst immer hell (Markenbild) */
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Sauberes Tap-Verhalten auf dem Handy (Haupt-Traffic) */
a, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Ausgewogene Zeilenumbrüche in Überschriften */
h1, h2, h3 { text-wrap: balance; }
.lead, .section-head p { text-wrap: pretty; }
img { max-width: 100%; display: block; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  margin: 0; line-height: 1.08; letter-spacing: -0.02em; font-weight: 700;
  font-family: var(--font-display);
}
p { margin: 0; }

/* Sprungmarken dürfen nicht unter dem festen Header landen */
section[id], main[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Sichtbarer Fokus (a11y) */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Nur für Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip-Link */
.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: .7rem 1rem; border-radius: 0 0 10px 0; z-index: 200;
}
.skip:focus { left: 0; }

/* ---- Layout-Helfer ---- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
.lead { color: var(--ink-soft); font-size: var(--t-lead); max-width: 54ch; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: var(--t-body);
  min-height: 48px;                       /* Touch-Ziel */
  padding: .75rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.btn--amazon { background: var(--accent); color: var(--on-accent); }
.btn--amazon:hover { background: var(--accent-strong); }
.btn--amazon:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { min-height: 44px; padding: .55rem 1.1rem; font-size: .92rem; }
.btn--block { width: 100%; }
.btn .ext { font-size: .9em; opacity: .9; }

/* ---- Header (sticky; über dem Hero-Bild transparent) ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
/* Über dem Bild: helle Schrift */
.site-header .wordmark { color: #FFFFFF; }
.site-header .wordmark b { color: #A9D6BC; }
/* Ab dem Scrollen: fester Hintergrund, normale Markenfarben */
.site-header.is-stuck {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--line-soft);
}
.site-header.is-stuck .wordmark { color: var(--ink); }
.site-header.is-stuck .wordmark b { color: var(--accent); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: .12em;
  min-height: 44px;                       /* Touch-Ziel */
}
.wordmark b { color: var(--accent); font-weight: 700; }

/* ---- Hero (formatfüllendes Naturbild + dunkler Verlauf) ---- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 78dvh;
  display: flex;
  align-items: flex-end;
  /* Hero reicht unter den transparenten Header */
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(3rem, 10vw, 6rem));
  padding-bottom: clamp(3rem, 10vw, 6rem);
  /* Fallback-Grün, falls das Bild noch fehlt */
  background: #1E3A2B;
  background-image: image-set(
    url("assets/hero-natur.webp") type("image/webp"),
    url("assets/hero-natur.jpg")  type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
}
/* Verlauf für Lesbarkeit: unten dunkel, oben leicht abgedunkelt */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Kopfbereich abdunkeln, damit Logo und Header-Button sitzen */
    linear-gradient(to bottom, rgba(12,22,16,.62) 0%, rgba(12,22,16,.28) 120px, rgba(12,22,16,0) 260px),
    /* Hauptverlauf für Überschrift und Buttons */
    linear-gradient(to top, rgba(12,22,16,.93) 0%, rgba(12,22,16,.78) 40%, rgba(12,22,16,.52) 72%, rgba(12,22,16,.42) 100%);
}
.hero .wrap { width: 100%; }
.hero h1 {
  font-size: var(--t-display);
  letter-spacing: -0.03em;      /* große Grade brauchen engeren Satz */
  max-width: 16ch;
  color: #FFFFFF;
}
.hero h1 em { color: #A9D6BC; font-style: normal; }
.hero .lead { margin-top: 1.1rem; color: rgba(255,255,255,.92); max-width: 46ch; }
.hero-cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; }
/* Buttons auf dem Foto: heller Haupt-Button für maximalen Kontrast (12,4:1) */
.hero .btn--amazon { background: #FFFFFF; color: #1E3A2B; }
.hero .btn--amazon:hover { background: #E8F0E9; }
.hero .btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.hero .btn--ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,.10); }

/* ---- Abschnitts-Kopf ---- */
.section { padding-block: var(--sec-y); }
.section--band { background: var(--kraft-band); }
.section-head { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head h2 { font-size: var(--t-h2); letter-spacing: -0.025em; }
.section-head p { margin-top: .9rem; color: var(--ink-soft); }

/* ---- Produkt-Raster ---- */
.grid-products {
  display: grid; gap: clamp(1rem, 2.5vw, 1.6rem);
  grid-template-columns: 1fr;
}
.card {
  position: relative;                     /* Anker für den flächigen Kartenlink */
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
/* Die Karte hebt beim Hover an — also muss sie auch ganzflächig klickbar sein.
   Ein einziger Link, über ::after auf die Karte gezogen: kein verschachteltes <a>. */
.btn--stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.card-media { aspect-ratio: 1 / 1; background: #fff; }
.card-media picture { height: 100%; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card-tag {
  align-self: flex-start; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  /* Der 7-%-Schleier hellt die Pille im Dunkelmodus auf. Mit --ink-faint
     fiel der Text dort auf 3,8:1, mit --ink-soft sind es 6,8:1. */
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  padding: .28rem .65rem; border-radius: 999px; margin-bottom: .7rem;
}
/* Zwei-Fasern-Farbcodierung (Signatur: die zweite Farbe trägt Information) */
.f-bambus { color: var(--accent); }
.f-baumwolle { color: var(--kraft-text); }
.card-body h3 { font-size: var(--t-h3); }
.card-body .desc { margin-top: .45rem; color: var(--ink-soft); font-size: var(--t-small); }
.card-body .price {
  margin-top: .7rem; font-size: .9rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.card-body .btn { margin-top: 1.1rem; }

/* Hinweis unter den Kaufbuttons */
.buy-note {
  margin-top: 1.5rem; text-align: center;
  font-size: var(--t-meta); color: var(--ink-faint);
}
.cta-band .buy-note { margin-top: 1rem; }

/* ---- Finaler CTA-Streifen ---- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); letter-spacing: -0.025em; max-width: 18ch; margin-inline: auto; }
.cta-band p { margin-top: .9rem; color: var(--ink-soft); }
.cta-band .btn { margin-top: 1.6rem; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
/* Spaltentitel sind Labels, keine Überschriften im typografischen Sinn */
.footer-col h3 {
  font-family: var(--font);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .5rem; font-weight: 600;
}
.footer-col p { color: var(--ink-soft); font-size: var(--t-small); }
/* Touch-Ziel: Footer-Links waren 30px hoch */
.footer-col a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--ink-soft); font-size: var(--t-small);
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
  font-size: var(--t-meta); color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between;
}
.footer-bottom a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---- Mobile Sticky CTA (nur < 768px) ---- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: .7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  display: none;
}
.mobile-cta .btn { width: 100%; }

/* ---- Sanftes Reveal (nur wenn Motion erlaubt) ---- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn { transition: none; }
}

/* =========================================================================
   Fasern-Vergleich · Verpackung · Naturgefühl
   ========================================================================= */

.compare { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.compare-panel {
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.compare-panel.is-bambus    { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.compare-panel.is-baumwolle { background: color-mix(in srgb, var(--kraft) 14%, var(--surface)); }
.compare-fiber { font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.compare-panel.is-bambus    .compare-fiber { color: var(--accent); }
.compare-panel.is-baumwolle .compare-fiber { color: var(--kraft-text); }
.compare-panel h3 { font-size: 1.35rem; margin-top: .45rem; }
.compare-panel > p { margin-top: .6rem; color: var(--ink-soft); }
.compare-good { margin-top: 1.1rem; font-size: var(--t-small); color: var(--ink); font-weight: 600; }

/* ---- Verpackungs-Notiz (echtes Kraftbox-Foto) ---- */
.pack-note {
  margin-top: 1rem; display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center;
  background: var(--kraft-band); border-radius: var(--r-card); padding: 1.15rem;
}
.pack-note img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover; object-position: center;
  border-radius: 10px;
}
.pack-note h3 { font-size: 1.1rem; }
.pack-note p { margin-top: .35rem; color: var(--ink-soft); font-size: var(--t-small); }

/* ---- Naturgefühl-Block (bewusster tiefgrüner Farb-Block, ein Mal pro Seite) ---- */
.mood { background: var(--mood-bg); color: var(--mood-fg); text-align: center; }
.mood .wrap { padding-block: clamp(3.5rem, 9vw, 6rem); }
.mood .slogan-big { font-family: var(--font-display); font-size: var(--t-slogan); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.mood p { margin-top: 1.1rem; max-width: 44ch; margin-inline: auto; font-size: var(--t-lead); color: color-mix(in srgb, var(--mood-fg) 88%, transparent); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 767px) {
  .mobile-cta { display: block; }
  /* Platz schaffen, damit Sticky-Bar den Footer nicht verdeckt */
  body { padding-bottom: 5rem; }
}

@media (min-width: 640px) {
  .grid-products { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .pack-note { grid-template-columns: clamp(300px, 34vw, 460px) 1fr; gap: 2rem; padding: 1.6rem; }
  .pack-note h3 { font-size: 1.6rem; }
  .pack-note p { font-size: var(--t-lead); max-width: 46ch; }
}

@media (min-width: 900px) {
  .grid-products { grid-template-columns: repeat(3, 1fr); }
  /* Sobald die Social-Spalte zurückkommt: eine weitere 1fr ergänzen */
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}