/* Ettmayer — Vorschlag B (eigener Entwurf, Stilrichtung: helles Studio-Portfolio) */
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #ffffff;
  --paper-2: #f3f3f2;
  --ink: #111111;
  --mute: #6f6f6f;
  --line: rgba(17, 17, 17, .14);
  --accent: #111111; /* bewusst kein Farbakzent: Ziffern, Punkte, Links in Schwarz */
  --pad: clamp(16px, 3.2vw, 40px);
  --ease: cubic-bezier(.22, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: "Geist", system-ui, sans-serif; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-variation-settings: "wght" 430; text-rendering: geometricPrecision; }
/* Überschriften wie in der Ettmayer-Preview: Geist 760, Laufweite −.065em, Zeilenhöhe .88 */
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--paper); }

/* Vorschau-Hinweis (MVP) */
.preview-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: .04em; text-align: center; padding: 6px var(--pad); }

/* Navigation: schwebende Leiste unten */
.dock { position: fixed; left: 50%; bottom: 18px; z-index: 50; transform: translateX(-50%); display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); padding: 10px 12px 10px 18px; border-radius: 999px; background: rgba(17, 17, 17, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--paper); font-size: 14px; white-space: nowrap; transition: transform .6s var(--ease); }
.dock.is-hidden { transform: translate(-50%, 140%); }
.dock .mark { display: flex; align-items: center; }
.dock .mark img { height: 30px; width: auto; }
.dock nav { display: flex; gap: clamp(10px, 2vw, 22px); }
.dock nav a { opacity: .72; transition: opacity .3s; padding: 6px 0; }
.dock nav a:hover, .dock nav a[aria-current] { opacity: 1; }
.dock .cta { background: var(--paper); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 500; }
@media (max-width: 640px) { .dock nav a.opt { display: none; } .dock { padding-left: 14px; } }

/* Hero */
.hero { position: relative; height: 500vh; }
.hero + .section { margin-top: -50vh; } /* Auslauf-Versatz der Bühne (main.js) ausgleichen */
.hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; will-change: transform; }
.wordmark { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; pointer-events: none; mix-blend-mode: multiply; }
.wordmark h1 { font-size: clamp(64px, 17vw, 270px); font-weight: 500; letter-spacing: -.055em; line-height: .85; text-align: center; }
.wordmark h1 small { display: block; text-transform: none; line-height: 1.4; font-size: clamp(13px, 1.1vw, 16px); font-weight: 400; letter-spacing: .02em; margin-top: clamp(28px, 4vw, 60px); color: var(--mute); }
.wordmark h1 .ch { display: inline-block; white-space: pre; transform: translateY(105%); opacity: 0; animation: rise 1.2s var(--ease) forwards; }
@keyframes rise { to { transform: none; opacity: 1; } }
.float { position: absolute; z-index: 1; overflow: hidden; will-change: transform; opacity: 0; animation: fade 1.4s var(--ease) forwards; }
.float img { transform: scale(1.12); transition: transform 1.2s var(--ease); }
.float:hover img, .float:focus-visible img { transform: scale(1.02); }
.float::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(17, 17, 17, .18); opacity: 0; transition: opacity .4s var(--ease); }
.float:hover::before, .float:focus-visible::before { opacity: 1; }
.float:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hover-label { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; padding: 8px 15px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.hover-label.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .float::before, .hover-label { display: none; } }
@keyframes fade { to { opacity: 1; } }
.float { left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--r); }
@media (max-width: 720px) { .float { width: calc(var(--w) * 1.9); } }

/* Hero-Logo: Unterschrift oben mittig, blendet beim Scrollen aus (main.js) */
.hero-logo { position: absolute; top: 56px; left: 50%; z-index: 3; width: clamp(84px, 9vw, 140px); margin-left: calc(clamp(84px, 9vw, 140px) / -2); pointer-events: none; }
.hero-logo img { width: 100%; height: auto; opacity: 0; animation: fade 1.2s var(--ease) 1.1s forwards; }

/* Abschnitte */
.section { padding: clamp(80px, 13vw, 180px) var(--pad); }
.label { font-size: 13px; color: var(--mute); }
.label::before { content: "("; } .label::after { content: ")"; }
.statement-body { padding-left: calc((100% - var(--pad)) / 4 + var(--pad)); } /* Textspalte wie bisher ab dem zweiten Viertel */
.statement p.big { font-size: clamp(28px, 4.4vw, 64px); line-height: .98; letter-spacing: -.055em; font-weight: 760; }
[data-words] .w { opacity: .14; transition: opacity .5s; }
[data-words] .w.on { opacity: 1; }
.slogan-sec { position: relative; z-index: 2; padding-top: 0; padding-bottom: clamp(40px, 6vw, 110px); } /* mit der Breite wachsend statt fester Bildschirmhöhe */
.slogan-sec + .statement { padding-top: 0; }
.slogan { white-space: nowrap; font-size: calc((100vw - 2 * var(--pad) - 16px) / 8.15); line-height: .88; letter-spacing: -.065em; font-weight: 760; text-transform: uppercase; }
.slogan .pt, .wordmark .pt { color: var(--accent); }
.statement .sub { margin-top: 48px; max-width: 46ch; color: var(--mute); }
@media (max-width: 720px) { .statement-body { padding-left: 0; } }

/* Projektliste */
.list-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; gap: 20px; }
.list-head h2 { font-size: clamp(40px, 8vw, 120px); font-weight: 760; letter-spacing: -.065em; line-height: .88; }
.list-head h2 sup { font-size: max(.25em, 14px); letter-spacing: 0; font-weight: 500; white-space: nowrap; vertical-align: top; color: var(--mute); margin-left: .2em; }
@media (max-width: 720px) { .list-head { flex-direction: column; align-items: flex-start; gap: 12px; } } /* Beschriftung unter die Überschrift, statt sie zu quetschen */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 60px 2.2fr 1.2fr 1.2fr 80px; align-items: center; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); position: relative; transition: padding .5s var(--ease), color .3s; }
.row .t { font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -.03em; font-weight: 450; }
.row .m { color: var(--mute); font-size: 15px; }
.row .y { text-align: right; font-variant-numeric: tabular-nums; }
.row:hover { padding-left: 18px; }
.row:hover .t { color: var(--mute); }
.tag { display: inline-block; font-size: 10px; letter-spacing: .08em; border: 1px solid currentColor; border-radius: 99px; padding: 1px 6px; margin-left: 10px; vertical-align: middle; color: var(--mute); }
@media (max-width: 720px) { .row { grid-template-columns: 34px 1fr 54px; } .row .m { display: none; } }
.cursor-preview { position: fixed; left: 0; top: 0; width: 300px; aspect-ratio: 4/3; z-index: 40; pointer-events: none; overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .35s, transform .35s var(--ease); }
.cursor-preview.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .cursor-preview { display: none; } }

/* Leistungen (Teil von „Über uns“) */
.svc-list { margin-top: clamp(72px, 9vw, 128px); }
.svc-list .svc:first-of-type { border-top: 1px solid var(--line); }
.svc { border-bottom: 1px solid var(--line); }
.svc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 26px 0; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -.03em; }
.svc summary::-webkit-details-marker { display: none; }
.svc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.svc summary > span:last-child { color: var(--accent); transition: transform .4s var(--ease); }
.svc[open] summary > span:last-child { transform: rotate(45deg); }
.svc .body { display: grid; grid-template-columns: 1fr 220px; gap: var(--pad); padding-bottom: 28px; animation: open .6s var(--ease); }
.svc .body p { max-width: 52ch; color: var(--mute); }
.svc .body img { aspect-ratio: 4/3; height: auto; }
@keyframes open { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 720px) { .svc .body { grid-template-columns: 1fr; } }
/* Footer (enthält Kontakt) */
.site-footer { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; padding: clamp(80px, 10vw, 140px) var(--pad) clamp(96px, 9vw, 120px); }
.f-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(48px, 6vw, 96px) var(--pad); align-items: start; }
.f-invite { font-size: clamp(30px, 3.8vw, 58px); line-height: 1.08; letter-spacing: -.035em; font-weight: 450; max-width: 17ch; color: rgba(255, 255, 255, .62); }
.f-invite a { color: #fff; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; transition: background-size .6s var(--ease); }
.f-invite a:hover { background-size: 0 2px; background-position: 100% 100%; }
.f-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px var(--pad); font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .85); }
.f-cols h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .5); }
.f-cols h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.f-cols a { transition: color .3s; }
.f-cols a:hover { color: #fff; }
.f-meta { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: clamp(64px, 8vw, 120px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 13px; color: rgba(255, 255, 255, .5); }
/* Logo als reine Hintergrundebene unten rechts: liegt hinter dem vorhandenen Text, ohne eigenen Platz */
.f-top, .f-meta { position: relative; z-index: 1; }
.f-mark { position: absolute; right: var(--pad); bottom: 0; z-index: 0; pointer-events: none; transform: translateY(var(--rise, 0%)); will-change: transform; }
.f-mark img { display: block; width: auto; height: clamp(200px, 26vw, 380px); opacity: .2; }
@media (max-width: 720px) { .f-top, .f-cols { grid-template-columns: 1fr; } }
/* Projektseite */
.p-head { padding: 90px var(--pad) 0; min-height: 70vh; display: flex; flex-direction: column; justify-content: space-between; }
.p-head .back { font-size: 14px; color: var(--mute); }
.p-head h1 { font-size: clamp(44px, 8vw, 130px); font-weight: 760; letter-spacing: -.065em; line-height: .88; margin-top: 40px; }
.p-head h1 .ln { display: block; overflow: hidden; }
.p-head h1 .ln > span { display: block; transform: translateY(100%); animation: rise 1.1s var(--ease) .15s forwards; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad); padding: 48px 0 28px; font-size: 16px; }
.facts div { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.facts dt { color: var(--mute); }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr 1fr; } }
.p-hero { padding: 0 var(--pad); }
.p-hero .frame { overflow: hidden; height: 88vh; clip-path: inset(0 8% 0 8%); transition: clip-path .1s linear; }
.p-hero img { transform: scale(1.2); }
/* Projektseite: gleiche große Abschnittsüberschriften wie auf der Startseite (.list-head) */
.p-sec { padding: clamp(70px, 10vw, 140px) var(--pad) 0; }
.p-sec .list-head h2 { overflow-wrap: anywhere; }
.p-body { padding-left: calc((100% - var(--pad)) / 4 + var(--pad)); }
.p-body p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; max-width: 60ch; }
.p-body p + p { margin-top: 1.1em; }
.p-body .lead { font-size: clamp(26px, 3.2vw, 46px); letter-spacing: -.03em; line-height: 1.12; max-width: none; }
@media (max-width: 720px) { .p-body { padding-left: 0; } }
.p-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--pad); padding: clamp(70px, 10vw, 140px) var(--pad); }
.p-gallery figure { overflow: hidden; }
.p-gallery img { transform: scale(1.15); }
.p-gallery .g1 { grid-column: 1 / 8; aspect-ratio: 4/3; }
.p-gallery .g2 { grid-column: 9 / 13; aspect-ratio: 3/4; margin-top: 40%; }
.p-gallery .g3 { grid-column: 3 / 11; aspect-ratio: 16/9; }
@media (max-width: 720px) { .p-gallery .g1, .p-gallery .g2, .p-gallery .g3 { grid-column: 1 / -1; margin-top: 0; } }
.next { display: block; padding: clamp(80px, 12vw, 160px) var(--pad); border-top: 1px solid var(--line); }
.next .label { display: block; margin-bottom: 20px; }
.next .t { font-size: clamp(44px, 9vw, 140px); letter-spacing: -.065em; line-height: .88; font-weight: 760; transition: color .3s, letter-spacing .6s var(--ease); }
.next:hover .t { color: var(--mute); letter-spacing: -.035em; }

/* Link „Mehr über uns“ auf der Startseite */
.more { margin-top: 28px; }
.more a { padding-bottom: 2px; border-bottom: 1px solid currentColor; transition: color .3s; }
.more a:hover { color: var(--mute); }

/* Unterseite Über uns & Leistungen */
.u-head { padding: 90px var(--pad) 0; }
.u-head .back { font-size: 14px; color: var(--mute); }
.u-head h1 { margin-top: 40px; max-width: 20ch; font-size: clamp(32px, 5.4vw, 88px); font-weight: 760; letter-spacing: -.065em; line-height: .92; }
.u-intro-wrap { padding-top: clamp(28px, 4vw, 56px); }
.u-intro .lead { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -.02em; }
.u-block { display: grid; grid-template-columns: 1fr; gap: 8px var(--pad); margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line); }
.u-block h3 { grid-column: 1 / -1; font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 8px; }
.u-list { list-style: none; display: grid; gap: 6px; margin-top: 18px; font-size: 16px; color: var(--mute); }
.u-list li { display: flex; gap: 10px; align-items: baseline; }
.u-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }
.u-sec .list-head h2 { font-size: clamp(30px, 5.2vw, 80px); } /* längere Titel: alle Überschriften dieser Seite gleich, etwas kleiner */
.u-sec { padding-top: clamp(56px, 8vw, 112px); }
.u-dazu { margin-top: 18px; font-size: 13px; color: var(--mute); }
.u-dazu + .u-list { margin-top: 8px; }
/* „So arbeiten wir“: vier Karten rasten nacheinander oben ein (Treppe), nur CSS */
.steps { --row: 30vh; --card: clamp(280px, 44vh, 440px); list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; margin-top: clamp(28px, 4vw, 56px); min-height: calc(3 * var(--row) + var(--card) + 40vh); }
.step { position: sticky; top: 56px; margin-top: calc(var(--i) * var(--row)); min-height: var(--card); padding: clamp(18px, 2vw, 28px); background: var(--paper-2); border: 1px solid var(--line); }
.step-no { display: block; font-size: clamp(56px, 6vw, 96px); font-weight: 760; letter-spacing: -.065em; line-height: .9; color: var(--accent); }
.step h3 { margin-top: clamp(20px, 3vw, 40px); font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.step p { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--mute); }
@media (max-width: 900px) {
  .steps { display: block; min-height: 0; padding-bottom: 12vh; }
  .step { top: calc(64px + var(--i) * 14px); margin: 0 0 20vh; min-height: 0; z-index: calc(var(--i) + 1); }
  .step:last-child { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .steps { min-height: 0; } .step { position: static; margin-top: 0; } }
.faq .svc:first-of-type { border-top: 1px solid var(--line); }
.faq .svc .body { grid-template-columns: 1fr; }
.faq .svc summary { font-size: clamp(18px, 1.8vw, 24px); }
.u-cta { padding-bottom: clamp(70px, 10vw, 140px); }
.u-cta a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* Reveals */
.js .rv { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
  .wordmark h1 .ch, .p-head h1 .ln > span { transform: none; opacity: 1; }
  [data-words] .w { opacity: 1; }
}