/* ── Lokale Fonts via @font-face (kein CDN) ── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-Gz7AlRl.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/playfair-latin-XKXZKVG.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --color-primary:   #5a8a6e;
    --color-primary-d: #3d6b52;
    --color-accent:    #c8a96e;
    --color-light:     #f5f2ec;
    --color-dark:      #1e2d25;
    --color-muted:     #7a8c82;
    --font-heading:    'Playfair Display', Georgia, serif;
    --font-body:       'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { font-family: var(--font-body); color: var(--color-dark); background: #fff; overflow-x: hidden; max-width: 100vw; display: flex; flex-direction: column; min-height: 100vh; }
body > footer { margin-top: auto; }
h1,h2,h3,h4,h5 { font-family: var(--font-heading); }

/* ── Navbar ── */
.navbar-qht { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid #e8e2d9; }
.navbar-qht .navbar-brand { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-primary); letter-spacing: .02em; }
.navbar-qht .nav-link { color: var(--color-dark); font-weight: 500; font-size: .9rem; letter-spacing: .04em; padding: .5rem 1rem; transition: color .2s; }
.navbar-qht .nav-link:hover { color: var(--color-primary); }
.btn-nav { background: var(--color-primary); color: #fff !important; border-radius: 2rem; padding: .45rem 1.3rem !important; }
.btn-nav:hover { background: var(--color-primary-d); }

/* ── Hero ── */
.hero {
    min-height: 90vh;
    background: linear-gradient(135deg, #e8f0eb 0%, #f5f2ec 55%, #ede8df 100%);
    display: flex; align-items: center; position: relative; overflow: hidden;
    padding: 4rem 0;
}
.hero::before {
    content: ''; position: absolute; right: -80px; top: -80px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(90,138,110,.15) 0%, transparent 70%);
    pointer-events: none;
}
.hero-badge { display: inline-block; background: rgba(90,138,110,.12); color: var(--color-primary); border-radius: 2rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .35rem 1rem; margin-bottom: 1.2rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.15; color: var(--color-dark); }
.hero h1 span { color: var(--color-primary); }
.hero-sub { font-size: 1rem; color: var(--color-muted); line-height: 1.7; max-width: 480px; }
.btn-primary-qht { background: var(--color-primary); border: none; color: #fff; border-radius: 2rem; padding: .75rem 2rem; font-weight: 500; transition: all .25s; display: inline-block; }
.btn-primary-qht:hover { background: var(--color-primary-d); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(90,138,110,.3); color: #fff; }
.btn-outline-qht { border: 2px solid var(--color-primary); color: var(--color-primary); border-radius: 2rem; padding: .7rem 1.8rem; font-weight: 500; background: transparent; transition: all .25s; display: inline-block; }
.btn-outline-qht:hover { background: var(--color-primary); color: #fff; }

/* Hero Bild-Blob — responsive */
.hero-img-wrap { position: relative; display: flex; justify-content: center; width: 100%; }
.hero-img-wrap .img-blob {
    width: min(420px, 85vw);
    height: min(480px, 85vw);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    background: linear-gradient(145deg, var(--color-primary) 0%, #8ab89a 60%, var(--color-accent) 100%);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: 0 24px 60px rgba(90,138,110,.25); flex-shrink: 0;
}

.hero-photo { width: 100%; height: calc(100% + 85px); object-fit: cover; object-position: center top; margin-top: -50px; }

/* Platzhalter-Foto-Ersatz: CSS-Gradient statt CDN-Bild */
.photo-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #7aad90 0%, #5a8a6e 40%, #3d6b52 100%);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .5rem;
}
.photo-placeholder i { font-size: 3rem; color: rgba(255,255,255,.5); }
.photo-placeholder span { font-size: .7rem; color: rgba(255,255,255,.4); font-family: var(--font-body); letter-spacing: .03em; overflow: hidden; max-width: 90%; text-align: center; }

/* About Bild-Platzhalter */
.about-photo-placeholder {
    width: 100%; height: 400px; border-radius: 1.5rem;
    background: linear-gradient(160deg, #8ab89a 0%, #5a8a6e 50%, var(--color-accent) 100%);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .75rem;
}
.about-photo-placeholder i { font-size: 4rem; color: rgba(255,255,255,.45); }
.about-photo-placeholder span { font-size: .8rem; color: rgba(255,255,255,.4); letter-spacing: .06em; }

/* Floating stat auf Blob — nur Desktop */
.hero-float-stat { position: absolute; bottom: 40px; left: 0; }

/* Hero stats bar */
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 2.5rem; }
.hero-stat { text-align: center; padding: .75rem .5rem; background: #fff; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0,0,0,.07); overflow: hidden; }
.hero-stat .num { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); line-height: 1.2; }
.hero-stat .lbl { font-size: .65rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .03em; white-space: normal; line-height: 1.3; margin-top: .2rem; }

/* ── Section helpers ── */
.section-label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .5rem; }
.section-title { font-size: clamp(1.7rem, 3.5vw, 2.6rem); color: var(--color-dark); }
.section-sub { color: var(--color-muted); font-size: 1rem; line-height: 1.7; max-width: 560px; }
section { padding: 4rem 0; }
.bg-light-qht { background: var(--color-light); }

/* ── Service cards ── */
.service-card { background: #fff; border-radius: 1.25rem; padding: 1.75rem; border: 1px solid #ece8e0; transition: all .3s; height: 100%; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(90,138,110,.15); border-color: var(--color-primary); }
.service-icon { width: 56px; height: 56px; border-radius: 1rem; background: rgba(90,138,110,.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; flex-shrink: 0; }
.service-icon i { font-size: 1.5rem; color: var(--color-primary); }

/* ── About ── */
.about-img-wrap { position: relative; margin: 0 auto 1.5rem; overflow: hidden; border-radius: 1.5rem; aspect-ratio: 3/4; max-height: 520px; }
.about-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.about-img-badge { position: absolute; bottom: 1rem; right: 1rem; background: var(--color-accent); color: #fff; border-radius: 1rem; padding: .75rem 1.2rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; box-shadow: 0 8px 24px rgba(200,169,110,.35); }
.check-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .8rem; }
.check-item i { color: var(--color-primary); margin-top: .15rem; flex-shrink: 0; }

/* ── Testimonials ── */
.testi-card { background: #fff; border-radius: 1.25rem; padding: 1.75rem; border: 1px solid #ece8e0; height: 100%; }
.testi-stars { color: var(--color-accent); font-size: .85rem; }
.testi-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), #8ab89a); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-heading); font-size: 1rem; flex-shrink: 0; }

/* ── FAQ ── */
.accordion-button:not(.collapsed) { background: rgba(90,138,110,.08); color: var(--color-primary); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(90,138,110,.2); }
.accordion-item { border: 1px solid #ece8e0; border-radius: .75rem !important; margin-bottom: .75rem; overflow: hidden; }

/* ── CTA Banner ── */
.cta-banner { background: linear-gradient(135deg, var(--color-primary) 0%, #3d6b52 100%); border-radius: 1.5rem; padding: 3rem 1.5rem; }

/* ── Footer ── */
footer { background: var(--color-dark); color: rgba(255,255,255,.7); padding-top: 3rem; }
footer h5 { font-family: var(--font-heading); color: #fff; }
footer a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
footer a:hover { color: #fff; }
.footer-brand { font-family: var(--font-heading); font-size: 1.6rem; color: #fff; }
.social-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); transition: all .2s; text-decoration: none; }
.social-btn:hover { background: var(--color-primary); color: #fff; }

/* ── Active nav link ── */
.navbar-qht .nav-link.active { color: var(--color-primary); font-weight: 600; }

/* ── Sticky Nav shadow ── */
.navbar-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.08); }

/* ── Back-to-Top Button ── */
.back-to-top {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--color-primary); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(90,138,110,.4);
    opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
    transform: translateY(8px);
    cursor: pointer;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--color-primary-d); }

/* ── Page header (Unterseiten) ── */
.page-header {
    background: linear-gradient(135deg, #e8f0eb 0%, #f5f2ec 100%);
    padding: 4rem 0 3rem; border-bottom: 1px solid #e0dbd2;
}
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--color-dark); margin-bottom: .5rem; }
.breadcrumb-item a { color: var(--color-primary); text-decoration: none; }
.breadcrumb-item.active { color: var(--color-muted); }

/* ════════════════════════════════
   MOBILE FIXES (< 768px)
════════════════════════════════ */
@media (max-width: 767px) {
    .hero { min-height: auto; padding: 3rem 0 2.5rem; }
    .hero h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
    .hero-sub { font-size: .95rem; }
    .hero-float-stat { display: none; }
    .hero-img-wrap { margin-top: 2rem; }
    .hero-img-wrap .img-blob { width: min(300px, 80vw); height: min(300px, 80vw); }
    .about-photo-placeholder { height: 260px; }
    .hero-stats { gap: .5rem; }
    .hero-stat { padding: .5rem .35rem; }
    .hero-stat .num { font-size: 1.1rem; }
    .hero-stat .lbl { font-size: .6rem; letter-spacing: .01em; }
    .btn-primary-qht, .btn-outline-qht { width: 100%; text-align: center; }
    .cta-banner { border-radius: 1rem; padding: 2.5rem 1.25rem; }
    .cta-banner .btn { width: 100%; }
    section { padding: 3rem 0; }
}

/* ════════════════════════════════
   WIDE VIEWPORT FIX (> 1400px)
════════════════════════════════ */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}