/* ============================================================
   DEMO / ALTWERK - KUECHE & BAR

   ------------------------------------------------------------
   GESTALTUNGSENTSCHEIDUNGEN
   ------------------------------------------------------------
   FARBE   Dunkles Roestbraun statt Schwarz, Terrakotta als
           Akzent, gebrochenes Creme fuer Text. Gastronomie am
           Abend ist dunkel; ein weisses Layout luegt ueber die
           Stimmung im Raum.
   SCHRIFT Fraunces fuer Ueberschriften und die Karte. Sie hat
           Charakter und Waerme, ohne verspielt zu werden. Inter
           fuer alles, was reine Auskunft ist.
   KARTE   Als TEXT gesetzt, nicht als PDF. Das ist keine
           Gestaltungsfrage, sondern die wichtigste SEO-
           Entscheidung einer Gastroseite: Wer "Pasta glutenfrei"
           in dieser Stadt sucht, findet kein PDF.
   RASTER  Breite Raender, grosse Grade, wenige Elemente pro
           Bildschirm. Eine Speisekarte liest man nicht quer.
   ============================================================ */

:root {
  --nacht:       #191310;
  --nacht-weich: #241B17;
  --creme:       #F3EBE1;
  --creme-weich: #C9BCAF;
  --terra:       #C2653C;
  --terra-hell:  #E08B5F;
  --linie:       #3A2C25;

  --schrift-titel: "Fraunces", Georgia, "Times New Roman", serif;
  --schrift-text:  "Inter", system-ui, -apple-system, sans-serif;

  --rand:  clamp(1.25rem, 5vw, 3.5rem);
  --maxw:  72rem;
  --lesen: 36rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--creme);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

p { margin: 0 0 1rem; max-width: var(--lesen); }
a { color: var(--terra-hell); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--terra-hell);
  outline-offset: 3px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--rand); }
.abschnitt { padding-block: clamp(3.5rem, 9vw, 7rem); }
.abschnitt--weich { background: var(--nacht-weich); }

.auge {
  font-family: var(--schrift-text);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terra-hell);
  margin-bottom: 1rem;
}

/* --- Hinweisband ------------------------------------------- */
.demo-band { background: var(--terra); color: #fff; font-size: 0.8125rem; }
.demo-band .wrap {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  align-items: center; justify-content: space-between; padding-block: 0.6rem;
}
.demo-band a { color: #fff; text-underline-offset: 3px; }

/* --- Kopf --------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--nacht) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.65rem; min-height: 62px;
}
.logo {
  font-family: var(--schrift-titel); font-size: 1.45rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--creme); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.logo b { color: var(--terra-hell); font-weight: 600; }
.kopf-nav { display: none; gap: 1.75rem; }
.kopf-nav a {
  color: var(--creme-weich); text-decoration: none; font-size: 0.9375rem;
  min-height: 44px; display: inline-flex; align-items: center;
}
.kopf-nav a:hover { color: var(--creme); }
@media (min-width: 62rem) { .kopf-nav { display: flex; } }

/* --- Knoepfe ------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.75rem 1.5rem;
  border: 1px solid transparent; border-radius: 2px;
  font: inherit; font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.knopf--voll { background: var(--terra); color: #fff; }
.knopf--voll:hover { background: var(--terra-hell); }
.knopf--linie { border-color: var(--creme-weich); color: var(--creme); }
.knopf--linie:hover { background: var(--creme); color: var(--nacht); }
.knopf svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------
   HERO
   Bild als Grund, Text darueber. Ein Verlauf sorgt dafuer, dass
   die Schrift auf jedem Bildausschnitt lesbar bleibt - nicht
   der Zufall, sondern eine Rechnung.
   ------------------------------------------------------------ */
.hero { position: relative; min-height: min(78svh, 40rem); display: grid; align-items: end; overflow: hidden; }
.hero__bild { position: absolute; inset: 0; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) saturate(0.85); }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--nacht) 4%, color-mix(in srgb, var(--nacht) 55%, transparent) 45%, transparent 80%);
}
.hero__inhalt { position: relative; z-index: 1; padding-block: clamp(2.5rem, 7vw, 5rem); }
.hero h1 { font-size: clamp(2.6rem, 8vw, 5.5rem); margin-bottom: 1rem; }
.hero__lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--creme); max-width: 30rem; margin-bottom: 1.75rem; }
.hero__tun { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- Offen-Leiste ------------------------------------------- */
.leiste {
  border-block: 1px solid var(--linie);
  background: var(--nacht-weich);
}
.leiste .wrap {
  display: grid; gap: 0.75rem 2rem; padding-block: 1.1rem;
  font-size: 0.9375rem;
}
@media (min-width: 48rem) { .leiste .wrap { grid-template-columns: repeat(3, auto); justify-content: space-between; } }
.leiste div { display: flex; align-items: center; gap: 0.6rem; }
.leiste svg { width: 18px; height: 18px; color: var(--terra-hell); flex: none; }
.leiste strong { font-weight: 600; }
.leiste span { color: var(--creme-weich); }

/* ------------------------------------------------------------
   DIE KARTE
   Als Text. Nicht als PDF. Siehe Kopfkommentar.
   ------------------------------------------------------------ */
.karte { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 60rem) { .karte { grid-template-columns: 1fr 1fr; } }

.karte h3 {
  font-size: 1.5rem; margin-bottom: 1.25rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--linie);
}
.gericht { padding-block: 0.85rem; border-bottom: 1px solid var(--linie); }
.gericht:last-child { border-bottom: 0; }
.gericht__kopf {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-family: var(--schrift-titel); font-size: 1.125rem; font-weight: 600;
}
.gericht__kopf b { font-weight: 600; }
.gericht__punkte { flex: 1; border-bottom: 1px dotted var(--linie); transform: translateY(-0.25rem); }
.gericht__preis { font-variant-numeric: tabular-nums; color: var(--terra-hell); }
.gericht p { margin: 0.3rem 0 0; font-size: 0.9375rem; color: var(--creme-weich); max-width: none; }

.marker {
  display: inline-block; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--linie); border-radius: 2px;
  padding: 0.1rem 0.4rem; margin-left: 0.4rem;
  color: var(--creme-weich); vertical-align: 0.15em;
}
.marker--gruen { color: #8FB88A; border-color: #3E5240; }

/* --- Bildpaar ----------------------------------------------- */
.paar { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .paar { grid-template-columns: 1.3fr 1fr; align-items: stretch; } }
.paar img { width: 100%; height: 100%; object-fit: cover; min-height: 14rem; }

/* --- Zwei Spalten ------------------------------------------- */
.zwei { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .zwei { grid-template-columns: 1fr 1fr; } }
.zwei h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1rem; }

/* --- Zeiten-Tabelle ----------------------------------------- */
.zeiten { width: 100%; border-collapse: collapse; max-width: 26rem; font-size: 0.9375rem; }
.zeiten th, .zeiten td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--linie); }
.zeiten th { font-weight: 400; color: var(--creme-weich); }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }
.zeiten .zu { color: var(--creme-weich); }

/* --- Fuss ---------------------------------------------------- */
.fuss { border-top: 1px solid var(--linie); padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.fuss__raster { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h3 { font-family: var(--schrift-text); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme-weich); margin-bottom: 0.8rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { color: var(--creme); text-decoration: none; font-size: 0.9375rem; min-height: 44px; display: inline-flex; align-items: center; }
.fuss li a:hover { color: var(--terra-hell); }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie);
  font-size: 0.8125rem; color: var(--creme-weich);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--creme); color: var(--nacht); padding: 0.75rem 1.25rem;
}
.skip:focus { left: 0; }