/* ═══════════════════════════════════════════════════════════ 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; } /* Einheitlich: lange Wörter in allen Überschriften und Kachel-Titeln sauber trennen statt überstehen */ .h1, .h2, .h3, .world__title, .philo__title, h1, h2, h3, h4, .mega-card__title, .mega-link strong, .info-jobs__title, .season-mini strong, .footer__title, .stories-tab strong, .berry-card__body strong, .story-teaser__badge strong, .moment--insta strong, .feature__title, .motto-card__title, .price-card__title, .finder__info strong, .finder__detail-text strong, .step strong, .bento__item strong, .timeline__step strong, .chapter__facts strong, .hero-note strong, .box-card__title, .notice-pill__text strong, .voucher__title, .job-card__title, .product-tile strong, .season-slide__title, .family__fact strong, .discover-card__title, .recipe-card__title, .lead-option__text strong, .spotlight__title, .shop-card__title, .gift-strip__text strong, .mm-img strong, .way-opt__txt strong, .way-ans__cap strong, .way-fact strong, .way-item__txt b, .acc summary, .faq summary, .box-steps h3 { overflow-wrap: break-word; -webkit-hyphens: auto; 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: env(safe-area-inset-top, 0px); 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__sticker--text strong { font-size: 2.125rem; letter-spacing: -.03em; white-space: nowrap; } .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; max-width: 100%; } .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: weiße Karte, links ein Symbol im Kreis (grün = erledigt, rot = Fehler, orange = Hinweis) */ .woocommerce-notices-wrapper:empty { display: none; } body .woocommerce-message, body .woocommerce-info, body .woocommerce-error { position: relative; list-style: none; margin: 0 0 24px; padding: 12px 14px 12px 66px; min-height: 64px; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; outline: 0; } body .woocommerce-message::before, body .woocommerce-info::before, body .woocommerce-error::before { content: ''; position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; margin: 0; border-radius: 50%; background-color: #FFF3E8; background-repeat: no-repeat; background-position: center; background-size: 22px 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A3408' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.5'/%3E%3C/svg%3E"); } body .woocommerce-message::before { background-color: #E6F5EC; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B3E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); } body .woocommerce-error::before { background-color: #FFF0F2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E1230' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E"); } body .woocommerce-message::after, body .woocommerce-info::after, body .woocommerce-error::after { display: none; } body .woocommerce-error { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; } body ul.woocommerce-error { margin-left: 0; padding: 12px 14px 12px 66px !important; list-style: none !important; } body .woocommerce-error li { margin: 0; padding: 0; list-style: none; } body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: inherit; text-decoration: underline; text-underline-offset: 3px; } body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button { order: 2; float: none; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; margin: 0 0 0 auto; padding: 0 18px; border: 0; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: .875rem; font-weight: 800; line-height: 1; white-space: nowrap; text-decoration: none; } body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 600px) { body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button { flex: 1 1 100%; justify-content: center; margin-left: 0; } } /* ═══════════════════════════════════════════════════════════ 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; } } /* ═══════════════════════════════════════════════════════════════ SAISONSTART-ERINNERUNG: Glocke im Menü + Fenster ═══════════════════════════════════════════════════════════════ */ .rem-bell { position: relative; width: 50px; height: 50px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s, color .25s; } .rem-bell:hover, .rem-bell:focus-visible { background: var(--ink); color: #fff; } .rem-bell .icon { transform-origin: 50% 15%; } .rem-bell:hover .icon { animation: rem-ring .9s var(--ease); } @keyframes rem-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } } .rem-bell__dot { position: absolute; top: 11px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-strawberry); box-shadow: 0 0 0 2px var(--cream); transition: box-shadow .25s; } .rem-bell:hover .rem-bell__dot { box-shadow: 0 0 0 2px var(--ink); } .rem-bell__dot[hidden] { display: none; } .rem-tip { position: absolute; top: calc(100% + 12px); right: -8px; z-index: 30; width: 250px; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: #fff; font-size: .8125rem; line-height: 1.45; font-weight: 600; text-align: left; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .25s var(--ease); } .rem-tip::before { content: ''; position: absolute; top: -6px; right: 27px; width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; } .rem-tip b { display: block; font-size: .875rem; margin-bottom: 2px; } .rem-tip small { color: rgba(255, 255, 255, .6); font-weight: 600; font-size: .75rem; } @media (hover: hover) { .rem-bell:hover .rem-tip { opacity: 1; transform: none; } } @media (max-width: 1100px) { .rem-bell { width: 44px; height: 44px; } .rem-bell__dot { top: 9px; right: 10px; } .rem-tip { display: none; } } /* Fenster */ .rem { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 24px; } .rem[hidden] { display: none; } .rem__scrim { position: absolute; inset: 0; background: rgba(30, 20, 24, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; } .rem.is-open .rem__scrim { opacity: 1; } .rem__modal { position: relative; width: min(880px, 100%); max-height: calc(100svh - 48px); overflow: auto; overscroll-behavior: contain; border-radius: 40px; background: linear-gradient(90deg, var(--ink) 0 330px, var(--cream) 330px); display: grid; grid-template-columns: 330px minmax(0, 1fr); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(18px) scale(.98); transition: transform .45s var(--ease), opacity .3s; } .rem.is-open .rem__modal { opacity: 1; transform: none; } .rem__close { position: absolute; z-index: 3; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -10px rgba(30, 20, 24, .5); } .rem__grab { display: none; } .rem__side { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 34px 30px; display: flex; flex-direction: column; gap: 18px; } .rem__side::before { content: ''; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(214, 51, 79, .5), transparent 70%); } .rem__side > * { position: relative; } .rem__icon { width: 58px; height: 58px; border-radius: 20px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; } .rem__title { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: 2.375rem; line-height: .95; letter-spacing: -.045em; color: #fff; } .rem__title em { font-style: normal; color: var(--c-strawberry-l); } .rem__side p { margin: 0; color: rgba(255, 255, 255, .7); line-height: 1.55; font-size: .9063rem; } .rem-year { margin-top: auto; display: flex; flex-direction: column; gap: 6px; } .rem-year__months { display: grid; grid-template-columns: repeat(12, 1fr); font-size: .6rem; font-weight: 800; color: rgba(255, 255, 255, .45); text-align: center; } .rem-year__track { position: relative; height: calc(var(--lanes, 2) * 9px + 26px); } .rem-year__track::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: calc(var(--lanes, 2) * 9px - 3px); border-radius: 6px; background: rgba(255, 255, 255, .08); } .rem-year__seg { position: absolute; top: calc(4px + var(--lane) * 9px); height: 6px; border-radius: 6px; } .rem-year__today { position: absolute; top: 0; width: 2px; height: calc(var(--lanes, 2) * 9px + 4px); background: #fff; border-radius: 2px; } .rem-year__today span { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: .625rem; font-weight: 800; white-space: nowrap; } .rem__main { padding: 34px 32px 30px; display: flex; flex-direction: column; background: var(--cream); } .rem__form { display: flex; flex-direction: column; gap: 14px; } .rem__q { margin: 0; padding-right: 54px; font-family: var(--font-b); font-size: .8125rem; font-weight: 800; color: var(--ink); } .rem__notice { margin: 0 54px 0 0; padding: 12px 14px; border-radius: 16px; background: #FFF0F2; color: var(--c-strawberry-d); font-size: .8125rem; font-weight: 700; line-height: 1.45; } .rem__notice[hidden] { display: none; } .rem-seasons { display: flex; flex-direction: column; gap: 8px; } .rem-s { position: relative; display: block; } .rem-s input { position: absolute; opacity: 0; pointer-events: none; } .rem-s > span { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s, transform .25s var(--ease); } .rem-s > span:hover { transform: translateX(3px); } .rem-s__img { width: 50px; height: 50px; border-radius: 16px; background: var(--g); } .rem-s__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .rem-s__txt b { font-size: .9375rem; font-weight: 800; color: var(--ink); } .rem-s__txt small { font-size: .7813rem; font-weight: 700; color: var(--muted); } .rem-s__check { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(30, 20, 24, .15); display: grid; place-items: center; color: #fff; transition: background .2s, box-shadow .2s; } .rem-s__check .icon { stroke-width: 3; opacity: 0; transition: opacity .2s; } .rem-s input:checked + span { box-shadow: inset 0 0 0 2px var(--c); } .rem-s input:checked + span .rem-s__check { background: var(--c); box-shadow: none; } .rem-s input:checked + span .rem-s__check .icon { opacity: 1; } .rem-s input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; } .rem-mail { display: flex; gap: 8px; margin-top: 4px; } .rem-mail input { flex: 1; min-width: 0; height: 58px; padding: 0 22px; border: 0; border-radius: var(--pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 600 1rem var(--font-b); color: var(--ink); } .rem-mail input:focus { outline: 2px solid var(--ink); outline-offset: 0; } .rem-mail input.is-invalid { box-shadow: inset 0 0 0 2px var(--c-strawberry); } .rem-mail button { height: 58px; padding: 0 26px; border: 0; border-radius: var(--pill); background: var(--c-strawberry); color: #fff; font: 800 .9375rem var(--font-b); white-space: nowrap; cursor: pointer; box-shadow: 0 16px 30px -18px var(--c-strawberry-d); transition: background .2s, opacity .2s; } .rem-mail button:hover { background: var(--c-strawberry-d); } .rem-mail button[disabled] { opacity: .6; cursor: progress; } .rem-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .75rem; line-height: 1.5; color: var(--muted); font-weight: 600; cursor: pointer; } .rem-consent input { margin: 2px 0 0; accent-color: var(--ink); flex-shrink: 0; width: 16px; height: 16px; } .rem-consent.is-invalid { color: var(--c-strawberry-d); } .rem-consent a { color: inherit; text-decoration: underline; } .rem__error { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--c-strawberry-d); } .rem__error[hidden] { display: none; } .rem__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .rem__done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 40px 20px; min-height: 420px; } .rem__done[hidden] { display: none; } .rem__done-icon { width: 74px; height: 74px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 16px 30px -18px rgba(30, 20, 24, .5); } .rem__done h3 { margin: 8px 0 0; font-family: var(--font-h); font-weight: 800; font-size: 1.875rem; letter-spacing: -.04em; color: var(--ink); } .rem__done p { margin: 0; color: var(--ink-2); line-height: 1.55; max-width: 34ch; } .rem__tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } .rem__tags span { padding: 6px 12px; border-radius: var(--pill); background: #fff; font-size: .7813rem; font-weight: 800; box-shadow: inset 0 0 0 1px var(--line); } .rem__hint { font-size: .75rem; font-weight: 600; color: var(--muted); margin-top: 6px; } .rem__hint[hidden] { display: none; } html.rem-lock, html.rem-lock body { overflow: hidden; } .rem-lock :is(.mobile-cta, .pagenav-btn, .buy-bar, .cart-toast) { visibility: hidden !important; } /* Handy: Blatt von unten */ @media (max-width: 760px) { .rem { padding: 0; place-items: end stretch; } .rem__modal { grid-template-columns: 1fr; width: 100%; max-height: calc(100dvh - 40px); border-radius: 34px 34px 0 0; background: var(--ink); opacity: 1; transform: translateY(100%); transition: transform .45s var(--ease); } .rem__modal.is-dragging { transition: none; } .rem.is-done .rem__modal { background: var(--cream); } .rem.is-done .rem__grab { background: rgba(30, 20, 24, .18); } .rem.is-open .rem__modal { transform: none; } .rem__grab { display: block; position: absolute; z-index: 3; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .35); touch-action: none; } .rem__grab::before { content: ''; position: absolute; inset: -14px -40px; } /* größere Greif-Fläche */ .rem__side { padding: 30px 24px 22px; gap: 12px; } .rem__icon { display: none; } .rem__title { font-size: 1.875rem; padding-right: 50px; } .rem__side p { font-size: .8438rem; } .rem-year { margin-top: 6px; } .rem__close { top: 14px; right: 14px; width: 40px; height: 40px; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; } .rem__main { padding: 20px 18px calc(28px + env(safe-area-inset-bottom, 0px)); } .rem__q, .rem__notice { padding-right: 0; margin-right: 0; } .rem-s > span { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 6px 12px 6px 6px; border-radius: 20px; gap: 12px; } .rem-s__img { width: 44px; height: 44px; border-radius: 14px; } .rem-mail { flex-direction: column; } .rem-mail input { flex: none; } .rem-mail button { width: 100%; } .rem__done { min-height: 340px; padding: 36px 18px 40px; } .rem.is-done .rem__side { display: none; } .rem.is-done .rem__close { background: #fff; color: var(--ink); } } @media (prefers-reduced-motion: reduce) { .rem__modal, .rem__scrim, .rem-bell .icon { transition: none !important; animation: none !important; } } /* Sicherheitsnetz: WooCommerce-Lightbox (PhotoSwipe) wird nicht verwendet */ .pswp { display: none !important; } /* Einfaches Produkt (ohne Varianten/Optionen): Menge + Button ohne Trennlinie, Box kompakter */ .product-buy__form.is-simple { padding: 14px; } .product-buy__form .buy-row.is-solo { margin-top: 0; padding-top: 0; border-top: 0; } /* Varianten: Preis steht groß oben (per JS), in der Box nur noch Lagerstatus / Beschreibung */ .product-buy__form.has-live-price .woocommerce-variation-price { display: none; } .product-buy__form .woocommerce-variation:empty, .product-buy__form .woocommerce-variation-description:empty { display: none; } .product-buy__price { transition: opacity .2s; } .product-buy__price .price { font: inherit; color: inherit; } /* „Zurücksetzen“ klein rechts neben dem Feldnamen statt unter dem Auswahlfeld */ .product-buy__form table.variations td.value { position: relative; } .product-buy__form table.variations .reset_variations { position: absolute; top: -30px; right: 0; font-size: .8125rem; font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .product-buy__form table.variations .reset_variations:hover { color: var(--ink); } /* ═══════════════════════════════════════════════════════════ Events am Kürbishof (Motto-Mittwoch + Specials) – inc/events.php ═══════════════════════════════════════════════════════════ */ .ev2__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.4vw, 48px); } .ev2__head .lead { max-width: 480px; } .ev2__filter { display: flex; gap: 4px; padding: 5px; border-radius: var(--pill); background: #fff; box-shadow: var(--shadow-card); } .ev2__filter button { height: 42px; padding: 0 18px; border: 0; border-radius: var(--pill); background: none; font: 800 .875rem var(--font-b); color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; } .ev2__filter button.on { background: var(--ink); color: #fff; } .ev2 { position: relative; } .ev2 [hidden] { display: none !important; } .ev2__anchor { position: absolute; top: 0; left: 0; } /* Kleinteile */ .ev2-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--pill); font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--as); color: var(--ad); white-space: nowrap; } .ev2-tag--special { background: var(--btn-bg); color: var(--ink); } .ev2-tag--next { background: var(--status); color: #fff; } .ev2-tag--next::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; } @keyframes pulse { 50% { opacity: .35; } } .ev2-stamp { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 9px 13px 8px; border-radius: 18px; background: #fff; color: var(--ink); line-height: 1.05; box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); transform: rotate(-4deg); } .ev2-stamp small { font-size: .625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ad); } .ev2-stamp b { font-family: var(--font-h); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; } .ev2-ai { position: absolute; right: 12px; bottom: 12px; padding: 4px 9px; border-radius: var(--pill); background: rgba(30,20,24,.5); color: #fff; font-size: .625rem; font-weight: 700; } .ev2-pic { position: absolute; inset: 0; background: var(--grad) center / cover; transition: transform .6s var(--ease); } /* A · Als Nächstes */ .ev2-a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; } .ev2-next { position: sticky; top: 110px; } .ev2-hero { display: flex; flex-direction: column; width: 100%; padding: 10px; border: 0; border-radius: var(--r-l); background: #fff; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ad) 45%, transparent); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: transform .35s var(--ease); } .ev2-hero:hover { transform: translateY(-4px); } .ev2-hero:hover .ev2-pic { transform: scale(1.04); } .ev2-hero__img { position: relative; height: clamp(240px, 26vw, 330px); border-radius: calc(var(--r-l) - 10px); overflow: hidden; } .ev2-hero__body { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 16px; } .ev2-hero__top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ev2-hero__when { font-size: .875rem; font-weight: 800; color: var(--ad); } .ev2-hero__title { font-family: var(--font-h); font-size: clamp(1.75rem, 2.4vw, 2.375rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; } .ev2-hero__text { display: block; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); } .ev2-hero__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding-top: 16px; border-top: 1px dashed var(--line); } .ev2-incl { font-size: .875rem; font-weight: 800; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; } .ev2-incl svg { color: var(--status); } .ev2-price { font-family: var(--font-h); font-weight: 800; font-size: 1.875rem; letter-spacing: -.03em; line-height: 1; } .ev2-price small { display: block; font-family: var(--font-b); font-size: .75rem; font-weight: 700; letter-spacing: 0; color: var(--muted); margin-bottom: 4px; } .ev2-more { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--pill); background: var(--ink); color: #fff; font-weight: 800; font-size: .9375rem; white-space: nowrap; } .ev2-more--buy { background: var(--btn-bg); color: var(--ink); } /* A · Programm-Liste */ .ev2-list { display: flex; flex-direction: column; gap: 10px; } .ev2-list__label { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 2px 6px; } .ev2-list__rows { display: flex; flex-direction: column; gap: 10px; } .ev2-row { display: grid; grid-template-columns: 64px 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 10px 14px 10px 10px; border: 0; border-radius: var(--r-m); background: #fff; box-shadow: var(--shadow-card); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s; } .ev2-row:hover { transform: translateX(4px); box-shadow: var(--shadow-pop); } .ev2-date { width: 64px; height: 72px; border-radius: 18px; background: var(--as); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .ev2-date small { font-size: .625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ad); } .ev2-date b { font-family: var(--font-h); font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em; margin: 3px 0 2px; } .ev2-date span { font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .ev2-thumb { position: relative; width: 76px; height: 72px; border-radius: 16px; overflow: hidden; } .ev2-row__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ev2-row__title { font-family: var(--font-h); font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .ev2-row__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .8125rem; font-weight: 700; color: var(--muted); } .ev2-go { width: 42px; height: 42px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; flex: none; } .ev2-row.is-special { background: var(--ink); color: #fff; } .ev2-row.is-special .ev2-date { background: var(--btn-bg); } .ev2-row.is-special .ev2-date small, .ev2-row.is-special .ev2-date span { color: var(--ink); } .ev2-row.is-special .ev2-date b { color: var(--ink); } .ev2-row.is-special .ev2-row__meta { color: var(--on-dark); } .ev2-row.is-special .ev2-go { width: auto; padding: 0 16px; border-radius: var(--pill); background: var(--btn-bg); color: var(--ink); font-weight: 800; font-size: .8125rem; gap: 6px; display: inline-flex; align-items: center; height: 42px; } .ev2-row.is-past { opacity: .55; } .ev2-past { align-self: flex-start; margin-top: 4px; padding: 8px 6px; border: 0; background: none; font: 800 .875rem var(--font-b); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .ev2-past:hover { color: var(--ink); } .evm__panel .ev2-pic { border-radius: 0; } .evm__ai { position: absolute; left: 16px; bottom: 16px; padding: 4px 9px; border-radius: var(--pill); background: rgba(30,20,24,.5); color: #fff; font-size: .625rem; font-weight: 700; z-index: 2; } @media (max-width: 1080px) { .ev2-a { grid-template-columns: 1fr; } .ev2-next { position: static; } } @media (max-width: 600px) { .ev2__filter { width: 100%; } .ev2__filter button { flex: 1; padding: 0 10px; font-size: .8125rem; } .ev2-row { grid-template-columns: 58px minmax(0, 1fr) auto; padding: 8px 10px 8px 8px; gap: 12px; } .ev2-thumb { display: none; } .ev2-date { width: 58px; height: 66px; } .ev2-date b { font-size: 1.5rem; } .ev2-row__title { font-size: 1.0625rem; } .ev2-go { display: none; } .ev2-row.is-special .ev2-go { display: none; } .ev2-hero__foot .ev2-more { flex: 1; justify-content: center; } } /* Inkludiert-Liste im Detail-Fenster */ .evm__incl ul.ev2-incl-list { grid-template-columns: 1fr 1fr; } .evm__incl ul.ev2-incl-list li::before { display: none; } .ev2-incl-ic { width: 38px; height: 38px; border-radius: 12px; background: #fff; color: var(--ad); display: grid; place-items: center; flex: none; } .evm__note i { background: var(--btn-bg) !important; } @media (max-width: 600px) { .evm__incl ul.ev2-incl-list { grid-template-columns: 1fr; } } /* Detail-Fenster */ .evm{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px} .evm[hidden]{display:none} .evm__scrim{position:absolute;inset:0;background:rgba(30,20,24,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade-in .3s ease} .evm__panel{position:relative;width:min(980px,100%);max-height:calc(100svh - 48px);overflow:hidden auto;overscroll-behavior:contain;border-radius:40px;background:#fff;box-shadow:0 50px 100px -30px rgba(0,0,0,.6);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);animation:modal-in .45s var(--ease) both} .evm__img{position:relative;min-height:520px;margin:12px 0 12px 12px;border-radius:30px;overflow:hidden} .evm__stamp{position:absolute;top:16px;left:16px;padding:12px 16px 10px;border-radius:20px;background:#fff;color:var(--ink);text-align:center;line-height:1;z-index:2} .evm__stamp small{display:block;font-size:.625rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .evm__stamp b{display:block;font-family:var(--font-h);font-size:2.1rem;font-weight:800;letter-spacing:-.04em;margin:3px 0} .evm__stamp span{font-size:.75rem;font-weight:800;color:var(--a)} .evm__body{padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;gap:16px} .evm__close{position:absolute;top:16px;right:16px;z-index:3;width:46px;height:46px;border:0;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;cursor:pointer} .evm__title{margin:0;font-family:var(--font-h);font-size:clamp(2rem,3vw,2.8rem);line-height:1;letter-spacing:-.04em;font-weight:800;padding-right:40px} .evm__text{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--ink-2)} .evm__meta{display:flex;flex-wrap:wrap;gap:8px} .evm__meta span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--pill);background:var(--cream);font-weight:800;font-size:.875rem} .evm__meta svg{color:var(--a)} .evm__incl{padding:20px;border-radius:var(--r-m);background:var(--as)} .evm__incl h4{margin:0 0 12px;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ad)} .evm__incl ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px} .evm__incl li{display:flex;gap:10px;align-items:center;font-weight:700;font-size:.9375rem} .evm__incl li::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--a)} .evm__buy{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .evm__price{font-family:var(--font-h);font-size:2.2rem;font-weight:800;letter-spacing:-.04em;line-height:1} .evm__price small{display:block;font-family:var(--font-b);font-size:.8125rem;font-weight:700;color:var(--muted);letter-spacing:0;margin-bottom:6px} .evm__price span{font-size:.9375rem;color:var(--muted);font-weight:700;letter-spacing:0} .evm__ctas{display:flex;gap:8px;flex-wrap:wrap} .evm__cal{display:inline-flex;align-items:center;gap:8px;padding:14px 18px;border-radius:var(--pill);color:var(--ink);text-decoration:none;font-weight:800;font-size:.9375rem;box-shadow:inset 0 0 0 1.5px var(--line)} .evm__note{margin:0;font-size:.8125rem;font-weight:700;color:var(--muted);display:flex;gap:8px;align-items:center} .evm__note i{width:8px;height:8px;border-radius:50%;background:var(--c-strawberry)} .evm__nav{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:16px} .evm__nav button{border:0;background:none;font:inherit;font-weight:800;font-size:.875rem;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0} .evm__nav button:disabled{opacity:.3;cursor:default} @media (max-width:1080px){ .evm__panel{grid-template-columns:1fr}.evm__img{min-height:300px;margin:10px 10px 0} } @media (max-width:600px){ .evm{padding:0;align-items:flex-end} .evm__panel{border-radius:32px 32px 0 0;max-height:92svh;animation:sheet-in .45s var(--ease) both} .evm__img{min-height:230px} .evm__buy{flex-direction:column;align-items:stretch} .evm__ctas{flex-direction:column} .evm__ctas>*{justify-content:center} } @keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}} .evm__tags { display: flex; gap: 8px; flex-wrap: wrap; } .evm__buy .evm__note { flex-basis: 100%; } .evm__buy .ev2-incl { font-size: 1rem; flex: 1 1 260px; } .ev2-row.is-past .ev2-go { display: none; } .evm__body > [data-evm-body] { display: flex; flex-direction: column; gap: 16px; flex: 1; } .ev2-past .icon { transition: transform .25s var(--ease); } .ev2-past.is-open .icon { transform: rotate(180deg); } /* Detail-Fenster mobil: Kauf-Bereich kompakt, Hinweis unter dem Button */ @media (max-width: 600px) { .evm__body > [data-evm-body] { flex: none; } .evm__buy { margin-top: 4px; padding-top: 4px; justify-content: flex-start; gap: 14px; } .evm__buy .evm__note { flex-basis: auto; order: 3; } .evm__buy .btn { align-self: stretch; justify-content: center; } .evm__buy .ev2-incl { flex: none; } } /* ═══════════════════════════════════════════════════════════ Warenkorb (klassisch) – woocommerce/cart/*.php Karten-Layout: Artikel links, Übersicht rechts. ═══════════════════════════════════════════════════════════ */ .wb-cart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 28px; align-items: start; font-size: 1rem; line-height: 1.5; color: var(--ink); } .wb-cart__side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; } .wb-card { background: #fff; border-radius: 28px; box-shadow: var(--shadow-card); padding: clamp(20px, 2.6vw, 30px); } .wb-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .prose .wb-card__title, .wb-card__title { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); } .wb-card__meta { font-size: .8125rem; font-weight: 600; color: var(--muted); white-space: nowrap; } /* Textseiten-Stile zurücksetzen */ .prose .wb-cart :is(p, ul, ol, dl, table) { margin: 0; } .prose .wb-cart ul { padding: 0; list-style: none; } .prose .wb-cart li { margin: 0; } .prose .wb-cart a { font-weight: inherit; text-decoration: none; } .prose .wb-cart img { border-radius: 0; } .prose .wb-cart table { display: table; width: 100%; font-size: inherit; border-collapse: collapse; overflow: visible; } .prose .wb-cart :is(th, td) { padding: 0; border: 0; } /* Artikel */ .wb-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; padding: 20px 0; border-top: 1px dashed var(--line); } .wb-card__head + .wb-item { border-top: 0; padding-top: 0; } .wb-item__img :is(a, img) { display: block; } .prose .wb-item__img img, .wb-item__img img { width: 92px; height: 92px; object-fit: cover; border-radius: 20px; } .wb-item__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .wb-item__cat { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--a); } .wb-item__name, .prose .wb-item__name a { font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); } .prose .wb-item__name a:hover { color: var(--ad); } /* Zusatzangaben (Datum, Uhrzeit …) als Pills */ .wb-item dl.variation { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; } .wb-item dl.variation dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wb-item dl.variation dd { display: inline-flex; align-items: flex-start; gap: 7px; margin: 0; padding: 6px 12px; border-radius: 16px; background: var(--cream); font-size: .8125rem; font-weight: 700; line-height: 1.4; color: var(--ink-2); } .wb-item dl.variation dd :is(p, div) { margin: 0; } .wb-item dl.variation dd { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.5'/%3E%3C/svg%3E"); } .wb-item dl.variation dd::before { content: ''; flex: none; width: 15px; height: 15px; margin-top: 1px; background: var(--muted-2); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .wb-item dl.variation dd[class*="variation-Datum"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); } .wb-item dl.variation dd:is([class*="variation-Uhrzeit"], [class*="variation-Zeit"]) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } .wb-item dl.variation dd[class*="variation-Kategorie"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); } .wb-item .backorder_notification { font-size: .8125rem; font-weight: 700; color: var(--muted); } /* Menge + Entfernen */ .wb-item__row { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .wb-qty { display: inline-flex; align-items: center; height: 44px; padding: 4px; border-radius: var(--pill); background: var(--cream); } .wb-qty .quantity { margin: 0; } .wb-qty__btn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s; } .wb-qty__btn:hover { background: #fff; } .wb-qty__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } .text-page--wide .wb-qty input.qty, .wb-qty input.qty { width: 40px; height: 36px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: var(--font-b) !important; font-size: 1rem; font-weight: 800; color: var(--ink); text-align: center; -moz-appearance: textfield; appearance: textfield; } .wb-qty input.qty::-webkit-outer-spin-button, .wb-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wb-qty input.qty:focus { outline: 0; } .wb-qty.is-fixed .quantity, .wb-qty:has(.wb-qty__fixed) input.qty { display: none; } .wb-qty__fixed { min-width: 36px; padding: 0 8px; font-weight: 800; text-align: center; } .wb-qty__raw { display: none !important; } .wb-qty:has(.wb-qty__fixed) { background: transparent; padding: 0; } .wb-qty:has(.wb-qty__fixed) .wb-qty__fixed { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--pill); background: var(--cream); } /* FooEvents: Link „weitere Tickets für diesen Termin“ im Zeitfenster */ :is(.wb-item, .wb-mini) .fooevents-add-more-bookings { margin-left: 6px; color: var(--ad); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .prose .wb-item__remove, .wb-item__remove { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--pill); font-size: .8125rem; font-weight: 700 !important; color: var(--muted) !important; transition: background .2s, color .2s; } .wb-item__remove:hover { background: var(--as); color: var(--ad) !important; } .wb-item__price { text-align: right; display: flex; flex-direction: column; gap: 2px; } .wb-item__total { font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; white-space: nowrap; } .wb-item__unit { font-size: .75rem; font-weight: 600; color: var(--muted); white-space: nowrap; } /* „Warenkorb aktualisieren“: mit JavaScript automatisch → Button nur ohne JS sichtbar */ .wb-cart__actions { margin-top: 18px; } .wb-cart-js .wb-cart__actions { margin: 0; } .wb-cart-js .wb-cart__update { position: absolute; width: 1px; height: 1px; padding: 0 !important; overflow: hidden; clip-path: inset(50%); } .prose .wb-cart__back, .wb-cart__back { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0 4px; padding: 10px 14px 10px 10px; border-radius: var(--pill); font-size: .9375rem; font-weight: 700 !important; color: var(--muted); transition: background .2s, color .2s; } .wb-cart__back:hover { background: #fff; color: var(--ink); } /* Gutschein */ .wb-coupon { margin-bottom: 4px; } .wb-coupon summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--cream); font-size: .9375rem; font-weight: 700; cursor: pointer; list-style: none; user-select: none; transition: background .2s; } .wb-coupon summary::-webkit-details-marker { display: none; } .wb-coupon summary:hover { background: #F4EBE2; } .wb-coupon summary span { display: inline-flex; align-items: center; gap: 10px; } .wb-coupon summary > .icon { color: var(--muted); transition: transform .25s var(--ease); } .wb-coupon[open] summary > .icon { transform: rotate(180deg); } .wb-coupon__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .text-page--wide .wb-coupon__form input.input-text, .wb-coupon__form input.input-text { flex: 1 1 140px; min-width: 0; height: 56px; padding: 0 18px !important; border: 2px solid transparent !important; border-radius: 16px !important; background: var(--cream) !important; box-shadow: none; font-family: var(--font-b) !important; font-size: 1rem; font-weight: 600; color: var(--ink); } .text-page--wide .wb-coupon__form input.input-text:focus, .wb-coupon__form input.input-text:focus { border-color: var(--a) !important; background: #fff !important; outline: 0; } .text-page--wide .wb-coupon__form .button, .wb-coupon__form .button { flex: 0 0 auto; height: 56px; padding: 0 22px !important; border: 0 !important; border-radius: 16px !important; background: var(--ink) !important; color: #fff !important; font-family: var(--font-b) !important; font-size: .9375rem; font-weight: 800 !important; cursor: pointer; } /* Summen */ .wb-totals__table { margin-top: 14px !important; } .wb-totals__table tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 9px 0; } .wb-totals__table th { font-size: .9375rem; font-weight: 600; color: var(--ink-2); text-align: left; } .wb-totals__table td { font-size: .9375rem; font-weight: 700; color: var(--ink); text-align: right; margin-left: auto; } .wb-totals__table .cart-discount td { color: var(--status); } .prose .wb-totals__table a.woocommerce-remove-coupon { margin-left: 6px; font-size: .8125rem; font-weight: 700; color: var(--muted); text-decoration: underline; } .wb-totals__table .woocommerce-shipping-methods label { font-weight: 700; } .wb-totals__table .woocommerce-shipping-methods li + li { margin-top: 6px; } .wb-totals__table .woocommerce-shipping-methods input[type="radio"] { margin: 0 8px 0 0; accent-color: var(--ad); } .wb-totals__table .woocommerce-shipping-destination { margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--muted); } .wb-totals__table tr.shipping:has(input[type="hidden"][value^="pickup_location"], input[type="hidden"][value^="local_pickup"]) :is(th, .woocommerce-shipping-destination) { display: none; } .wb-totals__table tr.shipping:has(input[type="hidden"][value^="pickup_location"], input[type="hidden"][value^="local_pickup"]) td { margin-left: 0; text-align: left; font-weight: 600; color: var(--ink-2); } .prose .wb-totals__table .shipping-calculator-button { font-size: .8125rem; font-weight: 800; color: var(--ad); } .wb-totals__table .shipping-calculator-form { margin-top: 10px; text-align: left; } .wb-totals__table tr.order-total { margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--line); } .wb-totals__table tr.order-total th { font-size: 1rem; font-weight: 800; color: var(--ink); } .wb-totals__table tr.order-total td strong { font-family: var(--font-h); font-weight: 800; font-size: 2rem; letter-spacing: -.02em; line-height: 1; } .wb-totals__table tr.order-total td .includes_tax { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--muted); } .wb-totals__table tr.order-total td .includes_tax .amount { font-weight: 600; } /* Zur Kasse + Express-Zahlung */ .wb-totals .wc-proceed-to-checkout { margin-top: 18px; padding: 0; display: flex; flex-direction: column; } .text-page--wide .wb-checkout-btn, .wb-checkout-btn { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; margin: 0 !important; padding: 0 28px !important; border: 0 !important; border-radius: var(--pill) !important; background: var(--btn-bg) !important; color: var(--btn-fg) !important; font-family: var(--font-b) !important; font-size: 1.0625rem !important; font-weight: 800 !important; text-decoration: none !important; box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--btn-bg) 75%, transparent); transition: transform .25s var(--ease); } .wb-checkout-btn:hover { transform: translateY(-2px); } .wb-totals .wcpay-express-checkout-wrapper { margin: 0; padding: 0; } .wb-totals .wcpay-express-checkout-wrapper:has(#wcpay-express-checkout-element:not(:empty))::before { content: 'oder direkt'; display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); background: linear-gradient(var(--line), var(--line)) left center / calc(50% - 60px) 1px no-repeat, linear-gradient(var(--line), var(--line)) right center / calc(50% - 60px) 1px no-repeat; justify-content: center; } .wb-totals #wcpay-express-checkout-button-separator { display: none !important; } .prose .wb-cart .wb-trust, .wb-trust { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--line); list-style: none; font-size: .8125rem; font-weight: 600; color: var(--muted); } .wb-trust li { display: flex; align-items: center; gap: 8px; } .wb-trust .icon { color: var(--status); flex: none; } /* Laden (WooCommerce blockUI) */ .wb-cart .blockUI.blockOverlay { border-radius: 28px; background: rgba(255, 255, 255, .6) !important; } .wb-cart .blockUI.blockOverlay::before { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid var(--line); border-top-color: var(--ad); border-radius: 50%; animation: wb-spin .7s linear infinite; } @keyframes wb-spin { to { transform: rotate(360deg); } } /* Leerer Warenkorb */ .wb-cart-empty { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px); } .wb-cart-empty__icon { width: 84px; height: 84px; border-radius: 50%; background: var(--as); color: var(--ad); display: grid; place-items: center; margin-bottom: 6px; } .wb-cart-empty .cart-empty, .wb-cart-empty .woocommerce-info { margin: 0; padding: 0; min-height: 0; background: none; box-shadow: none; display: block; font-family: var(--font-h); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: var(--ink); } .wb-cart-empty .cart-empty::before { display: none; } .prose .wb-cart-empty__text, .wb-cart-empty__text { margin: 0; color: var(--muted); font-weight: 600; } .prose .wb-cart-empty .return-to-shop { margin: 14px 0 0; } .wb-cart-empty .wb-checkout-btn { width: auto; } @media (max-width: 960px) { .wb-cart { grid-template-columns: minmax(0, 1fr); gap: 16px; } .wb-cart__side { position: static; } } @media (max-width: 600px) { .wb-card { border-radius: 24px; padding: 18px; } .wb-item { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 18px 0; } .prose .wb-item__img img, .wb-item__img img { width: 72px; height: 72px; border-radius: 16px; } .wb-item__name, .prose .wb-item__name a { font-size: 1.125rem; } .wb-item__price { grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px; text-align: left; } .wb-item__total { font-size: 1.125rem; } .wb-item__remove span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .prose .wb-item__remove, .wb-item__remove { width: 44px; padding: 0; justify-content: center; } } /* ═══════════════════════════════════════════════════════════ Kasse (klassisch) – woocommerce/checkout/*.php Links nummerierte Karten, rechts „Deine Bestellung“. ═══════════════════════════════════════════════════════════ */ .wb-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 28px; align-items: start; font-size: 1rem; line-height: 1.5; color: var(--ink); counter-reset: wbstep; } .wb-co__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .wb-co__side { min-width: 0; } .wb-co__details, .wb-co .woocommerce-billing-fields { display: flex; flex-direction: column; gap: 16px; } .wb-co__details > [class^="col-"] { width: auto; float: none; } .wb-co__extra:not(:has(.form-row, #ship-to-different-address)) { display: none; } /* Textseiten-Stile zurücksetzen */ .prose .wb-co :is(p, ul, ol, dl, table) { margin: 0; } .prose .wb-co ul { padding: 0; list-style: none; } .prose .wb-co li { margin: 0; } .prose .wb-co a { text-decoration: none; } .prose .wb-co img { border-radius: 0; } .prose .wb-co table { display: table; width: 100%; font-size: inherit; border-collapse: collapse; overflow: visible; } .prose .wb-co :is(th, td) { padding: 0; border: 0; } .prose .wb-co h3 { margin: 0; } .wb-co fieldset { margin: 0; padding: 0 !important; border: 0; min-width: 0; } /* Nummerierte Karten */ .wb-co-step > .wb-card__head { justify-content: flex-start; align-items: center; } .wb-co-step > .wb-card__head::before { counter-increment: wbstep; content: counter(wbstep); width: 32px; height: 32px; border-radius: 50%; background: var(--as); color: var(--ad); display: grid; place-items: center; font-weight: 800; font-size: .875rem; flex: none; } .wb-co-step > .wb-card__head .wb-card__meta { margin-left: auto; } .wb-co__secure { display: inline-flex; align-items: center; gap: 6px; } .wb-co__secure .icon { color: var(--status); } .prose .wb-co__edit, .wb-co__edit { color: var(--ad); font-weight: 800; } .prose .wb-co .wb-co__hint, .wb-co__hint { margin: 10px 0 0 6px; font-size: .8125rem; font-weight: 600; color: var(--muted); } /* Felder: Raster + „schwebende“ Labels */ .wb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wb-fields > * { grid-column: 1 / -1; } .wb-fields > :is(.form-row-first, .form-row-last, [id$="_postcode_field"], [id$="_city_field"], #billing_email_field, #billing_phone_field) { grid-column: auto; } .wb-fields > .clear { display: none; } .wb-co .form-row { position: relative; margin: 0; padding: 0; float: none; width: auto; } .wb-co .form-row[style*="display: none"], .wb-co .form-row[style*="display:none"] { display: none; } .wb-co .woocommerce-input-wrapper { display: block; } .wb-co .form-row:has(> .woocommerce-input-wrapper) > label { position: absolute !important; left: 20px; right: 20px; top: 11px; z-index: 2; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; clip-path: none !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .75rem; font-weight: 700; line-height: 1.3; color: var(--muted); pointer-events: none; transition: top .18s var(--ease), font-size .18s var(--ease), color .18s; } .wb-co .form-row > label .required { display: none; } .wb-co .form-row > label .optional { font-weight: 600; } .text-page--wide .wb-co .form-row .input-text, .wb-co .form-row .input-text { display: block; width: 100%; height: 60px; margin: 0; padding: 26px 18px 8px !important; border: 2px solid transparent !important; border-radius: 16px !important; background: var(--cream) !important; box-shadow: none !important; font-family: var(--font-b) !important; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink); transition: border-color .2s, background .2s; -webkit-appearance: none; appearance: none; } .wb-co .form-row textarea.input-text { height: auto; min-height: 120px; padding-top: 30px !important; resize: vertical; } .wb-co .form-row .input-text::placeholder { color: transparent; } .text-page--wide .wb-co .form-row .input-text:focus, .wb-co .form-row .input-text:focus { border-color: var(--a) !important; background: #fff !important; outline: 0; } .wb-co .form-row:has(> .woocommerce-input-wrapper > .input-text:placeholder-shown:not(:focus)) > label { top: 20px; font-size: 1rem; font-weight: 600; } .wb-co .form-row:has(> .woocommerce-input-wrapper > textarea.input-text:placeholder-shown:not(:focus)) > label { top: 18px; } .wb-co .form-row:focus-within > label { color: var(--ad); } /* Land (select2) */ .wb-co .form-row .select2-container { display: block; width: 100% !important; } .text-page--wide .wb-co .select2-container .select2-selection--single, .wb-co .select2-container .select2-selection--single { height: 60px; border: 2px solid transparent !important; border-radius: 16px !important; background: var(--cream) !important; box-shadow: none; outline: 0; } .wb-co .select2-container--open .select2-selection--single, .wb-co .select2-container--focus .select2-selection--single { border-color: var(--a) !important; background: #fff !important; } .wb-co .select2-container .select2-selection--single .select2-selection__rendered { height: 56px; padding: 26px 44px 0 18px; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink); } .wb-co .select2-container .select2-selection--single .select2-selection__arrow { top: 0; right: 14px; height: 56px; width: 20px; } .wb-co .select2-container .select2-selection--single .select2-selection__arrow b { border: 0; width: 10px; height: 10px; margin: -8px 0 0 -5px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); } .wb-co .form-row select { width: 100%; height: 60px; padding: 24px 18px 6px; border: 2px solid transparent; border-radius: 16px; background: var(--cream); font: 600 1rem var(--font-b); color: var(--ink); } .wb-co .form-row strong { display: block; height: 60px; padding: 28px 20px 0; border-radius: 16px; background: var(--cream); font-weight: 600; } .select2-container--open .select2-dropdown { border: 0; border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(30, 20, 24, .45); overflow: hidden; font-family: var(--font-b); } .select2-container--open .select2-search--dropdown { padding: 10px; } .select2-container--open .select2-search--dropdown .select2-search__field { height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--cream); font: 600 .9375rem var(--font-b); outline: 0; } .select2-container--open .select2-results__option { padding: 10px 16px; font-size: .9375rem; font-weight: 600; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--ink); color: #fff; } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { background: var(--as); color: var(--ad); } /* Fehler */ .wb-co .form-row.woocommerce-invalid .input-text, .wb-co .form-row.woocommerce-invalid .select2-selection--single { border-color: var(--a) !important; background: var(--as) !important; } .wb-co .form-row.woocommerce-invalid > label { color: var(--a); } .wb-co .checkout-inline-error-message { margin: 6px 0 0 6px; font-size: .8125rem; font-weight: 700; color: var(--a); } .wb-co .woocommerce-NoticeGroup { grid-column: 1 / -1; } .prose .wb-co .woocommerce-NoticeGroup :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { margin: 0; } /* Kontrollkästchen (AGB, andere Lieferadresse, Karte speichern …) */ .wb-co :is(label.checkbox, .woocommerce-form__label-for-checkbox, .woocommerce-SavedPaymentMethods-saveNew) { display: flex !important; align-items: flex-start; gap: 12px; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--ink-2); cursor: pointer; } .wb-co input[type="checkbox"] { flex: none; width: 24px !important; height: 24px; margin: 0; border: 0; border-radius: 8px; background: var(--cream); box-shadow: inset 0 0 0 2px rgba(30, 20, 24, .15); -webkit-appearance: none; appearance: none; cursor: pointer; position: static !important; transition: background .2s, box-shadow .2s; } .wb-co input[type="checkbox"]:checked { background: var(--ad) 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 / 16px no-repeat; box-shadow: none; } .wb-co input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .prose .wb-co label.checkbox a, .prose .wb-co .woocommerce-terms-and-conditions-wrapper a { color: var(--ad); font-weight: 800; border-bottom: 1.5px solid currentColor; } .wb-co abbr.required { display: none; } /* Zusätzliche Karte: andere Lieferadresse + Bestellhinweise */ .wb-co__extra { background: #fff; border-radius: 28px; box-shadow: var(--shadow-card); padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 16px; } .wb-co__extra h3 { font-family: var(--font-b); font-size: .9375rem; font-weight: 600; letter-spacing: 0; } .wb-co__extra .woocommerce-additional-fields > h3 { display: none; } .wb-co__extra .shipping_address { margin-top: 16px; } .wb-co__extra :is(.woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wb-co__extra :is(.woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > * { grid-column: 1 / -1; } .wb-co__extra .woocommerce-shipping-fields__field-wrapper > :is(.form-row-first, .form-row-last, [id$="_postcode_field"], [id$="_city_field"]) { grid-column: auto; } /* Express-Zahlung oben */ .wb-co .wcpay-express-checkout-wrapper { margin: 0; } .wb-co__main > .wcpay-express-checkout-wrapper:not(:has(#wcpay-express-checkout-element:not(:empty))) { display: none; } .wb-co__main > .wcpay-express-checkout-wrapper { background: #fff; border-radius: 28px; box-shadow: var(--shadow-card); padding: clamp(20px, 2.6vw, 30px); } .wb-co__main > .wcpay-express-checkout-wrapper::before { content: 'Express-Zahlung'; display: block; margin-bottom: 14px; font-family: var(--font-h); font-weight: 800; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.02em; } .wb-co #wcpay-express-checkout-button-separator { display: none !important; } /* Zahlungsarten als Karten */ .wb-co .wc_payment_methods { display: flex; flex-direction: column; gap: 10px; } .wb-co .wc_payment_method { position: relative; border-radius: 20px; background: var(--cream); box-shadow: inset 0 0 0 2px transparent; transition: background .2s, box-shadow .2s; } .wb-co .wc_payment_method:has(> input:checked) { background: #fff; box-shadow: inset 0 0 0 2px var(--ad); } .wb-co .wc_payment_method > input[type="radio"] { position: absolute; left: 18px; top: 19px; width: 22px; height: 22px; margin: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px rgba(30, 20, 24, .22); -webkit-appearance: none; appearance: none; cursor: pointer; display: block !important; transition: box-shadow .2s; } .wb-co .wc_payment_method > input[type="radio"]:checked { box-shadow: inset 0 0 0 7px var(--ad); } .wb-co .wc_payment_method > label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 14px 18px 14px 54px; font-size: .9375rem; font-weight: 800; color: var(--ink); cursor: pointer; } .wb-co .wc_payment_method > label img { height: 22px; width: auto; margin: 0; border-radius: 4px; } .wb-co .payment-methods--logos, .wb-co .payment-methods--logos > div { display: flex; align-items: center; gap: 4px; } .wb-co .payment-methods--logos-count { padding: 0 4px; font-size: .75rem; font-weight: 800; color: var(--muted); } .wb-co .payment_box { padding: 0 18px 18px 54px; font-size: .9375rem; color: var(--ink-2); } .wb-co .payment_box::before { display: none; } .wb-co .payment_box p { margin: 0 0 10px; } .wb-co .payment_box .woocommerce-SavedPaymentMethods-saveNew { margin: 12px 0 0; } .wb-co .payment_box .woocommerce-SavedPaymentMethods-saveNew label { display: inline !important; cursor: pointer; } .wb-co .wc-saved-payment-methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .wb-co .wc-saved-payment-methods li { display: flex; align-items: center; gap: 10px; font-weight: 700; } .wb-co .wc-saved-payment-methods input[type="radio"] { accent-color: var(--ad); width: 18px; height: 18px; margin: 0; } .wb-co .place-order { margin-top: 16px; } .wb-co .woocommerce-terms-and-conditions-wrapper { font-size: .875rem; color: var(--muted); font-weight: 600; } .wb-co .woocommerce-terms-and-conditions-wrapper:not(:has(input, .woocommerce-terms-and-conditions)) { display: none; } .wb-co .woocommerce-privacy-policy-text { display: none; } .wb-co .woocommerce-terms-and-conditions { margin: 0 0 12px; padding: 16px; border-radius: 16px; background: var(--cream); max-height: 220px; overflow: auto; } .text-page--wide .wb-co #place_order, .wb-co #place_order { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; margin-top: 14px; padding: 0 28px !important; border: 0 !important; border-radius: var(--pill) !important; background: var(--btn-bg) !important; color: var(--btn-fg) !important; font-family: var(--font-b) !important; font-size: 1.0625rem !important; font-weight: 800 !important; cursor: pointer; } /* Mit JavaScript sitzt der Bestell-Button rechts in „Deine Bestellung“ */ .wb-co-js .wb-co #place_order { position: absolute !important; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0 !important; overflow: hidden; clip-path: inset(50%); } .wb-co-js .wb-co .place-order:not(:has(.woocommerce-terms-and-conditions-wrapper input, .woocommerce-terms-and-conditions)) { margin: 0; } html:not(.wb-co-js) .wb-co__submit { display: none !important; } .text-page--wide .wb-co__submit, .wb-co__submit { margin-top: 18px !important; cursor: pointer; } .prose .wb-co .wb-co__legal, .wb-co__legal { margin: 14px 0 0; font-size: .8125rem; font-weight: 600; line-height: 1.6; color: var(--muted); } .prose .wb-co__legal a { color: var(--ad); font-weight: 800; border-bottom: 1.5px solid currentColor; } /* Deine Bestellung */ .wb-review__items { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); } .wb-mini { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: start; } .wb-mini__img { position: relative; width: 56px; height: 56px; } .prose .wb-mini__img img, .wb-mini__img img { width: 56px; height: 56px; object-fit: cover; border-radius: 14px; display: block; } .wb-mini__img i { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--pill); background: var(--ink); color: #fff; box-shadow: 0 0 0 2px #fff; font-size: .6875rem; font-weight: 800; font-style: normal; line-height: 22px; text-align: center; } .wb-mini__name { display: block; font-size: .9375rem; font-weight: 800; line-height: 1.3; } .wb-mini__total { font-size: .9375rem; font-weight: 800; white-space: nowrap; } .wb-mini dl.variation { margin: 4px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--muted); font-weight: 600; } .wb-mini dl.variation dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .wb-mini dl.variation dd { margin: 0; } .wb-mini dl.variation dd :is(p, div) { margin: 0; } .wb-co__summary .wb-coupon { margin-top: 16px; } .prose .wb-coupon__msg, .wb-coupon__msg { flex-basis: 100%; margin: 0; font-size: .8125rem; font-weight: 700; color: var(--a); } .wb-co .blockUI.blockOverlay { border-radius: 28px; background: rgba(255, 255, 255, .6) !important; } .wb-co .blockUI.blockOverlay::before { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid var(--line); border-top-color: var(--ad); border-radius: 50%; animation: wb-spin .7s linear infinite; } @media (max-width: 960px) { .wb-co { grid-template-columns: minmax(0, 1fr); gap: 16px; } } @media (max-width: 600px) { .wb-fields, .wb-co__extra :is(.woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) { grid-template-columns: minmax(0, 1fr); } .wb-fields > *, .wb-co__extra .woocommerce-shipping-fields__field-wrapper > * { grid-column: 1 / -1 !important; } .wb-co__extra { border-radius: 24px; padding: 18px; } .wb-co__main > .wcpay-express-checkout-wrapper { border-radius: 24px; padding: 18px; } .wb-co .payment_box { padding: 0 16px 16px; } .wb-co .payment-methods--logos { display: none; } } @media (max-width: 600px) { .text-page--wide .wb-co__submit, .wb-co__submit { padding: 0 18px !important; font-size: 1rem !important; } } /* Zahlungsart-Kopf: fest ausrichten (WooPayments bringt eigene Abstände mit) */ .wb-co #payment ul.payment_methods li.wc_payment_method > label { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; margin: 0 !important; padding: 14px 18px 14px 54px !important; line-height: 1.3; } .wb-co #payment ul.payment_methods li.wc_payment_method > label .payment-methods--logos { position: static !important; float: none !important; margin: 0 0 0 auto !important; } .wb-co #payment ul.payment_methods li.wc_payment_method > input[type="radio"] { top: 19px !important; left: 18px !important; margin: 0 !important; } .wb-co #payment .payment_box { margin: 0 !important; background: transparent !important; } .wb-co #payment .payment_box .wcpay-upe-element { margin: 0 0 4px; } @media (max-width: 600px) { .wb-co #payment .payment_box { padding: 0 16px 16px !important; } } /* Kasse: „Notiz zur Bestellung hinzufügen“ (aufklappbar) */ .wb-co__extra .woocommerce-shipping-fields:empty, .wb-co__extra .woocommerce-shipping-fields:not(:has(*)) { display: none; } .wb-notes summary { display: flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; user-select: none; } .wb-notes summary::-webkit-details-marker { display: none; } .wb-notes summary small { font-size: .8125rem; font-weight: 600; color: var(--muted); } .wb-notes__box { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--cream); box-shadow: inset 0 0 0 2px rgba(30, 20, 24, .15); transition: background .2s, box-shadow .2s; } .wb-notes[open] .wb-notes__box { background: var(--ad) 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 / 16px no-repeat; box-shadow: none; } .wb-notes summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; } .wb-notes .woocommerce-additional-fields__field-wrapper { margin-top: 14px; } .wb-notes > h3 { display: none; } /* FooEvents (Ticketshop): Teilnehmer-Felder je Ticket – stehen in derselben Karte, die Notiz rutscht ans Ende */ .wb-co__extra .woocommerce-additional-fields { display: flex; flex-direction: column; gap: 14px; } .wb-co__extra .woocommerce-additional-fields > .wb-notes { order: 99; } .wb-co__extra .woocommerce-additional-fields:has(> .fooevents-attendee > .form-row:not([class*="fooevents-bookings-"])) > .wb-notes { padding-top: 16px; border-top: 1px dashed var(--line); } .prose .wb-co .wb-co__extra h3.fooevents-eventname, .wb-co__extra .woocommerce-additional-fields > h3.fooevents-eventname { display: none; margin: 0; font-family: var(--font-h); font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); } /* Termin und Zeitfenster sind schon im Kalender gewählt: die Auswahlfelder bleiben im Formular, werden aber nicht gezeigt. Tickets ohne weitere Felder (kein Name nötig) erscheinen dadurch gar nicht. */ .wb-co .fooevents-attendee > [class*="fooevents-bookings-"] { display: none !important; } .wb-co .fooevents-attendee:not(:has(> .form-row:not([class*="fooevents-bookings-"]))) { display: none; } .wb-co__extra .woocommerce-additional-fields > h3.fooevents-eventname:has(+ .fooevents-attendee > .form-row:not([class*="fooevents-bookings-"])) { display: block; } .wb-co__extra .fooevents-attendee:has(> .form-row:not([class*="fooevents-bookings-"])) ~ h3.fooevents-eventname { margin-top: 6px; padding-top: 20px; border-top: 1px dashed var(--line); } .wb-co .fooevents-attendee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; padding: 14px; border-radius: 22px; box-shadow: inset 0 0 0 2px var(--line); } .wb-co .fooevents-attendee > * { grid-column: 1 / -1; min-width: 0; } .wb-co .fooevents-attendee > :is(.fooevents-attendee-first-name, .fooevents-attendee-last-name) { grid-column: auto; } .wb-co .fooevents-attendee > .fooevents-checkout-attendee-info:empty { display: none; } .prose .wb-co .fooevents-attendee h4, .wb-co .fooevents-attendee h4 { grid-column: 1; margin: 0; padding: 2px 4px 0; font-family: var(--font-b); font-size: .9375rem; font-weight: 800; line-height: 1.4; letter-spacing: 0; color: var(--ink); } .wb-co .fooevents-attendee h4 + .fooevents-checkout-attendee-info:empty + .fooevents-variation-desc, .wb-co .fooevents-attendee h4 + .fooevents-variation-desc { grid-column: 2; justify-self: end; } .wb-co .fooevents-variation-desc { padding: 4px 11px; border-radius: 14px; background: var(--cream); font-size: .8125rem; font-weight: 700; line-height: 1.45; color: var(--ink-2); } .prose .wb-co .fooevents-variation-desc p { margin: 0; } .wb-co .fooevents-variation-desc strong { font-weight: 700; color: var(--muted); } .text-page--wide .wb-co .form-row select, .wb-co .form-row select { display: block; width: 100%; box-shadow: none; -webkit-appearance: none; appearance: none; background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A5F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px !important; padding-right: 44px; text-overflow: ellipsis; } .wb-co .form-row select:focus { background-color: #fff !important; outline: 0; } .wb-co .form-row:not(:has(> label)) select { padding-top: 0; padding-bottom: 0; } @media (max-width: 600px) { .wb-co .fooevents-attendee { grid-template-columns: minmax(0, 1fr); padding: 12px; border-radius: 20px; } .wb-co .fooevents-attendee > * { grid-column: 1 / -1 !important; justify-self: stretch !important; } .wb-co .fooevents-variation-desc { justify-self: start !important; } } /* Notizfeld: Label bleibt klein oben, Beispieltext sichtbar */ .wb-co #order_comments_field > label { top: 11px !important; font-size: .75rem !important; font-weight: 700 !important; } .wb-co #order_comments_field textarea.input-text::placeholder { color: var(--muted-2); } .wb-co #order_comments_field textarea.input-text { padding-top: 34px !important; } /* ═══════════════════════════════════════════════════════════ Bestellung erhalten – woocommerce/checkout/thankyou.php + order/*.php Gleicher Aufbau wie Warenkorb und Kasse: links Inhalt, rechts Übersicht. ═══════════════════════════════════════════════════════════ */ .wb-ty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 28px; align-items: start; font-size: 1rem; line-height: 1.5; color: var(--ink); } .wb-ty--single { grid-template-columns: minmax(0, 1fr); max-width: 860px; } .wb-ty__main, .wb-ty__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .prose .wb-ty :is(p, ul, ol, dl, table, address) { margin: 0; } .prose .wb-ty :is(h2, h3) { margin-top: 0; } .prose .wb-ty ul { padding: 0; list-style: none; } .prose .wb-ty li { margin: 0; } .prose .wb-ty a { text-decoration: none; } .prose .wb-ty img { border-radius: 0; } .prose .wb-ty table { display: table; width: 100%; font-size: inherit; border-collapse: collapse; overflow: visible; } .prose .wb-ty :is(th, td) { padding: 0; border: 0; } /* Danke-Karte */ .wb-ty__hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; align-items: center; } .wb-ty__icon { width: 72px; height: 72px; border-radius: 50%; background: #E6F5EC; color: #1E6B3E; display: grid; place-items: center; box-shadow: 0 18px 36px -22px rgba(30, 107, 62, .55); } .wb-ty__hero.is-failed .wb-ty__icon { background: #FFF0F2; color: #8E1230; box-shadow: none; } .wb-ty__head { min-width: 0; } .prose .wb-ty__title, .wb-ty__title { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: clamp(1.625rem, 2vw + .8rem, 2.25rem); line-height: 1.05; letter-spacing: -.035em; color: var(--ink); } .prose .wb-ty .woocommerce-thankyou-order-received, .prose .wb-ty .woocommerce-thankyou-order-failed { margin: 6px 0 0; padding: 0; background: none; box-shadow: none; border: 0; min-height: 0; font-size: 1rem; font-weight: 500; color: var(--ink-2); display: block; } .wb-ty .woocommerce-thankyou-order-received::before, .wb-ty .woocommerce-thankyou-order-failed::before { display: none; } .prose .wb-ty .wb-ty__mail, .wb-ty__mail { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 14px; border-radius: var(--pill); background: var(--cream); font-size: .875rem; font-weight: 700; color: var(--ink-2); } .wb-ty__mail .icon { flex: none; color: var(--status); } .prose .wb-ty .wb-ty__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 0; background: none; box-shadow: none; min-height: 0; } .wb-ty .wb-ty__actions::before { display: none; } .prose .wb-ty .woocommerce-order-overview, .wb-ty .woocommerce-order-overview { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; width: 100%; margin: 14px 0 0; padding: 0; list-style: none; text-align: left; } .wb-ty .woocommerce-order-overview::before, .wb-ty .woocommerce-order-overview::after { display: none; } .wb-ty .woocommerce-order-overview li { min-width: 0; display: flex; flex-direction: column; gap: 4px; float: none; margin: 0; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--cream); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--muted); } .wb-ty .woocommerce-order-overview li strong { font-family: var(--font-b); font-size: 1rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ink); overflow-wrap: anywhere; } .prose .wb-ty .wb-ty__back { grid-column: 1; justify-self: start; margin: -8px 0 0; } .wb-ty .wb-cart__back { margin: 0; } /* Karten-Überschriften */ .prose .wb-ty h2:not(.wb-ty__title), .wb-ty .woocommerce-order-details__title, .wb-ty .wb-order__title, .wb-ty .woocommerce-column__title { margin: 0 0 18px; font-family: var(--font-h); font-weight: 800; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); } .wb-order__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .prose .wb-ty .wb-order__head h2 { margin: 0; } .wb-order__count { font-size: .8125rem; font-weight: 700; color: var(--muted); white-space: nowrap; } /* Artikel */ .wb-order__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .wb-order__table tbody { display: flex; flex-direction: column; gap: 16px; } .wb-order__table tbody tr.order_item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; } .wb-order__table tbody tr.order_item ~ tr.order_item { padding-top: 16px; border-top: 1px dashed var(--line); } .wb-order__table td.product-name { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; } .wb-order__table td.product-total { font-size: .9375rem; font-weight: 800; white-space: nowrap; } .wb-order__table .wb-mini__img, .prose .wb-order__table .wb-mini__img img { width: 72px; height: 72px; } .prose .wb-order__table .wb-mini__img img { border-radius: 18px; } .wb-order__table .wb-mini__name { font-family: var(--font-h); font-size: 1.125rem; letter-spacing: -.015em; } .prose .wb-order__table .wb-mini__name a { color: var(--ink); font-weight: 800; } .prose .wb-ty .wc-item-meta, .wb-ty .wc-item-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; } .wb-ty .wc-item-meta li { display: block; max-width: 100%; padding: 5px 11px; border-radius: 14px; background: var(--cream); font-size: .8125rem; line-height: 1.45; font-weight: 700; color: var(--ink-2); overflow-wrap: break-word; } .wb-ty .wc-item-meta li :is(p, strong) { display: inline; margin: 0; font-weight: 700; } .wb-ty .wc-item-meta .wc-item-meta-label { color: var(--muted); } .wb-order__table .product-purchase-note td { display: block; padding: 12px 16px; border-radius: 16px; background: var(--cream); font-size: .875rem; } /* Übersicht (Summen) */ .wb-order__sum tbody { display: flex; flex-direction: column; } .wb-order__sum tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 9px 0; } .wb-order__sum th { font-size: .9375rem; font-weight: 600; color: var(--ink-2); text-align: left; } .wb-order__sum td { margin-left: auto; font-size: .9375rem; font-weight: 700; color: var(--ink); text-align: right; } .wb-order__sum .wb-order__row--discount td { color: var(--status); } .wb-order__sum .wb-order__row--order_total { order: 99; margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--line); } .wb-order__sum .wb-order__row--order_total th { font-size: 1rem; font-weight: 800; color: var(--ink); } .wb-order__sum .wb-order__row--order_total td { font-size: .8125rem; font-weight: 600; color: var(--muted); } .wb-order__sum .wb-order__row--order_total td > .amount, .wb-order__sum .wb-order__row--order_total td > .woocommerce-Price-amount { display: block; font-family: var(--font-h); font-weight: 800; font-size: 2rem; letter-spacing: -.02em; line-height: 1; color: var(--ink); } .wb-order__sum .wb-order__row--order_total td .includes_tax { display: block; margin-top: 4px; } .wb-order__sum .wb-order__row--note { order: 100; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 12px; padding: 12px 16px; border-radius: 16px; background: var(--cream); } .wb-order__sum .wb-order__row--note th { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .wb-order__sum .wb-order__row--note td { margin: 0; text-align: left; font-size: .875rem; font-weight: 600; color: var(--ink-2); } .wb-order__sum .wb-order__row--actions { order: 101; } .prose .wb-ty .order-actions-button, .wb-ty .order-actions-button { display: inline-flex; padding: 10px 18px !important; border-radius: var(--pill) !important; background: var(--ink) !important; color: #fff !important; font-size: .875rem; font-weight: 800; } /* Adresse(n) */ .wb-ty .woocommerce-customer-details { background: #fff; border-radius: 28px; box-shadow: var(--shadow-card); padding: clamp(20px, 2.6vw, 30px); } .wb-ty .woocommerce-customer-details address { font-style: normal; font-size: .9375rem; line-height: 1.65; font-weight: 600; color: var(--ink-2); padding: 0; border: 0; overflow-wrap: anywhere; } .wb-ty .woocommerce-customer-details address p { margin: 0; } .wb-ty .woocommerce-customer-details--phone, .wb-ty .woocommerce-customer-details--email { padding: 0 !important; } .wb-ty .woocommerce-customer-details--phone::before, .wb-ty .woocommerce-customer-details--email::before { display: none !important; } .wb-ty .woocommerce-columns--addresses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } .wb-ty .woocommerce-columns--addresses::before, .wb-ty .woocommerce-columns--addresses::after { display: none; } .wb-ty .woocommerce-columns--addresses > * { width: auto; float: none; } /* Was Zahlungsart oder Plugins zusätzlich ausgeben, bekommt ebenfalls eine Karte */ .wb-ty :is(.wb-ty__main, .wb-ty__side) > :is(section, div, p, table, ul):not(.wb-card):not(.woocommerce-customer-details):not(:empty) { background: #fff; border-radius: 28px; box-shadow: var(--shadow-card); padding: clamp(20px, 2.6vw, 30px); } @media (max-width: 960px) { .wb-ty { grid-template-columns: minmax(0, 1fr); gap: 16px; } .prose .wb-ty .wb-ty__back { margin-top: 0; } } @media (max-width: 600px) { .wb-ty__hero { gap: 8px 14px; } .wb-ty__icon { width: 56px; height: 56px; } .wb-ty__icon svg { width: 24px; height: 24px; } .prose .wb-ty .wb-ty__mail, .wb-ty__mail { gap: 6px; padding: 8px 12px; border-radius: 16px; font-size: .78125rem; } .wb-ty .woocommerce-order-overview { grid-template-columns: 1fr 1fr; } .wb-ty .woocommerce-order-overview li { padding: 12px 14px; letter-spacing: .06em; } .wb-order__table tbody tr.order_item { gap: 12px; } .wb-order__table td.product-name { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; } .wb-order__table .wb-mini__img, .prose .wb-order__table .wb-mini__img img { width: 56px; height: 56px; } .prose .wb-order__table .wb-mini__img img { border-radius: 14px; } .wb-ty .woocommerce-customer-details { border-radius: 24px; padding: 18px; } } /* ═══════════════════════════════════════════════════════════ Muttertag-Landingpage – page-muttertag.php Daten (Datum, Produkte): inc/saisonen.php ═══════════════════════════════════════════════════════════ */ .mt { --rose: #FFE3EA; --rose-2: #FFD0DC; --blush: #FFF3F5; overflow: clip; background: var(--cream); } .mt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 22%, transparent); } /* Platzhalter für Produktfotos */ .mt-ph { display: grid; place-items: center; overflow: hidden; color: rgba(255, 255, 255, .92); background: linear-gradient(150deg, #FF9FB0, #D6334F 60%, #8E1230); } .mt-ph > img { width: 100%; height: 100%; object-fit: cover; display: block; } .mt-ph > svg { width: 46%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .mt-ph--2 { background: linear-gradient(150deg, #FFC9D4, #F0728A 70%, #C0355A); } .mt-ph--3 { background: linear-gradient(150deg, #F8C1E2, #C0559A 65%, #7A2462); } .mt-ph--4 { background: linear-gradient(150deg, #6B3A2A, #3A1C14); } .mt-ph--5 { background: linear-gradient(150deg, #FFE1A8, #F2A65A 60%, #D6334F); } .mt-ph--6 { background: linear-gradient(150deg, #FFB7C5, #E0506E 70%, #8E1230); } .mt-ph--w { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); } /* ── Hero ── */ .mt-hero { position: relative; padding: calc(var(--header-h) + clamp(44px, 5vw, 80px)) 0 clamp(70px, 8vw, 120px); background: radial-gradient(1100px 620px at 82% 30%, var(--rose-2), transparent 62%), linear-gradient(180deg, var(--rose) 0%, var(--blush) 62%, var(--cream) 100%); } .mt-hero__blob { position: absolute; left: -140px; top: 48%; width: 380px; height: 380px; background: #fff; opacity: .55; } .mt-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .mt-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .mt-hero__chip { box-shadow: var(--shadow-card); } .mt-hero .h1 { font-size: clamp(2.75rem, 6vw + .2rem, 6.25rem); } .mt-hero .h1 em { position: relative; white-space: nowrap; } .mt-hero .h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c40-9 82-10 122-5s92 8 172-3' fill='none' stroke='%23FF8FA0' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .mt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .mt-count { display: flex; align-items: center; gap: 16px; margin-top: 6px; padding: 12px 22px 12px 12px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); transform: rotate(-1.5deg); } .mt-count__num svg { width: 30px; height: 30px; } .mt-count__num { min-width: 68px; height: 68px; padding: 0 12px; border-radius: 22px; display: grid; place-items: center; background: var(--grad); color: #fff; font-family: var(--font-h); font-weight: 800; font-size: 2rem; letter-spacing: -.03em; } .mt-count__txt { display: flex; flex-direction: column; font-size: .875rem; font-weight: 600; color: var(--muted); line-height: 1.4; } .mt-count__txt strong { font-family: var(--font-h); font-size: 1.1875rem; color: var(--ink); } .mt-collage { position: relative; height: clamp(440px, 46vw, 640px); } .mt-collage__a { position: absolute; left: 6%; top: 4%; width: 68%; height: 78%; box-shadow: 0 50px 90px -40px rgba(142, 18, 48, .65); } .mt-collage__b { position: absolute; right: 0; top: 10%; width: 36%; aspect-ratio: 1; border-radius: 50%; border: 8px solid #fff; box-shadow: var(--shadow-pop); animation: float 8s ease-in-out infinite; } .mt-collage__c { position: absolute; right: 8%; bottom: 0; width: 40%; height: 40%; border-radius: 999px 999px 36px 36px; border: 8px solid #fff; box-shadow: var(--shadow-pop); } .mt-seal { position: absolute; left: -2%; bottom: 4%; width: 168px; height: 168px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-pop); } .mt-seal > svg { position: absolute; inset: 0; animation: spin 22s linear infinite; } .mt-seal text { font: 800 14.5px var(--font-b); letter-spacing: 0; text-transform: uppercase; fill: #fff; } .mt-seal span svg { width: 34px; height: 34px; } .mt-seal span { color: var(--al); display: grid; animation: mt-beat 1.6s ease-in-out infinite; } .mt-note { position: absolute; right: 2%; top: 52%; padding: 16px 22px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-pop); } .mt-note small { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ad); } .mt-note strong { font-family: var(--font-h); font-size: 1.375rem; line-height: 1.05; font-style: italic; letter-spacing: -.02em; } .mt-tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 99px; font-size: .875rem; font-weight: 700; } .mt-tag--a { left: 22%; top: -1%; background: #fff; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .3); transform: rotate(-5deg); } .mt-tag--a .icon { color: var(--status); } .mt-scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .6875rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ad); text-decoration: none; } .mt-scroll i { width: 2px; height: 34px; border-radius: 2px; background: linear-gradient(var(--a), transparent); animation: bounce 1.8s ease-in-out infinite; } /* schwebende Herzen im Hero */ .mt-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .mt-petals i { --s: 26px; position: absolute; bottom: -50px; width: var(--s); height: var(--s); background: #F0728A; opacity: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S3 15.2 3 8.8A4.9 4.9 0 0 1 12 6a4.9 4.9 0 0 1 9 2.8C21 15.2 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S3 15.2 3 8.8A4.9 4.9 0 0 1 12 6a4.9 4.9 0 0 1 9 2.8C21 15.2 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; animation: mt-float-up 14s ease-in infinite; } .mt-petals i:nth-child(1) { left: 5%; animation-delay: 0s; } .mt-petals i:nth-child(2) { left: 19%; --s: 16px; animation-delay: 5s; animation-duration: 17s; background: #FFB7C5; } .mt-petals i:nth-child(3) { left: 38%; --s: 34px; animation-delay: 9s; background: #D6334F; } .mt-petals i:nth-child(4) { left: 52%; --s: 18px; animation-delay: 2.5s; animation-duration: 16s; } .mt-petals i:nth-child(5) { left: 67%; --s: 22px; animation-delay: 7s; background: #C0559A; } .mt-petals i:nth-child(6) { left: 84%; --s: 30px; animation-delay: 11s; animation-duration: 18s; background: #FFB7C5; } .mt-petals i:nth-child(7) { left: 94%; --s: 15px; animation-delay: 1s; background: #D6334F; } @keyframes mt-float-up { 0% { transform: translate(0, 0) rotate(-12deg) scale(.6); opacity: 0; } 10% { opacity: .55; } 50% { transform: translate(34px, -480px) rotate(10deg) scale(1); opacity: .45; } 100% { transform: translate(-22px, -980px) rotate(-8deg) scale(1.15); opacity: 0; } } @keyframes mt-beat { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.18); } 36% { transform: scale(1); } 54% { transform: scale(1.12); } } /* ── Laufband ── */ .mt-strip { background: var(--ink); color: #fff; overflow: hidden; transform: rotate(-1.2deg) scale(1.02); margin: -18px 0 0; position: relative; z-index: 2; } .mt-strip__track { display: flex; width: max-content; animation: marquee 34s linear infinite; } .mt-strip__track span { display: inline-flex; align-items: center; gap: 22px; padding: 17px 0 17px 22px; font-family: var(--font-h); font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; white-space: nowrap; } .mt-strip__track svg { width: 18px; height: 18px; color: var(--al); } /* ── Intro ── */ .mt-intro__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 100px); align-items: center; } .mt-intro__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .mt-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; } .mt-facts li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-card); font-weight: 700; font-size: .9375rem; } .mt-facts span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--as); color: var(--ad); } .mt-facts svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mt-card-stack { position: relative; min-height: 420px; display: grid; place-items: center; } .mt-card-stack__blob { position: absolute; width: 78%; aspect-ratio: 1; background: var(--rose); z-index: 0; } .mt-postcard { position: relative; z-index: 2; width: min(380px, 88%); padding: 34px 32px 36px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-pop); transform: rotate(4deg); transition: transform .5s var(--ease); } .mt-card-stack:hover .mt-postcard { transform: rotate(1deg) translateY(-6px); } .mt-postcard--back { position: absolute; z-index: 1; height: 300px; padding: 0; background: var(--grad); transform: rotate(-7deg) translate(-18px, 10px); } .mt-card-stack:hover .mt-postcard--back { transform: rotate(-10deg) translate(-26px, 14px); } .mt-postcard small { font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .mt-postcard p { margin: 44px 0 22px; white-space: nowrap; font-family: var(--font-h); font-weight: 800; font-size: clamp(1.5rem, 1.9vw, 1.8125rem); line-height: 1.1; letter-spacing: -.03em; } .mt-postcard p em { color: var(--a); } .mt-postcard__line { display: block; height: 2px; margin-top: 16px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); } .mt-postcard__line + .mt-postcard__line { width: 62%; } .mt-postcard__stamp { position: absolute; right: 22px; top: 22px; width: 58px; height: 68px; border-radius: 10px; display: grid; place-items: center; background: var(--as); color: var(--a); outline: 2px dashed color-mix(in srgb, var(--a) 45%, transparent); outline-offset: 3px; transform: rotate(6deg); } .mt-postcard__stamp svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ── Geschenke ── */ .mt-gifts { padding-top: clamp(20px, 3vw, 50px); background: linear-gradient(180deg, var(--cream), var(--blush) 30%, var(--blush) 70%, var(--cream)); } .mt-filter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); } .mt-filter__label { font-family: var(--font-h); font-weight: 800; font-size: 1.125rem; margin-right: 6px; } .mt-filter button { padding: 13px 20px; border: 0; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 2px var(--rose-2); font: 700 .9375rem var(--font-b); color: var(--ink); cursor: pointer; transition: transform .25s var(--ease), background .2s, color .2s, box-shadow .2s; } .mt-filter button:hover { transform: translateY(-2px) rotate(-1.5deg); } .mt-filter button.is-active { background: var(--ink); color: #fff; box-shadow: none; } .mt-num { display: inline-block; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .mt-price { font-family: var(--font-h); font-weight: 800; font-size: 1.75rem; letter-spacing: -.02em; line-height: 1; white-space: nowrap; } .mt-price small { font: 700 .8125rem var(--font-b); letter-spacing: 0; margin-right: 6px; opacity: .75; } .mt-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(28px, 4.4vw, 64px); border-radius: var(--r-xl); background: var(--grad); color: #fff; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(142, 18, 48, .8); margin-bottom: 28px; } .mt-feature[hidden] { display: none; } .mt-feature__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; position: relative; z-index: 2; } .mt-feature .mt-num { color: #FFE1E7; } .mt-feature .h2 em { color: #FFE1E7; } .mt-feature p { margin: 0; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.6; color: rgba(255, 255, 255, .9); } .mt-feature__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 8px; } .mt-feature .mt-price { font-size: 2.5rem; } .mt-feature__media { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; } .mt-feature__img { position: absolute; inset: 6%; display: grid; } .mt-feature__ring { position: absolute; inset: -4%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .4); animation: spin 60s linear infinite; } .mt-burst { position: absolute; right: -2%; top: 0; width: 132px; height: 132px; display: grid; place-items: center; text-align: center; color: var(--ink); font-family: var(--font-h); font-weight: 800; font-size: 1.0625rem; line-height: 1.05; transform: rotate(12deg); z-index: 3; } .mt-burst::before { content: ''; position: absolute; inset: 0; background: #FFD978; clip-path: polygon(50% 0, 61% 12%, 75% 5%, 79% 21%, 95% 22%, 90% 37%, 100% 50%, 90% 63%, 95% 78%, 79% 79%, 75% 95%, 61% 88%, 50% 100%, 39% 88%, 25% 95%, 21% 79%, 5% 78%, 10% 63%, 0 50%, 10% 37%, 5% 22%, 21% 21%, 25% 5%, 39% 12%); animation: spin 40s linear infinite; } .mt-burst b { position: relative; max-width: 86px; } .mt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .mt-card { position: relative; display: flex; flex-direction: column; padding: 22px 22px 24px; border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-card); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .mt-card[hidden] { display: none; } .mt-card:nth-child(odd) { transform: rotate(-.8deg); } .mt-card:nth-child(even) { transform: rotate(.8deg) translateY(14px); } .mt-card:hover { transform: rotate(0) translateY(-8px); box-shadow: var(--shadow-pop); } .mt-card__media { position: relative; height: 250px; margin-bottom: 20px; display: grid; place-items: center; } .mt-card__bg { position: absolute; width: 84%; height: 92%; background: var(--rose); border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; transition: transform .6s var(--ease); } .mt-card:hover .mt-card__bg { transform: rotate(14deg) scale(1.06); } .mt-card__img { position: relative; z-index: 1; width: 200px; height: 200px; transition: transform .5s var(--ease); box-shadow: 0 30px 50px -30px rgba(142, 18, 48, .7); } .mt-card:hover .mt-card__img { transform: scale(1.05) rotate(-3deg); } .mt-shape--circle { border-radius: 50%; } .mt-shape--blob { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; } .mt-shape--arch { border-radius: 999px 999px 34px 34px; width: 180px; height: 215px; } .mt-shape--leaf { border-radius: 70% 16% 70% 16%; } .mt-shape--leaf2 { border-radius: 16% 70% 16% 70%; } .mt-shape--soft { border-radius: 44px; transform: rotate(-5deg); } .mt-card__badge { position: absolute; left: 0; top: 4px; padding: 8px 14px; border-radius: 99px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-6deg); z-index: 2; } .mt-card__badge--new { background: #FFD978; color: var(--ink); } .mt-card__big { position: absolute; right: 2px; top: -6px; font-family: var(--font-h); font-weight: 800; font-size: 4.5rem; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--rose-2); } .mt-card .mt-num { color: var(--ad); } .mt-card h3 { margin: 8px 0 10px; font-size: 1.75rem; line-height: 1.02; letter-spacing: -.03em; } .mt-card h3 em { font-style: italic; color: var(--a); } .mt-card p { margin: 0 0 20px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .mt-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px dashed var(--line); } .mt-card__go { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 99px; background: var(--as); color: var(--ad); font-weight: 800; font-size: .9375rem; transition: background .25s, color .25s; } .mt-card__go i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--btn-bg); color: #fff; transition: transform .35s var(--ease); } .mt-card:hover .mt-card__go { background: var(--btn-bg); color: #fff; } .mt-card:hover .mt-card__go i { background: #fff; color: var(--ad); transform: translateX(3px); } .mt-card__link { position: absolute; inset: 0; border-radius: inherit; z-index: 3; } .mt-empty { text-align: center; font-weight: 700; color: var(--muted); margin: 30px 0 0; } /* ── Alle Produkte ── */ .mt-all { padding: clamp(40px, 5vw, 70px) 0 clamp(60px, 8vw, 110px); } .mt-all__card { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding: clamp(26px, 4vw, 52px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); } .mt-all__card > div { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 620px; } .mt-all__card .h3 em { font-style: italic; color: var(--a); } .mt-all__card p { margin: 0; color: var(--ink-2); line-height: 1.6; } .mt-all__card .btn { position: relative; } .mt-all__blob { position: absolute; right: -70px; top: -90px; width: 320px; height: 320px; background: var(--rose); } /* ── Finale ── */ .mt-final { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 170px) 0; background: radial-gradient(800px 500px at 50% 110%, #B81E44, transparent 70%), linear-gradient(160deg, #3A0A18, #8E1230 60%, #D6334F); color: #fff; text-align: center; border-radius: var(--r-xl); margin-inline: clamp(8px, 1.4vw, 20px); } .mt-final__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; } .mt-final .h1 em { color: #FFB7C5; } .mt-final p { margin: 0; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.6; color: rgba(255, 255, 255, .85); } .mt-hearts i { position: absolute; bottom: -40px; width: 26px; height: 26px; opacity: 0; background: #FF8FA0; clip-path: path("M13 24S1 16.5 1 8.5A6.5 6.5 0 0 1 13 5a6.5 6.5 0 0 1 12 3.5C25 16.5 13 24 13 24z"); animation: mt-rise 11s ease-in infinite; } .mt-hearts i:nth-child(1) { left: 8%; } .mt-hearts i:nth-child(2) { left: 24%; animation-delay: 3s; transform: scale(.7); } .mt-hearts i:nth-child(3) { left: 44%; animation-delay: 6s; } .mt-hearts i:nth-child(4) { left: 63%; animation-delay: 1.5s; } .mt-hearts i:nth-child(5) { left: 79%; animation-delay: 4.5s; } .mt-hearts i:nth-child(6) { left: 92%; animation-delay: 8s; } @keyframes mt-rise { 0% { transform: translateY(0) rotate(-10deg) scale(.7); opacity: 0; } 12% { opacity: .55; } 100% { transform: translateY(-620px) rotate(18deg) scale(1.25); opacity: 0; } } /* Einblenden beim Scrollen */ .mt-js [data-mt-rise] { opacity: 0; translate: 0 34px; transition: opacity .8s var(--ease), translate .8s var(--ease); } .mt-js [data-mt-rise].is-in { opacity: 1; translate: 0 0; } @media (max-width: 1100px) { .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .mt-hero__inner, .mt-intro__grid, .mt-feature { grid-template-columns: minmax(0, 1fr); } .mt-collage { height: 420px; max-width: 520px; width: 100%; margin: 10px auto 0; } .mt-seal { width: 128px; height: 128px; } .mt-scroll { display: none; } .mt-feature__media { max-width: 300px; order: -1; } .mt-burst { width: 104px; height: 104px; font-size: .875rem; } .mt-card-stack { min-height: 360px; } } @media (max-width: 640px) { .mt-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .mt-card:nth-child(odd), .mt-card:nth-child(even) { transform: none; } .mt-hero__actions { width: 100%; } .mt-hero__actions .btn { flex: 1 1 100%; justify-content: center; } .mt-collage { height: 360px; } .mt-note { right: 0; top: 40%; padding: 12px 16px; } .mt-postcard { padding: 28px 24px 30px; } .mt-postcard p { font-size: 1.375rem; } .mt-card .mt-price { font-size: 1.5rem; } .mt-card__go { padding-left: 14px; font-size: .875rem; } .mt-note strong { font-size: 1.125rem; } .mt-tag--a { left: 4%; } .mt-filter { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scrollbar-width: none; } .mt-filter::-webkit-scrollbar { display: none; } .mt-filter__label { display: none; } .mt-filter button { flex: none; } .mt-strip__track span { font-size: 1rem; padding-block: 14px; } .mt-feature .mt-price { font-size: 2rem; } .mt-feature__buy .btn, .mt-all__card .btn, .mt-final .btn { width: 100%; justify-content: center; } .mt-card__media { height: 220px; } } @media (prefers-reduced-motion: reduce) { .mt *, .mt *::before, .mt *::after { animation: none !important; transition: none !important; } .mt-js [data-mt-rise] { opacity: 1; translate: 0 0; } } /* ─── Danke-Seite: FooEvents-Tickets (QR-Code) ─────────────── */ .wb-tix .fooevents-thankyou-tickets { margin: 0; } .wb-tix .woocommerce-order-details__title { font-family: var(--font-h); font-weight: 800; font-size: 1.375rem; letter-spacing: -.02em; margin: 0 0 16px; } .wb-tix table, .wb-tix tbody, .wb-tix tr, .wb-tix td { display: block; border: 0; padding: 0; margin: 0; background: none; width: auto; } .wb-tix .fooevents-thankyou-tickets-table + .fooevents-thankyou-tickets-table { margin-top: 12px; } .wb-tix .fooevents-thankyou-ticket { display: grid; grid-template-columns: 124px minmax(0, 1fr) minmax(0, .9fr); gap: 6px 22px; align-items: center; padding: 18px; border-radius: 22px; background: var(--cream); } .text-page--wide .wb-tix table.shop_table td, .wb-tix .fooevents-thankyou-ticket > td { padding: 0 !important; border: 0 !important; margin: 0 !important; } .wb-tix .fooevents-thankyou-ticket-barcode { grid-row: auto; } .wb-tix .fooevents-thankyou-ticket-barcode img { display: block; width: 124px; height: 124px; object-fit: contain; border-radius: 10px; background: #fff; padding: 12px; box-shadow: 0 10px 24px -16px rgba(30, 20, 24, .4); } /* Innenabstand > Rundung: QR-Ecken werden nie beschnitten */ .wb-tix .fooevents-thankyou-ticket-event-details > div { font-family: var(--font-h); font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; margin-bottom: 6px; } .wb-tix .wc-item-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .875rem; font-weight: 600; color: var(--ink-2); } .wb-tix .wc-item-meta li { margin: 0; padding: 0; overflow-wrap: anywhere; } .wb-tix .wc-item-meta strong { color: var(--muted); font-weight: 700; margin-right: 4px; } .wb-tix .wc-item-meta a { color: inherit; text-decoration: none; } .wb-tix .fooevents-thankyou-ticket-attendee { padding-left: 22px; border-left: 1px dashed var(--line); } @media (max-width: 760px) { .wb-tix .fooevents-thankyou-ticket { grid-template-columns: 96px minmax(0, 1fr); gap: 10px 16px; padding: 14px; align-items: start; } .wb-tix .fooevents-thankyou-ticket-barcode { grid-row: auto; } .wb-tix .fooevents-thankyou-ticket-barcode img { width: 96px; height: 96px; padding: 10px; } .wb-tix .fooevents-thankyou-ticket-attendee { grid-column: 1 / -1; padding: 12px 0 0; border-left: 0; border-top: 1px dashed var(--line); } } /* ─── Danke-Seite: Feinschliff (FooEvents-Breiten, „Erneut bestellen“) ─── */ .wb-tix .fooevents-thankyou-ticket > td, .wb-tix .fooevents-thankyou-ticket > td > :is(div, ul, li) { width: auto !important; max-width: none !important; float: none !important; box-sizing: border-box; } .wb-tix .fooevents-thankyou-ticket { grid-template-columns: 124px minmax(0, 1.2fr) minmax(0, 1fr); } .wb-tix .wc-item-meta li { overflow-wrap: break-word; } .wb-tix .wc-item-meta a { overflow-wrap: anywhere; } .wb-tix .wc-item-meta strong { white-space: nowrap; } .wb-order--items .wb-order__table { display: block; width: 100%; } .wb-order--items .order-again { display: block; clear: both; margin: 22px 0 0 !important; position: static; } .wb-order--items .order-again .button { margin: 0 !important; position: static; } @media (max-width: 760px) { .wb-tix .fooevents-thankyou-ticket { grid-template-columns: 96px minmax(0, 1fr); } } @media (max-width: 1180px) { .wb-tix .fooevents-thankyou-ticket { grid-template-columns: 124px minmax(0, 1fr); align-items: start; } .wb-tix .fooevents-thankyou-ticket-attendee { grid-column: 1 / -1; padding: 12px 0 0; border-left: 0; border-top: 1px dashed var(--line); } } @media (max-width: 760px) { .wb-tix .fooevents-thankyou-ticket { grid-template-columns: 96px minmax(0, 1fr); } } .wb-order--items .order-again .button { display: inline-flex; align-items: center; }