/* kontakt.css — Panzer IT: Kontaktformular, Kontaktdaten-Karte, Kartenmodul
   Nur für die Kontakt-Seite. Baut auf base.css/components.css/inner.css auf
   (keine Neudefinition von Tokens, keine Duplikate bestehender Klassen). */

/* ==========================================================================
   Zweispaltiges Layout — Formular links, Kontaktdaten rechts
   ========================================================================== */
.contact-grid{
  display:grid; grid-template-columns:1.35fr .9fr; gap:var(--sp-6);
  align-items:start; margin-top:var(--sp-5);
}

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
}

/* ==========================================================================
   Formular
   ========================================================================== */
.contact-form{ margin-top:var(--sp-4); max-width:100%; }
.form-row{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
  margin-top:var(--sp-3);
}
.form-row:first-child{ margin-top:0; }
.form-field{
  display:flex; flex-direction:column; gap:.45em; margin-top:var(--sp-3);
  min-width:0; width:100%;
}
.form-row .form-field{ margin-top:0; }
.contact-form > .form-field:first-child{ margin-top:0; }

.form-field label{
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
  color:var(--c-text);
}
.form-optional{
  font-family:var(--font-body); font-weight:400; color:var(--c-muted); font-size:.85em;
}

.form-field input,
.form-field textarea{
  width:100%; box-sizing:border-box;
  padding:.85em 1em; border-radius:10px;
  border:1px solid var(--c-line); background:var(--c-base);
  color:var(--c-text); font-family:var(--font-body); font-size:1rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--c-muted); }
.form-field input:focus-visible,
.form-field textarea:focus-visible{
  outline:none; border-color:var(--c-copper);
  box-shadow:0 0 0 3px rgba(184,115,51,.22);
}
.form-field textarea{ min-height:150px; resize:vertical; }

.form-consent{
  display:flex; align-items:flex-start; gap:.7em;
  margin-top:var(--sp-4); max-width:60ch;
}
.form-consent input[type="checkbox"]{
  flex:none; width:1.15em; height:1.15em; margin-top:.2em;
  accent-color:var(--c-copper); cursor:pointer;
}
.form-consent label{
  color:var(--c-muted); font-size:.9rem; line-height:1.5; cursor:pointer;
}
.form-consent a{ color:var(--c-copper); }
.form-consent a:hover, .form-consent a:focus-visible{ color:var(--c-brass); }

.contact-form__submit{ margin-top:var(--sp-4); }

@media (max-width:640px){
  .form-row{ grid-template-columns:1fr; gap:var(--sp-3); }
  .contact-form__submit{ width:100%; justify-content:center; }
}

/* ==========================================================================
   Kontaktdaten-Karte
   ========================================================================== */
.contact-info{ display:flex; flex-direction:column; gap:var(--sp-3); }
.contact-info__h{ margin-top:.15em; }
.contact-info__address{
  font-style:normal; color:var(--c-text); line-height:1.6;
  padding-top:var(--sp-2); border-top:1px solid var(--c-line);
}
.contact-info__list{
  list-style:none; display:flex; flex-direction:column; gap:.5em;
}
.contact-info__list a{
  font-family:var(--font-display); font-weight:600; color:var(--c-text);
  transition:color .25s var(--ease);
}
.contact-info__list a:hover, .contact-info__list a:focus-visible{ color:var(--c-copper); }
.contact-info__note{
  color:var(--c-muted); font-size:.92rem; line-height:1.55;
  padding-top:var(--sp-2); border-top:1px solid var(--c-line);
}
.contact-info__note:last-child{ padding-top:0; border-top:none; margin-top:-.4em; }
.contact-info__note strong{ color:var(--c-text); }

/* ==========================================================================
   Kartenmodul (OpenStreetMap, kein Tracking)
   ========================================================================== */
.contact-map{
  margin-top:var(--sp-6); max-width:100%;
}
.contact-map__frame{
  position:relative; width:100%; max-width:100%;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--c-line);
}
.contact-map__frame iframe{
  display:block; width:100%; max-width:100%; height:380px; border:0;
}
.contact-map__link{
  margin-top:var(--sp-2); font-size:.88rem; color:var(--c-muted);
}
.contact-map__link a{ color:var(--c-copper); }
.contact-map__link a:hover, .contact-map__link a:focus-visible{ color:var(--c-brass); }

@media (max-width:640px){
  .contact-map__frame iframe{ height:280px; }
}