/*
 * Der Entwurf unter /website2 — ein kleiner digitaler Besuch bei uns.
 *
 * Man steht vor dem Haus (rosa Fassade, Lichterkette über der Tür), wird mit
 * "Komm rein" eingeladen, die Tür geht auf, und drinnen führt die
 * Lichterkette durch die Seite. Die Gewölbebögen aus dem Café tragen die
 * Bilder und gliedern die Seite.
 *
 * Aufgeräumt am 11.10.2026 (Jana: "keinen Relaunch, das Konzept
 * konsequent weiterentwickeln"): Farben, Abstände, Ecken und Schriftgrößen
 * als feste Werte oben; dann draußen, drinnen, Laufband, Abschnitte.
 * Mobil zuerst, fließend mit clamp(), svh und %; ab 48rem Tablet, ab 60rem die
 * senkrechte Kette links.
 *
 * Eigene Namen (w2-) und eigene Body-Klasse: Alle Stile der Anwendung werden auf
 * jeder Seite geladen. Der alte Auftritt unter /website bleibt, wie er ist.
 */

/* Die Schrift liegt im Haus (app/assets/fonts) und wird nicht von Google
   geholt: Ein Gast soll die Seite ansehen können, ohne dass seine Adresse dabei
   woandershin geht. */

@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: "Bricolage Grotesque";
  src: url("/assets/bricolage-grotesque-800-latin-ext-2186fff6.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Feste Werte ------------------------------------------------------------ */

/* Die Höhe des festen Laufbands oben. Auf der Wurzel, weil auch das
   Einrasten (scroll-padding) sie braucht. */
/* Am Handy nur die Statuszeile, ohne das bewegte Band (Jana am 12.10.2026:
   "auf der Handy-Ansicht braucht es das Laufband nicht"). */
html:has(body.website2) { --w2-band: 3.4rem; }
@media (max-width: 47.99rem) {
  body.website2 .w2-laufband__band { display: none; }
}
/* Am Handy hängt darunter noch die Lichterkette (1.9rem) — der Inhalt rückt
   entsprechend tiefer (Jana am 15.10.2026). */
@media (max-width: 59.99rem) {
  html:has(body.website2) { --w2-band: calc(3.4rem + 1.9rem); }
}

body.website2 {
  /* Farben aus Janas Palette — Dunkelblau als Raum, Orange als Signal. */
  --w2-nacht: #121b3b;
  --w2-tiefer: #0c1330;
  --w2-tief: #1a2550;
  --w2-blau: #22305f;
  --w2-orange: #f05a2a;
  --w2-orange-hell: #f68457;
  --w2-rot: #d22f2c;
  --w2-gelb: #fce89e;
  --w2-creme: #fdf3cf;
  --w2-weiss: #fffdf8;
  --w2-rosa: #e8a39a;
  --w2-licht: #ffc45c;
  --w2-leise: rgb(253 243 207 / 0.8);
  --w2-linie: rgb(253 243 207 / 0.14);

  /* Abstände: der Rand zur Seite, der Atem zwischen Abschnitten, die Luft in
     einer Kachel. */
  --w2-rand: clamp(1rem, 4vw, 3rem);
  --w2-abstand: clamp(2.25rem, 6vw, 4.5rem);
  --w2-luft: clamp(1.15rem, 3.5vw, 2rem);

  /* Ecken und der Bogen — die Form aus unserem Gewölbe. */
  --w2-ecke: 22px;
  --w2-bogen: 999px 999px var(--w2-ecke) var(--w2-ecke);

  /* Was fest am Rand steht: auf dem Handy unten die Kette, ab 60rem links. */
  --w2-unten: calc(4.4rem + env(safe-area-inset-bottom, 0px));
  --w2-leiste: 0px;

  margin: 0;
  background: var(--w2-nacht);
  color: var(--w2-creme);
  font-family: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.08rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body.website2 h1,
body.website2 h2,
body.website2 h3,
.w2-neon p {
  margin: 0;
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

body.website2 p { margin: 0; }
body.website2 h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); margin-block: 0.2rem 0.5rem; }
body.website2 h3 { font-size: clamp(1.2rem, 2.4vw, 1.4rem); }

body.website2 :focus-visible { outline: 3px solid var(--w2-gelb); outline-offset: 3px; }

/* Helle Flächen auf dem dunklen Grund: dunkle Schrift, dunkle Linien. */
.w2-hell {
  --w2-leise: rgb(26 37 80 / 0.8);
  --w2-linie: rgb(26 37 80 / 0.14);
  color: var(--w2-tief);
}

/* Bausteine --------------------------------------------------------------- */

.w2-etikett {
  margin-bottom: 0.35rem !important;
  color: var(--w2-orange-hell);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.w2-hell .w2-etikett { color: var(--w2-orange); }

.w2-satz { max-width: 36rem; margin-top: 0.6rem !important; color: var(--w2-leise); }

.w2-wege { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }

/* Ein Knopf in einer Größe: voll in Orange für das Wichtigste, mit Linie für
   den zweiten Weg, hell auf farbigen Flächen. */
.w2-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.65rem 1.25rem;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--w2-orange);
  color: var(--w2-creme);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.w2-knopf:hover { transform: translateY(-1px); }
.w2-knopf--linie { background: transparent; border-color: rgb(253 243 207 / 0.6); color: var(--w2-creme); }
.w2-knopf--linie:hover { border-color: var(--w2-creme); }
.w2-hell .w2-knopf--linie { border-color: var(--w2-tief); color: var(--w2-tief); }
.w2-knopf--hell { background: var(--w2-creme); color: var(--w2-nacht); }

/* Eine Kachel: dunkel, mit feiner Linie; hell als Abwechslung; orange für das,
   was laut sein darf. */
.w2-kachel {
  padding: var(--w2-luft);
  border: 1px solid var(--w2-linie);
  border-radius: var(--w2-ecke);
  background: var(--w2-tief);
}

.w2-kachel.w2-hell { border-color: transparent; background: var(--w2-weiss); }
.w2-kachel--orange { border-color: transparent; background: var(--w2-orange); color: var(--w2-creme); }
.w2-kachel--orange .w2-etikett,
.w2-kachel--orange .w2-satz { color: var(--w2-creme); }
.w2-kachel--leise { background: transparent; border-style: dashed; border-color: rgb(253 243 207 / 0.3); }

/* Der Bogen als Rahmen — für die Skizzen und Bilder, nie für Text. */
.w2-bogen {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 3 / 4.4;
  border-radius: var(--w2-bogen);
  background: var(--w2-tief);
}

.w2-bogen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Draußen ---------------------------------------------------------------- */

/* Stil: Scherenschnitt (Jana am 11.10.2026). Jede Fläche wie aus Papier
   geschnitten und leicht erhaben — flach, mit hartem Schatten statt Glanz.
   Ausgeschnittenes (Fenster, Bogen) wirft den Schatten nach innen. */
.w2-fassade {
  --w2-schnitt: #0a1028;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--w2-creme) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, var(--w2-creme) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 24%, var(--w2-creme) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 6%, var(--w2-creme) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 30%, var(--w2-creme) 50%, transparent 51%),
    var(--w2-nacht);
}

/* Oben dezent: heute, und die Direktzugriffe. Klein und ohne Kasten, damit die
   Fassade die Bühne behält. */
.w2-fassade__kopf {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.2rem;
  padding: clamp(0.7rem, 2svh, 1.1rem) var(--w2-rand);
  font-size: 0.88rem;
}

.w2-fassade__gruss {
  flex: 1 0 100%;
  margin: 0 0 0.15rem;
  color: var(--w2-creme);
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.w2-fassade--echt.w2-fassade--tag .w2-fassade__gruss { color: var(--w2-nacht); }

.w2-fassade__heute {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.9rem;
  margin: 0;
  color: var(--w2-gelb);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
  font-weight: 700;
}

/* Der Status wie im Laufband: Punkt, und groß, ob gerade offen ist. */
.w2-fassade__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.w2-fassade__punkt { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; opacity: 0.45; }
.w2-fassade__status--offen .w2-fassade__punkt { background: var(--w2-orange); opacity: 1; box-shadow: 0 0 10px rgb(240 90 42 / 0.8); }
/* Auch die Schrift: der Status orange, die Zeile darunter creme — kein Gelb
   mehr (Jana am 12.10.2026). */
.w2-fassade--nacht .w2-fassade__heute { color: var(--w2-creme); }
.w2-fassade--nacht .w2-fassade__status { color: var(--w2-orange-hell); }
.w2-fassade__zeit { font-weight: 600; opacity: 0.9; }

/* Die Gasse: euer Haus in der Mitte, die Nachbarn nur angedeutet daneben. Sie
   ist es, die beim Hineingehen näher kommt. */
.w2-gasse {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  width: 100%;
  min-height: 0;
  transform-origin: 50% 80%;
  transition: transform 1.6s cubic-bezier(0.55, 0, 0.3, 1) 1.4s, opacity 0.8s ease 2.3s;
}

.w2-gasse--auf { transform: scale(2.4); opacity: 0; }

.w2-haus {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: clamp(0.9rem, 3.5svh, 1.8rem);
  flex: 0 0 min(84vw, 520px);
  height: 100%;
  padding: clamp(1rem, 3.5svh, 2rem) 7% 0;
  box-sizing: border-box;
  background: var(--w2-rosa);
  filter: drop-shadow(4px 4px 0 var(--w2-schnitt));
}

.w2-haus__fenster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 2.2svh, 1.3rem) 26%;
  padding-inline: 14%;
}

.w2-haus__fenster span {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  justify-self: center;
  width: min(85%, 9svh);
  background: var(--w2-nacht);
  box-shadow: inset 4px 4px 0 var(--w2-schnitt);
}

/* Die Sprossen: stehen gebliebene Stege der Wand. Sie liegen über allem,
   auch über Jana und Michi dahinter. */
.w2-haus__fenster span::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(var(--w2-rosa), var(--w2-rosa)) 50% 0 / 4px 100% no-repeat,
    linear-gradient(var(--w2-rosa), var(--w2-rosa)) 0 38% / 100% 4px no-repeat;
}


/* Jana und Michi hinter der Scheibe: dunkle Silhouetten, Michis Cap orange. */
.w2-figur { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; fill: var(--w2-nacht); stroke: var(--w2-nacht); stroke-width: 0; }
.w2-figur__arm path { fill: none; }
.w2-figur__cap,
.w2-figur__gummi { fill: var(--w2-orange); }

/* Die Pflanze im dunklen Fenster, grün mit Terrakottatopf. */
.w2-pflanze { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.w2-pflanze__blatt { fill: #4f8a6e; }
.w2-pflanze__topf { fill: #c97e76; }

@media (prefers-reduced-motion: no-preference) {
  .w2-figur__arm { transform-box: fill-box; transform-origin: 100% 100%; animation: w2-winken 4s ease-in-out infinite; }
}

@keyframes w2-winken {
  0%, 60%, 100% { transform: rotate(0); }
  70%, 90% { transform: rotate(-14deg); }
  80% { transform: rotate(6deg); }
}

/* Solange offen ist, brennt Licht. Ein Fenster bleibt dunkel, sonst sähe es
   aus wie gemalt. */
.w2-haus--offen .w2-haus__fenster span:not(:nth-child(3)),
.w2-haus__fenster .w2-fenster--besetzt {
  background: var(--w2-gelb);
  box-shadow: inset 4px 4px 0 #d9b864;
}

.w2-haus__schild {
  display: flex;
  justify-content: center;
  margin-inline: calc(-7% / 0.86);
  padding: clamp(0.5rem, 1.6svh, 0.9rem);
  background: var(--w2-creme);
  filter: drop-shadow(4px 4px 0 var(--w2-schnitt));
}

.w2-haus__logo { width: auto; height: clamp(1.8rem, 5svh, 2.6rem); }

.w2-haus__bogen {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 9%;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  background: #c97e76;
  box-shadow: inset 5px 5px 0 rgb(10 16 40 / 0.45);
}

.w2-tuer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 74%;
  color: var(--w2-creme);
  text-decoration: none;
}

.w2-tuer:focus-visible { outline: none; }
.w2-tuer__kette.w2-lichterkette { position: absolute; top: -26px; left: -12%; width: 124%; }

/* Die Glastür: zwei Flügel vor warmem Licht. Beim Hineingehen schwingen sie
   auf — mit Perspektive, wie eine echte Tür —, und das Licht wird hell. */
.w2-tuer__glas {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  flex: 1;
  width: 100%;
  margin-top: 30px;
  padding: 5px 5px 0;
  box-sizing: border-box;
  border: 3px solid #b06d66;
  border-bottom: 0;
  background: var(--w2-nacht);
  perspective: 700px;
}

.w2-tuer__licht {
  position: absolute;
  inset: 5px 5px 0;
  background: var(--w2-licht);
  opacity: 0.45;
  transition: opacity 0.5s ease;
  animation: w2-glimmen 4.5s ease-in-out infinite;
}

.w2-tuer__fluegel {
  position: relative;
  background: var(--w2-nacht);
  box-shadow: inset 3px 3px 0 var(--w2-schnitt);
  transition: transform 2s cubic-bezier(0.45, 0, 0.25, 1);
}

.w2-tuer__fluegel--links { transform-origin: left center; }
.w2-tuer__fluegel--rechts { transform-origin: right center; }

/* Ein Griff je Flügel, zur Mitte hin. */
.w2-tuer__fluegel::after {
  content: "";
  position: absolute;
  top: 46%;
  width: 3px;
  height: 14%;
  border-radius: 2px;
  background: #c97e76;
}

.w2-tuer__fluegel--links::after { right: 8px; }
.w2-tuer__fluegel--rechts::after { left: 8px; }

.w2-tuer:hover .w2-tuer__licht,
.w2-tuer:focus-visible .w2-tuer__licht { opacity: 0.8; }

.w2-gasse--auf .w2-tuer__fluegel--links { transform: rotateY(-80deg); }
.w2-gasse--auf .w2-tuer__fluegel--rechts { transform: rotateY(80deg); }
.w2-gasse--auf .w2-tuer__licht { opacity: 1; animation: none; }

@keyframes w2-glimmen {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.65; }
}

.w2-tuer:focus-visible .w2-tuer__glas { outline: 3px solid var(--w2-gelb); outline-offset: 4px; }

/* Die Nachbarn: dieselbe Arkade, nur angedeutet. */
.w2-nachbar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, clamp(1.6rem, 5vw, 3.6rem)));
  grid-auto-rows: clamp(2.6rem, 10svh, 5rem);
  align-content: start;
  justify-content: space-evenly;
  gap: clamp(1rem, 4svh, 2rem) clamp(0.8rem, 3vw, 2.4rem);
  flex: 1 1 0;
  min-width: 0;
  height: 88%;
  padding: clamp(1rem, 4svh, 2rem) clamp(0.8rem, 3vw, 2.4rem) 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #2b3a6e;
  filter: drop-shadow(3px 3px 0 var(--w2-schnitt));
}

.w2-nachbar--rechts { height: 86%; background: #33427a; }
.w2-nachbar span { background: var(--w2-nacht); box-shadow: inset 3px 3px 0 var(--w2-schnitt); }
.w2-nachbar span:nth-child(3n + 2) { background: #c9ad6b; box-shadow: inset 3px 3px 0 #a38a50; }

.w2-nachbar::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 44%;
  border-radius: 999px 999px 0 0;
  background: var(--w2-nacht);
  box-shadow: inset 4px 4px 0 var(--w2-schnitt);
}

/* Der Boden vor dem Haus: leer, damit die Tür in der Mitte steht. */
.w2-boden {
  flex: none;
  width: 100%;
  height: clamp(3rem, 11svh, 7rem);
  background: #1a2550;
  box-shadow: 0 -3px 0 var(--w2-schnitt);
}

/* Bauhaus — die gewählte Fassade (Jana am 12.10.2026); ohne die Klasse
   (?stil=scherenschnitt) bleibt der Scherenschnitt darunter. Dieselbe
   Fassade aus klaren Flächen — keine Schatten, keine Linien, wenige starke
   Farben: der Bogen orange, die Tür gelbes Licht, das Schild dunkel. */
.w2-fassade--bauhaus { background: var(--w2-nacht); }
.w2-fassade--bauhaus .w2-haus,
.w2-fassade--bauhaus .w2-haus__schild,
.w2-fassade--bauhaus .w2-nachbar { filter: none; }
.w2-fassade--bauhaus .w2-haus .w2-haus__fenster span { box-shadow: none; }
.w2-fassade--bauhaus .w2-haus__fenster span::after {
  background:
    linear-gradient(var(--w2-nacht), var(--w2-nacht)) 50% 0 / 4px 100% no-repeat,
    linear-gradient(var(--w2-nacht), var(--w2-nacht)) 0 38% / 100% 4px no-repeat;
}
.w2-fassade--bauhaus .w2-haus__schild { background: var(--w2-nacht); }
.w2-fassade--bauhaus .w2-haus__logo { filter: invert(1); }
.w2-fassade--bauhaus .w2-haus__bogen { border-radius: 999px 999px 0 0; background: var(--w2-orange); box-shadow: none; }
.w2-fassade--bauhaus .w2-tuer__glas { border-color: var(--w2-orange); background: var(--w2-gelb); }
.w2-fassade--bauhaus .w2-tuer__fluegel { background: var(--w2-gelb); box-shadow: none; }
.w2-fassade--bauhaus .w2-tuer__fluegel::after { background: var(--w2-orange); }
.w2-fassade--bauhaus .w2-nachbar,
.w2-fassade--bauhaus .w2-nachbar--rechts { background: var(--w2-blau); }
.w2-fassade--bauhaus .w2-nachbar span { background: var(--w2-nacht); box-shadow: none; }
.w2-fassade--bauhaus .w2-nachbar span:nth-child(3n + 2) { background: var(--w2-gelb); }
.w2-fassade--bauhaus .w2-nachbar::after { background: var(--w2-nacht); box-shadow: none; }
.w2-fassade--bauhaus .w2-boden { background: var(--w2-orange); box-shadow: none; }

/* Die Zeilen unter dem Hero: jede für sich, wie Jana sie gesetzt hat. */
.w2-hero-unter span { display: block; text-wrap: balance; }

/* "Wie echt" (Jana am 12.10.2026): dieselbe Fassade in euren echten Farben und
   Proportionen — weiße Rahmen mit Sprossen und Fensterbank, das weiße Schild,
   der Bogen als Arkade mit Ladenfront, Pflaster, die Nachbarn in Altstadt-
   farben, davor die Terrasse. Bei Tag und bei Nacht, nach der Sonne in
   Landshut (Sonnenstand). Flach, ohne Papierschatten: erwachsen, nicht verspielt. */
.w2-fassade--echt.w2-fassade--tag {
  --e-himmel: #dfe9f1;
  --e-wand: #e8a39a;
  --e-gesims: #f3c3b9;
  --e-rahmen: #fbfaf6;
  --e-glas: #a9c2d8;
  --e-licht: #a9c2d8;
  --e-figur: 0.32;
  --e-schild: #fbfaf6;
  /* Der Bogen eine Spur dunkler als die helle Ladenfront, damit er sich
     abhebt. */
  --e-arkade: #ddd0bb;
  /* Die Ladenfront um die Tür ist in echt hell (Jana am 13.10.2026). */
  --e-laden: #f8f4ec;
  --e-tuerglas: #5d6779;
  --e-innen: #6b6f7a;
  --e-tuerrahmen: #8a93a3;
  /* Dunkler, damit man die Griffe erkennt (Jana am 13.10.2026). */
  --e-griff: #1c2130;
  --e-nachbar1: #b9c8bb;
  --e-nachbar2: #e6d3a8;
  --e-nglas: #c6d6e4;
  --e-nlicht: #c6d6e4;
  --e-nbogen: #7d8597;
  --e-boden: #c9c6bf;
  --e-fuge: #b3afa6;
  --e-schirm: #f4efe2;
  --e-rippe: #d8d1bf;
  --e-mast: #e9e4d6;
  --e-moebel: #5b5348;
  --e-topf: #c97e76;
  --e-blatt: #5e8a6b;
  --e-tafel: #2e2f33;
  background: var(--e-himmel);
}

/* Nachts dasselbe Haus — nur die Lichtstimmung ändert sich (12.10.2026: "es
   bleibt immer derselbe Ort"). Die Farben vom Tag, leicht ins Abendblau
   gezogen; dazu dunkler Himmel, erleuchtete Fenster, warmer Laden. */
.w2-fassade--echt.w2-fassade--nacht {
  --e-abend: #121b3b;
  --e-wand: color-mix(in srgb, #e8a39a 80%, var(--e-abend));
  --e-gesims: color-mix(in srgb, #f3c3b9 80%, var(--e-abend));
  --e-rahmen: color-mix(in srgb, #fbfaf6 82%, var(--e-abend));
  --e-glas: #2a3155;
  --e-licht: #e2bf7f;
  --e-figur: 0.55;
  --e-schild: color-mix(in srgb, #fbfaf6 86%, var(--e-abend));
  --e-arkade: color-mix(in srgb, #ddd0bb 78%, var(--e-abend));
  /* Hell wie am Tag, nur abends — vom Licht der Kette warm angestrahlt. */
  --e-laden: color-mix(in srgb, color-mix(in srgb, #f8f4ec 88%, #e2bf7f) 80%, var(--e-abend));
  --e-tuerglas: #d4a868;
  --e-innen: #3a3036;
  --e-tuerrahmen: var(--e-arkade);
  --e-griff: #4a3820;
  --e-nachbar1: color-mix(in srgb, #b9c8bb 72%, var(--e-abend));
  --e-nachbar2: color-mix(in srgb, #e6d3a8 72%, var(--e-abend));
  --e-nglas: #2a3155;
  --e-nlicht: #d9bf86;
  --e-nbogen: color-mix(in srgb, #7d8597 60%, var(--e-abend));
  --e-boden: color-mix(in srgb, #c9c6bf 62%, var(--e-abend));
  --e-fuge: color-mix(in srgb, #b3afa6 55%, var(--e-abend));
  --e-schirm: color-mix(in srgb, #f4efe2 84%, var(--e-abend));
  --e-rippe: color-mix(in srgb, #d8d1bf 80%, var(--e-abend));
  --e-mast: color-mix(in srgb, #e9e4d6 80%, var(--e-abend));
  --e-moebel: color-mix(in srgb, #5b5348 80%, var(--e-abend));
  --e-topf: color-mix(in srgb, #c97e76 80%, var(--e-abend));
  --e-blatt: color-mix(in srgb, #5e8a6b 80%, var(--e-abend));
  --e-tafel: #2e2f33;
}

.w2-fassade--echt .w2-haus { position: relative; filter: none; background: var(--e-wand); }
/* Ohne Rosa, als Schatten (Jana am 13.10.2026, mit ?wand=schatten): das Haus
   als ruhige Silhouette in kühlem Blaugrau, eine Spur vor den Nachbarn —
   Fenster, Schild, Lichterkette und Tür behalten ihre Farben, damit die Tür
   der Mittelpunkt bleibt. */
.w2-fassade--echt.w2-fassade--schatten.w2-fassade--tag { --e-wand: #9ea8bc; --e-gesims: #b4bccc; }
.w2-fassade--echt.w2-fassade--schatten.w2-fassade--nacht { --e-wand: #363d6a; --e-gesims: #454c7c; }
.w2-fassade--echt .w2-haus .w2-haus__fenster span { background: var(--e-glas); box-shadow: inset 0 0 0 3px var(--e-rahmen), 0 5px 0 -1px var(--e-rahmen); }
.w2-fassade--echt.w2-fassade--nacht .w2-haus--offen .w2-haus__fenster span:not(:nth-child(3)),
.w2-fassade--echt.w2-fassade--nacht .w2-haus__fenster .w2-fenster--besetzt { background: var(--e-licht); box-shadow: inset 0 0 0 3px var(--e-rahmen), 0 5px 0 -1px var(--e-rahmen), 0 0 14px rgb(226 191 127 / 0.2); }
.w2-fassade--echt .w2-haus__fenster span::after {
  background:
    linear-gradient(var(--e-rahmen), var(--e-rahmen)) 50% 0 / 3px 100% no-repeat,
    linear-gradient(var(--e-rahmen), var(--e-rahmen)) 0 34% / 100% 3px no-repeat;
}
.w2-fassade--echt .w2-figur { opacity: var(--e-figur); }
/* Figuren und Pflanzen zurückhaltender (Jana am 12.10.2026: "etwas
   transparenter und damit weniger auffällig") — sie gehören zum Haus, sie
   sind nicht das Haus. */
.w2-fassade--echt .w2-pflanze,
.w2-fassade--echt .w2-terrasse__pflanze { opacity: calc(var(--e-figur) + 0.2); }
.w2-fassade--echt .w2-haus__schild { filter: none; background: var(--e-schild); box-shadow: 0 -5px 0 var(--e-gesims), 0 5px 0 var(--e-gesims); }
/* Moderner (Vorschlag vom 12.10.2026, von Jana übernommen): dasselbe Haus
   mit seinen Sprossen ("die gibt es auch wirklich"), feinere Rahmen, der
   Schriftzug als Leuchtschrift auf
   dunklem Grund statt auf der weißen Tafel, und oben die Sprache der Website —
   große Schrift, der Status als Chip, die Wege als Knöpfe. */
.w2-fassade--modern .w2-haus .w2-haus__fenster span { box-shadow: inset 0 0 0 2px var(--e-rahmen); }
.w2-fassade--modern.w2-fassade--nacht .w2-haus--offen .w2-haus__fenster span:not(:nth-child(3)),
.w2-fassade--modern.w2-fassade--nacht .w2-haus__fenster .w2-fenster--besetzt { box-shadow: inset 0 0 0 2px var(--e-rahmen), 0 0 18px rgb(226 191 127 / 0.25); }
.w2-fassade--modern .w2-haus__schild { background: var(--w2-nacht); box-shadow: none; }
.w2-fassade--modern .w2-haus__logo:not(.w2-haus__logo--leucht) { display: none; }
/* Tagsüber wie ein echtes Ladenschild (Jana am 13.10.2026): heller Grund,
   dunkle Schrift. Nachts wieder Nachtblau mit Leuchtschrift. */
.w2-fassade--modern.w2-fassade--tag .w2-haus__schild { background: var(--w2-creme); }
.w2-fassade--modern.w2-fassade--tag .w2-haus__logo:not(.w2-haus__logo--leucht) { display: block; }
.w2-fassade--modern.w2-fassade--tag .w2-haus__logo--leucht { display: none; }
.w2-fassade--modern.w2-fassade--tag .w2-haus__probename { color: var(--w2-nacht); }
.w2-fassade--modern.w2-fassade--nacht .w2-haus__logo--leucht {
  filter: drop-shadow(0 0 3px rgb(255 214 140 / 0.9)) drop-shadow(0 0 12px rgb(240 120 60 / 0.65));
}
/* Größer, damit der Gruß nicht untergeht (Jana am 13.10.2026). */
.w2-fassade--modern .w2-fassade__gruss { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.4rem); letter-spacing: -0.035em; line-height: 0.98; }
/* Der Zuruf klein über dem Gruß, wie die Etiketten drinnen. Ohne den
   modernen Stil (?stil=echt) bleibt er unsichtbar. */
.w2-fassade__zuruf { display: none; }
.w2-fassade--modern .w2-fassade__zuruf {
  display: block;
  flex: 1 0 100%;
  margin: clamp(0.4rem, 2svh, 1.4rem) 0 0;
  color: var(--w2-orange-hell);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.w2-fassade--modern.w2-fassade--tag .w2-fassade__zuruf { color: var(--w2-orange); }
.w2-fassade--modern .w2-fassade__zuruf + .w2-fassade__gruss { margin-top: 0.35rem; }

/* Der Gruß mittig, über dem Haus (Jana am 12.10.2026: "mittiger, sodass man
   das eher erkennt"), und ganz oben (Jana am 15.10.2026) — darunter, ob
   offen ist. */
.w2-fassade--modern .w2-fassade__gruss {
  margin: clamp(1.2rem, 5svh, 3rem) 0 clamp(0.2rem, 1.5svh, 0.8rem);
  text-align: center;
  text-wrap: balance;
}
.w2-fassade--modern .w2-fassade__heute { flex: 1 0 100%; justify-content: center; gap: 0.4rem 0.75rem; align-items: center; margin-top: 0.35rem; text-align: center; }
.w2-fassade--modern .w2-fassade__status { padding: 0.32rem 0.75rem; border-radius: 999px; background: rgb(253 243 207 / 0.12); font-size: 0.82em; }
.w2-fassade--modern.w2-fassade--tag .w2-fassade__status { background: rgb(18 27 59 / 0.08); }

/* Der Bogen ist ein Markenzeichen — kräftig gerahmt und rund, wie eure Arkade. */
.w2-fassade--echt .w2-haus__bogen {
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background: var(--e-laden);
  box-shadow: inset 0 0 0 clamp(8px, 1.6vw, 13px) var(--e-arkade), inset 0 0 0 calc(clamp(8px, 1.6vw, 13px) + 2px) color-mix(in srgb, var(--e-arkade) 70%, #121b3b);
}
.w2-fassade--echt .w2-tuer__glas { border-color: var(--e-tuerrahmen); background: var(--e-tuerglas); }
/* Die Tür beginnt unter der Lichterkette, die Kette hängt frei im Bogen und
   schneidet die Tür nicht (Jana am 12.10.2026). */
.w2-fassade--echt .w2-tuer__glas { margin-top: clamp(2.6rem, 6svh, 3.6rem); }
.w2-fassade--echt .w2-tuer__fluegel { background: var(--e-tuerglas); box-shadow: inset 0 0 0 1px var(--e-tuerrahmen); }
/* Hinter der Tür der Laden: bei Tag ohne Licht, bei Nacht warm, aber gedämpft
   (Jana am 12.10.2026: "ein bisschen zu grell"). Keine Streifen auf dem Glas.
   Die Wand um die Tür bleibt immer Dunkelblau, die Lichterkette leuchtet immer. */
/* Beim Öffnen kein grelles Licht, sondern ein ruhiger Raum (Jana am
   12.10.2026) — nachts warm-dunkel, tags gedämpft. */
.w2-fassade--echt .w2-tuer__licht { background: var(--e-innen); opacity: 1; animation: none; }
/* Oben die Zeile mit heute — bei Tag dunkel auf Hell. */
.w2-fassade--echt.w2-fassade--tag .w2-fassade__heute { color: var(--w2-nacht); }
.w2-fassade--echt .w2-tuer__fluegel::after { background: var(--e-griff); }
.w2-fassade--echt .w2-nachbar,
.w2-fassade--echt .w2-nachbar--rechts { filter: none; background: var(--e-nachbar1); }
.w2-fassade--echt .w2-nachbar--rechts { background: var(--e-nachbar2); }
.w2-fassade--echt .w2-nachbar span { background: var(--e-nglas); box-shadow: inset 0 0 0 3px var(--e-rahmen); }
.w2-fassade--echt .w2-nachbar span:nth-child(3n + 2) { background: var(--e-nlicht); box-shadow: inset 0 0 0 3px var(--e-rahmen); }
.w2-fassade--echt .w2-nachbar::after { background: var(--e-nbogen); box-shadow: none; }
.w2-fassade--echt .w2-boden {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, var(--e-fuge) 46px 48px),
    linear-gradient(var(--e-fuge), var(--e-fuge)) 0 40% / 100% 2px no-repeat,
    var(--e-boden);
  box-shadow: none;
}

/* Die Terrasse vor dem Haus — nur bei "wie echt". Sie liegt über der Fassade
   und lässt jeden Klick zur Tür durch. */
.w2-terrasse { display: none; }

.w2-fassade--echt .w2-terrasse {
  position: absolute;
  right: -16%;
  bottom: 0;
  left: -16%;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.w2-terrasse svg { display: block; width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.w2-terrasse__dach { fill: var(--e-schirm); }
.w2-terrasse__rippe { stroke: var(--e-rippe); stroke-width: 1.4; }
.w2-terrasse__mast { stroke: var(--e-mast); stroke-width: 3.2; }
.w2-terrasse__tisch,
.w2-terrasse__stuhl { stroke: var(--e-moebel); stroke-width: 2.6; }
.w2-terrasse__topf { fill: var(--e-topf); }
.w2-terrasse__blatt { fill: var(--e-blatt); }
.w2-terrasse__tafel { fill: var(--e-tafel); stroke: var(--e-moebel); stroke-width: 2; }

/* Weihnachten zum Zeigen (Jana am 13.10.2026): links neben der Tür steht
   statt der Pflanze ein Christbaum mit Stern und Lichtern in der Farbe der
   Lichterkette. Tagsüber leise, nachts leuchtet und funkelt er. */
.w2-baum { display: none; }
.w2-fassade--weihnachten .w2-baum { display: inline; transform: translateX(-14%) scale(1.3); transform-box: fill-box; transform-origin: 50% 100%; }
.w2-fassade--weihnachten .w2-terrasse__pflanze { display: none; }
.w2-baum__stamm { fill: #6b4a33; }
.w2-baum__tanne { fill: #2f6a4f; }
.w2-baum__girlande { stroke: rgb(255 236 200 / 0.55); stroke-width: 1.2; }
.w2-baum__licht { fill: var(--w2-licht); }
.w2-baum__stern { fill: var(--w2-licht); }
.w2-fassade--nacht .w2-baum__tanne { fill: color-mix(in srgb, #2f6a4f 70%, #121b3b); }
.w2-fassade--nacht .w2-baum__stamm { fill: color-mix(in srgb, #6b4a33 70%, #121b3b); }
.w2-fassade--nacht .w2-baum__licht,
.w2-fassade--nacht .w2-baum__stern { filter: drop-shadow(0 0 3px rgb(255 196 92 / 0.95)) drop-shadow(0 0 7px rgb(255 196 92 / 0.6)); }
@keyframes w2-funkeln {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: no-preference) {
  .w2-fassade--nacht .w2-baum__licht { animation: w2-funkeln 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.37s); }
}
/* Oben im zweiten Stock ein Baum, und das Fenster leuchtet warm heraus. */
.w2-fensterbaum { display: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 92%; }
.w2-fassade--weihnachten .w2-fensterbaum { display: block; }
.w2-fassade--weihnachten .w2-haus .w2-haus__fenster span:nth-child(2) { background: var(--e-licht, var(--w2-licht)); }
.w2-fassade--weihnachten.w2-fassade--nacht .w2-haus .w2-haus__fenster span:nth-child(2) {
  box-shadow: inset 0 0 0 3px var(--e-rahmen), 0 5px 0 -1px var(--e-rahmen), 0 0 22px rgb(255 196 92 / 0.45);
}
.w2-fensterbaum__tanne { fill: #2f6a4f; }
.w2-fensterbaum__licht, .w2-fensterbaum__stern { fill: var(--w2-licht); }
.w2-fassade--tag .w2-fensterbaum__licht { fill: #f05a2a; }

/* Der grüne Bogen um die Glastür: ein Tannenband mit Nadeln, daran Kugeln
   in Orange, Creme und dem Gelb der Lichterkette. */
.w2-tuerkranz { display: none; position: absolute; inset: -7px -7px 0; z-index: 2; pointer-events: none; }
.w2-fassade--weihnachten .w2-tuerkranz { display: block; }
.w2-tuerkranz svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; }
.w2-tuerkranz__gruen { stroke: #2f6a4f; stroke-width: 13px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.w2-tuerkranz__nadeln { stroke: #4f8a6e; stroke-width: 7px; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.w2-fassade--nacht .w2-tuerkranz__gruen { stroke: color-mix(in srgb, #2f6a4f 75%, #121b3b); }
.w2-fassade--nacht .w2-tuerkranz__nadeln { stroke: color-mix(in srgb, #4f8a6e 70%, #121b3b); }
.w2-tuerkranz__kugel {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -30%);
  background: radial-gradient(circle at 35% 35%, rgb(255 255 255 / 0.7) 0 18%, transparent 22%), var(--kugel);
}
.w2-tuerkranz__kugel--0 { --kugel: var(--w2-orange); }
.w2-tuerkranz__kugel--1 { --kugel: var(--w2-creme); }
.w2-tuerkranz__kugel--2 { --kugel: var(--w2-licht); }

/* Der Weihnachtsmann im Schlitten fliegt über den Himmel, mitten durch den
   Gruß und vor ihm vorbei (Jana am 13. und 15.10.2026). Er steckt im Gruß
   und richtet sich nach ihm, nicht nach den Zeilen darunter; Klicks gehen
   durch ihn hindurch. Bei weniger Bewegung steht er still rechts. */
.w2-schlitten { display: none; }
.w2-fassade--weihnachten .w2-fassade__gruss { position: relative; }
.w2-fassade--weihnachten .w2-schlitten {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  z-index: 2;
  display: block;
  width: clamp(8.5rem, 26vw, 15rem);
  pointer-events: none;
}
.w2-fassade--weihnachten .w2-fassade__kopf { position: relative; z-index: 2; }
.w2-schlitten svg { display: block; width: 100%; height: auto; overflow: visible; fill: rgb(253 243 207 / 0.92); filter: drop-shadow(0 0 1px #121b3b) drop-shadow(0 0 1px #121b3b); }
.w2-schlitten__linie, .w2-schlitten__zuegel { fill: none; stroke: rgb(253 243 207 / 0.85); stroke-width: 1.6; stroke-linecap: round; }
.w2-schlitten__zuegel { stroke-width: 1; opacity: 0.7; }
.w2-schlitten .w2-schlitten__nase { fill: var(--w2-orange); }
.w2-fassade--tag .w2-schlitten svg { fill: rgb(27 48 128 / 0.55); }
.w2-fassade--tag .w2-schlitten__linie, .w2-fassade--tag .w2-schlitten__zuegel { stroke: rgb(27 48 128 / 0.55); }
@keyframes w2-fliegen {
  0% { transform: translate(-110%, 0.6rem); }
  50% { transform: translate(45vw, 0); }
  100% { transform: translate(105vw, -0.8rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .w2-fassade--weihnachten .w2-schlitten { animation: w2-fliegen 16s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .w2-fassade--weihnachten .w2-schlitten { left: auto; right: 6%; }
}

/* An Silvester ein Feuerwerk über den Dächern (Jana am 13.10.2026): jede
   Rakete steigt auf und zerplatzt in zwölf Funken, die verglühen — hinter
   Haus und Gruß, nachts leuchtend, tagsüber leiser. */
.w2-feuerwerk { position: absolute; inset: 0 0 auto; z-index: 0; height: 60%; pointer-events: none; }
.w2-fassade:has(.w2-feuerwerk) .w2-fassade__kopf { position: relative; z-index: 2; }
.w2-fassade:has(.w2-feuerwerk) .w2-gasse { position: relative; z-index: 1; }
.w2-feuerwerk__rakete { position: absolute; width: 0; height: 0; }
.w2-feuerwerk__rakete::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 1.1rem;
  border-radius: 2px;
  background: linear-gradient(var(--f), transparent);
  opacity: 0;
  animation: w2-steigen 3.6s ease-out var(--d) infinite;
}
.w2-feuerwerk__rakete i {
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 3px;
  height: 0.8rem;
  border-radius: 3px;
  background: var(--f);
  opacity: 0;
  transform-origin: 50% 0;
  animation: w2-funken 3.6s ease-out var(--d) infinite;
}
.w2-feuerwerk__rakete--1 { left: 8%; top: 18%; --f: var(--w2-licht); --d: 0s; --r: clamp(1.87rem, 6.5vw, 3.4rem); }
.w2-feuerwerk__rakete--2 { left: 92%; top: 15%; --f: var(--w2-orange); --d: 0.5s; --r: clamp(1.76rem, 6.1vw, 3.2rem); }
.w2-feuerwerk__rakete--3 { left: 26%; top: 7%; --f: var(--w2-creme); --d: 1.1s; --r: clamp(1.43rem, 4.9vw, 2.6rem); }
.w2-feuerwerk__rakete--4 { left: 74%; top: 9%; --f: var(--w2-licht); --d: 1.7s; --r: clamp(1.54rem, 5.3vw, 2.8rem); }
.w2-feuerwerk__rakete--5 { left: 50%; top: 4%; --f: var(--w2-orange); --d: 2.3s; --r: clamp(1.32rem, 4.6vw, 2.4rem); }
.w2-feuerwerk__rakete--6 { left: 13%; top: 31%; --f: var(--w2-creme); --d: 2.9s; --r: clamp(1.43rem, 4.9vw, 2.6rem); }
.w2-feuerwerk__rakete--7 { left: 88%; top: 32%; --f: var(--w2-licht); --d: 0.8s; --r: clamp(1.49rem, 5.1vw, 2.7rem); }
.w2-fassade--nacht .w2-feuerwerk { filter: drop-shadow(0 0 4px rgb(255 196 92 / 0.8)); }
.w2-fassade--tag .w2-feuerwerk { opacity: 0.75; }
@keyframes w2-steigen {
  0% { opacity: 0; transform: translateY(9rem); }
  4% { opacity: 0.9; }
  24% { opacity: 0.9; transform: translateY(0); }
  27%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes w2-funken {
  0%, 25% { opacity: 0; transform: rotate(var(--w)) translateY(0) scaleY(0.4); }
  28% { opacity: 1; }
  62% { opacity: 1; }
  82%, 100% { opacity: 0; transform: rotate(var(--w)) translateY(var(--r)) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .w2-feuerwerk { display: none; }
}

/* Der Christbaum-Knopf: rund, links neben Sonne und Mond, in derselben
   Höhe. Grün, solange Weihnachten an ist. */
.w2-weihnachtsknopf {
  position: absolute;
  right: calc(var(--w2-rand) + 6.3rem + 0.4rem);
  bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  border-radius: 50%;
  background: rgb(18 27 59 / 0.75);
  color: var(--w2-creme);
  cursor: pointer;
}
.w2-weihnachtsknopf svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w2-weihnachtsknopf[aria-pressed="true"] { background: #2f6a4f; color: var(--w2-licht); }
.w2-weihnachtsknopf:focus-visible { outline: 3px solid var(--w2-licht); outline-offset: 3px; }

/* Bis die Tür entschieden hat, nur der dunkle Grund (siehe zwei.html.erb). */
html.w2-wartet .w2-fassade,
html.w2-wartet .w2-drinnen,
html.w2-wartet .w2-fuss { visibility: hidden; }
/* Bei Tag ist auch das Warten hell — sonst blitzt es dunkel, bevor die helle
   Fassade kommt. */
/* Nur solange gewartet wird — danach ist der Grund wieder der der Seite. */
html.w2-wartet.w2-wartet--tag body.website2 { background: #dfe9f1; }

/* Die Tür als Portal: draußen kein Scrollen, drinnen keine Fassade. Gesetzt
   von fassade_controller.js — ohne JavaScript steht alles untereinander. */
body.w2-ist-draussen { overflow: hidden; height: 100svh; }
body.w2-ist-draussen .w2-drinnen,
body.w2-ist-draussen .w2-fuss { display: none; }
body.w2-ist-drinnen .w2-fassade { display: none; }
/* Beim Überblenden liegt die Fassade noch kurz über der Seite und blendet aus,
   während die Seite darunter einblendet (siehe fassade_controller.js). */
body.w2-ueberblenden .w2-fassade {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  pointer-events: none;
  animation: w2-ausblenden 0.8s ease-in forwards;
}
@keyframes w2-ausblenden { to { opacity: 0; } }

/* Nach der Tür blendet drinnen weich auf — man ist angekommen. */
/* Der Inhalt blendet nur ein, ohne Bewegung: Eine Verschiebung am Inhalt
   machte ihn für die Dauer der Animation zum Bezugspunkt der festen
   Statuszeile darin — sie stand erst versetzt und sprang dann an ihren Platz
   (Jana am 12.10.2026: "springt immer noch"). */
body.w2-ankommen .w2-inhalt { animation: w2-einblenden 0.7s ease-out both; }
body.w2-ankommen #hallo .w2-laufband { animation: w2-einblenden 0.7s ease-out both; }

@keyframes w2-einblenden {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes w2-ankommen {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Drinnen ---------------------------------------------------------------- */

html:has(body.w2-ist-drinnen) {
  scroll-behavior: smooth;
  scroll-padding-top: var(--w2-band);
  /* Einrasten, aber sanft (Jana am 11.10.2026: erst "festhaken", dann
     "keine großen Leerflächen"): Jeder Abschnitt ist so hoch wie sein Inhalt,
     und die Seite rastet nur ein, wenn man nah an einem Anfang ist. */
  scroll-snap-type: y proximity;
}

/* Am Handy und Tablet nicht (Jana am 15.10.2026: "immer wenn man noch nicht
   weit genug gescrollt hat, springt es wieder nach oben") — dort zieht das
   Einrasten den Finger zurück. Nur mit Maus bleibt es. */
@media (pointer: coarse), (max-width: 47.99rem) {
  html:has(body.w2-ist-drinnen) { scroll-snap-type: none; }
}

.w2-drinnen { display: block; }

.w2-inhalt {
  min-width: 0;
  max-width: 78rem;
  margin-inline: auto;
  padding: 0 var(--w2-rand) calc(var(--w2-unten) + 2rem);
}

.w2-inhalt > section {
  padding-block: var(--w2-abstand);
  scroll-snap-align: start;
}

.w2-inhalt > section + section { border-top: 1px solid var(--w2-linie); }

/* Die Lichterkette — am Handy waagrecht unten, ab 60rem senkrecht links.
   Ein Draht, an jedem Abschnitt eine Birne; die, in deren Abschnitt man ist,
   leuchtet am hellsten. */
.w2-kette {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;
  height: var(--w2-unten);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-right: 9.6rem;
  box-sizing: border-box;
  border-top: 1px solid var(--w2-linie);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 20'%3E%3Cpath d='M0 6 Q22 16 45 6 Q68 16 90 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0.2rem / 90px 20px repeat-x,
    var(--w2-tiefer);
}

.w2-kette ol {
  display: flex;
  flex: 1;
  gap: 0.15rem;
  margin: 0;
  padding: 0 0.4rem;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.w2-kette ol::-webkit-scrollbar { display: none; }
.w2-kette li { flex: none; display: flex; }

.w2-kette a,
.w2-zur-tuer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1rem;
  padding: 0.25rem 0.5rem 0;
  color: rgb(253 243 207 / 0.6);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.w2-kette .w2-zur-tuer { flex: none; justify-content: center; padding-inline: 0.75rem 0.4rem; }
.w2-zur-tuer svg { width: 18px; height: 24px; fill: var(--w2-rosa); }
.w2-zur-tuer__glas { fill: #3a3550; }

.w2-birne { flex: none; width: 18px; height: 32px; overflow: visible; transition: filter 0.4s; }
.w2-birne__glas { fill: rgb(255 214 140 / 0.06); stroke: rgb(255 236 200 / 0.3); stroke-width: 0.8; transition: fill 0.4s; }
.w2-birne__draht { stroke: #5c5444; stroke-width: 1.4; transition: stroke 0.4s; }

.w2-kette a.w2-an .w2-birne { filter: drop-shadow(0 2px 5px rgb(255 190 90 / 0.6)); }
.w2-kette a.w2-an .w2-birne__glas { fill: rgb(255 214 140 / 0.6); stroke: rgb(255 236 200 / 0.75); }
.w2-kette a.w2-an .w2-birne__draht { stroke: var(--w2-licht); }
.w2-kette a.w2-jetzt { color: var(--w2-creme); }
.w2-kette a.w2-jetzt .w2-birne { filter: drop-shadow(0 0 6px rgb(255 196 92 / 1)) drop-shadow(0 0 14px rgb(255 196 92 / 0.7)); }
.w2-kette a.w2-jetzt .w2-birne__glas { fill: rgb(255 226 160 / 0.95); }
.w2-kette a:hover .w2-birne,
.w2-kette a:focus-visible .w2-birne { filter: drop-shadow(0 0 8px rgb(255 196 92 / 0.9)); }

/* Die eine feste Reservierung. Auf dem Handy rechts in der Kette, sonst unten
   rechts. Wo ohnehin ein Knopf dafür steht (Hallo, Reservieren), tritt sie
   zurück. */
.w2-festknopf {
  position: fixed;
  right: 0.6rem;
  bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  z-index: 31;
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0.6rem 1.1rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--w2-orange);
  color: var(--w2-creme);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgb(5 8 26 / 0.45);
  transition: opacity 0.3s, transform 0.3s;
}

.w2-festknopf--verdeckt { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* Am Handy keine Lichterkette mehr unten (Jana am 12.10.2026: "nicht
   optimal, finde da eine andere Lösung"): Gescrollt wird mit dem Daumen, und
   die Leiste nahm Platz und Ruhe. Es bleiben zwei schwebende Knöpfe — links die
   kleine Haustür zurück vor das Haus, rechts "Tisch reservieren". Ab 60rem
   steht die Kette wie gehabt links. */
@media (max-width: 59.99rem) {
  body.website2 { --w2-unten: calc(4.2rem + env(safe-area-inset-bottom, 0px)); }
  .w2-kette {
    right: auto;
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    left: 0.6rem;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
  }
  /* Die Lichterkette am Handy doch (Jana am 15.10.2026: "die fehlt ja
     komplett") — schmal quer unter der Statuszeile, nur Draht und Birnen,
     eine je Abschnitt. Die des Abschnitts, in dem man ist, leuchtet; ein
     Tipp springt hin. Die Wörter lesen nur Bildschirmleser. */
  .w2-kette ol {
    position: fixed;
    top: var(--w2-laufband-hoehe, 2.4rem);
    right: 0;
    left: 0;
    z-index: 29;
    display: flex;
    justify-content: space-between;
    height: 1.9rem;
    padding: 0 0.7rem;
    overflow: hidden;
    border-bottom: 1px solid var(--w2-linie);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 20'%3E%3Cpath d='M0 3 Q22 11 45 3 Q68 11 90 3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 90px 20px repeat-x,
      var(--w2-tiefer);
  }
  .w2-kette ol a { padding: 0.05rem 0.2rem 0; }
  .w2-kette ol .w2-birne { width: 12px; height: 22px; }
  .w2-kette ol .w2-kette__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .w2-kette .w2-zur-tuer {
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border-radius: 50%;
    background: var(--w2-tiefer);
    box-shadow: 0 8px 24px rgb(5 8 26 / 0.45), inset 0 0 0 1px var(--w2-linie);
  }
}
body.w2-ist-draussen .w2-festknopf { display: none; }

/* Der pulsierende Pfeil zum nächsten Abschnitt — nur ab Tablet; auf dem
   Handy zeigt die Kette unten, dass es weitergeht. */
.w2-weiter { display: none; }

/* Das Laufband ------------------------------------------------------------ */

/* Dauerhaft sichtbar: drinnen fest oben. Links der Live-Status, daneben ziehen
   die Botschaften vorbei — siehe website/_laufband. Auf dem Handy der Status
   als eigene Zeile über dem Band. */
.w2-laufband {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border-bottom: 1px solid var(--w2-linie);
  background: var(--w2-nacht);
  text-transform: uppercase;
}

body.w2-ist-drinnen #hallo .w2-laufband {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--w2-leiste);
  z-index: 25;
}

.w2-laufband__status {
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  gap: 0.6rem;
  margin: 0 !important;
  padding: 0.65rem var(--w2-rand);
  border-bottom: 1px solid var(--w2-linie);
  background: var(--w2-tiefer);
  color: var(--w2-creme);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.w2-laufband__status em { color: var(--w2-orange-hell); font-style: normal; }

/* Bei Tag ist die Statuszeile heller und freundlicher, abends bleibt sie
   dunkel (Jana am 12.10.2026) — gleiche Farben, nur getauscht. */
/* Tagsüber kein cremefarbener Kasten mehr in der Leiste (Jana am 13.10.2026:
   "der gelbe Streifen oben scheint noch nicht fertig integriert") — Status
   und Band sind eine durchgehende Leiste im selben Blau, bei Tag wie bei
   Nacht. */
.w2-laufband { background: var(--w2-tiefer); }
.w2-laufband__status { background: transparent; }

.w2-laufband__punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgb(253 243 207 / 0.35); }

/* Offen in Orange statt Gelb (Jana am 12.10.2026). */
.w2-laufband__status--offen .w2-laufband__punkt {
  background: var(--w2-orange);
  box-shadow: 0 0 10px rgb(240 90 42 / 0.8);
  animation: w2-live 2s ease-in-out infinite;
}

@keyframes w2-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.w2-laufband__band { display: flex; flex: 1 1 100%; min-width: 0; overflow: hidden; }

.w2-laufband__band > span {
  flex: none;
  padding-block: 0.6rem;
  color: var(--w2-creme);
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: 800;
  white-space: nowrap;
  animation: w2-lauf 60s linear infinite;
}

.w2-laufband__band em { margin-inline: 0.55em; color: var(--w2-orange-hell); font-style: normal; }

/* Das Sternchen im Laufband gezeichnet und nicht als Zeichen (Jana am
   12.10.2026): "✳" zeigen iPhones als grünes Emoji. Das Zeichen bleibt im
   Text stehen — für den Vergleich in laufband_controller.js —, zu sehen ist
   nur die Zeichnung in der Farbe der Schrift. */
.w2-laufband em { font-size: 0; }
.w2-laufband em::before {
  content: "";
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  margin-inline: 0.5rem;
  vertical-align: -0.04em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M1.5 8h13M3.4 3.4l9.2 9.2M12.6 3.4l-9.2 9.2' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M1.5 8h13M3.4 3.4l9.2 9.2M12.6 3.4l-9.2 9.2' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.w2-laufband__band em { margin-inline: 0; }

@keyframes w2-lauf {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Hallo ------------------------------------------------------------------- */

/* Logo klein und klar, dann groß "Kaffee. Sandwiches. Spritz.", darunter Satz,
   heute und die beiden Wege. Mobil untereinander, die Skizzen unten. */
.w2-inhalt > #hallo {
  display: grid;
  gap: clamp(1.8rem, 5svh, 2.8rem);
  padding-top: calc(var(--w2-band) + clamp(1.4rem, 4svh, 2.6rem));
  border-top: 0;
}

.w2-riesig {
  width: clamp(7.5rem, 30vw, 11rem);
  aspect-ratio: 420 / 175;
  margin-bottom: clamp(1.2rem, 4svh, 2.2rem);
  background: var(--w2-creme);
  -webkit-mask: var(--w2-logo) left top / contain no-repeat;
  mask: var(--w2-logo) left top / contain no-repeat;
}

.w2-hero {
  font-size: clamp(2.9rem, 12.5vw, 6.6rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
}

.w2-hero__zeile { display: block; }
.w2-hero__zeile--kaffee { color: var(--w2-creme); }
.w2-hero__zeile--sandwiches { color: var(--w2-orange-hell); }
.w2-hero__zeile--spritz { color: var(--w2-gelb); text-shadow: 0 0 18px rgb(255 196 92 / 0.35); }

.w2-buehne-text .w2-satz {
  max-width: 30rem;
  margin-top: clamp(1rem, 3svh, 1.6rem) !important;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
}

/* Die Subline darf breiter laufen: am großen Bildschirm ein Satz je Zeile
   (Jana am 12.10.2026: "einfach nur zwei Sätze"). */
.w2-buehne-text .w2-hero-unter { max-width: 42rem; }

.w2-buehne-text .w2-wege { gap: 0.5rem; }

/* Die Skizzen im Bogen, nebeneinander wie eine kleine Arkade. */
.w2-fenster {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr 0.8fr;
  align-items: end;
  gap: 3%;
  width: 100%;
  max-width: 26rem;
}

.w2-fenster .w2-bogen:nth-child(1) { aspect-ratio: 3 / 4.6; }
.w2-fenster .w2-bogen:nth-child(2) { aspect-ratio: 3 / 5; }
.w2-fenster .w2-bogen:nth-child(3) { aspect-ratio: 3 / 4; }

/* Abschnitte -------------------------------------------------------------- */

/* Eine Kachel mit kleiner Skizze im Bogen rechts daneben. Auf der hellen
   Kachel zeichnet die Skizze dunkel. */
.w2-kachel--skizze { display: grid; grid-template-columns: minmax(0, 1fr) clamp(5.5rem, 22vw, 8rem); align-items: center; gap: 1rem; }
.w2-kachel--skizze .w2-bogen { width: 100%; background: rgb(253 243 207 / 0.07); }
.w2-hell .w2-bogen,
.w2-hell.w2-kachel--skizze .w2-bogen { background: rgb(26 37 80 / 0.07); }
.w2-hell .w-scribble { stroke: rgb(26 37 80 / 0.75); }
.w2-hell .w-scribble__punkt { fill: rgb(26 37 80 / 0.3); }

/* Reservieren als Tür: Bogen oben, Lichterkette darin. */
.w2-tuerkachel {
  overflow: hidden;
  padding: 0 var(--w2-luft) var(--w2-luft);
  border-radius: 50% 50% var(--w2-ecke) var(--w2-ecke) / 180px 180px var(--w2-ecke) var(--w2-ecke);
  background: var(--w2-rot);
  color: var(--w2-creme);
  text-align: center;
}

/* Weit genug innen, dass die Rundung des Bogens keine Birne anschneidet. */
.w2-tuerkachel .w2-lichterkette { width: min(66%, 15rem); margin: 1.4rem auto 0.4rem; }
.w2-tuerkachel .w2-etikett { color: var(--w2-gelb); }
.w2-tuerkachel .w2-satz { margin-inline: auto; color: var(--w2-creme); }
.w2-tuerkachel .w2-wege { justify-content: center; }

.w2-zwei { display: grid; gap: 1rem; }

.w2-woche { margin: 0.8rem 0 0; }
.w2-woche div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--w2-linie); }
.w2-woche div:last-child { border-bottom: 0; }
.w2-woche dt,
.w2-woche dd { margin: 0; }
.w2-woche dd { font-weight: 700; white-space: nowrap; }
.w2-woche--heute,
.w2-woche--heute dd { color: var(--w2-orange); font-weight: 700; }

/* "Ach, übrigens …" — wie ein kleines Gespräch mit uns (Jana am
   11.10.2026). Darüber die Linie unseres Gewölbes. */
#fakten > .w2-kachel {
  padding-top: calc(var(--w2-luft) + 1.6rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M0 40 Q30 0 60 40 Q90 0 120 40' fill='none' stroke='%23fce89e' stroke-opacity='0.22' stroke-width='2'/%3E%3C/svg%3E") top left / 120px 40px repeat-x,
    var(--w2-tief);
}

/* Die Überschrift darf spielen: leicht schief, ein Pinselstrich darunter. */
.w2-fakten__titel {
  position: relative;
  display: inline-block;
  padding-bottom: 0.25em;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.w2-fakten__titel::after {
  position: absolute;
  bottom: -0.05em;
  left: 0.15em;
  width: min(100%, 9em);
  height: 0.38em;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 Q50 2 100 7 T197 5' fill='none' stroke='%23f68457' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.w2-fakten__satz { margin-top: 0.6rem !important; max-width: 34rem; }

/* Die Plätze. Am Handy eine Reihe zum Wischen: eine Karte im Blick, die
   nächste lugt hervor. Ab Tablet zwei mal zwei, am großen Bildschirm vier
   nebeneinander. */
.w2-fakten__plaetze {
  display: grid;
  grid-auto-columns: 82%;
  grid-auto-flow: column;
  gap: 0.85rem;
  margin: clamp(1.4rem, 4vw, 2rem) calc(-1 * var(--w2-luft)) 0;
  padding: 0.4rem var(--w2-luft) 0.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--w2-luft);
  scrollbar-width: none;
  list-style: none;
}

.w2-fakten__plaetze::-webkit-scrollbar { display: none; }

/* Ein Platz: alle Fakten übereinander in derselben Zelle, nur einer zu
   sehen. So ist er so hoch wie sein längster Fakt, und nichts springt. */
.w2-fakt {
  --fakt-farbe: var(--w2-creme);
  --fakt-zeichen: var(--w2-orange-hell);
  display: grid;
  padding: 1.15rem 1.2rem 1.35rem;
  scroll-snap-align: start;
  border-radius: var(--w2-ecke);
  color: var(--fakt-farbe);
  font: inherit;
  letter-spacing: normal;
  transition: transform 0.4s ease;
}

/* Selbst durchklicken: ein unsichtbarer Knopf über der ganzen Karte. */
.w2-fakt { position: relative; }
.w2-fakt__weiter {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.w2-fakten--an .w2-fakt__weiter { display: block; }
.w2-fakt__weiter:focus-visible { outline: 3px solid var(--w2-licht); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .w2-fakten--an .w2-fakt:active { transform: scale(0.98); }
}

/* Das Eselsohr (Jana am 13.10.2026): unten rechts eine umgeknickte Ecke, wie
   bei einer Seite, die man umblättern kann. Die Farbe ist die der Karte, nur
   heller, und die Ecke dahinter die Farbe des Abschnitts. Nur mit
   JavaScript, wo man auch wirklich tippen kann. */
.w2-fakten--an .w2-fakt::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.45rem 0 var(--w2-ecke) 0;
  background: linear-gradient(315deg, var(--fakt-grund, var(--w2-tief)) 50%, color-mix(in srgb, var(--fakt-farbe) 30%, transparent) 50%);
  pointer-events: none;
  transition: width 0.3s ease, height 0.3s ease;
}
.w2-fakten--an .w2-fakt:hover::after { width: 2.1rem; height: 2.1rem; }

/* Einmal winken: die erste Karte wackelt kurz und zeigt ihr Eselsohr. */
@keyframes w2-winken {
  0%, 100% { transform: none; }
  20% { transform: rotate(-2.2deg); }
  40% { transform: rotate(1.8deg); }
  60% { transform: rotate(-1.2deg); }
  80% { transform: rotate(0.6deg); }
}
.w2-fakten--winken .w2-fakt--1 { animation: w2-winken 1.2s ease-in-out 0.3s; }
.w2-fakten--winken .w2-fakt--1::after { width: 2.3rem; height: 2.3rem; }

.w2-fakt__karte {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

.w2-fakt__karte--da {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s ease 0.25s, transform 0.6s ease 0.25s, visibility 0s;
}

.w2-fakt__oben { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.3rem; }

.w2-fakt__zeichen { color: var(--fakt-zeichen); }

.w2-fakt__zeichen svg {
  display: block;
  width: 2.9rem;
  height: 2.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.w2-fakt__zeichen .w2-fakt__punkt { fill: currentColor; stroke: none; }
.w2-fakt__zeichen .w2-fakt__licht { fill: var(--w2-orange); stroke: none; }
.w2-fakt__zeichen .w2-fakt__funke { stroke: var(--w2-licht); }
.w2-fakt__zeichen .w2-fakt__glas { fill: rgb(255 196 92 / 0.25); }

.w2-fakt__titel {
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.45rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

.w2-fakt__dazu { font-size: 0.98rem; line-height: 1.45; opacity: 0.85; overflow-wrap: break-word; }

/* Ein System, vier Charaktere: der Bogen unseres Gewölbes in Creme, die
   Nacht, Orange, und eine Linie mit runder Ecke. */
.w2-fakt--1 {
  --fakt-farbe: var(--w2-nacht);
  --fakt-zeichen: var(--w2-orange);
  padding-top: 1.5rem;
  border-radius: var(--w2-bogen);
  background: var(--w2-creme);
  text-align: center;
}

.w2-fakt--1 .w2-fakt__oben { flex-direction: column; align-items: center; gap: 0.2rem; }

.w2-fakt--2 { --fakt-zeichen: var(--w2-licht); background: var(--w2-nacht); box-shadow: inset 0 0 0 1px var(--w2-linie); }

.w2-fakt--3 { --fakt-farbe: var(--w2-nacht); --fakt-zeichen: var(--w2-nacht); background: var(--w2-orange); }
.w2-fakt--3 .w2-fakt__licht { fill: var(--w2-creme); }

.w2-fakt--4 {
  --fakt-zeichen: var(--w2-orange-hell);
  border-radius: var(--w2-ecke) var(--w2-ecke) 4rem var(--w2-ecke);
  box-shadow: inset 0 0 0 1.5px rgb(253 243 207 / 0.45);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .w2-fakt:hover { transform: translateY(-3px) rotate(-0.4deg); }
}

/* Darunter: die kleine Lichterkette und, leise, Pause — nur, wenn es
   wechselt. */
.w2-fakten__fuss { display: none; }

.w2-fakten--an .w2-fakten__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  margin-top: 1.3rem;
}

/* Der Hinweis, dass es weitergeht, und darunter der Balken bis zur nächsten
   Karte — leise, aber da (Jana am 12.10.2026). */
.w2-fakten__warten { display: grid; flex: 1 1 14rem; gap: 0.55rem; max-width: 26rem; }
.w2-fakten__hinweis { color: var(--w2-leise); font-size: 0.92rem; }

.w2-fakten__balken {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--w2-orange-hell);
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 0 0 transparent;
}

.w2-fakten__warten:has(.w2-fakten__balken) {
  background: linear-gradient(var(--w2-linie), var(--w2-linie)) 0 100% / 100% 3px no-repeat;
}

.w2-fakten__pause {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--w2-linie);
  border-radius: 999px;
  background: transparent;
  color: var(--w2-leise);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.w2-fakten__pause:hover { border-color: rgb(253 243 207 / 0.4); color: var(--w2-creme); }
.w2-fakten__pause-zeichen { width: 0.8rem; height: 0.8rem; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.w2-fakten__pause-dreieck,
.w2-fakten__pause[aria-pressed="true"] .w2-fakten__pause-striche { display: none; }
.w2-fakten__pause[aria-pressed="true"] .w2-fakten__pause-dreieck { display: inline; }

/* Bei weniger Bewegung wechselt nichts von selbst — dann braucht es auch
   keine Pause. */
@media (prefers-reduced-motion: reduce) {
  .w2-fakten__pause,
  .w2-fakten__warten { display: none; }
  .w2-fakt__karte,
  .w2-fakt__karte--da { transform: none; transition: none; }
}

.w2-tuerkachel .w2-tuerkachel__gruppe { margin-top: 0.9rem !important; font-weight: 700; }
.w2-tuerkachel .w2-tuerkachel__mieten { margin-top: 1.2rem !important; font-size: 0.95rem; }
.w2-tuerkachel__link { color: var(--w2-creme); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; white-space: nowrap; }

/* Einmal laut pro Seite: die Leuchtschrift, beim Spieleabend. */
#events { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.w2-events { display: grid; gap: 0.7rem; }
.w2-events__etikett { margin: 0; }
/* Spieleabend und Martini Nights (Jana am 14.10.2026): untereinander — am
   großen Bildschirm teilen sie sich die Spalte neben der Leuchtschrift, und
   nebeneinander wäre "Spieleabend" zu groß für die Hälfte. */
.w2-events__liste { display: grid; gap: 0.7rem; }

.w2-neon { text-align: center; }
.w2-neon p { font-size: clamp(1.7rem, 5.5vw, 3.2rem); line-height: 1.05; }
.w2-neon em {
  display: block;
  color: var(--w2-orange-hell);
  font-style: normal;
  text-shadow: 0 0 6px rgb(255 138 76 / 0.9), 0 0 22px rgb(242 83 27 / 0.75), 0 0 46px rgb(242 83 27 / 0.45);
}

.w2-neon .w2-neon__dazu {
  max-width: 34rem;
  margin: 1rem auto 0;
  color: var(--w2-leise);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* Menü: drei Bögen mit dem, wofür man kommt, darunter die Spannweite. */
/* Auch auf dem Handy nebeneinander — drei kleine Bögen statt dreier
   Bildschirme. */
.w2-ware {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.7rem, 3vw, 2.4rem);
  margin-top: 1rem;
  text-align: center;
}

.w2-ware .w2-bogen { width: min(100%, 14rem); margin: 0 auto 0.7rem; }
.w2-ware h3 { font-size: clamp(0.98rem, 2.6vw, 1.4rem); }
.w2-ware p { margin-top: 0.25rem !important; color: var(--w2-leise); font-size: clamp(0.82rem, 2vw, 1rem); line-height: 1.4; }
.w2-ware__spanne { margin-top: clamp(1.6rem, 5vw, 2.6rem); }


/* Fuß ------------------------------------------------------------------- */

.w2-fuss {
  padding: 2.5rem var(--w2-rand) calc(var(--w2-unten) + 2rem);
  border-top: 1px solid var(--w2-linie);
  background: var(--w2-tiefer);
  color: var(--w2-leise);
  font-size: 0.92rem;
}

.w2-fuss__innen { display: grid; justify-items: center; gap: 0.8rem; text-align: center; }
.w2-fuss__logo { width: auto; height: 2.4rem; filter: brightness(0) invert(1); }
.w2-fuss nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; }
.w2-fuss a { color: var(--w2-creme); }

/* Die Lichterkette — siehe website/_lichterkette.html.erb. */

.w2-lichterkette {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62px;
}

/* Wie an der Tür: schwarzer Draht, schwarze Fassung, klares Glas — das Licht
   kommt vom Glühdraht. */
.w2-lichterkette__draht { stroke: #05081a; stroke-width: 2; vector-effect: non-scaling-stroke; }
.w2-lichterkette__fassung { fill: #05081a; }
.w2-lichterkette__glas { fill: rgb(255 214 140 / 0.45); stroke: rgb(255 236 200 / 0.55); stroke-width: 0.8; }
.w2-lichterkette__gluehdraht { stroke: #ffc45c; stroke-width: 1.4; }

.w2-lichterkette__birne {
  filter: drop-shadow(0 2px 5px rgb(255 190 90 / 0.85));
  animation: w2-glimm 2.6s ease-in-out infinite;
}

@keyframes w2-glimm {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .w2-lichterkette__birne { animation: none; }
}

/* Eingebettete Seiten: Bewerbung, Menü, Allergene ----------------------- */

/* Zu, bis jemand den Knopf tippt; dann die eingebettete Seite in voller
   Breite, so hoch, wie sie selbst meldet — ohne zweiten Scrollbalken. */
.w2-einbettung { display: none; }

.w2-einbettung--offen .w2-einbettung {
  display: block;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: var(--w2-ecke);
  background: var(--w2-weiss);
  animation: w2-ankommen 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.w2-einbettung__rahmen { display: block; width: 100%; height: 70svh; border: 0; scroll-margin-top: calc(var(--w2-band) + 0.5rem); }

/* Reservieren im Fenster ------------------------------------------------- */

/* Die Buchung der Gästeliste auf der Website. Auf dem Handy der ganze
   Bildschirm, sonst ein Fenster in der Mitte mit Bogen oben. */
.w2-buchung {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--w2-nacht);
  color: var(--w2-creme);
  overflow: hidden;
}

.w2-buchung[open] { display: flex; flex-direction: column; }
.w2-buchung::backdrop { background: rgb(5 8 26 / 0.72); }

.w2-buchung__kopf {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.6rem 0.6rem var(--w2-rand);
  border-bottom: 1px solid var(--w2-linie);
}

.w2-buchung__titel {
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
}

.w2-buchung__zu {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--w2-linie);
  border-radius: 50%;
  background: transparent;
  color: var(--w2-creme);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.w2-buchung__zu:hover { border-color: var(--w2-creme); }
.w2-buchung__rahmen { flex: 1; width: 100%; border: 0; background: var(--w2-nacht); }

@media (min-width: 48rem) {
  .w2-buchung {
    width: min(46rem, calc(100vw - 3rem));
    height: min(56rem, calc(100svh - 3rem));
    margin: auto;
    border: 1px solid var(--w2-linie);
    border-radius: 120px 120px var(--w2-ecke) var(--w2-ecke) / 60px 60px var(--w2-ecke) var(--w2-ecke);
    box-shadow: 0 30px 80px rgb(5 8 26 / 0.6);
  }

  .w2-buchung__kopf { padding-top: 1.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .w2-buchung[open] { animation: w2-ankommen 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
}

/* Das Menü im Fenster (Jana am 12.10.2026) — derselbe Rahmen wie beim
   Reservieren. Innen scrollt es selbst. */
.w2-menue__inhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--w2-luft) var(--w2-rand) calc(var(--w2-luft) + env(safe-area-inset-bottom, 0px)); }
.w2-menue__karte + .w2-menue__karte { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--w2-linie); }
.w2-menue__karte h3 { margin-bottom: 0.2rem; }
.w2-menue__karte .w2-wege { margin-top: 1rem; }
.w2-menue__weiter { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--w2-linie); }

/* Die Karte gleich zum Lesen, Seite für Seite, an jeder Breite. */
.w2-menue__seiten { display: grid; gap: 0.8rem; margin-top: 1rem; }
.w2-menue__seite { display: block; width: 100%; height: auto; border-radius: var(--w2-ecke); background: var(--w2-weiss); box-shadow: 0 1px 0 var(--w2-linie); }

/* Die Allergene: statt der Karten, mit dem Weg zurück. */
.w2-menue__allergene { display: none; }
.w2-menue--allergene .w2-menue__karten { display: none; }
.w2-menue--allergene .w2-menue__allergene { display: grid; gap: 1rem; justify-items: start; }
.w2-menue__allergene .w2-einbettung__rahmen { width: 100%; height: 60svh; border-radius: var(--w2-ecke); background: var(--w2-weiss); }


/* Ab Tablet ---------------------------------------------------------------- */

@media (min-width: 48rem) {
  html:has(body.website2) { --w2-band: 3.2rem; }

  .w2-laufband__status { flex: none; border-bottom: 0; border-right: 1px solid var(--w2-linie); font-size: 0.82rem; letter-spacing: 0.08em; white-space: nowrap; }
  .w2-laufband__band { flex-basis: 0; }

  .w2-zwei { grid-template-columns: 1fr 1fr; align-items: start; }
  .w2-fakten__plaetze {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  #events { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  #events .w2-neon { text-align: left; }
  #events .w2-neon .w2-neon__dazu { margin-inline: 0; }

  .w2-weiter {
    position: fixed;
    bottom: 1rem;
    left: calc(var(--w2-leiste) + 1rem);
    z-index: 20;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid rgb(253 243 207 / 0.4);
    border-radius: 50%;
    background: rgb(18 27 59 / 0.85);
    color: var(--w2-creme);
    animation: w2-wippen 2.4s ease-in-out infinite;
  }

  .w2-weiter[hidden] { display: none; }
  .w2-weiter svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body.w2-ist-draussen .w2-weiter { display: none; }
}

@keyframes w2-wippen {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (min-width: 46rem) {
  .w2-haus { flex-basis: clamp(440px, 46vw, 680px); }
}

/* Ab Tablet: Hallo als ein Block — links Logo, Wörter und Wege, rechts die
   Skizzen im Bogen. */
@media (min-width: 48rem) {
  .w2-inhalt > #hallo {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  #hallo .w2-fenster { justify-self: end; max-width: 30rem; }
  /* Zwei Spalten: die Wörter nach der halben Breite bemessen, damit
     "Sandwiches." neben den Bögen Platz hat. */
  .w2-hero { font-size: clamp(2.9rem, 6.6vw, 6.6rem) !important; }
  #hallo .w2-laufband { grid-column: 1 / -1; }
}

/* Ab 60rem: die Kette hängt senkrecht links, mit Wörtern; die Reservierung
   steht unten rechts. */
@media (min-width: 60rem) {
  body.website2 { --w2-leiste: 12rem; --w2-unten: 0px; }

  .w2-drinnen { display: grid; grid-template-columns: var(--w2-leiste) minmax(0, 1fr); }

  /* Fest am Rand, auch am Ende der Seite neben dem Fuß (Jana am
     12.10.2026: "soll immer gleich bleiben, nicht scrollen"). */
  .w2-kette {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    flex-direction: column;
    width: var(--w2-leiste);
    height: 100svh;
    padding: 0;
    border-top: 0;
    border-right: 1px solid var(--w2-linie);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 90'%3E%3Cpath d='M10 0 Q2 22 10 45 Q18 68 10 90' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 15px 0 / 20px 90px repeat-y,
      var(--w2-tiefer);
  }

  .w2-kette ol { flex-direction: column; justify-content: space-around; gap: 0; padding: 1rem 0 4.5rem; overflow: visible; }
  .w2-kette li { flex: 1; }

  .w2-kette a,
  .w2-zur-tuer {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem 0 16px;
    font-size: 0.95rem;
  }

  .w2-kette .w2-zur-tuer { flex: none; padding-block: 1rem 0; }
  .w2-birne { width: 22px; height: 40px; }

  /* Der Pfeil unten in der Leiste der Kette, nicht im Inhalt. */
  .w2-weiter { left: calc((var(--w2-leiste) - 2.9rem) / 2); }
  .w2-inhalt { grid-column: 2; padding-bottom: 3rem; }
  .w2-fuss { margin-left: var(--w2-leiste); padding-bottom: 2.5rem; }
}

/* Weniger Bewegung -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html:has(body.w2-ist-drinnen) { scroll-behavior: auto; }
  .w2-tuer__licht,
  .w2-laufband__punkt,
  .w2-weiter { animation: none !important; }
  .w2-laufband__band > span { animation: none; }
  .w2-laufband__band > span + span { display: none; }
  .w2-gasse,
  .w2-tuer__fluegel,
  .w2-festknopf { transition: none; }
  body.w2-ankommen .w2-inhalt,
  body.w2-ankommen #hallo .w2-laufband { animation: none; }
}

/* Am großen Bildschirm: die vier Fakten nebeneinander — erst, wenn auch
   "Lieblingssportart?" auf eine Karte passt. */
@media (min-width: 85rem) {
  .w2-fakten__plaetze { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Der Newsletter bei Kontakt (Jana am 12.10.2026) — per E-Mail, unterschieden
   vom WhatsApp-Kanal in der Reihe darüber. */
.w2-kachel--orange .nl-formular { display: grid; gap: 0.4rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgb(253 243 207 / 0.35); }
.w2-kachel--orange .nl-formular__titel { margin: 0; font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif; font-size: 1.3rem; font-weight: 800; }
.w2-kachel--orange .nl-formular__satz,
.w2-kachel--orange .nl-formular__klein { margin: 0; color: var(--w2-creme); }
.w2-kachel--orange .nl-formular__klein { font-size: 0.85rem; opacity: 0.9; }
.w2-kachel--orange .nl-formular__klein a { color: inherit; }
.w2-kachel--orange .nl-formular__fehler { margin: 0; color: var(--w2-nacht); font-weight: 700; }
.w2-kachel--orange .nl-formular__zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.w2-kachel--orange .nl-formular__feld { width: 100%; min-height: 3rem; padding: 0 1.1rem; box-sizing: border-box; border: 0; border-radius: 999px; background: var(--w2-creme); color: var(--w2-nacht); font: inherit; }
.w2-kachel--orange .nl-formular__knopf { flex: none; align-self: flex-end; min-height: 3rem; padding: 0 1.4rem; border: 0; border-radius: 999px; background: var(--w2-nacht); color: var(--w2-creme); font: inherit; font-weight: 700; cursor: pointer; }

/* Sonne und Mond unten an der Fassade (Jana am 12.10.2026): zum Hin- und
   Herschalten zwischen Tag und Nacht — "kann immer bleiben". */
.w2-zeitwahl {
  position: absolute;
  right: var(--w2-rand);
  bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  gap: 0.3rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgb(18 27 59 / 0.75);
}

.w2-zeitwahl__knopf {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--w2-creme);
  cursor: pointer;
}

.w2-zeitwahl__knopf svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w2-zeitwahl__knopf[aria-pressed="true"] { background: var(--w2-creme); color: var(--w2-nacht); }

/* Tagsüber eine Spur heller, in nahen Tönen desselben Marineblaus (12.10.2026)
   — dieselbe Seite, nur die Stimmung des Tages. Gesetzt im Kopf der Seite. */
html.w2-zeit--tag body.website2 { background: #172150; }
html.w2-zeit--tag body.website2 .w2-kachel:not(.w2-hell):not(.w2-kachel--orange):not(.w2-kachel--leise) { background: #1f2b5c; }

/* Der Hero am Handy: Claim und Knöpfe vorn, die Skizzen darunter kleiner. */
@media (max-width: 47.99rem) {
  /* Die Bögen nutzen am Handy die ganze Breite (Jana am 13.10.2026). */
  #hallo .w2-fenster { max-width: none; margin-top: 0.4rem; }
}
/* Nur die Bögen auf dunklem Grund — auf hellen Kacheln bleiben sie zart. */
html.w2-zeit--tag body.website2 .w2-inhalt .w2-bogen:not(.w2-hell .w2-bogen, .w2-kachel--skizze .w2-bogen) { background: var(--w2-blau); }

/* Derselbe Schalter drinnen — genau wie draußen, unten rechts (Jana am
   13.10.2026: "komplett identisch … und nicht springt"). Der Knopf zum
   Reservieren rückt links daneben. */
.w2-laufband { position: relative; }
.w2-zeitwahl--drinnen { position: fixed; z-index: 31; }
body.w2-ist-draussen .w2-zeitwahl--drinnen { display: none; }
.w2-festknopf { right: calc(var(--w2-rand) + 6.3rem + 0.4rem); bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px) + 0.175rem); }

/* Die Produktkacheln als ganzer Link zum Menü-Fenster (Jana am 12.10.2026),
   mit sichtbarem Fokus — sonst sehen sie aus wie vorher. */
.w2-ware__kachel { display: grid; gap: inherit; border-radius: var(--w2-ecke); color: inherit; text-decoration: none; }
.w2-ware__kachel:focus-visible { outline: 3px solid var(--w2-gelb); outline-offset: 4px; }
@media (hover: hover) {
  .w2-ware__kachel:hover .w2-bogen { box-shadow: 0 0 0 2px var(--w2-orange-hell); }
}

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

/* Mobile Qualität (12.10.2026): Kontraste und Touch-Ziele nach der Prüfung.
   Dieselben Farben, nur dort getauscht, wo kleine Schrift zu blass stand. */
/* Kleine Schrift auf Orange in Nachtblau — Creme auf Orange erreicht nur 3 : 1. */
/* Nur bei Kontakt — Gutscheine, Crew, "Wer sind wir?" und die
   Events bleiben vorerst, wie sie sind (Jana am 12.10.2026). */
#kontakt .w2-kachel--orange .w2-etikett,
#kontakt .w2-kachel--orange .w2-satz,
#kontakt .w2-kachel--orange .nl-formular__satz,
#kontakt .w2-kachel--orange .nl-formular__klein,
#kontakt .w2-kachel--orange .nl-formular__beschriftung { color: var(--w2-nacht); }
#kontakt .w2-kachel--orange .nl-formular__klein a { color: var(--w2-nacht); }
/* Etiketten und "Heute" auf hellen Kacheln im dunkleren Orange für Schrift. */
#offen .w2-hell .w2-etikett { color: #c8461b; }
.w2-hell .w2-woche--heute,
.w2-hell .w2-woche--heute dd { color: #c8461b; }
/* Das Etikett auf dem roten Bogen in Creme statt Gelb. */
.w2-tuerkachel .w2-etikett { color: var(--w2-creme); }
/* Die Wörter an der Lichterkette unten nicht kleiner als 12 px. */
.w2-kette a { font-size: max(0.72rem, 12.5px); }
/* Die Links im Fuß mindestens 24 px hoch. */
.w2-fuss nav a { display: inline-block; padding-block: 0.25rem; }
/* Im Hero zwischen Satz und Öffnungszeile so viel Luft wie zu den Knöpfen. */

/* "Ein neues Kapitel beginnt." (Jana am 12.10.2026): MILA heute und das neue
   Kapitel übereinander, rechts nur bis zum Griff zu sehen. Feste
   Seitenverhältnisse, damit nichts springt, wenn die Bilder kommen; bewegt
   wird nur von Hand. Der Regler liegt unsichtbar über allem und nimmt Maus,
   Finger und Pfeiltasten — senkrecht wischen scrollt weiter die Seite. */
.w2-uns { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.w2-kapitel { display: grid; gap: 0.8rem; align-content: start; }
@media (min-width: 64rem) {
  .w2-uns { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .w2-uns .w2-vergleich { width: 100%; }
}
.w2-kapitel h2, .w2-kapitel .w2-satz { margin: 0; }
.w2-kapitel .w2-satz { max-width: 38rem; }
/* Etwa halb so groß wie die Spalte (Jana am 12.10.2026) — am Handy nicht
   kleiner als 16rem, damit man den Griff noch gut fassen kann. */
.w2-vergleich {
  --teil: 50%;
  position: relative;
  width: clamp(16rem, 50%, 34rem);
  margin-top: 0.6rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--w2-ecke);
  background: rgb(253 243 207 / 0.07);
  box-shadow: inset 0 0 0 1px var(--w2-linie);
}
.w2-vergleich__seite { position: absolute; inset: 0; margin: 0; }
.w2-vergleich__seite img { display: block; width: 100%; height: 100%; object-fit: cover; }
.w2-vergleich__seite .w-scribble { width: 100%; height: 100%; padding: 8% 22%; }
.w2-vergleich__seite--neu { clip-path: inset(0 0 0 var(--teil)); background: color-mix(in srgb, var(--w2-orange) 22%, var(--w2-nacht)); }
/* Beide Beschriftungen bleiben immer zu sehen, auch wenn der Griff darüber
   fährt. */
.w2-vergleich__seite figcaption {
  position: absolute;
  z-index: 2;
  bottom: 0.5rem;
  left: 0.5rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgb(18 27 59 / 0.82);
  color: var(--w2-creme);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.w2-vergleich__seite--neu figcaption { right: 0.5rem; left: auto; background: var(--w2-orange); }
.w2-vergleich__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--teil);
  width: 2px;
  margin-left: -1px;
  background: var(--w2-creme);
  pointer-events: none;
  z-index: 2;
}
.w2-vergleich__griff::after {
  content: "‹ ›";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--w2-creme);
  color: var(--w2-nacht);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.3);
}
.w2-vergleich:has(.w2-vergleich__regler:focus-visible) .w2-vergleich__griff::after { outline: 3px solid var(--w2-licht); outline-offset: 3px; }
.w2-vergleich__regler {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 3;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}
.w2-vergleich__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 3rem; height: 100vh; }
.w2-vergleich__regler::-moz-range-thumb { width: 3rem; height: 100vh; border: 0; }
@media (min-width: 48rem) {
  .w2-vergleich { aspect-ratio: 16 / 10; }
}

/* ?stil=nah (12.10.2026): erst rückte die Kamera an den Laden heran; Jana
   wollte dann doch die Perspektive von vorher, mit dem ganzen Haus — nur die
   Nachbarn bleiben angedeutet. */
/* Die Nachbarn nur noch angedeutet (Jana am 12.10.2026: "so dass wirklich
   unser Haus im Mittelpunkt"): schmale, blasse Flächen ohne Fenster und
   Bögen, die in den Himmel übergehen. */
.w2-fassade--nah .w2-gasse { justify-content: center; }
.w2-fassade--nah .w2-nachbar {
  flex: 0 1 clamp(1.2rem, 9vw, 8rem);
  height: 64%;
  padding: 0;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
  mask-image: linear-gradient(transparent, #000 45%);
}
.w2-fassade--nah .w2-nachbar--rechts { height: 58%; }
.w2-fassade--nah .w2-nachbar span,
.w2-fassade--nah .w2-nachbar::after { display: none; }

/* Vier Vorschläge für die Nachbarn (?nachbarn=…, 12.10.2026: "das
   Angedeutete ist mir noch zu wenig"). Euer Haus bleibt, wie es ist; die
   Nachbarn werden breiter und deutlicher, aber nie so laut wie euer Haus. */
.w2-fassade[class*="w2-nachbarn--"] .w2-nachbar { flex: 0 1 clamp(2.4rem, 16vw, 15rem); -webkit-mask-image: none; mask-image: none; }

/* 1 · Umriss: nur gezeichnet, feine helle Linien wie die Skizzen drinnen. */
.w2-nachbarn--umriss .w2-nachbar,
.w2-nachbarn--umriss .w2-nachbar--rechts {
  height: 84%;
  opacity: 1;
  padding: clamp(1rem, 4svh, 2rem) clamp(0.6rem, 2.4vw, 2rem) 0;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgb(253 243 207 / 0.35);
}
.w2-nachbarn--umriss .w2-nachbar--rechts { height: 78%; }
.w2-nachbarn--umriss.w2-fassade--tag .w2-nachbar { box-shadow: inset 0 0 0 1.5px rgb(18 27 59 / 0.3); }
.w2-nachbarn--umriss .w2-nachbar span { display: block; background: transparent; box-shadow: inset 0 0 0 1.5px rgb(253 243 207 / 0.3); }
.w2-nachbarn--umriss.w2-fassade--tag .w2-nachbar span { box-shadow: inset 0 0 0 1.5px rgb(18 27 59 / 0.25); }

/* 2 · Giebel: Altstadthäuser als Scherenschnitt — die Landshuter Giebel in
   einer Farbe, ohne Fenster. */
.w2-nachbarn--giebel .w2-nachbar,
.w2-nachbarn--giebel .w2-nachbar--rechts {
  height: 92%;
  opacity: 1;
  background: color-mix(in srgb, var(--e-himmel, #121b3b) 72%, #6a5a7e);
  clip-path: polygon(0 16%, 18% 16%, 18% 9%, 34% 9%, 34% 3%, 50% 0, 66% 3%, 66% 9%, 82% 9%, 82% 16%, 100% 16%, 100% 100%, 0 100%);
}
.w2-nachbarn--giebel .w2-nachbar--rechts {
  height: 84%;
  clip-path: polygon(0 12%, 50% 0, 100% 12%, 100% 100%, 0 100%);
}
.w2-nachbarn--giebel.w2-fassade--tag .w2-nachbar { background: color-mix(in srgb, #dfe9f1 55%, #b9a99a); }
.w2-nachbarn--giebel.w2-fassade--nacht .w2-nachbar { background: color-mix(in srgb, #121b3b 70%, #6a5a7e); }

/* 3 · Blass: die Nachbarn wie vorher mit Fenstern und Bögen, aber
   zurückgenommen — halb durchsichtig, in den Himmel verlaufend. */
.w2-nachbarn--blass .w2-nachbar,
.w2-nachbarn--blass .w2-nachbar--rechts { height: 86%; padding: clamp(1rem, 4svh, 2rem) clamp(0.6rem, 2.4vw, 2rem) 0; opacity: 0.45; }
.w2-nachbarn--blass .w2-nachbar--rechts { height: 80%; }
.w2-nachbarn--blass .w2-nachbar span,
.w2-nachbarn--blass .w2-nachbar::after { display: block; }
.w2-nachbarn--blass .w2-nachbar span { display: block; }

/* 4 · Schatten: dunkle Flächen wie Häuser im Gegenlicht, nur ein paar warme
   Fenster leuchten — nachts besonders. */
.w2-nachbarn--schatten .w2-nachbar,
.w2-nachbarn--schatten .w2-nachbar--rechts {
  height: 88%;
  opacity: 1;
  padding: clamp(1rem, 4svh, 2rem) clamp(0.6rem, 2.4vw, 2rem) 0;
  background: color-mix(in srgb, #121b3b 80%, #000);
}
.w2-nachbarn--schatten .w2-nachbar--rechts { height: 80%; }
.w2-nachbarn--schatten.w2-fassade--tag .w2-nachbar { background: color-mix(in srgb, #dfe9f1 40%, #7c8aa6); }
.w2-nachbarn--schatten .w2-nachbar span { display: block; background: transparent; box-shadow: none; }
.w2-nachbarn--schatten .w2-nachbar span:nth-child(3n + 2) { background: rgb(226 191 127 / 0.55); box-shadow: none; }
.w2-nachbarn--schatten.w2-fassade--tag .w2-nachbar span:nth-child(3n + 2) { background: rgb(255 255 255 / 0.35); }

/* Kleine Handys (wenig Höhe): der Kopf rückt zusammen, damit Haus und Tür
   genug Platz behalten — die Zeile mit den heutigen Zeiten fällt weg (der
   Status steht ja da), der Gruß wird etwas kleiner. */
@media (max-height: 46rem) {
  .w2-fassade--modern .w2-fassade__zeit { display: none; }
  .w2-fassade--modern .w2-fassade__gruss { margin: 0.7rem 0 0; font-size: 2rem; }
  .w2-fassade--modern .w2-fassade__zuruf { margin-top: 0.6rem; }
  /* Kleinere Fenster, ein engerer Kopf und die Tür höher im Bogen, damit
     sie nicht gequetscht wird (Jana am 12.10.2026). */
  .w2-fassade--modern .w2-haus__fenster span { width: min(70%, 5.6svh); }
  .w2-fassade--modern .w2-haus { gap: clamp(0.5rem, 2svh, 0.9rem); }
  .w2-fassade--modern .w2-fassade__kopf { padding-block: 0.6rem 0.2rem; row-gap: 0.3rem; }
  .w2-fassade--modern .w2-fassade__zuruf { margin-top: 0.45rem; }
  .w2-fassade--modern .w2-fassade__zuruf + .w2-fassade__gruss { margin-top: 0.15rem; }
  .w2-fassade--modern .w2-tuer { height: 86%; }
  .w2-fassade--modern .w2-tuer__glas { margin-top: 2.1rem; }
}
}

/* Auf allen Handys: die Tür höher im Bogen und die Fenster etwas kleiner —
   mit Zuruf und Gruß darüber blieb ihr sonst zu wenig Höhe (Jana am
   12.10.2026: "die türe ist jetzt gequetscht"). */
@media (max-width: 47.99rem) {
  .w2-fassade--modern .w2-tuer { height: 86%; }
  .w2-fassade--modern .w2-tuer__glas { margin-top: clamp(2.1rem, 5svh, 2.8rem); }
  .w2-fassade--modern .w2-haus__fenster span { width: min(72%, 7svh); }
  /* Weniger Boden und ein engerer Kopf: Der Platz geht an die Tür. */
  .w2-fassade--modern .w2-boden { height: clamp(2.2rem, 5svh, 3rem); }
  .w2-fassade--modern .w2-haus { gap: clamp(0.5rem, 2svh, 1.1rem); }
  .w2-fassade--modern .w2-fassade__zuruf { margin-top: clamp(0.45rem, 2.4svh, 1.4rem); }
}

/* Handy mit wenig Höhe (Safari mit Adressleiste): Der Platz kommt aus dem
   oberen Haus — kleinere Fenster, ein schmaleres Schild, weniger Rand und
   Boden —, nicht von der Tür (Jana am 15.10.2026: "nimm lieber was von der
   oberen Fassade weg, nicht die Tür kleiner machen"). */
@media (max-width: 47.99rem) and (max-height: 54rem) {
  .w2-fassade--modern .w2-haus { padding-top: 0.6rem; gap: 0.45rem; }
  .w2-fassade--modern .w2-haus__fenster { row-gap: 0.45rem; }
  .w2-fassade--modern .w2-haus__fenster span { width: min(52%, 4.4svh); }
  .w2-fassade--modern .w2-haus__schild { padding-block: 0.3rem; }
  .w2-fassade--modern .w2-haus__logo { height: clamp(1.5rem, 4.4svh, 2rem); }
  .w2-fassade--modern .w2-haus__probename { font-size: clamp(1.3rem, 4svh, 1.8rem); }
  .w2-fassade--modern .w2-boden { height: 1.4rem; }
}

/* Die Tür in echtem Türformat — etwas höher als breit (Jana am 12.10.2026:
   "die tür ist immer noch gequetscht"). Die Höhe gibt der Bogen vor, die
   Breite folgt daraus; vorher füllte sie die ganze Breite und wurde flach. */
.w2-fassade--modern .w2-tuer__glas {
  flex: 1 1 0;
  align-self: center;
  width: auto;
  max-width: 100%;
  aspect-ratio: 5 / 6;
}
/* Auch am Rechner bekommt der Bogen mehr Höhe: weniger Boden, kleinere
   Fenster, ein engerer Kopf — der Platz geht an die Tür. */
@media (min-width: 48rem) {
  .w2-fassade--modern .w2-boden { height: clamp(2.4rem, 6svh, 3.6rem); }
  .w2-fassade--modern .w2-haus { gap: clamp(0.6rem, 2svh, 1.2rem); }
  .w2-fassade--modern .w2-haus__fenster span { width: min(70%, 7svh); }
  .w2-fassade--modern .w2-fassade__zuruf { margin-top: clamp(0.4rem, 2svh, 1.2rem); }
  .w2-fassade--modern .w2-tuer { height: 88%; }
  .w2-fassade--modern .w2-tuer__glas { margin-top: clamp(1.8rem, 4svh, 2.6rem); }
}

/* Ein anderer Name über der Tür (?name=…, nur zum Ansehen): hell auf
   Nachtblau wie der Schriftzug, nachts leuchtend. */
.w2-haus__probename {
  display: grid;
  justify-items: center;
  color: var(--w2-creme);
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(1.5rem, 4.4svh, 2.4rem);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.w2-haus__probename small {
  margin-top: 0.3em;
  font-family: "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: 0.36em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.w2-fassade--nacht .w2-haus__probename { text-shadow: 0 0 4px rgb(255 214 140 / 0.9), 0 0 14px rgb(240 120 60 / 0.65); }

/* Kein Pflaster mehr (Jana am 12.10.2026: "nur verwirrend, man erkennt
   nicht, was gemeint ist") — der Boden ist eine ruhige Fläche ohne Fugen,
   auf der Haus und Terrasse stehen. */
.w2-fassade--modern .w2-boden { background: var(--e-boden); }

/* Je Name eine eigene Schrift (Jana am 12.10.2026): Leckomio in Lilita One,
   Glücksverkatert in Grandstander. Beide liegen im Projekt (Google Fonts, OFL)
   und werden nur auf /website3 und /website4 geladen — @font-face lädt eine
   Schrift erst, wenn sie gebraucht wird. MILA. bleibt in seinem Schriftzug. */
@font-face {
  font-family: "Lilita One";
  src: url("/assets/lilita-one-latin-700eecc0.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grandstander";
  src: url("/assets/grandstander-latin-033d2354.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
.w2-name--leckomio { font-family: "Lilita One", "Bricolage Grotesque", sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0.01em; }
.w2-name--gluecksverkatert { font-family: "Grandstander", "Bricolage Grotesque", sans-serif; font-style: normal; font-weight: 900; letter-spacing: 0; }
/* Der lange Name passt sonst nicht aufs Schild. */
.w2-haus__probename.w2-name--gluecksverkatert { font-size: clamp(1.4rem, min(6.8vw, 4.6svh), 2.5rem); }
/* Größer auf dem Schild (Jana am 12.10.2026). */
.w2-haus__probename.w2-name--leckomio { font-size: clamp(1.9rem, 5.4svh, 3rem); }

/* Die Namen als Logo (Jana am 13.10.2026): die Punkte leuchten in der Farbe
   der Lichterkette, mit weichem Schein — bei Leckomio der i-Punkt, bei Glücksverkatert beide
   ü-Punkte. Jeder Punkt ist ein leerer Inline-Block: er steht mit der
   Unterkante auf der Grundlinie und wird von dort hochgeschoben; die
   Ränder heben seine Breite auf, damit nichts verrutscht. Maße gemessen an
   Lilita One und Grandstander 900 (in em, Mitte und Radius). */
.w2-leuchti::after,
.w2-leuchtue::before,
.w2-leuchtue::after {
  content: "";
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  width: calc(2 * var(--r));
  height: calc(2 * var(--r));
  bottom: calc(var(--hoch) - var(--r));
  border-radius: 50%;
  background: var(--w2-licht);
  box-shadow: 0 0 0 calc(var(--r) * .6) rgb(255 196 92 / .3), 0 0 calc(var(--r) * 2) calc(var(--r) * .7) rgb(255 196 92 / .35);
}
/* i: 0.249em breit, Punkt mittig, 0.646em hoch, Radius 0.086em */
.w2-leuchti::after { --r: .086em; --hoch: .646em; margin: 0 calc(.1245em - var(--r)) 0 calc(-.1245em - var(--r)); }
/* u: 0.589em breit, Punkte bei 0.174em und 0.396em, 0.681em hoch, Radius 0.094em */
.w2-leuchtue::before { --r: .094em; --hoch: .681em; margin: 0 calc(-.174em - var(--r)) 0 calc(.174em - var(--r)); }
.w2-leuchtue::after { --r: .094em; --hoch: .681em; margin: 0 calc(.193em - var(--r)) 0 calc(-.193em - var(--r)); }

/* Der Name als Wortmarke oben im Hero und im Fuß. */
.w2-wortmarke { margin: 0 0 clamp(1.2rem, 4svh, 2.2rem) !important; color: var(--w2-creme); font-size: clamp(2rem, 8vw, 3rem); line-height: 1; }
.w2-fuss__name { color: var(--w2-creme); font-size: 1.6rem; line-height: 1; }
.w2-name--bricolage { font-family: "Bricolage Grotesque", "Schibsted Grotesk", sans-serif; font-style: normal; font-weight: 800; letter-spacing: -0.02em; }
.w2-haus__probename.w2-name--bricolage { font-size: clamp(1.3rem, min(6.4vw, 4.2svh), 2.2rem); }

/* Der Name als Hero (/website3, /website4): groß in seiner Schrift, darunter
   die drei Wörter als eine Zeile in der Schrift der Website. */
.w2-hero.w2-hero--name { color: var(--w2-creme); font-size: clamp(3.4rem, 18vw, 8.5rem) !important; line-height: 0.95 !important; white-space: nowrap; }
/* Die Schrift des Namens gegen die der Überschriften durchsetzen. */
.w2-inhalt .w2-hero--name.w2-name--leckomio { font-family: "Lilita One", "Bricolage Grotesque", sans-serif !important; font-weight: 400 !important; letter-spacing: 0.01em !important; }
.w2-inhalt .w2-hero--name.w2-name--gluecksverkatert { font-family: "Grandstander", "Bricolage Grotesque", sans-serif !important; font-weight: 900 !important; letter-spacing: 0 !important; }
.w2-hero--name.w2-name--gluecksverkatert,
.w2-hero--name.w2-name--bricolage { font-size: clamp(2.2rem, 10.6vw, 3.8rem) !important; }
@media (min-width: 60rem) {
  .w2-hero.w2-hero--name { font-size: clamp(4rem, 8vw, 8.5rem) !important; }
  .w2-hero--name.w2-name--gluecksverkatert,
  .w2-hero--name.w2-name--bricolage { font-size: clamp(3rem, 5vw, 5.8rem) !important; }
}
.w2-hero-claim {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4em;
  margin: 0.6rem 0 0 !important;
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(1.3rem, 5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Was der Name bedeutet (nur /website3, /website4) — anstelle der zwei
   Zeilen unter dem Hero. */
.w2-namensgeschichte { display: grid; gap: 0.6rem; max-width: none; margin-top: clamp(1.8rem, 5svh, 2.8rem) !important; }
.w2-namensgeschichte .w2-satz { margin: 0 !important; }
/* Die Geschichte nutzt die ganze Breite ihrer Spalte (Jana am 12.10.2026:
   "die volle Breite nutzen"), und die Spalte wird am Rechner breiter. */
.w2-buehne-text .w2-namensgeschichte .w2-satz { max-width: none; }
@media (min-width: 48rem) {
  .w2-inhalt > #hallo:has(.w2-namensgeschichte) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr); }
}

/* Der Hero rückt tiefer, weg vom Laufband, damit der Name — MILA.,
   Leckomio, Glücksverkatert — mehr im Mittelpunkt steht; am Rechner nehmen
   die Bögen rechts mehr Platz ein (Jana am 12.10.2026). */
.w2-inhalt > #hallo { padding-top: calc(var(--w2-band) + clamp(3.4rem, 10svh, 5.5rem)); }
@media (min-width: 48rem) {
  .w2-inhalt > #hallo { padding-top: calc(var(--w2-band) + clamp(5rem, 16svh, 10rem)); }
  .w2-inhalt > #hallo,
  .w2-inhalt > #hallo:has(.w2-namensgeschichte) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  #hallo .w2-fenster { width: 100%; max-width: 44rem; }
}

/* Die ganze Geschichte des Namens, vor "Über uns" (nur Namensproben). */
.w2-namenskachel { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.w2-namenskachel .w2-satz { max-width: 44rem; color: var(--w2-nacht); }
.w2-namenskachel .w2-namenskachel__schluss {
  color: var(--w2-creme);
  font-family: "Bricolage Grotesque", "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Die Reservieren-Kachel in anderen Farben zum Vergleichen (?tuer=…,
   12.10.2026) — das Rot kommt sonst nirgends mehr vor. */
.w2-tuerkachel--orange { background: var(--w2-orange); }
.w2-tuerkachel--orange .w2-etikett,
.w2-tuerkachel--orange .w2-satz,
.w2-tuerkachel--orange .w2-tuerkachel__link { color: var(--w2-nacht); }
.w2-tuerkachel--orange h2 { color: var(--w2-creme); }
.w2-tuerkachel--orange .w2-knopf--linie { border-color: var(--w2-nacht); color: var(--w2-nacht); }

.w2-tuerkachel--creme { background: var(--w2-creme); }
.w2-tuerkachel--creme h2,
.w2-tuerkachel--creme .w2-satz,
.w2-tuerkachel--creme .w2-tuerkachel__link { color: var(--w2-nacht); }
.w2-tuerkachel--creme .w2-etikett { color: var(--w2-orange); }
.w2-tuerkachel--creme .w2-knopf--hell { background: var(--w2-orange); color: var(--w2-creme); }
.w2-tuerkachel--creme .w2-knopf--linie { border-color: var(--w2-nacht); color: var(--w2-nacht); }

.w2-tuerkachel--blau { background: #24316a; box-shadow: inset 0 0 0 1px var(--w2-linie); }
.w2-tuerkachel--blau .w2-etikett { color: var(--w2-orange-hell); }
.w2-tuerkachel--blau .w2-knopf--hell { background: var(--w2-orange); color: var(--w2-creme); }

/* Kobalt statt Nachtblau (?farbe=kobalt, Vergleich vom 13.10.2026): nur die
   Blautöne tauschen, alles andere bleibt. Creme auf Kobalt: 8,7 : 1 —
   Orange-hell als kleine Etikettschrift nur noch 3,9 : 1. */
body.website2.w2-kobalt {
  --w2-nacht: #1d3b9e;
  --w2-tiefer: #152d80;
  --w2-tief: #2a4cb8;
  --w2-blau: #3358c8;
  background: var(--w2-nacht);
}
html.w2-zeit--tag body.website2.w2-kobalt { background: #2346b0; }
html.w2-zeit--tag body.website2.w2-kobalt .w2-kachel:not(.w2-hell):not(.w2-kachel--orange):not(.w2-kachel--leise) { background: #2c52bf; }
/* Auf Orange bleibt die Schrift Nachtblau — Kobalt auf Orange wäre zu schwach. */
body.website2.w2-kobalt .w2-tuerkachel--orange .w2-etikett,
body.website2.w2-kobalt .w2-tuerkachel--orange .w2-satz,
body.website2.w2-kobalt .w2-tuerkachel--orange .w2-tuerkachel__link,
body.website2.w2-kobalt .w2-tuerkachel--orange .w2-knopf--hell { color: #121b3b; }
body.website2.w2-kobalt .w2-tuerkachel--orange .w2-knopf--linie { border-color: #121b3b; color: #121b3b; }

/* Tagsüber frischer (?farbe=tagfrisch, 13.10.2026): nur bei Tag rückt das
   Blau zwischen Nachtblau und Kobalt; nachts bleibt alles, wie es ist.
   Creme 10,6 : 1, Orange-hell 4,7 : 1 auf dem Grund. */
html.w2-zeit--tag body.website2.w2-tagfrisch {
  --w2-nacht: #1b3080;
  --w2-tiefer: #152667;
  --w2-tief: #22378a;
  --w2-blau: #2a4296;
  background: #1b3080;
}
html.w2-zeit--tag body.website2.w2-tagfrisch .w2-kachel:not(.w2-hell):not(.w2-kachel--orange):not(.w2-kachel--leise) { background: #22378a; }
html.w2-zeit--tag body.website2.w2-tagfrisch .w2-fakten { --fakt-grund: #22378a; }
html.w2-zeit--tag body.website2.w2-tagfrisch .w2-tuerkachel--orange .w2-etikett,
html.w2-zeit--tag body.website2.w2-tagfrisch .w2-tuerkachel--orange .w2-satz,
html.w2-zeit--tag body.website2.w2-tagfrisch .w2-tuerkachel--orange .w2-tuerkachel__link,
html.w2-zeit--tag body.website2.w2-tagfrisch .w2-tuerkachel--orange .w2-knopf--hell { color: #121b3b; }
html.w2-zeit--tag body.website2.w2-tagfrisch .w2-tuerkachel--orange .w2-knopf--linie { border-color: #121b3b; color: #121b3b; }
/* Etiketten auf den dunklen Kacheln eine Spur heller, damit sie lesbar
   bleiben (5 : 1). */
html.w2-zeit--tag body.website2.w2-tagfrisch .w2-kachel:not(.w2-hell):not(.w2-kachel--orange) .w2-etikett { color: #f99a74; }

/* Am Handy passt die Statuszeile in eine Zeile, neben Sonne und Mond (Jana am
   13.10.2026: "die Handyseite ist immer noch nicht perfekt"). */
@media (max-width: 47.99rem) {
  body.website2 .w2-laufband__status { font-size: 0.7rem; letter-spacing: 0.03em; gap: 0.45rem; }
  body.website2 .w2-laufband em::before { margin-inline: 0.35rem; }
  /* Passt es doch nicht in eine Zeile, dann zwei gleich lange statt einem
     einsamen "UHR". */
  /* Jeder Teil bleibt zusammen; reicht der Platz nicht, bricht es am Stern
     um — nie mitten im Satz (Jana am 13.10.2026: "nach morgen ist ein
     Absatz"). */
  body.website2 .w2-laufband__teil { white-space: nowrap; }
}

/* Parallax zum Ausprobieren (Jana am 13.10.2026, mit ?parallax): die Bögen
   als Fenster — der Rahmen bleibt, dahinter wandert die Skizze (später das
   Foto) gegenläufig, etwas größer, damit nie ein Rand sichtbar wird. Im Hero
   gleiten die drei Bögen dazu unterschiedlich schnell. --p setzt
   parallax_controller.js. */
@media (prefers-reduced-motion: no-preference) {
  /* In jedem Bogen: die Skizze gegenläufig, wie hinter einem Fenster. */
  .w2-parallax .w2-bogen > svg,
  .w2-parallax .w2-bogen > img,
  .w2-parallax .w2-bogen > picture {
    transform: translateY(calc(clamp(-1, var(--p, 0), 1) * -12%)) scale(1.3);
    will-change: transform;
  }
  /* Im Hero: der Text bleibt zurück, die Bögen ziehen unterschiedlich schnell
     davon — der mittlere am schnellsten. Ganz oben steht alles still. */
  .w2-parallax #hallo .w2-buehne-text { transform: translateY(calc(var(--s, 0) * 7rem)); opacity: calc(1 - var(--s, 0) * 0.5); will-change: transform; }
  .w2-parallax #hallo .w2-fenster .w2-bogen { will-change: transform; }
  .w2-parallax #hallo .w2-fenster .w2-bogen:nth-child(1) { transform: translateY(calc(var(--s, 0) * -4rem)); }
  .w2-parallax #hallo .w2-fenster .w2-bogen:nth-child(2) { transform: translateY(calc(var(--s, 0) * -9rem)); }
  .w2-parallax #hallo .w2-fenster .w2-bogen:nth-child(3) { transform: translateY(calc(var(--s, 0) * -2rem)); }
}
/* Am Handy stehen Text und Bögen untereinander: beide bleiben zurück, die
   Bögen weniger als der Text — so überlappen sie nie. */
@media (prefers-reduced-motion: no-preference) and (max-width: 47.99rem) {
  .w2-parallax #hallo .w2-buehne-text { transform: translateY(calc(var(--s, 0) * 2.2rem)); }
  .w2-parallax #hallo .w2-fenster .w2-bogen:nth-child(1) { transform: translateY(calc(var(--s, 0) * 0.9rem)); }
  .w2-parallax #hallo .w2-fenster .w2-bogen:nth-child(2) { transform: translateY(calc(var(--s, 0) * 0.2rem)); }
  .w2-parallax #hallo .w2-fenster .w2-bogen:nth-child(3) { transform: translateY(calc(var(--s, 0) * 1.4rem)); }
}

/* Das Martiniglas rechts oben in der Kachel (Jana am 14.10.2026). */
.w2-kachel--zeichen { position: relative; padding-right: clamp(4.5rem, 14vw, 6rem); }
.w2-kachel--zeichen .eventzeichen { position: absolute; top: var(--w2-luft); right: var(--w2-luft); }
.eventzeichen { width: clamp(2.6rem, 8vw, 3.4rem); height: auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eventzeichen__olive { fill: #8fae5a; stroke-width: 1.6; }
.w2-kachel--zeichen .eventzeichen path { fill: none; stroke: currentColor; }
.w2-kachel--zeichen .eventzeichen .eventzeichen__olive { stroke: currentColor; }