/* ===========================================================================
   N-Developing V2 — die grossen Bausteine
   ===========================================================================

   Plan: ~/Documents/GPT/plans/2026-10-04-n-developing-info-v2.md
   Setzt marke.css (Farben, Masse) und bausteine.css voraus, wird danach
   geladen.

   WARUM EINE EIGENE DATEI
   bausteine.css traegt 28 laufende Seiten. Die V2-Bausteine stehen hier
   daneben, damit ein Fehler nicht sofort ueberall ist. Was sich bewaehrt,
   wandert spaeter zurueck.

   INHALT
    1. Editorial-Typografie (die grossen Aussagen)
    2. Zeitleiste der Geschichte
    3. "Heute" — das Arbeitsmodell
    4. "Morgen" — JETZT / ALS NAECHSTES / SPAETER
    5. "Offen gesagt" — das Statement
    6. Hero-Pipeline
    7. Off-Canvas-Navigation
    8. Formular-Zustaende
    9. Micro Interactions
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. EDITORIAL-TYPOGRAFIE

   Groesser als alles andere auf der Seite. Die Werte und das Statement
   sollen gelesen werden, nicht ueberflogen — und was man ueberfliegen
   kann, ueberfliegt man.
   --------------------------------------------------------------------------- */

:root {
  --v2-gross: clamp(2rem, 4.6vw + 1rem, 4rem);
  --v2-riesig: clamp(2.4rem, 6vw + 1rem, 5.25rem);
}

.ed {
  display: grid;
  gap: var(--nd-a2);
  padding-block: clamp(var(--nd-a8), 8vw, var(--nd-a10));
  border-top: 1px solid var(--nd-linie-leise);
}

.ed:first-child { border-top: 0; }

@media (min-width: 900px) {
  .ed {
    grid-template-columns: minmax(0, 5rem) minmax(0, 1fr);
    gap: var(--nd-a7);
    align-items: start;
  }
}

.ed__nr {
  font-family: var(--nd-mono);
  font-size: var(--nd-s5);
  font-weight: 500;
  color: var(--nd-akzent);
  padding-top: 0.5em;
}

.ed__titel {
  font-size: var(--v2-gross);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.04;
  max-width: 18ch;
}

/* Die zweite Zeile einer Wert-Aussage steht gedaempft — das macht aus
   zwei Saetzen eine Figur. */
.ed__titel span { display: block; color: var(--nd-text-leise); }

.ed__text {
  margin-top: var(--nd-a5);
  max-width: 44ch;
  font-size: var(--nd-s6);
  color: var(--nd-text-ruhig);
}

/* ---------------------------------------------------------------------------
   2. ZEITLEISTE DER GESCHICHTE

   Senkrecht am Handy, waagerecht ab 900px. Vier Kapitel, feste
   Spaltenzahl — nie auto-fit (siehe Regel in marke.css).
   --------------------------------------------------------------------------- */

.gz { position: relative; }

.gz__liste {
  position: relative;
  display: grid;
  gap: var(--nd-a7);
  margin: 0;
}

/* Die Linie, an der die Kapitel haengen. Zwei Lagen: eine ruhende graue
   und darueber eine, die beim Scrollen mitwaechst. */
.gz__liste::before,
.gz__liste::after {
  content: '';
  position: absolute;
  inset-block: 14px auto;
  inset-inline-start: 13px;
  width: 2px;
  height: calc(100% - 28px);
  border-radius: 2px;
}

.gz__liste::before { background: var(--nd-linie); }

.gz__liste::after {
  background: linear-gradient(180deg, var(--nd-akzent), var(--nd-akzent-dunkel));
  transform-origin: top;
  transform: scaleY(var(--fortschritt, 0));
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gz__schritt {
  position: relative;
  padding-inline-start: calc(var(--nd-a7) + var(--nd-a2));
}

/* Der Punkt auf der Linie */
.gz__punkt {
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--nd-grund);
  border: 2px solid var(--nd-linie-stark);
  border-radius: 50%;
  font-family: var(--nd-mono);
  font-size: 10px;
  color: var(--nd-text-leise);
  transition: border-color var(--nd-weich), color var(--nd-weich),
              box-shadow var(--nd-weich), transform var(--nd-weich);
}

.gz__schritt.ist-aktiv .gz__punkt {
  border-color: var(--nd-akzent);
  color: var(--nd-akzent);
  box-shadow: 0 0 0 5px var(--nd-akzent-leise);
  transform: scale(1.08);
}

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

.gz__schritt.ist-aktiv .gz__zeit { color: var(--nd-akzent); }

.gz__name {
  margin-top: var(--nd-a2);
  font-size: var(--nd-s8);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.gz__kurz {
  margin-top: var(--nd-a2);
  font-size: var(--nd-s6);
  color: var(--nd-text-ruhig);
}

.gz__text {
  margin-top: var(--nd-a4);
  max-width: 46ch;
  font-size: var(--nd-s4);
  color: var(--nd-text-leise);
}

/* --- waagerecht ab 900px --- */
@media (min-width: 900px) {
  .gz__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nd-a5);
  }

  .gz__liste::before,
  .gz__liste::after {
    inset: 13px 0 auto 0;
    width: calc(100% - 0px);
    height: 2px;
  }

  .gz__liste::after {
    transform-origin: left;
    transform: scaleX(var(--fortschritt, 0));
  }

  .gz__schritt { padding: calc(var(--nd-a7) + var(--nd-a1)) var(--nd-a4) 0 0; }
  .gz__punkt { top: 0; }
  .gz__name { font-size: var(--nd-s7); }
  .gz__kurz { font-size: var(--nd-s5); }
  .gz__text { font-size: var(--nd-s3); }
}

/* ---------------------------------------------------------------------------
   3. "HEUTE" — das Arbeitsmodell

   Ehrlich statt gross: ein Kopf, lose Unterstuetzung, vier Felder. Kein
   Organigramm, das ein Team vortaeuscht, das es nicht gibt.
   --------------------------------------------------------------------------- */

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

@media (min-width: 900px) {
  .hm { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--nd-a8); align-items: center; }
}

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

.hm__person {
  display: grid;
  gap: 2px;
  padding: var(--nd-a5);
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r3);
}

.hm__person[data-art="kopf"] {
  border-color: var(--nd-akzent-linie);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--nd-akzent) 8%, var(--nd-karte)), var(--nd-karte));
}

/* Die lose Unterstuetzung ist gestrichelt — das ist die ehrliche
   Darstellung von "hilft gelegentlich mit". */
.hm__person[data-art="lose"] { border-style: dashed; background: transparent; }

.hm__person-name { font-size: var(--nd-s6); font-weight: 600; }
.hm__person-rolle { font-size: var(--nd-s3); color: var(--nd-text-leise); }

.hm__felder {
  display: grid;
  gap: var(--nd-a3);
  position: relative;
}

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

.hm__feld {
  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), transform var(--nd-weich);
}

.hm__feld:hover { border-color: var(--nd-linie-stark); transform: translateY(-2px); }

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

.hm__feld-text { margin-top: var(--nd-a2); font-size: var(--nd-s3); color: var(--nd-text-ruhig); }

/* ---------------------------------------------------------------------------
   4. "MORGEN" — drei Stufen
   --------------------------------------------------------------------------- */

.mo__stufen {
  display: grid;
  gap: var(--nd-a4);
  margin: 0;
  counter-reset: stufe;
}

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

.mo__stufe {
  position: relative;
  padding: var(--nd-a6) var(--nd-a5);
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r3);
  overflow: hidden;
}

/* Die Stufen werden nach hinten blasser: jetzt ist konkret, spaeter ist
   eine Absicht. Das ist ehrlicher als drei gleich starke Versprechen. */
.mo__stufe:nth-child(2) { opacity: 0.88; }
.mo__stufe:nth-child(3) { opacity: 0.74; }

.mo__stufe::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--nd-akzent);
}

.mo__stufe:nth-child(2)::before { background: var(--nd-akzent-dunkel); }
.mo__stufe:nth-child(3)::before { background: var(--nd-linie-stark); }

.mo__name {
  font-family: var(--nd-mono);
  font-size: var(--nd-s2);
  font-weight: 500;
  letter-spacing: var(--nd-lauf-weit);
  color: var(--nd-akzent);
}

.mo__stufe:nth-child(3) .mo__name { color: var(--nd-text-leise); }

.mo__text { margin-top: var(--nd-a3); font-size: var(--nd-s5); color: var(--nd-text-ruhig); }

/* ---------------------------------------------------------------------------
   5. "OFFEN GESAGT" — das Statement

   Bewusst anders als der Rest der Seite: heller Grund, grosse Schrift,
   keine Dekoration. Wer bis hierher gescrollt hat, soll merken, dass
   jetzt etwas anderes kommt.
   --------------------------------------------------------------------------- */

.og {
  padding-block: clamp(var(--nd-a9), 10vw, var(--nd-a10));
  background: var(--nd-text);
  color: var(--nd-grund);
}

.og__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-dunkel);
}

.og__marke::before {
  content: '';
  width: 14px;
  height: 1px;
  background: currentColor;
}

.og__satz {
  margin-top: var(--nd-a6);
  max-width: 20ch;
  font-size: var(--v2-riesig);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.og__text {
  margin-top: var(--nd-a7);
  max-width: 52ch;
  font-size: var(--nd-s6);
  color: #3f464c;
}

/* ---------------------------------------------------------------------------
   6. HERO-PIPELINE

   IDEA -> DESIGN -> CODE -> API -> DATABASE -> DEPLOYMENT.
   Zeigt den Ablauf statt des Aufbaus — der Aufbau steht in den
   Fallstudien.
   --------------------------------------------------------------------------- */

.pl2 {
  position: relative;
  margin: 0;
  padding: clamp(var(--nd-a5), 3vw, var(--nd-a6));
  background: linear-gradient(170deg, var(--nd-karte), var(--nd-flaeche));
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r4);
}

.pl2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(var(--nd-linie-leise) 1px, transparent 1px),
    linear-gradient(90deg, var(--nd-linie-leise) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 25% 0%, #000 8%, transparent 72%);
  pointer-events: none;
}

.pl2__kette {
  position: relative;
  display: grid;
  gap: var(--nd-a2);
  margin: 0;
}

.pl2__glied {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--nd-a4);
  padding: var(--nd-a4) var(--nd-a5);
  background: color-mix(in srgb, var(--nd-karte-hoch) 72%, transparent);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r2);
  transition: border-color var(--nd-weich), transform var(--nd-weich),
              background var(--nd-weich);
}

/* Der Pfeil zwischen zwei Gliedern */
.pl2__glied:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--nd-a5) + 7px);
  bottom: calc(var(--nd-a2) * -1 - 1px);
  width: 1px;
  height: var(--nd-a2);
  background: var(--nd-linie-stark);
}

.pl2__glied:hover {
  border-color: var(--nd-akzent-linie);
  background: color-mix(in srgb, var(--nd-akzent) 6%, var(--nd-karte-hoch));
  transform: translateX(3px);
}

.pl2__punkt {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 2px solid var(--nd-linie-stark);
  border-radius: 50%;
  transition: border-color var(--nd-weich), background var(--nd-weich),
              box-shadow var(--nd-weich);
}

/* Der Durchlauf: ein Glied nach dem anderen leuchtet kurz auf.
   Verzoegerung je Glied ueber --takt aus dem Markup. */
.pl2__glied .pl2__punkt {
  animation: pl2-takt 7s ease-in-out infinite;
  animation-delay: calc(var(--takt) * 0.42s);
}

@keyframes pl2-takt {
  0%, 6%   { border-color: var(--nd-linie-stark); background: transparent; box-shadow: none; }
  10%      { border-color: var(--nd-akzent); background: var(--nd-akzent);
             box-shadow: 0 0 0 4px var(--nd-akzent-leise); }
  22%, 100% { border-color: var(--nd-linie-stark); background: transparent; box-shadow: none; }
}

.pl2__name {
  font-family: var(--nd-mono);
  font-size: var(--nd-s3);
  font-weight: 500;
  color: var(--nd-text);
  letter-spacing: 0.02em;
}

.pl2__notiz {
  margin-inline-start: auto;
  font-size: var(--nd-s2);
  color: var(--nd-text-leise);
  text-align: end;
}

@media (max-width: 479px) {
  .pl2__notiz { display: none; }
}

.pl2__fuss {
  display: flex;
  align-items: center;
  gap: var(--nd-a2);
  margin-top: var(--nd-a5);
  padding-top: var(--nd-a4);
  border-top: 1px solid var(--nd-linie-leise);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
}

/* ---------------------------------------------------------------------------
   7. OFF-CANVAS-NAVIGATION

   Faehrt von rechts herein, statt den Inhalt nach unten zu schieben. Die
   Seite dahinter bleibt sichtbar — das macht klar, dass man nicht
   weggegangen ist.
   --------------------------------------------------------------------------- */

.oc {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
}

.oc[data-offen="true"] { visibility: visible; }

.oc__schleier {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 10, 0.72);
  opacity: 0;
  transition: opacity var(--nd-weich);
  border: 0;
  width: 100%;
  cursor: pointer;
}

@supports (backdrop-filter: blur(4px)) {
  .oc__schleier { backdrop-filter: blur(3px); }
}

.oc[data-offen="true"] .oc__schleier { opacity: 1; }

.oc__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(23rem, 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--nd-a5);
  padding: var(--nd-a6) var(--nd-a5) var(--nd-a7);
  background: var(--nd-flaeche);
  border-inline-start: 1px solid var(--nd-linie);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.oc[data-offen="true"] .oc__panel { transform: none; }

.oc__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nd-a4);
}

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

.oc__zu {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r2);
  color: var(--nd-text);
  cursor: pointer;
  transition: border-color var(--nd-weich), background var(--nd-weich);
}

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

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

.oc__liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding-inline: var(--nd-a4);
  border-radius: var(--nd-r2);
  color: var(--nd-text);
  font-size: var(--nd-s7);
  font-weight: 550;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background var(--nd-weich), padding-inline-start var(--nd-weich);
}

.oc__liste a::after {
  content: '→';
  opacity: 0;
  color: var(--nd-akzent);
  transition: opacity var(--nd-weich), transform var(--nd-weich);
  transform: translateX(-6px);
}

.oc__liste a:hover,
.oc__liste a:focus-visible {
  background: var(--nd-karte);
  padding-inline-start: var(--nd-a5);
}

.oc__liste a:hover::after,
.oc__liste a:focus-visible::after { opacity: 1; transform: none; }

.oc__fuss { margin-top: auto; display: grid; gap: var(--nd-a4); }

.oc__sprache {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nd-a2);
  min-height: 44px;
  font-family: var(--nd-mono);
  font-size: var(--nd-s2);
  letter-spacing: var(--nd-lauf-weit);
  text-transform: uppercase;
  color: var(--nd-text-leise);
  text-decoration: none;
}

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

/* Ohne JavaScript gibt es kein Off-Canvas — dann liegt die Navigation
   offen da (siehe .mn in bausteine.css). Das Panel bleibt dann aus. */
html:not(.js) .oc { display: none; }

/* ---------------------------------------------------------------------------
   8. FORMULAR-ZUSTAENDE
   --------------------------------------------------------------------------- */

.fm__senden[data-laedt="true"] {
  pointer-events: none;
  opacity: 0.75;
}

.fm__senden[data-laedt="true"] .fm__knopf-text { visibility: hidden; }

/* Der Ladering sitzt im Knopf, damit nichts springt. */
.fm__dreher {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0;
  animation: fm-dreht 700ms linear infinite;
}

.fm__senden[data-laedt="true"] .fm__dreher { opacity: 1; }

@keyframes fm-dreht { to { transform: rotate(360deg); } }

.fm__senden { position: relative; }

/* Erfolg an Ort und Stelle, statt die Seite zu wechseln. */
.fm__erfolg {
  display: grid;
  gap: var(--nd-a4);
  padding: clamp(var(--nd-a6), 4vw, var(--nd-a8));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--nd-akzent) 9%, var(--nd-karte)), var(--nd-karte));
  border: 1px solid var(--nd-akzent-linie);
  border-radius: var(--nd-r4);
  text-align: center;
}

.fm__erfolg[hidden] { display: none; }

.fm__haken-kreis {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--nd-akzent);
  border-radius: 50%;
  color: var(--nd-auf-akzent);
}

.fm__erfolg-titel { font-size: var(--nd-s8); font-weight: 650; }
.fm__erfolg-text { max-width: 36ch; margin-inline: auto; color: var(--nd-text-ruhig); }

/* ---------------------------------------------------------------------------
   9. MICRO INTERACTIONS
   --------------------------------------------------------------------------- */

/* Textlinks bekommen eine Unterlinie, die von links einlaeuft. */
.nd-verweis {
  position: relative;
}

.nd-verweis::after {
  content: '';
  position: absolute;
  inset-inline: 0 auto;
  bottom: 10px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--nd-weich);
}

.nd-verweis:hover::after { width: calc(100% - 20px); }

/* Knoepfe federn beim Druecken minimal ein — das ist die einzige
   Rueckmeldung, die ein Zeigegeraet ohne Verzoegerung geben kann. */
.nd-knopf:active { transform: translateY(1px) scale(0.995); }

/* Gestaffeltes Einblenden: Kinder eines Bereichs kommen nacheinander,
   nicht alle auf einmal. 60ms Abstand reicht, um Reihenfolge zu zeigen,
   ohne dass man wartet. */
.js [data-staffel] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js [data-staffel].ist-da > * { opacity: 1; transform: none; }

.js [data-staffel].ist-da > *:nth-child(1) { transition-delay: 0ms; }
.js [data-staffel].ist-da > *:nth-child(2) { transition-delay: 60ms; }
.js [data-staffel].ist-da > *:nth-child(3) { transition-delay: 120ms; }
.js [data-staffel].ist-da > *:nth-child(4) { transition-delay: 180ms; }
.js [data-staffel].ist-da > *:nth-child(5) { transition-delay: 240ms; }
.js [data-staffel].ist-da > *:nth-child(6) { transition-delay: 300ms; }

/* ---------------------------------------------------------------------------
   WENIGER BEWEGUNG

   Gesammelt am Ende, damit es alles darueber ueberschreibt. Keine
   Ausnahme: wer das einstellt, hat einen Grund.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gz__liste::after { transform: none; }
  .pl2__glied .pl2__punkt { animation: none; }
  .fm__dreher { animation: none; }
  .js [data-staffel] > * { opacity: 1; transform: none; transition: none; }
  .oc__panel { transition: none; }
}

/* ---------------------------------------------------------------------------
   NACHTRAG: zwei Fehler aus dem Test des Erfolgszustands

   1. `display: grid` auf .fm schlaegt das hidden-Attribut. Das Formular
      blieb deshalb neben der Erfolgsmeldung stehen. Derselbe Fehler wie
      seinerzeit im Dashboard — ein gesetztes `display` gewinnt immer gegen
      `hidden`, also muss es ausdruecklich zurueckgenommen werden.
   2. Der Erfolgsblock stand in der zweiten Spalte, weil er im Raster das
      naechste freie Feld nahm. Er soll dort stehen, wo das Formular war.
   --------------------------------------------------------------------------- */

.fm[hidden] { display: none; }

@media (min-width: 960px) {
  .fm__erfolg { grid-column: 1; }
}

/* Auch hier schlaegt ein gesetztes `display` das hidden-Attribut. */
.fm__fehler[hidden] { display: none; }