/* ===================================================================
   Seiten "Grundsaetze" [grundsaetze] und "Zusammenarbeit" [zusammenarbeit]

   Grundsaetze (.b2p-gz-g) baut auf warum.css auf (.b2p-warum): gleiche
   Farbbaender, Karten und Schriftgroessen wie "Warum B2P?", weil beide
   Seiten unter "Ueber B2P" stehen.
   Zusammenarbeit (.b2p-gz) baut auf tourismus.css auf (.b2p-tour), weil sie
   die Uebersicht ueber der Tourismus-Seite ist.
   Hier steht nur, was dort fehlt. Aendern sich warum.css oder
   tourismus.css, aendern sich diese Seiten mit.
   =================================================================== */


/* ─── Grundsaetze ─────────────────────────────────────────────────── */

.b2p-gz-g .b2p-gz-signatur {
    margin-top: 24px !important;
    font-family: var(--b2p-font-display-regular);
    font-size: 18px !important;
    color: #6b6b66;
}

/* Sprungmarken wie auf der Presse-Seite. */
.b2p-gz-g nav.b2p-gz-sprung {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
}

.b2p-gz-g nav.b2p-gz-sprung a {
    border: 2px solid var(--b2p-text);
    border-radius: 46px;
    padding: 6px 15px;
    font-family: var(--b2p-font-display-regular);
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--b2p-text);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.b2p-gz-g nav.b2p-gz-sprung a:hover,
.b2p-gz-g nav.b2p-gz-sprung a:focus-visible {
    background: var(--b2p-accent);
}

/* Sprungziele nicht unter der feststehenden Menueleiste verstecken. */
.b2p-gz-g [id] {
    scroll-margin-top: 90px;
}

/* Gespraeche: Textspalte mit lesbarer Zeilenlaenge, der Kernsatz gross. */
.b2p-gz-g .b2p-gz-spalte {
    max-width: 760px;
    margin-top: 32px;
}

.b2p-gz-g p.b2p-gz-gross {
    font-family: var(--b2p-font-display-regular);
    font-weight: normal;
    font-size: 30px !important;
    line-height: 1.25 !important;
    margin: 8px 0 !important;
}

/* Karten: Link unten, Abstand nach oben wie die Absaetze. */
.b2p-gz-g .b2p-gz-weiter a {
    font-family: var(--b2p-font-display-regular);
    font-size: 18px;
    color: var(--b2p-red);
    text-decoration: none;
}

.b2p-gz-g .b2p-gz-weiter a::after {
    content: " →";
}

.b2p-gz-g .b2p-gz-weiter a:hover {
    text-decoration: underline;
}

.b2p-gz-g .b2p-warum-karte {
    display: flex;
    flex-direction: column;
}

.b2p-gz-g .b2p-warum-karte .b2p-gz-weiter {
    margin-top: auto !important;
    padding-top: 18px;
}

/* Gelbes Band "bezahlte Folgen": Kernsatz gross wie das Zitat auf der
   Warum-Seite, darunter die Folgen als weisse Karten mit Titelbild. */
.b2p-gz-g .b2p-gz-bezahlt h2 {
    font-size: 40px;
}

.b2p-gz-g p.b2p-gz-statement {
    max-width: 860px;
    margin: 28px auto 0 !important;
    font-family: var(--b2p-font-display-regular);
    font-size: 36px !important;
    line-height: 1.2 !important;
    color: var(--b2p-dark);
}

.b2p-gz-g p.b2p-gz-statement-sub {
    max-width: 640px;
    margin: 20px auto 0 !important;
    color: #4a4840;
}

.b2p-gz-g h3.b2p-gz-zwischen {
    margin-top: 56px !important;
    font-size: 24px;
}

.b2p-gz-g .b2p-gz-folgen {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
    margin: 22px auto 0;
    text-align: left;
}

/* Querformat-Zeile: kleines Titelbild links, Titel und Angabe rechts.
   Grosse Quadrate haben das Band erschlagen. */
.b2p-gz-g a.b2p-gz-folge {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 18px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    color: var(--b2p-text) !important;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.b2p-gz-g a.b2p-gz-folge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.b2p-gz-g a.b2p-gz-folge img {
    flex: 0 0 88px;
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 10px;
    object-fit: cover;
}

.b2p-gz-g .b2p-gz-folge__text {
    display: block;
    min-width: 0;
}

.b2p-gz-g .b2p-gz-folge__titel {
    display: block;
    font-family: var(--b2p-font-display);
    font-size: 19px;
    line-height: 1.2;
    color: var(--b2p-dark);
}

.b2p-gz-g .b2p-gz-folge__angabe {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.4;
    color: #6b6b66;
}

/* KI und Fehler: zwei Karten, Ueberschriften bleiben h2 fuer die
   Gliederung, aber in Kartengroesse. */
.b2p-gz-g .b2p-gz-zwei {
    margin-top: 0;
}

.b2p-gz-g h2.b2p-gz-h2-karte {
    font-size: 30px;
}

/* Quellen: Titel als Link in Rot, Herkunft darunter in Grau. */
.b2p-gz-g .b2p-warum-faq-item h3 a {
    color: var(--b2p-red);
    text-decoration: none;
}

.b2p-gz-g .b2p-warum-faq-item h3 a:hover {
    text-decoration: underline;
}

.b2p-gz-g .b2p-warum-faq-item p {
    font-size: 16px !important;
    color: #6b6b66;
}

/* Londrina Solid hat kein Paragrafenzeichen, das § blieb leer. Es steht
   deshalb in der Textschrift, fett, damit es neben Londrina nicht duenn wirkt. */
.b2p-gz-g .b2p-gz-para {
    font-family: var(--b2p-font-body);
    font-weight: 700;
    margin-right: 0.15em;
}

/* Kontakt: lange Mailadresse im Knopf darf am Handy umbrechen. */
.b2p-gz-g .b2p-warum-btn--voll {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .b2p-gz-g p.b2p-gz-statement { font-size: 30px !important; }
}

@media (max-width: 760px) {
    .b2p-gz-g a.b2p-gz-folge img { flex-basis: 64px; width: 64px; height: 64px; }
    .b2p-gz-g .b2p-gz-folge__titel { font-size: 17px; }
    .b2p-gz-g .b2p-gz-bezahlt h2 { font-size: 32px; }
    .b2p-gz-g p.b2p-gz-statement { font-size: 26px !important; }
    .b2p-gz-g p.b2p-gz-gross { font-size: 24px !important; }
    .b2p-gz-g h2.b2p-gz-h2-karte { font-size: 26px; }
    .b2p-gz-g .b2p-warum-btn--voll { font-size: 20px; padding: 14px 24px; }
}


/* ─── Zusammenarbeit ──────────────────────────────────────────────── */

.b2p-gz h3.b2p-gz-h3 {
    margin-top: 26px;
}

/* "Weg 1" / "Weg 2" ueber der Ueberschrift, gleiche Pille wie die
   Blocktitel der Tourismus-Seite. */
.b2p-gz .b2p-gz-weg {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 14px;
    border-radius: 40px;
    background: var(--b2p-accent);
    color: var(--b2p-dark);
    font-family: var(--b2p-font-display-regular);
    font-size: 17px;
    line-height: 1.3;
}

/* Erster Block direkt unter dem Kartenraster braucht Abstand nach oben,
   die folgenden bekommen ihn samt Trennlinie aus tourismus.css. */
.b2p-gz .b2p-tour-module__grid + .b2p-gz-block {
    margin-top: 34px;
}

.b2p-gz .b2p-tour-card__body h4 {
    font-size: 20px;
}

.b2p-gz .b2p-gz-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.b2p-gz .b2p-tour-kontakt .b2p-gz-buttons {
    justify-content: center;
}

/* Lange Mailadresse im Knopf darf am Handy umbrechen. */
.b2p-gz .b2p-gz-buttons .b2p-tour-btn {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
}

.b2p-gz .b2p-gz-weiter a {
    font-family: var(--b2p-font-display-regular);
    font-size: 18px;
    text-decoration: none;
}

.b2p-gz .b2p-gz-weiter a::after {
    content: " →";
}

.b2p-gz .b2p-gz-weiter a:hover {
    text-decoration: underline;
}

/* Text im dunklen Schlussblock mittig und nicht zu breit. */
.b2p-gz .b2p-tour-kontakt p {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Der dunkle Schlussblock ist eine Karte wie alle anderen Abschnitte und
   braucht deshalb Luft zum ebenfalls dunklen Footer. Ohne Abstand klebte
   er am Footer und wirkte wie ein Teil davon. */
.b2p-gz > section:last-child {
    margin-bottom: 56px;
}

@media (max-width: 699px) {
    .b2p-gz > section:last-child {
        margin-bottom: 32px;
    }
}


/* ─── Beide ───────────────────────────────────────────────────────── */

/* Weisse Streifen ueber und unter der Seite entfernen, wie bei Tourismus
   und Warum (dort per page-id). Hier ueber :has(), damit beide Seiten
   erfasst sind, ohne IDs fest einzutragen. */
body:has(.b2p-gz, .b2p-gz-g) .et_pb_section_0 > .et_pb_row_0.et_pb_row,
body:has(.b2p-gz, .b2p-gz-g) .et_pb_section_0.et_pb_section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}