:root {
--yellow: #FFD23F;
--orange: #FF993D;
--pink: #FD6178;
--purple: #6A3DE8;
--dark: #201642;
--neutral: #E3DCCF;
--bg: #F1ECE3;
--ink: #17141C;
--white: #FFFFFF;
--tile-border: #E3DCCF;
--sand: #EFEAE0;
--svc-1: #FFD23F;
--svc-2: #FFB644;
--svc-3: #FF993D;
--svc-4: #FD815E;
--svc-5: #FD6178;
--svc-6: #E74E9C;
--svc-7: #C743BD;
--svc-8: #9D3ED8;
--svc-9: #6A3DE8;
--num-1: #BA3BB1;
--num-2: #9D3ED8;
--num-3: #6A3DE8;
--font-head: 'Archivo', sans-serif;
--font-body: 'Geist', sans-serif;
--font-mono: 'Geist Mono', ui-monospace, monospace;
--fs-h1: clamp(2.25rem, .85rem + 6.2vw, 6.5rem);
--fs-h2: clamp(2.25rem, 1.2rem + 3.9vw, 4.5rem);
--fs-h2-sm: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
--fs-lead: clamp(1.3125rem, 1rem + 1.1vw, 1.875rem);
--fs-body: clamp(1.125rem, 1rem + .35vw, 1.3125rem);
--fs-eyebrow: clamp(.75rem, .7rem + .25vw, .9375rem);
--gutter: clamp(20px, 3vw, 48px);
--panel-x: clamp(20px, 3vw, 48px);
--panel-pad: clamp(20px, 3vw, 40px);
--panel-pad-y: clamp(36px, 5.5vw, 80px);
--section-y: clamp(72px, 8.4vw, 120px);
--radius-panel: clamp(24px, 2.2vw, 32px);
--measure: 1080px;
--measure-text: 900px;
}
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo.4c98b9d490.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/geist.9b6f5ff45b.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/geist-mono.5f3d6ad60f.woff2) format('woff2'); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure, dl, dd, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: 700; }
::selection { background: var(--purple); color: #FFFFFF; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
h1, h2, h3, .h2 { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; text-wrap: wrap; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.panel--purple :focus-visible, .hero--purple :focus-visible, .panel--dark :focus-visible { outline-color: var(--yellow); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--dark); color: #FFFFFF; padding: 12px 20px; font-weight: 600; z-index: 200; border-radius: 10px; }
.skip-link:focus { left: 16px; top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-header { display: flex; justify-content: space-between; align-items: flex-end; min-height: 103px; padding: 28px var(--gutter) 0; }
.tabs { display: flex; align-items: flex-end; gap: 6px; margin-right: max(var(--radius-panel), clamp(12px, 2.8vw, 40px)); }
.tab { display: flex; align-items: center; padding: 14px 26px; border-radius: 14px 14px 0 0; font-family: var(--font-body); font-size: 18px; line-height: 27px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: padding .15s ease; }
a.tab:hover, summary.tab:hover { padding-top: 24px; padding-bottom: 24px; }
.tab.is-active, .tab.is-active:hover { padding: 22px 30px 26px; border-radius: 16px 16px 0 0; font-size: 20px; font-weight: 700; }
.tab--logo { margin-left: max(var(--radius-panel), clamp(12px, 2.8vw, 40px)); font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.tab--logo.is-active, .tab--logo.is-active:hover { padding: 14px 26px; border-radius: 14px 14px 0 0; font-size: 22px; }
.tab--yellow { background: var(--yellow); color: var(--ink); }
.tab--orange { background: var(--orange); color: var(--ink); }
.tab--pink { background: var(--pink); color: var(--ink); }
.tab--purple { background: var(--purple); color: #FFFFFF; }
.tab--dark { background: var(--dark); color: #FFFFFF; }
.tab--down::after { content: '\00a0↓'; }
.menu { display: none; }
@media (max-width: 819.98px) {
.site-header { min-height: 0; padding: 20px calc(var(--panel-x) + var(--radius-panel)) 0; }
.tab { padding: 12px 16px; border-radius: 12px 12px 0 0; font-size: 16px; line-height: 22px; }
a.tab:hover, summary.tab:hover { padding-top: 16px; padding-bottom: 16px; }
.tab--logo, .tab--logo.is-active, .tab--logo.is-active:hover { margin-left: 0; padding: 12px 16px; border-radius: 12px 12px 0 0; font-size: 19px; }
.tabs { margin: 0 auto 0 4px; gap: 0; }
.tabs .tab:not(.is-active) { display: none; }
.tab.is-active, .tab.is-active:hover { padding: 14px 14px 18px; border-radius: 12px 12px 0 0; font-size: 15px; line-height: 22px; }
.menu { display: block; }
.menu__toggle { cursor: pointer; user-select: none; }
.menu__label-close { display: none; }
.menu[open] .menu__label-open { display: none; }
.menu[open] .menu__label-close { display: inline; }
.menu[open] .menu__toggle { position: fixed; z-index: 102; top: 20px; right: 20px; padding: 0 16px; height: 44px; border-radius: 10px; background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.menu__panel { display: none; }
.menu[open] .menu__panel { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 101; overflow-y: auto; background: var(--bg); padding: 20px 8px 8px; }
.menu__logo { display: flex; flex-direction: column; align-self: flex-start; min-height: 44px; margin: 0 0 24px 20px; font-family: var(--font-head); font-weight: 700; font-size: 26px; line-height: 1; text-decoration: none; }
.menu__logo span, .footer__logo span { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; }
.stack { flex: 1; display: flex; flex-direction: column; }
.stack__tab { display: block; border-radius: 20px 20px 0 0; padding: 20px 22px 30px; margin-bottom: -12px; font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.1; text-decoration: none; }
.stack__tab--yellow { background: var(--yellow); color: var(--ink); }
.stack__tab--orange { background: var(--orange); color: var(--ink); }
.stack__tab--pink { background: var(--pink); color: var(--ink); }
.stack__tab--purple { background: var(--purple); color: #FFFFFF; }
.stack__contact { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: var(--dark); color: #FFFFFF; border-radius: 20px; padding-bottom: 26px; }
.stack__tab--dark { background: transparent; color: #FFFFFF; padding-bottom: 20px; margin: 0; }
.stack__tab--dark::after { content: '\00a0↓'; }
.stack__links { padding: 0 22px; display: flex; flex-direction: column; gap: 4px; }
.stack__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
body:has(.menu[open]) { overflow: hidden; }
}
@media (max-width: 399.98px) {
.tab, .tab--logo, .tab--logo.is-active, .tab--logo.is-active:hover { padding-left: 10px; padding-right: 10px; font-size: 15px; }
.tab--logo, .tab--logo.is-active, .tab--logo.is-active:hover { font-size: 17px; }
.tab.is-active, .tab.is-active:hover { padding-left: 8px; padding-right: 8px; font-size: 13px; }
}
@media (max-width: 339.98px) {
.tab, .tab--logo, .tab--logo.is-active, .tab--logo.is-active:hover { padding-left: 8px; padding-right: 8px; }
.tab--logo, .tab--logo.is-active, .tab--logo.is-active:hover { font-size: 16px; }
.tab.is-active, .tab.is-active:hover { padding-left: 7px; padding-right: 7px; font-size: 12.5px; }
}
.hero { container-type: inline-size; margin: 0 var(--panel-x); border-radius: var(--radius-panel); padding: clamp(28px, 6vw, 88px) var(--panel-pad) clamp(28px, 5.5vw, 80px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 2vw, 28px); }
.hero--yellow { background: var(--yellow); color: var(--ink); }
.hero--orange { background: var(--orange); color: var(--ink); }
.hero--pink { background: var(--pink); color: var(--ink); }
.hero--purple { background: var(--purple); color: #FFFFFF; }
.hero--neutral { background: var(--neutral); color: var(--ink); }
.hero__h1 { font-family: var(--font-head); font-weight: 700; font-size: min(var(--fs-h1), calc(100cqi / var(--fit, .01))); line-height: 1.02; letter-spacing: -.02em; max-width: 100%; }
.hero--post .hero__h1 { font-size: min(clamp(2rem, 1rem + 3.6vw, 4.25rem), calc(100cqi / var(--fit, .01))); line-height: 1.08; }
.hero__inner { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: inherit; }
@media (min-width: 820px) {
.hero__inner { max-width: var(--measure-text); margin-inline: auto; }
main .post__inner, main .g-page > .g-sec, main .textpage .legal__inner, main .lead--text .lead__inner { width: 100%; max-width: min(var(--measure-text), calc(100% - 2 * var(--panel-pad))); margin-inline: auto; }
}
.nowrap { white-space: nowrap; }
.eyebrow { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-eyebrow); line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.lead { padding: clamp(40px, 5.5vw, 80px) var(--gutter) 0; }
.lead__inner { max-width: 66.667%; display: flex; flex-direction: column; gap: 22px; }
.lead p { font-size: var(--fs-lead); line-height: 1.45; text-wrap: pretty; }
.lead--text .lead__inner { max-width: var(--measure-text); }
.lead a { color: inherit; text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.section { padding: var(--section-y) var(--gutter) 0; }
.section--first { padding-top: clamp(48px, 6.5vw, 96px); }
.section--panel { padding-left: var(--panel-x); padding-right: var(--panel-x); }
.panel { border-radius: var(--radius-panel); padding: var(--panel-pad-y) var(--panel-pad); }
.panel--orange { background: var(--orange); color: var(--ink); }
.panel--purple { background: var(--purple); color: #FFFFFF; }
.panel--dark { background: var(--dark); color: #FFFFFF; }
.panel--yellow { background: var(--yellow); color: var(--ink); }
.panel > .split + * { margin-top: clamp(40px, 5vw, 72px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; }
.split--wide { padding-left: clamp(20px, 4.4vw, 64px); padding-right: clamp(20px, 4.4vw, 64px); }
.split--tight { margin-top: 56px; }
.split__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.split__body { min-width: 0; padding-top: 44px; }
.split--tight .split__body, .split--tight .split__head { padding-top: 0; }
.label { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-eyebrow); line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.label--purple { color: var(--purple); }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: clamp(24px, 3vw, 44px); }
.prose.prose--lead { max-width: 66.667%; font-size: var(--fs-lead); line-height: 1.45; }
.prose.prose--lead > * + * { margin-top: 22px; }
.prose.prose--lead > .btn { margin-top: 36px; }
.h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.025em; }
.prose { font-size: var(--fs-body); line-height: 1.6; }
.prose > * + * { margin-top: 22px; }
.prose > .btn { margin-top: 32px; }
.prose-sm, .prose-sm p { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.6; }
.prose-sm > * + * { margin-top: 28px; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--purple); }
.text-link--pink { text-decoration-color: var(--pink); }
.text-link--orange { text-decoration-color: var(--orange); }
.text-link--yellow { text-decoration-color: var(--yellow); }
.text-link:hover { text-decoration-color: currentColor; }
.btn { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; background: var(--purple); color: #FFFFFF; padding: 20px 28px; border-radius: 14px; font-family: var(--font-body); font-size: 19px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn::after { content: '→'; flex-shrink: 0; }
.btn:hover { background: var(--orange); color: var(--ink); transform: translateY(-3px); box-shadow: 0 6px 0 var(--ink); }
.btn--on-orange:hover { background: var(--dark); color: #FFFFFF; }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: #FFFFFF; color: var(--ink); box-shadow: 0 6px 0 var(--yellow); }
.btn--orange { background: var(--orange); color: var(--ink); }
.btn--orange:hover { background: var(--dark); color: #FFFFFF; box-shadow: 0 6px 0 var(--orange); }
.sq-list { border-top: 2px solid var(--dark); }
.sq-list li { position: relative; padding: 16px 0 16px 28px; border-bottom: 2px solid var(--dark); font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); line-height: 1.45; font-weight: 500; }
.sq-list li::before { content: ''; position: absolute; left: 0; top: calc(16px + .72em - 5px); width: 10px; height: 10px; background: var(--dark); }
.sq-list--orange li::before { background: var(--orange); }
.sq-list--purple { border-color: var(--purple); }
.sq-list--purple li { border-color: var(--purple); color: var(--purple); }
.sq-list--purple li::before { background: var(--purple); }
.sq-list--big li { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: 1.25; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.quote { border-top: 2px solid var(--dark); padding-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.quote blockquote p { font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); line-height: 1.55; font-style: italic; text-wrap: pretty; }
.quote figcaption { font-family: var(--font-mono); font-size: clamp(.75rem, .7rem + .2vw, .875rem); letter-spacing: .04em; text-transform: uppercase; }
.quote--light { border-color: #FFFFFF; }
.site-footer { margin: var(--section-y) var(--gutter) 0; border-top: 2px solid var(--dark); padding: 40px 0 28px; display: flex; flex-direction: column; gap: 48px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 48px; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: 17px; line-height: 1.5; }
.footer__logo { display: flex; flex-direction: column; font-family: var(--font-head); font-weight: 700; font-size: 32px; letter-spacing: -.01em; line-height: 1; text-decoration: none; }
.footer__logo span { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.footer__title { font-family: var(--font-mono); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.footer__col ul { display: flex; flex-direction: column; gap: 4px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 30px; font-size: 17px; text-decoration: none; white-space: nowrap; }
.footer__col a:hover, .footer__logo:hover { color: var(--purple); }
.footer__copy { border-top: 1px solid var(--dark); padding-top: 18px; font-family: var(--font-mono); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 1099.98px) {
.footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899.98px) {
.split { grid-template-columns: minmax(0, 1fr); }
.split__body { padding-top: 0; }
.quotes { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.lead__inner, .prose.prose--lead { max-width: none; }
}
@media (max-width: 819.98px) {
:root { --panel-x: 20px; --gutter: 20px; }
.hero { padding: 22px 18px 24px; }
.eyebrow--desktop { display: none; }
.footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__col a { min-height: 44px; font-size: 17px; }
.footer__col ul { gap: 0; }
.site-footer { gap: 28px; padding-top: 28px; }
}
@media (max-width: 599.98px) {
.btn { padding: 16px 20px; border-radius: 12px; font-size: 16px; }
.quote { padding-top: 16px; gap: 8px; }
.footer__copy { font-size: 12px; }
}
@media (max-width: 399.98px) {
.footer__col a, .footer__col a:hover { font-size: 16px; }
.footer__cols { column-gap: 12px; }
}
.hero--home { padding: clamp(32px, 5.5vw, 80px) var(--panel-pad) clamp(32px, 4.5vw, 64px); gap: 0; }
.hero__h1--home { line-height: 1; letter-spacing: -.025em; }
.hero__h1--home .eyebrow { margin-bottom: clamp(22px, 2.2vw, 32px); letter-spacing: .08em; }
.accent { color: var(--purple); }
.hero__note { margin-top: 20px; max-width: 680px; font-size: clamp(.8125rem, .78rem + .15vw, .9375rem); line-height: 1.45; }
.hero__lead { margin-top: clamp(22px, 3.1vw, 44px); max-width: calc((100cqi + 2 * var(--panel-pad)) * 2 / 3);  font-size: clamp(1.1875rem, 1rem + .5vw, 1.5rem); line-height: 1.45; text-wrap: pretty; }
@media (min-width: 900px) { .hero__note { max-width: none; white-space: nowrap; } }
@media (min-width: 1000px) { .hero__lead { max-width: none; } .hero__lead .line-wide { white-space: nowrap; } }
.u { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.hero--home .btn { margin-top: clamp(22px, 2.2vw, 32px); }
.hero--home .quote { margin-top: clamp(30px, 5px + 3vw, 72px); width: 100%; max-width: 760px; }
.motto { display: flex; flex-direction: column; gap: 6px; }
.prose > .motto { margin-top: 28px; }
.motto .label { font-size: 14px; }
.motto__text { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.2; letter-spacing: -.015em; }
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 44px; }
.services li { border: 3px solid var(--svc-1); color: var(--dark); border-radius: 22px; padding: 20px 24px; min-height: clamp(110px, 10.7vw, 154px); display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.services li:nth-child(2) { border-color: var(--svc-2); }
.services li:nth-child(3) { border-color: var(--svc-3); }
.services li:nth-child(4) { border-color: var(--svc-4); }
.services li:nth-child(5) { border-color: var(--svc-5); }
.services li:nth-child(6) { border-color: var(--svc-6); }
.services li:nth-child(7) { border-color: var(--svc-7); }
.services li:nth-child(8) { border-color: var(--svc-8); }
.services li:nth-child(9) { border-color: var(--svc-9); }
.services h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.02; letter-spacing: -.015em; }
.services p { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.4; }
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 6vw, 130px); row-gap: clamp(48px, 7.5vw, 108px); margin-top: clamp(48px, 6vw, 96px); }
.logos li { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.logos + .quotes { margin-top: clamp(56px, 6.7vw, 96px); }
.logos img { width: min(100%, var(--logo-w)); height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.logos { --live-w: calc(100vw - 2 * clamp(20px, 3vw, 48px)); --logo-w: calc((var(--live-w) * .92 - 5 * clamp(24px, 6vw, 130px)) / 4); }
.portrait { margin-top: 24px; width: clamp(180px, 20vw, 300px); aspect-ratio: 4 / 5; background: var(--yellow); border-radius: 24px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.portrait img { width: 70%; height: auto; }
.seals { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 4px; }
.seals img { width: auto; height: 72px; }
.seals img + img { height: 90px; }
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 40px 0; }
.numbers li { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--num-1); padding-top: 18px; }
.numbers li:nth-child(2) { border-color: var(--num-2); }
.numbers li:nth-child(3) { border-color: var(--num-3); }
.numbers__n { font-family: var(--font-head); font-stretch: 125%; font-weight: 500; font-size: clamp(1.875rem, .9rem + 4.2vw, 4.5rem); line-height: 1; letter-spacing: .01em; color: var(--num-1); }
.numbers li:nth-child(2) .numbers__n { color: var(--num-2); }
.numbers li:nth-child(3) .numbers__n { color: var(--num-3); }
.numbers__t { font-size: clamp(.875rem, .8rem + .35vw, 1.125rem); line-height: 1.35; }
#kontakt, #dein-texter { scroll-margin-top: 24px; }
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; border-top: 2px solid #FFFFFF; padding-top: 28px; }
.prose > .contact { margin-top: 40px; }
.contact address { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.6; }
.contact__direct { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact__phone { display: flex; flex-direction: column; gap: 2px; }
.contact__phone .label { font-size: 13px; }
.contact__phone a { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.1; text-decoration: none; white-space: nowrap; }
.contact__phone a:hover { color: var(--yellow); }
.contact__direct .text-link { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); }
.panel--dark .btn { margin-top: 40px; }
.faq { border-top: 2px solid var(--dark); align-self: start; margin-top: 44px; padding-top: 0; }
.faq details { border-bottom: 2px solid var(--dark); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; cursor: pointer; }
.faq summary h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); line-height: 1.25; color: var(--dark); }
.faq__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--purple); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 24px; font-weight: 600; transition: transform .15s ease, background-color .15s ease; }
.faq__icon::before { content: '+'; }
.faq details[open] .faq__icon::before { content: '–'; }
.faq summary:hover .faq__icon { transform: translateY(-2px); background: var(--dark); }
.faq details > p { padding: 0 68px 26px 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; text-wrap: pretty; }
.bausteine { display: flex; flex-direction: column; gap: 56px; }
.baustein { container-type: inline-size; }
.baustein { border-top: 2px solid var(--dark); padding-top: 28px; }
.baustein__h { position: relative; display: block; padding-left: 28px; font-family: var(--font-head); font-weight: 700; font-size: min(var(--fs-h2-sm), calc(((100cqi - 48px) * 5 / 12 - 28px) / 10.3)); line-height: 1.05; letter-spacing: -.02em; }
.baustein__h::before { content: ''; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; background: var(--orange); }
.baustein__p { padding-top: 0; font-size: var(--fs-body); line-height: 1.6; text-wrap: pretty; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; margin-top: clamp(40px, 5vw, 72px); }
.step { border-top: 2px solid #FFFFFF; padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.step__no { font-family: var(--font-head); font-stretch: 125%; font-weight: 500; font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.5rem); line-height: 1; color: var(--yellow); }
.step h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem); line-height: 1.1; letter-spacing: -.02em; }
.step p { font-size: clamp(1.0625rem, 1rem + .1vw, 1.125rem); line-height: 1.6; }
@media (max-width: 1023.98px) {
.logos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; --logo-w: calc((var(--live-w) - 64px) / 3); }
}
@media (max-width: 1209.98px) {
.contact { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 1099.98px) {
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
.baustein__h { font-size: min(var(--fs-h2-sm), calc((100cqi - 28px) / 10.3)); }
.services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq { margin-top: 8px; }
.hero__lead { max-width: none; }
.baustein { gap: 10px; padding-top: 16px; }
.bausteine { gap: 20px; }
.portrait { margin-top: 0; }
}
@media (max-width: 599.98px) {
.services { grid-template-columns: minmax(0, 1fr); }
.services li { min-height: 0; }
.logos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 40px; --logo-w: calc((var(--live-w) - 28px) / 2); }
.seals { gap: 20px; }
.seals img { height: 56px; }
.seals img + img { height: 70px; }
.numbers { gap: 12px; margin: 20px 0 28px; }
.numbers li { gap: 4px; padding-top: 12px; }
.contact { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; }
.faq summary { gap: 16px; padding: 16px 0; }
.faq__icon { width: 36px; height: 36px; font-size: 20px; }
.faq details > p { padding-right: 0; }
.steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.step { gap: 8px; padding-top: 14px; }
.baustein__h { padding-left: 22px; font-size: min(var(--fs-h2-sm), calc((100cqi - 22px) / 10.3)); }
.panel--dark .btn { margin-top: 24px; justify-content: space-between; width: 100%; }
}
.blog-list__inner { scroll-margin-top: 24px; }
.topics__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; margin-bottom: 24px; }
.topic { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 8px; transition: text-decoration-color .15s; }
.topic:hover { text-decoration-color: var(--purple); }
.topic[aria-current="page"] { font-weight: 600; text-decoration-color: var(--purple); }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-bottom: 40px; }
.post-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px 0 40px; border-top: 2px solid var(--dark); min-width: 0; }
.post-card__cats { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--purple); }
.post-card h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem); line-height: 1.12; letter-spacing: -.02em; }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.post-card__excerpt { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.6; }
.post-card__more { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); font-weight: 600; text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.post-card__more:hover { text-decoration-color: var(--ink); }
.pager { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 16px; }
.pager__num, .pager__txt { min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 10px; border: 2px solid var(--dark); text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; }
.pager__num--current { background: var(--dark); color: #FFFFFF; }
a.pager__num:hover, a.pager__txt:hover { background: var(--purple); border-color: var(--purple); color: #FFFFFF; }
.post__inner { max-width: var(--measure-text); container-type: inline-size; }
.post__updated { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 28px; }
.post__body p, .post__body li { font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); line-height: 1.7; }
.post__body p { margin: 0 0 22px; }
.post__intro p { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); }
.post__body h2 { font-family: var(--font-head); font-weight: 700; font-size: min(clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem), calc(100cqi / 12.7)); line-height: 1.08; letter-spacing: -.02em; margin: 56px 0 22px; }
.post__body h3 { font-family: var(--font-head); font-weight: 700; font-size: min(clamp(1.375rem, 1.1rem + .9vw, 1.875rem), calc(100cqi / 12.7)); line-height: 1.2; letter-spacing: -.02em; color: var(--purple); margin: 40px 0 16px; }
.post__body h4, .post__body .kicker, .post__body .sub { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.25; letter-spacing: -.01em; margin: 32px 0 12px; }
.post__body h2 + h3, .post__body h2 + h4, .post__body h2 + .kicker { margin-top: 24px; }
.post__body a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post__body a:hover { color: var(--purple); }
.post__body ul, .post__body ol { margin: 0 0 22px; padding-left: 0; }
.post__body ul li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.post__body ul li::before { content: ''; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; margin-top: -4px; background: var(--purple); }
.post__body ol { list-style: decimal; padding-left: 26px; }
.post__body ol li { margin-bottom: 8px; padding-left: 4px; }
.post__body ol li::marker { font-family: var(--font-mono); color: var(--purple); }
.post__body ul.checklist li::before { content: '✓'; width: auto; height: auto; margin: 0; top: 0; background: none; color: var(--purple); font-weight: 700; }
.post__body blockquote { margin: 0 0 24px; padding: 16px 0 0; border-top: 2px solid var(--dark); }
.post__body blockquote p { font-style: italic; }
.post__body .u { text-decoration: underline; }
.post__author { margin-top: 40px; border-top: 2px solid var(--dark); padding-top: 24px; }
.post__author p { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.6; }
.post__author a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post__back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); font-weight: 600; text-decoration: none; }
.post__back:hover { color: var(--purple); }
@media (max-width: 899.98px) {
.blog-grid { grid-template-columns: minmax(0, 1fr); }
.post-card { padding: 22px 0; gap: 10px; }
}
@media (max-width: 599.98px) {
.topics__list { gap: 0 18px; }
}
.textpage > *, .textpage .legal__inner { max-width: var(--measure-text); }
.g-page { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.g-sec { scroll-margin-top: 24px; }
.g-sec h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 20px; }
.g-p { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.65; margin-bottom: 18px; }
.g-p.mb-0 { margin-bottom: 0; }
.g-ul { margin-bottom: 18px; }
.g-ul li { position: relative; padding-left: 26px; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.7; margin-bottom: 4px; }
.g-ul li::before { content: ''; position: absolute; left: 0; top: .85em; width: 9px; height: 9px; margin-top: -4px; background: var(--dark); }
.g-ul.mb-0 { margin-bottom: 0; }
.g-sec a, .legal a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.g-sec a:hover, .legal a:hover { color: var(--purple); }
.g-note { font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); line-height: 1.6; margin-top: 20px; }
dl.kerndaten { display: flex; flex-direction: column; border-top: 2px solid var(--dark); }
dl.kerndaten > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--dark); }
dl.kerndaten dt { font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding-top: 3px; }
dl.kerndaten dd { font-size: clamp(1.0625rem, 1rem + .1vw, 1.125rem); line-height: 1.5; }
.g-rows { display: flex; flex-direction: column; border-top: 2px solid var(--dark); }
.g-row { padding: 18px 0; border-bottom: 1px solid var(--dark); }
.g-row h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.125rem, 1rem + .3vw, 1.25rem); line-height: 1.3; margin-bottom: 6px; }
.g-row p { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.6; }
@media (max-width: 599.98px) {
dl.kerndaten > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
dl.kerndaten dd a { display: inline-flex; align-items: center; min-height: 44px; }
}
.legal--p16 { --legal-p-gap: 16px; }
.legal--p20 { --legal-p-gap: 20px; }
.legal__inner { container-type: inline-size; }
.legal h2 { font-family: var(--font-head); font-weight: 700; font-size: min(clamp(1.375rem, 1.15rem + .7vw, 1.75rem), calc(100cqi / 14)); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 16px; }
.legal p { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.6; margin: 0 0 var(--legal-p-gap); overflow-wrap: break-word; }
.legal p.tight { margin-bottom: 12px; }
.legal p.lh-18 { line-height: 1.8; }
.legal ul { margin: 0 0 20px; }
.legal li { position: relative; padding-left: 26px; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.8; }
.legal li::before { content: ''; position: absolute; left: 0; top: .9em; width: 9px; height: 9px; margin-top: -4px; background: var(--dark); }
.legal__sec { margin-bottom: clamp(36px, 4vw, 48px); }
.legal__sec:last-child { margin-bottom: 0; }
.legal__sec > :last-child { margin-bottom: 0; }
.nf__inner { max-width: var(--measure-text); }
.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px 40px; align-items: stretch; }
.work { min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.work__img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; padding: 28px; border-radius: 24px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--tile-border); text-decoration: none; color: inherit; }
.work__img img { width: 100%; height: 100%; object-fit: contain; }
.work__img--cover img { object-fit: cover; }
.work__sand { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--sand); overflow: hidden; }
.work__sand .typo--letter { padding: 5% 8%; }
.work__meta { margin-top: 6px; font-family: var(--font-mono); font-size: clamp(.75rem, .7rem + .2vw, .875rem); line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; }
.work__meta strong { font-weight: 400; }
.work__claim { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.08; letter-spacing: -.02em; }
.work__claim a { text-decoration: none; }
.work__claim a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.work__text { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.6; text-wrap: pretty; }
.work__link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.work__link:hover { text-decoration-color: var(--ink); }
.work__img--names { background: var(--purple); border-color: var(--purple); padding: clamp(28px, 4vw, 48px); }
.work__img--claim { background: var(--orange); border-color: var(--orange); padding: clamp(28px, 4vw, 56px); }
.typo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.typo__names { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.25rem, .9rem + 1vw, 1.75rem); line-height: 1.45; letter-spacing: -.01em; text-align: center; color: #FFFFFF; }
.typo__names span:nth-child(even) { color: var(--yellow); }
.typo__line { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.25rem, .9rem + 1vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; text-align: center; color: var(--ink); }
.letter { background: #FFFFFF; color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.55; box-shadow: 0 2px 18px rgba(23, 20, 28, .14); padding: 26px; }
.letter strong { display: block; font-size: 17px; margin-bottom: 10px; }
.letter p { margin: 0 0 10px; }
.typo--letter .letter { width: 100%; max-width: 440px; max-height: 100%; overflow: hidden; }
.typo--letter .letter p:last-child { margin-bottom: 0; }
.works-outro__lead { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 1.1rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: -.02em; }
.work-detail > * + * { margin-top: clamp(56px, 6vw, 88px); }
.work-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.work-meta > div { display: flex; flex-direction: column; gap: 6px; }
.work-meta dt { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.work-meta dd { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 600; line-height: 1.4; }
.work-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.work-col { min-width: 0; display: flex; flex-direction: column; gap: 18px; border-top: 2px solid var(--dark); padding-top: 24px; }
.work-col--empty { border-top-color: transparent; }
.work-col h2, .work-col h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.05; letter-spacing: -.02em; }
.work-col p { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.6; text-wrap: pretty; }
.work-quotes { display: flex; flex-direction: column; }
.work-quote { padding: 14px 0; border-top: 1px solid var(--dark); }
.work-quote:first-child { border-top: 0; padding-top: 0; }
.work-quote blockquote p { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.55; font-style: italic; }
.work-quote figcaption { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.work-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; align-items: start; }
.work-gallery--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-gallery__item { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.work-gallery__side--empty { min-height: 1px; }
.work-gallery figcaption { font-family: var(--font-mono); font-size: clamp(.75rem, .7rem + .2vw, .875rem); line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; }
.zoom { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; padding: clamp(14px, 2vw, 28px); border: 1px solid var(--tile-border); border-radius: 24px; overflow: hidden; background: #FFFFFF; cursor: zoom-in; font: inherit; color: inherit; }
.zoom img { width: 100%; height: 100%; object-fit: contain; }
.work-gallery--cols3 .zoom, .work-line .zoom, .work-site .zoom { aspect-ratio: auto; }
.work-gallery--cols3 .zoom img, .work-line .zoom img, .work-site .zoom img { height: auto; }
.zoom__sand { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--sand); padding: clamp(14px, 2.4vw, 32px); }
.zoom--sand .zoom__sand img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 2px 16px rgba(23, 20, 28, .16); }
.zoom::after { content: ''; position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 18px no-repeat; opacity: .85; transition: opacity .15s, transform .15s; }
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; transform: translateY(-2px); }
.work-project { border-top: 2px solid var(--dark); padding-top: clamp(32px, 4vw, 48px); }
.work-project > * + * { margin-top: clamp(40px, 5vw, 64px); }
.work-project__label { font-family: var(--font-mono); font-size: clamp(.75rem, .7rem + .2vw, .875rem); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.work-project__head h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h2-sm); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 12px; }
.work-project__meta { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); }
.work-project__meta strong { font-weight: 600; }
.work-sites { display: flex; flex-direction: column; }
.work-site { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 40px; border-top: 2px solid var(--dark); }
.work-site__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.work-site .work__meta { margin-top: 0; }
.work-site .work__link { margin-top: 0; }
.work-letter { background: var(--neutral); border-radius: 24px; padding: clamp(20px, 5vw, 64px); }
.letter--large { width: min(100%, 680px); margin: 0 auto; font-size: clamp(15px, .9rem + .2vw, 17px); line-height: 1.6; padding: clamp(24px, 5vw, 48px); }
.letter--large p { margin-bottom: 14px; }
.letter--large strong { margin-bottom: 18px; }
.letter--large .letter__ps { margin: 24px 0 0; }
.work-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.work-names li { border-top: 2px solid var(--dark); padding: 28px 0 40px; min-width: 0; }
.work-names strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; color: var(--purple); margin-bottom: 10px; }
.work-names span { display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.work-names p { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.6; margin-top: 16px; text-wrap: pretty; }
.work-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.work-line { border-top: 2px solid var(--dark); padding-block: 28px 40px; min-width: 0; }
.work-line--wide { grid-column: 1 / -1; }
.work-line__label { font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.work-line__label strong { font-weight: 400; }
.work-line__big { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 6px; }
.work-line .zoom { margin-top: 20px; }
.work-nav { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 20px 24px; }
.work-nav__link { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); font-weight: 600; text-decoration: none; white-space: nowrap; }
.work-nav__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.work-nav__prev { grid-column: 1; justify-self: start; }
.work-nav__cta { grid-column: 2; }
.work-nav__next { grid-column: 3; justify-self: end; }
@media (max-width: 1179.98px) {
.work-nav { grid-template-columns: auto auto; justify-content: space-between; }
.work-nav__cta { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; justify-content: space-between; }
.work-nav__prev { grid-row: 2; grid-column: 1; }
.work-nav__next { grid-row: 2; grid-column: 2; }
}
@media (max-width: 899.98px) {
.works-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
.work-meta { grid-template-columns: minmax(0, 1fr); gap: 0; }
.work-meta { gap: 14px; }
.work-gallery__side--empty { display: none; }
.work-cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.work-col--empty { display: none; }
.work-gallery, .work-gallery--cols3, .work-names, .work-lines { grid-template-columns: minmax(0, 1fr); }
.work-site { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 599.98px) {
.work__img { padding: 18px; border-radius: 18px; }
.zoom { border-radius: 18px; }
.typo--letter .letter { padding: 16px; font-size: 12px; }
.letter strong { font-size: 14px; }
}
@media (max-width: 369.98px) {
.work-nav { grid-template-columns: minmax(0, 1fr); }
.work-nav__next { grid-row: 3; grid-column: 1; justify-self: start; }
}
.lb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; overflow: auto; background: rgba(15, 13, 15, .94); color: #FFFFFF;
padding: calc(64px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(64px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lb__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; border-radius: 2px; }
.lb--full { align-items: flex-start; justify-content: flex-start; }
.lb--full .lb__img { max-width: none; max-height: none; width: var(--lb-w, 1600px); margin-inline: auto; cursor: zoom-out; }
@media (min-width: 861px) { .lb--full .lb__img { width: min(var(--lb-w, 1600px), 96vw); } }
.lb__btn { position: fixed; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #FFFFFF; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.lb__btn:hover { background: rgba(255, 255, 255, .26); }
.lb__close { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
.lb__prev, .lb__next { top: 50%; margin-top: -22px; }
.lb__prev { left: calc(12px + env(safe-area-inset-left, 0px)); }
.lb__next { right: calc(12px + env(safe-area-inset-right, 0px)); }
.lb__cap { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 0 68px; text-align: center; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .8); pointer-events: none; }
.lb__count { margin-left: 8px; color: #FFFFFF; font-weight: 600; }
.lb :focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }