/* ═════════════════════════════════════════════════════════════════════
   SEITE «KONTAKT» – seitenspezifische Ergänzungen zu css/style.css
   Header, Footer und Design-Tokens kommen unverändert aus css/style.css.
   Aufbau:
   1. Kopfbereich (kompakt, ohne Hero-Video)
   2. Direkter Kontakt (Kontaktliste, Anruf-Button)
   3. Kontaktformular (moderne Eingabefelder auf hellblauer Fläche)
   ═════════════════════════════════════════════════════════════════════ */


/* 1. KOPFBEREICH ---------------------------------------------------------
   Bewusst kompakt und ohne Video: bei der Kontaktseite zählt schnelle
   Erreichbarkeit, kein Bildeindruck. */
.contact-head { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(2rem, 5vw, 3rem); }
.contact-head__title { color: var(--blue-dark); }
.contact-head__claim {
  margin-top: .75rem;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  color: var(--ink-soft);
}


/* Kurzer Einleitungstext oberhalb von Formular/WhatsApp/Kontaktdaten -- steht jetzt nur
   einmal hier (statt zusätzlich bei den Kontaktdaten weiter unten, wo er sich bisher mit dem
   Hero-Titel/-Claim inhaltlich überschnitten hat). Gilt für Mobile UND Desktop gleichermassen.
   Etwas grösser als zuvor, damit er als eigenständiger kurzer Absatz wahrgenommen wird --
   bewusst aber deutlich kleiner als die Formular-Überschrift (.contact-form-panel__title),
   damit er nicht wie eine zusätzliche Zwischenüberschrift wirkt. Mehr Abstand nach unten, damit
   vor dem Formular/den Kontaktbereichen spürbar Luft entsteht (Mobile und Desktop). */
.contact-lead {
  max-width: 36rem;
  margin-bottom: clamp(2.75rem, 6.5vw, 3.75rem);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* 2. LAYOUT: FORMULAR + WHATSAPP + KONTAKTDATEN ---------------------------
   Der Quelltext steht bereits in der gewünschten Mobile-Reihenfolge (1. Formular,
   2. WhatsApp, 3. Kontaktdaten) – auf Handy/Tablet (<900px) reicht darum ein
   einfacher, gestapelter Flex-Block in Quelltextreihenfolge (.contact-side ist dabei
   unsichtbar, ein ganz normaler Block). Ab 900px übernimmt ein zweispaltiges CSS-Grid
   mit genau EINER Zeile (links: .contact-side mit WhatsApp + Kontaktdaten gestapelt,
   rechts: Formular) und stellt die bewährte Zweispalten-Ansicht wieder her, ohne den
   Quelltext erneut umstellen zu müssen.
   Bewusst nur eine Zeile: ein Grid über zwei Zeilen, bei dem eine Spalte (das Formular)
   über beide Zeilen spannt, führt in Chromium/Firefox zu einer CSS-Grid-Eigenheit, bei
   der die kurze erste Zeile unnötig in die Höhe gezogen wird (der Platzbedarf der
   spannenden Formular-Spalte wird auf beide Zeilen verteilt, auch wenn die erste Zeile
   dafür gar keinen Platz braucht) – das erzeugte sichtbar zu viel Leerraum zwischen den
   Kontaktdaten und der WhatsApp-Box. Mit .contact-side als eigenem Grid-Element in nur
   einer Zeile tritt dieser Effekt nicht mehr auf. */
.contact__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 900px) {
  .contact__grid {
    display: grid;
    /* Spaltenverhältnis bewusst weniger extrem als zuvor (vorher 5fr/6fr, wirkte zusammen mit
       der unauffälligen linken Spalte "zusammengedrückt" neben dem optisch schweren Formular).
       7fr für das Formular lässt es weiterhin klar als Hauptbereich erkennbar bleiben, ohne die
       linke Spalte zu stark zu verschmälern; der grössere Zwischenraum sorgt zusätzlich für
       spürbar mehr Ruhe zwischen den beiden Spalten. */
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.25rem, 4vw, 3.25rem);
    align-items: start;
  }
  /* grid-row explizit auf beiden Elementen setzen (nicht nur grid-column): da das Formular
     im Quelltext vor .contact-side steht und bereits Spalte 2 zugewiesen bekommt, würde die
     automatische Grid-Platzierung .contact-side sonst erst ab der zweiten Zeile suchen
     (der Platzierungs-Cursor rückt nie rückwärts) und es fälschlich darunter statt daneben
     platzieren. */
  .contact-side        { grid-column: 1; grid-row: 1; }
  .contact-form-panel  { grid-column: 2; grid-row: 1; }
}

/* .contact-side: auf Mobile weiterhin ein reiner Layout-Wrapper ohne eigenes Erscheinungsbild
   (WhatsApp-Box und Kontaktdaten stehen dort einfach als zwei normale Blöcke untereinander,
   Abstand über die margin-bottom der WhatsApp-Box, siehe unten). Ab 900px bekommt der Wrapper
   zusätzlich eine ruhige, helle Kartenfläche (siehe Media Query weiter unten): WhatsApp-Box und
   Kontaktdaten wirken dadurch wie EIN zusammengehöriger Block neben dem Formular, statt wie
   zwei lose nebeneinanderstehende Elemente -- ohne dabei selbst wieder in mehrere kleine
   Einzelkästchen aufzubrechen. Das Formular bleibt durch seine Grösse und die kräftigere
   Farbfläche weiterhin klar der optische Hauptbereich. */
.whatsapp-box { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 900px) {
  .contact-side {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: clamp(1.75rem, 3vw, 2.25rem);
    border-radius: var(--radius-l);
    background-color: #FFFFFF !important;
    border: 1px solid rgba(33, 43, 91, .1);
    color-scheme: light only;
  }
  /* Abstand zwischen WhatsApp-Box und Kontaktdaten kommt hier über das gap der Karte --
     die separate margin-bottom (für Mobile gedacht) würde den Abstand sonst verdoppeln. */
  .contact-side .whatsapp-box { margin-bottom: 0; }
}

.contact-direct__title { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.contact-direct__text { margin-top: 1rem; max-width: 32rem; }

/* Kein margin-top mehr: .contact-direct enthält jetzt nur noch diese Liste (kein Titel/Text
   mehr davor, siehe kontakt.html), daher würde ein oberer Aussenabstand hier nur unnötigen
   Leerraum oberhalb der Kontaktdaten erzeugen. */
.contact-list { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-list__item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-list__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(66, 165, 245, .12);
  color-scheme: light only;
}
.contact-list__body { display: flex; flex-direction: column; }
.contact-list__label { font-size: .8125rem; font-weight: 700; color: var(--ink-soft); }
.contact-list__value {
  margin-top: .15rem;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}
a.contact-list__value:hover { text-decoration: underline; text-decoration-color: var(--blue-light); text-decoration-thickness: 2px; text-underline-offset: .25em; }

/* Kein separater "Jetzt anrufen"-Button mehr (entfernt, um konkurrierende Buttons neben
   WhatsApp zu vermeiden): die Telefonnummer in der Kontaktliste oben ist bereits als
   tel:-Link klickbar, siehe .contact-list__value. */

/* WhatsApp: eigene, zurückhaltende Zusatzbox nur auf der Kontaktseite (kein schwebender Button,
   kein Einsatz auf anderen Seiten). Bewusst kompakt gehalten (kurzer Titel, ein Satz Text,
   kleiner Button in derselben Zeile ab Tablet-Breite) statt einer grossen Fläche. Dezente,
   helle Grün-Tönung passend zu WhatsApp, aber ruhig genug, um sich in die bestehende
   Formsprache (hellblaue/dunkelblaue Flächen) einzufügen. Gleiche Dark-Mode-Absicherung wie
   die übrigen Flächen dieser Seite (feste Farben + !important + color-scheme:light only),
   damit Samsung-Internet & Co. nichts einfärben. */
.whatsapp-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: .85rem 1.1rem;
  border-radius: var(--radius-m);
  background-color: #F2FBF5 !important;
  background-image: linear-gradient(155deg, rgba(37, 211, 102, .12), rgba(37, 211, 102, .03));
  border: 1px solid rgba(37, 211, 102, .28);
  color-scheme: light only;
}
.whatsapp-box__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(37, 211, 102, .16) !important;
  color-scheme: light only;
}
.whatsapp-box__icon svg { width: 18px; height: 18px; }
.whatsapp-box__body { min-width: 0; flex: 1 1 14rem; }
.whatsapp-box__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--blue-dark) !important; }
/* Etwas grösser als zuvor (.875rem) -- auch auf grossen Desktop-Monitoren und auf dem Handy
   gut lesbar, ohne die Box wieder deutlich zu vergrössern. */
.whatsapp-box__text { margin-top: .25rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-soft) !important; }

.btn--whatsapp {
  flex: none;
  margin-top: .75rem;
  display: inline-flex;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .55rem 1.1rem;
  font-size: .875rem;
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}
.btn--whatsapp:hover { background: #1DA851 !important; border-color: #1DA851 !important; }
.btn--whatsapp svg { flex: none; }
@media (max-width: 479px) {
  .whatsapp-box { flex-direction: column; align-items: flex-start; }
  /* Fix: ".whatsapp-box__body { flex: 1 1 14rem }" setzt im Row-Layout (Desktop/Tablet) eine
     14rem-BREITE als Flex-Basis -- sobald .whatsapp-box hier aber auf flex-direction:column
     wechselt, wird dieselbe 14rem stattdessen zur HÖHEN-Basis auf der (jetzt vertikalen)
     Hauptachse und zwingt die Box auf mind. 14rem Höhe, unabhängig vom tatsächlichen Inhalt --
     das war die Ursache des grossen Leerraums unter dem Button auf dem Handy. Basis hier
     wieder auf den Inhalt zurücksetzen. */
  .whatsapp-box__body { flex: 1 1 auto; }
  .btn--whatsapp { align-self: stretch; margin-left: 0; }
}


/* 3. KONTAKTFORMULAR ------------------------------------------------------
   Grosszügige, hellblau getönte Fläche statt eines technischen Standardformulars:
   grosse Felder, klare Beschriftungen, keine unnötigen Rahmen oder Tabellenoptik. */
.contact-form-panel {
  padding: clamp(1.75rem, 4.5vw, 2.75rem);
  border-radius: var(--radius-l);
  /* Solide Fallback-Farbe hinter dem Verlauf: siehe Hinweis zu Dark-Mode-Absicherung
     in css/style.css (.section--tint). */
  background-color: #EFF3FD !important;
  background-image: linear-gradient(155deg, rgba(66, 165, 245, .12), rgba(233, 30, 99, .02) 60%, rgba(66, 165, 245, .045));
  border: 1px solid rgba(66, 165, 245, .18);
  color-scheme: light only;
}
.contact-form-panel__title { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.contact-form-panel__text { margin-top: .75rem; max-width: 30rem; }

.contact-form { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }

.field-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-size: .9375rem; font-weight: 700; color: var(--blue-dark); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(33, 43, 91, .18);
  border-radius: var(--radius-s);
  background: var(--white);
  background-color: #ffffff !important;
  color: var(--ink) !important;
  color-scheme: light only;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(66, 165, 245, .25);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23212B5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }

/* Autofill (z.B. Browser-Passwortspeicher/Adressvorschläge): Browser setzen bei ausgefüllten
   Feldern sonst eine eigene, teils dunkle Hintergrundfarbe, die color-scheme:light only nicht
   zuverlässig überschreibt. Erzwingt weiterhin weissen Hintergrund + dunkelblaue Schrift. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  border-color: rgba(33, 43, 91, .18);
  caret-color: var(--ink);
}
.field input:autofill {
  -webkit-text-fill-color: var(--ink);
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: .5rem;
  min-height: 3.75rem;
  padding-inline: 2.5rem;
}
@media (max-width: 479px) {
  .contact-form__submit { align-self: stretch; }
}

.contact-form__success[hidden] { display: none; }
.contact-form__success {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-m);
  background: var(--white);
  background-color: #ffffff !important;
  color-scheme: light only;
  border: 1px solid rgba(66, 165, 245, .3);
}
.contact-form__success svg { flex: none; margin-top: .1rem; }
.contact-form__success p { font-weight: 700; color: var(--blue-dark); }

/* Fehlermeldung: gleiche Bauweise wie die Erfolgsmeldung, nur mit Pink-Rahmen/-Text statt
   Hellblau/Dunkelblau, damit sofort klar ist, dass etwas nicht geklappt hat – aber ohne die
   ruhige, professionelle Formsprache der Seite zu verlassen. */
.contact-form__error[hidden] { display: none; }
.contact-form__error {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-m);
  background: var(--white);
  background-color: #ffffff !important;
  color-scheme: light only;
  border: 1px solid rgba(233, 30, 99, .35);
}
.contact-form__error svg { flex: none; margin-top: .1rem; }
.contact-form__error p { font-weight: 700; color: var(--pink); }

/* Nach dem erfolgreichen Absenden: Formular ausblenden, nur Bestätigung zeigen */
.contact-form.is-sent { display: none; }

/* Honeypot-Feld für Spam-Schutz (send.php): für Menschen unsichtbar und nicht per Tab
   erreichbar, aber weiterhin im Formularfluss vorhanden, damit Bots es ausfüllen. Bewusst per
   Position statt display:none versteckt, da manche Bots leere/versteckte Felder gezielt
   überspringen. */
.field--hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}