/* ===================================================================
   Seite "Warum B2P?" (ID 360) – Shortcode [warum]
   Alle Regeln sind auf .b2p-warum gescopet, damit sie keine andere
   Seite beeinflussen koennen.
   Farben und Schriften kommen aus den Variablen in mdg.css.

   Achtung (Lehre aus tourismus.css): KEINE Regel der Form
   ".b2p-warum section { background: ... }" – Klasse+Typ ist
   spezifischer als eine einzelne Abschnittsklasse und wuerde deren
   Hintergrund ueberschreiben. Hintergruende stehen deshalb
   ausschliesslich an den einzelnen Abschnitten.
   =================================================================== */

.b2p-warum {
    font-family: var(--b2p-font-body);
    color: var(--b2p-text);
}

/* Die Farbbaender gehen ueber die volle Fensterbreite, obwohl der
   Shortcode in einer Divi-Zeile mit Maximalbreite steckt. Die Zeile ist
   mittig, deshalb zieht calc(50% - 50vw) exakt bis an die Fensterkanten.
   html/body haben bereits overflow-x:hidden (mdg.css), die ueblichen
   Nebenwirkungen von vw mit Scrollbalken sind damit abgefangen. */
.b2p-warum-band {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 86px 40px;
}

.b2p-warum-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

/* ─── Grundtypografie ─────────────────────────────────────────────── */

.b2p-warum h1,
.b2p-warum h2,
.b2p-warum h3 {
    font-family: var(--b2p-font-display);
    color: var(--b2p-dark);
    line-height: 1.1;
    margin: 0;
    padding: 0;
}

.b2p-warum h1 { font-size: 92px; }
.b2p-warum h2 { font-size: 56px; }
.b2p-warum h3 { font-size: 27px; }

.b2p-warum p {
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.68;
}

.b2p-warum svg {
    display: block;
    width: 100%;
    height: auto;
}

.b2p-warum-svg-label {
    font-family: var(--b2p-font-display);
    font-size: 23px;
    fill: var(--b2p-accent);
}

.b2p-warum-svg-station {
    font-family: var(--b2p-font-body);
    font-size: 19px;
    fill: var(--b2p-dark);
}

.b2p-warum-stapel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.b2p-warum-split {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    margin-top: 36px;
}

.b2p-warum-split > .b2p-warum-stapel {
    flex: 999 1 420px;
    min-width: 0;
}

.b2p-warum-bild {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b2p-warum-bild svg { max-width: 290px; }

/* ─── Abschnitt 1: Hero ───────────────────────────────────────────── */

.b2p-warum-hero { background: var(--b2p-cream-light); }

.b2p-warum-lede {
    margin-top: 28px !important;
    max-width: 800px;
    font-size: 26px !important;
    line-height: 1.45 !important;
    color: var(--b2p-dark);
}

.b2p-warum-intro {
    margin-top: 20px !important;
    max-width: 700px;
}

/* ─── Abschnitt 2: Worum es geht ──────────────────────────────────── */

.b2p-warum-problem {
    background: var(--b2p-dark);
    color: var(--b2p-cream-light);
}

.b2p-warum-problem h2 { color: var(--b2p-accent); }

.b2p-warum-betont {
    color: var(--b2p-accent);
    font-weight: 700;
}

/* ─── Abschnitt 3: Die Idee in einem Satz ─────────────────────────── */

.b2p-warum-idee {
    background: var(--b2p-accent);
    padding-top: 96px;
    padding-bottom: 96px;
    text-align: center;
}

.b2p-warum-idee blockquote {
    margin: 0 auto;
    padding: 0;
    border: 0;
    max-width: 860px;
    font-family: var(--b2p-font-display-regular);
    font-size: 46px;
    line-height: 1.2;
    color: var(--b2p-dark);
    font-style: normal;
}

.b2p-warum-idee-sub {
    margin-top: 28px !important;
    font-size: 17px !important;
    color: #5c5a52;
}

/* ─── Abschnitt 4: Wie wir arbeiten ───────────────────────────────── */

.b2p-warum-methode { background: var(--b2p-cream-light); }

.b2p-warum-karten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.b2p-warum-karte {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    border-top: 7px solid var(--b2p-accent);
    min-width: 0;
}

.b2p-warum-karte p { margin-top: 14px !important; }

/* ─── Abschnitt 5: Finanzierung ───────────────────────────────────── */

.b2p-warum-geld {
    background: var(--b2p-dark);
    color: var(--b2p-cream-light);
}

.b2p-warum-split--claim { margin-top: 0; gap: 56px; align-items: flex-start; }

.b2p-warum-claim {
    flex: 1 1 300px;
    min-width: 0;
    font-family: var(--b2p-font-display);
    font-size: 72px !important;
    line-height: 0.98 !important;
    color: var(--b2p-accent);
}

.b2p-warum h3.b2p-warum-zwischen {
    font-size: 32px;
    color: var(--b2p-accent);
    margin-top: 64px !important;
}

.b2p-warum-vergleich {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.b2p-warum-feld {
    border: 2px solid rgba(254, 226, 107, 0.3);
    border-radius: 16px;
    padding: 26px 26px 24px;
    min-width: 0;
}

.b2p-warum-feld--gut {
    border-color: var(--b2p-accent);
    background: rgba(254, 226, 107, 0.06);
}

.b2p-warum-feld svg { max-width: 300px; margin: 0 auto; }

.b2p-warum-feld-titel {
    font-family: var(--b2p-font-display);
    font-size: 25px !important;
    line-height: 1.1 !important;
    color: var(--b2p-accent);
    margin-bottom: 8px !important;
}

.b2p-warum-feld-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #c9c5b6;
    margin-top: 12px !important;
}

.b2p-warum-fazit {
    font-family: var(--b2p-font-display-regular);
    font-size: 27px !important;
    line-height: 1.3 !important;
    color: var(--b2p-accent);
    margin-top: 36px !important;
    max-width: 760px;
}

.b2p-warum-klein {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #c9c5b6;
    margin-top: 24px !important;
    max-width: 700px;
}

/* ─── Abschnitt 6: Ziele ──────────────────────────────────────────── */

.b2p-warum-ziele { background: var(--b2p-cream-warm); }

.b2p-warum-lede-klein {
    margin-top: 18px !important;
    max-width: 700px;
    font-size: 20px !important;
    line-height: 1.6 !important;
}

.b2p-warum-kette { margin: 40px 0 0; }
.b2p-warum-kette-rollbar { overflow-x: auto; }
.b2p-warum-kette-rollbar svg { min-width: 560px; }

.b2p-warum-kette figcaption {
    font-size: 16px;
    line-height: 1.6;
    color: #6b6b66;
    margin-top: 14px;
    max-width: 620px;
}

.b2p-warum-zieleliste {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
}

.b2p-warum-zieleliste li {
    display: flex;
    gap: 18px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.b2p-warum-ziel-nr {
    font-family: var(--b2p-font-display);
    font-size: 30px;
    line-height: 1;
    color: var(--b2p-red);
    flex: 0 0 auto;
}

.b2p-warum-zieleliste h3 { font-size: 23px; }

.b2p-warum-zieleliste p {
    margin-top: 8px !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
}

/* ─── Abschnitt 7: Kurz gefragt ───────────────────────────────────── */

.b2p-warum-faq { background: var(--b2p-cream-light); }

.b2p-warum-faq h2 { font-size: 50px; }

.b2p-warum-faqliste {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 32px;
    max-width: 800px;
}

.b2p-warum-faq-item {
    border-left: 6px solid var(--b2p-accent);
    padding: 4px 0 4px 22px;
}

.b2p-warum-faq-item h3 { font-size: 23px; }
.b2p-warum-faq-item p { margin-top: 8px !important; }

/* ─── Abschnitt 8: Abschluss ──────────────────────────────────────── */

.b2p-warum-schluss {
    background: var(--b2p-dark);
    color: var(--b2p-cream-light);
    text-align: center;
}

.b2p-warum-claim--schluss {
    flex: none;
    font-size: 64px !important;
    line-height: 1 !important;
}

.b2p-warum-schluss-text {
    margin: 28px auto 0 !important;
    max-width: 620px;
}

/* ─── Buttons ─────────────────────────────────────────────────────── */

.b2p-warum-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px !important;
}

.b2p-warum-schluss .b2p-warum-knoepfe {
    justify-content: center;
    margin-top: 36px !important;
}

.b2p-warum-btn {
    display: inline-block;
    padding: 14px 28px;
    border: 2px solid var(--b2p-accent);
    border-radius: 999px;
    color: var(--b2p-accent) !important;
    text-decoration: none;
    font-family: var(--b2p-font-display-regular);
    font-size: 21px;
    line-height: 1.2;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.b2p-warum-btn:hover,
.b2p-warum-btn:focus {
    background: var(--b2p-accent);
    color: var(--b2p-dark) !important;
}

.b2p-warum-btn--voll {
    background: var(--b2p-accent);
    color: var(--b2p-dark) !important;
    font-family: var(--b2p-font-display);
    font-size: 26px;
    padding: 18px 40px;
}

.b2p-warum-btn--voll:hover,
.b2p-warum-btn--voll:focus {
    background: #fff;
    border-color: #fff;
    color: var(--b2p-dark) !important;
}

/* ─── Mobil ───────────────────────────────────────────────────────── */

@media (max-width: 980px) {
    .b2p-warum h1 { font-size: 64px; }
    .b2p-warum h2 { font-size: 44px; }
    .b2p-warum-idee blockquote { font-size: 36px; }
    .b2p-warum-claim { font-size: 60px !important; }
    .b2p-warum-claim--schluss { font-size: 50px !important; }
}

@media (max-width: 760px) {
    .b2p-warum-band { padding: 56px 20px; }
    .b2p-warum h1 { font-size: 54px; }
    .b2p-warum h2 { font-size: 38px; }
    .b2p-warum-faq h2 { font-size: 36px; }
    .b2p-warum-lede { font-size: 21px !important; }
    .b2p-warum-idee blockquote { font-size: 30px; }
    .b2p-warum-claim { font-size: 52px !important; }
    .b2p-warum-claim--schluss { font-size: 44px !important; }
    .b2p-warum-fazit { font-size: 23px !important; }
    .b2p-warum h3.b2p-warum-zwischen { font-size: 27px; }
    .b2p-warum-karten,
    .b2p-warum-vergleich,
    .b2p-warum-zieleliste { grid-template-columns: minmax(0, 1fr); }
    .b2p-warum-split { gap: 32px; }
}

/* ---------------------------------------------------------------------------
   Weisse Streifen ueber und unter der Seite entfernt (05.10.2026)

   Die Divi-Zeile, in der das Textmodul mit [warum] sitzt, bringt 30px
   Innenabstand oben und unten mit, und die Section dahinter ist weiss.
   Dadurch lag ueber dem cremefarbenen ersten Abschnitt und unter dem
   dunklen Schlussblock je ein weisser Streifen, der die Seite vom Header
   und vom Footer abgetrennt hat. Die Abschnitte bringen ihre eigenen
   Abstaende mit, das Divi-Padding ist hier ueberfluessig.

   Auf die Seiten-ID gescopet, weil dieselbe Zeilenklasse (.et_pb_row_0)
   auf jeder Divi-Seite vorkommt.
   --------------------------------------------------------------------------- */

body.page-id-360 .et_pb_section_0 > .et_pb_row_0.et_pb_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ab 981px kommt derselbe weisse Streifen nicht von der Zeile, sondern vom
   Standard-Innenabstand der Divi-Section (4% = rund 51px bei 1280px Breite).
   Gleicher sichtbarer Bruch zwischen Header und erstem Abschnitt, nur
   breiter - deshalb hier ebenfalls auf 0. */
body.page-id-360 .et_pb_section_0.et_pb_section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}