/* ==========================================================================
   Kontaktseite „Kontakt“ (js/mod-kontakte.js): ruhiges Verzeichnis in Schwarz-Weiß.
   Suche oben, erste Anlaufstelle, Liste der Zuständigkeiten, drei Wege als Zeilen.
   ========================================================================== */
.kt { max-width: 860px; display: grid; gap: 34px; margin-top: 10px; }
.kt .pfp { filter: grayscale(1) contrast(1.05); box-shadow: 0 0 0 1px var(--line); }
.kt .pfp::after { display: none; }

/* Suche */
.kt-search { display: grid; gap: 10px; }
.kt-q { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text-2); }
.kt-q:focus-within { border-color: var(--text); }
.kt-q input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font: 400 16.5px var(--font); color: var(--text); }
.kt-q input::placeholder { color: var(--text-2); }
.kt-tipps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 4px; font-size: 14px; color: var(--text-2); }
.kt-tipps button { padding: 2px 0; border: 0; background: none; cursor: pointer; font: 500 14px var(--font); color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.kt-tipps button:hover { text-decoration-color: currentColor; }

/* Abschnitte */
.kt-sec { display: grid; gap: 12px; }
.kt-sec[hidden] { display: none; }
.kt-h { display: flex; align-items: baseline; gap: 10px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--text); font: 650 13px/1.2 var(--font); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.kt-h em { font-style: normal; font-weight: 500; color: var(--text-2); letter-spacing: 0; }

/* Erste Anlaufstelle */
.kt-first { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 6px 0; }
.kt-first .pfp { width: 92px; height: 92px; }
.kt-first .pfp b { font-size: 30px; }
.kt-first .kt-n b { font: italic 900 34px/1.05 var(--head); }
.kt-why { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--text); max-width: 54ch; }

/* Liste */
.kt-list { list-style: none; margin: 0; padding: 0; }
.kt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.kt-row[hidden] { display: none; }
.kt-row .pfp { width: 54px; height: 54px; }
.kt-row .pfp b { font-size: 19px; }
.kt-t { min-width: 0; }
.kt-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.kt-n b { font: 650 17.5px/1.25 var(--font); }
.kt-r { font-size: 14px; color: var(--text-2); }
.kt-th { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.kt-more { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.kt-k { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
a.kt-k:hover { border-color: var(--text); }
.kt-k svg:last-child:not(:first-child) { opacity: .6; }
.kt-leer { margin: 6px 0 0; color: var(--text-2); }
.kt-leer[hidden] { display: none; }

/* Wege */
.kt-wege { margin: 0; }
.kt-wege > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kt-wege dt { display: flex; align-items: center; gap: 9px; font-weight: 650; align-self: start; }
.kt-wege dd { margin: 0; color: var(--text); line-height: 1.5; }
.kt-link { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; white-space: nowrap; }

@media (max-width: 640px) {
  .kt { gap: 28px; }
  .kt-first { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .kt-first .pfp { width: 72px; height: 72px; }
  .kt-first .kt-n b { font-size: 28px; }
  .kt-first .kt-k { grid-column: 1 / -1; justify-self: start; }
  .kt-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .kt-row .kt-k { grid-column: 2; justify-self: start; }
  .kt-wege > div { grid-template-columns: 1fr; gap: 6px; }
}

/* 0.19.0a: Leitungsebene / Serviceebene */
.kt-ebene { margin: 0 0 18px; display: inline-flex; }
.kt-ebene a { text-decoration: none; padding: 8px 16px; border-radius: 12px; font: 600 14px var(--font); color: var(--text-2); transition: background .2s, color .2s; }
.kt-ebene a.on { background: var(--card); color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.kt-intro { margin: -4px 0 12px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.kt-row > .ava { --s: 52px; }
.kt-n .kb { margin-left: 2px; }
.kt-n .kb.sonder, .kt-n .kb.neu { background: var(--accent-soft); color: var(--accent); }
