/* ==========================================================================
   Ergänzungen: A–Z Index und Kontaktformular
   ========================================================================== */

/* --- A–Z Index (04) ----------------------------------------------------- */

.cw-index-nav {
  display: flex; flex-wrap: wrap; gap: var(--cw-s1);
  margin-top: var(--cw-s6);
}
.cw-index-nav__item {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  font-family: var(--cw-font-serif); font-size: 17px;
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  color: var(--cw-ink);
}
.cw-index-nav__item:hover { border-color: var(--cw-accent); text-decoration: none; }
.cw-index-nav__item.is-active {
  background: var(--cw-ink); border-color: var(--cw-ink); color: var(--cw-paper);
}

/* Vier Spalten, damit 3.000 Einträge nicht zu einer endlosen Liste werden */
.cw-index-list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--cw-line);
  border: 1px solid var(--cw-line);
}
.cw-index-list__item {
  background: var(--cw-surface);
  padding: 12px 16px;
  min-height: 44px;
  display: flex; flex-direction: column; gap: 2px;
}
.cw-index-list__item:hover { background: var(--cw-sand); text-decoration: none; }

@media (max-width: 1119px) { .cw-index-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 839px)  { .cw-index-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .cw-index-list { grid-template-columns: 1fr; } }

/* --- Kontakt (S3) ------------------------------------------------------- */

.cw-contact {
  display: grid; grid-template-columns: 1fr 340px;
  gap: var(--cw-s8);
  padding: var(--cw-s7) 0 var(--cw-s9);
  align-items: start;
}
@media (max-width: 839px) { .cw-contact { grid-template-columns: 1fr; gap: var(--cw-s6); } }

.cw-contact__reasons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--cw-s3);
  margin-bottom: var(--cw-s7);
}
@media (max-width: 1119px) { .cw-contact__reasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .cw-contact__reasons { grid-template-columns: 1fr; } }

.cw-contact__reason {
  display: flex; flex-direction: column; gap: var(--cw-s1);
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  padding: 16px 18px;
  min-height: 44px;
}
.cw-contact__reason:hover { border-color: var(--cw-accent); text-decoration: none; }
/* Aktiver Anlass: nicht nur Farbe, auch Rahmenstärke */
.cw-contact__reason.is-active {
  border-color: var(--cw-ink);
  box-shadow: inset 0 0 0 1px var(--cw-ink);
  background: var(--cw-sand);
}

.cw-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cw-s5); }
@media (max-width: 599px) { .cw-contact__row { grid-template-columns: 1fr; gap: var(--cw-s4); } }

.cw-contact__submit {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--cw-s5);
  border-top: 1px solid var(--cw-line-soft);
  padding-top: var(--cw-s5);
}
.cw-contact__submit .cw-btn { width: auto; }
@media (max-width: 599px) {
  .cw-contact__submit { flex-direction: column; align-items: stretch; gap: var(--cw-s3); }
  .cw-contact__submit .cw-btn { width: 100%; }
}

/* --- Suchergebniskarte -------------------------------------------------- */

.cw-result { display: grid; grid-template-columns: 96px 1fr 190px; gap: var(--cw-s5); align-items: center; }
.cw-result__media { height: 96px; border-right: 1px solid var(--cw-line); overflow: hidden; }
.cw-result__body { padding: var(--cw-s4) 0; min-width: 0; }
.cw-result__body--wide { grid-column: 1 / -1; padding: var(--cw-s4) var(--cw-s5); }
.cw-result__meta { padding-right: var(--cw-s5); text-align: right; }
.cw-result mark { background: var(--cw-sand); color: var(--cw-ink); padding: 0 2px; }

@media (max-width: 839px) {
  .cw-result { grid-template-columns: 80px 1fr; }
  .cw-result__meta { grid-column: 1 / -1; text-align: left; padding: 0 var(--cw-s5) var(--cw-s4) var(--cw-s5); }
}
@media (max-width: 599px) {
  .cw-result { grid-template-columns: 1fr; }
  .cw-result__media { height: 140px; border-right: 0; border-bottom: 1px solid var(--cw-line); }
  .cw-result__body { padding: var(--cw-s4) var(--cw-s5) 0; }
}

/* --- Screenreader-Text -------------------------------------------------- */

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); border: 0;
}
.screen-reader-text:focus {
  position: static; width: auto; height: auto;
  clip-path: none; margin: 0;
}