/* ============================================================
   digitalantrieb / 04 - CHROME
   Navigation, Fullscreen-Menue, Cursor, Schwungrad.
   Der Loader ist entfallen: die Seite beginnt sichtbar, die
   Eroeffnung laeuft auf dem Inhalt. Siehe modules/intro.js.
   ============================================================ */

/* ------------------------------------------------------------
   DIE MARKE
   Eine Ligatur: der Bauch des d und der Bauch des a beruehren
   denselben Schaft und verschmelzen dadurch zu einer Form. Der
   Schaft steht in Signalfarbe, weil er die Achse ist, die sich
   durch das ganze Dokument zieht.
   ------------------------------------------------------------ */
.mark circle,
.mark line {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

/* Das d steht vollstaendig in Signalfarbe: der Bauch links und
   der gemeinsame Schaft. Das a bleibt in der Textfarbe.
   Vorher trug nur der Schaft die Farbe - das las sich als
   Trennstrich zwischen zwei Buchstaben statt als Teil des d. */
.mark .mark__d,
.mark .mark__axis { stroke: var(--signal); }

/* ------------------------------------------------------------
   NAVIGATION
   Eine Zeile, 72px. Logo links, Schwungrad und Menue rechts.
   Die Farbe kommt aus der Buehne darunter, siehe modules/chrome.js.
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 72px;
  padding-inline: var(--gutter);
  color: var(--chrome);
  transition: color 0.55s var(--e-in-out);
}
/* Scroll-Kante statt Trennlinie: ein weicher Verlauf in der
   Buehnenfarbe haelt die Navigation lesbar, auch wenn grosse
   Typografie darunter durchlaeuft. Keine Leiste, keine Kante. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--chrome-bg) 0%,
    color-mix(in srgb, var(--chrome-bg) 62%, transparent) 42%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.45s var(--e-out), background-image 0.55s var(--e-in-out);
}
html[data-scrolled] .nav::before { opacity: 0.92; }
html[data-menu="open"] .nav::before { opacity: 0; }

/* Solange das Menue offen ist, liegt die Kopfzeile darueber.

   Das war ein echter Fehler, kein Feinschliff: Das Menue
   reserviert mit seinem oberen Innenabstand genau die 72 Pixel
   der Kopfzeile - gemeint war also immer, dass sie sichtbar
   bleibt. Die Stapelreihenfolge sagte das Gegenteil. --z-menu
   (70) liegt ueber --z-nav (60), und damit lag die Flaeche des
   Vollbildmenues ueber dem Schliessen-Knopf. Der Knopf war zu
   sehen, nahm aber keinen Klick an: Schliessen ging nur mit ESC
   oder ueber einen Menuepunkt. Geprueft mit elementFromPoint -
   unter dem Zeiger lag ".menu is-open", nicht der Knopf. */
html[data-menu="open"] .nav { z-index: calc(var(--z-menu) + 1); }

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
/* will-change, weil dieses Zeichen beim Seitenaufruf ueber
   den ganzen Bildschirm fliegt. Ohne eigene Ebene rechnet der
   Browser bei jedem Frame das Layout darunter neu. */
/* 44 statt 38 Pixel. Die Navigationszeile ist 72 Pixel hoch;
   groesser wuerde das Zeichen anfangen, sie auszufuellen. */
.nav__mark { width: var(--mark-breite); overflow: visible; will-change: transform; }
.nav__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  text-transform: lowercase;
}

/* Im ausgeschriebenen Wort traegt "digital" dieselbe Farbe wie
   das d im Zeichen. Zeichen und Wortmarke sagen damit dasselbe,
   nur einmal als Form und einmal als Schrift. */
.marke-d { color: var(--signal); }
@media (max-width: 560px) { .nav__word { display: none; } }

.nav__right { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); }

/* Der kurze Weg zur Anfrage, immer sichtbar.

   Frueher eine Zeile mit blasser Hairline. Das war hoeflich und
   unsichtbar: Auf einem dunklen Foto verschwindet ein Rahmen
   mit 40 Prozent Deckkraft, und damit verschwindet die einzige
   Handlung, die diese Seite verkauft. Jetzt steht der Knopf in
   Signalfarbe - derselbe Ton wie der Knopf im Bild darunter,
   wie die Preise und wie die Achse.

   Auf schmalen Geraeten uebernimmt das Menue. */
/* Groesser als die uebrige Auszeichnungsschrift: --t-meta sind
   elf Pixel. Elf Pixel in Versalien, ueber einem Foto, sind
   lesbar, aber sie sehen nach Fussnote aus - und eine Farbe
   wirkt erst, wenn genug Flaeche von ihr da ist. Der Knopf, der
   diese Seite bezahlt, darf der groesste in der Kopfzeile sein. */
.nav__cta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.75rem 1.35rem;
  color: var(--on-signal);
  background: var(--signal);
  border: var(--hair) solid var(--signal);
  transition: color var(--d-l3) var(--e-out), border-color var(--d-l3) var(--e-out), background-color var(--d-l3) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__cta:hover { color: var(--signal); background: transparent; border-color: var(--signal); }
}
.nav__cta:focus-visible { outline-offset: 4px; }
@media (max-width: 820px) { .nav__cta { display: none; } }

/* Das Schwungrad stand hier: ein Fortschrittsring mit drehender
   Speiche, zugleich Schaltflaeche zurueck an den Anfang. Es ist
   entfernt. Als Kreis mit Kreuz darin las es sich fuer die
   meisten als Plus-Zeichen ohne erkennbare Aufgabe und stand
   als drittes Element zwischen den beiden, die etwas verkaufen.
   Den Fortschritt zeigt weiterhin die Achse am linken Rand,
   nach oben fuehrt das Zeichen in der Kopfzeile.
   Markup und Modul sind mit raus, siehe index.html. */

/* Der Menue-Schalter traegt dieselbe Signalfarbe wie der Knopf
   daneben - aber ungefuellt. Zwei gefuellte Kaesten nebeneinander
   waeren zwei gleich laute Angebote; gekauft werden soll die
   Anfrage, nicht das Menue. Gleiche Farbe, anderes Gewicht. */
.menu-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  /* Dieselbe Groesse wie der Knopf daneben, aus demselben Grund:
     Elf Pixel Orange ueber einem Foto liest niemand als Orange,
     die liest man als grau. */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--signal);
}
/* Im offenen Menue liegt die Buehne auf Tinte. Die Signalfarbe
   traegt dort weiter, also bleibt sie stehen. */
html[data-menu="open"] .menu-btn { color: var(--signal); }
.menu-btn__lines { position: relative; width: 24px; height: 10px; }
.menu-btn__lines i {
  position: absolute; left: 0;
  /* 2 statt 1,5 Pixel. Ein Haarstrich in Signalfarbe verliert
     seine Farbe an die Kantenglaettung: Was uebrig bleibt, ist
     ein blasser Strich, kein orangener. */
  display: block; width: 100%; height: 2px;
  background: currentColor;
  transition: transform 0.5s var(--e-drawer);
}
.menu-btn__lines i:first-child { top: 0; }
.menu-btn__lines i:last-child  { bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .menu-btn:hover .menu-btn__lines i:first-child { transform: translateY(1.5px); }
  .menu-btn:hover .menu-btn__lines i:last-child  { transform: translateY(-1.5px); }
}
/* Die beiden Striche treffen sich in der Mitte des 10 Pixel
   hohen Kastens: oben liegt die Strichmitte auf 1, unten auf 9,
   also je 4 Pixel Weg. Mit der alten Hoehe waren es 3,75. */
html[data-menu="open"] .menu-btn__lines i:first-child { transform: translateY(4px) rotate(45deg); }
html[data-menu="open"] .menu-btn__lines i:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ------------------------------------------------------------
   FULLSCREEN-MENUE
   ------------------------------------------------------------ */
.menu {
  /* Eigene Buehne: das Menue liegt ausserhalb der Sektionen
     und muesste sonst die hellen Textfarben erben. */
  --stage: var(--ink);
  --on-stage: var(--chalk);
  --on-stage-2: color-mix(in srgb, var(--chalk) 62%, transparent);
  --rule: color-mix(in srgb, var(--chalk) 20%, transparent);

  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--stage);
  color: var(--on-stage);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(72px + var(--gutter)) var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}
.menu.is-open { visibility: visible; }

.menu__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.menu__bg figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.7s var(--e-out);
}
.menu__bg figure.is-active { opacity: 0.26; }
.menu__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  transform: scale(1.06);
}

/* Die Menuepunkte standen bei 7,5 rem, also 120 Pixel je Zeile.
   Sechs davon fuellten den Bildschirm bis zum Rand und liessen
   weder Luft noch Platz fuer den Fussbereich; auf dem Telefon
   brach "LEISTUNGEN" um. Jetzt rund die Haelfte: gross genug,
   um zu tragen, klein genug, dass alle sechs Punkte ohne
   Scrollen nebeneinander stehen. */
.menu__list {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1.1vw, 0.9rem);
  max-width: 34rem;
}
.menu__item { overflow: hidden; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: clamp(0.7rem, 2vw, 1.4rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: clamp(1.6rem, 5.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: var(--track-xl);
  text-transform: uppercase;
  transition: color 0.45s var(--e-out), transform 0.55s var(--e-out);
}
.menu__link .idx {
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.9vw, 0.7rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--signal);
  flex: none;
}
@media (hover: hover) and (pointer: fine) {
  .menu__link:hover { transform: translateX(clamp(0.6rem, 2vw, 2rem)); }
  /* 52 statt 30 Prozent: 4,97:1 statt 2,37:1 (2026-11-08) */
  .menu__list:hover .menu__link:not(:hover) { color: color-mix(in srgb, var(--chalk) 52%, transparent); }
}
.menu__link:focus-visible { transform: translateX(1rem); }

.menu__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: var(--stack-3);
  border-top: var(--hair) solid var(--rule);
}

/* ------------------------------------------------------------
   CUSTOM CURSOR
   Nur fuer feine Zeigegeraete. Ersetzt keine Fokus-Zustaende.
   ------------------------------------------------------------ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
}
.cursor__dot {
  position: absolute;
  will-change: transform;
  top: 0; left: 0;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: var(--r-round);
  background: var(--chrome);
  transition: opacity 0.2s var(--e-out), background-color 0.55s var(--e-in-out);
}
.cursor__ring {
  position: absolute;
  will-change: transform;
  top: 0; left: 0;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 1px solid var(--chrome);
  border-radius: var(--r-round);
  display: grid;
  place-items: center;
  transform: scale(0.34);
}
.cursor__label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome);
  opacity: 0;
  white-space: nowrap;
  transform: scale(0.8);
  transition: opacity 0.24s var(--e-out), transform 0.24s var(--e-out);
}
.cursor.has-label .cursor__label { opacity: 1; transform: scale(1); }
.cursor.has-label .cursor__dot { opacity: 0; }

html.cursor-on, html.cursor-on * { cursor: none !important; }

/* ------------------------------------------------------------
   WO DER SYSTEMZEIGER ZURUECKKOMMT

   Ein ausgeblendeter Zeiger ist eine Behauptung: dass der Punkt
   auf dem Bildschirm genau genug ist, um damit zu zielen. Fuer
   grosse Flaechen stimmt das. Fuer eine von vier schmalen
   Leistungszeilen, fuer Formularfelder und fuer Menuepunkte
   stimmt es nicht.

   Diese Regeln stehen NACH cursor-on und gewinnen deshalb bei
   gleicher Spezifitaet. Gesetzt wird die Klasse in
   modules/cursor.js. -------------------------------------- */
html.cursor-aus,
html.cursor-aus * { cursor: auto !important; }

html.cursor-aus .svc__row,
html.cursor-aus .menu__link,
html.cursor-aus button,
html.cursor-aus a { cursor: pointer !important; }

html.cursor-aus input,
html.cursor-aus textarea { cursor: text !important; }

/* Der eigene Cursor tritt dabei weg, statt unter dem Systemzeiger
   liegen zu bleiben. Zwei Zeiger sind schlimmer als keiner. */
html.cursor-aus .cursor { opacity: 0; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  html.cursor-on, html.cursor-on * { cursor: auto !important; }
}