/* ============================================================
   Kontakte — die Angaben als Zeilen.

   Schwester von firmen.css, mit eigenem Praefix. Warum nicht
   dieselben Klassen: firmen.js faengt Klicks auf .fi-aknopf in
   der Erfassungsphase ab und haelt sie an. Beide Module auf
   denselben Namen zu setzen hiesse, dass hier lautlos nichts
   mehr ankommt — siehe den Kopf von kontakte.js.

   Die Werte sind absichtlich dieselben wie dort: dieselbe
   Zeilenhoehe, dieselbe Beschriftungsfarbe, derselbe Rahmen beim
   Zeigen. Ein Kontakt und eine Firma sollen sich gleich anfuehlen.
   ============================================================ */

/* Die Karte steht im Gitter des Reiters "Details" (.scrm-kzwei,
   auto-fit minmax(280px,1fr)) und nimmt die ganze Breite: die
   Angaben sind das, wofuer man den Reiter oeffnet. Qualifizierung
   und Datenschutz ruecken darunter. */
.kp-werte { grid-column: 1 / -1; }

.kp-wkopf {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.kp-wkopf .scrm-nh { margin: 0; }
.kp-stand { font-size: 11.5px; color: var(--scrm-mut, #8a97a8); }
/* Einmal gelesen braucht es das niemand mehr, also leise. */
.kp-hinweis {
  margin-inline-start: auto;
  font-size: 10.5px;
  color: #b3bdcb;
  white-space: nowrap;
}

/* Jede Gruppe ein Block, die Bloecke nebeneinander, soweit Platz
   ist. Eine einzige Spalte waere bei einundzwanzig Angaben eine
   Tapete; ein Spaltenumbruch (columns) mitten durch "Vorzimmer"
   waere schlimmer — darum ein Gitter und keine Textspalten. */
.kp-aliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 2px 22px;
  align-items: start;
}
.kp-gruppe { min-width: 0; }

.kp-abschnitt {
  margin: 12px 0 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--scrm-mut, #8a97a8);
}
.kp-gruppe:first-child .kp-abschnitt { margin-top: 4px; }

/* Beschriftung links, Wert rechts. Die 118 Pixel sind die
   laengste Beschriftung ("E-Mail (geschäftlich)") in zwei
   Zeilen — breiter waere Platzverschwendung, schmaler braeche
   auch "Festnetznummer" um. */
.kp-az {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 8px;
}
.kp-az:hover { background: #f9fbfd; }
.kp-ak {
  flex: none;
  width: 118px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--scrm-mut, #8a97a8);
}
.kp-aw {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* Leer ist nicht nichts — aber auch nichts, worauf das Auge
   haengenbleiben soll. */
.kp-az.leer .kp-aw { color: #c3ccd8; font-weight: 400; }

/* ============================================================
   An Ort und Stelle bearbeiten

   Der Wert IST der Knopf. Im Ruhezustand darf man ihm das nicht
   ansehen — eine Karte aus einundzwanzig Eingabefeldern waere
   wieder die Maske, die hier gerade abgeschafft wird. Erst beim
   Zeigen taucht der Rahmen auf.
   ============================================================ */
.kp-aknopf {
  /* Alles, was ein Knopf mitbringt, wieder abraeumen: er soll
     aussehen wie der Text, der er vorher war. */
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  /* 7 und 14, nicht 6 und 12: der durchsichtige Rahmen zaehlt bei
     border-box mit, und die fehlenden zwei Pixel reichen, um eine
     Mailadresse umbrechen zu lassen. Je Seite 1px Rahmen plus 6px
     Polster. */
  padding: 1px 6px;
  margin: -2px -7px;
  border-radius: 7px;
  cursor: text;
  width: calc(100% + 14px);
}
.kp-az.kp-bearb:hover .kp-aknopf { border-color: #dde5ef; background: #fff; }
.kp-aknopf:focus-visible {
  outline: 0;
  border-color: var(--accent, #2f7ad6);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 47,122,214), .16);
}
/* Der Gedankenstrich eines leeren Feldes soll einladen, nicht
   bloss dastehen. */
.kp-az.kp-bearb:hover .kp-leerzeichen::after {
  content: " eintragen";
  font-size: 11.5px;
  color: #aab5c4;
}

/* Das offene Feld sitzt genau dort, wo der Wert stand — kein
   Sprung, keine neue Zeile, kein Dialog. */
.kp-aein {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--scrm-text, #12233a);
  background: #fff;
  border: 1px solid var(--accent, #2f7ad6);
  border-radius: 7px;
  padding: 1px 6px;
  margin: -1px -6px;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 47,122,214), .16);
}
textarea.kp-aein { resize: vertical; line-height: 1.45; padding: 4px 6px; }
select.kp-aein { cursor: pointer; }
.kp-az.kp-offen { background: #f6f9fd; }

/* Der Zweck braucht die ganze Breite: zwoelf Zeichen neben einer
   118 Pixel breiten Beschriftung sind kein Textfeld. */
.kp-az.kp-lang { flex-wrap: wrap; }
.kp-az.kp-lang .kp-aw,
.kp-az.kp-lang .kp-aein { flex-basis: 100%; }

/* Schmales Fenster: untereinander statt nebeneinander. Das
   Gitter macht das von selbst (auto-fill), hier bleibt nur der
   Abstand — zwischen zwei Gruppen untereinander braucht es mehr
   Luft als zwischen zwei nebeneinander. */
@media (max-width: 760px) {
  .kp-aliste { gap: 0; }
  .kp-ak { width: 104px; }
}