/**
 * Sections: About Page & Personal Training
 *
 * Styles for about-page & personal-training specific sections:
 *  - Page Hero
 *  - Werte Grid
 *  - Timeline
 *  - Testimonials Slider
 *  - Video Section
 *  - Zielgruppen
 *  - Gesundheits Netzwerk (Schaubild)
 *  - Pakete & Ablauf
 *  - FAQ Accordion
 *
 * @package ReloadPT
 * @since   1.0.0
 */


/* ══════════════════════════════════════════════════════════════
   1. PAGE HERO
   ══════════════════════════════════════════════════════════════ */

.page-hero {
    position: relative;
    min-height: 80vh;
    max-height: 820px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-bg, #f8f9fa);
}

.page-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Helles Overlay: links stärker (für die Karte), nach rechts luftig */
.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(255, 255, 255, 0.15) 100%
    );
}

.page-hero__container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.page-hero__content {
    padding-block: 2rem;
}

.page-hero__card {
    max-width: 560px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
}

.page-hero__overline {
    color: var(--color-primary, #65AF02);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: block;
}

.page-hero__title {
    color: var(--color-dark, #111827);
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.page-hero__subtitle {
    color: var(--color-gray-600, #4b5563);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}


/* ══════════════════════════════════════════════════════════════
   2. WERTE GRID
   ══════════════════════════════════════════════════════════════ */

.werte-grid {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.werte-grid__header {
    margin-bottom: 3.5rem;
}

.werte-grid__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-dark, #1f2937);
    margin: 0.5rem 0 0;
}

.werte-grid__intro {
    max-width: 640px;
    margin: 1rem auto 0;
    color: var(--color-text-secondary, #6b7280);
    font-size: 1.05rem;
    line-height: 1.7;
}

.werte-grid__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.werte-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.section--gray .werte-card {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.werte-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.werte-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(101, 175, 2, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--color-primary, #65AF02);
}

.werte-card__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark, #1f2937);
    margin: 0 0 0.5rem;
}

.werte-card__text {
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   3. TIMELINE
   ══════════════════════════════════════════════════════════════ */

.timeline {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.timeline__header {
    margin-bottom: 3.5rem;
}

.timeline__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-dark, #1f2937);
    margin: 0.5rem 0 0;
}

.timeline__track {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.timeline__line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--color-primary, #65AF02) 5%,
        var(--color-primary, #65AF02) 95%,
        transparent
    );
    transform: translateX(-50%);
}

.timeline__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.timeline__item:last-child {
    margin-bottom: 0;
}

/* Left item: card on left side */
.timeline__item--left {
    flex-direction: row-reverse;
}

.timeline__item--left .timeline__card {
    text-align: right;
    margin-right: 2.5rem;
    margin-left: 0;
}

.timeline__item--right .timeline__card {
    text-align: left;
    margin-left: 2.5rem;
    margin-right: 0;
}

/* Badge on the center line */
.timeline__badge {
    position: absolute;
    left: 50%;
    top: 0.25rem;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #fff;
}

.timeline__badge--ausbildung {
    background: var(--color-primary, #65AF02);
}

.timeline__badge--beruf {
    background: var(--color-accent, #4B02AF);
}

.timeline__badge--zertifikat {
    background: var(--color-dark, #1f2937);
}

.section--gray .timeline__badge {
    border-color: var(--color-gray-50, #f9fafb);
}

/* Card */
.timeline__card {
    flex: 0 0 calc(50% - 2.5rem);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section--gray .timeline__card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.timeline__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.timeline__year {
    display: inline-block;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary, #65AF02);
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.timeline__card-title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-dark, #1f2937);
    margin: 0 0 0.4rem;
    line-height: 1.4;
}

.timeline__card-text {
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 0.6rem;
}

.timeline__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
}

.timeline__tag--ausbildung {
    background: rgba(101, 175, 2, 0.1);
    color: var(--color-primary, #65AF02);
}

.timeline__tag--beruf {
    background: rgba(75, 2, 175, 0.08);
    color: var(--color-accent, #4B02AF);
}

.timeline__tag--zertifikat {
    background: rgba(31, 41, 55, 0.08);
    color: var(--color-dark, #1f2937);
}


/* ══════════════════════════════════════════════════════════════
   4. TESTIMONIALS SLIDER
   ══════════════════════════════════════════════════════════════ */

.testimonials-slider {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.testimonials-slider__header {
    margin-bottom: 3rem;
}

.testimonials-slider__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-dark, #1f2937);
    margin: 0.5rem 0 0;
}

.testimonials-slider__track {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.testimonials-slider__slides {
    position: relative;
    min-height: 280px;
}

.testimonials-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
}

.section--gray .testimonials-slider__slide {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.testimonials-slider__slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

.testimonials-slider__stars {
    display: flex;
    gap: 3px;
    margin-bottom: 1.25rem;
}

.testimonials-slider__star {
    color: #d1d5db;
    transition: color 0.2s;
}

.testimonials-slider__star.is-filled {
    color: #f59e0b;
    fill: #f59e0b;
}

.testimonials-slider__quote {
    margin: 0 0 1.5rem;
    padding: 0;
}

.testimonials-slider__quote p {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.75;
    color: var(--color-dark, #1f2937);
    font-style: italic;
    margin: 0;
}

.testimonials-slider__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.testimonials-slider__name {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-dark, #1f2937);
}

.testimonials-slider__role {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #6b7280);
}

.testimonials-slider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
}

.testimonials-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-primary, #65AF02);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonials-slider__dot.is-active {
    background: var(--color-primary, #65AF02);
    transform: scale(1.2);
}

.testimonials-slider__dot:hover {
    background: rgba(101, 175, 2, 0.3);
}


/* ══════════════════════════════════════════════════════════════
   5. VIDEO SEKTION (Methodik & Skripte)
   ══════════════════════════════════════════════════════════════ */

.video-section {
    padding-block: clamp(4rem, 7vw, 6.5rem);
}

.video-section__header {
    margin-bottom: 3rem;
}

.video-section__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: var(--color-dark, #111827);
}

.video-section__intro {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-gray-600, #4b5563);
}

.video-section__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.video-card {
    background: #ffffff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}

.video-card__wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111827;
    overflow: hidden;
}

.video-card__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card__poster-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.video-card__placeholder-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(101, 175, 2, 0.15) 0%, transparent 70%);
}

.video-card__placeholder-label {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
}

.video-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
}

.video-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.video-card__play-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--color-primary, #65AF02);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(101, 175, 2, 0.4);
    transition: transform 0.25s ease, background-color 0.25s ease;
    text-decoration: none;
}

.video-card__play-btn:hover {
    transform: scale(1.1);
    background: var(--color-primary-hover, #559402);
}

.video-card__caption {
    padding: 1.25rem 1.5rem;
    background: #ffffff;
}

.video-card__sub {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--color-primary, #65AF02);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.video-card__heading {
    display: block;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark, #111827);
}

.video-section__kp-title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    color: var(--color-primary, #65AF02);
    margin-bottom: 1.25rem;
}

.video-section__kp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Luft zwischen Kernerkenntnissen und CTA-Button */
.video-section__action {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.video-section__kp-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-gray-800, #1f2937);
}

.kp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(101, 175, 2, 0.12);
    color: var(--color-primary, #65AF02);
    font-weight: 800;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════════
   6. ZIELGRUPPEN (Für wen & Für wen nicht)
   ══════════════════════════════════════════════════════════════ */

.zielgruppen {
    padding-block: clamp(4rem, 7vw, 6.5rem);
}

.zielgruppen__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
    color: var(--color-dark, #111827);
}

.zielgruppen__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.zielgruppen-card {
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 2.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.zielgruppen-card--fit {
    border-top: 4px solid var(--color-primary, #65AF02);
}

.zielgruppen-card--no-fit {
    border-top: 4px solid #ef4444;
}

.zielgruppen-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.zielgruppen-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.zielgruppen-card__icon--fit {
    background: rgba(101, 175, 2, 0.12);
    color: var(--color-primary, #65AF02);
}

.zielgruppen-card__icon--no-fit {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.zielgruppen-card__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.zielgruppen-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.zielgruppen-card__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.zg-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(101, 175, 2, 0.12);
    color: var(--color-primary, #65AF02);
    font-weight: 800;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.zg-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    font-weight: 800;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.zg-content strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-dark, #111827);
    margin-bottom: 0.2rem;
}

.zg-content p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-gray-600, #4b5563);
    line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════
   7. GESUNDHEITS NETZWERK (Schaubild)
   ══════════════════════════════════════════════════════════════ */

.gesundheits-netzwerk {
    padding-block: clamp(4rem, 7vw, 6.5rem);
}

.gesundheits-netzwerk__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: var(--color-dark, #111827);
}

.gesundheits-netzwerk__intro {
    max-width: 720px;
    margin: 0 auto 3rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-gray-600, #4b5563);
}

.netzwerk-diagram {
    position: relative;
    padding: 2rem 0;
}

.netzwerk-node--center {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--color-accent, #4B02AF);
    box-shadow: 0 12px 36px rgba(75, 2, 175, 0.15);
    margin: 0 auto 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.netzwerk-node__pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(75, 2, 175, 0.2);
    animation: netzwerkPulse 3s infinite ease-in-out;
}

@keyframes netzwerkPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.08); opacity: 0.8; }
}

.netzwerk-node__inner {
    text-align: center;
    padding: 1rem;
}

.netzwerk-node__center-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--color-accent, #4B02AF);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.netzwerk-node__center-title {
    display: block;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-dark, #111827);
    line-height: 1.2;
}

.netzwerk-node__center-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--color-primary, #65AF02);
    font-weight: 600;
    margin-top: 0.25rem;
}

.netzwerk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.netzwerk-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.netzwerk-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(75, 2, 175, 0.14);
    border-color: rgba(75, 2, 175, 0.28);
}

.netzwerk-card:hover .netzwerk-card__icon {
    background: rgba(75, 2, 175, 0.14);
    color: var(--color-accent, #4B02AF);
    transform: scale(1.06);
}

.netzwerk-card__header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.netzwerk-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(101, 175, 2, 0.1);
    color: var(--color-primary, #65AF02);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.netzwerk-card__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}

.netzwerk-card__sub {
    font-size: 0.75rem;
    color: var(--color-accent, #4B02AF);
    font-weight: 600;
}

.netzwerk-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-gray-600, #4b5563);
    line-height: 1.5;
}

.netzwerk-card__bullets li {
    padding-left: 1rem;
    position: relative;
    margin-bottom: 0.35rem;
}

.netzwerk-card__bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary, #65AF02);
    font-weight: bold;
}

/* ── Orbit-Layout: 4 Karten wie Zahnräder um den Kreis (Desktop) ── */
.netzwerk-connectors { display: none; }

@media (min-width: 1025px) {
    .netzwerk-diagram__canvas {
        position: relative;
        max-width: 1040px;
        margin-inline: auto;
    }

    /* Feine Speichen vom Zentrum zu den 4 Karten */
    .netzwerk-connectors {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        overflow: visible;
    }
    .netzwerk-connectors line {
        stroke: url(#spokeGrad);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-dasharray: 2 7;
        vector-effect: non-scaling-stroke;
        opacity: 0.6;
        animation: spokeFlow 1.4s linear infinite;
    }
    @keyframes spokeFlow {
        to { stroke-dashoffset: 18; }
    }

    /* 2 Karten links, 2 rechts – breiter Kanal für den Kreis */
    .netzwerk-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(240px, 22vw, 320px);
        row-gap: 2.5rem;
        position: relative;
        z-index: 2;
        align-items: center;
    }

    /* Zentrum absolut in die Mitte der Nabe */
    .netzwerk-node--center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        z-index: 3;
    }

    .netzwerk-card {
        position: relative;
        z-index: 2;
    }
}

/* ── Bullets erst bei Hover ausklappen (nur Desktop-Orbit mit echtem Hover) ── */
@media (hover: hover) and (min-width: 1025px) {
    .netzwerk-card__bullets {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        overflow: hidden;
        transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.3s ease;
    }

    .netzwerk-card:hover .netzwerk-card__bullets,
    .netzwerk-card:focus-within .netzwerk-card__bullets {
        max-height: 240px;
        opacity: 1;
        margin-top: 0.75rem;
    }

    /* Chevron-Hinweis „aufklappbar" – verschwindet bei Hover */
    .netzwerk-card {
        cursor: default;
    }

    .netzwerk-card__header {
        margin-bottom: 0;
    }

    .netzwerk-card::after {
        content: "";
        position: absolute;
        right: 1.4rem;
        top: 1.7rem;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--color-accent, #4B02AF);
        border-bottom: 2px solid var(--color-accent, #4B02AF);
        transform: rotate(45deg);
        opacity: 0.35;
        transition: opacity 0.3s ease;
    }

    .netzwerk-card:hover::after,
    .netzwerk-card:focus-within::after {
        opacity: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   CTA-Banner mit dezentem Parallax (Platzhalter für Kathi-Bild)
   ══════════════════════════════════════════════════════════════ */
/* CTA-Karte, Bild, Scroll-Effekt und Button-Farbe kommen zentral aus main.css */
.cta-banner__title,
.cta-banner__text {
    color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════
   Qualifikationen – randlos, luftig, spielerisch erkundbar
   ══════════════════════════════════════════════════════════════ */
.quali-groups {
    max-width: 1000px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
}

.quali-group__title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: var(--color-dark, #111827);
}

.quali-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.quali-group__icon--ausbildung { color: var(--color-accent, #4B02AF); background: rgba(75, 2, 175, 0.08); }
.quali-group__icon--beruf      { color: var(--color-primary, #65AF02); background: rgba(101, 175, 2, 0.08); }
.quali-group__icon--zertifikat { color: #374151; }

/* randlose Fakten-Zeilen (kein Kästchen, kein Linksrand) */
.quali-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 0.15rem 1.25rem;
}

.quali-list--ausbildung { --qc: #4B02AF; --qc-soft: rgba(75, 2, 175, 0.07);   --qc-glow: rgba(75, 2, 175, 0.16); }
.quali-list--beruf      { --qc: #65AF02; --qc-soft: rgba(101, 175, 2, 0.09);  --qc-glow: rgba(101, 175, 2, 0.20); }
.quali-list--zertifikat { --qc: #4B02AF; --qc-soft: rgba(75, 2, 175, 0.07);   --qc-glow: rgba(75, 2, 175, 0.16); }

.quali-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    transition: background 0.25s ease, transform 0.25s ease;
}

.quali-item:hover {
    background: var(--qc-soft);
    transform: translateX(3px);
}

.quali-item__dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--qc);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quali-item:hover .quali-item__dot {
    transform: scale(1.6);
    box-shadow: 0 0 0 5px var(--qc-glow);
}

.quali-item__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.5rem;
}

.quali-item__title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--color-dark, #111827);
    transition: color 0.25s ease;
}

.quali-item:hover .quali-item__title {
    color: var(--qc);
}

.quali-item__year {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--qc);
    background: var(--qc-soft);
    padding: 1px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.quali-item__desc {
    flex-basis: 100%;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-gray-600, #4b5563);
    margin-top: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
    .quali-item,
    .quali-item__dot,
    .quali-item__title { transition: none; }
}

/* ── Qualifikationen als Tab-Element (BGM-Lösungen-Stil) ────────── */
.quali-tabs-wrap {
    max-width: 1000px;
    margin-inline: auto;
}

.quali-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.quali-tab {
    flex: 1 1 180px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.35rem 1rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    position: relative;
    font: inherit;
    color: var(--color-dark, #111827);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.quali-tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.quali-tab--ausbildung { --qc: #4B02AF; }
.quali-tab--beruf      { --qc: #65AF02; }
/* Zertifikate in Markenviolett, nicht Grau — Grau wirkte wie ein
   deaktivierter Reiter (P138). */
.quali-tab--zertifikat { --qc: #4B02AF; }

.quali-tab__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    color: var(--qc, #65AF02);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.quali-tab__name { font-weight: 700; font-size: 0.95rem; }

.quali-tab[aria-selected="true"] {
    border-color: var(--qc);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}
/* Ausgewählt heisst kräftigerer Ton, nicht Vollfläche — wie bei den
   Formatkacheln auf /bgm/, wo der aktive Reiter violett getönt ist. */
.quali-tab[aria-selected="true"] .quali-tab__icon {
    background: color-mix(in srgb, var(--qc) 14%, transparent);
    color: var(--qc);
    transform: scale(1.05);
}

/* Dreieck-Pointer unter dem aktiven Tab */
.quali-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid var(--qc);
}

/* Detail-Panel */
.quali-panel {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--qc, #65AF02);
    border-radius: 1rem;
    padding: 1.9rem 1.9rem 1.4rem;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.05);
}

.quali-panel--ausbildung { --qc: #4B02AF; --qc-soft: rgba(75, 2, 175, 0.07);   --qc-glow: rgba(75, 2, 175, 0.16); }
.quali-panel--beruf      { --qc: #65AF02; --qc-soft: rgba(101, 175, 2, 0.09);  --qc-glow: rgba(101, 175, 2, 0.20); }
.quali-panel--zertifikat { --qc: #4B02AF; --qc-soft: rgba(75, 2, 175, 0.07);   --qc-glow: rgba(75, 2, 175, 0.16); }

@media (max-width: 640px) {
    .quali-tab { flex-basis: 100%; max-width: none; flex-direction: row; justify-content: flex-start; gap: 0.85rem; }
    .quali-tab[aria-selected="true"]::after { display: none; }
    .quali-tab__icon { width: 42px; height: 42px; }
}

/* ══════════════════════════════════════════════════════════════
   Text + Bild (Unterseiten) – inkl. zentriertem Einspalter ohne Bild
   ══════════════════════════════════════════════════════════════ */
.text-image__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.text-image--reversed .text-image__media {
    order: -1;
}

.text-image__img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    display: block;
}

/* mehr Luft zwischen Text und Button */
.text-image__cta {
    margin-top: 2rem;
}

/* Ohne Bild → ruhiger, zentrierter Einspalter (kein leerer Bild-Bereich) */
.text-image--no-media .text-image__grid {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.text-image--no-media .text-image__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-image--no-media .text-image__text {
    max-width: 640px;
}

.text-image--no-media .text-image__cta {
    display: flex;
    justify-content: center;
}

@media (max-width: 860px) {
    .text-image__grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════
   Feature-Card (Bild + Text + Checkliste + CTA)
   ══════════════════════════════════════════════════════════════ */
.fcard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch; /* Bildspalte auf volle Kartenhöhe */
    max-width: 1100px;
    margin-inline: auto;
}

/* Text bleibt vertikal zentriert, das Bild füllt die Spalte */
.fcard__content {
    align-self: center;
}

/* Bild rechts statt links */
.fcard--img-right .fcard__image {
    order: 2;
}

.fcard__image {
    position: relative;
    align-self: stretch;
    min-height: 340px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.10);
}

/* absolut positioniert → füllt die Spalte immer komplett aus,
   unabhängig davon, wie hoch die Textspalte gerade ist */
.fcard__image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fcard__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-dark, #111827);
    margin: 0.4rem 0 0.9rem;
    /* lange deutsche Komposita sauber umbrechen statt überlaufen */
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

.fcard__text {
    color: var(--color-gray-600, #4b5563);
    font-size: 1rem;
    line-height: 1.65;
}

.fcard__checklist {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.fcard__check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-gray-600, #4b5563);
}

.fcard__check-item strong {
    color: var(--color-dark, #111827);
    font-weight: 700;
}

.fcard__check-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--color-primary, #65AF02);
}

.fcard__cta {
    margin-top: 1.75rem;
}

@media (max-width: 860px) {
    .fcard {
        grid-template-columns: 1fr;
    }
    /* Bild auf Mobile immer zuerst */
    .fcard--img-right .fcard__image {
        order: 0;
    }
    .fcard__image img {
        min-height: 220px;
    }
}

/* ══════════════════════════════════════════════════════════════
   Zitat-Sektion (eigenständig – recycelt sonst .the-why__* aus
   sections-home.css und bliebe auf Unterseiten ungestylt)
   ══════════════════════════════════════════════════════════════ */
.zitat-section .the-why__quote {
    position: relative;
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 3rem);
    /* Karten-Look + linken Farbbalken aus sections-home.css neutralisieren */
    background: none;
    border: 0;
    border-left: 0;
    box-shadow: none;
    border-radius: 0;
}

/* großes dekoratives Anführungszeichen */
.zitat-section .the-why__quote::before {
    content: "\201C";
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: 0.8;
    color: var(--color-primary, #65AF02);
    opacity: 0.25;
    margin-bottom: 0.25rem;
}

.zitat-section .the-why__blockquote {
    margin: 0;
    border: 0;
    padding: 0;
}

/* `font-style` ausdrücklich: Wo sections-home.css mitlädt (Start, /bgm/),
   erbte das Zitat sonst deren Kursivschrift und sah anders aus als auf
   den übrigen Seiten. */
.zitat-section .the-why__blockquote p {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-dark, #111827);
    margin: 0;
}

.zitat-section .the-why__attribution {
    margin-top: 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary, #65AF02);
}

/* ══════════════════════════════════════════════════════════════
   Terminbuchung (Google Kalender, Zwei-Klick)
   ══════════════════════════════════════════════════════════════ */
.terminbuchung__header {
    max-width: 640px;
    margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

.terminbuchung__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-dark, #111827);
    margin: 0.4rem 0 0.75rem;
}

.terminbuchung__text {
    color: var(--color-gray-600, #4b5563);
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0;
}

.terminbuchung__box {
    max-width: 900px;
    margin-inline: auto;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}

/* Platzhalter vor dem Laden */
.terminbuchung__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(101, 175, 2, 0.08), transparent 65%),
        #ffffff;
}

.terminbuchung__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(101, 175, 2, 0.1);
    color: var(--color-primary, #65AF02);
    margin-bottom: 0.35rem;
}

.terminbuchung__hinweis {
    max-width: 460px;
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-gray-600, #4b5563);
}

.terminbuchung__external {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-gray-600, #4b5563);
    text-underline-offset: 3px;
}

.terminbuchung__external:hover {
    color: var(--color-primary, #65AF02);
}

/* nach dem Laden: iframe füllt die Box */
.terminbuchung__box--loaded {
    background: #ffffff;
}

.terminbuchung__box iframe {
    display: block;
    width: 100%;
    min-height: 700px;
    border: 0;
}

@media (max-width: 640px) {
    .terminbuchung__box iframe {
        min-height: 620px;
    }
}

/* Zwei Spalten: Kalender | E-Mail (P117). Auf dem Handy untereinander,
   nach dem Laden des Kalenders ebenfalls — das iframe braucht die Breite. */
.terminbuchung__grid--zwei {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    max-width: 900px;
    margin-inline: auto;
}

.terminbuchung__grid--zwei .terminbuchung__box {
    max-width: none;
    margin: 0;
}

@media (min-width: 768px) {
    .terminbuchung__grid--zwei {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .terminbuchung__grid--zwei.terminbuchung__grid--geladen {
        grid-template-columns: minmax(0, 1fr);
    }
}

.terminbuchung__grid--zwei .terminbuchung__placeholder {
    height: 100%;
    justify-content: center;
}

.terminbuchung__mail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.9rem;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(101, 175, 2, 0.08), transparent 65%),
        #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}

.terminbuchung__mail-titel {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-dark, #111827);
    margin: 0;
}

.terminbuchung__mail-text {
    max-width: 340px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-gray-600, #4b5563);
}

/* Partner-Grid: 5 in einer Reihe (klein wie zuvor), letzte Reihe bei Umbruch zentriert */
.trust__partner-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.trust__partner-grid .partner-card {
    flex: 1 1 180px;
    max-width: 215px;
}


/* ══════════════════════════════════════════════════════════════
   8. PAKETE & ABLAUF
   ══════════════════════════════════════════════════════════════ */

.pakete {
    padding-block: clamp(4rem, 7vw, 6.5rem);
}

.pakete__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
    color: var(--color-dark, #111827);
}

.pakete-process {
    margin-bottom: 4rem;
}

.pakete-process__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.pakete-step {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    position: relative;
}

.pakete-step__num {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 2.25rem;
    font-weight: 900;
    color: rgba(101, 175, 2, 0.25);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.pakete-step__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-dark, #111827);
}

.pakete-step__text {
    font-size: 0.9rem;
    color: var(--color-gray-600, #4b5563);
    line-height: 1.55;
    margin: 0;
}

.pakete-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
}

/* Hauptpaket links, zubuchbare Extras rechts. Die Asymmetrie ist die
   eigentliche Aussage: ein Angebot trägt, die anderen hängen sich an. */
.pakete-cards--geteilt {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: start;
}

.pakete-cards__haupt {
    display: grid;
    gap: 2rem;
}

/* Die Extras-Spalte wird zusammen deutlich höher als das Hauptpaket. Ohne
   Gegenmaßnahme scrollt das tragende Angebot als Erstes aus dem Bild, und
   der Bezug "gehört zu diesem Paket" geht verloren. Deshalb bleibt die
   Hauptkarte stehen, solange die Extras vorbeiziehen. */
@media (min-width: 1001px) {
    .pakete-cards--geteilt .pakete-cards__haupt {
        position: sticky;
        top: calc(var(--header-height, 5rem) + 2rem);
    }
}

.pakete-extras {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pakete-extras__label {
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(101, 175, 2, 0.4);
}

.pakete-extras__label strong {
    display: block;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary-text, #4A7F02);
}

.pakete-extras__hinweis {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-gray-600, #4b5563);
}

.paket-card {
    background: #ffffff;
    border-radius: 1.25rem;
    padding: clamp(2rem, 2.6vw, 2.75rem);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Zubuchbares Extra: gestrichelte Kontur statt durchgezogener, dazu das
   Plus-Zeichen in der Spalte zwischen Hauptpaket und Extra. Beides sagt
   "kommt dazu" statt "steht zur Wahl". */
.paket-card--extra {
    display: block;
    padding: 0;
    border: 1px dashed rgba(101, 175, 2, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.035);
    overflow: visible;
}

/* Zugeklappt zeigt die Karte nur Badge, Titel und Untertitel — genug, um zu
   erkennen, worum es geht, kurz genug, dass die Spalte neben dem Hauptpaket
   nicht ausufert. */
.paket-card--extra > .paket-card__summary {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.5rem, 2vw, 2rem);
    cursor: pointer;
    list-style: none;
    border-radius: inherit;
    transition: background-color 0.2s ease;
}

.paket-card--extra > .paket-card__summary::-webkit-details-marker,
.paket-card--extra > .paket-card__summary::marker {
    display: none;
    content: '';
}

.paket-card--extra > .paket-card__summary:hover {
    background-color: rgba(101, 175, 2, 0.045);
}

.paket-card--extra > .paket-card__summary:focus-visible {
    outline: 3px solid var(--color-primary-text, #4A7F02);
    outline-offset: -3px;
}

.paket-card__summary-text {
    flex: 1 1 auto;
    min-width: 0;
}

.paket-card__summary .paket-card__title,
.paket-card__summary .paket-card__sub {
    margin-bottom: 0;
}

.paket-card__summary .paket-card__sub {
    margin-top: 0.25rem;
}

.paket-card__chevron {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-top: 0.125rem;
    border-radius: 50%;
    background: rgba(101, 175, 2, 0.1);
    color: var(--color-primary-text, #4A7F02);
    transition: transform 0.25s ease, background-color 0.2s ease;
}

.paket-card--extra[open] > .paket-card__summary .paket-card__chevron {
    transform: rotate(180deg);
}

.paket-card__body {
    padding: 0 clamp(1.5rem, 2vw, 2rem) clamp(1.5rem, 2vw, 2rem);
}

.paket-card--extra .paket-card__description {
    margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .paket-card__chevron {
        transition: none;
    }
}

/* Das Plus sitzt in der Lücke zwischen Hauptpaket und Extra und verbindet
   beide optisch. */
.paket-card__plus {
    position: absolute;
    left: -1.0625rem;
    top: 1.85rem;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(101, 175, 2, 0.5);
    color: var(--color-primary-text, #4A7F02);
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

/* Der Badge-Text der Extras wiederholt, was die Spaltenüberschrift schon
   sagt. Er bleibt stehen, tritt aber optisch zurück. */
.paket-card--extra .paket-card__badge {
    background: transparent;
    padding-inline: 0;
    color: #6b7280;
}

.paket-card--extra .paket-card__title {
    font-size: 1.3125rem;
}

.paket-card--extra .paket-card__footer {
    display: flex;
}

.paket-card--extra .paket-card__footer .btn {
    width: auto;
    padding-inline: 1.75rem;
}

/* In den Karten wird nicht getrennt. Die Spalten sind breit genug, und ein
   "Korrektur-bedarf" mitten im Fließtext liest sich wie ein Fehler. */
.paket-card__title,
.paket-card__sub,
.paket-card__description,
.paket-card__features li {
    hyphens: manual;
    -webkit-hyphens: manual;
}

.paket-card__title {
    text-wrap: balance;
}

.paket-card--featured {
    border: 2px solid var(--color-primary, #65AF02);
    box-shadow: 0 12px 36px rgba(101, 175, 2, 0.12);
}

.paket-card__badge {
    align-self: flex-start;
    background: rgba(101, 175, 2, 0.12);
    color: var(--color-primary, #65AF02);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.35rem 0.875rem;
    border-radius: 50px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.paket-card__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.paket-card__sub {
    font-size: 0.875rem;
    color: var(--color-accent, #4B02AF);
    font-weight: 600;
    margin-bottom: 1.25rem;
    display: block;
}

.paket-card__description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-gray-600, #4b5563);
    margin-bottom: 1.5rem;
}

.paket-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.paket-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-gray-800, #1f2937);
}

.feat-check {
    color: var(--color-primary, #65AF02);
    font-weight: bold;
}

.paket-card__footer {
    margin-top: auto;
}

.paket-card__footer .btn {
    width: 100%;
}

/* Unter 1200px wird die Extras-Spalte zu schmal für zwei Karten. Dann rutscht
   das Hauptpaket auf volle Breite und die Extras stehen zu zweit darunter. */
@media (max-width: 1200px) {
    .pakete-cards,
    .pakete-cards--geteilt {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .pakete-cards--geteilt .pakete-cards__haupt {
        position: static;
    }
}

@media (max-width: 1200px) {
    .paket-card__plus {
        left: 1.75rem;
        top: -1.0625rem;
    }
}


/* ══════════════════════════════════════════════════════════════
   9. FAQ ACCORDION
   ══════════════════════════════════════════════════════════════ */

.faq-section {
    padding-block: clamp(4rem, 7vw, 6.5rem);
}

.faq-section__title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: var(--color-dark, #111827);
}

.faq-section__intro {
    max-width: 640px;
    margin: 0 auto 3rem;
    font-size: 1.05rem;
    color: var(--color-gray-600, #4b5563);
}

.faq-accordion {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.faq-item--active {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(101, 175, 2, 0.3);
}

.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.75rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.faq-item__question {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-dark, #111827);
}

.faq-item__icon {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-primary, #65AF02);
    transition: transform 0.25s ease;
}

.faq-item--active .faq-item__icon {
    transform: rotate(45deg);
}

.faq-item__inner {
    padding: 0 1.75rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-gray-600, #4b5563);
}


/* ══════════════════════════════════════════════════════════════
   10. RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .video-section__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

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

@media (max-width: 768px) {
    /* Page Hero */
    .page-hero {
        min-height: 62vh;
        max-height: none;
    }

    .page-hero__card {
        max-width: 100%;
    }

    .page-hero__title {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }

    /* Werte Grid */
    .werte-grid__items {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .werte-card {
        padding: 1.5rem 1.25rem;
    }

    /* Timeline */
    .timeline__line {
        left: 18px;
        transform: none;
    }

    .timeline__badge {
        left: 18px;
        transform: translateX(-50%);
        width: 32px;
        height: 32px;
    }

    .timeline__item,
    .timeline__item--left {
        flex-direction: row;
    }

    .timeline__item--left .timeline__card,
    .timeline__item--right .timeline__card {
        text-align: left;
        margin-left: 2.5rem;
        margin-right: 0;
        flex: 1;
    }

    .timeline__card {
        flex: 1 !important;
        padding: 1.25rem;
    }

    /* Testimonials */
    .testimonials-slider__slides {
        min-height: 320px;
    }

    .testimonials-slider__slide {
        padding: 1.5rem 1rem;
    }

    /* New Sections */
    .zielgruppen__grid {
        grid-template-columns: 1fr;
    }

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

    .pakete-process__grid {
        grid-template-columns: 1fr;
    }

    .pakete-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    /* Keine feste Höhe: Bis 30.10.2026 stand hier `height: 35vh`. Eine
       längere Karte wurde dann oben und unten abgeschnitten (T152). */
    .page-hero {
        min-height: 280px;
        height: auto;
    }

    .page-hero__content {
        padding-bottom: 1.5rem;
    }

    .timeline__item--left .timeline__card,
    .timeline__item--right .timeline__card {
        margin-left: 2rem;
    }
}

/* ── Page-Hero CTA (optional, siehe page-hero.php) ─────────────── */
.page-hero__cta {
    margin-top: 1.75rem;
}

@media (max-width: 480px) {
    .page-hero__cta .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   RECHTSTEXTE — Impressum, Datenschutz, AGB
   Schmale Lesespalte, ruhige Typografie, klar getrennte Abschnitte.
   ========================================================================== */
.rechtstext__container {
    max-width: 820px;
}

.rechtstext__header {
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.rechtstext__title {
    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
    line-height: 1.15;
    margin: 0.35rem 0 0;
}

.rechtstext__intro {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-gray-700, #374151);
    margin-bottom: 2.5rem;
}

/* ── Inhaltsverzeichnis ─────────────────────────────────────── */
.rechtstext__toc {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    margin-bottom: 3rem;
    background: linear-gradient(135deg, rgba(101, 175, 2, 0.07), rgba(75, 2, 175, 0.05));
    border-radius: 18px;
}

.rechtstext__toc-title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.9rem;
}

.rechtstext__toc-list {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.4rem;
    font-size: 0.95rem;
}

.rechtstext__toc-list a {
    color: var(--color-gray-800, #1f2937);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.rechtstext__toc-list a:hover,
.rechtstext__toc-list a:focus-visible {
    color: var(--color-primary, #65AF02);
    border-bottom-color: currentColor;
}

/* ── Abschnitte ────────────────────────────────────────────── */
.rechtstext__abschnitt {
    margin-bottom: 2.75rem;
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.rechtstext__abschnitt-titel,
.impressum__subtitle {
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    line-height: 1.3;
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rechtstext__text,
.impressum__text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-gray-700, #374151);
}

.rechtstext__text p,
.impressum__text p {
    margin: 0 0 1rem;
}

.rechtstext__text ul,
.rechtstext__text ol,
.impressum__text ul,
.impressum__text ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.rechtstext__text li,
.impressum__text li {
    margin-bottom: 0.5rem;
}

.rechtstext__text a,
.impressum__text a {
    color: var(--color-primary, #65AF02);
    overflow-wrap: anywhere;
}

/* ── Impressum-spezifisch ──────────────────────────────────── */
.impressum__block {
    margin-bottom: 2.5rem;
}

.impressum__adresse {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-gray-800, #1f2937);
    margin: 0;
}

.impressum__liste {
    display: grid;
    grid-template-columns: minmax(11rem, auto) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
}

.impressum__liste dt {
    font-weight: 600;
    color: var(--color-gray-800, #1f2937);
}

.impressum__liste dd {
    margin: 0;
    color: var(--color-gray-700, #374151);
    overflow-wrap: anywhere;
}

.impressum__liste a,
.impressum__adresse a {
    color: var(--color-primary, #65AF02);
}

@media (max-width: 560px) {
    .impressum__liste {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .impressum__liste dd {
        margin-bottom: 0.75rem;
    }
}

/* ── Stand-Angabe ──────────────────────────────────────────── */
.rechtstext__stand {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.85rem;
    color: var(--color-gray-600, #4b5563);
}

/* ── Zitat: Rolle/Funktion unter dem Namen ─────────────────────
   Feld `zitat_rolle` — siehe template-parts/sections/zitat.php. */
.zitat__rolle {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.75;
}


/* ══════════════════════════════════════════════════════════════
   Kundenstimmen — Pfeile und Fortschrittsbalken
   ══════════════════════════════════════════════════════════════ */

/* Die Pfeile sitzen am äusseren Rand der Karte. Symbolsprache wie überall:
   getönte Kreisfläche, das Zeichen als Strich in der Markenfarbe. */
.testimonials-slider__pfeil {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(101, 175, 2, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary-text, #4A7F02);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.testimonials-slider__pfeil:hover {
    background: rgba(101, 175, 2, 0.14);
    border-color: rgba(101, 175, 2, 0.6);
}

.testimonials-slider__pfeil:focus-visible {
    outline: 2px solid var(--color-dark, #111827);
    outline-offset: 2px;
}

.testimonials-slider__pfeil--zurueck {
    left: -3.75rem;
}

.testimonials-slider__pfeil--weiter {
    right: -3.75rem;
}

/* Fortschrittsbalken unter den Punkten. */
.testimonials-slider__timer {
    width: 120px;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.09);
    overflow: hidden;
}

.testimonials-slider__timer-fuellung {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary, #65AF02);
}

.testimonials-slider__timer-fuellung.is-laufend {
    animation: rpt-slider-timer var(--slider-dauer, 6s) linear forwards;
}

/* Beim Überfahren hält der Wechsel an — der Balken muss mit anhalten,
   sonst zeigt er eine Zeit an, die gerade nicht läuft. */
.testimonials-slider__track:hover .testimonials-slider__timer-fuellung {
    animation-play-state: paused;
}

@keyframes rpt-slider-timer {
    from { width: 0; }
    to   { width: 100%; }
}

/* Kein Platz mehr neben der Karte: Pfeile rücken auf die Kartenkante. */
@media (max-width: 900px) {
    .testimonials-slider__pfeil--zurueck { left: -0.75rem; }
    .testimonials-slider__pfeil--weiter  { right: -0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .testimonials-slider__timer-fuellung.is-laufend {
        animation: none;
        width: 100%;
    }
}


/* ══════════════════════════════════════════════════════════════
   «Jetzt starten» (P123): Abschluss-Kachel im Werte-Raster, Buttons
   unter Fliesstext und Ablauf, vier Schritte ohne 3 + 1.
   ══════════════════════════════════════════════════════════════ */
.werte-card--cta,
.section--gray .werte-card--cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    border: 2px solid var(--color-primary, #65AF02);
    text-decoration: none;
}

/* Nur umrahmt, nicht gefüllt — gefüllt war es zu laut (Dominik). */
.werte-card--cta:hover,
.werte-card--cta:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(101, 175, 2, 0.18);
}

.werte-card--cta .werte-card__title,
.werte-card--cta .werte-card__pfeil {
    color: var(--color-primary-text, var(--color-primary, #65AF02));
}

.werte-card__pfeil {
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.werte-card--cta:hover .werte-card__pfeil {
    transform: translateX(6px);
}

.fliesstext__cta {
    margin-top: 2rem;
}

.pakete-process__cta {
    margin-top: 2.5rem;
    text-align: center;
}

@media (min-width: 769px) and (max-width: 1099px) {
    .pakete-process__grid--vier {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .pakete-process__grid--vier {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .pakete-process__grid--vier .pakete-step {
        padding: 1.75rem 1.5rem;
    }
}

/* ── T180: Seitenkopf unter 1024 px: Bild oben, Karte darunter ──────
   Liegt die Karte über dem Bild, deckt sie auf Tablet und Handy fast das
   ganze Bild ab — gemessen am 31.10.2026 auf /ueber-mich/, /personal-
   training/, /impressum/ und /kontakt/: die Person verschwand hinter dem
   Text. Darum hier untereinander: Unter der Kopfzeile das Bild in voller
   Breite und im eigenen Seitenverhältnis, also unbeschnitten, darunter
   die Karte. Kein Overlay, nichts liegt über dem Bild.
   Ab 1024 px bleibt die Karte links über dem Bild; dort steht die Person
   auf allen Seiten rechts daneben. Ersetzt die T152-Regel (Abstand für
   das Logo), weil das Bild jetzt selbst unter der Kopfzeile beginnt. */
@media (max-width: 1023px) {
    .page-hero {
        display: block;
        min-height: 0;
        max-height: none;
        padding-top: var(--header-height, 80px);
    }

    .page-hero__image {
        position: static;
        display: block;
        height: auto;
        /* Querformat bleibt ganz. Nur Hochformat (Blatt auf /bgm/, Stein
           auf /angebot/) würde sonst den ganzen Schirm füllen und wird
           auf 60 % der Fensterhöhe gekürzt. */
        max-height: 60vh;
        object-fit: cover;
    }

    .page-hero__overlay {
        display: none;
    }

    .page-hero__content {
        padding-block: 1.25rem 0.5rem;
    }
}

/* Zwischen 1024 und 1279 px reichte die 560 px breite Karte bis an die
   Person heran (Haare auf /ueber-mich/ und /personal-training/). */
@media (min-width: 1024px) and (max-width: 1279px) {
    .page-hero__card {
        max-width: 480px;
    }
}