@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap'); /* ====================================================================== Forsthof Nunkirchen — Relaunch Warm, bodenständig, „wie ein Hof, nicht wie ein Designer". ====================================================================== */ /* ---- Farbwelten (per data-palette auf umschaltbar) ---- */ :root { --bg: #f3eddf; --bg-alt: #e9e0cd; --surface: #fbf8f0; --ink: #2a2620; --ink-soft: #5d5444; --ink-faint: #897e69; --green-900: #18362e; --green-800: #1f4339; --green-700: #2c5849; --green-600: #3a6b59; --wood: #8a5a33; --wood-soft: #ad7843; --berry: #9e3a2a; --line: rgba(42, 38, 32, 0.14); --line-soft: rgba(42, 38, 32, 0.08); --shadow: 0 1px 0 rgba(42,38,32,0.04), 0 14px 34px -22px rgba(42,38,32,0.45); --font-head: 'Bitter', Georgia, 'Times New Roman', serif; --font-body: 'Karla', system-ui, -apple-system, sans-serif; --container: 1180px; --r: 6px; --r-lg: 12px; } html[data-palette="holz"] { --bg: #efe5d4; --bg-alt: #e3d5bd; --surface: #fbf6ec; --green-900: #4a3115; --green-800: #5a3d1d; --green-700: #6f4d27; --green-600: #835c30; --wood: #9c6a39; --wood-soft: #b9854f; --berry: #9e3a2a; } html[data-palette="hell"] { --bg: #f7f4ec; --bg-alt: #eef0e3; --surface: #ffffff; --ink: #28302a; --ink-soft: #51604f; --green-900: #34502f; --green-800: #3e5e38; --green-700: #4d6f44; --green-600: #5f8253; --wood: #7c6a4a; --wood-soft: #9c875f; } /* ---- Überschrift-Schrift umschaltbar ---- */ html[data-head="zilla"] { --font-head: 'Zilla Slab', Georgia, serif; } html[data-head="spectral"] { --font-head: 'Spectral', Georgia, serif; } /* ---- Reset / Grund ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 18px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.12; margin: 0; color: var(--ink); letter-spacing: -0.01em; } p { margin: 0 0 1em; text-wrap: pretty; } :focus-visible { outline: 2.5px solid var(--wood); outline-offset: 3px; border-radius: 3px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 28px; } .eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 13.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wood); margin: 0 0 14px; display: flex; align-items: center; gap: 11px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--wood); display: inline-block; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 700; font-size: 16px; padding: 13px 24px; border-radius: var(--r); border: 1.5px solid transparent; cursor: pointer; transition: transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--green-800); color: #f4eddd; } .btn-primary:hover { background: var(--green-900); } .btn-ghost { background: transparent; color: var(--green-900); border-color: var(--green-800); } .btn-ghost:hover { background: var(--green-800); color: #f4eddd; } .btn-wood { background: var(--wood); color: #fbf6ec; } .btn-wood:hover { background: var(--green-900); } .btn .arr { font-size: 17px; transform: translateY(-0.5px); } /* ====================================================================== Utility-Bar + Header ====================================================================== */ .utility { background: var(--green-900); color: #d9e2cf; font-size: 14px; } /* Schlanke Kontakt-Leiste nur auf Unterseiten ausblenden (Startseiten-Version .utility-rich bleibt) */ .utility:not(.utility-rich) { display: none; } /* Google-Maps Klick-to-load (DSGVO) */ .map-consent { width: 100%; height: 100%; min-height: 240px; border: 0; cursor: pointer; color: #f4eddd; background: linear-gradient(135deg, #2a5340, #14302a); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; font-family: inherit; } .map-consent .map-pin { font-size: 32px; } .map-consent strong { font-size: 16px; } .map-consent .map-note { font-size: 13px; color: #cdd9c2; max-width: 360px; line-height: 1.45; } .map-consent .map-load { margin-top: 8px; background: #e7c79b; color: var(--green-900); font-weight: 700; border-radius: 999px; padding: 9px 20px; font-size: 14px; } .map-consent:hover .map-load { background: #f0d3a6; } .visit-map > iframe { width: 100%; height: 100%; border: 0; display: block; } .utility .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; padding-block: 7px; } .utility a { color: #eef3e6; font-weight: 600; } .utility-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .utility-left span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .utility .dot { color: var(--wood-soft); } .utility-right { display: flex; gap: 18px; align-items: center; } .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 78px; max-width: 1280px; } .brand { display: flex; align-items: center; gap: 11px; } .brand-logo { height: 86px; width: auto; display: block; } .brand-text { display: flex; flex-direction: column; } .brand-mark { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--green-800); color: #f4eddd; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 22px; border: 2px solid var(--wood-soft); } .brand-name { display: block; white-space: nowrap; font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.05; letter-spacing: 0.01em; color: var(--green-900); } .brand-sub { display: block; white-space: nowrap; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; font-weight: 700; } .nav { display: flex; align-items: center; gap: 8px; margin-left: 24px; flex-wrap: wrap; } .nav a { display: inline-flex; align-items: center; line-height: 1; font-weight: 700; font-size: 14.5px; padding: 11px 16px; border: 1.5px solid transparent; border-radius: var(--r); background: var(--green-800); color: #f4eddd; transition: background .18s ease, transform .12s ease; white-space: nowrap; } .nav a:hover { background: var(--green-900); color: #f4eddd; transform: translateY(-1px); } .nav a[aria-current="page"] { background: var(--green-900); } .header-cta { margin-left: auto; white-space: nowrap; flex: none; padding: 11px 16px; font-size: 14.5px; } .nav-toggle { display: none; } /* ====================================================================== Hero ====================================================================== */ .hero { position: relative; padding-block: 0; } .hero-media { position: relative; } .hero-media img { display: block; width: 100%; height: 76vh; min-height: 460px; max-height: 760px; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(18,24,16,0.40) 0%, rgba(18,24,16,0.28) 46%, rgba(18,24,16,0.52) 100%); } .hero-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .hero-inner .container { width: 100%; pointer-events: auto; padding-bottom: 0; } .hero-copy { max-width: 700px; margin: 0 auto; text-align: center; color: #fbf7ec; } .hero-copy .eyebrow { color: #f0d3a6; justify-content: center; } .hero-copy .eyebrow::before { background: #f0d3a6; } .hero h1 { color: #fbf7ec; font-weight: 700; font-size: clamp(40px, 6vw, 72px); line-height: 1.04; margin-bottom: 18px; text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 28px rgba(0,0,0,0.55); } .hero h1 em { font-style: italic; color: #f0d3a6; } .hero-lead { font-size: 20px; font-weight: 500; line-height: 1.55; color: #f2ece0; max-width: 540px; margin: 0 auto 28px; text-shadow: 0 1px 5px rgba(0,0,0,0.65), 0 0 18px rgba(0,0,0,0.5); } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .hero-actions .btn-ghost { color: #fbf7ec; border-color: rgba(251,247,236,0.85); background: rgba(20,28,18,0.32); } .hero-actions .btn-ghost:hover { background: var(--green-900); color: #fbf7ec; border-color: var(--green-900); } /* Info-Leiste unter Hero */ .hero-facts { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); } .hero-facts .container { display: grid; grid-template-columns: repeat(4, 1fr); } .fact { padding: 22px 28px; border-left: 1px solid var(--line); } .fact:first-child { border-left: 0; padding-left: 0; } .fact .k { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wood-soft); font-weight: 700; margin-bottom: 5px; } .fact .v { font-family: var(--font-head); font-size: 19px; color: var(--green-900); line-height: 1.25; } .fact .v small { display: block; font-family: var(--font-body); font-size: 14px; color: var(--ink-faint); font-weight: 500; margin-top: 2px; } /* Kontakt-Leiste (grün) */ .utility-rich .container { display: flex; align-items: center; gap: 24px; padding-block: 16px; flex-wrap: wrap; justify-content: flex-start; min-height: 0; } .util-badge { flex: none; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,0.12); display: grid; place-items: center; font-size: 28px; border: 1.5px solid rgba(255,255,255,0.35); } .util-text { flex: 1 1 320px; } .util-text strong { font-family: var(--font-head); font-size: 20px; display: block; line-height: 1.2; color: #fbf7ec; } .util-text span { font-size: 15.5px; color: #cdd9c2; } .utility-rich .btn { background: #e7c79b; color: var(--green-900); flex: none; } .utility-rich .btn:hover { background: #f0d3a6; } @media (max-width: 560px) { .util-text strong { font-size: 17px; } .util-badge { width: 48px; height: 48px; font-size: 24px; } } /* ====================================================================== Weihnachtsbäume (festlicher Abschnitt) ====================================================================== */ .xmas { background: #14302a; color: #ece4d3; overflow: hidden; } .xmas-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center; } .xmas-media { display: flex; justify-content: center; } .xmas-media img, .xmas-media video { width: 100%; max-width: 400px; border-radius: 16px; box-shadow: 0 34px 64px -30px rgba(0,0,0,0.75); display: block; } .xmas .eyebrow { color: #e7c79b; } .xmas .eyebrow::before { background: #e7c79b; } .xmas h2 { color: #fbf7ec; font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 16px; } .xmas-copy > p { color: #cdd8c4; font-size: 18.5px; max-width: 52ch; } .xmas-facts { list-style: none; padding: 0; margin: 26px 0 30px; } .xmas-facts li { display: flex; gap: 18px; align-items: baseline; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 17px; color: #f3ecdd; } .xmas-facts li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); } .xmas-facts li span { flex: none; width: 150px; color: #e7c79b; font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; } .xmas-actions { display: flex; gap: 14px; flex-wrap: wrap; } .xmas-actions .btn { white-space: nowrap; } .btn-ghost-light { background: transparent; color: #fbf7ec; border-color: rgba(251,247,236,0.6); } .btn-ghost-light:hover { background: #fbf7ec; color: #14302a; border-color: #fbf7ec; } /* ====================================================================== Section-Grundgerüst ====================================================================== */ section { padding-block: 84px; } .section-head { max-width: 620px; margin-bottom: 46px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 14px; line-height: 1.16; } .section-head p { font-size: 18.5px; color: var(--ink-soft); margin: 0; } .bg-alt { background: var(--bg-alt); } /* Intro / Philosophie */ .intro .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; } .intro-media img { width: 100%; height: 460px; } .intro h2 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 18px; } .intro .lead { font-size: 21px; line-height: 1.5; color: var(--ink); } .intro p { color: var(--ink-soft); } .intro .sig { font-family: var(--font-head); font-style: italic; font-size: 19px; color: var(--green-800); margin-top: 22px; } /* ====================================================================== Bereiche (Feiern / Ferienwohnung / Eier / Weihnachtsbäume) ====================================================================== */ .bereiche-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .bcard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease; } .bcard:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(42,38,32,0.04), 0 26px 44px -26px rgba(42,38,32,0.55); } .bcard img { width: 100%; height: 210px; } .bcard-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; } .bcard h3 { font-size: 22px; margin-bottom: 9px; } .bcard p { font-size: 16px; color: var(--ink-soft); margin: 0 0 16px; flex: 1; } .bcard .more { font-weight: 700; font-size: 15px; color: var(--green-700); display: inline-flex; gap: 7px; align-items: center; } .bcard .more .arr { transition: transform .15s; } .bcard:hover .more .arr { transform: translateX(3px); } .bcard .tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wood); background: color-mix(in srgb, var(--wood) 14%, transparent); padding: 4px 10px; border-radius: 999px; margin-bottom: 13px; } /* ====================================================================== Hofcafé / Frühstück (split, Bild rechts) ====================================================================== */ .cafe .container { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; } .cafe-media img { width: 100%; height: 480px; } .cafe h2 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 16px; } .cafe ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 13px; } .cafe li { display: flex; gap: 13px; align-items: flex-start; font-size: 17px; color: var(--ink); } .cafe li .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--green-600) 18%, transparent); color: var(--green-800); display: grid; place-items: center; font-size: 14px; font-weight: 800; margin-top: 1px; } /* ====================================================================== Feiern & Übernachten (zwei große Karten) ====================================================================== */ .duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .duo { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; box-shadow: var(--shadow); } .duo img { position: absolute; inset: 0; width: 100%; height: 100%; } .duo .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,18,0.10) 0%, rgba(20,28,18,0.18) 40%, rgba(20,28,18,0.62) 72%, rgba(20,28,18,0.92) 100%); pointer-events: none; } .duo-body { position: relative; padding: 32px; color: #fbf7ec; } .duo-body .eyebrow { color: #f0d3a6; text-shadow: 0 1px 10px rgba(0,0,0,0.6); } .duo-body .eyebrow::before { background: #f0d3a6; } .duo-body h3 { color: #fbf7ec; font-size: 28px; margin-bottom: 10px; text-shadow: 0 2px 14px rgba(0,0,0,0.65); } .duo-body p { color: #f2ece0; font-size: 16.5px; margin-bottom: 18px; max-width: 38ch; text-shadow: 0 1px 10px rgba(0,0,0,0.7); } /* ====================================================================== Über uns / Historie ====================================================================== */ .about { background: var(--bg-alt); color: var(--ink); } .about .container { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; } .about-media img { width: 100%; height: 500px; } /* Inhalts-Bilder (ehemals , jetzt echtes ) */ .intro-media img, .about-media img, .cafe-media img, .bcard img, .loc-media img, .media-grid img, .fewo-gallery img, .book-aside .ba-card img, .visit-map img { object-fit: cover; } .intro-media img, .about-media img, .cafe-media img, .loc-media img { border-radius: var(--r-lg); } .about .eyebrow { color: var(--wood); } .about .eyebrow::before { background: var(--wood); } .about h2 { color: var(--green-900); font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 18px; } .about p { color: var(--ink-soft); font-size: 18px; } .about .lead { color: var(--ink); font-size: 21px; line-height: 1.5; } .about-stats { display: flex; gap: 40px; margin-top: 32px; flex-wrap: wrap; } .about-stats .n { font-family: var(--font-head); font-size: 38px; color: var(--wood); line-height: 1; } .about-stats .l { font-size: 14.5px; color: var(--ink-faint); margin-top: 6px; } /* ====================================================================== Öffnungszeiten / Anfahrt / Kontakt ====================================================================== */ .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; } .panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 38px; box-shadow: var(--shadow); } .panel h3 { font-size: 25px; margin-bottom: 22px; display: flex; align-items: center; gap: 11px; } .hours { width: 100%; border-collapse: collapse; } .hours tr { border-bottom: 1px solid var(--line-soft); } .hours tr:last-child { border-bottom: 0; } .hours td { padding: 12px 0; font-size: 16.5px; } .hours td:first-child { font-weight: 700; color: var(--ink); } .hours td:last-child { text-align: right; color: var(--ink-soft); } .hours .closed { color: var(--ink-faint); } .note { margin-top: 18px; font-size: 14.5px; color: var(--ink-faint); border-top: 1px dashed var(--line); padding-top: 16px; } .visit-map img { width: 100%; height: 230px; border-radius: var(--r); overflow: hidden; margin-bottom: 22px; } .visit-map { border-radius: var(--r); overflow: hidden; margin-bottom: 22px; } .visit-map iframe { width: 100%; height: 240px; border: 0; display: block; } .map-link { margin-top: 18px; } .addr { font-size: 17px; line-height: 1.7; } .addr .label { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wood); font-weight: 700; margin-bottom: 4px; } .addr-row { margin-bottom: 16px; } .addr a { color: var(--green-700); font-weight: 700; } /* ====================================================================== Footer ====================================================================== */ .site-footer { background: var(--bg-alt); color: var(--ink-soft); padding-block: 56px 30px; border-top: 1px solid var(--line); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 38px; border-bottom: 1px solid var(--line); } .footer-brand .brand-name { color: var(--green-900); } .footer-logo { height: 78px; width: auto; display: inline-block; background: transparent; padding: 0; margin-bottom: 16px; filter: none; opacity: 1; } .footer-brand p { margin-top: 14px; font-size: 15px; color: var(--ink-faint); max-width: 30ch; } .footer-insta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--wood); font-weight: 600; font-size: 14px; border: 1px solid var(--wood-soft); border-radius: 999px; padding: 8px 16px; transition: background .15s ease, color .15s ease; } .footer-insta:hover { background: var(--wood); color: #fff; } .footer-insta svg { flex: none; } .footer-insta + .footer-insta { margin-left: 10px; } .footer-col h4 { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wood-soft); margin-bottom: 16px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .footer-col a { font-size: 15.5px; color: var(--ink-soft); } .footer-col a:hover { color: var(--green-900); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-top: 24px; font-size: 14px; color: var(--ink-faint); flex-wrap: wrap; } .footer-bottom a { color: var(--ink-soft); } /* ====================================================================== Responsive ====================================================================== */ @media (max-width: 980px) { .bereiche-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .hero-facts .container { grid-template-columns: repeat(2, 1fr); } .hero-facts .fact:nth-child(odd) { border-left: 0; padding-left: 0; } } @media (max-width: 860px) { body { font-size: 17px; } .nav { display: none; } .nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 78px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px 20px 20px; } .nav.open a { padding: 13px 12px; border-radius: var(--r); font-size: 17px; } .header-cta { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; font-size: 22px; color: var(--green-900); } .brand-logo { height: 60px; } .intro .container, .cafe .container, .about .container { grid-template-columns: 1fr; gap: 36px; } .intro .intro-copy, .about .about-copy { order: -1; } /* Handy: erst Text, dann Bild */ .xmas-grid { grid-template-columns: 1fr; gap: 36px; } .xmas-media { order: -1; } .xmas-media img, .xmas-media video { max-width: 340px; } .xmas-facts li span { width: 130px; } .cafe-media { order: -1; } .duo-grid { grid-template-columns: 1fr; } .visit-grid { grid-template-columns: 1fr; } .hero-media img { height: calc(100vh - 170px); min-height: 400px; } .hero-facts .container { grid-template-columns: 1fr; } .fact { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-left: 0; } .fact:first-child { border-top: 0; } section { padding-block: 60px; } /* Einheitliche Ausrichtung auf Mobil: Abschnitts-Kopfzeilen zentriert */ .section-head { margin-inline: auto; text-align: center; } .section-head .eyebrow { justify-content: center; } .intro-copy, .about-copy { text-align: center; } .intro-copy .eyebrow, .about-copy .eyebrow { justify-content: center; } .about-stats { justify-content: center; } } @media (max-width: 560px) { .container { padding-inline: 18px; } .about-stats { flex-direction: column; gap: 24px; align-items: center; } /* Öffnungszeiten & Anfahrt: Panels mobil linksbündig, Zeit unter der Bezeichnung */ .visit .panel { text-align: left; } .visit .panel h3 { justify-content: flex-start; } .hours td { display: block; width: 100%; text-align: left; padding: 0; } .hours td:first-child { padding-top: 13px; } .hours td:last-child { text-align: left; padding-bottom: 13px; margin-top: 3px; } .bereiche-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } /* Utility-Bar entschlacken, damit nichts horizontal überläuft */ .utility { font-size: 13px; } .utility .container { justify-content: center; gap: 0; } .utility-left { justify-content: center; gap: 8px; } .utility-left span:nth-child(n+2) { display: none; } .utility-right { display: none; } .hero-media img { height: calc(100vh - 160px); min-height: 360px; } .hero h1 { font-size: clamp(27px, 8vw, 40px); overflow-wrap: break-word; } .hero-lead { font-size: 17px; } } /* ==================================================================== Dezente Bewegungen — Hero-Ken-Burns, Lade-Einblendung, Scroll-Reveal, Hover-Bildzoom. Versteck-Zustand nur mit aktivem JS (.fh-anim) → kein Verstecken/Flackern, wenn JS aus ist. ==================================================================== */ /* Hero: sehr langsamer Ken-Burns-Zoom */ .hero-media { overflow: hidden; } .hero-media img { transform-origin: 50% 62%; animation: fh-kenburns 24s ease-out forwards; } @keyframes fh-kenburns { from { transform: scale(1); } to { transform: scale(1.04); } } /* Hero: Texte gestaffelt einblenden */ .hero-copy > * { opacity: 0; transform: translateY(16px); animation: fh-rise .8s cubic-bezier(.2,.7,.2,1) forwards; } .hero-copy .eyebrow { animation-delay: .15s; } .hero-copy h1 { animation-delay: .30s; } .hero-copy .hero-lead { animation-delay: .45s; } .hero-copy .hero-actions { animation-delay: .60s; } @keyframes fh-rise { to { opacity: 1; transform: none; } } /* Scroll-Reveal */ .fh-anim .section-head, .fh-anim .intro-copy, .fh-anim .intro-media, .fh-anim .cafe-copy, .fh-anim .cafe-media, .fh-anim .about-copy, .fh-anim .about-media, .fh-anim .xmas-copy, .fh-anim .xmas-media, .fh-anim .fh-quote__inner, .fh-anim .bereiche-grid > *, .fh-anim .duo-grid > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .fh-anim .is-in, .fh-anim .bereiche-grid.is-in > *, .fh-anim .duo-grid.is-in > * { opacity: 1; transform: none; } .fh-anim .bereiche-grid.is-in > *:nth-child(2){ transition-delay:.07s } .fh-anim .bereiche-grid.is-in > *:nth-child(3){ transition-delay:.14s } .fh-anim .bereiche-grid.is-in > *:nth-child(4){ transition-delay:.21s } .fh-anim .bereiche-grid.is-in > *:nth-child(5){ transition-delay:.28s } .fh-anim .bereiche-grid.is-in > *:nth-child(6){ transition-delay:.35s } .fh-anim .duo-grid.is-in > *:nth-child(2){ transition-delay:.10s } /* Karten-Hover: sanfter Bildzoom (Lift/Schatten bestehen bereits) */ .bcard img, .duo img { transition: transform .55s ease; } .bcard:hover img, .duo:hover img { transform: scale(1.06); } /* Dunkle Zitat-Sektion (schlank) */ .fh-quote { background-image: linear-gradient(rgba(18,28,18,0.48), rgba(18,28,18,0.48)), url('uploads/hof-innenhof.jpg'); background-size: cover; background-position: center; background-attachment: fixed; color: #fbf7ec; text-align: center; padding-block: 130px; } .fh-quote__inner { max-width: 760px; margin-inline: auto; } .fh-quote .eyebrow { color: #f0d3a6; justify-content: center; } .fh-quote .eyebrow::before { background: #f0d3a6; } .fh-quote blockquote { font-family: var(--font-head); font-style: italic; font-size: clamp(22px, 2.6vw, 31px); line-height: 1.36; margin: 12px auto 14px; color: #fbf7ec; text-shadow: 0 2px 16px rgba(0,0,0,0.4); } .fh-quote__cite { color: #e7ddca; font-weight: 600; margin: 0; font-size: 15px; letter-spacing: .01em; } @media (max-width: 768px) { .fh-quote { background-attachment: scroll; padding-block: 88px; } } @media (prefers-reduced-motion: reduce) { .fh-quote { background-attachment: scroll; } } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .hero-copy > * { opacity: 1 !important; transform: none !important; } .fh-anim .section-head, .fh-anim .intro-copy, .fh-anim .intro-media, .fh-anim .cafe-copy, .fh-anim .cafe-media, .fh-anim .about-copy, .fh-anim .about-media, .fh-anim .xmas-copy, .fh-anim .xmas-media, .fh-anim .fh-quote__inner, .fh-anim .bereiche-grid > *, .fh-anim .duo-grid > * { opacity: 1 !important; transform: none !important; } } /* ====================================================================== GEWÄHLTES THEME — hell, mittleres Grün + Open Sans (Favorit des Kunden) Gilt für alle Seiten, da überall . Zum Zurücksetzen auf das dunkle Theme: diesen Block entfernen. ====================================================================== */ html[data-palette="wood"] { --bg: #fcfbf8; --bg-alt: #eef1e6; --surface: #ffffff; --ink: #2f3a2a; --ink-soft: #56604e; --ink-faint: #8a917f; --green-900: #4e6b2c; --green-800: #587634; --green-700: #648140; --green-600: #7a9a4e; --wood: #9a7b3a; --wood-soft: #b3964e; --berry: #6a1636; --font-head: 'Open Sans', system-ui, -apple-system, sans-serif; --font-body: 'Open Sans', system-ui, -apple-system, sans-serif; }