/* =====================================================================
   間 - MA BAR · RASTERFASSUNG · gemeinsame Gestaltung
   Weiss, schwarz, eine Schrift: die Monospace. Die Linien tragen die
   Ordnung, nicht die Farbe. Wird von allen ci-raster-*.html geladen,
   damit die Gestaltung an einer Stelle steht und nicht sechsmal.
   ===================================================================== */

:root{
  --linie:rgba(17,17,17,.16);
}

body{background:#FFFFFF;background-image:none;
  font-family:var(--mono);color:var(--ink);}

/* Die Kopfzeile darf hier nicht der einzige Farbfleck sein. */
header.auf-hell{background:#FFFFFF;border-bottom:1px solid var(--linie);}
.hd__util{border-bottom:1px solid var(--linie);}
.hd__zeit,.hd__util a{font-family:var(--mono);color:var(--ink);}
/* header.auf-hell .nav-cta in ci-rot.css ist (0,2,1) und traegt selbst
   !important - bei zwei !important entscheidet die Spezifitaet, nicht die
   Reihenfolge. Darum hier derselbe Aufbau, sonst bliebe die Schrift weiss
   auf durchsichtigem Grund, also unsichtbar. */
/* Rechteckig statt Pille. Die Pille kommt aus der braunen Fassung, wo sie
   zum weichen Papier passt. Hier besteht alles aus geraden Linien und
   rechten Winkeln - ein runder Knopf ist darin das einzige Bauteil mit
   Radius. Darum harte Ecken, derselbe Strich wie bei den Rasterlinien. */
header.auf-hell .nav-cta{background:none!important;color:var(--ink)!important;
  border:1px solid rgba(17,17,17,.5);border-radius:0;
  font-family:var(--mono);font-weight:700;letter-spacing:.02em;}
/* Vorher kippte der Knopf beim Hover auf eine volle schwarze Flaeche - auf
   einer Seite, die sonst nur aus Haarlinien besteht, war das der einzige
   Farbblock weit und breit. Jetzt zieht die Linie an und bekommt einen
   weichen Ring, die Schrift bleibt schwarz. */
header.auf-hell .nav-cta:hover{background:none!important;color:var(--ink)!important;
  border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.sheet{background:#FFFFFF;}
.sheet a{font-family:var(--mono);font-size:clamp(1.1rem,2.4vw,1.7rem);letter-spacing:0;}
.sheet a[aria-current="page"]{color:var(--ink);}
.sheet a[aria-current="page"]::after{background:var(--ink);}
.sheet__fuss{color:var(--ink-soft);}

/* Der Aussenabstand ist derselbe wie beim .wrap der Kopf- und Fusszeile.
   Vorher stand das Raster buendig an der Fensterkante, waehrend Logo und
   Knopf bis zu 79px eingerueckt waren - die Rasterkante und die Marke
   fluchteten also nicht. Jetzt laufen sie auf einer Linie, und das Raster
   steht in einem sichtbaren Rand statt am Rand zu kleben. */
.raster{max-width:1380px;margin:0 auto;padding-top:var(--hd-h);
  padding-inline:clamp(1.25rem,5vw,4.5rem);
  /* Unten Luft lassen: das Raster endete einen Pixel vor der Fusszeile,
     deren Oberkante damit wie eine weitere Rasterlinie aussah. Mit dem
     Abstand liest sich der Fuss als eigener Block. */
  padding-bottom:clamp(2.5rem,5vw,5rem);}
/* Die Linien entstehen aus 1px Fuge, durch die der Untergrund scheint.
   Exakter als Rahmen an jeder Zelle, die sich an den Kanten verdoppeln. */
.raster > *{background:var(--linie);}
/* Senkrecht entstehen die Linien aus der 1px-Fuge, durch die der
   Reihenhintergrund scheint. Waagerecht ging das nicht auf: dort stand
   nur ein margin-bottom, und ein Aussenabstand zeichnet nicht den eigenen
   Hintergrund, sondern laesst den des Elternteils durch - .raster ist
   durchsichtig, darunter liegt das weisse body. Die Fuge war also weiss,
   und zwischen den Reihen fehlte die Linie ganz.

   Darum jetzt eine echte Oberkante an jedem Block ausser dem ersten. Sie
   ist genauso hoch wie der Abstand vorher, die Seite wird dadurch keinen
   Pixel laenger. Oben braucht es keine: dort schliesst die Kopfzeile mit
   ihrer eigenen Unterkante an. */
.reihe{display:grid;gap:1px;}
.raster > * + *{border-top:1px solid var(--linie);}
.r-2{grid-template-columns:1fr 1fr;}
.r-3{grid-template-columns:repeat(3,1fr);}
.r-links{grid-template-columns:5fr 7fr;}
.r-rechts{grid-template-columns:7fr 5fr;}

/* Mehr Luft in den Zellen. Vorher 1.5 bis 2.4rem Polster und 1rem
   zwischen den Bausteinen - im engen Raster wirkte der Text dadurch an
   die Linien gedraengt. Jetzt reicht das Polster bis 3.25rem und der
   Abstand innen bis 1.4rem, beide waechst mit der Breite mit. */
/* Senkrecht mehr Polster als waagerecht. Die Fuge zwischen den Reihen
   bleibt bei 1px - aus ihr entstehen ja die Linien, breiter waere sie ein
   grauer Balken statt einer Linie. Der Abstand zwischen zwei Reihen kommt
   also aus dem Polster: unten in der einen Zelle, oben in der naechsten.
   Bei gleichem Polster ringsum waren das an den engsten Stellen 90px, wo
   ein Knopf unten und ein Etikett oben aufeinandertrafen. Mit dem hoeheren
   Wert senkrecht sind es rund 130px, waehrend die Spalten seitlich gleich
   breit bleiben. */
.z{background:#FFFFFF;
  padding:clamp(2rem,4.4vw,4.5rem) clamp(1.6rem,3.1vw,3.25rem);
  display:flex;flex-direction:column;gap:clamp(1rem,1.5vw,1.4rem);}
.z--bild{padding:0;overflow:hidden;}
/* Das Bild wird aus dem Fluss genommen und fuellt die Zelle als Belag.
   Vorher bestimmte seine natuerliche Hoehe die Zeile: ein Hochformat
   (900x1200) machte die Reihe 1073px hoch, und die Textzelle daneben
   stand zu vier Fuenfteln leer. Absolut gesetzt traegt es nichts mehr
   zur Hoehe bei - die kommt jetzt aus der Mindesthoehe oder vom
   Nachbarn - und deckt die Zelle trotzdem immer ganz ab, es kann also
   auch keine graue Luecke entstehen. object-fit:cover beschneidet. */
.z--bild{min-height:clamp(14rem,26vw,24rem);}
.z--bild img,.z--bild video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;}

/* Alles in einer Schrift. Unterschieden wird ueber Groesse, Schnitt und
   Laufweite - nicht ueber eine zweite Schrift und nicht ueber Farbe. */
.z h1,.z h2,.z h3{font-family:var(--mono);font-weight:700;color:var(--ink);margin:0;}
.z h1{font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.12;letter-spacing:-.02em;}
.z h2{font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.2;letter-spacing:-.015em;}
.z h3{font-size:var(--t-m);line-height:1.35;letter-spacing:-.01em;}
.z p{font-family:var(--mono);font-size:var(--t-s);line-height:1.65;
  color:var(--ink-soft);margin:0;max-width:46ch;}

.etikett{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.08em;color:var(--ink-soft);margin:0;}

/* Eine Fussnote unter einer Liste. Sie trug erst .etikett und las sich
   dadurch wie eine zweite Ueberschrift - fett und weit gesperrt. Eine
   Fussnote soll aber leise sein: normaler Schnitt, normale Laufweite,
   und durch die duenne Linie abgesetzt statt durch Fettung. */
.fein{font-family:var(--mono);font-size:var(--t-xs);font-weight:400;
  line-height:1.5;color:var(--ink-soft);margin:0;
  padding-top:.7rem;border-top:1px solid var(--linie);}

/* Angaben statt Bilder: die Monospace laesst Zahlen untereinander stehen,
   darum tragen diese Listen hier die Arbeit, die sonst Fotos taeten. */
.liste{display:grid;gap:0;margin:0;padding:0;list-style:none;font-size:var(--t-s);
  font-variant-numeric:tabular-nums;}
.liste li{display:flex;justify-content:space-between;gap:1.2rem;
  padding:.62rem 0;border-bottom:1px solid var(--linie);line-height:1.45;}
.liste li:last-child{border-bottom:0;}
.liste b{font-weight:700;color:var(--ink);}
.liste span{color:var(--ink-soft);white-space:nowrap;}

/* Dieselbe Familie wie der Knopf in der Kopfzeile: die Kontur liegt in
   Ruhe auf halber Deckkraft und zieht beim Hover auf den vollen Ton an,
   verdickt sich ueber einen inneren Schatten und fuellt sich nicht. Das
   Fuellen war hier dasselbe Problem wie oben - ein schwarzer Block auf
   einer Seite, die sonst nur aus Haarlinien besteht. Die Schrift bleibt
   dabei durchgehend schwarz.

   Rechteckig waren diese Knoepfe schon, trotz ihres Namens. */
.pille{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;
  margin-top:auto;padding:.55rem 1.2rem;border:1px solid rgba(17,17,17,.5);
  background:none;text-decoration:none;font-family:var(--mono);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;color:var(--ink);
  transition:border-color .22s ease,box-shadow .22s ease;}
.pille:hover{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);
  background:none;color:var(--ink);}
.pille svg.lucide{width:1em;height:1em;transition:transform .22s cubic-bezier(.4,0,.2,1);}
.pille:hover svg.lucide{transform:translateX(3px);}

/* ---- Anmeldung -------------------------------------------------------
   Formularfelder im Raster: keine Kaesten, keine Flaechen, nur die
   Haarlinie unter dem Feld - dasselbe Mittel, das die Zellen trennt.
   Die Beschriftung steht darueber und bleibt stehen; Platzhalter im Feld
   waeren hier das falsche Mittel, weil sie beim Tippen verschwinden und
   ausserdem hell sein muessten, um sich vom Eingetippten zu unterscheiden.
   Hell darf hier nichts werden.                                        */
.fm{display:flex;flex-direction:column;gap:1rem;}
.fm__falle{position:absolute;left:-9999px;}
.fm__feld{display:flex;flex-direction:column;gap:.25rem;}
.fm label{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.06em;color:var(--ink-soft);}
.fm input,.fm select{font-family:var(--mono);font-size:var(--t-s);color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--linie);
  padding:.45rem 0;border-radius:0;
  /* Das eigene Dreieck des Systems passt nicht zur Fassung - stattdessen
     ein eigenes aus zwei Strichen, in derselben Schriftfarbe. */
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 1px),calc(100% - 4px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.fm input{background-image:none;}
.fm select{padding-right:1.5rem;cursor:pointer;}
.fm input:focus,.fm select:focus{outline:none;border-bottom-color:var(--ink);
  box-shadow:0 1px 0 0 var(--ink);}
.fm input::placeholder{color:var(--ink-soft);}
.fm .pille{margin-top:.5rem;cursor:pointer;font:inherit;font-family:var(--mono);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;}
/* Rueckmeldung nach dem Abschicken. Fehler werden nicht rot, sondern
   fett - Farbe ist auf dieser Fassung kein Mittel. */
.fm__rueck{font-family:var(--mono);font-size:var(--t-xs);line-height:1.5;
  color:var(--ink-soft);margin:0;}
.fm__rueck.fehler,.fm__rueck.gut{color:var(--ink);font-weight:700;}

/* Laufband: zwei gleiche Haelften, die zweite laeuft nach. */
/* An den Kanten ausblenden statt hart abschneiden. Ein abgeschnittenes
   Wort am Rand liest sich wie ein Fehler; so laeuft der Text sichtbar
   hinein und hinaus. */
/* Das Band sitzt jetzt zwischen zwei Linien, damit es als eigener Streifen
   steht statt zwischen den Reihen zu schweben.

   Die Maske liegt dafuer auf einer eigenen Schicht und nicht mehr auf dem
   Band selbst: eine Maske nimmt alles mit, was das Element zeichnet, also
   auch seine Rahmen. Die Linien waeren an beiden Enden ueber je fuenf
   Prozent der Breite weggeblendet worden - bei 936px Bandbreite rund 47px
   an jeder Seite - und damit sichtbar kuerzer als alle anderen Linien im
   Raster. So blendet nur noch der laufende Text aus. */
.band{background:#FFFFFF;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);}
/* Folgt eine Reihe, zieht die schon ihre Oberkante - die Unterkante des
   Bands waere dann die zweite Linie einen Pixel darunter. Steht das Band
   am Ende, behaelt es sie. */
.band:not(:last-child){border-bottom:0;}
.band__maske{overflow:hidden;padding:1.05rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);}
.band__in{display:flex;width:max-content;animation:band 38s linear infinite;}
.band__in span{font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.08em;color:var(--ink-soft);padding:0 1.5rem;white-space:nowrap;}
@keyframes band{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.band__in{animation:none;}}

/* Die Fusszeile bringt sonst das Dunkelrot und die Schraffur mit - das
   waere auf dieser Seite der einzige Farbblock. */
footer{background:#FFFFFF!important;background-image:none!important;
  border-top:1px solid var(--linie);color:var(--ink);}
footer a,footer p,footer span,footer .f__cooplabel,footer .f__cooplogo{
  color:var(--ink-soft)!important;font-family:var(--mono);}
footer a:hover{color:var(--ink)!important;}
/* Das Fusslogo ist ein cremefarbenes PNG - auf dem weissen Fuss also fast
   unsichtbar. background-color allein half nicht, ein PNG ist keine Maske.
   Die Datei hat aber echte Transparenz, also fuehre ich sie als Maske und
   faerbe sie mit der Schriftfarbe: echtes Schwarz auf Weiss. */
footer .f__logo{background-image:none;background-color:var(--ink);
  -webkit-mask:url('../assets/img/logo-cream.png') no-repeat left center/contain;
          mask:url('../assets/img/logo-cream.png') no-repeat left center/contain;}
footer .f__kanji{background-color:var(--ink);}
/* Das echte Logo des Studierendenwerks statt des gestrichelten Platzhalters.
   Kein Rahmen, kein Grund, keine Umfaerbung: ein fremdes Logo zeigt man so,
   wie es ist. Das Gruen ist damit der einzige Farbfleck auf der Seite - das
   ist hier richtig so, es kennzeichnet den Partner und nicht uns. */
footer img.f__cooplogo{display:block;border:0;background:none;padding:0;
  min-width:0;width:clamp(11rem,16vw,14rem);height:auto;}
/* Die Schutzzone steckt im Bild, nicht im CSS - so bleibt sie erhalten,
   egal wie das Logo spaeter eingebunden wird. */

/* ---- Groesse der Fusszeile -------------------------------------------
   Gemessen stand der Fuss ueber dem Inhalt: Anschrift, Navigation und
   "In cooperation with" bei 16px, waehrend der gesamte Fliesstext der
   Seite auf 14px laeuft und die Knoepfe auf 12px. Ein Fuss soll leiser
   sein als das, was ueber ihm steht, nicht lauter.

   Die Werte kommen aus ci-rot.css und gelten dort fuer den dunkelgruenen
   Fuss der braunen Fassung, wo helle Schrift auf dunklem Grund mehr
   Groesse vertraegt. Hier ist der Fuss weiss wie alles andere, also
   gilt dieselbe Stufenleiter wie im Inhalt. Geaendert wird nur hier,
   damit die braune Fassung bleibt, wie sie ist.

   Der Selektor traegt footer davor: .f__cooplabel wird in ci-rot.css
   von einer Regel mit einer Klasse auf --t-m gesetzt, gleich stark waere
   also nur eine Frage der Reihenfolge.                                 */
footer .f__adr{font-size:var(--t-s);}
footer .f__zeit{font-size:var(--t-xs);}
footer .f__col a{font-size:var(--t-s);}
footer .f__cooplabel{font-size:var(--t-xs);}
footer .f__cooplogo{font-size:var(--t-xs);}
footer .f__legal{font-size:var(--t-xs);}
/* Die Verweise werden mit der kleineren Schrift schmaler als die 24px,
   die ein Ziel mindestens hoch sein soll. Das Polster holt das zurueck,
   der kleinere Abstand haelt den Zeilenfall dabei gleich. */
footer .f__col{gap:.3rem;}
footer .f__col a{padding-block:.2rem;}
footer .f__legal a{display:inline-block;padding-block:.25rem;}

.z--gross{justify-content:center;min-height:clamp(16rem,26vw,22rem);}
.kanjiz{width:clamp(38px,4vw,54px);height:clamp(38px,4vw,54px);
  background-color:var(--ink);opacity:.14;
  -webkit-mask:url('../assets/img/ma-kanji.svg') no-repeat center/contain;
          mask:url('../assets/img/ma-kanji.svg') no-repeat center/contain;}

@media(max-width:860px){
  .r-2,.r-3,.r-links,.r-rechts{grid-template-columns:1fr;}
  /* Hier gibt das Seitenverhaeltnis die Form vor, also muss die
     Mindesthoehe von oben weg. Beide zusammen widersprechen sich: die
     Mindesthoehe von 14rem erzwang 246px Hoehe, das Verhaeltnis leitete
     daraus 246 x 1,6 = 394px Breite ab, und die Zelle stand 19 Pixel
     breiter da als das Fenster. */
  .z--bild{aspect-ratio:16/10;min-height:0;}
}

/* ---- Ergaenzungen fuer die Unterseiten --------------------------------- */

.r-4{grid-template-columns:repeat(4,1fr);}
/* Der Umbruch muss NACH der Regel oben stehen. In der Medienabfrage weiter
   oben hatte er keine Wirkung: beide haben dieselbe Spezifitaet, und dann
   gewinnt die spaetere Regel - die Viererreihe blieb auf dem Telefon
   vierspaltig. Zwei Spalten statt einer, weil vier Freisteller
   untereinander vier Bildschirme fuellen wuerden. */
@media(max-width:860px){
  .r-4{grid-template-columns:1fr 1fr;}
}

/* Freisteller: die Figur steht frei auf Weiss, wird also nicht beschnitten.
   contain statt cover, und Luft ringsum - sonst klebt sie an der Kante. */
.z--frei{padding:clamp(1.2rem,2.4vw,2rem);background:#FFFFFF;}
.z--frei img{width:100%;height:100%;object-fit:contain;display:block;}

/* Titelzeile einer Unterseite: eine Aussage, sonst nichts. */
.z--titel{min-height:clamp(9rem,16vw,14rem);justify-content:flex-end;}
.z--titel h1{font-size:clamp(2rem,5.4vw,4rem);}

/* Lange Listen: Karte und Programm. Dieselbe Zeile wie oben, nur dichter,
   damit vierzig Posten nicht zu vierzig Bildschirmen werden. */
.liste--dicht li{padding:.48rem 0;}
.liste--dicht span{font-variant-numeric:tabular-nums;}
/* Zweite Zeile unter einem Posten: was drin ist.
   white-space muss hier zurueckgesetzt werden: .liste span haelt die Preise
   in einer Zeile, und diese Zeile ist auch ein span - ohne normal liefe sie
   als eine lange Zeile aus der Zelle heraus. */
.liste .dazu{display:block;color:var(--ink-soft);font-size:var(--t-xs);
  margin-top:.15rem;font-weight:400;white-space:normal;line-height:1.5;}

/* Eine Gruppe mehrerer Namen zu einem Preis - Wein, Bier, Kurze. Die Namen
   stehen fett in der Zutatenzeile, der Preis bleibt rechts. */
.liste .dazu b{font-weight:700;color:var(--ink);}
.liste li{align-items:baseline;}
.liste li > div{min-width:0;}

/* ---- Preise direkt hinter dem Namen -----------------------------------
   Vorher standen sie als zweites Flex-Kind am rechten Rand, mit der ganzen
   Zeilenbreite dazwischen. Jetzt schliessen sie an den Namen an.

   Auf der Karte liegen sie dafuer im selben div wie der Name, also vor der
   Zutatenzeile - die ist display:block und rutscht von selbst darunter.
   In der kurzen Liste auf der Startseite gibt es kein div, dort muss das
   justify-content der Zeile zurueckgenommen werden, sonst schoebe es den
   Preis weiter nach rechts.

   Die Zeiten- und Terminlisten behalten den rechten Rand: dort ist die
   Spalte aus Uhrzeiten das, was man abliest.                            */
.liste .preis{color:var(--ink-soft);white-space:nowrap;font-weight:400;
  font-variant-numeric:tabular-nums;}
.liste--preise li{justify-content:flex-start;gap:.6rem;}

/* Zwischenueberschrift innerhalb einer Spalte, wie die kleinen Marken auf der
   gedruckten Karte: SPRITZ BY THE JUG, SOFT DRINKS, FOR THE ROUND. Dieselbe
   Schrift wie das Etikett der Spalte, aber durch Luft und eine Linie
   abgesetzt, damit sie als Untergliederung liest und nicht als neue Spalte.
   Die Liste darueber hat keine Abschlusslinie (.liste li:last-child), die
   Trennung kommt also von hier. */
.etikett--in{margin-top:1.5rem;padding-top:.85rem;
  border-top:1px solid var(--linie);}

/* Eine Zelle, die nur eine Zahl traegt. */
.zahl{font-family:var(--mono);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.6rem,7vw,5rem);line-height:.95;color:var(--ink);}


/* ---- Ladeflaechen auf Weiss -------------------------------------------
   Die Platzhalter der Hauptfassung sind Ivory und warm getoent - auf dieser
   Seite waeren sie der einzige Farbfleck. Hier ein neutrales Grau, und das
   Zeichen darin schwarz statt rot.                                      */
:root{
  --skel:#F1F1F1;
  --skel-glanz:rgba(255,255,255,.95);
}
/* Nur die Farbe des Zeichens wird hier gesetzt, nicht seine Deckung: das
   Zeichen atmet per @keyframes, und eine laufende Animation schlaegt jede
   einfache opacity-Angabe. Die Deckung regeln darum die Keyframes unten. */
.skel--voll::after{background-color:var(--ink);}

/* Freisteller stehen ohne Rahmen auf dem Weiss. Ein graues Rechteck waere
   dort ein Versprechen, das das Bild nicht einloest - es kommt ja keine
   Flaeche, sondern eine ausgeschnittene Figur. Also bleibt hier nur das
   Zeichen, ohne Grund und ohne Glanz. Weil es damit das einzige Zeichen
   ist, dass ueberhaupt etwas kommt, atmet es kraeftiger als sonst: auf
   reinem Weiss geht die blasse Fassung sonst unter.                    */
.skel--frei{background:none;animation:none;}
.skel--frei::after{animation-name:ma-zeichen-frei;}
@keyframes ma-zeichen-frei{0%,100%{opacity:.13}50%{opacity:.28}}

/* Die Bildzellen brauchen position:relative, damit der Platzhalter darin
   sitzt und nicht am Fenster.

   Die Freisteller trugen frueher ein aspect-ratio direkt an der Zelle.
   Das fuehrte zu einer Schleife: die Reihe streckt die Zelle auf ihre
   Hoehe, das Verhaeltnis leitet daraus eine Breite ab (Hoehe x Verhaeltnis),
   und weil fr-Spuren als Minimum auto haben, wuchs die Spur mit - bei
   880px von 513 auf 734 Pixel, die Reihe damit 129 Pixel breiter als das
   Fenster. Nahm man der Zelle die Hoehe, blieb sie niedriger als ihr
   Rasterfeld und darunter schien die Linienfarbe als grauer Block durch.

   Die Form kommt darum jetzt aus einer Mindesthoehe statt aus einem
   Verhaeltnis. Eine Mindesthoehe kann keine Breite erzeugen, also faellt
   die Schleife weg: die Zelle fuellt ihr Feld, die Spur bleibt bei ihrem
   Anteil, und das Bild richtet sich mit object-fit darin ein.          */
.z--bild,.z--frei{position:relative;min-width:0;}
.z--frei{min-height:clamp(11rem,20vw,18rem);}

/* Deckel fuer das Bild, nicht fuer die Zelle. Ohne ihn bestimmt die
   natuerliche Bildhoehe die Zeilenhoehe: ein Hochformat wurde auf
   627px Breite 1087px hoch, die Reihe damit 1143px, und die Textzelle
   daneben stand zu 88 Prozent leer. Der Deckel gehoert ans Bild und
   nicht an die Zelle - an der Zelle wuerde er verhindern, dass sie ihr
   Rasterfeld fuellt, wenn ein Nachbar hoeher ist, und es entstuende
   wieder eine graue Luecke. */
.z--frei img{max-height:clamp(16rem,30vw,26rem);}
/* Der Flyer ist ein Plakat, kein Beiwerk. Mit dem allgemeinen Deckel stand
   er 217 Pixel breit da, und darauf ist nichts mehr zu lesen. Er bekommt
   darum mehr Hoehe als die uebrigen Freisteller. */
.z--frei img.blatt{max-height:clamp(18rem,34vw,30rem);}
/* Nicht jedes Bild muss gleich gross sein. Vorher standen Flyer, Fritten,
   Tasse und Abendfoto in vier fast gleich hohen Reihen untereinander -
   559, 501, 501, 528 Pixel - und die Folge las sich wie ein Stapel. Die
   Groesse richtet sich jetzt nach der Sache: der Flyer ist ein Plakat,
   die Fritten eine Portion, die Tasse ein Detail. */
.z--frei img.gross{max-height:clamp(12rem,22vw,18rem);}
.z--frei img.mittel{max-height:clamp(9rem,17vw,14rem);}
.z--frei img.klein{max-height:clamp(6.5rem,12vw,10rem);}
/* Ein Freisteller, der tiefer in seiner Zelle sitzt. Die Packung steht
   dadurch nicht auf der Mitte der Zeile, sondern etwas darunter. */
.z--frei img.tief{margin-top:clamp(2rem,5vw,4.5rem);}

/* Ein Foto als Schlusspunkt in einer Textzelle. Nicht beschnitten, sondern
   ganz sichtbar: bei der Tafel geht es um das, was daraufsteht. margin-top
   auto schiebt es an den unteren Rand der Zelle, so wie es die Knoepfe in
   den Nachbarzellen auch tun - dadurch stehen sie auf einer Linie. */
.z > img.einblick{display:block;margin-top:auto;width:auto;height:auto;
  max-width:100%;max-height:clamp(11rem,22vw,18rem);align-self:flex-start;}

/* Bildsaeule: schmal, hoch und randlos.
   Als .z--bild lag das Abendfoto in einem 720x412-Feld und wurde von
   object-fit:cover auf Querformat beschnitten - vom Hochformat blieb ein
   Streifen. Danach stand es als vollstaendiges Bild mit Weiss links und
   rechts. Jetzt fuellt es seine Zelle bis an die Kanten, bleibt dabei
   aber hochformatig, weil die Spur selbst schmal ist: diese Reihe teilt
   9:3 statt 5:7, die Bildspalte ist also rund 308px breit bei gut 500px
   Hoehe. Das ist fast genau das Verhaeltnis des Zuschnitts (3:5), es
   wird also kaum etwas weggeschnitten.

   Die Hoehe kommt aus einer Mindesthoehe und nicht aus aspect-ratio: ein
   Verhaeltnis auf einer gedehnten Rasterzelle leitet daraus eine
   Mindestbreite ab und blaeht die fr-Spur auf. Eine Mindesthoehe kann
   keine Breite erzeugen, also bleibt die Spur bei ihrem Anteil. */
.r-saeule{grid-template-columns:9fr 3fr;}

/* ---- Kopfbilder der Unterseiten --------------------------------------
   Die Titelreihen von Kontakt, Ueber uns und Bar mieten tragen ein
   Hochformat (1080x1350, Verhaeltnis 0,8) in einer Zelle, die 720 breit
   und 408 hoch war - das Feld ist 1,76 breit, object-fit:cover schnitt
   also gut die Haelfte der Bildhoehe weg.

   Schmalere Spur (7:5 statt 5:7) und mehr Mindesthoehe bringen das Feld
   auf etwa 0,9. Damit bleibt vom Hochformat fast alles stehen, ohne dass
   die Reihe ins Riesenhafte waechst. Die Hoehe kommt wieder aus einer
   Mindesthoehe, nicht aus aspect-ratio - ein Verhaeltnis auf der
   gedehnten Zelle leitet daraus eine Mindestbreite ab und blaeht die
   fr-Spur auf.                                                         */
.r-kopf{grid-template-columns:7fr 5fr;}
.z--bild--hoch{min-height:clamp(20rem,38vw,34rem);}
/* Die Fassade auf "Ueber uns" steht in einer 618px breiten Spalte und ist
   ein Hochformat (0,88). Mit der Hoehe von oben bliebe davon ein Querstreifen,
   darum hier mehr: 618/634 ergibt ein Feld von 0,97, es faellt also nur ein
   knappes Zehntel der Bildhoehe weg. */
.z--bild--fassade{min-height:clamp(24rem,44vw,42rem);}
@media(max-width:860px){
  .r-kopf{grid-template-columns:1fr;}
  /* Einspaltig ist die Zelle so breit wie das Raster; mit der Hoehe von
     oben bliebe ein Querformat. 110vw stellt das Feld am Telefon auf
     etwa 0,9, also wieder nah am Bild. */
  /* .z--bild traegt im Mobilblock weiter oben ein aspect-ratio von 16/10.
     Zusammen mit dieser Mindesthoehe leitet das Verhaeltnis eine Breite ab:
     412 x 1,6 = 659px in einer 331px breiten Spur - gemessen 307px
     Ueberlauf. Dieselbe Schleife wie schon einmal weiter oben. Das
     Verhaeltnis muss hier also raus, die Form kommt allein aus der Hoehe. */
  /* JEDE Abwandlung von .z--bild muss hier das Verhaeltnis loswerden.
     .z--bild traegt im Block weiter oben aspect-ratio:16/10; zusammen mit
     einer eigenen Mindesthoehe leitet das Verhaeltnis daraus eine Breite ab
     und sprengt die Spur. Das ist mir mit --hoch und mit --fassade je einmal
     passiert, gemessen 307 und 323 Pixel Ueberlauf. Darum als Regel fuer
     alles, was mit z--bild-- anfaengt, statt einzeln nachzuziehen. */
  [class*="z--bild--"]{aspect-ratio:auto;}
  .z--bild--hoch{min-height:clamp(18rem,110vw,28rem);}
  /* Die Fassade ist 0,88 hoch; 331/356 ergibt ein Feld von 0,93. */
  .z--bild--fassade{min-height:clamp(20rem,95vw,28rem);}
}
.z--randlos{position:relative;min-width:0;padding:0;overflow:hidden;
  min-height:clamp(20rem,36vw,32rem);}
.z--randlos img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;}
@media(max-width:860px){
  .r-saeule{grid-template-columns:1fr;}
  /* Einspaltig ist die Zelle so breit wie das Raster. Mit der Mindesthoehe
     von oben bliebe davon ein Querformat uebrig, also hier mehr Hoehe -
     sonst waere am Telefon genau der Streifen zurueck, der am Anfang das
     Problem war. */
  /* Gemessen: mit 22rem kam die Zelle am Telefon auf 331x387, also
     Verhaeltnis 0,85 - fast quer. Mit 135vw steht sie bei 331x506,
     also 0,65 und damit wieder erkennbar hochformatig. */
  .z--randlos{min-height:clamp(24rem,135vw,32rem);}
}

/* Der Uebergang zwischen den Seiten kommt aus ci-rot.css und traegt dort
   das Dunkelrot - hier schwarz, wie alles auf dieser Fassung. */
.wechsel{background:rgba(255,255,255,.86);}
.wechsel__zeichen{background-color:var(--ink);}

/* Steht die Animation still, muss die Deckung gesetzt werden - hier ist
   sie nicht mehr dead code, sondern das einzige, was greift. */
@media(prefers-reduced-motion:reduce){
  .skel--voll::after{opacity:.16;}
  .skel--frei::after{opacity:.24;}
}


/* ---- Rechtstexte ------------------------------------------------------
   Impressum und Datenschutz sind lange Prosa, und dafuer ist das Raster
   nicht gebaut: ueber die volle Breite von 1380px waeren die Zeilen rund
   170 Zeichen lang. Die Zelle bleibt darum eine gewoehnliche Rasterzelle,
   der Satz darin bekommt aber sein eigenes Mass.

   Die Abstaende stehen hier und nicht an .z h2/.z h3: die tragen margin:0,
   und bei gleicher Spezifitaet entscheidet die Reihenfolge. Mit der
   Zellklasse davor ist die Regel eindeutig staerker und haengt nicht
   daran, wo im Blatt sie steht.                                        */
.z--recht{display:block;}
.recht{max-width:62ch;}
.z--recht .recht h2{font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.2;
  letter-spacing:-.015em;margin:3.2rem 0 0;}
.z--recht .recht h2:first-child{margin-top:0;}
.z--recht .recht h3{font-size:var(--t-m);line-height:1.35;
  letter-spacing:-.01em;margin:2.1rem 0 0;}
.z--recht .recht p{font-size:var(--t-s);line-height:1.7;max-width:none;
  margin:.9rem 0 0;}
.z--recht .recht b{color:var(--ink);font-weight:700;}
/* Anschriften enger setzen, damit der Block als Adresse lesbar bleibt
   und nicht als Fliesstext mit vielen Umbruechen. */
.z--recht .recht p.adr{line-height:1.5;}
.z--recht .recht a{color:var(--ink);text-decoration:underline;
  text-underline-offset:.22em;text-decoration-thickness:1px;}
.z--recht .recht a:hover{text-decoration-thickness:2px;}
.z--recht .recht p.stand{margin-top:3.2rem;padding-top:.7rem;
  border-top:1px solid var(--linie);font-size:var(--t-xs);}


/* ---- Schneefall im Dezemberblock -------------------------------------
   Kein Bild, keine Grafik: die Flocken sind das Zeichen 間 und der Stern
   aus derselben Monospace, die die ganze Seite traegt. Sie fallen endlos,
   jede in ihrem eigenen Tempo.

   Die Flocken liegen absolut in der Zelle, der Inhalt bekommt darum eine
   eigene Ebene - sonst koennte eine Flocke ueber der Schrift landen. Sie
   nehmen keine Klicks an und sind fuer den Screenreader nicht da; es ist
   Dekoration und sonst nichts.

   top laeuft in Prozent, damit der Fall genau so hoch ist wie die Zelle,
   egal ob am Telefon oder am grossen Schirm. Eine feste Strecke in rem
   muesste raten und waere mal zu kurz, mal zu lang.                    */
/* Der Satz steht hier mittig und nicht linksbuendig wie im Rest der Seite:
   der Block laeuft ueber die volle Rasterbreite, und ein linksbuendiger
   Absatz von 46 Zeichen haette daneben 800 Pixel Weiss. Dazu mehr Luft
   nach oben, damit der Block sich von der Reihe darueber loest. */
.z--schnee{position:relative;overflow:hidden;align-items:center;
  text-align:center;padding-top:clamp(4rem,8vw,8rem);}
.z--schnee p{margin-inline:auto;}
.z--schnee .pille{align-self:center;}
.z--schnee > *:not(.schnee){position:relative;z-index:1;}
/* Die Flocken sind Zeichen, also liessen sie sich markieren und
   mitkopieren - wer den Absatz kopiert, haette zwanzig Sterne davor. */
.schnee{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-user-select:none;user-select:none;}
.schnee span{position:absolute;font-family:var(--mono);color:var(--ink);
  line-height:1;opacity:0;will-change:top,transform;
  animation-name:rieseln;animation-timing-function:linear;
  animation-iteration-count:infinite;}
@keyframes rieseln{
  0%  {top:-12%;transform:translateX(0) rotate(0deg);opacity:0;}
  10% {opacity:var(--deck,.16);}
  90% {opacity:var(--deck,.16);}
  100%{top:106%;transform:translateX(var(--weg,0)) rotate(var(--dreh,0deg));opacity:0;}
}
/* Steht die Animation still, bleibt jede Flocke auf dem Platz, den sie
   im Dokument mitbringt - ein ruhiges Streumuster statt einer leeren
   Flaeche. Die Deckkraft muss dann hier gesetzt werden, weil sie sonst
   nur im Bildlauf vorkommt. */
/* Zweiundzwanzig Flocken verteilen sich auf 1236px gut, auf 331px am
   Telefon waere alle fuenfzehn Pixel eine - das ist kein Schneefall mehr,
   das ist Rauschen. Dort faellt jede zweite weg. */
@media(max-width:640px){
  .schnee span:nth-child(2n){display:none;}
}
@media(prefers-reduced-motion:reduce){
  .schnee span{animation:none;opacity:var(--deck,.16);}
}