/* da Nello, Ristorante & Pizzeria, Muenster. Entwurf 20.08.2026.
   Farben, Typografie und das Gold-Diagonalen-Motiv stammen aus der
   gedruckten Speisekarte 06/2026 und dem Logo.

   Das Blau ist der Raum selbst: die Samtstuehle, die Servietten und die
   Tischdecken im Haus. Es trennt da Nello von den anderen dunklen
   Restaurantauftritten, ohne von der eigenen Druckkarte wegzuziehen. */

@import url("schriften.css");

/* ---------------------------------------------------------------- Grundlagen */

:root {
  --tinte: #0b0d12;          /* Grundton der Karte, fast schwarz mit Blaustich */
  --tinte-hell: #121722;     /* die blau abgetoenten Flaechen */
  --tinte-rand: #232a38;
  --gold: #c8a45c;
  --gold-hell: #e4cd97;
  --gold-tief: #8a6f34;
  --creme: #f3efe8;
  --creme-matt: #cbc8c4;
  --grau: #8b8b8e;
  --blau: #2c4a86;           /* Samtstuehle und Servietten im Haus */
  --blau-tief: #1c3059;      /* Grund der blauen Baender */
  --blau-hell: #7f9ad2;

  --breite: 1180px;
  --schmal: 820px;
  --luft: clamp(4.5rem, 9vw, 8.5rem);
  --rund: 4px;
  --haarlinie: linear-gradient(90deg, transparent, var(--gold-tief) 22%, var(--gold-hell) 50%, var(--gold-tief) 78%, transparent);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--tinte);
  color: var(--creme-matt);
  font-family: "Jost", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--gold-hell);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  line-height: 1.06;
  margin: 0;
  color: var(--creme);
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

h1 + p,
h2 + p { margin-top: 1.3rem; }

.bahn {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

.bahn--schmal {
  width: min(100% - 2.5rem, var(--schmal));
  margin-inline: auto;
}

/* Kleines Label ueber den Ueberschriften, wie die Zeile RISTORANTE PIZZERIA im Logo */
.marke-label {
  display: block;
  font-size: .75rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.vorspann {
  font-size: 1.14rem;
  color: var(--creme);
  max-width: 46ch;
}

/* Goldene Haarlinie als Trenner, greift die Diagonalen der Karte auf */
.linie {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--haarlinie);
  opacity: .65;
}

/* ------------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.9rem;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold-tief);
  border-radius: var(--rund);
  transition: background-color .25s, color .25s, border-color .25s;
}

.knopf--voll {
  background: var(--gold);
  border-color: var(--gold);
  color: #17130a;
  font-weight: 500;
}

.knopf--voll:hover,
.knopf--voll:focus-visible { background: var(--gold-hell); border-color: var(--gold-hell); }

.knopf--rand { color: var(--gold-hell); }

.knopf--rand:hover,
.knopf--rand:focus-visible { border-color: var(--gold); background: rgba(200, 164, 92, .12); }

:focus-visible {
  outline: 2px solid var(--gold-hell);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------- Kopf */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 13, 18, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200, 164, 92, .18);
}

.kopf__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.7rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
}

.marke img { width: 42px; height: auto; }

.marke__text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--creme);
  line-height: 1;
}

.marke__text small {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: .55rem;
  letter-spacing: .3em;
  color: var(--gold);
  margin-top: .3rem;
}

.navi {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}

.navi a {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme-matt);
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

.navi a:hover,
.navi a:focus-visible,
.navi a[aria-current="page"] { color: var(--gold-hell); border-bottom-color: var(--gold); }

.navi .knopf { padding: .7rem 1.4rem; border-bottom: 1px solid var(--gold); }
.navi .knopf:hover { color: #17130a; }

.menuknopf {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tinte-rand);
  border-radius: var(--rund);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.menuknopf span {
  display: block;
  width: 20px;
  height: 1px;
  margin: 5px auto;
  background: var(--creme);
  transition: transform .25s, opacity .25s;
}

@media (max-width: 900px) {
  .menuknopf { display: block; }

  .navi {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.25rem 1.5rem;
    background: var(--tinte);
    border-bottom: 1px solid rgba(200, 164, 92, .18);
    display: none;
  }

  .navi.ist-offen { display: flex; }
  .navi a { padding: .95rem 0; border-bottom: 1px solid var(--tinte-rand); }
  .navi .knopf { justify-content: center; margin-top: 1rem; border: 1px solid var(--gold); }

  .menuknopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menuknopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menuknopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* -------------------------------------------------------------------- Buehne */

.buehne {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.buehne--klein { min-height: min(52vh, 460px); }

.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.04) brightness(.62);
}

.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 13, 18, .78) 0%, rgba(11, 13, 18, .3) 38%, rgba(11, 13, 18, .96) 100%),
    linear-gradient(100deg, rgba(22, 35, 61, .58) 0%, rgba(22, 35, 61, 0) 62%);
}

.buehne__inhalt {
  position: relative;
  z-index: 2;
  padding: 5rem 0 clamp(3.5rem, 7vw, 6rem);
}

.buehne__logo {
  width: clamp(88px, 12vw, 130px);
  margin-bottom: 1.6rem;
}

.buehne h1 { max-width: 15ch; }
.buehne h1 em { font-style: italic; color: var(--gold-hell); }

.buehne p {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: 1.12rem;
  color: var(--creme);
}

.buehne__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}

/* --------------------------------------------------- Goldene Diagonalen

   In der gedruckten Karte laufen auf fast jeder Seite zwei duenne goldene
   Linien schraeg durch eine Ecke. Das ist das Formzeichen des Hauses und
   wird hier konsequent durchgezogen, oben rechts und unten links. */

.ecke {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  width: clamp(240px, 40%, 620px);
  height: clamp(180px, 55%, 460px);
  overflow: visible;
}

.ecke line {
  stroke: var(--gold);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ecke--oben {
  top: -8%;
  right: -4%;
  opacity: .55;
}

.ecke--unten {
  bottom: -8%;
  left: -4%;
  transform: rotate(180deg);
  opacity: .38;
}

.buehne__diagonale { opacity: .5; }

/* Auf schmalen Schirmen laufen die Linien sonst mitten durch die Knoepfe. */
@media (max-width: 760px) {
  .ecke--unten { display: none; }
  .ecke--oben { opacity: .3; }
}

/* ------------------------------------------------------------------ Abschnitt */

.block {
  position: relative;
  overflow: hidden;
  padding-block: var(--luft);
}

.block--matt { background: var(--tinte-hell); }

/* Das blaue Band. Einmal pro Seite, als Farbe des Hauses. */
.block--blau {
  background: var(--blau-tief);
  color: #c4cee2;
}

.block--blau .saeule {
  border-color: rgba(200, 164, 92, .22);
  background: rgba(0, 0, 0, .16);
}

.block--blau .gericht__text,
.block--blau .karte-gruppe__hinweis { color: #93a4c2; }

.block--blau .tropfen__zeile { border-bottom-color: rgba(255, 255, 255, .1); }

.block__kopf { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 3.8rem); }

/* Zweispalter Text und Bild */
.duo {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr 1fr;
}

.duo--kehrt .duo__bild { order: -1; }

.duo__bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rund);
}

@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
  .duo--kehrt .duo__bild { order: 0; }
  .duo__bild img { aspect-ratio: 4 / 3; }
}

/* Drei Versprechen */
.saeulen {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.saeule {
  border: 1px solid var(--tinte-rand);
  border-radius: var(--rund);
  padding: 2.1rem 1.8rem;
  background: rgba(255, 255, 255, .015);
}

.saeule h3 { margin-bottom: .7rem; }

.saeule__zeichen {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .9rem;
}

/* ------------------------------------------------------------------- Galerie */

.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
}

.galerie img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rund);
  transition: transform .5s ease, filter .5s ease;
  filter: saturate(.92);
}

.galerie a { display: block; overflow: hidden; border-radius: var(--rund); }
.galerie a:hover img { transform: scale(1.045); filter: saturate(1); }

.galerie__gross { grid-column: span 2; grid-row: span 2; }

@media (max-width: 760px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------- Karte */

.karte-gruppe + .karte-gruppe,
.hinweis + .karte-gruppe { margin-top: clamp(3rem, 6vw, 4.5rem); }

.karte-gruppe__kopf {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}

.karte-gruppe__kopf h2 { white-space: nowrap; }
.karte-gruppe__kopf .linie { flex: 1; }

.karte-gruppe__hinweis {
  font-size: .95rem;
  color: var(--grau);
  margin: -1rem 0 1.8rem;
}

.gerichte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 3.2rem;
}

.gerichte--eins { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 760px) {
  .gerichte { grid-template-columns: minmax(0, 1fr); }
}

/* Wie in der gedruckten Karte: Name links, Preis frei rechts, keine
   Fuehrungspunkte dazwischen. */
.gericht__zeile {
  display: flex;
  align-items: baseline;
  gap: .6rem 1.4rem;
  flex-wrap: wrap;
}

.gericht__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--creme);
  text-transform: uppercase;
}

.gericht__preis {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--gold-hell);
  white-space: nowrap;
}

.gericht__text {
  margin: .3rem 0 0;
  font-size: .97rem;
  color: var(--grau);
  max-width: 52ch;
}

.gericht__merkmal {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: .5rem;
}

/* Getraenke: schmale Zeilen mit zwei Groessen */
.tropfen { display: grid; gap: .45rem; }

.tropfen__zeile {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .8rem 1.4rem;
  align-items: baseline;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(35, 38, 44, .8);
}

.tropfen__zeile span:first-child { color: var(--creme); }
.tropfen__mass { color: var(--grau); font-variant-numeric: tabular-nums; }
.tropfen__preis { color: var(--gold-hell); font-variant-numeric: tabular-nums; }

.spalten-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.6rem);
}

@media (max-width: 760px) { .spalten-2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Hinweiskarte */

.hinweis {
  border: 1px solid rgba(200, 164, 92, .3);
  border-radius: var(--rund);
  padding: 1.6rem 1.8rem;
  background: rgba(200, 164, 92, .06);
  font-size: .97rem;
}

.hinweis strong { color: var(--gold-hell); font-weight: 500; }

/* Offene Stelle, muss vor dem Livegang gefuellt werden */
.luecke {
  color: #d98f6a;
  border-bottom: 1px dashed #d98f6a;
}

/* ------------------------------------------------------------------- Kontakt */

.kontakt__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(2rem, 4vw, 3.2rem);
}

.zeiten { list-style: none; margin: 0; padding: 0; }

.zeiten li {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--tinte-rand);
}

.zeiten span:first-child { color: var(--creme); }

.kontakt__daten { list-style: none; margin: 0; padding: 0; }
.kontakt__daten li { padding: .35rem 0; }

/* --------------------------------------------------------------------- Fuss */

.fuss {
  padding-block: 3.4rem 2.6rem;
  border-top: 1px solid var(--tinte-rand);
  background: var(--tinte);
  font-size: .92rem;
}

.fuss__inhalt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.fuss__navi { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.fuss__navi a {
  color: var(--grau);
  text-decoration: none;
}

.fuss__navi a:hover { color: var(--gold-hell); }

.fuss__marke {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--grau);
}

.fuss__marke img { width: 38px; }

/* -------------------------------------------------------------- Rechtstexte */

.rechtstext h2 { margin-top: 2.6rem; margin-bottom: .9rem; font-size: 1.7rem; }
.rechtstext h3 { margin-top: 1.8rem; margin-bottom: .6rem; font-size: 1.25rem; }
.rechtstext p, .rechtstext li { color: var(--grau); }
.rechtstext address { font-style: normal; color: var(--creme); }

/* Verweis mit vorangestelltem Zeichen, etwa Instagram. Das SVG erbt ueber
   currentColor die Linkfarbe, es braucht also keine eigene Farbangabe. */
.mit-icon {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}

.insta-icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}