/* ═══════════════════════════════════════════════════════════ Hof Wunderlich v2 – globales Stylesheet 1. Schriften 2. Tokens 3. Saisonthemen 4. Basis 5. Layout & Typo 6. Buttons & Chips 7. Formen & Animation 8. Header / Mega-Menü 9. Seiten-Leiste 10. Drawer (mobil) 11. Footer 12. Startseite 13. Responsive 14. Reduced Motion ═══════════════════════════════════════════════════════════ */ /* ─── 1. Schriften (lokal, DSGVO) ─────────────────────────── */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/bricolage-grotesque-600.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/bricolage-grotesque-800.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-400.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-700.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/manrope-800.woff2') format('woff2'); } /* ─── 2. Tokens ───────────────────────────────────────────── */ :root { /* Basis */ --ink: #1E1418; --ink-2: #4A3A3F; --muted: #6B5A5F; --muted-2: #9C8D92; --on-dark: #CDBFC3; --cream: #FFF8F1; --white: #fff; --line: rgba(30, 20, 24, .1); --line-dark: rgba(255, 255, 255, .12); --glass: #fff; --status: #2FA05A; /* Saisonpalette (für Orientierungsstellen: Menü, Startseite, Footer) */ --c-strawberry: #D6334F; --c-strawberry-d: #8E1230; --c-strawberry-l: #FF8FA0; --c-strawberry-s: #FFF0F2; --c-green: #5C8C3A; --c-green-d: #2F5220; --c-green-l: #A8D08A; --c-green-s: #F0F7EA; --c-tulip: #C0559A; --c-tulip-d: #7A2462; --c-tulip-l: #F5A8D6; --c-tulip-s: #FDF0F8; --c-pumpkin: #D9650A; --c-pumpkin-d: #7A3408; --c-pumpkin-l: #FFB066; --c-pumpkin-s: #FFF3E8; --c-breakfast: #C98A0E; --c-breakfast-d: #6E4A05; --c-breakfast-l: #FFD978; --c-breakfast-s: #FFF7E3; /* Seitenakzent (wird von .theme-* überschrieben) */ --a: var(--c-strawberry); --ad: var(--c-strawberry-d); --al: var(--c-strawberry-l); --as: var(--c-strawberry-s); --grad: linear-gradient(150deg, #FF8FA0, #D6334F 55%, #8E1230); --btn-bg: var(--c-strawberry-d); --btn-fg: #fff; --btn-hi: var(--btn-bg); /* heller CTA auf dunklem Grund */ --btn-hi-fg: var(--btn-fg); /* Typo */ --font-h: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif; --font-b: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-hero: clamp(2.5rem, 5.2vw + .4rem, 6rem); --fs-h2: clamp(2rem, 3.6vw + .6rem, 4.25rem); --fs-h3: clamp(1.375rem, 1.2vw + .9rem, 2rem); --fs-lead: clamp(1.0625rem, .4vw + .95rem, 1.25rem); /* Layout */ --gutter: clamp(20px, 6vw, 88px); --wrap: 1440px; --r-s: 18px; --r-m: 28px; --r-l: 40px; --r-xl: 56px; --pill: 999px; /* Bewegung & Tiefe */ --ease: cubic-bezier(.2, .8, .2, 1); --shadow-card: 0 24px 50px -34px rgba(30, 20, 24, .38); --shadow-pop: 0 30px 60px -22px rgba(30, 20, 24, .45); --header-h: 84px; } /* ─── 3. Saisonthemen (Body-Klasse aus functions.php) ─────── */ .theme-pumpkin { --a: var(--c-pumpkin); --ad: var(--c-pumpkin-d); --al: var(--c-pumpkin-l); --as: var(--c-pumpkin-s); --grad: linear-gradient(150deg, #FFC46B, #E0741A 55%, #7A3408); --btn-bg: #F2892B; --btn-fg: var(--ink); --btn-hi: #F2892B; --btn-hi-fg: var(--ink); } .theme-tulip { --a: var(--c-tulip); --ad: var(--c-tulip-d); --al: var(--c-tulip-l); --as: var(--c-tulip-s); --grad: linear-gradient(150deg, #F5A8D6, #C0559A 55%, #7A2462); --btn-bg: var(--c-tulip-d); --btn-fg: #fff; --btn-hi: var(--c-tulip-l); --btn-hi-fg: var(--ink); } .theme-waldviertel { --a: var(--c-green); --ad: var(--c-green-d); --al: var(--c-green-l); --as: var(--c-green-s); --grad: linear-gradient(150deg, #A8D08A, #5C8C3A 55%, #2F5220); --btn-bg: var(--c-green-d); --btn-fg: #fff; --btn-hi: var(--c-green-l); --btn-hi-fg: var(--ink); } .theme-breakfast { --a: var(--c-breakfast); --ad: var(--c-breakfast-d); --al: var(--c-breakfast-l); --as: var(--c-breakfast-s); --grad: linear-gradient(150deg, #FFD978, #E3A21A 55%, #8A5A08); --btn-bg: var(--c-breakfast-l); --btn-fg: var(--ink); --btn-hi: var(--c-breakfast-l); --btn-hi-fg: var(--ink); } .theme-strawberry, .theme-brand { --a: var(--c-strawberry); --ad: var(--c-strawberry-d); --al: var(--c-strawberry-l); --as: var(--c-strawberry-s); --grad: linear-gradient(150deg, #FF8FA0, #D6334F 55%, #8E1230); --btn-bg: var(--c-strawberry-d); --btn-fg: #fff; --btn-hi: #fff; --btn-hi-fg: var(--c-strawberry-d); } /* ─── 4. Basis ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--cream); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 130px; } body { margin: 0; font-family: var(--font-b); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: clip; /* clip statt hidden – sonst funktioniert sticky nicht */ } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--ad); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--ink); } .btn, .btn:hover, .btn-round, .chip, [class*="card"], [class*="card"]:hover, .world, .tour, .moment, .mega-link, .social-tile, .social-hero, .f-social, .acc__link, .season-mini { text-decoration: none; } button { font: inherit; color: inherit; } :focus, :focus-visible { outline: none; } [hidden] { display: none !important; } .screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 999; width: auto; height: auto; clip: auto; clip-path: none; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: var(--pill); } .no-scroll { overflow: hidden; } /* ─── 5. Layout & Typo ─────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(72px, 9vw, 130px); } .section--tight { padding-block: clamp(48px, 6vw, 80px); } .block { /* abgerundete Farbflächen, eingerückt */ margin-inline: clamp(8px, 2.8vw, 40px); border-radius: clamp(32px, 4vw, var(--r-xl)); padding: clamp(56px, 7vw, 110px) clamp(20px, 5vw, 88px); position: relative; overflow: hidden; } .block--dark { background: var(--ink); color: var(--cream); } .h-display, .h1, .h2, .h3 { font-family: var(--font-h); font-weight: 800; margin: 0; } .h1 { font-size: var(--fs-hero); line-height: .92; letter-spacing: -.045em; } .h1, .h2, .h3, .world__title, .philo__title { overflow-wrap: break-word; hyphens: auto; } .h2 { font-size: var(--fs-h2); line-height: .95; letter-spacing: -.04em; } .h3 { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -.03em; } .h2 em, .h1 em { font-style: italic; color: var(--a); } .block--dark .h2 em { color: var(--al); } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 58ch; } .block--dark .lead { color: var(--on-dark); } .eyebrow { display: inline-block; font-weight: 800; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ad); } .block--dark .eyebrow { color: var(--al); } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(32px, 4vw, 48px); flex-wrap: wrap; } .section-head__title { display: flex; flex-direction: column; gap: 14px; } /* ─── 6. Buttons & Chips ───────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 28px; border-radius: var(--pill); border: 0; font-family: var(--font-b); font-weight: 800; font-size: 1rem; line-height: 1.1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s, background .2s, color .2s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(30, 20, 24, .45); } .btn--lg { padding: 20px 32px; font-size: 1.0625rem; } .btn--sm { padding: 12px 18px; font-size: .875rem; } .btn--accent { background: var(--btn-bg); color: var(--btn-fg); } .btn--accent:hover { color: var(--btn-fg); } .btn--hi { background: var(--btn-hi); color: var(--btn-hi-fg); } .btn--hi:hover { color: var(--btn-hi-fg); } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { color: #fff; } .btn--light { background: #fff; color: var(--ink); } .btn--light:hover { color: var(--ink); } .btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); } .btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .2); } .btn--outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); } .btn-round { width: 56px; height: 56px; border-radius: var(--pill); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid var(--line); background: #fff; color: var(--ink); transition: transform .2s var(--ease), opacity .2s; } .btn-round:hover { transform: scale(1.06); } .btn-round--dark { border: 0; background: var(--ink); color: #fff; } .btn-round--glass { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; backdrop-filter: blur(10px); } .btn-round[disabled] { opacity: .35; cursor: default; transform: none; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--pill); font-weight: 700; font-size: .875rem; line-height: 1.2; background: rgba(255, 255, 255, .18); color: inherit; } .chip--white { background: #fff; color: var(--ink); } .chip--glass { background: rgba(30, 20, 24, .28); border: 1px solid rgba(255, 255, 255, .25); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .chip--soft { background: var(--as); color: var(--ad); } .dot { width: 10px; height: 10px; border-radius: var(--pill); background: var(--a); flex-shrink: 0; } .dot--live { background: var(--status); animation: pulse 2s infinite; } /* ─── 7. Formen & Animation ────────────────────────────────── */ .morph { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; animation: morph 12s ease-in-out infinite; } .float { animation: float 7s ease-in-out infinite; } .float-2 { animation: float2 9s ease-in-out infinite; } .photo { background: var(--grad) center / cover no-repeat; } .photo img { width: 100%; height: 100%; object-fit: cover; } .arch { border-radius: 999px 999px 36px 36px; } @keyframes morph { 0%, 100% { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; } 50% { border-radius: 42% 58% 40% 60% / 60% 42% 58% 40%; } } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(4deg); } } @keyframes float2 { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(14px) rotate(2deg); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 160, 90, .55); } 70% { box-shadow: 0 0 0 10px rgba(47, 160, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 160, 90, 0); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes progress { from { width: 0; } to { width: 100%; } } @keyframes pop-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ─── 8. Header / Mega-Menü ────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; pointer-events: none; } .site-header > * { pointer-events: auto; } /* iPhone: Bereich unter der Statusleiste in Creme – Safari übernimmt die Farbe für die Statusleiste */ .site-header::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: max(env(safe-area-inset-top, 0px), 1px); background: var(--cream); pointer-events: none; } .nav-bar { position: relative; z-index: 6; margin: 24px clamp(12px, 2.8vw, 40px) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 24px; background: var(--glass); border-radius: var(--pill); box-shadow: 0 12px 40px -16px rgba(30, 20, 24, .35), 0 0 0 1px rgba(30, 20, 24, .04); transition: transform .45s var(--ease), opacity .35s; } body.nav-hidden .nav-bar { transform: translateY(-160%); opacity: 0; pointer-events: none; } .logo, .custom-logo-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; } .logo span { font-family: var(--font-h); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; } .custom-logo { max-height: 48px; width: auto; } .main-nav { display: flex; gap: 4px; } .main-nav__item { display: inline-flex; align-items: center; gap: 6px; padding: 13px 16px; border-radius: var(--pill); border: 0; background: transparent; font-weight: 700; font-size: .9375rem; color: var(--ink); cursor: pointer; text-decoration: none; transition: background .25s, color .25s; } .main-nav__item:hover { background: rgba(30, 20, 24, .06); color: var(--ink); } .main-nav__item.is-current { background: var(--as); color: var(--ad); } .main-nav__item[aria-expanded="true"] { background: var(--ink); color: #fff; } .main-nav__item .icon { transition: transform .25s; } .main-nav__item[aria-expanded="true"] .icon { transform: rotate(180deg); } .nav-actions { display: flex; align-items: center; gap: 8px; } .btn-shop { padding: 14px 22px; } .cart-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center; background: var(--al); color: var(--ink); font-size: .75rem; font-weight: 800; } .burger { display: none; width: 44px; height: 44px; } .btn-cart-mobile { width: 44px; height: 44px; border: 0; background: var(--cream); position: relative; } .btn-cart-mobile[hidden] { display: none !important; } /* Warenkorb im Header (Desktop) */ .hcart { position: relative; } .hcart[hidden] { display: none; } .hcart__btn { position: relative; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cream); color: var(--ink); text-decoration: none; transition: background .25s, color .25s; animation: hcart-in .45s var(--ease) both; } .hcart__btn:hover, .hcart:focus-within .hcart__btn { background: var(--ink); color: #fff; } .hcart__btn .cart-count { position: absolute; top: -2px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; font-size: .6875rem; background: var(--c-strawberry); color: #fff; box-shadow: 0 0 0 2px #fff; } .hcart__pop { position: absolute; top: 100%; right: 0; z-index: 20; width: 300px; margin-top: 12px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 24px 60px -20px rgba(30, 20, 24, .4); display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; } .hcart__pop::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* Hover-Brücke */ .hcart:hover .hcart__pop, .hcart:focus-within .hcart__pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .hcart__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .hcart__sum span { font-size: .875rem; font-weight: 700; color: var(--muted); } .hcart__sum strong { font-family: var(--font-h); font-size: 1.25rem; font-weight: 800; color: var(--ink); white-space: nowrap; } .hcart__actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; } .hcart__actions .btn { justify-content: center; } .hcart__actions .btn--light { background: #F4EBE2; color: var(--ink); } @keyframes hcart-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } @media (max-width: 1180px) { .hcart { display: none !important; } } /* Menü offen: fixierte Leisten (WooCommerce „Weiter zur Kasse“, Ticket-/Kauf-Leiste) ausblenden */ .mm-open :is(.wc-block-cart__submit-container--sticky, .wc-block-components-checkout-place-order-button--sticky, .mobile-cta, .buy-bar, .cart-toast, [data-cart-toast]) { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Warenkorb im mobilen Menü */ .mm-cart { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px -18px rgba(30, 20, 24, .5); } .mm-cart[hidden] { display: none; } .mm-cart__info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; } .mm-cart__icon { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 16px; background: var(--c-strawberry-s); color: var(--c-strawberry-d); display: flex; align-items: center; justify-content: center; } .mm-cart__icon .cart-count { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; font-size: .625rem; background: var(--c-strawberry); color: #fff; box-shadow: 0 0 0 2px #fff; } .mm-cart__info > span:last-child { display: flex; flex-direction: column; min-width: 0; } .mm-cart__info strong { font-size: .9375rem; } .mm-cart__info small { font-size: .8125rem; font-weight: 700; color: var(--muted); } .mm-cart__go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border-radius: var(--pill); background: var(--ink); color: #fff !important; font-size: .875rem; font-weight: 800; text-decoration: none; } .btn-cart-mobile .cart-count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: .625rem; background: var(--c-strawberry); color: #fff; box-shadow: 0 0 0 2px #fff; } /* Mega-Panels */ .mega-scrim { position: fixed; inset: 0; z-index: 4; background: rgba(30, 20, 24, .35); backdrop-filter: blur(4px); animation: fade-in .3s ease; } .mega { position: absolute; z-index: 5; top: calc(24px + var(--header-h)); left: clamp(12px, 2.8vw, 40px); right: clamp(12px, 2.8vw, 40px); max-width: calc(var(--wrap) - 80px); margin-inline: auto; padding: 14px; border-radius: var(--r-l); background: #fff; box-shadow: 0 40px 90px -30px rgba(30, 20, 24, .5); animation: pop-in .35s var(--ease) both; } .mega__row { display: flex; gap: 14px; } .mega__intro { flex: 0 0 320px; padding: 34px; border-radius: var(--r-m); color: #fff; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .mega__intro .h3 { font-size: 2.25rem; line-height: .98; } .mega__intro p { margin: 0; font-size: .9375rem; line-height: 1.6; opacity: .9; } .mega__intro .btn { margin-top: auto; align-self: flex-start; } .mega__intro--green { background: linear-gradient(155deg, #8DBA6A, #5C8C3A 55%, #2F5220); } .mega__intro--dark { background: var(--ink); } .mega__blob { position: absolute; right: -80px; bottom: -90px; width: 240px; height: 240px; background: rgba(255, 255, 255, .14); } .mega__blob--color { top: -90px; bottom: auto; right: -90px; background: linear-gradient(135deg, var(--c-tulip), var(--c-pumpkin)); opacity: .5; } .mega-card { border-radius: var(--r-m); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; background: var(--card-soft, var(--cream)); transition: transform .3s var(--ease), box-shadow .3s; } .mega-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -24px rgba(30, 20, 24, .45); color: var(--ink); } .mega-card__img { position: relative; height: 160px; background-color: var(--ink-2); background-image: var(--card-grad); background-size: cover; background-position: center; } .mega-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; } .mega-card__title { font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; line-height: 1.1; } .mega-card__text { font-size: .8125rem; line-height: 1.5; color: var(--muted); } .mega-card__badge { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: var(--pill); background: #fff; color: var(--card-color); font-size: .75rem; font-weight: 800; } .mega-card__live { position: absolute; bottom: 12px; left: 12px; } .mega-card.is-current { box-shadow: inset 0 0 0 3px var(--card-color); } .mega-link { display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: var(--r-m); background: var(--c-green-s); text-decoration: none; color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s; } .mega-link:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -24px rgba(30, 20, 24, .45); color: var(--ink); } .mega-link__icon { width: 60px; height: 60px; border-radius: 20px; background: var(--c-green-d); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mega-link strong { display: block; font-family: var(--font-h); font-size: 1.3rem; } .mega-link span { font-size: .875rem; color: #4A5A3F; } .mega-link .mega-link__icon { color: #fff; } .mega-grid-wv { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 14px; } .mega-grid-wv .mega-card { grid-row: span 2; background: var(--c-green-s); } .mega-grid-wv .mega-card__img { flex: 1; height: auto; min-height: 200px; } .mega-grid-seasons { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } /* Zeitleiste */ .yearbar { margin-top: 14px; padding: 18px 28px 20px; border-radius: 26px; background: var(--cream); } .yearbar__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: .75rem; font-weight: 700; color: #8A7A7F; margin-bottom: 8px; } .yearbar__track { position: relative; height: 40px; } .yearbar__track::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 8px; border-radius: 8px; background: rgba(30, 20, 24, .07); } .yearbar__seg { position: absolute; top: 4px; height: 14px; border-radius: 8px; } .yearbar__seg--lane1 { top: 24px; } .yearbar__today { position: absolute; top: -6px; bottom: -4px; width: 3px; border-radius: 3px; background: var(--ink); } .yearbar__today span { position: absolute; left: 10px; top: 26px; font-size: .75rem; font-weight: 800; white-space: nowrap; } /* Info & Kontakt */ .mega--info .mega__row { height: 372px; } .info-jobs { flex: 1.25; border-radius: var(--r-m); overflow: hidden; position: relative; background: var(--ink); color: #fff; text-decoration: none; display: flex; transition: transform .3s var(--ease), box-shadow .3s; } .info-jobs:hover { transform: translateY(-5px); color: #fff; box-shadow: 0 26px 50px -24px rgba(30, 20, 24, .5); } .info-jobs__blob { position: absolute; right: -90px; top: -110px; width: 320px; height: 320px; background: var(--grad); opacity: .55; } .info-jobs__body { flex: 1; padding: 34px; display: flex; flex-direction: column; gap: 12px; position: relative; } .info-jobs__title { font-family: var(--font-h); font-weight: 800; font-size: 2.875rem; line-height: .95; letter-spacing: -.035em; } .info-jobs__text { font-size: .9375rem; color: var(--on-dark); max-width: 280px; } .info-jobs__img { width: 200px; flex-shrink: 0; margin: 14px 14px 14px 0; border-radius: 999px 999px 24px 24px; background: rgba(255, 255, 255, .1) center / cover; } .info-contact { flex: 1; display: flex; flex-direction: column; gap: 14px; } .contact-card { flex: 1; padding: 24px 26px; border-radius: var(--r-m); background: var(--cream); display: flex; flex-direction: column; gap: 6px; } .contact-card__label { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .contact-card__phone { font-family: var(--font-h); font-weight: 800; font-size: 1.875rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; } .contact-card__mail { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--ink-2); text-decoration: none; } .info-social { flex: 1; display: flex; flex-direction: column; gap: 12px; } .social-hero { flex: 1.4; padding: 24px 26px; border-radius: var(--r-m); background: var(--grad); color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .social-hero:hover { color: #fff; } .social-hero__icon { width: 52px; height: 52px; border-radius: 18px; background: rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; } .social-hero__handle { font-family: var(--font-h); font-weight: 800; font-size: 1.625rem; letter-spacing: -.02em; } .social-row { flex: 1; display: flex; gap: 12px; } .social-tile { flex: 1; padding: 18px 20px; border-radius: 26px; background: var(--ink); color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; font-weight: 800; transition: transform .25s, background .25s; } .social-tile:hover { transform: translateY(-4px); background: #3A2A2E; color: #fff; } /* ─── 9. Anker-Navigation (Button unten links + Panel von links) ── */ .pagenav-sentinel { display: block; height: 1px; } .pagenav-btn { position: fixed; z-index: 80; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border: 0; border-radius: var(--pill); background: #fff; color: var(--ink); cursor: pointer; text-align: left; box-shadow: 0 18px 40px -16px rgba(30, 20, 24, .45), 0 0 0 1px rgba(30, 20, 24, .05); transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .35s, box-shadow .25s; } .pagenav-btn.is-visible { transform: none; opacity: 1; pointer-events: auto; } .pagenav-btn:hover { box-shadow: 0 24px 50px -16px rgba(30, 20, 24, .5), 0 0 0 1px rgba(30, 20, 24, .05); transform: translateY(-2px); } .pagenav-btn__ring { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pagenav-btn__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .pagenav-btn__track { fill: none; stroke: color-mix(in srgb, var(--a) 18%, transparent); stroke-width: 3; } .pagenav-btn__progress { fill: none; stroke: var(--a); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .15s linear; } .pagenav-btn__text small { display: block; font-size: .75rem; font-weight: 700; color: var(--muted); line-height: 1.2; } .pagenav-btn__text strong { display: block; font-family: var(--font-h); font-size: 1.0625rem; line-height: 1.2; } .pagenav { position: fixed; inset: 0; z-index: 150; } .pagenav__scrim { position: absolute; inset: 0; background: rgba(30, 20, 24, .35); backdrop-filter: blur(4px); animation: fade-in .3s ease; } .pagenav__panel { position: absolute; left: 16px; top: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); border-radius: 36px; background: #fff; overflow: hidden auto; padding: 22px 22px 22px 30px; display: flex; flex-direction: column; box-shadow: 0 40px 90px -30px rgba(30, 20, 24, .55); animation: slide-in-left .45s var(--ease) both; } @keyframes slide-in-left { from { transform: translateX(-105%); } to { transform: none; } } .pagenav__panel > * { position: relative; } .pagenav__head { display: flex; align-items: center; justify-content: space-between; } .pagenav__label { display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ad); } .pagenav__title { margin: 22px 0 18px; font-family: var(--font-h); font-weight: 800; font-size: 2.75rem; line-height: .95; letter-spacing: -.04em; } .pagenav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .pagenav__list a { display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 12px; margin-left: -12px; border-radius: 22px; color: var(--ink); text-decoration: none; transition: background .25s, padding .25s; } .pagenav__num { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 800; background: var(--cream); color: var(--muted); transition: background .25s, color .25s; } .pagenav__text { flex: 1; font-family: var(--font-h); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; } .pagenav__list .icon { opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s; color: var(--ad); } .pagenav__list a:hover { background: var(--cream); color: var(--ink); } .pagenav__list a:hover .icon, .pagenav__list a.is-active .icon { opacity: 1; transform: none; } .pagenav__list a.is-active { background: var(--as); } .pagenav__list a.is-active .pagenav__num { background: var(--btn-bg); color: var(--btn-fg); } .pagenav__foot { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 14px; } .pagenav__foot .btn { width: 100%; } .pagenav__price { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-radius: 20px; background: var(--cream); } .pagenav__price small { font-size: .875rem; font-weight: 700; color: var(--muted); } .pagenav__price strong { font-family: var(--font-h); font-size: 1.75rem; } /* Mobile Ticket-Leiste */ .mobile-cta { display: none; } /* ─── 10. Drawer (mobil) ──────────────────────────────────── */ .drawer { position: fixed; inset: 0; z-index: 200; } .drawer__scrim { position: absolute; inset: 0; background: rgba(30, 20, 24, .5); backdrop-filter: blur(6px); animation: fade-in .3s ease; } .drawer__panel { position: absolute; inset: 8px; border-radius: 32px; background: var(--cream); display: flex; flex-direction: column; overflow: hidden; animation: pop-in .4s var(--ease) both; } .drawer__head { padding: 14px 14px 10px 20px; display: flex; align-items: center; justify-content: space-between; } .drawer__body { flex: 1; overflow-y: auto; padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 10px; } .drawer__foot { padding: 12px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); background: #fff; } .drawer__social { display: flex; gap: 8px; } .drawer__social a { flex: 1; height: 46px; border-radius: 16px; background: var(--cream); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: .8125rem; } .drawer__social a:not(:first-child) { flex: 0 0 46px; } .drawer__here { padding: 16px; border-radius: 26px; background: var(--as); display: flex; flex-direction: column; gap: 12px; } .drawer__here-label { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ad); } .drawer__here-links { display: flex; flex-wrap: wrap; gap: 6px; } .drawer__here-links a { padding: 9px 13px; border-radius: var(--pill); background: #fff; color: var(--ink); text-decoration: none; font-size: .8125rem; font-weight: 700; } .acc { border-radius: 32px; transition: background .25s; } .acc[open] { background: #fff; box-shadow: 0 16px 34px -24px rgba(30, 20, 24, .35); } .acc summary { list-style: none; padding: 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--font-h); font-weight: 800; font-size: 1.3rem; line-height: 1.1; } .acc summary::-webkit-details-marker { display: none; } .acc summary .icon { margin-left: auto; transition: transform .25s; flex-shrink: 0; } .acc[open] summary .icon { transform: rotate(180deg); } .acc__content { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; } .acc__link { padding: 14px 16px; border-radius: var(--r-s); background: var(--cream); color: var(--ink); text-decoration: none; font-weight: 800; font-size: .9375rem; display: flex; justify-content: space-between; align-items: center; } .acc__scroller { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r-s); scrollbar-width: none; } .acc__scroller::-webkit-scrollbar { display: none; } .season-mini { flex: 0 0 170px; height: 200px; scroll-snap-align: start; position: relative; border-radius: var(--r-s); padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; text-decoration: none; background-color: var(--ink-2); background-image: var(--card-grad); background-size: cover; background-position: center; } .season-mini::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(0deg, rgba(30, 20, 24, .55), transparent 60%); } .season-mini > * { position: relative; z-index: 1; } .season-mini__badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: var(--pill); background: #fff; color: var(--card-color); font-size: .6875rem; font-weight: 800; z-index: 1; } .season-mini strong { font-family: var(--font-h); font-size: 1.1875rem; line-height: 1.05; } /* ─── 11. Footer ───────────────────────────────────────────── */ .site-footer { position: relative; overflow: hidden; margin-top: clamp(40px, 5vw, 80px); background: var(--ink); color: var(--on-dark); border-radius: clamp(36px, 4vw, var(--r-xl)) clamp(36px, 4vw, var(--r-xl)) 0 0; padding: clamp(60px, 7vw, 100px) var(--gutter) 40px; } .site-footer a { color: var(--on-dark); text-decoration: none; } .site-footer a:hover { color: #fff; } .footer__word { position: absolute; right: -30px; bottom: -70px; font-family: var(--font-h); font-weight: 800; font-size: clamp(130px, 19vw, 280px); letter-spacing: -.06em; line-height: 1; color: rgba(255, 255, 255, .04); white-space: nowrap; pointer-events: none; } .footer__glow { position: absolute; left: -160px; top: -200px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--a) 40%, transparent), transparent 70%); pointer-events: none; } .footer__inner { position: relative; max-width: calc(var(--wrap) - 2 * 88px); margin-inline: auto; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); } .footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; } .footer__title { font-family: var(--font-h); font-weight: 800; font-size: var(--fs-h2); line-height: .95; letter-spacing: -.045em; color: #fff; margin: 18px 0 0; } .footer__title em { color: var(--al); } .footer .logo, .site-footer .logo { color: #fff; gap: 14px; } .site-footer .logo svg { width: 64px; height: 64px; } .site-footer .logo span { font-size: 2.25rem; } .site-footer .custom-logo { max-height: 90px; } .footer__trio { display: flex; align-items: flex-end; padding-right: 20px; } .footer__trio > a { position: relative; border: 6px solid var(--ink); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; background-color: var(--ink-2); background-image: var(--card-grad); background-size: cover; background-position: center; } .footer__trio > a + a { margin-left: -30px; } .footer__trio > a:nth-child(1) { width: 170px; height: 210px; transform: rotate(-6deg); border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; } .footer__trio > a:nth-child(2) { width: 190px; height: 250px; z-index: 2; border-radius: 999px 999px 36px 36px; } .footer__trio > a:nth-child(3) { width: 170px; height: 210px; transform: rotate(6deg); border-radius: 36px; } .footer__trio .chip { background: #fff; color: var(--ink); font-size: .75rem; font-weight: 800; padding: 6px 12px; } .footer__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .f-card { padding: 32px; border-radius: 36px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 14px; } .f-card__label { display: flex; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; } .f-card__swatch { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(150deg, #A8D08A, #2F5220); } .f-card__stack { display: flex; } .f-card__stack span { width: 34px; height: 34px; border-radius: 12px; border: 3px solid #2A2024; } .f-card__stack span + span { margin-left: -10px; } .f-card__phone { font-family: var(--font-h); font-weight: 800; font-size: 1.875rem; letter-spacing: -.02em; color: #fff !important; } .f-card hr { border: 0; height: 1px; background: rgba(255, 255, 255, .1); margin: 6px 0; width: 100%; } .f-card__main { font-weight: 800; color: #fff !important; } .f-card__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .f-card__links a, .f-card__sub { display: flex; align-items: center; gap: 8px; font-size: .875rem; } .f-card__links .icon, .f-card__sub .icon { color: var(--al); } .f-card--social { background: var(--grad); border: 0; color: var(--ink); position: relative; overflow: hidden; } .f-card--social .f-card__label { color: var(--ink); } .f-card--social .h3 { font-size: 2rem; line-height: 1; margin-bottom: 6px; } .f-social { padding: 12px 14px; border-radius: 22px; background: var(--ink); color: #fff !important; display: flex; align-items: center; gap: 14px; transition: transform .2s; } .f-social:hover { transform: translateX(4px); } .f-social__icon { width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; } .f-social strong { display: block; font-size: .9375rem; } .f-social small { font-size: .75rem; color: var(--on-dark); } .f-social > .icon:last-child { margin-left: auto; } .footer__address { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .footer__address .chip { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; padding: 14px 20px; font-size: .9375rem; } .footer__address .chip .icon { color: var(--al); } .footer__address > a { color: var(--al) !important; font-weight: 700; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .875rem; color: var(--muted-2); } .footer__legal { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; } /* ─── 12. Startseite ───────────────────────────────────────── */ /* Story-Hero */ .hero-stories { position: relative; height: 100svh; min-height: 780px; max-height: 1080px; overflow: hidden; background: var(--ink); color: #fff; } .story { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; } .story.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s 0s; z-index: 2; } .story__bg { position: absolute; inset: 0; background: var(--story-grad); background-size: 220% 220%; animation: grad-shift 16s ease infinite; } .story__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 20, 24, .72) 0%, rgba(30, 20, 24, .35) 45%, rgba(30, 20, 24, 0) 70%); } .story__blob { position: absolute; right: 7.5%; top: 15%; width: min(540px, 38vw); aspect-ratio: 9 / 10; overflow: hidden; background: rgba(255, 255, 255, .14) center / cover no-repeat; transform: scale(.88); transition: transform 1.1s var(--ease); } .story.is-active .story__blob { transform: scale(1); } .story__circle { position: absolute; right: 38%; bottom: 20%; width: min(210px, 15vw); aspect-ratio: 1; border-radius: 50%; border: 8px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .18) center / cover; } .story__sticker { position: absolute; right: 5%; top: 24%; padding: 18px 22px; border-radius: var(--r-m); background: #fff; color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); display: flex; align-items: center; gap: 12px; } .story__sticker small { display: block; font-size: .75rem; font-weight: 700; color: var(--muted); } .story__sticker strong { display: block; font-family: var(--font-h); font-size: 1.5rem; line-height: 1.05; } .story__content { position: absolute; left: var(--gutter); width: min(760px, 55vw); top: calc(24px + var(--header-h) + 48px); /* immer unter der Navigation */ bottom: 200px; /* immer über den Story-Tabs */ display: flex; flex-direction: column; justify-content: center; gap: 24px; pointer-events: none; } .story__content > * { opacity: 0; transform: translateY(30px); transition: transform .9s var(--ease), opacity .9s; } .story.is-active .story__content { pointer-events: auto; } .story.is-active .story__content > * { opacity: 1; transform: none; } .story.is-active .story__content > :nth-child(2) { transition-delay: .06s; } .story.is-active .story__content > :nth-child(3) { transition-delay: .12s; } .story.is-active .story__content > :nth-child(n+4) { transition-delay: .18s; } .story__title { color: #fff; } .story__title span { display: block; color: var(--story-accent); } .story__text { margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 560px; } .story__actions { display: flex; gap: 14px; flex-wrap: wrap; } .story__cta { background: var(--story-btn); color: var(--story-btn-fg); } .story__cta:hover { color: var(--story-btn-fg); } @keyframes grad-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .stories-nav { position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: 56px; display: flex; align-items: flex-end; gap: 28px; } .stories-tabs { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .stories-tab { border: 0; background: transparent; cursor: pointer; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 12px; color: rgba(255, 255, 255, .55); } .stories-tab__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; } .stories-tab__bar i { display: block; height: 100%; width: 0; background: var(--tab-color); border-radius: 4px; } .stories-tab.is-done .stories-tab__bar i { width: 100%; } .stories-tab.is-active { color: #fff; } .stories-tab.is-active .stories-tab__bar i { animation: progress var(--story-duration, 6.5s) linear forwards; } .hero-stories.is-paused .stories-tab.is-active .stories-tab__bar i { animation: none; width: 100%; } .stories-tab strong { font-family: var(--font-h); font-size: 1.25rem; font-weight: 800; transition: color .3s; } .stories-tab small { font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .6); } .stories-arrows { display: flex; gap: 10px; } /* Zwei Welten */ .worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .world { min-height: 580px; border-radius: 52px; overflow: hidden; position: relative; text-decoration: none; color: #fff; padding: 44px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .35s var(--ease), box-shadow .35s; } .world:hover { transform: translateY(-8px); box-shadow: var(--shadow-pop); color: #fff; } .world--wv { background: linear-gradient(160deg, #A8D08A, #5C8C3A 50%, #2F5220); } .world--st { background: linear-gradient(160deg, #FF8FA0, #D6334F 50%, #8E1230); } .world__img { position: absolute; right: -60px; top: 60px; width: 340px; height: 360px; background: rgba(255, 255, 255, .16) center / cover; } .world > * { position: relative; } .world__body { display: flex; flex-direction: column; gap: 14px; } .world__title { font-size: var(--fs-h2); line-height: .95; } .world__chips { display: flex; gap: 8px; flex-wrap: wrap; } .world .btn { align-self: flex-start; margin-top: 6px; } /* Jahresrad */ .year { display: flex; gap: 70px; align-items: center; } .year__glow { position: absolute; left: -160px; top: -160px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(214, 51, 79, .4), transparent 70%); } .year__wheel { position: relative; flex: 0 0 min(540px, 42vw); aspect-ratio: 1; } .year__wheel svg { width: 100%; height: 100%; overflow: visible; } .year__arc { fill: none; stroke-linecap: round; cursor: pointer; opacity: .45; transition: opacity .3s, stroke-width .3s; } .year__arc.is-active { opacity: 1; } .year__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; gap: 2px; } .year__center small { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); } .year__center strong { font-family: var(--font-h); font-size: 1.875rem; line-height: 1; } .year__center span { font-size: .8125rem; font-weight: 700; color: var(--c-pumpkin-l); } .year__detail { flex: 1; display: flex; flex-direction: column; gap: 22px; position: relative; } .year__chips { display: flex; gap: 8px; flex-wrap: wrap; } .year__chip { padding: 12px 18px; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font-weight: 800; font-size: .9375rem; cursor: pointer; transition: all .25s; } .year__chip.is-active { border-color: transparent; background: var(--chip-color); color: var(--ink); } .year__card { padding: 30px; border-radius: 36px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); display: flex; gap: 24px; align-items: center; } .year__card-img { width: 150px; height: 170px; flex-shrink: 0; border-radius: var(--r-m); background-color: var(--ink-2); background-image: var(--card-grad); background-size: cover; background-position: center; } .year__card-body { display: flex; flex-direction: column; gap: 8px; } .year__card-body .chip { align-self: flex-start; background: var(--chip-color); color: var(--ink); font-size: .75rem; padding: 6px 12px; } .year__card-body p { margin: 0; color: var(--on-dark); font-size: .9375rem; } .year__card-body .btn { align-self: flex-start; margin-top: 6px; } /* Karussell (Scroll-Snap + Pfeile) */ .carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 20px 0 64px; margin-bottom: -34px; scroll-padding-inline: var(--gutter); } .carousel::-webkit-scrollbar { display: none; } .carousel__track { display: flex; gap: 24px; padding-inline: var(--gutter); width: max-content; } .carousel__nav { display: flex; align-items: center; gap: 12px; } .carousel__count { font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; margin-right: 8px; } .carousel__count span { color: var(--muted-2); } .berry-card { flex: 0 0 min(560px, 82vw); width: min(560px, 82vw); height: min(560px, 110vw); /* width: Safari rechnet die Spurbreite sonst ohne die Karten (Inhalt ist absolut positioniert) */ border-radius: 48px; overflow: hidden; position: relative; scroll-snap-align: start; text-decoration: none; color: #fff; background-color: var(--ink-2); background-image: var(--card-grad); background-size: cover; background-position: center; } .berry-card:nth-child(even) { flex-basis: min(460px, 82vw); width: min(460px, 82vw); } .berry-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 20, 24, .75), rgba(30, 20, 24, 0) 55%); } .berry-card__badge { position: absolute; z-index: 1; top: 24px; left: 24px; padding: 8px 14px; border-radius: var(--pill); background: #fff; color: var(--card-color); font-size: .8125rem; font-weight: 800; } .berry-card__body { position: absolute; z-index: 1; left: 30px; right: 30px; bottom: 30px; display: flex; flex-direction: column; gap: 8px; } .berry-card__body strong { font-family: var(--font-h); font-size: 2.125rem; line-height: 1; letter-spacing: -.03em; } .berry-card__body span { font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .88); } .berry-card:hover { color: #fff; } .berry-card { transition: transform .35s var(--ease), box-shadow .35s; } .berry-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-pop); } /* Geschichte-Teaser */ .story-teaser { border-radius: var(--r-xl); background: linear-gradient(135deg, #FFF0F2, #FFE0E5 50%, var(--cream)); display: flex; align-items: center; gap: 70px; padding: clamp(36px, 5vw, 70px); position: relative; overflow: hidden; } .story-teaser__year { position: absolute; right: -20px; bottom: -70px; font-family: var(--font-h); font-weight: 800; font-size: clamp(160px, 21vw, 300px); letter-spacing: -.06em; line-height: 1; color: rgba(214, 51, 79, .08); pointer-events: none; } .story-teaser__visual { position: relative; flex: 0 0 min(440px, 40%); aspect-ratio: 44 / 46; } .story-teaser__photo { position: absolute; inset: 0 40px 40px 0; background: linear-gradient(160deg, #FF8FA0, #D6334F 55%, #8E1230) center / cover; } .story-teaser__badge { position: absolute; right: 0; bottom: 0; width: 150px; height: 150px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45); } .story-teaser__badge strong { font-family: var(--font-h); font-size: 2.875rem; line-height: 1; } .story-teaser__badge span { font-size: .75rem; font-weight: 700; color: var(--c-strawberry-l); line-height: 1.3; } .story-teaser__body { flex: 1; display: flex; flex-direction: column; gap: 20px; position: relative; } .story-teaser__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* Momente vom Hof – Galerie-Mosaik */ .moments-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 17vw, 250px); } .moment { overflow: hidden; background-color: var(--ink-2); background-image: var(--card-grad); background-size: cover; background-position: center; transition: transform .5s var(--ease); } .moment:hover { transform: scale(1.02); } .moment--1 { grid-column: 1; grid-row: 1 / span 2; border-radius: 999px 999px 40px 40px; } .moment--2 { grid-column: 2 / span 2; grid-row: 1; border-radius: 40px; } .moment--3 { grid-column: 4; grid-row: 1 / span 2; border-radius: 40px; } .moment--4 { grid-column: 2; grid-row: 2; border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; } .moment--5 { grid-column: 3; grid-row: 2; border-radius: 999px; } .moment--6 { grid-column: 1 / span 2; grid-row: 3; border-radius: 40px; } .moment--7 { grid-column: 3; grid-row: 3; border-radius: 999px 999px 40px 40px; } .moment--insta { grid-column: 4; grid-row: 3; border-radius: 40px; background: var(--as); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; } .moment--insta:hover { color: var(--ink); } .btn, .btn:hover, .btn-round, .chip, [class*="card"], [class*="card"]:hover, .world, .tour, .moment, .mega-link, .social-tile, .social-hero, .f-social, .acc__link, .season-mini { text-decoration: none; } .moment--insta strong { font-family: var(--font-h); font-size: 1.5rem; line-height: 1.05; } .moment--insta span { font-weight: 800; font-size: .875rem; color: var(--ad); } /* Live-Balken */ .livebar { margin: 0 clamp(8px, 2.8vw, 40px); padding: 30px 30px 30px 48px; border-radius: var(--pill); background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 30px 60px -30px rgba(30, 20, 24, .6); } .livebar__text { display: flex; align-items: center; gap: 18px; font-family: var(--font-h); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -.03em; } .livebar__text em { font-style: normal; color: var(--live-color); } .livebar .btn { background: var(--live-btn); color: var(--ink); } /* ─── 13. Responsive ───────────────────────────────────────── */ @media (max-width: 1180px) { .main-nav, .btn-shop, .mega, .mega-scrim, .pagenav-btn, .pagenav { display: none !important; } .burger { display: inline-flex; } .nav-bar { margin: 12px 12px 0; padding: 6px 6px 6px 16px; } .logo span { font-size: 1.2rem; } .btn-cart-mobile { display: inline-flex; } .mobile-cta { display: flex; position: fixed; z-index: 90; left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); padding: 8px 8px 8px 20px; border-radius: var(--pill); background: #fff; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .5); align-items: center; justify-content: space-between; gap: 12px; } .mobile-cta small { display: block; font-size: .6875rem; font-weight: 700; color: var(--muted); } .mobile-cta strong { font-family: var(--font-h); font-size: 1.25rem; line-height: 1; } .has-subnav .site-footer { padding-bottom: 120px; } .year { flex-direction: column; gap: 40px; } .year__wheel { flex-basis: auto; width: min(540px, 100%); } .story-teaser { flex-direction: column; align-items: stretch; } .story-teaser__visual { flex-basis: auto; width: min(440px, 100%); } .footer__cards { grid-template-columns: 1fr 1fr; } .footer__cards .f-card--social { grid-column: span 2; } } @media (min-width: 1181px) { .btn-cart-mobile { display: none; } } @media (max-width: 860px) { .worlds { grid-template-columns: 1fr; } .world { min-height: 480px; padding: 30px; border-radius: 40px; } .world__img { width: 240px; height: 260px; right: -50px; } .hero-stories { min-height: 680px; } .story__blob { right: -60px; top: 110px; width: 300px; opacity: .6; } .story__circle, .story__sticker { display: none; } .story__content { left: 20px; right: 20px; width: auto; top: 110px; bottom: 150px; justify-content: flex-end; gap: 16px; } .stories-nav { left: 20px; right: 20px; bottom: 28px; flex-direction: column; align-items: stretch; gap: 16px; } .stories-tabs { gap: 6px; } .stories-tab strong { font-size: .8125rem; } .stories-tab small { display: none; } .stories-arrows { display: none; } .year__card { flex-direction: column; align-items: flex-start; } .year__card-img { width: 100%; height: 160px; } .livebar { flex-direction: column; align-items: flex-start; border-radius: 32px; padding: 28px; } .footer__trio { display: none; } .footer__cards { grid-template-columns: 1fr; } .footer__cards .f-card--social { grid-column: auto; } .f-card { padding: 22px; border-radius: 28px; } .section-head { align-items: flex-start; } .moments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 12px; grid-auto-flow: dense; } .moments-grid > * { grid-column: auto !important; grid-row: auto !important; } .moment--1, .moment--3 { grid-row: span 2 !important; } .moment--2, .moment--6 { grid-column: span 2 !important; } } /* ─── 14. Reduced Motion ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ─── 15. Standard-Inhalte (Impressum, AGB …) ─────────────── */ .entry__content { max-width: 760px; font-size: 1.0625rem; } .entry__content h2, .entry__content h3 { font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 2em 0 .6em; } .entry__content h2 { font-size: 1.75rem; } .entry__content h3 { font-size: 1.3rem; } .entry__content p, .entry__content ul, .entry__content ol { margin: 0 0 1.1em; } .entry__content img { border-radius: var(--r-m); } /* ═══════════════════════════════════════════════════════════ 16. Seitenbausteine (Kürbishof, später Tulpen, Frühstück …) ═══════════════════════════════════════════════════════════ */ /* Seiten-Hero (Video / Bild) */ .page-hero { position: relative; height: 100svh; min-height: 820px; max-height: 1000px; overflow: hidden; background: var(--ink); color: #fff; } .page-hero__media { position: absolute; inset: 0; background-color: var(--ad); } .page-hero__media video { width: 100%; height: 100%; object-fit: cover; } .page-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 20, 24, .85) 0%, rgba(30, 20, 24, .45) 45%, rgba(30, 20, 24, 0) 75%); } .page-hero__blob { position: absolute; right: -120px; top: 18%; width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--al) 50%, transparent), transparent 70%); pointer-events: none; } .page-hero__content { position: absolute; left: var(--gutter); width: min(760px, 58vw); top: calc(24px + var(--header-h) + 48px); bottom: 170px; display: flex; flex-direction: column; justify-content: center; gap: 26px; } .page-hero__title { color: #fff; } .page-hero__title span { background: linear-gradient(90deg, var(--al), var(--btn-hi) 60%, var(--al)); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-hero__text { margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 580px; } .page-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; } .page-hero__sticker { position: absolute; right: 120px; bottom: 26%; padding: 22px 26px; background: #fff; color: var(--ink); border-radius: 30px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 4px; } .page-hero__sticker small { font-size: .8125rem; font-weight: 700; color: var(--muted); } .page-hero__sticker strong { font-family: var(--font-h); font-size: 2.75rem; line-height: 1; } .page-hero__play { position: absolute; right: var(--gutter); bottom: 150px; } .page-hero__scroll { position: absolute; left: 50%; bottom: 140px; margin-left: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); color: #fff; display: flex; align-items: center; justify-content: center; animation: bounce 1.8s ease-in-out infinite; } .page-hero__scroll:hover { color: #fff; } .page-hero__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 120px; } .page-hero__leaves .leaf { position: absolute; top: 0; color: var(--al); animation: leaf-fall 11s linear infinite; } .page-hero__leaves .leaf svg { fill: currentColor; stroke: none; } .leaf--1 { left: 54%; } .leaf--2 { left: 75%; animation-delay: -4s !important; color: var(--btn-bg) !important; } .leaf--3 { left: 88%; animation-delay: -7s !important; } .leaf--4 { left: 39%; animation-delay: -2s !important; color: var(--a) !important; } @keyframes leaf-fall { 0% { transform: translate(0, -40px) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(120px, 900px) rotate(540deg); opacity: 0; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* Laufband */ .ticker { background: var(--btn-bg); color: var(--btn-fg); height: 88px; overflow: hidden; display: flex; align-items: center; } .ticker__track { display: flex; gap: 44px; white-space: nowrap; width: max-content; padding-left: 44px; font-family: var(--font-h); font-weight: 800; font-size: 1.875rem; letter-spacing: -.02em; animation: marquee 32s linear infinite; } /* Text + Foto-Cluster */ .split { display: flex; gap: 80px; align-items: center; } .split__text { flex: 0 0 min(560px, 45%); display: flex; flex-direction: column; gap: 20px; } .photo-cluster { flex: 1; position: relative; height: 640px; } .photo-cluster > div { position: absolute; background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; } .photo-cluster__a { left: 40px; top: 0; width: 420px; height: 500px; box-shadow: 0 40px 80px -40px rgba(30, 20, 24, .5); } .photo-cluster__b { right: 0; top: 90px; width: 250px; height: 300px; border-radius: 36px; border: 8px solid #fff; box-shadow: var(--shadow-pop); } .photo-cluster__c { right: 120px; bottom: 0; width: 280px; height: 220px; border-radius: 999px 999px 36px 36px; border: 8px solid #fff; box-shadow: var(--shadow-pop); } .photo-cluster__tag { position: absolute; padding: 12px 18px; border-radius: var(--pill); font-weight: 700; font-size: .9375rem; display: inline-flex; align-items: center; gap: 8px; } .photo-cluster__tag--dark { left: 0; bottom: 70px; background: var(--ink); color: #fff; transform: rotate(-4deg); } .photo-cluster__tag--light { right: 30px; top: 20px; background: #fff; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .3); transform: rotate(5deg); } .photo-cluster__tag--light .icon { color: var(--a); } /* Dunkler Block: Feature-Karten */ .block__glow { position: absolute; right: -140px; top: -160px; width: 480px; height: 480px; background: radial-gradient(circle, color-mix(in srgb, var(--a) 50%, transparent), transparent 70%); pointer-events: none; } .block__glow--light { right: auto; left: -100px; top: auto; bottom: -140px; width: 360px; height: 360px; background: rgba(255, 255, 255, .45); } .block > * { position: relative; } .block > .block__glow, .block > .year__glow { position: absolute; } .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .feature { padding: 32px; border-radius: 36px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 14px; transition: transform .35s var(--ease); } .feature:hover { transform: translateY(-6px); } .feature__icon { width: 60px; height: 60px; border-radius: 20px; background: color-mix(in srgb, var(--a) 25%, transparent); color: var(--al); display: flex; align-items: center; justify-content: center; } .feature__title { font-family: var(--font-h); font-weight: 800; font-size: 1.75rem; line-height: 1.1; margin: 0; } .feature p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--on-dark); } .feature--light { background: var(--grad); background: linear-gradient(160deg, var(--al), var(--btn-bg)); color: var(--ink); border: 0; } .feature--light p { color: var(--ink); } .feature--light .feature__icon, .feature--deep .feature__icon { background: rgba(255, 255, 255, .45); color: var(--ink); } .feature--deep { background: linear-gradient(160deg, var(--a), var(--ad)); color: #fff; border: 0; } .feature--deep p { color: rgba(255, 255, 255, .9); } .feature--deep .feature__icon { background: rgba(255, 255, 255, .2); color: #fff; } /* Virtueller Rundgang */ .tour { position: relative; min-height: 460px; border-radius: 48px; overflow: hidden; display: flex; align-items: center; padding: 0 clamp(28px, 5vw, 72px); color: #fff; text-decoration: none; background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; } .tour:hover { color: #fff; } .tour__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 20, 24, .7), rgba(30, 20, 24, .1)); } .tour__body { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 560px; padding-block: 56px; } .tour__text { font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .92); } .tour__play { position: absolute; right: 16%; top: 50%; width: 240px; height: 240px; transform: translateY(-50%); } .tour__ring { position: absolute; inset: 0; animation: spin 26s linear infinite; } .tour__ring text { font-family: var(--font-h); font-size: 18px; font-weight: 800; letter-spacing: 5px; fill: #fff; } .tour__btn { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; background: #fff; color: var(--ad); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .4); transition: transform .25s var(--ease); } .tour:hover .tour__btn { transform: scale(1.08); } @keyframes spin { to { transform: rotate(360deg); } } /* Bild-Text-Karten + Chips */ .section-head--center { justify-content: center; text-align: center; } .section-head--center .section-head__title { align-items: center; } .media-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .media-card { display: flex; border-radius: 44px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); transition: transform .35s var(--ease); } .media-card:hover { transform: translateY(-6px); } .media-card__img { flex: 0 0 240px; background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; } .media-card__body { padding: 36px; display: flex; flex-direction: column; gap: 12px; } .media-card__body p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--ink-2); } .chip-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; } .chip--xl { padding: 16px 24px; font-size: 1rem; } .chip--outline { background: #fff; box-shadow: inset 0 0 0 2px var(--as); color: var(--ink); } /* Motto-Mittwoch */ .motto { background: linear-gradient(135deg, var(--as) 0%, color-mix(in srgb, var(--al) 45%, #fff) 45%, var(--as) 100%); } .motto__timeline { position: relative; display: flex; justify-content: space-between; margin-bottom: 36px; padding-inline: 20px; } .motto__timeline::before { content: ''; position: absolute; left: 40px; right: 40px; top: 50%; height: 4px; border-radius: 4px; background: rgba(30, 20, 24, .12); } .motto__date { position: relative; padding: 10px 18px; border-radius: var(--pill); border: 0; background: #fff; color: var(--ink); font-weight: 800; font-size: .9375rem; cursor: pointer; transition: all .3s var(--ease); } .motto__date.is-active { background: var(--ink); color: #fff; transform: scale(1.1); } .motto__stage { display: flex; gap: 36px; align-items: stretch; } .motto__rail { flex: 1; display: flex; gap: 18px; align-items: center; justify-content: center; min-width: 0; overflow: hidden; padding: 20px 10px; } @media (min-width: 1181px) { .motto-card:not(.is-visible) { display: none; } } .motto-card { flex: 0 0 170px; padding: 10px 10px 14px; border: 0; border-radius: 26px; background: #fff; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 10px; transform: rotate(-3deg); opacity: .8; box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .3); transition: all .4s var(--ease); } .motto-card:nth-child(even) { transform: rotate(3deg); } .motto-card.is-active { flex-basis: 240px; transform: translateY(-10px); opacity: 1; box-shadow: 0 30px 50px -20px color-mix(in srgb, var(--ad) 55%, transparent); } .motto-card__img { position: relative; display: block; height: 190px; border-radius: 18px; background: var(--grad) center / cover; transition: height .4s var(--ease); } .motto-card.is-active .motto-card__img { height: 260px; } .motto-card__ai { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: var(--pill); background: rgba(0, 0, 0, .45); color: #fff; font-size: .625rem; font-weight: 700; } .motto-card__stamp { position: absolute; bottom: 10px; right: 10px; padding: 6px 10px; border-radius: 10px; background: #fff; font-size: .75rem; font-weight: 800; transform: rotate(4deg); } .motto-card__title { font-family: var(--font-h); font-weight: 800; font-size: 1.125rem; line-height: 1.1; } .motto-card__text { display: none; font-size: .8125rem; line-height: 1.55; color: var(--ink-2); } .motto__panel { flex: 0 0 380px; padding: 36px; border-radius: 36px; background: #fff; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ad) 45%, transparent); display: flex; flex-direction: column; gap: 12px; } .motto__panel-item { display: flex; flex-direction: column; gap: 12px; animation: fade-in .35s ease; } .motto__panel-date { font-size: .875rem; font-weight: 700; color: var(--ad); } .motto__panel p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--ink-2); } .motto__nav { margin-top: auto; padding-top: 12px; display: flex; gap: 10px; } .motto__note { margin: 28px 0 0; font-size: .8125rem; color: var(--muted); } /* Tickets & Preise */ .tickets { display: flex; gap: 40px; align-items: stretch; } .tickets__intro { flex: 0 0 min(480px, 40%); display: flex; flex-direction: column; gap: 22px; justify-content: center; } .check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .875rem; font-weight: 600; color: var(--ink-2); } .check-list li { display: flex; align-items: center; gap: 10px; } .check-list .icon { color: var(--a); flex-shrink: 0; } .price-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .price-card { padding: 40px; border-radius: 44px; background: #fff; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 22px; position: relative; overflow: hidden; } .price-card--accent { background: linear-gradient(150deg, var(--al), var(--btn-bg) 50%, var(--a)); } .price-card__blob { position: absolute; right: -80px; top: -80px; width: 220px; height: 220px; background: rgba(255, 255, 255, .2); } .price-card > * { position: relative; } .price-list { margin: 0; display: flex; flex-direction: column; gap: 14px; } .price-list div { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px dashed color-mix(in srgb, var(--ad) 25%, transparent); } .price-list div:last-child { border-bottom: 0; padding-bottom: 0; } .price-list dt { font-weight: 700; } .price-list dd { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: 2.125rem; line-height: 1; } .price-list dd.is-free { font-size: 1.625rem; color: var(--ad); } .price-card--accent .price-list dd.is-free { color: var(--ink); } .price-card__note { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--muted); } .price-card--accent .price-card__note { color: var(--ink); } .info-bar { grid-column: 1 / -1; padding: 26px 32px; border-radius: 32px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 18px; } .info-bar__icon { width: 52px; height: 52px; border-radius: 18px; background: var(--btn-bg); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .info-bar__text { display: flex; flex-direction: column; gap: 2px; } .info-bar__text strong { font-size: 1.0625rem; } .info-bar__text span { font-size: .875rem; color: var(--on-dark); } /* FAQ + Social-Karte */ .faq-section { display: flex; gap: 60px; align-items: flex-start; } .faq-section__side { flex: 0 0 min(420px, 36%); display: flex; flex-direction: column; gap: 22px; } .social-card { margin-top: 20px; padding: 32px; border-radius: 36px; background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .social-card__blob { position: absolute; right: -60px; bottom: -80px; width: 200px; height: 200px; background: color-mix(in srgb, var(--a) 40%, transparent); } .social-card > * { position: relative; } .social-card p { margin: 0; font-size: .9375rem; color: var(--on-dark); } .social-card__links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .social-card__links .btn { flex: 1 1 auto; min-width: 0; } @media (max-width: 520px) { .social-card__links .btn { flex-basis: 100%; } } .faq-list { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .faq { border-radius: 28px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 18%, transparent); transition: background .25s, box-shadow .25s; } .faq[open] { background: #fff; box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--ad) 45%, transparent); } .faq summary { list-style: none; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; line-height: 1.25; } .faq summary::-webkit-details-marker { display: none; } .faq__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ease), background .3s; } .faq[open] .faq__icon { transform: rotate(45deg); background: var(--btn-bg); color: var(--btn-fg); } .faq__body { padding: 0 28px 26px; font-size: 1rem; line-height: 1.65; color: var(--ink-2); } .faq__body p { margin: 0 0 .8em; } .faq__body p:last-child { margin-bottom: 0; } .faq__body ul { margin: .4em 0 .9em; padding-left: 1.1em; display: flex; flex-direction: column; gap: .6em; } .faq-more { align-self: flex-start; margin-top: 10px; } /* CTA-Balken */ .cta-bar { margin: 0 clamp(8px, 2.8vw, 40px) clamp(24px, 4vw, 40px); padding: 36px 36px 36px 48px; border-radius: var(--pill); background: var(--btn-bg); display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ad) 70%, transparent); } .cta-bar__text { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -.03em; color: var(--btn-fg); } /* Responsive Seitenbausteine */ @media (max-width: 1180px) { .split, .tickets, .faq-section { flex-direction: column; align-items: stretch; } .split__text, .tickets__intro, .faq-section__side { flex-basis: auto; } .photo-cluster { height: 520px; max-width: 640px; } .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .motto__panel { display: none; } .motto__rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 26px; padding-bottom: 6px; } .motto__rail::-webkit-scrollbar { display: none; } .motto-card, .motto-card.is-active { flex: 0 0 270px; transform: none; opacity: 1; scroll-snap-align: start; } .motto-card .motto-card__img, .motto-card.is-active .motto-card__img { height: 170px; } .motto-card__title { font-size: 1.375rem; } .motto-card__text { display: block; } .motto__timeline { display: none; } .page-hero__sticker { display: none; } .cta-bar { margin-bottom: 110px; } } @media (max-width: 860px) { .page-hero { min-height: 700px; } .page-hero__shade { background: linear-gradient(180deg, rgba(30, 20, 24, .15) 0%, rgba(30, 20, 24, .8) 70%); } .page-hero__content { left: 20px; right: 20px; width: auto; top: 110px; bottom: 90px; justify-content: flex-end; gap: 16px; } .page-hero__play, .page-hero__scroll { display: none; } .page-hero__wave { height: 50px; } .ticker { height: 56px; } .ticker__track { font-size: 1.25rem; gap: 24px; padding-left: 24px; } .photo-cluster { height: 380px; } .photo-cluster__a { left: 0; width: 250px; height: 300px; } .photo-cluster__b { width: 150px; height: 180px; top: 40px; border-width: 6px; border-radius: 26px; } .photo-cluster__c { right: 30px; width: 180px; height: 140px; border-width: 6px; } .photo-cluster__tag--light { display: none; } .photo-cluster__tag--dark { left: 10px; bottom: 30px; font-size: .8125rem; } .feature-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 26px; } .feature-grid::-webkit-scrollbar { display: none; } .feature { flex: 0 0 250px; scroll-snap-align: start; padding: 24px; border-radius: 26px; } .feature__title { font-size: 1.375rem; } .tour { min-height: 0; border-radius: 36px; } .tour__play { display: none; } .media-cards { grid-template-columns: 1fr; } .media-card { flex-direction: column; border-radius: 30px; } .media-card__img { flex-basis: 170px; } .media-card__body { padding: 22px; } .chip-row { justify-content: flex-start; } .chip--xl { padding: 12px 16px; font-size: .875rem; } .price-grid { grid-template-columns: 1fr; } .price-card { padding: 26px; border-radius: 32px; } .info-bar { flex-direction: column; align-items: flex-start; padding: 20px; border-radius: 26px; } .faq summary { padding: 18px; font-size: 1.0625rem; } .faq__body { padding: 0 18px 18px; font-size: .9375rem; } .cta-bar { flex-direction: column; align-items: flex-start; border-radius: 32px; padding: 28px; } } /* Zwei-Erlebnisse-Karten, 4er-Raster, Ticketkarten ohne Preis */ .duo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; } .duo-card { padding: 40px; border-radius: 40px; display: flex; gap: 28px; align-items: center; transition: transform .35s var(--ease); } .duo-card:hover { transform: translateY(-6px); } .duo-card__img { flex: 0 0 200px; height: 220px; border-radius: 30px; background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; } .duo-card__body { display: flex; flex-direction: column; gap: 12px; } .duo-card__body p { margin: 0; font-size: .9375rem; line-height: 1.6; } .duo-card--accent { background: linear-gradient(160deg, var(--al), var(--a)); color: var(--ink); } .duo-card--accent .chip { background: rgba(255, 255, 255, .5); } .duo-card--glass { background: rgba(255, 255, 255, .07); border: 1px solid var(--line-dark); } .duo-card--glass p { color: var(--on-dark); } .duo-card--glass .chip { background: color-mix(in srgb, var(--al) 18%, transparent); color: var(--al); } .feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .feature-grid--4 .feature { padding: 26px; border-radius: 30px; flex-direction: row; align-items: center; gap: 14px; } .feature-grid--4 .feature__icon { width: 48px; height: 48px; border-radius: 16px; } .feature-grid--4 .feature__title { font-size: 1.25rem; } .price-card__title { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: 2rem; line-height: 1.05; letter-spacing: -.02em; } .price-card__text { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); } .price-card--accent .price-card__text { color: var(--ink); font-weight: 600; } .price-card .btn { margin-top: auto; align-self: flex-start; } @media (max-width: 1180px) { .feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .duo-grid { grid-template-columns: 1fr; } .duo-card { flex-direction: column; align-items: stretch; padding: 22px; border-radius: 30px; } .duo-card__img { flex-basis: auto; height: 190px; } .feature-grid--4 { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; } .feature-grid--4 .feature { flex: auto; flex-direction: column; align-items: flex-start; padding: 18px; } } .cta-bar--light { background: var(--btn-hi); } .cta-bar--light .cta-bar__text { color: var(--btn-hi-fg); } /* ═══════════════════════════════════════════════════════════ 17. Waldviertel: Stats, Finder (Leaflet), Preistreppe, Hütte, Bento, Tipps ═══════════════════════════════════════════════════════════ */ .page-hero__stats { position: absolute; right: clamp(40px, 8vw, 120px); bottom: 24%; display: flex; flex-direction: column; gap: 16px; align-items: flex-end; } .page-hero__stats > span { padding: 18px 22px; border-radius: var(--r-m); background: #fff; color: var(--ink); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45); display: flex; flex-direction: column; } .page-hero__stats > span + span { background: var(--al); margin-right: 60px; } .page-hero__stats strong { font-family: var(--font-h); font-size: 2.75rem; line-height: 1; color: var(--ad); } .page-hero__stats > span + span strong { color: var(--ink); } .page-hero__stats small { font-size: .8125rem; font-weight: 700; } .finder__tabs { display: flex; gap: 6px; padding: 6px; border-radius: var(--pill); background: var(--as); } .finder__tab { padding: 14px 22px; border-radius: var(--pill); border: 0; background: transparent; color: var(--ad); font-weight: 800; font-size: .9375rem; cursor: pointer; transition: background .25s, color .25s; } .finder__tab.is-active { background: var(--ad); color: #fff; } .finder__body { display: flex; gap: 28px; align-items: stretch; } .finder__lists { flex: 0 0 min(460px, 38%); } .finder__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .finder__row { width: 100%; padding: 16px 18px; border-radius: 26px; border: 1px solid color-mix(in srgb, var(--a) 20%, transparent); background: rgba(255, 255, 255, .6); cursor: pointer; text-align: left; display: flex; align-items: center; gap: 16px; transition: background .25s, box-shadow .25s, border-color .25s; } .finder__row:hover { background: #fff; } .finder__row.is-active { background: #fff; border-color: transparent; box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--ad) 55%, transparent), inset 0 0 0 2px var(--a); } .finder__num { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; font-weight: 800; } .finder__row.is-active .finder__num { background: var(--ad); color: #fff; } .finder__info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .finder__info strong { font-family: var(--font-h); font-size: 1.1875rem; line-height: 1.15; } .finder__info small { font-size: .8125rem; color: var(--muted); } .finder__status { padding: 6px 12px; border-radius: var(--pill); background: rgba(30, 20, 24, .06); color: var(--muted); font-size: .75rem; font-weight: 800; white-space: nowrap; } .finder__status.is-open { background: #E6F5EC; color: #1E6B3E; } .finder__map-wrap { flex: 1; position: relative; min-height: 620px; border-radius: 48px; overflow: hidden; background: var(--as); isolation: isolate; } .finder__map { position: absolute; inset: 0; z-index: 0; } .finder__detail .btn { position: relative; z-index: 1; cursor: pointer; } .finder__detail { position: absolute; z-index: 1100; left: 24px; right: 24px; bottom: 24px; transform: translateZ(0); pointer-events: auto; /* eigene Ebene – bleibt in Safari sicher über den Leaflet-Ebenen klickbar */ padding: 20px 22px; border-radius: 30px; background: #fff; box-shadow: 0 24px 50px -24px rgba(30, 20, 24, .45); display: flex; align-items: center; gap: 18px; } .finder__detail-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 18px; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; } .finder__detail-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .finder__detail-text small { font-size: .8125rem; font-weight: 700; color: var(--a); } .finder__detail-text strong { font-family: var(--font-h); font-size: 1.375rem; line-height: 1.15; } .finder__detail-text span { font-size: .875rem; color: var(--muted); } /* Leaflet-Pins */ .wb-pin-wrap { background: none; border: 0; } .wb-pin { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--a); border: 3px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .4); transition: transform .25s var(--ease), background .25s; } .wb-pin b { font: 800 .875rem/1 var(--font-b); } .wb-pin.is-active { background: var(--ad); transform: scale(1.2); z-index: 2; } .wb-pin.is-active::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--a); animation: pin-ring 1.8s ease-out infinite; } .wb-pin.is-open { background: var(--status); } @keyframes pin-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } } .leaflet-container { font-family: var(--font-b); } .leaflet-control-zoom a { border-radius: 12px !important; } .leaflet-top.leaflet-left { top: 16px; left: 16px; } /* Kartenstil: Kacheln per Filter einfärben (kein API-Key nötig), Pins bleiben farbig */ .finder--warm .leaflet-tile-pane { filter: grayscale(1) sepia(.28) saturate(.9) brightness(1.06) contrast(.88); } .finder--sage .leaflet-tile-pane { filter: grayscale(1) sepia(.45) hue-rotate(45deg) saturate(.7) brightness(1.05) contrast(.88); } .finder--mono .leaflet-tile-pane { filter: grayscale(1) brightness(1.08) contrast(.85); } .finder .leaflet-container { background: var(--as); } .finder .leaflet-bar { border: 0 !important; border-radius: 16px !important; overflow: hidden; box-shadow: 0 12px 30px -14px rgba(30, 20, 24, .45) !important; } .finder .leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; border-radius: 0 !important; border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; font: 700 1.125rem/40px var(--font-b) !important; } .finder .leaflet-bar a:last-child { border-bottom: 0 !important; } .finder .leaflet-bar a:hover { background: var(--as) !important; color: var(--ad) !important; } .finder .leaflet-control-attribution { margin: 0 20px 6px 0 !important; padding: 2px 8px !important; border-radius: var(--pill); background: rgba(255, 255, 255, .7) !important; font-size: .625rem !important; color: var(--muted); } .finder .leaflet-bottom.leaflet-right { top: 16px; bottom: auto; } /* Preistreppe */ .stairs { display: flex; gap: 60px; align-items: center; } .stairs__intro { flex: 0 0 min(440px, 38%); display: flex; flex-direction: column; gap: 18px; } .stairs__main { min-width: 0; } .stairs__main { flex: 1; display: flex; flex-direction: column; gap: 16px; } .stairs__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; } .step { position: relative; padding: 30px 28px; border-radius: 36px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 8px; } .step small { font-size: .875rem; font-weight: 700; color: var(--on-dark); } .step strong { font-family: var(--font-h); font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1; } .step span { font-size: .8125rem; color: var(--muted-2); } .step--mid { padding-block: 38px; background: color-mix(in srgb, var(--al) 16%, transparent); border-color: color-mix(in srgb, var(--al) 35%, transparent); } .step--top { padding-block: 48px; background: linear-gradient(160deg, var(--al), var(--a)); border: 0; color: var(--ink); } .step--top small, .step--top span { color: var(--ink); } .step--top em { position: absolute; top: -14px; right: 20px; padding: 7px 14px; border-radius: var(--pill); background: #fff; font-style: normal; font-size: .75rem; font-weight: 800; } .stairs__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .stairs__notes li { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--pill); background: rgba(255, 255, 255, .08); font-size: .875rem; font-weight: 700; } .stairs__notes .icon { color: var(--al); } /* Erdbeerhütten */ .hut-story { display: flex; gap: 80px; align-items: center; } .hut-story__visual { flex: 0 0 min(600px, 46%); aspect-ratio: 1; position: relative; } .hut-story__bg { position: absolute; inset: 7%; background: linear-gradient(160deg, var(--as), color-mix(in srgb, var(--al) 55%, #fff)); } .hut-story__hut { position: absolute; left: 18%; top: 11%; width: 64%; animation: bob 2.4s ease-in-out infinite; } .hut-story__tag { position: absolute; right: 0; top: 15%; padding: 14px 20px; border-radius: var(--pill); background: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .3); font-weight: 800; font-size: .9375rem; } .hut-story__photo { position: absolute; left: 0; bottom: 11%; width: 28%; aspect-ratio: 17 / 15; border-radius: 30px; border: 6px solid #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .35); background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; } .hut-story__text { flex: 1; display: flex; flex-direction: column; gap: 20px; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Produkte – Bento */ .bento { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 182px; gap: 16px; } .bento__item { border-radius: 32px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; transition: transform .35s var(--ease); } .bento__item:hover { transform: translateY(-6px); } .bento__item strong { font-family: var(--font-h); font-size: 1.5rem; line-height: 1.05; } .bento__item--hero { grid-column: span 2; grid-row: span 2; border-radius: 40px; padding: 32px; color: #fff; position: relative; overflow: hidden; background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; } .bento__item--hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 20, 24, .7), transparent 60%); } .bento__item--hero > * { position: relative; } .bento__item--hero strong { font-size: 2.25rem; } .bento__item--hero span { font-size: .9375rem; opacity: .9; } .bento__item--soft { background: var(--as); } .bento__item--line { background: #fff; box-shadow: inset 0 0 0 2px var(--as); } .bento__item--dark { background: var(--ink); color: #fff; } .bento__item--light { background: var(--al); } /* Tipps */ .tips { background: linear-gradient(135deg, var(--as) 0%, color-mix(in srgb, var(--al) 35%, #fff) 50%, var(--as) 100%); } .tips__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .tip { padding: 36px; border-radius: 40px; background: #fff; display: flex; flex-direction: column; gap: 14px; transition: transform .35s var(--ease); } .tip:hover { transform: translateY(-6px); } .tip p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); } .tip__num { font-family: var(--font-h); font-weight: 800; font-size: 4rem; line-height: 1; color: color-mix(in srgb, var(--al) 60%, #fff); } .tip--dark { background: var(--ad); color: #fff; } .tip--dark p { color: rgba(255, 255, 255, .85); } .tip--dark .tip__num { color: var(--a); } @media (max-width: 1180px) { .finder__body, .stairs, .hut-story { flex-direction: column; align-items: stretch; } .finder__lists, .stairs__intro, .hut-story__visual { flex-basis: auto; } .hut-story__visual { width: min(560px, 100%); } .finder__map-wrap { min-height: 480px; order: -1; } .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-hero__stats { display: none; } } @media (max-width: 860px) { .finder__tabs { width: 100%; } .finder__tab { flex: 1; padding: 12px 10px; font-size: .8125rem; } .finder__map-wrap { min-height: 420px; border-radius: 32px; } .finder__detail { left: 12px; right: 12px; bottom: 12px; flex-wrap: wrap; padding: 16px; border-radius: 24px; } .finder__detail-icon { display: none; } .finder__detail .btn { width: 100%; } .finder__row { padding: 12px 14px; border-radius: 20px; } .finder__status { display: none; } .stairs__steps { grid-template-columns: 1fr; align-items: stretch; } .step, .step--mid, .step--top { padding: 22px 24px; flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; } .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; } .bento__item--hero { grid-column: span 2; } .tips__grid { grid-template-columns: 1fr; } .tip { padding: 26px; border-radius: 30px; } } /* ═══════════════════════════════════════════════════════════ 18. Geschichte: heller Hero, Zeitreise, Philosophie, Weiter-Karten ═══════════════════════════════════════════════════════════ */ .story-hero { position: relative; overflow: hidden; padding: calc(24px + var(--header-h) + 60px) 0 clamp(60px, 8vw, 110px); background: linear-gradient(140deg, var(--as) 0%, color-mix(in srgb, var(--al) 30%, #fff) 45%, var(--cream) 75%, var(--as) 100%); } .story-hero__blob { position: absolute; left: -180px; bottom: -160px; width: 460px; height: 460px; background: radial-gradient(circle at 30% 30%, var(--al), var(--a) 70%); opacity: .25; pointer-events: none; } .story-hero__inner { position: relative; display: flex; gap: 60px; align-items: center; } .story-hero__text { flex: 1; display: flex; flex-direction: column; gap: 24px; } .story-hero__text .h1 em { display: block; background: linear-gradient(90deg, var(--ad), var(--a) 60%, var(--al)); -webkit-background-clip: text; background-clip: text; color: transparent; } .story-hero__quote { margin: 18px 0 0; padding: 30px 30px 24px; border-radius: 30px; background: rgba(255, 255, 255, .8); position: relative; max-width: 620px; } .story-hero__quote::before { content: ''; position: absolute; left: 26px; top: -22px; width: 44px; height: 44px; border-radius: 14px; background: var(--a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10 7H6a2 2 0 00-2 2v4h4v4H6v1h2a2 2 0 002-2zm10 0h-4a2 2 0 00-2 2v4h4v4h-2v1h2a2 2 0 002-2z'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--ad) 70%, transparent); } .story-hero__quote blockquote { margin: 0; } .story-hero__quote p { margin: 0; font-family: var(--font-h); font-weight: 600; font-size: 1.25rem; line-height: 1.45; } .story-hero__quote figcaption { margin-top: 12px; font-size: .875rem; font-weight: 700; color: var(--ad); } .story-hero__quote figcaption::before { content: '— '; } .story-hero__visual { flex: 0 0 min(560px, 44%); position: relative; aspect-ratio: 56 / 64; } .story-hero__main { position: absolute; right: 0; top: 0; width: 90%; height: 100%; box-shadow: 0 50px 100px -40px color-mix(in srgb, var(--ad) 60%, transparent); background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; } .story-hero__small { position: absolute; left: -6%; bottom: 8%; width: 44%; aspect-ratio: 25 / 22; border-radius: 36px; border: 8px solid #fff; box-shadow: var(--shadow-pop); background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; } .story-hero__year { position: absolute; right: -4%; bottom: 4%; width: 170px; height: 170px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45); } .story-hero__year small { font-size: .8125rem; font-weight: 700; color: var(--al); } .story-hero__year strong { font-family: var(--font-h); font-size: 3.25rem; line-height: 1; } .story-hero__ring { position: absolute; left: -12%; top: -4%; width: 150px; animation: spin 26s linear infinite; } .story-hero__ring text { font-family: var(--font-h); font-size: 19px; font-weight: 800; letter-spacing: 4px; fill: var(--ad); } /* Zeitreise */ .timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 36px; } .timeline__line { position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 4px; background: var(--as); overflow: hidden; } .timeline__line i { display: block; height: 100%; width: 2%; border-radius: 4px; background: var(--ad); transition: width .6s var(--ease); } .timeline__step { position: relative; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 10px; color: var(--ink); } .timeline__dot { width: 18px; height: 18px; margin-top: 11px; border-radius: 50%; background: color-mix(in srgb, var(--al) 60%, #fff); border: 4px solid #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); transition: all .3s var(--ease); } .timeline__step.is-done .timeline__dot, .timeline__step.is-active .timeline__dot { background: var(--ad); } .timeline__step.is-active .timeline__dot { width: 26px; height: 26px; margin-top: 7px; } .timeline__step strong { font-family: var(--font-h); font-size: 2.125rem; line-height: 1; letter-spacing: -.03em; color: var(--muted-2); transition: color .3s, font-size .3s; } .timeline__step.is-active strong { color: var(--ink); font-size: 2.75rem; } .timeline__step > span:last-child { font-size: .9375rem; font-weight: 700; color: var(--ink-2); } .chapter { display: flex; min-height: 520px; border-radius: 48px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--ad) 50%, transparent); animation: fade-in .45s ease; } .chapter__img { flex: 0 0 min(440px, 38%); position: relative; background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; } .chapter__year { position: absolute; left: 28px; bottom: 20px; font-family: var(--font-h); font-weight: 800; font-size: clamp(5rem, 8vw, 7.5rem); line-height: .8; letter-spacing: -.05em; color: rgba(255, 255, 255, .35); } .chapter__body { flex: 1; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 16px; } .chapter__quote { margin: 0; padding: 20px 24px; border-radius: 24px; background: var(--as); border-left: 4px solid var(--a); } .chapter__quote p { margin: 0; font-family: var(--font-h); font-weight: 600; font-size: 1.1875rem; line-height: 1.45; } .chapter__text { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); } .chapter__facts { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 12px; } .chapter__facts div { padding: 18px 22px; border-radius: 24px; background: var(--as); min-width: 150px; display: flex; flex-direction: column; } .chapter__facts strong { font-family: var(--font-h); font-size: 2.125rem; line-height: 1; color: var(--ad); } .chapter__facts span { font-size: .8125rem; font-weight: 600; color: var(--ink-2); } /* Philosophie */ .philo { display: flex; gap: 70px; align-items: center; } .philo__text { flex: 1; display: flex; flex-direction: column; gap: 22px; } .philo__title { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: var(--fs-hero); line-height: .9; letter-spacing: -.05em; } .philo__title em { font-style: italic; color: var(--al); } .philo__side { flex: 0 0 min(420px, 36%); display: flex; flex-direction: column; gap: 14px; } .philo__label { color: #fff; font-size: .9375rem; } .philo__chip { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; } .philo__side p { margin: 8px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--on-dark); } /* Weiter entdecken */ .next-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .next-link { min-height: 360px; } @media (max-width: 1180px) { .story-hero__inner, .philo { flex-direction: column; align-items: stretch; } .story-hero__visual { flex-basis: auto; width: min(520px, 100%); margin-inline: auto; } .philo__side { flex-basis: auto; } .chapter { flex-direction: column; } .chapter__img { flex-basis: 260px; } } @media (max-width: 860px) { .story-hero { padding-top: 110px; } .story-hero__quote p { font-size: 1.0625rem; } .story-hero__year { width: 120px; height: 120px; } .story-hero__year strong { font-size: 2.25rem; } .story-hero__ring { display: none; } .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .timeline__step strong, .timeline__step.is-active strong { font-size: 1.25rem; } .timeline__step > span:last-child { display: none; } .chapter { border-radius: 32px; min-height: 0; } .chapter__img { flex-basis: 200px; } .chapter__facts div { min-width: 0; flex: 1 1 40%; padding: 14px 16px; } .chapter__facts strong { font-size: 1.625rem; } .next-links { grid-template-columns: 1fr; } .next-link { min-height: 300px; } } /* ═══════════════════════════════════════════════════════════ 19. Frühstück & Jobs ═══════════════════════════════════════════════════════════ */ /* Hinweis-Sticker im hellen Hero */ .hero-note { position: absolute; right: -2%; top: 10%; padding: 16px 22px 16px 16px; border-radius: var(--r-m); background: #fff; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .3); display: flex; align-items: center; gap: 14px; } .hero-note strong { display: block; font-family: var(--font-h); font-size: 1.375rem; line-height: 1.1; } .hero-note small { font-size: .8125rem; font-weight: 600; color: var(--muted); } .hero-note__icon { position: relative; width: 50px; height: 50px; border-radius: 16px; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; } .hero-note__icon i { position: absolute; top: -8px; width: 4px; height: 12px; border-radius: 4px; background: var(--a); animation: steam 2.6s ease-out infinite; } .hero-note__icon i:nth-of-type(1) { left: 17px; } .hero-note__icon i:nth-of-type(2) { left: 26px; animation-delay: -1.2s; } @keyframes steam { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-30px); opacity: 0; } } /* Schritte */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; } .step-card { padding: 36px; border-radius: 40px; background: #fff; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 14px; } .step-card p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); } .step-card__num { width: 76px; height: 76px; border-radius: 26px; background: var(--btn-bg); color: var(--btn-fg); display: flex; align-items: center; justify-content: center; font-family: var(--font-h); font-weight: 800; font-size: 2.125rem; } .step-card--dark { background: var(--ink); color: #fff; } .step-card--dark p { color: var(--on-dark); } .step-card--dark .step-card__num { background: var(--a); color: var(--ink); } /* Boxen */ .box-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .box-card { position: relative; overflow: hidden; border-radius: 38px; background: #fff; padding: 14px; box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 16px; transition: transform .35s var(--ease), box-shadow .35s; } .box-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-pop); color: var(--ink); } .box-card__img { position: relative; height: 250px; border-radius: 28px; background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; } .box-card__badge { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: .75rem; font-weight: 800; } .box-card__body { padding: 0 10px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .box-card__title { font-family: var(--font-h); font-weight: 800; font-size: 1.5rem; line-height: 1.1; } .box-card__text { font-size: .875rem; line-height: 1.55; color: var(--muted); } .box-card__body .btn { margin-top: auto; align-self: flex-start; } .box-card--gift { background: var(--ink); color: #fff; } .box-card--gift:hover { color: #fff; } .box-card--gift .box-card__text { color: var(--on-dark); } .box-card__img--icon { background: rgba(255, 255, 255, .08); color: var(--al); } .box-card--gift .box-card__badge { background: var(--btn-bg); color: var(--btn-fg); } .box-card__blob { position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; background: color-mix(in srgb, var(--a) 35%, transparent); } .box-card--gift > * { position: relative; } /* Hinweis-Pille (Feiern) */ .notice-pill { padding: 22px 26px 22px 22px; border-radius: var(--pill); background: #fff; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 20px; color: var(--ink); text-decoration: none; transition: transform .3s var(--ease); } .notice-pill:hover { transform: translateY(-4px); color: var(--ink); } .notice-pill__icon { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; } .notice-pill__text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .notice-pill__text small { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ad); } .notice-pill__text strong { font-family: var(--font-h); font-size: 1.5rem; line-height: 1.15; } .notice-pill__text span { font-size: .9375rem; color: var(--muted); } /* Kaffee & Kuchen */ .treats { display: flex; gap: 60px; align-items: center; } .treats__text { flex: 0 0 min(480px, 40%); display: flex; flex-direction: column; gap: 20px; } .check-list--dark { color: #fff; font-size: .9375rem; } .check-list--dark .icon { color: var(--al); } .treats__grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .treat { padding: 30px; border-radius: 36px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-dark); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 190px; color: var(--al); } .treat:nth-child(even) { margin-top: 36px; } .treat .h3 { color: #fff; font-size: 1.625rem; } .treat p { margin: 0; font-size: .875rem; color: var(--on-dark); } .treat--light { background: linear-gradient(160deg, color-mix(in srgb, var(--al) 55%, #fff), var(--a)); border: 0; color: var(--ink); } .treat--light .h3, .treat--light p { color: var(--ink); } /* Geschenk */ .gift { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(32px, 6vw, 80px); background: linear-gradient(130deg, var(--as) 0%, var(--al) 45%, color-mix(in srgb, var(--al) 55%, #fff) 75%, var(--as) 100%); display: flex; align-items: center; gap: 60px; } .gift__blob { position: absolute; right: -80px; bottom: -120px; width: 360px; height: 360px; background: rgba(255, 255, 255, .45); pointer-events: none; } .gift > * { position: relative; } .gift__text { flex: 1; display: flex; flex-direction: column; gap: 20px; } .gift__text .h2 em { color: var(--ink); } .gift__text .lead { color: #3A2A1E; } .gift__chip { background: rgba(255, 255, 255, .6); color: var(--ink); } .gift__side { flex: 0 0 340px; display: flex; flex-direction: column; align-items: center; gap: 22px; } .voucher { width: 300px; height: 190px; border-radius: 28px; background: var(--ink); color: #fff; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45); transform: rotate(-6deg); } .voucher__top { display: flex; justify-content: space-between; align-items: center; } .voucher__brand { font-family: var(--font-h); font-weight: 800; font-size: 1.125rem; } .voucher__tag { padding: 5px 10px; border-radius: var(--pill); background: var(--btn-bg); color: var(--btn-fg); font-size: .6875rem; font-weight: 800; } .voucher__title { font-family: var(--font-h); font-weight: 800; font-size: 1.625rem; line-height: 1.05; } /* Jobs */ .jobs-hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 900px; } .jobs-hero .h1 em { color: var(--a); } .job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; } .job-card { padding: 30px; border-radius: 36px; background: #fff; box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 14px; transition: transform .35s var(--ease), box-shadow .35s; } a.job-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-pop); color: var(--ink); } .job-card__top { display: flex; justify-content: space-between; align-items: center; } .job-card__icon { width: 56px; height: 56px; border-radius: 18px; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; } .job-card__badge { padding: 7px 14px; border-radius: var(--pill); background: var(--as); color: var(--ad); font-size: .75rem; font-weight: 800; } .job-card__badge.is-open { background: #E6F5EC; color: #1E6B3E; } .job-card__badge.is-urgent { background: var(--ad); color: #fff; } .job-card__title { font-family: var(--font-h); font-weight: 800; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.02em; } .job-card__desc { font-size: .9375rem; line-height: 1.6; color: var(--ink-2); } .job-card__meta { display: flex; flex-wrap: wrap; gap: 8px; } .job-card__meta > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--pill); background: var(--cream); font-size: .8125rem; font-weight: 700; color: var(--ink-2); } .job-card__meta .icon { color: var(--a); } .job-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .job-card__salary { font-weight: 800; } .job-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .875rem; color: var(--ad); } .job-empty { padding: clamp(32px, 5vw, 56px); border-radius: 40px; background: #fff; box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } @media (max-width: 1180px) { .box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .treats, .gift { flex-direction: column; align-items: stretch; } .treats__text, .gift__side { flex-basis: auto; } .hero-note { right: 0; } } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .step-card { padding: 24px; border-radius: 30px; flex-direction: row; flex-wrap: wrap; align-items: center; } .step-card__num { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 18px; } .step-card p { flex-basis: 100%; } .box-grid { grid-template-columns: 1fr; } .box-card__img { height: 200px; } .notice-pill { flex-direction: column; align-items: flex-start; border-radius: 32px; } .treats__grid { grid-template-columns: 1fr 1fr; } .treat { min-height: 150px; padding: 20px; border-radius: 26px; } .treat:nth-child(even) { margin-top: 0; } .treat .h3 { font-size: 1.25rem; } .gift__side { align-items: flex-start; } .voucher { width: 100%; max-width: 300px; } .hero-note { top: auto; bottom: -10px; } .job-grid { grid-template-columns: 1fr; } .job-card { padding: 22px; border-radius: 28px; } } /* ═══════════════════════════════════════════════════════════ 20. Erdbeerhaus: Foto-Quartett, Sortiment, Erdbeerhof ═══════════════════════════════════════════════════════════ */ .photo-quad { flex: 1; position: relative; display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 250px 220px; gap: 16px; } .photo-quad__item { background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; box-shadow: var(--shadow-card); } .photo-quad__item--1 { grid-row: span 2; border-radius: 999px 999px 40px 40px; } .photo-quad__item--2 { border-radius: 40px; } .photo-quad__item--3 { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; } .photo-quad__item--4 { grid-column: 2 / span 2; border-radius: 40px; } .sortiment { background: linear-gradient(135deg, var(--as) 0%, color-mix(in srgb, var(--al) 30%, #fff) 50%, var(--as) 100%); } .carousel--inset { border-radius: 34px; scroll-padding-inline: 0; } .carousel--inset .carousel__track { padding-inline: 0; } .carousel__track { list-style: none; margin: 0; } .product-tile { flex: 0 0 230px; width: 230px; height: 270px; scroll-snap-align: start; border-radius: 34px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; transition: transform .35s var(--ease); } .product-tile:hover { transform: translateY(-6px); } .product-tile strong { font-family: var(--font-h); font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; } .product-tile__num { font-size: .8125rem; font-weight: 800; color: var(--muted-2); } .product-tile--hero { background: linear-gradient(160deg, var(--al), var(--a) 60%, var(--ad)); color: #fff; } .product-tile--hero .product-tile__num { color: rgba(255, 255, 255, .7); } .product-tile--soft { background: #fff; } .product-tile--line { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--a) 35%, transparent); } .product-tile--dark { background: var(--ink); color: #fff; } .product-tile--light { background: var(--al); } .product-tile--green { background: linear-gradient(160deg, var(--c-green-l), var(--c-green)); color: var(--ink); } .hof { display: flex; gap: 70px; align-items: center; } .hof__photos { flex: 0 0 min(520px, 42%); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 250px 250px; gap: 16px; } .hof__photo { border-radius: 36px; background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; box-shadow: var(--shadow-card); } .hof__photo--tall { grid-row: span 2; } .hof__photo--round { border-radius: 999px; } .hof__text { flex: 1; display: flex; flex-direction: column; gap: 20px; } .hof__highlight { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); color: var(--ink-2); text-decoration: none; font-size: .9375rem; line-height: 1.55; transition: transform .3s var(--ease); } .hof__highlight:hover { transform: translateX(4px); color: var(--ink-2); } .hof__highlight strong { color: var(--ink); } .hof__highlight-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 18px; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; } .hof__highlight > .icon:last-child { flex-shrink: 0; color: var(--ad); } .season-strip { display: flex; flex-wrap: wrap; gap: 8px; } .season-strip__item { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--pill); background: color-mix(in srgb, var(--chip-color) 30%, #fff); font-size: .875rem; font-weight: 800; } @media (max-width: 1180px) { .hof { flex-direction: column; align-items: stretch; } .hof__photos { flex-basis: auto; } .photo-quad { width: 100%; } } @media (max-width: 860px) { .photo-quad { grid-template-rows: 200px 170px; gap: 12px; } .product-tile { flex-basis: 180px; width: 180px; height: 210px; border-radius: 26px; padding: 18px; } .product-tile strong { font-size: 1.25rem; } .hof__photos { grid-template-rows: 180px 180px; gap: 12px; } .hof__highlight { align-items: flex-start; } .hof__highlight > .icon:last-child { display: none; } } /* ═══════════════════════════════════════════════════════════ 21. Saisonerlebnisse: Saison-Slider, Ticket-Band, Familie, Entdecke ═══════════════════════════════════════════════════════════ */ .season-hero { position: relative; overflow: hidden; padding: calc(24px + var(--header-h) + 60px) 0 clamp(40px, 5vw, 60px); background: linear-gradient(150deg, var(--as) 0%, color-mix(in srgb, var(--al) 28%, #fff) 45%, var(--cream) 80%); } .season-hero__blob { position: absolute; right: -160px; top: -120px; width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, var(--al), var(--a) 70%); opacity: .18; pointer-events: none; } .season-hero .wrap { position: relative; } .season-hero__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 40px; } .season-hero__title { display: flex; flex-direction: column; gap: 22px; } .season-hero__title .h1 em { display: block; color: var(--a); } .season-hero__head .lead { max-width: 440px; margin: 0; } .season-stage { position: relative; height: 540px; } .season-slide { position: absolute; top: 0; left: 0; width: 60%; height: 540px; border-radius: 48px; overflow: hidden; padding: 32px; color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; background-color: var(--card-color, var(--ad)); background-image: var(--card-grad); background-size: cover; background-position: center; box-shadow: 0 40px 80px -40px rgba(30, 20, 24, .55); transition: left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease), opacity .5s, transform .7s var(--ease), border-radius .7s; } .season-slide:hover { color: #fff; } .season-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 20, 24, .75) 0%, rgba(30, 20, 24, .1) 55%, transparent); } .season-slide > * { position: relative; } .season-slide__badge { position: absolute; top: 24px; left: 24px; padding: 8px 14px; border-radius: var(--pill); background: #fff; color: var(--card-color, var(--ad)); font-size: .8125rem; font-weight: 800; } .season-slide__live { position: absolute; top: 24px; right: 24px; transition: opacity .35s .45s, transform .45s .45s var(--ease), visibility 0s .45s; } .season-slide__body { display: flex; flex-direction: column; gap: 12px; } .season-slide__title { font-family: var(--font-h); font-weight: 800; font-size: var(--fs-h2); line-height: .95; letter-spacing: -.04em; transition: font-size .7s var(--ease); } .season-slide__text { font-size: 1rem; line-height: 1.55; max-width: 480px; opacity: .9; transition: opacity .4s; } .season-slide__body .btn { align-self: flex-start; color: var(--ink); } /* Positionen (Desktop) */ @media (min-width: 861px) { .season-slide[data-pos="1"] { left: 63%; top: 50px; width: 25%; height: 440px; border-radius: 40px; } .season-slide[data-pos="2"] { left: 91%; top: 90px; width: 20%; height: 360px; border-radius: 36px; opacity: .85; } .season-slide[data-pos="3"] { left: -30%; top: 50px; width: 25%; height: 440px; opacity: 0; pointer-events: none; } .season-slide:not([data-pos="0"]) .season-slide__title { font-size: 1.625rem; } .season-slide:not([data-pos="0"]) .season-slide__text, .season-slide:not([data-pos="0"]) .btn { display: none; } /* „Jetzt geöffnet“ erst, wenn die Karte vorne und groß ist */ .season-slide:not([data-pos="0"]) .season-slide__live { opacity: 0; transform: translateY(-6px) scale(.92); visibility: hidden; transition: opacity .15s, transform .15s, visibility 0s .15s; } } .season-controls { margin-top: 30px; display: flex; align-items: center; gap: 30px; } .season-controls__nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .season-controls__nav .carousel__count { margin: 0 0 0 10px; } .season-year { flex: 1; padding: 18px 28px 20px; border-radius: 26px; background: rgba(255, 255, 255, .75); } .season-year__track .season-year__seg { position: absolute; top: 4px; height: 14px; border: 0; padding: 0; border-radius: 8px; background: var(--seg); cursor: pointer; opacity: .45; transition: opacity .3s, transform .3s; } .season-year__track .season-year__seg.is-lane1 { top: 24px; } .season-year__track .season-year__seg:hover { opacity: .8; } .season-year__track .season-year__seg.is-active { opacity: 1; transform: scaleY(1.3); } /* Ticket-Band */ .ticket-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(32px, 5vw, 64px); padding-right: clamp(32px, 20vw, 320px); background: linear-gradient(125deg, var(--a), var(--ad)); color: #fff; } .ticket-band__blob { position: absolute; right: -80px; top: -100px; width: 380px; height: 380px; background: rgba(255, 255, 255, .12); pointer-events: none; } .ticket-band__badge { position: absolute; right: clamp(40px, 7vw, 110px); top: 50%; margin-top: -90px; width: 180px; height: 180px; border-radius: 50%; background: #fff; color: var(--ad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45); transform: rotate(-8deg); } .ticket-band__badge strong { font-family: var(--font-h); font-size: 1.25rem; line-height: 1.05; color: var(--ink); } .ticket-band__text { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 640px; } .ticket-band__text .h2 { color: #fff; } .ticket-band__text p { margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: rgba(255, 255, 255, .9); } /* Familie */ .family { display: flex; gap: 70px; align-items: center; } .family__visual { flex: 0 0 min(560px, 44%); position: relative; min-height: 600px; } .family__photo { position: absolute; left: 0; top: 0; width: 76%; height: 480px; background-color: var(--ad); background-image: var(--card-grad); background-size: cover; background-position: center; box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--ad) 60%, transparent); } .person { position: absolute; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: var(--pill); background: #fff; box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .3); } .person__avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; } .person strong { display: block; font-size: .9375rem; line-height: 1.2; } .person small { font-size: .75rem; font-weight: 600; color: var(--muted); } .family__facts { position: absolute; left: 0; bottom: 0; display: flex; gap: 12px; } .family__fact { padding: 18px 22px; border-radius: 26px; background: var(--as); display: flex; flex-direction: column; min-width: 150px; } .family__fact strong { font-family: var(--font-h); font-size: 2.5rem; line-height: 1; color: var(--ad); } .family__fact span { font-size: .8125rem; font-weight: 600; color: var(--ink-2); } .family__fact--dark { background: var(--ink); } .family__fact--dark strong { color: var(--al); } .family__fact--dark span { color: var(--on-dark); } .family__text { flex: 1; display: flex; flex-direction: column; gap: 20px; } /* Entdecke-Karten */ .discover-card { flex: 0 0 320px; width: 320px; scroll-snap-align: start; border-radius: 36px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); color: var(--ink); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; } .discover-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-pop); color: var(--ink); } .discover-card__img { position: relative; height: 230px; margin: 12px 12px 0; border-radius: 26px; background-color: var(--card-color, var(--ad)); background-image: var(--card-grad); background-size: cover; background-position: center; } .discover-card__badge { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: var(--pill); background: #fff; color: var(--card-color, var(--ad)); font-size: .75rem; font-weight: 800; } .discover-card__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .discover-card__title { font-family: var(--font-h); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; } .discover-card__text { font-size: .9375rem; line-height: 1.55; color: var(--muted); } .discover-card__link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .875rem; color: var(--card-color, var(--ad)); } @media (max-width: 1180px) { .season-hero__head { flex-direction: column; align-items: flex-start; gap: 20px; } .family { flex-direction: column; align-items: stretch; } .family__visual { flex-basis: auto; width: min(560px, 100%); } .ticket-band { padding-right: clamp(32px, 5vw, 64px); } .ticket-band__badge { display: none; } } @media (max-width: 860px) { .season-hero { padding-top: 110px; } .season-stage { height: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: -10px calc(var(--gutter) * -1) 0; padding: 10px var(--gutter) 36px; scroll-padding-inline: var(--gutter); } .season-stage::-webkit-scrollbar { display: none; } .season-slide { position: relative; flex: 0 0 84%; width: auto; height: 460px; padding: 22px; border-radius: 34px; scroll-snap-align: start; box-shadow: 0 22px 36px -26px rgba(30, 20, 24, .5); } .season-slide__badge { top: 16px; left: 16px; } .season-slide__live { top: 16px; right: 16px; } .season-controls { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 0; } .season-controls__nav { display: none; } .season-year { padding: 14px 16px; } .family__visual { min-height: 520px; } .family__photo { width: 100%; height: 380px; } .person { transform: scale(.9); transform-origin: right center; } .family__fact { min-width: 0; padding: 14px 16px; } .family__fact strong { font-size: 1.875rem; } .discover-card { flex-basis: 270px; width: 270px; border-radius: 30px; } .discover-card__img { height: 190px; } } /* 404 */ .nf { position: relative; overflow: hidden; padding: calc(24px + var(--header-h) + 70px) 0 clamp(60px, 8vw, 110px); background: linear-gradient(150deg, var(--as) 0%, color-mix(in srgb, var(--al) 28%, #fff) 50%, var(--cream) 85%); } .nf__blob { position: absolute; left: -160px; bottom: -180px; width: 480px; height: 480px; background: radial-gradient(circle at 30% 30%, var(--al), var(--a) 70%); opacity: .18; pointer-events: none; } .nf__inner { position: relative; display: flex; align-items: center; gap: 60px; } .nf__text { flex: 1; display: flex; flex-direction: column; gap: 22px; } .nf__text .h1 em { display: block; color: var(--a); } .nf__visual { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .nf__num { font-family: var(--font-h); font-weight: 800; font-size: clamp(8rem, 16vw, 15rem); line-height: .8; letter-spacing: -.06em; color: var(--ink); } .nf__berry { width: clamp(120px, 13vw, 200px); } .nf__links { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 56px; } .season-mini-link { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: var(--pill); background: #fff; color: var(--ink); font-weight: 800; font-size: .9375rem; text-decoration: none; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .3); transition: transform .25s var(--ease); } .season-mini-link:hover { transform: translateY(-3px); color: var(--ink); } .season-mini-link .dot { background: var(--c); } @media (max-width: 860px) { .nf { padding-top: 110px; } .nf__inner { flex-direction: column-reverse; align-items: flex-start; gap: 24px; } .nf__num { font-size: 6.5rem; } .nf__berry { width: 96px; } } a.season-slide, a.season-slide:hover { text-decoration: none; } /* ═══════════════════════════════════════════════════════════ 22. Feedback-Fixes (mobil) ═══════════════════════════════════════════════════════════ */ /* Deko-Formen immer absolut – nie Platz im Layout belegen */ [class*="__blob"], [class*="__glow"], .world__img { position: absolute !important; } /* Touch-Geräte: kein Hochspringen beim Antippen */ @media (hover: none) { .btn:hover, .btn-round:hover, .mega-card:hover, .mega-link:hover, .info-jobs:hover, .social-tile:hover, .f-social:hover, .world:hover, .berry-card:hover, .moment:hover, .feature:hover, .tour:hover .tour__btn, .media-card:hover, .duo-card:hover, .bento__item:hover, .tip:hover, .box-card:hover, .notice-pill:hover, a.job-card:hover, .product-tile:hover, .hof__highlight:hover, .discover-card:hover, .season-mini-link:hover { transform: none; } } /* Motto-Mittwoch: Platz für Schatten */ .motto__rail { padding: 24px 12px 60px; margin-bottom: -40px; } /* Nur-mobil-Elemente */ .only-mobile { display: none !important; } @media (max-width: 860px) { .only-mobile { display: flex !important; } /* Intro-Fotos: sauberes Raster statt überlappender Collage */ .photo-cluster { height: auto; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 170px 150px; gap: 12px; max-width: none; } .photo-cluster > div { position: relative; inset: auto; width: auto; height: auto; border-width: 0; animation: none; box-shadow: var(--shadow-card); } .photo-cluster__a { grid-row: span 2; border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; } .photo-cluster__b { border-radius: 28px; } .photo-cluster__c { border-radius: 999px 999px 28px 28px; } .photo-cluster__tag { display: none; } /* Stationen (Tulpen) + Kaffee-Kacheln (Frühstück): nichts abgeschnitten */ .feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .feature-grid--4 .feature { min-width: 0; padding: 16px; gap: 10px; } .feature-grid--4 .feature__title { font-size: 1.0625rem; } .treats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .treat { min-width: 0; padding: 18px; } .treat .h3 { font-size: 1.125rem; } /* Kürbishof-Erlebnisse: Swiper mit Pfeilen */ .feature-grid:not(.feature-grid--4) { padding-bottom: 4px; } .section-head .carousel__nav.only-mobile { align-self: flex-end; } /* Motto-Mittwoch mobil */ .motto__rail { padding: 16px 4px 50px; margin-bottom: -30px; } /* Startseite: Kapitel-Tabs ohne Überlappung – Label nur beim aktiven */ .stories-tabs { gap: 6px; padding-bottom: 22px; } .stories-tab { position: relative; } .stories-tab strong { display: none; position: absolute; top: 14px; left: 0; white-space: nowrap; font-size: .8125rem; } .stories-tab.is-active strong { display: block; } .stories-tab:nth-child(n+4) strong { left: auto; right: 0; } /* Startseite: Zwei-Welten-Karten mit Luft */ .world { padding: 26px 24px; min-height: 440px; } .world__title { font-size: 2rem; } .world__img { width: 200px; height: 220px; right: -60px; top: 40px; opacity: .8; } } /* ═══════════════════════════════════════════════════════════ 23. Rezepte: Filter, Karten, Rezept-Fenster ═══════════════════════════════════════════════════════════ */ .recipe-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .recipe-filter__btn { padding: 12px 18px; border: 0; border-radius: var(--pill); background: #fff; color: var(--ink); font: 800 .9375rem/1 var(--font-b); cursor: pointer; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .3); transition: background .25s, color .25s; } .recipe-filter__btn span { margin-left: 4px; padding: 3px 8px; border-radius: var(--pill); background: var(--as); color: var(--ad); font-size: .75rem; } .recipe-filter__btn.is-active { background: var(--ad); color: #fff; } .recipe-filter__btn.is-active span { background: rgba(255, 255, 255, .2); color: #fff; } .recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; } .recipe-card { border-radius: 36px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); color: var(--ink); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; animation: fade-in .35s ease; } .recipe-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-pop); color: var(--ink); } .recipe-card[hidden] { display: none; } .recipe-card__img { position: relative; height: 230px; margin: 12px 12px 0; border-radius: 26px; background: linear-gradient(150deg, color-mix(in srgb, var(--r-color) 35%, #fff), var(--r-color)) center / cover; display: flex; align-items: center; justify-content: center; } .recipe-card__placeholder { color: rgba(255, 255, 255, .85); } .recipe-card__badge { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: .75rem; font-weight: 800; } .recipe-card__season { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill); background: #fff; font-size: .75rem; font-weight: 800; } .recipe-card__season .dot, .recipe-modal .dot { background: var(--r-color); } .recipe-card__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .recipe-card__title { font-family: var(--font-h); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; } .recipe-card__text { font-size: .9375rem; line-height: 1.55; color: var(--muted); } .recipe-card__meta { display: flex; flex-wrap: wrap; gap: 8px; } .recipe-card__meta > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--pill); background: var(--cream); font-size: .8125rem; font-weight: 700; color: var(--ink-2); } .recipe-card__meta .icon { color: var(--r-color); } .recipe-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; align-items: center; } .recipe-card__level { font-size: .8125rem; font-weight: 700; color: var(--muted); } .recipe-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .875rem; color: var(--ad); } /* Rezept-Fenster */ .recipe-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; } .recipe-modal[hidden] { display: none; } .recipe-modal__scrim { position: absolute; inset: 0; background: rgba(30, 20, 24, .5); backdrop-filter: blur(6px); animation: fade-in .3s ease; } .recipe-modal__panel { position: relative; width: min(980px, 100%); max-height: calc(100svh - 48px); overflow: hidden auto; overscroll-behavior: contain; border-radius: 40px; background: var(--cream); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .6); animation: modal-in .45s var(--ease) both; } @keyframes modal-in { from { transform: translateY(40px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .recipe-modal__hero { position: relative; min-height: 340px; margin: 12px 12px 0; border-radius: 32px; overflow: hidden; display: flex; align-items: flex-end; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--r-color) 35%, #fff), var(--r-color)) center / cover; } .recipe-modal__hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 20, 24, .75), rgba(30, 20, 24, 0) 65%); } .recipe-modal__hero-text { position: relative; padding: 32px; display: flex; flex-direction: column; gap: 12px; } .recipe-modal__hero .h2 { color: #fff; } .recipe-modal__chips { display: flex; flex-wrap: wrap; gap: 8px; } .recipe-modal__chips > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--pill); background: #fff; color: var(--ink); font-size: .8125rem; font-weight: 800; } .recipe-modal__chips > span.is-dark { background: var(--ink); color: #fff; } .recipe-modal__close { position: absolute; z-index: 2; top: 18px; right: 18px; width: 48px; height: 48px; } .recipe-modal__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 16px 12px 0; } .recipe-modal__facts > div { padding: 16px 18px; border-radius: 22px; background: #fff; display: flex; flex-direction: column; gap: 4px; } .recipe-modal__facts small { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--muted); } .recipe-modal__facts small .icon { color: var(--r-color); } .recipe-modal__facts strong { font-family: var(--font-h); font-size: 1.25rem; line-height: 1.1; } .recipe-modal__body { padding: 28px clamp(20px, 4vw, 44px) 40px; display: flex; flex-direction: column; gap: 28px; } .recipe-modal__intro { margin: 0; font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-2); white-space: pre-line; } .recipe-modal__cols { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; } .recipe-modal__label { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-family: var(--font-h); font-size: 1.5rem; } .recipe-modal__label .icon { color: var(--r-color); } .recipe-modal__hint { margin: 0 0 14px; font-size: .8125rem; color: var(--muted); } .recipe-modal__ingredients { padding: 24px; border-radius: 28px; background: #fff; } .recipe-modal__ingredients ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .recipe-modal__ingredients li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: .9375rem; line-height: 1.45; cursor: pointer; } .recipe-modal__ingredients li:last-child { border-bottom: 0; } .recipe-modal__ingredients li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 7px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--r-color) 45%, transparent); transition: background .2s; } .recipe-modal__ingredients li.is-done { color: var(--muted-2); text-decoration: line-through; } .recipe-modal__ingredients li.is-done::before { background: var(--r-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; } .recipe-modal__ingredients li.is-heading { cursor: default; padding-top: 16px; font-weight: 800; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ad); border-bottom: 0; } .recipe-modal__ingredients li.is-heading::before { display: none; } .recipe-modal__steps ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: step; } .recipe-modal__steps li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 24px; background: #fff; } .recipe-modal__steps li::before { content: counter(step); width: 44px; height: 44px; border-radius: 15px; background: var(--r-color); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; } .recipe-modal__steps p { margin: 0; font-size: 1rem; line-height: 1.65; white-space: pre-line; } .recipe-modal__tip { margin-top: 10px !important; padding: 12px 14px; border-radius: 16px; background: var(--as); font-size: .875rem !important; color: var(--ink-2); } .recipe-modal__tip strong { color: var(--ad); } .recipe-modal__tags { display: flex; flex-wrap: wrap; gap: 8px; } .recipe-modal__tags span { padding: 7px 12px; border-radius: var(--pill); background: #fff; font-size: .75rem; font-weight: 700; color: var(--muted); } body.recipe-open { overflow: hidden; } @media (max-width: 860px) { .recipe-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; } .recipe-filter::-webkit-scrollbar { display: none; } .recipe-filter__btn { flex-shrink: 0; } .recipe-grid { grid-template-columns: 1fr; } .recipe-card { border-radius: 30px; } .recipe-card__img { height: 200px; } .recipe-modal { padding: 0; align-items: flex-end; } .recipe-modal__panel { max-height: 94svh; border-radius: 32px 32px 0 0; } .recipe-modal__hero { min-height: 260px; border-radius: 26px; } .recipe-modal__hero-text { padding: 22px; } .recipe-modal__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .recipe-modal__cols { grid-template-columns: 1fr; } .recipe-modal__ingredients { padding: 20px; } .recipe-modal__steps li { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; } .recipe-modal__steps li::before { width: 36px; height: 36px; border-radius: 12px; font-size: 1rem; } } /* ═══════════════════════════════════════════════════════════ 24. Feiern: Hero-Tags, Anlässe, Lead-Fenster (PDF) ═══════════════════════════════════════════════════════════ */ .hero-tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--pill); background: #fff; font-weight: 800; font-size: .9375rem; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .3); } .hero-tag .icon { color: var(--a); } .hero-tag--dark { background: var(--ink); color: #fff; } .occasions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .occasion { position: relative; overflow: hidden; padding: 36px; border-radius: 40px; background: #fff; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 16px; } .occasion > * { position: relative; } .occasion p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--ink-2); flex: 1; } .occasion .btn { align-self: flex-start; } .occasion__icon { width: 64px; height: 64px; border-radius: 22px; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; } .occasion__actions { display: flex; flex-wrap: wrap; gap: 8px; } .occasion--accent { background: linear-gradient(160deg, var(--al), var(--a) 70%); color: var(--ink); } .occasion--accent p { color: var(--ink); } .occasion--accent .occasion__icon { background: rgba(255, 255, 255, .5); color: var(--ink); } .occasion__blob { right: -70px; bottom: -90px; width: 240px; height: 240px; background: rgba(255, 255, 255, .2); pointer-events: none; } .occasion--dark { background: var(--ink); color: #fff; } .occasion--dark p { color: var(--on-dark); } .occasion--dark .occasion__icon { background: rgba(255, 255, 255, .1); color: var(--al); } /* Lead-Fenster */ .lead-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; } .lead-modal[hidden] { display: none; } .lead-modal__scrim { position: absolute; inset: 0; background: rgba(30, 20, 24, .5); backdrop-filter: blur(6px); animation: fade-in .3s ease; } .lead-modal__panel { position: relative; width: min(560px, 100%); max-height: calc(100svh - 48px); overflow: auto; padding: 36px; border-radius: 40px; background: var(--cream); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .6); animation: modal-in .45s var(--ease) both; } .lead-modal__close { position: absolute; top: 18px; right: 18px; } .lead-steps { display: flex; gap: 6px; margin-bottom: 22px; } .lead-steps i { width: 26px; height: 6px; border-radius: 6px; background: rgba(30, 20, 24, .1); transition: background .3s, width .3s; } .lead-steps i.is-done { background: var(--al); } .lead-steps i.is-active { width: 44px; background: var(--a); } .lead-step { display: flex; flex-direction: column; gap: 14px; animation: fade-in .35s ease; } .lead-step[hidden] { display: none; } .lead-step .h3 { padding-right: 50px; } .lead-modal__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); } .lead-options { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .lead-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-radius: 24px; background: #fff; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s, background .2s; } .lead-option:hover { background: var(--as); } .lead-option.is-selected { background: #fff; box-shadow: inset 0 0 0 2px var(--a), 0 14px 30px -18px color-mix(in srgb, var(--ad) 60%, transparent); } .lead-option__icon { width: 50px; height: 50px; border-radius: 16px; flex-shrink: 0; background: var(--as); color: var(--ad); display: flex; align-items: center; justify-content: center; } .lead-option__text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .lead-option__text strong { font-family: var(--font-h); font-size: 1.1875rem; color: var(--ink); } .lead-option__text small { font-size: .8125rem; line-height: 1.45; color: var(--muted); } .lead-option__check { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 2px var(--line); color: transparent; display: flex; align-items: center; justify-content: center; transition: all .2s; } .lead-option.is-selected .lead-option__check { background: var(--a); color: #fff; box-shadow: none; } .lead-modal__main { width: 100%; margin-top: 6px; } .lead-modal__main:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; } .lead-form { display: flex; flex-direction: column; gap: 14px; } .lead-form__field { display: flex; flex-direction: column; gap: 6px; font-size: .875rem; font-weight: 700; } .lead-form__field input { padding: 16px 18px; border: 2px solid transparent; border-radius: 18px; background: #fff; font: 600 1rem var(--font-b); color: var(--ink); transition: border-color .2s; } .lead-form__field input:focus { border-color: var(--a); } .lead-form__check { display: flex; gap: 12px; align-items: flex-start; font-size: .8125rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; } .lead-form__check input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--a); } .lead-form__error { margin: 0; font-size: .875rem; font-weight: 700; color: #B42318; } .lead-form__error:empty { display: none; } .lead-modal__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none; font: 700 .875rem var(--font-b); color: var(--muted); cursor: pointer; } .lead-step--done { align-items: center; text-align: center; } .lead-step--done .h3 { padding-right: 0; } .lead-done-icon { width: 80px; height: 80px; border-radius: 50%; background: #E6F5EC; color: #1E6B3E; display: flex; align-items: center; justify-content: center; } .lead-modal__note { margin: 0; font-size: .875rem; color: var(--muted); } body.lead-open { overflow: hidden; } @media (max-width: 1180px) { .occasions { grid-template-columns: 1fr; } } @media (max-width: 860px) { .occasion { padding: 24px; border-radius: 30px; } .hero-tag { font-size: .8125rem; padding: 10px 14px; } .lead-modal { padding: 0; align-items: flex-end; } .lead-modal__panel { max-height: 94svh; padding: 26px 22px 30px; border-radius: 32px 32px 0 0; } } /* ═══════════════════════════════════════════════════════════ 25. Shop: Hero, Kategorien, Produktkarten, Toast ═══════════════════════════════════════════════════════════ */ .shop-hero { position: relative; overflow: hidden; padding: calc(24px + var(--header-h) + 56px) 0 clamp(40px, 5vw, 64px); background: linear-gradient(150deg, var(--as) 0%, color-mix(in srgb, var(--al) 26%, #fff) 50%, var(--cream) 85%); } .shop-hero__blob { right: -160px; top: -140px; width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, var(--al), var(--a) 70%); opacity: .18; pointer-events: none; } .shop-hero__inner { position: relative; display: flex; align-items: center; gap: 60px; } .shop-hero__text { flex: 1; display: flex; flex-direction: column; gap: 22px; } .shop-hero__text .lead p { margin: 0; } .shop-trust { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .shop-trust li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--pill); background: rgba(255, 255, 255, .75); font-size: .875rem; font-weight: 700; } .shop-trust .icon { color: var(--a); } .spotlight { flex: 0 0 360px; border-radius: 40px; overflow: hidden; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--ad) 55%, transparent); display: flex; flex-direction: column; transform: rotate(2deg); transition: transform .4s var(--ease); } .spotlight:hover { color: var(--ink); transform: rotate(0) translateY(-6px); } .spotlight__img { position: relative; height: 280px; margin: 12px 12px 0; border-radius: 30px; overflow: hidden; background: linear-gradient(150deg, var(--al), var(--a)); display: flex; align-items: center; justify-content: center; color: #fff; } .spotlight__img img { width: 100%; height: 100%; object-fit: cover; } .spotlight__img .shop-badge { position: absolute; top: 14px; left: 14px; } .spotlight__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; } .spotlight__title { font-family: var(--font-h); font-weight: 800; font-size: 1.5rem; line-height: 1.1; } .spotlight__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Kategorien-Leiste */ .shop-bar { position: sticky; z-index: 40; top: calc(24px + var(--header-h) + 8px); transition: top .45s var(--ease); pointer-events: none; } body.nav-hidden .shop-bar { top: 16px; } .shop-bar__inner { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--pill); background: #fff; box-shadow: 0 14px 34px -16px rgba(30, 20, 24, .3), 0 0 0 1px rgba(30, 20, 24, .04); pointer-events: auto; max-width: calc(var(--maxw, 1280px)); } .shop-pills { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; } .shop-pills::-webkit-scrollbar { display: none; } .shop-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; border-radius: var(--pill); color: var(--ink-2); font-weight: 700; font-size: .875rem; text-decoration: none; transition: background .25s, color .25s; } .shop-pill:hover { background: var(--as); color: var(--ink); } .shop-pill span { padding: 2px 7px; border-radius: var(--pill); background: var(--cream); color: var(--muted); font-size: .6875rem; } .shop-pill.is-active { background: var(--ink); color: #fff; } .shop-pill.is-active span { background: rgba(255, 255, 255, .15); color: #fff; } .shop-pill--ext { color: var(--muted); } .shop-pill--ext .icon { opacity: .6; } .shop-pills__sep { flex-shrink: 0; width: 1px; margin: 8px 4px; background: var(--line); } .shop-sort { flex-shrink: 0; } .shop-sort form { margin: 0; } .shop-sort select { appearance: none; -webkit-appearance: none; padding: 11px 40px 11px 16px; border: 0; border-radius: var(--pill); background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1418' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 14px no-repeat; font: 700 .875rem var(--font-b); color: var(--ink); cursor: pointer; } /* Produktraster */ .shop-count { margin: 0 0 18px; font-size: .875rem; font-weight: 700; color: var(--muted); } .shop-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } .shop-card { position: relative; border-radius: 36px; background: #fff; box-shadow: var(--shadow-card); display: flex; flex-direction: column; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; } .shop-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop); } .shop-card__media { position: relative; display: block; aspect-ratio: 1 / 1; margin: 12px 12px 0; border-radius: 26px; overflow: hidden; background: linear-gradient(150deg, var(--as), color-mix(in srgb, var(--al) 55%, #fff)); } .shop-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .6s var(--ease); } .shop-card__img--alt { opacity: 0; } .shop-card:hover .shop-card__img { transform: scale(1.04); } .shop-card:hover .shop-card__img--alt { opacity: 1; } .shop-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--a); } .shop-card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .shop-badge { display: inline-flex; padding: 6px 12px; border-radius: var(--pill); background: #fff; color: var(--ink); font-size: .75rem; font-weight: 800; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .3); } .shop-badge--sale { background: var(--ad); color: #fff; } .shop-badge--new { background: var(--ink); color: #fff; } .shop-badge--muted { background: rgba(30, 20, 24, .7); color: #fff; } .shop-card__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .shop-card__cat { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--a); } .shop-card__title { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: 1.375rem; line-height: 1.12; letter-spacing: -.02em; } .shop-card__title a { color: var(--ink); text-decoration: none; } .shop-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 0; } .shop-card__text { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--muted); } .shop-card__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .shop-card__price, .shop-card__price .amount { font-family: var(--font-h); font-weight: 800; font-size: 1.375rem; color: var(--ink); } .shop-card__price del { opacity: .45; font-size: .8em; margin-right: 4px; } .shop-card__price ins { text-decoration: none; color: var(--ad); } .shop-card__price small { font-size: .75rem; font-family: var(--font-b); color: var(--muted); } .shop-card .shop-card__cart, .shop-card .added_to_cart { position: relative; z-index: 1; } .shop-card .shop-card__cart.loading { opacity: .6; pointer-events: none; } .shop-card .shop-card__cart.added::after { content: ' ✓'; } .shop-card .added_to_cart { display: none; } /* Pagination */ .shop-pagination { margin-top: 40px; } .shop-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 8px; border: 0 !important; } .shop-pagination li { border: 0 !important; } .shop-pagination a, .shop-pagination span { min-width: 46px; height: 46px; padding: 0 14px; border-radius: var(--pill); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ink); text-decoration: none; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .3); } .shop-pagination .current { background: var(--ink); color: #fff; } /* Geschenk-Streifen */ .gift-strip { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 40px; background: linear-gradient(120deg, var(--c-breakfast-l), #FFE9A8 55%, #FFF7E3); color: var(--ink); text-decoration: none; } .gift-strip:hover { color: var(--ink); } .gift-strip__blob { right: -60px; top: -80px; width: 240px; height: 240px; background: rgba(255, 255, 255, .45); pointer-events: none; } .gift-strip > * { position: relative; } .gift-strip__icon { width: 72px; height: 72px; flex-shrink: 0; border-radius: 24px; background: #fff; color: #C98A0E; display: flex; align-items: center; justify-content: center; } .gift-strip__text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .gift-strip__text small { font-size: .875rem; font-weight: 700; color: #6E4A05; } .gift-strip__text strong { font-family: var(--font-h); font-size: var(--fs-h3); line-height: 1.1; } /* Ticket-Block */ .shop-tickets { display: flex; gap: 60px; align-items: center; } .shop-tickets__text { flex: 1; display: flex; flex-direction: column; gap: 20px; } .shop-tickets__cards { flex: 0 0 min(440px, 40%); display: flex; flex-direction: column; gap: 12px; } .shop-tickets__cards .feature { flex-direction: row; align-items: center; gap: 16px; padding: 22px; border-radius: 28px; } .shop-tickets__cards .feature__title { font-size: 1.25rem; } .shop-tickets__cards .feature > p { display: none; } /* Warenkorb-Toast */ .cart-toast { position: fixed; z-index: 160; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: var(--pill); background: var(--ink); color: #fff; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .5); animation: toast-in .45s var(--ease) both; } .cart-toast[hidden] { display: none; } .cart-toast__icon { width: 32px; height: 32px; border-radius: 50%; background: #2E9E5B; display: flex; align-items: center; justify-content: center; } .cart-toast__text { font-weight: 800; font-size: .9375rem; white-space: nowrap; } @keyframes toast-in { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } @media (max-width: 1180px) { .shop-hero__inner, .shop-tickets { flex-direction: column; align-items: stretch; } .spotlight { flex-basis: auto; max-width: 420px; transform: none; } .shop-tickets__cards { flex-basis: auto; } .shop-bar { top: 92px; } } @media (max-width: 860px) { .shop-hero { padding-top: 110px; } .spotlight__img { height: 220px; } .shop-bar { top: 80px; } body.nav-hidden .shop-bar { top: 10px; } .shop-bar .wrap { padding-inline: 12px; } .shop-bar__inner { padding: 6px; } .shop-sort select { padding: 11px 32px 11px 12px; max-width: 132px; } .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .shop-card { border-radius: 26px; } .shop-card__media { margin: 8px 8px 0; border-radius: 20px; } .shop-card__body { padding: 12px 14px 16px; gap: 6px; } .shop-card__cat { font-size: .625rem; } .shop-card__title { font-size: 1.0625rem; } .shop-card__text { display: none; } .shop-card__price, .shop-card__price .amount { font-size: 1.125rem; } .shop-card__foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; } .shop-card .shop-card__cart { width: 100%; justify-content: center; padding-inline: 10px; } .gift-strip { flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 32px; } .cart-toast { bottom: 90px; } } /* WooCommerce-Hinweise im Theme-Stil */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 24px; padding: 16px 20px; border: 0; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .woocommerce-message { box-shadow: inset 4px 0 0 #2E9E5B, var(--shadow-card); } .woocommerce-error { box-shadow: inset 4px 0 0 #B42318, var(--shadow-card); } .woocommerce-message .button, .woocommerce-info .button { order: 2; padding: 10px 18px; border-radius: var(--pill); background: var(--ink); color: #fff; font-weight: 800; font-size: .875rem; text-decoration: none; } /* ═══════════════════════════════════════════════════════════ 26. Textseiten (Impressum, Datenschutz …), Danke, Bestellschritte ═══════════════════════════════════════════════════════════ */ .text-hero { position: relative; overflow: hidden; padding: calc(24px + var(--header-h) + 60px) 0 clamp(36px, 5vw, 56px); background: linear-gradient(150deg, var(--as) 0%, color-mix(in srgb, var(--al) 22%, #fff) 55%, var(--cream) 90%); } .text-hero--compact { padding-bottom: 28px; } .text-hero__blob { right: -140px; top: -140px; width: 420px; height: 420px; background: radial-gradient(circle at 30% 30%, var(--al), var(--a) 70%); opacity: .16; pointer-events: none; } .text-hero__inner { position: relative; display: flex; flex-direction: column; gap: 18px; } .text-hero .h1 { font-size: var(--fs-h2); } .text-hero__meta { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; color: var(--muted); } .text-page { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 64px; padding-block: clamp(40px, 6vw, 80px); justify-content: center; } .text-page:not(:has(.toc:not([hidden]))) { grid-template-columns: minmax(0, 780px); } .text-page--wide { display: block; max-width: none; } .toc { position: sticky; top: calc(24px + var(--header-h) + 24px); align-self: start; padding: 22px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); max-height: calc(100svh - 160px); overflow: auto; transition: top .45s var(--ease); } body.nav-hidden .toc { top: 24px; } .toc__title { margin: 0 0 10px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ad); } .toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; } .toc__list a { display: block; padding: 8px 12px; border-radius: 12px; font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; } .toc__list a:hover { background: var(--cream); color: var(--ink); } .toc__list a.is-active { background: var(--as); color: var(--ad); } /* Fließtext */ .prose { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); overflow-wrap: break-word; } .prose > *:first-child { margin-top: 0; } .prose p, .prose ul, .prose ol, .prose table, .prose blockquote, .prose figure { margin: 0 0 1.2em; } .prose h2 { margin: 2.2em 0 .7em; font-family: var(--font-h); font-weight: 800; font-size: clamp(1.5rem, 1.5vw + 1rem, 2.125rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); scroll-margin-top: 140px; } .prose h3 { margin: 1.8em 0 .6em; font-family: var(--font-h); font-weight: 800; font-size: 1.3125rem; line-height: 1.25; color: var(--ink); scroll-margin-top: 140px; } .prose h4 { margin: 1.5em 0 .5em; font-size: 1.0625rem; font-weight: 800; color: var(--ink); } .prose strong { color: var(--ink); } .prose a { color: var(--ad); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-bottom: .45em; } .prose li::marker { color: var(--a); } .prose blockquote { padding: 18px 22px; border-radius: 22px; background: var(--as); border-left: 4px solid var(--a); } .prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; } .prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .prose th { font-weight: 800; color: var(--ink); } .prose hr { margin: 2.4em 0; border: 0; border-top: 1px dashed var(--line); } .prose img { max-width: 100%; height: auto; border-radius: 22px; } /* Danke-Seite */ .thanks__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 760px; } .thanks__inner .h1 em { display: block; color: var(--a); } .thanks__icon { width: 96px; height: 96px; border-radius: 50%; background: #E6F5EC; color: #1E6B3E; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px -20px rgba(30, 107, 62, .5); } .thanks__text { text-align: left; } /* Bestellschritte (Warenkorb / Kasse) */ .checkout-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; } .checkout-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: var(--pill); background: rgba(255, 255, 255, .7); font-size: .875rem; font-weight: 700; color: var(--muted); } .checkout-steps span { width: 28px; height: 28px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 800; } .checkout-steps .is-active { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .3); } .checkout-steps .is-active span { background: var(--ad); color: #fff; } .checkout-steps .is-done span { background: #E6F5EC; color: #1E6B3E; } @media (max-width: 1080px) { .text-page, .text-page:not(:has(.toc:not([hidden]))) { grid-template-columns: minmax(0, 1fr); gap: 28px; } .toc { position: static; max-height: none; } } @media (max-width: 860px) { .text-hero { padding-top: 110px; } .prose { font-size: 1rem; } } /* ═══════════════════════════════════════════════════════════ 27. Produktseite ═══════════════════════════════════════════════════════════ */ .product-page { padding-top: calc(24px + var(--header-h) + 40px); } .product-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: .875rem; font-weight: 700; color: var(--muted); } .product-crumbs a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); text-decoration: none; } .product-crumbs a:hover { color: var(--ad); } .product-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .product-gallery { position: sticky; top: calc(24px + var(--header-h) + 20px); display: flex; flex-direction: column; gap: 12px; } .product-gallery__stage { position: relative; aspect-ratio: 1 / 1; border-radius: 40px; overflow: hidden; background: linear-gradient(150deg, var(--as), color-mix(in srgb, var(--al) 55%, #fff)); box-shadow: var(--shadow-card); } .product-gallery__slide { position: absolute; inset: 0; margin: 0; animation: fade-in .35s ease; } .product-gallery__slide img { width: 100%; height: 100%; object-fit: cover; } .product-gallery__placeholder { display: flex; align-items: center; justify-content: center; color: var(--a); } .product-gallery__badge { position: absolute; top: 18px; left: 18px; } .product-gallery__nav { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; background: rgba(255, 255, 255, .9); } .product-gallery__nav--prev { left: 16px; } .product-gallery__nav--next { right: 16px; } .product-gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; } .product-gallery__thumb { flex: 0 0 84px; height: 84px; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; opacity: .55; box-shadow: inset 0 0 0 2px transparent; transition: opacity .2s, box-shadow .2s; background: var(--as); } .product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-gallery__thumb.is-active { opacity: 1; box-shadow: 0 0 0 3px var(--a); } .product-buy { display: flex; flex-direction: column; gap: 16px; } .product-buy__title { margin: 0; } .product-buy__price, .product-buy__price .amount { font-family: var(--font-h); font-weight: 800; font-size: 2rem; color: var(--ink); } .product-buy__price del { opacity: .45; font-size: .7em; margin-right: 8px; } .product-buy__price ins { text-decoration: none; color: var(--ad); } .product-buy__short { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); } .product-buy__short p { margin: 0 0 .8em; } .product-buy__form { padding: 24px; border-radius: 32px; background: #fff; box-shadow: var(--shadow-card); } /* Bestellformular (inkl. Add-on-Felder) */ .product-buy__form form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; } .product-buy__form form.cart > *:not(.quantity):not(.single_add_to_cart_button) { flex-basis: 100%; } .product-buy__form label { font-size: .875rem; font-weight: 800; color: var(--ink); } .product-buy__form input[type="text"], .product-buy__form input[type="email"], .product-buy__form input[type="tel"], .product-buy__form input[type="number"], .product-buy__form input[type="date"], .product-buy__form select, .product-buy__form textarea { width: 100%; padding: 13px 16px; border: 2px solid transparent; border-radius: 16px; background: var(--cream); font: 600 1rem var(--font-b); color: var(--ink); transition: border-color .2s, background .2s; } .product-buy__form input:focus, .product-buy__form select:focus, .product-buy__form textarea:focus { border-color: var(--a); background: #fff; } .product-buy__form .quantity { flex: 0 0 auto; } .product-buy__form .quantity input.qty { width: 84px; text-align: center; font-family: var(--font-h); font-weight: 800; } .product-buy__form .single_add_to_cart_button, .product-buy__form button.button.alt { flex: 1; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--pill); background: var(--btn-bg) !important; color: var(--btn-fg) !important; font: 800 1.0625rem var(--font-b); cursor: pointer; box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--ad) 80%, transparent); transition: transform .25s var(--ease); } .product-buy__form .single_add_to_cart_button:hover { transform: translateY(-2px); } .product-buy__form .single_add_to_cart_button.disabled { opacity: .5; } .product-buy__form table.variations { width: 100%; border: 0; margin-bottom: 8px; } .product-buy__form table.variations th, .product-buy__form table.variations td { display: block; padding: 0 0 6px; text-align: left; border: 0; } .product-buy__form .reset_variations { font-size: .8125rem; color: var(--muted); } .product-buy__form .stock { margin: 0; font-weight: 800; font-size: .875rem; } .product-buy__form .stock.in-stock { color: #1E6B3E; } .product-buy__form .stock.out-of-stock { color: #B42318; } .product-buy__form .yith-wapo-block, .product-buy__form #yith-wapo-container { width: 100%; } .product-buy__form .yith-wapo-addon { margin-bottom: 14px !important; } .product-buy__form .wapo-addon-title, .product-buy__form .yith-wapo-addon .addon-header { font-family: var(--font-h) !important; font-weight: 800 !important; font-size: 1.0625rem !important; color: var(--ink) !important; } .product-buy__trust { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; } .product-buy__trust li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, .6); font-size: .875rem; color: var(--muted); } .product-buy__trust .icon { flex-shrink: 0; color: var(--a); } .product-buy__trust span { display: flex; flex-direction: column; } .product-buy__trust strong { color: var(--ink); } .product-buy__trust a { color: var(--ad); font-weight: 700; } .product-details { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; margin-top: clamp(40px, 6vw, 72px); } .product-details > div { padding: clamp(24px, 3vw, 40px); border-radius: 36px; background: #fff; box-shadow: var(--shadow-card); } .product-details .h3 { margin: 0 0 16px; } .product-details__desc:only-child { grid-column: 1 / -1; } .product-attrs { margin: 0; display: flex; flex-direction: column; } .product-attrs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); } .product-attrs div:last-child { border-bottom: 0; } .product-attrs dt { font-weight: 800; } .product-attrs dd { margin: 0; color: var(--ink-2); text-align: right; } .buy-bar { display: none; } @media (max-width: 1080px) { .product-main, .product-details { grid-template-columns: minmax(0, 1fr); } .product-gallery { position: static; } } @media (max-width: 860px) { .product-page { padding-top: 104px; } .product-gallery__stage { border-radius: 30px; } .product-gallery__thumb { flex-basis: 64px; height: 64px; border-radius: 16px; } .product-buy__price, .product-buy__price .amount { font-size: 1.625rem; } .product-buy__form { padding: 18px; border-radius: 26px; } .product-buy__form .single_add_to_cart_button { flex-basis: 100%; } .buy-bar:not([hidden]) { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: var(--pill); background: #fff; box-shadow: 0 18px 40px -14px rgba(30, 20, 24, .45); animation: toast-in-bar .4s var(--ease) both; } .buy-bar__info { display: flex; flex-direction: column; min-width: 0; } .buy-bar__info strong { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buy-bar__info span, .buy-bar__info .amount { font-family: var(--font-h); font-weight: 800; font-size: 1rem; } .buy-bar__info del { display: none; } .product-details > div { border-radius: 28px; } } @keyframes toast-in-bar { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } } /* ═══════════════════════════════════════════════════════════ 28. Warenkorb, Kasse, Mein Konto (klassisch + Blöcke) – Grundstil ═══════════════════════════════════════════════════════════ */ .text-page--wide input[type="text"], .text-page--wide input[type="email"], .text-page--wide input[type="tel"], .text-page--wide input[type="password"], .text-page--wide input[type="number"], .text-page--wide select, .text-page--wide textarea, .text-page--wide .wc-block-components-text-input input, .text-page--wide .select2-container .select2-selection--single { border: 2px solid transparent !important; border-radius: 16px !important; background: #fff !important; font-family: var(--font-b) !important; box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .3); } .text-page--wide input:focus, .text-page--wide select:focus, .text-page--wide textarea:focus { border-color: var(--a) !important; } .text-page--wide .button, .text-page--wide button.button, .text-page--wide .checkout-button, .text-page--wide #place_order, .text-page--wide .wc-block-components-button:not(.is-link) { border: 0 !important; border-radius: var(--pill) !important; background: var(--ink) !important; color: #fff !important; font-family: var(--font-b) !important; font-weight: 800 !important; padding: 14px 24px !important; text-decoration: none !important; } .text-page--wide .checkout-button, .text-page--wide #place_order, .text-page--wide .wc-block-cart__submit-button, .text-page--wide .wc-block-components-checkout-place-order-button { background: var(--btn-bg) !important; color: var(--btn-fg) !important; min-height: 56px; font-size: 1.0625rem !important; } .text-page--wide table.shop_table { border: 0 !important; border-radius: 28px !important; background: #fff; box-shadow: var(--shadow-card); overflow: hidden; } .text-page--wide table.shop_table th, .text-page--wide table.shop_table td { border-color: var(--line) !important; padding: 16px !important; } .text-page--wide .cart_totals, .text-page--wide #order_review, .text-page--wide .wc-block-components-sidebar { border-radius: 28px; } .text-page--wide .wc-block-components-sidebar-layout .wc-block-components-main, .text-page--wide .wc-block-components-sidebar > div { font-family: var(--font-b); } .text-page--wide .wc-block-components-totals-wrapper, .text-page--wide .wc-block-cart-items { border-color: var(--line) !important; } /* Geschenkkarte einlösen (Gutschein-Plugin, klassisch + Blöcke) */ .text-page--wide :is(#pwgc-redeem-gift-card-form, [class*="pwgc-redeem"], [class*="gift-card-form"], .wc-block-components-sidebar :is(div, form, p):has(> input[type="text"]):has(> button)) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } .text-page--wide :is(#pwgc-redeem-gift-card-form, [class*="pwgc-redeem"], [class*="gift-card-form"], .wc-block-components-sidebar :is(div, form, p):has(> input[type="text"]):has(> button)) > :is(label, p, span, strong):not(:has(input, button)) { flex: 0 0 100%; margin: 0 0 4px; font-size: .875rem; font-weight: 800; color: var(--ink); } .text-page--wide :is(#pwgc-redeem-gift-card-form, [class*="pwgc-redeem"], [class*="gift-card-form"], .wc-block-components-sidebar :is(div, form, p):has(> input[type="text"]):has(> button)) > input[type="text"] { flex: 1 1 180px; min-width: 0; height: 52px; margin: 0; padding: 0 20px !important; border-radius: var(--pill) !important; background: #fff !important; font-size: .9375rem; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line) !important; } .text-page--wide :is(#pwgc-redeem-gift-card-form, [class*="pwgc-redeem"], [class*="gift-card-form"], .wc-block-components-sidebar :is(div, form, p):has(> input[type="text"]):has(> button)) > input[type="text"]:focus { outline: 0; border-color: transparent !important; box-shadow: inset 0 0 0 2px var(--ink) !important; } .text-page--wide :is(#pwgc-redeem-gift-card-form, [class*="pwgc-redeem"], [class*="gift-card-form"], .wc-block-components-sidebar :is(div, form, p):has(> input[type="text"]):has(> button)) > button { flex: 0 0 auto; width: auto !important; height: 52px; margin: 0; padding: 0 22px !important; border: 0 !important; border-radius: var(--pill) !important; background: #F4EBE2 !important; color: var(--ink) !important; font-family: var(--font-b) !important; font-size: .875rem !important; font-weight: 800 !important; cursor: pointer; transition: background .25s, color .25s; } .text-page--wide :is(#pwgc-redeem-gift-card-form, [class*="pwgc-redeem"], [class*="gift-card-form"], .wc-block-components-sidebar :is(div, form, p):has(> input[type="text"]):has(> button)) > button:hover { background: var(--ink) !important; color: #fff !important; } @media (max-width: 420px) { .text-page--wide :is(#pwgc-redeem-gift-card-form, [class*="pwgc-redeem"], [class*="gift-card-form"], .wc-block-components-sidebar :is(div, form, p):has(> input[type="text"]):has(> button)) > button { flex: 1 1 100%; } } .text-page--wide h2, .text-page--wide h3 { font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em; } .text-page--wide .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); } .text-page--wide .woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: 14px; color: var(--ink-2); font-weight: 700; text-decoration: none; } .text-page--wide .woocommerce-MyAccount-navigation .is-active a { background: var(--as); color: var(--ad); } /* ═══════════════════════════════════════════════════════════ 29. Mobiles Vollbild-Menü Läuft bis unter die Safari-Leiste (viewport-fit=cover + 100dvh), Inhalte halten per Safe-Area Abstand. ═══════════════════════════════════════════════════════════ */ .mm { position: fixed; inset: 0; z-index: 10000; height: 100vh; height: 100dvh; background: var(--cream); display: flex; flex-direction: column; clip-path: circle(0 at var(--mm-x, calc(100% - 44px)) var(--mm-y, 44px)); transition: clip-path .55s var(--ease); } .mm[hidden] { display: none; } .mm.is-open { clip-path: circle(150% at var(--mm-x, calc(100% - 44px)) var(--mm-y, 44px)); transition: clip-path .7s var(--ease); } .mm__head { flex-shrink: 0; padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 10px 24px; display: flex; align-items: center; justify-content: space-between; } .mm__head .logo svg { width: 40px; height: 40px; } .mm__head .logo span { font-size: 1.25rem; } .mm__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 16px 32px; } .mm__foot { flex-shrink: 0; position: relative; margin-top: -24px; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: linear-gradient(to top, var(--cream) 72%, color-mix(in srgb, var(--cream) 0%, transparent)); } .mm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); } .mm.is-open .mm-reveal { opacity: 1; transform: none; transition-delay: calc(.18s + var(--d, 0) * .05s); } .mm-round { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ink); border: 0; cursor: pointer; } .mm-round--dark { background: var(--ink); color: #fff; } /* Auf dieser Seite */ .mm-here { margin: 0 -16px 18px; padding: 0 16px; } .mm-here__label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ad); } .mm-here__label span { width: 8px; height: 8px; border-radius: 50%; background: var(--a); } .mm-here__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; } .mm-here__chips::-webkit-scrollbar { display: none; } .mm-here__chips a { flex-shrink: 0; padding: 11px 16px; border-radius: var(--pill); background: #fff; color: var(--ink); font-weight: 700; font-size: .875rem; text-decoration: none; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .25); } .mm-here__chips a.is-cta { background: var(--btn-bg); color: var(--btn-fg); } /* Live-Status */ .mm-live { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 12px 14px; border-radius: 18px; background: #fff; color: var(--ink); font-size: .875rem; font-weight: 700; text-decoration: none; } .mm-live em { margin-left: auto; font-style: normal; font-weight: 600; font-size: .8125rem; color: var(--muted); white-space: nowrap; } .mm-live__dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--muted-2); } .mm-live.is-open .mm-live__dot, .mm-live.is-season .mm-live__dot { background: #2E9E5B; animation: mm-pulse 1.8s infinite; } .mm-live.is-later .mm-live__dot { background: #E0A100; } .mm-live.is-closed .mm-live__dot { background: #C0392B; } @keyframes mm-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 158, 91, .5); } 70% { box-shadow: 0 0 0 10px rgba(46, 158, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0); } } .mm-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 10px; } .mm-sec h3 { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: 1.375rem; letter-spacing: -.03em; line-height: 1.1; } .mm-sec a { display: inline-flex; align-items: center; gap: 2px; font-size: .8125rem; font-weight: 800; color: var(--ad); text-decoration: none; } /* Bildkarten */ .mm-img { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 16px; color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; background-color: var(--card-color, var(--ad)); background-image: var(--card-grad); background-size: cover; background-position: center; } .mm-img::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(30, 20, 24, .72), rgba(30, 20, 24, 0) 62%), linear-gradient(35deg, rgba(30, 20, 24, .38) 0%, rgba(30, 20, 24, .12) 40%, rgba(30, 20, 24, 0) 70%); } .mm-img strong, .mm-img small { text-shadow: 0 1px 12px rgba(30, 20, 24, .35); } .mm-img:hover { color: #fff; } .mm-img strong { font-family: var(--font-h); font-weight: 800; line-height: 1; letter-spacing: -.03em; } .mm-img small { margin-top: 4px; font-size: .8125rem; font-weight: 600; opacity: .9; } .mm-chip { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--pill); background: #fff; color: var(--ink); font-size: .6875rem; font-weight: 800; } .mm-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: #2E9E5B; } .mm-img__go { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; } .mm-img--hero { height: 210px; margin-bottom: 10px; } .mm-img--hero strong { font-size: 2.125rem; padding-right: 48px; } .mm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; } .mm-tiles .mm-img { height: 132px; border-radius: 22px; padding: 12px 14px; } .mm-tiles .mm-img strong { font-size: 1.1875rem; } .mm-tiles .mm-img small { font-size: .75rem; } /* Waldviertel */ .mm-wv { margin-bottom: 26px; border-radius: 28px; overflow: hidden; background: var(--c-green-d); color: #fff; } .mm-wv .mm-img { height: 150px; border-radius: 0; } .mm-wv .mm-img strong { font-size: 1.625rem; } .mm-wv__links { padding: 6px; display: grid; gap: 2px; } .mm-wv__links a { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; color: #fff; font-weight: 700; font-size: .9375rem; text-decoration: none; } .mm-wv__links a:active { background: rgba(255, 255, 255, .08); } .mm-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .mm-wv__links .mm-ic { background: rgba(168, 208, 138, .18); color: var(--c-green-l); } .mm-arr { margin-left: auto; opacity: .5; display: flex; } /* Info */ .mm-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .mm-info a { min-height: 108px; padding: 16px; border-radius: 22px; background: #fff; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; } .mm-info .mm-ic { width: 40px; height: 40px; border-radius: 14px; background: var(--c-strawberry-s); color: var(--c-strawberry-d); } .mm-info strong { display: block; font-size: .9375rem; } .mm-info small { display: block; margin-top: 2px; font-size: .75rem; font-weight: 600; color: var(--muted); } .mm-info a.is-dark { background: var(--ink); color: #fff; } .mm-info a.is-dark .mm-ic { background: rgba(255, 255, 255, .1); color: var(--c-strawberry-l); } .mm-info a.is-dark small { color: rgba(255, 255, 255, .6); } .mm-social { display: flex; justify-content: center; gap: 8px; padding: 8px 0 4px; } .mm-social a { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; } .mm-legal { margin: 14px 0 0; text-align: center; font-size: .75rem; font-weight: 600; color: var(--muted); } .mm-legal a { color: inherit; text-decoration: none; } .mm-btn { height: 56px; border-radius: var(--pill); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 1rem; text-decoration: none; } .mm-btn--red { background: var(--c-strawberry); color: #fff; } .mm-btn--dark { background: var(--ink); color: #fff; } .mm-btn:hover { color: #fff; } .mm-btn .cart-count { position: static; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--c-strawberry-l); color: var(--ink); font-size: .6875rem; display: inline-flex; align-items: center; justify-content: center; } .mm-btn .cart-count[hidden] { display: none; } @media (min-width: 1181px) { .mm { display: none !important; } } @media (prefers-reduced-motion: reduce) { .mm, .mm.is-open { transition: none; clip-path: none; } .mm-reveal { opacity: 1; transform: none; transition: none; } } /* Footer: Route / Finder in der jeweiligen Standort-Karte */ .f-route { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 20px; background: rgba(255, 255, 255, .08); color: #fff !important; text-decoration: none; transition: background .25s; } .f-card > .f-route { margin-top: 8px; } .f-route:hover { background: rgba(255, 255, 255, .14); } .f-route__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--al); color: var(--ink); display: flex; align-items: center; justify-content: center; } .f-route > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; } .f-route strong { font-size: .9375rem; } .f-route small { font-size: .75rem; color: rgba(255, 255, 255, .6); } .f-route > .icon:last-child { opacity: .6; flex-shrink: 0; } /* Route-Auswahl (Google / Apple) */ .f-routes { margin-top: auto; position: relative; } .f-card > .f-routes { margin-top: 8px; } .f-routes > summary { list-style: none; cursor: pointer; margin-top: 0; } .f-routes > summary::-webkit-details-marker { display: none; } .f-route__chev { transition: transform .3s var(--ease); } .f-routes[open] > summary { background: rgba(255, 255, 255, .14); border-radius: 20px 20px 6px 6px; } .f-routes[open] .f-route__chev { transform: rotate(180deg); opacity: 1; } .f-routes__menu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; animation: way-rise .35s var(--ease) both; } .f-routes__menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: rgba(255, 255, 255, .08); color: #fff !important; text-decoration: none; font-size: .875rem; font-weight: 700; transition: background .25s; } .f-routes__menu a:first-child { border-radius: 6px 6px 6px 20px; } .f-routes__menu a:last-child { border-radius: 6px 6px 20px 6px; } .f-routes__menu a:hover { background: rgba(255, 255, 255, .18); } .f-routes__menu a .icon { opacity: .6; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .f-routes__menu { animation: none; } } /* ═══════════════════════════════════════════════════════════ 30. Shop-Wegweiser „Ich möchte …“ ═══════════════════════════════════════════════════════════ */ .way { padding: calc(24px + var(--header-h) + 56px) 0 clamp(64px, 9vw, 120px); min-height: 80vh; } .way__inner { display: flex; flex-direction: column; } .way__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: 20px; } .way__steps { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .way__steps i { width: 26px; height: 5px; border-radius: 5px; background: rgba(30, 20, 24, .14); transition: background .3s, width .3s; } .way__steps i.is-on { width: 40px; background: var(--ink); } .way__steps i.is-done { background: var(--ink-2); } .way__steps span { margin-left: 8px; } .way__back { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px 0 10px; border: 0; border-radius: var(--pill); background: #fff; color: var(--ink); font: 700 .875rem var(--font-b); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); } .way__back[hidden] { display: none; } .way__sentence { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: var(--fs-hero); line-height: 1; letter-spacing: -.045em; text-wrap: balance; } .way__sentence .is-pick { color: var(--c-strawberry); cursor: pointer; background: linear-gradient(currentColor, currentColor) 0 100% / 100% .07em no-repeat; padding-bottom: .04em; } .way__sentence .is-pick:hover { color: var(--c-strawberry-d); } .way__sentence .is-gap { color: rgba(30, 20, 24, .22); } .way__sentence .is-new { animation: fade-in .45s ease both; } .way__stage { margin-top: clamp(28px, 4vw, 44px); } .way__all { align-self: flex-start; margin-top: 36px; font-size: .875rem; font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; } .way__all:hover { color: var(--ink); } /* Auswahl als große Zeilen */ .way-opts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .way-opt { border-bottom: 1px solid var(--line); animation: way-rise .5s var(--ease) both; } .way-opt:nth-child(2) { animation-delay: .04s; } .way-opt:nth-child(3) { animation-delay: .08s; } .way-opt:nth-child(4) { animation-delay: .12s; } @keyframes way-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .way-opt > button, .way-opt > a { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 20px 4px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; text-decoration: none; transition: padding .35s var(--ease); } .way-opt__thumb { width: 64px; height: 64px; border-radius: 20px; background: #F4EBE2; color: var(--ink-2); display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; } .way-opt__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .way-opt__txt strong { font-family: var(--font-h); font-weight: 800; font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -.03em; } .way-opt__txt small { font-size: .875rem; font-weight: 600; color: var(--muted); } .way-opt__live { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 9px 2px 7px; border-radius: var(--pill); background: var(--c-green-s); color: var(--c-green-d); font-style: normal; font-size: .75rem; font-weight: 700; vertical-align: 1px; white-space: nowrap; } .way-opt__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 0 var(--c-green); animation: way-pulse 2s infinite; } @keyframes way-pulse { 0% { box-shadow: 0 0 0 0 rgba(92, 140, 58, .45); } 70% { box-shadow: 0 0 0 6px rgba(92, 140, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(92, 140, 58, 0); } } @media (prefers-reduced-motion: reduce) { .way-opt__live i { animation: none; } } .way-opt__go { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s, transform .35s var(--ease), box-shadow .3s; } @media (hover: hover) { .way-opt > button:hover { padding-left: 14px; } .way-opt > button:hover .way-opt__thumb { background: var(--ink); color: #fff; } .way-opt > button:hover .way-opt__go { background: var(--c-strawberry); color: #fff; box-shadow: none; transform: rotate(-45deg); } } /* Ergebnis */ .way-res { display: flex; flex-direction: column; gap: 32px; animation: way-rise .5s var(--ease) both; } .way-res__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; } .way-res__info { display: flex; flex-direction: column; gap: 16px; } .way-where { align-self: flex-start; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .way-where__icon { width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .way-where small { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .way-where strong { display: block; font-size: 1rem; } .way-where code { font: 700 .8125rem/1 var(--font-b); color: var(--ink-2); } .way-res__text { margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); max-width: 52ch; } .way-res__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .way-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px; border-radius: var(--pill); background: var(--c-strawberry); color: #fff; font-weight: 800; font-size: 1.0625rem; text-decoration: none; box-shadow: 0 18px 34px -18px var(--c-strawberry-d); transition: transform .25s var(--ease); } .way-cta:hover { color: #fff; transform: translateY(-2px); } .way-hint { margin: 0; display: flex; gap: 8px; align-items: flex-start; max-width: 36ch; font-size: .8125rem; line-height: 1.5; font-weight: 600; color: var(--muted); } .way-hint .icon { width: 16px; height: 16px; margin-top: 1px; } .way-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } .way-link { border: 0; background: none; padding: 0; font: 700 .875rem var(--font-b); color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .way-link:hover { color: var(--ink); } .way-res .shop-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .way-back-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: .875rem; font-weight: 700; color: var(--ink-2); text-decoration: none; } .shop-hero--small { padding-bottom: clamp(28px, 4vw, 44px); } @media (max-width: 860px) { .way { padding-top: 104px; min-height: 0; } .way__steps span { display: none; } .way-opt > button, .way-opt > a { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; } .way-opt__thumb { width: 52px; height: 52px; border-radius: 16px; } .way-opt__go { width: 40px; height: 40px; } .way-res__head { grid-template-columns: 1fr; } .way-res__actions { align-items: stretch; } .way-cta { justify-content: center; } .way-res .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .way-opt, .way-res, .way__sentence .is-new { animation: none; } } /* ═══════════════════════════════════════════════════════════ 31. Produktseite: Frühstücksbox-Infos, Karten-Buttons, Beschreibung ═══════════════════════════════════════════════════════════ */ /* Warenkorb-Button in Produktkarten – gegen WooCommerce-Standard absichern (auch Warenkorb/Kasse) */ .shop-card a.button.shop-card__cart, .shop-card .button.shop-card__cart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: var(--pill); background: var(--ink); color: #fff; font: 800 .875rem/1.1 var(--font-b); text-decoration: none; white-space: nowrap; box-shadow: none; transition: transform .25s var(--ease), background .25s; } .shop-card a.button.shop-card__cart:hover { background: var(--ink); color: #fff; transform: translateY(-2px); } /* Beschreibung: alte Inline-Schriften und -Farben aus dem Editor neutralisieren */ .product-details .prose *, .product-buy__short * { font-family: inherit !important; color: inherit; background: none !important; } .product-details .prose h1, .product-details .prose h2, .product-details .prose h3, .product-details .prose h4 { font-family: var(--font-h) !important; font-weight: 800 !important; color: var(--ink) !important; letter-spacing: -.02em; } .product-details .prose [style*="font-size"] { font-size: inherit !important; } .product-details .prose [style*="margin"], .product-details .prose [style*="padding"] { margin: 0 0 .9em !important; padding: 0 !important; } .product-details .prose [style*="display:flex"], .product-details .prose [style*="display: flex"] { display: block !important; } /* Frühstücksbox: Gut zu wissen */ .box-info { margin-top: clamp(40px, 6vw, 72px); padding: clamp(28px, 4vw, 56px); border-radius: 44px; background: #fff; box-shadow: var(--shadow-card); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); } .box-info__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; } .box-info__head .h2 em { color: var(--c-breakfast); } .box-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; } .box-facts > div { padding: 18px 20px; border-radius: 24px; background: var(--cream); display: flex; flex-direction: column; gap: 8px; } .box-facts dt { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .box-facts dt .icon { color: var(--c-breakfast); } .box-facts dd { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: 1.1875rem; line-height: 1.2; color: var(--ink); } .box-flow { display: flex; flex-direction: column; gap: 22px; } .box-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .box-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; } .box-steps__num { grid-row: span 2; width: 44px; height: 44px; border-radius: 15px; background: var(--c-breakfast-l); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; } .box-steps h3 { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: 1.1875rem; line-height: 1.25; align-self: center; } .box-steps p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); } .box-extras { padding-top: 20px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 12px; } .box-extras__label { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .box-extra { display: flex; gap: 14px; align-items: flex-start; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); } .box-extra strong { display: block; color: var(--ink); } .box-extra__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 15px; background: var(--cream); color: var(--c-breakfast); display: flex; align-items: center; justify-content: center; } @media (max-width: 960px) { .box-info { grid-template-columns: 1fr; border-radius: 32px; } } @media (max-width: 520px) { .box-facts { grid-template-columns: 1fr 1fr; gap: 8px; } .box-facts > div { padding: 14px; border-radius: 18px; } .box-facts dd { font-size: 1rem; } } /* Wegweiser-Ergebnis mit Produkten: Infos links, Produkte rechts */ .way-res--products { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .way-res--products .way-res__info { position: sticky; top: calc(24px + var(--header-h) + 24px); transition: top .45s var(--ease); } body.nav-hidden .way-res--products .way-res__info { top: 24px; } .way-res--products .way-res__actions { align-items: flex-start; } .way-res--products .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .way-res--products .shop-card__text { display: none; } @media (max-width: 960px) { .way-res--products { grid-template-columns: 1fr; } .way-res--products .way-res__info { position: static; } } /* Produktseite: Menge + Button nebeneinander, mit Luft zu den Feldern darüber */ .product-buy__form .buy-row { flex-basis: 100%; width: 100%; display: flex; align-items: stretch; gap: 12px; margin-top: 18px; padding-top: 20px; border-top: 1px dashed var(--line); } .product-buy__form .buy-row .quantity { flex: 0 0 auto; margin: 0; } .product-buy__form .buy-row .quantity input.qty { width: 84px; height: 100%; min-height: 56px; padding: 0 8px; font-size: 1.125rem; } .product-buy__form .buy-row .single_add_to_cart_button { flex: 1; margin: 0; } @media (max-width: 860px) { .product-buy__form .buy-row .single_add_to_cart_button { flex-basis: auto; } } /* ═══════════════════════════════════════════════════════════ Wegweiser: Antwortkarte (Schritt 3) – Inhalte aus „Shop → Wegweiser“ ═══════════════════════════════════════════════════════════ */ .way-ans { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: 44px; background: #fff; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(30, 20, 24, .45); animation: way-rise .6s var(--ease) both; } .way-ans__media { position: relative; min-height: 480px; background: #F4EBE2 center / cover no-repeat; } .way-ans__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 20, 24, .62), transparent 55%); } .way-ans__live { position: absolute; z-index: 1; top: 22px; left: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 12px; border-radius: var(--pill); background: #fff; color: var(--ink); font-size: .8125rem; font-weight: 800; } .way-ans__live i { width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 4px rgba(46, 158, 91, .18); } .way-ans__cap { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 26px; color: #fff; } .way-ans__cap small { display: block; font-size: .8125rem; font-weight: 700; opacity: .88; } .way-ans__cap strong { display: block; margin-top: 4px; font-family: var(--font-h); font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.035em; } .way-ans__body { padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 22px; min-width: 0; } .way-ans__hello { font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-strawberry); } .way-ans__lead { margin: -10px 0 0; font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; } .way-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .way-facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .way-facts--1 { grid-template-columns: minmax(0, 1fr); } .way-fact { padding: 14px 14px 16px; border-radius: 22px; background: #F4EBE2; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .way-fact .icon { width: 18px; height: 18px; color: var(--ink-2); } .way-fact small { font-size: .75rem; font-weight: 700; color: var(--muted); } .way-fact strong { font-family: var(--font-h); font-weight: 800; font-size: 1.125rem; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; } .way-fact.is-hi { background: var(--ink); color: #fff; } .way-fact.is-hi .icon { color: var(--c-strawberry-l); } .way-fact.is-hi small { color: rgba(255, 255, 255, .6); } .way-block { display: flex; flex-direction: column; gap: 10px; } .way-block__title { font-size: .8125rem; font-weight: 800; color: var(--ink); } .way-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; } .way-how--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .way-how::before { content: ''; position: absolute; left: 16px; right: calc(100% / 3 - 16px); top: 15px; height: 2px; background: repeating-linear-gradient(90deg, var(--faint, #C9BEC1) 0 6px, transparent 6px 12px); } .way-how--2::before { right: calc(50% - 16px); } .way-how--1::before { display: none; } .way-how li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-right: 10px; font-size: .84375rem; line-height: 1.4; color: var(--ink-2); font-weight: 600; } .way-how li b { width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--c-strawberry); color: var(--c-strawberry-d); display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 800; } .way-how li:first-child b { background: var(--c-strawberry); color: #fff; box-shadow: none; } .way-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .way-items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .way-items--1 { grid-template-columns: minmax(0, 1fr); } .way-item { border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; } .way-item:hover { color: var(--ink); transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), 0 16px 30px -22px rgba(30, 20, 24, .5); } .way-item__img { aspect-ratio: 4 / 3; background: #F4EBE2 center / cover no-repeat; } .way-items--1 .way-item { flex-direction: row; } .way-items--1 .way-item__img { width: 38%; aspect-ratio: auto; min-height: 120px; } .way-items--1 .way-item > span:not(.way-item__img) { flex: 1; } .way-item__txt { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .way-item__txt b { font-size: .84375rem; line-height: 1.25; } .way-item__txt small { font-size: .78125rem; font-weight: 800; color: var(--muted); } .way-item__go { margin: 6px 12px 12px; display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; font-weight: 800; color: var(--c-strawberry); } .way-item__go .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); } .way-item:hover .way-item__go .icon { transform: translateX(3px); } .way-items--1 .way-item { display: grid; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: 1fr auto; } .way-items--1 .way-item__img { grid-row: span 2; width: auto; } .way-ans__go { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .way-go { min-height: 64px; padding: 0 10px 0 28px; border-radius: var(--pill); background: var(--c-strawberry); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 1.0625rem; font-weight: 800; text-decoration: none; box-shadow: 0 18px 34px -20px var(--c-strawberry-d); transition: background .25s; } .way-go:hover { color: #fff; background: var(--c-strawberry-d); } .way-go__arr { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; transition: transform .35s var(--ease); } .way-go:hover .way-go__arr { transform: translateX(3px); } .way-go--dark { background: var(--ink); box-shadow: none; } .way-go--dark:hover { background: var(--ink-2); } .way-ans__meta { display: flex; align-items: center; gap: 8px; padding-left: 6px; font-size: .8125rem; font-weight: 600; color: var(--muted); } .way-ans__meta .icon { width: 16px; height: 16px; flex-shrink: 0; } .way-restart { margin-top: 22px; } @media (max-width: 860px) { .way-ans { grid-template-columns: 1fr; border-radius: 34px; } .way-ans__media { min-height: 220px; } .way-facts { grid-template-columns: 1fr 1fr; } .way-facts--1 { grid-template-columns: 1fr; } .way-fact.is-hi { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; } .way-fact.is-hi .icon { display: none; } .way-facts--2 .way-fact.is-hi { grid-column: auto; flex-direction: column; align-items: flex-start; } .way-how, .way-how--2 { grid-template-columns: 1fr; gap: 10px; } .way-how::before, .way-how--2::before { left: 15px; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--faint, #C9BEC1) 0 6px, transparent 6px 12px); } .way-how li { flex-direction: row; align-items: center; gap: 12px; } .way-items { grid-template-columns: 1fr 1fr; } .way-items--1 { grid-template-columns: 1fr; } .way-items--3 .way-item:nth-child(3) { display: none; } .way-go { min-height: 60px; padding-left: 22px; font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { .way-ans { animation: none; } } /* ═══════════════════════════════════════════════════════════ Footer: Google-Bewertung unter den Links (Menü klappt nach oben) ═══════════════════════════════════════════════════════════ */ .footer__rating { display: flex; justify-content: flex-end; margin-top: calc(clamp(28px, 4vw, 56px) * -1 + 4px); } /* hebt den großen Footer-Abstand auf → sitzt direkt unter den Links */ .f-rating { position: relative; } .f-rating > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 10px 7px 8px; margin-right: -10px; border-radius: var(--pill); font-size: .8125rem; font-weight: 700; color: rgba(255, 255, 255, .72); transition: background .2s, color .2s; user-select: none; } .f-rating > summary::-webkit-details-marker { display: none; } .f-rating > summary:hover, .f-rating[open] > summary { background: rgba(255, 255, 255, .08); color: #fff; } .f-rating > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .f-rating__g { width: 16px; height: 16px; flex-shrink: 0; } .f-rating__num { color: #fff; font-weight: 800; } .f-rating__stars { position: relative; display: inline-block; width: 72px; height: 13.5px; flex-shrink: 0; color: rgba(255, 255, 255, .22); } .f-rating__s { position: absolute; left: 0; top: 0; width: 72px !important; max-width: none !important; height: 13.5px !important; fill: currentColor; } .f-rating__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #F5B400; } .f-rating__chev { opacity: .6; transform: rotate(180deg); transition: transform .25s var(--ease); } .f-rating[open] .f-rating__chev { transform: none; } .f-rating__menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; min-width: 230px; padding: 6px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); display: flex; flex-direction: column; animation: f-rating-pop .25s var(--ease) both; } @keyframes f-rating-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .f-rating__menu small { display: block; padding: 8px 12px 4px; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .f-rating__menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: .875rem; font-weight: 700; color: var(--ink) !important; text-decoration: none; } .f-rating__menu a:hover { background: #F4EBE2; } .f-rating__menu a .icon { opacity: .45; flex-shrink: 0; } @media (max-width: 860px) { .footer__rating { justify-content: flex-start; margin-top: calc(clamp(28px, 4vw, 56px) * -1 + 10px); } .f-rating > summary { margin-right: 0; margin-left: -8px; } .f-rating__menu { right: auto; left: 0; } } @media (prefers-reduced-motion: reduce) { .f-rating__menu { animation: none; } }