/* =========================================================================
   MORGENWERK — Beispielkonzept

   Gestalterische Leitidee: das Muster soll sich wie eine Speisekarte lesen,
   nicht wie eine Unternehmensseite. Das Herzstueck ist deshalb die Karte
   selbst — gesetzt wie gedruckt, mit Punktfuehrung zwischen Gericht und
   Preis. Genau dieses Element gibt es auf keinem der anderen vier Muster.

   Weitere Unterschiede zu den anderen:
     - Der Seitenfluss wechselt zwischen hellen und dunklen Baendern statt
       durchgehend hell zu bleiben.
     - Nach der Buehne kommt keine Leistungsuebersicht, sondern eine reine
       Typo-Flaeche. Ein Cafe verkauft Atmosphaere, bevor es Gerichte
       aufzaehlt.
     - Die Bildstrecke traegt keine Texte. Drei Bilder, sonst nichts.
     - Ecken sind weich, aber klein gerundet (6px): freundlich, nicht verspielt.

   UEBERARBEITUNG (zweiter Durchgang):

     Massstab.  Spalte 1120 -> 1240px. H1 bis 68px, Editorial-H2 bis 52px,
                Fliesstext bis 18px, Knoepfe 52px, Gerichtsnamen bis 24px.

     Karte.     Zwei Gaenge nebeneinander statt untereinander, Preise rechts
                buendig, Beschreibungen darunter. Liest sich wie eine
                gesetzte Bistrokarte statt wie eine Preistabelle.

     Aussage.   Vorher eine grosse dunkle Flaeche mit kleinem Textblock.
                Jetzt Bild links, Text rechts — dieselbe Copy, halb so viel
                Leere.

     Ueber uns. Bild und Olive-Flaeche teilen sich die Breite. Der Abschnitt
                soll zeigen, was fuer ein Ort das ist, nicht nur davon
                erzaehlen.

     Abgrenzung zu NOVA. Beide sind editorial, aber Morgenwerk ist waermer,
                dichter und food-getrieben: erdige Toene, vollflaechige
                Essensbilder, Speisekartensatz. NOVA ist heller, kuehler und
                laesst mehr Weissraum.
   ========================================================================= */

@font-face {
  font-family: "Fraunces";
  src: url("../schrift/fraunces-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../schrift/fraunces-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../../assets/fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  --espresso: #3a271f;
  --creme:    #f4e8d5;
  --creme-h:  #fbf7f0;   /* helleres Cream fuer ruhige Flaechen */
  --terra:    #c86b45;   /* Flaechen und Linien */
  --terra-d:  #a4522f;   /* Text auf Creme und gefuellte Knoepfe: weisser
                            Text erreicht auf #c86b45 nur 3,72:1 und damit
                            AA nicht. Die helle Terrakotta bleibt als
                            Flaechenfarbe erhalten, gefuellt wird dunkler. */
  --olive:    #7c825b;   /* Akzent: kleine Etiketten und Linien */
  --olive-f:  #686e50;   /* Flaeche der Ueber-uns-Sektion. Der hellere
                            Markenton traegt weissen 18px-Text nur mit
                            4,04:1 — auch bei voller Deckung. Dieser Ton
                            kommt auf 5,34:1 und bleibt derselbe Farbton. */
  --olive-d:  #5a5f42;   /* Olive als Textfarbe auf Cream */
  --tinte:    #30231d;
  --tinte-2:  #5c504a;
  --linie:    #ddcdb9;
  --linie-d:  rgba(245, 235, 221, 0.24);

  --tit:  "Fraunces", Georgia, "Times New Roman", serif;
  --text: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --rand: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --spalte: 1240px;

  --luft-s:  clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem);
  --luft-m:  clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --luft-l:  clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --luft-xl: clamp(3.25rem, 2.2rem + 4.4vw, 6rem);
}

body {
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--text);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);   /* 17 -> 18 */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.mitte {
  width: 100%; max-width: var(--spalte);
  margin-inline: auto; padding-inline: var(--rand);
}

h1, h2, h3 { font-family: var(--tit); font-weight: 700; line-height: 1.12; margin: 0; }
p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--terra-d); }
a:focus-visible, span.knopf:focus-visible { outline: 3px solid var(--terra-d); outline-offset: 3px; }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.8rem 1.9rem;
  background: var(--terra-d); color: #fff;
  font-family: var(--text); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: 0.01em; text-decoration: none;
  border: 2px solid var(--terra-d); border-radius: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.knopf:hover { background: #8e4326; border-color: #8e4326; }
.knopf--linie { background: transparent; color: var(--creme); border-color: var(--linie-d); }
.knopf--linie:hover { background: rgba(245, 235, 221, 0.14); border-color: var(--creme); }
.knopf--dunkel { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.knopf--dunkel:hover { background: var(--espresso); color: var(--creme); }

.still { font-weight: 600; color: var(--tinte-2); cursor: default; }

/* ---------- Kopf: minimal ---------- */
.kopf { background: var(--creme); border-bottom: 1px solid var(--linie); }
.kopf__innen {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
  padding-block: 1.4rem;
}
.kopf__wort {
  font-family: var(--tit); font-weight: 700; font-size: 1.75rem;
  letter-spacing: 0.03em; color: var(--espresso); text-decoration: none;
  margin-right: auto;
}
.kopf__nav { display: none; }
.kopf__nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.kopf__nav a {
  color: var(--tinte); text-decoration: none; font-size: 0.9375rem; font-weight: 600;
  padding-block: 0.25rem;
}
.kopf__nav a:hover { color: var(--terra-d); }
/* Bewusst kein Pillen-Etikett mehr: ein Cafe schreibt seine Zeiten hin,
   es zeigt keinen Statusindikator. */
.kopf__heute {
  font-size: 0.9375rem; font-weight: 600; color: var(--olive-d);
  border-left: 2px solid var(--linie); padding: 0.15rem 0 0.15rem 1rem;
  white-space: nowrap; margin: 0;
}
.kopf__knopf { display: none; }
@media (min-width: 56rem) {
  .kopf__nav { display: block; }
  .kopf__knopf { display: inline-flex; min-height: 46px; padding: 0.55rem 1.35rem; font-size: 1rem; }
}

/* ---------- Buehne: fast vollflaechiges Bild ---------- */
.buehne { position: relative; isolation: isolate; color: var(--creme); }
.buehne img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.buehne::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(28, 18, 13, 0.90) 0%, rgba(28, 18, 13, 0.56) 48%, rgba(28, 18, 13, 0.14) 100%);
}
.buehne__innen {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(28rem, 74vh, 42rem);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.buehne h1 {
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);   /* 36 -> 68 */
  color: #fff; max-width: 17ch; margin-bottom: var(--luft-m);
}
.buehne__lead {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  color: rgba(255, 255, 255, 0.94); max-width: 46ch; margin-bottom: var(--luft-m);
}
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Grosse Typo-Flaeche, ohne Bild ---------- */
.aussage { background: var(--espresso); color: var(--creme); padding-block: var(--luft-xl); }
.aussage__innen { display: grid; gap: var(--luft-l); align-items: center; }
.aussage img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.aussage h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.25rem);   /* 30 -> 52 */
  color: var(--creme); margin-bottom: var(--luft-m); max-width: 14ch;
}
@media (min-width: 54rem) {
  /* Bild traegt die linke Haelfte — vorher stand hier nur Text in sehr
     viel dunkler Leere. */
  .aussage__innen { grid-template-columns: 45fr 55fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.aussage p { color: rgba(245, 235, 221, 0.82); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

/* ---------- Speisekarte: das Kennzeichen dieser Seite ---------- */
.karte { padding-block: var(--luft-xl); }
.karte__kopf { margin-bottom: var(--luft-l); max-width: 42ch; }
.karte__kopf h2 { font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.25rem); }

/* Zwei Gaenge nebeneinander: eine Bistrokarte nutzt die Breite, sie
   stapelt nicht alles in eine schmale Spalte. */
.gaenge { display: grid; gap: var(--luft-l); }
@media (min-width: 52rem) { .gaenge { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); } }
.gang { margin-bottom: 0; }
.gang:last-child { margin-bottom: 0; }
.gang__titel {
  font-family: var(--text); font-size: 0.9375rem; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-d);
  border-bottom: 1px solid var(--linie); padding-bottom: 0.7rem; margin-bottom: var(--luft-m);
}
.gericht { margin-bottom: var(--luft-m); }
.gericht:last-child { margin-bottom: 0; }
/* Punktfuehrung wie auf einer gedruckten Karte: der Zwischenraum wird von
   einem gepunkteten Rand gefuellt, der mitwaechst. */
.gericht__zeile { display: flex; align-items: baseline; gap: 0.5rem; }
.gericht__name {
  font-family: var(--tit); font-weight: 500;
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);   /* 20 -> 24 */
  color: var(--espresso);
}
.gericht__fuellung {
  flex: 1; border-bottom: 1px dotted var(--linie); transform: translateY(-0.2em);
  min-width: 1.5rem;
}
.gericht__preis {
  font-family: var(--tit); font-weight: 700;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  color: var(--espresso); white-space: nowrap;
}
.gericht__zutaten { font-size: 1rem; color: var(--tinte-2); margin: 0.35rem 0 0; max-width: 52ch; }

/* Kaffee als eigene, waagerechte Reihe unter den beiden Gaengen. */
.gang--kaffee { border-top: 1px solid var(--linie); padding-top: var(--luft-l); margin-top: var(--luft-l); }
.getraenke { display: grid; gap: var(--luft-s) clamp(2rem, 4vw, 4rem); }
@media (min-width: 40rem) { .getraenke { grid-template-columns: repeat(3, 1fr); } }

.karte__fuss { font-size: 1rem; color: var(--tinte-2); font-style: italic; margin-top: var(--luft-l); }

/* ---------- Bildstrecke: drei Bilder, keine Texte ---------- */
/* Drei Bilder, drei Groessen: ein grosses Essensbild links, darueber und
   darunter rechts die beiden kleineren. Drei gleiche Kacheln waeren genau
   der Baukasteneindruck, den diese Seite nicht haben soll. */
.strecke { display: grid; gap: clamp(0.6rem, 1.4vw, 1rem); padding-bottom: var(--luft-xl); }
.strecke figure { margin: 0; }
.strecke img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.strecke figure:nth-child(1) { aspect-ratio: 4 / 5; }
.strecke figure:nth-child(2) { aspect-ratio: 4 / 3; }
.strecke figure:nth-child(3) { aspect-ratio: 4 / 3; }
.strecke__bildtext {
  grid-column: 1 / -1; margin: var(--luft-s) 0 0;
  font-family: var(--text); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive-d);
}
@media (min-width: 42rem) {
  .strecke {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(28rem, 46vw, 38rem);
  }
  .strecke figure { aspect-ratio: auto !important; height: 100%; }
  .strecke figure:nth-child(1) { grid-row: span 2; }
  .strecke__bildtext { grid-column: auto; align-self: end; }
}

/* ---------- Ueber das Cafe ---------- */
.ueber { background: var(--olive-f); color: #fff; }
.ueber__innen { display: grid; align-items: stretch; }
.ueber__bild img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ueber__text { padding: var(--luft-xl) 0; }
.ueber h2 { color: #fff; font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.25rem); margin-bottom: var(--luft-m); }
@media (min-width: 54rem) {
  /* Das Bild laeuft bis zur Fensterkante, der Text sitzt im Satzspiegel. */
  .ueber__innen { grid-template-columns: 1fr 1fr; }
  .ueber__bild img { aspect-ratio: auto; min-height: 30rem; }
  .ueber__text {
    padding-block: var(--luft-xl);
    padding-right: max(var(--rand), calc((100vw - var(--spalte)) / 2 + var(--rand)));
    padding-left: clamp(2rem, 4vw, 4rem);
    display: flex; flex-direction: column; justify-content: center;
  }
}
/* Reines Weiss statt 90 % Deckung: der hellere Olivton aus der Palette
   (#7c825b statt #747a55) druecke den Kontrast sonst auf 4,04:1. */
.ueber p { color: #fff; }

/* ---------- Besuch ---------- */
.besuch { padding-block: var(--luft-xl); }
.besuch__innen { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.besuch__art {
  font-family: var(--text); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive-d);
  margin: 0 0 var(--luft-s);
}
.besuch h2 { font-size: clamp(1.875rem, 1.35rem + 2.4vw, 2.75rem); margin-bottom: var(--luft-m); }
.besuch address { font-style: normal; color: var(--tinte-2); font-size: 1.125rem; margin-bottom: var(--luft-m); }
.besuch__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.zeiten { margin: 0; }
.zeiten > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: 0.8rem; border-bottom: 1px solid var(--linie); font-size: 1.0625rem;
}
.zeiten dt { font-weight: 700; }
.zeiten dd { margin: 0; color: var(--tinte-2); }
@media (min-width: 48rem) { .besuch__innen { grid-template-columns: 1fr 1fr; } }

/* ---------- Reservierung ---------- */
.reservieren {
  background: var(--terra-d); color: #fff;
  padding-block: clamp(3.5rem, 3rem + 4vw, 6rem); text-align: center;
}
.reservieren__zeile {
  font-family: var(--text); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); margin: 0 0 var(--luft-s);
}
.reservieren h2 { color: #fff; font-size: clamp(1.875rem, 1.35rem + 2.4vw, 3rem); margin-bottom: var(--luft-s); }
.reservieren p { color: rgba(255, 255, 255, 0.94); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  max-width: 46ch; margin-inline: auto; margin-bottom: var(--luft-m); }
.reservieren p.reservieren__zeile { font-size: 0.9375rem; margin-bottom: var(--luft-s); }
.reservieren .knopf { background: var(--creme); color: var(--espresso); border-color: var(--creme); }
.reservieren .knopf:hover { background: #fff; border-color: #fff; }

/* ---------- Fuss ---------- */
.fuss {
  background: var(--espresso); color: rgba(244, 232, 213, 0.82);
  padding-block: var(--luft-m); font-size: 1rem;
}
.fuss__innen { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; }
.fuss__wort { font-family: var(--tit); font-weight: 700; font-size: 1.25rem; color: var(--creme); }