/* SmartBiz Kundenseiten - ein Stylesheet, drei Looks. Der Look steht als data-look am : klar, warm oder elegant. Alle Farben kommen aus Variablen, die die Farb-Engine setzt. */ /* ---------------------------------------------------------------- Grundlage */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--schrift); font-size: var(--basis); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-link); } a:hover { color: var(--c-link-hover); } h1, h2, h3 { font-family: var(--schrift-titel); line-height: 1.15; margin: 0 0 .5em; font-weight: var(--titel-fett); letter-spacing: var(--titel-sperrung); } h1 { font-size: var(--t1); } h2 { font-size: var(--t2); } h3 { font-size: var(--t3); } p { margin: 0 0 1em; } :focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; border-radius: 2px; } /* Look-Stellschrauben */ :root { --schrift: system-ui, -apple-system, "Segoe UI", "Noto Sans Georgian", "Noto Sans", Arial, sans-serif; --schrift-titel: var(--schrift); --basis: 17px; --t1: clamp(2rem, 5.5vw, 3.4rem); --t2: clamp(1.4rem, 3vw, 2.1rem); --t3: 1.15rem; --titel-fett: 800; --titel-sperrung: -.02em; --rund: 12px; --rund-klein: 8px; --luft: clamp(3.5rem, 8vw, 6rem); --breite: 1140px; --schatten: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07); --label-gross: none; --label-sperrung: .02em; } html[data-look="warm"] { --basis: 18px; --t1: clamp(2.1rem, 6vw, 3.8rem); --titel-fett: 700; --titel-sperrung: -.015em; --rund: 22px; --rund-klein: 14px; --luft: clamp(4rem, 9vw, 7rem); --schatten: 0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.09); } html[data-look="elegant"] { --schrift: "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif Georgian", Georgia, serif; --basis: 17px; --t1: clamp(1.9rem, 5vw, 3.1rem); --t2: clamp(1.3rem, 2.6vw, 1.85rem); --titel-fett: 600; --titel-sperrung: .005em; --rund: 2px; --rund-klein: 2px; --luft: clamp(4rem, 9vw, 7.5rem); --schatten: none; --label-gross: uppercase; --label-sperrung: .16em; } /* Die Speisekarte laeuft immer ohne Serifen - auch im eleganten Look, dessen Grundschrift sonst eine Serifenschrift ist. Eine Karte wird am Tisch gelesen, oft im Halbdunkel, oft von jemandem, der die Sprache nicht spricht und Wort fuer Wort vergleicht. Da zaehlt Lesbarkeit mehr als Haltung - und es ist dieselbe Schrift wie auf smartbiz.ge. Erkennbar ist die Kartenseite am data-bildstufe; nur sie hat es. */ html[data-bildstufe] { --schrift: system-ui, -apple-system, "Segoe UI", "Noto Sans Georgian", "Noto Sans", Arial, sans-serif; --schrift-titel: var(--schrift); } /* ---------------------------------------------------------------- Bausteine */ .mitte { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 20px; } .abschnitt { padding: var(--luft) 0; } .abschnitt--flaeche { background: var(--c-surface); } .abschnitt-kopf { max-width: 640px; margin-bottom: 2.5rem; } .label { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: var(--label-gross); letter-spacing: var(--label-sperrung); color: var(--c-link); margin-bottom: .7rem; } .unterzeile { color: var(--c-muted); margin: 0; } .knopf { display: inline-flex; align-items: center; gap: .5rem; background: var(--c-brand); color: var(--c-on-brand); font: inherit; font-weight: 700; text-decoration: none; padding: .85rem 1.6rem; border: 0; border-radius: var(--rund-klein); cursor: pointer; transition: background .15s, transform .15s; } .knopf:hover { background: var(--c-brand-hover); color: var(--c-on-brand); transform: translateY(-1px); } .knopf--rand { background: transparent; color: var(--c-ink); border: 2px solid var(--c-border); } .knopf--rand:hover { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-brand); } html[data-look="elegant"] .knopf { text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; } /* ---------------------------------------------------------------- Kopf */ .kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); } .kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; } .marke { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--c-ink); min-width: 0; } .marke img { height: 38px; width: auto; } .marke-name { font-family: var(--schrift-titel); font-weight: var(--titel-fett); font-size: 1.2rem; letter-spacing: var(--titel-sperrung); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kopf-rechts { display: flex; align-items: center; gap: .75rem; } .nav { display: flex; gap: 1.6rem; } .nav a { color: var(--c-muted); text-decoration: none; font-size: .95rem; font-weight: 600; } .nav a:hover { color: var(--c-link); } .sprachen { display: flex; gap: 2px; background: var(--c-surface-2); padding: 3px; border-radius: var(--rund-klein); } .sprachen a, .sprachen span { font-size: .78rem; font-weight: 700; padding: .25rem .5rem; border-radius: calc(var(--rund-klein) - 3px); text-decoration: none; color: var(--c-muted); } .sprachen a:hover { color: var(--c-ink); } .sprachen [aria-current] { background: var(--c-brand); color: var(--c-on-brand); } @media (max-width: 860px) { .nav { display: none; } } /* ---------------------------------------------------------------- Hero */ .hero { position: relative; display: flex; flex-direction: column; } .hero > .mitte { position: relative; } .hero-bild { position: relative; overflow: hidden; height: clamp(300px, 52vh, 560px); } .hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, center 38%); } /* Ohne Slider ist nur das erste Bild da. Mit Slider blenden sie ueber. */ .hero-bild .hero-slide { opacity: 0; } .hero-bild .hero-slide:first-of-type { opacity: 1; } .hero-bild.laeuft .hero-slide { opacity: 0; transition: opacity 1.1s ease; } .hero-bild.laeuft .hero-slide.ist-da { opacity: 1; } .hero-punkte { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: none; justify-content: center; gap: 8px; } .hero-bild.laeuft .hero-punkte { display: flex; } .hero-punkt { width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer; border: 0; background: rgba(255,255,255,.45); transition: background .2s, width .2s; } .hero-punkt[aria-selected="true"] { background: #fff; width: 22px; border-radius: 5px; } .hero-text { position: relative; } .hero-titel { margin: 0 0 .4em; } .hero-claim { font-size: 1.15rem; color: var(--c-muted); max-width: 46ch; margin: 0 0 1.6rem; } .hero-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; } /* klar: Bild oben, Text darunter in einer angehobenen Karte */ html[data-look="klar"] .hero-text { background: var(--c-bg); border-radius: var(--rund); box-shadow: var(--schatten); margin: -70px auto 0; padding: 2.4rem; max-width: calc(var(--breite) - 80px); } @media (max-width: 720px) { html[data-look="klar"] .hero-text { margin-top: -30px; padding: 1.5rem; } } /* warm: Text im Bild, warmer Verlauf darunter */ html[data-look="warm"] .hero-bild { height: clamp(380px, 72vh, 720px); } html[data-look="warm"] .hero-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.08) 100%); } html[data-look="warm"] .hero > .mitte { position: static; } html[data-look="warm"] .hero-text { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 2; width: 100%; max-width: var(--breite); padding: 0 20px 3rem; color: #fff; } html[data-look="warm"] .hero-claim { color: rgba(255,255,255,.88); } html[data-look="warm"] .knopf--rand { color: #fff; border-color: rgba(255,255,255,.55); } html[data-look="warm"] .knopf--rand:hover { background: rgba(255,255,255,.14); color: #fff; } /* elegant: ruhige Fläche, Bild als schmaler Streifen darunter */ html[data-look="elegant"] .hero-bild { order: 2; } html[data-look="elegant"] .hero > .mitte { order: 1; } html[data-look="elegant"] .hero-text { padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem); text-align: center; } html[data-look="elegant"] .hero-claim { margin-left: auto; margin-right: auto; } html[data-look="elegant"] .hero-knoepfe { justify-content: center; } html[data-look="elegant"] .hero-bild { height: clamp(260px, 42vh, 460px); } /* Bewertung */ .bewertung { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem; font-size: .92rem; font-weight: 600; color: var(--c-muted); } .bewertung b { color: var(--c-ink); font-size: 1.05rem; } .sterne { color: var(--c-brand); letter-spacing: .08em; } html[data-look="warm"] .bewertung { color: rgba(255,255,255,.85); } html[data-look="warm"] .bewertung b { color: #fff; } html[data-look="warm"] .sterne { color: #ffc93c; } /* ---------------------------------------------------------------- Infostreifen */ .streifen { background: var(--c-surface-2); border-block: 1px solid var(--c-border); } .streifen-innen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-border); } .streifen-teil { background: var(--c-surface-2); padding: 1.4rem 1.2rem; display: flex; gap: .85rem; align-items: flex-start; } .streifen-teil svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--c-link); margin-top: 2px; } .streifen-teil dt { font-size: .74rem; font-weight: 700; text-transform: var(--label-gross); letter-spacing: var(--label-sperrung); color: var(--c-muted); margin-bottom: .15rem; } .streifen-teil dd { margin: 0; font-weight: 600; } .streifen-teil dd a { text-decoration: none; } @media (max-width: 760px) { .streifen-innen { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- Über uns */ .zwei-spalten { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .zwei-spalten img { border-radius: var(--rund); box-shadow: var(--schatten); width: 100%; aspect-ratio: 4/3; object-fit: cover; } @media (max-width: 860px) { .zwei-spalten { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- Speisekarte */ .karte-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); } @media (max-width: 760px) { .karte-liste { grid-template-columns: 1fr; } } .gericht { display: flex; align-items: baseline; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid var(--c-border); } /* Der Text nimmt sich, was er braucht, die Fuehrungspunkte den Rest. Vorher wuchsen beide gleichberechtigt - der Name brach dadurch um, obwohl in der Zeile noch Platz war, und die Punkte schrumpften zum Stummel. */ .gericht-text { flex: 0 1 auto; min-width: 0; } .gericht-name { font-weight: 700; display: block; } .gericht-info { color: var(--c-muted); font-size: .9rem; } .gericht-punkte { flex: 1 1 1.5rem; min-width: 1.2rem; border-bottom: 1px dotted var(--c-border); transform: translateY(-4px); } .gericht-preis { font-weight: 700; color: var(--c-link); white-space: nowrap; } html[data-look="elegant"] .gericht { border-bottom-style: none; } /* Kein small-caps: Mkhedruli kennt keine Grossbuchstaben, und die Ersatzschrift laesst die georgischen Zeichen dann ganz weg. */ html[data-look="elegant"] .gericht-name { letter-spacing: .03em; font-weight: 600; } .beispiel-hinweis { display: flex; gap: .7rem; align-items: flex-start; background: var(--c-soft); border: 1px dashed var(--c-brand); border-radius: var(--rund-klein); padding: .9rem 1.1rem; margin-bottom: 2rem; font-size: .92rem; color: var(--c-ink); } .beispiel-hinweis svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--c-brand); margin-top: 2px; } /* ---------------------------------------------------------------- Galerie */ /* Feste Zeilenhoehe statt Seitenverhaeltnis am Bild: nur so fuellen auch Hochformat-Fotos ihre Kachel restlos aus. */ .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); grid-auto-rows: 168px; gap: 12px; } .galerie figure { margin: 0; overflow: hidden; border-radius: var(--rund-klein); background: var(--c-surface-2); } .galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .galerie figure:hover img { transform: scale(1.05); } .galerie figure:first-child { grid-column: span 2; grid-row: span 2; } @media (max-width: 620px) { .galerie { grid-auto-rows: 140px; } .galerie figure:first-child { grid-column: span 2; grid-row: span 2; } } /* ---------------------------------------------------------------- Zeiten */ .zeiten { width: 100%; border-collapse: collapse; max-width: 460px; } .zeiten th, .zeiten td { text-align: left; padding: .7rem .2rem; border-bottom: 1px solid var(--c-border); } .zeiten td:last-child { text-align: right; font-variant-numeric: tabular-nums; } .zeiten tr[data-heute] { color: var(--c-link); font-weight: 700; } .zeiten tr[data-heute] td::after { content: ""; } /* ---------------------------------------------------------------- Lage */ .lage-rahmen { border-radius: var(--rund); overflow: hidden; border: 1px solid var(--c-border); } .lage-rahmen iframe { width: 100%; height: 380px; border: 0; display: block; filter: var(--karte-filter, none); } html[data-look="elegant"] { --karte-filter: grayscale(1) contrast(.9) brightness(.85); } /* ---------------------------------------------------------------- Kontakt */ .kontakt-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .kontakt-karte { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--rund); padding: 1.5rem; text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s; } .kontakt-karte:hover { border-color: var(--c-brand); transform: translateY(-2px); color: inherit; } .kontakt-karte svg { width: 26px; height: 26px; color: var(--c-link); margin-bottom: .7rem; } .kontakt-karte dt { font-size: .74rem; font-weight: 700; text-transform: var(--label-gross); letter-spacing: var(--label-sperrung); color: var(--c-muted); margin-bottom: .2rem; } .kontakt-karte dd { margin: 0; font-weight: 700; font-size: 1.05rem; word-break: break-word; } /* ---------------------------------------------------------------- Fuß */ .fuss { background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 3rem 0 2rem; } .fuss-innen { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; } .fuss-links { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; font-size: .92rem; } .fuss-links a { color: var(--c-muted); text-decoration: none; } .fuss-links a:hover { color: var(--c-link); } .fuss-klein { color: var(--c-muted); font-size: .86rem; margin: 1.5rem 0 0; } /* ---------------------------------------------------------------- Werkzeuge (nur Demo) */ .werkzeuge { display: flex; align-items: center; gap: .4rem; } .wz-knopf { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; background: var(--c-surface-2); color: var(--c-ink); border: 1px solid var(--c-border); border-radius: var(--rund-klein); padding: .35rem .6rem; font: inherit; font-size: .8rem; font-weight: 600; } .wz-knopf:hover { border-color: var(--c-brand); } .wz-punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--c-brand); border: 1px solid rgba(0,0,0,.15); } .wz-feld { position: fixed; top: 76px; right: 16px; z-index: 60; width: min(310px, calc(100vw - 32px)); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--rund); box-shadow: 0 10px 40px rgba(0,0,0,.22); padding: 1.1rem; } .wz-feld[hidden] { display: none; } .wz-feld h4 { margin: 0 0 .2rem; font-size: .95rem; } .wz-feld p { margin: 0 0 .9rem; font-size: .82rem; color: var(--c-muted); } .wz-zeile { display: flex; gap: .5rem; margin-bottom: .9rem; } .wz-zeile input[type="text"] { flex: 1 1 auto; min-width: 0; font: inherit; font-size: .9rem; padding: .5rem .6rem; border: 1px solid var(--c-border); border-radius: var(--rund-klein); background: var(--c-surface); color: var(--c-ink); } .wz-zeile input[type="color"] { width: 42px; height: 38px; padding: 2px; border: 1px solid var(--c-border); border-radius: var(--rund-klein); background: var(--c-surface); cursor: pointer; } .wz-proben { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; } .wz-probe { width: 27px; height: 27px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .wz-probe:hover, .wz-probe[aria-pressed="true"] { border-color: var(--c-ink); } .wz-gruppe { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .75rem; } .wz-label { font-size: .78rem; font-weight: 700; color: var(--c-muted); text-transform: var(--label-gross); letter-spacing: var(--label-sperrung); } .wz-notiz { font-size: .76rem; color: var(--c-muted); margin: .5rem 0 0; line-height: 1.45; } .wz-looks { display: grid; grid-template-columns: repeat(3, 40px); gap: 6px; } .wz-schalter { position: relative; display: inline-flex; cursor: pointer; } .wz-schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .wz-schieber { width: 44px; height: 25px; border-radius: 13px; background: var(--c-border); position: relative; transition: background .18s; } .wz-schieber::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .wz-schalter input:checked + .wz-schieber { background: var(--c-brand); } .wz-schalter input:checked + .wz-schieber::after { transform: translateX(19px); } .wz-schalter input:focus-visible + .wz-schieber { outline: 3px solid var(--c-brand); outline-offset: 2px; } .wz-look { font: inherit; font-size: .8rem; font-weight: 600; padding: .45rem .2rem; cursor: pointer; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); border-radius: var(--rund-klein); } .wz-look[aria-pressed="true"] { background: var(--c-brand); color: var(--c-on-brand); border-color: var(--c-brand); } .wz-fehler { color: #c0392b; font-size: .8rem; margin: .4rem 0 0; } @media print { .kopf, .werkzeuge, .wz-feld { display: none !important; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------------------------------------------------------------- Rechtstexte */ .rechtstext { padding-block: clamp(3rem, 7vw, 5rem); max-width: 760px; } .rt-titel { font-size: clamp(1.9rem, 5vw, 2.9rem); margin: 0; } .rt-strich { margin: .9rem 0 2.2rem; height: 3px; width: 56px; background: var(--c-brand); border-radius: 2px; } .rt-h2 { font-size: 1.16rem; margin: 2.4rem 0 .5rem; } .rt-p { color: var(--c-ink); margin: 0 0 .9rem; line-height: 1.7; } .rt-leise { color: var(--c-muted); } .rt-link { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; } .rt-link:hover { color: var(--c-link-hover); } .rt-stand { margin-top: 2.8rem; padding-top: 1rem; border-top: 1px solid var(--c-border); font-size: .88rem; color: var(--c-muted); } .rueck { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--c-muted); font-size: .92rem; font-weight: 600; } .rueck:hover { color: var(--c-link); } /* ---------------------------------------------------------------- Gruende */ .gruende { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .grund { position: relative; padding-top: 1.2rem; border-top: 3px solid var(--c-brand); } .grund h3 { font-size: 1.06rem; margin: 0 0 .35rem; } .grund p { color: var(--c-muted); margin: 0; } html[data-look="warm"] .grund { border-top: 0; background: var(--c-surface); padding: 1.5rem; border-radius: var(--rund); } html[data-look="warm"] .abschnitt--flaeche .grund { background: var(--c-bg); } html[data-look="elegant"] .grund { border-top-width: 1px; border-top-color: var(--c-border); } html[data-look="elegant"] .grund h3 { text-transform: uppercase; letter-spacing: .1em; font-size: .88rem; color: var(--c-link); } .wz-auftrag { display: flex; justify-content: center; width: 100%; margin-top: 1rem; text-decoration: none; } /* ═══════════════════════════════════════════════════════════════════ Speisekarte — QR-Menü und der Kartenabschnitt der Website Fuers Handy in der Hand gebaut: Kategorie antippen, Gerichte lesen. ═══════════════════════════════════════════════════════════════════ */ .karte { max-width: 720px; margin: 0 auto; padding: 1.4rem 16px 3rem; } .karte-kopf { text-align: center; margin-bottom: 1.6rem; } .karte-kopf h1 { font-size: clamp(1.5rem, 6vw, 2.1rem); margin: 0 0 .2rem; } .karte-kopf p { color: var(--c-muted); margin: 0; font-size: .92rem; } /* Kategorie als Aufklapper. Bilder in einer geschlossenen Kategorie werden vom Browser gar nicht erst geholt - das ist der Grund, warum der Einstieg ueber die Kategorien auch die schnelle Variante ist. */ /* Der Kasten selbst bleibt hell und neutral. Vorher trug er einen Hauch der Grundfarbe - und weil sieben Kaesten fast den ganzen Schirm fuellen, sah ein Farbwechsel aus wie ein Farbschleier ueber der Seite statt wie eine Akzentfarbe. Die Farbe gehoert an die Stellen, die etwas bedeuten: Preis, Untergruppe, geoeffnete Kategorie. */ .kategorie { border: 1px solid var(--c-border); border-radius: var(--rund); overflow: hidden; margin-bottom: .8rem; background: var(--c-bg); } .kategorie[open] { border-color: var(--c-brand); } .kat-kopf { cursor: pointer; list-style: none; position: relative; display: block; font-weight: 700; } .kat-kopf::-webkit-details-marker { display: none; } .kat-zeile { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; transition: background .15s, color .15s; } .kat-zeile::after { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .55; transform: rotate(45deg) translateY(-2px); transition: transform .15s; } .kategorie[open] .kat-zeile { background: var(--c-brand); color: var(--c-on-brand); } .kategorie[open] .kat-zeile::after { transform: rotate(-135deg) translateY(-2px); } .kat-name { flex: 1 1 auto; min-width: 0; } .kat-zahl { color: var(--c-muted); font-weight: 400; font-size: .85rem; } .kategorie[open] .kat-zahl { color: inherit; opacity: .8; } /* Das Kategoriebild ist ein Streifen ueber die volle Breite, das Gerichtbild eine Miniatur von 72 Pixeln. Der Unterschied ist Absicht: So sieht man ohne Nachdenken, was eine Ueberschrift ist und was ein Gericht. Geschnitten wird aus der Mitte der Vorlage - dort sitzt bei allen 800x533-Bildern das Motiv. */ .kat-bild { width: 100%; aspect-ratio: 4 / 1; height: auto; display: block; object-fit: cover; object-position: center; background: var(--c-surface-2); } .kat-inhalt { padding: 0 1rem .4rem; } /* Gericht mit Bild braucht ein anderes Raster als die reine Textzeile. Mit Fuehrungspunkten bliebe neben dem Bild so wenig Platz, dass der Name umbricht und die Punkte zu einem Stummel zusammenfallen. Also: Bild links ueber beide Zeilen, Text oben, Preis darunter. */ .gericht--bild { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; align-items: start; } .gericht--bild .gericht-lupe { grid-row: 1 / span 2; } .gericht--bild .gericht-text { grid-column: 2; } .gericht--bild .gericht-punkte { display: none; } .gericht--bild .gericht-preis { grid-column: 2; justify-self: start; } .gericht-bild { width: 72px; height: 72px; flex: 0 0 auto; object-fit: cover; border-radius: var(--rund-klein); background: var(--c-surface-2); } /* Das Bild sitzt in einem Knopf, und der traegt in der Ecke eine Lupe. Ohne dieses Zeichen sieht auf dem Handy niemand, dass man tippen darf - ein Zeigefinger-Cursor existiert dort nicht. Das Abzeichen ist bewusst neutral dunkel und nicht in der Wunschfarbe: Es ist Bedienung, nicht Marke, und bleibt bei jedem Grundton lesbar. */ .gericht-lupe { padding: 0; border: 0; background: none; position: relative; cursor: zoom-in; line-height: 0; border-radius: var(--rund-klein); } .gericht-lupe::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.62) center / 13px 13px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E"); box-shadow: 0 0 0 2px var(--c-bg); } .gericht-lupe:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; } /* ---------------------------------------------------------------- Bildbetrachter */ .lupe { position: fixed; inset: 0; z-index: 100; cursor: zoom-out; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(0,0,0,.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .lupe[hidden] { display: none; } .lupe-inhalt { margin: 0; width: 100%; max-width: 560px; text-align: center; } .lupe-inhalt img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: var(--rund); background: rgba(255,255,255,.06); } .lupe-text { color: #fff; margin-top: .9rem; font-weight: 700; font-size: 1.05rem; line-height: 1.35; } .lupe-text span { display: block; font-weight: 400; font-size: .9rem; opacity: .78; margin-top: .2rem; } .lupe-zu { position: absolute; top: .7rem; right: .7rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.16); color: #fff; } .lupe-zu svg { width: 20px; height: 20px; } .lupe-zu:hover { background: rgba(255,255,255,.28); } @media print { .lupe { display: none !important; } } /* Merkmale. Bewusst Zeichen statt Farbflecken - sie funktionieren auch fuer Farbenblinde und lassen sich vorlesen. */ /* Eigene Schriftfamilie: Im eleganten Look ist die Grundschrift eine Serifenschrift, und die hat die geometrischen Zeichen nicht alle. Das Ei-Zeichen fiel dort auf einen Ersatzglyphen zurueck und sah aus wie ein Druckfehler. */ .merkmal { margin-left: .35rem; font-size: .8em; color: var(--c-brand); font-family: system-ui, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif; text-decoration: none; border: 0; cursor: help; } .legende { margin: 1.6rem 0 .6rem; font-size: .84rem; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; } .legende-titel { font-weight: 700; color: var(--c-ink); } .legende-teil { white-space: nowrap; } .legende-teil .merkmal { margin: 0 .25rem 0 0; } .karte-fuss { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--c-border); color: var(--c-muted); font-size: .84rem; } .karte-fuss p { margin: .3rem 0; } .karte-hinweis { display: flex; gap: .5rem; align-items: flex-start; background: var(--c-soft); border: 1px solid var(--c-border); border-radius: var(--rund-klein); padding: .7rem .85rem; margin: 1.2rem 0; font-size: .86rem; color: var(--c-muted); } /* Untergruppe: Ueberschrift innerhalb der geoeffneten Kategorie. */ .gruppe-name { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-brand); margin: 1.5rem 0 .2rem; } .kat-inhalt > .gruppe-name:first-child { margin-top: .8rem; } /* ---------------------------------------------------------------- Filter .gericht und .kategorie tragen display:flex bzw. display:block. Das schlaegt das hidden-Attribut, also muss es hier ausdruecklich gewinnen - sonst blendet der Filter nichts aus, ohne dass irgendwo ein Fehler erscheint. */ .karte [hidden] { display: none !important; } /* Vollflaechig in der Wunschfarbe. Das ist die eine Stelle der Karte, an der es etwas zu bedienen gibt - und zugleich die Stelle, an der der Wirt im Verkaufsgespraech seine Farbe sofort wiedererkennt. Alles darin rechnet mit currentColor, damit es auch bei einem hellen Grundton (Gelb, Orange) lesbar bleibt, wo die Schrift dunkel wird. */ .filter { margin: 0 0 1.2rem; padding: .9rem 1rem; border: 1px solid var(--c-brand); border-radius: var(--rund-klein); background: var(--c-brand); color: var(--c-on-brand); } .filter-kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; } /* Bewusst nicht in Grossbuchstaben wie die Gruppenueberschriften: Mit Sperrung brach "Auswahl einschraenken" auf dem Handy um, und die Leiste bekam eine zweite Zeile, bevor sie etwas getan hatte. */ .filter-titel { font-size: .82rem; font-weight: 700; color: inherit; opacity: .88; } .filter-aus { font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; padding: .2rem .55rem; border-radius: var(--rund-klein); border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: transparent; color: inherit; } .filter-aus:hover { border-color: currentColor; } .filter-reihe { display: flex; align-items: baseline; gap: .6rem; margin-top: .45rem; } .filter-label { flex: 0 0 auto; font-size: .8rem; font-weight: 700; color: inherit; min-width: 3.2rem; } .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; } .filter-chip { font: inherit; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: baseline; gap: .3rem; padding: .28rem .6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; transition: border-color .15s, background .15s; } .filter-chip:hover { border-color: currentColor; } /* Gedrueckt kehrt sich der Knopf um: Die beiden Farben sind ein Paar, auf dem die Schrift in beide Richtungen sicher sitzt. */ .filter-chip[aria-pressed="true"] { background: var(--c-on-brand); color: var(--c-brand); border-color: var(--c-on-brand); } .filter-chip .merkmal { margin: 0; color: inherit; } .filter-leer { margin: .7rem 0 0; font-size: .85rem; color: inherit; opacity: .9; } /* ---------------------------------------------------------------- Bildstufen In der Vorfuehrkarte stehen alle Bilder in der Seite; hier faellt weg, was die gewaehlte Stufe nicht einschliesst. Eine Zeile ohne Bild muss dabei wieder zur reinen Textzeile werden - sonst bliebe die erste Rasterspalte als Luecke stehen und die Fuehrungspunkte fehlten. */ html[data-bildstufe="text"] .kat-bild, html[data-bildstufe="text"] .gericht-lupe, html[data-bildstufe="kategorie"] .gericht-lupe { display: none; } html[data-bildstufe="text"] .gericht--bild, html[data-bildstufe="kategorie"] .gericht--bild { display: flex; align-items: baseline; gap: .8rem; } html[data-bildstufe="text"] .gericht--bild .gericht-punkte, html[data-bildstufe="kategorie"] .gericht--bild .gericht-punkte { display: block; } /* Die drei Pakete als Knoepfe: Name links, Preis rechts. */ .wz-stufen { display: grid; gap: 6px; margin-bottom: .9rem; } .wz-stufe { font: inherit; font-size: .82rem; text-align: left; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .55rem .7rem; border-radius: var(--rund-klein); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink); transition: border-color .15s, background .15s; } .wz-stufe:hover { border-color: var(--c-brand); } .wz-stufe[aria-pressed="true"] { background: var(--c-brand); color: var(--c-on-brand); border-color: var(--c-brand); } .wz-stufe-name { font-weight: 600; } .wz-stufe-preis { white-space: nowrap; font-weight: 700; opacity: .85; } /* Auf dem Handy traegt die Kopfzeile der Kartendemo einen Knopf mehr als die einer Kundenkarte - vier Sprachen, Paketwahl und den Betriebsnamen. Zuerst faellt die Beschriftung des Paketknopfes weg; der Farbpunkt allein sagt genug, und der Name des Lokals bleibt lesbar. */ @media (max-width: 560px) { .wz-knopf--karte { padding-left: .5rem; padding-right: .5rem; } .wz-knopf--karte .wz-knopf-text { display: none; } .kopf-innen:has(.wz-knopf--karte) { gap: .5rem; } .kopf-innen:has(.wz-knopf--karte) .marke-name { font-size: 1rem; } .kopf-innen:has(.wz-knopf--karte) .sprachen { padding: 2px; } .kopf-innen:has(.wz-knopf--karte) .sprachen a, .kopf-innen:has(.wz-knopf--karte) .sprachen span { padding: .25rem .36rem; } }