/* ===================================================================
   Landingpage "Content fuer Tourismusregionen" – Shortcode [tourismus]
   Alle Regeln sind auf .b2p-tour gescopet, damit sie keine andere
   Seite beeinflussen koennen.
   Farben/Schriften kommen aus den Variablen in mdg.css.
   =================================================================== */

.b2p-tour {
    max-width: 1080px;
    margin: 0 auto;
    font-family: var(--b2p-font-body);
    color: var(--b2p-text);
}

/* Der Hintergrund kommt bewusst ueber die Variable --tour-bg und nicht ueber
   eigene Section-Regeln: ".b2p-tour section" ist spezifischer als eine
   einzelne Abschnittsklasse und wuerde deren Farbe sonst ueberschreiben. */
.b2p-tour section {
    padding: 32px 22px;
    margin-bottom: 22px;
    border-radius: 14px;
    background: var(--tour-bg, #fff);
}

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

.b2p-tour h1 { font-size: 34px; }
.b2p-tour h2 { font-size: 27px; }
.b2p-tour h3 { font-size: 21px; }
.b2p-tour h4 { font-size: 19px; }

.b2p-tour p {
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 14px;
}

.b2p-tour p:last-child { margin-bottom: 0; }

.b2p-tour .b2p-tour-sub {
    margin-top: -6px;
    margin-bottom: 22px;
    color: #6b6b66;
}

.b2p-tour a { color: var(--b2p-red); }

.b2p-tour img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Hero ---------- */

.b2p-tour-hero {
    --tour-bg: var(--b2p-cream-light);
}

.b2p-tour-hero__media {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.b2p-tour-hero__media img {
    object-fit: cover;
}

.b2p-tour .b2p-tour-lead {
    font-size: 19px;
    line-height: 1.5;
}

.b2p-tour-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.b2p-tour-btn {
    display: inline-block;
    padding: 12px 22px;
    border: 2px solid var(--b2p-red);
    border-radius: 40px;
    background: var(--b2p-red);
    color: var(--b2p-cream-light) !important;
    font-family: var(--b2p-font-display-regular);
    font-size: 19px;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.b2p-tour-btn:hover {
    background: var(--b2p-dark);
    border-color: var(--b2p-dark);
}

.b2p-tour-btn--ghost {
    background: transparent;
    color: var(--b2p-red) !important;
}

.b2p-tour-btn--ghost:hover {
    background: var(--b2p-dark);
    border-color: var(--b2p-dark);
    color: var(--b2p-cream-light) !important;
}

/* ---------- Nutzen ---------- */

.b2p-tour-nutzen {
    --tour-bg: var(--b2p-cream-warm);
}

.b2p-tour-nutzen__grid {
    display: grid;
    gap: 22px;
}

.b2p-tour-nutzen__grid h3 {
    padding-bottom: 8px;
    border-bottom: 3px solid var(--b2p-accent);
}

/* ---------- Module ---------- */

.b2p-tour-module__grid {
    display: grid;
    gap: 18px;
}

.b2p-tour-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e6e2d6;
    border-radius: 12px;
    background: var(--b2p-cream-light);
}

.b2p-tour-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 0;
}

.b2p-tour-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--b2p-accent);
    color: var(--b2p-dark);
}

/* Rueckfall-SVGs: durchgehende Linien, keine Flaechen. Das eingesetzte
   Bild-Icon bekommt dieselbe Groesse. */
.b2p-tour-card__icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.b2p-tour-card__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Schreibweise "#1" wie im PDF-Portfolio, damit Unterlage und Seite dieselbe
   Sprache sprechen. Der Kreis faellt dafuer weg. */
.b2p-tour-card__nr {
    color: var(--b2p-dark);
    font-family: var(--b2p-font-display);
    font-size: 25px;
    line-height: 1;
}

.b2p-tour-card__body {
    padding: 14px 18px 20px;
}

.b2p-tour-card__body p {
    font-size: 16px;
}

/* ---------- Galerie ---------- */

.b2p-tour-galerie {
    --tour-bg: var(--b2p-dark);
}

.b2p-tour-galerie h2 { color: var(--b2p-accent); }
.b2p-tour-galerie .b2p-tour-sub { color: #b9b5a8; }

.b2p-tour-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.b2p-tour-filter__btn {
    padding: 8px 16px;
    border: 2px solid #55534d;
    border-radius: 40px;
    background: transparent;
    color: var(--b2p-cream-light);
    font-family: var(--b2p-font-display-regular);
    font-size: 17px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.b2p-tour-filter__btn:hover {
    border-color: var(--b2p-accent);
}

.b2p-tour-filter__btn.is-aktiv {
    border-color: var(--b2p-accent);
    background: var(--b2p-accent);
    color: var(--b2p-dark);
}

.b2p-tour-fotos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.b2p-tour-foto {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #3a3935;
}

.b2p-tour-foto a {
    display: block;
    line-height: 0;
}

.b2p-tour-foto img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .25s ease;
}

.b2p-tour-foto a:hover img { transform: scale(1.04); }

/* Bildnachweis einmal unter der Galerie statt unter jedem Foto. */
.b2p-tour .b2p-tour-credit {
    margin-top: 14px;
    font-size: 13px;
    color: #b9b5a8;
}

/* ---------- Referenz ---------- */

.b2p-tour-referenz {
    --tour-bg: var(--b2p-cream-light);
}

.b2p-tour-quote {
    display: grid;
    gap: 18px;
    margin: 0 0 28px;
    padding: 22px 24px;
    border-left: 6px solid var(--b2p-accent);
    background: #fff;
    border-radius: 0 12px 12px 0;
}

.b2p-tour-quote__person img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

/* Das Logo steht unter dem Portrait und nicht im Text: Foto, Name, Agentur und
   Logo gehoeren zusammen, im Fliesstext haengt es sonst frei in der Zeile. */
.b2p-tour-quote__logo {
    display: block;
    margin-top: 12px;
    text-align: center;
}

.b2p-tour-quote__logo img {
    display: inline-block;
    width: auto;
    max-width: 120px;
    max-height: 54px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.b2p-tour-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

.b2p-tour-quote blockquote p {
    font-size: 19px;
    font-style: italic;
    line-height: 1.5;
}

.b2p-tour-quote figcaption {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.45;
}

.b2p-tour-quote figcaption strong,
.b2p-tour-quote figcaption span {
    display: block;
}

.b2p-tour-quote figcaption span { color: #6b6b66; }

.b2p-tour-referenz__h3 { margin-bottom: 16px; }

.b2p-tour-folgen {
    display: grid;
    gap: 18px;
    max-width: 720px;
}

.b2p-tour-folge {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: var(--b2p-text) !important;
}

.b2p-tour-folge img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.b2p-tour-folge__titel {
    display: block;
    padding: 14px 16px 0;
    font-family: var(--b2p-font-display);
    font-size: 19px;
    line-height: 1.2;
    color: var(--b2p-dark);
}

.b2p-tour-folge__link {
    display: block;
    padding: 8px 16px 16px;
    color: var(--b2p-red);
    font-size: 16px;
}

.b2p-tour-folge:hover .b2p-tour-folge__link { text-decoration: underline; }

/* ---------- Belege ---------- */

.b2p-tour .b2p-tour-belege ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.b2p-tour-belege li {
    position: relative;
    padding: 0 0 10px 26px;
    font-size: 17px;
    line-height: 1.5;
}

.b2p-tour-belege li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--b2p-accent);
}

/* ---------- Rechte ---------- */

.b2p-tour-rechte {
    --tour-bg: var(--b2p-cream-warm);
}

/* Zwei getrennte Unterbloecke: Nutzungsrechte und redaktionelle
   Unabhaengigkeit sind zwei verschiedene Zusagen und duerfen nicht als vier
   gleichrangige Karten nebeneinanderstehen. */
.b2p-tour-block + .b2p-tour-block {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid #ddd6c0;
}

.b2p-tour .b2p-tour-block__titel {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 14px;
    border-radius: 40px;
    background: var(--b2p-accent);
    font-size: 20px;
}

.b2p-tour .b2p-tour-block__lead {
    margin-bottom: 18px;
    font-size: 17px;
    color: #5f5c55;
}

.b2p-tour-rechte__grid {
    display: grid;
    gap: 20px;
}

.b2p-tour-rechte__grid article {
    padding: 20px;
    border: 1px solid #e2dcc9;
    border-radius: 12px;
    background: #fff;
}

.b2p-tour-rechte__grid p { font-size: 16px; }

/* ---------- Kontakt ---------- */

.b2p-tour-kontakt {
    --tour-bg: var(--b2p-dark);
    text-align: center;
}

.b2p-tour-kontakt h2 { color: var(--b2p-accent); }
.b2p-tour-kontakt p { color: var(--b2p-cream-light); }

.b2p-tour-kontakt__daten {
    margin-top: 22px;
    font-size: 21px;
    line-height: 1.6;
}

.b2p-tour-kontakt__daten strong,
.b2p-tour-kontakt__daten a {
    display: block;
}

.b2p-tour-kontakt__daten strong {
    font-family: var(--b2p-font-display);
    font-size: 25px;
    color: var(--b2p-cream-light);
}

.b2p-tour-kontakt__daten a { color: var(--b2p-accent) !important; }

.b2p-tour-kontakt__foto {
    margin-top: 24px;
}

.b2p-tour-kontakt__foto img {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid var(--b2p-accent);
    object-fit: cover;
}

.b2p-tour-kontakt__pdf {
    margin-top: 26px;
}

/* Heller Button fuer den dunklen Kontaktblock. Bewusst als Umriss und nicht
   gefuellt: das PDF ist das zweite Angebot, der Anruf bleibt das erste. */
.b2p-tour-btn--hell {
    border-color: var(--b2p-cream-light);
    background: transparent;
    color: var(--b2p-cream-light) !important;
    font-size: 17px;
}

.b2p-tour-btn--hell:hover {
    background: var(--b2p-cream-light);
    border-color: var(--b2p-cream-light);
    color: var(--b2p-dark) !important;
}

/* ---------- ab Tablet ---------- */

@media (min-width: 700px) {

    .b2p-tour section {
        padding: 44px 38px;
        margin-bottom: 26px;
    }

    .b2p-tour h1 { font-size: 46px; }
    .b2p-tour h2 { font-size: 34px; }

    .b2p-tour .b2p-tour-lead { font-size: 21px; }

    .b2p-tour-nutzen__grid,
    .b2p-tour-rechte__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Die gelben Linien unter den drei Ueberschriften muessen auf einer Hoehe
       sitzen, auch wenn eine Ueberschrift umbricht. Subgrid gibt allen
       Ueberschriften dieselbe Zeilenhoehe, unabhaengig von Textlaenge und
       Schriftgroesse. Eine feste Mindesthoehe hat hier vorher versagt, weil
       sie den Innenabstand von 8px nicht mitgerechnet hat. */
    .b2p-tour-nutzen__grid {
        grid-template-rows: auto auto;
    }

    .b2p-tour-nutzen__grid article {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }

    @supports not (grid-template-rows: subgrid) {
        .b2p-tour-nutzen__grid h3 {
            min-height: calc(2.2em + 8px);
        }
    }

    .b2p-tour-module__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .b2p-tour-folgen {
        grid-template-columns: repeat(2, 1fr);
    }

    .b2p-tour-fotos {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .b2p-tour-quote {
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 24px;
        padding: 28px 30px;
    }
}

/* ---------- ab Desktop ---------- */

@media (min-width: 1000px) {

    .b2p-tour-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 36px;
        align-items: center;
    }

    .b2p-tour-hero__media {
        order: 2;
        margin-bottom: 0;
    }

    /* Kein erzwungenes Seitenverhaeltnis: das Titelbild ist quer, ein
       Hochformat-Zuschnitt wuerde es zerschneiden. */
    .b2p-tour-hero__media img { aspect-ratio: auto; }

    .b2p-tour-nutzen__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .b2p-tour-module__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .b2p-tour-fotos {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

   Gleiche Ursache wie auf der Warum-Seite (Commit c38be56): die Divi-Zeile,
   in der das Textmodul mit [tourismus] sitzt, bringt 30px Innenabstand oben
   und unten mit, und die Section dahinter ist weiss.

   Hier kam unten noch etwas dazu: alle Abschnitte haben 22px Abstand nach
   unten (siehe ".b2p-tour section" oben). Beim letzten Abschnitt - dem
   dunklen Kontaktblock - ragt dieser Abstand aus der Seite heraus und legt
   sich als zweiter weisser Streifen vor den Footer. Zwischen den Abschnitten
   ist der Abstand gewollt, nur nach dem letzten nicht.

   Oben faellt es weniger auf als auf der Warum-Seite, weil Header und erster
   Abschnitt beide creme sind - der weisse Streifen trennt dort zwei gleich
   gefaerbte Flaechen.
   --------------------------------------------------------------------------- */

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

.b2p-tour > section:last-child {
    margin-bottom: 0;
}

/* Wie auf der Warum-Seite: ab 981px kommt der Streifen vom Standard-
   Innenabstand der Divi-Section (4%, rund 51px bei 1280px Breite). */
body.page-id-25118100 .et_pb_section_0.et_pb_section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}