@font-face { font-family: 'Climate Crisis'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/climate-crisis-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Climate Crisis'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/climate-crisis-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/space-grotesk-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/space-grotesk-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/space-grotesk-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/space-grotesk-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Zilla Slab'; font-style: italic; font-weight: 700; font-display: swap; src: url(../assets/fonts/zilla-slab-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Zilla Slab'; font-style: italic; font-weight: 700; font-display: swap; src: url(../assets/fonts/zilla-slab-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/zilla-slab-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/zilla-slab-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --cream: #F5EACD; --green: #4A664C; --grey: #2B2623; --cream-rgb: 245 234 205; --green-rgb: 74 102 76; --grey-rgb: 43 38 35; --rosso: #C2452D; --giallo: #E4B34C; --rosso-rgb: 194 69 45; --giallo-rgb: 228 179 76; --paper: var(--cream); --ink: var(--green); --ink-alt: var(--grey); --text: var(--grey); --text-quiet: rgb(var(--grey-rgb) / .68); --font-display: "Climate Crisis", "Space Grotesk", Impact, sans-serif; --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-accent: "Zilla Slab", Rockwell, Georgia, serif; --font-logo: var(--font-display); --size-display: 2.6rem; --size-h2: 1.75rem; --size-h3: 1.2rem; --size-lead: 1.125rem; --size-body: 1rem; --size-small: .875rem; --size-label: .75rem; --size-micro: .6875rem; --lead-display: 1.0; --lead-body: 1.6; --track-label: .14em; --track-claim: .14em; --frame-w: 3px; --frame-gap: 4px; --min-line: 2px; --tilt: -1.2deg; --tilt-alt: .8deg; --ink-cover: .34; --pat-coarse: 64px; --pat-mid: 10px; --pat-mid-dot: 2.6px; --pat-fine: 5px; --pat-band: 12px; --pat-band-r: 2.5px; --rule-double-gap: 5px; --hair: rgb(var(--grey-rgb) / .35); --seam-tooth: 44px; --seam-row: 14px; --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px; --statsbar-h: 32px; --gutter: 20px; --max: 1180px; --measure: 62ch; --section-pad: var(--s-64); --tap: 44px; --field-h: 50px; --img-filter: grayscale(1) contrast(2.2) brightness(1.1); --img-grain: .34; --foto-grain: .12; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); --dur-fast: .09s; --dur-base: .16s; --dur-reveal: .28s; --stagger: .07s; --ease: steps(3, end); --ease-press: cubic-bezier(.3, 1.6, .5, 1); --ease-soft: cubic-bezier(.33, 1, .68, 1); --reveal-scale: 1.06; --pin-step: 90vh; --layer-header: 200; --layer-preload: 500; } @media (min-width: 700px) { :root { --size-display: 4.4rem; --size-h2: 2.4rem; --size-h3: 1.4rem; --size-body: 1.0625rem; --gutter: 32px; --section-pad: var(--s-96); } } @media (min-width: 1080px) { :root { --size-display: 5.6rem; --gutter: 48px; } } @media (max-width: 560px) { :root { --seam-tooth: 22px; --seam-row: 9px; --pat-coarse: 32px; --pat-mid: 7px; --pat-mid-dot: 1.9px; --pat-band: 9px; --pat-band-r: 1.9px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: .01s; --dur-base: .01s; --dur-reveal: .01s; --stagger: 0s; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
*, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--statsbar-h) + 32px); } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: var(--size-body); line-height: var(--lead-body); -webkit-font-smoothing: antialiased; overflow-x: clip; } html { overflow-x: clip; } html.nav-open { overflow: hidden; } html.nav-open body { position: fixed; width: 100%; padding-top: calc(var(--statsbar-h) + var(--header-h, 70px)); } html.nav-open .statsbar, html.nav-open .header { position: fixed; left: 0; right: 0; } img, svg { max-width: 100%; } [hidden] { display: none !important; } h1, h2, h3, p, figure, blockquote, fieldset { margin: 0; } button { font: inherit; } :focus-visible { outline: var(--min-line) solid var(--ink); outline-offset: 3px; } .on-ink :focus-visible { outline-color: var(--paper); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--s-8); top: -100px; z-index: 600; background: var(--ink); color: var(--paper); padding: 10px 16px; text-decoration: none; font-weight: 700; } .skip-link:focus { top: var(--s-8); } .wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .kicker { font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); text-transform: uppercase; color: var(--ink); } .on-ink .kicker { color: var(--paper); opacity: .8; } .headline { font-family: var(--font-display); font-weight: 400; font-size: var(--size-h2); line-height: var(--lead-display); color: var(--ink); overflow-wrap: anywhere; margin-top: var(--s-12); } .on-ink .headline { color: var(--paper); } .section { padding: var(--section-pad) 0; } .section-note { margin-top: var(--s-16); max-width: 52ch; color: var(--text-quiet); } .on-ink .section-note { color: inherit; opacity: .85; } .ink-surface { position: relative; isolation: isolate; background: var(--ink); color: var(--paper); } .ink-surface::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: var(--grain); opacity: var(--ink-cover); mix-blend-mode: screen; } .ink-surface > * { position: relative; z-index: 2; } .seam { display: block; --seam-a: var(--green); --seam-b: var(--cream); --seam-a-pattern: none; --seam-b-pattern: none; --seam-a-size: auto; --seam-b-size: auto; --seam-a-blend: normal; --seam-b-blend: normal; } .seam i { position: relative; display: block; height: var(--seam-row); background-color: var(--seam-a); background-image: var(--seam-a-pattern); background-size: var(--seam-a-size); background-blend-mode: var(--seam-a-blend); } .seam i::after { content: ""; position: absolute; inset: 0; background-color: var(--seam-b); background-image: var(--seam-b-pattern); background-size: var(--seam-b-size); background-blend-mode: var(--seam-b-blend); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 var(--seam-tooth), transparent var(--seam-tooth) calc(var(--seam-tooth) * 2)); mask-image: repeating-linear-gradient(90deg, #000 0 var(--seam-tooth), transparent var(--seam-tooth) calc(var(--seam-tooth) * 2)); } .seam i:last-child { background-color: var(--seam-b); background-image: var(--seam-b-pattern); background-size: var(--seam-b-size); background-blend-mode: var(--seam-b-blend); } .seam i:last-child::after { background-color: var(--seam-a); background-image: var(--seam-a-pattern); background-size: var(--seam-a-size); background-blend-mode: var(--seam-a-blend); } .seam--stimmen-to-faq { --seam-a-pattern: radial-gradient(rgb(var(--cream-rgb) / .10) var(--pat-mid-dot), transparent calc(var(--pat-mid-dot) + .6px)); --seam-a-size: var(--pat-mid) var(--pat-mid); } .grey-surface { position: relative; isolation: isolate; background: var(--grey); color: var(--cream); } .grey-surface::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: var(--grain); opacity: calc(var(--ink-cover) * .7); mix-blend-mode: screen; } .grey-surface > * { position: relative; z-index: 2; } .grey-surface .kicker { color: var(--giallo); opacity: 1; } .grey-surface .headline { color: var(--cream); } .perf { height: 10px; background-image: radial-gradient(var(--ink) 1.8px, transparent 2.4px); background-size: 12px 10px; background-position: center; } .halftone { background-image: radial-gradient(var(--ink) var(--pat-mid-dot), transparent calc(var(--pat-mid-dot) + .6px)); background-size: var(--pat-mid) var(--pat-mid); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 13px 22px; font-size: var(--size-small); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; background: var(--ink); color: var(--paper); border: var(--frame-w) solid var(--ink); border-radius: 0; cursor: pointer; text-decoration: none; text-align: center; transition: transform var(--dur-fast) var(--ease-press), background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } .btn:hover { transform: translateY(-2px) rotate(var(--tilt-alt)); } .btn:active { transform: translateY(1px) scale(.985); opacity: .82; } .btn[disabled] { background: transparent; color: rgb(var(--grey-rgb) / .4); border-color: rgb(var(--grey-rgb) / .3); border-style: dashed; transform: none; cursor: not-allowed; } .btn--secondary { background: var(--paper); color: var(--ink); } .btn--rosso { background: var(--rosso); border-color: var(--rosso); color: var(--cream); } .btn--on-ink { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn--ghost { background: transparent; color: var(--ink); } .btn--on-ink.btn--ghost { background: transparent; color: var(--paper); } .btn--block { width: 100%; } .fomo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-8) var(--s-12); padding: 8px var(--gutter); background: var(--paper); color: var(--ink); border-bottom: var(--min-line) dashed rgb(var(--green-rgb) / .45); font-size: var(--size-micro); font-weight: 700; line-height: 1.35; letter-spacing: var(--track-label); text-transform: uppercase; text-align: center; text-decoration: none; } .fomo:hover { background: rgb(var(--green-rgb) / .1); } .fomo-cta { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .fomo-cta:empty { display: none; } .statsbar { position: sticky; top: 0; z-index: var(--layer-header); overflow: hidden; height: var(--statsbar-h); display: flex; align-items: center; background: var(--grey); color: var(--cream); } .statsbar-track { display: flex; flex: none; align-items: center; width: max-content; will-change: transform; animation: statsbar-loop 45s linear infinite; } @keyframes statsbar-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .statsbar-track { animation: none; } } .statsbar-track span { font-size: var(--size-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; padding: 0 var(--s-12); white-space: nowrap; } .nonna-mark { display: block; width: 100%; height: auto; fill: currentColor; } .preloader-img { color: var(--cream); } .header { position: sticky; top: var(--statsbar-h); z-index: var(--layer-header); background: var(--paper); border-bottom: var(--min-line) solid var(--ink); } .header-inner { display: flex; align-items: stretch; gap: var(--s-16); min-height: 56px; padding-block: 12px; position: relative; } .brand { display: inline-flex; align-items: center; flex: none; white-space: nowrap; font-family: var(--font-logo); font-weight: 400; font-size: clamp(24px, 6.4vw, 34px); line-height: 1; color: var(--ink-alt); text-decoration: none; } .header-nav { display: none; margin-left: auto; } .header-nav-ctas { display: none; } .header-nav > a { display: inline-flex; align-items: center; padding: 0 14px; white-space: nowrap; min-height: 56px; text-decoration: none; color: var(--ink); font-size: var(--size-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; border-left: var(--min-line) dashed rgb(var(--green-rgb) / .4); transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .header-nav > a:hover { background: rgb(var(--green-rgb) / .12); } .header-nav > a.is-active { background: var(--ink); color: var(--paper); } .header-cta { align-self: center; min-height: var(--tap); padding: 8px 14px; font-size: var(--size-micro); } @media (min-width: 1024px) { .header-nav { display: flex; } .header-cta { margin-left: var(--s-16); } .header-nav-ctas { display: none; } } @media (min-width: 1080px) { .header .wrap { padding-left: 24px; } } .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; flex: none; align-self: center; width: var(--tap); height: var(--tap); padding: 0 10px; background: none; border: 0; cursor: pointer; } .nav-burger span { display: block; height: var(--min-line); width: 100%; background: var(--ink); transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1023px) { .nav-burger { display: inline-flex; } .header-cta { display: none; } .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(15px, calc(8.9vw - 12px), 28px); } } @media (max-width: 1023px) { .header-nav { display: flex; flex-direction: column; position: fixed; inset: calc(var(--statsbar-h) + var(--header-h, 70px)) 0 auto 0; z-index: var(--layer-header); max-height: calc(100dvh - var(--statsbar-h) - var(--header-h, 70px)); overflow-y: auto; overscroll-behavior-y: contain; margin-left: 0; background: var(--paper); border-bottom: var(--min-line) solid var(--ink); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform var(--dur-base) steps(4), opacity var(--dur-base) steps(4); } .header-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .header-nav > a { padding: 14px var(--gutter); white-space: normal; border-left: 0; border-top: var(--min-line) dashed rgb(var(--green-rgb) / .4); } .header-nav > a:first-child { border-top: 0; } .header-nav-ctas { display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-16) var(--gutter) var(--s-24); border-top: var(--min-line) solid var(--ink); } .header-nav-ctas .btn { width: 100%; } } @media (min-width: 1024px) and (max-width: 1279px) { .brand { font-size: 24px; } .header-nav > a { padding: 0 10px; } } @media (min-width: 1280px) { .header-nav > a { white-space: nowrap; } } @media (max-width: 1023px) { .header-inner { justify-content: flex-end; } } .preloader { position: fixed; inset: 0; z-index: var(--layer-preload); display: none; place-items: center; background: var(--green); color: var(--cream); isolation: isolate; } .preloader::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: var(--ink-cover); mix-blend-mode: screen; } .preloader.is-on { display: grid; } .preloader-img { width: min(62vmin, 480px); transform: scale(var(--reveal-scale)); opacity: 0; } .preloader.is-on .preloader-img { animation: pre-stamp .5s var(--ease-press) .12s forwards; } @keyframes pre-stamp { to { transform: none; opacity: 1; } } .preloader.is-leaving { animation: pre-lift .55s var(--ease-soft) forwards; } @keyframes pre-lift { to { transform: translateY(-100%); } } .hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); min-height: min(96svh, 860px); padding: 0; background: var(--ink); color: var(--paper); border-bottom: 0; overflow: hidden; } .hero-photo { position: relative; grid-area: 1 / 1; z-index: 0; aspect-ratio: 1 / 1; max-height: 46svh; width: 100%; overflow: hidden; pointer-events: none; } .hero-photo i { position: absolute; inset: 0; display: block; background-image: url("../assets/img/hero-bg-event.jpg"); background-image: image-set(url("../assets/img/hero-bg-event.avif") type("image/avif"), url("../assets/img/hero-bg-event.jpg") type("image/jpeg")); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } .hero-photo::after { content: ""; position: absolute; inset: 0; background: rgb(var(--green-rgb) / .18); } .hero-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .hero-grain i { position: absolute; left: 0; right: 0; top: -30%; bottom: -30%; display: block; background-image: var(--grain); mix-blend-mode: multiply; will-change: transform; } .hero-grain i:nth-child(1) { background-size: 420px 420px; opacity: .16; } .hero-grain i:nth-child(2) { background-size: 180px 180px; opacity: .30; } .hero-inner { position: relative; z-index: 2; grid-area: 2 / 1; align-self: center; width: 100%; padding-block: var(--s-48) var(--s-64); } .hero-eyebrow { display: inline-block; font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); line-height: 1.35; text-transform: uppercase; color: var(--paper); border: var(--min-line) solid var(--paper); padding: 6px 12px; transform: none; } .hero-head { margin-top: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.55rem, 7.9vw, 6.4rem); line-height: .96; color: var(--paper); } .hero-head-lead { display: block; color: var(--ink-alt); margin-top: var(--s-24); } .hero-head-tail { display: block; } .hero-swap { display: grid; justify-items: start; } .hero-swap > span { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(.14em) scale(1.05); transform-origin: left center; } .js .hero-swap > span { transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease), visibility 0s linear var(--dur-reveal); } .hero-swap > span.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .hero-swap > span:first-child { opacity: 1; visibility: visible; transform: none; } .js .hero-swap > span:first-child:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(.14em) scale(1.05); } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-32); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; } .hero-photo { grid-area: 1 / 2; max-height: calc(100svh - 10rem); align-self: stretch; } .hero-photo i { background-position: right center; } .hero-inner { grid-area: 1 / 1; max-width: none; margin: 0; padding-inline: clamp(var(--gutter), 7%, 6rem); padding-block: var(--s-48); } .hero-head { font-size: clamp(1.9rem, 3.7vw, 3.4rem); } } @media (prefers-reduced-motion: reduce) { .hero-grain i, .hero-photo i { transform: none !important; } } .konf { display: grid; gap: var(--s-32); margin-top: var(--s-32); } @media (min-width: 960px) { .konf { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; } .konf .receipt-col { align-content: start; } .konf .receipt-sticky { position: sticky; top: 76px; height: fit-content; max-height: calc(100svh - 76px - var(--s-24)); grid-template-rows: auto minmax(0, 1fr) auto; } .konf .receipt-sticky .receipt { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); } .konf .receipt-sticky .receipt-body { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto auto; } .konf .receipt-sticky .rc-rows { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } } .konf-steps { display: grid; gap: var(--s-24); } .konf-step { border: var(--min-line) solid var(--ink); padding: var(--s-16); margin: 0; min-width: 0; } .konf-legend { font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); text-transform: uppercase; color: var(--ink); padding: 0 8px; margin-left: -8px; } .chips { display: flex; flex-wrap: wrap; gap: var(--s-8); } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 8px 14px; background: var(--paper); color: var(--ink); border: var(--min-line) solid var(--ink); border-radius: 0; cursor: pointer; font-size: var(--size-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; transition: transform var(--dur-fast) var(--ease-press), background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .chip:hover { transform: translateY(-2px); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); transform: rotate(var(--tilt)); } .menus { display: grid; gap: var(--s-12); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 700px) { .menus { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .menu-card { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--paper); color: var(--text); border: var(--min-line) solid var(--ink); border-radius: 0; padding: var(--s-16) var(--s-12) var(--s-12); cursor: pointer; transition: transform var(--dur-fast) var(--ease-press), box-shadow var(--dur-base) var(--ease); } .menu-card:hover { transform: translateY(-2px) rotate(var(--tilt-alt)); } .menu-card b { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--ink); line-height: 1; } .menu-card .price { font-variant-numeric: tabular-nums; font-size: var(--size-small); font-weight: 700; color: var(--rosso); } .menu-card .price small { font-weight: 400; color: var(--text-quiet); letter-spacing: 0; } .menu-card p { margin: 0; font-size: var(--size-micro); line-height: 1.5; color: var(--text-quiet); } .menu-card[aria-pressed="true"] { transform: rotate(var(--tilt)); box-shadow: 0 0 0 var(--frame-w) var(--ink); } .menu-card[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 6px; right: 6px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 700; transform: rotate(var(--tilt-alt)); } .menu-badge { position: absolute; top: -9px; left: 8px; z-index: 3; padding: 3px 8px; font-size: 10px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; transform: rotate(var(--tilt)); } .menu-badge--rosso { background: var(--rosso); color: var(--cream); } .menu-badge--giallo { background: var(--giallo); color: var(--grey); } .flow { position: relative; background: var(--paper); } .flow-stage { position: relative; padding: var(--s-32) 0; } .flow-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(92deg, rgb(var(--grey-rgb) / .045) 0 1px, transparent 1px var(--pat-fine)); } .flow-stage > * { position: relative; z-index: 1; } .flow-head { padding-top: var(--s-24); } .flow-track { display: grid; gap: var(--s-16); margin-top: var(--s-32); } .flow-step { border: var(--frame-w) solid var(--ink); background: var(--paper); padding: var(--s-24); box-shadow: inset 0 0 0 var(--min-line) var(--paper), inset 0 0 0 calc(var(--min-line) + var(--frame-gap)) var(--ink); display: flex; flex-direction: column; gap: var(--s-12); } .flow-step > * { margin: var(--frame-gap); } .flow-step .num { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--ink); } .flow-step h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--size-h3); color: var(--ink); } .flow-step p { font-size: var(--size-small); max-width: 40ch; } .flow-step:nth-child(even) { transform: rotate(var(--tilt-alt)); } .flow-step:nth-child(3) { transform: rotate(var(--tilt)); } @media (min-width: 700px) { .flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); } } .field-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--size-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 8px; } .field-hint { font-size: var(--size-micro); color: var(--text-quiet); letter-spacing: 0; text-transform: none; font-weight: 400; } .konf-persons { display: grid; gap: 6px; margin-top: var(--s-16); } .persons-head { display: flex; align-items: center; gap: var(--s-12); } .persons-head .field-label { flex: 1; margin: 0; } .persons-head .input { width: 88px; min-height: 44px; padding-inline: 8px; text-align: center; } .persons-row { display: block; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: var(--tap); background: transparent; margin: 0; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { height: var(--min-line); background: var(--ink); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -12px; background: var(--ink); border: var(--frame-w) solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper); border-radius: 0; transform: rotate(var(--tilt-alt)); } input[type="range"]::-moz-range-track { height: var(--min-line); background: var(--ink); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 var(--frame-w) var(--ink); border-radius: 0; } .input { width: 100%; min-width: 0; min-height: var(--field-h); padding: 10px 14px; font: inherit; color: var(--text); background: var(--paper); border: var(--min-line) solid var(--ink); border-radius: 0; background-image: repeating-linear-gradient(90deg, rgb(var(--green-rgb) / .16) 0 1px, transparent 1px 34px); transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .input:focus { outline: 0; box-shadow: inset 0 0 0 var(--frame-w) var(--ink); } .input[aria-invalid="true"] { border-color: var(--ink-alt); border-style: dashed; } textarea.input { min-height: 120px; resize: vertical; background-image: none; } .input::placeholder { color: rgb(var(--grey-rgb) / .42); } .extras { display: grid; gap: var(--s-12); } @media (min-width: 560px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .extra { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--s-12) var(--s-16); border: var(--min-line) solid var(--ink); color: var(--text); background: var(--paper); cursor: pointer; transition: background-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease-press), box-shadow var(--dur-base) var(--ease); } .extra:hover { transform: translateY(-2px); } .extra input { position: absolute; opacity: 0; pointer-events: none; } .extra:has(input:focus-visible) { outline: var(--min-line) solid var(--ink); outline-offset: 3px; } .extra .extra-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--size-small); font-weight: 700; color: var(--ink); letter-spacing: var(--track-label); text-transform: uppercase; flex-wrap: wrap; } .extra .price-tag { font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--rosso); white-space: nowrap; } .extra .extra-items { font-size: var(--size-micro); line-height: 1.55; color: var(--text-quiet); } .extra.is-on { box-shadow: 0 0 0 var(--frame-w) var(--ink); transform: rotate(var(--tilt-alt)); } .extra.is-on::after { content: "✓"; position: absolute; top: -10px; right: -8px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 700; transform: rotate(var(--tilt)); } .receipt { border: var(--frame-w) solid var(--ink); background: var(--paper); padding: var(--s-24); transform: rotate(var(--tilt-alt)); } .receipt-title { font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); text-transform: uppercase; color: var(--ink); } .rc-rows { margin-top: var(--s-16); } .rc-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: var(--size-small); font-variant-numeric: tabular-nums; } .rc-row .dots { flex: 1; border-bottom: var(--min-line) dotted rgb(var(--grey-rgb) / .45); } .rc-row .val { font-weight: 700; min-width: 84px; text-align: right; } .receipt-perf { height: 10px; margin: var(--s-12) calc(var(--s-24) * -1); background-image: radial-gradient(var(--ink) var(--pat-band-r), transparent calc(var(--pat-band-r) + .6px)); background-size: var(--pat-band) 10px; background-position: center; } .receipt-sum { display: flex; align-items: baseline; gap: 8px; padding-top: var(--s-8); } .receipt-sum b { font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); text-transform: uppercase; color: var(--ink); } .receipt-sum .dots { flex: 1; border-bottom: var(--min-line) dotted rgb(var(--grey-rgb) / .45); } .receipt-sum .val { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .receipt-note { margin-top: var(--s-12); font-size: var(--size-micro); color: var(--text-quiet); } .receipt .btn { margin-top: var(--s-16); } .receipt-occasion { display: none; margin-top: var(--s-8); font-size: var(--size-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); border: var(--min-line) solid var(--ink); padding: 4px 10px; width: fit-content; transform: rotate(var(--tilt)); } .receipt-occasion.is-on { display: block; } .quotes { display: grid; gap: var(--s-16); margin-top: var(--s-32); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .quote { border: var(--min-line) solid var(--ink); padding: var(--s-24); background: var(--paper); } .quote:nth-child(2) { transform: rotate(var(--tilt-alt)); } .quote p { font-size: var(--size-body); } .quote footer { margin-top: var(--s-16); font-size: var(--size-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); } .quote footer span { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-quiet); margin-top: 2px; } .grey-surface .quote { background: transparent; border-color: rgb(var(--cream-rgb) / .55); color: var(--cream); } .grey-surface .quote footer { color: var(--giallo); } .grey-surface .quote footer span { color: rgb(var(--cream-rgb) / .7); } .form-grid { display: grid; gap: var(--s-24); margin-top: var(--s-32); } @media (min-width: 900px) { .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } } .calcbox { border: var(--frame-w) solid var(--paper); padding: var(--s-24); } .calcbox h3 { font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); text-transform: uppercase; } .calcbox ul { list-style: none; margin: var(--s-12) 0 0; padding: 0; font-size: var(--size-small); font-variant-numeric: tabular-nums; } .calcbox li { display: flex; gap: 8px; padding: 5px 0; } .calcbox li .dots { flex: 1; border-bottom: var(--min-line) dotted rgb(var(--cream-rgb) / .45); } .calcbox li.sum { font-weight: 700; } .calcbox .empty { margin-top: var(--s-12); font-size: var(--size-small); opacity: .8; } .iform { display: grid; gap: var(--s-16); } .iform .row2 { display: grid; gap: var(--s-16); } @media (min-width: 560px) { .iform .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .iform .row2 > *, .konf-pair > * { min-width: 0; } @media (max-width: 559px) { input.input[type="date"] { padding-inline: 10px; font-size: 16px; } } .iform label > span:first-child { display: block; margin-bottom: 6px; font-size: var(--size-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; } .on-ink .input { border-color: var(--paper); background-color: rgb(var(--cream-rgb) / .96); } .on-ink .input:focus { box-shadow: inset 0 0 0 var(--frame-w) var(--grey); } .field-error { display: none; margin-top: 6px; font-size: var(--size-micro); font-weight: 700; letter-spacing: .04em; } .field-error.is-on { display: block; } .on-ink .field-error { color: var(--paper); } .on-ink .field-error::before { content: "→ "; } .form-email-note { margin-top: var(--s-16); color: var(--paper); font-size: var(--size-small); } .form-email-note a { color: inherit; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; } .form-email-note a:hover, .form-email-note a:focus-visible { color: var(--yellow); } .form-success { border: var(--frame-w) solid var(--paper); padding: var(--s-32); text-align: center; transform: rotate(var(--tilt)); } .form-success h3 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; } .form-success p { margin-top: var(--s-12); } .foto { display: block; position: relative; isolation: isolate; overflow: hidden; border: var(--frame-w) solid var(--ink); background: rgb(var(--grey-rgb) / .06); } .foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background-image: var(--grain); opacity: var(--foto-grain); mix-blend-mode: multiply; } .foto--tilt { transform: rotate(var(--tilt)); } .fakten { position: relative; background: var(--paper); } .fakten-stage { padding-top: var(--s-48); padding-bottom: var(--s-64); } .fakten-head { padding-top: var(--s-24); } .fakten .kicker { display: block; } .fakten-zickzack { position: relative; margin-top: var(--s-32); } .fakten-track { display: grid; gap: var(--s-24); } .fakt-zelle { position: relative; z-index: 1; } @media (min-width: 760px) { .fakten-track { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-24); row-gap: 0; } .fakt-zelle:nth-child(1) { grid-row: 1; grid-column: 1 / span 5; } .fakt-zelle:nth-child(2) { grid-row: 2; grid-column: 8 / span 5; } .fakt-zelle:nth-child(3) { grid-row: 3; grid-column: 2 / span 5; } .fakt-zelle:nth-child(4) { grid-row: 4; grid-column: 8 / span 5; } .fakt-zelle:nth-child(n + 2) { margin-top: calc(var(--s-48) * -1); } } .fakt { border: var(--frame-w) solid var(--ink); background: var(--paper); padding: var(--s-24); box-shadow: inset 0 0 0 var(--min-line) var(--paper), inset 0 0 0 calc(var(--min-line) + var(--frame-gap)) var(--ink); display: flex; flex-direction: column; gap: var(--s-8); transform: rotate(var(--tilt)); } .fakt > * { margin: var(--frame-gap); } .fakt-zelle:nth-child(even) .fakt { transform: rotate(var(--tilt-alt)); } .fakt-zeichen { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); min-height: 62px; color: var(--ink); } .fakt-num { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--ink); } .fakt-mark { width: 62px; height: 62px; flex: none; } .fakt-kopf { font-family: var(--font-display); font-weight: 400; font-size: var(--size-h3); color: var(--ink); margin-top: var(--s-8); } .fakt-text { font-size: var(--size-small); color: var(--text-quiet); max-width: 40ch; } .fakten-linie { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .fakten-linie path { stroke-width: var(--min-line); stroke-dasharray: 9 7; stroke-linecap: butt; vector-effect: non-scaling-stroke; } .fakten-linie-spur { stroke: rgb(var(--green-rgb) / .28); } .fakten-linie-zug { stroke: var(--ink); } .video-intro { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-pad) 0; background: var(--paper); } .video-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(92deg, rgb(var(--grey-rgb) / .045) 0 1px, transparent 1px var(--pat-fine)); } .video-intro-inner { position: relative; z-index: 1; } .video-intro-copy { display: none; } .video-intro-media { width: min(100%, 540px); margin: 0 auto; } .video-intro-clip { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--ink); } .video-intro-clip video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-intro-play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; } .video-intro-cap { margin-top: var(--s-16); width: fit-content; font-family: var(--font-accent); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-quiet); } @media (min-width: 700px) { .video-intro { padding: clamp(var(--s-32), 5svh, var(--s-64)) 0; } .video-intro-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(var(--s-32), 7vw, var(--s-96)); } .video-intro-copy { display: block; max-width: 31ch; justify-self: end; padding-bottom: var(--s-24); } .video-intro-copy .kicker { color: var(--ink); } .video-intro-copy .headline { color: var(--ink); } .video-intro-copy p:last-child { margin-top: var(--s-16); color: var(--text-quiet); max-width: 30ch; } .video-intro-media { width: fit-content; max-width: 100%; margin: 0; justify-self: start; } .video-intro-clip { display: inline-block; width: auto; height: min(64svh, 620px); aspect-ratio: 9 / 16; vertical-align: top; } } .atwork { position: relative; overflow: hidden; padding: var(--section-pad) 0; } .atwork-story { position: relative; z-index: 1; } .atwork-story .atwork-text { max-width: 62ch; margin: 0 auto; } .atwork-story .atwork-text::before { content: none; } .atwork-field { display: none; } .atwork-field, .atwork-text::before { background-image: var(--grain), radial-gradient(rgb(var(--green-rgb) / .16) var(--pat-mid-dot), transparent calc(var(--pat-mid-dot) + .6px)); background-size: 180px 180px, var(--pat-mid) var(--pat-mid); background-blend-mode: overlay, normal; } @media (min-width: 700px) { .atwork-field { display: block; position: absolute; z-index: 0; left: calc(var(--gutter) * -1); width: 52%; top: var(--s-48); bottom: var(--s-48); opacity: calc(var(--foto-grain) + .7); } } @media (max-width: 699px) { .atwork-text { position: relative; } .atwork-text::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: calc(var(--s-24) * -1); bottom: calc(var(--s-24) * -1); left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); opacity: calc(var(--foto-grain) + .33); } } .atwork-grid { position: relative; z-index: 1; display: grid; gap: var(--s-48); } @media (min-width: 700px) { .atwork-grid { grid-template-columns: minmax(260px, 380px) auto minmax(0, 1fr); align-items: center; } } .atwork-media { position: relative; margin: 0; } .atwork-clip { display: block; aspect-ratio: 4 / 5; } @media (min-width: 700px) { .atwork-clip { aspect-ratio: 9 / 16; } } @media (max-width: 480px) { .atwork-clip { margin-inline: -12px; } .js .atwork-media.reveal { transform: none; } } .atwork-clip video { width: 100%; height: 100%; object-fit: cover; display: block; } .atwork-perf { display: none; } @media (min-width: 700px) { .atwork-perf { display: block; width: var(--pat-band); align-self: stretch; background-image: radial-gradient(var(--hair) var(--pat-band-r), transparent calc(var(--pat-band-r) + .6px)); background-size: var(--pat-band) var(--pat-band); background-position: center; } } .atwork-cap { margin-top: var(--s-24); width: fit-content; font-family: var(--font-accent); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-quiet); transform: rotate(var(--tilt-alt)); } .headline--stamp { position: relative; width: fit-content; transform: rotate(var(--tilt)); transform-origin: left center; } .headline--stamp::before { content: ""; position: absolute; inset: -2px 0; z-index: 1; pointer-events: none; background-image: var(--grain); background-size: 180px 180px; opacity: var(--ink-cover); mix-blend-mode: screen; } .headline--stamp::after { position: relative; z-index: 2; } .atwork-say { max-width: var(--measure); margin-top: var(--s-24); } .atwork-say p { line-height: var(--lead-body); } .atwork-say p + p { margin-top: var(--s-24); } .atwork-say .glasses { display: flex; justify-content: center; align-items: center; gap: 4px; width: 34px; margin: var(--s-32) auto; color: var(--text-quiet); } .atwork-say .glasses i { display: block; width: 13px; height: 9px; border: var(--min-line) solid currentColor; border-radius: 50%; } .druck img { filter: var(--img-filter); } .druck::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--ink); mix-blend-mode: multiply; opacity: .78; } .ph-note { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; gap: 4px; text-align: center; background-image: linear-gradient(45deg, transparent calc(50% - .5px), rgb(var(--grey-rgb) / .3) 50%, transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), rgb(var(--grey-rgb) / .3) 50%, transparent calc(50% + .5px)); } .ph-note b, .ph-note small { justify-self: center; background: var(--cream); padding: 3px 8px; border: 1px solid var(--hair); font-size: var(--size-micro); letter-spacing: var(--track-label); text-transform: uppercase; } .ph-note small { text-transform: none; letter-spacing: 0; } .foto.has-img .ph-note { display: none; } .momente { display: grid; gap: var(--s-24); margin-top: var(--s-48); } .moment { position: relative; isolation: isolate; aspect-ratio: 4 / 5; } .moment img { width: 100%; height: 100%; object-fit: cover; display: block; } .moment picture { display: block; height: 100%; } .moment-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgb(var(--grey-rgb) / .90) 0%, rgb(var(--grey-rgb) / .62) 34%, rgb(var(--grey-rgb) / .10) 68%, transparent 100%); } .moment-body { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: var(--s-24) var(--s-16) var(--s-16); color: var(--cream); } .moment-body .kicker { display: block; color: var(--giallo); opacity: 1; } .moment-body h3 { margin-top: var(--s-8); font-family: var(--font-body); font-weight: 700; font-size: var(--size-h3); line-height: 1.25; color: var(--cream); } .moment-body p { margin-top: var(--s-8); font-size: var(--size-small); color: rgb(var(--cream-rgb) / .84); max-width: 42ch; } @media (hover: hover) and (min-width: 900px) { .momente { display: flex; gap: var(--frame-w); height: min(74svh, 640px); margin-top: var(--s-48); } .moment { flex: 1 1 0; min-width: 0; aspect-ratio: auto; transition: flex-grow var(--dur-reveal) var(--ease); } .momente:hover .moment { flex-grow: .74; } .momente .moment:hover, .momente .moment:focus-within { flex-grow: 3.6; } .moment-body { padding: var(--s-32) var(--s-16) var(--s-24); } .moment-more { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows var(--dur-reveal) var(--ease), opacity var(--dur-base) var(--ease); } .moment-more > * { min-height: 0; } .momente .moment:hover .moment-more, .momente .moment:focus-within .moment-more { grid-template-rows: 1fr; opacity: 1; } .moment-body .kicker { white-space: nowrap; } } .galerie { --nacht: #0D0B09; --kachel: #1A1613; position: relative; height: 450svh; background: var(--nacht); } @media (min-width: 900px) { .galerie { height: 600svh; } } .galerie-stage { position: sticky; top: 0; height: 100svh; width: 100%; display: grid; place-items: center; overflow: hidden; } .galerie-rahmen { position: relative; width: 90vw; height: 80svh; max-width: 1920px; border-radius: 48px; border: 4px solid rgb(var(--green-rgb) / .55); background: #000; overflow: hidden; } .galerie-tiefe { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1000px; pointer-events: none; } .galerie-matrix { display: flex; gap: var(--s-12); justify-content: center; align-items: center; width: 120vw; height: 150svh; transform-style: preserve-3d; will-change: transform; } .galerie-spalte { display: flex; flex-direction: column; gap: var(--s-12); width: 22vw; min-width: 128px; will-change: transform; } .galerie-kachel { flex: none; width: 100%; height: 160px; background: var(--kachel); overflow: hidden; } .galerie-kachel picture { display: block; height: 100%; } .galerie-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; } .galerie-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 100px 150px -50px var(--nacht), inset 0 -100px 150px -50px var(--nacht), inset 150px 0 150px -50px var(--nacht), inset -150px 0 150px -50px var(--nacht); } .galerie-titel { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--s-48); padding: 0 var(--gutter); text-align: center; pointer-events: none; } .galerie-titel .kicker { color: var(--giallo); } .galerie-titel .headline { color: var(--cream); margin-top: var(--s-8); } @media (min-width: 700px) { .galerie-matrix { gap: var(--s-24); } .galerie-spalte { gap: var(--s-24); min-width: 200px; } .galerie-kachel { height: 300px; } } @media (min-width: 1000px) { .galerie-kachel { height: 400px; } } .galerie.is-still, html:not(.js) .galerie { height: auto; } .galerie.is-still .galerie-stage, html:not(.js) .galerie .galerie-stage { position: static; height: auto; padding: var(--section-pad) 0; } .galerie.is-still .galerie-rahmen, html:not(.js) .galerie .galerie-rahmen { width: 100%; height: auto; border-radius: 0; border-width: 0; background: transparent; } .galerie.is-still .galerie-tiefe, html:not(.js) .galerie .galerie-tiefe { position: static; perspective: none; pointer-events: auto; } .galerie.is-still .galerie-matrix, html:not(.js) .galerie .galerie-matrix { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; height: auto; transform: none; padding: 0 var(--gutter); } .galerie.is-still .galerie-spalte, html:not(.js) .galerie .galerie-spalte { width: auto; min-width: 0; transform: none; } .galerie.is-still .galerie-vignette, html:not(.js) .galerie .galerie-vignette { display: none; } .galerie.is-still .galerie-kachel--kopie, html:not(.js) .galerie .galerie-kachel--kopie { display: none; } .galerie.is-still .galerie-titel, html:not(.js) .galerie .galerie-titel { position: static; text-align: left; margin-bottom: var(--s-32); opacity: 1; } @media (min-width: 900px) { .galerie.is-still .galerie-matrix, html:not(.js) .galerie .galerie-matrix { grid-template-columns: repeat(4, 1fr); } } .footer { border-top: var(--min-line) solid var(--ink); padding: var(--s-32) 0; } .footer-inner { display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-24); justify-content: space-between; align-items: baseline; font-size: var(--size-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-quiet); } .footer a { color: var(--ink); text-underline-offset: 3px; } .js .reveal { opacity: 0; transform: scale(var(--reveal-scale)); transition: opacity var(--dur-reveal) var(--ease-soft), transform var(--dur-reveal) var(--ease-press); transition-delay: calc(var(--i, 0) * var(--stagger)); } .js .reveal.is-in { opacity: 1; transform: none; } .js .occasion.reveal.is-in:hover { transform: translateY(-2px) rotate(var(--tilt-alt)); } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } .headline::after { content: ""; display: block; width: 64px; margin-top: var(--s-16); height: calc(var(--min-line) * 2 + var(--rule-double-gap)); background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0); background-size: 100% var(--min-line); background-position: 0 0, 0 100%; background-repeat: no-repeat; } .karton { background-image: repeating-linear-gradient(92deg, rgb(var(--grey-rgb) / .045) 0 1px, transparent 1px var(--pat-fine)); } .btn--grey { background: var(--grey); border-color: var(--grey); color: var(--cream); } .btn--small { min-height: var(--tap); padding: 9px 14px; font-size: var(--size-micro); } .linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); } .list-brille { list-style: none; margin: var(--s-12) 0 0; padding: 0; } .list-brille li { position: relative; padding-left: 32px; margin-top: var(--s-8); } .list-brille li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 12px 0 0 currentColor; } .brille-rule { display: flex; align-items: center; justify-content: center; gap: 5px; padding: var(--s-48) var(--gutter); color: var(--ink); } .brille-rule::before, .brille-rule::after { content: ""; height: var(--min-line); background: currentColor; flex: 1 1 auto; max-width: 200px; } .brille-rule i { display: block; width: 26px; height: 18px; border: var(--min-line) solid currentColor; border-radius: 50%; } .nonna-scroll { position: relative; display: block; flex: none; width: 34px; height: 34px; color: var(--ink); } .nonna-scroll-icon { display: block; width: 100%; height: 100%; fill: currentColor; } .nonna-scroll-lens { position: absolute; overflow: hidden; border-radius: 50%; background: transparent; } .nonna-scroll-lens--l { left: 10.3%; top: 43.1%; width: 29.4%; height: 21.8%; transform: rotate(8.6deg); } .nonna-scroll-lens--r { left: 43.4%; top: 43.2%; width: 29.5%; height: 21.2%; transform: rotate(-9.3deg); } .nonna-scroll-lens i { display: block; width: 100%; height: 100%; background: var(--rosso); transform: scaleX(0); transform-origin: left center; } @media (max-width: 520px) { .nonna-scroll { display: none; } } .nonna-face { flex: none; width: var(--nn-size, 46px); color: var(--grey); } .nonna-face--sm { --nn-size: 46px; } .nonna-face--sig { --nn-size: 48px; } .on-ink .nonna-face { color: var(--paper); } .nonna-say { display: flex; align-items: flex-start; gap: var(--s-12); margin-bottom: var(--s-16); } .nonna-say--wide { margin-top: var(--s-24); } .nonna-say--center { justify-content: center; margin-top: var(--s-24); margin-bottom: 0; } .nonna-bubble { position: relative; width: fit-content; max-width: 34ch; padding: 10px 14px; font-family: var(--font-accent); font-weight: 700; font-size: var(--size-small); line-height: 1.4; background: var(--paper); color: var(--grey); border: var(--frame-w) solid var(--grey); transform: rotate(var(--tilt-alt)); } .nonna-bubble::after { content: ""; position: absolute; left: 18px; bottom: calc(var(--frame-w) * -1 - 9px); width: 12px; height: 12px; background: var(--paper); border-left: var(--frame-w) solid var(--grey); border-bottom: var(--frame-w) solid var(--grey); transform: rotate(-45deg); } .nonna-bubble--ink { background: var(--green); color: var(--cream); border-color: var(--cream); } .nonna-bubble--ink::after { background: var(--green); border-color: var(--cream); } .nonna-bubble--inline { margin-top: var(--s-16); transform: rotate(var(--tilt)); } .konf-pair { display: grid; gap: var(--s-16); margin-top: var(--s-16); } @media (min-width: 560px) { .konf-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .konf-pair .field-hint { display: block; margin-top: 6px; } .field-hint.is-warn { color: var(--rosso); font-weight: 700; } .step-note { margin-top: var(--s-8); font-size: var(--size-small); color: var(--text-quiet); } .restore { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); margin-top: var(--s-16); padding: var(--s-8) var(--s-12); width: fit-content; border: var(--min-line) dashed var(--ink); color: var(--ink); font-size: var(--size-small); } .sorten { display: grid; gap: var(--s-8); margin-top: var(--s-16); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .sorte { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: var(--tap); padding: var(--s-12); text-align: left; cursor: pointer; background: var(--paper); color: var(--text); border: var(--min-line) solid var(--ink); border-radius: 0; transition: transform var(--dur-fast) var(--ease-press), box-shadow var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } .sorte:hover:not(:disabled) { transform: translateY(-2px); } .sorte b { font-size: var(--size-small); font-weight: 700; color: var(--ink); } .sorte-belag { font-size: var(--size-micro); line-height: 1.5; color: var(--text-quiet); } .sorte-veg { width: fit-content; margin-top: 2px; padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; background: var(--giallo); color: var(--grey); } .sorte[aria-pressed="true"] { box-shadow: 0 0 0 var(--frame-w) var(--ink); } .sorte[aria-pressed="true"]::after { content: "✓"; position: absolute; top: -10px; right: -8px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 700; } .sorte.is-off { opacity: .42; cursor: not-allowed; border-style: dashed; } .sorten-fix { margin-top: var(--s-16); color: var(--text); font-size: var(--size-small); } .sorten-fix b { color: var(--ink); } .sorten-karte { grid-column: 1 / -1; margin-top: var(--s-8); font-family: var(--font-accent); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); padding-bottom: 4px; border-bottom: var(--min-line) solid var(--ink); } .sorten-karte:first-child { margin-top: 0; } .sorte-lock { display: none; width: fit-content; margin-top: 2px; padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; border: var(--min-line) dashed var(--ink); color: var(--ink); } .sorte.is-locked { opacity: .55; cursor: not-allowed; border-style: dashed; } .sorte.is-locked .sorte-lock { display: block; } .sorte.is-locked .sorte-veg { display: none; } .extra--wunsch .price-tag { color: var(--ink); font-variant-numeric: normal; letter-spacing: var(--track-label); text-transform: uppercase; font-size: var(--size-micro); } .satt-warn { margin-top: var(--s-16); padding: var(--s-8) var(--s-12); border: var(--min-line) dashed var(--ink); color: var(--ink); font-size: var(--size-small); } @keyframes sn-stamp { 0% { transform: scale(1.04); } 100% { transform: none; } } .js .is-stamp { animation: sn-stamp var(--dur-fast) var(--ease-press); } .receipt-col { display: grid; gap: var(--s-16); } .receipt-sticky { display: grid; gap: var(--s-16); align-content: start; } .konf-after { display: grid; gap: var(--s-16); margin-top: var(--s-32); } @media (min-width: 960px) { .konf-after { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--s-32); align-items: start; } .konf-after .why, .konf-after .receipt-actions { grid-column: 1; } .konf-after .quote--price { grid-column: 2; grid-row: 1 / span 2; } } .rc-group + .rc-group { margin-top: var(--s-16); } .rc-head { font-family: var(--font-accent); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); padding-bottom: 4px; border-bottom: var(--min-line) solid var(--ink); } .rc-incl { padding-top: 4px; } .rc-line { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: var(--size-micro); color: var(--text-quiet); } .rc-line .dots { flex: 1; border-bottom: 1px dotted rgb(var(--grey-rgb) / .3); } .rc-amount { padding-top: 6px; text-align: right; font-weight: 700; font-size: var(--size-small); font-variant-numeric: tabular-nums; } .rc-note { padding: 6px 0; font-size: var(--size-micro); color: var(--text-quiet); } .rc-row.is-strong { font-weight: 700; } .rc-per { margin-top: 4px; text-align: right; font-size: var(--size-small); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rosso); } @keyframes rc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .js .rc-row.is-new { animation: rc-in var(--dur-reveal) steps(6, end) both; } .why { border: var(--min-line) solid var(--ink); padding: var(--s-12) var(--s-16); font-size: var(--size-small); } .why > summary { cursor: pointer; list-style: none; min-height: var(--tap); display: flex; align-items: center; gap: 10px; font-family: var(--font-accent); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; font-size: var(--size-label); color: var(--ink); } .why > summary::-webkit-details-marker { display: none; } .why > summary::before { content: "+"; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: var(--min-line) solid var(--ink); } .why[open] > summary::before { content: "–"; } .why > p { margin-top: var(--s-12); color: var(--text-quiet); } .receipt-actions { display: grid; gap: var(--s-12); } .share-row { display: flex; flex-wrap: wrap; gap: var(--s-8); } .share-row .btn { flex: 1 1 auto; } .share-note { display: none; font-size: var(--size-micro); color: var(--ink); font-weight: 700; } .share-note.is-on { display: block; } .quote--price { background: var(--paper); } .quote--price p { font-size: var(--size-small); } .oven { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: var(--s-12); } .oven-label { font-family: var(--font-accent); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-quiet); } .oven-val { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .oven-unit { font-weight: 700; color: var(--ink); } .pay-card { border: var(--frame-w) solid var(--ink); background: var(--paper); padding: var(--s-32) var(--s-24); transform: rotate(var(--tilt)); background-image: repeating-linear-gradient(92deg, rgb(var(--grey-rgb) / .045) 0 1px, transparent 1px var(--pat-fine)); } .pay-grid { display: grid; gap: var(--s-32); margin-top: var(--s-24); } @media (min-width: 700px) { .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pay-grid h3 { font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); text-transform: uppercase; color: var(--ink); } .pay-grid .list-brille { color: var(--text); } .pay-grid .list-brille li::before { background: var(--ink); box-shadow: 12px 0 0 var(--ink); } .pay-note { margin-top: var(--s-24); font-size: var(--size-small); color: var(--text-quiet); max-width: var(--measure); } .fpart { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-16); } .fpart > legend { padding: 0; margin-bottom: var(--s-8); font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); text-transform: uppercase; } .form-event-fields { display: grid; gap: var(--s-16); } .form-event-title { margin-bottom: calc(var(--s-8) * -1); font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); text-transform: uppercase; } .form-calc-note { padding: var(--s-12) var(--s-16); border: var(--min-line) solid rgb(var(--cream-rgb) / .7); font-size: var(--size-small); line-height: 1.4; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .next-steps { list-style: none; margin: var(--s-24) 0 0; padding: 0; text-align: left; display: grid; gap: var(--s-12); } .next-steps li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-12); align-items: baseline; } .next-steps b { font-family: var(--font-accent); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--track-label); text-transform: uppercase; border: var(--min-line) solid currentColor; padding: 3px 6px; text-align: center; } .next-steps span { font-size: var(--size-small); } .signature { border-top: var(--min-line) solid var(--ink); padding: var(--s-32) 0 var(--s-24); } .signature-inner { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-16); } .signature-name { font-family: var(--font-accent); font-weight: 700; font-style: italic; font-size: var(--size-h3); color: var(--ink); transform: rotate(var(--tilt)); } .pricebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--layer-header); display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); min-height: var(--tap); padding: 10px var(--gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--paper); border: 0; border-top: var(--frame-w) solid var(--ink); font: inherit; text-align: left; cursor: pointer; } .pricebar-l { display: grid; } .pricebar-l b { font-size: var(--size-lead); font-weight: 700; font-variant-numeric: tabular-nums; } .pricebar-l small { font-size: var(--size-micro); opacity: .85; font-variant-numeric: tabular-nums; } .pricebar-r { font-size: var(--size-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; border: var(--min-line) solid var(--paper); padding: 8px 12px; } body.has-pricebar { padding-bottom: 84px; } @media (min-width: 700px) { .pricebar { display: none; } body.has-pricebar { padding-bottom: 0; } } .sheet { position: fixed; inset: auto 0 0 0; z-index: var(--layer-preload); width: 100%; max-width: none; max-height: 88svh; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--text); border-top: var(--frame-w) solid var(--ink); overflow: auto; } .sheet::backdrop { background: rgb(var(--grey-rgb) / .62); } .sheet-inner { padding: var(--s-16) var(--gutter) calc(var(--s-24) + env(safe-area-inset-bottom)); } .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); } .sheet-close { min-width: var(--tap); min-height: var(--tap); background: var(--paper); color: var(--ink); border: var(--min-line) solid var(--ink); border-radius: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; } .sheet-perf { height: 10px; background-image: radial-gradient(var(--ink) var(--pat-band-r), transparent calc(var(--pat-band-r) + .6px)); background-size: var(--pat-band) 10px; background-position: left center; transform-origin: left center; } .sheet.is-open .sheet-perf { animation: perf-tear var(--dur-reveal) steps(4, end) both; } @keyframes perf-tear { from { transform: scaleX(.15); } to { transform: none; } } .sheet .btn { margin-top: var(--s-16); } @media (prefers-reduced-motion: reduce) { .js .rc-row.is-new, .js .is-stamp, .sheet.is-open .sheet-perf { animation: none; } } .faq { margin-top: var(--s-48); max-width: 78ch; border-top: var(--min-line) solid var(--ink); } .faq-item { border-bottom: var(--min-line) solid var(--ink); } .faq-q { display: flex; align-items: center; gap: var(--s-16); min-height: var(--tap); padding: var(--s-16) 0; list-style: none; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: var(--size-body); line-height: 1.35; color: var(--ink); } .faq-q::-webkit-details-marker { display: none; } .faq-q:focus-visible { outline: var(--min-line) solid var(--ink); outline-offset: 3px; } .faq-mark { flex: none; margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border: var(--min-line) solid var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1; } .faq-mark::before { content: "+"; } .faq-item[open] .faq-mark::before { content: "–"; } .js .faq-mark { transition: transform var(--dur-base) var(--ease); } .faq-item[open] .faq-mark { transform: rotate(var(--tilt-alt)); } .faq-a { overflow: hidden; } .js .faq-a { transition: height var(--dur-reveal) var(--ease-soft); } .faq-a p { padding-bottom: var(--s-24); padding-right: var(--s-48); max-width: var(--measure); color: var(--text-quiet); line-height: var(--lead-body); } @media (min-width: 700px) { .faq-q { font-size: var(--size-lead); } } @media (prefers-reduced-motion: reduce) { .js .faq-a { transition: none; } } .upsell-grid { display: grid; gap: var(--s-24); margin-top: var(--s-32); } @media (min-width: 860px) { .upsell-grid { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: var(--s-48); align-items: start; } .upsell-list { order: 1; } .upsell-stage { order: 2; } } .upsell-list { display: flex; gap: var(--s-8); } @media (min-width: 860px) { .upsell-list { flex-direction: column; align-items: stretch; } } @media (max-width: 859px) { .upsell-list { overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: var(--s-8); overscroll-behavior-x: contain; } .upsell-pill { flex: none; scroll-snap-align: start; } } .upsell-pill { display: inline-flex; align-items: center; text-align: left; min-height: var(--tap); padding: 8px 14px; background: var(--paper); color: var(--ink); border: var(--min-line) solid var(--ink); border-radius: 0; cursor: pointer; font-size: var(--size-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; transition: transform var(--dur-fast) var(--ease-press), background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .upsell-pill:hover { transform: translateY(-2px); } .upsell-pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); transform: rotate(var(--tilt)); } .upsell-stage { display: grid; position: relative; isolation: isolate; } @media (min-width: 860px) { .upsell-stage { padding-inline: 6%; } } .upsell-card { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: var(--s-12); text-align: left; font: inherit; color: var(--text); background: var(--paper); border: var(--min-line) solid var(--ink); border-radius: 0; padding: var(--s-12) var(--s-12) var(--s-16); transition: transform var(--dur-reveal) var(--ease), opacity var(--dur-reveal) var(--ease); } .upsell-card--add { cursor: pointer; } .upsell-card[data-upsell-pos="0"] { opacity: 1; transform: none; z-index: 3; } .upsell-card[data-upsell-pos="-1"], .upsell-card[data-upsell-pos="1"], .upsell-card[data-upsell-pos="weg"] { opacity: 0; z-index: 1; pointer-events: none; transform: scale(.9); } @media (min-width: 860px) { .upsell-card[data-upsell-pos="-1"], .upsell-card[data-upsell-pos="1"] { opacity: .3; z-index: 2; } .upsell-card[data-upsell-pos="-1"] { transform: translateX(-11%) scale(.9); } .upsell-card[data-upsell-pos="1"] { transform: translateX(11%) scale(.9); } } .upsell-card:has(:focus-visible), .upsell-card:focus-visible { outline: var(--min-line) solid var(--ink); outline-offset: 3px; } .upsell-card--add[data-upsell-pos="0"]:hover { transform: translateY(-2px); } .upsell-shot { display: block; position: relative; aspect-ratio: 4 / 3; } @media (min-width: 860px) { .upsell-shot { aspect-ratio: 3 / 2; } } .upsell-shot picture, .upsell-shot img { display: block; width: 100%; height: 100%; object-fit: cover; } .upsell-body { display: flex; flex-direction: column; gap: 6px; flex: 1; } .upsell-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .upsell-head b { font-family: var(--font-display); font-weight: 400; font-size: var(--size-h3); line-height: 1; color: var(--ink); } .upsell-text { font-size: var(--size-small); line-height: var(--lead-body); color: var(--text-quiet); } .upsell-flag { align-self: start; margin-top: auto; font-family: var(--font-accent); font-weight: 700; font-size: var(--size-small); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper); background: var(--ink); border: var(--frame-w) solid var(--ink); padding: 10px 18px; } .upsell-card:not(.upsell-card--add) .upsell-flag { color: var(--ink); background: transparent; border-color: var(--hair); } .upsell-card.is-on { box-shadow: 0 0 0 var(--frame-w) var(--ink); } .upsell-card.is-on .upsell-flag { background: var(--paper); color: var(--ink); border-color: var(--ink); } .upsell-card.is-on[data-upsell-pos="0"]::after { content: "✓"; position: absolute; top: -10px; right: -8px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 700; transform: rotate(var(--tilt)); z-index: 4; } @media (prefers-reduced-motion: reduce) { .upsell-card { transition: none; } .upsell-list { scroll-behavior: auto; } } .footer-themen { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-12); margin-top: var(--s-16); font-size: var(--size-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-quiet); } .footer-themen a { color: var(--text-quiet); text-underline-offset: 3px; } .footer-themen a:hover { color: var(--ink); } .fakt-links { margin: 1rem 0 0; font-size: .9rem; line-height: 1.6; } .fakt-links a { color: inherit; text-decoration: underline; text-underline-offset: .2em; } .fakt-links a:hover { text-decoration-thickness: 2px; } .fakt-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.nc-detail{display:none;pointer-events:none} body.nc-details-on .nc-detail:not([data-off]){display:block} .nc-sketch{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none} .nc-cropmarks{position:absolute;inset:12px;z-index:3;color:var(--cream);pointer-events:none} .nc-cropmarks:before,.nc-cropmarks:after{content:"";position:absolute;width:18px;height:18px;border-color:currentColor;border-style:solid} .nc-cropmarks:before{left:0;top:0;border-width:2px 0 0 2px} .nc-cropmarks:after{right:0;bottom:0;border-width:0 2px 2px 0} .video-intro-clip{position:relative} .nc-video-caption{height:7px;width:42px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;margin-top:9px} #menu .wrap{position:relative} .nc-menu-sprig{position:absolute;right:20px;top:2px;color:var(--green);transform:rotate(9deg);line-height:0} .nc-menu-sprig svg{width:58px;height:68px} .nc-ticket-corner{position:absolute;right:20px;top:17px;color:var(--green)} .nc-ticket-corner svg{width:31px;height:17px;fill:currentColor;stroke:none} .receipt{position:relative} .nc-menu-selected{position:absolute;right:7px;bottom:8px;color:inherit} .nc-menu-selected svg{width:23px;height:13px;fill:currentColor;stroke:none} .menu-option,.menu-card,.menu-pick{position:relative} .nc-menu-selected{visibility:hidden} [aria-checked="true"] .nc-menu-selected,[aria-pressed="true"] .nc-menu-selected,input:checked~.nc-menu-selected,.is-on .nc-menu-selected,.is-selected .nc-menu-selected{visibility:visible} .atwork-text{position:relative} .nc-story-detail{width:72px;height:48px;color:var(--green);margin:18px 0 0} .nc-story-detail svg{width:72px;height:48px} .nc-gallery-corners{inset:27px;color:var(--cream)} .nc-gallery-corners:before,.nc-gallery-corners:after{width:25px;height:25px} .nc-faq-number{font:700 12px/1 "Zilla Slab",Georgia,serif;color:var(--green);flex:0 0 21px;min-width:21px;margin-right:10px;align-self:center;letter-spacing:.08em} body.nc-details-on .nc-faq-number:not([data-off]){display:inline-block} .order-sheet,.iform{position:relative} .nc-sheet-edge{position:absolute;left:0;right:0;top:-5px;height:10px;overflow:hidden;color:var(--cream)} .nc-sheet-edge svg{display:block;width:100%;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:1 10} .nc-form-sketch{position:absolute;right:15px;top:0;color:var(--cream)} .nc-form-sketch svg{width:27px;height:29px} body.nc-details-on.nc-refine-selection .menu-card[aria-pressed="true"]::after{top:-10px;right:-8px;width:24px;height:24px} body.nc-details-on.nc-refine-answers .faq-item:has(.nc-faq-number:not([data-off])) .faq-a p{padding-left:47px;max-width:calc(var(--measure) + 47px)} .nc-link-arrow{width:13px;height:13px;margin-left:6px;vertical-align:-1px;line-height:0} body.nc-details-on .nc-link-arrow:not([data-off]){display:inline-block} .nc-link-arrow svg{width:13px;height:13px;display:block} @media(max-width:700px){ .nc-menu-sprig{right:20px;top:-8px} .nc-menu-sprig svg{width:31px;height:40px} .nc-gallery-corners{inset:18px} .nc-form-sketch{right:12px;top:0} .nc-faq-number{flex-basis:18px;min-width:18px;margin-right:7px} body.nc-details-on.nc-refine-answers .faq-item:has(.nc-faq-number:not([data-off])) .faq-a p{padding-left:41px} } @media(prefers-reduced-motion:reduce){.nc-detail{animation:none!important;transition:none!important}}
.nc-menu-overview { margin-top: var(--s-32); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; color: var(--green); font-family: var(--font-body); } .nc-menu-overview summary { padding: var(--s-16) 0; cursor: pointer; font-weight: 700; } .nc-menu-overview summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .nc-menu-overview-body { padding-bottom: var(--s-24); } .nc-menu-overview-body p { max-width: 75ch; line-height: 1.6; } .nc-menu-overview-body h3 { margin: var(--s-24) 0 var(--s-16); font-size: 1.05rem; } .nc-menu-overview-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16) var(--s-32); } .nc-menu-overview-list li { display: grid; gap: .25rem; line-height: 1.5; } .nc-menu-overview-list span { font-size: .95rem; } @media (max-width: 599px) { .nc-menu-overview-list { grid-template-columns: minmax(0, 1fr); } } #nc-rechner-preview { --nc-paper: #252b24; --nc-ink: var(--cream); --nc-green: #b4c8a2; --nc-line: #7b8f74; --nc-soft: #354031; --nc-muted: #c0bfac; --nc-error: #efb28f; --nc-sorten-paper: #33422f; font-family: var(--font-body); } #nc-rechner-preview * { box-sizing: border-box; } #nc-rechner-preview [hidden] { display: none !important; } #nc-rechner-preview .nc-preview-label { margin: 0 0 var(--s-16); color: var(--text-quiet); font-size: var(--size-micro); line-height: 1.6; } #nc-rechner-preview .nc-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-24); margin-bottom: var(--s-32); padding-right: var(--s-48); } #nc-rechner-preview .nc-heading-copy { min-width: 0; } #nc-rechner-preview .nc-header .headline { font-family: var(--font-display); font-size: var(--size-h2); line-height: 1.14; font-weight: 400; text-transform: uppercase; text-wrap: balance; color: var(--green); } #nc-rechner-preview .nc-header .section-note { font-size: var(--size-body); line-height: 1.6; } #nc-rechner-preview .nc-reset { flex: 0 0 auto; border: 0; border-bottom: var(--min-line) solid currentColor; background: transparent; padding: 6px 0; color: var(--green); font: 500 var(--size-small)/1.4 var(--font-body); cursor: pointer; } #nc-rechner-preview .nc-reset:hover { color: var(--grey); } #nc-rechner-preview .nc-product { border: var(--min-line) solid var(--green); padding: var(--s-24); background-color: var(--nc-paper); background-image: repeating-linear-gradient(92deg, rgb(var(--cream-rgb) / .017) 0 1px, transparent 1px var(--pat-fine)); color: var(--nc-ink); color-scheme: dark; } #nc-rechner-preview .nc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-24); align-items: start; } #nc-rechner-preview .nc-form { display: grid; gap: var(--s-24); min-width: 0; } #nc-rechner-preview fieldset { min-width: 0; margin: 0; padding: var(--s-16); border: var(--min-line) solid var(--nc-line); } #nc-rechner-preview legend { padding: 0 var(--s-8); color: var(--nc-ink); font: 700 var(--size-label)/1.5 var(--font-accent); letter-spacing: var(--track-label); text-transform: uppercase; } #nc-rechner-preview label { display: block; font-size: var(--size-small); font-weight: 500; line-height: 1.45; } #nc-rechner-preview .nc-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-16); } #nc-rechner-preview .nc-fields label { display: grid; grid-template-rows: auto var(--field-h); gap: var(--s-8); align-content: start; } #nc-rechner-preview .nc-field-label { display: flex; align-items: flex-end; min-height: 0; } #nc-rechner-preview input[type=number], #nc-rechner-preview input[type=text], #nc-rechner-preview input[type=date], #nc-rechner-preview select, #nc-rechner-preview textarea { display: block; width: 100%; min-width: 0; min-height: var(--field-h); border: var(--min-line) solid var(--nc-line); border-radius: 0; background: var(--nc-paper); color: var(--nc-ink); font: 400 1rem/1.4 var(--font-body); padding: 10px 12px; margin-top: var(--s-8); } #nc-rechner-preview .nc-fields input, #nc-rechner-preview .nc-fields select { margin-top: 0; height: var(--field-h); } #nc-rechner-preview input[type=checkbox], #nc-rechner-preview input[type=radio] { accent-color: var(--nc-green); width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; } #nc-rechner-preview .nc-product :focus-visible { outline: 2px solid var(--nc-green); outline-offset: 4px; } #nc-rechner-preview .nc-help { margin: var(--s-12) 0 0; color: var(--nc-muted); font-size: var(--size-small); line-height: 1.6; } #nc-rechner-preview .nc-package-grid { display: grid; gap: var(--s-16); } #nc-rechner-preview .nc-package { display: flex; align-items: flex-start; gap: var(--s-12); min-width: 0; padding: var(--s-16); border: var(--min-line) solid var(--nc-line); background: var(--nc-paper); cursor: pointer; transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } #nc-rechner-preview .nc-package > span { display: grid; gap: var(--s-12); min-width: 0; } #nc-rechner-preview .nc-package-name { display: block; font: 700 1.4rem/1.2 var(--font-accent); } #nc-rechner-preview .nc-package-price { display: block; font: 600 1.35rem/1.3 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; } #nc-rechner-preview .nc-package-copy { display: block; font-size: var(--size-small); line-height: 1.6; font-weight: 400; } #nc-rechner-preview .nc-package-copy > span { display: block; } #nc-rechner-preview .nc-package-extras { margin-top: var(--s-8); color: var(--nc-green); } #nc-rechner-preview .nc-package:has(input:checked) { background: var(--nc-soft); border-color: var(--nc-green); } #nc-rechner-preview .nc-package:has(input:disabled) { color: var(--nc-muted); border-color: #586452; cursor: not-allowed; } #nc-rechner-preview .nc-package:has(input:disabled) .nc-package-copy { opacity: .8; } #nc-rechner-preview .nc-package:hover:not(:has(input:disabled)) { border-color: var(--nc-green); } #nc-rechner-preview .nc-extra { display: flex; align-items: flex-start; gap: var(--s-12); padding: var(--s-16) 0; border-bottom: 1px solid var(--nc-line); min-height: var(--tap); cursor: pointer; } #nc-rechner-preview .nc-extra:last-child { border-bottom: 0; } #nc-rechner-preview .nc-extra span > span { display: block; font-size: 1rem; } #nc-rechner-preview .nc-extra small { display: block; margin-top: var(--s-4); font-size: var(--size-small); font-weight: 400; color: var(--nc-muted); } #nc-rechner-preview .nc-extra:has(input:disabled) { opacity: .6; cursor: not-allowed; } #nc-rechner-preview .nc-receipt { position: relative; min-width: 0; padding: var(--s-24); border: var(--min-line) solid var(--cream); background: var(--cream); color: var(--green); color-scheme: light; scroll-margin-top: 140px; } #nc-rechner-preview .nc-eyebrow { font: 700 var(--size-label)/1.5 var(--font-accent); letter-spacing: var(--track-label); text-transform: uppercase; } #nc-rechner-preview .nc-total { font: 700 clamp(1.75rem, 3.2vw, 2.35rem)/1.2 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.04em; margin-top: var(--s-12); overflow-wrap: anywhere; } #nc-rechner-preview .nc-perguest { margin: var(--s-8) 0 var(--s-16); font-size: var(--size-small); font-variant-numeric: tabular-nums; color: var(--text-quiet); line-height: 1.5; } #nc-rechner-preview .nc-selected { margin: 0 0 var(--s-16); font-size: var(--size-small); line-height: 1.5; } #nc-rechner-preview .nc-breakdown { padding-top: var(--s-16); border-top: 2px dotted var(--green); } #nc-rechner-preview summary { cursor: pointer; } #nc-rechner-preview .nc-breakdown summary { padding: var(--s-8) 0; font: 700 var(--size-small)/1.5 var(--font-accent); } #nc-rechner-preview .nc-line-item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-16); padding: var(--s-12) 0; border-bottom: 1px solid rgb(var(--green-rgb) / .3); font-size: var(--size-small); line-height: 1.5; } #nc-rechner-preview .nc-line-item strong { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } #nc-rechner-preview .nc-receipt .nc-help { color: var(--text-quiet); font-size: var(--size-micro); } #nc-rechner-preview .nc-cta { display: block; width: 100%; min-height: var(--field-h); padding: 12px 14px; margin-top: var(--s-24); border: var(--min-line) solid var(--green); border-radius: 0; background: var(--green); color: var(--cream); font: 700 var(--size-small)/1.45 var(--font-body); cursor: pointer; transition: transform var(--dur-fast) var(--ease-press), background-color var(--dur-base) var(--ease); } #nc-rechner-preview .nc-cta:hover:not(:disabled) { background: var(--grey); border-color: var(--grey); } #nc-rechner-preview .nc-cta:active:not(:disabled) { transform: translateY(1px); } #nc-rechner-preview .nc-cta:disabled { opacity: .5; cursor: not-allowed; } #nc-rechner-preview .nc-receipt :focus-visible { outline-color: var(--green); } #nc-rechner-preview .nc-error, #nc-rechner-preview .nc-warning { color: var(--nc-error); font-size: var(--size-small); line-height: 1.6; margin-top: var(--s-12); } #nc-rechner-preview .nc-receipt .nc-warning { color: var(--grey); border-left: 2px solid var(--green); padding-left: var(--s-12); } #nc-rechner-preview .nc-menu-intro { margin: 0 0 var(--s-16); font-size: var(--size-small); line-height: 1.6; color: var(--nc-muted); } #nc-rechner-preview .nc-menu-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-12); } #nc-rechner-preview .nc-menu-card { position: relative; display: flex; min-width: 0; padding: var(--s-16); border: var(--min-line) solid var(--nc-line); background: var(--nc-paper); cursor: pointer; transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } #nc-rechner-preview .nc-menu-card input { position: absolute; top: var(--s-16); right: var(--s-16); margin: 0; } #nc-rechner-preview .nc-menu-copy { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-12); width: 100%; min-width: 0; } #nc-rechner-preview .nc-menu-name { padding-right: 32px; font: 700 1.4rem/1.2 var(--font-accent); } #nc-rechner-preview .nc-menu-price { font: 600 var(--size-small)/1.5 var(--font-body); font-variant-numeric: tabular-nums; } #nc-rechner-preview .nc-menu-description { min-height: 3em; font-size: var(--size-small); font-weight: 400; line-height: 1.5; color: var(--nc-muted); } #nc-rechner-preview .nc-menu-state { margin-top: var(--s-4); padding-top: var(--s-12); border-top: 1px solid var(--nc-line); color: var(--nc-green); font-size: var(--size-small); font-weight: 500; } #nc-rechner-preview .nc-menu-chosen { display: none; } #nc-rechner-preview .nc-menu-card:has(input:checked) { border-color: var(--nc-green); background: var(--nc-soft); } #nc-rechner-preview .nc-menu-card:has(input:checked) .nc-menu-idle { display: none; } #nc-rechner-preview .nc-menu-card:has(input:checked) .nc-menu-chosen { display: inline; } #nc-rechner-preview .nc-menu-card:hover { border-color: var(--nc-green); } #nc-rechner-preview .nc-menu-card:active { border-color: var(--cream); } #nc-rechner-preview .nc-menu-card:has(input:focus-visible) { outline: 2px solid var(--nc-green); outline-offset: 4px; } #nc-rechner-preview .nc-menu-card input:focus-visible { outline: none; } #nc-rechner-preview .nc-sorten { margin-top: var(--s-24); padding-top: var(--s-24); border-top: 2px solid var(--nc-line); } #nc-rechner-preview .nc-sorten-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); margin-bottom: var(--s-12); } #nc-rechner-preview [data-nc=sorten-title] { margin: 0; font: 700 1.25rem/1.4 var(--font-accent); } #nc-rechner-preview .nc-sorten-count { padding: 5px 9px; border: 1px solid var(--nc-line); color: var(--nc-green); font-size: var(--size-small); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } #nc-rechner-preview .nc-sorten-help { margin: 0 0 var(--s-24); font-size: var(--size-small); line-height: 1.6; color: var(--nc-muted); } #nc-rechner-preview .nc-sorten-error { margin: 0 0 var(--s-16); padding: var(--s-12); border-left: 2px solid currentColor; } #nc-rechner-preview .nc-sorten-group + .nc-sorten-group { margin-top: var(--s-24); } #nc-rechner-preview .nc-sorten-group h4 { margin: 0 0 var(--s-12); font: 700 1rem/1.4 var(--font-accent); letter-spacing: .04em; text-transform: uppercase; color: var(--nc-green); } #nc-rechner-preview .nc-sorten-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-12); } #nc-rechner-preview .nc-sorte { display: flex; gap: var(--s-12); align-items: flex-start; min-width: 0; min-height: 112px; padding: var(--s-16); border: var(--min-line) solid var(--nc-line); background: var(--nc-paper); cursor: pointer; } #nc-rechner-preview .nc-sorte:has(input:checked) { border-color: var(--nc-green); background: var(--nc-soft); } #nc-rechner-preview .nc-sorte-copy { display: block; min-width: 0; } #nc-rechner-preview .nc-sorte-name { display: block; font-size: 1rem; font-weight: 600; line-height: 1.4; } #nc-rechner-preview .nc-sorte-ingredients { display: block; margin-top: var(--s-8); color: var(--nc-muted); font-size: var(--size-small); font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; } #nc-rechner-preview .nc-sorte-locked { background: var(--nc-sorten-paper); cursor: not-allowed; } #nc-rechner-preview .nc-sorte-locked .nc-sorte-name { color: var(--nc-muted); } #nc-rechner-preview .nc-sorte-included { background: var(--nc-soft); cursor: default; } #nc-rechner-preview .nc-sorte-restriction { display: block; margin-top: var(--s-8); color: var(--nc-green); font-size: var(--size-micro); line-height: 1.4; } #nc-rechner-preview .nc-sorten-lock-note { font-size: var(--size-small); line-height: 1.6; color: var(--nc-muted); margin: 0 0 var(--s-12); } #nc-rechner-preview .nc-plz { margin-top: var(--s-16); } #nc-rechner-preview .nc-request { margin-top: var(--s-24); padding-top: var(--s-16); border-top: 2px dotted var(--green); } #nc-rechner-preview .nc-request h3 { font: 700 1rem/1.4 var(--font-accent); } #nc-rechner-preview textarea { color: var(--green); background: var(--cream); border-color: var(--green); min-height: 200px; resize: vertical; font-size: var(--size-small); line-height: 1.6; } .nc-local-submit-note { padding: 12px 0; font-size: var(--size-small); color: var(--cream); } .nc-mobile-price { display: none; } .nc-mobile-price[hidden] { display: none; } @media(min-width:600px) { #nc-rechner-preview .nc-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } #nc-rechner-preview .nc-field-label { min-height: 42px; } #nc-rechner-preview .nc-package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #nc-rechner-preview .nc-sorten-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(min-width:760px) { #nc-rechner-preview .nc-menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media(min-width:960px) { #nc-rechner-preview .nc-layout { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: var(--s-24); } #nc-rechner-preview .nc-form { display: contents; } #nc-rechner-preview .nc-form > fieldset:nth-of-type(1) { grid-column: 1; grid-row: 1; align-self: stretch; } #nc-rechner-preview .nc-form > fieldset:nth-of-type(2) { grid-column: 1; grid-row: 2; align-self: stretch; } #nc-rechner-preview .nc-form > fieldset:nth-of-type(3) { grid-column: 1 / -1; grid-row: 3; } #nc-rechner-preview .nc-form > fieldset:nth-of-type(4) { grid-column: 1; grid-row: 4; align-self: stretch; } #nc-rechner-preview .nc-form > fieldset:nth-of-type(5) { grid-column: 2; grid-row: 4; align-self: stretch; } #nc-rechner-preview .nc-receipt { grid-column: 2; grid-row: 1 / 3; } #nc-rechner-preview .nc-sorten-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media(max-width:959px) { #nc-rechner-preview .nc-header { display: block; } #nc-rechner-preview .nc-reset { margin-top: var(--s-16); } } @media(max-width:599px) { #nc-rechner-preview .nc-product { padding: var(--s-16); } #nc-rechner-preview .nc-header { padding-right: 0; } #nc-rechner-preview .nc-header .headline { font-size: var(--size-h2); } #nc-rechner-preview .nc-receipt { padding: var(--s-16); } #nc-rechner-preview .nc-line-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-12); } #menu .nc-menu-sprig { display: none !important; } .nc-mobile-price { position: fixed; bottom: 0; left: 0; right: 0; z-index: calc(var(--layer-header) + 1); display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-16); border-top: var(--min-line) solid var(--cream); background: var(--green); color: var(--cream); font: 500 1rem/1.4 var(--font-body); } .nc-mobile-price button { padding: 9px 12px; border: var(--min-line) solid var(--cream); background: var(--cream); color: var(--green); font: 700 var(--size-small)/1.4 var(--font-body); cursor: pointer; } .nc-mobile-price b { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; } body { padding-bottom: 80px; } }
#nc-rechner-preview .nc-steps { margin-bottom: var(--s-24); scroll-margin-top: 136px; } #nc-rechner-preview .nc-steps ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--nc-line); background: var(--nc-soft); } #nc-rechner-preview .nc-steps li { min-width: 0; } #nc-rechner-preview .nc-steps button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--nc-muted); font: 500 var(--size-small)/1.3 var(--font-body); cursor: pointer; transition: background-color 160ms ease,color 160ms ease; } #nc-rechner-preview .nc-steps button:hover { background: rgb(var(--cream-rgb) / .07); color: var(--cream); } #nc-rechner-preview .nc-steps button[aria-current=step] { background: var(--nc-green); color: var(--nc-paper); } #nc-rechner-preview .nc-step-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 3px; font: 700 1rem/1 var(--font-accent); } #nc-rechner-preview .nc-steps button[data-state=done] { color: var(--nc-green); } #nc-rechner-preview .nc-layout { grid-template-columns: minmax(0,1fr); gap: var(--s-24); } #nc-rechner-preview .nc-form { display: block; min-width: 0; } #nc-rechner-preview .nc-step-panel { display: grid; gap: var(--s-24); animation: nc-step-arrive 180ms ease-out; } #nc-rechner-preview .nc-panel-head { margin: 0; padding-bottom: var(--s-16); border-bottom: 1px solid var(--nc-line); } #nc-rechner-preview .nc-panel-kicker { display: block; margin-bottom: var(--s-8); color: var(--nc-green); font: 700 var(--size-micro)/1.4 var(--font-accent); letter-spacing: var(--track-label); text-transform: uppercase; } #nc-rechner-preview .nc-panel-head h3 { margin: 0; color: var(--cream); font: 700 clamp(1.5rem,2.4vw,1.85rem)/1.2 var(--font-accent); text-wrap: balance; } #nc-rechner-preview .nc-panel-head h3:focus { outline: none; } #nc-rechner-preview .nc-panel-head p { margin: var(--s-8) 0 0; color: var(--nc-muted); font-size: var(--size-small); line-height: 1.6; } #nc-rechner-preview .nc-form fieldset { padding: 0; border: 0; } #nc-rechner-preview .nc-form legend { width: 100%; padding: 0; margin-bottom: var(--s-12); font-size: var(--size-small); } #nc-rechner-preview .nc-field-label { min-height: 0; } #nc-rechner-preview .nc-help { font-size: .8125rem; line-height: 1.5; } #nc-rechner-preview .nc-fields { gap: var(--s-12); } #nc-rechner-preview .nc-celebration-grid { display: grid; gap: var(--s-16); align-items: start; } #nc-rechner-preview .nc-occasion-field { min-width: 0; } #nc-rechner-preview .nc-occasion-field > .nc-field-label { margin-bottom: var(--s-8); font-size: var(--size-small); font-weight: 500; line-height: 1.45; } #nc-rechner-preview .nc-occasion-options { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; } #nc-rechner-preview .nc-occasion-choice { position: relative; grid-column: span 2; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 10px; border: 1px solid var(--nc-line); border-radius: 3px; background: transparent; color: var(--nc-muted); cursor: pointer; transition: background-color 160ms ease,border-color 160ms ease,color 160ms ease; } #nc-rechner-preview .nc-occasion-choice:nth-last-child(-n+2) { grid-column: span 3; } #nc-rechner-preview .nc-occasion-choice > span { font: 700 .9375rem/1.3 var(--font-accent); text-align: center; text-wrap: balance; } #nc-rechner-preview .nc-occasion-choice input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip-path: inset(50%); overflow: hidden; } #nc-rechner-preview .nc-occasion-choice:hover { border-color: var(--nc-green); background: var(--nc-soft); color: var(--cream); } #nc-rechner-preview .nc-occasion-choice:has(input:checked) { border-color: var(--nc-green); background: var(--nc-green); color: var(--nc-paper); } #nc-rechner-preview .nc-occasion-choice:has(input:checked)::after { content: '✓'; position: absolute; top: 2px; right: 4px; font: 700 .625rem/1 var(--font-body); } #nc-rechner-preview .nc-occasion-choice:has(input:focus-visible) { outline: 2px solid var(--cream); outline-offset: 3px; } #nc-rechner-preview .nc-guests-field label { display: grid; gap: var(--s-8); } #nc-rechner-preview .nc-guests-control { display: flex; justify-content: flex-start; align-items: center; gap: 10px; } #nc-rechner-preview .nc-guests-unit { font: 500 var(--size-small)/1.45 var(--font-body); } #nc-rechner-preview .nc-guests-field input { margin-top: 0; width: 90px; flex: 0 0 90px; height: var(--field-h); } #nc-rechner-preview .nc-guests-field [data-nc=guest-help] { margin: 6px 0 0; font-size: .8125rem; line-height: 1.5; } #nc-rechner-preview .nc-package { padding: var(--s-12); gap: 10px; } #nc-rechner-preview .nc-package > span { gap: var(--s-8); width: 100%; } #nc-rechner-preview .nc-package-price { font-size: 1.15rem; } #nc-rechner-preview .nc-package-extras { margin-top: var(--s-4); } #nc-rechner-preview .nc-menu-intro { display: none; } #nc-rechner-preview .nc-menu-grid { grid-template-columns: minmax(0,1fr); gap: var(--s-8); } #nc-rechner-preview .nc-menu-card { display: flex; align-items: flex-start; gap: 10px; padding: var(--s-12); } #nc-rechner-preview .nc-menu-card input { position: static; margin: 3px 0 0; } #nc-rechner-preview .nc-menu-copy { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 6px 10px; } #nc-rechner-preview .nc-menu-name { padding: 0; font-size: 1.4rem; } #nc-rechner-preview .nc-menu-price { align-self: center; font-size: .8125rem; text-align: right; } #nc-rechner-preview .nc-menu-description { grid-column: 1 / -1; min-height: 0; font-size: .8125rem; line-height: 1.45; } #nc-rechner-preview .nc-menu-state { display: none; } #nc-rechner-preview .nc-sorten { margin-top: var(--s-16); padding-top: var(--s-16); border-top-width: 1px; } #nc-rechner-preview .nc-sorten-head { margin-bottom: var(--s-8); } #nc-rechner-preview [data-nc=sorten-title] { font-size: 1.15rem; } #nc-rechner-preview .nc-sorten-count { padding: 4px 7px; font-size: .75rem; } #nc-rechner-preview .nc-sorten-help { margin-bottom: var(--s-16); font-size: .8125rem; line-height: 1.5; } #nc-rechner-preview .nc-sorten-group h4 { margin-bottom: var(--s-8); font-size: .8125rem; } #nc-rechner-preview .nc-sorten-group + .nc-sorten-group { margin-top: var(--s-16); } #nc-rechner-preview .nc-sorten-lock-note { margin-bottom: var(--s-8); font-size: .8125rem; line-height: 1.45; } #nc-rechner-preview .nc-sorten-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-8); } #nc-rechner-preview .nc-sorte { position: relative; display: block; min-height: 0; padding: 10px; } #nc-rechner-preview .nc-sorte > input { position: absolute; top: 10px; right: 10px; margin: 0; width: 18px; height: 18px; } #nc-rechner-preview .nc-sorte-name { padding-right: 24px; font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; } #nc-rechner-preview .nc-sorte-included .nc-sorte-name { padding-right: 0; } #nc-rechner-preview .nc-sorte-ingredients { margin-top: 5px; font-size: .75rem; line-height: 1.45; } #nc-rechner-preview .nc-sorte-restriction { margin-top: 5px; font-size: .7rem; } #nc-rechner-preview .nc-sorten-group[data-locked=true] .nc-sorte { padding: 8px; min-height: 42px; background: transparent; } #nc-rechner-preview .nc-sorten-group[data-locked=true] .nc-sorte-ingredients, #nc-rechner-preview .nc-sorten-group[data-locked=true] .nc-sorte-restriction { display: none; } #nc-rechner-preview [data-nc=extras] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-8); } #nc-rechner-preview .nc-extra { gap: var(--s-8); padding: var(--s-12); border: 1px solid var(--nc-line); background: var(--nc-paper); } #nc-rechner-preview .nc-extra:last-child { border-bottom: 1px solid var(--nc-line); } #nc-rechner-preview .nc-extra:has(input:checked) { background: var(--nc-soft); border-color: var(--nc-green); } #nc-rechner-preview .nc-extra span > span { font-size: .875rem; } #nc-rechner-preview .nc-extra small { font-size: .75rem; } #nc-rechner-preview .nc-extra:has(input:disabled) { opacity: 1; background: #2a2e29; border-color: #626a60; color: #b4b7b2; cursor: not-allowed; } #nc-rechner-preview .nc-extra:has(input:disabled) small { color: #a6aba5; } #nc-rechner-preview .nc-extra input:disabled { filter: grayscale(1); opacity: .65; cursor: not-allowed; } #nc-rechner-preview .nc-step-footer { margin-top: var(--s-24); padding-top: var(--s-16); border-top: 1px solid var(--nc-line); } #nc-rechner-preview .nc-step-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); } #nc-rechner-preview .nc-step-back,#nc-rechner-preview .nc-step-next { min-height: 48px; padding: 10px 14px; border: 1px solid var(--nc-line); border-radius: 2px; font: 600 var(--size-small)/1.4 var(--font-body); cursor: pointer; } #nc-rechner-preview .nc-step-back { background: transparent; color: var(--cream); } #nc-rechner-preview .nc-step-back:disabled { opacity: .4; cursor: default; } #nc-rechner-preview .nc-step-next { background: var(--nc-green); color: var(--nc-paper); border-color: var(--nc-green); } #nc-rechner-preview .nc-step-next:hover { background: var(--cream); border-color: var(--cream); } #nc-rechner-preview .nc-step-counter { color: var(--nc-muted); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; } #nc-rechner-preview .nc-step-error { margin: 0 0 var(--s-16); padding-left: var(--s-12); border-left: 2px solid currentColor; } #nc-rechner-preview input[aria-invalid=true] { border-color: var(--nc-error); } #nc-rechner-preview .nc-receipt { padding: var(--s-24); } #nc-rechner-preview .nc-meal-summary { margin: 0 0 var(--s-16); color: var(--green); font: 700 var(--size-small)/1.5 var(--font-accent); } #nc-rechner-preview .nc-line-item { padding: var(--s-8) 0; font-size: .8125rem; } #nc-rechner-preview .nc-breakdown summary { font-size: .8125rem; } #nc-rechner-preview .nc-receipt .nc-help { margin-top: var(--s-16); } #nc-rechner-preview .nc-price-close { margin-top: var(--s-16); padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--green); font: 600 .8125rem/1.4 var(--font-body); cursor: pointer; } @keyframes nc-step-arrive { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media(min-width:600px) { #nc-rechner-preview .nc-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(min-width:600px) { #nc-rechner-preview .nc-celebration-grid { grid-template-columns: minmax(0,1fr); } } @media(min-width:760px) and (max-width:959px), (min-width:1200px) { #nc-rechner-preview .nc-menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } #nc-rechner-preview .nc-menu-card { display: block; } #nc-rechner-preview .nc-menu-card input { position: absolute; top: 12px; right: 12px; margin: 0; } #nc-rechner-preview .nc-menu-copy { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto 1fr; gap: var(--s-8); } #nc-rechner-preview .nc-menu-name { padding-right: 22px; } #nc-rechner-preview .nc-menu-price { text-align: left; } #nc-rechner-preview .nc-menu-description { grid-column: 1; } } @media(min-width:960px) { #nc-rechner-preview .nc-layout { grid-template-columns: minmax(0,1fr) 300px; gap: var(--s-24); } #nc-rechner-preview .nc-receipt { position: sticky; top: 136px; grid-column: auto; grid-row: auto; } #nc-rechner-preview .nc-price-close { display: none; } } @media(max-width:959px) { #nc-rechner-preview[data-step="1"][data-price-expanded="false"] .nc-receipt, #nc-rechner-preview[data-step="2"][data-price-expanded="false"] .nc-receipt { display: none; } .nc-mobile-price { position: fixed; bottom: 0; left: 0; right: 0; z-index: calc(var(--layer-header) + 1); display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-16); border-top: var(--min-line) solid var(--cream); background: var(--green); color: var(--cream); font: 500 1rem/1.4 var(--font-body); } .nc-mobile-price button { padding: 9px 12px; border: var(--min-line) solid var(--cream); background: var(--cream); color: var(--green); font: 700 var(--size-small)/1.4 var(--font-body); cursor: pointer; } .nc-mobile-price b { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; } body { padding-bottom: 0; } body.has-nc-mobile-price { padding-bottom: 80px; } } @media(min-width:1200px) { #nc-rechner-preview .nc-sorten-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media(max-width:599px) { #nc-rechner-preview .nc-steps { margin-bottom: var(--s-16); } #nc-rechner-preview .nc-steps ol { gap: 3px; padding: 4px; } #nc-rechner-preview .nc-steps button { justify-content: flex-start; gap: 6px; padding: 7px 6px; font-size: .75rem; } #nc-rechner-preview .nc-step-icon { width: 22px; height: 22px; font-size: .875rem; } #nc-rechner-preview .nc-step-panel { gap: var(--s-16); } #nc-rechner-preview .nc-panel-kicker { display: none; } #nc-rechner-preview .nc-panel-head h3 { font-size: 1.5rem; } #nc-rechner-preview .nc-guests-field input { width: 110px; flex-basis: 110px; } #nc-rechner-preview .nc-package > span { grid-template-columns: minmax(0,1fr) auto; gap: 6px 8px; } #nc-rechner-preview .nc-package-price { font-size: 1.05rem; align-self: center; } #nc-rechner-preview .nc-package-copy { grid-column: 1 / -1; font-size: .8125rem; } #nc-rechner-preview .nc-menu-name { font-size: 1.25rem; } #nc-rechner-preview .nc-menu-price { font-size: .75rem; } #nc-rechner-preview .nc-step-counter { flex: 0 0 100%; order: -1; text-align: center; } #nc-rechner-preview .nc-step-next { flex: 1; } #nc-rechner-preview .nc-receipt { padding: var(--s-16); } } @media(prefers-reduced-motion:reduce) { #nc-rechner-preview .nc-step-panel { animation: none; } #nc-rechner-preview .nc-steps button { transition: none; } #nc-rechner-preview .nc-occasion-choice { transition: none; } } #nc-rechner-preview .nc-product { background-image: radial-gradient(ellipse at 10% 0%, rgb(180 200 162 / .11), transparent 540px), repeating-linear-gradient(92deg, rgb(var(--cream-rgb) / .017) 0 1px, transparent 1px var(--pat-fine)); } #nc-rechner-preview .nc-product > .nc-header { padding: 0; margin: 0 0 var(--s-24); gap: var(--s-16); } #nc-rechner-preview .nc-header .kicker { margin: 0 0 var(--s-12); color: var(--nc-green); font-size: var(--size-micro); } #nc-rechner-preview .nc-header .headline { margin: 0; max-width: 21ch; color: var(--cream); font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.1; } #nc-rechner-preview .nc-header .section-note { margin: var(--s-12) 0 0; max-width: 44ch; color: var(--nc-muted); font-size: var(--size-small); line-height: 1.5; } #nc-rechner-preview .nc-header .nc-reset { margin: 0; color: var(--nc-muted); border-bottom-color: rgb(180 200 162 / .4); font-size: .75rem; min-height: 44px; align-self: flex-end; } #nc-rechner-preview .nc-header .nc-reset:hover { color: var(--cream); border-bottom-color: currentColor; } #nc-rechner-preview .nc-steps ol { background: rgb(180 200 162 / .045); border-color: rgb(180 200 162 / .3); } @media(max-width:959px) { #nc-rechner-preview .nc-product > .nc-header { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: var(--s-12); } #nc-rechner-preview .nc-header .nc-reset { align-self: flex-start; min-height: 40px; } } #nc-rechner-preview { --nc-section-gap: var(--s-24); } #nc-rechner-preview #nc-step-1 { gap: var(--nc-section-gap); } #nc-rechner-preview .nc-panel-head-compact { padding: 0; } #nc-rechner-preview #nc-step-1 .nc-celebration-grid { padding-bottom: var(--nc-section-gap); border-bottom: 1px solid var(--nc-line); } #nc-rechner-preview .nc-guests-field .nc-field-label { color: var(--nc-ink); font: 700 var(--size-small)/1.5 var(--font-accent); letter-spacing: var(--track-label); text-transform: uppercase; } @media(max-width:599px) { #nc-rechner-preview { --nc-section-gap: var(--s-16); } } #nc-rechner-preview .nc-fields > label { min-inline-size: 0; } #nc-rechner-preview [data-nc=date] { box-sizing: border-box; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; } @media(max-width:599px) { #nc-rechner-preview [data-nc=date] { -webkit-appearance: none; appearance: none; text-align: left; padding: 10px 12px; font-size: 16px; } #nc-rechner-preview [data-nc=date]::-webkit-date-and-time-value { min-width: 0; text-align: left; } #nc-rechner-preview [data-nc=date]::-webkit-datetime-edit { min-width: 0; padding: 0; } }
:root { --green: #3E533D; --green-rgb: 62 83 61; --probe-rechner-flaeche: radial-gradient(ellipse at 10% 0%, rgb(180 200 162 / .11), transparent 540px), repeating-linear-gradient(92deg, rgb(var(--cream-rgb) / .017) 0 1px, transparent 1px var(--pat-fine)); } #nc-rechner-preview { --nc-paper: var(--green); --nc-soft: color-mix(in srgb, var(--green), #b4c8a2 12%); --nc-sorten-paper: var(--nc-soft); } .hero, .ink-surface, #nc-rechner-preview .nc-product { background-color: var(--green); background-image: var(--probe-rechner-flaeche); } .hero-grain, .ink-surface::after { display: none; }
.hero-video-slot, .hero-scroll-cue, .hero-video-toggle { display: none; } @media (max-width: 699px) { :root { --mobile-safe-top: env(safe-area-inset-top, 0px); --mobile-info-height: calc(32px + var(--mobile-safe-top)); --statsbar-h: 0px; } html { background-color: var(--paper); } html:not(.has-mobile-info):not(.nav-open), html:not(.has-mobile-info):not(.nav-open) body { background-color: var(--grey); } :root.has-mobile-info { --statsbar-h: var(--mobile-info-height); } .statsbar { display: flex; position: fixed; inset: 0 0 auto; height: var(--mobile-info-height); padding-top: var(--mobile-safe-top); box-sizing: border-box; visibility: hidden; transform: translateY(-100%); pointer-events: none; } .statsbar-track { animation-play-state: paused; } .has-mobile-info .statsbar { visibility: visible; transform: none; } .has-mobile-info .statsbar-track { animation-play-state: running; } .header { position: fixed; inset: var(--statsbar-h) 0 auto; background: var(--paper); border-bottom-color: transparent; transition: background .2s ease; } .header.is-over-video { background: transparent; } .header.is-over-video .brand { color: var(--cream); } .header.is-over-video .nav-burger span { background: var(--cream); } .header-inner { padding-top: calc(12px + var(--mobile-safe-top)); } .has-mobile-info .header-inner { padding-top: 12px; } .nonna-scroll { display: none; } .hero { display: grid; grid-template: minmax(100svh, auto) / minmax(0, 1fr); min-height: 100svh; background: var(--grey); overflow: visible; clip-path: inset(calc(-1 * var(--mobile-safe-top)) 0 0); } .hero-photo, .hero-grain { display: none; } .hero-video-slot { display: block; position: absolute; inset: calc(-1 * var(--mobile-safe-top)) 0 0; z-index: 0; background: var(--grey) url('../assets/video/wer-da-kommt-9x16-poster.jpg') center / cover no-repeat; } .hero-video-slot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(12 16 11 / .64) 0%, rgb(12 16 11 / .12) 20%, rgb(12 16 11 / .54) 55%, rgb(12 16 11 / .66) 100%); } .hero-video-slot .video-intro-media, .hero-video-slot .video-intro-clip { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; padding: 0; aspect-ratio: auto; transform: none; border: 0; border-radius: 0; box-shadow: none; } .hero-video-slot .video-intro-clip::before, .hero-video-slot .video-intro-clip::after, .hero-video-slot .nc-detail, .hero-video-slot .video-intro-cap { display: none !important; } .hero-video-slot video { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-video-slot .video-intro-play { z-index: 4; top: auto; left: 20px; bottom: 20px; transform: none; color: var(--cream); background: rgb(20 22 17 / .72); border: 1px solid var(--cream); } .hero-inner { grid-area: 1 / 1; align-self: center; text-align: center; padding: 120px 24px 94px; max-width: 460px; margin-inline: auto; } .hero-head { font-size: clamp(1.5rem, 7.65vw, 2.5rem); line-height: 1.06; text-shadow: 0 2px 20px rgb(0 0 0 / .22); } .hero-eyebrow { font-size: 12px; letter-spacing: .11em; line-height: 1.5; border: 0; padding: 0; color: var(--cream); } .hero-head-lead { color: var(--cream); margin-top: 22px; } .hero-head-tail { color: var(--cream); } .hero-swap { justify-items: center; } .hero-swap > span { transform-origin: center; color: var(--green); background: var(--cream); padding: .06em .13em .12em; text-shadow: none; } .hero-ctas { flex-direction: column; align-items: center; gap: 12px; margin-top: 30px; } .hero-ctas .btn { width: 100%; max-width: 280px; min-height: 48px; justify-content: center; transform: none; box-shadow: none; } .hero-ctas .btn--rosso { background: var(--cream); color: var(--grey); border-color: var(--cream); } .hero-ctas .btn--ghost { background: transparent; color: var(--cream); border-color: var(--green); } .hero-ctas .btn:hover { background: var(--cream); color: var(--grey); } .hero-ctas .btn--ghost:hover, .hero-ctas .btn--ghost:focus-visible { background: transparent; color: var(--cream); border-color: var(--green); } .hero-scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 7px; position: absolute; z-index: 2; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: var(--cream); text-decoration: none; font: 500 10px/1.2 var(--font-body); letter-spacing: .15em; text-transform: uppercase; } .hero-scroll-cue span { font-size: 24px; line-height: 1; } .hero-video-toggle:not([hidden]) { display: grid; place-items: center; position: absolute; z-index: 3; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); width: 44px; height: 44px; border: 1px solid rgb(var(--cream-rgb) / .6); border-radius: 50%; background: rgb(12 16 11 / .28); color: var(--cream); cursor: pointer; font: 600 16px/1 var(--font-body); } .video-intro { display: none; } .nav-open .header { background: var(--paper); } .nav-open .header .brand { color: var(--grey); } .nav-open .header .nav-burger span { background: var(--green); } } @media (max-width: 359px) { .hero-inner { padding-inline: 16px; } .hero-eyebrow { font-size: 11px; } } @media (max-width: 699px) and (max-height: 600px) { .hero-inner { padding-block: 96px 90px; } .hero-ctas { margin-top: 20px; } } @media (prefers-reduced-motion: reduce) { .header { transition: none; } }
.pizza-look { display: none; } @media (max-width: 699px) { .pizza-look { display: block; position: relative; isolation: isolate; color: var(--cream); background: var(--green); background-image: var(--probe-rechner-flaeche); padding-block: var(--s-48) var(--s-48); scroll-margin-top: calc(var(--header-h, 70px) + var(--s-16)); } .pizza-look-inner { display: grid; gap: 0; max-width: 524px; padding-inline: var(--s-24); } .pizza-look-title { margin: 0 0 var(--s-24); color: inherit; font: 400 clamp(1.5rem, 7.6vw, 2.5rem)/1.07 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; } .pizza-look-title span { display: block; } .pizza-look-photo { position: relative; margin: 0; width: 100%; border: var(--frame-w) solid var(--cream); transform: rotate(-1.2deg); transform-origin: center; } .pizza-look-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: var(--foto-grain); mix-blend-mode: multiply; } .pizza-look-photo picture, .pizza-look-photo img { display: block; width: 100%; } .pizza-look-photo img { height: auto; aspect-ratio: 1; object-fit: contain; } .pizza-look-outro { margin: var(--s-16) 0 0; font: 700 1.125rem/1.45 var(--font-accent); max-width: 31ch; } } @media (max-width: 359px) { .pizza-look-inner { padding-inline: var(--s-16); } }
.pizza-look { display: block; position: relative; color: var(--cream); background: var(--green); background-image: var(--probe-rechner-flaeche); padding-block: clamp(48px, 8vw, 88px); scroll-margin-top: calc(var(--header-h, 70px) + 40px); } .pizza-look .pizza-look-inner { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 860px; text-align: center; } .pizza-look .pizza-look-title { margin: 0; font: 400 clamp(1.6rem, 6.6vw, 3.8rem)/1.08 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; } .pizza-look-title span { display: block; } .pizza-look-copy { max-width: 43ch; margin: 28px 0 0; font: 400 var(--size-body)/1.65 var(--font-body); text-wrap: pretty; } .pizza-look-nonna { display: block; width: clamp(88px, 16vw, 120px); height: auto; margin-top: 32px; fill: currentColor; } .pizza-look .pizza-look-outro { max-width: 28ch; margin: 20px 0 0; font: 700 clamp(1.25rem, 2.3vw, 1.625rem)/1.35 var(--font-accent); text-wrap: balance; } .fest-bilder { padding: 36px 0 44px; background: var(--paper); } .fest-bilder-stack { max-width: 960px; } .fest-bild { position: sticky; top: calc(var(--header-h, 70px) + 44px); margin: 0 0 24px; background: var(--paper); } .fest-bild:nth-child(2) { top: calc(var(--header-h, 70px) + 54px); } .fest-bild:nth-child(3) { top: calc(var(--header-h, 70px) + 64px); } .fest-bild:last-child { margin-bottom: 0; } .fest-bild picture { display: block; border: var(--frame-w) solid var(--green); overflow: hidden; } .fest-bild img { display: block; width: 100%; height: clamp(300px, 62svh, 620px); object-fit: cover; } .fest-bild:first-child img { object-position: 50% 42%; } .fest-bild:nth-child(2) img { object-position: 50% 45%; } .fest-bild figcaption { display: block; margin-top: 12px; padding: 0; background: transparent; color: var(--green); font: 500 var(--size-small)/1.4 var(--font-body); } .flow .flow-track { display: block; max-width: 960px; margin: 32px auto 24px; border-top: var(--min-line) solid var(--green); } .flow-disclosure { border-bottom: var(--min-line) solid var(--green); } .flow-disclosure summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; align-items: center; gap: 16px; min-height: 88px; padding: 22px 4px; color: var(--green); cursor: pointer; list-style: none; } .flow-disclosure summary::-webkit-details-marker { display: none; } .flow-disclosure summary::marker { content: ''; } .flow-disclosure summary:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; } .flow-number { font: 500 .875rem/1 var(--font-body); } .flow-disclosure h3 { margin: 0; font: 400 clamp(.94rem, 2.5vw, 1.35rem)/1.25 var(--font-display); overflow-wrap: break-word; } .flow-toggle { position: relative; display: block; width: 26px; height: 26px; } .flow-toggle::before, .flow-toggle::after { content: ''; position: absolute; background: currentColor; } .flow-toggle::before { top: 12px; left: 4px; right: 4px; height: 2px; } .flow-toggle::after { top: 4px; bottom: 4px; left: 12px; width: 2px; } .flow-disclosure[open] .flow-toggle::after { display: none; } .flow-answer { padding: 0 48px 28px 58px; } .flow-answer p { max-width: 52ch; margin: 0; font: 400 1rem/1.65 var(--font-body); } .flow-answer .flow-temperature { margin-top: 16px; color: var(--green); font-size: .875rem; } .vorschau-form-note { margin: 16px 0 0; font-size: .875rem; line-height: 1.5; } .atwork-text > .nc-story-detail { display: block; margin: 24px auto 0; } @media (max-width: 359px) { .pizza-look .pizza-look-title { font-size: 1.45rem; } .pizza-look-copy { font-size: .9375rem; } .flow-disclosure summary { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 10px; } .flow-disclosure h3 { font-size: .875rem; } .flow-answer { padding-left: 38px; padding-right: 8px; } } @media (prefers-reduced-motion: reduce) { .fest-bild, .fest-bild:nth-child(2), .fest-bild:nth-child(3) { position: relative; top: auto; } }