/* ================================== */ /* === 1. VARIABLEN & GLOBALER RESET === */ /* ================================== */ :root { --accent: #000000; --bg: #f6f9ee; --bg-2: #c6d638; /* Header-Farbe */ --text: #4c413d; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Globales Layout: Scrollbar immer sichtbar, aber am */ html { scroll-behavior: smooth; overflow-y: scroll; /* Verhindert Layout-Sprünge */ height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); color: var(--text); font-family: 'Times New Roman', Times, serif, Arial, Helvetica, sans-serif; padding-bottom: 30px; /* Platz für Cookie-Banner */ } /* =========================== */ /* === 2. HEADER & NAVIGATION === */ /* =========================== */ header { background: var(--bg-2); color: #222222; position: fixed; top: 0; width: 100%; z-index: 1000; border-bottom: 3px solid #ff9900; height: 80px; } .header-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 100%; } .brand-group { display: flex; align-items: center; height: 100%; } header .logo { height: 80px; display: block; } .header-slogan { font-size: 1.8em; font-weight: 700; color: #333c48; margin-left: 15px; white-space: nowrap; } nav { flex-shrink: 1; min-width: 0; display: flex; align-items: center; } header nav a { white-space: nowrap; color: #ffffff; text-decoration: none; margin-left: 18px; font-weight: 700; font-size: 18px; transition: color 0.2s ease; } header nav a:hover { color: #738000; } header nav a.active { color: #333c48; border-bottom: 1px solid #000000; } .burger { display: none; flex-direction: column; justify-content: center; cursor: pointer; width: 30px; height: 25px; gap: 5px; } .burger span { display: block; height: 3px; width: 100%; background: #ffffff; border-radius: 3px; transition: all 0.3s ease; } /* WICHTIG: Freiraum unter dem fixierten Header */ .main-content-wrapper { padding-top: 50px; flex: 1 1 auto; /* Füllt verfügbaren Platz aus */ width: 100%; } /* ================================== */ /* === 3. WIEDERVERWENDBARE ELEMENTE === */ /* ================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 32px 20px; } /* 1. BASIS-STILE (KEINE POSITIONIERUNG!) */ .btn { background-color: #222222; /* Hintergrundfarbe des Buttons (Schwarz wie im Logo) */ color: #c6d638; /* Textfarbe (Gelb wie im Logo) */ /* 👇 HIER ANPASSEN FÜR DIE OVALE FORM */ padding: 3px 15px; border-radius: 6px; border: 2px solid #c6d638; /* Optional: Ein Rand wie im Logo (2px dick, gelb) */ cursor: pointer; text-decoration: none; display: inline-block; transition: background-color 0.2s ease-in-out, transform 0.2s ease, border-color 0.2s ease-in-out; } /* 2. POSITIONIERUNG: Oben zentriert fixiert */ .btn-top-center { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); /* ZENTRIERUNG */ z-index: 1000; } /* 3. HOVER-EFFEKT FÜR DEN OBEREN BUTTON */ .btn-top-center:hover { background-color: #c6d638; color: #222222; border-color: #222222; /* Randfarbe wechselt zu Schwarz */ transform: translateX(-50%) translateY(-2px); } .btn.scroll-top:hover { background-color: #c6d638; color: #222222; border-color: #222222; /* Randfarbe wechselt zu Schwarz */ transform: translateY(-2px); } .btn.scroll-top { /*unterer btn*/ position: fixed; right: 20px; bottom: 30px; z-index: 9999; background-color: #222222; color: #c6d638; } #load-map:disabled { background: #aaa; color: #666; cursor: not-allowed; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .card { background: #816122; border: 1.5px solid #f90; /*umrandung aller cards*/ border-radius: 0px; padding: 30px; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card h3 { margin: 0 0 8px 0; color: var(--accent); } /* ========================= */ /* === 4. SEITEN-SPEZIFISCH === */ /* ========================= */ .hero { position: relative; min-height: 90vh; text-align: center; color: #000000; padding: 40px 20px; overflow: hidden; border-bottom: 3px solid rgba(0, 0, 0, 0.726); } .hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('../images/gaststube_feier.jpg') center/cover no-repeat; background-color: #ffffff; z-index: -1; } .hero-content { position: absolute; top: 10%; right: 80px; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); font-size: 20px; max-width: 40%; } /* SHOP & PRODUCTS */ .product { background: #161616; border: 1px solid rgb(255, 255, 255); border-radius: 14px; overflow: hidden; } .product img { display: block; width: 100%; height: 180px; object-fit: cover; } .product .p-body { padding: 14px; } .product .p-title { margin: 0 0 8px 0; font-weight: 800; } .product .price { color: var(--accent); font-weight: 800; margin-bottom: 12px; } /* GALERIE */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .gallery img { width: 100%; height: 520px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); } /* GETRÄNKE & SPEISEKARTE */ .speisekarte-container { display: flex; flex-direction: column; gap: 10px; } .speisekarte-seite img { display: block; width: 100%; max-width: 900px; margin: 0 auto; border-radius: 12px; box-shadow: 0 4px 20px rgb(0, 0, 0); } /* ===================== */ /* === 5. FOOTER === */ /* ===================== */ footer { border-top: 2px solid #ff9900; background: #c6d638; color: #1e1e1e; width: 100%; position: relative; z-index: 1000; margin-top: auto; /* Drückt Footer nach unten */ } footer .container { max-width: 1400px; margin: 0 auto; padding: 5px 20px 70px 20px; font-size: 18px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } footer a { color: #34015b; text-decoration: underline; font-weight: 500; } footer a:hover { color: #ffffff; } .social-icons { display: flex; gap: 20px; } .social-icons img { width: 20px; height: 20px; transition: opacity 0.3s ease; } .social-icons img:hover { opacity: 0.7; } /* ==================================== */ /* === 6. COOKIE-BANNER === */ /* ==================================== */ .cookie-banner { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 900px; z-index: 9999; background: #c6d63898; color: #000000; padding: 14px 20px; border-radius: 10px; box-shadow: 0 10px 30px #f0e4da; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: 14px; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .cookie-banner p { margin: 0; flex: 1; font-size: 14px; line-height: 1.4; text-align: left; pointer-events: none; } .cookie-buttons, .cookie-banner a { pointer-events: auto; } .cookie-buttons { display: flex; gap: 8px; } .cookie-buttons button { background: #222222; color: #c6d638; border: none; padding: 8px 16px; border-radius: 6px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; } .cookie-buttons button:hover { background: #c6d638; color: #3f3e3e; } .cookie-banner.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); } /* ==================================== */ /* === LIGHTBOX (Galerie) === */ /* ==================================== */ .lightbox { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; } .lightbox-content { max-width: 80%; max-height: 80%; border-radius: 8px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.621); } .lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; } .lightbox .prev, .lightbox .next { position: absolute; top: 30%; transform: translateY(-50%); color: rgb(215, 21, 21); font-size: 20px; font-weight: bold; cursor: pointer; user-select: none; padding: 10px; background-color: rgb(255, 255, 255); border-radius: 20%; } .lightbox .prev:hover, .lightbox .next:hover { background-color: rgba(0, 0, 0, 0.2); } .lightbox .prev { left: 30px; } .lightbox .next { right: 30px; } /* ==================================== */ /* === 7. MEDIA QUERIES === */ /* ==================================== */ @media (max-width: 768px) { /* 1. Slogan verkleinern, damit Burger Platz hat */ header .logo { height: 60px; /* Auf dem Handy etwas kleiner als die 80px vom Desktop */ } .header-slogan { font-size: 1.1em; /* Deutlich kleiner auf dem Handy */ margin-left: 10px; white-space: normal; /* Erlaubt Zeilenumbruch falls nötig */ } /* 2. Den Burger sichtbar machen */ .burger { display: flex; z-index: 1001; } .burger span { background: #000000; /* Schwarz statt Weiß, damit man es auf Gelb sieht! */ } /* 3. Das Menü-Design für Handys */ nav { display: none; flex-direction: column; background: #c6d638; /* Deine gelbe Hausfarbe */ position: absolute; top: 80px; /* Genau unter dem Header */ left: 0; width: 100%; padding: 20px 0; z-index: 999; border-bottom: 3px solid #ff9900; } nav.show { display: flex; /* Wird durch JavaScript (main.js) aktiviert */ } header nav a { margin: 15px 0; text-align: center; color: #000000; /* Schwarzer Text auf gelbem Grund */ width: 100%; font-size: 20px; } .header-inner { justify-content: space-between; } }