/* Dunkle Fassung des Milano-Entwurfs, 29.08.2026.

   Diese Datei liegt UEBER stil.css und aendert nur, was sich aendern muss.
   Die helle Fassung bleibt unangetastet.

   Der Trick ist der Tausch von --papier und --tinte. Weil das Stylesheet
   konsequent mit diesen beiden Namen arbeitet, dreht sich damit auch der
   kontrastierende Abschnitt automatisch mit: aus dem dunklen Gastraum-Block
   wird ein heller. Der Rhythmus bleibt also erhalten, er kippt nur.

   Zwei Dinge gehen nicht automatisch und stehen deshalb hier ausgeschrieben:
   der Fuss bleibt bewusst dunkel, und das Rot braucht auf Schwarz eine hellere
   Fassung. #e52528 auf #0e0e0e ergibt nur 3,96:1 und reisst damit die
   AA-Schwelle von 4,5:1 fuer kleinen Text. #ff4a47 kommt auf 5,85:1. Das
   satte Logorot bleibt den gefuellten Knopfflaechen vorbehalten, dort steht
   weisse Schrift darauf und das Verhaeltnis stimmt. */

:root {
  --papier: #0e0e0e;
  --tinte: #f2efea;
  --rot: #e52528;

  --rauch: rgba(242, 239, 234, .6);
  --linie: rgba(242, 239, 234, .18);
  /* gilt im hellen Block, deshalb dunkel */
  --linie-hell: rgba(16, 16, 16, .16);
}

/* ---------------------------------------------------- Rot auf Schwarz */

.gang-vor,
.folge-zahl,
.platzhalter-hinweis,
.gangnavi a.hier,
.leiste nav a.hier,
a.tel,
.wein-herkunft,
.getraenke-titel,
.text a { color: var(--rot-hell); }

a.tel:hover, a.tel:focus-visible { color: var(--tinte); }

.leerstelle { color: var(--rot-hell); }

.leiste nav a.hier { border-bottom-color: var(--rot-hell); }
.gangnavi a.hier { border-bottom-color: var(--rot-hell); }
.gaenge a:hover, .gaenge a:focus-visible { color: var(--rot-hell); }
.folge--platzhalter { border-color: var(--rot-hell); }
.gruss em { color: var(--rot-hell); }
.gaenge a.noch-nicht { color: rgba(242, 239, 234, .55); }

/* Im hellen Block gilt wieder der dunklere Ton, siehe stil.css */
.gang--dunkel .gang-vor { color: var(--rot-klein); }

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

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

/* ---------------------------------------------------- der helle Block */

.gang--dunkel .gang-satz { color: rgba(16, 16, 16, .62); }
.gang--dunkel .merkposten span { color: rgba(16, 16, 16, .62); }
.saal-bild { background: rgba(16, 16, 16, .08); }

/* ---------------------------------------------------- Bildflaechen */

.eingang-bild { background: #1a1a1a; }
.bild--breit, .bild--quer { background: #1a1a1a; }

/* ---------------------------------------------------- Fuss bleibt dunkel */

.fuss { background: #060606; color: var(--tinte); border-top: 1px solid var(--linie); }
.fuss h3 { color: rgba(242, 239, 234, .5); }
.fuss p, .fuss li { color: rgba(242, 239, 234, .82); }
.fuss .zeiten li { border-bottom-color: var(--linie); }
.fuss-zeile { border-top-color: var(--linie); color: rgba(242, 239, 234, .6); }