/** Shopify CDN: Minification failed

Line 3173:0 Expected "}" to go with "{"

**/
/* AUTOGENERIERT aus dem Prototyp durch tools/build-theme.js.
   NICHT hier editieren, jede Aenderung geht beim naechsten Build verloren.
   Quelle: nordshave-prototyp/assets/. Fork-Aufloesung C10. */
/* =============================================================================
   00  SCHRIFTEN, selbst gehostet

   Variable woff2, nur Latin, drei Dateien statt neun. Liegen direkt neben
   dieser Datei, damit url('...woff2') im Prototyp und im flachen Shopify-
   Asset-Verzeichnis unveraendert funktioniert. Kein Google-CDN mehr, also
   keine Fremdanfrage und keine IP-Uebertragung.
   ============================================================================= */

@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:600 700;      /* variabel */
  font-display:swap;
  src:url('archivo.woff2') format('woff2');
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 500;      /* variabel */
  font-display:swap;
  src:url('inter.woff2') format('woff2');
}
@font-face{
  font-family:"Newsreader";
  font-style:italic;
  font-weight:400 500;      /* variabel, nur die eine Zitatzeile */
  font-display:swap;
  src:url('newsreader-italic.woff2') format('woff2');
}


/* =============================================================================
   NORDSHAVE, Design- und Motion-System
   Gliederung
     01  Custom Properties
     02  Reset
     03  Filmkorn und Flaechen
     04  Typografie
     05  Layout
     06  Komponenten
     07  Bilder und Platzhalter
     08  Sektionen
     09  Motion
     10  Media Queries
   ============================================================================= */


/* =============================================================================
   01  CUSTOM PROPERTIES
   ============================================================================= */

:root{
  /* Flaechen */
  --ns-void:        #0B0B0B;  /* Footer, Letterbox, tiefste Ebene */
  --ns-base:        #121212;  /* Seitenhintergrund */
  --ns-surface:     #17140F;  /* Sektionswechsel, minimal warm */
  --ns-surface-2:   #1E1A15;  /* Karten, Accordion offen */

  /* Linien: die Seite arbeitet mit Hairlines statt mit Karten */
  --ns-line:        #2A2520;
  --ns-line-strong: #3A342C;

  /* Text */
  --ns-text:        #F2EFE9;  /* warmes Off-White, nie reines #FFF */
  --ns-text-muted:  #9A9188;
  --ns-text-faint:  #6A635A;

  /* Akzent: Messing aus dem Hero-Bild */
  --ns-gold:        #C9A34E;
  --ns-gold-light:  #E7CE93;
  --ns-gold-deep:   #8C6B24;
  --ns-gold-soft:   rgba(201,163,78,0.12);

  /* Materialfarben der drei Varianten */
  --ns-chrome:      #D6D9DC;
  --ns-gunmetal:    #5A5D61;

  /* Licht */
  --ns-glow-warm:   rgba(245,199,126,0.13);
  --ns-vignette:    rgba(0,0,0,0.65);

  /* Typografie */
  --ns-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ns-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --ns-font-serif:   "Newsreader", Georgia, "Times New Roman", serif;

  --fs-display: clamp(3.4rem, 8vw, 8.5rem);
  --fs-h2:      clamp(2.1rem, 4.6vw, 4.2rem);
  --fs-h3:      clamp(1.35rem, 2.2vw, 2rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.6875rem;

  /* Abstands-System. Vertikale Skala, geometrisch, Faktor ca. 1.6.
     Jeder padding/margin/gap-Wert unten referenziert eins dieser Tokens. */
  --sp-3xs: 0.25rem;   /*  4px  Eyebrow-Punkt, Icon-Innenabstand */
  --sp-2xs: 0.5rem;    /*  8px  Zeile zu Zeile in Listen */
  --sp-xs:  0.75rem;   /* 12px  Label zu Wert, Bild zu Bildunterschrift */
  --sp-s:   1.25rem;   /* 20px  Eyebrow zu Headline */
  --sp-m:   2rem;      /* 32px  Headline zu Fliesstext, Absatz zu Absatz */
  --sp-l:   3.5rem;    /* 56px  Textblock zu CTA, Block zu Block */
  --sp-xl:  5.5rem;    /* 88px  Gruppe zu Gruppe innerhalb einer Sektion */

  /* Sektionsrhythmus: Abstand ZWISCHEN zwei Sektionen, nicht Padding einer.
     Etwas enger gezogen (Denny 26.07.2026), war clamp(4.5rem, 11vw, 13rem). */
  --sp-section: clamp(3.5rem, 9vw, 10rem);

  /* Horizontal */
  --sp-gutter: clamp(1.25rem, 5vw, 4rem);   /* Seitenrand */
  --sp-col:    clamp(2.5rem, 5vw, 6rem);    /* Spaltenabstand im 7/5-Raster */

  /* Raster */
  --ns-content:  1360px;

  /* Radien haengen an einer Stellschraube: --r. Alle Stufen leiten sich ab,
     eine Zahl aendert die Rundung der ganzen Seite. Die alte Obergrenze 6px
     ist aufgehoben. Runde Elemente (Swatches, Punkte) bleiben 50%, das ist
     Kreisgeometrie, kein Radius aus dieser Skala. Hairlines, Tabellenzeilen
     und Trennlinien bleiben scharf (kein Radius). Verschachtelt gilt innen
     gleich aussen minus Padding. */
  --r:    4px;                 /* Basis */
  --r-xs: calc(var(--r) * 2);  /*  8px  Chips, Badges, Inputs */
  --r-sm: calc(var(--r) * 3);  /* 12px  Buttons, Tabs, Farbwaehler */
  --r-md: calc(var(--r) * 4);  /* 16px  Karten, Akkordeonzeilen, Panels */
  --r-lg: calc(var(--r) * 5);  /* 20px  Bildcontainer, Galerie, grosse Kacheln */
  --r-xl: calc(var(--r) * 6);  /* 24px  Hero-Medien, Sticky-Bar */

  /* Motion */
  --e-reveal: cubic-bezier(0.16, 1, 0.3, 1);     /* alle Einblendungen */
  --e-glide:  cubic-bezier(0.22, 0.61, 0.36, 1); /* Hover, Micro */
  --e-swap:   cubic-bezier(0.76, 0, 0.24, 1);    /* Wechsel, Accordion */

  --t-micro:  180ms;
  /* Druck ist weder Hover noch Wandern: er haengt am Finger, muss mit dem
     Druck da sein und sofort zurueckspringen. */
  --t-press:  120ms;
  --t-hover:  240ms;
  /* Zwei Dauern, weil es zwei Gesten sind. --t-hover ist Rueckmeldung unter
     dem Zeiger: Farbe, Rahmen, Deckkraft. Die wird staendig neu ausgeloest und
     mitten in der Bewegung umgekehrt, sie muss kurz sein. --t-move gehoert
     Dingen, die nach einem Klick eine Strecke zuruecklegen und dabei nicht
     umgekehrt werden: der Goldring zwischen den Swatches (bis 113px), das Plus
     im Accordion, der Burger zum Kreuz. Dort liest sich mehr Zeit als
     absichtsvoll, nicht als traege. */
  --t-move:   320ms;
  /* Drei Reveal-Dauern, weil es drei Gesten sind, nicht Wildwuchs:
     --t-reveal  ein Block blendet auf und hebt sich leicht
     --t-lines   eine Textzeile faehrt hinter ihrer Maske hoch
                 (--t-hero ueberschreibt sie im Hero bewusst)
     --t-draw    etwas deckt sich ueber seine eigene Ausdehnung auf:
                 Bildmaske, Bildskalierung, Hairline, Timeline-Achse */
  --t-reveal: 900ms;
  --t-lines:  1000ms;
  --t-draw:   1200ms;
  --t-hero:   1400ms;

  --stagger:  90ms;
}


/* =============================================================================
   02  RESET

   Marker steuern den Theme-Build (tools/build-theme.js). Im Prototyp sind es
   nur Kommentare, hier laeuft der Reset global wie bisher.
     @nordshave:proto-only  faellt im Theme weg. Was auf html oder body gehoert,
                            darf im Theme keine Section anfassen.
     @nordshave:scope       wird im Theme unter .nordshave gescopt. Nur einfache
                            Selektoren (Element, *, body, :focus-visible) hier.
   ============================================================================= */

/* @nordshave:proto-only, im Theme entfernt */

/* @nordshave:scope, unter .nordshave gescopt */
:where(.nordshave),
:where(.nordshave) *,
:where(.nordshave) *::before,
:where(.nordshave) *::after { box-sizing:border-box; }
.nordshave {
  background:var(--ns-base);
  color:var(--ns-text);
  font-family:var(--ns-font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:where(.nordshave) h1,
:where(.nordshave) h2,
:where(.nordshave) h3,
:where(.nordshave) h4,
:where(.nordshave) p,
:where(.nordshave) figure,
:where(.nordshave) blockquote,
:where(.nordshave) dl,
:where(.nordshave) dd { margin:0; }
:where(.nordshave) ul,
:where(.nordshave) ol { margin:0; padding:0; list-style:none; }
:where(.nordshave) img,
:where(.nordshave) svg,
:where(.nordshave) video { display:block; max-width:100%; }
:where(.nordshave) img { height:auto; }
:where(.nordshave) a { color:inherit; text-decoration:none; }
:where(.nordshave) button,
:where(.nordshave) input,
:where(.nordshave) select,
:where(.nordshave) textarea {
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  margin:0;
}
:where(.nordshave) button { cursor:pointer; }
:where(.nordshave) table { border-collapse:collapse; width:100%; }
:where(.nordshave) :focus-visible {
  outline:1px solid var(--ns-gold);
  outline-offset:3px;
}
/* @nordshave:endscope */

.ns-visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}


/* =============================================================================
   03  FILMKORN UND FLAECHEN
   ============================================================================= */

/* Liegt fix ueber der ganzen Seite und nimmt dem Schwarz das Digitale. */
.ns-grain{
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;
  opacity:0.025;
  mix-blend-mode:overlay;
  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.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

.ns-bg-base{     background:var(--ns-base); }
.ns-bg-surface{  background:var(--ns-surface); }
.ns-bg-surface-2{background:var(--ns-surface-2); }
.ns-bg-void{     background:var(--ns-void); }

/* Weicher Sektionswechsel, Variante A: linearer Verlauf.

   Der Fade gehoert IN den Rhythmus, nicht daneben. Hoehe = --sp-section, und
   die angrenzenden Sektionen geben ihr Padding auf der Fade-Seite ganz ab.
   Damit ist die Luecke am Farbwechsel exakt --sp-section wie ueberall sonst,
   der Verlauf fuellt sie aus statt sie zu verlaengern, und alles skaliert mit
   dem clamp. Feste Pixelhoehen wuerden auf Mobile das Dreifache ergeben, weil
   --sp-section dort auf 72px faellt, der Fade aber fix bliebe. */
.ns-fade-to-surface{
  height:var(--sp-section);
  background:linear-gradient(to bottom, var(--ns-base), var(--ns-surface));
}
.ns-fade-to-base{
  height:var(--sp-section);
  background:linear-gradient(to bottom, var(--ns-surface), var(--ns-base));
}
.ns-fade-to-void{
  height:var(--sp-section);
  background:linear-gradient(to bottom, var(--ns-base), var(--ns-void));
}

/* Element VOR einem Fade: kein Padding unten. */
.ns-section:has(+ .ns-fade-to-surface),
.ns-section:has(+ .ns-fade-to-base),
.ns-section:has(+ .ns-fade-to-void),
.ns-legal:has(+ .ns-fade-to-void){ padding-block-end:0; }

/* Element NACH einem Fade: kein Padding oben. */
.ns-fade-to-surface + .ns-section,
.ns-fade-to-base + .ns-section{ padding-block-start:0; }

/* Footer nach dem Fade: der Verlauf liefert den Abstand, das Grid nicht doppelt. */
.ns-fade-to-void + .ns-footer .ns-footer__grid{ padding-block-start:0; }

/* Weicher Sektionswechsel, Variante B: warmer radialer Glow hinter dem Fokus. */
.ns-glow{
  position:absolute;
  pointer-events:none;
  width:min(120vw, 1100px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, var(--ns-glow-warm) 0%, rgba(245,199,126,0) 68%);
  transform:translate(-50%,-50%);
  z-index:0;
}

.ns-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 42%, var(--ns-vignette) 100%);
}


/* =============================================================================
   04  TYPOGRAFIE
   ============================================================================= */

.ns-display{
  font-family:var(--ns-font-display);
  font-weight:700;
  font-size:var(--fs-display);
  line-height:0.92;
  letter-spacing:-0.035em;
}

.ns-h2{
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:var(--fs-h2);
  line-height:1.02;
  letter-spacing:-0.028em;
}

.ns-h3{
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  line-height:1.2;
  letter-spacing:-0.02em;
}

.ns-body{ font-size:var(--fs-body); line-height:1.65; }
.ns-small{ font-size:var(--fs-small); line-height:1.6; }

.ns-muted{ color:var(--ns-text-muted); }
.ns-faint{ color:var(--ns-text-faint); }
.ns-gold { color:var(--ns-gold); }

/* Eyebrow im Format  01 / HAUT  */
.ns-eyebrow{
  display:block;
  font-family:var(--ns-font-body);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.24em;
  color:var(--ns-text-faint);
}
.ns-eyebrow__num{ color:var(--ns-gold); }

/* Produktlabel, nicht Sektionszaehler. Hero und Buybox. Komplett gold, weil
   es keine Nummer traegt und ueber warmem Bild sonst als faint verschwindet.
   Das Zaehler-Eyebrow (Nummer gold, Wort faint) bleibt davon unberuehrt. */
.ns-eyebrow--label{ color:var(--ns-gold); }

/* Section-Intro-Koepfe mittig: Eyebrow und H2 als DIREKTE Kinder von ns-wrap.
   Trifft die Vollbreiten-Sections (Anatomie, Timeline, Klingenwechsel, Technik,
   FAQ, Zubehoer, Vergleich, Varianten). Die Angles liegen tiefer im Split und
   bleiben linksbuendig, dort saehe zentriert neben dem Bild schief aus. Buybox
   und Stimmen haben eigene Koepfe und sind ebenfalls nicht direkte Kinder. */
.ns-wrap > .ns-eyebrow{ text-align:center; color:var(--ns-gold); }   /* Section-Header komplett in Gold (Denny) */
.ns-wrap > .ns-h2{ text-align:center; margin-inline:auto; }

/* Editorial-Akzent, sehr sparsam einsetzen. */
.ns-quote{
  font-family:var(--ns-font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.6rem, 3.4vw, 3.1rem);
  line-height:1.28;
  letter-spacing:-0.015em;
  color:var(--ns-text);
}
.ns-caption{
  font-family:var(--ns-font-serif);
  font-style:italic;
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--ns-text-muted);
}

/* Versalienzeile mit Goldpunkt-Trennern, ersetzt Icon-Trustleisten. */
.ns-meta-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.9rem;
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:0.2em;
  color:var(--ns-text-muted);
}
.ns-meta-line li{ display:flex; align-items:center; gap:0.9rem; }
.ns-meta-line li + li::before{
  content:"";
  width:3px;height:3px;
  border-radius:50%;
  background:var(--ns-gold);
  flex:0 0 auto;
}

.ns-smallcaps{
  font-variant-caps:all-small-caps;
  letter-spacing:0.12em;
  color:var(--ns-text-muted);
}


/* =============================================================================
   05  LAYOUT
   ============================================================================= */

.ns-wrap{
  width:100%;
  max-width:var(--ns-content);
  margin-inline:auto;
  padding-inline:var(--sp-gutter);
}
.ns-wrap--full{ max-width:none; padding-inline:0; }

/* Regel 1: Sektionen tragen HALBES Padding oben und unten. Zwischen zwei
   Sektionen ergibt das genau --sp-section, ohne negative Ausgleichs-Margins. */
.ns-section{
  position:relative;
  padding-block:calc(var(--sp-section) / 2);
}

/* Asymmetrische Raster, im Wechsel 5/7 und 7/5. Mobile first: eine Spalte. */
.ns-split{
  display:grid;
  gap:var(--sp-col);
  align-items:center;
}
/* Vergleich: beide Spalten oben buendig, sonst stehen die Ueberschriften
   "Systemkartusche" und "NORDSHAVE SKARP" nicht auf einer Linie. */
.ns-split--1-1{ align-items:start; }

/* Regel 2: Abstand fliesst nur nach unten, nie margin-top am Element.
   Der Abstand steht auf dem ZWEITEN Element eines Paars und liest --flow.

   Jeder .ns-flow setzt seinen eigenen --flow (Default sp-m). Damit leckt der
   Wert nicht in verschachtelte Flows: ein innerer .ns-flow ueberschreibt ihn
   fuer seinen Teilbaum. Die flow-Klassen auf einem BLATT-Element ueberschreiben
   nur dessen eigenen Abstand nach oben. */
.ns-flow{ --flow:var(--sp-m); }
.ns-flow > * + *{ margin-block-start:var(--flow); }

.flow-3xs{ --flow:var(--sp-3xs); }
.flow-2xs{ --flow:var(--sp-2xs); }
.flow-xs { --flow:var(--sp-xs); }
.flow-s  { --flow:var(--sp-s); }
.flow-m  { --flow:var(--sp-m); }
.flow-l  { --flow:var(--sp-l); }
.flow-xl { --flow:var(--sp-xl); }

.ns-measure{ max-width:52ch; }
.ns-measure-sm{ max-width:38ch; }


/* =============================================================================
   06  KOMPONENTEN
   ============================================================================= */

/* --- Hairline ------------------------------------------------------------- */

.ns-hairline{
  height:1px;
  border:0;
  background:var(--ns-line);
  transform-origin:left;
}
.ns-hairline--strong{ background:var(--ns-line-strong); }
.ns-hairline--gold{ background:var(--ns-gold); }


/* --- Buttons -------------------------------------------------------------- */

.ns-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  padding:1.05rem 2.1rem;
  border-radius:var(--r-sm);
  font-family:var(--ns-font-body);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.2em;
  white-space:nowrap;
  isolation:isolate;
  transition:transform var(--t-press) var(--e-glide);
}

/* Primaer: Goldflaeche laeuft bei Hover von unten ein. */
.ns-btn--primary{
  border:1px solid var(--ns-gold);
  color:var(--ns-gold);
  transition:color var(--t-hover) var(--e-glide), transform var(--t-press) var(--e-glide);
}
.ns-btn--primary::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;                 /* Fill folgt der runden Border, keine eckigen Ecken bei Hover */
  z-index:-1;
  background:var(--ns-gold);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform var(--t-hover) var(--e-glide);
}
.ns-btn--primary:hover,
.ns-btn--primary:focus-visible{ color:var(--ns-void); }
.ns-btn--primary:hover::before,
.ns-btn--primary:focus-visible::before{ transform:scaleY(1); }

.ns-btn--full{ width:100%; }

/* Sekundaer: Unterlinie laeuft nach rechts aus und von links wieder herein. */
.ns-btn--secondary{
  padding-inline:0;
  padding-block:0.5rem;
  color:var(--ns-text);
}
.ns-btn--secondary::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--ns-text-muted);
  transform:scaleX(1);
  transform-origin:left;
  /* Nur die Farbe wechselt. Vorher lief hier eine 520ms lange Choreografie
     (Unterstrich nach rechts raus, von links wieder rein) auf einem reinen
     Hover-Zustand: fast das Doppelte des Hover-Budgets, und als @keyframes
     startete sie bei jedem erneuten Ueberfahren wieder bei null statt vom
     aktuellen Stand weiterzulaufen. Der Zustand ist durch die Goldfarbe
     ohnehin eindeutig markiert. */
  transition:background-color var(--t-hover) var(--e-glide);
}
.ns-btn--secondary:hover::after,
.ns-btn--secondary:focus-visible::after{
  background:var(--ns-gold);
}

/* Textlink mit Pfeil, fuer Footer und Navigation. */
.ns-link{
  position:relative;
  display:inline-block;
  color:var(--ns-text-muted);
  transition:color var(--t-micro) var(--e-glide);
}
.ns-link:hover,.ns-link:focus-visible{ color:var(--ns-text); }


/* --- Swatches, echte Radio-Gruppe mit wanderndem Goldring ----------------- */

.ns-swatches{ position:relative; }

.ns-swatches__row{
  position:relative;
  display:flex;
  align-items:center;
  gap:1.15rem;
}

.ns-swatch{
  position:relative;
  width:38px;height:38px;
  border-radius:50%;
  padding:0;
  /* Ruhelinie leiser (--ns-line statt --ns-line-strong): die Metallscheiben
     treten zurueck, der wandernde Gold-Auswahlring liest lauter gegen sie. */
  border:1px solid var(--ns-line);
  transition:border-color var(--t-hover) var(--e-glide), transform var(--t-press) var(--e-glide);
}
/* Hover mit echtem Ziel: Rahmen zieht an, und die Scheibe holt 4% naeher, der
   fixe inset-Glanz wandert relativ zur Kante, das Metall faengt kurz Licht. */
.ns-swatch:hover{ border-color:var(--ns-line-strong); transform:scale(1.04); }
.ns-swatch:focus-visible{ outline-offset:6px; }

/* Metallverlauf mit drei Stops plus innerer Glanzkante. */
.ns-swatch--chrome{
  background:
    linear-gradient(145deg, #F4F6F7 0%, var(--ns-chrome) 46%, #8C9196 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55);
}
.ns-swatch--brass{
  background:
    linear-gradient(145deg, var(--ns-gold-light) 0%, var(--ns-gold) 46%, var(--ns-gold-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,240,205,0.5);
}
.ns-swatch--gunmetal{
  background:
    linear-gradient(145deg, #7C8085 0%, var(--ns-gunmetal) 46%, #34373A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Ein einziger Ring, der per transform wandert, statt neu gezeichnet zu werden. */
.ns-swatches__ring{
  position:absolute;
  top:50%;
  left:0;
  width:52px;height:52px;
  margin-top:-26px;
  margin-left:-7px;
  border:1px solid var(--ns-gold);
  border-radius:50%;
  pointer-events:none;
  /* Wandert bis zu 113px zwischen den Swatches, das ist keine Hover-Micro. */
  transition:transform var(--t-move) var(--e-swap);
}

/* Label und Farbname auf einer Zeile, an der Grundlinie ausgerichtet. */
.ns-swatches__head{
  display:flex;
  align-items:baseline;
  gap:0.6rem;
}
/* Der Farbname ist eine kleine Zeile neben dem Label, keine Ueberschrift
   mehr. Das spart die Hoehe der frueheren fs-h3-Zeile unter den Swatches. */
.ns-swatches__name{
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:var(--fs-small);
  letter-spacing:0.01em;
  color:var(--ns-text);
}


/* --- Accordion ------------------------------------------------------------ */

.ns-accordion{ border-top:1px solid var(--ns-line); }

.ns-accordion__item{ border-bottom:1px solid var(--ns-line); }

.ns-accordion__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-s);
  width:100%;
  padding-block:var(--sp-s);
  text-align:left;
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:-0.01em;
  color:var(--ns-text-muted);
  transition:color var(--t-hover) var(--e-glide), transform var(--t-press) var(--e-glide);
}
.ns-accordion__trigger:hover{ color:var(--ns-text); }
.ns-accordion__trigger[aria-expanded="true"]{ color:var(--ns-text); }

/* Plus, das zum Kreuz rotiert. */
.ns-accordion__sign{
  position:relative;
  flex:0 0 auto;
  width:14px;height:14px;
  transition:transform var(--t-move) var(--e-swap);
}
.ns-accordion__sign::before,
.ns-accordion__sign::after{
  content:"";
  position:absolute;
  inset:50% 0 auto 0;
  height:1px;
  background:var(--ns-gold);
}
.ns-accordion__sign::after{ transform:rotate(90deg); }
.ns-accordion__trigger[aria-expanded="true"] .ns-accordion__sign{ transform:rotate(45deg); }

/* Oeffnen ueber grid-template-rows von 0fr auf 1fr. Das animiert sehr wohl
   die Hoehe, der frueher hier stehende Kommentar behauptete das Gegenteil.
   Der Vorteil ist ein anderer: es braucht keine gemessene Zielhoehe aus dem
   JS und passt sich dem Inhalt an. Die Kosten sind Layout pro Frame, deshalb
   bleibt die Dauer kurz.

   Easing ist --e-reveal, nicht --e-swap: das Panel tritt ein und aus, und
   --e-swap hat einen langsamen Anlauf, der die ersten rund 100ms nach dem
   Klick verschluckt. */
.ns-accordion__panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  /* visibility:hidden nimmt das kollabierte Panel aus dem A11y-Baum (sonst lesen
     manche Screenreader den 0-hohen Body, waehrend der Trigger aria-expanded=false
     meldet). Verzoegert bis nach der Schliess-Animation, damit sie nicht abbricht. */
  visibility:hidden;
  transition:grid-template-rows 300ms var(--e-reveal), opacity 300ms var(--e-reveal), visibility 0s linear 300ms;
}
.ns-accordion__panel[data-open="true"]{
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  transition:grid-template-rows 300ms var(--e-reveal), opacity 300ms var(--e-reveal), visibility 0s;
}
.ns-accordion__panel > div{ overflow:hidden; }
.ns-accordion__body{
  padding-block-end:var(--sp-m);
  color:var(--ns-text-muted);
  max-width:62ch;
}


/* --- Kaufoptionen und Add-ons, Hairline-Boxen ohne Schatten --------------- */

.ns-option{
  display:block;
  position:relative;
  padding:1.15rem 1.25rem;
  border:1px solid var(--ns-line);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color var(--t-hover) var(--e-glide),
             background-color var(--t-hover) var(--e-glide);
}
.ns-option:hover{ border-color:var(--ns-line-strong); }
.ns-option[data-active="true"]{
  border-color:var(--ns-gold);
  background:var(--ns-gold-soft);
}
.ns-option__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.ns-option__label{ font-weight:500; }
.ns-option__note{
  margin-block-start:var(--sp-3xs);
  font-size:var(--fs-small);
  color:var(--ns-text-muted);
}


/* --- Preis ---------------------------------------------------------------- */

.ns-price{
  display:flex;
  align-items:baseline;
  gap:0.9rem;
}
.ns-price__now{
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:1.75rem;
  /* Praezision statt Groesse: Tabellenziffern laufen mechanisch gleichmaessig,
     line-height:1 setzt die Zahl als gesetzte Marke, eine Spur dichteres
     Tracking gibt Praesenz, ohne ein Pixel groesser zu werden (kein
     Rabatt-Look). */
  font-variant-numeric:tabular-nums lining-nums;
  line-height:1;
  letter-spacing:-0.025em;
}
/* Vergleichspreis bewusst faint und ohne Badge, kein Sale-Look. */
.ns-price__was{
  color:var(--ns-text-faint);
  text-decoration:line-through;
  font-size:var(--fs-small);
  font-variant-numeric:tabular-nums lining-nums;
}


/* --- Bewertungszeile, 1px-Sterne statt Review-Widget ---------------------- */

.ns-rating{
  display:flex;
  align-items:center;
  gap:0.7rem;
  font-size:var(--fs-small);
  color:var(--ns-text-muted);
}
.ns-rating__stars{ display:flex; gap:3px; }
.ns-rating__stars svg{ width:13px;height:13px; stroke:var(--ns-gold); fill:none; stroke-width:1; }


/* --- Nummerierte Hairline-Liste ------------------------------------------- */

.ns-numlist{ border-top:1px solid var(--ns-line); }
.ns-numlist__item{
  display:grid;
  grid-template-columns:3.5rem 1fr;
  gap:1.25rem;
  padding:1.6rem 0;
  border-bottom:1px solid var(--ns-line);
}
.ns-numlist__num{
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:var(--fs-small);
  color:var(--ns-gold);
  letter-spacing:0.06em;
}
.ns-numlist__title{
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:1.0625rem;
  margin-bottom:0.35rem;
}
.ns-numlist__text{ color:var(--ns-text-muted); max-width:56ch; }


/* --- Datentabelle, nur horizontale Hairlines ------------------------------ */

.ns-table th,
.ns-table td{
  padding-block:var(--sp-s);
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--ns-line);
}
.ns-table th{
  width:34%;
  font-weight:400;
  color:var(--ns-text-faint);
  font-size:var(--fs-small);
}


/* --- Hotspots ------------------------------------------------------------- */

.ns-hotspots{ position:relative; }

.ns-hotspot{
  position:absolute;
  width:13px;height:13px;
  padding:0;
  border-radius:50%;
  background:var(--ns-gold);
  transform:translate(-50%,-50%);
  /* Drei Ringe fuer Kontrast auf jedem Grund: heller Innenring liest auf
     Dunkel, dunkler Aussenring liest auf hellem Metall, weicher Schatten
     gibt Tiefe. Ohne die verschwindet der Goldpunkt auf der Reflexion. */
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.92),
    0 0 0 3.5px rgba(18,18,18,0.6),
    0 2px 10px rgba(0,0,0,0.6);
}
/* Langsam pulsierender Ring, hell statt gold, damit er auch auf dem
   Metall sichtbar bleibt. */
/* Der Puls ist auf dem Makro das einzige Signal, dass dort ueberhaupt etwas
   anklickbar ist. Er darf deshalb nicht nach ein paar Durchlaeufen
   verstummen, sonst sieht ihn niemand mehr, der zurueckscrollt. Dauerlaeufer
   ist er trotzdem keiner: er laeuft nur, solange die Sektion im Blick ist,
   und hoert endgueltig auf, sobald einmal ein Punkt geoeffnet wurde. Dann
   hat er seine Frage beantwortet. */
.ns-hotspot::after{
  content:"";
  position:absolute;
  inset:-11px;
  border:1.5px solid rgba(255,255,255,0.7);
  border-radius:50%;
  animation:none;
}
.ns-hotspots.is-inview .ns-hotspot::after{
  animation:ns-pulse 2400ms var(--e-glide) infinite;
}
.ns-hotspots.is-used .ns-hotspot::after{
  animation:none;
  opacity:0;
}
@keyframes ns-pulse{
  0%  { transform:scale(0.7); opacity:0.9; }
  70% { transform:scale(1.6); opacity:0; }
  100%{ transform:scale(1.6); opacity:0; }
}

/* Das Label waechst aus dem Punkt heraus, nicht aus seiner eigenen Mitte.
   Der Ursprung liegt deshalb auf der Seite, die zum Punkt zeigt: steht das
   Label rechts, waechst es von links. Position und Ursprung kommen aus
   derselben Entscheidung (siehe data-side unten), sie koennen nicht
   auseinanderlaufen. Heute steht jedes Label rechts, aber die vier
   Hotspot-Positionen sind noch auf der Platzhalterflaeche geschaetzt und
   werden am echten Makro justiert. */
/* Chip permanent sichtbar (Titel-Zeile), der Fliesstext (Zeile 2) faehrt auf
   Hover oder aktivem Zustand ueber grid-template-rows 0fr->1fr aus, kein
   Hoehen-Raten. Dunkler halbtransparenter Traeger fuer Kontrast >= 4.5:1 gegen
   das Foto, feine Verbindungslinie zum Punkt. */
.ns-hotspot__label{
  position:absolute;
  top:50%;
  left:calc(100% + 46px);
  /* Titel-Zeile auf Punkthoehe verankern (nicht das ganze Label zentrieren),
     damit die Verbindungslinie auch nach dem Ausklappen den Punkt trifft. Das
     Label waechst nach unten, der Titel und die Linie (top:1rem) bleiben oben. */
  transform:translateY(-1rem);
  width:max-content;
  max-width:15rem;
  padding:0.5rem 0.75rem;
  background:rgba(18,18,18,0.92);
  border:1px solid var(--ns-line-strong);
  border-radius:var(--r-xs);
  text-align:left;
  display:grid;
  grid-template-rows:auto 0fr;
  transition:grid-template-rows var(--t-hover) var(--e-glide),
             border-color var(--t-hover) var(--e-glide);
}
.ns-hotspot__label::before{
  content:"";
  position:absolute;
  top:1rem;
  right:100%;
  width:46px;height:1px;
  background:var(--ns-line-strong);
  transition:background-color var(--t-hover) var(--e-glide);
}
.ns-hotspot[aria-expanded="true"] .ns-hotspot__label,
.ns-hotspot:hover .ns-hotspot__label{
  grid-template-rows:auto 1fr;
  border-color:var(--ns-gold);
}
.ns-hotspot[aria-expanded="true"] .ns-hotspot__label::before,
.ns-hotspot:hover .ns-hotspot__label::before{ background:var(--ns-gold); }

/* Spiegelseite. Ein Schalter kippt Position, Ursprung, Verbindungslinie und
   Textausrichtung gemeinsam, damit das Label nie vom Punkt weg waechst. */
.ns-hotspot[data-side="left"] .ns-hotspot__label{
  left:auto;
  right:calc(100% + 46px);
  transform-origin:right center;
  text-align:right;
}
.ns-hotspot[data-side="left"] .ns-hotspot__label::before{
  right:auto;
  left:100%;
  transform-origin:right center;   /* Punkt liegt jetzt rechts */
}

.ns-hotspot__title{
  display:block;
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:var(--fs-small);
}
.ns-hotspot__text{
  overflow:hidden;                 /* Grid-Zeile 2 (0fr) klippt den Text sauber */
  padding-block-start:0.35rem;
  font-size:var(--fs-small);
  line-height:1.45;
  color:var(--ns-text-muted);
  opacity:0;
  transition:opacity var(--t-hover) var(--e-glide);
}
.ns-hotspot[aria-expanded="true"] .ns-hotspot__text,
.ns-hotspot:hover .ns-hotspot__text{ opacity:1; }


/* --- Marquee -------------------------------------------------------------- */

.ns-marquee{
  overflow:hidden;
  padding-block:1.6rem;
  border-block:1px solid var(--ns-line);
  user-select:none;
}
.ns-marquee__track{
  display:flex;
  width:max-content;
  animation:ns-marquee 90s linear infinite;
}
/* Kein Hover-Effekt. Eine laufende CSS-Animation behaelt bei geaenderter
   animation-duration ihre verstrichene Zeit und rechnet den Fortschritt neu
   (verstrichen geteilt durch Dauer): das Band sprang bei jedem Ueberfahren
   sichtbar zurueck und beim Verlassen wieder vor. Das Band ist aria-hidden
   und traegt nichts Anklickbares, es gibt nichts zu verlangsamen. */

.ns-marquee__group{
  display:flex;
  align-items:center;
  gap:2.6rem;
  padding-right:2.6rem;
  font-size:var(--fs-eyebrow);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.24em;
  color:var(--ns-text-faint);
  white-space:nowrap;
}
.ns-marquee__group li{ display:flex; align-items:center; gap:2.6rem; }
.ns-marquee__group li::after{
  content:"";
  width:3px;height:3px;
  border-radius:50%;
  background:var(--ns-gold);
}
@keyframes ns-marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}


/* --- Scroll-Cue ----------------------------------------------------------- */

.ns-cue{
  position:relative;
  width:1px;height:48px;
  background:var(--ns-line-strong);
  overflow:hidden;
}
.ns-cue::after{
  content:"";
  position:absolute;
  top:0;left:0;
  width:1px;height:16px;
  background:var(--ns-gold);
  animation:ns-cue 2600ms var(--e-glide) infinite;
}
@keyframes ns-cue{
  0%  { transform:translateY(-16px); }
  100%{ transform:translateY(48px); }
}


/* --- Sticky Buy Bar ------------------------------------------------------- */

.ns-buybar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:800;
  padding-block:0.9rem;
  background:rgba(18,18,18,0.82);
  border-bottom:1px solid var(--ns-line);
  transform:translateY(-100%);
  /* Kein backdrop-filter in der Transition, siehe Header: der Blur schaltet,
     die Bewegung traegt den Uebergang. */
  transition:transform 420ms var(--e-swap);
}
.ns-buybar[data-visible="true"]{
  transform:translateY(0);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.ns-buybar__inner{
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.ns-buybar__thumb{
  width:44px;height:44px;
  object-fit:cover;
  flex:0 0 auto;
  background:var(--ns-surface-2);
}
.ns-buybar__cta{ margin-left:auto; }


/* --- Header --------------------------------------------------------------- */

.ns-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:700;
  background:transparent;
  border-bottom:1px solid transparent;
  /* backdrop-filter steht bewusst NICHT in dieser Liste: einen Blur-Radius zu
     interpolieren heisst, den Hintergrund 400ms lang in jedem Frame neu zu
     verwischen. Der Blur schaltet hart, die 400ms Farbueberblendung darueber
     traegt den Uebergang. */
  transition:background-color 400ms var(--e-glide),
             border-color 400ms var(--e-glide);
}
.ns-header[data-scrolled="true"]{
  background:rgba(18,18,18,0.82);
  border-bottom-color:var(--ns-line);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.ns-header__inner{
  display:flex;
  align-items:center;
  gap:2rem;
  padding-block:1.25rem;
}
.ns-wordmark{
  display:inline-flex;
  align-items:center;
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:0.9375rem;
  text-transform:uppercase;
  letter-spacing:0.3em;
}
/* Logo statt Text-Wortmarke. 64x64-Datei, im Header auf 40px Hoehe. */
.ns-wordmark img{ display:block; height:40px; width:auto; }
.ns-nav{
  display:flex;
  gap:2.2rem;
  margin-inline:auto;
  font-size:var(--fs-small);
  color:var(--ns-text-muted);
}
.ns-icon-btn{
  position:relative;
  display:grid;
  place-items:center;
  width:40px;height:40px;
  border-radius:50%;
  color:inherit;
  background:transparent;
  /* Weicher Kreis darunter auf Hover, Icon geht auf Gold. Kein Rahmen, kein
     Scale-Sprung, nur Farbe. */
  transition:background-color 160ms ease-out, color 160ms ease-out;
}
.ns-icon-btn:hover,
.ns-icon-btn[aria-expanded="true"]{
  background:rgba(255,255,255,0.06);
  color:var(--ns-gold);
}
.ns-icon-btn:focus-visible{
  outline:2px solid var(--ns-gold);
  outline-offset:2px;
}
/* 22px, damit der Warenkorb Gewicht bekommt. Suche zieht mit, sonst stehen
   zwei verschieden grosse Strichicons nebeneinander. Strichstaerke bleibt 1px. */
.ns-icon-btn svg{ width:22px;height:22px; stroke:currentColor; fill:none; stroke-width:1; }
/* Zaehler als kleiner Gold-Punkt oben rechts. Traegt eine Zahl mit tabular-nums,
   verschwindet bei 0 (hidden oder is-empty). */
.ns-cart-dot{
  position:absolute;
  top:6px;right:6px;
  min-width:5px;height:5px;
  border-radius:50%;
  background:var(--ns-gold);
  font-variant-numeric:tabular-nums;
}
.ns-cart-dot[hidden],
.ns-cart-dot.is-empty{ display:none; }


/* --- Newsletter, reine Unterlinie ----------------------------------------- */

.ns-field{
  display:flex;
  align-items:center;
  gap:0.75rem;
  border-bottom:1px solid var(--ns-line-strong);
  padding-bottom:0.7rem;
  transition:border-color var(--t-hover) var(--e-glide);
}
.ns-field:focus-within{ border-bottom-color:var(--ns-gold); }
.ns-field input{
  flex:1;
  min-width:0;
  font-size:var(--fs-small);
  color:var(--ns-text);
}
.ns-field input::placeholder{ color:var(--ns-text-faint); }
.ns-field button{ color:var(--ns-gold); line-height:1; }


/* =============================================================================
   07  BILDER UND PLATZHALTER
   ============================================================================= */

.ns-figure{ position:relative; margin:0; }
.ns-figure img{ width:100%; object-fit:cover; border-radius:var(--r-lg); }

/* Echtes Bild in einem Figuren-Slot: baut dieselbe Ratio-Box wie der
   ns-img-missing-Platzhalter, damit der Wechsel das Layout nicht kippt. Fuer
   Crossfade-Ebenen und Vollbild NICHT noetig, dort fuellt height:100%. */
.ns-photo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--ratio, 4/5);
  object-fit:cover;
  border-radius:var(--r-lg);
}
/* Bild zu Bildunterschrift, tokenisiert. Figure ist kein Flow-Container. */
.ns-figure figcaption{ margin-block-start:var(--sp-xs); }

/* Fehlendes Bild: Flaeche mit Dateinamen, damit sofort sichtbar ist was fehlt. */
.ns-img-missing{
  position:relative;
  display:grid;
  place-items:center;
  padding:1.5rem;
  text-align:center;
  background:var(--ns-surface-2);
  border:1px solid var(--ns-line);
  color:var(--ns-text-faint);
  font-size:var(--fs-small);
  font-family:var(--ns-font-body);
  aspect-ratio:var(--ratio, 4/5);
  overflow:hidden;
  word-break:break-word;
  border-radius:var(--r-lg);
}
.ns-img-missing::after{ content:attr(data-file); }

/* Echte Bilder in Kacheln und Crossfade-Ebenen bekommen denselben Radius. */
.ns-tile img,
.ns-crossfade__layer img{ border-radius:var(--r-lg); }

/* Zubehoer-Kachel: Graustufen, die bei Hover in Farbe kommt. */
.ns-tile img,
.ns-tile .ns-img-missing{
  filter:grayscale(1);
  transition:filter var(--t-hover) var(--e-glide);
}
.ns-tile:hover img,
.ns-tile:hover .ns-img-missing{ filter:grayscale(0); }


/* =============================================================================
   08  SEKTIONEN
   ============================================================================= */

/* --- Mobile-Navigation, Fullscreen-Overlay -------------------------------- */

.ns-burger{
  display:grid;
  place-items:center;
  gap:5px;
  width:38px;height:38px;
}
.ns-burger span{
  display:block;
  width:18px;height:1px;
  background:currentColor;
  transition:transform var(--t-move) var(--e-swap), opacity var(--t-micro) linear;
}
.ns-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.ns-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ns-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-3px) rotate(-45deg); }

.ns-navoverlay{
  position:fixed;
  inset:0;
  z-index:690;
  display:grid;
  align-content:center;
  background:var(--ns-base);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t-hover) var(--e-glide), visibility var(--t-hover);
}
.ns-navoverlay[data-open="true"]{ opacity:1; visibility:visible; }

.ns-navoverlay__list > li{ overflow:hidden; }
.ns-navoverlay__list a{
  display:block;
  padding-block:0.35rem;
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:clamp(2rem, 9vw, 3.2rem);
  letter-spacing:-0.03em;
  transform:translateY(110%);
  transition:transform 620ms var(--e-reveal);
}
.ns-navoverlay[data-open="true"] .ns-navoverlay__list a{ transform:none; }
.ns-navoverlay__list li:nth-child(1) a{ transition-delay:60ms; }
.ns-navoverlay__list li:nth-child(2) a{ transition-delay:130ms; }
.ns-navoverlay__list li:nth-child(3) a{ transition-delay:200ms; }
.ns-navoverlay__list li:nth-child(4) a{ transition-delay:270ms; }


/* --- Hero ----------------------------------------------------------------- */

.ns-hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.ns-hero__media{
  position:absolute;
  inset:-6% 0;          /* Reserve, damit Parallax keine Kante freilegt */
  z-index:-2;
}
.ns-hero__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:72% 62%;  /* die drei Rasierer sitzen rechts unten */
}
/* Verlauf von der Seitenfarbe nach oben transparent, plus Vignette darueber. */
.ns-hero__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to top, var(--ns-base) 0%, rgba(18,18,18,0.55) 30%, transparent 55%);
}
.ns-hero__glow{ top:62%; left:74%; }

.ns-hero__content{
  position:relative;
  max-width:620px;
  /* Hero traegt eigenes Innenpadding, unten mindestens --sp-xl fuer den Cue. */
  padding-block:var(--sp-xl);
}
/* Der Hero laeuft schwerer als der Rest der Seite: --t-hero statt der
   1000ms, die eine Headline im Seitenverlauf bekommt. */
.ns-hero .ns-lines .line{ transition-duration:var(--t-hero); }
.ns-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-m);
}
.ns-hero__cue{
  position:absolute;
  left:50%;
  bottom:2.5rem;
  transform:translateX(-50%);
  z-index:2;
}


/* --- Sticky-Varianten ----------------------------------------------------- */

.ns-variants{ position:relative; }
.ns-variants__tint{
  position:absolute;
  inset:0;
  pointer-events:none;
  transition:background-color 800ms var(--e-glide);
}
.ns-variants__stage{ position:relative; }
.ns-variants__media{
  position:relative;
  aspect-ratio:4/5;
  background:var(--ns-surface-2);
}
.ns-variants__label{
  min-height:calc(var(--fs-h2) * 1.1);
}


/* --- Anatomie, Hotspots --------------------------------------------------- */

.ns-anatomy__stage{ position:relative; }
/* Auf kleinen Viewports ersetzt eine Liste die absolut gesetzten Punkte. */
.ns-anatomy__spots{ display:none; }
/* Abstand kommt aus dem Flow des .ns-wrap, kein margin-top mehr. */


/* --- Vergleich gegen den Systemrasierer ----------------------------------- */

.ns-compare__col--muted{ color:var(--ns-text-faint); }
.ns-compare__col--muted .ns-img-missing,
.ns-compare__col--muted img{ filter:grayscale(1) brightness(0.75); }
.ns-compare__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-xs);
}
.ns-compare__rule{ height:1px; background:var(--ns-line); transform-origin:left; }
.ns-compare__rule--gold{ background:var(--ns-gold); }


/* --- Ritual, Vollbild ----------------------------------------------------- */

.ns-fullbleed{
  position:relative;
  min-height:88vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
.ns-fullbleed__media{
  position:absolute;
  inset:-8% 0;
  z-index:-2;
}
.ns-fullbleed__media img,
.ns-fullbleed__media .ns-img-missing{
  width:100%;height:100%;
  object-fit:cover;
  aspect-ratio:auto;
}
.ns-fullbleed__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to top, var(--ns-base), rgba(18,18,18,0.62) 45%, rgba(18,18,18,0.72));
}
.ns-fullbleed__content{ max-width:46rem; }


/* --- Stimmen -------------------------------------------------------------- */

.ns-testimonials{ position:relative; }
.ns-testimonials__stage{
  display:grid;
  min-height:16rem;
}
.ns-testimonial{
  grid-area:1 / 1;
  opacity:0;
  transition:opacity 700ms var(--e-glide);
  pointer-events:none;
}
.ns-testimonial[data-active="true"]{ opacity:1; pointer-events:auto; }
.ns-testimonials__track{
  height:1px;
  background:var(--ns-line);
  margin-block-start:var(--sp-l);
}
.ns-testimonials__progress{
  height:1px;
  background:var(--ns-gold);
  transform:scaleX(0);
  transform-origin:left;
}


/* --- Klingen und Abo ------------------------------------------------------ */

.ns-blades__box{
  border:1px solid var(--ns-gold);
  border-radius:var(--r-md);
  padding:clamp(2rem, 5vw, 3.5rem);
  max-width:44rem;
  margin-inline:auto;
  text-align:center;
}


/* --- Final-CTA ------------------------------------------------------------ */

.ns-final{ position:relative; text-align:center; overflow:hidden; }
.ns-final .ns-meta-line{ justify-content:center; }
/* Uebergangs-Variante B: radialer warmer Glow hinter dem Fokuspunkt,
   statt eines weiteren linearen Verlaufs. */
.ns-final__glow{ top:50%; left:50%; }
.ns-final > .ns-wrap{ position:relative; z-index:1; }


/* --- Produktseite, Galerie und Buybox ------------------------------------- */

.ns-pdp{ padding-top:clamp(7rem, 14vh, 10rem); }

/* Galerie und Buybox oben buendig. .ns-split zentriert seine Spalten vertikal,
   und seit dem Buybox-Umbau ist die Buybox die laengere von beiden: die Galerie
   saecke sonst um die halbe Hoehendifferenz nach unten. */
.ns-pdp .ns-split{ align-items:start; }

/* Galerie: eine grosse Stage, darunter die Thumb-Leiste. Kein Mosaik mehr. */
.ns-gallery{ display:flex; flex-direction:column; gap:var(--sp-s); }

.ns-gallery__stage{
  position:relative;
  aspect-ratio:4/5;
  border:1px solid var(--ns-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ns-surface-2);
}
.ns-gallery__stage:focus-visible{ outline:1px solid var(--ns-gold); outline-offset:3px; }

/* Zwei Layer, reiner Crossfade: kein Slide, kein Zoom, keine Hoehenaenderung. */
.ns-gallery__layer{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 320ms var(--e-reveal);
}
.ns-gallery__layer[data-active="true"]{ opacity:1; }
.ns-gallery__layer img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Zaehler unten rechts, Versalien, tabular-nums. */
.ns-gallery__counter{
  position:absolute;
  right:var(--sp-xs);
  bottom:var(--sp-xs);
  padding:0.25rem 0.5rem;
  border-radius:var(--r-xs);
  background:rgba(11,11,11,0.55);
  font-size:var(--fs-eyebrow);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ns-text-faint);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* Pfeilflaechen: 1px-Icons ohne Kreis-Button, erscheinen nur bei Hover. */
.ns-gallery__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:44px; height:68px;
  color:var(--ns-text);
  opacity:0;
  transition:opacity var(--t-hover) var(--e-glide), transform var(--t-press) var(--e-glide);
}
.ns-gallery__arrow--prev{ left:0; }
.ns-gallery__arrow--next{ right:0; }
.ns-gallery__stage:hover .ns-gallery__arrow{ opacity:0.8; }
.ns-gallery__arrow:focus-visible{
  opacity:1;
  outline:1px solid var(--ns-gold);
  outline-offset:-4px;
}
/* Touch: Swipe statt Pfeile. */
@media (hover:none){ .ns-gallery__arrow{ display:none; } }

/* Thumb-Leiste: horizontal, 1:1, fuenf sichtbar, Scroll-Snap, Scrollbar weg. */
.ns-gallery__thumbs{
  display:flex;
  gap:var(--sp-xs);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.ns-gallery__thumbs::-webkit-scrollbar{ display:none; }

.ns-gallery__thumb{
  flex:0 0 calc((100% - 4 * var(--sp-xs)) / 5);
  aspect-ratio:1;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--r-md);
  overflow:hidden;
  opacity:0.65;
  cursor:pointer;
  scroll-snap-align:start;
  transition:opacity var(--t-hover) var(--e-glide),
             border-color var(--t-hover) var(--e-glide),
             transform var(--t-press) var(--e-glide);
}
.ns-gallery__thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.ns-gallery__thumb:hover{ opacity:1; }
.ns-gallery__thumb[aria-current="true"]{ opacity:1; border-color:var(--ns-gold); }
.ns-gallery__thumb:focus-visible{ outline:1px solid var(--ns-gold); outline-offset:2px; }

.ns-buyboxcol{ align-self:start; }

/* Add-ons: Hairline-Zeilen mit eigener Checkbox-Marke. */
/* margin-inline:0 statt margin:0, sonst ueberschreibt der Fieldset-Reset die
   Flow-Margin nach oben (gleiche Spezifitaet, spaetere Regel gewinnt). */
.ns-addons{ border:0; padding:0; margin-inline:0; }
.ns-addons legend{ padding:0; }

.ns-addon{
  display:flex;
  align-items:center;
  gap:0.9rem;
  padding:1rem 0;
  border-bottom:1px solid var(--ns-line);
  cursor:pointer;
}
.ns-addon:first-of-type{ border-top:1px solid var(--ns-line); margin-block-start:var(--sp-xs); }
.ns-addon input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
}
/* Unterschied in der Art, nicht im Grad: ungewaehlt eine Hairline und sonst
   nichts, gewaehlt Gold-Hairline, --ns-gold-soft-Fuellung und ein Haekchen.
   Vorher war das Kaestchen in beiden Zustaenden goldgefuellt (ein
   scale(0.6)-Rest liess auch ungewaehlt eine Fuellung stehen), damit sah
   ungewaehlt aus wie gewaehlt. */
.ns-addon__box{
  position:relative;
  flex:0 0 auto;
  width:16px;height:16px;
  border:1px solid var(--ns-line);
  border-radius:var(--r-xs);
  transition:border-color var(--t-hover) var(--e-glide),
             background-color var(--t-hover) var(--e-glide);
}
/* Das Haekchen, nur im gewaehlten Zustand sichtbar. */
.ns-addon__box::after{
  content:"";
  position:absolute;
  left:50%; top:45%;
  width:8px; height:4px;
  border-left:1.5px solid var(--ns-gold);
  border-bottom:1.5px solid var(--ns-gold);
  transform:translate(-50%,-50%) rotate(-45deg) scale(0.4);
  opacity:0;
  transition:opacity var(--t-micro) var(--e-glide),
             transform var(--t-micro) var(--e-glide);
}
.ns-addon:hover .ns-addon__box{ border-color:var(--ns-line-strong); }
.ns-addon input:checked + .ns-addon__box{
  border-color:var(--ns-gold);
  background:var(--ns-gold-soft);
}
.ns-addon input:checked + .ns-addon__box::after{
  opacity:1;
  transform:translate(-50%,-50%) rotate(-45deg) scale(1);
}
.ns-addon input:focus-visible + .ns-addon__box{
  outline:1px solid var(--ns-gold);
  outline-offset:3px;
}
.ns-addon__label{ font-size:var(--fs-small); }
.ns-addon__price{
  margin-left:auto;
  padding-left:var(--sp-s);
  font-size:var(--fs-small);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}


/* --- CTA, gefuellte Goldflaeche. Gilt auch fuer die Sticky Buy Bar. ------- */

.ns-btn--cta{
  min-height:56px;
  border:1px solid var(--ns-gold);
  border-radius:var(--r-sm);
  background:var(--ns-gold);
  color:var(--ns-base);
  letter-spacing:0.08em;
  /* Feine gebuerstete Tiefe schon im Ruhezustand, gleiches Specular-Weiss wie
     die Glanzkanten der Metall-Swatches. Der Hover hebt sie auf 0.4. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22);
  transition:background-color 200ms var(--e-glide),
             border-color 200ms var(--e-glide),
             box-shadow 200ms var(--e-glide),
             transform var(--t-press) var(--e-glide);
}
/* Hover: KEIN Farbwechsel (Denny 25.07.2026), das Gold bleibt. Nur eine staerkere
   Glanzkante und 1px Hebung dem Zeiger entgegen, physische Reaktion statt Farbsprung. */
.ns-btn--cta:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  transform:translateY(-1px);
}
/* Der Druck sitzt in der gemeinsamen Press-Regel weiter unten, nicht hier. */
.ns-btn--cta:focus-visible{ outline:2px solid var(--ns-text); outline-offset:2px; }
.ns-btn--cta:disabled,
.ns-btn--cta[aria-disabled="true"]{
  background:var(--ns-line-strong);
  border-color:var(--ns-line-strong);
  color:var(--ns-text-faint);
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
}


/* --- Press-Feedback ------------------------------------------------------
   Zwei Werte, weil derselbe Prozentsatz auf verschiedenen Groessen
   verschieden stark liest: 2 Prozent auf einer 350px-Flaeche sind 7px Weg,
   6 Prozent auf einem 38px-Swatch sind gut zwei. Beide ueber --t-press.

   Zwei Ausloeser, weil :active auf Touch schon beim Aufsetzen feuert, auch
   wenn daraus eine Scrollgeste wird: bei einer Seite voller Swatches, Thumbs
   und Stationen zuckte sonst beim Scrollen die halbe Seite. Maus und Tastatur
   bleiben deshalb bei :active (aus einem Mausklick wird kein Scrollen), Touch
   laeuft ueber data-pressed, das die Press-Geste in nordshave.js bei mehr als
   10px Bewegung wieder entfernt. */

/* Grosse Flaechen */
:is(.ns-btn, .ns-accordion__trigger, .ns-offer, .ns-addon)[data-pressed]{
  transform:scale(0.98);
}
/* Kleine Bedienelemente */
:is(.ns-swatch, .ns-gallery__thumb)[data-pressed]{ transform:scale(0.94); }
/* Elemente mit eigener Transform: der Druck muss sich dazustellen. */
.ns-gallery__arrow[data-pressed]{ transform:translateY(-50%) scale(0.94); }
.ns-hotspot[data-pressed]{ transform:translate(-50%,-50%) scale(0.94); }
/* Der Druck sitzt auf der Station selbst. Das geht, seit die Reveal-
   Animation ihren fill-Endzustand freigibt, siehe is-shown weiter unten. */
.ns-tl__station[data-pressed]{ transform:scale(0.94); }

@media (hover:hover) and (pointer:fine){
  :is(.ns-btn, .ns-accordion__trigger, .ns-offer, .ns-addon):active{
    transform:scale(0.98);
  }
  :is(.ns-swatch, .ns-gallery__thumb):active{ transform:scale(0.94); }
  .ns-gallery__arrow:active{ transform:translateY(-50%) scale(0.94); }
  .ns-hotspot:active{ transform:translate(-50%,-50%) scale(0.94); }
  .ns-tl__station:active{ transform:scale(0.94); }
}

/* Die Transform-Transition muss in der jeweils eigenen transition-Liste
   stehen, ein gemeinsames transition hier wuerde die vorhandenen Listen
   ersetzen statt sie zu ergaenzen. */
.ns-tl__station,
.ns-hotspot,
.ns-addon{ transition:transform var(--t-press) var(--e-glide); }

/* Der CTA setzt auf den Hover-Hub (translateY -1px) auf: auf Druck sinkt die
   Flaeche zurueck und staucht leicht. Muss NACH der gemeinsamen Press-Regel
   stehen, gleiche Spezifitaet, spaeter gewinnt, sonst bliebe es beim reinen
   scale(0.98) ohne den translateY-Reset. */
.ns-btn--cta[data-pressed]{ transform:translateY(0) scale(0.985); }
@media (hover:hover) and (pointer:fine){
  .ns-btn--cta:active{ transform:translateY(0) scale(0.985); }
}


/* --- Trust-Ticker, ersetzt den Beschreibungstext ------------------------- */

/* Ein Zyklus, eine Stellschraube: die Fortschritts-Hairline taktet den
   Zeilenwechsel, also steuert dieser Wert beides. */
.ns-ticker{ --ticker-cycle:7000ms; }

.ns-ticker__anim{ position:relative; }

/* Feste Hoehe, damit der Wechsel nichts verschiebt. */
.ns-ticker__viewport{
  position:relative;
  height:1.6rem;
  overflow:hidden;
}
.ns-ticker__track{ position:absolute; inset:0; }

.ns-ticker__row{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:0.6rem;
  opacity:0;
  transform:translateY(8px);
  /* Raus in 160ms, rein erst ab 120ms. Wenn die neue Zeile einsetzt, steht
     die alte schon unter 30 Prozent: keine Doppelbelichtung, aber auch kein
     Moment, in dem gar nichts dasteht (das liest sich als Flackern).
     120 plus 280 ergibt wieder die 400ms Gesamtdauer wie vorher. */
  transition:opacity 160ms var(--e-glide);
}
.ns-ticker__row[data-active="true"]{
  opacity:1;
  transform:none;
  transition:opacity 280ms var(--e-glide) 120ms,
             transform 280ms var(--e-glide) 120ms;
}

.ns-ticker__icon{
  flex:0 0 auto;
  display:inline-flex;
  color:var(--ns-gold);
}
.ns-ticker__text{
  font-family:var(--ns-font-body);
  font-size:var(--fs-small);
  color:var(--ns-text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Die Fortschritts-Hairline ist die Uhr: ihre Iteration taktet den Wechsel
   (siehe Ticker-Modul). Pause haelt Balken und Wechsel gemeinsam an. */
.ns-ticker__progress{
  display:block;
  /* 1px statt 2px, damit die Linie auf dem sonst konsequenten Hairline-Raster
     sitzt, und opacity 0.7, damit der Takt gespuert statt als Ladebalken
     gelesen wird. Der CTA verliert damit seinen staerksten Gold-Konkurrenten. */
  height:1px;
  opacity:0.7;
  margin-block-start:var(--sp-2xs);
  background:var(--ns-gold);
  transform:scaleX(0);
  transform-origin:left;
  animation:ns-ticker-fill var(--ticker-cycle) linear infinite;
}
.ns-ticker.is-paused .ns-ticker__progress{ animation-play-state:paused; }

@keyframes ns-ticker-fill{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}


/* --- Bundle-Boxen, Hairline statt Karte --------------------------------- */

/* Zwei Zeilen, nicht drei: Titel und Preis auf einer Linie, darunter die
   Zusammensetzung. Beim Duo kommt die Ersparnis als dritte, kleine Zeile
   dazu, das ist zusaetzliche Information, kein Grundaufbau. */
.ns-offer{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3xs);
  padding:0.95rem 1.15rem;
  border:1px solid var(--ns-line);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:border-color var(--t-hover) var(--e-glide),
             background-color var(--t-hover) var(--e-glide),
             transform var(--t-press) var(--e-glide);
}
.ns-offer:hover{ border-color:var(--ns-line-strong); }
.ns-offer[data-active="true"]{
  border-color:var(--ns-gold);
  background:var(--ns-gold-soft);
}
.ns-offer:focus-within{ border-color:var(--ns-gold); }
.ns-offer input:focus-visible ~ .ns-offer__head{ outline:1px solid var(--ns-gold); outline-offset:4px; }

.ns-offer__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-s);
}
.ns-offer__name{
  font-family:var(--ns-font-display);
  font-weight:600;
  letter-spacing:0.02em;
}
.ns-offer__items{ font-size:var(--fs-small); color:var(--ns-text-muted); }
.ns-offer__save{ font-size:var(--fs-small); color:var(--ns-gold); }
.ns-offer__price{
  font-family:var(--ns-font-display);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Name und BELIEBT-Tag auf einer Grundlinie, Preis rechts. */
.ns-offer__title{
  display:inline-flex;
  align-items:baseline;
  gap:0.55rem;
}
/* BELIEBT als kleiner 1px-Hairline-Tag direkt neben dem Namen, statt als
   Pille ueber der Oberkante. Dort sass es fast in der oberen Kachel, seit der
   Abstand zwischen den Boxen enger ist. Inline kostet keine Hoehe und
   kollidiert mit nichts. */
.ns-offer__badge{
  display:inline-block;
  padding:0.08rem 0.42rem;
  border:1px solid var(--ns-gold);
  border-radius:var(--r-xs);
  font-size:var(--fs-eyebrow);
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--ns-gold);
  transform:translateY(-0.1em);   /* an die Grossbuchstaben-Oberkante ruecken */
}


/* --- Garantien in der Buybox ---------------------------------------------
   Die fruehere Icon-Trustleiste (drei Icon-Karten) war genau das generische
   Badge-Muster, das die Seite meidet (siehe Kommentar an .ns-meta-line).
   Jetzt eine ruhige Garantie-Liste in der Sprache der Seite: Versalien, muted,
   Goldpunkt-Marker als Akzent, unter einer Hairline und eng an die Add-ons
   gebunden statt floatend. Vertikal, damit es auf schmaler Spalte und mobil
   gleich sauber sitzt, ohne haengende Trenner beim Umbruch. */
/* Garantie-Panel: umrandeter Kasten, drei Felder mit senkrechten Hairlines
   getrennt, je Gold-Icon plus zweizeiliges Label. Kein Bullet, kein Hover,
   kein Link. Mobil zwei Felder pro Zeile. */
.ns-guarantees{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--ns-line-strong);
  border-radius:var(--r-md);
  overflow:hidden;
}
.ns-guarantees__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.45rem;
  padding:0.9rem 0.5rem;
  text-align:center;
}
.ns-guarantees__item + .ns-guarantees__item{ border-left:1px solid var(--ns-line); }
.ns-guarantees__icon{ width:20px; height:20px; color:var(--ns-gold); flex:0 0 auto; }
.ns-guarantees__label{
  display:flex;
  flex-direction:column;
  font-size:var(--fs-small);
  line-height:1.25;
  color:var(--ns-text-muted);
}
.ns-guarantees__label strong{ color:var(--ns-text); font-weight:600; }
@media (max-width:899px){
  .ns-guarantees{ grid-template-columns:repeat(2, 1fr); }
  .ns-guarantees__item:nth-child(3){
    grid-column:1 / -1;
    border-left:none;
    border-top:1px solid var(--ns-line);
  }
}


/* --- Merkmale, Fakten-Section ---------------------------------------------
   Sechs-Spalten-Raster mit Fakt-Kacheln statt statischer Nummernliste. Nur
   Tokens, Hairlines statt Karten, Gold als Akzent. Reveal ueber die Kachel-
   Klasse .ns-reveal (bestehender Observer). Motion rein transform/opacity.
   Hinweis: "Gold-Alpha"-Border ist als solide Gold-Hairline umgesetzt, wie es
   das System sonst fuer Chips und aktive Boxen nutzt; ein sichtbarer
   Gold-Alpha-Rand haette einen neuen Farbwert gebraucht. */

/* Kopf mittig wie die anderen Section-Intros (globale Regel greift, weil
   Eyebrow und H2 direkte Kinder von ns-wrap sind). Der Eyebrow ist flex statt
   inline-flex und zentriert die Linie samt Wort als Gruppe; text-align allein
   wuerde eine Flexbox nicht verschieben. */
.ns-facts__eyebrow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.7rem;
  color:var(--ns-gold);
}
.ns-facts__eyebrow::before{
  content:"";
  width:1.75rem;
  height:1px;
  background:var(--ns-gold);
}
/* Ein Wort in Newsreader Italic als Akzent (kein neuer Font, nur die Serifen-
   Rolle inline). */
.ns-facts__accent{
  font-family:var(--ns-font-serif);
  font-style:italic;
  font-weight:500;
  letter-spacing:0;
}

.ns-facts__grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:var(--sp-s);
}
.ns-fact--a{ grid-column:1 / 4; grid-row:1 / 3; }
.ns-fact--b{ grid-column:4 / 7; grid-row:1; }
.ns-fact--c{ grid-column:4 / 7; grid-row:2; }
.ns-fact--d{ grid-column:1 / 3; grid-row:3; }
.ns-fact--e{ grid-column:3 / 7; grid-row:3; }

/* Kachel. Border/Fuellung reagieren auf Hover, opacity/transform tragen den
   Reveal (Startzustand kommt aus .ns-reveal, Verzoegerung aus --i). Beide
   Transition-Gruppen stehen hier zusammen mit eigenen Delays, weil ein
   spaeteres transition-Shorthand sonst die Reveal-Verzoegerung nullen wuerde. */
.ns-fact{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-xs);
  padding:var(--sp-m);
  border:1px solid var(--ns-line);
  border-radius:var(--r-md);
  background:var(--ns-surface-2);
  overflow:hidden;
  transition:border-color var(--t-hover) var(--e-glide),
             background-color var(--t-hover) var(--e-glide),
             opacity var(--t-reveal) var(--e-reveal),
             transform var(--t-reveal) var(--e-reveal);
  transition-delay:0s, 0s,
                   calc(var(--i, 0) * var(--stagger)),
                   calc(var(--i, 0) * var(--stagger));
}
.ns-fact:hover,
.ns-fact:focus-within{
  border-color:var(--ns-gold);
  background-color:var(--ns-gold-soft);
}
.ns-fact:focus-visible{ outline:2px solid var(--ns-text); outline-offset:2px; }
.ns-fact__title{
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  letter-spacing:-0.01em;
  line-height:1.15;
}
.ns-fact__text{ color:var(--ns-text-muted); font-size:var(--fs-small); }

/* Fakt-Chip: gesperrte Gold-Versalien mit Gold-Hairline, wie das BELIEBT-Tag. */
.ns-fact__chip{
  align-self:flex-start;
  padding:0.12rem 0.5rem;
  border:1px solid var(--ns-gold);
  border-radius:var(--r-xs);
  font-size:var(--fs-eyebrow);
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--ns-gold);
}

/* Wandernde Goldkante oben, das Signature-Element: ein schmaler Lichtstrich
   faehrt bei Hover einmal ueber die Oberkante. */
.ns-fact__edge{
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--ns-gold-light) 50%, transparent 100%);
  transform:translateX(-100%);
  transition:transform 620ms var(--e-glide);
  pointer-events:none;
}
.ns-fact:hover .ns-fact__edge,
.ns-fact:focus-within .ns-fact__edge{ transform:translateX(100%); }

/* A  Bildkachel: Bild fuellt die Kachel, Scrim, Text unten. */
.ns-fact--a{ padding:0; min-height:100%; }
.ns-fact__img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 900ms var(--e-glide);
}
.ns-fact--a:hover .ns-fact__img,
.ns-fact--a:focus-within .ns-fact__img{ transform:scale(1.06); }
.ns-fact__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    var(--ns-void) 0%, rgba(11,11,11,0.55) 34%, rgba(11,11,11,0) 68%);
  pointer-events:none;
}
.ns-fact__body{
  position:relative;
  z-index:1; /* eigener Stapelkontext: haelt die Dunkelbasis (::before, z-index:-1)
                ueber dem Bild und dem Scrim, aber hinter dem Text */
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2xs);
  padding:var(--sp-m);
}
/* Eigene Dunkelbasis hinter dem Textblock: haelt den Kontrast unabhaengig
   von der Kartenhoehe. Der Scrim allein trifft die helle Metallbande der
   340px-Mobilkachel nicht zuverlaessig, der Chip stuende sonst zu hell. */
.ns-fact__body::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0; top:calc(-1 * var(--sp-m));
  background:linear-gradient(to top,
    var(--ns-void) 40%, rgba(11,11,11,0.6) 68%, rgba(11,11,11,0) 100%);
  z-index:-1;
  pointer-events:none;
}
/* Chip auf der Bildkachel bekommt eine eigene Dunkelbasis: er sitzt genau auf
   der hellen Chrombande, die das Produkt zeigt. So bleibt der Chip lesbar,
   ohne das Bild grossflaechig abzudunkeln. Chips auf Flaeche bleiben ohne Fuellung. */
.ns-fact--a .ns-fact__chip{ background:rgba(11,11,11,0.72); }
.ns-fact--a .ns-fact__text{ color:var(--ns-text); opacity:0.86; }

/* ==========================================================================
   FAKT B + FAKT C  Glyph-Animationen
   Ersetzt den alten ribs/blade/sparks-Block (ca. Zeile 2048-2111).
   Reuse der bestehenden Klassen .ns-fact__ribs / .ns-fact__blade /
   .ns-fact__sparks, damit der bestehende reduced-motion-Guard (~Zeile 2190)
   greift, ganz ohne neuen Guard. Keine neuen animierten Klassen.
   ========================================================================== */

/* Glyph-Basis (beide Karten) */
.ns-fact__glyph{ color:var(--ns-gold); width:56px; height:44px; }
.ns-fact__glyph svg{ width:100%; height:100%; display:block; }

/* B  Glatte Rolle: ein Licht-Highlight (Sheen) gleitet auf Hover/Focus EINMAL ueber
   die glatte Walze und deutet das Rollen an, keine Rillen. Reine Transform-Transition
   auf .ns-fact__ribs (Name bewusst wiederverwendet), damit der bestehende Guard
   .ns-fact__ribs{transform:none !important} sie ohne neuen Block still stellt. Das
   Highlight ist heller (gold-light) und leicht transparent, liest als Sheen auf
   poliertem Metall, nicht als Struktur. */
.ns-fact__ribs{
  transform-box:view-box;
  transform:translateX(0);
  stroke:var(--ns-gold-light);
  opacity:0.7;
  transition:transform var(--t-move) var(--e-glide);
}
.ns-fact--b:hover .ns-fact__ribs,
.ns-fact--b:focus-within .ns-fact__ribs{ transform:translateX(16px); }

/* C  Magnet: die Klinge (Keeper-Bar) wird an die Polflaechen gezogen und gehalten.
   Sie kriecht erst (ease-IN, das Feld greift mit der Naehe), beschleunigt in die Pole
   und setzt mit kurzem Klick auf (minimale Ueberpressung, winziger Rueckprall), dann
   HALT (forwards). Die Klinge ist in der Halte-Lage gezeichnet, der Basis-Transform
   hebt sie per translateY(-8px) in die Schwebe; so traegt die Basis-Transition den
   weichen Un-Hover-Ruecklauf und der bestehende Guard deckt reduced-motion ohne neuen
   Block ab: .ns-fact__blade{transform:none !important} => Klinge sitzt gehalten auf den
   Polen, .ns-fact__sparks{opacity:0 !important} => Funken aus. !important im Guard
   schlaegt die CSS-Animation. */
.ns-fact__blade{
  transform-box:view-box;
  transform-origin:center;
  transform:translateY(-8px);   /* Ruhe: schwebt knapp ueber den Polen (Anziehung sichtbar) */
  transition:transform var(--t-move) var(--e-glide); /* Basis = weicher Ruecklauf */
}
.ns-fact--c:hover .ns-fact__blade,
.ns-fact--c:focus-within .ns-fact__blade{
  transform:translateY(0);      /* Ziel = Halt auf den Polen, noetig fuer den Ruecklauf-Grundwert */
  transition:none;              /* der Hin-Snap gehoert der Animation */
  animation:ns-blade-catch 500ms var(--e-glide) forwards;
}
@keyframes ns-blade-catch{
  0%   { transform:translateY(-8px);  animation-timing-function:cubic-bezier(0.55,0,0.85,0.32); } /* kriecht, ease-IN: Zug ins Feld */
  62%  { transform:translateY(0.6px); animation-timing-function:cubic-bezier(0.32,0,0.24,1); }    /* Aufsetzen mit minimaler Ueberpressung auf die Pole */
  74%  { transform:translateY(-1px);  animation-timing-function:cubic-bezier(0.4,0,0.5,1); }      /* Klick: winziger Rueckprall */
  86%  { transform:translateY(0); }                                                               /* setzt sich auf die Polflaechen */
  100% { transform:translateY(0); }                                                               /* HALT am Magneten */
}
.ns-fact__sparks{
  opacity:0;
  transition:opacity var(--t-hover) var(--e-glide); /* Basis (kein sichtbarer Wechsel im Halt) */
}
.ns-fact--c:hover .ns-fact__sparks,
.ns-fact--c:focus-within .ns-fact__sparks{
  opacity:0;                    /* Endwert = 0: reiner Kontakt-Blitz, kein Dauer-Glimmen (Quiet Luxury) */
  transition:none;
  animation:ns-sparks-flash 500ms var(--e-swap) forwards;
}
@keyframes ns-sparks-flash{
  0%,54% { opacity:0; }         /* dunkel bis kurz vor Kontakt: kein Vor-Einblenden */
  62%    { opacity:0.9; }       /* Blitz exakt im Aufsetz-Frame der Klinge */
  82%    { opacity:0; }         /* klingt voll ab */
  100%   { opacity:0; }
}

/* D  Kennzahl: Outline via -webkit-text-stroke, auf Hover gefuellt. Der
   Wechsel laeuft ueber eine zweite, gefuellte Kopie, die per Opacity
   einblendet, damit nur opacity animiert (keine Farb-Transition). */
.ns-fact__stat{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:0.12em;
  font-family:var(--ns-font-display);
  font-weight:700;
  font-size:clamp(3.2rem, 6vw, 4.6rem);
  line-height:0.86;
  letter-spacing:-0.03em;
  margin-bottom:var(--sp-2xs);
}
.ns-fact__num{
  position:relative;
  font-variant-numeric:tabular-nums lining-nums;
  color:transparent;
  -webkit-text-stroke:1px var(--ns-gold);
}
.ns-fact__num::after{
  content:attr(data-num); /* gefuellte Kopie deckt die Outline, Zahl aus data-num
                             statt hart codiert: der Theme-Port kann sie editieren */
  position:absolute;
  inset:0;
  color:var(--ns-gold);
  -webkit-text-stroke:0;
  opacity:0;
  transition:opacity var(--t-hover) var(--e-glide);
}
.ns-fact--d:hover .ns-fact__num::after,
.ns-fact--d:focus-within .ns-fact__num::after{ opacity:1; }
.ns-fact__unit{
  font-size:0.26em;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ns-gold);
  align-self:center;
}

/* E  breite Kachel: fuenf Klingenlinien fahren auf volle Breite aus. */
.ns-fact--e{ flex-direction:row; align-items:center; gap:var(--sp-l); }
.ns-fact__e-text{ display:flex; flex-direction:column; gap:var(--sp-xs); flex:1 1 auto; }
.ns-fact__lines{
  flex:0 0 40%;
  display:flex;
  flex-direction:column;
  gap:0.85rem;
  align-self:center;
}
.ns-fact__lines span{
  height:1px;
  background:var(--ns-gold);
  transform:scaleX(0.35);
  transform-origin:left;
  opacity:0.6;
  transition:transform var(--t-move) var(--e-glide),
             opacity var(--t-move) var(--e-glide);
  transition-delay:calc(var(--l) * 45ms);
}
.ns-fact--e:hover .ns-fact__lines span,
.ns-fact--e:focus-within .ns-fact__lines span{ transform:scaleX(1); opacity:1; }

/* Mobile: eine Spalte, Reihenfolge A..E, Bildkachel mindestens 340px. */
@media (max-width:899px){
  .ns-facts__grid{ grid-template-columns:1fr; }
  .ns-fact--a, .ns-fact--b, .ns-fact--c, .ns-fact--d, .ns-fact--e{
    grid-column:auto; grid-row:auto;
  }
  .ns-fact--a{ min-height:340px; }
  .ns-fact--e{ flex-direction:column; align-items:stretch; gap:var(--sp-m); }
  .ns-fact__lines{ flex-basis:auto; }
}

/* Reduced Motion: Inhalte sofort sichtbar, keine Transitions und Transforms. */
@media (prefers-reduced-motion:reduce){
  .ns-fact{ opacity:1 !important; transform:none !important; }
  .ns-facts *,
  .ns-facts *::before,
  .ns-facts *::after{ transition:none !important; }
  .ns-fact__img,
  .ns-fact__ribs,
  .ns-fact__blade,
  .ns-fact__lines span{ transform:none !important; }
  .ns-fact__lines span{ transform:scaleX(1) !important; opacity:1 !important; }
  .ns-fact__sparks{ opacity:0 !important; }
  .ns-fact__edge{ opacity:0 !important; }
}


/* ==========================================================================
   SECTION-CSS, sequenziell (Entscheidung W4d, 24.07.2026)
   Neue ueberarbeitete Sections bekommen hier ihren CSS-Block, mit Sentinels
   abgegrenzt. Bewusst KEINE CSS-Partials unter assets/css/sections/: der Build
   (build-theme.js) liest genau eine nordshave.css, und der eigentliche
   Parallel-Blocker waere ohnehin das geteilte product.html (beide Section-
   Umbauten muessten es anfassen), nicht das CSS. Partials wuerden das nicht
   loesen. Also ein File, Sentinels, Sections sequenziell (M1 vor M2).
   Format: @section:NAME START ... @section:NAME END
   ========================================================================== */

/* @section:m1-anatomie START */
.ns-anatomy__more{ margin-block-start:var(--sp-m); }
.ns-anatomy__toggle{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.6rem 1.1rem;
  background:transparent;
  border:1px solid var(--ns-line-strong);
  border-radius:var(--r-sm);
  color:var(--ns-text);
  font:inherit;
  font-size:var(--fs-small);
  cursor:pointer;
  transition:border-color var(--t-hover) var(--e-glide),
             color var(--t-hover) var(--e-glide);
}
.ns-anatomy__toggle:hover{ border-color:var(--ns-gold); color:var(--ns-gold); }
.ns-anatomy__toggle:focus-visible{ outline:2px solid var(--ns-gold); outline-offset:2px; }
.ns-anatomy__toggle-icon{
  width:9px;height:9px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);   /* Chevron nach unten */
  transition:transform var(--t-hover) var(--e-glide);
}
.ns-anatomy__toggle[aria-expanded="true"] .ns-anatomy__toggle-icon{
  transform:translateY(2px) rotate(-135deg);
}
/* Detailtafel: aufklappen ueber grid-template-rows, kein Hoehen-Raten. */
.ns-anatomy__detail{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--t-move) var(--e-glide);
}
.ns-anatomy__toggle[aria-expanded="true"] + .ns-anatomy__detail{ grid-template-rows:1fr; }
.ns-anatomy__detail-inner{
  overflow:hidden;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-s);
}
/* Oberer Abstand nur im offenen Zustand. Stuende er fest am Inner, sizte der
   0fr-Track im geschlossenen Zustand auf das Padding (ein 20px-Rest luegt unter
   dem Button hervor). So kollabiert die Tafel flush auf 0. */
.ns-anatomy__toggle[aria-expanded="true"] + .ns-anatomy__detail .ns-anatomy__detail-inner{
  padding-block-start:var(--sp-s);
}
.ns-anatomy__detail-item h3{
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  margin:0 0 0.4rem;
}
.ns-anatomy__detail-item p{
  margin:0;
  color:var(--ns-text-muted);
  font-size:var(--fs-small);
  line-height:1.6;
}
@media (max-width:899px){
  .ns-anatomy__detail-inner{ grid-template-columns:1fr; }
}
/* @section:m1-anatomie END */

/* @section:m2-klingenwechsel START */
.ns-blades{ display:grid; gap:var(--sp-s); justify-items:start; }
.ns-blades__stage{
  width:100%;
  max-width:480px;
  aspect-ratio:1;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ns-surface-2);
}
/* Crossfade in 280ms (Spec), nur die Blades-Buehne, die globale Crossfade-Dauer
   (Galerie) bleibt unangetastet. */
.ns-blades__stage .ns-crossfade__layer{
  transition:opacity 280ms var(--e-swap), transform 280ms var(--e-swap);
}
.ns-blades__chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2xs); }
.ns-blades__chip{
  display:grid;
  place-items:center;
  width:2.6rem;height:2.6rem;
  padding:0;
  background:transparent;
  border:1px solid var(--ns-line-strong);
  border-radius:var(--r-sm);
  color:var(--ns-text-muted);
  font-family:var(--ns-font-display);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-small);
  cursor:pointer;
  transition:border-color var(--t-hover) var(--e-glide),
             color var(--t-hover) var(--e-glide),
             background-color var(--t-hover) var(--e-glide);
}
.ns-blades__chip:hover{ border-color:var(--ns-gold); color:var(--ns-text); }
.ns-blades__chip:focus-visible{ outline:2px solid var(--ns-gold); outline-offset:2px; }
.ns-blades__chip[aria-selected="true"]{
  border-color:var(--ns-gold);
  color:var(--ns-void);
  background:var(--ns-gold);
}
.ns-blades__text{
  min-height:3.2em;
  max-width:52ch;
  color:var(--ns-text);
  font-size:var(--fs-small);
  line-height:1.55;
}
.ns-blades__note{
  margin-block-start:var(--sp-s);
  max-width:60ch;
  font-size:var(--fs-small);
}
/* @section:m2-klingenwechsel END */

/* --- Umstellung-Timeline (interaktive Tablist) ---------------------------- */

.ns-tl{
  --tl-edge:12.5%;
  /* Die Achse zeichnet sich wie jede andere Hairline, also mit --t-draw.
     Die Punkte erscheinen genau dann, wenn die Linie sie erreicht. Ihr
     Abstand ist deshalb kein eigener Wert, sondern eine Rechnung: die
     Liniendauer geteilt durch die Zahl der Zwischenraeume. --tl-steps setzt
     das Timeline-Modul aus der tatsaechlichen Stationszahl, damit die
     Rechnung mitwaechst, wenn eine Station dazukommt. */
  --tl-line:var(--t-draw);
  --tl-steps:3;
  --tl-step:calc(var(--tl-line) / var(--tl-steps));
}

/* Achse: vier Stationen nebeneinander, Hairline durch die Punktmitten */
.ns-tl__stations{
  position:relative;
  display:flex;
  align-items:flex-end;
  padding-block-start:0.25rem;
}

.ns-tl__line{
  position:absolute;
  left:var(--tl-edge); right:var(--tl-edge);
  bottom:11px;                 /* Mitte der 24px-Punkt-Box, sitzt am Boden */
  height:1px;
  background:var(--ns-line);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform var(--tl-line) var(--e-reveal);
}
.ns-tl.is-revealed .ns-tl__line{ transform:scaleX(1); }

/* Fuellstand ueber scaleX statt width: width animiert Layout, scaleX laeuft
   auf dem Compositor. Die volle Breite steht, der Faktor kommt aus dem JS. */
.ns-tl__fill{
  position:absolute;
  left:0; top:0;
  height:100%;
  width:100%;
  background:var(--ns-gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 520ms var(--e-glide);
}

/* Station als echter Button: Label oben, Punkt unten auf der Linie */
.ns-tl__station{
  flex:1 1 0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.85rem;
  padding:0 0.25rem;
  margin:0;
  background:none;
  border:0;
  cursor:pointer;
  color:inherit;
  font:inherit;
  opacity:0;
  -webkit-tap-highlight-color:transparent;
}
.ns-tl.is-revealed .ns-tl__station{
  animation:ns-tl-pop 320ms var(--e-reveal) both;
  animation-delay:calc(var(--i) * var(--tl-step));
}
/* Nach dem Reveal haelt eine Klasse den Endzustand, und die Animation gibt
   fill wieder frei (die Klasse setzt das JS bei animationend).

   Warum das noetig ist: fill:both haelt den Endzustand der Animation
   dauerhaft fest, und der schlaegt jede spaetere, nicht mit !important
   gesetzte Transform auf demselben Element. Nicht nur die Druckrueckmeldung
   waere still ausgefallen, sondern jede kuenftige Transform hier.
   Deshalb steht in dieser Regel bewusst KEIN transform: sobald die Animation
   weg ist, faellt das Element auf seine normale Transform zurueck und der
   Druck kann greifen. */
.ns-tl.is-revealed .ns-tl__station.is-shown{
  animation:none;
  opacity:1;
}
@keyframes ns-tl-pop{
  from{ opacity:0; transform:translateY(7px); }
  to{ opacity:1; transform:translateY(0); }
}

.ns-tl__labels{
  font-size:var(--fs-eyebrow);
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.2;
  text-align:center;
  color:var(--ns-text-faint);
  transition:color 240ms var(--e-glide);
}
.ns-tl__station[aria-selected="true"] .ns-tl__labels{ color:var(--ns-text); }
.ns-tl__label--short{ display:none; }

/* Punkt-Box gibt Ring und Fokus Platz, Mitte liegt am unteren Rand */
.ns-tl__dot{
  position:relative;
  width:24px; height:24px;
  display:grid;
  place-items:center;
}
/* Punkt in voller Groesse angelegt und im Ruhezustand heruntergeskaliert,
   statt width und height zu animieren: 10px * 0.8 = 8px, ohne Layout. */
.ns-tl__dot::before{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--ns-line-strong);
  box-sizing:border-box;
  transform:scale(0.8);
  transition:transform 240ms var(--e-glide),
             background-color 240ms var(--e-glide),
             border-color 240ms var(--e-glide);
}
.ns-tl__station[aria-selected="true"] .ns-tl__dot::before{
  transform:scale(1);
  background:var(--ns-gold);
  border-color:var(--ns-gold);
}
.ns-tl__dot::after{                 /* 1px Ring bei 6px Offset zum aktiven Punkt */
  content:"";
  position:absolute;
  inset:1px;
  border-radius:50%;
  border:1px solid var(--ns-gold);
  opacity:0;
  transition:opacity 240ms var(--e-glide);
}
.ns-tl__station[aria-selected="true"] .ns-tl__dot::after{ opacity:1; }

.ns-tl__station:focus-visible{ outline:none; }
.ns-tl__station:focus-visible .ns-tl__dot::after{
  opacity:1;
  inset:-3px;
  border-color:var(--ns-gold);
}

/* Karte: eine Textkarte, Hoehe animiert ueber grid-template-rows */
.ns-tl__cardwrap{
  display:grid;
  grid-template-rows:var(--tl-h, auto);
  justify-items:center;
  margin-block-start:var(--sp-l);
  transition:grid-template-rows 320ms var(--e-glide);
}
.ns-tl__card{
  overflow:hidden;
  min-height:0;
  max-width:620px;
  text-align:center;
}
.ns-tl__card:focus-visible{
  outline:1px solid var(--ns-gold);
  outline-offset:6px;
  border-radius:var(--r-md);
}
.ns-tl__text{
  color:var(--ns-text-muted);
  margin:0;
  /* will-change setzt das JS nur waehrend des Wechsels, siehe withWillChange. */
  transition:opacity 320ms var(--e-glide), transform 320ms var(--e-reveal);
}
.ns-tl__text.is-out{ opacity:0; transition:opacity 180ms var(--e-glide); }
.ns-tl__text.is-pre{ opacity:0; transform:translateY(12px); transition:none; }

@media (max-width:767px){
  .ns-tl__label--full{ display:none; }
  .ns-tl__label--short{ display:inline; }
  .ns-tl__labels{ letter-spacing:0.08em; }
  .ns-tl__station{ padding:0 0.1rem; gap:0.7rem; }
}

@media (prefers-reduced-motion:reduce){
  .ns-tl__line{ transition:none; transform:scaleX(1); }
  .ns-tl__fill{ transition:none; }
  .ns-tl__station,
  .ns-tl.is-revealed .ns-tl__station{ animation:none; opacity:1; }
  .ns-tl__cardwrap{ transition:none; }
  .ns-tl__text{ transition:opacity 150ms linear; }
  .ns-tl__text.is-pre{ transform:none; }
}


/* --- Klingenwechsel, Schrittliste ----------------------------------------- */

.ns-steps__stage{ aspect-ratio:1; background:var(--ns-surface-2); }

.ns-steps{ display:grid; gap:clamp(3rem, 12vh, 7rem); }
.ns-step{
  display:grid;
  grid-template-columns:3.5rem 1fr;
  gap:1.25rem;
  align-items:baseline;
  font-size:var(--fs-h3);
  font-family:var(--ns-font-display);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.25;
}

.ns-notice{
  border:1px solid var(--ns-line);
  border-radius:var(--r-md);
  padding:clamp(1.5rem, 3vw, 2.25rem);
}
/* Titel zu Text im Notice-Kasten, Komponenten-Flow. */
.ns-notice > * + *{ margin-block-start:var(--sp-2xs); }


/* --- Zubehoer-Kacheln ----------------------------------------------------- */

.ns-tiles{
  display:grid;
  gap:var(--sp-m);
  grid-template-columns:repeat(2, 1fr);
}
/* Bild, Titel, Preis in der Kachel, Komponenten-Flow. */
.ns-tile a{ display:block; }
.ns-tile a > * + *{ margin-block-start:var(--sp-xs); }


/* --- Pflichtangaben ------------------------------------------------------- */

.ns-legal{ padding-block:clamp(3rem, 6vw, 5rem); }
.ns-legal__list{
  font-size:var(--fs-small);
  line-height:1.7;
  color:var(--ns-text-faint);
  max-width:70ch;
}
.ns-legal__list li + li{ margin-block-start:var(--sp-3xs); }


/* --- Footer --------------------------------------------------------------- */

.ns-footer{ background:var(--ns-void); }
.ns-footer__grid{
  display:grid;
  gap:var(--sp-col);
  /* Spec: oben --sp-section, unten --sp-l. */
  padding-block:var(--sp-section) var(--sp-l);
}
.ns-footer__title{
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:0.24em;
  color:var(--ns-text-faint);
  /* Abstand Titel zu Liste kommt aus dem Flow der Spalte. */
}
.ns-footer__links li + li{ margin-block-start:var(--sp-xs); }
.ns-footer__links a{ font-size:var(--fs-small); }

/* Zahlungsarten monochrom, nicht in Originalfarben. */
.ns-pay{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
  align-items:center;
}
.ns-pay svg{
  width:38px;height:24px;
  stroke:var(--ns-text-faint);
  fill:none;
  stroke-width:1;
}

.ns-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  justify-content:space-between;
  padding-block:2rem;
  border-top:1px solid var(--ns-line);
  font-size:var(--fs-small);
  color:var(--ns-text-faint);
}

/* Sehr grosse, sehr dunkle Wortmarke, parallaxt minimal mit. */
.ns-footer__wordmark{
  overflow:hidden;
  line-height:0.78;
  padding-bottom:0.06em;
}
.ns-footer__wordmark span{
  display:block;
  font-family:var(--ns-font-display);
  font-weight:700;
  font-size:clamp(3.5rem, 17vw, 15rem);
  letter-spacing:-0.045em;
  color:var(--ns-surface-2);
  text-align:center;
  white-space:nowrap;
}


/* =============================================================================
   09  MOTION
   ============================================================================= */

/* --- 1  Standard-Reveal, Stagger ueber --i, maximal sechs Geschwister ----- */

.ns-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--t-reveal) var(--e-reveal),
             transform var(--t-reveal) var(--e-reveal);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.ns-reveal.is-in{ opacity:1; transform:none; }


/* --- 2  Zeilen-Reveal fuer Headlines -------------------------------------- */

.ns-lines .line-wrap{ display:block; overflow:hidden; }
.ns-lines .line{
  display:block;
  transform:translateY(110%);
  transition:transform var(--t-lines) var(--e-reveal);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.ns-lines.is-in .line{ transform:none; }


/* --- 3  Bildmaske, der Signature-Move ------------------------------------- */

.ns-mask{
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--t-draw) var(--e-reveal);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.ns-mask > img,
.ns-mask > .ns-img-missing{
  transform:scale(1.08);
  transition:transform var(--t-draw) var(--e-reveal);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.ns-mask.is-in{ clip-path:inset(0 0 0 0); }
.ns-mask.is-in > img,
.ns-mask.is-in > .ns-img-missing{ transform:none; }


/* --- 4  Hairline zeichnet sich -------------------------------------------- */

.ns-draw{
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-draw) var(--e-reveal);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.ns-draw.is-in{ transform:scaleX(1); }

/* Tabellen- und Listenzeilen zeichnen ihre Unterlinie einzeln. */
.ns-draw-row{ position:relative; border-bottom-color:transparent !important; }
.ns-draw-row::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--ns-line);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-draw) var(--e-reveal);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.ns-draw-row.is-in::after{ transform:scaleX(1); }


/* --- 5  Hero Ken Burns und atmender Glow ---------------------------------- */

.ns-kenburns{ animation:ns-kenburns 18s linear forwards; }
@keyframes ns-kenburns{
  from{ transform:scale(1.07); }
  to  { transform:scale(1); }
}

/* Das langsame Atmen des warmen Glows ist im Hero Absicht und Teil der
   urspruenglichen Vorgabe, es wird deshalb gedrosselt statt abgeschaltet:
   es laeuft nur, solange der Hero im Blick ist. Die beiden Final-Glows
   tragen die Klasse nicht mehr, dort stand das Atmen ohne Grund. */
.ns-breathe{ animation:none; }
.ns-breathe.is-inview{ animation:ns-breathe 8s ease-in-out infinite alternate; }
@keyframes ns-breathe{
  from{ opacity:0.10; }
  to  { opacity:0.16; }
}

/* Den Parallax-Versatz setzt das JS direkt als transform auf das Element.
   Frueher lief er ueber die Custom Property --py, die aber vererbt und damit
   pro Scroll-Frame die Styles aller Nachfahren ungueltig machte. */
.ns-parallax{ transform:translate3d(0, 0, 0); }


/* --- 8  Varianten-Crossfade ----------------------------------------------- */

.ns-crossfade{ position:relative; }
.ns-crossfade__layer{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.015);
  transition:opacity 520ms var(--e-swap), transform 520ms var(--e-swap);
}
.ns-crossfade__layer[data-active="true"]{ opacity:1; transform:none; }
.ns-crossfade__layer img,
.ns-crossfade__layer .ns-img-missing{ width:100%;height:100%;object-fit:cover; }


/* --- Schrittliste, aktiver Schritt in --ns-text --------------------------- */

.ns-step{
  color:var(--ns-text-faint);
  transition:color 400ms var(--e-swap);
}
.ns-step[data-active="true"]{ color:var(--ns-text); }


/* =============================================================================
   10  MEDIA QUERIES
   ============================================================================= */

@media (min-width:480px){
  .ns-split--sm-2{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width:768px){
  .ns-hotspot__label{ max-width:18rem; }
  .ns-footer__grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width:1024px){
  /* Kein Gutter-Override mehr noetig: --sp-gutter skaliert selbst per clamp. */

  .ns-split--5-7{ grid-template-columns:5fr 7fr; }
  .ns-split--7-5{ grid-template-columns:7fr 5fr; }
  .ns-split--1-1{ grid-template-columns:1fr 1fr; }

  /* Sticky-Textspalte: Headerhoehe plus Luft, nicht als feste Pixelzahl. */
  .ns-sticky{ position:sticky; top:calc(var(--sp-xl) + 72px); }

  /* Die Galerie faehrt beim Scrollen mit und beginnt oben auf einer Linie mit
     dem Buybox-Kopf (Eyebrow "Rasierhobel"). Der Sticky-Wert liegt bewusst
     UNTER der natuerlichen Startposition der Spalte (rund 126px): laege er
     darueber, wie der Buybox-Wert von 160px, klemmt Sticky die Galerie sofort
     nach unten, weil ihre natuerliche Position schon oberhalb der Grenze
     liegt (die Buybox-Spalte ist als laengste Spalte nicht klemmbar und bleibt
     oben, die kuerzere Galerie nicht). 6rem ist zugleich groesser als die
     81px Header-Hoehe, das Bild verschwindet also beim Kleben nicht dahinter.
     align-self:start, sonst streckt die Rasterzelle das Element und Sticky
     liefe ins Leere. */
  .ns-pdp .ns-gallery{
    position:sticky;
    top:6rem;
    align-self:start;
  }

  /* Ab hier greifen die Sticky-Konstruktionen und die echten Hotspots. */
  .ns-burger{ display:none; }
  .ns-navoverlay{ display:none; }

  .ns-variants{ min-height:170vh; }
  .ns-variants__stage{
    position:sticky;
    top:0;
    min-height:100vh;
    display:grid;
    align-items:center;
    grid-template-columns:5fr 7fr;
    gap:var(--sp-col);
  }

  .ns-anatomy__spots{ display:block; }
  .ns-anatomy__list{ display:none; }

  .ns-tiles{ grid-template-columns:repeat(4, 1fr); }

  .ns-footer__grid{ grid-template-columns:repeat(4, 1fr); }
}

@media (max-width:1023px){
  /* Mobile: Hauptnavigation liegt im Overlay, Sticky-Konstruktionen sind Fluss. */
  .ns-nav{ display:none; }
  .ns-variants__stage > * + *{ margin-block-start:var(--sp-l); }
}

/* Gruppenabstand auf Mobile halbieren, sonst wirkt es leer. Nur --sp-xl,
   die anderen Tokens bleiben konstant, Gutter/Section/Col skalieren per clamp. */
@media (max-width:767px){
  :root{ --sp-xl:3.5rem; }

  /* Thumb-Leiste: 4,5 sichtbar, der halbe zeigt, dass es weitergeht. */
  .ns-gallery__thumb{ flex-basis:calc((100% - 3.5 * var(--sp-xs)) / 4.5); }
}

@media (min-width:1440px){
  :root{ --fs-body:1.0625rem; }
}

/* Auf Touch Hotspot-Labels nur ueber aria-expanded, nicht ueber Hover. */
@media (hover:none){
  .ns-hotspot:hover .ns-hotspot__label{ opacity:0; visibility:hidden; }
}

/* --- Reduced Motion: alle Transforms aus, nur kurze Fades ----------------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:200ms !important;
    transition-delay:0ms !important;
  }

  .ns-reveal,
  .ns-lines .line,
  .ns-mask,
  .ns-mask > img,
  .ns-draw,
  .ns-crossfade__layer,
  .ns-parallax{
    transform:none !important;
    clip-path:none !important;
  }
  .ns-draw-row::after{ transform:scaleX(1) !important; }
  .ns-reveal{ opacity:0; transition:opacity 200ms linear; }
  .ns-reveal.is-in{ opacity:1; }
  .ns-lines .line{ transition:none; }

  .ns-kenburns,
  .ns-breathe,
  .ns-marquee__track,
  .ns-cue::after,
  .ns-hotspot::after,
  /* Ticker: kein Autoplay, deshalb auch keine laufende Fortschritts-Hairline.
     Ohne diese Zeile taktete die global gekuerzte Animation den Wechsel. */
  .ns-ticker__progress{ animation:none !important; }

  /* Reduced motion: den rotierenden Ticker nicht auf Zeile 1 stehen lassen,
     sondern die ohnehin vorhandene Volltext-Liste statisch zeigen. Alle Fakten
     sichtbar, keine Bewegung. */
  .ns-ticker__anim{ display:none; }
  .ns-ticker > .ns-visually-hidden{
    position:static; width:auto; height:auto; margin:0; padding:0;
    overflow:visible; clip:auto; white-space:normal;
    display:grid; gap:var(--sp-2xs); color:var(--ns-text-muted);
  }

  /* Zwei Flaechen fuhren bisher auch hier ihre volle Eigenhoehe: die Sticky
     Buy Bar und die Menuepunkte im Overlay. Sie standen in keiner der
     transform:none-Listen oben, weil sie nicht zur Reveal-Familie gehoeren.

     Reduziert heisst sanfter, nicht weg: beide muessen weiterhin erscheinen,
     nur ohne Weg. Die Buy Bar blendet auf statt einzufahren, pointer-events
     schaltet hart mit, damit die unsichtbare Leiste keine Klicks abfaengt. */
  .ns-buybar{
    transform:none;
    opacity:0;
    pointer-events:none;
    transition:opacity 200ms linear;
  }
  .ns-buybar[data-visible="true"]{ opacity:1; pointer-events:auto; }

  /* Das Overlay selbst blendet ohnehin auf, die Punkte brauchen keinen Weg. */
  .ns-navoverlay__list a{ transform:none; }

  /* Hotspot-Label und seine Linie erscheinen, ohne zu skalieren oder zu
     wachsen. Die Deckkraft traegt den Uebergang, die Linie steht sofort. */
  .ns-hotspot__label{ transform:translateY(-50%) !important; }
  .ns-hotspot__label::before{ transform:none !important; }

  /* Der Druck bleibt bewusst aktiv (kein vestibulaerer Weg), aber die neuen
     Hover-Bewegungen (CTA-Hub, Swatch-Lift) wandern hier nicht. Farbe,
     Rahmen und Glanzkante bleiben als Rueckmeldung erhalten. */
  .ns-btn--cta:hover{ transform:none; }
  .ns-swatch:hover{ transform:none; }
}


/* =============================================================================
   11  PERFORMANCE-SCHALTER, nur fuer die Diagnose

   Werden vom Panel in assets/js/perf-panel.js auf <html> gesetzt.
   Gehoeren NICHT in den Theme-Port. Sie kosten nichts, solange die Klassen
   nicht gesetzt sind, und erlauben es, jede Motion-Schicht im echten Browser
   einzeln abzuschalten, ohne neu zu laden.
   ============================================================================= */

html.perf-no-grain .ns-grain{ display:none !important; }

html.perf-no-blur .ns-header[data-scrolled="true"],
html.perf-no-blur .ns-buybar[data-visible="true"]{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:rgba(18,18,18,0.96) !important;  /* hoehere Deckkraft statt Blur */
}

html.perf-no-parallax .ns-parallax{ transform:none !important; }

html.perf-no-kenburns .ns-kenburns,
html.perf-no-kenburns .ns-breathe{ animation:none !important; }

html.perf-no-glow .ns-glow{ display:none !important; }

/* Section-Reveal + Stagger abschaltbar zum Messen. Die Utility, die M1, M2 und
   die uebrigen Sections benutzen, laeuft ueber .ns-reveal (ein IntersectionObserver,
   nur transform/opacity). Aus = sofort sichtbar, keine Transition. */
html.perf-no-reveal .ns-reveal,
html.perf-no-reveal .ns-lines .line,
html.perf-no-reveal .ns-draw-row{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

.perf-panel{
  position:fixed;
  right:12px; bottom:12px;
  z-index:9999;
  padding:0.9rem 1rem;
  background:rgba(11,11,11,0.94);
  border:1px solid var(--ns-line-strong);
  border-radius:var(--r-md);
  font:12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  color:var(--ns-text-muted);
  min-width:210px;
}
.perf-panel h2{ font:inherit; color:var(--ns-gold); margin:0 0 0.6rem; letter-spacing:0.1em; }
.perf-panel label{ display:flex; gap:0.5rem; align-items:center; cursor:pointer; padding:2px 0; }
.perf-panel input{ accent-color:var(--ns-gold); }
.perf-panel__fps{ margin-top:0.6rem; padding-top:0.6rem; border-top:1px solid var(--ns-line); color:var(--ns-text); }


/* =============================================================================
   12  DEMO-INHALTE, nur Prototyp

   Wird von assets/js/nordshave-demo.js mit ?demo eingehaengt. Gehoert NICHT
   in den Theme-Port. Monogramm-Kreise statt Fotos, fuers Layout gleich gross.
   ============================================================================= */

.ns-voices__head{
  display:flex;
  align-items:center;
  gap:0.9rem;
  padding-bottom:1.75rem;
  border-bottom:1px solid var(--ns-line);
}
.ns-voices__list{
  display:grid;
  gap:2.5rem;
  margin-top:2.5rem;
}
@media (min-width:768px){
  .ns-voices__list{ grid-template-columns:repeat(3, 1fr); gap:3rem; }
}
.ns-voice{
  display:flex;
  align-items:center;
  gap:0.9rem;
}
/* Monogramm-Kreis, Maße wie ein Portraitfoto. */
.ns-voice__mono{
  flex:0 0 auto;
  width:40px; height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ns-surface-2);
  border:1px solid var(--ns-gold);
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:0.8125rem;
  color:var(--ns-gold-light);
}


/* =============================================================================
   STIMMEN, Bewertungssektion (Produktseite, id=stimmen) und die zwei
   Inline-Zeilen (Buybox, Final-CTA). Mauerwerk statt Karussell, Hairline-Boxen,
   zurueckhaltende Sterne, Monogramm-Kreise. Der Schnitt sitzt als grosse
   Goldzahl im Kopf. Neue Klassen, die alten .ns-voice-Regeln bleiben unberuehrt.
   ============================================================================= */

/* Kopf: Eyebrow und H2 links, Schnitt rechts, unten buendig. */
.ns-stimmen__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--sp-m);
  flex-wrap:wrap;
}
.ns-schnitt{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1;
  text-align:right;
}
.ns-schnitt:empty{ display:none; }   /* ohne Demo kein leerer, schiefer Kopf */
.ns-schnitt__num{
  font-family:var(--ns-font-display);
  font-weight:700;
  font-size:clamp(2.5rem, 5vw, 3.75rem);
  color:var(--ns-gold);
}
.ns-schnitt__count{
  margin-top:0.4rem;
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ns-text-faint);
}

/* Mauerwerk: zwei Spalten, unterschiedliche Hoehen, Boxen brechen nicht um. */
.ns-stimmen{
  columns:2;
  column-gap:var(--sp-s);
}
.ns-stimme{
  break-inside:avoid;
  margin:0 0 var(--sp-s);
  padding:var(--sp-m);
  border:1px solid var(--ns-line);
  border-radius:var(--r-md);
}
.ns-stimme__stars{
  display:inline-flex;
  gap:2px;
  font-size:12px;
  line-height:1;
  color:var(--ns-gold);
}
.ns-stimme__stars .is-off{ color:var(--ns-line-strong); }
.ns-stimme__text{
  margin-top:0.9rem;
  color:var(--ns-text);
}
.ns-stimme__by{
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-top:1.5rem;
}
.ns-stimme__mono{
  flex:0 0 auto;
  width:32px; height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ns-surface-2);
  border:1px solid var(--ns-gold);
  font-family:var(--ns-font-display);
  font-weight:600;
  font-size:0.75rem;
  color:var(--ns-gold-light);
}
.ns-stimme__name{
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ns-text-faint);
}

/* Leerzustand ohne ?demo: eine Hairline-Box ueber die volle Breite, kein
   Mangel-Ton ("noch keine Bewertungen"), sondern ein Ausblick. */
.ns-stimmen__empty{
  column-span:all;
  margin:0;
  padding:var(--sp-m);
  border:1px solid var(--ns-line);
  border-radius:var(--r-md);
  color:var(--ns-text-faint);
  max-width:52ch;
}

/* Inline-Bewertungszeile: Buybox unter der H1 und unter dem Final-CTA. */
.ns-inline-rating{
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.ns-inline-rating__text{
  font-size:0.8125rem;
  letter-spacing:0.06em;
  color:var(--ns-text-faint);
}
.ns-final-rating{ justify-content:center; }

/* Pflichtangabe unter dem Schnitt, zurueckhaltend. */
.ns-stimmen__disclosure{
  margin:1rem 0 0;
  font-size:0.75rem;
  color:var(--ns-text-faint);
  max-width:60ch;
}

/* Tabellen-Caption: benennt die Technik-Tabelle, links, zurueckhaltend. */
.ns-table__caption{
  caption-side:top;
  text-align:left;
  font-size:0.8125rem;
  letter-spacing:0.06em;
  color:var(--ns-text-faint);
  padding-bottom:0.6rem;
}

/* Mobil: eine Spalte, Kopf linksbuendig. */
@media (max-width:767px){
  .ns-stimmen{ columns:1; }
  .ns-stimmen__head{ align-items:flex-start; }
  .ns-schnitt{ align-items:flex-start; text-align:left; }