/**
 * assets/anfrage-hero.css
 *
 * Wiederverwendbare CSS-Styles für:
 *   1. Hero-Cards (.rv-svc-card*) — Service-Sub-Auswahl als Card-Grid
 *   2. Anfrage-Section (.rv-anfrage-*) — Form mit TrustCard
 *   3. Hero-Replacement-Mode (.rv-anfrage-as-hero) — Hero verschwindet, Form ersetzt es
 *
 * Verwendet auf:
 *   - page-service-hub.php (Hub: /entruempelung/, /reinigung/)
 *   - page-stadt.php (Stadtseite: /entruempelung/hannover/) — ab v103.160.24
 *
 * Refactor-Historie:
 *   - v103.160.23.0–23.15: CSS war inline in page-service-hub.php
 *   - v103.160.24: ausgelagert hierher, Stadtseite integriert
 *
 * Brand-Variables (definiert in assets/stadtseite.css):
 *   --cream #FAF7F2, --charcoal #1C1C1E, --mid #4A4A52, --muted #8E8E93,
 *   --rose #D4704A, --rose-light #F0E0D6, --rose-dark #A06650, --border #E8E3DC
 *
 * Mobile-Breakpoint: 768px (alles >= 769px ist Desktop-Behavior)
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * 1) HERO-CARDS (Service-Sub-Auswahl als Card-Grid)
 *    Naming `.rv-svc-card` (NICHT `.rv-hero-card` — das collidiert mit
 *    Legacy-Klasse aus stadtseite.css Z.88).
 * ═══════════════════════════════════════════════════════════════════════════ */
.rv-svc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
  width: 100%;
  max-width: 480px;
  margin: 1.5rem 0 0.5rem;
}
@media (min-width: 768px) {
  .rv-svc-cards {
    grid-template-columns: repeat(4, 1fr);
    max-width: 720px;
    gap: 0.75rem;
  }
}
.rv-svc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.875rem 0.5rem;
  background: #ffffff;
  border: 1.5px solid var(--border, #E8E3DC);
  border-radius: 12px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--charcoal, #1C1C1E) !important;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
/* Override Kadence-Parent-Theme Button-Hover (sonst Schrift weiß auf weißem Background → unsichtbar) */
.rv-svc-card:hover,
.rv-svc-card:focus,
.rv-svc-card:active,
.rv-svc-card:hover *,
.rv-svc-card:focus *,
.rv-svc-card:active * {
  color: var(--charcoal, #1C1C1E) !important;
  background-color: #ffffff !important;
}
.rv-svc-card:hover,
.rv-svc-card:focus {
  border-color: var(--rose) !important;
  box-shadow: 0 2px 8px rgba(28,28,30,0.06);
  outline: none;
}
.rv-svc-card-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.rv-svc-card-label {
  font-size: 0.875rem;
  line-height: 1.25;
}
.rv-svc-card-more {
  background: transparent !important;
  border-style: dashed;
  color: var(--mid, #4A4A52) !important;
}
.rv-svc-card-more:hover,
.rv-svc-card-more:focus {
  background: #ffffff !important;
  border-style: solid;
  color: var(--charcoal, #1C1C1E) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2) ANFRAGE-SECTION als Hero-Replacement
 *    Initial: data-hero-replacement="1" → versteckt bis JS aktiviert.
 *    JS entfernt das Attribut und fügt rv-anfrage-as-hero hinzu.
 * ═══════════════════════════════════════════════════════════════════════════ */
.rv-anfrage-section[data-hero-replacement] { display: none; }
.rv-anfrage-section.rv-anfrage-as-hero {
  display: block;
  padding-top: 2rem;
  scroll-margin-top: 100px;  /* Nav 64px + Breadcrumb-Puffer */
}
@media (min-width: 768px) {
  .rv-anfrage-section.rv-anfrage-as-hero {
    padding-top: 2.5rem;
    scroll-margin-top: 110px;
  }
}

/* Italic-Akzent in Anfrage-Headline (rose, italic). H2 nutzt em-Tag für
 * "Ihre Anfrage" oder Stadtname.
 */
.rv-anfrage-title em {
  color: var(--rose);
  font-style: italic;
  font-weight: inherit;
}

/* TrustCard nur Desktop (Mobile bleibt unverändert ohne TrustCard) */
.rv-anfrage-trustcard {
  display: none;
}
@media (min-width: 769px) {
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard {
    display: block;
  }
}

/* Form integriert wenn als Hero-Replacement aktiv (Desktop):
 * Card-Container verliert weißen Background + Schatten — Form-Felder
 * sitzen direkt auf dem Cream-Hero-Background.
 */
@media (min-width: 769px) {
  .rv-anfrage-section.rv-anfrage-as-hero .rv-form-card {
    background: transparent;
    box-shadow: none;
    padding: 1rem 0 0;
  }
}
/* Mobile: rv-form-card behält weißen Background aus stadtseite.css Z.159.
 * Inputs erhalten zusätzlich weißen Background als Override (cream-Background
 * aus Z.169 könnte sonst durchschlagen).
 */
.rv-anfrage-section.rv-anfrage-as-hero .rv-form-card input,
.rv-anfrage-section.rv-anfrage-as-hero .rv-form-card select,
.rv-anfrage-section.rv-anfrage-as-hero .rv-form-card textarea {
  background: #ffffff !important;
}
.rv-anfrage-section.rv-anfrage-as-hero .rv-form-card input:focus,
.rv-anfrage-section.rv-anfrage-as-hero .rv-form-card select:focus,
.rv-anfrage-section.rv-anfrage-as-hero .rv-form-card textarea:focus {
  background: #ffffff !important;
  border-color: var(--rose) !important;
}

/* Step-1-Zurück-Button auf Mobile sichtbar wenn Hero-Replacement.
 * Klick triggert rvHeroBackToCards → schließt Mobile-Fullscreen + zurück zu Cards.
 */
.rv-anfrage-section.rv-anfrage-as-hero .rv-svc-step1-back {
  visibility: visible !important;
}

/* Brand-Farben für Form-Buttons gegen Kadence-Parent-Defaults.
 * Kadence setzt blaue Hover/Focus-States auf <button> die nicht zur Brand passen.
 */
.rv-anfrage-section .rv-form-card button:hover,
.rv-anfrage-section .rv-form-card button:focus,
.rv-anfrage-section .rv-form-card button:active {
  outline: none;
}
.rv-anfrage-section .rv-form-card .rv-form-submit:hover,
.rv-anfrage-section .rv-form-card .rv-form-submit:focus {
  background: var(--rose-dark, #A06650) !important;
  color: white !important;
  border-color: transparent !important;
}
.rv-anfrage-section .rv-form-card .rv-svc-step1-back:hover,
.rv-anfrage-section .rv-form-card .rv-svc-step1-back:focus,
.rv-anfrage-section .rv-form-card .rv-form-nav button[onclick*="rvSvcGo"]:not(.rv-form-submit):hover,
.rv-anfrage-section .rv-form-card .rv-form-nav button[onclick*="rvSvcGo"]:not(.rv-form-submit):focus {
  background: rgba(212, 112, 74, 0.06) !important;
  color: var(--charcoal, #1C1C1E) !important;
  border-color: var(--rose, #D4704A) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 3) HERO-REPLACEMENT-LAYOUT (Desktop-only)
 *
 * Anforderungen (User-Iteration v103.160.23.6):
 * 1) Section-Höhe = exakt Viewport-Höhe minus Header (Nav 64px + Breadcrumb ~32px)
 *    Section endet exakt am Viewport-Bottom.
 * 2) Form-Container hat absolute fixe Breite über alle Steps — keine Variation.
 * 3) Buttons + Disclaimer immer am untersten Section-Rand, niemals "springen".
 *
 * Architektur:
 * - Section: fixe Höhe, position relative
 * - Inner: zentriert horizontal, max-width 1080px (für Form 720px + Gap 32px + TrustCard 320px)
 * - Layout: Flex-Row mit Box (links) + TrustCard (rechts)
 * - Box: fixe max-width 720px, Card-Container darin
 * - Card: füllt verfügbaren Space, Form-Inhalt scrollt bei Bedarf
 * - Buttons + Disclaimer: position absolute am Section-Bottom (NICHT am Card-Bottom)
 *   → Position konstant unabhängig von Form-Inhalt-Höhe oder Step
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  /* Section-Höhe: füllt Viewport bis Bottom, abzüglich Header */
  .rv-anfrage-section.rv-anfrage-as-hero {
    height: calc(100vh - 96px);
    min-height: 600px;
    padding-top: 2.5rem;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Inner-Container: nur horizontal zentriert. Höhe = Section minus Padding */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 1080px;
    text-align: left;
  }

  /* Section-Label und Title aligned mit Form-Box-Position (linker Layout-Bereich).
   * Verhindert dass Headline über volle 1080px geht und sich rechts mit TrustCard überschneidet.
   */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-section-label,
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-title {
    text-align: left;
    max-width: 720px;
    margin-left: 0;
    margin-right: 0;
  }

  /* Side-by-Side Layout — Form links (720px), TrustCard rechts (320px) */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-layout {
    display: flex;
    flex-direction: row;
    gap: 32px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
  }

  /* Box: fixe Breite, füllt vertikal den Rest. */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-box {
    width: 100%;
    max-width: 720px;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  /* TrustCard rechts neben Form */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard {
    width: 320px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1.5px solid var(--border, #E8E3DC);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    margin-top: 1rem;
    align-self: flex-start;
    box-shadow: 0 2px 12px rgba(28,28,30,0.04);
  }
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard-pool {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border, #E8E3DC);
  }
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard-pool-icon {
    color: var(--rose);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
  }
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard-pool-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--charcoal);
  }
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard-pool-text strong {
    color: var(--rose);
    font-weight: 700;
  }
  /* Akzent für "passenden" im Suffix "— daraus die passenden für Sie" */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard-pool-text .rv-tc-pool-em {
    color: var(--rose);
    font-style: italic;
    font-weight: 600;
  }
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard-usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--mid);
  }
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard-usps li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
  }
  .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard-usps strong {
    color: var(--charcoal);
    font-weight: 600;
  }
  .rv-anfrage-section.rv-anfrage-as-hero .rv-tc-check {
    color: var(--rose);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
  }

  /* Form-Card-Container (= das DOM-Element mit beiden Klassen .rv-form-card.rv-svc-form):
   * Flex column, füllt verfügbaren Box-Space, padding-bottom als Reservierung für Buttons.
   *
   * v103.160.24.3: Architektur-Klärung — `.rv-form-card` und `.rv-svc-form` sind
   * das GLEICHE DOM-Element (siehe parts/form-service.php Z.36). Vorherige
   * Versionen behandelten sie als verschachtelt — falsch. Plus: das eigentliche
   * <form>-Tag im Inneren wurde nicht als Flex-Item gestylt → Steps konnten
   * nicht zuverlässig scrollen.
   *
   * Neuer Aufbau:
   *   .rv-form-card.rv-svc-form (Flex column, position relative — Buttons-Anker)
   *     .rv-svc-progress-wrap   (natural height, ~50px)
   *     <form>                  (FLEX 1 1 0 mit overflow-y auto — der Scroll-Container!)
   *       .rv-svc-step          (sichtbarer Step, normaler Block-Flow)
   *         [Felder + Buttons + ggf. Disclaimer im Markup]
   *     </form>
   *   [Buttons + Disclaimer absolute relativ zur Card — bleiben fix]
   */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-form-card.rv-svc-form {
    flex: 1 1 0;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    padding: 1rem 0 130px;       /* 130px Bottom-Reservierung für absolute Buttons + Disclaimer */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: auto;
    margin-bottom: 0;
  }

  /* <form>-Tag innerhalb der Card ist der eigentliche Scroll-Container.
   * Bekommt flex: 1 1 0 + overflow-y: auto → Steps scrollen darin wenn Inhalt
   * länger als verfügbarer Space.
   */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-form-card.rv-svc-form > form {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 14px;          /* Reservierter Scrollbar-Platz */
  }

  /* Step bleibt normaler Block-Flow innerhalb des scrollenden Forms.
   * Kein eigener overflow nötig — Form-Tag macht das.
   */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-svc-form .rv-svc-step {
    display: block;
    overflow: visible;
    max-height: none;
  }

  /* Buttons: absolute positioniert relativ zur Card — IMMER am gleichen Punkt
   * unabhängig von Form-Inhalt-Höhe oder Step.
   */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-form-card .rv-form-nav,
  .rv-anfrage-section.rv-anfrage-as-hero .rv-form-card .rv-svc-nav-internal {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    margin: 0 !important;
    padding: 0;
    background: var(--cream);
    border-top: none;
    display: flex !important;
    gap: 10px;
    align-items: center;
    z-index: 2;
  }

  /* Step 1: ext-CTA (großer rose Button) verstecken — internal Nav (Zurück+Weiter) zeigen */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-form-card .rv-svc-cta-external {
    display: none !important;
  }

  /* Trust-Chips (Step 1) verstecken — schaffen Platz */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-form-card .rv-svc-trust {
    display: none;
  }

  /* Disclaimer: absolute am untersten Card-Rand, unter Buttons */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-form-card .rv-form-disclaimer {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted, #8E8E93);
    z-index: 2;
  }

  /* Step 1 Zurück-Button sichtbar machen */
  .rv-anfrage-section.rv-anfrage-as-hero .rv-svc-step1-back {
    visibility: visible !important;
  }

  /* Auf schmaleren Desktop-Viewports (~900-1080px): TrustCard schmaler */
  @media (max-width: 1080px) {
    .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard {
      width: 260px;
      padding: 1.25rem 1rem;
    }
    .rv-anfrage-section.rv-anfrage-as-hero .rv-anfrage-trustcard-usps {
      font-size: 12.5px;
      gap: 0.5rem;
    }
  }
}