/* MSH Projektmanagement: Eine Fassade entsteht. Blaupause, Planweiß, Beton, Linienblau. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --blau: #12293f;
  --tief: #0c1d2e;
  --plan: #eef2f5;
  --beton: #c9cdcf;
  --linie: #8fb8da;
  --gitter: rgba(143, 184, 218, 0.09);
  --gutter: 5vw;
  --out: cubic-bezier(0.25, 1, 0.5, 1);
  --inout: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--blau); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html:has(.legal-page) { scrollbar-width: thin; }
html:has(.legal-page)::-webkit-scrollbar { display: block; width: 10px; }
html:has(.legal-page)::-webkit-scrollbar-thumb { background: #2a4560; border-radius: 10px; }
body {
  margin: 0; background: var(--blau); color: var(--plan);
  font: 400 1rem/1.5 "Archivo", system-ui, sans-serif; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--linie); color: var(--blau); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--linie); outline-offset: 3px; border-radius: 6px; }
h1, h2, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Vorspann ---------------------------------------------------------- */
.pre { position: fixed; inset: 0; z-index: 90; background: var(--blau); display: grid; place-items: center; }
.pre__mark { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: var(--plan); }
.pre__line { position: absolute; left: 50%; bottom: 36vh; width: min(240px, 50vw); height: 1px; transform: translateX(-50%); background: rgba(238, 242, 245, 0.18); }
.pre__line i { display: block; height: 100%; background: var(--linie); transform: scaleX(0); transform-origin: left; }

/* Logo -------------------------------------------------------------- */
.logo__m { font-weight: 800; font-stretch: 125%; font-size: 1.7rem; letter-spacing: 0.04em; line-height: 1; }
.logo__t { font-weight: 500; font-stretch: 100%; font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; line-height: 1; }
.logo { position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: var(--plan); transform-origin: 0 0; transition: color 0.4s var(--out); opacity: 0; }

/* Bühne ------------------------------------------------------------- */
.film { position: relative; height: 1700vh; }
.stage { position: fixed; inset: 0; overflow: hidden; background: var(--blau); }

.sc { position: absolute; inset: 0; overflow: hidden; background: var(--blau); will-change: clip-path; }
.bg { position: absolute; inset: 0; background: center / cover no-repeat; will-change: transform; }
.bg--h137 { transform-origin: 69% 4%; }
.grid { background-image: linear-gradient(var(--gitter) 1px, transparent 1px), linear-gradient(90deg, var(--gitter) 1px, transparent 1px); background-size: 56px 56px; }
.lines { background-image: url(../assets/linien.webp); mix-blend-mode: screen; opacity: 0.95; filter: brightness(2.6) contrast(1.25); -webkit-mask-image: linear-gradient(to right, transparent 6%, #000 24%, #000 80%, transparent 96%); mask-image: linear-gradient(to right, transparent 6%, #000 24%, #000 80%, transparent 96%); clip-path: inset(100% 0 0 0); }

.sc--photo::after, .sc--plan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(12, 29, 46, 0.62), rgba(12, 29, 46, 0) 38%),
    linear-gradient(to top, rgba(12, 29, 46, 0.78), rgba(12, 29, 46, 0) 52%);
}
.sc--plan::after { background: linear-gradient(to top, rgba(12, 29, 46, 0.55), rgba(12, 29, 46, 0) 45%); }
.sc--plan-hell { background: var(--plan); color: var(--blau); }

/* Schrift ----------------------------------------------------------- */
.pair { position: absolute; inset: 0; perspective: 1000px; pointer-events: none; z-index: 2; }
.pair .w {
  position: absolute; font-weight: 700; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.015em;
  font-size: clamp(2.6rem, 6.4vw, 8.5rem); white-space: nowrap;
}
.pair .w--l { left: var(--gutter); top: 19vh; }
.pair .w--r { right: var(--gutter); bottom: 17vh; text-align: right; }
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; will-change: transform, opacity; }

.st {
  position: absolute; z-index: 2; left: var(--gutter); bottom: 17vh;
  max-width: 34vw; font-weight: 500; font-size: clamp(1.1rem, 1.7vw, 1.9rem); line-height: 1.32; letter-spacing: -0.005em;
}
.st--big { max-width: 46vw; font-size: clamp(1.6rem, 3.1vw, 3.8rem); font-weight: 600; font-stretch: 110%; line-height: 1.12; bottom: 15vh; }
.st--partner { max-width: 74vw; top: 50%; bottom: auto; transform: translateY(-50%); font-size: clamp(1.8rem, 4.2vw, 5.4rem); font-weight: 650; font-stretch: 112%; line-height: 1.1; }
.st--finale { position: static; max-width: 46vw; font-size: clamp(2.4rem, 5.2vw, 6.6rem); font-weight: 700; font-stretch: 118%; line-height: 1.04; letter-spacing: -0.015em; }
.cap { position: absolute; z-index: 2; right: var(--gutter); bottom: 3.4vh; font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.8; }

.fin { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2.4rem; }
.fin__contact { font-size: clamp(1rem, 1.25vw, 1.3rem); line-height: 1.55; opacity: 0.85; }
.fin__contact a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* Konstanten -------------------------------------------------------- */
.hint { position: fixed; z-index: 40; left: 50%; bottom: 3.2vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--plan); opacity: 0; transition: opacity 0.3s; }
.hint i { display: block; width: 1px; height: 34px; background: currentColor; transform-origin: top; animation: tick 1.8s var(--inout) infinite; }
@keyframes tick { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.legal-links { position: fixed; z-index: 40; left: var(--gutter); bottom: 2.6vh; display: flex; gap: 1.4rem; font-size: 0.74rem; letter-spacing: 0.03em; color: var(--plan); transition: color 0.4s var(--out); }
.legal-links a { text-decoration: none; opacity: 0.8; }
.legal-links a:hover { opacity: 1; text-decoration: underline; }
.dark-ink .logo, .dark-ink .legal-links { color: var(--blau); }

/* CTA wird zum Formular */
.cta {
  position: fixed; z-index: 50; left: 0; top: 0; opacity: 0;
  width: var(--cw, 152px); height: var(--ch, 52px); border-radius: var(--cr, 26px);
  transform: translate(var(--cx, 0), var(--cy, 0));
  background: var(--blau); color: var(--plan); border: 1px solid rgba(238, 242, 245, 0.5); overflow: hidden;
}
.dark-ink .cta { border-color: var(--blau); }
.cta__label {
  all: unset; box-sizing: border-box; cursor: pointer; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em; opacity: var(--lab, 1);
}
.cta.is-open .cta__label { pointer-events: none; }
.cta__form { position: absolute; inset: 0; padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.85rem; opacity: var(--frm, 0); overflow-y: auto; }
.cta__form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--linie); }
.cta__form input, .cta__form select, .cta__form textarea {
  font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--plan);
  background: rgba(238, 242, 245, 0.07); border: 1px solid rgba(238, 242, 245, 0.28); border-radius: 10px; padding: 0.6rem 0.75rem; width: 100%;
}
.cta__form select option { color: #12293f; }
.cta__form textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.hp { position: absolute; left: -9999px; }
.send { all: unset; cursor: pointer; box-sizing: border-box; text-align: center; padding: 0.8rem 1rem; border-radius: 999px; background: var(--linie); color: var(--blau); font-weight: 700; letter-spacing: 0.02em; }
.send:hover { background: var(--plan); }
.form__hint { font-size: 0.78rem; line-height: 1.45; color: rgba(238, 242, 245, 0.75); }
.form__hint a { color: var(--plan); }
.form__hint.is-error { color: #ffb4a8; }

/* Ohne Bewegung / ohne Skript -------------------------------------- */
.is-static .film { height: auto; }
.is-static .stage { position: static; overflow: visible; }
.is-static .sc { position: relative; min-height: 100vh; clip-path: none !important; }
.is-static .hint, .is-static .pre { display: none; }
.is-static .lines { clip-path: none; }
.is-static .logo { position: absolute; left: var(--gutter); top: 24px; opacity: 1; }
.is-static .cta { position: fixed; left: auto; right: 1rem; bottom: 1rem; top: auto; width: auto; height: auto; transform: none; opacity: 1; padding: 0.8rem 1.4rem; }
.is-static .cta__form { display: none; }
.is-static .cta__label { position: static; display: block; }
.ns { position: relative; z-index: 100; background: var(--blau); color: var(--plan); padding: 2rem var(--gutter); min-height: 100vh; }
.ns h1 { font-size: 2rem; margin: 1rem 0; }
.ns p { margin: 0 0 1rem; max-width: 60ch; }
.ns__brand { font-weight: 800; letter-spacing: 0.1em; }

@media (max-width: 831px) {
  .pair .w { font-size: clamp(2rem, 10vw, 4rem); }
  .st { max-width: 88vw; bottom: 21vh; }
  .pair .w--r { bottom: 40vh; }
  .p-hero .w { font-size: 8.2vw; }
  .cap { right: auto; left: var(--gutter); bottom: auto; top: 14vh; }
  .st--big, .st--finale, .st--partner { max-width: 90vw; }
}

/* Rechtsseiten ------------------------------------------------------ */
.legal-top { position: fixed; z-index: 40; inset: 0 0 auto 0; padding: 1.6rem var(--gutter); background: linear-gradient(rgba(18, 41, 63, 0.95), rgba(18, 41, 63, 0)); }
.legal-top .logo { position: static; opacity: 1; }
.legal-page { max-width: 46rem; margin: 0 auto; padding: 7rem var(--gutter) 5rem; }
.legal-page h1 { font-weight: 600; font-stretch: 125%; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; margin-bottom: 2.4rem; }
.legal-page h2 { font-weight: 600; font-stretch: 112%; font-size: 1.6rem; line-height: 1.2; margin: 2.4rem 0 0.7rem; color: var(--linie); }
.legal-page h3 { font-weight: 600; font-stretch: 105%; font-size: 1.2rem; line-height: 1.3; margin: 1.8rem 0 0.5rem; }
.legal-page p, .legal-page ul { max-width: 66ch; }
.legal-page p + p { margin-top: 0.9rem; }
.legal-page ul { padding-left: 1.2rem; }
.legal-page li + li { margin-top: 0.5rem; }
.legal-page a { text-decoration-color: var(--linie); }
.legal-foot { display: flex; flex-wrap: wrap; gap: 0.3rem 1.8rem; margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid rgba(238, 242, 245, 0.18); font-size: 0.9rem; color: rgba(238, 242, 245, 0.75); }
.legal-foot a { text-decoration: none; padding: 0.4rem 0; }
.legal-foot a:hover { color: var(--plan); }

.more { position: absolute; z-index: 3; left: var(--gutter); bottom: 9vh; font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.4rem); letter-spacing: 0.02em; color: var(--plan); text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 0.2rem; }
.more:hover { color: var(--linie); }

/* Bildauswahl ------------------------------------------------------- */
html:has(.pp-page) { scrollbar-width: thin; }
.pp-page { max-width: 96rem; margin: 0 auto; padding: 8rem var(--gutter) 5rem; }
.pp-page h1 { font-weight: 700; font-stretch: 125%; font-size: clamp(2.6rem, 6.4vw, 8rem); line-height: 1.02; letter-spacing: -0.015em; }
.pp-intro { margin-top: 1.2rem; font-size: clamp(1.1rem, 1.7vw, 1.9rem); font-weight: 500; color: rgba(238, 242, 245, 0.85); }
.pp-list { display: flex; flex-direction: column; gap: clamp(2.5rem, 7vw, 7rem); margin-top: clamp(3rem, 7vw, 7rem); }
.pp { margin: 0; }
.pp img { display: block; width: 100%; height: auto; border-radius: 4px; }
.pp figcaption { margin-top: 0.6rem; font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.8; }
.pp--0 { width: 100%; }
.pp--1 { width: 64%; align-self: flex-end; }
.pp--2 { width: 78%; }
.pp--3 { width: 56%; align-self: flex-end; }
.pp-anim .pp { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--out), transform 0.9s var(--out); }
.pp-anim .pp.is-in { opacity: 1; transform: none; }
@media (max-width: 831px) { .pp--0, .pp--1, .pp--2, .pp--3 { width: 100%; } }

.sc--blau .st--big { max-width: 36vw; }

.bg--hl { right: 50%; }
.bg--hr { left: 50%; }

.st--line { max-width: none; }

.pair .w--long { font-size: clamp(2.2rem, 5.2vw, 7rem); }

.pp--tall { width: 40%; align-self: flex-start; margin-left: 8%; }
@media (max-width: 831px) { .pp--tall { width: 100%; margin-left: 0; } }

/* Handy: lange Überschriften umbrechen, Textszenen mit Link ----------- */
@media (max-width: 831px) {
  .pair .w { white-space: normal; max-width: 90vw; font-size: clamp(1.9rem, 9vw, 3.6rem); }
  .p-hero .w { white-space: nowrap; font-size: 8.2vw; }
  .pair .w--long { font-size: clamp(1.9rem, 9vw, 3.6rem); }
  .sc--blau .st--big, .st--line { max-width: 90vw; }
  .sc--blau .st { bottom: 28vh; }
  .more { bottom: 21vh; }
}

.seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }

.cta__label:focus-visible, .send:focus-visible { outline: 2px solid var(--linie); outline-offset: 3px; }
.dark-ink .cta__label:focus-visible { outline-color: var(--blau); }


/* Einwilligungsabfrage (vorsorglich) --------------------------------- */
.cc {
  position: fixed; z-index: 120; left: 50%; bottom: 1.1rem; width: min(36rem, calc(100vw - 2rem)); transform: translate(-50%, 12px); opacity: 0;
  padding: 1.2rem 1.3rem; border-radius: 1.2rem; background: rgba(18, 41, 63, 0.97); border: 1px solid rgba(238, 242, 245, 0.22);
  color: var(--plan);
  transition: opacity 0.45s var(--out), transform 0.45s var(--out);
}
.cc[hidden] { display: none; }
.cc.is-on { opacity: 1; transform: translate(-50%, 0); }
.cc:focus { outline: none; }
.cc__t { font-weight: 600; font-stretch: 112%; font-size: 1.05rem; margin: 0 0 0.45rem; }
.cc__d { font-size: 0.88rem; line-height: 1.5; color: rgba(238, 242, 245, 0.78); margin: 0 0 1rem; max-width: 62ch; }
.cc__d a { color: var(--plan); text-decoration-color: var(--linie); }
.cc__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.cc__b {
  min-height: 2.7rem; padding: 0 1.2rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--linie); background: var(--linie); color: var(--blau);
  font: 600 0.9rem/1 "Archivo", sans-serif; font-stretch: 108%; transition: background-color 0.3s, border-color 0.3s;
}
.cc__b:hover { background: var(--plan); border-color: var(--plan); }
.cc__b--alt { background: transparent; color: var(--plan); border-color: rgba(238, 242, 245, 0.5); }
.cc__b--alt:hover { background: rgba(238, 242, 245, 0.1); border-color: var(--plan); }
.cc__l { background: none; border: 0; padding: 0.6rem 0.2rem; cursor: pointer; color: rgba(238, 242, 245, 0.78); font: 500 0.85rem/1 "Archivo", sans-serif; text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 0.25em; }
.cc__l:hover { color: var(--plan); }
.cc__set { display: grid; gap: 0.2rem; margin-bottom: 0.9rem; }
.cc__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.65rem 0; border-top: 1px solid rgba(238, 242, 245, 0.18); cursor: pointer; }
.cc__row b { display: block; font-weight: 600; font-size: 0.92rem; }
.cc__row i { display: block; font-style: normal; font-size: 0.8rem; color: rgba(238, 242, 245, 0.78); margin-top: 0.1rem; }
.cc__row input { appearance: none; flex: none; width: 2.7rem; height: 1.5rem; border-radius: 999px; background: rgba(238, 242, 245, 0.22); position: relative; cursor: pointer; transition: background-color 0.3s; }
.cc__row input::after { content: ""; position: absolute; left: 0.2rem; top: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--plan); transition: transform 0.3s var(--out); }
.cc__row input:checked { background: var(--linie); }
.cc__row input:checked::after { transform: translateX(1.2rem); background: var(--blau); }
.cc__row input:disabled { opacity: 0.55; cursor: default; }
.cc__row input:focus-visible { outline: 2px solid var(--linie); outline-offset: 3px; }
.linkbtn { background: none; border: 0; padding: 0.35rem 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-shadow: inherit; }
@media (max-width: 52rem) {
  .cc { bottom: 0.6rem; width: calc(100vw - 1.2rem); padding: 1rem 1.1rem; }
  .cc__d { font-size: 0.82rem; }
  .cc__b { flex: 1 1 8rem; }
}
@media (max-height: 640px) { .cc__d { display: none; } .cc__set ~ .cc__acts, .cc__acts { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .cc { transition: none; } }
.cc [hidden] { display: none !important; }
.linkbtn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; opacity: 0.8; }
.linkbtn:hover { opacity: 1; text-decoration: underline; }
.legal-foot .linkbtn { padding: 0.4rem 0; opacity: 0.75; }