/* rmd-kadence-child/assets/css/kontakt.css
   Kontaktseite (page-kontakt.php). Helle 2-Spalten-Karte: links Kontaktdaten/Social/Support-Weg,
   rechts Formular mit Anliegen-Auswahl. Die 6 Support-Kacheln darunter kommen aus support.css
   (.rmd-support-ov*). Design ueber Theme-Tokens. */

/* Kein grosses Top-Padding: der Breadcrumb sitzt (ueber sein Standard-Padding aus blocks.css)
   nah am Header wie auf allen anderen Seiten; nur unten der Sektionsabstand. */
.rmd-kontakt{padding:0 0 var(--space-section)}
.rmd-kontakt .rmd-breadcrumb{margin-bottom:var(--space-2)}
/* Support-Kachel-Sektion sitzt direkt ueber der globalen Kontakt-Sektion (Footer "Sprechen Sie uns
   an") - Abstand nach unten verkleinern, sonst wirkt es doppelt luftig. */
.rmd-kontakt .rmd-support-ov{padding-top:var(--space-12);padding-bottom:var(--space-6)}

.rmd-kontakt__card{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-10);
  background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-10)}

/* ---------- Links: Kontaktdaten ---------- */
.rmd-kontakt__info{display:flex;flex-direction:column}
.rmd-kontakt__h{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:-.02em;color:var(--color-headline);margin:var(--space-2) 0 0}
.rmd-kontakt__lead{font-family:var(--font-body);font-size:var(--fs-md);line-height:1.6;color:var(--color-text-muted);margin:var(--space-4) 0 0;max-width:46ch}

.rmd-kontakt__rows{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-8)}
.rmd-kontakt__row{display:flex;gap:var(--space-4);align-items:flex-start}
.rmd-kontakt__ic{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-signal);color:var(--color-on-signal)}
.rmd-kontakt__ic .rmd-icon,.rmd-kontakt__ic svg{width:20px;height:20px;stroke:currentColor;fill:none}
.rmd-kontakt__rowbody{display:flex;flex-direction:column;gap:2px;padding-top:2px}
.rmd-kontakt__rowlabel{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--color-headline)}
.rmd-kontakt__rowval{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-text);text-decoration:none;line-height:1.4}
a.rmd-kontakt__rowval:hover{color:var(--color-headline);text-decoration:underline}

.rmd-kontakt__socials{display:flex;gap:var(--space-3);margin-top:var(--space-8)}
.rmd-kontakt__soc{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-headline);color:#fff;transition:background .15s ease}
.rmd-kontakt__soc:hover{background:#000;color:#fff}
/* Icon-Fuellung fest auf Weiss - NICHT currentColor: ein globaler a:hover faerbt sonst die Linkfarbe
   dunkel -> Icon wuerde auf dem dunklen Kreis unsichtbar. */
.rmd-kontakt__soc .rmd-ic,.rmd-kontakt__soc:hover .rmd-ic{width:18px;height:18px;fill:#fff;color:#fff}

.rmd-kontakt__support{display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;margin-top:var(--space-8);
  padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);
  background:var(--btn-dark-bg);color:var(--btn-dark-text);font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-sm);text-decoration:none;transition:background .15s ease}
.rmd-kontakt__support:hover,.rmd-kontakt__support:focus{background:var(--btn-dark-bg-hover);color:var(--btn-dark-text)}
.rmd-kontakt__support .rmd-icon,.rmd-kontakt__support svg{width:17px;height:17px;stroke:currentColor;fill:none}

/* ---------- Rechts: Formular (weisse Karte) ---------- */
.rmd-kontakt__formwrap{background:var(--color-bg);border-radius:var(--radius-card);padding:var(--space-8);box-shadow:var(--shadow-sm)}
.rmd-kontakt__form{display:flex;flex-direction:column;gap:var(--space-4)}
.rmd-kontakt__hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
.rmd-kontakt__row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.rmd-kontakt__field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.rmd-kontakt__label{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-xs);color:var(--color-headline)}
.rmd-kontakt__field input,.rmd-kontakt__field select,.rmd-kontakt__field textarea{
  width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-text);
  background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-4);transition:border-color .15s ease,box-shadow .15s ease}
.rmd-kontakt__field input::placeholder,.rmd-kontakt__field textarea::placeholder{color:var(--color-text-muted)}
.rmd-kontakt__field textarea{border-radius:var(--radius);resize:vertical;min-height:130px}
.rmd-kontakt__field input:hover,.rmd-kontakt__field select:hover,.rmd-kontakt__field textarea:hover{border-color:var(--color-border-strong)}
/* Fokus dezent-neutral (KEIN gelber Rand/Glow) - einheitlich mit den uebrigen Formularen. */
.rmd-kontakt__field input:focus,.rmd-kontakt__field select:focus,.rmd-kontakt__field textarea:focus{
  outline:none;border-color:var(--color-headline);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.rmd-kontakt__select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:var(--space-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B9BDC1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-4) center}

.rmd-kontakt__hint{font-family:var(--font-body);font-size:var(--fs-xs);line-height:1.55;color:var(--color-text-muted);margin:0}
.rmd-kontakt__hint a{color:var(--color-headline);text-decoration:underline;text-underline-offset:2px}

.rmd-kontakt__check{display:flex;gap:var(--space-3);align-items:flex-start;font-family:var(--font-body);font-size:var(--fs-xs);line-height:1.5;color:var(--color-text-muted)}
.rmd-kontakt__check input{margin-top:2px;flex:0 0 auto}
.rmd-kontakt__check a{color:var(--color-headline);text-decoration:underline;text-underline-offset:2px}

.rmd-kontakt__send{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);align-self:flex-start;
  min-height:var(--btn-height);padding:0 var(--space-8);border:none;cursor:pointer;border-radius:var(--radius-pill);
  background:var(--color-signal);color:var(--color-on-signal);box-shadow:var(--shadow-cta);
  font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-base);transition:background .15s ease}
.rmd-kontakt__send:hover{background:var(--color-signal-hover)}
.rmd-kontakt__send.is-loading{opacity:.6;pointer-events:none}
.rmd-kontakt__send .rmd-icon,.rmd-kontakt__send svg{width:16px;height:16px;stroke:currentColor;fill:none;transition:transform .18s ease}
.rmd-kontakt__send:hover .rmd-icon,.rmd-kontakt__send:hover svg{transform:translateX(3px)}

.rmd-kontakt__msg{font-family:var(--font-body);font-size:var(--fs-sm);margin:0;color:var(--color-text)}
.rmd-kontakt__msg.is-ok{color:#1a7f4b}
.rmd-kontakt__msg.is-err{color:var(--color-error)}
/* Erfolgspanel (Haken + Text) wie beim Popup, wird nach dem Absenden statt der Felder gezeigt. */
.rmd-kontakt__success{text-align:center;padding:var(--space-6) var(--space-2)}
.rmd-kontakt__successicon{display:inline-flex;align-items:center;justify-content:center;width:var(--space-14);height:var(--space-14);margin:0 auto var(--space-4);border-radius:var(--radius-pill);background:var(--color-success-bg);color:var(--color-success-ink)}
.rmd-kontakt__successicon .rmd-icon,.rmd-kontakt__successicon svg{width:var(--space-6);height:var(--space-6);stroke:currentColor;fill:none}
.rmd-kontakt__successhead{font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:var(--fw-head);line-height:var(--lh-tight);letter-spacing:-.02em;color:var(--color-headline);margin:0 0 var(--space-2)}
.rmd-kontakt__successtext{font-size:var(--fs-base);color:var(--color-text-muted);line-height:var(--lh-normal);max-width:44ch;margin:0 auto}

@media(max-width:860px){
  .rmd-kontakt__card{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-6)}
  .rmd-kontakt__support{align-self:stretch;justify-content:center}
}
@media(max-width:480px){
  .rmd-kontakt__row2{grid-template-columns:1fr}
  .rmd-kontakt .rmd-container{padding-left:var(--space-4);padding-right:var(--space-4)}
  /* Zweigeteilte Karte: obere Haelfte grau (Kontaktdaten), untere Haelfte weiss (Formular).
     Die Karte klippt ihre Kinder auf die runde Form - so bekommt das ausgebrochene Formular
     unten die Kartenrundung, waehrend es oben eckig bleibt. */
  .rmd-kontakt__card{padding:var(--space-4);overflow:hidden}
  /* Das Formular fuellt die untere Haelfte flaechenbuendig: es bricht aus dem Karten-Padding aus
     (links/rechts/unten = KEIN Abstand zur grauen Flaeche), oben gerade/eckige Kante, unten rund
     wie die Karte. Kein Schatten (ist jetzt buendig, keine schwebende Karte mehr). */
  .rmd-kontakt__formwrap{
    margin:0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    border-radius:0 0 var(--radius-card) var(--radius-card);
    box-shadow:none;
    padding:var(--space-4)}
  /* Absende-Button volle Breite UND einzeilig: "Nachricht senden" darf nicht umbrechen. */
  .rmd-kontakt__send{align-self:stretch;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .rmd-kontakt__send .rmd-icon,.rmd-kontakt__send svg{transition:none}
  .rmd-kontakt__send:hover .rmd-icon,.rmd-kontakt__send:hover svg{transform:none}
}