/* =====================================================================
   間 - MA BAR · CI-Entwurf · gemeinsame Grundlage aller Entwurfsseiten
   TEMPORÄRE ARBEITSDATEI - nicht committen, nicht deployen.
   Wird von ci-preview.html, ci-karte.html, ci-events.html, ci-about.html
   geladen. Alles was auf mehr als einer Seite vorkommt, steht hier.
   ===================================================================== */

/* ---- Schriften · selbst gehostet, keine Fremdaufrufe ---- */
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/host-grotesk/host-grotesk-400.woff2') format('woff2');}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/host-grotesk/host-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/host-grotesk/host-grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/host-grotesk/host-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/host-grotesk/host-grotesk-800.woff2') format('woff2');}
/* Die Gegenschrift · nur für ein einziges Wort im Titelbild.
   Libre Baskerville Italic, SIL OFL, selbst gehostet. Eine Übergangs-Antiqua
   mit ruhigem Kontrast und großer x-Höhe, also das Gegenteil der Groteske -
   genau darum funktioniert der Bruch. Sonst nirgends einsetzen.
   Instrument Serif liegt weiter daneben, falls wir zurückwollen. */
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/libre-baskerville/libre-baskerville-italic.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/instrument-serif/instrument-serif-italic.woff2') format('woff2');}
/* Inter fuer Fliesstext. Einmal war alles Monospace - das war zu technisch:
   eine Monospace bedeutet Maschine, Beleg, Labor. Auf der Karte ist das ein
   Gewinn, ueber die ganze Seite widerspricht es dem, wofuer 間 steht. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-v20-latin/inter-v20-latin-regular.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-v20-latin/inter-v20-latin-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-v20-latin/inter-v20-latin-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/inter-v20-latin/inter-v20-latin-700.woff2') format('woff2');}

:root{
  /* ====== FLÄCHENFARBEN · mehr gibt es nicht ===========================
     Weiß trägt die Seite. Salbei und Tanne sind die beiden Akzentflächen und
     kommen beide aus dem Logo. Ivory ist die Ruhefläche und zugleich die
     Schrift auf Tanne. Mauve ist die einzige Signalfarbe.
     Burgund ist raus - die kleinen Akzente traegt jetzt das Tannengruen.
     (Salbei als Grundfläche wurde verworfen: darauf käme der Fließtext nur
     auf 3,3:1 und die Eyebrows auf 3,0:1, beide fallen durch.)             */
  --grund:#FFFFFF;          /* Grundfläche */
  --weiss:#FFFFFF;
  --ivory:#F3EEE7;          /* Ruhefläche · und Schrift auf Tanne */
  --salbei:#B8C199;         /* volle Akzentfläche · aus dem Logo */
  --tanne:#2E3626;          /* dunkle Akzentfläche · aus dem Logo */
  --mauve:#C199A3;          /* Signalfarbe · Salbei-Zwilling, Farbton 345° */
  --mauve-hell:#D9C8CC;     /* dieselbe Signalfarbe, aufgehellt */

  /* ====== SCHRIFTFARBEN · neutral, jede auf ihrer Fläche geprüft =========
     Schwarz statt Dunkelgrün. Nicht #000: auf großen Weißflächen flimmern
     reine Schwarzkanten (Halation). #111 liest als Schwarz bei 18,9:1.
     Grün bleibt damit nur noch den Flächen, nicht mehr der Schrift.      */
  --ink:#111111;            /* Überschriften und Fließtext · 18,9:1 auf Weiß */
  --ink-soft:#555555;       /* zweite Ordnung ·  7,5:1 auf Weiß */
  --ink-mute:#6B6B6B;       /* Eyebrows, Etiketten · 5,3:1 auf Weiß, 4,6:1 auf Ivory */
  --auf-salbei:#1F1F1F;     /*  8,7:1 auf Salbei */
  --auf-salbei-soft:#333333;/*  6,7:1 auf Salbei */
  --auf-mauve:#333333;      /*  7,9:1 auf Mauve-hell */
  --auf-mauve-stark:#1A1A1A;/* 10,8:1 auf Mauve-hell */
  --auf-tanne:#F3EEE7;      /* = Ivory · 10,9:1 auf Tanne */
  --auf-tanne-soft:#C6CDB8; /*  7,7:1 auf Tanne */
  --auf-foto-soft:#E4E7DA;  /* Fliesstext auf dem Titelbild */

  /* ====== LINIEN · neutral, passend zur schwarzen Schrift =============== */
  --line:rgba(17,17,17,.13);
  --line-stark:rgba(17,17,17,.20);
  --line-hell:rgba(255,255,255,.22);   /* auf Foto und auf Tanne */
  --line-punkt:rgba(17,17,17,.24);   /* Punktlinie in Karten- und Preiszeilen */

  /* ====== VIER ECKENRADIEN · mehr gibt es nicht ========================
     s  Etiketten und Allergenkürzel
     m  Eingabefelder und kleine Kästen
     l  Karten und Fotos
     xl große Farbflächen                                                  */
  /* Zwei Radien, mehr nicht. Vorher waren vier Flaechenwerte im Einsatz
     (6/14/22/32px) plus die Pille - fuenf Rundungen auf einer Seite liest
     niemand als System. Die vier alten Namen zeigen jetzt alle auf
     denselben Wert, damit die 43 Verwendungsstellen stehen bleiben
     koennen. Echte Kreise (50%) sind Geometrie, keine Rundung, und
     bleiben davon unberuehrt. */
  --r-flaeche:18px;
  --r-s:var(--r-flaeche);
  --r-m:var(--r-flaeche);
  --r-l:var(--r-flaeche);
  --r-xl:var(--r-flaeche);
  --r-pill:999px;

  /* ---- Ladeflaechen ---------------------------------------------------
     Der Platzhalter borgt sich Ivory, also dieselbe Ruheflaeche, die
     .week__buehne und .kach__bild ohnehin zeigen - er liest sich damit als
     leere Flaeche und nicht als Fremdkoerper. Der Glanz ist Weiss, der
     Unterschied also winzig: es soll erkennbar sein, dass da noch etwas
     kommt, ohne dass die Seite beim Laden zu blinken anfaengt. */
  --skel:var(--ivory);
  --skel-glanz:rgba(255,255,255,.92);

  /* Kopf in zwei Zeilen: schmale Servicezeile über der Hauptnavigation */
  --hd-util:42px;
  --hd-main:74px;
  --hd-h:calc(var(--hd-util) + var(--hd-main));
}

html{font-size:110%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 16px);}
*{box-sizing:border-box;margin:0;padding:0;}
/* ---- Vier Stimmen, eine Frage -----------------------------------------
   Sagt die Bar das, oder verzeichnet sie es?

     sagt        Host Grotesk        Ueberschriften, Knoepfe, Navigation
     erzaehlt    Inter               Fliesstext
     verzeichnet Monospace           Preise, Zeiten, Daten, Mengen, Karte
     fuehlt      Baskerville kursiv  vier Stellen, mehr nicht

   Die Monospace ist damit kein Dekor, sondern hat einen Grund: Ziffern
   stehen untereinander, Preise lassen sich vergleichen. Einmal lief die
   ganze Seite in ihr - lesbar war das, aber es klang nach Laborbericht,
   und 間 heisst der Raum dazwischen, nicht die Messreihe.              */
/* Der Grund ist das Papierbild aus der Vorlage - ein gefalteter Bogen mit
   dem Zeichen als Raster. Vorher waren die Falze aus zwei CSS-Verlaeufen
   gebaut; jetzt bringt das Bild seine eigenen mit, samt Papierstruktur,
   und die Verlaeufe sind raus - zwei Raster uebereinander waeren ein Karo.

   Das Zeichen im Bild stand mit 106 Helligkeitsstufen gegen das Papier,
   viel zu laut hinter Text. Es ist ueber eine Maske auf 24 Stufen
   zurueckgenommen, waehrend Struktur und Falze mit 13 Stufen unberuehrt
   bleiben - haette ich das ganze Bild aufgehellt, waere beides mit
   verschwunden.

   cover und fixed: ein Bogen hinter der ganzen Seite, nicht gekachelt.
   Damit gibt es keine Naht und kein sichtbares Wiederholen.          */
body{font-family:'Inter',-apple-system,sans-serif;color:var(--ink);line-height:1.55;
  overflow-x:hidden;
  background-color:var(--papier);
  background-image:url('../assets/img/papier-hauch.webp');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;}
/* Der Rand wächst mit der Fensterbreite mit. Eine feste Spalte liess auf
   breiten Schirmen über 300 px toten Rand je Seite stehen. */
.wrap{width:100%;max-width:1380px;margin:0 auto;position:relative;
  padding-inline:clamp(1.25rem,5vw,4.5rem);}
/* Der Icon-Generator vergibt class="lucide" - nicht "ic". */
svg.lucide{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;}

/* ---- Überschriften: Host Grotesk ---- */
h1,h2,.card__date,.tl__y{font-family:'Host Grotesk',sans-serif;}
h1{font-size:var(--t-display);font-weight:700;letter-spacing:var(--ls-eng);line-height:.94;text-transform:uppercase;}
h2{font-size:var(--t-xl);font-weight:700;letter-spacing:var(--ls-eng);line-height:.98;text-transform:uppercase;}
h3{font-size:var(--t-l);font-weight:700;letter-spacing:var(--ls-eng);line-height:1.25;}
.lead{font-size:var(--t-l);color:var(--ink-soft);line-height:1.6;font-weight:400;}
.eyebrow{display:block;font-size:var(--t-s);font-weight:600;letter-spacing:0;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.9rem;}

/* ---- Das 間 ----------------------------------------------------------
   Das Zeichen kommt als Form direkt aus dem Logo, nicht aus einer Schrift.
   Damit stimmt es exakt mit dem Logo überein - eine CJK-Schrift zeichnet das
   Zeichen anders und Host Grotesk enthält gar kein CJK. Die Farbe steuert
   background-color, deshalb funktioniert es hell wie dunkel.
   assets/img/ma-kanji.svg ist aus logo-forest.png nachgezeichnet.        */
.kanji{display:inline-block;width:1em;height:1em;background-color:currentColor;
  -webkit-mask:url('../assets/img/ma-kanji.svg') no-repeat center/contain;
          mask:url('../assets/img/ma-kanji.svg') no-repeat center/contain;
  vertical-align:-0.09em;flex-shrink:0;}

/* ---- Knöpfe ---- */
/* ---- Knoepfe -----------------------------------------------------------
   Vorher: 15/30px Polster, 16px Inter fett, und beim Ueberfahren huepfte
   die Pille zwei Pixel nach oben. Das ist der Knopf, den jede Seite hat.

   Jetzt tragen sie die Monospace - dieselbe Schrift, in der die Karte
   gesetzt ist. Damit haben die Bedienelemente eine eigene Stimme, statt
   sich die des Fliesstextes zu borgen, und die Seite klingt ueberall nach
   derselben Marke. Kleiner, enger, ohne Huepfen: beim Ueberfahren wandert
   nur die Farbe nach Tinte und der Pfeil einen Hauch nach rechts.       */
.btn{display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.35rem;border:none;border-radius:var(--r-pill);cursor:pointer;
  font-family:'Host Grotesk',sans-serif;font-size:var(--t-s);font-weight:700;
  letter-spacing:var(--ls-eng);line-height:1.1;
  text-decoration:none;background:var(--salbei);color:var(--weiss);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.btn:hover{background:var(--ink);color:var(--weiss);}
/* Der Pfeil zieht mit - die einzige Bewegung, die ein Knopf hier macht. */
.btn svg.lucide{transition:transform .22s cubic-bezier(.4,0,.2,1);}
.btn:hover svg.lucide{transform:translateX(3px);}
@media(prefers-reduced-motion:reduce){.btn svg.lucide{transition:none;}}
/* Knöpfe mit Lade-Zustand tragen ihre Beschriftung in einem span. Ohne eigenes
   Flex bricht das Icon darin um, weil svg.lucide display:block hat. */
.btn .btn-text,.btn .btn-loading{display:inline-flex;align-items:center;gap:.5rem;}
.btn--solid{background:var(--weiss);color:var(--ink);border:1px solid var(--line-stark);}
.btn--solid:hover{background:var(--ink);color:var(--weiss);border-color:var(--ink);}
.btn--outline{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn--outline:hover{background:var(--ink);color:var(--weiss);}
/* auf Salbeiflaechen, wo der Salbeiknopf verschwinden wuerde */
.btn--dark{background:var(--tanne);color:var(--weiss);}
.btn--dark:hover{background:var(--ink);}
/* Knopf ohne Fuellung: Versalien mit Unterstrich. Fuer die zweite Handlung
   neben dem gefuellten Knopf - zwei Pillen nebeneinander sind zu laut. */
.btn--linie{background:none;border:none;padding:2px 0;border-radius:0;
  color:var(--ink);font-family:'Host Grotesk',sans-serif;font-size:var(--t-s);font-weight:700;
  letter-spacing:var(--ls-eng);text-decoration:underline;
  text-underline-offset:.45em;text-decoration-thickness:1px;}
.btn--linie:hover{background:none;color:var(--ink);text-decoration-thickness:2px;}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .95rem;border-radius:var(--r-pill);
  background:var(--weiss);color:var(--ink);font-family:'Host Grotesk',sans-serif;
  font-size:var(--t-xs);font-weight:700;letter-spacing:0;margin-bottom:1.6rem;}

/* =====================================================================
   Kopf · liegt über dem Bild und wird beim Scrollen erst hell
   ===================================================================== */
header{position:sticky;top:0;z-index:60;height:var(--hd-h);background:transparent;border-bottom:1px solid transparent;
  transition:background .28s, border-color .28s, backdrop-filter .28s;
  /* negativer Außenabstand: das Titelbild rutscht unter die Leiste */
  margin-bottom:calc(-1 * var(--hd-h));}
/* Liegt der Kopf ueber einem hellen Titelbild, traegt er von Anfang an
   dunkle Schrift. Die Klasse setzt js/ci-entwurf.js, wenn die Seite ein
   .hero--hell hat. Ohne das waere die weisse Navigation unsichtbar. */
header.auf-hell .hd__util{border-bottom-color:var(--line);}
header.auf-hell .hd__util a{color:var(--ink-soft);}
header.auf-hell .hd__util a:hover{color:var(--ink);}
header.auf-hell .hd__logo{color:var(--ink);}
header.auf-hell .hd__nav a{color:var(--ink);}
header.auf-hell .nav-cta{background:none;color:var(--tanne)!important;
  border-color:rgba(74,30,24,.55);}
header.auf-hell .nav-cta:hover{border-color:var(--tanne);box-shadow:inset 0 0 0 1px var(--tanne);}
header.solid{background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);border-bottom-color:var(--line);}

/* Zeile 1 · Servicezeile: Kontakt und Sprache, rechtsbündig, bewusst leiser */
.hd__util{height:var(--hd-util);border-bottom:1px solid var(--line-hell);transition:border-color .28s;}
header.solid .hd__util{border-bottom-color:var(--line);}
/* Links die Oeffnungszeiten, rechts die Bedienung. Bisher stand hier nur
   "Contact" ganz rechts - eine Bar wird aber zuerst gefragt, wann sie auf
   hat, nicht wie man sie anschreibt. Contact bleibt daneben stehen und
   steht ausserdem im Menueblatt und im Fuss, geht also nicht verloren.
   Auf schmalen Schirmen tritt die Zeitangabe zurueck: dort zaehlt jeder
   Millimeter, und im Menueblatt steht sie ohnehin. */
.hd__util-in{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;height:100%;}
.hd__zeit{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.04em;
  color:rgba(255,255,255,.80);white-space:nowrap;transition:color .28s;}
header.solid .hd__zeit,header.auf-hell .hd__zeit{color:var(--ink-soft);}
.hd__util-rechts{display:flex;align-items:center;gap:.9rem;margin-left:auto;}
/* Contact steht jetzt als Zeichen neben der Sprachwahl. Bewusst ein
   Lucide-Zeichen und kein echtes Emoji: ein Emoji waere bunt, es wuerde
   auf jedem Geraet anders aussehen (Apple, Android und Windows zeichnen
   es jeweils eigen) und stuende als einziger Farbtupfer gegen eine
   durchgehend einfarbige Seite. Das Zeichen hier nimmt die Schriftfarbe
   an und passt zum Nachbarn, der schon eines ist.
   aria-label und title tragen den Namen - ohne sie waere der Verweis
   fuer Vorlesesoftware und fuer jeden, der das Symbol nicht deutet,
   einfach leer. */
.util-icon{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin:-6px;}
.util-icon svg.lucide{width:17px;height:17px;stroke-width:1.9;}
.util-icon[aria-current="page"]{color:var(--weiss);}
header.solid .util-icon[aria-current="page"],
header.auf-hell .util-icon[aria-current="page"]{color:var(--ink);}
@media(max-width:560px){.hd__zeit{display:none;}}
.hd__util a{display:inline-flex;align-items:center;color:rgba(255,255,255,.80);text-decoration:none;
  font-size:var(--t-s);font-weight:700;letter-spacing:0;text-transform:uppercase;transition:color .28s;}
.hd__util a:hover{color:var(--weiss);}
header.solid .hd__util a{color:var(--ink-soft);}
header.solid .hd__util a:hover{color:var(--ink);}
/* Sprachwahl wie auf der Innovation-Tank-Seite: nur das Icon, kein Umschalter */
.lang{padding:4px;}
.lang svg.lucide{width:17px;height:17px;stroke-width:2;}

/* Zeile 2 · Hauptnavigation */
.hd{display:flex;align-items:center;justify-content:space-between;height:var(--hd-main);}
/* Die Marke · das Zeichen steht frei, ohne Scheibe, klein.
   Nur hier oben links. Das vollständige Logo steht im Fuß. */
.hd__logo{display:inline-flex;align-items:center;flex-shrink:0;
  font-size:28px;line-height:1;text-decoration:none;
  color:var(--weiss);transition:color .28s,opacity .18s;}
.hd__logo:hover{opacity:.7;}
header.solid .hd__logo{color:var(--ink);}
.hd__nav{display:flex;align-items:center;gap:2.1rem;font-family:'Host Grotesk',sans-serif;font-size:var(--t-s);font-weight:700;letter-spacing:0;}
.hd__nav a{position:relative;color:var(--weiss);text-decoration:none;padding:.35rem 0;transition:color .28s;}
/* Unterstrich wächst von links - wie bei Blank Street */
.hd__nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.4,0,.2,1);}
.hd__nav a:hover::after{transform:scaleX(1);}
.hd__nav a[aria-current="page"]::after{transform:scaleX(1);}
header.solid .hd__nav a{color:var(--ink);}
/* Der Miet-Knopf steht außerhalb der Navigation, damit sichtbar Luft dazwischen bleibt */
/* Kleiner als zuvor: der Knopf mass 144x47 und war damit das lauteste
   Element der Kopfzeile - auf dem Telefon nahm er ein Drittel der Breite.
   Jetzt traegt ihn seine Form, nicht seine Groesse. */
/* Beim Hover verdickt sich die Kontur, mehr nicht: keine Fuellung, kein
   Ring. Sie waechst ueber einen inneren Schatten statt ueber border-width,
   sonst wuerde der Knopf um zwei Pixel wachsen und alles daneben
   verschieben. Die Schrift bleibt auf dem vollen Dunkelrot. */
.nav-cta{display:inline-flex;align-items:center;background:none;color:var(--tanne)!important;
  padding:.48rem 1rem;border:1px solid rgba(74,30,24,.55);
  border-radius:var(--r-pill);font-family:'Host Grotesk',sans-serif;font-size:var(--t-s);font-weight:700;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:border-color .22s ease,box-shadow .22s ease;}
.nav-cta::after{display:none!important;}
/* Der Hover fuellt den Knopf nicht mehr, er schaerft ihn: die Kontur geht
   auf den vollen Ton, darunter liegt eine sehr leichte Waesche, und ein
   weicher Ring legt sich aussen herum. Die Schrift bleibt dabei auf dem
   vollen Dunkelrot und wird nie heller - eine Fuellung haette sie auf
   Weiss gedreht und damit den Kontrast umgekehrt. */
.nav-cta:hover{border-color:var(--tanne);box-shadow:inset 0 0 0 1px var(--tanne);}
header.solid .nav-cta{background:none;color:var(--tanne)!important;
  border-color:rgba(74,30,24,.55);}
header.solid .nav-cta:hover{border-color:var(--tanne);box-shadow:inset 0 0 0 1px var(--tanne);}
/* ---- Das Menue klappt auf, auf jeder Breite ---------------------------
   Erst galt der Knopf nur unter 820px, darueber stand eine Leiste mit
   Menu/Events/About. Jetzt klappt das Menue immer auf: die Kopfzeile
   traegt nur noch Marke, Handlung und Knopf. Das gibt dem Titelbild den
   ganzen Raum und macht die Navigation auf jedem Geraet zur selben Geste.

   Der Knopf traegt bewusst kein Wort: "Menu" heisst auf dieser Seite die
   Speisekarte, das waere das eine Wort, das hier nicht stehen darf. Der
   barrierefreie Name lautet darum "navigation", nicht "menu".

   Ohne Skript bleibt der Knopf stumm - dann traegt die Fusszeile die
   Navigation, die dort vollstaendig steht.                              */
.hd__nav{display:none;}

/* Logo links, die beiden Bedienelemente rechts zusammen. Ohne das
   schoebe space-between "Book the bar" in die Mitte. */
.hd{gap:.9rem;}
.nav-cta{margin-left:auto;}

.burger{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-11px;   /* 44px Trefferflaeche */
  flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer;
  color:var(--ink);-webkit-tap-highlight-color:transparent;}
/* Ueber dem Titelbild ist der Grund dunkel, solange der Kopf nicht
   eingeglast ist - dann muss der Strich hell sein. */
header:not(.auf-hell):not(.solid) .burger{color:var(--weiss);}
.burger:focus-visible{outline:2px solid var(--tanne);outline-offset:3px;border-radius:4px;}

.burger__striche{position:relative;display:block;width:22px;height:2px;
  background:currentColor;transition:background-color .12s ease;}
.burger__striche::before,.burger__striche::after{content:'';position:absolute;
  left:0;display:block;width:22px;height:2px;background:currentColor;
  transition:transform .22s cubic-bezier(.4,0,.2,1);}
.burger__striche::before{top:-7px;}
.burger__striche::after{top:7px;}
/* offen: der mittlere Strich verschwindet, die beiden anderen kreuzen sich */
.burger[aria-expanded="true"] .burger__striche{background:transparent;}
.burger[aria-expanded="true"] .burger__striche::before{transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] .burger__striche::after{transform:translateY(-7px) rotate(-45deg);}

/* Das Blatt liegt unter der Kopfzeile und deckt den Rest ab.
   visibility statt display, damit sich der Uebergang ueberhaupt zeigen
   kann - display laesst sich nicht weich schalten. Im geschlossenen
   Zustand ist es damit auch nicht mit der Tabulatortaste erreichbar. */
.sheet{position:fixed;left:0;right:0;top:var(--hd-h);bottom:0;z-index:55;
  background:var(--weiss);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.4,0,.2,1),visibility 0s linear .22s;}
.sheet.offen{opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.4,0,.2,1),visibility 0s;}
.sheet__in{display:block;padding-block:.6rem 3rem;}
/* Auf breiten Schirmen wachsen die Zeilen mit - ein Menue, das die ganze
   Seite einnimmt, darf nicht aussehen wie eine Telefonliste im Grossen. */
.sheet a{display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1.05rem,1.8vw,1.5rem) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);
  font-family:'Host Grotesk',sans-serif;font-weight:700;
  font-size:clamp(1.25rem,3.2vw,2.4rem);letter-spacing:var(--ls-eng);line-height:1.15;
  transition:color .2s ease;}
.sheet a:hover{color:var(--tanne);}
.sheet a[aria-current="page"]{color:var(--tanne);}
.sheet a[aria-current="page"]::after{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--tanne);flex:0 0 auto;}
.sheet__fuss{margin:1.8rem 0 0;font-family:var(--mono);font-size:var(--t-s);
  line-height:1.6;color:var(--ink-soft);letter-spacing:0;}
/* Hinter dem offenen Blatt soll die Seite nicht mitscrollen. */
html.menue-offen,html.menue-offen body{overflow:hidden;}
/* Der Kopf ist position:sticky. overflow:hidden auf html nimmt ihm aber
   seinen Scrollbezug, und er faellt dann auf seine statische Stelle im
   Dokument zurueck - hatte man vorher 900px gescrollt, stand er bei
   y=-900, also weit ueber dem Fensterrand. Ueber dem Menueblatt lag dann
   nackter Seiteninhalt statt der Kopfzeile, und der Knopf zum Schliessen
   war gar nicht mehr erreichbar. Solange das Blatt offen ist, wird der
   Kopf darum fest ans Fenster geheftet; er traegt ohnehin einen negativen
   Aussenabstand in Hoehe seiner selbst, nimmt im Fluss also keinen Platz
   ein und verschiebt beim Wechsel nichts. */
html.menue-offen header{position:fixed;top:0;left:0;right:0;}
@media(prefers-reduced-motion:reduce){
  .sheet,.burger__striche,.burger__striche::before,.burger__striche::after{transition:none;}
}

/* =====================================================================
   Titelbild der Unterseiten · flacher als auf der Startseite
   ===================================================================== */
.phero{position:relative;min-height:clamp(330px,50vh,500px);padding-top:var(--hd-h);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;}
.phero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;}
/* kräftiger als auf der Startseite: die Titelbilder sind flacher, Schrift und
   Bild liegen dichter beieinander - der Verlauf darf nirgends unter .38 fallen */
.phero__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,26,16,.58) 0%,rgba(20,26,16,.40) 42%,rgba(20,26,16,.80) 100%);}
/* Kein 間 auf den Unterseiten: das Zeichen steht schon im Logo und wirkt als
   Marke nur, wenn es nicht auf jeder Seite auftaucht. */
.phero__in{position:relative;width:100%;padding-block:2.6rem 3.4rem;}
.phero h1{color:var(--ivory);}
.phero .lead{max-width:54ch;margin-top:1.1rem;color:var(--auf-foto-soft);}
.phero .eyebrow{color:rgba(255,255,255,.74);}
/* Keine Pille im Titelbild, sondern dieselbe Eyebrow-Zeile wie auf der
   Startseite. Die Pille war dort die einzige gefüllte Fläche und bekam
   dadurch mehr Gewicht, als die Angabe verdient. */
.phero__label{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.3rem;
  font-size:var(--t-s);font-weight:600;letter-spacing:0;text-transform:uppercase;
  color:rgba(255,255,255,.86);}
.phero__label svg.lucide{width:1.1em;height:1.1em;}

/* Hinweisband direkt unter dem Titelbild (Sommerpause, Entwurfsvermerk) */
.notice{background:var(--ruhe);border-bottom:1px solid var(--line);}
.notice__in{display:flex;align-items:center;gap:.7rem;padding-block:.95rem;
  font-size:var(--t-m);font-weight:600;color:var(--tanne);}
.notice svg.lucide{width:1.05em;height:1.05em;stroke-width:2.3;flex-shrink:0;}


/* =====================================================================
   Kategoriefarben · auf Startseite und Events-Seite identisch
   ===================================================================== */
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--t-xs);font-weight:700;letter-spacing:0;
  text-transform:uppercase;padding:.32rem .7rem;border-radius:var(--r-pill);background:var(--mauve-hell);color:#54303A;}
.chip svg.lucide{width:.9em;height:.9em;stroke-width:2.4;}
.c-fussball{background:rgba(184,193,153,.50);color:#3E4A2C;}
.c-f1{background:rgba(214,116,88,.20);color:#8A4227;}
.c-quiz{background:var(--mauve-hell);color:#54303A;}
.c-campus{background:rgba(122,146,176,.24);color:#3A5470;}
.c-party{background:var(--mauve);color:var(--auf-mauve-stark);}
.s-fussball{background:rgba(184,193,153,.55);color:#3E4A2C;}
.s-f1{background:rgba(214,116,88,.22);color:#8A4227;}
.s-quiz{background:var(--mauve-hell);color:#54303A;}
.s-campus{background:rgba(122,146,176,.26);color:#3A5470;}
.s-party{background:var(--mauve);color:var(--auf-mauve-stark);}

/* Ab November · drei weitere Kategorien. Kein Rot, auch nicht fuer den
   Gluehwein am Krimiabend: der bekommt die Tanne, die liest sich ohnehin
   eher nach Abend. Alle drei nachgerechnet auf Weiss - Jazz 6,5:1,
   DJ 7,8:1, Krimi 8,7:1. */
.c-jazz{background:rgba(196,154,88,.24);color:#6B4A16;}
.s-jazz{background:rgba(196,154,88,.26);color:#6B4A16;}
.c-dj{background:rgba(140,124,184,.22);color:#453A6B;}
.s-dj{background:rgba(140,124,184,.24);color:#453A6B;}
.c-krimi{background:rgba(46,54,38,.18);color:#2E3626;}
.s-krimi{background:rgba(46,54,38,.20);color:#2E3626;}

/* =====================================================================
   Termin-Kacheln · Wochenansicht auf der Startseite und Monatsraster
   auf der Events-Seite teilen sich dieselbe Kachel
   ===================================================================== */
.wk{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.wk__shot{position:relative;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;display:flex;
  align-items:center;justify-content:center;margin-bottom:1.15rem;transition:transform .2s;}
.wk:hover .wk__shot{transform:translateY(-5px);}
.wk__shot svg.lucide{width:76px;height:76px;stroke-width:1.4;}
.wk__shot--foto{padding:0;}
.wk__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.wk__flags{display:flex;gap:.7rem;}
.wk__flags img{width:96px;height:72px;object-fit:cover;border-radius:var(--r-s);box-shadow:0 6px 20px rgba(0,0,0,.20);}
.wk__only{position:absolute;top:.9rem;left:.9rem;font-size:var(--t-xs);font-weight:700;letter-spacing:0;
  text-transform:uppercase;background:var(--weiss);color:var(--tanne);padding:.32rem .7rem;border-radius:var(--r-s);}
.wk__day{font-family:'Host Grotesk',sans-serif;font-size:var(--t-s);font-weight:700;letter-spacing:0;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem;}
.wk h3{font-size:var(--t-l);font-weight:700;letter-spacing:var(--ls-eng);line-height:1.2;margin-bottom:.45rem;}
.wk p{font-size:var(--t-m);color:var(--ink-soft);line-height:1.5;}
.wk__meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.7rem;font-size:var(--t-s);color:var(--ink-soft);}
.wk__meta span{display:inline-flex;align-items:center;gap:.35rem;}
.wk__meta svg.lucide{width:.95em;height:.95em;}

/* =====================================================================
   Fuß · reduziert, Kooperation statt Trägertext
   ===================================================================== */
footer{background:var(--grund);color:var(--ink);padding:4.5rem 0 2rem;border-top:1px solid var(--line);}
.f__grid{display:grid;grid-template-columns:1.3fr 1fr 1.3fr auto;gap:3rem;align-items:start;}
/* Der Fuß trägt jetzt das vollständige Logo, deshalb größer als vorher */
.f__logo{width:118px;height:73px;background:url('../assets/img/logo-forest.png') no-repeat left center/contain;margin-bottom:1.3rem;}
.f__adr{font-size:var(--t-m);line-height:1.6;color:var(--ink-soft);}
.f__col{display:flex;flex-direction:column;gap:.6rem;}
.f__col a{font-size:var(--t-m);color:var(--ink-soft);text-decoration:none;width:fit-content;
  border-bottom:1px solid transparent;transition:border-color .2s,color .2s;}
.f__col a:hover{color:var(--ink);border-bottom-color:var(--ink);}
.f__off{opacity:.45;pointer-events:none;}
.f__coop{text-align:right;}
.f__cooplabel{display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:0;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.7rem;}
/* Platzhalter, bis die echte Logodatei vorliegt */
.f__cooplogo{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-width:170px;padding:1rem 1.2rem;border:1px dashed var(--line);border-radius:var(--r-m);
  font-size:var(--t-s);font-weight:700;line-height:1.3;color:var(--ink-soft);background:var(--ruhe);}
.f__base{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:3rem;padding-top:1.3rem;}
.f__legal{display:flex;gap:1.4rem;font-size:var(--t-s);}
.f__legal a{color:var(--ink-soft);text-decoration:none;}
.f__legal a:hover{color:var(--ink);}
.f__kanji{font-size:var(--t-l);color:var(--ink);}
@media(max-width:860px){.f__grid{grid-template-columns:1fr 1fr;gap:2.2rem;}.f__coop{text-align:left;grid-column:1/-1;}}

/* =====================================================================
   Schlussband · steht auf allen Seiten über dem Fuß
   Weiss statt Farbflaeche. Das 間 traegt den Abschnitt allein: gross, deckend
   in Salbei, ueber den rechten Rand hinaus. Auf Weiss funktioniert der
   Anschnitt nur an der Fensterkante - eine Abschnittskante waere unsichtbar
   und der Schnitt wirkte wie ein Fehler. Deshalb laeuft es nach rechts raus.
   ===================================================================== */
/* Die Mindesthoehe haengt an derselben Einheit wie das Zeichen, damit es
   senkrecht immer vollstaendig steht. Oben und unten abgeschnitten wuerde
   es auf Weiss wie ein Fehler aussehen, weil man die Kante nicht sieht. */
/* Das Zeichen ist die zweite Spalte des Rasters und genau so hoch wie der
   Textblock. Vorher stand es frei daneben, oben 17 und unten 18 px daneben -
   Beinahe-Buendigkeit liest das Auge als Fehler. Jetzt teilen beide dieselbe
   Ober- und Unterkante, dadurch entsteht die Beziehung, die vorher fehlte.
   Kein Anschnitt mehr: der hatte baulich keinen Grund.                    */
.pause{position:relative;overflow:hidden;padding:5.5rem 0;
  background:var(--weiss);color:var(--ink);border-top:1px solid var(--line);}
.pause__in{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,6vw,5.5rem);align-items:stretch;}
.pause__txt{display:flex;flex-direction:column;align-items:flex-start;}
/* height:100% statt Schriftgrad: so folgt das Zeichen der Texthoehe */
.pause__kanji{align-self:stretch;height:auto;width:auto;
  aspect-ratio:95.12/100;min-height:100%;color:var(--salbei);
  pointer-events:none;user-select:none;}
@media(max-width:820px){
  .pause__in{grid-template-columns:1fr;gap:2.5rem;}
  .pause__kanji{width:min(58%,15rem);height:auto;min-height:0;}
}
.pause h2{max-width:20ch;color:var(--ink);}
/* Kein gefuelltes Etikett mehr - auf Weiss reicht die Eyebrow-Stufe */
.pause__tag{display:block;font-size:var(--t-s);font-weight:600;letter-spacing:0;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.9rem;}
.pause__p{max-width:44ch;margin:1.1rem 0 2rem;color:var(--ink-soft);font-size:var(--t-m);line-height:1.6;}

/* =====================================================================
   VERSUCHSFASSUNG · Ergaenzungen ans Ende, damit sie alles davor
   ueberstimmen. Diese Datei ist die eigene Kopie der Versuchsfassung -
   die gruene Fassung laedt weiterhin ci-entwurf.css und bleibt
   unberuehrt.
   ===================================================================== */

/* ---- Die Palette · vier Rollen, jede mit einer Regel -----------------
   Vorher trug eine einzige Farbe alles: Knopf, dunkles Band, Akzent,
   Rahmen, Zeichen. Eine Farbe, die alles bedeutet, bedeutet nichts.
   Salbei und Mauve lagen zwar noch auf der About-Seite herum, aber als
   Reste der gruenen Palette - vier Icon-Kreise und ein Zeitleisten-
   Eintrag, auf genau einer Seite, ohne Regel.

   Jetzt hat jede Farbe eine Aufgabe:
     PAPIER    der Grund, auf dem alles liegt
     ROT       das dunkle Band, der Hauptknopf, die Marke
     SALBEI    fuer wen wir da sind: Menschen, offen, vegetarisch
     MAUVE     was neu ist: neue Posten, wechselnde Sachen, das Jetzt
   -------------------------------------------------------------------- */
:root{
  --papier:#FAF7F2;           /* Grund · warm gebrochenes Papier      */
  --falz:rgba(74,30,24,.055); /* die Falzlinie darin, sehr leise      */
  /* Ivory machte bisher zwei Dinge: Ruheflaeche UND Schrift auf dem Rot.
     Auf dem Papier hob es sich nur noch um 1,08 ab, war also praktisch
     unsichtbar. Die Ruheflaeche bekommt darum einen eigenen, tieferen
     Ton (1,15 gegen Papier - die Schwelle, ab der man eine Kante ohne
     Linie sieht); --ivory bleibt der Schrift auf Dunkelrot.           */
  --ruhe:#EFE7DA;             /* Ruheflaeche auf dem Papier           */

  --salbei:#4A1E18;           /* Akzent · tiefes Dunkelrotbraun       */
  --tanne:#4A1E18;            /* dunkle Flaechen, derselbe Ton        */
  --moos:#5A683A;             /* Salbei als Zeichen · 5,7:1 auf Papier,
                                 4,9:1 auf der Ruheflaeche. #8E9A6B kam
                                 nur auf 2,8 und fiel damit sogar unter
                                 die 3:1 fuer Grafik.                  */
  --moos-flaeche:#DDE2CE;     /* dieselbe Farbe als ruhige Flaeche    */
  --rosa:#C199A3;             /* Signalfarbe · das Neue               */
  --rosa-flaeche:#EFE0E3;     /* dieselbe Farbe als ruhige Flaeche    */
  /* Einmal ins Braune gedreht (#3A2318, 19 Grad) und wieder verworfen -
     das Rot ist der Ton. Weiss darauf steht bei 14,1:1. */
  --auf-salbei:#F4ECE0;       /* der Akzent ist dunkel, Schrift hell  */
  --auf-salbei-soft:#E8DCCC;
  --auf-tanne:#F4ECE0;
  --auf-tanne-soft:rgba(244,236,224,.78);   /* Stufung ueber Helligkeit,
                                 nicht ueber einen zweiten Farbton    */
}

/* ---- Keine Versalien, nirgends ---------------------------------------
   Ein einzelnes !important ist hier das richtige Mittel: die Regel muss
   auch die Inline-Stile der einzelnen Seiten schlagen, und die stehen
   spaeter im Dokument. Sie fasst nur text-transform an, sonst nichts. */
*,*::before,*::after{text-transform:none!important;}

/* Die Sperrung muss mit zurueck. Sie war ueberall dort gesetzt, wo
   Versalien standen - bei Kleinbuchstaben sieht sie ungewollt aus.   */
h1,h2,h3{letter-spacing:var(--ls-eng);}
.eyebrow,.hd__util a,.hd__nav,.nav-cta,.btn,.wk__only,.wk__day,
.f__cooplabel,.phero__label,.promo__badge,.rent__cap,.week__range,
.wk-row__d,.monat__z,.jump a,.f{letter-spacing:0;}
/* Die kleinen Auszeichnungszeilen verlieren mit den Versalien ihren
   Unterschied zum Fliesstext. Statt dessen traegt ihn jetzt die
   Fettung, und sie werden eine Spur groesser.                       */
.eyebrow,.f__cooplabel,.phero__label,.week__range{font-weight:700;font-size:var(--t-m);}

/* ---- Der Fuss im Akzentton ------------------------------------------- */
footer{background:var(--tanne);color:var(--auf-tanne);border-top-color:transparent;}
footer .f__logo{background-image:url('../assets/img/logo-cream.png');}
footer .f__adr,footer .f__col a,footer .f__cooplabel,footer .f__legal a{
  color:var(--auf-tanne-soft);}
footer .f__col a:hover,footer .f__legal a:hover{color:var(--auf-tanne);
  border-bottom-color:var(--auf-tanne);}
footer .f__cooplogo{color:var(--auf-tanne-soft);background:rgba(244,236,224,.08);
  border-color:rgba(244,236,224,.28);}
footer .f__base{border-top-color:rgba(244,236,224,.18);}
footer .f__kanji{color:var(--auf-tanne);}
/* 45 % Deckung ergaben 3,6:1 und fielen durch; 57 % bringen 5,0:1 und
   lassen den Link trotzdem zurueckstehen.                            */
footer .f__off{color:rgba(244,236,224,.57);}

/* ---- Titelbereich der Unterseiten · jetzt weiss ----------------------
   Foto und Schleier sind raus. Der Bereich ist eine weisse Flaeche mit
   dunkler Schrift, wie der Rest der Seite - der Akzent kommt aus der
   Kleinzeile und dem Trennstrich nach unten, nicht aus einer Fuellung.
   Die alten Regeln fuer Foto und Schleier haetten sonst weiter creme
   Schrift gesetzt, deshalb hier alles zurueckgedreht. */
.phero{background:var(--weiss);min-height:0;
  padding-top:calc(var(--hd-h) + clamp(2.6rem,5vw,4.2rem));
  border-bottom:1px solid var(--line);}
.phero__in{padding-block:0 clamp(2.6rem,5vw,3.8rem);}
.phero h1{color:var(--ink);}
.phero .lead{color:var(--ink-soft);}
.phero .eyebrow,.phero__label{color:var(--tanne);}

/* ---- Unterseiten: Flaechen, die den Akzent tragen -----------------------
   Unter Gruen war --salbei eine helle Toenung, auf der dunkle Schrift
   stand. Im Dunkelrot traegt die Flaeche die helle Schrift. Kinder, die
   --auf-salbei benutzen, drehen von allein mit; die uebrigen erben --ink
   oder setzen ihn fest und blieben dunkel auf dunkel.
   Ausgenommen .board__eyebrow: das Pill bringt eine eigene weisse
   Flaeche mit, dort bleibt die Schrift dunkel. */
/* Nur noch .name__card: die ist weiterhin eine gefuellte Akzentflaeche.
   .board__card hat ihre Fuellung verloren (Tafel ohne Kasten) und liegt
   jetzt auf Weiss - dort waere Creme unlesbar. */
.name__card{color:var(--auf-salbei);}
/* .ehero setzt color:var(--ink) im Inline-Block der Events-Seite. Der steht
   nach diesem Stylesheet, also braeuchte eine gleich starke Regel hier gar
   nicht erst anzutreten - daher die doppelte Klasse. */
.ehero.ehero{color:var(--auf-salbei);}
.board__card .board__eyebrow{color:var(--ink);}
.name__card .name__claim{color:var(--auf-salbei);}

/* ---- Promo-Karte ohne Mauszeiger ---------------------------------------
   Die Karte liegt im Ruhezustand nur deshalb transparent da, weil ein
   @media (hover:hover)-Block sie so setzt. Auf Touchgeraeten faellt der
   Block weg, die Karte steht gefuellt da - und Ueberschrift und Knopf
   erben dann die dunkle Grundfarbe. Bei 375px gemessen: 1,34. */
/* Genau die Gegenmenge zu (hover:hover) and (pointer:fine). Mit
   (hover:none),(pointer:coarse) haette ein Notebook mit Touchscreen
   beide Bloecke bekommen: durchsichtige Karte und creme Schrift. */
@media not all and (hover:hover) and (pointer:fine){
  .promo__card{color:var(--auf-salbei);}
  .promo__card .btn--outline,
  .promo__card .btn--linie{color:var(--weiss);border-color:rgba(255,255,255,.55);}
}

/* ======================================================================
   SCHRIFTSYSTEM · sechs Stufen, drei Gewichte, zwei Laufweiten
   ----------------------------------------------------------------------
   Vorher: 42 verschiedene font-size-Werte in 132 Deklarationen, davon
   19 allein zwischen .6rem und .94rem - Abstaende von 0,35px, die
   niemand als Absicht liest. Jede Deklaration zeigt jetzt auf eine
   dieser Stufen.

   Die Wurzel steht auf 110 % (= 17.6px), deshalb die krummen rem-Werte.
   Gerendert sind es glatte Pixel - das ist die Zahl, die zaehlt.
   ====================================================================== */
:root{
  --t-xs:.6818rem;        /* 12px · Label, Badge                        */
  --t-s:.7955rem;         /* 14px · Meta, Bildunterschrift, Datum       */
  --t-m:.9091rem;         /* 16px · Fliesstext, Navigation, Knopf, Feld */
  --t-l:1.25rem;          /* 22px · Lead, Kartentitel                   */
  --t-xl:clamp(1.7045rem,3.6vw,2.5rem);      /* 30-44px · h2            */
  --t-display:clamp(2.5rem,7vw,4.5455rem);   /* 44-80px · h1            */

  --ls-eng:-0.02em;       /* nur Ueberschriften; alles andere steht auf 0 */

  /* Die vierte Schrift, mit einer klaren Aufgabe: Angaben, nicht Text.
     Zeiten, Daten, Preise, Adressen, Mengen - alles, was man abliest
     statt liest. Dadurch sieht man auf jeder Seite sofort, wo eine
     harte Angabe steht und wo jemand spricht.
     Der Stapel ist systemseitig; fuer den Livebetrieb muss eine eigene
     Monospace selbst gehostet werden (JetBrains Mono oder IBM Plex Mono,
     beide OFL), sonst sieht das auf jedem Geraet anders aus. */
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* ---- Schraffur ---------------------------------------------------
     Dieselbe Kugelschreiber-Linie wie die Doodles, nur als Kachel von
     120px. Sie liegt auf den grossen einfarbigen Flaechen - dort, wo
     die Seite blockartig wirkt - und nimmt ihnen die harte Ebenheit,
     ohne selbst sichtbar zu werden. Die Striche laufen ueber den Rand
     hinaus, damit die Kachelkante nicht auffaellt. */
  --schraffur-hell:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%25234A1E18%22%20stroke-opacity%3D%22.055%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M-70%20-16Q-23%2022%2020%2060Q63%2098%20111%20137%22%2F%3E%3Cpath%20d%3D%22M-32%20-17Q13%2024%2061%2058Q107%20100%20151%20137%22%2F%3E%3Cpath%20d%3D%22M8%20-18Q55%2020%2098%2059Q143%2098%20190%20138%22%2F%3E%3Cpath%20d%3D%22M50%20-15Q95%2023%20140%2059Q187%20100%20232%20137%22%2F%3E%3Cpath%20d%3D%22M89%20-17Q134%2020%20181%2060Q227%2097%20272%20138%22%2F%3E%3Cpath%20d%3D%22M128%20-17Q177%2022%20222%2059Q263%2099%20311%20135%22%2F%3E%3Cpath%20d%3D%22M168%20-17Q217%2023%20258%2059Q303%2096%20351%20134%22%2F%3E%3Cpath%20d%3D%22M210%20-16Q253%2023%20298%2061Q343%2098%20389%20135%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --schraffur-dunkel:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523F4ECE0%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M-70%20-16Q-23%2022%2020%2060Q63%2098%20111%20137%22%2F%3E%3Cpath%20d%3D%22M-32%20-17Q13%2024%2061%2058Q107%20100%20151%20137%22%2F%3E%3Cpath%20d%3D%22M8%20-18Q55%2020%2098%2059Q143%2098%20190%20138%22%2F%3E%3Cpath%20d%3D%22M50%20-15Q95%2023%20140%2059Q187%20100%20232%20137%22%2F%3E%3Cpath%20d%3D%22M89%20-17Q134%2020%20181%2060Q227%2097%20272%20138%22%2F%3E%3Cpath%20d%3D%22M128%20-17Q177%2022%20222%2059Q263%2099%20311%20135%22%2F%3E%3Cpath%20d%3D%22M168%20-17Q217%2023%20258%2059Q303%2096%20351%20134%22%2F%3E%3Cpath%20d%3D%22M210%20-16Q253%2023%20298%2061Q343%2098%20389%20135%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ---- Oeffnungszeiten im Fussbereich ------------------------------------
   Die meistgesuchte Angabe einer Bar stand auf keiner der sechs Seiten.
   Der Fussbereich ist die Stelle, an der man sie ueberall findet. */
.f__zeit{margin:.7rem 0 0;font-size:var(--t-s);line-height:1.5;}
footer .f__zeit{color:var(--auf-tanne-soft);}

/* ---- Angaben in Monospace ---------------------------------------------
   Nur, was eine Angabe ist. Ueberschriften, Lead und Fliesstext bleiben
   bei Host Grotesk und Inter. */
.f__adr,.f__zeit,.notice__in,.wk-row__d,.week__range{font-family:var(--mono);letter-spacing:0;}

/* ---- Wo die Schraffur liegt -------------------------------------------
   Nur auf den grossen einfarbigen Flaechen. Dort entsteht der blockartige
   Eindruck; im Fliesstextbereich waere das Muster nur Unruhe. */
footer{background-image:var(--schraffur-dunkel);}
.notice{background-image:var(--schraffur-hell);}

/* ---- Wo die Gegenschrift steht ----------------------------------------
   Libre Baskerville kursiv markiert eine Sache: wenn die Bar selbst
   spricht, statt dass etwas gesetzt ist. Vier Stellen im ganzen Auftritt:

     "Feld"                  das eine Wort, das der Ort ist   (Startseite)
     "New & seasonal."       was diese Woche auf der Tafel steht
     "Find your Ma."         der Claim                        (About)
     das Schlussband         die direkte Ansprache am Seitenende

   Nur der Kursivschnitt liegt selbst gehostet vor - was hier ueberall
   die richtige Wahl ist. Mehr Stellen waeren es nicht wert: die Schrift
   wirkt, weil sie selten ist. */
.pause h2,.name__claim{
  font-family:'Libre Baskerville',Baskerville,Georgia,serif;
  font-style:italic;font-weight:400;letter-spacing:0;line-height:1.14;}
.pause h2{font-size:clamp(1.9rem,3.6vw,2.7rem);}
.name__claim{font-size:clamp(1.6rem,2.8vw,2.1rem);}

/* =====================================================================
   LADEFLAECHEN
   Platzhalter fuer alles, was erst nach dem ersten Bild da ist: die Fotos
   und die Termine aus der JSON.

   .skel ist immer ein EIGENES Element, nie eine Klasse auf einer Flaeche,
   die anderswo schon ein background-Kurzschreiben traegt - .kach__bild und
   .week__buehne setzen beide background:var(--ruhe), und ein Kurzschreiben
   knipst background-image wieder aus. Als eigenes Kind ist das kein Thema.

   Bei Bildern liegt der Platzhalter UNTER dem Bild und wird entfernt,
   sobald es da ist (siehe bilderMelden in js/ci-rot.js). Das Bild wird
   nicht ausgeblendet und wieder eingeblendet: laeuft das Skript einmal
   nicht, stuende es sonst unsichtbar auf der Seite.
   ===================================================================== */
@keyframes ma-skel{from{background-position:-60% 0;}to{background-position:160% 0;}}

.skel{display:block;background-color:var(--skel);
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 35%, var(--skel-glanz) 50%, rgba(255,255,255,0) 65%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:ma-skel 1.9s ease-in-out infinite;}

/* fuellt einen Rahmen ganz aus und liegt hinter dem Bild */
.skel--voll{position:absolute;inset:0;z-index:0;}

/* ---- Seitenwechsel ----------------------------------------------------
   Zwischen Klick und neuer Seite passiert sonst sichtbar nichts. Das
   Zeichen fuellt diese Luecke - aber erst nach 180ms (siehe ci-rot.js):
   ist die naechste Seite schneller da, blitzt sonst nur etwas auf, und
   das ist unruhiger als gar nichts.
   Der Grund ist hell und leicht milchig, damit die alte Seite noch
   durchscheint - es ist ein Uebergang, kein Vorhang.                   */
.wechsel{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility 0s linear .2s;}
.wechsel.an{opacity:1;visibility:visible;
  transition:opacity .2s ease,visibility 0s;}
.wechsel__zeichen{display:block;width:58px;height:58px;
  background-color:var(--tanne);
  -webkit-mask:url('../assets/img/ma-kanji.svg') no-repeat center/contain;
          mask:url('../assets/img/ma-kanji.svg') no-repeat center/contain;
  animation:ma-wechsel 1.15s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes ma-wechsel{
  0%,100%{opacity:.22;transform:scale(.94);}
  50%    {opacity:1;  transform:scale(1);}
}
@media(prefers-reduced-motion:reduce){
  .wechsel{transition:none;}
  .wechsel__zeichen{animation:none;opacity:.85;}
}

/* Das Zeichen als Ladesignet. Es sitzt dort, wo ohnehin gewartet wird,
   und haelt nichts auf. Ein Ladeschirm ueber der ganzen Seite waere das
   Gegenteil: er verzoegert Inhalt, der sonst sofort da waere - und bei
   156 KB fuer den ganzen Entwurf haette er meist nichts anzuzeigen.
   Sehr blass, langsam atmend; sobald das Bild da ist, ist es weg.     */
.skel--voll::after{content:'';position:absolute;left:50%;top:50%;
  width:clamp(26px,13%,54px);aspect-ratio:1;transform:translate(-50%,-50%);
  background-color:var(--tanne);opacity:.13;
  -webkit-mask:url('../assets/img/ma-kanji.svg') no-repeat center/contain;
          mask:url('../assets/img/ma-kanji.svg') no-repeat center/contain;
  animation:ma-zeichen 2.6s ease-in-out infinite;}
@keyframes ma-zeichen{0%,100%{opacity:.08}50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){
  .skel--voll::after{animation:none;opacity:.13;}
}
/* Textzeile · Hoehe aus der Schriftgroesse, damit beim Austausch nichts springt */
.skel--zeile{height:1em;border-radius:3px;}
/* einzelnes Wort mitten im Satz */
.skel--wort{display:inline-block;width:9ch;height:1em;border-radius:3px;vertical-align:-.12em;}

/* Der Platz fuers Icon steht, bevor lucide es einsetzt - sonst rutscht die
   Zeile im Moment des Nachladens. Das <i> ist danach weg, ersetzt durch <svg>. */
i[data-lucide]{display:inline-block;width:1em;height:1em;}

/* Dauernde Bewegung ist fuer manche Leute ein Problem, und ein Platzhalter
   laeuft unter Umstaenden lange. Dann bleibt die ruhige Flaeche. */
@media(prefers-reduced-motion:reduce){
  .skel{animation:none;background-image:none;}
}