/* ==========================================================
   Fiore Felice — Pflegehinweise (eigenständiges Stylesheet)
   ========================================================== */

:root {
  --gold-1: #C39955;
  --gold-2: #D9BD74;
  --petrol: #3B7E96;
  --ink: #2B2620;
  --ink-soft: #6b6459;
  --paper: #FBF8F3;
  --paper-2: #F3ECE0;
  --line: rgba(43, 38, 32, 0.1);

  --serif: 'Cormorant Garamond', serif;
  --sans: 'Jost', sans-serif;
}

* { box-sizing: border-box; }

/* Container für den gemeinsamen Gold-Verlauf der Logo-Blume — unsichtbar,
   muss aber im Dokument bleiben, damit url(#ffGold) auflösbar ist. */
.ff-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Die Logo-Tulpe erscheint hier in sehr unterschiedlichen Größen. Damit die
   Linien überall gleich fein wirken, skaliert die Strichstärke nicht mit. */
.ff-tulip path { vector-effect: non-scaling-stroke; }
.illustration .ff-tulip path { stroke-width: 2.2px; }
.step-illu .ff-tulip path { stroke-width: 1.6px; }
.variety-illu .ff-tulip path { stroke-width: 1.6px; }
.footer-mark path { stroke-width: 1.4px; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; color: var(--ink); }

.hidden { display: none !important; }

/* ---------- Zurück-Link ---------- */
.back-link {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  background: rgba(251, 248, 243, 0.9);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: background 0.3s ease, transform 0.3s ease;
}
.back-link:hover { background: #fff; transform: translateX(-2px); }
.back-link svg { width: 16px; height: 16px; }

/* ---------- Sprachumschalter ---------- */
.lang-switch {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 40;
  display: flex;
  gap: 4px;
  background: rgba(251, 248, 243, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.lang-switch button {
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.lang-switch button.active {
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #fff;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 80px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--gold-1);
  margin: 0 0 28px;
}
.illustration svg { width: 190px; height: auto; }
.illustration.hidden { display: none; }

.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.1;
  margin: 30px 0 16px;
  max-width: 14ch;
}
.hero .subtitle {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.hero .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-1);
  margin: 0 0 40px;
}
.scroll-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-hint svg { stroke: var(--gold-1); }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* ---------- Tabs ---------- */
.tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 18px 0;
  background: rgba(251, 248, 243, 0.95);
  border-bottom: 1px solid var(--line);
}
.tab {
  border: 1px solid var(--gold-1);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--gold-1);
  padding: 10px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.tab.active { background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: #fff; border-color: transparent; }

.tab-panel.hidden { display: none; }

/* ---------- Sections ---------- */
.section { max-width: 1000px; margin: 0 auto; padding: 90px clamp(20px, 5vw, 40px); }
.section h2 {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 56px;
}

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.step {
  display: flex;
  align-items: center;
  gap: 30px;
}
.step:nth-child(even) { flex-direction: row-reverse; text-align: right; }
.step-illu { flex-shrink: 0; }
.step-illu svg { width: 120px; height: auto; }
.step-text h3 { font-size: 1.5rem; margin-bottom: 8px; }
.step-text p { color: var(--ink-soft); margin: 0; font-size: 1.02rem; }

/* ---------- Varieties ---------- */
.varieties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.variety {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 26px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.variety:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(43,38,32,0.08); }
.variety-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.variety-illu svg { height: 54px; width: auto; }
.variety-title { font-size: 1.35rem; }
.variety-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.variety-tips li { display: flex; align-items: center; gap: 12px; font-size: 0.96rem; color: var(--ink-soft); }
.tip-ic { flex-shrink: 0; display: flex; }
.tip-ic svg { width: 22px; height: 22px; }

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 70px 20px 60px;
  background: var(--paper-2);
}
.footer-mark { height: 66px; width: auto; display: block; margin: 0 auto 18px; }
.slogan {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold-1);
  margin: 0;
}

/* ---------- Animationen ----------
   Nur aktiv, wenn JavaScript läuft (.js auf <html>). Ohne JS bleibt alles
   sichtbar (Progressive Enhancement) — identisches Bild auf jedem Server. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

.js .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease; }
.js .hero .draw { transition-delay: .2s; }
.js body.loaded .hero .draw, .js .reveal.is-visible .draw { stroke-dashoffset: 0; }

.js .water { transform: scaleY(0); transform-origin: bottom; transition: transform 1s ease 1s; }
.js body.loaded .water { transform: scaleY(1); }

.varieties .variety:nth-child(1) { transition-delay: 0s; }
.varieties .variety:nth-child(2) { transition-delay: .12s; }
.varieties .variety:nth-child(3) { transition-delay: .24s; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .varieties { grid-template-columns: 1fr; }
  .step, .step:nth-child(even) { flex-direction: column; text-align: center; }
}

/* Bewegungsarme Darstellung respektiert die Systemeinstellung. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .partner-logo, .js .hero .eyebrow, .js .hero h1,
  .js .hero .subtitle, .js .hero .btn-gold, .js .hero .btn-petrol,
  .js .hero .scroll-hint, .js .contact-row, .js .person { opacity: 1 !important; }
  .js .reveal, .js .partner-logo, .js .contact-row, .js .person { transform: none !important; }
  .js .draw { stroke-dashoffset: 0 !important; }
  .js .water { transform: scaleY(1) !important; }
}

:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 5px; }
.lang-switch button, .tab { min-height: 44px; }