.pageTitle {
display: none;}


/* ============================================================================
   PFOTENLIEBE / KUTEGO — MAIN STYLESHEET (CLEANED & RESTRUCTURED)
   ----------------------------------------------------------------------------
   Brand colors:
     #48afb4  primary turquoise   (CTA, headings)
     #3ccccc  light turquoise     (accent, hero gradient)
     #c61c96  brand pink          (emphasis, secondary CTA)
     #b45309  amber eyebrow       (kicker / eyebrow labels)
     #0f172a  ink                 (dark text / dark buttons)
     #475569  body text
     #424242  neutral dark        (legacy text color)

   Typography: 'Sour Gummy' (display) + 'Roboto Condensed' (legacy fallback)
   Layout target: max-width 1200px, edge gutters 24px desktop / 18px mobile
   ============================================================================ */


/* ============================================================================
   1. BASE / GLOBAL PERFORMANCE
   ============================================================================ */

/* Make images fluid by default */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy-render off-screen sections (Chrome/Edge) — first section stays eager
   so the hero never gets clipped during initial paint */
section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 700px;
}

section:first-of-type {
    content-visibility: visible;
}

/* Honour the user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}


/* ============================================================================
   2. WEBFONTS (self-hosted)
   ----------------------------------------------------------------------------
   NOTE: The first @font-face in the source had a stray "f f" token after the
   opening brace which broke the declaration. Removed here. The font-family
   "Roboto Condensed" is loaded from the same WOFF2 file as "Sour Gummy" in
   the source, which is suspicious — verify the file path is correct.
   ============================================================================ */

/* Roboto Condensed — cyrillic-ext (legacy fallback face) */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/templates/fonts/sourgummy_0ca9d9df6f7ce99297fa411f2dd4779d.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sour Gummy — italic, variable weight, latin */
@font-face {
    font-family: 'Sour Gummy';
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(/templates/fonts/sourgummy_d01653dd7309cade193d61b1a4fccfbd.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sour Gummy — normal, latin-ext */
@font-face {
    font-family: 'Sour Gummy';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(/templates/fonts/sourgummy_6e81561be3b02abc9cf10f83565f9388.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sour Gummy — normal, latin (primary face used on the site) */
@font-face {
    font-family: 'Sour Gummy';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(/templates/fonts/sourgummy_52c51f90cf08d9741fa8cf2795e6f415.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================================
   3. TYPOGRAPHY DEFAULTS
   ----------------------------------------------------------------------------
   Display headings use 'Sour Gummy'. h4 falls back to inherited body font
   for a calmer hierarchy.
   ============================================================================ */

h1 {
    font-family: 'Sour Gummy';
    font-size: 2em;
    color: #48afb4;
    font-weight: 600; /* "semibold" is not a valid CSS keyword — use 600 */
}

h2 {
    font-family: 'Sour Gummy';
    font-size: 1.8em;
    color: #c61c96;
}

h3 {
    font-family: 'Sour Gummy';
    font-size: 1.6em;
    color: #3ccccc;
}

h4 {
    font-size: 1.4em;
    color: #424242;
}

p,
ul {
    font-size: 1.2em;
    color: #424242;
}

.list      { font-size: 1em;   color: #424242; }
.signatur  { color: #000; }
.small     { font-size: 0.8em; color: #c61c96; }


/* ============================================================================
   4. PAGE-LEVEL BACKGROUNDS (controller-specific)
   ----------------------------------------------------------------------------
   NOTE: The source contained three occurrences of "ody.controller-..."
   (missing leading "b"). Fixed to "body.controller-..." so the rules apply.
   Also: a stray "body { background: red !important; }" was found in the FAQ
   block — that was clearly debug code and has been REMOVED.
   ============================================================================ */

body.controller-index.action-index,
body.controller-test-startseite {
    background-color: #424242;
}

body.controller-onlinekurse-fichtlmeier,
body.controller-die-methode,
body.controller-isabel-scheu {
    background-color: #d1d5db;
}


/* ============================================================================
   5. POPUP / MODAL OVERLAY
   ============================================================================ */

.popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;              /* toggled to flex via JS when opened */
    justify-content: center;
    align-items: center;
}

.popup {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.popup button { margin-top: 10px; }


/* ============================================================================
   6. ROUNDED-CORNER UTILITIES & THEMED SECTIONS
   ----------------------------------------------------------------------------
   Generic "round all corners" rules for legacy classes from the homepage
   template, plus full-bleed section helpers and the three brand background
   variants (hell / dunkel / black).
   ============================================================================ */

/* Default rounded corners for legacy card/image classes */
.is-card,
.is-dark-text,
.shadow-1 {
    border-radius: 10px;
}

/* Full-bleed sections that break out of a constrained parent container */
.full-width,
.section-hell,
.section-dunkel,
.section-black,
.section-image,
.section-yellow.elm-active,
.section-image.elm-active {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Section background variants — light/dark turquoise + neutral black */
.background-hell,
.section-hell,
.section-hell.elm-active,
.header-slider .slick-slider .circle-blue {
    background: #3ccccc;
    color: #fff;
}

.background-dunkel,
.section-dunkel,
.section-dunkel.elm-active {
    background: #48afb4;
    color: #fff;
}

.background-black,
.section-black,
.section-black.elm-active {
    background: #424242;
    color: #fff;
}


/* ============================================================================
   7. IMAGE / CAROUSEL ROUNDING
   ----------------------------------------------------------------------------
   The site rounds nearly every image to 10px. Logos keep square corners.
   ============================================================================ */

/* Course-image carousel — fixed square frame */
.carousel-inner:not(:where([data-module] *)) {
    position: relative;
    width: 350px !important;
    height: 350px !important;
    overflow: hidden;
    border-radius: 10px;
}

.img-responsive:not(:where([data-module] *)),
.img:not(:where([data-module] *)),
.main img:not(:where([data-module] *)),
.main a.thumbnail:not(:where([data-module] *)) {
    border-radius: 10px;
}

/* Team thumbnails: rounded + neutral placeholder background */
.front-team .thumbnail:not(:where([data-module] *)) {
    text-align: center;
    border-radius: 10px;
    background-color: #c6c6c6;
}

/* The logo image must remain square and shadow-less */
.logo.img-responsive {
    border-radius: 0;
    box-shadow: none;
}


/* ============================================================================
   8. PROVENEXPERT WIDGET
   ----------------------------------------------------------------------------
   On phones: scale the floating badge down and hide the wider top bar that
   would otherwise overlap the sticky CTA. On desktop reserve 44px at the
   bottom of <html> so the widget bar never covers page content.
   ============================================================================ */

@media (min-width: 768px) {
    html { padding-bottom: 44px; box-sizing: border-box; }
}

@media (max-width: 767px) {
    #ProvenExpert_widgetbar_container { display: none !important; }
}

@media (max-width: 768px) {
    .provenexpert-widget {
        bottom: 10px;
        right: 10px;
        transform: scale(0.8);
    }
}


/* ============================================================================
   9. NYMPHEA SLIDER (controller-specific override)
   ----------------------------------------------------------------------------
   Forces a 500x500 square stage regardless of the slick defaults.
   ============================================================================ */

.controller-nymphea .slick-slider,
.controller-nymphea .slider-on-content,
.controller-nymphea .slick-slider .slick-list {
    width: 500px !important;
    height: 500px !important;
    margin: 0 auto;
}

.controller-nymphea div[data-module="slider"] { width: 100% !important; }


/* ============================================================================
   10. CHRISTMAS / ADVENT CALENDAR
   ----------------------------------------------------------------------------
   Seasonal feature: 24 doors that flip open on click. The .door element has
   a back face via ::after so it shows a colored interior when rotated.
   ============================================================================ */

.christmas-calendar { padding-bottom: 50px; }

.christmas-calendar .title {
    text-align: center;
    letter-spacing: 0.3vw;
    font-size: 10vw;
    line-height: 1;
    padding-top: 30px;
    margin: 0 auto 30px;
}

@media screen and (min-width: 440px) {
    .christmas-calendar .title { letter-spacing: 3px; font-size: 3em; }
}

@media screen and (min-width: 768px) {
    .christmas-calendar .title { letter-spacing: 4px; font-size: 4em; }
}

/* Responsive grid: 3 cols → 4 cols → 5 cols at the wider breakpoints */
.christmas-grid {
    padding: 20px;
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 3vw;
    perspective: 1500px;
}

@media screen and (min-width: 440px) { .christmas-grid { grid-template-columns: 1fr 1fr 1fr;       grid-gap: 16px; } }
@media screen and (min-width: 600px) { .christmas-grid { grid-template-columns: 1fr 1fr 1fr 1fr;   grid-gap: 20px; } }
@media screen and (min-width: 768px) { .christmas-grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } }

/* Day cell — frosted glass inset shadow */
.christmas-grid .day {
    min-height: 123px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 0 20px rgba(80, 80, 120, 0.5) inset,
                0 0 5px 2px rgba(80, 80, 120, 0.3) inset;
}

/* Day 24 (last cell) centers itself on narrow viewports */
.christmas-grid .day:nth-last-child(1) { grid-column: 2; }

@media screen and (min-width: 600px) {
    .christmas-grid .day:nth-last-child(1) { left: calc(50% + 10px); }
}

@media screen and (min-width: 768px) {
    .christmas-grid .day:nth-last-child(1) { grid-column: unset; left: unset; }
}

/* The door itself — flips around its left edge on open */
.christmas-grid .door {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background-color: #3ccccc;
    background-image: linear-gradient(45deg,
        #fff, transparent 5%, transparent 45%,
        #fff 50%, transparent 55%, transparent 95%, #fff 100%);
    background-size: 20px 20px;
    transform-origin: left center;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
}

/* Inside face of the door (visible once rotated) */
.christmas-grid .door::after {
    content: "";
    position: absolute;
    width: 100%; height: 100%;
    background: #aa0a0a;
    transform: translateZ(-1px);
}

.christmas-grid .openable { cursor: pointer; }

/* When open: bring the door above the rest and (optionally) play the
   animation defined below. Animation is currently disabled in the source. */
.christmas-grid .open,
.editable-content .christmas-grid .door {
    z-index: 100;
    /* animation: open-door 1s forwards; */
}

@-webkit-keyframes open-door {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(-90deg); z-index: 200; }
}

@keyframes open-door {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(-90deg); z-index: 200; }
}

/* Number badge in the top-right corner of each door */
.christmas-grid .number {
    position: absolute;
    top: 6px; right: 6px;
    text-align: center;
    color: #fff;
    font-size: 5vw;
    font-weight: 600;
    min-width: 50px;
    background: #c61c96;
    padding: 5px 7px;
    border-radius: 50%;
}

@media screen and (min-width: 440px) { .christmas-grid .number { font-size: 1.5em; } }
@media screen and (min-width: 768px) { .christmas-grid .number { font-size: 1.8em; } }

/* Hidden surprise image behind each door — shown when day is open */
.christmas-grid img {
    position: absolute;
    width: 100%; height: 100%;
    background-color: #48afb4;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    border-radius: 0 !important;
    z-index: -1;
    display: none;
}

.christmas-grid .open img,
.editable-content .christmas-grid .door img { display: block; }

.editable-content .christmas-grid .door .number,
.christmas-grid .open .number { display: none !important; }


/* ============================================================================
   11. TAB NAVIGATION (Bootstrap nav-tabs override)
   ============================================================================ */

.nav-tabs:not(:where([data-module] *)) {
    border: none;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.nav-tabs > li > a:not(:where([data-module] *)) {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    padding: 12px 20px;
    border-radius: 16px;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.25s ease;
}

.nav-tabs > li > a:hover:not(:where([data-module] *)) {
    background: #fff;
    border-color: #48afb4;
    color: #48afb4;
}

.nav-tabs > li.active > a:not(:where([data-module] *)),
.nav-tabs > li.active > a:focus:not(:where([data-module] *)),
.nav-tabs > li.active > a:hover:not(:where([data-module] *)) {
    background: #48afb4;
    color: #fff;
}


/* ============================================================================
   12. CORE LAYOUT PRIMITIVES (Pfotenliebe design system)
   ----------------------------------------------------------------------------
   .pfoten-section is the standard width-constrained section.
   .pfoten-card is the white card with brand shadow.
   .pfoten-btn comes in three brand variants (dark / turquoise / pink).
   ============================================================================ */

.pfoten-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 24px;     /* compact rhythm — original default */
}

/* Narrow content rail used inside .pfoten-section (e.g. long-form copy) */
.pfoten-narrow {
    max-width: 920px;
    margin: 0 auto;
}

/* Optional: pages with lighter content can opt into more breathing room */
.pfoten-section--spacious { padding: 72px 24px; }

.pfoten-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;    /* dominant value across the site — was 18px on the courses list */
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

/* Optional: tighter card variant used on the dense courses-list page */
.pfoten-card--sm { border-radius: 18px; }

.pfoten-card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pfoten-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: rgba(15, 23, 42, 0.14) 0px 22px 38px !important;
}

.pfoten-card-bar {
    height: 6px;
    background: #48afb4;
    width: 100%;
}

.pfoten-card-inner { padding: 24px; }

/* Grid variants */
.pfoten-grid-2       { display: grid; grid-template-columns: 1.1fr 1fr;       gap: 48px; align-items: center; }
.pfoten-grid-2-small { display: grid; grid-template-columns: repeat(2, 1fr);  gap: 24px; }
.pfoten-grid-3       { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 24px; }
.pfoten-info-grid    { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 12px; }

/* Brand buttons */
.pfoten-btn {
    display: inline-block;
    padding: 16px 24px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 700;
}

.pfoten-btn-dark      { background: #0f172a; color: #fff; }
.pfoten-btn-turquoise { background: #48afb4; color: #fff; box-shadow: 0 10px 24px rgba(72, 175, 180, 0.25); }
.pfoten-btn-pink      { background: #c61c96; color: #fff; }

/* Generic hover for any card-like block */
.pfoten-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pfoten-hover:hover {
    transform: translateY(-6px);
    box-shadow: rgba(15, 23, 42, 0.14) 0px 22px 38px !important;
}

/* Eyebrow / kicker label that sits above each section heading.
   The !important overrides are deliberate — they neutralise inherited
   typography from generic <p> rules elsewhere (uppercase, bold, etc.). */
.pfoten-eyebrow {
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    color: #b45309 !important;
    margin: 0 0 12px !important;
    text-transform: none !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

/* Intro block (eyebrow + h2 + lead paragraph) */
.pfoten-intro       { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.pfoten-intro h2    { font-size: 38px; font-weight: 700; margin: 0 0 16px; color: #c61c96; line-height: 1.15; }
.pfoten-intro p:not(.pfoten-eyebrow) {
    font-size: 19px;
    color: #475569;
    margin: 0;
    line-height: 1.75;
}

/* Long-form body text inside a card */
.pfoten-text {
    font-size: 17px;
    color: #475569;
    line-height: 1.85;
    margin: 0 0 18px;
}

/* ----------------------------------------------------------------------------
   Philosophie / "Die Methode" page grids — same as .pfoten-grid-2-small and
   .pfoten-grid-3, but with their own constrained max-width and centred margin
   so the rows don't span the full 1200px section width.
   ---------------------------------------------------------------------------- */
.philo-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.philo-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Alignment utilities */
.text-center  { text-align: center; }
.text-justify { text-align: justify; }


/* ============================================================================
   13. WELPEN CARDS
   ============================================================================ */

.welpen-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.welpen-card:hover {
    transform: translateY(-6px);
    box-shadow: rgba(15, 23, 42, 0.14) 0px 22px 38px !important;
}


/* ============================================================================
   14. TRUST BOX (3-column proof / metric strip)
   ============================================================================ */

.trust-section {
    max-width: 1100px;
    margin: 0 auto 24px;
    padding: 0 24px;
}

.trust-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.trust-quote {
    grid-column: 1 / -1;
    border-top: 1px solid #e2e8f0;
    margin-top: 12px;
    padding-top: 18px;
}


/* ============================================================================
   15. ABOUT CARDS (Isabel Scheu page)
   ----------------------------------------------------------------------------
   Used on the /isabel-scheu/ profile page — card with a turquoise top bar
   that shifts to mint on hover.
   ============================================================================ */

.about-card {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: all 0.25s ease;
}

.about-card-line {
    height: 6px;
    background: #48afb4;
    transition: all 0.25s ease;
}

.about-card-content { padding: 24px; }

.about-card h3 { font-size: 24px; margin: 0 0 12px; color: #0f172a; }
.about-card p  { margin: 0; color: #475569; line-height: 1.8; }

.about-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
}

.about-card:hover .about-card-line { background: #2dd4bf; }

/* Sibling variant used in the same template */
.pfotenliebe-about-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pfotenliebe-about-card:hover {
    transform: translateY(-6px);
    box-shadow: rgba(15, 23, 42, 0.14) 0px 22px 38px !important;
}


/* ============================================================================
   16. KURS CARDS — CLEAN VARIANT (white card with turquoise top stripe)
   ============================================================================ */

.kurs-card-clean {
    height: 100%;
    border: 1px solid #dbe3ea;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.kurs-card-clean:hover {
    transform: translateY(-6px);
    box-shadow: rgba(15, 23, 42, 0.14) 0px 22px 38px !important;
}

.kurs-line { height: 6px; background: #48afb4; flex-shrink: 0; }

/* ----------------------------------------------------------------------------
   .kurs-content has TWO meanings on the site and must be scoped:
     a) Inside .kurs-card-clean → padded flex column (CTA pinned to bottom)
     b) Inside .kurs-row        → plain text container next to the image
   ---------------------------------------------------------------------------- */
.kurs-card-clean .kurs-content {
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.kurs-title { font-size: 22px; margin: 0 0 10px; color: #0f172a; }
.kurs-text  { color: #475569; margin: 0 0 14px; }

/* ----------------------------------------------------------------------------
   .kurs-list also has TWO meanings:
     a) <ul class="kurs-list"> inside a card → bullet-reset list
     b) <div class="kurs-list"> on the courses overview → grid wrapper
        that holds multiple .kurs-row children
   The selectors below split by element type so both layouts can coexist.
   ---------------------------------------------------------------------------- */

/* (a) Bullet-style list inside a card */
ul.kurs-list {
    margin: 0 0 18px;
    padding-left: 0;
    list-style: none;
    color: #334155;
    line-height: 1.7;
}

/* (b) Grid container wrapping multiple .kurs-row items */
div.kurs-list {
    display: grid;
    gap: 28px;
}

.kurs-link {
    margin-top: auto;       /* push CTA to the bottom of the card */
    color: #48afb4;
    font-weight: 600;
    display: inline-block;
}


/* ============================================================================
   17. KURS ROW — LIST VARIANT (image left, text right)
   ============================================================================ */

.kurs-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: center;
    padding: 18px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kurs-row:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 45px rgba(15, 23, 42, 0.15) !important;
}

.kurs-row img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.35s ease;
}

.kurs-row:hover img { transform: scale(1.03); }

/* Row-variant text styles — only the typography, no padding or flex layout */
.kurs-row .kurs-content h3 { font-size: 28px; color: #c61c96; margin: 0 0 12px; line-height: 1.15; }
.kurs-row .kurs-content p  { font-size: 17px; color: #475569; margin: 0 0 16px; line-height: 1.55; }

.kurs-points {
    margin: 0 0 20px;
    padding-left: 20px;
    color: #475569;
    font-size: 16px;
    line-height: 1.55;
}

/* Soft pill label sitting above the row title */
.kurs-label {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(72, 175, 180, 0.15);
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

/* Floating "Empfohlen" badge over the image */
.kurs-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: #c61c96;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 999px;
    z-index: 3;
    box-shadow: 0 10px 24px rgba(198, 28, 150, 0.25);
}


/* ============================================================================
   18. AUSWAHL GRID (3-column selector tiles)
   ============================================================================ */

.auswahl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.auswahl-box     { padding: 22px; text-align: center; }
.auswahl-box h3  { color: #c61c96; margin: 0 0 10px; font-size: 22px; }
.auswahl-box p   { color: #475569; margin: 0; font-size: 16px; }


/* ============================================================================
   19. PFOTENLIEBE CARDS (generic, equal-height) + ULTRA TESTIMONIAL CARDS
   ----------------------------------------------------------------------------
   Both card families enforce 100% height so grid rows align even when text
   length varies between cards.
   ============================================================================ */

.pfotenliebe-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100% !important;
}

.pfotenliebe-card:hover {
    transform: translateY(-6px);
    box-shadow: rgba(15, 23, 42, 0.14) 0px 22px 38px !important;
}

.pfotenliebe-card > div:last-child { height: 100% !important; }

/* Testimonial card with a turquoise top bar drawn via ::before */
.testimonial-card-ultra {
    transition: transform 0.25s ease;
    height: 100% !important;
}

.testimonial-card-ultra > div {
    position: relative;
    height: 100% !important;
}

.testimonial-card-ultra > div::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 6px;
    background: #48afb4;
}

.testimonial-card-ultra:hover           { transform: translateY(-8px); }
.testimonial-card-ultra:hover > div     { box-shadow: rgba(15, 23, 42, 0.12) 0px 24px 44px !important; }


/* ============================================================================
   20. TESTIMONIAL LIST (alternate, simpler variant)
   ============================================================================ */

.testimonial-list-item            { transition: transform 0.25s ease; }
.testimonial-list-item:hover      { transform: translateY(-6px); }
.testimonial-list-item:hover > div { box-shadow: rgba(15, 23, 42, 0.12) 0px 24px 44px !important; }

.pfoten-stars {
    font-size: 14px;
    color: #f59e0b;
    letter-spacing: 2px;
    white-space: nowrap;
    font-weight: 700;
}


/* ============================================================================
   21. KUNDENSTIMMEN PREMIUM (testimonial section with Google reviews)
   ============================================================================ */

.kundenstimmen-premium {
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: linear-gradient(#f8fafc, #fff);
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    margin: 32px 24px;
}

.kundenstimmen-container { max-width: 1200px; margin: 0 auto; padding: 76px 24px; }
.kundenstimmen-header    { max-width: 860px;  margin: 0 auto 42px; }

.kundenstimmen-eyebrow {
    font-size: 13px;
    letter-spacing: 0.18em;
    color: #b45309;
    margin: 0 0 12px;
}

.kundenstimmen-header h2 {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 16px;
    color: #c61c96;
}

.kundenstimmen-header p:not(.kundenstimmen-eyebrow) {
    font-size: 20px;
    color: #475569;
    margin: 0;
    line-height: 1.7;
}

/* Trust badges row */
.kundenstimmen-badges { flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }

.kundenstimmen-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #dbe3ea;
    border-radius: 999px;
    padding: 12px 18px;
    box-shadow: rgba(15, 23, 42, 0.08) 0px 10px 22px;
}

.kundenstimmen-badge span    { font-size: 18px; }
.kundenstimmen-badge strong  { font-size: 15px; color: #0f172a; }

/* Reviews grid */
.kundenstimmen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.testimonial-premium { transition: transform 0.28s ease; }

.testimonial-inner {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.07);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.testimonial-inner::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 7px;
    background: #48afb4;
    border-radius: 28px 28px 0 0;
}

.testimonial-premium:hover                     { transform: translateY(-8px); }
.testimonial-premium:hover .testimonial-inner  { box-shadow: 0 26px 48px rgba(15, 23, 42, 0.14); }

.testimonial-top { padding: 24px 22px 0; }

/* Round avatar in three brand colors */
.testimonial-avatar {
    width: 54px; height: 54px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-turquoise { background: #48afb4; }
.avatar-dark      { background: #0f172a; }
.avatar-pink      { background: #c61c96; }

.testimonial-name   { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
.testimonial-name a { color: #0f172a; text-decoration: none; }
.testimonial-date   { margin: 4px 0 0; font-size: 14px; color: #64748b; }

.google-g           { font-size: 18px; color: #4285F4; font-weight: 700; }

.testimonial-rating       { padding: 16px 22px 0; }
.testimonial-rating span  { font-size: 14px; color: #64748b; }

.stars { font-size: 18px; color: #f59e0b; }

.testimonial-content   { padding: 18px 22px 22px; height: 100%; }
.testimonial-content p { font-size: 16px; line-height: 1.75; color: #334155; margin: 0 0 16px; }

.read-more {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 700;
    color: #c61c96;
    text-decoration: none;
}

.read-more:hover { text-decoration: underline; }

.testimonial-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.testimonial-footer span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
}

/* Bottom CTA inside the testimonials section */
.kundenstimmen-cta {
    max-width: 900px;
    margin: 46px auto 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 32px;
    padding: 36px 24px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.kundenstimmen-cta p:first-child       { font-size: 18px; color: #475569; margin: 0 0 10px; }
.kundenstimmen-cta h3                  { font-size: 30px; line-height: 1.25; margin: 0 0 16px; color: #c61c96; }
.kundenstimmen-cta p:nth-of-type(2)    { font-size: 18px; color: #64748b; margin: 0 0 24px; line-height: 1.7; }

.cta-buttons { flex-wrap: wrap; gap: 14px; }

.cta-primary,
.cta-dark {
    display: inline-block;
    padding: 16px 26px;
    color: #fff;
    text-decoration: none;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 700;
}

.cta-primary { background: #48afb4; box-shadow: 0 12px 24px rgba(72, 175, 180, 0.22); }
.cta-dark    { background: #0f172a; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18); }


/* ============================================================================
   22. ABLAUF / NUMBERED STEPS
   ============================================================================ */

.ablauf-step {
    display: flex;
    gap: 14px;
    background: rgba(255, 255, 255, 0.18);
    padding: 14px;
    border-radius: 16px;
    color: #2d2d2d;
}

.ablauf-num {
    width: 36px; height: 36px;
    background: #0f172a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cta-main {
    display: inline-block;
    padding: 18px 28px;
    background: #48afb4;
    color: #fff;
    border-radius: 18px;
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 12px 24px rgba(72, 175, 180, 0.25);
}


/* ============================================================================
   23. CONTACT — WHATSAPP BUTTON + MINI LINK GRID
   ============================================================================ */

.whatsapp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(72, 175, 180, 0.35);
}

.pfoten-mini-links {
    max-width: 900px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.pfoten-mini-link {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
}

.pfoten-mini-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    border-color: #48afb4;
}

.pfoten-mini-link h3      { margin: 0 0 6px; font-size: 16px; color: #0f172a; }
.pfoten-mini-link a       { font-size: 14px; color: #48afb4; text-decoration: none; font-weight: 600; }
.pfoten-mini-link a:hover { color: #c61c96; }


/* ============================================================================
   24. MOBILE STICKY BAR (call + WhatsApp shortcuts)
   ============================================================================ */

.mobile-sticky-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999999;
    display: none;                  /* shown via media query below */
    gap: 10px;
    padding: 12px 14px;
    background: rgba(242, 242, 242, 0.96);
    border-top: 1px solid #dbe3ea;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
}

.mobile-sticky-btn {
    flex: 1;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 14px 12px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;
}

.mobile-sticky-whatsapp { background: #48afb4; color: #fff; box-shadow: 0 10px 20px rgba(72, 175, 180, 0.22); }
.mobile-sticky-contact  { background: #0f172a; color: #fff; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18); }


/* ============================================================================
   25. GALLERY GRID (bilder-grid) — 3-column image strip with hover zoom
   ============================================================================ */

.bilder-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px 60px;
}

.bilder-header     { max-width: 700px; margin: 0 auto 30px; }
.bilder-header h2  { font-size: 32px; color: #c61c96; margin: 0 0 12px; }
.bilder-header p   { font-size: 17px; color: #475569; margin: 0; }

.bilder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bilder-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.35s cubic-bezier(.22, .61, .36, 1), box-shadow 0.35s ease;
}

.bilder-grid img:hover {
    transform: scale(1.03);
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.14);
}


/* ============================================================================
   26. LIGHTBOX (gallery overlay viewer)
   ============================================================================ */

.pfoten-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;                  /* JS toggles .active */
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.92);
}

.pfoten-lightbox.active { display: flex; }

.pfoten-lightbox-inner {
    position: relative;
    width: 100%;
    max-width: 1080px;
    text-align: center;
}

.pfoten-lightbox img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    background: #fff;
}

.pfoten-lightbox-content {
    max-width: 760px;
    margin: 16px auto 0;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    color: #fff;
    backdrop-filter: blur(8px);
}

.pfoten-lightbox-content h3 { margin: 0 0 6px; color: #fff; font-size: 22px; }
.pfoten-lightbox-content p  { margin: 0; color: #e2e8f0; font-size: 15px; line-height: 1.6; }

/* Navigation buttons (close / prev / next) */
.pfoten-lightbox-close,
.pfoten-lightbox-prev,
.pfoten-lightbox-next {
    position: absolute;
    border: none;
    cursor: pointer;
    color: #fff;
    background: #c61c96;
    box-shadow: 0 10px 24px rgba(198, 28, 150, 0.35);
}

.pfoten-lightbox-close {
    top: -18px; right: -18px;
    width: 44px; height: 44px;
    border-radius: 999px;
    font-size: 28px;
    line-height: 1;
}

.pfoten-lightbox-prev,
.pfoten-lightbox-next {
    top: 42%;
    width: 46px; height: 46px;
    border-radius: 999px;
    font-size: 30px;
    line-height: 1;
    background: #48afb4;
}

.pfoten-lightbox-prev { left:  -18px; }
.pfoten-lightbox-next { right: -18px; }


/* ============================================================================
   27. HUNDE-PROFIL CARDS (colored card grid for dog profiles)
   ============================================================================ */

.hunde-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hunde-card {
    padding: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hunde-card:hover {
    transform: translateY(-6px);
    box-shadow: rgba(15, 23, 42, 0.14) 0px 22px 38px !important;
}

.hunde-inner {
    background: #48afb4;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hunde-inner-alt { background: #3ccccc; }

.hunde-inner img {
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 18px;
    transition: transform 0.35s ease;
}

.hunde-card:hover img { transform: scale(1.03); }

.hunde-inner h3  { font-size: 24px; color: #c61c96; margin: 0 0 10px; letter-spacing: 1px; }
.hunde-inner p   { color: #0f172a; font-size: 16px; margin: 0 0 14px; line-height: 1.45; }

.hunde-story     { font-size: 15px !important; color: #475569 !important; margin: 0 0 18px !important; }
.hunde-button    { margin-top: auto; }


/* ============================================================================
   28. HERO GRID + CONTACT BOX GRID
   ============================================================================ */

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

.hero-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 28px;
    display: block;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.kontakt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.kontakt-box {
    padding: 24px;
    text-align: center;
    transition: 0.25s;
    display: flex;
    flex-direction: column;
}

.kontakt-box p     { flex-grow: 1; }
.kontakt-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 38px rgba(15, 23, 42, 0.14);
}

.kontakt-form-wrapper { margin-top: 32px; }


/* ============================================================================
   29. PARTNER PAGES (overview + detail share most styles)
   ============================================================================ */

/* Bootstrap row reset for the partner section wrappers */
.partner-overview-hero,
.partner-section {
    width: 100%;
    display: block;
}

/* Hero — shared between /partner/ overview and individual partner pages */
.partner-overview-hero,
.partner-detail-hero {
    margin: 24px;
    border-radius: 32px;
    overflow: hidden;
    background: linear-gradient(#f8fafc, #fff);
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.partner-wrap,
.partner-detail-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px;
}

.partner-badge,
.partner-detail-badge {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 10px 16px;
    border: 1px solid #c61c96;
    background: rgba(198, 28, 150, 0.08);
    border-radius: 999px;
    font-size: 14px;
    color: #c61c96;
    font-weight: 600;
}

.partner-overview-hero h1,
.partner-detail-hero h1 {
    font-size: 42px;
    color: #48afb4;
    line-height: 1.15;
    margin: 0 0 18px;
}

.partner-lead,
.partner-detail-lead {
    font-size: 18px;
    color: #475569;
    line-height: 1.8;
    max-width: 860px;
    margin: 0 auto;
}

/* Amber notice box ("Werbung / Disclosure"-style note) */
.partner-note {
    max-width: 820px;
    margin: 18px auto 0;
    padding: 14px 18px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 16px;
    color: #7c2d12;
    font-size: 15px;
    line-height: 1.7;
}

/* Pill row of quick-facts above the grid */
.partner-top-boxes,
.partner-detail-top-boxes {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

.partner-top-boxes div,
.partner-detail-top-boxes div {
    padding: 10px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    font-weight: 600;
}

.partner-section,
.partner-detail-section { padding: 32px 24px 64px; }

/* Generic intro + eyebrow shared with other pages */
.intro       { max-width: 820px; margin: 0 auto 36px; text-align: center; }
.eyebrow {
    font-size: 13px;
    letter-spacing: 0.18em;
    color: #b45309;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.intro h2    { margin: 0 0 16px; line-height: 1.15; color: #c61c96; font-size: 38px; }
.intro p     { font-size: 18px; line-height: 1.75; color: #475569; margin: 0; }

/* Grid variants (3-up default, plus 2-up and 3-up alt) */
.partner-grid,
.partner-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    width: 100%;
}

.partner-detail-grid-two   { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
.partner-detail-grid-three { grid-template-columns: repeat(3, 1fr); }

/* Partner card — gradient bg, top accent line that morphs on hover */
.partner-card,
.partner-detail-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(#fff, #f0fdfa);
    border-radius: 24px;
    overflow: hidden;
    border-top: 4px solid #48afb4;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    height: 100%;
}

.partner-card img,
.partner-detail-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.partner-card:hover,
.partner-detail-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.12);
    border-top-color: #2dd4bf;
    background: linear-gradient(#fff, #ccfbf1);
}

.partner-card:hover img,
.partner-detail-card:hover img { transform: scale(1.05); }

/* Card body — flexible column so the CTA always sits at the bottom */
.card-body,
.partner-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.kicker,
.partner-kicker {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #b45309;
    margin: 0 0 8px;
    font-weight: 700;
}

.partner-card h3,
.partner-detail-card h3 {
    margin: 0 0 12px;
    color: #48afb4;
    font-size: 23px;
    line-height: 1.3;
    min-height: 60px;        /* keep card titles aligned across the row */
}

.credit         { margin: 0 0 14px; color: #64748b; font-size: 13px; }
.card-text:not(:where([data-module] *)),
.partner-card-text { flex-grow: 1; color: #475569; line-height: 1.7; margin: 0; font-size: 16px; }
.card-benefit   { color: #0f172a; line-height: 1.7; margin: 0 0 14px; font-size: 15px; font-weight: 600; }

/* Discount-code box used inside partner cards */
.partner-code-box {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #bae6fd;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(72, 175, 180, 0.12);
}

.partner-code-box span    { display: block; font-size: 13px; color: #475569; margin-bottom: 6px; }
.partner-code-box strong  { display: block; font-size: 20px; color: #48afb4; letter-spacing: 0.04em; }

/* The CTA button at the bottom of every partner card */
.card-body > a,
.partner-card-body a,
.card-btn {
    display: inline-block;
    margin-top: auto;       /* anchored to the bottom of the flex column */
    padding: 12px 18px;
    background: #48afb4;
    color: #fff;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(72, 175, 180, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    align-self: flex-start;
}

.card-body > a:hover,
.partner-card-body a:hover,
.card-btn:hover {
    background: #2dd4bf;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(72, 175, 180, 0.35);
}

/* SEO text block underneath the partner grid */
.partner-seo-text {
    max-width: 920px;
    margin: 56px auto 0;
    padding: 34px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.partner-seo-text h2          { margin: 0 0 18px; color: #48afb4; font-size: 30px; line-height: 1.2; }
.partner-seo-text p           { margin: 0 0 18px; color: #475569; font-size: 17px; line-height: 1.8; }
.partner-seo-text p:last-child { margin-bottom: 0; }
.partner-seo-text a           { color: #48afb4; font-weight: 700; text-decoration: none; }
.partner-seo-text a:hover     { text-decoration: underline; }

/* CTA box (final block of the page) */
.partner-cta {
    max-width: 900px;
    margin: 40px auto 0;
    padding: 42px 28px;
    background: linear-gradient(135deg, rgba(198, 28, 150, 0.08), rgba(72, 175, 180, 0.12));
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
    text-align: center;
}

.partner-cta h2 { margin: 0 0 14px; color: #c61c96; font-size: 30px; line-height: 1.2; }
.partner-cta p  { max-width: 720px; margin: 0 auto 22px; color: #475569; font-size: 17px; line-height: 1.8; }

.partner-cta a {
    display: inline-block;
    padding: 14px 22px;
    background: #c61c96;
    color: #fff;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(198, 28, 150, 0.24);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.partner-cta a:hover {
    background: #48afb4;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(72, 175, 180, 0.28);
}


/* ============================================================================
   30. FAQ OVERVIEW PAGE (hero + topic cards)
   ============================================================================ */

.faq-overview-hero {
    margin: 24px;
    border-radius: 32px;
    background: linear-gradient(#f8fafc, #fff);
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.faq-wrap { max-width: 1200px; margin: 0 auto; padding: 72px 24px; }

.faq-badge {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 10px 16px;
    border: 1px solid #c61c96;
    background: rgba(198, 28, 150, 0.08);
    border-radius: 999px;
    font-size: 14px;
    color: #c61c96;
    font-weight: 600;
}

.faq-overview-hero h1 { font-size: 42px; color: #48afb4; line-height: 1.15; margin: 0 0 18px; }
.faq-lead             { font-size: 18px; color: #475569; line-height: 1.8; max-width: 860px; margin: 0 auto; }

.faq-top-boxes {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.faq-top-boxes div {
    padding: 10px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

/* Hero illustration framed in a soft card */
.faq-hero-image {
    max-width: 420px;
    margin: 32px auto 0;
    padding: 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.faq-hero-image img { width: 100%; height: auto; border-radius: 18px; }

.faq-section { padding: 32px 24px 64px; }

.faq-intro     { max-width: 800px; margin: 0 auto 36px; }
.faq-intro h2  { margin: 0 0 18px; line-height: 1.15; color: #c61c96; font-size: 36px; }
.faq-intro p   { font-size: 18px; line-height: 1.8; color: #475569; margin: 0; }

/* Topic cards grid */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}

.faq-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(#fff, #f0fdfa);
    border-radius: 24px;
    overflow: hidden;
    border-top: 4px solid #48afb4;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
    height: 100%;
    min-height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.faq-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.12);
    border-top-color: #2dd4bf;
    background: linear-gradient(#fff, #ccfbf1);
}

.faq-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.faq-card:hover img { transform: scale(1.05); }

.faq-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    padding: 20px;
    text-align: left;
}

.faq-card h3 {
    margin: 0 0 12px;
    color: #48afb4;
    font-size: 23px;
    line-height: 1.3;
    min-height: 60px;
}

.faq-card-body p { color: #475569; line-height: 1.7; margin: 0 0 24px; font-size: 16px; }

.faq-card-body > a {
    display: inline-block;
    margin-top: auto;
    padding: 12px 18px;
    background: #48afb4;
    color: #fff;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(72, 175, 180, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    align-self: flex-start;
}

.faq-card-body > a:hover {
    background: #2dd4bf;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(72, 175, 180, 0.35);
}


/* ============================================================================
   31. FAQ ACCORDION (detail page — native <details>/<summary>)
   ----------------------------------------------------------------------------
   Uses the same gradient + accent stripe as the FAQ cards. The +/– sign is
   driven by [open] selector — no JS required.
   ============================================================================ */

.faq-accordion {
    max-width: 940px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.faq-accordion details {
    background: linear-gradient(#fff, #f0fdfa);
    border: 1px solid #e2e8f0;
    border-top: 4px solid #48afb4;
    border-radius: 20px;
    margin-bottom: 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.faq-accordion summary {
    cursor: pointer;
    padding: 22px 24px;
    color: #48afb4;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;        /* hide default disclosure triangle */
}

.faq-accordion summary::-webkit-details-marker { display: none; }

/* Custom +/– indicator on the right */
.faq-accordion summary::after {
    content: "+";
    float: right;
    color: #c61c96;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

.faq-accordion details[open] summary::after { content: "–"; }

.faq-answer            { padding: 0 24px 24px; color: #475569; font-size: 16px; line-height: 1.8; }
.faq-answer p          { margin: 0 0 14px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul         { margin: 0 0 14px; padding-left: 22px; }
.faq-answer li         { margin-bottom: 8px; }
.faq-answer a          { color: #48afb4; font-weight: 600; text-decoration: none; }


/* ============================================================================
   32. FAQ — SEO TEXT, BACK BUTTON & RELATED LINKS
   ============================================================================ */

.faq-seo-text {
    max-width: 900px;
    margin: 70px auto 0;
    padding: 42px 34px;
    background: linear-gradient(#fff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 32px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    text-align: center;
}

.faq-seo-text p {
    font-size: 18px;
    line-height: 1.8;
    color: #475569;
    max-width: 760px;
    margin: 0 auto 18px;
}

.faq-seo-text p:last-child { margin-bottom: 0; }

.faq-seo-text a,
.faq-seo-links a {
    color: #48afb4;
    font-weight: 700;
    text-decoration: none;
}

/* "Zurück" button on FAQ detail pages */
.faq-back-button { text-align: center; margin-top: 36px; }

.faq-back-button a {
    display: inline-block;
    padding: 14px 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #48afb4;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
}

.faq-back-button a:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
}

.faq-seo-links     { text-align: center; margin-top: 22px; }
.faq-seo-links p   { font-size: 15px; color: #64748b; }


/* ============================================================================
   33. FAQ — FINAL CTA BLOCK
   ============================================================================ */

.faq-cta-final {
    margin: 60px 0 40px;
    padding: 0 20px;
}

.faq-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 28px;
    padding: 48px 32px;
    text-align: center;
    border: 1px solid #e2e8f0;
    border-top: 5px solid #48afb4;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    background: linear-gradient(#fff, #f8fafc);
}

.faq-cta-badge {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b45309;
    margin-bottom: 12px;
    font-weight: 600;
}

.faq-cta-inner h2 {
    color: #c61c96;
    font-size: 32px;
    line-height: 1.25;
    margin: 0 0 18px;
}

.faq-cta-text {
    max-width: 680px;
    margin: 0 auto 26px;
    font-size: 18px;
    line-height: 1.8;
    color: #475569;
}

.faq-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.faq-cta-main {
    background: #48afb4;
    color: #fff;
    padding: 15px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(72, 175, 180, 0.3);
    transition: all 0.25s ease;
}

.faq-cta-main:hover {
    background: #2dd4bf;
    transform: translateY(-2px);
}

.faq-cta-secondary {
    background: #fff;
    color: #c61c96;
    border: 2px solid #c61c96;
    padding: 15px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.25s ease;
}

.faq-cta-secondary:hover {
    background: #c61c96;
    color: #fff;
    transform: translateY(-2px);
}

.faq-cta-trust { font-size: 14px; color: #64748b; }


/* ============================================================================
   34. VIDEO MODULE (single embedded video block)
   ============================================================================ */

.pfoten-video-section { max-width: 1000px; margin: 0 auto; padding: 64px 24px; }
.pfoten-video-intro   { text-align: center; max-width: 760px; margin: 0 auto 36px; }

.pfoten-video-badge {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 10px 16px;
    border: 1px solid #c61c96;
    background: rgba(198, 28, 150, 0.08);
    border-radius: 999px;
    font-size: 14px;
    color: #c61c96;
    font-weight: 700;
}

.pfoten-video-intro h1 { font-size: 42px; line-height: 1.15; color: #48afb4; margin: 0 0 16px; }
.pfoten-video-intro p  { font-size: 18px; line-height: 1.7; color: #475569; margin: 0; }

.pfoten-video-grid { display: grid; gap: 32px; }

.pfoten-video-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 22px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
}

.pfoten-video-card h2 {
    font-size: 26px;
    color: #c61c96;
    margin: 0 0 16px;
    text-align: center;
}

/* Responsive video frames — landscape (16:9) and portrait (9:16) */
.pfoten-video-wrapper,
.pfoten-video-wrapper-vertical {
    position: relative;
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: #0f172a;
}

.pfoten-video-wrapper           { aspect-ratio: 16 / 9; }
.pfoten-video-wrapper-vertical  { max-width: 420px; margin: 0 auto; aspect-ratio: 9 / 16; }

.pfoten-video-wrapper iframe,
.pfoten-video-wrapper-vertical iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

.pfoten-video-note {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin: 14px 0 0;
    text-align: center;
}

.pfoten-hinweis {
    margin-top: 40px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 28px;
    text-align: center;
}

.pfoten-hinweis h2 { font-size: 28px; color: #c61c96; margin: 0 0 12px; }
.pfoten-hinweis p  { font-size: 17px; color: #475569; line-height: 1.7; margin: 0 auto; max-width: 720px; }


/* ============================================================================
   35. VIDEO OVERVIEW + DETAIL PAGES
   ============================================================================ */

.video-overview-hero,
.video-detail-hero {
    margin: 24px;
    border-radius: 32px;
    background: linear-gradient(#f8fafc, #fff);
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.video-wrap,
.video-detail-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px;
}

.video-badge {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 10px 16px;
    border: 1px solid #c61c96;
    background: rgba(198, 28, 150, 0.08);
    border-radius: 999px;
    font-size: 14px;
    color: #c61c96;
    font-weight: 600;
}

.video-overview-hero h1,
.video-detail-hero h1 {
    font-size: 42px;
    color: #48afb4;
    line-height: 1.15;
    margin: 0 0 18px;
}

.video-lead {
    font-size: 18px;
    color: #475569;
    line-height: 1.8;
    max-width: 860px;
    margin: 0 auto 16px;
}

.video-proof { margin-top: 12px; color: #c61c96; font-weight: 600; }

.video-top-boxes {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

.video-top-boxes div {
    padding: 10px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    font-weight: 600;
}

.video-overview-section,
.video-detail-section { padding: 32px 24px 64px; }

.video-intro    { max-width: 820px; margin: 0 auto 36px; }
.video-intro h2 { margin: 0 0 18px; line-height: 1.15; color: #c61c96; font-size: 36px; }
.video-intro p  { font-size: 18px; line-height: 1.8; color: #475569; margin: 0; }

/* Video overview grid (3-up cards) */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.video-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(#fff, #f8fafc);
    border-radius: 24px;
    overflow: hidden;
    border-top: 4px solid #48afb4;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    height: 100%;
}

.video-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.12);
    border-top-color: #2dd4bf;
    background: linear-gradient(#fff, #ccfbf1);
}

.video-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.video-card:hover img { transform: scale(1.05); }

.video-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }

.video-card h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 23px;
    line-height: 1.3;
    min-height: 60px;
}

.video-card-body a {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 18px;
    background: #48afb4;
    color: #fff;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(72, 175, 180, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    align-self: flex-start;
}

.video-card-body a:hover {
    background: #2dd4bf;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(72, 175, 180, 0.35);
}

/* Video detail page — alternating text-and-video blocks */
.video-block {
    display: grid;
    grid-template-columns: 1fr 0.75fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 56px;
    padding: 32px;
    background: linear-gradient(#fff, #f0fdfa);
    border: 1px solid #e2e8f0;
    border-top: 4px solid #48afb4;
    border-radius: 28px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.video-block.reverse { grid-template-columns: 0.75fr 1fr; }

.video-text         { text-align: left; }
.video-text h2      { color: #c61c96; font-size: 34px; line-height: 1.2; margin: 0 0 18px; }
.video-text p       { color: #475569; font-size: 17px; line-height: 1.8; margin: 0 0 16px; }

.video-list {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    margin: 20px 0;
}

.video-list p           { margin: 0 0 8px; color: #0f172a; }
.video-list p:last-child { margin-bottom: 0; }

.case-quote {
    border-left: 4px solid #48afb4;
    padding-left: 18px;
    font-weight: 700;
    color: #0f172a !important;
    margin-top: 22px !important;
}

/* Frame container for the embedded iframe (portrait) or case image */
.video-frame-wrap,
.case-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-frame-wrap iframe {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
    background: #000;
}

.case-image-wrap img {
    width: 100%;
    max-width: 360px;
    height: 620px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.20);
    background: #f8fafc;
}

/* Trailing SEO text block under the video stack */
.video-seo-text {
    max-width: 900px;
    margin: 56px auto 40px;
    padding: 34px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.video-seo-text h2          { margin: 0 0 18px; color: #48afb4; font-size: 30px; line-height: 1.2; }
.video-seo-text p           { margin: 0 0 16px; color: #475569; font-size: 17px; line-height: 1.8; }
.video-seo-text p:last-child { margin-bottom: 0; }
.video-seo-text a           { color: #48afb4; font-weight: 700; text-decoration: none; }
.video-seo-text a:hover     { text-decoration: underline; }

/* Final CTA block on the video page */
.video-cta {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 32px;
    background: linear-gradient(#fff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    text-align: center;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.video-cta h2 { color: #c61c96; font-size: 32px; line-height: 1.2; margin: 0 0 16px; }
.video-cta p  { color: #475569; font-size: 18px; line-height: 1.7; margin: 0 auto 24px; max-width: 720px; }

.video-cta-outer {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 32px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.video-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.video-buttons a {
    display: inline-block;
    padding: 14px 22px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s ease;
}

.video-buttons a:first-child { background: #48afb4; color: #fff; box-shadow: 0 10px 24px rgba(72, 175, 180, 0.22); }
.video-buttons a:last-child  { background: #0f172a; color: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); }

.cta-eyebrow {
    font-size: 13px;
    letter-spacing: 0.18em;
    color: #fef08a !important;
    margin: 0 0 12px;
    text-transform: uppercase;
    font-weight: 700;
}


/* ============================================================================
   36. STANDORT (location) HERO + LIST
   ============================================================================ */

.standort-hero {
    margin: 24px;
    border-radius: 32px;
    background: linear-gradient(#f8fafc, #fff);
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.standort-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 44px;
    align-items: center;
}

.standort-badge {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 10px 16px;
    border: 1px solid #c61c96;
    background: rgba(198, 28, 150, 0.08);
    border-radius: 999px;
    font-size: 14px;
    color: #c61c96;
    font-weight: 700;
}

.standort-hero h1  { font-size: 44px; line-height: 1.12; margin: 0 0 18px; color: #48afb4; }
.standort-lead     { font-size: 21px; color: #0f172a; margin: 0 0 16px; font-weight: 700; line-height: 1.45; }
.standort-text     { font-size: 17px; color: #475569; line-height: 1.75; margin: 0 0 16px; }

.standort-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.standort-info-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 14px;
    text-align: center;
}

.standort-info-box p:first-child { font-size: 13px; color: #64748b; margin: 0 0 4px; }
.standort-info-box p:last-child  { margin: 0; color: #0f172a; font-weight: 700; }

.standort-list  { display: grid; gap: 28px; }

.standort-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: center;
    padding: 18px;
    transition: all 0.3s ease;
}

.standort-row:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 45px rgba(15, 23, 42, 0.15) !important;
}

.standort-row img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.35s ease;
}

.standort-row:hover img { transform: scale(1.03); }

.standort-content h3 { font-size: 28px; color: #c61c96; margin: 0 0 12px; line-height: 1.15; }
.standort-content p  { font-size: 17px; color: #475569; margin: 0 0 16px; line-height: 1.55; }

.standort-label {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(72, 175, 180, 0.15);
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.standort-info {
    margin: 0 0 18px;
    padding-left: 20px;
    color: #475569;
    font-size: 16px;
    line-height: 1.55;
}


/* ============================================================================
   36b. STANDORT DETAIL PAGE — content boxes, benefit grid, gallery & CTA
   ----------------------------------------------------------------------------
   These classes are typically combined with .pfoten-card on the standort
   detail pages (e.g. Waldebene Ost). They provide the page-specific layouts
   for long-form content, three-up feature tiles, gallery thumbnails, simple
   course cards and the final CTA block.

   Why .kurs-card lives here (and not in §16):
     .kurs-card-clean (§16) is the elaborate variant with a turquoise top
     stripe and flex-column layout. .kurs-card is the simpler variant — just
     a padded box with an image on top, text, and a button. Both must coexist.
   ============================================================================ */

/* Padded long-form content block (combine with .pfoten-card.pfoten-narrow) */
.content-box                 { padding: 34px; }
.content-box p               { font-size: 17px; color: #475569; line-height: 1.8; margin: 0 0 18px; }
.content-box p:last-child    { margin-bottom: 0; }

/* Three-up benefit tiles (combine each tile with .pfoten-card) */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}

.benefit-box {
    padding: 24px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.benefit-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.12);
}

.benefit-box h3 { color: #c61c96; margin: 0 0 10px; font-size: 22px; }
.benefit-box p  { color: #475569; margin: 0; font-size: 16px; line-height: 1.6; }

/* Three-up image gallery + three-up course cards share the same grid */
.gallery-grid,
.kurs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Gallery thumbnail card (image-only, zooms on hover) */
.gallery-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.gallery-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.gallery-card:hover img { transform: scale(1.04); }

/* Simple course card — image on top, title, blurb, button.
   Combine with .pfoten-card to get the card frame. */
.kurs-card {
    padding: 22px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kurs-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.12);
}

.kurs-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 16px;
}

.kurs-card h3 { color: #c61c96; font-size: 21px; margin: 0 0 10px; }
.kurs-card p  { color: #475569; font-size: 15px; line-height: 1.6; margin: 0 0 16px; }

/* Final call-to-action box at the bottom of detail pages */
.cta-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 42px 28px;
    text-align: center;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
}

.cta-box h2 { color: #c61c96; font-size: 32px; margin: 0 0 14px; }
.cta-box p  { color: #475569; font-size: 18px; line-height: 1.7; max-width: 760px; margin: 0 auto 22px; }


/* ============================================================================
   37. KURS WRAPPER — FLEX VARIANT (2-up pricing tiles, "Empfohlen" badge)
   ============================================================================ */

.kurs-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    justify-content: center;
    align-items: stretch;
}

.kurs-box {
    flex: 1 1 480px;
    max-width: 520px;
    display: flex;
    position: relative;
}

.kurs-inner {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
    display: flex;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kurs-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.18);
}

.kurs-color {
    background-color: #48afb4;
    border-radius: 18px;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 560px;
    overflow: hidden;
}

.kurs-color-alt { background-color: #3ccccc; }

.kurs-color img {
    border-radius: 18px;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 18px;
    transition: transform 0.35s ease;
}

.kurs-inner:hover img     { transform: scale(1.04); }
.kurs-inner:hover .is-btn { transform: translateY(-2px); }

.kurs-color h3 { letter-spacing: 1px; margin: 0 0 12px; font-size: 24px; color: #0f172a; line-height: 1.2; }
.kurs-color p  { color: #0f172a; margin: 8px 0; font-size: 16px; line-height: 1.45; }

.kurs-button { margin-top: auto; padding-top: 22px; }

.empfohlen-badge {
    position: absolute;
    top: -12px; right: 24px;
    background: #c61c96;
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(198, 28, 150, 0.3);
    z-index: 2;
}


/* ============================================================================
   38. FICHTLMEIER / EXTERNAL EXPERT PAGE
   ============================================================================ */

.fichtlmeier-hero,
.fichtlmeier-gallery-section,
.fichtlmeier-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    margin: 24px;
}

.fichtlmeier-hero            { background: linear-gradient(#f8fafc, #fff); }
.fichtlmeier-gallery-section { background: linear-gradient(#f2f2f2, #fff); padding: 72px 24px; }

.fichtlmeier-wrap                   { max-width: 1200px; margin: 0 auto; }
.fichtlmeier-narrow                 { max-width: 820px;  margin: 0 auto; }
.fichtlmeier-section                { padding: 40px 24px; }
.fichtlmeier-hero .fichtlmeier-wrap { padding: 80px 24px; }

.fichtlmeier-eyebrow {
    font-size: 13px;
    letter-spacing: 0.18em;
    color: #b45309;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.fichtlmeier-hero-title { color: #48afb4; font-size: 46px; line-height: 1.15; margin: 0 0 18px; }

.fichtlmeier-section h2,
.fichtlmeier-gallery-section h2,
.fichtlmeier-cta-inner h2 {
    color: #c61c96;
    font-size: 40px;
    line-height: 1.15;
    margin: 0 0 18px;
}

.fichtlmeier-lead { font-size: 20px; color: #0f172a; margin: 0 0 18px; line-height: 1.6; }

.fichtlmeier-text,
.fichtlmeier-intro,
.fichtlmeier-cta-inner p {
    font-size: 18px;
    color: #475569;
    line-height: 1.85;
    margin: 0;
}

.fichtlmeier-intro          { margin-bottom: 22px; }

.fichtlmeier-buttons        { display: flex; flex-wrap: wrap; gap: 14px; }
.fichtlmeier-buttons.center { justify-content: center; }

.fichtlmeier-box-row { display: flex; gap: 15px; margin: 25px 0; }

.fichtlmeier-box {
    flex: 1;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 12px;
    text-align: center;
    border-radius: 16px;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

/* Generic button system used on this page (overrides Bootstrap .btn).
   Scoped with :not(:where([data-module] *)) so they don't override the
   CMS-provided buttons inside <div data-module="...">…</div> wrappers
   (course timetable, search/reset/booking buttons, sort toggles, etc.) */
.btn:not(:where([data-module] *)),
.fichtlmeier-buttons .btn:not(:where([data-module] *)),
a.btn:not(:where([data-module] *)) {
    display: inline-block !important;
    padding: 16px 24px !important;
    border-radius: 18px !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn:hover:not(:where([data-module] *)),
.fichtlmeier-buttons .btn:hover:not(:where([data-module] *)),
a.btn:hover:not(:where([data-module] *)) { transform: translateY(-2px); opacity: 0.96; }

.btn-primary:not(:where([data-module] *)), a.btn-primary:not(:where([data-module] *)) { background: #48afb4 !important; color: #fff !important;    box-shadow: 0 10px 22px rgba(72, 175, 180, 0.25); }
.btn-dark:not(:where([data-module] *)),    a.btn-dark:not(:where([data-module] *))    { background: #0f172a !important; color: #fff !important;    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);  }
.btn-light:not(:where([data-module] *)),   a.btn-light:not(:where([data-module] *))   { background: #fff !important;    color: #0f172a !important; border: 1px solid #e2e8f0 !important; }
.btn-outline:not(:where([data-module] *)), a.btn-outline:not(:where([data-module] *)) { background: #fff !important;    color: #0f172a !important; border: 1px solid #cbd5e1 !important; }

.fichtlmeier-hero-image     { position: relative; }
.fichtlmeier-hero-image img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 28px;
}

.fichtlmeier-image-badge {
    position: absolute;
    left: 20px; bottom: 20px;
    background: #fff;
    border-radius: 18px;
    padding: 12px 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    font-size: 14px;
    color: #0f172a;
}

.fichtlmeier-quote-section { max-width: 1100px; margin: 0 auto; padding: 8px 24px 24px; }

.fichtlmeier-quote-card {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 30px;
    padding: 32px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.06);
}

.fichtlmeier-quote        { font-size: 32px; line-height: 1.4; margin: 0 0 10px; color: #0f172a; }
.fichtlmeier-quote-author { font-size: 16px; color: #64748b; margin: 0; }

.fichtlmeier-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.fichtlmeier-card {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fichtlmeier-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.14);
}

.fichtlmeier-card-line    { height: 6px; background: #48afb4; }
.fichtlmeier-card-body    { padding: 24px; }

.fichtlmeier-card-eyebrow {
    font-size: 13px;
    letter-spacing: 0.15em;
    color: #b45309;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.fichtlmeier-card h3 { font-size: 22px; margin: 0 0 12px; color: #0f172a; line-height: 1.3; }
.fichtlmeier-card p  { margin: 0; color: #475569; line-height: 1.7; font-size: 17px; }

.top-space { margin-top: 48px; }

.fichtlmeier-book-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.fichtlmeier-book-grid img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.fichtlmeier-gallery-note { font-size: 14px; color: #64748b; margin-top: 16px; }

.fichtlmeier-cta-wrap { max-width: 1000px; margin: 0 auto; padding: 64px 24px; }

.fichtlmeier-cta-outer {
    border: 1px solid #dbe3ea;
    background: #fff;
    padding: 24px;
    border-radius: 32px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.10);
}

.fichtlmeier-cta-inner {
    background: #48afb4;
    padding: 36px;
    border-radius: 24px;
    color: #fff;
}

.fichtlmeier-cta-eyebrow {
    font-size: 13px;
    letter-spacing: 0.18em;
    color: #fef08a !important;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.fichtlmeier-cta-inner h2 { font-size: 34px; color: #fff; }
.fichtlmeier-cta-inner p  { color: #ecfeff; max-width: 720px; margin: 0 auto 22px; line-height: 1.7; }

.fichtlmeier-cta-note { margin: 18px 0 0 !important; font-size: 14px !important; color: #e6fffb !important; }


/* ============================================================================
   39. PL PANELS (storytelling / multi-year timeline cards)
   ============================================================================ */

.pl-section {
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: linear-gradient(#f2f2f2, #fff);
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    margin: 24px;
}

.pl-inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px; }

.pl-kicker {
    font-size: 13px;
    letter-spacing: 0.18em;
    color: #b45309;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.pl-h1 { font-size: 44px; margin: 0 0 18px; color: #48afb4; line-height: 1.15; }
.pl-h2 { font-size: 40px; margin: 0 0 16px; color: #c61c96; line-height: 1.15; }

.pl-text { font-size: 18px; color: #475569; line-height: 1.75; margin: 0 0 18px; }

.pl-grid-2 { display: grid; grid-template-columns: 1fr 1fr;       gap: 48px; align-items: center; }
.pl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.pl-mini-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pl-mini-card p:first-child { font-size: 14px; color: #64748b; margin: 0 0 6px; }
.pl-mini-card p:last-child  { margin: 0; font-weight: 600; color: #0f172a; }

.pl-image { width: 100%; border-radius: 28px; object-fit: cover; }

.pl-image-label {
    position: absolute;
    bottom: 20px; left: 20px;
    background: #fff;
    padding: 12px 18px;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    font-size: 14px;
    color: #0f172a;
}

.pl-center { text-align: center; max-width: 800px; margin: 0 auto 40px; }

.pl-info-card {
    border: 1px solid #dbe3ea;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.pl-info-card-line    { height: 6px; background: #48afb4; }
.pl-info-card-content { padding: 24px; }
.pl-info-card h3      { font-size: 22px; margin: 0 0 10px; color: #0f172a; }
.pl-info-card p       { margin: 0; color: #475569; line-height: 1.75; }

/* Year-by-year story card */
.pl-year-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    margin-bottom: 22px;
}

.pl-year-line       { height: 7px; background: #48afb4; }
.pl-year-content    { padding: 28px; }
.pl-year-content h3 { font-size: 30px; color: #c61c96; margin: 0 0 16px; }
.pl-year-content ul { margin: 0; padding-left: 20px; color: #475569; line-height: 1.9; font-size: 17px; }

.pl-highlight {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 18px;
    border-radius: 20px;
    margin-bottom: 18px;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 600;
}

.pl-link-soft {
    display: inline-block;
    margin-top: 18px;
    font-size: 16px;
    color: #0f172a;
    text-decoration: none;
    border-bottom: 1px solid #0f172a;
}

/* PL CTA panel (turquoise inner box on white card) */
.pl-cta-wrap { max-width: 1000px; margin: 0 auto; padding: 64px 24px; }

.pl-cta-box {
    border: 1px solid #dbe3ea;
    background: #fff;
    padding: 24px;
    border-radius: 32px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.10);
}

.pl-cta-inner {
    background: #48afb4;
    padding: 32px;
    border-radius: 24px;
    color: #fff;
    text-align: center;
}

.pl-button-dark {
    display: inline-block;
    padding: 18px 28px;
    background: #0f172a;
    color: #fff;
    text-decoration: none;
    border-radius: 18px;
    font-size: 18px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.25);
}

.pl-button-light {
    display: inline-block;
    padding: 18px 28px;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    border-radius: 18px;
    font-size: 18px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}


/* ============================================================================
   40. PL KONTAKT (large two-column contact card)
   ============================================================================ */

.pl-kontakt-wrap,
.pl-kontakt-wrap * { box-sizing: border-box; }

.pl-kontakt-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: linear-gradient(#f2f2f2, #fff);
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    margin: 24px;
    width: calc(100% - 48px);
}

.pl-kontakt-inner   { max-width: 1200px; margin: 0 auto; padding: 72px 24px; width: 100%; }

.pl-kontakt-topline { font-size: 16px; color: #475569; margin: 0 0 18px; text-align: center; }
.pl-kontakt-heading { max-width: 820px; margin: 0 auto 40px; text-align: center; }

.pl-kontakt-label    { font-size: 13px; letter-spacing: 0.18em; color: #b45309; margin: 0 0 12px; }
.pl-kontakt-title    { font-size: 40px; line-height: 1.15; font-weight: 700; margin: 0 0 16px; color: #c61c96; }
.pl-kontakt-subtitle { font-size: 20px; color: #475569; margin: 0; }

.pl-kontakt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.pl-kontakt-card {
    width: 100%;
    min-width: 0;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 24px;
    border-radius: 28px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
}

.pl-kontakt-card-inner {
    padding: 24px;
    border-radius: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pl-kontakt-card-left  { background: rgb(72, 175, 180); }
.pl-kontakt-card-right { background: rgb(60, 204, 204); }

.pl-kontakt-card-label       { color: rgb(252, 211, 77); font-size: 13px; letter-spacing: 0.18em; margin: 0 0 12px; }
.pl-kontakt-card-label-right { color: #fef08a; }

.pl-kontakt-card-title { color: #c61c96; font-size: 30px; margin: 0 0 20px; line-height: 1.2; }
.pl-kontakt-card-text  { margin: 0 0 18px; font-size: 16px; }

.pl-kontakt-points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

.pl-kontakt-point {
    background: rgba(255, 255, 255, 0.15);
    padding: 14px 16px;
    border-radius: 18px;
    word-break: break-word;
}

.pl-kontakt-point a { text-decoration: none; word-break: break-word; }

.pl-kontakt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

.pl-kontakt-btn {
    display: inline-block;
    padding: 16px 24px;
    text-decoration: none;
    border-radius: 18px;
    font-size: 16px;
    text-align: center;
}

.pl-kontakt-btn-dark  { background: #0f172a; color: #fff; }
.pl-kontakt-btn-light { background: #fff;    color: #0f172a; border: 1px solid rgba(255, 255, 255, 0.35); }

.pl-kontakt-note   { font-size: 14px; color: #ecfeff; margin: 16px 0 0; }

.pl-kontakt-badges { max-width: 1100px; margin: 24px auto 0; text-align: center; }

.pl-kontakt-badges span {
    display: inline-block;
    margin: 6px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 14px;
    color: #64748b;
}


/* ============================================================================
   41. GALLERY DETAIL PAGE (single-gallery view with lightbox)
   ============================================================================ */

.gallery-detail-hero {
    margin: 24px;
    border-radius: 32px;
    background: linear-gradient(#f8fafc, #fff);
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.gallery-wrap { max-width: 1200px; margin: 0 auto; padding: 72px 24px; }

.gallery-badge {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 10px 16px;
    border: 1px solid #c61c96;
    background: rgba(198, 28, 150, 0.08);
    border-radius: 999px;
    font-size: 14px;
    color: #c61c96;
    font-weight: 600;
}

.gallery-detail-hero h1 { font-size: 42px; color: #48afb4; line-height: 1.15; margin: 0 0 18px; }
.gallery-lead           { font-size: 18px; color: #475569; line-height: 1.8; max-width: 840px; margin: 0 auto; }

.gallery-top-boxes {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

.gallery-top-boxes div {
    padding: 10px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    font-weight: 600;
}

.gallery-section { padding: 32px 24px 64px; }

.gallery-intro     { max-width: 820px; margin: 0 auto 42px; text-align: center; }
.gallery-intro h2  { margin: 0 0 16px; color: #c61c96; font-size: 36px; line-height: 1.15; }
.gallery-intro p   { font-size: 18px; line-height: 1.8; color: #475569; margin: 0; }

.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.image-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-card:hover {
    transform: translateY(-6px);
    box-shadow: rgba(15, 23, 42, 0.14) 0px 22px 38px;
}

.card-topline { height: 6px; background: #48afb4; }

.image-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.4s ease;
}

.image-card:hover img { transform: scale(1.05); }

.image-caption         { padding: 20px; }
.image-caption .kicker {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #b45309;
    margin: 0 0 8px;
    font-weight: 700;
}

.image-caption h3 { margin: 0 0 8px; color: #424242; font-size: 20px; }
.image-caption p  { margin: 0; color: #64748b; font-size: 15px; line-height: 1.6; }

.seo-box {
    max-width: 920px;
    margin: 56px auto 0;
    padding: 34px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.seo-box h2 { margin: 0 0 18px; color: #48afb4; font-size: 30px; line-height: 1.2; }
.seo-box p  { margin: 0 0 18px; color: #475569; font-size: 17px; line-height: 1.8; }
.seo-box a  { color: #48afb4; font-weight: 700; text-decoration: none; }

.gallery-cta {
    max-width: 900px;
    margin: 40px auto 0;
    padding: 42px 28px;
    background: linear-gradient(135deg, rgba(198, 28, 150, 0.08), rgba(72, 175, 180, 0.12));
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
    text-align: center;
}

.gallery-cta h2 { margin: 0 0 14px; color: #c61c96; font-size: 30px; line-height: 1.2; }
.gallery-cta p  { max-width: 720px; margin: 0 auto 22px; color: #475569; font-size: 17px; line-height: 1.8; }

.gallery-cta a {
    display: inline-block;
    padding: 14px 22px;
    background: #c61c96;
    color: #fff;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(198, 28, 150, 0.24);
}


/* ============================================================================
   42. PERSONAL GALLERIES (Janos, Hanni, Isabel — same markup, different IDs)
   ============================================================================ */

.janos-gallery,
.hanni-gallery,
.isabel-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.janos-img-card,
.hanni-img-card,
.isabel-img-card {
    padding: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.janos-img-card:hover,
.hanni-img-card:hover,
.isabel-img-card:hover {
    transform: translateY(-3px);
    box-shadow: rgba(15, 23, 42, 0.14) 0px 22px 38px !important;
}

.janos-img-card img,
.hanni-img-card img,
.isabel-img-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    transition: transform 0.35s ease;
}

.janos-img-card:hover img,
.hanni-img-card:hover img,
.isabel-img-card:hover img { transform: scale(1.03); }


/* ============================================================================
   43. GENERIC CARD (legacy)
   ============================================================================ */

.card:not(:where([data-module] *)) {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
    transition: all 0.3s ease;
}

.card-line:not(:where([data-module] *))    { height: 6px; background: #48afb4; transition: all 0.3s ease; }
.card-content:not(:where([data-module] *)) { padding: 24px; }
.card-title:not(:where([data-module] *))   { font-size: 20px; margin: 0 0 8px; color: #0f172a; }
.card-text:not(:where([data-module] *))    { margin: 0; color: #475569; }

.card:hover:not(:where([data-module] *))            { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(15, 23, 42, 0.15); }
.card:hover:not(:where([data-module] *)) .card-line { background: #2dd4bf; }


/* ============================================================================
   44. BLOG MODULE (CMS-generated list view)
   ----------------------------------------------------------------------------
   Re-skins the default blog row layout to match the Pfotenliebe look.
   Hides the "Unveröffentlicht" badge that the CMS shows to logged-in editors.
   ============================================================================ */

.content-page .row { margin-bottom: 26px; }

.content-page .col-md-9 > .row {
    background: linear-gradient(180deg, rgba(72, 175, 180, 0.06), #fff);
    border: 1px solid rgba(72, 175, 180, 0.22);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
    transition: all 0.25s ease;
}

.content-page .col-md-9 > .row:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
}

.front-carousel img { border-radius: 18px; width: 100%; object-fit: cover; }

.content-page h2 a       { color: #0f172a; text-decoration: none; font-weight: 700; }
.content-page h2 a:hover { color: #48afb4; }

.blog-info { margin-bottom: 12px; color: #64748b; }

.content-page .more {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 18px;
    background: #48afb4;
    color: #fff !important;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(72, 175, 180, 0.24);
}

.content-page .more:hover { background: #3aa3a8; text-decoration: none; }

.sidebar-categories {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.sidebar-categories li a       { color: #475569; border-radius: 12px; padding: 9px 10px; }
.sidebar-categories li a:hover { background: rgba(72, 175, 180, 0.08); color: #48afb4; }

/* Hide the CMS-internal "draft" badge in the public view (only inside the
   blog list — must NOT touch modules where .badge-danger may signal status) */
.badge-danger:not(:where([data-module] *)) { display: none !important; }


/* ============================================================================
   45. COURSE GRID (pricing tiles, 4-up on desktop)
   ----------------------------------------------------------------------------
   IMPORTANT: every selector in this section is scoped under .pfoten-course-list
   on purpose. The site's CMS ships a built-in module called .course-module
   (rendered e.g. under /welpenschule-stuttgart/#kurstermine) which uses its
   own internal class names that overlap with the ones we picked here
   (.course-grid, .course-card, .course-button, ...). Leaving these rules
   un-scoped would override the module's styling and break the course-date
   table on every kurs page.

   To enable these rules on a custom price-list block, wrap the HTML with
   <div class="pfoten-course-list">…</div>. Inside that wrapper the original
   .course-grid / .course-card / etc. classes work exactly as before.
   ============================================================================ */

.pfoten-course-list .course-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.pfoten-course-list .course-card {
    background: linear-gradient(180deg, rgba(72, 175, 180, 0.08) 0%, #fff 100%);
    border: 1px solid rgba(72, 175, 180, 0.25);
    border-radius: 26px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    position: relative;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pfoten-course-list .course-card:hover {
    transform: translateY(-6px);
    box-shadow: rgba(15, 23, 42, 0.12) 0px 24px 44px;
}

.pfoten-course-list .course-line {
    height: 6px;
    background: linear-gradient(90deg, #48afb4, #5fd3d8);
    width: 100%;
}

.pfoten-course-list .course-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pfoten-course-list .course-label {
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(198, 28, 150, 0.12);
    color: #c61c96;
    font-size: 13px;
    font-weight: 600;
}

.pfoten-course-list .course-card h3  { font-size: 21px; line-height: 1.25; color: #0f172a; margin: 0 0 8px; }
.pfoten-course-list .course-subtitle { font-size: 15px; line-height: 1.5;  color: #64748b; margin: 0 0 18px; }
.pfoten-course-list .course-price    { font-size: 30px; line-height: 1;    color: #c61c96; font-weight: 700; margin: 0 0 6px; }
.pfoten-course-list .course-note     { font-size: 13px; color: #64748b; margin: 0 0 18px; }

.pfoten-course-list .course-card ul {
    padding-left: 18px;
    margin: 0 0 24px;
    color: #475569;
    font-size: 15px;
    line-height: 1.65;
}

.pfoten-course-list .course-card li { margin-bottom: 6px; }

.pfoten-course-list .course-button {
    margin-top: auto;
    display: inline-block;
    text-align: center;
    padding: 13px 18px;
    background: #48afb4;
    color: #fff;
    text-decoration: none;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 12px 24px rgba(72, 175, 180, 0.25);
}

.pfoten-course-list .course-button:hover { background: #3aa3a8; color: #fff; text-decoration: none; }


/* ============================================================================
   46. GLOBAL GRID FIXES — INLINE GRIDS WRITTEN VIA style="..."
   ----------------------------------------------------------------------------
   The CMS lets editors write grid layouts as inline styles. These selectors
   level the playing field so all inline grids stretch and collapse the same
   way as their class-based counterparts.
   ============================================================================ */

div[style*="grid-template-columns:1fr 1fr"],
div[style*="grid-template-columns:repeat(3,1fr)"],
div[style*="grid-template-columns:repeat(3, 1fr)"] {
    align-items: stretch !important;
}

div[style*="grid-template-columns:1fr 1fr"] > div,
div[style*="grid-template-columns:repeat(3,1fr)"] > div,
div[style*="grid-template-columns:repeat(3, 1fr)"] > div,
div[style*="grid-template-columns:repeat(3,1fr)"] > a,
div[style*="grid-template-columns:repeat(3, 1fr)"] > a {
    height: 100% !important;
}

/* White inline-styled boxes — keep their padding inside the border */
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background:#ffffff"],
div[style*="background: #ffffff"],
div[style*="background: rgb(255, 255, 255)"] {
    box-sizing: border-box !important;
}

/* Cap inline-styled section widths to the design max */
section > div[style*="max-width"] { max-width: 1100px !important; }


/* ============================================================================
   47. RESPONSIVE BREAKPOINTS (all in one place, smallest-window-last)
   ----------------------------------------------------------------------------
   Order matters: a few queries override earlier ones at narrower widths.
   ============================================================================ */

/* ---- ≤ 1100px : course grid collapses from 4 to 2 columns ---- */
@media (max-width: 1100px) {
    .pfoten-course-list .course-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- ≤ 992px : tablets ---- */
@media (max-width: 992px) {
    .partner-grid,
    .partner-detail-grid,
    .faq-grid { grid-template-columns: repeat(2, 1fr); }

    .partner-detail-grid-two,
    .partner-detail-grid-three { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }

    .video-grid { grid-template-columns: 1fr 1fr; }

    .partner-overview-hero h1,
    .partner-detail-hero h1,
    .faq-overview-hero h1,
    .video-overview-hero h1,
    .video-detail-hero h1,
    .gallery-detail-hero h1 { font-size: 36px; }

    .fichtlmeier-hero-title { font-size: 38px; }

    .fichtlmeier-section h2,
    .fichtlmeier-gallery-section h2 { font-size: 32px; }

    .fichtlmeier-hero-image img    { height: auto; }
    .fichtlmeier-card-grid,
    .fichtlmeier-book-grid         { grid-template-columns: 1fr !important; }

    .intro h2,
    .partner-seo-text h2,
    .partner-cta h2,
    .faq-intro h2,
    .video-intro h2,
    .video-seo-text h2,
    .video-cta h2,
    .gallery-intro h2,
    .seo-box h2,
    .gallery-cta h2 { font-size: 30px; }

    .pl-grid-2,
    .pl-grid-3 { grid-template-columns: 1fr; }

    .pl-h1 { font-size: 34px; }
    .pl-h2 { font-size: 32px; }
    .pl-inner { padding: 56px 20px; }

    /* Video detail blocks collapse to single column, preserving reverse order */
    .video-block,
    .video-block.reverse              { grid-template-columns: 1fr; }
    .video-block.reverse .video-frame-wrap,
    .video-block.reverse .case-image-wrap { order: 2; }
    .video-block.reverse .video-text  { order: 1; }
    .video-text h2                    { font-size: 30px; }

    .kundenstimmen-grid     { grid-template-columns: 1fr; }
    .kundenstimmen-header h2 { font-size: 34px; }
}

/* ---- ≤ 991px : tighter testimonial fallback ---- */
@media (max-width: 991px) {
    section div[style*="grid-template-columns:repeat(3, 1fr)"],
    section div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
    section div[style*="grid-template-columns:1fr 1fr"]       { grid-template-columns: 1fr !important; }
}

/* ---- ≤ 900px : larger phones / small tablets ---- */
@media (max-width: 900px) {
    .kurs-row,
    .auswahl-grid,
    .standort-grid,
    .standort-info-grid,
    .benefit-grid,
    .gallery-grid,
    .kurs-grid,
    .janos-gallery,
    .hanni-gallery,
    .isabel-gallery,
    .hunde-grid,
    .hero-grid,
    .kontakt-grid     { grid-template-columns: 1fr !important; }

    .standort-hero    { margin: 16px; border-radius: 24px; }
    .standort-hero h1 { font-size: 34px; }

    .intro h2,
    .cta-box h2       { font-size: 28px; }

    /* On the courses-list / standort pages the section shrinks at 900px (not 768px) */
    .pfoten-section   { padding: 42px 18px; }
    h1                { font-size: 34px !important; }
    h2                { font-size: 28px !important; }
    .pfoten-btn       { width: 100%; box-sizing: border-box; text-align: center; margin-bottom: 10px; }

    /* Reduce padding on content + CTA boxes on narrow screens */
    .content-box,
    .cta-box          { padding: 24px 20px; }
}

/* ---- ≤ 768px : phones — the main mobile breakpoint ---- */
@media (max-width: 768px) {
    /* Tighten section margins/padding on mobile */
    section { border-radius: 22px !important; margin: 16px 8px !important; }

    .pfoten-section,
    .partner-wrap, .partner-section,
    .partner-detail-wrap, .partner-detail-section,
    .faq-wrap, .faq-section,
    .video-wrap, .video-overview-section,
    .video-detail-wrap, .video-detail-section,
    .gallery-wrap, .gallery-section { padding: 42px 18px; }

    /* Every multi-column grid collapses to a single column */
    .pfoten-grid-2,
    .pfoten-grid-3,
    .pfoten-grid-2-small,
    .pfoten-mobile-grid,
    .pfoten-info-grid,
    .pfoten-about-grid,
    .philo-grid-2,
    .philo-grid-3,
    .partner-grid,
    .partner-detail-grid,
    .partner-detail-grid-two,
    .partner-detail-grid-three,
    .faq-grid,
    .video-grid,
    .image-grid,
    section div[style*="grid-template-columns:repeat(2,1fr)"],
    section div[style*="grid-template-columns: repeat(2, 1fr)"],
    section div[style*="grid-template-columns:repeat(3,1fr)"],
    section div[style*="grid-template-columns: repeat(3, 1fr)"],
    section div[style*="grid-template-columns:repeat(4,1fr)"],
    section div[style*="grid-template-columns:1fr 1fr"],
    section div[style*="grid-template-columns: 1fr 1fr"],
    section div[style*="grid-template-columns:1fr 1fr 1fr"],
    /* Used in /isabel-scheu/ inline grids */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:repeat(2,1fr)"],
    div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Slightly smaller display headings */
    h1 { font-size: 34px !important; }
    h2 { font-size: 28px !important; }

    /* Round the big hero cards a little less */
    .partner-overview-hero,
    .partner-detail-hero,
    .faq-overview-hero,
    .video-overview-hero,
    .video-detail-hero,
    .gallery-detail-hero,
    .standort-hero,
    .fichtlmeier-hero,
    .fichtlmeier-gallery-section { margin: 16px; border-radius: 24px; }

    .partner-card img,
    .partner-detail-card img,
    .faq-card img,
    .video-card img,
    .image-card img { height: 260px; }

    .partner-overview-hero h1,
    .partner-detail-hero h1,
    .faq-overview-hero h1,
    .video-overview-hero h1,
    .video-detail-hero h1,
    .gallery-detail-hero h1,
    .standort-hero h1 { font-size: 30px; }

    .intro h2,
    .partner-seo-text h2,
    .partner-cta h2,
    .faq-intro h2,
    .video-intro h2,
    .video-seo-text h2,
    .video-cta h2,
    .gallery-intro h2,
    .seo-box h2,
    .gallery-cta h2,
    .fichtlmeier-section h2,
    .fichtlmeier-gallery-section h2,
    .fichtlmeier-cta-inner h2 { font-size: 27px; }

    /* Stack horizontal pill rows + button rows */
    .partner-top-boxes,
    .partner-detail-top-boxes,
    .faq-top-boxes,
    .video-top-boxes,
    .video-buttons,
    .gallery-top-boxes,
    .fichtlmeier-buttons,
    .fichtlmeier-box-row,
    .faq-cta-buttons { flex-direction: column; align-items: center; }

    .partner-top-boxes div,
    .partner-detail-top-boxes div,
    .faq-top-boxes div,
    .video-top-boxes div,
    .video-buttons a,
    .gallery-top-boxes div {
        width: 100%;
        max-width: 320px;
        text-align: center;
        box-sizing: border-box;
    }

    /* Trim padding on SEO + CTA cards */
    .partner-seo-text,
    .partner-cta,
    .faq-seo-text,
    .video-seo-text,
    .video-cta,
    .seo-box,
    .gallery-cta { padding: 24px 20px; }

    /* Buttons go full-width — scoped so the CMS course module's tiny
       sort/search buttons keep their compact size on mobile */
    .pfoten-btn,
    .btn:not(:where([data-module] *)),
    .fichtlmeier-buttons .btn:not(:where([data-module] *)),
    a.btn:not(:where([data-module] *)),
    .faq-cta-main,
    .faq-cta-secondary {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        margin-bottom: 10px;
    }

    /* Disable hover lifts on touch devices */
    .pfotenliebe-card:hover,
    .kurs-card-clean:hover,
    .testimonial-card-ultra:hover,
    .welpen-card:hover { transform: none !important; }

    /* Trust box stacks vertically with separator lines */
    .trust-box     { grid-template-columns: 1fr !important; padding: 22px 18px; gap: 14px; }
    .trust-item    { padding-bottom: 14px; border-bottom: 1px solid #e2e8f0; }
    .trust-quote   { grid-column: auto; border-top: none; margin-top: 0; padding-top: 2px; }

    /* Show the sticky CTA bar and reserve space for it at the bottom */
    .mobile-sticky-bar { display: flex !important; }
    body               { padding-bottom: 86px; }

    /* Mini links collapse to 1 column */
    .pfoten-mini-links { grid-template-columns: 1fr; }

    /* Testimonial premium block tightens up */
    .kundenstimmen-premium    { margin: 24px 14px; border-radius: 24px; }
    .kundenstimmen-container  { padding: 52px 18px; }
    .kundenstimmen-header     { margin-bottom: 32px; }
    .kundenstimmen-header h2  { font-size: 29px; }
    .kundenstimmen-header p:not(.kundenstimmen-eyebrow) { font-size: 18px; }
    .kundenstimmen-badge      { width: 100%; justify-content: center; box-sizing: border-box; }
    .kundenstimmen-cta        { padding: 30px 20px; }
    .kundenstimmen-cta h3     { font-size: 26px; }
    .cta-primary,
    .cta-dark                 { width: 100%; text-align: center; box-sizing: border-box; }

    /* Lightbox controls move inside the viewport on small screens */
    .pfoten-lightbox       { padding: 16px; }
    .pfoten-lightbox-close { top: 10px; right: 10px; }
    .pfoten-lightbox-prev  { left: 10px; }
    .pfoten-lightbox-next  { right: 10px; }

    /* Embedded video iframes stay portrait, but cap width at 320px */
    .video-frame-wrap,
    .case-image-wrap        { width: 100% !important; justify-content: center !important; }
    .video-frame-wrap iframe,
    .iframe iframe {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        aspect-ratio: 9 / 16 !important;
        margin: 0 auto;
    }
    .case-image-wrap img {
        width: 100% !important;
        max-width: 320px !important;
        height: 520px !important;
        border-radius: 24px !important;
    }

    /* FAQ accordion + CTA shrink */
    .faq-overview-hero      { margin: 16px; border-radius: 24px; }
    .faq-overview-hero h1   { font-size: 30px; }
    .faq-intro h2           { font-size: 28px; }
    .faq-accordion summary  { font-size: 17px; padding: 20px; }
    .faq-answer             { padding: 0 20px 22px; }
    .faq-cta-inner          { padding: 32px 20px; }
    .faq-cta-inner h2       { font-size: 26px; }

    /* ProvenExpert widget shrinks (re-declared here for legacy CSS order) */
    .provenexpert-widget {
        bottom: 10px;
        right: 10px;
        transform: scale(0.8);
    }
}

/* ---- ≤ 640px : tighten KURSBOX flex layout on small phones ---- */
@media (max-width: 640px) {
    .flex.justify-center > div {
        padding: 18px !important;
        border-radius: 24px !important;
    }

    .flex.justify-center > div > div {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .flex.justify-center h2 {
        font-size: 24px !important;
        margin-bottom: 18px !important;
    }

    .flex.justify-center [style*="grid-template-columns:repeat(2,1fr)"],
    .flex.justify-center [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .flex.justify-center a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

/* ---- ≤ 600px : final testimonial fallback ---- */
@media (max-width: 600px) {
    section div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
}

/* ---- ≤ 520px : 4-column kutego placeholder collapses to one ---- */
@media (max-width: 520px) {
    .pfoten-kutego-placeholder div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------------------------
   Tab navigation — rounded pills (matches the site's .nav-tabs concept in
   section 11). Scoped to .course-module so it overrides the underline
   `tabs-modern` base style (templates-default/_css/custom.css, which uses
   !important + high specificity) ONLY here, while other module tabs keep the
   tenant default. !important + the extra .course-module class are both
   required to win against the base rules.
   ---------------------------------------------------------------------------- */
div.course-module .nav-tabs {
    border-bottom: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

div.course-module .nav-tabs > li {
    margin-bottom: 0 !important;
}

div.course-module .nav-tabs > li > a {
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    padding: 12px 20px !important;
    transition: all 0.25s ease;
}

div.course-module .nav-tabs > li > a:hover,
div.course-module .nav-tabs > li > a:focus {
    background: #fff !important;
    border-color: #48afb4 !important;
    color: #48afb4 !important;
}

div.course-module .nav-tabs > li.active > a,
div.course-module .nav-tabs > li.active > a:hover,
div.course-module .nav-tabs > li.active > a:focus {
    background: #48afb4 !important;
    border-color: #48afb4 !important;
    color: #fff !important;
}




/* KI-Hinweis unter den Bildern der FAQ-Karten */
.faq-card > a {
    display: block;
    text-decoration: none;
}

.faq-card > a::after {
    content: "Bild wurde mit KI generiert.";
    display: block;
    width: 100%;
    margin: 7px 0 0;
    padding: 0 10px;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    color: #8b8b8b;
}

/* KI-Hinweis unter einzelnen großen FAQ-Bildern */
.faq-hero-image::after {
    content: "Bild wurde mit KI generiert.";
    display: block;
    width: 100%;
    margin: 7px 0 0;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    color: #8b8b8b;
}


/* =====================================================
   PFOTENLIEBE – BUCHEMPFEHLUNG / AFFILIATE
===================================================== */

.pfoten-book-section {
    max-width: 850px;
    margin: 40px auto 48px;
    padding: 0 24px;
}

.pfoten-book-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 24px;
}

.pfoten-book-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 28px;
    align-items: center;
}

.pfoten-book-image-wrap {
    text-align: center;
}

.pfoten-book-image-link {
    display: inline-block;
}

.pfoten-book-image {
    width: 100%;
    max-width: 140px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.pfoten-book-eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
    color: #b45309;
    margin: 0 0 7px;
    text-transform: uppercase;
}

.pfoten-book-title {
    font-size: 23px;
    line-height: 1.3;
    color: #c61c96;
    margin: 0 0 10px;
}

.pfoten-book-text {
    font-size: 16px;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 16px;
}

.pfoten-book-button {
    display: inline-block;
    padding: 12px 20px;
    background: #48afb4;
    color: #ffffff;
    text-decoration: none;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pfoten-book-button:hover,
.pfoten-book-button:focus {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

.pfoten-book-disclosure {
    font-size: 11px;
    line-height: 1.5;
    color: #64748b;
    margin: 12px 0 0;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .pfoten-book-section {
        margin: 32px auto 40px;
        padding: 0 16px;
    }

    .pfoten-book-card {
        padding: 22px 18px;
    }

    .pfoten-book-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pfoten-book-image {
        max-width: 130px;
    }

    .pfoten-book-content {
        text-align: center;
    }

    .pfoten-book-title {
        font-size: 21px;
    }

    .pfoten-book-text {
        font-size: 15px;
    }

}



/* =====================================================
   PFOTENLIEBE
   BLOG + PRODUKTEMPFEHLUNGEN
   BEREINIGTE GLOBALE CSS
===================================================== */


/* =====================================================
   1. PRODUKTEMPFEHLUNGEN – GRUNDAUFBAU
===================================================== */

.pfoten-product-section {
    max-width: 850px;
    margin: 36px auto 42px;
}

.pfoten-product-content {
    max-width: 680px;
}


/* Kleine Überschrift oben */

.pfoten-product-eyebrow {
    margin: 0 0 7px;
    color: #b45309;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* Hauptüberschrift des Empfehlungsbereichs */

.pfoten-product-title {
    margin: 0 0 10px;
    color: #c61c96;
    font-size: 22px;
    line-height: 1.3;
}


/* Beschreibungstext */

.pfoten-product-text {
    margin: 0 0 17px;
    color: #475569;
    font-size: 16px;
    line-height: 1.65;
}


/* Amazon-Button */

.pfoten-product-button {
    display: inline-block;
    padding: 11px 18px;
    background: #48afb4;
    color: #ffffff !important;
    border-radius: 14px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pfoten-product-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
    color: #ffffff !important;
    text-decoration: none !important;
}


/* Affiliate-Hinweis */

.pfoten-product-disclosure {
    display: block;
    margin: 20px 0 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.55;
}


/* =====================================================
   2. MEHRERE PRODUKTE – EINZELNE WEISSE KARTEN
===================================================== */

.pfoten-product-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 26px;
    margin: 22px 0;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}


/* Produktname immer Pink
   Spezifischer Selektor, damit .pfoten-blog h4
   die Farbe nicht überschreibt */

.pfoten-blog .pfoten-product-item-title,
.pfoten-product-item .pfoten-product-item-title {
    margin: 0 0 12px;
    color: #c61c96;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}


/* Abstand Beschreibung */

.pfoten-product-item .pfoten-product-text {
    margin: 0 0 18px;
}


/* Button */

.pfoten-product-item .pfoten-product-button {
    margin-top: 2px;
}


/* Abstand Affiliate-Hinweis zum Button */

.pfoten-product-item .pfoten-product-disclosure {
    display: block;
    margin: 20px 0 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.55;
}


/* =====================================================
   3. EINZELNE EMPFEHLUNG
   Bücher oder einzelnes Produkt
===================================================== */

.pfoten-single-product {
    max-width: 850px;
    margin: 40px auto 48px;
    padding: 0 24px;
}


/* Einzelne weiße Karte */

.pfoten-single-product-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}


/* Bild + Text */

.pfoten-single-product-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 28px;
    align-items: center;
}


/* Produktbild */

.pfoten-single-product-image {
    text-align: center;
}

.pfoten-single-product-image a {
    display: inline-block;
}

.pfoten-single-product-image img {
    width: 100%;
    max-width: 140px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}


/* Kleine Überschrift */

.pfoten-single-product-eyebrow {
    margin: 0 0 7px;
    color: #b45309;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* Titel Pink */

.pfoten-single-product-title {
    margin: 0 0 12px;
    color: #c61c96;
    font-size: 23px;
    line-height: 1.3;
}


/* Beschreibung */

.pfoten-single-product-text {
    margin: 0 0 18px;
    color: #475569;
    font-size: 16px;
    line-height: 1.65;
}


/* Button */

.pfoten-single-product-button {
    display: inline-block;
    padding: 12px 20px;
    background: #48afb4;
    color: #ffffff !important;
    border-radius: 15px;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pfoten-single-product-button:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}


/* Affiliate-Hinweis */

.pfoten-single-product-disclosure {
    display: block;
    margin: 20px 0 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.55;
}


/* =====================================================
   PFOTENLIEBE BLOG
   FINALE GLOBALE CSS – KOMPAKTE VERSION

   TYPOGRAFIE:
   Schriftarten und Schriftgrößen kommen aus der
   globalen Website-CSS.

   WISSENSKARTEN:
   Immer 1-spaltig über die gesamte Textbreite.

   RELATED LINKS:
   Desktop: 3 Spalten
   Tablet:  2 Spalten
   Mobile:  1 Spalte

   RELATED-KARTEN:
   Titel oben
   Beschreibung darunter
   Pfeil rechts
   sauber linksbündig
===================================================== */


/* =====================================================
   1. BLOG – GRUNDAUFBAU
===================================================== */

.pfoten-blog {
    max-width: 920px;
    margin: 0 auto;
    color: #334155;
}


/* =====================================================
   2. ARTIKELKOPF
===================================================== */

.pfoten-blog-header {
    margin-bottom: 18px;
}

.pfoten-blog-kicker {
    margin: 0 0 6px;
    color: #48afb4;
}


/* H1 */

.pfoten-blog h1 {
    margin: 0 0 12px;
    color: #c61c96;
}


/* Einleitung */

.pfoten-blog-intro {
    margin: 0 0 12px;
    color: #475569;
}


/* =====================================================
   3. STANDARD-TYPOGRAFIE
   Schriftart / Schriftgröße kommen von der Website
===================================================== */

.pfoten-blog h2 {
    margin: 20px 0 8px;
    color: #c61c96;
}

.pfoten-blog h3 {
    margin: 16px 0 7px;
    color: #334155;
}

.pfoten-blog h4 {
    margin: 14px 0 6px;
    color: #334155;
}

.pfoten-blog p {
    margin: 0 0 10px;
}

.pfoten-blog ul,
.pfoten-blog ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.pfoten-blog li {
    margin-bottom: 5px;
}


/* Normale Links */

.pfoten-blog a {
    color: #c61c96;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pfoten-blog a:hover {
    color: #48afb4;
}


/* Erster H2 nach Artikelkopf */

.pfoten-blog-header + .pfoten-blog-section > h2 {
    margin-bottom: 8px;
}


/* =====================================================
   4. NORMALE ARTIKEL-SEKTIONEN
===================================================== */

.pfoten-blog-section {
    margin: 0 0 18px;
}

.pfoten-blog-section:last-child {
    margin-bottom: 0;
}


/* Erste Überschrift innerhalb einer Section */

.pfoten-blog-section > h2:first-child,
.pfoten-blog-section > h3:first-child,
.pfoten-blog-section > h4:first-child {
    margin-top: 0;
}


/* =====================================================
   5. WICHTIGER HINWEIS
===================================================== */

.pfoten-blog-notice {
    margin: 14px 0 18px;
    padding: 18px 22px;

    background: #fff7f8;

    border: 1px solid #f2d7e7;
    border-left: 5px solid #c61c96;
    border-radius: 16px;
}

.pfoten-blog-notice p {
    margin: 0;
}

.pfoten-blog-notice p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   6. KURZ ERKLÄRT / WISSENSBOX
===================================================== */

.pfoten-blog-summary {
    margin: 16px 0 20px;
    padding: 20px 24px;

    background: #f1fbfb;

    border: 1px solid #cce9ea;
    border-radius: 20px;
}

.pfoten-blog-summary h2,
.pfoten-blog-summary h3,
.pfoten-blog-summary h4 {
    margin-top: 0;
    color: #48afb4;
}

.pfoten-blog-summary p:last-child,
.pfoten-blog-summary ul:last-child,
.pfoten-blog-summary ol:last-child {
    margin-bottom: 0;
}


/* =====================================================
   7. FAQ
===================================================== */

.pfoten-blog-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.pfoten-blog-faq-item {
    margin: 0;
    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.pfoten-blog-faq-question {
    margin: 0 0 8px;

    color: #334155;

    font-weight: 700;
}

.pfoten-blog-faq-answer {
    margin: 0;
    font-weight: 400;
}

.pfoten-blog-faq-answer > :first-child {
    margin-top: 0;
}

.pfoten-blog-faq-answer > :last-child {
    margin-bottom: 0;
}

.pfoten-blog-faq-item p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   8. FAZIT
===================================================== */

.pfoten-blog-conclusion {
    margin: 20px 0;
    padding: 20px 24px;

    background: #fff7fc;

    border: 1px solid #edd8e8;
    border-radius: 20px;
}

.pfoten-blog-conclusion h2,
.pfoten-blog-conclusion h3,
.pfoten-blog-conclusion h4 {
    margin-top: 0;
    color: #c61c96;
}

.pfoten-blog-conclusion p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   9. CTA
===================================================== */

.pfoten-blog-cta {
    margin: 20px 0;
    padding: 20px 24px;

    background: #f1fbfb;

    border: 1px solid #cce9ea;
    border-radius: 20px;
}

.pfoten-blog-cta h2,
.pfoten-blog-cta h3,
.pfoten-blog-cta h4 {
    margin-top: 0;
}

.pfoten-blog-cta p:last-child {
    margin-bottom: 0;
}

.pfoten-blog-cta-button {
    display: inline-block;

    margin-top: 5px;
    padding: 12px 20px;

    background: #48afb4;

    color: #ffffff !important;

    border-radius: 14px;

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pfoten-blog-cta-button:hover {
    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}


/* =====================================================
   10. STORY / TIMELINE / ERFAHRUNGSBERICHT
===================================================== */

.pfoten-blog-story {
    margin: 12px 0 0;
}

.pfoten-blog-story-step {
    margin: 0 0 16px;
}

.pfoten-blog-story-step:last-child {
    margin-bottom: 0;
}

.pfoten-blog-story-step h2:first-child,
.pfoten-blog-story-step h3:first-child,
.pfoten-blog-story-step h4:first-child {
    margin-top: 0;
}


/* =====================================================
   11. CHECKLISTEN
===================================================== */

.pfoten-blog-checklist {
    margin: 14px 0 16px;
}

.pfoten-blog-checklist-title {
    margin-top: 0;
}


/* =====================================================
   12. WISSENSKARTEN
   IMMER 1-SPALTIG ÜBER DIE GESAMTE TEXTBREITE
===================================================== */

.pfoten-blog-info-grid {
    display: grid;

    width: 100%;

    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 12px;
}

.pfoten-blog-info-card {
    width: 100%;

    box-sizing: border-box;

    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 18px;
}

.pfoten-blog-info-card h2,
.pfoten-blog-info-card h3,
.pfoten-blog-info-card h4 {
    margin-top: 0;
}

.pfoten-blog-info-card p:last-child,
.pfoten-blog-info-card ul:last-child,
.pfoten-blog-info-card ol:last-child {
    margin-bottom: 0;
}


/* =====================================================
   13. PRODUKTEMPFEHLUNGEN – GRUNDAUFBAU
===================================================== */

.pfoten-product-section {
    max-width: 850px;
    margin: 20px auto 24px;
}

.pfoten-product-content {
    max-width: 680px;
}


/* Kleine Überschrift */

.pfoten-product-eyebrow {
    margin: 0 0 6px;
    color: #b45309;
}


/* Überschrift Empfehlungsbereich */

.pfoten-product-title {
    margin: 0 0 8px;
    color: #c61c96;
}


/* Beschreibung */

.pfoten-product-text {
    margin: 0 0 12px;
    color: #475569;
}


/* =====================================================
   14. EINZELNE PRODUKTKARTEN
===================================================== */

.pfoten-product-item {
    margin: 14px 0;
    padding: 20px 22px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}


/* Produktüberschrift */

.pfoten-blog .pfoten-product-item-title,
.pfoten-product-item .pfoten-product-item-title {
    margin: 0 0 8px;

    color: #c61c96 !important;
}


/* Produkttext */

.pfoten-product-item .pfoten-product-text {
    margin: 0 0 12px;
}


/* =====================================================
   15. PRODUKT-/AMAZON-BUTTON
===================================================== */

.pfoten-product-button {
    display: inline-block;

    padding: 11px 18px;

    background: #48afb4;

    color: #ffffff !important;

    border-radius: 14px;

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pfoten-product-button:hover {
    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}

.pfoten-product-item .pfoten-product-button {
    margin-top: 2px;
}


/* =====================================================
   16. AFFILIATE-HINWEIS
===================================================== */

.pfoten-product-disclosure {
    display: block;

    margin: 12px 0 0;

    color: #64748b;
}

.pfoten-product-item .pfoten-product-disclosure {
    display: block;

    margin: 12px 0 0;

    color: #64748b;
}


/* =====================================================
   17. EINZELNE EMPFEHLUNG
===================================================== */

.pfoten-single-product {
    max-width: 850px;

    margin: 22px auto 26px;
    padding: 0 24px;
}

.pfoten-single-product-card {
    padding: 22px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.pfoten-single-product-grid {
    display: grid;

    grid-template-columns: 140px 1fr;

    gap: 22px;

    align-items: center;
}


/* Produktbild */

.pfoten-single-product-image {
    text-align: center;
}

.pfoten-single-product-image a {
    display: inline-block;
}

.pfoten-single-product-image img {
    display: block;

    width: 100%;
    max-width: 140px;
    height: auto;

    margin: 0 auto;

    border-radius: 10px;

    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}


/* Kleine Überschrift */

.pfoten-single-product-eyebrow {
    margin: 0 0 6px;
    color: #b45309;
}


/* Produkttitel */

.pfoten-single-product-title {
    margin: 0 0 8px;
    color: #c61c96;
}


/* Beschreibung */

.pfoten-single-product-text {
    margin: 0 0 12px;
    color: #475569;
}


/* Button */

.pfoten-single-product-button {
    display: inline-block;

    padding: 12px 20px;

    background: #48afb4;

    color: #ffffff !important;

    border-radius: 15px;

    text-decoration: none !important;

    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pfoten-single-product-button:hover {
    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-1px);

    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}


/* Affiliate-Hinweis */

.pfoten-single-product-disclosure {
    display: block;

    margin: 12px 0 0;

    color: #64748b;
}


/* =====================================================
   18. DAS KÖNNTE DICH AUCH INTERESSIEREN
   Variable Kartenhöhe
   Desktop: 3 Spalten
   Tablet: 2 Spalten
   Mobile: 1 Spalte
===================================================== */

.pfoten-blog-related {
    width: 100%;
    margin-top: 22px;
}

.pfoten-blog-related h2,
.pfoten-blog-related h3,
.pfoten-blog-related h4 {
    margin: 0 0 12px;
    color: #c61c96;
}

.pfoten-blog-related h4 {
    font-family: 'Sour Gummy';
    font-weight: 600;
}

.pfoten-blog-related > p {
    margin: 0 0 18px;
}


/* =====================================================
   RELATED – ÄUSSERES GRID
===================================================== */

.pfoten-blog-related-grid {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
}


/* =====================================================
   RELATED – NEUE KARTENSTRUKTUR
===================================================== */

.pfoten-blog-related-link {
    position: relative;
    display: block !important;
    width: 100% !important;
    min-width: 0;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 18px 44px 18px 20px;
    background: #ffffff;
    border: 1px solid rgba(72,175,180,.18);
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,.03);
    color: #334155 !important;
    text-align: left !important;
    text-decoration: none !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.pfoten-blog-related-link > a {
    display: block !important;
    width: auto !important;
    margin: 0 0 7px !important;
    color: #334155 !important;
    font-weight: 700;
    text-align: left !important;
    text-decoration: none !important;
}

a.pfoten-blog-related-link {
    color: #334155 !important;
    text-decoration: none !important;
}


/* =====================================================
   RELATED – ALTE LISTEN-VARIANTE
===================================================== */

.pfoten-blog-related-grid > li {
    position: relative;
    display: block;
    margin: 0;
    padding: 18px 44px 18px 20px;
    background: #ffffff;
    border: 1px solid rgba(72,175,180,.18);
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,.03);
    list-style: none;
    box-sizing: border-box;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.pfoten-blog-related-grid > li > .pfoten-blog-related-link {
    display: inline !important;
    width: auto !important;
    height: auto;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-weight: 700;
}


/* =====================================================
   RELATED – ALTE P-STRUKTUR
===================================================== */

.pfoten-blog-related-grid > p {
    grid-column: 1 / -1 !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
}

.pfoten-blog-related-grid > p > br {
    display: none !important;
}

.pfoten-blog-related-grid > p > a {
    position: relative;
    display: block !important;
    width: 100% !important;
    min-width: 0;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 18px 44px 18px 20px;
    background: #ffffff;
    border: 1px solid rgba(72,175,180,.18);
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,.03);
    color: #334155 !important;
    text-align: left !important;
    text-decoration: none !important;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


/* =====================================================
   RELATED – HOVER
===================================================== */

.pfoten-blog-related-grid > div.pfoten-blog-related-link:hover,
.pfoten-blog-related-grid > a.pfoten-blog-related-link:hover,
.pfoten-blog-related-grid > li:hover,
.pfoten-blog-related-grid > p > a:hover {
    transform: translateY(-2px);
    border-color: #48afb4;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.pfoten-blog-related-link > a:hover,
a.pfoten-blog-related-link:hover {
    color: #c61c96 !important;
}


/* =====================================================
   RELATED – PFEIL
===================================================== */

.pfoten-blog-related-grid > div.pfoten-blog-related-link::after,
.pfoten-blog-related-grid > a.pfoten-blog-related-link::after,
.pfoten-blog-related-grid > li::after,
.pfoten-blog-related-grid > p > a::after {
    content: "→";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #48afb4;
    font-size: 17px;
    line-height: 1;
    transition:
        transform .2s ease,
        color .2s ease;
}

.pfoten-blog-related-grid > div.pfoten-blog-related-link:hover::after,
.pfoten-blog-related-grid > a.pfoten-blog-related-link:hover::after,
.pfoten-blog-related-grid > li:hover::after,
.pfoten-blog-related-grid > p > a:hover::after {
    transform: translate(4px, -50%);
}


/* =====================================================
   19. TABLET
   RELATED: 2 SPALTEN
   WISSENSKARTEN: 1 SPALTE
===================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    .pfoten-blog-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pfoten-blog-related-grid > p {
        grid-column: 1 / -1 !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =====================================================
   20. MOBILE
===================================================== */

@media (max-width: 767px) {

    /* BLOG */

    .pfoten-blog-header {
        margin-bottom: 16px;
    }

    .pfoten-blog h1 {
        margin-bottom: 10px;
    }

    .pfoten-blog h2 {
        margin: 18px 0 7px;
    }

    .pfoten-blog h3 {
        margin: 15px 0 6px;
    }

    .pfoten-blog h4 {
        margin: 13px 0 5px;
    }

    .pfoten-blog p {
        margin-bottom: 9px;
    }


    /* SEKTIONEN */

    .pfoten-blog-section {
        margin-bottom: 16px;
    }


    /* HINWEIS */

    .pfoten-blog-notice {
        margin: 12px 0 16px;
        padding: 16px 18px;
        border-radius: 14px;
    }


    /* KURZ ERKLÄRT */

    .pfoten-blog-summary {
        margin: 14px 0 17px;
        padding: 17px 18px;
        border-radius: 17px;
    }


    /* FAQ */

    .pfoten-blog-faq {
        gap: 7px;
        margin-top: 10px;
    }

    .pfoten-blog-faq-item {
        padding: 15px 17px;
        border-radius: 14px;
    }


    /* FAZIT */

    .pfoten-blog-conclusion {
        margin: 17px 0;
        padding: 17px 18px;
        border-radius: 17px;
    }


    /* CTA */

    .pfoten-blog-cta {
        margin: 17px 0;
        padding: 17px 18px;
        border-radius: 17px;
    }


    /* STORY */

    .pfoten-blog-story {
        margin-top: 10px;
    }

    .pfoten-blog-story-step {
        margin-bottom: 14px;
    }


    /* CHECKLISTEN */

    .pfoten-blog-checklist {
        margin: 12px 0 14px;
    }


    /* WISSENSKARTEN */

    .pfoten-blog-info-grid {
        grid-template-columns: 1fr;

        gap: 9px;

        margin-top: 10px;
    }

    .pfoten-blog-info-card {
        padding: 15px 17px;
        border-radius: 15px;
    }


    /* PRODUKTEMPFEHLUNGEN */

    .pfoten-product-section {
        margin: 18px 0 20px;
    }

    .pfoten-product-button {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }

    .pfoten-product-item {
        margin: 12px 0;
        padding: 17px 18px;

        border-radius: 18px;
    }

    .pfoten-product-item .pfoten-product-disclosure {
        margin-top: 11px;
    }


    /* EINZELNE EMPFEHLUNG */

    .pfoten-single-product {
        margin: 18px auto 22px;
        padding: 0 16px;
    }

    .pfoten-single-product-card {
        padding: 18px;
        border-radius: 18px;
    }

    .pfoten-single-product-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pfoten-single-product-image img {
        max-width: 130px;
    }

    .pfoten-single-product-button {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }

    .pfoten-single-product-disclosure {
        margin-top: 11px;
    }


    /* RELATED */

    .pfoten-blog-related {
        margin-top: 18px;
    }

    .pfoten-blog-related-grid {
        grid-template-columns: 1fr !important;
        gap: 9px;
    }

    .pfoten-blog-related-grid > p {
        grid-column: 1 / -1 !important;

        grid-template-columns: 1fr !important;

        gap: 9px;
    }

    .pfoten-blog-related-link,
    .pfoten-blog-related-grid > p > a {
        min-height: 0;

        padding: 15px 40px 15px 16px;
    }

    .pfoten-blog-related-link::after,
    .pfoten-blog-related-grid > p > a::after {
        right: 14px;
    }

}


/* =====================================================
   21. ALTE BLOCKSATZ-FORMATIERUNG ÜBERSCHREIBEN
===================================================== */

.pfoten-blog p,
.pfoten-blog li {
    text-align: left !important;
    word-spacing: normal !important;
}


/* Alte Inline-Angaben wie style="text-align: justify;" */

.pfoten-blog p[style*="text-align: justify"],
.pfoten-blog li[style*="text-align: justify"] {
    text-align: left !important;
}

/* =====================================================
   FIX – AFFILIATE-BUTTON
   Keine zusätzlichen Kreise / Pseudo-Elemente
===================================================== */

a.pfoten-product-button::before,
a.pfoten-product-button::after,
.pfoten-product-button::before,
.pfoten-product-button::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}


/* Button selbst sauber begrenzen */

a.pfoten-product-button,
.pfoten-product-button {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}


/* =====================================================
   WELPENBUCH – BILD KLEIN NEBEN TEXT
===================================================== */

.pfoten-product-book {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
}

.pfoten-product-book-image {
    flex: 0 0 150px;
    width: 150px;
}

.pfoten-product-book-image img {
    display: block;
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 10px;
}

.pfoten-product-book-content {
    flex: 1;
    min-width: 0;
}

.pfoten-product-book-content .pfoten-product-item-title {
    margin-top: 0;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .pfoten-product-book {
        gap: 18px;
    }

    .pfoten-product-book-image {
        flex: 0 0 105px;
        width: 105px;
    }

    .pfoten-product-book-image img {
        width: 105px !important;
        max-width: 105px !important;
    }

}


/* =====================================================
   PFOTENLIEBE – BLOG-TABELLE
===================================================== */

.pfoten-blog-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 28px 0 30px 0;
    -webkit-overflow-scrolling: touch;
}

.pfoten-blog-table {
    width: 100%;
    min-width: 950px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: #ffffff;
    border: 1px solid #ead9e5;
    border-radius: 14px;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.55;
}

.pfoten-blog-table th {
    padding: 16px 18px;
    text-align: left;
    vertical-align: middle;
    background: #f8eaf4;
    color: #333333;
    font-weight: 700;
    border-bottom: 2px solid #c61c96;
}

.pfoten-blog-table td {
    padding: 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eadfe7;
    overflow-wrap: break-word;
    word-break: normal;
}

.pfoten-blog-table tbody tr:nth-child(even) {
    background: #fdfafd;
}

.pfoten-blog-table tbody tr:last-child td {
    border-bottom: none;
}

.pfoten-blog-table td:first-child strong {
    color: #c61c96;
}

/* Spaltenbreiten */
.pfoten-blog-table col:nth-child(1) {
    width: 17%;
}

.pfoten-blog-table col:nth-child(2) {
    width: 20%;
}

.pfoten-blog-table col:nth-child(3) {
    width: 30%;
}

.pfoten-blog-table col:nth-child(4) {
    width: 33%;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .pfoten-blog-table-wrap {
        margin: 22px 0 26px 0;
    }

    .pfoten-blog-table {
        min-width: 850px;
        font-size: 15px;
    }

    .pfoten-blog-table th {
        padding: 14px 16px;
    }

    .pfoten-blog-table td {
        padding: 16px;
    }

}



/* =====================================================
   PFOTENLIEBE STUTTGART – INSTAGRAM SEITE
===================================================== */

.pfoten-instagram {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 24px 0;

    border: 1px solid #e2e8f0;
    border-radius: 32px;

    background: linear-gradient(
        180deg,
        #f7fafa 0%,
        #ffffff 100%
    );

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}


/* INNERER BEREICH */

.pfoten-instagram__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px 60px;
    text-align: center;
}


/* KLEINE ÜBERSCHRIFT */

.pfoten-instagram__eyebrow {
    margin: 0 0 12px;

    color: #c61c96;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* H1 */

.pfoten-instagram__title {
    margin: 0 0 18px;

    color: #48afb4;

    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
}


/* EINLEITUNG */

.pfoten-instagram__intro {
    max-width: 780px;
    margin: 0 auto 16px;

    color: rgb(71, 85, 105);

    font-size: 20px;
    line-height: 1.65;
}


/* ZWEITER TEXT */

.pfoten-instagram__text {
    max-width: 720px;
    margin: 0 auto 42px;

    color: rgb(100, 116, 139);

    font-size: 16px;
    line-height: 1.7;
}


/* PINK TRENNLINIE */

.pfoten-instagram__divider {
    width: 70px;
    height: 3px;

    margin: 0 auto 42px;

    background: #c61c96;
    border-radius: 10px;
}


/* ELFSIGHT INSTAGRAM FEED */

.pfoten-instagram__feed {
    width: 100%;
    margin: 0 auto 42px;

    text-align: left;
}


/* BUTTON-BEREICH */

.pfoten-instagram__button-wrap {
    margin-top: 36px;
    text-align: center;
}


/* INSTAGRAM BUTTON */

.pfoten-instagram__button {
    display: inline-block;

    padding: 15px 28px;

    background: #c61c96;
    color: #ffffff !important;

    border-radius: 18px;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none !important;

    box-shadow:
        0 10px 22px rgba(198, 28, 150, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/* BUTTON HOVER */

.pfoten-instagram__button:hover {
    background: #ad1783;
    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(198, 28, 150, 0.28);
}


/* ABSCHLUSSTEXT */

.pfoten-instagram__footer {
    margin: 24px auto 0;

    color: rgb(148, 163, 184);

    font-size: 14px;
    text-align: center;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .pfoten-instagram__inner {
        padding: 60px 22px 52px;
    }

    .pfoten-instagram__title {
        font-size: 38px;
    }

    .pfoten-instagram__intro {
        font-size: 19px;
    }

}


/* =====================================================
   SMARTPHONE
===================================================== */

@media (max-width: 767px) {

    .pfoten-instagram {
        margin: 16px 0;
        border-radius: 24px;
    }

    .pfoten-instagram__inner {
        padding: 44px 16px 40px;
    }

    .pfoten-instagram__eyebrow {
        font-size: 11px;
        letter-spacing: 0.16em;
    }

    .pfoten-instagram__title {
        font-size: 32px;
        line-height: 1.2;
    }

    .pfoten-instagram__intro {
        font-size: 18px;
        line-height: 1.55;
    }

    .pfoten-instagram__text {
        margin-bottom: 32px;

        font-size: 15px;
        line-height: 1.65;
    }

    .pfoten-instagram__divider {
        margin-bottom: 32px;
    }

    .pfoten-instagram__feed {
        margin-bottom: 32px;
    }

    .pfoten-instagram__button-wrap {
        margin-top: 28px;
    }

    .pfoten-instagram__button {
        padding: 14px 24px;

        font-size: 15px;
    }

}


/* =====================================================
   KLEINE SMARTPHONES
===================================================== */

@media (max-width: 480px) {

    .pfoten-instagram__inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pfoten-instagram__title {
        font-size: 28px;
    }

    .pfoten-instagram__intro {
        font-size: 17px;
    }

}


/* =====================================================
   PFOTENLIEBE STUTTGART – TIKTOK SEITE
===================================================== */

.pfoten-tiktok {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 24px 0;

    border: 1px solid #e2e8f0;
    border-radius: 32px;

    background: linear-gradient(
        180deg,
        #f7fafa 0%,
        #ffffff 100%
    );

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}


/* INNERER BEREICH */

.pfoten-tiktok__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px 60px;
    text-align: center;
}


/* KLEINE ÜBERSCHRIFT */

.pfoten-tiktok__eyebrow {
    margin: 0 0 12px;

    color: #c61c96;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* H1 */

.pfoten-tiktok__title {
    margin: 0 0 18px;

    color: #48afb4;

    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
}


/* EINLEITUNG */

.pfoten-tiktok__intro {
    max-width: 780px;
    margin: 0 auto 16px;

    color: rgb(71, 85, 105);

    font-size: 20px;
    line-height: 1.65;
}


/* ZWEITER TEXT */

.pfoten-tiktok__text {
    max-width: 760px;
    margin: 0 auto 42px;

    color: rgb(100, 116, 139);

    font-size: 16px;
    line-height: 1.7;
}


/* TRENNLINIE */

.pfoten-tiktok__divider {
    width: 70px;
    height: 3px;

    margin: 0 auto 42px;

    background: #c61c96;
    border-radius: 10px;
}


/* ELFSIGHT TIKTOK FEED */

.pfoten-tiktok__feed {
    width: 100%;
    margin: 0 auto 42px;

    text-align: left;
}


/* BUTTON-BEREICH */

.pfoten-tiktok__button-wrap {
    margin-top: 36px;
    text-align: center;
}


/* TIKTOK BUTTON */

.pfoten-tiktok__button {
    display: inline-block;

    padding: 15px 28px;

    background: #c61c96;
    color: #ffffff !important;

    border-radius: 18px;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none !important;

    box-shadow:
        0 10px 22px rgba(198, 28, 150, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/* BUTTON HOVER */

.pfoten-tiktok__button:hover {
    background: #ad1783;
    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(198, 28, 150, 0.28);
}


/* ABSCHLUSSTEXT */

.pfoten-tiktok__footer {
    margin: 24px auto 0;

    color: rgb(148, 163, 184);

    font-size: 14px;
    text-align: center;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .pfoten-tiktok__inner {
        padding: 60px 22px 52px;
    }

    .pfoten-tiktok__title {
        font-size: 38px;
    }

    .pfoten-tiktok__intro {
        font-size: 19px;
    }

}


/* =====================================================
   SMARTPHONE
===================================================== */

@media (max-width: 767px) {

    .pfoten-tiktok {
        margin: 16px 0;
        border-radius: 24px;
    }

    .pfoten-tiktok__inner {
        padding: 44px 16px 40px;
    }

    .pfoten-tiktok__eyebrow {
        font-size: 11px;
        letter-spacing: 0.16em;
    }

    .pfoten-tiktok__title {
        font-size: 32px;
        line-height: 1.2;
    }

    .pfoten-tiktok__intro {
        font-size: 18px;
        line-height: 1.55;
    }

    .pfoten-tiktok__text {
        margin-bottom: 32px;

        font-size: 15px;
        line-height: 1.65;
    }

    .pfoten-tiktok__divider {
        margin-bottom: 32px;
    }

    .pfoten-tiktok__feed {
        margin-bottom: 32px;
    }

    .pfoten-tiktok__button-wrap {
        margin-top: 28px;
    }

    .pfoten-tiktok__button {
        padding: 14px 24px;
        font-size: 15px;
    }

}


/* =====================================================
   KLEINE SMARTPHONES
===================================================== */

@media (max-width: 480px) {

    .pfoten-tiktok__inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pfoten-tiktok__title {
        font-size: 28px;
    }

    .pfoten-tiktok__intro {
        font-size: 17px;
    }

}





/* =========================================================
   PFOTENLIEBE STUTTGART
   RATGEBER DETAILSEITE
   Farben:
   Pink    #c61c96
   Türkis  #48afb4
========================================================= */


/* =========================================================
   01 – GRUNDEINSTELLUNGEN
========================================================= */

.pf-ratgeber-detail {
    width: 100%;
    color: #0f172a;
    line-height: 1.65;
}

.pf-ratgeber-detail *,
.pf-ratgeber-detail *::before,
.pf-ratgeber-detail *::after {
    box-sizing: border-box;
}

.pf-ratgeber-detail img {
    max-width: 100%;
    height: auto;
}

.pf-ratgeber-detail h1,
.pf-ratgeber-detail h2,
.pf-ratgeber-detail h3,
.pf-ratgeber-detail p {
    word-wrap: break-word;
}


/* =========================================================
   02 – HERO
========================================================= */

.pf-ratgeber-hero {
    max-width: 1200px;
    margin: 24px auto 40px;
    padding: 52px;
    background: linear-gradient(135deg, #f2f2f2 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.pf-ratgeber-hero-grid {
    display: grid;
    grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
    gap: 58px;
    align-items: center;
}


/* =========================================================
   03 – HERO COVER
========================================================= */

.pf-ratgeber-cover-column {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
}

.pf-ratgeber-cover {
    display: block;
    width: 100%;
    border-radius: 30px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15);
}


/* =========================================================
   04 – INFO-KACHELN UNTER DEM COVER
========================================================= */

.pf-ratgeber-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.pf-ratgeber-meta-card {
    min-width: 0;
    padding: 14px 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    text-align: center;
}

.pf-ratgeber-meta-card span {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}

.pf-ratgeber-meta-card strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}


/* =========================================================
   05 – KLEINER TEXT UNTER DEM COVER
========================================================= */

.pf-ratgeber-brand-note {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.pf-ratgeber-brand-note p {
    max-width: 390px;
    margin: 0 auto;
    color: #475569;
    font-size: 15px;
    line-height: 1.65;
    text-align: center;
}


/* =========================================================
   06 – HERO TEXT
========================================================= */

.pf-ratgeber-hero-content {
    min-width: 0;
}

.pf-ratgeber-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 9px 16px;
    background: rgba(198, 28, 150, 0.08);
    border: 1px solid #c61c96;
    border-radius: 999px;
    color: #c61c96;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.pf-ratgeber-hero-content h1 {
    margin: 0 0 20px;
    color: #48afb4;
    font-size: 44px;
    line-height: 1.12;
    font-weight: 700;
}

.pf-ratgeber-hero-lead {
    margin: 0 0 17px;
    color: #0f172a;
    font-size: 21px;
    line-height: 1.5;
    font-weight: 600;
}

.pf-ratgeber-hero-text {
    margin: 0 0 15px;
    color: #475569;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   07 – HERO CHECKS
========================================================= */

.pf-ratgeber-checks {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 22px 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.5;
}


/* =========================================================
   08 – PREIS
========================================================= */

.pf-ratgeber-price {
    margin-top: 20px;
    color: #c61c96;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
}

.pf-ratgeber-price-note {
    margin: 5px 0 20px;
    color: #64748b;
    font-size: 14px;
}


/* =========================================================
   09 – BUTTONS
========================================================= */

.pf-ratgeber-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.pf-ratgeber-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 54px;
    padding: 15px 24px;
    border-radius: 17px;
    text-decoration: none !important;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.pf-ratgeber-btn:hover {
    transform: translateY(-2px);
    text-decoration: none !important;
}

.pf-ratgeber-btn-pink {
    background: #c61c96;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(198, 28, 150, 0.18);
}

.pf-ratgeber-btn-pink:hover {
    background: #ad1884;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(198, 28, 150, 0.24);
}

.pf-ratgeber-btn-dark {
    background: #0f172a;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.pf-ratgeber-btn-dark:hover {
    background: #1e293b;
    color: #ffffff !important;
}

.pf-ratgeber-small-note {
    margin: 13px 0 0;
    color: #64748b;
    font-size: 13px;
}


/* =========================================================
   10 – VERTRAUENSBLOCK
========================================================= */

.pf-ratgeber-trust {
    max-width: 1100px;
    margin: 0 auto 30px;
    padding: 0 24px;
}

.pf-ratgeber-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.07);
}

.pf-ratgeber-trust-grid > div {
    padding: 4px 14px;
    text-align: center;
}

.pf-ratgeber-trust-grid > div:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}

.pf-ratgeber-trust-grid strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.pf-ratgeber-trust-grid span {
    display: block;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   11 – ALLGEMEINE ABSCHNITTE
========================================================= */

.pf-ratgeber-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 24px;
}

.pf-ratgeber-section-soft {
    max-width: 1150px;
    margin: 30px auto;
    padding: 60px 40px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
}

.pf-ratgeber-section-head {
    max-width: 780px;
    margin: 0 auto 42px;
    text-align: center;
}

.pf-ratgeber-eyebrow {
    margin: 0 0 12px;
    color: #b45309;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pf-ratgeber-section-head h2 {
    margin: 0 0 17px;
    color: #c61c96;
    font-size: 38px;
    line-height: 1.16;
    font-weight: 700;
}

.pf-ratgeber-section-head > p:not(.pf-ratgeber-eyebrow) {
    margin: 0;
    color: #475569;
    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   12 – DREI KARTEN
========================================================= */

.pf-ratgeber-three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1050px;
    margin: 0 auto;
}

.pf-ratgeber-simple-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.pf-ratgeber-card-line {
    width: 100%;
    height: 6px;
    background: #48afb4;
}

.pf-ratgeber-simple-content {
    padding: 25px;
}

.pf-ratgeber-simple-content h3 {
    margin: 0 0 11px;
    color: #424242;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
}

.pf-ratgeber-simple-content p {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   13 – RATGEBER-INHALTE / THEMEN
========================================================= */

.pf-ratgeber-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 1050px;
    margin: 0 auto;
}

.pf-ratgeber-topic-card {
    position: relative;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
    overflow: hidden;
}

.pf-ratgeber-topic-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: #48afb4;
}

.pf-ratgeber-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 48px;
    height: 36px;
    margin-bottom: 16px;
    padding: 0 12px;
    background: rgba(72, 175, 180, 0.12);
    border-radius: 999px;
    color: #48afb4;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}

.pf-ratgeber-topic-card h3 {
    margin: 0 0 11px;
    color: #424242;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
}

.pf-ratgeber-topic-card p {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   14 – TÜRKISER "FÜR WEN"-BLOCK
========================================================= */

.pf-ratgeber-highlight-wrap {
    max-width: 1050px;
    margin: 25px auto 70px;
    padding: 0 24px;
}

.pf-ratgeber-highlight-wrap::before {
    content: "";
    display: block;
}

.pf-ratgeber-highlight {
    padding: 42px;
    background: #48afb4;
    border: 7px solid #ffffff;
    border-radius: 30px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    color: #ffffff;
}

.pf-ratgeber-highlight-eyebrow {
    margin: 0 0 11px;
    color: #fcd34d;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: center;
}

.pf-ratgeber-highlight h2 {
    max-width: 760px;
    margin: 0 auto 28px;
    color: #c61c96;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}

.pf-ratgeber-highlight-list {
    display: grid;
    gap: 11px;
    max-width: 800px;
    margin: 0 auto;
}

.pf-ratgeber-highlight-list > div {
    padding: 15px 18px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 17px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.55;
}

.pf-ratgeber-highlight-bottom {
    max-width: 760px;
    margin: 22px auto 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.65;
    text-align: center;
}


/* =========================================================
   15 – BENEFITS
========================================================= */

.pf-ratgeber-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.pf-ratgeber-benefit {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.pf-ratgeber-benefit > span {
    display: flex;
    flex: 0 0 42px;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background: rgba(72, 175, 180, 0.13);
    border-radius: 50%;
    color: #48afb4;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}

.pf-ratgeber-benefit h3 {
    margin: 0 0 7px;
    color: #424242;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.pf-ratgeber-benefit p {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   16 – KAUFBLOCK
========================================================= */

.pf-ratgeber-purchase-wrap {
    max-width: 1050px;
    margin: 20px auto 75px;
    padding: 0 24px;
}

.pf-ratgeber-purchase {
    display: grid;
    grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
    gap: 46px;
    align-items: center;
    padding: 38px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.pf-ratgeber-purchase-image {
    width: 100%;
}

.pf-ratgeber-purchase-image img {
    display: block;
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14);
}

.pf-ratgeber-purchase-content {
    min-width: 0;
}

.pf-ratgeber-purchase-content h2 {
    margin: 0 0 12px;
    color: #c61c96;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
}

.pf-ratgeber-purchase-lead {
    margin: 0 0 16px;
    color: #0f172a;
    font-size: 19px;
    line-height: 1.55;
    font-weight: 600;
}

.pf-ratgeber-purchase-content > p:not(.pf-ratgeber-eyebrow):not(.pf-ratgeber-purchase-lead):not(.pf-ratgeber-price-note):not(.pf-ratgeber-checkout-note) {
    margin: 0 0 20px;
    color: #475569;
    font-size: 16px;
    line-height: 1.7;
}

.pf-ratgeber-purchase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 20px 0 6px;
}

.pf-ratgeber-purchase-tags span {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    background: rgba(72, 175, 180, 0.10);
    border: 1px solid rgba(72, 175, 180, 0.25);
    border-radius: 999px;
    color: #397f83;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
}

.pf-ratgeber-purchase-content .pf-ratgeber-price {
    margin-top: 24px;
}

.pf-ratgeber-purchase-content .pf-ratgeber-btn {
    margin-top: 2px;
}

.pf-ratgeber-checkout-note {
    max-width: 520px;
    margin: 14px 0 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   17 – WICHTIGER HINWEIS
========================================================= */

.pf-ratgeber-notice {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto 70px;
    padding: 28px 30px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #48afb4;
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.pf-ratgeber-notice-icon {
    display: flex;
    flex: 0 0 44px;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: #48afb4;
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}

.pf-ratgeber-notice h2 {
    margin: 0 0 9px;
    color: #c61c96;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}

.pf-ratgeber-notice p {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   18 – ABSCHLUSSBLOCK
========================================================= */

.pf-ratgeber-closing {
    max-width: 1050px;
    margin: 0 auto 80px;
    padding: 52px 32px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
    text-align: center;
}

.pf-ratgeber-closing h2 {
    max-width: 760px;
    margin: 0 auto 17px;
    color: #c61c96;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
}

.pf-ratgeber-closing > p:not(.pf-ratgeber-eyebrow) {
    max-width: 720px;
    margin: 0 auto;
    color: #475569;
    font-size: 17px;
    line-height: 1.7;
}

.pf-ratgeber-divider {
    width: 70px;
    height: 3px;
    margin: 28px auto 22px;
    background: #48afb4;
    border-radius: 999px;
}

.pf-ratgeber-closing strong {
    display: block;
    margin-bottom: 5px;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.pf-ratgeber-closing span {
    display: block;
    color: #64748b;
    font-size: 15px;
    line-height: 1.5;
}


/* =========================================================
   19 – HOVER-EFFEKTE FÜR KARTEN
========================================================= */

.pf-ratgeber-simple-card,
.pf-ratgeber-topic-card,
.pf-ratgeber-benefit {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.pf-ratgeber-simple-card:hover,
.pf-ratgeber-topic-card:hover,
.pf-ratgeber-benefit:hover {
    transform: translateY(-3px);
    border-color: #d8e1e8;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
}


/* =========================================================
   20 – ANKER / SCROLL
========================================================= */

#ratgeber-inhalte {
    scroll-margin-top: 30px;
}


/* =========================================================
   21 – TABLET
========================================================= */

@media (max-width: 991px) {

    .pf-ratgeber-hero {
        margin: 20px 16px 35px;
        padding: 40px 30px;
    }

    .pf-ratgeber-hero-grid {
        grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
        gap: 38px;
    }

    .pf-ratgeber-hero-content h1 {
        font-size: 36px;
    }

    .pf-ratgeber-hero-lead {
        font-size: 19px;
    }

    .pf-ratgeber-section {
        padding: 58px 24px;
    }

    .pf-ratgeber-section-soft {
        margin: 25px 20px;
        padding: 50px 28px;
    }

    .pf-ratgeber-section-head h2 {
        font-size: 34px;
    }

    .pf-ratgeber-three-grid {
        gap: 18px;
    }

    .pf-ratgeber-purchase {
        gap: 32px;
        padding: 30px;
    }

    .pf-ratgeber-highlight {
        padding: 36px 30px;
    }
}


/* =========================================================
   22 – MOBILE / KLEINERE TABLETS
========================================================= */

@media (max-width: 767px) {

    .pf-ratgeber-hero {
        margin: 16px 12px 28px;
        padding: 28px 20px;
        border-radius: 26px;
    }

    .pf-ratgeber-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .pf-ratgeber-cover-column {
        max-width: 390px;
    }

    .pf-ratgeber-cover {
        border-radius: 24px;
    }

    .pf-ratgeber-hero-content {
        text-align: left;
    }

    .pf-ratgeber-badge {
        margin-bottom: 15px;
        padding: 8px 13px;
        font-size: 12px;
    }

    .pf-ratgeber-hero-content h1 {
        margin-bottom: 16px;
        font-size: 32px;
        line-height: 1.16;
    }

    .pf-ratgeber-hero-lead {
        font-size: 18px;
    }

    .pf-ratgeber-hero-text {
        font-size: 16px;
    }

    .pf-ratgeber-price {
        font-size: 30px;
    }

    .pf-ratgeber-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-ratgeber-btn {
        width: 100%;
    }


    /* TRUST */

    .pf-ratgeber-trust {
        padding: 0 12px;
    }

    .pf-ratgeber-trust-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 10px 22px;
    }

    .pf-ratgeber-trust-grid > div {
        padding: 18px 10px;
    }

    .pf-ratgeber-trust-grid > div:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }


    /* SECTIONS */

    .pf-ratgeber-section {
        padding: 52px 16px;
    }

    .pf-ratgeber-section-soft {
        margin: 20px 12px;
        padding: 46px 18px;
        border-radius: 26px;
    }

    .pf-ratgeber-section-head {
        margin-bottom: 30px;
    }

    .pf-ratgeber-section-head h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .pf-ratgeber-section-head > p:not(.pf-ratgeber-eyebrow) {
        font-size: 16px;
    }

    .pf-ratgeber-eyebrow {
        font-size: 11px;
        letter-spacing: 0.15em;
    }


    /* KARTEN */

    .pf-ratgeber-three-grid,
    .pf-ratgeber-topic-grid,
    .pf-ratgeber-benefit-grid {
        grid-template-columns: 1fr;
    }

    .pf-ratgeber-simple-content {
        padding: 22px;
    }

    .pf-ratgeber-topic-card {
        padding: 25px 22px;
    }


    /* FÜR WEN */

    .pf-ratgeber-highlight-wrap {
        margin: 20px auto 55px;
        padding: 0 12px;
    }

    .pf-ratgeber-highlight {
        padding: 32px 18px;
        border-width: 5px;
        border-radius: 26px;
    }

    .pf-ratgeber-highlight h2 {
        font-size: 28px;
    }

    .pf-ratgeber-highlight-list > div {
        padding: 14px;
        font-size: 15px;
    }


    /* KAUFBLOCK */

    .pf-ratgeber-purchase-wrap {
        margin-bottom: 55px;
        padding: 0 12px;
    }

    .pf-ratgeber-purchase {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 22px;
        border-radius: 26px;
    }

    .pf-ratgeber-purchase-image {
        max-width: 380px;
        margin: 0 auto;
    }

    .pf-ratgeber-purchase-content h2 {
        font-size: 30px;
    }


    /* HINWEIS */

    .pf-ratgeber-notice {
        margin: 0 12px 55px;
        padding: 24px 20px;
    }


    /* ABSCHLUSS */

    .pf-ratgeber-closing {
        margin: 0 12px 60px;
        padding: 42px 20px;
        border-radius: 26px;
    }

    .pf-ratgeber-closing h2 {
        font-size: 29px;
    }

    .pf-ratgeber-closing > p:not(.pf-ratgeber-eyebrow) {
        font-size: 16px;
    }
}


/* =========================================================
   23 – KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    .pf-ratgeber-hero {
        margin-left: 8px;
        margin-right: 8px;
        padding: 22px 16px;
        border-radius: 22px;
    }

    .pf-ratgeber-cover {
        border-radius: 20px;
    }

    .pf-ratgeber-meta-grid {
        gap: 6px;
    }

    .pf-ratgeber-meta-card {
        padding: 11px 5px;
        border-radius: 14px;
    }

    .pf-ratgeber-meta-card span {
        font-size: 10px;
    }

    .pf-ratgeber-meta-card strong {
        font-size: 13px;
    }

    .pf-ratgeber-hero-content h1 {
        font-size: 28px;
    }

    .pf-ratgeber-hero-lead {
        font-size: 17px;
    }

    .pf-ratgeber-checks {
        font-size: 14px;
    }

    .pf-ratgeber-section-head h2 {
        font-size: 27px;
    }

    .pf-ratgeber-simple-content h3,
    .pf-ratgeber-topic-card h3 {
        font-size: 19px;
    }

    .pf-ratgeber-benefit {
        gap: 13px;
        padding: 20px 17px;
    }

    .pf-ratgeber-benefit > span {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .pf-ratgeber-highlight h2 {
        font-size: 25px;
    }

    .pf-ratgeber-purchase {
        padding: 18px;
    }

    .pf-ratgeber-purchase-content h2 {
        font-size: 27px;
    }

    .pf-ratgeber-purchase-lead {
        font-size: 17px;
    }

    .pf-ratgeber-notice {
        flex-direction: column;
        gap: 15px;
        margin-left: 8px;
        margin-right: 8px;
    }

    .pf-ratgeber-closing {
        margin-left: 8px;
        margin-right: 8px;
        padding: 36px 17px;
    }

    .pf-ratgeber-closing h2 {
        font-size: 26px;
    }
}


/* =========================================================
   24 – TOUCH-GERÄTE
   Keine unnötigen Hover-Bewegungen
========================================================= */

@media (hover: none) {

    .pf-ratgeber-simple-card:hover,
    .pf-ratgeber-topic-card:hover,
    .pf-ratgeber-benefit:hover,
    .pf-ratgeber-btn:hover {
        transform: none;
    }
}


/* =========================================================
   25 – BARRIEREARMUT / REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pf-ratgeber-simple-card,
    .pf-ratgeber-topic-card,
    .pf-ratgeber-benefit,
    .pf-ratgeber-btn {
        transition: none;
    }
}



/* =========================================================
   PFOTENLIEBE STUTTGART
   RATGEBER – ÜBERSICHTSSEITE

   Pink:    #c61c96
   Türkis:  #48afb4
========================================================= */


/* =========================================================
   01 – BASIS
========================================================= */

.pf-ratgeber-overview-page {
    width: 100%;
    color: #0f172a;
    line-height: 1.65;
}

.pf-ratgeber-overview-page *,
.pf-ratgeber-overview-page *::before,
.pf-ratgeber-overview-page *::after {
    box-sizing: border-box;
}

.pf-ratgeber-overview-page img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   02 – HERO
========================================================= */

.pf-ro-hero {
    margin: 24px;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

    border: 1px solid #e2e8f0;
    border-radius: 32px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06);
}

.pf-ro-hero-inner {
    max-width: 920px;
    margin: 0 auto;

    padding: 72px 32px;

    text-align: center;
}


/* Badge */

.pf-ro-badge {
    display: inline-flex;

    margin-bottom: 17px;
    padding: 10px 16px;

    background: rgba(198, 28, 150, 0.08);

    border: 1px solid #c61c96;
    border-radius: 999px;

    color: #c61c96;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}


/* H1 */

.pf-ro-hero h1 {
    max-width: 900px;

    margin: 0 auto 18px;

    color: #48afb4;

    font-size: 44px;
    line-height: 1.12;
    font-weight: 700;
}


/* Lead */

.pf-ro-hero-lead {
    max-width: 780px;

    margin: 0 auto 16px;

    color: #0f172a;

    font-size: 21px;
    line-height: 1.55;
    font-weight: 600;
}


/* Hero Text */

.pf-ro-hero-text {
    max-width: 760px;

    margin: 0 auto 12px;

    color: #475569;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   03 – ALLGEMEINE SECTION
========================================================= */

.pf-ro-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 64px 24px;
}


/* =========================================================
   04 – SECTION HEAD
========================================================= */

.pf-ro-section-head {
    max-width: 820px;

    margin: 0 auto 40px;

    text-align: center;
}


/* Eyebrow */

.pf-ro-eyebrow {
    margin: 0 0 12px;

    color: #b45309;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


/* Überschrift */

.pf-ro-section-head h2 {
    margin: 0 0 16px;

    color: #c61c96;

    font-size: 38px;
    line-height: 1.18;

    font-weight: 700;
}


/* Beschreibung */

.pf-ro-section-head > p:not(.pf-ro-eyebrow):not(.pf-ro-mini-points) {
    max-width: 760px;

    margin: 0 auto;

    color: #475569;

    font-size: 18px;
    line-height: 1.7;
}


/* Mini Points */

.pf-ro-mini-points {
    margin: 14px 0 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   05 – ORIENTIERUNGSKARTEN
========================================================= */

.pf-ro-orientation-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    max-width: 1050px;

    margin: 0 auto;
}


.pf-ro-orientation-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 24px;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.055);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.pf-ro-orientation-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 16px 34px rgba(15, 23, 42, 0.09);
}


/* Türkise Linie */

.pf-ro-card-topline {
    width: 100%;
    height: 6px;

    background: #48afb4;
}


.pf-ro-orientation-content {
    padding: 25px;
}


.pf-ro-orientation-content h3 {
    margin: 0 0 10px;

    color: #424242;

    font-size: 21px;
    line-height: 1.3;

    font-weight: 700;
}


.pf-ro-orientation-content p {
    margin: 0;

    color: #475569;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   06 – RATGEBER SECTION
========================================================= */

.pf-ro-ratgeber-section {
    padding-top: 35px;
}


/* =========================================================
   07 – RATGEBER LISTE
========================================================= */

.pf-ro-ratgeber-list {
    display: flex;
    flex-direction: column;

    gap: 30px;

    max-width: 1050px;

    margin: 0 auto;
}


/* =========================================================
   08 – RATGEBER ZEILE
========================================================= */

.pf-ro-ratgeber-row {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(260px, 370px)
        minmax(0, 1fr);

    gap: 42px;

    align-items: center;

    padding: 28px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 28px;

    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.065);

    overflow: hidden;
}


/* obere Linie */

.pf-ro-ratgeber-row::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background: #48afb4;
}


/* =========================================================
   09 – RATGEBER COVER
========================================================= */

.pf-ro-ratgeber-image {
    width: 100%;
}


.pf-ro-ratgeber-image a {
    display: block;

    text-decoration: none;
}


.pf-ro-ratgeber-image img {
    display: block;

    width: 100%;

    border-radius: 22px;

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.13);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.pf-ro-ratgeber-image a:hover img {
    transform: translateY(-3px);

    box-shadow:
        0 22px 48px rgba(15, 23, 42, 0.17);
}


/* =========================================================
   10 – RATGEBER INHALT
========================================================= */

.pf-ro-ratgeber-content {
    min-width: 0;
}


/* Label */

.pf-ro-ratgeber-label {
    display: inline-flex;

    margin-bottom: 12px;

    padding: 7px 12px;

    background: rgba(198, 28, 150, 0.08);

    border-radius: 999px;

    color: #c61c96;

    font-size: 12px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* Titel */

.pf-ro-ratgeber-content h3 {
    margin: 0 0 8px;

    color: #c61c96;

    font-size: 30px;
    line-height: 1.2;

    font-weight: 700;
}


/* Untertitel */

.pf-ro-ratgeber-subtitle {
    margin: 0 0 15px;

    color: #0f172a;

    font-size: 18px;
    line-height: 1.5;

    font-weight: 600;
}


/* Beschreibung */

.pf-ro-ratgeber-description {
    margin: 0 0 18px;

    color: #475569;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   11 – RATGEBER PUNKTE
========================================================= */

.pf-ro-ratgeber-points {
    margin: 0 0 20px;
    padding: 0;

    list-style: none;
}


.pf-ro-ratgeber-points li {
    position: relative;

    margin: 0 0 7px;

    padding-left: 24px;

    color: #475569;

    font-size: 15px;
    line-height: 1.55;
}


.pf-ro-ratgeber-points li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color: #48afb4;

    font-weight: 700;
}


/* =========================================================
   12 – META TAGS
========================================================= */

.pf-ro-ratgeber-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin: 0 0 22px;
}


.pf-ro-ratgeber-meta span {
    display: inline-flex;
    align-items: center;

    padding: 7px 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 999px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.3;

    font-weight: 600;
}


/* Preis etwas hervorheben */

.pf-ro-ratgeber-meta span:last-child {
    background: rgba(198, 28, 150, 0.07);

    border-color: rgba(198, 28, 150, 0.18);

    color: #c61c96;

    font-weight: 700;
}


/* =========================================================
   13 – BUTTONS
========================================================= */

.pf-ro-btn {
    display: inline-flex;

    justify-content: center;
    align-items: center;

    min-height: 52px;

    padding: 14px 23px;

    border-radius: 17px;

    text-decoration: none !important;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 700;

    text-align: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.pf-ro-btn:hover {
    transform: translateY(-2px);

    text-decoration: none !important;
}


.pf-ro-btn-turquoise {
    background: #48afb4;

    color: #ffffff !important;

    box-shadow:
        0 10px 22px rgba(72, 175, 180, 0.18);
}


.pf-ro-btn-turquoise:hover {
    background: #3d9da2;

    color: #ffffff !important;

    box-shadow:
        0 14px 28px rgba(72, 175, 180, 0.24);
}


/* =========================================================
   14 – UNTERSCHIED MERKZETTEL / RATGEBER
========================================================= */

.pf-ro-difference-wrap {
    max-width: 1000px;

    margin: 20px auto 65px;

    padding: 0 24px;
}


.pf-ro-difference {
    display: flex;

    align-items: flex-start;

    gap: 24px;

    padding: 34px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 28px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06);
}


/* Info Icon */

.pf-ro-info-icon {
    display: flex;

    flex: 0 0 46px;

    justify-content: center;
    align-items: center;

    width: 46px;
    height: 46px;

    background: #48afb4;

    border-radius: 50%;

    color: #ffffff;

    font-size: 21px;
    line-height: 1;

    font-weight: 700;
}


.pf-ro-difference-content {
    min-width: 0;
}


.pf-ro-difference-content .pf-ro-eyebrow {
    margin-bottom: 8px;
}


.pf-ro-difference-content h2 {
    margin: 0 0 13px;

    color: #c61c96;

    font-size: 28px;
    line-height: 1.25;

    font-weight: 700;
}


.pf-ro-difference-content > p:not(.pf-ro-eyebrow) {
    max-width: 780px;

    margin: 0 0 16px;

    color: #475569;

    font-size: 16px;
    line-height: 1.7;
}


/* Text Link */

.pf-ro-text-link {
    display: inline-block;

    color: #48afb4 !important;

    text-decoration: none !important;

    font-size: 15px;

    font-weight: 700;
}


.pf-ro-text-link:hover {
    text-decoration: underline !important;
}


/* =========================================================
   15 – WEITERE RATGEBER FOLGEN
========================================================= */

.pf-ro-coming {
    max-width: 1000px;

    margin: 0 auto 40px;

    padding: 0 24px;
}


.pf-ro-coming-inner {
    padding: 38px 30px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 28px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.05);

    text-align: center;
}


.pf-ro-coming-inner h2 {
    margin: 0 0 13px;

    color: #c61c96;

    font-size: 30px;
    line-height: 1.25;

    font-weight: 700;
}


.pf-ro-coming-inner > p:not(.pf-ro-eyebrow) {
    max-width: 700px;

    margin: 0 auto;

    color: #475569;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   16 – ABSCHLUSS
========================================================= */

.pf-ro-closing {
    max-width: 1000px;

    margin: 0 auto 80px;

    padding: 0 24px;
}


.pf-ro-closing-inner {
    padding: 48px 30px;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

    border: 1px solid #e2e8f0;
    border-radius: 28px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06);

    text-align: center;
}


.pf-ro-closing-inner h2 {
    max-width: 720px;

    margin: 0 auto 14px;

    color: #c61c96;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 700;
}


.pf-ro-closing-inner > p:not(.pf-ro-eyebrow) {
    max-width: 680px;

    margin: 0 auto;

    color: #475569;

    font-size: 17px;
    line-height: 1.7;
}


/* Divider */

.pf-ro-divider {
    width: 70px;
    height: 3px;

    margin: 27px auto 20px;

    background: #48afb4;

    border-radius: 999px;
}


.pf-ro-closing-inner strong {
    display: block;

    margin-bottom: 4px;

    color: #0f172a;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 700;
}


.pf-ro-closing-inner span {
    display: block;

    color: #64748b;

    font-size: 15px;
    line-height: 1.5;
}


/* =========================================================
   17 – TABLET
========================================================= */

@media (max-width: 991px) {

    .pf-ro-hero {
        margin: 20px 16px;
    }

    .pf-ro-hero-inner {
        padding: 60px 28px;
    }

    .pf-ro-hero h1 {
        font-size: 39px;
    }

    .pf-ro-section {
        padding: 56px 22px;
    }

    .pf-ro-section-head h2 {
        font-size: 34px;
    }

    .pf-ro-orientation-grid {
        gap: 18px;
    }

    .pf-ro-ratgeber-row {
        grid-template-columns:
            minmax(230px, 310px)
            minmax(0, 1fr);

        gap: 30px;

        padding: 24px;
    }

    .pf-ro-ratgeber-content h3 {
        font-size: 28px;
    }
}


/* =========================================================
   18 – MOBILE
========================================================= */

@media (max-width: 767px) {

    /* HERO */

    .pf-ro-hero {
        margin: 16px 12px 25px;

        border-radius: 26px;
    }

    .pf-ro-hero-inner {
        padding: 48px 20px;
    }

    .pf-ro-badge {
        padding: 8px 13px;

        font-size: 12px;
    }

    .pf-ro-hero h1 {
        font-size: 32px;
        line-height: 1.16;
    }

    .pf-ro-hero-lead {
        font-size: 18px;
    }

    .pf-ro-hero-text {
        font-size: 16px;
    }


    /* SECTIONS */

    .pf-ro-section {
        padding: 48px 16px;
    }

    .pf-ro-section-head {
        margin-bottom: 30px;
    }

    .pf-ro-eyebrow {
        font-size: 11px;

        letter-spacing: 0.15em;
    }

    .pf-ro-section-head h2 {
        font-size: 29px;
        line-height: 1.2;
    }

    .pf-ro-section-head > p:not(.pf-ro-eyebrow):not(.pf-ro-mini-points) {
        font-size: 16px;
    }

    .pf-ro-mini-points {
        font-size: 13px;
    }


    /* ORIENTIERUNG */

    .pf-ro-orientation-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    /* RATGEBER */

    .pf-ro-ratgeber-section {
        padding-top: 25px;
    }

    .pf-ro-ratgeber-row {
        grid-template-columns: 1fr;

        gap: 28px;

        padding: 20px;

        border-radius: 25px;
    }

    .pf-ro-ratgeber-image {
        max-width: 400px;

        margin: 0 auto;
    }

    .pf-ro-ratgeber-image img {
        border-radius: 20px;
    }

    .pf-ro-ratgeber-content h3 {
        font-size: 28px;
    }

    .pf-ro-ratgeber-subtitle {
        font-size: 17px;
    }

    .pf-ro-ratgeber-description {
        font-size: 15px;
    }

    .pf-ro-ratgeber-meta {
        margin-bottom: 20px;
    }

    .pf-ro-btn {
        width: 100%;
    }


    /* MERKZETTEL / RATGEBER */

    .pf-ro-difference-wrap {
        margin-bottom: 50px;

        padding: 0 12px;
    }

    .pf-ro-difference {
        flex-direction: column;

        gap: 16px;

        padding: 26px 22px;

        border-radius: 25px;
    }

    .pf-ro-difference-content h2 {
        font-size: 26px;
    }


    /* WEITERE RATGEBER */

    .pf-ro-coming {
        padding: 0 12px;
    }

    .pf-ro-coming-inner {
        padding: 34px 20px;

        border-radius: 25px;
    }

    .pf-ro-coming-inner h2 {
        font-size: 27px;
    }


    /* ABSCHLUSS */

    .pf-ro-closing {
        margin-bottom: 60px;

        padding: 0 12px;
    }

    .pf-ro-closing-inner {
        padding: 40px 20px;

        border-radius: 25px;
    }

    .pf-ro-closing-inner h2 {
        font-size: 28px;
    }

    .pf-ro-closing-inner > p:not(.pf-ro-eyebrow) {
        font-size: 16px;
    }
}


/* =========================================================
   19 – KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    .pf-ro-hero {
        margin-left: 8px;
        margin-right: 8px;

        border-radius: 22px;
    }

    .pf-ro-hero-inner {
        padding: 40px 16px;
    }

    .pf-ro-hero h1 {
        font-size: 28px;
    }

    .pf-ro-hero-lead {
        font-size: 17px;
    }

    .pf-ro-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pf-ro-section-head h2 {
        font-size: 27px;
    }

    .pf-ro-orientation-content {
        padding: 21px;
    }

    .pf-ro-ratgeber-row {
        padding: 16px;
    }

    .pf-ro-ratgeber-content h3 {
        font-size: 26px;
    }

    .pf-ro-ratgeber-label {
        font-size: 11px;
    }

    .pf-ro-ratgeber-points li {
        font-size: 14px;
    }

    .pf-ro-ratgeber-meta span {
        font-size: 11px;
    }

    .pf-ro-difference-wrap,
    .pf-ro-coming,
    .pf-ro-closing {
        padding-left: 8px;
        padding-right: 8px;
    }

    .pf-ro-difference {
        padding: 23px 18px;
    }

    .pf-ro-coming-inner {
        padding: 30px 17px;
    }

    .pf-ro-closing-inner {
        padding: 35px 17px;
    }
}


/* =========================================================
   20 – TOUCH
========================================================= */

@media (hover: none) {

    .pf-ro-orientation-card:hover,
    .pf-ro-ratgeber-image a:hover img,
    .pf-ro-btn:hover {
        transform: none;
    }
}


/* =========================================================
   21 – REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pf-ro-orientation-card,
    .pf-ro-ratgeber-image img,
    .pf-ro-btn {
        transition: none;
    }
}

/* =========================================================
   PFOTENLIEBE STUTTGART
   KOSTENLOSE MERKZETTEL
========================================================= */


/* =========================================================
   01 – BASIS
========================================================= */

.pf-merkzettel-page {
    width: 100%;
    color: #0f172a;
    line-height: 1.65;
}

.pf-merkzettel-page *,
.pf-merkzettel-page *::before,
.pf-merkzettel-page *::after {
    box-sizing: border-box;
}

.pf-merkzettel-page img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   02 – HERO
========================================================= */

.pf-mz-hero {
    margin: 24px;
    overflow: hidden;

    background: linear-gradient(
        180deg,
        #f8fafc 0%,
        #ffffff 100%
    );

    border: 1px solid #e2e8f0;
    border-radius: 32px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06);
}

.pf-mz-hero-inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 72px 32px;
    text-align: center;
}


/* Badge */

.pf-mz-badge {
    display: inline-flex;

    margin-bottom: 17px;
    padding: 10px 16px;

    background: rgba(198, 28, 150, 0.08);

    border: 1px solid #c61c96;
    border-radius: 999px;

    color: #c61c96;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}


/* H1 */

.pf-mz-hero h1 {
    max-width: 900px;

    margin: 0 auto 18px;

    color: #48afb4;

    font-size: 44px;
    line-height: 1.12;
    font-weight: 700;
}


/* Lead */

.pf-mz-hero-lead {
    max-width: 780px;

    margin: 0 auto 16px;

    color: #0f172a;

    font-size: 21px;
    line-height: 1.55;
    font-weight: 600;
}


/* Text */

.pf-mz-hero-text {
    max-width: 760px;

    margin: 0 auto 12px;

    color: #475569;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   03 – ALLGEMEINE SECTION
========================================================= */

.pf-mz-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 64px 24px;
}


/* =========================================================
   04 – SECTION HEAD
========================================================= */

.pf-mz-section-head {
    max-width: 820px;

    margin: 0 auto 40px;

    text-align: center;
}


.pf-mz-eyebrow {
    margin: 0 0 12px;

    color: #b45309;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.pf-mz-section-head h2 {
    margin: 0 0 16px;

    color: #c61c96;

    font-size: 38px;
    line-height: 1.18;

    font-weight: 700;
}


.pf-mz-section-head > p:not(.pf-mz-eyebrow) {
    max-width: 760px;

    margin: 0 auto;

    color: #475569;

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   05 – VORTEILSKARTEN
========================================================= */

.pf-mz-benefit-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    max-width: 1050px;

    margin: 0 auto;
}


.pf-mz-benefit-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 24px;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.055);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.pf-mz-benefit-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 16px 34px rgba(15, 23, 42, 0.09);
}


.pf-mz-card-line {
    width: 100%;
    height: 6px;

    background: #48afb4;
}


.pf-mz-benefit-content {
    padding: 25px;
}


.pf-mz-benefit-content h3 {
    margin: 0 0 10px;

    color: #424242;

    font-size: 21px;
    line-height: 1.3;

    font-weight: 700;
}


.pf-mz-benefit-content p {
    margin: 0;

    color: #475569;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   06 – ELFSIGHT / DOWNLOADS
========================================================= */

.pf-mz-download-section {
    max-width: 1150px;

    margin: 25px auto 65px;

    padding: 58px 32px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 30px;
}


.pf-mz-elfsight-wrap {
    width: 100%;
    max-width: 1080px;

    margin: 0 auto;
}


/*
   Elfsight bekommt bewusst keine aggressiven
   globalen Styles. Das Widget soll seine eigene
   Darstellung vollständig beibehalten.
*/


/* =========================================================
   07 – WICHTIGER HINWEIS
========================================================= */

.pf-mz-notice {
    display: flex;

    align-items: flex-start;

    gap: 22px;

    max-width: 900px;

    margin: 0 auto 65px;

    padding: 28px 30px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-left: 5px solid #48afb4;
    border-radius: 22px;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.05);
}


.pf-mz-notice-icon {
    display: flex;

    flex: 0 0 44px;

    justify-content: center;
    align-items: center;

    width: 44px;
    height: 44px;

    background: #48afb4;

    border-radius: 50%;

    color: #ffffff;

    font-size: 20px;
    line-height: 1;

    font-weight: 700;
}


.pf-mz-notice-content {
    min-width: 0;
}


.pf-mz-notice h2 {
    margin: 0 0 10px;

    color: #c61c96;

    font-size: 23px;
    line-height: 1.3;

    font-weight: 700;
}


.pf-mz-notice p {
    margin: 0 0 10px;

    color: #475569;

    font-size: 15px;
    line-height: 1.7;
}


.pf-mz-notice p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   08 – RATGEBER CTA
========================================================= */

.pf-mz-ratgeber {
    max-width: 1000px;

    margin: 0 auto 40px;

    padding: 0 24px;
}


.pf-mz-ratgeber-inner {
    padding: 42px 32px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 28px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06);

    text-align: center;
}


.pf-mz-ratgeber-inner h2 {
    max-width: 720px;

    margin: 0 auto 15px;

    color: #c61c96;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 700;
}


.pf-mz-ratgeber-inner > p:not(.pf-mz-eyebrow) {
    max-width: 720px;

    margin: 0 auto 24px;

    color: #475569;

    font-size: 17px;
    line-height: 1.7;
}


/* Button */

.pf-mz-btn {
    display: inline-flex;

    justify-content: center;
    align-items: center;

    min-height: 52px;

    padding: 14px 24px;

    background: #48afb4;

    border-radius: 17px;

    box-shadow:
        0 10px 22px rgba(72, 175, 180, 0.18);

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.pf-mz-btn:hover {
    transform: translateY(-2px);

    background: #3d9da2;

    box-shadow:
        0 14px 28px rgba(72, 175, 180, 0.24);

    color: #ffffff !important;

    text-decoration: none !important;
}


/* =========================================================
   09 – ABSCHLUSS
========================================================= */

.pf-mz-closing {
    max-width: 1000px;

    margin: 0 auto 80px;

    padding: 0 24px;
}


.pf-mz-closing-inner {
    padding: 48px 30px;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

    border: 1px solid #e2e8f0;
    border-radius: 28px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06);

    text-align: center;
}


.pf-mz-closing-inner h2 {
    max-width: 720px;

    margin: 0 auto 14px;

    color: #c61c96;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 700;
}


.pf-mz-closing-inner > p:not(.pf-mz-eyebrow) {
    max-width: 680px;

    margin: 0 auto;

    color: #475569;

    font-size: 17px;
    line-height: 1.7;
}


.pf-mz-divider {
    width: 70px;
    height: 3px;

    margin: 27px auto 20px;

    background: #48afb4;

    border-radius: 999px;
}


.pf-mz-closing-inner strong {
    display: block;

    margin-bottom: 4px;

    color: #0f172a;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 700;
}


.pf-mz-closing-inner span {
    display: block;

    color: #64748b;

    font-size: 15px;
    line-height: 1.5;
}


/* =========================================================
   10 – ELFSIGHT ABSTÄNDE
========================================================= */

.pf-mz-elfsight-wrap {
    position: relative;

    width: 100%;

    min-height: 50px;
}


/*
   Das eigentliche Elfsight-Widget wird absichtlich
   nicht verändert.

   Dadurch bleiben:
   - Karten
   - Buttons
   - Vorschaubilder
   - Download-Funktion
   - responsive Darstellung

   vollständig unter der Kontrolle von Elfsight.
*/


/* =========================================================
   11 – ANKER
========================================================= */

#merkzettel {
    scroll-margin-top: 30px;
}


/* =========================================================
   12 – TABLET
========================================================= */

@media (max-width: 991px) {

    /* HERO */

    .pf-mz-hero {
        margin: 20px 16px;
    }

    .pf-mz-hero-inner {
        padding: 60px 28px;
    }

    .pf-mz-hero h1 {
        font-size: 39px;
    }


    /* ALLGEMEINE ABSCHNITTE */

    .pf-mz-section {
        padding: 56px 22px;
    }

    .pf-mz-section-head h2 {
        font-size: 34px;
    }


    /* VORTEILE */

    .pf-mz-benefit-grid {
        gap: 18px;
    }


    /* ELFSIGHT */

    .pf-mz-download-section {
        margin-left: 20px;
        margin-right: 20px;

        padding: 50px 26px;
    }


    /* RATGEBER */

    .pf-mz-ratgeber-inner {
        padding: 38px 28px;
    }
}


/* =========================================================
   13 – MOBILE
========================================================= */

@media (max-width: 767px) {

    /* HERO */

    .pf-mz-hero {
        margin: 16px 12px 25px;

        border-radius: 26px;
    }

    .pf-mz-hero-inner {
        padding: 48px 20px;
    }

    .pf-mz-badge {
        padding: 8px 13px;

        font-size: 12px;
    }

    .pf-mz-hero h1 {
        font-size: 32px;
        line-height: 1.16;
    }

    .pf-mz-hero-lead {
        font-size: 18px;
    }

    .pf-mz-hero-text {
        font-size: 16px;
    }


    /* SECTIONS */

    .pf-mz-section {
        padding: 48px 16px;
    }

    .pf-mz-section-head {
        margin-bottom: 30px;
    }

    .pf-mz-eyebrow {
        font-size: 11px;

        letter-spacing: 0.15em;
    }

    .pf-mz-section-head h2 {
        font-size: 29px;
        line-height: 1.2;
    }

    .pf-mz-section-head > p:not(.pf-mz-eyebrow) {
        font-size: 16px;
    }


    /* VORTEILE */

    .pf-mz-benefit-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .pf-mz-benefit-content {
        padding: 22px;
    }


    /* ELFSIGHT */

    .pf-mz-download-section {
        margin: 20px 12px 50px;

        padding: 42px 16px;

        border-radius: 26px;
    }

    .pf-mz-download-section .pf-mz-section-head {
        margin-bottom: 28px;
    }


    /* HINWEIS */

    .pf-mz-notice {
        flex-direction: column;

        gap: 16px;

        margin: 0 12px 50px;

        padding: 24px 20px;

        border-radius: 22px;
    }

    .pf-mz-notice h2 {
        font-size: 22px;
    }


    /* RATGEBER */

    .pf-mz-ratgeber {
        padding: 0 12px;
    }

    .pf-mz-ratgeber-inner {
        padding: 36px 20px;

        border-radius: 25px;
    }

    .pf-mz-ratgeber-inner h2 {
        font-size: 28px;
    }

    .pf-mz-ratgeber-inner > p:not(.pf-mz-eyebrow) {
        font-size: 16px;
    }

    .pf-mz-btn {
        width: 100%;
    }


    /* ABSCHLUSS */

    .pf-mz-closing {
        margin-bottom: 60px;

        padding: 0 12px;
    }

    .pf-mz-closing-inner {
        padding: 40px 20px;

        border-radius: 25px;
    }

    .pf-mz-closing-inner h2 {
        font-size: 28px;
    }

    .pf-mz-closing-inner > p:not(.pf-mz-eyebrow) {
        font-size: 16px;
    }
}


/* =========================================================
   14 – KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    /* HERO */

    .pf-mz-hero {
        margin-left: 8px;
        margin-right: 8px;

        border-radius: 22px;
    }

    .pf-mz-hero-inner {
        padding: 40px 16px;
    }

    .pf-mz-hero h1 {
        font-size: 28px;
    }

    .pf-mz-hero-lead {
        font-size: 17px;
    }


    /* SECTION */

    .pf-mz-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pf-mz-section-head h2 {
        font-size: 27px;
    }


    /* KARTEN */

    .pf-mz-benefit-content {
        padding: 20px;
    }

    .pf-mz-benefit-content h3 {
        font-size: 19px;
    }


    /* ELFSIGHT */

    .pf-mz-download-section {
        margin-left: 8px;
        margin-right: 8px;

        padding: 36px 12px;

        border-radius: 22px;
    }


    /* HINWEIS */

    .pf-mz-notice {
        margin-left: 8px;
        margin-right: 8px;

        padding: 22px 17px;
    }


    /* RATGEBER */

    .pf-mz-ratgeber {
        padding-left: 8px;
        padding-right: 8px;
    }

    .pf-mz-ratgeber-inner {
        padding: 32px 17px;
    }

    .pf-mz-ratgeber-inner h2 {
        font-size: 26px;
    }


    /* ABSCHLUSS */

    .pf-mz-closing {
        padding-left: 8px;
        padding-right: 8px;
    }

    .pf-mz-closing-inner {
        padding: 35px 17px;
    }

    .pf-mz-closing-inner h2 {
        font-size: 26px;
    }
}


/* =========================================================
   15 – TOUCH-GERÄTE
========================================================= */

@media (hover: none) {

    .pf-mz-benefit-card:hover,
    .pf-mz-btn:hover {
        transform: none;
    }
}


/* =========================================================
   16 – REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pf-mz-benefit-card,
    .pf-mz-btn {
        transition: none;
    }
}

/* =========================================================
   SEO-THEMENBEREICH
========================================================= */

.pf-mz-seo-section {
    max-width: 1000px;
    margin: 0 auto 65px;
    padding: 0 24px;
}

.pf-mz-seo-inner {
    padding: 38px 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.pf-mz-seo-inner h2 {
    margin: 0 0 18px;
    color: #c61c96;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
}

.pf-mz-seo-inner > p:not(.pf-mz-eyebrow) {
    margin: 0 0 15px;
    color: #475569;
    font-size: 16px;
    line-height: 1.75;
}

.pf-mz-seo-inner strong {
    color: #0f172a;
    font-weight: 600;
}

.pf-mz-seo-inner .pf-mz-seo-note {
    margin-bottom: 0;
    color: #64748b;
    font-size: 14px;
}

@media (max-width: 767px) {

    .pf-mz-seo-section {
        margin-bottom: 50px;
        padding: 0 12px;
    }

    .pf-mz-seo-inner {
        padding: 28px 22px;
        border-radius: 25px;
    }

    .pf-mz-seo-inner h2 {
        font-size: 27px;
    }

    .pf-mz-seo-inner > p:not(.pf-mz-eyebrow) {
        font-size: 15px;
    }
}

@media (max-width: 480px) {

    .pf-mz-seo-section {
        padding: 0 8px;
    }

    .pf-mz-seo-inner {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .pf-mz-seo-inner h2 {
        font-size: 25px;
    }
}