/* 
   Project: Jana Heimbold Portfolio
   Theme: Minimalist, Nature, Premium
   Fonts: Raleway (Headings), Roboto (Body)
*/

@import url('fonts.css');

:root {
    /* Colors */
    --color-bg: #FFFFFF;
    --color-bg-alt: #F8F8F8;
    /* Soft subtle grey for alternate sections */
    --color-text: #4F493D;
    --color-text-light: #666666;
    --color-accent: #8FA89B;
    /* Sage Green - Calming */
    --color-accent-dark: #6B8276;
    --color-white: #FFFFFF;
    --color-border: #EEEEEE;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --spacing-xxl: 8rem;

    /* Typography */
    --font-heading: 'Raleway', sans-serif;
    --font-body: 'Roboto', sans-serif;

    --text-scale-h1: 3.5rem;
    --text-scale-h2: 2.5rem;
    --text-scale-h3: 1.75rem;
    --text-scale-body: 1.1rem;
    --text-scale-small: 0.9rem;
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    /* Light styling for premium feel */
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    font-size: var(--text-scale-body);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

/* Container Utility */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.bg-alt {
    background-color: var(--color-bg-alt);
}

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

.section-spacer {
    padding: var(--spacing-xxl) 0;
}

.notice-box {
    background-color: #FDF6F6;
    /* Very soft red/warm tone for caution but keeping it wellness-y */
    border-left: 4px solid #D4A5A5;
    /* Muted red/pink border */
    padding: var(--spacing-lg);
    margin: 0 auto var(--spacing-md);
    /* max-width: 900px; */
    border-radius: 4px;
}

.notice-box h3 {
    color: #8C5E5E;
    /* Darker muted red for heading */
    margin-bottom: var(--spacing-md);
    font-weight: 500;
}

.notice-box ul {
    margin: var(--spacing-sm) 0 var(--spacing-md) 2rem;
    list-style-type: disc;
}

.notice-box li {
    margin-bottom: 0.25rem;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 1000;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.02);
    padding: var(--spacing-sm) 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between logo and text */
    font-family: var(--font-heading);
    font-size: 1.5rem;
    /* Larger */
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555555;
    /* Darker grey as requested */
}

.logo img {
    height: 50px;
    /* Adjust based on preference, keeps header reasonable */
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: var(--spacing-md);
}

.nav-links a {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: var(--color-text);
}

.nav-links a:hover {
    color: var(--color-accent);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: flex-end;
    /* Bottom aligned */
    justify-content: center;
    /* Horizontally centered container */
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../bilder/header.jpeg');
    /* User provided header */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--color-white);
    text-align: left;
    /* Left aligned text */
    padding-top: 60px;
    /* Offset for fixed header */
    padding-bottom: var(--spacing-xl);
    /* Spacing from bottom */
}

/* Fallback if no image */
.hero.no-image {
    background-color: #E0E5E2;
    /* Soft Green-Grey */
    color: var(--color-text);
}

.hero-content {
    width: 90%;
    max-width: 1200px;
    /* Match container width */
    padding: var(--spacing-md);
    padding-left: var(--spacing-sm);
    /* Align with container padding somewhat, or keeping spacing-md is fine but might be indented slightly more than logo */
}

.hero h1 {
    font-size: 4.5rem;
    /* Increased from 3.5rem */
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
    color: var(--color-white);
    /* Enforce white color over global h1 styling */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Add shadow to help with legibility if image is light/complex */
}

.hero p {
    font-size: 1.25rem;
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md);
}

.hero-claims {
    margin: var(--spacing-md) 0;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.1em;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.hero-claims li {
    margin-bottom: 0.5rem;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid currentColor;
    border-radius: 0;
    /* Minimalist sharp edges */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* Philosophy Section */
.philosophy {
    background-color: var(--color-bg);
    padding-bottom: var(--spacing-md);
    /* Reduced from lg to reduce gap to services */
}

/* About Section Specifics */
#about.section-spacer {
    padding-top: var(--spacing-lg);
}

.narrow-content {
    max-width: 1000px;
    margin: 0 auto;
}

.link-highlight {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    /* Similar to h3 but slightly smaller or specific size if needed, user said 'same font' usually implies family/look */
    font-weight: 500;
    color: #8C5E5E;
    text-decoration: none;
    /* Usually headings don't have underline, let's remove it to match look, or keep it if it's a link - user said 'same font/color', link usually implies underline. I'll keep underline or hover? I'll remove underline to match the 'header look', but keep it on hover maybe? User just said 'same font and color'. I will remove underline to strictly match */
}

.link-highlight:hover {
    text-decoration: underline;
}

.philosophy h2 {
    font-size: var(--text-scale-h2);
    margin-bottom: var(--spacing-md);
}

/* Services Section */
#services.section-spacer {
    padding-top: var(--spacing-md);
    /* Reduced from lg to reduce gap from philosophy */
    padding-bottom: var(--spacing-lg);
}

/* Services Section */
#services>.container>h2 {
    font-size: var(--text-scale-h2);
    margin-bottom: var(--spacing-md);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.service-card {
    text-align: center;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-image {
    width: 100%;
    aspect-ratio: 4/5;
    /* Portrait aspect ratio as seen in reference */
    object-fit: cover;
    background-color: #ddd;
    /* Placeholder */
    margin-bottom: var(--spacing-md);
}

.service-card h3 {
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 500;
}

/* Split Section (Image + Text) */
/* Split Section (Image + Text) */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xxl);
    /* Space between detailed sections */
}

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

.split-section.reverse {
    direction: rtl;
    /* simple trick to swap columns, but need to reset text direction inside */
}

.split-section.reverse>* {
    direction: ltr;
}

.split-image {
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    background-color: #ddd;
    border-radius: 2px;
    /* Slight softening */
}

.split-text {
    padding: 0 0 0 var(--spacing-md);
}

.split-text h2 {
    margin-bottom: var(--spacing-md);
}

.split-text ul {
    list-style-type: none;
    /* Custom bullets look better */
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-sm);
}

.split-text li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.split-text li::before {
    content: "•";
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-size: 1.2em;
}

/* Contact/Footer */
.contact-section {
    background-color: var(--color-bg-alt);
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.form-group label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    color: var(--color-text-light);
}

.form-control {
    padding: 15px;
    border: 1px solid #ddd;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
}

footer {
    padding: var(--spacing-md) 0;
    text-align: center;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-scale-small);
    color: var(--color-text-light);
}

.social-media-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.social-media-links a {
    color: var(--color-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

.social-media-links a:hover {
    color: var(--color-accent);
}

.footer-links {
    margin-bottom: var(--spacing-sm);
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 2rem;
        --spacing-xl: 3rem;
        --spacing-xxl: 4rem;
        --text-scale-h1: 2.5rem;
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero {
        background-attachment: scroll;
        /* Fix for mobile fixed bg issues */
        background-position: right top;
        /* Focus on top right as requested */
        height: 80vh;
        /* Slight height reduction for better mobile crop */
        min-height: 500px;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .hero-content p {
        font-size: 0.9rem;
    }

    .hero-claims li {
        font-size: 0.85rem;
    }

    .nav-links {
        display: none;
        /* Hide for now, simple JS would toggle this */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: var(--spacing-md);
        text-align: center;
        box-shadow: 0 4px 5px rgba(0, 0, 0, 0.05);
    }

    .nav-links.active {
        display: flex;
    }

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

    .split-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .split-section.reverse {
        direction: ltr;
    }

    .split-image {
        min-height: 0;
        /* Remove mobile min-height constraint */
        order: -1;
        /* Image always on top on mobile */
    }

    .split-text {
        padding: var(--spacing-sm);
    }
}

/* Quiz Styles */
.quiz-form {
    max-width: 1000px;
    margin: 0 auto;
}

.question-block {
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-md);
}

.question-block:last-child {
    border-bottom: none;
}

.question-text {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.quiz-promo-label {
    margin-bottom: var(--spacing-md);
    /* Match standard heading spacing */
    margin-top: var(--spacing-lg);
    font-family: var(--font-heading);
    /* Match h2 font */
    font-size: var(--text-scale-h2);
    /* Match h2 size */
    font-weight: 400;
    /* h2 usually 400 or 500, Raleway is often used lighter for headings */
    text-align: center;
    line-height: 1.2;
}

.quiz-promo-box {
    display: inline-block;
    /* Fits content size */
    background-color: #FDF6F6;
    /* border-left: 4px solid #D4A5A5; - Removing for button look */
    border: 1px solid #EADDDD;
    /* Subtle border instead */
    padding: var(--spacing-sm) var(--spacing-md);
    /* Adjusted padding */
    margin: 0 auto var(--spacing-md);
    border-radius: 4px;
    /* Slightly more rounded for button? keeping 4px or maybe 8px. 4px matches theme */
    color: #8C5E5E;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    /* Slightly bolder */
    font-size: 1.25rem;
    transition: all 0.2s ease;
    /* max-width removed or irrelevant with inline-block */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Light shadow */
}

.quiz-promo-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* Stronger shadow on hover */
    text-decoration: none;
    background-color: #FFF0F0;
    /* Slight color shift on hover */
    color: #8C5E5E;
}

.btn-pink {
    background-color: #FDF6F6;
    border: 1px solid #EADDDD;
    border-radius: 4px;
    color: #8C5E5E;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    /* Large text like the test button */
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    text-transform: none;
    /* Reset uppercase from default btn if needed, or keep? The test box is mixed case. I'll use None or Inherit to match text content. The test box has 'TEST' uppercase but 'Wie bist du...' normal. The buttons have 'Absenden' etc. I'll stick to normal/inherit. */
    letter-spacing: normal;
}

.btn-pink:hover {
    background-color: #FFF0F0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: #8C5E5E;
    border-color: #EADDDD;
}

.scale-options {
    display: flex;
    justify-content: space-between;
    max-width: 400px;
    /* Limit width of scale for better aesthetics */
    margin-top: 0.5rem;
}

.scale-options label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.scale-options input[type="radio"] {
    accent-color: #D4A5A5;
    /* Pink selection color */
    transform: scale(1.2);
    cursor: pointer;
    margin-top: 5px;
}

/* Quiz Page Helpers */
.margin-bottom-sm {
    margin-bottom: var(--spacing-sm);
}

.margin-bottom-md {
    margin-bottom: var(--spacing-md);
}

.margin-bottom-lg {
    margin-bottom: var(--spacing-lg);
}

.margin-top-lg {
    margin-top: var(--spacing-lg);
}

.margin-top-xl {
    margin-top: 3rem;
}

#result-container h3 {
    color: #8C5E5E;
    /* Match notice box heading style */
    margin-bottom: var(--spacing-sm);
}

/* Accordion Styles */
.accordion {
    background-color: #FDF6F6;
    border: 1px solid #EADDDD;
    border-left: 4px solid #D4A5A5;
    border-radius: 4px;
    overflow: hidden;
}

.accordion-header {
    padding: var(--spacing-md);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: #8C5E5E;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

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

.accordion-header::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.accordion[open] .accordion-header::after {
    content: "−";
}

.accordion-content {
    padding: 0 var(--spacing-md) var(--spacing-md);
    border-top: 1px solid #EADDDD;
}

.accordion-content ul {
    list-style-type: disc;
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.accordion-content li {
    margin-bottom: 0.25rem;
}

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

/* Testimonials Carousel */
#testimonials {
    background-color: var(--color-bg-alt);
    overflow: hidden;
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    padding: var(--spacing-md) 0;
    position: relative;
    /* Ensure track width is constrained by container for the flex-basis calc to work relative to something? 
       Actually flex-basis % is relative to the flex container's main size *if* set, or usually the available space. 
       Wait, .carousel-track width is max-content... this might break percentage flex-basis of children.
       
       Better approach:
       Let .carousel-track be 'display: flex' without 'width: max-content'. 
       BUT if we want them to overflow, we need them to not shrink.
       
       Let's stick to a simpler approach for the track:
       width: 100% does not work if we want to slide them out.
       
       Actually, standard infinite carousel usually has:
       Container: overflow hidden
       Track: display flex, width: fit-content (or just flex, ensuring items don't shrink)
       
       If I use flex: 0 0 33.333%... what is the percentage relative to? 
       It is relative to the flex container's inner width. 
       If flex container is wide (max-content), then 33% is huge.
       
       So:
       Container: width 100% (of parent)
       Track: width 100% (initial), display flex. items: flex: 0 0 33.333% (of the track/container). 
       When we toggle transform, we slide the track.
       
       Wait, if I append child, the track content changes. 
       If I set track width to 100%, and items are 33%, then 3 items fit. 
       The 4th item will wrap unless flex-wrap: nowrap (default).
       The 4th item will overflow the track box if track has specific width? 
       Or the track will grow if no width constraint?
       
       If track has no width constraint (default is width: auto which implies 100% block width usually, but flex container...)
       
       Let's use:
       .carousel-track { display: flex; width: 100%; } 
       .testimonial-card { flex: 0 0 33.333%; min-width: 0; }
       
       But if I have 6 items, they will try to squeeze? No, 'flex-shrink: 0' (implied by flex: 0 0...)
       So they will overflow the track.
       If track is width 100%, they will overflow it.
       That is fine.
       
       Correct CSS:
       .carousel-track {
         display: flex;
         width: 100%;
       }
       .testimonial-card {
         flex: 0 0 calc(100% / 3 - var(--spacing-md)); // Adjust for gap
         // Or easier: flex: 0 0 33.3333%; and verify gap handling.
       }
    */
}

.carousel-track {
    display: flex;
    gap: var(--spacing-md);
    /* Ensure items don't shrink */
    width: 100%;
}

.testimonial-card {
    background: #fff;
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* 3 items visible. Formula: (100% - (visible-1)*gap) / visible */
    /* visible=3, gap=var(--spacing-md) */
    /* We don't know spacing-md value in pixels easily here for calc mixing? 
       Actually we do in CSS: calc((100% - 2 * var(--spacing-md)) / 3) 
    */
    flex: 0 0 calc((100% - 2 * var(--spacing-md)) / 3);
    min-width: 0;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Align author at bottom */
}

.testimonial-content p {
    font-style: italic;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.testimonial-author {
    font-weight: 500;
    color: var(--color-accent);
    display: block;
    text-align: right;
}

@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 100%;
    }
}

/* Scroll to Top Button */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #A97A7A;
    /* Pink accent */
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background-color: #8C6464;
    /* Darker pink */
    transform: translateY(-3px);
}

/* Spam Protection */
.honeypot-field {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}