/* ============================================================
   KONTAKTSEITE – seitenspezifische Ergänzungen zu styles.css

   Bewusst getrennt: styles.css wird von index.html und
   preisrechner.html genutzt; jede Änderung dort wäre ein
   Regressionsrisiko für zwei fertige Seiten.

   Wiederverwendet aus styles.css: .wrap .section .section--flaeche
   .section--sand .section__kopf .einstieg .einstieg__trust .karte
   .hinweis .btn .btn--primary .btn-gruppe .raster .sr-only

   Die Feld- und Auswahloptik entspricht bewusst dem Preisrechner
   (.mn-calc__feld / .mn-calc__option). Sie wird hier neu notiert und
   nicht importiert, weil preisrechner.css als geschlossener, 1:1
   übertragbarer Block gepflegt wird. Alle Werte kommen aus den
   CI-Variablen in styles.css.
   ============================================================ */

/* ---------- 1 Einstieg ---------- */
.kontakt__intro{padding-bottom:32px}
/* „Nebenkostenabrechnung“ ist bei 40px breiter als ein 393px-Display.
   Ohne Trennung entsteht dort horizontales Scrollen.
   hyphens trennt sauber (html lang="de"), overflow-wrap greift als
   Rückfall, falls dem Browser die Trennmuster fehlen. */
.kontakt__intro h1{
  -webkit-hyphens:auto;hyphens:auto;
  overflow-wrap:break-word;
}

/* ---------- 2 Kontaktbereich: Layout ---------- */
.kontakt__layout{display:grid;gap:32px}

/* Formularspalte (.karte liefert Weiß, Linie, Radius – kein Schatten) */
.kontakt__formular{padding:20px}
.kontakt__einleitung{color:var(--mn-text-sek-dark);margin:0 0 24px}

/* ---------- Formularfelder ---------- */
.kontakt__feld{margin-bottom:20px}
.kontakt__label{
  display:block;font-weight:700;color:var(--mn-petrol);
  font-size:17px;line-height:1.35;margin:0 0 6px;padding:0;
}
.kontakt__pflichtstern{color:var(--mn-petrol)}
.kontakt__pflichtlegende{font-size:15px;color:var(--mn-text-sek-dark);margin:0 0 20px}
.kontakt__hilfe{display:block;font-size:15px;color:var(--mn-text-sek-dark);margin-top:6px}
.kontakt__eingabe{
  width:100%;min-height:52px;padding:12px 14px;
  font-family:inherit;font-size:17px;color:var(--mn-text);background:#fff;
  border:1px solid var(--mn-linie);border-radius:var(--mn-radius);
}
.kontakt__eingabe::placeholder{color:var(--mn-text-sek)}
.kontakt__eingabe--textarea{min-height:150px;resize:vertical;line-height:1.5}

/* Pflichtfeld-Hervorhebung für die Telefonnummer.
   Bewusst Petrol und NICHT --mn-fehler: das ist ein Hinweis, kein Fehler. */
.kontakt__eingabe.is-pflicht{border-color:var(--mn-petrol);border-width:2px;padding:11px 13px}

/* Fehlerzustand einzelner Felder */
.kontakt__eingabe.is-fehlerhaft{border-color:var(--mn-fehler);border-width:2px;padding:11px 13px}
.kontakt__feldfehler{
  display:block;margin:6px 0 0;font-size:15px;
  color:var(--mn-fehler);font-weight:600;
}

/* ---------- Honeypot ----------
   Kein display:none – manche Bots erkennen das und lassen das Feld aus.
   Stattdessen aus dem Sichtfeld geschoben, dazu tabindex="-1" und
   aria-hidden="true" im Markup. */
.kontakt__honeypot{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* ---------- Kontaktwunsch ---------- */
.kontakt__wahl{border:0;padding:0;margin:0 0 20px;min-width:0}
.kontakt__wahl-optionen{display:flex;flex-wrap:wrap;gap:10px}
.kontakt__wahl-option{
  touch-action:manipulation; /* kein Doppeltipp-Zoom beim Wechseln zwischen den Kontaktwegen */
  display:flex;align-items:center;gap:10px;
  flex:1 1 100%;min-height:52px;padding:14px 16px;cursor:pointer;
  border:1px solid var(--mn-linie);border-radius:var(--mn-radius);background:#fff;
}
.kontakt__wahl-option:hover{background:var(--mn-flaeche)}
.kontakt__wahl-option input{
  width:20px;height:20px;margin:0;flex:0 0 auto;accent-color:var(--mn-petrol);
}
.kontakt__wahl-option.is-gewaehlt{
  border-color:var(--mn-petrol);border-width:2px;padding:13px 15px;
  background:var(--mn-petrol-100);
}
.kontakt__wahl-option span{line-height:1.4}
/* nutzt .hinweis aus styles.css, hier nur der Abstand im Formularfluss */
.kontakt__wahl-hinweis{margin-top:14px}

/* ---------- Absenden ---------- */
.kontakt__aktionen{margin-top:24px}
.kontakt__senden{width:100%}
.kontakt__senden[disabled]{background:var(--mn-petrol-500);cursor:progress}
.kontakt__datenschutz{
  margin:12px 0 0;font-size:14px;color:var(--mn-text-sek-dark);
}

/* ---------- Erfolg / Fehler ---------- */
.kontakt__erfolg{border-left:3px solid var(--mn-gruen);padding-left:16px}
.kontakt__erfolg-titel{margin-bottom:12px}
.kontakt__erfolg-zurueck{margin:0}
.kontakt__fehler{
  margin:0 0 20px;padding:14px 16px;background:#fff;
  border:1px solid var(--mn-fehler);border-left:3px solid var(--mn-fehler);
  border-radius:0 var(--mn-radius) var(--mn-radius) 0;
  color:var(--mn-fehler);font-size:15px;
}
.kontakt__fehler p{margin:0}
.kontakt__fehler p + p{margin-top:4px;font-weight:400}
.kontakt__fehler strong{color:var(--mn-fehler)}

/* ---------- Direkte Kontaktspalte ---------- */
.kontakt__direkt-titel{font-size:20px}
.kontakt__direkt > p{color:var(--mn-text-sek-dark)}
.kontakt__direkt-zeile{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 0;border-top:1px solid var(--mn-linie);
}
.kontakt__direkt-zeile:last-child{border-bottom:1px solid var(--mn-linie)}
.kontakt__direkt-label{
  font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mn-text-sek-dark);
}
.kontakt__direkt-wert{color:var(--mn-text)}

/* ---------- 3 Hilfethemen ---------- */
.kontakt__thema h3{font-size:18px;margin-bottom:6px}
.kontakt__thema p{margin:0;color:var(--mn-text-sek-dark)}
.kontakt__rechtshinweis{margin-top:32px}

/* ---------- 4 Preisrechner-Teaser ---------- */
.kontakt__teaser{max-width:36em}
.kontakt__teaser p{color:var(--mn-text-sek-dark)}
.kontakt__teaser-zusatz{font-size:15px;margin:16px 0 0}

/* ---------- Breakpoints ---------- */
@media (min-width:600px){
  .kontakt__formular{padding:28px}
  /* drei Kontaktwege nebeneinander, sobald der Platz reicht */
  .kontakt__wahl-option{flex:1 1 0;min-width:0}
}
@media (min-width:768px){
  .kontakt__intro{padding-bottom:48px}
  .kontakt__themen{grid-template-columns:repeat(3,1fr);gap:32px}
  .kontakt__senden{width:auto;min-width:280px}
}
@media (min-width:1024px){
  /* Formular ca. 2/3, direkte Kontaktspalte ca. 1/3 */
  .kontakt__layout{grid-template-columns:2fr 1fr;gap:48px;align-items:start}
}