/* ============================================================
   HONEYKEEPER BRAND LAYER · v1.0
   Typografie-Schicht für die Landingpage (imkereipeters.de)
   Wird NACH dem Inline-Style in index.php geladen und ersetzt
   nur Schriften & Feinheiten – kein Layout wird verändert.

   Markenschriften (siehe Honeykeeper Brand-Kit):
   - Fraunces 900 ............ Display / Überschriften
   - Yellowtail .............. Claim / Akzente ("Honig aus eigener Imkerei")
   - Jost .................... Fließtext / UI
   ============================================================ */

body {
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Überschriften: Fraunces 900 ---------- */
h1, h2, h3,
.hero h1,
.quick-card strong,
.floating-note strong,
.benefit h3,
.invoice-title {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-optical-sizing: auto;
}

.hero h1 { letter-spacing: -.04em; }
h2       { letter-spacing: -.03em; }

/* ---------- Script-Akzente: Yellowtail ---------- */
.brand em,
.hero h1 span {
  font-family: "Yellowtail", Georgia, cursive;
  font-style: normal;       /* Yellowtail ist bereits kursiv gezeichnet */
  font-weight: 400;
  letter-spacing: 0;
}

.brand em { font-size: 40px; line-height: 1; }

/* Claim unter dem Markennamen */
.brand small {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ---------- UI-Feinschliff ---------- */
.kicker {
  font-family: "Jost", sans-serif;
  font-weight: 700;
  letter-spacing: .14em;
}

.btn {
  font-family: "Jost", sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
}

.nav-links { font-weight: 600; }

/* Fließtexte etwas ruhiger */
.lead,
.panel p, .section-title p, .benefit p,
.automat-box p, .github-section p, .contact-box p {
  font-weight: 400;
}

/* Gold-Fokusring für Tastaturbedienung (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--gold, #ffbf00);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bee { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 620px) {
  .brand em { font-size: 32px; }
}