/*
 * Der Webauftritt des Cafés.
 *
 * Er benutzt dieselben Variablen wie alles andere (:root in kitchen.css) — das
 * Schwarzgrün, das Creme, die Hausschrift. Zieht die Website später auf einen
 * eigenen Server, kommt diese Datei mit und nimmt die Variablen mit; solange sie
 * hier liegt, gibt es keine zweite Wahrheit über die Hausfarben.
 *
 * Sechs Module, sechs Formen. Vorher lief eine einzige geteilte Fläche durch die
 * ganze Seite: grün links, hell rechts, auf jeder Höhe dieselbe Kante. Sie hielt
 * zusammen, was nichts miteinander zu tun hat, und jedes Foto füllte eine halbe
 * Seite. Jetzt trägt jeder Abschnitt seine eigene Form, und die Bilder sind
 * gerahmte Flächen in der Spalte statt Wände von Kante zu Kante.
 *
 * Dunkelgrau statt Grün: Das Schwarzgrün ist die Farbe des Hauses und trägt die
 * Seite. Dazu genau eine Signalfarbe, ein Gelb, das man von der Straße aus
 * sieht.
 *
 * Zwei Abstufungen, weil eine nicht reicht: Das helle Gelb trägt Flächen und
 * Marker und verlangt dunkle Schrift darauf. Als Schrift auf Creme wäre es
 * poppig und unlesbar — dafür steht das tiefe daneben.
 */

:root {
  --web-pop: #ffc72c;
  --web-pop-tief: #8a6400;
}

body.website {
  margin: 0;
  background: var(--mila-bg);
  color: var(--mila-text);
  font-family: var(--mila-font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body.website h1,
body.website h2 {
  margin: 0 0 0.5rem;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Die Spalte, in der alles steht. Sie hält den Text auf lesbarer Breite, während
   die Flächen selbst bis an den Rand laufen: Ein dunkles Band, das in der Mitte
   aufhört, ist eine Kachel; eines, das durchläuft, ist ein Raum. */
.web-innen {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

.web-modul {
  padding-block: clamp(2.2rem, 6vw, 4rem);
}

/* Die Bänder mit einem Knopf brauchen weniger Luft als die Module mit Bild:
   Vier gleich hohe Abstände hintereinander machen die Seite lang, ohne dass
   mehr darin steht. */
.web-modul--eng {
  padding-block: clamp(1.2rem, 3vw, 2rem);
}

/* Kopfzeile: Marke links, ein Knopf rechts. Mehr steht nicht drin — eine
   Reiterreihe mit vier Wörtern zwingt zum Lesen aller vier, und die Seite ist
   kurz genug zum Scrollen.

   Sie ist dunkel wie die Bühne darunter und geht ohne Absatz in sie über: oben
   ein Raum, kein Band über einer Fläche. Die Polsterung rechnet die Spalte
   selbst aus, damit der Grund bis an den Rand läuft und der Inhalt trotzdem auf
   derselben Kante steht wie überall sonst. */
.web-kopf {
  background: var(--mila-dunkel);
}

.web-kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1.2rem;
  padding-block: 1.1rem;
}

.web-kopf__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.web-kopf__marke img {
  display: block;
  height: 44px;
  width: auto;
  /* Das Logo ist dunkel auf durchsichtig. Auf dem Schwarzgrün wäre es
     unsichtbar, deshalb wird es hier weiß gefärbt — sauberer als eine zweite
     Bilddatei, die beim nächsten Logowechsel vergessen wird. */
  filter: brightness(0) invert(1);
}

.web-knopf {
  display: inline-block;
  padding: 0.62rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--web-pop);
  color: var(--mila-dunkel);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.web-knopf:hover {
  filter: brightness(1.12);
}

/* Auf hellem Grund, wenn zwei Wege nebeneinander stehen: Einer ist der
   wichtigere, der andere nur die Linie darum. */
.web-knopf--rand {
  border-color: var(--mila-dunkel);
  background: transparent;
  color: var(--mila-dunkel);
}

.web-knopf--rand:hover {
  background: var(--mila-dunkel);
  color: var(--mila-bg);
  filter: none;
}

/* Auf dunklem Grund: eine Linie statt einer Fläche. Zwei gefüllte Knöpfe
   nebeneinander stritten sonst darum, welcher der eine Weg ist. */
.web-knopf--linie {
  border-color: rgb(244 242 230 / 0.45);
  background: transparent;
  color: var(--mila-bg);
}

.web-knopf--linie:hover {
  border-color: var(--mila-bg);
  filter: none;
}

/* Die Bühne ------------------------------------------------------------------

   Der Satz steht vorn, das Bild daneben. Vorher füllte das Foto die halbe Seite
   von Kante zu Kante und war das Erste und Lauteste — dabei sagt es nichts, was
   die Überschrift nicht besser sagt. */
.web-buehne {
  padding-block: clamp(1.8rem, 5vw, 3.4rem) clamp(2.4rem, 6vw, 4rem);
  background: var(--mila-dunkel);
  color: var(--mila-bg);
}

.web-buehne__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: center;
}

.web-buehne h1 {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Das letzte Wort in der Signalfarbe: Der Satz endet beim Spritz, und die Seite
   hat damit ihren Ton, bevor man einen Absatz gelesen hat. */
.web-buehne h1 em {
  color: var(--web-pop);
  font-style: normal;
}

/* Der Satz, der sagt, wie es sich anfühlt. Größer als der Absatz darunter und
   kleiner als die Überschrift darüber: Er ist die zweite Stimme, nicht die
   Kleingedruckte. */
.web-buehne__lead {
  margin: 0.9rem 0 0;
  color: var(--web-pop);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.web-buehne__unter {
  margin: 0.9rem 0 0;
  max-width: 34ch;
  color: rgb(244 242 230 / 0.82);
}

.web-buehne__wege {
  margin: 1.5rem 0 0;
}

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

   Eine gerahmte Fläche in der Spalte, nicht die Spalte selbst. Die Höhe ist
   gedeckelt: Ein Hochformat füllte sonst den ganzen Schirm, und man scrollt eine
   Minute an einem Teller vorbei.

   Quadratisch: Die Fotos sind hochkant aufgenommen (9:16). In einer breiten
   Fläche blieb davon ein schmaler Streifen aus der Mitte, und der Teller lag
   angeschnitten darin. Ein Quadrat zeigt von einem Hochformat viel mehr — und
   es ist die eine Form, die zu jeder Vorlage passt, auch zur nächsten, die
   jemand hochlädt. */
.web-bild {
  display: grid;
  place-items: center;
  justify-self: center;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: 340px;
  padding: 1.2rem;
  /* Die Schraffur sagt, dass hier etwas fehlt — eine leere Fläche sähe aus wie
     Absicht. */
  background: repeating-linear-gradient(135deg, #e6e2d3 0 14px, #e1ddce 14px 28px);
  text-align: center;
}

/* Sobald ein Foto daliegt, ist die Fläche das Foto: keine Schraffur, keine
   Polsterung. Der Ausschnitt wird beschnitten und nicht gestaucht — ein
   verzerrtes Gesicht fällt sofort auf, ein fehlender Rand nie. */
.web-bild--foto {
  padding: 0;
  background: rgb(21 23 15 / 0.35);
}

.web-bild--foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.web-platz {
  display: inline-flex;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: var(--mila-text-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Wer wir sind ---------------------------------------------------------------

   Ein Satz und eine Reihe kurzer Wörter. Die Wörter sind Pillen und keine
   Aufzählung: Eine Liste mit Punkten läse sich wie eine Karte, die Reihe liest
   sich wie eine Spannweite — und genau das ist gemeint. */
.web-haus {
  display: grid;
  gap: 1.4rem;
}

.web-gesicht p {
  margin: 0.5rem 0 0;
  color: var(--mila-text-soft);
}

.web-haus h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
}

.web-haus p {
  margin: 0;
  max-width: 54ch;
  color: var(--mila-text-soft);
  font-size: 1.08rem;
}

.web-spanne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-spanne li {
  padding: 0.42rem 1rem;
  border: 1px solid var(--mila-dunkel);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Jede zweite in der Signalfarbe: Das Nebeneinander ist der Inhalt — alkoholfrei
   und mit Alkohol, Salat und Pinsa. Ein Wechsel zeigt es, eine Reihe gleicher
   Pillen wäre nur eine Liste in rund. */
.web-spanne li:nth-child(even) {
  border-color: transparent;
  background: var(--web-pop);
  color: var(--mila-dunkel);
}

/* Zwei Karten: Zeiten und Anschrift ------------------------------------------

   Als Karten und nicht als durchlaufende Fläche, weil es zwei Auskünfte sind und
   nicht eine: Man sucht die eine oder die andere, nie beide zugleich. */
.web-karten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Die Kachel: Jeder Textblock sitzt auf einer eigenen Fläche. Vorher lag der
   Text stellenweise frei auf dem Grund und stellenweise in einem Kasten — das
   las sich, als wäre das eine wichtiger als das andere.

   Die Farbe der Kachel sagt, worum es geht: hell der Alltag, dunkel der Abend
   und die Crew, gelb das Angebot für Gruppen. */
.web-kachel {
  padding: clamp(1.3rem, 3.2vw, 2.2rem);
  border: 1px solid var(--mila-line);
  border-radius: 24px;
  background: var(--mila-surface);
  /* Die Schrift gehört zur Fläche und nicht zum Grund: Ohne diese Zeile erbt
     eine helle Kachel auf dunklem Grund dessen helle Schrift — und steht dann
     weiß auf weiß da. */
  color: var(--mila-text);
}

.web-kachel--dunkel {
  border-color: transparent;
  background: var(--mila-dunkel);
  color: var(--mila-bg);
}

.web-kachel--pop {
  border-color: transparent;
  background: var(--web-pop);
  color: var(--mila-dunkel);
}

/* Die Überschrift über der Wochenliste ist eine Beschriftung und keine Ansage:
   Was darunter steht, liest man sowieso — sie muss nur sagen, was es ist. */
.web-marke-zeile {
  margin: 0 0 0.9rem;
  color: var(--mila-text-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.web-woche {
  margin: 0;
  font-size: 0.98rem;
}

.web-woche > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.42rem 0;
  border-bottom: 1px dotted var(--mila-line);
}

.web-woche > div:last-child {
  border-bottom: 0;
}

.web-woche dt {
  color: var(--mila-text-soft);
}

.web-woche dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Der Ruhetag tritt zurück, der lange Tag nach vorn: Beides sucht man, und
   beides stünde sonst gleich laut in der Liste. */
.web-woche__ruht dt,
.web-woche__ruht dd {
  color: var(--mila-text-soft);
  font-weight: 400;
}

/* Heute als Pille (Jana am 20.10.2026) — vorher stand die Pille beim langen
   Abend und las sich wie "heute ist Freitag". In einer Liste aus Zahlen sieht
   man eine Fläche zuerst. */
.web-woche__heute dt { color: var(--mila-text); font-weight: 700; }
.web-woche__heute dd {
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  background: var(--web-pop);
  color: var(--mila-dunkel);
  font-weight: 700;
}

.web-anschrift {
  margin: 0 0 1.1rem;
  font-size: 1.12rem;
  line-height: 1.45;
}

.web-wege {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.02rem;
}

.web-wege a {
  color: var(--web-pop-tief);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Eine Zeile aus Text und Bild ----------------------------------------------

   Kuchen und Abend teilen sich die Form und tauschen die Seite: Zweimal
   dieselbe Anordnung untereinander läse sich wie zweimal derselbe Abschnitt. */
.web-zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: center;
}

.web-zeile h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.web-zeile__wort p {
  margin: 0;
  max-width: 52ch;
  color: var(--mila-text-soft);
}

.web-kachel--dunkel .web-zeile__wort p {
  color: rgb(244 242 230 / 0.8);
}

/* Die kleine Markierung über der Überschrift. Auf Creme muss sie dunkler sein
   als auf Schwarzgrün, sonst verschwindet das Bernstein im Grund. */
.web-sonne {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  color: var(--web-pop-tief);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.web-kachel--dunkel .web-sonne {
  color: var(--web-pop);
}

.web-sonne::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
}

/* Die einzige feste Verabredung auf der Seite. Abgesetzt vom Fließtext, damit
   sie beim Scrollen hängen bleibt — aber im selben Modul, weil es derselbe
   Abend ist, von dem der Absatz darüber spricht.

   Eine Kante links statt eines Kastens ringsum: Ein Rahmen wäre eine zweite
   Fläche in der Fläche. */
.web-angebote {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.web-abend {
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--web-pop);
}

.web-abend p {
  margin: 0;
  max-width: none;
  color: rgb(244 242 230 / 0.78);
}

.web-abend__name {
  color: var(--web-pop);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.web-abend__zeit {
  font-variant-numeric: tabular-nums;
}

.web-abend__dazu {
  margin-top: 0.35rem;
}

/* Die Einladungen ------------------------------------------------------------

   Ein gerahmtes Band mit dem Weg am Ende: Reservieren und Bewerben sind keine
   Abschnitte zum Lesen, sondern zwei Knöpfe mit je einem Satz davor. */
.web-einladung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
}

/* Auf der gelben Kachel verschwände ein gelber Knopf — dort ist er dunkel. */
.web-kachel--pop p {
  color: rgb(21 23 15 / 0.88);
}

.web-kachel--pop .web-knopf {
  background: var(--mila-dunkel);
  color: var(--mila-bg);
}

.web-einladung__wort {
  flex: 1 1 22rem;
}

.web-einladung__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Auf der gelben Fläche ist das tiefe Gelb der Marke zu nah am Grund — dort
   trägt die Zeile dieselbe dunkle Farbe wie die Überschrift. */
.web-kachel--pop .web-sonne {
  color: var(--mila-dunkel);
}

.web-einladung h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}

.web-einladung p {
  margin: 0;
  max-width: 50ch;
  color: var(--mila-text-soft);
}

.web-kachel--dunkel .web-einladung__wort p,
.web-kachel--dunkel .web-notiz p {
  color: rgb(244 242 230 / 0.8);
}

.web-kachel--dunkel .web-notiz__name {
  color: var(--mila-bg);
}

/* Kurze Notizen auf hellem Grund ---------------------------------------------

   Dieselbe Form wie die Angebote am Abend, nur für Creme statt für Schwarzgrün:
   eine Kante links, kein Kasten. Zwei Notizen nebeneinander, weil es zwei
   Beispiele für dasselbe sind und keine zwei Angebote. */
.web-notizen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.web-notiz {
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--web-pop);
}

.web-notiz p {
  margin: 0.2rem 0 0;
  color: var(--mila-text-soft);
}

.web-notiz__name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.web-notiz .web-notiz__name {
  color: var(--mila-text);
}

/* Die Zwischenrufe -----------------------------------------------------------

   Ein Satz zwischen zwei Modulen, mittig und ohne Fläche darum. Er sagt nichts
   Neues — er sagt, dass hier Menschen arbeiten. Als eigenes Band mit Kasten
   wäre er ein weiterer Abschnitt; so ist er ein Atemzug. */
.web-zwischenruf {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.1rem, 4vw, 2rem);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.web-zwischenruf em {
  color: var(--web-pop-tief);
  font-style: normal;
}

/* Wer hinter dem Ganzen steht -----------------------------------------------

   Zwei Karten wie bei Zeiten und Anschrift: Es ist dieselbe Art von Auskunft —
   eine je Person, nebeneinander und gleich groß. */
.web-gesichter__titel {
  margin-bottom: 1.1rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.web-gesichter__satz {
  margin: 0 0 1.3rem;
  max-width: 46ch;
  color: var(--mila-text-soft);
  font-size: 1.08rem;
}

.web-gesichter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.web-gesicht__name {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

/* Der Fuß schließt an das letzte Modul an: dieselbe Fläche, keine zweite. */
.web-fuss {
  background: var(--mila-dunkel);
  color: rgb(244 242 230 / 0.72);
  font-size: 0.88rem;
}

.web-fuss__innen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  padding-block: 1.4rem 1.8rem;
}

.web-fuss nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.web-fuss a {
  color: inherit;
}

/* Am Rechner stehen Text und Bild nebeneinander. Dieselbe Schwelle wie bei der
   Anmeldung, damit beide Seiten im selben Moment umbrechen. */
@media (min-width: 44rem) {
  .web-buehne__raster:has(> .web-bild) {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .web-karten,
  .web-gesichter,
  .web-notizen {
    grid-template-columns: 1fr 1fr;
  }

  /* Nebeneinander nur, wo ein Bild steht — seit dem 15.10.2026 steht keins
     (Jana: "die fotos auch alle runter nehmen"). */
  .web-zeile:has(> .web-bild) {
    grid-template-columns: 1fr 1fr;
  }

  /* Bild links, Text rechts — die Zeile davor hat es umgekehrt. */
  .web-zeile--gedreht .web-zeile__wort {
    order: 2;
  }

}

/* Am Telefon liegen die Bilder flacher: Hochkant nähme ein Foto zwei Drittel des
   Schirms, und der Text darunter fiele aus dem Bild. */
@media (max-width: 44rem) {
  .web-bild {
    max-height: 290px;
  }
}

/* Auf Papier -----------------------------------------------------------------

   Ohne print-color-adjust lassen Browser beim Drucken alle Flächen weg: Aus dem
   dunklen Raum oben wird weißes Papier mit weißer Schrift darauf. Die Regel
   sagt, dass die Farben gemeint sind.

   Ohne Seitenrand, weil die Bänder bis an die Kante laufen — der Abstand zum
   Text steht schon in der Spalte. Und was zusammengehört, soll nicht zwischen
   zwei Blättern zerreißen. */
@media print {
  @page {
    margin: 0;
  }

  body.website {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .web-kachel,
  .web-bild {
    break-inside: avoid;
  }
}

/* Die schlanke Seite (Jana am 15.10.2026) ------------------------------------

   Oben nur das Logo, groß und mittig — kein Kopf, keine Bühne. Darunter die
   zwei Wege, nach denen ein Gast zuerst sucht. */
.web-logo {
  padding: clamp(1.5rem, 6vw, 3.6rem) 1rem clamp(0.4rem, 2vw, 1rem);
  text-align: center;
}

.web-logo h1 { margin: 0; line-height: 0; }

/* Am Handy kleiner (Jana am 18.10.2026: "fast zu groß") — der Platz oben
   gehört dem Gruß und dem Wetter; am Rechner bleibt es bei 20rem. */
.web-logo img {
  width: clamp(10.5rem, 30vw + 3rem, 20rem);
  height: auto;
}

/* Die zwei Knöpfe so breit wie die Kacheln darunter (Jana am 15.10.2026:
   "über die ganze Seite — nutz den Platz"). */
.web-start {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.web-knopf--gross {
  padding: 0.95rem 1.25rem;
  font-size: 1.08rem;
  text-align: center;
}

@media (min-width: 30rem) {
  .web-start { grid-template-columns: 1fr 1fr; }
}

/* Bestellen (28./29.10.2026): eine Frage, zwei Knöpfe in den Farben von
   Lieferando und Wolt, darunter das Abholen mit der Nummer zum Antippen. */
.web-bestellen {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
  text-align: center;
  color: var(--mila-text-soft);
  font-size: 0.98rem;
}
.web-bestellen p { margin: 0; }
.web-bestellen__abholen a {
  color: var(--mila-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

/* Die Lieferdienste als kleine Pillen in deren Farben (Jana am 29.10.2026)
   — sie ordnen sich den zwei großen Knöpfen unter. */
.web-dienst {
  display: inline-block;
  margin: 0.15rem 0 0.15rem 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.web-dienst::after { content: " ↗"; }
.web-bestellen__abholen { margin-top: 0.3rem; font-size: 0.9rem; }
.web-bestellen__dienste,
.web-bestellen__nummer { white-space: nowrap; }
.w2-knopf.web-dienst--lieferando,
.w2-knopf.web-dienst--wolt { padding: 0.45rem 0.95rem; font-size: 0.85rem; }
.web-dienst--lieferando,
.w2-knopf.web-dienst--lieferando { background: #ff8000; border-color: #ff8000; color: #fff; }
.web-dienst--wolt,
.w2-knopf.web-dienst--wolt { background: #009de0; border-color: #009de0; color: #fff; }

.w2-abholen { margin: 0.9rem 0 0; font-size: 0.95rem; opacity: 0.85; }
.w2-abholen a { font-weight: 700; color: inherit; white-space: nowrap; }

/* Kontakt wie auf der Gästeliste: Knöpfe mit Worten, untereinander. */
.web-kontakt > p { margin: 0; color: var(--mila-text-soft); }
.web-kontakt .reservieren__wege { max-width: none; }
.web-kontakt__kanaele { margin: 0.5rem 0 0; max-width: none; }
.web-kontakt .nl-formular { margin-top: clamp(1.4rem, 4vw, 2rem); padding-top: clamp(1.2rem, 3vw, 1.6rem); border-top: 1px solid var(--mila-line); }

/* Danke und Bestätigung beim Newsletter, in der Mitte. */
.web-mitteilung { display: grid; gap: 0.9rem; justify-items: start; max-width: 36rem; margin: 0 auto; }
.web-mitteilung p { margin: 0; color: var(--mila-text-soft); }
.web-mitteilung form { margin: 0; }

/* Das Menü als Fenster: die Karte Seite für Seite, darunter Herunterladen
   und die Allergene. Am Handy füllt es den Schirm. */
.web-fenster {
  width: min(100vw, 44rem);
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: var(--mila-bg);
  color: var(--mila-text);
}

.web-fenster[open] { display: flex; flex-direction: column; }
.web-fenster::backdrop { background: rgb(20 20 20 / 0.6); }

.web-fenster__kopf {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 1.6rem);
  background: var(--mila-dunkel);
  color: var(--mila-bg);
}

.web-fenster__titel { margin: 0; font-size: 1.1rem; font-weight: 700; }

.web-fenster__zu {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(244 242 230 / 0.45);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Menü und Allergene als Reiter (Jana am 18.10.2026). */
.web-fenster__reiterwerk { display: flex; flex: 1; flex-direction: column; min-height: 0; }

.web-fenster__reiter {
  display: flex;
  flex: none;
  gap: 0.4rem;
  padding: 0.7rem clamp(1rem, 4vw, 1.6rem) 0;
}

.web-fenster__reiterknopf {
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--mila-dunkel);
  border-radius: 999px;
  background: transparent;
  color: var(--mila-dunkel);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.web-fenster__reiterknopf[aria-selected="true"] { background: var(--mila-dunkel); color: #fff; }

.web-fenster__reiterwerk:not(.web-reiter--an) .web-fenster__reiter,
.web-reiter--an .web-fenster__weiter { display: none; }

.web-fenster__allergene { display: flex; flex: 1; min-height: 0; margin-top: 0.7rem; }
.web-fenster__allergene[hidden] { display: none; }
.web-fenster__inhalt[hidden] { display: none; }

.web-fenster__inhalt {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem clamp(1rem, 4vw, 1.6rem) calc(1.6rem + env(safe-area-inset-bottom, 0px));
}

.web-fenster__karte { display: grid; gap: 0.8rem; }
.web-fenster__karte + .web-fenster__karte { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--mila-line); }
.web-fenster__karte h3 { margin: 0; }
/* Eine Seite passt ganz ins Fenster (Jana am 18.10.2026: "dass man praktisch
   ohne Scrollen eine Seite ansehen kann"): so breit wie möglich, aber nie
   höher als der Platz unter dem Kopf. Gescrollt wird von Seite zu Seite, und
   jede rastet oben ein. */
.web-fenster__inhalt { container-type: size; scroll-snap-type: y proximity; scroll-padding-top: 0.6rem; }

/* Geblättert wie eine Karte (Jana am 18.10.2026) — siehe
   blaettern_controller.js. Die Bühne ist so hoch wie das Fenster abzüglich
   der Leiste darunter; die Seiten liegen darin aufeinander, mittig. Weiter
   dreht die oberste an ihrer linken Kante weg. Ohne JavaScript (ohne --an)
   stehen sie untereinander. */
.web-blaettern--an .web-blaettern__buehne {
  position: relative;
  /* Nie höher als eine A4-Seite in voller Breite — sonst stünde am Handy
     unter der Seite eine Lücke bis zu den Pfeilen. */
  height: min(calc(100cqh - 4.4rem), calc(100cqw * 1.42));
  perspective: 2200px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.web-blaettern--an .web-fenster__seite {
  position: absolute;
  inset: 0;
  margin: auto;
  max-height: 100%;
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.3, 0.1, 0.25, 1), opacity 0.7s ease-in, visibility 0s;
  cursor: pointer;
}

.web-blaettern--an .web-fenster__seite.web-blaettern__weg {
  transform: rotateY(-115deg);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.3, 0.1, 0.25, 1), opacity 0.7s ease-in, visibility 0s 0.7s;
}

.web-blaettern:not(.web-blaettern--an) .web-fenster__seite + .web-fenster__seite { margin-top: 0.8rem; }

/* Aufgeschlagen am Rechner und am iPad quer (Jana am 18.10.2026: "dann
   zwei"): Das Fenster wird breiter, die Seiten liegen links und rechts am
   Falz. Die rechte dreht über den Falz nach links; die neue linke kommt erst,
   wenn sie herüben ist. */
@media (min-width: 64rem) and (orientation: landscape) {
  .web-fenster--menue { width: min(94vw, 84rem); height: 92svh; }
}

.web-blaettern--zwei .web-blaettern__buehne { height: calc(100cqh - 4.4rem); }

.web-blaettern--zwei .web-fenster__seite {
  max-width: 50%;
  margin: auto 0;
  border-radius: 0;
}

.web-blaettern--zwei .web-fenster__seite.web-blaettern__links {
  right: 50%;
  left: auto;
  border-radius: 12px 0 0 12px;
  /* Getauscht wird links, wenn die drehende Seite über dem Falz steht —
     vorher bleibt die alte liegen, wie in einer echten Karte. */
  transition: opacity 0s 0.32s, visibility 0s 0.32s;
}

.web-blaettern--zwei .web-fenster__seite.web-blaettern__rechts {
  left: 50%;
  right: auto;
  border-radius: 0 12px 12px 0;
}

.web-blaettern--zwei .web-fenster__seite.web-blaettern__links.web-blaettern__verdeckt {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s 0.32s, visibility 0s 0.32s;
}

.web-blaettern--zwei .web-fenster__seite.web-blaettern__rechts.web-blaettern__weg {
  transform: rotateY(-180deg);
  opacity: 1;
}

.web-blaettern__leiste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.7rem;
}

.web-blaettern:not(.web-blaettern--an) .web-blaettern__leiste { display: none; }

.web-blaettern__pfeil {
  width: 2.9rem;
  height: 2.9rem;
  border: 1.5px solid var(--mila-dunkel);
  border-radius: 50%;
  background: #fff;
  color: var(--mila-dunkel);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.web-blaettern__pfeil:disabled { opacity: 0.3; cursor: default; }
.web-blaettern__zaehler { min-width: 3.5rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .web-blaettern--an .web-fenster__seite,
  .web-blaettern--an .web-fenster__seite.web-blaettern__weg { transition: none; }
}
.web-fenster__seite {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100cqh - 1.2rem);
  margin-inline: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--mila-line);
  scroll-snap-align: start;
}
.web-fenster__weiter { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--mila-line); }

@media (min-width: 44rem) {
  .web-fenster { height: min(92svh, 60rem); margin-block: auto; border-radius: 20px; overflow: hidden; }
}

/* Der Newsletter auf der schlanken Seite — dieselbe Form wie die Knöpfe
   darüber: runde Felder, ein gelber Knopf. */
.web-kontakt .nl-formular { display: grid; gap: 0.4rem; }
.web-kontakt .nl-formular__titel { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.web-kontakt .nl-formular__satz,
.web-kontakt .nl-formular__klein { margin: 0; color: var(--mila-text-soft); }
.web-kontakt .nl-formular__klein { font-size: 0.85rem; }
.web-kontakt .nl-formular__klein a { color: inherit; }
.web-kontakt .nl-formular__fehler { margin: 0; color: #b42318; font-weight: 700; }
.web-kontakt .nl-formular__zeile { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.web-kontakt .nl-formular__gruppe { display: grid; flex: 1 1 13rem; gap: 0.3rem; }
.web-kontakt .nl-formular__beschriftung { font-size: 0.9rem; font-weight: 700; }
.web-kontakt .nl-formular__feld {
  width: 100%;
  min-height: 3rem;
  padding: 0 1.1rem;
  box-sizing: border-box;
  border: 1.5px solid var(--mila-line);
  border-radius: 999px;
  background: #fff;
  color: var(--mila-text);
  font: inherit;
}
.web-kontakt .nl-formular__feld:focus { outline: 2px solid var(--web-pop); outline-offset: 1px; border-color: var(--mila-dunkel); }
.web-kontakt .nl-formular__knopf {
  flex: none;
  align-self: flex-end;
  min-height: 3rem;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--web-pop);
  color: var(--mila-dunkel);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Der Live-Status unter dem Logo (Jana am 15.10.2026): der Gruß klein und
   gelb wie die Etiketten, darunter in einem Satz, bis wann wir da sind. */
.web-heute { padding: 0 0 clamp(0.4rem, 2vw, 0.8rem); text-align: center; }
.web-heute p { margin: 0; }
.web-heute__gruss { color: var(--web-pop-tief); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.web-heute__herzlich { margin-top: 0.2rem !important; font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.web-heute__satz { margin-top: 0.3rem !important; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); font-weight: 600; text-wrap: balance; }
.web-heute__punkt { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.45rem; border-radius: 50%; background: var(--mila-text-soft); opacity: 0.45; vertical-align: 0.08em; }
.web-heute__punkt--offen { background: #1f9d55; opacity: 1; box-shadow: 0 0 8px rgb(31 157 85 / 0.6); }
/* Oben ruhig und mittig (Jana am 18.10.2026, Entwurf A): eine kleine
   Marke, ob offen ist, groß der Gruß, das Wetter als ein leiser Satz. */
.web-heute__marke {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.38rem 0.85rem;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.web-heute__marke .web-heute__punkt { margin: 0; width: 0.5rem; height: 0.5rem; vertical-align: 0; }
.web-heute .web-heute__herzlich { margin-top: clamp(1.4rem, 5vw, 2rem) !important; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem); letter-spacing: -0.035em; }

/* Eingerahmt (Jana am 18.10.2026): weiß und fein umrandet wie die Marke
   über dem Gruß — und so breit wie die Knöpfe und Kacheln darunter ("nutz den
   Platz, der da ist"). Am Handy und Tablet stehen Wetter und Abend
   untereinander, am Rechner nebeneinander mit einem Strich dazwischen. */
.web-wetter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem clamp(1rem, 3vw, 2rem);
  align-items: center;
  justify-content: center;
  margin-top: clamp(0.9rem, 2.5vw, 1.3rem);
  padding: clamp(0.7rem, 2vw, 0.95rem) clamp(1rem, 3vw, 1.6rem);
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: 18px;
  background: #fff;
}

/* Der Satz füllt den Rahmen und bricht erst um, wenn er wirklich nicht mehr
   passt (Jana am 18.10.2026: "schon wieder zu eng zusammengebatzt") — mit
   text-wrap: balance schrumpfte er auf zwei gleich kurze Zeilen. */
.web-heute .web-wetter__satz {
  flex: 1 1 auto;
  margin: 0;
  color: var(--mila-text-soft, #555);
  font-size: clamp(0.98rem, 0.92rem + 0.35vw, 1.12rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.web-heute .web-wetter .web-heute__abend { flex-basis: 100%; margin: 0; }

/* Das Wetter bis Ladenschluss (Jana am 19.10.2026): eine Zeile unter dem
   Satz, die Stunden gleich verteilt über die ganze Breite. */
.web-ausblick {
  flex-basis: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0.35rem 0 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid var(--mila-line, rgb(0 0 0 / 0.08));
  list-style: none;
}
.web-ausblick__satz {
  flex-basis: 100%;
  margin: 0.35rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--mila-line, rgb(0 0 0 / 0.08));
  font-size: 0.9rem;
  text-align: center;
  text-wrap: pretty;
}
.web-ausblick__komm { display: block; margin-top: 0.15rem; font-weight: 700; }
body.website .web-ausblick__komm { color: var(--web-pop); }
.web-ausblick__satz + .web-ausblick { margin-top: 0; border-top: 0; }
.web-ausblick li { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.web-ausblick__uhr { font-size: 0.78rem; color: var(--mila-text-soft, #555); }
.web-ausblick .web-wetter__zeichen { margin: 0; }
.web-ausblick__grad { font-size: 0.95rem; font-weight: 300; }

@media (min-width: 64rem) {
  .web-heute .web-wetter .web-heute__abend { flex-basis: auto; padding-left: clamp(1rem, 3vw, 2rem); border-left: 1px solid rgb(0 0 0 / 0.12); }
}

/* Das Zeichen steht im Satz, vor den Graden — nicht abseits am Rand. */
.web-wetter__zeichen { display: inline-block; width: 1.25rem; height: 1.25rem; margin-right: 0.3rem; vertical-align: -0.28em; fill: none; stroke: var(--mila-dunkel); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.web-wetter__flocke { stroke-width: 2.6; }
.web-heute .web-heute__abend { font-size: clamp(0.9rem, 0.86rem + 0.25vw, 1rem); font-weight: 700; }

/* Leise Bewegung: die Strahlen drehen sich, Regen und Schnee fallen. */
.web-wetter__strahlen { transform-box: view-box; transform-origin: 12px 12px; animation: web-wetter-drehen 18s linear infinite; }
.web-wetter__faellt { animation: web-wetter-fallen 1.4s ease-in infinite; }
.web-wetter--schnee .web-wetter__faellt { animation-duration: 3s; }
@keyframes web-wetter-drehen { to { transform: rotate(360deg); } }
@keyframes web-wetter-fallen { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(2.5px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .web-wetter__strahlen, .web-wetter__faellt { animation: none; }
}

/* Die Fassade bei "Wo du uns findest" (Jana am 15.10.2026). */
.web-fassade { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%; margin: 0.4rem 0 1rem; border-radius: 16px; }

/* Feinschliff vor dem Livegang (15.10.2026) ----------------------------------- */

/* Die Events: größere Namen, das Martini-Glas daneben. */
.web-events h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.web-events__liste { display: grid; gap: 0.9rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.web-event {
  position: relative;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: rgb(244 242 230 / 0.07);
  box-shadow: inset 3px 0 0 var(--web-pop);
}
.web-event p { margin: 0; }
.web-event__titel { margin-top: 0.2rem !important; color: var(--mila-bg); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.web-event__satz { margin-top: 0.2rem !important; color: rgb(244 242 230 / 0.8); }
.web-event:has(.eventzeichen) { padding-right: 4.2rem; }
.web-event .eventzeichen { position: absolute; top: 50%; right: 1rem; width: 2.4rem; transform: translateY(-50%); stroke: var(--mila-bg); }
.web-event .eventzeichen__punkt { fill: var(--mila-bg); }

@media (min-width: 44rem) {
  .web-events__liste { grid-template-columns: 1fr 1fr; }

  /* Kontakt am Rechner über die ganze Breite (Jana am 15.10.2026: "nutz den
     Platz"): die drei Wege in einer Reihe, die zwei Kanäle darunter. */
  .web-kontakt .reservieren__wege { grid-template-columns: repeat(3, 1fr); }
  .web-kontakt .web-kontakt__kanaele { grid-template-columns: 1fr 1fr; }
}

/* Die Wege im Fuß groß genug für einen Daumen. */
.web-fuss nav { gap: 0.2rem 1.2rem; }
.web-fuss nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Die Buchung im Fenster (15.10.2026): die Gästeliste füllt es ganz. */
.web-fenster__rahmen { flex: 1; width: 100%; border: 0; background: var(--mila-bg); }

/* Kleinigkeiten (16.10.2026) ------------------------------------------------- */

/* Alle kleinen Überschriften gleich: mit Punkt, in derselben Farbe. */
.web-marke-zeile { display: flex; align-items: center; gap: 0.5rem; color: var(--web-pop-tief); font-size: 0.76rem; letter-spacing: 0.09em; }
.web-marke-zeile::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }

/* Newsletter am Handy untereinander, damit nichts abgeschnitten wird. */
@media (max-width: 40rem) {
  .web-kontakt .nl-formular__zeile { display: grid; }
  .web-kontakt .nl-formular__gruppe, .web-kontakt .nl-formular__feld { width: 100%; }
  .web-kontakt .nl-formular__knopf { justify-self: start; }
}


/* Fünf Sterne über der Bitte um eine Bewertung. */
.web-einladung .web-sterne { margin: 0 0 0.3rem !important; color: var(--web-pop) !important; font-size: 1.3rem; letter-spacing: 0.12em; line-height: 1; }
/* Der Weg zu mehr Infos bei einem Event (17.10.2026). */
.web-event__weg { margin-top: 0.5rem !important; }
.web-event__weg a { color: var(--web-pop); font-weight: 700; }
/* Die letzten Instagram-Bilder (17.10.2026). */
.web-instagram { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1rem 0 0.6rem; }
.web-instagram__bild img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }

/* Die Kachel für einen großen Abend (Jana am 18.10.2026): die Zeiten in einer
   Zeile, der Hinweis aufs Ticket in Gelb, damit ihn niemand überliest. */
.web-highlight__zeiten {
  font-weight: 700;
}

.web-highlight__hinweis {
  color: var(--web-pop);
  font-weight: 700;
}

/* Das Plakat klein neben der Überschrift — größer würde es unscharf. */
.web-highlight__kopf {
  display: flex;
  gap: clamp(0.75rem, 3vw, 1.1rem);
  align-items: center;
}

.web-highlight__kopf h2 {
  margin-bottom: 0;
  font-size: clamp(1.15rem, 3.4vw + 0.4rem, 1.9rem);
  line-height: 1.2;
}

.web-highlight__bild {
  flex: none;
  width: clamp(4rem, 16vw, 6rem);
  height: auto;
  border-radius: 8px;
}

/* Der Gruß ganz unten (Jana am 18.10.2026): groß wie ein Zwischenruf,
   darunter klein, wer grüßt. */
.web-gruss {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.1rem, 4vw, 2rem) clamp(2rem, 5vw, 3rem);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}

.web-gruss__wer {
  display: block;
  margin-top: 0.45rem;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem);
  font-weight: 500;
  letter-spacing: 0;
}

/* Menü und Reservieren unten rechts, sobald die großen Knöpfe oben aus dem
   Bild sind (Jana am 18.10.2026) — siehe mitlaufen_controller.js. */
.web-mitlauf {
  position: fixed;
  right: clamp(0.6rem, 2vw, 1.2rem);
  bottom: calc(clamp(0.6rem, 2vw, 1.2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  gap: 0.45rem;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.web-mitlauf--da { opacity: 1; transform: none; pointer-events: auto; }

.web-mitlauf__knopf {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.55rem 1.05rem;
  box-sizing: border-box;
  border: 1.5px solid var(--mila-dunkel);
  border-radius: 999px;
  background: #fff;
  color: var(--mila-dunkel);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}

.web-mitlauf__knopf--voll { background: var(--mila-dunkel); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .web-mitlauf { transition: none; }
}

/* Die Gutscheine (Jana am 18.10.2026): eine weiße Kachel, rechts das
   Päckchen in Strichen. */
.web-gutschein { display: flex; flex-wrap: nowrap; gap: 1rem; align-items: center; justify-content: space-between; }
.web-gutschein .web-einladung__wort { flex: 1; min-width: 0; }
.web-gutschein .eventzeichen { flex: none; width: clamp(2.6rem, 9vw, 3.4rem); height: auto; fill: none; stroke: var(--mila-dunkel); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* Eine weihnachtliche Kachel (Jana am 18.10.2026: Adventskranz basteln) —
   Tannengrün mit warmem Gold wie auf der Buchungsseite; Kranz und Flocken
   kommen von dort (auth.css, .workshop__…). */
.web-highlight--weihnachtlich {
  position: relative;
  overflow: hidden;
  /* Einfarbig: Die Flächen im Kranz sind genau dieses Grün. */
  background: #1c3f2a;
}

.web-highlight--weihnachtlich .workshop__bild { position: static; }
/* Der Kranz kleiner als auf der Buchungsseite (Jana am 20.10.2026: "das macht
   es zu groß") — ein Bild über dem Text, nicht die halbe Kachel. */
.web-highlight--weihnachtlich .workshop__kranz { width: min(58%, 13rem); }
.web-highlight--weihnachtlich .workshop__bild { margin-bottom: 0.2rem; }
.web-highlight--weihnachtlich .web-sonne,
.web-highlight--weihnachtlich .web-highlight__titel,
.web-highlight--weihnachtlich .web-highlight__hinweis { color: #f0cf86; }
.web-highlight--weihnachtlich .web-sonne::before { background: #f0cf86; }
body.website .web-highlight--weihnachtlich .web-knopf:not(.web-knopf--rand, .web-knopf--linie) { background: #f0cf86; color: #14301f; }

/* Der Look der Gästeliste (Jana am 20.10.2026: "das Look and Feel der
   Gästeliste übernehmen, dann wäre es einheitlicher" — aus drei Entwürfen
   A: "jaaa A ist gut!"). Dieselben drei Farben wie mila-gaesteliste.de:
   Creme als Grund, Schwarz, ihr warmes Goldgelb. Oben das schwarze Band mit
   dem Logo, weiße Kacheln, schwarze Knöpfe mit gelber Schrift; der Abend und
   die Events schwarz mit gelber Überschrift. Eckig-runde Knöpfe und kleine
   gesperrte Überschriften wie dort. Steht am Ende, damit es die älteren
   Regeln oben überschreibt. Nur für diese Seite (body.website) — /website2
   hat ihren eigenen Anstrich. */
html body.website {
  --mila-bg: #f4f2e6;
  --mila-text: #141414;
  --mila-text-soft: rgb(20 20 20 / 0.66);
  --mila-dunkel: #141414;
  --mila-line: rgb(20 20 20 / 0.1);
  --mila-surface: #ffffff;
  --web-pop: #ffc72c;
  --web-pop-tief: #9a6a00;
  --web-flaeche: #ffffff;
}

/* Oben das schwarze Band wie "Komm doch vorbei." auf der Gästeliste. */
body.website .web-logo {
  margin-bottom: clamp(1rem, 4vw, 1.6rem);
  padding-bottom: clamp(1.4rem, 5vw, 2.4rem);
  border-radius: 0 0 28px 28px;
  background: var(--mila-dunkel);
}
body.website .web-logo img { filter: brightness(0) invert(1); }
body.website .web-heute__herzlich { font-size: clamp(2.3rem, 9vw, 3.4rem) !important; line-height: 0.94; letter-spacing: -0.04em; }

/* Ruhetag und Uhrzeit auffällig (Jana am 20.10.2026: "noch etwas
   auffälliger"): goldgelb, größer, der Punkt schwarz oder grün. */
body.website .web-heute__marke {
  padding: 0.5rem 1.1rem;
  border-color: transparent;
  background: var(--web-pop);
  color: var(--mila-dunkel);
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.02rem);
  font-weight: 800;
}
body.website .web-heute__marke .web-heute__punkt { width: 0.6rem; height: 0.6rem; background: var(--mila-dunkel); opacity: 0.55; }
body.website .web-heute__marke .web-heute__punkt--offen { background: #1f9d55; opacity: 1; box-shadow: 0 0 0 3px rgb(255 255 255 / 0.7); }

/* Das Wetter weiß mit goldenem Rand. */
body.website .web-wetter { border: 1px solid var(--web-pop); background: #fff; color: var(--mila-text); }
body.website .web-heute .web-wetter__satz { color: rgb(20 20 20 / 0.7); }
body.website .web-wetter__zeichen { stroke: var(--mila-dunkel); }

/* Ecken und Überschriften wie auf der Gästeliste. */
body.website .web-kachel,
body.website .web-wetter { border-radius: 18px; }
body.website .web-knopf,
body.website .nl-formular__knopf,
body.website .reservieren__weg,
body.website .web-mitlauf__knopf { border-radius: 12px; }
body.website .web-sonne { font-weight: 800; letter-spacing: 0.14em; }

/* Kacheln weiß; der Abend und die Events schwarz mit gelber Überschrift. */
body.website .web-kachel:not(.web-kachel--dunkel, .web-highlight) { border-color: var(--mila-line); background: #fff; color: var(--mila-text); }
body.website .web-kachel--dunkel:not(.web-highlight--weihnachtlich),
body.website .web-highlight:not(.web-highlight--weihnachtlich) { background: var(--mila-dunkel); color: var(--mila-bg); }
body.website .web-kachel--dunkel:not(.web-highlight--weihnachtlich) :is(p, li, dd, dt):not(.web-sonne, .web-highlight__hinweis),
body.website .web-highlight:not(.web-highlight--weihnachtlich) :is(p, li):not(.web-sonne) { color: var(--mila-bg); }
body.website .web-kachel--dunkel:not(.web-highlight--weihnachtlich) :is(h2, h3),
body.website .web-highlight:not(.web-highlight--weihnachtlich) .web-highlight__titel { color: var(--web-pop); }
body.website .web-woche dt { color: var(--mila-text-soft); }
body.website .web-woche dd { color: var(--mila-text); }

/* Knöpfe schwarz mit gelber Schrift wie "Tisch reservieren" auf der
   Gästeliste; der zweite nur mit Linie; auf Schwarz umgekehrt gelb. */
body.website .web-knopf:not(.web-knopf--rand, .web-knopf--linie),
body.website .web-kontakt .nl-formular__knopf { background: var(--mila-dunkel); color: var(--web-pop); }
body.website .web-knopf--rand,
body.website .reservieren__weg:not(.reservieren__weg--whatsapp) { border-color: var(--mila-dunkel); background: transparent; color: var(--mila-dunkel); }
body.website :is(.web-kachel--dunkel, .web-highlight):not(.web-highlight--weihnachtlich) .web-knopf:not(.web-knopf--rand, .web-knopf--linie) { background: var(--web-pop); color: var(--mila-dunkel); }
body.website .web-einladung .web-sterne { color: #e0a800 !important; }
body.website .web-gutschein .eventzeichen { stroke: var(--mila-dunkel); }

/* Unten rechts mitlaufend: Menü mit Linie, Reservieren schwarz. */
body.website .web-mitlauf__knopf { border-color: var(--mila-dunkel); background: var(--mila-bg); color: var(--mila-dunkel); }
body.website .web-mitlauf__knopf--voll { border-color: var(--mila-dunkel); background: var(--mila-dunkel); color: var(--web-pop); }

/* Das Menü-Fenster: der gewählte Reiter schwarz. */
body.website .web-fenster__reiterknopf[aria-selected="true"] { border-color: var(--mila-dunkel); background: var(--mila-dunkel); color: var(--web-pop); }

/* Der Adventskranz bleibt tannengrün: heller Text, Gold für Titel und Preis. */
body.website .web-highlight--weihnachtlich,
body.website .web-highlight--weihnachtlich p:not(.web-sonne, .web-highlight__hinweis) { color: var(--mila-bg); }

/* Die Newsletter-Felder weiß mit feiner Linie. */
body.website .nl-formular__feld { border: 1px solid rgb(20 20 20 / 0.25); background: #fff; color: var(--mila-text); }
body.website .nl-formular__feld::placeholder { color: rgb(20 20 20 / 0.45); }

/* Die Einladung zum Wetter dunkel und fett. */
body.website .web-ausblick__komm { color: var(--mila-dunkel); }

/* Die Fußzeile schwarz wie das Band oben. */
body.website footer { border: 0; background: var(--mila-dunkel); color: var(--mila-bg); }
body.website footer a { color: inherit; }

/* Im Band unter dem Logo, wofür das MILA. steht (Jana am 20.10.2026) — groß
   und eng wie "Komm doch vorbei." auf der Gästeliste, das letzte Wort
   goldgelb; darunter die zwei Sätze leise in Creme. */
body.website .web-buehne { margin-top: clamp(1.1rem, 4vw, 1.8rem); color: var(--mila-bg); }
body.website .web-buehne__titel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.28em;
  margin: 0;
  font-size: clamp(2.3rem, 10vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
body.website .web-buehne__titel em { font-style: normal; color: var(--web-pop); }
/* M, I, L, A in "Mitten in der Landshuter Altstadt" in der Farbe von
   "Spritz." (Jana am 25.10.2026). */
body.website .web-mila-buchstabe { color: var(--web-pop); font-weight: 800; }
/* Am Handy untereinander (Jana am 20.10.2026), wie "Komm doch vorbei." auf
   der Gästeliste; ab Tablet nebeneinander. */
@media (max-width: 47.99rem) {
  body.website .web-buehne__titel { flex-direction: column; align-items: center; font-size: clamp(2.8rem, 15vw, 4rem); line-height: 0.92; }
}
body.website .web-buehne__satz {
  max-width: 34rem;
  margin: 0.55rem auto 0;
  color: rgb(244 242 230 / 0.78);
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.15rem);
  line-height: 1.4;
  text-wrap: balance;
}
body.website .web-buehne__titel + .web-buehne__satz { margin-top: clamp(0.8rem, 3vw, 1.2rem); color: var(--mila-bg); font-weight: 700; }

/* Eine Zeichnung in der Event-Kachel (Jana am 20.10.2026, aus ihrem Post zur
   Zeitumstellung) — immer seitlich rechts neben dem Text ("setz die Grafik
   immer seitlich"), unten bündig; am Handy schmal, größer mit dem Platz. */
body.website .web-highlight--mit-zeichnung {
  display: grid;
  grid-template-columns: 1fr clamp(6.5rem, 26vw, 13rem);
  column-gap: clamp(0.8rem, 4vw, 3rem);
  align-items: start;
}
body.website .web-highlight--mit-zeichnung > :not(.web-highlight__zeichnung) { grid-column: 1; }
body.website .web-highlight--mit-zeichnung > .web-knopf { justify-self: start; white-space: normal; }
body.website .web-highlight__zeichnung { grid-column: 2; grid-row: 1 / span 6; align-self: end; width: 100%; height: auto; }

/* "Log in" unten, leiser als die anderen Wege (21.10.2026). */
body.website .web-fuss__anmelden { opacity: 0.55; text-decoration: none; }
body.website .web-fuss__anmelden:hover { opacity: 1; text-decoration: underline; }

/* Die Winter-Special Karte daneben (Jana am 22.10.2026): größer als eine
   Zeichnung, damit man sie erkennt, leicht schräg wie der Tischaufsteller. */
body.website .web-highlight--karte { grid-template-columns: 1fr clamp(8.5rem, 38vw, 15rem); }
body.website .web-highlight--karte .web-highlight__zeichnung {
  align-self: center;
  border-radius: 0.4rem;
  box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.45);
  transform: rotate(2.5deg);
}

/* Besondere Öffnungstage in einer Kachel (25.10.2026): je Tag eine Zeile,
   was abweicht, in Goldgelb. */
body.website .web-sondertage { display: grid; gap: 0.35rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
body.website .web-sondertage__tag { display: grid; grid-template-columns: 5.6rem 1fr auto; gap: 0.8rem; align-items: baseline; padding: 0.45rem 0; border-top: 1px solid rgb(244 242 230 / 0.15); }
body.website .web-sondertage__datum { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Jeder Tag mit Namen farbig (Jana am 25.10.2026), abweichende Zeiten fett. */
body.website .web-sondertage__name { color: var(--web-pop); font-weight: 700; }
body.website .web-sondertage__zeit { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.website .web-sondertage__tag--anders .web-sondertage__zeit { color: var(--web-pop); font-weight: 800; }
@media (max-width: 40rem) {
  body.website .web-sondertage__tag { grid-template-columns: 1fr auto; row-gap: 0.1rem; }
  body.website .web-sondertage__name { grid-column: 1 / -1; grid-row: 2; font-size: 0.9rem; }
}

/* Der Countdown zur Winterhütte (25.10.2026): vier Zahlen nebeneinander. */
body.website .web-countdown { margin-top: 0.4rem; }
body.website .web-countdown__satz { margin: 0 0 0.6rem; }
body.website .web-countdown__zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 4.6rem)); gap: 0.5rem; margin: 0; }
body.website .web-countdown__zahlen div { padding: 0.55rem 0.3rem; border-radius: 12px; background: rgb(244 242 230 / 0.08); text-align: center; }
body.website .web-countdown__zahlen dd { margin: 0; color: var(--web-pop); font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
body.website .web-countdown__zahlen dt { margin-top: 0.2rem; color: rgb(244 242 230 / 0.7); font-size: 0.72rem; font-weight: 700; }
body.website .web-countdown__fertig,
body.website .web-countdown__offen { margin: 0.4rem 0 0; color: var(--web-pop); font-weight: 800; }
/* Die Hütte aus der Website 2 hier ruhig in der Kachel statt frei an der
   Fassade; ihre Farben auf das Dunkel der Kachel. */
body.website .web-huette { --w2-creme: #f4f2e6; --w2-nacht: #141414; --w2-licht: #ffc72c; align-self: center; }
body.website .web-huette .w2-huette { position: static; width: 100%; }
/* Schnee über der ganzen Kachel (25.10.2026), hinter dem Inhalt. */
body.website .web-highlight:has(> .web-schnee) { position: relative; overflow: hidden; }
body.website .web-highlight:has(> .web-schnee) > :not(.web-schnee) { position: relative; z-index: 1; }
body.website .web-schnee { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* In Tannengrün (25.10.2026): die Wände der Hütte im Grün der Kachel, die
   Zahlen in Gold wie beim Adventskranz. */
body.website .web-highlight--weihnachtlich .web-huette { --w2-nacht: #1c3f2a; }

/* Eure Kränze als angeklebte Abzüge, darunter die Materialien als Zeichnungen
   (Jana am 26.10.2026, wie im Moodboard und im Post). */
body.website .web-abzuege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 2.5vw, 1.2rem); margin: 1.5rem 0 0.4rem; padding: 0.5rem 0.2rem 0; }
body.website .web-abzug { position: relative; margin: 0; padding: 7px 7px 20px; background: #fbf8ef; box-shadow: 0 10px 22px rgb(0 0 0 / 0.3); transform: rotate(-3deg); }
body.website .web-abzug:nth-child(2) { margin-top: 0.9rem; transform: rotate(2.5deg); }
body.website .web-abzug:nth-child(3) { transform: rotate(-1.5deg); }
body.website .web-abzug::before { content: ""; position: absolute; top: -9px; left: 50%; width: 56px; height: 18px; margin-left: -28px; background: rgb(240 207 134 / 0.85); transform: rotate(-4deg); }
body.website .web-abzug:nth-child(2)::before { background: rgb(244 242 230 / 0.6); transform: rotate(3deg); }
body.website .web-abzug img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 10%; }
body.website .web-materialien__block { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgb(244 242 230 / 0.18); }
body.website .web-materialien { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: 0.9rem 0.4rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
body.website .web-materialien li { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: var(--mila-bg); font-size: 0.78rem; font-weight: 600; line-height: 1.2; text-align: center; }
body.website .web-materialien__zeichen { width: 2.5rem; height: auto; }

/* Die Kranz-Zeichnung steht über den Abzügen (Jana am 26.10.2026: "den
   Kranz über die Bilder"): am Handy nach dem Knopf, am Rechner rechts. */
body.website .web-highlight--moodboard { display: flex; flex-direction: column; }
body.website .web-highlight--moodboard > .web-knopf { align-self: flex-start; }
body.website .web-highlight--moodboard > .workshop__bild { order: 1; margin: 1.4rem 0 0; }
body.website .web-highlight--moodboard > .web-abzuege { order: 2; }
body.website .web-highlight--moodboard > .web-materialien__block { order: 3; }

/* Am Rechner wie im Entwurf: Text links, Abzüge rechts, die Materialien unten
   über die ganze Breite (Jana am 26.10.2026). */
@media (min-width: 60rem) {
  body.website .web-highlight--moodboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  body.website .web-highlight--moodboard > * { grid-column: 1; }
  body.website .web-highlight--moodboard > .web-knopf { justify-self: start; }
  body.website .web-highlight--moodboard > .workshop__bild { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 0 1rem; }
  body.website .web-highlight--moodboard > .web-abzuege { grid-column: 2; grid-row: 3 / span 4; align-self: start; margin: 0; }
  body.website .web-highlight--moodboard > .web-materialien__block { grid-column: 1 / -1; }
  body.website .web-highlight--moodboard .web-materialien { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
body.website .web-highlight--weihnachtlich .web-countdown__zahlen dd,
body.website .web-highlight--weihnachtlich :is(.web-countdown__fertig, .web-countdown__offen) { color: #f0cf86; }

/* Winterhütte und Adventskranz nebeneinander (Jana am 25.10.2026), am
   Rechner gleich hoch; am Handy und iPad hochkant untereinander wie alles. */
/* Alle Ankündigungen in einer Spalte; der Abstand wie vorher zwischen den
   einzelnen Abschnitten. Am Handy löst sich das Paar auf, und jede Kachel
   steht an ihrem Platz der Reihenfolge (--reihe). */
body.website .web-ankuendigungen { display: flex; flex-direction: column; gap: calc(2 * clamp(1.2rem, 3vw, 2rem)); }
@media (max-width: 59.99rem) {
  body.website .web-paar { display: contents; }
  body.website .web-ankuendigungen__platz { order: var(--reihe); }
}
@media (min-width: 60rem) {
  body.website .web-paar { display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  body.website .web-paar > .web-ankuendigungen__platz { display: grid; }
  body.website .web-paar .web-highlight { height: 100%; box-sizing: border-box; padding: clamp(1.2rem, 2vw, 1.7rem); }
  body.website .web-paar .web-highlight__titel { font-size: clamp(1.2rem, 1.7vw, 1.55rem); }
  /* Der Kranz kleiner, damit die Kachel nicht über die Hütte hinauswächst. */
  body.website .web-paar .web-highlight--weihnachtlich .workshop__kranz { width: min(55%, 11rem); }
  /* Hütte und Countdown untereinander statt nebeneinander — in der halben
     Breite ist für beides nebeneinander kein Platz. */
  body.website .web-paar .web-highlight--mit-zeichnung { display: flex; flex-direction: column; justify-content: center; }
  body.website .web-paar .web-huette { order: -1; width: min(70%, 15rem); margin: 0 auto 0.6rem; }
  body.website .web-paar .web-countdown__zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 22rem; }
}
/* Das Haus hinter der Hütte stand hier kurz (25.10.2026) und ist wieder weg
   (Jana: "gefällt mir doch nicht so gut"). */
body.website .web-huette .w2-huette { position: relative; z-index: 1; left: auto; bottom: auto; }
/* Der Satz unten mit dem Weg zu Instagram (25.10.2026). */
body.website .web-highlight__nachsatz { margin: 1rem 0 0; font-size: 0.95rem; opacity: 0.9; }
body.website .web-highlight__nachsatz a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
body.website .web-highlight--weihnachtlich .web-highlight__nachsatz a { color: #f0cf86; }
body.website .web-highlight--mit-zeichnung > .web-highlight__nachsatz { grid-column: 1 / -1; }

/* Ein Anlass mit Datum unter den Knöpfen, wie auf der Buchungsseite (Jana am
   29.10.2026) — Halloween in Grau und Orange. Siehe Buchungsanlass. */
.web-anlass {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.3rem;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  background: #2b2b2b;
  color: #f4f2e6;
  text-decoration: none;
}
.web-anlass__bild { position: relative; flex: none; width: 4.4rem; height: 3.2rem; }
.web-anlass__bild .kuerbis { position: absolute; left: 0; bottom: 0; width: 2.5rem; fill: none; stroke: #f05a2a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.web-anlass__bild .fledermaus { position: absolute; right: 0; top: 0; width: 2.8rem; overflow: visible; }
.web-anlass__bild .fledermaus path { fill: #141414; stroke: #f4f2e6; stroke-width: 2.6; stroke-linejoin: round; filter: drop-shadow(3px 3px 0 #f05a2a); }
.web-anlass__text { display: grid; gap: 0.1rem; min-width: 0; }
.web-anlass__etikett { color: #f05a2a; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.web-anlass__titel { color: #f05a2a; font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.web-anlass__weg { margin-top: 0.15rem; color: #f05a2a; font-size: 0.9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }

/* Die Reiter im Menüfenster (Jana am 29.10.2026): Menü und Karten stechen
   heraus — gelb, die gewählte dunkel —, die Allergene stehen leise rechts. */
body.website .web-fenster__reiterknopf:not(.web-fenster__reiterknopf--leise) {
  border-color: var(--web-pop, #ffc72c);
  background: var(--web-pop, #ffc72c);
  color: var(--mila-dunkel);
  font-size: 1rem;
  padding: 0.55rem 1.2rem;
}
body.website .web-fenster__reiterknopf:not(.web-fenster__reiterknopf--leise)[aria-selected="true"] {
  border-color: var(--mila-dunkel);
  background: var(--mila-dunkel);
  color: var(--web-pop, #ffc72c);
}
body.website .web-fenster__reiterknopf--leise {
  margin-left: auto;
  border-color: rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.55);
  font-weight: 600;
}
body.website .web-fenster__reiterknopf--leise[aria-selected="true"] { border-color: var(--mila-dunkel); background: transparent; color: var(--mila-dunkel); }

/* Freunde auf dem Weg ins MILA. (Jana am 29.10.2026) — siehe website/_gang.
   Auf dem Telefon schmaler Ausschnitt, damit die Leute groß genug bleiben;
   ab Tablet die ganze Altstadt. Der Strich bleibt auf jeder Breite gleich
   dick. */
.web-gang__bild {
  display: block;
  width: 100%;
  aspect-ratio: 520 / 340;
  overflow: hidden;
}

@media (min-width: 700px) {
  .web-gang__bild {
    aspect-ratio: 1200 / 340;
  }
}

.web-gang__linie {
  fill: none;
  stroke: var(--mila-text);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.web-gang__linie--fein {
  stroke-width: 1.5;
}

.web-gang__wand {
  fill: #f2c9c4;
}

.web-gang__schild {
  fill: var(--mila-bg);
  stroke: var(--mila-text);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}