/* ===========================================================================
   N-Developing — Marken-Fundament
   ===========================================================================

   Plan: ~/Documents/GPT/plans/2026-10-04-n-developing-info-unternehmenswebsite.md

   WOHER DIESE WERTE KOMMEN
   Farben, Abstands- und Schriftleitern sind aus dem V2-Fundament des Stores
   uebernommen (~/Documents/Projekte/store/css/v2.css, 04.10.2026). Absichtlich
   identisch: drei Websites mit drei Paletten sind drei Firmen. Das Layout
   darueber ist eigen — eine Firmenseite ist kein Shop.

   AUFBAU
   1. Schrift
   2. Farben
   3. Masse (Abstaende, Schrift, Radien, Bewegung)
   4. Grundlagen (Reset, Koerper, Fokus, Auswahl)
   5. Hilfsklassen

   REGELN, DIE HIER NICHT VERHANDELBAR SIND
   - Jedes mehrspaltige Raster haengt an einem Umbruchpunkt, NIE an
     `auto-fit`. Am 04.10. fielen im Store an vier Stellen Inhalte nach unten
     weg, weil `auto-fit` die Bildschirmbreite ueber die Spaltenzahl
     entscheiden laesst statt die Anzahl der Inhalte.
   - Jedes Klickziel ist mindestens 44px hoch.
   - Jeder Text erreicht 4,5:1 Kontrast gegen seine Flaeche.
   - Bewegung laeuft nur ueber die Kurven unten, und nur wenn der Besucher
     sie zulaesst.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. SCHRIFT

   Inter, lokal ausgeliefert. NICHT ueber Google Fonts: das laedt aus den USA
   und gibt die IP des Besuchers dorthin weiter — in Deutschland abmahnfaehig
   und ein Widerspruch zur eigenen Datenschutzerklaerung. Die bisherige
   .info-Seite tat genau das (DM Sans + JetBrains Mono von fonts.googleapis.com).
   Lokal ist ausserdem schneller, weil keine zweite Verbindung aufgebaut wird.

   Eine Datei fuer alle Schnitte (variabel, 48 KB, nur Latin).
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nd-schrift: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  --nd-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
    'Liberation Mono', monospace;
}

/* ---------------------------------------------------------------------------
   2. FARBEN

   Dark-first, und zwar nur dark: eine Technologiemarke braucht keine zweite
   Fassung, die sie halb so gut aussehen laesst.

   EIN Akzent. Gruen, weil es die Marke ist und der Besucher es von Store und
   Logo wiedererkennt. Wer zwei Akzente gleichwertig benutzt, hat keinen.
   Sparsam eingesetzt: Knoepfe, aktive Navigation, wichtige Links, kleine
   grafische Details. Keine RGB-Optik, kein Neon.
   --------------------------------------------------------------------------- */

:root {
  /* Flaechen, von tief nach hoch */
  --nd-grund:       #08090a;
  --nd-flaeche:     #0f1113;
  --nd-karte:       #16191c;
  --nd-karte-hoch:  #1d2125;

  /* Linien */
  --nd-linie:       #24282c;
  --nd-linie-leise: #191d20;
  --nd-linie-stark: #313841;

  /* Schrift. --nd-text-leise ist bewusst heller als der im Store gefundene
     Wert #6e7681, der nur 3,31:1 erreichte. Dieser schafft 4,6:1 auf
     --nd-grund und bleibt damit regelkonform. */
  --nd-text:        #f4f6f7;
  --nd-text-ruhig:  #b4bcc2;
  --nd-text-leise:  #8d969d;

  /* Akzent */
  --nd-akzent:        #32d46a;
  --nd-akzent-hell:   #4ae383;
  --nd-akzent-dunkel: #24a553;
  --nd-akzent-leise:  rgba(50, 212, 106, 0.12);
  --nd-akzent-linie:  rgba(50, 212, 106, 0.35);
  /* Text auf gefuelltem Akzent-Knopf — dunkel, nicht weiss:
     weiss auf #32d46a erreicht nur 2,1:1. */
  --nd-auf-akzent:    #04140a;

  /* Zustaende */
  --nd-warnung: #e3b341;
  --nd-fehler:  #f4616b;
  --nd-erfolg:  #32d46a;
}

/* ---------------------------------------------------------------------------
   3. MASSE

   Abstaende und Schriftgroessen als Leiter. Alles auf der Seite benutzt
   ausschliesslich diese Werte — das ist der Unterschied zwischen "sieht
   gebaut aus" und "sieht gewachsen aus".
   --------------------------------------------------------------------------- */

:root {
  /* Abstaende */
  --nd-a1: 4px;
  --nd-a2: 8px;
  --nd-a3: 12px;
  --nd-a4: 16px;
  --nd-a5: 24px;
  --nd-a6: 32px;
  --nd-a7: 48px;
  --nd-a8: 64px;
  --nd-a9: 96px;
  --nd-a10: 128px;

  /* Schriftgroessen. clamp() statt Umbruchpunkte: waechst stufenlos mit,
     statt an drei Stellen zu springen. */
  --nd-s1: 0.75rem;                                  /* 12px  Marke, Meta   */
  --nd-s2: 0.8125rem;                                /* 13px  Kleingedruckt */
  --nd-s3: 0.875rem;                                 /* 14px  Hilfstext     */
  --nd-s4: 0.9375rem;                                /* 15px  Grundtext     */
  --nd-s5: 1rem;                                     /* 16px  Grosser Text  */
  --nd-s6: clamp(1.0625rem, 0.4vw + 0.97rem, 1.1875rem);
  --nd-s7: clamp(1.25rem, 0.8vw + 1.06rem, 1.5rem);  /* Karten-Titel        */
  --nd-s8: clamp(1.625rem, 1.6vw + 1.25rem, 2.25rem);/* Abschnitts-Titel    */
  --nd-s9: clamp(2.125rem, 3.2vw + 1.4rem, 3.25rem); /* Seiten-Titel        */
  --nd-s10: clamp(2.5rem, 5.2vw + 1.3rem, 4.5rem);   /* Hero                */

  /* Zeilenhoehen */
  --nd-zeile-eng:   1.15;
  --nd-zeile-mittel: 1.4;
  --nd-zeile-weit:  1.65;

  /* Laufweite. Grosse Ueberschriften brauchen negative Laufweite, sonst
     wirken sie auseinandergefallen. */
  --nd-lauf-eng:  -0.03em;
  --nd-lauf-weit:  0.08em;

  /* Radien */
  --nd-r1: 4px;
  --nd-r2: 8px;
  --nd-r3: 12px;
  --nd-r4: 16px;
  --nd-r5: 24px;
  --nd-r-rund: 999px;

  /* Breiten */
  --nd-breite:      1200px;
  --nd-breite-eng:   760px;
  --nd-breite-weit: 1440px;
  --nd-rand:        var(--nd-a5);

  /* Bewegung. Eine Kurve fuer alles — wer fuenf Kurven benutzt, hat keine
     Handschrift. Lang genug, um ruhig zu wirken, kurz genug, um nicht
     zu warten. */
  --nd-weich:    200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --nd-weich-lang: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Kopfzeilen-Hoehe, von JS beim Scrollen verkleinert */
  --nd-kopf-hoch:  72px;
  --nd-kopf-kompakt: 58px;
}

@media (min-width: 720px) {
  :root { --nd-rand: var(--nd-a7); }
}

/* ---------------------------------------------------------------------------
   4. GRUNDLAGEN
   --------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ein Anker darf nicht unter der klebenden Kopfzeile landen. */
  scroll-padding-top: calc(var(--nd-kopf-hoch) + var(--nd-a5));
}

body {
  margin: 0;
  background: var(--nd-grund);
  color: var(--nd-text);
  font-family: var(--nd-schrift);
  font-size: var(--nd-s4);
  line-height: var(--nd-zeile-weit);
  font-feature-settings: 'cv05' 1, 'cv11' 1; /* offenes l und einstoeckiges g */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ein Querscroll am Handy ist immer ein Fehler, nie eine Funktion. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: var(--nd-zeile-eng);
  letter-spacing: var(--nd-lauf-eng);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: var(--nd-akzent-linie);
  text-underline-offset: 3px;
}

a:hover { text-decoration-color: var(--nd-akzent); }

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

ul, ol { padding: 0; list-style: none; }

code, kbd, samp, pre {
  font-family: var(--nd-mono);
  font-size: 0.9em;
}

/* Fokus. Sichtbar fuer Tastatur, unsichtbar fuer Maus — aber NIE ganz weg:
   wer `outline: none` schreibt, macht die Seite fuer Tastaturnutzer
   unbenutzbar. */
:focus-visible {
  outline: 2px solid var(--nd-akzent);
  outline-offset: 2px;
  border-radius: var(--nd-r1);
}

:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--nd-akzent);
  color: var(--nd-auf-akzent);
}

/* Bewegung nur, wenn der Besucher sie zulaesst. Das ist keine Kuer, das ist
   fuer Menschen mit Gleichgewichts- oder Migraeneproblemen der Unterschied
   zwischen benutzbar und nicht. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

/* ---------------------------------------------------------------------------
   5. HILFSKLASSEN
   --------------------------------------------------------------------------- */

/* Der Inhaltsrahmen. Jeder Abschnitt benutzt ihn, damit alle Kanten
   uebereinander liegen. */
.nd-rahmen {
  width: 100%;
  max-width: var(--nd-breite);
  margin-inline: auto;
  padding-inline: var(--nd-rand);
}

.nd-rahmen--eng { max-width: var(--nd-breite-eng); }
.nd-rahmen--weit { max-width: var(--nd-breite-weit); }

/* Abschnitts-Rhythmus */
.nd-abschnitt {
  padding-block: clamp(var(--nd-a8), 7vw, var(--nd-a10));
}

.nd-abschnitt--schmal { padding-block: clamp(var(--nd-a7), 5vw, var(--nd-a9)); }

/* Eine Trennlinie, die an den Raendern ausfadet statt hart abzuschneiden. */
.nd-trenner {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    transparent, var(--nd-linie) 18%, var(--nd-linie) 82%, transparent);
}

/* Nur fuer Screenreader. Fuer den Sprungmarken-Link und fuer Beschriftungen,
   die sehend aus dem Zusammenhang hervorgehen. */
.nd-nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke zum Inhalt. Erste Tab-Station jeder Seite. */
.nd-sprung {
  position: absolute;
  top: var(--nd-a4);
  left: var(--nd-a4);
  z-index: 200;
  padding: var(--nd-a3) var(--nd-a5);
  background: var(--nd-akzent);
  color: var(--nd-auf-akzent);
  border-radius: var(--nd-r2);
  font-size: var(--nd-s3);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--nd-a5)));
  transition: transform var(--nd-weich);
}

.nd-sprung:focus { transform: translateY(0); }

/* Textfarben */
.nd-ruhig { color: var(--nd-text-ruhig); }
.nd-leise { color: var(--nd-text-leise); }
.nd-akzent-text { color: var(--nd-akzent); }

/* Die Marken-Kennung. Das wiederkehrende Element statt eines wiederholten
   Logos: ein kleines Mono-Kuerzel vor Abschnitts-Titeln. */
.nd-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-a2);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  font-weight: 500;
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-akzent);
}

.nd-marke::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--nd-akzent);
}