@view-transition { navigation: auto; }

:root { --ink: #111110; --pink: #e890b8; --paper: #f0efe9; --muted: #a0a09a; --line: #cdcdc5; --dark-line: #3b3b37; --gutter: clamp(22px, 4vw, 80px); --title-font: "Sansation", sans-serif; --sans: 'Inter', sans-serif; --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-optical-sizing: auto; font-weight: 100; font-style: normal; -webkit-font-smoothing: antialiased; }
body, h1, h2, h3, p, figure { margin: 0; }
/* Nur während einer Mausspur ersetzt die Farbtextur kurz die nativen Flächen. */
body.has-fluid-background { isolation: isolate; }
.site-background { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.has-fluid-background .has-fluid-surface { background-color: transparent !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
img { display: block; width: 100%; }
::selection { color: var(--paper); background: #575952; }
h1, h2, h3 { letter-spacing: -.065em; line-height: .97; }
h1, h2, h3, h4, h5, h6 { font-family: var(--title-font); font-weight: 400; font-style: normal; }
.meta { font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1.55; letter-spacing: .01em; }
.muted { color: var(--muted); }
.serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; }
.skip-link { position: fixed; top: -80px; left: 20px; padding: 15px; background: var(--paper); color: var(--ink); z-index: 100; }
.skip-link:focus { top: 12px; }
.section-pad { padding: 42px var(--gutter) 100px; }
.site-header { background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-between; padding: 25px var(--gutter); gap: 30px; border-bottom: 1px solid var(--dark-line); position: relative; z-index: 10; }
.wordmark { font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.065em; white-space: nowrap; }
.wordmark-one { display: inline-block; margin-right: 4px; font-weight: 800; }
.wordmark-dot { display: inline-block; font-size: 7px; vertical-align: top; padding: 5px 0 0 5px; }
.header-note { font-family: var(--mono); font-size: 10px; line-height: 1.45; color: #b1b1aa; margin-right: auto; margin-left: 7vw; }
.site-header nav { display: flex; align-items: center; gap: clamp(20px, 3.2vw, 58px); font-size: 13px; }
.site-header nav a { display: flex; gap: 14px; padding: 6px 0; }
.site-header nav a span { color: #a0a09a; transition: transform .2s; }
.site-header nav a:hover span { transform: translate(2px, -2px); }
.hero { min-height: 780px; min-height: clamp(700px, calc(100svh - 87px), 1050px); padding: 25px var(--gutter) 30px; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; overflow: hidden; }

.hero-composition { width: 100%; min-height: 390px; height: min(40vw, 630px); position: relative; margin: auto 0; }

.text-link { display: flex; align-items: center; gap: 28px; font-size: 13px; padding: 10px 0; border-bottom: 1px solid currentColor; }
.text-link span { font-size: 22px; }
.section-label { display: flex; justify-content: space-between; gap: 25px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.section-number { display: inline-block; padding-right: 28px; opacity: .5; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin: 60px 0 48px; }
.section-heading h2 { font-size: clamp(65px, 9vw, 150px); }
.section-heading p { font-size: 15px; line-height: 1.5; padding-bottom: 8px; max-width: 320px; }
.featured.section-pad { padding-top: 80px; padding-bottom: 88px; }
.featured .section-heading { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; gap: 48px; margin: 0 0 48px; }
.featured .section-heading h2 { font-size: clamp(58px, 6.5vw, 104px); }
.featured .section-heading p { font-size: 14px; line-height: 1.7; }
.feature-stage { position: relative; height: clamp(400px, 44vw, 610px); background: #232421; overflow: hidden; isolation: isolate; }
.feature-stage::before { content: ''; position: absolute; inset: 0; z-index: 0; background: url('assets/contours.svg') center / cover no-repeat; opacity: .1; pointer-events: none; }
.feature-card { --lift-x: 12px; --lift-angle: 1deg; position: absolute; top: 45%; left: 50%; width: 61%; max-width: 820px; padding: 0; background: none; transform: translate(-58%, -50%) rotate(-3deg); z-index: 1; transition: z-index 0s .18s; }
.feature-card:nth-of-type(2) { --lift-x: -12px; --lift-angle: -1deg; transform: translate(-34%, -50%) rotate(3deg) scale(.97); }
.feature-sheet { display: block; position: relative; background: #dae6e9; pointer-events: none; box-shadow: 0 16px 35px #0005; transform: translate(0, 0) rotate(0deg) scale(1); transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s; }
.feature-card img { height: auto; pointer-events: none; }
.feature-card.is-active { z-index: 2; cursor: default; }
.feature-card.is-active .feature-sheet { transform: translate(var(--lift-x), 6px) rotate(var(--lift-angle)) scale(1.01); box-shadow: 0 20px 45px #0006; }
.feature-card:focus-visible { outline: none; }
.feature-card:focus-visible .feature-sheet { outline: 2px solid var(--paper); outline-offset: 6px; }
.feature-title { position: absolute; bottom: 36px; left: 36px; z-index: 4; margin: 0; font-family: var(--title-font); font-size: clamp(56px, 7.2vw, 108px); font-weight: 400; letter-spacing: -.065em; line-height: .9; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.4px #fff; pointer-events: none; }
.feature-open { position: absolute; bottom: 38px; right: 36px; z-index: 5; display: inline-flex; align-items: center; gap: 22px; padding: 14px 18px; border-radius: 30px; background: var(--paper); color: var(--ink); font-size: 12px; transition: background .2s, transform .2s; }
.feature-open span { font-size: 20px; }
.feature-open:hover { background: #fff; transform: translateY(-3px); }
.about { color: var(--paper); background: var(--ink); }
.about.section-pad { --about-title-size: clamp(30px, 9vw, 136px); --studio-breathing: clamp(32px, 4vw, 64px); --studio-lead: clamp(60px, 8vw, 120px); padding-top: 0; padding-bottom: 144px; }
.draft-tag { font-family: var(--mono); font-size: 10px; color: #a4a49d; border: 1px solid #50504b; border-radius: 20px; padding: 4px 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.studio-story { position: relative; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)) 8px; padding-top: var(--studio-breathing); }
.studio-scene { --studio-columns: 17.1529411765; --studio-offset: 4.2524005487; --studio-grid-x: calc(100vw * 62 / 1458); --studio-grid-y: calc(100vw * -6 / 1458); --studio-cell: calc(100vw * 85 / 1458); --scene-height: calc(var(--studio-cell) * 5.4); position: relative; height: var(--scene-height); color: var(--paper); isolation: isolate; }
.studio-title { position: absolute; top: calc(var(--studio-cell) * 2.05); left: 0; right: 0; height: calc(var(--studio-cell) * 1.87); z-index: 2; display: grid; place-items: center; font-size: var(--about-title-size); letter-spacing: -.015em; text-align: center; pointer-events: none; }
.studio-title-label { font: inherit; line-height: inherit; letter-spacing: inherit; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff; position: relative; background: var(--ink); width: max-content; height: calc(var(--studio-cell) * 1.87); padding: 0 .18em; white-space: pre; pointer-events: auto; cursor: default; }
.studio-title-char { display: inline-block; text-align: center; white-space: pre; }
.studio-grid { --grid-overlap: 400px; --grid-step: var(--studio-cell); --grid-before: calc(var(--studio-lead) + var(--studio-breathing)); position: absolute; inset: calc(-1 * var(--grid-before)) 0 calc(0px - var(--grid-overlap)); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--studio-lead), #000 calc(var(--grid-fade-start, var(--scene-height)) + var(--grid-before)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--studio-lead), #000 calc(var(--grid-fade-start, var(--scene-height)) + var(--grid-before)), transparent 100%); }
.studio-story:not(.is-enhanced) .studio-grid { background: linear-gradient(to right, #ffffff38 1px, transparent 1px), linear-gradient(to bottom, #ffffff38 1px, transparent 1px); background-size: var(--studio-cell) var(--studio-cell); background-position: var(--studio-grid-x) calc(var(--studio-grid-y) + var(--grid-before)); mix-blend-mode: difference; }
.studio-story:not(.is-enhanced) .studio-line { display: none; }
.studio-line { position: absolute; display: block; background: #ffffff48; opacity: calc(.2 + var(--line-progress, 1) * .8); transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s; }
.studio-line.is-vertical { background: linear-gradient(to bottom, #11111080 0 var(--studio-lead), #ffffff48 var(--studio-lead) 100%); left: var(--line-position); top: 0; width: 1px; height: 100%; transform: scaleY(var(--line-progress, 1)); transform-origin: top; }
.studio-line.is-horizontal { top: calc(var(--line-row) * var(--grid-step) + var(--studio-grid-y) + var(--grid-before)); left: 0; height: 1px; width: 100%; transform: scaleX(var(--line-progress, 1)); transform-origin: left; }
.is-enhanced .studio-line { --line-progress: 0; }
.studio-hotspot { position: absolute; z-index: 1; }
.is-enhanced .studio-hotspot { opacity: var(--hotspot-visibility, 0); }
.studio-hotspot-photo { left: calc(100vw * 402 / 1458); top: calc(var(--studio-cell) * 4 + var(--studio-grid-y)); }
.studio-hotspot-video { left: calc(100vw * 147 / 1458); top: calc(100vw * -6 / 1458); }
.studio-hotspot-web { left: calc(100vw * 997 / 1458); top: calc(100vw * 79 / 1458); }
.studio-word { display: grid; grid-auto-flow: column; grid-auto-columns: var(--studio-cell); font-size: calc(var(--studio-cell) * 1.4); letter-spacing: 0; line-height: 1; }
.studio-letter { display: grid; place-items: center; width: var(--studio-cell); height: var(--studio-cell); overflow: hidden; }
.creative { position: relative; z-index: 1; padding-top: 0; }
.people-deck { position: relative; width: min(100%, 1120px); height: clamp(560px, calc(47vw + 160px), 720px); margin: 0 auto; overflow: clip; isolation: isolate; }
.creative-title { position: absolute; inset: 0; display: grid; place-items: start center; padding-top: clamp(115px, 12vw, 180px); font-size: var(--about-title-size); font-weight: 400; letter-spacing: -.015em; line-height: .97; text-align: center; pointer-events: none; }
.creative-title span { white-space: nowrap; }
.creative-title-fill { z-index: 0; color: var(--paper); }
.creative-title-outline { z-index: 4; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.4px #fff; mix-blend-mode: difference; clip-path: inset(100%); transition: opacity .18s, z-index 0s; }
.creative-clip { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.person-card:has(.person-select:focus-visible) ~ .creative-title-outline { opacity: 0; z-index: 0; transition: opacity .18s, z-index 0s .18s; }
@media (hover: hover) and (pointer: fine) {
  .person-card:hover ~ .creative-title-outline { opacity: 0; z-index: 0; transition: opacity .18s, z-index 0s .18s; }
}
.person-card { --person-lift-x: 12px; --person-lift-angle: 1deg; position: absolute; top: 48px; left: 50%; width: min(40%, 400px); transform: translate(-105%, 28px) rotate(-7deg); z-index: 1; transition: z-index 0s .18s; }
.person-card:nth-of-type(2) { --person-lift-x: 0px; --person-lift-angle: 0deg; transform: translate(-50%, 0) rotate(0deg); z-index: 2; }
.person-card:nth-of-type(3) { --person-lift-x: -12px; --person-lift-angle: -1deg; transform: translate(5%, 28px) rotate(7deg); }
.person-card.is-active { z-index: 3; }
.person-sheet { background: var(--paper); color: var(--ink); padding: 10px; box-shadow: 0 14px 35px #0006; pointer-events: none; transform: translate(0, 0) rotate(0deg) scale(1); transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s; }
.person-card.is-active .person-sheet { transform: translate(var(--person-lift-x), -8px) rotate(var(--person-lift-angle)) scale(1.01); box-shadow: 0 22px 46px #0009; }
.person-select { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; }
.person-select:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
.person-visual { position: relative; aspect-ratio: .9; overflow: hidden; background: #252622; }
.person-visual img { width: 100%; height: 100%; object-fit: cover; }



.focus-frame { position: absolute; left: 25%; top: 22%; width: 50%; height: 50%; border: 1px solid #fff; }
.focus-frame::before, .focus-frame::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid white; }
.focus-frame::before { top: -7px; left: -7px; }
.focus-frame::after { bottom: -7px; right: -7px; }
.image-note { position: absolute; left: 20px; bottom: 15px; background: var(--ink); color: var(--paper); padding: 4px 7px; font-size: 9px; }
.person-visual .image-note { left: auto; right: 10px; bottom: 12px; font-size: 8px; }
.person-grid-tiles { position: absolute; inset: 0; background: repeating-linear-gradient(to right, transparent 0, transparent calc(33.333% - 1px), #ffffff66 calc(33.333% - 1px), #ffffff66 33.333%), repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #ffffff66 calc(25% - 1px), #ffffff66 25%); }
.person-info { padding: 2px 10px 18px; }
.person-title { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 8px; gap: 12px; }
.person-title h4 { font-size: clamp(23px, 2.4vw, 34px); font-weight: 400; margin: 0; letter-spacing: -.05em; }
.person-info .draft-tag { color: #686a60; border-color: #b7b9ae; font-size: 8px; }
.person-role { font-family: var(--mono); font-size: 10px; color: #626558; margin-bottom: 10px; }
.people-switches { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.people-switch { background: transparent; color: #b7b9ad; border: 1px solid #505348; border-radius: 30px; padding: 12px 18px; }
.people-switch span { padding-right: 10px; opacity: .55; }
.people-switch[aria-pressed='true'] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.person-panel { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; width: min(100%, 900px); margin: 40px auto 0; padding-top: 28px; border-top: 1px solid var(--dark-line); }
.person-panel h4 { font-size: clamp(28px, 3vw, 42px); font-weight: 400; letter-spacing: -.04em; margin: 12px 0; }
.person-panel-role { font-family: var(--mono); font-size: 11px; color: #b1b2a8; line-height: 1.6; }
.person-description { color: #b0b1a7; font-size: 16px; line-height: 1.6; margin-bottom: 18px; }
.strength-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 18px; }
.strength-tags span { font-size: 10px; border: 1px solid #64655b; border-radius: 20px; padding: 5px 9px; }
.content-note { font-family: var(--mono); font-size: 10px; line-height: 1.6; margin-top: 30px; color: #68695f; max-width: 700px; }
.about .content-note { color: #9d9e93; }
.projects { padding-top: 42px; }
.projects .section-heading { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; margin: 16px 0 48px; }
.projects .section-heading h2 { font-size: clamp(58px, 6.5vw, 104px); }
.project-row { display: grid; grid-template-columns: 1fr 2.25fr 1fr; gap: 25px; position: relative; align-items: start; padding: 26px 0; border-top: 1px solid #b7b9af; min-height: 250px; }
.project-row:last-child { border-bottom: 1px solid #b7b9af; }
.project-row-title { font-size: clamp(17px, 1.6vw, 25px); letter-spacing: -.04em; line-height: 1.1; font-weight: 400; margin: 0 0 12px; }
.project-row-label { display: block; color: #74756b; font-family: var(--mono); font-size: 9px; }
.project-row-image { aspect-ratio: 1.86; overflow: hidden; background: #d5d7ce; }
.project-row-image img { height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.project-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #dee0d6; color: var(--ink); text-align: center; }
.project-placeholder-title { font-size: clamp(60px, 8vw, 144px); font-weight: 500; letter-spacing: -.065em; line-height: .95; }
.project-placeholder .meta { color: #65665d; }
.project-row:hover .project-row-image img { transform: scale(1.045); }
.project-row-type { display: flex; flex-direction: column; align-items: end; gap: 12px; text-align: right; height: 100%; }
.project-row-arrow { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #b9bab0; border-radius: 50%; font-size: 18px; margin-top: auto; transition: background .2s, color .2s; }
.project-row:hover .project-row-arrow { background: var(--ink); color: var(--paper); }
.contact { color: var(--paper); background: var(--ink); padding-bottom: 80px; }
.contact .section-label { border-color: var(--dark-line); }
.contact h2 { font-size: clamp(65px, 11vw, 180px); margin: 90px 0 70px; }
.contact-bottom { display: flex; justify-content: space-between; align-items: end; gap: 35px; }
.contact-bottom > p { font-size: 18px; line-height: 1.5; letter-spacing: -.025em; }
.contact-bottom > div { display: flex; flex-direction: column; gap: 12px; }
.contact-placeholder { font-size: clamp(19px, 2.2vw, 35px); padding-bottom: 10px; border-bottom: 1px solid #737469; letter-spacing: -.04em; display: flex; align-items: center; gap: 40px; }
.footer-bottom { background: var(--ink); color: var(--paper); padding: 30px var(--gutter); display: flex; gap: 30px; justify-content: space-between; align-items: center; border-top: 1px solid var(--dark-line); }
.noscript-note { padding: 30px; background: var(--paper); color: var(--ink); position: fixed; bottom: 0; z-index: 30; width: 100%; font-size: 15px; }

/* Projektunterseite: Bildexpansion und eine versetzte, redaktionelle Bilderstrecke. */
.case-intro { padding: 35px var(--gutter) 45px; }
.case-breadcrumb { display: flex; justify-content: space-between; gap: 25px; }
.case-title { font-size: clamp(66px, 10vw, 170px); margin-top: 55px; max-width: 1200px; }
.case-meta { margin-top: 35px; display: flex; justify-content: space-between; align-items: end; gap: 25px; }
.case-meta p { font-size: 17px; line-height: 1.5; max-width: 360px; }
.case-tags { display: flex; gap: 22px; }
.case-hero { width: 100%; height: min(78vw, 90svh); max-height: 1000px; overflow: hidden; background: #cecec7; }
.case-hero img { width: 100%; height: 100%; object-fit: cover; }
.case-hero.is-placeholder { height: auto; max-height: none; }
.case-hero.is-placeholder .project-placeholder { min-height: clamp(280px, 48vw, 720px); padding: 40px var(--gutter); }
.case-hero .project-placeholder-title { font-size: clamp(90px, 20vw, 320px); }
.case-description { margin: 90px var(--gutter); display: grid; grid-template-columns: 1fr 2fr; gap: 10%; }
.case-description > div { max-width: 730px; }
.case-description h2 { font-size: clamp(30px, 4vw, 60px); margin-bottom: 25px; }
.case-description p { font-size: 17px; line-height: 1.6; max-width: 590px; }
.case-stages { margin: 50px var(--gutter) 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 12%; }
.case-stage { border-top: 1px solid var(--line); padding-top: 22px; }
.case-stage h2 { font-size: clamp(28px, 3.2vw, 47px); margin: 20px 0; max-width: 450px; }
.case-stage p { font-size: 15px; line-height: 1.65; max-width: 440px; color: #5b5e52; }
.case-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 35px; margin: 0 var(--gutter); align-items: center; }
.case-gallery figure:nth-child(1) { grid-column: 2 / 10; }
.case-gallery figure:nth-child(2) { grid-column: 5 / 13; margin-top: 20px; }
.case-gallery figure:nth-child(3) { grid-column: 1 / 7; margin-top: 20px; }
.case-gallery figure img { height: auto; }
.case-gallery figcaption { margin-top: 12px; color: #65675b; }
.case-gallery-featured { padding-top: 48px; padding-bottom: 64px; }
.case-outcome { padding: 90px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 12%; }
.case-outcome h2 { font-size: clamp(40px, 5.5vw, 90px); }
.case-outcome p { font-size: 18px; line-height: 1.6; margin-top: 25px; max-width: 520px; }
.case-next { padding: 50px var(--gutter) 70px; background: #dfe1d7; }
.case-next > a { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 10%; }
.case-next h2 { font-size: clamp(42px, 6vw, 95px); margin: 20px 0 30px; }
.case-next img { aspect-ratio: 1.7; object-fit: cover; transition: transform .5s; }
.case-next-visual { overflow: hidden; }
.case-next-visual .project-placeholder { aspect-ratio: 1.7; }
.case-next > a:hover img { transform: rotate(-2deg); }
.case-next .text-link { display: inline-flex; }
.case-not-found { min-height: 70vh; padding: 100px var(--gutter); }
.case-not-found h1 { font-size: clamp(50px, 9vw, 120px); margin-bottom: 30px; }
.case-not-found p { margin-bottom: 30px; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
::view-transition-group(project-cover) { animation-duration: .65s; animation-timing-function: cubic-bezier(.2,.7,.15,1); }

@media (min-width: 1800px) { .hero-composition { height: 650px; } .section-pad, .hero, .site-header, .footer-bottom, .case-intro { padding-left: max(var(--gutter), calc((100vw - 1680px) / 2)); padding-right: max(var(--gutter), calc((100vw - 1680px) / 2)); } }
@media (max-width: 1050px) {
  .header-note { margin-left: 2vw; }
  .hero { min-height: 700px; }
  .hero-composition { min-height: 340px; }

  .project-row { grid-template-columns: 1fr 2.5fr .8fr; min-height: 210px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 20px; }
  .site-header { padding-top: 20px; padding-bottom: 20px; gap: 15px; flex-wrap: wrap; }
  .header-note { display: none; }
  .site-header nav { font-size: 11px; gap: 16px; }
  .site-header nav a { gap: 4px; }
  .hero { min-height: 660px; min-height: calc(100svh - 70px); padding-top: 20px; padding-bottom: 30px; }

  .hero-composition { min-height: 240px; height: 65vw; margin-top: 45px; margin-bottom: 35px; }

  .section-pad { padding-top: 28px; padding-bottom: 60px; }
  .section-label { font-size: 9px; padding-bottom: 20px; }
  .section-label > :last-child { text-align: right; max-width: 135px; }
  .section-number { padding-right: 10px; }
  .section-heading { margin: 40px 0 30px; display: block; }
  .section-heading h2 { font-size: clamp(65px, 17vw, 110px); }
  .section-heading p { font-size: 13px; margin-top: 25px; }
  .featured.section-pad { padding-top: 52px; padding-bottom: 56px; }
  .featured .section-heading { grid-template-columns: 1fr; gap: 24px; margin: 0 0 36px; }
  .featured .section-heading h2 { font-size: clamp(36px, 10vw, 64px); }
  .featured .section-heading p { font-size: 13px; margin-top: 0; }
  .feature-stage { height: clamp(340px, 76vw, 460px); }
  .feature-card { top: 43%; width: 78%; }
  .feature-title { font-size: clamp(43px, 11vw, 76px); bottom: 86px; left: 24px; -webkit-text-stroke-width: 1px; }
  .feature-open { bottom: 24px; right: 24px; padding: 10px 14px; gap: 16px; font-size: 11px; }
  .about.section-pad { --studio-breathing: 32px; --studio-lead: 64px; padding-top: 0; padding-bottom: 96px; }
  .studio-story { margin-bottom: 8px; }
  .creative-title { padding-top: 108px; }
  .creative-title-outline { -webkit-text-stroke-width: 1px; }
  .people-deck { height: clamp(430px, calc(75vw + 170px), 700px); }
  .person-card { top: 36px; width: 66%; transform: translate(-75%, 20px) rotate(-4deg); }
  .person-card:nth-of-type(2) { transform: translate(-50%, 0) rotate(0deg); }
  .person-card:nth-of-type(3) { transform: translate(-25%, 20px) rotate(4deg); }
  .person-sheet { padding: 7px; }
  .person-info { padding: 2px 5px 14px; }
  .person-title { margin-top: 12px; gap: 5px; flex-wrap: wrap; }
  .person-title h4 { font-size: 24px; }
  .person-role { font-size: 8px; line-height: 1.5; }
  .person-visual .image-note { bottom: 34px; right: 8px; font-size: 7px; }
  .people-switches { gap: 6px; margin-top: 8px; }
  .people-switch { padding: 12px 10px; font-size: 9px; }
  .people-switch span { padding-right: 5px; }
  .person-panel { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; padding-top: 24px; }
  .person-panel h4 { font-size: 32px; }
  .person-description { font-size: 14px; }
  .content-note { font-size: 9px; }
  .projects .section-heading { grid-template-columns: 1fr; gap: 24px; margin: 12px 0 32px; }
  .projects .section-heading h2 { font-size: clamp(36px, 9.5vw, 64px); }
  .projects .section-heading p { margin-top: 0; }
  .project-row { grid-template-columns: 1fr auto; gap: 18px 10px; padding: 20px 0; min-height: 0; }
  .project-row-image { grid-row: 2; grid-column: 1 / -1; aspect-ratio: 1.5; }
  .project-row-title { font-size: 22px; margin-bottom: 5px; }
  .project-row-type { justify-content: start; gap: 8px; }
  .project-row-type > .meta { font-size: 9px; }
  .project-row-arrow { width: 28px; height: 28px; font-size: 14px; margin: 0; }
  .contact h2 { font-size: clamp(54px, 12vw, 90px); margin: 55px 0 40px; }
  .contact-bottom { display: block; }
  .contact-bottom > p { font-size: 16px; margin-bottom: 30px; }
  .contact-placeholder { justify-content: space-between; font-size: 23px; gap: 15px; }
  .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 10px; }
  .footer-bottom .navbar-logo { grid-column: 1 / -1; }
  .footer-bottom > a.meta { justify-self: end; text-align: right; }
  .footer-bottom .meta { font-size: 9px; }
  .case-intro { padding-top: 25px; padding-bottom: 30px; }
  .case-breadcrumb { font-size: 9px; }
  .case-title { font-size: clamp(56px, 13vw, 85px); margin-top: 45px; }
  .case-meta { display: block; margin-top: 25px; }
  .case-meta p { font-size: 15px; }
  .case-tags { gap: 20px; margin-top: 25px; }
  .case-tags .meta { font-size: 9px; }
  .case-hero { height: auto; max-height: none; }
  .case-hero img { height: auto; object-fit: contain; }
  .case-description { display: block; margin: 50px var(--gutter); }
  .case-description > span { display: block; margin-bottom: 25px; }
  .case-description h2 { font-size: 34px; }
  .case-description p { font-size: 15px; }
  .case-stages { grid-template-columns: 1fr; gap: 40px; margin: 45px var(--gutter); }
  .case-stage h2 { font-size: 32px; }
  .case-stage p { font-size: 14px; }
  .case-gallery { gap: 30px 12px; }
  .case-gallery figure:nth-child(1) { grid-column: 1 / 12; }
  .case-gallery figure:nth-child(2) { grid-column: 3 / 13; margin-top: 0; }
  .case-gallery figure:nth-child(3) { grid-column: 1 / 12; margin-top: 0; }
  .case-gallery figcaption { font-size: 9px; }
  .case-outcome { padding-top: 55px; padding-bottom: 55px; grid-template-columns: 1fr; gap: 20px; }
  .case-outcome h2 { font-size: 44px; }
  .case-outcome p { font-size: 15px; margin: 0; }
  .case-next { padding-top: 35px; padding-bottom: 45px; }
  .case-next > a { grid-template-columns: 1fr; gap: 25px; }
  .case-next h2 { font-size: 50px; }
}
@media (max-width: 380px) { .site-header { gap: 15px; } .site-header nav { justify-content: space-between; width: 100%; } .hero { min-height: 660px; } }
@media (prefers-reduced-motion: reduce) {
  .feature-card, .person-card { transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  ::view-transition-old(*), ::view-transition-new(*), ::view-transition-group(*) { animation: none !important; }
}

/* Beide Bilder teilen dieselbe Bildfläche; nur das obere Bild wird ausgestanzt. */
.hero.hero { background: #000; }
.hero-composition.hero-reveal { width: calc(100% + 2 * var(--gutter)); min-height: 0; height: auto; aspect-ratio: 1474.02 / 680.31; flex-shrink: 0; margin: auto calc(-1 * var(--gutter)); background: #000; }
.hero-reveal-stage { display: block; width: 100%; height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; }
.hero-reveal-handle { fill: transparent; stroke: #eee; stroke-width: 1.25; vector-effect: non-scaling-stroke; cursor: grab; touch-action: none; outline: none; }
.hero-reveal-handle:active, .hero-reveal-handle.is-dragging { cursor: grabbing; }
.hero-reveal-handle:focus-visible { stroke: #e6ff72; stroke-width: 2.5; }
@media (max-width: 650px) {
  .hero-composition.hero-reveal { width: calc(100% + 2 * var(--gutter)); margin: 24px calc(-1 * var(--gutter)); aspect-ratio: 623.62 / 680.31; }
}

@media (min-width: 1800px) {
  .hero .hero-reveal { width: 100vw; margin-left: calc(-1 * max(var(--gutter), (100vw - 1680px) / 2)); margin-right: calc(-1 * max(var(--gutter), (100vw - 1680px) / 2)); }
}

.site-header .navbar-logo, .site-footer .navbar-logo { display: block; width: clamp(180px, 23vw, 300px); flex-shrink: 0; }
.navbar-logo img { width: 100%; height: auto; }
@media (max-width: 650px) {
  .site-header .navbar-logo, .site-footer .navbar-logo { width: clamp(155px, 43vw, 220px); }
  .hero.hero { min-height: 0; padding-top: 0; padding-bottom: 20px; }
  .hero-composition.hero-reveal { margin-top: 0; margin-bottom: 0; }
}



/* Wiriehorn: kompakte Bildgruppen, Materialfarben und direkte Interaktionen. */
/* Gemeinsamer Einstieg für die Projektgeschichten von Wiriehorn und Rigi. */
.project-story-page .case-intro { background: #171816; color: var(--paper); padding-bottom: 46px; }
.project-story-page .case-title { font-size: clamp(58px, 8vw, 126px); }
.project-story-page .case-meta p { color: #d0d2c8; }
.project-story-page .case-hero { width: auto; height: auto; max-height: none; padding: 0 var(--gutter) 40px; background: #171816; }
.project-story-page .case-hero img { height: auto; max-height: 580px; object-fit: contain; }
.journey-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 24px var(--gutter); border-bottom: 1px solid var(--line); }
.journey-nav a { font-size: 12px; padding: 8px 0; }
.journey-nav span { opacity: .6; font-family: var(--mono); margin-right: 5px; }
.journey-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.journey-step { --step-bg: #f0efe9; --step-ink: #20231d; display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 3vw; padding: 54px var(--gutter); position: relative; background: var(--step-bg); color: var(--step-ink); }
.journey-step:nth-child(2), .journey-step:nth-child(10) { --step-bg: #e9d7d4; }
.journey-step:nth-child(3), .journey-step:nth-child(6) { --step-bg: #dce3d4; }
.journey-step:nth-child(4) { --step-bg: #242722; --step-ink: #f0efe9; }
.journey-step:nth-child(5) { --step-bg: #ece7dc; }
.journey-step:nth-child(7) { --step-bg: #d9e5e9; }
.journey-step:nth-child(8) { --step-bg: #d1d9d1; }
.journey-step:nth-child(9) { --step-bg: #242722; --step-ink: #f0efe9; }
.journey-marker { align-self: start; position: sticky; top: 30px; display: flex; flex-direction: column; gap: 12px; }
.journey-marker > :first-child { font-size: 52px; letter-spacing: -.06em; }
.journey-marker .meta { text-transform: uppercase; opacity: .75; }
.journey-content { min-width: 0; width: 100%; max-width: 1120px; }
.journey-copy { display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; gap: 36px; margin-bottom: 28px; }
.journey-copy h2 { font-size: clamp(30px, 3.1vw, 48px); text-wrap: balance; }
.journey-copy p { max-width: 560px; font-size: 15px; line-height: 1.65; }
.journey-step:first-child .journey-copy { margin-bottom: 0; }
.journey-content img { height: auto; }
.journey-content figcaption { margin-top: 9px; color: inherit; opacity: .78; font: 10px/1.55 var(--mono); }
.journey-sketches { display: grid; grid-template-columns: 1fr 1fr .5fr; gap: 20px; align-items: start; max-width: 880px; }
.journey-sketches > :nth-child(2) { padding-top: 24px; }
.journey-phone { width: 100%; max-width: 140px; justify-self: center; }
.journey-report { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: start; }
.journey-report img { aspect-ratio: 1.5; object-fit: cover; }
.journey-report .journey-wide { grid-column: span 2; width: 60%; justify-self: center; }
.journey-report .journey-wide img { aspect-ratio: 1.5; object-fit: contain; }
.journey-evolution, .journey-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: start; }
.journey-evolution img { aspect-ratio: 2; object-fit: contain; }
.journey-details { margin-top: 24px; }
.journey-details img { aspect-ratio: 1.78; object-fit: contain; }
.journey-interaction { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; max-width: 950px; }
.journey-operation { display: grid; grid-template-columns: .55fr 1.45fr; gap: 36px; align-items: center; max-width: 880px; }
.journey-video-wrap { position: relative; }
.journey-content video { display: block; width: 100%; background: #181916; }
.journey-video-toggle { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f0efe9ee; color: #20231d; font-size: 18px; opacity: 0; transition: opacity .2s; }
.journey-video-wrap:hover .journey-video-toggle, .journey-video-toggle:focus-visible, .journey-video-toggle.is-paused { opacity: 1; }
.season-figure { max-width: 1050px; }
.season-compare { position: relative; overflow: hidden; background: #d9e5e9; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.season-compare > img { width: 100%; aspect-ratio: 2270 / 1106.17; object-fit: fill; pointer-events: none; }
.season-compare .season-winter { position: absolute; inset: 0; height: 100%; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.season-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; }
.season-divider > span { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; color: #171816; background: #f0efe9; border: 1px solid #17181640; font-size: 24px; box-shadow: 0 2px 12px #0003; }
.season-divider:focus-visible { outline: none; background: #171816; }
.season-divider:focus-visible > span { outline: 3px solid #171816; outline-offset: 3px; }
.season-label { position: absolute; top: 12px; padding: 7px 10px; background: #f0efe9ed; color: #171816; font: 11px var(--mono); pointer-events: none; }
.season-label.winter { left: 12px; } .season-label.summer { right: 12px; }
.journey-embed iframe { display: block; width: 100%; height: clamp(350px, 40vw, 560px); border: 0; background: #d1d9d1; }
.journey-embed .text-link { margin-top: 12px; font-size: 11px; width: fit-content; }
.journey-step:last-child .journey-content > figure { max-width: 690px; }
.journey-end { padding: 60px var(--gutter); background: #171816; color: var(--paper); }
.journey-end h2 { margin: 25px 0 32px; font-size: clamp(42px,5vw,76px); }
.journey-end .text-link { display: inline-flex; margin: 0 35px 20px 0; }
@media (max-width: 900px) {
 .journey-step { grid-template-columns: 65px minmax(0,1fr); gap: 22px; padding-top: 42px; padding-bottom: 42px; }
 .journey-marker > :first-child { font-size: 40px; }
 .journey-copy { grid-template-columns: 1fr; gap: 18px; }
 .journey-copy h2 { max-width: 650px; }
}
@media (max-width: 600px) {
 .journey-step { display: block; padding: 34px var(--gutter); }
 .journey-marker { position: static; flex-direction: row; align-items: center; margin-bottom: 20px; }
 .journey-marker > :first-child { font-size: 32px; }
 .journey-copy { margin-bottom: 24px; }
 .journey-copy p { font-size: 14px; }
 .journey-nav { gap: 2px 18px; }
 .journey-sketches { gap: 12px; grid-template-columns: 1fr 1fr; }
 .journey-phone { grid-column: 1 / -1; width: 30%; max-width: 115px; }
 .journey-sketches > :nth-child(2) { padding-top: 0; }
 .journey-report { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
 .journey-report .journey-wide { width: 64%; }
 .journey-evolution, .journey-details { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
 .journey-evolution > :last-child, .journey-details > :last-child { grid-column: 1 / -1; width: 68%; justify-self: center; }
 .journey-interaction, .journey-operation { grid-template-columns: 1fr; gap: 20px; }
 .journey-interaction > :last-child { width: 70%; justify-self: end; }
 .journey-operation > :first-child { width: 55%; }
 .journey-content figcaption { font-size: 9px; }
 .season-label { font-size: 9px; top: 8px; padding: 5px; }
 .season-divider > span { width: 40px; height: 40px; font-size: 21px; }
 .journey-end { padding-top: 40px; padding-bottom: 40px; }
}
@media (hover: none) { .journey-video-toggle { opacity: .85; } }
.journey-embed-start { position: relative; display: block; padding: 0; width: 100%; height: clamp(350px, 40vw, 560px); background: #d1d9d1; overflow: hidden; }
.journey-embed-start img { width: 100%; height: 100%; object-fit: cover; }
.journey-embed-start > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 16px 22px; border-radius: 40px; background: #f0efe9; color: #171816; font-size: 14px; white-space: nowrap; box-shadow: 0 4px 24px #0003; }

/* Rigi nutzt das gemeinsame Kapitelraster; Filmstills bleiben unbeschnitten. */
.rigi-page .journey-step:first-child .journey-copy { margin-bottom: 28px; }
.rigi-film-gallery img { aspect-ratio: 16 / 9; object-fit: contain; }
.rigi-photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rigi-photo-gallery > figure:first-child, .rigi-photo-gallery > figure:last-child { grid-column: 1 / -1; }
.rigi-photo-gallery img { aspect-ratio: auto; object-fit: contain; }
.rigi-film-player { margin-bottom: 28px; }
.rigi-film-player video { aspect-ratio: 16 / 9; }
.rigi-photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 180px; aspect-ratio: 3.4; padding: 32px 16px; background: #f0efe955; border: 1px solid #20231d26; text-align: center; }
.rigi-photo-placeholder > :first-child { font-size: clamp(32px, 4vw, 64px); letter-spacing: -.065em; line-height: 1; }
@media (max-width: 600px) {
  .rigi-film-gallery, .rigi-photo-gallery { grid-template-columns: 1fr; }
  .rigi-photo-placeholder { min-height: 160px; aspect-ratio: auto; }
}

/* Gemeinsame Typografie für Texte, Bedienelemente und Titelgrafiken. */
.creative-title { font-family: var(--title-font); font-weight: 400; }
.studio-word { font-family: var(--title-font); font-weight: 700; color: var(--pink); }
p { font-family: var(--sans); font-optical-sizing: auto; font-weight: 300; font-style: normal; }
h1 .serif, h2 .serif, h3 .serif { font-family: inherit; font-style: inherit; }

button:not(.studio-title-label), .text-link, .feature-open, a[role="button"] { font-weight: 300; }

@media (max-width: 700px) {
  .about.section-pad { --about-title-size: clamp(38px, 12vw, 84px); }
  .studio-scene { --studio-columns: 12; --studio-offset: 0; --studio-grid-x: 0px; --studio-grid-y: 0px; --studio-cell: calc(100vw / 12); --scene-height: calc(var(--studio-cell) * 6.8); }
  .studio-title { top: calc(var(--studio-cell) * 2.3); right: 0; height: calc(var(--studio-cell) * 2.4); font-size: var(--about-title-size); }
  .studio-title-label { width: auto; height: auto; padding: .18em .15em; }
  .studio-hotspot-photo { left: calc(var(--studio-cell) * 4); top: calc(var(--studio-cell) * 5); }
  .studio-hotspot-video { left: calc(var(--studio-cell) * 2); top: 0; }
  .studio-hotspot-web { left: calc(var(--studio-cell) * 8); top: var(--studio-cell); }
}
@media (min-width: 1800px) {
  .studio-story { width: 100vw; margin-left: calc(-1 * max(var(--gutter), (100vw - 1680px) / 2)); margin-right: calc(-1 * max(var(--gutter), (100vw - 1680px) / 2)); }
}

/* Desktop-Masse aus der Referenz (1458 px): Raster 85 px, erster Rand bei 62 px. */
@media (min-width: 701px) {
  .studio-hotspot-photo { top: calc(var(--studio-cell) * 5 + var(--studio-grid-y)); }
  .studio-scene { --scene-height: calc(var(--studio-cell) * 6.4); }
  .people-deck { width: 100%; height: clamp(640px, 55vw, 860px); }
  .person-card { width: min(33%, 480px); }
  .creative-title { place-items: center; padding: 0 0 60px; }
}

.studio-letter svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Das Raster beginnt auf dem hellen Abschnitt und wechselt am dunklen Rand die Farbe. */
.featured.section-pad { padding-bottom: clamp(120px, 12vw, 180px); }
.studio-line.is-horizontal { background: linear-gradient(to bottom, #11111080 0 var(--line-dark-height, 0px), #ffffff48 var(--line-dark-height, 0px) 100%); }

.studio-title-label > span { display: inline-flex; justify-content: center; }

.studio-title-change { display: inline-flex; justify-content: center; }

/* Die schwarze Rasteraussparung folgt der aktuellen Wortbreite. */
.studio-title-label::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: max(100%, var(--title-hit-width, 100%)); transform: translateX(-50%); }

.portrait-beni, .portrait-rebecca, .portrait-mathis { object-position: center 60%; }

/* Wiriehorn: monochrome Abstufungen, Farbe ausschliesslich in den Projektmedien. */
.wiriehorn-page .journey-step { --step-bg: var(--paper); --step-ink: var(--ink); }
.wiriehorn-page .journey-step:nth-child(2), .wiriehorn-page .journey-step:nth-child(6), .wiriehorn-page .journey-step:nth-child(10) { --step-bg: #dededb; }
.wiriehorn-page .journey-step:nth-child(3), .wiriehorn-page .journey-step:nth-child(7) { --step-bg: #e9e9e6; }
.wiriehorn-page .journey-step:nth-child(8) { --step-bg: #d3d3d0; }
.wiriehorn-page .journey-step:nth-child(4), .wiriehorn-page .journey-step:nth-child(9) { --step-bg: #242424; --step-ink: var(--paper); }
.wiriehorn-page .season-compare, .wiriehorn-page .journey-embed iframe, .wiriehorn-page .journey-embed-start { background: #dededb; }
.wiriehorn-page .journey-image { display: block; overflow: hidden; }
.wiriehorn-page .journey-image img { transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .5s; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .wiriehorn-page .journey-image:hover img { transform: scale(1.035); filter: contrast(1.025); }
}

#contact-title { color: var(--pink); }

.person-email { display: block; width: fit-content; margin-top: 8px; text-align: left; color: var(--pink); font-weight: 300; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.person-email:hover { color: var(--pink); }

@media (min-width: 701px) {
  .person-panel { row-gap: 8px; }
  .person-panel > div { display: contents; }
  .person-heading { grid-area: 1 / 1; }
  .person-panel .person-description { grid-area: 1 / 2; margin-bottom: 0; }
  .person-panel .person-email { grid-area: 2 / 1; margin-top: 0; align-self: center; }
  .person-panel .strength-tags { grid-area: 2 / 2; margin-bottom: 0; align-self: center; }
}

@media (max-width: 700px) {
  .creative-title { visibility: hidden; }
}

/* Kontaktbereich und Abschluss sind auf allen Seiten identisch. */
.site-footer { background: var(--ink); color: var(--paper); }
.contact-page { background: var(--ink); color: var(--paper); }
.contact-page-main { background: var(--ink); color: var(--paper); }
.contact-intro { padding-top: clamp(48px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.contact-intro h1 { font-size: clamp(58px, 10vw, 150px); margin: 36px 0 64px; max-width: 1100px; }
.contact-intro h1 span { color: var(--pink); }
.contact-form-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(40px, 7vw, 110px); }
.contact-form-copy h2 { font-size: clamp(28px, 3vw, 44px); margin-bottom: 22px; }
.contact-form-copy p { max-width: 350px; font-size: 16px; line-height: 1.7; color: #c1c1b8; }
.contact-direct { display: inline-block; margin-top: 28px; font-size: 15px; font-weight: 300; color: var(--pink); text-underline-offset: 5px; text-decoration: underline; overflow-wrap: anywhere; }
.contact-form { display: grid; gap: 26px; min-width: 0; scroll-margin-top: 32px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-field { display: grid; gap: 10px; min-width: 0; }
.form-field label { font-size: 13px; font-weight: 300; }
.form-field label > span:not(.muted) { color: var(--pink); }
.form-field input, .form-field textarea { width: 100%; min-width: 0; border: 1px solid #66665e; border-radius: 0; background: #ffffff04; color: var(--paper); padding: 14px 16px; font: 300 16px/1.5 var(--sans); }
.form-field textarea { resize: vertical; min-height: 160px; }
.form-field input:focus-visible, .form-field textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.form-note, .form-status { font-size: 12px; line-height: 1.6; color: #c1c1b8; }
.form-submit { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 22px; background: var(--pink); color: var(--ink); border-radius: 28px; width: fit-content; font-size: 15px; }
.form-submit span { font-size: 22px; }
.form-submit:disabled { opacity: .5; cursor: not-allowed; }
.form-submit.is-success { background: transparent; border: 1px solid var(--pink); color: var(--pink); text-align: left; line-height: 1.6; cursor: default; max-width: 100%; gap: 16px; }
.form-submit.is-success::before { content: '✓'; flex: 0 0 auto; font-size: 28px; }
.form-status[data-state="success"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-status[data-state="error"] { color: #ffb0b0; }
@media (max-width: 700px) {
  .contact-form-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-intro h1 { margin-bottom: 40px; font-size: clamp(42px, 10vw, 70px); }
  .form-pair { grid-template-columns: 1fr; }
  .contact-form-copy p { max-width: none; }
}

.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.form-services { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-services legend { font: 300 13px var(--sans); }
.form-services-note { margin: 8px 0 16px; font-size: 12px; color: #c1c1b8; }
.form-service-options { display: flex; flex-wrap: wrap; gap: 10px; }
.form-service { position: relative; cursor: pointer; }
.form-service input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.form-service span { display: block; padding: 12px 20px; border: 1px solid #66665e; border-radius: 999px; font-size: 14px; font-weight: 300; transition: background-color .15s, border-color .15s, color .15s; }
.form-service:hover span { border-color: var(--pink); }
.form-service input:checked + span { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.form-service input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 4px; }

/* Eine kleine Entdeckung im Footer. Die Pause liegt in der nativen Dialog-Ebene. */
.footer-actions { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.footer-actions > a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.creative-pause-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; padding: 10px 16px; border: 1px solid #73736b; border-radius: 999px; background: transparent; white-space: nowrap; transition: color .2s, border-color .2s, background-color .2s; }
.creative-pause-trigger[hidden] { display: none; }
.creative-pause-trigger:hover { color: var(--ink); background: var(--pink); border-color: var(--pink); }
html.is-creative-paused { overflow: hidden; scrollbar-gutter: stable; }
.is-creative-paused body > .site-header, .is-creative-paused body > main, .is-creative-paused body > .site-footer { visibility: hidden; }
.creative-pause { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--paper); }
.creative-pause::backdrop { background: var(--ink); }
.creative-pause-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.creative-pause-surface { position: absolute; pointer-events: none; }
.creative-pause-piece { position: absolute; display: flex; align-items: center; justify-content: flex-start; pointer-events: none; transform-origin: center; will-change: transform; }
.creative-pause-piece > span { flex: 0 0 auto; display: block; white-space: pre; line-height: normal; }
.creative-pause-piece > img, .creative-pause-piece > canvas { display: block; flex: 0 0 auto; }
.creative-pause-extra { padding: 5px; background: var(--paper); box-shadow: 0 8px 22px #0004; }
.creative-pause-message { position: absolute; z-index: 1; top: 40%; left: 50%; translate: -50% -50%; width: min(100% - 2 * var(--gutter), 1000px); text-align: center; }
.creative-pause-message > .meta { color: #b1b1aa; margin-bottom: 28px; }
.creative-pause-message h2 { font-size: clamp(38px, 5.7vw, 88px); line-height: 1.05; letter-spacing: -.055em; text-wrap: balance; }
.creative-pause-message h2 > span { color: var(--pink); }
.creative-pause-resume { display: inline-flex; align-items: center; gap: 30px; min-height: 48px; margin-top: 38px; padding: 12px 22px; border-radius: 999px; background: var(--pink); color: var(--ink); font-size: 14px; }
.creative-pause-resume > span { font-size: 22px; }
.creative-pause-resume:hover { background: var(--paper); }
.creative-pause-resume:focus-visible { outline-color: var(--paper); }
@media (max-width: 700px) {
  .footer-bottom { grid-template-columns: 1fr auto; }
  .footer-actions { flex-direction: column; align-items: flex-end; gap: 4px; }
  .footer-actions .creative-pause-trigger { font-size: 10px; gap: 12px; padding-inline: 14px; }
  .creative-pause-message { top: 38%; }
  .creative-pause-message > .meta { margin-bottom: 22px; }
  .creative-pause-message h2 { font-size: clamp(32px, 7.5vw, 48px); }
  .creative-pause-resume { margin-top: 28px; }
}
@media (max-height: 480px) {
  .creative-pause-message { top: 34%; }
  .creative-pause-message > .meta { margin-bottom: 12px; }
  .creative-pause-message h2 { font-size: clamp(26px, 6vh, 40px); }
  .creative-pause-resume { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .creative-pause-trigger { transition: none; }
}

/* Sichtbare Hauptüberschrift als ruhige Beschriftung unter dem grafischen Hero. */
.featured .hero-site-title { margin: 0 0 20px; font: 400 18px/1.4 var(--title-font); letter-spacing: .01em; color: var(--ink); }