/* Global Styles */

.emphasize-text {
    color: var(--emphasis-color);
    /* Use the variable */
    font-weight: 600;
    /* Make it slightly bolder (optional) */
    /* font-style: italic; */
    /* Keep if you also want italics (optional) */
    text-decoration: underline;
    /* Optional: Adjust underline style */
    /* text-decoration-thickness: 1px; */
    /* Example: make underline thinner */
    text-underline-offset: 3px;
    /* Example: add space between text and line */
    text-decoration-color: var(--gold);
    /* Example: use main gold for underline */
}

.gold-text {
    color: var(--gold);
    /* Use your defined gold color variable */
    /* Inherit other font styles like weight, size from parent */
}

/* Hero Quote Styling */
.hero-quote {
    color: var(--gold);
    font-size: 1.8rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    margin-bottom: 10px;
}

/* Custom styling for the Norman Vincent Peale quote */
.peale-quote {
    color: var(--gold);
    font-size: 1.8rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    padding-top: 40px;
    padding-bottom: 10px;
    text-align: center;
    margin-bottom: 10px;
}

    .kraft-hypnose-heading {
        font-size: 2rem;
        padding-top: 40px;
        padding-bottom: 40px;
    }

/* Custom styling for the "Veränderung beginnt im Kopf" quote */
.veranderung-quote {
    color: var(--gold);
    font-size: 1.8rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: center;
    margin-bottom: 10px;
}

.semibold {
    font-weight: 600;
}

/* Responsive Hero Quote Styling */
@media (min-width: 1200px) {
    .hero-quote {
        font-size: 1.8rem;
        padding-top: 10px;
        padding-bottom: 0px;
    }
}

@media (max-width: 768px) {
    .hero-quote {
        font-size: 1.4rem;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .peale-quote {
        font-size: 0.7rem;
        padding-top: 40px;
        padding-bottom: 2px;
    }
    
    .veranderung-quote {
        font-size: 0.7rem;
        padding-top: 2px;
        padding-bottom: 0px;
    }

    /* Custom styling for "Die Kraft der Hypnose" heading */
    .kraft-hypnose-heading {
        margin-bottom: 0px;
        font-size: 1.1rem;
        padding-top: 23px;
        padding-bottom: 0px;
        color: var(--gold);
        font-weight: 300;
    }    
    
}

@media (max-width: 576px) {
    .hero-quote {
        font-size: 0.8rem;
        padding-top: 05px;
        padding-bottom: 0px;
    }
    
    /* .peale-quote {
        font-size: 0.8rem;
        padding-top: 05px;
        padding-bottom: 0px;
    }
    
    .veranderung-quote {
        font-size: 0.8rem;
        padding-top: 05px;
        padding-bottom: 0px;
    } */
}



.subtitle {
    font-size: 70%;
    font-style: italic;
}

.tight-spacing+.italic-subtitle {
    margin-top: -30px;
}

.content-wrapper {
    background-color: rgba(32, 29, 26, 0.6);
    padding: 30px;
    border-radius: 10px;
    max-width: 800px;
    margin: 60px auto;
    overflow-wrap: break-word;
    word-wrap: break-word; /* fallback for older browsers */
}
/* === ADD THESE RULES for the Mini Spa Box === */

.mini-spa-box {
    border: 1px solid var(--gold);
    /* Your nice gold border */
    padding: 15px;
    /* Inner spacing */
    margin-top: 15px;
    /* Space above this box */
    text-align: center;
    /* Center the text inside */
    background-color: rgba(0, 0, 0, 0.2);
    /* Optional: Slight dark background tint */
    border-radius: 5px;
    /* Optional: Slightly rounded corners */
}

.content-wrapper a {
    word-break: break-all;
}

.mini-spa-box p {
    margin-bottom: 5px;
    /* Reduce bottom margin for paragraphs inside */
    line-height: 1.4;
    /* Adjust line spacing */
    /* color: var(--text-light); Ensure text is light */
}

.mini-spa-box p:last-child {
    margin-bottom: 0;
    /* Remove margin from the last paragraph */
}

.mini-spa-title {
    font-weight: 600;
    /* Make the title slightly bolder */
    color: var(--gold);
    /* Use gold color for the title */
    font-size: 1.1em;
    /* Slightly larger font size for title */
    font-style: italic;
    /* <<< ADD THIS LINE */

}

.mini-spa-details {
    font-size: 1em;
    /* Standard font size for details */
    opacity: 0.9;
    /* Slightly less prominent */
}

.summary-box {
    border: 1px solid rgba(201, 169, 92, 0.4);
    padding: 25px;
    margin: 30px 0;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.2);
}
.summary-box strong {
    color: var(--light-gold);
    font-size: 1.2em;
    margin-bottom: 15px;
    display: block;
    font-weight: 600;
    border-bottom: 1px solid rgba(201, 169, 92, 0.2);
    padding-bottom: 10px;
}
/* === END ADDED RULES === */

.footer-design-credit {
    margin-top: 0px;
    margin-bottom:0px;
    /* Add some space above the credit line */
    font-size: 0.7em;
    /* Make it slightly smaller */
    opacity: 0.6;
    /* Make it slightly less prominent */
    color: var(--gold);
    /* Inherit the footer text color */
    padding-top: 0px;
    padding-bottom: 3px;
}

.video-sound-button {
    position: absolute;
    bottom: 9px;
    left: 9px;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    outline: none;
    opacity: 0.6;
}

/* Styles for form input fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea {
    width: 100%;
    padding: 12px; /* Increased padding for height */
    margin-bottom: 15px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #333;
    color: var(--text-light);
    font-size: 1rem; /* Ensure readable font size */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Focus style for input fields */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 5px rgba(201, 169, 92, 0.5);
}

/* Style for labels */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--light-gold);
}

/* Style for radio/checkbox labels within input containers */
.input-container label {
    display: inline;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

/* Style for instructions */
.instruction {
    font-size: 0.85rem;
    color: #aaa;
    margin-top: -10px;
    margin-bottom: 15px;
}

/* Additional spacing for submit button container */
.submit-button-container {
    margin-top: 30px;
    margin-bottom: 40px;
}

.video-sound-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.video-sound-button:active {
    transform: scale(0.95);
}

/* Base styles for containers holding rotating media */
.rotating-image-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    /* Removed vertical margin for uniform section spacing */
    overflow: hidden;
    position: relative;
    border: 1px solid var(--gold);
    background-color: #111;
    transform: translateZ(0);
    /* Keep rendering hints */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Watermark Overlay for Media Containers */
.rotating-image-container::after {
    /* Use ::after to overlay on top */
    content: '';
    /* Required for pseudo-elements */
    display: block;
    /* Treat it like a block element */
    position: absolute;
    /* Position relative to .rotating-image-container */

    /* Positioning in Bottom-Right Corner */
    right: 0px;
    /* Adjust horizontal distance from right edge */
    bottom: 0px;
    /* Adjust vertical distance from bottom edge */

    /* Size of the Square Overlay */
    width: 175px;
    /* Adjust desired width */
    height: 175px;
    /* Adjust desired height (make equal to width for square) */

    /* Background Watermark Image */
    background-image: url('assets/watermark/watermark.png');
    /* <<< EDIT THIS PATH LATER */
    background-size: contain;
    /* Fit the watermark inside the square */
    background-repeat: no-repeat;
    background-position: center;

    /* Transparency */
    opacity: 0.4;
    /* Adjust opacity (0=invisible, 1=fully opaque) */

    /* Ensure it's visually above the main content */
    z-index: 5;

    /* Optional: Prevent the watermark from interfering with mouse events */
    pointer-events: none;
}

.about-image::after {
    /* Target the static image container */
    content: '';
    display: block;
    position: absolute;

    /* Positioning */
    right: 0px;
    /* Base position */
    bottom: 0px;
    /* Base position */

    /* Size */
    width: 175px;
    /* Base size */
    height: 175px;
    /* Base size */

    /* Background */
    background-image: url('assets/watermark/watermark.png');
    /* Use the same path */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* Transparency */
    opacity: 0.4;
    /* Use same opacity */

    /* Stacking & Interaction */
    z-index: 5;
    pointer-events: none;
}

.service-image::after {
    /* Existing watermark on the bottom right */
    content: '';
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 20px;
    height: 20px;
    background-image: url('assets/watermark/watermark.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    z-index: 5;
    pointer-events: none;
    
}

.service-image::before {
    /* New decoration on the bottom left */
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 20px; /* Matching size */
    height: 20px; /* Matching size */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8; /* Slightly more visible */
    z-index: 5;
    pointer-events: none;
}


/* Specific rule for the container INSIDE the video section (#rotating-gallery) */
#rotating-gallery .rotating-image-container {
    aspect-ratio: 16 / 9;
    /* Enforces the 16:9 box shape for video */
    background-color: #000;
    /* Background for video letterboxing */
    /* Inherits other styles from base .rotating-image-container */
}

/* === Styles for NEW Image Gallery === */
#new-rotating-gallery-image {
    display: block;
    width: 100%;
    height: auto;
    /* --- Ensure this is 1 or removed --- */
    opacity: 1;
    /* Base state should be visible */
    /* --- End Ensure --- */
    transform: scale(1);
    transition: opacity 2s ease-in-out;
    /* Your fade duration */
}

#new-rotating-gallery-image.fade-out-new-image {
    opacity: 0;
    /* Fade-out state */
}

@keyframes newImageZoomEffect {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }

    /* 10% Zoom */
}

#new-rotating-gallery-image.apply-new-image-zoom {
    animation-name: newImageZoomEffect;
    animation-duration: 7s;
    /* Zoom duration */
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* === End Styles for NEW Image Gallery === */


/* === Styles for Video Element === */
.rotating-media {
    /* Targeting the class applied to your video */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Fill the container width */
    /* height: 100%; */
    /* Fill the container height */
    object-fit: contain;
    /* Fit video without cropping */
    background-color: #000;
    /* Background for letterboxing */
}

/* === End Styles for Video Element === */


:root {
    --dark-bg: #1a1a1a;
    --gold: #c9a95c;
    --light-gold: #d4b978;
    --text-light: #f5f5f5;
    --text-dark: #333;
    --section-padding: 30px 20px;

    /* === ADD THIS VARIABLE === */
    /* Choose ONE color value below, comment out others */
    --emphasis-color: var(--light-gold);
    /* Option 1: Use existing light gold */
    /* --emphasis-color: #ffffff; */
    /* Option 2: Pure White */
    /* --emphasis-color: #EAC14D; */
    /* Option 3: Brighter Gold Example */
}

* {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-weight: 300;
    margin-bottom: 20px;
    color: var(--gold);
}

h1 {
    font-size: 2.5rem;
    /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); x-offset, y-offset, blur, color(with alpha) */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), 2px 3px 6px rgba(0, 0, 0, 0.4);
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(50, 40, 10, 0.3); */
    /* Dark goldish aura */
    /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); */
    /* text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.45); */

}

h2 {
    font-size: 2rem;
}

p {
    margin-bottom: 30px;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: grey
}

.container {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* List alignment within containers */
.container ol,
.container ul {
    padding-left: 20px;
    margin-left: 0;
}

/* --- Button Styles --- */
.btn {
    display: inline-block;
    background: linear-gradient(145deg, var(--light-gold), var(--gold));
    color: var(--text-dark);
    padding: 8px 14px; /* Increased vertical padding for higher buttons */
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
        /* Base bottom shadow */
        0 1px 2px rgba(0, 0, 0, 0.1) inset,
        /* Base inner top highlight */
        0 -1px 1px rgba(255, 255, 255, 0.05) inset;
    /* Base inner bottom shadow */
    /* Ensure ALL transitioned properties are listed or use 'all' */
    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    /* Explicitly remove default outline for mouse users */
}

/* Hover State */
.btn:hover {
    background: linear-gradient(145deg, hsl(44, 58%, 65%), hsl(44, 58%, 55%));
    color: #000;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25),
        /* Hover bottom shadow */
        0 2px 4px rgba(0, 0, 0, 0.15) inset,
        /* Hover inner top highlight */
        0 1px 2px rgba(0, 0, 0, 0.1);
    /* Hover stronger bottom outer shadow (new) */
    transform: translateY(-2px) scale(1.02);
}

/* Active/Pressed State */
.btn:active {
    background: linear-gradient(145deg, hsl(44, 58%, 50%), hsl(44, 58%, 60%));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset,
        /* <<<< THIS IS THE INSET SHADOW FOR PRESSED EFFECT */
        0 1px 2px rgba(0, 0, 0, 0.1);
    /* <<<< Reduced outer shadow when pressed */
    transform: translateY(1px) scale(0.98);
    /* The transition back to normal state will use the .btn's main transition duration (0.25s)
       unless overridden, which is generally fine.
       The quick 0.1s transition-duration on :active was for the press *action*, not release.
       Let's remove the explicit transition-duration from :active to rely on the base transition.
    */
    /* transition-duration: 0.1s; */
    /* REMOVE THIS OR ENSURE IT'S ONLY FOR THE PRESS */
}

/* Focus State - Important for Accessibility */
/* Using :focus-visible to only show for keyboard users, not on mouse click */
.btn:focus-visible {
    /* This outline should appear for keyboard navigation and disappear when focus moves away */
    outline: 2px solid var(--light-gold);
    outline-offset: 3px;
    /* Increased offset slightly for more separation */
    /* Optional: You can add a box-shadow here too, but ensure it doesn't look like the :active state */
    /* box-shadow: 0 0 0 3px rgba(201, 169, 92, 0.4), /* Focus glow */
    /* 0 4px 8px rgba(0, 0, 0, 0.2),       /* Re-apply base outer shadow */
    /* 0 1px 2px rgba(0,0,0,0.1) inset;   /* Re-apply base inner top highlight */
}

/* Fallback for older browsers that don't support :focus-visible */
/* This might cause the "ring" on mouse click in those browsers, but :focus-visible handles modern ones. */
/* .btn:focus:not(:focus-visible) { */
/* If you want to specifically remove the outline for mouse clicks in browsers that
       don't support :focus-visible but still apply :focus on click, you could try: */
/* outline: none; */
/* This is tricky because it impacts keyboard accessibility if :focus-visible isn't supported */
/* Generally, it's better to let :focus apply if :focus-visible is not supported */
/* } */

.text-center {
    text-align: center;
}

.section {
    /* padding: var(--section-padding); */
    /* Controlled by variable */
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0px;
        padding-bottom: 10px;
}

.main-content-padding {
    padding-top: 120px; /* Adjust this value as needed for desired spacing */
}

/* Reduced padding for specific pages */
.studio-main-content-padding,
.preise-main-content-padding,
.ueber-mich-main-content-padding {
    padding-top: 50px; /* Reduced padding for these specific pages */
}

/* Price information container styling */
.price-info-container {
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 0.8rem;
    opacity: 0.7;
    line-height: 1.4;
    color: var(--text-light);
    margin-bottom: 0px;
}

/* Simple left-aligned bullet list */
.hanging-indent-list {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-bottom: 30px;
    font-size: 16px; /* Match normal paragraph font size */
}

.hanging-indent-list li {
    margin-bottom: 10px;
    line-height: 1.6;
    text-align: left;
}

/* Responsive styles for hanging indent list */
@media (max-width: 768px) {
    .hanging-indent-list {
        font-size: 16px; /* Maintain 16px font size on tablets */
        padding-left: 1.2em; /* Reduce left padding on tablets */
        margin-bottom: 25px; /* Reduce bottom margin on tablets */
    }
    
    .hanging-indent-list li {
        margin-bottom: 8px; /* Reduce spacing between list items on tablets */
        line-height: 1.5; /* Adjust line spacing for tablets */
    }
}

@media (max-width: 576px) {
    .hanging-indent-list {
        font-size: 16px; /* Maintain 16px font size on mobile */
        padding-left: 1em; /* Further reduce left padding on mobile */
        margin-bottom: 20px; /* Further reduce bottom margin on mobile */
    }
    
    .hanging-indent-list li {
        margin-bottom: 6px; /* Further reduce spacing between list items on mobile */
        line-height: 1.4; /* Adjust line spacing for mobile */
        font-size: 16px; /* Explicitly set font size for mobile */
    }
}

/* Preise page checkmark bullet points - unique from index.html pricing boxes */
.preise-checkmark-list {
    list-style: none;
    margin-bottom: 30px;
    font-size: 16px; /* Match normal paragraph font size */
}

.preise-checkmark-list li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(201, 169, 92, 0.2);
    position: relative;
    padding-left: 30px; /* Space for checkmark */
    line-height: 1.6;
    text-align: left;
}

.preise-checkmark-list li:last-child {
    border-bottom: none;
}

.preise-checkmark-list li:before {
    content: '✓';
    color: var(--gold);
    margin-right: 10px;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Responsive styles for preise checkmark list */
@media (max-width: 768px) {
    .preise-checkmark-list {
        font-size: 16px; /* Maintain 16px font size on tablets */
        margin-bottom: 25px;
    }
    
    .preise-checkmark-list li {
        padding: 8px 0;
        padding-left: 25px; /* Reduce left padding on tablets */
        line-height: 1.5;
    }
    
    .preise-checkmark-list li:before {
        margin-right: 8px;
    }
}

@media (max-width: 576px) {
    .preise-checkmark-list {
        font-size: 16px; /* Maintain 16px font size on mobile */
        margin-bottom: 20px;
    }
    
    .preise-checkmark-list li {
        padding: 6px 0;
        padding-left: 22px; /* Further reduce left padding on mobile */
        line-height: 1.4;
        font-size: 16px; /* Explicitly set font size for mobile */
    }
    
    .preise-checkmark-list li:before {
        margin-right: 5px;
        font-size: 14px; /* Slightly smaller checkmark on mobile */
    }
}

.new-section {
    background-color: var(--dark-bg); /* Solid background for desktop */
}

/* Preise page specific table styles - unique from index.html pricing boxes */
.preise-table {
    border: 1px solid var(--gold);
    border-radius: 8px;
    overflow: hidden; /* Ensures the border-radius is applied to the corners */
    margin: 30px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.preise-row {
    display: flex;
    border-bottom: 1px solid rgba(201, 169, 92, 0.2);
    transition: background-color 0.3s ease;
}

.preise-row:last-child {
    border-bottom: none;
}

.preise-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.preise-row .preise-service,
.preise-row .preise-price {
    padding: 15px 20px;
}

.preise-row .preise-service {
    flex: 3; /* Service column takes up more space */
    text-align: left;
}

.preise-row .preise-price {
    flex: 2; /* Price column takes up less space */
    text-align: right;
    color: var(--light-gold);
    font-weight: 600;
}

.preise-row.header {
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--gold);
    font-weight: bold;
    text-transform: uppercase;
}

/* Responsive styles for the preise table */
@media (max-width: 768px) {
    .preise-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .preise-row .preise-service,
    .preise-row .preise-price {
        text-align: left;
        width: 100%;
        padding: 8px 15px;
    }

    .preise-row .preise-price {
        font-size: 1.1em; /* Make price slightly larger on mobile */
        padding-top: 0;
    }

    .preise-row.header {
        display: none; /* Hide the header row on mobile as it's less useful */
    }
}

@media (max-width: 576px) {
    .preise-row .preise-service,
    .preise-row .preise-price {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
    
    .preise-row .preise-price {
        font-size: 1.0rem; /* Slightly larger for prices on mobile */
    }
}


/* Header Styles */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(26, 26, 26, 1);
    padding: 5px 0;
    transition: all 0.3s ease;
}

.button-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

header.scrolled {
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Styles for the center logo link and image */
#center-logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
    position: relative;
    /* Needed for potential pseudo-elements if you add more complex glows */
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Add filter for glow, transform for scale */
    outline: none;
    /* Removes default focus outline if not desired, or style it better */
}

#center-logo-link img {
    display: block;
    border: none;
    height: 50px;
    /* Your existing height for the logo */
    width: auto;
    max-width: 100%;
    opacity: 0.6;
    /* Your existing opacity */
    transition: opacity 0.3s ease;
    /* Keep this transition if you want opacity change too */
}

/* --- HOVER EFFECT FOR CENTER LOGO --- */
#center-logo-link:hover {
    transform: scale(1.05);
    /* Slight zoom for the link container */
}

#center-logo-link:hover img {
    opacity: 1;
    /* Make image fully opaque on hover */
    /* Glow effect using filter: drop-shadow() for images */
    /* Adjust color (var(--gold)), x-offset, y-offset, blur-radius */
    filter: drop-shadow(0 0 4px var(--gold));
    /* Example with a slightly more diffused glow: */
    /* filter: drop-shadow(0 0 3px rgba(201, 169, 92, 0.7)) drop-shadow(0 0 8px rgba(201, 169, 92, 0.5)); */
}

/* --- Styles for .logo-center (parent) --- */
.logo-center {
    flex-grow: 0;
    flex-shrink: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* opacity: 0.6; --- This was on .logo-center, but should primarily be on the image itself for hover effects */
    /* Or, if you want the whole area to have a base opacity, you can keep it */
    /* but the image's opacity: 1 on hover will override its parent's opacity for itself */
}

#center-header-logo {
    display: block;
    /* Remove extra space below image */
    height: 104px;
    /* <<< Adjust desired height */
    width: auto;
    /* Width adjusts automatically */
    max-width: 100%;
    /* Prevent overflow */
    opacity: 0.8;
}

/* --- End ADD Center Logo Styles --- */

/* --- Logo Styles --- */
/* .logo {
    flex-grow: 1;
    display: flex;
    justify-content: center;
} */

/* .logo img {
    height: 50px;
    /* width: auto; */
    /* display: block; */
    /* vertical-align: middle; */
    /* opacity: 0.6; */
/* }  */

.logo img.rotating {
    animation: rotation 10s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.logo img.fade-out {
    opacity: 0;
}


.nav-menu {
    position: fixed;
    top: 85px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 500px); /* Adjust height to fill remaining viewport below header */
    background-color: rgba(26, 26, 26, 0.98);
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* padding-top: 50px; */
    transition: left 0.3s ease;
    overflow-y: auto;
    opacity: 0.95;
}

.nav-menu.active {
    left: 0;
}

.nav-menu li {
    margin: 0;
    /* Remove default li margin */
    width: 80%;
    /* Optional: Give list items a max-width for a cleaner look, they will be centered by align-items on .nav-menu */
    /* If you remove this, 'a' tags will stretch full width if display:block */
}

.nav-menu a {
    display: block;
    /* Makes the whole area clickable and helps with centering */
    padding: 18px 20px;
    /* Increased padding for better touch targets and visual spacing */
    color: var(--text-light);
    /* Ensure this is active */
    font-weight: 500;
    /* Slightly bolder for menu items */
    font-size: 1.1rem;
    /* Slightly larger font for menu items */
    text-decoration: none;
    text-align: center;
    /* <<< THIS CENTERS THE TEXT WITHIN THE LINK */
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    /* Add all transitionable properties */
}

/* Underline Animation (Existing - modified for better centering) */
.nav-menu a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--gold);
    bottom: 8px;
    /* Adjusted: Puts underline a bit below the text, within padding */
    left: 50%;
    transform: translateX(-50%);
    /* Keeps underline centered as it grows from the middle */
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Smoother transition */
}

/* --- HOVER EFFECTS --- */
.nav-menu a:hover {
    color: var(--gold);
    /* Change text color to gold */
    background-color: rgba(40, 40, 40, 0.7);
    /* Subtle dark background tint on hover */
    transform: scale(1.05);
    /* Slight zoom effect */
}

.nav-menu a:hover:after {
    width: 70%;
    /* Underline grows to 70% of the link's width */
}

/* Menu Toggle */
.menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 2.5rem;
    color: var(--gold);
    opacity: 0.8;
    /* Initial opacity */
    transition: opacity 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    /* Add properties to transition */
    padding: 10px;
    /* Add some padding to make the hover area a bit larger and for visual balance */
    line-height: 1;
    /* Helps prevent padding from adding too much vertical space if font-size is large */
    /* Ensure it's positioned correctly within the header if needed */
    /* For example, if it's a direct child of a flex container and needs specific alignment */
    /* align-self: center; */
}

.menu-toggle:hover {
    opacity: 1;
    /* Make it fully opaque on hover */
    transform: scale(1.1);
    /* Slightly enlarge the icon */
    /* Optional: Add a subtle glow */
    text-shadow: 0 0 6px var(--gold);
    /* Adjust color and blur radius as needed */
}

/* Hero Section */
.hero {
    min-height: auto; /* Allow content to define height */
    position: relative;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top */
    overflow: hidden;
    padding-top: 300px; /* Adjust to create space below header */
    padding-bottom: 80px; /* Add some padding at the bottom of the hero section */
    background-image: url('images/background-gesundehypnose.jpg');
    background-position: center 0%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


.hero-content {
    z-index: 1;
    max-width: 800px;
    padding: 0 20px;
    text-align: center;
    margin-top: 0; /* Remove any default top margin */
    margin-bottom: 0; /* Remove any default bottom margin */
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 30px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 40px;
}
/* About Section (Text Content Area) */
.about {
    background-color: #222;
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.about-text {
    flex: 1;
    min-width: 300px;
    padding-right: 40px; /* Default padding for larger screens */
    padding-left: 40px;  /* Default padding for larger screens */
}

/* Container potentially holding static image or OTHER content */
/* Kept this rule as it defines layout structure */
.about-image {
    overflow: hidden;
    flex: 1;
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid var(--gold);
    /* Keep border */
    position: relative;
    /* <<< ADD THIS LINE */
}

/* General rule for images inside .about-image */
/* Kept this rule as it's standard practice */
.about-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Services Section --- */
.services {
    background-color: var(--dark-bg);
}

.service-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    /* Removed vertical margin for uniform section spacing */
}

.service-image {
    flex: 0 0 calc(25% - 20px);
    margin-bottom: 30px;
    /* Keep bottom margin for spacing between rows */
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gold);
}

.service-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

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

/* --- Pricing Section --- */
.pricing {
    background-color: #222;
}

.pricing-container {
    display: flex;
    flex-wrap: wrap;
    /* REMOVE justify-content: space-between; */
    /* --- ADD gap property --- */
    gap: 30px;
    /* Adjust base gap (e.g., 30px) between boxes */
    /* --- End Add --- */
    margin-top: 0;
    /* Removed top margin for uniform section spacing */
    padding-top: 30px;
    padding-bottom: 30px;
}

.pricing-box {
    /* CHANGE flex-basis calculation - we just need width now */
    /* Remove the fixed pixel subtraction */
    flex-basis: 0;
    flex-grow: 1;
    /* 4 columns, 3 gaps */
    /* Adjust calculation based on desired # columns and gap */
    /* Alternatively, for simplicity with gap, often use: */
    /* flex-grow: 1; */
    /* flex-basis: 200px; /* Example minimum width */
    /* We will override this in media queries anyway */
    background-color: var(--dark-bg);
    border: 1px solid var(--gold);
    padding: 48px 10px;
    margin-bottom: 0;
    /* Gap handles vertical spacing too */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Keep for watermark */
}

/* Example */
.pricing-price {
    font-size: 1.2rem;
    color: var(--gold);
    text-align: center;
    margin: 0px 0px 8px;
}

.pricing-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.pricing-title {
    font-size: 1.8rem;
    margin-bottom: 26px;
    text-align: center;
    margin-top: 6px;
}

.pricing-features {
    list-style: none;
    margin-bottom: 30px;
    flex-grow: 1;
}

.pricing-features li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(201, 169, 92, 0.2);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li:before {
    content: '✓';
    color: var(--gold);
    margin-right: 10px;
}

.pricing-duration {
    margin-bottom: 20px;
    text-align: center;
    opacity: 0.8;
}

.pricing-btn {
    text-align: center;
    margin-top: auto;
}

.pricing-note {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9rem;
    color: var(--text-light);
    opacity: 0.8;
    font-style: italic;
}

/* Make the specific pricing box a positioning context */
.pricing-box.recommended-plan {
    position: relative;
    /* Your existing .pricing-box styles like padding: 40px 30px; are important here */
}

.recommendation-badge {
    position: absolute;
    /* Lifts the image out of normal flow, overlays it */
    top: -9px;
    /* This places it within the box's top padding area. */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Fine-tune horizontal centering */
    height: auto;
    /* Maintain aspect ratio based on width */
    width: 60%;
    /* Set width relative to the parent pricing box */
    max-width: 160px;
    /* Max pixel width to prevent it from getting too large on wide boxes */
    /* Adjust this based on your image's ideal size */
    max-height: 87px;
    /* Max pixel height to ensure it fits in the top "red box" area.
                           Your .pricing-box has top padding of 40px.
                           top: 10px + max-height: 35px means it uses up to 45px, slightly more if image is wide.
                           Adjust this and 'top' to fit perfectly. If top padding is 40px,
                           and you want 5px space above and below image, set top: 5px and max-height: 30px */


    object-fit: contain;
    /* Ensures the image scales down nicely within its bounds without cropping */
    z-index: 5;
    /* Ensures it's above the box background but can be below other interactive elements if needed */
}

.star-badge {
    position: absolute;
    /* Lifts the image out of normal flow, overlays it */
    top: 28px;
    /* This places it within the box's top padding area. */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Fine-tune horizontal centering */
    height: auto;
    /* Maintain aspect ratio based on width */
    width: 60%;
    /* Set width relative to the parent pricing box */
    max-width: 110px;
    /* Max pixel width to prevent it from getting too large on wide boxes */
    /* Adjust this based on your image's ideal size */
    max-height: 13px;
    /* Max pixel height to ensure it fits in the top "red box" area.
                           Your .pricing-box has top padding of 40px.
                           top: 10px + max-height: 35px means it uses up to 45px, slightly more if image is wide.
                           Adjust this and 'top' to fit perfectly. If top padding is 40px,
                           and you want 5px space above and below image, set top: 5px and max-height: 30px */


    object-fit: contain;
    /* Ensures the image scales down nicely within its bounds without cropping */
    z-index: 5;
    /* Ensures it's above the box background but can be below other interactive elements if needed */
}

/* --- Benefits Section --- */
.narrow-section {
    background-color: #222;
}

.narrow-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.narrow-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.narrow-content h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--gold);
    border-left: 5px solid var(--gold);
    padding-left: 15px;
}

.narrow-content p {
    margin-bottom: 25px;
}

/* --- FAQ Section --- */
.faq {
    background-color: var(--dark-bg);
}

.accordion {
    margin-top: 0;
    /* Removed top margin for uniform section spacing */
}

.accordion-item {
    margin-bottom: 10px;
    border: 1px solid rgba(201, 169, 92, 0.3);
}

.accordion-header {
    padding: 20px;
    background-color: #222;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-light);
    font-weight: 400;
}

.accordion-icon {
    color: var(--gold);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.accordion-content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background-color: #2a2a2a;
}

.accordion-content p {
    padding: 20px 0;
    margin-bottom: 0;
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

.accordion-item.active .accordion-content {
    max-height: fit-content;
}
.accordion-content p {
    font-size: 0.9rem; /* Reduce font size for mobile */
}

/* Responsive styles for FAQ questions on small screens */
@media (max-width: 768px) {
    .accordion-header h3 {
        font-size: 1rem; /* Reduce question size on mobile */
    }
    
    .accordion-header {
        padding: 15px; /* Reduce padding on mobile */
    }
}

@media (max-width: 576px) {
    .accordion-header h3 {
        font-size: 0.9rem; /* Further reduce question size on very small screens */
    }
    
    .accordion-header {
        padding: 12px; /* Further reduce padding on very small screens */
    }
    
    /* Reduce FAQ section header size on very small screens */
    .faq h2 {
        font-size: 1.2rem; /* Reduce from the default h2 size */
    }
}

/* Reduce FAQ section header size on medium screens */
@media (max-width: 768px) {
    .faq h2 {
        font-size: 1.2rem; /* Slightly reduce header size on tablets */
    }
}

/* Contact Section */
.contact {
    background-color: var(--dark-bg);
}

.divider-custom {
    width: 100%;
    height: 1px;
    background-color: rgba(201, 169, 92, 0.3);
    margin: 40px 0;
}

.divider-thin {
    /* width: 30%; */    /* Remove or comment out the percentage width */
    width: 113px;      /* Set to approximately 3cm (113px = 3cm) */
    /* For "a few cm", you might try values between 80px and 150px. */
    height: 1px;
    background-color: rgba(201, 169, 92, 0.3);
    margin-top: 20px;    /* Your desired space above the divider */
    margin-bottom: 20px; /* Your desired space below the divider */
    margin-left: auto;   /* <<< ADDED: This, along with margin-right: auto, centers it */
    margin-right: auto;  /* <<< ADDED: This, along with margin-left: auto, centers it */
}

.contact-container {
    display: flex;
    margin-top: 0;
    /* Removed top margin for uniform section spacing */
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.contact-info {
    flex: 0 0 auto;
    /*max-width: 500px;*/
    text-align: center;
}

.contact-info p {
    margin-bottom: 15px;
    font-size: 0.95rem;
    opacity: 0.8;
}

.contact p.text-center {
    font-size: 0.95rem;
    opacity: 0.8;
}

.contact-info i {
    color: var(--gold);
    margin-right: 10px;
    font-size: 1.2rem;
}

.contact-info h3 {
    margin-top: 0px;
}

/* Footer */
footer {
    background-color: #111;
    padding-top: 15px;
    padding-bottom: 25px;
    text-align: center;
}

.footer-links-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 15px; /* Spacing between links horizontally */
    margin-bottom: 10px;
}

.footer-links {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    flex-wrap: wrap;
}

.footer-links li {
    margin: 5px 15px;
}

.footer-social {
    margin-bottom: 5px;
}

.footer-social a {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.5rem;
    color: var(--gold);
}

.footer-social a:hover {
    color: var(--light-gold);
}

.footer-text {
    margin-top: 0px;
    margin-bottom: 0px;
    opacity: 0.7;
    font-size: 0.6rem;
    padding-top: 0px;
    padding-bottom: 20px;
}
.footer-consent-management {
    margin-top: 5px;
}

.footer-consent-management a {
    font-size: 0.8rem;
    color: var(--gold);
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.3s ease;
    padding: 5px 0; /* Add 5px top and bottom padding */
}

.footer-consent-management a:hover {
    opacity: 1;
}

/* Responsive Styles */
@media (max-width: 992px) {

    .about-content {
        /* Ensure you have a rule targeting this */
        display: flex;
        /* Should already be there */
        flex-wrap: wrap;
        /* Should already be there */
        justify-content: center;
        /* <<< ADD THIS LINE */
        /* align-items: center; */
        /* You might already have this */
    }

    .service-image {
        flex: 0 0 calc(50% - 15px);
        /* Changes to 2 columns */
    }

    .service-image::after {
        /* Target ONLY service images */
        content: '';
        display: block;
        position: absolute;
        /* Positioning (Adjust as desired for these smaller boxes) */
        right: 0px;
        bottom: 0px;
        /* Size (Start with a smaller size, adjust as needed) */
        width: 20px;
        height: 20px;
    }

    .pricing-container {
        gap: 20px;
        /* Adjust gap for this breakpoint */
    }

    .pricing-box {
        /* 2 columns: 50% width minus half the gap */
        flex-basis: calc(50% - (1 * 20px / 2));
        /* flex-basis: calc(50% - 10px); // Simpler if gap is 20px */
    }

    .about-text,
    .about-image {
        flex: 0 0 100%;
        margin-top: 30px;
        padding-right: 0; /* Remove padding on smaller screens */
        padding-left: 0;  /* Remove padding on smaller screens */
        text-align: center; /* Center text and inline elements like buttons */
    }

    @media (max-width: 991px) {

        /* Or 768px */
        .nav-menu {
            top: 71px;
            height: calc(100vh - 200px); /* Adjust height for mobile header */
            opacity: 1;
        }
    }

    /* Watermark Overlay for Media Containers */
    .rotating-image-container::after {
        /* Use ::after to overlay on top */
        /* Positioning in Bottom-Right Corner */
        right: 0px;
        /* Adjust horizontal distance from right edge */
        bottom: 0px;
        /* Adjust vertical distance from bottom edge */
        /* Size of the Square Overlay */
        width: 100px;
        /* Adjust desired width */
        height: 100px;
        /* Adjust desired height (make equal to width for square) */
    }

    .about-image::after {
        /* Target the static image container */
        content: '';
        display: block;
        position: absolute;
        /* Positioning */
        right: 0px;
        /* Base position */
        bottom: 0px;
        /* Base position */
        /* Size */
        width: 100px;
        /* Base size */
        height: 100px;
        /* Base size */
        /* Background */
        background-image: url('assets/watermark/watermark.png');
        /* Use the same path */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        /* Transparency */
        opacity: 0.4;
        /* Use same opacity */
        /* Stacking & Interaction */
        z-index: 5;
        pointer-events: none;
    }

    .promo-section {
        display: flex;
        color: rgb(245, 245, 245);
        box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 25px;
        align-items: center;
        padding-top: 3rem;
        padding-bottom: 3rem;
        background: linear-gradient(145deg, rgb(43, 43, 43), rgb(26, 26, 26));
        border-radius: 15px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(158, 99, 61);
        border-image: initial;
        overflow: hidden;
        margin: 1.5rem 0px;
    }    


}

/* ---------------------------------------- */

@media (max-width: 768px) {

    .fa-solid,
    .fas {
        font-weight: 900;
    }

    .video-sound-button {
        position: absolute;
        bottom: 8px;
        left: 10px;
        z-index: 10;
        /* Ensure it's above the video */
        background-color: rgba(0, 0, 0, 0.5);
        /* Semi-transparent background */
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        /* Circular button */
        width: 30px;
        height: 30px;
        font-size: 1.1rem;
        /* Adjust icon size */
        opacity: 0.6;

    }

    .footer-text {
        margin-top: 0px;
        margin-bottom: 0px;
        opacity: 0.7;
        font-size: 0.6rem;
        padding-top: 5px;
        padding-bottom: 10px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.1rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
        /* margin-bottom: 20px; */
    }

    .hero {
        min-height: auto;
        padding-top: 55px;
        padding-bottom: 0px;
        background-position: center 15%;
        background-image: url('images/gesundehypnose_mobile.webp');
    }

    .hero-content {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        margin-top: 114px;
        margin-bottom: 0;
    }

    .hero-content h1 {
        margin-top: 0;
        /* Ensure no extra space above H1 */
        margin-bottom: 8px;
        /* Space between H1 and button area */
    }

    .hero-buttons {
        /* You might want to ensure there's no large default margin-bottom here if you rely on .hero's padding-bottom */
        margin-bottom: 0;
        /* Example */
    }

    .menu-toggle {
        display: block;
    }

    header {
        padding: 5px 0;
    }

    header.scrolled {
        padding: 10px 0;
    }

    /* --- ADD/MODIFY Center Logo Styles for Mobile --- */
    .logo-center {
        /* Revert to flex behavior */
        position: static; /* Or remove this property entirely if it's default */
        left: unset;
        top: unset;
        transform: none;
        width: auto;
        /* flex-grow, flex-shrink are irrelevant now */
    }

    #center-header-logo {
        height: 104px; /* Match desktop logo height */
        /* width: auto; is inherited */
    }

    /* .logo img {
        height: 40px;
        /* width: auto; */
        /* vertical-align: middle; */
        /* flex-shrink: 1; */
    /* } */

    .pricing-container {
        gap: 15px;
        /* Adjust gap */
        margin-top: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .pricing-box {
        /* Still 2 columns */
        flex-basis: calc(50% - (1 * 15px / 2));
        flex-grow: 1;
        /* flex-basis: calc(50% - 7.5px); // Simpler if gap is 15px */
    }

    .service-image {
        flex: 0 0 calc(50% - 10px);
        /* Still 2 columns, adjusted spacing */
    }

    .service-image::after {
        /* Target ONLY service images */
        content: '';
        display: block;
        position: absolute;
        /* Positioning (Adjust as desired for these smaller boxes) */
        right: 0px;
        bottom: 0px;
        /* Size (Start with a smaller size, adjust as needed) */
        width: 40px;
        height: 40px;
    }

    .section {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0px;
        padding-bottom: 10px;
    }

    .btn {
        padding: 10px 10px;
        font-size: 0.6rem;
    }



    /* Watermark Overlay for Media Containers */
    .rotating-image-container::after {
        /* Use ::after to overlay on top */

        /* Positioning in Bottom-Right Corner */
        right: 0px;
        /* Adjust horizontal distance from right edge */
        bottom: 0px;
        /* Adjust vertical distance from bottom edge */

        /* Size of the Square Overlay */
        width: 100px;
        /* Adjust desired width */
        height: 100px;
        /* Adjust desired height (make equal to width for square) */
    }

    /* Watermark Overlay for Media Containers */
    .rotating-image-container::after {
        /* Use ::after to overlay on top */

        /* Positioning in Bottom-Right Corner */
        right: 0px;
        /* Adjust horizontal distance from right edge */
        bottom: 0px;
        /* Adjust vertical distance from bottom edge */

        /* Size of the Square Overlay */
        width: 70px;
        /* Adjust desired width */
        height: 70px;
        /* Adjust desired height (make equal to width for square) */
    }

    .about-image::after {
        /* Target the static image container */
        content: '';
        display: block;
        position: absolute;

        /* Positioning */
        right: 0px;
        /* Base position */
        bottom: 0px;
        /* Base position */

        /* Size */
        width: 100px;
        /* Base size */
        height: 100px;
        /* Base size */

        /* Background */
        background-image: url('assets/watermark/watermark.png');
        /* Use the same path */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        /* Transparency */
        opacity: 0.4;
        /* Use same opacity */

        /* Stacking & Interaction */
        z-index: 5;
        pointer-events: none;
    }

    h1.adsimple-312542335 {
        font-size: 1.8rem;
    }
}

/* ------------------------------------- */


@media (max-width: 576px) {
    .footer-text {
        margin-top: 0px;
        margin-bottom: 0px;
        opacity: 0.7;
        font-size: 0.6rem;
        padding-top: 5px;
        padding-bottom: 10px;
    }

    .section {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0px;
        padding-bottom: 10px;
    }

    .pricing-price {
        font-size: 1.0rem;
        text-align: center;
        /* margin: 0px 0px 8px; */
    }

    .pricing-container {
        gap: 8px; /* Further reduce gap */
    }

    .pricing-box {
        flex-basis: calc(50% - 4px); /* Enforce 2-column layout */
        width: calc(50% - 4px);      /* Add explicit width */
        padding: 20px 5px;           /* Further reduce padding */
        min-width: 0;                /* Override any minimum width */
    }

    .pricing-title {
        font-size: 0.7rem;
        margin-top: 25px;
        margin-bottom: 20px;
        text-align: center;
        line-height: 1;
    }

    .pricing-features li {
        font-size: 0.65rem; /* Further reduce features font size */
        padding: 3px 0;
        line-height: 1.3;   /* Adjust line height */
        overflow-wrap: break-word; /* Force long words to wrap */
        text-align: left;   /* Align list items to the left */
        padding-left: 8px; /* Add left padding to create space for checkmark */
        padding-right: 3px;
        text-indent: -9px; /* Pull text back to align with first line */
        margin-left: 14px;  /* Add margin to compensate for text-indent */
        padding-bottom: 7px;
        padding-top: 7px;
    }
    
    .pricing-features li::before {
        margin-right: 5px;  /* Reduce checkmark margin */
        margin-left: -5px; /* Position checkmark properly with new layout */
    }

    .container {
        width: 95%; /* Increased from 80% to 90% for mobile */
        padding: 0 15px;
        top: 23px;
      
    }

    .hero h1 {
        font-size: 1.3rem;
    }

    .hero p {
        font-size: 1rem;
    }

    /* .hero-content {
        top: 0px;
    } */


    .narrow-container {
        padding: 20px;
    }

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

    .footer-links-container {
        flex-direction: column;
        gap: 5px; /* Spacing between the two rows of links */
        align-items: center;
    }

    .recommendation-badge {
        /* You might want it to be slightly smaller or positioned differently */
        top: -7px;
        max-width: 120px;
        max-height: 60px;
    }

    .star-badge {
        position: absolute;
        /* Lifts the image out of normal flow, overlays it */
        top: 18px;
        /* This places it within the box's top padding area. */
        left: 50%;
        /* Center horizontally */
        transform: translateX(-50%);
        /* Fine-tune horizontal centering */
        height: auto;
        /* Maintain aspect ratio based on width */
        width: 60%;
        /* Set width relative to the parent pricing box */
        max-width: 80px;
        /* Max pixel width to prevent it from getting too large on wide boxes */
        /* Adjust this based on your image's ideal size */
        max-height: 9px;
    }

    /* Watermark Overlay for Media Containers */
    .rotating-image-container::after {
        /* Use ::after to overlay on top */

        /* Positioning in Bottom-Right Corner */
        right: 0px;
        /* Adjust horizontal distance from right edge */
        bottom: 0px;
        /* Adjust vertical distance from bottom edge */

        /* Size of the Square Overlay */
        width: 50px;
        /* Adjust desired width */
        height: 50px;
        /* Adjust desired height (make equal to width for square) */
    }

    .about-image::after {
        /* Target the static image container */
        content: '';
        display: block;
        position: absolute;

        /* Positioning */
        right: 0px;
        /* Base position */
        bottom: 0px;
        /* Base position */

        /* Size */
        width: 50px;
        /* Base size */
        height: 50px;
        /* Base size */

        /* Background */
        background-image: url('assets/watermark/watermark.png');
        /* Use the same path */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        /* Transparency */
        opacity: 0.4;
        /* Use same opacity */

        /* Stacking & Interaction */
        z-index: 5;
        pointer-events: none;
    }

    .service-image::after {
        /* Target ONLY service images */
        content: '';
        display: block;
        position: absolute;
        /* Positioning (Adjust as desired for these smaller boxes) */
        right: 0px;
        bottom: 0px;
        /* Size (Start with a smaller size, adjust as needed) */
        width: 40px;
        height: 40px;
    }

    /* --- ADD Padding Reduction --- */
    .pricing-box {
        padding: 20px 2px;
        text-align: left;
        /* Reduce padding significantly (e.g., from 40px 30px) */
        /* Consider reducing font sizes inside too */
    }

    .service-image {
        /* Service images might not have internal padding, but ensure */
        /* margin-bottom is appropriate if they stack weirdly */
        margin-bottom: 15px;
        /* Adjust gap between rows */
    }

    /* Reduce font sizes generally if needed */
    h3 {
        font-size: 0.8rem;
    }



    /* Example */
    /* --- End Padding Reduction --- */

    /* ... other 576px rules ... */

    .pricing-note {
        font-size: 0.75rem; /* Reduce font size for the pricing note */
        white-space: nowrap; /* Encourage it to stay on one line */
    }

    /* Mobile list alignment */
    .container ol,
    .container ul {
        text-align: left;
        padding-left: 0;
        margin-left: 0;
        font-size: 0.6rem;
        list-style-position: inside;
    }
}

/* === ADD THESE RULES to your CSS file === */

/* Style the paragraph holding the WhatsApp link */
.whatsapp-link {
    margin-bottom: 20px;
    /* Add space below the WhatsApp line */
}

/* Style the WhatsApp link itself */
.whatsapp-link a {
    color: var(--gold);
    /* Match other text/icons */
    text-decoration: none;
    display: inline-flex;
    /* Align icon and text */
    align-items: center;
    /* Vertically center icon/text */
    gap: 8px;
    /* Space between icon and text */
    transition: color 0.3s ease;
}

.whatsapp-link a:hover {
    color: var(--light-gold);
    /* Hover color */
}

/* Style the WhatsApp icon */
.whatsapp-link a .fab.fa-whatsapp {
    font-size: 1.3em;
    /* Make icon slightly larger than text */
    /* color: #25D366; */
    /* Optional: Uncomment to force WhatsApp green */
}

/* Optional: Adjust existing icon styles if needed */
.contact-info p i {
    /* Targets existing phone/location icons */
    color: var(--gold);
    margin-right: 10px;
    font-size: 1.2rem;
    /* Ensure consistent size */
    vertical-align: middle;
    /* Helps alignment if not using flex */
}

/* New Cookie Consent Banner Styles */
.cookie-consent-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 550px;
    background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
    color: var(--text-light);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid var(--gold);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    font-size: 0.95rem;
}

.cookie-consent-banner.show {
    display: block;
    animation: fadeInFromBottom 0.5s ease-out forwards;
}

@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.cookie-consent-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.cookie-consent-text h3 {
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.cookie-consent-text p {
    margin-bottom: 0;
    line-height: 1.6;
    font-size: 0.95rem; /* Default font size for cookie consent text */
}

.cookie-link {
    color: var(--light-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-link:hover {
    color: #fff;
}

.cookie-consent-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.cookie-btn {
    padding: 10px 25px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-grow: 1;
    max-width: 200px;
}

.cookie-accept {
    background: var(--gold);
    color: var(--text-dark);
}

.cookie-accept:hover {
    background: var(--light-gold);
    transform: translateY(-2px);
}

.cookie-reject {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
}

.cookie-reject:hover {
    background: var(--gold);
    color: var(--text-dark);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .cookie-consent-banner {
        width: 90%;
        bottom: 10px;
        padding: 20px;
    }

    .cookie-consent-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .cookie-btn {
        width: 100%;
    }
    
    /* Reduce font size for cookie consent text on small screens */
    .cookie-consent-text p {
        font-size: 0.85rem; /* Smaller font size for mobile devices */
    }
    
    /* Optional: Reduce heading size slightly on mobile */
    .cookie-consent-text h3 {
        font-size: 1.0rem; /* Slightly smaller heading on mobile */
    }
}
/* Certificate Styles */
.zertifikate-container {
    text-align: center;
}

.zertifikate-gruppe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.zertifikat-klein {
    max-width: 18%; /* 5 images with some gap */
    height: auto;
    border: 1px solid var(--gold);
}

.zertifikat-einzeln {
    max-width: 30%;
    height: auto;
    margin-bottom: 20px;
    border: 1px solid var(--gold);
}

.center-emphasize {
    text-align: center;
    font-weight: 600;
    color: var(--light-gold);
    margin: 20px 0;
}

.new-section-transparent {
    padding: var(--section-padding);
}

.promo-section {
    display: flex;
    color: rgb(245, 245, 245);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 25px;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 20px;
    padding-right: 20px;
    background: linear-gradient(145deg, rgb(43, 43, 43), rgb(26, 26, 26));
    border-radius: 15px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(158, 99, 61);
    border-image: initial;
    overflow: hidden;
    margin: 1.5rem 0px;
    transition: all 0.3s ease;
}

.promo-section:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    border-color: var(--gold);
    background-color: rgb(20, 20, 20);
}

.promo-image {
    flex: 1;
}

.promo-image img {
    width: 100%;
    border: 1px solid var(--gold);
    border-radius: 10px;
}

.promo-content {
    padding: 2rem;
    flex: 1 1 0%;
}

.btn-promo {
    display: inline-block;
    background: linear-gradient(145deg, var(--light-gold), var(--gold));
    color: var(--text-dark);
    padding: 12px 24px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
}

@media (max-width: 768px) {
    .zertifikate-gruppe {
        flex-direction: column;
        align-items: center;
    }

    .zertifikat-klein,
    .zertifikat-einzeln {
        max-width: 80%;
    }
}
/* Image Container for 3 images */
.image-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.responsive-image {
    max-width: 20%;
    height: auto;
}

@media (max-width: 768px) {
    .image-container {
        flex-direction: column;
        gap: 20px;
        margin: 20px 0;
    }

    .responsive-image {
        max-width: 60%;
    }
}
@media (max-width: 768px) {
    .promo-section {
        flex-direction: column;
        padding: 10px;
        text-align: center;
    }
    .promo-content {
        padding: 5px;
        flex: 1 1 0%;
    }    
    .contact-info p {
        margin-bottom: 15px;
        font-size: 0.65rem;
        opacity: 0.8;
}
}
/* H2 Links Container Styles */
.h2-links-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 40px;
    margin: 2rem 0;
}

.h2-links-container h2 {
    margin: 0;
    flex-shrink: 0;
}

.h2-style {
    color: var(--gold);
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
}

.h2-style:hover {
    color: var(--light-gold);
}

.h2-style::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--gold);
    transition: width 0.3s ease;
}

.h2-style:hover::after {
    width: 100%;
}

/* Responsive adjustments for h2-links-container */
@media (max-width: 768px) {
    .h2-links-container {
        gap: 30px;
        flex-direction: row;
        justify-content: center;
    }
    
    .h2-style {
        font-size: 1rem;
    }

    .center-emphasize {
        text-align: center;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--light-gold);
        margin: 0px 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

}

@media (max-width: 576px) {
    .h2-links-container {
        gap: 20px;
    }
    
    .h2-style {
        font-size: 0.9rem;
    }
}
/* Erickson Quote Styles */
.erickson-quote {
    display: block;
    text-align: center;
    font-style: italic;
    color: var(--gold);
    font-weight: 300;
    line-height: 1.6;
    margin: 2rem 0;
    padding: 0 20px;
}


.erickson-author {
    display: block;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    margin-top: 0px;
    color: var(--text-light);
    opacity: 0.9;
}

/* Responsive adjustments for Erickson quote */
@media (max-width: 768px) {
    .erickson-quote {
        font-size: 1.1rem;
        padding: 0 15px;
        margin: 1.5rem 0;
    }
}

@media (max-width: 576px) {
    .erickson-quote {
        font-size: 1rem;
        padding: 0 10px;
        margin: 1rem 0;
    }
    
    .erickson-author {
        font-size: 0.9rem;
    }
}
/* Erickson Quote Container Styles */
.erickson-quote-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 2rem 0;
}

.erickson-quote {
    font-style: italic;
    color: var(--text-light);
    font-weight: 300;
    line-height: 1.6;
    padding: 0 20px;
}

.erickson-author {
    display: block;
    font-style: normal;
    font-weight: 400;
    margin-top: 0px;
    color: var(--text-light);
    opacity: 0.9;
}

/* Responsive adjustments for Erickson quote */
@media (max-width: 768px) {
    .erickson-quote {
        font-size: 1.1rem;
        padding: 0 15px;
    }
    
    .erickson-quote-container {
        margin: 1.5rem 0;
    }
}

@media (max-width: 576px) {
    .erickson-quote {
        font-size: 1rem;
        padding: 0 10px;
    }
    
    .erickson-author {
        font-size: 0.9rem;
    }
    
    .erickson-quote-container {
        margin: 1rem 0;
    }
}

/* Map Container Styles */
.map-container {
    width: 100%;
    overflow: hidden; /* Ensures the iframe stays within the container */
    padding: 20px 0; /* Adds some vertical spacing */
}

.responsive-map {
    width: 100%;
    height: 450px; /* You can adjust the height */
    border: 0;
}

/* Review Image Gallery Styles */
.review-image-container-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin: 30px 0;
    /* padding: 0px 0px; */
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.review-image-flex {
    width: 100%;
    max-width: 600px; /* Adjust size of individual images */
    height: auto;
    border: 1px solid var(--gold);
    border-radius: 5px;
}

.small-gold-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: var(--gold);
    color: var(--dark-bg);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* Improved Price Table Styles */
.price-table {
    border: 1px solid var(--gold);
    border-radius: 8px;
    overflow: hidden; /* Ensures the border-radius is applied to the corners */
    margin: 30px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.price-row {
    display: flex;
    border-bottom: 1px solid rgba(201, 169, 92, 0.2);
    transition: background-color 0.3s ease;
}

.price-row:last-child {
    border-bottom: none;
}

.price-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.price-row .service,
.price-row .price {
    padding: 15px 20px;
}

.price-row .service {
    flex: 3; /* Service column takes up more space */
    text-align: left;
}

.price-row .price {
    flex: 2; /* Price column takes up less space */
    text-align: right;
    color: var(--light-gold);
    font-weight: 600;
}

.price-row.header {
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--gold);
    font-weight: bold;
    text-transform: uppercase;
}

/* Responsive styles for the price table */
@media (max-width: 768px) {
    .price-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .price-row .service,
    .price-row .price {
        text-align: left;
        width: 100%;
        padding: 8px 15px;
    }

    .price-row .price {
        font-size: 1.1em; /* Make price slightly larger on mobile */
        padding-top: 0;
    }

    .price-row.header {
        display: none; /* Hide the header row on mobile as it's less useful */
    }
}
#danuta_deerberg {
    height: auto;
    max-width: 600px;
    display: block;
    margin: 0 auto; /* Center horizontally */
}
@media (max-width: 768px) {
    #danuta_deerberg {
        max-width: 480px;
    }
}
/* Das ist Hypnose Section Styling */
.dasisthypnose-section {
    text-align: center;
    margin: 40px 0;
    padding: 0 20px;
}

.dasisthypnose-section h2 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2rem;
}

.dasisthypnose-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.dasisthypnose-image {
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Desktop/Large screens - side by side */
@media (min-width: 769px) {
    .dasisthypnose-container {
        flex-direction: row;
    }
    
    .dasisthypnose-image {
        flex: 0 0 calc(50% - 20px);
        max-width: 500px;
    }
}

/* Mobile/Small screens - single column */
@media (max-width: 768px) {
    .dasisthypnose-container {
        flex-direction: column;
        align-items: center;
    }
    
    .dasisthypnose-image {
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .dasisthypnose-image:last-child {
        margin-bottom: 0;
    }
}
/* Dual Image Container Styling */
.dual-image-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 40px;
}

.dual-image {
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Desktop/Large screens - side by side */
@media (min-width: 769px) {
    .dual-image-container {
        flex-direction: row;
    }
    
    .dual-image {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px); /* Use percentage instead of fixed width */
    }
}

/* Mobile/Small screens - single column */
@media (max-width: 768px) {
    .dual-image-container {
        flex-direction: column;
        align-items: center;
        max-width: 480px; /* Match mobile max-width of original image */
        padding-top: 15px;
        padding-bottom: 40px;
    }
    
    .dual-image {
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .dual-image:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    #center-logo-link img {
        height: 45px;
    }
}

/* Red text style for important notices */
.red-text {
    color: #d35959;
    font-weight: 600;
}

.disclaimer {
    font-size: 0.8rem; /* Increased from 0.4rem to 0.8rem for better readability */
    opacity: 0.7;
    padding: 20px 0;
    line-height: 1.4;
    color: var(--text-light);
    margin-bottom: 0px;
}

/* Responsive disclaimer styles for small screens */
@media (max-width: 768px) {
    .disclaimer {
        font-size: 0.6rem; /* Slightly smaller on tablets */
        padding: 15px 0;
        line-height: 1.3;
    }
}

@media (max-width: 576px) {
    .disclaimer {
        font-size: 0.4rem; /* Smaller font size for mobile */
        padding: 10px 0; /* Reduced padding for mobile */
        line-height: 1.3;
        opacity: 0.8; /* Slightly more visible on small screens */
    }
}

/* Welcome Text Styling */
.welcome-text {
    font-size: 1.2rem; /* Larger font size for welcome text on large screens */
    line-height: 1.6;
    margin-bottom: 30px;
    color: var(--text-light);
}

/* Hypnose Description Text Styling */
.hypnose-description {
    font-size: 1.2rem; /* Larger font size for hypnose description on large screens */
    line-height: 1.6;
    margin-bottom: 30px;
    color: var(--text-light);
}

/* Responsive adjustments for welcome and hypnose description text */
@media (max-width: 768px) {
    .welcome-text {
        font-size: 0.9rem; /* Smaller than current p font size on small screens */
    }
    
    .hypnose-description {
        font-size: 0.9rem; /* Smaller than current p font size on small screens */
    }
}

@media (max-width: 576px) {
    .welcome-text {
        font-size: 0.85rem; /* Even smaller on very small screens */
    }
    
    .hypnose-description {
        font-size: 0.85rem; /* Even smaller on very small screens */
    }
}

/* Termin-Kontakt Page Specific Styles */
.termin-contact-process {
    margin: 30px 0;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border-left: 4px solid var(--gold);
    text-align: left;
}

.termin-contact-step {
    margin-bottom: 15px;
    padding-left: 0;
    list-style-position: inside;
}

.termin-contact-step:last-child {
    margin-bottom: 0;
}

.termin-contact-important {
    color: #ff6b6b;
    font-weight: 600;
    font-size: 1.1em;
    display: inline;
    margin-right: 10px;
}

.termin-contact-phone {
    display: inline;
    white-space: nowrap;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--light-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

.termin-contact-phone:hover {
    color: var(--gold);
    text-decoration: underline;
}

.termin-contact-phone strong {
    font-weight: 700;
}

.termin-contact-description {
    color: var(--text-light);
    line-height: 1.5;
    display: inline;
}

/* Responsive styles for Termin-Kontakt process */
@media (max-width: 768px) {
    .termin-contact-process {
        margin: 20px 0;
        padding: 15px;
        text-align: left;
    }
    
    .termin-contact-step {
        margin-bottom: 12px;
        padding-left: 0;
    }
    
    .termin-contact-important {
        font-size: 1em;
        display: inline;
        margin-right: 8px;
    }
    
    .termin-contact-phone {
        font-size: 1.1em;
        display: inline;
        white-space: nowrap;
    }
    
    .termin-contact-description {
        font-size: 0.95em;
        display: inline;
    }
}

@media (max-width: 576px) {
    .termin-contact-process {
        margin: 15px 0;
        padding: 12px;
        border-left-width: 3px;
        text-align: left;
    }
    
    .termin-contact-step {
        margin-bottom: 10px;
        padding-left: 3px; /* Add 3px left padding to numbering */
    }
    
    .termin-contact-important {
        font-size: 0.95em;
        display: inline;
        margin-right: 6px;
    }
    
    .termin-contact-phone {
        font-size: 1em;
        display: inline;
        white-space: nowrap;
    }
    
    .termin-contact-description {
        font-size: 0.9em;
        display: inline;
    }
}

/* Form Message Styles */
.form-message {
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.form-message.success {
    background-color: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.5);
    color: #4CAF50;
}

.form-message.error {
    background-color: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.5);
    color: #f44336;
}

.form-message.info {
    background-color: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.5);
    color: #2196F3;
}

.form-message.warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
    color: #FFC107;
}

/* Form Field Error Styles */
.form-field-error {
    color: #f44336;
    font-size: 0.85rem;
    margin-top: -10px;
    margin-bottom: 15px;
    display: block;
}

.form-field-error::before {
    content: "⚠ ";
}

/* Loading State Styles */
.form-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.form-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Submit Button Loading State */
.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--text-dark);
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 1s linear infinite;
}

/* ============================================= */
/* TERMIN-KONTAKT PAGE SPECIFIC STYLES */
/* ============================================= */

/* New heading classes to replace h2 elements */
.termin-heading-main {
    font-size: 2rem;
    font-weight: 300;
    color: var(--gold);
    margin-bottom: 20px;
    padding: 15px 20px;
    text-align: center;
    border-bottom: 2px solid var(--light-gold);
}

.termin-heading-section {
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--gold);
    margin-bottom: 15px;
    padding: 12px 15px;
    background-color: rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--gold);
    border-radius: 4px;
}

.termin-heading-subsection {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--light-gold);
    margin-bottom: 12px;
    padding: 10px 12px;
    background-color: rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--light-gold);
    border-radius: 3px;
}

/* New form section styling */
.termin-form-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(201, 169, 92, 0.2);
}

.termin-form-section-compact {
    margin-bottom: 20px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(201, 169, 92, 0.1);
}

/* New label styling */
.termin-label-primary {
    display: block;
    font-weight: 600;
    color: var(--light-gold);
    margin-bottom: 8px;
    padding: 8px 10px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-size: 1rem;
}

.termin-label-secondary {
    display: block;
    font-weight: 500;
    color: var(--gold);
    margin-bottom: 6px;
    padding: 6px 8px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    font-size: 0.95rem;
}

/* New input container styling */
.termin-input-container {
    margin-bottom: 15px;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(201, 169, 92, 0.1);
}

.termin-input-container-radio {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    border: 1px solid rgba(201, 169, 92, 0.05);
}

.termin-input-container-radio .termin-radio-label {
    margin-left: 8px;
    font-weight: normal;
    color: var(--text-light);
    cursor: pointer;
}

/* New textarea styling - completely new class */
.termin-custom-textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #333;
    color: var(--text-light);
    font-size: 1rem;
    box-sizing: border-box;
    min-height: 100px;
    resize: vertical;
}

.termin-custom-textarea:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 5px rgba(201, 169, 92, 0.5);
}

/* New submit button container */
.termin-submit-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 25px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 2px solid var(--gold);
}

.termin-submit-button {
    display: inline-block;
    background: linear-gradient(145deg, var(--light-gold), var(--gold));
    color: var(--text-dark);
    padding: 18px 35px;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.termin-submit-button:hover {
    background: linear-gradient(145deg, hsl(44, 58%, 65%), hsl(44, 58%, 55%));
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* New question text styling */
.termin-question-text {
    font-weight: 500;
    color: var(--light-gold);
    margin-bottom: 10px;
    padding: 10px 12px;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    line-height: 1.5;
}

/* New instruction text */
.termin-instruction {
    font-size: 0.85rem;
    color: #aaa;
    margin-top: -8px;
    margin-bottom: 15px;
    padding: 8px 10px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border-left: 2px solid var(--gold);
}

/* New divider styling */
.termin-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 25px 0;
    border: none;
}

.termin-divider-thick {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--light-gold), transparent);
    margin: 30px 0;
    border: none;
}

/* Responsive styles for termin-kontakt page */
@media (max-width: 768px) {
    .termin-heading-main {
        font-size: 1.6rem;
        padding: 12px 15px;
        margin-bottom: 15px;
    }
    
    .termin-heading-section {
        font-size: 1.4rem;
        padding: 10px 12px;
        margin-bottom: 12px;
    }
    
    .termin-heading-subsection {
        font-size: 1.2rem;
        padding: 8px 10px;
        margin-bottom: 10px;
    }
    
    .termin-form-section {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .termin-form-section-compact {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .termin-input-container {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .termin-submit-container {
        padding: 20px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    .termin-submit-button {
        padding: 15px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .termin-heading-main {
        font-size: 1.4rem;
        padding: 10px 12px;
    }
    
    .termin-heading-section {
        font-size: 1.2rem;
        padding: 8px 10px;
    }
    
    .termin-heading-subsection {
        font-size: 1.1rem;
        padding: 6px 8px;
    }
    
    .termin-form-section {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .termin-input-container {
        padding: 8px;
    }
    
    .termin-submit-container {
        padding: 15px;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    
    .termin-submit-button {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
}

/* Contact Link Box Styles for Termin-Kontakt Page */
.termin-contact-box {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 15px 0; /* Increased from 10px to 15px for better spacing */
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.termin-contact-box:hover {
    background-color: rgba(201, 169, 92, 0.1);
    border-color: var(--light-gold);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.termin-contact-box a {
    color: var(--text-light);
    text-decoration: none;
    /* font-weight: 500; */
    display: block;
}

.termin-contact-box a:hover {
    color: var(--light-gold);
}

.termin-contact-box i {
    margin-right: 8px;
    color: var(--gold);
}

/* .termin-contact-box.whatsapp-box {
    border-color: #25D366;
} */

.termin-contact-box.whatsapp-box:hover {
    border-color: #128C7E;
    background-color: rgba(37, 211, 102, 0.1);
}

.termin-contact-box.whatsapp-box i {
    color: #25D366;
}

.termin-contact-box.phone-box {
    border-color: var(--gold);
    margin-top: 5px;
}

.termin-contact-box.phone-box:hover {
    border-color: var(--light-gold);
    background-color: rgba(201, 169, 92, 0.15);
}

/* Additional spacing for WhatsApp box before CTA button */
.whatsapp-box {
    margin-bottom: 50px !important; /* Extra space before CTA button */
}

/* Contact box width constraints for all pages */
.contact-info .termin-contact-box {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive adjustments for contact boxes on all pages */
@media (max-width: 768px) {
    .contact-info .termin-contact-box {
        max-width: 280px;
    }
}

@media (max-width: 576px) {
    .contact-info .termin-contact-box {
        max-width: 250px;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.7rem;
    }
}

@media (max-width: 400px) {
    .contact-info .termin-contact-box {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Important Question Box Styles for Termin-Kontakt Page */
.termin-question-box {
    background-color: rgba(201, 169, 92, 0.15);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.termin-question-box .termin-heading-section {
    background-color: transparent;
    border-left: none;
    padding: 0 0 15px 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--light-gold);
}

.termin-question-box .termin-question-text {
    background-color: transparent;
    padding: 0 0 12px 0;
    margin-bottom: 15px;
}

/* End of Termin-Kontakt Page Specific Styles */

/* Warum Hypnose? heading specific padding for index.html only */
.warum-hypnose-heading {
    padding-top: 40px; /* Adjust this value as needed */
}

/* Responsive adjustments for Warum Hypnose heading */
@media (max-width: 768px) {
    .warum-hypnose-heading {
        padding-top: 30px; /* Reduced padding for tablets */
    }
}

@media (max-width: 576px) {
    .warum-hypnose-heading {
        padding-top: 20px; /* Further reduced padding for mobile */
    }
}