/* NORDIX — Plakative Fassung des Kopfbereichs
   Menü und Buttons wechseln aus der Mono-Welt (Messgeräte-Etikett) in die
   Welt der Headline (Barlow Condensed, fett, Versalien). Mono bleibt für das,
   wofür es gedacht war: Messwerte, Sektionskennungen, Bildunterschriften. */

/* Die beiden Textfarben, die hier frueher ueberschrieben wurden
   (--ink-2, --ink-3), stehen seit dem 23.08.2026 direkt in tokens.css.
   Eine Basis, die nie ausgeliefert wird, ist eine Falle beim Nachmessen. */

/* ---------- Beschriftung beider Buttons ---------- */
.cta-a .lab{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(19px,1.8vw,25px);
  letter-spacing:.03em;
  right:24px;
}
.cta-a.mini .lab{
  font-size:clamp(16px,1.5vw,21px);
  letter-spacing:.03em;
  right:16px;
}

/* Körpermaße: Condensed baut schmaler, die Pfeile brauchen dafür mehr Raum */
/* 312px reichten nicht: Im Hover wachsen die drei Pfeile auf 28px und endeten
   12px INNERHALB der Beschriftung. Gemessen, nicht geschätzt. */
.cta-a{min-width:372px}
.cta-a.mini{min-width:218px}

/* ---------- Pfeile ---------- */
/* Ruhezustand zeigt genau einen Pfeil; die beiden weiteren liegen hinter der
   Kante des Akzentfelds und kommen erst beim Aufziehen zum Vorschein. */
.cta-a .wave{gap:12px;transform-origin:left center;
  transition:transform .26s cubic-bezier(.65,0,.35,1)}
.cta-a .wave svg{width:var(--cta-pfeil);height:auto}
.cta-a:hover .wave,.cta-a:focus-visible .wave{transform:scale(1.16)}

.cta-a.mini .wave{gap:0}
/* Nur noch die Pfeilbreite setzen — die Ruhebreite des Akzentfelds rechnet
   cta.css daraus aus, damit im Ruhezustand genau ein Pfeil zu sehen ist. */
.cta-a.mini:hover .wave,.cta-a.mini:focus-visible .wave{transform:scale(1.14)}

/* ---------- Punkte in der Handy-Tafel ---------- */
.navpanel a.item{
  font-family:var(--font-display);
  font-weight:600;
  font-size:21px;
  letter-spacing:.02em;
  height:56px;
}

/* ---------- Enger werdende Fenster ---------- */
@media(max-width:1240px){
  .cta-a.mini{min-width:196px}
  .cta-a.mini .lab{right:14px}
}
@media(max-width:1100px){
  .cta-a.mini{min-width:180px;--cta-h:42px;--cta-pfeil:17px}
}
@media(max-width:860px){
  .cta-a.mini{--cta-h:40px;--cta-pfeil:16px;min-width:164px}
  .cta-a.mini .lab{font-size:15px;right:12px}
}
@media(max-width:560px){
  .cta-a{min-width:0}
  .cta-a .lab{font-size:19px}
}

/* ---------- Beweis-Sektion ---------- */
/* Die zitierte Formulierung ist der Gegenspieler der Marke — sie bekommt die
   Signalfarbe, damit der Widerspruch im Satz sofort sichtbar wird. */
h2 span{color:var(--orange)}

/* ---------- Porträt ---------- */
/* 18px: gleiche Handschrift wie die Buttons (12px) und die Karten, nur eine
   Stufe weicher, weil die Fläche größer ist. Deutlich weich, ohne verspielt
   zu wirken — die Marke bleibt technisch. */
.portrait{border-radius:18px;overflow:hidden}