/* Brillen Ried – generiert von tools/build.py, nicht direkt editieren. */
:root {
--c-offwhite: #F7F4EF;
--c-sand: #E9E2D6;
--c-grey: #B9B1A5;
--c-ink: #1C1B1A;
--c-ink-2: #2A2826;
--c-honey: #D2A657;
--c-honey-text: #7A5D33;
--c-text: var(--c-ink);
--c-text-soft: #4A453E;
--c-text-soft-2: #46423B;
--c-text-muted: #635C53;
--c-text-mute-2: #665F56;
--c-text-footer: #5A544B;
--c-text-on-dark: #C9C2B7;
--c-line: rgba(28, 27, 26, 0.4);
--c-line-soft: rgba(28, 27, 26, 0.2);
--c-line-pill: rgba(28, 27, 26, 0.35);
--c-line-on-dark: rgba(247, 244, 239, 0.35);
--c-line-on-photo: rgba(247, 244, 239, 0.6);
--c-photo-bg: #DED6C8;
--c-photo-bg-dark: #33302D;
--r-card: 32px;
--r-inner: 24px;
--r-pill: 999px;
--header-h: 72px;
--wrap-max: 1440px;
--gutter: clamp(24px, calc(6.86vw - 2.75px), 96px);
--grid-gap: clamp(24px, calc(1.62vw + 17.7px), 41px);
--ff: "Jost", "Futura", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
--fs-body: 17px;
--lh-body: 1.55;
--giant-size: clamp(128px, calc(15.43vw + 67.8px), 290px);
--giant-size-xl: clamp(140px, calc(15.24vw + 80.6px), 300px);
--cut-d: min(calc(209.52vw - 17px), 3000px);
--cut-rise: min(calc(8.57vw + 16.6px), 140px);
--cut-dip: min(calc(8.57vw + 16.6px), 140px);
--sz-burger: 44px;
--sz-badge-lg: 64px;
--sz-badge: 56px;
--sz-badge-sm: 48px;
--sz-icon-round: 44px;
--cta-lg: clamp(120px, calc(2.86vw + 108.9px), 150px);
--dur: 300ms;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--z-cut: 0;
--z-content: 2;
--z-header: 60;
--z-menu: 80;
}
@media (min-width: 768px) {
:root {
--header-h: 88px;
--fs-body: 18px;
--lh-body: 1.6;
}
}
@media (min-width: 1024px) {
:root {
--lh-body: 1.68;
}
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../assets/fonts/jost-300.woff2") format("woff2");
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/jost-400.woff2") format("woff2");
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../assets/fonts/jost-500.woff2") format("woff2");
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../assets/fonts/jost-600.woff2") format("woff2");
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../assets/fonts/jost-700.woff2") format("woff2");
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
overflow-x: clip;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
overflow-x: clip;
background: var(--c-offwhite);
color: var(--c-text);
font-family: var(--ff);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
table {
border-collapse: collapse;
}
img, svg, video {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--dur) var(--ease);
}
a:hover {
color: var(--c-honey-text);
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
}
h1, h2, h3, h4 {
font-weight: 600;
line-height: 1.2;
}
strong, b {
font-weight: 600;
}
::selection {
background: var(--c-honey);
color: var(--c-ink);
}
:focus-visible {
outline: 2px solid var(--c-honey);
outline-offset: 3px;
border-radius: 2px;
}
:target,
[id] {
scroll-margin-top: calc(var(--header-h) + 16px);
}
.skip-link {
position: absolute;
left: 12px;
top: -100px;
z-index: 200;
padding: 12px 20px;
border-radius: var(--r-pill);
background: var(--c-honey);
color: var(--c-ink);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: top var(--dur) var(--ease);
}
.skip-link:focus {
top: 12px;
color: var(--c-ink);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.section {
--sw: min(100vw, 1440px);
--bleed: max(0px, calc((100vw - 1440px) / 2));
position: relative;
overflow: hidden;
padding-block: var(--section-pt, var(--section-py)) var(--section-pb, var(--section-py));
--section-py: clamp(48px, calc(4.57vw + 30px), 96px);
}
.section--offwhite {
background: var(--c-offwhite);
color: var(--c-ink);
}
.section--sand {
background: var(--c-sand);
color: var(--c-ink);
}
.section--dark {
background: var(--c-ink);
color: var(--c-offwhite);
}
.section--dark p {
color: var(--c-text-on-dark);
}
.wrap {
position: relative;
z-index: var(--z-content);
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.stage {
position: relative;
z-index: 1;
overflow: hidden;
}
.cut-convex-bottom {
margin-bottom: -1px;
}
.cut-convex-bottom::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
z-index: 1;
width: var(--cut-d);
height: var(--cut-d);
border-radius: 50%;
background: var(--cut-color, var(--c-offwhite));
transform: translate(-50%, calc(-1 * var(--cut-rise)));
pointer-events: none;
}
.cut-concave-top {
margin-top: -1px;
}
.cut-concave-top::before {
content: "";
position: absolute;
left: 50%;
top: calc(var(--cut-dip) - var(--cut-d));
z-index: 1;
width: var(--cut-d);
height: var(--cut-d);
border-radius: 50%;
background: var(--cut-color, var(--c-ink));
transform: translateX(-50%);
pointer-events: none;
}
.cut--offwhite { --cut-color: var(--c-offwhite); }
.cut--sand     { --cut-color: var(--c-sand); }
.cut--dark     { --cut-color: var(--c-ink); }
.cut-convex-bottom > .wrap:last-child { padding-bottom: var(--cut-rise); }
.cut-concave-top > .wrap:first-child { padding-top: var(--cut-dip); }
.grid-cards {
display: grid;
grid-template-columns: 1fr;
gap: 36px var(--grid-gap);
}
@media (min-width: 768px) {
.grid-cards {
grid-template-columns: repeat(2, 1fr);
gap: 48px var(--grid-gap);
}
}
@media (min-width: 1024px) {
.grid-cards {
grid-template-columns: repeat(3, 1fr);
}
}
.grid-cards--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
.grid-cards--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid-cards--2 { grid-template-columns: repeat(2, 1fr); }
}
.split {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 1024px) {
.split {
grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
gap: clamp(48px, 8vw, 124px);
align-items: start;
}
}
.stack > * + * { margin-top: 20px; }
.stack--lg > * + * { margin-top: 28px; }
.stack--sm > * + * { margin-top: 12px; }
.giant {
position: relative;
z-index: 0;
font-size: var(--giant-size);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 0.85;
text-transform: uppercase;
white-space: nowrap;
user-select: none;
pointer-events: none;
color: var(--giant-color, var(--c-sand));
}
.giant--xl { font-size: var(--giant-size-xl); }
.giant__l1,
.giant__l2 {
display: block;
}
.giant__l1::before,
.giant__l2::before {
content: attr(data-text);
}
.giant__l1 { margin-left: var(--giant-l1, -12.5vw); }
.giant__l2 { margin-left: var(--giant-l2, 4.17vw); }
.section--sand .giant { --giant-color: var(--c-offwhite); }
.section--offwhite .giant { --giant-color: var(--c-sand); }
.section--dark .giant { --giant-color: var(--c-ink-2); }
.h2-caps {
font-size: clamp(26px, calc(0.571vw + 23.77px), 32px);
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.2;
text-transform: uppercase;
color: currentColor;
}
.h2-caps::before {
content: "";
display: block;
width: 48px;
height: 1px;
margin-bottom: clamp(18px, calc(0.19vw + 17.3px), 20px);
background: var(--c-honey);
}
.h2-caps--sm {
font-size: 22px;
letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
.h2-caps--sm { letter-spacing: 0.12em; }
}
.h2-caps--lead {
font-size: clamp(26px, calc(1.33vw + 20.8px), 40px);
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.15;
text-align: center;
}
.h2-caps--lead::before { content: none; }
.headline-xl {
font-size: clamp(30px, calc(2.1vw + 21.8px), 52px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.12;
text-transform: uppercase;
}
.dot { color: var(--c-honey); }
.kicker {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-honey-text);
}
.lead {
font-size: clamp(17px, calc(0.1vw + 16.6px), 18px);
line-height: 1.72;
color: var(--c-text-soft);
}
.note {
font-size: 13px;
line-height: 1.55;
color: var(--c-text-muted);
}
.cols-2 {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
font-size: 17px;
line-height: 1.55;
color: var(--c-text-soft-2);
}
@media (min-width: 768px) {
.cols-2 {
grid-template-columns: repeat(2, minmax(0, 300px));
gap: clamp(32px, calc(2.381vw + 13.71px), 48px);
font-size: 16px;
line-height: 1.68;
}
}
.section--dark .cols-2 {
font-weight: 300;
color: var(--c-text-on-dark);
}
@media (min-width: 768px) {
.section--dark .cols-2 { line-height: 1.7; }
}
.card {
position: relative;
padding: 42px 22px 22px;
border: 1px solid var(--c-line);
border-radius: var(--r-card);
text-align: center;
}
@media (min-width: 1024px) {
.card { padding: 56px 28px 28px; }
}
.section--dark .card { border-color: var(--c-line-on-dark); }
.card__badge {
position: absolute;
left: 50%;
top: -28px;
width: var(--sz-badge);
height: var(--sz-badge);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
background: var(--c-honey);
color: var(--c-ink);
transform: translateX(-50%);
}
.card__badge--ink {
background: var(--c-ink);
color: var(--c-honey);
}
.card__title {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.09em;
line-height: 1.47;
text-transform: uppercase;
color: currentColor;
}
.card__text {
margin-top: 12px;
font-size: 16px;
line-height: 1.55;
color: var(--c-text-soft);
}
.section--dark .card__text {
font-weight: 300;
color: var(--c-text-on-dark);
}
@media (min-width: 1024px) {
.card__title { font-size: 15px; }
.card__text { font-size: 15px; line-height: 1.6; }
}
.cta-round {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: var(--cta-size, 120px);
height: var(--cta-size, 120px);
border-radius: var(--r-pill);
background: var(--c-honey);
color: var(--c-ink);
text-align: center;
transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cta-round--lg { --cta-size: var(--cta-lg); }
.cta-round span {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.09em;
line-height: 1.55;
text-transform: uppercase;
}
@media (min-width: 1024px) {
.cta-round--lg span { font-size: 13px; }
}
.cta-round:hover,
.cta-round:focus-visible {
color: var(--c-ink);
background: #C39843;
transform: scale(1.03);
}
.badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--sz-badge);
height: var(--sz-badge);
border-radius: var(--r-pill);
}
.badge--lg { width: var(--sz-badge-lg); height: var(--sz-badge-lg); }
.badge--sm { width: var(--sz-badge-sm); height: var(--sz-badge-sm); }
.badge--ink {
background: var(--c-ink);
color: var(--c-honey);
}
.badge--honey {
background: var(--c-honey);
color: var(--c-ink);
}
.badge--outline {
border: 1px solid var(--c-line);
color: var(--c-ink);
}
.badge--outline-light {
border: 1px solid var(--c-line-on-photo);
color: var(--c-offwhite);
}
.badge-row {
display: flex;
align-items: center;
gap: clamp(16px, calc(0.95vw + 12.3px), 26px);
}
.badge-row__label {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-text-mute-2);
}
.badge-row__value {
display: block;
margin-top: 4px;
font-size: clamp(17px, calc(0.38vw + 15.5px), 21px);
font-weight: 500;
letter-spacing: 0.01em;
color: currentColor;
}
.badge-stack {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.badge-stack__label {
margin-top: 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.4;
text-transform: uppercase;
color: var(--c-ink);
}
@media (min-width: 1024px) {
.badge-stack__label {
margin-top: 18px;
font-size: 15px;
letter-spacing: 0.1em;
}
}
.pill {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
padding: 8px 20px;
border: 1px solid var(--c-line-pill);
border-radius: var(--r-pill);
font-size: clamp(15px, calc(0.19vw + 14.3px), 17px);
font-weight: 500;
letter-spacing: 0.24em;
text-indent: 0.24em;
text-align: center;
text-transform: uppercase;
color: var(--c-ink);
}
@media (min-width: 1024px) {
.pill { min-height: 72px; }
}
.pill--sm {
min-height: 52px;
padding: 6px 16px;
border-color: rgba(28, 27, 26, 0.25);
font-size: 14px;
letter-spacing: 0.22em;
text-indent: 0.22em;
color: var(--c-text-soft);
}
.mask {
position: relative;
overflow: hidden;
background: var(--c-photo-bg);
}
.section--dark .mask { background: var(--c-photo-bg-dark); }
.mask > picture,
.mask > img,
.mask > picture > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mask--circle {
aspect-ratio: 1;
border-radius: 50%;
}
.mask--arch {
border-radius: 50% 50% var(--r-inner) var(--r-inner) /
var(--arch-ry, 50%) var(--arch-ry, 50%) var(--r-inner) var(--r-inner);
}
.mask--pill { border-radius: var(--r-pill); }
.mask--half { border-radius: 999px 999px 0 0; }
.mask--framed { box-shadow: 0 0 0 clamp(10px, calc(0.19vw + 9.3px), 12px) var(--c-sand); }
.ring {
position: absolute;
left: 50%;
top: 50%;
width: var(--ring-size, 100%);
height: var(--ring-size, 100%);
border: 1px solid var(--c-honey);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.ring--soft { opacity: 0.8; }
.ring--faint { opacity: 0.5; }
.ringed {
position: relative;
display: grid;
place-items: center;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 16px;
min-height: var(--sz-icon-round);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.01em;
color: currentColor;
}
.link-arrow__icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: var(--sz-icon-round);
height: var(--sz-icon-round);
border-radius: var(--r-pill);
background: var(--c-honey);
color: var(--c-ink);
transition: transform var(--dur) var(--ease);
}
.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon {
transform: translateX(4px);
}
.link-arrow--outline {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
gap: 14px;
}
.link-arrow--outline .link-arrow__icon {
width: 36px;
height: 36px;
border: 1px solid var(--c-line);
background: none;
color: currentColor;
}
.link-arrow--framed {
min-height: 52px;
padding: 0 12px 0 28px;
gap: 18px;
border: 1px solid var(--c-honey);
border-radius: var(--r-pill);
}
.link-arrow--framed .link-arrow__icon {
width: 34px;
height: 34px;
}
.section--dark .link-arrow:hover,
.section--dark .link-arrow:focus-visible { color: var(--c-honey); }
.quote-card {
position: relative;
padding: 44px 24px 24px;
border: 1px solid var(--c-line);
border-radius: var(--r-card);
text-align: center;
}
@media (min-width: 1024px) {
.quote-card { padding: 52px 30px 28px; }
}
.quote-card__badge {
position: absolute;
left: 50%;
top: -28px;
width: var(--sz-badge);
height: var(--sz-badge);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
background: var(--c-ink);
color: var(--c-honey);
font-size: 20px;
font-weight: 600;
letter-spacing: 0.04em;
transform: translateX(-50%);
}
.quote-card__text {
font-size: 15px;
font-weight: 300;
line-height: 1.66;
color: var(--c-text-soft);
}
.quote-card__name {
margin-top: 20px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.47;
text-transform: uppercase;
color: var(--c-ink);
}
.quote-card__place {
margin-top: 4px;
font-size: 13px;
letter-spacing: 0.06em;
line-height: 1.47;
color: var(--c-honey-text);
}
.faq {
border-top: 1px solid var(--c-line-soft);
}
.faq:last-of-type {
border-bottom: 1px solid var(--c-line-soft);
}
.faq > summary {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 22px 0;
list-style: none;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::marker { content: ""; }
.faq__q {
flex: 1 1 auto;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.07em;
line-height: 1.4;
text-transform: uppercase;
color: var(--c-ink);
}
.faq__icon {
position: relative;
flex: 0 0 auto;
width: 32px;
height: 32px;
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
}
.faq__icon::before,
.faq__icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 2px;
border-radius: 2px;
background: var(--c-ink);
transform: translate(-50%, -50%);
}
.faq__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.faq[open] .faq__icon::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg);
}
.faq__body {
padding-bottom: 22px;
}
.faq__body p {
max-width: 520px;
font-size: 15px;
font-weight: 300;
line-height: 1.64;
color: var(--c-text-soft-2);
}
.faq > summary:hover .faq__q { color: var(--c-honey-text); }
.panel {
border-radius: var(--r-card);
background: var(--c-offwhite);
}
.panel--dark {
background: var(--c-ink);
color: var(--c-offwhite);
}
.panel--inner {
border-radius: var(--r-inner);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 52px;
padding: 0 28px;
border-radius: var(--r-pill);
background: var(--c-honey);
color: var(--c-ink);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
transition: background-color var(--dur) var(--ease);
}
.btn:hover,
.btn:focus-visible {
background: #C39843;
color: var(--c-ink);
}
.btn--outline {
background: none;
border: 1px solid var(--c-line);
color: currentColor;
}
.logo-svg {
width: 100%;
height: auto;
overflow: visible;
}
.burger {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
flex: 0 0 auto;
width: var(--sz-burger);
height: var(--sz-burger);
border-radius: var(--r-pill);
background: var(--c-honey);
color: var(--c-ink);
transition: background-color var(--dur) var(--ease);
}
.burger span {
display: block;
width: 18px;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform var(--dur) var(--ease);
}
.burger:hover,
.burger:focus-visible {
background: #C39843;
}
.burger--close { gap: 0; }
.burger--close span:first-child { transform: translateY(1px) rotate(45deg); }
.burger--close span:last-child { transform: translateY(-1px) rotate(-45deg); }
.site-header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: var(--z-header);
height: var(--header-h);
background: rgba(247, 244, 239, 0.92);
border-bottom: 1px solid rgba(28, 27, 26, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transform: translateY(-100%);
transition: transform var(--dur) var(--ease);
}
.site-header.is-visible {
transform: translateY(0);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 100%;
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--header-pad);
--header-pad: clamp(20px, calc(1.9vw + 12.6px), 40px);
}
.site-header__logo {
display: block;
width: clamp(110px, calc(3.81vw + 95.1px), 150px);
color: var(--c-ink);
}
.site-header__logo:hover { color: var(--c-honey-text); }
.menu {
position: fixed;
inset: 0;
z-index: var(--z-menu);
display: flex;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--c-ink);
color: var(--c-offwhite);
animation: menu-in 240ms var(--ease) both;
}
.menu[hidden] { display: none; }
@keyframes menu-in {
from { opacity: 0; }
to { opacity: 1; }
}
.menu__inner {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(32px, 5vw, 64px);
width: 100%;
max-width: var(--wrap-max);
margin-inline: auto;
padding: calc(var(--header-h) + 24px) var(--gutter) clamp(40px, 6vw, 72px);
}
.menu__close {
position: absolute;
top: calc((var(--header-h) - var(--sz-burger)) / 2);
right: clamp(20px, calc(1.9vw + 12.6px), 40px);
}
.menu__list a {
display: inline-block;
padding: 4px 0;
font-size: clamp(28px, calc(1.14vw + 23.5px), 40px);
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.24;
text-transform: uppercase;
color: var(--c-offwhite);
}
.menu__list a:hover,
.menu__list a:focus-visible {
color: var(--c-honey);
}
.menu__contact {
display: flex;
flex-wrap: wrap;
gap: 20px clamp(24px, 3vw, 48px);
padding-top: clamp(24px, 3vw, 40px);
border-top: 1px solid rgba(247, 244, 239, 0.16);
}
.menu__contact a {
display: flex;
align-items: center;
gap: 16px;
color: var(--c-offwhite);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.02em;
}
.menu__contact a:hover,
.menu__contact a:focus-visible { color: var(--c-honey); }
.menu__contact .badge { color: var(--c-offwhite); }
body.is-menu-open {
overflow: hidden;
}
@media (max-height: 640px) {
.menu__inner { justify-content: flex-start; }
.menu__list a { font-size: 22px; }
}
.hero {
isolation: isolate;
--hw: min(100vw, 1440px);
--hero-ring-cy: calc(179px + 0.181 * var(--hw));
--hero-cta-right: calc(0.0895 * var(--hw));
--hero-cta-bottom: calc(26px + 0.1514 * var(--hw));
--hero-inset: calc(0.0571 * var(--hw) - 2px);
--cut-rise: min(calc(13.33vw + 8px), 200px);
position: relative;
overflow: hidden;
height: calc(571px + 0.381 * var(--hw));
background: var(--c-ink);
color: var(--c-offwhite);
}
.hero__photo,
.hero__photo img,
.hero__overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero__photo img {
object-fit: cover;
}
.hero__overlay {
background: rgba(28, 27, 26, 0.5);
z-index: 1;
}
.hero__ring {
position: absolute;
left: 50%;
top: var(--hero-ring-cy);
z-index: 2;
width: var(--ring-d);
height: var(--ring-d);
border: 1px solid rgba(247, 244, 239, var(--ring-o));
border-radius: 50%;
transform: translate(-50%, -50%);
}
.hero__ring--1 { --ring-d: calc(464px + 0.5524 * var(--hw)); --ring-o: 0.15; }
.hero__ring--2 { --ring-d: calc(349px + 0.4381 * var(--hw)); --ring-o: 0.25; }
.hero__ring--3 { --ring-d: calc(219px + 0.3619 * var(--hw)); --ring-o: 0.35; }
.hero__logo {
position: absolute;
left: 50%;
top: var(--hero-ring-cy);
z-index: 3;
width: calc(119px + 0.3619 * var(--hw));
color: var(--c-offwhite);
transform: translate(-50%, -50%);
}
.hero__place {
position: absolute;
left: 24px;
top: 100px;
z-index: 4;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-indent: 0.2em;
line-height: 1;
text-transform: uppercase;
color: var(--c-offwhite);
max-width: calc(100% - 2 * var(--gutter));
}
@media (max-width: 359.98px) {
.hero__place {
letter-spacing: 0.1em;
text-indent: 0.1em;
}
}
.hero__mail {
position: absolute;
left: 24px;
bottom: calc(var(--hero-cta-bottom) + var(--cta-lg) / 2);
z-index: 4;
display: flex;
align-items: center;
gap: 12px;
transform: translateY(50%);
}
.hero__mail-label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1;
color: var(--c-offwhite);
transition: color var(--t-fast, 200ms ease);
}
.hero__mail { color: var(--c-offwhite); text-decoration: none; }
.hero__mail .badge { transition: border-color var(--t-fast, 200ms ease), color var(--t-fast, 200ms ease); }
.hero__mail:hover .badge,
.hero__mail:focus-visible .badge { border-color: var(--c-honey); color: var(--c-honey); }
.hero__mail:hover .hero__mail-label,
.hero__mail:focus-visible .hero__mail-label { color: var(--c-honey); }
.hero__scroll {
position: absolute;
left: 50%;
bottom: calc(15px + 0.1676 * var(--hw));
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--c-line-on-photo);
border-radius: var(--r-pill);
color: var(--c-offwhite);
transform: translateX(-50%);
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__scroll:hover,
.hero__scroll:focus-visible {
color: var(--c-offwhite);
border-color: var(--c-honey);
transform: translateX(-50%) translateY(4px);
}
.hero__cta {
position: absolute;
right: var(--hero-cta-right);
bottom: var(--hero-cta-bottom);
z-index: 4;
}
@media (max-width: 379.98px) {
.hero__mail {
bottom: calc(var(--hero-cta-bottom) + var(--cta-lg) + 16px);
transform: none;
}
}
.hero__burger {
position: absolute;
top: var(--hero-inset);
right: var(--hero-inset);
z-index: 7;
}
.hero.cut-convex-bottom::after { z-index: 6; }
@media (min-width: 768px) {
.hero__mail {
left: auto;
right: calc(var(--hero-cta-right) + var(--cta-lg) + 0.025 * var(--hw));
flex-direction: row-reverse;
gap: 16px;
}
.hero__mail-label { letter-spacing: 0.16em; }
.hero__scroll {
width: 44px;
height: 44px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.hero__mail { transform: translateY(calc(50% - 14px)); }
.hero__mail-label { letter-spacing: 0.1em; }
}
@media (min-width: 1024px) {
.hero__place {
left: calc(0.0556 * var(--hw));
top: auto;
bottom: calc(0.2382 * var(--hw));
font-size: 13px;
letter-spacing: 0.3em;
text-indent: 0.3em;
}
}
@media (min-width: 1024px) {
.hero {
--hero-vh: 100vh;
--hero-h-ratio: calc(571px + 0.381 * var(--hw));
--hero-logo-h: calc((119px + 0.3619 * var(--hw)) * 280 / 526);
--hero-row-top: max(calc(0.2382 * var(--hw) + 13px),
calc(var(--hero-cta-bottom) + var(--cta-lg) / 2 + var(--sz-badge-sm) / 2));
--hero-min-h: calc(56px + var(--hero-logo-h) + 32px + var(--hero-row-top));
--hero-h: min(var(--hero-h-ratio), max(var(--hero-min-h), var(--hero-vh)));
--hero-ring-cy: clamp(
calc(56px + var(--hero-logo-h) / 2),
calc(179px + 0.181 * var(--hw) - 0.6 * (var(--hero-h-ratio) - var(--hero-h))),
calc(var(--hero-h) - var(--hero-row-top) - 32px - var(--hero-logo-h) / 2)
);
height: var(--hero-h);
}
@supports (height: 100svh) {
.hero { --hero-vh: 100svh; }
}
}
.intro {
--section-pt: 44px;
--section-pb: 48px;
overflow: visible;
text-align: center;
}
.intro__title {
margin-top: calc(-1 * clamp(20px, calc(7.62vw - 9.7px), 100px));
font-size: clamp(30px, calc(2.48vw + 20.3px), 56px);
font-weight: 700;
letter-spacing: 0.005em;
line-height: 1.12;
text-transform: uppercase;
color: var(--c-ink);
}
.intro__text {
max-width: 620px;
margin-top: clamp(24px, calc(1.67vw + 17.5px), 42px);
margin-inline: auto;
font-size: clamp(17px, calc(0.1vw + 16.6px), 18px);
line-height: 1.55;
color: var(--c-text-soft);
}
.intro__badges {
display: flex;
justify-content: space-between;
gap: 12px;
max-width: 800px;
margin-top: clamp(44px, calc(4.86vw + 25.1px), 95px);
margin-inline: auto;
}
.intro__badges > li {
flex: 1 1 0;
max-width: 220px;
}
.intro__badges .badge-stack__label { hyphens: none; }
@media (max-width: 389.98px) {
.intro__badges .badge-stack__label { hyphens: manual; }
}
@media (min-width: 1024px) {
.intro {
--section-pt: 40px;
--section-pb: 96px;
}
.intro__title { line-height: 1.08; }
.intro__text { line-height: 1.72; }
}
.intro__br { display: none; }
@media (min-width: 768px) { .intro__br { display: inline; } }
.section-brillen {
--sw: min(100vw, 1440px);
--bleed: max(0px, calc((100vw - 1440px) / 2));
--section-pt: 0;
--section-pb: 0;
}
.section-brillen > .wrap:last-child {
padding-bottom: clamp(110px, calc(6.667vw + 84px), 180px);
}
@media (min-width: 768px) {
.section-brillen .cols-2 { gap: clamp(32px, calc(1.905vw + 17.05px), 44px); }
}
.brillen__stage {
padding-top: 18px;
height: calc(27.59vw + 326.5px);
}
.section-brillen .giant {
--giant-l1: calc(-0.1538 * var(--sw));
--giant-l2: calc(0.4308 * var(--sw));
}
.brillen__shot {
position: absolute;
z-index: 2;
}
.brillen__shot--circle {
left: calc(2.12vw + 11.7px);
top: calc(18.04vw + 101.6px);
width: calc(21.22vw + 117.2px);
}
.brillen__shot--pill {
z-index: 3;
right: -5.13vw;
top: calc(9.55vw + 226.8px);
width: clamp(320px, calc(33.95vw + 187.6px), 460px);
aspect-ratio: 320 / 170;
}
@media (min-width: 768px) {
.brillen__stage {
padding-top: calc(0.01389 * var(--sw));
height: calc(1.7 * var(--giant-size-xl) + 0.01389 * var(--sw));
}
.section-brillen .giant {
--giant-l1: calc(-0.125 * var(--sw) + var(--bleed));
--giant-l2: calc(0.04167 * var(--sw) + var(--bleed));
}
.brillen__shot--circle {
left: calc(0.3611 * var(--sw) + var(--bleed));
top: calc(0.02778 * var(--sw));
width: calc(0.2778 * var(--sw));
}
.brillen__shot--pill {
left: calc(0.5903 * var(--sw) + var(--bleed));
right: auto;
top: calc(0.1875 * var(--sw));
width: calc(0.3056 * var(--sw));
height: calc(0.1597 * var(--sw));
aspect-ratio: auto;
}
}
.brillen__head {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: clamp(15px, calc(-2.952vw + 57.5px), 46px);
}
@media (min-width: 1024px) {
.brillen__head {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
}
.brillen__head .h2-caps { margin-top: 15px; }
}
.brillen__cards {
margin-top: clamp(48px, calc(5.714vw + 25.7px), 108px);
row-gap: clamp(36px, calc(4.95vw + 16.7px), 88px);
}
.brillen__outro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 48px;
}
.brillen__portrait {
--arch-ry: 45.45%;
width: 200px;
aspect-ratio: 200 / 220;
}
.brillen__claim {
margin-top: 34px;
font-size: clamp(27px, calc(1.24vw + 22.2px), 40px);
font-weight: 700;
letter-spacing: -0.005em;
line-height: 1.15;
text-transform: uppercase;
color: var(--c-ink);
}
.brillen__note {
margin-top: 20px;
font-size: 17px;
line-height: 1.55;
color: var(--c-text-soft-2);
}
.brillen__note + .brillen__note { margin-top: 14px; }
.brillen__claim--sub {
margin-top: clamp(36px, calc(0.762vw + 33px), 44px);
font-size: clamp(21px, calc(0.667vw + 18.4px), 28px);
}
.brillen__cta { margin-top: 32px; }
@media (min-width: 1024px) {
.brillen__outro {
display: grid;
grid-template-columns: auto calc(0.3472 * var(--sw)) 1fr;
grid-template-rows: auto auto;
align-items: start;
text-align: left;
margin-top: calc(0.0465 * var(--sw));
}
.brillen__portrait {
--arch-ry: 46.15%;
--r-inner: 28px;
grid-column: 1;
grid-row: 1 / span 2;
width: calc(0.1667 * var(--sw));
margin-left: calc(0.0375 * var(--sw));
aspect-ratio: 240 / 260;
}
.brillen__outro-text {
grid-column: 2;
grid-row: 1;
margin-top: calc(0.0111 * var(--sw));
margin-left: calc(0.04167 * var(--sw));
}
.brillen__outro-text--sub {
grid-row: 2;
margin-top: calc(0.0306 * var(--sw));
}
.brillen__claim:first-child {
margin-top: 0;
}
.brillen__claim {
letter-spacing: -0.01em;
line-height: 1.1;
}
.brillen__note {
font-size: 16px;
line-height: 1.68;
}
.brillen__cta {
grid-column: 3;
grid-row: 2;
justify-self: end;
margin-top: calc(0.0306 * var(--sw) - 29px);
margin-right: calc(0.0833 * var(--sw));
}
}
.section-marken {
--sw: min(100vw, 1440px);
--bleed: max(0px, calc((100vw - 1440px) / 2));
--section-pt: 0;
--section-pb: 0;
--cut-rise: min(calc(5.714vw + 27.71px), 110px);
}
.section-marken {
overflow: clip visible;
clip-path: inset(-200px 0 0 0);
}
.marken__stage { overflow: visible; }
.section-marken > .wrap:last-child {
padding-bottom: clamp(116px, calc(6.286vw + 91.5px), 182px);
}
.marken__stage {
padding-top: 22px;
height: calc(1.7 * var(--giant-size) + 26px);
}
.section-marken .giant {
--giant-l1: calc(-0.1949 * var(--sw));
--giant-l2: calc(0.3385 * var(--sw));
}
.marken__shot {
position: absolute;
z-index: 2;
right: -3.85vw;
top: calc(1.06vw + 7.9px);
width: calc(17.77vw + 120.7px);
aspect-ratio: 1;
}
.marken__photo { width: 84.21%; }
@media (min-width: 768px) {
.marken__stage {
padding-top: 0;
height: calc(1.7 * var(--giant-size));
}
.section-marken .giant {
--giant-l1: calc(-0.1319 * var(--sw) + var(--bleed));
--giant-l2: calc(0.5417 * var(--sw) + var(--bleed));
margin-top: 0;
}
.section-marken .giant__l2 { position: relative; top: calc(-0.0224 * var(--giant-size)); }
.marken__shot {
left: calc(0.7639 * var(--sw) + var(--bleed));
right: auto;
top: calc(0.025 * var(--sw));
width: calc(0.2083 * var(--sw));
}
.marken__photo { width: 86.67%; }
}
.marken__head {
display: flex;
flex-direction: column;
margin-top: clamp(26px, calc(1.048vw + 21.9px), 37px);
}
.marken__title { margin-bottom: 26px; }
.marken__link { margin-top: clamp(26px, calc(1.238vw + 21.2px), 39px); }
@media (min-width: 1024px) {
.marken__head {
flex-direction: row;
align-items: flex-start;
gap: calc(0.0583 * var(--sw));
}
.marken__title {
flex: 0 0 auto;
width: calc(0.3056 * var(--sw));
margin-bottom: 0;
}
.marken__body { margin-top: 10px; }
}
.marken__glass {
max-width: 620px;
margin-top: clamp(40px, calc(1.524vw + 34px), 56px);
padding-top: clamp(24px, calc(0.762vw + 21px), 32px);
border-top: 1px solid var(--c-line-soft);
}
.marken__glass-title {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.09em;
line-height: 1.47;
text-transform: uppercase;
color: var(--c-ink);
}
.marken__glass-text {
margin-top: 12px;
font-size: 17px;
line-height: 1.55;
color: var(--c-text-soft-2);
}
@media (min-width: 768px) {
.marken__glass-text {
font-size: 16px;
line-height: 1.68;
}
}
@media (min-width: 1024px) {
.marken__glass {
margin-left: calc(0.3639 * var(--sw));
}
.marken__glass-title { font-size: 15px; }
}
.section-kontaktlinsen {
--sw: min(100vw, 1440px);
--bleed: max(0px, calc((100vw - 1440px) / 2));
--section-pt: 0;
--section-pb: clamp(48px, calc(0.381vw + 46.5px), 52px);
}
.kontaktlinsen__stage {
padding-top: 22px;
height: calc(35.01vw + 245.5px);
}
.section-kontaktlinsen .giant {
--giant-l1: calc(-0.359 * var(--sw));
--giant-l2: calc(0.2564 * var(--sw));
}
.kontaktlinsen__shot {
position: absolute;
z-index: 2;
right: -2.56vw;
top: calc(14.59vw + 101.1px);
width: calc(20.42vw + 140.4px);
aspect-ratio: 1;
}
.kontaktlinsen__photo { width: 90.91%; }
@media (min-width: 768px) {
.kontaktlinsen__stage {
padding-top: 0;
height: calc(1.7 * var(--giant-size) - 0.02083 * var(--sw));
}
.section-kontaktlinsen .giant {
--giant-l1: calc(-0.1389 * var(--sw) + var(--bleed));
--giant-l2: calc(0.5278 * var(--sw) + var(--bleed));
margin-top: calc(-0.02083 * var(--sw));
}
.section-kontaktlinsen .giant__l2 { position: relative; top: calc(-0.0224 * var(--giant-size)); }
.kontaktlinsen__shot {
left: calc(0.7222 * var(--sw) + var(--bleed));
right: auto;
top: calc(0.01389 * var(--sw));
width: calc(0.2361 * var(--sw));
}
.kontaktlinsen__photo { width: 88.24%; }
}
.kontaktlinsen__head {
display: flex;
flex-direction: column;
margin-top: clamp(7px, calc(-3.143vw + 52.3px), 40px);
}
.kontaktlinsen__title { margin-bottom: 26px; }
@media (min-width: 1024px) {
.kontaktlinsen__head {
flex-direction: row;
align-items: flex-start;
gap: calc(0.0583 * var(--sw));
}
.kontaktlinsen__title {
flex: 0 0 auto;
width: calc(0.3056 * var(--sw));
margin-bottom: 0;
}
.kontaktlinsen__head .cols-2 { margin-top: 30px; }
}
.kontaktlinsen__cards {
margin-top: clamp(48px, calc(3.048vw + 36.1px), 80px);
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.kontaktlinsen__cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kontaktlinsen__cards > .card:last-child:nth-child(odd) .card__text {
max-width: 30em;
margin-inline: auto;
}
}
.kontaktlinsen__cta {
display: flex;
justify-content: space-between;
width: 100%;
min-height: 56px;
padding: 0 10px 0 24px;
margin-top: clamp(36px, calc(2.286vw + 27.1px), 60px);
}
.kontaktlinsen__cta .link-arrow__icon {
width: 36px;
height: 36px;
}
@media (min-width: 768px) {
.kontaktlinsen__cta {
display: inline-flex;
justify-content: flex-start;
width: auto;
min-height: 52px;
padding: 0 12px 0 28px;
}
.kontaktlinsen__cta .link-arrow__icon {
width: 34px;
height: 34px;
}
}
.section-service {
--sw: min(100vw, 1440px);
--bleed: max(0px, calc((100vw - 1440px) / 2));
--section-pt: var(--cut-dip);
--section-pb: clamp(48px, calc(0.952vw + 44.3px), 58px);
}
.service__stage {
padding-top: clamp(26px, calc(0.381vw + 24.5px), 30px);
height: calc(37.14vw + 255.2px);
}
.section-service .giant {
--giant-l1: calc(-0.1795 * var(--sw));
--giant-l2: calc(0.2462 * var(--sw));
}
.service__portrait {
--arch-ry: 45.45%;
position: absolute;
z-index: 2;
left: calc(2.39vw + 14.7px);
top: calc(16.71vw + 114.8px);
width: calc(18.57vw + 127.6px);
aspect-ratio: 200 / 220;
}
@media (min-width: 768px) {
.service__stage {
height: calc(1.7 * var(--giant-size) + 0.02083 * var(--sw));
}
.section-service .giant {
--giant-l1: calc(-0.0833 * var(--sw) + var(--bleed));
--giant-l2: calc(0.4306 * var(--sw) + var(--bleed));
}
.service__portrait {
--arch-ry: 40%;
left: calc(0.6944 * var(--sw) + var(--bleed));
top: calc(0.00694 * var(--sw));
width: calc(0.2222 * var(--sw));
aspect-ratio: 320 / 400;
}
}
.service__head {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"title"
"cols";
margin-top: clamp(27px, calc(-1.238vw + 44.8px), 40px);
}
.service__title { grid-area: title; }
.service__cols { grid-area: cols; margin-top: 26px; }
@media (min-width: 1024px) {
.service__head {
grid-template-columns: calc(0.2778 * var(--sw)) minmax(0, 1fr);
grid-template-areas: "title cols";
align-items: start;
column-gap: calc(0.0444 * var(--sw));
}
.service__cols { margin-top: 10px; }
}
.service__cards {
margin-top: clamp(48px, calc(0.762vw + 45.03px), 56px);
row-gap: clamp(36px, calc(4.19vw + 19.6px), 80px);
}
.service__marke {
display: block;
width: 40px;
color: currentColor;
}
.section-team {
--giant-top: calc(-1.333vw + 39.2px);
--section-pt: calc(var(--giant-top) + 1.7 * var(--giant-size) + 18px);
--section-pb: 48px;
}
.section-team .giant {
--giant-l1: -11.79vw;
--giant-l2: 43.08vw;
}
.team__giant {
position: absolute;
left: 0;
top: var(--giant-top);
width: 100%;
}
.team__intro {
max-width: 620px;
}
.team__text {
margin-top: 26px;
font-size: 17px;
line-height: 1.55;
color: var(--c-text-soft);
}
.team__text + .team__text {
margin-top: 18px;
}
.team__people {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 4.093%;
align-items: start;
margin-top: 48px;
}
.team__photo {
--r-inner: 20px;
aspect-ratio: 164 / 210;
--arch-ry: 39.05%;
width: 100%;
}
.team__name {
margin-top: 16px;
font-size: clamp(18px, calc(0.19vw + 17.26px), 20px);
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.47;
color: var(--c-ink);
}
.team__role {
margin-top: 5px;
font-size: clamp(11px, calc(0.286vw + 9.89px), 14px);
font-weight: 500;
letter-spacing: 0.09em;
line-height: 1.4;
text-transform: uppercase;
color: var(--c-honey-text);
}
.team__role-word {
display: inline-block;
}
.team__bio {
margin-top: 10px;
font-size: 15px;
line-height: 1.5;
color: var(--c-text-soft);
}
@media (min-width: 768px) {
.team__people {
column-gap: clamp(14px, calc(2.08vw - 2px), 30px);
margin-top: 56px;
}
}
@media (min-width: 1024px) {
.section-team {
--section-pt: calc(var(--giant-top) + 1.1034 * var(--giant-size));
--section-pb: 48px;
}
.section-team .giant {
--giant-l1: calc(-0.0417 * var(--sw) + var(--bleed));
--giant-l2: calc(0.625 * var(--sw) + var(--bleed));
}
.section-team .giant__l2 {
margin-top: calc(-0.0914 * var(--giant-size));
}
.team__wrap {
display: grid;
grid-template-columns: 30.449% minmax(0, 1fr);
column-gap: 3.5256%;
align-items: start;
}
.team__intro {
max-width: none;
padding-top: 120px;
}
.team__text {
font-size: 16px;
line-height: 1.72;
margin-top: 28px;
}
.team__text + .team__text {
margin-top: 20px;
}
.team__people {
column-gap: 7.767%;
margin-top: 0;
}
.team__photo {
--r-inner: 24px;
aspect-ratio: 380 / 340;
--arch-ry: 55.88%;
}
.team__name { margin-top: 22px; }
.team__role { margin-top: 6px; }
.team__bio {
margin-top: 12px;
line-height: 1.62;
}
}
.section-galerie {
--section-pt: clamp(48px, calc(1.143vw + 43.54px), 60px);
--section-pb: clamp(30px, calc(-1.714vw + 54.69px), 48px);
}
.galerie__head {
position: relative;
min-height: 232px;
}
.galerie__title {
font-size: clamp(26px, calc(2.476vw + 16.34px), 52px);
line-height: 1.16;
color: var(--c-ink);
}
.galerie__cta {
position: absolute;
right: 6px;
top: 86px;
}
.galerie__text {
margin-top: 10px;
font-size: 17px;
line-height: 1.55;
color: var(--c-text-soft-2);
}
.galerie__text p + p { margin-top: 12px; }
.galerie__ph {
width: 100%;
}
.galerie__ph--wide {
margin-top: 46px;
aspect-ratio: 342 / 170;
}
.galerie__mosaic {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 4.093%;
align-items: start;
margin-top: 32px;
}
.galerie__col--b {
margin-top: 36px;
}
.galerie__ph--arch {
--r-inner: 20px;
--arch-ry: 39.05%;
aspect-ratio: 164 / 210;
}
@media (min-width: 768px) {
.galerie__title { max-width: 520px; }
.galerie__text { max-width: 480px; }
.galerie__mosaic {
column-gap: clamp(14px, calc(2.08vw - 2px), 30px);
}
}
@media (min-width: 1024px) {
.galerie__stage {
--stage-w: min(1248px, calc(86.28vw + 5.5px));
position: relative;
height: max(860px, calc(0.75721 * var(--stage-w)));
}
.galerie__head,
.galerie__mosaic,
.galerie__col {
display: contents;
}
.galerie__stage > *,
.galerie__head > *,
.galerie__col > * {
position: absolute;
margin: 0;
}
.galerie__title {
left: 0;
top: 46.561%;
width: 41.667%;
font-size: min(calc(3.595vw + 0.23px), 52px);
line-height: 1.12;
}
.galerie__cta {
left: 45.513%;
top: 47.619%;
right: auto;
}
.galerie__text {
left: 0;
top: 70.265%;
width: 38.462%;
font-size: 16px;
line-height: 1.7;
}
.galerie__ph--wide {
left: 0;
top: 2.116%;
width: 51.282%;
aspect-ratio: 640 / 300;
}
.galerie__ph--arch {
--r-inner: 24px;
--arch-ry: 38.095%;
left: 70.833%;
top: 0;
width: 25.641%;
aspect-ratio: 320 / 420;
}
.galerie__ph--arch-b {
left: 58.013%;
top: 55.026%;
}
}
.section-faq {
--giant-top: max(0px, calc(-5.714vw + 52.3px));
--section-pt: calc(var(--giant-top) + 1.7 * var(--giant-size) + 24px);
--section-pb: clamp(70px, calc(2.48vw + 60.3px), 96px);
}
.section-faq .giant {
--giant-l1: 0;
--giant-l2: calc(0.295 * var(--sw));
}
.faq__giant {
position: absolute;
left: 0;
top: var(--giant-top);
width: 100%;
}
.faq__cols {
margin-top: clamp(34px, calc(2.533vw + 24.12px), 60.6px);
}
.faq__col {
display: contents;
}
.faq__col:first-child .faq:last-of-type {
border-bottom: 0;
}
.section-faq .faq > summary {
gap: 16px;
padding: 14px 0;
}
.section-faq .faq__body {
margin-top: -2px;
padding-bottom: 14px;
}
.section-faq .faq__body p {
max-width: none;
font-size: 16px;
line-height: 1.55;
}
.section-faq .faq__body p + p {
margin-top: 10px;
}
.section-faq .faq__body a {
font-weight: 500;
color: var(--c-honey-text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.section-faq .faq__body a:hover,
.section-faq .faq__body a:focus-visible {
color: var(--c-ink);
}
.faq__note {
margin-top: clamp(34px, calc(2.095vw + 25.83px), 56px);
font-size: 16px;
line-height: 1.55;
color: var(--c-text-soft-2);
}
.faq__mail {
font-weight: 600;
color: var(--c-honey-text);
}
@media (min-width: 768px) {
.faq__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(24px, calc(3.571vw - 3.43px), 48px);
align-items: start;
}
.faq__col {
display: block;
}
.faq__col:first-child .faq:last-of-type {
border-bottom: 1px solid var(--c-line-soft);
}
}
@media (min-width: 1024px) {
.section-faq {
--section-pt: calc(var(--giant-top) + 1.7 * var(--giant-size) + 7px);
}
.section-faq .giant {
--giant-l1: calc(0.0951 * var(--sw) + var(--bleed));
--giant-l2: calc(0.4715 * var(--sw) + var(--bleed));
}
.section-faq .giant__l2 {
margin-top: calc(-0.0569 * var(--giant-size));
}
.section-faq .faq > summary {
gap: 24px;
padding: 24px 0;
}
.section-faq .faq__body {
margin-top: -12px;
padding-bottom: 24px;
}
.section-faq .faq__body p {
max-width: 520px;
font-size: 15px;
line-height: 1.64;
}
.faq__note {
line-height: 1.5;
}
}
.section-standort {
--section-pt: calc(var(--cut-dip) + 30px);
--section-pb: clamp(24px, calc(1.524vw + 18.06px), 40px);
--disc: min(330px, 100vw - 2 * var(--gutter));
--ring-size: calc(var(--disc) + 30px);
--ring-pad: calc((var(--ring-size) - var(--disc)) / 2);
}
.section-standort .giant {
--giant-l1: 0;
--giant-l2: calc(0.123 * var(--sw));
}
.standort__body {
margin-top: clamp(18px, calc(26.2px - 0.57vw), 24px);
}
.standort__text p {
margin-top: clamp(26px, calc(0.19vw + 25.26px), 28px);
font-size: 17px;
line-height: 1.55;
color: var(--c-text-soft-2);
}
.standort__text p + p {
margin-top: clamp(18px, calc(0.19vw + 17.26px), 20px);
}
.standort__cta {
margin-top: clamp(26px, calc(0.76vw + 23.03px), 34px);
gap: clamp(14px, calc(0.19vw + 13.3px), 16px);
}
.standort__map {
margin-top: calc(40px + var(--ring-pad));
margin-inline: calc(var(--gutter) * -1);
}
.standort__disc {
width: var(--disc);
height: var(--disc);
border-radius: 50%;
background: var(--c-ink);
overflow: hidden;
}
.standort__disc .rmap {
width: 100%;
height: auto;
}
.rmap__labels {
font-family: var(--ff);
font-size: 13px;
letter-spacing: 0.7px;
}
.rmap__pin {
font-family: var(--ff);
font-size: 15px;
letter-spacing: 1.9px;
}
@media (min-width: 1024px) {
.section-standort .giant {
--giant-l1: calc(0.0361 * var(--sw) + var(--bleed));
--giant-l2: calc(0.425 * var(--sw) + var(--bleed));
}
.standort__body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "text map";
align-items: start;
column-gap: clamp(40px, calc(11.5vw - 77.8px), 88px);
}
.standort__text { grid-area: text; max-width: 480px; }
.standort__map { grid-area: map; }
.standort__text p {
font-size: 16px;
line-height: 1.72;
}
.section-standort {
--disc: clamp(330px, calc(16.67vw + 159.7px), 400px);
--ring-size: calc(var(--disc) + 60px);
}
.standort__map {
margin-top: var(--ring-pad);
margin-inline: 0;
justify-self: end;
}
.rmap__labels {
font-size: clamp(11px, calc(17.92px - 0.481vw), 13px);
letter-spacing: clamp(0.6px, calc(0.946px - 0.024vw), 0.7px);
}
.rmap__pin {
font-size: clamp(13px, calc(19.92px - 0.481vw), 15px);
letter-spacing: clamp(1.6px, calc(2.638px - 0.0721vw), 1.9px);
}
}
.section-kontakt {
--section-pt: 0;
--section-pb: clamp(48px, calc(0.38vw + 46.5px), 52px);
}
.section-kontakt .giant {
--giant-l1: -35.90vw;
--giant-l2: 23.59vw;
margin-top: clamp(0px, calc(52.3px - 5.71vw), 30px);
}
.kontakt__body {
margin-top: clamp(-33px, calc(47.92px - 5.62vw), 26px);
}
.kontakt__lead {
margin-top: clamp(26px, calc(0.19vw + 25.26px), 28px);
font-size: 17px;
font-weight: 300;
line-height: 1.55;
color: var(--c-text-soft);
}
.kontakt__lead + .kontakt__lead { margin-top: 14px; }
.kontakt__ways {
display: grid;
gap: clamp(26px, calc(1.33vw + 20.8px), 40px);
margin-top: clamp(40px, calc(5.24vw + 19.57px), 95px);
}
.kontakt__ways .badge-row__label {
font-size: clamp(12px, calc(0.095vw + 11.6px), 13px);
}
.kontakt__ways .badge-row__value {
font-size: clamp(19px, calc(0.19vw + 18.3px), 21px);
}
.kontakt__ways .badge-row--wide .badge-row__value {
font-size: clamp(17px, calc(0.38vw + 15.5px), 21px);
line-height: 1.35;
}
.kontakt__ways a.badge-row:hover,
.kontakt__ways a.badge-row:focus-visible {
color: var(--c-honey-text);
}
.kontakt__card {
margin-top: 44px;
margin-inline: calc(var(--gutter) * -1);
padding:
clamp(32px, calc(1.14vw + 27.5px), 44px)
clamp(24px, calc(1.71vw + 17.3px), 42px)
calc(clamp(24px, calc(1.71vw + 17.3px), 42px) - 12px);
border-radius: var(--r-card);
background: var(--c-ink);
color: var(--c-offwhite);
}
.kontakt__card-title {
font-size: clamp(20px, calc(0.19vw + 19.3px), 22px);
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.47;
text-transform: uppercase;
color: var(--c-offwhite);
}
.hours {
width: 100%;
margin-top: clamp(20px, calc(22.74px - 0.19vw), 22px);
font-size: clamp(15px, calc(0.095vw + 14.6px), 16px);
font-weight: 300;
line-height: 1.47;
}
.hours th,
.hours td {
padding-block: clamp(6px, calc(7.37px - 0.095vw), 7px);
border-bottom: 1px solid rgba(247, 244, 239, 0.14);
font-weight: inherit;
}
.hours th {
padding-right: 16px;
text-align: left;
vertical-align: top;
white-space: nowrap;
color: var(--c-text-on-dark);
}
.hours td {
text-align: right;
vertical-align: top;
overflow-wrap: break-word;
color: var(--c-offwhite);
}
.hours tr:last-child th,
.hours tr:last-child td {
border-bottom: 0;
}
.hours__closed {
color: #8A857C;
}
.kontakt__map {
margin-top: clamp(16px, calc(35.2px - 1.333vw), 30px);
margin-inline: -12px;
border-radius: var(--r-inner);
background: var(--c-offwhite);
color: var(--c-ink);
overflow: hidden;
}
.omap {
width: 520px;
max-width: 100%;
height: auto;
margin-inline: auto;
font-family: var(--ff);
font-size: 14px;
}
.omap__streets,
.omap__pin-sub { font-size: 1em; letter-spacing: 0.05em; }
.omap__pin { font-size: 1.0909em; letter-spacing: 0.05em; }
.omap__meta { font-size: 0.909em; letter-spacing: 0.05em; }
.kontakt__address {
padding:
clamp(10px, calc(18.2px - 0.571vw), 16px)
clamp(20px, calc(0.76vw + 17.03px), 28px)
20px;
font-size: 15px;
font-style: normal;
line-height: 1.5;
color: var(--c-ink);
}
.kontakt__address-name {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
@media (min-width: 768px) {
.kontakt__card {
margin-inline: 0;
padding-bottom: clamp(24px, calc(1.71vw + 17.3px), 42px);
}
.kontakt__map { margin-inline: 0; }
.omap { font-size: 11px; }
}
@media (min-width: 1024px) {
.section-kontakt .giant {
--giant-l1: calc(0.0354 * var(--sw) + var(--bleed));
--giant-l2: calc(0.1743 * var(--sw) + var(--bleed));
}
.section-kontakt .giant__l2 { position: relative; top: calc(-0.0569 * var(--giant-size)); }
.kontakt__body {
display: grid;
grid-template-columns: minmax(0, 40.06fr) minmax(0, 48.4fr);
column-gap: 11.54%;
align-items: start;
}
.kontakt__lead { line-height: 1.72; }
.kontakt__ways { width: 112%; }
.kontakt__card { margin-top: 0; }
.omap { font-size: clamp(11px, calc(27.86px - 1.171vw), 15.9px); }
}
.page .site-header {
transform: none;
}
.page-main {
padding-top: calc(var(--header-h) + clamp(36px, calc(2.67vw + 25.6px), 64px));
padding-bottom: clamp(56px, calc(4.57vw + 38px), 104px);
background: var(--c-offwhite);
color: var(--c-ink);
}
.page-doc {
max-width: 720px;
margin-inline: auto;
}
.page-title {
font-size: clamp(30px, calc(1.33vw + 24.8px), 44px);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.15;
text-transform: uppercase;
color: var(--c-ink);
}
.page-title::before {
content: "";
display: block;
width: 48px;
height: 1px;
margin-bottom: clamp(18px, calc(0.19vw + 17.3px), 20px);
background: var(--c-honey);
}
.page-doc h2 {
margin-top: clamp(36px, calc(1.14vw + 31.6px), 48px);
font-size: clamp(17px, calc(0.29vw + 15.9px), 20px);
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.3;
text-transform: uppercase;
color: var(--c-ink);
}
.page-doc p {
margin-top: 14px;
font-size: clamp(17px, calc(0.1vw + 16.6px), 18px);
line-height: 1.7;
color: var(--c-text-soft);
}
.page-doc h2 + p {
margin-top: 16px;
}
.page-doc ul {
margin-top: 14px;
font-size: clamp(17px, calc(0.1vw + 16.6px), 18px);
line-height: 1.7;
color: var(--c-text-soft);
}
.page-doc li {
position: relative;
padding-left: 22px;
}
.page-doc li + li {
margin-top: 6px;
}
.page-doc li::before {
content: "";
position: absolute;
left: 2px;
top: 0.7em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-honey);
}
.page-doc a {
color: var(--c-honey-text);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.page-doc a:hover,
.page-doc a:focus-visible {
color: var(--c-ink);
}
.placeholder {
margin-top: clamp(28px, calc(1.14vw + 23.6px), 40px);
padding: clamp(20px, calc(0.38vw + 18.5px), 24px) clamp(20px, calc(0.76vw + 17px), 28px);
border: 1px solid var(--c-honey);
border-radius: var(--r-inner);
background: rgba(210, 166, 87, 0.14);
}
.placeholder .placeholder__title {
margin-top: 0;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.4;
text-transform: uppercase;
color: var(--c-honey-text);
}
.placeholder p + p {
margin-top: 10px;
font-size: 16px;
line-height: 1.6;
color: var(--c-text-soft-2);
}
.ph {
display: inline;
padding: 1px 6px;
border-radius: 4px;
background: rgba(210, 166, 87, 0.3);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-size: 0.94em;
font-weight: 500;
color: var(--c-ink);
}
.page-doc .page-back {
margin-top: clamp(40px, calc(1.52vw + 34.1px), 56px);
padding-top: clamp(28px, calc(1.14vw + 23.6px), 40px);
border-top: 1px solid var(--c-line-soft);
}
.page-back a,
.page-404__actions a {
color: var(--c-ink);
text-decoration: none;
}
.page-back a:hover,
.page-back a:focus-visible,
.page-404__actions a:hover,
.page-404__actions a:focus-visible {
color: var(--c-ink);
}
.page-doc--center {
text-align: center;
}
.page-404 {
max-width: 620px;
padding-block: clamp(24px, 4vw, 72px);
}
.page-404 .page-404__code {
margin-top: 0;
font-size: clamp(96px, calc(9.14vw + 60.4px), 192px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 0.85;
color: var(--c-sand);
}
.page-404 .page-title {
margin-top: clamp(20px, calc(1.14vw + 15.6px), 32px);
}
.page-404 .page-title::before {
margin-inline: auto;
}
.page-404 .page-404__text {
margin-top: clamp(20px, calc(0.76vw + 17px), 28px);
}
.page-404 .page-404__actions {
display: flex;
justify-content: center;
margin-top: clamp(32px, calc(1.14vw + 27.6px), 44px);
}
.page-404 .page-404__mail {
margin-top: clamp(20px, calc(0.38vw + 18.5px), 24px);
font-size: 15px;
color: var(--c-text-muted);
}
.bild--brille-buch-kaffee { object-position: 51% 53%; }
.bild--brille-buch-kaffee-kreis { object-position: 51% 53%; }
.bild--brille-buch-kaffee-kreis--quadrat { object-position: 51% 35.6%; }
.bild--hero-auslage { object-position: 74% 52%; }
.bild--hero-auslage--hoch { object-position: 51.2% 52%; }
@media (max-width: 767.98px) { .bild--hero-auslage { object-position: 51.2% 52%; } }
.bild--jaime-brille { object-position: 80% 38%; }
.bild--kontaktlinse { object-position: 50% 47%; }
.bild--marian-brille { object-position: 78% 36%; }
.bild--marian-brille-bogen { object-position: 78% 36%; }
.bild--marian-brille-bogen--hoch { object-position: 60% 44.4%; }
.bild--messbrille { object-position: 47% 42%; }
.bild--reparatur { object-position: 48% 38%; }
.bild--sonnenbrillen { object-position: 50% 40%; }
.bild--team-jaime { object-position: 60% 10%; }
.bild--team-marian { object-position: 55% 9%; }
.site-footer {
--fw: min(100vw, 1440px);
--pad-top: clamp(52px, calc(3.05vw + 40.1px), 84px);
--logo-w: calc(163px + 0.2476 * var(--fw));
--ring-gap: 12px;
position: relative;
overflow: hidden;
padding: var(--pad-top) 0 44px;
background: var(--c-sand);
color: var(--c-ink);
}
.site-footer__ring {
position: absolute;
left: 50%;
top: calc(79px - 0.1524 * var(--fw));
width: calc(118px + 0.5429 * var(--fw));
height: calc(118px + 0.5429 * var(--fw));
border: 1px solid var(--c-honey);
border-radius: 50%;
opacity: 0.5;
transform: translateX(-50%);
pointer-events: none;
}
@media (max-width: 1023.98px) {
.site-footer {
--ring-d: max(calc(118px + 0.5429 * var(--fw)), calc(162.86px + 0.4286 * var(--fw)));
--nav-mid: calc(var(--pad-top) + 0.43984 * var(--logo-w) + 182px);
}
.site-footer__ring {
top: calc(var(--nav-mid) - var(--ring-d));
width: var(--ring-d);
height: var(--ring-d);
}
}
.site-footer__inner {
position: relative;
z-index: var(--z-content);
display: flex;
flex-direction: column;
align-items: center;
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--gutter);
text-align: center;
}
.site-footer__logo {
width: var(--logo-w);
max-width: 100%;
color: var(--c-honey-text);
}
.site-footer__claim {
margin-top: 22px;
font-size: 12px;
font-weight: 300;
letter-spacing: 0.28em;
text-indent: 0.28em;
line-height: 1.5;
text-transform: uppercase;
color: rgba(28, 27, 26, 0.7);
}
@media (max-width: 389.98px) {
.site-footer__claim {
letter-spacing: 0.24em;
text-indent: 0.24em;
}
}
.site-footer__nav {
margin-top: 32px;
}
.site-footer__nav a {
display: block;
padding: 7px 0;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.09em;
line-height: 30px;
text-transform: uppercase;
color: var(--c-ink);
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible { color: var(--c-honey-text); }
.site-footer__social {
display: flex;
gap: 12px;
margin-top: 36px;
}
.site-footer__social a {
display: flex;
align-items: center;
justify-content: center;
width: var(--sz-badge);
height: var(--sz-badge);
border-radius: var(--r-pill);
color: var(--c-ink);
}
.site-footer__social a:first-child {
background: var(--c-honey);
}
.site-footer__social a + a {
border: 1px solid var(--c-line);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
color: var(--c-honey-text);
border-color: var(--c-honey);
}
.site-footer__social a:first-child:hover,
.site-footer__social a:first-child:focus-visible {
background: #C39843;
color: var(--c-ink);
}
.site-footer__address {
margin-top: 32px;
font-size: 13px;
letter-spacing: 0.03em;
line-height: 1.8;
color: var(--c-text-footer);
}
.site-footer__address a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.site-footer__address a:hover,
.site-footer__address a:focus-visible { color: var(--c-honey-text); }
.site-footer__sep {
display: block;
height: 0;
overflow: hidden;
}
@media (min-width: 768px) {
.site-footer__sep {
display: inline;
height: auto;
overflow: visible;
}
}
.site-footer__legal {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 12px;
font-size: 13px;
letter-spacing: 0.03em;
color: var(--c-text-footer);
}
.site-footer__legal a {
display: block;
padding: 13px 4px;
color: var(--c-text-footer);
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--c-honey-text); }
.site-footer__copyright {
margin-top: 20px;
font-size: 12px;
letter-spacing: 0.04em;
line-height: 1.55;
color: var(--c-text-mute-2);
}
.site-footer__claim,
.site-footer__address,
.site-footer__legal,
.site-footer__copyright {
background: var(--c-sand);
box-shadow: 0 0 0 var(--ring-gap) var(--c-sand);
}
@media (max-width: 1023.98px) {
.site-footer__nav {
background: var(--c-sand);
box-shadow: 0 0 0 var(--ring-gap) var(--c-sand);
}
}
@media (min-width: 1024px) {
.site-footer {
padding-bottom: 32px;
}
.site-footer__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"logo    logo"
"claim   claim"
"address address"
"social  legal"
"copy    copy";
justify-items: center;
}
.site-footer__logo { grid-area: logo; }
.site-footer__claim { grid-area: claim; margin-top: 27px; font-size: 14px; line-height: 1.4; }
.site-footer__address { grid-area: address; margin-top: 64px; line-height: 1.75; }
.site-footer__social { grid-area: social; justify-self: start; margin-top: 22px; }
.site-footer__legal { grid-area: legal; justify-self: end; flex-direction: row; margin-top: 22px; }
.site-footer__copyright { grid-area: copy; margin-top: 26px; }
.site-footer__legal li + li::before {
content: "·";
margin-inline: 4px;
}
.site-footer__legal li {
display: flex;
align-items: center;
}
.site-footer__nav {
position: absolute;
top: 0;
right: var(--gutter);
z-index: var(--z-content);
width: 304px;
margin-top: 0;
text-align: right;
}
.site-footer__nav a {
width: fit-content;
margin-left: auto;
padding: 5px 0 5px 20px;
line-height: 32px;
background: var(--c-sand);
}
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.js [data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity 500ms var(--ease), transform 500ms var(--ease);
will-change: opacity, transform;
}
.js [data-reveal].is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
.t-center { text-align: center; }
.t-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: clamp(32px, 3vw, 48px); }
.mt-xl { margin-top: clamp(44px, 5vw, 80px); }
.is-empty { background: var(--c-photo-bg); }