/* eigen.css — alles, was nach dem Astro-Bau dazugekommen ist. * * Warum eine eigene Datei und nicht _astro/index.*.css: * Die Astro-Datei ist ein Bauergebnis. Wer hineinschreibt, verliert seine Aenderung, * sobald jemand neu baut, und der Dateiname wechselt dabei auch noch. Diese Datei * wird zuletzt geladen und ueberschreibt deshalb, was sie ueberschreiben soll. * * Der Verweis in index.php traegt ?v=. Ohne ihn behalten Besucher die * alte Fassung bis zu SIEBEN TAGE: der Server schickt cache-control max-age=604800, * am 07.09. an der Live-Antwort gemessen. Eine Aenderung, die niemand sieht, ist * keine Aenderung. * * Sie haengt an denselben Kennungen wie der Rest der Seite * (data-astro-cid-j7pv25f6). Ohne diese Kennung greift keine Regel. */ /* ------------------------------------------------------------------ 1. Der Sprung zum Reservierungsformular ------------------------------------------------------------------ Bisher zeigten alle Knoepfe auf #reservation. Diese Kennung sitzt auf der ganzen Sektion, und die faengt mit Oeffnungszeiten und Kontakt an. Am Handy stehen die untereinander, der Gast landete also beim Kontakt statt beim Formular. Jetzt zeigen die Knoepfe auf #res-formular. scroll-margin-top, weil die Leiste fest oben klebt und den Anfang sonst verdeckt. 110 am Rechner, 86 am Handy, gemessen an der Leistenhoehe. */ #res-formular { scroll-margin-top: 110px; } @media (max-width: 900px) { #res-formular { scroll-margin-top: 86px; } } /* ------------------------------------------------------------------ 2. Kundenstimmen: fuenf statt drei ------------------------------------------------------------------ Die Kachelreihe stand fest auf drei Spalten. Bei fuenf Stimmen ergab das 3 + 2 mit einem Loch rechts. grid mit auto-fit war der erste Versuch und hat das Loch NICHT geschlossen: bei 1200 Pixeln Breite und 300 Pixeln Mindestbreite kommen wieder genau drei Spalten heraus, und die zweite Zeile beginnt weiter links. Gemessen, nicht vermutet - der Probeaufbau stand mit fuenf Kacheln vor mir. Flexbox kann, was das Raster hier nicht kann: die letzte, unvolle Zeile mittig setzen. Am Handy bleibt es bei einer Spalte. */ @media (min-width: 901px) { .testi-grid[data-astro-cid-j7pv25f6] { display: flex; flex-wrap: wrap; justify-content: center; } .testi-card[data-astro-cid-j7pv25f6] { flex: 0 1 360px; } } /* ------------------------------------------------------------------ 3. Hero-Overlay, Variante O3: rote Platte ------------------------------------------------------------------ Abgenommen von Daniel am 06.09. Gruende, die zur Wahl gefuehrt haben: Der Schriftzug stand cremefarben auf einem hellen, unruhigen Kuechenbild. Gemessen ueber alle 96 Hero-Frames liegt die Helligkeit an dieser Stelle zwischen 141 und 198 von 255, der Hintergrund ist also nie dunkel. Reines Hausrot ohne Platte wurde gebaut und faellt durch, auch mit dicker Kontur. Die Platte traegt auf jedem Frame, weil sie ihren Untergrund selbst mitbringt. */ .hero[data-astro-cid-j7pv25f6] h1[data-astro-cid-j7pv25f6] { background: var(--accent); padding: 10px 34px 16px; border-radius: 2px; text-shadow: none; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); } /* Die Schriftzeichen darueber standen im selben Rot wie die Platte und waeren davor verschwunden. Auf Creme gewechselt. */ .hero-cn[data-astro-cid-j7pv25f6] { color: var(--on-media); } @media (max-width: 900px) { .hero[data-astro-cid-j7pv25f6] h1[data-astro-cid-j7pv25f6] { padding: 8px 22px 12px; } } /* ------------------------------------------------------------------ 4. Der Sprachumschalter DE / EN / ZH ------------------------------------------------------------------ Am Handy neben dem Burger, am Rechner als letzter Punkt der Leiste. Beide Male dasselbe Stueck HTML, nur die Klasse unterscheidet sich. Die aktive Sprache ist ein , kein Verweis. Sie sieht deshalb absichtlich anders aus: wer schon auf Deutsch ist, soll nicht auf DE druecken koennen und sich fragen, warum nichts passiert. */ .sprachschalter[data-astro-cid-j7pv25f6] { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .1em; white-space: nowrap; } .sprachschalter[data-astro-cid-j7pv25f6] a, .sprachschalter[data-astro-cid-j7pv25f6] .sw-an { padding: 4px 7px; border-radius: 2px; line-height: 1; text-decoration: none; } .sprachschalter[data-astro-cid-j7pv25f6] a { color: var(--on-media); opacity: .62; transition: opacity .25s; } .sprachschalter[data-astro-cid-j7pv25f6] a:hover { opacity: 1; } .sprachschalter[data-astro-cid-j7pv25f6] .sw-an { background: var(--accent); color: var(--on-media); font-weight: 600; } /* Am Handy gibt es ihn in der Leiste NICHT. Daniel am 06.09.: dort nur im aufgeklappten Burgermenue, am Rechner ausserhalb. Der dritte Schalter neben dem Burger ist deshalb wieder entfallen, die Leiste wurde damit auch ruhiger. */ @media (max-width: 900px) { .sprachschalter.sw-rechner[data-astro-cid-j7pv25f6] { display: none; } } /* Der Umschalter muss BEIDE Zustaende der Leiste koennen. Oben ueber dem Bild: cremefarbene Schrift auf dunklem Grund. Gescrollt auf cremefarbenem Grund: dunkle Schrift, wie die Menuepunkte daneben. Das Kaestchen der gewaehlten Sprache bleibt in beiden Zustaenden hausrot mit cremefarbener Schrift - damit ist es dasselbe Zeichen, egal wo man steht. */ nav[data-astro-cid-j7pv25f6].scrolled .sprachschalter[data-astro-cid-j7pv25f6] a { color: rgba(15, 11, 8, .70); background: transparent; text-shadow: none; } nav[data-astro-cid-j7pv25f6].scrolled .sprachschalter[data-astro-cid-j7pv25f6] a:hover { color: rgba(15, 11, 8, 1); } /* Die NICHT gewaehlten Sprachen tragen kein Kaestchen, in keinem Zustand. Sie standen zuerst auf einem dunklen Grund, damit sie auf dem hellen Hero-Bild tragen. Das war lesbar und haesslich: drei Kaestchen nebeneinander, eines rot, zwei grau, und daneben schon der rote Knopf. Der Schleier ueber der Leiste macht den dunklen Grund ueberfluessig, und ohne ihn hat der Umschalter EINE Form: schlichter Text, und ein einziges Kaestchen fuer die Sprache, in der man gerade steht. */ nav[data-astro-cid-j7pv25f6]:not(.scrolled) .sprachschalter[data-astro-cid-j7pv25f6] a { background: transparent; opacity: .72; text-shadow: 0 1px 8px rgba(15, 11, 8, .9); } nav[data-astro-cid-j7pv25f6]:not(.scrolled) .sprachschalter[data-astro-cid-j7pv25f6] a:hover { opacity: 1; } /* Luft zwischen dem Knopf und der Sprachwahl. Ohne sie kleben zwei verschiedene Dinge aneinander, und das rote Kaestchen sieht aus wie ein zweiter Knopf. */ .sprachschalter.sw-rechner[data-astro-cid-j7pv25f6] { margin-left: 22px; padding-left: 22px; border-left: 1px solid rgba(240, 232, 216, .22); } nav[data-astro-cid-j7pv25f6].scrolled .sprachschalter.sw-rechner[data-astro-cid-j7pv25f6] { border-left-color: rgba(15, 11, 8, .14); } /* Fingerbreite. Die Seite hat sich am 31.07. selbst 44 Pixel als Mindestmass gesetzt, weil man am Handy trifft statt zielt. Der Umschalter war kleiner. */ .sprachschalter[data-astro-cid-j7pv25f6] a, .sprachschalter[data-astro-cid-j7pv25f6] .sw-an { min-height: 44px; display: inline-flex; align-items: center; } /* Im aufgeklappten Burgermenue steht er ganz oben neben 美味. Dort ist der Grund dunkel und ruhig, deshalb braucht er keinen eigenen Untergrund, nur mehr Luft und etwas mehr Groesse: das ist die Stelle, an der ein Gast mit chinesischem Telefon seine Sprache sucht. */ .sprachschalter.sw-blende[data-astro-cid-j7pv25f6] { /* Mittig, wie alles andere im aufgeklappten Menue. Er stand zuerst links, waehrend 美味 darueber und saemtliche Menuepunkte darunter zentriert sind. Eine einzige Ausnahme in einer sonst mittigen Spalte sieht nicht nach Absicht aus, sondern nach Versehen. */ justify-content: center; margin: 18px 0 30px; font-size: 14px; } /* Dieselbe Form wie in der Leiste: die nicht gewaehlten Sprachen sind schlichter Text, nur die gewaehlte traegt ein Kaestchen. Vorher hatte jede Sprache hier einen eigenen Rahmen, und drei Rahmen nebeneinander sehen aus wie drei Knoepfe, von denen einer schon gedrueckt ist. Am Handy ist das hier die HAUPTstelle fuer die Sprachwahl, deshalb groesser und mit mehr Luft als am Rechner. */ .sprachschalter.sw-blende[data-astro-cid-j7pv25f6] { /* Mehr Luft als am Rechner. Bei dieser Schriftgroesse standen EN und ZH mit 4 Pixeln Abstand so dicht, dass sie als ein Wort gelesen wurden. */ gap: 10px; } /* EINE Schrift fuer alle drei Kuerzel. Die Blende gibt jedem darin die grosse Serifenschrift (Noto Serif SC, 26px) fuer die Menuepunkte. Die gewaehlte Sprache ist aber ein und bekam sie nicht: "DE" stand klein und serifenlos neben einem grossen "EN ZH". Genau das hat Daniel gemeint, als er sagte, es sehe aus wie zwei Schriften fuer gewaehlt und nicht gewaehlt. Die Regel unten hat mehr Gewicht als die der Blende und setzt beide gleich. */ #menu-blende[data-astro-cid-j7pv25f6] .sprachschalter.sw-blende[data-astro-cid-j7pv25f6] a, #menu-blende[data-astro-cid-j7pv25f6] .sprachschalter.sw-blende[data-astro-cid-j7pv25f6] .sw-an { font-family: Outfit, system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .14em; padding: 12px 15px; display: inline-flex; min-height: 44px; align-items: center; } .sprachschalter.sw-blende[data-astro-cid-j7pv25f6] a { border: 0; background: transparent; opacity: .62; } .sprachschalter.sw-blende[data-astro-cid-j7pv25f6] a:hover { opacity: 1; } /* (Die frueher hier stehende Regel fuer den Rechner-Schalter ist oben in den zustandsabhaengigen Block gewandert. Unbedingt gesetzt hat sie den dunklen Grund auch auf die gescrollte, cremefarbene Leiste gelegt.) */ /* ------------------------------------------------------------------ 5. Lesbarkeit der Leiste über dem Hero ------------------------------------------------------------------ Daniel am 06.09.: alles im Kopf lesbar machen, was schlecht lesbar ist. Die Ursache ist dieselbe wie beim Logo und gemessen: über alle 96 Bilder der Hero-Folge liegt die Helligkeit im Bereich der Leiste zwischen 141 und 198 von 255. Cremefarbene Schrift auf hellem, unruhigem Bild trägt dort nicht. Ein Schleier über der ganzen Leiste statt eines Schattens je Wort: ein Schatten macht Schrift dicker, nicht kontrastreicher, und auf einem Bild mit weissen Fliesen hilft er gar nicht. Der Verlauf läuft nach unten aus, damit keine Kante im Bild steht. Er liegt HINTER dem Inhalt der Leiste, deshalb -1 in der Ebene. Wenn die Leiste beim Scrollen ihren eigenen Grund bekommt, ist der Schleier überflüssig - dann liegt sie ohnehin auf Farbe. */ nav[data-astro-cid-j7pv25f6]:not(.scrolled)::before { content: ""; position: absolute; inset: -14px 0 auto 0; height: 148px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(15, 11, 8, .72) 0%, rgba(15, 11, 8, .52) 45%, rgba(15, 11, 8, 0) 100%); } /* Die Verweise selbst etwas kräftiger — aber NUR oben über dem Bild. Gescrollt liegt die Leiste auf cremefarbenem Grund und ihre Schrift ist dunkel; ein dunkler Schatten darunter macht sie dort schmutzig statt lesbar. Genau so ausgeliefert am 06.09. abends, und genau so hat Daniel es gesehen. */ nav[data-astro-cid-j7pv25f6]:not(.scrolled) .nav-links a[data-astro-cid-j7pv25f6], nav[data-astro-cid-j7pv25f6]:not(.scrolled) .nav-tagline[data-astro-cid-j7pv25f6], nav[data-astro-cid-j7pv25f6]:not(.scrolled) .nav-phone-mobile a[data-astro-cid-j7pv25f6] { opacity: 1; text-shadow: 0 1px 10px rgba(15, 11, 8, .85); /* Die Telefonnummer am Handy ist im Astro-Stylesheet DUNKEL (#0f0b08d1). Das ist fuer die gescrollte, cremefarbene Leiste gedacht. Oben ueber dem Kuechenbild stand sie damit dunkel auf hell, und mein Schatten machte es schlimmer statt besser. Dritter Fall desselben Fehlers an einem Tag: eine Regel gesetzt, ohne den zweiten Zustand anzusehen. Oben gehoert sie in Creme, wie alles daneben. */ color: var(--on-media); } /* ------------------------------------------------------------------ 6. Das Logo wechselt mit dem Zustand der Leiste ------------------------------------------------------------------ Die Leiste ist oben durchsichtig über dem Hero-Bild und nach 80 Pixeln Scrollen cremefarben (#f6f2e9, aus dem Astro-Stylesheet). Gemessen auf diesem Grund: Creme 1,09:1 unsichtbar Hausrot 5,64:1 Eine einzige Datei kann beides nicht. Zwei Bilder im Dokument, eines je Zustand. Kein CSS-Filter: das Logo hat zwei Tinten, ein Filter träfe beide gleich. */ .nav-logo.logo-dunkel[data-astro-cid-j7pv25f6] { display: none; } nav[data-astro-cid-j7pv25f6].scrolled .nav-logo.logo-hell[data-astro-cid-j7pv25f6] { display: none; } nav[data-astro-cid-j7pv25f6].scrolled .nav-logo.logo-dunkel[data-astro-cid-j7pv25f6] { display: block; } /* ------------------------------------------------------------------ 7. Die zwei Verweise unter den Kundenstimmen ------------------------------------------------------------------ Seit 07.09.2026 stehen dort zwei Verweise, Google und TheFork, statt einem auf das insolvente Quandoo. Zwei Dinge brauchen deshalb eine Regel: Der Abstand. Die Leerzeichen im Quelltext reichen nicht, weil die Zeile in Versalien mit weitem Zeichenabstand gesetzt ist; die Verweise klebten sichtbar aneinander. Getrennt wird deshalb ueber gap, nicht ueber ein Zeichen. Ein Mittelpunkt stand zuerst dazwischen und blieb bei 360 Pixeln am Zeilenende haengen, sobald die Zeile umbrach. Der Umbruch. Bei 390 Pixeln stehen beide Verweise nebeneinander, bei 360 untereinander. Beides im 360er- und 390er-Rahmen angesehen. Bei nur einem Verweis aendert sich nichts: eine einzelne Zeile bricht nirgends um. */ .testi-source[data-astro-cid-j7pv25f6] { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 30px; } /* ------------------------------------------------------------------ 8. Kleinschrift: 10 auf 11 px, aber nur wo gelesen wird ------------------------------------------------------------------ Daniel am 07.09.: die Zeile unter den Kundenstimmen und der Hinweis unter den Produkten sollen "einen Punkt groesser". Ausgezaehlt hat die Astro-CSS 21 Selektoren auf 10 px, nicht zwei. Wer nur die zwei hebt, bekommt zwei Groessen nebeneinander - am deutlichsten bei den Kundenstimmen, wo .testi-author ("Iz C.") direkt ueber der Verweiszeile steht. Gehoben werden deshalb die sieben Stellen, die man LIEST: ruhige Zeilen unter Inhalten, die etwas erklaeren, plus die Formularbeschriftungen. NICHT gehoben werden die vierzehn Etiketten und Chips (.section-label, .tag, .jump-chip, .hero-tagline und so weiter). Die liest niemand, die erkennt man. Groesser konkurrieren sie mit den Ueberschriften, unter denen sie stehen. .section-label ist deshalb die Gegenprobe: bleibt sie bei 10, war der Griff nicht zu breit. */ .testi-source[data-astro-cid-j7pv25f6] a[data-astro-cid-j7pv25f6], .testi-author[data-astro-cid-j7pv25f6], .produkte-hinweis[data-astro-cid-j7pv25f6], .footer-copy[data-astro-cid-j7pv25f6], .footer-note[data-astro-cid-j7pv25f6], .fs[data-astro-cid-j7pv25f6], .fg[data-astro-cid-j7pv25f6] label[data-astro-cid-j7pv25f6] { font-size: 11px; } /* ------------------------------------------------------------------ 9. Reservierungskopf: die Nummer gehoert unter den Satz ------------------------------------------------------------------ Daniel am 07.09. am Handy: Satz und Telefonnummer standen in einer Zeile. Flexzeile mit Umbruch statt einer eigenen Handy-Regel: am Rechner ist Platz, dort bleibt alles wie es war; am Handy reicht er nicht, also rutscht die Nummer auf ihre eigene Zeile. Eine Regel, beide Faelle. Getrennt wird ueber gap, nicht ueber ein Zeichen. Der Mittelpunkt, der frueher dazwischen stand, haette beim Umbruch am Ende der ersten Zeile gehangen - derselbe Fehler war heute frueh schon einmal in der Verweiszeile unter den Kundenstimmen. */ /* KORREKTUR 07.09. abends: hier stand justify-content:center, von mir aus der Verweiszeile unter den Kundenstimmen uebernommen. Dort ist mittig richtig, weil .testi-source mittig gesetzt ist. HIER war die Zeile immer linksbuendig, wie die Ueberschrift darueber und die Feldbeschriftungen darunter - die Astro-Regel fuer .fs setzt gar keine Ausrichtung. Daniel hat es gesehen. Ein Muster, das an einer Stelle passt, ist nicht automatisch an der naechsten richtig. */ .fs[data-astro-cid-j7pv25f6] { display: block; text-wrap: balance; } /* 13.09.2026: Satz und Nummer sind jetzt EIN Satz ("... bitte anrufen: 01 298 88 88"). Deshalb Fliesstext statt Flexzeile: als Flexzeile war die Nummer ein eigener Block, am Rechner brach der Satz in zwei Zeilen und die Nummer landete allein in der dritten. Jetzt laeuft alles als Text, verteilt sich gleichmaessig auf die Zeilen, und die Nummer bricht nie in sich um. */ .fs-tel[data-astro-cid-j7pv25f6] { white-space: nowrap; } /* ------------------------------------------------------------------ 10. Der Credit in der Fussleiste ------------------------------------------------------------------ Daniel am 07.09., Variante A. Er sieht aus wie das Copyright und der Rechtshinweis daneben, weil er dieselbe Aufgabe hat: eine ruhige Zeile am Ende, die man findet, wenn man sie sucht, und die sonst niemanden stoert. Der Verweis ist der einzige Unterschied. Er bekommt die Hausfarbe erst beim Darueberfahren; ein farbiger Verweis in der Fussleiste zoege den Blick vom Lokal auf uns, und darum geht es hier nicht. */ .footer-credit[data-astro-cid-j7pv25f6] { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .08em; } .footer-credit[data-astro-cid-j7pv25f6] a[data-astro-cid-j7pv25f6] { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(124, 124, 124, .35); transition: color .25s, border-color .25s; } .footer-credit[data-astro-cid-j7pv25f6] a[data-astro-cid-j7pv25f6]:hover { color: var(--jade); border-color: var(--jade); } /* ------------------------------------------------------------------ 11. Die Marke links im Stil des Menues rechts, und beide schrumpfen ------------------------------------------------------------------ Daniel am 07.09.: Logo, Nummer und meiwei.at sollen aussehen wie das Menue daneben, und beim Scrollen soll die Marke weich kleiner werden. Gemessen im 1400er-Rahmen, beide Zustaende: Telefon + meiwei.at JetBrains Mono 10 px, Laufweite 0,60 Menue rechts Outfit 13 px, Laufweite 0,52 Also andere Schrift, andere Groesse, andere Laufweite. Und beim Scrollen bewegte sich nur das Logo (68 -> 52), die Nummer blieb exakt gleich gross: die Marke schrumpfte nur halb. Die FARBE steht hier bewusst NUR fuer den gescrollten Zustand. Oben ueber dem Kuechenbild setzt Abschnitt 5 sie absichtlich auf Creme mit Schatten, und das ist die Lehre vom 06.09. (dunkle Schrift auf hellem Bild). Wer sie hier ueberschreibt, macht denselben Fehler zum vierten Mal. Platz kostet das nichts, im Gegenteil: gemessen bleiben bei 1440 px 322 statt 304 px Luft zum Menue, bei 1280 px 162 statt 144. Outfit auf 13 px baut schmaler als eine Schreibmaschinenschrift auf 10 px mit weiter Laufweite. */ .nav-tagline[data-astro-cid-j7pv25f6] { font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .04em; /* Ohne eigene transition springt die Schrift, waehrend das Logo gleitet. Dieselbe Kurve und Dauer wie nav, damit die Leiste in EINEM Takt arbeitet. */ transition: font-size .4s cubic-bezier(.16, 1, .3, 1), color .3s; } nav[data-astro-cid-j7pv25f6].scrolled .nav-tagline[data-astro-cid-j7pv25f6] { /* 13 -> 12 ist derselbe Anteil wie 68 -> 52 beim Logo. Kleiner waere die Nummer gescrollt kleiner als das Menue daneben, und der Zweck waere hin. */ font-size: 12px; color: #0f0b08b3; } /* Das Logo gleitet bisher linear. Auf dieselbe Kurve wie alles andere. */ .nav-logo[data-astro-cid-j7pv25f6] { transition: height .4s cubic-bezier(.16, 1, .3, 1); } /* ------------------------------------------------------------------ 12. Das Logo springt beim Scrollen. Ursache und Behebung. ------------------------------------------------------------------ Daniel am 07.09.: "eine Animation sehen wie sich die nav bar verkleinert und kein Springen, mit den Groessen die jetzt gegeben sind." GEMESSEN mit element.getAnimations() im 1400er-Rahmen, direkt nach dem Umschalten auf .scrolled. Wer laeuft, wer nicht: nav backdrop-filter, background-color, border, padding GLEITET Marke color, font-size GLEITET Logo hell KEINER (steht auf display:none) Logo dunkel KEINER (erscheint bereits auf 52px) Das Logo ist also das EINZIGE, was springt, und der Grund ist Abschnitt 6: dort wird zwischen zwei Dateien mit display umgeschaltet. display laesst sich nicht animieren. Das gleitende Bild wird ausgeblendet, und das neue erscheint sofort in der Zielgroesse. Die Regel transition:height am Logo lief deshalb nie - sie stand da und war wirkungslos. BEHEBUNG: beide Bilder bleiben im Layout, getauscht wird die Deckkraft. Damit laeuft die Hoehe auf beiden durch, und der Tintenwechsel wird eine Ueberblendung statt eines Schnitts. Das geht nur, weil die zwei Dateien deckungsgleich sind: logo-v3-leiste.png und logo-v3-fuss.png sind beide 463 x 317. Nachgemessen, nicht angenommen - bei verschiedenen Seitenverhaeltnissen wuerde das uebereinandergelegte Bild verrutschen. */ .nav-brand[data-astro-cid-j7pv25f6] > a[data-astro-cid-j7pv25f6] { position: relative; display: flex; align-items: center; } .nav-logo[data-astro-cid-j7pv25f6] { transition: height .4s cubic-bezier(.16, 1, .3, 1), opacity .4s cubic-bezier(.16, 1, .3, 1); } /* Das dunkle Logo liegt deckungsgleich ueber dem hellen und ist oben unsichtbar. display:block hebt Abschnitt 6 auf - dort stand display:none, und genau das hat den Uebergang getoetet. */ .nav-logo.logo-dunkel[data-astro-cid-j7pv25f6] { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; } nav[data-astro-cid-j7pv25f6].scrolled .nav-logo.logo-hell[data-astro-cid-j7pv25f6] { display: block; opacity: 0; } nav[data-astro-cid-j7pv25f6].scrolled .nav-logo.logo-dunkel[data-astro-cid-j7pv25f6] { display: block; opacity: 1; } /* ------------------------------------------------------------------ 10. Speisennummern (08.09.2026) Die Nummern der gedruckten Karte (V1, H5, G3 ...) standen seit jeher im Feld "code" in menu.json, wurden aber nie ausgegeben. Der Gast hat die Karte im Lokal in der Hand und bestellt danach. Sie stehen RECHTS als Kaestchen ohne Fuellung, neben den chinesischen Zeichen und dem Preis. Nicht links vor dem Namen wie auf Papier: dort sitzt im Flagship das rote Siegelzeichen, und zwei Systeme an derselben Stelle vertragen sich nicht. Kein eigener Farbton. Auf dem Foto weiss mit halbdurchsichtigem Rand, im hellen Block darunter die Textfarbe der Seite. Die Nummer ist eine Beschriftung, kein Signal, und soll den Preis nicht ueberstimmen. ------------------------------------------------------------------ */ .s-nr[data-astro-cid-j7pv25f6] { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .08em; color: #fff; background: #c8473a; border: 0; padding: 3px 9px; border-radius: 2px; flex: none; white-space: nowrap; } /* Aufgeklappte Variantenzeilen: die volle Nummer (H5A) vor dem Text. statt , weil in dieser Zeile schon ein und ein mit eigenen Regeln stehen; text-decoration wird zurueckgenommen. */ .p-var-nr[data-astro-cid-j7pv25f6] { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; color: var(--muted); text-decoration: none; flex: none; font-variant-numeric: tabular-nums; } /* Die Zeile ist flex mit justify-content:space-between. Mit zwei Kindern (Text, Preis) stand der Preis dadurch rechts. Ein drittes Kind vorn wuerde den Text in die Mitte druecken und drei gleich weit auseinanderstehende Bloecke ergeben. Der Text bekommt deshalb den freien Platz, dann sitzen Nummer und Text links beieinander und der Preis bleibt, wo er war. Kein Eingriff in die Grundregel. */ .p-var-nr[data-astro-cid-j7pv25f6] + span[data-astro-cid-j7pv25f6] { flex: 1; min-width: 0; } /* Flagship: klein am Ende, hinter dem Etikett und vor dem Pfeil. Dieselbe Form wie .dstrip-tag, damit die beiden nebeneinander eine Einheit bilden und nicht zwei verschiedene Kaesten ergeben. */ .dstrip-nr[data-astro-cid-j7pv25f6] { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .12em; color: #fff; background: #c8473a; border: 0; border-radius: 2px; padding: 4px 10px; margin-left: 10px; flex: none; white-space: nowrap; } /* Beim Aufklappen verschwindet die Zeile mit Name, Etikett und Nummer. Ohne diese Regel bliebe die Nummer als einziges Element stehen. */ .dstrip[data-astro-cid-j7pv25f6].open .dstrip-nr[data-astro-cid-j7pv25f6] { opacity: 0; pointer-events: none; } .dstrip-nr[data-astro-cid-j7pv25f6] { transition: opacity .35s ease; } /* Handy: die chinesischen Zeichen sind unter 600 px ausgeblendet, rechts stehen also nur Nummer, Preis und Plus. Etwas enger, damit lange Nummern wie H14 neben einem Preis "ab 15,90" nicht draengen. */ @media (max-width: 600px) { .s-nr[data-astro-cid-j7pv25f6] { font-size: 10.5px; padding: 2px 6px; } .dstrip-nr[data-astro-cid-j7pv25f6] { margin-left: 8px; padding: 3px 7px; } } /* Aufgeklapptes Flagship: die Nummer klein rechts neben dem grossen Namen. Vorher verschwand sie beim Aufklappen mit der ganzen Zeile. Dieselbe rote Marke wie an der Speisekarte, nur an die grosse Zeile angehaengt. vertical-align:middle statt super/baseline: der Name laeuft bis 64 px, eine Ausrichtung an der Grundlinie wuerde die Marke ganz nach unten ziehen. */ .big-nr[data-astro-cid-j7pv25f6] { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: .1em; color: #fff; background: #c8473a; border-radius: 2px; padding: 4px 10px; margin-left: 14px; vertical-align: middle; white-space: nowrap; text-shadow: none; display: inline-block; } @media (max-width: 600px) { .big-nr[data-astro-cid-j7pv25f6] { font-size: 10.5px; padding: 3px 8px; margin-left: 10px; } } /* ------------------------------------------------------------------ 11. Der Preis im Block "Weitere Gerichte dieser Gruppe" (08.09.2026) GEMESSEN, nicht geschaetzt: dort stand Gold #915d07 auf der roten Preismarke #c8473a. Kontrast 1.17 zu 1. Ab etwa 4.5 gilt Text als lesbar; 1.17 heisst, die Ziffern verschwinden im Grund. Betraf 22 der 65 Preise, alle im Block ohne Foto. Die Ursache ist eine halbe Regel im Astro-Bau: .strip-plain .s-pr { color: var(--gold); font-weight:400 } Sie setzt nur die SCHRIFTFARBE um. Der rote Grund kommt aus .s-pr und bleibt stehen. Gold war richtig, solange der Preis dort blanker Text auf Creme war; als er die rote Marke bekam, wurde diese Regel nicht mitgezogen. Auf dem Foto faellt es nicht auf, weil dort die Regel gar nicht greift - deshalb sah die Karte oben richtig aus und unten falsch. Hier steht nur die Schriftfarbe. Grund, Groesse und Form der Marke bleiben, wie sie im Bau definiert sind. */ .strip-plain[data-astro-cid-j7pv25f6] .s-pr[data-astro-cid-j7pv25f6] { color: #fff; font-weight: 500; } /* ------------------------------------------------------------------ 12. Handy: Unterzeile auf zwei Zeilen (08.09.2026) GEMESSEN bei 390 px, nicht vermutet: die Zeile hat eine feste Hoehe, weil der Text ueber einem Fotostreifen mit fester Hoehe liegt. Waechst der Text darueber hinaus, faellt die dritte Zeile UNTEN AUS DEM STREIFEN heraus - weisse Schrift landet auf cremefarbenem Grund und ist halb lesbar. Bei "MIX PLATTE Vorspeisen" (V12) war das so zu sehen: "Drachen-Garnelen und ..." stand unter dem Bild. Ursache: die Nummer nimmt der Textspalte rund 46 px (Marke plus Abstand). Vier Zeilen liegen dadurch ueber ihrer Kastenhoehe. ZWEI davon lagen es schon vorher (G1, K4), ZWEI sind durch die Nummer dazugekommen (V12, K2). Die Zahl stammt aus einer Gegenprobe am lebenden Knoten: einmal mit und einmal ohne eingeblendete Nummer gemessen. Der Deckel von drei auf zwei Zeilen loest alle vier Faelle. Verloren geht nichts: der volle Text steht im aufgeklappten Gericht. Am Rechner bleibt es bei drei Zeilen, dort ist die Spalte breit genug. */ @media (max-width: 600px) { .s-sub[data-astro-cid-j7pv25f6] { -webkit-line-clamp: 2; } } /* Und der Rest davon, im Block "Weitere Gerichte dieser Gruppe". Dort steht die Zeile NICHT ueber einem Foto, sondern auf Creme. Sie hat trotzdem eine feste Hoehe von 56 px geerbt. Mit der Nummer ragte der Text bei "Pikanter Krautsalat" und "Sojasprossen Salat" 7 px in die naechste Zeile hinein - gemessen, Luecke zur naechsten Zeile 0. Weil hier kein Bild die Hoehe vorgibt, darf die Zeile einfach mitwachsen. min-height statt height: kurze Zeilen bleiben exakt so hoch wie bisher, nur die zwei langen werden hoeher. Am Rechner aendert sich nichts. */ @media (max-width: 600px) { .strip-plain[data-astro-cid-j7pv25f6] .bar[data-astro-cid-j7pv25f6] { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; } } /* ------------------------------------------------------------------ 13. „Aktuelles" stand einen Pixel zu hoch (08.09.2026) Daniel hat es mit blossem Auge gesehen. Gemessen an der Schriftkante: Gerichte, Ueber uns, Speisekarte und Kontakt liegen bei 41 bis 57, „Aktuelles" lag bei 40 bis 56. URSACHE, nicht Symptom: `.nav-slot` trug `display: contents`. Damit verschwindet das
  • als Kasten und der Verweis selbst wird zum Flex-Element der Leiste. Sein Kasten ist dann die reine Schrifthoehe (16 px). Bei den Geschwistern ist das
  • das Flex-Element, und dessen Kasten ist die ZEILENSCHACHTEL (20 px). Eine 20er und eine 16er Schachtel mittig in dieselbe 44er Zeile gesetzt ergeben denselben Mittelpunkt, aber NICHT dieselbe Schriftkante: bei `line-height: normal` verteilt Outfit den Ueberschuss ungleich, 3 px oben und 1 px unten. Daraus der eine Pixel. Ein Verschieben um 1 px waere eine Zahl ohne Grund gewesen und beim naechsten Schriftwechsel wieder falsch. Stattdessen bekommt der Platz seinen Kasten zurueck, dann rechnet der Browser dasselbe wie nebenan. WOFUER `display: contents` DA WAR: ist kein Ereignis gepflegt, gibt PHP eine leere Zeichenkette aus. Ein leeres
  • wuerde in einer Leiste mit `gap: 28px` trotzdem eine Luecke reissen. `:empty` nimmt es ganz heraus. Gegengeprueft: Slot geleert, Leiste schrumpft von 761 auf 676 px - genau wie vorher mit `display: contents`. Keine Luecke. ------------------------------------------------------------------ */ .nav-links[data-astro-cid-j7pv25f6] .nav-slot[data-astro-cid-j7pv25f6] { /* NACHGEZOGEN am selben Tag, siehe Abschnitt 14: alle
  • der Leiste setzen ihren Verweis jetzt selbst mittig. Bliebe hier list-item stehen, waere ausgerechnet der Punkt zurueck, den Daniel zuerst gemeldet hat. */ display: flex; align-items: center; } .nav-links[data-astro-cid-j7pv25f6] .nav-slot[data-astro-cid-j7pv25f6]:empty { display: none; } /* ------------------------------------------------------------------ 14. Eine Linie fuer die ganze Leiste (08.09.2026) Nach dem Pixel bei „Aktuelles" hat Daniel den Rest pruefen lassen. Gemessen an der Schriftkante lagen VIER verschiedene Linien in einer Leiste: Menuepunkte 41 – 57 Telefonnummer, meiwei.at 40 – 56 DE 40 – 55 EN, ZH 39,5 – 55,5 Alles sitzt mittig in derselben 44 px hohen Zeile. Wo die Schrift landet, haengt davon ab, WAS FUER EIN KASTEN mittig gesetzt wird. Bei den Menuepunkten ist es das
  • , und dessen Kasten ist die ZEILENSCHACHTEL (20 px). Outfit verteilt den Ueberschuss bei `line-height: normal` ungleich, 3 px oben und 1 px unten. Damit liegen die Menuepunkte 1 px UNTER der Mitte, waehrend alles andere genau auf ihr liegt. Die Menuepunkte sind also die Abweichler, nicht die Telefonnummer. WAS NICHT GEHOLFEN HAT, gemessen statt vermutet: line-height 20px, line-height 16px, line-height normal, font-weight, padding, display inline-block, display block. Bei einem Element, das sein Elternteil mittig setzt, entscheidet die Zeilenhoehe die Schriftlage NICHT. Wer daran dreht, dreht an einer Schraube, die nichts haelt. Was hilft: jedem
  • denselben Mechanismus geben, den die Telefonnummer schon hat. Es setzt seinen Verweis selbst mittig, dann faellt die Zeilenschachtel als Zwischenstufe weg. Gemessen wandern die Menuepunkte damit auf 40 – 56, also genau auf die Linie der Telefonnummer. DER SPRACHUMSCHALTER BLEIBT ABSICHTLICH DRAUSSEN. Seine 0,5 px kommen aus dem 44-px-Kasten, und der ist die Fingerbreite, die sich die Seite am 31.07. selbst gesetzt hat. Vier Versuche haben ihn nicht bewegt, ohne diesen Kasten anzufassen. Einen halben Pixel gegen eine Bedienregel zu tauschen ist ein schlechter Handel. Die Abstaende darin sind uebrigens gleich, 6 px und 6 px; die 0,6 px Mehrbreite bei DE sind die fette Schrift der aktiven Sprache, also Absicht. ------------------------------------------------------------------ */ .nav-links[data-astro-cid-j7pv25f6] > li[data-astro-cid-j7pv25f6] { display: flex; align-items: center; } /* ------------------------------------------------------------------ 15. Der Telefonverweis unter dem Reservierungskopf (08.09.2026) Daniel: „nicht blau mit underline als Link zeigen, sondern in unserem Style." Er hatte GAR KEINE Regel. `.fs-tel` kam am 07.09. dazu, als aus der abgetippten Nummer ein tel:-Verweis wurde; die Gestaltung ging dabei unter. Ohne Regel malt der Browser seinen Standard: rgb(0,0,238) und Unterstrich. Direkt daneben steht derselbe Satz in rgb(112,103,92) ohne Unterstrich. `color: inherit` statt einer festen Farbe: die Zeile erbt ihre Farbe von .fs. Wer .fs spaeter aendert, soll die Nummer nicht als einzige zurueckbleiben sehen. Der Hover ist der des Hausstils (.clink): dunkler werden, nicht unterstreichen. ------------------------------------------------------------------ */ .fs-tel[data-astro-cid-j7pv25f6] { color: inherit; text-decoration: none; transition: color .3s; } .fs-tel[data-astro-cid-j7pv25f6]:hover, .fs-tel[data-astro-cid-j7pv25f6]:focus-visible { color: var(--text); } /* ------------------------------------------------------------------ 16. Der Unterstrich in der Leiste (08.09.2026) Daniel: „eine schoen animierte Linie, quasi vom Zentrum aus nach rechts und links, die von Anfang an noch nicht sichtbar ist" - und dazu eine Anzeige, auf welchem Punkt man gerade ist. Es ist EINE Linie fuer beide Aufgaben. Beim Ueberfahren zeigt sie, wohin man klicken wuerde; die Klasse .ist-hier zeigt, wo man schon ist. Zwei Linien mit zwei Aussehen waeren zwei Dinge, die dasselbe sagen. `transform: scaleX()` statt `width`: Breite laesst den Browser bei jedem Bild neu rechnen, transform nicht. Und `transform-origin: center` ist genau das „aus der Mitte nach beiden Seiten", um das es geht. FARBE: currentColor, und das ist hier keine Bequemlichkeit. Die Leiste hat ZWEI Zustaende - ueber dem Bild cremefarbene Schrift, gescrollt dunkle auf Creme. Eine feste Farbe waere in einem der beiden unsichtbar. `position: relative` ist der EINZIGE Eingriff am Verweis selbst. Sein `display` bleibt unangetastet: er ist seit Abschnitt 14 ein Flex-Kind und damit `block`, und an dieser Ausrichtung wurde heute dreimal gearbeitet. KEINE LINIE bekommen: der rote Knopf (ein Knopf mit Unterstrich sieht aus wie ein kaputter Knopf) und der Sprachschalter (kein Ort, sondern ein Schalter). DESHALB `li > a` und nicht nur `a`: der Sprachschalter steckt SELBST in einem
  • der Leiste, seine drei Verweise sind also ebenfalls ".nav-links a". Mit dem ersten Selektor bekamen DE, EN und ZH die Linie mit - gemessen, der Transform ging beim Ueberfahren von 0 auf 1. `li > a` trifft nur das direkte Kind des
  • ; beim Schalter ist das der umschliessende . ------------------------------------------------------------------ */ .nav-links[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6] > a[data-astro-cid-j7pv25f6]:not(.nav-cta) { position: relative; } .nav-links[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6] > a[data-astro-cid-j7pv25f6]:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .38s cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .nav-links[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6] > a[data-astro-cid-j7pv25f6]:not(.nav-cta):hover::after, .nav-links[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6] > a[data-astro-cid-j7pv25f6]:not(.nav-cta):focus-visible::after, .nav-links[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6] > a[data-astro-cid-j7pv25f6].ist-hier::after { transform: scaleX(1); } /* Der Punkt, auf dem man gerade steht, ist auch ohne Maus zu sehen. Er traegt dieselbe Linie und dazu die volle Schriftfarbe statt der gedaempften. */ .nav-links[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6] > a[data-astro-cid-j7pv25f6].ist-hier { color: var(--on-media); } nav[data-astro-cid-j7pv25f6].scrolled .nav-links[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6] > a[data-astro-cid-j7pv25f6].ist-hier { color: var(--text); } /* Wer Bewegung abbestellt hat, bekommt die Linie ohne Uebergang - die Information bleibt, die Animation entfaellt. */ @media (prefers-reduced-motion: reduce) { .nav-links[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6] > a[data-astro-cid-j7pv25f6]:not(.nav-cta)::after { transition: none; } }