/* ================================================================
   THEME: Sole  ·  Palette "Fränkisch-mediterran"
   Hell · Pine-Grün #1E3527 + Sonnengelb #E0A526 auf Papierweiß
   Mandant: restaurant-sole (sites.settings.brand.theme = "sole")
   ----------------------------------------------------------------
   Übernommen aus der handgebauten Vorgängerseite
   (black-mud-0d7a65003.7.azurestaticapps.net), damit das Layout
   beim Umzug ins CMS erhalten bleibt:
     pine #1E3527 · pine-deep #142519 · paper #FBF7EE · sand #F1E9D7
     sun  #E0A526 · sun-soft #F3CE7A  · ink   #23271F · ink-soft #5C6154
   Schriften: Fraunces (Headlines) + Karla (Text) – self-hosted.

   ABWEICHUNG VON DER VORLAGE (bewusst): Das helle Sonnengelb hat auf
   Papierweiß nur 2,05:1 Kontrast – als Textfarbe (Eyebrow-Label,
   Preise) war es auf der alten Seite kaum lesbar. Gold-TEXT nutzt
   daher --gold-ink #8A5E12 (5,32:1, WCAG AA), das helle Gelb bleibt
   für Flächen, Linien und Deko. Optisch identischer Eindruck.
   ================================================================ */

@import 'fonts-sole.css';

:root {
  color-scheme: light;

  /* Brand – Pine (Buttons, Links, Preise) */
  --brand:         #1E3527;
  --brand-hov:     #2B4835;
  --brand-act:     #142519;
  --brand-dim:     rgba(30,53,39,.08);
  --brand-dim-str: rgba(30,53,39,.16);

  /* Accent – Sonnengelb (Flächen, Linien, Deko) + lesbares Gold für Text */
  --accent:        #E0A526;
  --accent-dim:    rgba(224,165,38,.16);
  --sun-soft:      #F3CE7A;
  --gold-ink:      #8A5E12;
  --teal:          #3F6B54;

  /* Surfaces – Papier & Sand */
  --bg:            #FBF7EE;
  --surface:       #FFFFFF;
  --surface-alt:   #F1E9D7;
  --surface-3:     #E7DCC4;
  --surface-4:     #D8C9AA;

  /* Borders – Tinte, transparent (entspricht --line der Vorlage) */
  --border:        rgba(35,39,31,.14);
  --border-str:    rgba(35,39,31,.28);

  /* Text – Ink */
  --text:          #23271F;
  --text-2:        #3F4438;
  --text-m:        #5C6154;
  --text-dis:      #8A8E80;

  /* Semantic */
  --success:       #2E6B43;
  --success-bg:    rgba(46,107,67,.10);
  --warning:       #97650F;
  --warning-bg:    rgba(151,101,15,.10);
  --destructive:   #A8341F;
  --dest-bg:       rgba(168,52,31,.10);
  --info:          #1E3527;
  --info-bg:       rgba(30,53,39,.08);

  /* Schriften – Fraunces/Karla statt Outfit/DM Sans */
  --font-head:     'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:     'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Weiche Schatten (die Vorlage arbeitet ohne Glows) */
  --glow-xs:   0 1px 3px rgba(35,39,31,.07);
  --glow-sm:   0 2px 10px rgba(35,39,31,.09);
  --glow-md:   0 6px 22px rgba(35,39,31,.10);
  --glow-lg:   0 12px 36px rgba(35,39,31,.12);
  --focus:     0 0 0 3px rgba(224,165,38,.55);
}

/* ── Typografie: Serif-Headlines mit ruhigerem Gewicht ──────── */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; }

/* ── Buttons: Pill-Form wie in der Vorlage ──────────────────── */
.btn { border-radius: var(--r-full); font-weight: 700; }
.btn--primary { color: var(--bg); }
.btn--outline { color: var(--brand); border-color: var(--brand); border-width: 2px; }
.btn--outline:hover { background: var(--brand); color: var(--bg); }
.btn--ghost {
  background: var(--accent); color: var(--brand);
  border: 1.5px solid var(--accent); font-weight: 700;
}
.btn--ghost:hover { background: var(--sun-soft); border-color: var(--sun-soft); }

/* ── Eyebrow: goldene Linie, lesbares Gold als Text ─────────── */
.section-tag, .hero__eyebrow {
  color: var(--gold-ink);
  letter-spacing: .2em; font-weight: 700;
}
.section-tag::before { background: var(--accent); width: 34px; }

/* Hervorgehobener Titelteil: kursiv wie das <em> der Vorlage */
.hero__title .highlight {
  color: var(--brand); font-style: italic; text-shadow: none;
}

/* ── Navigation: Papier mit Blur ────────────────────────────── */
.nav { background: rgba(251,247,238,.92); }
.nav.scrolled {
  background: rgba(251,247,238,.96);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 12px rgba(35,39,31,.07);
}
.nav__mobile { background: rgba(251,247,238,.98); border-top-color: var(--border); }
.nav__hamburger span { background: var(--text); }
.nav__link:hover { color: var(--brand); }

/* ── Hero: warmer Papierverlauf statt Glow-Kreise ───────────── */
.hero { background: linear-gradient(180deg, #FBF7EE 0%, #F6EFE0 100%); }
.hero__glow-1 { background: radial-gradient(circle, rgba(224,165,38,.18) 0%, transparent 65%); }
.hero__glow-2 { background: radial-gradient(circle, rgba(30,53,39,.07) 0%, transparent 65%); }

/* ── Karten & Flächen ───────────────────────────────────────── */
.section--alt { background: var(--surface-alt); }
.bento-card--accent {
  border-color: rgba(224,165,38,.40);
  background: linear-gradient(135deg, var(--surface), rgba(224,165,38,.09));
}
.stats::before, .cta-banner::before {
  background: radial-gradient(ellipse, rgba(224,165,38,.12) 0%, transparent 65%);
}
.stat-num { color: var(--gold-ink); }

/* Listen-Häkchen in Pine */
.content-body ul li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231E3527' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ── Speisekarte: Gold-Preise, Serif-Namen (wie die Vorlage) ── */
.menu-tab.is-active { background: var(--brand); border-color: var(--brand); color: var(--bg); }
.menu-item__price { color: var(--gold-ink); }
.menu-item__badge { color: var(--gold-ink); background: var(--accent-dim); }
.menu-item__dots { border-bottom-color: var(--surface-4); }
.menu-cat__title { color: var(--brand); }

/* Route-Link in der Kontaktkarte: im Praxis-Design eine 160px hohe
   Kartenflaeche - auf Papier wirkt das wie ein leerer Block. Hier ein
   kompakter Button in Pill-Form. */
.map-btn {
  height: auto; padding: 12px 22px; align-self: flex-start;
  display: inline-flex; background: transparent;
  border: 2px solid var(--brand); border-radius: var(--r-full);
  color: var(--brand); font-family: var(--font-head); font-weight: 700;
}
.map-btn:hover { background: var(--brand); color: var(--bg); border-color: var(--brand); }

/* ── Footer: tiefes Pine, Text-Tokens lokal aufgehellt ──────── */
.footer {
  background: #142519;
  border-top-color: rgba(255,255,255,.08);
  --text:     #F6F1E4;
  --text-2:   #DCD6C6;
  --text-m:   #B3B4A4;
  --text-dis: #8E907F;
  --border:   rgba(255,255,255,.10);
}
.footer__col-title { color: var(--sun-soft); }
.footer__link:hover, .footer__map-link:hover { color: var(--accent); }