/* --hero-pad auch außerhalb von .hero verfügbar (Header liegt jetzt im Base-Layout) */
:root{--hero-pad:clamp(24px, 2.55vw, 50px)}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-display:swap;font-weight:400;src:url("/fonts/cormorant-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-display:swap;font-weight:500;src:url("/fonts/cormorant-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-display:swap;font-weight:600;src:url("/fonts/cormorant-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:400;src:url("/fonts/manrope-400.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:500;src:url("/fonts/manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:600;src:url("/fonts/manrope-600.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-display:swap;font-weight:500;src:url("/fonts/playfair-500.woff2") format("woff2");}


:root {
  --font-cormorant: "Cormorant Garamond";
  --font-manrope: "Manrope";
  --graphite: #151a20;
  --graphite-soft: #242b33;
  --titanium: #aeb7c0;
  --pearl: #f3f4f2;
  --ice: #dfeaf2;
  --violet: #cbc6df;
  --rose: #e3d0d4;
  --pointer-x: 0;
  --pointer-y: 0;
  --architecture-x: 0px;
  --architecture-y: 0px;
  --violet-x: 0px;
  --ice-x: 0px;
  --ice-y: 0px;
  --sweep-x: 0px;
  --title-x: 0px;
  --title-y: 0px;
  --browser-x: 0px;
  --browser-y: 0px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--graphite);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--graphite);
  color: var(--pearl);
  font-family: var(--font-manrope), Arial, Helvetica, sans-serif;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: clamp(22px, 3.2vh, 36px);
  left: var(--hero-pad);
  right: var(--hero-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: fade-down 1.1s 0.35s both;
}

.atelier-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(244, 246, 246, 0.9);
  font-size: clamp(10px, 0.69vw, 12px);
  font-weight: 600;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.atelier-mark__dot {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(244, 247, 248, 0.86);
  border-radius: 50%;
  background: rgba(229, 240, 246, 0.06);
  box-shadow: 0 0 14px rgba(223, 234, 242, 0.45);
  animation: atelier-pulse 3.8s ease-in-out infinite;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
  font-size: clamp(9px, 0.58vw, 11px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav > a:not(.site-nav__contact) {
  position: relative;
  color: rgba(241, 243, 243, 0.7);
  transition: color 250ms ease;
}

.site-nav > a:not(.site-nav__contact)::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 1px;
  content: "";
  background: rgba(255, 255, 255, 0.85);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms ease;
}

.site-nav > a:hover {
  color: white;
}

.site-nav > a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav__contact {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 13px;
  padding: 0 17px 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(229, 237, 242, 0.14);
  color: rgba(248, 250, 250, 0.9);
  box-shadow:
    0 10px 28px rgba(10, 15, 19, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px) saturate(0.9);
  transition:
    background 320ms cubic-bezier(0.2, 0.75, 0.2, 1),
    color 320ms cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 320ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.site-nav__contact svg {
  width: 11px;
  height: 11px;
  transition: transform 320ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-nav__contact:hover {
  background: white;
  color: #171b20;
  transform: translateY(-1px);
}
.site-nav__contact:hover svg { transform: translate(2px, -2px); }

@keyframes architecture-in {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
  }
}

@keyframes title-reveal {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes statement-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes browser-enter {
  from {
    opacity: 0;
    translate: 5% 5%;
    scale: 0.9;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes browser-breathe {
  0%,
  100% {
    transform: rotateY(-8deg) rotateX(2deg) rotateZ(-0.65deg) translateY(0);
  }
  50% {
    transform: rotateY(-7.2deg) rotateX(1.5deg) rotateZ(-0.35deg) translateY(-10px);
  }
}

@keyframes browser-panel-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes browser-content-drift {
  0%,
  24%,
  100% {
    transform: translateY(0);
  }
  52%,
  72% {
    transform: translateY(-2.2%);
  }
}

@keyframes atelier-pulse {
  0%,
  100% {
    opacity: 0.58;
    box-shadow: 0 0 8px rgba(223, 234, 242, 0.25);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 17px rgba(223, 234, 242, 0.66);
  }
}

@keyframes reflection {
  0%,
  15% {
    transform: rotate(17deg) translateX(-130%);
  }
  48%,
  100% {
    transform: rotate(17deg) translateX(340%);
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scroll-line {
  0% {
    transform: translateX(-100%);
  }
  55%,
  100% {
    transform: translateX(105%);
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: 760px;
    height: 100svh;
    max-height: none;
  }

  .hero__architecture {
    background-position: 56% center;
  }

  .hero__shade {
    background:
      linear-gradient(180deg, rgba(9, 13, 18, 0.2), rgba(12, 17, 22, 0.24)),
      linear-gradient(90deg, rgba(8, 12, 17, 0.58), transparent 90%);
  }

  .site-header {
    top: 22px;
  }

  .site-nav > a:not(.site-nav__contact) {
    display: none;
  }

  .site-nav__contact {
    min-height: 32px;
    padding: 0 13px 0 15px;
  }

  .hero__title {
    top: 14%;
    left: 18px;
    width: calc(100% - 18px);
  }

  .hero__word {
    font-size: clamp(66px, 20.2vw, 92px);
    line-height: 0.8;
  }

  .hero__separator {
    width: 1px;
    height: 30px;
    margin: 1px 8px 0 10px;
  }

  .hero__power {
    margin-top: -2px;
    font-size: clamp(24px, 6.8vw, 32px);
    line-height: 0.8;
  }

  .hero__statement {
    top: 25%;
    width: 88%;
    font-size: clamp(15px, 4.3vw, 21px);
  }

  .hero__browser-wrap {
    top: 47%;
    right: -28%;
    width: 118vw;
  }

  .hero__browser {
    border-radius: 14px;
    transform: rotateY(-8deg) rotateX(1deg) rotateZ(0.5deg);
  }

  .hero__cta {
    top: auto;
    bottom: 3%;
  }

  .hero__cta-track {
    display: none;
  }

  .hero__scroll {
    display: none;
  }
}

@media (max-width: 390px) {
  .atelier-mark {
    letter-spacing: 0.17em;
  }

  .site-nav__contact {
    font-size: 8px;
  }

  .hero__title {
    top: 15%;
  }

  .hero__statement {
    top: 29%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


:root {
  --camera-x: 0px;
  --glass-x: 0px;
  --glass-y: 0px;
  --refract-x: 0px;
  --refract-y: 0px;
  --light-life: .72;
}

.site-nav__contact {
  border-color: rgba(245,250,252,.42);
  background:
    linear-gradient(135deg, rgba(239,247,251,.105), rgba(163,184,197,.035));
  box-shadow:
    0 12px 34px rgba(7,12,17,.13),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(132,157,173,.12);
  backdrop-filter: blur(19px) saturate(.82);
}

.site-nav__contact:hover {
  border-color: rgba(255,255,255,.88);
  background: rgba(250,252,252,.96);
  box-shadow:
    0 14px 38px rgba(7,12,17,.2),
    0 0 26px rgba(224,239,247,.18);
}

@keyframes browser-content-drift {
  0%, 24%, 100% {
    transform: translate(var(--refract-x), var(--refract-y)) translateY(0);
  }
  52%, 72% {
    transform: translate(var(--refract-x), var(--refract-y)) translateY(-2.2%);
  }
}

@keyframes browser-breathe {
  0%, 100% {
    transform: rotateY(-10.5deg) rotateX(2.7deg) rotateZ(-.75deg) translateZ(10px) translateY(0);
  }
  50% {
    transform: rotateY(-10.1deg) rotateX(2.45deg) rotateZ(-.62deg) translateZ(12px) translateY(-2px);
  }
}

@keyframes browser-breathe-mobile {
  0%, 100% {
    transform: rotateY(-9deg) rotateX(1.5deg) rotateZ(.4deg) translateY(0);
  }
  50% {
    transform: rotateY(-8.6deg) rotateX(1.25deg) rotateZ(.3deg) translateY(-2px);
  }
}

@keyframes cta-light-through {
  0%   { opacity: 0; transform: translate(-42px, -50%); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(clamp(126px, 9vw, 158px), -50%); }
}

.works__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(28px, 6vw, 90px);
  max-width: 1380px;
  margin: 0 auto clamp(64px, 10vh, 128px);
}

.works__label {
  flex: 0 0 auto;
  padding-top: 6px;
  color: var(--w-faint);
  font-size: clamp(9px, 0.62vw, 11px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4vw, 74px);
  max-width: 1380px;
  margin: 0 auto;
}

.work {
  display: flex;
  flex-direction: column;
}

/* --- Exponat-Bühne --- */
.work__stage {
  position: relative;
  aspect-ratio: 1 / 0.86;
  margin-bottom: clamp(26px, 3vh, 40px);
  perspective: 1100px;
}

.ex {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 600ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.ex__float {
  position: absolute;
  inset: 0;
  animation: ex-float 9s ease-in-out infinite;
}

.ex--b .ex__float { animation-duration: 10.5s; animation-delay: -3s; }
.ex--c .ex__float { animation-duration: 8s; animation-delay: -1.5s; }

/* Atmosphärische Bodenreflexion statt Box-Shadow. */
.ex__reflection {
  position: absolute;
  right: 12%;
  bottom: -7%;
  left: 12%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(120, 138, 156, 0.32), transparent 70%);
  filter: blur(13px);
  opacity: 0.8;
}

/* ===== 01 · DIGITALE RÄUME — schwebendes Website-Architekturmodell ===== */
.ex-space__back {
  position: absolute;
  top: 14%;
  right: 6%;
  bottom: 20%;
  left: 22%;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(206, 218, 227, 0.4), rgba(180, 196, 208, 0.18));
  filter: blur(2px);
  opacity: 0.5;
  transform: translateZ(-40px);
}

.ex-space__model {
  top: 20%;
  right: 12%;
  bottom: 14%;
  left: 10%;
  overflow: hidden;
  transform: rotateY(-15deg) rotateX(3deg);
}

.ex-space__bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  gap: 5px;
  align-items: center;
  height: 15%;
  padding: 0 9%;
  border-bottom: 1px solid rgba(160, 176, 190, 0.3);
}

.ex-space__bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(120, 138, 156, 0.5);
}

.ex-space__mini {
  position: absolute;
  inset: 15% 0 0;
  display: flex;
  flex-direction: column;
  gap: 7%;
  padding: 9% 9% 0;
}

.ex-space__mini span {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(88, 104, 120, 0.28);
}

.ex-space__mini span:nth-child(1) { width: 62%; height: 9px; background: rgba(60, 74, 88, 0.4); }
.ex-space__mini span:nth-child(2) { width: 40%; }
.ex-space__mini .ex-space__blk {
  width: 100%;
  height: 34%;
  margin-top: 4%;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(190, 203, 214, 0.5), rgba(150, 167, 182, 0.28));
}

.ex-space__chip {
  position: absolute;
  right: 4%;
  bottom: 24%;
  width: 34%;
  height: 20%;
  border-radius: 10px;
  transform: translateZ(60px);
}

.ex-space__chip::before {
  position: absolute;
  top: 32%;
  left: 12%;
  width: 26%;
  height: 34%;
  content: "";
  border-radius: 50%;
  border: 1px solid rgba(90, 108, 124, 0.5);
}

.ex-space__chip::after {
  position: absolute;
  top: 44%;
  right: 12%;
  left: 44%;
  height: 8%;
  content: "";
  border-radius: 2px;
  background: rgba(90, 108, 124, 0.4);
}

/* ===== 02 · INTELLIGENTE ABLÄUFE — abstraktes Workflow-System ===== */
.ex-flow__svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ex-flow__line {
  fill: none;
  stroke: rgba(120, 140, 158, 0.55);
  stroke-width: 1.1;
  stroke-dasharray: var(--len, 220);
  stroke-dashoffset: var(--len, 220);
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-in .ex-flow__line { stroke-dashoffset: 0; }
.is-in .ex-flow__line--2 { transition-delay: 0.25s; }
.is-in .ex-flow__line--3 { transition-delay: 0.45s; }

.ex-flow__travel {
  fill: rgba(70, 92, 112, 0.9);
  offset-path: var(--path);
  animation: ex-travel 6s linear infinite;
  opacity: 0.75;
}

.ex-flow__node {
  position: absolute;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.66), rgba(210, 221, 229, 0.3));
  box-shadow: 0 14px 26px -16px rgba(40, 56, 72, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ex-flow__node--1 { top: 8%; left: 8%; width: 40%; height: 24%; }
.ex-flow__node--2 { top: 40%; right: 6%; width: 34%; height: 20%; transform: translateZ(30px); }
.ex-flow__node--3 { bottom: 8%; left: 16%; width: 38%; height: 22%; transform: translateZ(-20px); opacity: 0.9; }

.ex-flow__node span {
  position: absolute;
  left: 14%;
  height: 5px;
  border-radius: 3px;
  background: rgba(70, 88, 104, 0.4);
}
.ex-flow__node span:nth-child(1) { top: 30%; width: 54%; }
.ex-flow__node span:nth-child(2) { top: 58%; width: 34%; background: rgba(70, 88, 104, 0.24); }

.ex-flow__node i {
  position: absolute;
  top: 50%;
  right: 12%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: rgba(96, 132, 120, 0.7);
  box-shadow: 0 0 0 3px rgba(96, 132, 120, 0.16);
}

/* ===== 03 · NEUE SICHTBARKEIT — analytisches Glas-Exponat ===== */
.ex-vis__glass {
  top: 16%;
  right: 8%;
  bottom: 18%;
  left: 8%;
  overflow: hidden;
  transform: rotateY(6deg);
}

.ex-vis__svg {
  position: absolute;
  inset: 34% 8% 16%;
  overflow: visible;
}

.ex-vis__curve {
  fill: none;
  stroke: rgba(70, 92, 112, 0.75);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.is-in .ex-vis__curve { stroke-dashoffset: 0; }

.ex-vis__area {
  fill: rgba(120, 145, 170, 0.12);
  opacity: 0;
  transition: opacity 1.4s ease 0.9s;
}
.is-in .ex-vis__area { opacity: 1; }

.ex-vis__metric {
  position: absolute;
  top: 12%;
  left: 11%;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--w-ink);
}

.ex-vis__sub {
  position: absolute;
  top: 12%;
  right: 11%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.ex-vis__sub span {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(88, 104, 120, 0.3);
}
.ex-vis__sub span:nth-child(1) { width: 46px; }
.ex-vis__sub span:nth-child(2) { width: 30px; }

.ex-vis__dot {
  position: absolute;
  right: 15%;
  bottom: 30%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(70, 92, 112, 0.9);
  box-shadow: 0 0 0 4px rgba(70, 92, 112, 0.14);
  opacity: 0;
  transition: opacity 0.6s ease 1.6s;
}
.is-in .ex-vis__dot { opacity: 1; }

/* --- Meta (Nummer, Titel, Beschreibung, Link) --- */
.work__num {
  display: block;
  margin-bottom: clamp(12px, 1.4vh, 18px);
  color: var(--w-faint);
  font-size: clamp(10px, 0.7vw, 12px);
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.work__title {
  margin: 0 0 clamp(12px, 1.6vh, 18px);
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(28px, 2.5vw, 40px);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
  text-transform: uppercase;
}

.work__desc {
  max-width: 34ch;
  margin: 0 0 clamp(22px, 2.8vh, 32px);
  color: var(--w-mute);
  font-size: clamp(14px, 0.98vw, 16px);
  line-height: 1.62;
}

.work__link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--w-ink);
  font-size: clamp(9px, 0.62vw, 11px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.work__link-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(31, 39, 47, 0.35);
  border-radius: 50%;
  transition: background 340ms ease, border-color 340ms ease, transform 340ms ease;
}
.work__link-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  content: "";
  border-top: 1px solid var(--w-ink);
  border-right: 1px solid var(--w-ink);
  transform: translate(-58%, -50%) rotate(45deg);
  transition: border-color 340ms ease;
}
.work:hover .work__link-icon {
  border-color: var(--w-ink);
  background: var(--w-ink);
  transform: translateX(3px);
}
.work:hover .work__link-icon::after { border-color: #f4f6f6; }

@keyframes ex-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes ex-travel {
  0%   { offset-distance: 0%; opacity: 0; }
  12%  { opacity: 0.75; }
  88%  { opacity: 0.75; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- Tablet: 2 Spalten, dritte darunter --- */
@media (max-width: 1080px) {
  .works__grid { grid-template-columns: repeat(2, 1fr); }
  .work:nth-child(3) { grid-column: 1 / -1; max-width: 52%; }
  .works__head { flex-direction: column; gap: 20px; }
}

/* --- Mobile: 1 Spalte --- */
@media (max-width: 680px) {
  .works__grid { grid-template-columns: 1fr; gap: clamp(56px, 9vh, 84px); }
  .work:nth-child(3) { max-width: 100%; }
  .work__stage { max-width: 380px; }
}

@media (hover: none) {
  .ex { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ex__float { animation: none; }
  .ex-flow__travel { animation: none; opacity: 0; }
  .ex-flow__line, .ex-vis__curve { transition: none; stroke-dashoffset: 0; }
}

/* ============================================================
   NAV — fix, transparent, beim Scrollen Graphit-Blur.
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: clamp(16px, 2.4vh, 26px) clamp(24px, 2.55vw, 50px);
  border-bottom: 1px solid transparent;
  transition: background 400ms ease, backdrop-filter 400ms ease,
              padding 350ms ease, border-color 400ms ease;
}

.site-header--scrolled {
  padding-top: clamp(11px, 1.5vh, 16px);
  padding-bottom: clamp(11px, 1.5vh, 16px);
  background: rgba(17, 21, 26, 0.7);
  backdrop-filter: blur(18px) saturate(1.05);
  border-bottom-color: rgba(220, 234, 242, 0.1);
}

/* Unterseiten haben einen hellen Kopfbereich → Header dauerhaft als
   schlanke Graphit-Leiste, damit die helle Schrift lesbar bleibt
   (auch über dem dunklen Kontaktband). Startseite bleibt transparent. */
.page-inner .site-header {
  padding-top: clamp(11px, 1.5vh, 16px);
  padding-bottom: clamp(11px, 1.5vh, 16px);
  background: rgba(17, 21, 26, 0.9);
  backdrop-filter: blur(18px) saturate(1.05);
  border-bottom-color: rgba(220, 234, 242, 0.12);
}

/* ============================================================
   BRAND-LOGO — finale Wortmarke „morgen │ N" (Playfair Display).
   Transparent, konstruiertes N mit Lichtspalt. Header + Footer.
   ============================================================ */
.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  animation: fade-down 1.1s 0.35s both;
}
.brand-logo__word {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #eef1f6;
}
.brand-logo__separator {
  flex: 0 0 auto;
  width: 1px;
  height: 28px;
  margin: 0 16px;
  background: rgba(200, 211, 224, 0.55);
  transform: translateY(2px);
}
.brand-logo__signet {
  flex: 0 0 auto;
  width: 16px;
  height: 22px;
  display: block;
  transform: translateY(2px);
  overflow: visible;
}
.brand-logo:hover .brand-logo__word { color: #ffffff; }

/* Footer: größere, ruhige Markenversion */
.site-footer__eyebrow {
  margin: 0 0 12px;
  color: rgba(198, 212, 222, 0.62);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand-logo--footer { animation: none; }
.brand-logo--footer .brand-logo__word { font-size: 40px; }
.brand-logo--footer .brand-logo__separator { height: 42px; margin: 0 22px; transform: translateY(3px); }
.brand-logo--footer .brand-logo__signet { width: 24px; height: 33px; transform: translateY(3px); }
.site-footer__tagline {
  margin: 18px 0 0;
  color: rgba(198, 212, 222, 0.62);
  font-size: 12px;
  letter-spacing: 0.05em;
}

@media (max-width: 640px) {
  .brand-logo__word { font-size: 23px; }
  .brand-logo__separator { height: 24px; margin: 0 12px; }
  .brand-logo__signet { width: 14px; height: 19px; }
  .brand-logo--footer .brand-logo__word { font-size: 32px; }
  .brand-logo--footer .brand-logo__separator { height: 34px; margin: 0 16px; }
  .brand-logo--footer .brand-logo__signet { width: 20px; height: 27px; }
}

/* Ankersprünge nicht unter der fixen Nav verstecken */
.atelier, .works, .selected, .person, .faq, .closing {
  scroll-margin-top: clamp(68px, 9vh, 92px);
}

/* ============================================================
   REVEAL — sanftes Einblenden beim Scrollen (nur mit JS).
   ============================================================ */
html.js .rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.16, 0.72, 0.22, 1),
              transform 1s cubic-bezier(0.16, 0.72, 0.22, 1);
}
html.js .rv.rv-in { opacity: 1 !important; transform: none !important; }
.rv-d1 { transition-delay: 0.12s; }
.rv-d2 { transition-delay: 0.24s; }
.rv-d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; transition: none; }
}

/* Gemeinsame Bausteine der neuen Abschnitte */
.sec-label {
  display: inline-block;
  color: var(--w-faint, rgba(31, 39, 47, 0.5));
  font-size: clamp(9px, 0.62vw, 11px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.sec-label--light { color: rgba(226, 236, 242, 0.5); }

.serif-h {
  margin: 0;
  font-family: var(--font-cormorant), Georgia, serif;
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid rgba(31, 39, 47, 0.28);
  border-radius: 999px;
  color: #1b2129;
  font-size: clamp(10px, 0.66vw, 12px);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition:
    background 320ms cubic-bezier(0.2, 0.75, 0.2, 1),
    color 320ms cubic-bezier(0.2, 0.75, 0.2, 1),
    border-color 320ms cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 320ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.pill:hover { background: #1b2129; color: #f4f6f6; border-color: #1b2129; transform: translateY(-1px); }
.pill--light { border-color: rgba(226, 236, 242, 0.32); color: rgba(244, 247, 247, 0.94); }
.pill--light:hover { background: rgba(244, 247, 247, 0.96); color: #171b20; border-color: rgba(244, 247, 247, 0.96); }
.pill svg { width: 12px; height: 12px; transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.pill:hover svg { transform: translate(2px, -2px); }

/* Bühne mit überlagerten Glas-Screens */
.stage {
  position: relative;
  aspect-ratio: 1 / 0.74;
  perspective: 1400px;
}
.stage__floor {
  position: absolute;
  right: 4%;
  bottom: 4%;
  left: 4%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(150, 172, 194, 0.16), transparent 70%);
  filter: blur(20px);
}
.screen {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 15px;
  background:
    linear-gradient(150deg, rgba(56, 72, 90, 0.62), rgba(30, 40, 52, 0.5));
  box-shadow:
    0 40px 80px -34px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: rgba(244, 248, 250, 0.92);
  transition: transform 600ms cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 600ms ease;
  animation: ex-float 11s ease-in-out infinite;
}
.screen__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: rgba(226, 236, 242, 0.5);
  text-transform: uppercase;
}
.screen__bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(226, 236, 242, 0.32); }
.screen__bar b { margin-left: auto; font-weight: 500; }
.screen__body { position: relative; padding: 14% 12% 12%; }
.screen__label { margin: 0 0 6%; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(210, 224, 232, 0.55); }
.screen__title { margin: 0; font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(20px, 2.4vw, 34px); line-height: 0.98; }
.screen__pill { display: inline-block; margin-top: 12%; padding: 5px 12px; border: 1px solid rgba(226, 236, 242, 0.3); border-radius: 999px; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(226, 236, 242, 0.7); }
.screen__ghost em { font-family: var(--font-cormorant), Georgia, serif; font-style: normal; font-size: clamp(18px, 2vw, 26px); color: rgba(226, 236, 242, 0.5); }
.screen__lines { display: block; margin-top: 14%; }
.screen__lines i { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: rgba(226, 236, 242, 0.14); }
.screen__lines i:nth-child(1) { width: 62%; }
.screen__lines i:nth-child(2) { width: 40%; }
.screen__arch { position: absolute; right: -8%; bottom: -14%; width: 44%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(226, 236, 242, 0.18); background: radial-gradient(circle at 40% 35%, rgba(200, 216, 228, 0.16), transparent 62%); }
.screen--a { z-index: 3; top: 8%; left: 6%; width: 56%; aspect-ratio: 1.5; transform: translateZ(40px) rotateY(6deg); }
.screen--b { z-index: 2; top: 34%; right: 4%; width: 50%; aspect-ratio: 1.5; animation-delay: -4s; transform: rotateY(-5deg); }
.screen--c { z-index: 1; top: 2%; right: 16%; width: 42%; aspect-ratio: 1.42; opacity: 0.9; animation-delay: -7s; }
.stage:hover .screen--a { transform: translateZ(60px) rotateY(6deg) translateY(-4px); }
.stage__caption { position: absolute; bottom: -6%; left: 4%; display: flex; gap: 18px; }

/* ============================================================
   ATELIER-BEREICH NATALIA — hell, mit Porträt-Platzhalter.
   ============================================================ */
.person {
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 14vh, 200px) clamp(24px, 6vw, 96px);
  color: #1b2129;
  background:
    radial-gradient(85% 66% at 84% 4%, rgba(228, 238, 246, 0.6), transparent 54%),
    radial-gradient(120% 90% at 8% 102%, rgba(192, 203, 212, 0.35), transparent 60%),
    linear-gradient(172deg, #dde3e6 0%, #e7ebed 46%, #dbe1e4 100%);
}
.person__layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
}
.person__headline {
  margin: clamp(20px, 3vh, 32px) 0 clamp(28px, 4vh, 44px);
  font-size: clamp(40px, 5.4vw, 92px);
  color: #171d24;
}
.person__text {
  max-width: 46ch;
  margin: 0 0 clamp(18px, 2.4vh, 26px);
  color: rgba(31, 39, 47, 0.66);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.7;
}
.person__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  max-width: 1300px;
  margin: clamp(56px, 8vh, 96px) auto 0;
  padding-top: clamp(36px, 5vh, 56px);
  border-top: 1px solid rgba(31, 39, 47, 0.14);
}
.fact__value { font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(38px, 4.4vw, 68px); font-weight: 500; line-height: 1; color: #171d24; }
.fact__label { margin-top: 10px; color: rgba(31, 39, 47, 0.55); font-size: clamp(11px, 0.8vw, 13px); letter-spacing: 0.04em; }

/* ============================================================
   ABSCHLUSS / KONTAKT — dunkel, ruhig, mit Bogen.
   ============================================================ */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(110px, 17vh, 240px) clamp(24px, 6vw, 96px);
  color: var(--pearl);
  background:
    radial-gradient(70% 90% at 88% 40%, rgba(64, 82, 104, 0.42), transparent 58%),
    linear-gradient(180deg, #0e1218 0%, #141a21 55%, #0c1015 100%);
}
.closing__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
}
.closing__headline {
  margin: clamp(22px, 3vh, 34px) 0 clamp(30px, 4vh, 46px);
  font-size: clamp(52px, 8.5vw, 148px);
  color: rgba(248, 250, 250, 0.97);
}
.closing__headline em { font-style: normal; color: rgba(206, 224, 236, 0.62); }
.closing__text {
  max-width: 44ch;
  margin: 0 0 clamp(34px, 5vh, 50px);
  color: rgba(226, 233, 238, 0.64);
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.6;
}
.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3.5vh, 40px);
}
.closing__contactline {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: clamp(30px, 4vh, 44px);
  color: rgba(214, 226, 234, 0.7);
  font-size: clamp(12px, 0.9vw, 15px);
}
.closing__contactline a { transition: color 250ms ease; }
.closing__contactline a:hover { color: #fff; }
.closing__aside { position: relative; aspect-ratio: 3 / 3.4; }
.closing__arch {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 6px 6px;
  border: 1px solid rgba(226, 236, 242, 0.18);
  background:
    linear-gradient(180deg, rgba(150, 172, 194, 0.06), transparent 45%),
    repeating-linear-gradient(90deg, rgba(226, 236, 242, 0.05) 0 3px, transparent 3px 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.closing__arch::after {
  position: absolute;
  right: 12%;
  bottom: -1px;
  left: 12%;
  height: 30%;
  content: "";
  background: linear-gradient(180deg, rgba(200, 218, 230, 0.14), transparent);
  filter: blur(8px);
  transform: scaleY(-1);
  transform-origin: bottom;
}

/* ============================================================
   FOOTER — reduziert, Graphit.
   ============================================================ */
.site-footer {
  padding: clamp(72px, 11vh, 130px) clamp(24px, 6vw, 96px) clamp(40px, 5vh, 60px);
  color: rgba(226, 233, 238, 0.6);
  background: #0c1015;
  font-size: clamp(13px, 0.95vw, 15px);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 3.5vw, 64px);
  max-width: 1300px;
  margin: 0 auto clamp(52px, 8vh, 84px);
}
.site-footer__brand-block { align-self: start; }
.site-footer__brand { font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(28px, 2.4vw, 40px); color: rgba(246, 248, 248, 0.94); text-transform: uppercase; letter-spacing: 0.02em; }
.site-footer__brand-sep { display: inline-block; width: 1px; height: 0.6em; margin: 0 0.3em; background: currentColor; opacity: 0.5; vertical-align: middle; }
.site-footer__sub { margin-top: 4px; color: rgba(198, 212, 222, 0.5); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.site-footer__addr { margin-top: 18px; font-style: normal; color: rgba(198, 212, 222, 0.62); font-size: 13px; line-height: 1.55; }
.site-footer__col-title { margin: 0 0 16px; color: rgba(198, 212, 222, 0.62); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.site-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.site-footer__col a { color: rgba(226, 233, 238, 0.66); transition: color 250ms ease; }
.site-footer__col a:hover { color: #fff; }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto;
  color: rgba(198, 212, 222, 0.62);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.site-footer__base-links { display: flex; gap: 18px; }
.site-footer__base a { color: inherit; }
.site-footer__base a:hover { color: rgba(246, 248, 248, 0.9); }

/* Sichtbarer Fokus für Tastatur */
a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(150, 190, 226, 0.9);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Responsive für neue Abschnitte --- */
@media (max-width: 1024px) {
  .selected__layout { grid-template-columns: 1fr; gap: clamp(48px, 7vh, 72px); }
  .person__layout { grid-template-columns: 1fr; gap: clamp(40px, 6vh, 64px); }
  .person__bild { margin: 0 auto; }
  .closing__layout { grid-template-columns: 1fr; gap: clamp(48px, 7vh, 72px); }
  .closing__aside { max-width: 380px; }
  /* Footer: vier Spalten werden unter 1024px zu zwei */
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 680px) {
  .selected__head { flex-direction: column; gap: 12px; }
  .person__facts { grid-template-columns: 1fr; gap: 26px; text-align: left; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__base { flex-direction: column; gap: 10px; }
  .proj { flex-direction: column; gap: 4px; }
  .closing__actions .pill { flex: 1 1 100%; justify-content: center; }
}

/* Projekt-Räume mobil entstapeln: aus den überlappenden schwebenden Fenstern
   wird eine ruhige, klar lesbare vertikale Reihe. */
@media (max-width: 760px) {
  .stage { aspect-ratio: auto; perspective: none; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
  .stage__floor { display: none; }
  .stage .screen {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    width: 100%;
    aspect-ratio: auto;
    opacity: 1;
    transform: none;
    animation: none;
  }
  .stage .screen__body { padding: 18px 22px 22px; }
  .stage .screen__title { font-size: 27px; }
  .stage:hover .screen--a { transform: none; }
  .stage__caption { position: relative; bottom: auto; left: 0; margin-top: 8px; }
}

/* Riffelglas-Feld am rechten Rand — auf Kundenwunsch entfernt (keine Deko-Streifen). */
.world__glass {
  display: none;
  top: 0;
  right: 0;
  bottom: 0;
  width: 26vw;
  background:
    repeating-linear-gradient(90deg, rgba(226, 238, 248, 0.032) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, transparent, rgba(200, 220, 238, 0.03));
  mix-blend-mode: screen;
  opacity: var(--world-glass, 0.4);
  transform: translateY(calc(var(--world-cam, 0px) * 0.3));
  transition: opacity 1.5s ease, transform 900ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.selected::before,
.person::before,
.closing::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 18vh;
  content: "";
  pointer-events: none;
}
.person::before   { background: linear-gradient(180deg, rgba(15, 19, 25, 0.92) 0%, rgba(15, 19, 25, 0.58) 26%, rgba(15, 19, 25, 0.2) 58%, transparent 100%); }
.closing::before  { background: linear-gradient(180deg, rgba(219, 225, 228, 0.93) 0%, rgba(219, 225, 228, 0.58) 26%, rgba(219, 225, 228, 0.2) 58%, transparent 100%); }

/* ============================================================
   MOBILE-FEINSCHLIFF — große Typo auf schmalen Screens deckeln,
   damit nichts rechts aus dem Bild läuft.
   ============================================================ */
@media (max-width: 620px) {
  .world__glass { display: none; }
  .atelier__accent { font-size: clamp(28px, 8.8vw, 42px); }
  .atelier__lead { font-size: clamp(15px, 4.6vw, 22px); }
  .chapter__title { font-size: clamp(36px, 11vw, 60px); }
  .selected__headline { font-size: clamp(38px, 13vw, 66px); }
  .closing__headline { font-size: clamp(40px, 12.5vw, 70px); }
  .person__headline { font-size: clamp(32px, 10vw, 54px); }
  .works__lead { font-size: clamp(16px, 4.4vw, 20px); }
  .chapter__num { font-size: clamp(96px, 30vw, 176px); }
}

/* ============================================================
   FAQ — ruhig, viel Weißraum, feine Linien, keine Karten.
   Öffnen nur über Höhe (grid-template-rows) + Opacity.
   ============================================================ */
.faq {
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 15vh, 210px) clamp(24px, 6vw, 96px);
  color: #1b2129;
  background:
    radial-gradient(90% 70% at 84% 2%, rgba(228, 238, 246, 0.5), transparent 55%),
    linear-gradient(176deg, #dbe1e4 0%, #e7ebed 50%, #dfe4e7 100%);
}
.faq__inner {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 6vw, 120px);
  max-width: 1300px;
  margin: 0 auto;
}
.faq__headline {
  margin: clamp(16px, 2.4vh, 28px) 0 0;
  font-size: clamp(38px, 4.8vw, 82px);
  color: #171d24;
}

/* Kontakt — feine „oder direkt schreiben"-Zeile, nur Typografie */
.closing__direct { margin-top: clamp(32px, 5vh, 56px); }
.closing__direct-lead {
  display: block;
  margin-bottom: clamp(14px, 2vh, 20px);
  color: rgba(206, 220, 230, 0.4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.closing__direct-list {
  display: grid;
  gap: clamp(8px, 1.1vh, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(13px, 0.95vw, 15px);
}
.closing__direct-list li { display: flex; align-items: baseline; gap: 14px; }
.closing__direct-key {
  flex: 0 0 auto;
  min-width: 5.4em;
  color: rgba(206, 220, 230, 0.38);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.closing__direct-list a {
  color: rgba(222, 231, 237, 0.82);
  transition: color 320ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.closing__direct-list a:hover { color: #fff; }

/* ============================================================
   FLOATING DIREKTKONTAKT — Glas/Titan, Teil der Architektur.
   ============================================================ */
.fab-stack {
  position: fixed;
  right: clamp(16px, 1.8vw, 28px);
  bottom: clamp(16px, 3vh, 30px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab {
  display: grid;
  place-items: center;
  width: clamp(48px, 3.4vw, 56px);
  height: clamp(48px, 3.4vw, 56px);
  border-radius: 50%;
  border: 1px solid rgba(245, 250, 252, 0.5);
  color: rgba(238, 244, 247, 0.9);
  background: linear-gradient(140deg, rgba(72, 86, 99, 0.55), rgba(38, 48, 58, 0.42));
  box-shadow:
    0 18px 40px -14px rgba(6, 11, 16, 0.6),
    0 4px 12px rgba(6, 11, 16, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(120, 140, 155, 0.2);
  backdrop-filter: blur(16px) saturate(0.9);
  -webkit-backdrop-filter: blur(16px) saturate(0.9);
  transition:
    transform 320ms cubic-bezier(0.2, 0.75, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.2, 0.75, 0.2, 1),
    color 320ms cubic-bezier(0.2, 0.75, 0.2, 1),
    border-color 320ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.fab svg { width: 46%; height: 46%; }
.fab:hover {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 22px 48px -14px rgba(6, 11, 16, 0.66),
    0 5px 14px rgba(6, 11, 16, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.fab--mail:hover { color: #f6fafb; }
.fab--wa:hover { color: #4aa96c; }
@media (prefers-reduced-motion: reduce) {
  .fab { transition: color 320ms ease, border-color 320ms ease; }
  .faq__answer, .faq__answer-inner,
  .faq__icon::before, .faq__icon::after { transition: none; }
}
@media (max-width: 900px) {
  .faq__inner { grid-template-columns: 1fr; gap: clamp(26px, 5vh, 44px); }
  .faq__headline { margin-top: 4px; }
}

/* ============================================================
   JOURNAL & BEITRÄGE — Präsentation über die bestehenden
   Design-Tokens; Fließtext-Werte orientiert an .person__text.
   ============================================================ */
.beitrag { position: relative; isolation: isolate; padding: clamp(96px,14vh,180px) clamp(24px,6vw,96px) clamp(64px,9vh,110px); color:#1b2129; background: radial-gradient(85% 66% at 84% 4%, rgba(228,238,246,0.55), transparent 54%), linear-gradient(176deg,#dbe1e4,#e7ebed 50%,#dfe4e7); }
.beitrag__inner { max-width: 760px; margin: 0 auto; }
.beitrag__bc { display:flex; flex-wrap:wrap; gap:9px; margin-bottom: clamp(24px,4vh,40px); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color: rgba(31,39,47,0.46); }
.beitrag__bc a { color: rgba(31,39,47,0.46); transition: color .3s cubic-bezier(0.2,0.75,0.2,1); }
.beitrag__bc a:hover { color:#1b2129; }
.beitrag__title { margin: 10px 0 0; font-size: clamp(34px,5vw,64px); color:#171d24; text-transform:none; }
.beitrag__kernaussage { margin: clamp(24px,4vh,36px) 0; padding: clamp(18px,2.6vh,26px) clamp(20px,3vw,30px); border-left: 2px solid rgba(31,39,47,0.35); font-family: var(--font-cormorant),Georgia,serif; font-size: clamp(20px,2.2vw,27px); line-height:1.4; color:#1b2129; background: rgba(255,255,255,0.4); }
.beitrag__meta { display:flex; flex-wrap:wrap; gap:4px 12px; margin-bottom: clamp(32px,5vh,48px); padding-bottom: clamp(20px,3vh,28px); border-bottom:1px solid rgba(31,39,47,0.13); font-size:13px; letter-spacing:0.02em; color: rgba(31,39,47,0.55); }
.beitrag__meta a { color: rgba(31,39,47,0.55); border-bottom:1px solid rgba(31,39,47,0.2); }
.beitrag__meta a:hover { color:#1b2129; }
.beitrag__toc { margin: 0 0 clamp(32px,5vh,48px); padding: clamp(18px,2.4vh,24px) clamp(20px,3vw,28px); border:1px solid rgba(31,39,47,0.13); border-radius:16px; background: rgba(255,255,255,0.4); }
.beitrag__toc-title { margin:0 0 10px; font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color: rgba(31,39,47,0.46); }
.beitrag__toc ul { margin:0; padding:0; list-style:none; }
.beitrag__toc li { margin:6px 0; font-size:15px; }
.beitrag__toc-l3 { padding-left: 18px; }
.beitrag__toc a { color: rgba(31,39,47,0.72); text-decoration:none; }
.beitrag__toc a:hover { color:#1b2129; text-decoration:underline; }
.beitrag__prose { color: rgba(31,39,47,0.72); font-size: clamp(15px,1.05vw,18px); line-height: 1.75; }
.beitrag__prose > * + * { margin-top: 20px; }
.beitrag__prose h2 { font-family: var(--font-cormorant),Georgia,serif; font-weight:500; font-size: clamp(24px,2.9vw,36px); line-height:1.1; letter-spacing:-0.01em; color:#171d24; margin-top: clamp(40px,6vh,64px); scroll-margin-top: clamp(68px,9vh,92px); }
.beitrag__prose h3 { font-family: var(--font-cormorant),Georgia,serif; font-weight:500; font-size: clamp(20px,2vw,26px); color:#1b2129; margin-top: clamp(28px,4vh,40px); scroll-margin-top: clamp(68px,9vh,92px); }
.beitrag__prose p strong { color:#1b2129; font-weight:600; }
.beitrag__prose a { color:#1b2129; text-decoration:underline; text-underline-offset:3px; text-decoration-color: rgba(31,39,47,0.25); }
.beitrag__prose a:hover { text-decoration-color:#1b2129; }
.beitrag__prose ul, .beitrag__prose ol { padding-left: 1.3em; }
.beitrag__prose li + li { margin-top: 8px; }
.beitrag__prose dl { margin: 20px 0; padding: 0; }
.beitrag__prose dt { font-weight:600; color:#1b2129; margin-top: 14px; }
.beitrag__prose dd { margin: 4px 0 0; padding-left: 1.1em; border-left: 2px solid rgba(31,39,47,0.15); }
.beitrag__prose blockquote { margin: 24px 0; padding-left: 20px; border-left: 2px solid rgba(31,39,47,0.25); color: rgba(31,39,47,0.66); font-style: italic; }
.beitrag__prose code { font-family: ui-monospace, monospace; font-size: 0.9em; background: rgba(31,39,47,0.06); padding: 1px 5px; border-radius: 4px; }
.beitrag__autor { margin-top: clamp(40px,6vh,64px); padding-top: clamp(24px,3.5vh,32px); border-top:1px solid rgba(31,39,47,0.13); font-size:14px; color: rgba(31,39,47,0.66); }
.beitrag__autor a { color:#1b2129; border-bottom:1px solid rgba(31,39,47,0.25); }
.beitrag__verwandte { margin-top: clamp(48px,7vh,80px); }
.beitrag__verwandte-title { margin:0 0 18px; font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color: rgba(31,39,47,0.46); }
.beitrag__verwandte ul { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.beitrag__verwandte a { font-family: var(--font-cormorant),Georgia,serif; font-size: clamp(18px,2vw,22px); color:#1b2129; }
.beitrag__verwandte a:hover { color: rgba(31,39,47,0.6); }
.journal { position:relative; isolation:isolate; padding: clamp(96px,14vh,180px) clamp(24px,6vw,96px); color:#1b2129; background: linear-gradient(176deg,#dbe1e4,#e7ebed 50%,#dfe4e7); }
.journal__inner { max-width: 900px; margin: 0 auto; }
.journal__headline { margin: 12px 0 clamp(32px,5vh,52px); font-size: clamp(40px,6vw,88px); color:#171d24; text-transform:none; }
.journal__list { display:grid; gap: clamp(28px,4vh,44px); border-top: 1px solid rgba(31,39,47,0.13); }
.journal__item { padding-top: clamp(24px,3.5vh,36px); }
.journal__item-meta { font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color: rgba(31,39,47,0.46); margin:0 0 8px; }
.journal__item-title { font-family: var(--font-cormorant),Georgia,serif; font-weight:500; font-size: clamp(24px,3vw,38px); line-height:1.1; color:#171d24; margin:0 0 10px; text-transform:none; }
.journal__item-title a { color: inherit; }
.journal__item-title a:hover { color: rgba(31,39,47,0.6); }
.journal__item-desc { max-width: 60ch; color: rgba(31,39,47,0.66); font-size: clamp(15px,1.05vw,17px); line-height:1.6; margin:0; }
.journal__empty { color: rgba(31,39,47,0.6); font-size: 16px; }
.journal-teaser { position:relative; isolation:isolate; padding: clamp(72px,11vh,140px) clamp(24px,6vw,96px); background: linear-gradient(176deg,#dbe1e4,#e7ebed 55%,#dfe4e7); color:#1b2129; }
.journal-teaser__inner { max-width: 1300px; margin:0 auto; }
.journal-teaser__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); margin-top: clamp(28px,4vh,44px); }
.journal-teaser__item { display:block; padding-top:20px; border-top:1px solid rgba(31,39,47,0.16); }
.journal-teaser__item-title { font-family: var(--font-cormorant),Georgia,serif; font-size: clamp(20px,1.6vw,26px); line-height:1.15; color:#171d24; margin:8px 0 0; transition: color .3s cubic-bezier(0.2,0.75,0.2,1); }
.journal-teaser__item:hover .journal-teaser__item-title { color: rgba(31,39,47,0.6); }
@media (max-width: 760px){ .journal-teaser__grid { grid-template-columns: 1fr; } }

/* ============================================================
   LEISTUNGSSEITEN (layout: leistung.njk)
   Zwischenüberschriften und Ablauf-Schritte.
   Fließtext-Werte bewusst an .person__text angelehnt.
   ============================================================ */
.leistung__h3 {
  max-width: 46ch;
  margin: clamp(28px, 4vh, 42px) 0 clamp(8px, 1.2vh, 12px);
  font-family: var(--font-manrope), system-ui, sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(31, 39, 47, 0.92);
}
.leistung__h3:first-child { margin-top: 0; }

.ablauf {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ablauf;
  display: grid;
  gap: clamp(22px, 3.2vh, 34px);
}
.ablauf__schritt {
  counter-increment: ablauf;
  position: relative;
  max-width: 46ch;
  padding-left: clamp(34px, 4vw, 46px);
}
.ablauf__schritt::before {
  content: counter(ablauf, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: rgba(31, 39, 47, 0.38);
}
.ablauf__schritt::after {
  content: "";
  position: absolute;
  left: clamp(11px, 1.3vw, 15px);
  top: 2.1em;
  bottom: calc(clamp(22px, 3.2vh, 34px) * -1);
  width: 1px;
  background: rgba(31, 39, 47, 0.14);
}
.ablauf__schritt:last-child::after { display: none; }
.ablauf__titel {
  margin: 0 0 6px;
  font-family: var(--font-manrope), system-ui, sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  color: rgba(31, 39, 47, 0.92);
}
.ablauf__text {
  margin: 0;
  color: rgba(31, 39, 47, 0.66);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.7;
}

/* ============================================================
   SEITENKOPF MIT BILD  (/ueber-mich/)
   Foto ersetzt die dunkle Kopfzone, Text liegt darauf.
   ============================================================ */
.seitenkopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0c1015;
  /* Auf die Containerbreite der Seite begrenzt: ein Hochformat-Foto
     wird randlos sonst so stark vergroessert, dass nur noch das
     Gesicht uebrig bleibt. */
  max-width: 1300px;
  margin: 0 auto;
  /* Platz fuer den fixen Header, damit er nicht ueber dem Kopf liegt */
  padding-top: clamp(60px, 7.5vh, 72px);
}
.seitenkopf__bild {
  display: block;
  width: 100%;
  /* height:auto ist noetig — sonst gewinnt das HTML-Attribut height="1124"
     ueber aspect-ratio und das Bild wird 1300x1124 statt 1300x747. */
  height: auto;
  /* Seitenverhaeltnis statt fester Hoehe: das Bild wird nie stark beschnitten */
  /* Verhaeltnis exakt wie die Bilddatei (1672x941) — so wird nichts beschnitten. */
  aspect-ratio: 1672 / 941;
  object-fit: cover;
  /* Ausschnitt beginnt knapp ueber dem Kopf: nach oben ausrichten,
     damit auf breiten Schirmen unten beschnitten wird, nie oben. */
  object-position: 50% 0%;
}
.seitenkopf__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 16, 21, 0.34) 0%, rgba(12, 16, 21, 0.08) 38%, rgba(12, 16, 21, 0.82) 100%);
}
.seitenkopf__inhalt {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(24px, 5vw, 56px) clamp(24px, 6vw, 96px) clamp(26px, 4.5vw, 52px);
  max-width: 1300px;
  margin: 0 auto;
}
.seitenkopf__titel {
  margin: 10px 0 12px;
  color: #f2f5f8;
  font-size: clamp(2.1rem, 6vw, 4.2rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(8, 12, 17, 0.45);
}
.seitenkopf__text {
  max-width: 46ch;
  margin: 0;
  color: rgba(232, 238, 244, 0.9);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(8, 12, 17, 0.5);
}
.person__layout--breit { grid-template-columns: 1fr; max-width: 62ch; }

@media (max-width: 680px) {
  .seitenkopf__bild { aspect-ratio: 4 / 5; max-height: none; object-position: 52% 0%; }
}

/* ============================================================
   KOPFZEILE IM TABLET-BEREICH (761–1040 px)
   Die Navigation ist auf sechs Eintraege gewachsen (Ueber mich,
   KI-Check). Ab hier wurde sie zu breit und lief in die Wortmarke.
   Enger setzen statt ausblenden — Tablets haben kein Menue-Symbol.
   ============================================================ */
@media (min-width: 761px) and (max-width: 1040px) {
  .site-nav {
    gap: clamp(9px, 1.5vw, 16px);
    font-size: 8.5px;
    letter-spacing: 0.05em;
  }

  .site-nav__contact {
    min-height: 30px;
    padding: 0 11px 0 13px;
    gap: 8px;
  }

  .site-header .brand-logo__word {
    font-size: clamp(19px, 2.6vw, 26px);
  }

  .site-header .brand-logo__separator {
    height: 20px;
    margin: 0 9px;
  }

  .site-header .brand-logo__signet {
    width: 12px;
    height: 17px;
  }
}

/* Bildhinweis im Seitenkopf.
   Die KI-Verordnung (Art. 50 Abs. 4) verlangt bei KI-veraenderten Bildern
   eine Offenlegung; bei gestalterischen Darstellungen genuegt ein
   unaufdringlicher Hinweis. Genau das ist das hier. */
.seitenkopf__bildhinweis {
  position: absolute;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(10px, 1.6vw, 16px);
  z-index: 2;
  margin: 0;
  color: rgba(236, 242, 247, 0.72);
  font-size: clamp(9px, 0.62vw, 11px);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(8, 12, 17, 0.75);
  pointer-events: none;
}

@media (max-width: 680px) {
  .seitenkopf__bildhinweis {
    right: auto;
    left: clamp(14px, 4vw, 24px);
    bottom: 8px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }
}