/* ============================================================
   NLYP, Markenwebsite
   Gestaltung übernommen aus dem Shopify-Theme "NLYP v1"
   (assets/nlyp-luxe.css, nlyp-luxe-tone.css, nlyp-luxe-modules.css).
   Tokens, Kurven, Glas und Maße sind 1:1 die des Shops.

   SCHRIFTEN
   Aktuell über Google Fonts geladen (siehe <link> in index.html).
   Für den Produktivbetrieb: die vier woff2 aus dem Theme nach
   assets/fonts/ legen, den <link> entfernen und den @font-face-Block
   weiter unten aktivieren. Dann stellt die Seite keine einzige
   Anfrage an einen Drittanbieter mehr.
   ============================================================ */

/* --- Selbst gehostete Schriften: aktivieren, sobald die Dateien liegen ---
@font-face{font-family:'Bebas Neue';src:url('bebas-neue-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('barlow-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('barlow-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('barlow-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('barlow-condensed-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('dm-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
--- */

:root{
  --bg:#140617;
  --bg-deep:#0c0310;
  --bg-card:#1b0921;
  --bg-panel:#1d0a22;
  --ink:#100513;
  --violet:#b0428f;
  --violet-deep:#2b0f32;
  --glow:158,52,120;
  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.055);
  --line-strong:rgba(255,255,255,.26);
  --text:#e6dce6;        /* Fliesstext, 13,9:1 auf dem Grund */
  --text-soft:#cbbccb;   /* zweite Ebene, 9,4:1 */
  --text-dim:#ab9cab;    /* nur Labels und Mono, 6,6:1 */
  --head:#ffffff;

  --f-display:'Bebas Neue','Arial Narrow',sans-serif;
  --f-ui:'Barlow Condensed',system-ui,sans-serif;
  --f-body:'Barlow',system-ui,-apple-system,sans-serif;
  --f-mono:'DM Mono',ui-monospace,monospace;

  --pill:999px;
  --card-r:20px;
  --gutter:16px;
  --shell:1240px;
  --nav-h:74px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.44,0,.56,1);
  --d-fast:240ms;
  --d-mid:460ms;
  --d-slow:740ms;
}

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

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-weight:300;
  font-size:18px;
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Tiefe im Grund, identisch zum Shop */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 96% 62% at 4% -16%,rgba(var(--glow),.26),transparent 64%),
    radial-gradient(ellipse 72% 50% at 98% 2%,rgba(var(--glow),.12),transparent 62%),
    radial-gradient(ellipse 130% 62% at 50% 116%,rgba(10,2,13,.88),transparent 58%),
    linear-gradient(180deg,#1b0722 0%,#140617 44%,#0d0411 100%);
}

/* Korn */
.grain{
  position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

:where(a){color:inherit;text-decoration:none;}
img,svg,video{max-width:100%;display:block;}
p{margin:0;}

h1,h2,h3,h4{
  font-family:var(--f-display);font-weight:400;color:var(--head);
  text-transform:uppercase;line-height:1.04;letter-spacing:.025em;margin:0;
  text-wrap:balance;
}

strong{font-weight:600;color:#eadfe9;}

:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:3px;border-radius:4px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:900;
  padding:12px 20px;background:#fff;color:var(--ink);
  font-family:var(--f-ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
}
.skip-link:focus{left:12px;top:12px;}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter);}

.eyebrow{
  font-family:var(--f-mono);font-size:12.5px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--text-dim);
}

/* ============================================================
   Kopfzeile, Geometrie und Verhalten aus nlyp-luxe.css
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:300;
  padding:14px var(--gutter);
  transition:padding var(--d-slow) var(--ease);
}
.site-header.is-scrolled{padding-top:9px;padding-bottom:9px;}

.nav{
  position:relative;max-width:1560px;margin:0 auto;
  padding:11px 12px 11px 18px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  border-radius:var(--pill);border:1px solid transparent;background:transparent;
  transition:max-width var(--d-slow) var(--ease),padding var(--d-slow) var(--ease),
             background var(--d-mid) var(--ease-io),border-color var(--d-mid) var(--ease-io),
             box-shadow var(--d-mid) var(--ease-io);
}
.site-header.is-scrolled .nav{
  max-width:1080px;padding:7px 8px 7px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 22px 44px -24px rgba(0,0,0,.85);
}

.nav__left{display:flex;align-items:center;gap:34px;min-width:0;}
.nav__logo img{height:20px;width:auto;display:block;}
.nav__links{display:flex;align-items:center;gap:26px;}

.nl{
  position:relative;padding-bottom:3px;
  font-family:var(--f-ui);font-size:11.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
  transition:color var(--d-fast) var(--ease);
}
.nl::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:#fff;
  transform:scaleX(0);transform-origin:right;transition:transform var(--d-mid) var(--ease);
}
.nl:hover,.nl.is-active{color:#fff;}
.nl:hover::after,.nl.is-active::after{transform:scaleX(1);transform-origin:left;}

.nav__right{display:flex;align-items:center;gap:10px;justify-self:end;}

/* Menüknopf: drei Striche, die zum Kreuz werden */
.dots{
  position:relative;display:grid;place-items:center;
  width:42px;height:42px;border-radius:var(--pill);
  border:0;background:transparent;cursor:pointer;padding:0;
}
.dots span{
  position:absolute;display:block;width:17px;height:1.5px;border-radius:2px;background:#fff;
  transition:transform var(--d-mid) var(--ease),opacity var(--d-fast) var(--ease),width var(--d-mid) var(--ease);
}
.dots span:nth-child(1){transform:translateY(-5.5px);}
.dots span:nth-child(2){width:11px;}
.dots span:nth-child(3){transform:translateY(5.5px);}
.dots:hover span:nth-child(1){transform:translateY(-6.5px);}
.dots:hover span:nth-child(2){width:17px;}
.dots:hover span:nth-child(3){transform:translateY(6.5px);}
body.nav-open .dots span:nth-child(1){transform:rotate(45deg);width:17px;}
body.nav-open .dots span:nth-child(2){opacity:0;width:17px;}
body.nav-open .dots span:nth-child(3){transform:rotate(-45deg);width:17px;}

@media(max-width:900px){ .nav .nav__links{display:none;} .nav .nav__right .nav__cta{display:none;} }
@media(min-width:901px){ .nav .dots{display:none;} }

/* ============================================================
   Vorhang
   ============================================================ */
.drawer{
  position:fixed;inset:0;z-index:290;display:flex;align-items:flex-start;
  background:rgba(10,3,14,.82);
  -webkit-backdrop-filter:blur(30px) saturate(130%);backdrop-filter:blur(30px) saturate(130%);
  opacity:0;visibility:hidden;
  transition:opacity var(--d-mid) var(--ease-io),visibility 0s linear var(--d-mid);
}
.drawer.is-open{opacity:1;visibility:visible;transition-delay:0s;}
.drawer__inner{
  width:100%;max-width:var(--shell);margin:0 auto;
  padding:calc(var(--nav-h) + 40px) var(--gutter) 48px;
  display:flex;flex-direction:column;gap:4px;
}
.drawer__link{
  display:flex;align-items:baseline;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--f-display);font-size:clamp(26px,6vw,50px);letter-spacing:.035em;
  text-transform:uppercase;color:#fff;line-height:1.08;
  opacity:0;transform:translateY(18px);
  transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease),color var(--d-fast) var(--ease);
  transition-delay:calc(var(--i,0) * 55ms);
}
.drawer.is-open .drawer__link{opacity:1;transform:none;}
.drawer__link .num{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--violet);}
.drawer__link:hover{color:var(--violet);}
.drawer__foot{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:18px;
  font-family:var(--f-ui);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);
  opacity:0;transition:opacity var(--d-slow) var(--ease) 260ms;
}
.drawer.is-open .drawer__foot{opacity:1;}
.drawer__foot a:hover{color:#fff;}

/* ============================================================
   Buttons, Liquid Glass aus dem Shop
   ============================================================ */
.btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--f-ui);font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  padding:16px 32px;border-radius:var(--pill);border:0;
  color:#fff;background:rgba(20,6,23,.35);
  overflow:hidden;cursor:pointer;
  transition:color 420ms var(--ease),transform 420ms var(--ease),background 420ms var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:
    inset 3px 3px .5px -3.5px rgba(255,255,255,.92),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.62),
    inset -1px -1px 1px -.5px rgba(255,255,255,.62),
    inset 0 0 6px 6px rgba(255,255,255,.12),
    inset 0 0 2px 2px rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.20),
    0 0 12px rgba(0,0,0,.14);
  transition:box-shadow 420ms var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:-1px;z-index:-2;background:#fff;
  transform:translateY(101%);transition:transform 560ms var(--ease);
}
.btn:hover,.btn:focus-visible{color:var(--ink);transform:translateY(-2px);background:transparent;}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0);}
.btn:active{transform:translateY(0) scale(.99);}
.btn__arrow{display:inline-block;transition:transform 420ms var(--ease);}
.btn:hover .btn__arrow{transform:translateX(5px);}

.btn--solid{color:var(--ink);}
.btn--solid::before{transform:translateY(0);}
.btn--solid:hover,.btn--solid:focus-visible{color:#fff;}
.btn--solid:hover::before,.btn--solid:focus-visible::before{transform:translateY(-101%);}

.btn--sm{font-size:12px;padding:12px 22px;letter-spacing:.14em;gap:8px;}
.btn--wide{padding-inline:40px;}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin:0 var(--gutter);
  border-radius:var(--card-r);
  padding:calc(var(--nav-h) + 40px) clamp(20px,5vw,60px) 76px;
  min-height:min(92vh,880px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.hero__media{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  background:
    radial-gradient(ellipse 62% 52% at 50% 26%,rgba(var(--glow),.17),transparent 66%),
    linear-gradient(168deg,#2b0f32 0%,#1b0921 48%,#0c0310 100%);
}
.hero__media--port{display:none;}
@media (orientation:portrait){
  .hero__media--land.has-pair{display:none;}
  .hero__media--port{display:block;}
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  box-shadow:inset 0 0 140px 40px rgba(10,3,14,.70);
  background:
    radial-gradient(ellipse 66% 62% at 50% 50%,rgba(10,3,14,.30),transparent 74%),
    linear-gradient(180deg,rgba(10,3,14,.22) 0%,rgba(10,3,14,.10) 38%,rgba(10,3,14,.46) 100%);
}

.hero__claim{
  display:block;margin:0 auto 6px;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(26px,4.4vw,62px);line-height:1;letter-spacing:.06em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.7);
  paint-order:stroke fill;
  filter:drop-shadow(0 2px 18px rgba(10,3,14,.85));
  transition:-webkit-text-stroke-color 600ms var(--ease);
}
.hero:hover .hero__claim{-webkit-text-stroke-color:rgba(255,255,255,.92);}
@supports not (-webkit-text-stroke:1px #fff){ .hero__claim{color:rgba(255,255,255,.32);} }

.hero h1{
  margin-top:6px;
  font-size:clamp(32px,5.4vw,74px);letter-spacing:.045em;max-width:14ch;
  text-shadow:0 2px 40px rgba(10,3,14,.6);
}
.hero__sub{
  margin-top:22px;max-width:50ch;font-size:clamp(17px,2vw,20px);line-height:1.6;
  color:rgba(255,255,255,.94);text-shadow:0 2px 20px rgba(10,3,14,.8);
}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px;}

.hero__scroll{
  position:absolute;bottom:30px;left:50%;margin-left:-1px;z-index:2;
  width:1px;height:56px;background:rgba(255,255,255,.16);overflow:hidden;
}
.hero__scroll span{
  position:absolute;left:0;top:0;width:1px;height:20px;background:rgba(255,255,255,.85);
  animation:nlyp-cue 2.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes nlyp-cue{0%{transform:translateY(-22px);}100%{transform:translateY(58px);}}

@media(max-width:700px){
  .hero{padding-bottom:64px;}
  .hero__claim{font-size:clamp(20px,7vw,34px);letter-spacing:.04em;}
  .hero__scroll{height:44px;bottom:22px;}
}

/* ============================================================
   Abschnitte
   ============================================================ */
.sec{max-width:var(--shell);margin:clamp(84px,11vw,132px) auto 0;padding-inline:var(--gutter);scroll-margin-top:90px;}
.sec-head{max-width:56ch;}
.sec-head h2{margin-top:12px;font-size:clamp(27px,3.9vw,54px);letter-spacing:.07em;}
.sec-head p{margin-top:18px;max-width:52ch;font-size:clamp(17px,1.9vw,19px);color:var(--text);}

/* Haltungspunkte */
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:42px;}
@media(max-width:900px){.promises{grid-template-columns:1fr;}}
.pr{
  border-radius:16px;border:1px solid var(--line-soft);
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  padding:26px 24px;
  transition:transform var(--d-mid) var(--ease),border-color var(--d-mid) var(--ease);
}
.pr:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18);}
.pr h3{font-family:var(--f-ui);font-weight:600;font-size:18px;letter-spacing:.06em;}
.pr p{margin-top:10px;font-size:17px;line-height:1.6;color:var(--text-soft);}

/* Intro-Doppelspalte */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:8px;}
@media(max-width:900px){.split{grid-template-columns:1fr;}}
.split__body p{font-size:clamp(17px,1.9vw,19px);line-height:1.7;}
.split__body p + p{margin-top:18px;}

/* ============================================================
   Protocol-Karten, drehbar
   Vorn das Etikett mit einer Zeile, hinten der Erklaertext.
   Beim Tippen dreht die Karte um ihre senkrechte Achse.
   ============================================================ */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px;}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr;gap:14px;}}

.pcard{perspective:1400px;}
.pcard__flip{
  display:block;width:100%;padding:0;margin:0;border:0;background:none;
  color:inherit;text-align:left;font:inherit;cursor:pointer;
  border-radius:var(--card-r);
}
.pcard__flip:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:4px;}

.pcard__inner{
  position:relative;display:block;width:100%;aspect-ratio:5/6;
  transform-style:preserve-3d;
  transition:transform 900ms var(--ease);
}
.pcard.is-flipped .pcard__inner{transform:rotateY(180deg);}

.pcard__face{
  position:absolute;inset:0;display:block;overflow:hidden;
  border-radius:var(--card-r);border:1px solid var(--line-soft);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:border-color var(--d-mid) var(--ease),box-shadow var(--d-mid) var(--ease);
}
.pcard__flip:hover .pcard__face{border-color:rgba(255,255,255,.2);box-shadow:0 34px 64px -34px rgba(0,0,0,.9);}

/* --- Vorderseite: nur das Etikett ---------------------------- */
.pcard__face--front{background:#000;}
.pcard__face--front img{
  width:100%;height:100%;object-fit:cover;display:block;opacity:.96;
  transition:transform 900ms var(--ease),opacity var(--d-mid) var(--ease);
}
.pcard__flip:hover .pcard__face--front img{transform:scale(1.035);opacity:1;}
.pcard__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px;
  padding:46px 20px 20px;
  background:linear-gradient(180deg,transparent,rgba(8,2,11,.72) 42%,rgba(8,2,11,.94));
}
.pcard__label{
  grid-column:1;display:block;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--violet);
}
.pcard__title{
  grid-column:1;display:block;margin-top:6px;
  font-family:var(--f-ui);font-weight:600;font-size:19px;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;line-height:1.2;
}
.pcard__more{
  grid-column:2;grid-row:1 / span 2;align-self:center;position:relative;
  width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color var(--d-fast) var(--ease),transform var(--d-mid) var(--ease);
}
.pcard__more::before,.pcard__more::after{
  content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%);
}
.pcard__more::before{width:11px;height:1px;}
.pcard__more::after{width:1px;height:11px;}
.pcard__flip:hover .pcard__more{border-color:var(--violet);transform:rotate(90deg);}

/* --- Rueckseite: nur Text ------------------------------------ */
.pcard__face--back{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;
  padding:clamp(22px,2.4vw,30px);
  background:
    radial-gradient(ellipse 90% 46% at 50% 0%,rgba(var(--glow),.30),transparent 70%),
    linear-gradient(165deg,#230d29 0%,#140617 100%);
  border-color:rgba(var(--glow),.55);
}
.pcard.is-flipped .pcard__face--back{box-shadow:0 34px 60px -30px rgba(0,0,0,.9);}
.pcard__claim{
  display:block;margin-top:14px;
  font-family:var(--f-display);font-size:clamp(21px,2.2vw,27px);letter-spacing:.05em;
  text-transform:uppercase;color:#fff;line-height:1.1;
}
.pcard__text{
  display:block;margin-top:14px;font-size:16.5px;line-height:1.58;color:var(--text);
}
.pcard__note{
  display:block;margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:12.5px;line-height:1.5;letter-spacing:.05em;color:var(--text-soft);
}
.pcard__return{
  display:block;margin-top:14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--violet);
}
.pcard__return::after{content:" \21BA";}

@media(max-width:560px){
  .pcard__text{font-size:17px;}
  .pcard__inner{aspect-ratio:4/5;}
}
@media (prefers-reduced-motion: reduce){
  .pcard__inner{transition:none;}
}

/* ============================================================
   App-Streifen
   ============================================================ */
.app{
  margin-top:56px;padding:clamp(28px,4vw,54px) clamp(22px,3.4vw,48px);
  border-radius:24px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.026);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;
}
@media(max-width:760px){.app{grid-template-columns:1fr;}}
.app h3{margin-top:12px;font-size:clamp(22px,2.8vw,34px);letter-spacing:.06em;}
.app p{margin-top:12px;max-width:46ch;font-size:17px;color:var(--text-soft);}
.app__mark{
  font-family:var(--f-display);font-size:clamp(54px,8vw,104px);line-height:.9;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);letter-spacing:.04em;
  justify-self:end;
}
@media(max-width:760px){.app__mark{justify-self:start;}}

/* ============================================================
   Abschluss
   ============================================================ */
.closing{
  margin-top:clamp(84px,11vw,132px);
  text-align:center;padding-inline:var(--gutter);
}
.closing h2{font-size:clamp(24px,3.4vw,40px);letter-spacing:.06em;max-width:20ch;margin:14px auto 0;line-height:1.2;}
.closing p{margin:16px auto 0;max-width:46ch;color:var(--text-dim);}
.closing .btn{margin-top:30px;}

/* ============================================================
   Fußzeile
   ============================================================ */
.site-footer{
  margin-top:clamp(90px,12vw,140px);
  background:var(--bg-panel);border-top:1px solid var(--line);
  padding:clamp(46px,6vw,78px) 0 40px;
}
.foot{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter);}
.foot__wordmark{
  font-family:var(--f-display);font-size:clamp(34px,8.5vw,104px);line-height:.92;letter-spacing:.03em;max-width:14ch;
  color:rgba(255,255,255,.07);text-transform:uppercase;user-select:none;
}
.foot__cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
  margin-top:30px;padding-top:30px;border-top:1px solid var(--line-soft);
}
@media(max-width:760px){.foot__cols{grid-template-columns:1fr;gap:24px;}}
.foot__col .eyebrow{display:block;margin-bottom:12px;}
.foot__col a,.foot__col span{display:block;font-size:16.5px;color:var(--text-soft);line-height:1.95;}
.foot__col a{transition:color var(--d-fast) var(--ease);}
.foot__col a:hover{color:#fff;}
.foot__legal{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
  font-family:var(--f-mono);font-size:12.5px;line-height:1.7;letter-spacing:.08em;color:var(--text-soft);
}
.foot__legal a:hover{color:#fff;}

/* ============================================================
   Einblenden
   ============================================================ */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1;transform:none;}
html:not(.js) .reveal{opacity:1 !important;transform:none !important;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  .hero__scroll span{animation:none;top:18px;}
}

/* ============================================================
   Rechtsseiten
   ============================================================ */
.legal{max-width:860px;margin:0 auto;padding:calc(var(--nav-h) + 60px) var(--gutter) 0;}
.legal h1{font-size:clamp(30px,5vw,60px);letter-spacing:.05em;margin-top:12px;}
.legal__intro{margin-top:20px;max-width:60ch;color:var(--text);}
.legal h2{margin-top:44px;font-size:clamp(19px,2.2vw,26px);letter-spacing:.07em;}
.legal h3{margin-top:28px;font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.14em;color:#fff;}
.legal p{margin-top:16px;max-width:66ch;font-size:17.5px;line-height:1.7;}
.legal ul{margin:14px 0 0;padding-left:20px;max-width:68ch;}
.legal li{margin-bottom:10px;font-size:17.5px;line-height:1.6;}
.legal .meta{
  margin-top:28px;padding:18px 22px;border-radius:16px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.026);font-family:var(--f-mono);font-size:12.5px;line-height:2;letter-spacing:.04em;
}
.legal .back{display:inline-block;margin-top:48px;}

/* ============================================================
   ERWEITERUNG, Fassung 2
   Laufschrift, Themenkacheln, Standard-Sequenz, Häufige Fragen,
   Zeilenweises Aufsteigen der Überschriften, Lesefortschritt
   ============================================================ */

/* --- Lesefortschritt ---------------------------------------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:500;
  background:linear-gradient(90deg,rgba(var(--glow),.9),rgba(255,255,255,.7));
  transform:scaleX(0);transform-origin:left;
  will-change:transform;
}

/* --- Überschriften zeilenweise aufsteigen -------------------- */
.rise{display:block;overflow:hidden;}
.rise > span{
  display:block;
  transform:translateY(105%);
  transition:transform 900ms var(--ease);
  transition-delay:var(--d,0ms);
}
.is-in .rise > span,.rise.is-in > span{transform:none;}
html:not(.js) .rise > span{transform:none;}

/* --- Laufschrift --------------------------------------------- */
.marquee{
  margin-top:clamp(40px,6vw,72px);
  padding:18px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;width:max-content;gap:0;
  animation:nlyp-marquee 46s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__item{
  display:flex;align-items:center;gap:34px;padding-right:34px;
  font-family:var(--f-display);font-size:clamp(18px,2.2vw,28px);
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.34);
  white-space:nowrap;
}
.marquee__item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--violet);flex:0 0 auto;}
@keyframes nlyp-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .marquee__track{animation:none;} }

/* --- Themenkacheln ------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:44px;}
@media(max-width:980px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.tgrid{grid-template-columns:1fr;}}
.tile{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:14px;border:1px solid var(--line-soft);
  background:linear-gradient(165deg,#230d29 0%,#140617 100%);
  min-height:186px;padding:24px 24px 22px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  transition:transform var(--d-mid) var(--ease),border-color var(--d-mid) var(--ease);
}
.tile::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(var(--glow),.24),transparent 70%);
  transition:opacity var(--d-mid) var(--ease);
}
.tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18);}
.tile:hover::before{opacity:1;}
.tile__n{
  position:absolute;top:18px;right:20px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;color:var(--text-dim);
}
.tile__label{font-family:var(--f-ui);font-weight:600;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:#fff;}
.tile__desc{font-size:17px;color:var(--text-soft);max-width:30ch;}

/* --- Standard als Sequenz ------------------------------------ */
.steps{margin-top:44px;border-top:1px solid var(--line-soft);}
.step{
  display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(16px,3vw,44px);align-items:start;
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line-soft);
  transition:background var(--d-mid) var(--ease);
}
.step:hover{background:rgba(255,255,255,.018);}
@media(max-width:820px){
  .step{grid-template-columns:56px minmax(0,1fr);}
  .step__text{grid-column:2;}
}
.step__n{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--violet);padding-top:6px;
}
.step__t{font-family:var(--f-display);font-size:clamp(20px,2.4vw,30px);letter-spacing:.05em;color:#fff;text-transform:uppercase;line-height:1.1;}
.step__text{color:var(--text-soft);font-size:17px;line-height:1.62;}

/* --- Häufige Fragen ------------------------------------------ */
.faq{margin-top:44px;display:flex;flex-direction:column;gap:10px;}
.faq__row{
  border:1px solid var(--line-soft);border-radius:var(--pill);
  background:rgba(255,255,255,.022);
  transition:border-radius var(--d-mid) var(--ease),border-color var(--d-mid) var(--ease),background var(--d-mid) var(--ease);
  overflow:hidden;
}
.faq__row:hover{border-color:rgba(255,255,255,.16);}
.faq__row.is-open{border-radius:var(--card-r);background:rgba(255,255,255,.032);border-color:rgba(255,255,255,.14);}
.faq__q{
  width:100%;display:flex;align-items:center;gap:18px;
  padding:20px clamp(20px,3vw,30px);
  background:none;border:0;cursor:pointer;text-align:left;color:#fff;
  font-family:var(--f-ui);font-weight:500;font-size:clamp(15px,1.8vw,18px);
  letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
}
.faq__q > span:first-of-type{flex:1 1 auto;min-width:0;}
.faq__q .faq__icon{flex:0 0 22px;}
.faq__icon{
  position:relative;flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line-strong);
  transition:transform var(--d-mid) var(--ease),border-color var(--d-mid) var(--ease);
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;left:50%;top:50%;background:#fff;
  transform:translate(-50%,-50%);transition:opacity var(--d-fast) var(--ease);
}
.faq__icon::before{width:9px;height:1px;}
.faq__icon::after{width:1px;height:9px;}
.faq__row.is-open .faq__icon{transform:rotate(180deg);border-color:var(--line-strong);}
.faq__row.is-open .faq__icon::after{opacity:0;}
.faq__row.is-open .faq__icon{border-color:var(--violet);}
.faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-mid) var(--ease);
}
.faq__row.is-open .faq__a{grid-template-rows:1fr;}
.faq__a > div{overflow:hidden;}
.faq__a p{
  padding:0 clamp(20px,3vw,30px) 24px;max-width:66ch;color:var(--text);font-size:17.5px;line-height:1.62;
}
.faq__a p + p{padding-top:12px;}

/* --- Zitatzeile ---------------------------------------------- */
.pull{
  margin-top:clamp(56px,8vw,96px);padding:clamp(30px,4vw,56px) 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  text-align:center;
}
.pull p{
  font-family:var(--f-display);font-size:clamp(22px,3.4vw,46px);letter-spacing:.05em;
  text-transform:uppercase;color:#fff;line-height:1.15;max-width:22ch;margin:0 auto;
}
.pull span{
  display:block;margin-top:16px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);
}

/* --- Hero: Video kommt sanft an ------------------------------ */
.hero__media{animation:nlyp-hero-in 1800ms var(--ease) both;}
@keyframes nlyp-hero-in{from{transform:scale(1.06);opacity:.4;}to{transform:scale(1);opacity:1;}}
@media (prefers-reduced-motion: reduce){ .hero__media{animation:none;} }

/* --- Hinweisfuß unter den Karten ----------------------------- */
.disclaimer{
  margin-top:clamp(40px,6vw,64px);padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:15.5px;line-height:1.6;color:var(--text-soft);max-width:72ch;
}

/* ============================================================
   FASSUNG 3
   Geöffnete Frage wird weiß, Schrift lila (wie im Shop)
   Filmband und Video hinter dem App-Streifen
   ============================================================ */

.faq__row.is-open{
  background:#ffffff;
  border-color:transparent;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.85);
}
.faq__row.is-open .faq__q{color:var(--violet);}
.faq__row.is-open .faq__a p{color:var(--violet-deep);}
.faq__row.is-open .faq__icon{border-color:var(--violet);}
.faq__row.is-open .faq__icon::before,
.faq__row.is-open .faq__icon::after{background:var(--violet);}
.faq__row.is-open .faq__q:focus-visible{outline-color:var(--violet);}

/* --- Filmband ------------------------------------------------ */
.film{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:clamp(56px,8vw,104px);
  border-radius:var(--card-r);
  min-height:clamp(320px,46vw,560px);
  display:flex;align-items:flex-end;
  padding:clamp(24px,4vw,52px);
  border:1px solid var(--line-soft);
  background:linear-gradient(168deg,#2b0f32 0%,#1b0921 48%,#0c0310 100%);
}
.film__media{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.82;
}
/* Der Zuschnitt kommt jetzt aus dem picture-Element im Markup. */
.film::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 70% 20%,rgba(var(--glow),.22),transparent 70%),
    linear-gradient(180deg,rgba(10,3,14,.25) 0%,rgba(10,3,14,.55) 55%,rgba(10,3,14,.92) 100%);
}
.film__body{max-width:46ch;}
.film__body h2{margin-top:12px;font-size:clamp(24px,3.4vw,46px);letter-spacing:.06em;}
.film__body p{margin-top:14px;color:rgba(255,255,255,.82);}

/* --- App-Streifen bekommt Bewegung --------------------------- */
.app{position:relative;overflow:hidden;isolation:isolate;}
.app__media{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.38;
}
.app::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(20,6,23,.94) 0%,rgba(20,6,23,.78) 48%,rgba(20,6,23,.55) 100%);
}

/* ============================================================
   FASSUNG 5
   Hinweisblock, Bewegung im Einstieg, Wiedererkennung mit Film
   ============================================================ */

/* --- Hinweisblock unter den Karten --------------------------- */
.pnote{
  margin-top:30px;padding:24px 26px;border-radius:18px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.028);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  max-width:76ch;
}
.pnote .eyebrow{color:var(--violet);}
.pnote p{margin-top:12px;font-size:17px;line-height:1.65;color:var(--text);}

/* ============================================================
   Einstieg: Choreografie beim Laden
   Vier Elemente treten nacheinander auf, keine Scrollabhaengigkeit,
   damit der erste Bildschirm sofort lebt.
   ============================================================ */
@keyframes nlyp-up{
  from{opacity:0;transform:translateY(28px);}
  to{opacity:1;transform:none;}
}
@keyframes nlyp-claim-in{
  from{opacity:0;letter-spacing:.22em;}
  to{opacity:1;letter-spacing:.06em;}
}
/* Langsame Kamerafahrt auf dem Hintergrundvideo */
@keyframes nlyp-drift{
  from{transform:scale(1.02);}
  to{transform:scale(1.11);}
}

.js .hero__claim{animation:nlyp-claim-in 1400ms var(--ease) both 200ms;}
.js .hero h1{animation:nlyp-up 1000ms var(--ease) both 420ms;}
.js .hero__sub{animation:nlyp-up 1000ms var(--ease) both 620ms;}
.js .hero__btns{animation:nlyp-up 1000ms var(--ease) both 800ms;}
.js .hero__scroll{animation:nlyp-up 900ms var(--ease) both 1100ms;}
.js .hero__media{animation:nlyp-hero-in 1800ms var(--ease) both,
                           nlyp-drift 26s ease-in-out 1800ms infinite alternate;}
.js .film__media{animation:nlyp-drift 34s ease-in-out infinite alternate;}

@media (prefers-reduced-motion: reduce){
  .js .hero__claim,.js .hero h1,.js .hero__sub,.js .hero__btns,
  .js .hero__scroll,.js .hero__media,.js .film__media{animation:none;opacity:1;transform:none;}
}

/* ============================================================
   Wiedererkennung mit Filmstreifen
   ============================================================ */
.recog{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,3.4vw,48px);align-items:center;
}
@media(max-width:900px){ .recog{grid-template-columns:1fr;} }

.recog__body{min-width:0;}
.recog__list{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-direction:column;gap:15px;
}
.recog__list li{
  position:relative;padding-left:28px;font-size:18px;line-height:1.55;color:var(--text);
  opacity:0;transform:translateX(-14px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
  transition-delay:calc(var(--i,0) * 90ms + 120ms);
}
.recog.is-in .recog__list li{opacity:1;transform:none;}
html:not(.js) .recog__list li{opacity:1;transform:none;}
.recog__list li::before{
  content:"";position:absolute;left:0;top:.72em;width:0;height:1px;background:var(--violet);
  transition:width 700ms var(--ease);
  transition-delay:calc(var(--i,0) * 90ms + 260ms);
}
.recog.is-in .recog__list li::before{width:16px;}

.recog__punch{
  margin-top:clamp(24px,3vw,36px);padding-top:24px;border-top:1px solid var(--line-soft);
  font-family:var(--f-display);font-size:clamp(21px,2.6vw,34px);letter-spacing:.05em;
  text-transform:uppercase;color:#fff;line-height:1.14;max-width:24ch;
}

/* Der Filmstreifen daneben */
.recog__film{
  position:relative;overflow:hidden;border-radius:18px;
  aspect-ratio:3/4;border:1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 62% 70% at 30% 24%,rgba(var(--glow),.26),transparent 68%),
    linear-gradient(158deg,#2a1230 0%,#1a0a20 54%,#100513 100%);
  box-shadow:0 40px 80px -44px rgba(0,0,0,.95);
}
@media(max-width:900px){ .recog__film{aspect-ratio:16/10;} }
.recog__film video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;
  animation:nlyp-drift 30s ease-in-out infinite alternate;
}
.recog__film::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,3,14,.12) 0%,rgba(10,3,14,.42) 62%,rgba(10,3,14,.86) 100%);
}
.recog__film-cap{
  position:absolute;left:20px;right:20px;bottom:18px;z-index:2;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
@media (prefers-reduced-motion: reduce){ .recog__film video{animation:none;} }

/* --- Versprechen bekommen Nummern ---------------------------- */
.pr{position:relative;}
.pr__n{
  display:block;margin-bottom:12px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;color:var(--violet);
}

/* ============================================================
   FASSUNG 6
   Weniger Lila in der Flaeche, dafuer zwei helle Bausteine.
   Der Bordo-Ton bleibt Akzent, hoert aber auf, ueberall zu leuchten.
   ============================================================ */

/* --- Grundflaeche ruhiger ------------------------------------ */
body::before{
  background:
    radial-gradient(ellipse 96% 62% at 4% -16%,rgba(var(--glow),.14),transparent 62%),
    radial-gradient(ellipse 72% 50% at 98% 2%,rgba(var(--glow),.06),transparent 60%),
    radial-gradient(ellipse 130% 62% at 50% 116%,rgba(8,4,10,.9),transparent 58%),
    linear-gradient(180deg,#160a1a 0%,#120611 46%,#0b0410 100%);
}

/* --- App-Streifen: Schleier raus, Video entfaerbt ------------ */
.app{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.app__media{opacity:.3;filter:grayscale(1) contrast(1.05);}
.app::after{
  background:linear-gradient(100deg,rgba(9,6,11,.95) 0%,rgba(9,6,11,.78) 52%,rgba(9,6,11,.55) 100%);
}
.app__mark{-webkit-text-stroke-color:rgba(255,255,255,.16);}

/* --- Kartenglut zuruecknehmen -------------------------------- */
.pcard__face--back{
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%,rgba(var(--glow),.16),transparent 72%),
    linear-gradient(165deg,#1f0d24 0%,#130614 100%);
  border-color:rgba(var(--glow),.38);
}
.film::after{
  background:
    radial-gradient(ellipse 70% 60% at 70% 20%,rgba(var(--glow),.12),transparent 72%),
    linear-gradient(180deg,rgba(9,4,11,.28) 0%,rgba(9,4,11,.58) 55%,rgba(9,4,11,.93) 100%);
}
.recog__film{
  background:
    radial-gradient(ellipse 62% 70% at 30% 24%,rgba(var(--glow),.14),transparent 70%),
    linear-gradient(158deg,#23101f 0%,#170a1a 54%,#0e0512 100%);
}

/* ============================================================
   Helle Bausteine
   Farben aus dem hellen Fussbereich des Shops: #f5f1f4 auf #2b0f32.
   ============================================================ */
.panel--light{
  --line-soft:rgba(43,15,50,.12);
  background:#f4f0f3;
  color:#43214a;
  border-radius:28px;
  padding:clamp(32px,5vw,72px) clamp(22px,4vw,60px);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9);
}
.panel--light h2,.panel--light h3,.panel--light h4{color:#2b0f32;}
.panel--light .eyebrow{color:#8e3a76;}
.panel--light .sec-head p{color:#4a2a50;}
.panel--light .steps{border-top:1px solid rgba(43,15,50,.16);}
.panel--light .step{border-bottom:1px solid rgba(43,15,50,.12);}
.panel--light .step:hover{background:rgba(43,15,50,.035);}
.panel--light .step__n{color:#8e3a76;}
.panel--light .step__t{color:#2b0f32;}
.panel--light .step__text{color:#4a2a50;}
.panel--light .closing__text{color:#4a2a50;}

/* Abschluss als heller Baustein */
.closing--light{
  max-width:var(--shell);margin-inline:auto;
  text-align:center;
}
.closing--light h2{max-width:22ch;margin-inline:auto;}
.closing--light p{margin-inline:auto;color:#4a2a50;}

/* Knopf auf hellem Grund: dunkel statt Glas */
.nlyp-luxe .btn--ink,.btn--ink{
  color:#fff;background:#2b0f32;
}
.btn--ink::after{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.btn--ink::before{background:var(--violet);transform:translateY(101%);}
.btn--ink:hover,.btn--ink:focus-visible{color:#fff;}
.btn--ink:hover::before,.btn--ink:focus-visible::before{transform:translateY(0);}
.btn--ink:focus-visible{outline-color:#2b0f32;}

/* --- Kopfzeile ueber hellen Bausteinen ------------------------
   Sobald ein heller Baustein unter die Pille laeuft, dreht die
   Kopfzeile ihre Farben um. Sonst stuenden weisse Schrift und
   weisses Logo auf weissem Grund. */
.site-header.on-light .nav{
  background:linear-gradient(180deg,rgba(43,15,50,.10),rgba(43,15,50,.04));
  border-color:rgba(43,15,50,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 22px 44px -28px rgba(43,15,50,.5);
}
.site-header.on-light .nav__logo img{filter:invert(1) brightness(.28);}
.site-header.on-light .nl{color:rgba(43,15,50,.86);text-shadow:none;}
.site-header.on-light .nl:hover,.site-header.on-light .nl.is-active{color:#2b0f32;}
.site-header.on-light .nl::after{background:#2b0f32;}
.site-header.on-light .dots span{background:#2b0f32;}
.site-header.on-light .nav__cta{color:#fff;background:#2b0f32;}
.site-header.on-light .nav__cta::after{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.site-header.on-light .nav__cta::before{background:var(--violet);}
.site-header.on-light .nav__cta:hover{color:#fff;}

/* --- Filmband: Bild statt Video, ohne Bordo-Schleier ---------
   Ueber dem Foto liegt nur noch eine neutrale Abdunklung nach unten,
   damit die Schrift steht. Kein Farbstich, kein Lila. */
.film{background:#0b0410;}
.film::after{
  background:linear-gradient(180deg,rgba(6,4,8,.12) 0%,rgba(6,4,8,.52) 52%,rgba(6,4,8,.92) 100%);
}
.film__media{opacity:.92;}
.js .film__media{animation:nlyp-drift 40s ease-in-out infinite alternate;}
@media (prefers-reduced-motion: reduce){ .js .film__media{animation:none;} }

/* ============================================================
   FASSUNG 7
   App-Streifen und Filmstreifen zeigen ihr Video wieder,
   Wiedererkennungsblock sauber in zwei gleich hohe Spalten,
   Pflichthinweis steht in der Fusszeile statt mitten im Text.
   ============================================================ */

/* --- App-Streifen: Video sichtbar, Abdunklung nur links ------ */
.app__media{opacity:.72;filter:grayscale(1) contrast(1.04);}
.app::after{
  background:linear-gradient(100deg,
    rgba(9,6,11,.92) 0%,
    rgba(9,6,11,.74) 30%,
    rgba(9,6,11,.34) 62%,
    rgba(9,6,11,.12) 100%);
}
@media(max-width:760px){
  .app::after{
    background:linear-gradient(180deg,rgba(9,6,11,.88) 0%,rgba(9,6,11,.66) 58%,rgba(9,6,11,.3) 100%);
  }
}

/* --- Wiedererkennung: zwei Spalten gleicher Hoehe ------------ */
.recog{
  align-items:stretch;
  padding:clamp(26px,3.4vw,44px);
}
.recog__body{display:flex;flex-direction:column;}
.recog__punch{margin-top:auto;}

.recog__film{
  aspect-ratio:auto;height:100%;min-height:clamp(380px,44vw,560px);
  overflow:hidden;
}
@media(max-width:900px){
  .recog__film{min-height:300px;height:auto;aspect-ratio:16/10;}
}
/* Kein Schleier ueber dem Video. Die Bildunterschrift traegt ihren
   eigenen Schatten, damit sie auch auf hellen Stellen steht. */
.recog__film::after{display:none;}
.recog__film video{opacity:1;}
.recog__film-cap{
  text-shadow:0 2px 14px rgba(6,3,8,.95),0 0 30px rgba(6,3,8,.8);
  color:rgba(255,255,255,.9);
}

/* --- Pflichthinweis in der Fusszeile ------------------------- */
.site-footer .disclaimer{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line-soft);
  font-size:14.5px;line-height:1.6;color:var(--text-dim);max-width:78ch;
}
.site-footer .foot__legal{margin-top:20px;}
/* figure bringt im Browser eigene Aussenabstaende mit. */
.recog__film{margin:0;}

/* ============================================================
   FASSUNG 8, Feinschliff fuers Telefon
   ============================================================ */
@media(max-width:760px){

  /* Die vier Zusagen: Nummer ueber den Titel, Text ueber die volle
     Breite. Vorher stand beides in einer schmalen zweiten Spalte. */
  .step{
    grid-template-columns:1fr;
    gap:6px;
    padding:24px 0;
  }
  .step__n{padding-top:0;}
  .step__t{margin-top:2px;}
  .step__text{grid-column:1;margin-top:8px;}

  /* Die grosse Wortmarke im App-Streifen bringt am Telefon nichts und
     drueckt den Kasten unnoetig in die Laenge. */
  .app__mark{display:none;}
  .app{padding:28px 24px;}
  .app p{max-width:none;}

  /* Kopfbereich: etwas mehr Luft unter den Schaltflaechen, damit der
     Scrollstrich nicht an ihnen klebt. */
  .hero__btns{gap:12px;width:100%;max-width:320px;}
  .hero__btns .btn{width:100%;}

  /* Laufschrift einen Tick kleiner, sonst rauscht sie zu hektisch. */
  .marquee__item{font-size:17px;gap:26px;padding-right:26px;}
  .marquee__track{animation-duration:34s;}

  /* Fusszeile: Wortmarke nicht ueber zwei Zeilen brechen lassen. */
  .foot__wordmark{font-size:clamp(30px,11vw,54px);max-width:none;}
}

/* Sehr schmale Geraete */
@media(max-width:380px){
  .pcard__title{font-size:17px;letter-spacing:.06em;}
  .recog__list li{font-size:17px;}
}

/* ============================================================
   FASSUNG 9, Telefon: Lesbarkeit der Kopfzeile, Bildbaender,
   Zitat und Rueckmeldung beim Tippen
   ============================================================ */

@media(max-width:760px){

  /* Die Kopfzeile schwebt am Telefon direkt ueber grossem Fliesstext.
     Mit der zarten Glasfuellung vom Schreibtisch lief der Text sichtbar
     durch Logo und Menuezeichen. Hier deckt sie staerker. */
  .site-header.is-scrolled .nav{
    background:linear-gradient(180deg,rgba(20,6,24,.94),rgba(14,4,18,.88));
    -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
    border-color:rgba(255,255,255,.16);
  }
  .site-header.on-light.is-scrolled .nav{
    background:linear-gradient(180deg,rgba(249,246,248,.92),rgba(243,238,242,.86));
    border-color:rgba(43,15,50,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 36px -24px rgba(43,15,50,.45);
  }

  /* Das Bildband Haltung war am Telefon nur ein schmaler Streifen,
     vom Foto blieb kaum etwas uebrig. Jetzt hat es Hochformat. */
  .film{
    min-height:clamp(420px,62vh,560px);
    padding:clamp(24px,6vw,40px) clamp(20px,5vw,36px);
  }
  .film__body h2{font-size:clamp(27px,7.6vw,36px);line-height:1.1;}
  .film__body p{font-size:17px;}

  /* Das Zitat zwischen den Abschnitten darf laut sein. */
  .pull p{font-size:clamp(24px,7.4vw,34px);line-height:1.18;}
  .pull span{font-size:12px;letter-spacing:.2em;}

  /* Die gesperrten Kleinschriften brachen sonst auf zwei duenne
     Zeilen, etwa "Die NLYP App, in Entwicklung". */
  .eyebrow{letter-spacing:.18em;}

  /* Kuerzerer Weg beim Einblenden, damit nichts nachhinkt, wenn am
     Telefon schneller gescrollt wird als am Schreibtisch. */
  .reveal{transform:translateY(16px);}
}

/* --- Rueckmeldung beim Tippen -------------------------------- */
/* Auf dem Telefon gibt es kein Hover. Ohne kurze Reaktion beim
   Antippen wirkt die Seite tot, bevor die Animation einsetzt. */
@media (hover:none){
  .pcard__flip,.faq__q,.btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
  .pcard__flip:active .pcard__inner{transform:scale(.985);}
  .pcard.is-flipped .pcard__flip:active .pcard__inner{transform:rotateY(180deg) scale(.985);}
  .btn:active{transform:scale(.97);}
  .faq__q:active{background:rgba(255,255,255,.05);}
  .faq__q{transition:background 180ms var(--ease);}
}

@media (prefers-reduced-motion: reduce){
  .btn:active,.pcard__flip:active .pcard__inner{transform:none;}
}

/* ============================================================
   FASSUNG 10, Abschnitt "Fuer wen" am Schreibtisch neu geordnet
   Der Wiedererkennungsblock stand ohne Flaeche im Raum: der Text
   war um 44 Pixel eingerueckt, ohne dass etwas diese Einrueckung
   erklaerte, das Video hing als loses Rechteck daneben, und
   zwischen Liste und Schlusssatz klaffte eine Luecke, weil der
   Satz an den unteren Rand der Spalte geschoben wurde.
   Jetzt ist es eine Karte: Text links, Film buendig rechts,
   beide gleich hoch, nichts schwebt.
   ============================================================ */

.recog{
  position:relative;
  margin-top:clamp(44px,5.5vw,76px);
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:0;
  align-items:stretch;
  padding:0;
  overflow:hidden;
  border-radius:var(--card-r);
  border:1px solid var(--line-soft);
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  box-shadow:0 54px 96px -60px rgba(0,0,0,.92);
}

.recog__body{
  padding:clamp(30px,3.2vw,52px);
  justify-content:center;
}

/* Der Schlusssatz gehoert an die Liste, nicht an den unteren
   Kartenrand. Ohne das entstand die Luecke. */
.recog__punch{
  margin-top:clamp(26px,2.6vw,34px);
  max-width:26ch;
}

/* Der Film fuellt seine Haelfte bis an die Kartenkante. */
.recog__film{
  border:0;border-radius:0;box-shadow:none;
  min-height:clamp(420px,30vw,560px);
  height:auto;
}

@media(max-width:900px){
  .recog{grid-template-columns:1fr;}
  .recog__body{padding:clamp(24px,5vw,34px) clamp(22px,5vw,34px) clamp(28px,5vw,36px);}
  .recog__film{min-height:0;aspect-ratio:16/10;}
}

/* --- Schlusssatz der Karte: laut, aber nicht fuenfzeilig ------ */
.recog__punch{
  font-size:clamp(20px,2.1vw,28px);
  max-width:30ch;
  line-height:1.16;
}

/* --- Zweispaltige Textabschnitte am Schreibtisch --------------
   Rechts laufen drei Absaetze, links steht eine Zeile
   Ueberschrift. Stand beides oben buendig, blieb links darunter
   eine grosse leere Flaeche. Die Ueberschrift steht jetzt auf
   halber Hoehe des Textes, dann traegt die Doppelseite. */
@media(min-width:901px){
  .split{align-items:center;}
}

/* ============================================================
   FASSUNG 11, Bilder am Telefon
   Die Etiketten wurden erst beim Heranscrollen geladen, deshalb
   stand bei schnellem Wischen ein schwarzes Feld mit Schrift
   darin. Jetzt liegen sie von Anfang an vor. Und der Kartenrahmen
   hat dasselbe Seitenverhaeltnis wie das Etikett, damit nichts
   mehr beschnitten und aus der Mitte geschoben wird.
   ============================================================ */

.film picture{display:contents;}
.pcard__face--front img{object-position:50% 50%;}

@media(max-width:560px){
  .pcard__inner{aspect-ratio:5/6;}
}