/* Die Seite, die beim WLAN-Login aufgeht.
 *
 * Fürs Telefon gebaut und für nichts sonst: Sie erscheint im kleinen Fenster,
 * das iOS und Android dafür aufmachen — kein echter Browser, oft ohne
 * JavaScript und ohne Schriften von außen. Deshalb Systemschrift, keine
 * Verläufe zum Nachladen, keine Bilder.
 *
 * Dunkel, während beide Websites creme sind: Sie soll sich anfühlen wie der
 * Abend im Laden und nicht wie eine dritte Startseite.
 *
 * Alle Stile der Anwendung werden auf jeder Seite geladen — deshalb hängt alles
 * an body.wlan und trägt eigene Namen (w-). */

body.wlan {
  /* Aus dem Haus und nicht mehr frei erfunden: Diese Töne sind hier entstanden
   * und stehen jetzt in kitchen.css bei den übrigen Hausfarben. Dieselbe Nacht
   * trägt künftig alles, was einen Gast empfängt. */
  --w-grund: var(--mila-nacht);
  --w-flaeche: var(--mila-nacht-flaeche);
  --w-linie: var(--mila-nacht-linie);
  --w-text: var(--mila-bg);
  --w-text-leise: var(--mila-nacht-leise);
  --w-signal: var(--mila-gast);
  --w-signal-tief: var(--mila-nacht);

  margin: 0;
  background: var(--w-grund);
  color: var(--w-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* dvh und nicht vh: Auf dem iPhone rechnet vh die Browserleiste nicht mit, und
 * die letzte Zeile lag unter dem Rand. */
.wlan {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.4rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Das Logo liegt als schwarze Zeichnung auf Transparent vor. brightness(0)
 * macht jedes Pixel schwarz, invert(1) danach weiß — so trägt dieselbe Datei
 * beide Gründe, und niemand muss eine zweite pflegen. Dieselbe Rechnung wie
 * auf der Allergenseite. */
.wlan__logo {
  display: block;
  /* Die Seite ist eine Flex-Spalte, und ein Bild darin wird sonst auf die volle
   * Breite gedehnt, während die Höhe stehen bleibt: Das Logo lag einmal quer
   * gezogen oben. Einem Logo darf das nie passieren — es ist eine Zeichnung mit
   * festem Verhältnis und kein Kasten, den man füllt. */
  align-self: flex-start;
  width: auto;
  height: 2.8rem;
  filter: brightness(0) invert(1);
}

.wlan__gruss {
  margin-top: 0.5rem;
}

.wlan__hallo {
  margin: 0;
  font-size: clamp(2rem, 9vw, 2.6rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.wlan__frage {
  margin: 0.6rem 0 0;
  color: var(--w-text-leise);
  font-size: 1.05rem;
}

.wlan__wege {
  display: grid;
  gap: 0.7rem;
}

/* Eine ganze Zeile je Weg: Das ist ein Telefon in einer Hand, oft mit einem
 * Getränk in der anderen. Unter 64 Pixeln trifft man daneben. */
.wlan-weg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding: 1rem 1.15rem;
  border: 1px solid var(--w-linie);
  border-radius: 16px;
  background: var(--w-flaeche);
  color: var(--w-text);
  text-decoration: none;
}

.wlan-weg:active {
  background: #262a1d; /* eine Spur heller als die Fläche, nur beim Antippen */
}

/* Die Bitte steht oben und trägt als Einzige das Signalgelb: Wer eine zweite
 * gelbe Fläche daneben stellt, hat keine Bitte mehr, sondern zwei Knöpfe. */
.wlan-weg--bitte {
  border-color: var(--w-signal);
  background: var(--w-signal);
  color: var(--w-signal-tief);
}

.wlan-weg--bitte:active {
  background: color-mix(in srgb, var(--w-signal) 88%, #000);
}

.wlan-weg--bitte .wlan-weg__dazu {
  color: var(--mila-gast-tief);
}

.wlan-weg__wort {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.wlan-weg__titel {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.wlan-weg__dazu {
  color: var(--w-text-leise);
  font-size: 0.9rem;
  line-height: 1.3;
}

.wlan-weg__pfeil {
  flex-shrink: 0;
  font-size: 1.2rem;
  opacity: 0.6;
}

.wlan-aktionen {
  margin-top: 0.4rem;
}

/* Die Überschrift einer Gruppe: klein, leise, in Versalien. Sie ordnet, sie
 * ruft nicht — was ruft, ist der gelbe Knopf weiter oben. */
.wlan-gruppe__titel {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w-text-leise);
}

.wlan-gruppe {
  margin-top: 0.4rem;
}

.wlan-aktionen__titel {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w-text-leise);
}

.wlan-aktionen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

/* Kein Knopf: Eine Aktion führt nirgendwohin, sie sagt etwas. Sähe sie aus wie
 * die Wege darüber, tippte man darauf und nichts geschähe. */
.wlan-aktion {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.15rem;
  border-left: 3px solid var(--w-signal);
  border-radius: 0 12px 12px 0;
  background: var(--w-flaeche);
}

.wlan-aktion__titel {
  font-size: 1.05rem;
  font-weight: 700;
}

.wlan-aktion__text {
  color: var(--w-text-leise);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Ganz unten und leise: Wer hier sitzt, weiß, wo er ist. Die Anschrift steht
 * da, damit man sie weiterschicken kann. */
.wlan__fuss {
  margin: auto 0 0;
  padding-top: 1.5rem;
  color: var(--w-text-leise);
  font-size: 0.85rem;
}

/* Das Bild einer Aktion.
 *
 * contain und nicht cover: Ein Produktfoto vom Lieferanten ist freigestellt
 * oder steht auf Weiß — beschnitten fehlte dem Spritzbaum die Spitze. Eine feste
 * Höhe, damit zwei Aktionen untereinander gleich groß wirken, auch wenn ihre
 * Fotos verschieden zugeschnitten sind. */
.wlan-aktion__bild {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 0.5rem;
}