/* Combined CSS */

/* Farbpalette */
:root {
  --primary-color: #4c065a;
  /* Prussian Blue - Eleganz & Professionalität */
  --secondary-color: #FFFFFF;
  /* Reinweiß - Klarheit & Minimalismus */
  --accent-color: #B8860B;
  /* Dunkelgold - Luxus & Exklusivität */
  --neutral-papaya: #FFEFD3;
  /* Papaya Whip - Subtile Hintergründe */
  --neutral-gray: #FFFFFF;
  /* French Gray - Neuer Standard-Hintergrund */
}

/* Globale Schriftarten */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.btn {
  font-family: 'Montserrat', sans-serif;
  color: #001B2E;
}

p,
.text-body {
  font-family: 'Open Sans', sans-serif;
  color: #001B2E;
}

li p b, 
li p strong {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* This uses the weight from your link */
  display: inline-block; /* Helps with alignment in some browsers */
}

p b, 
p strong {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* This uses the weight from your link */
  display: inline-block; /* Helps with alignment in some browsers */
}

/* Überschriften */
h1,
h2,
h3 {
  font-weight: 700;
}

h4,
h5,
h6 {
  font-weight: 600;
}

/* Make the Brand/Logo bold and use Montserrat */
.navbar-brand {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
}

/* Make the Nav Links bold (using Open Sans Bold) */
.navbar-nav .nav-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
}

/* Primärer Button */
.btn-primary-custom {
  background-color: #6E633D;
  /* Overridden by hero.css */
  border-color: #6E633D;
  /* Added from hero.css */
  color: #f8f8f7;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary-custom:hover {
  background-color: #598198;
  /* Overridden by hero.css */
  border-color: #90A9B8;
  /* Added from hero.css */
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Sekundärer Button */
.btn-secondary-custom  {
  background-color: #f8f8f7;
  color: #95B890;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-secondary-custom:hover {
  background-color: #f8f8f7;
  color: #598198;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  padding-top: 30%;
  /* Adjust this percentage to match your desired aspect ratio */
  overflow: hidden;
  background-color: #343a40;
  /* Overridden by hero.css */
  border-radius: 0.5rem;
  /* Overridden by hero.css */
  color: var(--secondary-color);
  /* This was in newstyle.css, but now is less relevant due to hero-content-wrapper */
}

/* Hero Section from newstyle.css, if different from the above .hero-section */
.angebote {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border-radius: 20px;
}

.hero-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  /* Adjust this value (0.0 to 1.0) for desired opacity */
  transition: opacity 0.3s ease-in-out;
}

/* Updated content wrapper to correctly position text and button */
.hero-content-wrapper {
  position: absolute;
  top: 0;
  /* Align to the top of the hero-section */
  left: 0;
  width: 100%;
  height: 100%;
  /* Make it fill the hero-section */
  z-index: 2;
  padding: 1rem;
  /* Add some overall padding to keep content off the edges */
  box-sizing: border-box;
  /* Include padding in width/height calculation */
  /* Use flexbox to align content within this wrapper */
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  justify-content: center;
  /* Vertically center the stacked items */
  align-items: center;
  /* Horizontally center the items */
  text-align: center;
  /* Ensure text is centered */
}

/* Ensure your text and buttons are visible and styled correctly */
.hero-content-wrapper h1,
.hero-content-wrapper p {
  color: white;
  margin-bottom: 0.5rem;
  /* Add some space between text elements */
}

/* Specific styling for the H1 if needed to match screenshot */
.hero-content-wrapper h1 {
  /* If "LIKEWOLF" should appear higher, you might need a negative margin-top */
  /* margin-top: -3rem; */
  /* Example, adjust as needed */
}

/* Example of how to change opacity on hover (optional) */
.hero-image-container:hover .hero-background-image {
  opacity: 0.8;
}

.bg-bs {
    background-color: #4c065a !important;
}

/* Styling for the phone number "Badge" */
.phone-link {
    display: inline-flex;
    align-items: center;
    background-color: #f8f8f7; /* Matching your secondary button background */
    color: #357296 !important; /* Your brand blue */
    padding: 8px 16px;
    border-radius: 50px; /* Capsule shape */
    text-decoration: none !important;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid #357296;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Icon spacing */
.phone-link i {
    margin-right: 10px;
    font-size: 0.9rem;
}

/* Hover Effect: Swaps to your Gold brand color */
.phone-link:hover {
    background-color: #B59B67; /* Your gold color */
    color: #ffffff !important;
    border-color: #B59B67;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Custom WhatsApp Button Style */
.whatsapp-btn-custom {
    background-color: #25D366; /* Original WhatsApp Green for recognition */
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 50px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    cursor: pointer;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/* Icon Size */
.whatsapp-btn-custom i {
    font-size: 1.4rem;
}

/* Hover Effect: Changes to your Brand Blue or Gold */
.whatsapp-btn-custom:hover {
    background-color: #357296; /* Your brand blue */
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(53, 114, 150, 0.4);
    color: #ffffff !important;
}

/* Optional: Subtle Pulse Animation to draw attention */
@keyframes whatsapp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-btn-custom {
    animation: whatsapp-pulse 2s infinite;
}

/* Related Article Section */
.related-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f8f7; /* Matching your secondary neutral background */
    border-left: 5px solid #357296; /* Your brand blue */
    padding: 20px;
    margin: 30px 0;
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.related-teaser:hover {
    background-color: #ffffff;
    transform: translateX(5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    border-left-color: #B59B67; /* Shifts to your brand gold on hover */
}

/* 1. Remove underline from the entire teaser link area */
.related-teaser a {
    text-decoration: none !important;
    display: block;
}

/* 2. Increase font size for the "WEITERLESEN" label */
.related-label {
    font-size: 0.8rem; /* Adjust this value as needed */
    letter-spacing: 1px;
    font-weight: 700;
    text-decoration: none !important;
}

/* 3. Increase font size for the Teaser Title */
.related-title {
    font-size: 1.3rem !important; /* Increased from default */
    line-height: 1.3;
    margin-top: 5px;
    color: #001B2E; /* Matches your body heading color */
    transition: color 0.3s ease;
}

/* 4. Optional: Hover effect for better UX */
.related-teaser a:hover .related-title {
    color: #B59B67 !important; /* Changes to brand gold on hover */
}

.related-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    color: #B59B67; /* Gold label */
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
}

.related-title {
    margin: 0;
    font-size: 1.15rem;
}

.related-title a {
    color: #001B2E !important; /* Oxford Blue */
    text-decoration: none !important;
}

.related-icon {
    color: #357296;
    font-size: 1.2rem;
    padding-left: 15px;
}

.related-teaser:hover .related-icon {
    color: #B59B67;
}

.quote {
    border-left: 10px solid #53066d;
    padding-left: 8px;
    font-size: 1.25rem;
}

.form-container {
            background-color: #357296;
            color: #f4f6f8;
            margin: 10px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 5px;
        }
        .alert {
            display: none;
        }
        .error { /* Hinzugefügt, um Fehlermeldungen für reCAPTCHA anzuzeigen */
            color: red;
        }
.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #ecf0f1;
    background: #212327;
}
.cookiealert.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
}
.cookiealert a {
    text-decoration: underline;
}
.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Footer */
.footer-main {
  background-color: var(--primary-color);
}

/* Abstände */
.section-spacing {
  padding-top: 2rem;
  padding-bottom: 3rem;
  /* Vorher 4rem → jetzt 3rem */
}

/* Container mit French Gray Hintergrund */
.container-fluid.section-spacing {
  background-color: var(--neutral-gray);
}

/* Navbar in Oxford Blue */
.navbar-dark.bg-dark {
  background-color: var(--primary-color) !important;
}

.card {
  margin-bottom: 2rem;
}

/* Gradient Social Media Buttons */
.btn-gradient-custom {
  background-image: linear-gradient(90deg, #90A9B8, #84828F);
  color: #FFFFFF;
  border-radius: 5px;
  padding: 0.4rem 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  border: none;
}

.btn-gradient-custom:hover {
  background-image: linear-gradient(90deg, #90A9B8, #2F6175);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.highlight {
    /* Padding: pt-1 pb-1 ps-4 pe-4 */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    /* Margin: mb-3 */
    margin-bottom: 1rem;

    background-color: #B59B67;
    color: #ffffff !important;

    /* Border: border & border-warning */
    border: 1px solid #80693c;
    border-radius: 0.375rem; /* rounded */

    /* Shadow: shadow */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    /* Layout (standard for divs) */
    display: block;
    position: relative;
}

/* 1. Force the paragraph text to be white */
.highlight p {
    color: #ffffff !important;
}

/* 2. Style links inside the highlight box so they stand out */
.highlight a {
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 700;
}

/* 3. Add a hover effect for those links */
.highlight a:hover {
    color: #001B2E !important; /* Turns dark blue on hover for contrast */
    text-decoration: none;
}

@media (max-width: 576px) {
  .btn-gradient-custom {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .custom-card-text-list p {
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
    line-height: 1.8rem;
  }
}

@media (min-width: 992px) {
    /* Ensures all general images expand to the full width of their column */
    .img-fluid, 
    img.rounded {
        width: 100%;
        height: auto;
        object-fit: cover; /* Prevents stretching/distortion */
    }

    /* Specifically target the hero image to ensure it fills the container */
    .hero-background-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    /* Adjust section spacing for a more "full-screen" feel on desktop */
    .section-spacing {
        padding-top: 4rem;
        padding-bottom: 5rem;
    }
}

/* Reduce space between Navbar and Breadcrumbs */
.section-spacing {
    padding-top: 1.5rem !important; /* Reduces the 2rem padding you currently have */
}

/* Remove default margin-top from the breadcrumb nav */
nav[aria-label="breadcrumb"] {
    margin-top: 0;
}

/* Optional: Pull the content even higher on Desktop */
@media (min-width: 992px) {
    .section-spacing {
        padding-top: 0.8rem !important;
    }
}

/* Secondary Soft Pull-Quote */
.quote-soft {
    font-family: 'Open Sans', sans-serif;
    color: #001B2E;
    font-size: 1.2rem;
    color: #222425; /* Your brand blue */
    background-color: #f0f4f7; /* Very light blue tint */
    border-left: 4px solid #357296;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    line-height: 1.6;
    position: relative;
}

/* Optional: Adding a decorative quotation mark */
.quote-soft::before {
    content: "\201C"; /* Left Double Quote */
    font-family: serif;
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 4rem;
    color: rgba(53, 114, 150, 0.1); /* Faded blue */
}

/* Checklist Box Section */
.checklist-box {
    background-color: #f8f8f7; /* Matching your secondary neutral background */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.checklist-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #001B2E; /* Oxford Blue */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.checklist-header i {
    color: #357296; /* Brand Blue */
}

.checklist-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.checklist-item i {
    color: #357296; /* Checkmark color */
    margin-top: 4px;
    font-size: 0.9rem;
}

.checklist-item:last-child {
    margin-bottom: 0;
}

.trust-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.trust-item {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #357296; /* Your brand blue */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Comparison Container Wrapper */
.comparison-container {
    display: flex;
    gap: 0;
    margin: 40px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.comparison-box {
    flex: 1;
    padding: 30px;
}

/* "Before" Side - Subtle Gray/Muted */
.comparison-box.before {
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
}

/* "After" Side - Using your Brand Blue */
.comparison-box.after {
    background-color: #1c465e; 
    color: #ffffff !important;
}

.comparison-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.before .comparison-header { color: #666; }
.after .comparison-header { color: #B59B67; } /* Your Gold */

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Icons */
.before i { color: #d9534f; } /* Soft Red for Negative */
.after i { color: #B59B67; }  /* Gold for Positive */

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .comparison-container {
        flex-direction: column;
    }
    .comparison-box.before {
        border-right: none;
        border-bottom: 2px solid #ddd;
    }
}

/* The Glowing Animation */
@keyframes hero-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(181, 155, 103, 0.7); /* Your Gold color */
    }
    70% {
        box-shadow: 0 0 0 15px rgba(181, 155, 103, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(181, 155, 103, 0);
    }
}

/* Applying the effect to the Hero Button */
.btn-hero-glow {
    animation: hero-pulse 2s infinite;
    background-color: #B59B67 !important; /* Gold */
    border: none !important;
    color: #ffffff !important;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-hero-glow:hover {
    background-color: #357296 !important; /* Brand Blue on hover */
    transform: scale(1.05); /* Slightly grows on hover */
    animation: none; /* Stops pulsing when the user is hovering */
}

/* Centered Premium Footer */
.footer-custom {
    background-color: #5b0a6a; /* Your requested color */
    color: #ffffff;
    padding: 60px 0 30px;
    margin-top: 50px;
}

.footer-heading {
    color: #B59B67; /* Gold Header */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 1.1rem;
    display: block;
    text-align: center;
}

.footer-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    text-align: center;
}

/* Centering the Navigation Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #B59B67;
}

/* Centering Social Icons */
.social-icons {
    display: flex;
    justify-content: center; /* Forces centering in flexbox */
    gap: 15px;
    margin-top: 15px;
}

.social-icons a {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.footer-divider {
    border-top: 1px solid rgba(181, 155, 103, 0.3);
    margin: 30px auto;
    width: 80%; /* Shorter line for a cleaner look */
}

/* Mobile specific centering (ensuring no left-alignment remains) */
@media (max-width: 768px) {
    .footer-custom .col-md-4 {
        margin-bottom: 40px;
    }
}

/* Reduce space between Share Buttons and Footer */
.share-buttons-container { /* or whatever class your sharing row uses */
    margin-bottom: 0 !important;
    padding-bottom: 10px;
}

/* Adjust the footer's top margin to pull it up */
.footer-custom {
    margin-top: 20px !important; /* Reduced from 50px */
}

/* Remove extra spacing from the last section before the footer */
.section-spacing:last-of-type {
    padding-bottom: 0 !important;
}

/* The buttons in your screenshot (gray) - Let's make them match */
.share-btn { 
    background-color: transparent !important;
    border: 1px solid #22506b !important;
    color: #22506b !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background-color: #B59B67 !important;
    border-color: #B59B67 !important;
    color: #ffffff !important;
}

/* Tighten space inside the footer */
.footer-custom {
    padding-top: 40px !important; /* Reduced from 60px */
    padding-bottom: 20px !important;
}

/* Reduce the gap created by the horizontal divider */
.footer-divider {
    margin-top: 20px !important;    /* Pulls bottom half up */
    margin-bottom: 15px !important; /* Pushes copyright closer to the line */
    opacity: 0.2; /* Keeps it subtle */
}

/* Ensure the copyright text doesn't have its own top margin */
.footer-copy {
    margin-top: 0 !important;
    display: inline-block;
}

/* Key Takeaway / Fazit Box */
.takeaway-box {
    background-color: #f4f7f9; /* Very soft brand blue tint */
    border-left: 6px solid #B59B67; /* Your Brand Gold */
    padding: 25px;
    margin: 40px 0;
    border-radius: 0 8px 8px 0;
    position: relative;
    overflow: hidden;
}

.takeaway-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    color: #22506b; /* Your Footer Blue */
    margin-bottom: 10px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.takeaway-content {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Option B: If the text is inside a paragraph tag */
.takeaway-content p {
    font-size: 1.2rem;
    font-weight: 700;
}

/* Optional: Watermark icon in the background */
.takeaway-box::after {
    content: "\f0eb"; /* Font Awesome Lightbulb icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    bottom: -10px;
    font-size: 5rem;
    color: rgba(181, 155, 103, 0.05); /* Very faint gold */
    pointer-events: none;
}

/* Expert Bio Box */
.expert-bio-box {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px 25px 15px 25px; /* Reduced bottom padding from 25 to 15 */
    margin: 40px 0 10px 0;        /* 40px top, 0 left/right, 10px bottom */
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.expert-photo-container {
    flex-shrink: 0;
}

.expert-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #B59B67; /* Your Brand Gold */
}

.expert-info {
    flex-grow: 1;
}

.expert-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #22506b; /* Your Brand Blue */
    margin-bottom: 5px;
}

.expert-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #B59B67; /* Gold */
    margin-bottom: 12px;
    display: block;
}

.expert-description {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #555;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
    .expert-bio-box {
        flex-direction: column;
        text-align: center;
    }
    .expert-photo {
        width: 120px;
        height: 120px;
    }
}

/* Accordion Styling */
.faq-section {
    margin: 40px 0;
}

.accordion-item {
    border: 1px solid rgba(34, 80, 107, 0.1) !important;
    margin-bottom: 10px;
    border-radius: 8px !important;
    overflow: hidden;
}

.accordion-button {
    background-color: #ffffff !important;
    color: #22506b !important; /* Your Brand Blue */
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    padding: 20px;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(34, 80, 107, 0.03) !important;
    color: #B59B67 !important; /* Your Brand Gold when open */
}

/* Customizing the Chevron Icon */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2322506b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-body {
    padding: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    background-color: #ffffff;
}

/* Success Checklist Container */
.success-checklist {
    padding: 40px 25px;
    background-color: #f4f7f9; /* Soft Blue Tint */
    border-radius: 15px;
    margin: 40px 0;
}

.checklist-main-title {
    text-align: center;
    color: #22506b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 35px;
}

/* Success Checklist - Transparent Version */
.success-checklist {
    padding: 20px 0; /* Removed large padding and light blue background */
    background-color: transparent; 
    margin: 40px 0;
}

.checklist-main-title {
    text-align: center;
    color: #22506b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 35px;
}

/* Tighten the Footer Spacing */
.footer-custom {
    background-color: #5c0d74;
    color: #ffffff;
    padding: 30px 0 20px; /* Reduced top padding */
    margin-top: 15px !important; /* Narrower gap from section above */
}

/* Divider Spacing */
.footer-divider {
    margin: 15px auto !important; /* Narrowed gap between links and social bar */
    opacity: 0.1;
    border-top: 1px solid #ffffff;
}

/* Social Media Row Alignment */
.footer-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Mobile Centering Logic */
@media (max-width: 767px) {
    .footer-social-row {
        justify-content: center;
        margin-bottom: 10px;
    }
}

.footer-social-row a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.footer-social-row a:hover {
    color: #B59B67;
}

.social-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
}

.footer-copy {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.custom-check-list li {
    display: flex !important;
    align-items: flex-start;
    margin-bottom: 15px;
}

.check-icon {
    flex: 0 0 30px; /* Fixed space for the icon */
    font-size: 1.2rem;
}

.check-text {
    font-family: 'Open Sans', sans-serif;
    color: #001B2E;
    flex: 1; /* Text takes the rest of the space */
    line-height: 1.5;
    font-size: 1,5rem;
}

/* --- Footer Styling --- */
.footer-custom {
    background-color: #4c065a !important;
    color: #ffffff !important;
    margin-top: 50px;
}

.footer-gold-heading {
    color: #B59B67 !important;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
}

.footer-white-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Force social links to NOT be blue */
.social-links a {
    color: #ffffff !important; /* Changes blue to white */
    text-decoration: none;
    margin: 0 8px;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #B59B67 !important; /* Hovers to Gold */
    text-decoration: underline;
}

.social-label {
    font-weight: 700;
    color: #ffffff;
    margin-right: 10px;
}

.copyright-text {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.8rem;
    display: block;
    margin-top: 10px;
}

.footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 20px 0;
}

/* --- Mobile Checklist Fix (Final) --- */
.check-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 1.2rem;
}

.check-icon {
    flex: 0 0 35px !important; /* Keeps icon in its own column */
    font-size: 1.2rem;
}

.check-text {
    flex: 1 !important; /* Ensures text stays to the right */
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Footer Links & Copyright Fix --- */

/* Force social links to be white and remove the blue color */
.footer-social-links a {
    color: #ffffff !important; 
    text-decoration: none !important;
    margin: 0 10px;
    font-size: 0.9rem;
    display: inline-block;
    transition: color 0.3s ease;
}

/* Change link color to gold when hovering */
.footer-social-links a:hover {
    color: #B59B67 !important;
    text-decoration: underline !important;
}

/* Ensure the Social Media label is white */
.social-label {
    font-weight: 700;
    color: #ffffff !important;
    margin-right: 5px;
}

/* Style for the centered Copyright below the links */
.copyright-bar-centered {
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8rem;
    text-align: center;
}

.copyright-bar-centered a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: underline;
}

/* Styling for the hidden 'Large Screen Only' content */
.bonus-content {
    border-left: 3px solid #B59B67; /* Subtle gold line to highlight extra info */
    padding-left: 20px;
    margin-bottom: 20px;
    font-style: italic;
    color: #555;
}

/* Ensure the container stays balanced on large screens */
@media (min-width: 1400px) {
    .container-large-screen {
        max-width: 1320px; /* Gives slightly more room for the extra text */
    }
    
    .text-wrapper-large {
        padding-left: 30px; /* Adds breathing room between image and text */
    }
}

/* --- FAQ Section - Branded Gold Interaction --- */

/* 1. Standard Question (Closed / Arrow Side) */
.accordion-button.collapsed {
    color: #10334c !important;      /* Your Dark Blue */
    background-color: #ffffff !important;
}

/* 2. Active Question (Open / Arrow Down) */
.accordion-button:not(.collapsed) {
    color: #B59B67 !important;      /* Brand Gold when open */
    background-color: rgba(181, 155, 103, 0.05) !important; /* Very faint gold background */
    box-shadow: none !important;
}

/* 3. Arrow Color Logic */
/* This makes the arrow match the Blue when closed and Gold when open */
.accordion-button.collapsed::after {
    filter: brightness(0) saturate(100%) invert(8%) sepia(34%) saturate(2853%) hue-rotate(185deg) brightness(93%) contrast(106%);
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(67%) sepia(19%) saturate(834%) hue-rotate(5deg) brightness(92%) contrast(85%);
}

/* 4. Font Sizes & Bodies */
.accordion-button {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif;
}

.accordion-body {
    font-size: 1.2rem !important;
    line-height: 1.6;
    color: #333;
    font-family: 'Open Sans', sans-serif;
}

/* Ändert die Textfarbe der Nav-Items auf Weiß */
#navbarsExampleDefault .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* Optional: Farbe beim Drüberfahren (Hover) anpassen, 
   damit der Nutzer merkt, dass es klickbar ist */
#navbarsExampleDefault .navbar-nav .nav-link:hover {
    color: #cccccc !important; /* Ein helles Grau beim Hover */
}