/* =========================================================
   AURELAYA — Brand Building & Development
   Farbsystem: Ivory #FAF8F5 · Gold #BFA86E · Earth #745E4D
   ========================================================= */

/* Hausschrift aus dem Brandbook (Kulachat HC): sobald eine Webfont-Lizenz vorliegt,
   per @font-face einbinden – sie steht in --font-display bereits an erster Stelle. */

:root {
  --ivory: #FAF8F5;
  --gold: #BFA86E;
  --earth: #745E4D;
  --earth-deep: #3F332B;

  --bg: var(--ivory);
  --bg-2: #F2EDE5;
  --surface: #FFFFFF;
  --fg: #3F332B;
  --fg-soft: #6F6052;
  --fg-faint: rgba(63, 51, 43, .38);
  --line: rgba(63, 51, 43, .14);
  --line-strong: rgba(63, 51, 43, .28);
  --accent: #BFA86E;
  --accent-ink: #8C7643;          /* Gold mit genug Kontrast für Text auf Ivory */
  --statement-bg: #745E4D;
  --statement-fg: #FAF8F5;
  --statement-soft: rgba(250, 248, 245, .74);
  --btn-bg: #3F332B;
  --btn-fg: #FAF8F5;
  --chip-on-bg: #3F332B;
  --chip-on-fg: #FAF8F5;
  --grain-opacity: .05;
  --shadow: 0 30px 80px -40px rgba(63, 51, 43, .35);

  --font-display: "Kulachat HC", "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --nav-h: 84px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #2A221D;
  --bg-2: #342A24;
  --surface: #3F332B;
  --fg: #FAF8F5;
  --fg-soft: #CFC2B2;
  --fg-faint: rgba(250, 248, 245, .36);
  --line: rgba(250, 248, 245, .12);
  --line-strong: rgba(250, 248, 245, .26);
  --accent: #BFA86E;
  --accent-ink: #CDB77F;
  --statement-bg: #745E4D;
  --statement-fg: #FAF8F5;
  --statement-soft: rgba(250, 248, 245, .78);
  --btn-bg: #BFA86E;
  --btn-fg: #2A221D;
  --chip-on-bg: #BFA86E;
  --chip-on-fg: #2A221D;
  --grain-opacity: .07;
  --shadow: 0 30px 80px -40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
em { font-style: italic; }
::selection { background: var(--accent); color: #2A221D; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 300; padding: 10px 16px; background: var(--btn-bg); color: var(--btn-fg); border-radius: 99px; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip-link:focus { transform: none; }

/* Theme-Wechsel: sanfte Übergänge (Fallback ohne View Transitions) */
.theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), fill .6s var(--ease), stroke .6s var(--ease) !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }

/* ---------- Typografie ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.h2 em, .hero__title em, .footer__claim em { color: var(--accent-ink); font-weight: 300; }
.h2--xl { font-size: clamp(2.8rem, 6.4vw, 6.6rem); }
.label {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  color: var(--fg-soft);
}
.label__n { color: var(--accent-ink); font-variant-numeric: tabular-nums; order: -2; }
.label::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .4; order: -1; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; color: var(--fg-soft); }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(191, 168, 110, .6); animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(191, 168, 110, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(191, 168, 110, 0); } }
.mini-title { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--accent-ink); margin-bottom: 12px; }

/* Split-Text (Wörter mit Maske) – großzügiger Innenraum, damit Unterlängen (g, y, p)
   und kursive Überhänge nicht abgeschnitten werden */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .2em; margin: 0 -.08em -.2em; }
.w > .wi { display: inline-block; will-change: transform; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 30px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease);
}
.btn > span, .btn > svg { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  transform: translateY(101%); transition: transform .6s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn__arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn__arrow--up { transform: rotate(-90deg); }
.btn:hover .btn__arrow--up { transform: rotate(-90deg) translateX(4px); }

.btn--solid { background: var(--btn-bg); color: var(--btn-fg); }
.btn--solid::before { background: var(--accent); }
.btn--solid:hover { color: #2A221D; }
.btn--ghost { color: var(--fg); }
.btn--ghost::before { background: var(--bg-2); }
.btn--ghost span { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 2px; }
.btn--ghost:hover span { background-size: 100% 1px; }
.btn--line { border: 1px solid var(--line-strong); color: var(--fg); }
.btn--line::before { background: var(--fg); }
.btn--line:hover { color: var(--bg); border-color: var(--fg); }
.btn--small { height: 44px; padding: 0 22px; font-size: 13px; }
.btn--large { height: 64px; padding: 0 38px; font-size: 15px; }

/* „Button im Button“: Pfeil sitzt in einem eigenen Kreis */
.btn:has(.btn__icon) { padding-right: 8px; gap: 16px; }
.btn__icon { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, currentColor 12%, transparent); transition: background-color .5s var(--ease), color .5s var(--ease), transform .6s var(--ease); }
.btn--large .btn__icon { width: 48px; height: 48px; }
.btn--solid .btn__icon { background: var(--accent); color: #2A221D; }
.btn--solid:hover .btn__icon { background: var(--btn-bg); color: var(--btn-fg); }
.btn--line:hover .btn__icon { background: color-mix(in srgb, var(--bg) 18%, transparent); }
.is-sending .btn__icon { opacity: 0; }

/* ---------- Preloader ---------- */
.preloader { display: none; }
.js .preloader {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: var(--bg);
}
.preloader__logo { position: relative; width: min(46vw, 280px); aspect-ratio: 1; }
.preloader__logo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.preloader__ring {
  --p: 0deg;
  -webkit-mask-image: conic-gradient(from 200deg, #000 var(--p), transparent calc(var(--p) + .5deg));
  mask-image: conic-gradient(from 200deg, #000 var(--p), transparent calc(var(--p) + .5deg));
}
.preloader__inner { opacity: 0; transform: translateY(10px); }
.preloader__claim { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--fg-soft); opacity: 0; }
.preloader__count { position: absolute; right: var(--gutter); bottom: calc(var(--gutter) * .7); font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 8vw, 6rem); line-height: 1; color: var(--fg); opacity: .14; font-variant-numeric: tabular-nums; }

/* ---------- Grain (statisch – günstig zu rendern) & Fortschritt ---------- */
.grain {
  position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Navigation ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); transition: transform .7s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease), height .5s var(--ease); border-bottom: 1px solid transparent; }
/* Beim Scrollen wird die Navigation zur schwebenden „Insel“ */
.nav__inner { transition: max-width .7s var(--ease), height .7s var(--ease), margin-top .7s var(--ease), padding .7s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .7s var(--ease); border: 1px solid transparent; border-radius: 99px; }
.nav.is-scrolled { --nav-h: 76px; }
.nav.is-scrolled .nav__inner {
  max-width: min(1240px, calc(100% - 24px)); height: 60px; margin-top: 10px; padding: 0 8px 0 22px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: var(--line); box-shadow: 0 18px 50px -30px rgba(42, 34, 29, .45);
}
.nav.is-scrolled .btn--small, .nav.is-scrolled .theme-toggle, .nav.is-scrolled .burger, .nav.is-scrolled .lang { height: 44px; }

/* Sprachschalter DE / EN */
.lang { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; height: 44px; padding: 4px; border-radius: 99px; border: 1px solid var(--line-strong); }
.lang button { position: relative; z-index: 1; width: 38px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--fg-soft); transition: color .4s var(--ease); }
.lang button:hover { color: var(--fg); }
.lang__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 38px; border-radius: 99px; background: var(--fg); transition: transform .6s var(--ease), background-color .5s; }
:root[lang="de"] .lang [data-lang="de"], :root[lang="en"] .lang [data-lang="en"] { color: var(--bg); }
:root[lang="en"] .lang__pill, :root[data-lang-next="en"] .lang__pill { transform: translateX(38px); }
:root[data-lang-next="de"] .lang__pill { transform: none; }
:root[data-lang-next] .lang button[data-lang] { color: var(--fg-soft); }
:root[data-lang-next="de"] .lang button[data-lang="de"], :root[data-lang-next="en"] .lang button[data-lang="en"] { color: var(--bg); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav__mark { height: 40px; width: auto; aspect-ratio: 430 / 502; transition: transform .8s var(--ease); }
.nav__brand:hover .nav__mark { transform: rotate(-8deg) scale(1.05); }
.nav__word { height: 19px; width: auto; aspect-ratio: 1182 / 320; }
.nav__links { display: flex; gap: clamp(18px, 2.4vw, 38px); }
.nav__links a { position: relative; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--fg-soft); transition: color .3s; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover, .nav__links a.is-active { color: var(--fg); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 12px; }

.theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--fg); transition: border-color .4s, background-color .4s, transform .6s var(--ease); }
.theme-toggle:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.theme-toggle svg { width: 20px; height: 20px; overflow: visible; }
.theme-toggle__core { fill: currentColor; transition: r .6s var(--ease); transform-origin: center; }
.theme-toggle__cut { transition: cx .6s var(--ease), cy .6s var(--ease); }
.theme-toggle__rays { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transform-origin: 12px 12px; transition: transform .6s var(--ease), opacity .4s; }
[data-theme="dark"] .theme-toggle__core { r: 8px; }
[data-theme="dark"] .theme-toggle__cut { cx: 16px; cy: 7px; }
[data-theme="dark"] .theme-toggle__rays { transform: rotate(-60deg) scale(.4); opacity: 0; }
[data-theme="dark"] .theme-toggle { color: var(--accent); }

.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--fg); transition: transform .5s var(--ease), top .5s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.menu-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; gap: 40px;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .8s var(--ease-in-out), visibility 0s .8s;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease-in-out), visibility 0s; }
.menu__inner { display: flex; flex-direction: column; gap: 6px; }
.menu__inner a { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 11vw, 4rem); line-height: 1.12; display: flex; align-items: baseline; gap: 16px; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .8s var(--ease), color .3s; }
.menu__inner a small { font-family: var(--font-body); font-size: 11px; letter-spacing: .2em; color: var(--accent-ink); }
.menu__inner a:hover { color: var(--accent-ink); }
.menu-open .menu__inner a { opacity: 1; transform: none; }
.menu-open .menu__inner a:nth-child(1) { transition-delay: .25s; } .menu-open .menu__inner a:nth-child(2) { transition-delay: .3s; }
.menu-open .menu__inner a:nth-child(3) { transition-delay: .35s; } .menu-open .menu__inner a:nth-child(4) { transition-delay: .4s; }
.menu-open .menu__inner a:nth-child(5) { transition-delay: .45s; } .menu-open .menu__inner a:nth-child(6) { transition-delay: .5s; }
.menu__claim { font-family: var(--font-display); font-style: italic; color: var(--fg-soft); font-size: 1.2rem; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 40px) 0 clamp(48px, 9vh, 96px); overflow: hidden; }
.hero__ring { position: absolute; top: 50%; right: max(-14vw, -220px); width: min(92vh, 74vw, 1000px); aspect-ratio: 1; transform: translateY(-52%); pointer-events: none; will-change: transform; }
.hero__ring-scroll, .hero__ring-mouse { width: 100%; height: 100%; will-change: transform; }
.hero__ring-svg { width: 100%; height: 100%; transform-origin: 49.5% 50.15%; animation: spin 140s linear infinite; will-change: transform; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__inner { position: relative; z-index: 2; }
/* Goldener Baum hinter dem Pinselring – der Ring wird zu seinem Heiligenschein (tree.js) */
.tree { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 3s var(--ease); }
.is-booted .tree { opacity: 1; transition-delay: .5s; }
.tree canvas { position: absolute; inset: -6% 0 0 0; width: 100%; height: 106%; will-change: transform; }
.hero__ring { z-index: 1; }
:root[data-theme="dark"] .hero__ring-svg { filter: drop-shadow(0 0 22px rgba(233, 204, 134, .35)); }

/* Römische Säulen links & rechts – nur im Abschnitt „Ansatz“ (tree.js) */
#ansatz {
  --stone-1: #F1EBDF; --stone-2: #DDD1BC; --stone-3: #BFAF93; --stone-line: rgba(140, 118, 67, .55);
  --tree-gold: 184, 150, 82; --glow-gold: 233, 204, 134;
  --col-w: clamp(38px, 3.4vw, 84px);
  --col-x: clamp(6px, .8vw, 36px);                                        /* Abstand der Säulen zum Fensterrand */
  --lift: 0px;                                                            /* Höhe des Trenners darüber (tree.js) – Säulen & Licht beginnen direkt unter dem Video */
}
:root[data-theme="dark"] #ansatz { --stone-1: #4A3D33; --stone-2: #3A2F28; --stone-3: #2A221D; --stone-line: rgba(205, 183, 127, .5); --tree-gold: 233, 204, 134; }
.colonnade { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.column {
  --p: 0;
  position: absolute; top: calc(18px - var(--lift)); bottom: clamp(28px, 6vh, 72px); left: var(--col-x); width: var(--col-w);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1.6s var(--ease), transform 1.8s var(--ease);
}
.column--r { left: auto; right: var(--col-x); }
.colonnade.is-in .column { opacity: .92; transform: none; }
.colonnade.is-in .column--r { transition-delay: .15s; }
:root[data-theme="dark"] .colonnade.is-in .column { opacity: .85; }
.column svg { display: block; width: 100%; height: auto; overflow: visible; flex-shrink: 0; }
.column .st-fill { fill: url(#stoneGrad); }
.column .st-line { fill: none; stroke: var(--stone-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.column .st-gold { fill: none; stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.column .st-shade { fill: rgba(63, 51, 43, .08); }
:root[data-theme="dark"] .column .st-shade { fill: rgba(0, 0, 0, .25); }
/* Schaft: kannelierter Zylinder aus Verläufen, Licht steigt mit dem Scrollen */
.column__shaft {
  position: relative; flex: 1; width: 74%; margin: -1px 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - 1.5px), var(--stone-line) calc(100% / 9 - 1.5px) calc(100% / 9 - .5px), transparent calc(100% / 9 - .5px) calc(100% / 9)),
    linear-gradient(90deg, var(--stone-3) 0%, var(--stone-1) 30%, var(--stone-1) 42%, var(--stone-2) 72%, var(--stone-3) 100%);
  border-left: 1px solid var(--stone-line); border-right: 1px solid var(--stone-line);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);   /* leichte Entasis */
  overflow: hidden;
}
.column__shaft::before { /* Verwitterung */
  content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 320px; background-position: 0 var(--stone-y, 0px);
}
:root[data-theme="dark"] .column__shaft::before { mix-blend-mode: soft-light; opacity: .7; }
.column__shaft::after { /* goldenes Licht in den Kanneluren – wächst mit dem Scrollen durch den Abschnitt */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  transform-origin: 50% 100%; transform: scaleY(var(--p));
  background: linear-gradient(0deg, rgba(var(--glow-gold), .95), rgba(var(--glow-gold), .55) 70%, rgba(var(--glow-gold), 0));
  -webkit-mask: repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - 2.5px), #000 calc(100% / 9 - 2px) calc(100% / 9), transparent calc(100% / 9));
          mask: repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - 2.5px), #000 calc(100% / 9 - 2px) calc(100% / 9), transparent calc(100% / 9));
}
.column__ember { /* glimmendes Licht auf dem Kapitell */
  position: absolute; top: -14px; left: 50%; width: 120%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--glow-gold), .5) 0%, rgba(var(--glow-gold), .14) 32%, transparent 66%);
  animation: ember 6s var(--ease-in-out) infinite alternate;
}
.column--r .column__ember { animation-delay: -3s; }
@keyframes ember { from { opacity: .35; transform: translateX(-50%) scale(.9); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } }
@media (max-width: 1179px) { .colonnade { display: none; } }
@media (prefers-reduced-motion: reduce) { .column__ember { animation: none; } }

/* Lichtstrahlen im „Ansatz“: starten direkt unter dem Video in der linken oberen Ecke,
   blinzeln an der linken Säule vorbei und fächern schräg nach unten in den Abschnitt. */
#ansatz .ambient--pillar { top: calc(-1 * var(--lift)); }   /* ID-Selektor: schlägt das spätere „.ambient { inset: 0 }“ */
#ansatz .ambient--pillar .ambient__beams {   /* breiter Fächer: von fast waagerecht bis fast senkrecht, wie Sonne aus der Ecke */
  background: conic-gradient(from 96deg at 50% 50%,
    transparent 0deg, rgba(var(--glow), calc(var(--glow-a) * .8)) 5deg, transparent 10deg,
    transparent 16deg, rgba(var(--glow), var(--glow-a)) 23deg, transparent 31deg,
    transparent 36deg, rgba(var(--glow), calc(var(--glow-a) * .7)) 42deg, transparent 48deg,
    transparent 53deg, rgba(var(--glow), calc(var(--glow-a) * .95)) 60deg, transparent 68deg,
    transparent 72deg, rgba(var(--glow), calc(var(--glow-a) * .55)) 77deg, transparent 82deg,
    transparent 360deg);
}
:root[data-theme="dark"] #ansatz .ambient--pillar { --glow-a: .16; }
/* Sigillen als Abschnittstrenner: Linien und Zeichen ziehen sich beim Hineinscrollen (tree.js) */
.sigil { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 22px; padding: clamp(24px, 6vh, 64px) var(--gutter) 0; color: var(--accent); }
.sigil::before, .sigil::after { content: ""; flex: 1; max-width: 360px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); opacity: .5; transform: scaleX(0); transition: transform 1.6s var(--ease) .3s; }
.sigil::before { transform-origin: 100% 50%; }
.sigil::after { background: linear-gradient(-90deg, transparent, currentColor); transform-origin: 0 50%; }
.sigil svg { width: 64px; height: 88px; overflow: visible; flex-shrink: 0; }
.sigil svg * { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease); }
.sigil svg .s2 { transition-delay: .25s; } .sigil svg .s3 { transition-delay: .5s; } .sigil svg .s4 { transition-delay: .75s; }
.sigil svg .dot { fill: currentColor; stroke: none; opacity: 0; transition: opacity 1s var(--ease) 1.4s; }
.sigil.is-in::before, .sigil.is-in::after { transform: scaleX(1); }
.sigil.is-in svg * { stroke-dashoffset: 0; }
.sigil.is-in svg .dot { opacity: 1; }
.hero__eyebrow { margin-bottom: clamp(24px, 4vh, 40px); }
.hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.7rem, 9.2vw, 10.4rem); line-height: .96; letter-spacing: -.025em;
}
/* Maske je Zeile: unten genug Platz für Unterlängen (das „g“ in Erinnerung), rechts für kursive Überhänge */
.hero__title .line { display: block; overflow: hidden; padding: 0 .12em .22em 0; margin: 0 -.12em -.22em 0; }
.hero__title .line > span { display: inline-block; will-change: transform; }
.hero__title .line:nth-child(2) { padding-left: clamp(0px, 7vw, 120px); }
.hero__foot { margin-top: clamp(32px, 6vh, 64px); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.hero__lead { max-width: 440px; font-size: clamp(15px, 1.15vw, 17px); color: var(--fg-soft); }
.hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-soft); z-index: 2; }
.hero__scroll > * { transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.hero__scroll.is-gone > * { opacity: 0; transform: translateY(10px); }   /* blendet sanft aus, sobald gescrollt wird */
.hero__scroll.is-gone i { transform: translateY(10px) scaleY(.4); transform-origin: top; }
.hero__scroll i { width: 1px; height: 46px; background: var(--line-strong); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--accent); animation: drip 2.2s var(--ease-in-out) infinite; }
@keyframes drip { 0% { top: -50%; } 100% { top: 100%; } }

/* ---------- Marquee ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(18px, 3vw, 30px) 0; overflow: hidden; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); padding-right: clamp(22px, 3vw, 48px); flex-shrink: 0; }
.marquee span { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1; white-space: nowrap; }
.marquee span em { color: var(--accent-ink); }
.marquee i { font-style: normal; color: var(--accent); font-size: clamp(.9rem, 1.4vw, 1.3rem); }
.no-motion-marquee .marquee__track { animation: marquee 40s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(96px, 16vh, 200px) 0; }

/* Manifest */
.manifesto__grid { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 40px; }
.manifesto__grid > .label { align-self: start; margin-top: 18px; }
.manifesto__body .h2 { max-width: 14ch; }
.manifesto__text {
  margin-top: clamp(36px, 6vh, 64px);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.7rem, 3.1vw, 3.1rem); line-height: 1.2; letter-spacing: -.01em; max-width: 30ch;
}
.manifesto__text .mw { opacity: 1; }
.motion .manifesto__text .mw { opacity: .16; }
.manifesto__cols { margin-top: clamp(56px, 9vh, 96px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); max-width: 860px; padding-top: 32px; border-top: 1px solid var(--line); }
.manifesto__cols p { color: var(--fg-soft); }

/* ---------- Framework ---------- */
.framework { position: relative; padding: clamp(80px, 12vh, 140px) 0; background: var(--bg-2); transition: background-color .6s var(--ease); }
.framework__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vh, 72px); }
.framework__head .h2 { margin-top: 18px; }
.fw-progress { min-width: min(100%, 420px); }
.fw-progress ol { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 14px; }
.fw-progress li { transition: color .4s; }
.fw-progress li.is-active { color: var(--fg); }
.fw-progress__bar { height: 1px; background: var(--line-strong); position: relative; }
.fw-progress__bar span { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(.25); }
.framework__viewport { padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
.fw-track { display: grid; grid-template-columns: 1fr; gap: 20px; }
.fw-card {
  position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 28px;
  padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; min-height: 440px;
  transition: background-color .6s var(--ease), border-color .5s;
}
.fw-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.fw-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; padding-bottom: 40px; }
.fw-card__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(4rem, 7vw, 6.6rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--accent); }
.fw-card__art { width: clamp(84px, 8vw, 120px); height: auto; overflow: visible; }
.fw-card__art * { fill: none; stroke: var(--accent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.fw-card__art .fill { fill: var(--accent); stroke: none; }
.motion .fw-card__art *:not(.fill) { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Linien-Symbole: nach dem Einzeichnen ein leises Eigenleben */
.fw-card__art .a-spin, .fw-card__art .a-pulse, .fw-card__art .a-dot, .fw-card__art .a-scan,
.fw-card__art .a-f1, .fw-card__art .a-f3, .fw-card__art .a-play, .fw-card__art .a-nudge { transform-box: fill-box; transform-origin: center; }
.fw-card.is-live .a-spin  { animation: art-spin 26s linear infinite; }
.fw-card.is-live .a-pulse { animation: art-pulse 4.5s ease-in-out infinite; }
.fw-card.is-live .a-dot   { animation: art-pulse 2.2s ease-in-out infinite; }
.fw-card.is-live .a-fp    { animation: fp-glow 3.6s ease-in-out infinite; }
.fw-card.is-live .a-fp:nth-of-type(2) { animation-delay: .2s; }
.fw-card.is-live .a-fp:nth-of-type(3) { animation-delay: .4s; }
.fw-card.is-live .a-fp:nth-of-type(4) { animation-delay: .6s; }
.fw-card.is-live .a-fp:nth-of-type(5) { animation-delay: .8s; }
.fw-card.is-live .a-scan  { animation: fp-scan 3.6s ease-in-out infinite; }
.fw-card.is-live .a-f1    { animation: art-f1 5.5s ease-in-out infinite; }
.fw-card.is-live .a-f3    { animation: art-f3 5.5s ease-in-out infinite; }
.fw-card.is-live .a-play  { animation: art-pulse 2.8s ease-in-out infinite; }
.fw-card.is-live .a-nudge { animation: art-nudge 2.75s ease-in-out infinite; }
@keyframes art-spin  { to { transform: rotate(360deg); } }
@keyframes art-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes fp-glow   { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes fp-scan   { 0% { transform: translateY(-26px); opacity: 0; } 15%, 85% { opacity: 1; } 50% { transform: translateY(22px); } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes art-f1    { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, -4px); } }
@keyframes art-f3    { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, 4px); } }
@keyframes art-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px); } }
.fw-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.01em; }
.fw-card__sub { margin-top: 12px; font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.5vw, 1.4rem); color: var(--accent-ink); line-height: 1.3; }
.fw-card__text { margin-top: 18px; color: var(--fg-soft); max-width: 42ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tags li { font-size: 12px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--fg-soft); }
.fw-card--end { background: transparent; border-style: dashed; justify-content: center; gap: 10px; }
.fw-card--end .btn { align-self: flex-start; margin-top: 28px; }
.fw-card__quote { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.12; }
.fw-card__quote span { color: var(--accent); }
.fw-card__quote em { color: var(--accent-ink); }

@media (min-width: 700px) and (max-width: 979px) {
  .fw-track { grid-template-columns: 1fr 1fr; }
}
/* Horizontal-Scroll nur auf Desktop & mit Bewegung */
@media (min-width: 980px) {
  .motion .framework { height: 100vh; padding: 0; overflow: hidden; }
  .motion .framework__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); }
  .motion .framework__head { margin-bottom: clamp(28px, 5vh, 56px); }
  .motion .framework__viewport { max-width: none; padding: 0; }
  .motion .fw-track { display: flex; gap: 24px; width: max-content; padding: 0 var(--gutter); padding-left: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); will-change: transform; }
  .motion .fw-card { width: clamp(400px, 34vw, 520px); min-height: min(58vh, 560px); flex-shrink: 0; }
  .motion .fw-card--end { width: clamp(380px, 30vw, 460px); }
}
@media (min-width: 980px) and (max-height: 860px) {
  .motion .framework__head { margin-bottom: 24px; }
  .motion .framework__head .h2 { font-size: clamp(2.4rem, 4.2vw, 3.8rem); margin-top: 12px; }
  .motion .fw-card { min-height: 0; padding: 26px 30px; }
  .motion .fw-card__top { padding-bottom: 16px; }
  .motion .fw-card__num { font-size: 3.6rem; }
  .motion .fw-card__art { width: 68px; }
  .motion .fw-card__title { font-size: 2.3rem; }
  .motion .fw-card__sub { margin-top: 8px; font-size: 1.1rem; }
  .motion .fw-card__text { margin-top: 10px; font-size: 14.5px; line-height: 1.55; }
  .motion .tags { margin-top: 16px; gap: 6px; }
  .motion .tags li { padding: 5px 12px; font-size: 11.5px; }
  .motion .fw-card--end .btn { margin-top: 16px; }
}

/* ---------- Leistungen ---------- */
.services__head { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: clamp(48px, 8vh, 88px); }
.services__head .h2 { max-width: 16ch; }
.services__intro { max-width: 520px; color: var(--fg-soft); font-size: 17px; margin-top: 8px; }
.svc-list { border-top: 1px solid var(--line); }
.svc { position: relative; isolation: isolate; border-bottom: 1px solid var(--line); }
.svc::before { content: ""; position: absolute; inset: 0; background: var(--bg-2); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease); z-index: -1; }
.svc:hover::before, .svc.is-open::before { transform: scaleY(1); }
.svc__head {
  width: 100%; display: grid; grid-template-columns: 70px 1fr auto 44px; align-items: center; gap: 24px;
  padding: clamp(24px, 3.4vw, 40px) clamp(8px, 1.5vw, 24px); text-align: left;
}
.svc__num { font-size: 12px; letter-spacing: .2em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.svc__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 3.5vw, 3.3rem); line-height: 1.05; letter-spacing: -.01em; transition: transform .7s var(--ease), color .4s; }
.svc:hover .svc__title, .svc.is-open .svc__title { transform: translateX(14px); }
.svc.is-open .svc__title em, .svc:hover .svc__title { color: var(--fg); }
.svc__tags { font-size: 13px; color: var(--fg-soft); text-align: right; }
.svc__icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; transition: background-color .4s, border-color .4s, transform .6s var(--ease); }
.svc__icon::before, .svc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--fg); transform: translate(-50%, -50%); transition: transform .6s var(--ease), background-color .4s; }
.svc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc:hover .svc__icon { border-color: var(--accent); }
.svc.is-open .svc__icon { background: var(--accent); border-color: var(--accent); transform: rotate(180deg); }
.svc.is-open .svc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.svc.is-open .svc__icon::before, .svc.is-open .svc__icon::after { background: #2A221D; }
.svc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.svc__body > div { overflow: hidden; }
.svc__body p { padding: 0 clamp(8px, 1.5vw, 24px) clamp(28px, 3vw, 40px) calc(70px + 24px + clamp(8px, 1.5vw, 24px)); max-width: 820px; color: var(--fg-soft); font-size: 17px; opacity: 0; transform: translateY(-8px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.svc.is-open .svc__body { grid-template-rows: 1fr; }
.svc.is-open .svc__body p { opacity: 1; transform: none; transition-delay: .12s; }

/* ---------- Netzwerk (Earth Statement) ---------- */
.network { position: relative; overflow-x: clip; overflow-y: visible; isolation: isolate; }   /* vertikal darf der Verlauf in die Nachbarabschnitte auslaufen */
/* Die Fläche wird per Transform skaliert (GPU) – kein Clip-Path, der jeden Frame neu gezeichnet werden muss */
.network__bg {
  /* Volle Breite, keine Maske: Seitenhintergrund und Earth gehen über eine weich
     geschwungene Kurve mit vielen Stützpunkten ineinander über – kein Banding, keine Kanten. */
  position: absolute; left: 0; right: 0; top: -160px; bottom: -160px; z-index: -1;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 100%, transparent) 0px, color-mix(in srgb, var(--bg) 98%, transparent) 28px, color-mix(in srgb, var(--bg) 95%, transparent) 56px, color-mix(in srgb, var(--bg) 90%, transparent) 84px, color-mix(in srgb, var(--bg) 83%, transparent) 112px, color-mix(in srgb, var(--bg) 74%, transparent) 140px, color-mix(in srgb, var(--bg) 64%, transparent) 168px, color-mix(in srgb, var(--bg) 53%, transparent) 196px, color-mix(in srgb, var(--bg) 42%, transparent) 224px, color-mix(in srgb, var(--bg) 32%, transparent) 252px, color-mix(in srgb, var(--bg) 23%, transparent) 280px, color-mix(in srgb, var(--bg) 15%, transparent) 308px, color-mix(in srgb, var(--bg) 9%, transparent) 336px, color-mix(in srgb, var(--bg) 4%, transparent) 364px, color-mix(in srgb, var(--bg) 2%, transparent) 392px, color-mix(in srgb, var(--bg) 0%, transparent) 420px),
    linear-gradient(to top, color-mix(in srgb, var(--bg) 100%, transparent) 0px, color-mix(in srgb, var(--bg) 98%, transparent) 28px, color-mix(in srgb, var(--bg) 95%, transparent) 56px, color-mix(in srgb, var(--bg) 90%, transparent) 84px, color-mix(in srgb, var(--bg) 83%, transparent) 112px, color-mix(in srgb, var(--bg) 74%, transparent) 140px, color-mix(in srgb, var(--bg) 64%, transparent) 168px, color-mix(in srgb, var(--bg) 53%, transparent) 196px, color-mix(in srgb, var(--bg) 42%, transparent) 224px, color-mix(in srgb, var(--bg) 32%, transparent) 252px, color-mix(in srgb, var(--bg) 23%, transparent) 280px, color-mix(in srgb, var(--bg) 15%, transparent) 308px, color-mix(in srgb, var(--bg) 9%, transparent) 336px, color-mix(in srgb, var(--bg) 4%, transparent) 364px, color-mix(in srgb, var(--bg) 2%, transparent) 392px, color-mix(in srgb, var(--bg) 0%, transparent) 420px),
    radial-gradient(1200px 760px at 16% 30%, rgba(191, 168, 110, .16), rgba(191, 168, 110, .07) 45%, rgba(191, 168, 110, 0) 75%),
    var(--statement-bg);
  transition: background-color .6s var(--ease);
}
.network__panel {
  color: var(--statement-fg);
  padding: clamp(96px, 16vh, 190px) 0; position: relative; overflow: hidden;
}
.network__grid { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.label--light { color: var(--statement-soft); }
.label--light .label__n { color: var(--gold); }
.network .h2 { margin-top: 18px; max-width: 12ch; }
.network .h2 em { color: var(--gold); }
.network__text { margin-top: 32px; max-width: 520px; color: var(--statement-soft); font-size: 17px; }
.facts { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid rgba(250, 248, 245, .18); padding-top: 32px; max-width: 600px; }
.facts dt { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 5vw, 4.6rem); line-height: 1; color: var(--gold); }
.facts dd { margin-top: 8px; font-size: 13px; color: var(--statement-soft); line-height: 1.4; }

/* ---------- Netzwerk: Planetensystem ----------
   Geneigte Umlaufbahnen (3D) mit großem Abstand, eigenen Tempi und goldenen Lichtschweifen.
   Planeten bleiben aufrecht lesbar; hinter der Sonne verschwinden sie, davor ziehen sie vorbei. */
.orbit { position: relative; width: min(100%, 820px); aspect-ratio: 1; margin: 0 0 0 auto; perspective: 1800px; transform-style: preserve-3d; --tilt: 60deg; }
.orbit__system { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt)); }
.orbit__path {
  position: absolute; border-radius: 50%; transform-style: preserve-3d;
  border: 1px solid rgba(191, 168, 110, .3);
  animation: orbit-turn var(--t) linear infinite; animation-play-state: paused;
}
/* goldener Lichtschweif, der mit der Bahn wandert */
.orbit__path::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from var(--trail, 0deg), rgba(230, 205, 140, 0) 0deg, rgba(230, 205, 140, 0) 250deg, rgba(230, 205, 140, .85) 356deg, rgba(230, 205, 140, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.orbit__path--1 { inset: 29%; --t: 30s; --trail: 40deg; }
.orbit__path--2 { inset: 14%; --t: 48s; --trail: 170deg; border-style: dashed; border-color: rgba(191, 168, 110, .26); }
.orbit__path--3 { inset: -3%; --t: 74s; --trail: 300deg; border-color: rgba(250, 248, 245, .16); }
.orbit.is-on .orbit__path, .orbit.is-on .planet__body, .orbit.is-on .orbit__halo, .orbit.is-on .planet__dot::after, .orbit.is-on .planet b { animation-play-state: running; }
@keyframes orbit-turn { to { transform: rotateZ(360deg); } }

.planet {
  position: absolute; left: calc(50% + 50% * cos(var(--a))); top: calc(50% + 50% * sin(var(--a)));
  width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(calc(-1 * var(--a)));
}
.planet__body {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; transform-style: preserve-3d;
  animation: planet-upright var(--t) linear infinite; animation-play-state: paused;
}
@keyframes planet-upright {
  from { transform: rotateZ(var(--a)) rotateX(calc(-1 * var(--tilt))) translate(calc(var(--s) / -2), -50%); }
  to   { transform: rotateZ(calc(var(--a) - 360deg)) rotateX(calc(-1 * var(--tilt))) translate(calc(var(--s) / -2), -50%); }
}
.planet__dot {
  position: relative; width: var(--s); height: var(--s); border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 34% 30%, #FBF0CF, #D4BC7E 38%, #9C7F45 72%, #5C4626 100%);
  box-shadow: 0 0 calc(var(--s) * 1.6) rgba(214, 188, 126, .5), inset -2px -3px 5px rgba(42, 34, 29, .45);
}
/* kleiner Mond, der seinen Planeten umkreist */
.planet__dot.has-moon::after {
  content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; left: 50%; top: 50%; margin: -2px 0 0 -2px;
  background: #F3E3B8; box-shadow: 0 0 6px rgba(243, 227, 184, .8);
  animation: moon 6s linear infinite; animation-play-state: paused;
}
@keyframes moon { from { transform: rotate(0deg) translateX(calc(var(--s) * .95 + 6px)) scale(1); } 50% { transform: rotate(180deg) translateX(calc(var(--s) * .95 + 6px)) scale(.7); } to { transform: rotate(360deg) translateX(calc(var(--s) * .95 + 6px)) scale(1); } }
/* Ring wie bei Saturn */
.planet__dot.has-ring::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 2.3); height: calc(var(--s) * .7);
  translate: -50% -50%; rotate: -18deg; border-radius: 50%; border: 1.5px solid rgba(230, 205, 140, .75);
}
.planet b {
  font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--statement-fg);
  padding: 6px 12px; border-radius: 99px; background: #3F332B; border: 1px solid rgba(191, 168, 110, .3);
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .6);
  /* Beschriftung erscheint nur, wenn der Planet nach vorn kommt – dort liegen die Bahnen weit
     genug auseinander, dass sich nichts überlappt. Phase je Planet über --ad (Startwinkel). */
  opacity: 0; animation: label-front var(--t) linear var(--ad) infinite; animation-play-state: paused;
}
@keyframes label-front {
  0%, 6% { opacity: 0; transform: translateX(-6px); }
  11%, 39% { opacity: 1; transform: none; }
  44%, 100% { opacity: 0; transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) { .planet b { animation: none !important; opacity: 1; } }

/* Sonne: Korona und langsam drehender Strahlenkranz */
.orbit__sun { position: absolute; inset: 0; transform: translateZ(0); transform-style: preserve-3d; pointer-events: none; }
.orbit__corona { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 188, 126, .26), rgba(214, 188, 126, .08) 55%, rgba(214, 188, 126, 0)); }
.orbit__halo {
  position: absolute; inset: 31.5%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(214, 188, 126, .55) 0deg 1deg, transparent 1deg 7.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 96%, transparent 98%);
  mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 96%, transparent 98%);
  opacity: .55; animation: spin 90s linear infinite; animation-play-state: paused;
}
.orbit__mark { position: absolute; left: 50%; top: 50%; width: 15%; height: auto; aspect-ratio: 430 / 502; transform: translate(-50%, -50%); }

/* funkelnde Sterne rund um das System */
.orbit__stars { position: absolute; inset: -6%; pointer-events: none; }
.orbit__stars i {
  position: absolute; left: var(--x); top: var(--y); width: var(--z); height: var(--z); border-radius: 50%;
  background: #F3E3B8; opacity: .15; animation: twinkle var(--d) ease-in-out var(--delay) infinite alternate; animation-play-state: paused;
}
.orbit.is-on .orbit__stars i { animation-play-state: running; }
@keyframes twinkle { to { opacity: .85; transform: scale(1.4); } }

@media (max-width: 980px) { .orbit { width: min(100%, 560px); margin: 24px auto 0; } }
.orbit__ring--3 { position: absolute; border-radius: 50%; border: 1px solid; inset: 37%; background: #3F332B; border-color: rgba(191, 168, 110, .32); box-shadow: inset 0 0 40px rgba(0, 0, 0, .28), 0 0 0 0 rgba(191, 168, 110, 0); }
.orbit.is-on .orbit__ring--3 { animation: core-glow 2.6s ease-in-out infinite; }
.orbit__beat { position: absolute; inset: 37%; border-radius: 50%; border: 1px solid rgba(191, 168, 110, .6); opacity: 0; pointer-events: none; }
.orbit.is-on .orbit__beat { animation: beat-ring 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.orbit.is-on .orbit__beat--2 { animation-delay: .42s; border-color: rgba(191, 168, 110, .35); }
.orbit.is-on .orbit__mark { animation: heartbeat 2.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 40%, 100% { scale: 1; } 8% { scale: 1.09; } 16% { scale: 1; } 25% { scale: 1.055; } }
@keyframes beat-ring { 0% { transform: scale(1); opacity: 0; } 6% { opacity: .75; } 70%, 100% { transform: scale(1.85); opacity: 0; } }
@keyframes core-glow { 0%, 40%, 100% { box-shadow: inset 0 0 40px rgba(0, 0, 0, .28), 0 0 0 0 rgba(191, 168, 110, 0); } 9% { box-shadow: inset 0 0 40px rgba(0, 0, 0, .28), 0 0 46px 2px rgba(191, 168, 110, .28); } }

/* ---------- Prozess ---------- */
.process__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 8vw, 140px); align-items: start; }
.process__aside { position: sticky; top: calc(var(--nav-h) + 48px); }
.process__aside .h2 { margin-top: 18px; max-width: 13ch; }
.process__intro { margin-top: 28px; color: var(--fg-soft); max-width: 380px; }
.steps { position: relative; padding-left: 4px; }
.steps__line { position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.steps__line span { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(1); }
.motion .steps__line span { transform: scaleY(0); }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: clamp(20px, 3vw, 40px); padding: 0 0 clamp(48px, 9vh, 96px); }
.step:last-child { padding-bottom: 0; }
.step__num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; letter-spacing: .08em; background: var(--bg); border: 1px solid var(--line-strong); color: var(--fg-soft); transition: background-color .5s var(--ease), color .5s, border-color .5s; }
.step.is-active .step__num { background: var(--accent); border-color: var(--accent); color: #2A221D; }
.step__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.05; margin: 4px 0 12px; }
.step p { color: var(--fg-soft); max-width: 44ch; }
.motion .step > div { opacity: .35; transition: opacity .6s var(--ease); }
.motion .step.is-active > div { opacity: 1; }

/* ---------- Voice ---------- */
.voice { padding: clamp(80px, 12vh, 140px) 0 clamp(96px, 16vh, 200px); overflow: hidden; border-top: 1px solid var(--line); }
.voice__rows { display: flex; flex-direction: column; gap: clamp(4px, 1vw, 12px); margin-bottom: clamp(96px, 16vh, 180px); }
.voice__row { display: flex; gap: clamp(28px, 4vw, 64px); white-space: nowrap; will-change: transform; font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 9vw, 9.5rem); line-height: 1.04; letter-spacing: -.02em; }
.voice__row[data-dir="1"] { transform: translateX(-30%); }
.voice__row { align-items: center; }
.voice__row span { transition: color .6s var(--ease); }
.voice__row .o {
  color: transparent; -webkit-text-stroke: 1px var(--fg-faint);
  background: linear-gradient(90deg, var(--accent) calc(var(--fill, 0%) - 10%), rgba(191, 168, 110, 0) var(--fill, 0%));
  -webkit-background-clip: text; background-clip: text;
}
.voice__row span:not(.o):hover { color: var(--accent-ink); }
.vsep { font-style: normal; font-size: .32em; color: var(--accent); flex-shrink: 0; display: inline-block; animation: spin 18s linear infinite; opacity: .85; }
.voice__row:nth-child(2) .vsep { animation-direction: reverse; }
.voice__row em { color: var(--accent-ink); }
.traits__head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(40px, 7vh, 72px); }
.traits__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.trait { position: relative; padding: clamp(28px, 3.4vw, 48px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.trait { outline: none; }
.trait__img {
  position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; z-index: -2;
  opacity: 0; filter: var(--grade) brightness(.85);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.14);
  transition: opacity .8s var(--ease), transform 1.2s var(--ease);
}
.trait__img[src*="confident"] { object-position: 50% 33%; }   /* Position rechts wie gehabt, Ausschnitt etwas höher: Gesicht gut sichtbar */
.trait::before { /* Verlauf in Earth-Tönen, damit der Text auf dem Bild lesbar bleibt */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .8s var(--ease);
  background: linear-gradient(to top, rgba(31, 25, 21, .88), rgba(31, 25, 21, .45) 55%, rgba(31, 25, 21, .25));
}
.trait { isolation: isolate; transition: color .5s var(--ease); }
.trait h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1; transition: transform .7s var(--ease); }
.trait p { margin-top: 14px; color: var(--fg-soft); transition: color .5s var(--ease); }
.trait:hover, .trait:focus-visible { color: var(--statement-fg); }
.trait:hover::before, .trait:focus-visible::before { opacity: 1; }
.trait:hover .trait__img, .trait:focus-visible .trait__img { opacity: 1; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.04); }
.trait:hover p, .trait:focus-visible p { color: var(--statement-soft); }
.trait:hover h3, .trait:focus-visible h3 { transform: translateX(8px); }
.trait:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---------- Kontakt ---------- */
.contact { border-top: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
.contact__aside .h2 { margin-top: 18px; }
.contact__text { margin-top: 28px; color: var(--fg-soft); max-width: 440px; font-size: 17px; }
.contact__direct { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.contact__small { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: 10px; }
.contact__mail { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 300; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 1px no-repeat; transition: background-size .6s var(--ease), color .3s; }
.contact__mail:hover { background-size: 100% 1px; color: var(--accent-ink); }

.form { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 32px; padding: clamp(28px, 4vw, 56px); box-shadow: var(--shadow); transition: background-color .6s var(--ease), border-color .6s; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.field { position: relative; margin-bottom: 28px; }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--fg);
  font: inherit; font-size: 17px; padding: 26px 0 10px; border-radius: 0; outline: none; resize: vertical; transition: border-color .4s;
}
.field textarea { min-height: 120px; line-height: 1.5; }
/* Schreibfeder: schreibt einmal im Nachrichtenfeld, legt sich dann rechts daneben */
.quill-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.quill-ink text { font-family: "Pinyon Script", "Cormorant Garamond", serif; font-size: 34px; fill: var(--earth); fill-opacity: .42; transition: opacity .8s var(--ease); }
:root[data-theme="dark"] .quill-ink text { fill: #D9CBB0; fill-opacity: .38; }
.quill-ink.is-hidden text { opacity: 0; }
.quill { position: absolute; left: 0; top: 0; width: 22px; height: 100px; pointer-events: none; z-index: 2; opacity: 0; transform-origin: 50% 99%; will-change: transform; filter: drop-shadow(1px 3px 2px rgba(63, 51, 43, .14)); }
.quill.is-placed { opacity: .88; }
:root[data-theme="dark"] .quill { filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, .35)); }
:root[data-theme="dark"] .quill.is-placed { opacity: .72; }
/* Nach dem Absenden zeigt das Formular nur den Dank – Feder und Schriftzug verschwinden */
.quill, .quill-ink { transition: visibility 0s linear 0s; }
.form.is-sent .quill, .form.is-sent .quill-ink { visibility: hidden; opacity: 0 !important; }
.quill__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.field label { position: absolute; left: 0; top: 26px; font-size: 16px; color: var(--fg-soft); pointer-events: none; transform-origin: left top; transition: transform .45s var(--ease), color .3s; }
.field::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.field:not(.field--area)::after { bottom: 0; }
.field--area::after { bottom: 7px; }
.field:focus-within::after { transform: scaleX(1); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-24px) scale(.78); color: var(--accent-ink); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #B5654A; }
.field__error { display: block; min-height: 0; font-size: 12px; color: #B5654A; margin-top: 6px; }
:root[data-theme="dark"] .field__error { color: #E39A7F; }
:root[data-theme="dark"] .field.is-invalid input, :root[data-theme="dark"] .field.is-invalid textarea { border-color: #E39A7F; }
.field__error:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 32px; }
.chips legend { width: 100%; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: 16px; padding: 0; float: left; }
.chips legend + * { clear: left; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 14px; color: var(--fg-soft); transition: background-color .4s var(--ease), color .3s, border-color .3s, transform .4s var(--ease); user-select: none; cursor: pointer; }
.chips label:hover span { border-color: var(--accent); color: var(--fg); }
.chips input:checked + span { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-fg); }
.chips input:checked + span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
:root[data-theme="dark"] .chips input:checked + span::before { background: #2A221D; }
.chips input:focus-visible + span { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.chips label:active span { transform: scale(.96); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; font-size: 13px; color: var(--fg-soft); line-height: 1.55; margin-top: 4px; cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.consent__box { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background-color .3s, border-color .3s; margin-top: 1px; }
.consent__box::after { content: ""; width: 10px; height: 5px; border-left: 1.5px solid #2A221D; border-bottom: 1.5px solid #2A221D; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .35s var(--ease); }
.consent input:checked + .consent__box { background: var(--accent); border-color: var(--accent); }
.consent input:checked + .consent__box::after { transform: rotate(-45deg) scale(1); }
.consent input:focus-visible + .consent__box { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.consent a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.consent__error { margin-left: 36px; }
.form__submit { margin-top: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form__status { font-size: 14px; color: var(--fg-soft); }
.form__status.is-error { color: #B5654A; }
:root[data-theme="dark"] .form__status.is-error { color: #E39A7F; }
.btn__spinner { position: absolute; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; opacity: 0; animation: spin .8s linear infinite; }
.is-sending .btn__label, .is-sending .btn__arrow { opacity: 0; }
.is-sending .btn__spinner { opacity: 1; }

.form__success {
  position: absolute; inset: 0; border-radius: inherit; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 40px;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s;
}
.form.is-sent .form__success { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
.form__success svg { width: 72px; height: 72px; margin-bottom: 8px; }
.form__success svg * { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.form.is-sent .form__success circle { transition: stroke-dashoffset 1.2s var(--ease) .2s; stroke-dashoffset: 0; }
.form.is-sent .form__success path { transition: stroke-dashoffset .8s var(--ease) .9s; stroke-dashoffset: 0; }
.form__success h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.1; }
.form__success p { color: var(--fg-soft); max-width: 36ch; }
.form__success .btn { margin-top: 12px; }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--statement-bg); color: var(--statement-fg); padding: clamp(80px, 12vh, 140px) 0 32px; overflow-x: clip; overflow-y: visible; }   /* Feder darf von oben hereinschweben */

:root[data-theme="dark"] .footer { background: #1F1915; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-bottom: clamp(48px, 8vh, 80px); border-bottom: 1px solid rgba(250, 248, 245, .16); }
.footer__claim { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4.8vw, 4.6rem); line-height: 1.04; max-width: 16ch; }
.footer__claim em { color: var(--gold); }
.footer .btn--line { color: var(--statement-fg); border-color: rgba(250, 248, 245, .35); }
.footer .btn--line::before { background: var(--gold); }
.footer .btn--line:hover { color: #2A221D; border-color: var(--gold); }
.footer__mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding: clamp(40px, 7vh, 64px) 0 clamp(28px, 4vh, 44px); }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 32px; align-self: flex-start; }

/* Logo in der rechten Ecke – der Ring dreht sich mit der Maus */
.footer__logo { position: relative; flex-shrink: 0; width: clamp(180px, 21vw, 300px); aspect-ratio: 1; margin-right: calc(var(--gutter) * -.25); }
.footer__logo-ring, .footer__logo-inner { position: absolute; inset: 0; width: 100%; height: 100%; }
.footer__logo-ring { transform-origin: 49.5% 50.15%; will-change: transform; }
.footer__logo-ring svg { width: 100%; height: 100%; }
.footer__logo::before { /* weicher Schein hinter dem Logo */
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(191, 168, 110, .16), transparent); pointer-events: none;
}
.footer__h { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer__mid li + li { margin-top: 8px; }
.footer__mid a { color: var(--statement-soft); transition: color .3s; position: relative; }
.footer__mid a:hover { color: var(--statement-fg); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(250, 248, 245, .16); font-size: 13px; color: var(--statement-soft); }
.footer__bottom a { margin-left: 24px; transition: color .3s; }
.footer__bottom a:first-child { margin-left: 0; }
.footer__bottom a:hover { color: var(--gold); }

/* =========================================================
   MEDIEN
   Einheitliche, warme Bildsprache: alle Fotos bekommen dieselbe
   leichte Farbkorrektur – beim Hover zeigen sie ihre echten Farben.
   ========================================================= */
:root { --grade: saturate(.86) sepia(.14) contrast(1.03); --grade-strong: saturate(.62) sepia(.32) contrast(1.06) brightness(.96); }

/* Allgemeine Qualität (Web Interface Guidelines) */
html { -webkit-tap-highlight-color: transparent; }
a, button, label { touch-action: manipulation; }
.h2, .fw-card__title, .step__title, .footer__claim, .reel__title, .work__cta p { text-wrap: balance; }
p { text-wrap: pretty; }
section[id] { scroll-margin-top: 90px; }
.menu { overscroll-behavior: contain; }


/* ---------- Reel: Drohnenvideo ---------- */
.eyebrow--light { color: rgba(250, 248, 245, .82); }
.reel { position: relative; padding: clamp(48px, 9vh, 96px) var(--gutter); }
.reel__pin { position: relative; }
.reel__frame {
  position: relative; max-width: 1440px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden;
  background: #1F1915; isolation: isolate;
}
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s cubic-bezier(.45, 0, .25, 1); }   /* Clip ist bereits warm gegradet – kein Filter, volle Schärfe */
.reel__video.is-active { opacity: 1; }
.reel__shade { z-index: 4; }
.reel__caption { z-index: 5; }
.reel__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(31, 25, 21, .72), rgba(31, 25, 21, 0) 50%, rgba(31, 25, 21, .18)); }
.reel__caption { position: absolute; left: clamp(22px, 4vw, 64px); right: clamp(22px, 4vw, 64px); bottom: clamp(24px, 6vh, 72px); color: var(--ivory); }
.reel__title { margin-top: 16px; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 6.6vw, 7rem); line-height: .98; letter-spacing: -.02em; }
.reel__title em { color: var(--gold); }
.reel__side { display: none; }

@media (min-width: 980px) {
  .motion .reel { padding: 0; }
  .motion .reel__pin { height: 100vh; overflow: hidden; }
  .motion .reel__frame { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; border-radius: 0; will-change: transform; }
  .motion .reel__side {
    display: block; position: absolute; top: 50%; z-index: 2; translate: 0 -50%; margin: 0;
    font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 5.4vw, 6rem); line-height: 1; white-space: nowrap; will-change: transform, opacity;
  }
  .motion .reel__side em { color: var(--accent-ink); }
  .motion .reel__side--l { left: var(--gutter); top: 24%; }
  .motion .reel__side--r { right: var(--gutter); top: 76%; }
}

/* ---------- Einblicke: Bento-Galerie ---------- */
.work__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(48px, 8vh, 88px); }
.work__head .h2 { margin-top: 18px; max-width: 13ch; }
.work__intro { color: var(--fg-soft); font-size: 17px; max-width: 460px; justify-self: end; }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 21vw, 330px); gap: clamp(12px, 1.4vw, 20px); }
.tile--a { grid-column: span 5; grid-row: span 2; }
.tile--b { grid-column: span 3; }
.tile--c { grid-column: span 4; }
.tile--d { grid-column: span 7; }
.tile--e, .tile--f, .tile--g { grid-column: span 4; }
.tile--h, .tile--i { grid-column: span 6; }

.tile figure { position: relative; height: 100%; margin: 0; border-radius: 26px; overflow: hidden; background: var(--bg-2); isolation: isolate; }
.tile figure::after { /* feine Innenkante – wirkt wie ein gefasster Abzug */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(250, 248, 245, .12);
}
.tile__media { position: absolute; inset: -9% 0; will-change: transform; }
/* Mit Animation: die ganze Kachel (Rahmen + Foto) erscheint gemeinsam, siehe main.js */
.motion .tile figure { background: transparent; }


.motion .tile figure { will-change: transform, opacity; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transform: scale(1.03); transition: transform 1.4s var(--ease), filter .9s var(--ease); }
.tile--d .tile__media img { filter: none; object-position: 50% 40%; }   /* bereits in Earth/Gold umgefärbt */
.tile--b .tile__media img { object-position: 50% 38%; }
.tile--a .tile__media img { object-position: 52% 45%; }
.tile--g .tile__media img { object-position: 60% 50%; }
.tile figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 6px; padding: clamp(18px, 2vw, 28px);
  color: var(--ivory); background: linear-gradient(to top, rgba(31, 25, 21, .78), rgba(31, 25, 21, 0));
  padding-top: 64px;
}
.tile__n { font-size: 11px; letter-spacing: .24em; color: var(--gold); }
.tile__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 2.2rem); line-height: 1.05; }
.tile__g { font-size: 12px; letter-spacing: .08em; color: rgba(250, 248, 245, .74); transform: translateY(4px); opacity: .85; transition: transform .7s var(--ease), opacity .7s var(--ease); }
@media (hover: hover) {
  .tile:hover .tile__media img { transform: scale(1.09); filter: none; }
  .tile:hover .tile__g { transform: none; opacity: 1; }
}

.work__cta { margin-top: clamp(40px, 6vh, 64px); padding-top: 32px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.work__cta p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.15; max-width: 28ch; }
.work__cta em { color: var(--accent-ink); }

/* ---------- Lebendiger Hintergrund: Lichteinfall ----------
   Wie Abendsonne, die durch ein Fenster fällt: weiche Strahlen aus einer Ecke,
   die sich sehr langsam neigen und atmen. Nur transform/opacity – kaum Rechenlast. */
.has-ambient { position: relative; isolation: isolate; }
.ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --glow: 191, 168, 110; --glow-a: .2; }
:root[data-theme="dark"] .ambient { --glow-a: .12; }
.network__panel .ambient { --glow: 250, 248, 245; --glow-a: .08; }

.ambient__beams {
  position: absolute; width: 150vmax; height: 150vmax; top: -75vmax; left: -75vmax;   /* Mittelpunkt = Lichtquelle in der Ecke */
  background: conic-gradient(from var(--from, 100deg) at 50% 50%,
    transparent 0deg, rgba(var(--glow), var(--glow-a)) 7deg, transparent 14deg,
    transparent 19deg, rgba(var(--glow), calc(var(--glow-a) * .7)) 25deg, transparent 32deg,
    transparent 36deg, rgba(var(--glow), calc(var(--glow-a) * .9)) 43deg, transparent 52deg,
    transparent 57deg, rgba(var(--glow), calc(var(--glow-a) * .55)) 62deg, transparent 68deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 16%, transparent 44%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 16%, transparent 44%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;   /* strahlt einmal auf (JS), danach ruhig */
}
.ambient__source { /* sanfte Helligkeit direkt an der Lichtquelle */
  position: absolute; width: 46vmax; height: 46vmax; top: -23vmax; left: -23vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow), calc(var(--glow-a) * 1.1)), rgba(var(--glow), 0));
}
.ambient[data-light="tr"] .ambient__beams { left: auto; right: -75vmax; --from: 190deg; }
.ambient[data-light="tr"] .ambient__source { left: auto; right: -23vmax; }
@keyframes beam-sway { from { transform: rotate(-3.5deg); } to { transform: rotate(4deg); } }
@keyframes beam-breathe { from { opacity: .75; } to { opacity: 1; } }

/* ---------- Netzwerk: schwebender Goldstaub ----------
   Feine Partikel steigen langsam auf und funkeln leise – wie Staub im Abendlicht. */
.ambient--dust, .network__panel .ambient--dust { --glow: 226, 200, 138; }
.ambient--dust .dust {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow), .95), rgba(var(--glow), 0) 70%);
  opacity: 0; will-change: transform, opacity;
  animation: dust-float var(--d) ease-in-out var(--delay) infinite; animation-play-state: paused;
}
.ambient--dust.is-on .dust { animation-play-state: running; }
@keyframes dust-float {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
  20% { opacity: var(--o); }
  50% { opacity: calc(var(--o) * .45); transform: translate3d(calc(var(--dx) * .5), -70px, 0) scale(1); }
  75% { opacity: var(--o); }
  100% { opacity: 0; transform: translate3d(var(--dx), -150px, 0) scale(.7); }
}

/* ---------- Prozess: der Aurelaya-Pinselring als Wasserzeichen ---------- */
.ambient--ring .ring-spin {
  position: absolute; left: -16vw; top: 50%; width: min(78vw, 860px); aspect-ratio: 1; translate: 0 -50%;
  opacity: .1; animation: spin 200s linear infinite; animation-play-state: paused; will-change: transform;
}
.ambient--ring .ring-spin svg { width: 100%; height: 100%; transform-origin: 49.5% 50.15%; will-change: transform; }
:root[data-theme="dark"] .ambient--ring .ring-spin { opacity: .08; }
.ambient--ring.is-on .ring-spin { animation-play-state: running; }
@media (max-width: 980px) { .ambient--ring .ring-spin { left: auto; right: -40vw; width: 110vw; } }
/* ---------- Kontakt: Ringe wie auf stillem Wasser ---------- */
.ambient--ripple i {
  position: absolute; left: 12%; top: 78%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%;
  border: 1px solid rgba(191, 168, 110, .55); opacity: 0; transform: scale(.04); will-change: transform, opacity;
  animation: ripple 16s cubic-bezier(.22, .61, .36, 1) infinite; animation-play-state: paused;
}
:root[data-theme="dark"] .ambient--ripple i { border-color: rgba(191, 168, 110, .38); }
.ambient--ripple i:nth-child(2) { animation-delay: 4s; }
.ambient--ripple i:nth-child(3) { animation-delay: 8s; }
.ambient--ripple i:nth-child(4) { animation-delay: 12s; }
.ambient--ripple.is-on i { animation-play-state: running; }
/* Ringe laufen weich über die Kante in den Footer weiter statt abgeschnitten zu werden */
.ambient--ripple { overflow-x: clip; overflow-y: visible; }
.contact.has-ambient { z-index: 2; }
@keyframes ripple {
  0% { opacity: 0; transform: scale(.04); }
  12% { opacity: .9; }
  100% { opacity: 0; transform: scale(1); }
}
@media (max-width: 700px) { .ambient--ripple i { left: 50%; top: 88%; width: 800px; height: 800px; margin: -400px 0 0 -400px; } }

/* Kontakt: „bleibt“ bekommt eine goldene Pinsel-Unterstreichung, gezogen erst nachdem das Wort sitzt */
.contact .h2 em { position: relative; display: inline-block; }
.contact .h2 em::after {
  content: ""; position: absolute; left: -3%; right: -6%; bottom: -.13em; height: .2em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 50 6, 120 3, 197 9' fill='none' stroke='%23BFA86E' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M18 16 C 70 11, 130 9, 182 13' fill='none' stroke='%23BFA86E' stroke-width='1.4' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 calc((1 - var(--u, 1)) * 100%) 0 0);
}
.motion .contact .h2 em::after { clip-path: inset(0 calc((1 - var(--u, 0)) * 100%) 0 0); }

/* Footer: der Pinselring dreht sich ruhig und dauerhaft */
.footer__logo-ring svg { transform-origin: 49.5% 50.15%; animation: spin 80s linear infinite; }/* ---------- Video: goldener Lichtschimmer beim Loop ---------- */
.reel__flare {
  position: absolute; inset: -25%; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 38% 55% at 62% 42%, rgba(255, 222, 160, .95), rgba(255, 186, 96, .45) 42%, rgba(255, 170, 80, 0) 72%),
    linear-gradient(104deg, rgba(255, 232, 190, 0) 32%, rgba(255, 232, 190, .45) 49%, rgba(255, 232, 190, 0) 64%);
  will-change: transform, opacity;
}
.reel__flare.is-on { animation: reel-flare 2.8s cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes reel-flare {
  0% { opacity: 0; transform: translate3d(-16%, 0, 0) scale(1); }
  42% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(16%, -2%, 0) scale(1.1); }
}

/* ---------- Partner-Logos ---------- */
.partners { margin-top: clamp(88px, 14vh, 150px); }
.partners__head { margin-bottom: 28px; }
.partners__head .label::after { order: 1; }
.partners__viewport {
  overflow: hidden; padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.partners__track { display: flex; align-items: center; gap: clamp(56px, 6vw, 104px); width: max-content; padding-right: clamp(56px, 6vw, 104px); animation: partners 48s linear infinite; }
.partners__viewport:hover .partners__track, .partners__viewport:focus-within .partners__track { animation-play-state: paused; }
@keyframes partners { to { transform: translateX(-50%); } }
.partner {
  display: block; width: var(--w); height: 58px; background-color: var(--fg); opacity: .5;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  transition: opacity .5s var(--ease), background-color .5s var(--ease), transform .7s var(--ease);
}
.partner:hover, .partner:focus-visible { opacity: 1; background-color: var(--accent-ink); transform: translateY(-2px); }

/* ---------- Bild-Pills in den kinetischen Zeilen ---------- */

/* Bühnen- & Konzertbilder sind farblich laut (Rot/Lila) – sie bekommen die stärkere warme Korrektur */
img[src*="lichttechnik"], img[src*="band-"], img[src*="festival"], img[src*="buehne-9"], img[src*="buehne-1"] { filter: var(--grade-strong); }


/* Dark Mode: Pfeil-Kreis auf goldenem Button sichtbar halten */
:root[data-theme="dark"] .btn--solid .btn__icon { background: rgba(42, 34, 29, .16); color: #2A221D; }
:root[data-theme="dark"] .btn--solid::before { background: var(--ivory); }
:root[data-theme="dark"] .btn--solid:hover .btn__icon { background: var(--accent); color: #2A221D; }

@media (max-width: 979px) {
  .work__head { grid-template-columns: 1fr; }
  .work__intro { justify-self: start; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 42vw, 300px); }
  .tile--a { grid-column: span 2; grid-row: span 2; }
  .tile--b, .tile--c, .tile--e, .tile--f { grid-column: span 1; grid-row: span 1; }
  .tile--d, .tile--g, .tile--h, .tile--i { grid-column: span 2; }
}
@media (max-width: 700px) {
  .reel__frame { aspect-ratio: 4 / 5; border-radius: 22px; }
  .tile figure { border-radius: 20px; }
  .tile__g { display: none; }
  .tile figcaption { padding-top: 48px; }
  .partner { height: 46px; width: calc(var(--w) * .8); }
}
@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 32px; padding: 0 var(--gutter); }
  .partners__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Fallback ohne JS ---------- */
.fallback .preloader { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .burger { display: block; }
}
@media (max-width: 980px) {
  .network__grid, .process__grid, .contact__grid { grid-template-columns: 1fr; }
  .process__aside { position: relative; top: 0; }
  .traits__grid { grid-template-columns: 1fr 1fr; }
  .manifesto__grid { grid-template-columns: 1fr; gap: 20px; }
  .manifesto__grid > .label { margin-top: 0; }
  .hero__ring { right: -30vw; width: min(110vw, 760px); opacity: .9; }
}
@media (max-width: 700px) {
  :root { --nav-h: 72px; }
  .nav__cta { display: none; }
  .nav__word { height: 16px; }
  .nav__mark { height: 34px; }
  .hero { align-items: flex-end; }
  .hero__ring { top: 30%; right: -42vw; width: 118vw; }
  .hero__title .line:nth-child(2) { padding-left: 0; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero__scroll { display: none; }
  .btn { height: 52px; padding: 0 24px; }
  .manifesto__cols { grid-template-columns: 1fr; }
  .svc__head { grid-template-columns: 1fr 40px; gap: 6px 16px; }
  .svc__num { grid-column: 1; grid-row: 1; }
  .svc__title { grid-column: 1; grid-row: 2; font-size: 1.85rem; }
  .svc__tags { grid-column: 1; grid-row: 3; text-align: left; }
  .svc__icon { grid-column: 2; grid-row: 1 / 4; width: 40px; height: 40px; }
  .svc:hover .svc__title, .svc.is-open .svc__title { transform: none; }
  .svc__body p { padding-left: clamp(8px, 1.5vw, 24px); }
  .facts { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .orbit { width: 100%; }
  .orbit__mark { width: 18%; }
  .planet b { font-size: 9.5px; padding: 5px 9px; letter-spacing: .1em; }
  .traits__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .form { border-radius: 24px; }
  .footer__mid { flex-direction: column; align-items: stretch; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__logo { align-self: flex-end; width: 170px; margin-right: 0; }
  .lang button { width: 34px; }
  .lang__pill { width: 34px; }
  :root[lang="en"] .lang__pill, :root[data-lang-next="en"] .lang__pill { transform: translateX(34px); }
  .nav__actions { gap: 8px; }
  .footer__bottom a { margin-left: 0; margin-right: 20px; }
  .fw-card { min-height: 0; }
}

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

/* ==========================================================================
   Unterseiten: Impressum & Datenschutz (impressum.html, datenschutz.html, legal.js)
   ========================================================================== */
:root[lang="en"] [data-l="de"], :root[lang="de"] [data-l="en"] { display: none !important; }
.legal-page .burger { display: none; }
.legal { padding: calc(var(--nav-h) + clamp(56px, 10vh, 120px)) 0 clamp(80px, 12vh, 160px); }
.legal__wrap { max-width: 820px; }
.legal__back { display: flex; width: fit-content; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--fg-soft); transition: color .3s, gap .5s var(--ease); }
.legal__back:hover { color: var(--fg); gap: 14px; }
.legal__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }
.legal .label { margin-top: clamp(36px, 6vh, 64px); }
.legal__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.01em; margin-top: 18px; }
.legal__title em { color: var(--accent-ink); }
.legal__meta { margin-top: 18px; font-size: 13px; letter-spacing: .04em; color: var(--fg-soft); }
.legal__body { margin-top: clamp(40px, 7vh, 72px); }
.legal__body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; margin-top: clamp(40px, 6vh, 64px); padding-top: 28px; border-top: 1px solid var(--line); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink); margin-top: 30px; }
.legal__body p, .legal__body li, .legal__body address { font-size: 16px; line-height: 1.7; color: var(--fg-soft); font-style: normal; }
.legal__body p, .legal__body ul, .legal__body address { margin-top: 14px; }
.legal__body strong { color: var(--fg); font-weight: 500; }
.legal__body ul { padding-left: 0; list-style: none; }
.legal__body li { position: relative; padding-left: 22px; margin-top: 8px; }
.legal__body li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 1px; background: var(--accent); }
.legal__body a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; transition: color .3s; overflow-wrap: anywhere; }
.legal__body a:hover { color: var(--accent-ink); }
.legal__facts { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 0 32px; margin-top: 14px; }
.legal__facts dt, .legal__facts dd { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.6; }
.legal__facts dt { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); padding-top: 18px; }
.legal__facts dd { margin: 0; color: var(--fg); }
.footer--slim { padding: 32px 0; }
.footer--slim .footer__bottom { padding-top: 0; border-top: 0; }
@media (max-width: 700px) {
  .legal__facts { grid-template-columns: 1fr; }
  .legal__facts dt { border-bottom: 0; padding-bottom: 0; }
  .legal__facts dd { padding-top: 6px; }
}