/* ══════════════════════════
   VARIABLEN & RESET
══════════════════════════ */
:root {
    --dark:   #3b5c4c;
    --accent: #57bb89;
    --light:  #e8f4ee;
    --white:  #ffffff;
    --text:   #1e2e26;
    --muted:  #546b5d;
    --trans:  0.32s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; font-size: 17px; color: #1e2e26; background: #ffffff; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3 { font-family: 'Cormorant Garamond', serif; line-height: 1.12; }
h1 { font-size: 62px; font-weight: 700; }
h2 { font-size: 48px; font-weight: 700; }
h3 { font-size: 22px; font-weight: 600; }
p  { font-size: 17px; line-height: 1.82; color: #546b5d; font-weight: 400; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.section    { padding: 96px 0; }
.section.alt { background: #e8f4ee; }

.label {
    display: inline-block;
    font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
    color: #57bb89; font-family: 'Jost', sans-serif; font-weight: 600;
    margin-bottom: 12px;
}
.divider {
    width: 52px; height: 3px; background: #57bb89;
    border-radius: 2px; margin: 22px 0 32px;
}
.divider.center { margin-left: auto; margin-right: auto; }

/* ══════════════════════════
   BUTTONS
══════════════════════════ */
.btn {
    display: inline-block; padding: 15px 36px;
    border: 2px solid #3b5c4c;
    font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase;
    color: #3b5c4c; background: transparent; cursor: pointer;
    transition: background var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans);
    border-radius: 30px;
}
.btn:hover { background: #3b5c4c; color: #ffffff; box-shadow: 0 6px 24px rgba(59,92,76,0.22); }

.btn.fill { background: #3b5c4c; color: #ffffff; }
.btn.fill:hover { background: #57bb89; border-color: #57bb89; box-shadow: 0 6px 28px rgba(87,187,137,0.35); }

.btn.accent { background: #57bb89; border-color: #57bb89; color: #ffffff; }
.btn.accent:hover { background: #45a876; border-color: #45a876; box-shadow: 0 6px 28px rgba(87,187,137,0.4); }

.btn.outline-white { border-color: rgba(255,255,255,0.5); color: #ffffff; background: transparent; }
.btn.outline-white:hover { background: rgba(255,255,255,0.14); box-shadow: none; }

/* ══════════════════════════
   NAV
══════════════════════════ */
#navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid rgba(59,92,76,0.09);
    transition: box-shadow var(--trans);
}
#navbar.scrolled { box-shadow: 0 2px 28px rgba(59,92,76,0.11); }

/* Der nav-Container darf volle Breite nutzen – Buttons sitzen so am echten rechten Rand */
#navbar .container { position: relative; padding-right: 28px; }

#navbar nav {
   /*height: 76px;*/
    line-height: 76px;
}

#navbar .logo {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
#navbar .logo img { height: 46px; width: auto; vertical-align: middle; }

#navbar ul {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    margin-left: 40px;
}
#navbar ul li { display: inline-block; margin-right: 32px; }
#navbar ul li a {
    font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
    color: #3b5c4c; font-weight: 500; position: relative;
    transition: color var(--trans);
    line-height: normal;
}
#navbar ul li a::after {
    content: ''; position: absolute; left: 0; bottom: -4px;
    width: 0; height: 2px; background: #57bb89; border-radius: 2px;
    transition: width var(--trans);
}
#navbar ul li a:hover::after { width: 100%; }
#navbar ul li a:hover { color: #57bb89; }


/* Buttons: absolut positioniert, aber right:0 zeigt auf Container-Padding-Kante.
   Wir negieren das padding (28px) damit die Buttons bündig am Viewport-Rand des
   Containers sitzen – kein magic-number-Hack mehr. */
.nav-contact {
    position: absolute; top: 50%; right: 20px;
    transform: translateY(-50%);
}
.nav-contact a {
    display: inline-block;
    padding: 10px 18px; border-radius: 30px;
    font-size: 14px; font-weight: 600; font-family: 'Jost', sans-serif;
    transition: background var(--trans), color var(--trans), box-shadow var(--trans);
    white-space: nowrap; vertical-align: middle;
    line-height: normal;
    margin-left: 8px;
}
.nav-contact .phone { background: #3b5c4c; color: #ffffff; border: 2px solid #3b5c4c; }
.nav-contact .phone:hover {
    background: #57bb89; border-color: #57bb89;
    box-shadow: 0 4px 16px rgba(87,187,137,0.3);
}
.nav-contact .mail { background: transparent; color: #3b5c4c; border: 2px solid #3b5c4c; }
.nav-contact .mail:hover { background: #3b5c4c; color: #ffffff; }
.nav-contact i { font-size: 13px; margin-right: 6px; }
.nav-contact .btn-label { display: inline; }

/* Hamburger */
#burger {
    display: none;
    cursor: pointer; padding: 6px; background: none; border: none;
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
}
#burger span {
    display: block; width: 25px; height: 2px;
    background: #3b5c4c; border-radius: 2px; margin-bottom: 5px;
    transition: transform var(--trans), opacity var(--trans);
}
#burger span:last-child { margin-bottom: 0; }
#burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#burger.open span:nth-child(2) { opacity: 0; }
#burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menü – liegt im normalen Dokumentfluss unter .container,
   kein z-index-Problem, kein Durchscheinen */
#mobileMenu {
    display: none;
    background: #ffffff; border-top: 1px solid #e8f4ee;
    padding: 12px 0 20px;
    position: relative; z-index: 100; /* über absolutem nav-contact */
}
#mobileMenu.open { display: block; }
#mobileMenu a {
    display: block;
    padding: 13px 28px; font-size: 16px;
    letter-spacing: 1px; text-transform: uppercase;
    color: #3b5c4c; font-weight: 500;
    line-height: normal;
}
#mobileMenu a:hover { color: #57bb89; background: #e8f4ee; }

/* ══════════════════════════
   HERO
══════════════════════════ */
.hero {
    min-height: 100vh;
    padding-top: 76px;
    position: relative; overflow: hidden;
}
.hero .bg {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: url('../img/shutterstock_2489440823.jpg') center center / cover no-repeat;
    z-index: 0;
}
.hero .bg::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(100deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 42%, rgba(255,255,255,0.2) 100%);
}
.hero .container { position: relative; z-index: 1; }

.hero-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center; width: 100%;
}
.hero-content { padding: 48px 0; }

.hero-content .eyebrow {
    font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
    color: #57bb89; font-weight: 600; margin-bottom: 16px;
    display: block;
}
.hero-content h1 { margin-bottom: 22px; color: #3b5c4c; }
.hero-content h1 em { font-style: italic; color: #57bb89; }

.hero-content .subtitle {
    font-size: 18px; font-weight: 500; color: #546b5d;
    line-height: 1.65; max-width: 500px; margin-bottom: 40px;
}
.hero-content .actions { margin-bottom: 56px; }
.hero-content .actions .btn { margin-right: 12px; margin-bottom: 8px; }

.hero-scroll {
    font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #546b5d;
}
.hero-scroll i { color: #57bb89; animation: bounce 1.8s infinite; margin-right: 10px; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* Hero fade-in */
.hero-content > * { opacity: 0; transform: translateY(18px); animation: fadeUp 0.75s forwards ease; }
.eyebrow   { animation-delay: 0.08s; }
.hero-content h1      { animation-delay: 0.20s; }
.hero-content .subtitle { animation-delay: 0.32s; }
.hero-content .actions  { animation-delay: 0.44s; }
.hero-scroll { animation-delay: 0.58s; }

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════
   PHILOSOPHIE
══════════════════════════ */
.philosophy .inner {
    display: grid; grid-template-columns: 1fr 1.25fr;
    gap: 80px; align-items: center;
}
.philosophy .photo {
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(59,92,76,0.14);
}
.philosophy .photo img {
    width: 100%; height: 420px; object-fit: cover; display: block;
}
.philosophy .content h2 { color: #3b5c4c; margin-bottom: 8px; }
.philosophy .content p  { margin-bottom: 21px; font-size: 18px; }

/* ══════════════════════════
   SCHWERPUNKTE
══════════════════════════ */
.focus-header { text-align: center; margin-bottom: 64px; }
.focus-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }

.focus-card {
    border-radius: 16px; overflow: hidden;
    border: 2px solid rgba(59,92,76,0.1);
    transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
    background: #ffffff;
}
.focus-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(59,92,76,0.13);
    border-color: transparent;
}
.focus-card img {
    width: 100%; height: 200px; object-fit: cover; display: block;
}
.focus-card .card-body { padding: 29px 32px 35px; }

.focus-card .icon {
    width: 50px; height: 50px; background: #e8f4ee; border-radius: 12px;
    text-align: center; line-height: 50px;
    color: #3b5c4c; font-size: 19px; margin-bottom: 19px;
    display: inline-block;
    transition: background var(--trans), color var(--trans);
}
.focus-card:hover .icon { background: #3b5c4c; color: #ffffff; }
.focus-card h3 { color: #3b5c4c; margin-bottom: 11px; font-size: 21px; }
.focus-card p  { font-size: 16px; }

/* ══════════════════════════
   METHODEN
══════════════════════════ */
.methods-header { text-align: center; margin-bottom: 8px; }
.methods-intro  { text-align: center; max-width: 640px; margin: 0 auto 56px; font-size: 17px; }
.methods-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-bottom: 48px; }

.method-card {
    background: #ffffff; border-radius: 14px; padding: 38px 32px;
    border-left: 4px solid #57bb89;
    box-shadow: 0 4px 24px rgba(59,92,76,0.07);
    transition: transform var(--trans), box-shadow var(--trans);
}
.method-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(59,92,76,0.13); }
.method-card i  { font-size: 32px; color: #57bb89; margin-bottom: 16px; display: block; }
.method-card h3 { color: #3b5c4c; margin-bottom: 11px; font-size: 20px; }
.method-card p  { font-size: 16px; }

.classic-tags { text-align: center; }
.classic-tag {
    display: inline-block;
    padding: 11px 22px; border-radius: 30px; margin: 5px;
    background: #ffffff; color: #3b5c4c;
    font-size: 15px; font-weight: 500;
    border: 2px solid rgba(59,92,76,0.15);
}
.classic-tag i { color: #57bb89; font-size: 14px; margin-right: 8px; }

/* ══════════════════════════
   KOSTEN
══════════════════════════ */
.costs .inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
.costs .content h2 { color: #3b5c4c; margin-bottom: 8px; }
.costs .content > p { margin-bottom: 32px; font-size: 17px; }

.steps { margin-top: 0; }
.step   { overflow: hidden; margin-bottom: 18px; }

.step .num {
    float: left;
    width: 42px; height: 42px; background: #3b5c4c; color: #ffffff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700;
    margin-right: 19px;
}
.step .body { overflow: hidden; }
.step .body strong { display: block; color: #3b5c4c; font-size: 17px; margin-bottom: 3px; }
.step .body p { font-size: 15px; margin: 0; }

.kassen-box {
    background: #ffffff; border-radius: 16px; padding: 35px;
    border: 2px solid rgba(59,92,76,0.12);
    margin-bottom: 24px;
}
.kassen-box h3 { color: #3b5c4c; margin-bottom: 8px; font-size: 19px; }
.kassen-box h3 i { color: #57bb89; margin-right: 10px; }
.kassen-box > p { font-size: 15px; margin-bottom: 22px; }

.kassen-tags { margin-bottom: 22px; }
.kasse-tag {
    display: inline-block;
    padding: 8px 16px; border-radius: 20px; margin: 4px 4px 4px 0;
    background: #e8f4ee; color: #3b5c4c; font-size: 14px; font-weight: 600;
}

.info-note {
    background: #e8f4ee; border-radius: 10px; padding: 16px 19px;
    font-size: 15px; color: #546b5d; overflow: hidden;
}
.info-note i { color: #57bb89; float: left; margin-right: 10px; margin-top: 3px; }
.info-note span { display: block; overflow: hidden; }

.qual-list { margin-top: 12px; }
.qual-list li { overflow: hidden; margin-bottom: 10px; font-size: 16px; color: #546b5d; }
.qual-list li i { color: #57bb89; float: left; margin-right: 10px; margin-top: 4px; }
.qual-list li span { display: block; overflow: hidden; }

/* ══════════════════════════
   KONTAKT
══════════════════════════ */
.contact { padding: 96px 0 0; background: #e8f4ee; }

.contact .top {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 72px; align-items: start;
    max-width: 1120px; margin: 0 auto;
    padding: 0 28px 64px;
}
.contact .info h2 { color: #3b5c4c; margin-bottom: 8px; }
.contact .info > p { margin-bottom: 32px; font-size: 17px; }

.contact-item { overflow: hidden; margin-bottom: 21px; }
.contact-item .icon {
    float: left;
    width: 44px; height: 44px; background: #ffffff;
    border-radius: 50%; text-align: center; line-height: 44px;
    color: #3b5c4c; font-size: 14px; margin-right: 16px;
    transition: background var(--trans), color var(--trans);
}
.contact-item:hover .icon { background: #3b5c4c; color: #ffffff; }
.contact-item .text { overflow: hidden; }
.contact-item .text strong {
    display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    color: #57bb89; margin-bottom: 3px; font-family: 'Jost', sans-serif;
}
.contact-item .text span,
.contact-item .text a { font-size: 16px; color: #546b5d; font-weight: 400; transition: color var(--trans); }
.contact-item .text a:hover { color: #3b5c4c; }

.contact-btns { margin-top: 28px; }
.contact-btns .btn { margin-right: 12px; margin-bottom: 8px; }
.contact-btns .btn i { margin-right: 8px; }

/* MAP */
.map-section {
    width: 100%; max-width: 1920px; margin: 0 auto;
    position: relative; overflow: hidden;
}
.map-section img.map-img {
    width: 100%; height: 700px;
    object-fit: cover; object-position: center;
    display: block;
}
.map-card {
    position: absolute; top: 50%; left: 10%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.95);
    border-radius: 16px;
    padding: 28px 35px;
    box-shadow: 0 12px 40px rgba(59,92,76,0.18);
    text-align: center;
    min-width: 260px;
    border-top: 4px solid #57bb89;
}
.map-card img    { height: 36px; margin: 0 auto 12px; }
.map-card p      { font-size: 15px; margin: 0; }
.map-card strong { color: #3b5c4c; display: block; font-size: 16px; margin-bottom: 4px; }
.map-card .pin   { margin-top: 16px; font-size: 13px; color: #57bb89; font-weight: 600; }
.map-card .pin i { margin-right: 6px; }

/* ══════════════════════════
   SEITEN-HEADER
══════════════════════════ */
.page-header {
    padding-top: 76px;
    background: linear-gradient(135deg, #3b5c4c 0%, #57bb89 100%);
    padding-bottom: 72px;
}
.page-header .container { padding-top: 56px; }
.page-header .label { color: rgba(255,255,255,0.7); }
.page-header h1 { color: #ffffff; font-size: 48px; margin-top: 8px; }

/* ══════════════════════════
   IMPRESSUM / DATENSCHUTZ
══════════════════════════ */
.legal { padding: 80px 0; }
.legal .inner { max-width: 780px; }

/* Inhalt */
.legal-content section { margin-bottom: 56px; }
.legal-content section:last-child { margin-bottom: 0; }

.legal-content h2 {
    font-size: 32px; color: #3b5c4c;
    margin-bottom: 6px;
}
.legal-content h3 {
    font-size: 19px; color: #3b5c4c;
    margin-top: 28px; margin-bottom: 10px;
}
.legal-content p { margin-bottom: 14px; }
.legal-content p:last-child { margin-bottom: 0; }

/* Impressum-Box */
.imprint-box {
    background: #e8f4ee;
    border-radius: 14px;
    padding: 32px 36px;
    margin-top: 24px;
}
.imprint-box .row { overflow: hidden; margin-bottom: 16px; }
.imprint-box .row:last-child { margin-bottom: 0; }
.imprint-box .key {
    float: left; width: 140px;
    font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
    color: #57bb89; font-weight: 600; padding-top: 2px;
}
.imprint-box .val {
    display: block; overflow: hidden;
    font-size: 16px; color: #1e2e26; line-height: 1.6;
}
.imprint-box .val a { color: #3b5c4c; text-decoration: underline; text-underline-offset: 3px; }

/* Datenschutz-Abschnitte */
.ds-block {
    background: #ffffff;
    border: 2px solid rgba(59,92,76,0.1);
    border-radius: 14px;
    padding: 28px 32px;
    margin-top: 20px;
}
.ds-block h3 { margin-top: 0; }

/* Rechte-Liste */
.rights-list { margin-top: 16px; }
.rights-list li {
    overflow: hidden; margin-bottom: 10px;
    font-size: 16px; color: #546b5d;
}
.rights-list li i {
    color: #57bb89; float: left;
    margin-right: 10px; margin-top: 4px;
}
.rights-list li span { display: block; overflow: hidden; }

/* ══════════════════════════
   FOOTER
══════════════════════════ */
footer {
    background: #1c3026; padding: 56px 0 28px; color: rgba(255,255,255,0.45);
}
footer .inner {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 48px; margin-bottom: 40px;
}
footer .brand img { height: 100px; margin-bottom: 16px; filter: brightness(0) invert(1) opacity(0.65); }
footer .brand p   { font-size: 15px; line-height: 1.75; }

footer .col h4 {
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    color: #57bb89; margin-bottom: 18px; font-family: 'Jost', sans-serif; font-weight: 600;
}
footer .col ul li { margin-bottom: 10px; }
footer .col ul li a { font-size: 15px; color: rgba(255,255,255,0.45); transition: color var(--trans); }
footer .col ul li a:hover { color: #57bb89; }

footer .bottom {
    border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px;
    overflow: hidden; font-size: 13px;
}
footer .bottom .left  { float: left; }
footer .bottom .right { float: right; }
footer .bottom a { color: rgba(255,255,255,0.35); }

/* ══════════════════════════
   SCROLL ANIMATION INIT
══════════════════════════ */
.anim {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.anim.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════
   RESPONSIVE
══════════════════════════ */
@media (max-width: 1100px) {
    .nav-contact .btn-label { display: none; }
    .nav-contact a { padding: 10px 14px; }
    .nav-contact i { margin-right: 0; }
}
@media (max-width: 900px) {
    h1 { font-size: 42px; }
    h2 { font-size: 36px; }

    .hero-grid { grid-template-columns: 1fr; }
    .hero-content .subtitle { max-width: 100%; }
    .hero .bg::after { background: linear-gradient(100deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.5) 100%); }

    .philosophy .inner { grid-template-columns: 1fr; }
    .philosophy .photo { display: none; }

    .focus-grid   { grid-template-columns: 1fr 1fr; }
    .methods-grid { grid-template-columns: 1fr 1fr; }

    .costs .inner { grid-template-columns: 1fr; }

    .contact .top { grid-template-columns: 1fr; gap: 48px; }

    footer .inner { grid-template-columns: 1fr 1fr; }

    #navbar ul      { display: none; }
    .nav-contact    { display: none; }
    #burger         { display: block; }

    .map-section img.map-img { height: 300px; }
    .map-card { padding: 20px 24px; }
    
    .legal .inner { max-width: 100%; }
}
@media (max-width: 600px) {
    .section { padding: 64px 0; }
    h1 { font-size: 34px; }
    h2 { font-size: 28px; }

    .focus-grid   { grid-template-columns: 1fr; }
    .methods-grid { grid-template-columns: 1fr; }

    footer .inner   { grid-template-columns: 1fr; }
    footer .bottom .left,
    footer .bottom .right { float: none; display: block; margin-bottom: 8px; text-align: center; }

    .map-section img.map-img { height: 260px; }
    .map-card { display: none; }
    
    .imprint-box .key { float: none; width: auto; margin-bottom: 2px; }
    .imprint-box .val { display: block; }
}