/* Goldstudio im Forum Köpenick · Entwurf von 1ACE Art direction: contemporary atelier. Warm white, champagne, black. Sharp grotesk (Schibsted Grotesk) + elegant serif (Instrument Serif) + workbench mono (JetBrains Mono). */ :root { --paper: #F6F5F2; --paper-2: #ECEAE6; --ink: #050505; --ink-2: #0A0A0A; /* Akzente ohne Gold (Nutzervorgabe 18.10.): Silber mit leichtem Blaustich, Platin, Schiefer auf hellem Grund */ --champ: #C4C4C6; --champ-2: #ECEAE6; --champ-d: #56565A; --muted: #636365; --muted-l: #A8A8AA; --line: rgba(5, 5, 5, .14); --line-l: rgba(246, 243, 237, .16); --serif: "Instrument Serif", "Times New Roman", serif; --sans: "Schibsted Grotesk", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --didone: "Bodoni Moda", "Didot", "Bodoni 72", serif; --band: 0px; /* Entwurfsleiste entfernt (Geschenk-Fassung) */ --gut: 16px; --ease: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); color-scheme: light; } @media (min-width: 768px) { :root { --gut: 32px; } } @media (min-width: 1200px) { :root { --gut: 56px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, video, svg, canvas { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; } ol, ul { list-style: none; padding: 0; } ::selection { background: var(--champ); color: var(--ink); } :focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 var(--gut); } .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; } .eyebrow--light { color: var(--champ); } .display { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 9.4vw, 152px); line-height: .92; letter-spacing: -.02em; } .display em, .hero__claim em, .statement__text em { font-style: italic; color: var(--champ-d); } .display--light { color: var(--paper); } .display--light em { color: var(--champ); } /* ---------- draft bar / progress ---------- */ .progress { position: fixed; top: var(--band); left: 0; right: 0; height: 2px; z-index: 9400; background: var(--champ); transform-origin: 0 50%; transform: scaleX(0); } /* ---------- loader ---------- */ .loader { display: none; } .js:not(.rm) .loader { position: fixed; inset: 0; z-index: 9800; background: var(--ink); color: var(--paper); display: grid; place-items: center; align-content: center; gap: 28px; } .loader__ring { width: min(34vw, 170px); overflow: visible; } .loader__track { fill: none; stroke: rgba(246, 243, 237, .1); stroke-width: 1; } .loader__draw { fill: none; stroke: var(--champ); stroke-width: 1.4; transform: rotate(-90deg); transform-origin: 100px 100px; stroke-dasharray: 503; stroke-dashoffset: 503; } .loader__stone { fill: none; stroke: var(--champ-2); stroke-width: 1.2; opacity: 0; } .loader__word { font-family: var(--serif); font-style: italic; font-size: clamp(56px, 12vw, 140px); line-height: 1; display: flex; overflow: hidden; padding: 0 .06em .08em; } .loader__word span { display: inline-block; transform: translateY(110%); } .loader__meta { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-l); } /* ---------- cursor ---------- */ .cursor { display: none; } @media (hover: hover) and (pointer: fine) { .js:not(.rm) .cursor { display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 9700; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); opacity: 0; mix-blend-mode: normal; transition: opacity .3s, width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s; } .cursor.is-vis { opacity: 1; } .cursor.is-dark { background: var(--champ-2); } .cursor.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: transparent; border: 1px solid currentColor; color: var(--ink); } .cursor.is-dark.is-link { color: var(--champ-2); } .cursor.is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--champ); } .cursor__label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .25s; } .cursor.is-label .cursor__label { opacity: 1; } } /* ---------- nav ---------- */ .nav { position: fixed; left: 0; right: 0; top: var(--band); z-index: 9000; display: flex; align-items: center; gap: 24px; padding: 14px var(--gut); transition: transform .6s var(--ease), background-color .4s, color .4s, border-color .4s; border-bottom: 1px solid transparent; } .nav.is-solid { background: rgba(246, 243, 237, .92); border-bottom-color: var(--line); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); } .nav.is-hidden { transform: translateY(-140%); } .nav.is-light { color: var(--paper); } .nav__mark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; margin-right: auto; } .nav__word { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1; } .nav__sub { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } .nav__links { display: none; gap: 28px; } .nav__links a { position: relative; text-decoration: none; font-size: 14px; font-weight: 500; padding: 4px 0; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); } .nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: 0 50%; } .nav__cta { display: none; } .nav__burger { width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; background: transparent; display: grid; place-content: center; gap: 6px; cursor: pointer; } .nav__burger span { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); } .menu-open .nav__burger span:first-child { transform: translateY(3.75px) rotate(45deg); } .menu-open .nav__burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); } .menu-open .nav { color: var(--paper); background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } @media (min-width: 1080px) { .nav__links { display: flex; } .nav__cta { display: inline-flex; } .nav__burger { display: none; } } .nav__cta { align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 13px; font-weight: 600; transition: background-color .3s, color .3s; } .nav.is-light .nav__cta { background: var(--paper); color: var(--ink); } .nav__cta:hover { background: var(--champ); color: var(--ink); } .menu { position: fixed; inset: 0; z-index: 8900; background: var(--ink); color: var(--paper); padding: calc(var(--band) + 96px) var(--gut) calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io); visibility: hidden; } .menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; } .menu__links { display: grid; } .menu__links a { display: flex; align-items: baseline; gap: 16px; text-decoration: none; font-family: var(--serif); font-size: clamp(40px, 11vw, 72px); line-height: 1.12; border-bottom: 1px solid var(--line-l); padding: 6px 0; } .menu__links span { font-family: var(--mono); font-size: 11px; color: var(--champ); } .menu__foot { display: grid; gap: 8px; color: var(--muted-l); font-size: 14px; } .menu__foot a { color: var(--champ-2); font-size: 20px; text-decoration: none; } /* ---------- buttons ---------- */ .btn { --bg: var(--ink); --fg: var(--paper); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--bg); background: var(--bg); color: var(--fg); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: .005em; cursor: pointer; overflow: hidden; isolation: isolate; transition: color .45s var(--ease), border-color .45s; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--champ); border-radius: inherit; transform: translateY(101%); transition: transform .55s var(--ease); } .btn:hover::before, .btn:focus-visible::before { transform: translateY(0); } .btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--champ); } .btn--light { --bg: var(--paper); --fg: var(--ink); } .btn--dark { --bg: var(--ink); --fg: var(--paper); } .btn--champ { --bg: var(--champ); --fg: var(--ink); } .btn--champ::before { background: var(--paper); } .btn--champ:hover { border-color: var(--paper); } .btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(246, 243, 237, .5); } .btn:active { transform: scale(.98); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-l); display: inline-block; flex: none; } .dot.is-open { background: #7DBE8C; box-shadow: 0 0 0 0 rgba(125, 190, 140, .6); animation: pulse 2.2s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(125, 190, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(125, 190, 140, 0); } } /* ---------- image placeholders ---------- */ .ph { position: relative; overflow: hidden; background: linear-gradient(135deg, #2A2621 0%, #6E5B3A 48%, #C6AD7B 100%); } .ph > img, .ph > video { width: 100%; height: 100%; object-fit: cover; } img.is-missing { visibility: hidden; } .ph--hero { background: radial-gradient(60% 50% at 50% 46%, #F3E6C6 0%, #C6AD7B 22%, #4C3F2A 58%, #0E0D0B 100%); } .ph--bench { background: linear-gradient(160deg, #3A332A, #8C7550 55%, #D9C59B); } .ph--s1 { background: linear-gradient(150deg, #EFE8DA, #CFC2A6 70%, #A79A80); } .ph--s2 { background: linear-gradient(150deg, #1E2328, #44505A 60%, #9AA6AE); } .ph--s3 { background: linear-gradient(150deg, #1C2A22, #3D6B52 60%, #8DB59A); } .ph--s4 { background: radial-gradient(70% 60% at 50% 60%, #F2C46A, #A86A22 45%, #2A1A0C); } .ph--s5 { background: linear-gradient(150deg, #22201C, #5D5547 55%, #CFC6B4); } .ph--s6 { background: radial-gradient(70% 70% at 40% 40%, #F5ECD6, #C6AD7B 45%, #3A2F20); } .ph--c1 { background: linear-gradient(160deg, #E9E1D2, #CDBB95 60%, #8E7748); } .ph--c2 { background: linear-gradient(160deg, #D8D2C6, #9C958A 60%, #3A3631); } .ph--c3 { background: linear-gradient(160deg, #EFE6D3, #D9C59B 55%, #A68A55); } .ph--c4 { background: radial-gradient(80% 70% at 50% 40%, #3B2A3A, #160F16); } .ph--c5 { background: linear-gradient(160deg, #4A1F26, #2A1216 60%, #120809); } /* ---------- hero ---------- */ .hero { position: relative; background: var(--paper); } .hero__pin { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; } .hero__meta { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); top: calc(var(--band) + 86px); display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .hero__status { display: inline-flex; align-items: center; gap: 8px; } .hero__title { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 400; pointer-events: none; padding: 0 var(--gut); } .hero__line { display: block; overflow: hidden; line-height: .9; padding-bottom: .04em; } .hero__word { display: inline-block; } .hero__line--a { font-family: var(--serif); font-style: italic; font-size: clamp(60px, 21vw, 300px); letter-spacing: -.03em; white-space: nowrap; } .hero__line--b { font-family: var(--sans); font-weight: 600; text-transform: uppercase; font-size: clamp(14px, 2.4vw, 34px); letter-spacing: .5em; margin-top: .4em; margin-right: -.5em; } .hero__ring { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(46vw, 46vh); height: min(46vw, 46vh); margin: calc(min(46vw, 46vh) / -2) 0 0 calc(min(46vw, 46vh) / -2); pointer-events: none; overflow: visible; } .hero__ring circle { fill: none; stroke: var(--champ); stroke-width: .25; vector-effect: non-scaling-stroke; } .hero__media { position: absolute; inset: 0; z-index: 2; clip-path: circle(22% at 50% 50%); } .rm .hero__media, html:not(.js) .hero__media { clip-path: none; } .hero__media .ph { position: absolute; inset: 0; } .hero__title--in { color: var(--paper); z-index: 1; } .hero__over { z-index: 2; } .hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, .35) 0%, rgba(5, 5, 5, 0) 35%, rgba(5, 5, 5, .15) 60%, rgba(5, 5, 5, .75) 100%); } .hero__over { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(40px + env(safe-area-inset-bottom)); color: var(--paper); display: grid; gap: 22px; max-width: 980px; } .hero__claim { font-family: var(--serif); font-size: clamp(42px, 7.2vw, 112px); line-height: .95; letter-spacing: -.015em; } .hero__claim em { color: var(--champ-2); } .hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; } .hero__hint { position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .hero__hint i { width: 1px; height: 38px; background: linear-gradient(var(--muted), transparent); animation: drip 2s var(--ease) infinite; transform-origin: top; } @keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } /* static (no motion) hero: media is full, title sits on top */ .rm .hero__title, html:not(.js) .hero__title { z-index: 3; color: var(--paper); justify-content: flex-start; padding-top: calc(var(--band) + 130px); } .rm .hero__over, html:not(.js) .hero__over { opacity: 1; } .rm .hero__ring, html:not(.js) .hero__ring { display: none; } .rm .hero__meta, html:not(.js) .hero__meta { color: var(--paper-2); } /* ---------- builder ---------- */ .builder { padding: clamp(110px, 14vw, 200px) 0; background: var(--paper); } .builder__head { display: grid; gap: 28px; margin-bottom: clamp(40px, 6vw, 80px); } .builder__lede { max-width: 46ch; color: var(--muted); font-size: 17px; } @media (min-width: 1000px) { .builder__head { grid-template-columns: 1.3fr 1fr; align-items: end; } .builder__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; } } .builder__grid { display: grid; gap: 32px; } .builder__stage { position: relative; aspect-ratio: 4 / 5; width: 100%; border-radius: 2px; overflow: hidden; background: #0E0D0B; perspective: 1200px; touch-action: pan-y; isolation: isolate; } @media (min-width: 1000px) { .builder__stage { width: min(100%, calc(82vh * .8)); justify-self: center; } } .builder__controls { display: grid; gap: 26px; align-content: start; } .builder__controls fieldset { border: 0; padding: 0; margin: 0; border-top: 1px solid var(--line); padding-top: 18px; } .builder__controls legend { font-family: var(--serif); font-size: 28px; padding: 0; margin-bottom: 14px; display: flex; gap: 12px; align-items: baseline; float: left; width: 100%; } .builder__controls legend + * { clear: both; } .builder__controls legend .mono { color: var(--champ-d); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips label { position: relative; cursor: pointer; } .chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .chips span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; transition: border-color .3s, background-color .3s, color .3s, transform .3s var(--ease); } .chips label:hover span { border-color: var(--ink); } .chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); } .chips input:focus-visible + span { outline: 2px solid var(--champ); outline-offset: 2px; } .chips label:active span { transform: scale(.96); } .sw { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .sw--yellow { background: linear-gradient(135deg, #F7E3A4, #C99A3B); } .sw--white { background: linear-gradient(135deg, #FAFAF8, #BFC2C6); } .sw--rose { background: linear-gradient(135deg, #F7D2BE, #C47F62); } .sw--plat { background: linear-gradient(135deg, #EEEFF0, #9EA2A7); } .sw--dia { background: radial-gradient(circle at 35% 30%, #fff, #D6E1EC 60%, #9DB0C2); } .sw--sap { background: radial-gradient(circle at 35% 30%, #8DA8F0, #1F3C9A 60%, #0B1D5A); } .sw--eme { background: radial-gradient(circle at 35% 30%, #8FE0B4, #1E8A57 60%, #0C4A2E); } .sw--rub { background: radial-gradient(circle at 35% 30%, #F68DA0, #B3173A 60%, #5E0A1C); } .spec { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 6px; } .spec__k { color: var(--muted); } .spec__v { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.02; font-style: italic; } @media (min-width: 1000px) { .builder__grid { grid-template-columns: 1.15fr 1fr; gap: 6vw; align-items: center; } } /* ---------- visit ---------- */ .visit { padding: clamp(110px, 14vw, 200px) 0 clamp(90px, 10vw, 140px); } .visit__grid { display: grid; gap: 64px; } .vinfo { display: grid; gap: 24px; margin-top: 48px; } .vinfo > div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; border-top: 1px solid var(--line-l); padding-top: 16px; } .vinfo dt { color: var(--champ); padding-top: 4px; } .vinfo dd { margin: 0; font-size: 17px; } .vinfo a { text-decoration: none; background: linear-gradient(var(--champ), var(--champ)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); } .vinfo a:hover { background-size: 100% 1px; } .vinfo__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-l); } .visit__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; } .book { background: var(--ink-2); border: 1px solid var(--line-l); padding: clamp(22px, 3vw, 44px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; align-content: start; border-radius: 2px; } .book__k { grid-column: 1 / -1; color: var(--champ); margin-bottom: 4px; } .field { grid-column: 1 / -1; display: grid; gap: 8px; } .field--half { grid-column: span 1; } @media (max-width: 520px) { .field--half { grid-column: 1 / -1; } } .field label, .flabel { font-size: 13px; color: var(--muted-l); } .field input, .field select, .field textarea { width: 100%; min-height: 50px; border: 0; border-bottom: 1px solid rgba(246, 243, 237, .28); background: transparent; color: var(--paper); font-size: 17px; padding: 10px 0; border-radius: 0; transition: border-color .3s; appearance: none; -webkit-appearance: none; } .field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B9BFC6' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 24px; } .field select option { color: var(--ink); } .field textarea { resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--champ); } .field input::placeholder { color: rgba(246, 243, 237, .3); } .field.is-err input { border-bottom-color: #E07A6A; } .days { display: flex; gap: 6px; flex-wrap: wrap; } .days label { position: relative; cursor: pointer; } .days input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .days span { display: grid; place-items: center; min-width: 54px; height: 44px; border: 1px solid var(--line-l); border-radius: 999px; font-size: 14px; transition: background-color .3s, color .3s, border-color .3s; } .days label:hover span { border-color: var(--champ); } .days input:checked + span { background: var(--champ); border-color: var(--champ); color: var(--ink); } .days input:focus-visible + span { outline: 2px solid var(--champ); outline-offset: 2px; } .book .btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; } .book__note { grid-column: 1 / -1; font-size: 13px; color: var(--muted-l); } @media (min-width: 1000px) { .visit__grid { grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; } .book { margin-top: 70px; } } /* ---------- footer ---------- */ .foot { background: var(--ink); color: var(--paper); padding: 0 0 calc(110px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-l); overflow: hidden; } .foot__mark { font-family: var(--serif); font-style: italic; font-size: clamp(60px, 20vw, 320px); white-space: nowrap; line-height: .82; letter-spacing: -.04em; color: var(--champ); overflow: hidden; padding: .06em 0 .1em; margin-left: -.03em; } .foot__mark span { display: inline-block; } .foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; border-top: 1px solid var(--line-l); padding-top: 28px; font-size: 14px; color: var(--muted-l); } .foot__cols a { color: var(--paper); text-decoration: none; } .foot__cols a:hover { color: var(--champ); } @media (min-width: 900px) { .foot__cols { grid-template-columns: repeat(4, 1fr); } .foot { padding-bottom: 60px; } } .foot__legal { margin-top: 40px; color: var(--muted-l); font-size: 10px; line-height: 1.6; } /* ---------- mobile bar ---------- */ .mbar { position: fixed; z-index: 8800; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 2fr; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(5, 5, 5, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(160%); transition: transform .6s var(--ease); } .mbar.is-on { transform: none; } .mbar a { display: grid; place-items: center; height: 46px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--paper); } .mbar a:last-child { background: var(--champ); color: var(--ink); } @media (min-width: 1080px) { .mbar { display: none; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= Signature pieces: endless WebGL ribbon (ported from Mentor's, gleiche Art Direction) ========================================================= */ .gal { background: var(--ink); color: var(--paper); position: relative; } .gal__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; } .gal__ui { position: absolute; z-index: 3; top: calc(var(--band) + 84px); left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; pointer-events: none; } .gal__ui .eyebrow { margin-bottom: 18px; } .gal__title { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 6.6vw, 112px); line-height: .92; letter-spacing: -.02em; color: var(--paper); } .gal__title em { color: var(--champ); } .gal__hint { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-l); padding-bottom: .8em; white-space: nowrap; } .gal__hint-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(196, 196, 198, .6); position: relative; } .gal__hint-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--champ); animation: galdot 1.8s var(--ease) infinite; } @keyframes galdot { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } } .gal__stage { position: absolute; inset: 0; z-index: 1; display: none; touch-action: pan-y; cursor: grab; } .gal__stage.is-drag { cursor: grabbing; } .gal__stage canvas { display: block; width: 100% !important; height: 100% !important; } .gal--gl .gal__stage { display: block; } .gal__foot { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: clamp(22px, 5vh, 48px); display: none; justify-content: space-between; align-items: baseline; gap: 20px; pointer-events: none; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-l); } .gal--gl .gal__foot { display: flex; } .gal__idx { font-variant-numeric: tabular-nums; } .gal__idx [data-gal-i] { color: var(--champ); } .gal__note { opacity: .7; } .gal__cap { display: block; overflow: hidden; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--paper); text-align: right; } .gal__cap-in { display: inline-block; } .gal__track { position: absolute; left: 0; right: 0; bottom: clamp(30px, 8vh, 80px); display: flex; gap: clamp(16px, 2.4vw, 36px); padding: 0 var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gal__track::-webkit-scrollbar { display: none; } .gal__item { flex: none; scroll-snap-align: start; width: min(46vw, 620px); } .gal__item .frame { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: linear-gradient(150deg, #2A2621, #6E5B3A 60%, #C6AD7B); } .gal__item .frame img { width: 100%; height: 100%; object-fit: cover; } .gal__item figcaption { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--paper); } .gal__item figcaption span { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--champ); margin-right: 8px; letter-spacing: .1em; } .gal--gl .gal__track { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0; } @media (max-width: 720px) { .gal__ui { top: calc(var(--band) + 72px); flex-direction: column; align-items: flex-start; gap: 10px; } .gal__item { width: 80vw; } .gal__foot { bottom: 30px; flex-direction: column; align-items: flex-start; gap: 8px; } .gal__cap { text-align: left; font-size: 26px; } .gal__note { order: 3; } } .rm .gal__pin, html:not(.js) .gal__pin { height: auto; padding: calc(var(--band) + 110px) 0 80px; } .rm .gal__ui, html:not(.js) .gal__ui { position: static; padding: 0 var(--gut) 36px; } .rm .gal__track, html:not(.js) .gal__track { position: static; } /* ---------- split-text heading reveals ---------- */ .split-l { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; } .split-w { display: inline-block; will-change: transform; } /* ========================================================= WOW pass: generations, forge, spin, sketch, case, orbit ========================================================= */ .visit, .foot { background: var(--ink); color: var(--paper); } /* ---------- generations: pinned kinetic type ---------- */ .gen { background: var(--paper); position: relative; } .gen__pin { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; } .gen__top { position: absolute; z-index: 5; top: calc(var(--band) + 86px); left: var(--gut); right: var(--gut); } .gen__top .eyebrow { margin-bottom: 14px; } .gen__h { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 42px); line-height: 1; letter-spacing: -.01em; } .gen__h em { font-style: italic; color: var(--champ-d); } .gen__bg { position: absolute; z-index: 1; inset: 0; pointer-events: none; } /* #story-bg: Hintergrund-Ebene, gestaltet in story.css / story.js */ .gen__words { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; pointer-events: none; } .gen__w { grid-area: 1 / 1; margin: 0; white-space: nowrap; color: var(--ink); font-family: var(--didone); font-size: calc(clamp(96px, 22vw, 380px) * var(--k, 1)); line-height: .9; letter-spacing: -.035em; font-variation-settings: "wght" var(--w, 420), "opsz" var(--o, 96); opacity: 0; } .gen__w.is-on { opacity: 1; } .gen__w .ch { display: inline-block; will-change: transform; } .gen__bench { position: absolute; z-index: 4; inset: 0; overflow: hidden; clip-path: circle(0% at 50% 50%); background: var(--ink-2); } .gen__bench img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; } .gen__caps { position: absolute; z-index: 6; left: var(--gut); bottom: clamp(26px, 6vh, 64px); width: min(460px, calc(100% - 2 * var(--gut))); min-height: 150px; } .gen__cap { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), transform .8s var(--ease), visibility .6s; transform: translateY(16px); } .gen__cap.is-on { opacity: 1; visibility: visible; transform: none; } .gen__cap .mono { color: var(--champ-d); } .gen__cap p { margin-top: 10px; font-size: clamp(15px, 1.2vw, 18px); color: #2E2B26; } /* no pad: the text lies plainly over the drawing */ .gen__fam { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } .gen__fam li { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; } .gen__fam b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.05; } .gen__fam span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .gen__prog { position: absolute; z-index: 5; right: var(--gut); top: 30%; bottom: 30%; width: 1px; background: var(--line); } .gen__prog i { position: absolute; inset: 0; background: var(--champ-d); transform: scaleY(0); transform-origin: 50% 0; } @media (max-width: 760px) { .gen__words { place-items: start center; padding-top: 34svh; } .gen__w { font-size: calc(27vw * var(--km, 1)); } /* lange deutsche Wörter auf Breite skaliert */ .gen__caps { min-height: 210px; } .gen__prog { display: none; } } .rm .gen__pin, html:not(.js) .gen__pin { height: auto; padding: calc(var(--band) + 110px) 0 90px; } .rm .gen__top, .rm .gen__caps, html:not(.js) .gen__top, html:not(.js) .gen__caps { position: static; width: auto; margin: 0 var(--gut); } .rm .gen__words, .rm .gen__prog, .rm .gen__bench, html:not(.js) .gen__words, html:not(.js) .gen__prog, html:not(.js) .gen__bench { display: none; } .rm .gen__cap, html:not(.js) .gen__cap { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 36px; } .forge, .spin, .orbit { background: var(--ink); color: var(--paper); position: relative; } /* ---------- spin: image sequence ---------- */ .spin__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; } .spin__poster, .spin__cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .spin__cv { opacity: 0; transition: opacity .6s; } .spin.has-seq .spin__cv { opacity: 1; } .spin.has-seq .spin__poster { visibility: hidden; } .spin__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, .55) 0%, rgba(5, 5, 5, 0) 30%, rgba(5, 5, 5, 0) 55%, rgba(5, 5, 5, .8) 100%); pointer-events: none; } .spin__lines { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(48px, 10vh, 110px); height: 1.1em; font-family: var(--serif); font-size: clamp(38px, 6vw, 104px); line-height: 1; } .spin__l { position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; gap: .35em; opacity: 0; transform: translateY(30%); transition: opacity .6s var(--ease), transform .8s var(--ease); } .spin__l.is-on { opacity: 1; transform: none; } .spin__l .mono { font-size: 12px; color: var(--champ); } .spin__bar { position: absolute; left: var(--gut); right: var(--gut); bottom: 28px; height: 1px; background: var(--line-l); } .spin__bar i { position: absolute; inset: 0; background: var(--champ); transform: scaleX(0); transform-origin: 0 50%; } .rm .spin__l:first-child { opacity: 1; transform: none; } /* ---------- ring builder: photographic configurator ---------- */ .bld__tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .bld__img, .bld__gl, .bld__turn { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .bld__img { object-fit: cover; transition: opacity .6s var(--ease), filter .6s var(--ease); } .bld__gl { opacity: 0; transition: opacity .8s var(--ease); } .builder__stage.has-gl .bld__gl { opacity: 1; } .builder__stage.has-gl .bld__img { opacity: 0; } .bld__turn { opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); cursor: ew-resize; } .builder__stage.is-turning .bld__turn { opacity: 1; pointer-events: auto; } .builder__stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(246, 243, 237, .08); background: linear-gradient(180deg, transparent 72%, rgba(5, 5, 5, .55)); } .bld__plan { position: absolute; z-index: 3; top: 14px; right: 14px; width: 92px; height: auto; padding: 8px; border-radius: 6px; background: rgba(5, 5, 5, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: visible; transition: opacity .4s; } .builder__stage.is-turning .bld__plan { opacity: 0; } .bld__plan-ring { fill: none; stroke: rgba(196, 196, 198, .28); stroke-width: 1; stroke-dasharray: 2 4; } .bld__plan-gem { fill: rgba(246, 243, 237, .06); stroke: #ECEAE6; stroke-width: 1.4; stroke-linejoin: round; } .bld__plan-facets { fill: none; stroke: rgba(236, 234, 230, .45); stroke-width: .8; } .bld__plan text { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; fill: #ECEAE6; } .bld__turnbtn { position: absolute; z-index: 3; right: 14px; bottom: 12px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(236, 234, 230, .5); background: rgba(5, 5, 5, .45); color: #F6F3ED; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .3s; } .bld__turnbtn:hover, .bld__turnbtn[aria-pressed="true"] { background: #ECEAE6; color: #050505; } .bld__turnbtn:focus-visible { outline: 2px solid var(--champ); outline-offset: 2px; } .bld__turnbtn[hidden] { display: none; } .builder__tag { position: absolute; z-index: 3; left: 16px; bottom: 14px; color: rgba(246, 243, 237, .78); font-size: 10.5px; letter-spacing: .08em; max-width: calc(100% - 150px); line-height: 1.4; } .builder__note { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 44ch; } @media (max-width: 520px) { .bld__plan { width: 72px; top: 10px; right: 10px; padding: 6px; } .builder__tag { left: 12px; bottom: 12px; } .bld__turnbtn { right: 10px; bottom: 10px; } } /* ---------- service dial (mechanics of the first version, v4 palette: platinum, silver, ink) ---------- */ .strand { height: clamp(80px, 10vw, 160px); background: var(--ink); overflow: hidden; } .strand svg { width: 100%; height: 100%; display: block; } .strand path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .strand .s-a { stroke: var(--champ); } .strand .s-b { stroke: rgba(236, 234, 230, .28); } .dial { background: var(--ink); color: var(--paper); position: relative; } .dial__pin { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: clamp(90px, 8vw, 120px) var(--gut) 60px; } .dial__title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 76px); line-height: .95; letter-spacing: -.015em; color: var(--paper); } .dial__title em { color: var(--champ); } .dial .eyebrow { margin-bottom: 18px; } .dial__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 26px; } .dial__tabs button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(236, 234, 230, .3); background: transparent; color: var(--paper); cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color .3s, color .3s, border-color .3s; } .dial__tabs button:hover { border-color: var(--champ-2); } .dial__tabs button[aria-selected="true"] { background: var(--champ-2); color: var(--ink); border-color: var(--champ-2); } .dial__panels { min-height: 250px; } .panel__from { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5vw, 76px); line-height: 1; color: var(--champ-2); } .panel ul { list-style: none; padding: 0; margin: 18px 0 0; max-width: 420px; } .panel li { padding: 11px 0; border-top: 1px solid rgba(236, 234, 230, .14); color: rgba(246, 245, 242, .9); } .panel__note { margin-top: 16px; color: var(--muted-l); font-size: 16px; max-width: 40ch; } .panel.is-on { animation: pIn .6s var(--ease); } @keyframes pIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .dial__face { position: relative; width: min(100%, 640px, 78vh); aspect-ratio: 1; justify-self: center; } .dial__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dial__track { fill: none; stroke: rgba(236, 234, 230, .16); stroke-width: 1; } .dial__ticks line { stroke: rgba(236, 234, 230, .32); stroke-width: 1; } .dial__ticks line.maj { stroke: var(--champ-2); stroke-width: 2; } .dial__lbl { font-family: var(--serif); font-size: 23px; fill: rgba(236, 234, 230, .38); transition: fill .5s; } .dial__lbl.is-on { fill: var(--champ-2); } .dial__hand { fill: var(--champ-2); } .dial__core { position: absolute; inset: 16%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(196, 196, 198, .4), 0 40px 80px -30px rgba(0, 0, 0, .8); background: var(--ink-2); } .dial__core .core { position: absolute; inset: 0; clip-path: circle(0% at 50% 50%); transition: clip-path 1s var(--ease); } .dial__core .core.is-on { clip-path: circle(71% at 50% 50%); } .dial__core .core img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } @media (max-width: 900px) { .dial__pin { grid-template-columns: 1fr; padding-top: 70px; } .dial__face { order: -1; width: min(86vw, 420px); } } .rm .dial__core .core { transition: none; } /* radius-pass */ :root{--img-r:clamp(15px,1.4vw,22px)} .builder__stage,.gal__item .frame,.vcard,.pcard__media{border-radius:var(--img-r)} /* /radius-pass */ /* naked-fix 17.10.: die Headline liegt sichtbar über dem WebGL-Band; als echter Szenentext nimmt sie Zeiger-Ereignisse an (vorher pointer-events:none, Prüfwerkzeug sah nur das Canvas) */ .gal__title { pointer-events: auto; } /* ========================================================= Pass 18.10.: film, card stack, shop, product panel, cart ========================================================= */ /* ---------- nav cart ---------- */ .nav__cart { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid currentColor; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; transition: background-color .3s, color .3s; } .nav__cart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; } .nav__cart b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--champ); color: var(--ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .nav__cart:not(.has-items) b { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; opacity: .7; } .nav__cart:hover { background: var(--champ); color: var(--ink); border-color: var(--champ); } .nav__cart-t { display: none; } @media (min-width: 1080px) { .nav__cart-t { display: inline; } .nav__links { gap: 24px; } } @media (max-width: 1079px) { .nav__cart { padding: 0 10px; } } .has-overlay .nav, .has-overlay .mbar { visibility: hidden; } /* ---------- forge: the film ---------- */ /* the film overlaps the last screen of the story: its stage stays hidden until it reaches the top, then takes over from the story's opening circle on an identical frame (film-skizze, cover, scale 1.05) */ .forge { height: 560vh; margin-top: -100vh; margin-top: -100svh; z-index: 2; background: transparent !important; } .fstage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); } .rm .forge, html:not(.js) .forge { margin-top: 0; } .fview { position: absolute; left: 0; top: 0; width: 100vw; height: 100%; overflow: hidden; transform-origin: 0 0; visibility: hidden; will-change: transform, opacity; background: var(--ink); } .fview .plate { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background: #1A1815; } .fview .plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fstudio__bg { position: absolute; inset: 0; background: #0b0907 url(assets/film-stone-bg.jpg) 50% 50% / cover no-repeat; } /* the ring-free stone of the turning ring: explosion, assembly and spin share one ground */ .fganz { position: absolute; left: 50%; top: 50%; height: 64%; aspect-ratio: 3 / 4; margin: 0; transform: translate(-50%, -50%); } .fganz > img, .fpart__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .fganz > img { filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .55)); } /* flying parts without filter: no repaint per frame */ .fpart { position: absolute; left: 50%; top: 50%; opacity: 0; } .fpart__img { position: absolute; inset: 0; } .flbl { position: absolute; left: 50%; top: 100%; width: max-content; max-width: 15em; margin: .5em 0 0; text-align: center; font-size: 13px; line-height: 1.35; color: var(--muted-l); opacity: 0; transform-origin: 50% 0; } .flbl b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.05; color: var(--champ-2); } .fstage::after { content: ""; position: absolute; z-index: 20; inset: 0; pointer-events: none; opacity: var(--scrim, 1); background: linear-gradient(0deg, rgba(5, 5, 5, .82) 0, rgba(5, 5, 5, .3) 42%, rgba(5, 5, 5, 0) 70%); } .fcaps { position: absolute; z-index: 30; inset: 0; pointer-events: none; } .fcap { position: absolute; left: var(--gut); bottom: clamp(64px, 10vh, 110px); max-width: min(46rem, 56vw); opacity: 0; visibility: hidden; } .fcap .eyebrow { margin-bottom: 16px; } .forge__title { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 104px); line-height: .92; letter-spacing: -.02em; color: var(--paper); text-shadow: 0 2px 30px rgba(5, 5, 5, .45); } .forge__title em { color: var(--champ); } .fcap__t { max-width: 40ch; margin-top: 16px; font-size: 17px; color: rgba(246, 243, 237, .86); text-shadow: 0 1px 14px rgba(5, 5, 5, .8); } .fcap--top { left: 0; right: 0; max-width: none; text-align: center; bottom: auto; top: calc(var(--band) + 110px); } .fcap--top .forge__title { font-size: clamp(36px, 4vw, 64px); } .forge__tag { position: absolute; z-index: 31; right: var(--gut); bottom: 40px; color: var(--champ-2); } .forge__bar { position: absolute; z-index: 31; left: var(--gut); right: var(--gut); bottom: 26px; height: 1px; background: var(--line-l); } .forge__bar i { position: absolute; inset: 0; background: var(--champ); transform: scaleX(0); transform-origin: 0 50%; } @media (max-width: 760px) { .fcap { right: var(--gut); max-width: none; bottom: 70px; } .fcap--top { top: calc(var(--band) + 104px); } .fganz { height: 44%; } .flbl span { display: none; } .flbl b { font-size: 18px; } .fcap__t { font-size: 15px; } } .rm .forge, html:not(.js) .forge { height: auto; } .rm .fstage, html:not(.js) .fstage { position: relative; height: auto; overflow: visible; } .rm .fstage::after, html:not(.js) .fstage::after { display: none; } .rm .fview, html:not(.js) .fview { position: relative; visibility: visible; height: 70vh; width: 100%; } .rm .fview .plate, html:not(.js) .fview .plate { width: 100%; height: 100%; } .rm .fcaps, html:not(.js) .fcaps { position: static; padding: 40px var(--gut); display: grid; gap: 40px; } .rm .fcap, html:not(.js) .fcap { position: static; opacity: 1; visibility: visible; max-width: none; } .rm .fpart, .rm .flbl, html:not(.js) .fpart { opacity: 1; } .rm .forge__tag, .rm .forge__bar { display: none; } /* ---------- the case ---------- desktop (> 820px): the Mattis vitrine accordion, unchanged in behaviour (doors widen on hover) phones (<= 820px): pinned card stack, pieces slide in from the right and pile up to the left (main.js, matchMedia) */ .case { background: var(--paper); position: relative; padding: clamp(110px, 14vw, 200px) 0 clamp(80px, 10vw, 140px); } .case__pin { position: relative; } .case__head { display: grid; gap: 28px; margin: 0 auto clamp(40px, 6vw, 70px); padding: 0 var(--gut); max-width: 1560px; } .case__head .eyebrow { margin-bottom: 0; } .case__lede { color: var(--muted); max-width: 46ch; font-size: 17px; align-self: end; } .case__count { display: none; } @media (min-width: 1000px) { .case__head { grid-template-columns: 1.3fr 1fr; column-gap: 6vw; } .case__head .eyebrow { grid-column: 1; } .case__head .display { grid-column: 1; } .case__lede { grid-column: 2; grid-row: 1 / 3; } } .case__deck { display: flex; gap: 10px; padding: 0 var(--gut); height: 72svh; min-height: 480px; } .vcard { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: var(--ink); color: var(--paper); text-align: left; cursor: pointer; overflow: hidden; transition: flex-grow .9s var(--ease-io); --sh: 0; } .case__deck:hover .vcard, .case__deck:focus-within .vcard { flex-grow: .7; } .case__deck .vcard:hover, .case__deck .vcard:focus-visible { flex-grow: 3.4; } .vcard__media { position: absolute; inset: 0; } .vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .vcard:hover .vcard__media img { transform: scale(1.05); } .vcard::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, .1) 40%, rgba(5, 5, 5, .75)); transition: opacity .8s var(--ease); } .vcard:hover::before { opacity: .55; } .vcard::after { content: ""; position: absolute; z-index: 3; inset: 0; background: var(--ink); opacity: var(--sh); pointer-events: none; } .vcard__n { position: absolute; z-index: 2; left: 18px; top: 16px; color: var(--champ-2); } .vcard__t { position: absolute; z-index: 2; left: 18px; bottom: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(34px, 3vw, 52px); line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } .vcard__p { position: absolute; z-index: 2; left: 84px; right: 18px; bottom: 22px; font-size: 14px; color: rgba(246, 245, 242, .82); opacity: 0; transition: opacity .5s var(--ease); } .vcard:hover .vcard__p, .vcard:focus-visible .vcard__p { opacity: 1; transition-delay: .35s; } .vcard:focus-visible { outline: 2px solid var(--champ); outline-offset: 4px; } @media (max-width: 820px) { .case { padding: 0; } .case__pin { height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding: calc(var(--band) + 96px) var(--gut) 34px; gap: 22px; } .case__head { gap: 18px; margin: 0; padding: 0; align-content: start; } .case__head .display { font-size: clamp(44px, 11vw, 80px); } .case__lede { max-width: 34ch; } .case__count { display: block; color: var(--champ-d); } .case__deck { position: relative; display: block; padding: 0; height: auto; min-height: 0; } .vcard { position: absolute; top: 0; bottom: 0; left: 30%; width: min(62vw, 340px); box-shadow: 0 30px 60px -30px rgba(5, 5, 5, .55); transform-origin: 50% 90%; transition: none; } .vcard__t { writing-mode: horizontal-tb; transform: none; right: 18px; bottom: 52px; font-size: clamp(32px, 8vw, 44px); } .vcard__p { left: 18px; bottom: 20px; opacity: 1; } } .rm .case__pin, html:not(.js) .case__pin { height: auto; display: block; } @media (max-width: 820px) { .rm .case, html:not(.js) .case { padding: 90px 0; } .rm .case__deck, html:not(.js) .case__deck { display: flex; gap: 10px; overflow-x: auto; margin-top: 32px; height: 60vh; } .rm .vcard, html:not(.js) .vcard { position: relative; left: auto; flex: none; height: 100%; } } /* ---------- shop ---------- */ .shop { background: var(--paper); padding: clamp(90px, 11vw, 170px) 0 clamp(90px, 11vw, 160px); border-top: 1px solid var(--line); } .shop__head { display: grid; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); } .shop__head .eyebrow { margin-bottom: 0; } .shop__lede { max-width: 40ch; color: var(--muted); font-size: 17px; } @media (min-width: 1000px) { .shop__head { grid-template-columns: 1.3fr 1fr; align-items: end; } .shop__head .eyebrow { grid-column: 1 / -1; } } .shop__tabs { position: sticky; z-index: 30; top: 72px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1) clamp(18px, 2vw, 28px); padding: 10px var(--gut); background: var(--paper); border-bottom: 1px solid var(--line); } @media (max-width: 1079px) { .shop__tabs { top: 74px; } } .shop__tabs::-webkit-scrollbar { display: none; } .shop__tab { flex: none; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; } .shop__tab:hover { border-color: var(--ink); } .shop__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .shop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; } @media (min-width: 760px) { .shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; } .pcard:nth-child(3n + 2) { margin-top: 56px; } } @media (min-width: 1200px) { .shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pcard:nth-child(3n + 2) { margin-top: 0; } .pcard:nth-child(4n + 2), .pcard:nth-child(4n + 4) { margin-top: 64px; } } .pcard { display: grid; gap: 14px; align-content: start; } .pcard__btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .pcard__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); } .pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .7s var(--ease); } .pcard__alt { opacity: 0; } .pcard__btn:hover .pcard__media img { transform: scale(1.04); } .pcard__btn:hover .pcard__alt { opacity: 1; } .pcard__badge { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(246, 243, 237, .88); color: var(--ink); font-size: 9.5px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pcard__cat { color: var(--champ-d); font-size: 10px; } .pcard__h { margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.05; } .pcard__mat { margin-top: 6px; font-size: 13px; color: var(--muted); } .pcard__price { margin-top: 8px; font-size: 13px; font-weight: 600; } .shop__note { margin-top: clamp(40px, 5vw, 72px); color: var(--muted); } .shop__none { grid-column: 1 / -1; color: var(--muted); } /* ---------- product panel ---------- */ .pp, .cart { position: fixed; inset: 0; z-index: 9600; visibility: hidden; pointer-events: none; } .pp.is-open, .cart.is-open { visibility: visible; pointer-events: auto; } .pp__scrim, .cart__scrim { position: absolute; inset: 0; background: rgba(5, 5, 5, .55); opacity: 0; transition: opacity .5s var(--ease); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .pp.is-open .pp__scrim, .cart.is-open .cart__scrim { opacity: 1; } .pp__sheet { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); transform: translateY(100%); transition: transform .8s var(--ease-io); display: grid; align-content: start; } .pp.is-open .pp__sheet { transform: none; } .pp__x { position: absolute; z-index: 3; right: 14px; top: 14px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(246, 243, 237, .92); cursor: pointer; display: grid; place-content: center; } .pp__x span { display: block; width: 16px; height: 1.5px; background: var(--ink); grid-area: 1 / 1; transform: rotate(45deg); } .pp__x span + span { transform: rotate(-45deg); } .pp__x--s { position: static; } .pp__media { display: grid; gap: 8px; } .pp__main { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); } .pp__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pp__thumbs { display: flex; gap: 8px; padding: 0 var(--gut); } .pp__thumbs:empty { display: none; } .pp__thumb { width: 64px; height: 80px; padding: 0; border: 1px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; } .pp__thumb img { width: 100%; height: 100%; object-fit: cover; } .pp__thumb[aria-pressed="true"] { border-color: var(--ink); } .pp__info { padding: 24px var(--gut) 48px; display: grid; gap: 14px; align-content: start; } .pp__k { color: var(--muted); display: flex; gap: 10px; align-items: center; } .pp__badge { padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--champ-2); } .pp__h { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.2vw, 66px); line-height: .95; letter-spacing: -.01em; } .pp__mat { color: var(--champ-d); } .pp__desc { color: #3A362F; max-width: 42ch; font-size: 17px; } .pp__opts { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 16px; } .pp__opts[hidden], .pp__field[hidden] { display: none; } .pp__field { display: grid; gap: 6px; } .pp__field label { font-size: 13px; color: var(--muted); } .pp__field select, .pp__field input { min-height: 48px; border: 0; border-bottom: 1px solid rgba(5, 5, 5, .3); background: transparent; font-size: 16px; padding: 8px 0; border-radius: 0; appearance: none; -webkit-appearance: none; } .pp__field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234E5866' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 22px; } .pp__field select:focus, .pp__field input:focus { outline: none; border-bottom-color: var(--champ-d); } .pp__field.is-err select { border-bottom-color: #C0563F; } .pp__price { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; } .pp__price .mono { color: var(--muted); } .pp__price b { font-family: var(--serif); font-weight: 400; font-size: 26px; } .pp__acts { display: flex; flex-wrap: wrap; gap: 10px; } .btn--line { --bg: transparent; --fg: var(--ink); border-color: rgba(5, 5, 5, .3); } .btn.is-done { background: var(--champ); color: var(--ink); border-color: var(--champ); } .pp__note { font-size: 13px; color: var(--muted); } @media (min-width: 900px) { .pp__sheet { left: auto; width: min(1180px, 92vw); grid-template-columns: 1.1fr 1fr; transform: translateX(100%); align-content: stretch; } .pp__media { position: sticky; top: 0; height: 100vh; grid-template-rows: 1fr auto; padding-bottom: 14px; } .pp__main { aspect-ratio: auto; } .pp__info { padding: 96px 4vw 60px; align-content: center; } } /* ---------- cart drawer ---------- */ .cart__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--paper); display: grid; grid-template-rows: auto 1fr auto; transform: translateX(100%); transition: transform .7s var(--ease-io); } .cart.is-open .cart__sheet { transform: none; } .cart__top { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gut) 16px; border-bottom: 1px solid var(--line); } .cart__h { font-family: var(--serif); font-weight: 400; font-size: 34px; display: flex; align-items: baseline; gap: 12px; } .cart__h .mono { color: var(--muted); } .cart__list { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gut); } .cart__empty { grid-row: 2; align-self: start; padding: 28px var(--gut); color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 24px; } .cart__empty[hidden] { display: none; } .citem { display: grid; grid-template-columns: 72px 1fr auto; grid-template-rows: auto auto; gap: 6px 14px; padding: 18px 0; border-bottom: 1px solid var(--line); } .citem img { grid-row: 1 / 3; width: 72px; height: 90px; object-fit: cover; border-radius: 8px; } .citem__h { font-family: var(--serif); font-size: 21px; line-height: 1.05; } .citem__m { margin-top: 4px; font-size: 12.5px; color: var(--muted); } .citem__p { margin-top: 6px; color: var(--champ-d); } .citem__q { display: flex; align-items: center; gap: 4px; align-self: start; border: 1px solid var(--line); border-radius: 999px; } .citem__q button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; font-size: 16px; } .citem__q span { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; } .citem__rm { grid-column: 3; justify-self: end; align-self: end; border: 0; background: none; padding: 4px 0; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .citem__rm:hover { color: var(--ink); } .cart__foot { padding: 18px var(--gut) calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 14px; } .cart__sum { display: flex; justify-content: space-between; align-items: baseline; } .cart__sum .mono { color: var(--muted); } .cart__sum b { font-family: var(--serif); font-weight: 400; font-size: 26px; } .cart__go { width: 100%; } .cart__go[hidden] { display: none; } .cart__go:disabled { opacity: .35; pointer-events: none; } .cart__notice { display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: var(--ink); color: var(--paper); } .cart__notice[hidden] { display: none; } .cart__notice .mono { color: var(--champ); } .cart__notice p:not(.mono) { font-size: 14.5px; color: rgba(246, 243, 237, .82); } .cart__nacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .cart__notice .btn--line { --fg: var(--paper); border-color: rgba(246, 243, 237, .4); } /* ---------- ring atelier: one screen on phones (390 x 844) ---------- */ @media (max-width: 760px) { .builder { padding: 84px 0 70px; } .builder__head { gap: 14px; margin-bottom: 22px; } .builder__head .display { font-size: 44px; } .builder__lede { font-size: 15px; } .builder__grid { gap: 14px; } .builder__stage { aspect-ratio: auto; height: min(46svh, 400px); } .builder__controls { gap: 12px; } .builder__controls fieldset { padding-top: 10px; } .builder__controls legend { font-size: 13px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; color: var(--muted); } .chips { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .chips--metal { grid-template-columns: repeat(4, 1fr); } .chips--cut { grid-template-columns: repeat(5, 1fr); } .chips span { min-height: 40px; padding: 0 4px; border: 0; justify-content: center; gap: 6px; font-size: 12.5px; width: 100%; } .chips--metal span em { font-style: normal; } .chips--metal .sw { width: 12px; height: 12px; flex: none; } .chips label { display: flex; } .builder__note { display: none; } .spec { padding-top: 10px; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; } .spec__v { font-size: 20px; } .builder__controls .btn { min-height: 48px; width: 100%; } .bld__plan { width: 64px; } } .fcap h2, .fcap p { pointer-events: auto; } /* Szenentext nimmt Zeiger an (naked-check sieht sonst nur das Bild) */ /* hero on portrait screens: the video keeps its 16:9 frame (wider than the screen), so shrinking it keeps the aperture filled */ @media (max-aspect-ratio: 1/1) { .hero__media .ph--hero { --vw: max(100%, calc(100svh * 16 / 9)); left: 50%; right: auto; width: var(--vw); margin-left: calc(var(--vw) / -2); } } .hero__meta > span { white-space: nowrap; } @media (max-width: 420px) { .hero__meta { font-size: 10px; letter-spacing: .08em; } } @media (max-width: 520px) { .hero__line--b { letter-spacing: .3em; margin-right: -.3em; font-size: 12px; } } /* reduced motion: story captions without full-width bands, film as five captioned stills */ .rm .gen__cap p, .rm .gen__fam, html:not(.js) .gen__cap p { background: none; } .rm .gen__caps, html:not(.js) .gen__caps { max-width: 560px; } .rm .fview, html:not(.js) .fview { height: 82vh; height: 82svh; min-height: 480px; } .rm .fview::after { content: ""; position: absolute; inset: 0; z-index: 4; background: linear-gradient(0deg, rgba(5, 5, 5, .82) 0, rgba(5, 5, 5, .2) 45%, rgba(5, 5, 5, 0) 70%); pointer-events: none; } .rm .fview .fcap { position: absolute; z-index: 5; left: var(--gut); right: var(--gut); bottom: 40px; opacity: 1; visibility: visible; max-width: 46rem; transform: none !important; } .rm .fstudio .fcap--top { top: 40px; bottom: auto; } .rm .fpart { display: none; } .rm .fganz { opacity: 1 !important; } .rm .fcaps { display: none; } .gen__sig { margin-top: 14px; display: flex; gap: 12px; align-items: baseline; } .gen__sig b { font-family: var(--serif); font-weight: 400; font-size: 22px; } .gen__sig span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ---------- shop: rows that stick and stack (2 per row on phones, 3 or 4 on larger screens) ---------- */ .shop__grid--rows { display: block; } .prow { position: sticky; z-index: 1; top: var(--row-top, 140px); display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 24px; padding: 18px 0 34px; background: var(--paper); transform-origin: 50% 0; --dim: 0; will-change: transform; } .prow::after { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: var(--dim); pointer-events: none; border-radius: var(--img-r); } .prow + .prow { box-shadow: 0 -22px 34px -28px rgba(5, 5, 5, .35); } .prow .pcard { margin-top: 0 !important; } @media (max-width: 820px) { .prow { gap: 12px; padding: 12px 0 20px; } } /* ---------- cart extras + test checkout ---------- */ .cart__vat { font-size: 12px; color: var(--muted); margin-top: -8px; } .cart__ask { justify-self: center; border: 0; background: none; padding: 4px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .cart__ask:hover { color: var(--ink); } .co { position: fixed; inset: 0; z-index: 9650; visibility: hidden; pointer-events: none; } .co.is-open { visibility: visible; pointer-events: auto; } .co__scrim { position: absolute; inset: 0; background: rgba(5, 5, 5, .6); opacity: 0; transition: opacity .5s var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .co.is-open .co__scrim { opacity: 1; } .co__sheet { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); padding: 0 var(--gut) calc(40px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .8s var(--ease-io); } .co.is-open .co__sheet { transform: none; } @media (min-width: 900px) { .co__sheet { inset: 4vh auto 4vh 50%; width: min(760px, 92vw); margin-left: calc(min(760px, 92vw) / -2); border-radius: 22px; padding: 0 48px 40px; transform: translateY(40px); opacity: 0; transition: transform .7s var(--ease), opacity .5s; } .co.is-open .co__sheet { transform: none; opacity: 1; } } .co__test { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 calc(var(--gut) * -1); padding: 10px var(--gut); background: var(--ink); color: var(--champ-2); font-size: 10.5px; letter-spacing: .12em; } @media (min-width: 900px) { .co__test { margin: 0 -48px; } } .co__test i { width: 7px; height: 7px; border-radius: 50%; background: var(--champ); box-shadow: 0 0 0 3px rgba(196, 196, 198, .25); } .co__top { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 10px; } .co__h { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4vw, 52px); line-height: 1; } .co__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0 26px; } .co__steps li { display: grid; gap: 6px; padding-top: 10px; border-top: 2px solid var(--line); font-size: 12px; color: var(--muted); } .co__steps li .mono { font-size: 10px; } .co__steps li.is-done { border-color: var(--champ-d); color: var(--ink); } .co__steps li.is-on { border-color: var(--ink); color: var(--ink); font-weight: 600; } @media (max-width: 520px) { .co__steps li { font-size: 0; gap: 0; } .co__steps li .mono { font-size: 10px; } .co__steps li.is-on { font-size: 11px; } } .co__k { font-family: var(--serif); font-weight: 400; font-size: 28px; margin-bottom: 16px; } .col { display: grid; } .col__i { display: grid; grid-template-columns: 60px 1fr auto auto; gap: 6px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .col__i img { width: 60px; height: 74px; object-fit: cover; border-radius: 8px; } .col__h { font-family: var(--serif); font-size: 20px; line-height: 1.05; } .col__m { margin-top: 3px; font-size: 12.5px; color: var(--muted); } .col__q { color: var(--muted); } .col__p { font-weight: 600; font-size: 14px; white-space: nowrap; } @media (max-width: 520px) { .col__i { grid-template-columns: 52px 1fr auto; } .col__i img { width: 52px; height: 64px; grid-row: 1 / 3; } .col__i .citem__q, .col__i .col__q { grid-column: 2; justify-self: start; } .col__p { grid-column: 3; grid-row: 1; } } .cos { display: grid; gap: 8px; margin: 18px 0 0; } .cos div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; } .cos dd { margin: 0; } .cos__tot { border-top: 1px solid var(--ink); padding-top: 10px; font-family: var(--serif); font-size: 24px !important; } .cos__vat { color: var(--muted); font-size: 12.5px !important; } .cog { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .cog[hidden] { display: none; } .cog .cof:nth-child(3), .cog .cof:nth-child(4) { grid-column: span 1; } @media (max-width: 520px) { .cog { grid-template-columns: 1fr; } } .cof { display: grid; gap: 6px; } .cof label { font-size: 13px; color: var(--muted); } .cof input { min-height: 50px; border: 0; border-bottom: 1px solid rgba(5, 5, 5, .3); background: transparent; font-size: 16px; padding: 8px 0; border-radius: 0; } .cof input:focus { outline: none; border-bottom-color: var(--ink); } .cof.is-err input { border-bottom-color: #B4553F; } .cof__err { min-height: 16px; font-size: 12px; color: #9E4634; } .cor-g { display: grid; gap: 10px; margin-bottom: 18px; } .cor { position: relative; display: block; cursor: pointer; } .cor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .cor span { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 60px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 14px; transition: border-color .3s, background-color .3s; } .cor span b { font-weight: 600; font-size: 15px; } .cor span em { font-style: normal; font-size: 13px; color: var(--muted); text-align: right; } .cor input:checked + span { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); } .cor input:focus-visible + span { outline: 2px solid var(--champ-d); outline-offset: 2px; } .co__hint { font-size: 13px; color: var(--muted); } .co__sum2 { display: grid; gap: 8px; margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: var(--paper-2); font-size: 14px; } .co__sum2 .mono { display: block; color: var(--muted); font-size: 10px; margin-bottom: 2px; } .co__nav { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding: 14px 0 calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(246, 245, 242, 0), var(--paper) 30%); } .co__nav[hidden] { display: none; } .co__nav [data-co-next] { margin-left: auto; } .co__nav .btn[hidden] { display: none; } .co__done { display: grid; gap: 10px; justify-items: start; padding: 20px 0 10px; } .co__done .mono { color: var(--champ-d); } .co__dh { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6vw, 80px); line-height: .95; } .co__no { font-family: var(--mono); font-size: 22px; letter-spacing: .08em; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; } .co__done .btn { margin-top: 12px; } /* ---------- phones: dark sticky bar once the page moves ---------- */ @media (max-width: 820px) { .nav { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s; } .nav.is-mdark { background: rgba(5, 5, 5, .9); color: #F6F5F2; border-bottom-color: rgba(246, 245, 242, .08); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); } .nav.is-mdark .nav__cart b { background: #F6F5F2; color: var(--ink); box-shadow: none; opacity: 1; } .nav.is-mdark .nav__cart:not(.has-items) b { background: transparent; color: #F6F5F2; box-shadow: inset 0 0 0 1px rgba(246, 245, 242, .7); } .menu-open .nav { background: var(--ink); color: #F6F5F2; } .nav.is-hidden { transform: none; } } /* the sticky tab bar names the open compartment (desktop), so the stack never runs without a heading */ .shop__cur { display: none; } @media (min-width: 1080px) { .shop__cur { display: block; flex: none; align-self: center; margin-right: 18px; min-width: 200px; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1; } } /* spin: the lines sit at the top, so they enter the screen together with the turning ring */ @media (min-width: 1080px) { .shop__tabs { padding-top: 16px; padding-bottom: 14px; } } .pp__field--wide { grid-column: 1 / -1; } .pp__field textarea { min-height: 70px; border: 0; border-bottom: 1px solid rgba(5, 5, 5, .3); background: transparent; font-size: 16px; padding: 8px 0; resize: vertical; border-radius: 0; } .pp__field textarea:focus { outline: none; border-bottom-color: var(--champ-d); } .pp__amount { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid rgba(5, 5, 5, .3); } .pp__amount input { flex: 1; min-height: 52px; border: 0 !important; background: transparent; font-family: var(--serif); font-size: 32px; padding: 6px 0; } .pp__amount input:focus { outline: none; } .pp__amount span { font-family: var(--serif); font-size: 26px; color: var(--muted); } .pp__err { font-size: 12px; color: var(--muted); } .pp__field.is-err .pp__amount { border-bottom-color: #B4553F; } .pp__field.is-err .pp__err { color: #9E4634; } /* vitrine headline: zweizeilig (Umbruch nach dem Komma), Lede rechts unten daneben */ .br-m { display: none; } @media (min-width: 821px) { .case__h { white-space: nowrap; font-size: clamp(44px, 7vw, 120px); } .case__head .case__h { grid-column: 1; grid-row: 2; } .case__head .case__lede { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: .6em; } } @media (max-width: 820px) { .br-m { display: inline; } } .spin__l { white-space: nowrap; transform: translateY(-25%); } .spin__l.is-on { transform: none; } .spin__lines { height: 1.15em; } /* atelier: square-ish stage on desktop (5:4; photos and turntable frames are 4:5 and drawn with cover, all 20 rings sit between 30 % and 75 % of the photo height, so the 18 % crop top and bottom never touches them) */ @media (min-width: 1000px) { .builder__grid { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; } .builder__stage { aspect-ratio: 5 / 4; width: min(100%, calc(76vh * 1.25)); } .builder__tag { grid-column: 1; grid-row: 2; justify-self: center; width: min(100%, calc(76vh * 1.25)); } .builder__controls { grid-column: 2; grid-row: 1 / 3; } } .builder__tag { position: static; max-width: none; margin-top: -18px; color: var(--muted); font-size: 10.5px; } @media (max-width: 999px) { .builder__tag { margin-top: -6px; } } /* ---------- story: line-drawing wrapper (faded before the opening circle) and the handover caption ---------- */ .gen__bgwrap { position: absolute; inset: 0; z-index: 1; } .gen__bgwrap .gen__bg { position: absolute; inset: 0; } .gen__hand { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none; } .gen__handscrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 5, 5, .82) 0, rgba(5, 5, 5, .3) 42%, rgba(5, 5, 5, 0) 70%); } .gen__hand .fcap { pointer-events: none; } .rm .gen__hand, html:not(.js) .gen__hand { display: none; } /* iOS: native Play-Overlay nie zeigen (Stromsparmodus blockiert Autoplay) */ video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; } /* ---------- service dial: the six tabs in two rows of three, equal width ---------- */ .dial__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; } .dial__tabs button { width: 100%; padding: 0 10px; white-space: nowrap; } @media (max-width: 420px) { .dial__tabs { gap: 6px; } .dial__tabs button { font-size: 13px; padding: 0 6px; } } /* Hero-Video erst zeigen, wenn es wirklich läuft: blockiert iOS den Autostart, steht das Posterbild da, nie ein Play-Knopf */ .ph--hero { background: url("assets/hero.jpg?v=4") center / cover no-repeat, radial-gradient(60% 50% at 50% 46%, #F3E6C6 0%, #C6AD7B 22%, #4C3F2A 58%, #0E0D0B 100%); } .hero__video { opacity: 0; transition: opacity .5s ease; } .hero__video.is-playing { opacity: 1; } /* Mobil: Hero-Video füllt den ganzen Schirm, auch wenn die Browserleiste einfährt (lvh statt svh); kein dunkler Streifen unten */ @media (max-width: 767px) { .hero__pin { height: 100vh; height: 100lvh; } .hero__media .ph--hero { --vw: max(100%, calc(100lvh * 16 / 9)); } .hero__shade { background: linear-gradient(180deg, rgba(5, 5, 5, .3) 0%, rgba(5, 5, 5, 0) 30%, rgba(5, 5, 5, 0) 55%, rgba(5, 5, 5, .38) 82%, rgba(5, 5, 5, .3) 100%); } } /* explosion -> turning ring: the spin section overlaps the film by one screen and takes over on an identical frame */ .spin { margin-top: -100vh; margin-top: -100svh; z-index: 3; background: transparent !important; } .fspin { position: absolute; inset: 0; opacity: 0; } .fspin > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rm .spin, html:not(.js) .spin { margin-top: 0; } .rm .spin__pin, html:not(.js) .spin__pin { opacity: 1 !important; } .rm .fspin { display: none; } /* shop stack: no grey plate, no scaling; the images of the row underneath darken slightly, its text recedes */ .prow::after { display: none; } .prow { transform: none !important; background: var(--paper); } .prow .pcard__media::after { content: ""; position: absolute; inset: 0; background: #050505; opacity: var(--dim, 0); pointer-events: none; } .prow .pcard__txt { opacity: calc(1 - var(--dim, 0) * 1.4); } .dot.is-closed { background: #B5574B; } /* story end: the word as a window onto the film's first image */ .gen__winwrap { z-index: 3; opacity: 0; } .gen__win { opacity: 1 !important; color: transparent; } .gen__win .ch { -webkit-background-clip: text; background-clip: text; color: transparent; will-change: auto; } .gen__winfull { position: absolute; inset: 0; z-index: 4; opacity: 0; overflow: hidden; pointer-events: none; } .gen__winfull img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; } .rm .gen__winwrap, .rm .gen__winfull, html:not(.js) .gen__winwrap, html:not(.js) .gen__winfull { display: none; } /* Kontakt + Footer hell (Nutzerwunsch 18.10.): Farb-Variablen in diesem Bereich invertiert */ .visit, .foot { --ink: #F6F5F2; --ink-2: #ECEAE6; --paper: #0C0C0D; --paper-2: #161616; --champ: #56565A; --champ-2: #2A2A2B; --champ-d: #56565A; --muted: #636365; --muted-l: #636365; --line: rgba(5, 5, 5, .14); --line-l: rgba(5, 5, 5, .12); background: #F6F5F2; color: #0C0C0D; } .foot { border-top: 0; } .visit .btn--ghost-light { border-color: rgba(5, 5, 5, .35); } .foot .foot__logo { background: #0C0C0D; } /* Termin-Box auf hellem Grund: weiße Karte, sichtbare Linien, klare Zustände */ .visit .book { background: #FFFFFF; border: 1px solid rgba(5, 5, 5, .08); border-radius: 20px; box-shadow: 0 1px 2px rgba(5, 5, 5, .04), 0 24px 60px -28px rgba(5, 5, 5, .22); gap: 22px 18px; } .visit .book__k { color: #0C0C0D; letter-spacing: .14em; padding-bottom: 14px; border-bottom: 1px solid rgba(5, 5, 5, .1); margin-bottom: 6px; } .visit .field label, .visit .flabel { color: #56565A; font-size: 12px; letter-spacing: .02em; } .visit .field input, .visit .field select, .visit .field textarea { color: #0C0C0D; border-bottom: 1px solid rgba(5, 5, 5, .22); } .visit .field textarea { border: 1px solid rgba(5, 5, 5, .18); border-radius: 12px; padding: 12px 14px; margin-top: 2px; } .visit .field input:hover, .visit .field select:hover { border-bottom-color: rgba(5, 5, 5, .45); } .visit .field textarea:hover { border-color: rgba(5, 5, 5, .4); } .visit .field input:focus, .visit .field select:focus { border-bottom-color: #0C0C0D; } .visit .field textarea:focus { border-color: #0C0C0D; } .visit .field input::placeholder { color: rgba(5, 5, 5, .3); } .visit .field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230C0C0D' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center no-repeat; } .visit .field select option { color: #0C0C0D; } .visit .days span { border-color: rgba(5, 5, 5, .2); color: #0C0C0D; } .visit .days label:hover span { border-color: #0C0C0D; } .visit .days input:checked + span { background: #0C0C0D; border-color: #0C0C0D; color: #F6F5F2; } .visit .days input:focus-visible + span { outline-color: #0C0C0D; } .visit .book .btn { background: #0C0C0D; color: #F6F5F2; border-color: #0C0C0D; } .visit .book .btn:hover { background: #2A2A2B; border-color: #2A2A2B; } .visit .book__note { color: #636365; } .visit .vinfo > div { border-top-color: rgba(5, 5, 5, .14); } @media (max-width: 520px) { .visit .days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .visit .days span { min-width: 0; } } .gen__wincut { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; visibility: hidden; pointer-events: none; will-change: transform; } .rm .gen__wincut, html:not(.js) .gen__wincut { display: none; } /* Abstand unter dem Sticky-Header bei „Funkeln in Bewegung" */ .gal__ui { top: calc(var(--band) + 128px); } @media (max-width: 760px) { .gal__ui { top: calc(var(--band) + 108px); } } .gen__winfull img { will-change: transform; } /* the four parts cut out of the first spin frame: they land exactly where they sit in that frame */ .fcut { position: absolute; inset: 0; } .fcut img { position: absolute; left: 0; top: 0; width: auto; height: auto; max-width: none; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; } .rm .fcut { display: none; } /* Hero-Bild im Kreis erst nach finaler Skalierung zeigen (kein Sprung beim Neuladen) */ .js:not(.rm) .hero__media .ph--hero { opacity: 0; transition: opacity .35s ease; } .js.hero-ready .hero__media .ph--hero { opacity: 1; } .fseq { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; } .fspin .spin__shade { opacity: 0; } .rm .fseq { display: none; } .flbl { text-shadow: 0 1px 14px rgba(5, 5, 5, .9), 0 0 3px rgba(5, 5, 5, .7); } /* readable on the stone */ /* Stacking ohne Schatten (Shop-Reihen und mobiler Vitrinen-Stapel) */ .prow + .prow { box-shadow: none !important; } .vcard { box-shadow: none !important; } .prow::after, .prow .pcard__media::after { opacity: 0 !important; } .prow .pcard__txt { opacity: 1 !important; } .fstudio .flbl { background: rgba(8, 7, 6, .62); padding: .55em .9em .6em; border-radius: 14px; color: #D9D6D0; } /* label plate on the bright stone */ /* Story (Desktop): Kapiteltext als schmaler Block (3-5 Zeilen); story.js schneidet die Illustration links unten davon frei */ @media (min-width: 901px) { .gen__caps { width: 320px; } } /* film scenes 1-4 are painted on one canvas (main.js drawFilm); their DOM plates stay as layout + caption hosts */ .fcv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .fstage.has-cv .fview[data-src] { background: transparent; } .fstage.has-cv .fview[data-src] .plate { background: transparent; } .fstage.has-cv .fview[data-src] .plate > img { opacity: 0; } .rm .fcv, html:not(.js) .fcv { display: none; } /* Overlays ohne backdrop-filter: Chrome ignoriert sonst den Kreis-Clip im Hero und zeigt ein Rechteck hinter dem Motiv */ .pp__scrim, .cart__scrim, .co__scrim { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(5, 5, 5, .6); } html { scrollbar-gutter: stable; } /* Chrome-Bug: mit eigener Compositing-Ebene ignoriert ein Overlay (Warenkorb) den Kreis-Clip und zeigt ein Rechteck */ .hero__media .ph--hero, .hero__video { will-change: auto !important; } /* Chrome: Video-Ebene ignoriert clip-path, sobald ein Overlay öffnet -> Kreis als eigene Ebene */ .hero__media { transform: translateZ(0); } /* Burger: zwei breitere Striche, gegeneinander versetzt; beim Öffnen wieder mittig zum X */ .nav__burger span { width: 21px; } .nav__burger span:first-child { transform: translateX(-3px); } .nav__burger span:last-child { transform: translateX(3px); } .menu-open .nav__burger span:first-child { transform: translateY(3.75px) rotate(45deg); } .menu-open .nav__burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }