/* ===========================================================================
   N-Developing — Bausteine
   ===========================================================================

   Setzt css/marke.css voraus (Farben, Masse, Grundlagen) und wird danach
   geladen.

   REIHENFOLGE
    1. Knoepfe und Verweise
    2. Kopfzeile und mobiles Menue
    3. Abschnitts-Geruest
    4. Hero und Hero-Visual
    5. Einfuehrung
    6. Bereiche (vier Karten)
    7. Technik-Raster
    8. Zeitleiste
    9. Projekte
   10. Prinzipien und Werte
   11. Vision
   12. Verweis-Karten (Store, Developer)
   13. Ruf-Abschnitt
   14. Unterseiten-Bausteine (Leistungen, Gruppen, FAQ, Rechtstexte)
   15. Formular
   16. Fussbereich
   17. Einblenden beim Scrollen

   JEDES RASTER HAENGT AN EINEM UMBRUCHPUNKT, nie an `auto-fit`: sonst
   entscheidet die Bildschirmbreite ueber die Spaltenzahl statt die Anzahl
   der Inhalte, und bei fuenf Eintraegen in einem Vier-Spalten-Raster fallen
   Inhalte nach unten weg.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. KNOEPFE UND VERWEISE

   Mindesthoehe 44px — auch der kleine Knopf. Am Handy ist alles darunter
   ein Glueckstreffer statt eines Klickziels.
   --------------------------------------------------------------------------- */

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

.nd-knopf--gross {
  min-height: 50px;
  padding-inline: var(--nd-a6);
  font-size: var(--nd-s5);
}

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

.nd-knopf--akzent:hover { background: var(--nd-akzent-hell); }
.nd-knopf--akzent:active { transform: translateY(1px); }

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

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

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

.nd-knopf--still {
  background: var(--nd-karte);
  border-color: var(--nd-linie);
  color: var(--nd-text-ruhig);
}

.nd-knopf--still:hover { color: var(--nd-text); border-color: var(--nd-linie-stark); }

/* Der Text-Verweis mit Pfeil. Der Pfeil rueckt beim Hover nach — eine
   Bewegung von 3px, die man spuert statt sieht. */
.nd-verweis {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-a2);
  min-height: 44px;
  color: var(--nd-akzent);
  font-weight: 550;
  text-decoration: none;
}

.nd-verweis span { transition: transform var(--nd-weich); }
.nd-verweis:hover span { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   2. KOPFZEILE
   --------------------------------------------------------------------------- */

.kz {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--nd-grund) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: background var(--nd-weich), border-color var(--nd-weich);
}

/* Weichzeichnen nur, wenn der Browser es kann — sonst bleibt die Flaeche
   deckend, statt den Text unlesbar zu machen. */
@supports (backdrop-filter: blur(12px)) {
  .kz { backdrop-filter: blur(14px) saturate(140%); }
}

@supports not (backdrop-filter: blur(12px)) {
  .kz { background: var(--nd-grund); }
}

/* Kompakter Zustand: von js/oberflaeche.js gesetzt, sobald gescrollt wird. */
.kz[data-kompakt="true"] {
  border-bottom-color: var(--nd-linie);
  background: color-mix(in srgb, var(--nd-grund) 94%, transparent);
}

.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: inline-flex;
  align-items: center;
  gap: var(--nd-a3);
  min-height: 44px;
  color: var(--nd-text);
  font-size: var(--nd-s5);
  font-weight: 600;
  letter-spacing: var(--nd-lauf-eng);
  text-decoration: none;
  flex-shrink: 0;
}

.kz__zeichen {
  display: grid;
  place-items: center;
  color: var(--nd-akzent);
  transition: transform var(--nd-weich);
}

.kz__marke:hover .kz__zeichen { transform: translateY(-1px); }

.kz__nav { margin-inline-start: auto; }

/* Unter 1000px traegt die Zeile die sechs Punkte nicht mehr ohne Gedraengel.
   Dann uebernimmt das mobile Menue. */
@media (max-width: 999px) {
  .kz__nav { display: none; }
}

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

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

.kz__liste a:hover { color: var(--nd-text); background: var(--nd-flaeche); }

/* Die aktive Seite. Ueber ein Attribut am <body> statt per JavaScript, damit
   die Markierung auch ohne Skript stimmt. */
body[data-seite="leistungen"]   a[data-ziel="leistungen"],
body[data-seite="technologien"] a[data-ziel="technologien"],
body[data-seite="projekte"]     a[data-ziel="projekte"],
body[data-seite="ueber"]        a[data-ziel="ueber"],
body[data-seite="faq"]          a[data-ziel="faq"],
body[data-seite="kontakt"]      a[data-ziel="kontakt"] {
  color: var(--nd-akzent);
}

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

@media (min-width: 1000px) {
  .kz__rechts { margin-inline-start: var(--nd-a5); }
}

.kz__sprache {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-a1);
  min-height: 44px;
  padding-inline: var(--nd-a3);
  border-radius: var(--nd-r2);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  font-weight: 500;
  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 { background: var(--nd-flaeche); }
.kz__sprache-aktiv { color: var(--nd-text); }
.kz__sprache-trenn { opacity: 0.5; }
.kz__sprache:hover .kz__sprache-andere { color: var(--nd-akzent); }

/* Der Haupt-Ruf verschwindet am Handy: dort steht er im Menue, und zwei
   gleich starke Knoepfe nebeneinander ergeben keine Hierarchie. */
@media (max-width: 599px) {
  .kz__ruf { display: none; }
}

/* Hamburger. Drei Striche ueber Pseudo-Elemente, damit nur ein Element
   im Markup steht. */
.kz__menue {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r2);
  cursor: pointer;
  transition: border-color var(--nd-weich);
}

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

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

.kz__balken,
.kz__balken::before,
.kz__balken::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--nd-text);
  border-radius: 2px;
  transition: transform var(--nd-weich), opacity var(--nd-weich);
}

.kz__balken::before,
.kz__balken::after {
  content: '';
  position: absolute;
}

.kz__balken::before { transform: translateY(-6px); }
.kz__balken::after  { transform: translateY(6px); }

/* Offenes Menue: aus drei Strichen wird ein Kreuz. */
.kz__menue[aria-expanded="true"] .kz__balken { background: transparent; }
.kz__menue[aria-expanded="true"] .kz__balken::before { transform: rotate(45deg); }
.kz__menue[aria-expanded="true"] .kz__balken::after  { transform: rotate(-45deg); }

/* Mobiles Menue */
.mn {
  border-top: 1px solid var(--nd-linie);
  background: var(--nd-grund);
  max-height: calc(100dvh - var(--nd-kopf-kompakt));
  overflow-y: auto;
}

.mn[hidden] { display: none; }

/* Ab 1000px gibt es die normale Navigation in der Kopfzeile — dort hat das
   mobile Menue nichts zu suchen, auch nicht ohne JavaScript. */
@media (min-width: 1000px) {
  .mn { display: none; }
}

.mn__innen { padding-block: var(--nd-a5) var(--nd-a6); }

.mn__liste {
  display: grid;
  gap: var(--nd-a1);
  margin-bottom: var(--nd-a5);
}

.mn__liste a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--nd-a4);
  border-radius: var(--nd-r2);
  color: var(--nd-text);
  font-size: var(--nd-s6);
  font-weight: 500;
  text-decoration: none;
}

.mn__liste a:hover { background: var(--nd-flaeche); }
.mn__ruf { width: 100%; }

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

.ab--flaeche {
  background: var(--nd-flaeche);
  border-block: 1px solid var(--nd-linie-leise);
}

.ab__kopf {
  max-width: 44rem;
  margin-bottom: clamp(var(--nd-a6), 4vw, var(--nd-a8));
}

.ab__kopf--breit { max-width: 52rem; }

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

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

.ab__nach { margin-top: var(--nd-a6); }

/* ---------------------------------------------------------------------------
   4. HERO
   --------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(var(--nd-a8), 9vw, var(--nd-a10)) clamp(var(--nd-a8), 8vw, var(--nd-a10));
  overflow: hidden;
}

/* Ein sehr leiser Lichtschein hinter der Ueberschrift. Kein Glow-Effekt,
   nur so viel, dass die Flaeche nicht toter Hintergrund ist. */
.hero::before {
  content: '';
  position: absolute;
  inset-inline-start: -10%;
  top: -30%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(50, 212, 106, 0.07) 0%, transparent 62%);
  pointer-events: none;
}

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

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

.hero__titel {
  display: grid;
  margin-top: var(--nd-a5);
  font-size: var(--nd-s10);
  font-weight: 650;
  letter-spacing: -0.04em;
}

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

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

.hero__rufe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-a3);
  margin-top: clamp(var(--nd-a6), 3vw, var(--nd-a7));
}

@media (max-width: 439px) {
  .hero__rufe .nd-knopf { width: 100%; }
}

/* --- Hero-Visual: die Schichten --- */

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

/* Feines Gitter im Hintergrund — die technische Anmutung kommt daher,
   nicht aus Leuchteffekten. */
.hv::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: 28px 28px;
  mask-image: radial-gradient(ellipse at 30% 0%, #000 10%, transparent 75%);
  pointer-events: none;
}

.hv__buehne {
  position: absolute;
  inset-block: var(--nd-a7);
  inset-inline-start: calc(var(--nd-a5) + 21px);
  width: 2px;
  pointer-events: none;
}

/* Die senkrechte Achse, an der die Schichten haengen. */
.hv__achse {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent, var(--nd-linie-stark) 12%, var(--nd-linie-stark) 88%, transparent);
}

/* Das Signal laeuft die Kette durch: Client fragt, Infrastruktur traegt.
   8 Sekunden, damit es nicht zappelt. */
.hv__signal {
  position: absolute;
  inset-inline: -3px;
  height: 56px;
  border-radius: var(--nd-r-rund);
  background: linear-gradient(180deg, transparent, var(--nd-akzent), transparent);
  opacity: 0.85;
  animation: hv-lauf 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes hv-lauf {
  0%,
  8%   { transform: translateY(-56px); opacity: 0; }
  18%  { opacity: 0.9; }
  82%  { opacity: 0.9; }
  92%,
  100% { transform: translateY(100%); opacity: 0; }
}

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

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

/* Die Schichten liegen leicht gestaffelt — die unteren weiter eingerueckt.
   Das macht aus einer Liste einen Stapel, ohne 3D-Effekt. */
@media (min-width: 560px) {
  .hv__schicht { margin-inline-start: calc((var(--reihe) - 1) * 10px); }
}

.hv__schicht:hover {
  border-color: var(--nd-akzent-linie);
  transform: translateX(3px);
}

.hv__nr {
  flex-shrink: 0;
  width: 26px;
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-text-leise);
}

.hv__kern { display: grid; gap: 2px; min-width: 0; }

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

.hv__notiz {
  font-size: var(--nd-s2);
  color: var(--nd-text-leise);
  line-height: var(--nd-zeile-mittel);
}

.hv__punkt {
  flex-shrink: 0;
  margin-inline-start: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nd-linie-stark);
  transition: background var(--nd-weich), box-shadow var(--nd-weich);
}

.hv__schicht:hover .hv__punkt {
  background: var(--nd-akzent);
  box-shadow: 0 0 0 4px var(--nd-akzent-leise);
}

.hv__beschriftung {
  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);
}

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

/* ---------------------------------------------------------------------------
   5. EINFUEHRUNG
   --------------------------------------------------------------------------- */

.ein__gitter {
  display: grid;
  gap: clamp(var(--nd-a6), 4vw, var(--nd-a8));
}

@media (min-width: 900px) {
  .ein__gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ein__text { display: grid; gap: var(--nd-a4); font-size: var(--nd-s5); }
.ein__text p { color: var(--nd-text-ruhig); }

.ein__punkte { display: grid; gap: var(--nd-a4); margin: 0; }

.ein__punkt {
  padding: var(--nd-a5);
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r3);
  border-inline-start: 2px solid var(--nd-akzent-linie);
}

.ein__punkt-titel {
  margin-bottom: var(--nd-a2);
  font-size: var(--nd-s5);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   6. BEREICHE — vier Karten
   --------------------------------------------------------------------------- */

.br__gitter {
  display: grid;
  gap: var(--nd-a4);
  margin: 0;
}

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

.br {
  display: flex;
  flex-direction: column;
  gap: var(--nd-a3);
  padding: var(--nd-a5);
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r3);
  transition: border-color var(--nd-weich), background var(--nd-weich),
              transform var(--nd-weich);
}

.br:hover {
  border-color: var(--nd-linie-stark);
  background: var(--nd-karte-hoch);
  transform: translateY(-2px);
}

/* Die Sinnbilder sind gezeichnet, nicht geladen: vier einfache Formen aus
   Rahmen und Pseudo-Elementen. Kein Icon-Paket, keine zusaetzliche Datei. */
.br__sinnbild {
  position: relative;
  width: 34px;
  height: 34px;
  margin-bottom: var(--nd-a2);
  border: 1.5px solid var(--nd-akzent);
  border-radius: var(--nd-r1);
  color: var(--nd-akzent);
}

/* Software: ein Fenster mit Titelzeile */
.br__sinnbild[data-sinnbild="fenster"]::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  border-bottom: 1.5px solid currentColor;
}

/* Web: ein Globus, angedeutet durch zwei Ellipsen */
.br__sinnbild[data-sinnbild="globus"] { border-radius: 50%; }
.br__sinnbild[data-sinnbild="globus"]::before {
  content: '';
  position: absolute;
  inset: -1.5px 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.br__sinnbild[data-sinnbild="globus"]::after {
  content: '';
  position: absolute;
  inset-inline: -1.5px;
  top: 50%;
  border-top: 1.5px solid currentColor;
}

/* Automation: ein Kreislauf */
.br__sinnbild[data-sinnbild="kreis"] {
  border-radius: 50%;
  border-style: dashed;
}
.br__sinnbild[data-sinnbild="kreis"]::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
}

/* Infrastructure: drei gestapelte Schichten */
.br__sinnbild[data-sinnbild="stapel"] { border: 0; }
.br__sinnbild[data-sinnbild="stapel"]::before,
.br__sinnbild[data-sinnbild="stapel"]::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.br__sinnbild[data-sinnbild="stapel"]::before { top: 0; }
.br__sinnbild[data-sinnbild="stapel"]::after  { bottom: 0; opacity: 0.5; }

.br__name { font-size: var(--nd-s7); font-weight: 600; }
.br__text { flex: 1; font-size: var(--nd-s4); }

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

.br__mehr span { transition: transform var(--nd-weich); }
.br:hover .br__mehr span { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   7. TECHNIK-RASTER

   Keine Logo-Wand: nur Namen, in Mono, als ruhige Reihe. Das Briefing
   verlangt ausdruecklich "clean, minimal" statt riesiger Logos — und es
   spart 17 Bilddateien.
   --------------------------------------------------------------------------- */

.tk__gitter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-a2);
  margin: 0;
}

.tk {
  padding: var(--nd-a3) var(--nd-a4);
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r2);
  font-family: var(--nd-mono);
  font-size: var(--nd-s3);
  color: var(--nd-text-ruhig);
  transition: border-color var(--nd-weich), color var(--nd-weich),
              background var(--nd-weich);
}

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

/* ---------------------------------------------------------------------------
   8. ZEITLEISTE

   Am Handy senkrecht, ab 900px waagerecht — wie im Briefing. Die Linie
   liegt in beiden Faellen hinter den Nummern.
   --------------------------------------------------------------------------- */

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

/* senkrecht (Handy) */
.zl::before {
  content: '';
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 15px;
  width: 1px;
  background: linear-gradient(180deg,
    var(--nd-akzent-linie), var(--nd-linie) 35%, var(--nd-linie));
}

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

.zl__nr {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--nd-grund);
  border: 1px solid var(--nd-linie-stark);
  border-radius: 50%;
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-text-leise);
}

.zl__schritt:first-child .zl__nr {
  border-color: var(--nd-akzent);
  color: var(--nd-akzent);
}

.zl__name { font-size: var(--nd-s6); font-weight: 600; }
.zl__text { margin-top: var(--nd-a2); font-size: var(--nd-s4); }

/* waagerecht (Desktop) — sechs Spalten, feste Zahl statt auto-fit */
@media (min-width: 900px) {
  .zl {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--nd-a4);
  }

  .zl::before {
    inset: 15px 0 auto 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      var(--nd-akzent-linie), var(--nd-linie) 30%, var(--nd-linie));
  }

  .zl__schritt { padding: calc(var(--nd-a7) + var(--nd-a1)) 0 0; }
  .zl__nr { top: 0; inset-inline-start: 0; }
  .zl__name { font-size: var(--nd-s5); }
  .zl__text { font-size: var(--nd-s3); }
}

/* ---------------------------------------------------------------------------
   9. PROJEKTE
   --------------------------------------------------------------------------- */

.pj__gitter {
  display: grid;
  gap: var(--nd-a4);
  margin: 0;
}

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

.pj {
  display: flex;
  flex-direction: column;
  gap: var(--nd-a4);
  padding: var(--nd-a6);
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r3);
  transition: border-color var(--nd-weich), transform var(--nd-weich);
}

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

/* Der Leerzustand sieht absichtlich anders aus als ein echtes Projekt:
   gestrichelt, ohne Flaeche. Niemand soll ihn fuer eine Referenz halten. */
.pj--leer {
  background: transparent;
  border-style: dashed;
}

.pj--leer:hover { transform: none; }

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

.pj__name { font-size: var(--nd-s7); font-weight: 600; }

.pj__status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--nd-a2);
  padding: var(--nd-a1) var(--nd-a3);
  background: var(--nd-akzent-leise);
  border: 1px solid var(--nd-akzent-linie);
  border-radius: var(--nd-r-rund);
  font-size: var(--nd-s2);
  font-weight: 550;
  color: var(--nd-akzent);
}

.pj__status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.pj__text { flex: 1; font-size: var(--nd-s4); }

.pj__daten {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nd-a2) var(--nd-a4);
  margin: 0;
  padding-top: var(--nd-a4);
  border-top: 1px solid var(--nd-linie-leise);
  font-size: var(--nd-s2);
}

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

.pj__daten dd { margin: 0; color: var(--nd-text-ruhig); }

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

.pj__link span { transition: transform var(--nd-weich); }
.pj:hover .pj__link span { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   10. PRINZIPIEN UND WERTE
   --------------------------------------------------------------------------- */

.wa__liste { display: grid; gap: var(--nd-a1); margin: 0; }

.wa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nd-a5);
  padding: var(--nd-a5) 0;
  border-top: 1px solid var(--nd-linie-leise);
}

.wa:last-child { border-bottom: 1px solid var(--nd-linie-leise); }

@media (min-width: 760px) {
  .wa { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--nd-a7); }
}

.wa__nr {
  font-family: var(--nd-mono);
  font-size: var(--nd-s5);
  font-weight: 500;
  color: var(--nd-akzent);
}

.wa__name {
  margin-bottom: var(--nd-a2);
  font-size: var(--nd-s7);
  font-weight: 600;
}

.wa__kern p { max-width: 54rem; font-size: var(--nd-s4); }

/* Werte: fuenf Eintraege. Deshalb KEIN Vier-Spalten-Raster — die fuenfte
   stuende allein. Ab 1100px fuenf Spalten, darunter zwei. */
.we__gitter {
  display: grid;
  gap: var(--nd-a4);
  margin: 0;
}

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

.we {
  padding-top: var(--nd-a4);
  border-top: 1px solid var(--nd-akzent-linie);
}

.we__name {
  margin-bottom: var(--nd-a2);
  font-size: var(--nd-s5);
  font-weight: 600;
}

.we__text { font-size: var(--nd-s3); }

/* ---------------------------------------------------------------------------
   11. VISION
   --------------------------------------------------------------------------- */

.vi {
  position: relative;
  padding-block: clamp(var(--nd-a9), 9vw, var(--nd-a10));
  border-block: 1px solid var(--nd-linie-leise);
  overflow: hidden;
}

.vi::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -40%;
  height: 90%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(50, 212, 106, 0.1) 0%, transparent 68%);
  pointer-events: none;
}

.vi__innen { position: relative; text-align: center; }

.vi__titel {
  display: grid;
  gap: var(--nd-a1);
  margin-top: var(--nd-a5);
  font-size: var(--nd-s9);
  font-weight: 650;
  letter-spacing: -0.035em;
}

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

.vi__text {
  max-width: 44rem;
  margin: var(--nd-a6) auto 0;
  font-size: var(--nd-s6);
  color: var(--nd-text-ruhig);
}

.vi__felder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nd-a2) var(--nd-a5);
  margin: clamp(var(--nd-a6), 4vw, var(--nd-a7)) 0 0;
}

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

/* ---------------------------------------------------------------------------
   12. VERWEIS-KARTEN — Store und Developer
   --------------------------------------------------------------------------- */

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

/* Der Store bekommt mehr Platz — er ist der Weg zum Kauf. Aber nicht die
   ganze Breite: die Firmenseite soll nicht zum Shop-Vorhof werden. */
@media (min-width: 860px) {
  .vw__gitter { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.vw {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nd-a4);
  padding: clamp(var(--nd-a5), 3vw, var(--nd-a7));
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r4);
}

.vw--store {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--nd-akzent) 7%, var(--nd-karte)), var(--nd-karte));
  border-color: var(--nd-akzent-linie);
}

.vw__titel { font-size: var(--nd-s8); font-weight: 600; }
.vw__text { flex: 1; max-width: 32rem; font-size: var(--nd-s5); }

/* ---------------------------------------------------------------------------
   13. RUF-ABSCHNITT
   --------------------------------------------------------------------------- */

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

.rf__innen { text-align: center; }

.rf__titel {
  margin-top: var(--nd-a5);
  font-size: var(--nd-s9);
  font-weight: 650;
}

.rf__text {
  margin: var(--nd-a5) auto 0;
  max-width: 34rem;
  font-size: var(--nd-s6);
  color: var(--nd-text-ruhig);
}

.rf__rufe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nd-a3);
  margin-top: var(--nd-a7);
}

@media (max-width: 439px) {
  .rf__rufe .nd-knopf { width: 100%; }
}

/* ---------------------------------------------------------------------------
   14. UNTERSEITEN-BAUSTEINE
   --------------------------------------------------------------------------- */

/* Seitenkopf der Unterseiten */
.sk {
  padding-block: clamp(var(--nd-a8), 6vw, var(--nd-a9)) clamp(var(--nd-a6), 4vw, var(--nd-a8));
  border-bottom: 1px solid var(--nd-linie-leise);
}

.sk__titel {
  margin-top: var(--nd-a5);
  font-size: var(--nd-s9);
  font-weight: 650;
}

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

/* Leistungs-Eintraege: je Leistung eine breite Karte mit drei Feldern */
.ls__liste { display: grid; gap: var(--nd-a5); margin: 0; }

.ls {
  padding: clamp(var(--nd-a5), 3vw, var(--nd-a7));
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r3);
  scroll-margin-top: calc(var(--nd-kopf-hoch) + var(--nd-a5));
}

.ls__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--nd-a4);
  margin-bottom: var(--nd-a4);
}

.ls__nr {
  font-family: var(--nd-mono);
  font-size: var(--nd-s3);
  color: var(--nd-akzent);
}

.ls__name { font-size: var(--nd-s7); font-weight: 600; }

.ls__was {
  max-width: 54rem;
  font-size: var(--nd-s5);
  color: var(--nd-text-ruhig);
}

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

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

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

.ls__feld dd {
  margin: 0;
  font-size: var(--nd-s3);
  color: var(--nd-text-ruhig);
}

/* Technik-Gruppen auf der Technologien-Seite */
.tg__liste { display: grid; gap: var(--nd-a6); margin: 0; }

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

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

.tg__name { font-size: var(--nd-s6); font-weight: 600; }

.tg__text {
  margin: var(--nd-a2) 0 var(--nd-a5);
  font-size: var(--nd-s3);
  color: var(--nd-text-leise);
}

/* Hinweis-Kasten */
.hk {
  padding: clamp(var(--nd-a5), 3vw, var(--nd-a6));
  background: var(--nd-flaeche);
  border: 1px solid var(--nd-linie);
  border-inline-start: 2px solid var(--nd-akzent);
  border-radius: var(--nd-r3);
}

.hk__titel { margin-bottom: var(--nd-a3); font-size: var(--nd-s6); font-weight: 600; }
.hk__text { max-width: 54rem; color: var(--nd-text-ruhig); }

/* Ein Kasten, der sichtbar markiert, dass hier noch eine Angabe von Nico
   fehlt. Bewusst auffaellig: er soll vor dem Livegang stoeren. */
.pl {
  margin-top: var(--nd-a5);
  padding: var(--nd-a4);
  background: rgba(227, 179, 65, 0.08);
  border: 1px dashed var(--nd-warnung);
  border-radius: var(--nd-r2);
  font-size: var(--nd-s2);
  color: var(--nd-warnung);
}

/* Kapitel auf der Ueber-Seite */
.kp__liste { display: grid; gap: var(--nd-a1); margin: 0; }

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

.kp:last-child { border-bottom: 1px solid var(--nd-linie-leise); }

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

.kp__name { font-size: var(--nd-s7); font-weight: 600; }
.kp__text { max-width: 52rem; font-size: var(--nd-s5); color: var(--nd-text-ruhig); }

/* Antwort-Schritte (Kontaktseite) */
.as__liste { display: grid; gap: var(--nd-a4); margin: 0; }

.as {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nd-a4);
  align-items: start;
}

.as__nr {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--nd-akzent-leise);
  border: 1px solid var(--nd-akzent-linie);
  border-radius: 50%;
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-akzent);
}

.as__name { font-size: var(--nd-s5); font-weight: 600; }
.as__text { font-size: var(--nd-s3); color: var(--nd-text-ruhig); }

/* FAQ — <details>/<summary>, damit es ohne JavaScript aufklappt */
.fq__liste { display: grid; gap: var(--nd-a3); margin: 0; }

.fq {
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r3);
  transition: border-color var(--nd-weich);
}

.fq[open] { border-color: var(--nd-linie-stark); }

.fq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nd-a4);
  min-height: 56px;
  padding: var(--nd-a4) var(--nd-a5);
  font-size: var(--nd-s5);
  font-weight: 550;
  cursor: pointer;
  list-style: none;
}

.fq__frage::-webkit-details-marker { display: none; }

/* Das Plus-Zeichen wird beim Oeffnen zum Minus. Gedreht, nicht getauscht. */
.fq__zeichen {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--nd-akzent);
}

.fq__zeichen::before,
.fq__zeichen::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--nd-weich);
}

.fq__zeichen::after { transform: rotate(90deg); }
.fq[open] .fq__zeichen::after { transform: rotate(0deg); }

.fq__antwort {
  padding: 0 var(--nd-a5) var(--nd-a5);
  max-width: 58rem;
  color: var(--nd-text-ruhig);
}

/* Rechtstexte */
.rt__liste { display: grid; gap: var(--nd-a6); margin: 0; }

.rt__name {
  margin-bottom: var(--nd-a2);
  font-size: var(--nd-s6);
  font-weight: 600;
}

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

/* 404 */
.vf { padding-block: clamp(var(--nd-a9), 10vw, var(--nd-a10)); text-align: center; }

.vf__code {
  font-family: var(--nd-mono);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--nd-lauf-eng);
  color: var(--nd-linie-stark);
}

.vf__titel { margin-top: var(--nd-a6); font-size: var(--nd-s9); font-weight: 650; }

.vf__text {
  margin: var(--nd-a4) auto 0;
  max-width: 32rem;
  font-size: var(--nd-s6);
  color: var(--nd-text-ruhig);
}

.vf__rufe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nd-a3);
  margin-top: var(--nd-a7);
}

.vf__hilfe {
  margin-top: clamp(var(--nd-a7), 5vw, var(--nd-a8));
  padding-top: var(--nd-a6);
  border-top: 1px solid var(--nd-linie-leise);
}

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

.vf__hilfe-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nd-a2);
  margin-top: var(--nd-a4);
}

/* ---------------------------------------------------------------------------
   15. FORMULAR
   --------------------------------------------------------------------------- */

.fm__gitter {
  display: grid;
  gap: clamp(var(--nd-a6), 4vw, var(--nd-a8));
  align-items: start;
}

@media (min-width: 960px) {
  .fm__gitter { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.fm {
  display: grid;
  gap: var(--nd-a5);
  padding: clamp(var(--nd-a5), 3vw, var(--nd-a7));
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r4);
}

.fm__titel { font-size: var(--nd-s7); font-weight: 600; }
.fm__hinweis { font-size: var(--nd-s3); color: var(--nd-text-leise); }

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

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

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

.fm__marke {
  font-size: var(--nd-s3);
  font-weight: 550;
  color: var(--nd-text);
}

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

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

.fm__eingabe,
.fm__wahl,
.fm__text {
  width: 100%;
  min-height: 48px;
  padding: var(--nd-a3) var(--nd-a4);
  background: var(--nd-grund);
  border: 1px solid var(--nd-linie-stark);
  border-radius: var(--nd-r2);
  color: var(--nd-text);
  font-size: var(--nd-s4);
  transition: border-color var(--nd-weich), background var(--nd-weich);
}

.fm__eingabe::placeholder,
.fm__text::placeholder { color: var(--nd-text-leise); }

.fm__eingabe:hover,
.fm__wahl:hover,
.fm__text:hover { border-color: var(--nd-text-leise); }

.fm__eingabe:focus,
.fm__wahl:focus,
.fm__text:focus { border-color: var(--nd-akzent); }

.fm__text { min-height: 150px; resize: vertical; line-height: var(--nd-zeile-weit); }

/* Eigener Pfeil fuer die Auswahl: der des Systems sitzt in jedem Browser
   anders und bringt seine eigene Farbe mit. */
.fm__wahl {
  appearance: none;
  padding-inline-end: var(--nd-a7);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nd-text-leise) 50%),
    linear-gradient(135deg, var(--nd-text-leise) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Zustimmung. Das Kaestchen bleibt das echte <input>, nur groesser und
   in Markenfarbe — ein nachgebautes waere fuer Screenreader schlechter. */
.fm__zustimmung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nd-a3);
  align-items: start;
  padding-top: var(--nd-a2);
}

.fm__haken {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--nd-akzent);
  cursor: pointer;
}

.fm__zustimmung label { font-size: var(--nd-s3); color: var(--nd-text-ruhig); }
.fm__zustimmung a { color: var(--nd-akzent); }

/* Honigtopf: fuer Menschen unsichtbar, fuer Spam-Programme ein Pflichtfeld.
   NICHT display:none — manche Programme pruefen darauf. */
.fm__topf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fm__senden { width: 100%; }

/* Fehlermeldung nach einem abgelehnten Absenden (kommt von kontakt-senden.php) */
.fm__fehler {
  padding: var(--nd-a4) var(--nd-a5);
  background: rgba(244, 97, 107, 0.09);
  border: 1px solid var(--nd-fehler);
  border-radius: var(--nd-r2);
  color: var(--nd-fehler);
  font-size: var(--nd-s3);
}

.fm__fehler-titel { margin-bottom: var(--nd-a2); font-weight: 600; }
.fm__fehler ul { display: grid; gap: var(--nd-a1); padding-inline-start: var(--nd-a4); }
.fm__fehler li { list-style: disc; }

/* Nebenspalte der Kontaktseite */
.fm__seite { display: grid; gap: var(--nd-a6); }

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

.fm__direkt-titel { margin-bottom: var(--nd-a2); font-size: var(--nd-s5); font-weight: 600; }
.fm__direkt-text { font-size: var(--nd-s3); color: var(--nd-text-ruhig); }

.fm__direkt-mail {
  display: inline-block;
  margin-top: var(--nd-a4);
  font-family: var(--nd-mono);
  font-size: var(--nd-s3);
  color: var(--nd-akzent);
}

/* ---------------------------------------------------------------------------
   16. FUSSBEREICH
   --------------------------------------------------------------------------- */

.fb {
  padding-block: clamp(var(--nd-a7), 5vw, var(--nd-a9)) var(--nd-a6);
  background: var(--nd-flaeche);
  border-top: 1px solid var(--nd-linie);
}

.fb__oben {
  display: grid;
  gap: clamp(var(--nd-a6), 4vw, var(--nd-a8));
  margin-bottom: clamp(var(--nd-a6), 4vw, var(--nd-a7));
}

@media (min-width: 900px) {
  .fb__oben { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
}

.fb__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-a3);
  min-height: 44px;
  color: var(--nd-text);
  font-size: var(--nd-s5);
  font-weight: 600;
  letter-spacing: var(--nd-lauf-eng);
  text-decoration: none;
}

/* Keine Farbe setzen: das Zeichen faerbt seine Senkrechten ueber
   currentColor selbst ein, und nur die Diagonale traegt den Akzent. Ein
   `color` hier machte alle drei Striche gruen. */

.fb__zeile { margin-top: var(--nd-a2); max-width: 22rem; font-size: var(--nd-s3); }

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

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

.fb__titel {
  margin-bottom: var(--nd-a3);
  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-text-leise);
}

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

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

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

.fb__unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-a3) var(--nd-a6);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--nd-a5);
  font-size: var(--nd-s2);
}

.fb__datenschutz { max-width: 34rem; }

/* ---------------------------------------------------------------------------
   17. EINBLENDEN BEIM SCROLLEN

   Abschnitte kommen beim Erscheinen sanft herein. Das Startbild (Hero) ist
   bewusst NICHT dabei: was beim Laden schon sichtbar ist, soll nicht erst
   eingeblendet werden.

   Nur gesetzt, wenn JavaScript laeuft (<html class="js">) — ohne Skript
   waere der Inhalt sonst dauerhaft unsichtbar. Das ist der klassische
   Fehler bei dieser Technik.
   --------------------------------------------------------------------------- */

.js [data-einblenden] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--nd-weich-lang), transform var(--nd-weich-lang);
}

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

@media (prefers-reduced-motion: reduce) {
  .js [data-einblenden] { opacity: 1; transform: none; }
}

/* Fallstudien-Schritte. Eine umbrechende Reihe statt einer Zeitleiste:
   acht Eintraege passen in kein Sechs-Spalten-Raster, und eine Reihe, die
   umbricht, vertraegt jede Anzahl. */
.st__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-a2);
  margin: 0;
}

.st {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-a3);
  padding: var(--nd-a3) var(--nd-a4);
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r2);
}

.st__nr {
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-akzent);
}

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

/* ---------------------------------------------------------------------------
   18. FALLSTUDIEN

   Je Projekt eine Seite, die den Aufbau erklaert. Bewusst OHNE Code-Ansicht:
   Quelltext auf einer Firmenseite liest niemand, und bei Kundenprojekten
   gehoert er uns nicht. Gezeigt werden die Teile und was sie tun.
   --------------------------------------------------------------------------- */

.fs__kopf {
  padding-block: clamp(var(--nd-a7), 5vw, var(--nd-a9)) clamp(var(--nd-a6), 4vw, var(--nd-a8));
  border-bottom: 1px solid var(--nd-linie-leise);
}

.fs__zurueck {
  /* flex statt inline-flex mit fit-content: sonst setzt sich die
     Marken-Zeile darunter daneben statt darunter. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--nd-a2);
  min-height: 44px;
  margin-bottom: var(--nd-a4);
  color: var(--nd-text-leise);
  font-size: var(--nd-s3);
  text-decoration: none;
  transition: color var(--nd-weich);
}

.fs__zurueck:hover { color: var(--nd-akzent); }
.fs__zurueck span { transition: transform var(--nd-weich); }
.fs__zurueck:hover span { transform: translateX(-3px); }

.fs__titel {
  margin-top: var(--nd-a4);
  font-size: var(--nd-s10);
  font-weight: 650;
  letter-spacing: -0.04em;
}

.fs__lead {
  margin-top: var(--nd-a5);
  max-width: 46rem;
  font-size: var(--nd-s6);
  color: var(--nd-text-ruhig);
}

/* Eckdaten. Vier Angaben, deshalb KEIN Drei-Spalten-Raster: die vierte
   stuende allein. Zwei oder vier. */
.fs__eckdaten {
  display: grid;
  gap: var(--nd-a5);
  margin: clamp(var(--nd-a6), 4vw, var(--nd-a7)) 0 0;
  padding-top: var(--nd-a5);
  border-top: 1px solid var(--nd-linie-leise);
}

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

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

.fs__eckdatum dd {
  margin: 0;
  font-size: var(--nd-s4);
  color: var(--nd-text);
}

.fs__live { margin-top: var(--nd-a6); }

.fs__intern {
  margin-top: var(--nd-a6);
  padding: var(--nd-a3) var(--nd-a4);
  display: inline-block;
  border: 1px dashed var(--nd-linie-stark);
  border-radius: var(--nd-r2);
  font-size: var(--nd-s3);
  color: var(--nd-text-leise);
}

/* Aufzaehlungen innerhalb eines Erzaehl-Abschnitts */
.fs__punkte {
  display: grid;
  gap: var(--nd-a2);
  margin-top: var(--nd-a4);
}

.fs__punkte li {
  position: relative;
  padding-inline-start: var(--nd-a5);
  font-size: var(--nd-s4);
  color: var(--nd-text-ruhig);
}

.fs__punkte li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--nd-akzent);
}

/* --- Der Aufbau: Schichten mit Technik-Spalte --- */

.fs__aufbau { position: relative; }

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

/* Linie, die die Schichten verbindet — dieselbe Bildsprache wie das
   Visual auf der Startseite. */
.fs__schichten::before {
  content: '';
  position: absolute;
  inset-block: 24px;
  inset-inline-start: 15px;
  width: 1px;
  background: linear-gradient(180deg,
    var(--nd-akzent-linie), var(--nd-linie) 40%, var(--nd-linie));
}

.fs__schicht {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nd-a4);
  align-items: start;
  padding: var(--nd-a5);
  padding-inline-start: calc(var(--nd-a7) + var(--nd-a2));
  background: var(--nd-karte);
  border: 1px solid var(--nd-linie);
  border-radius: var(--nd-r3);
  transition: border-color var(--nd-weich), transform var(--nd-weich);
}

.fs__schicht:hover {
  border-color: var(--nd-akzent-linie);
  transform: translateX(3px);
}

.fs__schicht-nr {
  position: absolute;
  inset-inline-start: var(--nd-a5);
  top: var(--nd-a5);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-inline-start: -16px;
  background: var(--nd-grund);
  border: 1px solid var(--nd-linie-stark);
  border-radius: 50%;
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-text-leise);
}

.fs__schicht:hover .fs__schicht-nr {
  border-color: var(--nd-akzent);
  color: var(--nd-akzent);
}

.fs__schicht-kern { grid-column: 1 / -1; }

.fs__schicht-name { font-size: var(--nd-s6); font-weight: 600; }

.fs__schicht-text {
  margin-top: var(--nd-a2);
  max-width: 52rem;
  font-size: var(--nd-s4);
  color: var(--nd-text-ruhig);
}

.fs__schicht-technik {
  grid-column: 1 / -1;
  margin-top: var(--nd-a3);
  padding: var(--nd-a1) var(--nd-a3);
  justify-self: start;
  background: var(--nd-akzent-leise);
  border: 1px solid var(--nd-akzent-linie);
  border-radius: var(--nd-r-rund);
  font-family: var(--nd-mono);
  font-size: var(--nd-s1);
  color: var(--nd-akzent);
}

/* Ab Tablet steht die Technik rechts statt darunter. */
@media (min-width: 820px) {
  .fs__schicht { grid-template-columns: minmax(0, 1fr) auto; }
  .fs__schicht-kern { grid-column: 1; }
  .fs__schicht-technik { grid-column: 2; margin-top: 0; align-self: start; }
}

/* --- Ergebnis und Gelerntes nebeneinander --- */

.fs__ende {
  display: grid;
  gap: clamp(var(--nd-a6), 4vw, var(--nd-a8));
  align-items: start;
}

@media (min-width: 900px) {
  .fs__ende { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.fs__ergebnis-text {
  margin-top: var(--nd-a4);
  max-width: 40rem;
  font-size: var(--nd-s5);
  color: var(--nd-text-ruhig);
}

.fs__ergebnis-punkte {
  display: grid;
  gap: var(--nd-a3);
  margin-top: var(--nd-a6);
}

.fs__ergebnis-punkte li {
  position: relative;
  padding-inline-start: var(--nd-a6);
  font-size: var(--nd-s4);
}

/* Ein Haken, gezeichnet aus zwei Strichen — kein Icon-Paket noetig. */
.fs__ergebnis-punkte li::before,
.fs__ergebnis-punkte li::after {
  content: '';
  position: absolute;
  background: var(--nd-akzent);
  border-radius: 1px;
}

.fs__ergebnis-punkte li::before {
  inset-inline-start: 2px;
  top: 0.75em;
  width: 6px;
  height: 1.5px;
  transform: rotate(45deg);
}

.fs__ergebnis-punkte li::after {
  inset-inline-start: 5px;
  top: 0.62em;
  width: 11px;
  height: 1.5px;
  transform: rotate(-45deg);
}

/* --- Zwei Verweise je Projektkarte --- */

.pj__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nd-a2) var(--nd-a5);
}

.pj__link--leise { color: var(--nd-text-leise); }
.pj__link--leise:hover { color: var(--nd-text-ruhig); }

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

/* Eine einzelne Karte in der letzten Reihe spannt ueber die volle Breite,
   statt halb leer danebenzustehen. Greift nur bei ungerader Anzahl. */
@media (min-width: 760px) {
  .pj__gitter > .pj:last-child:nth-child(odd) { grid-column: 1 / -1; }
}