/* =============================================================
   Thomas Aistleitner — Prozessoptimierung
   Design-System "Ingenieursbüro"
   Anthrazit, Haarlinien, Messwert-Typografie.
   Keine Verläufe. Keine Glows. Keine Schlagschatten.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Flächen */
  --ink:        #0d0f12;
  --ink-1:      #111418;
  --ink-2:      #171b20;
  --ink-3:      #1e232a;
  --paper:      #f2f0ec;

  /* Linien */
  --line:       rgba(233, 231, 226, 0.10);
  --line-2:     rgba(233, 231, 226, 0.18);
  --line-3:     rgba(233, 231, 226, 0.32);

  /* Text */
  --tx:         #e9e7e2;
  --tx-2:       #a7a9a6;
  --tx-3:       #71757a;
  --tx-4:       #4d5157;

  /* Signale (sparsam!) */
  --signal:     #ff6a3d;
  --signal-dim: rgba(255, 106, 61, 0.14);
  --ok:         #6fae86;
  --ok-dim:     rgba(111, 174, 134, 0.14);
  --warn:       #d9a441;
  --bad:        #d0574f;

  /* Typo */
  --serif: "IBM Plex Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Raster */
  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(4.5rem, 9vw, 8rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--tx-2);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--signal); color: #14100e; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ---------- 3. Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tx);
  margin: 0;
  letter-spacing: -0.018em;
  line-height: 1.1;
  text-wrap: balance;
}

.t-display {
  font-size: clamp(2.35rem, 5.4vw, 4.15rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
}
.t-h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); line-height: 1.12; }
.t-h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.25; }
.t-h4 { font-size: 1.0625rem; line-height: 1.35; }

.lead {
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.55;
  color: var(--tx);
  max-width: 34em;
  text-wrap: pretty;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.measure { max-width: 38em; }
.measure-tight { max-width: 30em; }

strong, b { color: var(--tx); font-weight: 600; }

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Kleine Auszeichnungszeile über Überschriften */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 6rem;
}
.eyebrow--plain::after { display: none; }

/* ---------- 4. Layout ---------- */
.wrap {
  width: min(100% - (var(--gut) * 2), var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: var(--sec);
  border-top: 1px solid var(--line);
  position: relative;
}
.section--flush { border-top: none; }

/* Sektionsnummer in der Randspalte */
.section > .wrap { position: relative; }
.sec-no {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--tx-4);
  position: absolute;
  top: 0.35rem;
  left: -3.25rem;
}
@media (max-width: 1340px) { .sec-no { display: none; } }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 900px) {
  .g-2, .g-3, .g-4, .g-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) { .g-4--keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stack-s > * + * { margin-top: 0.6rem; }
.stack   > * + * { margin-top: 1.2rem; }
.stack-l > * + * { margin-top: 2.2rem; }

.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 5. Kopfzeile ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(13, 15, 18, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 62px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--tx);
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__mark {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--tx-3);
  text-transform: uppercase;
  border-left: 1px solid var(--line-2);
  padding-left: 0.6rem;
}
@media (max-width: 620px) { .brand__mark { display: none; } }

.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tx-3);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--tx); }
@media (max-width: 780px) { .nav__links a.hide-sm { display: none; } }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 1.15rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--tx);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--line-3); background: rgba(233,231,226,0.035); }
.btn--primary {
  background: var(--paper);
  color: #0f1114;
  border-color: var(--paper);
  font-weight: 500;
}
.btn--primary:hover { background: #fff; border-color: #fff; }
.btn--signal { border-color: var(--signal); color: var(--signal); }
.btn--signal:hover { background: var(--signal-dim); border-color: var(--signal); }
.btn--sm { padding: 0.5rem 0.85rem; font-size: 0.68rem; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn__arrow { transition: transform 0.18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.link-u {
  color: var(--tx);
  text-decoration: none;
  border-bottom: 1px solid var(--line-3);
  padding-bottom: 1px;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.link-u:hover { border-color: var(--signal); color: var(--signal); }

/* ---------- 7. Karten & Paneele ---------- */
.card {
  border: 1px solid var(--line);
  background: var(--ink-1);
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  position: relative;
}
.card--hover { transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.card--hover:hover { border-color: var(--line-2); background: var(--ink-2); }

.panel {
  border: 1px solid var(--line-2);
  background: var(--ink-1);
}
.panel__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--tx-3);
  min-height: 34px;
}
.panel__bar strong { color: var(--tx-2); font-weight: 500; }
.panel__body { padding: 0.9rem; }

/* Ampel-Punkte im Panel-Kopf */
.dots { display: flex; gap: 5px; flex: none; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); display: block; }

/* ---------- 8. Messwerte ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.metric {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.05rem 1.15rem;
  background: var(--ink-1);
}
.metric__k {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-4);
  display: block;
  margin-bottom: 0.5rem;
}
.metric__v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  color: var(--tx);
  line-height: 1;
  letter-spacing: -0.02em;
}
.metric__v small { font-size: 0.62em; color: var(--tx-3); letter-spacing: 0; margin-left: 0.25em; }
.metric--was .metric__v { color: var(--tx-3); text-decoration: line-through; text-decoration-color: var(--line-3); text-decoration-thickness: 1px; }
.metric--now .metric__v { color: var(--signal); }
.metric__note { font-size: 0.78rem; color: var(--tx-4); margin-top: 0.4rem; }

/* ---------- 9. Demo-Player ---------- */
.demo {
  border: 1px solid var(--line-2);
  background: var(--ink-1);
  scroll-margin-top: 80px;
}
.demo__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.2rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) {
  .demo__head { grid-template-columns: minmax(0,1fr); }
}
.demo__no {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.demo__title { font-size: clamp(1.22rem, 2.1vw, 1.6rem); margin-bottom: 0.55rem; }
.demo__sub { font-size: 0.95rem; color: var(--tx-2); max-width: 44em; margin: 0; }

.demo__stage {
  position: relative;
  padding: clamp(1rem, 2.4vw, 1.75rem);
  background:
    repeating-linear-gradient(0deg, rgba(233,231,226,0.022) 0 1px, transparent 1px 100%) 0 0 / 100% 28px,
    var(--ink);
  min-height: 300px;
}

.demo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--line);
  background: var(--ink-1);
}
.demo__status {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--tx-3);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.demo__status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Laufindikator */
.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tx-4); flex: none;
  transition: background 0.2s var(--ease);
}
.is-running .led { background: var(--signal); animation: pulse 1.15s infinite var(--ease); }
.is-done .led { background: var(--ok); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .is-running .led { animation: none; } }

/* Schritt-Timeline */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}
.step {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--tx-4);
  border: 1px solid transparent;
  padding: 0.2rem 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.step::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--tx-4);
  flex: none;
  transition: background 0.25s var(--ease);
}
.step.is-active { color: var(--tx); border-color: var(--line-2); }
.step.is-active::before { background: var(--signal); }
.step.is-done { color: var(--tx-3); }
.step.is-done::before { background: var(--ok); }

/* Blockfilter auf der Demoseite */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--tx-3);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.filter:hover { color: var(--tx); border-color: var(--line-2); }
.filter[aria-pressed="true"] { color: var(--tx); border-color: var(--line-3); background: rgba(233,231,226,0.05); }

/* ---------- 10. Demo-Bausteine ---------- */

/* Chat (WhatsApp / Messenger) */
.chat { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.3rem; }
.bubble {
  max-width: 82%;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--tx);
  position: relative;
}
.bubble--in { align-self: flex-start; }
.bubble--out { align-self: flex-end; background: var(--ink-3); border-color: var(--line-2); }
.bubble__meta {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--tx-4);
  margin-top: 0.4rem;
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.bubble--sys {
  align-self: center;
  max-width: 100%;
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--tx-3);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.7rem;
}
.typing { display: inline-flex; gap: 3px; align-items: center; height: 1em; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--tx-3); animation: blink 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.16s; }
.typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes blink { 0%,60%,100% { opacity: 0.25; } 30% { opacity: 1; } }

/* Terminal / Agent-Log */
.term {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--tx-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.term .t-dim { color: var(--tx-4); }
.term .t-ok { color: var(--ok); }
.term .t-sig { color: var(--signal); }
.term .t-bad { color: var(--bad); }
.term .t-warn { color: var(--warn); }
.term .t-tx { color: var(--tx); }

/* Tabellen (Excel/BMD-Look) */
.sheet {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.sheet th, .sheet td {
  border: 1px solid var(--line);
  padding: 0.38rem 0.55rem;
  text-align: left;
  color: var(--tx-2);
  white-space: nowrap;
}
.sheet th {
  background: var(--ink-2);
  color: var(--tx-3);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sheet td.num { text-align: right; }
.sheet tr.is-new td { background: rgba(255, 106, 61, 0.085); color: var(--tx); }
.sheet tr.is-ok td { background: rgba(111, 174, 134, 0.085); }
.sheet .cell-fill { color: var(--tx); }

/* Formular-/Feldextraktion */
.fields { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.field {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  background: var(--ink-1);
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
}
@media (max-width: 560px) { .field { grid-template-columns: 7.5rem minmax(0,1fr) auto; gap: 0.5rem; } }
.field__k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tx-4); }
.field__v { font-family: var(--mono); color: var(--tx); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.field__v:empty::after { content: "—"; color: var(--tx-4); }
.field__s { font-family: var(--mono); font-size: 0.62rem; color: var(--tx-4); }
.field__s.ok { color: var(--ok); }
.field__s.bad { color: var(--bad); }
.field.is-filling { background: var(--ink-2); }

/* Dokumentvorschau */
.doc {
  background: var(--paper);
  color: #23262a;
  padding: 1rem 1.1rem;
  font-size: 0.72rem;
  line-height: 1.55;
  font-family: var(--sans);
  position: relative;
  overflow: hidden;
}
.doc h5 { margin: 0 0 0.15rem; font-family: var(--sans); font-size: 0.9rem; color: #14161a; letter-spacing: -0.01em; }
.doc .doc__row { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(0,0,0,0.09); padding: 0.22rem 0; }
.doc .doc__muted { color: #6d7176; }
.doc .doc__hl { background: rgba(255,106,61,0.28); box-shadow: 0 0 0 2px rgba(255,106,61,0.28); border-radius: 1px; }
.doc__scan {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--signal);
  opacity: 0; pointer-events: none;
}
.doc.is-scanning .doc__scan { animation: scan 1.4s var(--ease) 2; }
@keyframes scan { 0% { top: 0; opacity: 0.9; } 100% { top: 100%; opacity: 0.9; } }

/* Desktop-Fenster (Computer-Use) */
.win {
  border: 1px solid var(--line-2);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: border-color 0.25s var(--ease);
}
.win.is-focus { border-color: var(--signal); }
.win__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.63rem; color: var(--tx-3);
  background: var(--ink-3);
}
.win__body { padding: 0.6rem; font-size: 0.76rem; flex: 1; min-height: 0; overflow-x: auto; }
.legacy {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: #b9d5b9;
  background: #10160f;
  border: 1px solid rgba(140,200,140,0.18);
  padding: 0.6rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-x: auto;
}
.legacy .lbl { color: #6f8c6f; }
.legacy .val { color: #d8f0d8; }
.legacy .sel { background: #2c4a2c; }

/* Cursor-Punkt für Computer-Use */
.cursor {
  position: absolute;
  width: 13px; height: 13px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid var(--paper);
  border-radius: 50%;
  background: rgba(255,106,61,0.55);
  pointer-events: none;
  z-index: 5;
  transition: left 0.62s var(--ease), top 0.62s var(--ease), transform 0.14s var(--ease);
  opacity: 0;
}
.cursor.is-on { opacity: 1; }
.cursor.is-click { transform: scale(0.55); }

/* Telefon-Wellenform */
.wave { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.wave i {
  flex: 1; background: var(--line-2); min-width: 2px;
  height: 12%; transition: height 0.14s linear, background 0.2s var(--ease);
}
.wave.is-live i { background: var(--signal); }

/* Ergebniszeile / Ausgabe */
.out {
  border: 1px solid var(--line);
  border-left: 2px solid var(--ok);
  background: var(--ink-2);
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  color: var(--tx);
}
.out__k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ok); display: block; margin-bottom: 0.35rem; }

/* Badges */
.tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  padding: 0.16rem 0.42rem;
  color: var(--tx-3);
  white-space: nowrap;
  display: inline-block;
}
.tag--live { color: var(--signal); border-color: var(--signal); }
.tag--ok { color: var(--ok); border-color: rgba(111,174,134,0.4); }

/* ---------- 11. Listen ---------- */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.62rem;
  font-size: 0.97rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 1px;
  background: var(--signal);
}
.ticks li:last-child { margin-bottom: 0; }

.numlist { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numlist > li {
  counter-increment: n;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.numlist > li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--signal);
  letter-spacing: 0.1em;
  padding-top: 0.28em;
}

/* Definitionsraster (Vorher/Nachher) */
.ba { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--line); }
.ba > div { padding: 1.1rem 1.2rem; }
.ba > div + div { border-left: 1px solid var(--line); }
.ba__k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tx-4); margin-bottom: 0.55rem; }
.ba__v { font-size: 0.93rem; color: var(--tx-2); }
.ba--now .ba__v { color: var(--tx); }

/* ---------- 12. Formular ---------- */
.form { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line-2); }
.form__row { background: var(--ink-1); padding: 0.9rem 1.1rem; display: grid; gap: 0.45rem; }
.form label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-4);
}
.form input, .form textarea, .form select {
  background: transparent;
  border: 0;
  color: var(--tx);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.15rem 0;
  width: 100%;
  resize: vertical;
}
.form input::placeholder, .form textarea::placeholder { color: var(--tx-4); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; }
.form__row:focus-within { background: var(--ink-2); }
.form select option { background: var(--ink-2); color: var(--tx); }
.form__foot { background: var(--ink-1); padding: 1rem 1.1rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }

/* ---------- 13. Sonstiges ---------- */
.portrait {
  border: 1px solid var(--line-2);
  filter: grayscale(1) contrast(1.06);
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  object-fit: cover;
}

.footer { border-top: 1px solid var(--line); padding-block: 3rem 2.5rem; }
.footer a { color: var(--tx-3); text-decoration: none; }
.footer a:hover { color: var(--tx); }

.kicker-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--tx);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
}
.kicker-lbl { font-size: 0.87rem; color: var(--tx-3); margin-top: 0.55rem; display: block; }

.note {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--tx-4);
  letter-spacing: 0.02em;
}

.hl { color: var(--signal); }

/* Einblenden beim Scrollen */
.rise { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Hero-Raster im Hintergrund */
.hero {
  position: relative;
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(233,231,226,0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233,231,226,0.038) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; }