/*
 * 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;
}

/* Der lange Tag ist der, nach dem gefragt wird. Als Pille und nicht nur in
   einer anderen Farbe: In einer Liste aus Zahlen sieht man eine Fläche zuerst. */
.web-woche__lang 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 {
    grid-template-columns: 1.05fr 0.95fr;
  }

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

  .web-zeile {
    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;
  }
}