/* Aubrey Company · Website-Vorschau Phase 1
   Typografie: General Sans 400/500 (Markenschrift 2026). Solange die lizenzierten Dateien nicht unter
   assets/fonts/ liegen, rendert Hanken Grotesk als ausgewiesene Ersatzschrift. */
@font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Aubrey Fallback"; src: url("../assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aubrey Fallback"; src: url("../assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Aubrey Fallback"; src: url("../assets/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Aubrey Fallback"; src: url("../assets/fonts/hanken-grotesk-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }

@property --wipe { syntax: "<length-percentage>"; inherits: true; initial-value: 0%; }
@property --cell { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }

:root {
  --paper: #ffffff;
  --mist: #f3f4f5;
  --mist-2: #e9ebed;
  --ink: #0f202d;
  --ink-2: #1c2f3d;
  --slate: #2d4353;
  --text: #24323e;
  --muted: #5f6d78;
  --line: rgba(15, 32, 45, .12);
  --line-2: rgba(15, 32, 45, .22);
  --copper: #b9875f;
  --copper-hi: #e2b07f;
  /* X-06: Kupfer als TEXT, Kicker, Badge und Fokusring auf hellem Grund (5,3:1 auf Weiß). --copper bleibt für Slash, Linien und Grafik. */
  --copper-text: #8c6242;
  --peak: #f1c398;
  --grad: linear-gradient(118deg, #0f202d 0%, #172a38 26%, #2d4353 46%, #6f6157 63%, #b9875f 80%, #e7b688 100%);
  --grad-soft: linear-gradient(118deg, #0f202d 0%, #2d4353 55%, #b9875f 100%);
  --font: "General Sans", "Aubrey Fallback", ui-sans-serif, system-ui, sans-serif;
  --m: clamp(20px, 3.6vw, 64px);
  --col: calc((100vw - 2 * var(--m)) / 12);
  --hd: 84px;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.7, 0, .2, 1);
  --e-soft: cubic-bezier(.33, 1, .68, 1);
  --vh: 100svh;
  --slash: 0.5549; /* 832.418 / 1500: Original-Geometrie, 61° */
  /* Typo-Skala (R11, K10/B9): feste Stufen in rem, damit die Grundschrift des Browsers wirkt (16px = 1rem).
     Meta und Labels xs, Nebentext s, Fließtext body/m, Zwischenstufen l bis 3xl. Neue Größen nur aus dieser Skala. */
  --t-xs: .8125rem;   /* 13 */
  --t-s: .9375rem;    /* 15 */
  --t-b: 1rem;        /* 16 */
  --t-body: 1.0625rem;/* 17 */
  --t-m: 1.125rem;    /* 18 */
  --t-l: 1.4375rem;   /* 23 */
  --t-xl: 1.875rem;   /* 30 */
  --t-2xl: 2.625rem;  /* 42 */
  --t-3xl: 3.75rem;   /* 60 */
  --measure: 57ch;    /* Lesespalte Journal: rund 66 bis 72 Zeichen (General Sans: 57ch ergibt gemessen rund 70) */
}
@media (max-width: 1023px) { :root { --hd: 68px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 12px); }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font); font-weight: 400; font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; font-feature-settings: "ss01" 0; }
@media (min-width: 1440px) { body { font-size: var(--t-m); } }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--copper-text); outline-offset: 3px; border-radius: 2px; }
/* Dunkle Flächen: Kupfer-Text und Fokusring im hellen Kupfer (X-06) */
.on-dark, .hd.is-dark:not(.is-solid), .svc-hero, .art-hero, .menu, .ft { --copper-text: var(--copper-hi); }
/* Fokusringe nur bei Tastaturbedienung: nach Maus oder Fingertipp setzt app.js html.ptr (auch Safari fokussiert per Skript sonst sichtbar).
   Felder behalten ihren eigenen, dezenten Fokus (Linie unter dem Feld). Kein grauer Tipp-Kasten auf iOS. */
html.ptr :focus-visible, html.ptr .choice input:focus-visible + span, html.ptr .ck__sw:has(input:focus-visible), body:not(.panel-body) [tabindex="-1"]:focus { outline: none !important; }
html.ptr body:not(.panel-body) .btn:focus-visible:not(:hover) { --wipe: 0%; color: var(--c); text-decoration: none; }
body:not(.panel-body) :is(a, button, summary, label, input, select, textarea, [role="tab"], [tabindex]) { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--ink); color: #fff; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: var(--m) !important; }
.skip { position: fixed; z-index: 200; left: 12px; top: -80px; background: var(--ink); color: #fff; padding: 12px 16px; font-weight: 500; }
.skip:focus { top: 12px; }

/* ---------- Typo-Skala ---------- */
.display { font-weight: 500; letter-spacing: -.038em; line-height: .94; color: var(--ink); }
.h1 { font-size: clamp(44px, 6.6vw, 124px); font-weight: 500; letter-spacing: -.038em; line-height: .96; color: var(--ink); text-wrap: balance; }
.h2 { font-size: clamp(36px, 4.2vw, 80px); font-weight: 500; letter-spacing: -.032em; line-height: 1; color: var(--ink); text-wrap: balance; }
.h3 { font-size: clamp(24px, 1.9vw, 36px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; color: var(--ink); }
.lead { font-size: clamp(1.1875rem, 1.35vw, 1.5625rem); line-height: 1.42; color: var(--text); letter-spacing: -.008em; max-width: 40ch; }
.label { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.label b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.label i { width: 22px; height: 1px; background: currentColor; opacity: .6; }
.on-dark .label, .label.on-dark { color: rgba(255,255,255,.66); }
.on-dark .label b { color: #fff; }
.muted { color: var(--muted); }
.prose p + p { margin-top: 1em; }

/* ---------- Links & Buttons ---------- */
/* Buttons: Marken-Slash als Form (61°, Versatz = Höhe × 0,5549).
   Die Form schneidet das Element selbst (clip-path), Grundfläche und Wischer liegen als Pseudo-Elemente 2px über
   den Rand hinaus darunter. So gibt es keine Kante, an der die Grundfarbe durchscheint (früher: weiße Ränder,
   schwarzer Rest unten rechts, weil der Wischer kürzer war als der Schrägversatz). */
.btn { --b: var(--ink); --c: #fff; --w: var(--grad); --wipe: 0%; --bh: 54px; --sk: calc(var(--bh) * var(--slash)); position: relative; display: inline-flex; align-items: center; gap: 14px; height: var(--bh); padding: 0 24px 0 26px; background: var(--b); color: var(--c); font-size: 15.5px; font-weight: 500; white-space: nowrap; overflow: hidden; isolation: isolate; border-radius: 2px; transition: color .5s var(--e-out), --wipe .7s var(--e-out); }
.btn::after { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--w); clip-path: polygon(0 0, var(--wipe) 0, calc(var(--wipe) - var(--sk)) 100%, 0 100%); pointer-events: none; }
.btn:hover, .btn:focus-visible { --wipe: calc(100% + var(--sk) + 6px); }
.btn:hover, .btn:focus-visible { color: var(--ch, #fff); }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .5s var(--e-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--light { --b: #fff; --c: var(--ink); }
.btn--line { --b: transparent; --c: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.on-dark .btn--line { --c: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.btn--sm { --bh: 44px; padding: 0 18px 0 20px; font-size: 14.5px; }
/* Website: echte Parallelogramme. Rahmen der Linien-Buttons als Ring (evenodd), weil box-shadow an Schrägkanten abgeschnitten würde. */
body:not(.panel-body) .btn { --lc: var(--line-2); padding: 0 calc(var(--sk) + 8px) 0 calc(var(--sk) + 10px); background: none; border-radius: 0; overflow: visible; box-shadow: none; clip-path: polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); }
/* Grundfläche nur dort, wo der Wischer noch nicht ist: nach dem Hover liegt keine helle Fläche mehr unter der Kante */
body:not(.panel-body) .btn::before { content: ""; position: absolute; inset: -2px; z-index: -2; background: var(--b); clip-path: polygon(calc(var(--wipe) - 1px) 0, calc(100% + 400px) 0, calc(100% + 400px) 100%, calc(var(--wipe) - var(--sk) - 1px) 100%); pointer-events: none; }
body:not(.panel-body) .btn--sm { padding: 0 calc(var(--sk) + 4px) 0 calc(var(--sk) + 6px); }
body:not(.panel-body) .btn--line::before { inset: 0; background: var(--lc); clip-path: polygon(evenodd, var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%, var(--sk) 0, calc(var(--sk) + .6px) 1px, calc(100% - 1.7px) 1px, calc(100% - var(--sk) - .6px) calc(100% - 1px), 1.7px calc(100% - 1px), calc(var(--sk) + .6px) 1px); }
body:not(.panel-body) .on-dark .btn--line { --lc: rgba(255,255,255,.45); }
body:not(.panel-body) .btn--line::before { transition: opacity .5s var(--e-out); }
body:not(.panel-body) .btn--line:is(:hover, :focus-visible)::before { opacity: 0; }
/* Fokus: der Rahmen würde von der Form abgeschnitten, daher füllt sich der Button und der Text wird unterstrichen */
body:not(.panel-body) .btn:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
body:not(.panel-body) .btn:active { transform: translateY(1px); }
.btn[hidden] { display: none !important; }
.link { position: relative; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); padding-bottom: 4px; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--e-out); }
.link:hover::after { transform: scaleX(0); }
.link svg { width: 14px; height: 14px; transition: transform .5s var(--e-out); }
.link:hover svg { transform: translateX(4px); }
.on-dark .link { color: #fff; }

/* ---------- Header ---------- */
.hd { position: fixed; z-index: 60; inset: 0 0 auto; height: var(--hd); color: var(--ink); transition: transform .6s var(--e-out), color .45s var(--e-out); }
.hd__bg { position: absolute; inset: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .5s var(--e-out); }
.hd.is-solid .hd__bg { opacity: 1; }
.hd__cell { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hd__cell::before { content: ""; position: absolute; inset: 0; background: var(--grad); background-size: 100vw 100%; clip-path: polygon(0 0, var(--cell) 0, calc(var(--cell) - var(--hd) * var(--slash)) 100%, 0 100%); transition: --cell .9s var(--e-out); }
.hd.is-solid .hd__cell::before { --cell: 46px; }
.hd.is-lit .hd__cell::before { --cell: calc(100% + var(--hd)); }
.hd.is-lit { color: #fff; }
.hd__in { position: relative; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-inline: var(--m); }
/* K04/A4 (R11): kein Sprung mehr beim Wechsel auf „solid“. Raster und Navigation bleiben stehen, das Logo bleibt exakt mittig.
   Der Keil (46px oben, 61° nach unten auslaufend) endet auf Höhe der Navigationsmitte bei rund 23px und berührt sie nicht. */
.hd__nav { display: flex; gap: clamp(18px, 2vw, 36px); font-size: 15px; font-weight: 500; }
.hd__nav a { position: relative; padding: 8px 0; opacity: .78; transition: opacity .3s; }
.hd__nav a:hover, .hd__nav a[aria-current="page"] { opacity: 1; }
.hd__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; }
.hd__logo { justify-self: center; display: block; width: clamp(118px, 9.4vw, 152px); color: inherit; }
.hd__logo svg { width: 100%; height: auto; }
.hd__right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.hd__cta { --b: var(--ink); --c: #fff; --bh: 44px; font-size: 14.5px; }
.hd.is-dark:not(.is-solid) .hd__cta, .hd.is-lit .hd__cta { --b: #fff; --c: var(--ink); }
.hd.is-lit .hd__cta:hover { --c: #fff; }
.hd__menu { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 6px 0 14px; font-size: 14.5px; font-weight: 500; }
.hd__menu b { position: relative; width: 22px; height: 12px; }
.hd__menu b i { position: absolute; left: 0; right: 0; height: 1.6px; background: currentColor; transition: transform .55s var(--e-out), top .55s var(--e-out), width .55s var(--e-out); }
.hd__menu b i:nth-child(1) { top: 2px; } .hd__menu b i:nth-child(2) { top: 9px; width: 64%; left: auto; }
.hd__menu:hover b i:nth-child(2) { width: 100%; }
.hd.is-dark:not(.is-solid) { color: #fff; }
.hd.is-hidden { transform: translateY(-100%); }
body.menu-open .hd { color: #fff; transform: none; }
body.menu-open .hd .hd__bg { opacity: 0; }
body.menu-open .hd__nav { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } /* K05: das Menü zeigt dieselben Punkte */
body.menu-open .hd .hd__cell::before { --cell: 0px; transition-duration: .2s; }
body.menu-open .hd__menu b i:nth-child(1) { top: 5px; transform: rotate(45deg); }
body.menu-open .hd__menu b i:nth-child(2) { top: 5px; width: 100%; transform: rotate(-45deg); }
body.menu-open .hd__cta { --b: #fff; --c: var(--ink); --w: var(--ink); }
.sent .btn--light { --w: var(--ink); }
@media (max-width: 1023px) {
  .hd__in { grid-template-columns: auto 1fr auto; }
  .hd__right { grid-column: 3; }
  .hd__nav, .hd__cta { display: none; }
  .hd__logo { justify-self: start; width: 112px; }
  .hd.is-solid .hd__cell::before { --cell: 0px; }
  .hd.is-solid:not(.is-lit) .hd__in { padding-left: var(--m); }
  .hd__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--e-out); }
  .hd.is-solid:not(.is-lit) .hd__bg::after { transform: none; }
}

/* ---------- Menü (Verlauf formt den Raum) ---------- */
.menu { position: fixed; inset: 0; z-index: 55; color: #fff; visibility: hidden; pointer-events: none; }
.menu__bg { position: absolute; inset: 0; background: var(--grad); clip-path: polygon(0 0, var(--wipe) 0, calc(var(--wipe) - 100vh * var(--slash)) 100%, 0 100%); transition: --wipe .9s var(--e-io); }
.menu__light { position: absolute; inset: -20%; background: radial-gradient(40% 40% at 78% 72%, rgba(241,195,152,.5), transparent 70%), radial-gradient(30% 35% at 20% 10%, rgba(45,67,83,.7), transparent 70%); opacity: 0; transition: opacity 1s var(--e-out); animation: drift 18s ease-in-out infinite alternate; }
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu.is-open .menu__bg { --wipe: calc(100% + 100vh); }
.menu.is-open .menu__light { opacity: 1; transition-delay: .3s; }
.menu.is-closing { visibility: visible; }
.menu__in { position: relative; height: 100%; overflow: auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px var(--m); padding: calc(var(--hd) + 6vh) var(--m) 40px; }
.menu__main a { --mf: clamp(36px, min(5.6vw, 7.6vh), 96px); display: flex; align-items: flex-start; gap: 22px; padding: .08em 0; font-size: var(--mf); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; overflow: hidden; }
.menu__main a span { display: block; transform: translateY(105%); transition: transform .9s var(--e-out); }
.menu__main a em { font-style: normal; font-size: 14px; line-height: 1; margin-top: calc(var(--mf) * var(--capt, .2)); letter-spacing: 0; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .8s var(--e-out); font-variant-numeric: tabular-nums; min-width: 22px; }
.menu__main a:hover span { color: var(--peak); }
.menu.is-open .menu__main a span { transform: none; transition-delay: calc(.22s + var(--k, 0) * .05s); }
.menu__main a:nth-child(2) { --k: 1; } .menu__main a:nth-child(3) { --k: 2; } .menu__main a:nth-child(4) { --k: 3; } .menu__main a:nth-child(5) { --k: 4; } .menu__main a:nth-child(6) { --k: 5; } .menu__main a:nth-child(7) { --k: 6; }
.menu.is-open .menu__main a em { opacity: .55; transform: none; }
.menu__side { align-self: end; display: grid; gap: 34px; font-size: 15.5px; opacity: 0; transform: translateY(16px); transition: opacity .7s, transform .9s var(--e-out); }
.menu.is-open .menu__side { opacity: 1; transform: none; transition-delay: .45s; }
.menu__side h2, .menu__side h3 { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.6); margin-bottom: 12px; }
.menu__side li a { display: inline-block; padding: 4px 0; color: rgba(255,255,255,.9); transition: color .3s, transform .4s var(--e-out); }
.menu__side li a:hover { color: #fff; transform: translateX(6px); }
.menu__side p { color: rgba(255,255,255,.82); }
@media (max-width: 899px) {
  .menu__in { grid-template-columns: 1fr; padding-top: calc(var(--hd) + 3vh); }
  .menu__main a { --mf: clamp(40px, 11vw, 64px); }
  .menu__side { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ---------- Seitenwechsel ---------- */
.veil { position: fixed; inset: 0; z-index: 300; pointer-events: none; background: var(--grad); clip-path: polygon(0 0, var(--wipe) 0, calc(var(--wipe) - 100vh * var(--slash)) 100%, 0 100%); --wipe: 0%; }
.veil.is-in { --wipe: calc(100% + 100vh); transition: --wipe .3s var(--e-io); pointer-events: auto; }
html.arrive .veil { --wipe: calc(100% + 100vh); }
.veil.is-out { clip-path: polygon(var(--wipe) 0, calc(100% + 100vh) 0, 100% 100%, calc(var(--wipe) - 100vh * var(--slash)) 100%); transition: --wipe .36s var(--e-io); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--paper); }
.hero__track { height: calc(var(--vh) * 2.3); }
.hero__stage { position: sticky; top: 0; height: var(--vh); min-height: 540px; overflow: hidden; }
.hero__type { position: absolute; left: var(--m); right: var(--m); bottom: clamp(36px, 8vh, 96px); pointer-events: none; }
.hero__h1 { font-size: clamp(56px, min(8.6vw, 15.5vh), 172px); font-weight: 500; letter-spacing: -.045em; line-height: .9; color: var(--ink); }
.hero__h1 .ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.hero__h1 .ln > span { display: block; will-change: transform; }
.hero__h1 .ln--2 { padding-left: 1.05em; }
.hero__kicker { position: absolute; left: var(--m); top: calc(var(--hd) + clamp(18px, 4vh, 44px)); display: flex; gap: 14px; align-items: center; font-size: 15px; font-weight: 500; color: var(--ink); }
.hero__kicker span { color: var(--muted); font-weight: 400; }
.hero__film { position: absolute; z-index: 1; inset: 0; background: #0b1823; clip-path: var(--clip, none); will-change: clip-path; }
.hero__film video, .hero__film .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--fs, 1)); transform-origin: 60% 50%; }
/* X-07: Lesbarkeitsschleier oben (Kopfzeile, Breadcrumb) und unten (Headline), damit weißer Text auf jedem Videobild mindestens 4,5:1 erreicht */
.hero__film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,24,.66) 0, rgba(8,16,24,.6) calc(var(--hd) + 20px), rgba(8,16,24,.56) calc(var(--hd) + clamp(18px, 4vh, 44px) + 40px), rgba(8,16,24,0) calc(var(--hd) + clamp(18px, 4vh, 44px) + 150px), rgba(8,16,24,0) 52%, rgba(8,16,24,.55) 100%); pointer-events: none; }
.hero__film .hero__kicker { text-shadow: 0 1px 12px rgba(8,16,24,.45); }
.hero__film .hero__type { z-index: 2; }
.hero__film .hero__h1, .hero__film .hero__kicker { color: #fff; }
.hero__film .hero__kicker span { color: rgba(255,255,255,.7); }
.hero__aside { position: absolute; z-index: 3; right: var(--m); bottom: clamp(40px, 8.5vh, 104px); width: min(380px, max(30vw, 324px)); color: #fff; display: grid; gap: 22px; opacity: var(--ao, 1); transform: translateY(var(--ay, 0)); }
/* B11 (R11): solange das Cookie-Banner offen ist, rückt der Hero-Block darüber (Wert aus cookies.js) */
.hero__aside { transition: translate 1s cubic-bezier(.45, 0, .2, 1); } /* R12: Rückweg weich, startet erst nach dem Ausblenden des Banners */
html.ck-on .hero__aside { transition: translate .8s var(--e-out); translate: 0 calc(-1 * var(--ck-lift, 0px)); }
.hero__aside p { font-size: var(--t-body); line-height: 1.5; color: rgba(255,255,255,.88); }
.hero__aside .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__statement { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--hd) var(--m) 0; text-align: center; opacity: var(--so, 0); pointer-events: none; }
.hero__statement p { font-size: clamp(34px, 4.6vw, 88px); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; color: var(--ink); max-width: 22ch; transform: translateY(var(--sy, 20px)); filter: blur(var(--sb, 0px)); }
.hero__statement p em { font-style: normal; color: var(--muted); }
.hero__ctrl { position: absolute; z-index: 4; right: var(--m); top: calc(var(--hd) + 18px); display: flex; gap: 6px; opacity: var(--ao, 1); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s; }
.icon-btn:hover { background: rgba(255,255,255,.24); }
.icon-btn svg { width: 14px; height: 14px; }
.hero__cue { position: absolute; z-index: 4; left: 50%; bottom: 22px; translate: -50% 0; width: 1px; height: 46px; background: rgba(255,255,255,.3); overflow: hidden; opacity: var(--ao, 1); }
.hero__cue::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: #fff; animation: cue 2.2s var(--e-io) infinite; }
@keyframes cue { to { top: 100%; } }
/* ohne JS bzw. reduziert: Ruhezustand */
html:not(.js) .hero__track, html.rm .hero__track { height: auto; }
html:not(.js) .hero__stage, html.rm .hero__stage { position: relative; }
html.rm .hero__statement { position: relative; opacity: 1; padding: 14vh var(--m); }
html.rm .hero__statement p { transform: none; }
@media (max-width: 899px) {
  .hero__h1 { font-size: clamp(40px, 11.6vw, 96px); line-height: .94; }
  .hero__track { height: calc(var(--vh) * 1.9); }
  .hero__h1 .ln--2 { padding-left: 0; }
  .hero__type { bottom: auto; top: calc(var(--hd) + 9vh); }
  .hero__kicker { display: none; }
  .hero__aside { left: var(--m); right: var(--m); width: auto; bottom: 34px; }
  .hero__aside p { font-size: 16px; }
  .hero__cue { display: none; }
  .hero__ctrl { top: auto; bottom: calc(34px + 10px); right: var(--m); }
  .hero__aside .btns { padding-right: 52px; }
  .hero:not(.film-on) .hero__ctrl { display: none; }
  .hero:not(.film-on) .hero__aside .btns { padding-right: 0; }
}
/* Runde 11: „Projekt anfragen“ und „Projekte“ in einer Zeile. Ab 360px wandert die Film-Steuerung neben den Absatz
   (Unterkante des Absatzes = 34px Abstand + 54px Buttonzeile + 22px Lücke), die Buttonzeile bekommt die volle Breite. */
@media (max-width: 899px) and (min-width: 360px) {
  .hero__aside .btns { padding-right: 0; }
  .hero.film-on .hero__aside p { padding-right: 52px; }
  .hero__ctrl { bottom: calc(34px + 54px + 22px); }
}

/* ---------- Kapitel-Index (Report-Navigation) ---------- */
.chapters { padding: clamp(80px, 12vh, 160px) 0 clamp(80px, 12vh, 150px); }
.chapters__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
.chapters__head { grid-column: 1 / 5; display: grid; align-content: start; gap: 22px; position: sticky; top: calc(var(--hd) + 32px); align-self: start; }
.chapters__head p { color: var(--muted); max-width: 30ch; }
.chapters__list { grid-column: 6 / 13; border-top: 1px solid var(--line-2); counter-reset: ch; }
.chapters__list li { border-bottom: 1px solid var(--line); }
.chapters__list a { position: relative; display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: 16px; padding: 26px 0 24px; transition: padding .6s var(--e-out); }
.chapters__list a > em { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chapters__list a > strong { font-size: clamp(28px, 2.6vw, 48px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.chapters__list a > span { font-size: 14.5px; color: var(--muted); text-align: right; }
.chapters__list a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--e-out); }
.chapters__list a:hover { padding-left: 14px; }
.chapters__list a:hover::before { transform: none; }
/* Einheitliche Slash-Vorschau (R11, K09): Bild im 61°-Slash (Versatz = Höhe × 0,5549 = 34,7 % der Breite bei 16:10) */
.peek { position: fixed; z-index: 40; top: 0; left: 0; width: 360px; aspect-ratio: 16 / 10; pointer-events: none; overflow: hidden; clip-path: polygon(100% 0, 100% 0, 65.3% 100%, 65.3% 100%); transition: clip-path .6s var(--e-out); background: var(--mist); }
.peek.is-on { clip-path: polygon(34.7% 0, 100% 0, 65.3% 100%, 0 100%); }
.peek img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform .9s var(--e-out); }
.peek.is-on img { transform: none; }
@media (hover: none), (max-width: 899px) { .peek { display: none; } }
@media (max-width: 899px) {
  .chapters__head, .chapters__list { grid-column: 1 / -1; }
  .chapters__head { position: static; margin-bottom: 36px; }
  .chapters__list a { grid-template-columns: 40px 1fr; }
  .chapters__list a > span { grid-column: 2; text-align: left; margin-top: -8px; }
}

/* ---------- Ausgewählte Arbeiten (Bühne) ---------- */
.work { position: relative; background: var(--paper); }
.work__track { height: calc(var(--vh) * (var(--n) * .9 + .6)); }
.work__stage { position: sticky; top: 0; height: var(--vh); min-height: 620px; overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; padding: calc(var(--hd) + 3vh) var(--m) 4vh; }
.work__info { grid-column: 1 / 5; display: grid; grid-template-rows: auto 1fr auto; padding-top: 1vh; min-width: 0; }
.work__title { position: relative; margin-top: 2.6vh; height: 2.1em; font-size: clamp(40px, min(3.9vw, 7.4vh), 76px); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.work__title { overflow: hidden; }
.work__title > span { position: absolute; left: 0; top: 0; display: block; max-width: 100%; }
.work__title .w { display: inline-block; white-space: nowrap; }
.work__title .ch { display: inline-block; transform: translateY(var(--ty, 0)); opacity: var(--to, 1); }
.work__meta { display: grid; align-content: end; gap: 22px; }
.work__lead { font-size: clamp(19px, 1.4vw, 24px); line-height: 1.38; color: var(--ink); letter-spacing: -.01em; max-width: 26ch; }
.work__dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 14.5px; }
.work__dl dt { color: var(--muted); }
.work__dl dd { color: var(--ink); }
.work__nav { display: flex; align-items: center; gap: 18px; margin-top: 4vh; font-size: 14px; color: var(--muted); }
.work__steps { display: flex; gap: 6px; }
.work__steps button { width: 28px; height: 28px; position: relative; }
.work__steps button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line-2); }
.work__steps button::after { content: ""; position: absolute; left: 0; top: 50%; height: 2px; width: calc(var(--f, 0) * 100%); background: var(--ink); }
.work__count { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.work__media { grid-column: 5 / 13; position: relative; min-height: 0; }
.work__frame { position: absolute; inset: 0 0 0 4%; overflow: hidden; background: var(--mist); }
.work__img { position: absolute; inset: 0; clip-path: polygon(0 0, var(--r, 100%) 0, calc(var(--r, 100%) - var(--sk, 0px)) 100%, 0 100%); }
.work__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--s, 1)); transform-origin: 30% 50%; }
.work__detail { position: absolute; z-index: 30; left: 0; bottom: 6%; width: 27%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist); box-shadow: 0 30px 60px -30px rgba(15,32,45,.45); }
.work__detail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 0, var(--r, 100%) 0, calc(var(--r, 100%) - var(--sk, 0px)) 100%, 0 100%); }
.work__cap { position: absolute; z-index: 3; right: 16px; bottom: 14px; color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.work__open { position: absolute; z-index: 4; inset: 0 0 0 4%; }
.work__open:focus-visible { outline-offset: -4px; }
.work__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* Mobile: Stories */
.stories { display: none; }
@media (max-width: 899px), (max-height: 600px) {
  .work__track { height: auto; }
  .work__stage { display: none; }
  .stories { display: block; padding: 18vh 0 20px; }
}
.stories__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; }
.stories__frame { position: relative; margin-inline: var(--m); aspect-ratio: 9 / 14; max-height: 78svh; overflow: hidden; background: var(--ink); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (min-width: 600px) { .stories__frame { margin-inline: auto; width: min(calc(100% - 2 * var(--m)), calc(78svh * 9 / 14)); max-height: none; } .stories__head { max-width: calc(78svh * 9 / 14 + 2 * var(--m)); } }
.stories__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s var(--e-out), visibility 0s .5s; }
.stories__slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s var(--e-out); }
.stories__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.stories__slide.is-on img { transform: scale(1); }
.stories__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,24,.5) 0%, rgba(8,16,24,0) 22%, rgba(8,16,24,0) 46%, rgba(8,16,24,.82) 100%); }
.stories__text { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 22px; color: #fff; display: grid; gap: 10px; }
.stories__text small { font-size: 13px; color: rgba(255,255,255,.75); }
.stories__text strong { font-size: 40px; font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.stories__text p { font-size: 15.5px; color: rgba(255,255,255,.86); max-width: 30ch; }
.stories__text .btn { justify-self: start; margin-top: 8px; position: relative; z-index: 6; }
/* R12: aktive Folie liegt über den Tippflächen (z 3), lässt Tipps aber durch (auch während der Blende); nur Links und Buttons im Text fangen sie ab */
.stories__slide { pointer-events: none; } .stories__slide.is-on { z-index: 4; }
.stories__text { z-index: 6; } .stories__text :is(a, button) { pointer-events: auto; }
.stories__seg { position: absolute; z-index: 5; left: 12px; right: 12px; top: 12px; display: flex; gap: 4px; }
.stories__seg i { flex: 1; height: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.stories__seg i b { display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: #fff; }
.stories__tap { position: absolute; z-index: 3; top: 0; bottom: 0; width: 34%; }
.stories__tap--prev { left: 0; } .stories__tap--next { right: 0; }
.stories__pause { position: absolute; z-index: 5; right: 12px; top: 24px; }
.stories__pause .i-play { display: none; } .stories.is-paused .stories__pause .i-play { display: block; } .stories.is-paused .stories__pause .i-pause { display: none; }

/* Gesamtindex */
.index { padding: clamp(60px, 10vh, 140px) 0 clamp(80px, 12vh, 150px); }
.index__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.rows { border-top: 1px solid var(--line-2); }
.rows a, .rows .row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1.2fr) 90px 24px; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); transition: padding .6s var(--e-out), color .3s; }
.rows a > em, .rows .row > em { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rows a > strong, .rows .row > strong { font-size: clamp(21px, 1.7vw, 30px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.rows a > span, .rows .row > span { color: var(--muted); font-size: var(--t-s); }
.rows a > time, .rows .row > time { color: var(--muted); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.rows a > svg { width: 16px; height: 16px; color: var(--ink); opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .6s var(--e-out); }
.rows a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--e-out); }
.rows a:hover { padding-left: 12px; }
.rows a:hover::before { transform: none; }
.rows a:hover > svg { opacity: 1; transform: none; }
.rows .thumb { display: none; }
@media (max-width: 899px) {
  .rows a, .rows .row { grid-template-columns: 64px 1fr; gap: 4px 16px; padding: 14px 0; }
  .rows .thumb { display: block; grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 64px; aspect-ratio: 1; object-fit: cover; background: var(--mist); }
  .rows a > em, .rows a > svg { display: none; }
  .rows a > strong { font-size: 20px; }
  .rows a > span, .rows a > time { grid-column: 2; font-size: 14px; }
}

/* ---------- Leistungen (Register, Titelwechsel) ---------- */
.svc { position: relative; background: var(--mist); }
.svc__track { height: calc(var(--vh) * (var(--n) * .55 + .7)); }
.svc__stage { position: sticky; top: 0; height: var(--vh); min-height: 640px; overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; padding: calc(var(--hd) + 4vh) var(--m) 5vh; }
.svc__left { grid-column: 1 / 7; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.svc__left .h3 { font-size: clamp(28px, min(2.4vw, 4.4vh), 44px); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.svc__list { align-self: center; display: grid; padding-bottom: 2vh; }
.svc__list a { display: flex; align-items: baseline; gap: 18px; padding: .07em 0; white-space: nowrap; font-size: clamp(28px, min(2.75vw, 5vh), 54px); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; color: var(--ink); opacity: .16; transition: opacity .6s var(--e-out); }
.svc__list a em { font-style: normal; font-size: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .4s; min-width: 24px; }
.svc__list a.is-on { opacity: 1; }
.svc__list a.is-on em { opacity: .6; }
.svc__list a:hover { opacity: .7; }
.svc__list a.is-on:hover { opacity: 1; }
.svc__right { grid-column: 8 / 13; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 24px; min-height: 0; }
.svc__media { position: relative; overflow: hidden; background: var(--ink); min-height: 0; }
.svc__media figure { position: absolute; inset: 0; clip-path: polygon(0 0, var(--r, 0%) 0, calc(var(--r, 0%) - 26vh * var(--slash)) 100%, 0 100%); transition: --r 0s; }
.svc__media figure.is-on { z-index: 2; }
.svc__media img, .svc__media video { width: 100%; height: 100%; object-fit: cover; }
.svc__media .gfx { position: absolute; inset: 0; background: var(--grad); display: grid; align-content: end; padding: 28px; color: #fff; }
.svc__big { position: absolute; z-index: 20; left: 22px; top: 18px; color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 1px 12px rgba(0,0,0,.4); } /* über allen Bildern: die Figuren stapeln mit z-index 1 bis n */
.svc__text { display: grid; gap: 18px; }
.svc__text h3 { font-size: clamp(22px, 1.6vw, 30px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.svc__text p { color: var(--text); max-width: 46ch; }
.tags { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--muted); }
.tags span:not(:last-child)::after { content: "/"; margin: 0 10px; opacity: .45; }
.svc__mobile { display: none; }
@media (max-height: 600px) {
  .svc__track { height: auto; }
  .svc__stage { display: none; }
  .svc__mobile { display: block; padding-top: 90px; padding-bottom: 70px; }
}
@media (max-width: 899px) {
  html.rm .svc__track { height: auto; }
  html.rm .svc__stage { display: none; }
  html.rm .svc__mobile { display: block; padding-top: 90px; padding-bottom: 70px; }
}
.acc { border-top: 1px solid var(--line-2); margin-top: 30px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; align-items: baseline; gap: 14px; padding: 18px 0; font-size: 26px; font-weight: 500; letter-spacing: -.025em; color: var(--ink); cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary em { font-style: normal; font-size: 13px; color: var(--muted); min-width: 22px; letter-spacing: 0; }
.acc summary::after { content: ""; margin-left: auto; width: 12px; height: 12px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-4px); transition: transform .4s var(--e-out); flex: none; }
.acc details[open] summary::after { transform: rotate(-135deg); }
.acc__body { display: grid; gap: 16px; padding: 0 0 26px; }
.acc__body img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

/* ---------- Real Estate (Verlaufskapitel) ---------- */
.re { position: relative; color: #fff; isolation: isolate; }
.living { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--grad); }
.living::before, .living::after { content: ""; position: absolute; border-radius: 50%; will-change: transform; } /* R12: ohne filter: blur(60px); die Radialverläufe laufen schon weich aus, optisch gleich, aber rund dreimal weniger Rechenzeit je Bild */
.living::before { width: 60vmax; height: 60vmax; right: -18vmax; bottom: -26vmax; background: radial-gradient(circle, rgba(241,195,152,.62), rgba(185,135,95,0) 66%); animation: drift 16s ease-in-out infinite alternate; }
.living::after { width: 54vmax; height: 54vmax; left: -16vmax; top: -22vmax; background: radial-gradient(circle, rgba(10,22,32,.9), rgba(10,22,32,0) 68%); animation: drift 21s ease-in-out infinite alternate-reverse; }
@keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-6vmax, -4vmax, 0) scale(1.12); } }
.grain { position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html.rm .living::before, html.rm .living::after, html.rm .menu__light { animation: none; }
.re__track { height: calc(var(--vh) * 3.4); }
.re__stage { position: sticky; top: 0; height: var(--vh); min-height: 640px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); padding: calc(var(--hd) + 4vh) var(--m) clamp(56px, 9vh, 104px); } /* R12: Button und Hinweis unten nicht mehr an der Sektionskante */
.re__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.re__head .h2 { grid-column: 1 / 8; color: #fff; }
.re__head p { grid-column: 9 / 13; color: rgba(255,255,255,.82); }
.re__rail { position: relative; align-self: center; display: flex; gap: 22px; transform: translateX(var(--rx, 0)); will-change: transform; }
.re__card { flex: none; width: clamp(220px, min(25vw, 31vh), 420px); /* R12: Kartenbreite folgt auch der Höhe, damit unten Luft unter Button und Hinweis bleibt */ display: grid; gap: 18px; opacity: var(--o, .35); transition: opacity .5s var(--e-out); }
.re__card.is-on { --o: 1; }
.re__card header { display: flex; gap: 14px; align-items: baseline; }
.re__card header em { font-style: normal; font-size: 14px; color: rgba(255,255,255,.6); }
.re__card header strong { font-size: clamp(22px, 1.7vw, 30px); font-weight: 500; letter-spacing: -.02em; }
.re__card p { color: rgba(255,255,255,.8); font-size: 15.5px; max-width: 32ch; }
.re__line { position: relative; height: 1px; background: rgba(255,255,255,.22); margin-top: 3vh; }
.re__line i { position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--rp, 0) * 100%); background: #fff; }
.re__foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding-top: 3vh; }
.re__note { font-size: 13px; color: rgba(255,255,255,.55); }
/* schematische Artefakte (keine Kundenarbeiten) */
.art { position: relative; aspect-ratio: 4 / 3; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); overflow: hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.art--id { display: grid; place-items: center; }
.art--id .mono { font-size: clamp(30px, 2.6vw, 44px); font-weight: 500; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; }
.art--id .mono svg { width: 22px; height: 22px; color: var(--peak); }
.art--id .sw { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; }
.art--id .sw i { width: 22px; height: 22px; }
.art--expo { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.art--expo .pg { background: rgba(255,255,255,.92); padding: 10px; display: grid; gap: 6px; align-content: start; }
.art--expo .pg b { display: block; height: 40%; background: linear-gradient(135deg, #2d4353, #b9875f); }
.art--expo .pg i { display: block; height: 4px; background: #cfd5da; }
.art--expo .pg i:nth-child(3) { width: 70%; }
.art--expo .plan { background: rgba(255,255,255,.92); position: relative; }
.art--expo .plan::before { content: ""; position: absolute; inset: 14px; border: 2px solid #2d4353; }
.art--expo .plan::after { content: ""; position: absolute; left: 14px; right: 40%; top: 50%; bottom: 14px; border-top: 2px solid #2d4353; border-right: 2px solid #2d4353; }
.art--web { padding: 12px; }
.art--web .bar { height: 10px; display: flex; gap: 4px; margin-bottom: 10px; }
.art--web .bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
.art--web .scr { height: calc(100% - 20px); background: #fff; display: grid; grid-template-rows: 55% 1fr; }
.art--web .scr b { background: linear-gradient(118deg, #0f202d, #2d4353 55%, #b9875f); position: relative; }
.art--web .scr b::after { content: ""; position: absolute; left: 10%; bottom: 18%; width: 40%; height: 8px; background: #fff; box-shadow: 0 -14px 0 -1px rgba(255,255,255,.9); }
.art--web .scr span { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
.art--web .scr span i { background: #e7eaec; }
.art--ad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
.art--ad i { position: relative; background: linear-gradient(160deg, #2d4353, #0f202d); }
.art--ad i:nth-child(2) { background: linear-gradient(160deg, #b9875f, #6f6157); transform: translateY(-8px); }
.art--ad i::after { content: ""; position: absolute; left: 10%; right: 30%; bottom: 12%; height: 6px; background: rgba(255,255,255,.85); }
.art--lead { padding: 14px; display: grid; gap: 8px; align-content: start; }
.art--lead div { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; background: rgba(255,255,255,.92); padding: 8px 10px; color: var(--ink); font-size: 12px; }
.art--lead div i { width: 22px; height: 22px; border-radius: 50%; background: #d7dde1; }
.art--lead div b { font-weight: 500; }
.art--lead div span { font-size: 11px; padding: 2px 6px; background: #eef1f3; }
.art--lead div span.ok { background: #8c6242; color: #fff; } /* X-06: Weiß auf dunklem Kupfer 5,3:1, auch in dunklen Flächen */
@media (max-height: 600px) {
  .re__track { height: auto; }
  .re__stage { position: relative; height: auto; display: block; padding: 90px var(--m) 96px; }
  .re__head { display: block; }
  .re__head p { margin-top: 20px; }
  .re__rail { transform: none !important; flex-direction: column; gap: 40px; margin-top: 50px; }
  .re__card { width: auto; --o: 1; }
  .re__line { display: none; }
  .re__foot { margin-top: 40px; }
}
@media (max-width: 899px) {
  html.rm .re__track { height: auto; }
  html.rm .re__stage { position: relative; height: auto; display: block; padding: 90px var(--m) 96px; }
  html.rm .re__head { display: block; }
  html.rm .re__head p { margin-top: 20px; }
  html.rm .re__rail { transform: none !important; flex-direction: column; gap: 40px; margin-top: 50px; }
  html.rm .re__card { width: auto; --o: 1; }
  html.rm .re__line { display: none; }
  html.rm .re__foot { margin-top: 40px; }
}

/* ---------- Stimmen ---------- */
.voices { padding: clamp(100px, 16vh, 200px) 0; }
.voices__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.voices__side { grid-column: 1 / 4; display: grid; align-content: space-between; gap: 30px; }
.voices__pick { display: grid; gap: 4px; }
.voices__pick button { text-align: left; display: flex; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--muted); transition: color .3s; }
.voices__pick button em { font-style: normal; font-variant-numeric: tabular-nums; }
.voices__pick button[aria-selected="true"] { color: var(--ink); font-weight: 500; }
/* Auswahl: kleiner Slash in Original-Geometrie, Platz ist immer reserviert (kein Springen der Namen) */
.voices__pick button em { display: inline-flex; align-items: center; gap: 9px; font-weight: 400; }
.voices__pick button em::after { content: ""; display: inline-block; width: 11px; height: 11px; background: var(--grad); clip-path: polygon(55.49% 0, 55.49% 0, 0 100%, 0 100%); transition: clip-path .6s var(--e-out); }
.voices__pick button[aria-selected="true"] em::after { clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
html.rm .voices__pick button em::after { transition: none; }
.voices__stage { grid-column: 4 / 13; position: relative; min-height: 34vh; }
.quote { position: absolute; inset: 0 auto auto 0; visibility: hidden; }
.quote.is-on { position: relative; visibility: visible; }
.quote blockquote { font-size: clamp(28px, 2.9vw, 54px); font-weight: 500; line-height: 1.12; letter-spacing: -.028em; color: var(--ink); text-wrap: pretty; }
.quote blockquote .w { display: inline-block; opacity: .1; transform: translateY(.25em); transition: opacity .7s var(--e-out), transform .9s var(--e-out); }
.quote.is-shown blockquote .w { opacity: 1; transform: none; }
.quote figcaption { margin-top: 30px; display: flex; gap: 14px; align-items: center; font-size: 15px; color: var(--muted); }
.quote figcaption b { color: var(--ink); font-weight: 500; }
.quote figcaption a { margin-left: auto; }
@media (max-width: 899px) {
  .voices__side, .voices__stage { grid-column: 1 / -1; }
  .voices__pick { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--m) * -1); padding-right: var(--m); }
  .quote blockquote { font-size: clamp(24px, 6.6vw, 36px); }
  .voices__pick button { white-space: nowrap; gap: 10px; }
  .voices__pick button em { gap: 0; }
  .voices__pick button em::after { width: 0; margin-left: 0; transition: clip-path .6s var(--e-out), width .5s var(--e-out), margin .5s var(--e-out); }
  .voices__pick button[aria-selected="true"] em::after { width: 11px; margin-left: 9px; }
  .quote figcaption { flex-wrap: wrap; }
  .quote figcaption a { margin-left: 0; }
}

/* ---------- Journal ---------- */
.journal { padding: 0 0 clamp(100px, 16vh, 200px); }
.journal .rows a { grid-template-columns: 120px minmax(0, 2fr) minmax(0, .8fr) 80px 24px; }
@media (max-width: 899px) { .journal .rows a { grid-template-columns: 96px 1fr; } .journal .rows .thumb { width: 96px; aspect-ratio: 4 / 3; } }

/* ---------- Kontakt-Abschluss ---------- */
.close { position: relative; padding: clamp(100px, 18vh, 220px) 0 clamp(90px, 14vh, 170px); border-top: 1px solid var(--line); overflow: hidden; }
.close__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.close__title { grid-column: 1 / 9; font-size: clamp(54px, 8.4vw, 168px); font-weight: 500; letter-spacing: -.048em; line-height: .9; color: var(--ink); }
.close__title .ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.1em; }
.close__title .ln span { display: block; transform: translateY(var(--cy, 0)); }
/* Abschluss-Slash: exakt die Original-Geometrie (832.418/1500), Verlauf statt Fläche */
.close__mark { position: relative; display: inline-block; width: .62em; height: .62em; margin-left: .06em; vertical-align: -.02em; background: linear-gradient(118deg, #0f202d 0%, #2d4353 40%, #b9875f 75%, #f1c398 100%); background-size: 220% 220%; background-position: 0% 0%; clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); transition: background-position 1.6s var(--e-out); }
.close__mark svg { display: none; }
html.js:not(.rm) .close__title .close__mark { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); transition: clip-path 1.1s var(--e-out) .45s, background-position 1.6s var(--e-out); }
html.js:not(.rm) .close__title.is-in .close__mark { clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
.close:hover .close__mark { background-position: 100% 100%; }
.close__side { grid-column: 9 / 13; display: grid; gap: 22px; padding-bottom: 1.4vw; }
.close__side a.big { font-size: clamp(19px, 1.5vw, 26px); font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
@media (max-width: 899px) { .close__title, .close__side { grid-column: 1 / -1; } }

/* ---------- Footer (Vorhang) ---------- */
.ft { position: relative; z-index: 1; color: #fff; isolation: isolate; overflow: hidden; }
.ft__in { position: relative; padding: clamp(70px, 10vh, 120px) var(--m) 28px; display: grid; gap: clamp(50px, 9vh, 110px); }
.ft__cols { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; font-size: 15px; }
.ft__cols h2, .ft__cols h3 { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.ft__cols li a, .ft__cols li button { display: inline-block; padding: 3px 0; color: rgba(255,255,255,.9); transition: color .3s; text-align: left; }
.ft__cols li a:hover, .ft__cols li button:hover { color: var(--peak); }
.ft__claim { font-size: clamp(22px, 1.8vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; max-width: 16ch; }
.ft__wm { width: min(100%, 980px); margin-inline: auto; color: #fff; transform: translateY(var(--wy, 0)); }
.ft__wm svg { width: 100%; height: auto; }
.ft__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.55); }
.ft__panels { display: flex; gap: 18px; }
.ft__panels a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); transition: color .3s; }
.ft__panels a:hover { color: #fff; }
@media (max-width: 899px) { .ft__cols { grid-template-columns: 1fr 1fr; } .ft__cols > :first-child { grid-column: 1 / -1; } }
@media (min-width: 900px) and (min-height: 700px) {
  html.js:not(.rm) main { position: relative; z-index: 2; background: var(--paper); margin-bottom: var(--fth, 0px); box-shadow: 0 30px 60px -20px rgba(15,32,45,.35); }
  html.js:not(.rm) .ft { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; }
  html.js:not(.rm) .ft.is-covered .living { background: var(--grad); } html.js:not(.rm) .ft.is-covered .living::before, html.js:not(.rm) .ft.is-covered .living::after { display: none; } /* R12: verdeckt keine Blur-Ebenen */
  /* Vorhang-Kante: dunkle Abschnitte (Naechste Leistung/Projekt) heben sich vom gleichfarbigen Footer ab */
  html.js:not(.rm) .ft::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(6,14,20,.55), rgba(6,14,20,0)); }
  html.js:not(.rm) main > :last-child.next { box-shadow: inset 0 -1px 0 rgba(255,255,255,.16); }
  /* K03 (R11): keine einzelnen Links, die unter dem Vorhang hervorschauen; Spalten folgen dem Aufdecken ab rund 70 % */
  html.js:not(.rm) .ft__cols { opacity: calc((var(--ftq, 1) - .68) / .26); transform: translateY(calc((1 - min(1, var(--ftq, 1) / .94)) * 30px)); }
  /* Letzter Block vor dem Footer (Nächstes Projekt/Leistung) in Tinte: der Kupferverlauf des Footers setzt sich klar ab */
  html.js:not(.rm) main > :last-child.next .living { background: linear-gradient(118deg, #0b1823 0%, #0f202d 55%, #1c2f3d 100%); }
  html.js:not(.rm) main > :last-child.next .living::before { opacity: .35; }
}

/* ---------- Reveal ---------- */
html.js:not(.rm) [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--e-out), transform 1.2s var(--e-out); }
html.js:not(.rm) [data-rv].is-in { opacity: 1; transform: none; }
html.js:not(.rm) [data-rv="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--e-out); }
html.js:not(.rm) [data-rv="clip"].is-in { clip-path: inset(0 0 0 0); }
html.js:not(.rm) .split .ln > span { transform: translateY(105%); transition: transform 1.1s var(--e-out); }
html.js:not(.rm) .split.is-in .ln > span { transform: none; }
html.js:not(.rm) .split.is-in .ln:nth-child(2) > span { transition-delay: .08s; }
html.js:not(.rm) .split.is-in .ln:nth-child(3) > span { transition-delay: .16s; }
/* B8 (R11): Die Seiten-H1 ist das LCP-Element. Sie wird sofort voll gemalt (keine Deckkraft 0, keine Maske);
   die Einblendung ist nur noch ein kurzes Nachrücken per transform auf bereits sichtbarem Text. */
html.js:not(.rm) h1.split[data-rv] { opacity: 1; transform: none; transition: none; }
/* Auch der Einleitungstext im ersten Bildschirm (oft größer als die H1 und damit LCP) ist sofort gemalt, nur transform bewegt */
html.js:not(.rm) :is(.ph, .svc-hero, .art-head) [data-rv]:not(.split) { opacity: 1; transform: translateY(14px); transition: transform .9s var(--e-out); }
html.js:not(.rm) :is(.ph, .svc-hero, .art-head) [data-rv]:not(.split).is-in { transform: none; }
html.js:not(.rm) h1.split .ln { overflow: visible; }
html.js:not(.rm) h1.split .ln > span { transform: translateY(.22em); transition: transform .8s var(--e-out); }
html.js:not(.rm) h1.split.is-in .ln > span { transform: none; }

/* ---------- Unterseiten: Seitenkopf ---------- */
.ph { padding: calc(var(--hd) + clamp(56px, 11vh, 140px)) 0 clamp(50px, 8vh, 100px); }
.ph__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.ph__title { grid-column: 1 / 10; }
.ph__title .h1 .ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.ph__aside { grid-column: 10 / 13; display: grid; gap: 18px; color: var(--muted); }
.ph .label { margin-bottom: 26px; }
.crumb { display: flex; gap: 10px; font-size: 14px; color: var(--muted); margin-bottom: 26px; }
.crumb a:hover { color: var(--ink); }
.crumb span::before { content: "/"; margin-right: 10px; opacity: .5; }
/* Projektseite in Vorbereitung: Steckbrief in der Seitenspalte (die eigene Rasterspalte der Liste gilt hier nicht) */
.ph__aside .case-info__dl { grid-column: auto; }
@media (min-width: 900px) { .ph__grid:has(.ph__aside .case-info__dl) .ph__title { grid-column: 1 / 9; } .ph__aside:has(.case-info__dl) { grid-column: 9 / 13; } }
@media (max-width: 899px) { .ph__title, .ph__aside { grid-column: 1 / -1; } }

/* Filter */
.filters { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 28px; font-size: 15px; align-items: center; }
.filters button { position: relative; padding: 6px 0; color: var(--muted); transition: color .3s; }
.filters button sup { font-size: 11px; margin-left: 3px; font-variant-numeric: tabular-nums; }
.filters button[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.filters button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); }
.filters .views { margin-left: auto; display: flex; gap: 14px; }

/* Projektgitter */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(36px, 5vw, 80px) 24px; }
.card { grid-column: span 6; display: grid; gap: 16px; align-content: start; }
.card:nth-child(4n + 2) { margin-top: clamp(40px, 9vw, 160px); }
.card:nth-child(4n + 3) { grid-column: span 5; }
.card:nth-child(4n + 0) { grid-column: 8 / span 5; }
.card__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); }
.card__img img { width: 100%; height: 100%; object-fit: cover; clip-path: var(--gclip, none); transform: scale(calc(var(--gs, 1) * var(--hv, 1))); transition: transform .6s var(--e-out); }
.card:hover .card__img { --hv: 1.04; }
.card__img[data-grow] { background: transparent; }
.card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(241,195,152,.4) 50%, transparent 65%); background-size: 300% 100%; background-position: 130% 0; mix-blend-mode: soft-light; transition: background-position 1.4s var(--e-out); }
.card:hover .card__img::after { background-position: -30% 0; }
.card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: baseline; }
.card__meta strong { font-size: clamp(22px, 1.8vw, 32px); font-weight: 500; letter-spacing: -.025em; color: var(--ink); }
.card__meta span { color: var(--muted); font-size: 14.5px; white-space: nowrap; }
.card__pending { display: grid; place-items: center; height: 100%; background: var(--grad-soft); color: rgba(255,255,255,.9); font-size: 15px; text-align: center; padding: 20px; }
.grid[hidden], .rows[hidden] { display: none; }
.is-filtered-out { display: none !important; }
@media (max-width: 899px) { .card, .card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; } }

/* ---------- Case Study ---------- */
.case-hero { position: relative; }
.case-hero__track { height: calc(var(--vh) * 1.9); }
.case-hero__stage { position: sticky; top: 0; height: var(--vh); min-height: 560px; overflow: hidden; }
.case-hero__title { position: absolute; left: var(--m); right: var(--m); top: calc(var(--hd) + 7vh); z-index: 1; }
.case-hero__title .h1 { font-size: clamp(52px, 9vw, 170px); line-height: .9; letter-spacing: -.045em; }
.case-hero__title .label { margin-bottom: 22px; }
.case-hero__win { position: absolute; z-index: 2; overflow: hidden; background: var(--mist); inset: 0; clip-path: var(--wclip, polygon(42% 52%, 96% 52%, 96% 96%, 42% 96%)); will-change: clip-path; }
.case-hero__win img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--ws, 1)); transform-origin: 70% 60%; will-change: transform; }
.case-hero__title { transform: translate3d(0, var(--ty, 0), 0); opacity: var(--to, 1); }
.case-hero__cap { position: absolute; z-index: 3; left: var(--m); bottom: 4vh; display: flex; gap: 28px; flex-wrap: wrap; color: #fff; font-size: 14px; opacity: var(--co, 0); }
html.rm .case-hero__cap, html:not(.js) .case-hero__cap { opacity: 1; }
.case-hero__cap b { font-weight: 500; }
.case-hero__cap { text-shadow: 0 1px 12px rgba(15,32,45,.35); }
.case-hero__win::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(15,32,45,.62), rgba(15,32,45,0)); opacity: var(--co, 0); }
html.rm .case-hero__win::after, html:not(.js) .case-hero__win::after { opacity: 1; }
html.rm .case-hero__track, html:not(.js) .case-hero__track, .is-missing .case-hero__track { height: auto; }
/* Projekt- oder Beitragsadresse ohne Inhalt: kein leerer Bühnenraum, kein leeres Inhaltsverzeichnis */
.is-missing .case-hero__stage { position: relative; height: auto; min-height: 0; display: grid; padding: calc(var(--hd) + 7vh) var(--m) 0; }
.is-missing .case-hero__title { position: static; transform: none; opacity: 1; }
.is-missing .case-hero__stage { overflow: visible; padding-bottom: 28px; }
.is-missing .case-info { padding-top: 32px; }
.is-missing .case-info__lead, .is-missing .case-info__dl { display: none; }
.is-missing .case-info__body { grid-column: 1 / -1; }
.is-missing .art-toc, .is-missing .art-toc-m { visibility: hidden; }
html.rm .case-hero__stage, html:not(.js) .case-hero__stage { position: relative; height: auto; display: grid; padding: calc(var(--hd) + 7vh) var(--m) 0; gap: 40px; }
html.rm .case-hero__title, html:not(.js) .case-hero__title { position: static; }
html.rm .case-hero__win, html:not(.js) .case-hero__win { position: relative; inset: auto; width: 100%; height: 70vh; clip-path: none; }
.case-info { padding: clamp(80px, 12vh, 150px) 0; }
.case-info__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px 24px; }
.case-info__lead { grid-column: 1 / 8; font-size: clamp(28px, 2.7vw, 50px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.case-info__dl { grid-column: 9 / 13; display: grid; grid-template-columns: auto 1fr; gap: 12px 26px; font-size: 15px; align-content: start; border-top: 1px solid var(--line-2); padding-top: 18px; }
.case-info__dl dt { color: var(--muted); }
.case-info__dl dd { color: var(--ink); }
.case-info__body { grid-column: 5 / 12; font-size: clamp(var(--t-m), 1.3vw, 1.375rem); line-height: 1.55; color: var(--text); }
.case-info__note { grid-column: 5 / 12; font-size: 13.5px; color: var(--muted); }
@media (max-width: 899px) { .case-info__lead, .case-info__dl, .case-info__body, .case-info__note { grid-column: 1 / -1; } }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-bottom: clamp(80px, 12vh, 150px); }
.gallery figure { display: grid; gap: 12px; }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; background: var(--mist); transform: scale(var(--gs, 1)); }
.gallery__img { overflow: hidden; clip-path: var(--gclip, none); }
.gallery figcaption { font-size: 13.5px; color: var(--muted); }
.gallery .g1 { grid-column: 1 / 13; } .gallery .g1 img { aspect-ratio: 16 / 9; }
.gallery .g2 { grid-column: 1 / 7; } .gallery .g2 img { aspect-ratio: 4 / 5; }
.gallery .g3 { grid-column: 8 / 13; align-self: end; } .gallery .g3 img { aspect-ratio: 4 / 5; }
.gallery .g4 { grid-column: 3 / 11; } .gallery .g4 img { aspect-ratio: 3 / 2; }
/* Admin-Projekte: Bilder im eigenen Format, nie mehr als 125 % hochskaliert */
.gallery .gx { grid-column: 2 / 12; justify-self: center; width: 100%; max-width: var(--nw, none); }
.gallery .gx img { height: auto; aspect-ratio: auto; }
.gallery .gx--wide { grid-column: 1 / 13; }
.gallery .gx--mid { grid-column: 3 / 11; }
.gallery .gx--tall { grid-column: 4 / 10; }
.gallery .gx--tall.gx--l { grid-column: 1 / 7; }
.gallery .gx--tall.gx--r { grid-column: 7 / 13; }
@media (max-width: 899px) { .gallery figure { grid-column: 1 / -1 !important; } }
.case-quote { padding: clamp(80px, 14vh, 180px) 0; background: var(--mist); }
.case-quote blockquote { font-size: clamp(28px, 3vw, 56px); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; color: var(--ink); max-width: 28ch; text-wrap: pretty; }
.case-quote figcaption { margin-top: 30px; color: var(--muted); }
.case-quote figcaption b { color: var(--ink); font-weight: 500; }
.next { position: relative; display: block; overflow: hidden; color: #fff; isolation: isolate; }
.next__in { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: clamp(80px, 14vh, 170px) var(--m); align-items: end; }
.next__in .label { grid-column: 1 / -1; color: rgba(255,255,255,.7); }
.next__name { grid-column: 1 / 9; font-size: clamp(48px, 8vw, 150px); font-weight: 500; letter-spacing: -.045em; line-height: .92; }
.next__img { grid-column: 9 / 13; aspect-ratio: 4 / 3; overflow: hidden; }
.next__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out); }
.next:hover .next__img img { transform: scale(1.05); }
@media (max-width: 899px) { .next__name, .next__img { grid-column: 1 / -1; } }

/* ---------- Leistungsseiten ---------- */
.reg { border-top: 1px solid var(--line-2); }
.reg a { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1.4fr) minmax(0, 1fr) 24px; gap: 24px; padding: clamp(24px, 3.4vh, 40px) 0; border-bottom: 1px solid var(--line); align-items: center; transition: padding .6s var(--e-out); }
.reg a > em { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.reg a > strong { font-size: clamp(30px, 3.6vw, 68px); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; color: var(--ink); overflow: hidden; display: grid; padding-bottom: .06em; }
.reg a > strong span { grid-area: 1 / 1; display: block; transition: transform .7s var(--e-out); }
.reg a > strong span + span { color: var(--copper-text); transform: translateY(110%); }
.reg a:hover > strong span { transform: translateY(-110%); }
.reg a:hover > strong span + span { transform: none; }
.reg a > p { color: var(--muted); font-size: var(--t-s); max-width: 40ch; }
.reg a > svg { width: 18px; height: 18px; color: var(--ink); transition: transform .5s var(--e-out); }
.reg a:hover > svg { transform: translateX(6px); }
.reg a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--e-out); }
.reg a:hover::before { transform: none; }
@media (max-width: 899px) { .reg a { grid-template-columns: 34px 1fr; gap: 10px 14px; } .reg a > p { grid-column: 2; } .reg a > svg { display: none; } }
.svc-hero { position: relative; color: #fff; isolation: isolate; padding: calc(var(--hd) + clamp(56px, 12vh, 150px)) 0 clamp(60px, 10vh, 120px); overflow: hidden; }
.svc-hero .h1 { color: #fff; max-width: 14ch; }
.svc-hero .crumb { color: rgba(255,255,255,.66); }
.svc-hero .crumb a:hover { color: #fff; }
.svc-hero__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.svc-hero__grid > div:first-child { grid-column: 1 / 9; }
.svc-hero__grid > div:last-child { grid-column: 9 / 13; color: rgba(255,255,255,.84); display: grid; gap: 22px; }
@media (max-width: 899px) { .svc-hero__grid > div { grid-column: 1 / -1 !important; } }
.blocks { padding: clamp(80px, 12vh, 150px) 0; display: grid; gap: clamp(70px, 10vh, 130px); }
.split2 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.split2 > :first-child { grid-column: 1 / 5; }
.split2 > :last-child { grid-column: 6 / 13; }
@media (max-width: 899px) { .split2 > * { grid-column: 1 / -1 !important; } }
.taglist { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); }
.taglist li { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(19px, 1.4vw, 24px); font-weight: 500; color: var(--ink); letter-spacing: -.015em; display: flex; gap: 14px; align-items: baseline; }
.taglist li em { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 400; min-width: 22px; }
.steps { display: grid; grid-template-columns: repeat(var(--c, 3), 1fr); gap: 24px; counter-reset: s; }
.steps li { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.steps li em { font-style: normal; font-size: 14px; color: var(--muted); }
.steps li strong { font-size: clamp(20px, 1.5vw, 26px); font-weight: 500; color: var(--ink); letter-spacing: -.015em; }
.steps li p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 899px) { .steps { grid-template-columns: 1fr; } .taglist { grid-template-columns: 1fr; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: clamp(19px, 1.4vw, 24px); font-weight: 500; color: var(--ink); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; transition: transform .4s var(--e-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--muted); max-width: 64ch; }
.faq { border-top: 1px solid var(--line-2); }
.note { font-size: 13.5px; color: var(--muted); border-left: 2px solid var(--copper); padding-left: 14px; }
.on-dark .note { color: rgba(255,255,255,.66); }
/* B2 (R11): interne Notizen nur in der Vorschau (build.mjs NOTE, bei LIVE=true nicht gerendert), klar als Prototyp markiert */
.note--proto { display: block; max-width: 72ch; padding: 10px 14px 10px 14px; border: 1px dashed var(--copper); border-left-width: 3px; background: repeating-linear-gradient(-61deg, rgba(185,135,95,.06) 0 8px, transparent 8px 16px); font-size: var(--t-xs); color: var(--ink); }
.note--proto::before { content: "Vorschau-Notiz, nicht live"; display: block; margin-bottom: 4px; font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8a5f3d; }
/* R12: Notiz in zwei Teilen, Stand und was vor dem Livegang fehlt */
.note--proto .note__open { display: block; margin-top: 6px; }
.note--proto .note__open b { font-weight: 500; color: #8a5f3d; }
.note--proto .note__open i { font-style: normal; color: var(--muted); }

/* ---------- Artikel ---------- */
.art-head { padding: calc(var(--hd) + clamp(56px, 10vh, 120px)) 0 40px; }
.art-head .h1 { font-size: clamp(38px, 4.6vw, 86px); max-width: 20ch; }
.art-head__meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; font-size: 14.5px; color: var(--muted); }
.art-head__meta b { color: var(--ink); font-weight: 500; }
.progress { position: fixed; z-index: 61; left: 0; top: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--grad); }


/* ---------- Kontaktseite ---------- */
.ct { padding-bottom: clamp(80px, 12vh, 150px); }
.ct__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 50px 24px; }
.ct__form { grid-column: 1 / 8; }
.ct__side { grid-column: 9 / 13; display: grid; gap: 34px; align-content: start; }
.ct__side h3 { font-size: 13.5px; font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.ct__side p, .ct__side a { color: var(--ink); }
.ct__side .person { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ct__side .person span { color: var(--muted); font-size: 13.5px; }
@media (max-width: 899px) { .ct__form, .ct__side { grid-column: 1 / -1; } }
.modes { display: flex; gap: 0; margin-bottom: 34px; border-bottom: 1px solid var(--line-2); }
.modes button { position: relative; padding: 14px 0; margin-right: 30px; font-size: 16px; color: var(--muted); }
.modes button[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.modes button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.demo { display: flex; gap: 12px; align-items: start; padding: 14px 16px; background: var(--mist); font-size: 14px; color: var(--text); margin-bottom: 30px; }
.demo b { font-weight: 500; color: var(--ink); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.fields .full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field > span { font-size: .875rem; font-weight: 500; color: var(--ink); }
.field > span small { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: 10px 0 12px; font-size: var(--t-m); color: var(--ink); border-radius: 0; transition: border-color .3s; appearance: none; }
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.field .err { font-size: var(--t-xs); color: #a3372a; min-height: 0; }
/* R13: Senden nicht möglich (kein Server, Netzfehler): Hinweis unter den Formular-Buttons, Formular bleibt ausgefüllt */
.send-err { margin: 14px 0 0; max-width: 60ch; padding: 12px 14px; border-left: 2px solid #a3372a; background: rgba(163,55,42,.06); color: var(--ink); font-size: var(--t-s, 15px); line-height: 1.5; }
.send-err[hidden] { display: none; }
.on-dark .send-err, .apply-ov .send-err { color: inherit; }
.field[data-invalid] input, .field[data-invalid] textarea { border-bottom-color: #a3372a; }
.check { display: flex; gap: 12px; align-items: start; font-size: 14.5px; color: var(--text); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: inline-block; padding: 11px 16px; border: 1px solid var(--line-2); font-size: 15px; color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.choice input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--copper-text); outline-offset: 2px; }
.wiz__bar { display: flex; gap: 6px; margin-bottom: 26px; }
.wiz__bar i { flex: 1; height: 2px; background: var(--line-2); }
.wiz__bar i.is-on { background: var(--ink); }
.wiz__step { display: grid; gap: 28px; }
.wiz__step[hidden] { display: none; }
.wiz__step h3 { font-size: clamp(24px, 2vw, 34px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.form-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.sent { padding: 34px; background: var(--grad); color: #fff; display: grid; gap: 14px; }
.sent h3 { font-size: clamp(26px, 2.2vw, 38px); font-weight: 500; letter-spacing: -.02em; }
.sent dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14.5px; color: rgba(255,255,255,.85); }
@media (max-width: 599px) { .fields { grid-template-columns: 1fr; } }

/* ---------- Über uns / Karriere / Recht ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.values li { padding: 26px 24px 30px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.values li strong { font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.values li p { font-size: 15px; color: var(--muted); }
@media (max-width: 1099px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .values { grid-template-columns: 1fr; } }
.legal { padding-bottom: clamp(80px, 12vh, 150px); }
.legal .prose { max-width: 70ch; }
.legal h2 { font-size: 22px; font-weight: 500; color: var(--ink); margin: 2em 0 .6em; }
.legal p { color: var(--text); }

/* ---------- Kapitelanzeige (Report) ---------- */
.chap { display: none !important; position: fixed; z-index: 50; left: var(--m); bottom: 20px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--e-out), color .4s; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.chap.is-on { opacity: 1; transform: none; }
.chap i { position: relative; width: 60px; height: 1px; background: rgba(255,255,255,.35); }
.chap i b { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cp, 0) * 100%); background: #fff; }
.chap em { font-style: normal; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .chap { display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { html:not(.motion-on) *, html:not(.motion-on) *::before, html:not(.motion-on) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.rm [data-rv], html.rm .split .ln > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* ---------- Aubrey Motion: generative Slash-Komposition ---------- */
.motion-art { position: relative; overflow: hidden; background: #0b1823; width: 100%; height: 100%; min-height: 220px; }
.motion-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.motion-art__tag { position: absolute; left: 22px; bottom: 18px; display: grid; gap: 2px; color: #fff; font-size: clamp(18px, 1.5vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.motion-art__tag small { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,.6); }
.svc__media .gfx--motion { padding: 0; }
.acc__body .motion-art { aspect-ratio: 16 / 10; height: auto; margin-bottom: 18px; }

/* ---------- Formulare: Ergänzungen ---------- */
.check.is-bad { color: #a3372a; }
.field[data-invalid] select { border-bottom-color: #a3372a; }
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 52%, calc(100% - 6px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; }

/* ---------- Karriere ---------- */
.jobs a { grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, .8fr) auto; }
.jobs a > svg { display: none; }
.jobs__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--ink) !important; font-weight: 500; font-size: 14.5px !important; }
.jobs__cta svg { width: 14px; height: 14px; transition: transform .5s var(--e-out); }
.jobs a:hover .jobs__cta svg { transform: translateX(4px); }
.apply { position: relative; color: #fff; isolation: isolate; overflow: hidden; padding-block: clamp(90px, 14vh, 170px); scroll-margin-top: 0; }
.apply__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 50px 24px; align-items: start; }
.apply__intro { grid-column: 1 / 6; position: sticky; top: calc(var(--hd) + 40px); display: grid; gap: 26px; }
.apply__steps { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.22); margin-top: 10px; }
.apply__steps li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.88); font-size: 16px; }
.apply__steps em { font-style: normal; font-size: 13px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; padding-top: 2px; }
.apply__note { color: rgba(255,255,255,.7); font-size: 14.5px; max-width: 40ch; }
.apply__card { grid-column: 7 / 13; background: var(--paper); color: var(--text); padding: clamp(24px, 3vw, 48px); box-shadow: 0 40px 80px -40px rgba(8,16,24,.6); }
.apply__card .sent { margin: calc(clamp(24px, 3vw, 48px) * -1); }
.drop__zone { position: relative; display: block; padding: 22px 20px; border: 1px dashed var(--line-2); background: var(--mist); cursor: pointer; font-size: 15.5px; color: var(--text); transition: border-color .3s, background .3s; }
.drop__zone b { font-weight: 500; color: var(--ink); }
.drop__zone u { text-underline-offset: 3px; }
.drop__zone small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.drop__zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop__zone:hover, .drop__zone.is-over { border-color: var(--ink); background: #fff; }
.drop__zone:focus-within { border-color: var(--ink); }
.drop__zone:has(input:focus-visible) { outline: 2px solid var(--copper-text); outline-offset: 2px; }
html.ptr .drop__zone:has(input:focus-visible) { outline: none; }
.drop__zone--sm { padding: 14px 18px; }
.drop__list { display: grid; gap: 6px; }
.drop__list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.drop__list li b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.drop__list li span { color: var(--muted); flex: none; }
.field[data-invalid] .drop__zone { border-color: #a3372a; }
@media (max-width: 899px) {
  .apply__intro, .apply__card { grid-column: 1 / -1; position: static; }
  .jobs a { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; }
  .jobs a > span { grid-column: 2; }
  .jobs__cta { margin-top: 6px; }
  .fields { grid-template-columns: 1fr; }
}

/* ---------- Aufklappen mit Bewegung (FAQ, Akkordeon) ---------- */
.faq details, .acc details { overflow: hidden; }
.faq details > p, .acc__body { transform-origin: top; }
.faq summary, .acc summary { transition: color .3s; }
.faq summary:hover { color: var(--slate); }

/* ---------- Journal-Artikel ---------- */
.art-cover { position: relative; margin: 0 0 clamp(70px, 11vh, 130px); height: min(86vh, 62vw); overflow: hidden; }
.art-cover__img { position: absolute; inset: 0; clip-path: var(--gclip, none); }
.art-cover__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--gs, 1)); transform-origin: 50% 40%; }
.art-body { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-bottom: clamp(90px, 14vh, 170px); }
.art-body__text { grid-column: 5 / 12; font-size: clamp(var(--t-m), 1.25vw, 1.3125rem); line-height: 1.68; color: var(--text); min-width: 0; }
.art-body__text p + p { margin-top: 1.1em; }
/* K11/B25 (R11): Lesespalte rund 66 bis 72 Zeichen; Bilder dürfen breiter laufen */
.art-body__text > p, .art-body__text > h2, .art-body__text > ul, .art-body__text > ol, .art-body__text .art-faq { max-width: var(--measure); }
.art-body__text > p:first-child { font-size: 1.28em; line-height: 1.45; color: var(--ink); letter-spacing: -.01em; }
.art-body__text h2 { position: relative; font-size: clamp(26px, 2.1vw, 38px); font-weight: 500; letter-spacing: -.025em; line-height: 1.12; color: var(--ink); margin: 2em 0 .75em; scroll-margin-top: calc(var(--hd) + 30px); }
.art-body__text h2::before { content: ""; position: absolute; left: calc(-1 * clamp(26px, 2.4vw, 44px)); top: .2em; width: .6em; height: .6em; background: var(--grad); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); opacity: 0; transform: translateX(-8px); transition: opacity .6s, transform .8s var(--e-out); }
.art-body__text h2.is-now::before { opacity: 1; transform: none; }
.art-fig { margin: 2.2em 0; }
.art-fig__img { overflow: hidden; clip-path: var(--gclip, none); }
.art-fig__img img { width: 100%; height: auto; transform: scale(var(--gs, 1)); }
.art-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.art-toc { grid-column: 1 / 4; position: sticky; top: calc(var(--hd) + 36px); align-self: start; display: grid; gap: 18px; font-size: 14.5px; }
.art-toc__label { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.art-toc ol { display: grid; border-top: 1px solid var(--line-2); }
.art-toc li a { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 11px 0 11px; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.35; transition: color .3s, padding .5s var(--e-out); }
.art-toc li a em { font-style: normal; font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.art-toc li a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: calc(var(--f, 0) * 100%); background: var(--ink); }
.art-toc li a:hover { color: var(--ink); }
.art-toc li a.is-now { color: var(--ink); padding-left: 8px; }
.art-toc li a.is-done { color: var(--text); }
.art-toc__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.art-toc__meta dd { color: var(--ink); }
.art-toc-m { display: none; }
.next__name--art { font-size: clamp(34px, 4.6vw, 86px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
@media (max-width: 899px) {
  .art-cover { height: 62vh; }
  .art-toc { display: none; }
  .art-body__text { grid-column: 1 / -1; }
  .art-body__text h2::before { display: none; }
  .art-toc-m { display: block; grid-column: 1 / -1; position: sticky; top: calc(var(--hd) + 8px); z-index: 20; background: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); font-size: 15px; }
  .art-toc-m { transition: top .6s var(--e-out); box-shadow: 0 8px 24px -16px rgba(15,32,45,.35); }
  body:has(.hd.is-hidden) .art-toc-m { top: 0; }
  .art-toc-m summary { list-style: none; padding: 12px 16px; font-weight: 500; color: var(--ink); cursor: pointer; display: flex; gap: 6px; }
  .art-toc-m summary::-webkit-details-marker { display: none; }
  .art-toc-m summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); margin-top: 4px; }
  .art-toc-m ol { padding: 0 16px 10px; max-height: 50vh; overflow: auto; }
  .art-toc-m li a { display: grid; grid-template-columns: 28px 1fr; padding: 9px 0; border-top: 1px solid var(--line); color: var(--text); }
  .art-toc-m li a em { font-style: normal; font-size: 12.5px; color: var(--muted); }
}

/* ---------- Leistungsseiten ---------- */
.svc-hero__lead { font-size: clamp(20px, 1.5vw, 26px); line-height: 1.35; color: #fff; letter-spacing: -.01em; }
.svc-stage { position: relative; height: min(88vh, 60vw); margin: 0; background: var(--paper); }
.svc-stage__in { position: absolute; inset: 0; overflow: hidden; clip-path: var(--gclip, none); background: #0b1823; }
.svc-stage__in > img, .svc-stage__in > video { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--gs, 1)); }
.svc-stage__in .motion-art { position: absolute; inset: 0; }
.stage-art { position: absolute; inset: 0; color: #fff; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.stage-art__row { display: flex; gap: clamp(12px, 1.6vw, 26px); padding: 0 var(--m); transform: scale(var(--gs, 1)); }
.stage-art__card { width: clamp(150px, 16vw, 270px); display: grid; gap: 12px; font-size: 15px; font-weight: 500; }
.stage-art__note { position: absolute; left: var(--m); bottom: 20px; font-size: 13px; color: rgba(255,255,255,.55); }
.stage-art__words { display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .5em; max-width: 18ch; text-align: center; font-size: clamp(26px, 3.4vw, 60px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; transform: scale(var(--gs, 1)); max-width: 22ch; }
.stage-art__words span:nth-child(even) { color: var(--peak); }
.svc-list { border-top: 1px solid var(--line-2); }
.svc-list li { display: flex; gap: 22px; align-items: baseline; padding: clamp(16px, 2.2vh, 24px) 0; border-bottom: 1px solid var(--line); font-size: clamp(26px, 2.8vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.svc-list li em { font-style: normal; font-size: 13px; letter-spacing: 0; color: var(--muted); min-width: 24px; font-variant-numeric: tabular-nums; }
html.js:not(.rm) .svc-list li[data-rv] { opacity: 1; transform: none; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1s var(--e-out); }
html.js:not(.rm) .svc-list li[data-rv].is-in { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.how { display: grid; gap: clamp(30px, 5vh, 56px); }
.how__head { display: grid; gap: 18px; max-width: 60ch; }
.how__steps { display: grid; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); gap: 24px; }
.how__steps li { display: grid; gap: 10px; align-content: start; padding-top: 22px; transition: opacity .5s, transform .7s var(--e-out); }
/* X-05: Startzustand unsichtbar statt grau (Deckkraft 0 bis zum Erreichen), nur mit JS; ohne JS sind alle Schritte voll sichtbar */
.js .how__steps li { opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 14px)); }
.how__steps em { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.how__steps strong { font-size: clamp(22px, 1.8vw, 32px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.how__steps p { color: var(--muted); font-size: var(--t-s); max-width: 34ch; }
.how__line { position: relative; height: 1px; background: var(--line-2); order: -1; margin-bottom: -22px; grid-row: 2; }
.how { grid-template-rows: auto auto auto; }
.how__steps { grid-row: 3; }
.how__line i { position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--hp, 0) * 100%); background: var(--grad); }
.next__lead { grid-column: 9 / 13; color: rgba(255,255,255,.8); font-size: 17px; max-width: 34ch; }
@media (max-width: 899px) {
  .svc-stage { height: 64vh; }
  .stage-art__row { flex-wrap: nowrap; transform: scale(.62); }
  .how__steps { grid-template-columns: 1fr; gap: 10px; }
  .how__line { display: none; }
  .how__steps li, .js .how__steps li { border-top: 1px solid var(--line-2); padding-top: 16px; opacity: 1; transform: none; }
  .next__lead { grid-column: 1 / -1; }
}

/* ---------- Mobil: eigene Scroll-Bühnen für Leistungen und Real Estate ---------- */
@media (max-width: 899px) and (min-height: 601px) {
  html:not(.rm) .svc__track { height: calc(var(--vh) * (var(--n) * .5 + .6)); }
  html:not(.rm) .svc__stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 18px; padding: calc(var(--hd) + 18px) var(--m) 22px; min-height: 0; }
  html:not(.rm) .svc__left { grid-column: 1; grid-template-rows: auto auto; gap: 10px; }
  html:not(.rm) .svc__left .h3 { font-size: 15px; letter-spacing: 0; color: var(--muted); margin-top: 8px !important; }
  html:not(.rm) .svc__left .h3 br { display: none; }
  html:not(.rm) .svc__list { position: relative; height: 2.1em; font-size: clamp(28px, 8.4vw, 40px); align-self: start; padding: 0; }
  html:not(.rm) .svc__list a { position: absolute; left: 0; right: 0; bottom: 0; font-size: inherit; white-space: normal; line-height: 1.02; opacity: 0; transform: translateY(40%); transition: opacity .45s, transform .7s var(--e-out); pointer-events: none; }
  html:not(.rm) .svc__list a.is-on { opacity: 1; transform: none; pointer-events: auto; }
  html:not(.rm) .svc__list a em { display: none; }
  html:not(.rm) .svc__right { grid-column: 1; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
  html:not(.rm) .svc__media { min-height: 30vh; }
  html:not(.rm) .svc__text { gap: 10px; }
  html:not(.rm) .svc__text h3 { font-size: 20px; min-height: 2.3em; } /* X-08 CLS: Textblock behält beim Wechsel der Leistung seine Höhe */
  html:not(.rm) .svc__text p[data-svc-text] { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: 6em; }
  html:not(.rm) .svc__text .tags { font-size: 13px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html:not(.rm) .svc__mobile { display: none; }

  html:not(.rm) .re__track { height: calc(var(--vh) * 3.2); }
  html:not(.rm) .re__stage { position: sticky; top: 0; height: var(--vh); display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--hd) + 18px) var(--m) 48px; }
  html:not(.rm) .re__head { display: block; }
  html:not(.rm) .re__head .h2 { font-size: clamp(30px, 8.6vw, 42px); }
  html:not(.rm) .re__head p { margin-top: 12px; font-size: 15px; }
  html:not(.rm) .re__rail { flex-direction: row; gap: 14px; margin-top: 0; }
  html:not(.rm) .re__card { width: 72vw; gap: 12px; }
  html:not(.rm) .re__card p { font-size: 14.5px; }
  html:not(.rm) .re__line { display: block; margin-top: 2vh; }
  html:not(.rm) .re__foot { margin-top: 0; padding-top: 2vh; }
  html:not(.rm) .re__note { display: none; }
}
/* iOS: keinen nativen Play-Knopf über Hintergrundfilmen zeigen */
video::-webkit-media-controls, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; }

/* ---------- Formular-System (öffentliche Formulare, Kundenportal, Admin-Vorschau) ---------- */
.fx { position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; --fp: 0; }
.fx__nav { position: sticky; top: calc(var(--hd) + 24px); display: grid; gap: 18px; }
.fx__id { display: grid; gap: 4px; padding: 14px 16px; background: var(--grad); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.fx__id span { font-size: 12px; color: rgba(255,255,255,.65); }
.fx__id b { font-size: 17px; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.fx__nav ol { display: grid; }
.fx__nav a { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 10px 0 10px 14px; font-size: 14.5px; color: var(--muted); border-left: 1px solid var(--line); transition: color .3s; }
.fx__nav a::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--e-out); }
.fx__nav a.is-now { color: var(--ink); }
.fx__nav a.is-now::before { transform: none; }
.fx__nav em { font-style: normal; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fx__nav li.is-done em { color: transparent; position: relative; }
.fx__nav li.is-done em::after { content: ""; position: absolute; left: 1px; top: 3px; width: 11px; height: 11px; background: var(--grad); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
.fx__prog { height: 3px; background: var(--line); overflow: hidden; }
.fx__prog i { display: block; height: 100%; background: var(--grad); transform: scaleX(var(--fp)); transform-origin: left; transition: transform .6s var(--e-out); }
.fx__pct { font-size: 13px; color: var(--muted); } .fx__pct b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx__form { display: grid; gap: 16px; min-width: 0; }
.fx__sec { background: #fff; border: 1px solid var(--line); padding: clamp(22px, 3vw, 44px); display: grid; gap: 28px; scroll-margin-top: calc(var(--hd) + 20px); }
.fx__sec header { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.fx__sec header em { font-style: normal; font-size: 13px; color: var(--copper-text); font-variant-numeric: tabular-nums; font-weight: 500; }
.fx__sec h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.025em; color: var(--ink); line-height: 1.15; }
.fx__sec header p { margin-top: 8px; color: var(--muted); font-size: 15px; max-width: 60ch; }
.fx__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.fx__group legend { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 12px; padding: 0; }
.fx__group legend small { font-weight: 400; color: var(--muted); }
.fx__group[data-invalid] .choice span { border-color: #a3372a; }
.fx__check { padding: 14px 16px; background: var(--mist); transition: background .3s; }
.fx__check:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.fx__hint { font-size: 13px; color: var(--muted); }
.fx__sub { font-size: 16px; font-weight: 500; color: var(--ink); margin-top: 6px; }
.fx__doc { max-height: 380px; overflow: auto; padding: 22px 24px; background: var(--mist); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.65; color: var(--text); overscroll-behavior: contain; }
.fx__doc h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 18px 0 6px; } .fx__doc h3:first-child { margin-top: 0; }
.fx__doc:focus-visible { outline: 2px solid var(--copper-text); outline-offset: 2px; }
.fx__sig > span { font-size: 14px; font-weight: 500; color: var(--ink); }
.sig { position: relative; height: 190px; background: #fff; border: 1px solid var(--line-2); background-image: linear-gradient(118deg, rgba(217,166,121,.06), transparent 40%); transition: border-color .3s, box-shadow .3s; }
.sig canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.sig__line { position: absolute; left: 24px; right: 24px; bottom: 44px; height: 1px; background: var(--line-2); pointer-events: none; }
.sig__line::before { content: "×"; position: absolute; left: 0; bottom: 4px; font-size: 16px; color: var(--muted); }
.sig__hint { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 14px; color: var(--muted); pointer-events: none; transition: opacity .3s; }
.sig.is-on .sig__hint { opacity: 0; }
.sig.is-on { border-color: var(--ink); box-shadow: 0 18px 40px -28px rgba(15,32,45,.5); }
.sig__clear { position: absolute; right: 10px; top: 10px; padding: 4px 10px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); background: #fff; }
.sig__clear:hover { color: var(--ink); border-color: var(--ink); }
.fx__sig[data-invalid] .sig { border-color: #a3372a; }
.fx__send { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 0 0; }
.fx__send p { font-size: 14px; color: var(--muted); max-width: 46ch; }
.fx__sweep { position: absolute; z-index: 5; inset: 0; pointer-events: none; overflow: hidden; }
.fx__sweep::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 50%; background: linear-gradient(118deg, rgba(241,195,152,0), rgba(241,195,152,.55) 45%, rgba(185,135,95,.85) 50%, rgba(241,195,152,0)); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); transform: translateX(0); transition: transform .9s var(--e-io); }
.fx__sweep.is-go::before { transform: translateX(330%); }
.fx-done { position: relative; overflow: hidden; display: grid; gap: 18px; justify-items: start; padding: clamp(28px, 4vw, 60px); background: var(--grad); color: #fff; outline: none; animation: fxIn .8s var(--e-out) both; }
.fx-done h2 { font-size: clamp(30px, 3.4vw, 56px); font-weight: 500; letter-spacing: -.035em; line-height: 1; max-width: 16ch; }
.fx-done > p { color: rgba(255,255,255,.82); max-width: 56ch; }
.fx-done dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; font-size: 14.5px; color: rgba(255,255,255,.85); }
.fx-done dt { color: rgba(255,255,255,.6); }
.fx-done__sig { max-width: 260px; background: #fff; padding: 8px 14px; }
.fx-done .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.fx-done__mark { position: absolute; right: -6%; top: -30%; width: 38%; aspect-ratio: 1; pointer-events: none; }
.fx-done__mark i { position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.0), rgba(241,195,152,.5)); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); animation: fxSlash 1.1s var(--e-out) .1s both; }
@keyframes fxIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fxSlash { from { clip-path: polygon(55.49% 0, 55.49% 0, 0 100%, 0 100%); } to { clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); } }
html.rm .fx-done, html.rm .fx-done__mark i { animation: none; }
.fx--compact { grid-template-columns: minmax(0, 1fr); }
.fx--compact .fx__nav { position: static; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.fx--compact .fx__nav ol { display: none; }
@media (max-width: 899px) {
  .fx { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fx__nav { position: sticky; top: calc(var(--hd) + 6px); z-index: 4; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); }
  .fx__id { padding: 8px 12px; } .fx__id span { display: none; } .fx__id b { font-size: 14px; }
  .fx__nav ol, .fx__pct { display: none; }
  .fx__sec { padding: 22px 18px; }
  .fx__sec header { grid-template-columns: 34px minmax(0, 1fr); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .sig { height: 170px; }
  .fx__send .btn { width: 100%; justify-content: center; }
}

/* Formular-Übersicht */
.forms-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.forms-list a { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); isolation: isolate; }
.forms-list a::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--m) * -1); background: var(--mist); clip-path: polygon(0 0, var(--wipe) 0, calc(var(--wipe) - var(--sh, 60px)) 100%, 0 100%); transition: --wipe .7s var(--e-out); }
.forms-list a:hover::before { --wipe: calc(100% + var(--sh, 60px)); }
.forms-list .fid { font-size: 13px; font-weight: 500; color: var(--copper-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.forms-list strong { display: block; font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.025em; color: var(--ink); line-height: 1.1; }
.forms-list p { margin-top: 8px; color: var(--muted); max-width: 60ch; }
.forms-list .meta { display: flex; gap: 14px; align-items: center; font-size: 14px; color: var(--ink); white-space: nowrap; }
.forms-list .meta span { color: var(--muted); }
@media (max-width: 899px) { .forms-list a { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 26px 0; } .forms-list .meta { white-space: normal; } }

/* Dokumentansicht und Druck */
.doc { background: #fff; color: var(--text); padding: clamp(22px, 3vw, 44px); border: 1px solid var(--line); display: grid; gap: 26px; }
.doc__head { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.doc__id { font-size: 12.5px; font-weight: 500; color: var(--copper-text); letter-spacing: .02em; }
.doc__head h2 { font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); margin-top: 4px; max-width: 28ch; line-height: 1.2; }
.doc__head p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.doc__wm { width: 120px; flex: none; color: var(--ink); }
.doc section { display: grid; gap: 10px; }
.doc h3 { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.doc dl { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); gap: 6px 18px; font-size: 14.5px; }
.doc dt { color: var(--muted); } .doc dd { color: var(--ink); overflow-wrap: anywhere; }
.doc__note { font-size: 14px; color: var(--muted); }
.doc__sig { display: grid; gap: 4px; justify-items: start; }
.doc__sig img { max-width: 280px; border-bottom: 1px solid var(--ink); }
.doc__sig figcaption { font-size: 13px; color: var(--muted); }
.doc__foot { display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
#print-doc { display: none; }
@media print {
  html.is-printing body > *:not(#print-doc) { display: none !important; }
  html.is-printing #print-doc { display: block; }
  html.is-printing .doc { border: 0; padding: 0; }
  @page { margin: 18mm; }
}
.fx-wrap { padding-bottom: clamp(80px, 10vw, 160px); }
.ph--form { padding-bottom: clamp(30px, 5vh, 60px); }
.split .ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }

/* ---------- Leistungsseiten, Runde 3 ---------- */
.svc-intro { padding-top: clamp(70px, 10vw, 150px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.svc-intro .label { grid-column: 1 / 4; align-self: start; }
.svc-intro__text { grid-column: 4 / 12; display: grid; gap: 24px; }
.svc-intro__text p { font-size: clamp(var(--t-body), 1.2vw, 1.25rem); line-height: 1.6; color: var(--text); max-width: 62ch; }
.svc-intro__text .svc-intro__big { font-size: clamp(22px, 1.9vw, 32px); line-height: 1.25; letter-spacing: -.02em; color: var(--ink); font-weight: 500; max-width: 30ch; }
.sticky-col { position: sticky; top: calc(var(--hd) + 40px); align-self: start; }
.svc-items { border-top: 1px solid var(--line-2); }
.svc-items > li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: clamp(22px, 3vh, 34px) 0; border-bottom: 1px solid var(--line); isolation: isolate; }
.svc-items > li::before { content: ""; position: absolute; z-index: -1; inset: 0 -24px; background: var(--mist); clip-path: polygon(0 0, var(--wipe) 0, calc(var(--wipe) - var(--sh, 60px)) 100%, 0 100%); transition: --wipe .8s var(--e-out); }
.svc-items > li:hover::before { --wipe: calc(100% + var(--sh, 60px)); }
.svc-items em { font-style: normal; font-size: 13px; color: var(--copper-text); font-variant-numeric: tabular-nums; padding-top: .7em; font-weight: 500; }
.svc-items h3 { font-size: clamp(26px, 2.6vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.svc-items p { margin-top: 12px; color: var(--text); font-size: var(--t-b); line-height: 1.6; max-width: 58ch; }
.svc-band { position: relative; overflow: hidden; color: #fff; background: #0b1823; isolation: isolate; }
.svc-band > .motion-art { position: absolute; inset: 0; z-index: -1; opacity: .75; }
.svc-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,24,35,.92) 0%, rgba(11,24,35,.55) 55%, rgba(11,24,35,.25)); }
.svc-band__in { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-top: clamp(70px, 9vw, 130px); padding-bottom: clamp(70px, 9vw, 130px); }
.svc-get { grid-column: 1 / 7; display: grid; gap: 26px; align-content: start; }
.svc-who { grid-column: 8 / 13; display: grid; gap: 26px; align-content: start; }
.svc-get ul { display: grid; gap: 0; }
.svc-get li { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: clamp(18px, 1.5vw, 24px); font-weight: 500; letter-spacing: -.015em; }
.svc-get li i { width: 16px; height: 16px; flex: none; background: linear-gradient(118deg, #b9875f, #f1c398); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
.svc-who ul { display: grid; gap: 14px; }
.svc-who li { padding: 18px 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: var(--t-b); line-height: 1.5; color: rgba(255,255,255,.9); }
.label.on-dark, .label.on-dark b { color: rgba(255,255,255,.75); }
/* Developer Marketing */
.redev { display: grid; gap: clamp(50px, 7vw, 100px); }
.redev__head { display: grid; gap: 22px; max-width: 900px; }
.redev__head .lead { max-width: 60ch; }
.redev__aud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.redev__aud article { padding: 26px 22px 30px 0; display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--line); }
.redev__aud article + article { padding-left: 22px; }
.redev__aud article:last-child { border-right: 0; }
.redev__aud em { font-style: normal; font-size: 13px; color: var(--copper-text); font-weight: 500; }
.redev__aud h3 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.redev__aud p { font-size: var(--t-s); color: var(--text); line-height: 1.55; }
.redev__phases { position: relative; display: grid; gap: 0; --rp: 0; padding-left: 0; }
.redev__phases::before, .redev__phases::after { content: ""; position: absolute; left: 150px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.redev__phases::after { background: var(--grad); transform: scaleY(var(--rp)); transform-origin: top; }
.redev__phases > li { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(220px, 300px); gap: 0 clamp(28px, 4vw, 64px); padding: clamp(30px, 4vh, 50px) 0; border-bottom: 1px solid var(--line); opacity: .4; transition: opacity .6s var(--e-out); }
.redev__phases > li.is-on { opacity: 1; }
.redev__when { display: grid; gap: 6px; align-content: start; padding-right: 20px; }
.redev__when em { font-style: normal; font-size: clamp(34px, 3vw, 54px); font-weight: 500; letter-spacing: -.04em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.redev__when span { font-size: 13.5px; color: var(--copper-text); font-weight: 500; }
.redev__body { display: grid; gap: 12px; align-content: start; }
.redev__body h3 { font-size: clamp(26px, 2.4vw, 40px); font-weight: 500; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; }
.redev__body p { color: var(--text); font-size: var(--t-b); line-height: 1.6; max-width: 54ch; }
.redev__body ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.redev__body ul li { --ch: 32px; display: inline-flex; align-items: center; height: var(--ch); padding: 0 calc(var(--ch) * var(--slash) + 4px); font-size: 13.5px; color: var(--ink); background: var(--mist); clip-path: polygon(calc(var(--ch) * var(--slash)) 0, 100% 0, calc(100% - var(--ch) * var(--slash)) 100%, 0 100%); }
.redev__art { aspect-ratio: 4 / 3; background: var(--grad); position: relative; overflow: hidden; color: #fff; transform: translateY(18px); transition: transform .9s var(--e-out); }
.redev__phases > li.is-on .redev__art { transform: none; }
.redev__pr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.redev__pr div { padding: 28px; background: var(--mist); display: grid; gap: 10px; align-content: start; position: relative; overflow: hidden; }
.redev__pr h3 { font-size: 20px; font-weight: 500; color: var(--ink); letter-spacing: -.015em; display: flex; align-items: center; gap: 12px; }
.redev__pr h3 .lslash { width: 20px; height: 20px; margin: 0; flex: none; }
.redev__pr div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--e-out) .2s; }
.redev__pr div.is-in::before, html.rm .redev__pr div::before { transform: none; }
.redev__pr p { font-size: var(--t-s); line-height: 1.55; color: var(--text); }
@media (max-width: 899px) {
  .svc-intro, .svc-band__in { grid-template-columns: minmax(0, 1fr); }
  .svc-intro .label, .svc-intro__text, .svc-get, .svc-who { grid-column: 1 / -1; }
  .svc-who { margin-top: 30px; }
  .sticky-col { position: static; }
  .svc-items > li { grid-template-columns: 38px minmax(0, 1fr); }
  .redev__aud { grid-template-columns: minmax(0, 1fr); }
  .redev__aud article, .redev__aud article + article { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .redev__phases::before, .redev__phases::after { left: 0; }
  .redev__phases > li { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-left: 22px; }
  .redev__art { max-width: 360px; }
  .redev__pr { grid-template-columns: minmax(0, 1fr); }
}
html.rm .redev__phases > li { opacity: 1; } html.rm .redev__art { transform: none; }
/* Startseite Real Estate, Runde 3 */
.re__intro { display: grid; gap: 18px; align-content: end; }
.re__intro p { color: rgba(255,255,255,.82); }
.re__aud { display: flex; flex-wrap: wrap; gap: 6px; }
.re__aud li { --ch: 30px; display: inline-flex; align-items: center; height: var(--ch); padding: 0 calc(var(--ch) * var(--slash) + 4px); font-size: 13px; color: #fff; background: rgba(255,255,255,.1); clip-path: polygon(calc(var(--ch) * var(--slash)) 0, 100% 0, calc(100% - var(--ch) * var(--slash)) 100%, 0 100%); }
.re__when { font-size: 13px; color: #e9b98c; font-weight: 500; margin-top: -8px; }
.re__out { display: grid; gap: 6px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 12px; }
.re__out li { position: relative; padding-left: 20px; font-size: 14px; color: rgba(255,255,255,.75); }
.re__out li::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; background: linear-gradient(118deg, #b9875f, #f1c398); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
.re__head .re__intro { grid-column: 8 / 13; } .re__intro p { grid-column: auto; }
@media (max-width: 899px) { html:not(.rm) .re__aud, html:not(.rm) .re__out { display: none; } .re__intro { margin-top: 14px; } }
@media (max-height: 959px) and (min-width: 900px) { .re__out { display: none; } }
@media (max-width: 899px) { html:not(.rm) .re__intro p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } }
.re__head { padding-bottom: clamp(18px, 3.5vh, 44px); } @media (min-width: 900px) { .re__intro p { font-size: 16px; line-height: 1.6; } }

/* ---------- Cookie-Einstellungen (Runde 8) ----------
   Kompakte Karte unten links (384px), mobil ein schmales Blatt am unteren Rand. Ein einziger Akzent: der Marken-Slash
   oben rechts, mittig zur Titelzeile. Keine Glows, kein Blur, keine Eyebrow. Buttons im Leitstrich (buttons.css):
   „Alle akzeptieren“ und „Nur notwendige“ gleich groß und gleich stark nebeneinander (DSGVO: Ablehnen so leicht wie Zustimmen).
   Ein- und Ausblenden nur über Deckkraft und 12px Weg, ohne clip-path an der Karte: keine Restecken. */
.ck { position: fixed; z-index: 90; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); width: min(364px, calc(100vw - 24px)); pointer-events: none; }
.ck[hidden] { display: none; }
.ck__card { position: relative; pointer-events: auto; color: #fff; background: #0f202d; box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 22px 60px -28px rgba(4,12,20,.7); padding: 18px 20px 6px; max-height: calc(100svh - 40px); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(12px); transition: opacity .45s var(--e-out), transform .55s var(--e-out); }
.ck.is-in .ck__card { opacity: 1; transform: none; }
/* Ausblenden wie Banner 10 der Auswahlseite (Rudi: „die Ausblendanimation fand ich sehr gut“): leise nach unten, beschleunigend */
.ck.is-out .ck__card { opacity: 0; transform: translateY(10px); transition: opacity .28s cubic-bezier(.4, 0, 1, 1), transform .32s cubic-bezier(.4, 0, 1, 1); }
.ck__mark { position: absolute; top: 21px; right: 22px; width: 20px; height: 20px; background: linear-gradient(29deg, #2d4353 0%, #b9875f 58%, #f1c398 100%); clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); transition: clip-path .7s var(--e-out) .18s; }
.ck__mark svg { display: none; }
.ck.is-in .ck__mark { clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
.ck__t { font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 22px; padding-right: 40px; }
.ck__p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.74); text-wrap: pretty; }
.ck__more { overflow: hidden; margin-top: 12px; }
.ck__cats { display: grid; }
.ck__cats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.09); }
.ck__cats strong { font-size: 14px; font-weight: 500; }
.ck__cats p { margin-top: 2px; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.58); }
/* Schalter: Spur und Knopf im 61°-Winkel, 3px Luft rundum (an der Schräge horizontal gemessen), Trefferfläche 44 × 44 */
.ck__sw { position: relative; display: grid; place-items: center; width: 48px; height: 44px; cursor: pointer; }
.ck__sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.ck__track { position: relative; display: block; width: 40px; height: 20px; background: rgba(255,255,255,.16); clip-path: polygon(11.1px 0, 100% 0, calc(100% - 11.1px) 100%, 0 100%); transition: background-color .3s var(--e-out); }
.ck__track::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, #2d4353, #b9875f 62%, #e7b688); opacity: 0; transition: opacity .3s var(--e-out); }
.ck__track i { position: absolute; top: 3px; left: 4.66px; width: 14px; height: 14px; background: rgba(255,255,255,.72); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); transition: transform .32s var(--e-out), background-color .3s; }
.ck__sw input:checked + .ck__track::before { opacity: 1; }
.ck__sw input:checked + .ck__track i { transform: translateX(16.67px); background: #fff; }
.ck__sw::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 2px; background: #e7b688; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--e-out); }
.ck__sw:has(input:focus-visible) { outline: none; }
html:not(.ptr) .ck__sw:has(input:focus-visible)::after { transform: none; }
.ck__sw.is-lock { cursor: default; opacity: .55; }
.ck__sw.is-lock input { cursor: default; }
.ck__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ck__acts .ck__b { flex: 1 1 0; min-width: max-content; }
.ck__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.09); margin-top: 14px; }
.ck__fine { display: flex; gap: 14px; font-size: 12px; line-height: 1.4; }
.ck__fine a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255,255,255,.62); text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-underline-offset: 3px; transition: color .25s; }
.ck__fine a:hover { color: #fff; }
.ck__fine a:focus-visible { outline: none; color: #fff; text-decoration-color: #e7b688; text-decoration-thickness: 2px; }
.ck .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ck__acts, .ck__foot, .ck__more { transition: opacity .3s var(--e-out); }
.ck.is-saved .ck__acts, .ck.is-saved .ck__foot, .ck.is-saved .ck__more { opacity: .35; pointer-events: none; }
@media (max-width: 599px) {
  .ck { left: 0; right: 0; bottom: 0; width: auto; }
  .ck__card { padding: 16px 16px calc(4px + env(safe-area-inset-bottom)); max-height: calc(100svh - 72px); box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 -16px 40px -24px rgba(4,12,20,.55); }
  .ck__mark { top: 17px; right: 16px; width: 18px; height: 18px; }
  .ck__t { font-size: 15px; }
  .ck__p { font-size: 13px; margin-top: 4px; }
  .ck__acts { gap: 10px; margin-top: 12px; }
  .ck__foot { margin-top: 12px; }
}
@media (max-width: 359px) { .ck__acts { gap: 8px; } .ck__foot { column-gap: 8px; } .ck__fine { gap: 10px; font-size: 11.5px; } }
html.rm .ck__card, html.rm .ck__mark, html.rm .ck__acts, html.rm .ck__foot, html.rm .ck__more, html.rm .ck__track, html.rm .ck__track::before, html.rm .ck__track i, html.rm .ck__sw::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .ck__card, .ck__mark, .ck__track i, .ck__track::before { transition: none !important; } }
html.is-printing .ck { display: none; }
.fx input, .fx textarea, .fx select, .fx label, .fx__sec, .sig { scroll-margin-top: calc(var(--hd) + 96px); scroll-margin-bottom: 40px; }
/* Runde 4: kein seitliches Wackeln auf dem Handy */
main, .ft { overflow-x: clip; }
@media (max-width: 899px) { .svc-items > li::before { inset: 0; } }
.v-host { background-size: cover; background-position: center; }
video.v-wait { opacity: 0 !important; }
video { transition: opacity .7s var(--e-out); }
/* Karriere, Runde 4 */
.jobs-sec { padding-block: clamp(30px, 5vh, 60px) clamp(70px, 10vh, 120px); display: grid; gap: 26px; }
.jobgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.jobcard { position: relative; overflow: hidden; isolation: isolate; text-align: left; font: inherit; color: var(--ink); background: var(--mist); border: 0; cursor: pointer; padding: clamp(22px, 2vw, 30px); min-height: 250px; display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px; transition: color .5s; }
.jobcard::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--sh, 60px) * -1); background: var(--grad); clip-path: polygon(0 0, var(--wipe) 0, calc(var(--wipe) - var(--sh, 60px)) 100%, 0 100%); transition: --wipe .9s var(--e-out); }
.jobcard:hover, .jobcard:focus-visible { color: #fff; outline: none; }
.jobcard:hover::before, .jobcard:focus-visible::before { --wipe: calc(100% + var(--sh, 60px)); }
.jobcard em { font-style: normal; font-size: 13px; color: var(--copper-text); font-variant-numeric: tabular-nums; transition: color .5s; }
.jobcard strong { font-size: clamp(22px, 1.8vw, 30px); font-weight: 500; letter-spacing: -.025em; line-height: 1.08; align-self: start; }
.jobcard__meta { display: grid; gap: 2px; font-size: 14.5px; color: var(--muted); transition: color .5s; }
.jobcard__cta { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.jobcard__cta svg { width: 15px; height: 15px; transition: transform .5s var(--e-out); }
.jobcard:hover .jobcard__cta svg { transform: translateX(5px); }
.jobcard:hover em, .jobcard:hover .jobcard__meta, .jobcard:focus-visible em, .jobcard:focus-visible .jobcard__meta { color: rgba(255,255,255,.75); }
.jobcard__sl { position: absolute; right: 22px; bottom: 22px; width: 30px; height: 30px; background: var(--grad); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); transition: transform .8s var(--e-out), background .5s; }
.jobcard:hover .jobcard__sl { transform: translateX(-6px) scale(1.15); background: #fff; }
.jobcard--open { background: var(--ink); color: #fff; }
.jobcard--open .jobcard__meta { color: rgba(255,255,255,.7); }
.jobcard--open .jobcard__sl { background: linear-gradient(118deg, #b9875f, #f1c398); }
.apply__steps--big { grid-column: 7 / 13; margin-top: 0; }
.apply__steps--big li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; padding: 22px 0; }
.apply__steps--big li strong { font-size: clamp(20px, 1.6vw, 26px); font-weight: 500; letter-spacing: -.02em; color: #fff; }
.apply__steps--big li span { grid-column: 2; color: rgba(255,255,255,.7); font-size: 15px; }
.apply__steps--big em { grid-row: 1 / span 2; }
.apply-ov { position: fixed; inset: 0; z-index: 80; display: grid; justify-items: end; }
.apply-ov[hidden] { display: none; }
.apply-ov__bg { position: absolute; inset: 0; background: rgba(8, 16, 24, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .6s var(--e-out); }
.apply-ov__panel { position: relative; width: min(760px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); padding: clamp(22px, 3vw, 48px); padding-top: calc(clamp(22px, 3vw, 40px) + env(safe-area-inset-top)); clip-path: polygon(30% 0, 100% 0, 100% 100%, 100% 100%); transition: clip-path .9s var(--e-out); }
.apply-ov.is-open .apply-ov__bg { opacity: 1; }
.apply-ov.is-open .apply-ov__panel { clip-path: polygon(-30% 0, 100% 0, 100% 100%, 0 100%); }
.apply-ov__head { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 26px; }
.apply-ov__head .h3 { margin-top: 12px; }
.apply-ov__x { flex: none; width: 48px; height: 48px; border: 1px solid var(--line-2); background: transparent; position: relative; cursor: pointer; transition: background .4s; }
.apply-ov__x i { position: absolute; left: 13px; right: 13px; top: 23px; height: 1.5px; background: var(--ink); transform: rotate(45deg); transition: background .4s; }
.apply-ov__x i + i { transform: rotate(-45deg); }
.apply-ov__x:hover { background: var(--ink); } .apply-ov__x:hover i { background: #fff; }
.apply-ov .apply__card { box-shadow: none; padding: 0; background: none; }
.apply-ov .apply__card .sent { margin: 0; }
html.rm .apply-ov__panel, html.rm .apply-ov__bg { transition: none; }
@media (max-width: 899px) {
  .jobgrid { grid-template-columns: minmax(0, 1fr); }
  .jobcard { min-height: 0; grid-template-rows: none; padding: 22px 70px 22px 22px; }
  .jobcard__sl { right: 20px; top: 50%; bottom: auto; margin-top: -15px; }
  .apply__steps--big { grid-column: 1 / -1; }
  .apply-ov__panel { width: 100%; }
}
@media (min-width: 900px) and (max-width: 1199px) { .jobgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Lebendiger Slash: Verlauf fließt im Slash (wie bei „Lass uns etwas bewegen“) */
@keyframes lsFlow { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 30% 60%; } }
.close__mark, .lslash { animation: lsFlow 7s ease-in-out infinite alternate; }
.lslash { position: relative; display: inline-block; width: .56em; height: .56em; margin-left: .08em; vertical-align: -.01em; background: linear-gradient(118deg, #0f202d 0%, #2d4353 40%, #b9875f 75%, #f1c398 100%); background-size: 240% 240%; clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
html.js:not(.rm) .split .lslash { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); transition: clip-path 1.1s var(--e-out) .5s; }
html.js:not(.rm) .split.is-in .lslash { clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
.on-dark .lslash, .svc-hero .lslash, .art-hero .lslash { background-image: linear-gradient(118deg, #6f8496 0%, #b9875f 50%, #f1c398 80%, #fff 100%); }
html.rm .close__mark, html.rm .lslash { animation: none; }
/* Startseite: Aubrey Motion, live gerendert */
.hmotion { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #0b1823; min-height: min(100svh, 980px); display: grid; align-items: end; }
.hmotion > .motion-art { position: absolute; inset: 0; z-index: -2; min-height: 0; }
.hmotion::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,24,35,.15) 0%, rgba(11,24,35,0) 35%, rgba(11,24,35,.82) 100%); pointer-events: none; }
.hmotion__in { display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px 24px; align-items: end; padding-block: clamp(120px, 20vh, 220px) clamp(60px, 9vh, 110px); width: 100%; }
.hmotion__head { grid-column: 1 / 8; display: grid; gap: 22px; }
.hmotion__t { font-size: clamp(50px, 7.4vw, 140px); font-weight: 500; letter-spacing: -.048em; line-height: .92; }
.hmotion__t .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.1em; }
.hmotion__t .ln > span { display: block; }
.hmotion__side { grid-column: 9 / 13; display: grid; gap: 22px; justify-items: start; }
.hmotion__side p { color: rgba(255,255,255,.82); font-size: 16.5px; line-height: 1.6; }
.hmotion__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hmotion__tags { gap: 6px 0; }
.hmotion__tags li { --ch: 30px; display: inline-flex; align-items: center; height: var(--ch); margin-right: calc(var(--ch) * var(--slash) * -1 + 6px); padding: 0 calc(var(--ch) * var(--slash) + 4px); font-size: 13px; background: rgba(255,255,255,.1); clip-path: polygon(calc(var(--ch) * var(--slash)) 0, 100% 0, calc(100% - var(--ch) * var(--slash)) 100%, 0 100%); transition: background .4s; }
.hmotion__tags li:hover { background: rgba(241,195,152,.28); }
.hmotion__live { position: absolute; top: clamp(90px, 12vh, 130px); right: var(--m); display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.hmotion__live i { width: 8px; height: 8px; border-radius: 50%; background: #e7b688; box-shadow: 0 0 0 0 rgba(231,182,136,.6); animation: hmPulse 2s infinite; }
@keyframes hmPulse { 70% { box-shadow: 0 0 0 10px rgba(231,182,136,0); } 100% { box-shadow: 0 0 0 0 rgba(231,182,136,0); } }
html.rm .hmotion__live i { animation: none; }
@media (max-width: 899px) {
  .hmotion { min-height: 92svh; }
  .hmotion__head, .hmotion__side { grid-column: 1 / -1; }
  .hmotion__live { top: 86px; left: var(--m); right: auto; }
}
.voices__dots { grid-column: 4 / 13; display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.voices__dots span { display: flex; gap: 6px; }
.voices__dots i { width: 22px; height: 3px; background: var(--line-2); transition: width .5s var(--e-out), background .4s; }
.voices__dots i.is-on { width: 44px; background: var(--grad); }
.voices__nav { width: 64px; height: 40px; display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--ink); background: var(--mist); clip-path: polygon(calc(40px * var(--slash)) 0, 100% 0, calc(100% - 40px * var(--slash)) 100%, 0 100%); transition: background .3s, color .3s; }
.voices__nav:hover { background: var(--ink); color: #fff; }
@media (max-width: 899px) { .voices__dots { grid-column: 1 / -1; justify-content: space-between; } .voices__stage { touch-action: pan-y; } }
.svc-visual { padding-top: clamp(50px, 7vw, 100px); }
.svc-visual .art-fig { margin: 0; }
.svc-side-img { margin-top: 30px; max-width: 360px; aspect-ratio: 4 / 3; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.svc-side-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out); }
.svc-side-img:hover img { transform: scale(1.05); }
@media (max-width: 899px) { .svc-side-img { display: none; } }
/* Über uns, Runde 4 */
.ab-state { position: relative; isolation: isolate; overflow: hidden; background: #0b1823; color: #fff; }
.ab-state > .motion-art { position: absolute; inset: 0; z-index: -2; min-height: 0; opacity: .8; }
.ab-state::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,24,35,.88), rgba(11,24,35,.45)); }
.ab-state__in { display: grid; gap: 30px; padding-block: clamp(110px, 18vh, 220px); }
.ab-words { font-size: clamp(30px, 4.2vw, 74px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; max-width: 22ch; }
.ab-words .w { opacity: var(--o, .18); transition: opacity .25s linear; }
html.rm .ab-words .w { --o: 1; }
.ab-who { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; padding-top: clamp(80px, 12vh, 150px); }
.ab-who__img { grid-column: 1 / 7; margin: 0; }
.ab-who__img figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.ab-who__text { grid-column: 8 / 13; display: grid; gap: 22px; justify-items: start; }
.ab-who__big { font-size: clamp(22px, 1.9vw, 32px); line-height: 1.25; letter-spacing: -.02em; color: var(--ink); font-weight: 500; }
.ab-who__text p:not(.ab-who__big) { color: var(--text); font-size: var(--t-b); line-height: 1.6; }
.ab-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: clamp(70px, 10vh, 130px); }
.ab-facts > div { display: grid; gap: 4px; padding: 26px 20px 26px 0; border-top: 2px solid transparent; border-image: var(--grad) 1; }
.ab-facts > div + div { padding-left: 20px; }
.ab-facts strong { font-size: clamp(60px, 7vw, 120px); font-weight: 500; letter-spacing: -.05em; line-height: .95; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-facts span { font-size: 17px; font-weight: 500; color: var(--ink); }
.ab-facts small { font-size: 14px; color: var(--muted); }
.ab-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ab-values li { position: relative; overflow: hidden; isolation: isolate; background: var(--mist); padding: 26px 24px 30px; display: grid; gap: 10px; align-content: start; min-height: 210px; outline: none; transition: color .5s; }
.ab-values li::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--sh, 60px) * -1); background: var(--grad); clip-path: polygon(0 0, var(--wipe) 0, calc(var(--wipe) - var(--sh, 60px)) 100%, 0 100%); transition: --wipe .9s var(--e-out); }
.ab-values li:hover::before, .ab-values li:focus-visible::before { --wipe: calc(100% + var(--sh, 60px)); }
.ab-values li:hover, .ab-values li:focus-visible { color: #fff; }
.ab-values em { font-style: normal; font-size: 13px; color: var(--copper-text); transition: color .5s; }
.ab-values strong { font-size: 20px; font-weight: 500; letter-spacing: -.015em; color: inherit; }
.ab-values li:not(:hover):not(:focus-visible) strong { color: var(--ink); }
.ab-values p { font-size: 15px; line-height: 1.5; color: inherit; opacity: .8; }
.ab-values li:hover em, .ab-values li:focus-visible em { color: #f1c398; }
.ab-quote { display: grid; gap: 24px; margin: 0; max-width: 1100px; }
.ab-quote blockquote { font-size: clamp(28px, 3.2vw, 56px); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); font-weight: 500; }
.ab-quote figcaption { color: var(--muted); } .ab-quote figcaption b { color: var(--ink); font-weight: 500; }
@media (max-width: 899px) {
  .ab-who__img, .ab-who__text { grid-column: 1 / -1; }
  .ab-facts, .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-facts > div, .ab-facts > div + div { padding: 20px 10px 20px 0; }
  .ab-values li { min-height: 0; padding: 20px 18px 22px; }
}
@media (max-width: 420px) { .ab-values { grid-template-columns: minmax(0, 1fr); } }
.ck-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 10px 0 26px; }
.ck-table th, .ck-table td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ck-table th { font-size: 13px; color: var(--muted); font-weight: 500; }
.ck-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
@media (max-width: 599px) { .ck-table, .ck-table tbody, .ck-table tr, .ck-table td { display: block; } .ck-table thead { display: none; } .ck-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); } .ck-table td { border: 0; padding: 2px 0; white-space: normal !important; } }
.prose button.link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Runde 5: Feinschliff ---------- */
/* Abschnittsmarke ohne Nummer: Marken-Slash statt gemischter Zeichen */
.label b.label__sl { display: inline-block; width: 12px; height: 12px; background: var(--grad); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
.on-dark .label b.label__sl, .label.on-dark b.label__sl { background: linear-gradient(118deg, #b9875f, #f1c398); }
/* Kennzeichnung KI-Bilder */
.sym { position: absolute; z-index: 6; right: 14px; bottom: 12px; padding: 4px 10px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: #fff; background: rgba(11,24,35,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.svc__media figure { overflow: hidden; }
.acc__media { position: relative; }
.svc-side-img { position: relative; margin: 30px 0 0; }
.svc-side-img figcaption.sym { left: 10px; right: auto; bottom: 10px; }
/* Header mobil: über dunklen Flächen dunkles Milchglas, über hellen helles; die Verlaufslinie bleibt */
@media (max-width: 1023px) {
  .hd__bg { background: rgba(255,255,255,.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); transition: opacity .5s var(--e-out), background-color .5s var(--e-out), box-shadow .5s; }
  .hd.is-glass .hd__bg { opacity: 1; background: rgba(11,24,35,.58); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
  .hd.is-glass:not(.is-lit) .hd__bg::after { transform: none; }
}
/* Projekt-Hero mobil: Bühne endet unter dem Titel; Mockups vollständig (contain) auf ihrem Grau */
.case-hero__win[data-fit="contain"] { background: var(--hbg, var(--mist)); }
.case-hero__amb { display: none; }
@media (max-width: 899px) {
  .case-hero__win[data-fit] img { object-fit: contain; transform: scale(calc(var(--ws, 1) * var(--wz, 1.14))); transform-origin: 50% 50%; }
  .case-hero__win[data-fit="ambient"] { --wz: 1.3; background: #0b1823; }
  .case-hero__win[data-fit="ambient"] img.case-hero__amb { display: block; position: absolute; inset: 0; object-fit: cover; filter: blur(26px) saturate(1.15) brightness(.82); transform: scale(1.25); -webkit-mask-image: none; mask-image: none; }
  .case-hero__win[data-fit="contain"]::after { display: none; }
  .case-hero__win[data-fit="contain"] .case-hero__cap { color: var(--ink); text-shadow: none; }
  html.rm .case-hero__win, html:not(.js) .case-hero__win { height: auto; aspect-ratio: 4 / 3; }
}
/* Leistungsseiten: einzelnes Projekt über die volle Breite */
.grid--one .card, .grid--one .card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
.grid--one .card__img { aspect-ratio: 21 / 9; }
@media (max-width: 899px) { .grid--one .card__img { aspect-ratio: 4 / 3; } }
/* Real Estate: Ergebnisliste kompakt in zwei Spalten */
.svc-band--compact .svc-get ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.svc-band--compact .svc-get li { font-size: clamp(16px, 1.15vw, 19px); padding: 12px 0; }
.svc-band--compact .svc-who ul { gap: 10px; }
.svc-band--compact .svc-who li { padding: 14px 18px; font-size: 15.5px; }
@media (max-width: 899px) { .svc-band--compact .svc-get ul { grid-template-columns: minmax(0, 1fr); } }
/* Über uns: Faktenband statt Kennzahlen */
.ab-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.ab-facts > div, .ab-facts > div + div { padding: 24px 0 8px; gap: 10px; align-content: start; }
.ab-facts span { font-size: 14px; font-weight: 500; color: var(--muted); }
.ab-facts strong { font-size: clamp(40px, 4.4vw, 80px); letter-spacing: -.045em; line-height: 1; display: flex; align-items: baseline; }
.ab-facts strong .lslash { width: .42em; height: .42em; margin-left: .14em; }
.ab-facts small { font-size: 15.5px; line-height: 1.5; color: var(--text); max-width: 32ch; }
@media (max-width: 899px) { .ab-facts { grid-template-columns: minmax(0, 1fr); gap: 0; } .ab-facts > div, .ab-facts > div + div { padding: 22px 0 14px; } }
/* Hero: der große Slash verlässt die Bühne, ein kleiner landet am Ende des Statements */
html.js:not(.rm) .hero__statement .lslash { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); transition: clip-path .9s var(--e-out) .1s; }
html.js:not(.rm) .hero.st-in .hero__statement .lslash { clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
/* Slash-Staffel (R11): der Film-Slash landet genau hier; das Satzzeichen erscheint ohne eigene Wisch-Animation, der Film blendet darüber aus */
html.js:not(.rm) .hero.relay .hero__statement .lslash { transition: none; }
.hero__film { opacity: var(--fo, 1); }
/* Tippflächen mindestens 24px, ohne das Layout zu verschieben */
.hd__logo { padding-block: 4px; }
.crumb a, .ft__panels a, .check a { display: inline-block; padding-block: 4px; margin-block: -4px; }

/* ---------- Runde 5 ---------- */
/* Menü: Suche, Fokus nur per Tastatur, heller CTA im offenen Menü */
.menu__in:focus { outline: none; }
.menu__search { grid-column: 1 / -1; position: relative; width: 100%; max-width: 820px; opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .9s var(--e-out); }
.menu.is-open .menu__search { opacity: 1; transform: none; transition-delay: .3s; }
.menu__sf { display: flex; align-items: center; gap: 14px; padding: 8px 0 10px; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color .3s, box-shadow .3s; }
.menu__sf:focus-within { border-bottom-color: #fff; box-shadow: 0 1px 0 #fff; }
.menu__sf svg { width: 20px; height: 20px; flex: none; opacity: .8; }
.menu__sf input { flex: 1; min-width: 0; padding: 4px 0; background: none; border: 0; border-radius: 0; color: #fff; font-size: clamp(18px, 1.6vw, 24px); outline: none; -webkit-appearance: none; appearance: none; }
.menu__sf input::placeholder { color: rgba(255,255,255,.55); }
.menu__sf input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.menu__res { margin-top: 16px; }
.menu__resn { font-size: 13.5px; color: rgba(255,255,255,.65); margin-bottom: 4px; }
.menu__res ul { display: grid; }
.menu__res a { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; animation: rvIn .5s var(--e-out) both; }
.menu__res a em { grid-row: span 2; padding-top: 5px; font-style: normal; font-size: 12.5px; color: var(--peak); }
.menu__res a strong { font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.menu__res a span { font-size: 14px; color: rgba(255,255,255,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__res a:hover strong, .menu__res a:focus-visible strong { color: var(--peak); }
.menu__res a:focus-visible { outline-offset: 2px; }
.menu__res mark { background: none; color: var(--peak); }
.menu.is-searching .menu__main, .menu.is-searching .menu__side { display: none; }
.menu__portal .btn { margin-top: 2px; }
@media (max-width: 899px) { .menu__res a { grid-template-columns: 1fr; } .menu__res a em { grid-row: auto; padding-top: 0; } }
html.rm .menu__res a { animation: none; }
/* Angemeldete Kundin: Projekt anfragen bleibt als Textlink neben dem Portal-Button (nur bei genug Breite) */
.hd__ask { font-size: 14.5px; font-weight: 500; padding: 8px 6px; opacity: .8; transition: opacity .3s; }
.hd__ask:hover { opacity: 1; }
.hd__ask { white-space: nowrap; }
@media (max-width: 1279px) { .hd__ask { display: none; } }

/* Mehr laden (Projekte, Journal) */
.more { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; margin-top: clamp(44px, 7vh, 80px); }
.more__n { font-size: 14.5px; }
.is-paged-out { display: none !important; }
.is-reveal { animation: rvIn .9s var(--e-out) both; animation-delay: calc(var(--rk, 0) * 70ms); }
@keyframes rvIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
html.rm .is-reveal { animation: none; }

/* Journal: Kacheln oder Liste */
.jn__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(26px, 4vh, 40px); padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.jn__bar .views { display: flex; gap: 18px; }
.jn__bar .views button { position: relative; padding: 6px 0; color: var(--muted); transition: color .3s; }
.jn__bar .views button[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.jn__bar .views button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); }
.jn__it { position: relative; color: var(--ink); }
.jn__img { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--grad-soft); }
.jn__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--e-out); }
.jn__it:hover .jn__img img { transform: scale(1.04); }
.jn__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.jn__it strong { font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.jn__it > svg { width: 16px; height: 16px; transition: transform .5s var(--e-out); }
.jn__it:hover > svg { transform: translateX(5px); }
.jn__items.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) 24px; align-items: start; }
.jn__items.is-grid .jn__it { display: grid; gap: 14px; align-content: start; }
.jn__items.is-grid .jn__it strong { font-size: clamp(20px, 1.6vw, 27px); }
.jn__items.is-grid .jn__it > svg { display: none; }
.jn__items.is-grid .jn__it:first-child { grid-column: span 2; }
.jn__items.is-grid .jn__it:first-child .jn__img { aspect-ratio: 16 / 9; }
.jn__items.is-grid .jn__it:first-child strong { font-size: clamp(26px, 2.4vw, 40px); max-width: 26ch; }
/* Kachel: Bild öffnet sich im Slash-Winkel beim Hover */
.jn__items.is-grid .jn__img::after { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: .5; mix-blend-mode: multiply; clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); transition: clip-path .8s var(--e-out); }
.jn__items.is-grid .jn__it:hover .jn__img::after { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); }
.jn__items.is-list { display: grid; margin-top: -14px; }
.jn__items.is-list .jn__it { display: grid; grid-template-columns: 132px minmax(0, 1fr) 24px; grid-template-areas: "img meta arr" "img title arr"; gap: 6px 26px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding .6s var(--e-out); }
.jn__items.is-list .jn__it:hover { padding-left: 10px; }
.jn__items.is-list .jn__img { grid-area: img; aspect-ratio: 4 / 3; }
.jn__items.is-list .jn__meta { grid-area: meta; align-self: end; }
.jn__items.is-list .jn__it strong { grid-area: title; align-self: start; font-size: clamp(19px, 1.6vw, 27px); }
.jn__items.is-list .jn__it > svg { grid-area: arr; }
@media (max-width: 1100px) { .jn__items.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .jn__items.is-grid { grid-template-columns: minmax(0, 1fr); }
  .jn__items.is-grid .jn__it:first-child { grid-column: auto; }
  .jn__items.is-grid .jn__it:first-child .jn__img { aspect-ratio: 4 / 3; }
  .jn__items.is-list .jn__it { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "img meta" "img title"; gap: 4px 16px; padding: 14px 0; }
  .jn__items.is-list .jn__it > svg { display: none; }
  .jn__items.is-list .jn__it strong { font-size: 17px; }
}

/* Projekt-Assistent: Prüfschritt */
.wiz__hint { margin-top: 8px; font-size: 15px; }
.wiz__review { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 26px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15.5px; }
.wiz__review dt { color: var(--muted); }
.apply__review h3 { font-size: var(--t-l); font-weight: 500; letter-spacing: -.015em; color: var(--ink); outline: none; }
.apply__review { margin-bottom: 26px; }
.wiz__review dd { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 599px) { .wiz__review { grid-template-columns: minmax(0, 1fr); gap: 2px; } .wiz__review dd { margin-bottom: 10px; } }

/* Karriere: Stellendetails aus dem Admin, Schließen als Verlauf im Slash-Winkel */
.apply__job { margin: -6px 0 28px; padding: 20px 22px; background: var(--mist); font-size: 15.5px; display: grid; gap: 10px; }
.apply__job-meta { font-size: 13.5px; color: var(--muted); }
.apply__job h3 { font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 6px; }
.apply__job ul { display: grid; gap: 6px; }
.apply__job li { position: relative; padding-left: 20px; }
.apply__job li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; background: var(--grad); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
.apply-ov__veil { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%); z-index: 3; pointer-events: none; background: var(--grad); --wipe: 0%; clip-path: polygon(0 0, var(--wipe) 0, calc(var(--wipe) - 100vh * var(--slash)) 100%, 0 100%); visibility: hidden; }
.apply-ov.is-closing .apply-ov__veil { visibility: visible; --wipe: calc(100% + 100vh * var(--slash)); transition: --wipe .36s var(--e-io); }
.apply-ov.is-closing .apply-ov__bg { opacity: 0; transition-duration: .8s; }
.apply-ov.is-closing .apply-ov__panel > * { opacity: .4; transform: translateX(-24px); transition: opacity .4s, transform .6s var(--e-out); }
.apply-ov.is-closing-out .apply-ov__panel { visibility: hidden; transition: none; }
.apply-ov.is-closing-out .apply-ov__veil { clip-path: polygon(var(--wipe) 0, calc(100% + 100vh) 0, calc(100% + 100vh) 100%, calc(var(--wipe) - 100vh * var(--slash)) 100%); transition: --wipe .46s var(--e-io); }

/* Stimmen: Pfeile als Marken-Slash (61°, Versatz = Höhe × 0,5549), Fortschritt im aktiven Strich */
.voices__nav { --nh: 34px; width: 62px; height: var(--nh); font-size: 0; background: var(--mist); color: var(--ink); clip-path: polygon(calc(var(--nh) * var(--slash)) 0, 100% 0, calc(100% - var(--nh) * var(--slash)) 100%, 0 100%); }
.voices__nav svg { width: 14px; height: 14px; } /* R12: Pfeile auf Textbutton-Größe (vorher 86 × 44) */
.voices__nav:hover, .voices__nav:focus-visible { background: var(--ink); color: #fff; outline: none; }
/* Fortschritt: schmale Slash-Segmente (Versatz = Höhe × 0,5549); die Füllung läuft mit schräger Vorderkante */
.voices__dots span { gap: 2px; align-items: center; }
.voices__dots i { --dh: 10px; --dk: calc(var(--dh) * var(--slash)); position: relative; width: 30px; height: var(--dh); background: var(--line); clip-path: polygon(var(--dk) 0, 100% 0, calc(100% - var(--dk)) 100%, 0 100%); transition: width .6s var(--e-out), background .4s; }
.voices__dots i.is-on { width: 64px; background: var(--line-2); }
.voices__dots i b { position: absolute; inset: 0; background: var(--grad); background-size: 64px 100%; clip-path: polygon(0 0, calc(var(--vp, 0) * (100% + var(--dk))) 0, calc(var(--vp, 0) * (100% + var(--dk)) - var(--dk)) 100%, 0 100%); }
.voices__dots i:not(.is-on) b { --vp: 0 !important; }
html.rm .voices__dots i.is-on b, .voices.is-static .voices__dots i.is-on b { --vp: 1; }

/* Journal-Artikel mobil: keine Inhaltsleiste oben (Rudi, Runde 5) */
@media (max-width: 899px) { .art-toc-m { display: none !important; } }

/* Cookie-Schalter: Fokus am Label, weil die Slash-Form den Rahmen abschneiden würde */

/* ---------- SEO/GEO: Antwort zuerst, Fakten auf einen Blick, Verlinkung, Rechtstexte (Runde 5) ---------- */
.ft__about { margin-top: 16px; max-width: 34ch; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.62); }
.svc-hero__answer { font-size: var(--t-b); line-height: 1.6; color: rgba(255,255,255,.84); }
.svc-facts, .ab-card { padding-top: clamp(60px, 8vw, 120px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.svc-facts > .label { grid-column: 1 / 4; align-self: start; }
.ab-card > h2 { grid-column: 1 / 4; align-self: start; }
.svc-facts__dl { grid-column: 4 / 12; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); border-top: 1px solid var(--line-2); }
.svc-facts__dl > div { display: grid; align-content: start; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.svc-facts__dl dt { font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
.svc-facts__dl dd { font-size: var(--t-b); line-height: 1.5; color: var(--ink); }
.how__lead { font-size: clamp(var(--t-b), 1.1vw, var(--t-m)); line-height: 1.6; color: var(--muted); max-width: 60ch; }
.rel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 64px); }
.rel__list, .art-rel ul { list-style: none; display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--line-2); }
.rel__list li, .art-rel li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rel__list li > span { font-size: var(--t-s); color: var(--muted); }
.art-rel { padding-bottom: clamp(70px, 10vh, 120px); }
.art-rel__in { max-width: 760px; margin-left: auto; margin-right: calc(var(--col) * 1); }
.legal-stand { margin-top: 22px; font-size: 14px; color: var(--muted); }
/* R12: Inhaltsverzeichnis der Datenschutzerklärung mit Sprungmarken */
.legal-toc { margin: 34px 0 10px; padding: 22px 24px; background: var(--mist); border-left: 2px solid var(--copper); }
.legal .legal-toc h2 { margin: 0 0 12px; font-size: 15px; color: var(--muted); font-weight: 500; }
.legal-toc ol { margin: 0; padding-left: 1.6em; columns: 2 280px; column-gap: 32px; font-size: 15.5px; line-height: 1.45; }
.legal-toc li { break-inside: avoid; padding: 3px 0; }
.legal-toc ol { list-style: decimal; }
.legal-toc li::marker { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.legal-h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.legal-toc a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--e-out, ease); }
.legal-toc a:hover { background-size: 100% 1px; }
.legal h2[id] { scroll-margin-top: 110px; }
.legal h3 { font-size: 18px; font-weight: 500; color: var(--ink); margin: 1.4em 0 .4em; }
.legal .todo { display: inline-block; padding: 2px 8px; background: var(--mist); border-left: 2px solid var(--copper); font-size: 14.5px; color: var(--ink); }
.legal .lead { font-size: clamp(var(--t-m), 1.3vw, 1.3125rem); line-height: 1.5; color: var(--ink); }
.legal h2 + p, .legal p + p, .legal table + h2 { margin-top: .6em; }
@media (max-width: 899px) {
  .svc-facts > .label, .ab-card > h2, .svc-facts__dl { grid-column: 1 / -1; }
  .svc-facts__dl, .rel { grid-template-columns: minmax(0, 1fr); }
  .art-rel__in { margin-right: 0; }
}

/* Journal-Bilder aus dem Admin: Größe und Ausrichtung */
.art-body__text::after { content: ""; display: block; clear: both; }
.art-fig--narrow { width: 50%; margin-inline: auto; }
@media (min-width: 900px) {
  .art-fig--wide { margin-left: calc(var(--col) * -1); margin-right: calc(var(--col) * -1); }
  .art-fig--full { position: relative; z-index: 2; width: var(--fw, 100vw); margin-left: var(--fx, calc(50% - 50vw)); background: var(--paper); }
  .art-fig--narrow.art-fig--left, .art-fig--normal.art-fig--left { float: left; margin: .4em 2em 1.2em 0; }
  .art-fig--narrow.art-fig--right, .art-fig--normal.art-fig--right { float: right; margin: .4em 0 1.2em 2em; }
  .art-fig--normal.art-fig--left, .art-fig--normal.art-fig--right { width: 62%; }
  .art-body__text h2 { clear: both; }
}
@media (max-width: 899px) {
  .art-fig--narrow { width: 100%; }
  .art-fig--full { width: var(--fw, 100vw); margin-left: var(--fx, calc(50% - 50vw)); }
}
/* Angemeldete Kundin mobil: kompakter Portal-Button neben „Menü“ (ab 340px Breite, schmal nur „Kundenportal“) */
@media (max-width: 419px) { .hd__cta-pre { display: none; } }
@media (max-width: 1023px) and (min-width: 340px) {
  .hd__cta.hd__cta--portal { display: inline-flex; --bh: 34px; font-size: 13.5px; gap: 8px; }
  body:not(.panel-body) .hd__cta.hd__cta--portal { padding: 0 calc(var(--sk) + 2px) 0 calc(var(--sk) + 4px); }
  .hd__right { gap: 8px; }
  .hd__right:has(.hd__cta--portal) .hd__menu { padding-left: 8px; }
  .hd__right:has(.hd__cta--portal) .hd__menu > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 404: Text links, rechts die Slash-Animation aus „Software & Plattformen“ (heller Grund) */
.nf { padding: calc(var(--hd) + clamp(48px, 10vh, 120px)) 0 clamp(70px, 12vh, 150px); }
.nf__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.nf__text { grid-column: 1 / 7; display: grid; gap: 26px; justify-items: start; }
.nf__text .h1 { margin-top: 4px; }
.nf__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.nf__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15.5px; color: var(--muted); }
.nf__links a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; transition: color .3s, text-decoration-color .3s; }
.nf__links a:hover { color: var(--ink); text-decoration-color: currentColor; }
.nf__art { grid-column: 7 / 13; aspect-ratio: 4 / 3.4; position: relative; overflow: hidden; }
.nf__art .motion-art { position: absolute; inset: 0; min-height: 0; background: var(--mist); }
@media (max-width: 899px) {
  .nf__text, .nf__art { grid-column: 1 / -1; }
  .nf__art { aspect-ratio: 16 / 10; margin-top: 18px; }
}

/* Runde 7: einheitliche Bildkacheln mobil, „Ausgewählte Arbeiten“ passt in jedes Display */
.stories__head .label { flex-shrink: 0; white-space: nowrap; }
.stories__head > span { white-space: nowrap; }
@media (max-width: 389px) { .stories__head > span { display: none; } }
.stories__text strong { font-size: clamp(30px, 10vw, 40px); overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 899px) {
  /* Journal-Kacheln: alle gleich groß (kein breiter Aufmacher auf Tablet und Handy) */
  .jn__items.is-grid .jn__it:first-child { grid-column: auto; }
  .jn__items.is-grid .jn__it:first-child .jn__img { aspect-ratio: 4 / 3; }
  .jn__items.is-grid .jn__it:first-child strong { font-size: clamp(20px, 1.6vw, 27px); }
  /* Projektgalerie: jede Kachel im selben Format, Motiv füllt sie (Fokus mittig oder aus dem Admin-Zuschnitt) */
  .gallery figure { max-width: none !important; justify-self: stretch !important; align-self: start !important; }
  :root .gallery figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .gallery .gallery__img.crop-r { aspect-ratio: 4 / 5 !important; }
}
@media (min-width: 600px) and (max-width: 899px) {
  :root .gallery figure img { aspect-ratio: 1 / 1; }
  .gallery .gallery__img.crop-r { aspect-ratio: 1 / 1 !important; }
}

/* Runde 7: Journal mobil etwas kleinere Schrift, Abstände und Überschriften im selben Verhältnis */
@media (max-width: 599px) {
  .art-head .h1 { font-size: clamp(30px, 8.8vw, 34px); }
  .art-head__meta { gap: 6px 18px; margin-top: 22px; font-size: 13.5px; }
  .art-body__text { font-size: var(--t-b); line-height: 1.62; }
  .art-body__text > p:first-child { font-size: 1.17em; line-height: 1.45; }
  .art-body__text h2 { font-size: 23px; margin: 1.8em 0 .65em; }
  .art-fig { margin: 1.9em 0; }
  .art-fig figcaption { margin-top: 10px; font-size: 13px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .art-body__text { font-size: var(--t-body); line-height: 1.64; }
  .art-body__text h2 { font-size: 25px; }
}

/* Runde 7: Zuschnitt aus dem Admin (crop: Seitenverhältnis, Fokuspunkt x/y, Zoom) */
.crop-r { aspect-ratio: var(--car) !important; height: auto !important; overflow: hidden; }
.crop-r > img { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; }
:root img[data-crop] { object-fit: cover; object-position: var(--cxo, 50% 50%); transform-origin: var(--cxo, 50% 50%); transform: scale(calc(var(--gs, 1) * var(--hv, 1) * var(--cz, 1))); }
:root .case-hero__win img[data-crop] { object-fit: cover; transform: scale(calc(var(--ws, 1) * var(--cz, 1))); }
:root .work__img img[data-crop] { transform: scale(calc(var(--s, 1) * var(--cz, 1))); }
.art-cover.crop-r { height: auto !important; max-height: 86vh; }
.art-cover.crop-r .art-cover__img img { object-fit: cover; }
:root .jn__it:hover .jn__img img[data-crop] { transform: scale(calc(1.04 * var(--cz, 1))); }

/* ---------- Leistungs-Animationen (src/svc-anim.js): Live-Canvas je Leistung statt Projektfotos ---------- */
.sa { position: relative; overflow: hidden; background: #0b1823; width: 100%; height: 100%; min-height: 220px; }
.sa canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.svc-stage__in .sa, .svc__media figure > .sa { position: absolute; inset: 0; min-height: 0; }
.acc__body .sa { aspect-ratio: 16 / 10; height: auto; margin-bottom: 18px; }
.peek .sa--peek { position: absolute; inset: 0; min-height: 0; }
.peek .sa--peek[hidden] { display: none; }
/* Aubrey Motion: Bühne wie der Motion-Abschnitt der Startseite, volle Fläche ohne Leerraum */
.svc-stage.svc-stage--motion { height: min(100svh, 980px); background: #0b1823; }
.svc-stage--motion .svc-stage__in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,35,.15) 0%, rgba(11,24,35,0) 35%, rgba(11,24,35,.55) 100%); pointer-events: none; }
.svc-stage--motion .motion-art__tag { z-index: 1; left: var(--m, 22px); bottom: clamp(18px, 4vh, 40px); }
@media (max-width: 899px) { .svc-stage.svc-stage--motion { height: min(92svh, 820px); } }

/* Runde 7: Cookie-Tabelle mit fünf Spalten; mobil mit Beschriftung je Zeile */
.ck-table td:first-child { white-space: normal; min-width: 150px; overflow-wrap: anywhere; }
.ck-table td:nth-child(2) { white-space: nowrap; }
.ck-table td:last-child { color: var(--muted); font-size: 14px; }
@media (max-width: 599px) {
  .ck-table td:first-child { min-width: 0; margin-bottom: 4px; }
  .ck-table td:nth-child(n+2)::before { color: var(--muted); font-size: 13px; }
  .ck-table td:nth-child(2)::before { content: "Speicherart: "; }
  .ck-table td:nth-child(4)::before { content: "Dauer: "; }
  .ck-table td:nth-child(5)::before { content: "Gesetzt von: "; }
}
/* Rechtstexte: Aufzählungen mit kleinem Slash */
.legal .prose ul { display: grid; gap: 10px; margin: 14px 0 22px; }
.legal .prose ul > li { position: relative; padding-left: 24px; }
.legal .prose ul > li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--grad); clip-path: polygon(55.49% 0, 100% 0, 44.51% 100%, 0 100%); }
/* Runde 8: Motion-Flächen randlos bis unter die Kopfzeile (kein Milchglas-Balken); Schrift bleibt lesbar */
.hd.is-bleed .hd__bg { opacity: 0 !important; box-shadow: none !important; }
.hd.is-bleed .hd__in { text-shadow: 0 1px 12px rgba(11,24,35,.45); }
.svc-stage--motion .svc-stage__in::after { background: linear-gradient(180deg, rgba(11,24,35,.32) 0%, rgba(11,24,35,0) 22%, rgba(11,24,35,0) 60%, rgba(11,24,35,.55) 100%); }
.svc-stage__in .motion-art { min-height: 0; }
/* Runde 9: eigene Scrollleiste (src/scrollbar.js). Ruhig: 3px Spur am rechten Rand, Fortschritt im Markenverlauf
   (Tinte oben, Kupfer unten, wie das CI-Band der Dokumente); bei Hover, Tastaturfokus oder Ziehen 7px breit mit
   greifbarem Schieber. Trefferfläche bleibt 20px breit. Über Dunkelzonen (DZ in app.js) heller Verlauf.
   Breit wird sie nur über die Klassen is-hover und is-drag (gesetzt in scrollbar.js, beim Verlassen und am Ende
   eines Ziehens sofort entfernt) und bei :focus-visible; ein Mausklick fokussiert die Leiste nicht.
   Der Fortschritt wächst über die Höhe (nicht scaleY): so bleiben beide Enden bei jedem Wert rund, und der Verlauf
   spannt sich immer über die ganze Füllung (oben Tinte, unten Kupfer).
   Nur ab 1180px, feiner Zeiger, ohne erzwungene Farben; sonst und mobil bleibt die native Leiste.
   Admin (/admin) und Kundenportal (/kunden) behalten bewusst die native Leiste: appPage in src/panels.mjs setzt
   die Klasse html.sb nicht und lädt scrollbar.js nicht. Aktivierbar dort, indem appPage beides ergänzt und
   der Inhalt ein Element mit id="main" hat (Ziel für aria-controls). */
.sb-bar { display: none; position: fixed; z-index: 54; top: calc(var(--hd) + 14px); bottom: 14px; right: 0; width: 20px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; -webkit-tap-highlight-color: transparent;
  --sb-track: rgba(15, 32, 45, .1); --sb-fill: var(--copper); --sb-w: 3px; --sb-r: 5px;
  --sb-grad: linear-gradient(180deg, #172a38 0%, #2d4353 34%, #6f6157 64%, #b9875f 88%, #c8946a 100%); }
.sb-bar::before, .sb-bar::after, .sb-bar__thumb { position: absolute; top: 0; right: var(--sb-r); width: var(--sb-w); border-radius: 999px; pointer-events: none; transition: width .22s var(--e-out), right .22s var(--e-out), opacity .2s ease, background-color .4s ease; }
.sb-bar::before, .sb-bar::after { content: ""; bottom: 0; }
.sb-bar::before { background: var(--sb-track); }
.sb-bar::after { bottom: auto; height: calc(var(--sb-p, 0) * 100%); background: var(--sb-grad); box-shadow: var(--sb-edge, none); }
.sb-bar__thumb { min-height: 40px; background: var(--sb-grad); box-shadow: var(--sb-edge, none); opacity: 0; will-change: transform; }
.sb-bar:is(.is-hover, :focus-visible, .is-drag) { --sb-w: 7px; --sb-r: 3px; }
.sb-bar:is(.is-hover, :focus-visible, .is-drag)::after { opacity: .22; }
.sb-bar:is(.is-hover, :focus-visible, .is-drag) .sb-bar__thumb { opacity: 1; }
.sb-bar.is-drag { cursor: grabbing; }
.sb-bar:focus-visible .sb-bar__thumb { outline: 2px solid var(--sb-fill); outline-offset: 2px; }
.sb-bar[aria-disabled="true"] { cursor: default; }
.sb-bar[aria-disabled="true"]::after { opacity: 0; }
.sb-bar[data-tone="dark"] { --sb-track: rgba(255, 255, 255, .2); --sb-fill: var(--copper-hi);
  --sb-grad: linear-gradient(180deg, #dfe6eb 0%, #cfc6bb 40%, #e2b07f 78%, #f1c398 100%);
  --sb-edge: 0 0 0 1px rgba(15, 32, 45, .22); } /* Haarkante: Dunkelzonen laufen rechts teils in helles Kupfer aus */
.sb-bar[data-tone="dark"]::before { box-shadow: 0 0 0 1px rgba(15, 32, 45, .08); }
.sb-bar[data-tone="grad"] { --sb-track: rgba(15, 32, 45, .16); --sb-fill: var(--ink);
  --sb-grad: linear-gradient(180deg, #0f202d 0%, #1c2f3d 45%, #4a3a2e 80%, #5e4430 100%); } /* Footer: rechts Kupferverlauf, dort trägt Tinte, die nach unten in dunkles Kupfer läuft */
body.menu-open .sb-bar { visibility: hidden; }
@media (min-width: 1180px) and (any-pointer: fine) and (forced-colors: none) {
  html.sb { scrollbar-width: none; }
  html.sb::-webkit-scrollbar { display: none; width: 0; }
  html.sb .sb-bar { display: block; }
}
html.rm .sb-bar::before, html.rm .sb-bar::after, html.rm .sb-bar__thumb { transition: none; }
@media (prefers-reduced-motion: reduce) { .sb-bar::before, .sb-bar::after, .sb-bar__thumb { transition: none; } }
@media print { .sb-bar { display: none !important; } html.sb { scrollbar-width: auto; } }
/* Runde 9: Karriere ohne offene Stellen (alle im Admin gelöscht oder ausgeblendet) */
.jobgrid--empty .jobempty { grid-column: span 2; display: grid; align-content: center; gap: 10px; padding: clamp(22px, 2.4vw, 36px); min-height: 250px; background: var(--mist); border-left: 3px solid var(--copper); }
.jobempty strong { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.jobempty span { max-width: 52ch; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) { .jobgrid--empty .jobempty { grid-column: 1 / -1; } }

/* ---------- Journal: Bildkennzeichnung (KI-generiert, Symbolbild) und FAQ-Blöcke aus dem Admin ---------- */
.art-fig__img { position: relative; }
.img-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 4px 8px; background: rgba(15,32,45,.72); color: #fff; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; line-height: 1.2; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.art-cover .img-tag { left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); }
.art-faq { margin: 1.2em 0 2em; }
.art-faq summary h3 { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.art-faq details p { font-size: .92em; line-height: 1.6; color: var(--text); }
.art-body__text .art-faq p + p { margin-top: 0; }
.post-preview { margin: 0 0 18px; padding: 10px 14px; background: var(--mist, #eef1f3); color: var(--ink); font-size: 14px; }
.img-tag--inline { position: static; display: inline-block; align-self: center; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* R11 T07: Film eines Projekts (Admin-Feld „Film“), erstes Medium auf der Projektseite */
.pj-filmwrap { margin-block: clamp(8px, 2vw, 24px) clamp(24px, 4vw, 56px); }
.pj-film { margin: 0; }
.pj-film video, .pj-film iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: var(--ink, #0f202d); }
.pj-film--link { font-size: 17px; }
/* R12: Film fremder Server erst nach Klick (Datenschutz #filme) */
.pj-film--gate { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; padding: clamp(18px, 4vw, 48px); color: #fff; background: linear-gradient(rgba(15,32,45,.82), rgba(15,32,45,.9)), var(--film-poster, none) center / cover no-repeat, var(--ink, #0f202d); }
.pj-film__gate { max-width: 52ch; display: grid; gap: 18px; justify-items: start; font-size: 15px; line-height: 1.55; }
.pj-film__gate strong { display: block; font-size: clamp(18px, 2vw, 22px); font-weight: 500; margin-bottom: 6px; }
.pj-film__gate .link { color: inherit; }
@media (max-width: 599px) { .pj-film--gate { aspect-ratio: auto; min-height: 56vw; } .pj-film__gate { font-size: 14px; } }
.pj-draft { margin-block: 12px; padding: 10px 16px; background: #fbf3ea; border: 1px solid #ecd3b8; font-size: 14px; }

/* ---------- R12 Über uns: bewegte Bühnen aus svc-anim (Disziplinen-Showreel, Raster, Arbeitsweise, Standort) ---------- */
.ab-stage { height: min(78vh, 52vw); }
.ab-disc { padding-top: clamp(80px, 12vh, 150px); display: grid; gap: clamp(30px, 5vh, 56px); }
.ab-disc__head { display: grid; gap: 18px; max-width: 62ch; }
.ab-disc__head > p:not(.label) { color: var(--muted); font-size: var(--t-body); line-height: 1.55; }
.ab-disc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; list-style: none; margin: 0; padding: 0; }
.ab-disc__t { display: grid; gap: 6px; align-content: start; color: var(--ink); outline: none; }
.ab-disc__t:focus-visible { outline: 2px solid var(--copper-text); outline-offset: 4px; }
.ab-disc__m { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0b1823; margin-bottom: 10px; }
.ab-disc__m .sa { position: absolute; inset: 0; min-height: 0; }
.ab-disc__m .sa canvas { opacity: .58; transform: scale(1.04); transition: opacity .6s var(--e-out), transform 1.2s var(--e-out); }
.ab-disc__t.is-act .ab-disc__m .sa canvas, html.rm .ab-disc__m .sa canvas { opacity: 1; transform: none; }
.ab-disc__m::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--e-out); }
.ab-disc__t.is-act .ab-disc__m::after { transform: none; }
.ab-disc__t em { font-style: normal; font-size: var(--t-xs); color: var(--copper-text); font-variant-numeric: tabular-nums; }
.ab-disc__t strong { font-size: clamp(18px, 1.35vw, 22px); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.ab-disc__l { color: var(--muted); font-size: var(--t-s); line-height: 1.5; }
.ab-way { padding-block: clamp(80px, 12vh, 150px) clamp(40px, 6vh, 80px); }
.ab-way__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ab-way__text { grid-column: 1 / 6; }
.ab-way__head { display: grid; gap: 18px; }
.ab-way__steps { list-style: none; margin: 0; padding: 0; }
.ab-way__steps li { position: relative; display: grid; gap: 10px; align-content: center; min-height: 56vh; padding-left: 24px; border-left: 1px solid var(--line-2); }
.ab-way__steps li::before { content: ""; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 3px; background: var(--grad); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--e-out); }
.ab-way__steps li.is-on::before { transform: none; }
.ab-way__steps em { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-way__steps strong { font-size: clamp(26px, 2.4vw, 42px); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; color: var(--muted); transition: color .5s var(--e-out); }
.ab-way__steps li.is-on strong, html.rm .ab-way__steps strong { color: var(--ink); }
.ab-way__steps p { color: var(--muted); font-size: var(--t-body); max-width: 38ch; }
.ab-way__stage { grid-column: 7 / 13; position: sticky; top: calc(var(--hd) + 4vh); height: calc(100svh - var(--hd) - 8vh); min-height: 380px; align-self: start; }
.ab-way__in { position: absolute; inset: 0; overflow: hidden; background: #0b1823; }
.ab-way__in .sa, .ab-place__stage .sa { position: absolute; inset: 0; min-height: 0; }
.ab-place { background: #0b1823; color: #fff; padding-block: clamp(80px, 12vh, 150px); }
.ab-place__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.ab-place__text { grid-column: 1 / 6; display: grid; gap: 22px; justify-items: start; }
.ab-place .h2 { color: #fff; }
.ab-place__text > p:not(.label) { color: rgba(255,255,255,.84); font-size: var(--t-body); line-height: 1.6; max-width: 46ch; }
.ab-place__dl { display: grid; margin: 6px 0 0; width: 100%; }
.ab-place__dl > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.16); }
.ab-place__dl dt { color: rgba(255,255,255,.7); font-size: var(--t-s); }
.ab-place__dl dd { margin: 0; color: #fff; }
.ab-place__dl .link { margin-left: 6px; }
.ab-place__stage { grid-column: 6 / 13; position: relative; margin: 0; aspect-ratio: 5 / 4; }
@media (max-width: 899px) {
  .ab-stage { height: auto; aspect-ratio: 4 / 5; max-height: 76svh; }
  .ab-disc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .ab-disc__l { display: none; }
  .ab-way__grid { display: flex; flex-direction: column; gap: 0; }
  .ab-way__text { display: contents; }
  .ab-way__head { order: 1; margin-bottom: 26px; }
  .ab-way__stage { order: 2; z-index: 2; top: calc(var(--hd) + 8px); height: 40svh; min-height: 240px; width: 100%; }
  .ab-way__steps { order: 3; }
  .ab-way__steps li { min-height: 48svh; }
  .ab-place__text, .ab-place__stage { grid-column: 1 / -1; }
  .ab-place__stage { aspect-ratio: 1 / 1; }
  .ab-place__dl > div { grid-template-columns: 1fr; gap: 2px; }
}
.ab-place__stage .sa { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); background: transparent; }
@media (max-width: 899px) { .ab-way__steps li { align-content: start; padding-top: 14svh; } }