/* ============================================================
   FALLUCCA · ELEGANTE — Style-Datei (Variante B)
   Pizzeria & Imbiss · Modern & Hochwertig
   ------------------------------------------------------------
   Einbinden:
     <link rel="stylesheet" href="fallucca-elegante.css">
   Schriften werden per @import unten geladen (Google Fonts).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Marken-Farben (edel, dunkel) */
  --fa-notte:        #16130F;  /* Haupt-Hintergrund (dunkel) */
  --fa-carbone:      #2A2520;  /* Karten / Flächen auf dunkel */
  --fa-bordeaux:     #7A1F2B;  /* Akzent / Streifen */
  --fa-bordeaux-d:   #631823;  /* dunkler (Hover) */
  --fa-gold:         #C7A14A;  /* Primär-Akzent / CTA */
  --fa-gold-d:       #B08C38;  /* dunkler (Hover) */
  --fa-salbei:       #97A07A;  /* sekundärer Akzent */

  /* Text & Linien */
  --fa-avorio:       #ECE3D2;  /* heller Text / helle Flächen */
  --fa-testo:        #b9b0a0;  /* Fließtext auf dunkel */
  --fa-grigio:       #9a9180;  /* sekundärer Text */
  --fa-linea:        #2e2820;  /* Trennlinien auf dunkel */

  /* Typografie */
  --fa-font-display: 'Cormorant Garamond', Georgia, serif;
  --fa-font-text:    'Hanken Grotesk', system-ui, sans-serif;

  --fa-fs-hero:   44px;
  --fa-fs-h1:     34px;
  --fa-fs-h2:     24px;
  --fa-fs-h3:     20px;
  --fa-fs-body:   14px;
  --fa-fs-small:  12px;
  --fa-fs-eyebrow:10px;

  /* Form & Raum */
  --fa-radius-sm: 2px;
  --fa-radius:    4px;
  --fa-radius-lg: 6px;
  --fa-gap:       26px;
  --fa-shadow:    0 2px 10px rgba(0,0,0,.30);
  --fa-shadow-lg: 0 10px 30px rgba(0,0,0,.45);
}

/* ---------- 2. Basis ---------- */
.fa, .fa * { box-sizing: border-box; }
.fa {
  font-family: var(--fa-font-text);
  color: var(--fa-avorio);
  background: var(--fa-notte);
  font-size: var(--fa-fs-body);
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* ---------- 3. Typografie ---------- */
.fa-display { font-family: var(--fa-font-display); font-weight: 600; line-height: 1.0; color: var(--fa-avorio); }
.fa-hero    { font-family: var(--fa-font-display); font-weight: 600; font-size: var(--fa-fs-hero); line-height: 1.02; margin: 0 0 18px; }
.fa-h1      { font-family: var(--fa-font-display); font-weight: 600; font-size: var(--fa-fs-h1); line-height: 1.05; margin: 0 0 12px; }
.fa-h2      { font-family: var(--fa-font-display); font-weight: 600; font-size: var(--fa-fs-h2); line-height: 1.1; margin: 0 0 10px; }
.fa-h3      { font-family: var(--fa-font-display); font-weight: 600; font-size: var(--fa-fs-h3); line-height: 1.15; margin: 0; }
.fa-eyebrow {
  font-size: var(--fa-fs-eyebrow);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fa-gold);
}
.fa-lead    { font-size: var(--fa-fs-body); color: var(--fa-testo); }
.fa-muted   { color: var(--fa-grigio); }
.fa-price   { font-weight: 700; color: var(--fa-gold); }

/* ---------- 4. Logo-Lockup ---------- */
.fa-logo { display: flex; align-items: center; gap: 16px; }
.fa-logo__mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--fa-gold);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.fa-logo__mark .fa-logo__f { font-family: var(--fa-font-display); font-weight: 600; color: var(--fa-gold); font-size: 26px; line-height: 1; }
.fa-logo__name { font-family: var(--fa-font-display); font-weight: 600; font-size: var(--fa-fs-h2); color: var(--fa-avorio); letter-spacing: 0.03em; }
.fa-logo__sub { font-size: var(--fa-fs-eyebrow); letter-spacing: 0.42em; text-transform: uppercase; color: var(--fa-gold); font-weight: 600; margin-top: 6px; }

/* ---------- 5. Buttons ---------- */
.fa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fa-font-text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 13px 22px;
  border-radius: var(--fa-radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fa-btn--primary   { background: var(--fa-gold); color: var(--fa-notte); }
.fa-btn--primary:hover   { background: var(--fa-gold-d); }
.fa-btn--secondary { background: transparent; color: var(--fa-avorio); border: 1px solid #5a5142; font-weight: 600; }
.fa-btn--secondary:hover { border-color: var(--fa-gold); color: var(--fa-gold); }
.fa-btn--bordeaux  { background: var(--fa-bordeaux); color: var(--fa-avorio); }
.fa-btn--bordeaux:hover  { background: var(--fa-bordeaux-d); }
.fa-btn--light     { background: var(--fa-avorio); color: var(--fa-notte); }
.fa-btn--sm { padding: 9px 16px; font-size: var(--fa-fs-small); }

/* ---------- 6. Badges / Tags ---------- */
.fa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fa-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--fa-radius-sm);
}
.fa-badge--gold    { border: 1px solid var(--fa-gold); color: var(--fa-gold); }
.fa-badge--bordeaux{ background: var(--fa-bordeaux); color: var(--fa-avorio); }
.fa-badge--solid   { background: var(--fa-gold); color: var(--fa-notte); }

/* ---------- 7. Karten & Menü-Zeilen ---------- */
.fa-card {
  background: var(--fa-carbone);
  border: 1px solid #3a342b;
  border-radius: var(--fa-radius);
  overflow: hidden;
  box-shadow: var(--fa-shadow);
}
.fa-card__body { padding: 16px; }

/* Menü-Zeile (Speisekarte) — Trennlinie statt Punktführung, edler */
.fa-menu-list { display: flex; flex-direction: column; gap: 14px; }
.fa-menu-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--fa-linea);
  padding-bottom: 12px;
}
.fa-menu-row:last-child { border-bottom: none; padding-bottom: 0; }
.fa-menu-row__name { font-family: var(--fa-font-display); font-weight: 600; font-size: var(--fa-fs-h3); color: var(--fa-avorio); }
.fa-menu-row__desc { font-size: var(--fa-fs-small); color: var(--fa-grigio); }

/* ---------- 8. Layout-Bausteine ---------- */
/* Navigation */
.fa-nav {
  background: var(--fa-notte);
  padding: 18px var(--fa-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2a241d;
}
.fa-nav__links { display: flex; gap: 18px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fa-testo); }
.fa-nav__links a { color: inherit; text-decoration: none; }

/* Hero */
.fa-hero-section { position: relative; background: var(--fa-notte); }
.fa-hero-section__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(22,19,15,.85), rgba(22,19,15,.25));
}
.fa-hero-section__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 34px;
  max-width: 78%;
}

/* Info-Streifen (Öffnungszeiten) */
.fa-strip {
  background: var(--fa-bordeaux);
  color: #f1dcd0;
  padding: 13px var(--fa-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fa-fs-small);
  letter-spacing: 0.04em;
}
.fa-strip strong { font-weight: 700; }
.fa-strip span { opacity: .85; }

/* Sektionen */
.fa-section { padding: 28px var(--fa-gap); }
.fa-section--notte  { background: var(--fa-notte); }
.fa-section--dunkel { background: #1d1915; }
.fa-section--carbone{ background: var(--fa-carbone); }
.fa-section__title { font-size: var(--fa-fs-eyebrow); letter-spacing: 0.3em; text-transform: uppercase; color: var(--fa-gold); font-weight: 600; margin-bottom: 18px; text-align: center; }

/* Footer */
.fa-footer {
  background: var(--fa-notte);
  padding: 22px var(--fa-gap);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fa-fs-small);
  color: #8a8170;
  border-top: 1px solid #2a241d;
}
.fa-footer__brand { font-family: var(--fa-font-display); font-weight: 600; font-size: 16px; color: var(--fa-gold); }

/* ---------- 9. Helfer ---------- */
.fa-img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-stack { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fa-rounded { border-radius: var(--fa-radius); }