/* =========================================================
   Luzula – Pohlers & Nickel GbR
   Design-System (eine Datei, keine externen Ressourcen)
   Farbwelt aus dem Logo: Olivgrün + frisches Blattgrün,
   warmes Weiß, erdige Neutraltöne.
   ========================================================= */

:root {
  /* Grüntöne aus der Wortmarke / Pflanze */
  --green-900: #3b4a1f;
  --green-800: #47591f;
  --green-700: #556b2f;   /* Wortmarke */
  --green-600: #6b8e23;   /* Akzent (Blattgrün) */
  --green-500: #7ea23f;
  --green-050: #f1f4e8;

  /* Neutrale, warme Töne */
  --ink:       #23261d;
  --ink-soft:  #4a4d42;
  --muted:     #6d7164;
  --line:      #e5e6dd;
  --bg:        #ffffff;
  --bg-soft:   #f8f9f3;
  --bg-warm:   #f3f5ea;
  --white:     #ffffff;

  --accent:    var(--green-600);
  --accent-ink:var(--green-800);

  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px rgba(35,38,29,.04), 0 8px 30px rgba(35,38,29,.06);
  --shadow-sm: 0 1px 2px rgba(35,38,29,.05);

  --maxw:      1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  --step-hero: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
  --step-h2:   clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --step-h3:   1.2rem;
  --step-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.15; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--step-hero); margin: 0 0 .5em; }
h2 { font-size: var(--step-h2); margin: 0 0 .6em; }
h3 { font-size: var(--step-h3); margin: 0 0 .4em; }
p  { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--green-800); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 8px 0; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Layout-Hilfen ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; }
.section--soft { background: var(--bg-soft); }
.eyebrow {
  display: inline-block;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9rem;
}
.lead { font-size: var(--step-lead); color: var(--ink-soft); max-width: 60ch; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-weight: 600; line-height: 1;
  padding: .85rem 1.4rem; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--green-700); color: #fff; }
.btn-primary:hover { background: var(--green-800); }
.btn-ghost { background: transparent; color: var(--accent-ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--green-500); background: var(--green-050); }
.btn-group { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand:hover { text-decoration: none; }
.brand__logo { height: 34px; width: auto; display: block; }
.site-footer .brand__logo { height: 30px; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: var(--ink-soft); font-weight: 500; font-size: .98rem; }
.nav a:hover { color: var(--green-800); text-decoration: none; }
.nav .btn { padding: .6rem 1.1rem; }
.nav-toggle { display: none; }

/* ---------- Hero (Foto + Grünverlauf) ---------- */
.hero { position: relative; isolation: isolate; color: #fff; background: #2b3317; overflow: hidden; }
/* Bildausschnitt: 33% 100% haelt das Massband (Mitte bei 33% der Bildbreite,
   reicht bis zur Bildunterkante) an der Unterkante des Hero sichtbar -
   auf schmalen Displays waagerecht, auf breiten senkrecht beschnitten.
   transform-origin unten, damit scale(1.02) das Massband nicht abschneidet. */
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("hero.jpg") 33% 100% / cover no-repeat;
  transform-origin: 50% 100%;
  transform: scale(1.02);
}
/* Parallax: Klasse setzt das Skript nur, wenn der Effekt wirklich laufen soll.
   Der Überstand nach oben (top: -20%) gibt dem Bild Platz zum Mitwandern;
   --hero-shift wird beim Scrollen gesetzt und darf 18% der Hero-Höhe nicht übersteigen. */
.hero--parallax .hero__bg {
  top: -20%;
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.02);
  will-change: transform;
}
/* Unten nur maessig abdunkeln, sonst verschwindet das Massband im Schatten. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(28,35,15,.62) 0%,
    rgba(28,35,15,.48) 42%,
    rgba(24,31,12,.58) 100%);
}
.hero .container {
  min-height: min(76vh, 620px);
  display: flex; align-items: center;
  padding-top: clamp(4rem, 3rem + 5vw, 7rem);
  padding-bottom: clamp(4rem, 3rem + 5vw, 7rem);
}
.hero__inner { max-width: 42rem; }
.hero .eyebrow { color: #cfe09f; }
.hero h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.hero .lead { color: rgba(255,255,255,.93); margin-bottom: 1.8rem; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * { animation: heroRise .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero__inner > *:nth-child(2) { animation-delay: .06s; }
  .hero__inner > *:nth-child(3) { animation-delay: .12s; }
  .hero__inner > *:nth-child(4) { animation-delay: .18s; }
}
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Features / Karten ---------- */
.grid { display: grid; gap: 1.2rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d9dcc9; }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--green-050); color: var(--green-800);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .3rem; }
.card p { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* ---------- Anwendungsfälle (Chips) ---------- */
.usecases { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.8rem; }
.chip {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: .55rem 1.1rem;
  font-size: .95rem; color: var(--ink-soft); font-weight: 500;
  box-shadow: var(--shadow-sm);
}

/* ---------- Über / Split ----------
   Kartenspalte breiter (1.1fr) als die Textspalte, damit der große
   Spaltenabstand den Platz aus der Textspalte nimmt und die Karte/das Logo
   NICHT schrumpft. Abstand-Untergrenze bewusst hoch (4rem), damit er auch
   auf schmaleren Fenstern deutlich sichtbar ist. */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(4rem, 2rem + 4vw, 7rem); align-items: center; }
.brand-card {
  border-radius: var(--radius);
  background:
    radial-gradient(120% 120% at 80% 15%, #ffffff 0%, var(--bg-warm) 70%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.brand-card img { max-width: 78%; height: auto; }
.stat-row { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.4rem; }
.stat b { display: block; font-size: 1.7rem; color: var(--green-700); line-height: 1.1; }
.stat span { color: var(--muted); font-size: .9rem; }

/* ---------- Animiertes Logo (Schaukasten „Über uns") ----------
   Drei Ebenen auf einer 3:2-Flaeche: die Basis (Schriftzug + Gras, weißer
   Hintergrund) und zwei transparente Blütenstiele, die sich bei Mausbewegung
   sanft neigen. Der Drehpunkt sitzt tief im Stiel, daher wiegen sich nur die
   oberen Bluetenteile. Die Karte ist hier weiß, damit die weiße Basis
   nahtlos aufsetzt (kein sichtbares Rechteck auf dem Kartenverlauf). */
.brand-card--anim {
  aspect-ratio: 3 / 2;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.logo-anim {
  --left-angle: 0deg;
  --right-angle: 0deg;
  position: relative;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.logo-anim img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.logo-anim .stem-left,
.logo-anim .stem-right {
  will-change: transform;
  transform-box: fill-box;
}
/* Drehpunkte im unteren, ruhigen Stielbereich (aus der Vorlage übernommen).
   EINE weiche Geschwindigkeit für alles – Folgen, Reinfahren, Rausfahren.
   Kein Moduswechsel zwischen „flott folgen" und „sanft gleiten", daher kann
   beim Rein-/Rausfahren nichts ruckartig nachgezogen werden. */
.logo-anim .stem-left {
  transform-origin: 66.2% 45.0%;
  transform: rotate(var(--left-angle));
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
}
.logo-anim .stem-right {
  transform-origin: 70.3% 45.4%;
  transform: rotate(var(--right-angle));
  transition: transform 490ms cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .logo-anim .stem-left,
  .logo-anim .stem-right { transform: none !important; transition: none !important; }
}

/* ---------- Kontakt ---------- */
.contact-card {
  background: var(--green-800);
  color: #eef2e2;
  border-radius: var(--radius);
  padding: clamp(2rem, 1rem + 3vw, 3.2rem);
  box-shadow: var(--shadow);
}
.contact-card h2 { color: #fff; }
.contact-card a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.contact-list li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-list svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .2rem; opacity: .85; }
.contact-list .label { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 2.5rem 0; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-nav a { color: var(--muted); font-size: .95rem; }
.copyright { color: var(--muted); font-size: .9rem; width: 100%; }

/* ---------- Rechtstext-Seiten ---------- */
.legal { max-width: 760px; }
.legal h1 { margin-bottom: .2em; }
.legal .updated { color: var(--muted); font-size: .9rem; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.35rem; margin-top: 2.4rem; }
.legal h3 { font-size: 1.08rem; margin-top: 1.6rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.2rem; }
.legal .back { display: inline-block; margin-bottom: 2rem; font-weight: 600; }
.legal .placeholder {
  background: #fff8e1; border: 1px dashed #e0c65a; color: #6b5a12;
  padding: .1rem .4rem; border-radius: 5px; font-size: .92em; font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 24px; }
  .nav .btn { margin: .5rem 24px; justify-content: center; }
  .nav-toggle {
    display: inline-grid; place-items: center; width: 42px; height: 42px;
    background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  }
  .nav-toggle svg { width: 22px; height: 22px; color: var(--ink); }
}
@media (max-width: 520px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}