/* verbinden.css — Ansicht „Apple Health".
   Baut auf system.css auf; alle Klassen tragen das Präfix verbinden-. */

.verbinden { gap: 20px; }

.verbinden-kopf { display: grid; gap: 6px; }

/* Der Stand oben trägt die Aussage: Kommt etwas an oder nicht? Die Glut
   markiert den guten Fall, ohne dass eine zweite Farbe nötig wird. */
.verbinden-stand { display: grid; gap: 4px; }
.verbinden-stand--frisch { border-color: var(--akzent); }
.verbinden-stand--alt,
.verbinden-stand--aus { border-color: var(--linie); }

.verbinden-zeit {
  font-size: 22px;
  font-weight: 600;
  color: var(--tinte);
}
.verbinden-stand--frisch .verbinden-zeit { color: var(--akzent); }

/* Adressen sind zum Antippen da — die ganze Zeile ist der Griff. */
.verbinden-adresse {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px;
  padding: 10px 14px;
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  text-align: left;
  transition: border-color var(--wechsel), background-color var(--wechsel);
}
.verbinden-adresse:hover { border-color: var(--tinte-leise); }
.verbinden-adresse:active { background: var(--flaeche); }

.verbinden-adresse-text {
  font: 15px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--tinte);
  overflow-wrap: anywhere;
}
.verbinden-adresse-tat {
  flex: none;
  font-size: 13px;
  color: var(--akzent);
}

/* Die Schritte sind gestaffelt, nicht gleichrangig: Nummer klein und leise,
   die Überschrift trägt. */
.verbinden-schritte {
  display: grid; gap: 18px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.verbinden-schritt {
  display: grid; gap: 4px;
  padding-left: 30px;
  position: relative;
  counter-increment: schritt;
}
.verbinden-schritt::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 1px;
  width: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.verbinden-schritt-titel {
  font-size: 17px;
  font-weight: 600;
  color: var(--tinte);
}
.verbinden-schritt code,
.verbinden code {
  font: 13px ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--akzent);
  overflow-wrap: anywhere;
}

/* Herkunftszeile in der Heute-Ansicht — leise, aber antippbar. */
.heute-herkunft {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--linie);
  font-size: 13px;
  color: var(--tinte-gedimmt);
  text-decoration: none;
  transition: color var(--wechsel);
}
.heute-herkunft:hover { color: var(--tinte); }
.heute-herkunft-tat { flex: none; color: var(--akzent); }
.heute-herkunft--alt { color: var(--warnung); }
.heute-herkunft--alt .heute-herkunft-tat { color: var(--warnung); }
.heute-herkunft--aus .heute-herkunft-tat { color: var(--akzent); }