/* Ristorante Milano im Westend, moderner Entwurf.
   Zweite Fassung vom 29.08.2026.

   Die erste Fassung leitete die Farben aus den Raumfotos ab. Methodisch sauber,
   gestalterisch daneben: heraus kam Beige mit Holz und Terrakotta, also genau
   die Trattoria-Palette, die jede zweite italienische Seite hat, dazu runde
   Karten und Pillenknoepfe. Das ist der Stand von 2020.

   Diese Fassung dreht das um. Drei Farben statt acht, harte Kanten statt
   Radien, Haarlinien statt Kaesten, und ein sehr grosser Schriftkontrast.
   Waerme kommt aus dem Rot und aus den Fotos, nicht aus der Flaeche.

   Die Schrift ist Archivo, variabel in ZWEI Achsen. Die Breitenachse traegt
   die Gestaltung: Schaugroessen laufen breit, Etiketten schmal und gesperrt,
   Flieszttext normal. Eine Familie, drei klar verschiedene Stimmen. */

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

:root {
  --papier: #fbfaf9;
  --tinte: #101010;
  --rot: #e52528;
  /* Das Logorot ergibt auf dem Papier nur 4,39:1 und reisst damit die
     AA-Schwelle von 4,5:1 fuer kleinen Text. Fuer Etiketten, Links und andere
     kleine rote Schrift gilt deshalb der dunklere Ton, 4,87:1. Das satte
     Logorot bleibt gefuellten Flaechen und Schaugroessen vorbehalten, dort
     genuegen 3:1. */
  --rot-klein: #c81f22;
  /* und umgekehrt: auf dem dunklen Kontrastblock braucht kleines Rot einen
     helleren Ton, #e52528 kommt dort nur auf 4,19:1 */
  --rot-hell: #ff4a47;

  --rauch: rgba(16, 16, 16, .58);
  --linie: rgba(16, 16, 16, .14);
  --linie-hell: rgba(251, 250, 249, .2);
  /* Achtung: rechnet mit 100vw und zaehlt damit die Scrollleiste mit. Fuer
     Bloecke, die buendig mit .mitte anfangen sollen, ist das falsch, siehe
     die Gassenspalte im Eingang und im Saal. Bleibt nur fuer Faelle, in denen
     es auf ein paar Pixel nicht ankommt. */
  --gasse: max(var(--rand), calc((100vw - var(--spalte)) / 2));

  --schrift: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Nur fuer Schaugroessen. Instrument Serif hat einen einzigen Schnitt, das
     ist Absicht: die Schrift ist fuers Grosse gebaut, dort traegt der Regular. */
  --schau-schrift: "Instrument Serif", Georgia, "Times New Roman", serif;

  --spalte: 1320px;
  /* Mindestabstand zum Bildschirmrand. Vorher lag der Text bei einem
     1280er Fenster nur 44px vom Rand, das klebte. */
  --rand: 20px;
  --leiste: 64px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Die Spalte ist entweder so breit wie erlaubt oder so breit, dass links und
   rechts mindestens --rand frei bleibt. Was davon kleiner ist, gewinnt.
   --gasse ist derselbe Abstand als Wert, fuer Teile die aus der Spalte
   ausbrechen und trotzdem buendig anfangen sollen. */
.mitte {
  width: min(100% - var(--rand) * 2, var(--spalte));
  margin-inline: auto;
}

/* ---------------------------------------------------- Schriftstimmen */

/* Schau: breit, schwer, eng gesetzt, Zeilen dicht aufeinander */
.schau {
  font-family: var(--schau-schrift);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 0.96;
  letter-spacing: -0.015em;
}

/* Etikett: schmal, gesperrt, versal, klein */
.etikett {
  font-stretch: 88%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------------------------------------------------- Kopfleiste */

.leiste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

.leiste-innen {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--leiste);
}

/* Die Wortmarke: der Schriftzug mit dem Dom, darunter die Zeile. Der Schwung
   des alten Logos ist raus, dafuer steht "im Westend" wieder mit drin.
   Die Sperrung der Zeile ist so gewaehlt, dass sie ungefaehr auf der Breite
   des Schriftzugs endet. */
.marke {
  display: block;
  flex: none;
  /* macht die Marke zum Bezug fuer cqw, damit die Zeile darunter immer genau
     auf der Breite des Schriftzugs endet, egal wie gross er gerade ist */
  container-type: inline-size;
}
.marke img { display: block; width: 100%; }

/* 3.34cqw ist kein geratener Wert: bei dieser Sperrung laeuft die Zeile
   genau auf 100 Prozent der Markenbreite aus. Unter 9px wird nicht mehr
   verkleinert, dann steht sie lieber ein paar Pixel ueber. */
.marke-zeile {
  display: block;
  margin-top: 9px;
  font-stretch: 92%;
  font-size: max(9px, 3.34cqw);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.363em;
  text-transform: uppercase;
  color: var(--rauch);
  white-space: nowrap;
}

/* In der Leiste steht nur der Schriftzug, die Zeile passt dort nicht mehr
   hinein. Die vollstaendige Marke fuehrt Eingang und Fuss. */
.leiste-marke { width: 104px; }

.leiste nav { margin-left: auto; }
.leiste nav ul { display: flex; align-items: center; gap: 32px; }

.leiste nav a {
  display: block;
  font-size: 15px;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.leiste nav a:hover,
.leiste nav a:focus-visible { border-bottom-color: var(--tinte); }
.leiste nav a.hier { color: var(--rot-klein); border-bottom-color: var(--rot-klein); }
/* Der Rufknopf steht etwas weiter weg, sonst liest er sich als weiterer
   Menuepunkt. Die Polsterung muss hier stehen und nicht bei .knopf--klein:
   .leiste nav a ist spezifischer und hat sie sonst auf 4px 0 gedrueckt. */
.leiste nav a.knopf {
  margin-left: 12px;
  padding: 12px 28px;
}

/* ---------------------------------------------------- Knoepfe, eckig */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  background: var(--rot);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: 0.005em;
  white-space: nowrap;
  border: 1px solid var(--rot);
  transition: background-color .15s, color .15s, border-color .15s;
}
.knopf:hover, .knopf:focus-visible { background: var(--tinte); border-color: var(--tinte); }
.knopf svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.knopf--leer {
  background: none;
  color: var(--tinte);
  border-color: var(--tinte);
}
.knopf--leer:hover, .knopf--leer:focus-visible {
  background: var(--tinte);
  color: var(--papier);
}

/* Der Rufknopf in der Leiste. Die seitliche Polsterung ist bewusst
   grosszuegiger als oben und unten, sonst klebt die Nummer an der
   roten Kante. */
.knopf--klein { padding: 11px 26px; font-size: 14px; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* nur in der schmalen Leiste, quadratisch */
.knopf--ruf { display: none; flex: none; width: 44px; height: 44px; padding: 0; }
.knopf--ruf span { display: none; }

.schalter {
  display: none;
  flex: none;
  padding: 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.schalter svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* ---------------------------------------------------- Eingang */

.eingang { border-bottom: 1px solid var(--linie); }
.eingang-innen { display: grid; }

.eingang-text { padding: 44px var(--rand) 52px; }
.eingang-marke { width: min(280px, 100%); margin-bottom: 38px; }

/* Auf dem Handy laeuft der Eingang einspaltig ueber die volle Breite, dort
   war 14vw nie ein Problem. Die kleinere Fassung fuer den zweispaltigen
   Eingang steht im 900er Block. */
.gruss {
  font-size: clamp(50px, 14vw, 132px);
  margin-bottom: 26px;
}
.gruss em { font-style: normal; color: var(--rot); }

.eingang-satz {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.5;
  max-width: 30ch;
  color: var(--rauch);
  margin-bottom: 32px;
}

.eingang-bild { background: var(--tinte); aspect-ratio: 4 / 5; }
.eingang-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Eckdaten als Haarlinienband unter dem Eingang, ueber die volle Breite */
.eckdaten { border-bottom: 1px solid var(--linie); }
.eckdaten-innen { display: grid; }
.eckdaten-innen > div { padding: 22px 0; border-top: 1px solid var(--linie); }
.eckdaten dt { margin-bottom: 6px; color: var(--rauch); }
.eckdaten dd { font-size: 18px; font-weight: 600; line-height: 1.35; }
.eckdaten dd span {
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: var(--rauch);
  margin-top: 2px;
}

/* ---------------------------------------------------- Abschnitte */

.gang { padding: 84px 0; }
.gang--dunkel { background: var(--tinte); color: var(--papier); }
.gang--linie { border-top: 1px solid var(--linie); }
/* Abschnitte, in denen ein Bild bis an den Rand laufen soll, haben keinen
   eigenen Innenabstand. Den bringt der Textteil mit. */
/* zwei Klassen, damit die Regel auch den groesseren Innenabstand
   im Desktop-Block ueberholt */
.gang.gang--voll { padding: 0; }

.gang-kopf { margin-bottom: 44px; }
.gang-kopf--mitte { text-align: center; }
.gang-kopf--mitte .gang-satz { margin-left: auto; margin-right: auto; }

.gang-vor { color: var(--rot-klein); margin-bottom: 16px; }
.gang--dunkel .gang-vor { color: var(--rot-hell); }

.gang-titel { font-size: clamp(38px, 6.6vw, 86px); }

.gang-satz {
  margin-top: 20px;
  max-width: 46ch;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--rauch);
}
.gang--dunkel .gang-satz { color: rgba(251, 250, 249, .62); }

/* ---------------------------------------------------- Gaenge als Zeilen */

.gaenge { border-top: 1px solid var(--linie); }
.gaenge a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--linie);
  transition: padding-left .2s, color .15s;
}
.gaenge a:hover, .gaenge a:focus-visible { padding-left: 14px; color: var(--rot); }

.gaenge-name {
  font-family: var(--schau-schrift);
  font-size: clamp(31px, 5vw, 58px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
}
.gaenge-ab { margin-left: auto; font-size: 17px; font-weight: 600; white-space: nowrap; }

/* ausgegraut, aber noch lesbar: .38 ergab nur 3,03:1 */
.gaenge a.noch-nicht { color: rgba(16, 16, 16, .62); }

/* Getraenke und Weine stehen abgesetzt unter den Speisen. Der Absatz macht
   sichtbar, dass hier etwas anderes anfaengt. */
.gaenge a.zu-trinken { margin-top: 44px; border-top: 1px solid var(--linie); }

/* ---------------------------------------------------- Bilder */

/* randlos ueber die ganze Breite */
.bildband { margin-top: 0; }
.bildband img { width: 100%; height: 100%; object-fit: cover; }
.bildband figcaption {
  margin-top: 12px;
  color: var(--rauch);
}

.bild--breit { aspect-ratio: 21 / 9; background: var(--tinte); }
.bild--quer { aspect-ratio: 3 / 2; background: var(--tinte); }

.saal { display: grid; gap: 0; }
.saal-bild { aspect-ratio: 4 / 5; background: rgba(251,250,249,.08); }
.saal-bild img { width: 100%; height: 100%; object-fit: cover; }
.saal-text { padding: 64px var(--rand); }

.merkposten { margin-top: 34px; border-top: 1px solid var(--linie-hell); }
.merkposten li { padding: 20px 0; border-bottom: 1px solid var(--linie-hell); }
.merkposten b {
  display: block;
  font-stretch: 104%;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.merkposten span { color: rgba(251, 250, 249, .62); }

/* ---------------------------------------------------- Speisekarte */

.kartenkopf { padding: 60px 0 40px; }

.gangnavi {
  position: sticky;
  top: var(--leiste);
  z-index: 30;
  background: var(--papier);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  margin-bottom: 56px;
}
/* Die Leiste bricht um, statt seitlich wegzulaufen. Mit zehn Gaengen lief sie
   sonst rechts aus dem Bild und die hinteren Punkte, Getraenke zum Beispiel,
   waren nicht mehr erreichbar. */
.gangnavi ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding: 12px 0;
}
.gangnavi a {
  display: block;
  white-space: nowrap;
  font-stretch: 92%;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rauch);
  border-bottom: 1px solid transparent;
  padding: 3px 0;
}
.gangnavi a:hover, .gangnavi a:focus-visible { color: var(--tinte); }
.gangnavi a.hier { color: var(--rot-klein); border-bottom-color: var(--rot-klein); }

.folge { padding-bottom: 64px; scroll-margin-top: 132px; }

.folge-titel {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--tinte);
  font-family: var(--schau-schrift);
  font-size: clamp(31px, 4.8vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
}
.folge-titel small {
  margin-left: auto;
  align-self: center;
  font-stretch: 88%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rauch);
}
.folge-zahl {
  font-stretch: 88%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--rot-klein);
  align-self: flex-start;
}

.speisen { display: grid; gap: 0 56px; }

.speise {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 20px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--linie);
}
.speise-name { font-size: 18px; font-weight: 600; font-stretch: 104%; }
.speise-preis { font-size: 18px; font-weight: 600; white-space: nowrap; }
.speise-was {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.45;
  color: var(--rauch);
}

/* Ein Gang, dessen Inhalt noch nicht vom Kunden kommt. Rot und gestrichelt,
   damit er nicht unbemerkt live gehen kann. */
.folge--platzhalter {
  margin-bottom: 64px;
  padding: 28px 28px 4px;
  border: 1px dashed var(--rot);
}
.folge--platzhalter .folge-titel small {
  padding: 5px 11px;
  background: var(--rot);
  color: var(--papier);
  font-stretch: 88%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.platzhalter-hinweis {
  margin: 14px 0 6px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--rot-klein);
}

/* ---------------------------------------------------- Vorschlaege */

/* Angabe links, Erlaeuterung rechts */
.hinweise { margin-top: 24px; border-top: 1px solid var(--linie); }
.hinweise li {
  display: grid;
  gap: 2px 28px;
  padding: 15px 0;
  border-bottom: 1px solid var(--linie);
}
.hinweise b { font-stretch: 104%; font-size: 17px; font-weight: 600; }
.hinweise span { color: var(--rauch); font-size: 15px; line-height: 1.45; }

/* Zwei Fassungen nebeneinander, fuer die Oeffnungszeiten */
.gegenueber { display: grid; gap: 0 48px; margin-top: 24px; }
.gegenueber > div { padding-top: 18px; border-top: 1px solid var(--linie); }
.gegenueber .etikett { color: var(--rauch); margin-bottom: 12px; }
.gegenueber .zeiten li:last-child { border-bottom: 0; }
.gegenueber p { font-size: 15px; color: var(--rauch); margin-top: 10px; }

/* eine Angabe, die uns noch fehlt */
.leerstelle { color: var(--rot-klein); font-weight: 600; }

/* die Knopfreihe im Abschnitt Herkommen, laeuft ueber zwei Rasterspalten */
.finden-knoepfe { grid-column: span 2; }

/* ---------------------------------------------------- Weine und Getraenke */

/* Ein Wein bringt mehr Angaben mit als ein Gericht: Gut, Gebiet, Rebsorte,
   Beschreibung und zwei Preise. Deshalb steht er als kleiner Block, nicht als
   Zeile. */
.weine { display: grid; gap: 0; }

.wein {
  padding: 22px 0;
  border-bottom: 1px solid var(--linie);
}
.wein-name {
  font-family: var(--schau-schrift);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin-bottom: 6px;
}
.wein-herkunft { color: var(--rot-klein); margin-bottom: 8px; }
.wein-rebsorte { font-size: 16px; font-weight: 600; }
.wein-was { font-size: 15px; line-height: 1.45; color: var(--rauch); margin-bottom: 12px; }

.wein-preise { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.wein-preise > div { display: flex; align-items: baseline; gap: 10px; }
.wein-preise dt {
  font-stretch: 88%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rauch);
}
.wein-preise dd { font-size: 17px; font-weight: 600; }

.getraenke { display: grid; gap: 40px 56px; }
.getraenke-titel {
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--linie);
  color: var(--rot-klein);
}

/* Vor- und Nachbemerkungen der Karte, etwa der Hinweis auf den veganen Teig */
.hinweis-klein {
  font-size: 15px;
  line-height: 1.45;
  color: var(--rauch);
  margin-bottom: 14px;
}
.speisen + .hinweis-klein { margin-top: 16px; }

.hinweis {
  padding: 26px 0;
  border-top: 1px solid var(--tinte);
  font-size: 15px;
  color: var(--rauch);
}
.hinweis p + p { margin-top: 8px; }
.hinweis b { color: var(--tinte); font-weight: 600; }

/* ---------------------------------------------------- Textseiten */

.text { max-width: 66ch; }
.text h2 {
  margin: 44px 0 12px;
  font-stretch: 104%;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.text h2:first-child { margin-top: 0; }
.text p { margin-bottom: 16px; }
.text ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.text li { margin-bottom: 6px; }
.text a { color: var(--rot-klein); text-decoration: underline; text-underline-offset: 3px; }

/* Roter Telefonlink im Fliesztext. Frueher stand hier ein Inline-Stil mit
   var(--rot), das ergab bei 17px nur 4,35:1 und riss die AA-Schwelle von
   4,5:1. Der dunklere Ton kommt auf 4,87:1. */
a.tel { color: var(--rot-klein); }
a.tel:hover, a.tel:focus-visible { color: var(--tinte); }

.zeiten li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 340px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linie);
}
.gang--dunkel .zeiten li, .fuss .zeiten li { border-bottom-color: var(--linie-hell); }

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

.fuss { background: var(--tinte); color: var(--papier); padding: 76px 0 32px; }
.fuss-innen { display: grid; gap: 44px; }
.fuss-marke { width: 270px; margin-bottom: 26px; }
.fuss h3 { color: rgba(251, 250, 249, .5); margin-bottom: 16px; }
.fuss .marke-zeile { color: rgba(251, 250, 249, .62); }
.fuss p, .fuss li { color: rgba(251, 250, 249, .8); }
.fuss ul li { padding: 7px 0; }
.fuss a { border-bottom: 1px solid transparent; }
.fuss a:hover { border-bottom-color: currentColor; }
.fuss-zeile {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--linie-hell);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  color: rgba(251, 250, 249, .6);
}

/* ---------------------------------------------------- ab 600px */

@media (min-width: 37.5em) {
  :root { --rand: 36px; }
  body { font-size: 18px; }
  .eckdaten-innen { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .speisen { grid-template-columns: 1fr 1fr; }
  .weine { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .getraenke { grid-template-columns: 1fr 1fr; }
  .fuss-innen { grid-template-columns: 1fr 1fr; }
  .hinweise li { grid-template-columns: 270px 1fr; align-items: baseline; }
  .gegenueber { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------- ab 900px */

@media (min-width: 56.25em) {
  :root { --rand: clamp(72px, 7.5vw, 140px); --leiste: 76px; }

  /* Das Bild im Eingang laeuft bis an den Bildschirmrand */
  /* Die erste Spalte ist die Gasse. Sie rechnet mit 100 Prozent statt mit
     100vw, also gegen die Breite der Sektion und ohne die Scrollleiste. Damit
     faengt der Text im Eingang exakt dort an, wo darunter .mitte anfaengt.
     Vorher waren es 7px Versatz bei 1920px. minmax(0, 1fr) sorgt zusaetzlich
     dafuer, dass die Textspalte das Bild nicht mehr herausdruecken kann. */
  .eingang-innen {
    grid-template-columns:
      max(var(--rand), calc((100% - var(--spalte)) / 2))
      minmax(0, 1fr)
      40%;
    align-items: stretch;
  }
  /* Die Sektion hat drei Spalten, aber nur zwei Kinder. Beide muessen
     deshalb ausdruecklich gesetzt werden, sonst landet der Text in der
     Gasse und das Bild in der Textspalte. */
  .eingang-text {
    grid-column: 2;
    padding: 92px 64px 92px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .eingang-bild { grid-column: 3; aspect-ratio: auto; min-height: 78vh; }
  .eingang-marke { width: 330px; }

  /* 12,5vw statt 14vw. Zweispaltig steht "Benvenuti" nur noch etwa die Haelfte
     der Fensterbreite zur Verfuegung. Bei 14vw war das Wort zwischen 900 und
     975px breiter als seine Spalte und hat das Eingangsbild ueber den rechten
     Rand geschoben, gemessen 13px bei 900px Fensterbreite. Bei 12,5vw bleiben
     an der engsten Stelle 23px Luft, nachgemessen. */
  .gruss { font-size: clamp(50px, 12.5vw, 132px); }

  .eckdaten-innen { grid-template-columns: repeat(4, 1fr); column-gap: 40px; }

  .gang { padding: 128px 0; }

  /* dieselbe Gassenspalte wie im Eingang, hier auf der rechten Seite */
  .saal {
    grid-template-columns:
      42%
      minmax(0, 1fr)
      max(var(--rand), calc((100% - var(--spalte)) / 2));
  }
  .saal-bild { grid-column: 1; aspect-ratio: auto; }
  .saal-text {
    grid-column: 2;
    padding: 112px 0 112px 64px;
  }

  .fuss-innen { grid-template-columns: 1.5fr 1fr 1fr; gap: 56px; }
}

/* ---------------------------------------------------- unter 900px */

/* Die waagerechte Leiste braucht seit dem sechsten Menuepunkt mehr Platz.
   Bei 900px Fensterbreite lief sie ueber, deshalb klappt sie jetzt schon ab
   1100px zusammen statt erst ab 900. Nachgemessen: sechs Punkte plus Rufknopf
   sind 691px breit, dazu die Wortmarke mit 104px. */
@media (max-width: 68.74em) {
  .leiste nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    padding: 6px var(--rand) 20px;
  }
  .leiste.offen nav { display: block; }
  .leiste nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .leiste nav a { padding: 15px 0; font-size: 18px; border-bottom: 1px solid var(--linie); }
  .leiste nav li:last-child a { border-bottom: 0; padding-top: 20px; }
  .leiste nav .knopf { display: flex; width: 100%; margin-top: 6px; margin-left: 0; }
  .leiste-innen { position: relative; gap: 10px; }
  .knopf--ruf { display: inline-flex; margin-left: auto; }
  .schalter { display: block; }
  /* in der schmalen Leiste faellt der Ortszusatz weg, sonst quetscht die
     Wortmarke den Rufknopf zusammen */
  .leiste-marke i { display: none; }
}

@media (max-width: 56.24em) {
  .saal-bild { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}