/* ================================================================ Rathausschänke Bamberg — Stylesheet ---------------------------------------------------------------- THEMES — alle Farben als CSS-Custom-Properties. Themes sind triviale ein-Klassen-Umschaltungen: theme-1 / 2 / 3. theme-1 ist Standard (siehe ). ================================================================ */ :root{ /* Layout-Token, themenübergreifend */ --maxw: 1240px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --nav-h: 72px; --section-pad: clamp(4.5rem, 9vw, 8rem); /* Schrift — Standard (von Theme 2 & 3 teils überschrieben) */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; --font-ui: 'Inter', system-ui, sans-serif; --radius: 4px; /* Footer-Farben (pro Theme überschrieben) */ --footer-bg: #2E2520; --footer-fg: #F6F1E7; } /* THEME 1 — „Mittag“: warmes Off-White / Creme, dunkelbrauner Text (unverändert) */ .theme-1{ --bg: #F6F1E7; --bg-alt: #EFE7D7; --surface: #FBF8F1; --text: #2E2520; --text-soft: #6B5E50; --accent: #8C5A3C; --line: rgba(46, 37, 32, 0.14); --nav-bg: rgba(246, 241, 231, 0.82); --footer-bg: #2E2520; --footer-fg: #F6F1E7; --radius: 4px; } /* THEME 2 — „Abendschänke“: dunkle, warme Bierkeller-Stimmung bei Kerzenlicht, Rauchbier-Bernstein als Akzent. Schrift: Fraunces (warme Hochkontrast-Serife). */ .theme-2{ --bg: #17130E; --bg-alt: #211A12; --surface: #221B13; --text: #ECE3D2; --text-soft: #A99A82; --accent: #D9923F; --line: rgba(236, 227, 210, 0.16); --nav-bg: rgba(23, 19, 14, 0.78); --footer-bg: #0F0C08; --footer-fg: #ECE3D2; --radius: 3px; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; } /* THEME 3 — „Wirtsgarten“: helles Salbeigrün wie sonnengebleichte Gartenmöbel, dunkles Tannengrün als Text, Ziegelrot als Akzent — die Stimmung eines fränkischen Biergartens am Nachmittag. Fraunces als Display-Serife, weichere Rundungen. */ .theme-3{ --bg: #E7EAE1; --bg-alt: #DBE0D2; --surface: #F2F4EC; --text: #253426; --text-soft: #5C6B58; --accent: #A63A2B; --line: rgba(37, 52, 38, 0.16); --nav-bg: rgba(231, 234, 225, 0.85); --footer-bg: #253426; --footer-fg: #E7EAE1; --radius: 10px; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; } /* ================================================================ RESET & BASIS ================================================================ */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .4s ease, color .4s ease; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.01em; } ::selection{ background:var(--accent); color:var(--bg); } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; } /* Wiederverwendbare Bausteine ---------------------------------- */ .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:var(--section-pad); } /* Eyebrow = strukturelles Label mit Haarlinie (Signatur-Element) */ .eyebrow{ font-family:var(--font-ui); font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.85rem; margin-bottom:1.25rem; } .eyebrow::before{ content:""; width:32px; height:1px; background:currentColor; display:inline-block; } .section-title{ font-size:clamp(2.1rem, 4.2vw, 3.4rem); margin-bottom:1.1rem; } .lead{ color:var(--text-soft); font-size:1.075rem; max-width:46ch; } /* Buttons -------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-family:var(--font-ui); font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:.95rem 1.7rem; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; } .btn:hover{ transform:translateY(-2px); } /* Farbvarianten für Buttons ausserhalb des Heros (z. B. 404-Seite). Im Hero gelten weiterhin die helleren Varianten weiter unten. */ .btn-primary{ background:var(--accent); color:var(--bg); } .btn-primary:hover{ background:var(--text); } .btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); } /* ================================================================ NAVIGATION ================================================================ */ .nav{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h); background:var(--nav-bg); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid transparent; transition:border-color .3s ease, background-color .4s ease; } .nav.scrolled{ border-bottom-color:var(--line); } .nav-inner{ max-width:var(--maxw); margin-inline:auto; height:100%; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; } .nav-logo{ display:flex; align-items:center; gap:.65rem; } .nav-logo img{ height:40px; width:auto; } /* Schwarzes Logo im dunklen Abend-Theme aufhellen, damit es sichtbar bleibt */ .theme-2 .nav-logo img{ filter:invert(1) brightness(1.04); } .nav-logo .wordmark{ font-family:var(--font-display); font-size:1.18rem; font-weight:600; letter-spacing:.01em; white-space:nowrap; } .nav-links{ display:flex; align-items:center; gap:2.1rem; list-style:none; } .nav-links a{ font-family:var(--font-ui); font-size:.82rem; font-weight:500; letter-spacing:.04em; color:var(--text); position:relative; padding-block:.4rem; transition:color .2s ease; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; } .nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); } .nav-links a.active{ color:var(--accent); } /* Hamburger */ .nav-toggle{ display:none; background:none; border:none; cursor:pointer; width:40px; height:40px; position:relative; } .nav-toggle span{ position:absolute; left:8px; right:8px; height:1.5px; background:var(--text); transition:transform .3s ease, opacity .25s ease; } .nav-toggle span:nth-child(1){ top:14px; } .nav-toggle span:nth-child(2){ top:20px; } .nav-toggle span:nth-child(3){ top:26px; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* Mobile-Panel */ .mobile-menu{ position:fixed; inset:var(--nav-h) 0 auto 0; z-index:55; background:var(--bg); border-bottom:1px solid var(--line); transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform .3s ease, opacity .3s ease; } .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; } .mobile-menu ul{ list-style:none; padding:1rem var(--gutter) 1.6rem; } .mobile-menu a{ display:block; padding:.9rem 0; font-family:var(--font-display); font-size:1.5rem; border-bottom:1px solid var(--line); } .mobile-menu li:last-child a{ border-bottom:none; } /* ================================================================ HERO ================================================================ */ .hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; /* Pfad relativ zu dieser CSS-Datei (im selben Ordner wie index.html) */ /* Bildausschnitt etwas tiefer (62 %), damit mehr vom Glas sichtbar ist */ background:#1a1410 url("images/hero.jpg") center 62% / cover no-repeat; } .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,15,11,.55) 0%, rgba(20,15,11,.38) 45%, rgba(20,15,11,.62) 100%); } .hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; width:100%; padding-inline:var(--gutter); padding-top:var(--nav-h); color:#fff; } .hero-eyebrow{ font-family:var(--font-ui); font-size:.74rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.85); display:inline-flex; align-items:center; gap:.85rem; margin-bottom:1.5rem; } .hero-eyebrow::before{ content:""; width:34px; height:1px; background:rgba(255,255,255,.7); } .hero h1{ font-size:clamp(2.6rem, 6.4vw, 5.25rem); font-weight:600; max-width:16ch; color:#fff; } .hero .subline{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(1.2rem, 2.6vw, 1.85rem); color:rgba(255,255,255,.92); margin-top:1.3rem; max-width:30ch; } .hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; } /* Hero-Buttons sind bewusst hell-auf-dunkel und themenunabhängig */ .hero .btn-primary{ background:#F6F1E7; color:#2A221C; } .hero .btn-primary:hover{ background:#fff; } .hero .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.65); } .hero .btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; } .hero-loc{ position:absolute; left:var(--gutter); bottom:2rem; z-index:2; font-family:var(--font-ui); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7); } /* Scroll-Offset für alle Anker (fixe Nav) */ [id]{ scroll-margin-top: calc(var(--nav-h) + 16px); } /* ================================================================ SPEISEKARTE / GETRÄNKE (zwei Spalten) ================================================================ */ .menu-grid{ display:grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap:clamp(2rem, 5vw, 5rem); align-items:start; } .menu-photo{ position:sticky; top:calc(var(--nav-h) + 2rem); } .menu-photo img{ width:100%; height:clamp(420px, 70vh, 760px); object-fit:cover; border-radius:var(--radius); background:var(--bg-alt); transition:opacity .3s ease; } .menu-photo img.is-swapping{ opacity:0; } @media (prefers-reduced-motion: reduce){ .menu-photo img{ transition:none; } } .menu-photo figcaption{ font-family:var(--font-ui); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-soft); margin-top:1rem; } /* Tabs */ .tabs{ display:flex; gap:.4rem; margin:1.8rem 0 0; border-bottom:1px solid var(--line); } .tab{ background:none; border:none; cursor:pointer; font-family:var(--font-ui); font-size:.86rem; font-weight:500; letter-spacing:.04em; color:var(--text-soft); padding:.85rem 1.1rem; margin-bottom:-1px; border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease; } .tab:hover{ color:var(--text); } .tab[aria-selected="true"]{ color:var(--text); border-bottom-color:var(--accent); } .menu-panel{ margin-top:2rem; min-height:240px; } /* Menüinhalte */ .m-cat{ margin-bottom:2.4rem; } .m-cat:last-child{ margin-bottom:0; } .m-cat-title{ font-family:var(--font-ui); font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); padding-bottom:.7rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line); } .m-item{ margin-bottom:1.35rem; } .m-item:last-child{ margin-bottom:0; } .m-row{ display:flex; align-items:baseline; gap:.6rem; } .m-name{ font-family:var(--font-display); font-size:1.32rem; font-weight:600; } .m-leader{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); } .m-price{ font-family:var(--font-ui); font-weight:500; font-size:.98rem; white-space:nowrap; } .m-desc{ color:var(--text-soft); font-size:.94rem; margin-top:.3rem; max-width:54ch; } /* Lade- und Fehlerzustände */ .loader{ display:flex; align-items:center; gap:.85rem; color:var(--text-soft); font-size:.92rem; padding:1.5rem 0; } .spinner{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; flex:none; } @keyframes spin{ to{ transform:rotate(360deg); } } .menu-note{ font-family:var(--font-ui); font-size:.78rem; color:var(--text-soft); background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:.7rem 1rem; margin-bottom:1.6rem; } .menu-error{ font-size:.95rem; color:var(--text-soft); padding:1.4rem 0; } /* ================================================================ AUSSENVERKAUF (zwei Hälften, atmosphärisch) ================================================================ */ .aussen{ background:var(--bg-alt); } .aussen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:start; } .aussen-photo{ position:sticky; top:calc(var(--nav-h) + 2rem); } .aussen-photo img{ /* Rahmen exakt im Seitenverhältnis des Bildes (2362×2624 ≈ 0,9), dadurch wird nichts beschnitten; max-height begrenzt nur sehr breite Spalten. */ width:100%; aspect-ratio:2362 / 2624; max-height:720px; object-fit:cover; object-position:center 42%; border-radius:var(--radius); background:var(--bg); } .aussen h2{ font-size:clamp(2.3rem, 5vw, 3.8rem); margin-bottom:1.1rem; } .aussen .lead{ margin-bottom:2rem; } /* Einfache Außenverkauf-Liste */ .aussen-list .m-cat{ margin-bottom:1.8rem; } .aussen-list .m-name{ font-size:1.18rem; } .aussen-list .m-desc{ font-size:.88rem; } /* ================================================================ RESERVIERUNG ================================================================ */ .reservierung{ text-align:center; } .reservierung .eyebrow{ justify-content:center; } .reservierung .lead{ margin:0 auto 2.5rem; text-align:center; } .widget-box{ max-width:760px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.5rem, 4vw, 3rem); text-align:center; } .widget-placeholder{ color:var(--text-soft); font-family:var(--font-ui); font-size:.9rem; line-height:1.7; } .widget-placeholder strong{ color:var(--text); } /* ================================================================ KONTAKT ================================================================ */ .kontakt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:stretch; } .kontakt-info dl{ display:grid; gap:1.6rem; margin-top:.5rem; } .kontakt-info dt{ font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.35rem; } .kontakt-info dd{ font-size:1.05rem; line-height:1.7; } .kontakt-info dd a:hover{ color:var(--accent); } .hours-line{ display:block; } .social-row{ display:flex; gap:1.4rem; margin-top:2rem; } .social-row a{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-ui); font-size:.82rem; letter-spacing:.04em; border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .2s ease, color .2s ease; } .social-row a:hover{ color:var(--accent); border-color:var(--accent); } .social-row svg{ width:18px; height:18px; fill:currentColor; flex:none; } .kontakt-map{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); min-height:340px; background:var(--bg-alt); } .kontakt-map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.2); } /* Eingebettete Karte im dunklen Abend-Theme abdunkeln */ .theme-2 .kontakt-map iframe{ filter:invert(0.9) hue-rotate(180deg) brightness(0.95) grayscale(0.16); } /* ================================================================ FOOTER ================================================================ */ .footer{ background:var(--footer-bg); color:var(--footer-fg); padding-block:2.4rem; } .footer-inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:var(--font-ui); font-size:.82rem; } .footer-inner a{ opacity:.8; transition:opacity .2s ease; } .footer-inner a:hover{ opacity:1; } .footer-links{ display:flex; gap:1.6rem; } /* ================================================================ THEME-UMSCHALTER (kleiner Schalter in der Ecke) ================================================================ */ .theme-switch{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:70; display:flex; align-items:center; gap:.55rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.45rem .6rem; box-shadow:0 6px 22px rgba(0,0,0,.10); } .theme-switch .ts-label{ font-family:var(--font-ui); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-soft); padding-left:.3rem; } .theme-switch button{ width:22px; height:22px; border-radius:50%; cursor:pointer; border:1px solid var(--line); padding:0; transition:transform .2s ease, box-shadow .2s ease; } .theme-switch button:hover{ transform:scale(1.12); } .theme-switch button[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); } .swatch-1{ background:#F6F1E7; } .swatch-2{ background:#17130E; position:relative; } .swatch-2::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:#D9923F; } .swatch-3{ background:#E7EAE1; position:relative; } .swatch-3::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:#A63A2B; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 880px){ .nav-links{ display:none; } .nav-toggle{ display:block; } .menu-grid{ grid-template-columns:1fr; } .menu-photo{ position:static; } .menu-photo img{ height:clamp(300px, 50vh, 460px); } .aussen-grid{ grid-template-columns:1fr; } .aussen-photo{ order:-1; position:static; } .kontakt-grid{ grid-template-columns:1fr; } } @media (max-width: 480px){ :root{ --nav-h:64px; } .nav-logo .wordmark{ font-size:1.02rem; } .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ width:100%; } .theme-switch .ts-label{ display:none; } } /* Reduzierte Bewegung respektieren */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }