/* ==========================================================================
   Seite: Kontakt (Unternehmen/Kontakt.aspx)
   Inhalt: Kopf (.page-hero, siehe Infoseite.css), darunter links das
   Kontaktformular «Nachricht schreiben», rechts «Direkter Kontakt»
   (Telefon, E-Mail, Adresse, Remote-Support) und darunter die Standortkarte
   ========================================================================== */

/* ==========================================================================
   Aufteilung: Formular links, rechte Spalte (Kontaktdaten + Karte)
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
  gap: 1.25rem;
  align-items: stretch; /* rechte Spalte gleich hoch wie das Formular */
}

/* Karten «Nachricht schreiben» und «Direkter Kontakt» */
.about-contact-page .contact-card,
.about-contact-page .contact-info {
  padding: 1.8rem 2rem;
}

/* Überschriften der beiden Karten */
.about-contact-page .contact-card h2,
.about-contact-page .contact-info h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
}

/* Hinweis «Felder mit * sind Pflichtfelder» */
.about-contact-page .contact-hint {
  margin: 0.3rem 0 0;
  color: var(--dark-muted);
  font-size: 0.88rem;
}

/* ==========================================================================
   Formular
   ========================================================================== */
.about-contact-page .contact-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.3rem;
}

/* Ein Feld: Beschriftung, Eingabe, Fehlermeldung untereinander */
.about-contact-page .field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  align-content: start;
}

/* Beschriftung über dem Feld */
.about-contact-page .field label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--dark-copy, var(--color-heading));
}

/* Sternchen bei Pflichtfeldern */
.about-contact-page .req {
  color: var(--dark-req);
  font-weight: 700;
}

/* Zusatz «(optional)» bei Firma */
.about-contact-page .optional {
  color: var(--dark-muted);
  font-weight: 400;
}

/* Zeilen mit mehreren Feldern nebeneinander */
.about-contact-page .row {
  display: grid;
  gap: 1rem;
}

/* Anrede / Vorname / Nachname */
.about-contact-page .row-name {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Firma / E-Mail */
.about-contact-page .row-half {
  grid-template-columns: 1fr 1fr;
}

/* PLZ (schmal) / Ort (breit) */
.about-contact-page .row-zip {
  grid-template-columns: 1fr 2fr;
}

/* Eingabefelder */
.about-contact-page .input,
.about-contact-page .textarea,
.about-contact-page .select {
  display: block;
  width: 100%;
  border: 1px solid var(--dark-input-border, #cbd8e6);
  border-radius: 10px;
  background: var(--dark-input-bg);
  color: var(--dark-input-text);
  padding: 0.7rem 0.85rem;
  font: inherit;
  line-height: 1.4;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color var(--button-hover);
}

/* Feld «Nachricht» */
.about-contact-page .textarea {
  min-height: 150px;
  resize: vertical;
}

/* Auswahl «Anrede» */
.about-contact-page .select {
  cursor: pointer;
}

.about-contact-page .select option {
  background: var(--dark-input-bg);
  color: var(--dark-input-text);
}

/* Feld beim Überfahren mit der Maus */
.about-contact-page .input:hover,
.about-contact-page .textarea:hover,
.about-contact-page .select:hover {
  border-color: var(--dark-field-hover);
}

/* Feld, in dem gerade geschrieben wird */
.about-contact-page .input:focus,
.about-contact-page .textarea:focus,
.about-contact-page .select:focus {
  outline: none;
  border-color: var(--dark-field-focus);
  box-shadow: 0 0 0 3px var(--dark-field-ring, rgba(42, 111, 179, 0.18));
}

/* Fehlermeldung pro Feld: nur sichtbar, wenn Text vorhanden ist */
.about-contact-page .field-error {
  display: block;
  color: var(--dark-error);
  font-size: 0.86rem;
  font-weight: 600;
}

.about-contact-page .field-error:empty,
.about-contact-page .form-status:empty {
  display: none;
}

/* Rückmeldung nach dem Absenden */
.about-contact-page .form-status {
  display: block;
  margin-top: 1.2rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--dark-status-border);
  background: var(--dark-status-bg);
  color: var(--dark-status-text);
  font-weight: 600;
}

/* Erfolgsmeldung «Vielen Dank! Ihre Nachricht wurde versendet.» */
.about-contact-page .form-status.is-success {
  border-color: var(--dark-success-border);
  background: var(--dark-success-bg);
  color: var(--dark-success-text);
}

/* Unten: Datenschutz-Hinweis links, Senden rechts */
.about-contact-page .form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 0.3rem;
}

/* Datenschutz-Hinweis neben dem Senden-Knopf */
.about-contact-page .form-privacy {
  margin: 0;
  max-width: 360px;
  font-size: 0.85rem;
  color: var(--dark-muted);
}

.about-contact-page .form-privacy a {
  text-decoration: underline;
}

/* Senden-Knopf (Aussehen: .button / .button-lg in Global.css) */
.about-contact-page .contact-submit {
  flex: 0 0 auto;
}

/* ==========================================================================
   Kontaktdaten rechts
   ========================================================================== */
.contact-ways {
  margin: 1.2rem 0 0;
  display: grid;
  gap: 1.1rem;
}

/* Ein Kontaktweg: Icon links, Bezeichnung und Wert rechts */
.contact-ways li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  line-height: 1.45;
  color: var(--dark-copy, var(--color-heading));
}

/* Icon-Kästchen wie auf der Startseite (Farbe über tone-…) */
.contact-way-icon {
  --icon-size: 38px;
}

/* Kleine Bezeichnung über dem Wert («Telefon», «E-Mail» …) */
.contact-way-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark-muted);
}

/* Telefonnummer, E-Mail-Adresse und Link zum Remote-Support */
.contact-ways a {
  font-weight: 700;
  color: var(--dark-link, var(--color-primary));
  overflow-wrap: anywhere;
}

.contact-ways a:hover,
.contact-ways a:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   Rechte Spalte: Kontaktdaten oben, Standortkarte füllt den Rest bis zum Ende des Formulars
   ========================================================================== */
.contact-side {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.25rem;
}

/* Box «Standort»: Kopfzeile oben, Karte randlos bis an die Kanten der Box */
.about-contact-page .contact-map {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Kopfzeile: «Standort» links, «Route planen» rechts */
.contact-map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 1.5rem 2rem 1rem;
}

.about-contact-page .contact-map h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
}

/* Bereich der Karte: füllt die restliche Höhe der Box (erst Hinweis, nach Klick die Google-Karte) */
.contact-map-wrap {
  flex: 1 1 auto;
  display: flex;
  min-height: 260px;
  border-top: 1px solid var(--card-border);
}

.contact-map-wrap iframe {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 260px;
  border: 0;
}

/* Hinweis vor dem Laden der Karte: Icon, Text zu Google, Knopf «Karte anzeigen» */
.contact-map-consent {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--consent-bg);
}

.contact-map-consent p {
  margin: 0;
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-map-consent a {
  text-decoration: underline;
}

/* ==========================================================================
   Tablet / Handy
   ========================================================================== */
/* Tablet: Formular oben, Kontaktdaten und Karte darunter */
@media (max-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-map-wrap,
  .contact-map-wrap iframe {
    min-height: 320px;
  }
}

/* ==========================================================================
   Handy: alle Felder untereinander, Senden-Knopf über die ganze Breite
   ========================================================================== */
@media (max-width: 700px) {
  .about-contact-page .contact-card,
  .about-contact-page .contact-info {
    padding: 1.4rem 1.1rem;
  }

  .contact-map-head {
    padding: 1.3rem 1.1rem 0.9rem;
  }

  .about-contact-page .row-name,
  .about-contact-page .row-half,
  .about-contact-page .row-zip {
    grid-template-columns: 1fr;
  }

  .about-contact-page .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .about-contact-page .form-privacy {
    max-width: none;
  }

  .about-contact-page .contact-submit {
    width: 100%;
  }
}

/* Dark Mode: nur die abweichenden Farben dieser Seite */
html[data-theme="dark"] .about-contact-page {
  --consent-bg: rgba(255, 255, 255, 0.03);
  --dark-muted: #a9bdd3;
  --dark-req: #fdba74;
  --dark-error: #fca5a5;
  --dark-field-hover: #6f8eb0;
  --dark-field-focus: #7fb0e0;
  --dark-field-ring: rgba(127, 176, 224, 0.25);
  --dark-status-bg: rgba(190, 18, 60, 0.18);
  --dark-status-border: rgba(252, 165, 165, 0.45);
  --dark-status-text: #fecdd3;
  --dark-success-bg: rgba(16, 185, 129, 0.16);
  --dark-success-border: rgba(110, 231, 183, 0.45);
  --dark-success-text: #bbf7d0;
}