/* ==========================================================================
   NUIT NOIRE INTERNATIONAL — components.css
   Gemeinsam genutzte Bausteine für Gate und privaten Bereich.
   Setzt tokens.css und base.css voraus.

   Grundsätze: keine Schlagschatten, keine Radien, keine Flächen —
   nur Haarlinien, Weißraum und sehr leise Zustandswechsel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Wortmarke
   Negatives Ende-Margin gleicht die Laufweite hinter dem letzten Zeichen aus,
   damit die Marke links bündig sitzt und zentriert optisch mittig steht.
   -------------------------------------------------------------------------- */

.nni-mark {
  display: inline-block;
  font-family: var(--nni-serif);
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-eyebrow);
  margin-inline-end: calc(-1 * var(--nni-ls-eyebrow));
  color: var(--nni-cream);
  text-decoration: none;
  transition: color var(--nni-t-fast) var(--nni-ease-soft),
              opacity var(--nni-t-fast) var(--nni-ease-soft);
}

.nni-mark--sm {
  font-size: clamp(.82rem, .9vw, .92rem);
  letter-spacing: var(--nni-ls-fine);
  margin-inline-end: calc(-1 * var(--nni-ls-fine));
}

@media (hover: hover) {
  a.nni-mark:hover { opacity: .68; }
}

/* --------------------------------------------------------------------------
   2. Eyebrow
   -------------------------------------------------------------------------- */

.nni-eyebrow {
  display: block;
  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-xs);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-eyebrow);
  margin-inline-end: calc(-1 * var(--nni-ls-eyebrow));
  color: var(--nni-muted);
}

/* --------------------------------------------------------------------------
   3. Display-Headline
   -------------------------------------------------------------------------- */

.nni-display {
  font-family: var(--nni-serif);
  font-weight: 300;
  font-size: var(--nni-fs-4xl);
  line-height: var(--nni-lh-display);
  letter-spacing: var(--nni-ls-display);
  color: var(--nni-cream);
  text-wrap: balance;
}

.nni-display--sm {
  font-size: var(--nni-fs-3xl);
  line-height: 1.02;
}

.nni-display--xs {
  font-size: var(--nni-fs-2xl);
  line-height: var(--nni-lh-tight);
  letter-spacing: -.01em;
}

.nni-display em,
.nni-display i {
  font-style: italic;
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   4. Lede
   -------------------------------------------------------------------------- */

.nni-lede {
  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-md);
  line-height: 1.78;
  letter-spacing: var(--nni-ls-body);
  color: var(--nni-cream-soft);
  max-width: min(var(--nni-max-text), 54ch);
}

/* --------------------------------------------------------------------------
   5. Haarlinie
   -------------------------------------------------------------------------- */

.nni-rule {
  display: block;
  width: 100%;
  height: var(--nni-hair);
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--nni-line) 9%,
    var(--nni-line) 91%,
    transparent 100%
  );
}

/* --------------------------------------------------------------------------
   6. Label
   -------------------------------------------------------------------------- */

.nni-label {
  display: block;
  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-micro);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-fine);
  margin-inline-end: calc(-1 * var(--nni-ls-fine));
  color: var(--nni-muted);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.nni-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.95rem;
  padding: .95em 2.1em;
  border: var(--nni-hair) solid transparent;
  background: transparent;
  color: var(--nni-cream);

  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-ui);
  text-indent: var(--nni-ls-ui);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    color var(--nni-t-fast) var(--nni-ease-soft),
    border-color var(--nni-t-fast) var(--nni-ease-soft),
    background-color var(--nni-t-fast) var(--nni-ease-soft),
    opacity var(--nni-t-fast) var(--nni-ease-soft),
    transform var(--nni-t-fast) var(--nni-ease);
}

.nni-btn:focus-visible {
  outline: var(--nni-hair) solid var(--nni-cream);
  outline-offset: 3px;
}

.nni-btn:active { transform: translateY(1px); }

/* Linien-Button — der leise Standard */
.nni-btn--line {
  border-color: var(--nni-line);
  color: var(--nni-cream-soft);
}

@media (hover: hover) {
  .nni-btn--line:hover {
    border-color: var(--nni-cream);
    background-color: var(--nni-ink);
    color: var(--nni-cream);
  }
}

/* Massiver Button — dreht sich beim Hover zur Linie zurück */
.nni-btn--solid {
  border-color: var(--nni-cream);
  background-color: var(--nni-cream);
  color: var(--nni-black);
}

@media (hover: hover) {
  .nni-btn--solid:hover {
    background-color: transparent;
    color: var(--nni-cream);
  }
}

.nni-btn:disabled,
.nni-btn[aria-disabled="true"],
.nni-btn.is-disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
}

@media (hover: hover) {
  .nni-btn:disabled:hover,
  .nni-btn[aria-disabled="true"]:hover,
  .nni-btn.is-disabled:hover {
    border-color: var(--nni-line);
    background-color: transparent;
    color: var(--nni-cream-soft);
  }

  .nni-btn--solid:disabled:hover,
  .nni-btn--solid[aria-disabled="true"]:hover,
  .nni-btn--solid.is-disabled:hover {
    border-color: var(--nni-cream);
    background-color: var(--nni-cream);
    color: var(--nni-black);
  }
}

/* --------------------------------------------------------------------------
   8. Textlink mit feiner Unterlinie
   Ruhezustand: Haarlinie. Hover: eine zweite, helle Linie zieht durch.
   -------------------------------------------------------------------------- */

/* --nnil-pad vergroessert die Antippflaeche, ohne die Haarlinie vom Text zu
   loesen: die beiden Pseudo-Elemente sitzen auf demselben Wert und wandern
   mit. Am Zeiger bleibt sie 0 — dort aendert sich nichts. */
.nni-link {
  --nnil-pad: 0px;

  position: relative;
  display: inline-block;
  padding: calc(.25em + var(--nnil-pad)) 0;
  border: 0;
  background: none;

  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-xs);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-ui);
  margin-inline-end: calc(-1 * var(--nni-ls-ui));
  text-decoration: none;
  color: var(--nni-muted);

  cursor: pointer;
  transition: color var(--nni-t-fast) var(--nni-ease-soft);
}

.nni-link::before,
.nni-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--nnil-pad);
  height: var(--nni-hair);
  width: calc(100% - var(--nni-ls-ui));
  pointer-events: none;
}

.nni-link::before { background: var(--nni-line); }

.nni-link::after {
  background: var(--nni-cream);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--nni-t-med) var(--nni-ease);
}

/* Am Finger sind es 44 px. Gemessen wurden im Salon vier Zeilen mit 34 px
   Hoehe, darunter „Close the salon on this device" — der Notausschalter des
   Hauses, und genau der muss sich mit dem Daumen sicher treffen lassen. */
@media (pointer: coarse) {
  .nni-link { --nnil-pad: 9px; }
}

@media (hover: hover) {
  .nni-link:hover { color: var(--nni-cream); }

  .nni-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

.nni-link:focus-visible { color: var(--nni-cream); }

.nni-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   9. Siegel — Kreis mit Punkt, sehr langsamer Atem
   -------------------------------------------------------------------------- */

.nni-seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border: var(--nni-hair) solid var(--nni-line);
  border-radius: 50%;
  flex: none;
}

.nni-seal > i {
  display: block;
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: var(--nni-bronze);
  animation: nni-seal-dot 5.6s var(--nni-ease-soft) infinite;
}

.nni-seal::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: var(--nni-hair) solid var(--nni-cream);
  border-radius: 50%;
  opacity: 0;
  animation: nni-seal-ring 5.6s var(--nni-ease-soft) infinite;
  pointer-events: none;
}

@keyframes nni-seal-ring {
  0%   { transform: scale(1);    opacity: .20; }
  60%  { transform: scale(1.26); opacity: 0; }
  100% { transform: scale(1.26); opacity: 0; }
}

@keyframes nni-seal-dot {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nni-seal > i { animation: none !important; opacity: .8 !important; }
  .nni-seal::after { animation: none !important; opacity: 0 !important; }
}

/* --------------------------------------------------------------------------
   10. Figur / Platzhalterfläche
   Seitenverhältnis über --nni-ratio steuerbar, z. B. style="--nni-ratio:3/2".
   -------------------------------------------------------------------------- */

.nni-figure {
  position: relative;
  margin: 0;
}

.nni-figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.nni-figure figcaption {
  margin-block-start: var(--nni-sp-3);
  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-fine);
  margin-inline-end: calc(-1 * var(--nni-ls-fine));
  color: var(--nni-muted);
}

.nni-figure__ph {
  --nni-ratio: 4 / 5;
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: var(--nni-ratio);
  overflow: hidden;
  border: var(--nni-hair) solid var(--nni-line-soft);
  background-image:
    radial-gradient(110% 70% at 50% -10%, rgba(232, 224, 213, .055), transparent 62%),
    linear-gradient(168deg, var(--nni-surface) 0%, var(--nni-ink) 44%, var(--nni-black) 100%);
}

.nni-figure__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 120%, rgba(5, 5, 5, .7), transparent 60%);
  pointer-events: none;
}

.nni-figure__ph > img {
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   11. Karte
   -------------------------------------------------------------------------- */

.nni-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nni-sp-3);
  padding: var(--nni-sp-5) var(--nni-sp-5) var(--nni-sp-6);
  border: var(--nni-hair) solid var(--nni-line-soft);
  background-color: transparent;
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--nni-t-med) var(--nni-ease-soft),
    background-color var(--nni-t-med) var(--nni-ease-soft);
}

.nni-card > .nni-figure,
.nni-card > .nni-figure__ph {
  margin-block-end: var(--nni-sp-2);
}

.nni-card__idx {
  display: block;
  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-micro);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-fine);
  margin-inline-end: calc(-1 * var(--nni-ls-fine));
  font-variant-numeric: tabular-nums;
  color: var(--nni-faint);
  transition: color var(--nni-t-med) var(--nni-ease-soft);
}

.nni-card__title {
  font-family: var(--nni-serif);
  font-weight: 300;
  font-size: var(--nni-fs-xl);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--nni-cream);
  text-wrap: balance;
}

.nni-card__title a {
  color: inherit;
  text-decoration: none;
}

.nni-card__text {
  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-sm);
  line-height: 1.8;
  color: var(--nni-cream-soft);
  max-width: 44ch;
}

.nni-card__more {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  margin-block-start: auto;
  padding-block-start: var(--nni-sp-2);
  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-micro);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-fine);
  text-decoration: none;
  color: var(--nni-muted);
  transition: color var(--nni-t-med) var(--nni-ease-soft);
}

.nni-card__more::after {
  content: "";
  inline-size: 2.1em;
  block-size: var(--nni-hair);
  background: currentColor;
  opacity: .55;
  transition:
    inline-size var(--nni-t-med) var(--nni-ease),
    opacity var(--nni-t-med) var(--nni-ease-soft);
}

.nni-card:focus-within {
  border-color: var(--nni-line);
  background-color: var(--nni-ink);
}

@media (hover: hover) {
  .nni-card:hover {
    border-color: var(--nni-line);
    background-color: var(--nni-ink);
  }

  .nni-card:hover .nni-card__idx { color: var(--nni-muted); }

  .nni-card:hover .nni-card__more { color: var(--nni-cream); }

  .nni-card:hover .nni-card__more::after {
    inline-size: 3.3em;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   12. Zitat
   -------------------------------------------------------------------------- */

.nni-quote {
  position: relative;
  margin: 0;
  padding-block-start: var(--nni-sp-5);
  font-family: var(--nni-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--nni-fs-xl);
  line-height: 1.32;
  letter-spacing: -.008em;
  color: var(--nni-cream);
  max-width: 32ch;
  text-wrap: pretty;
}

.nni-quote::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 56px;
  block-size: var(--nni-hair);
  background: var(--nni-line);
}

.nni-quote p { margin: 0; }

/* Die Namenszeile unter einem Zitat gibt die Vorlage als
   <figcaption class="nni-quote__by"> aus, nicht als <cite> oder <footer>.
   Sie fiel deshalb durch diese Regel hindurch und erbte die Zitatschrift:
   auf dem Telefon stand der Name in rund 24px kursiver Serife, ebenso gross
   und ebenso gesetzt wie das Zitat darüber — die Sektion las sich wie vier
   Zitate statt zwei. Beide Schreibweisen sind jetzt aufgeführt.

   Der Boden von 12px kommt dazu, weil --nni-fs-micro auf schmalen Geräten
   bis 11,52px hinunterläuft (360 und 390px) und die Vorgabe für
   Beschriftungen 12px verlangt. Über max() bleibt die Skala nach oben hin
   unangetastet; am Schreibtisch ändert sich nichts. */
.nni-quote cite,
.nni-quote footer,
.nni-quote figcaption,
.nni-quote__by {
  display: block;
  margin-block-start: var(--nni-sp-4);
  font-family: var(--nni-sans);
  font-style: normal;
  font-weight: 300;
  font-size: max(12px, var(--nni-fs-micro));
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-fine);
  margin-inline-end: calc(-1 * var(--nni-ls-fine));
  color: var(--nni-muted);
}

/* --------------------------------------------------------------------------
   13. Fakten
   Funktioniert mit <div class="nni-facts__row"><span>…</span><span>…</span></div>
   ebenso wie mit <dl class="nni-facts"><dt>…</dt><dd>…</dd></dl>.
   -------------------------------------------------------------------------- */

.nni-facts {
  border-block-start: var(--nni-hair) solid var(--nni-line-soft);
  max-width: var(--nni-max-text);
}

.nni-facts__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nni-sp-1);
  padding-block: var(--nni-sp-3);
  border-block-end: var(--nni-hair) solid var(--nni-line-soft);
}

.nni-facts__row > :first-child,
.nni-facts > dt {
  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-micro);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: var(--nni-ls-fine);
  margin-inline-end: calc(-1 * var(--nni-ls-fine));
  color: var(--nni-muted);
}

.nni-facts__row > :last-child,
.nni-facts > dd {
  font-family: var(--nni-sans);
  font-weight: 300;
  font-size: var(--nni-fs-sm);
  line-height: 1.7;
  color: var(--nni-cream);
}

.nni-facts > dt {
  padding-block-start: var(--nni-sp-3);
}

.nni-facts > dd {
  padding-block-end: var(--nni-sp-3);
  border-block-end: var(--nni-hair) solid var(--nni-line-soft);
}

@media (min-width: 48em) {
  .nni-facts__row {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: var(--nni-sp-4);
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   14. Raster
   .nni-grid  — 12 Spalten, Kinder ohne eigene Angabe verhalten sich sinnvoll
   .nni-grid--2 / --3 — gleichbreite Spalten
   -------------------------------------------------------------------------- */

.nni-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--nni-gap);
  row-gap: var(--nni-sp-7);
}

.nni-grid > * { grid-column: 1 / -1; }

@media (min-width: 48em) {
  .nni-grid > * { grid-column: span 6; }
}

@media (min-width: 64em) {
  .nni-grid > * { grid-column: span 4; }
}

.nni-grid--2,
.nni-grid--3 {
  grid-template-columns: minmax(0, 1fr);
}

.nni-grid--2 > *,
.nni-grid--3 > * {
  grid-column: auto;
}

@media (min-width: 48em) {
  .nni-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nni-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .nni-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   15. Schlussruf
   -------------------------------------------------------------------------- */

.nni-cta {
  display: grid;
  justify-items: center;
  gap: var(--nni-sp-4);
  padding-block: var(--nni-sp-10);
  border-block-start: var(--nni-hair) solid var(--nni-line-soft);
  text-align: center;
}

.nni-cta > .nni-lede,
.nni-cta > p {
  margin-inline: auto;
  max-width: min(var(--nni-max-text), 48ch);
}

.nni-cta > .nni-btn {
  margin-block-start: var(--nni-sp-3);
}

.nni-cta > .nni-seal {
  margin-block-end: var(--nni-sp-2);
}