/* ============================================================
   start.css — Bauteile der neuen Startseite (Relaunch 10/2026)
   Grundlage: docs/relaunch/BLUEPRINT.md. Tokens aus style.css.

   Leitidee "Leitstand mit der goldenen Stelle":
   Papier = die Arbeit, Mono + Petrol = das System, Gold = der Mensch.
   Gold steht NUR dort, wo im Ablauf ein Mensch entscheidet. Wer hier ein
   Gold fuer Deko einbaut, nimmt der Farbe ihre Aussage.

   Hausregeln: Ruhezustand ist sichtbar (versteckt wird nur hinter
   Klassen, die ein Skript setzt), Bauteil-CSS steht beim Bauteil.
   ============================================================ */

/* ---------- Gemeinsame Kleinteile ---------- */
.kicker {
  display: block; margin-bottom: 18px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; line-height: 1.4;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--moos);
}
.akt .kicker { color: var(--blatt); }
.icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; }

/* Ruhiges Punktraster - ein Plan, kein Netz. Nur im Hero und in den
   dunklen Akten, laeuft zum Text hin aus. Reines CSS, kein Skript. */
.mit-raster { position: relative; isolation: isolate; }
.mit-raster::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(oklch(0.16 0.02 235 / 0.10) 1px, transparent 1.3px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 75%);
  mask-image: linear-gradient(100deg, transparent 25%, #000 75%);
}
.akt.mit-raster::before { background-image: radial-gradient(oklch(0.96 0.006 200 / 0.09) 1px, transparent 1.3px); }

/* Sektionstitel auf der ganzen Startseite. Die Bestandsregel in style.css
   haengt an .sektion; Register und dunkle Akte haben eigene Huellen und
   fielen am 08.10.2026 genau deshalb auf die Browser-Standardschrift
   zurueck. */
.startseite .titel {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 4rem); line-height: 1; margin-bottom: 3vh;
}
.startseite .titel em { font-style: normal; color: var(--moos); }
.startseite .unterzeile { color: var(--grau); font-size: 16.5px; max-width: 56ch; margin-bottom: clamp(30px, 5vh, 56px); }

/* Dunkler Akt (Showcase, Software) */
.akt { background: var(--tinte); color: var(--hell); }
.startseite .akt .titel em { color: var(--blatt); }
.startseite .akt .unterzeile, .akt p { color: var(--grau-hell); }
/* Die Vorschau hat ihre eigene Palette - die Regel darueber darf nicht
   hineinfaerben. */
.akt .fd p { color: var(--fd-text); }
.akt .fd .fd-hinweis, .akt .fd .fd-label, .akt .fd .fd-leer, .akt .fd .fd-fuss { color: var(--fd-leise); }
.akt a:focus-visible, .akt button:focus-visible { outline-color: var(--blatt); }

.textlink {
  color: var(--moos); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.textlink:hover { color: var(--tinte); }
.akt .textlink { color: var(--blatt); }
.akt .textlink:hover { color: var(--hell); }

/* ---------- Status-Chip ----------
   Farbe ist nie allein: jeder Chip traegt Symbol und Text (WCAG 1.4.1).
   Text immer in --tinte, auch auf Gold - Gold auf Weiss waere als Schrift
   nur 2,4 : 1. */
.status {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--tinte);
  padding: 5px 9px 5px 7px; border: 1px solid var(--linie); background: var(--weiss);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.status .icon { width: 13px; height: 13px; }
.status[data-status="neu"] { background: var(--dunst); border-color: var(--linie); }
.status[data-status="manuell"] { background: var(--weiss); border-color: var(--linie); color: var(--knochen); }
.status[data-status="aktiv"] { background: color-mix(in oklch, var(--moos) 12%, var(--weiss)); border-color: var(--moos); }
.status[data-status="aktiv"] .icon { color: var(--moos); animation: status-dreh 1.4s linear infinite; }
.status[data-status="wartet"], .status[data-status="freigabe"] { background: var(--gold-hell); border-color: var(--gold); }
.status[data-status="wartet"] .icon, .status[data-status="freigabe"] .icon { color: oklch(0.52 0.1 80); }
.status[data-status="fertig"] { background: var(--ok-hell); border-color: var(--ok); }
.status[data-status="fertig"] .icon { color: var(--ok); }
.status[data-status="fehler"] { background: var(--fehler-hell); border-color: var(--fehler); }
.status[data-status="fehler"] .icon { color: var(--fehler); }
@keyframes status-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .status .icon { animation: none !important; } }

/* ---------- Fenster: Rahmen fuer echte Oberflaechen ----------
   Abgeleitet vom Browser-Rahmen der Verwandlung (/webdesign/). Keine
   Geraete-Attrappe: nur Titelleiste und Inhalt. */
.fenster {
  background: var(--weiss); color: var(--tinte);
  border: 1px solid var(--linie);
  box-shadow: 0 30px 60px -36px oklch(0.16 0.02 235 / 0.35);
  overflow: hidden;
}
.fenster-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--linie);
  background: var(--hell);
  font-family: var(--mono); font-size: 12px; color: var(--grau);
}
.fenster-kopf::before {
  content: ''; width: 34px; height: 8px; flex: none;
  background: radial-gradient(circle at 4px 4px, var(--linie) 3.5px, transparent 4px) 0 0 / 13px 8px repeat-x;
}
.fenster-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenster-live { display: inline-flex; align-items: center; gap: 6px; }
.fenster-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.fenster-notiz { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--grau); }
.akt .fenster-notiz { color: var(--grau-hell); }

/* ============================================================
   1 · HERO
   ============================================================ */
.start-held {
  /* 6/6 statt 5/7: Bei 5/7 blieb der Headline auf grossen Schirmen nur
     rund 54px Schriftgroesse - zu leise fuer den wichtigsten Satz. */
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(48px, 9vh, 110px) var(--rand) clamp(64px, 11vh, 130px);
  max-width: 1440px; margin: 0 auto;
}
.start-held > div:first-child { min-width: 0; container-type: inline-size; }
/* Die Headline richtet sich nach ihrer SPALTE, nicht nach dem Fenster.
   Bis 08.10.2026 stand hier clamp(..., 5.6vw, ...): Auf breiten Schirmen
   wuchs die Schrift schneller als die 5/12-Spalte, die Headline zerfiel in
   fuenf Zeilen, und "MEHR ERLEDIGT." (nowrap wegen der Markierung) ragte
   samt Markierung ins Ablauf-Fenster. 10.4cqi laesst die laengste Zeile
   "WENIGER KLICKEN." (rund 9,3 em) in die Spalte passen - drei Zeilen,
   wie im OG-Bild. Die erste Zeile ist der Rueckfall ohne Container-Queries. */
.start-held h1 { font-size: clamp(2.4rem, 4.6vw, 5rem); font-size: clamp(1.9rem, 10.4cqi, 6rem); line-height: 0.92; }
.start-held h1 .zeile { white-space: nowrap; }
.start-held h1 .kicker { font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em; margin-bottom: 22px; font-size: 12.5px; line-height: 1.5; }
.start-held h1 .zeile { display: block; }
.start-held h1 .mark { position: relative; z-index: 1; white-space: nowrap; }
.start-held h1 .mark i { position: absolute; inset: 0.04em -0.08em 0; z-index: -1; background: var(--blatt); }
.held-unter { margin-top: 28px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--grau); }
.held-handlung { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.held-vertrauen { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--grau); }

/* ---------- Ablauf (WorkflowNode / Edge) ----------
   Senkrechte Knotenliste: Symbol | Titel + Detail | Status. Die Kante ist
   eine Linie durch die Symbol-Spalte, der Paket-Punkt wandert per
   transform darauf. Ohne Skript stehen alle Knoten auf "fertig". */
.fluss { position: relative; list-style: none; margin: 0; padding: 14px 18px 10px; }
.fluss::before {
  content: ''; position: absolute; left: calc(18px + 3px + 21px); top: 34px; bottom: 34px;
  width: 2px; margin-left: -1px; background: var(--linie);
}
.fluss-paket {
  position: absolute; left: calc(18px + 3px + 21px); top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--moos); box-shadow: 0 0 0 4px color-mix(in oklch, var(--moos) 20%, transparent);
  opacity: 0; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.fluss-paket.ist-unterwegs { opacity: 1; }
.fluss-knoten {
  position: relative;
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 10px 10px 10px 0; margin-left: 0;
  border-left: 3px solid transparent;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
.fluss-symbol {
  position: relative; z-index: 1;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--weiss); border: 1px solid var(--linie); color: var(--knochen);
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.fluss-symbol .icon { width: 19px; height: 19px; }
.fluss-titel { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.fluss-detail { display: block; font-size: 13.5px; line-height: 1.45; color: var(--grau); }
.fluss-detail + .fluss-detail { margin-top: 2px; }
.fluss-detail[data-feld="entwurf"] { min-height: 1.45em; }

/* Rollen */
.fluss-knoten[data-art="ki"] .fluss-symbol { color: var(--moos); }
.fluss-knoten[data-art="mensch"] .fluss-symbol { border-color: var(--gold); color: oklch(0.52 0.1 80); background: var(--gold-hell); }

/* Zustaende - nur das Skript setzt "wartet" und "aktiv". */
.fluss-knoten[data-status="wartet"] { opacity: 0.45; }
.fluss-knoten[data-status="wartet"] .status { visibility: hidden; }
.fluss-knoten[data-status="aktiv"] .fluss-symbol { border-color: var(--moos); }
/* Die goldene Stelle: Wartet der Ablauf auf einen Menschen, bekommt die
   ganze Zeile die Gold-Flaeche. Das ist der Moment, den man sich merken soll. */
.fluss-knoten[data-art="mensch"][data-status="aktiv"] { background: var(--gold-hell); border-left-color: var(--gold); }
.fluss-knoten[data-art="mensch"][data-status="aktiv"] .fluss-symbol { border-color: var(--gold); }
.fluss-knoten.ist-gedrueckt .fluss-symbol { transform: scale(0.9); background: var(--gold); color: var(--tinte); }

.fluss-protokoll {
  display: flex; gap: 12px; align-items: baseline;
  margin: 0; padding: 10px 18px;
  background: var(--tinte); color: var(--grau-hell);
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
}
.fluss-protokoll .zeit { color: var(--blatt); flex: none; }
.fluss-protokoll .text { color: var(--hell); }
.fluss-protokoll .text.ist-neu { animation: protokoll-ein 0.35s ease-out; }
@keyframes protokoll-ein { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .fluss-paket { display: none; }
  .fluss-knoten, .fluss-symbol, .fluss-protokoll .text.ist-neu { transition: none; animation: none; }
}

@media (max-width: 900px) {
  .start-held { grid-template-columns: 1fr; padding-top: 36px; }
  /* Mobil vier Knoten: "KI liest mit" faellt weg, der Ablauf bleibt lesbar. */
  .fluss-knoten.nur-breit { display: none; }
}
@media (max-width: 480px) {
  .fluss { padding: 10px 12px 6px; }
  .fluss::before, .fluss-paket { left: calc(12px + 3px + 18px); }
  .fluss-knoten { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .fluss-symbol { width: 36px; height: 36px; }
  .fluss-knoten .status { grid-column: 2; justify-self: start; }
}

/* ============================================================
   2 · ABLAUF-REGISTER (Problem + Loesungen in einem)
   ============================================================ */
.register-sektion {
  background: var(--dunst);
  padding: 14vh var(--rand);
}
.register-innen {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 40px; align-items: end;
}
.register-kopf .titel { margin-bottom: 2vh; }
.register-kopf .unterzeile { margin-bottom: 0; }
/* Umschalter: Mechanik des Preis-Umschalters (zwei Radios, reines CSS).
   Ohne Skript ausgeblendet - dann stehen beide Texte untereinander. */
.register-schalter {
  display: none; position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--linie-dunkel); background: var(--weiss);
  align-self: end;
}
/* Klasse statt :has(): Ohne :has-Unterstuetzung waere der Schalter sonst
   unsichtbar, die Automatisiert-Texte aber versteckt - also unerreichbar. */
.register-sektion.hat-schalter .register-schalter { display: inline-grid; }
.register-schalter label {
  position: relative; z-index: 1; padding: 11px 22px; text-align: center; white-space: nowrap;
  font-size: 15px; cursor: pointer; transition: color 0.25s ease;
}
.register-schalter .schalter-pille {
  position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
  background: var(--tinte); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#modus-heute:checked ~ .register-innen label[for="modus-heute"],
#modus-auto:checked ~ .register-innen label[for="modus-auto"] { color: var(--hell); }
#modus-auto:checked ~ .register-innen .schalter-pille { transform: translateX(100%); }
#modus-heute:focus-visible ~ .register-innen .register-schalter,
#modus-auto:focus-visible ~ .register-innen .register-schalter { outline: 3px solid var(--tinte); outline-offset: 3px; }

.register {
  grid-column: 1 / -1; list-style: none; margin: clamp(30px, 5vh, 52px) 0 0; padding: 0;
  border-top: 1px solid var(--linie-dunkel);
}
.reg-zeile {
  /* Feste Spaltenbreiten: Jede Zeile ist ein eigenes Raster. Mit fr/auto
     rechnete jede Zeile ihre Spalten selbst, und die Texte sprangen von
     Zeile zu Zeile um 20px - in einem Register faellt das sofort auf. */
  display: grid; grid-template-columns: 52px minmax(0, 300px) minmax(0, 1fr) 130px;
  gap: 8px 28px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--linie);
  position: relative;
}
.reg-nr { font-family: var(--mono); font-size: 13px; color: var(--moos); padding-top: 4px; }
.reg-titel {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.25;
}
.reg-titel small { display: block; margin-top: 6px; font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--knochen); }
.reg-zustand p { color: var(--knochen); font-size: 16px; line-height: 1.55; }
.reg-label { font-family: var(--mono); font-size: 12px; color: var(--grau); margin-right: 6px; }
.reg-zustand .status { margin-top: 10px; }
.reg-auto { margin-top: 14px; }
.reg-link { padding-top: 3px; font-size: 14.5px; white-space: nowrap; justify-self: end; }

/* Die Praxis-Zeile: echtes Kundenprojekt. Goldene Kante, weil genau hier
   ein Mensch freigibt - nicht, weil die Zeile "wichtig" ist. */
.reg-zeile.ist-praxis::before {
  content: ''; position: absolute; left: calc(-1 * clamp(10px, 1.4vw, 22px)); top: 18px; bottom: 18px;
  width: 3px; background: var(--gold);
}

/* Mini-Fluss: drei Mono-Knoten mit Pfeil */
.mini-fluss { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; padding: 0; }
.mini-fluss li {
  font-family: var(--mono); font-size: 12px; padding: 5px 9px;
  border: 1px solid var(--linie-dunkel); background: var(--weiss); color: var(--tinte);
}
.mini-fluss li[data-art="ki"] { border-color: var(--moos); }
.mini-fluss li[data-art="mensch"] { border-color: var(--gold); background: var(--gold-hell); }
.mini-fluss li + li::before { content: '→'; margin: 0 8px 0 -2px; color: var(--grau); }
.mini-fluss li + li { border-left-width: 1px; }
/* Pfeil ausserhalb des Kaestchens: als eigenes Element waere es eine
   Listenposition mehr fuer den Screenreader. */
.mini-fluss li + li { position: relative; margin-left: 22px; }
.mini-fluss li + li::before { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); margin: 0; }

/* Mit Skript: nur ein Zustand sichtbar, der Umschalter waehlt. */
.register.hat-schalter .reg-auto { display: none; margin-top: 0; }
#modus-auto:checked ~ .register-innen .register.hat-schalter .reg-auto { display: block; }
#modus-auto:checked ~ .register-innen .register.hat-schalter .reg-heute { display: none; }
.register.hat-schalter .reg-label { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #modus-auto:checked ~ .register-innen .register.hat-schalter .reg-auto { animation: reg-ein 0.25s ease-out; }
  #modus-auto:checked ~ .register-innen .register.hat-schalter .mini-fluss li { animation: mini-lauf 1.2s ease-out both; }
  #modus-auto:checked ~ .register-innen .register.hat-schalter .mini-fluss li:nth-child(2) { animation-delay: 0.3s; }
  #modus-auto:checked ~ .register-innen .register.hat-schalter .mini-fluss li:nth-child(3) { animation-delay: 0.6s; }
}
@keyframes reg-ein { from { opacity: 0; } }
@keyframes mini-lauf { 0% { opacity: 0.3; } 35% { opacity: 1; box-shadow: 0 0 0 3px color-mix(in oklch, var(--moos) 25%, transparent); } 100% { opacity: 1; } }

.reg-schluss { padding: 22px 0 0 80px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.reg-schluss strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.2rem; }
.register-fuss { grid-column: 1 / -1; margin-top: 26px; font-size: 14.5px; color: var(--grau); max-width: 70ch; }

/* ---------- Loesungen (Uebersicht; verschlankt + aufgewertet 11.10.2026) ----------
   Die ausfuehrliche Heute/Automatisiert-Variante mit Vorfuehrung steht jetzt auf
   /ki-automatisierung/. Hier kleine Beweise statt Feature-Grid: jede Karte zeigt
   ihren Ablauf als Mini-Fluss (PRODUCT.md: "die Seite ist der Beweis"). Eigener
   Rahmen je Karte + Abstand, nicht das nackte Hairline-Raster. 3x2, kein Waise. */
.loesung-liste {
  grid-column: 1 / -1; list-style: none; margin: clamp(30px, 5vh, 52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.loesung-liste > li { background: var(--weiss); border: 1px solid var(--linie); padding: 24px 24px 22px; display: flex; flex-direction: column; }
.loesung-liste > li > h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.18rem; line-height: 1.2; margin: 0 0 10px; }
.loesung-liste > li > h3 small { display: block; margin-top: 6px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--moos); }
.loesung-liste > li > p { margin: 0; color: var(--knochen); font-size: 15px; line-height: 1.55; }
/* Mini-Fluss sitzt am Kartenfuss, damit alle Karten unten buendig abschliessen. */
.loesung-liste .mini-fluss { margin-top: auto; padding-top: 16px; }
.loesung-liste > li > .textlink { margin-top: 14px; align-self: start; font-size: 14.5px; }
.loesung-mehr { grid-column: 1 / -1; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
@media (max-width: 900px) { .loesung-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .loesung-liste { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .register-innen { grid-template-columns: 1fr; }
  /* Der Umschalter klebt unter der Kopfzeile, solange das Register zu
     sehen ist - sonst muesste man fuer jeden Wechsel zurueckscrollen. */
  .register-schalter { position: sticky; top: 72px; z-index: 5; margin-top: 24px; justify-self: start; }
  .reg-zeile { grid-template-columns: 34px minmax(0, 1fr); }
  .reg-zustand, .reg-link { grid-column: 2; }
  .reg-link { justify-self: start; }
  .reg-schluss { padding-left: 0; }
}

/* ============================================================
   3 · SHOWCASE: Schrittleiste + Freigabe-Vorschau
   ============================================================ */
.praxis-innen { padding: 14vh var(--rand); max-width: 1400px; margin: 0 auto; }
.praxis-intro { max-width: 62ch; margin-bottom: clamp(36px, 6vh, 64px); }
.praxis-buehne { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li {
  counter-increment: schritt; position: relative;
  padding: 16px 0 16px 52px; border-top: 1px solid var(--linie-dunkel);
  transition: opacity 0.3s ease;
}
.schritte li:last-child { border-bottom: 1px solid var(--linie-dunkel); }
.schritte li::before {
  content: counter(schritt, decimal-leading-zero); position: absolute; left: 0; top: 18px;
  font-family: var(--mono); font-size: 12.5px; color: var(--grau-hell);
}
.schritte li::after {
  content: ''; position: absolute; left: 0; top: -1px; height: 3px; width: 100%;
  /* transform statt width: kein Layout-Neuberechnen pro Frame. */
  transform: scaleX(0); transform-origin: left center;
  background: var(--blatt); transition: transform 0.4s ease;
}
.schritte li.ist-mensch::after { background: var(--gold); }
.schritte h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--hell); margin-bottom: 4px; }
.schritte p { font-size: 15px; line-height: 1.55; }
/* Nur mit laufender Vorschau gedaempft: .laeuft setzt freigabe-demo.js. */
.praxis-buehne:has(.freigabe-demo.laeuft) .schritte li:not(.ist-aktiv):not(.ist-erledigt) { opacity: 0.45; }
.schritte li.ist-aktiv::after { transform: scaleX(1); }
.schritte li.ist-mensch.ist-aktiv h3 { color: var(--gold); }

/* ---------- Freigabe-Vorschau ----------
   Eigene Palette mit --fd-*, gekapselt im Fenster (E12): Die Vorschau soll
   wie die Anwendung aussehen, nicht wie die Website. Werte nach der
   Beschreibung des echten Dashboards; Abgleich mit templates/dashboard.html
   steht aus (liegt auf dem Buero-Rechner). */
.freigabe-demo {
  /* Werte am 08.10.2026 vom Screenshot der echten Anwendung abgenommen
     (Vorfuehrmodus, 127.0.0.1:8000): hellgrauer Grund, weisse Karten mit
     Ampelkante, blaue Zaehlerpille und Primaerknopf, Systemschrift. */
  --fd-grund: #f3f4f6;
  --fd-karte: #ffffff;
  --fd-feld: #f3f4f6;
  --fd-text: #1f2937;
  --fd-leise: #6b7280;
  --fd-rand: #e5e7eb;
  --fd-primaer: #2563eb;
  --fd-gruen: #16a34a;
  --fd-gelb: #eab308;
  --fd-rot: #dc2626;
  --fd-stern: #f59e0b;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.fd { background: var(--fd-grund); color: var(--fd-text); padding: 20px 18px 14px; }
.fd-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; margin-bottom: 14px; }
.fd-titel { font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--fd-text); }
.fd-zaehler { background: var(--fd-primaer); color: #fff; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.fd-hinweis { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--fd-leise); }
.fd-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fd-karte {
  display: grid; grid-template-rows: 1fr;
  background: var(--fd-karte); border: 1px solid var(--fd-rand); border-left: 4px solid var(--fd-gruen);
  border-radius: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}
.fd-karte[data-ampel="gelb"] { border-left-color: var(--fd-gelb); }
.fd-karte[data-ampel="rot"] { border-left-color: var(--fd-rot); }
.fd-karte.ist-weg { grid-template-rows: 0fr; opacity: 0; margin-bottom: -12px; border-width: 0; }
.fd-innen { min-height: 0; overflow: hidden; padding: 14px 14px 12px; }
.fd-karte.ist-weg .fd-innen { padding-top: 0; padding-bottom: 0; }
.fd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.fd-sterne { color: var(--fd-stern); letter-spacing: 1px; font-size: 13px; margin-right: 4px; }
.fd-chip { font-size: 11px; line-height: 1; padding: 4px 7px; background: var(--fd-feld); border-radius: 4px; color: var(--fd-leise); }
.fd-bewertung { background: var(--fd-feld); border-radius: 6px; padding: 8px 10px; margin-bottom: 4px; }
.fd-bewertung .fd-label { margin-top: 0; }
.fd-label { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fd-leise); margin: 10px 0 4px; }
.fd-text { font-size: 13.5px; line-height: 1.5; color: var(--fd-text); }
.fd-antwort {
  width: 100%; min-height: 88px; resize: vertical;
  font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--fd-text);
  border: 1px solid var(--fd-rand); border-radius: 6px; background: var(--fd-karte); padding: 9px 10px;
}
.fd-antwort:focus-visible { outline: 2px solid var(--fd-primaer); outline-offset: 1px; }
.fd-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fd-knoepfe button {
  font: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 14px; cursor: pointer; border-radius: 6px;
  border: 1px solid var(--fd-rand); background: var(--fd-karte); color: var(--fd-leise);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.fd-knoepfe .fd-freigeben { background: var(--fd-primaer); border-color: var(--fd-primaer); color: #fff; font-weight: 600; }
.fd-knoepfe button:disabled { cursor: default; opacity: 0.6; }
.fd-knoepfe button.ist-gedrueckt { transform: scale(0.95); filter: brightness(0.9); }
.fd-knoepfe button:focus-visible { outline: 2px solid var(--fd-primaer); outline-offset: 2px; }
.fd-leer { padding: 26px 16px; text-align: center; font-size: 14px; color: var(--fd-leise); background: var(--fd-karte); border: 1px dashed var(--fd-rand); border-radius: 8px; }
.fd-leer:focus-visible { outline: 2px solid var(--fd-primaer); }
.fd-fuss { margin-top: 12px; text-align: center; font-size: 10.5px; color: var(--fd-leise); }
@media (prefers-reduced-motion: reduce) { .fd-karte, .fd-knoepfe button { transition: none; } }

.fd-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-top: 12px; min-height: 2.6em; }
.fd-meldung { font-size: 14px; color: var(--hell); }
.fd-zuruecksetzen {
  flex: none; background: none; border: 1px solid var(--grau-hell); color: var(--hell);
  font: inherit; font-size: 14.5px; padding: 9px 18px; cursor: pointer;
}
.fd-zuruecksetzen:hover { background: var(--blatt); border-color: var(--blatt); color: var(--tinte); }
.fd-zuruecksetzen[hidden] { display: none; }

/* Fakten-Leiste */
.fakten-leiste {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  margin: clamp(40px, 7vh, 72px) 0 0; border-top: 1px solid var(--linie-dunkel);
}
.fakten-leiste > div { padding: 18px 20px 4px 0; }
.fakten-leiste dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau-hell); margin-bottom: 6px; }
.fakten-leiste dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--hell); }
.praxis-schluss { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: baseline; justify-content: space-between; }
.praxis-schluss p { max-width: 62ch; font-size: 15px; }
.praxis-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }

@media (max-width: 1000px) {
  .fakten-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .praxis-buehne { grid-template-columns: minmax(0, 1fr); }
  /* Mobil: Schrittleiste wird zur waagerechten Fortschrittsleiste. */
  .schritte { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  /* min-width: 0, sonst haelt jedes Rasterfeld die Breite seines laengsten
     Wortes fest und die Leiste wird auf 320px 13px zu breit. */
  .schritte li { padding: 26px 0 0; border: 0; border-top: 3px solid var(--linie-dunkel); min-width: 0; }
  .schritte li:last-child { border-bottom: 0; }
  .schritte li::before { top: 6px; }
  .schritte li::after { top: -3px; }
  /* Fuenf Spalten auf 375px: "Veroeffentlichung" passt nicht ungetrennt -
     am 08.10.2026 drueckte genau dieses Wort die Seite 35px in die Breite. */
  .schritte h3 { font-size: 11.5px; font-family: var(--mono); font-weight: 500; line-height: 1.3; hyphens: auto; overflow-wrap: anywhere; }
  .schritte p { display: none; }
}
@media (max-width: 480px) {
  .fakten-leiste { grid-template-columns: 1fr; }
  .fd { padding: 12px; }
}

/* ============================================================
   4 · PRINZIPIEN
   ============================================================ */
.prinzipien-sektion .titel { max-width: 18ch; }
.prinzipien {
  list-style: none; margin: clamp(30px, 5vh, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 80px);
}
.prinzipien li { padding: 26px 0 30px; border-top: 1px solid var(--linie); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 16px; }
.prinzipien .icon { width: 26px; height: 26px; color: var(--tinte); margin-top: 2px; }
.prinzipien .ist-mensch .icon { color: var(--gold); }
.prinzipien h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin-bottom: 8px; }
.prinzipien p { color: var(--grau); max-width: 48ch; }
.prinzipien-link { margin-top: 10px; }
@media (max-width: 760px) { .prinzipien { grid-template-columns: 1fr; } }

/* ============================================================
   5 · SOFTWARE: Mini-Oberflaechen
   Bis 08.10.2026 Linien-Skizzen, die niemand lesen konnte (Kevins
   Rueckmeldung). Jetzt kleine helle Fenster mit lesbaren Ausschnitten -
   dieselbe Sprache wie Hero und Freigabe-Vorschau. Beispieldaten.
   ============================================================ */
.software-innen { padding: 14vh var(--rand); max-width: 1400px; margin: 0 auto; }
.software-innen .unterzeile { max-width: 62ch; }
.skizzen {
  list-style: none; margin: clamp(30px, 5vh, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(18px, 2.4vw, 34px);
}
.mini { box-shadow: 0 24px 48px -30px oklch(0 0 0 / 0.7); border-color: transparent; }
.mini .fenster-kopf { padding: 7px 10px; font-size: 10.5px; }
.mini .fenster-kopf::before { width: 26px; height: 6px; background: radial-gradient(circle at 3px 3px, var(--linie) 2.5px, transparent 3px) 0 0 / 9px 6px repeat-x; }
.mini-inhalt { height: 168px; padding: 12px; font-size: 12px; line-height: 1.4; color: var(--tinte); overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.mini .status { font-size: 10px; padding: 3px 6px 3px 5px; gap: 4px; }
.mini .status .icon { width: 10px; height: 10px; }

/* Dashboard */
.mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-kpis div { border: 1px solid var(--linie); padding: 6px 7px; }
.mini-kpis b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; line-height: 1; }
.mini-kpis span { font-size: 10px; color: var(--grau); line-height: 1.2; display: block; margin-top: 3px; }
.mini-kpis .ist-gold { border-color: var(--gold); background: var(--gold-hell); }
.mini-balken { flex: 1; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--linie); padding: 0 2px; }
.mini-balken i { flex: 1; height: var(--h); background: oklch(0.80 0.05 205); }
.mini-balken i:last-child { background: var(--moos); }

/* Freigabemaske */
.mini-klein { font-family: var(--mono); font-size: 10.5px; color: var(--grau); }
.mini-text { border: 1px solid var(--linie); padding: 7px 8px; color: var(--knochen); flex: 1; }
.mini-knoepfe { display: flex; gap: 6px; }
.mini-knoepfe span { font-size: 11px; font-weight: 600; padding: 5px 10px; border: 1px solid var(--linie); color: var(--grau); }
.mini-knoepfe .mini-primaer { background: var(--tinte); border-color: var(--tinte); color: var(--hell); box-shadow: inset 0 -2px 0 var(--gold); }

/* Aufgabenliste */
.mini-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mini-liste li { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.mini-box { width: 13px; height: 13px; border: 1px solid var(--grau-hell); flex: none; display: grid; place-items: center; }
.mini-liste .ist-erledigt { color: var(--grau); text-decoration: line-through; text-decoration-color: var(--grau-hell); }
.mini-liste .ist-erledigt .mini-box { background: var(--ok); border-color: var(--ok); }
.mini-liste .ist-erledigt .mini-box::after { content: ''; width: 6px; height: 3px; border: solid #fff; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) translate(1px, -1px); }

/* Kundenportal */
.mini-verlauf { list-style: none; margin: 0 0 0 5px; padding: 0 0 0 14px; border-left: 2px solid var(--linie); display: flex; flex-direction: column; gap: 7px; }
.mini-verlauf li { position: relative; color: var(--grau); }
.mini-verlauf li::before { content: ''; position: absolute; left: -20px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--grau-hell); }
.mini-verlauf .ist-erledigt { color: var(--tinte); }
.mini-verlauf .ist-erledigt::before { background: var(--ok); border-color: var(--ok); }
.mini-verlauf .ist-aktiv { color: var(--tinte); font-weight: 600; }
.mini-verlauf .ist-aktiv::before { border-color: var(--moos); }
.mini-datei { margin-top: auto; font-family: var(--mono); font-size: 10.5px; padding: 6px 8px; background: var(--hell); border: 1px solid var(--linie); }

/* Tabelle */
.mini-tabelle { width: 100%; border-collapse: collapse; }
.mini-tabelle td { padding: 6px 4px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.mini-tabelle td:first-child { font-family: var(--mono); font-size: 10.5px; color: var(--grau); }
.mini-tabelle td:last-child { text-align: right; }

/* Schnittstelle */
.mini-systeme { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mini-systeme span { flex: 1; text-align: center; font-weight: 600; font-size: 11.5px; padding: 8px 4px; border: 1px solid var(--linie); }
.mini-systeme .icon { width: 16px; height: 16px; color: var(--moos); }
.mini-log { list-style: none; margin: 0; padding: 8px; background: var(--tinte); color: var(--grau-hell); font-family: var(--mono); font-size: 10px; line-height: 1.6; flex: 1; }
.mini-log time { color: var(--blatt); margin-right: 4px; }

/* Assistent */
.mini-blase { max-width: 85%; padding: 6px 9px; background: var(--hell); border: 1px solid var(--linie); }
.mini-blase.ist-frage { align-self: flex-end; background: var(--tinte); color: var(--hell); border-color: var(--tinte); }
.mini-uebergabe { margin-top: auto; font-family: var(--mono); font-size: 10px; color: var(--knochen); padding: 4px 7px; border: 1px solid var(--gold); background: var(--gold-hell); align-self: flex-start; }

.skizzen h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--hell); margin: 16px 0 6px; }
.skizzen p { font-size: 15px; line-height: 1.55; }
.akt .mini p { color: inherit; font-size: inherit; line-height: inherit; }
.akt .mini .mini-klein { color: var(--grau); }
.akt .mini .mini-blase.ist-frage { color: var(--hell); }
.praxis-marke { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--blatt); text-decoration: none; border-bottom: 1px solid currentColor; }
.praxis-marke:hover { color: var(--hell); }
.skizze-cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 24px; border: 1px solid var(--linie-dunkel); }
.skizze-cta p { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--hell); }
.skizze-cta .knopf { background: var(--blatt); color: var(--tinte); }
.software-innen > .fenster-notiz { margin-top: 28px; }

/* Leit-Oberflaeche (11.10.2026): Dashboard breit und quer, danach 6 Kacheln
   3x2, Abschluss-CTA volle Breite - Rhythmus statt gleichfoermigem Raster. */
.skizzen .ist-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.skizzen .ist-lead .mini-inhalt { height: auto; min-height: 208px; }
.skizzen .ist-lead .lead-text h3 { margin-top: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.skizzen .ist-lead .lead-text p { font-size: clamp(15px, 1.4vw, 17px); max-width: 46ch; }
.skizze-cta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; }

@media (max-width: 1000px) { .skizzen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skizzen .ist-lead { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .skizzen { grid-template-columns: 1fr; } }

/* ============================================================
   6 · VORGEHEN: Zeitstrahl mit Klammern, Ebenen als Spalten
   ============================================================ */
.zeitstrahl-huelle { margin-top: clamp(30px, 5vh, 56px); }
.klammern { display: grid; grid-template-columns: 2fr 3fr; gap: 12px; margin-bottom: 18px; }
.klammer {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--knochen);
  padding: 0 0 10px; border-bottom: 2px solid var(--moos); position: relative;
}
.klammer::before, .klammer::after { content: ''; position: absolute; bottom: -2px; width: 2px; height: 10px; background: var(--moos); }
.klammer::before { left: 0; }
.klammer::after { right: 0; }
.klammer strong { color: var(--tinte); font-weight: 600; }
.zeitstrahl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.zeitstrahl::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--tinte);
  transform-origin: left center;
}
html.zeichnen-bereit .zeitstrahl:not(.ist-gezeichnet)::before { transform: scaleX(0); }
html.zeichnen-bereit .zeitstrahl::before { transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
.zeitstrahl li { position: relative; padding-top: 34px; }
.zeitstrahl li::before {
  content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--tinte);
}
.zeit-nr { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--moos); margin-bottom: 6px; }
.zeitstrahl h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.12rem; margin-bottom: 6px; }
.zeitstrahl p { font-size: 15px; line-height: 1.55; color: var(--grau); }
.klammer-mobil { display: none; }

.ebenen { margin-top: clamp(48px, 8vh, 88px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ebene { padding: 4px clamp(18px, 2.6vw, 40px) 4px; border-left: 1px solid var(--linie); }
.ebene:first-child { padding-left: 0; border-left: 0; }
.ebene-kopf { font-family: var(--mono); font-size: 12.5px; color: var(--moos); margin-bottom: 6px; }
.ebene h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.2rem; margin-bottom: 14px; }
.ebene dl { margin: 0; }
.ebene dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau); margin-top: 12px; }
.ebene dd { margin: 3px 0 0; font-size: 15px; line-height: 1.55; color: var(--knochen); }
.ebene .knopf { margin-top: 22px; }
.preislogik { margin-top: clamp(36px, 6vh, 60px); padding-top: 22px; border-top: 1px solid var(--linie); max-width: 76ch; color: var(--grau); font-size: 15.5px; }

@media (max-width: 900px) {
  .klammern { display: none; }
  .zeitstrahl { grid-template-columns: 1fr; gap: 0; padding-left: 30px; }
  .zeitstrahl::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; transform-origin: top center; }
  html.zeichnen-bereit .zeitstrahl:not(.ist-gezeichnet)::before { transform: scaleY(0); }
  .zeitstrahl li { padding: 0 0 26px; }
  .zeitstrahl li::before { left: -30px; top: 2px; }
  .klammer-mobil { display: block; margin: 0 0 14px -30px; padding: 2px 0 2px 30px; font-family: var(--mono); font-size: 12px; color: var(--knochen); background: var(--papier); position: relative; }
  .ebenen { grid-template-columns: 1fr; gap: 30px; }
  .ebene { border-left: 0; padding: 22px 0 0; border-top: 1px solid var(--linie); }
}

/* ============================================================
   7 · PROJEKTE (das einzige Kartenraster der Seite)
   ============================================================ */
#projekte.projekte-sektion { background: var(--dunst); }
.projekte-gruppe { margin-top: clamp(30px, 5vh, 50px); }
.gruppe-titel { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--knochen); margin-bottom: 14px; }
.projekte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.projekt { background: var(--weiss); border: 1px solid var(--linie); padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.projekt.ist-breit { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.projekt-typ { display: flex; flex-wrap: wrap; gap: 6px; }
.projekt h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.projekt p { color: var(--grau); font-size: 15px; line-height: 1.55; }
.projekt .textlink { align-self: flex-start; margin-top: auto; font-size: 14.5px; }
.projekt-text { display: flex; flex-direction: column; gap: 10px; }
/* Statischer Ausschnitt einer Freigabe-Karte - Wiedererkennung zum Showcase. */
.projekt-ausschnitt { background: var(--hell); border: 1px solid var(--linie); padding: 14px; align-self: start; font-size: 13.5px; }
.projekt-ausschnitt .zeile-a { border-left: 3px solid var(--ok); padding-left: 10px; color: var(--knochen); line-height: 1.45; }
.projekt-ausschnitt .zeile-b { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.projekte-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.projekte-paar .projekte { grid-template-columns: 1fr; height: calc(100% - 32px); }
.projekte-paar .projekt { height: 100%; }
@media (max-width: 700px) { .projekte-paar { grid-template-columns: 1fr; } .projekte-paar .projekte, .projekte-paar .projekt { height: auto; } }
.projekte-fuss { margin-top: 26px; font-size: 14.5px; color: var(--grau); }
@media (max-width: 1000px) {
  .projekte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .projekte { grid-template-columns: 1fr; }
  .projekt.ist-breit { grid-column: auto; grid-template-columns: 1fr; }
}

/* ============================================================
   8 · WEBDESIGN-TEASER
   ============================================================ */
.webdesign-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.webdesign-teaser .titel { font-size: clamp(1.8rem, 3.8vw, 3rem); }
.haken-liste { list-style: none; margin: 18px 0 26px; padding: 0; }
.haken-liste li { padding: 6px 0; color: var(--knochen); }
.haken-liste li::before { content: '✓'; font-family: var(--mono); color: var(--moos); margin-right: 10px; }
/* Ohne Bild (Kevin, 08.10.2026: der beschnittene Bergmann-Screenshot wirkte
   zufaellig). Rechts stehen Punkte und Knopf, abgesetzt durch eine Linie -
   der Teaser bleibt kompakt und verweist nur auf /webdesign/. */
.webdesign-teaser { align-items: end; }
.webdesign-teaser p { color: var(--grau); max-width: 52ch; }
.webdesign-handlung { border-left: 1px solid var(--linie); padding-left: clamp(24px, 4vw, 56px); }
.webdesign-handlung .haken-liste { margin-top: 0; }
@media (max-width: 900px) { .webdesign-handlung { border-left: 0; padding-left: 0; } }
@media (max-width: 900px) { .webdesign-teaser { grid-template-columns: 1fr; } }

/* ============================================================
   9/10 · UEBER MICH (Bestand .ueber) und FAQ
   ============================================================ */
#ueber-mich.ueber-sektion { background: var(--dunst); }
.ueber .fakten span { font-family: var(--mono); font-size: 12.5px; }
.fragen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.fragen-kopf { position: sticky; top: 100px; }
.frage { border-top: 1px solid var(--linie); }
.frage:last-child { border-bottom: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 20px 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: '+'; font-family: var(--mono); font-weight: 400; font-size: 1.4rem; color: var(--moos); transition: transform 0.2s ease; }
.frage[open] summary::after { transform: rotate(45deg); }
.frage summary:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.frage p { padding: 0 0 22px; color: var(--grau); max-width: 64ch; }
@media (max-width: 900px) { .fragen { grid-template-columns: 1fr; } .fragen-kopf { position: static; } }
@media (prefers-reduced-motion: reduce) { .frage summary::after { transition: none; } }

/* ============================================================
   11 · KONTAKT: neues Auswahlfeld
   ============================================================ */
.formular select {
  width: 100%; border: none; background: oklch(1 0 0 / 0.75);
  font-family: 'Archivo', sans-serif; font-size: 16px; color: var(--tinte);
  padding: 15px 16px; margin-top: 6px;
}
.formular select:focus { outline: 2px solid var(--tinte); background: oklch(1 0 0); }
.formular .optional { font-weight: 400; opacity: 0.75; }

/* ============================================================
   Symbolbilder (Higgsfield, 08.10.2026)
   Zwei fotografische Bilder fuer Atmosphaere: der Schreibtisch voller
   Papier (Register, "Heute") und die Skizze im Gespraech (Vorgehen,
   Prozess-Check). Beide sind KI-generiert und stehen so darunter - die
   Seite verspricht "echte Systeme statt Versprechen", ein unmarkiertes
   KI-Foto wuerde genau das untergraben.
   ============================================================ */
.register-bild, .ablauf-bild, .artikel-bild { margin: 0; }
.register-bild img, .ablauf-bild img, .artikel-bild img { display: block; width: 100%; height: auto; }
.register-bild figcaption, .ablauf-bild figcaption, .artikel-bild figcaption {
  margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--grau);
}
.register-bild { grid-column: 1 / -1; margin-top: clamp(30px, 5vh, 52px); }
.register-bild img { aspect-ratio: 3 / 1; object-fit: cover; }
.register-bild + .register { margin-top: clamp(24px, 4vh, 40px); }
.ablauf-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ablauf-bild img { aspect-ratio: 16 / 9; object-fit: cover; }
.artikel-bild { margin: 8px 0 34px; }
@media (max-width: 900px) {
  .ablauf-kopf { grid-template-columns: 1fr; }
  .register-bild img { aspect-ratio: 2 / 1; }
}
/* Neben dem Bild steht der Titel in der halben Breite - in voller Groesse
   brach er auf vier Zeilen um und erschlug das Bild. */
.startseite .ablauf-kopf .titel { font-size: clamp(2rem, 3.6vw, 3.3rem); }

/* ============================================================
   Intro-Vorhang (Startseite) - auf Kevins Wunsch wieder da (08.10.2026)
   Zeitlinie wie die alte GSAP-Fassung: Emblem faehrt ein (0,25-0,95 s),
   steht, faehrt raus (1,45-1,95 s), der Vorhang hebt sich (1,8-2,7 s).
   Ohne Skript laeuft die Animation trotzdem durch und gibt die Seite frei.
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 200;
  background: #0F1E30; /* exakt das Navy des Emblems: randloser Uebergang */
  display: flex; align-items: center; justify-content: center;
  animation: intro-heben 0.9s cubic-bezier(0.76, 0, 0.24, 1) 1.8s forwards;
}
.intro .wort { overflow: hidden; line-height: 0; }
.intro .wort span { display: inline-block; animation: intro-wort 1.95s both; }
.intro-emblem { display: block; height: auto; width: clamp(300px, 58vw, 500px); }
@keyframes intro-wort {
  0%, 12.8% { transform: translateY(120%); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  48.7%, 74.4% { transform: translateY(0); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  100% { transform: translateY(-120%); }
}
@keyframes intro-heben { to { transform: translateY(-100%); visibility: hidden; } }
html.intro-laeuft, html.intro-laeuft body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }