/* molecules.css — Karte, Zeile, Reiter, Meldung. Komponieren Atome. */

.karte {
  background: var(--surface-card-raised);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-card-raised);
}
.karte--flach { background: var(--surface-card-flat); box-shadow: none; }
.karte--eng { padding: var(--space-4); }
.karte--blank {
  padding: 0;
  /* `hidden` würde die Karte zum Scroll-Container machen — und ein
     `position: sticky` darin richtet sich dann nach ihr statt nach dem
     Fenster. Der Spaltenkopf rutschte dadurch um die Kopfhöhe nach unten
     und lag mitten in der ersten Zeile. `clip` schneidet genauso an den
     runden Ecken ab, ohne einen Scroll-Container aufzumachen. */
  overflow: clip;
}

.zeile {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 10px var(--space-5) 10px calc(var(--space-5) + var(--pipe-kante));
  border-bottom: 1px solid var(--border-structural);
  transition: background var(--duration-quick) var(--ease-standard);
}
.zeile:last-child { border-bottom: 0; }
/* Die Tastatur schiebt Zeilen ins Bild. Ohne diesen Abstand landet die
   gewählte Zeile unter dem Kopf und dem Spaltenkopf — man urteilt dann
   über etwas, das man nicht sieht. */
.zeile { scroll-margin-top: calc(var(--pipe-header-h) + 3.5rem); }
.zeile:hover { background: var(--surface-sunken); }
.zeile__haupt { min-width: 0; flex: 1; }
.zeile__titel { color: var(--text-primary); font-weight: 500; }
.zeile__unter { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.zeile__werkzeug { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }

/* Der Zustand steht als Kante links, nicht als Fläche. Siehe die
   Begründung bei --pipe-offen in tokens.css. */
.zeile::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--pipe-kante); background: var(--pipe-offen);
}
.zeile.is-gut::before { background: var(--pipe-gut); }
.zeile.is-lauf::before { background: var(--pipe-lauf); animation: pulsen 1.4s ease-in-out infinite; }

.metrik {
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.metrik__name {
  font-size: 10.5px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.metrik__wert { font-family: Fraunces, Georgia, serif;
                font-size: 26px; font-weight: 500; color: var(--text-primary);
                letter-spacing: -.015em; line-height: 1.2; margin-top: 2px; }
.metrik__einheit { font-size: 12px; color: var(--text-muted); font-weight: 400; }

.reiter { display: flex; gap: 4px; background: var(--surface-sunken);
          padding: 4px; border-radius: var(--radius-md); }
.reiter__knopf {
  flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
.reiter__knopf:hover { color: var(--text-primary); }
.reiter__knopf.is-aktiv { background: var(--surface-card-raised); color: var(--text-primary);
                          box-shadow: 0 1px 3px rgba(15,23,42,.08); }

.meldung {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px;
}
.meldung--warn { background: color-mix(in srgb, var(--fn-warning) 12%, transparent);
                 color: var(--fn-warning); }
.meldung--gefahr { background: var(--fn-danger-bg); color: var(--fn-danger); }
.meldung--info { background: var(--surface-sunken); color: var(--text-body); }

.leer { text-align: center; padding: var(--space-10) var(--space-5); color: var(--text-muted); }
.leer__titel { font-family: Fraunces, Georgia, serif; font-size: 1.05rem;
               color: var(--text-primary); margin-bottom: 4px; }

/* Der Protokollstreifen: schmal, technisch, nicht schön — aber lesbar. */
.protokoll {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.45;
  background: var(--slate-900); color: var(--slate-100);
  border-radius: var(--radius-md); padding: 10px 12px;
  max-height: 9rem; overflow: auto; white-space: pre-wrap;
}