/* ===========================================================================
   n-developing.de — Bausteine
   ===========================================================================

   Plan: ~/Documents/GPT/plans/2026-10-04-n-developing-de-v2.md

   VERHAELTNIS ZU css/marke.css
   Dort stehen Farben, Masse, Schrift und fuenf Hilfsklassen — identisch mit
   n-developing.info und dem Store. Hier steht alles Sichtbare, und das ist
   EIGEN: die Firmenseite ist eine Editorial-Unternehmensseite, diese hier
   eine persoenliche Praesenz. Gleiche DNA, eigener Koerper (Briefing 21).

   WAS AUS DER ALTEN SEITE BEWUSST NICHT ZURUECKKOMMT
   - Glassmorphism (`--glass: blur(20px)` auf Karten) — Briefing 04 verbietet
     es ausdruecklich
   - die blaue Radial-Wolke ueber der ganzen Seite
   - der Akzent #63b3ed: er gehoert zu keiner der drei Domains. Hier gilt
     das Gruen der Marke, und zwar als EINZIGER Akzent
   - das Scanline-Overlay mit mix-blend-mode: hat am 12.08.2026 im
     Jarvis-Fenster ein sichtbares Viereck um ein helles Element gerechnet

   REGELN AUS DEM FUNDAMENT, DIE HIER GELTEN
   - Jedes mehrspaltige Raster haengt an einem Umbruchpunkt, NIE an
     `auto-fit`
   - Jedes Klickziel ist mindestens 44px hoch
   - Jeder Text erreicht 4,5:1 Kontrast gegen seine Flaeche
   - Bewegung nur ueber --nd-weich / --nd-weich-lang

   AUFBAU
    1. Kopfzeile, Off-Canvas, Scroll-Fortschritt
    2. Knoepfe, Schildchen, Status
    3. Abschnitts-Geruest
    4. Hero und Visual
    5. About und Karten
    6. Now
    7. Hervorgehobenes Projekt
    8. Projektliste
    9. Stack
   10. Prinzipien
   11. Musik
   12. Kontakt und Formular
   13. Abschluss-Ruf
   14. Fussbereich
   15. Pflichtseiten (Recht, knappe Seiten, 404)
   16. Einblenden beim Scrollen
   --------------------------------------------------------------------------- */


/* Das hidden-Attribut muss staerker sein als jede display-Regel.
   OHNE DIESE ZEILE: ein Element mit [hidden], dem eine Klasse ein
   `display: flex` gibt, bleibt sichtbar. Genau dieser Fehler trat am
   04.10.2026 auf n-developing.info auf (Formular stand neben der
   Erfolgsmeldung) und am 12.08.2026 im Dashboard. Zweimal derselbe Fehler
   ist einmal zu viel. */
[hidden] { display: none !important; }


/* ===========================================================================
   1. KOPFZEILE, OFF-CANVAS, SCROLL-FORTSCHRITT
   =========================================================================== */

.fortschritt {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
}

.fortschritt > i {
  display: block;
  height: 100%;
  width: var(--anteil, 0%);
  background: var(--nd-akzent);
  transform-origin: left;
}

.kz {
  position: sticky;
  top: 0;
  z-index: 110;
  /* Beim Scrollen wird die Kopfzeile kompakter und bekommt eine Flaeche
     (Briefing 07). Vorher ist sie bewusst durchsichtig, damit das Hero
     oben ohne Kante anfaengt. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--nd-weich), border-color var(--nd-weich),
              backdrop-filter var(--nd-weich);
}

.kz[data-kompakt="true"] {
  background: color-mix(in srgb, var(--nd-grund) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--nd-linie-leise);
}

.kz__innen {
  display: flex;
  align-items: center;
  gap: var(--nd-a5);
  height: var(--nd-kopf-hoch);
  transition: height var(--nd-weich);
}

.kz[data-kompakt="true"] .kz__innen { height: var(--nd-kopf-kompakt); }

.kz__marke {
  display: flex;
  align-items: center;
  gap: var(--nd-a3);
  text-decoration: none;
  flex: 0 0 auto;
  min-height: 44px;
}

.kz__zeichen { display: flex; }

.kz__name {
  font-weight: 600;
  letter-spacing: var(--nd-lauf-eng);
  white-space: nowrap;
}

/* Die Rolle hinter dem Namen: eine kleine Mono-Angabe, wie ein Datenfeld.
   Verschwindet am Handy, weil dort der Name allein reicht. */
.kz__rolle {
  display: none;
  padding-left: var(--nd-a3);
  border-left: 1px solid var(--nd-linie);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
}

@media (min-width: 560px) { .kz__rolle { display: block; } }

.kz__nav { margin-left: auto; }

.kz__liste {
  display: flex;
  align-items: center;
  gap: var(--nd-a2);
  margin: 0;
}

.kz__liste a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--nd-a3);
  border-radius: var(--nd-r2);
  font-size: var(--nd-s3);
  color: var(--nd-text-ruhig);
  text-decoration: none;
  transition: color var(--nd-weich), background var(--nd-weich);
}

.kz__liste a:hover,
.kz__liste a[aria-current="true"] {
  color: var(--nd-text);
  background: var(--nd-flaeche);
}

/* Der aktive Abschnitt bekommt einen Punkt statt einer Unterstreichung —
   leiser, und er springt beim Scrollen nicht in der Breite. */
.kz__liste a[aria-current="true"] { position: relative; }

.kz__liste a[aria-current="true"]::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  translate: -50% 0;
  width: 3px; height: 3px;
  border-radius: var(--nd-r-rund);
  background: var(--nd-akzent);
}

.kz__nav-fuss { display: none; }

.kz__rechts {
  display: flex;
  align-items: center;
  gap: var(--nd-a3);
  flex: 0 0 auto;
}

.kz__sprache {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding-inline: var(--nd-a3);
  border-radius: var(--nd-r2);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nd-text-leise);
  transition: color var(--nd-weich), background var(--nd-weich);
}

.kz__sprache:hover { color: var(--nd-text); background: var(--nd-flaeche); }
.kz__sprache-aktiv { color: var(--nd-text); }
.kz__sprache-trenner { opacity: 0.45; }

.kz__menue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r2);
  cursor: pointer;
  /* Steht im Markup nach der Navigation, im Bild aber davor: so landet die
     Tastatur nach dem Knopf direkt in der Lade, ohne tabindex-Tricks. */
  order: -1;
  transition: border-color var(--nd-weich), background var(--nd-weich);
}

.kz__menue:hover { border-color: var(--nd-linie-stark); background: var(--nd-flaeche); }

.kz__menue-striche {
  display: grid;
  gap: 5px;
  width: 18px;
}

.kz__menue-striche > i {
  display: block;
  height: 1.5px;
  background: var(--nd-text);
  border-radius: 2px;
  transition: transform var(--nd-weich), opacity var(--nd-weich);
}

/* Offen: aus den zwei Strichen wird ein Kreuz. */
.kz__menue[aria-expanded="true"] .kz__menue-striche > i:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.kz__menue[aria-expanded="true"] .kz__menue-striche > i:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.lade-schatten {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: color-mix(in srgb, var(--nd-grund) 72%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--nd-weich);
}

.lade-schatten[data-auf="true"] { opacity: 1; }

/* --- Bis 900px: Navigation als Lade von rechts ---------------------------- */

@media (max-width: 899px) {
  .kz__menue { display: flex; }

  .kz__nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 115;
    width: min(320px, 86vw);
    margin: 0;
    padding: calc(var(--nd-kopf-hoch) + var(--nd-a5)) var(--nd-a5) var(--nd-a7);
    display: flex;
    flex-direction: column;
    gap: var(--nd-a5);
    background: var(--nd-flaeche);
    border-left: 1px solid var(--nd-linie);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* OHNE JAVASCRIPT BLEIBT DIE LADE OFFEN, nicht zu: eine Navigation, die
       sich ohne Skript nicht oeffnen laesst, ist keine Navigation. Das
       Skript setzt data-zu="true" und erst dann faehrt sie hinaus. Genau
       dieser Fehler fiel am 04.10.2026 auf n-developing.info auf — dort
       hatte die Seite am Handy ohne JavaScript gar kein Menue. */
    transform: translateX(0);
    transition: transform var(--nd-weich-lang);
  }

  .kz__nav[data-zu="true"] {
    transform: translateX(100%);
    /* Verhindert, dass die geschlossene Lade noch Tab-Stationen hat. */
    visibility: hidden;
    transition: transform var(--nd-weich-lang), visibility 0s linear 420ms;
  }

  .kz__liste {
    flex-direction: column;
    align-items: stretch;
    gap: var(--nd-a1);
  }

  .kz__liste a {
    min-height: 48px;
    padding-inline: var(--nd-a4);
    font-size: var(--nd-s5);
  }

  .kz__liste a[aria-current="true"]::after {
    bottom: auto;
    left: auto;
    right: var(--nd-a4);
    top: 50%;
    translate: 0 -50%;
    width: 5px; height: 5px;
  }

  .kz__nav-fuss {
    display: flex;
    align-items: center;
    gap: var(--nd-a3);
    margin-top: auto;
    padding-top: var(--nd-a5);
    border-top: 1px solid var(--nd-linie-leise);
  }

  .kz__nav-fuss .knopf { flex: 1; }

  /* Oben rechts nur Sprache und Menueknopf — der Ruf steht in der Lade. */
  .kz__ruf, .kz__sprache--oben { display: none; }
  .kz__rechts { margin-left: auto; }
}

@media (min-width: 900px) {
  .kz__menue { display: none; }
  .lade-schatten { display: none; }
}


/* ===========================================================================
   2. KNOEPFE, SCHILDCHEN, STATUS
   =========================================================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nd-a2);
  min-height: 48px;
  padding: var(--nd-a3) var(--nd-a6);
  border: 1px solid transparent;
  border-radius: var(--nd-r2);
  font-size: var(--nd-s4);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--nd-weich), border-color var(--nd-weich),
              color var(--nd-weich), transform var(--nd-weich);
}

.knopf:active { transform: translateY(1px); }

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

.knopf--akzent:hover { background: var(--nd-akzent-hell); }

.knopf--rand {
  background: transparent;
  border-color: var(--nd-linie-stark);
  color: var(--nd-text);
}

.knopf--rand:hover {
  border-color: var(--nd-akzent-linie);
  background: var(--nd-akzent-leise);
}

.knopf--klein { min-height: 40px; padding: var(--nd-a2) var(--nd-a4); font-size: var(--nd-s3); }
.knopf--gross { min-height: 56px; padding: var(--nd-a4) var(--nd-a7); font-size: var(--nd-s5); }
.knopf--voll  { width: 100%; }

.knopf[disabled] { opacity: 0.6; cursor: progress; }

.tag {
  display: inline-block;
  padding: 2px var(--nd-a2);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r1);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-text-ruhig);
  white-space: nowrap;
}

/* Status. Vier Zustaende, vier Farben — und ein neutraler Rueckfall, damit
   ein unbekannter Status nicht unsichtbar wird. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-a2);
  padding: 2px var(--nd-a3) 2px var(--nd-a2);
  border-radius: var(--nd-r-rund);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  font-weight: 500;
  letter-spacing: var(--nd-lauf-weit);
  white-space: nowrap;
}

.status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--nd-r-rund);
  background: currentColor;
}

.status--active     { color: var(--nd-akzent);   background: var(--nd-akzent-leise); }
.status--building   { color: var(--nd-warnung);  background: color-mix(in srgb, var(--nd-warnung) 12%, transparent); }
.status--paused     { color: var(--nd-text-leise); background: var(--nd-flaeche); }
.status--experiment { color: #8ab4f8;            background: color-mix(in srgb, #8ab4f8 12%, transparent); }
.status--neutral    { color: var(--nd-text-leise); background: var(--nd-flaeche); }

/* Der kleine pulsierende Punkt. Die einzige Dauerbewegung auf der Seite,
   und bewusst winzig: er sagt "laeuft gerade". */
.puls, .augenbraue__punkt {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: var(--nd-r-rund);
  background: var(--nd-akzent);
  flex: 0 0 auto;
}

.puls { animation: puls 2.6s var(--nd-weich-lang) infinite; }

@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 var(--nd-akzent-linie); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}


/* ===========================================================================
   3. ABSCHNITTS-GERUEST
   =========================================================================== */

.ab { padding-block: clamp(var(--nd-a8), 7vw, var(--nd-a10)); }

/* Die Abschnittsmarke: Nummer, Strich, Label. Das wiederkehrende technische
   Detail (Briefing 06 und 34) — sparsam, immer gleich. */
.ab__marke {
  display: flex;
  align-items: center;
  gap: var(--nd-a3);
  margin-bottom: var(--nd-a6);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
}

.ab__nr { color: var(--nd-akzent); font-weight: 600; }

.ab__strich {
  flex: 1 1 auto;
  max-width: 64px;
  height: 1px;
  background: var(--nd-linie);
}

.ab__label { color: var(--nd-text-leise); }

.ab__kopf { max-width: 44rem; margin-bottom: var(--nd-a8); }

.ab__titel {
  font-size: var(--nd-s8);
  margin-bottom: var(--nd-a4);
}

.ab__titel--gross { font-size: var(--nd-s9); }

.ab__lead {
  font-size: var(--nd-s6);
  color: var(--nd-text-ruhig);
  max-width: 38rem;
}

.ab__zwischen {
  margin-top: var(--nd-a8);
  margin-bottom: var(--nd-a5);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
}

.leer {
  padding: var(--nd-a7);
  border: 1px dashed var(--nd-linie);
  border-radius: var(--nd-r3);
  text-align: center;
  color: var(--nd-text-leise);
}

/* Zwei Zeilen in einer Ueberschrift, die zweite im Akzent. Das Muster von
   Hero und Abschluss-Ruf. */
.zeile { display: block; }
.zeile--leise { color: var(--nd-text-leise); }


/* ===========================================================================
   4. HERO UND VISUAL
   =========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(var(--nd-a8), 9vw, var(--nd-a10));
  padding-bottom: clamp(var(--nd-a8), 8vw, var(--nd-a9));
  /* Ein einziger, ruhiger Lichtschein von oben. Kein Dauer-Verlauf ueber
     die ganze Seite, keine Partikel (Briefing 23). */
  background:
    radial-gradient(ellipse 80% 50% at 18% -10%,
      color-mix(in srgb, var(--nd-akzent) 7%, transparent), transparent 60%);
}

.hero__innen {
  display: grid;
  gap: clamp(var(--nd-a7), 5vw, var(--nd-a9));
  align-items: center;
}

@media (min-width: 980px) {
  .hero__innen { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.augenbraue {
  display: flex;
  align-items: center;
  gap: var(--nd-a3);
  margin-bottom: var(--nd-a5);
  font-family: var(--nd-mono);
  font-size: var(--nd-s2);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-ruhig);
}

.hero__titel {
  font-size: var(--nd-s10);
  font-weight: 650;
  margin-bottom: var(--nd-a5);
}

.hero__lead {
  font-size: var(--nd-s6);
  color: var(--nd-text-ruhig);
  max-width: 34rem;
  margin-bottom: var(--nd-a7);
}

.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-a3);
  margin-bottom: var(--nd-a6);
}

.hero__status {
  display: flex;
  align-items: center;
  gap: var(--nd-a3);
  font-family: var(--nd-mono);
  font-size: var(--nd-s2);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
}

.hero__runter {
  display: none;
  align-items: center;
  gap: var(--nd-a2);
  margin: var(--nd-a7) auto 0;
  width: fit-content;
  min-height: 44px;
  padding-inline: var(--nd-a4);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
  text-decoration: none;
  transition: color var(--nd-weich);
}

.hero__runter:hover { color: var(--nd-text); }
.hero__runter svg { animation: nicken 2.8s var(--nd-weich-lang) infinite; }

@keyframes nicken {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (min-width: 980px) { .hero__runter { display: flex; } }

/* --- Das Visual ---------------------------------------------------------- */

.visual { position: relative; }

.visual__svg {
  width: 100%;
  height: auto;
  max-height: 460px;
  overflow: visible;
}

.visual__pfosten {
  stroke: var(--nd-linie-stark);
  stroke-width: 2;
  stroke-linecap: square;
}

.visual__weg {
  stroke: var(--nd-linie-stark);
  stroke-width: 2;
  fill: none;
}

/* Der laufende Takt auf der Diagonale. stroke-dashoffset animiert der
   Browser ohne Layout-Neuberechnung — das ist der Unterschied zwischen
   einer Bewegung, die nichts kostet, und einer, die ruckelt. */
.visual__takt {
  stroke: var(--nd-akzent);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 26 404;
  animation: takt 5.5s linear infinite;
}

@keyframes takt {
  from { stroke-dashoffset: 430; }
  to   { stroke-dashoffset: 0; }
}

.visual__knoten {
  fill: var(--nd-grund);
  stroke: var(--nd-akzent);
  stroke-width: 2;
}

.visual__nr {
  font-family: var(--nd-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--nd-akzent);
}

.visual__label {
  font-family: var(--nd-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 500;
  fill: var(--nd-text);
}

/* WO DIE STATIONEN SITZEN.
   Die vier Punkte liegen in gleichen Abstaenden auf der Diagonale
   (104,84) → (416,384): Schrittweite 104 nach rechts, 100 nach unten.
   Die Labels wechseln die Seite, damit sie den Weg nicht schneiden —
   deshalb sind es vier Regeln und keine Formel. */
.visual__station[data-nr="1"] { transform: translate(104px, 84px); }
.visual__station[data-nr="2"] { transform: translate(208px, 184px); }
.visual__station[data-nr="3"] { transform: translate(312px, 284px); }
.visual__station[data-nr="4"] { transform: translate(416px, 384px); }

/* Station 1 und 2: Label nach links, damit es nicht ueber dem Weg liegt.
   Station 3 und 4: nach rechts. */
.visual__station[data-nr="1"] .visual__label,
.visual__station[data-nr="2"] .visual__label { transform: translate(-16px, 5px); text-anchor: end; }
.visual__station[data-nr="3"] .visual__label,
.visual__station[data-nr="4"] .visual__label { transform: translate(16px, 5px);  text-anchor: start; }

.visual__station[data-nr="1"] .visual__nr,
.visual__station[data-nr="2"] .visual__nr { transform: translate(-16px, -12px); text-anchor: end; }
.visual__station[data-nr="3"] .visual__nr,
.visual__station[data-nr="4"] .visual__nr { transform: translate(16px, -12px);  text-anchor: start; }

/* Am Handy reduziert: ohne Raster, kleineres Bild, keine Dauerbewegung
   (Briefing 09 und 27). */
@media (max-width: 979px) {
  .visual__svg { max-height: 300px; }
  .visual__takt { animation: none; stroke-dasharray: none; opacity: 0.5; }
}


/* ===========================================================================
   5. ABOUT UND KARTEN
   =========================================================================== */

.about__raster { display: grid; gap: var(--nd-a6); }

@media (min-width: 900px) {
  /* Ueberschrift links, Text rechts — Editorial-Satz statt Textwand. */
  .about__raster {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(var(--nd-a7), 5vw, var(--nd-a9));
  }
  .about__raster .ab__titel { position: sticky; top: calc(var(--nd-kopf-hoch) + var(--nd-a7)); }
}

.about__text { display: grid; gap: var(--nd-a5); max-width: 40rem; }
.about__text p { color: var(--nd-text-ruhig); }
.about__text .gross { font-size: var(--nd-s6); color: var(--nd-text); }

/* Karten. Umbruchpunkte statt auto-fit: sonst entscheidet die
   Bildschirmbreite ueber die Spaltenzahl und nicht die Anzahl der Inhalte
   (am 04.10.2026 fielen im Store an vier Stellen Inhalte deshalb weg). */
.karten { display: grid; gap: var(--nd-a4); }

@media (min-width: 620px)  { .karten--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .karten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.karte {
  padding: var(--nd-a5);
  background: var(--nd-flaeche);
  border: 1px solid var(--nd-linie-leise);
  border-radius: var(--nd-r3);
  transition: border-color var(--nd-weich), background var(--nd-weich);
}

.karte:hover { border-color: var(--nd-linie); background: var(--nd-karte); }

.karte__nr {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-akzent);
  margin-bottom: var(--nd-a3);
}

.karte__titel { font-size: var(--nd-s5); margin-bottom: var(--nd-a2); }
.karte__text { font-size: var(--nd-s3); color: var(--nd-text-ruhig); }


/* ===========================================================================
   6. NOW
   =========================================================================== */

.now__liste {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--nd-linie-leise);
}

.now__punkt {
  display: flex;
  align-items: flex-start;
  gap: var(--nd-a4);
  padding-block: var(--nd-a5);
  border-bottom: 1px solid var(--nd-linie-leise);
}

.now__puls {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: 0.55em;
  border-radius: var(--nd-r-rund);
  background: var(--nd-akzent);
  box-shadow: 0 0 0 4px var(--nd-akzent-leise);
}

.now__titel { font-size: var(--nd-s5); margin-bottom: var(--nd-a1); }
.now__text { color: var(--nd-text-ruhig); max-width: 46rem; }


/* ===========================================================================
   7. HERVORGEHOBENES PROJEKT
   =========================================================================== */

.hervor__karte {
  display: grid;
  gap: clamp(var(--nd-a6), 4vw, var(--nd-a8));
  padding: clamp(var(--nd-a6), 4vw, var(--nd-a8));
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%,
      color-mix(in srgb, var(--nd-akzent) 6%, transparent), transparent 62%),
    var(--nd-flaeche);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r5);
}

@media (min-width: 940px) {
  .hervor__karte { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.hervor__ueber {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
  margin-bottom: var(--nd-a4);
}

.hervor__titel { font-size: var(--nd-s9); margin-bottom: var(--nd-a4); }

.hervor__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nd-a3);
  margin-bottom: var(--nd-a5);
}

.hervor__technik {
  font-family: var(--nd-mono);
  font-size: var(--nd-s2);
  color: var(--nd-text-leise);
}

.hervor__lead { font-size: var(--nd-s5); color: var(--nd-text-ruhig); margin-bottom: var(--nd-a6); }

.hervor__ruf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nd-a4);
}

.hervor__hinweis { font-size: var(--nd-s2); color: var(--nd-text-leise); }

.hervor__merkmale {
  display: grid;
  gap: var(--nd-a4);
  align-content: start;
}

.hervor__merkmale > li {
  padding-left: var(--nd-a5);
  border-left: 2px solid var(--nd-akzent-linie);
}

.hervor__merkmale h3 { font-size: var(--nd-s4); margin-bottom: var(--nd-a1); }
.hervor__merkmale p { font-size: var(--nd-s3); color: var(--nd-text-ruhig); }


/* ===========================================================================
   8. PROJEKTLISTE
   ===========================================================================
   Editorial-Liste, keine Kartenwand (Briefing 13): jedes Projekt ist eine
   Zeile mit einer Mono-Spalte fuer die Metadaten. Das liest sich wie ein
   Werkverzeichnis und nicht wie ein Template. */

.pr { border-top: 1px solid var(--nd-linie); }

.pr__zeile {
  display: grid;
  gap: var(--nd-a4);
  padding-block: var(--nd-a6);
  border-bottom: 1px solid var(--nd-linie-leise);
  transition: background var(--nd-weich);
}

.pr__zeile:hover { background: color-mix(in srgb, var(--nd-flaeche) 60%, transparent); }

@media (min-width: 860px) {
  .pr__zeile {
    grid-template-columns: 3.5rem minmax(0, 1.5fr) minmax(0, 1fr) auto;
    gap: var(--nd-a5);
    align-items: start;
  }
}

.pr__nr {
  font-family: var(--nd-mono);
  font-size: var(--nd-s2);
  color: var(--nd-text-leise);
  padding-top: 0.3em;
}

.pr__titel { font-size: var(--nd-s7); margin-bottom: var(--nd-a1); }

.pr__kategorie {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-akzent);
  margin-bottom: var(--nd-a3);
}

.pr__text { color: var(--nd-text-ruhig); max-width: 36rem; }

.pr__meta { display: grid; gap: var(--nd-a3); }

.pr__kopf {
  display: block;
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
  margin-bottom: var(--nd-a2);
}

.pr__jahr { font-family: var(--nd-mono); font-size: var(--nd-s3); color: var(--nd-text-ruhig); }

.pr__tags { display: flex; flex-wrap: wrap; gap: var(--nd-a2); }

.pr__wege { display: grid; gap: var(--nd-a2); align-content: start; }

.pr__link {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-a2);
  min-height: 44px;
  font-size: var(--nd-s3);
  font-weight: 600;
  color: var(--nd-akzent);
  text-decoration: none;
  white-space: nowrap;
}

.pr__link:hover { text-decoration: underline; text-decoration-color: var(--nd-akzent); }
.pr__link svg { transition: transform var(--nd-weich); }
.pr__link:hover svg { transform: translate(2px, -2px); }

.pr__link--leise { color: var(--nd-text-ruhig); font-weight: 400; }

/* Kein Link vorhanden: ehrlich hinschreiben statt ein <a href=""> bauen,
   das auf die Seite selbst zeigt (Briefing 33). */
.pr__kein-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-text-leise);
  white-space: nowrap;
}


/* ===========================================================================
   9. STACK
   =========================================================================== */

.stack { display: grid; gap: var(--nd-a6); }

@media (min-width: 860px) { .stack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nd-a7); } }

.stack__gruppe {
  padding-top: var(--nd-a5);
  border-top: 2px solid var(--nd-linie-stark);
}

.stack__kopf { margin-bottom: var(--nd-a5); }
.stack__titel { font-size: var(--nd-s5); margin-bottom: var(--nd-a1); }

.stack__hinweis {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
}

/* Keine Prozentbalken, keine Icon-Wand (Briefing 15) — eine ruhige Liste.
   Monospace, weil es Technik ist. */
.stack__liste { display: grid; gap: 0; }

.stack__liste > li {
  padding-block: var(--nd-a3);
  border-bottom: 1px solid var(--nd-linie-leise);
  font-family: var(--nd-mono);
  font-size: var(--nd-s3);
  color: var(--nd-text-ruhig);
  transition: color var(--nd-weich), padding-left var(--nd-weich);
}

.stack__liste > li:hover { color: var(--nd-text); padding-left: var(--nd-a2); }


/* ===========================================================================
   10. PRINZIPIEN
   =========================================================================== */

.prinzip { display: grid; gap: var(--nd-a5); }

@media (min-width: 760px)  { .prinzip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .prinzip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.prinzip__punkt {
  padding: var(--nd-a5);
  border: 1px solid var(--nd-linie-leise);
  border-radius: var(--nd-r3);
  background: var(--nd-flaeche);
}

.prinzip__nr {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-akzent);
  margin-bottom: var(--nd-a3);
}

.prinzip__titel { font-size: var(--nd-s5); margin-bottom: var(--nd-a2); }
.prinzip__text { font-size: var(--nd-s3); color: var(--nd-text-ruhig); }


/* ===========================================================================
   11. MUSIK
   =========================================================================== */

.musik { display: grid; gap: var(--nd-a6); align-items: center; }

@media (min-width: 900px) { .musik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nd-a8); } }

.musik__karte {
  display: flex;
  align-items: center;
  gap: var(--nd-a5);
  padding: var(--nd-a5);
  background: var(--nd-flaeche);
  border: 1px solid var(--nd-linie-leise);
  border-radius: var(--nd-r3);
}

.musik__wellen {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  flex: 0 0 auto;
}

.musik__wellen > i {
  display: block;
  width: 3px;
  background: var(--nd-akzent);
  border-radius: 2px;
  /* Stillstehende Balken: eine Dauer-Animation fuer einen Titel, der
     NICHT gerade spielt, wuerde Live-Daten behaupten (Briefing 17). */
  height: 40%;
}

.musik__wellen > i:nth-child(2) { height: 100%; }
.musik__wellen > i:nth-child(3) { height: 65%; }
.musik__wellen > i:nth-child(4) { height: 85%; }

.musik__angabe { min-width: 0; flex: 1 1 auto; }
.musik__titel-feld { font-size: var(--nd-s5); font-weight: 600; }
.musik__kuenstler { font-size: var(--nd-s3); color: var(--nd-text-ruhig); }
.musik__album { font-family: var(--nd-mono); font-size: var(--nd-s1); color: var(--nd-text-leise); }

.musik__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--nd-a4);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r2);
  font-size: var(--nd-s3);
  text-decoration: none;
  color: var(--nd-text-ruhig);
  transition: border-color var(--nd-weich), color var(--nd-weich);
}

.musik__link:hover { border-color: var(--nd-akzent-linie); color: var(--nd-text); }


/* ===========================================================================
   12. KONTAKT UND FORMULAR
   =========================================================================== */

.kontakt { display: grid; gap: clamp(var(--nd-a7), 5vw, var(--nd-a9)); }

@media (min-width: 940px) {
  .kontakt { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.wege { display: grid; gap: 0; border-top: 1px solid var(--nd-linie-leise); }

.wege > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nd-a3);
  padding-block: var(--nd-a4);
  border-bottom: 1px solid var(--nd-linie-leise);
}

.wege__kopf {
  flex: 0 0 7rem;
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
}

.wege a { color: var(--nd-akzent); text-decoration: none; }
.wege a:hover { text-decoration: underline; }
.wege__wert { font-family: var(--nd-mono); font-size: var(--nd-s3); color: var(--nd-text-ruhig); }

.form { display: grid; gap: var(--nd-a4); }

.form__paar { display: grid; gap: var(--nd-a4); }

@media (min-width: 560px) { .form__paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.feld { display: grid; gap: var(--nd-a2); }

.feld label {
  font-size: var(--nd-s3);
  font-weight: 500;
  color: var(--nd-text-ruhig);
}

.feld__pflicht { color: var(--nd-akzent); cursor: help; }

.feld__optional {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  text-transform: uppercase;
  letter-spacing: var(--nd-lauf-weit);
  color: var(--nd-text-leise);
}

.feld input, .feld textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--nd-a3) var(--nd-a4);
  background: var(--nd-grund);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r2);
  color: var(--nd-text);
  transition: border-color var(--nd-weich), background var(--nd-weich);
}

.feld textarea { min-height: 9rem; resize: vertical; line-height: var(--nd-zeile-weit); }

.feld input::placeholder, .feld textarea::placeholder { color: var(--nd-text-leise); }

.feld input:hover, .feld textarea:hover { border-color: var(--nd-linie-stark); }

.feld input:focus, .feld textarea:focus {
  border-color: var(--nd-akzent-linie);
  background: var(--nd-flaeche);
}

/* Erst meckern, wenn der Besucher das Feld verlassen hat — nicht beim
   ersten Tastendruck. Die Klasse setzt das Skript. */
.form[data-geprueft="true"] .feld input:invalid,
.form[data-geprueft="true"] .feld textarea:invalid {
  border-color: var(--nd-fehler);
}

/* Der Honigtopf. position:absolute + clip-path statt display:none:
   manche Spam-Programme ueberspringen versteckte Felder, aber nur die, die
   per display oder visibility weg sind. aria-hidden und tabindex="-1"
   halten ihn von Screenreadern und der Tastatur fern. */
.honig {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__fehler {
  padding: var(--nd-a4) var(--nd-a5);
  background: color-mix(in srgb, var(--nd-fehler) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nd-fehler) 40%, transparent);
  border-radius: var(--nd-r2);
}

.form__fehler-titel { font-weight: 600; margin-bottom: var(--nd-a2); }
.form__fehler ul { display: grid; gap: var(--nd-a1); font-size: var(--nd-s3); color: var(--nd-text-ruhig); }
.form__fehler li { padding-left: var(--nd-a4); position: relative; }
.form__fehler li::before { content: '·'; position: absolute; left: var(--nd-a2); color: var(--nd-fehler); }

.form__fuss { display: grid; gap: var(--nd-a3); margin-top: var(--nd-a2); }

.form__hinweis { font-size: var(--nd-s2); color: var(--nd-text-leise); }
.form__hinweis a { color: var(--nd-text-ruhig); }

.erfolg {
  display: grid;
  justify-items: start;
  gap: var(--nd-a3);
  padding: clamp(var(--nd-a6), 4vw, var(--nd-a7));
  background: var(--nd-akzent-leise);
  border: 1px solid var(--nd-akzent-linie);
  border-radius: var(--nd-r3);
}

.erfolg__haken {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--nd-r-rund);
  background: var(--nd-akzent);
  color: var(--nd-auf-akzent);
}

.erfolg__titel { font-size: var(--nd-s7); }
.erfolg__text { color: var(--nd-text-ruhig); }


/* ===========================================================================
   13. ABSCHLUSS-RUF
   =========================================================================== */

.ruf {
  padding-block: clamp(var(--nd-a9), 9vw, var(--nd-a10));
  border-top: 1px solid var(--nd-linie-leise);
  background:
    radial-gradient(ellipse 60% 70% at 50% 110%,
      color-mix(in srgb, var(--nd-akzent) 9%, transparent), transparent 58%);
}

.ruf__innen { display: grid; justify-items: center; text-align: center; gap: var(--nd-a5); }

.ruf__titel { font-size: var(--nd-s10); font-weight: 650; }
.ruf__text { font-size: var(--nd-s6); color: var(--nd-text-ruhig); max-width: 32rem; }


/* ===========================================================================
   14. FUSSBEREICH
   =========================================================================== */

.fuss {
  padding-block: var(--nd-a8) var(--nd-a6);
  border-top: 1px solid var(--nd-linie);
  background: var(--nd-flaeche);
}

.fuss__oben { display: grid; gap: var(--nd-a7); margin-bottom: var(--nd-a8); }

@media (min-width: 820px) {
  .fuss__oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--nd-a9); }
}

.fuss__zeichen { display: block; margin-bottom: var(--nd-a4); }
.fuss__name { font-size: var(--nd-s5); font-weight: 600; }
.fuss__was { color: var(--nd-text-ruhig); }
.fuss__ort { font-family: var(--nd-mono); font-size: var(--nd-s1); color: var(--nd-text-leise); margin-top: var(--nd-a2); }

.fuss__spalten { display: grid; gap: var(--nd-a6); }

@media (min-width: 560px) { .fuss__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fuss__kopf {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
  margin-bottom: var(--nd-a4);
}

.fuss__spalte ul { display: grid; gap: var(--nd-a1); }

.fuss__spalte a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: var(--nd-s3);
  color: var(--nd-text-ruhig);
  text-decoration: none;
  transition: color var(--nd-weich);
}

.fuss__spalte a:hover { color: var(--nd-akzent); }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--nd-a3);
  padding-top: var(--nd-a5);
  border-top: 1px solid var(--nd-linie-leise);
  font-size: var(--nd-s2);
  color: var(--nd-text-leise);
}


/* ===========================================================================
   15. PFLICHTSEITEN
   =========================================================================== */

.recht main, .knapp main { padding-top: var(--nd-a8); }

.recht__text { padding-bottom: var(--nd-a9); }
.recht__text h1 { font-size: var(--nd-s9); margin-bottom: var(--nd-a4); }

.recht__text h2 {
  font-size: var(--nd-s6);
  margin-top: var(--nd-a7);
  margin-bottom: var(--nd-a3);
}

.recht__text p { color: var(--nd-text-ruhig); max-width: 42rem; }
.recht__text a { color: var(--nd-akzent); }

.recht__stand {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
}

.recht__anschrift { line-height: var(--nd-zeile-mittel); }

.recht__kurz {
  margin-top: var(--nd-a7);
  padding: var(--nd-a5);
  background: var(--nd-flaeche);
  border: 1px solid var(--nd-linie-leise);
  border-left: 2px solid var(--nd-akzent);
  border-radius: var(--nd-r3);
}

.recht__kurz h2 { margin-top: 0; }

.recht__zurueck { margin-top: var(--nd-a8); }

.mitte {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--nd-a4);
  padding-block: clamp(var(--nd-a9), 12vh, var(--nd-a10));
}

.mitte__haken {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--nd-r-rund);
  background: var(--nd-akzent);
  color: var(--nd-auf-akzent);
  margin-bottom: var(--nd-a2);
}

.mitte__titel { font-size: var(--nd-s9); }
.mitte__text { color: var(--nd-text-ruhig); max-width: 32rem; margin-bottom: var(--nd-a3); }

.code404 {
  font-family: var(--nd-mono);
  font-size: clamp(4rem, 16vw, 9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--nd-lauf-eng);
  /* Ein Umriss statt einer Flaeche: technisch, und er drueckt die
     Ueberschrift darunter nicht weg. */
  color: transparent;
  -webkit-text-stroke: 1.5px var(--nd-linie-stark);
  margin-bottom: var(--nd-a4);
}

.code404__pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--nd-a3);
  padding: var(--nd-a3) var(--nd-a4);
  background: var(--nd-flaeche);
  border: 1px solid var(--nd-linie-leise);
  border-radius: var(--nd-r2);
  margin-bottom: var(--nd-a3);
  max-width: 100%;
}

.code404__kopf {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
}

.code404__pfad code { color: var(--nd-text-ruhig); overflow-wrap: anywhere; }


/* ===========================================================================
   16. EINBLENDEN BEIM SCROLLEN
   ===========================================================================
   Das Skript setzt data-sicht="ja", sobald ein Abschnitt in den Blick
   kommt. OHNE JAVASCRIPT IST ALLES SICHTBAR — der Startzustand ist
   `opacity: 1`, und erst das Skript setzt ihn herunter (siehe
   js/oberflaeche.js). Umgekehrt waere die Seite ohne Skript leer; am
   04.10.2026 blieben auf n-developing.info Abschnitte beim zuegigen
   Scrollen leer, weil die Blende zu spaet begann. */

[data-blende] {
  opacity: 1;
  transform: none;
}

[data-blende="warte"] {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
}

[data-blende="da"] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity var(--nd-weich-lang), transform var(--nd-weich-lang),
              filter var(--nd-weich-lang);
}

@media (prefers-reduced-motion: reduce) {
  [data-blende="warte"] { opacity: 1; transform: none; filter: none; }
}