@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --black: #07090B;
  --night: #0d1114;
  --teal: #1B2A2E;
  --fog: #AEB9BC;
  --amber: #D9A15A;
  --accent: #D5805E;
  --ink: #101C28;
  --paper: #F2F0EA;
  --pad: clamp(20px, 5vw, 72px);
  --rail: 96px;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: "Space Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--black); color: var(--paper); font-family: var(--serif); font-weight: 350; font-size: 18px; line-height: 1.5; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: italic; }
.mono { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 400; background: var(--paper); color: #000; padding: 10px 14px; font-family: var(--mono); font-size: 13px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ph { border-bottom: 1.5px dotted currentColor; }

.loading { display: none; position: fixed; inset: 0; z-index: 300; }
.js.is-loading .loading, .js .loading.is-leaving { display: block; }
.loading_panel { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--black); transition: transform .95s var(--ease) .15s; }
.loading_panel--top { top: 0; }
.loading_panel--bottom { bottom: 0; }
.loading_core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .4s linear; }
.loading_count { color: var(--accent); font-size: 13px; letter-spacing: .3em; padding-left: .3em; }
.loading_name { font-size: clamp(26px, 4vw, 40px); font-weight: 300; letter-spacing: -.01em; }
.loading.is-leaving .loading_core { opacity: 0; }
.loading.is-leaving .loading_panel--top { transform: translateY(-101%); }
.loading.is-leaving .loading_panel--bottom { transform: translateY(101%); }

.bar { position: fixed; z-index: 100; top: 0; left: 0; right: 0; padding: 14px var(--pad) 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: none; }
.bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: .26em; min-height: 44px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 300; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.brand em { font-weight: 400; }
.menu { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 34px); }
.menu_btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; }
.menu_count { color: var(--accent); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; transform: translateY(-5px); }
.menu_btn > span:first-child { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.menu_btn::after { content: ""; position: absolute; left: 2px; bottom: 9px; width: 100%; max-width: calc(100% - 4px); height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.menu_btn:hover::after, .menu_btn:focus-visible::after, .menu_btn[aria-expanded="true"]::after { transform: scaleX(1); }

.stage { position: fixed; inset: 0; overflow: hidden; background: var(--black); }
.gl, .fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gl { opacity: 0; }
.has-gl .gl { opacity: 1; }
.has-gl .fallback { display: none; }
.fallback .fb { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s linear; }
.fallback .fb.is-on { opacity: 1; }
.shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to top, rgba(4, 6, 8, .84), rgba(4, 6, 8, .42) 34%, rgba(4, 6, 8, 0) 62%),
  linear-gradient(to bottom, rgba(4, 6, 8, .66), rgba(4, 6, 8, 0) 24%); }

.works { position: absolute; inset: 0; pointer-events: none; }
.work { position: absolute; inset: 0; visibility: hidden; display: grid; align-content: end; grid-template-columns: minmax(0, 1fr) minmax(300px, 40ch); grid-template-areas: "meta side" "title side"; column-gap: clamp(24px, 5vw, 96px); padding: 0 var(--pad) calc(var(--rail) + 22px); }
.work.is-current { visibility: visible; }
.work_meta { grid-area: meta; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; color: rgba(242, 240, 234, .8); }
.work_num { color: var(--paper); display: inline-flex; align-items: center; gap: 10px; }
.work_num::before { content: ""; width: 22px; height: 2px; background: var(--accent); }
.work_title { grid-area: title; margin: 0; font-weight: 300; font-size: clamp(40px, min(7.4vw, 12.5vh), 118px); line-height: 1; letter-spacing: -.03em; }
.work_title .mask { display: block; overflow: hidden; padding: .02em 0 .14em; margin-bottom: -.16em; }
.work_title em { font-style: italic; font-weight: 300; color: var(--accent); }
.work_title .ln { display: block; }
.work_side { grid-area: side; align-self: end; pointer-events: auto; padding-bottom: .5em; }
.work_desc { margin: 0 0 16px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; font-weight: 350; color: rgba(242, 240, 234, .9); text-shadow: 0 0 18px rgba(0, 0, 0, .6); max-width: 46ch; }
.work_trailer { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(242, 240, 234, .42); color: rgba(242, 240, 234, .78); cursor: not-allowed; transition: border-color .4s linear, color .4s linear; }
.work_trailer:hover { border-color: var(--accent); color: var(--paper); }

.work_title .ln { transform: translateY(108%); }
.work_meta, .work_side { opacity: 0; transform: translateY(12px); }
.work.is-in .ln { transform: none; transition: transform 1.15s var(--ease) .2s; }
.work.is-in .work_meta { opacity: 1; transform: none; transition: opacity .8s linear .1s, transform 1s var(--ease) .1s; }
.work.is-in .work_side { opacity: 1; transform: none; transition: opacity .9s linear .55s, transform 1.1s var(--ease) .55s; }
.work.is-out .ln { transform: translateY(-108%); transition: transform .55s var(--ease-in); }
.work.is-out .work_meta, .work.is-out .work_side { opacity: 0; transition: opacity .3s linear; }

.rail { position: absolute; left: var(--pad); right: var(--pad); bottom: 26px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 22px; z-index: 5; opacity: 0; transform: translateY(18px); transition: opacity .8s linear .9s, transform .9s var(--ease) .9s; }
.is-ready .rail { opacity: 1; transform: none; }
.rail_count { color: rgba(242, 240, 234, .7); padding-bottom: 14px; white-space: nowrap; }
.rail_count b { color: var(--paper); font-weight: 400; }
.rail_steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rail_steps li { flex: 1; min-width: 0; }
.rail_step { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 48px; padding-bottom: 12px; }
.rail_no { font-size: 10.5px; color: rgba(242, 240, 234, .5); transition: color .4s linear; }
.rail_line { display: block; height: 2px; background: rgba(242, 240, 234, .26); transition: background-color .4s linear, transform .6s var(--ease); transform-origin: left; }
.rail_step:hover .rail_no, .rail_step:focus-visible .rail_no { color: var(--paper); }
.rail_step:hover .rail_line { background: rgba(242, 240, 234, .7); }
.rail_step.is-active .rail_no { color: var(--accent); }
.rail_step.is-active .rail_line { background: var(--accent); transform: scaleY(2); }
.rail_nav { display: flex; gap: 6px; padding-bottom: 6px; }
.rail_btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(242, 240, 234, .3); transition: border-color .3s linear, background-color .3s linear; }
.rail_btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.rail_btn:hover { border-color: var(--accent); background: rgba(217, 161, 90, .12); }
.note { position: absolute; left: var(--pad); right: var(--pad); bottom: 7px; margin: 0; font-size: 10px; letter-spacing: .08em; color: rgba(242, 240, 234, .55); z-index: 6; }

.sheet, .about { position: fixed; inset: 0; z-index: 150; background: var(--black); overflow-y: auto; clip-path: inset(100% 0 0 0); visibility: hidden; transition: clip-path .85s var(--ease), visibility 0s linear .85s; }
.sheet.is-open, .about.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .85s var(--ease), visibility 0s linear 0s; }
.sheet[hidden], .about[hidden] { display: block; }
.sheet_inner { max-width: 1320px; margin: 0 auto; padding: 22px var(--pad) 72px; }
.sheet_head { display: flex; align-items: center; gap: 24px; min-height: 44px; margin-bottom: 36px; border-bottom: 1px solid rgba(242, 240, 234, .2); padding-bottom: 14px; }
.sheet_head h2 { margin: 0; font-weight: 400; }
.sheet_meta { color: rgba(242, 240, 234, .55); margin-right: auto; }
.sheet_close { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; white-space: nowrap; }
.sheet_close:hover { color: var(--accent); }
.sheet_grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px clamp(18px, 2.4vw, 36px); }
.sheet_grid a { display: block; }
.frame { position: relative; display: block; background: var(--night); padding: 22px 0; border: 1px solid rgba(242, 240, 234, .14); }
.frame::before, .frame::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(to right, transparent 0, transparent 7px, rgba(242, 240, 234, .22) 7px, rgba(242, 240, 234, .22) 13px, transparent 13px, transparent 20px); }
.frame::before { top: 7px; }
.frame::after { bottom: 7px; }
.frame_no { position: absolute; right: 8px; bottom: 6px; z-index: 2; font-size: 9px; color: var(--accent); background: var(--night); padding: 0 4px; }
.thumb { display: block; aspect-ratio: 16 / 9; background: #111 center / cover no-repeat; filter: saturate(.55) brightness(.82); transition: filter .5s linear, transform .8s var(--ease); }
.sheet_grid a:hover .thumb, .sheet_grid a:focus-visible .thumb { filter: none; transform: scale(1.015); }
.cap { display: flex; align-items: baseline; gap: 14px; margin-top: 12px; font-size: 24px; font-weight: 300; letter-spacing: -.01em; line-height: 1.2; }
.cap .mono { color: var(--accent); font-size: 11px; }
.sheet_grid li { opacity: 0; transform: translateY(26px); }
.sheet.is-open .sheet_grid li { opacity: 1; transform: none; transition: opacity .7s linear calc(.3s + var(--i, 0) * .08s), transform .9s var(--ease) calc(.3s + var(--i, 0) * .08s); }
.about_inner { max-width: 700px; margin: 0 auto; padding: 20px var(--pad) 80px; }
.about_inner .sheet_close { display: flex; margin-left: auto; }
.about_inner h2 { font-weight: 400; margin: 6vh 0 18px; color: var(--accent); }
.about_lead { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.25; font-weight: 300; letter-spacing: -.01em; margin: 0 0 22px; }
.about_inner p { margin: 0 0 18px; }
.about_inner .small { font-size: 15px; color: rgba(242, 240, 234, .6); }

@media (max-width: 860px) {
  :root { --rail: 108px; }
  .work { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "side"; }
  .work_title { font-size: clamp(40px, 12.4vw, 84px); }
  .work_side { margin-top: 18px; padding-bottom: 0; }
  .work_desc { max-width: 38ch; font-size: 17px; }
  .menu { gap: 10px; }
  .menu_btn > span:first-child { font-size: 11px; letter-spacing: .1em; }
  .brand { font-size: 20px; }
  .rail { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .rail_count { display: none; }
  .rail_no { display: none; }
  .rail_step { min-height: 44px; padding-bottom: 20px; }
  .sheet_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .cap { font-size: 18px; flex-direction: column; gap: 2px; }
  .note { font-size: 9.5px; }
}
@media (max-width: 520px) {

  .menu_count { display: none; }
  .sheet_grid { grid-template-columns: minmax(0, 1fr); }
  .sheet_meta { display: none; }
  .sheet_head { justify-content: space-between; }
  .frame { padding: 18px 0; }
}

html:not(.js) body { overflow: auto; height: auto; }
html:not(.js) .stage { position: static; overflow: visible; }
html:not(.js) .gl, html:not(.js) .fallback, html:not(.js) .shade, html:not(.js) .rail { display: none; }
html:not(.js) .works { position: static; }
html:not(.js) .work { position: relative; inset: auto; visibility: visible; min-height: 100vh; padding-top: 120px; background: linear-gradient(rgba(4, 6, 8, .55), rgba(4, 6, 8, .55)), var(--bg, none) center / cover, var(--black); }
html:not(.js) .work_title .ln, html:not(.js) .work_meta, html:not(.js) .work_side { transform: none; opacity: 1; }
html:not(.js) .note { position: static; padding: 16px var(--pad); }
html:not(.js) .bar { position: absolute; }
#w-start { --bg: url("../web/bg-01.webp"); }
#w-modell { --bg: url("../web/bg-02.webp"); }
#w-ablauf { --bg: url("../web/bg-03.webp"); }
#w-pruefen { --bg: url("../web/bg-04.webp"); }
#w-weiter { --bg: url("../web/bg-05.webp"); }
#w-anfrage { --bg: url("../web/bg-06.webp"); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .work_title .ln, .work_meta, .work_side { transform: none; opacity: 1; }
  .rail { opacity: 1; transform: none; }
  .sheet_grid li { opacity: 1; transform: none; }
}

.menu_cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--accent); color: var(--paper); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; transition: background-color .35s linear, color .35s linear; }
.menu_cta:hover, .menu_cta:focus-visible { background: var(--accent); color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; background: var(--accent); color: var(--ink); border: 1px solid var(--accent); font-weight: 400; cursor: pointer; transition: background-color .3s linear, border-color .3s linear; }
.btn:hover, .btn:focus-visible { background: var(--paper); border-color: var(--paper); }
.work_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0; }
.textlink { text-transform: none; letter-spacing: .04em; display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid rgba(242, 240, 234, .35); color: rgba(242, 240, 234, .9); }
.textlink:hover { border-color: var(--accent); color: var(--paper); }
.facts { margin: 0 0 14px; display: grid; gap: 12px; }
.facts div { border-top: 1px solid rgba(242, 240, 234, .22); padding-top: 10px; }
.facts dt { color: var(--accent); margin: 0 0 4px; }
.facts dd { margin: 0; font-size: 16px; line-height: 1.45; color: rgba(242, 240, 234, .88); max-width: 46ch; }
.facts strong, .steps strong { font-weight: 500; color: var(--paper); }
.fine { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(242, 240, 234, .68); max-width: 52ch; }
.steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.steps li { border-top: 1px solid rgba(242, 240, 234, .22); padding-top: 10px; font-size: 16px; line-height: 1.45; color: rgba(242, 240, 234, .88); max-width: 48ch; }
.steps .mono { display: block; color: var(--accent); margin-bottom: 4px; }
.work--form { grid-template-columns: minmax(0, 1fr) minmax(320px, 46ch); }
.form { display: grid; gap: 12px; margin: 14px 0 10px; }
.field { display: grid; gap: 4px; }
.field label { color: rgba(242, 240, 234, .78); }
.field input, .field textarea { width: 100%; min-height: 46px; padding: 10px 12px; background: rgba(7, 9, 11, .72); color: var(--paper); border: 1px solid rgba(242, 240, 234, .42); border-radius: 0; font: inherit; font-size: 16px; }
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: #ff9d82; border-width: 2px; }
.error { display: none; margin: 0; color: #ffb59f; font-size: 14px; }
.error::before { content: "! "; font-family: var(--mono); }
[aria-invalid="true"] ~ .error { display: block; }
.error-summary { border: 2px solid #ff9d82; background: rgba(7, 9, 11, .85); padding: 10px 14px; margin: 0 0 10px; }
.error-summary p { margin: 0 0 4px; color: #ffb59f; }
.error-summary ul { margin: 0; padding-left: 18px; font-size: 15px; }
.error-summary a { text-decoration: underline; }
.form_row { margin: 4px 0 0; }
.status { border: 1px solid rgba(242, 240, 234, .4); background: rgba(7, 9, 11, .8); padding: 12px 14px; margin: 0 0 12px; font-size: 15px; }
.status p { margin: 0 0 8px; }
.status textarea { width: 100%; background: transparent; color: var(--paper); border: 1px solid rgba(242, 240, 234, .3); font-family: var(--mono); font-size: 12px; padding: 8px; }
.status .mono { color: var(--accent); }
.contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 6px 0 8px; font-size: 17px; }
.contact .mono { color: rgba(242, 240, 234, .7); flex-basis: 100%; }
.contact a { display: inline-flex; align-items: center; min-height: 40px; border-bottom: 1px solid rgba(242, 240, 234, .35); }
.contact a:hover { border-color: var(--accent); }
.work--form .work_title .ln { white-space: nowrap; }
@media (max-width: 860px) {
  .work_title { font-size: clamp(34px, 10.4vw, 64px); }
  .work--form { grid-template-columns: minmax(0, 1fr); overflow-y: auto; padding-top: 72px; scrollbar-width: thin; }
  .shade { background: linear-gradient(to top, rgba(4, 6, 8, .9), rgba(4, 6, 8, .66) 52%, rgba(4, 6, 8, .2) 80%, rgba(4, 6, 8, 0)), linear-gradient(to bottom, rgba(4, 6, 8, .66), rgba(4, 6, 8, 0) 18%); }
  .work_desc { font-size: 16px; max-width: none; }
  .facts dd, .steps li { font-size: 15px; }
  .menu_cta { padding: 0 12px; font-size: 11px; }
  .brand_pre { display: none; }
}
@media (max-width: 520px) {
  .brand_post { display: none; }
  .menu_count { display: none; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .work_title { font-size: clamp(36px, min(6.4vw, 10.5vh), 92px); }
  .facts dd, .steps li { font-size: 15px; }
  .work_desc { font-size: 15px; }
}

.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 86px; background: linear-gradient(to bottom, rgba(4, 6, 8, .72), rgba(4, 6, 8, 0)); pointer-events: none; z-index: -1; }
@media (max-width: 860px) {
  .note_more { display: none; }
  .rail { bottom: 30px; }
  .work--form { padding-bottom: calc(var(--rail) + 44px); }
}

.work_side { background: rgba(5, 7, 9, .66); border-top: 1px solid rgba(242, 240, 234, .3); padding: 16px 20px 14px; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.facts dt, .steps .mono { color: var(--paper); display: flex; align-items: center; gap: 10px; }
.facts dt::before, .steps .mono::before { content: ""; width: 16px; height: 2px; background: var(--accent); flex: none; }
.status .mono, .menu_count { color: var(--accent); }
@media (max-width: 860px) {
  .work_side { background: none; border-top: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 860px) {
  .bar::before { height: 96px; background: linear-gradient(to bottom, rgba(4, 6, 8, .94) 0%, rgba(4, 6, 8, .82) 55%, rgba(4, 6, 8, 0)); }
}

.has-chars .work_title .ln { transform: none !important; }
.wd { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: 0 100%; filter: blur(7px); opacity: 0; }
.work.is-in .wd { transform: none; filter: blur(0); opacity: 1; transition: transform 1.05s var(--ease) calc(.18s + var(--wi, 0) * 95ms), filter .9s linear calc(.18s + var(--wi, 0) * 95ms), opacity .5s linear calc(.18s + var(--wi, 0) * 95ms); }
.work.is-out .wd { transform: translateY(-112%) rotate(-3deg); filter: blur(5px); opacity: 0; transition: transform .55s var(--ease-in) calc(var(--wi, 0) * 40ms), filter .4s linear, opacity .35s linear; }
.has-chars .work_side > * { opacity: 0; transform: translateY(14px); }
.has-chars .work.is-in .work_side > * { opacity: 1; transform: none; transition: opacity .8s linear calc(.62s + var(--si, 0) * 90ms), transform 1s var(--ease) calc(.62s + var(--si, 0) * 90ms); }
.has-chars .work.is-out .work_side > * { opacity: 0; transition: opacity .25s linear; }

.work_side { max-height: none; overflow: visible; }
.work--form { grid-template-columns: minmax(0, 1fr) minmax(340px, 54ch); }
.work--form .form { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 10px; }
.work--form .form .field:nth-of-type(3), .work--form .form .form_row, .work--form .form .fine { grid-column: 1 / -1; }
@media (max-height: 800px) and (min-width: 861px) {
  .work--form .work_desc { font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
  .work--form .fine { font-size: 13px; }
  .work--form .contact { margin: 2px 0 4px; font-size: 16px; }
  .field textarea { min-height: 64px; }
  .field input { min-height: 42px; }
  .work_side { padding: 12px 16px 10px; }
  .facts { gap: 8px; margin-bottom: 8px; }
  .steps { gap: 8px; }
}
@media (max-width: 860px) {
  .work_side { max-height: none; overflow: visible; }
  .work--form .form { grid-template-columns: 1fr; }
}
html:not(.js) .wd { transform: none; filter: none; opacity: 1; }
html:not(.js) .work_side > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wd { transform: none; filter: none; opacity: 1; }
  .has-chars .work_side > * { opacity: 1; transform: none; }
}

.work--form { grid-template-areas: "meta side" "title side" "desc side"; }
.work--form > .work_desc { grid-area: desc; margin: 14px 0 0; max-width: 44ch; align-self: start; }
.has-chars .work--form > .work_desc { opacity: 0; transform: translateY(14px); }
.has-chars .work--form.is-in > .work_desc { opacity: 1; transform: none; transition: opacity .8s linear .6s, transform 1s var(--ease) .6s; }
.has-chars .work--form.is-out > .work_desc { opacity: 0; transition: opacity .25s linear; }
.work--form .work_side { align-self: end; }
@media (max-width: 860px) {
  .work--form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "desc" "side"; }
  .work--form > .work_desc { max-width: none; }
}

.shade { background:
  linear-gradient(to right, rgba(4, 6, 8, .9) 0%, rgba(4, 6, 8, .78) 30%, rgba(4, 6, 8, .42) 50%, rgba(4, 6, 8, 0) 74%),
  linear-gradient(to top, rgba(4, 6, 8, .88), rgba(4, 6, 8, .5) 22%, rgba(4, 6, 8, 0) 46%),
  linear-gradient(to bottom, rgba(4, 6, 8, .66), rgba(4, 6, 8, 0) 22%); }
.work_side { background: rgba(5, 7, 9, .78); }
@media (max-width: 860px) {
  .shade { background: linear-gradient(to bottom, rgba(4, 6, 8, .62) 0%, rgba(4, 6, 8, .72) 30%, rgba(4, 6, 8, .9) 70%, rgba(4, 6, 8, .94) 100%); }
  .work_side { background: none; }
}

.shade { background:
  radial-gradient(ellipse 70% 55% at 32% 52%, rgba(4, 6, 8, .46), rgba(4, 6, 8, 0) 100%),
  linear-gradient(to bottom, rgba(4, 6, 8, .62), rgba(4, 6, 8, 0) 22%),
  linear-gradient(to top, rgba(4, 6, 8, .72), rgba(4, 6, 8, .34) 28%, rgba(4, 6, 8, 0) 56%); }
.work_side { background: rgba(5, 7, 9, .66); }
@media (max-width: 860px) {
  .shade { background: linear-gradient(to top, rgba(4, 6, 8, .9), rgba(4, 6, 8, .68) 52%, rgba(4, 6, 8, .26) 80%, rgba(4, 6, 8, 0)), linear-gradient(to bottom, rgba(4, 6, 8, .66), rgba(4, 6, 8, 0) 18%); }
  .work_side { background: none; }
}
@media (max-width: 860px) {
  .shade { background: linear-gradient(to bottom, rgba(4, 6, 8, .8) 0%, rgba(4, 6, 8, .82) 30%, rgba(4, 6, 8, .9) 70%, rgba(4, 6, 8, .94) 100%); }
}

.shade { background:
  linear-gradient(to right, rgba(4, 6, 8, .9) 0%, rgba(4, 6, 8, .76) 30%, rgba(4, 6, 8, .38) 50%, rgba(4, 6, 8, 0) 72%),
  linear-gradient(to top, rgba(4, 6, 8, .86), rgba(4, 6, 8, .46) 22%, rgba(4, 6, 8, 0) 44%),
  linear-gradient(to bottom, rgba(4, 6, 8, .62), rgba(4, 6, 8, 0) 20%); }
.work_side { background: rgba(5, 7, 9, .76); }
@media (max-width: 860px) {
  .shade { background: linear-gradient(to bottom, rgba(4, 6, 8, .8) 0%, rgba(4, 6, 8, .82) 30%, rgba(4, 6, 8, .9) 70%, rgba(4, 6, 8, .94) 100%); }
  .work_side { background: none; }
}

.shade { background:
  radial-gradient(ellipse 54% 48% at 21% 77%, rgba(4, 6, 8, .86) 0%, rgba(4, 6, 8, .72) 45%, rgba(4, 6, 8, 0) 100%),
  linear-gradient(to top, rgba(4, 6, 8, .6), rgba(4, 6, 8, 0) 15%),
  linear-gradient(to bottom, rgba(4, 6, 8, .5), rgba(4, 6, 8, 0) 15%); }
@media (max-width: 860px) {
  .shade { background: linear-gradient(to bottom, rgba(4, 6, 8, .74) 0%, rgba(4, 6, 8, .8) 30%, rgba(4, 6, 8, .88) 70%, rgba(4, 6, 8, .92) 100%); }
}
.work_meta { justify-self: start; padding: 7px 14px; margin-left: -14px; background: rgba(5, 7, 9, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (min-width: 861px) {
  .shade { background:
    radial-gradient(ellipse 58% 54% at 21% 77%, rgba(4, 6, 8, .88) 0%, rgba(4, 6, 8, .74) 48%, rgba(4, 6, 8, 0) 100%),
    linear-gradient(to top, rgba(4, 6, 8, .6), rgba(4, 6, 8, 0) 15%),
    linear-gradient(to bottom, rgba(4, 6, 8, .5), rgba(4, 6, 8, 0) 15%); }
}
.work--form > .work_desc { background: rgba(5, 7, 9, .62); padding: 12px 14px; margin-left: -14px; margin-right: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 860px) { .work--form > .work_desc { background: none; padding: 0; margin-left: 0; } .work_meta { background: none; padding: 0; margin-left: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } }

.work_desc { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; max-width: 52ch; }
.facts dd, .steps li { font-size: clamp(17.5px, 1.25vw, 19.5px); line-height: 1.5; max-width: 54ch; }
.facts dt, .steps .mono { font-size: 13px; letter-spacing: .1em; }
.fine { font-size: clamp(16px, 1.1vw, 17.5px); line-height: 1.5; color: rgba(242, 240, 234, .78); max-width: 58ch; }
.contact { font-size: 19px; }
.field label { font-size: 13px; }
.field input, .field textarea { font-size: 17px; }
@media (min-width: 861px) {
  .work { grid-template-columns: minmax(0, 1fr) minmax(380px, 54ch); }
  .work--form { grid-template-columns: minmax(0, 1fr) minmax(400px, 58ch); }
  .work_side { padding: 18px 22px 16px; }
}
@media (max-height: 800px) and (min-width: 861px) {
  .work_desc { font-size: 17.5px; }
  .facts dd, .steps li { font-size: 16.5px; }
  .fine { font-size: 15.5px; }
  .work--form .work_desc { font-size: 16px; line-height: 1.45; margin-bottom: 8px; }
  .work--form .fine { font-size: 14.5px; }
  .work--form .contact { font-size: 17px; }
}
@media (max-width: 860px) {
  .work_desc { font-size: 18px; }
  .facts dd, .steps li { font-size: 17px; }
  .fine { font-size: 15.5px; }
}

.work_meta { align-self: end; }

:root { --pv-top: .2; --pv-head: 76px; --pv-side-w: min(38vw, 560px); --pv-ty: calc(var(--pv-head) + (100vh - var(--pv-head) - var(--rail) - 22px) * var(--pv-top)); }
@media (min-width: 861px) {
  #w-start, #w-modell { align-content: start; padding-top: var(--pv-ty); grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title"; }
  #w-start .work_side, #w-modell .work_side { position: absolute; right: var(--pad); top: var(--pv-ty); width: var(--pv-side-w); max-height: none; align-self: auto; }
  #w-start .work_title, #w-modell .work_title { font-size: clamp(38px, min(5.6vw, 10.4vh), 96px); }
  html:has(#w-start.is-current) .shade, html:has(#w-modell.is-current) .shade { background:
    radial-gradient(ellipse 46% 36% at 24% 40%, rgba(4, 6, 8, .84) 0%, rgba(4, 6, 8, .68) 50%, rgba(4, 6, 8, 0) 100%),
    linear-gradient(to top, rgba(4, 6, 8, .6), rgba(4, 6, 8, 0) 15%),
    linear-gradient(to bottom, rgba(4, 6, 8, .5), rgba(4, 6, 8, 0) 15%); }
}

html[data-text="a"] .work_title .mask, html[data-text="b"] .work_title .mask { overflow: visible; }
html[data-text="a"] .work_title .ln, html[data-text="b"] .work_title .ln { transform: none; opacity: 0; }
html[data-text="b"] .work_title .ln { transform: translateY(9px); }
html[data-text="a"] .work_meta, html[data-text="b"] .work_meta,
html[data-text="a"] .work_side, html[data-text="b"] .work_side,
html[data-text="a"] .work--form > .work_desc, html[data-text="b"] .work--form > .work_desc { opacity: 0; transform: none; }

html[data-text="a"] .work:is(#w-start, #w-modell).is-in .work_meta, html[data-text="b"] .work:is(#w-start, #w-modell).is-in .work_meta { opacity: 1; transform: none; transition: opacity .6s ease-out 0s; }
html[data-text="a"] .work:is(#w-start, #w-modell).is-in .work_title .mask:nth-child(1) .ln { opacity: 1; transition: opacity .7s ease-out .12s; }
html[data-text="a"] .work:is(#w-start, #w-modell).is-in .work_title .mask:nth-child(2) .ln { opacity: 1; transition: opacity .7s ease-out .24s; }
html[data-text="b"] .work:is(#w-start, #w-modell).is-in .work_title .mask:nth-child(1) .ln { opacity: 1; transform: none; transition: opacity .6s ease-out .12s, transform .7s cubic-bezier(.22, .8, .3, 1) .12s; }
html[data-text="b"] .work:is(#w-start, #w-modell).is-in .work_title .mask:nth-child(2) .ln { opacity: 1; transform: none; transition: opacity .6s ease-out .24s, transform .7s cubic-bezier(.22, .8, .3, 1) .24s; }
html[data-text="a"] .work:is(#w-start, #w-modell).is-in .work_side, html[data-text="b"] .work:is(#w-start, #w-modell).is-in .work_side,
html[data-text="a"] .work--form.is-in > .work_desc, html[data-text="b"] .work--form.is-in > .work_desc { opacity: 1; transform: none; transition: opacity .7s ease-out .5s; }

html[data-text="a"] .work:is(#w-start, #w-modell).is-out .work_meta, html[data-text="b"] .work:is(#w-start, #w-modell).is-out .work_meta,
html[data-text="a"] .work:is(#w-start, #w-modell).is-out .ln, html[data-text="b"] .work:is(#w-start, #w-modell).is-out .ln,
html[data-text="a"] .work:is(#w-start, #w-modell).is-out .work_side, html[data-text="b"] .work:is(#w-start, #w-modell).is-out .work_side,
html[data-text="a"] .work--form.is-out > .work_desc, html[data-text="b"] .work--form.is-out > .work_desc { opacity: 0; transform: none; transition: opacity .3s linear; }

@media (prefers-reduced-motion: reduce) {
  html[data-text] .work_meta, html[data-text] .work_title .ln, html[data-text] .work_side, html[data-text] .work--form > .work_desc { opacity: 1; transform: none; transition: none; }
}
html[data-text="a"]:not([data-info]) .note::after { content: " · VORSCHAU Textauftritt A (Aufblenden)"; }
html[data-text="b"]:not([data-info]) .note::after { content: " · VORSCHAU Textauftritt B (Editorial Reveal)"; }
html[data-text="cur"]:not([data-info]) .note::after { content: " · VORSCHAU Referenz: bisheriger Textauftritt aus v21"; }
.note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.si_label { display: none; margin: 0 0 12px; }
.arr { display: inline-block; vertical-align: middle; margin-left: 10px; transition: transform .25s ease; }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(4px); }

@media (min-width: 861px) {
  html[data-info="a"] #w-start .work_side, html[data-info="a"] #w-modell .work_side,
  html[data-info="b"] #w-start .work_side, html[data-info="b"] #w-modell .work_side { opacity: 1; isolation: isolate; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  html[data-info="a"] .si_label, html[data-info="b"] .si_label { display: block; color: rgba(242, 240, 234, .94); }
  html[data-info="a"] #w-start .work_desc, html[data-info="a"] #w-modell .work_desc,
  html[data-info="b"] #w-start .work_desc, html[data-info="b"] #w-modell .work_desc { font-size: clamp(20px, 1.55vw, 24px); line-height: 1.42; font-weight: 380; color: #F2F0EA; max-width: 46ch; margin-bottom: 18px; text-shadow: none; }
  html[data-info="a"] #w-modell .facts dd, html[data-info="b"] #w-modell .facts dd { font-size: clamp(16.5px, 1.2vw, 18.5px); color: rgba(242, 240, 234, .9); }
  html[data-info="a"] #w-modell .fine, html[data-info="b"] #w-modell .fine { font-size: clamp(15.5px, 1.05vw, 17px); color: rgba(242, 240, 234, .78); }

  html[data-info="a"] #w-start .work_side, html[data-info="a"] #w-modell .work_side { background: none; padding: 6px 4px 6px 30px; }
  html[data-info="a"] #w-start .work_side::before, html[data-info="a"] #w-modell .work_side::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; }
  html[data-info="a"] #w-start .work_side::after, html[data-info="a"] #w-modell .work_side::after { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -190px -230px -150px -250px; background: radial-gradient(ellipse closest-side at 52% 54%, rgba(4, 6, 8, .9) 0%, rgba(4, 6, 8, .86) 62%, rgba(4, 6, 8, .5) 82%, rgba(4, 6, 8, 0) 100%); opacity: 0; }

  html[data-info="b"] #w-start .work_side, html[data-info="b"] #w-modell .work_side { background: rgba(28, 20, 15, .88); padding: 24px 28px 22px; }
  html[data-info="b"] #w-start .work_side::before, html[data-info="b"] #w-modell .work_side::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
  html[data-info="b"] .work_side { border-top: 0; }

  html[data-info="a"] #w-start .work_side > *, html[data-info="a"] #w-modell .work_side > *,
  html[data-info="b"] #w-start .work_side > *, html[data-info="b"] #w-modell .work_side > * { opacity: 0; }
  html[data-info="b"] #w-start .work_side, html[data-info="b"] #w-modell .work_side { background-color: rgba(28, 20, 15, 0); }

  html[data-info="a"] .work:is(#w-start, #w-modell).is-in .work_side::before { transform: scaleY(1); transition: transform .55s cubic-bezier(.22, .8, .3, 1) .35s; }
  html[data-info="a"] .work:is(#w-start, #w-modell).is-in .work_side::after { opacity: 1; transition: opacity .6s ease-out .3s; }
  html[data-info="b"] .work:is(#w-start, #w-modell).is-in .work_side { background-color: rgba(28, 20, 15, .88); transition: background-color .6s ease-out .4s; }
  html[data-info="b"] .work:is(#w-start, #w-modell).is-in .work_side::before { transform: scaleX(1); transition: transform .5s cubic-bezier(.22, .8, .3, 1) .75s; }

  html[data-info="a"] .work:is(#w-start, #w-modell).is-in .work_side > *, html[data-info="b"] .work:is(#w-start, #w-modell).is-in .work_side > * { opacity: 1; transition: opacity .6s ease-out; }
  html[data-info="a"] .work:is(#w-start, #w-modell).is-in .si_label, html[data-info="a"] .work:is(#w-start, #w-modell).is-in .work_desc { transition-delay: .6s; }
  html[data-info="a"] .work:is(#w-start, #w-modell).is-in .facts { transition-delay: .8s; }
  html[data-info="a"] .work:is(#w-start, #w-modell).is-in .fine { transition-delay: .9s; }
  html[data-info="a"] .work:is(#w-start, #w-modell).is-in .work_actions { transition-delay: .95s; }
  html[data-info="b"] .work:is(#w-start, #w-modell).is-in .si_label, html[data-info="b"] .work:is(#w-start, #w-modell).is-in .work_desc { transition-delay: .85s; }
  html[data-info="b"] .work:is(#w-start, #w-modell).is-in .facts { transition-delay: 1.05s; }
  html[data-info="b"] .work:is(#w-start, #w-modell).is-in .fine { transition-delay: 1.15s; }
  html[data-info="b"] .work:is(#w-start, #w-modell).is-in .work_actions { transition-delay: 1.2s; }

  html[data-info="a"] .work:is(#w-start, #w-modell).is-out .work_side > *, html[data-info="b"] .work:is(#w-start, #w-modell).is-out .work_side > * { opacity: 0; transition: opacity .3s linear; }
  html[data-info="a"] .work:is(#w-start, #w-modell).is-out .work_side::before, html[data-info="a"] .work:is(#w-start, #w-modell).is-out .work_side::after { opacity: 0; transition: opacity .3s linear; }
  html[data-info="b"] .work:is(#w-start, #w-modell).is-out .work_side { background-color: rgba(28, 20, 15, 0); transition: background-color .3s linear; }
  html[data-info="b"] .work:is(#w-start, #w-modell).is-out .work_side::before { opacity: 0; transition: opacity .3s linear; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-info] .work_side > * { opacity: 1 !important; transition: none !important; }
  html[data-info="a"] .work_side::before { transform: none !important; transition: none !important; }
  html[data-info="a"] .work_side::after { opacity: 1 !important; transition: none !important; }
  html[data-info="b"] .work_side { background-color: rgba(28, 20, 15, .88) !important; transition: none !important; }
  html[data-info="b"] .work_side::before { transform: none !important; transition: none !important; }
  .arr { transition: none; }
}
html[data-info="a"] .note::after { content: " · VORSCHAU Infospalte A (Editorial Rail) · Titel B 9 px"; }
html[data-info="b"] .note::after { content: " · VORSCHAU Infospalte B (Dark Atelier) · Titel B 9 px"; }
html[data-info="cur"] .note::after { content: " · VORSCHAU Referenz: Infospalte wie v25"; }
@media (min-width: 861px) and (max-height: 760px) {
  html[data-info="b"] #w-start .work_side, html[data-info="b"] #w-modell .work_side { padding: 14px 24px 12px; }
  html[data-info="a"] #w-start .work_desc, html[data-info="a"] #w-modell .work_desc,
  html[data-info="b"] #w-start .work_desc, html[data-info="b"] #w-modell .work_desc { font-size: 19px; margin-bottom: 12px; }
  html[data-info="a"] .si_label, html[data-info="b"] .si_label { margin-bottom: 8px; }
}

.lv { position: fixed; z-index: 120; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 99px; background: rgba(4, 6, 8, .72); border: 1px solid rgba(242, 240, 234, .2); font: 500 12px/1 var(--mono); color: rgba(242, 240, 234, .9); }
.lv[hidden] { display: none; }
.lv_t { padding: 0 8px 0 6px; color: rgba(242, 240, 234, .65); letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.lv a { color: inherit; text-decoration: none; padding: 7px 10px; border-radius: 99px; white-space: nowrap; }
.lv a:hover { background: rgba(242, 240, 234, .12); }
.lv a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lv a.is-on { background: var(--accent); color: #07090B; }
@media (max-width: 1100px) { .lv { top: auto; bottom: 44px; left: var(--pad); transform: none; max-width: calc(100% - 2 * var(--pad)); flex-wrap: wrap; border-radius: 14px; } .lv_t { display: none; } }

@media (min-width: 861px) {
  #w-weiter .work_side { max-height: none; overflow: visible; background: rgba(5, 7, 9, .66); padding: 14px 24px 16px; }
  #w-weiter .steps { gap: 0; margin: 0 0 12px; }
  #w-weiter .steps li { border-top: 1px solid rgba(242, 240, 234, .22); padding: 8px 0; max-width: none; }
  #w-weiter .steps li:first-child { border-top: 0; padding-top: 2px; }
  #w-weiter .steps .lift { position: relative; margin: 0 -14px; padding: 10px 14px 11px; border-radius: 3px; background-color: rgba(217, 161, 90, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); cursor: default; }
  #w-weiter .steps .mono { margin-bottom: 5px; }
  #w-weiter .steps .mono::before { transform-origin: left center; opacity: .85; }

  #w-weiter .steps li { color: rgba(242, 240, 234, .78); }
  #w-weiter .steps strong { font-weight: 560; color: #F2F0EA; }
  #w-weiter .fine { color: rgba(242, 240, 234, .72); padding-top: 10px; border-top: 1px solid rgba(242, 240, 234, .22); }
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #w-weiter .steps .lift { transition: transform .26s cubic-bezier(.22, .8, .3, 1), background-color .26s ease-out, box-shadow .26s ease-out; will-change: transform; }
  #w-weiter .steps .mono::before { transition: transform .26s cubic-bezier(.22, .8, .3, 1), opacity .26s ease-out; }
  #w-weiter .steps li:hover > .lift { transform: translateY(-3px); background-color: rgba(217, 161, 90, .075); box-shadow: 0 7px 16px rgba(0, 0, 0, .26); }
  #w-weiter .steps li:hover .mono::before { transform: scaleX(1.5); opacity: 1; }
}

html[data-text] .work:not(#w-start):not(#w-modell).is-in .work_title .ln { opacity: 1; transform: none; transition: opacity .6s ease-out .2s, transform .7s cubic-bezier(.22, .8, .3, 1) .2s; }

@media (min-width: 861px) {
  #w-start .work_side, #w-modell .work_side { max-height: none; overflow: visible; }
}

@media (min-width: 861px) {
  :is(#w-modell, #w-ablauf, #w-pruefen) :is(.steps, .facts) .lift { position: relative; margin: 0 -14px; padding: 8px 14px 9px; border-radius: 3px; background-color: rgba(217, 161, 90, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); cursor: default; }
  :is(#w-ablauf, #w-pruefen) .steps li { padding-top: 4px; }
  #w-modell .facts > div { padding-top: 4px; }
  :is(#w-modell, #w-ablauf, #w-pruefen) :is(.steps .mono, .facts dt)::before { transform-origin: left center; }
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(#w-modell, #w-ablauf, #w-pruefen) :is(.steps, .facts) .lift { transition: transform .26s cubic-bezier(.22, .8, .3, 1), background-color .26s ease-out, box-shadow .26s ease-out; will-change: transform; }
  :is(#w-modell, #w-ablauf, #w-pruefen) :is(.steps .mono, .facts dt)::before { transition: transform .26s cubic-bezier(.22, .8, .3, 1), opacity .26s ease-out; }
  :is(#w-modell .facts > div, #w-ablauf .steps li, #w-pruefen .steps li):hover > .lift { transform: translateY(-3px); background-color: rgba(217, 161, 90, .075); box-shadow: 0 7px 16px rgba(0, 0, 0, .26); }
  :is(#w-modell .facts > div, #w-ablauf .steps li, #w-pruefen .steps li):hover :is(.mono, dt)::before { transform: scaleX(1.5); }
}

@media (min-width: 861px) and (max-height: 700px) {
  #w-modell { --pv-ty: var(--pv-head); }
  html[data-info] #w-modell .work_desc { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.36; margin-bottom: 8px; }
  html[data-info] #w-modell .facts { gap: 6px; margin-bottom: 8px; }
  #w-modell .facts dd { font-size: 15.5px; line-height: 1.4; }
  html[data-info] #w-modell .fine { font-size: 14.5px; line-height: 1.4; }
  #w-modell .facts .lift { padding: 6px 14px 7px; }
  #w-modell .si_label { margin-bottom: 6px; }
  :is(#w-ablauf, #w-pruefen) .steps { gap: 6px; }
  :is(#w-ablauf, #w-pruefen) .steps .lift { padding: 6px 14px 7px; }
  :is(#w-ablauf, #w-pruefen) .steps li { font-size: 15.5px; line-height: 1.4; }
}
@media (min-width: 861px) and (max-height: 620px) {
  html[data-info] #w-modell .work_desc { font-size: 16.5px; }
  #w-modell .facts dd { font-size: 14.5px; }
  html[data-info] #w-modell .fine { font-size: 13.5px; }
  :is(#w-ablauf, #w-pruefen) .steps li { font-size: 14.5px; }
  :is(#w-ablauf, #w-pruefen) .work_side { padding: 10px 16px 8px; }
}
@media (min-width: 861px) and (max-width: 1180px) and (max-height: 620px) {
  #w-modell .facts dd { font-size: 14px; line-height: 1.36; }
  html[data-info] #w-modell .work_desc { font-size: 16px; line-height: 1.32; }
  html[data-info] #w-modell .fine { font-size: 13px; }
}

.brand_l1, .brand_l2, .brand_la, .brand_lb { display: none; width: auto; }
html[data-logo="l1"] .brand_text { display: none; }
html[data-logo="l1"] .brand_l1 { display: block; height: 44px; }
html[data-logo="l2"] .brand_l2 { display: block; height: 38px; margin-right: 14px; order: -1; }
html[data-logo="la"] .brand_la, html[data-logo="lb"] .brand_lb { display: block; height: 38px; margin-right: 14px; order: -1; }
html[data-logo="l2"] .brand, html[data-logo="la"] .brand, html[data-logo="lb"] .brand { gap: 0; }
@media (max-width: 860px) { html[data-logo="l2"] .brand_l2, html[data-logo="la"] .brand_la, html[data-logo="lb"] .brand_lb { height: 32px; margin-right: 10px; } html[data-logo="l1"] .brand_l1 { height: 36px; } }

@media (min-width: 861px) {
  #w-start .work_side > .lift { position: relative; margin: 0 -10px 12px -12px; padding: 8px 12px 10px; border-radius: 3px; background-color: rgba(217, 161, 90, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); cursor: default; }
  html[data-info="a"] .work:is(#w-start).is-in .work_side > .lift { transition-delay: .6s; }
  html[data-info="b"] .work:is(#w-start).is-in .work_side > .lift { transition-delay: .85s; }
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html #w-start .work_side > .lift { transition: transform .26s cubic-bezier(.22, .8, .3, 1), background-color .26s ease-out, box-shadow .26s ease-out, opacity .6s ease-out; }
  html #w-start .work_side > .lift:hover { transform: translateY(-3px); background-color: rgba(217, 161, 90, .075); box-shadow: 0 7px 16px rgba(0, 0, 0, .26); }
}

.rail_route { position: relative; min-width: 0; }
.rail_wheel { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none; color: var(--accent); opacity: 0; z-index: 2; will-change: transform; }
.rail_wheel.is-set { opacity: 1; }
.rail_wheel svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rail_wheel .rw_spin { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transform-origin: 12px 12px; transform: rotate(var(--rw-rot, 0deg)); }
.rail_wheel .rw_spin path { stroke-width: 1; opacity: .9; }
.rail_wheel .rw_hub { fill: currentColor; stroke: none; }
.rail_wheel { background: rgba(7, 9, 11, .55); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .rail_wheel.is-set { transition: transform var(--rw-dur, 1s) cubic-bezier(.45, .05, .25, 1), opacity .5s linear; }
  .rail_wheel .rw_spin { transition: transform var(--rw-dur, 1s) cubic-bezier(.45, .05, .25, 1); }
  .rail_wheel.is-instant, .rail_wheel.is-instant .rw_spin { transition: none !important; }
}

@media (min-width: 861px) and (max-height: 700px) {
  .work--form .work_side { max-height: none; padding: 10px 16px 8px; }
  .work--form .form { row-gap: 6px; column-gap: 12px; }
  .work--form .field label { font-size: 12px; margin-bottom: 2px; }
  .work--form .field input { min-height: 36px; font-size: 16px; padding-top: 4px; padding-bottom: 4px; }
  .work--form .field textarea { min-height: 44px; font-size: 16px; }
  .work--form .work_desc { font-size: 13.5px; line-height: 1.35; margin-bottom: 6px; }
  .work--form .btn { min-height: 38px; }
  .work--form .form_row { margin: 2px 0; }
  .work--form .fine { font-size: 12.5px; line-height: 1.35; }
  .work--form .contact { font-size: 14.5px; margin: 0 0 2px; }
  .work--form .contact .mono { font-size: 11.5px; }
}
@media (min-width: 861px) and (max-height: 600px) {
  .work--form .field textarea { min-height: 36px; }
  .work--form .field input { min-height: 32px; }
  .work--form .work_desc { font-size: 12.5px; margin-bottom: 4px; }
  .work--form { padding-bottom: calc(var(--rail) + 10px); }
}

@media (min-width: 861px) and (max-height: 700px) {
  #w-weiter .steps li { padding: 5px 0; font-size: 15.5px; line-height: 1.38; }
  #w-weiter .steps .lift { padding: 6px 14px 7px; }
  #w-weiter .fine { font-size: 14.5px; line-height: 1.38; padding-top: 7px; }
  #w-weiter .work_side { padding: 10px 24px 12px; }
}
@media (min-width: 861px) and (max-height: 620px) {
  #w-weiter .steps li { font-size: 14.5px; line-height: 1.34; padding: 3px 0; }
  #w-weiter .steps .lift { padding: 4px 14px 5px; }
  #w-weiter .steps .mono { margin-bottom: 3px; }
  #w-weiter .fine { font-size: 13.5px; padding-top: 5px; }
  .work--form .field label { font-size: 11px; }
  .work--form .field input { min-height: 30px; }
  .work--form .form { row-gap: 4px; }
  .work--form .contact { font-size: 13.5px; }
  .work--form .fine { font-size: 12px; }
}

.st_icon, .st_label, .rail_bike { display: none; }
@media (min-width: 861px) {
  html.has-street .st_icon { display: block; height: 26px; width: var(--iw, 36px); margin-bottom: -3.25px; background-color: currentColor; -webkit-mask: var(--ico) left bottom / contain no-repeat; mask: var(--ico) left bottom / contain no-repeat; transition: color .4s linear; }
  html.has-street .rail_step { gap: 0; min-height: 0; padding-bottom: 0; color: rgba(242, 240, 234, .55); }
  html.has-street .rail_step:hover, html.has-street .rail_step:focus-visible { color: var(--paper); }
  html.has-street .rail_step.is-active { color: var(--accent); }
  html.has-street .rail_no { display: none; }
  html.has-street .rail_line { margin-top: 0; }
  html.has-street .st_label { display: flex; gap: 6px; margin-top: 7px; font-size: 10.5px; line-height: 1.1; letter-spacing: .06em; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.has-street .st_label i { font-style: normal; opacity: .65; }
  html.has-street .rail_step.is-active .st_label { color: var(--accent); }
  html.has-street .rail_step:not(.is-active) .st_label { color: rgba(242, 240, 234, .62); }
  html.has-street .rail_step:hover .st_label { color: var(--paper); }
  html.has-street .rail_step.is-active .rail_line { transform: none; background: var(--accent); }
  html.has-street .rail_step:not(.is-active) .rail_line { background: rgba(242, 240, 234, .3); }
  html.has-street .rail_route { padding-top: 0; }
  html.has-street .rail_bike { display: block; position: absolute; left: 0; top: 0; width: 30px; height: 22px; pointer-events: none; color: var(--accent); z-index: 3; opacity: 0; will-change: transform; }
  html.has-street .rail_bike.is-set { opacity: 1; }
  html.has-street .rail_wheel { display: none; }
  .bk_flip { display: block; width: 100%; height: 100%; transform: scaleX(var(--bk-face, 1)); transform-origin: 50% 50%; }
  .bk_flip svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .bk_flip .wheel { transform-box: fill-box; transform-origin: center; transform: rotate(var(--bk-rot, 0deg)); }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html.has-street .rail_bike.is-set { transition: transform var(--bk-dur, 1s) cubic-bezier(.45, .05, .25, 1), opacity .5s linear; }
  .bk_flip .wheel { transition: transform var(--bk-dur, 1s) cubic-bezier(.45, .05, .25, 1); }
  html.has-street .rail_bike.is-instant, html.has-street .rail_bike.is-instant .wheel { transition: none !important; }
}

.rail_steps li:nth-child(1) .st_icon { --ico: url(../street/station-1-zu-euch.svg); }
.rail_steps li:nth-child(2) .st_icon { --ico: url(../street/station-2-einsatz.svg); }
.rail_steps li:nth-child(3) .st_icon { --ico: url(../street/station-3-ablauf.svg); }
.rail_steps li:nth-child(4) .st_icon { --ico: url(../street/station-4-check.svg); }
.rail_steps li:nth-child(5) .st_icon { --ico: url(../street/station-5-werkstatt.svg); }
.rail_steps li:nth-child(6) .st_icon { --ico: url(../street/station-6-anfrage.svg); }

@media (min-width: 861px) {
  html.has-street .rail::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); bottom: -26px; top: -34px; background: linear-gradient(to top, rgba(4, 6, 8, .7) 0%, rgba(4, 6, 8, .5) 55%, rgba(4, 6, 8, 0) 100%); }
}

@media (min-width: 861px) {
  html.has-street .rail_steps li { transition: none; }
  html.has-street .rail_steps li.is-arrived { margin-left: 20px; margin-right: 20px; }
  html.has-street .rail_steps li:first-child.is-arrived { margin-left: 0; margin-right: 36px; }
  html.has-street .rail_steps li:last-child.is-arrived { margin-left: 36px; margin-right: 0; }
  html.has-street .rail_steps li.is-arrived .st_icon { transform: scale(1.1); transform-origin: left bottom; }
  html.has-street .rail_steps li.is-arrived .st_label { color: var(--accent); }
  html.has-street .rail_steps li.is-arrived .st_label i { opacity: 1; }
  html.has-street .rail_step.is-active .st_icon { color: var(--accent); }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html.has-street .rail_route.rs-anim .rail_steps li { transition: margin .38s cubic-bezier(.22, .8, .3, 1); }
  html.has-street .rail_route.rs-anim .rail_steps li .st_icon { transition: transform .38s cubic-bezier(.22, .8, .3, 1), color .4s linear; }
}

@media (min-width: 861px) and (max-width: 1180px) {
  html.has-street .st_label i { display: none; }
  html.has-street .st_label { letter-spacing: .03em; }
}

@media (min-width: 861px) {
  :is(#w-ablauf, #w-pruefen, #w-weiter) .work_side { background: rgba(5, 7, 9, .74); }
  :is(#w-ablauf, #w-pruefen, #w-weiter) .steps li, #w-modell .facts dd { color: rgba(242, 240, 234, .92); }
  :is(#w-ablauf, #w-pruefen, #w-weiter) .steps strong, #w-modell .facts strong { font-weight: 600; color: #F7F5EF; }
  #w-weiter .fine, #w-modell .fine { color: rgba(242, 240, 234, .84); }
  .steps .mono, .facts dt, .si_label { font-size: 13px; letter-spacing: .1em; }
  html[data-info] .si_label { font-weight: 500; }
}
@media (min-width: 861px) and (min-height: 701px) {
  :is(#w-ablauf, #w-pruefen, #w-weiter) .steps li { font-size: clamp(17.5px, 1.3vw, 20px); line-height: 1.5; max-width: 54ch; }
  :is(#w-ablauf, #w-pruefen) .work_desc { font-size: clamp(18.5px, 1.45vw, 22px); line-height: 1.5; }
  #w-weiter .fine, #w-modell .fine { font-size: clamp(16px, 1.1vw, 17.5px); line-height: 1.5; }
  :is(#w-ablauf, #w-pruefen, #w-weiter) .steps li .mono { margin-bottom: 6px; }
}

@media (min-width: 861px) {
  html[data-info="a"] #w-modell .work_side::after { background: radial-gradient(ellipse closest-side at 52% 50%, rgba(4, 6, 8, .96) 0%, rgba(4, 6, 8, .93) 62%, rgba(4, 6, 8, .66) 82%, rgba(4, 6, 8, 0) 100%); }
}

.steps li, .facts dd, .work_desc, .fine { text-wrap: pretty; }

.calm { position: absolute; right: var(--pad); bottom: 3px; z-index: 7; height: 20px; padding: 0 8px; font-size: 10px; letter-spacing: .08em; color: rgba(242, 240, 234, .8); background: rgba(7, 9, 11, .5); border: 1px solid rgba(242, 240, 234, .3); border-radius: 2px; cursor: pointer; white-space: nowrap; }
.calm:hover { color: var(--paper); border-color: rgba(242, 240, 234, .6); }
.calm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calm[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.note { right: calc(var(--pad) + 190px); }
@media (max-width: 860px) { .calm { bottom: 4px; } .note { right: calc(var(--pad) + 150px); } }

html[data-calm] .lift { transform: none !important; transition: none !important; box-shadow: none !important; }
html[data-calm] .rail_route .rail_steps li, html[data-calm] .rail_route .rail_steps li .st_icon { transition: none !important; }
html[data-calm] .rail_bike, html[data-calm] .rail_bike .wheel, html[data-calm] .rail_wheel, html[data-calm] .rail_wheel .rw_spin { transition: none !important; }
html[data-calm] .work_title, html[data-calm] .work_side { translate: none !important; }

@media (min-width: 861px) {
  html[data-mlight] #w-ablauf .work_side { background-image: radial-gradient(circle 280px at var(--lx, 50%) var(--ly, 50%), rgba(217, 161, 90, calc(.075 * var(--lo, 0))) 0%, rgba(217, 161, 90, 0) 100%); }
}

html[data-calm] .work .work_title .ln, html[data-calm] .work .work_meta, html[data-calm] .work .work_side, html[data-calm] .work .work_desc, html[data-calm] .work .wd {
  transform: none !important; filter: none !important; translate: none !important; transition-delay: 0s !important; }
html[data-calm] .work.is-in .work_title .ln, html[data-calm] .work.is-in .work_meta, html[data-calm] .work.is-in .work_side, html[data-calm] .work.is-in .wd { transition: opacity .35s linear !important; opacity: 1 !important; }
html[data-calm] .work.is-out .work_title .ln, html[data-calm] .work.is-out .work_meta, html[data-calm] .work.is-out .work_side { transition: opacity .2s linear !important; }
html[data-calm] .work_title .mask { overflow: visible; }
html[data-calm] .sheet, html[data-calm] .about { transition: none !important; }
html[data-calm] .sheet_grid li { transform: none !important; transition: opacity .25s linear !important; }
html[data-calm] .work_side > *, html[data-calm] .has-chars .work_side > * { transform: none !important; }
.calm[disabled] { opacity: .9; cursor: default; }

@media (min-width: 861px) {
  :is(#w-ablauf, #w-pruefen, #w-weiter, #w-anfrage) .work_side {
    position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; max-height: none;
  }

  :is(#w-ablauf, #w-pruefen, #w-weiter, #w-anfrage) .work_side::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 9, 10, .70), rgba(5, 7, 9, .76));
    -webkit-backdrop-filter: blur(6px) saturate(.92); backdrop-filter: blur(6px) saturate(.92);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%), linear-gradient(to top, transparent 0, #000 16px, #000 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%), linear-gradient(to top, transparent 0, #000 16px, #000 100%); mask-composite: intersect;
  }

  :is(#w-ablauf, #w-pruefen, #w-weiter, #w-anfrage) .work_side::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(242, 240, 234, 0), rgba(242, 240, 234, .26) 35%, rgba(242, 240, 234, 0)) left 0 top 0 / 52% 1px no-repeat,
      linear-gradient(90deg, rgba(242, 240, 234, 0), rgba(242, 240, 234, .14) 40%, rgba(242, 240, 234, 0)) right 0 bottom 0 / 34% 1px no-repeat;
  }
}

@media (min-width: 861px) and (max-height: 700px) {
  :is(#w-ablauf, #w-pruefen, #w-weiter) .steps li { font-size: 16px; line-height: 1.4; }
  #w-weiter .fine { font-size: 15px; }
}
@media (min-width: 861px) and (max-height: 620px) {
  :is(#w-ablauf, #w-pruefen, #w-weiter) .steps li { font-size: 15.5px; line-height: 1.36; }
  #w-weiter .fine { font-size: 14.5px; }
}

@media (min-width: 861px) {
  .work--form > .work_desc { position: relative; isolation: isolate; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .work--form > .work_desc::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 9, 10, .58), rgba(5, 7, 9, .64));
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 100%), linear-gradient(to top, transparent 0, #000 14px, #000 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 100%), linear-gradient(to top, transparent 0, #000 14px, #000 100%); mask-composite: intersect;
  }
}

@media (min-width: 861px) and (max-height: 700px) {
  .work--form > .work_desc { font-size: 15px; line-height: 1.4; }
  .work--form .field label { font-size: 12px; }
}
@media (min-width: 861px) and (max-height: 620px) {
  .work--form > .work_desc { font-size: 14.5px; line-height: 1.36; }
  .work--form .field label { font-size: 12px; }
}

.work.is-scroll { pointer-events: auto; overflow-x: hidden; overflow-y: auto; align-content: start; padding-top: 72px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(242, 240, 234, .35) transparent; }

@media (max-width: 860px) {
  .work--form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "desc" "side"; }
  .work--form > .work_desc { margin: 14px 0 0; max-width: none; }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .work:not(#w-start):not(#w-modell) .work_title { font-size: clamp(32px, 4.6vw, 54px); }
  .work--form { grid-template-columns: minmax(0, 1fr) minmax(320px, 44ch); }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .work--form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "desc" "side"; }
  .work--form > .work_desc { margin: 14px 0 0; max-width: 56ch; }
  .work--form .work_side { margin-top: 18px; max-width: 640px; }
}
@media (min-width: 861px) and (max-width: 920px) {
  .work:not(#w-start):not(#w-modell) .work_title { font-size: clamp(28px, 3.9vw, 54px); }
}