/* ==========================================================================
   DDL Kontaktformular & Karten-Einbindung – Styles
   Nutzt dieselben CSS-Variablen wie der Rest der Seite.
   ========================================================================== */

/* z-index:10 + position:relative + eigene Hintergrundfarbe: dasselbe Muster
   wie .section-kontakt/.section-home-about, notwendig damit die Section über
   dem fixierten Hero-Hintergrundbild liegt statt dahinter zu verschwinden.
   Diese Klasse liegt auf zwei getrennten <section>-Elementen (Karte, dann
   Formular), zwischen denen .section-kontakt-bottom eingeschoben ist. */
.ddl-section-form-map {
  font-family: var(--font-family--manrope, Manrope, sans-serif);
  overflow-x: hidden;
  position: relative;
  z-index: 10;
  background-color: var(--_color---copy-bright, #fcf7f1);
}

/* Formular-Section: gleiche Hintergrundfarbe wie .section-kontakt-bottom,
   direkt darüber. */
.ddl-section-form-map.is-form {
  background-color: var(--_color---background-light-2, #cccbca);
}

/* ---- Karte: volle Bildschirmbreite ----
   Bricht aus dem .container-medium/.page-padding heraus, unabhängig
   davon wie breit der Viewport ist. Steht als erstes Element der Section,
   das Formular folgt darunter. */

.ddl-map-full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---- Kontaktformular ---- */

.ddl-form-card {
  background: var(--_color---background-light-1, #f0eeeb);
  border-radius: .5em;
  padding: 2.2rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .ddl-form-card {
    max-width: none;
  }
}

.ddl-form-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--_color---accent-color-3, #012946);
  margin: 0 0 .4rem;
}

.ddl-form-subtitle {
  font-size: .95rem;
  color: var(--_color---copy-dark, #444549);
  margin: 0 0 1.5rem;
}

.ddl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 479px) {
  .ddl-form-row {
    grid-template-columns: 1fr;
  }
}

.ddl-form-field {
  margin-bottom: 1.1rem;
}

.ddl-form-field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--_color---accent-color-3, #012946);
  margin-bottom: .4rem;
}

.ddl-form-field .ddl-optional {
  font-weight: 400;
  color: var(--_color---divider-grey, #92979d);
}

.ddl-form-field input,
.ddl-form-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
  color: var(--_color---copy-dark, #444549);
  background: #fff;
  border: 1px solid var(--_color---background-light-2, #cccbca);
  border-radius: .6rem;
  padding: .75rem .9rem;
  transition: border-color .2s ease;
}

.ddl-form-field input:focus,
.ddl-form-field textarea:focus {
  outline: none;
  border-color: var(--_color---accent-color-1, #08f);
}

.ddl-form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.ddl-form-consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 1.3rem 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--_color---copy-dark, #444549);
}

.ddl-form-consent input {
  margin-top: .2rem;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--_color---accent-color-1, #08f);
}

.ddl-form-consent a {
  color: var(--_color---accent-color-1, #08f);
  text-decoration: underline;
}

/* Honeypot – für Menschen unsichtbar, Bots tappen hinein */
.ddl-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Absende-Button nutzt dasselbe .ddl-button-wrapper/.ddl-button Muster wie
   die Hero- und Footer-CTAs. Ein <button> braucht zusätzlich einen kleinen
   Reset, da .ddl-button sonst nur auf <a>-Elementen verwendet wird. */
button.ddl-button {
  appearance: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  width: auto;
}

button.ddl-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.ddl-form-error {
  color: #c0392b;
  font-size: .8rem;
  margin-top: .3rem;
  display: none;
}

.ddl-form-field.has-error input,
.ddl-form-field.has-error textarea {
  border-color: #c0392b;
}

.ddl-form-field.has-error .ddl-form-error {
  display: block;
}

.ddl-form-status {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: .6rem;
  font-size: .9rem;
  display: none;
}

.ddl-form-status.is-success {
  display: block;
  background: #e5f6ec;
  color: #1e7a44;
}

.ddl-form-status.is-error {
  display: block;
  background: #fbe7e4;
  color: #c0392b;
}

/* ---- Karte ---- */

.ddl-map-card {
  overflow: hidden;
  background: var(--_color---background-dark-1, #151515);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.ddl-map-full-bleed .ddl-map-card {
  min-height: 32rem;
}

@media (max-width: 767px) {
  .ddl-map-full-bleed .ddl-map-card {
    min-height: 22rem;
  }
}

.ddl-map-frame-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 420px;
}

.ddl-map-frame-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ddl-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--_color---copy-bright, #fcf7f1);
  background:
    linear-gradient(rgba(1, 41, 70, 0.75), rgba(1, 41, 70, 0.75)),
    repeating-linear-gradient(45deg, #223 0, #223 2px, #1a1a1a 2px, #1a1a1a 22px);
}

.ddl-map-placeholder p {
  font-size: .9rem;
  max-width: 34ch;
  margin: .6rem 0 1.2rem;
  color: var(--_color---copy-grey, #d2d5d9);
}

.ddl-map-placeholder-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.ddl-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

.ddl-map-btn {
  appearance: none;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .2s ease, color .2s ease;
}

.ddl-map-btn--primary {
  background: var(--_color---accent-color-1, #08f);
  border-color: var(--_color---accent-color-1, #08f);
}

.ddl-map-btn:hover {
  background: #fff;
  color: var(--_color---accent-color-3, #012946);
}

.ddl-map-links {
  padding: 1rem var(--page-padding--desktop, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: .85rem;
  background-color: var(--_color---background-dark-2, #444549);
}

@media (max-width: 991px) {
  .ddl-map-links {
    padding-left: var(--page-padding--tablet, 6vw);
    padding-right: var(--page-padding--tablet, 6vw);
  }
}

.ddl-map-links a {
  color: var(--_color---copy-bright, #fcf7f1);
  text-decoration: underline;
}