/* ==========================================================
   Karin Drexhage - style.css
   Version 0.5
   Basis-Designsystem
========================================================== */

/* ==========================================================
   Variablen
========================================================== */
:root{
  --color-bg:#f8f7f4;
  --color-surface:#ffffff;
  --color-text:#36413c;
  --color-heading:#24322d;
  --color-accent:#708c78;
  --color-accent-dark:#55705f;
  --color-border:#dde3dc;

  --font-body:'Inter',sans-serif;
  --font-heading:'Cormorant Garamond',serif;

  --space-xs:.5rem;
  --space-s:1rem;
  --space-m:2rem;
  --space-l:4rem;
  --space-xl:7rem;

  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.08);

  --max-width:1180px;
}

/* ==========================================================
   Reset
========================================================== */
*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.75;
}

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

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(92%,var(--max-width));
  margin-inline:auto;
}

/* ==========================================================
   Grundeinstellungen
========================================================== */

/* ---------- Typografie ---------- */

h1,h2,h4{
  font-family:var(--font-heading);
  color:var(--color-heading);
  font-weight:600;
  line-height:1.1;
  margin-top:0;
}

h1{
  font-size:clamp(3rem,6vw,5rem);
}

h2{
  font-size:clamp(2.2rem,4vw,3.2rem);
  margin-bottom:2rem;
}

h4{
  font-size:clamp(1.8rem,2vw,2.5rem);
  margin-top: 2.5rem;
  margin-bottom:1rem;
}

p{
  margin:0 0 1.25rem;
}


/* ==========================================================
   Navigation
========================================================== */

/* Header */

#header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  background:rgba(248,247,244,.82);
  backdrop-filter:blur(10px);


    transition:
        background-color .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        padding .35s ease;

}

/* Header nach Verlassen des Hero */

#header.scrolled {

    background: rgba(248,247,244,.92);

    backdrop-filter: blur(12px);

    box-shadow: 0 2px 18px rgba(0,0,0,.08);

}



#header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
}

.logo{
  font-weight:600;
}

nav ul{
  list-style:none;
  display:flex;
  gap:2rem;
  margin:0;
  padding:0;
}

nav a {

    position: relative;

    display: inline-block;

    padding: .6rem 0;

    color: var(--color-text);

    text-decoration: none;

    font-weight: 400;

    transition:

        color .25s ease,

        font-weight .25s ease;

}

@media (hover: hover) {

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

    nav a:hover::after {
        transform: scaleX(1);
    }

}


nav a::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 1px;
    
    background: var(--color-accent);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform .25s ease;

}

nav a.active::after {

    transform: scaleX(1);

}

nav a.active {

    font-weight: 500;

}

nav.open {

    display: block;

}

.menu-toggle{
  display:none;
}

/* ==========================================================
   Hero
========================================================== */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(20,28,24,.62) 0%,
    rgba(20,28,24,.45) 30%,
    rgba(20,28,24,.08) 65%,
    rgba(20,28,24,0) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
}

.hero-text{
  max-width:40rem;
  margin-left:8%;
  color:white;
}

.hero-text h1{
  color:white;
}

.button{
  display:inline-block;
  margin-top:1rem;
  margin-right: 1rem;
  padding:.9rem 1.6rem;
  border-radius:8px;
  background:var(--color-accent);
  color:white;
  transition:.25s;
}

.button:hover{
  background:var(--color-accent-dark);
}

/* ==========================================================
   Sektionen
========================================================== */

section {

    padding: 6rem 0;

}

section h2 {

    margin: 0 0 2rem;

}

/* ==========================================================
   Vertrauen
========================================================== */

.about {

    display: flex;

    align-items: center;

    gap: 5rem;

}

.about-text {

    flex: 1;

}

.about-image {

    flex: 0 0 38%;

}

.about-image img {

    width: 100%;

    display: block;

    border-radius: 12px;

}

/* ==========================================================
   Leistungen
========================================================== */

.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
  margin-top: 2.5rem;
}


.card{
  background:var(--color-surface);
  padding:2rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:.25s;
}

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


/* ==========================================================
   Stimmen
========================================================== */

#stimmen .section-intro {

    margin-bottom: 3rem;

}


/* ---------- Einzelne Stimme ---------- */

.testimonial {

    width: 100%;

    padding: 2.5rem 0;

    border-top: 1px solid #d9ddd8;
    border-bottom: 1px solid #d9ddd8;

    margin-top: -1px;

}


/* ---------- Name und Beruf ---------- */

.testimonial-header h3 {

    margin: 0;

    font-family: var(--font-body);

    font-size: 1.0rem; 

    font-weight: 500;

    line-height: 1.4;

    color: var(--color-accent-dark);

}

.testimonial-header h3 span {

    font-weight: 400;

}


/* ---------- Thematischer Schwerpunkt ---------- */

.testimonial-topic {

    margin: .45rem 0 1.25rem;

    font-size: .95rem;

    color: var(--color-accent);

}


/* ---------- Kurzfassung ---------- */

.testimonial-summary {

    margin: 0;

    line-height: 1.7;

}


/* ---------- Aufklapp-Button ---------- */

.testimonial-toggle {

    margin-top: 1.25rem;

    padding: 0;

    background: none;

    border: none;

    cursor: pointer;

    font: inherit;

    font-size: .95rem;

    color: var(--color-accent);

}

.testimonial-toggle:hover {

    text-decoration: underline;

}


/* ---------- Vollständiger Erfahrungsbericht ---------- */

.testimonial-full {

    max-height: 0;

    overflow: hidden;

    transition: max-height .4s ease;

}

.testimonial-full p {

    margin: 1.25rem 0 0;

    line-height: 1.7;

}

.testimonial-full p:last-child {

    margin-top: 1.5rem;

    font-weight: 500;

}


/* ---------- Geöffneter Zustand ---------- */

.testimonial.open .testimonial-full {

    max-height: 2000px;

}

/* ==========================================================
   FAQ Accordion
========================================================== */

.faq {

    max-width: 760px;

    margin-top: 2.5rem;

}

.faq-item {

    border-bottom: 1px solid #d9ddd8;

}

.faq-question {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1.35rem 0;

    background: none;

    border: none;

    cursor: pointer;

    text-align: left;

    font: inherit;

    font-size: 1.0rem;

    color: var(--color-text);

}



@media (hover: hover) {

     .faq-question:hover {

         color: var(--color-accent);

     }

}

.faq-question::after {

    content: "›";

    font-size: 1.0rem;

    transition: transform .3s ease;

}

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:

        max-height .35s ease,

        padding .35s ease;

}

.faq-answer p {

    padding-bottom: 1.5rem;

    margin: 0;

    line-height: 1.7;

}

.faq-item.active .faq-answer {

    max-height: 400px;

    padding-bottom: 1rem;

}

.faq-item.active .faq-question::after {

    transform: rotate(90deg);

}


/* ==========================================================
   Hinweis unterhalb der FAQs
========================================================== */

.notice {

    max-width: 760px;

    margin-top: 3rem;


}

.notice p {

    margin: 0;

/*    font-size: 0.95rem; */

    line-height: 1.7;

    color: var(--color-text-light, #6f726b);

}

.notice strong {

    color: var(--color-text);

    font-weight: 600;

}


/* ==========================================================
   Kontakt
========================================================== */

.contact {

    max-width: 760px;
    margin-top: 2.5rem;

}

.contact-intro {
    margin-bottom: 2rem;
}

.contact-box {
    margin-bottom: 2rem;
}

.contact-write {
    margin-top: 2.5rem;
    margin-bottom: 5rem;
}

/* ---------- WhatsApp- Button ausblenden - wird per JavaScript nur auf mobilen Geräten sichtbar gemacht -------- */

.whatsapp-button {
    display: none;
}


/* ==========================================================
   Footer
========================================================== */

footer{
  padding:2rem 0;
  text-align:center;
  border-top:1px solid var(--color-border);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}