/* ============================================================ style.css – Bremthaler Stuben ============================================================ WARTUNGSHINWEIS – Farben ändern: Suche nach "145" (Grün-Farbton) und ersetze es durch: 0 = Rot | 30 = Orange | 60 = Gelb 200 = Cyan | 260 = Blau | 300 = Lila Alle oklch()-Werte mit "145" müssen geändert werden. WARTUNGSHINWEIS – Schriftart ändern: Im von index.php den Google-Fonts-Link anpassen und hier font-family in body und .font-title ändern. ============================================================ */ /* ── Google Fonts werden in index.php eingebunden ── */ /* ── Reset & Basis ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Hintergrundfarbe: sehr dunkles Grün */ --bg: oklch(0.10 0.02 145); /* Kartenfarbe: etwas heller */ --bg-card: oklch(0.13 0.025 145); /* Neon-Grün: Akzentfarbe für Rahmen, Buttons – gedämpfter als zuvor */ --neon: oklch(0.68 0.16 145); /* Heller Neon-Grün: für den Haupttitel – dezenter */ --neon-bright:oklch(0.75 0.18 145); /* Standardtextfarbe */ --text: oklch(0.92 0.03 145); /* Gedimmter Text */ --text-dim: oklch(0.65 0.06 145); /* Rahmenfarbe */ --border: oklch(0.22 0.05 145); /* Rot für Fehlermeldungen / Löschen */ --danger: oklch(0.55 0.22 25); } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Lato', sans-serif; font-size: 16px; line-height: 1.6; min-height: 100vh; } /* Scroll-Offset für fixierte Navbar */ section, [id] { scroll-margin-top: 64px; } img { max-width: 100%; display: block; } a { color: var(--neon); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Typografie ────────────────────────────────────────────── */ /* Cinzel-Schrift für alle Überschriften und Titel */ .font-title { font-family: 'Cinzel', serif; letter-spacing: 0.05em; } /* ── Neon-Effekte ──────────────────────────────────────────── */ /* Dezenter Glow – Haupttitel im Hero (kein Matrix-Effekt) */ .neon-text { color: var(--neon-bright); text-shadow: 0 0 8px oklch(0.68 0.16 145 / 0.5), 0 0 20px oklch(0.55 0.14 145 / 0.25); } /* Sehr dezenter Glow – Überschriften, Navigation */ .neon-dim { color: var(--neon); text-shadow: none; } /* Dezenter Rahmen – kein starker Glow */ .neon-border { border: 1px solid oklch(0.68 0.16 145 / 0.6) !important; box-shadow: none; } /* Sehr dezenter Box-Schatten */ .neon-glow { box-shadow: 0 0 8px oklch(0.68 0.16 145 / 0.12); } /* Horizontale Trennlinie – ohne Glow */ .neon-divider { height: 1px; background: linear-gradient(to right, transparent, oklch(0.68 0.16 145 / 0.4), transparent); box-shadow: none; border: none; margin: 1.5rem auto; } /* ── Layout-Hilfsmittel ────────────────────────────────────── */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } /* ── Navbar ────────────────────────────────────────────────── */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; display: flex; align-items: center; transition: background 0.3s, border-color 0.3s; } #navbar.scrolled { background: oklch(0.10 0.02 145 / 0.97); backdrop-filter: blur(6px); border-bottom: 1px solid oklch(0.68 0.16 145 / 0.35); box-shadow: none; } #navbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .nav-logo { font-family: 'Cinzel', serif; font-size: 1.1rem; letter-spacing: 0.1em; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { font-size: 0.875rem; font-weight: 500; color: oklch(0.92 0.03 145 / 0.7); transition: color 0.2s; } .nav-links a:hover { color: var(--neon); text-decoration: none; } /* Burger-Button (nur Mobilgeräte) */ #burger { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: 4px; } #mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 99; background: oklch(0.12 0.025 145 / 0.98); border-bottom: 1px solid var(--neon); padding: 1rem 1.5rem; flex-direction: column; gap: 1rem; } #mobile-menu a { font-size: 1rem; color: oklch(0.92 0.03 145 / 0.8); } #mobile-menu.open { display: flex; } @media (max-width: 767px) { .nav-links { display: none; } #burger { display: block; } } /* ── Hero-Sektion ──────────────────────────────────────────── */ #hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; /* Hintergrundbild wird per inline-style in index.php gesetzt */ } .hero-overlay { position: absolute; inset: 0; background: oklch(0.06 0.015 145 / 0.88); } .hero-frame { position: absolute; inset: 2rem; border: 1px solid oklch(0.68 0.16 145 / 0.2); opacity: 1; pointer-events: none; } @media (min-width: 768px) { .hero-frame { inset: 4rem; } } .hero-content { position: relative; z-index: 1; padding: 0 1.5rem; } .hero-pre { font-family: 'Cinzel', serif; letter-spacing: 0.4em; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 0.75rem; } .hero-title { font-family: 'Cinzel', serif; font-size: clamp(2.2rem, 8vw, 6rem); line-height: 1.1; margin-bottom: 0.5rem; } .hero-tagline { font-family: 'Cinzel', serif; font-size: clamp(1rem, 3vw, 1.8rem); letter-spacing: 0.3em; margin-top: 0.5rem; } .hero-sub { color: oklch(0.92 0.03 145 / 0.6); font-size: 0.9rem; max-width: 400px; margin: 0 auto; line-height: 1.8; } .hero-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 3rem; color: oklch(0.92 0.03 145 / 0.4); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.2s; } .hero-scroll:hover { color: var(--neon); text-decoration: none; } .bounce { animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ── Sektionen allgemein ───────────────────────────────────── */ .section { padding: 5rem 0; } .section-alt { background: oklch(0.11 0.022 145); } .section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .section-icon { color: var(--neon); flex-shrink: 0; } .section-title { font-family: 'Cinzel', serif; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: 0.05em; } /* ── Ankündigungen ─────────────────────────────────────────── */ .announcements-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .announcements-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .announcements-grid { grid-template-columns: repeat(3, 1fr); } } .announcement-card { background: var(--bg-card); border-radius: 6px; padding: 1.25rem; } .announcement-card h3 { font-family: 'Cinzel', serif; font-size: 1.1rem; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .announcement-card p { color: oklch(0.92 0.03 145 / 0.75); font-size: 0.875rem; white-space: pre-wrap; /* Zeilenumbrüche aus DB anzeigen */ } .announcement-date { color: oklch(0.65 0.06 145 / 0.5); font-size: 0.75rem; margin-top: 0.75rem; } .no-announcements { text-align: center; padding: 3rem 0; color: var(--text-dim); font-size: 0.875rem; } /* ── Speisekarte ───────────────────────────────────────────── */ .menu-box { max-width: 36rem; margin: 0 auto; text-align: center; } .menu-desc { color: oklch(0.92 0.03 145 / 0.7); margin-bottom: 2rem; line-height: 1.8; } .menu-card { background: var(--bg-card); border-radius: 6px; padding: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .menu-card svg { color: var(--neon); } .menu-card p { color: oklch(0.92 0.03 145 / 0.6); font-size: 0.875rem; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.5rem; border-radius: 4px; font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.15em; border: 1px solid var(--neon); color: var(--neon); background: transparent; cursor: pointer; transition: background 0.2s; } .btn:hover { background: oklch(0.78 0.22 145 / 0.1); text-decoration: none; } .btn:disabled, .btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .btn-note { color: oklch(0.65 0.06 145 / 0.4); font-size: 0.75rem; } /* ── Impressionen ──────────────────────────────────────────── */ .gallery-desc { text-align: center; color: oklch(0.92 0.03 145 / 0.6); font-size: 0.875rem; margin-bottom: 2rem; } .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-item { position: relative; overflow: hidden; border-radius: 6px; cursor: pointer; border: 1px solid transparent; transition: border-color 0.3s; aspect-ratio: 1; } /* Erstes Bild nimmt auf Mobilgeräten 2 Spalten ein */ .gallery-item:first-child { grid-column: span 2; } @media (min-width: 768px) { .gallery-item:first-child { grid-column: span 1; } } .gallery-item:hover { border-color: var(--neon); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .gallery-item:hover img { transform: scale(1.05); } .gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5rem 0.75rem; background: oklch(0.08 0.02 145 / 0); color: transparent; font-size: 0.75rem; transition: all 0.3s; } .gallery-item:hover .gallery-caption { background: oklch(0.08 0.02 145 / 0.5); color: oklch(0.92 0.03 145 / 0.9); } /* Lightbox */ #lightbox { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; padding: 1rem; } #lightbox.open { display: flex; } #lightbox img { max-height: 85vh; max-width: 100%; border-radius: 6px; box-shadow: 0 0 12px oklch(0.68 0.16 145 / 0.2); } #lightbox-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: rgba(255,255,255,0.7); font-size: 2rem; cursor: pointer; line-height: 1; } #lightbox-close:hover { color: #fff; } /* ── Adresse ───────────────────────────────────────────────── */ .address-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .address-grid { grid-template-columns: 1fr 1fr; align-items: start; } } .address-card { background: var(--bg-card); border-radius: 6px; padding: 1.75rem; } .address-card h3 { font-family: 'Cinzel', serif; font-size: 1.4rem; letter-spacing: 0.05em; margin-bottom: 1rem; } address { font-style: normal; color: oklch(0.92 0.03 145 / 0.8); line-height: 2; font-size: 0.9rem; } .map-container { height: 18rem; border-radius: 6px; overflow: hidden; } .map-container iframe { width: 100%; height: 100%; border: none; filter: invert(90%) hue-rotate(145deg) saturate(0.3) brightness(0.85); /* Karte im Grün-Stil einfärben */ } /* ── Footer ────────────────────────────────────────────────── */ footer { background: oklch(0.08 0.015 145); border-top: 1px solid oklch(0.68 0.16 145 / 0.3); box-shadow: none; padding: 2rem 0; text-align: center; } footer .footer-name { font-family: 'Cinzel', serif; font-size: 1.1rem; letter-spacing: 0.15em; margin-bottom: 0.25rem; } footer .footer-addr { color: oklch(0.65 0.06 145 / 0.5); font-size: 0.8rem; } footer .footer-copy { color: oklch(0.65 0.06 145 / 0.3); font-size: 0.75rem; margin-top: 0.75rem; } /* ── Responsive Feintuning ─────────────────────────────────── */ @media (max-width: 480px) { .section { padding: 3.5rem 0; } .hero-frame { display: none; } } /* ── Öffnungszeiten ────────────────────────────────────────── */ /* WARTUNG: Farben der Zeilen über .open, .event, .closed anpassen */ .hours-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; max-width: 56rem; margin: 0 auto; } @media (min-width: 640px) { .hours-grid { grid-template-columns: 1fr 1fr; align-items: start; } } .hours-card { background: var(--bg-card); border-radius: 6px; overflow: hidden; } .hours-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; border-bottom: 1px solid oklch(0.68 0.16 145 / 0.1); gap: 1rem; } .hours-row:last-child { border-bottom: none; } /* Offene Tage: leicht grüner Hintergrund */ .hours-row.open { background: oklch(0.68 0.16 145 / 0.07); } /* Event-Samstag: leicht goldener Ton */ .hours-row.event { background: oklch(0.65 0.12 80 / 0.07); } .hours-day { font-family: 'Cinzel', serif; font-size: 0.875rem; letter-spacing: 0.04em; color: var(--text); } /* Öffnungszeit-Text für offene Tage */ .hours-time { font-size: 0.875rem; color: var(--neon); font-weight: 500; text-align: right; } /* Geschlossen-Text: gedimmt */ .hours-time.closed { color: var(--text-dim); font-weight: 400; } /* Event-Zeit: goldener Ton */ .hours-row.event .hours-time { color: oklch(0.72 0.14 80); } /* Hinweis-Box neben der Tabelle */ .hours-note { background: var(--bg-card); border-radius: 6px; padding: 1.5rem; display: flex; align-items: center; } .hours-note p { color: oklch(0.92 0.03 145 / 0.7); font-size: 0.9rem; line-height: 1.8; }