/* WLAN 2.0 lädt nur dieses Stilblatt (layouts/wlan2, 12.10.2026) — deshalb
   stehen Schriften und Lichterkette hier noch einmal, statt aus den Stilen der
   ganzen Anwendung zu kommen. Dieselben Dateien, nichts von außen. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/bricolage-grotesque-800-latin-78692770.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/schibsted-grotesk-latin-1061523f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* WLAN 2.0 (Jana am 12.10.2026): die Seite beim WLAN-Login im Look der neuen
   Website. Fürs Telefon in einer Hand — große Flächen, nichts nachzuladen,
   kein Skript. Alles unter body.wlan2, damit die alte Seite (wlan.css) und
   die Website unberührt bleiben. */

body.wlan2 {
  --wl2-nacht: #121b3b;
  --wl2-tief: #1a2550;
  --wl2-orange: #f05a2a;
  --wl2-orange-hell: #f68457;
  --wl2-gelb: #fce89e;
  --wl2-creme: #fdf3cf;
  --wl2-leise: rgb(253 243 207 / 0.75);
  --wl2-linie: rgb(253 243 207 / 0.16);
  --wl2-ecke: 22px;

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

.wl2 {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
}

/* Oben die Lichterkette von unserer Tür, über die ganze Breite. */
.wl2 .wl2__kette { margin: 0 -1.25rem; max-height: none; }

.wl2-kopf { display: grid; gap: 0.5rem; margin-top: 0.4rem; }

/* Dasselbe Logo wie überall, hier hell gefärbt. */
.wl2-kopf__logo { align-self: start; width: auto; height: 2.6rem; filter: brightness(0) invert(1); }

.wl2-gruss {
  margin: 0.4rem 0 0;
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 9vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.wl2-heute { display: flex; align-items: center; gap: 0.55rem; margin: 0; color: var(--wl2-gelb); font-weight: 700; }
.wl2-heute__punkt { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--wl2-gelb); box-shadow: 0 0 10px rgb(252 232 158 / 0.7); }

/* Die Wege: ganze Zeilen, mindestens 64 Pixel hoch. Die Bitte orange, die
   übrigen auf der tiefen Fläche, "Bleib dran" nur mit Linie. */
.wl2-wege { display: grid; gap: 0.7rem; }

.wl2-weg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: 0.9rem 1.15rem;
  box-sizing: border-box;
  border: 1px solid var(--wl2-linie);
  border-radius: var(--wl2-ecke);
  background: var(--wl2-tief);
  color: var(--wl2-creme);
  text-decoration: none;
}

.wl2-weg:active { transform: scale(0.99); }
.wl2-weg__wort { display: grid; gap: 0.15rem; }

.wl2-weg__titel {
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.wl2-weg__dazu { color: var(--wl2-leise); font-size: 0.95rem; }
/* Klein in Orange über dem Titel, wie "Jeden Donnerstag" bei den Events. */
.wl2-weg__etikett { display: block; color: var(--wl2-orange-hell); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.wl2-weg__pfeil { flex: none; color: var(--wl2-orange-hell); font-size: 1.4rem; }

/* Etwas größer, damit der Bogen oben die Schrift nicht anschneidet (Jana am
   14.10.2026). */
.wl2-weg--erst {
  min-height: 6.4rem;
  padding-top: 1.7rem;
  border-color: transparent;
  border-radius: 120px 120px var(--wl2-ecke) var(--wl2-ecke) / 40px 40px var(--wl2-ecke) var(--wl2-ecke);
  background: var(--wl2-orange);
}

.wl2-weg--erst .wl2-weg__titel { font-size: 1.4rem; }
.wl2-weg--erst .wl2-weg__dazu { color: var(--wl2-creme); }
.wl2-weg--erst .wl2-weg__pfeil { color: var(--wl2-creme); }

.wl2-wege--leise .wl2-weg { min-height: 3.5rem; background: transparent; }

.wl2-gruppe { display: grid; gap: 0.7rem; margin-top: 0.6rem; }

.wl2-gruppe__titel {
  margin: 0;
  color: var(--wl2-orange-hell);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Was gerade läuft: helle Karten mit Bild, wie die Kacheln der Website. */
.wl2-aktionen { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }

.wl2-aktion {
  display: grid;
  gap: 0.25rem;
  overflow: hidden;
  padding: 0 0 1rem;
  border-radius: var(--wl2-ecke);
  background: var(--wl2-creme);
  color: var(--wl2-nacht);
}

.wl2-aktion__bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 0.6rem; }
.wl2-aktion__titel { padding: 0 1.1rem; font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif; font-size: 1.2rem; font-weight: 800; }
.wl2-aktion:not(:has(.wl2-aktion__bild)) .wl2-aktion__titel { padding-top: 1rem; }
.wl2-aktion__text { padding: 0 1.1rem; color: rgb(18 27 59 / 0.78); }

/* Die Events wie auf der Website (Jana am 14.10.2026): wann klein in Orange,
   darunter groß der Name und ein Satz. */
.wl2-events__liste { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.wl2-event {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgb(253 243 207 / 0.18);
  border-radius: var(--wl2-ecke);
}
.wl2-event__wann { color: var(--wl2-orange-hell, #f68457); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.wl2-event__titel { font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif; font-size: 1.2rem; font-weight: 800; }
.wl2-event__satz { color: var(--wl2-leise); }

.wl2-fuss { margin: auto 0 0; padding-top: 1.5rem; color: var(--wl2-leise); font-size: 0.85rem; text-align: center; }

/* Der Newsletter zum Eintragen (Jana am 12.10.2026) — per E-Mail, eigens
   gekennzeichnet gegen den WhatsApp-Kanal darüber. */
.wl2 .nl-formular { display: grid; gap: 0.45rem; margin-top: 0.4rem; padding: 1.1rem; border: 1px dashed rgb(253 243 207 / 0.35); border-radius: var(--wl2-ecke); }
.wl2 .nl-formular__titel { margin: 0; font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif; font-size: 1.2rem; font-weight: 800; }
.wl2 .nl-formular__satz,
.wl2 .nl-formular__klein { margin: 0; color: var(--wl2-leise); }
.wl2 .nl-formular__klein { font-size: 0.85rem; }
.wl2 .nl-formular__klein a { color: var(--wl2-creme); }
.wl2 .nl-formular__fehler { margin: 0; color: var(--wl2-gelb); font-weight: 700; }
.wl2 .nl-formular__zeile { display: grid; gap: 0.5rem; margin-top: 0.3rem; }
.wl2 .nl-formular__feld { min-height: 3.2rem; padding: 0 1rem; box-sizing: border-box; border: 1px solid var(--wl2-linie); border-radius: 999px; background: var(--wl2-tief); color: var(--wl2-creme); font: inherit; font-size: 1rem; }
.wl2 .nl-formular__knopf { min-height: 3.2rem; border: 0; border-radius: 999px; background: var(--wl2-orange); color: var(--wl2-creme); font: inherit; font-size: 1.05rem; font-weight: 700; }

/* Unsichtbar für Menschen, lesbar für Bildschirmleser bzw. für Programme. */
.nl-formular__unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nl-formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Die Seiten nach dem Eintragen und Bestätigen: ein Satz, ein Knopf. */
.wl2--mitte { gap: 1.2rem; }
.wl2-satz { margin: 0; color: var(--wl2-leise); font-size: 1.05rem; }
.wl2-weg--leise { background: transparent; justify-content: center; }
.wl2-formular { display: grid; }
.wl2-knopf { width: 100%; font: inherit; font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif; font-size: 1.3rem; font-weight: 800; justify-content: center; cursor: pointer; }

/* Newsletter: die Beschriftung über jedem Feld, immer sichtbar (12.10.2026). */
.wl2 .nl-formular__gruppe { display: grid; gap: 0.3rem; }
.wl2 .nl-formular__beschriftung { color: var(--wl2-creme); font-size: 0.9rem; font-weight: 700; }

/* Die Lichterkette oben — ruhig, ohne Flackern (12.10.2026). */
.wl2 .w2-lichterkette { display: block; width: 100%; height: auto; max-height: 62px; }
.wl2 .w2-lichterkette__draht { stroke: #05081a; stroke-width: 2; vector-effect: non-scaling-stroke; }
.wl2 .w2-lichterkette__fassung { fill: #05081a; }
.wl2 .w2-lichterkette__glas { fill: rgb(255 214 140 / 0.55); stroke: rgb(255 236 200 / 0.6); stroke-width: 0.8; }
.wl2 .w2-lichterkette__gluehdraht { stroke: #ffc45c; stroke-width: 1.4; }
.wl2 .w2-lichterkette__birne { filter: drop-shadow(0 2px 5px rgb(255 190 90 / 0.7)); }

/* Unten: zur Website, Adresse, Sonne und Mond. */
.wl2-fuss { display: grid; justify-items: center; gap: 0.6rem; }
.wl2-fuss p { margin: 0; }
.wl2-fuss__website { color: var(--wl2-creme); font-weight: 700; text-underline-offset: 0.25em; }

.wl2-zeitwahl { display: none; gap: 0.3rem; padding: 0.25rem; border-radius: 999px; background: rgb(255 255 255 / 0.06); }
.wl2-js .wl2-zeitwahl { display: flex; }
.wl2-zeitwahl button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--wl2-creme); cursor: pointer; }
.wl2-zeitwahl svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wl2-zeitwahl button[aria-pressed="true"] { background: var(--wl2-creme); color: var(--wl2-nacht); }
.wl2 :focus-visible { outline: 3px solid var(--wl2-gelb); outline-offset: 3px; }

/* Tagsüber eine Spur heller, wie drinnen auf der Website — dieselben Farben. */
/* Wie die Website tagsüber frischer, zwischen Nachtblau und Kobalt (Jana am
   13.10.2026). */
html.w2-zeit--tag body.wlan2 { background: #1b3080; }
html.w2-zeit--tag .wl2-weg:not(.wl2-weg--erst) { background: #22378a; }
html.w2-zeit--tag .wl2-wege--leise .wl2-weg { background: transparent; }
html.w2-zeit--tag .wl2-heute { color: var(--wl2-creme); }

/* Das Martiniglas rechts in der Karte (Jana am 14.10.2026). */
.wl2-event--zeichen { position: relative; padding-right: 4.2rem; }
.wl2-event--zeichen .eventzeichen { position: absolute; top: 50%; right: 1.1rem; transform: translateY(-50%); }
.eventzeichen { width: 2.4rem; height: auto; fill: none; stroke: var(--wl2-creme); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eventzeichen__olive { fill: #8fae5a; stroke-width: 1.6; }