/* ==========================================================================
   DeskLane Studio — Startseite „Papier & Petrol“ (Agentur-Redesign, 01.11.2026)
   Nur fuer index.html und de/index.html. Die Unterseiten nutzen weiter style.css.
   Welt: helles Creme-Papier als Grund, tiefes Petrol als Kapitelraum, Kupfer als
   einziges Signal. Schrift: Instrument Sans (selbst gehostet, SIL OFL).
   Ohne JavaScript oder mit prefers-reduced-motion ist die Seite vollstaendig und
   ruhig: alle Szenen liegen im normalen Fluss, erst html.motion schaltet sie frei.
   ========================================================================== */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  color-scheme: light;
  --paper:      #f3ece0;
  --paper-2:    #ebe1d1;
  --paper-3:    #e2d6c3;
  --ink:        #142120;          /* auf Papier 14.9:1 */
  --ink-soft:   #3e4c4a;          /* 8.6:1 */
  --ink-faint:  #5b6563;          /* 5.4:1 */
  --rule:       rgba(20,33,32,.14);
  --petrol:     #2e6e6e;          /* auf Papier 5.2:1 */
  --petrol-2:   #245858;
  --deep:       #0d2223;          /* Kapitelraum */
  --deep-2:     #123031;
  --mint:       #7fc9c4;          /* auf --deep 9.1:1 */
  --on-deep:    #eef3ef;
  --on-deep-2:  #a9c3bf;          /* auf --deep 8.4:1 */
  --copper:     #b4683b;
  --copper-ink: #94522c;          /* auf Papier 5.0:1 */

  --f: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Typo-Skala: Text ruhig, Display gross. */
  --t-sm:   clamp(.8125rem, .79rem + .1vw, .875rem);
  --t-base: clamp(1rem, .97rem + .15vw, 1.0938rem);
  --t-lg:   clamp(1.125rem, 1.04rem + .4vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.18rem + .9vw, 1.875rem);
  --t-d2:   clamp(2.4rem, 1.4rem + 4.4vw, 5.6rem);
  --t-d1:   clamp(3.1rem, 1.2rem + 8.2vw, 9.4rem);

  --gut:  clamp(1.25rem, .6rem + 3vw, 3.5rem);   /* Seitenrand */
  --sec:  clamp(6rem, 4rem + 9vw, 12rem);         /* Abschnittsabstand */
  --maxw: 1440px;
  --hd-h: 72px;

  /* Ein Bewegungssystem: zwei Kurven, drei Dauern. */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-io:   cubic-bezier(.76, 0, .24, 1);
  --d-fast: .35s; --d-mid: .7s; --d-slow: 1.2s;
}

/* --- Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f); font-size: var(--t-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
::selection { background: var(--petrol); color: var(--paper); }
[data-theme="dark"] ::selection { background: var(--mint); color: var(--deep); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; border-radius: 2px; }
[data-theme="dark"] :focus-visible { outline-color: var(--mint); }
html { scrollbar-color: var(--petrol) var(--paper-2); }
input { caret-color: var(--copper); }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 1000;
  padding: .75rem 1.1rem; background: var(--ink); color: var(--paper);
  border-radius: 999px; font-weight: 600; text-decoration: none; transition: top var(--d-fast) var(--e-out);
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ico { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--d-mid) var(--e-out); }

.display {
  font-size: var(--t-d2); font-weight: 600; line-height: .98; letter-spacing: -.04em;
  text-wrap: balance; max-width: 16ch;
}

/* Feinkorn: gibt dem Papier Materialitaet. SVG-Rauschen als data-URI (img-src data: erlaubt). */
.grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Knoepfe ------------------------------------------------------------- */
.btn {
  --bg: transparent; --fg: var(--ink); --bd: currentColor;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 44px; padding: .7em 1.25em; border: 1px solid var(--bd); border-radius: 999px;
  background: var(--bg); color: var(--fg); font: 600 var(--t-sm)/1 var(--f); letter-spacing: .005em;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out), transform var(--d-fast) var(--e-out);
}
.btn::before {             /* Fuellung waechst von unten — einheitlich fuer alle Knoepfe */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--fill, var(--petrol)); transform: translateY(101%);
  transition: transform var(--d-mid) var(--e-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover .ico { transform: rotate(45deg); }
.btn:active { transform: scale(.98); }
.btn--lg { min-height: 56px; padding: 1em 1.6em; font-size: var(--t-base); }
.btn--solid { --bg: var(--ink); --fg: var(--paper); --bd: var(--ink); --fill: var(--petrol); }
.btn--solid:hover { --bd: var(--petrol); }
.btn--line { --fg: var(--ink); --bd: var(--rule); --fill: var(--ink); }
.btn--line:hover { --fg: var(--paper); }
.btn--mint { --bg: var(--mint); --fg: var(--deep); --bd: var(--mint); --fill: var(--on-deep); }
.btn--line-light { --fg: var(--on-deep); --bd: rgba(238,243,239,.3); --fill: var(--on-deep); }
.btn--line-light:hover { --fg: var(--deep); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em; font-weight: 600; font-size: var(--t-sm);
  text-decoration: none; padding-block: .6em; background: linear-gradient(currentColor, currentColor) 0 calc(100% - .35em) / 0 1px no-repeat;
  transition: background-size var(--d-mid) var(--e-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover .ico { transform: rotate(45deg); }

/* --- Kopfzeile ----------------------------------------------------------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 500; height: var(--hd-h);
  color: var(--ink); transition: color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.hd::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule); opacity: 0; transition: opacity var(--d-mid) var(--e-out), background-color var(--d-mid) var(--e-out);
}
.hd.is-scrolled::before { opacity: 1; }
.hd.is-dark { color: var(--on-deep); }
.hd.is-dark::before { background: color-mix(in srgb, var(--deep) 78%, transparent); border-color: rgba(238,243,239,.12); }
.hd.is-hidden { transform: translateY(-100%); }
.hd__inner {
  height: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.hd__chapter {
  justify-self: center; font-size: var(--t-sm); color: currentColor; opacity: .7;
  overflow: hidden; height: 1.4em; line-height: 1.4em; white-space: nowrap;
}
.hd__chapter-txt { display: inline-block; }
.nav ul { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.9rem); }
.nav a:not(.btn) { text-decoration: none; font-size: var(--t-sm); font-weight: 500; position: relative; padding-block: .6em; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .25em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--d-mid) var(--e-out);
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hd.is-dark .btn--solid { --bg: var(--on-deep); --fg: var(--deep); --bd: var(--on-deep); --fill: var(--mint); }
.lang { display: inline-flex; align-items: baseline; gap: .35rem; font-size: var(--t-sm); }
.lang__item[aria-current] { font-weight: 700; }
.lang__sep { opacity: .4; }
.nav-toggle {
  display: none; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .2rem;
  background: none; border: 0; color: inherit; font: 600 var(--t-sm) var(--f); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--d-mid) var(--e-out); }
.nav-toggle__bars { position: relative; transform: translateY(-3px); }
.nav-toggle__bars::before { content: ""; position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 1060px) {
  .hd__chapter { display: none; }
  .hd__inner { grid-template-columns: 1fr auto; }
  .nav-toggle:not([hidden]) { display: inline-flex; }
  .nav-toggle:not([hidden]) + .nav {
    position: fixed; inset: 0; z-index: -1; display: grid; align-content: center;
    padding: calc(var(--hd-h) + 2rem) var(--gut) 3rem; background: var(--deep); color: var(--on-deep);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path var(--d-slow) var(--e-io), visibility 0s var(--d-slow);
  }
  .nav-toggle:not([hidden]) + .nav.is-open { clip-path: inset(0); visibility: visible; transition: clip-path var(--d-slow) var(--e-io); }
  .nav-toggle:not([hidden]) + .nav ul { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .nav-toggle:not([hidden]) + .nav a:not(.btn) { font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
  .nav-toggle:not([hidden]) + .nav .lang { margin: 1.5rem 0 1rem; font-size: 1.1rem; }
  .nav-toggle:not([hidden]) + .nav .btn--solid { --bg: var(--mint); --fg: var(--deep); --bd: var(--mint); min-height: 56px; font-size: 1rem; padding: 1em 1.6em; }
  .hd.nav-open { color: var(--on-deep); }
  .hd.nav-open::before { opacity: 0; }
}
@media (max-width: 1060px) { .nav-toggle[hidden] + .nav ul { flex-wrap: wrap; gap: .5rem 1rem; } }

/* --- Lader --------------------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-content: center; justify-items: center; gap: 1rem;
  background: var(--deep); color: var(--on-deep);
  animation: loader-failsafe 0s linear 4.5s forwards;   /* Notbremse, falls JS ausfaellt */
}
@keyframes loader-failsafe { to { visibility: hidden; opacity: 0; } }
.loader__sheets { position: relative; width: 74px; height: 100px; margin-bottom: 1.2rem; }
.loader__sheets span {
  position: absolute; inset: 0; border-radius: 3px; background: var(--paper);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
}
.loader__sheets span:nth-child(1) { transform: rotate(-9deg) translateX(-10px); background: var(--mint); }
.loader__sheets span:nth-child(2) { transform: rotate(6deg) translateX(8px); background: var(--copper); }
.loader__word { font-size: clamp(2rem, 6vw, 4.2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.loader__line { color: var(--on-deep-2); font-size: var(--t-sm); }
.loader__count { position: absolute; right: var(--gut); bottom: var(--gut); font-size: clamp(3rem, 10vw, 8rem); font-weight: 600; letter-spacing: -.05em; line-height: .8; font-variant-numeric: tabular-nums; color: var(--mint); }
.loader.is-done { display: none; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* --- Mauszeiger ---------------------------------------------------------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 950; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--copper); pointer-events: none; display: none;
  transition: width var(--d-mid) var(--e-out), height var(--d-mid) var(--e-out), margin var(--d-mid) var(--e-out), background-color var(--d-mid) var(--e-out);
  place-items: center;
}
.motion.has-cursor .cursor { display: grid; }
.cursor.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(180,104,59,.18); }
.cursor.is-label { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--copper-ink); }
.cursor__label { font: 600 .78rem/1.1 var(--f); color: #fff; text-align: center; opacity: 0; transition: opacity var(--d-fast); padding: 0 .6rem; }
.cursor.is-label .cursor__label { opacity: 1; }

/* --- Held ---------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; padding: calc(var(--hd-h) + clamp(2rem, 6vh, 5rem)) var(--gut) clamp(2rem, 5vh, 4rem); overflow: clip; }
.hero::after {               /* Kupfer-Linie als Grundlinie der Szene */
  content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: 0; height: 1px; background: var(--rule);
}
.hero__inner {
  max-width: var(--maxw); margin: 0 auto; min-height: calc(100svh - var(--hd-h) - 8vh);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 2rem 4vw;
}
.hero__title {
  grid-column: 1 / -1; grid-row: 1; align-self: start; position: relative; z-index: 2;
  font-size: var(--t-d1); font-weight: 600; line-height: .9; letter-spacing: -.045em; max-width: 11.5ch;
}
.hero__title .dim { color: var(--petrol); }
.hero__stage { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; width: min(100%, 520px); perspective: 1400px; position: relative; z-index: 1; }
.hero__stack { position: relative; aspect-ratio: 1; transform-style: preserve-3d; }
.hero__sheet { position: absolute; margin: 0; border-radius: 6px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 4px rgba(20,33,32,.08), 0 40px 80px -30px rgba(20,33,32,.45); will-change: transform; }
.hero__sheet img { width: 100%; height: 100%; object-fit: cover; }
.hero__sheet--a { width: 52%; aspect-ratio: 636/900; left: -2%; top: 14%; transform: rotate(-11deg); }
.hero__sheet--b { width: 52%; aspect-ratio: 636/900; right: -4%; top: 4%; transform: rotate(8deg); }
.hero__sheet--c { width: 78%; aspect-ratio: 1; left: 11%; top: 16%; transform: rotate(-2deg); }
.hero__tag {
  position: absolute; left: 4%; bottom: 0; z-index: 3; padding: .55em 1em; border-radius: 999px;
  background: var(--copper-ink); color: #fff; font-size: var(--t-sm); font-weight: 600; transform: rotate(-4deg);
  box-shadow: 0 10px 24px -12px rgba(148,82,44,.7);
}
.hero__foot { grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: 1.6rem; max-width: 46rem; }
.hero__sub { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-soft); max-width: 44ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: var(--t-sm); color: var(--ink-faint); }
.hero__meta li { display: inline-flex; align-items: center; gap: .55rem; }
.hero__meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; }
  .hero__title { font-size: clamp(2.9rem, 13.5vw, 4.6rem); }
  .hero__stage { grid-column: 1; grid-row: 2; justify-self: center; width: min(86%, 420px); margin: .5rem 0 1rem; }
  .hero__foot { grid-row: 3; }
  .hero__ctas .btn { flex: 1 1 100%; }
}

/* --- Faecher-Szene (Spezifikationen) ---------------------------------------
   Ohne Motion: Blaetter als ruhige Reihe, Fakten als Liste. Mit Motion: hoher
   Wrapper + sticky Buehne; JS scrubbt Drehung und Auffaechern. */
.fan { position: relative; padding: var(--sec) var(--gut); }
.fan__sticky { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4vw; align-items: center; }
.fan__stage { position: relative; height: clamp(320px, 52vh, 560px); perspective: 1600px; }
.fan__sheet {
  position: absolute; left: 50%; top: 50%; width: clamp(170px, 17vw, 270px); aspect-ratio: 636/900; margin: 0;
  border-radius: 5px; overflow: hidden; background: #fff; transform-origin: 50% 120%;
  translate: -50% -50%; rotate: calc((var(--i) - 2.5) * 9deg);
  box-shadow: 0 1px 2px rgba(20,33,32,.08), 0 30px 60px -28px rgba(20,33,32,.5);
}
.fan__sheet img { width: 100%; height: 100%; object-fit: cover; }
.facts { display: grid; border-top: 1px solid var(--rule); }
.facts__item { display: grid; grid-template-columns: minmax(7rem, .5fr) 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.facts__k { font-size: var(--t-sm); color: var(--copper-ink); font-weight: 600; }
.facts__v { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.motion .fan { height: 300vh; padding: 0; }
.motion .fan__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: var(--hd-h) var(--gut) 0; max-width: none; }
.motion .fan__sheet { translate: none; rotate: none; }  /* JS uebernimmt die Lage */
.motion .facts__item { will-change: transform, opacity; }
@media (max-width: 860px) {
  .fan__sticky { grid-template-columns: 1fr; }
  .fan__stage { height: 300px; }
  .fan__sheet { width: 128px; }
  .motion .fan { height: 260vh; }
  .motion .fan__sticky { align-content: center; gap: 1.5rem; }
  .motion .fan__stage { height: 38svh; }
  .facts__item { grid-template-columns: 1fr; gap: .2rem; padding: .85rem 0; }
  .facts__v { font-size: 1.25rem; }
}

/* --- Laufband ------------------------------------------------------------ */
.marquee { padding: clamp(2rem, 6vw, 5rem) 0; overflow: clip; border-block: 1px solid var(--rule); }
.marquee__row { white-space: nowrap; }
.marquee__track { display: inline-flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); font-size: clamp(3.4rem, 11vw, 11rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; will-change: transform; }
.marquee__track span:not(.marquee__dot) { padding-right: .02em; }
.marquee__row--rev .marquee__track { color: transparent; -webkit-text-stroke: 1.2px var(--petrol); }
.marquee__dot { width: .22em; height: .22em; border-radius: 50%; background: var(--copper); flex: none; }

/* --- Galerie (horizontal) ------------------------------------------------- */
.gallery { padding: var(--sec) 0 calc(var(--sec) * .6); }
.gallery__head { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 5vw, 4.5rem); padding: 0 var(--gut);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem 4vw; align-items: end; }
.gallery__aside { color: var(--ink-soft); max-width: 42ch; }
.gallery__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem); padding: 0 var(--gut); max-width: var(--maxw); margin: 0 auto; }
.card { display: grid; grid-template-rows: auto 1fr; gap: 1.4rem; }
.card__fig { position: relative; }
.card__mask { overflow: hidden; border-radius: 6px; background: var(--paper-2); aspect-ratio: 4/5; }
.card__mask img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform-origin: 50% 30%; transition: transform var(--d-slow) var(--e-out); }
.card:hover .card__mask img { transform: scale(1.04); }
.card__tag { position: absolute; top: 1rem; left: 1rem; padding: .4em .85em; border-radius: 999px; background: var(--paper); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.card:first-child .card__tag { background: var(--copper-ink); color: #fff; }
.card__body { display: grid; gap: .6rem; align-content: start; }
.card__title { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.card__text { color: var(--ink-soft); max-width: 40ch; }
.card--end { align-self: stretch; }
.endcard {
  display: grid; align-content: space-between; min-height: 100%; aspect-ratio: 4/5; padding: clamp(1.4rem, 2.6vw, 2.4rem);
  border-radius: 6px; background: var(--petrol); color: var(--paper); text-decoration: none;
  transition: background-color var(--d-mid) var(--e-out);
}
.endcard:hover { background: var(--petrol-2); }
.endcard__txt { font-size: var(--t-d2); font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; max-width: 9ch; }
.endcard__ico { justify-self: end; width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 1px solid rgba(243,236,224,.4); display: grid; place-items: center; }
.endcard__ico .ico { width: 1.6rem; height: 1.6rem; }
.endcard:hover .ico { transform: rotate(45deg); }
.gallery__progress { display: none; }

/* Mit Motion auf grossen Schirmen: sticky Buehne, Spur faehrt seitlich. */
@media (min-width: 861px) {
  .motion .gallery { padding: 0; }
  .motion .gallery__sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--hd-h) + 3vh) 0 4vh; overflow: hidden; }
  .motion .gallery__head { margin-bottom: 3vh; width: 100%; }
  .motion .gallery__track { display: flex; align-items: stretch; max-width: none; margin: 0; padding: 0 var(--gut); gap: clamp(1.5rem, 3vw, 3.5rem); will-change: transform; width: max-content; }
  .motion .card { width: clamp(340px, 33vw, 500px); grid-template-rows: auto 1fr; }
  .motion .card__mask { aspect-ratio: auto; height: min(50vh, 560px); }
  .motion .card--end { width: clamp(340px, 33vw, 500px); }
  .motion .endcard { aspect-ratio: auto; height: min(50vh, 560px); min-height: 0; }
  .motion .gallery__progress { display: block; margin: 0 var(--gut); height: 1px; background: var(--rule); }
  .motion .gallery__progress span { display: block; height: 100%; background: var(--copper); transform-origin: left; transform: scaleX(0); }
}
/* Handy: natives Wischen mit Einrasten, kein Pinning. */
@media (max-width: 860px) {
  .gallery__head { grid-template-columns: 1fr; }
  .gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: 1rem; scrollbar-width: none; overscroll-behavior-x: contain; contain: paint; }
  .gallery__track::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 78%; scroll-snap-align: start; scroll-margin-left: var(--gut); }
  .card--end { flex-basis: 60%; }
}

/* --- Schritte ------------------------------------------------------------ */
.steps { padding: var(--sec) var(--gut); background: var(--paper-2); }
.steps__sticky { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4vw; }
.steps__title { grid-column: 1 / -1; }
.steps__big { display: none; }
.steps__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 3vw; counter-reset: s; }
.steps__item { display: grid; gap: .7rem; align-content: start; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.steps__num { font-size: var(--t-sm); font-weight: 700; color: var(--copper-ink); font-variant-numeric: tabular-nums; }
.steps__item h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.steps__item p { color: var(--ink-soft); max-width: 40ch; }
.steps__rail { display: none; }
@media (min-width: 861px) {
  .motion .steps { height: 320vh; padding: 0 var(--gut); }
  .motion .steps__sticky { position: sticky; top: 0; height: 100vh; padding: calc(var(--hd-h) + 5vh) 0 8vh; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr; align-items: end; }
  .motion .steps__title { grid-column: 1 / -1; font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); max-width: 22ch; }
  .motion .steps__big { display: block; grid-column: 1; grid-row: 2; align-self: end; overflow: hidden; line-height: .78; font-size: min(52vh, 34vw); font-weight: 600; letter-spacing: -.07em; color: var(--petrol); font-variant-numeric: tabular-nums; }
  .motion .steps__digit { display: inline-block; will-change: transform; }
  .motion .steps__list { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr; align-self: end; position: relative; }
  .motion .steps__item { grid-area: 1 / 1; border-top: 0; padding: 0; }
  .motion .steps__item h3 { font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem); letter-spacing: -.04em; line-height: 1; }
  .motion .steps__item p { font-size: var(--t-lg); }
  .motion .steps__num { display: none; }
  .motion .steps__rail { display: block; position: absolute; right: 0; top: calc(var(--hd-h) + 5vh); bottom: 8vh; width: 1px; background: var(--rule); }
  .motion .steps__rail span { display: block; width: 100%; height: 100%; background: var(--copper); transform-origin: top; transform: scaleY(0); }
  .motion .steps__sticky { position: sticky; }
}
@media (max-width: 860px) { .steps__list { grid-template-columns: 1fr; } }

/* --- Freebie (dunkles Kapitel) ------------------------------------------- */
.freebie { position: relative; padding: var(--sec) var(--gut); background: var(--deep); color: var(--on-deep); overflow: clip; }
.freebie::before {
  content: ""; position: absolute; width: 70vw; height: 70vw; right: -25vw; top: -20vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(127,201,196,.16), transparent); pointer-events: none;
}
.freebie__inner { position: relative; max-width: var(--maxw); margin: 0 auto; }
.freebie__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem 4vw; align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.freebie__aside { color: var(--on-deep-2); font-size: var(--t-lg); max-width: 34ch; }
.freebie__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem 6vw; align-items: start; }
.freebie__art { position: sticky; top: calc(var(--hd-h) + 2rem); perspective: 1200px; }
.freebie__fig { margin: 0; }
.freebie__mask { border-radius: 6px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0,0,0,.8); transform: rotate(-3deg); }
.freebie__mask img { width: 100%; }
.freebie__body { display: grid; gap: 1.6rem; }
.checklist { display: grid; border-top: 1px solid rgba(238,243,239,.14); }
.checklist li { position: relative; padding: 1rem 0 1rem 2.4rem; border-bottom: 1px solid rgba(238,243,239,.14); font-size: var(--t-lg); line-height: 1.35; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 1.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1px solid var(--mint);
  background: radial-gradient(circle, var(--mint) 0 34%, transparent 36%);
}
.checklist em { font-style: italic; color: var(--mint); }
.fineprint { font-size: var(--t-sm); color: var(--on-deep-2); max-width: 62ch; }
.fineprint a, .signup__consent a { color: var(--mint); }
.signup { display: grid; gap: 1rem; margin-top: .5rem; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 10px; background: var(--deep-2); border: 1px solid rgba(238,243,239,.1); }
.signup__label { font-weight: 600; }
.signup__row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.signup__input {
  min-height: 56px; padding: 0 1.2rem; border-radius: 999px; border: 1px solid rgba(238,243,239,.28);
  background: rgba(0,0,0,.18); color: var(--on-deep); font: 500 var(--t-base) var(--f); caret-color: var(--mint);
  transition: border-color var(--d-mid) var(--e-out), background-color var(--d-mid) var(--e-out);
}
.signup__input::placeholder { color: #8fa9a5; }   /* 5.6:1 auf --deep-2 */
.signup__input:hover { border-color: rgba(238,243,239,.5); }
.signup__input:focus { outline: 2px solid var(--mint); outline-offset: 2px; border-color: var(--mint); background: rgba(0,0,0,.28); }
.signup__input:user-invalid { border-color: #f0a37c; }
.signup__consent { display: grid; grid-template-columns: auto 1fr; gap: .8rem; font-size: var(--t-sm); color: var(--on-deep-2); line-height: 1.5; }
.signup__consent input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--mint); }
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 860px) {
  .freebie__head, .freebie__grid { grid-template-columns: 1fr; }
  .freebie__art { position: relative; top: 0; width: min(70%, 320px); }
  .signup__row { grid-template-columns: 1fr; }
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { padding: var(--sec) var(--gut); }
.faq__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem 6vw; align-items: start; }
.faq .display { position: sticky; top: calc(var(--hd-h) + 2rem); font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4.6rem); }
.qa { border-top: 1px solid var(--rule); }
.qa__item { display: grid; gap: .6rem; padding: clamp(1.4rem, 2.6vw, 2.2rem) 0; border-bottom: 1px solid var(--rule); }
.qa__item h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.qa__item p { color: var(--ink-soft); max-width: 58ch; }
@media (max-width: 860px) { .faq__inner { grid-template-columns: 1fr; } .faq .display { position: static; } }

/* --- Schluss-CTA ---------------------------------------------------------- */
.cta { position: relative; padding: var(--sec) var(--gut) calc(var(--sec) * .8); background: var(--deep); color: var(--on-deep); overflow: clip; }
.cta__inner { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 2.4rem; }
.cta__title { font-size: clamp(2.8rem, 1rem + 7.4vw, 8.6rem); font-weight: 600; line-height: .92; letter-spacing: -.045em; max-width: 13ch; text-wrap: balance; }
.cta__lead { font-size: var(--t-lg); color: var(--on-deep-2); max-width: 38ch; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin-top: 1rem; }
.orb {
  position: relative; display: grid; place-content: center; justify-items: center; gap: .5rem;
  width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%;
  background: var(--mint); color: var(--deep); text-decoration: none; font-weight: 600; font-size: var(--t-base);
  isolation: isolate; overflow: hidden; transition: transform var(--d-mid) var(--e-out);
}
.orb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--copper); border-radius: 50%; transform: scale(0); transition: transform var(--d-mid) var(--e-out); }
.orb:hover::before, .orb:focus-visible::before { transform: scale(1); }
.orb:hover, .orb:focus-visible { color: #fff; }
.orb .ico { width: 1.6rem; height: 1.6rem; }
.orb:hover .ico { transform: rotate(45deg); }
.orb__txt { max-width: 8ch; text-align: center; line-height: 1.15; }

/* --- Fusszeile ------------------------------------------------------------ */
.ft { background: var(--deep); color: var(--on-deep); padding: 0 var(--gut) 2rem; overflow: clip; }
.ft__inner { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid rgba(238,243,239,.14); padding-top: clamp(3rem, 6vw, 5rem); }
.ft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.ft__about p { margin-top: 1rem; max-width: 34ch; color: var(--on-deep-2); }
.ft h2 { font-size: var(--t-sm); font-weight: 600; color: var(--mint); margin-bottom: 1rem; }
.ft ul { display: grid; gap: .2rem; }
.ft ul a { text-decoration: none; display: inline-block; padding: .35rem 0; color: var(--on-deep); }
.ft ul a:hover { color: var(--mint); text-decoration: underline; }
.ft__word { margin: clamp(3rem, 6vw, 5rem) 0 1.5rem; font-size: clamp(4.5rem, 21.5vw, 21rem); font-weight: 600; letter-spacing: -.065em; line-height: .78; color: var(--deep-2);
  -webkit-text-stroke: 1px rgba(127,201,196,.25); white-space: nowrap; }
.ft__bottom { font-size: var(--t-sm); color: var(--on-deep-2); max-width: 90ch; }
@media (max-width: 760px) { .ft__grid { grid-template-columns: 1fr; } }

/* --- Bewegung: Ausgangszustaende nur mit html.motion ---------------------- */
.motion .split-line { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .grain { display: none; }
}

/* Ziffern-Rolle der Schritte-Szene (wird von home.js erzeugt) */
.steps__reel { display: block; }
.steps__reel span { display: block; height: .8em; line-height: .8; }
.motion .steps__big { height: .8em; }

/* Runde 2: Faecher-Ueberschrift, Galerie-Raster, Hero-Umbruch */
.hero__title { text-wrap: balance; }
.fan__sticky { grid-template-rows: auto 1fr; }
.fan__title { grid-column: 1 / -1; max-width: 14ch; }
.motion .fan__sticky { align-content: center; }
.motion .fan__title { font-size: clamp(2.2rem, 1rem + 4vw, 5.4rem); }
@media (min-width: 861px) {
  .motion .gallery__sticky { grid-template-columns: minmax(0, 1fr); }
  .motion .gallery__head { max-width: var(--maxw); margin-inline: auto; }
}
@media (max-width: 860px) {
  .motion .fan__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .motion .fan__stage { height: 32svh; }
}

/* ==========================================================================
   Runde 3 (01.11.2026) — Dichte und Kontrast der beiden luftigen Szenen.
   Beide Szenen hatten im Video grosse Leerflaechen, weil Inhalte erst spaet
   im Scrub auftauchten (Rahmen und Linien lagen mit in der Blende) und weil
   Buehne bzw. Ziffer zu klein fuer die Flaeche waren. Darum: Struktur immer
   sichtbar, nur der Text bewegt sich, und die Hauptfigur fuellt ihre Haelfte.
   ========================================================================== */

/* Lange deutsche Woerter sollen trennen statt die Zeile zu sprengen. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

/* --- Faecher-Szene: groessere Buehne, Tabelle sofort als Raster lesbar ---- */
.facts { border-top: 1px solid var(--ink-faint); }
.facts__item { border-bottom: 1px solid var(--rule); }
.facts__k { color: var(--copper-ink); letter-spacing: .04em; text-transform: uppercase; }
.facts__v { color: var(--ink); }
.motion .facts__item { will-change: auto; }      /* bewegt wird jetzt der Text */
.motion .facts__k, .motion .facts__v { will-change: transform, opacity; }

@media (min-width: 861px) {
  .motion .fan__sticky {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center; align-content: center; gap: 3vh 5vw;
    padding: calc(var(--hd-h) + 3vh) var(--gut) 5vh;
  }
  .motion .fan__title { grid-column: 1 / -1; max-width: 26ch; margin-bottom: 1vh; }
  /* Die Blaetter drehen um einen Punkt unter der Buehne; sie wandern deshalb
     beim Auffaechern nach unten. Die Buehne steht darum etwas hoeher, damit
     der Faecher nicht an der Unterkante abgeschnitten wird. */
  .motion .fan__stage { height: min(58svh, 580px); align-self: center; margin-top: -4vh; }
  .motion .fan__sheet { width: clamp(185px, 18vw, 280px); }
  .motion .facts { align-self: center; }
  .motion .facts__item { padding: clamp(1.1rem, 2.2vh, 1.9rem) 0; }
  .motion .facts__v { font-size: clamp(1.35rem, .9rem + 1.15vw, 2.1rem); font-weight: 600; letter-spacing: -.025em; }
}
@media (max-width: 860px) {
  .motion .fan__stage { height: 36svh; }
  .motion .fan__sheet { width: clamp(132px, 34vw, 170px); }
}

/* --- Schritte-Szene: Mitte gefuellt, Ziffer traegt die linke Haelfte ----- */
@media (min-width: 861px) {
  .motion .steps__sticky {
    grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: center; gap: clamp(1.5rem, 4vh, 3.5rem) 5vw;
    padding: calc(var(--hd-h) + 4vh) 0 6vh;
  }
  /* Die Trennlinie laeuft bis zur Fortschrittsschiene — sie bindet die
     beiden Haelften zusammen, statt mitten in der Flaeche abzubrechen. */
  .motion .steps__title {
    max-width: none; padding-bottom: clamp(1rem, 2.4vh, 2rem);
    border-bottom: 1px solid var(--rule);
  }
  /* Die Ziffer laeuft links aus dem Bild — so fuellt sie ihre Haelfte wirklich,
     statt als schmale Glyphe in einer breiten leeren Spalte zu stehen. */
  .motion .steps__big {
    align-self: center; justify-self: start;
    font-size: min(78vh, 46vw); color: var(--petrol-2);
    margin-left: -3.5vw;
  }
  /* Fenster fuer die durchlaufenden Schritt-Texte (siehe home.js). */
  .motion .steps__list { align-self: center; overflow: hidden; padding-block: .4em; }
  .motion .steps__item { align-content: center; gap: 1rem; }
  .motion .steps__item h3 { color: var(--ink); max-width: 15ch; }
  .motion .steps__item p { color: var(--ink-soft); max-width: 42ch; }
  /* Laufende Nummer bleibt sichtbar — sonst wirkt die rechte Spalte nackt. */
  .motion .steps__num {
    display: inline-block; font-size: var(--t-sm); font-weight: 700;
    color: var(--copper-ink); letter-spacing: .08em;
  }
  .motion .steps__rail { top: calc(var(--hd-h) + 4vh); bottom: 6vh; }
}

/* --- Schritt-Blatt: fuellt die untere rechte Ecke --------------------------
   Jeder Schritt zeigt eine echte Vorlagen-Vorschau und eine Angabe, die
   ohnehin auf der Seite steht. Das Blatt sitzt im steps__item und wandert
   deshalb ohne eigene Animation mit dem Textwechsel durch das Fenster. */
.steps__plate {
  margin-top: .9rem; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: .9rem;
}
.steps__plate-mask {
  width: clamp(62px, 17vw, 86px); aspect-ratio: 636 / 900; overflow: hidden;
  border-radius: 5px; border: 1px solid var(--rule); background: #fff;
}
/* contain statt cover: das quadratische Komplettset-Bild wuerde sonst seitlich
   beschnitten und verlöre seine Ueberschrift. */
.steps__plate-mask img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.steps__chip {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .085em;
  text-transform: uppercase; color: var(--copper-ink); text-wrap: balance;
}
@media (max-width: 600px) {
  .steps__chip { font-size: .78rem; letter-spacing: .05em; }
}
/* Fortschritt: "01 / 03" macht sichtbar, dass hier gescrollt wird. */
.steps__num::after { content: " / 03"; color: var(--ink-soft); font-weight: 500; }
.steps__item h3 { text-wrap: balance; }
@media (min-width: 861px) {
  /* Die Ziffer tritt zurueck, damit das Vorlagen-Blatt das Bild traegt. */
  .motion .steps__big { font-size: min(42vh, 26vw); }
  .motion .steps__num { display: block; }
  .motion .steps__plate {
    margin-top: clamp(1.1rem, 3vh, 2.2rem); grid-template-columns: auto; justify-items: start; gap: .8rem;
  }
  .motion .steps__plate-mask {
    width: auto; height: clamp(200px, 34vh, 340px);
    box-shadow: 0 28px 56px -30px rgba(17, 24, 28, .55);
  }
  .motion .steps__rail { width: 3px; border-radius: 3px; }
}

/* ==========================================================================
   Runde 4 (02.11.2026) — Design-Stapel (taste-skill + Emil-Kowalski-Review)
   Nur Gestaltung und Bewegung; Inhalte unveraendert.
   ========================================================================== */
:root { --d-ui: .26s; --e-ui: cubic-bezier(.23, 1, .32, 1); }

/* 1) Bedienelemente reagieren unter 300 ms statt 0,7 s — Knopf, Pfeil-Link,
      Navigationsstrich, Kopfzeile. Szenen-Bewegung bleibt bewusst langsam. */
.btn { transition: color var(--d-ui) var(--e-ui), border-color var(--d-ui) var(--e-ui), transform .16s var(--e-ui); }
.btn::before { transition: transform .32s var(--e-ui); }
.ico { transition: transform var(--d-ui) var(--e-ui); }
.link-arrow { transition: background-size var(--d-ui) var(--e-ui); }
.nav a:not(.btn)::after { transition: transform var(--d-ui) var(--e-ui); }
.hd { transition: color var(--d-ui) var(--e-ui), transform .4s var(--e-ui); }
.endcard { transition: background-color var(--d-ui) var(--e-ui); }

/* 2) Hover-Bewegung nur fuer echte Mauszeiger — auf dem Handy bleibt nach
      dem Tippen kein halb gefuellter Knopf oder gezoomtes Bild haengen. */
@media (hover: none), (pointer: coarse) {
  .btn:hover::before { transform: translateY(101%); }
  .btn--line:hover { --fg: var(--ink); }
  .btn--line-light:hover { --fg: var(--on-deep); }
  .btn:hover .ico, .link-arrow:hover .ico, .endcard:hover .ico, .orb:hover .ico { transform: none; }
  .card:hover .card__mask img { transform: none; }
  .orb:hover::before { transform: scale(.5); opacity: 0; }
  .orb:hover { color: var(--deep); }
}

/* 3) Mauszeiger waechst per transform statt width/height/margin — kein Layout
      pro Frame mehr. */
.cursor {
  width: 104px; height: 104px; margin: -52px 0 0 -52px; background: transparent;
  transition: none;
}
.cursor::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--copper);
  transform: scale(.1154); transition: transform .32s var(--e-ui), background-color .32s var(--e-ui);
}
.cursor.is-link, .cursor.is-label { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: transparent; }
.cursor.is-link::before { transform: scale(.44); background: rgba(180,104,59,.18); }
.cursor.is-label::before { transform: scale(1); background: var(--copper-ink); }
.cursor__label { position: relative; }

/* 4) Schluss-Kreis: Fuellung waechst aus einer Scheibe, nicht aus dem Nichts. */
.orb::before { transform: scale(.5); opacity: 0; transition: transform .45s var(--e-ui), opacity .2s var(--e-ui); }
.orb:hover::before, .orb:focus-visible::before { transform: scale(1); opacity: 1; }
.orb { transition: transform var(--d-ui) var(--e-ui), color var(--d-ui) var(--e-ui); }

/* 5) Keine gesperrten Mini-Versalien: Etiketten in normaler Schreibweise,
      dafuer etwas kraeftiger — ruhiger und leichter zu lesen. */
.facts__k, .motion .steps__num, .steps__chip {
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
.facts__k { font-size: var(--t-base); }
@media (max-width: 600px) { .steps__chip { font-size: var(--t-sm); letter-spacing: 0; } }

/* 6) Handy: Unterzeile und Knoepfe direkt unter die Ueberschrift, das
      Bildpaket danach — der erste Bildschirm sagt was und fuehrt zum Shop. */
@media (max-width: 860px) {
  .hero__foot { grid-row: 2; margin-top: .4rem; }
  .hero__stage { grid-row: 3; margin: 1.5rem 0 .5rem; }
  .hero__title { font-size: clamp(2.7rem, 12.4vw, 4.4rem); }
}

/* 7) GPT-Zweitblick (Runde 2): dichtere Startseite. Abschnittsabstand wie auf
      den Unterseiten, Held-Titel etwas kleiner, Laufband zurueckgenommen,
      Papierstapel mit ruhigerem Schatten, Handy-Bild kompakter. */
:root {
  --sec: clamp(4.5rem, 3rem + 7vw, 9rem);
  --t-d1: clamp(3.1rem, 1.4rem + 7vw, 8rem);
}
.marquee { padding: clamp(1.5rem, 4vw, 3.5rem) 0; }
.marquee__track { font-size: clamp(2.6rem, 8vw, 8rem); }
.hero__sheet { box-shadow: 0 1px 2px rgba(20,33,32,.08), 0 24px 48px -28px rgba(20,33,32,.35); }
.hero__tag { box-shadow: none; }
@media (max-width: 860px) {
  .hero__stage { width: min(78%, 360px); margin: 1rem 0 0; }
}

/* Handy: Faecher ohne sticky Buehne, die Szene laeuft einmal ab (home.js). */
@media (max-width: 860px) {
  .motion .fan { height: auto; padding: var(--sec) var(--gut); }
  .motion .fan__sticky { position: static; height: auto; padding: 0; }
}

/* Zeilen-Maske von SplitText: Platz fuer Unterlaengen (g, p, y) bei enger Zeilenhoehe. */
.split-line-inner-mask { padding-bottom: .24em; margin-bottom: -.24em; }
@media (max-width: 860px) { .hero__title { line-height: 1.04; } }
/* Handy: keine vollflaechige Mischebene und kein Live-Weichzeichner beim Scrollen. */
@media (max-width: 860px) {
  .grain { display: none; }
  .hd::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
}