/* ==========================================================================
   GLOBALE DESIGN-SCHALTZENTRALE (Hier die Farben mit einem Klick anpassen)
   ========================================================================== */
:root {
    --primary-blue: #1A365D;   /* Dein tiefes B2B-Blau */
    --gold-accent: #E0A96D;    /* Dein edles Gold */
    --dark-text: #2C302E;      /* Für Fließtexte */
    --muted-text: #4A4E4D;     /* Für Sekundärtexte */
    --bg-cream: #FDFBF7;       /* Der edle Seitenhintergrund */
    --bg-white: #FFFFFF;       /* Für Inhaltskarten */
    --bg-light: #F8F9FA;       /* Für Info-Boxen */
}

/* Reset & Base */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

main {
    background-color: var(--bg-cream);
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    color: var(--dark-text);
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

p, h1, h2, h3, h4, span, strong, a, li, div {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important; 
    hyphens: none !important; 
}

/* Animations */
@keyframes flyInLeftSmooth {
    0% { transform: translateX(-180px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.animated-card {
    opacity: 0;
    will-change: transform, opacity;
    animation: flyInLeftSmooth 1.6s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

.animated-profile {
    opacity: 0;
    will-change: transform, opacity;
    animation: flyInLeftSmooth 1.6s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes heroZoomIn {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* Hero Sektion */
.about-hero {
    position: relative;
    overflow: hidden; 
    padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 6vw, 80px) 0;
    text-align: center;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(26, 54, 93, 0.15), rgba(26, 54, 93, 0.15)), url('/images/westkamp-media-saarbrücken-heusweiler-webseitenerstellung.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
    transform-origin: center center;
    animation: heroZoomIn 25s ease-out forwards;
}

.about-hero .container {
    position: relative;
    z-index: 1;
}

.profile-image-wrapper {
    width: clamp(180px, 20vw, 250px);
    height: clamp(180px, 20vw, 250px);
    margin: 0 auto 30px auto;
    border-radius: 50%;
    padding: 8px;
    background: linear-gradient(135deg, var(--gold-accent) 0%, var(--primary-blue) 100%);
    box-shadow: 0 20px 40px rgba(26, 54, 93, 0.1);
}

.profile-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-cream);
}

.hero-card {
    background: rgba(253, 251, 247, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: clamp(22px, 4vw, 40px) clamp(15px, 5vw, 45px);
    border-radius: 24px;
    max-width: 750px;
    box-shadow: 0 20px 40px rgba(26, 54, 93, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.6);
    width: 100%;
    margin: 0 auto; 
    box-sizing: border-box;
}

.about-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--gold-accent);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.about-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--primary-blue);
    margin: 0 0 10px 0;
    letter-spacing: -1px;
    line-height: 1.2;
}

.hero-divider {
    width: 60px;
    height: 4px;
    background-color: var(--gold-accent);
    margin: 0 auto;
    border-radius: 2px;
}

/* Content Sektion */
.content-section {
    background: var(--bg-white);
    border-radius: 24px;
    padding: clamp(30px, 5vw, 60px) clamp(20px, 5vw, 60px);
    box-shadow: 0 15px 35px rgba(26, 54, 93, 0.03);
    margin-bottom: 80px;
    margin-top: -40px; 
    position: relative;
    z-index: 10;
    border: 1px solid rgba(26, 54, 93, 0.05);
}

.content-section h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    color: var(--primary-blue);
    font-weight: 800;
    margin: 0 0 25px 0;
    line-height: 1.3;
}

.content-section h3 {
    font-size: clamp(1.2rem, 2.8vw, 1.5rem);
    color: var(--primary-blue);
    font-weight: 700;
    margin: 40px 0 20px 0;
}

.content-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0 0 20px 0;
    color: var(--muted-text);
}

.mantra-box {
    background: rgba(224, 169, 109, 0.05);
    border-left: 5px solid var(--gold-accent);
    padding: 25px 30px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 30px;
}

.mantra-box p {
    margin: 0;
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 1.15rem;
    font-style: italic;
}

.promise-box {
    background-color: var(--bg-light);
    border-left: 5px solid var(--primary-blue);
    padding: 30px;
    border-radius: 0 16px 16px 0;
    margin-top: 40px;
}

.promise-box p {
    margin: 0;
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 1.15rem;
}

/* Benefits List */
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.benefits-list li {
    position: relative;
    padding-left: 45px;
    margin-bottom: 25px;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--muted-text);
}

.benefits-list li .list-icon {
    position: absolute;
    left: 0;
    top: 4px;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--gold-accent); 
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease, transform 0.3s ease;
}

.benefits-list li:hover .list-icon {
    stroke: var(--primary-blue); 
    transform: scale(1.15); 
}

.benefits-list strong {
    color: var(--primary-blue);
    font-weight: 700;
}

/* Multi-Device-Mockup */
.responsive-mockup-section {
    margin: 35px auto 45px auto;
    text-align: center;
    width: 100%;
}

.responsive-mockup-img {
    width: 100%;
    max-width: 750px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(26, 54, 93, 0.04);
}

/* FAQ Sektion */
.faq-section {
    margin-bottom: 80px;
}

.faq-section h2 {
    text-align: center;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--primary-blue);
    margin: 0 0 40px 0;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: var(--bg-white);
    border: 1px solid rgba(26, 54, 93, 0.08);
    border-left: 5px solid var(--primary-blue); 
    border-radius: 0 12px 12px 0;
    padding: 20px 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    transform: scale(1.02); 
    box-shadow: 0 10px 20px rgba(26, 54, 93, 0.04);
}

.faq-question-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.faq-question-text {
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 1.1rem;
    padding-right: 20px;
}

.faq-plus-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: var(--gold-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), stroke 0.3s ease;
}

.faq-item:hover .faq-plus-icon {
    stroke: var(--primary-blue);
}

.faq-answer-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, margin-top 0.4s ease;
}

.faq-answer {
    color: var(--muted-text);
    line-height: 1.6;
    margin: 0;
    padding-top: 15px; 
}

.faq-item.active .faq-answer-container {
    max-height: 1000px; 
}

.faq-item.active .faq-plus-icon {
    transform: rotate(45deg);
    stroke: var(--primary-blue);
}

/* Buttons */
.cta-container {
    text-align: center;
    margin-top: 50px;
}

.sunshine-button {
    display: inline-block;
    background-color: var(--gold-accent);
    color: var(--dark-text);
    padding: 16px 36px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(224, 169, 109, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.sunshine-button:hover {
    background-color: #d49c60;
    box-shadow: 0 6px 20px rgba(224, 169, 109, 0.3);
    transform: scale(1.02);
}

/* ==========================================================================
   SEITE: ÜBER MICH — seitenspezifische Ergänzungen
   (übernommen aus dem eingebetteten <style>-Block von ueber-mich.php)
   ========================================================================== */

main {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden !important;
}

/* High-Contrast Card-System */
.executive-intro-card {
    background: linear-gradient(145deg, #FFFFFF, #FFFDF4);
    border: 1px solid rgba(224, 169, 109, 0.25);
    border-left: 6px solid var(--gold-accent);
    border-radius: 24px;
    padding: clamp(30px, 5vw, 55px);
    box-shadow: 0 15px 45px rgba(224, 169, 109, 0.05);
    margin-bottom: 60px;
    margin-top: 30px;
}

.executive-intro-card h2 {
    color: #744600;
    font-weight: 900;
}

.skills-value-section {
    margin: 80px 0;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.skill-card-item {
    border-radius: 20px;
    padding: clamp(25px, 4vw, 35px);
    box-shadow: 0 8px 25px rgba(26, 54, 93, 0.02);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.card-light-blue {
    background: #F0F7FF;
    border: 1px solid rgba(26, 54, 93, 0.15);
    border-left: 6px solid var(--primary-blue);
}

.card-beige-green {
    background: #F3F8F5;
    border: 1px solid rgba(34, 84, 61, 0.15);
    border-left: 6px solid #22543D;
}

.card-lilac {
    background: #F8F5FF;
    border: 1px solid rgba(107, 70, 193, 0.15);
    border-left: 6px solid #6B46C1;
}

.card-gold-sunshine {
    background: #FFFDF4;
    border: 1px solid rgba(224, 169, 109, 0.25);
    border-left: 6px solid var(--gold-accent);
}

.skill-card-item:hover {
    transform: scale(1.02);
    border-color: var(--primary-blue);
    border-left-color: var(--primary-blue);
    box-shadow: 0 20px 40px rgba(26, 54, 93, 0.08);
    background: #FFFFFF;
}

.skill-card-item h3 {
    font-size: 1.3rem;
    color: var(--primary-blue);
    margin: 0 0 15px 0;
    font-weight: 800;
}

.craftsman-leistungs-card {
    background: #FFFFFF;
    border: 1px solid rgba(224, 169, 109, 0.15);
    border-radius: 24px;
    padding: clamp(30px, 5vw, 50px);
    box-shadow: 0 15px 40px rgba(224, 169, 109, 0.04);
    margin-bottom: 40px;
}

.section-headline-spaced {
    margin-top: clamp(40px, 7vw, 70px);
}

.premium-benefits-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 35px;
}

.benefit-row-card {
    border-radius: 16px;
    padding: 25px 30px;
    box-shadow: 0 5px 20px rgba(26, 54, 93, 0.01);
    display: flex;
    gap: 20px;
    align-items: start;
}

.benefit-row-card .list-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.benefit-row-card .list-icon polyline {
    stroke-width: 2.5;
}

.benefit-row-blue {
    background: #F0F7FF;
    border: 1px solid rgba(26, 54, 93, 0.1);
    border-left: 6px solid var(--primary-blue);
}
.benefit-row-blue .list-icon polyline { stroke: var(--primary-blue); }

.benefit-row-mint {
    background: #EBF7F5;
    border: 1px solid rgba(34, 84, 61, 0.1);
    border-left: 6px solid #22543D;
}
.benefit-row-mint .list-icon polyline { stroke: #22543D; }

.benefit-row-gold {
    background: #FFFDF4;
    border: 1px solid rgba(224, 169, 109, 0.15);
    border-left: 6px solid var(--gold-accent);
}
.benefit-row-gold .list-icon polyline { stroke: var(--gold-accent); }

.benefit-text-block {
    color: var(--dark-text);
    font-size: 0.98rem;
    line-height: 1.6;
}

.wp-explanation-card {
    background: #EBF7F5;
    border: 1px solid rgba(34, 84, 61, 0.15);
    border-left: 6px solid #22543D;
    border-radius: 20px;
    padding: clamp(30px, 5vw, 50px);
    box-shadow: 0 10px 30px rgba(34, 84, 61, 0.03);
    margin-bottom: 40px;
}

.wp-explanation-card h2 {
    color: #22543D;
    font-weight: 900;
    line-height: 1.3;
}

.sunshine-promise-box {
    background: linear-gradient(145deg, rgba(224, 169, 109, 0.12), rgba(224, 169, 109, 0.04));
    border-left: 6px solid var(--gold-accent);
    padding: 25px 30px;
    border-radius: 12px;
    margin-bottom: 50px;
    box-shadow: 0 10px 25px rgba(224, 169, 109, 0.05);
}

.sunshine-promise-box p {
    font-weight: 700;
    color: #744600;
    margin: 0;
    font-size: 1.05rem;
}

.about-cta-box {
    background: #FFFFFF;
    border: 1px dashed var(--gold-accent);
    border-left: 5px solid var(--primary-blue);
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(26, 54, 93, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    box-sizing: border-box;
    margin-bottom: 40px;
}

/* FAQ-Abstand auf dieser Seite etwas größer als Standard */
.faq-section {
    margin-bottom: clamp(60px, 10vw, 120px) !important;
}

/* Zusätzliche Einfliege-Animation für die Executive-Card */
@keyframes flyInUpExecutive {
    0% { transform: translate3d(0, 80px, 0); opacity: 0; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

.executive-load-glide {
    opacity: 0;
    will-change: transform, opacity;
    animation: flyInUpExecutive 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scroll-Reveal für restliche Inhalte dieser Seite */
.reveal-element {
    opacity: 0;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 40px, 0);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-element.in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (min-width: 769px) {
    .stagger-1 { transition-delay: 0.1s; }
    .stagger-2 { transition-delay: 0.25s; }
    .stagger-3 { transition-delay: 0.4s; }
    .stagger-4 { transition-delay: 0.55s; }
}

@media (max-width: 768px) {
    .skills-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .about-cta-box {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
    }
}

/* Hilfsklassen anstelle der früheren Inline-Styles */
.spaced-top-45 {
    margin-top: 45px;
}

.cta-headline-style {
    color: var(--primary-blue);
    font-weight: 800;
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
}


/* ==========================================================================
   SEITE: ABLAUF — seitenspezifische Ergänzungen
   (übernommen aus dem eingebetteten <style>-Block von ablauf.php)
   ========================================================================== */

.hero-section {
    position: relative;
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(50px, 7vw, 90px) 20px;
    width: 100%;
    overflow: hidden;
}

.hero-bg-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-bg-image-native {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: none !important;
    transform: scale(1) !important;
}

/* Eigene Einfliege-Animation nur für die Hero-Card dieser Seite */
.hero-card-load-glide {
    background: rgba(253, 251, 247, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: clamp(35px, 6vw, 60px) clamp(15px, 5vw, 45px);
    border-radius: 24px;
    max-width: 850px;
    box-shadow: 0 25px 50px rgba(155, 44, 44, 0.06);
    border: 1px solid rgba(155, 44, 44, 0.15);
    width: 100%;
    position: relative;
    z-index: 2;
    opacity: 0;
    will-change: transform, opacity;
    animation: flyInLeftHeroSmooth 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flyInLeftHeroSmooth {
    0% { transform: translate3d(-150px, 0, 0); opacity: 0; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* Eigene Subtitle-Klasse nur für "Ablauf" (bewusst getrennt von .about-subtitle) */
.about-subtitle-process {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--gold-accent);
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

.hero-title {
    font-size: clamp(1.8rem, 5.5vw, 2.8rem);
    font-weight: 900;
    color: var(--primary-blue);
    margin: 0;
    letter-spacing: -1px;
    line-height: 1.25;
}

.process-wrapper {
    padding: clamp(40px, 8vw, 80px) 0;
}

.process-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.process-intro h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--primary-blue);
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.process-intro p {
    color: var(--dark-text);
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 500;
    margin: 0;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.process-card {
    background: var(--bg-white);
    border-radius: 20px;
    padding: 40px 25px;
    box-shadow: 0 10px 30px rgba(26, 54, 93, 0.02);
    border: 1px solid rgba(26, 54, 93, 0.05);
    text-align: left;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.process-card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(26, 54, 93, 0.07);
    border-color: rgba(224, 169, 109, 0.4);
}

.process-card h3 {
    font-size: clamp(1.15rem, 3.5vw, 1.35rem);
    color: var(--primary-blue);
    margin: 0 0 15px 0;
    font-weight: 800;
    line-height: 1.4;
}

.process-card p {
    color: var(--dark-text);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.card-icon {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 25px;
    display: block;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease;
}

.card-icon path, .card-icon circle, .card-icon rect, .card-icon line, .card-icon polyline {
    stroke: var(--gold-accent) !important;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: stroke 0.3s ease;
}

.process-card:hover .card-icon path,
.process-card:hover .card-icon circle,
.process-card:hover .card-icon rect,
.process-card:hover .card-icon line,
.process-card:hover .card-icon polyline {
    stroke: var(--primary-blue) !important;
}

.process-card:hover .card-icon {
    transform: scale(1.02);
}

.process-cta-box {
    background: var(--bg-white);
    border: 1px dashed var(--gold-accent);
    border-left: 5px solid var(--primary-blue);
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(26, 54, 93, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    box-sizing: border-box;
}

.process-cta-text {
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    color: var(--primary-blue);
    font-weight: 800;
    margin: 0;
}

.section-separator {
    max-width: 600px;
    margin: 80px auto 0 auto;
    text-align: center;
    padding: 0 20px;
}

.separator-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(26, 54, 93, 0.15), transparent);
}

/* Scroll-gesteuerte Sequenz-Animationen (abwechselnd von links/rechts) */
.seq-right-1, .seq-right-2, .seq-left-3, .seq-left-4 {
    opacity: 0;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media (min-width: 769px) {
    .seq-right-1.in-view {
        animation: flyInRightLuxury 2.8s cubic-bezier(0.1, 0.9, 0.2, 1) both !important;
    }
    .seq-right-2.in-view {
        animation: flyInRightLuxury 2.8s cubic-bezier(0.1, 0.9, 0.2, 1) 0.25s both !important;
    }
    .seq-left-3.in-view {
        animation: flyInLeftLuxury 2.8s cubic-bezier(0.1, 0.9, 0.2, 1) 0.50s both !important;
    }
    .seq-left-4.in-view {
        animation: flyInLeftLuxury 2.8s cubic-bezier(0.1, 0.9, 0.2, 1) 0.75s both !important;
    }
}

@media (max-width: 768px) {
    .seq-right-1.in-view, .seq-right-2.in-view {
        animation: flyInRightLuxury 2.4s cubic-bezier(0.1, 0.9, 0.2, 1) both !important;
    }
    .seq-left-3.in-view, .seq-left-4.in-view {
        animation: flyInLeftLuxury 2.4s cubic-bezier(0.1, 0.9, 0.2, 1) both !important;
    }
}

@keyframes flyInLeftLuxury {
    0% { transform: translate3d(-100vw, 0, 0); opacity: 0; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes flyInRightLuxury {
    0% { transform: translate3d(100vw, 0, 0); opacity: 0; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

@media (max-width: 1024px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .process-cta-box {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
    }
}


/* ==========================================================================
   SEITE: FAQ — seitenspezifische Ergänzungen
   (übernommen aus dem eingebetteten <style>-Block von faq.php)
   ========================================================================== */

.faq-page-wrapper {
    padding: clamp(50px, 6vw, 90px) 0 120px 0;
    font-family: 'Montserrat', sans-serif;
}

.faq-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.faq-intro h2 {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    color: var(--primary-blue, #1A365D);
    margin: 0 0 15px 0;
}

.faq-intro p {
    color: var(--dark-text, #2C302E);
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 500;
    margin: 0;
}

.faq-grid {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.faq-accordion-item {
    background: var(--bg-white, #FFFFFF);
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(26, 54, 93, 0.02);
    border: 1px solid rgba(26, 54, 93, 0.05);
    border-left: 5px solid var(--primary-blue, #1A365D);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.faq-accordion-item:hover {
    box-shadow: 0 10px 25px rgba(26, 54, 93, 0.05);
    border-left-color: var(--gold-accent, #E0A96D);
    transform: scale(1.02);
}

.faq-accordion-item details summary {
    padding: 24px 30px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-blue, #1A365D);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.3s ease;
}

.faq-accordion-item details summary:focus-visible {
    outline: 2px solid var(--gold-accent, #E0A96D);
    outline-offset: -2px;
}

.faq-accordion-item details summary:hover {
    background-color: rgba(26, 54, 93, 0.02);
}

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

.faq-arrow-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.faq-arrow-icon path {
    stroke: var(--gold-accent, #E0A96D);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: stroke 0.3s ease;
}

.faq-accordion-item:hover .faq-arrow-icon path {
    stroke: var(--primary-blue, #1A365D);
}

.faq-accordion-item details[open] summary .faq-arrow-icon {
    transform: rotate(180deg);
    stroke: var(--primary-blue, #1A365D);
}

.faq-answer-content {
    padding: 0 30px 28px 30px;
    color: var(--dark-text, #2C302E);
    line-height: 1.7;
    font-size: 0.98rem;
    font-weight: 500;
    border-top: 1px solid rgba(26, 54, 93, 0.02);
    animation: fadeInSlider 0.4s ease-out;
}

.faq-answer-content strong {
    color: var(--primary-blue, #1A365D);
    font-weight: 700;
}

@keyframes fadeInSlider {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* CTA Box */
.faq-cta-box {
    background: var(--bg-white, #FFFFFF);
    max-width: 900px;
    margin: 70px auto 0 auto;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(224, 169, 109, 0.3);
    box-shadow: 0 15px 35px rgba(224, 169, 109, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.faq-cta-box:hover {
    transform: scale(1.02);
}

.faq-cta-title {
    font-size: 1.4rem;
    color: var(--primary-blue, #1A365D);
    font-weight: 800;
    margin: 0 0 10px 0;
}

.faq-cta-text {
    color: var(--dark-text, #2C302E);
    font-size: 1rem;
    margin: 0 0 25px 0;
    font-weight: 500;
}


.faq-section-leistungen {
    max-width: 900px;
    margin: 60px auto 120px auto;
    padding: 0 20px;
}

/* ==========================================================================
   SEITE: LEISTUNGEN — seitenspezifische Ergänzungen
   (übernommen aus dem eingebetteten <style>-Block von leistungen.php;
   Klassen, die mit anderen Seiten kollidiert hätten, wurden mit "-leistungen" 
   versehen: about-hero, card-icon, section-separator, separator-line, 
   faq-section, reveal-element. Die eigentliche FAQ-Optik (faq-item, 
   faq-plus-icon etc.) nutzt bewusst die schon vorhandene, gemeinsame Version.)
   ========================================================================== */

    /* ==========================================================================
       DIE EINZIG WAHRE SCROLLBAR-RETTUNG (Alle Geister-Balken restlos vernichtet)
       ========================================================================== */
    .about-hero-leistungen {
        position: relative;
        padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 6vw, 80px) 0;
        text-align: center;
        min-height: 45vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .about-hero-leistungen::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: linear-gradient(rgba(26, 54, 93, 0.2), rgba(26, 54, 93, 0.2)), url('/images/leistungsübersicht-westkamp-media-heusweiler-sascha-muslijewich.webp');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 0;
        transform-origin: center center;
        animation: heroZoomIn 25s ease-out forwards;
    }

    .about-hero-leistungen .container {
        position: relative;
        z-index: 1;
    }

    .pillars-section {
        max-width: 1200px;
        margin: 80px auto 40px auto;
        padding: 0 20px;
    }
    
    .pillars-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        font-family: 'Montserrat', sans-serif;
    }

    .sunshine-card {
        background: var(--bg-white, #FFFFFF);
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(26, 54, 93, 0.03);
        border: 1px solid rgba(26, 54, 93, 0.05);
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }
    
    .sunshine-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 4px; height: 100%;
        background: var(--gold-accent, #E0A96D);
        transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    }
    
    .sunshine-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 20px 40px rgba(26, 54, 93, 0.07);
        border-color: rgba(26, 54, 93, 0.2);
    }
    
    .sunshine-card:hover::before {
        width: 8px;
        background: var(--primary-blue, #1A365D);
    }

    .card-header-flex {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .card-title-text {
        font-size: clamp(1.25rem, 4.5vw, 1.6rem);
        color: var(--primary-blue, #1A365D);
        margin: 0;
        font-weight: 700;
    }
    
    .card-paragraph-primary {
        color: var(--dark-text, #2C302E);
        line-height: 1.8;
        font-size: 1.05rem;
        margin-bottom: 15px;
    }
    
    .card-paragraph-secondary {
        color: var(--dark-text, #2C302E);
        line-height: 1.8;
        font-size: 1rem;
        margin-bottom: 0;
    }

    .card-icon-leistungen {
        width: 40px !important;
        height: 40px !important;
        display: block;
        flex-shrink: 0 !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .card-icon-leistungen path, .card-icon-leistungen circle, .card-icon-leistungen rect, .card-icon-leistungen line, .card-icon-leistungen polyline, .card-icon-leistungen polygon {
        stroke: var(--gold-accent, #E0A96D);
        stroke-width: 1.3;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }
    
    .sunshine-card:hover .card-icon-leistungen path,
    .sunshine-card:hover .card-icon-leistungen circle,
    .sunshine-card:hover .card-icon-leistungen rect,
    .sunshine-card:hover .card-icon-leistungen line,
    .sunshine-card:hover .card-icon-leistungen polyline,
    .sunshine-card:hover .card-icon-leistungen polygon {
        stroke: var(--primary-blue, #1A365D);
        stroke-width: 1.5;
    }
    
    .sunshine-card:hover .card-icon-leistungen {
        transform: scale(1.15);
    }

    .button-wrapper {
        margin-top: 25px;
        width: 100%;
    }

    .card-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        background-color: var(--primary-blue, #1A365D);
        color: #FFFFFF;
        padding: 13px 26px !important;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.88rem;
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        width: fit-content !important;
        height: auto !important;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(26, 54, 93, 0.12);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
    }
    
    .sunshine-card:hover .card-button {
        background-color: var(--gold-accent, #E0A96D);
        color: var(--dark-text, #2C302E);
        box-shadow: 0 6px 20px rgba(224, 169, 109, 0.25);
    }

    .card-button svg {
        width: 16px !important;
        height: 14px !important;
        min-width: 16px !important;
        min-height: 14px !important;
        fill: none !important;
        flex-shrink: 0 !important;
        margin-left: 4px !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .card-button svg path {
        stroke: currentColor !important;
        stroke-width: 3 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }
    
    .sunshine-card:hover .card-button svg {
        transform: translate3d(4px, 0, 0);
    }

    /* Regio Section Framework */
    .regio-section {
        max-width: 1200px;
        margin: 20px auto 60px auto;
        padding: 0 20px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .regio-card {
        background: var(--bg-white, #FFFFFF);
        padding: clamp(30px, 5vw, 50px);
        border-radius: 24px;
        box-shadow: 0 15px 40px rgba(26, 54, 93, 0.04);
        border: 1px solid rgba(26, 54, 93, 0.06);
    }
    
    .regio-header {
        text-align: center;
        max-width: 850px;
        margin: 0 auto 40px auto;
    }
    
    .regio-badge {
        background: rgba(224, 169, 109, 0.1);
        color: #744600;
        padding: 6px 16px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-block;
        margin-bottom: 12px;
    }
    
    .regio-title {
        font-size: clamp(1.5rem, 3.5vw, 2.1rem);
        font-weight: 800;
        color: var(--primary-blue, #1A365D);
        margin: 0 0 15px 0;
        letter-spacing: -0.5px;
    }
    
    .regio-divider {
        width: 50px;
        height: 4px;
        background-color: var(--gold-accent, #E0A96D);
        margin: 0 auto 20px auto;
        border-radius: 2px;
    }
    
    .regio-desc {
        color: var(--dark-text, #2C302E);
        font-size: 1.05rem;
        line-height: 1.7;
        font-weight: 500;
        margin: 0;
    }
    
    .regio-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 30px;
    }
    
    .regio-item {
        padding: 20px;
        border-radius: 12px;
    }
    
    .regio-item.gold {
        background: var(--bg-cream, #FDFBF7);
        border-left: 4px solid var(--gold-accent, #E0A96D);
    }
    
    .regio-item.blue {
        background: var(--bg-cream, #FDFBF7);
        border-left: 4px solid var(--primary-blue, #1A365D);
    }
    
    .regio-item-title {
        color: var(--primary-blue, #1A365D);
        display: block;
        font-size: 1.05rem;
        margin-bottom: 6px;
        font-weight: 700;
    }
    
    .regio-item-text {
        color: var(--dark-text, #2C302E);
        font-size: 0.9rem;
        line-height: 1.5;
        display: block;
    }

    /* Tech Stack */
    .tech-section {
        max-width: 1200px;
        margin: 60px auto 40px auto;
        padding: 0 20px;
        text-align: center;
    }
    
    .tech-title {
        font-size: clamp(1.5rem, 3.5vw, 2.1rem);
        font-weight: 800;
        color: var(--primary-blue, #1A365D);
        margin: 0 0 15px 0;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: -0.5px;
    }
    
    .tech-divider {
        width: 50px;
        height: 4px;
        background-color: var(--gold-accent, #E0A96D);
        margin: 0 auto 25px auto;
        border-radius: 2px;
    }
    
    .tech-desc {
        font-size: 1.05rem;
        color: var(--dark-text, #2C302E);
        max-width: 800px;
        margin: 0 auto 45px auto;
        font-family: 'Montserrat', sans-serif;
        line-height: 1.7;
        font-weight: 500;
    }
    
    .tech-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .tech-box {
        background: var(--bg-white, #FFFFFF);
        padding: 30px 20px;
        border-radius: 14px;
        box-shadow: 0 8px 25px rgba(26, 54, 93, 0.02);
        border: 1px solid rgba(26, 54, 93, 0.06);
        text-align: center;
        flex: 1 1 calc(33.333% - 20px);
        min-width: 280px;
        max-width: 360px;
        box-sizing: border-box;
    }
    
    .tech-icon {
        width: 36px !important;
        height: 36px !important;
        margin: 0 auto 12px auto;
        display: block;
        flex-shrink: 0 !important;
    }
    
    .tech-icon path, .tech-icon circle, .tech-icon rect, .tech-icon line, .tech-icon polyline, .tech-icon ellipse {
        stroke: var(--gold-accent, #E0A96D);
        stroke-width: 1.3;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }
    
    .tech-box:hover .tech-icon path,
    .tech-box:hover .tech-icon circle,
    .tech-box:hover .tech-icon rect,
    .tech-box:hover .tech-icon line,
    .tech-box:hover .tech-icon polyline,
    .tech-box:hover .tech-icon ellipse {
        stroke: var(--primary-blue, #1A365D);
    }

    .reveal-tech {
        opacity: 0;
        transform: perspective(1000px) rotateY(-360deg) scale(0.8);
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: transform 2.6s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 2.6s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
    }
    
    .reveal-tech.in-view {
        transform: perspective(1000px) rotateY(0deg) scale(1) !important; 
        opacity: 1 !important;
    }

    .tech-delay-1 { transition-delay: 0.1s !important; }
    .tech-delay-2 { transition-delay: 0.2s !important; }
    .tech-delay-3 { transition-delay: 0.3s !important; }
    .tech-delay-4 { transition-delay: 0.4s !important; }
    .tech-delay-5 { transition-delay: 0.5s !important; }

    .section-separator-leistungen {
        max-width: 600px;
        margin: 120px auto 0 auto;
        text-align: center;
        padding: 0 20px;
    }
    
    .separator-line-leistungen {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(26, 54, 93, 0.15), transparent);
    }

    /* ==========================================================================
       BOMBENFESTE MOTION-DESIGN TRENNUNG & ZURÜCKSETZUNG AUF DIE SMOOTHEN TEMPOS
       ========================================================================== */
    .reveal-element-leistungen {
        opacity: 0;
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translate3d(0, 150px, 0);
        transition: transform 2.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 2.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    .hero-card.reveal-element-leistungen {
        transform: translate3d(-150px, 0, 0);
        transition: transform 1.6s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 1.6s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
    }

    .reveal-element-leistungen.in-view {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
    }

    /* ==========================================================================
       FLOATING NAVIGATION LINES (Perfekte axiale Linearität im Original-Zustand)
       ========================================================================== */
    .floating-contact-bar,
    #scrollToTopBtn,
    .scroll-to-top,
    #back-to-top,
    .back-to-top-btn {
        right: 68px !important; 
        transition: right 0.3s ease, transform 0.3s ease !important;
    }

    @media (max-width: 576px) {
        .floating-contact-bar,
        #scrollToTopBtn,
        .scroll-to-top,
        #back-to-top,
        .back-to-top-btn {
            right: 20px !important; 
        }
        .regio-grid {
            grid-template-columns: 1fr !important;
        }
    }

    @media (max-width: 992px) {
        .tech-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }


/* ==========================================================================
   SEITE: WEBDESIGN & PREISE — seitenspezifische Ergänzungen
   (übernommen aus dem eingebetteten <style>-Block von webdesign-preise.php;
   Klassen, die mit anderen Seiten kollidiert hätten, wurden mit "-preise"
   versehen: about-hero, card-icon, faq-section, reveal-element. Die FAQ-
   Detailoptik (faq-item, faq-plus-icon etc.) nutzt die schon vorhandene,
   gemeinsame Version.)
   ========================================================================== */

    .pricing-wrapper,
    .matrix-section, 
    .wp-panel-section, 
    .quality-section,
    .faq-section-preise {
        width: 100%;
        position: relative;
        box-sizing: border-box;
    }

    .about-hero-preise {
        position: relative;
        overflow: hidden; 
        padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 6vw, 80px) 0;
        text-align: center;
        min-height: 45vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .about-hero-preise::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: linear-gradient(rgba(26, 54, 93, 0.15), rgba(26, 54, 93, 0.15)), url('/images/westkamp-media-webdesign-saarlouis.webp');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 0;
        transform-origin: center center;
        animation: heroZoomIn 25s ease-out forwards;
    }

    .about-hero-preise .container {
        position: relative;
        z-index: 1;
    }

    .intro-title-space {
        padding: clamp(50px, 6vw, 75px) 0 15px 0;
    }
    .intro-highlight-space {
        padding: 15px 0;
    }
    .intro-plain-space {
        padding: 15px 0 45px 0;
    }
    
    .pricing-intro-h2 {
        text-align: center;
        max-width: 850px;
        margin: 0 auto;
        font-family: 'Montserrat', sans-serif;
        font-size: clamp(1.4rem, 3.5vw, 2.2rem);
        font-weight: 800;
        color: var(--primary-blue, #1A365D);
        letter-spacing: -0.5px;
        line-height: 1.4;
    }
    
    .pricing-intro-p-highlight {
        max-width: 780px;
        margin: 0 auto;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.15rem;
        color: #744600;
        font-weight: 600;
        line-height: 1.7;
        border-left: 4px solid var(--gold-accent, #E0A96D);
        padding-left: 15px;
        background: rgba(224, 169, 109, 0.05);
        padding: 20px 20px 20px 25px;
        border-radius: 0 12px 12px 0;
        text-align: left;
    }
    
    .pricing-intro-p-plain {
        text-align: center;
        max-width: 850px;
        margin: 0 auto;
        font-family: 'Montserrat', sans-serif;
        color: var(--dark-text, #2C302E);
        font-size: 1.05rem;
        line-height: 1.7;
        font-weight: 500;
    }

    .price-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-bottom: clamp(40px, 6vw, 65px);
    }

    .sunshine-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        min-height: 610px;
        padding: 40px 30px;
        box-sizing: border-box;
        background: var(--bg-white, #FFFFFF);
        border: 1px solid rgba(224, 169, 109, 0.3);
        position: relative;
        border-radius: 20px;
        box-shadow: 0 10px 25px rgba(224, 169, 109, 0.03);
        /* KORREKTUR: overflow: visible garantiert die fehlerfreie Darstellung der oberen Kachel-Badges auf allen Endgeräten */
        overflow: visible !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
    }
    
    .sunshine-card.standard-border {
        border: 1px solid rgba(26, 54, 93, 0.05);
        box-shadow: 0 10px 30px rgba(26, 54, 93, 0.03);
    }
    
    .sunshine-card.featured-border {
        border: 2px solid var(--gold-accent, #E0A96D);
        box-shadow: 0 15px 35px rgba(224, 169, 109, 0.15);
        padding: 40px 25px;
    }
    
    .sunshine-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 20px 40px rgba(26, 54, 93, 0.07);
        border-color: rgba(26, 54, 93, 0.2);
    }

    .card-badge {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--gold-accent, #E0A96D);
        color: var(--primary-blue, #1A365D);
        padding: 6px 20px;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: 'Montserrat', sans-serif;
        z-index: 99;
    }
    
    .card-inner-title {
        font-size: 1.5rem;
        color: var(--primary-blue, #1A365D);
        margin: 0 0 10px 0;
        font-weight: 800;
        font-family: 'Montserrat', sans-serif;
    }
    
    .card-inner-desc.plain {
        font-style: normal;
        font-weight: 500;
        color: var(--dark-text, #2C302E);
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0 0 20px 0;
        font-family: 'Montserrat', sans-serif;
    }
    
    .card-price-tag {
        font-size: 2.2rem;
        font-weight: 900;
        color: var(--primary-blue, #1A365D);
        margin-bottom: 5px;
        font-family: 'Montserrat', sans-serif;
    }

    /* KORREKTUR: CSS-Erweiterungen für die verkleinerte Aktionszeile und das Durchstreichen des Altwertes */
    .price-promo-text {
        font-size: 0.85rem;
        font-weight: 700;
        color: #9B2C2C;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: block;
        font-family: 'Montserrat', sans-serif;
    }

    .old-price-strike {
        text-decoration: line-through;
        color: #A0AEC0;
        font-size: 1.5rem;
        font-weight: 600;
        margin-right: 12px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .card-price-sub {
        font-size: 0.82rem;
        color: #718096;
        font-weight: 700;
        margin-bottom: 25px;
        display: block;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 0.2px;
        line-height: 1.45;
    }

    .card-list {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .card-list-item {
        color: var(--dark-text, #2C302E);
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    
    .card-list-item.highlight { color: var(--primary-blue, #1A365D); font-weight: 700; }
    .card-list-item.seo { color: #22543D; font-weight: 800; }
    
    .button-wrapper {
        margin-top: 30px; 
        width: 100%;
    }
    
    .button-wrapper .sunshine-button {
        display: block; 
        text-align: center; 
        background-color: var(--primary-blue, #1A365D); 
        color: #FFFFFF; 
        padding: 14px; 
        border-radius: 10px; 
        font-weight: 700; 
        text-decoration: none; 
        transition: background-color 0.2s ease, transform 0.2s ease; 
        font-family: 'Montserrat', sans-serif;
    }
    
    .sunshine-card.featured-border .button-wrapper .sunshine-button { background-color: var(--gold-accent, #E0A96D); color: var(--dark-text, #2C302E); }
    .button-wrapper .sunshine-button:hover { background-color: #234675; transform: scale(1.02); }
    .sunshine-card.featured-border .button-wrapper .sunshine-button:hover { background-color: var(--primary-blue, #1A365D); color: #FFFFFF; }

    .card-icon-preise {
        width: 38px !important;
        height: 38px !important;
        margin-bottom: 15px;
        display: block;
        flex-shrink: 0 !important;
    }
    
    .card-icon-preise path, .card-icon-preise circle, .card-icon-preise rect, .card-icon-preise line, .card-icon-preise polyline, .card-icon-preise polygon {
        stroke: var(--gold-accent, #E0A96D);
        stroke-width: 1.3;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }
    
    .sunshine-card:hover {
        overflow: visible !important;
    }

    .sunshine-card:hover .card-icon-preise path,
    .sunshine-card:hover .card-icon-preise circle,
    .sunshine-card:hover .card-icon-preise rect,
    .sunshine-card:hover .card-icon-preise line,
    .sunshine-card:hover .card-icon-preise polyline,
    .sunshine-card:hover .card-icon-preise polygon {
        stroke: var(--primary-blue, #1A365D);
    }

    .list-check-icon {
        width: 14px !important;
        height: 14px !important;
        margin-top: 3px;
        flex-shrink: 0;
    }
    
    .list-check-icon polyline {
        stroke: var(--gold-accent, #E0A96D);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }
    
    .sunshine-card:hover .list-check-icon polyline {
        stroke: var(--primary-blue, #1A365D);
    }

    /* Manifest Block & Tablet-Grid-Schutz */
    .pricing-service-manifest {
        max-width: 1200px;
        margin: 0 auto 40px auto;
        background: var(--bg-white, #FFFFFF);
        border-left: 5px solid var(--primary-blue, #1A365D);
        padding: 40px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(26, 54, 93, 0.04);
        font-family: 'Montserrat', sans-serif;
        text-align: left;
        box-sizing: border-box;
    }
    
    .manifest-title {
        font-size: clamp(1.3rem, 3vw, 1.76rem);
        color: var(--primary-blue, #1A365D);
        font-weight: 900;
        margin: 0 0 15px 0;
        line-height: 1.3;
    }
    
    .manifest-intro {
        font-size: 1.05rem;
        color: var(--dark-text, #2C302E);
        line-height: 1.6;
        font-weight: 500;
        margin: 0 0 30px 0;
    }
    
    .manifest-bullets {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .manifest-bullet-item {
        background: var(--bg-cream, #FDFBF7);
        padding: 20px;
        border-radius: 12px;
        border-top: 3px solid var(--gold-accent, #E0A96D);
    }
    
    .manifest-bullet-item strong {
        color: var(--primary-blue, #1A365D);
        font-size: 1.05rem;
        display: block;
        margin-bottom: 8px;
    }
    
    .manifest-bullet-item span {
        color: var(--dark-text, #2C302E);
        font-size: 0.95rem;
        line-height: 1.6;
        display: block;
        font-weight: 500;
    }

    @media (max-width: 992px) {
        .manifest-bullets {
            grid-template-columns: 1fr !important;
            gap: 20px;
        }
    }

    .pricing-addon-note {
        max-width: 900px;
        margin: 0 auto;
        background: rgba(224, 169, 109, 0.05);
        border: 1px dashed var(--gold-accent, #E0A96D);
        padding: 20px clamp(15px, 4vw, 30px);
        border-radius: 12px;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        box-sizing: border-box;
    }

    /* Trust Matrix Module */
    .matrix-section {
        background: var(--bg-white, #FFFFFF);
        padding: clamp(50px, 6vw, 75px) 0;
        border-top: 1px solid rgba(26, 54, 93, 0.06);
        border-bottom: 1px solid rgba(26, 54, 93, 0.06);
        margin: clamp(40px, 6vw, 65px) 0;
    }
    
    .matrix-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }
    
    .matrix-col-title {
        font-size: clamp(1.4rem, 3vw, 1.8rem);
        color: var(--primary-blue, #1A365D);
        margin: 0 0 10px 0;
        font-weight: 900;
        font-family: 'Montserrat', sans-serif;
    }
    
    .matrix-col-divider {
        width: 50px;
        height: 4px;
        background-color: var(--gold-accent, #E0A96D);
        margin-bottom: 25px;
        border-radius: 2px;
    }
    
    .matrix-col-desc {
        color: var(--dark-text, #2C302E);
        line-height: 1.6;
        margin-bottom: 30px;
        font-weight: 500;
        font-size: 1rem;
        font-family: 'Montserrat', sans-serif;
    }

    .benefits-subgrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .benefit-item {
        background: var(--bg-cream, #FDFBF7);
        padding: 20px;
        border-radius: 12px;
        border-left: 4px solid var(--gold-accent, #E0A96D);
        box-shadow: 0 4px 15px rgba(26, 54, 93, 0.01);
        font-family: 'Montserrat', sans-serif;
    }
    
    .benefit-item.blue-stripe {
        border-left-color: var(--primary-blue, #1A365D);
    }
    
    .benefit-item strong {
        color: var(--primary-blue, #1A365D);
        font-size: 1.05rem;
        display: block;
        margin-bottom: 5px;
    }
    
    .benefit-item span {
        color: var(--dark-text, #2C302E);
        font-size: 0.95rem;
        line-height: 1.5;
        display: block;
    }

    .industries-subgrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .industry-item {
        background: var(--bg-cream, #FDFBF7);
        padding: 18px 15px;
        border-radius: 8px;
        border: 1px solid rgba(26, 54, 93, 0.05);
        font-weight: 700;
        color: var(--primary-blue, #1A365D);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .industry-dot {
        width: 6px;
        height: 6px;
        background-color: var(--gold-accent, #E0A96D);
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Core Panel Layout */
    .wp-panel-section {
        margin-bottom: clamp(40px, 6vw, 65px);
    }
    
    .wp-panel-card {
        background: var(--bg-white, #FFFFFF);
        padding: clamp(30px, 5vw, 50px);
        border-radius: 24px;
        box-shadow: 0 15px 40px rgba(26, 54, 93, 0.044);
        border: 1px solid rgba(26, 54, 93, 0.06);
        font-family: 'Montserrat', sans-serif;
        text-align: center;
    }
    
    .wp-panel-title {
        font-size: clamp(1.4rem, 3.5vw, 1.8rem);
        font-weight: 900;
        color: var(--primary-blue, #1A365D);
        margin: 0 0 10px 0;
    }
    
    .wp-panel-divider {
        width: 50px;
        height: 4px;
        background-color: var(--gold-accent, #E0A96D);
        margin: 0 auto 20px auto;
        border-radius: 2px;
    }
    
    .wp-panel-text {
        color: var(--dark-text, #2C302E);
        font-size: 1.05rem;
        line-height: 1.7;
        max-width: 850px;
        margin: 0 auto 25px auto;
        font-weight: 500;
    }
    
    .wp-box-btn {
        display: inline-block;
        background-color: var(--primary-blue, #1A365D);
        color: #ffffff;
        text-decoration: none;
        padding: 12px 28px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.9rem;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }
    
    .wp-box-btn:hover {
        background-color: #234675;
        transform: scale(1.02);
    }

    /* Quality Indicator Section */
    .quality-section {
        margin-bottom: clamp(40px, 6vw, 65px);
    }
    
    .quality-box {
        background: rgba(26, 54, 93, 0.03);
        padding: 35px;
        border-radius: 20px;
        border-left: 5px solid var(--gold-accent, #E0A96D);
        text-align: center;
    }
    
    .quality-title {
        font-size: 1.2rem;
        color: var(--primary-blue, #1A365D);
        margin: 0 0 10px 0;
        font-weight: 700;
        font-family: 'Montserrat', sans-serif;
    }
    
    .quality-text {
        color: var(--dark-text, #2C302E);
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0;
        font-weight: 500;
        font-family: 'Montserrat', sans-serif;
    }

    .pricing-legal-footnote {
        width: 100%;
        text-align: center;
        font-size: 0.82rem;
        color: #A0AEC0;
        font-weight: 600;
        margin: 30px auto;
        font-family: 'Montserrat', sans-serif;
        display: block;
    }

    /* FAQ Setup */
    .faq-section-preise {
        max-width: 900px;
        margin: 0 auto 80px auto;
    }

    /* ==========================================================================
       BOMBENFESTE MOTION-DESIGN TRENNUNG & ZURÜCKSETZUNG AUF DIE SMOOTHEN TEMPOS[cite: 6]
       ========================================================================== */
    .reveal-element-preise {
        opacity: 0;
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Alle Elemente fliegen wieder herrlich ruhig von UNTEN NACH OBEN ein (2.6s)[cite: 6] */
        transform: translate3d(0, 150px, 0);
        transition: transform 2.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 2.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    /* AUSNAHME: Nur die allererste Hero-Karte fliegt ruhig von LINKS NACH RECHTS ein (1.6s)[cite: 6] */
    .hero-card.reveal-element-preise {
        transform: translate3d(-150px, 0, 0);
        transition: transform 1.6s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 1.6s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
    }

    /* Sobald die Elemente im Sichtfeld sind, werden sie vollkommen eingeblendet */
    .reveal-element-preise.in-view {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
    }

    /* ==========================================================================
       FLOATING BUTTONS AXIALE LINEARITÄT (Kein Anstoßen / Perfekte Achse)[cite: 4]
       ========================================================================== */
    /* Die 3 runden Buttons und das viereckige Element rücken nach links in eine exakte vertikale Achse[cite: 4] */
    .floating-contact-bar,
    #scrollToTopBtn,
    .scroll-to-top,
    #back-to-top,
    .back-to-top-btn {
        right: 68px !important; 
        transition: right 0.3s ease, transform 0.3s ease !important;
    }

    /* Länglicher Button verschwindet auf dem Handy, Rundelemente wandern wieder bündig an den Rand[cite: 4] */
    @media (max-width: 576px) {
        .sticky-booking-btn {
            display: none !important;
            pointer-events: none !important;
            visibility: hidden !important;
        }
        .floating-contact-bar,
        #scrollToTopBtn,
        .scroll-to-top,
        #back-to-top,
        .back-to-top-btn {
            right: 20px !important; 
        }
    }

    /* Responsive Design Framework */
    @media (max-width: 1024px) {
        .price-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 992px) {
        .matrix-grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }
    }
    @media (max-width: 768px) {
        .price-grid {
            grid-template-columns: 1fr;
        }
        .benefits-subgrid, .industries-subgrid {
            grid-template-columns: 1fr;
        }
    }


/* ==========================================================================
   PREISKARTEN-FARBWELTEN  (rein ueber CSS gesteuert, kein HTML noetig)

   Die Farbe richtet sich nach der POSITION der Karte im Preisraster:
       1. Karte = ruhiges Blau      (Einstieg)
       2. Karte = warmes Gold       (Top-Empfehlung, goldener Rahmen bleibt)
       3. Karte = dezentes Flieder  (Premium)

   Farben aendern? Nur die Werte unten anpassen - sonst nichts.
   Weitere Karte kommt dazu? Einfach einen nth-child(4)-Block ergaenzen.
   ========================================================================== */

/* Der goldene Standard-Streifen wird abgeschaltet, sonst laufen zwei
   Streifen nebeneinander (Kartenfarbe + Gold). */
.price-grid .sunshine-card::before {
    display: none;
}

/* 1. Karte -- Blau */
.price-grid > *:nth-child(1) .sunshine-card {
    background: #F0F7FF;
    border: 1px solid rgba(26, 54, 93, 0.15);
    border-left: 6px solid var(--primary-blue, #1A365D);
}

/* 2. Karte -- Gold (Rahmen der Top-Empfehlung bleibt erhalten) */
.price-grid > *:nth-child(2) .sunshine-card {
    background: #FFFDF4;
}

/* 3. Karte -- Flieder */
.price-grid > *:nth-child(3) .sunshine-card {
    background: #F8F5FF;
    border: 1px solid rgba(107, 70, 193, 0.15);
    border-left: 6px solid #6B46C1;
}


/* ==========================================================================
   VORTEILE-SEKTION ("Ihre exklusiven Vorteile" + Branchen)

   Bisher: weisse Sektion mit cremefarbenen Kaestchen - zu wenig Kontrast.
   Jetzt:  sanft gruen getoente Sektion, darin WEISSE Kaestchen.
           Dadurch hebt sich der Block klar von den Nachbar-Sektionen ab
           und die Kaestchen bekommen Tiefe.

   Gruen ist bewusst gewaehlt: Blau, Gold und Flieder sind bereits bei den
   Preiskarten im Einsatz. Farbe aendern? Nur die Werte unten anpassen.
   ========================================================================== */

.matrix-section {
    background: #F3F8F5;
    border-top: 1px solid rgba(34, 84, 61, 0.12);
    border-bottom: 1px solid rgba(34, 84, 61, 0.12);
    position: relative;
}

/* Feine Akzentlinie am oberen Rand der Sektion */
.matrix-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22543D 0%, var(--gold-accent, #E0A96D) 100%);
}

/* Kaestchen werden weiss und heben sich dadurch ab */
.matrix-section .benefit-item,
.matrix-section .industry-item {
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(34, 84, 61, 0.06);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.matrix-section .benefit-item:hover,
.matrix-section .industry-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(34, 84, 61, 0.12);
}

/* Trennlinien der beiden Spalten an die Farbwelt angleichen */
.matrix-section .matrix-col-divider {
    background: linear-gradient(90deg, #22543D 0%, rgba(34, 84, 61, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .matrix-section .benefit-item,
    .matrix-section .industry-item {
        transition: none;
    }
    .matrix-section .benefit-item:hover,
    .matrix-section .industry-item:hover {
        transform: none;
    }
}


/* ==========================================================================
   ABLAUF-KARTEN (Seite "Ablauf" - die vier Schritte)

   Farbe richtet sich nach der POSITION der Karte, kein HTML noetig:
       1. Schritt = Blau      2. Schritt = Gold
       3. Schritt = Gruen     4. Schritt = Flieder

   Dieselbe Farbfamilie wie die Karten auf "Ueber mich" - so bleibt der
   Auftritt ueber alle Unterseiten hinweg einheitlich.
   Farbe aendern? Nur die Werte im jeweiligen Block anpassen.
   ========================================================================== */

/* 1. Schritt -- Blau */
.process-grid > .process-card:nth-child(1) {
    background: #F0F7FF;
    border: 1px solid rgba(26, 54, 93, 0.15);
    border-left: 6px solid var(--primary-blue, #1A365D);
}
.process-grid > .process-card:nth-child(1):hover {
    border-color: rgba(26, 54, 93, 0.35);
    border-left-color: var(--primary-blue, #1A365D);
}

/* 2. Schritt -- Gold */
.process-grid > .process-card:nth-child(2) {
    background: #FFFDF4;
    border: 1px solid rgba(224, 169, 109, 0.30);
    border-left: 6px solid var(--gold-accent, #E0A96D);
}
.process-grid > .process-card:nth-child(2):hover {
    border-color: rgba(224, 169, 109, 0.55);
    border-left-color: var(--gold-accent, #E0A96D);
}

/* 3. Schritt -- Gruen */
.process-grid > .process-card:nth-child(3) {
    background: #F3F8F5;
    border: 1px solid rgba(34, 84, 61, 0.15);
    border-left: 6px solid #22543D;
}
.process-grid > .process-card:nth-child(3):hover {
    border-color: rgba(34, 84, 61, 0.35);
    border-left-color: #22543D;
}

/* 4. Schritt -- Flieder */
.process-grid > .process-card:nth-child(4) {
    background: #F8F5FF;
    border: 1px solid rgba(107, 70, 193, 0.15);
    border-left: 6px solid #6B46C1;
}
.process-grid > .process-card:nth-child(4):hover {
    border-color: rgba(107, 70, 193, 0.35);
    border-left-color: #6B46C1;
}


/* ==========================================================================
   FAQ - BESSERE UNTERSCHEIDBARKEIT DER EINZELNEN FRAGEN

   Problem vorher: alle Fragen weiss auf hellem Grund - sie verschwammen.
   Jetzt:
     - abwechselnde Hintergruende (Zebra-Muster)
     - mehr Abstand zwischen den Fragen
     - die GEOEFFNETE Frage hebt sich klar mit goldenem Balken ab
   ========================================================================== */

.faq-item {
    margin-bottom: 14px;
    transition: background-color 0.3s ease, border-left-color 0.3s ease, box-shadow 0.3s ease;
}

/* Jede zweite Frage leicht getoent */
.faq-item:nth-child(even) {
    background-color: #F4F7FA;
}

/* Beim Ueberfahren mit der Maus */
.faq-item:hover {
    border-left-color: var(--gold-accent, #E0A96D);
    box-shadow: 0 8px 22px rgba(26, 54, 93, 0.07);
}

/* Geoeffnete Frage - deutlich hervorgehoben */
.faq-item.active {
    background-color: #FFFFFF;
    border-left-color: var(--gold-accent, #E0A96D);
    box-shadow: 0 14px 32px rgba(26, 54, 93, 0.10);
}

.faq-item.active .faq-question-text {
    color: var(--primary-blue, #1A365D);
    font-weight: 800;
}

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



/* ==========================================================================
   SEITE: WEBSEITENBETREUUNG

   Alle Regeln sind mit .page-betreuung abgegrenzt und wirken deshalb NUR
   auf dieser Seite. Im HTML traegt dazu das <main>-Element die Klasse:
       <main class="page-betreuung">
   Dadurch liegt alles hier im gemeinsamen Stylesheet, ohne dass andere
   Unterseiten beeinflusst werden.
   ========================================================================== */

.page-betreuung, .page-betreuung {
        overflow-x: hidden !important;
        width: 100%;
        margin: 0;
        padding: 0;
}

.page-betreuung {
        width: 100%;
        position: relative;
        display: block;
        overflow: hidden !important;
}


.page-betreuung .hero-section {
        position: relative;
        min-height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: clamp(50px, 7vw, 90px) 20px;
        width: 100%;
        overflow: hidden;
}

.page-betreuung .hero-bg-container {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
}

.page-betreuung .hero-bg-image-native {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: none !important;
        transform: scale(1) !important;
}

.page-betreuung .hero-card {
        background: rgba(253, 251, 247, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: clamp(35px, 6vw, 60px) clamp(15px, 5vw, 45px);
        border-radius: 24px;
        max-width: 850px;
        box-shadow: 0 25px 50px rgba(155, 44, 44, 0.06);
        border: 1px solid rgba(155, 44, 44, 0.15);
        width: 100%;
        position: relative;
        z-index: 2;
}

.page-betreuung .hero-badge {
        background: rgba(224, 169, 109, 0.15);
        color: #744600;
        padding: 5px 14px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-block;
        margin-bottom: 15px;
        font-family: 'Montserrat', sans-serif;
}

.page-betreuung .hero-title {
        font-size: clamp(1.7rem, 5.5vw, 2.8rem);
        font-weight: 900;
        color: var(--primary-blue, #1A365D);
        margin: 0 0 20px 0;
        letter-spacing: -1px;
        line-height: 1.25;
        font-family: 'Montserrat', sans-serif;
}

.page-betreuung .hero-title span {
        color: var(--gold-accent, #E0A96D);
}

.page-betreuung .hero-desc {
        font-size: clamp(1rem, 2.5vw, 1.15rem);
        color: var(--dark-text, #2C302E);
        max-width: 650px;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.6;
        font-family: 'Montserrat', sans-serif;
}

.page-betreuung .support-wrapper {
        padding-top: clamp(60px, 8vw, 100px);
        padding-bottom: 40px;
}

.page-betreuung .support-intro {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 50px auto;
        font-family: 'Montserrat', sans-serif;
}

.page-betreuung .support-intro h2 {
        font-size: clamp(1.4rem, 3.5vw, 2rem);
        font-weight: 800;
        color: var(--primary-blue, #1A365D);
        margin: 0 0 15px 0;
        letter-spacing: -0.5px;
}

.page-betreuung .support-intro p {
        color: var(--dark-text, #2C302E);
        font-size: 1.05rem;
        line-height: 1.7;
        font-weight: 500;
        margin: 0;
}

.page-betreuung .support-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        font-family: 'Montserrat', sans-serif;
}

.page-betreuung .sunshine-card {
        background: var(--bg-white, #FFFFFF);
        border-radius: 20px;
        padding: 40px 30px;
        box-shadow: 0 10px 30px rgba(26, 54, 93, 0.04);
        border: 1px solid rgba(26, 54, 93, 0.06);
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: visible !important;
        transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.page-betreuung .sunshine-card.featured-border {
        border: 2px solid var(--gold-accent, #E0A96D);
        box-shadow: 0 15px 35px rgba(224, 169, 109, 0.1);
}

.page-betreuung .sunshine-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(26, 54, 93, 0.08);
}

.page-betreuung .card-badge {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--gold-accent, #E0A96D);
        color: var(--primary-blue, #1A365D);
        padding: 4px 16px;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
}

.page-betreuung .card-inner-title {
        font-size: 1.45rem;
        color: var(--primary-blue, #1A365D);
        margin: 0 0 10px 0;
        font-weight: 800;
}

.page-betreuung .card-inner-desc {
        color: var(--dark-text, #2C302E);
        font-size: 0.95rem;
        line-height: 1.6;
        min-height: 50px;
        margin-bottom: 25px;
}

.page-betreuung .card-price-box {
        background: var(--bg-cream, #FDFBF7);
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 30px;
        border: 1px solid rgba(26, 54, 93, 0.04);
}

.page-betreuung .sunshine-card.featured-border .card-price-box {
        background: rgba(224, 169, 109, 0.1);
        border: 1px solid rgba(224, 169, 109, 0.2);
}

.page-betreuung .card-price-value {
        font-size: 2.2rem;
        font-weight: 900;
        color: var(--primary-blue, #1A365D);
}

.page-betreuung .card-price-subtext {
        font-size: 0.85rem;
        color: var(--dark-text, #2C302E);
        display: block;
        font-weight: 600;
        margin-top: 2px;
}

.page-betreuung .card-list {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left;
        color: var(--dark-text, #2C302E);
        font-size: 0.95rem;
        line-height: 1.8;
        display: flex;
        flex-direction: column;
        gap: 10px;
}

.page-betreuung .card-list-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
}

.page-betreuung .card-list-item.highlight { color: var(--primary-blue, #1A365D); font-weight: 700;
}

.page-betreuung .pricing-service-manifest {
        max-width: 1200px;
        margin: 60px auto 20px auto;
        background: var(--bg-white, #FFFFFF);
        border-left: 5px solid var(--primary-blue, #1A365D);
        padding: 40px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(26, 54, 93, 0.04);
        font-family: 'Montserrat', sans-serif;
        text-align: left;
        box-sizing: border-box;
}

.page-betreuung .manifest-title {
        font-size: clamp(1.3rem, 3vw, 1.76rem);
        color: var(--primary-blue, #1A365D);
        font-weight: 900;
        margin: 0 0 15px 0;
        line-height: 1.3;
}

.page-betreuung .manifest-intro {
        font-size: 1.05rem;
        color: var(--dark-text, #2C302E);
        line-height: 1.6;
        font-weight: 500;
        margin: 0 0 30px 0;
}

.page-betreuung .manifest-bullets {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
}

.page-betreuung .manifest-bullet-item {
        background: var(--bg-cream, #FDFBF7);
        padding: 20px;
        border-radius: 12px;
        border-top: 3px solid var(--gold-accent, #E0A96D);
}

.page-betreuung .manifest-bullet-item strong {
        color: var(--primary-blue, #1A365D);
        font-size: 1.05rem;
        display: block;
        margin-bottom: 8px;
}

.page-betreuung .manifest-bullet-item span {
        color: var(--dark-text, #2C302E);
        font-size: 0.95rem;
        line-height: 1.6;
        display: block;
        font-weight: 500;
}

@media (max-width: 992px) {
    .page-betreuung .manifest-bullets {
            grid-template-columns: 1fr;
            gap: 20px;
    }
}

.page-betreuung .schedule-section {
        background-color: var(--primary-blue, #1A365D);
        color: #FDFBF7;
        padding: 80px 0;
        margin: 60px 0;
        font-family: 'Montserrat', sans-serif;
}

.page-betreuung .schedule-box {
        max-width: 900px;
        margin: 0 auto;
}

.page-betreuung .schedule-header-container {
        text-align: center;
        margin-bottom: 50px;
}

.page-betreuung .rough-daily-schedule-title {
        font-size: clamp(1.5rem, 3.5vw, 2.2rem);
        font-weight: 900;
        color: #FDFBF7;
        margin: 0 0 15px 0;
}

.page-betreuung .rough-daily-schedule-title span { color: var(--gold-accent, #E0A96D);
}

.page-betreuung .timeline-container {
        position: relative;
        border-left: 3px solid var(--gold-accent, #E0A96D);
        padding-left: 30px;
        margin-left: 20px;
}

.page-betreuung .timeline-item {
        position: relative;
        margin-bottom: 40px;
}

.page-betreuung .timeline-item:last-child { margin-bottom: 0;
}

.page-betreuung .timeline-item::before {
        content: '';
        position: absolute;
        left: -41.5px;
        top: 4px;
        width: 20px;
        height: 20px;
        background: var(--gold-accent, #E0A96D);
        border-radius: 50%;
        border: 4px solid var(--primary-blue, #1A365D);
}

.page-betreuung .timeline-item h4 {
        font-size: 1.15rem;
        margin: 0 0 8px 0;
        font-weight: 800;
        color: var(--gold-accent, #E0A96D);
}



.page-betreuung .process-card p, .page-betreuung .process-card h3 {
         font-family: 'Montserrat', sans-serif !important;
}











.page-betreuung .timeline-item p {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.6;
        font-weight: 500;
        opacity: 0.9;
}

.page-betreuung .pricing-legal-footnote {
        text-align: center;
        font-size: 0.8rem;
        color: #A0AEC0;
        font-weight: 600;
        margin: 40px auto 20px auto;
        max-width: 1200px;
        font-family: 'Montserrat', sans-serif;
}

.page-betreuung .card-icon {
        width: 42px;
        height: 42px;
        margin: 0 auto 15px auto;
        display: block;
        transition: transform 0.4s ease;
}

.page-betreuung .card-icon path, .page-betreuung .card-icon circle, .page-betreuung .card-icon rect, .page-betreuung .card-icon line, .page-betreuung .card-icon polyline, .page-betreuung .card-icon polygon {
        stroke: var(--gold-accent, #E0A96D);
        stroke-width: 1.3;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transition: stroke 0.4s ease, stroke-width 0.4s ease;
}

.page-betreuung .sunshine-card:hover .card-icon path, .page-betreuung .sunshine-card:hover .card-icon circle, .page-betreuung .sunshine-card:hover .card-icon rect, .page-betreuung .sunshine-card:hover .card-icon line, .page-betreuung .sunshine-card:hover .card-icon polyline, .page-betreuung .sunshine-card:hover .card-icon polygon {
        stroke: var(--primary-blue, #1A365D);
        stroke-width: 1.5;
}

.page-betreuung .sunshine-card:hover .card-icon {
        transform: scale(1.08);
}

.page-betreuung .list-check-icon {
        width: 14px;
        height: 14px;
        margin-top: 3px;
        flex-shrink: 0;
}

.page-betreuung .list-check-icon polyline {
        stroke: var(--gold-accent, #E0A96D);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transition: stroke 0.4s ease;
}

.page-betreuung .sunshine-card:hover .list-check-icon polyline {
        stroke: var(--primary-blue, #1A365D);
}

.page-betreuung .button-container {
        margin-top: 30px;
}

.page-betreuung .sunshine-button {
        display: inline-block;
        background-color: var(--primary-blue, #1A365D);
        color: #FFFFFF;
        padding: 14px 28px;
        border-radius: 8px;
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
        font-family: 'Montserrat', sans-serif;
        box-shadow: 0 4px 15px rgba(26, 54, 93, 0.1);
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.page-betreuung .sunshine-button:hover {
        background-color: var(--gold-accent, #E0A96D);
        color: var(--dark-text, #2C302E);
        box-shadow: 0 6px 20px rgba(224, 169, 109, 0.3);
}

.page-betreuung .sunshine-card.featured-border .sunshine-button {
        background-color: var(--gold-accent, #E0A96D);
        color: var(--dark-text, #2C302E);
}

.page-betreuung .sunshine-card.featured-border .sunshine-button:hover {
        background-color: var(--primary-blue, #1A365D);
        color: #FFFFFF;
        box-shadow: 0 6px 20px rgba(26, 54, 93, 0.2);
}

.page-betreuung .pillars-matrix-section {
        max-width: 1200px;
        margin: 80px auto 40px auto;
        padding: 0 20px;
        box-sizing: border-box;
        font-family: 'Montserrat', sans-serif;
}

.page-betreuung .pillars-matrix-card {
        background: #FFFDF9;
        border: 2px dashed var(--gold-accent, #E0A96D);
        padding: 40px;
        border-radius: 24px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(224, 169, 109, 0.05);
}

.page-betreuung .pillars-matrix-title {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--primary-blue, #1A365D);
        margin: 0 0 15px 0;
}

.page-betreuung .pillars-matrix-divider {
        width: 50px;
        height: 4px;
        background-color: var(--gold-accent, #E0A96D);
        margin: 0 auto 35px auto;
        border-radius: 2px;
}

.page-betreuung .pillars-matrix-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
        text-align: left;
}

.page-betreuung .pillars-matrix-box {
        background: #FFFFFF;
        padding: 30px 25px;
        border-radius: 16px;
        border-left: 4px solid var(--primary-blue, #1A365D);
        box-shadow: 0 5px 15px rgba(26, 54, 93, 0.01);
        transition: transform 0.3s ease, border-color 0.3s ease;
}

.page-betreuung .pillars-matrix-box.gold-stripe {
        border-left-color: var(--gold-accent, #E0A96D);
}

.page-betreuung .pillars-matrix-box:hover {
        transform: translateY(-3px);
}

.page-betreuung .pillars-matrix-box strong {
        color: var(--primary-blue, #1A365D);
        font-size: 1.15rem;
        display: block;
        margin-bottom: 8px;
        font-weight: 800;
        overflow-wrap: normal !important;
        word-break: normal !important;
}

.page-betreuung .pillars-matrix-box span {
        color: var(--dark-text, #2C302E);
        font-size: 0.95rem;
        line-height: 1.6;
        display: block;
        font-weight: 500;
}

.page-betreuung .section-separator {
        max-width: 600px;
        margin: 100px auto 0 auto;
        text-align: center;
        padding: 0 20px;
}

.page-betreuung .separator-line {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(26, 54, 93, 0.15), transparent);
}



















.page-betreuung .reveal-element {
        opacity: 0;
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translate3d(0, 150px, 0);
        transition: transform 2.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 2.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.page-betreuung .hero-card.reveal-element {
        transform: translate3d(-180px, 0, 0);
        transition: transform 1.6s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 1.6s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
}

.page-betreuung .reveal-element.in-view {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
}

.page-betreuung .floating-contact-bar, .page-betreuung #scrollToTopBtn, .page-betreuung .scroll-to-top, .page-betreuung #back-to-top, .page-betreuung .back-to-top-btn {
        right: 68px !important; 
        transition: right 0.3s ease, transform 0.3s ease !important;
}

@media (min-width: 1025px) {
    .page-betreuung .support-grid {
            grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .page-betreuung .support-grid {
            grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .page-betreuung .support-grid {
            grid-template-columns: 1fr !important;
    }
}

@media (max-width: 576px) {
    .page-betreuung .sticky-booking-btn {
            display: none !important;
            pointer-events: none !important;
            visibility: hidden !important;
    }
    .page-betreuung .floating-contact-bar, .page-betreuung #scrollToTopBtn, .page-betreuung .scroll-to-top, .page-betreuung #back-to-top, .page-betreuung .back-to-top-btn {
            right: 20px !important;
    }
}

/* --- Die drei Betreuungs-Pakete farblich absetzen --- */
/* Der goldene Standard-Streifen wird abgeschaltet, sonst laufen zwei
   Streifen nebeneinander (Kartenfarbe + Gold). */
.page-betreuung .support-grid .sunshine-card::before {
    display: none;
}

.page-betreuung .support-grid > *:nth-child(1) .sunshine-card {
    background: #F0F7FF;
    border: 1px solid rgba(26, 54, 93, 0.15);
    border-left: 6px solid var(--primary-blue, #1A365D);
}

.page-betreuung .support-grid > *:nth-child(2) .sunshine-card {
    background: #FFFDF4;
    border: 1px solid rgba(224, 169, 109, 0.30);
    border-left: 6px solid var(--gold-accent, #E0A96D);
}

.page-betreuung .support-grid > *:nth-child(3) .sunshine-card {
    background: #F8F5FF;
    border: 1px solid rgba(107, 70, 193, 0.15);
    border-left: 6px solid #6B46C1;
}


/* --------------------------------------------------------------------------
   FAQ-LAYOUT DER BETREUUNGSSEITE

   NUR Breite, Zentrierung und Ueberschrift. Das Aussehen der einzelnen
   Fragen (Zebra-Muster, geoeffneter Zustand) kommt bewusst aus den
   gemeinsamen Regeln weiter oben - damit es hier genauso aussieht
   wie auf der Preisseite.
   -------------------------------------------------------------------------- */

.page-betreuung .faq-section {
    max-width: 900px;
    margin: 60px auto 120px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.page-betreuung .faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.page-betreuung .faq-title,
.page-betreuung .faq-main-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: var(--primary-blue, #1A365D);
    text-align: center;
    margin: 0 0 15px 0;
}

.page-betreuung .faq-divider {
    width: 60px;
    height: 4px;
    background-color: var(--gold-accent, #E0A96D);
    margin: 0 auto 50px auto;
    border-radius: 2px;
}


/* --------------------------------------------------------------------------
   DURCHGESTRICHENER ALTPREIS - eigene Zeile ueber dem aktuellen Preis

   Vorher standen alter und neuer Preis nebeneinander, wodurch das
   Euro-Zeichen auf schmalen Karten in die naechste Zeile rutschte.
   -------------------------------------------------------------------------- */

.card-price-tag {
    line-height: 1.15;
}

.card-price-tag .old-price-strike {
    display: block;
    margin-right: 0;
    margin-bottom: 2px;
    font-size: 1.25rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* Der aktuelle Preis soll nie umbrechen */
.card-price-tag {
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   FAQ-SEITE - ZEBRA-MUSTER

   Die FAQ-Seite nutzt eine andere Bauweise (details/summary) als die
   uebrigen Unterseiten, deshalb eigene Regeln. Optik bleibt gleich:
   jede zweite Frage getoent, die aufgeklappte hebt sich golden ab.
   -------------------------------------------------------------------------- */

.faq-grid .faq-accordion-item {
    border-left: 5px solid var(--primary-blue, #1A365D);
    transition: background-color 0.3s ease, border-left-color 0.3s ease, box-shadow 0.3s ease;
}

/* Jede zweite Frage leicht getoent */
.faq-grid .faq-accordion-item:nth-child(even) {
    background: #F4F7FA;
}

.faq-grid .faq-accordion-item:hover {
    border-left-color: var(--gold-accent, #E0A96D);
    box-shadow: 0 8px 22px rgba(26, 54, 93, 0.07);
}

/* Aufgeklappte Frage deutlich hervorheben */
.faq-grid .faq-accordion-item:has(details[open]) {
    background: #FFFFFF;
    border-left-color: var(--gold-accent, #E0A96D);
    box-shadow: 0 14px 32px rgba(26, 54, 93, 0.10);
}

.faq-grid details[open] > summary {
    color: var(--primary-blue, #1A365D);
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .faq-grid .faq-accordion-item { transition: none; }
}


/* --------------------------------------------------------------------------
   HOSTING-HINWEIS IN DEN PREISKARTEN + STARTKASTEN

   Der Hinweis steht bewusst klein direkt unter dem Preis, damit das
   Festpreis-Versprechen ehrlich bleibt, ohne die Karte zu ueberladen.
   -------------------------------------------------------------------------- */

.card-hosting-note {
    font-size: 0.74rem;
    line-height: 1.5;
    color: #718096;
    font-weight: 500;
    margin: -18px 0 22px 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 1px dashed rgba(26, 54, 93, 0.15);
    text-align: left;
}

.card-hosting-note strong {
    color: var(--primary-blue, #1A365D);
    font-weight: 700;
}

/* --- Startkasten "So starten wir gemeinsam" --- */
.start-together-box {
    max-width: 900px;
    margin: 20px auto 90px auto;
    padding: 45px 40px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFDF9 55%, #FFF5EA 100%);
    border: 2px solid var(--gold-accent, #E0A96D);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(26, 54, 93, 0.06);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.start-together-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-blue, #1A365D) 0%, var(--gold-accent, #E0A96D) 100%);
}

.start-together-title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 900;
    color: var(--primary-blue, #1A365D);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.start-together-text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--dark-text, #2C302E);
    max-width: 720px;
    margin: 0 auto 30px auto;
}

@media (max-width: 768px) {
    .start-together-box { padding: 32px 22px; margin-bottom: 60px; }
    .card-hosting-note { font-size: 0.72rem; }
}