/* ============================================================
   GROWIT — Wohnungsgenossenschaften, dritte Fassung
   Laedt als letztes Blatt dieser Seite.

   Zwei Aufgaben:
   1) Die Abschnitte stehen auf hellem Grund, nicht in Kaesten.
      Alles, was bisher wie eine Karte aussah, wird zu Text mit
      Haarlinie. Farbe und Schatten verschwinden.
   2) Ein einziger dunkler Bereich pro Seite, und der laeuft ueber
      die volle Breite mit Farbverlauf. Keine dunklen Kaestchen.
   ============================================================ */

.wg { --wg-ease: cubic-bezier(.32, .72, 0, 1); }

/* ------------------------------------------------------------
   1 · Hero — Ueberschrift symmetrisch, „sein Ruf" bleibt zusammen
   ------------------------------------------------------------ */
.wg .wg-held__text h1 {
  text-wrap: balance;
  max-width: 15ch;
  line-height: 1.04;
  letter-spacing: -.035em;
}
.wg .nb { white-space: nowrap; }

/* Lange deutsche Woerter reissen auf dem Telefon Zeilen auf, in denen
   nur noch „die" steht. balance verteilt die Zeilen gleichmaessig. */
.wg .ldx-head h2,
.wg .wg-fall h2,
.wg .gw-band h2 { text-wrap: balance; }

/* ------------------------------------------------------------
   2 · Karten aufloesen
   ------------------------------------------------------------ */
/* Die vier Zahlen zum Druck: nur Zahl, Zeile, Text */
.wg .wg-druck {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  gap: clamp(24px, 3.4vw, 54px) !important;
}
.wg .wg-druck__zelle,
.wg .wg-druck__zelle:hover {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(40, 15, 145, .12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 26px 0 0 !important;
}

/* Problem und Loesung: zwei Textspalten, kein Feld */
.wg .wg-pl {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  gap: 0 !important;
}
.wg .wg-pl__zeile { background: none !important; }
.wg .wg-pl__kopf span { padding-inline: 0 !important; }
.wg .wg-pl__pfeil {
  background: none !important;
  border-inline: 0 !important;
  width: clamp(44px, 6vw, 84px) !important;
}
.wg .wg-pl__seite {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.wg .wg-pl__seite--loesung { padding-left: 22px !important; border-left: 2px solid var(--royal, #5271FF) !important; }
.wg .wg-pl__zeile {
  padding: clamp(24px, 3vw, 38px) 0;
  border-top: 1px solid rgba(40, 15, 145, .1);
}
.wg .wg-pl__kopf { border: 0 !important; background: none !important; }

/* Die zwei Hebel: Ueberschrift, Text, Liste — ohne Rahmen */
.wg .wg-hebel__karte,
.wg .wg-hebel__karte--kalt {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.wg .wg-hebel {
  gap: clamp(30px, 5vw, 76px);
  padding-top: clamp(8px, 2vw, 20px);
}
.wg .wg-hebel__karte + .wg-hebel__karte { border-left: 1px solid rgba(40, 15, 145, .1); padding-left: clamp(28px, 4vw, 60px) !important; }

/* Seit in beiden Spalten eine Zeichnung steht, faellt jede Ungleichheit auf.
   Ohne diesen Ausgleich waere die rechte Spalte um die Einrueckung schmaler,
   ihre Zeichnung dadurch kleiner und die Haekchenliste weiter oben. */
.wg .wg-hebel__karte:first-child { padding-right: clamp(28px, 4vw, 60px) !important; }

@media (max-width: 900px) {
  .wg .wg-hebel__karte:first-child { padding-right: 0 !important; }
  .wg .wg-hebel__karte + .wg-hebel__karte { border-left: 0; border-top: 1px solid rgba(40, 15, 145, .1); padding-left: 0 !important; padding-top: 30px !important; }
}

/* Die Aktenzeile ueber dem Vergleich */
.wg .wg-fall__akte {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(40, 15, 145, .12) !important;
  border-bottom: 1px solid rgba(40, 15, 145, .12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Die Ueberleitung zum Bau-Partner */
.wg .wg-ueberleitung {
  margin: clamp(30px, 4vw, 48px) 0 0;
  max-width: 62ch;
  color: var(--muted, #4F5872);
  font-weight: 300;
  line-height: 1.76;
}

/* Der Festpreis-Dreier: drei Spalten, kein Kasten */
.wg .wg-festpreis {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  gap: clamp(24px, 3.4vw, 54px) !important;
  margin-top: clamp(22px, 2.6vw, 34px) !important;
}
.wg .wg-festpreis > div {
  background: none !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid rgba(40, 15, 145, .12);
}

/* Die Instagram-Beitraege: der Beitrag selbst ist die Karte.
   Eine zweite Karte darum herum waere ein Rahmen um einen Rahmen. */
.wg .wg-reels__cell,
.wg .wg-reels__cell:hover {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
/* Der Platz bleibt reserviert, damit beim Nachladen nichts springt. */
.wg .wg-reels__cell { min-height: 480px; position: relative !important; }

/* Solange der Beitrag laedt, liegt der Link darueber. woge.js nimmt ihn
   erst weg, wenn der Beitrag wirklich sichtbar ist. Heller Grund statt
   Navy-Kasten, damit auch der Platzhalter zur Seite passt. */
.wg .wg-reels__ph {
  position: absolute !important;
  inset: 0 !important;
  aspect-ratio: auto !important;
  background: #F4F7FF !important;
  color: var(--navy, #280F91) !important;
  border: 1px solid rgba(40, 15, 145, .12) !important;
  border-radius: 18px !important;
  z-index: 2;
}
.wg .wg-reels__ph .wg-reels__play {
  border: 1.5px solid rgba(40, 15, 145, .28) !important;
  background: #fff;
}
.wg .wg-reels__ph .wg-reels__play svg { fill: var(--royal, #5271FF); }
.wg .wg-reels__ph span:not(.wg-reels__play) { color: var(--muted, #4F5872); opacity: 1; }

/* Das Ergebnis */
.wg .wg-ergebnis {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(40, 15, 145, .12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(30px, 4vw, 52px) 0 0 !important;
}

/* ------------------------------------------------------------
   3 · Das Cockpit-Band steht in band.css, weil es jede Seite nutzt
   ------------------------------------------------------------ */

/* ============================================================
   v4 · Schema-Vielfalt und Symmetrie
   Ziel: mittige Texte, wechselnde Hintergruende (via data-bg),
   weniger Kaestchen, eine eigene Form fuer den Ablauf.
   ============================================================ */

/* ------------------------------------------------------------
   v4·1 · Die Ueberleitung zum Bau-Partner steht mittig,
   symmetrisch zur Festpreis-Reihe darunter.
   ------------------------------------------------------------ */
.wg .wg-ueberleitung {
  margin-inline: auto;
  text-align: center;
}

/* ------------------------------------------------------------
   v4·2 · Der Riss verliert seine Creme-Farbe. Das Blatt wird
   ein kuehles Weiss mit blauem Stich, die Waende ziehen mit.
   So gehoert die Zeichnung zur Seite statt daneben zu liegen.
   ------------------------------------------------------------ */
.wg {
  --papier: #FAFBFF;
}
.wg .pl-wand   { fill: #EDF1FB; }
.wg .pl-sockel { fill: #E2E8F6; }
.wg .wg-plan {
  background: rgba(82, 113, 255, .05);
  border-color: rgba(40, 15, 145, .08);
}
.wg .wg-plan__blatt { border-color: rgba(40, 15, 145, .12); }

/* ------------------------------------------------------------
   v4·3 · Der Ablauf haengt nicht mehr links in der Ecke.
   Die Linie steht in der Seitenmitte, die Schritte wechseln
   die Seite und kommen im Scrollen von links und rechts.
   Unter 900px gilt weiter die einspaltige Form.
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  #ablauf .lx-flow { max-width: 1060px; margin-inline: auto; padding-top: 8px; }
  #ablauf .lx-flow__line { left: 50%; margin-left: -1px; top: 20px; bottom: 34px; }
  #ablauf .proc-step {
    display: block;
    width: calc(50% - 76px);
    padding-bottom: clamp(36px, 4.4vw, 58px);
  }
  #ablauf .proc-step::before { display: none; }
  #ablauf .proc-step:last-child { padding-bottom: 0; }
  #ablauf .proc-step__num { position: absolute; top: -12px; }
  /* Kind 1 ist die Linie, danach wechseln sich die Schritte ab. */
  #ablauf .proc-step:nth-child(even) { margin-right: auto; text-align: right; }
  #ablauf .proc-step:nth-child(even) .proc-step__num { right: -103px; }
  #ablauf .proc-step:nth-child(odd)  { margin-left: auto; text-align: left; }
  #ablauf .proc-step:nth-child(odd)  .proc-step__num { left: -103px; }
  #ablauf .proc-step p { grid-column: auto; }
}

/* ------------------------------------------------------------
   v4·4 · Die haeufigen Fragen sind eine ruhige Liste mit
   Haarlinien statt sechs weisser Kaestchen.
   ------------------------------------------------------------ */
.wg .ldx-faq .faq { gap: 0; }
.wg .faq-item {
  background: none;
  border: 0;
  border-top: 1px solid rgba(40, 15, 145, .12);
  border-radius: 0;
}
.wg .faq-item:last-child { border-bottom: 1px solid rgba(40, 15, 145, .12); }
.wg .faq-item.open { box-shadow: none; border-color: rgba(40, 15, 145, .12); }
.wg .faq-q { padding: 24px 6px; }
.wg .faq-a p { padding: 0 6px 26px; max-width: 66ch; }

/* ------------------------------------------------------------
   v4·5 · Weitere Leistungen: ein Verzeichnis statt drei
   Kaestchen. Der Pfeil laeuft beim Zeigen nach rechts.
   ------------------------------------------------------------ */
.wg .ldx-related {
  max-width: 860px;
  margin-inline: auto;
  grid-template-columns: 1fr;
  gap: 0;
}
.wg .ldx-related a {
  background: none;
  border: 0;
  border-top: 1px solid rgba(40, 15, 145, .12);
  border-radius: 0;
  padding: 22px 6px;
  font-size: 1.06rem;
}
.wg .ldx-related a:last-child { border-bottom: 1px solid rgba(40, 15, 145, .12); }
.wg .ldx-related a:hover {
  transform: none;
  box-shadow: none;
  color: var(--royal, #5271FF);
}
.wg .ldx-related a svg { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.wg .ldx-related a:hover svg { transform: translateX(6px); }