@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/cormorant-garamond-300.woff") format("woff"); 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: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cormorant-garamond-400.woff") format("woff"); 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: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/cormorant-garamond-500.woff") format("woff"); 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: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/cormorant-garamond-300-italic.woff") format("woff"); 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: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/cormorant-garamond-400-italic.woff") format("woff"); 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: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/montserrat-300.woff") format("woff"); 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: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/montserrat-400.woff") format("woff"); 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: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/montserrat-500.woff") format("woff"); 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; }

/* STRATA – Designsystem auf Basis von Version 0 */
:root {
  --off-white: #F4F2EF;
  --sand: #E5E0D8;
  --limestone: #D0C9BF;
  --taupe: #B2AAA3;
  --warm-gray: #86817D;
  --anthracite: #292827;
  --deep: #191817;
  --olive: #53473E;
  --bronze: #746B5F;
  --bronze-light: #A09483;
  --text: #292827;
  --text-2: #67615D;
  --text-3: #8B8681;
  --border: rgba(41, 40, 39, .12);
  --border-light: rgba(41, 40, 39, .07);
  --border-dark: rgba(244, 242, 239, .10);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(24px, 4.5vw, 60px);
  --wrap: 1320px;
  --sec: clamp(88px, 10vw, 140px);
  --nav-h: 84px;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h)); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
  background: var(--off-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
p, li, dd, dt, span, blockquote, h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
p, li, dd, blockquote { text-wrap: pretty; }
h1, h2, h3, .sit-q, .model-name, .closing h2, .signal p { text-wrap: balance; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.serif { font-family: var(--serif); }

.label {
  display: block;
  font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 18px;
}
.label::before { content: ""; display: block; width: 40px; height: 1px; background: currentColor; margin-bottom: 18px; opacity: .8; }
.on-dark .label { color: var(--bronze-light); }

.h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 3.6vw, 54px); line-height: 1.14; color: var(--anthracite);
}
.on-dark .h2 { color: var(--off-white); }
.lead { font-size: 16px; line-height: 1.85; color: var(--text-2); max-width: 34em; }
.on-dark .lead, .on-dark p { color: var(--limestone); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: 0;
  font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--off-white); background: var(--anthracite);
  padding: 18px 36px; transition: background .3s, transform .2s;
}
.btn:hover { background: var(--olive); transform: translateY(-1px); }
.btn-light { background: var(--off-white); color: var(--olive); }
.btn-light:hover { background: var(--sand); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze);
  transition: gap .2s, color .2s;
}
.link-arrow::after { content: "→"; font-size: 14px; letter-spacing: 0; }
.link-arrow:hover { gap: 16px; color: var(--anthracite); }
.on-dark .link-arrow { color: var(--bronze-light); }
.on-dark .link-arrow:hover { color: var(--off-white); }
.link-back { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.link-back::before { content: "←"; font-size: 14px; letter-spacing: 0; transition: transform .2s; }
.link-back:hover { color: var(--anthracite); }
.link-back:hover::before { transform: translateX(-4px); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); max-width: none; padding: 0 var(--pad); transition: height .4s; }
.nav.scrolled, .nav.solid { background: rgba(244, 242, 239, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--border-light); }
.nav.scrolled .nav-inner { height: 68px; }
.logo { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: .25em; text-decoration: none; color: var(--anthracite); }
.nav-links { display: flex; gap: 44px; }
.nav-links a {
  position: relative; text-decoration: none;
  font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2);
  transition: color .2s;
}
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--anthracite); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--off-white); background: var(--anthracite); padding: 13px 26px; text-decoration: none; transition: background .3s; }
.nav-cta:hover { background: var(--olive); }
.menu-btn { display: none; background: none; border: 1px solid var(--border); padding: 10px 16px; font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--anthracite); cursor: pointer; }
.mobile-menu {
  display: none; position: fixed; left: 0; right: 0; bottom: 0;
  top: calc(env(safe-area-inset-top, 0px) + 68px);
  background: var(--off-white); z-index: 99; overflow-y: auto;
  padding: 24px var(--pad) calc(40px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu.open { display: block; }
.mobile-menu a.m-link { display: block; font-family: var(--serif); font-size: 30px; font-weight: 300; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
.mobile-menu .btn { margin-top: 32px; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(100vh, 940px); }
.hero-left { display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--nav-h) + 80px) clamp(32px, 6vw, 90px) clamp(64px, 8vw, 110px) var(--pad); }
.hero-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 36px; }
.hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(54px, 6.4vw, 96px); line-height: 1.02; color: var(--anthracite); margin-bottom: 36px; }
.hero-sub { font-size: 15px; line-height: 1.85; color: var(--text-2); max-width: 410px; margin-bottom: 52px; }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 36px; }
.hero-right { position: relative; background: var(--anthracite); overflow: hidden; }
.hero-right svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-legend { position: absolute; left: clamp(28px, 4vw, 52px); bottom: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; gap: 9px; }
.hero-legend span { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 242, 239, .78); }
.hero-legend span::before { content: ""; width: 18px; height: 1px; background: var(--bronze-light); }
.hero-anim > * { opacity: 0; animation: fadeUp .9s ease forwards; }
.hero-anim > *:nth-child(1) { animation-delay: .2s; }
.hero-anim > *:nth-child(2) { animation-delay: .35s; }
.hero-anim > *:nth-child(3) { animation-delay: .5s; }
.hero-anim > *:nth-child(4) { animation-delay: .65s; }
.hero-right .band { transform-origin: left; animation: bandIn 1.1s cubic-bezier(.3,.1,.2,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bandIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Themenband ---------- */
.marquee { background: var(--anthracite); overflow: hidden; padding: 24px 0; border-top: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.marquee-item { font-size: 10px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: rgba(208, 201, 191, .62); white-space: nowrap; }
.marquee-sep { width: 5px; height: 5px; border: 1px solid var(--bronze-light); transform: rotate(45deg); flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Haltung (dunkel) ---------- */
.stance { background: var(--anthracite); padding: var(--sec) 0; }
.stance .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 110px); align-items: start; }
.stance .h2 { max-width: 9em; }
.stance-text p { font-size: 17px; line-height: 1.9; margin-bottom: 26px; max-width: 36em; }
.stance-text strong { color: var(--off-white); font-weight: 400; }
.stance-quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 2vw, 27px); line-height: 1.5; color: var(--taupe); border-left: 1px solid var(--bronze); padding-left: 28px; margin: 44px 0 44px; }

/* ---------- Situationen ---------- */
.situations { padding: var(--sec) 0; }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: end; margin-bottom: 64px; }
.sit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.sit {
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px;
  background: var(--off-white); padding: 40px 44px 36px; text-decoration: none;
  transition: background .3s;
}
.sit:hover { background: #EDEBE7; }
.sit-tag { font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.sit-q { font-family: var(--serif); font-size: clamp(23px, 2vw, 27px); font-weight: 400; line-height: 1.25; color: var(--anthracite); }
.sit-more { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-2); padding-top: 14px; border-top: 1px solid var(--border-light); }
.sit-more::after { content: "→"; color: var(--bronze); font-size: 16px; transition: transform .25s; }
.sit:hover .sit-more::after { transform: translateX(6px); }

/* ---------- Schichten (dunkel) ---------- */
.layers { background: var(--deep); padding: var(--sec) 0; }
.layers .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 100px); align-items: center; }
.layers p.body { font-size: 15px; line-height: 1.9; margin-bottom: 18px; max-width: 34em; }
.strata { display: flex; flex-direction: column; border-top: 1px solid rgba(244, 242, 239, .08); }
.stratum { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: baseline; padding: 22px 28px 22px 32px; color: var(--off-white); border-bottom: 1px solid rgba(244, 242, 239, .08); }
.stratum::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.stratum b { font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--limestone); }
.stratum span { font-size: 14px; line-height: 1.6; color: rgba(244, 242, 239, .62); }
.stratum:nth-child(1) { background: rgba(232, 228, 223, .055); }
.stratum:nth-child(2) { background: rgba(219, 213, 206, .045); }
.stratum:nth-child(3) { background: rgba(201, 195, 185, .035); }
.stratum:nth-child(4) { background: rgba(178, 170, 159, .028); }
.stratum:nth-child(5) { background: rgba(151, 144, 133, .022); }
.stratum:nth-child(1)::before { background: #E8E4DF; opacity: .55; }
.stratum:nth-child(2)::before { background: #DBD5CE; opacity: .5; }
.stratum:nth-child(3)::before { background: #C9C3B9; opacity: .5; }
.stratum:nth-child(4)::before { background: #B2AA9F; opacity: .55; }
.stratum:nth-child(5)::before { background: #979085; opacity: .7; }
.strata-note { font-size: 12px; color: rgba(208, 201, 191, .6); margin-top: 16px; letter-spacing: .04em; }

/* ---------- Vergleich ---------- */
.compare { padding: var(--sec) 0; }
.compare .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 100px); align-items: start; }
.compare-sticky { position: sticky; top: 120px; }
.diff-head, .diff-row { display: grid; grid-template-columns: 1fr 1fr; }
.diff-head { padding-bottom: 14px; }
.diff-head span { font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.diff-head span + span { padding-left: 24px; color: var(--bronze); }
.diff-row { border-top: 1px solid var(--border); }
.diff-row:last-child { border-bottom: 1px solid var(--border); }
.diff-row > div { padding: 22px 0; font-size: 15px; line-height: 1.5; }
.diff-row .m { color: var(--text-3); padding-right: 24px; }
.diff-row .s { color: var(--anthracite); font-weight: 400; padding-left: 24px; border-left: 1px solid var(--border); }
.diff-row:last-child .s { font-family: var(--serif); font-size: 21px; font-style: italic; color: var(--bronze); }

/* ---------- Modelle ---------- */
.models { background: var(--sand); padding: var(--sec) 0; }
.model-list { border-top: 1px solid var(--border); }
.model {
  display: grid; grid-template-columns: 3fr 6fr 40px; gap: clamp(24px, 4vw, 60px); align-items: center;
  padding: 38px 0; border-bottom: 1px solid var(--border); text-decoration: none; transition: padding .3s;
}
.model:hover { padding-left: 14px; }
.model-name { font-family: var(--serif); font-size: clamp(26px, 2.3vw, 32px); font-weight: 400; color: var(--anthracite); line-height: 1.15; }
.model-name small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); margin-top: 10px; }
.model p { font-size: 15px; line-height: 1.8; color: var(--text-2); }
.model-go { font-size: 18px; color: var(--bronze); justify-self: end; transition: transform .25s; }
.model:hover .model-go { transform: translateX(6px); }
.beyond {
  display: grid; grid-template-columns: 3fr 6fr 40px; gap: clamp(24px, 4vw, 60px); align-items: center;
  margin-top: 48px; padding: 40px clamp(24px, 3vw, 44px); background: var(--olive); color: var(--off-white); text-decoration: none;
}
.beyond .model-name { color: var(--off-white); }
.beyond .model-name small { color: var(--limestone); }
.beyond p { color: rgba(244, 242, 239, .8); font-size: 15px; line-height: 1.8; }
.beyond .model-go { color: var(--limestone); }
.beyond:hover .model-go { transform: translateX(6px); }

/* ---------- Vorgehen ---------- */
.approach { padding: var(--sec) 0; }
.approach .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 9vw, 120px); align-items: center; }
.approach .lead { margin: 30px 0 40px; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--border-light); }
.step:first-child { border-top: 1px solid var(--border-light); }
.step-num { font-family: var(--serif); font-size: 32px; font-weight: 300; color: var(--limestone); line-height: 1; padding-top: 2px; }
.step h3 { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--anthracite); margin-bottom: 8px; }
.step p { font-size: 14px; line-height: 1.75; color: var(--text-2); }

.signal { padding: clamp(80px, 9vw, 120px) 0; border-top: 1px solid var(--border-light); text-align: center; }
.signal p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(27px, 2.9vw, 42px); line-height: 1.4; color: var(--anthracite); max-width: 820px; margin: 0 auto; }

/* ---------- Person (kompakt) ---------- */
.person-strip { padding: 0 0 var(--sec); }
.person-strip .inner { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 48px); align-items: center; padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; filter: saturate(.82); }
.person-strip p { font-size: 15px; line-height: 1.8; color: var(--text-2); max-width: 46em; }
.person-strip p strong { font-weight: 500; color: var(--anthracite); }

/* ---------- Abschluss ---------- */
.closing { background: var(--olive); padding: clamp(88px, 10vw, 130px) 0; text-align: center; }
.closing h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.2; color: var(--off-white); max-width: 15em; margin: 0 auto 22px; }
.closing p { font-size: 15px; color: rgba(244, 242, 239, .72); max-width: 32em; margin: 0 auto 44px; line-height: 1.8; }

/* ---------- Footer ---------- */
.footer { background: var(--deep); padding: 80px 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.footer .logo { color: var(--off-white); display: inline-block; margin-bottom: 20px; }
.footer-desc { font-size: 12px; line-height: 2; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-gray); }
.footer-note { color: var(--warm-gray) !important; font-size: 12px !important; line-height: 1.6; max-width: 220px; }
.footer h4 { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 20px; }
.footer li { margin-bottom: 10px; font-size: 13px; color: var(--taupe); }
.footer a { text-decoration: none; color: var(--taupe); transition: color .2s; }
.footer a:hover { color: var(--off-white); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 32px; font-size: 11px; color: rgba(134, 129, 125, .7); letter-spacing: .04em; }
.footer-bottom nav { display: flex; gap: 24px; }

/* ==========================================================
   Unterseiten
   ========================================================== */
.page-hero { padding: calc(var(--nav-h) + clamp(48px, 7vw, 90px)) 0 clamp(64px, 8vw, 100px); border-bottom: 1px solid var(--border-light); }
.page-hero .link-back { margin-bottom: clamp(40px, 6vw, 64px); }
.page-hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 5vw, 72px); line-height: 1.08; color: var(--anthracite); max-width: 14em; margin-bottom: 30px; }
.page-hero .lead { font-size: 17px; max-width: 38em; }
.page-hero-grid { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(40px, 6vw, 80px); align-items: end; }
.hero-facts { border-left: 1px solid var(--border); padding-left: 28px; }
.hero-facts div { padding: 10px 0; }
.hero-facts dt { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.hero-facts dd { font-size: 14px; color: var(--anthracite); line-height: 1.5; }

.block { padding: clamp(72px, 8vw, 110px) 0; border-bottom: 1px solid var(--border-light); }
.block.sand { background: var(--sand); border-bottom: 0; }
.block.dark { background: var(--anthracite); border-bottom: 0; }
.block-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.block h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.18; color: var(--anthracite); }
.block.dark h2 { color: var(--off-white); }
.block .intro { font-size: 16px; line-height: 1.85; color: var(--text-2); margin-bottom: 32px; max-width: 38em; }
.block.dark .intro { color: var(--limestone); }

.who-list li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 18px 0; border-top: 1px solid var(--border); font-size: 16px; line-height: 1.65; }
.who-list li:last-child { border-bottom: 1px solid var(--border); }
.who-list li::before { content: ""; width: 14px; height: 1px; background: var(--bronze); margin-top: .85em; }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.check-grid > div { background: var(--sand); padding: 28px 30px; }
.check-grid h3 { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--anthracite); margin-bottom: 8px; }
.check-grid p { font-size: 14px; line-height: 1.7; color: var(--text-2); }

.scenarios { border-top: 1px solid var(--border-dark); }
.scenario { display: grid; grid-template-columns: 4fr 8fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--border-dark); }
.scenario h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.2; color: var(--off-white); }
.scenario p { font-size: 15px; line-height: 1.75; color: var(--limestone); }
.scenario p + p { margin-top: 8px; color: rgba(208, 201, 191, .7); font-size: 14px; }

.depth-list a { display: grid; grid-template-columns: 3fr 7fr 30px; gap: 28px; align-items: center; padding: 26px 0; border-top: 1px solid var(--border); text-decoration: none; transition: padding .3s; }
.depth-list a:last-child { border-bottom: 1px solid var(--border); }
.depth-list a:hover { padding-left: 12px; }
.depth-list strong { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--anthracite); }
.depth-list span { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.depth-list i { font-style: normal; color: var(--bronze); justify-self: end; }
.callout { margin-top: 36px; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.45; color: var(--bronze); border-left: 1px solid var(--bronze); padding-left: 24px; max-width: 30em; }

.page-end { padding: clamp(64px, 7vw, 96px) 0; }
.page-end .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.page-end h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 2.6vw, 38px); color: var(--anthracite); }
.page-end p { color: var(--text-2); font-size: 15px; margin-top: 6px; }

/* Über STRATA – Person */
.person { display: grid; grid-template-columns: 220px 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.person .portrait { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; filter: saturate(.85); }
.person-name { font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--anthracite); line-height: 1.2; margin-bottom: 22px; }
.person-role { font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); margin-bottom: 28px; }
.person ul li { display: grid; grid-template-columns: 26px 1fr; padding: 15px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.7; color: var(--text); max-width: 46em; }
.person ul li:last-child { border-bottom: 1px solid var(--border); }
.person ul li::before { content: ""; width: 12px; height: 1px; background: var(--bronze); margin-top: .85em; }

.views { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 8px; }
.views div { background: var(--off-white); padding: 26px 24px; }
.views b { display: block; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; color: var(--anthracite); }
.views span { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.views-strata { margin-top: 1px; background: var(--anthracite); color: var(--off-white); padding: 26px 24px; display: grid; grid-template-columns: 1fr 3fr; gap: 24px; align-items: baseline; }
.views-strata b { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-light); }
.views-strata span { font-size: 15px; color: var(--limestone); }

/* Kontakt */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.field input, .field select, .field textarea { font: 300 16px/1.5 var(--sans); color: var(--anthracite); background: transparent; border: 0; border-bottom: 1px solid var(--taupe); padding: 10px 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bronze); }
.field.err input, .field.err select, .field.err textarea { border-color: #9B3B2A; }
.consent { grid-column: 1 / -1; display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 13px; color: var(--text-2); }
.consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--anthracite); }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form-msg { font-size: 14px; color: var(--text-2); }
.contact-data div { padding: 18px 0; border-top: 1px solid var(--border); }
.contact-data dt { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.contact-data dd { font-size: 15px; }

/* Platzhalterseite */
.pending { min-height: 70vh; display: flex; align-items: center; padding: calc(var(--nav-h) + 60px) 0 80px; }
.pending h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.1; margin: 28px 0 20px; }
.pending p { color: var(--text-2); max-width: 32em; margin-bottom: 36px; }

main.enter { animation: pageIn .45s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1100px) {
  .nav-links { gap: 28px; }
}
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: inline-block; }
  .nav-inner, .nav.scrolled .nav-inner { height: 68px; }
  :root { --nav-h: 68px; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-left { padding: calc(var(--nav-h) + 56px) var(--pad) 56px; }
  .hero-right { height: 300px; }
  .stance .wrap, .layers .wrap, .compare .wrap, .approach .wrap, .sec-head, .block-grid, .page-hero-grid { grid-template-columns: 1fr; }
  .compare-sticky { position: static; }
  .sit-grid { grid-template-columns: 1fr; }
  .sit { padding: 30px 26px 26px; }
  .model, .beyond { grid-template-columns: 1fr; gap: 12px; }
  .model:hover { padding-left: 0; }
  .model-go { justify-self: start; }
  .hero-facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
  .check-grid { grid-template-columns: 1fr; }
  .scenario { grid-template-columns: 1fr; gap: 8px; }
  .depth-list a { grid-template-columns: 1fr; gap: 6px; }
  .depth-list i { justify-self: start; }
  .views { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 50px; }
  .person-strip .inner { grid-template-columns: auto 1fr; }
  .person-strip .inner .link-arrow { grid-column: 1 / -1; }
  .avatar { width: 84px; height: 84px; }
  .person { grid-template-columns: 1fr; }
  .person .portrait { width: 160px; height: 160px; }
  .stratum { grid-template-columns: 1fr; gap: 4px; padding: 18px 22px; }
  .diff-row > div { font-size: 14px; padding: 18px 0; }
  .diff-row .m { padding-right: 14px; }
  .diff-row .s, .diff-head span + span { padding-left: 14px; }
  .views, .views-strata { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-anim > * { opacity: 1; }
}
@media (max-width: 960px) { .hero-legend { display: none; } }

@media (max-width: 640px) {
  .diff-head { display: none; }
  .diff-row { grid-template-columns: 1fr; padding: 16px 0; }
  .diff-row > div { padding: 2px 0; }
  .diff-row .m { padding-right: 0; font-size: 13px; }
  .diff-row .m::before { content: "Klassisch: "; color: var(--text-3); font-weight: 500; }
  .diff-row .s { border-left: 0; padding-left: 0; }
  .diff-row .s::before { content: "STRATA: "; color: var(--bronze); font-weight: 500; font-style: normal; font-family: var(--sans); font-size: 13px; }
}

/* ==========================================================
   STIL-RUNDE: dunkel dominant, sattere Erdtöne, dezente Bewegung
   ========================================================== */
:root {
  --ink-deep: #121110;
  --night: #1A1817;
  --mokka: #221F1C;
  --tabak: #362F2A;
  --brass: #B6A38D;
  --brass-dim: #92826F;
  --olive-deep: #362F2A;
  --cream: #F2EFEB;
  --on-dark: #EAE6E0;
  --on-dark-2: #AFA9A1;
  --line-dark: rgba(234, 230, 224, .10);
}
body { background: var(--night); }

/* Navigation: hell auf dunkel */
.nav .logo, .nav-links a { color: var(--on-dark); }
.nav-links a { color: var(--on-dark-2); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--on-dark); }
.nav-links a::after { background: var(--brass); }
.nav.scrolled, .nav.solid { background: rgba(18, 17, 16, .88); border-bottom-color: var(--line-dark); }
.nav-cta { background: var(--brass); color: var(--ink-deep); }
.nav-cta:hover { background: var(--on-dark); }
.menu-btn { color: var(--on-dark); border-color: var(--line-dark); }
.mobile-menu { background: var(--ink-deep); }
.mobile-menu a.m-link { color: var(--on-dark); border-bottom-color: var(--line-dark); }
.mobile-menu .btn { background: var(--brass); color: var(--ink-deep); }

/* Allgemein auf dunklen Flächen */
.on-dark .label, .hero-eyebrow { color: var(--brass); }
.on-dark .h2 { color: var(--on-dark); }
.on-dark .lead, .on-dark p { color: var(--on-dark-2); }
.on-dark .btn { background: var(--brass); color: var(--ink-deep); }
.on-dark .btn:hover { background: var(--on-dark); }
.on-dark .link-arrow { color: var(--brass); }
.on-dark .link-back { color: var(--on-dark-2); }
.on-dark .link-back:hover { color: var(--on-dark); }

/* Hero */
.hero { background: var(--ink-deep); }
.hero h1 { color: var(--on-dark); }
.hero-sub { color: var(--on-dark-2); }
.hero .btn { background: var(--brass); color: var(--ink-deep); }
.hero .btn:hover { background: var(--on-dark); }
.hero .link-arrow { color: var(--brass); }
.hero .link-arrow:hover { color: var(--on-dark); }
.hero-right { background: var(--ink-deep); }
.hero-right .band { animation: bandIn 1.4s cubic-bezier(.3,.1,.2,1) both; }
.drift { animation: drift calc(var(--d, 90) * 1s) linear infinite; }
.drift.rev { animation-direction: reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-600px); } }
.hero-legend span { color: rgba(234, 230, 224, .82); }
.hero-legend span::before { background: var(--brass); }

/* Themenband */
.marquee { background: var(--mokka); border-color: var(--line-dark); }
.marquee-item { color: rgba(234, 230, 224, .58); }
.marquee-sep { border-color: var(--brass); }

/* Haltung */
.stance { background: var(--night); }
.stance-quote { color: var(--brass); border-left-color: var(--brass-dim); }
.stance-text strong { color: var(--on-dark); }

/* Situationen: heller Akzent, Karten mit Tiefe */
.situations { background: var(--cream); }
.sit-grid { gap: 16px; background: transparent; border: 0; perspective: 1200px; }
.sit {
  background: #FAF8F5; border: 1px solid rgba(41, 40, 39, .09);
  transform-style: preserve-3d; will-change: transform;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, background .3s, border-color .3s;
}
.sit:hover { background: #FEFDFA; border-color: rgba(146, 130, 111, .35); box-shadow: 0 22px 44px -18px rgba(34, 31, 28, .32), 0 4px 10px -4px rgba(34, 31, 28, .12); }
.sit-more::after { color: var(--brass-dim); }

/* Schichten */
.layers { background: var(--ink-deep); }
.stratum { transition: background .35s, padding-left .35s; }
.stratum:hover { padding-left: 40px; }
.stratum:nth-child(1) { background: rgba(170, 157, 139, .16); }
.stratum:nth-child(2) { background: rgba(131, 116, 102, .16); }
.stratum:nth-child(3) { background: rgba(95, 83, 74, .18); }
.stratum:nth-child(4) { background: rgba(102, 90, 81, .2); }
.stratum:nth-child(5) { background: rgba(43, 40, 37, .55); }
.stratum:nth-child(1)::before { background: #AA9D8B; opacity: 1; }
.stratum:nth-child(2)::before { background: #837466; opacity: 1; }
.stratum:nth-child(3)::before { background: #5F534A; opacity: 1; }
.stratum:nth-child(4)::before { background: #665A51; opacity: 1; }
.stratum:nth-child(5)::before { background: var(--brass); opacity: 1; }
.stratum b { color: var(--on-dark); }

/* Vergleich: dunkel */
.compare { background: var(--mokka); }
.compare .label { color: var(--brass); }
.compare .h2 { color: var(--on-dark); }
.compare .lead { color: var(--on-dark-2); }
.diff-head span { color: rgba(234, 230, 224, .45); }
.diff-head span + span { color: var(--brass); }
.diff-row { border-top-color: var(--line-dark); }
.diff-row:last-child { border-bottom-color: var(--line-dark); }
.diff-row .m { color: rgba(234, 230, 224, .5); }
.diff-row .s { color: var(--on-dark); border-left-color: var(--line-dark); }
.diff-row:last-child .s { color: var(--brass); }
.diff-row { transition: background .3s; }
.diff-row:hover { background: rgba(234, 230, 224, .03); }

/* Leistungen: heller Akzent */
.models { background: #E6E0D8; }
.beyond { background: var(--olive-deep); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.beyond:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(34, 31, 28, .45); }

/* Vorgehen, Zitat, Person: dunkel */
.approach { background: var(--night); }
.approach .label { color: var(--brass); }
.approach .h2 { color: var(--on-dark); }
.approach .lead { color: var(--on-dark-2); }
.approach .link-arrow { color: var(--brass); }
.step { border-color: var(--line-dark) !important; }
.step-num { color: var(--brass-dim); }
.step h3 { color: var(--on-dark); }
.step p { color: var(--on-dark-2); }
.signal { background: var(--night); border-top-color: var(--line-dark); }
.signal p { color: var(--on-dark); }
.person-strip { background: var(--night); }
.person-strip .inner { border-color: var(--line-dark); }
.person-strip p { color: var(--on-dark-2); }
.person-strip p strong { color: var(--on-dark); }
.person-strip .link-arrow { color: var(--brass); }
.closing { background: var(--olive-deep); }
.closing .btn-light { background: var(--brass); color: var(--ink-deep); }
.closing .btn-light:hover { background: var(--on-dark); }
.footer { background: #0D0C0C; }

/* Unterseiten */
.page-hero { background: var(--ink-deep); border-bottom: 0; }
.page-hero h1 { color: var(--on-dark); }
.page-hero .lead { color: var(--on-dark-2); }
.page-hero .label { color: var(--brass); }
.page-hero .link-back { color: var(--on-dark-2); }
.page-hero .link-back:hover { color: var(--on-dark); }
.hero-facts { border-left-color: var(--line-dark); }
.hero-facts dt { color: rgba(234, 230, 224, .45); }
.hero-facts dd { color: var(--on-dark); }
.block { background: var(--cream); }
.block.sand { background: #E6E0D8; }
.block.dark { background: var(--night); }
.check-grid > div { background: #EEEAE4; transition: background .3s; }
.check-grid > div:hover { background: #F6F3EF; }
.scenario { transition: padding-left .35s; }
.scenario:hover { padding-left: 10px; }
.page-end { background: var(--mokka); }
.page-end h2 { color: var(--on-dark); }
.page-end p { color: var(--on-dark-2); }
.page-end .link-back { color: var(--on-dark-2); }
.page-end .btn { background: var(--brass); color: var(--ink-deep); }
.page-end .btn:hover { background: var(--on-dark); }
.pending { background: var(--ink-deep); }
.pending h1 { color: var(--on-dark); }
.pending p { color: var(--on-dark-2); }
.pending .link-back { color: var(--on-dark-2); }
.pending .link-arrow { color: var(--brass); }

/* Einblenden beim Scrollen */
.js-reveal .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js-reveal .rv.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .sit-grid { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .rv { opacity: 1; transform: none; }
  .drift { animation: none; }
}
.js-reveal .sit.rv.in { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, background .3s, border-color .3s, opacity .9s; }

/* ---------- Bronze-Runde: eine Farbfamilie, metallische Verläufe ---------- */
.hero-right { background: radial-gradient(120% 70% at 75% 0%, #544C45 0%, #2C2825 55%, #161413 100%); }
.hero-legend span { color: rgba(244, 240, 234, .9); }
.bob { animation: bob 9s ease-in-out infinite alternate; }
.bob.b2 { animation-duration: 11s; animation-delay: -3s; }
.bob.b3 { animation-duration: 7.5s; animation-delay: -5s; }
@keyframes bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
.stratum:nth-child(1) { background: linear-gradient(90deg, rgba(226, 217, 205, .20), rgba(186, 170, 152, .08)); }
.stratum:nth-child(2) { background: linear-gradient(90deg, rgba(186, 170, 152, .18), rgba(157, 140, 125, .07)); }
.stratum:nth-child(3) { background: linear-gradient(90deg, rgba(157, 140, 125, .17), rgba(128, 113, 99, .06)); }
.stratum:nth-child(4) { background: linear-gradient(90deg, rgba(128, 113, 99, .17), rgba(102, 90, 81, .06)); }
.stratum:nth-child(5) { background: linear-gradient(90deg, rgba(102, 90, 81, .22), rgba(54, 47, 42, .2)); }
.stratum:nth-child(1)::before { background: #E2D9CD; }
.stratum:nth-child(2)::before { background: #BAAA98; }
.stratum:nth-child(3)::before { background: #9D8C7D; }
.stratum:nth-child(4)::before { background: #807163; }
.stratum:nth-child(5)::before { background: #665A51; }
.beyond { background: linear-gradient(120deg, #63564D 0%, #443C35 45%, #272320 100%); }
.beyond .model-name small { color: #E2D9CD; }
.closing { background: linear-gradient(135deg, #63564D 0%, #362F2A 50%, #1A1817 100%); }
@media (prefers-reduced-motion: reduce) { .bob { animation: none; } }
/* Test: Hero-Hintergrund im dunklen Braun der Schichten */
.hero, .hero-left { background: #292522; }
.hero-right { background: radial-gradient(120% 70% at 75% 0%, #544C45 0%, #292522 62%); }

/* ==========================================================
   V6: Beruhigung und feinere Dosierung
   ========================================================== */

/* Hero: ruhigere Bewegung, Mobil langsamer als Desktop */
@media (max-width: 960px) { .drift { animation-duration: calc(var(--d, 90) * 1.5s); } }
.bob { animation: bob 18s ease-in-out infinite alternate; }
.bob.b2 { animation-duration: 22s; animation-delay: -6s; }
.bob.b3 { animation-duration: 16s; animation-delay: -9s; }
@keyframes bob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }

/* Bronze nur noch als Akzent: Flächen ruhig und gedeckt */
.beyond { background: #2C2825; }
.beyond .model-name small { color: var(--brass); }
.closing { background: #292522; border-top: 1px solid var(--line-dark); }

/* Situationskarten: Tiefe statt 3D-Effekt */
.sit:hover { box-shadow: 0 16px 34px -22px rgba(34, 31, 28, .22), 0 2px 6px -3px rgba(34, 31, 28, .08); border-color: rgba(146, 130, 111, .25); }
.beyond:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -22px rgba(34, 31, 28, .35); }

/* Reveals: weicher, nur für größere Gruppen */
.js-reveal .rv { transform: translateY(14px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }

/* ---------- Bildmomente ---------- */
.img-moment { position: relative; overflow: hidden; margin: 0; }
.img-moment img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); will-change: transform; }
.stance-img { margin-top: 56px; aspect-ratio: 4 / 3; max-width: 460px; clip-path: inset(10% 0 10% 0); transition: clip-path 1.6s cubic-bezier(.2,.7,.2,1); }
.stance-img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(234, 230, 224, .06); pointer-events: none; }
.stance-img.in { clip-path: inset(0 0 0 0); }
.signal.has-img { position: relative; overflow: hidden; padding: clamp(110px, 13vw, 180px) 0; border-top: 0; }
.signal-bg { position: absolute; inset: -12% 0; opacity: 0; transition: opacity 1.8s ease; }
.signal-bg.in { opacity: 1; }
.signal-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 24, 23, .82) 0%, rgba(26, 24, 23, .62) 50%, rgba(26, 24, 23, .84) 100%); }
.signal.has-img .wrap { position: relative; z-index: 1; }
.signal.has-img p { color: #F2EEE9; text-shadow: 0 1px 24px rgba(0, 0, 0, .35); }
@media (max-width: 960px) {
  .stance-img { margin-top: 36px; max-width: none; aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .stance-img, .stance-img.in { clip-path: none; }
  .signal-bg { opacity: 1; }
  .img-moment img { transform: none; }
}
.signal-bg img { object-position: center 65%; }

/* ==========================================================
   V6.3: kürzere Startseite, Direkteinstiege, Person mit Kontakt
   ========================================================== */
.hero-anim > *:nth-child(5) { animation-delay: .8s; }
.hero-quick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-dark); max-width: 540px; }
.hero-quick span { flex-basis: 100%; font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-2); }
.hero-quick a { font-size: 14px; line-height: 1.5; color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--brass-dim); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.hero-quick a:hover { color: var(--brass); border-color: var(--brass); }

.meet { background: #292522; border-top: 1px solid var(--line-dark); padding: var(--sec) 0; }
.meet .wrap { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(48px, 7vw, 100px); align-items: center; }
.meet-person { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: clamp(24px, 3vw, 44px); align-items: end; }
.meet-person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.85); }
.meet .meet-name { font-family: var(--serif); font-size: clamp(24px, 2.1vw, 30px); font-weight: 400; line-height: 1.22; color: var(--on-dark); margin-bottom: 16px; }
.meet-person p { font-size: 15px; line-height: 1.8; margin-bottom: 24px; }
.meet-contact { border-left: 1px solid var(--line-dark); padding-left: clamp(32px, 5vw, 72px); }
.meet-contact .h2 { font-size: clamp(30px, 2.8vw, 42px); margin-bottom: 18px; }
.meet-contact > p { font-size: 15px; line-height: 1.8; max-width: 32em; margin-bottom: 34px; }
.meet-data { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.meet-data dt { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(234, 230, 224, .5); margin-bottom: 4px; }
.meet-data dd a { font-size: 15px; color: var(--on-dark); text-decoration: none; }
.meet-data dd a:hover { color: var(--brass); }

.stance-page .stance-img { margin-top: 10px; }
.layers-next { margin-top: 18px; }
.approach-page .wrap { align-items: start; }

@media (max-width: 960px) {
  .hero-quick { margin-top: 40px; }
  .meet .wrap { grid-template-columns: 1fr; }
  .meet-contact { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-dark); padding-top: 44px; }
}
@media (max-width: 640px) {
  .hero-quick { gap: 12px 22px; }
  .meet-person { grid-template-columns: 112px 1fr; gap: 20px; align-items: start; }
}

/* ==========================================================
   V6.4: kühlere Erdtöne, Lichteinfall, Bilder werden scharf
   ========================================================== */
/* Schichten: etwas mehr Bewegung, wandernder Lichteinfall */
.drift { animation-duration: calc(var(--d, 90) * .6s); }
@media (max-width: 960px) { .drift { animation-duration: calc(var(--d, 90) * 1s); } }
@keyframes bob { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
.hero-legend { z-index: 2; }
.hero-right::after { content: ""; position: absolute; inset: -10% -70%; pointer-events: none; z-index: 1;
  background: linear-gradient(104deg, transparent 40%, rgba(255, 252, 246, .05) 45%, rgba(255, 252, 246, .22) 50%, rgba(255, 252, 246, .05) 55%, transparent 60%);
  mix-blend-mode: overlay; animation: lightfall 15s ease-in-out infinite alternate; }
@keyframes lightfall { from { transform: translateX(-30%); } to { transform: translateX(30%); } }

/* Bilder: erst schemenhaft, dann klar */
.signal-bg img, .stance-img img { filter: blur(26px); transition: filter 2.8s cubic-bezier(.2,.7,.2,1); }
.signal-bg.in img, .stance-img.in img { filter: blur(0); }
.stance-img img { object-position: 18% 40%; }
.avatar, .person .portrait, .meet-person img { filter: saturate(.72); }

/* Aussage: linksbündig, großer Satz, freier Raum rechts */
.signal.statement { text-align: left; padding: clamp(120px, 15vw, 210px) 0; }
.signal.statement p { font-style: normal; font-size: clamp(32px, 4.3vw, 62px); line-height: 1.16; max-width: 13em; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-right::after { animation: none; }
  .signal-bg img, .stance-img img { filter: none; }
}

/* ==========================================================
   V6.5: Bewegung mit Bedeutung
   ========================================================== */
/* Vergleich baut sich Zeile für Zeile auf */
.js-reveal .diff-row.rv { transform: translateY(10px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
@media (min-width: 961px) {
  .js-reveal .diff-row.rv:nth-child(3) { transition-delay: .12s; }
  .js-reveal .diff-row.rv:nth-child(4) { transition-delay: .24s; }
  .js-reveal .diff-row.rv:nth-child(5) { transition-delay: .36s; }
  .js-reveal .diff-row.rv:nth-child(6) { transition-delay: .48s; }
  .js-reveal .diff-row.rv:nth-child(7) { transition-delay: .85s; }
}
/* Licht folgt dem Mauszeiger, Schichten öffnen sich beim Scrollen (nur Desktop) */
.hero-right.follow::after { animation: none; transform: translateX(calc(var(--lx, 0) * 1%)); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.hero-right .band { transition: translate .25s linear; }
.hero-right .band:nth-of-type(1) { translate: 0 calc(var(--sy, 0) * -.07px); }
.hero-right .band:nth-of-type(2) { translate: 0 calc(var(--sy, 0) * -.03px); }
.hero-right .band:nth-of-type(3) { translate: 0 calc(var(--sy, 0) * .02px); }
.hero-right .band:nth-of-type(4) { translate: 0 calc(var(--sy, 0) * .07px); }
.hero-right .band:nth-of-type(5) { translate: 0 calc(var(--sy, 0) * .13px); }
/* Vergütung in den Leistungszeilen */
.model-meta { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .05em; color: var(--bronze); }
.beyond .model-meta { color: var(--brass); }
@media (prefers-reduced-motion: reduce) { .hero-right .band { translate: none; transition: none; } }

/* ==========================================================
   V6.6: echtes Gestein im Bildband, Zitat zur Qualität der Fragen
   ========================================================== */
.signal.statement .signal-bg::after { background: linear-gradient(90deg, rgba(18, 17, 16, .90) 0%, rgba(18, 17, 16, .72) 45%, rgba(18, 17, 16, .38) 100%); }
.signal.statement p { font-size: clamp(26px, 3.1vw, 46px); line-height: 1.24; max-width: 19em; }
.signal.statement .signal-bg img { object-position: center 50%; }
.stance-img img { object-position: center; }
@media (max-width: 960px) {
  .signal.statement .signal-bg::after { background: linear-gradient(180deg, rgba(18, 17, 16, .86) 0%, rgba(18, 17, 16, .72) 100%); }
}

/* ==========================================================
   V6.7: getönte Personenbilder, STRATA-System, Pfeil-Links
   ========================================================== */
.meet-person img { filter: none; }
.person { grid-template-columns: minmax(220px, 340px) 1fr; }
.person .scene { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: center top; }
.statement-links { display: flex; flex-wrap: wrap; gap: 16px 44px; margin-top: clamp(36px, 4vw, 52px); }
.statement .link-arrow { color: var(--brass); }
.statement .link-arrow:hover { color: var(--on-dark); }
@media (max-width: 640px) {
  .person { grid-template-columns: 1fr; }
  .person .scene { max-width: 300px; }
}

/* ==========================================================
   V6.8: Travertin im Vergleich und in den Seitenköpfen, Beratungsszene auf der Startseite
   ========================================================== */
:root { --trav: url("/img/travertin-a.jpg"); }
.compare .wrap.compare-top { display: block; margin-bottom: clamp(56px, 7vw, 96px); }
.compare-img { aspect-ratio: 5 / 2; }
.compare-img > div { width: 100%; height: 100%; background: var(--trav) center / cover no-repeat; transform: scale(1.06); will-change: transform; filter: blur(26px); transition: filter 2.8s cubic-bezier(.2,.7,.2,1); }
.compare-img.in > div { filter: blur(0); }
.compare-img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(235, 230, 224, .06); pointer-events: none; }
.page-hero { background-image: linear-gradient(90deg, rgba(18, 17, 16, .94) 0%, rgba(18, 17, 16, .86) 42%, rgba(18, 17, 16, .50) 100%), var(--trav); background-size: cover; background-position: center 38%; }

.meet-person { grid-template-columns: minmax(180px, 290px) 1fr; }
.meet-person img { aspect-ratio: 5 / 6; object-position: center top; }
.person { grid-template-columns: minmax(200px, 300px) 1fr; }
.person .scene { aspect-ratio: 4 / 5; }
@media (max-width: 960px) {
  .compare-img { aspect-ratio: 16 / 9; }
  .page-hero { background-image: linear-gradient(180deg, rgba(18, 17, 16, .90) 0%, rgba(18, 17, 16, .80) 100%), var(--trav); background-position: 70% center; }
}
@media (max-width: 640px) {
  .meet-person { grid-template-columns: 1fr; gap: 28px; }
  .meet-person img { max-width: 300px; }
  .person { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .compare-img > div { filter: none; transform: none; } }

/* ==========================================================
   V6.9: Einstieg Person, rundes Porträt, Erfahrung ergänzt
   ========================================================== */
.meet-person .label { margin-bottom: 14px; }
.person { grid-template-columns: 280px 1fr; }
.person .portrait { width: 280px; height: 280px; border-radius: 50%; object-fit: cover; object-position: center 16%; filter: none; }
.person-name { margin-bottom: 10px; }
@media (max-width: 960px) { .person { grid-template-columns: 220px 1fr; } .person .portrait { width: 220px; height: 220px; } }
@media (max-width: 640px) { .person { grid-template-columns: 1fr; } .person .portrait { width: 200px; height: 200px; } }

/* ==========================================================
   V7.0: Korrekturschleife 1
   ========================================================== */
:root { --trav-b: url("/img/travertin-b.jpg"); }
.page-hero.ph-b { background-image: linear-gradient(90deg, rgba(18, 17, 16, .94) 0%, rgba(18, 17, 16, .82) 45%, rgba(18, 17, 16, .50) 100%), var(--trav-b); background-position: center 55%; }
.footer-note { margin-top: 16px; font-size: 12px; line-height: 1.7; color: var(--warm-gray); opacity: .8; }
.hero-quick .hero-quick-all { border-bottom-color: transparent; color: var(--brass); }
.hero-quick .hero-quick-all::after { content: "\2193"; margin-left: 8px; }
.hero-quick .hero-quick-all:hover { color: var(--on-dark); border-color: transparent; }
.fee-note { margin-top: 16px; font-size: 12px; letter-spacing: .05em; color: var(--bronze); }
.page-hero .fee-note { color: var(--brass); margin-top: 20px; }
.about-text p { font-size: 16px; line-height: 1.85; color: var(--text-2); max-width: 38em; margin-bottom: 22px; }
.about-text p.intro { color: var(--text); margin-bottom: 26px; }
.about-text p:last-child { margin-bottom: 0; }
.btn { line-height: 1.5; text-align: center; padding-top: 15px; padding-bottom: 15px; }
@media (max-width: 1240px) { .nav-cta .cta-long { display: none; } }
@media (max-width: 960px) {
  .page-hero.ph-b { background-image: linear-gradient(180deg, rgba(18, 17, 16, .90) 0%, rgba(18, 17, 16, .80) 100%), var(--trav-b); background-position: 70% center; }
}
@media (max-width: 640px) { .btn { letter-spacing: .14em; padding-left: 26px; padding-right: 26px; } }

/* ==========================================================
   V7.1: Korrekturschleife 2 (Inhalt, Abgrenzung, Rechtstexte)
   ========================================================== */
.block-note { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.75; color: var(--text-2); max-width: 46em; }
.legal { max-width: 860px; }
.legal h2 { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--anthracite); margin: 44px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 16px; line-height: 1.8; color: var(--text); margin-bottom: 14px; max-width: 44em; }
.legal a { color: inherit; }
.legal .legal-lead { color: var(--text-2); margin-bottom: 36px; }
.legal .legal-date { margin-top: 40px; font-size: 13px; color: var(--text-2); }
.todo { background: rgba(155, 59, 42, .10); border-left: 2px solid #9B3B2A; padding: 1px 8px; font-size: .9em; color: #7A2E20; }
.consent a { color: inherit; }

/* V7.2: Rechtstexte */
.legal ul { margin: 0 0 14px; padding: 0; list-style: none; max-width: 44em; }
.legal ul li { position: relative; padding: 7px 0 7px 26px; font-size: 16px; line-height: 1.7; color: var(--text); }
.legal ul li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 12px; height: 1px; background: var(--bronze); }
.legal strong { font-weight: 500; }
.footer-bottom nav { flex-wrap: wrap; gap: 10px 24px; }
.page-hero h1 { overflow-wrap: break-word; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: .6; cursor: default; }
.depth-list strong { line-height: 1.2; }
@media (max-width: 960px) { .dl-br { display: none; } }
/* V7.4: Kennzahlen im Seitenkopf bleiben lesbar */
@media (min-width: 961px) {
  .page-hero:has(.hero-facts) { background-image: linear-gradient(90deg, rgba(18, 17, 16, .94) 0%, rgba(18, 17, 16, .86) 45%, rgba(18, 17, 16, .78) 100%), var(--trav); }
  .page-hero.ph-b:has(.hero-facts) { background-image: linear-gradient(90deg, rgba(18, 17, 16, .94) 0%, rgba(18, 17, 16, .84) 45%, rgba(18, 17, 16, .76) 100%), var(--trav-b); }
}

/* Einzelseiten: lange Wörter auf schmalen Bildschirmen */
.page-hero-grid > *, .hero-left { min-width: 0; }
.page-hero h1, .hero h1, .sit h3 { overflow-wrap: anywhere; }
@media (max-width: 350px) { .btn { letter-spacing: .08em; padding-left: 16px; padding-right: 16px; } .hero-eyebrow { letter-spacing: .2em; } }