@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-latin.woff2') format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-latin-ext.woff2') format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';src:url('fonts/inter-latin.woff2') format('woff2');font-weight:300 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-ext.woff2') format('woff2');font-weight:300 500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#F2EFE8;
  --paper-2:#EAE6DC;
  --ink:#14141F;
  --muted:rgba(20,20,31,.64);
  --faint:rgba(20,20,31,.44);
  --line:rgba(20,20,31,.20);
  --line-soft:rgba(20,20,31,.12);
  --accent:#4F46E5;
  --accent-soft:rgba(79,70,229,.20);
  --wrap:1380px;
  --pad:60px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.025em;line-height:1.08}
.display{font-weight:500;font-size:clamp(33px,6.4vw,82px);line-height:1.0;letter-spacing:-.04em;
  overflow-wrap:break-word;hyphens:auto}
.display em{font-style:italic;font-weight:300}
.display .mark{box-shadow:inset 0 -.14em 0 var(--accent-soft)}
h2.big{font-size:clamp(25px,3.6vw,48px);letter-spacing:-.035em;line-height:1.05;overflow-wrap:break-word}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.label{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.lead{font-size:clamp(17px,1.3vw,19px);line-height:1.62;color:var(--muted)}
.rule{height:1px;background:var(--line);border:0}

/* ---------- Kopf ---------- */
.site-head{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1.5px solid var(--ink)}
.site-head .bar{max-width:var(--wrap);margin:0 auto;padding:22px var(--pad);display:flex;align-items:baseline;justify-content:space-between;gap:30px}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:.01em;white-space:nowrap}
.brand span{color:var(--accent)}
.nav-meta{display:flex;gap:40px;align-items:baseline}
.nav-meta a{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-bottom:3px;border-bottom:1.5px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.nav-meta a:hover{color:var(--ink);border-color:var(--ink)}
.nav-meta a[aria-current]{color:var(--ink);border-color:var(--ink)}
.burger{display:none;width:42px;height:32px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:6px;right:6px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:10px}.burger span:nth-child(2){top:16px}.burger span:nth-child(3){top:22px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:0;background:var(--paper);z-index:55;padding:110px var(--pad) 40px;display:flex;flex-direction:column;
  transform:translateY(-100%);transition:transform .45s var(--ease);visibility:hidden}
body.menu-open .drawer{transform:none;visibility:visible}
.drawer a.dl{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:600;letter-spacing:-.03em;padding:18px 0;border-bottom:1px solid var(--line)}
.drawer .dfoot{margin-top:auto;padding-top:26px;font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:6px}

/* ---------- Startseite: Kopfbereich ---------- */
.hero{border-bottom:1.5px solid var(--ink)}
.hero-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.12fr .88fr}
.hero-left{padding:72px var(--pad) 46px;border-right:1.5px solid var(--ink);display:flex;flex-direction:column}
.hero-right{padding:72px var(--pad) 46px;display:flex;flex-direction:column}
.hero-left .display{margin-top:44px}
.hero-left .lead{margin-top:30px;max-width:42ch}
.hero-facts{margin-top:52px;display:flex;flex-direction:column}
.hero-facts div{display:flex;gap:18px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line-soft)}
.hero-facts b{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;min-width:130px}
.hero-facts span{font-size:14.5px;color:var(--muted)}
.sig{margin-top:auto;padding-top:48px;display:flex;align-items:center;gap:18px}
.sig .mono{width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;
  justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;flex:none}
.sig b{display:block;font-family:'Space Grotesk',sans-serif;font-size:15px}
.sig span{font-size:14px;color:var(--muted)}

/* Register (nummerierte Liste) */
.register{margin-top:30px}
.reg-row{display:flex;gap:22px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--line);position:relative}
.register .reg-row:last-child{border-bottom:1px solid var(--line)}
.reg-row .num{font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--faint);padding-top:8px;min-width:26px}
.reg-row h3{font-size:clamp(21px,2vw,27px);margin-bottom:8px}
.reg-row p{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:52ch}
.reg-row .arr{margin-left:auto;font-size:19px;color:var(--faint);padding-top:6px;transition:transform .3s var(--ease),color .3s}
a.reg-row:hover .arr{transform:translateX(6px);color:var(--ink)}
a.reg-row:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}

.steps{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.steps > div{border-top:2px solid var(--ink);padding-top:13px}
.steps b{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.12em;display:block;margin-bottom:7px}
.steps span{font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ---------- Knoepfe ---------- */
.btn{display:inline-block;background:var(--ink);color:var(--paper);font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:14.5px;letter-spacing:.01em;padding:18px 34px;border:1.5px solid var(--ink);transition:background .28s var(--ease),color .28s var(--ease)}
.btn:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:transparent;color:var(--paper)}
.ask-note{display:block;font-size:13px;color:var(--muted);margin-top:14px;max-width:46ch}
.textlink{border-bottom:1.5px solid var(--ink);padding-bottom:2px;font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:600}
.textlink:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Abschnitte ---------- */
.section{padding:96px 0;border-bottom:1px solid var(--line)}
.section.tight{padding:64px 0}
.section-head{display:grid;grid-template-columns:200px 1fr;gap:40px;margin-bottom:54px}
.section-head .label{padding-top:12px}
.section-head p{color:var(--muted);max-width:60ch;margin-top:18px}

/* Laufband */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--paper-2)}
.ticker-track{display:flex;gap:0;white-space:nowrap;animation:slide 46s linear infinite;will-change:transform}
.ticker-item{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:14px 30px;border-right:1px solid var(--line-soft)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* Saeulen auf der Startseite */
.pillar{display:grid;grid-template-columns:200px 1fr 1fr;gap:40px;padding:56px 0;border-top:1px solid var(--line)}
.pillar:first-of-type{border-top:0}
.pillar-num{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.18em;color:var(--faint)}
.pillar h2{font-size:clamp(26px,3vw,40px);margin-bottom:16px}
.pillar .pt{color:var(--muted);max-width:44ch}
.pillar-list{display:flex;flex-direction:column}
.pillar-list a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:baseline;padding:15px 0;
  border-bottom:1px solid var(--line-soft);font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:500;
  transition:padding-left .3s var(--ease)}
.pillar-list a:first-child{border-top:1px solid var(--line-soft)}
.pillar-list a:hover{padding-left:10px}
.pillar-list a i{font-style:normal;color:var(--faint);font-size:14px;font-family:'Inter',sans-serif;font-weight:400;line-height:1.45}

/* Arbeiten */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.work-card figure{margin:0;border:1px solid var(--line);background:#fff;overflow:hidden}
.work-card img{width:100%;height:auto;aspect-ratio:1000/620;object-fit:cover;object-position:top center;transition:transform .7s var(--ease)}
.work-card:hover img{transform:scale(1.03)}
.work-card .wm{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-top:14px}
.work-card h3{font-size:19px}
.work-card .br{font-size:13px;color:var(--faint);text-align:right}
.work-card .tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:7px}
.work-card .tags span{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:4px 9px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px}
.filters button{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.06em;padding:10px 18px;border:1px solid var(--line);
  background:none;cursor:pointer;color:var(--muted);transition:all .25s var(--ease)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Textseiten (Leistung / Case) */
.crumbs{padding:22px 0;font-size:12.5px;color:var(--faint)}
.crumbs ol{display:flex;gap:10px;list-style:none;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--line)}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.page-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;padding:30px 0 70px;border-bottom:1.5px solid var(--ink);align-items:end}
.page-head h1{font-size:clamp(30px,5vw,68px);letter-spacing:-.04em;line-height:1.02;margin:24px 0 0;
  overflow-wrap:break-word;hyphens:auto}
.page-head .lead{margin-top:26px;max-width:44ch}
.page-head aside{border-left:1px solid var(--line);padding-left:40px}
.page-head aside p{color:var(--muted);font-size:15.5px}
.prose p{margin-bottom:20px;max-width:68ch;color:var(--muted)}
.prose p strong{color:var(--ink)}
.two-col{display:grid;grid-template-columns:200px 1fr;gap:40px}

.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;
  font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--faint);flex:none;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding-bottom:26px;color:var(--muted);max-width:68ch}

/* Case-Seiten */
.case-shot{border:1px solid var(--line);background:#fff}
.case-shot img{width:100%}
.case-split{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:start}
.tick{list-style:none;display:flex;flex-direction:column}
.tick li{padding:16px 0 16px 30px;border-bottom:1px solid var(--line-soft);position:relative;color:var(--muted);font-size:15.5px}
.tick li::before{content:"";position:absolute;left:0;top:25px;width:14px;height:1.5px;background:var(--accent)}
.tick li:first-child{border-top:1px solid var(--line-soft)}
.phone{max-width:300px;margin:0 auto;border:1px solid var(--line);background:#fff;padding:8px;border-radius:26px}
.phone img{border-radius:18px}
.phone-cap{font-size:13px;color:var(--faint);text-align:center;margin-top:14px;max-width:300px;margin-inline:auto}
.case-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;padding:36px 0;border-top:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif;font-size:14.5px}
.case-nav .nx{text-align:right}

/* Kontrastband */
.band{background:var(--ink);color:var(--paper);padding:92px 0}
.band h2{color:var(--paper);font-size:clamp(28px,3.6vw,46px);letter-spacing:-.035em}
.band p{color:rgba(242,239,232,.66);max-width:52ch;margin-top:20px}
.band .inner{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.band .meta{font-size:14.5px;color:rgba(242,239,232,.66);display:flex;flex-direction:column;gap:10px}
.band .meta b{color:var(--paper);font-family:'Space Grotesk',sans-serif;font-weight:600}

/* Formular */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fg{display:flex;flex-direction:column;gap:8px}
.fg.full{grid-column:1/-1}
.fg label{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.fg input,.fg select,.fg textarea{font-family:'Inter',sans-serif;font-size:16px;color:var(--ink);background:transparent;
  border:0;border-bottom:1.5px solid var(--line);padding:12px 0;transition:border-color .25s}
.fg textarea{min-height:130px;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:0;border-color:var(--accent)}
.fg button.btn{align-self:flex-start}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--muted);grid-column:1/-1;margin-top:6px}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--accent)}
.form-note{font-size:13px;color:var(--faint);margin-top:18px}

/* Fuss */
.site-foot{background:var(--ink);color:var(--paper);padding:78px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.site-foot h4{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,239,232,.5);margin-bottom:18px;font-weight:500}
.site-foot a{color:rgba(242,239,232,.78);font-size:14.5px;display:block;padding:5px 0;transition:color .2s}
.site-foot a:hover{color:var(--paper)}
.foot-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:var(--paper);margin-bottom:14px}
.foot-brand+p{color:rgba(242,239,232,.6);font-size:14.5px;max-width:34ch}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(242,239,232,.16);display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:13px;color:rgba(242,239,232,.5)}
.foot-bottom a{display:inline;font-size:13px}

/* Einblenden */
.js .rev{opacity:0;transform:translateY(16px)}
.js .rev.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){.js .rev{opacity:1;transform:none}}

/* ---------- Mobil ---------- */
@media (max-width:1100px){
  :root{--pad:34px}
  .hero-grid{grid-template-columns:1fr}
  .hero-left{border-right:0;border-bottom:1.5px solid var(--ink);padding-bottom:40px}
  .hero-right{padding-top:40px}
  .section-head{grid-template-columns:1fr;gap:14px;margin-bottom:38px}
  .pillar{grid-template-columns:1fr;gap:26px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .page-head{grid-template-columns:1fr;gap:34px;align-items:start}
  .page-head aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:26px}
  .case-split{grid-template-columns:1fr;gap:40px}
  .band .inner{grid-template-columns:1fr;gap:34px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .two-col{grid-template-columns:1fr;gap:18px}
}
@media (max-width:780px){
  :root{--pad:20px}
  .pillar-list a{grid-template-columns:1fr;gap:6px}
  .hero-facts b{min-width:auto}
  .hero-facts div{flex-direction:column;gap:4px}
  body{font-size:16px}
  .nav-meta{display:none}
  .burger{display:block}
  .work-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:20px}
  .form-grid{grid-template-columns:1fr}
  .section{padding:64px 0}
  .band{padding:64px 0}
  .foot-grid{grid-template-columns:1fr}
  .case-nav{grid-template-columns:1fr;gap:12px}
  .case-nav .nx{text-align:left}
}

/* ============================================================
   BEWEGUNG
   Grundsatz: Linien zeichnen sich, Masken heben sich, Seiten
   gehen ineinander ueber. Keine Federn, kein Huepfen, kein Zoom
   auf alles. Bewegt wird nur, was im Layout ohnehin schon da ist:
   die Haarlinien, die Nummern, die Woerter.
   Alles laeuft ausschliesslich ueber transform und opacity.
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-line:cubic-bezier(.65,0,.35,1);
  --verz:0ms;
}

/* ---------- Seitenwechsel ---------- */
/* Der Kopf bleibt beim Navigieren stehen, der Rest hebt sich an.
   Faellt in aelteren Browsern lautlos auf normales Laden zurueck. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s;animation-timing-function:var(--ease-line)}
::view-transition-old(root){animation-name:seite-raus}
::view-transition-new(root){animation-name:seite-rein}
@keyframes seite-raus{to{opacity:0;transform:translateY(-10px)}}
@keyframes seite-rein{from{opacity:0;transform:translateY(14px)}}
.site-head{view-transition-name:kopf}
::view-transition-old(kopf),::view-transition-new(kopf){animation:none;mix-blend-mode:normal;height:100%}

/* Die angeklickte Referenzkachel wird zum Screenshot der Fallseite. */
.case-shot{view-transition-name:fall}
::view-transition-group(fall){animation-duration:.5s;animation-timing-function:var(--ease-out)}
::view-transition-old(fall),::view-transition-new(fall){height:100%;object-fit:cover;overflow:clip}

/* ---------- Grundmuster: Einblenden ---------- */
.js .rev{opacity:0;transform:translateY(18px)}
.js .rev.in{opacity:1;transform:none;
  transition:opacity .7s var(--ease-out) var(--verz),transform .7s var(--ease-out) var(--verz)}

/* ---------- Woerter steigen zeilenweise auf ---------- */
/* clip-path statt overflow, damit Unterlaengen und Kursivschnitt
   seitlich nicht abgeschnitten werden. */
.js .w{display:inline-block;clip-path:inset(-.7em -.7em -.28em -.7em)}
.js .wi{display:inline-block;transform:translateY(145%);
  transition:transform .85s var(--ease-out) var(--verz)}
.js .split.in .wi{transform:translateY(0)}

/* Der farbige Balken unter dem Schluesselwort zieht sich erst danach auf. */
.js .split .mark{box-shadow:none;
  background-image:linear-gradient(var(--accent-soft),var(--accent-soft));
  background-repeat:no-repeat;background-position:0 92%;background-size:0 .14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .75s var(--ease-line) var(--mark-d,700ms)}
.js .split.in .mark{background-size:100% .14em}

/* ---------- Haarlinien zeichnen sich ---------- */
/* Die Trennlinien sind das Rueckgrat des Layouts, also bewegen sie sich
   auch als Linie: von links nach rechts, nicht als Einblendung. */
.js .steps > div{border-top-color:transparent;position:relative}
.js .steps > div::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-line) var(--verz)}
.js .steps.in > div::before{transform:scaleX(1)}
.js .steps > div > b,.js .steps > div > span,.js .steps > div > h2,.js .steps > div > p{
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-out) var(--verz),transform .6s var(--ease-out) var(--verz)}
.js .steps.in > div > b,.js .steps.in > div > span,.js .steps.in > div > h2,.js .steps.in > div > p{
  opacity:1;transform:none}

.js .hero-facts > div{border-top-color:transparent;position:relative}
.js .hero-facts > div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line-soft);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-line) var(--verz)}
.js .hero-facts.in > div::before{transform:scaleX(1)}
.js .hero-facts > div > b,.js .hero-facts > div > span{opacity:0;
  transition:opacity .55s var(--ease-out) calc(var(--verz) + 140ms)}
.js .hero-facts.in > div > b,.js .hero-facts.in > div > span{opacity:1}

.js .register .reg-row{border-top-color:transparent;position:relative}
.js .register .reg-row::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-line) var(--verz)}
.js .register.in .reg-row::before{transform:scaleX(1)}
.js .register .reg-row > *{opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease-out) calc(var(--verz) + 110ms),transform .6s var(--ease-out) calc(var(--verz) + 110ms)}
.js .register.in .reg-row > *{opacity:1;transform:none}
.js .register .reg-row:last-child{border-bottom-color:transparent}
.js .register.in .reg-row:last-child{border-bottom-color:var(--line);transition:border-bottom-color .4s linear 900ms}

.js .pillar-list > a{position:relative;border-bottom-color:transparent}
.js .pillar-list > a::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--line-soft);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-line) var(--verz)}
.js .pillar-list.in > a::before{transform:scaleX(1)}
.js .pillar-list > a:first-child{border-top-color:transparent}
.js .pillar-list.in > a:first-child{border-top-color:var(--line-soft);transition:border-top-color .4s linear 120ms}
.js .pillar-list > a > *{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease-out) calc(var(--verz) + 90ms),transform .5s var(--ease-out) calc(var(--verz) + 90ms)}
.js .pillar-list.in > a > *{opacity:1;transform:none}

/* Der Akzentstrich vor jedem Haken waechst aus dem Nichts. */
.js .tick > li{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-out) var(--verz),transform .6s var(--ease-out) var(--verz)}
.js .tick.in > li{opacity:1;transform:none}
.js .tick > li::before{width:0;transition:width .55s var(--ease-line) calc(var(--verz) + 180ms)}
.js .tick.in > li::before{width:14px}

/* ---------- Referenzkacheln ---------- */
/* Ein Vorhang in Papierfarbe zieht sich nach oben weg, das Bild
   setzt sich dabei von leicht vergroessert auf normal. */
.work-card figure{position:relative;overflow:hidden;transition:border-color .4s var(--ease-out)}
.js .work-card figure::after{content:"";position:absolute;inset:0;background:var(--paper);
  transform-origin:bottom;transform:scaleY(1);z-index:2;pointer-events:none;
  transition:transform .9s var(--ease-line) var(--verz)}
.js .work-grid.in .work-card figure::after,.js .work-card.in figure::after{transform:scaleY(0)}
.js .work-card img{transform:scale(1.07);
  transition:transform 1.05s var(--ease-out) var(--verz)}
.js .work-grid.in .work-card img,.js .work-card.in img{transform:none}
.js .work-grid.in .work-card:hover img,.js .work-card.in:hover img{
  transform:scale(1.04);transition-duration:.7s;transition-delay:0s}
.work-card:hover figure{border-color:var(--ink)}
.work-card h3{position:relative;display:inline-block}
.work-card h3::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-line)}
.work-card:hover h3::after{transform:scaleX(1);transform-origin:left}
.work-card .tags span{transition:border-color .35s var(--ease-out),color .35s var(--ease-out)}
.work-card:hover .tags span{border-color:var(--ink);color:var(--ink)}
.js .work-card .wm,.js .work-card .tags{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-out) calc(var(--verz) + 260ms),transform .6s var(--ease-out) calc(var(--verz) + 260ms)}
.js .work-grid.in .work-card .wm,.js .work-grid.in .work-card .tags,
.js .work-card.in .wm,.js .work-card.in .tags{opacity:1;transform:none}

/* Auf den Fallseiten bewegt sich der Screenshot beim Scrollen leicht
   gegen die Leserichtung. Nur dort, weil es da keinen Hover gibt. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:781px){
    .case-shot{overflow:hidden}
    .case-shot img{animation:tiefe linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes tiefe{from{transform:translateY(-2.6%) scale(1.06)}to{transform:translateY(2.6%) scale(1.06)}}
  }
}

/* ---------- Kopfzeile ---------- */
.site-head .bar{transition:padding-top .4s var(--ease-out),padding-bottom .4s var(--ease-out)}
.brand{transition:font-size .4s var(--ease-out)}
body.gescrollt .site-head .bar{padding-top:13px;padding-bottom:13px}
body.gescrollt .brand{font-size:18px}
/* Der Lesefortschritt sitzt genau auf der Trennlinie des Kopfes,
   damit keine zusaetzliche Leiste entsteht. */
.lesestand{position:absolute;left:0;bottom:-1.5px;height:1.5px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;will-change:transform;pointer-events:none}
.nav-meta a{position:relative}
.nav-meta a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-line)}
.nav-meta a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Menue am Handy ---------- */
body.menu-open{overflow:hidden}
.drawer a.dl{opacity:0;transform:translateY(22px);position:relative}
body.menu-open .drawer a.dl{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out) var(--verz),transform .5s var(--ease-out) var(--verz)}
.drawer a.dl:nth-child(1){--verz:130ms}
.drawer a.dl:nth-child(2){--verz:185ms}
.drawer a.dl:nth-child(3){--verz:240ms}
.drawer a.dl:nth-child(4){--verz:295ms}
.drawer a.dl:nth-child(5){--verz:350ms}
.drawer .dfoot{opacity:0;transition:opacity .5s var(--ease-out) 420ms}
body.menu-open .drawer .dfoot{opacity:1}
.drawer a.dl::after{content:"\2192";position:absolute;right:0;top:50%;transform:translate(-14px,-50%);opacity:0;
  transition:transform .35s var(--ease-out),opacity .35s}
.drawer a.dl:hover::after,.drawer a.dl:focus-visible::after{transform:translate(0,-50%);opacity:.5}

/* ---------- Knoepfe: Tinte laeuft von unten ein ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;z-index:0;
  transition:color .34s var(--ease-line),border-color .34s var(--ease-line)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
  transform:translateY(101%);transition:transform .44s var(--ease-line)}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--ink)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn-ghost{background:transparent}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:transparent;color:var(--paper)}
.btn-light::before{background:var(--ink)}
.btn-light:hover,.btn-light:focus-visible{background:var(--paper);color:var(--paper)}

.textlink{position:relative;transition:color .3s var(--ease-line)}
.textlink::after{content:"";position:absolute;left:0;bottom:-1.5px;width:100%;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .44s var(--ease-line)}
.textlink:hover::after{transform:scaleX(1);transform-origin:left}

a.reg-row{transition:padding-left .4s var(--ease-out)}
a.reg-row:hover{padding-left:12px}
a.reg-row .num{transition:color .3s var(--ease-out)}
a.reg-row:hover .num{color:var(--accent)}

/* ---------- Laufband ---------- */
/* Uebernimmt JavaScript, sobald es laeuft: Tempo und leichte Neigung
   haengen dann daran, wie schnell gescrollt wird. */
.js-ticker .ticker-track{animation:none;will-change:transform}
.ticker-item{transition:color .3s var(--ease-out)}
.ticker:hover .ticker-item{color:var(--ink)}

/* ---------- Randspalten bleiben stehen ---------- */
@media (min-width:1101px){
  .pillar-num,.section-head .label,.two-col > .label{position:sticky;top:104px;align-self:start}
}

/* ---------- Ausklapper ---------- */
.faq summary{transition:color .3s var(--ease-out)}
.faq summary:hover{color:var(--accent)}
.faq details::details-content{block-size:0;overflow:clip;
  transition:block-size .42s var(--ease-out),content-visibility .42s allow-discrete}
.faq details[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}

/* ---------- Fuss ---------- */
.js .foot-grid > div{opacity:0;transform:translateY(16px);
  transition:opacity .65s var(--ease-out) var(--verz),transform .65s var(--ease-out) var(--verz)}
.js .foot-grid.in > div{opacity:1;transform:none}
.site-foot a{position:relative;width:fit-content}
.site-foot a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;
  background:var(--paper);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-line)}
.site-foot a:hover::after{transform:scaleX(1);transform-origin:left}
.foot-bottom a{width:auto}

/* ---------- Sprungmarke ---------- */
.skip{position:fixed;left:14px;top:14px;z-index:200;background:var(--ink);color:var(--paper);
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;padding:14px 22px;
  transform:translateY(-160%);transition:transform .3s var(--ease-out)}
.skip:focus{transform:none}

/* Auf dunklem Grund braucht der Fokusrahmen eine helle Farbe. */
.band :focus-visible,.site-foot :focus-visible,.btn-light:focus-visible{outline-color:var(--paper)}

/* ---------- Wer weniger Bewegung eingestellt hat, bekommt weniger ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  @view-transition{navigation:none}
  .js .rv,.js .rev.in{opacity:1;transform:none;transition:none}
  .js .wi{transform:none;transition:none}
  .js .split .mark{background-size:100% .14em}
  .js .steps > div{border-top-color:var(--ink)}
  .js .steps > div::before,.js .hero-facts > div::before,.js .register .reg-row::before,
  .js .pillar-list > a::before{transform:scaleX(1);transition:none}
  .js .hero-facts > div{border-top-color:var(--line-soft)}
  .js .register .reg-row{border-top-color:var(--line)}
  .js .register .reg-row:last-child{border-bottom-color:var(--line)}
  .js .pillar-list > a{border-bottom-color:var(--line-soft)}
  .js .pillar-list > a:first-child{border-top-color:var(--line-soft)}
  .js .steps > div > *,.js .hero-facts > div > *,.js .register .reg-row > *,
  .js .pillar-list > a > *,.js .tick > li,.js .foot-grid > div,
  .js .work-card .wm,.js .work-card .tags{opacity:1;transform:none;transition:none}
  .js .tick > li::before{width:14px;transition:none}
  .js .work-card figure::after{display:none}
  .js .work-card img{transform:none;transition:none}
  .drawer a.dl,.drawer .dfoot{opacity:1;transform:none}
  .lesestand{display:none}
  .btn::before{display:none}
  .btn:hover{background:transparent;color:var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:var(--paper)}
  .btn-light:hover{background:transparent;color:var(--paper)}
}


/* ============================================================
   FEINSCHLIFF
   Der Aufbau bleibt, was sich aendert ist die Oberflaeche:
   das Papier bekommt Korn und Licht, die Kanten bekommen
   Tiefe, und die Zustaende beim Ueberfahren werden deutlicher.
   Rein additiv, keine Layoutwechsel.
   ============================================================ */

:root{
  --paper:#F4F1E9;
  --paper-2:#ECE8DE;
  --paper-3:#E3DED2;
  --ink:#13131C;
  --accent:#4F46E5;
  --accent-deep:#3730A3;
  --accent-soft:rgba(79,70,229,.22);
  --schatten:0 1px 2px rgba(19,19,28,.04),0 12px 28px -18px rgba(19,19,28,.35);
  --schatten-hoch:0 2px 4px rgba(19,19,28,.05),0 26px 54px -26px rgba(19,19,28,.45);
}

/* ---------- Papier: Korn und ein warmer Lichtverlauf ---------- */
body{background-image:
    radial-gradient(120% 85% at 82% -12%,rgba(255,253,246,.9),rgba(255,253,246,0) 58%),
    radial-gradient(90% 70% at 2% 104%,rgba(79,70,229,.07),rgba(79,70,229,0) 60%);
  background-attachment:fixed;background-repeat:no-repeat}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;opacity:.05;mix-blend-mode:multiply}
@media (max-width:780px){body::after{opacity:.035}}

/* Kopf und Schublade liegen ueber dem Lichtverlauf */
.site-head{z-index:9999}
.drawer{z-index:9997}

/* ---------- Typografie: ruhigerer Umbruch ---------- */
.display,h2.big,.band h2,.page-head h1{text-wrap:balance}
.lead,.prose p,.section-head p,.pillar .pt{text-wrap:pretty}

/* Die kleine Auszeichnung bekommt einen Akzentstrich davor */
.label{display:flex;align-items:center;gap:11px}
.label::before{content:"";width:20px;height:1px;background:var(--accent);flex:none}
.drawer .label::before{display:none}

/* ---------- Kopf: Lesefortschritt und Absetzen beim Scrollen ---------- */
.site-head{transition:box-shadow .3s var(--ease)}
.site-head .bar{transition:padding .35s var(--ease)}
body.gescrollt .site-head{box-shadow:0 10px 30px -24px rgba(19,19,28,.75)}
body.gescrollt .site-head .bar{padding-top:14px;padding-bottom:14px}
.lesestand{transform:scaleX(var(--sp,0));transition:transform .12s linear}
.brand span{display:inline-block;transition:transform .4s var(--ease)}
.brand:hover span{transform:translateY(-4px)}
.nav-meta a{border-bottom-color:transparent}
.nav-meta a[aria-current]::after{transform:scaleX(1);transform-origin:left}

/* ---------- Knoepfe: Fuellung laeuft von unten ein ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);z-index:-1;
  transform:translateY(101%);transition:transform .4s var(--ease)}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--accent)}
.btn:hover::before{transform:translateY(0)}
.btn-light{color:var(--ink)}
.btn-light:hover{background:var(--paper);color:#fff;border-color:var(--accent)}
.btn-ghost:hover{color:#fff;border-color:var(--accent)}

.textlink{position:relative;border-bottom-color:transparent;display:inline-block;padding-bottom:3px}
.textlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink)}
.textlink::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent);z-index:1;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.textlink:hover{color:var(--accent)}
.textlink:hover::before{transform:scaleX(1);transform-origin:left}

/* ---------- Register: Zeile hebt sich beim Ueberfahren ---------- */
a.reg-row{isolation:isolate;transition:padding .35s var(--ease)}
.reg-row::after{content:"";position:absolute;inset:0 -18px;background:var(--paper-2);opacity:0;z-index:-1;
  transition:opacity .35s var(--ease)}
a.reg-row:hover{padding-left:18px;padding-right:18px}
a.reg-row:hover::after{opacity:1}
a.reg-row:hover .num{color:var(--accent)}
a.reg-row:hover h3{text-decoration:none}
.reg-row .arr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);font-size:15px;padding-top:0;flex:none;
  transition:transform .35s var(--ease),color .3s,background-color .3s,border-color .3s}
a.reg-row:hover .arr{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(5px)}

/* ---------- Saeulenlisten: Akzentbalken laeuft ein ---------- */
.pillar-list a{position:relative}
.pillar-list a::after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.pillar-list a:hover::after{transform:scaleY(1)}
.pillar-list a:hover{padding-left:16px}
.pillar-num{color:var(--accent);opacity:.9}

/* ---------- Referenzkacheln: Tiefe und laufende Nummer ---------- */
.work-grid{counter-reset:kachel}
.work-card{counter-increment:kachel}
.work-card figure{box-shadow:var(--schatten);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease)}
.work-card:hover figure{transform:translateY(-6px);box-shadow:var(--schatten-hoch)}
.work-card figure::before{content:counter(kachel,decimal-leading-zero);position:absolute;left:0;top:0;z-index:3;
  font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.14em;color:var(--ink);
  background:var(--paper);padding:7px 11px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.work-card:hover figure::before{background:var(--accent);color:#fff;border-color:var(--accent)}
.work-card .tags span{transition:border-color .3s,color .3s}
.work-card:hover .tags span{border-color:var(--faint);color:var(--ink)}

/* ---------- Abschnitte: abwechselnder Papierton ---------- */
.section.alt{background:var(--paper-2)}

/* Laufband: weiche Kanten statt harter Schnitt */
.ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker-item{transition:color .3s}
.ticker:hover .ticker-item{color:var(--ink)}

/* ---------- Kontrastband: grosser Schriftzug im Hintergrund ---------- */
.band{position:relative;overflow:hidden}
.band::before{content:"NAFS";position:absolute;right:-.04em;bottom:-.3em;line-height:1;pointer-events:none;
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.05em;
  font-size:clamp(170px,25vw,400px);color:rgba(242,239,232,.05)}
.band .wrap{position:relative;z-index:1}
@media (max-width:1100px){.band::before{display:none}}
.band .meta span{padding-bottom:10px;border-bottom:1px solid rgba(242,239,232,.14)}

/* ---------- Formular ---------- */
.fg{position:relative}
.fg input:hover,.fg select:hover,.fg textarea:hover{border-color:var(--faint)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent);box-shadow:0 1px 0 0 var(--accent)}
.fg label{transition:color .25s}
.fg:focus-within label{color:var(--accent)}

/* ---------- Fragen und Antworten ---------- */
.faq summary{transition:color .25s var(--ease),padding-left .3s var(--ease)}
.faq summary:hover{color:var(--accent);padding-left:6px}
.faq summary::after{transition:transform .35s var(--ease),color .25s}
.faq summary:hover::after{color:var(--accent)}

/* ---------- Fuss ---------- */
.site-foot{position:relative}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--accent),rgba(79,70,229,0) 38%)}
.foot-brand::after{content:".";color:var(--accent)}
.site-foot a{width:fit-content;transition:color .25s var(--ease),transform .25s var(--ease)}
.site-foot a:hover{color:var(--paper);transform:translateX(3px)}
.foot-bottom a{transform:none}
.foot-bottom a:hover{transform:none;color:var(--paper)}

/* ---------- Bedienhilfen ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms;transition-duration:.01ms}
}

/* Kachelzeile: Titel behaelt seine Zeile, die Angaben rutschen bei Platzmangel darunter */
.work-card .wm{flex-wrap:wrap;align-items:flex-start}
.work-card .br{margin-left:auto}

/* ============================================================
   REFERENZEN ALS FENSTER
   Jede Arbeit sitzt in einem angedeuteten Browserfenster, damit
   der Screenshot als lebende Seite gelesen wird und nicht als
   Bild im Raster. Zwei Spalten, versetzt, damit die Seite nicht
   wie eine Tabelle wirkt.
   ============================================================ */

.work-grid{grid-template-columns:repeat(2,1fr);gap:70px 48px;align-items:start}
.work-grid > .work-card:nth-child(even){margin-top:64px}

.rahmen{border:1.5px solid var(--ink);background:var(--paper-2);box-shadow:var(--schatten);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.work-card:hover .rahmen{transform:translateY(-8px);box-shadow:var(--schatten-hoch)}

.leiste{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1.5px solid var(--ink)}
.leiste i{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);flex:none;
  transition:background-color .35s var(--ease)}
.work-card:hover .leiste i:nth-child(1){background:var(--accent)}
.leiste span{margin:0 8px;flex:1;min-width:0;height:22px;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);font-family:'Space Grotesk',sans-serif;font-size:10.5px;line-height:20px;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;color:transparent;overflow:hidden;
  white-space:nowrap;transition:color .35s var(--ease),border-color .35s var(--ease)}
.work-card:hover .leiste span{color:var(--muted);border-color:var(--faint)}
.leiste::after{content:counter(kachel,decimal-leading-zero);flex:none;
  font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.14em;color:var(--faint)}

/* Das Bild sitzt jetzt im Rahmen, also traegt der Rahmen Kante und Schatten. */
.work-card figure{border:0;box-shadow:none}
.work-card:hover figure{transform:none;box-shadow:none}
.work-card figure::before{display:none}
.work-card .wm{margin-top:18px}

@media (max-width:1100px){
  .work-grid{grid-template-columns:repeat(2,1fr);gap:46px 26px}
  .work-grid > .work-card:nth-child(even){margin-top:0}
}
@media (max-width:780px){
  .work-grid{grid-template-columns:1fr;gap:40px}
  .leiste span{display:none}
}


/* ============================================================
   BEWEGUNG BEIM SCROLLEN
   Zwei Dinge haengen direkt am Scrollstand, nicht an einem
   Ausloeser: der Kopfbereich sinkt beim Weglesen leicht ab, und
   der grosse Schriftzug im dunklen Band zieht langsam vorbei.
   Laeuft ueber native Scroll-Zeitleisten, kostet also kein
   JavaScript und faellt in aelteren Browsern lautlos weg.
   ============================================================ */

@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference) and (min-width:1101px){
    .hero-left .display{animation:kopf-sinkt linear both;
      animation-timeline:scroll(root);animation-range:0 80vh}
    @keyframes kopf-sinkt{to{transform:translateY(-38px);opacity:.78}}

    .hero-left .lead{animation:lead-sinkt linear both;
      animation-timeline:scroll(root);animation-range:0 80vh}
    @keyframes lead-sinkt{to{transform:translateY(-16px)}}
  }
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:781px){
    .band::before{animation:wortmarke-zieht linear both;
      animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes wortmarke-zieht{from{transform:translateX(7%)}to{transform:translateX(-7%)}}
  }
}


/* ============================================================
   MEHR LEBEN
   Vier Zugaben, alle ohne fremde Bibliothek und ohne gespeicherte
   Daten: die Zeilen der grossen Ueberschrift steigen einzeln auf,
   die Trennkante des Kopfbereichs zeichnet sich, die Screenshots
   wandern im Rahmen mit dem Scrollen, und ein feiner Ring folgt
   dem Zeiger.
   Wer weniger Bewegung eingestellt hat, sieht nichts davon.
   ============================================================ */

/* ---------- Screenshots wandern im Rahmen ---------- */
/* Der Bildausschnitt verschiebt sich gegen die Leserichtung, waehrend
   die Kachel durchs Bild laeuft. Das Fenster bleibt ruhig stehen, nur
   der Inhalt lebt. Der Zoom beim Ueberfahren entfaellt dafuer, das
   Anheben des Rahmens bleibt. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:781px){
    .js .work-card img{animation:kachel-wandert linear both;
      animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes kachel-wandert{
      from{transform:translateY(-3.4%) scale(1.1)}
      to{transform:translateY(3.4%) scale(1.1)}}
  }
}

/* ---------- Ring am Zeiger ---------- */
/* Zeichnet sich ueber den Untergrund, wird ueber Bedienelementen
   groesser und faerbt sich. Der normale Mauszeiger bleibt sichtbar,
   der Ring ist nur Zugabe und faengt keine Klicks ab. */
.zeiger{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:1.5px solid var(--ink);pointer-events:none;z-index:9996;opacity:0;
  transition:opacity .3s var(--ease),width .3s var(--ease),height .3s var(--ease),
             margin .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease)}
.zeiger.sichtbar{opacity:.5}
.zeiger.greift{width:56px;height:56px;margin:-28px 0 0 -28px;opacity:1;
  border-color:var(--accent);background:var(--accent-soft)}
@media (hover:none),(prefers-reduced-motion:reduce){.zeiger{display:none}}

/* ---------- Woerter der grossen Ueberschrift ---------- */
/* Die Bausteine dafuer stehen schon im Bewegungsteil (.w, .wi, .split).
   Hier nur der Startzustand, damit vor dem Aufsteigen nichts blitzt. */
.js .split .wi{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .js .split .wi{transform:none}
}


/* ============================================================
   LIVE IM KOPFBEREICH
   Hinter dem Kopfbereich laufen die Seiten durch, die gerade
   online sind: als grauer Abzug in der Ecke, in der ohnehin
   Platz ist, damit die Ueberschrift ungestoert bleibt. Darunter
   steht mit, welche Adresse gerade zu sehen ist.
   Rein zierend: laeuft keine Animation, bleibt einfach das
   erste Bild schwach stehen.
   ============================================================ */

.hero{position:relative;overflow:hidden}
.hero-grid{position:relative;z-index:1}

.reel{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(78% 72% at 104% 104%,#000 0%,rgba(0,0,0,.45) 42%,transparent 70%);
  mask-image:radial-gradient(78% 72% at 104% 104%,#000 0%,rgba(0,0,0,.45) 42%,transparent 70%)}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;filter:grayscale(1) contrast(.92);mix-blend-mode:multiply}
.reel img:first-child{opacity:.12}
@media (max-width:780px){.reel{display:none}}

@media (prefers-reduced-motion:no-preference){
  .reel img{animation:reel-bild 27s var(--ease-out) infinite}
  .reel img:nth-child(1){animation-delay:0s}
  .reel img:nth-child(2){animation-delay:6.75s}
  .reel img:nth-child(3){animation-delay:13.5s}
  .reel img:nth-child(4){animation-delay:20.25s}
  @keyframes reel-bild{
    0%{opacity:0;transform:scale(1.09)}
    3%{opacity:.16}
    21%{opacity:.16}
    25%{opacity:0;transform:scale(1.01)}
    100%{opacity:0;transform:scale(1.09)}}
}

/* Mitlaufende Adresse unter der Unterschrift */
.live-marke{margin-top:26px;display:flex;align-items:center;gap:11px;
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.live-marke .punkt{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.live-adressen{position:relative;display:inline-block;min-width:19ch;height:1.35em;flex:none}
.live-adressen span{position:absolute;left:0;top:0;white-space:nowrap;color:var(--ink);opacity:0}
.live-adressen span:first-child{opacity:1}

@media (prefers-reduced-motion:no-preference){
  .live-marke .punkt{animation:live-puls 2.6s ease-in-out infinite}
  @keyframes live-puls{50%{opacity:.25;transform:scale(.72)}}
  .live-adressen span{animation:reel-text 27s var(--ease-out) infinite}
  .live-adressen span:nth-child(1){animation-delay:0s}
  .live-adressen span:nth-child(2){animation-delay:6.75s}
  .live-adressen span:nth-child(3){animation-delay:13.5s}
  .live-adressen span:nth-child(4){animation-delay:20.25s}
  @keyframes reel-text{
    0%{opacity:0}3%{opacity:1}21%{opacity:1}25%{opacity:0}100%{opacity:0}}
}
@media (max-width:780px){.live-adressen{min-width:0}.live-adressen span:not(:first-child){display:none}}


/* ============================================================
   ANSAGEBALKEN UND KINO-KOPF
   Ganz oben ein schmaler Laufbalken, darunter der Kopfbereich
   als grosses gerundetes Fenster, in dem die eigenen Arbeiten
   als Film laufen. Der Text liegt darin unten links, der Film
   wird nach unten hin abgedunkelt, damit er ihn traegt.
   ============================================================ */

.ansage{background:var(--ink);color:rgba(244,241,233,.86);overflow:hidden;position:relative;z-index:10000}
.ansage-spur{display:flex;white-space:nowrap;width:max-content}
.ansage-spur span{font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:9px 0}
@media (prefers-reduced-motion:no-preference){
  .ansage-spur{animation:ansage-lauf 42s linear infinite;will-change:transform}
  @keyframes ansage-lauf{to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){
  .ansage-spur{width:100%;justify-content:center}
  .ansage-spur span:last-child{display:none}
}

/* ---------- Kopfbereich als Fenster ---------- */
.kino{padding:0;margin-top:calc(-1 * var(--kopf,0px))}
.kino-rahmen{position:relative;overflow:hidden;background:var(--ink);
  min-height:calc(100svh - var(--ansage,35px));display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:var(--kopf,0px);isolation:isolate}
@supports not (height:100svh){.kino-rahmen{min-height:calc(100vh - 35px)}}
.kino-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1}
.kino-rahmen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,19,28,.10) 0%,rgba(19,19,28,0) 30%,
             rgba(19,19,28,.30) 58%,rgba(19,19,28,.86) 88%)}
.kino-inhalt{position:relative;z-index:2;padding:0 clamp(24px,4vw,64px) 30px;max-width:1100px}
.kino-inhalt .display{color:var(--paper);margin-top:26px}
.kino-inhalt .display em{color:rgba(244,241,233,.86)}
.kino-inhalt .lead{color:rgba(244,241,233,.82);margin-top:24px;max-width:46ch}
.kino-inhalt .mark{box-shadow:inset 0 -.14em 0 rgba(138,130,245,.55)}
.js .kino-inhalt .split .mark{background-image:linear-gradient(rgba(138,130,245,.55),rgba(138,130,245,.55))}
.label-hell{color:rgba(244,241,233,.62)}
.label-hell::before{background:#8A82F5}
.kino-tat{margin-top:34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.kino-tat .ask-note{color:rgba(244,241,233,.6);margin-top:0;max-width:34ch}
.btn-hell{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-hell::before{background:#8A82F5}
.btn-hell:hover{background:var(--paper);color:var(--ink);border-color:#8A82F5}

.kino-fuss{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;padding:16px clamp(24px,4vw,64px);
  border-top:1px solid rgba(244,241,233,.18);
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.kino-hinweis{display:flex;align-items:center;gap:9px;color:rgba(244,241,233,.6)}
.kino-hinweis .punkt{width:7px;height:7px;border-radius:50%;background:#8A82F5;flex:none}
@media (prefers-reduced-motion:no-preference){
  .kino-hinweis .punkt{animation:live-puls 2.6s ease-in-out infinite}
}
.kino-domains{color:rgba(244,241,233,.86)}

@media (max-width:1100px){
  .kino{padding:0}
  .kino-rahmen{border-radius:0}
}
@media (max-width:780px){
  .kino-rahmen{min-height:74vh}
  .kino-inhalt{padding-bottom:22px}
  .kino-tat{gap:14px}
  .kino-fuss{font-size:9.5px;letter-spacing:.12em;gap:10px}
  .kino-domains{line-height:1.7}
}

/* ---------- Auftakt: Register und Eckdaten unter dem Kopf ---------- */
.auftakt{padding-top:74px}
.auftakt-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.auftakt-seite{border-left:1px solid var(--line);padding-left:40px}
.auftakt-seite .sig{margin-top:0;padding-top:0}
.auftakt-seite .hero-facts{margin-top:34px}
.auftakt .steps{margin-top:54px}
@media (max-width:1100px){
  .auftakt-grid{grid-template-columns:1fr;gap:38px}
  .auftakt-seite{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:30px}
}


/* ---------- Startseite: Kopfzeile liegt ueber dem Film ---------- */
/* Die Hoehe steht fest im Stylesheet, damit der Film auch dann korrekt
   darunter liegt, wenn kein JavaScript laeuft. Sonst waere die Kopfzeile
   durchsichtig ueber hellem Papier und die Schrift unsichtbar. */
.startseite{--kopf:78px;--ansage:35px}
.startseite .site-head .bar{height:78px;padding-top:0;padding-bottom:0;align-items:center}
.startseite.gescrollt .site-head .bar{height:64px;padding-top:0;padding-bottom:0}
@media (max-width:780px){
  .startseite{--kopf:66px;--ansage:32px}
  .startseite .site-head .bar{height:66px}
  .startseite.gescrollt .site-head .bar{height:58px}
}

.startseite:not(.gescrollt) .site-head{background:transparent;border-bottom-color:rgba(244,241,233,.16);
  box-shadow:none}
.startseite:not(.gescrollt) .brand{color:var(--paper)}
.startseite:not(.gescrollt) .brand span{color:#8A82F5}
.startseite:not(.gescrollt) .nav-meta a{color:rgba(244,241,233,.76)}
.startseite:not(.gescrollt) .nav-meta a:hover{color:var(--paper)}
.startseite:not(.gescrollt) .burger span{background:var(--paper)}
.startseite:not(.gescrollt) .lesestand{background:#8A82F5}

/* Die drei Saetze unten links bleiben ruhig, der Film traegt die grosse Geste */
.kino-satz{font-size:clamp(19px,1.7vw,25px);line-height:1.45;letter-spacing:-.005em;
  font-weight:500;color:rgba(244,241,233,.94);max-width:34ch}
.kino-inhalt{padding-bottom:26px}
/* Hochformat schneidet ein Querformat-Video hart an. Deshalb liegt der Film
   bei hohen Fenstern nicht hinter dem Text, sondern als Band darueber.
   Gilt fuer alle Seitenverhaeltnisse hochkant, nicht nur fuer Handys. */
@media (max-width:780px),(max-aspect-ratio:5/4){
  .kino-satz{font-size:20px;line-height:1.5}
  .kino-rahmen{display:block;min-height:0;padding-top:0}
  .kino-rahmen::after{display:none}
  .kino-film{position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
    opacity:1;margin-top:var(--kopf,66px);display:block}
  .kino-inhalt{padding-top:30px;padding-bottom:30px}
  .kino-fuss{border-top:1px solid rgba(244,241,233,.16)}
}


/* ============================================================
   ARBEITEN ALS HANDY
   Die Referenzen stehen nicht mehr in Kaesten, sondern in
   Geraeterahmen: abgerundet, mit Insel oben, mit Schattenwurf,
   ohne Kante drumherum. Auf der Startseite laufen sie als
   randlose Schiene durchs Bild, sonst im Raster.
   ============================================================ */

.fon{display:block;text-decoration:none;color:inherit}
.fon-rahmen{position:relative;display:block;background:#0A0A11;
  border-radius:clamp(30px,2.9vw,44px);padding:clamp(7px,.7vw,10px);
  box-shadow:0 2px 4px rgba(16,14,10,.18),
             0 14px 28px -14px rgba(16,14,10,.45),
             0 34px 90px -34px rgba(16,14,10,.55);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.fon-rahmen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.28)}
.fon-rahmen img{width:100%;height:auto;display:block;border-radius:clamp(23px,2.2vw,35px);
  background:#15151d}
.fon-insel{position:absolute;z-index:2;top:clamp(15px,1.5vw,21px);left:50%;transform:translateX(-50%);
  width:32%;height:clamp(13px,1.2vw,18px);border-radius:999px;background:#0A0A11}
.fon:hover .fon-rahmen{transform:translateY(-12px)}
.fon:hover .fon-rahmen{box-shadow:0 2px 4px rgba(16,14,10,.2),
             0 26px 48px -18px rgba(16,14,10,.5),
             0 60px 130px -40px rgba(16,14,10,.6)}

.fon-text{display:block;margin-top:20px;text-align:center}
.fon-text b{display:block;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;
  letter-spacing:-.015em}
.fon-text i{display:block;margin-top:5px;font-style:normal;font-size:12.5px;color:var(--faint)}
.fon:hover .fon-text b{color:var(--accent)}

/* ---------- Schiene auf der Startseite, randlos ---------- */
.schiene{display:flex;gap:clamp(20px,2.4vw,40px);overflow-x:auto;overflow-y:hidden;
  padding:10px clamp(20px,4vw,72px) 14px;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.schiene::-webkit-scrollbar{display:none}
.schiene .fon{flex:0 0 auto;width:clamp(186px,17vw,250px);scroll-snap-align:center}
.schiene .fon:first-child{scroll-snap-align:start}

/* ---------- Raster auf den anderen Seiten ---------- */
.fon-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3vw,54px) clamp(18px,2.4vw,40px);
  align-items:start}
.fon-raster > .fon:nth-child(even){margin-top:clamp(20px,3vw,52px)}
@media (max-width:1100px){
  .fon-raster{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:780px){
  .fon-raster{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .fon-raster > .fon:nth-child(even){margin-top:0}
  .schiene .fon{width:62vw;max-width:260px}
}


/* ============================================================
   KLEINSCHRIFT NEU
   Weg von der Vorlagen-Optik: keine Versalien mit weit
   auseinandergezogenen Buchstaben mehr. Rubriken laufen jetzt
   in gemischter Schreibung, normal laufend, mit einem Punkt in
   Akzentfarbe davor und einer feinen Linie dahinter, wie die
   Rubrikzeile in einer Zeitschrift.
   ============================================================ */

.label{display:flex;align-items:center;gap:12px;
  font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:500;
  letter-spacing:-.005em;text-transform:none;color:var(--ink)}
.label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.label::after{content:"";height:1px;background:var(--line-soft);flex:1 1 auto;min-width:18px}
.section-head .label{padding-top:14px}
.label-hell{color:rgba(244,241,233,.86)}
.label-hell::before{background:#8A82F5}
.label-hell::after{background:rgba(244,241,233,.24)}
/* In engen Spalten stoert die Linie, dort bleibt nur Punkt und Wort */
.two-col > .label::after,.kino-inhalt .label::after{display:none}

/* Navigation: lesbare Wortmarken statt gesperrter Versalien */
.nav-meta{gap:34px}
.nav-meta a{font-size:15.5px;letter-spacing:-.01em;text-transform:none;font-weight:500;
  color:var(--muted);padding-bottom:4px}
.drawer a.dl{letter-spacing:-.03em}

/* Schritte: die Zahl traegt die Farbe, das Wort laeuft normal */
.steps b{font-size:15px;letter-spacing:-.01em;text-transform:none;font-weight:600;margin-bottom:9px}
.steps span{font-size:14px}

/* Saeulennummer */
.pillar-num{font-size:15px;letter-spacing:-.01em;text-transform:none;color:var(--muted);opacity:1}
.pillar-num b{color:var(--accent);font-weight:600;margin-right:7px}

/* Fussleiste im Kopfbereich */
.kino-fuss{font-size:12.5px;letter-spacing:0;text-transform:none}
.kino-hinweis{color:rgba(244,241,233,.62)}
.kino-domains{color:rgba(244,241,233,.9)}

/* Spaltenueberschriften im Fuss */
.site-foot h4{font-size:14px;letter-spacing:-.01em;text-transform:none;font-weight:600;
  color:rgba(244,241,233,.62)}

/* Formularbeschriftungen */
.fg label{font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted)}

/* Ansagebalken bleibt in Versalien, dort ist es eine Laufschrift und kein Etikett,
   aber enger gesetzt, damit es nicht nach Baukasten aussieht */
.ansage-spur span{font-size:11.5px;letter-spacing:.06em;text-transform:none}

/* Eckdaten im Auftakt */
.hero-facts b{font-size:14.5px;letter-spacing:-.01em;text-transform:none;font-weight:600;min-width:150px}
.hero-facts span{font-size:14.5px}

/* Namen unter den Geraeten */
.fon-text b{font-size:16.5px;letter-spacing:-.02em}
.fon-text i{font-size:13px;letter-spacing:0}


/* ---------- Ausweichbild, wenn der Film nicht von selbst startet ---------- */
/* Im Stromsparmodus lehnen Handys das automatische Abspielen ab. Der Browser
   legt dann einen Abspielknopf ueber das Bild. Statt dessen nehmen wir den
   Film heraus und zeigen nur das Standbild, dann ist da kein Knopf. */
.kino-rahmen.ohne-film .kino-film{display:none}
.kino-rahmen.ohne-film{background-image:var(--standbild);background-size:cover;
  background-position:center top;background-repeat:no-repeat}
@media (max-width:780px),(max-aspect-ratio:5/4){
  .kino-rahmen.ohne-film{background:none}
  .kino-rahmen.ohne-film::before{content:"";display:block;width:100%;aspect-ratio:16/9;
    margin-top:var(--kopf,66px);background-image:var(--standbild);background-size:cover;
    background-position:center}
}


/* Statt durchnummerierter Listen stehen jetzt Taetigkeitswoerter davor */
.reg-row .num{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:-.01em;color:var(--accent);min-width:88px;padding-top:11px}
.pillar-num{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:600;
  letter-spacing:-.015em;color:var(--accent);text-transform:none}
@media (max-width:780px){.reg-row .num{min-width:auto}}

.legal-body p{color:var(--muted);margin-bottom:14px;max-width:70ch}
.legal-body a{text-decoration:underline}
.legal-body strong{color:var(--ink)}
.legal-body ul{margin:0 0 16px 20px;color:var(--muted)}
.legal-body li{margin-bottom:8px}
.legal .reg-row{padding:30px 0}
.hinweis{background:rgba(79,70,229,.08);border-left:2px solid var(--accent);padding:12px 16px;font-size:14px}