/* ========================================================================= mela – Brunch · Café · Deli, Erlangen Design-System und Seiten-Stile. Vanilla CSS, kein Build-Step. Gebaut von FARU Studio nach dem Design-Handoff „mela-C-Grafisch". Aufbau dieser Datei 01 Schriften 02 Design-Tokens (Farben, Typo, Abstaende, Radien) 03 Grundlagen / Reset 04 Layout: Sektionen, Container, Flaechen 05 Typografie-Klassen 06 Buttons, Chips, Links 07 Kopfbereich und Navigation 08 Fixe CTA-Leiste 09 Blobs und Reveal 10 Bausteine (Karten, Listen, Bilder, Einbettungsbereiche) 11 Formulare 12 Fussbereich 13 Seitenspezifisches ========================================================================= */ /* ---------- 01 Schriften ------------------------------------------------ */ /* Dolego (AuthenType) ist am 08.09.2026 abends zurueckgeholt - Filip: „fuer die Ueberschriften die Schrift, die wir davor hatten". Der Aufbau von tagsueber bleibt: Display-Schrift in JEDER Ueberschrift, darunter Figtree. 🔴 EIN OFFENER PUNKT, UND ER IST BEZIFFERT: Fuer das Einbetten als Webfont braucht es eine Webfont-Lizenz. AuthenType, geprueft 08.09.2026: Webfont Regular 18 USD einmalig, eine Domain, bis 10.000 Aufrufe im Monat (https://authentype.com/dolego-bold-retro-display-font/). Die Desktop-Lizenz deckt es ausdruecklich NICHT ab - /license/ sagt unter Desktop „Not permitted: Embedding the font in websites, apps, or e-books." Gekauft wird auf die Litzbarski Gastronomiebetriebe GmbH, nicht auf FARU. Solange das nicht gekauft ist, darf diese Datei nicht auf einer oeffentlichen Domain liegen. Preis geprueft 11.09.2026 an der Herstellerseite: Webfont-Lizenz EINMALIG, eine Domain, bis 10.000 Aufrufe im Monat, kein Abo (Desktop steht dort mit 18 USD, der Webfont-Betrag liegt hinter der Auswahl). Das ist kein Jahresmodell, anders als MyFonts es allgemein beschreibt. Sagt mela nein, ist der Wechsel EIN Befehl: `python3 _werkzeuge/schrift_frei_umstellen.py`, danach bauen/minify/vorschau. Das Skript legt ein Backup an, kopiert Fraunces aus `_schrift-fraunces-reserve/` (SIL OFL 1.1), stellt @font-face und `--display` auf "melaDisplay", zieht den Preload in layout.py nach und schiebt die Dolego-Datei nach `_to_delete/`. Am 11.09.2026 in einer Wegwerfkopie durchgelaufen: 0 Dolego-Verweise im gebauten HTML. Das LOGO bleibt Dolego - es ist ein Bild (`mela-logo-*.png/webp`), und Logos deckt die Desktop-Lizenz der Litzbarski GmbH ab. */ /* 23.09.2026 - Filip: „Dolego nur fuers Logo, sonst fuer nichts." Seitdem traegt Dolego genau EIN Element: die Wortmarke „mela" im Hero (.hero__logo--text). Alle Ueberschriften laufen in Figtree 700. Die Datei ist deshalb auf die acht Zeichen m e l a M E L A beschnitten (1,7 KB statt 21 KB) und wird nur noch auf der Startseite vorgeladen. 🔴 Die Webfont-Lizenz bleibt trotzdem offen: auch ein einzelnes Wort als Webfont ist Einbetten. Wer den Punkt ganz loswerden will, stellt die Wortmarke wieder auf das Logo-Bild (mela-logo-navy.webp) - dann liegt keine Dolego-Datei mehr auf der Domain. Die volle Datei liegt im Backup `_backups-2026-09-23-vor-dolego-nur-logo/`. */ /* 08.10.2026: Die Dolego-Schriftdatei ist raus. Die Wortmarke im Hero ist jetzt ein SVG-Pfad (aus denselben Buchstabenformen erzeugt, inkl. -0.03em Laufweite) - damit liegt keine Webfont mehr auf der Domain und die offene Webfont-Lizenz ist gegenstandslos. */ /* Die Plakatschrift (Fraunces, SIL OFL 1.1, Achsen SOFT 100 / WONK 1 fest eingebacken, opsz 30, Teilmenge 85 Zeichen = 12,8 KB). Sie steht AUSSCHLIESSLICH in den Mini-Ueberschriften `.t-eyebrow`, nicht in Ueberschriften - die tragen Dolego (Filip 09.09.2026: „Die Ueberschriften sollen nicht geaendert werden"). Kundenwunsch 09.09.2026: die kleinen Zeilen ueber den Ueberschriften sollen die Schrift vom Plakat tragen, „einfach um noch mal ein bisschen mehr Spiel rein zu kriegen". `swap` und nicht `block`: 12,8 KB gehen schnell, und ein Label von 20 px verschiebt beim Tausch kaum Layout - bei den Ueberschriften war das im Test anders (CLS 0,0217). */ /* 23.09.2026 (Filip): die Plakatschrift ist raus - „Dafuer die normale Schrift komplett." Die @font-face-Regel fuer melaPlakat ist geloescht, `--plakat` zeigt auf Figtree, damit alte Verweise nichts kaputt machen. */ /* Figtree ist eine VARIABLE Schrift (Achse wght 300-900, Version 2.002). Bis 11.09.2026 lagen hier vier @font-face-Regeln auf vier Dateien Figtree-400/500/600/700.woff2 - die aber byteweise identisch waren (md5 202cfb54..., je 20.156 Byte, alle vier heissen intern "Figtree Light"). Gerendert hat das richtig, weil der Browser bei einer variablen Schrift die wght-Achse auf das angeforderte Gewicht stellt; gemessen mit Chromium an derselben Datei: 300 = 773,20 px, 400 = 782,67 px, 700 = 806,91 px, 900 = 831,70 px Textbreite. Bezahlt wurde es aber dreifach: layout.py hat 400, 600 und 700 vorgeladen, also 60 KB fuer 20 KB Inhalt und drei Anfragen statt einer. Jetzt: eine Datei, eine Regel, Bereich 300-900. ⚠️ NICHT wieder in Einzelgewichte aufteilen, solange die Datei variabel ist - `fvar` pruefen, bevor jemand das zurueckdreht. */ @font-face { font-family: "Figtree"; src: url("../fonts/Figtree-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } /* ---------- 02 Design-Tokens -------------------------------------------- */ :root { /* Farben – verbindlich aus dem Handoff, keine weiteren Toene erlaubt */ --navy: #273583; /* Marke: Schrift, Buttons, Linien */ --bordeaux: #5d201d; /* AUSSCHLIESSLICH Late Table */ --creme: #f4eee2; /* Standardflaeche */ --rose: #fbdddf; --himmelblau: #cde2f5; --salbei: #e9f0ce; --flieder: #e1cfe7; /* Tapetenfarben aus der Wandmalerei im Cafe (RAL Design plus, Kundenmail 08.09.2026, PT-13 bis PT-18). NUR Deko - nie Schrift, nie Flaeche unter Schrift. Gemessen gegen Navy #273583: Mandelkern 7,54 : 1 · Pandora 7,58 : 1 · Waschblau 7,42 : 1 · Reisbeige 6,42 : 1 - diese vier duerfen also auch hinter Text liegen. Mangostano (1,27 : 1) und Lasurit (1,16 : 1) sind dunkel: die liegen ausschliesslich im Anschnitt, nie unter einer Textspalte. */ --tap-mandelkern: #dfd5ca; /* RAL 070 85 05 Mandelkernbeige */ --tap-pandora: #e3d4cf; /* RAL 040 85 05 Pandoragrau */ --tap-reisbeige: #dcc39f; /* RAL 080 80 20 Naturreisbeige */ --tap-waschblau: #c3d8e4; /* RAL 250 85 10 Waschmittelbleu */ --tap-mangostano: #3a2732; /* RAL 340 20 10 Mangostanoviolett */ --tap-lasurit: #174c60; /* RAL 240 30 20 Lasuritblau */ /* Die beiden dunklen Tapetentoene, mit dem Cremeton der Seite aufgehellt (30 % bzw. 28 %). Grund: von den sechs RAL-Toenen sind auf Creme nur zwei sichtbar - gemessen als Farbabstand dE zum Grund: Waschmittelbleu 17,9 und Naturreisbeige 20,8, waehrend Mandelkernbeige 8,6 und Pandoragrau 9,6 praktisch verschwinden. Die aufgehellten Dunkeltoene bringen 20,2 und 19,9 - also zwei weitere sichtbare Toene aus derselben Palette, ohne dass die Seite dunkel wird. Navy darauf 5,66 bzw. 5,49 : 1. Mandelkernbeige und Pandoragrau stehen dafuer auf den farbigen Seitenkoepfen, dort haben sie dE 11-19. */ --tap-lasurit-hell: #b2bdbb; --tap-mangostano-hell: #c0b6b1; /* ---- Die vier Formfarben des ersten Entwurfs ------------------------- 19.09.2026, Filip: „Ich will die Form genauso haben, wie sie davor war, auch von den Farben her." Werte woertlich aus `Vorschau_Mela_FARU.html`. Sie ERSETZEN die RAL-Tapetentoene an allen Zierformen; die --tap-Toene bleiben als Definition stehen, weil sie die Wandmalerei im Café dokumentieren und auf den farbigen Seitenkoepfen weiterlaufen. Nachgemessen am 19.09.2026, gegen den Cremeton DIESER Seite (#f4eee2, der Entwurf hatte mit #FAF7F2 einen helleren Grund): Ton dE zum Grund Navy darauf Himmelblau 19,1 8,21 : 1 Rose 12,0 8,50 : 1 Gruen 12,2 9,27 : 1 Puder 7,7 9,84 : 1 Zwei Befunde daraus. Erstens: die Toene tragen auf diesem Grund sogar besser als im Entwurf (Himmelblau 19,1 gegen dort 16,9) - der Wechsel kostet keine Sichtbarkeit. Zweitens: alle vier sind textsicher, deutlich besser als die beiden aufgehellten Dunkeltoene, die sie ersetzen (5,49 und 5,66 : 1). Puder ist mit dE 7,7 der zarteste - im Entwurf war er mit 5,3 noch zarter, er ist also absichtlich der leise Ton und gehoert nicht an eine Stelle, wo eine Form tragen muss. */ --form-himmel: #CDE2F5; --form-rose: #FADCDE; --form-gruen: #E9F0CE; --form-puder: #FDF0F2; /* Rollen */ --text: var(--navy); --flaeche: var(--creme); --linie: var(--navy); /* Dekorative Transparenzen – nur fuer Overlays, nie fuer Flieszlext */ --navy-schatten: rgba(39, 53, 131, 0.32); --navy-fokus: rgba(39, 53, 131, 0.25); --creme-raster: rgba(244, 238, 226, 0.26); --creme-raster-2: rgba(244, 238, 226, 0.08); --himmelblau-schleier: rgba(205, 226, 245, 0.2); /* Schriftfamilien */ --display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* Dolego nur noch fuer die Wortmarke (Filip 23.09.2026). */ --logo: "Figtree", system-ui, sans-serif; /* Dolego hat nur einen Schnitt und keine Kursive - deshalb `normal`. Der Schalter bleibt stehen: wer auf Fraunces zurueckgeht, setzt hier `italic` und hat die Plakat-Fassung wieder. */ --display-stil: normal; --text-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --plakat: var(--text-font); /* seit 23.09.2026 Figtree */ /* Schriftgroeszen – Skala aus dem Handoff */ --fs-h1: clamp(40px, 8.4vw, 122px); --fs-h1-sub: clamp(20px, 2.4vw, 30px); /* Zwei Groessen fuer die H2-Ebene, nicht vier. --fs-h2-xl (170px) und --fs-h2-l (156px) sind am 03.09.2026 gestrichen: sieben Sektionen mit demselben Aufbau brauchen dieselbe Ueberschriftengroesse, sonst liest man weiter Unikate statt einer Reihe. */ --fs-h2: clamp(42px, 8vw, 108px); /* Startseite */ --fs-h2-s: clamp(30px, 5vw, 62px); /* Unterseiten-Zwischentitel */ --fs-h3: clamp(28px, 4vw, 44px); --fs-h4: clamp(21px, 2.4vw, 28px); --fs-ziffer: clamp(64px, 12vw, 150px); --fs-zeile: clamp(28px, 4.6vw, 56px); /* Anfrage-Leiste */ --fs-karte: clamp(24px, 3.4vw, 40px); --fs-preis: clamp(22px, 3vw, 36px); --fs-body: 19px; --fs-body-l: 21px; --fs-body-s: 16px; --fs-eyebrow: 14px; /* Abstaende */ --sek-y: clamp(64px, 8vw, 140px); --sek-y-gross: clamp(88px, 11vw, 180px); --sek-y-klein: clamp(52px, 7vw, 100px); --sek-x: clamp(16px, 4vw, 56px); --gap: clamp(20px, 3vw, 52px); --breite: 1200px; --breite-text: 68ch; /* Radien */ --r-sektion: clamp(36px, 6vw, 96px); --r-karte: 24px; --r-karte-gross: 28px; --r-rund: 999px; /* Kopfbereich */ --header-h: 68px; --uebergang: 220ms cubic-bezier(0.22, 0.61, 0.36, 1); } @media (min-width: 900px) { :root { --header-h: 76px; } } /* ---------- 03 Grundlagen ----------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--creme); color: var(--text); font-family: var(--text-font); font-size: var(--fs-body); line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--navy); text-decoration: none; } button { font: inherit; color: inherit; } /* Die Display-Schrift steht ausschliesslich in Ueberschriften (Auftrag 08.09.2026). Alles, was nur wie eine Ueberschrift aussieht - Kartenzeilen, Anfrageleiste, Menuelinks, Fusszeilentitel -, laeuft weiter in Figtree bzw. der Schreibmaschinenschrift; die Ausnahmen stehen weiter unten und sind dort jeweils begruendet. */ h1, h2, h3, h4 { font-family: var(--display); font-style: var(--display-stil); /* Seit 23.09.2026 Figtree statt Dolego: 700 wie .t-h4, die Kartentitel und der Hero-Spruch - dasselbe Muster, keine neue Stufe. */ font-weight: 700; margin: 0; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } hr { border: 0; border-top: 2px solid var(--linie); margin: 0; } ::selection { background: var(--navy); color: var(--creme); } /* Sichtbarer Fokus – im Prototyp nicht ausgearbeitet, hier durchgaengig */ :focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; } .auf-bordeaux :focus-visible, .sek--bordeaux :focus-visible, .menue :focus-visible { outline-color: var(--creme); } .nur-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .sprungmarke { position: absolute; left: 12px; top: -200px; z-index: 200; background: var(--navy); color: var(--creme); font-weight: 700; padding: 12px 20px; border-radius: var(--r-rund); transition: top var(--uebergang); } .sprungmarke:focus { top: 12px; } /* ---------- 04 Layout: Sektionen und Flaechen --------------------------- */ .sek { position: relative; padding: var(--sek-y) var(--sek-x); } .sek--klein { padding-block: var(--sek-y-klein); } .sek--gross { padding-block: var(--sek-y-gross); } /* Die vier Tagesstationen. Sie sind EINE Reihe, keine vier Sektionen - also der halbe Abstand. Gemessen am 03.09.2026: mit .sek--klein (100 px oben + 100 px unten) lagen zwischen zwei Stationen 340 px Leere, und die Reihe zerfiel genau so in Einzelblöcke, wie Teil 3 des Auftrags es verhindern soll. Alle vier tragen denselben Wert - innerhalb der Gruppe darf kein Abstand abweichen. */ .sek--reihe { padding-block: clamp(28px, 3.6vw, 52px); } /* Weiche Uebergaenge: Sektionen ueberlappen einander leicht */ .sek--bogen { border-radius: var(--r-sektion) var(--r-sektion) 0 0; margin-top: -36px; } .sek--ueberlauf { overflow: hidden; } /* Schliesst ohne eigenen Abstand oben an die Sektion darueber an. */ .sek--anschluss { padding-top: 0; } .inhalt { position: relative; z-index: 2; max-width: var(--breite); margin: 0 auto; } .inhalt--schmal { max-width: 860px; } /* Flaechen, flach. Creme ist der Grund, Farbe ist Akzent (Filip 03.09.2026: „insgesamt ein bisschen mehr Creme, creme-beige-maessig, trotzdem noch ein bisschen bunt"). Die Startseite traegt jetzt GENAU ZWEI Flaechen: Creme von oben bis unten und Bordeaux am Late Table. Das Salbei-Gruen im Hero ist raus - es konkurrierte mit dem Rosé-Kreis hinter der Handzeichnung, und aus zwei streitenden Farben wird so ein Akzent. Farbe kommt statt aus Flaechen aus vier Quellen, die schon da sind: den sieben Fotos (gruene und beerenrote Stuehle, senfgelbe Bank, blaue Holzstuehle - mela ist auf den Bildern bunt), dem Rosé-Kreis im Hero, den drei Blobs und den vier Stundenmarken der Tagesreihe (Abschnitt 05). Die Unterseiten behalten je EIN farbiges Band im Seitenkopf. Salbei ist dort am 03.09.2026 rausgefallen, weil es dasselbe Gruen an derselben Stelle war, das Filip im Hero abgelehnt hat - es lebt weiter in der 09-Uhr-Marke und im Blob auf /events/. Entfallen, weil 0x benutzt: .f--salbei-hero, .f--rose-r, .f--himmel, .f--himmel-tief, .f--salbei. */ .f--creme { background: var(--creme); } .f--rose { background: var(--rose); } .f--himmel-l { background: var(--himmelblau); } .f--flieder { background: var(--flieder); } .f--bordeaux { background: var(--bordeaux); color: var(--creme); } /* Navy als Flaeche - zweiter dunkler Kontrastblock neben Bordeaux, fuers Deli (16.09.2026, Ruecknahme aus dem ersten Muster: der „Das Deli macht schon um sieben auf"-Block war dort navy, nicht bordeaux - Bordeaux bleibt exklusiv Late Table). Kontrast Creme auf Navy 9,45 : 1, gemessen wie bei Bordeaux. */ .f--navy { background: var(--navy); color: var(--creme); } /* ---------- 05 Typografie ----------------------------------------------- */ .t-h1 { font-size: var(--fs-h1); line-height: 0.96; /* Figtree laeuft breiter als Dolego und braucht bei Displaygroesse engeres Tracking (23.09.2026: -0.015em -> -0.03em). */ letter-spacing: -0.03em; text-wrap: balance; margin: 0 0 18px; } .t-h2 { font-size: var(--fs-h2); line-height: 0.98; letter-spacing: -0.03em; } .t-h2--s { font-size: var(--fs-h2-s); line-height: 1; letter-spacing: -0.025em; } .t-h3 { font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.02em; } /* `font-style: normal` ist hier Pflicht, nicht Geschmack: die Regel fuer h1-h4 setzt seit 08.09.2026 `font-style: var(--display-stil)`. Wer nur die Schriftfamilie zurueckstellt, bekommt eine vom Browser schraeg gerechnete Figtree. Gleiches gilt fuer .hero__spruch weiter unten. */ .t-h4 { font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; font-family: var(--text-font); font-style: normal; } .t-sub { font-family: var(--text-font); font-size: var(--fs-h1-sub); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; max-width: 26ch; } .t-lead { font-size: var(--fs-body-l); max-width: 52ch; } .t-flieszlext { max-width: var(--breite-text); } .t-flieszlext p + p { margin-top: 1.1em; } .t-klein { font-size: var(--fs-body-s); } /* Mini-Ueberschriften in der Plakatschrift (Kundenwunsch 09.09.2026). Gemischtschreibung, nicht Versalien: die Schrift lebt von den Unterlaengen und dem schraegen k - in gesperrten Versalien war sie im Vergleich (drei Fassungen gerendert) nur noch dekoriert. 20 px statt 12, weil die weichen Formen unter etwa 17 px zulaufen. */ .t-eyebrow { font-family: var(--plakat); font-style: italic; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.25; letter-spacing: 0.01em; text-transform: none; font-weight: 400; color: var(--navy); } .t-eyebrow--eng { letter-spacing: 0.01em; } .f--bordeaux .t-eyebrow { color: var(--himmelblau); } .f--navy .t-eyebrow { color: var(--himmelblau); } /* Die Stundenziffer der Tagesreihe. 🔴 BEWUSSTE KONTRAST-ABWEICHUNG, Kundenentscheidung Filip 04.09.2026: „die hintergruende der nummern 07, 09, 12, 18 bitte alle weg und die zahlen statt dem dunkelblau in dem hellblau". **Gemessen: Himmelblau #cde2f5 auf Creme #f4eee2 = 1,15 : 1.** WCAG 1.4.3 verlangt bei dieser Groesse (150 px) mindestens 3 : 1. Der Wert liegt also nicht knapp darunter, sondern um den Faktor 2,6. Auf einem guten Monitor liest sich die Ziffer als Wasserzeichen; auf einem hellen Handy im Freien ist sie weg. Das ist bei mela kein reiner Geschmacksbefund: sobald die Seite Ticketverkauf oder Online-Buchung bekommt, ist der BFSG-Status offen (Kleinstunternehmen ja/nein ist bis heute unbeantwortet) - siehe Wissen/barrierefreiheit-stand.md. Die Stunde steht zusaetzlich im `aria-label` der Sektion („09 Uhr — Brunch und Café"), Screenreader verlieren sie also nicht. Sehende verlieren sie. Zwei Wege zurueck, beide einzeilig: 1. Umriss: `-webkit-text-stroke: 3px var(--navy); paint-order: stroke fill;` - haelt den hellblauen Look, die Glyphe wird durch die Navy-Kante lesbar. 2. `color: var(--navy)` - wie vor dem 04.09.2026, 9,45 : 1. Vorher hatte jede Stunde ihren eigenen Palettenton als FLAECHE hinter Navy-Text (07 Himmelblau, 09 Salbei, 12 Rosé, 18 Flieder, je 7,4-9,3 : 1). Genau darum lag die Farbe dort hinten und nicht in der Schrift. */ .t-ziffer { display: inline-block; font-family: var(--text-font); font-size: var(--fs-ziffer); line-height: 0.8; font-weight: 700; letter-spacing: -0.05em; color: var(--himmelblau); margin: 0 0 14px; } .t-hervor { color: var(--navy); } .f--bordeaux .t-hervor { color: var(--himmelblau); } .f--navy .t-hervor { color: var(--himmelblau); } /* Zeilenbreite einzelner Ueberschriften. Ersetzt Inline-style="max-width:Xch". Zweck ist nicht Deko: bei line-height 0.98 kleben zwei Zeilen aneinander, also wird die Ueberschrift so breit gehalten, dass sie einzeilig bleibt. Der globale Zeilenabstand bleibt dabei unangetastet (Filip 02.09.2026). */ .t-eng-12 { max-width: 12ch; } .t-eng-15 { max-width: 15ch; } .t-eng-18 { max-width: 18ch; } .t-eng-24 { max-width: 24ch; } .t-eng-34 { max-width: 34ch; } .t-eng-44 { max-width: 44ch; } /* Grosse Zahl / grosse Telefonnummer in Figtree - dasselbe Muster wie .t-h4 und .karte-zeile__name. Ersetzt vier Inline-style-Angaben. */ .t-zahl { font-family: var(--text-font); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } .t-tel { font-family: var(--text-font); font-size: var(--fs-karte); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; display: inline-block; } address { font-style: normal; } .mb-s { margin-bottom: 12px; } .mb-m { margin-bottom: clamp(20px, 3vw, 32px); } .mb-l { margin-bottom: clamp(26px, 4vw, 44px); } .mt-m { margin-top: clamp(20px, 3vw, 32px); } .mt-gross { margin-top: clamp(40px, 6vw, 72px); } /* Eingeruecktes Aufzaehlungszeichen - ersetzt style="margin-left:1.2em". */ .liste-ein { margin-left: 1.2em; } /* ---------- 06 Buttons, Chips, Textlinks -------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; padding: 0 34px; border-radius: var(--r-rund); font-family: var(--text-font); font-weight: 700; font-size: 19px; line-height: 1.2; text-align: center; border: 2px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; transition: background var(--uebergang), color var(--uebergang); } .btn--primaer { background: var(--navy); color: var(--creme); } .btn--primaer:hover { background: var(--creme); color: var(--navy); } .btn--sekundaer:hover { background: var(--navy); color: var(--creme); } .btn--gross { min-height: 66px; padding: 0 40px; font-size: 21px; } .btn--klein { min-height: 52px; padding: 0 26px; font-size: 17px; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* Auf Bordeaux: Creme traegt, Navy ist verboten */ .f--bordeaux .btn--hell { background: var(--creme); color: var(--bordeaux); border-color: var(--creme); } .f--bordeaux .btn--hell:hover { background: var(--himmelblau); color: var(--bordeaux); border-color: var(--himmelblau); } .f--bordeaux .btn--sekundaer { border-color: var(--creme); color: var(--creme); } .f--bordeaux .btn--sekundaer:hover { background: var(--creme); color: var(--bordeaux); } /* Auf Navy: gleiche Logik wie Bordeaux - Creme traegt, Navy verboten. */ .f--navy .btn--hell { background: var(--creme); color: var(--navy); border-color: var(--creme); } .f--navy .btn--hell:hover { background: var(--himmelblau); color: var(--navy); border-color: var(--himmelblau); } .f--navy .btn--sekundaer { border-color: var(--creme); color: var(--creme); } .f--navy .btn--sekundaer:hover { background: var(--creme); color: var(--navy); } .btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; } /* Drei Woerter, kein Rahmen. Punkttrenner statt Pillen - die Chips sind eine Aufzaehlung, kein Bedienelement. */ .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; } .chip { font-size: 17px; font-weight: 600; line-height: 1.3; } .chip + .chip::before { content: "·"; margin-right: 10px; } .link-unter { font-weight: 700; border-bottom: 3px solid var(--navy); padding-bottom: 2px; display: inline-block; transition: opacity var(--uebergang); } /* 10.09.2026, Handy-Durchsicht: „Zum Deli", „Zur Karte", „Termine ansehen" waren 34 px hoch. Das erfuellt WCAG 2.5.8 (24 px), liegt aber unter den 44 px, die auf einem Telefon zum sicheren Treffen gebraucht werden - und das sind die Wege von einer Sektion zur naechsten, nicht Links im Satz. Die Trefferflaeche waechst nach oben und unten, der Strich bleibt, wo er ist (`border-bottom` sitzt am Rand des Kastens, deshalb der Umweg ueber ein ::after statt ueber padding-bottom). */ @media (max-width: 700px) { .link-unter { position: relative; border-bottom: 0; padding: 10px 0; } .link-unter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; border-bottom: 3px solid currentColor; } } .link-unter:hover { opacity: 0.6; } .f--bordeaux .link-unter { color: var(--creme); border-bottom-color: var(--himmelblau); } .f--navy .link-unter { color: var(--creme); border-bottom-color: var(--himmelblau); } .f--navy .link-inline { color: var(--creme); border-bottom-color: var(--creme); } /* Impressum und Datenschutz im Fuss waren genau 24 px hoch - die untere Grenze der Norm. Auf dem Telefon bekommen sie 40 px Trefferflaeche. */ .fuss__unten a { display: inline-block; padding: 8px 0; } /* Dieselbe Sache bei der Mailadresse in den Kontaktkarten: sie steht dort auf einer eigenen Zeile und ist der Anfrageweg, war aber nur 25 px hoch. */ @media (max-width: 700px) { a.t-tel { display: inline-block; padding: 8px 0; } } .link-inline { font-weight: 600; border-bottom: 1px solid var(--navy); transition: opacity var(--uebergang); } .link-inline:hover { opacity: 0.6; } /* Zweiter Anfrageweg unter dem Knopf: eine Zeile, Telefon und Mail. Bleibt bei Events und Catering stehen - dort kommen die Anfragen ueberwiegend telefonisch, und es sind die zwei bezahlten Sektionen. */ .zweiter-weg { margin-top: 14px; font-size: var(--fs-body-s); } /* ---------- 07 Kopfbereich und Navigation ------------------------------- */ /* Kopfleiste in Creme, also im selben Ton wie die Seite (Kundenwunsch 04.09.2026: „nicht in dem hellblau sondern in der gleichen farbe wie der hintergrund der seite"). Vorher Himmelblau (03.09.), davor Navy. 🔴 Die Linie unten ist Pflicht, nicht Schmuck. Die Leiste ist `sticky` — ohne Kante schiebt sich beim Scrollen der Seiteninhalt in Creme auf Creme unter die Leiste und wird unlesbar. 2 px Navy ist dieselbe Linie, mit der auf der Seite schon .karte, .karte-liste und .faq__eintrag ordnen — kein neues Gestaltungsmittel, nur dasselbe an einer weiteren Stelle. Logo, Reservieren-Knopf und Menue-Schalter stehen seit dem 03.09. auf Navy und passen unveraendert: Navy auf Creme traegt 9,45 : 1. */ .kopf { position: sticky; top: 0; z-index: 80; background: var(--creme); color: var(--navy); border-bottom: 2px solid var(--linie); } .kopf__zeile { position: relative; display: flex; align-items: center; gap: 16px; min-height: var(--header-h); padding: 10px var(--sek-x); max-width: 1600px; margin: 0 auto; } /* Die Wortmarke ist der Weg zurueck zur Startseite. Sie war 75x26 px gross - auf dem Telefon zu wenig. Das Bild bleibt 26 px hoch, die Trefferflaeche wird ueber Polsterung 46 px hoch; `margin` haelt die Leiste gleich hoch. */ .kopf__marke { flex: none; display: inline-flex; align-items: center; padding: 10px 6px; margin: -10px -6px; } .kopf__marke img { height: 26px; width: auto; } /* Menuepunkte mittig in der Leiste (Kundenwunsch 03.09.2026). `flex: 1` auf der Nav plus `justify-content: center` in der Liste zentriert die Punkte in dem Platz, der zwischen Logo und Reservieren-Knopf bleibt - nicht auf die Fensterbreite, sonst wandert die Mitte mit der Logobreite. */ .kopf__nav { display: none; flex: 1; } .nav-liste { list-style: none; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.5vw, 24px); } .nav-liste a, .nav-auf { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; font-size: 15px; font-weight: 600; color: var(--navy); white-space: nowrap; background: none; border: 0; cursor: pointer; transition: opacity var(--uebergang); } .nav-liste a:hover, .nav-auf:hover { opacity: 0.62; } .nav-liste a[aria-current="page"] { border-bottom: 2px solid var(--navy); } /* Klickbares Untermenue – bewusst kein Hover-Dropdown (auf Touch unbedienbar) */ .nav-gruppe { position: relative; } .nav-auf__pfeil { transition: transform var(--uebergang); font-size: 11px; } .nav-auf[aria-expanded="true"] .nav-auf__pfeil { transform: rotate(180deg); } .nav-auf[data-aktiv="ja"] { border-bottom: 2px solid var(--navy); } /* 10.09.2026 gemessen: der Menuepunkt endet bei y=60, die Kopfleiste erst bei y=78 (inklusive ihrer 2-px-Linie). Mit den alten 8 px startete die Klappe bei y=68 und schnitt die Kopflinie mittendurch. 26 px setzen sie 8 px unter die Linie. Der Abstand Punkt->Leistenunterkante ist ueber alle Desktopbreiten konstant 18 px, weil die Leiste eine feste Hoehe hat. */ .nav-unter { position: absolute; top: calc(100% + 26px); left: -16px; min-width: 220px; background: var(--creme); border: 2px solid var(--navy); border-radius: var(--r-karte); padding: 8px; list-style: none; display: none; box-shadow: 0 12px 34px var(--navy-schatten); } .nav-unter[data-offen="ja"] { display: block; } /* 10.09.2026: „Speisekarte" in der Kopfleiste klappt bei Maus und Tastatur auf - ohne JavaScript. `data-offen` bleibt fuer per Klick gesteuerte Gruppen stehen. Erst ab 1024 px, darunter gibt es die obere Leiste nicht. Das ::before schliesst die 26-px-Luecke zwischen Leiste und Klappe: ohne diese Bruecke verliert die Maus auf dem Weg nach unten den Hover und das Menue klappt genau dann zu, wenn man es benutzen will. */ @media (min-width: 1024px) { .nav-gruppe:hover > .nav-unter, .nav-gruppe:focus-within > .nav-unter { display: block; } .nav-gruppe > .nav-unter::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; } .nav-gruppe:hover > a .nav-auf__pfeil, .nav-gruppe:focus-within > a .nav-auf__pfeil { transform: rotate(180deg); } /* Der allgemeine Hover blasst Menuepunkte auf 62 % ab. Beim Elternpunkt sah das aus wie ausgegraut/deaktiviert, gerade weil daneben alles kraeftig bleibt. Solange die Klappe offen ist, bleibt „Speisekarte" also voll. */ .nav-gruppe:hover > a, .nav-gruppe:focus-within > a { opacity: 1; } } /* Der Pfeil sitzt am Link, nicht mehr an einem Knopf. */ .nav-gruppe > a { display: inline-flex; align-items: center; gap: 6px; } .nav-unter li { color: var(--navy); } .nav-unter a { color: var(--navy); display: flex; width: 100%; min-height: 44px; align-items: center; padding: 0 12px; border-radius: 12px; font-size: 16px; } .nav-unter a:hover { background: var(--himmelblau); opacity: 1; } .nav-unter a[aria-current="page"] { background: var(--himmelblau); border-bottom: 0; font-weight: 700; } .kopf__cta { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-rund); background: var(--navy); color: var(--creme); font-weight: 700; font-size: 15px; white-space: nowrap; transition: background var(--uebergang); } .kopf__cta:hover { background: var(--bordeaux); } /* Menue-Schalter (nur mobil) */ .kopf__schalter { flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 14px; border-radius: var(--r-rund); border: 2px solid var(--navy); background: none; color: var(--navy); font-weight: 700; font-size: 15px; cursor: pointer; } .balken { display: block; width: 18px; height: 12px; position: relative; } .balken::before, .balken::after, .balken span { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--uebergang), opacity var(--uebergang); } .balken::before { top: 0; } .balken span { top: 5px; } .balken::after { bottom: 0; } [aria-expanded="true"] .balken::before { transform: translateY(5px) rotate(45deg); } [aria-expanded="true"] .balken span { opacity: 0; } [aria-expanded="true"] .balken::after { transform: translateY(-5px) rotate(-45deg); } /* 08.10.2026 - Kundenwunsch mela: Kopfleiste auf dem Handy ganz clean. Kein Wort „Menü", kein Reservieren-Knopf, kein Rahmen - nur die drei Striche, etwas tiefer gesetzt. Das Wort bleibt fuer Vorleseprogramme als .nur-sr im Knopf (sonst haette der Knopf keinen Namen). Trefferflaeche bleibt 48 x 48 px. Reservieren bleibt auf dem Handy ueber die feste Leiste unten und das Menue erreichbar. */ @media all { .kopf__cta { display: none; } .kopf__zeile { justify-content: space-between; } .kopf__schalter { border: 0; padding: 0; width: 48px; min-height: 48px; justify-content: center; margin-right: -12px; transform: translateY(4px); } .kopf__schalter .balken { width: 26px; height: 16px; } .kopf__schalter .balken span { top: 7px; } .kopf__schalter[aria-expanded="true"] .balken::before { transform: translateY(7px) rotate(45deg); } .kopf__schalter[aria-expanded="true"] .balken::after { transform: translateY(-7px) rotate(-45deg); } .kopf__schalter:focus-visible { outline-offset: 2px; } } /* Off-Canvas */ .menue { position: fixed; inset: 0; z-index: 95; background: var(--navy); color: var(--creme); padding: 16px var(--sek-x) 40px; overflow-y: auto; display: none; } .menue[data-offen="ja"] { display: block; } /* Im aufgeklappten Menue ist der Grund Navy - dort traegt Creme, nicht Navy. */ .menue .kopf__schalter { border-color: var(--creme); color: var(--creme); } .menue__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); } /* Bis 03.09.2026 stand die Hoehe nur als Inline-style im HTML. Ohne diese Regel waere das Logo im aufgeklappten Menue 232 px hoch. */ .menue__kopf img { height: 26px; width: auto; } .menue__liste { list-style: none; margin-top: 20px; border-top: 2px solid var(--creme); } .menue__liste li { border-bottom: 2px solid var(--creme); } .menue__liste a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; min-height: 56px; color: var(--creme); /* 08.09.2026 von var(--display) auf Figtree: das sind Navigationslinks, keine Ueberschriften - und die Display-Schrift soll laut Auftrag nur in Ueberschriften stehen. */ font-family: var(--text-font); font-weight: 600; font-size: clamp(26px, 7.4vw, 38px); line-height: 1.1; letter-spacing: -0.02em; } .menue__liste a span { font-family: var(--text-font); font-size: 14px; font-weight: 500; opacity: 0.75; text-align: right; flex: none; max-width: 12ch; } .menue__liste a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; } .menue__fuss { margin-top: 28px; display: grid; gap: 14px; font-size: var(--fs-body-s); } .menue__fuss a { color: var(--creme); } body[data-menue="offen"] { overflow: hidden; } @media (min-width: 1080px) { .kopf__nav { display: block; } .kopf__schalter { display: none; } .menue { display: none !important; } /* Exakt mittig in der Leiste (Kundenwunsch 03.09.2026). Als Flexbox sass die Navigation in der Mitte des RESTPLATZES zwischen Logo und Knopf - gemessen 24 px daneben, weil der Reservieren-Knopf breiter ist als das Logo. Mit `1fr auto 1fr` ist die Mittelspalte zwangsweise die Mitte der Leiste, egal wie breit die Aussenteile sind. Absolute Positionierung war der erste Versuch und war falsch: die Navigation faellt damit aus dem Fluss und der Knopf rutscht ans Logo. Der Menue-Schalter stoert das Raster nicht - er ist hier `display: none` und belegt damit keine Rasterzelle. */ .kopf__zeile { display: grid; grid-template-columns: 1fr auto 1fr; } .kopf__marke { justify-self: start; } .kopf__cta { justify-self: end; } } /* ---------- 08 Fixe CTA-Leiste ------------------------------------------ */ /* Nur auf Mobil, dort aber von Anfang an sichtbar und zieht beim Scrollen immer mit (Kundenwunsch 18.09.2026, siehe mela.js). Auf Desktop traegt der sticky Kopfbereich den Reservieren-Knopf - dort waere die Leiste reine Dopplung. */ .cta-leiste { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: flex; flex-wrap: nowrap; gap: 8px; justify-content: stretch; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--uebergang), transform var(--uebergang), visibility var(--uebergang); } .cta-leiste[data-an="ja"] { opacity: 1; visibility: visible; transform: none; } .js .cta-leiste { transition-duration: 260ms; } @media (prefers-reduced-motion: reduce) { .cta-leiste { transition: none; transform: none; } } @media (min-width: 1080px) { .cta-leiste { display: none; } } .cta-leiste a { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; min-height: 54px; padding: 0 16px; text-align: center; border-radius: var(--r-rund); font-weight: 700; font-size: 16px; border: 2px solid var(--navy); background: var(--creme); color: var(--navy); transition: background var(--uebergang), color var(--uebergang); } .cta-leiste a:hover { background: var(--navy); color: var(--creme); } .cta-leiste .cta--primaer { background: var(--navy); color: var(--creme); padding: 0 26px; box-shadow: 0 12px 34px var(--navy-schatten); } .cta-leiste .cta--primaer:hover { background: var(--creme); color: var(--navy); } @media (max-width: 379px) { .cta-leiste a { padding: 0 10px; font-size: 15px; } } /* ---------- 09 Blobs und Reveal ----------------------------------------- */ .blob { position: absolute; pointer-events: none; z-index: 1; aspect-ratio: 1 / 1; will-change: transform; } /* Die drei verbleibenden Blobs. Vorher stand jede Position als Inline-style im HTML; der Generator gibt jetzt nur noch data-pos mit. Die zwei Blobs im Hero sind am 03.09.2026 entfallen - dort ist die Handzeichnung der eine Gegenstand, ein zweiter waere einer zu viel. Deckkraft .5 statt .7/.6: sie sollen den Grund toenen, nicht auffallen. */ .blob[data-pos="deli"] { left: -60px; bottom: -50px; width: clamp(160px, 22vw, 320px); opacity: .5; } .blob[data-pos="events"] { right: -70px; top: 40px; width: clamp(180px, 26vw, 400px); opacity: .5; } /* Auf Bordeaux traegt .22 schon genug - .5 waere auf dunklem Grund laut. */ .blob[data-pos="late-table"] { left: -60px; bottom: -40px; width: clamp(160px, 22vw, 340px); opacity: .22; } /* ---------- 09b Tapetenformen (08.09.2026) ------------------------------ Das Vokabular kommt nicht aus einem Formen-Baukasten, sondern von zwei Stellen im Laden: der Wandmalerei im Gastraum (grosse weiche Felder, die dunklen Doppellappen, das blaue Blatt im Flur) und dem Plakat (Schlaufe, Punkte). Deshalb sind es genau sechs Formen und nicht mehr. Drei Regeln, damit daraus Grund wird und nicht Deko: 1. Hoechstens zwei Formen pro Sektion. 2. Unter einer Textspalte darf nur einer der vier HELLEN Tapetentoene liegen (hinter Navy 6,42-7,58 : 1). Mangostano und Lasurit sind dunkel und liegen ausschliesslich im Anschnitt. 3. Keine Animation, kein Fokus, kein Tab-Stop - `pointer-events: none` und `aria-hidden` stehen am Element. Die Sektion darueber muss `sek--formen` tragen, sonst waechst die Seite in die Breite. Die :has()-Regel ist nur das Netz fuer den Fall, dass die Klasse mal vergessen wird. */ .sek--formen { overflow: clip; } .sek:has(> .form) { overflow: clip; } .form { position: absolute; pointer-events: none; z-index: 1; aspect-ratio: 1 / 1; } .form svg { width: 100%; height: 100%; display: block; } /* Das gemalte Feld im Hero. Blutet ueber alle vier Kanten hinaus - eine sichtbare Kante wuerde als vierte Flaeche gelesen, und die Startseite traegt seit 03.09.2026 bewusst nur zwei. */ .form[data-pos="feld-hero"] { inset: -14% -16% auto -16%; height: 122%; width: auto; aspect-ratio: auto; } /* Das Blatt ist melas Marke an der Wand, nicht Schmuck: genau eines pro Seite, im rechten Anschnitt des Seitenkopfs. */ /* 10.09.2026 gemessen: mit `top: -54px` lag das Blatt auf dem Punkt der H1 („auf." / „Erlangen.") - Navy auf Navy, Kontrast 1 : 1. Es ist die einzige Figur in Navy, also die einzige, die Text nie beruehren darf. Sie haengt jetzt zu 55 % ueber die obere Kante und 18 % ueber die rechte, damit sie ueber der Brotkrume steht und die H1 gar nicht erreicht. */ /* 🔴 11.09.2026, zweiter Durchgang: mit 55 % Ueberhang blieb vom Blatt nur eine dunkle Kuppe unter der Kopfleiste - angesehen las sich das als Klecks, nicht als Blatt. Genau der Fall, fuer den oben schon der Hero-Tropfen weg ist: eine Figur, die man nicht als Figur erkennt, ist keine. Das Blatt ist melas Marke von der Wand und bleibt Navy (auf den farbigen Seitenkoepfen traegt kein heller Ton), aber es steht jetzt GANZ im Bild, kleiner, unter der Kopflinie. Eine kleine vollstaendige Silhouette ist eine Marke; eine grosse angeschnittene ist ein Fleck. */ .form[data-pos="blatt-kopf"] { --fb: clamp(78px, 9vw, 120px); right: clamp(12px, 4vw, 40px); top: 14px; width: var(--fb); opacity: .9; } /* Ecken und Groessen, damit eine neue Platzierung keine neue CSS-Regel braucht. Alle Formen liegen im Anschnitt - sie sollen an der Kante verschwinden, nicht als Aufkleber mitten in der Sektion sitzen. `ml`/`mr` sind die Seitenmitten fuer die schmalen Tagesreihen-Sektionen, wo oben und unten kein Platz ist. */ /* 09.09.2026, zweite Runde: die Werte waren -6 % / -7 %, damit lag rund die Haelfte jeder Form im Textbereich. Gemessen ueber 13 Seiten x 3 Breiten (Skript vergleicht jede Form gegen jeden Textblock und jedes Bild): 156 Ueberschneidungen. Die Formen liegen jetzt zu etwa zwei Dritteln ausserhalb - sie verschwinden an der Kante, statt hinter dem Text zu liegen. Keine Form wird dadurch kleiner, sie steht nur weiter draussen. */ /* Platzierung nach EINER Groesse: `--zeig` sagt, wie viele Pixel der Form in die Seite hineinragen duerfen. Prozentwerte waren der Fehler - sie beziehen sich auf die Sektionsbreite, nicht auf die Form, also ragte dieselbe Regel auf 390 px halb in den Text und auf 1440 px gar nicht mehr ins Bild. Gemessen: der Textrand liegt 176 px von der Kante (1440), 31 px (768), 16 px (390). `--zeig` bleibt darunter, senkrecht darf mehr kommen, weil dort die Sektionspolsterung liegt (64-140 px). */ /* Gemessen, wie weit der Text von der Fensterkante wegbleibt: ab 1312 px (Spalte 1200 + 2 x 56 Polster) sind es 176 px, darunter nur das Polster, also 31-56 px. `--zeig` bleibt jeweils darunter. */ .form { --zeig: 40px; --zeig-y: 84px; } @media (min-width: 1312px) { .form { --zeig: 150px; --zeig-y: 130px; } } @media (max-width: 1099px) { .form { --zeig: 26px; --zeig-y: 56px; } } /* 10.09.2026 an der Live-Seite mela-erlangen.com nachgemessen (1440 px): dort stehen auf der Startseite GENAU VIER grosse Figuren - 247x290, 387x372, 367x359 und 186x178 px - dazu neun kleine Punkte (sechs mit 14 px, vier mit 32 px). Also 13-27 % der Fensterbreite fuer eine Figur. Unsere Groessen lagen mit 90-170 px darunter; Filip: „nicht diese Mini-Puenktchen". Jetzt auf dem Live-Band. */ .form[data-gr="s"] { --fb: clamp(150px, 15vw, 210px); } .form[data-gr="m"] { --fb: clamp(200px, 22vw, 310px); } .form[data-gr="l"] { --fb: clamp(250px, 28vw, 390px); } /* 19.09.2026: Hero-Groesse aus dem Erstentwurf. Dort war der groesste Blob 470 von 1000 Einheiten breit - auf einem 1440er Schirm rund 540 px. 38vw trifft das. */ .form[data-gr="xl"] { --fb: clamp(330px, 38vw, 560px); } .form[data-gr] { width: var(--fb); } /* Die schmalen Sektionen haben weniger Polster als die grossen. */ .sek--klein .form { --zeig-y: 64px; } /* 🔴 10.09.2026: DAS PLATZIERUNGSMODELL IST GEDREHT - und zwar nach dem Vorbild der Live-Seite, nicht nach Gefuehl. Vorher hing die Figur seitlich im Anschnitt: `left: var(--zeig) - var(--fb)` liess nur `--zeig` Pixel ins Bild ragen - 40 px auf mittleren Breiten, 26 px darunter. Bei einer 234-px-Figur sind das 11 % Silhouette, und was uebrig blieb, war ein Splitter. Auf 768 px hat der Prueflauf genau das gemessen: 26x200, 26x56, 69x27 - deshalb sah die Seite auf jeder Breite nach „Mini-Puenktchen" aus, nicht nur auf dem Handy. Gemessen an mela-erlangen.com (1440 px): dort haengt KEINE Figur seitlich im Anschnitt. Die Feder steht bei x=185/y=-22, die Palette bei x=1036/y=-8 - beide waagerecht fast vollstaendig im Bild und OBEN angeschnitten. Das ist der Grund: senkrecht liegt die Sektionspolsterung (64-140 px), waagerecht laeuft der Text bis 16 px an die Kante. Also: waagerecht haengt die Figur nur 12 % ihrer Breite ueber die Kante, senkrecht laeuft sie zu 40 % aus der Sektion. Sichtbar bleiben 88 % der Breite und 60 % der Hoehe - eine Figur mit klarer Kante, kein Splitter. Ein Modell fuer ALLE Breiten; das Handy hat nur noch eigene Groessen. Dass dabei Text auf einer Figur liegen kann, ist zulaessig - siehe der Kontrastnachweis am Handy-Block weiter unten. */ /* 🔴 Zweite Korrektur am selben Tag, aus dem Ansehen: der senkrechte Anschnitt war richtig gedacht und am falschen Ort. Auf der Live-Seite wird eine Figur nur dort angeschnitten, wo die FENSTERKANTE schneidet - oben am Seitenanfang. Mitten auf der Seite (die 186x178-Figur bei y=1483) steht sie VOLLSTAENDIG im Bild. Bei uns schneidet stattdessen die Sektion, und an einer Farbgrenze wird aus dem Schnitt ein sichtbares Rechteck: ueber der Bordeaux-Sektion stand ein grau-blauer Klotz mit gerader Unterkante. Ein Anschnitt an der Fensterkante ist unsichtbar, ein Anschnitt an einer Farbkante ist ein Fehler. Also: in den Sektionen steht die Figur ganz im Bild, am Rand des Polsterbandes. Nur Hero und Seitenkopf schneiden oben an - die liegen an der Fensterkante. */ /* 🔴 Dritte Praezisierung, und jetzt stimmt die Unterscheidung: es gibt zwei Arten von Kante, und nur eine davon darf schneiden. - Die FENSTERKANTE links und rechts schneidet unsichtbar - dort haengt die Figur 14 % ihrer Breite hinaus, genau wie auf der Live-Seite. - Die SEKTIONSGRENZE oben und unten ist eine Farbkante. Ein Schnitt dort ist sichtbar (der grau-blaue Klotz ueber der Bordeaux-Sektion) und eine Figur, die nur mit der Spitze darueber lugt, sieht aus wie ein Versehen. Deshalb bleibt sie senkrecht 24 px INNERHALB der Sektion. Ergebnis: die Figur sitzt am aeusseren Rand des Polsterbandes, laeuft zur Seite aus dem Fenster und beruehrt keine Farbkante. */ /* 🔴 MERKSATZ vom 10.09.2026: keine Figur am UNTEREN Rand einer Sektion, auf die eine FARBIGE Sektion folgt. Die Catering-Feder stand auf „ul", und die Bordeaux-Karte des Late Table deckte sie zu - sichtbar blieb eine grau-blaue Spitze zwischen Kopflinie und Kartenrand, die wie ein Artefakt aussah. Die Feder steht deshalb jetzt oben links (`inhalt_start.py`). */ .form[data-pos="ol"] { left: calc(-0.14 * var(--fb)); top: 24px; } .form[data-pos="or"] { right: calc(-0.14 * var(--fb)); top: 24px; } .form[data-pos="ul"] { left: calc(-0.14 * var(--fb)); bottom: 24px; } .form[data-pos="ur"] { right: calc(-0.14 * var(--fb)); bottom: 24px; } /* Hero und Seitenkopf beruehren die Fensterkante - dort darf sie hinausragen. */ .hero .form[data-pos="or"], .seitenkopf .form[data-pos="or"] { top: calc(-0.30 * var(--fb)); right: calc(-0.14 * var(--fb)); } .hero .form[data-pos="ur"], .seitenkopf .form[data-pos="ur"] { bottom: calc(-0.24 * var(--fb)); right: calc(-0.14 * var(--fb)); } .hero .form[data-pos="ul"], .seitenkopf .form[data-pos="ul"] { bottom: calc(-0.24 * var(--fb)); left: calc(-0.20 * var(--fb)); } /* Seitenmitten sind fuer die schmalen Tagesreihen: dort gibt es oben und unten kein Polsterband, also bleibt nur der seitliche Anschnitt - und der darf hier tief sein, weil eine Reihe nur Ziffern und eine Zeile hat. */ .form[data-pos="ml"] { left: calc(-0.34 * var(--fb)); top: 50%; transform: translateY(-50%); } .form[data-pos="mr"] { right: calc(-0.34 * var(--fb)); top: 50%; transform: translateY(-50%); } /* Gestreute Punkte im Hero. Sechs Plaetze, weil die alte Seite ihre Punkte ueber das ganze Feld verteilt hatte und nicht als Haeufchen in einer Ecke - das ist der Teil, der den Hero dort leicht gemacht hat. Prozentwerte, damit die Streuung auf jeder Breite gleich bleibt. Unter 560 px fallen die kleinsten weg, sonst sitzen sie im Text. */ /* Punkte duerfen nie auf der Wortmarke oder dem Text sitzen. Gemessen bei 375/390/430/768/1440 px: die Wortmarke reicht bis 54 % Breite, der Spruch ueber die volle Breite bis 19 % Hoehe, der Untertitel bis 29 %, der Button bis 42 %, der zweite Button bis 52 %. p1 sitzt deshalb rechts oben neben der Wortmarke, p3 rechts neben der Tasse. */ .form[data-pos="p1"] { top: 3%; left: 66%; width: 14px; } .form[data-pos="p2"] { top: 1.5%; left: 46%; width: 9px; } .form[data-pos="p3"] { top: 60%; right: 4%; width: 18px; } .form[data-pos="p4"] { bottom: 34%; left: 6%; width: 10px; } .form[data-pos="p5"] { bottom: 11%; left: 40%; width: 13px; } .form[data-pos="p6"] { bottom: 17%; right: 31%; width: 8px; } /* Auf dem Handy bleiben drei Punkte. p2 und p6 sassen im Text, und p5 lag genau auf der Kontur der Handzeichnung - dort liest sich ein Punkt nicht als Streuung, sondern als Fleck auf der Zeichnung. */ @media (max-width: 560px) { .form[data-pos="p2"], .form[data-pos="p5"], .form[data-pos="p6"] { display: none; } } /* Die Palette sitzt im Hero hoeher als in den anderen Sektionen - sonst laeuft ihr unterer Lappen in die Zeile „brunch, breakfast and events". Lesbar waere es (Navy auf Rosé 9,6 : 1), ruhig ist es nicht. */ /* Der Hero hat oben die klebende Kopfleiste (78 px) ueber sich - eine Form, die dort im Anschnitt sitzt, verschwindet dahinter. Deshalb sagen diese vier Regeln direkt, wie viele Pixel der Form im Hero stehen sollen. */ /* Im Hero steht die klebende Kopfleiste (78 px) ueber der Sektion - eine Figur, die dort zu weit oben angeschnitten ist, verschwindet dahinter. Deshalb schneidet der Hero flacher an als die anderen Sektionen. */ .hero .form[data-pos="or"] { top: calc(-0.22 * var(--fb)); } /* 🔴 Bei 768 px lag die Feder zu 68 % auf der Wortmarke. Lesbar waere es (Navy auf Waschmittelbleu 7,42 : 1), aber die Wortmarke ist die Marke - sie bleibt frei. Gemessen reicht der Schriftzug bis 54 % der Breite, also steht die Feder darueber statt daneben. */ .hero .form[data-pos="ol"] { top: calc(-0.58 * var(--fb)); left: calc(-0.30 * var(--fb)); } @media (max-width: 1099px) { .hero .form[data-pos="ol"] { display: none; } } .hero .form[data-pos="ml"] { top: 34%; transform: none; } .hero .form[data-pos="mr"] { top: 34%; transform: none; } /* Die Margerite im Hero lief unten in die naechste Sektion und lag dort auf „Von sieben bis spaet." - der Hero hat `sek--ueberlauf`, seine Formen werden also nicht abgeschnitten. */ .hero .form[data-pos="ul"] { bottom: calc(-0.34 * var(--fb)); } /* Ab hier die drei Sonderplaetze mit eigener Regel. */ /* Sonderplaetze - seit 10.09.2026 im selben Verhaeltnis-Modell wie die Ecken, weil feste Pixelwerte auf kleinen Breiten Splitter erzeugten (gemessen: deli 15x87, late-table 5x81, events 27x99). */ .form[data-pos="deli"] { --fb: clamp(180px, 22vw, 320px); left: calc(-0.14 * var(--fb)); bottom: 24px; width: var(--fb); opacity: .9; } .form[data-pos="events"] { --fb: clamp(200px, 26vw, 360px); right: calc(-0.14 * var(--fb)); top: 24px; width: var(--fb); opacity: .85; /* traegt jetzt Mangostano-HELL, kein Hauch mehr noetig */ } /* 🔴 Die Bordeaux-Sektion ist der Sonderfall: ihr Text ist hell, also waere eine helle GEFUELLTE Figur darunter unlesbar (gemessen 1,11 : 1) - und eine dunkle gefuellte Figur liest sich auf Bordeaux als Fleck, nicht als Figur (angesehen, 10.09.2026). Deshalb steht hier als einzige eine LINIENFIGUR: die Schlaufe in Waschmittelbleu. Eine Linie hat keine Flaeche, auf der Text liegen kann, und bleibt auf dunklem Grund als Zeichnung lesbar. */ .form[data-pos="late-table"] { --fb: clamp(190px, 24vw, 340px); left: calc(-0.14 * var(--fb)); bottom: 24px; width: var(--fb); opacity: .5; } /* 09.09.2026, Formen-Mix: Bluete und Feder kommen von der alten Seite mela-erlangen.com (dort Salbei unten links und Hellblau oben links im Hero). Uebernommen ist die FORM, nicht die Farbe - die Toene sind die der Tapete. Die Palette-Amoebe der alten Seite ist bewusst NICHT uebernommen: sie waere ein vierter Blob neben lappen und tropfen und damit eine Doppelung. */ /* `bluete-hero` ist am 09.09.2026 wieder entfallen (Filip: „die blaue Blume auf dem Hero bitte auch weg"). Die Regel bleibt stehen und ist der Grund, warum die Position hier nicht einfach nur gestrichen ist: der Hero traegt die Wortmarke, den Spruch, zwei Knoepfe und die Handzeichnung - jede weitere Form macht daraus eine Sammlung. Die Margerite steht weiter auf /deli/, dort ist sie der einzige Gegenstand. Falls sie je zurueckkommt: Waschmittelbleu, bottom: -7%, NICHT Mandelkernbeige (geht auf dem Pandoragrau des Feldes unter). */ /* Die Feder sass mit ihrer rechten Haelfte auf der Brotkrume „Start" (gemessen 90-100 % Ueberdeckung auf jeder Unterseite). Sie steht jetzt hoeher und weiter links - im Anschnitt oberhalb der Krume. */ /* Der Seitenkopf liegt an der Fensterkante, hier darf sie oben raus. */ .form[data-pos="feder-kopf"] { --fb: clamp(150px, 18vw, 240px); left: calc(-0.16 * var(--fb)); top: calc(-0.48 * var(--fb)); width: var(--fb); opacity: .9; } .form[data-pos="bluete-klein"] { right: -8%; bottom: -12%; width: clamp(150px, 20vw, 300px); opacity: .8; } /* 🔴 11.09.2026, Kundenhinweis Filip: „bei dem Wort gezeichnet ist ein kleiner blauer Punkt drüber". Gemessen auf /kontakt/ bei 390, 430, 768 UND 1440 px - der Punktehaufen lag auf allen vier Breiten auf der Bildunterschrift (1.500-2.900 px² Ueberdeckung). Es war also kein Handy-Problem, sondern ein Aufbaufehler. ⚠️ MERKSATZ: eine Bildunterschrift ist die LETZTE Zeile ihrer Sektion. Eine unten verankerte Figur landet dort zwangslaeufig darauf - und ein einzelner Punkt ueber einem Wort sieht nicht nach Deko aus, sondern nach Druckfehler. In Sektionen mit `figcaption` gehoert die Figur nach oben. Deshalb steht der Haufen auf /kontakt/ jetzt oben rechts (`or`), und die Regel hier hebt ihn zusaetzlich ueber die Unterkante, falls er je wieder unten eingesetzt wird. */ .form[data-pos="punkte"] { --fb: clamp(120px, 13vw, 180px); right: calc(-0.10 * var(--fb)); bottom: 24px; width: var(--fb); } /* Sektionen mit Bildunterschrift: keine Figur an der Unterkante. */ .sek:has(figcaption) .form[data-pos="ul"], .sek:has(figcaption) .form[data-pos="ur"], .sek:has(figcaption) .form[data-pos="punkte"] { bottom: auto; top: 24px; } .form[data-pos="schlaufe"] { --fb: clamp(180px, 22vw, 300px); right: calc(-0.14 * var(--fb)); bottom: 24px; width: var(--fb); } /* Unter 560 px stehen Punkte und Schlaufe der Textspalte im Weg, sobald eine Zeile umbricht. Sie sind Zierde, also gehen sie. */ /* punkte und schlaufe waren unter 560 px ausgeblendet, weil sie in der Textspalte lagen. Seit sie dort klein und frei in der Polsterzone stehen, koennen sie bleiben. */ /* HANDY - 10.09.2026 neu gebaut. 🔴 Vorher standen hier 56 px / 46 px / 44 px / 32 px. Das war eine Ueberkorrektur vom 09.09.: um „0 Ueberschneidungen" zu erreichen, wurde jede Figur so klein, dass sie ihre Silhouette verlor - Filip sah „komische kleine Sternchen". Eine Margerite mit 46 px IST ein Punkt. 🔴 Und die Regel „0 Ueberschneidungen" war strenger als noetig. Gemessen am 09.09.: Navy auf Waschmittelbleu 7,42 : 1, auf Naturreisbeige 6,42 : 1, auf Lasurit-hell 5,66 : 1, auf Mangostano-hell 5,49 : 1 - alle vier hellen Deko-Toene tragen Text ueber der AA-Schwelle von 4,5 : 1. Text DARF also auf einer Figur liegen. Die Pruefung misst seit heute Kontrast statt Ueberschneidung (`/tmp/vs/formcheck.mjs`-Nachfolger im QA-Ordner). Was dabei NICHT erlaubt bleibt und im Prueflauf haengen wuerde: ein DUNKLER Ton unter dunklem Text (Mangostano und Lasurit ungehellt) und ein HELLER Ton unter cremefarbenem Text (die Bordeaux-Sektion). Deshalb traegt die Late-Table-Sektion als einzige eine dunkle Figur. Die Geometrie steht jetzt oben und gilt fuer alle Breiten - hier nur noch Groessen und die drei Sonderfaelle. */ @media (max-width: 700px) { .form[data-gr="s"] { --fb: 36vw; } /* 140 px bei 390 */ .form[data-gr="m"] { --fb: 48vw; } /* 187 px */ .form[data-gr="l"] { --fb: 60vw; } /* 234 px */ .form[data-gr="xl"] { --fb: 76vw; } /* 296 px bei 390 px Schirm */ .form[data-pos="blatt-kopf"] { width: 21vw; } .form[data-pos="feder-kopf"] { width: 44vw; } .form[data-pos="deli"], .form[data-pos="events"], .form[data-pos="late-table"], .form[data-pos="schlaufe"] { width: 50vw; } .form[data-pos="punkte"] { width: 30vw; } /* Die Tagesreihen haben nur 16 px Polster und tragen die grossen Stundenziffern in hellem Blau. Eine helle Figur dahinter macht die Ziffer matschig - dort bleibt es leer. */ .sek--reihe .form { display: none; } /* Der Hero traegt Wortmarke, Spruch, zwei Knoepfe und die Handzeichnung. Zwei Figuren plus zwei Punkte reichen - die Live-Seite zeigt im ersten Fenster auch genau zwei Figuren. Der Tropfen an der rechten Seitenmitte ist am 10.09.2026 ganz entfallen (auch auf dem Rechner): seitlich angeschnitten blieb von ihm nur eine graue Kugel ohne Silhouette - eine Figur, die man nicht erkennt, ist keine Figur. Damit stehen im Hero drei Figuren wie auf der Live-Seite. */ .hero .form[data-pos="ol"] { display: none; } } /* 03.09.2026: 900 ms und 24 px waren als Effekt lesbar. 320 ms und 12 px sind eine Ankunft, keine Vorstellung. `will-change` stand vorher global und dauerhaft auf jedem [data-reveal] - das haelt jede Sektion der Seite dauerhaft in einer eigenen Ebene. Es steht jetzt nur, solange die Sektion noch nicht angekommen ist. */ .js [data-reveal]:not([data-sichtbar="ja"]) { will-change: opacity, transform; } .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 320ms ease-out, transform 320ms ease-out; } .js [data-reveal][data-sichtbar="ja"] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- 10 Bausteine ------------------------------------------------ */ .raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); align-items: center; } .raster--unten { align-items: end; } .raster--oben { align-items: start; } .raster--schmal { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; align-items: stretch; } /* ---- Das Schrift-Bild-Paar --------------------------------------------- Sieben Sektionen der Startseite haben denselben Aufbau: in der einen Spalte alles Geschriebene, in der anderen ein Bild. Die Bildseite wechselt von Sektion zu Sektion. EINE Mechanik: ohne Zusatzklasse steht das Bild rechts, mit .raster--bild-links links. Vorher gab es zwei - .station--rechts am Raster und .bildkreis--rechts am Bild. Feste Spaltenbreiten statt auto-fit: auto-fit kippte je nach Containerbreite schon deutlich unter 760 px auf zwei Spalten, wo die Umsortierung noch nicht greift. Unter 760 px ist es immer eine Spalte, und die Quellreihenfolge ist immer Schrift zuerst - der Wechsel gilt nur am Desktop, mobil waere er nur eine Unstimmigkeit. */ .raster--paar { display: grid; gap: var(--gap); /* Oberkante statt Mitte. Die Textspalte ist je Sektion unterschiedlich hoch (250 px bei einer Station, 500 px bei Events); mittig zentriert schwamm sie in der Bildhoehe und jedes Paar begann auf einer anderen Hoehe. `start` gibt allen sieben Paaren dieselbe Kante - das ist die Bedingung dafuer, dass man die Reihe als Reihe liest. */ align-items: start; grid-template-columns: 1fr; } @media (min-width: 760px) { .raster--paar { grid-template-columns: 1fr minmax(0, 520px); } .raster--paar > .sek__text { grid-column: 1; grid-row: 1; } /* .hero__kreis ist die Bildseite des Hero-Paars - runde Flaeche statt 4:3-Kachel, weil die Handzeichnung dort der Sonderfall ist. */ .raster--paar > .sekbild, .raster--paar > .hero__kreis { grid-column: 2; grid-row: 1; } .raster--paar.raster--bild-links { grid-template-columns: minmax(0, 520px) 1fr; } .raster--paar.raster--bild-links > .sek__text { grid-column: 2; } .raster--paar.raster--bild-links > .sekbild { grid-column: 1; } } .station__text { max-width: 42ch; } /* ---- Ein Bildsystem ---------------------------------------------------- Vorher zwei (.bildkreis maskiert, .bildkachel rechteckig) mit vier Formvarianten - vier gleichartige Stationen sahen aus wie vier Unikate. Eine Form, ein Seitenverhaeltnis, eine Spaltenbreite, alle sieben Bilder gleich beschnitten. `aspect-ratio` haelt die Flaeche vor dem Laden frei, damit nichts springt. */ .sekbild { position: relative; overflow: hidden; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; /* Creme, nicht Salbei: `aspect-ratio` haelt die Flaeche ohnehin frei, und ein farbiger Kasten wuerde beim Laden kurz aufblitzen. */ background: var(--creme); border-radius: var(--r-karte-gross); } .sekbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Hochformat-Motive in einer 4:3-Flaeche: der mittige Standardausschnitt trifft nicht immer das Motiv. bild--oben haelt den Kopf im Bild, bild--unten die Glaeser. */ .bild--oben { object-position: 50% 26% !important; } .bild--unten { object-position: 50% 66% !important; } /* .karte traegt keine Flaeche mehr, sondern eine Linie. Grund: alle Karten stehen jetzt auf Creme, und eine cremefarbene Karte auf Creme ist unsichtbar. Eine Oberlinie ordnet ohne zweite Flaeche und ohne zweite Rundung. */ .karte { background: transparent; border-radius: 0; border-top: 2px solid var(--linie); padding: 20px 0 0; } .karte--gross { padding: clamp(20px, 2.4vw, 26px) 0 0; } .f--navy .karte { border-top-color: var(--creme); } /* Anfrage-Leiste „Direkt zum Ziel" – das Verkaufsherz */ .ziele { list-style: none; display: flex; flex-direction: column; border-top: 2px solid var(--linie); } .ziele a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; padding: 20px 0; border-bottom: 2px solid var(--linie); transition: opacity var(--uebergang); } .ziele a:hover { opacity: 0.6; } /* Normale Schrift, nicht die Display-Schrift. Filip hat das am 02.09.2026 zweimal so angesagt - die vier Zeilen sind Handlungen, kein Schmuck. Figtree braucht bei dieser Groesse Gewicht und enges Tracking, sonst liest es sich wie Flieszlext: dasselbe Muster wie .t-h4 und .karte-zeile__name. NICHT wieder auf var(--display) zurueckdrehen. */ .ziele__titel { font-family: var(--text-font); font-size: var(--fs-zeile); line-height: 1; letter-spacing: -0.03em; font-weight: 700; flex: 1; min-width: 200px; } .ziele__zusatz { font-size: 17px; font-weight: 500; } .ziele__pfeil { font-size: 26px; font-weight: 700; } /* Speisekarten-Liste */ .karte-liste { list-style: none; display: flex; flex-direction: column; border-top: 2px solid var(--linie); } .karte-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 2px solid var(--linie); } .karte-zeile__bild { width: 84px; height: 84px; flex: none; border-radius: var(--r-rund); overflow: hidden; /* Ruhige Flaeche, wenn zu einem Gericht kein Foto vorliegt. Bewusst NICHT der gestreifte Platzhalter - der ist dem Fall „Foto fehlt noch, muss nachgeliefert werden" vorbehalten und wuerde die Liste zerreissen. */ background: var(--rose); } .karte-zeile__bild img { width: 100%; height: 100%; object-fit: cover; } .karte-zeile__haupt { flex: 1; min-width: 160px; } .karte-zeile__name { font-size: var(--fs-karte); font-weight: 700; letter-spacing: -0.03em; line-height: 1; display: block; } .karte-zeile__info { font-size: var(--fs-body-s); margin-top: 6px; display: block; max-width: 52ch; } .karte-zeile__preis { font-size: var(--fs-preis); font-weight: 700; color: var(--navy); letter-spacing: -0.03em; white-space: nowrap; /* Bricht der Preis auf schmalen Bildschirmen in die naechste Zeile, bleibt er rechtsbuendig - sonst steht er linksbuendig unter dem Bild und liest sich wie ein eigener Eintrag. */ margin-left: auto; } .kennz { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; border: 2px solid var(--navy); border-radius: var(--r-rund); padding: 2px 8px; margin-left: 8px; white-space: nowrap; display: inline-block; vertical-align: middle; } .gruppe + .gruppe { margin-top: clamp(40px, 6vw, 72px); } .gruppe__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: clamp(18px, 3vw, 28px); } /* Einbettungsbereiche (resmio, pretix) – Klick zum Laden, § 25 TDDDG */ .einbettung { border: 2px dashed var(--navy); border-radius: var(--r-karte); background: var(--creme); padding: clamp(24px, 4vw, 40px); text-align: center; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .einbettung--hell { border-color: var(--creme); background: transparent; min-height: auto; } .einbettung__titel { font-weight: 700; font-size: 22px; } .einbettung__text { font-size: var(--fs-body-s); max-width: 46ch; margin-bottom: 12px; } /* 360 px war fuer den Platzhalter gerechnet. Das resmio-Widget baut Kopf, zwei Auswahlfelder, Hinweistext und Fusszeile uebereinander - im Browser gemessen rund 500 px, auf schmalen Schirmen mehr, weil die Felder untereinander rutschen. Die Seite gibt die Hoehe per data-laden-hoehe mit. */ .einbettung__rahmen { width: 100%; min-height: 360px; border: 0; display: block; } @media (max-width: 560px) { .einbettung__rahmen { min-height: 640px; } } .termine { list-style: none; display: flex; flex-direction: column; gap: 12px; } .termin { background: var(--creme); border-radius: 20px; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .termin__text { display: flex; flex-direction: column; gap: 6px; min-width: 240px; flex: 1; } .termin__datum { font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; color: var(--navy); } /* Das Menue des Abends. Steht unter dem Datum, nicht daneben: es ist die laengste Zeile der Karte und wuerde den Knopf sonst umbrechen. */ .termin__menue { font-size: var(--fs-body-s); line-height: 1.45; color: var(--navy); max-width: 56ch; } .termin__menue--veg { font-style: italic; } /* Der Preis des Abends. Steht bei der Karte, nicht im Fliesstext - dort waere er ab dem naechsten Termin falsch. */ .termin__preis { font-weight: 700; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.02em; color: var(--navy); white-space: nowrap; } .termin__preis-zu { font-weight: 500; font-size: 15px; letter-spacing: 0; } /* 🔴 „ausgebucht" war unsichtbar: `.chip` hat keine eigene Farbe und erbte in der Bordeaux-Sektion Creme - auf der cremefarbenen Terminkarte also Creme auf Creme, gemessen 1 : 1. Aufgefallen erst, als der erste Abend wirklich ausgebucht war. Jetzt eine gefuellte Marke an der Stelle, an der sonst der Knopf steht: Creme auf Bordeaux, 10,76 : 1. */ .termin .chip { background: var(--bordeaux); color: var(--creme); border-radius: var(--r-rund); padding: 10px 22px; font-weight: 700; white-space: nowrap; } .termin .btn { border-color: var(--navy); background: var(--navy); color: var(--creme); } .termin .btn:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--creme); } .hinweis { border-left: 4px solid var(--navy); padding: 4px 0 4px 18px; font-size: var(--fs-body-s); max-width: 60ch; } /* Haeufige Fragen. Bewusst NICHT aufklappbar: Google verlangt fuer das FAQPage-Schema, dass die Antwort ohne Interaktion lesbar ist. Eine Oberlinie je Eintrag statt Kaesten - dasselbe Muster wie .karte auf Creme. */ .faq { display: grid; gap: clamp(20px, 3vw, 30px); max-width: var(--breite-text); } .faq__eintrag { border-top: 2px solid var(--linie); padding-top: 18px; } .brotkrumen { font-size: 14px; margin-bottom: clamp(20px, 3vw, 30px); } .brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; } .brotkrumen li::after { content: "›"; margin-left: 10px; opacity: 0.55; } .brotkrumen li:last-child::after { content: ""; } .brotkrumen a { border-bottom: 1px solid var(--navy); } .brotkrumen [aria-current="page"] { font-weight: 600; } .weiter { display: grid; gap: 14px; } .weiter__liste { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: var(--fs-body-s); } /* ---------- 11 Formulare ------------------------------------------------ */ .formular { display: grid; gap: 18px; } .feld { display: grid; gap: 6px; } .feld > label { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; } .feld__pflicht { font-weight: 400; font-size: 14px; opacity: 0.8; } .feld input, .feld select, .feld textarea { font: inherit; font-size: 17px; color: var(--navy); background: var(--creme); border: 2px solid var(--navy); border-radius: 14px; padding: 13px 16px; min-height: 54px; width: 100%; transition: box-shadow var(--uebergang); } .feld textarea { min-height: 140px; resize: vertical; line-height: 1.5; } .feld input:hover, .feld textarea:hover, .feld select:hover { box-shadow: inset 0 0 0 1px var(--navy); } .feld--fehler input, .feld--fehler textarea, .feld--fehler select, .feld--fehler .kasten { border-width: 4px; } .feld__fehler { font-size: 14px; font-weight: 700; display: none; align-items: center; gap: 7px; } .feld__fehler::before { content: "!"; flex: none; width: 20px; height: 20px; border: 2px solid var(--navy); border-radius: var(--r-rund); display: grid; place-items: center; font-size: 13px; line-height: 1; } .feld--fehler .feld__fehler { display: flex; } .paare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; } .kasten { border: 2px solid var(--navy); border-radius: 14px; padding: 14px 16px; } .wahl { display: grid; gap: 10px; } .wahl__zeile { display: flex; align-items: flex-start; gap: 11px; min-height: 30px; font-size: 16px; } .wahl input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; accent-color: var(--navy); } .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formular__hinweis { font-size: 14px; max-width: 60ch; } .meldung { border: 2px solid var(--navy); border-radius: var(--r-karte); padding: 18px 20px; display: none; } .meldung[data-an="ja"] { display: block; } .meldung__titel { font-weight: 700; font-size: 19px; margin-bottom: 6px; } /* 14.10.2026: Auf dunklen Flaechen (Late Table bordeaux, navy) war der navy Rahmen kaum sichtbar - Rahmen und Fehler-Kreis in Schriftfarbe. */ .f--bordeaux .meldung, .f--navy .meldung { border-color: currentColor; } .f--bordeaux .feld__fehler::before, .f--navy .feld__fehler::before { border-color: currentColor; } /* ---------- 12 Fussbereich ---------------------------------------------- */ .fuss { position: relative; background: var(--creme); border-radius: var(--r-sektion) var(--r-sektion) 0 0; margin-top: -36px; /* Oben KEIN Innenabstand: die Fassaden-Banderole soll buendig an der Oberkante sitzen. Der weggefallene Abstand wandert auf .fuss__raster, sonst klebt das Band am Text. */ padding: 0 var(--sek-x) 130px; } .fuss__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: clamp(24px, 4vw, 48px); padding-top: clamp(52px, 8vw, 110px); padding-bottom: 32px; border-bottom: 2px solid var(--linie); } /* Fassaden-Banderole im Fussbereich. Das Band liegt ausserhalb von .inhalt und geht randlos ueber die volle Breite. overflow + gleicher Radius, damit es in der Rundung von .fuss bleibt. */ .fassadenband { overflow: hidden; /* Kein unterer Abstand: den setzt bereits das padding-top von .fuss__raster. Beides zusammen waeren ueber 160 px Leere zwischen Standlinie und Adresse. */ margin: 0 calc(var(--sek-x) * -1); line-height: 0; border-radius: var(--r-sektion) var(--r-sektion) 0 0; } .fassadenband img { display: block; width: 100%; height: auto; /* Die beiden Faelle im haben UNTERSCHIEDLICHE Seitenverhaeltnisse (700x376 eng, 1420x376 breit). Ein width/height-Attribut am gilt nur fuer den engen Fall - ab 700 px wuerde der Browser bis zum Laden mit der falschen Hoehe rechnen und die Seite springen lassen. Deshalb hier explizit, passend zur media-Bedingung im . */ aspect-ratio: 700 / 376; /* Die unterste Linie ist die Standlinie - sie soll die Kante sein, nicht in der Luft haengen. */ margin-bottom: -2px; } @media (min-width: 700px) { .fassadenband img { aspect-ratio: 1420 / 376; } } /* ---------- 12b Fassaden-Illustration ----------------------------------- */ /* Grosses Bild auf /kontakt/ (inline) und auf 404.html (). color ist der Schalter: alle Linien der Inline-Fassung stehen auf currentColor, die Zeichnung liesse sich damit ohne Dateiaenderung umfaerben (z. B. creme auf dunklem Grund). */ .fassade { margin: 0; color: var(--navy); } .fassade__bild { display: block; width: 100%; height: auto; } .fassade figcaption { margin-top: 12px; color: var(--text); opacity: .72; } .fassade404 { max-width: 720px; margin: clamp(24px, 5vw, 48px) auto 0; } .fassade404 img { display: block; width: 100%; height: auto; } /* Aufbau der Fassade auf /kontakt/: von der Strasse nach oben aufgedeckt, danach kommt das Leben dazu. Kein neues JavaScript - mela.js setzt auf [data-reveal] ohnehin data-sichtbar="ja", sobald das Element in den Blick kommt. Ohne JavaScript fehlt die .js-Klasse am , dann greift keiner dieser Selektoren und die Zeichnung ist vollstaendig sichtbar. Das ist der wichtigste der drei Zustaende: eine Zeichnung, die ohne JS weggeclippt bleibt, waere ein Fehler und kein Effekt. Kein stroke-dashoffset-Nachzeichnen: .fs-wort, .fs-fig und die Baumkronen sind Fuellungen, keine Linien - daran tut stroke-dasharray nichts. */ .js [data-reveal] .fassade #fs-haus, .js [data-reveal] .fassade #fs-eg { clip-path: inset(100% 0 0 0); transition: clip-path 480ms ease-out; } .js [data-reveal] .fassade #fs-eg { transition-delay: 90ms; } .js [data-reveal] .fassade .fs-wort, .js [data-reveal] .fassade #fs-leben { opacity: 0; transition: opacity 300ms ease-out; transition-delay: 240ms; } .js [data-reveal] .fassade #fs-leben { transition-delay: 360ms; } .js [data-reveal][data-sichtbar="ja"] .fassade #fs-haus, .js [data-reveal][data-sichtbar="ja"] .fassade #fs-eg { clip-path: inset(0 0 0 0); } .js [data-reveal][data-sichtbar="ja"] .fassade .fs-wort, .js [data-reveal][data-sichtbar="ja"] .fassade #fs-leben { opacity: 1; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] .fassade #fs-haus, .js [data-reveal] .fassade #fs-eg { clip-path: none !important; transition: none !important; } .js [data-reveal] .fassade .fs-wort, .js [data-reveal] .fassade #fs-leben { opacity: 1 !important; transition: none !important; } } .fuss__logo { height: 34px; width: auto; margin-bottom: 18px; } .fuss h2, .fuss__titel { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; margin: 0 0 10px; color: var(--navy); } .fuss p { font-size: var(--fs-body-s); } .fuss__links { list-style: none; display: grid; gap: 7px; font-size: var(--fs-body-s); } .fuss__links a { border-bottom: 1px solid transparent; } .fuss__links a:hover { border-bottom-color: var(--navy); } .fuss__unten { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 20px; font-size: 15px; align-items: baseline; } .fuss__unten a { border-bottom: 1px solid transparent; } .fuss__unten a:hover { border-bottom-color: var(--navy); } /* ---------- 12b Speisekarte: alles in Figtree, nur die H1 nicht --------- Kundenwunsch 08.09.2026: „Speisekarte komplett clean, nichts Geschnoerkeltes. Die Ueberschrift Speisekarte an sich kann geschnoerkelt bleiben." Das ist auch das richtige Handwerk: eine Karte wird gescannt, nicht gelesen. Die Karte hat 267 Zeilen, und die Zwischentitel (`h2` je Karte, `h3` je Kategorie) baut mela.js zur Laufzeit - deshalb faellt die Regel ueber die Body-Klasse und nicht ueber die Klassen der einzelnen Titel. `:not(.t-h1)` haelt genau die eine Ausnahme frei. */ .seite--karte h1:not(.t-h1), .seite--karte h2, .seite--karte h3, .seite--karte h4 { font-family: var(--text-font); font-style: normal; font-variation-settings: normal; font-weight: 700; letter-spacing: -0.02em; } /* Drei Ebenen, und sie muessen in dieser Reihenfolge kleiner werden: Kartenblock („Essen", „Getraenke") > Gericht > Kategorie als Marke. Erster Versuch hatte die Kategorie auf 28 px und das Gericht auf 40 px - damit war der Titel KLEINER als das, was er ueberschreibt. Zwei Aenderungen: 1. Das Gericht laeuft auf 24 px statt 40. In der Display-Schrift waren 40 px eine Geste, in Figtree 700 sind sie nur gross - und eine Karte mit 267 Zeilen wird gescannt. Kuerzere Zeilen, mehr davon im Blick. 2. Die Kategorie wird kein Titel mehr, sondern eine Marke: klein, gesperrt, in Versalien. Sie konkurriert dann nicht mit den Gerichten, sondern trennt sie - zusammen mit der Linie, die schon darunter liegt. */ .seite--karte { --fs-karte: clamp(19px, 2vw, 24px); --fs-preis: clamp(18px, 1.9vw, 22px); } .seite--karte .t-h2--s { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; } /* Kategorietitel der Karte in der Plakatschrift (Kundenwunsch Filip 10.09.2026: „Healthy Start", „mela French Toast", „mela Pancakes" und alle weiteren Abteilungstitel). Zwei Werte muessen dafuer mitgehen: - KEINE Versalien und keine Sperrung. Die Schrift lebt von den Unterlaengen und dem schraegen k; gesperrt und in Versalien ist sie nur dekoriert (dieselbe Entscheidung wie bei `.t-eyebrow`, dort drei Fassungen gerendert und verglichen). - 13 px waren als Marke gedacht. In der Plakatschrift laufen die weichen Formen darunter zu, also 18-22 px. Die Rangfolge bleibt trotzdem richtig: das Gericht ist Figtree 700 bei 19-24 px und damit optisch schwerer als der kursive Titel darueber - genau der Fehler vom 08.09., als die Kategorie groesser war als ihr Inhalt. Die Regel steht NACH `.seite--karte h3`, sonst gewinnt dort Figtree. */ .seite--karte .t-h3 { font-family: var(--plakat); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.25; text-transform: none; letter-spacing: 0.01em; } /* CLS-Bremse fuer die Speisekarte (gemessen 10.09.2026, 390 px: CLS 0.364, ein einziges Ereignis nach 139 ms). Der Kasten #karte-ausgabe ist im HTML leer und wird erst aus speisekarte.json gefuellt - rund 7000 px auf einmal. Alles darunter (Allergenhinweis, „Weiter im mela", die naechste Sektion) rutscht dabei nach unten, und weil es vorher sichtbar im Bild stand, zaehlt Google das voll als Layoutsprung. Loesung ohne Umbau: vorab eine Bildschirmhoehe freihalten. Dann steht der Text unter der Karte von Anfang an unter dem Falz, und das Fuellen schiebt nur Unsichtbares. Der echte Kasten ist ein Vielfaches hoeher, die 100vh bremsen nach dem Fuellen also nichts. Nur bei aktivem JavaScript - ohne JS wird nie gefuellt, da waere die Luecke unter dem noscript-Hinweis nur ein Loch. */ @media (scripting: enabled) { #karte-ausgabe { min-height: 100vh; } /* 🔴 Hier stand eine Bremse fuer die Terminliste (`min-height: 420px`). Sie ist wieder raus, weil sie am FALSCHEN ORT sass: nachgemessen mit `PerformanceObserver` auf `layout-shift` sind die Quellknoten des Sprungs auf /late-table/ ein SVG und die Sektion daneben, die beide nach 110 ms um 22 px nach unten rutschen - die Terminliste selbst bleibt, wo sie ist (345 px Inhalt in einem 420-px-Kasten, also nie gewachsen). Der Ausloeser ist der SCHRIFTTAUSCH: die Ueberschriftenschrift laedt mit `font-display: block`, und wenn sie einspringt, aendert die H1 ihre Hoehe. Die Bremse haette nur eine 75-px-Luecke erzeugt und den Sprung nicht verhindert. Der richtige Weg waere `size-adjust`/`ascent-override` am @font-face, damit die Ersatzschrift dieselbe Hoehe belegt. Nicht heute gemacht: 0,0155 liegt weit unter der Google-Schwelle von 0,1, und ein falsch gesetztes `size-adjust` verschiebt die Ueberschriften dauerhaft. ⚠️ MERKSATZ: bevor man Platz reserviert, erst die Quellknoten des Sprungs auslesen. Ich habe hier zweimal geraten und einmal getroffen - auf /speisekarte/ war es wirklich der nachgeladene Kasten, hier nicht. */ } /* Die Fusszeilentitel laufen weiter in der Schreibmaschinenschrift - die Regel oben wuerde sie sonst mitnehmen. */ .seite--karte .fuss h2, .seite--karte .fuss__titel { font-family: var(--mono); font-weight: 400; letter-spacing: 0.16em; } /* ---------- 13 Seitenspezifisches --------------------------------------- */ /* Hero */ .hero { padding-block: clamp(36px, 6vw, 90px) clamp(56px, 8vw, 110px); } /* 08.09.2026: die rosa Scheibe ist weg (Filip). Der Grund ist nicht Geschmack, sondern Doppelung: seit die gemalte Wand hinter dem Hero liegt, gab es dort ZWEI runde Flaechen uebereinander - die Scheibe und das Feld. Die Scheibe war die schwaechere von beiden, weil sie eine harte Kante hat und das Feld keine. Jetzt sitzt die Hand direkt im Feld, dafuer groesser (die 12 % Innenabstand der Scheibe fallen weg) und ein Stueck nach links unten gezogen, damit sie in der weichen Rundung liegt und nicht daneben. `aspect-ratio` bleibt: das Rasterfeld muss quadratisch bleiben, sonst springt die Hoehe der Hero-Zeile. */ .hero__kreis { position: relative; width: 100%; max-width: 500px; justify-self: end; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } /* Keine Flaeche hinter der Hand - Stand 09.09.2026, Filip: „die Tasse soll einfach so cool da platziert sein". Vorgeschichte in zwei Zeilen, damit sie niemand rueckwaerts wieder einbaut: erst eine rosa Scheibe (harte Kante, Ton kommt auf der Startseite sonst nicht vor), dann eine weiche Rundung in Naturreisbeige - beide sind raus. Die Zeichnung steht jetzt direkt auf der gemalten Wand. Das ist auch der bessere Grund als der Geschmack: die Wand hat schon eine Rundung, und eine zweite Form unter dem einzigen Gegenstand im Hero macht ihn zum Aufkleber. Navy auf Mandelkernbeige liegt bei 7,54 : 1 - die Zeichnung braucht keine Flaeche, um sich zu halten. */ .hero__kreis img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; /* Ohne Flaeche darunter darf die Zeichnung den Platz nehmen, den die Scheibe vorher als Rand verbraucht hat. */ transform: scale(1.06); } /* Der Hero folgt derselben Regel: der Kreis ist 460 px hoch, der Textblock daneben rund 200 px. Mittig zentriert klaffte dazwischen eine Luecke von 170 px, und der Blick sprang von der Wortmarke ins Leere. */ /* Kopf der Unterseiten */ .seitenkopf { padding-block: clamp(30px, 4vw, 56px) clamp(40px, 6vw, 72px); } .seitenkopf .t-h1 { font-size: clamp(38px, 7.4vw, 104px); } /* Late Table */ .sek--bordeaux { position: relative; } .sek--bordeaux .schleier { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 65% at 85% 8%, var(--himmelblau-schleier) 0%, rgba(93, 32, 29, 0) 62%); } .f--bordeaux a:not(.btn):not(.termin .btn) { color: var(--creme); } .f--navy a:not(.btn):not(.termin .btn) { color: var(--creme); } /* Kontakt / Anfahrt */ .lageplan { border: 2px solid var(--navy); border-radius: var(--r-karte); padding: clamp(22px, 3vw, 34px); background: var(--himmelblau); } .lageplan__kern { background: var(--creme); border-radius: 18px; padding: 20px 22px; } /* Rechtstexte-Platzhalter */ /* 🔴 11.09.2026: Rechtstexte kommen von aussen, und juristisches Deutsch baut Woerter, die auf ein Telefon nicht passen - „Verbraucherstreitbeilegung/Universalschlichtungsstelle" ist 51 Zeichen ohne eine einzige Trennstelle, die ein Browser von sich aus nutzt (der Schraegstrich bricht nicht). Bei 390 px lief die Zeile aus dem Bild und wurde von der Sektion abgeschnitten - der Prueflauf sah nichts, weil die SEKTION beschneidet und nicht die Ueberschrift. Deshalb: Trennung erlauben und im Notfall mitten im Wort brechen. Das gilt nur fuer `.rechtstext`, nicht fuer die Ueberschriften der Seite - dort sind die Woerter von uns und passen. */ .rechtstext { max-width: 74ch; overflow-wrap: break-word; hyphens: auto; } .rechtstext h2, .rechtstext h3, .rechtstext h4 { overflow-wrap: anywhere; hyphens: auto; } .rechtstext h2 { font-size: clamp(22px, 3.4vw, 40px); margin: 1.6em 0 0.5em; line-height: 1.08; } .rechtstext h2:first-child { margin-top: 0; } .rechtstext p + p { margin-top: 1em; } .rechtstext ul { margin: 1em 0 0 1.2em; } .rechtstext li { margin-bottom: 0.4em; } /* 404 */ .fehlerseite { min-height: 52vh; display: grid; align-content: center; } /* Druck: Flaechen und Deko raus */ @media print { .cta-leiste, .kopf, .menue, .blob, .einbettung { display: none !important; } body { background: #fff; color: #000; } .sek { padding: 12px 0; background: none !important; } } /* ---------- 14 Karte: Kennzeichen, Groessen, Umschalter ------------------ */ /* Kennzeichen stehen als Wort da, nicht als Symbol - Information darf nie allein ueber ein Bild oder eine Farbe laufen. */ .karte-zeile__kennz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .kennz { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid var(--navy); border-radius: var(--r-rund); padding: 2px 9px; white-space: nowrap; display: inline-block; cursor: help; } /* 09.10.2026: Allergene als ausgeschriebene Woerter unter der Zutatenzeile, und Add-ons/Aufpreise (art: "extra") kleiner und ohne Trennlinie zum Gericht darueber - sie gehoeren zu ihm, sind kein eigenes Gericht. */ .karte-zeile__allergene { display: block; margin-top: 4px; font-size: 14px; font-style: italic; line-height: 1.4; } .karte-zeile--extra { padding: 4px 0 14px; gap: 4px 16px; } .karte-zeile--extra .karte-zeile__name { font-size: 15px; letter-spacing: 0; line-height: 1.3; } .karte-zeile--extra .karte-zeile__info { margin-top: 1px; } .karte-zeile--extra .karte-zeile__preis { font-size: 17px; letter-spacing: 0; } .karte-zeile--folge .karte-zeile__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .karte-liste .karte-zeile:has(+ .karte-zeile--extra) { border-bottom: 0; padding-bottom: 10px; } .karte-liste .karte-zeile--extra:has(+ .karte-zeile--extra) { border-bottom: 0; padding-bottom: 4px; } /* 09.10.2026: Karte 1:1 wie gedruckt - Allergen-Buchstaben hochgestellt, Preis und Hinweis in der Kategoriezeile (Saefte, Weine, Hot Drinks), Legende/Zahlungshinweis unter der Karte. */ .allerg { font-size: 0.62em; line-height: 0; vertical-align: super; margin-left: 1px; font-weight: 500; } .gruppe__preis { font-size: var(--fs-preis); font-weight: 700; color: var(--navy); letter-spacing: -0.03em; white-space: nowrap; margin-left: auto; } .gruppe__hinweis { flex-basis: 100%; font-size: var(--fs-body-s); margin-top: 6px; } .gruppe + .gruppe--ohne-titel { margin-top: 0; } .gruppe--ohne-titel .karte-liste { border-top: 0; } .karte-fussnote { font-size: var(--fs-body-s); margin-top: clamp(20px, 3vw, 32px); max-width: 70ch; } /* Mehrere Groessen (Saefte, Wein, Kaffee) */ .karte-zeile__groessen { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; justify-content: flex-end; } .groesse { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .groesse__name { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; } .groesse__preis { font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; } .karte-block + .karte-block { margin-top: clamp(56px, 9vw, 110px); } .gruppe__kopf--klein { margin-bottom: clamp(12px, 2vw, 18px); } /* Umschalter Essen / Getraenke. Reine Sprungmarken - beide Karten stehen auf derselben Seite im Markup und sind auch ohne JavaScript lesbar. */ .karten-wahl { display: flex; flex-wrap: wrap; gap: 10px; } .karten-wahl a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border: 2px solid var(--navy); border-radius: var(--r-rund); font-weight: 700; font-size: 17px; transition: background var(--uebergang), color var(--uebergang); } .karten-wahl a:hover { background: var(--navy); color: var(--creme); } /* ---------- 15 Mobil-Feinschliff ---------------------------------------- */ @media (max-width: 620px) { /* Hero: Marke und Positionierung als zwei erkennbare Bloecke, nicht als vier gleichwertige Zeilen. Der line-height-Wert steht weiter unten in diesem Block bei den uebrigen Ueberschriften. */ /* Buttons untereinander auf voller Breite - sonst fransen sie rechts aus, weil jeder nur so breit ist wie sein Text. */ .btn-reihe--hero { flex-direction: column; align-items: stretch; } .btn-reihe--hero .btn { width: 100%; } /* Handgrafik: kleiner und naeher am Text, statt isoliert im Leerraum. */ /* Mobil sitzt die Hand mittig im Feld - kein Versatz, weil das Feld dort die ganze Breite fuellt und es kein Danebenliegen gibt. */ .hero__kreis { max-width: 68vw; margin: 0 auto; justify-self: center; } .hero .raster { gap: clamp(14px, 3vw, 24px); } /* Anfrage-Leiste: Titel und Pfeil in einer Zeile, Zusatz darunter. 🔴 02.09.2026 REPARIERT. Vorher stand hier `flex-wrap: nowrap` zusammen mit `flex-basis: 100%` auf dem Zusatz - das widerspricht sich: bei nowrap gibt es nur EINE Flex-Zeile, der Zusatz kann also gar nicht nach unten umbrechen. Gemessen bei 390 px: der Zusatz nahm 309 px der Zeile, der Titel wurde durch `flex: 1` + `min-width: 0` auf **0 px** gequetscht und sein Text (137 px) quoll quer ueber den Zusatz. Auf dem Handy lag „online oder telefonisch" mitten in „Tisch reservieren". `wrap` + `flex: 1 1 auto` behebt beides: der Titel schrumpft nur bis zu seiner Inhaltsbreite, der Zusatz bekommt seine eigene Zeile. */ .ziele a { flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .ziele__titel { flex: 1 1 auto; min-width: 0; line-height: 1.08; } .ziele__zusatz { order: 3; flex: 0 0 100%; font-size: 15px; margin-top: 4px; } .ziele__pfeil { flex: 0 0 auto; margin-left: auto; } /* Ueberschriften brechen mobil mehrzeilig - mit `line-height` unter 1.0 laufen die Zeilen dann ineinander. Gemessen am 02.09.2026 bei 375 und 390 px: 9,3 px bei .t-h2, 11 px bei --l, 12,1 px bei --xl, 6,7 px bei den Seiten-H1, 5 px bei den Kartennamen. Sichtbar geworden ist es auf `/deli/`: „Das Deli macht / schon um sieben auf." klebte aneinander. 1.14 ist kein Zufallswert - der Hausstil gibt fuer Headlines 1.1 bis 1.2 vor, die alten 0.96 bis 0.98 lagen also DARUNTER. Dolego hat kraeftige Ober- und Unterlaengen und braucht die Luft, sobald eine Zeile umbricht. Am Desktop bleiben die engen Werte: dort sind die Ueberschriften einzeilig und das dichte Setzen ist die Design-Signatur. */ .t-h1 { line-height: 1.12; } .t-h2, .t-h2--s { line-height: 1.14; } .t-h3 { line-height: 1.14; } .karte-zeile__name { line-height: 1.08; } } @media (max-width: 400px) { /* Die Marke darf nicht umbrechen. */ .t-h1 { font-size: clamp(34px, 9.6vw, 44px); } } /* Eingabefelder nie unter 16 px - sonst zoomt iOS beim Antippen hinein. */ .feld input, .feld select, .feld textarea { font-size: max(16px, 17px); } /* Fieldset ohne Rahmen und seine Legende - ersetzt zwei Inline-styles. */ .feld--blank { border: 0; padding: 0; margin: 0; } .feld__legende { font-size: 15px; font-weight: 700; padding: 0; margin-bottom: 6px; } /* Der Einzug fuer Zeilen ohne Bild ist am 09.09.2026 entfallen: in der Kartenausgabe gibt es keine Bilder mehr (Kundenwunsch), also gibt es auch keine Kante, an der etwas ausgerichtet werden muesste. Ein Einzug von 100 px ohne Bild davor waere eine Einrueckung ohne Grund. `.karte-zeile__bild` bleibt im Stylesheet - der Anreisser auf der Startseite benutzt die Klasse weiter. */ /* ---------- 15b Hero-Wortmarke ------------------------------------------ */ /* Das „mela" in der H1 war vom 02.09. bis zum 18.09.2026 das echte Logo als Bild, nicht Dolego gesetzter Text (damals Auftrag Filip). Am 18.09.2026 wieder zurueck zu lebendem Text (Filip: „wie auf der anderen Website") - die H1 setzt h1-h4 ohnehin schon auf Dolego (siehe 03 Grundlagen), also erbt der Span das automatisch. Keine neue Lizenzfrage dadurch: Dolego laeuft als Webfont bereits sitewide in jeder Ueberschrift, ein Wort mehr aendert an der offenen Lizenzfrage oben (01 Schriften) nichts. Der Spruch steht darunter. Die Hoehe haengt in `em` an der H1-Groesse - damit skaliert die Wortmarke ueber die ganze clamp-Skala genau so mit wie der Text darunter, ohne eine zweite Groessenskala zu erfinden. */ .hero__logo { display: block; margin-bottom: 0.14em; } /* Die Wortmarke fuehrt, der Spruch ist ihr Untertitel. Beide haengen in `em` an der H1-Groesse, skalieren also ueber die ganze clamp-Skala zusammen. 1.15em Wortmarke gegen 0.7em Spruch, gleiche Verhaeltnisse wie vorher beim Bild - Nebeneffekt: der Spruch passt bei 1440 px weiter auf EINE Zeile. */ .hero__logo--text { /* Das einzige Element in Dolego (Filip 23.09.2026). Die H1 drumherum steht auf Figtree 700 - Familie, Gewicht und Stil muessen hier deshalb ausdruecklich zurueck, sonst rechnet der Browser Dolego fett. */ font-family: var(--logo); font-weight: 400; font-style: normal; font-size: 1.15em; line-height: 0.9; color: var(--navy); } /* Der Spruch steht seit 04.09.2026 in Figtree, nicht in Dolego (Filip: „brunch, breakfast and events in der normalen schrift"). Dolego bleibt den Ueberschriften. 700 und -0.03em sind kein Zufall: Figtree braucht bei dieser Groesse Gewicht und enges Tracking, sonst liest es sich wie Flieszlext - dasselbe Muster wie .t-h4, .ziele__titel und .karte-zeile__name. Die H1 gibt font-weight 400 vor, das muss hier ueberschrieben werden. 0.68em statt der 0.7em, die der Dolego-Spruch hatte: Figtree laeuft breiter als das schmale Dolego. Gemessene Textbreite bei 0.68em - 1440 px: 1028 von 1200 px Platz (14 % Reserve), 375 px: 306 von 343 px (11 %). Einzeilig von 375 bis 1920 px. Gemessen 04.09.2026. (Korrektur zur ersten Messung an diesem Tag: dort waren 0 % Reserve gemeldet - gemessen war aber die BLOCKBREITE des span, nicht die Textbreite. Der span ist `display: block` und fuellt den Container immer voll aus. Fuer eine Umbruchfrage zaehlt nur die Textbreite.) */ .hero__spruch { display: block; font-family: var(--text-font); /* Die Startseite ist die Ausnahme vom Auftrag 08.09.2026: der Hero-Spruch bleibt in Figtree aufrecht (Filip 04.09.2026), nur die H2 der Startseite tragen die Display-Schrift. `normal` nimmt die Kursive der h1-Regel zurueck - sonst rechnet der Browser Figtree schraeg. */ font-style: normal; font-weight: 700; font-size: 0.68em; letter-spacing: -0.03em; line-height: 1.05; } /* ACHTUNG Reihenfolge: dieser Abschnitt steht in der Datei HINTER dem Mobil-Feinschliff (Abschnitt 15). Eine Logo-Regel dort oben verliert gegen die Basis-Regel hier - deshalb steht der Mobil-Wert hier unten. Grund: mobil faellt die H1 auf 36 px und das Logo damit auf 119 px Breite, also 32 % des Bildschirms. Zu klein fuer den ersten Eindruck auf dem Handy. Gemessen am 02.09.2026. */ @media (max-width: 620px) { .hero__logo img { height: 1.8em; } } /* Ohne das faellt „Kuchen." als einzelnes Wort in die zweite Zeile. `balance` bricht stattdessen am Komma, also an der Zaesur des Satzes. */ .hero .t-sub { text-wrap: balance; } /* ---------- Tagesleiste „Brunch & more" (19.09.2026) -------------------- */ /* Vier Karten nebeneinander, Bild oben, Text darunter - die Reihe aus dem Erstentwurf. Sie laeuft absichtlich ueber die Container-Breite hinaus bis an den Bildschirmrand: eine Karte, die am Rand angeschnitten ist, sagt „hier geht es weiter" und spart eine Bedienhilfe. Gewischt statt festgehalten: kein `position: sticky`, kein Eingriff ins Scrollen der Seite. Begruendung steht in inhalt_start.py an der Sektion. */ .tagesleiste { list-style: none; /* Die Sektion polstert schon mit --sek-x; der negative Aussenabstand nimmt das zurueck, damit die Reihe bis an den Bildschirmrand laufen darf, und der eigene Innenabstand setzt den Textbeginn neu. */ margin-inline: calc(-1 * var(--sek-x)); margin-block: 0; padding: 4px var(--sek-x) 22px; display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; /* `scroll-snap-align: start` richtet die Karte an der Scroll-Startkante aus - und die kennt nur `scroll-padding`, nicht `padding`. Ohne die naechste Zeile rastet die erste Karte am Bildschirmrand ein und der Innenabstand wird weggescrollt: die Leiste stand beim Laden schon 120 px verschoben, die erste Karte klebte links an der Kante statt unter dem „B" von „Brunch" (gemessen 19.09.2026). */ scroll-padding-inline: var(--sek-x); /* Die Leiste liegt ueber den Zierformen der Sektion. */ position: relative; z-index: 2; /* Rollbalken nur zeigen, wenn das System ihn ohnehin einblendet. */ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--navy) 30%, transparent) transparent; } /* Ueber der Container-Breite zentrieren, damit die Reihe zur Ueberschrift passt und trotzdem bis zum Rand laufen darf. */ /* Ab der Breite, bei der der 1200er-Container Luft an den Seiten hat, faengt die erste Karte genau unter dem „B" von „Brunch" an. Gerechnet ueber `100%` (= Innenbreite der Sektion), nicht ueber `vw`: vw zaehlt den Rollbalken mit und schoebe die Karten um dessen Breite nach links. */ @media (min-width: 1312px) { .tagesleiste { padding-inline: calc((100% + 2 * var(--sek-x) - var(--breite)) / 2); scroll-padding-inline: calc((100% + 2 * var(--sek-x) - var(--breite)) / 2); } } .tageskarte { flex: 0 0 clamp(250px, 26vw, 340px); scroll-snap-align: start; /* Weiss ist auf dieser Seite sonst nirgends Flaeche - hier kommt es aus dem Erstentwurf, wo die Tageskarten weiss auf Creme standen. Navy auf Weiss traegt 11,0 : 1, also besser als die 9,45 : 1 auf Creme. */ background: #fff; border-radius: var(--r-karte-gross); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 26px 60px -38px var(--navy-schatten); } .tageskarte__bild { aspect-ratio: 1 / 1; overflow: hidden; background: var(--rose); } .tageskarte__bild img, .tageskarte__bild picture { width: 100%; height: 100%; display: block; } .tageskarte__bild img { object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.25, 1); } .tageskarte:hover .tageskarte__bild img { transform: scale(1.05); } .tageskarte__text { padding: 22px 24px 26px; } /* Die Stundenziffer ist in der Karte kleiner als in der alten Zeilenform - dort trug sie eine ganze Bildschirmbreite, hier 340 px. */ .tageskarte__ziffer { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; margin-bottom: 4px; } @media (prefers-reduced-motion: reduce) { .tageskarte__bild img { transition: none; } .tageskarte:hover .tageskarte__bild img { transform: none; } } @media (max-width: 700px) { .tageskarte { flex-basis: 78vw; } .tagesleiste { padding-bottom: 14px; } } /* ---------- Hero im Stil des Erstentwurfs (19.09.2026) ------------------ */ /* Auftrag Filip 19.09.2026: „die komplette Optik der Startseite" aus `Vorschau_Mela_FARU.html` (13.07.2026) zurueckholen - EINE Ausnahme, das Foto oben bleibt draussen: „das Einzige, was wir nicht brauchen, ist dieses Startbild ganz oben. Da reicht einfach die Mela-Ueberschrift". Damit bleibt auch die Kundenentscheidung vom 18.09. (Hero ohne Bild) unangetastet - der Hero wird nur gross, mittig und ruhig. Was aus dem Entwurf uebernommen ist: volle Bildschirmhoehe, alles zentriert, die Wortmarke als groesstes Element der Seite, die Unterzeile gesperrt in Versalien, ein Scrollhinweis unten, und das Zusammenziehen beim Herunterscrollen. Was bewusst ANDERS ist als im Entwurf: dort war der Hero 250 vh hoch und klebte fest (`position: sticky`), damit der Effekt ueber zweieinhalb Bildschirme laeuft. Hier ist er genau EINEN Bildschirm hoch. Der Effekt sieht gleich aus, kostet aber keine anderthalb Bildschirme Leerlauf, bevor der erste Inhalt kommt - bei einem Gastrobetrieb suchen die meisten Besucher Oeffnungszeiten und Karte, nicht Kino. Der Scrollhinweis pulsiert NICHT (im Entwurf tat er das: `animation: cue 1.9s infinite`). Eine Bewegung, die von allein startet und laenger als 5 Sekunden laeuft, braucht nach WCAG 2.2.2 (Stufe A) einen sichtbaren Pausenschalter. Ein Pausenschalter fuer einen 34-px-Strich waere mehr Bedienteil als Wirkung - also steht der Strich still. Das Wabbeln der Formen faellt nicht darunter: es startet nur unter dem Mauszeiger und kommt von selbst zur Ruhe. */ .hero { /* Eine Bildschirmhoehe MINUS Kopfleiste: die Leiste klebt oben (`position: sticky`) und steht ueber dem Hero, nicht davor. Ohne den Abzug reichte der Hero genau um die Leistenhoehe unter die Bildschirmkante - die Form unten links wurde dadurch glatt abgeschnitten (gesehen im Screenshot vom 19.09.2026). Zwei Pixel Rahmen der Leiste kommen dazu. */ min-height: calc(100svh - var(--header-h) - 2px); display: grid; align-content: center; justify-items: center; text-align: center; padding-block: clamp(64px, 10vh, 112px) clamp(104px, 16vh, 168px); } /* Der Kopfbereich liegt ueber dem Hero - ohne den Abzug rutscht die Wortmarke optisch zu tief unter die Mitte. */ .hero { position: relative; } .hero > .inhalt { width: 100%; } .hero .inhalt > div { margin-inline: auto; } /* Die Wortmarke ist das groesste Element der Seite. Der Entwurf hatte sie als Bild mit `width: min(46vw, 520px)`; hier ist sie lebender Dolego-Text (seit 18.09.2026), die Breite kommt also ueber den Schriftgrad. 16vw trifft bei 1440 px Fensterbreite dieselben ~520 px. */ .hero .t-h1 { font-size: clamp(2.6rem, 5.2vw, 4.1rem); } .hero__logo { margin-bottom: 0.1em; } .hero__logo--text { font-size: clamp(4.8rem, 16vw, 14rem); line-height: 0.86; letter-spacing: -0.03em; } /* 08.10.2026: Wortmarke als SVG statt Dolego-Text. Hoehe = Schriftgrad x 0.731 (Buchstabenhoehe der Glyphen bezogen auf 1 em), Abstaende gegen Screenshots des alten Textes auf 390 und 1440 px nachgemessen (gleiche Lage, gleicher Abstand zum Spruch). */ .hero__logo--bild { display: block; height: calc(clamp(4.8rem, 16vw, 14rem) * 0.731); width: auto; margin: calc(clamp(4.8rem, 16vw, 14rem) * -0.03) auto calc(clamp(4.8rem, 16vw, 14rem) * 0.185 + 0.1em); color: var(--navy); overflow: visible; } /* Unterzeile: im Entwurf gesperrt in Versalien, klein, ruhig - der Gegenpol zur grossen Wortmarke. Ersetzt fuer die Startseite die enge, fette Fassung vom 04.09.2026; im DOM steht der Text weiter klein geschrieben, die Versalien macht das Stylesheet. */ .hero__spruch { font-size: clamp(0.875rem, 1.5vw, 1.04rem); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.5; /* Der Sperrsatz haengt rechts eine Luecke an - die halbe Sperrung zurueckgeben, sonst steht die Zeile sichtbar links von der Mitte. */ margin-inline-start: 0.3em; } .hero .t-sub { max-width: 22em; margin-inline: auto; } .hero .btn-reihe--hero { justify-content: center; } /* Scrollhinweis: steht still, siehe Begruendung oben. */ .hero__weiter { position: absolute; left: 50%; bottom: clamp(20px, 4vh, 40px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; /* 78 % Navy, nicht weniger: bei 58 % stand der Hinweis auf 3,18 : 1 und damit unter den 4,5 : 1, die 11-px-Text braucht (axe-core, gemessen 19.09.2026). 78 % ergibt 5,2 : 1. */ color: color-mix(in srgb, var(--navy) 78%, var(--creme)); } .hero__weiter i { display: block; width: 1px; height: 34px; background: linear-gradient(color-mix(in srgb, var(--navy) 55%, transparent), transparent); } /* Das Zusammenziehen beim Scrollen. mela.js setzt --hero-weg von 0 bis 1, sobald die Seite laeuft; ohne JS bleibt der Hero einfach stehen. */ .hero__bewegt { transform: translateY(calc(var(--hero-weg, 0) * -58px)) scale(calc(1 - var(--hero-weg, 0) * 0.13)); opacity: calc(1 - var(--hero-weg, 0) * 1.15); will-change: transform, opacity; } .hero__weiter { opacity: calc(1 - var(--hero-weg, 0) * 2.2); } /* 12.10.2026: mela.js blendet den durchgescrollten Hero mit visibility:hidden aus. Damit verschwand auch die einzige h1 der Startseite fuer Vorleseprogramme. Die h1 bleibt deshalb sichtbar im Sinne der Technik - optisch ist sie bei --hero-weg 1 ueber die Deckkraft ohnehin weg. */ .hero h1.hero__bewegt { visibility: visible; pointer-events: none; } /* 12.10.2026 (Filip): Vorzeile in der Deli-Ueberschrift der Startseite - Aufzaehlung klein darueber, Aussage gross darunter, beides eine h2. */ .h2-vorzeile { display: block; max-width: none; margin-bottom: 18px; } .h2-vorzeile .nobr { white-space: nowrap; } /* 12.10.2026: kleines Logo nur auf der Startseite aus (dort steht das grosse). */ .kopf__marke--aus { visibility: hidden; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hero__bewegt { transform: none; opacity: 1; } .hero__weiter { opacity: 1; } } /* Auf kleinen Schirmen ist eine volle Bildschirmhoehe fuer vier Zeilen zu viel Luft - und die Adressleiste des Handybrowsers frisst zusaetzlich. Deshalb dort nur so hoch wie noetig. */ @media (max-width: 620px) { .hero { min-height: calc(86svh - var(--header-h)); padding-block: clamp(44px, 8vh, 72px) clamp(40px, 7vh, 64px); } .hero__logo--text { font-size: clamp(4.2rem, 27vw, 7.5rem); } .hero__logo--bild { height: calc(clamp(4.2rem, 27vw, 7.5rem) * 0.731); margin-block: calc(clamp(4.2rem, 27vw, 7.5rem) * 0.046) calc(clamp(4.2rem, 27vw, 7.5rem) * 0.188 + 0.1em); } .hero__spruch { letter-spacing: 0.22em; } } /* Lage und Groesse der vier Hero-Formen (19.09.2026, zweiter Anlauf). Jetzt aus dem Entwurf gerechnet statt geschaetzt. Dort liegen die vier Blobs in einer bildschirmfuellenden Ebene mit dem Koordinatenraum 1000 x 1000, cover-skaliert: Ecke Mitte (cx/cy) Radius Form Farbe oben links 90 / 165 190 spike #CDE2F5 oben rechts 940 / 110 235 palette #FADCDE unten links 130 / 715 165 flower #E9F0CE unten rechts 965 / 820 195 palette #FDF0F2 Auf einem 1440 x 900 grossen Fenster ergibt das (Skalierung 1,44) Durchmesser von 547, 677, 475 und 562 px - oben rechts ist also die groesste Form, unten links die kleinste. Genau dieses Groessenverhaeltnis steht unten; die Ecklagen sind so gewaehlt, dass die Formen wie im Entwurf aus den Ecken hereinragen. Die Sektion ist genau eine Bildschirmhoehe hoch. Dadurch faellt ihre Kante mit der Bildschirmkante zusammen, und die Formen duerfen hier - anders als in jeder anderen Sektion - auch oben und unten hinauslaufen, ohne dass eine sichtbare Schnittkante entsteht. */ .hero .form[data-gr="hero-ol"] { --fb: clamp(300px, 38vw, 560px); left: calc(-0.26 * var(--fb)); top: calc(-0.30 * var(--fb)); } .hero .form[data-gr="hero-or"] { --fb: clamp(340px, 47vw, 690px); right: calc(-0.30 * var(--fb)); top: calc(-0.38 * var(--fb)); } .hero .form[data-gr="hero-ul"] { --fb: clamp(260px, 33vw, 480px); left: calc(-0.22 * var(--fb)); bottom: calc(-0.26 * var(--fb)); } .hero .form[data-gr="hero-ur"] { --fb: clamp(300px, 39vw, 570px); right: calc(-0.24 * var(--fb)); bottom: calc(-0.34 * var(--fb)); } .hero .form[data-gr^="hero-"] { width: var(--fb); } /* Mobil bleiben nur zwei Formen stehen. Auf 390 px Breite verdeckten vier Formen den Scrollhinweis und liefen dem Text in die Zeilen (gesehen im Screenshot vom 19.09.2026). Der Entwurf hatte dasselbe Problem nicht - er war eine Desktop-Vorfuehrung. */ @media (max-width: 700px) { .hero .form[data-gr="hero-or"], .hero .form[data-gr="hero-ur"] { display: none; } .hero .form[data-gr="hero-ol"] { --fb: 84vw; left: calc(-0.40 * var(--fb)); top: calc(-0.26 * var(--fb)); } .hero .form[data-gr="hero-ul"] { --fb: 70vw; left: calc(-0.30 * var(--fb)); bottom: calc(-0.20 * var(--fb)); } } /* Der Scrollhinweis steht IMMER ueber den Formen - `.inhalt` traegt zwar z-index 2, aber der Hinweis soll auch auf einer Form lesbar bleiben. Die Farbe wird deshalb kraeftiger als der Zierton darunter. */ .hero__weiter { z-index: 3; } /* ---------- 16 Bewegung ------------------------------------------------- */ /* Uebertragen aus dem Il-Colosseo-Bau (dort Abschnitt 16), umgesetzt in Mela-Farben. Bewusst NUR drei Sachen - der Hero steigt gestaffelt ein, die Fotos atmen, die Trennlinien ziehen sich auf. Kein Dunkelgrund, kein Vollbild-Foto-Hero: das waeren Colosseos Farben, nicht Melas. Animiert wird ausschliesslich `opacity` und `transform`. Kurve ist dieselbe wie beim Reveal in Abschnitt 09 - eine Seite, eine Bewegungssprache. */ :root { --kurve-auf: cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Ken Burns auf den Sektionsbildern. AUSGESCHALTET am 03.09.2026 auf Kundenwunsch „cleaner" - der Schalter steht weiter unten in diesem Abschnitt. Am 02.09.2026 war es auf Filips Auftrag „nicht crazy genug" eingebaut worden; der Kundenwunsch ueberstimmt das. Sieben gleich grosse Bilder bleiben nicht gleich gross, wenn jedes fuer sich zoomt - der Zoom zerstoert genau den Rhythmus, um den es in dieser Runde geht. */ @keyframes atmen { from { transform: scale(1.03); } to { transform: scale(1.11); } } /* Hero-Einstieg in ZWEI Stufen statt fuenf: auf-1 ist die Wortmarke mit dem Spruch, auf-2 alles uebrige. Der Hero-Container traegt deshalb kein [data-reveal] - sonst blendet die Huelle ein und die Kinder staffeln innerhalb einer Flaeche, die schon fertig da ist. */ .auf-1 { animation: auf 0.30s 0.04s ease-out both; } .auf-2 { animation: auf 0.28s 0.18s ease-out both; } /* Ken-Burns auf den Sektionsbildern (8 Bilder: Startseite 4, brunch-cafe, business-lunch, deli, reservierung je 1). Ausgeschaltet 03.09.2026, Kundenwunsch „cleaner". Zurueckholen: die folgende Zeile einkommentieren. */ /* .sekbild img { animation: atmen 26s ease-in-out infinite alternate; } */ /* Die Trennlinien der Anfrage-Leiste ziehen sich auf, sobald die Sektion ins Bild kommt. Das ist Bewegung mit Zweck: der Blick laeuft in das Verkaufsherz hinein, von links nach rechts, in Leserichtung. FALLE: die Staffelung MUSS auf `li:nth-child(n) a`, nicht auf `a:nth-child(n)`. Die Links sitzen je in einem eigenen
  • , sind dort also alle das erste Kind - `a:nth-child(1)` trifft alle vier auf einmal und `nth-child(2)` bis `(4)` gar keinen. Gemessen am 02.09.2026. */ /* FALLE, gefunden 03.09.2026: .ziele::before ist absolut positioniert, die Liste selbst war aber `static` - die Oberlinie suchte sich .inhalt als Bezug und lag damit ueber der Ueberschrift statt ueber der ersten Zeile. Sichtbar wurde es erst, als aus dem kleinen Eyebrow eine 108-px-H2 wurde. */ .ziele { border-top: 0; position: relative; } .ziele a { border-bottom: 0; position: relative; } .ziele::before, .ziele a::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--linie); transform-origin: left; } .ziele::before { top: 0; } .ziele a::after { bottom: 0; } /* WICHTIG: nur solange die Sektion noch NICHT sichtbar ist. Ohne das `:not(...)` bleibt scaleX(0) auch danach die Basis, und die Trennlinien haengen komplett an der Animation - laeuft sie nicht (Tab im Hintergrund, Animation abgebrochen), ist die Linie dauerhaft WEG. Vorher waren es feste Border, das darf kein Rueckschritt werden. */ .js [data-reveal]:not([data-sichtbar="ja"]) .ziele::before, .js [data-reveal]:not([data-sichtbar="ja"]) .ziele a::after { transform: scaleX(0); } .js [data-reveal][data-sichtbar="ja"] .ziele::before { animation: ziehen 0.42s 0s ease-out both; } .js [data-reveal][data-sichtbar="ja"] .ziele li:nth-child(1) a::after { animation: ziehen 0.42s 0.10s ease-out both; } .js [data-reveal][data-sichtbar="ja"] .ziele li:nth-child(2) a::after { animation: ziehen 0.42s 0.20s ease-out both; } .js [data-reveal][data-sichtbar="ja"] .ziele li:nth-child(3) a::after { animation: ziehen 0.42s 0.30s ease-out both; } /* Pflicht, nicht Kür: wer Bewegung abbestellt hat, bekommt die fertige Seite. */ @media (prefers-reduced-motion: reduce) { .auf-1, .auf-2, .sekbild img, .ziele::before, .ziele a::after, .js [data-reveal][data-sichtbar="ja"] .ziele::before, .js [data-reveal][data-sichtbar="ja"] .ziele a::after { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ========================================================================== Kundenrunde 23.09.2026 (Filip, sechs Fotos) ========================================================================== */ /* Mini-Ueberschriften: normale Schrift, in Grossbuchstaben und gesperrt - dieselbe Machart wie „BRUNCH, BREAKFAST AND EVENTS" im Hero. Das ist der Teil „teilweise in Grossbuchstaben": die grossen Ueberschriften bleiben normal geschrieben, die kleinen Zeilen darueber stehen in Versalien. */ .t-eyebrow, .seite--karte .t-h3 { font-family: var(--text-font); font-style: normal; font-weight: 600; font-size: clamp(14px, 1.05vw, 15px); line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; } /* Hero: die Formen unten laufen in die naechste Sektion weiter, statt an der Sektionskante abgeschnitten zu werden (Filip: „sieht aus, als ob die Seite da endet"). Seitlich bleibt der Schnitt, sonst waechst die Seite in die Breite. Die Formen tragen z-index 1, Ueberschrift und Karten der Folgesektion z-index 2 - sie liegen also immer ueber der Form. */ .hero.sek.sek--formen { overflow-x: clip; overflow-y: visible; } /* „Brunch & more": vier Karten, kleiner, mittig, alles auf einen Blick - kein seitliches Wischen mehr. Handy: zwei mal zwei. */ #tag-titel { text-align: center; } .tagesleiste { display: grid; grid-template-columns: repeat(4, minmax(0, 250px)); justify-content: center; gap: clamp(14px, 1.8vw, 24px); margin-inline: 0; padding: 4px 0 22px; overflow: visible; scroll-snap-type: none; } @media (min-width: 1312px) { .tagesleiste { padding-inline: 0; scroll-padding-inline: 0; } } .tageskarte { flex: none; min-width: 0; } .tageskarte__text { padding: 18px 20px 22px; } .tageskarte .t-h3 { font-size: clamp(20px, 1.9vw, 26px); } @media (max-width: 1099px) { .tagesleiste { grid-template-columns: repeat(2, minmax(0, 300px)); } } @media (max-width: 700px) { .tagesleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 8px; } .tageskarte { flex-basis: auto; } .tageskarte__bild { aspect-ratio: 4 / 3; } .tageskarte__text { padding: 12px 12px 16px; } .tageskarte .t-h3 { font-size: 18px; } .tageskarte__ziffer { font-size: 1.5rem; } .tageskarte .station__text { font-size: 14px; line-height: 1.4; } } /* Catering: die drei Knoepfe stehen auf einer Hoehe - der Text waechst, der Knopf sitzt immer unten in der Karte. */ .karte--paket { display: flex; flex-direction: column; align-items: flex-start; } .karte--paket .btn { margin-top: auto; } /* Hero: Unterzeile und Spruch in derselben Schrift UND demselben Gewicht (Filip 23.09.2026, Foto 1). Groesse und Versalien bleiben verschieden. */ .hero__spruch { font-weight: 600; } /* Handy: der Link in den Karten war groesser als der Kartentext. */ @media (max-width: 700px) { .tageskarte .link-unter { font-size: 15px; } } /* ---------- „Brunch & more" – Variante C (07.10.2026) ------------------- Filip hat aus vier Entwuerfen C gewaehlt: grosses Foto, der Text sitzt auf einem Creme-Etikett im Bild, die ganze Karte ist der Link (vorher nur der unterstrichene Text, und die Links standen je nach Textlaenge unterschiedlich hoch). Desktop: vier nebeneinander. Handy: eine Karte pro Bildschirm, die naechste schaut 20 % rein und sagt „wischen" - ohne Punkte-Leiste, damit kein zusaetzliches Skript noetig ist. Ueberschreibt alle frueheren .tagesleiste-/.tageskarte-Regeln oben. */ .tagesleiste { display: grid; grid-template-columns: repeat(4, minmax(0, 290px)); justify-content: center; gap: clamp(14px, 1.6vw, 22px); margin: 0; padding: 4px 0 22px; overflow: visible; scroll-snap-type: none; } .tageskarte { flex: none; min-width: 0; background: none; border-radius: var(--r-karte-gross); overflow: visible; box-shadow: 0 26px 60px -38px var(--navy-schatten); } .tageskarte__link { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-karte-gross); overflow: hidden; color: var(--navy); text-decoration: none; background: var(--rose); isolation: isolate; } .tageskarte__bild, .tageskarte__bild picture { position: absolute; inset: 0; display: block; aspect-ratio: auto; background: none; } .tageskarte__bild img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.25, 1); } .tageskarte__link:hover .tageskarte__bild img { transform: scale(1.05); } .tageskarte__uhr { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--creme); border-radius: var(--r-rund); padding: 5px 12px; font-size: 14px; font-weight: 700; line-height: 1.3; } .tageskarte__etikett { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: flex; align-items: center; gap: 12px; background: var(--creme); border-radius: calc(var(--r-karte-gross) - 8px); padding: 14px 14px 14px 18px; } .tageskarte__text { flex: 1; min-width: 0; padding: 0; } .tageskarte__titel { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; } .tageskarte__satz { font-size: 15px; line-height: 1.35; margin: 4px 0 0; } .tageskarte__pfeil { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--creme); font-size: 19px; transition: transform var(--uebergang); } .tageskarte__link:hover .tageskarte__pfeil { transform: translateX(3px); } .tageskarte__link:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; } @media (max-width: 1099px) { .tagesleiste { grid-template-columns: repeat(2, minmax(0, 340px)); } } /* Handy: wischen statt Raster. Die Leiste laeuft bis an den Bildschirmrand (die Sektion schneidet dort ab), Einrasten pro Karte. */ @media (max-width: 700px) { .tagesleiste { display: flex; /* Ohne das zentriert flex die ueberstehende Leiste - die erste Karte laege dann links ausserhalb, unerreichbar (beim Pruefen gemessen). */ justify-content: flex-start; gap: 12px; margin-inline: calc(-1 * var(--sek-x)); padding: 4px var(--sek-x) 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sek-x); scrollbar-width: none; } .tagesleiste::-webkit-scrollbar { display: none; } .tageskarte { flex: 0 0 80%; scroll-snap-align: start; box-shadow: none; } .tageskarte__satz { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .tageskarte__bild img, .tageskarte__pfeil { transition: none; } .tageskarte__link:hover .tageskarte__bild img, .tageskarte__link:hover .tageskarte__pfeil { transform: none; } } /* ---------- 08.10.2026 Pruefrunde vor dem Livegang ------------------------ Gemessen mit axe-core + eigenem Lauf (13 Seiten, 390 und 1280 px): - Klickziele unter 24 px (WCAG 2.2, 2.5.8): Fussbereich-Links, Brotkrumen, Ankreuzfelder Catering. Links mitten im Satz sind nach 2.5.8 ausgenommen. - Kleinste Schrift lag bei 11-12 px (Versalien-Zeilen, Speisekarten- Kennzeichnung, Fusstitel). Zielgruppe 55+: Untergrenze jetzt 13 px fuer gesperrte Versalien, 14 px fuer alles andere. - Datumsfelder zeigten beim Tabben keinen Fokusrahmen (Chrome fokussiert das Teilfeld, :focus-visible greift am Feld selbst nicht). */ .fuss__links a { display: inline-flex; align-items: center; min-height: 28px; } .brotkrumen a { display: inline-flex; align-items: center; min-height: 24px; } /* 12.10.2026: .feld input (min-height 54px) griff auch hier - das Kaestchen sass eine halbe Zeile unter seinem Text. */ .wahl__zeile input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0; } input[type="date"]:focus, input[type="date"]:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; } .auf-bordeaux input[type="date"]:focus, .sek--bordeaux input[type="date"]:focus { outline-color: var(--creme); } /* ---------- 08.10.2026 Lamm-Richtung (Filip, Referenz lamm-lichtspiele.de) ---- 1. Kopfleiste ohne sichtbare Linie: Rand in der Flaechenfarbe. Bewusste Ruecknahme der 2-px-Navy-Linie vom 04.09.2026 (Filip ausdruecklich). 2. Menueknopf (nur dort, wo er erscheint, < 1080 px): gefuellter Navy-Kreis, Striche in Rose. Rose auf Navy = 8,7 : 1. 3. Wortmarke „mela" im Hero von Rand zu Rand, oben angeschlagen - wie die LAMM-Wortmarke. Der Rest des Heros bleibt darunter. */ .kopf { border-bottom-color: var(--creme); } @media all { .kopf__schalter { width: 52px; min-height: 52px; height: 52px; margin-right: 0; border-radius: 50%; background: var(--navy); color: var(--rose); box-shadow: 0 4px 14px var(--navy-schatten); transform: translateY(4px); } .kopf__schalter .balken { width: 22px; height: 14px; } .kopf__schalter .balken span { top: 6px; } .kopf__schalter[aria-expanded="true"] .balken::before { transform: translateY(6px) rotate(45deg); } .kopf__schalter[aria-expanded="true"] .balken::after { transform: translateY(-6px) rotate(-45deg); } .kopf__schalter:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; } /* Im aufgeklappten Menue (Navy-Grund) dreht sich der Knopf um: Rose-Kreis, Navy-Kreuz. */ .menue .kopf__schalter { background: var(--rose); color: var(--navy); box-shadow: none; } .menue .kopf__schalter:focus-visible { outline-color: var(--creme); } } .hero { align-content: start; padding-top: clamp(12px, 2vw, 28px); } .hero > .inhalt { max-width: none; } .hero .inhalt > div { width: 100%; } .hero__logo--bild, .hero__logo--bild { width: 100%; height: auto; margin: 0 0 clamp(18px, 3vw, 44px); } @media (max-width: 620px) { .hero__logo--bild { height: auto; margin: 0 0 22px; } } /* 08.10.2026 (Filip): Kopfleiste auf dem Desktop GENAU wie auf dem Handy - Logo links, runder Menueknopf rechts, keine Menuepunkte, kein Reservieren-Knopf. Das Menue klappt auch am Rechner als Vollflaeche auf. Die Desktop-Regeln oben (Navigation sichtbar, Schalter und Menue `display: none !important`) werden hier ueberschrieben. Reservieren bleibt am Rechner ueber den Hero-Knopf und das Menue erreichbar. */ @media (min-width: 1080px) { .kopf__zeile { display: flex; justify-content: space-between; } .kopf__nav, .kopf__cta { display: none; } .kopf__schalter { display: inline-flex; } .menue[data-offen="ja"] { display: block !important; } .menue > nav, .menue__fuss { max-width: 760px; margin-inline: auto; } .menue__kopf { max-width: 1600px; margin-inline: auto; } } /* 08.10.2026: Aktuelle Seite im Menue in Rose statt unterstrichen - die Unterstreichung lief bisher auch durch die kleine Zweitzeile rechts („Essen und Getränke"). Und: Logo und Knopf stehen im offenen Menue an derselben Stelle wie in der Kopfleiste, damit der Knopf beim Oeffnen nicht springt. */ .menue__liste a[aria-current="page"] { text-decoration: none; color: var(--rose); } .menue { padding-top: 1px; } /* ---------- 08.10.2026 Schwebender Kopf (Filip) --------------------------- Keine Leiste mehr: Logo und Menueknopf liegen direkt auf der Seite, die Formen und Flaechen laufen bis an die Oberkante durch. - Logo: steht oben links IN der Seite (absolut) und scrollt mit weg. Fest angeheftet wuerde das Navy-Logo auf den Navy- und Bordeaux-Flaechen unsichtbar. - Menueknopf: bleibt fest oben rechts (fixed) und schwebt mit - der gefuellte Kreis traegt sich auf jedem Untergrund selbst. - Erste Sektion jeder Seite bekommt die frei gewordene Leistenhoehe als zusaetzlichen Innenabstand, damit nichts unter Logo/Knopf rutscht. */ .kopf { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; pointer-events: none; } .kopf__marke, .kopf__schalter { pointer-events: auto; } .kopf__schalter { position: fixed; top: 14px; right: var(--sek-x); z-index: 90; transform: none; } .sprungmarke:focus { z-index: 100; } html { scroll-padding-top: 16px; } main > .sek:first-child, main > section:first-child { padding-top: calc(var(--header-h) + clamp(24px, 4vw, 56px)); } .hero { min-height: 100svh; } main > .hero:first-child { padding-top: calc(var(--header-h) + clamp(4px, 1vw, 12px)); } /* Im offenen Menue sitzt das Schliessen-Kreuz an derselben Stelle. */ .menue .kopf__schalter { position: static; } @media (max-width: 620px) { .hero { min-height: 86svh; } } .menue { padding-top: 6px; }