/* ============================================================ Boogie Bar Stade — Globales Stylesheet Mobile-first. Reihenfolge im : fonts.css, variables.css, style.css ============================================================ */ /* ---------- Reset ---------- */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--text); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } ul { list-style: none; } :focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; border-radius: 4px; } /* Ambient-Hintergrund-Glow */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60vw 60vw at 12% -5%, rgba(255,46,154,.16), transparent 60%), radial-gradient(55vw 55vw at 100% 8%, rgba(46,230,214,.12), transparent 60%), radial-gradient(70vw 70vw at 50% 115%, rgba(155,48,255,.18), transparent 60%); } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-3); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); position: relative; } .section--alt { background: var(--bg-2); } .stack > * + * { margin-top: var(--sp-3); } /* ---------- Typografie ---------- */ /* Lange deutsche Komposita ("Datenschutzerklärung") passen auf schmalen Schirmen in keine Zeile und schoben die Seite auseinander — daher Silbentrennung statt Überlauf. */ h1,h2,h3,h4 { font-weight: 800; line-height: 1.08; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; } p { color: var(--text-dim); } strong { color: var(--text); font-weight: 600; } .eyebrow { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: .12em; color: var(--turq); text-transform: uppercase; display: inline-block; margin-bottom: var(--sp-2); text-shadow: 0 0 12px rgba(46,230,214,.5); } .neon-text { background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-head { max-width: 640px; margin-bottom: var(--sp-6); } .section-head p { margin-top: var(--sp-2); } .text-center { text-align: center; } .section-head.text-center { margin-inline: auto; } /* ---------- Buttons ---------- */ .btn { --_pad: .85em 1.6em; display: inline-flex; align-items: center; gap: .55em; padding: var(--_pad); border-radius: var(--r-btn); font-weight: 600; font-size: 1rem; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background .3s; min-height: 48px; } .btn:active { transform: translateY(1px) scale(.99); } .btn--primary { background: var(--grad-primary); color: #fff; font-weight: 700; box-shadow: var(--glow-pink); } .btn--primary:hover { box-shadow: 0 0 34px rgba(255,46,154,.7); transform: translateY(-2px); } .btn--secondary { background: transparent; color: var(--text); border-color: var(--turq); box-shadow: inset 0 0 0 rgba(46,230,214,0); } .btn--secondary:hover { box-shadow: var(--glow-turq), inset 0 0 20px rgba(46,230,214,.12); transform: translateY(-2px); } .btn--ghost { background: var(--card); border-color: var(--line); } .btn--ghost:hover { border-color: var(--purple); box-shadow: var(--glow-purple); } .btn--wa { background: #25D366; color: #06331a; font-weight: 700; } .btn--wa:hover { box-shadow: 0 0 26px rgba(37,211,102,.6); transform: translateY(-2px); } .btn--lg { --_pad: 1.05em 2.1em; font-size: 1.05rem; } .btn--block { width: 100%; justify-content: center; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: rgba(13,6,32,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; } .site-header.is-scrolled { background: rgba(13,6,32,.9); border-bottom-color: var(--line); } /* Drei ausbalancierte Spalten: Marke links, Navigation exakt mittig, Reservieren rechts. Die beiden Außenspalten sind gleich breit (1fr), dadurch sitzt die Navigation optisch zentriert — und nicht, wie bei space-between, irgendwo zwischen zwei unterschiedlich breiten Blöcken. */ .site-header .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); } .brand { display: flex; align-items: center; gap: .6rem; justify-self: start; } .brand__logo { height: 42px; width: auto; filter: drop-shadow(0 0 10px rgba(155,48,255,.4)); transition: filter .3s var(--ease); } .brand:hover .brand__logo { filter: drop-shadow(0 0 16px rgba(155,48,255,.7)); } .nav { display: flex; align-items: center; gap: var(--sp-3); } .nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 1.9rem); } .nav__links a { display: inline-flex; align-items: center; font-size: .95rem; font-weight: 500; color: var(--text-dim); position: relative; height: 34px; transition: color .25s; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad-primary); transition: right .3s var(--ease); } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; } .nav__cta { display: inline-flex; } /* Der Header-CTA etwas kompakter als die Flächen-Buttons — sonst kippt das Gleichgewicht der Zeile nach rechts. */ .nav__cta .btn { --_pad: .7em 1.5em; font-size: .95rem; min-height: 42px; } /* Ab Desktop lösen sich die Nav-Kinder in das Header-Grid auf, damit die Linkliste die echte Mittelspalte belegt. Mobil bleibt .nav das ausklappbare Panel (siehe unten) und behält sein eigenes Layout. */ @media (min-width: 901px) { .nav { display: contents; } .nav__links { justify-self: center; } .nav__cta { justify-self: end; } } .nav__toggle { display: none; width: 46px; height: 46px; background: transparent; border: 0; cursor: pointer; position: relative; } .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 11px; width: 24px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .2s; } .nav__toggle span { top: 22px; } .nav__toggle span::before { top: -7px; } .nav__toggle span::after { top: 7px; } .nav__toggle[aria-expanded="true"] span { background: transparent; } .nav__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { /* Mobil wieder zwei Blöcke: Marke links, Burger rechts */ .site-header .container { display: flex; justify-content: space-between; } .nav__toggle { display: block; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(13,6,32,.98); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); padding: var(--sp-2) var(--sp-3) var(--sp-4); transform: translateY(-140%); transition: transform .4s var(--ease); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .nav.is-open { transform: translateY(0); } .nav__links { flex-direction: column; align-items: stretch; gap: 0; } /* Im Menü zählt Daumen-Bedienbarkeit: mind. 48px hohe Ziele. Die kompakte Kopfzeilen-Größe von .nav__cta .btn gilt nur für den Desktop-Header. */ .nav__links a { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; display: flex; align-items: center; min-height: 48px; } .nav__links a::after { display: none; } .nav__cta { margin-top: var(--sp-3); } .nav__cta .btn { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; } } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); box-shadow: var(--shadow-card); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; position: relative; overflow: hidden; } .card:hover { transform: translateY(-4px); border-color: var(--purple); box-shadow: var(--shadow-card), var(--glow-purple); } .card__icon { width: 52px; height: 52px; margin-bottom: var(--sp-2); color: var(--turq); } .card h3 { margin-bottom: var(--sp-1); } .card p { font-size: .98rem; } .grid { display: grid; gap: var(--sp-3); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } } /* Day-Karten (Do/Fr/Sa) */ .day-card { text-align: left; } .day-card__tag { font-family: var(--font-display); font-size: .8rem; letter-spacing: .1em; color: var(--pink); text-transform: uppercase; display: flex; align-items: center; gap: .5rem; } /* Gleiches Emoji wie im "Heute im Boogie"-Kasten — verknüpft beide Stellen. */ .day-card__emoji { font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 0 12px rgba(255,46,154,.45)); } .day-card__time { color: var(--text-faint); font-size: var(--fs-small); } /* ---------- Forms ---------- */ .form { display: grid; gap: var(--sp-3); } .form__row { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; } @media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } } .field { display: grid; gap: .4rem; } .field label { font-size: var(--fs-small); font-weight: 600; color: var(--text); } .field .req { color: var(--pink); } .field input, .field textarea, .field select { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; min-height: 48px; width: 100%; transition: border-color .25s, box-shadow .25s; } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--turq); box-shadow: var(--glow-turq); } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-small); color: var(--text-dim); } .consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--pink); flex-shrink: 0; } .consent a { color: var(--turq); text-decoration: underline; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Honeypot */ .form-note { font-size: var(--fs-small); color: var(--text-faint); } .form-status { border-radius: 12px; padding: var(--sp-2) var(--sp-3); font-size: .95rem; display: none; } .form-status.is-ok { display: block; background: rgba(46,230,214,.12); border: 1px solid var(--turq); color: var(--turq); } .form-status.is-err { display: block; background: rgba(255,46,154,.12); border: 1px solid var(--pink); color: var(--pink); } /* ---------- Reveal-Animation beim Scrollen ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: var(--sp-8) var(--sp-4); } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-4); } @media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); } } @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } } .footer__brand p { font-size: .95rem; margin-top: var(--sp-2); max-width: 34ch; } .site-footer h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--turq); font-family: var(--font-display); font-weight: 400; margin-bottom: var(--sp-2); } .site-footer ul { display: grid; gap: .55rem; } .site-footer a { color: var(--text-dim); font-size: .95rem; transition: color .2s; } .site-footer a:hover { color: var(--text); } .footer__hours dt { color: var(--text); font-weight: 600; font-size: .95rem; } .footer__hours dd { color: var(--text-dim); font-size: .95rem; margin-bottom: .4rem; } .footer__social { display: flex; gap: .8rem; margin-top: var(--sp-2); } .footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: .25s; } .footer__social a:hover { border-color: var(--pink); box-shadow: var(--glow-pink); color: var(--pink); } .footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; align-items: center; margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-faint); } .footer__bottom a { color: var(--text-faint); } .footer__bottom a:hover { color: var(--text); } .footer__legal { display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* ---------- Cookie-Consent ---------- */ .consent-banner { position: fixed; z-index: 200; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(160%); width: min(680px, calc(100% - 32px)); background: var(--card); border: 1px solid var(--purple); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-card), var(--glow-purple); transition: transform .5s var(--ease); opacity: 0; } .consent-banner.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } .consent-banner h3 { font-size: 1.1rem; margin-bottom: .4rem; } .consent-banner p { font-size: .9rem; } .consent-banner p a { color: var(--turq); text-decoration: underline; } .consent-toggles { display: grid; gap: .5rem; margin: var(--sp-2) 0; } .consent-toggles label { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--text); } .consent-toggles input { width: 18px; height: 18px; accent-color: var(--pink); } .consent-toggles input:disabled { accent-color: var(--text-faint); } .consent-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--sp-2); } .consent-actions .btn { font-size: .9rem; padding: .7em 1.3em; min-height: 42px; } /* Auf dem Handy stehen die Consent-Buttons untereinander statt gequetscht nebeneinander — und groß genug für den Daumen. */ @media (max-width: 560px) { .consent-actions { display: grid; grid-template-columns: 1fr; } .consent-actions .btn { width: 100%; justify-content: center; min-height: 48px; } } /* Consent-Platzhalter für Embeds */ .embed-placeholder { display: grid; place-items: center; text-align: center; gap: var(--sp-2); min-height: 320px; padding: var(--sp-4); background: var(--card); border: 1px dashed var(--purple); border-radius: var(--r-card); color: var(--text-dim); } .embed-placeholder svg { width: 42px; height: 42px; color: var(--purple); } .embed-frame { width: 100%; border: 0; border-radius: var(--r-card); min-height: 320px; } /* ---------- Galerie / Lightbox ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); } @media (max-width: 720px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Hochformat: die Bar-Fotos sind alle im Handy-Format (3:4) aufgenommen — in Querformat-Kacheln würde object-fit oben und unten stark beschneiden. */ .gallery-grid figure { margin: 0; border-radius: var(--r-img); overflow: hidden; cursor: pointer; position: relative; aspect-ratio: 3/4; background: var(--card); } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .gallery-grid figure:hover img { transform: scale(1.06); } .gallery-grid figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(155,48,255,.35)); opacity: 0; transition: opacity .3s; } .gallery-grid figure:hover::after { opacity: 1; } .lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(4,2,12,.92); display: none; place-items: center; padding: var(--sp-3); } .lightbox.is-open { display: grid; } .lightbox img { max-width: min(1100px, 94vw); max-height: 86vh; border-radius: var(--r-img); box-shadow: var(--glow-purple); } .lightbox__close, .lightbox__nav { position: absolute; background: var(--card); border: 1px solid var(--line); color: var(--text); width: 52px; height: 52px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.4rem; } .lightbox__close { top: 20px; right: 20px; } .lightbox__nav { top: 50%; transform: translateY(-50%); } .lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; } .lightbox__nav:hover, .lightbox__close:hover { border-color: var(--pink); box-shadow: var(--glow-pink); } /* ---------- Google-Bewertungen (Platzhalter) ---------- Struktur steht, Inhalte kommen später. Die gestrichelten Rahmen sind dieselbe Platzhalter-Sprache wie bei .photo-ph und .embed-placeholder. */ .reviews { display: grid; gap: var(--sp-4); } .reviews__summary { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; text-align: left; } .reviews__score { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--text-faint); /* Platzhalter bewusst neutral */ } /* Sobald echte Werte kommen: diese Klasse am Score ergänzen, dann trägt die Note den Neon-Verlauf der Marke. Als Platzhalter wäre der Verlauf auf einem Gedankenstrich nur unruhig. */ .reviews__score--live { background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; color: transparent; } .reviews__stars { color: var(--gold); letter-spacing: .12em; font-size: 1.15rem; } .reviews__count { font-size: var(--fs-small); color: var(--text-faint); margin-top: .2rem; } .reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } @media (max-width: 900px) { .reviews__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } } .reviews__card { display: grid; gap: .6rem; align-content: start; padding: var(--sp-3); background: var(--card); border: 1px dashed var(--line); border-radius: var(--r-card); } .reviews__card p { font-size: .98rem; } .reviews__author { font-size: var(--fs-small); color: var(--turq); font-weight: 600; } /* ---------- Page-Hero (Unterseiten) ---------- */ .page-hero { padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-6); text-align: center; position: relative; } .page-hero h1 { max-width: 18ch; margin-inline: auto; } .page-hero p { max-width: 52ch; margin: var(--sp-2) auto 0; } /* ---------- "Heute im Boogie"-Widget ---------- */ .today { border: 1px solid var(--pink); border-radius: var(--r-card); background: linear-gradient(160deg, rgba(255,46,154,.10), rgba(155,48,255,.06)); padding: var(--sp-4); box-shadow: var(--glow-pink); /* Die Textspalte nimmt nur so viel Breite, wie sie braucht (auto) — der Rest ist eine eigene Spalte, in der das Emoji mittig sitzt. Mit "1fr" für den Text klebte es stattdessen am rechten Kartenrand. */ display: grid; grid-template-columns: minmax(0, auto) 1fr; align-items: center; /* column-gap bewusst 0: das Emoji wird in SEINER Spalte zentriert. Mit Abstand begänne die Spalte erst hinter dem Zwischenraum und das Emoji säße um die halbe gap-Breite zu weit rechts. Luft zum Text entsteht ohnehin durch die Zentrierung. */ column-gap: 0; row-gap: var(--sp-3); } .today__main { display: grid; gap: var(--sp-2); min-width: 0; } /* Eigene Zeile unter Text UND Emoji — so bestimmen nur die Textzeilen die Breite der ersten Spalte. */ .today__actions { grid-column: 1 / -1; } /* Das Emoji ist reine Deko (aria-hidden) und wechselt mit dem Event. */ .today__emoji { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; font-size: clamp(4.5rem, 17vw, 9.5rem); line-height: 1; filter: drop-shadow(0 0 30px rgba(255,46,154,.55)); /* Gleiche Bildsprache wie die schwebende Säule: leichtes Auf und Ab mit Neigung — lebendig, ohne vom Countdown abzulenken. */ animation: todayEmojiFloat 5s ease-in-out infinite; } @keyframes todayEmojiFloat { 0% { transform: translateY(-8px) rotate(-8deg); } 50% { transform: translateY(8px) rotate(8deg); } 100% { transform: translateY(-8px) rotate(-8deg); } } @media (prefers-reduced-motion: reduce) { .today__emoji { animation: none; } } .today__state { font-family: var(--font-display); font-size: 1rem; letter-spacing: .08em; color: var(--turq); } .today__state.is-open { color: var(--turq); } .today__state.is-closed { color: var(--gold); } .today__title { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; } .today__meta { color: var(--text-dim); } .today__note { color: var(--gold); font-weight: 600; font-size: var(--fs-small); } .today__countdown { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); flex-wrap: wrap; } .today__unit { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .5rem .9rem; text-align: center; min-width: 62px; } .today__unit b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .today__unit span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } .today__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* Mobil: Emoji wandert über den Text, Buttons werden volle Breite. */ @media (max-width: 620px) { .today { grid-template-columns: 1fr; gap: var(--sp-2); } /* Einspaltig gibt es keine freie Fläche zum Zentrieren — das Emoji steht linksbündig über dem Text und schwebt mit kleinerer Amplitude. */ .today__emoji { grid-column: 1; font-size: 3.5rem; justify-self: start; } @keyframes todayEmojiFloat { 0% { transform: translateY(-4px) rotate(-6deg); } 50% { transform: translateY(4px) rotate(6deg); } 100% { transform: translateY(-4px) rotate(-6deg); } } .today__unit { flex: 1 1 0; min-width: 0; padding: .5rem .4rem; } .today__actions { display: grid; grid-template-columns: 1fr; } .today__actions .btn { width: 100%; justify-content: center; } } /* ---------- Preis-/Menu-Listen ---------- */ .menu-cat { margin-bottom: var(--sp-6); } .menu-cat h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--sp-3); color: var(--text); } .menu-cat h3::after { content: ""; flex: 1; height: 1px; background: var(--line); } .menu-item { display: flex; align-items: baseline; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); } .menu-item__name { font-weight: 600; color: var(--text); white-space: nowrap; } .menu-item__desc { color: var(--text-faint); font-size: .9rem; flex: 1; } .menu-item__dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); } .menu-item__price { font-weight: 700; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Mobil: Name + Preis in Zeile 1, Beschreibung darunter. Die Führungspunkte entfallen — sie brauchen Breite, die auf dem Handy fehlt. Ohne das erzwingt das nowrap der Namen eine Mindestbreite > Viewport (horizontales Scrollen). */ @media (max-width: 620px) { .menu-item { flex-wrap: wrap; column-gap: .6rem; row-gap: .15rem; } .menu-item__name { white-space: normal; } .menu-item__dots { display: none; } .menu-item__desc { flex: 1 1 100%; order: 3; } .menu-item__price { margin-left: auto; } } /* ---------- Legal-Seiten ---------- */ .legal { max-width: var(--container-narrow); } .legal h2 { font-size: 1.4rem; margin-top: var(--sp-6); margin-bottom: var(--sp-2); } .legal h3 { margin-top: var(--sp-4); margin-bottom: var(--sp-1); } .legal p, .legal li { color: var(--text-dim); } .legal ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: .3rem; } .legal a { color: var(--turq); text-decoration: underline; } .legal .placeholder { color: var(--gold); background: rgba(255,194,75,.1); padding: .05em .4em; border-radius: 5px; } /* ---------- Utilities ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; } @media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: var(--sp-4); } /* Zweispaltig wechseln sich Bild und Text bewusst ab (Zickzack: Do Bild links, Fr Bild rechts, Sa Bild links). Einspaltig gestapelt wird daraus eine unruhige Folge Bild-Text / Text-Bild / Bild-Text. Deshalb steht das Event-Bild auf schmalen Schirmen immer zuerst — jeder Tag liest sich dann gleich. Greift nur, wo es ein .event-art gibt (nur programm.html); alle anderen .split-Bereiche bleiben unberührt. */ .split .event-art { order: -1; } } .cta-band { text-align: center; background: var(--grad-primary); border-radius: var(--r-card); padding: var(--sp-8) var(--sp-4); box-shadow: var(--glow-pink); } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255,255,255,.9); margin: var(--sp-2) auto var(--sp-4); max-width: 46ch; } .cta-band .btn--primary { background: #fff; color: var(--purple); } .cta-band .btn--primary:hover { box-shadow: 0 0 30px rgba(255,255,255,.6); } .alt-contact { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Foto-Platzhalter (echte Bilder liefert der Kunde) */ .photo-ph { aspect-ratio: 4/3; border-radius: var(--r-img); background: linear-gradient(135deg, var(--card-2), var(--card)); border: 1px dashed var(--line); display: grid; place-items: center; text-align: center; color: var(--text-faint); gap: .5rem; padding: 1rem; } .photo-ph svg { width: 34px; height: 34px; opacity: .55; } .photo-ph span { font-size: .78rem; letter-spacing: .05em; } .photo-ph--tall { aspect-ratio: 3/4; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--pink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* Echte Fotos: gleiche Rundung/Proportion wie die Platzhalter, damit Layouts identisch bleiben, sobald ein .photo-ph ersetzt wird. */ .photo { border-radius: var(--r-img); overflow: hidden; background: var(--card); } .photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo--4x3 { aspect-ratio: 4/3; } .photo--3x4 { aspect-ratio: 3/4; } .photo--1x1 { aspect-ratio: 1/1; } /* ============================================================ Ticket-Banner (Eventim) — komplett klickbar, bewusst laut. Sitzt ÜBER dem Wochenprogramm: das ist der Umsatzbringer. ============================================================ */ .event-banner { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4); border-radius: var(--r-card); background: linear-gradient(120deg, rgba(255,46,154,.22), rgba(155,48,255,.18) 45%, rgba(255,194,75,.20)), var(--card); border: 1px solid rgba(255,194,75,.45); box-shadow: 0 0 0 1px rgba(255,46,154,.15), var(--glow-soft); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .event-banner::after { /* wandernder Lichtstreifen — signalisiert "hier ist was los" */ content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.13) 50%, transparent 65%); transform: translateX(-100%); animation: banner-sheen 5.5s var(--ease) infinite; pointer-events: none; } @keyframes banner-sheen { 0%,68% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .event-banner:hover, .event-banner:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255,194,75,.5), 0 22px 60px -18px rgba(255,46,154,.55); } .event-banner__badge { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--grad-primary); box-shadow: var(--glow-pink); font-size: 2rem; line-height: 1; } .event-banner__kicker { font-family: var(--font-display); font-size: .85rem; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; text-shadow: 0 0 5px rgba(255,255,255,.55), 0 0 16px rgba(255,194,75,.95); display: block; margin-bottom: .4rem; } .event-banner__body { min-width: 0; } .event-banner__title { font-size: clamp(1.3rem, 2.8vw, 2rem); color: #fff; margin: 0; } .event-banner__meta { color: var(--text); font-weight: 600; font-size: var(--fs-small); margin: .5rem 0 0; } .event-banner__meta span { color: var(--gold); } .event-banner__cta { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; padding: .85em 1.5em; border-radius: var(--r-btn); background: var(--gold); color: #2A1400; font-weight: 700; box-shadow: 0 0 22px rgba(255,194,75,.45); } .event-banner:hover .event-banner__cta { box-shadow: 0 0 34px rgba(255,194,75,.75); } @media (max-width: 780px) { .event-banner { grid-template-columns: auto 1fr; text-align: left; } .event-banner__cta { grid-column: 1 / -1; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .event-banner::after { animation: none; } .event-banner:hover { transform: none; } } /* ============================================================ Event-Grafik: gestaltete Kachel je Abend (steht dort, wo sonst ein Foto liegt). Kein Platzhalter-Look — bewusst als Grafik gebaut. ============================================================ */ .event-art { position: relative; aspect-ratio: 4/3; border-radius: var(--r-img); overflow: hidden; display: grid; place-items: center; align-content: center; gap: var(--sp-2); padding: var(--sp-4); text-align: center; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, var(--_art-glow, rgba(155,48,255,.38)), transparent 70%), linear-gradient(150deg, var(--card-2), var(--card)); } .event-art::before { /* feines Punktraster: gibt der Fläche Textur statt leerem Kasten */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(75% 65% at 50% 45%, #000 25%, transparent 78%); -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 25%, transparent 78%); pointer-events: none; } .event-art > * { position: relative; } .event-art__glyph { font-size: clamp(3rem, 8vw, 5rem); line-height: 1; filter: drop-shadow(0 0 26px var(--_art-glow, rgba(155,48,255,.7))); } .event-art__title { font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.75rem); letter-spacing: .06em; text-transform: uppercase; color: #fff; /* Monoton ist eine Röhrenschrift mit dünnen Konturen — ohne kräftigen, mehrlagigen Schein wirkt sie auf dunklem Grund ausgewaschen. */ text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 16px var(--_art-hot, rgba(155,48,255,1)), 0 0 38px var(--_art-hot, rgba(155,48,255,.85)); } .event-art__chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .event-art__chips span { font-size: .74rem; font-weight: 600; letter-spacing: .04em; padding: .4em .85em; border-radius: var(--r-btn); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); color: var(--text); } .event-art--quiz { --_art-glow: rgba(46,230,214,.42); --_art-hot: rgba(46,230,214,.95); } .event-art--beer { --_art-glow: rgba(255,194,75,.42); --_art-hot: rgba(255,194,75,.95); } .event-art--tower { --_art-glow: rgba(255,46,154,.42); --_art-hot: rgba(255,46,154,.95); } /* ============================================================ Instagram-Karte — komplett klickbar, lädt nichts von Meta nach. Bewusst kein Embed: der Feed bräuchte einen Drittanbieter, der Nutzerdaten überträgt. So bleibt die Seite consent-frei schnell. ============================================================ */ .ig-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); max-width: 640px; margin-inline: auto; padding: var(--sp-4); border-radius: var(--r-card); background: linear-gradient(120deg, rgba(255,46,154,.16), rgba(155,48,255,.16) 60%, rgba(255,194,75,.14)), var(--card); border: 1px solid var(--line); box-shadow: var(--glow-soft); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .ig-card:hover, .ig-card:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 55px -18px rgba(255,46,154,.5); } .ig-card__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(45deg, #F9CE34, #EE2A7B 50%, #6228D7); color: #fff; } .ig-card__icon svg { width: 30px; height: 30px; } .ig-card__handle { font-weight: 700; color: var(--text); font-size: 1.05rem; } .ig-card__meta { font-size: var(--fs-small); color: var(--text-dim); margin-top: .15rem; } .ig-card__cta { padding: .8em 1.4em; border-radius: var(--r-btn); background: var(--grad-primary); color: #fff; font-weight: 700; white-space: nowrap; box-shadow: var(--glow-pink); } /* Reservierungs-Hinweis unter der IG-Karte — Reservierungen laufen per DM. */ .ig-reserve { max-width: 640px; margin: var(--sp-3) auto 0; padding: var(--sp-3); text-align: center; border: 1px dashed var(--pink); border-radius: var(--r-card); background: rgba(255,46,154,.07); display: grid; gap: .35rem; justify-items: center; } .ig-reserve__emoji { font-size: 1.6rem; line-height: 1; } .ig-reserve strong { color: var(--text); font-size: 1.05rem; } .ig-reserve span:last-child { color: var(--text-dim); font-size: var(--fs-small); } @media (max-width: 560px) { .ig-card { grid-template-columns: auto 1fr; text-align: left; } .ig-card__cta { grid-column: 1 / -1; text-align: center; } } @media (prefers-reduced-motion: reduce) { .ig-card:hover { transform: none; } } .reviews__when { color: var(--text-faint); font-weight: 400; }