/* Unbounded, lokal gehostet (SIL Open Font License 1.1, siehe assets/fonts/OFL.txt).
   Variable Font: deckt die Schnitte 200-900 mit einer Datei ab.
   Pfade sind relativ zu dieser CSS-Datei und gelten daher auch fuer /projekte/. */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("assets/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("assets/fonts/unbounded-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --ink: #f6efe7;
  --muted: rgba(246, 239, 231, 0.62);
  --line: rgba(246, 239, 231, 0.18);
  --soft-line: rgba(246, 239, 231, 0.08);
  --paper: #090605;
  --wash: #160d0a;
  --accent: #ff6a2a;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(ellipse at 18% 18%, rgba(112, 185, 231, 0.42), transparent 34%),
    radial-gradient(ellipse at 88% 12%, rgba(112, 185, 231, 0.3), transparent 32%),
    radial-gradient(ellipse at 72% 78%, rgba(112, 185, 231, 0.26), transparent 38%),
    linear-gradient(135deg, #030405 0%, #06101a 42%, #082033 66%, #030506 100%);
  filter: blur(18px);
  transform: scale(1.05);
}

body::after {
  opacity: 0.22;
  mix-blend-mode: overlay;
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 7px);
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  pointer-events: none;
}

.site-header a,
.site-header button {
  pointer-events: auto;
}

.mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(246, 239, 231, 0.24);
  border-radius: 50%;
  background: rgba(12, 8, 6, 0.42);
  font-weight: 700;
  backdrop-filter: blur(16px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  color: rgba(246, 239, 231, 0.86);
  font-size: 13px;
  letter-spacing: 0;
}

.menu-button {
  position: relative;
  z-index: 31;
  display: grid;
  width: 28px;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 5px 0;
  cursor: pointer;
  color: inherit;
}

.menu-button span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.menu-button.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(38deg);
}

.menu-button.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-button.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-38deg);
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 92px clamp(18px, 4vw, 56px) 58px;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
}

.embedded-work {
  background: var(--logo-blue);
}

.embedded-work .wheel-scene::before,
.embedded-work .wheel-scene::after {
  border-color: rgba(255, 247, 239, 0.22);
}

.title-wall {
  position: relative;
  z-index: 1;
  top: auto;
  left: auto;
  display: flex;
  width: min(1120px, 88vw);
  margin: 1vh auto 0;
  transform: none;
  justify-content: center;
  gap: clamp(24px, 5vw, 72px);
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(76px, 13vw, 190px);
  font-weight: 700;
  font-style: italic;
  line-height: 0.9;
  letter-spacing: 0;
  -webkit-text-stroke: 1px rgba(246, 239, 231, 0.15);
  text-stroke: 1px rgba(246, 239, 231, 0.15);
  white-space: nowrap;
}

.wheel-copy {
  width: min(460px, 80vw);
  margin: 0 auto;
  text-align: center;
}

.kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wheel-copy h1 {
  margin: 0;
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1;
  letter-spacing: 0;
}

.wheel-scene {
  position: relative;
  align-self: center;
  width: 100%;
  height: min(64vh, 610px);
  min-height: 460px;
  margin-top: 10px;
  perspective: 1200px;
  perspective-origin: 50% 46%;
}

.wheel-scene::before,
.wheel-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
}

.wheel-scene::before {
  bottom: 4%;
  width: min(980px, 76vw);
  height: 180px;
  border-bottom: 1px solid rgba(246, 239, 231, 0.14);
  border-radius: 50%;
  opacity: 0.88;
}

.wheel-scene::after {
  bottom: -18%;
  width: min(1280px, 92vw);
  height: 320px;
  border: 1px solid rgba(246, 239, 231, 0.08);
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.72;
}

.wheel-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.project-card {
  position: absolute;
  top: 50%;
  left: 43%;
  width: var(--card-width, clamp(220px, 25vw, 340px));
  aspect-ratio: var(--card-ratio, 1.58 / 1);
  border: 1px solid rgba(238, 248, 255, 0.58);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 46%, rgba(255, 255, 255, 0.12)),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    0 18px 50px rgba(17, 17, 17, 0.12),
    0 0 22px rgba(235, 247, 255, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -18px 28px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  backdrop-filter: blur(7px) saturate(1.08) contrast(1.02);
}

.project-card.is-landscape {
  --card-width: clamp(220px, 25vw, 340px);
  --card-ratio: 1.58 / 1;
}

.project-card.is-portrait {
  --card-width: clamp(170px, 16vw, 245px);
  --card-ratio: 0.72 / 1;
}

.project-card.is-square {
  --card-width: clamp(190px, 20vw, 285px);
  --card-ratio: 1 / 1;
}

.project-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.34) 0 14%, rgba(255, 255, 255, 0.12) 15% 25%, transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent 14%, transparent 82%, rgba(255, 255, 255, 0.18)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent 11%, transparent 88%, rgba(255, 255, 255, 0.24));
  mix-blend-mode: screen;
  opacity: 0.58;
  pointer-events: none;
}

.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 24%, transparent 72%, rgba(255, 255, 255, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%, rgba(12, 18, 22, 0.16));
  opacity: var(--shade, 0.18);
  pointer-events: none;
}

.project-card.is-active {
  cursor: zoom-in;
}

.project-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.92;
  transform: scale(1.01);
  filter: saturate(0.9) contrast(1) blur(0.15px);
}

.card-number {
  position: absolute;
  z-index: 3;
  top: 11px;
  left: 12px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.card-arrow {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.project-info {
  position: absolute;
  z-index: 12;
  top: 42%;
  right: clamp(18px, 2.6vw, 46px);
  width: min(430px, 28vw);
  border: 1px solid rgba(246, 239, 231, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
  padding: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.project-info h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 2.8vw, 48px);
  line-height: 0.98;
  letter-spacing: 0;
}

.project-info p:not(.kicker) {
  margin: 0;
  color: rgba(246, 239, 231, 0.72);
  font-size: clamp(13px, 0.92vw, 15px);
  line-height: 1.46;
}

.wheel-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: min(860px, 92vw);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-work {
  display: none;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 22px;
  pointer-events: none;
  opacity: 0;
}

.overlay.is-open {
  pointer-events: auto;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.38);
  backdrop-filter: blur(12px);
}

.overlay-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: min(720px, 92vh);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  overflow: hidden;
  border: 1px solid rgba(246, 239, 231, 0.2);
  border-radius: 8px;
  background: rgba(12, 8, 6, 0.86);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.overlay-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(246, 239, 231, 0.12);
  padding: 9px 14px;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.overlay-image-wrap {
  min-height: 420px;
  background: var(--wash);
}

.overlay-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.overlay-content {
  align-self: end;
  padding: clamp(30px, 5vw, 62px);
}

.overlay-content h2 {
  margin: 0 0 18px;
  max-width: 9ch;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 0.88;
  letter-spacing: 0;
}

.overlay-content p:not(.kicker) {
  margin: 0 0 28px;
  color: rgba(246, 239, 231, 0.72);
  font-size: 17px;
  line-height: 1.55;
}

.overlay-content a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-page {
  background: transparent;
}

.home-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  align-items: center;
  gap: clamp(34px, 6vw, 92px);
  padding: 118px clamp(22px, 5vw, 72px) 78px;
  isolation: isolate;
}

.home-title-wall {
  position: absolute;
  z-index: -1;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 12vw, 176px);
  font-style: italic;
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: 0;
  -webkit-text-stroke: 1px rgba(246, 239, 231, 0.12);
  text-stroke: 1px rgba(246, 239, 231, 0.12);
  white-space: nowrap;
}

.home-intro {
  max-width: 690px;
}

.home-intro h1 {
  margin: 0;
  font-size: clamp(48px, 7vw, 108px);
  line-height: 0.88;
  letter-spacing: 0;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.primary-link,
.secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.primary-link {
  background: #f6efe7;
  color: #120706;
}

.secondary-link {
  border: 1px solid var(--line);
  background: rgba(246, 239, 231, 0.08);
  backdrop-filter: blur(14px);
}

.home-preview {
  position: relative;
  min-height: 520px;
  perspective: 1200px;
}

.preview-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(238, 248, 255, 0.58);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 90px rgba(17, 17, 17, 0.16),
    0 0 24px rgba(235, 247, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(7px) saturate(1.08);
}

.preview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.34) 0 14%, rgba(255, 255, 255, 0.1) 15% 25%, transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.18));
  mix-blend-mode: screen;
  pointer-events: none;
}

.preview-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.92;
  filter: saturate(0.9) contrast(1);
}

.preview-card span {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 2;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preview-card-main {
  right: 6%;
  top: 12%;
  width: min(560px, 42vw);
  aspect-ratio: 1.55 / 1;
  transform: rotateY(-11deg) rotateZ(2deg);
}

.preview-card-side {
  left: 0;
  bottom: 8%;
  width: min(330px, 26vw);
  aspect-ratio: 1.35 / 1;
  transform: rotateY(24deg) rotateZ(-7deg);
  opacity: 0.78;
}

.statement-band {
  border-block: 1px solid var(--line);
  padding: clamp(36px, 6vw, 72px) clamp(22px, 5vw, 72px);
}

.statement-band p {
  width: min(1120px, 100%);
  margin: 0 auto;
  font-size: clamp(30px, 5vw, 76px);
  line-height: 0.95;
  letter-spacing: 0;
}

.content-section,
.work-callout,
.site-footer {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
}

.content-section {
  padding: clamp(76px, 10vw, 136px) 0;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.72fr);
  gap: clamp(36px, 8vw, 110px);
}

.split-section h2,
.work-callout h2,
.site-footer h2 {
  margin: 0;
  font-size: clamp(34px, 5.8vw, 82px);
  line-height: 0.92;
  letter-spacing: 0;
}

.section-copy {
  display: grid;
  gap: 18px;
  color: rgba(246, 239, 231, 0.72);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
}

.section-copy p {
  margin: 0;
}

.services-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding-top: 0;
}

.services-section article {
  min-height: 250px;
  border: 1px solid var(--line);
  background: rgba(246, 239, 231, 0.07);
  padding: clamp(22px, 3vw, 34px);
  backdrop-filter: blur(12px);
}

.services-section span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.services-section h3 {
  margin: 54px 0 14px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 0.94;
}

.services-section p {
  margin: 0;
  color: rgba(246, 239, 231, 0.7);
  line-height: 1.48;
}

.work-callout {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(54px, 8vw, 92px) 0;
}

.work-callout h2 {
  max-width: 760px;
}

.site-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(70px, 10vw, 130px) 0 44px;
}

.site-footer h2 {
  max-width: 780px;
}

.site-footer a {
  border-bottom: 1px solid currentColor;
  font-weight: 800;
}

.onepager-page {
  --logo-orange: #f04a16;
  --logo-blue: #70b9e7;
  min-height: 100vh;
  color: #fff7ef;
  background: #050505;
}

.onepager-page::before {
  background:
    radial-gradient(ellipse at 88% 18%, rgba(112, 185, 231, 0.28), transparent 30%),
    radial-gradient(ellipse at 18% 80%, rgba(240, 74, 22, 0.32), transparent 34%),
    linear-gradient(135deg, #020202 0%, #090909 46%, #120804 100%);
  filter: blur(14px);
}

.onepager-page::after {
  opacity: 0.26;
}

.onepage-header {
  position: fixed;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.onepage-header .nav-links {
  position: absolute;
  top: 50%;
  right: clamp(20px, 4vw, 56px);
  color: rgba(255, 247, 239, 0.9);
  transform: translateY(-50%);
}

.onepage-header .brand-logo {
  position: relative;
  display: block;
  width: clamp(126px, 10vw, 164px);
  aspect-ratio: 768 / 441;
  pointer-events: auto;
  transition: width 0.36s ease, transform 0.36s ease, left 0.36s ease, top 0.36s ease;
}

.brand-logo .logo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.brand-logo .logo-blue {
  opacity: 0;
}

.onepager-page:not(.about-page) .onepage-header:not(.is-scrolled) .brand-logo {
  position: absolute;
  top: 24px;
  left: 50%;
  width: clamp(178px, 16vw, 238px);
  transform: translateX(-50%);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: clamp(18px, 4vw, 56px);
  z-index: 30;
  width: min(320px, calc(100vw - 36px));
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
    rgba(7, 9, 10, 0.68);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(22px) saturate(1.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.menu-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.menu-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 16px;
  border-radius: 16px;
  color: #fff7ef;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.menu-panel a::after {
  content: "↗";
  font-size: 18px;
  font-weight: 700;
  opacity: 0.58;
}

.menu-panel a:hover {
  color: #071824;
  background: rgba(240, 74, 22, 0.92);
  transform: translateX(-3px);
}

.onepage-header.is-scrolled {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(240, 74, 22, 0.96), rgba(244, 98, 29, 0.9));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.onepage-header.is-scrolled .brand-logo {
  width: clamp(58px, 5vw, 82px);
  aspect-ratio: 479 / 270;
  transform: translateY(1px);
}

.onepage-header.is-scrolled .logo-orange {
  opacity: 0;
}

.onepage-header.is-scrolled .logo-blue {
  opacity: 1;
}

.onepage-header.is-scrolled .nav-links {
  color: #071824;
}

.onepage-header.is-scrolled .menu-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)),
    rgba(240, 74, 22, 0.82);
}

.video-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 92px clamp(18px, 4vw, 56px) 44px;
  isolation: isolate;
}

.video-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(115deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.18) 48%, rgba(112, 185, 231, 0.14)),
    radial-gradient(ellipse at 50% 45%, rgba(240, 74, 22, 0.22), transparent 46%);
}

.video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background:
    repeating-radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 9px);
}

.video-placeholder {
  width: min(1120px, 88vw);
  min-height: min(620px, 62vh);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 42%, rgba(112, 185, 231, 0.12)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  text-align: center;
  backdrop-filter: blur(16px) saturate(1.2);
}

.video-placeholder span {
  color: rgba(255, 247, 239, 0.62);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.video-placeholder strong {
  display: block;
  margin-top: 14px;
  font-size: clamp(42px, 7vw, 118px);
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
}

.social-rail {
  position: absolute;
  right: clamp(18px, 3.8vw, 56px);
  top: 50%;
  z-index: 2;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
}

.social-rail a {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 247, 239, 0.28);
  border-radius: 50%;
  color: #fff7ef;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035)),
    rgba(5, 7, 8, 0.38);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px) saturate(1.18);
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.social-rail a:hover {
  color: #071824;
  border-color: rgba(112, 185, 231, 0.78);
  background: rgba(112, 185, 231, 0.88);
  transform: translateX(-4px);
}

.social-rail svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.social-rail span {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
}

.onepage-overview {
  position: relative;
  min-height: 100vh;
  padding: clamp(82px, 10vw, 136px) clamp(18px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

.onepage-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--logo-blue);
}

.onepage-overview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  mix-blend-mode: overlay;
  background:
    repeating-radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(130deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 8px);
}

.overview-heading {
  width: min(980px, 100%);
  margin-bottom: clamp(34px, 6vw, 82px);
}

.overview-heading h1 {
  margin: 0;
  font-size: clamp(42px, 7vw, 102px);
  line-height: 0.9;
  letter-spacing: 0;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.overview-card {
  min-height: clamp(280px, 34vw, 430px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 38px);
  color: #fff7ef;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(16px) saturate(1.12);
}

.overview-card span {
  margin-bottom: auto;
  color: rgba(255, 247, 239, 0.62);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.overview-card h2 {
  margin: 0 0 14px;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 0.9;
  letter-spacing: 0;
}

.overview-card p {
  margin: 0;
  max-width: 28ch;
  color: rgba(255, 247, 239, 0.74);
  line-height: 1.45;
}

.card-work {
  background:
    linear-gradient(145deg, rgba(112, 185, 231, 0.22), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.06);
}

.card-offers {
  background:
    linear-gradient(145deg, rgba(240, 74, 22, 0.26), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.06);
}

.card-about {
  background:
    linear-gradient(145deg, rgba(112, 185, 231, 0.18), rgba(240, 74, 22, 0.2)),
    rgba(255, 255, 255, 0.06);
}

.about-page {
  min-height: 100vh;
}

.about-main {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--brand-blue);
}

.about-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: clamp(118px, 11vw, 160px) clamp(24px, 6vw, 96px) clamp(58px, 7vw, 98px);
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 90px);
  max-width: none;
  isolation: isolate;
}

.about-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
}

.about-hero h1 {
  max-width: 8ch;
  margin: 0;
  color: var(--brand-navy);
  font-size: clamp(74px, 8.6vw, 166px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
  text-wrap: balance;
}

.about-hero-media {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: end;
  width: min(670px, 49vw);
}

.about-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 38px rgba(0, 15, 46, 0.13));
}

.about-content {
  width: min(1240px, calc(100% - clamp(36px, 9vw, 144px)));
  margin: 0 auto;
  padding: 0 0 clamp(64px, 8vw, 118px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

.about-card {
  min-width: 0;
  min-height: clamp(270px, 30vw, 390px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 38px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035)),
    rgba(4, 8, 10, 0.44);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(18px) saturate(1.16);
}

.about-card:nth-child(2) {
  background:
    linear-gradient(145deg, rgba(112, 185, 231, 0.22), rgba(255, 255, 255, 0.04)),
    rgba(4, 8, 10, 0.44);
}

.about-card:nth-child(3) {
  background:
    linear-gradient(145deg, rgba(240, 74, 22, 0.22), rgba(112, 185, 231, 0.12)),
    rgba(4, 8, 10, 0.44);
}

.about-card span {
  margin-bottom: auto;
  color: rgba(255, 247, 239, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.about-card h2 {
  margin: 0 0 14px;
  color: #fff7ef;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 0.92;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.about-card p {
  margin: 0;
  color: rgba(255, 247, 239, 0.72);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.about-card p + p {
  margin-top: 0.85em;
}

@media (max-width: 800px) {
  body {
    background: var(--paper);
  }

  .site-header {
    padding: 18px 18px;
  }

  .nav-links {
    gap: 14px;
    font-size: 12px;
  }

  .onepage-header .nav-links {
    right: 18px;
  }

  .onepage-header .brand-logo {
    width: 126px;
  }

  .onepager-page:not(.about-page) .onepage-header:not(.is-scrolled) .brand-logo {
    top: 20px;
    width: min(176px, 48vw);
  }

  .onepage-header.is-scrolled .brand-logo {
    width: 58px;
  }

  .video-hero {
    min-height: 100vh;
    padding: 88px 18px 44px;
  }

  .video-placeholder {
    width: 100%;
    min-height: 62vh;
    border-radius: 22px;
  }

  .video-placeholder strong {
    font-size: clamp(42px, 16vw, 76px);
  }

  .social-rail {
    top: auto;
    right: auto;
    bottom: 78px;
    left: 50%;
    grid-auto-flow: column;
    transform: translateX(-50%);
  }

  .social-rail a {
    width: 42px;
    height: 42px;
  }

  .onepage-overview {
    padding: 86px 18px 56px;
  }

  .overview-heading h1 {
    font-size: clamp(42px, 13vw, 72px);
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .overview-card {
    min-height: 230px;
    border-radius: 22px;
  }

  .about-main {
    padding: 0;
  }

  .about-hero {
    min-height: 100vh;
    min-height: 100svh;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 16px;
    padding: max(108px, calc(78px + env(safe-area-inset-top))) 18px 0;
  }

  .about-hero h1 {
    max-width: 8ch;
    font-size: clamp(54px, 17vw, 86px);
  }

  .about-hero-media {
    width: min(92vw, 520px);
    justify-self: center;
    margin-top: -18px;
  }

  .about-content {
    width: calc(100% - 32px);
    padding-bottom: 54px;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .about-card {
    min-height: 230px;
    border-radius: 22px;
  }

  .home-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 100px 18px 54px;
    gap: 34px;
  }

  .home-title-wall {
    top: 92px;
    font-size: clamp(54px, 17vw, 104px);
  }

  .home-intro h1 {
    font-size: clamp(46px, 14vw, 72px);
  }

  .home-preview {
    min-height: 340px;
  }

  .preview-card-main {
    right: 0;
    top: 12px;
    width: min(92vw, 420px);
  }

  .preview-card-side {
    left: -8px;
    bottom: 8px;
    width: min(48vw, 220px);
  }

  .statement-band {
    padding: 42px 18px;
  }

  .statement-band p {
    font-size: clamp(34px, 11vw, 58px);
  }

  .content-section,
  .work-callout,
  .site-footer {
    width: calc(100% - 36px);
  }

  .split-section,
  .services-section {
    grid-template-columns: 1fr;
  }

  .content-section {
    padding: 72px 0;
  }

  .services-section {
    gap: 12px;
    padding-top: 0;
  }

  .services-section article {
    min-height: 190px;
  }

  .work-callout,
  .site-footer {
    display: grid;
    align-items: start;
  }

  .hero {
    display: none;
  }

  .mobile-work {
    display: block;
    padding: 90px 18px 42px;
  }

  .onepager-page .mobile-work {
    min-height: 100vh;
    background: var(--logo-blue);
  }

  .mobile-heading {
    margin-bottom: 26px;
  }

  .mobile-heading h2 {
    margin: 0;
    color: transparent;
    font-size: clamp(74px, 24vw, 132px);
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: 0;
    -webkit-text-stroke: 1.4px rgba(246, 239, 231, 0.24);
    text-stroke: 1.4px rgba(246, 239, 231, 0.24);
  }

  .mobile-list {
    display: grid;
    gap: 16px;
  }

  .mobile-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    min-height: 128px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(246, 239, 231, 0.08);
    padding: 12px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    backdrop-filter: blur(12px);
  }

  .mobile-card img {
    width: 92px;
    height: 104px;
    border-radius: 5px;
    object-fit: cover;
  }

  .mobile-card small {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-card strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
  }

  .overlay-panel {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow: auto;
  }

  .overlay-image-wrap {
    min-height: 260px;
    max-height: 42vh;
  }

  .overlay-content {
    padding: 28px;
  }

  .overlay-content h2 {
    max-width: 10ch;
    font-size: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* CD refresh */
:root {
  color-scheme: light;
  --brand-blue: #73b8e6;
  --brand-sky: #f0f9fe;
  --brand-orange: #f04020;
  --brand-navy: #000f2e;
  --brand-white: #ffffff;
  --ink: var(--brand-navy);
  --muted: rgba(0, 15, 46, 0.68);
  --line: rgba(0, 15, 46, 0.18);
  --soft-line: rgba(0, 15, 46, 0.08);
  --paper: var(--brand-sky);
  --wash: #ffffff;
  --accent: var(--brand-orange);
}

html,
body {
  background: var(--brand-sky);
}

body,
button {
  color: var(--brand-navy);
  font-family: "Unbounded", "Arial Rounded MT Bold", Arial, system-ui, sans-serif;
}

.onepager-page,
.work-page,
.about-page {
  --logo-orange: var(--brand-orange);
  --logo-blue: var(--brand-blue);
  color: var(--brand-navy);
  background: var(--brand-sky);
}

body::before,
.onepager-page::before {
  background:
    linear-gradient(90deg, rgba(0, 15, 46, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 15, 46, 0.045) 1px, transparent 1px);
  background-size: calc(100vw / 12) 100%, 100% 112px;
  filter: none;
  opacity: 0.5;
  transform: none;
}

body::after,
.onepager-page::after {
  display: none;
}

.kicker {
  color: var(--brand-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.site-header {
  padding: 20px clamp(18px, 4vw, 56px);
}

.onepage-header {
  color: var(--brand-navy);
}

.onepage-header .nav-links {
  color: var(--brand-navy);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease, color 0.24s ease;
}

.onepage-header .brand-logo {
  width: clamp(132px, 10vw, 168px);
}

.onepager-page:not(.about-page) .onepage-header:not(.is-scrolled) .brand-logo {
  top: 24px;
  width: clamp(176px, 15vw, 232px);
}

.onepager-page:not(.about-page) .onepage-header:not(.is-scrolled) .nav-links {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.onepager-page:not(.about-page) .onepage-header:not(.is-scrolled) .menu-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
}

.menu-button {
  width: 34px;
  padding: 8px 0;
}

.menu-button span {
  height: 3px;
  border-radius: 0;
  background: currentColor;
}

.menu-panel {
  gap: 2px;
  padding: 8px;
  border: 2px solid var(--brand-orange);
  border-radius: 8px;
  background: var(--brand-white);
  box-shadow: 16px 18px 0 rgba(0, 15, 46, 0.12);
  backdrop-filter: none;
}

.onepage-header.is-scrolled .menu-panel {
  background: var(--brand-white);
}

.menu-panel a {
  min-height: 54px;
  border-radius: 4px;
  color: var(--brand-navy);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
}

.menu-panel a::after {
  content: none;
}

.menu-panel a:hover,
.menu-panel a[aria-current="page"] {
  color: var(--brand-orange);
  background: transparent;
  transform: none;
}

.onepage-header.is-scrolled {
  border-bottom: 2px solid rgba(0, 15, 46, 0.12);
  background: rgba(240, 249, 254, 0.94);
  box-shadow: 0 14px 34px rgba(0, 15, 46, 0.08);
  backdrop-filter: blur(14px);
}

.onepage-header.is-scrolled .brand-logo {
  width: clamp(112px, 9vw, 152px);
  aspect-ratio: 768 / 441;
  transform: none;
}

.onepage-header.is-scrolled .logo-orange {
  opacity: 1;
}

.onepage-header.is-scrolled .logo-blue {
  opacity: 0;
}

.onepage-header.is-scrolled .nav-links {
  color: var(--brand-navy);
}

.video-hero {
  min-height: 100vh;
  min-height: 100svh;
  padding: 112px clamp(18px, 4vw, 56px) 36px;
  background:
    linear-gradient(180deg, rgba(240, 249, 254, 0.16), rgba(240, 249, 254, 0.5) 58%, rgba(240, 249, 254, 0.82)),
    url("assets/brand/wolken.png") center center / cover no-repeat,
    var(--brand-sky);
}

.video-hero::before,
.video-hero::after {
  display: none;
}

.video-placeholder {
  position: relative;
  z-index: 1;
  width: min(1260px, 92vw);
  min-height: min(720px, 70svh);
  display: grid;
  align-content: start;
  justify-items: start;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: clamp(28px, 5vw, 76px);
  padding-top: clamp(180px, 30svh, 310px);
  text-align: left;
  backdrop-filter: none;
}

.video-placeholder::before,
.video-placeholder::after {
  display: none;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 920px;
}

.hero-copy .hero-title {
  max-width: none;
  margin: 0;
  color: var(--brand-orange);
  font-size: clamp(29px, 3.52vw, 58px);
  font-weight: 900;
  line-height: 0.88;
  white-space: nowrap;
  text-wrap: balance;
}

.hero-copy p {
  max-width: none;
  margin: 0;
  color: var(--brand-navy);
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 500;
  line-height: 1.28;
  white-space: nowrap;
}

.hero-scroll-link {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4svh, 44px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 15px 10px;
  border: 2px solid var(--brand-navy);
  border-radius: 999px;
  color: var(--brand-navy);
  background: rgba(240, 249, 254, 0.86);
  box-shadow: 5px 5px 0 rgba(0, 15, 46, 0.12);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-scroll-link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.hero-scroll-link:hover {
  color: var(--brand-white);
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  box-shadow: 3px 3px 0 rgba(0, 15, 46, 0.16);
  transform: translate(-50%, -2px);
}

.hero-scroll-link:focus-visible {
  outline: 3px solid rgba(240, 74, 32, 0.34);
  outline-offset: 4px;
}

.social-rail {
  right: clamp(18px, 4vw, 56px);
  z-index: 2;
}

.social-rail a {
  width: 46px;
  height: 46px;
  border: 2px solid var(--brand-navy);
  border-radius: 6px;
  color: var(--brand-navy);
  background: var(--brand-sky);
  box-shadow: 6px 6px 0 rgba(0, 15, 46, 0.12);
  backdrop-filter: none;
}

.social-rail a:hover {
  color: var(--brand-white);
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  transform: translateX(-4px);
}

.hero,
.embedded-work {
  color: var(--brand-navy);
  background: var(--brand-blue);
}

.embedded-work::before,
.hero::before {
  display: none;
}

.wheel-scene::before,
.wheel-scene::after,
.embedded-work .wheel-scene::before,
.embedded-work .wheel-scene::after {
  display: none;
}

.project-card {
  border: 4px solid var(--brand-sky);
  border-radius: 6px;
  background: var(--brand-sky);
  box-shadow:
    18px 20px 0 rgba(0, 15, 46, 0.14),
    0 24px 60px rgba(0, 15, 46, 0.18);
  backdrop-filter: none;
}

.project-card::before {
  display: none;
}

.project-card::after {
  background: rgba(0, 15, 46, var(--shade, 0.08));
  opacity: 1;
}

.project-card img {
  opacity: 1;
  filter: saturate(1.02) contrast(1.02);
}

.card-number,
.card-arrow {
  border: 0;
  border-radius: 4px;
  color: var(--brand-white);
  background: var(--brand-orange);
  font-weight: 800;
}

.card-arrow {
  color: var(--brand-sky);
  background: var(--brand-navy);
}

.project-info {
  width: min(430px, 30vw);
  border: 2px solid var(--brand-navy);
  border-left: 14px solid var(--brand-orange);
  border-radius: 6px;
  color: var(--brand-navy);
  background: var(--brand-sky);
  box-shadow: 16px 18px 0 rgba(0, 15, 46, 0.14);
  backdrop-filter: none;
}

.project-info h2 {
  color: var(--brand-navy);
  font-weight: 900;
}

.project-info p:not(.kicker) {
  color: var(--brand-navy);
  font-size: clamp(12px, 0.82vw, 14px);
}

.wheel-meta {
  border-top: 0;
  padding-top: 0;
  color: var(--brand-navy);
  letter-spacing: 0;
}

.carousel-controls {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vw, 44px);
  z-index: 14;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
}

.carousel-button {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 2px solid var(--brand-navy);
  border-radius: 6px;
  color: var(--brand-navy);
  background: var(--brand-sky);
  box-shadow: 8px 9px 0 rgba(0, 15, 46, 0.14);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.carousel-button span {
  display: block;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}

.carousel-button:hover {
  color: var(--brand-white);
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  box-shadow: 6px 7px 0 rgba(0, 15, 46, 0.18);
  transform: translateY(-2px);
}

.carousel-button:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 4px;
}

.offers-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(116px, 14vw, 214px) clamp(18px, 5vw, 72px);
  background: var(--brand-sky);
}

.offers-section::before {
  content: "";
  position: absolute;
  left: -18vw;
  bottom: -22vw;
  width: min(780px, 66vw);
  height: min(780px, 66vw);
  border: clamp(26px, 5vw, 62px) solid var(--brand-blue);
  border-right-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  pointer-events: none;
}

.offers-heading,
.offers-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

.offers-heading {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(50px, 7vw, 104px);
}

.offers-heading > * {
  min-width: 0;
}

.offers-heading h2 {
  max-width: min(11ch, 100%);
  margin: 0;
  color: var(--brand-orange);
  font-size: clamp(46px, 7.2vw, 112px);
  font-weight: 900;
  line-height: 0.9;
}

.offers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid var(--brand-navy);
  border-bottom: 2px solid var(--brand-navy);
}

.offer-card {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(54px, 0.16fr) minmax(0, 1fr);
  gap: clamp(26px, 6vw, 96px);
  align-items: start;
  border: 0;
  border-bottom: 2px solid var(--brand-navy);
  border-radius: 0;
  background: var(--brand-sky);
  padding: clamp(42px, 6vw, 76px) 0;
}

.offer-card:last-child {
  border-bottom: 0;
}

.offer-card:nth-child(2) {
  color: var(--brand-navy);
  background: var(--brand-sky);
}

.offer-card:nth-child(3) {
  color: var(--brand-navy);
  background: var(--brand-sky);
}

.offer-card span {
  display: block;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.offer-copy {
  min-width: 0;
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
}

.offer-card h3 {
  max-width: 100%;
  margin: 0;
  color: var(--brand-orange);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.02;
  text-wrap: balance;
}

.offer-service {
  margin: 0;
  color: var(--brand-navy);
  font-size: clamp(20px, 2.25vw, 34px);
  font-weight: 900;
  line-height: 1;
}

.offer-card p {
  margin: 0;
  max-width: 44ch;
  color: rgba(0, 15, 46, 0.72);
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.48;
}

.offer-card p.offer-service {
  color: var(--brand-navy);
  font-size: clamp(20px, 2.25vw, 34px);
  line-height: 1;
}

.faq-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: var(--brand-navy);
  padding: clamp(42px, 6vw, 76px) clamp(18px, 5vw, 72px) clamp(92px, 11vw, 156px);
  background: var(--brand-sky);
}

.faq-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  gap: clamp(18px, 3vw, 30px);
}

.faq-heading h2 {
  max-width: 24ch;
  margin: 0;
  color: var(--brand-navy);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1.04;
  text-wrap: balance;
}

.faq-list p {
  margin: 0;
  color: rgba(0, 15, 46, 0.74);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.46;
}

.faq-list h3 {
  margin: 0;
  color: var(--brand-navy);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 900;
  line-height: 1.18;
  text-wrap: balance;
}

.faq-heading {
  display: grid;
  gap: 10px;
}

.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.faq-list article {
  display: grid;
  gap: 10px;
  min-height: 0;
  border: 2px solid rgba(0, 15, 46, 0.16);
  border-radius: 6px;
  padding: clamp(18px, 2.2vw, 26px);
  background: rgba(255, 255, 255, 0.68);
}

.question-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(300px, 1fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: start;
  border-top: 2px solid rgba(0, 15, 46, 0.16);
  padding-top: clamp(24px, 3.6vw, 44px);
}

.question-copy {
  display: grid;
  gap: 10px;
}

.question-copy h3 {
  margin: 0;
  color: var(--brand-navy);
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 900;
  line-height: 1.05;
}

.question-copy p:not(.kicker),
.question-status {
  margin: 0;
  color: rgba(0, 15, 46, 0.72);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.46;
}

.question-form {
  display: grid;
  gap: 10px;
}

.question-form label:not(.honeypot-field) {
  color: var(--brand-navy);
  font-size: 13px;
  font-weight: 900;
}

.question-form textarea {
  width: 100%;
  min-height: 128px;
  resize: vertical;
  border: 2px solid rgba(0, 15, 46, 0.22);
  border-radius: 6px;
  padding: 14px;
  color: var(--brand-navy);
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 15px;
  line-height: 1.42;
}

.question-form textarea:focus {
  border-color: var(--brand-orange);
  outline: 3px solid rgba(240, 64, 32, 0.18);
  outline-offset: 0;
}

.question-form button {
  width: fit-content;
  min-height: 44px;
  border: 2px solid var(--brand-navy);
  border-radius: 4px;
  padding: 0 14px;
  color: var(--brand-white);
  background: var(--brand-navy);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.question-form button:hover,
.question-form button:focus-visible {
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  transform: translateY(-1px);
}

.honeypot-field {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(72px, 9vw, 124px) clamp(18px, 5vw, 64px) clamp(46px, 6vw, 82px);
  color: var(--brand-sky);
  background: var(--brand-navy);
}

.contact-section::before {
  content: "";
  position: absolute;
  right: -14vw;
  bottom: -22vw;
  width: min(760px, 64vw);
  height: min(760px, 64vw);
  border: clamp(28px, 5vw, 62px) solid var(--brand-orange);
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  pointer-events: none;
}

.contact-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: clamp(30px, 5vw, 64px);
  align-items: end;
  margin-inline: auto;
}

.contact-copy {
  display: grid;
  gap: 18px;
}

.contact-copy .kicker {
  color: var(--brand-orange);
}

.contact-copy h2 {
  max-width: 100%;
  margin: 0;
  color: var(--brand-sky);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.02;
}

.contact-copy p:not(.kicker) {
  max-width: 48ch;
  margin: 0;
  color: rgba(240, 249, 254, 0.82);
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.42;
}

.contact-links {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  border: 0;
  background: transparent;
}

.contact-links a {
  display: grid;
  align-items: center;
  justify-content: center;
  width: clamp(50px, 4vw, 54px);
  height: clamp(50px, 4vw, 54px);
  min-width: 0;
  min-height: 0;
  border: 2px solid var(--brand-sky);
  padding: 0;
  color: var(--brand-sky);
  background: rgba(240, 249, 254, 0.04);
  font-size: 0;
  font-weight: 900;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contact-links a::after {
  content: none;
}

.contact-links svg {
  width: clamp(23px, 2vw, 28px);
  height: clamp(23px, 2vw, 28px);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.contact-links .brand-icon {
  color: currentColor;
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.contact-links a:hover {
  color: var(--brand-navy);
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  transform: translateY(-2px);
}

.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 18px 28px;
  border-top: 2px solid var(--brand-navy);
  padding-block: clamp(28px, 4vw, 46px);
  padding-inline: max(clamp(18px, 5vw, 64px), calc((100% - 1180px) / 2));
  color: var(--brand-navy);
  background: var(--brand-sky);
}

.footer-brand {
  order: 2;
  display: grid;
  gap: 8px;
}

.footer-brand a {
  width: fit-content;
  border-bottom: 0;
  color: var(--brand-orange);
  font-size: clamp(24px, 2.9vw, 44px);
  font-weight: 900;
  line-height: 0.9;
}

.footer-brand span {
  color: rgba(0, 15, 46, 0.74);
  font-size: 12px;
  font-weight: 800;
}

.footer-links {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
  gap: 10px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 2px solid var(--brand-navy);
  border-radius: 4px;
  padding: 0 14px;
  color: var(--brand-navy);
  background: var(--brand-white);
  font-size: 13px;
  font-weight: 900;
}

.footer-links a:hover,
.footer-links a[aria-current="page"] {
  color: var(--brand-white);
  border-color: var(--brand-orange);
  background: var(--brand-orange);
}

.footer-hosted-badge,
.site-footer a[href^="https://hostedby.greenwebspace.com"] {
  order: 1;
  display: block;
  flex: 0 0 auto;
  align-self: flex-end;
  width: max-content;
  border: 0;
  padding: 0;
  background: transparent;
  line-height: 0;
}

.footer-hosted-badge:hover,
.site-footer a[href^="https://hostedby.greenwebspace.com"]:hover {
  border-color: transparent;
  background: transparent;
}

.footer-hosted-badge img,
.site-footer a[href^="https://hostedby.greenwebspace.com"] img {
  display: block;
  width: auto;
  height: 60px;
  max-width: 100%;
}

.legal-page {
  background: var(--brand-sky);
}

.legal-page .onepage-header {
  border-bottom: 2px solid rgba(0, 15, 46, 0.12);
  background: rgba(240, 249, 254, 0.94);
  box-shadow: 0 14px 34px rgba(0, 15, 46, 0.08);
  backdrop-filter: blur(14px);
}

.legal-main {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(132px, 14vw, 190px) clamp(18px, 5vw, 72px) clamp(72px, 9vw, 122px);
  color: var(--brand-navy);
  background: var(--brand-sky);
}

.legal-hero,
.legal-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

.legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: clamp(34px, 5vw, 64px);
}

.legal-hero > * {
  min-width: 0;
}

.legal-hero .kicker {
  color: var(--brand-orange);
}

.legal-hero h1 {
  max-width: 10ch;
  margin: 0;
  color: var(--brand-orange);
  font-size: clamp(54px, 9vw, 132px);
  font-weight: 900;
  line-height: 0.86;
}

.legal-hero p {
  max-width: 62ch;
  margin: 0;
  color: rgba(0, 15, 46, 0.78);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
  border: 2px solid var(--brand-navy);
  background: var(--brand-sky);
}

.legal-card {
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: clamp(24px, 3.5vw, 46px);
  background: var(--brand-sky);
}

.legal-card:nth-child(2n) {
  border-right: 0;
}

.legal-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.legal-card-wide {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
}

.legal-flow {
  display: grid;
  gap: 16px;
}

.legal-card h2 {
  margin: 0 0 22px;
  color: var(--brand-navy);
  font-size: clamp(26px, 2.7vw, 42px);
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}

.legal-card dl,
.legal-card p,
.legal-card ul {
  margin: 0;
}

.legal-card dl {
  display: grid;
  gap: 10px;
}

.legal-card dt {
  color: var(--brand-orange);
  font-size: 12px;
  font-weight: 900;
}

.legal-card dd {
  margin: 0 0 10px;
  color: var(--brand-navy);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.45;
}

.legal-card p {
  color: rgba(0, 15, 46, 0.78);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.48;
}

.legal-card strong {
  color: var(--brand-navy);
  font-weight: 900;
}

.legal-card ul {
  display: grid;
  gap: 7px;
  padding-left: 20px;
  color: rgba(0, 15, 46, 0.78);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.42;
}

.legal-card p + p,
.legal-card p + ul,
.legal-card ul + p {
  margin-top: 14px;
}

.legal-flow p + p,
.legal-flow p + ul,
.legal-flow ul + p {
  margin-top: 0;
}

.legal-meta {
  margin-top: 12px;
  opacity: 0.65;
  font-size: 0.85em;
}

.legal-card a {
  color: var(--brand-orange);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.overlay-backdrop {
  background: rgba(0, 15, 46, 0.34);
  backdrop-filter: blur(10px);
}

.overlay {
  padding: clamp(10px, 2.4vw, 24px);
}

.overlay-panel {
  width: min(1180px, calc(100vw - clamp(20px, 4.8vw, 48px)));
  height: min(760px, calc(100svh - clamp(20px, 4.8vw, 48px)));
  max-height: calc(100svh - clamp(20px, 4.8vw, 48px));
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.78fr);
  overflow: hidden;
  border: 2px solid var(--brand-navy);
  border-radius: 6px;
  color: var(--brand-navy);
  background: var(--brand-sky);
  box-shadow: 18px 20px 0 rgba(0, 15, 46, 0.18);
  backdrop-filter: none;
}

.overlay-close {
  top: clamp(12px, 1.8vw, 22px);
  right: clamp(12px, 1.8vw, 22px);
  min-height: 44px;
  border: 2px solid var(--brand-navy);
  border-radius: 4px;
  color: var(--brand-navy);
  background: var(--brand-sky);
  padding: 0 clamp(12px, 1.6vw, 18px);
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 800;
  line-height: 1;
  backdrop-filter: none;
}

.overlay-image-wrap {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-right: 2px solid var(--brand-navy);
  background: var(--brand-blue);
}

.overlay-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gallery-button {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid var(--brand-navy);
  border-radius: 4px;
  color: var(--brand-navy);
  background: var(--brand-sky);
  box-shadow: 6px 7px 0 rgba(0, 15, 46, 0.16);
  transform: translateY(-50%);
}

.gallery-button[hidden],
.gallery-thumbs[hidden] {
  display: none;
}

.gallery-button-prev {
  left: clamp(12px, 2vw, 22px);
}

.gallery-button-next {
  right: clamp(12px, 2vw, 22px);
}

.gallery-button span {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}

.gallery-button:hover,
.gallery-button:focus-visible {
  color: var(--brand-white);
  border-color: var(--brand-orange);
  background: var(--brand-orange);
}

.gallery-thumbs {
  position: absolute;
  left: clamp(12px, 2vw, 22px);
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  z-index: 4;
  display: flex;
  gap: 8px;
  justify-content: center;
  overflow-x: auto;
  padding: 2px 0 8px;
  scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.gallery-thumb {
  flex: 0 0 58px;
  width: 58px;
  height: 42px;
  overflow: hidden;
  border: 2px solid var(--brand-navy);
  border-radius: 4px;
  background: var(--brand-sky);
  opacity: 0.72;
}

.gallery-thumb.is-active,
.gallery-thumb:hover,
.gallery-thumb:focus-visible {
  opacity: 1;
  border-color: var(--brand-orange);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-content {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  padding: clamp(82px, 8vw, 112px) clamp(26px, 4vw, 58px) clamp(28px, 4vw, 52px);
}

.overlay-content h2,
.overlay-content p:not(.kicker) {
  color: var(--brand-navy);
}

.overlay-content h2 {
  max-width: 100%;
  font-size: clamp(34px, 5.2vw, 72px);
  overflow-wrap: anywhere;
}

.overlay-content p:not(.kicker) {
  margin-bottom: 24px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.42;
}

.overlay-content a {
  width: fit-content;
  min-height: 44px;
  border: 2px solid var(--brand-orange);
  border-radius: 4px;
  padding: 0 14px;
  color: var(--brand-white);
  background: var(--brand-orange);
  letter-spacing: 0;
}

.about-main {
  position: relative;
  z-index: 1;
}

.about-page:not(.legal-page) .about-main {
  background:
    linear-gradient(180deg, rgba(115, 184, 230, 0.08), rgba(115, 184, 230, 0.18) 50%, rgba(115, 184, 230, 0.36)),
    url("assets/brand/wolken.png") center top / cover no-repeat,
    var(--brand-blue);
  background:
    linear-gradient(180deg, rgba(115, 184, 230, 0.08), rgba(115, 184, 230, 0.18) 50%, rgba(115, 184, 230, 0.36)),
    image-set(
      url("assets/brand/responsive/wolken-640.jpg") 1x,
      url("assets/brand/responsive/wolken-960.jpg") 2x,
      url("assets/brand/wolken.png") 3x
    ) center top / cover no-repeat,
    var(--brand-blue);
}

.about-main::before {
  content: "";
  position: absolute;
  left: var(--work-swoosh-offset);
  top: 0;
  z-index: 0;
  width: var(--work-swoosh-width);
  height: var(--work-swoosh-height);
  background: var(--brand-orange);
  -webkit-mask-image: var(--work-swoosh-mask);
  mask-image: var(--work-swoosh-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

.about-page:not(.legal-page) .about-main::before {
  display: none;
}

.about-page::before,
.about-page::after {
  display: none;
}

.about-hero h1 {
  color: var(--brand-navy);
}

.about-content {
  position: relative;
  z-index: 1;
}

.about-card {
  border: 2px solid var(--brand-navy);
  border-radius: 6px;
  color: var(--brand-navy);
  background: var(--brand-sky);
  box-shadow: 14px 16px 0 rgba(0, 15, 46, 0.12);
  backdrop-filter: none;
}

.about-card:nth-child(2) {
  color: var(--brand-white);
  background: var(--brand-orange);
}

.about-card:nth-child(3) {
  color: var(--brand-white);
  background: var(--brand-navy);
}

.about-card span,
.about-card h2,
.about-card p {
  color: inherit;
}

@media (max-width: 1100px) {
  .overlay {
    place-items: stretch;
    padding: 12px;
  }

  .overlay-panel {
    width: min(780px, 100%);
    height: auto;
    max-height: calc(100svh - 24px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, min(42svh, 360px)) auto;
    justify-self: center;
    overflow-y: auto;
  }

  .overlay-image-wrap {
    border-right: 0;
    border-bottom: 2px solid var(--brand-navy);
  }

  .overlay-content {
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    overflow: visible;
    padding: clamp(24px, 5vw, 42px);
  }

  .overlay-content h2 {
    font-size: clamp(34px, 8vw, 58px);
  }
}

@media (max-width: 980px) {
  .project-info {
    right: 18px;
    width: min(360px, 38vw);
  }

  .offers-grid {
    grid-template-columns: 1fr;
  }

  .offer-card {
    min-height: 0;
    border-right: 0;
    border-bottom: 2px solid var(--brand-navy);
  }

  .offer-card:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 800px) {
  .site-header {
    padding: 16px 18px;
  }

  .onepager-page:not(.about-page) .onepage-header:not(.is-scrolled) .brand-logo {
    width: min(172px, 48vw);
  }

  .onepage-header.is-scrolled .brand-logo {
    width: 116px;
  }

  .video-hero {
    padding: 92px 0 32px;
  }

  .video-placeholder {
    width: calc(100% - 36px);
    min-height: 62vh;
    padding: 24px;
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
  }

  .hero-copy .hero-title {
    max-width: 100%;
    font-size: clamp(16px, 5.2vw, 22px);
  }

  .hero-copy p {
    max-width: 100%;
    font-size: 14px;
  }

  .social-rail {
    bottom: 72px;
  }

  .social-rail a {
    width: 42px;
    height: 42px;
  }

  .mobile-work {
    overflow: hidden;
    padding: 92px 0 52px;
  }

  .onepager-page .mobile-work {
    background: var(--brand-blue);
  }

  .mobile-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 18px 18px;
    scroll-padding-inline: 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-list::-webkit-scrollbar {
    display: none;
  }

  .mobile-card {
    flex: 0 0 min(82vw, 340px);
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
    min-height: min(560px, 68vh);
    overflow: hidden;
    border: 2px solid var(--brand-navy);
    border-radius: 6px;
    color: var(--brand-navy);
    background: var(--brand-sky);
    box-shadow: 8px 9px 0 rgba(0, 15, 46, 0.12);
    backdrop-filter: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .mobile-card img {
    width: 100%;
    height: clamp(240px, 42vh, 360px);
    border-radius: 0;
    object-fit: cover;
  }

  .mobile-card > span {
    display: grid;
    align-content: end;
    padding: 18px;
  }

  .mobile-card small {
    color: var(--brand-orange);
    letter-spacing: 0;
  }

  .mobile-card strong {
    font-size: clamp(20px, 6vw, 28px);
  }

  .carousel-controls {
    display: none;
  }

  .offers-section {
    padding: clamp(88px, 18vw, 126px) 18px;
  }

  .offers-heading {
    margin-bottom: 44px;
  }

  .offer-card {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 42px 0;
  }

  .offer-card h3 {
    max-width: 100%;
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.1;
    overflow-wrap: break-word;
  }

  .contact-section {
    padding: 62px 18px 46px;
  }

  .contact-section::before {
    right: -42vw;
    bottom: -28vw;
    width: 86vw;
    height: 86vw;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .contact-copy h2 {
    max-width: 100%;
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.1;
  }

  .contact-copy p:not(.kicker) {
    font-size: 15px;
  }

  .contact-links a {
    width: 54px;
    height: 54px;
    min-height: 0;
    font-size: 0;
  }

  .site-footer {
    align-items: flex-start;
    padding: 28px 18px;
  }

  .footer-links {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .footer-links a {
    min-height: 40px;
  }

  .legal-main {
    padding: 112px 18px 68px;
  }

  .legal-hero h1 {
    max-width: 100%;
    font-size: clamp(44px, 13vw, 72px);
    overflow-wrap: break-word;
  }

  .legal-grid {
    grid-template-columns: 1fr;
  }

  .legal-card,
  .legal-card:nth-child(2n),
  .legal-card:nth-last-child(-n + 2) {
    min-height: 0;
    border-right: 0;
    border-bottom: 2px solid var(--brand-navy);
  }

  .legal-card:last-child {
    border-bottom: 0;
  }

  .about-main {
    padding: 0;
  }

  .about-main::before {
    left: var(--work-swoosh-offset);
    width: var(--work-swoosh-width);
    height: var(--work-swoosh-height);
  }

  .about-hero {
    min-height: 100vh;
    min-height: 100svh;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 18px;
    padding: max(108px, calc(78px + env(safe-area-inset-top))) 18px 0;
  }

  .about-hero h1 {
    max-width: 8ch;
    font-size: clamp(54px, 17vw, 86px);
  }

  .about-hero-media {
    width: min(92vw, 520px);
    justify-self: center;
    margin-top: -18px;
  }

  .about-content {
    width: calc(100% - 32px);
    padding-bottom: 54px;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .about-card {
    min-height: 220px;
  }

  .overlay {
    padding: 10px;
  }

  .overlay-panel {
    width: 100%;
    max-height: calc(100svh - 20px);
    grid-template-rows: minmax(210px, min(38svh, 320px)) auto;
    box-shadow: 8px 9px 0 rgba(0, 15, 46, 0.16);
  }

  .overlay-close {
    min-height: 40px;
    padding-inline: 11px;
    font-size: 13px;
  }

  .gallery-button {
    width: 42px;
    height: 42px;
    box-shadow: 4px 5px 0 rgba(0, 15, 46, 0.14);
  }

  .gallery-button span {
    font-size: 22px;
  }

  .gallery-thumb {
    flex-basis: 48px;
    width: 48px;
    height: 34px;
  }

  .overlay-content {
    padding: 22px 18px 24px;
  }

  .overlay-content h2 {
    margin-bottom: 14px;
    font-size: clamp(26px, 8.2vw, 36px);
    line-height: 0.96;
    overflow-wrap: normal;
    text-wrap: balance;
    word-break: normal;
  }

  .overlay-content p:not(.kicker) {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.45;
  }

  .overlay-content a {
    width: 100%;
    justify-content: center;
  }
}

/* Responsive launch polish */
@media (max-width: 1180px) and (min-width: 801px) {
  .video-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 96px;
  }

  .video-placeholder {
    width: min(1080px, 92vw);
    min-height: min(660px, 68svh);
  }

  .hero-copy .hero-title {
    font-size: clamp(28px, 4vw, 47px);
  }

  .hero {
    min-height: 86svh;
    padding-inline: clamp(22px, 3vw, 42px);
  }

  .project-info {
    right: clamp(18px, 3vw, 34px);
    width: min(360px, 34vw);
  }

  .contact-inner {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: clamp(28px, 4vw, 48px);
  }
}

@media (max-width: 800px) {
  .site-header {
    padding: 14px 16px;
  }

  .onepager-page:not(.about-page) .onepage-header:not(.is-scrolled) .brand-logo {
    top: max(14px, env(safe-area-inset-top));
    width: min(150px, 42vw);
  }

  .onepage-header.is-scrolled .brand-logo,
  .onepage-header .brand-logo {
    width: min(112px, 34vw);
  }

  .menu-button {
    width: 34px;
    min-height: 34px;
    padding: 7px 2px;
  }

  .onepager-page:not(.about-page) .onepage-header:not(.is-scrolled) .nav-links {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50% - 6px));
  }

  .menu-panel {
    top: calc(100% + 6px);
    right: 16px;
    width: min(260px, calc(100vw - 32px));
  }

  .menu-panel a {
    min-height: 44px;
    font-size: 13px;
  }

  .video-hero {
    min-height: 100svh;
    padding: max(104px, calc(72px + env(safe-area-inset-top))) 0 26px;
    align-items: start;
  }

  .video-placeholder {
    width: calc(100% - 32px);
    min-height: auto;
    align-content: start;
    padding: clamp(18px, 6vw, 28px);
    padding-top: clamp(108px, 22svh, 160px);
  }

  .hero-copy {
    transform: none;
  }

  .hero-copy .hero-title {
    max-width: none;
    margin: 0;
    font-size: clamp(18px, 6vw, 27px);
    line-height: 0.9;
  }

  .hero-copy p {
    max-width: none;
    font-size: clamp(12px, 3.6vw, 17px);
    line-height: 1.26;
  }

  .hero-scroll-link {
    bottom: clamp(18px, 4svh, 30px);
    min-height: 34px;
    padding: 8px 13px 9px;
    font-size: 11px;
  }

  .social-rail {
    bottom: clamp(70px, 10svh, 96px);
    gap: 10px;
  }

  .social-rail a {
    width: 44px;
    height: 44px;
  }

  .mobile-work {
    min-height: auto;
    padding: 72px 0 46px;
  }

  .onepager-page .mobile-work {
    min-height: auto;
  }

  .mobile-list {
    gap: 14px;
    padding-inline: max(16px, env(safe-area-inset-left));
    scroll-padding-inline: max(16px, env(safe-area-inset-left));
  }

  .mobile-card {
    flex-basis: min(84vw, 360px);
    min-height: auto;
    grid-template-rows: auto minmax(132px, auto);
  }

  .mobile-card img {
    height: clamp(220px, 48vw, 330px);
  }

  .mobile-card > span {
    min-height: 132px;
  }

  .offers-section,
  .faq-section,
  .contact-section {
    padding-inline: 16px;
  }

  .offers-heading h2,
  .faq-heading h2,
  .contact-copy h2,
  .legal-hero h1,
  .about-hero h1 {
    max-width: 100%;
    text-wrap: balance;
  }

  .faq-list {
    grid-template-columns: 1fr;
  }

  .faq-list article {
    min-height: 0;
  }

  .question-panel {
    grid-template-columns: 1fr;
  }

  .question-form button {
    width: 100%;
  }

  .contact-links a {
    min-width: 0;
    width: 52px;
    height: 52px;
    min-height: 0;
    gap: 0;
    padding-inline: 0;
    font-size: 0;
  }

  .site-footer {
    gap: 22px;
  }

  .footer-brand a {
    font-size: clamp(26px, 7.6vw, 37px);
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .footer-links a {
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    text-align: center;
  }

  .footer-hosted-badge,
.site-footer a[href^="https://hostedby.greenwebspace.com"] {
    width: 100%;
    align-self: center;
  }

  .footer-hosted-badge img,
.site-footer a[href^="https://hostedby.greenwebspace.com"] img {
    height: 56px;
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .video-hero {
    background-position: center top;
  }

  .about-hero {
    gap: 10px;
    padding-top: max(100px, calc(72px + env(safe-area-inset-top)));
  }

  .about-hero h1 {
    font-size: clamp(44px, 16vw, 66px);
  }

  .about-hero-media {
    width: min(108vw, 450px);
    margin-right: -7vw;
  }

  .hero-copy {
    transform: none;
  }

  .hero-copy .hero-title {
    font-size: clamp(17px, 6.4vw, 25px);
  }

  .hero-copy p {
    max-width: none;
  }

  .social-rail {
    bottom: clamp(72px, 11svh, 92px);
  }

  .mobile-card {
    flex-basis: min(86vw, 330px);
  }

  .mobile-card strong {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 0.96;
  }

  .offer-card {
    min-height: 0;
    padding: 40px 0;
  }

  .contact-inner {
    gap: 28px;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .legal-main {
    padding-inline: 16px;
  }

  .legal-card {
    padding: 22px 18px;
  }
}

@media (max-width: 380px) {
  .onepager-page:not(.about-page) .onepage-header:not(.is-scrolled) .brand-logo {
    width: min(132px, 40vw);
  }

  .about-hero h1 {
    font-size: clamp(38px, 15.5vw, 54px);
  }

  .about-hero-media {
    width: 114vw;
    margin-right: -12vw;
  }

  .video-placeholder {
    width: calc(100% - 28px);
    padding-inline: 16px;
  }

  .hero-copy .hero-title {
    font-size: clamp(15px, 6.2vw, 22px);
  }

  .hero-copy p {
    font-size: 12px;
  }

  .social-rail a {
    width: 40px;
    height: 40px;
  }

  .contact-links a {
    width: 48px;
    height: 48px;
    font-size: 0;
  }
}

/* Temporary holding page */
.holding-page {
  min-height: 100svh;
  color: var(--brand-navy);
  background:
    linear-gradient(180deg, rgba(240, 249, 254, 0.16), rgba(240, 249, 254, 0.68) 62%, var(--brand-sky)),
    image-set(
      url("assets/brand/responsive/wolken-640.jpg") 1x,
      url("assets/brand/responsive/wolken-960.jpg") 2x,
      url("assets/brand/wolken.png") 3x
    ) center center / cover no-repeat,
    var(--brand-sky);
}

.holding-page::before,
.holding-page::after {
  display: none;
}

.holding-main {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 86px);
  display: grid;
  align-content: center;
  gap: clamp(38px, 7vw, 86px);
  padding: clamp(26px, 5vw, 58px);
}

.holding-logo {
  width: clamp(148px, 16vw, 236px);
  display: block;
}

.holding-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.holding-hero {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.72fr);
  gap: clamp(34px, 7vw, 96px);
  align-items: end;
}

.holding-copy {
  display: grid;
  gap: 18px;
}

.holding-copy .kicker {
  color: var(--brand-orange);
  font-size: clamp(13px, 1.3vw, 18px);
}

.holding-copy h1 {
  max-width: 9ch;
  margin: 0;
  color: var(--brand-navy);
  font-size: clamp(62px, 10vw, 142px);
  font-weight: 900;
  line-height: 0.88;
}

.holding-copy p:not(.kicker) {
  max-width: 48ch;
  margin: 0;
  color: var(--brand-navy);
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.36;
}

.holding-contact {
  display: grid;
  border: 2px solid var(--brand-navy);
  background: rgba(240, 249, 254, 0.68);
  box-shadow: 16px 18px 0 rgba(0, 15, 46, 0.12);
}

.holding-contact-link {
  display: grid;
  gap: 5px;
  min-width: 0;
  border-bottom: 2px solid var(--brand-navy);
  padding: clamp(14px, 1.65vw, 18px);
  color: var(--brand-navy);
  transition: background 0.18s ease, color 0.18s ease;
}

.holding-contact-link:last-child {
  border-bottom: 0;
}

.holding-contact-link span {
  color: var(--brand-orange);
  font-size: 11px;
  font-weight: 900;
}

.holding-contact-link strong {
  min-width: 0;
  font-size: clamp(17px, 1.85vw, 25px);
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.holding-contact-link:hover,
.holding-contact-link.is-primary {
  color: var(--brand-white);
  background: var(--brand-orange);
}

.holding-contact-link:hover span,
.holding-contact-link.is-primary span {
  color: var(--brand-navy);
}

.holding-footer {
  position: relative;
  z-index: 1;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 2px solid rgba(0, 15, 46, 0.18);
  padding: 20px clamp(20px, 5vw, 58px);
  color: var(--brand-navy);
  background: rgba(240, 249, 254, 0.84);
}

.holding-footer span {
  font-size: 12px;
  font-weight: 900;
}

.holding-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.holding-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 2px solid var(--brand-navy);
  border-radius: 4px;
  padding: 0 14px;
  color: var(--brand-navy);
  background: var(--brand-white);
  font-size: 13px;
  font-weight: 900;
}

.holding-footer a:hover {
  color: var(--brand-white);
  border-color: var(--brand-orange);
  background: var(--brand-orange);
}

@media (max-width: 860px) {
  .holding-main {
    min-height: auto;
    padding: max(24px, env(safe-area-inset-top)) 18px 42px;
  }

  .holding-logo {
    width: min(168px, 46vw);
    margin-inline: auto;
  }

  .holding-hero {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .holding-copy {
    justify-items: start;
  }

  .holding-copy h1 {
    max-width: 8.8ch;
    font-size: clamp(52px, 16vw, 84px);
  }

  .holding-copy p:not(.kicker) {
    font-size: clamp(15px, 4.2vw, 18px);
  }

  .holding-contact {
    box-shadow: 8px 9px 0 rgba(0, 15, 46, 0.12);
  }

  .holding-contact-link {
    padding: 14px;
  }

  .holding-contact-link strong {
    font-size: clamp(16px, 4.9vw, 22px);
  }

  .holding-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
  }

  .holding-footer nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .holding-footer a {
    justify-content: center;
  }
}

@media (max-width: 390px) {
  .holding-copy h1 {
    font-size: clamp(46px, 15vw, 62px);
  }

  .holding-footer nav {
    grid-template-columns: 1fr;
  }
}

/* Portfolio QA hardening */
.project-card {
  background: var(--brand-sky);
}

.project-card img {
  object-fit: contain;
  background: var(--brand-sky);
  filter: none;
  opacity: 1;
  transform: none;
}

.mobile-card img {
  object-fit: contain;
  background: var(--brand-sky);
}

.project-info h2 {
  max-width: 100%;
  font-size: clamp(23px, 2.1vw, 34px);
  line-height: 1.04;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.project-info p:not(.kicker) {
  font-size: clamp(12px, 0.8vw, 13px);
  line-height: 1.38;
}

.overlay-panel {
  width: min(1120px, calc(100vw - 32px));
  height: min(720px, calc(100svh - 32px));
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
}

.overlay-image-wrap {
  box-sizing: border-box;
  min-height: 0;
  padding: clamp(18px, 2.4vw, 34px) clamp(18px, 3vw, 42px) clamp(72px, 7vw, 96px);
}

.overlay-image-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.overlay-content {
  justify-content: flex-start;
  padding: clamp(52px, 5vw, 76px) clamp(24px, 3.4vw, 46px) clamp(24px, 3vw, 42px);
}

.overlay-content h2 {
  max-width: 100%;
  margin-bottom: 16px;
  font-size: clamp(27px, 3.1vw, 42px);
  line-height: 1.03;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

.overlay-content p:not(.kicker) {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.44;
}

@media (max-width: 1100px) {
  .overlay-panel {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  }

  .overlay-content h2 {
    font-size: clamp(25px, 3.2vw, 36px);
  }

  .project-info h2 {
    font-size: clamp(22px, 2vw, 30px);
  }
}

@media (max-width: 800px) {
  .overlay-panel {
    width: 100%;
    height: auto;
    max-height: calc(100svh - 20px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(260px, 46svh) auto;
  }

  .overlay-image-wrap {
    padding: 14px 14px 64px;
  }

  .overlay-content {
    padding: 22px 18px 24px;
  }

  .overlay-content h2 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.02;
  }

  .mobile-card strong {
    font-size: clamp(19px, 6.2vw, 28px);
    line-height: 1.02;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
  }
}

@media (max-width: 520px) {
  .overlay-panel {
    grid-template-rows: minmax(220px, 42svh) auto;
  }

  .overlay-content h2 {
    font-size: clamp(22px, 7.2vw, 30px);
  }
}

/* Detail image fit fix */
.overlay-panel {
  height: min(840px, calc(100svh - 24px));
  max-height: calc(100svh - 24px);
}

.overlay-image-wrap {
  align-items: center;
  justify-items: center;
  padding: clamp(14px, 2vw, 28px);
}

.overlay-image-wrap.has-gallery {
  padding-bottom: clamp(70px, 7vw, 94px);
}

.overlay-image-wrap > img,
.overlay-image-wrap img#overlayImage {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 800px) {
  .overlay-panel {
    height: auto;
    max-height: calc(100svh - 16px);
    grid-template-rows: minmax(320px, 58svh) auto;
  }

  .overlay-image-wrap {
    padding: 12px;
  }

  .overlay-image-wrap.has-gallery {
    padding-bottom: 58px;
  }
}

@media (max-width: 520px) {
  .overlay-panel {
    grid-template-rows: minmax(300px, 56svh) auto;
  }
}

/* Absolute guard against cropped detail images
   Korrigiert 07.08.2026: Dieser Block war die URSACHE des Anschnitts,
   nicht der Schutz davor. Die max-height war am Viewport gemessen
   (100svh - 96px), die Bildzelle ist aber eine Grid-Zeile mit eigener,
   viel kleinerer Hoehe: unter 1100px gilt
   grid-template-rows: minmax(220px, min(42svh, 360px)) -> max. 360px.
   Bei 962x1196 durfte das Bild dadurch 1100px hoch werden, sass in
   einer 360px hohen Zelle mit overflow: hidden und wurde oben und
   unten je ~174px abgeschnitten. object-fit: contain half nicht: es
   regelt nur, wie das Bild INNERHALB seiner eigenen Box gezeichnet
   wird, es verkleinert die Box nicht.
   max-height: 100% misst jetzt an der Zelle statt am Viewport. Die
   Zelle hat durch die Grid-Zeile eine definite Hoehe und min-height: 0,
   die Prozentangabe loest also sauber auf. Damit passt das Bild in
   jeder Breite vollstaendig hinein. */
.overlay-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-image-wrap img#overlayImage,
.overlay-image-wrap.has-gallery img#overlayImage {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Responsive Vorder-/Rueckseiten-Paare */
.project-story-images figure.project-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  align-items: center;
  justify-items: center;
  min-height: auto;
  width: 100%;
}

.project-story-images figure.project-image-pair img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
}

.overlay-image-pair {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.8vw, 24px);
  align-items: center;
  justify-items: center;
}

.overlay-image-pair[hidden],
.overlay-image-wrap > img[hidden] {
  display: none !important;
}

.overlay-image-pair img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}

@media (orientation: portrait), (max-width: 700px) {
  .project-story-images figure.project-image-pair,
  .overlay-image-pair {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .overlay-image-pair img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

/* Portfolio edge swooshes */
.work-page,
.onepager-page {
  --work-swoosh-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 562 1060' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 1060L0 668C88 650 158 586 216 493C268 411 307 309 336 207C356 136 368 70 380 0H430C407 180 379 329 339 469C296 623 238 761 170 871C117 957 61 1021 0 1060Z'/%3E%3C/svg%3E");
  --work-swoosh-width: clamp(170px, 19.5vw, 281px);
  --work-swoosh-height: clamp(340px, 53svh, 530px);
  --work-swoosh-offset: clamp(-39px, -2vw, -12px);
}

.work-page .hero,
.work-page .mobile-work,
.onepager-page .embedded-work,
.onepager-page .mobile-work {
  position: relative;
  overflow: hidden;
  background: var(--brand-blue);
  isolation: isolate;
}

.work-page .hero::before,
.work-page .hero::after,
.work-page .mobile-work::before,
.work-page .mobile-work::after,
.onepager-page .embedded-work::before,
.onepager-page .embedded-work::after,
.onepager-page .mobile-work::before,
.onepager-page .mobile-work::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  width: var(--work-swoosh-width);
  height: var(--work-swoosh-height);
  pointer-events: none;
  background: var(--brand-orange);
  -webkit-mask-image: var(--work-swoosh-mask);
  mask-image: var(--work-swoosh-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.work-page .hero::before,
.work-page .mobile-work::before,
.onepager-page .embedded-work::before,
.onepager-page .mobile-work::before {
  top: 0;
  left: var(--work-swoosh-offset);
}

.work-page .hero::after,
.work-page .mobile-work::after,
.onepager-page .embedded-work::after,
.onepager-page .mobile-work::after {
  right: var(--work-swoosh-offset);
  bottom: 0;
  transform: rotate(180deg);
}

.work-page .wheel-scene,
.work-page .wheel-meta,
.work-page .mobile-list,
.onepager-page .wheel-scene,
.onepager-page .wheel-meta,
.onepager-page .mobile-list {
  position: relative;
  z-index: 1;
}

@media (max-width: 800px) {
  .work-page,
  .onepager-page {
    --work-swoosh-width: clamp(130px, 41vw, 215px);
    --work-swoosh-height: clamp(270px, 46svh, 410px);
    --work-swoosh-offset: clamp(-31px, -5vw, -12px);
  }
}

/* About intro header mirrors the home page */
.about-page:not(.legal-page) .onepage-header:not(.is-scrolled) .brand-logo {
  position: absolute;
  top: 24px;
  left: 50%;
  width: clamp(176px, 15vw, 232px);
  transform: translateX(-50%);
}

.about-page:not(.legal-page) .onepage-header:not(.is-scrolled) .nav-links {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.about-page:not(.legal-page) .onepage-header:not(.is-scrolled) .menu-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
}

@media (max-width: 800px) {
  .about-page:not(.legal-page) .onepage-header:not(.is-scrolled) .brand-logo {
    top: max(14px, env(safe-area-inset-top));
    width: min(150px, 42vw);
  }

  .about-page:not(.legal-page) .onepage-header:not(.is-scrolled) .nav-links {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50% - 6px));
  }
}

@media (max-width: 380px) {
  .about-page:not(.legal-page) .onepage-header:not(.is-scrolled) .brand-logo {
    width: min(132px, 40vw);
  }
}

/* About hero layering */
.about-page:not(.legal-page) .about-hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
  gap: 0;
  overflow: visible;
}

.about-page:not(.legal-page) .about-hero::before,
.about-page:not(.legal-page) .about-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.about-page:not(.legal-page) .about-hero::before {
  inset: -6% -5% -18%;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(115, 184, 230, 0.1), rgba(115, 184, 230, 0.24) 48%, rgba(115, 184, 230, 0.58)),
    linear-gradient(90deg, rgba(115, 184, 230, 0.18), rgba(115, 184, 230, 0)),
    url("assets/brand/wolken.png") center 48% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.72) 78%, rgba(0, 0, 0, 0.22) 91%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.72) 78%, rgba(0, 0, 0, 0.22) 91%, transparent 100%);
  transform: translate3d(-1%, 0, 0) scale(1.04);
  animation: about-cloud-drift 28s ease-in-out infinite alternate;
}

.about-page:not(.legal-page) .about-content::before {
  content: "";
  position: absolute;
  top: clamp(-220px, -15vw, -132px);
  left: 50%;
  z-index: 0;
  width: 100vw;
  height: clamp(220px, 22vw, 350px);
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(180deg, rgba(115, 184, 230, 0), rgba(115, 184, 230, 0.34) 34%, rgba(115, 184, 230, 0.2) 66%, rgba(115, 184, 230, 0)),
    url("assets/brand/wolken.png") center 58% / cover no-repeat;
  background:
    linear-gradient(180deg, rgba(115, 184, 230, 0), rgba(115, 184, 230, 0.34) 34%, rgba(115, 184, 230, 0.2) 66%, rgba(115, 184, 230, 0)),
    image-set(
      url("assets/brand/responsive/wolken-640.jpg") 1x,
      url("assets/brand/responsive/wolken-960.jpg") 2x,
      url("assets/brand/wolken.png") 3x
    ) center 58% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 74%, transparent 100%);
  transform: translateX(-50%);
}

.about-page:not(.legal-page) .about-card {
  position: relative;
  z-index: 1;
}

.about-page:not(.legal-page) .about-hero::after {
  top: 0;
  left: calc((100% - 100vw) / 2 + var(--work-swoosh-offset));
  z-index: 2;
  width: var(--work-swoosh-width);
  height: var(--work-swoosh-height);
  background: var(--brand-orange);
  -webkit-mask-image: var(--work-swoosh-mask);
  mask-image: var(--work-swoosh-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.about-page:not(.legal-page) .about-hero-copy {
  z-index: 4;
  justify-self: start;
  margin-right: clamp(-150px, -8vw, -42px);
  pointer-events: none;
}

.about-page:not(.legal-page) .about-hero h1 {
  position: relative;
  z-index: 4;
  width: max-content;
  max-width: none;
  color: var(--brand-navy);
  font-size: clamp(92px, 10.4vw, 202px);
  line-height: 0.84;
  text-wrap: nowrap;
}

.about-page:not(.legal-page) .about-hero-media {
  z-index: 3;
  justify-self: end;
  margin-left: clamp(-170px, -9vw, -44px);
  transform-origin: 50% 62%;
  animation: about-cloud-float 7.5s ease-in-out infinite;
}

@keyframes about-cloud-drift {
  from {
    transform: translate3d(-1%, 0, 0) scale(1.04);
  }

  to {
    transform: translate3d(1.4%, -1.1%, 0) scale(1.07);
  }
}

@keyframes about-cloud-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.35deg);
  }

  50% {
    transform: translate3d(0, -16px, 0) rotate(0.45deg);
  }
}

@media (max-width: 800px) {
  .about-page:not(.legal-page) .about-hero {
    grid-template-columns: 1fr;
    align-items: end;
    gap: 0;
    overflow: hidden;
  }

  .about-page:not(.legal-page) .about-hero::before {
    opacity: 0.28;
    background-position: 56% 46%;
  }

  .about-page:not(.legal-page) .about-hero-copy {
    justify-self: start;
    margin-right: 0;
  }

  .about-page:not(.legal-page) .about-hero h1 {
    width: auto;
    max-width: 100%;
    font-size: clamp(60px, 18vw, 112px);
  }

  .about-page:not(.legal-page) .about-hero-media {
    justify-self: end;
    margin-top: clamp(-28px, -4vw, -14px);
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page:not(.legal-page) .about-hero::before,
  .about-page:not(.legal-page) .about-hero-media {
    animation: none;
  }
}

@media (max-width: 520px) {
  .about-page:not(.legal-page) .about-hero h1 {
    font-size: clamp(48px, 17vw, 76px);
  }
}

/* Offer and project detail pages */
.project-detail-link,
.offer-card-link,
.detail-cta,
.detail-next a,
.page-actions a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  border: 2px solid var(--brand-navy);
  border-radius: 4px;
  padding: 0 14px;
  color: var(--brand-navy);
  background: var(--brand-white);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.project-detail-link:hover,
.offer-card-link:hover,
.detail-cta:hover,
.detail-next a:hover,
.page-actions a:hover {
  color: var(--brand-white);
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  transform: translateY(-2px);
}

.project-detail-link[hidden],
.offer-card-link[hidden] {
  display: none;
}

.project-info .project-detail-link {
  margin-top: 8px;
}

.offer-card-link {
  margin-top: 2px;
}

.offer-main,
.project-detail-main {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 100svh;
  color: var(--brand-navy);
  background: var(--brand-sky);
}

.offer-page-hero,
.offer-detail-list,
.offer-process,
.breadcrumb,
.project-detail-hero,
.project-story,
.detail-next {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

.offer-detail-list,
.offer-process {
  max-width: min(1180px, calc(100% - 36px));
}

.offer-page-hero,
.project-detail-main {
  padding-inline: clamp(18px, 5vw, 72px);
}

.offer-page-hero {
  display: grid;
  gap: 20px;
  padding-top: 156px;
  padding-bottom: 72px;
}

.offer-page-hero .kicker,
.project-detail-copy .kicker,
.offer-detail-copy .kicker,
.offer-process .kicker {
  color: var(--brand-orange);
}

.offer-page-hero h1,
.project-detail-copy h1 {
  max-width: 11ch;
  margin: 0;
  color: var(--brand-orange);
  font-size: 76px;
  font-weight: 900;
  line-height: 0.9;
  text-wrap: balance;
}

.offer-page-hero p,
.project-detail-copy > p {
  max-width: 64ch;
  margin: 0;
  color: rgba(0, 15, 46, 0.76);
  font-size: 18px;
  line-height: 1.52;
}

.page-actions,
.detail-next {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.offer-detail-list {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--brand-navy);
  border-bottom: 2px solid var(--brand-navy);
}

.offer-detail {
  display: grid;
  grid-template-columns: minmax(60px, 0.16fr) minmax(0, 1fr);
  gap: 56px;
  border-bottom: 2px solid var(--brand-navy);
  padding: 58px 0;
  scroll-margin-top: 116px;
}

.offer-detail:last-child {
  border-bottom: 0;
}

.offer-detail-number {
  color: var(--brand-navy);
  font-size: 14px;
  font-weight: 900;
}

.offer-detail-copy {
  display: grid;
  gap: 18px;
}

.offer-detail-copy h2,
.offer-process h2 {
  max-width: 17ch;
  margin: 0;
  color: var(--brand-navy);
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  text-wrap: balance;
}

.offer-detail-copy p {
  max-width: 66ch;
  margin: 0;
  color: rgba(0, 15, 46, 0.76);
  font-size: 17px;
  line-height: 1.5;
}

.detail-checklist {
  display: grid;
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.detail-checklist li {
  position: relative;
  padding-left: 24px;
  color: rgba(0, 15, 46, 0.78);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.38;
}

.detail-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--brand-orange);
  border-radius: 50%;
  background: var(--brand-white);
}

.offer-process {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 52px;
  padding: 74px 0 104px;
}

.offer-process ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-process li {
  display: grid;
  gap: 6px;
  border-top: 2px solid rgba(0, 15, 46, 0.2);
  padding-top: 18px;
}

.offer-process strong {
  color: var(--brand-orange);
  font-size: 18px;
  font-weight: 900;
}

.offer-process span {
  color: rgba(0, 15, 46, 0.76);
  font-size: 16px;
  line-height: 1.45;
}

.project-detail-main {
  padding-top: 168px;
  padding-bottom: 96px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
  color: rgba(0, 15, 46, 0.7);
  font-size: 13px;
  font-weight: 900;
}

.breadcrumb a {
  color: var(--brand-orange);
}

.breadcrumb span::before {
  content: "/";
  margin-right: 8px;
  color: rgba(0, 15, 46, 0.36);
}

.project-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.72fr);
  gap: 64px;
  align-items: center;
}

.project-detail-hero-wide {
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1fr);
}

.project-detail-copy {
  display: grid;
  gap: 20px;
}

.project-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.project-facts span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 2px solid var(--brand-navy);
  border-radius: 4px;
  padding: 0 10px;
  color: var(--brand-navy);
  background: var(--brand-white);
  font-size: 12px;
  font-weight: 900;
}

.project-detail-media {
  display: grid;
  place-items: center;
  height: clamp(420px, 54vw, 720px);
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: clamp(24px, 4vw, 52px);
  background: transparent;
  box-shadow: none;
}

.project-detail-media img {
  display: block;
  width: min(80%, 620px);
  height: auto;
  max-height: 80%;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  box-shadow: none;
}

.project-detail-hero-wide .project-detail-media img {
  object-fit: cover;
}

.project-story {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(260px, 1fr);
  column-gap: clamp(52px, 8vw, 132px);
  row-gap: clamp(42px, 6vw, 72px);
  align-items: start;
  margin-top: 92px;
  border: 0;
  background: transparent;
}

.project-story article {
  display: grid;
  align-content: start;
  grid-column: 1;
  justify-items: start;
  gap: 14px;
  min-width: 0;
  border: 0;
  padding: 0;
  text-align: left;
}

.project-story article:last-child {
  border: 0;
}

.project-story span {
  color: var(--brand-orange);
  font-size: 12px;
  font-weight: 900;
}

.project-story h2 {
  margin: 0;
  color: var(--brand-navy);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.project-story p {
  max-width: 66ch;
  margin: 0;
  color: rgba(0, 15, 46, 0.76);
  font-size: 16px;
  line-height: 1.48;
}

.project-story-images {
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 3;
  align-content: start;
  gap: clamp(24px, 4vw, 58px);
  margin: 0;
  padding-top: clamp(8px, 1.6vw, 28px);
}

.project-story-images figure {
  display: grid;
  place-items: center;
  min-height: clamp(190px, 22vw, 320px);
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: clamp(14px, 2vw, 24px);
  background: transparent;
  box-shadow: none;
}

.project-story-images img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(160px, 19vw, 280px);
  object-fit: contain;
}

.detail-next {
  margin-top: 76px;
}

@media (max-width: 980px) {
  .offer-page-hero h1,
  .project-detail-copy h1 {
    font-size: 58px;
  }

  .offer-process,
  .project-detail-hero,
  .project-detail-hero-wide {
    grid-template-columns: 1fr;
  }

  .project-detail-media {
    max-width: 620px;
  }

  .project-story {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }

  .project-story article,
  .project-story article:last-child {
    border: 0;
  }

  .project-story-images {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 6px;
  }
}

@media (max-width: 800px) {
  .offer-page-hero,
  .project-detail-main {
    padding-inline: 18px;
  }

  .offer-page-hero {
    padding-top: 118px;
    padding-bottom: 50px;
  }

  .offer-page-hero h1,
  .project-detail-copy h1 {
    max-width: 100%;
    font-size: 42px;
    line-height: 0.96;
  }

  .offer-page-hero p,
  .project-detail-copy > p,
  .offer-detail-copy p {
    font-size: 16px;
  }

  .offer-detail {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 42px 0;
  }

  .offer-detail-copy h2,
  .offer-process h2 {
    max-width: 100%;
    font-size: 28px;
    line-height: 1.04;
  }

  .offer-process {
    gap: 26px;
    padding: 52px 0 72px;
  }

  .project-detail-main {
    padding-top: 138px;
    padding-bottom: 70px;
  }

  .project-detail-hero {
    gap: 32px;
  }

  .project-detail-media {
    height: clamp(360px, 88vw, 560px);
    padding: 22px;
    box-shadow: 8px 9px 0 rgba(0, 15, 46, 0.12);
  }

  .project-detail-media img {
    width: min(82%, 520px);
    max-height: 82%;
  }

  .project-story {
    margin-top: 52px;
  }

  .project-story article {
    padding: 0;
  }

  .project-story-images {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .project-story-images figure {
    min-height: clamp(220px, 72vw, 330px);
  }

  .project-story-images img {
    max-height: clamp(190px, 62vw, 290px);
  }
}

/* 404 / Fehlerseite */
.error-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

.error-sky {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: clamp(220px, 34vw, 380px);
  border: 2px solid var(--brand-navy);
  background:
    linear-gradient(180deg, rgba(115, 184, 230, 0.08), rgba(115, 184, 230, 0.18) 50%, rgba(115, 184, 230, 0.36)),
    url("assets/brand/wolken.png") center center / cover no-repeat,
    var(--brand-blue);
  background:
    linear-gradient(180deg, rgba(115, 184, 230, 0.08), rgba(115, 184, 230, 0.18) 50%, rgba(115, 184, 230, 0.36)),
    image-set(
      url("assets/brand/responsive/wolken-640.jpg") 1x,
      url("assets/brand/responsive/wolken-960.jpg") 2x,
      url("assets/brand/wolken.png") 3x
    ) center center / cover no-repeat,
    var(--brand-blue);
}

.error-number {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--brand-orange);
  font-size: clamp(88px, 15vw, 208px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: 1180px;
  margin: clamp(26px, 4vw, 44px) auto 0;
}

/* ---------------------------------------------------------------
   Responsive-Korrekturen 06.08.2026
   Bewusst ans Dateiende gestellt: gleiche Spezifitaet wie die
   Originalregeln, gewinnt durch Reihenfolge, ohne sie umzubauen.
   --------------------------------------------------------------- */

@media (max-width: 800px) {
  /* 1) Startseiten-Hero lief rechts raus.
     Ursache: .hero-title und .hero-copy p erben white-space: nowrap
     aus dem Basis-Block. Ihre max-content-Breite blaeht die Grid-Spur
     der Sektion auf 533px auf, obwohl der Viewport 390px hat. */
  .video-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .video-placeholder {
    max-width: 100%;
  }

  .hero-copy,
  .hero-copy .hero-title,
  .hero-copy p {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* 2) Social-Buttons zentrieren.
     Zeile 1858 setzt right ausserhalb jeder Media-Query erneut und
     hebt damit das right:auto der Mobile-Regel auf. Dadurch galten
     left:50% und right gleichzeitig, der Rail wurde aufgezogen und
     die Buttons rutschten in zu breiten Spalten nach links. */
  .social-rail {
    right: auto;
    left: 50%;
    width: max-content;
    justify-items: center;
    transform: translateX(-50%);
  }
}

@media (max-width: 800px) {
  /* 3) "Hi, ich bin Nico" ueberlappte den orangen Swoosh.
     Der Swoosh startet am Hero-Rand und ist var(--work-swoosh-height)
     hoch; die Headline wird darunter gesetzt. Der Wert ist an die
     Swoosh-Hoehe gekoppelt, damit es ueber alle Viewports haelt. */
  .about-page:not(.legal-page) {
    --work-swoosh-height: clamp(220px, 34svh, 300px);
  }

  /* align-self: start + padding statt margin: dadurch haengt die
     Position deterministisch an Hero-Padding (108px) und Swoosh-Hoehe
     und haelt auch dort, wo der Swoosh seine Mindesthoehe erreicht
     (kurze Viewports wie 320x568). 24px Luft unter dem Swoosh. */
  .about-page:not(.legal-page) .about-hero-copy {
    align-self: start;
    margin-top: 0;
    padding-top: calc(var(--work-swoosh-height) - 84px);
  }
}

/* ---------------------------------------------------------------
   Projektseiten: Bilder duerfen nie angeschnitten werden
   (07.08.2026)
   Wie der Block darueber bewusst ans Dateiende gestellt: gleiche
   Spezifitaet wie die Originalregeln, gewinnt ueber die Reihenfolge.
   --------------------------------------------------------------- */

/* 1) Ursache des Anschnitts: .project-detail-hero-wide setzte
   object-fit: cover, und zwar in KEINER Media-Query zurueck. Solange
   das Bild querformatig ist, faellt das nicht auf, weil max-height
   nicht greift und die Box das natuerliche Seitenverhaeltnis behaelt.
   Sobald ein hochformatiges Bild in einen "breiten" Hero kommt,
   klemmt max-height die Hoehe ab, Box- und Bildverhaeltnis laufen
   auseinander und cover schneidet die Differenz weg. Gemessen bei
   390px Viewport mit einem 1000x1600-Bild: 18 % oben und unten weg.
   contain skaliert stattdessen vollstaendig ein. */
.project-detail-hero-wide .project-detail-media img {
  object-fit: contain;
}

@media (max-width: 980px) {
  /* 2) Feste Container-Hoehe + max-height quetschte hochformatige
     Bilder in eine flache Box. Mit contain wird dabei zwar nichts
     abgeschnitten, das Bild schrumpft aber auf einen Bruchteil.
     height: auto laesst die Box mitwachsen; min-height haelt exakt
     die bisherige Hoehe, damit quer- und quadratische Bilder
     unveraendert dargestellt werden. */
  .project-detail-media {
    height: auto;
    min-height: clamp(420px, 54vw, 720px);
  }

  .project-detail-media img {
    max-height: none;
  }

  .project-story-images figure {
    height: auto;
  }

  .project-story-images img {
    max-height: none;
  }
}

@media (max-width: 800px) {
  .project-detail-media {
    height: auto;
    min-height: clamp(360px, 88vw, 560px);
  }

  .project-detail-media img {
    max-height: none;
  }

  .project-story-images img {
    max-height: none;
  }
}

/* ---------------------------------------------------------------
   Overlay 801-1100px: leere Grid-Zeile unter dem Panel
   (07.08.2026)
   Im selben @media (max-width: 1100px) stehen zwei .overlay-panel-
   Regeln. Die erste stellt auf EINE Spalte um und definiert passend
   dazu zwei Zeilen (Bild oben, Text unten). Eine spaetere Regel im
   gleichen Media-Block setzt die Spalten wieder auf ZWEI, vergisst
   aber die Zeilen zurueckzusetzen. Ergebnis bei 962x1196: Bild und
   Text sitzen nebeneinander in Zeile 1, die auf 360px gedeckelt ist,
   und darunter haengt eine 476px hohe, voellig leere Zeile.
   Da das zweispaltige Layout die neuere Absicht ist, wird hier nur
   die Zeilenangabe korrigiert: eine Zeile, die den Platz fuellt.
   Dadurch bekommt die Bildzelle die volle Panelhoehe und das Bild
   wird deutlich groesser dargestellt - weiterhin ohne Anschnitt. */
@media (min-width: 801px) and (max-width: 1100px) {
  .overlay-panel {
    grid-template-rows: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------
   Lange Woerter in Ueberschriften (09.08.2026)
   Gilt bewusst ohne Media-Query: der Fehler trat auf dem Desktop
   genauso auf wie am Telefon, nur mit anderer Auswirkung.
   --------------------------------------------------------------- */

/* Beide Textspalten sind display: grid ohne Spaltenangabe. Die
   implizite auto-Spur waechst dann bis zur max-content-Breite ihres
   Inhalts - und ein einzelnes langes Wort wie "Feuerwehrwappen" hat
   bei 76px Schrift eben 925px max-content. Gemessen bei 1440px:
   .project-detail-copy war 614px breit, ihre Spur 791px, Headline
   und Fliesstext ragten also 177px darueber hinaus und liefen unter
   das Hero-Bild. Am Telefon dasselbe Bild: 511px Spur in einer
   354px-Spalte, der Rest wurde von overflow-x: hidden gekappt. */
.project-detail-copy,
.legal-hero {
  grid-template-columns: minmax(0, 1fr);
}

/* Damit steht das lange Wort weiterhin in einer zu schmalen Spalte -
   es braucht eine erlaubte Trennstelle. hyphens: auto nutzt die
   Silbentrennung des Systems (lang="de" ist auf allen Seiten
   gesetzt) und macht daraus "Feuerwehr-wappen" statt eines Bruchs
   an beliebiger Stelle. Genau der war auf Impressum und Datenschutz
   zu sehen: dort steht overflow-wrap: break-word, und ohne
   Trennstellen zerlegt das "Impressum" zu "Impressu / m".
   break-word bleibt als letzte Reserve fuer Woerter, die auch
   getrennt nicht passen. */
.project-detail-copy h1,
.project-detail-copy > p,
.legal-hero h1 {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   Projektseiten am Smartphone (09.08.2026)
   Breakpoint bewusst 640px statt der sonst ueblichen 800px: das
   Tablet-Layout (768px Hochformat) bleibt damit unveraendert.
   Wie die Bloecke darueber ans Dateiende gestellt - gleiche
   Spezifitaet wie die Originalregeln, gewinnt ueber die Reihenfolge.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 1) Das Hero-Bild - auf diesen Seiten das eigentliche Exponat -
     wurde winzig ausgespielt: width: min(82%, 520px) bezieht sich auf
     die Innenbreite der Box, und die ist durch 18px Seitenrand plus
     22px Innenabstand schon geschrumpft. Gemessen bei 375px Viewport:
     242px Bildbreite, also 64 % der Bildschirmbreite fuer ein Plakat.
     Ohne Rahmen und Hintergrund traegt die Box am Telefon nichts bei,
     deshalb faellt ihr Innenabstand weg und das Bild bekommt die
     volle Spaltenbreite. */
  .project-detail-media {
    min-height: 0;
    padding: 0;
  }

  /* 1b) Dieselbe Ursache wie beim Startseiten-Hero weiter oben:
     1fr ist minmax(auto, 1fr), und das auto-Minimum ist die
     min-content-Breite des Inhalts. Sobald das Bild die Spalte
     ausfuellen darf, zieht sein Eigenbedarf die Spur ueber den
     Viewport - gemessen 399px Spalte bei 375px Bildschirm. Sichtbar
     wurde das nicht als Scrollbalken, weil .project-detail-main
     overflow-x: hidden hat: das Bild war rechts schlicht 60px
     abgeschnitten. minmax(0, 1fr) nimmt der Spur dieses Minimum. */
  .project-detail-hero,
  .project-detail-hero-wide,
  .project-story {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 2) Der Schatten stammt aus der Zeit, als die Box noch Flaeche
     hatte. Seit background: transparent und border: 0 wirft eine
     unsichtbare Box einen Schatten - am Telefon als graue Kante
     rechts neben dem Bild sichtbar. */
  .project-detail-media,
  .project-story-images figure {
    box-shadow: none;
  }

  /* 3) Die Hoehendeckelung ersetzt das max-height: none vom 07.08.:
     dessen Ursache (gequetschte Hochformate) faellt mit height: auto
     an der Box ohnehin weg, die fehlende Obergrenze liess hochkantige
     Motive aber ueber die Bildschirmhoehe hinauswachsen.
     width bleibt bei 100 % - mit width: auto haette ein noch nicht
     geladenes Bild die intrinsische Breite 0, die Box faende keine
     Hoehe, und ein loading="lazy"-Bild kaeme dann nie in den
     Viewport, der es laden wuerde. Greift die Hoehengrenze, gleicht
     object-fit: contain das Verhaeltnis aus, statt zu verzerren; der
     Rest der Box bleibt transparent und faellt nicht auf. */
  .project-detail-media img {
    width: 100%;
    height: auto;
    max-height: 76svh;
    object-fit: contain;
  }

  /* 4) Gleiches Bild bei den Begleitbildern: die Eintrittskarte auf
     der Ballplakat-Seite (921x2551) kam bei 375px auf 861px Hoehe.
     Man scrollt dann durch ein einzelnes Bild. Die Vorder-/Rueck-
     seiten-Paare bleiben ausgenommen, die stapeln sich ab 700px
     bereits selbst und sind querformatig. */
  .project-story-images figure:not(.project-image-pair) {
    min-height: 0;
    padding: 0;
  }

  .project-story-images figure:not(.project-image-pair) img {
    width: 100%;
    height: auto;
    max-height: 68svh;
    object-fit: contain;
  }
}