/* ==========================================================================
   kontakt.css – Kontaktseite und Dankeseite
   Setzt auf style.css auf; .form, .field und .consent kommen von dort.
   ========================================================================== */

/* Schlanker Kopf: hier steht keine Bildbühne, nur Überschrift und ein Satz. */
.syskopf--schlank { padding: clamp(84px, 10vw, 124px) 0 clamp(44px, 6vw, 64px); }
.syskopf--schlank h1 { margin-top: 0; }
.syskopf--schlank .syskopf__text { margin-bottom: 0; }

/* --------------------------------------------------------- Zwei Spalten  */
.kontakt {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 880px) {
  .kontakt { grid-template-columns: 1fr; }
}

.kontakt__h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 0 0 22px;
}

/* --------------------------------------------------------- Kontaktwege   */
.kontaktweg {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: transform .25s var(--ease);
}
a.kontaktweg:hover { transform: translateX(4px); }
/* Die Icons sind Bilder und färben sich nicht mit. Die Kachel voll blau zu
   füllen ginge deshalb nicht mehr – dunkelblaue Zeichnung auf Signalblau
   wäre kaum noch zu erkennen. Beim Überfahren wird sie stattdessen eine
   Stufe kräftiger; die eigentliche Rückmeldung ist ohnehin der Versatz. */
a.kontaktweg:hover .kontaktweg__icon { background: #D3E4FA; }
.kontaktweg--still { cursor: default; }

.kontaktweg__icon {
  display: grid; place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: var(--r);
  background: var(--blue-soft);
  color: var(--blue);
  transition: background-color .25s var(--ease);
}
.kontaktweg__icon img { width: 24px; height: 24px; }

.kontaktweg strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  color: var(--navy);
}
.kontaktweg small {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--text-mute);
}

.kontakt__hinweis {
  margin: 26px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.kontakt__hinweis a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(11,99,214,.3); }

/* --------------------------------------------------------- Formular      */
.kontakt__formular {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Der Honigtopf muss für Menschen unerreichbar sein, für Bots aber wie ein
   normales Feld aussehen – deshalb nicht display:none, sondern aus dem Bild
   geschoben. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.field input.is-invalid,
.field textarea.is-invalid,
.field select.is-invalid {
  border-color: var(--danger);
}
.consent input.is-invalid + span { color: var(--danger); }

.field textarea {
  width: 100%;
  resize: vertical;
  min-height: 130px;
  font: inherit;
}

/* --------------------------------------------------------- Dankeseite    */
.dankeseite { padding-top: clamp(96px, 12vw, 150px); }

.dankeseite__karte {
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.dankeseite__haken {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--green);
}
.dankeseite__haken svg { width: 32px; height: 32px; }

.dankeseite__karte h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.16;
  margin: 0 0 18px;
  text-wrap: balance;
}
.dankeseite__karte .lede { margin-inline: auto; }

.dankeseite__mail {
  margin: 20px auto 0;
  max-width: 48ch;
  font-size: 15px;
  color: var(--text-mute);
}

.dankeseite__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

.dankeseite__weiter {
  margin: 30px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--text-mute);
}
.dankeseite__weiter a { color: var(--blue); text-decoration: none; }
.dankeseite__weiter a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .kontaktweg, .kontaktweg__icon { transition: none; }
  a.kontaktweg:hover { transform: none; }
}

/* Ansprechpartner in der schmalen Spalte der Kontaktseite: untereinander,
   mit etwas Luft zu den Kontaktwegen darüber. */
.kontakt__untertitel {
  margin: 30px 0 4px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.koepfe--eng { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }

/* Öffnungszeiten auf der Kontaktseite. Als Tabelle, weil es eine ist –
   Tag und Zeit gehören zusammen, und Screenreader lesen die Paare richtig. */
.zeiten {
  width: 100%;
  margin: 14px 0 0;
  border-collapse: collapse;
  font-size: 15.5px;
}
.zeiten th,
.zeiten td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
}
.zeiten th { color: var(--text-body); }
.zeiten td { color: var(--navy); font-variant-numeric: tabular-nums; text-align: right; }
.zeiten tr:last-child th,
.zeiten tr:last-child td { border-bottom: 0; }
.zeiten__zu th,
.zeiten__zu td { color: var(--text-mute); }