/* Globales Web-CSS — steht bewusst als echte Datei hier und nicht als Template-String in app/_layout.tsx. Vorher wurde dieser Block zur Laufzeit per useEffect in den geschrieben. Die App ist ein statischer Export: der Browser hat das fertige Markup sofort, aber bis das JS-Bundle geparst war, galt keine einzige dieser Regeln. Sichtbar war das als „weiße Kästen" — bz-btn/bh-btn rendern ohne diese Datei als Browser-Standardknöpfe, .bh-shimmer-Platzhalter sind unsichtbar und die Einblendungen der Startseite (.bh-ein) stehen auf Deckkraft 0. Als im Kopf blockiert die Datei das erste Rendern und alles sitzt vom ersten Frame an richtig. Wer hier etwas ändert, ändert es für alle Web-Seiten. */ :root { --bg: #0B0B0C; --bg-elev: #101012; --surface: #161618; --surface-2: #1E1E22; --border: #2A2A2E; --border-hi: #3A3A40; --gold: #E8A030; --gold-hi: #F4B548; --gold-lo: #C8841C; --gold-dim: rgba(232,160,48,0.12); --gold-glow: rgba(232,160,48,0.35); --weissblau: #4A8DC9; --augustiner-deep: #1B4D2E; --augustiner-mid: #2D6A4F; --augustiner-bright: #3DCB94; --text: #F5EFDC; --text-sub: #9A9088; --text-muted: #8F877C; --success: #3DCB94; --error: #FF5C5C; --error-bg: rgba(255,92,92,0.08); --kat-bar: #E8A030; --kat-club: #C77DFF; --kat-wirtschaft: #4A8DC9; /* Biergarten war #1B4D2E und als Schrift auf Dunkel bei 2,01:1 unlesbar — gleiche Aenderung wie in constants/locations.ts, Begruendung dort. */ --kat-biergarten: #45A17A; --kat-spaeti: #9AA88E; --kat-tankstelle: #FF5C5C; --shadow-gold: 0 8px 32px rgba(232,160,48,0.25), 0 2px 8px rgba(232,160,48,0.15); --shadow-cta: 0 8px 32px rgba(232,160,48,0.30); --shadow-cta-hi: 0 12px 40px rgba(232,160,48,0.45); --shadow-panel: 0 16px 48px rgba(0,0,0,0.60), 0 2px 8px rgba(0,0,0,0.40); --shadow-chip: 0 1px 3px rgba(0,0,0,0.40); --shadow-card: 0 2px 8px rgba(0,0,0,0.30); --z-nav: 100; --z-sheet: 9998; --z-modal: 9999; } *, *::before, *::after { box-sizing: border-box; } html, body { background: #0B0B0C; color: #F5EFDC; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } *:focus-visible { outline: 2px solid #E8A030; outline-offset: 2px; border-radius: 4px; } ::selection { background: rgba(232,160,48,0.35); color: #F5EFDC; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0B0B0C; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #E8A030, #C8841C); border-radius: 10px; border: 2px solid #0B0B0C; } ::-webkit-scrollbar-thumb:hover { background: #F4B548; } @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .bh-page { animation: pageIn 350ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* Bezirks-Panel auf der Karte. Es erschien vorher schlagartig — auf dem Handy sprang eine 70vh hohe Fläche von unten ins Bild, ohne dass die Bewegung erklärte, woher sie kam. Zwei Richtungen, weil das Panel auf dem Handy von unten kommt und auf dem Desktop von links. */ @keyframes bhPanelHoch { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes bhPanelRein { from { transform: translateX(-14px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .bh-panel-unten { animation: bhPanelHoch 280ms cubic-bezier(0.22, 1, 0.36, 1) both; } .bh-panel-links { animation: bhPanelRein 220ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* Der Abdunkler dahinter blendet mit, sonst schaltet er hart auf 50 % Schwarz. */ @keyframes bhAbdunklerRein { from { opacity: 0; } to { opacity: 1; } } .bh-abdunkler { animation: bhAbdunklerRein 220ms ease both; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .bh-shimmer { background: linear-gradient(90deg, #161618 0%, #2A2A2E 50%, #161618 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; } /* Expo Router: body+#root haben height:100%, Screen-Container flex+overflow:hidden. bh-scrollpage muss flex:1 + min-height:0 damit Flex-Shrink korrekt wirkt, dann overflow-y:auto für Scroll. */ .bh-scrollpage { display: flex !important; flex-direction: column !important; flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; } .leaflet-popup-content-wrapper { background: #161618 !important; color: #F5EFDC !important; border: 1px solid #2A2A2E !important; border-radius: 10px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; padding: 0 !important; } .leaflet-popup-content { margin: 0 !important; } .leaflet-popup-tip { background: #161618 !important; } .leaflet-popup-close-button { color: #9A9088 !important; top: 6px !important; right: 8px !important; } .leaflet-popup-close-button:hover { color: #F5EFDC !important; } /* Die Quellenangabe ist Pflicht (OSM/OpenFreeMap) und stand in Leaflets Vorgabe: heller Kasten, Links in #0078A8 — 3,15:1 und der einzige helle Fleck auf einer dunklen Karte. Dunkel gesetzt liest sie sich und stoert nicht. */ /* Deckend, nicht durchscheinend: bei 0,82 mischen sich die Kartenkacheln durch, der wirksame Kontrast schwankt mit dem Ausschnitt und lag gemessen bei 4,17:1. Deckend sind es stabil 6,29:1. */ .leaflet-container .leaflet-control-attribution { background: #0B0B0C !important; color: #9A9088 !important; } .leaflet-container .leaflet-control-attribution a { color: #E8A030 !important; } .bh-eyebrow { font-family: 'Caveat', cursive; font-size: 14px; color: #E8A030; transform: rotate(-3deg); display: inline-block; } .bh-price { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; color: #E8A030; font-variant-numeric: tabular-nums; } .bh-handwritten { font-family: 'Caveat', cursive; font-size: 14px; color: #E8A030; display: inline-block; } .bh-caption { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 700; color: #9A9088; letter-spacing: 0.12em; text-transform: uppercase; } .bh-display-italic { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: clamp(56px, 10vw, 88px); font-weight: 800; font-style: italic; letter-spacing: -0.03em; line-height: 0.9; color: #F5EFDC; display: inline-block; transform: rotate(-1deg); } /* ── Bierdeckel-Stamp buttons ── */ .bh-btn-primary { position: relative; background: #E8A030; color: #0B0B0C; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -0.005em; padding: 12px 22px; border: none; border-radius: 6px; cursor: pointer; transform: rotate(-1deg); box-shadow: 0 2px 0 #C8841C, 0 10px 24px rgba(232,160,48,0.28); transition: background 120ms, box-shadow 120ms, transform 100ms; } .bh-btn-primary::before { content: ""; position: absolute; inset: 4px; border-radius: 3px; border: 1px dashed rgba(11,11,12,0.32); pointer-events: none; } .bh-btn-primary:hover { background: #F4B548; box-shadow: 0 2px 0 #C8841C, 0 14px 32px rgba(232,160,48,0.40); } .bh-btn-primary:active { transform: rotate(-1deg) scale(0.96); box-shadow: 0 1px 0 #C8841C, 0 4px 12px rgba(232,160,48,0.20); } .bh-btn-secondary { position: relative; background: transparent; color: #E8A030; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 15px; padding: 12px 22px; border: 1.5px solid #E8A030; border-radius: 6px; cursor: pointer; transform: rotate(0.6deg); transition: background 120ms, transform 100ms; } .bh-btn-secondary::before { content: ""; position: absolute; inset: 3px; border-radius: 3px; border: 1px dashed rgba(232,160,48,0.35); pointer-events: none; } .bh-btn-secondary:hover { background: rgba(232,160,48,0.08); } .bh-btn-secondary:active { transform: rotate(0.6deg) scale(0.97); } .bh-btn-ghost { background: transparent; border: none; color: #F5EFDC; font-family: 'Caveat', cursive; font-size: 20px; cursor: pointer; padding: 4px 0; } /* ── Filter tabs (underline style) ── */ .bh-filter-tab { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 14px 11px; padding-left: 0; padding-right: 14px; font-size: 13px; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.005em; color: #8F877C; cursor: pointer; transition: color 150ms, border-color 150ms; white-space: nowrap; position: relative; } @media (hover: hover) and (pointer: fine) { .bh-filter-tab:hover { opacity: 0.85; } } .bh-filter-tab .ct { font-family: monospace; font-size: 9.5px; color: #8F877C; margin-left: 5px; } /* Sort row */ .bh-sort-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 8px 11px; font-family: monospace; font-size: 10px; color: #8F877C; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: color 150ms, border-bottom-color 150ms; position: relative; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .bh-sort-tab:hover { opacity: 0.85; } } /* Stand auf der Randfarbe #2A2A2E und kam damit auf 1,38:1 — der Schrägstrich zwischen den zwei Sortierungen war schlicht nicht zu sehen. */ .bh-sort-sep { color: #8F877C; padding: 0 2px; font-family: monospace; font-size: 10px; } /* ── Landing „Bierbörse" ── */ .bz-btn-primary { background: #E8A030; color: #0C0B09; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 15px; padding: 12px 24px; border: none; border-radius: 2px; cursor: pointer; transition: background 120ms; } .bz-btn-primary:hover { background: #F4B548; } .bz-btn-primary:disabled, .bz-btn-secondary:disabled { cursor: default; } .bz-btn-primary:disabled:hover { background: #E8A030; } .bz-btn-secondary:disabled:hover { border-color: #4A443A; color: #F2EAD8; } .bz-btn-secondary { background: transparent; color: #F2EAD8; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 15px; padding: 12px 24px; border: 1px solid #4A443A; border-radius: 2px; cursor: pointer; transition: border-color 120ms, color 120ms; } .bz-btn-secondary:hover { border-color: #E8A030; color: #E8A030; } .bz-strike { position: relative; white-space: nowrap; } .bz-strike::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; border-top: 2px solid #D96A5A; transform: rotate(-6deg); } /* Beide Landing-Knöpfe hatten nur einen Farbwechsel und sonst keine Antwort auf den Druck. Ein Knopf, der beim Tippen nichts tut, fühlt sich kaputt an, auch wenn er funktioniert. */ .bz-btn-primary, .bz-btn-secondary { transition: background 120ms, border-color 120ms, color 120ms, transform 90ms cubic-bezier(0.22, 1, 0.36, 1); } .bz-btn-primary:active:not(:disabled), .bz-btn-secondary:active:not(:disabled) { transform: translateY(1px) scale(0.985); } /* Zweispaltige Formularzeilen brachen auf dem Handy zwei Felder auf je ~150px herunter. Ab 600px zwei Spalten, darunter untereinander. */ .bh-formpaar { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 600px) { .bh-formpaar { grid-template-columns: 1fr 1fr; } } /* Der Kursticker im Kopf ist eine Desktop-Geste: auf einem Handyschirm frisst er eine Zeile, laeuft an zu wenig Text vorbei und lenkt von der Suche ab, wegen der man die Seite geoeffnet hat. */ /* Ein Paar: was nur breit bzw. nur schmal sichtbar sein soll. Beide Klassen ersetzen Bedingungen wie `width >= 768 && …` im Render. Solche Abfragen liefern beim Vorrendern etwas anderes als im Browser, und React bricht die Hydration dann mit Fehler #418 ab. */ @media (max-width: 767px) { .bh-nur-breit { display: none !important; } } @media (min-width: 768px) { .bh-nur-schmal { display: none !important; } } /* ── Bar-Detailseite (Web) ── */ .bd-getraenk { transition: background-color 140ms ease; } @media (hover: hover) and (pointer: fine) { .bd-getraenk:hover { background-color: rgba(232,160,48,0.05); } } .bd-nachbar { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; text-decoration: none; color: inherit; border-top: 1px dashed #2A2A2E; padding: 14px 2px; transition: background-color 140ms ease, padding-left 200ms cubic-bezier(0.22,1,0.36,1); } @media (hover: hover) and (pointer: fine) { .bd-nachbar:hover { background-color: rgba(232,160,48,0.055); padding-left: 9px; } } .bd-nachbar:active { background-color: rgba(232,160,48,0.1); } .bd-bestaetigen { transition: background 140ms ease, transform 90ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) and (pointer: fine) { .bd-bestaetigen:hover { background: rgba(61,203,148,0.18) !important; } } .bd-bestaetigen:active { transform: scale(0.96); } /* Navigationsknöpfe in der Desktop-Seitenspalte */ .bh-navknopf { transition: background 140ms ease, border-color 140ms ease; } @media (hover: hover) and (pointer: fine) { .bh-navknopf:hover { background: rgba(232,160,48,0.07) !important; } } .bh-navknopf:active { transform: scale(0.94); } /* ── /beitragen — Meldestelle der Bierbörse ── Eigener bt-Präfix statt bz-: die Seite teilt die Tokens der Landing, aber keine ihrer Komponenten. */ .bt-feld { width: 100%; background: #131211; border: 1px solid #2B2823; border-radius: 2px; color: #F2EAD8; font-family: 'Inter', system-ui, sans-serif; font-size: 16px; padding: 16px; outline: none; transition: border-color 150ms ease, background 150ms ease; } .bt-feld::placeholder { color: #8F877C; } .bt-feld:focus { border-color: #E8A030; background: #17150F; } /* Der Kurs steht auf einer Linie statt in einem Kasten: ein Rahmen um eine vierstellige Zahl ist zu 80 % leere Fläche. Die Linie färbt sich beim Tippen golden — über box-shadow, damit nichts springt. */ .bt-kursfeld { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid #2B2823; padding: 2px 2px 12px; transition: border-color 160ms ease, box-shadow 160ms ease; } .bt-kursfeld:focus-within { border-bottom-color: #E8A030; box-shadow: 0 1px 0 #E8A030; } .bt-kurs { min-width: 2.2ch; max-width: 100%; field-sizing: content; background: transparent; border: none; outline: none; color: #E8A030; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: clamp(46px, 13vw, 62px); line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; padding: 0; } .bt-kurs::placeholder { color: #3A342A; } /* Nicht gefüllt = grau, nicht blasses Gold. Gold auf 38 % Deckkraft über Schwarz wird schlammbraun und sieht kaputt aus statt gesperrt. */ .bt-abschicken:disabled { background: #241F18; color: #8F877C; } .bt-abschicken:disabled:hover { background: #241F18; } .bt-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; width: 100%; text-align: left; background: transparent; border: none; border-top: 1px dashed #2B2823; padding: 15px 2px; cursor: pointer; color: inherit; transition: background-color 140ms ease, padding-left 200ms cubic-bezier(0.22,1,0.36,1); } @media (hover: hover) and (pointer: fine) { .bt-zeile:hover { background-color: rgba(232,160,48,0.055); padding-left: 9px; } } .bt-zeile:active { background-color: rgba(232,160,48,0.1); } /* Echte Checkbox statt Attrappe: so bleibt sie mit Tastatur bedienbar und bekommt den globalen :focus-visible-Ring. */ .bt-haken { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex-shrink: 0; border: 1px solid #4A443A; border-radius: 2px; background: transparent; cursor: pointer; display: inline-grid; place-content: center; transition: background 140ms ease, border-color 140ms ease; } .bt-haken::before { content: "✓"; color: #0C0B09; font-size: 13px; font-weight: 800; line-height: 1; opacity: 0; transform: scale(0.55); transition: opacity 120ms ease, transform 170ms cubic-bezier(0.34, 1.56, 0.64, 1); } .bt-haken:checked { background: #E8A030; border-color: #E8A030; } .bt-haken:checked::before { opacity: 1; transform: scale(1); } .bt-link { background: transparent; border: none; padding: 0; cursor: pointer; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; color: #E8A030; transition: opacity 140ms ease; } .bt-link:hover { opacity: 0.72; } @keyframes bt-stempel { 0% { opacity: 0; transform: rotate(-17deg) scale(1.65); } 55% { opacity: 1; } 100% { opacity: 1; transform: rotate(-5deg) scale(1); } } .bt-stempel { animation: bt-stempel 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes bt-rein { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .bt-rein { animation: bt-rein 320ms cubic-bezier(0.22, 1, 0.36, 1) both; } @media (max-width: 640px) { .bt-nurbreit { display: none !important; } } @media (prefers-reduced-motion: reduce) { .bh-page, .bt-stempel, .bt-rein, .bh-shimmer { animation: none !important; } .bh-panel-unten, .bh-panel-links, .bh-abdunkler { animation: none !important; } .bt-zeile, .bh-navknopf, .bd-getraenk, .bd-bestaetigen, .bd-nachbar, .bz-btn-primary, .bz-btn-secondary { transition: none; } .bz-btn-primary:active, .bz-btn-secondary:active, .bd-bestaetigen:active, .bh-navknopf:active { transform: none; } } /* ── Startseite 2026-09: Glas und Bewegung ───────────────────────────────── Eine Bewegung je Baustein, einmal beim ersten Sichtkontakt (.bh-da setzt der Hook useSichtbar). Alles endet in einem lesbaren Ruhezustand. Das Glas steht nicht hier, sondern als `glas` in components/landing/stil.tsx — die Landing setzt es inline. */ .bh-ein { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0s); } /* Zwei Schreibweisen je Regel: .bh-da sitzt mal auf dem Element selbst, mal auf dem Abschnitt darueber — dann tragen die Kinder nur .bh-ein. */ .bh-ein.bh-da, .bh-da .bh-ein { opacity: 1; transform: none; } .bh-wachs { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .6s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0s); } .bh-da .bh-wachs { transform: none; } .bh-fuell { width: 0; transition: width 1.2s cubic-bezier(.22,1,.36,1) .4s; } .bh-da .bh-fuell { width: var(--breite); } .bh-route { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease-in-out .5s; } .bh-da .bh-route { stroke-dashoffset: 0; } .bh-zoom-aus { animation: bhZoomAus 1.8s cubic-bezier(.22,1,.36,1) both; } @keyframes bhZoomAus { from { transform: scale(1.04); } to { transform: none; } } .bh-hero-karte { transition: height .55s cubic-bezier(.22,1,.36,1); } .bh-such-zeile:hover { background: rgba(245,239,220,.06); } /* Schimmer hinter der Index-Skala (Kennzahlen.tsx): atmet langsam zwischen halb und fast voll sichtbar - die einzige Dauerbewegung der Seite, Vorgabe aus Fabians Claude-Design. */ .bh-atmen { opacity: .75; animation: bhAtmen 20s ease-in-out infinite alternate; } @keyframes bhAtmen { from { opacity: .55; } to { opacity: .95; } } @media (prefers-reduced-motion: reduce) { .bh-ein, .bh-wachs, .bh-fuell, .bh-route { transition: none; } .bh-ein { opacity: 1; transform: none; filter: none; } .bh-wachs { transform: none; } .bh-fuell { width: var(--breite); } .bh-route { stroke-dashoffset: 0; } .bh-zoom-aus { animation: none; } .bh-hero-karte { transition: none; } .bh-atmen { animation: none; } }