/* =========================================================
   Berlin Projekt Borchert – responsive.css
   Seitenweite Breakpoints, absteigend sortiert.

   1024px  Prozess-Schritte 2x2
    900px  Tablet/Mobil: Header-Grid, Hero, Buttons, Sections,
           Prozess-Schritte einspaltig, Footer
    767px  WPBakery stapelt hier die Spalten: Spaltenluecken,
           Textgroessen, Abstaende, CTA-Box, Kennzahlen
    400px  kleine Telefone: Typo-Skalierung, Innenabstaende

   Komponenten-eigene Breakpoints (Formular, Listen, Akkordeon,
   Rechtstexte, Navigation) liegen bei der Komponente in theme.css.
   Objektliste/Expose: objektliste.css bzw. objekte.css.
   ========================================================= */


/* ---------------------------------------------------------
   <= 1024px
   --------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Prozess-Schritte: 2x2, die Verbindungslinie passt nicht mehr */
  .process-steps         { grid-template-columns: repeat(2, 1fr); gap: 52px 0; }
  .process-steps::before { display: none; }
  .process-step          { padding: 0 20px; }
  .step-title            { font-size: 21px; }
}


/* ---------------------------------------------------------
   <= 900px  (ab hier Burger-Navigation, siehe theme.css)
   --------------------------------------------------------- */
@media (max-width: 900px) {

  /* Header: nur noch Logo-Spalte + Rest; Navi liegt im Panel */
  header .header-row { grid-template-columns: 100px 1fr; }

  /* Hero */
  .hero-headlines h2 span { display: none; }
  .hero-text   { width: 100%; box-sizing: border-box; }
  .hero-text p { font-size: 16px; max-width: 100%; text-align: left; line-height: 1.54em; }
  .hero-cta a:first-child { margin-right: 0; margin-bottom: 15px; }

  /* Buttons */
  .btn-primary, .btn-ghost, .btn-primary-apt { font-size: 12px; padding: 12px 25px; }

  /* Sections & Grid */
  .grid  { margin: 0; width: 100%; box-sizing: border-box; }
  .p150  { padding-top: 75px !important; padding-bottom: 75px !important; }
  .vc_column-gap-50px > div:last-child { padding-left: 0; padding-top: 50px; }
  .centered .eyebrow { margin: 0 0 18px 0; display: flex; }
  .quote-text { padding: 0 20px; }

  /* Logo-Schild */
  .logo-shield     { text-align: center !important; margin-top: 50px; }
  .logo-shield img { max-width: 150px; margin: 0 auto; display: block; }

  /* CTA-Box */
  .cta { padding: 20px; }
  .cta .vc_col-sm-4 p { text-align: center !important; padding-top: 30px; }

  /* Objekt-Kacheln Startseite: untereinander */
  .object-listing.bp-layout-kacheln       { display: block; }
  .object-listing.bp-layout-kacheln > div { margin-bottom: 20px; }

  /* Slider Revolution Video */
  .sr7-html5-video { object-position: center center !important; }

  /* Prozess-Schritte: einspaltig, Kreis links, Linie pro Schritt */
  .process-steps { grid-template-columns: 1fr; gap: 32px; margin-top: 20px; }
  .process-step {
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 18px;
    row-gap: 6px;
    align-items: start;
    text-align: left;
    padding: 0;
    position: relative;
  }
  .step-num   { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; }
  .step-title { grid-column: 2; grid-row: 1; font-size: 20px; margin-bottom: 0; }
  .step-desc  { grid-column: 2; grid-row: 2; font-size: 15px; line-height: 1.65; }
  .process-step::before {
    content: '';
    position: absolute;
    left: 27px;            /* Mitte des 54px-Kreises */
    top: 54px;
    bottom: -32px;         /* = negativer gap, erreicht den naechsten Kreis */
    width: 1px;
    background: var(--gold-dim);
  }
  .process-step:last-child::before { display: none; }

  /* Footer */
  footer { padding: 40px 25px; }
}


/* ---------------------------------------------------------
   <= 767px  (WPBakery: vc_col-sm-* werden ab hier 100 % breit)
   --------------------------------------------------------- */
@media (max-width: 767px) {

  /* Spaltenluecken: auf gestapelten Spalten wird aus seitlichem
     Abstand vertikaler Abstand */
  .two-cols > div:first-child,
  .two-cols > div:last-child,
  .vc_column-gap-50px > div:first-child,
  .vc_column-gap-50px > div:last-child,
  .vc_column-gap-90px > div:first-child,
  .vc_column-gap-90px > div:nth-child(2),
  .vc_column-gap-90px > div:last-child { padding-left: 0; padding-right: 0; }
  .two-cols > div + div,
  .vc_column-gap-90px > div + div { padding-top: 40px; }
  .vc_column-gap-50px > div:last-child { padding-top: 40px; }

  /* Liste, die auf dem Desktop neben dem Text haengt */
  .text-list ul { margin-top: 24px; }

  /* Fliesstext & Listen */
  .text-light p,
  .background-light .text-dark p { font-size: 16px; line-height: 1.7; margin: 20px 0; }
  .list li  { font-size: 16px; }
  .list ul  { gap: 12px; }
  .smaller-h2-italic .section-h2 em { transform: translateY(-8px); }

  /* Abstaende */
  section.p100 { padding-top: 60px; padding-bottom: 60px; }
  .section-quote { padding: 60px 0; }
  .cta-button { margin-top: 30px; }
  .cta-text { padding-right: 0; }

  /* CTA-Box: untereinander statt nebeneinander */
  .cta { flex-direction: column; margin-top: 50px; }

  /* Kennzahlen: 2x2 */
  .bpb-facts { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
  .bpb-fact  { padding: 28px 0; }

  /* Hero-Buttons untereinander, volle Breite */
  .hero-cta { display: block; }
  .hero-cta a { display: block; text-align: center; }
}


/* ---------------------------------------------------------
   <= 400px
   --------------------------------------------------------- */
@media (max-width: 400px) {

  header { --bar-h: 140px; --logo-w: 70px; --logo-top: 15px; --nav-top: 34px; }

  .vc_section { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .grid       { padding-left: 20px !important; padding-right: 20px !important; }

  .hero-headlines h2 { font-size: 26px; }
  .hero-text p       { font-size: 14px; line-height: 1.5em; }

  .section-h2                 { font-size: 30px; }
  .section-h2 .eyebrow        { font-size: 8px; letter-spacing: 0.3em; }
  .section-h2 .eyebrow::before { width: 20px; }

  .section-quote p              { font-size: 15px !important; }
  .section-quote blockquote > p { font-size: 23px !important; }
}