/* ============================================================
   ZEHN X · AI LAB · LAB-03 ZEHN X CRM
   Ergaenzung zu /lab/assets/lab.css. Keine eigenen Farben,
   keine eigene Typo: alles kommt aus den lab-Tokens. Hier
   stehen nur die Bausteine, die es auf /lab noch nicht gibt
   (Ablaufkette, Schichtenbild, Gegenueberstellung, Formular).
   ============================================================ */

/* --- Schmale Textspalte fuer Fliesstext-Abschnitte --- */
.lab-eng { max-width: 46rem; }

/* --- Kette: die vier Runden der Debatte --- */
.kette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin-top: 2.4rem;
  background: var(--lab-linie);
  border: 1px solid var(--lab-linie);
}
.kette > div {
  background: var(--lab-flaeche);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.kette .schritt {
  font: 400 .7rem var(--lab-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lab-gold);
}
.kette h4 {
  font: 550 1.05rem/1.25 var(--lab-serif);
  color: #fff;
  letter-spacing: -.005em;
  margin: 0;
}
.kette p {
  font-family: var(--lab-sans);
  font-size: .89rem;
  line-height: 1.65;
  color: var(--lab-text-2);
  margin: 0;
}

/* --- Personen am Tisch --- */
.tisch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.person {
  border: 1px solid var(--lab-linie);
  background: var(--lab-flaeche);
  padding: 1.5rem 1.4rem;
}
.person .rolle {
  font: 400 .7rem var(--lab-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lab-text-3);
}
.person b {
  display: block;
  font: 550 1.1rem/1.3 var(--lab-serif);
  color: #fff;
  margin: .5rem 0 .6rem;
  font-weight: 550;
}
.person p {
  font-family: var(--lab-sans);
  font-size: .88rem;
  line-height: 1.65;
  color: var(--lab-text-2);
  margin: 0;
}
.person ul {
  list-style: none;
  padding: .9rem 0 0;
  margin: .9rem 0 0;
  border-top: 1px solid var(--lab-linie);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.person li {
  font: 400 .68rem var(--lab-mono);
  letter-spacing: .04em;
  color: var(--lab-text-3);
  border: 1px solid var(--lab-linie);
  padding: .28rem .55rem;
}

/* --- Schichtenbild der Architektur --- */
.schichten {
  margin-top: 2.2rem;
  border: 1px solid var(--lab-linie);
  background: var(--lab-flaeche);
}
.schicht {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.4rem;
  padding: 1.25rem 1.4rem;
  border-top: 1px solid var(--lab-linie);
}
.schicht:first-child { border-top: 0; }
.schicht > span {
  font: 400 .72rem var(--lab-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lab-gold);
  padding-top: .15rem;
}
.schicht > div {
  font-family: var(--lab-sans);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--lab-text-2);
}
.schicht b { color: var(--lab-text); font-weight: 500; }

/* --- Zwei Spalten: dabei / nicht dabei --- */
.gegenueber {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.gegenueber > div {
  border: 1px solid var(--lab-linie);
  background: var(--lab-flaeche);
  padding: 1.6rem 1.5rem;
}
.gegenueber h4 {
  font: 400 .72rem var(--lab-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lab-text-3);
  margin: 0 0 1.1rem;
}
.gegenueber ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.gegenueber li {
  font-family: var(--lab-sans);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--lab-text-2);
  padding-left: 1.5rem;
  position: relative;
}
.gegenueber li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 1px;
  background: var(--lab-text-3);
}
.gegenueber .dabei li::before { background: var(--lab-gruen); }
.gegenueber .offen li::before { background: var(--lab-gold); }

/* --- Der Lead-Anker: Bezug ueber das Formular --- */
.bezug {
  border: 1px solid var(--lab-linie-hell);
  background: var(--lab-flaeche);
  padding: 2.4rem 2rem;
  margin-top: 2.4rem;
  max-width: 40rem;
  position: relative;
}
.bezug::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--lab-gold);
}
.bezug h3 {
  font: 550 1.4rem/1.25 var(--lab-serif);
  color: #fff;
  margin: 0 0 .7rem;
}
.bezug > p {
  font-family: var(--lab-sans);
  font-size: .94rem;
  line-height: 1.65;
  color: var(--lab-text-2);
  margin: 0 0 1.6rem;
}
.feld { display: grid; gap: .45rem; margin-bottom: 1rem; }
.feld label {
  font: 400 .7rem var(--lab-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lab-text-3);
}
.feld input {
  background: var(--lab-grund);
  border: 1px solid var(--lab-linie);
  color: var(--lab-text);
  font: 400 .95rem var(--lab-sans);
  padding: .8rem .9rem;
  border-radius: 0;
  width: 100%;
  transition: border-color .18s cubic-bezier(.22,1,.36,1);
}
.feld input:focus { outline: none; border-color: var(--lab-gold); }
.feld input::placeholder { color: var(--lab-text-3); }

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--lab-gold);
  color: #14213D;
  border: 1px solid var(--lab-gold);
  font: 500 .78rem var(--lab-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .95rem 1.8rem;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s cubic-bezier(.22,1,.36,1), color .18s;
}
.knopf:hover { background: #D8B57E; border-color: #D8B57E; }
.knopf[disabled] { opacity: .55; cursor: progress; }
.knopf-leise {
  background: transparent;
  color: var(--lab-text-2);
  border-color: var(--lab-linie-hell);
}
.knopf-leise:hover { background: transparent; color: var(--lab-gold); border-color: var(--lab-gold); }

.kleingedruckt {
  font-family: var(--lab-sans);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--lab-text-3);
  margin: 1.1rem 0 0;
  max-width: 34rem;
}
.kleingedruckt a { color: var(--lab-text-2); }

.meldung {
  font: 400 .8rem/1.6 var(--lab-mono);
  margin-top: 1.1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--lab-linie);
  display: none;
}
.meldung[data-art="ok"] { display: block; border-color: var(--lab-gruen); color: var(--lab-gruen); }
.meldung[data-art="fehler"] { display: block; border-color: var(--lab-gold); color: var(--lab-gold); }

/* --- Leiser Ausgang Richtung Beratung --- */
.ausgang {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--lab-linie);
  background: var(--lab-flaeche);
  padding: 1.8rem 1.8rem;
  margin-top: 2.2rem;
}
.ausgang p {
  margin: 0;
  font-family: var(--lab-sans);
  font-size: .95rem;
  color: var(--lab-text-2);
  max-width: 44ch;
}

/* --- Codeblock fuer den Startbefehl --- */
.befehl {
  margin-top: 1.6rem;
  border: 1px solid var(--lab-linie);
  background: var(--lab-grund);
  padding: 1.2rem 1.3rem;
  overflow-x: auto;
  font: 400 .82rem/1.9 var(--lab-mono);
  color: var(--lab-text-2);
}
.befehl .prompt { color: var(--lab-gold); user-select: none; }
.befehl .komm { color: var(--lab-text-3); }

/* --- Fragen vor dem Anfordern: aufklappbar, ohne Spielerei --- */
.fragen {
  margin-top: 2.2rem;
  border: 1px solid var(--lab-linie);
  background: var(--lab-flaeche);
  max-width: 52rem;
}
.fragen details { border-top: 1px solid var(--lab-linie); }
.fragen details:first-child { border-top: 0; }

.fragen summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 1.5rem;
  font: 550 1.05rem/1.4 var(--lab-serif);
  color: #fff;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  transition: color .18s cubic-bezier(.22,1,.36,1);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary:hover { color: var(--lab-gold); }
.fragen summary:focus-visible { outline: 1px solid var(--lab-gold); outline-offset: -1px; }

/* Das Zeichen sagt den Zustand, nicht ein gedrehter Pfeil. */
.fragen summary::after {
  content: "+";
  font: 400 1.1rem/1 var(--lab-mono);
  color: var(--lab-gold);
  flex: 0 0 auto;
}
.fragen details[open] summary::after { content: "−"; }
.fragen details[open] summary { color: var(--lab-gold); }

.fragen details > div {
  padding: 0 1.5rem 1.5rem;
  display: grid;
  gap: .9rem;
}
.fragen details p {
  margin: 0;
  font-family: var(--lab-sans);
  font-size: .92rem;
  line-height: 1.7;
  color: var(--lab-text-2);
  max-width: 62ch;
}

/* --- Auswahl und Freitext im Formular --- */
.feld select,
.feld textarea {
  background: var(--lab-grund);
  border: 1px solid var(--lab-linie);
  color: var(--lab-text);
  font: 400 .95rem/1.6 var(--lab-sans);
  padding: .8rem .9rem;
  border-radius: 0;
  width: 100%;
  transition: border-color .18s cubic-bezier(.22,1,.36,1);
}
.feld select:focus,
.feld textarea:focus { outline: none; border-color: var(--lab-gold); }
.feld textarea { resize: vertical; min-height: 5.5rem; }
.feld textarea::placeholder { color: var(--lab-text-3); }
/* Ohne eigenes Zeichen zeigt die Auswahl im Dunkeln kaum, dass sie eine ist. */
.feld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--lab-gold) 50%),
                    linear-gradient(135deg, var(--lab-gold) 50%, transparent 50%);
  background-position: right 1.1rem center, right .85rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.feld select option { background: var(--lab-flaeche); color: var(--lab-text); }

/* Die Klammer „freiwillig" soll nicht wie eine Versalie mitschreien. */
.feld label .frei { text-transform: none; letter-spacing: 0; color: var(--lab-text-3); }

/* --- Aufnahme der Oberflaeche: Rahmen wie ein Geraet im Rack --- */
.aufnahme {
  margin: 2.4rem 0 0;
  border: 1px solid var(--lab-linie);
  background: var(--lab-flaeche);
  padding: 1px;
  max-width: 54rem;
}
.aufnahme img {
  display: block;
  width: 100%;
  height: auto;
  /* Bewusst ungekuerzt: die Bildunterschrift verweist auf die Ampeln am
     unteren Rand, ein Zuschnitt wuerde genau den Beweis wegschneiden. */
}
.aufnahme figcaption {
  font: 400 .76rem/1.7 var(--lab-mono);
  color: var(--lab-text-3);
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--lab-linie);
  max-width: 62ch;
}
.aufnahme a { color: var(--lab-text-2); }

/* --- Terminal im Hero: das echte Protokoll, nicht die Erklaerung --- */
.terminal {
  margin: 3rem 0 0;
  border: 1px solid var(--lab-linie-hell);
  background: var(--lab-grund);
  max-width: 62rem;
  font: 400 .8rem/1.6 var(--lab-mono);
}
.terminal .tk {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.4rem;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--lab-linie);
  background: var(--lab-flaeche);
  color: var(--lab-text-3);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
.terminal .tp { display: inline-flex; align-items: center; gap: .5rem; }
.terminal .tp i { width: 6px; height: 6px; background: var(--lab-gruen); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(95,191,146,.14); }
.terminal .tb { padding: 1.1rem 1.1rem 1.2rem; display: grid; gap: .8rem; }
.terminal .tz { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: start; }
.terminal .tr { color: var(--lab-text-3); letter-spacing: .08em; font-size: .68rem; text-transform: uppercase; padding-top: .15rem; }
.terminal .tt { color: var(--lab-text-2); }
.terminal .tz-eingabe .tr { color: var(--lab-gold); font-size: .8rem; letter-spacing: 0; text-transform: none; }
.terminal .tz-eingabe .tt { color: var(--lab-text); }
.terminal .t-pitch { color: var(--lab-text-2); }
.terminal .t-cfo, .terminal .t-cto, .terminal .t-cmo { color: var(--lab-gold); }
.terminal .t-anker { color: var(--lab-gruen); }
.terminal .t-meta { color: var(--lab-text); }
.terminal .tz-ergebnis { border-top: 1px solid var(--lab-linie); padding-top: .9rem; margin-top: .2rem; }
.terminal .tz-ergebnis .tr { color: var(--lab-gold); font-size: .85rem; letter-spacing: 0; }
.terminal .tz-ergebnis .tt { color: var(--lab-text); }
.terminal figcaption {
  border-top: 1px solid var(--lab-linie);
  padding: 1rem 1.1rem 1.1rem;
  font: 400 .78rem/1.65 var(--lab-sans);
  color: var(--lab-text-3);
  max-width: 68ch;
}

@media (max-width: 640px) {
  .terminal .tz { grid-template-columns: 1fr; gap: .2rem; }
  .schicht { grid-template-columns: 1fr; gap: .5rem; }
  .bezug { padding: 1.8rem 1.3rem; }
  .ausgang { padding: 1.5rem 1.3rem; }
}