/* ============================================================
   KONTAKT PAGE — page-specific styles
   (flache Selektoren — Kompat-Baseline iOS 15, siehe design-system.css)
   ============================================================ */

:root {
  --color-page: var(--color-teal);
  --color-page-rgb: var(--color-teal-rgb);
}

/* ── HERO ────────────────────────────────────── */

#hero {
  position: relative;
  min-height: 100vh;     /* Fallback */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#hero h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
  }

[data-theme="light"] #hero {
    background: var(--color-bg);
  }

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 55% 65% at 85% 20%,
      rgba(var(--color-teal-rgb), 0.12) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 45% 55% at 10% 85%,
      rgba(var(--color-blue-rgb), 0.3) 0%,
      transparent 60%
    ),
    var(--color-bg-deep);
}

[data-theme="light"] .hero-bg {
    background:
      radial-gradient(
        ellipse 55% 65% at 85% 20%,
        rgba(var(--color-teal-rgb), 0.07) 0%,
        transparent 60%
      ),
      radial-gradient(
        ellipse 45% 55% at 10% 85%,
        rgba(var(--color-teal-rgb), 0.04) 0%,
        transparent 60%
      ),
      var(--color-bg);
  }

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;     /* Fallback */
  min-height: 100svh;
}

.hero-left {
  padding: 160px 80px 100px var(--page-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border-subtle);
  /* Untere Abschluss-Linie nur unter der linken Spalte (mobil ohnehin vorhanden). */
  border-bottom: 1px solid var(--border-subtle);

  /* Hintergrundbild: Firmengelaende mit Servicefahrzeugen (Contact_Hero), dunkler
     Verlauf-Overlay (links staerker, rechts etwas mehr Bild). Dark Mode: unveraendert. */
  background-image:
    linear-gradient(
      to right,
      rgba(var(--color-bg-deep-rgb), 0.91) 0%,
      rgba(var(--color-bg-deep-rgb), 0.8) 100%
    ),
    url("../../assets/media/compressed/images/Heroes/Contact_Hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Overlay bis unter den halbtransparenten border-right ziehen, sonst bleibt
     dort ein schmaler, nicht abgedunkelter Streifen des Bildes sichtbar. */
  background-origin: border-box;

  /* Light Mode wie die anderen Seiten: dunkler Scrim + heller Text, aber leichter
     als im Dark Mode, sodass mehr vom Bild sichtbar bleibt. Die Dark-Werte werden
     erzwungen, damit der Text auf dem dunklen Scrim hell und lesbar ist. */
}

[data-theme="light"] .hero-left {
    --color-bg-deep: #0d1624;
    --color-bg-deep-rgb: 13, 22, 36; /* Triplet zum erzwungenen Dark-Wert */
    --color-text: #f2f6f8;
    --color-text-rgb: 242, 246, 248;
    --color-text-secondary: #d4eef0c7;
    --color-white: #f2f6f8;
    --color-muted: #bcd0d8; /* Label-Texte (Telefon, E-Mail, Adresse ...) heller/lesbarer */
    --color-teal-lt: #49c5b6;
    --color-teal-lt-rgb: 73, 197, 182;
    --color-process-bg: #49c5b61a;
    --border-subtle: #ffffff0f;
    --color-black-12: #ffffff4d; /* Trennlinien zwischen den Kontakt-Feldern deutlich sichtbar */
    color: var(--color-text);
    border-right-color: var(--border-subtle);
    background-image:
      linear-gradient(
        to right,
        rgba(var(--color-bg-deep-rgb), 0.62) 0%,
        rgba(var(--color-bg-deep-rgb), 0.52) 100%
      ),
      url("../../assets/media/compressed/images/Heroes/Contact_Hero.jpg");
  }

.hero-tag {
  color: var(--color-teal-lt);
}

.hero-tag::before {
    background: var(--color-teal-lt);
  }

.hero-sub {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--color-card-text-dim);
  max-width: 380px;
  margin-top: 36px;
}

[data-theme="light"] .hero-sub {
    color: var(--color-text-secondary);
  }

/* ── CONTACT INFO STRIP ──────────────────────── */

.contact-strip {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-lg);
}

.cs-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  text-decoration: none; /* Link-Items (Telefon, E-Mail, Notdienst): keine Unterstreichung */
  /* Trennlinien zwischen den Kontakt-Feldern: in beiden Themes deutlich sichtbar. */
  border-top: 1px solid #ffffff4d;
}

.cs-item:last-child {
    border-bottom: 1px solid #ffffff4d;
  }

.cs-item:hover .cs-icon {
      background: var(--color-border-accent);
    }

.cs-item:hover .cs-value {
      color: var(--color-teal-lt);
    }

[data-theme="light"] .cs-item {
    border-color: var(--color-black-12);
  }

:is([data-theme="light"] .cs-item):hover .cs-value {
      color: var(--color-teal);
    }

.cs-icon {
  width: var(--size-icon);
  height: var(--size-icon);
  background: var(--color-process-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal-lt);
  flex-shrink: 0;
  transition: background var(--t-fast);
}

.cs-icon.cs-icon-urgent {
    background: var(--color-accent-tint);
    color: var(--color-accent);
  }

.cs-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 3px;
}

.cs-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--t-fast);
}

.cs-value.cs-value-small {
    font-size: 0.9rem;
    line-height: 1.5;
  }

[data-theme="light"] .cs-value {
    color: var(--color-text);
  }

.cs-urgent {
  color: var(--color-accent);
}

/* ── FORM PANEL ──────────────────────────────── */

.hero-right {
  /* Bottom-anchored: der Wizard ist ans untere Ende des 100svh-Panels gepinnt,
     die Weiter/Zurueck-Zeile steht ~20px ueber dem unteren Viewport-Rand. Die
     gestapelten Steps halten die Formhoehe konstant, der Button bewegt sich also
     beim Schrittwechsel nicht. Top-Padding haelt die fixe Nav frei, falls ein
     hoher Step nach oben reicht. */
  padding: 112px var(--page-padding) 20px 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ── WIZARD HEADER ───────────────────────────── */

.wizard-header {
  margin-bottom: 28px;
}

.wizard-header.hidden { display: none; }

.wizard-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-teal-lt);
  margin-bottom: 18px;
}

[data-theme="light"] .wizard-eyebrow { color: var(--color-teal); }

.wizard-intro {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--color-card-text-dim);
  max-width: 460px;
  margin: 0 0 28px;
}

.wizard-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.wizard-progress-track {
  position: relative;
  height: 1px;
  background: var(--color-form-border);
  overflow: hidden;
}

.wizard-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--color-teal-lt);
  transition: width 0.45s var(--ease-out);
}

[data-theme="light"] .wizard-progress-track { background: var(--color-black-12); }
[data-theme="light"] .wizard-progress-bar   { background: var(--color-teal); }

/* ── WIZARD FORM ─────────────────────────────── */

.wizard-form {
  /* Stacked grid: every step occupies the same cell, so the form is always as
     tall as the TALLEST step (step 1, with its five cards). The nav row sits
     directly below that fixed-height stack, so it holds one position no matter
     which step is active. Clicking Weiter therefore never makes the buttons
     jump. Keeping the nav in view is the panel's job: .hero-right is
     top-anchored (not centred) so this fixed nav stays above the fold. The
     alert row collapses to nothing when empty. */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "stack"
    "alert"
    "nav";
}

.wizard-form.hidden { display: none; }

.wizard-step {
  grid-area: stack;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  visibility: hidden;

  /* JS strips the `hidden` attribute on init so [hidden] can't pull the
     fieldset out of the grid (that would collapse the reserved height). The
     visibility toggle shows exactly one step without changing the layout. */
}

.wizard-step.is-active { visibility: visible; }

.wizard-form > .form-alert { grid-area: alert; }
.wizard-nav { grid-area: nav; }

.wizard-question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.8vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 8px;
  padding: 0;
}

.wizard-helper {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-card-text-dim);
  margin: 0 0 26px;
  max-width: 520px;
}

/* ── CHIP CARDS (steps 1–4) ──────────────────── */

.wizard-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.wizard-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  background: var(--color-form-bg);
  border: 1px solid var(--color-form-border);
  cursor: pointer;
  transition:
    border-color var(--t-fast),
    background var(--t-fast),
    transform var(--t-fast);
}

.wizard-card input {
    /* Visually hide the native input — we style the label as the chip. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

.wizard-card:hover {
    border-color: var(--color-chip-hover);
    background: var(--color-focus-bg);
  }

.wizard-card:has(input:focus-visible) {
    outline: 2px solid var(--color-teal-lt);
    outline-offset: 2px;
  }

.wizard-card:has(input:checked) {
    border-color: var(--color-teal-lt);
    background: var(--color-chip-selected-bg);
  }

[data-theme="light"] .wizard-card {
    background: var(--color-black-03);
    border-color: var(--color-black-10);
  }

:is([data-theme="light"] .wizard-card):hover { background: var(--color-black-06); }

.wizard-card-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  color: var(--color-muted);
  transition: color var(--t-fast);
  flex-shrink: 0;
}

.wizard-card-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.6;
  }

.wizard-card:hover .wizard-card-icon              { color: var(--color-teal-lt); }

.wizard-card:has(input:checked) .wizard-card-icon { color: var(--color-teal-lt); }

/* Getrennte Regeln statt Liste: ein :has()-Selektor in einer Liste würde auf
   Safari < 15.4 die GANZE Liste ungültig machen — der :hover-Teil bliebe tot. */
[data-theme="light"] .wizard-card:hover .wizard-card-icon {
    color: var(--color-teal);
  }
[data-theme="light"] .wizard-card:has(input:checked) .wizard-card-icon {
    color: var(--color-teal);
  }

.wizard-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

.wizard-card:has(input:checked) .wizard-card-title { color: var(--color-teal-lt); }

[data-theme="light"] .wizard-card:has(input:checked) .wizard-card-title { color: var(--color-teal); }

.wizard-card-desc {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-card-text-dim);
}

/* ── REVIEW (step 6) ─────────────────────────── */

.wizard-step-review .wizard-question { margin-bottom: 8px; }

.wizard-summary {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-top: 1px solid var(--color-form-border);
}

.wizard-summary dt,.wizard-summary dd { margin: 0; }

.wizard-summary-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-form-border);
}

.wizard-summary-row dt {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

.wizard-summary-row dd {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
  }

[data-theme="light"] .wizard-summary,
[data-theme="light"] .wizard-summary-row { border-color: var(--color-black-10); }

/* ── WIZARD NAVIGATION ───────────────────────── */

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--color-form-border);

  /* The .btn rules in design-system.css set `display: inline-flex`, which has
     higher specificity than the user-agent `[hidden] { display: none }` rule
     and cancels it. Re-assert hiding for nav buttons. */
}

.wizard-nav button[hidden] { display: none; }

[data-theme="light"] .wizard-nav { border-top-color: var(--color-black-10); }

/* ghost button that fades when disabled */

.wizard-back:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

.wizard-next {
  /* Hold the longest label width so the button doesn't jump when the label
     switches from "Weiter" to "Anfrage absenden" between steps. */
  min-width: 12em;
  justify-content: center;
}

.wizard-next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

/* ── FORM FIELDS (step 5) ────────────────────── */

.wizard-step .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  position: relative;
}

.field label {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 6px 0;
    transition: color var(--t-fast);
  }

.field input,.field textarea {
    background: var(--color-form-bg);
    border: 1px solid var(--color-form-border);
    border-radius: 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.98rem;
    padding: 8px 12px 16px;
    outline: none;
    appearance: none;
    transition:
      background var(--t-fast),
      border-color var(--t-fast);
  }

:is(.field input,.field textarea)::placeholder {
      color: var(--color-placeholder);
    }

:is(.field input,.field textarea):focus {
      background: var(--color-focus-bg);
      border-color: var(--color-focus-border);
    }

:is(.field input,.field textarea):focus ~ .field-line {
        transform: scaleX(1);
      }

[data-theme="light"] :is(.field input,.field textarea) {
      color: var(--color-text);
    }

.field textarea {
    resize: none;
    height: 130px;
  }

.field-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-teal-lt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}

.field-optional {
  opacity: 0.5;
}

/* Honeypot — visuell und für Screenreader versteckt, aber nicht display:none
   (Bots erkennen display:none manchmal und überspringen es) */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit-Button: Loading-State */
.contact-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 0;
  margin-top: 8px;
  gap: 24px;
}

.form-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-form-note);
  max-width: 260px;
}

/* Success state */
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 40px;
  gap: 24px;
}
.form-success.visible {
    display: flex;
  }
.form-success h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.02em;
  }
.form-success p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-card-text-dim);
    max-width: 320px;
  }
.form-success a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-teal-lt);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    margin-top: 8px;
    transition: gap var(--t-fast);
  }
:is(.form-success a):hover {
      gap: 14px;
    }

.success-icon {
  width: 72px;
  height: 72px;
  background: var(--color-phone-icon-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal-lt);
}

/* Inline phone link inside the success paragraph — keep it inline-text-styled
   instead of inheriting the surrounding CTA-anchor look. */
.form-success .success-phone {
  display: inline;
  color: var(--color-teal-lt);
  font-family: inherit;
  font-weight: 600;
  font-size: inherit;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0;
}
:is(.form-success .success-phone):hover { gap: 0; }
[data-theme="light"] :is(.form-success .success-phone) { color: var(--color-teal); }

/* ── OPENING HOURS ───────────────────────────── */

.hours-section {
  padding: 100px var(--page-padding);
  background: var(--color-bg-deep);
}

[data-theme="light"] .hours-section {
    background: var(--color-bg);
  }

.hours-label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-teal-lt);
  margin-bottom: var(--space-lg);
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.hour-card {
  background: var(--color-surface-card);
  border: 1px solid var(--border-subtle);
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-med);
}

.hour-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      var(--color-card-gradient) 0%,
      transparent 60%
    );
    opacity: 0;
    transition: opacity var(--t-med);
  }

.hour-card:hover {
    border-color: rgba(var(--color-teal-lt-rgb), 0.25);
  }

.hour-card:hover::before {
      opacity: 1;
    }

/* Notdienst variant */

.hour-card.hour-card-urgent {
    background: var(--color-accent-bg-subtle);
    border-color: var(--color-accent-border-subtle);
  }

.hour-card.hour-card-urgent .hour-day {
      color: var(--color-accent);
    }

.hour-card.hour-card-urgent .hour-time {
      color: var(--color-accent);
    }

.hour-card.hour-card-urgent .hour-note {
      color: var(--color-accent-muted);
    }

[data-theme="light"] .hour-card {
    border-color: var(--color-black-10);
    background: var(--color-white-60);
  }

.hour-card-urgent:is([data-theme="light"] .hour-card) {
      background: var(--color-accent-bg-subtle);
      border-color: var(--color-accent-border-subtle);
    }

.hour-day {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.hour-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hour-time-afternoon {
  margin-top: 8px;
}

.hour-note {
  font-size: 0.78rem;
  color: rgba(var(--color-teal-lt-rgb), 0.6);
  margin-top: 8px;
}

.hour-phone {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-accent);
  text-decoration: none;
}

/* ── MAP ─────────────────────────────────────── */

.map-section {
  position: relative;
  /* z-index: 0 erzeugt einen Stacking-Context → Leaflet setzt intern inline
     z-index bis 1000 auf Controls/Popups. Ohne eigenen Context würden die
     über die fixed Nav (z-index 100) steigen. Mit Context bleiben sie in der
     Sektion gefangen und die Nav liegt immer drüber. */
  z-index: 0;
  height: 420px;
  border-top: 1px solid var(--border-subtle);
}

[data-theme="light"] .map-section {
    border-top-color: var(--color-black-10);
  }

#map {
  width: 100%;
  height: 100%;
}
/* Google-Maps-iframe bei Consent — füllt den Container randlos */
#map > .map-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Neutraler Placeholder, solange noch keine Consent-Entscheidung vorliegt.
   Kein externer Request — nur ein dezent gestreiftes Muster, das die
   Section-Höhe stabil hält. Die Adress-Card bleibt sichtbar darüber. */
.map-placeholder {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(45deg,
      rgba(var(--color-bg-deep-rgb), 0.75) 0 12px,
      rgba(var(--color-bg-deep-rgb), 0.92) 12px 13px);
}
[data-theme="light"] .map-placeholder {
  /* black-10 (#2820161A, Alpha 0.102) auf 60 % bzw. 22 % — vorberechnet */
  background:
    repeating-linear-gradient(45deg,
      rgba(40, 32, 22, 0.061) 0 12px,
      rgba(40, 32, 22, 0.022) 12px 13px);
}

/* map-marker-inner + dark-mode map filter → design-system.css */

/* Hover-over-map: restore native cursor on the map and hide the custom cursor.
   The iframe (Google) and Leaflet-canvas have their own cursor states; once the
   pointer enters the map area, the decorative cursor would freeze (no mousemove
   events bubble out of an iframe) — hiding it avoids the frozen ghost. */
#map { cursor: auto; }
html.js-ready:has(#map:hover) #cursor,
html.js-ready:has(#map:hover) #cursor-ring {
  opacity: 0;
}

/* ── PERMANENT INFO CARD — sits over the static map, can't be dismissed ──
   Wird nur sichtbar, wenn die Leaflet-Karte aktiv ist (also bei abgelehntem
   Cookie-Banner). Bei Google-Maps-iframe oder Placeholder bleibt sie aus —
   Google liefert eigene Marker-Popups, der Placeholder soll neutral wirken.
   z-index muss > 1000 sein, damit die Card über Leaflets Tile-/Marker-/Control-
   Panes liegt (die nutzen intern z-indexes bis 1000). Die .map-section's
   z-index: 0 hält das Ganze trotzdem unter der fixen Nav (z-index 100). */
.map-card { display: none; }
.map-section[data-mode="leaflet"] .map-card { display: block; }

.map-card {
  position: absolute;
  /* horizontal mittig, Unterkante knapp über dem Marker (der wegen locked
     map immer im visuellen Center der Section sitzt) */
  left: 50%;
  bottom: calc(50% + 14px);
  transform: translateX(-50%);
  z-index: 1010;
  max-width: min(320px, calc(100% - 32px));
  padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px);
  background: var(--color-bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 10px 32px var(--color-black-20);
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-card-text);
}
[data-theme="light"] .map-card {
  background: var(--color-bg-card);
  border-color: var(--color-black-10);
  box-shadow: 0 10px 32px var(--color-black-12);
}

/* speech-bubble tail — rotated square so its bordered lower edges become the
   arrow's slanted sides, top half tucks inside the card to break the border */
.map-card::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--color-bg-deep);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  transform: translateX(-50%) rotate(45deg);
}
[data-theme="light"] .map-card::after {
  background: var(--color-bg-card);
  border-right-color: var(--color-black-10);
  border-bottom-color: var(--color-black-10);
}

.map-card-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  letter-spacing: -0.005em;
  color: var(--color-card-text);
}
.map-card-addr {
  margin: 4px 0 0;
  color: var(--color-card-text-faint);
  font-size: 0.84rem;
  line-height: 1.4;
}

.map-card-google {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  color: var(--color-card-text);
  text-decoration: none;
  font-size: 0.78rem;
  transition: color var(--t-fast, 0.2s ease);
}
[data-theme="light"] .map-card-google {
  border-top-color: var(--color-black-10);
}
.map-card-google:hover .map-card-reviews,
.map-card-google:focus-visible .map-card-reviews {
  text-decoration: underline;
}
.map-card-google:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.map-card-stars {
  color: var(--color-google-star);
  letter-spacing: 1px;
  font-size: 0.95rem;
  line-height: 1;
  flex: none;
}
.map-card-rating {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.map-card-reviews {
  color: var(--color-teal);
  font-weight: 500;
  margin-left: auto;
}

@media (max-width: 600px) {
  .map-card {
    /* immer noch zentriert über Marker, nur etwas breiter und kompakter */
    max-width: calc(100% - 24px);
    bottom: calc(50% + 12px);
    padding: 12px 14px;
  }
}

/* ── LIGHT MODE: kontakt nav override ────────── */
/* Rechte Hero-Hälfte ist creme -> die echte Nav braucht sofort dunklen
   Text. Über der linken Foto-Hälfte (dunkler Scrim) übernimmt die
   .nav-clip-Kopie weiter unten die weiße Darstellung. */
[data-theme="light"] .site-nav:not(.scrolled)::before {
  display: none;
}

:is([data-theme="light"] .site-nav) .nav-links a {
    color: var(--color-text);
  }

:is(:is([data-theme="light"] .site-nav) .nav-links a):hover,.active:is(:is([data-theme="light"] .site-nav) .nav-links a) {
      color: var(--color-teal);
    }

:is([data-theme="light"] .site-nav) .nav-cta {
    border-color: var(--color-teal);
    color: var(--color-teal);
  }

:is(:is([data-theme="light"] .site-nav) .nav-cta):hover {
      background: var(--color-teal);
      color: var(--color-white-pure);
    }

:is([data-theme="light"] .site-nav) .theme-toggle {
    border-color: rgba(var(--color-text-rgb), 0.35);
    color: rgba(var(--color-text-rgb), 0.5);
  }

:is(:is([data-theme="light"] .site-nav) .theme-toggle):hover {
      border-color: var(--color-border-accent);
      color: var(--color-teal);
      background: var(--color-process-bg);
    }

/* Hamburger: kein eigener Override mehr. hero-left ist jetzt dunkel, daher greift
     global weiss (nicht gescrollt) bzw. dunkel (gescrollt). */

/* Logo: kein eigener kontakt-Override mehr. Da die hero-left jetzt ein dunkles
   Bild-Panel ist, greift das globale Verhalten: oben (nicht gescrollt) helle Form
   (brightness), beim Scrollen (heller Nav-Hintergrund) dunkel (filter: none). */

/* ── RESPONSIVE ──────────────────────────────── */

@media (max-width: 1024px) {
  .hours-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #hero {
    min-height: auto;
    height: auto;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-left {
    padding: 120px var(--page-padding) 48px;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .hero-right {
    padding: 48px var(--page-padding) 60px;
  }

  /* Generic + wizard-step field-row — both stack 1-col. The wizard-step
     selector has higher specificity than the global .field-row rule, so it
     needs its own override. */
  .field-row,
  .wizard-step .field-row {
    grid-template-columns: 1fr;
  }

  /* Inputs & textareas: ≥ 16 px font-size prevents iOS Safari from auto-
     zooming when the field receives focus. */
  .wizard-step input[type="text"],
  .wizard-step input[type="email"],
  .wizard-step input[type="tel"],
  .wizard-step textarea {
    font-size: 16px;
  }

  /* Mobile: drop the tallest-step reservation. Vertical space is scarce here,
     so letting the form follow the active step's height beats a fixed stack
     with big empty gaps under the shorter steps. The JS scrolls back to the
     wizard header on each step change, so the nav moving with the content is
     not perceived as a jump. */
  .wizard-form { display: block; }
  .wizard-step { display: none; visibility: visible; }
  .wizard-step.is-active { display: block; }

  /* Wizard cards: single column on narrow viewports — at 2-col the cards
     squeeze to ~150 px each and titles like "Wartung & Reparatur" wrap to
     three lines. */
  .wizard-cards {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .wizard-card {
    padding: 16px 18px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .wizard-card-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0;
  }

  .wizard-card-title {
    flex: 1 1 auto;
    min-width: 0; /* allow wrap inside the row layout */
  }

  .wizard-card-desc {
    flex: 1 1 100%;
    margin-left: 38px; /* align with title (icon 24 + gap 14) */
  }

  /* Summary list: stacked layout — the 130 px gutter chops long values
     ("Anliegen: Neue Heizung, Solar & PV, Wartung & Reparatur") on
     narrow viewports. */
  .wizard-summary-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }

    .wizard-summary-row dt { font-size: 0.62rem; }
    .wizard-summary-row dd { font-size: 0.95rem; }

  /* Wizard navigation: the three buttons together can overflow a 360 px
     viewport — let them wrap and stretch full-width when wrapped. */
  .wizard-nav {
    flex-wrap: wrap;
    gap: 12px;
  }

    .wizard-nav > * {
      flex: 1 1 auto;
      min-width: max-content;
    }

  .wizard-header {
    margin-bottom: 28px;
  }

  .wizard-intro {
    font-size: 0.88rem;
  }

  /* Cards inherit `:has(input:checked)` detection from desktop rules.
     On older mobile Safari (< 15.4) :has is unavailable; the form still
     posts the checked value, just without the visual selected highlight. */

  .form-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-note {
    max-width: 100%;
  }
  .hours-grid {
    grid-template-columns: 1fr;
  }
  .map-section {
    height: 320px;
  }
}

/* ── NAV-FOTO-SPLIT: weiße Nav-Kopie über der Bild-Hälfte ── */
/* nav.js klont die Nav (body.nav-photo-split) und dieses CSS beschneidet
   die Kopie exakt auf die linke Hero-Hälfte: die Textfarbe wechselt an der
   Bildkante, notfalls mitten im Glyph. Die Kopie ist aria-hidden und ohne
   Pointer-Events; Hover spiegelt nav.js über die .hover-Klasse. */
.site-nav.nav-clip {
  display: none;
}

@media (min-width: 1025px) {
  [data-theme="light"] .site-nav.nav-clip {
    display: flex;
    pointer-events: none;
    clip-path: inset(0 50% 0 0);
  }

    .scrolled:is([data-theme="light"] .site-nav.nav-clip) {
      visibility: hidden;
    }

    /* Dark-Mode-Farben als Literale: der Light-Mode remappt --color-white
       und --color-teal-lt auf dunkle Werte, der Klon über dem dunklen Foto
       braucht aber genau die hellen Dark-Mode-Töne. */
    :is([data-theme="light"] .site-nav.nav-clip) .nav-links a {
      color: #f2f6f8;
    }

      .hover:is(:is([data-theme="light"] .site-nav.nav-clip) .nav-links a),.active:is(:is([data-theme="light"] .site-nav.nav-clip) .nav-links a) {
        color: #49c5b6;
      }

    :is([data-theme="light"] .site-nav.nav-clip) .nav-cta {
      border-color: #49c5b6;
      color: #49c5b6;
    }

      .hover:is(:is([data-theme="light"] .site-nav.nav-clip) .nav-cta) {
        background: #49c5b6;
        color: #0a0d14;
      }
}

/* Hamburger liegt 769-1024px über der cremefarbenen Wizard-Hälfte (Grid
   bleibt dort 50/50, Links sind schon im Slide-out) -> globales Weiß wäre
   unsichtbar. Gescrollt übernimmt die globale dunkle Regel. */
@media (min-width: 769px) and (max-width: 1024px) {
  [data-theme="light"] .site-nav:not(.scrolled) .nav-mobile-toggle span {
    background: #1a1a1a;
  }
}