/* =============================================
   naturally in balance · style.css
   Farben aus Logo: Mint #90C4B5, Lavendel #C8B5E5
   ============================================= */

/* ----- Resize transition fix ----- */
.no-transitions * { transition: none !important; }

/* ----- Fonts ----- */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ----- Design Tokens ----- */
:root {
  --mint:        #90C4B5;
  --mint-light:  #D4EDE8;
  --mint-dark:   #6BA99A;
  --lavender:    #C8B5E5;
  --lav-light:   #EDE8F7;
  --bg:          #FFFFFF;
  --bg-tinted:   #F3FAF7;
  --text:        #4A5568;
  --heading:     #2D4A43;
  --border:      #DDE8E4;
  --white:       #FFFFFF;

  --font:        'Poppins', system-ui, sans-serif;
  --fw-light:    300;

  --radius:      12px;
  --radius-lg:   20px;
  --shadow:      0 4px 24px rgba(144, 196, 181, 0.15);
  --shadow-lg:   0 8px 40px rgba(144, 196, 181, 0.22);

  --max-w:       1100px;
  --max-w-narrow: 720px;

  --header-h:    90px;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  font-weight: var(--fw-light);
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul[role="list"] { list-style: none; }

/* ----- Utility ----- */
.container        { max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.container-narrow { max-width: var(--max-w-narrow); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }

/* ----- Typography ----- */
h1, h2, h3 {
  font-family: var(--font);
  font-weight: var(--fw-light);
  color: var(--heading);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: 0.5rem; color: var(--mint-dark); }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--heading);
  opacity: 0.85;
}
.section-intro { margin-bottom: 3rem; }


/* =============================================
   HEADER / NAV
   ============================================= */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  z-index: 100;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
#site-header.scrolled {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
#site-header.is-subpage {
  background: #ffffff;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#site-header.is-subpage.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.08); }
#site-header.is-subpage .nav-links a { color: #111111; }
#site-header.is-subpage .nav-links a::after { background: #111111; }
#site-header.is-subpage .nav-links a:hover { color: #111111 !important; }
#site-header.is-subpage .nav-brand { color: #111111; }
#site-header.is-subpage .nav-toggle span { background: var(--heading); }
#site-header.is-subpage .nav-btn-green  { background: rgba(144,196,181,0.25); border-color: #90C4B5; color: #2a5c4a; }
#site-header.is-subpage .nav-btn-purple { background: rgba(200,181,229,0.25); border-color: #C8B5E5; color: #5a3d8a; }

/* Nav-Links und Brand weiß über Hero, dunkel wenn gescrollt */
.nav-links a,
.nav-brand {
  transition: color 0.3s;
  color: #ffffff;
  line-height: 1.3;
}
.nav-brand-sub {
  display: block;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: #ffffff;
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: #ffffff !important; }
#site-header.scrolled .nav-links a { color: #111111; }
#site-header.scrolled .nav-links a::after { background: #111111; }
#site-header.scrolled .nav-links a:hover { color: #111111 !important; }
#site-header.scrolled .nav-brand { color: #111111; }
#site-header.scrolled .nav-toggle span { background: var(--heading); }

.nav-container {
  width: 100%;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nav-logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
}
.nav-brand {
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
}

.nav-close { display: none; }

/* Desktop: Wrapper verhält sich wie normales Flex-Row */
.nav-mobile-menu {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-right: 1rem;
}
.nav-links a {
  font-size: 0.92rem;
  color: #ffffff;
  transition: color 0.3s;
  white-space: nowrap;
}
.nav-links a:hover { color: #ffffff; }

/* Nav Buttons (Vorteilskunde / Businesspartner) */
.nav-btns {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.nav-btn {
  font-size: 1rem;
  font-weight: 400;
  padding: 0.45rem 1rem;
  border-radius: 2rem;
  white-space: nowrap;
  transition: filter 0.2s, transform 0.2s;
  text-decoration: none;
}
.nav-btn:hover { filter: brightness(0.93); transform: translateY(-1px); }
.nav-btn-green  { background: rgba(144,196,181,0.25); border: 1px solid #90C4B5; color: #fff; }
.nav-btn-purple { background: rgba(200,181,229,0.25); border: 1px solid #C8B5E5; color: #fff; }
#site-header.scrolled .nav-btn-green  { background: rgba(144,196,181,0.25); border-color: #90C4B5; color: #2a5c4a; }
#site-header.scrolled .nav-btn-purple { background: rgba(200,181,229,0.25); border-color: #C8B5E5; color: #5a3d8a; }

/* Sektion CTA Buttons */
.btn-green  { background: #90C4B5; color: #fff; }
.btn-green:hover  { background: #6BA99A; box-shadow: 0 6px 24px rgba(144,196,181,0.4); }
.btn-purple { background: #C8B5E5; color: #fff; }
.btn-purple:hover { background: #b09ecf; box-shadow: 0 6px 24px rgba(200,181,229,0.4); }

.nav-cta {
  background: var(--mint);
  color: var(--white) !important;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  transition: background 0.2s, transform 0.2s !important;
}
.nav-cta:hover { background: var(--mint-dark) !important; transform: translateY(-1px); }

/* Nav Social Icons (WhatsApp + Instagram + Telefon) */
.nav-wa,
.nav-ig,
.nav-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: #ffffff;
  transition: opacity 0.2s, transform 0.2s;
}
.nav-wa { margin-left: 0.5rem; }
.nav-ig { margin-left: 0.15rem; }
.nav-phone { margin-left: 0.5rem; gap: 0.4rem; width: auto; }
.nav-phone-label {
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-wa:hover,
.nav-ig:hover,
.nav-phone:hover { opacity: 0.7; transform: translateY(-2px); }
.nav-wa svg,
.nav-ig svg,
.nav-phone svg { width: 26px; height: 26px; }

/* Sub-pages & scrolled: schwarze Icons */
#site-header.is-subpage .nav-wa,
#site-header.is-subpage .nav-ig,
#site-header.is-subpage .nav-phone,
#site-header.scrolled .nav-wa,
#site-header.scrolled .nav-ig,
#site-header.scrolled .nav-phone { color: #111111; }

/* WA + IG im Nav ausgeblendet – nur Chat-Blase sichtbar */
.nav-wa, .nav-ig { display: none; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  transition: background 0.3s;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =============================================
   SECTIONS – BASE
   ============================================= */
.section {
  padding-block: clamp(4rem, 10vw, 7rem);
}
.section:first-of-type { padding-top: calc(var(--header-h) + 4rem); }
.section { scroll-margin-top: var(--header-h); }
.section-light  { background: #ffffff; }
.section-tinted { background: var(--bg-tinted); }

/* ── Testimonials ── */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: start;
}
.testimonial-card {
  position: relative;
}
.testimonial-card {
  background: var(--bg-tinted);
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--border);
  position: relative;
}
.testimonial-text-wrapper {
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.testimonial-mehr {
  background: none;
  border: none;
  color: var(--mint-dark);
  font-family: var(--font);
  font-weight: var(--fw-light);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-align: left;
  margin-top: -0.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.testimonial-mehr:hover { color: var(--mint); }
.testimonial-quote {
  font-size: 2.5rem;
  color: var(--mint);
  line-height: 1;
}
.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text);
  flex: 1;
  margin: 0;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.testimonial-name {
  font-size: 0.9rem;
  color: var(--heading);
  font-weight: 500;
}
.testimonial-service {
  font-size: 0.8rem;
  color: var(--mint-dark);
}

/* ── Kontakt ── */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.kontakt-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
}
.kontakt-card a,
.kontakt-card button { margin-top: auto; }
.reveal-phone { white-space: nowrap; min-width: 180px; }
.kontakt-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mint-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint-dark);
  margin-bottom: 0.25rem;
}
.kontakt-icon svg {
  width: 24px;
  height: 24px;
}
.kontakt-card h3 {
  font-size: 1.1rem;
  color: var(--heading);
  margin: 0;
}
.kontakt-card p {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0;
}

@media (max-width: 768px) {
  .testimonial-grid { grid-template-columns: 1fr; }
  .kontakt-grid { grid-template-columns: 1fr; }
}

/* ── Über-Sektion: Foto links · Text rechts ── */
.ueber-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
}
.ueber-foto {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(45,74,67,0.14);
  background: var(--bg-tinted);
  min-height: 200px;
}
.ueber-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ueber-foto:not(:has(img[src])) {
  min-height: 320px;
}
@media (max-width: 680px) {
  .ueber-grid {
    grid-template-columns: 1fr;
  }
  .ueber-foto {
    aspect-ratio: 4/3;
  }
}


/* =============================================
   SUB-HERO (Unterseiten)
   ============================================= */
.sub-hero {
  background: #ffffff;
  min-height: 33vh;
  padding-top: var(--header-h);
  padding-bottom: 2rem;
  display: flex;
  align-items: center;
}
.sub-hero--photo {
  position: relative;
  background: url('hero-main.jpg') center center / cover no-repeat;
  min-height: 100vh;
  align-items: flex-start;
  flex-direction: column;
}
.sub-hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,1)    0%,
    rgba(255,255,255,1)    38%,
    rgba(255,255,255,0.96) 42%,
    rgba(255,255,255,0.87) 46%,
    rgba(255,255,255,0.74) 50%,
    rgba(255,255,255,0.57) 54%,
    rgba(255,255,255,0.40) 58%,
    rgba(255,255,255,0.24) 62%,
    rgba(255,255,255,0.12) 66%,
    rgba(255,255,255,0.04) 70%,
    rgba(255,255,255,0)    74%,
    rgba(0,0,0,0.15)       80%,
    rgba(0,0,0,0.45)       90%,
    rgba(0,0,0,0.62)       100%
  );
  z-index: 0;
}
.sub-hero--photo .sub-hero-inner {
  position: relative;
  z-index: 1;
  flex-direction: row;
  align-items: center;
  margin-top: 1rem;
}
.sub-hero--photo .sub-hero-title {
  text-align: left;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: #111111;
}
.sub-hero-claim {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
  white-space: nowrap;
}
.sub-hero-claim p {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: #ffffff;
  opacity: 0.92;
  line-height: 1.65;
  text-shadow: 0 2px 6px rgba(0,0,0,1), 0 4px 30px rgba(0,0,0,0.95), 0 0 80px rgba(0,0,0,0.85), 0 0 120px rgba(0,0,0,0.6);
  margin: 0 0 1.5rem 0;
}
.coming-soon-label {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: #ffffff;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0,0,0,0.65), 0 1px 4px rgba(0,0,0,0.4);
}
.sub-hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}
.sub-hero-logo {
  width: 215px;
  height: auto;
  flex-shrink: 0;
}
.sub-hero-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--heading);
  text-align: left;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 680px) {
  .sub-hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .sub-hero-title { text-align: center; }
  .sub-hero--photo .sub-hero-inner {
    flex-direction: column;
    align-items: center;
  }
  .sub-hero--photo .sub-hero-title {
    text-align: center;
  }
}

/* =============================================
   ABSCHNITT 1 – HERO
   ============================================= */
.section-hero {
  position: relative;
  background: url('hero-main.jpg') center center / cover no-repeat;
  text-align: center;
  padding-top: var(--header-h);
  padding-bottom: 5rem;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
/* Dunkles Overlay für Lesbarkeit */
.section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}


.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  margin-top: -3rem;
}

/* Screen-reader only – SEO H1 ohne visuelle Dopplung */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hero-logo {
  width: 260px;
  max-width: 80vw;
  height: auto;
  display: block;
  margin-inline: auto;
  filter: drop-shadow(0 6px 18px rgba(45,74,67,0.22));
  margin-bottom: -8rem;
}

.hero-by {
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin: 0;
}



/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: var(--fw-light);
  font-size: 1rem;
  border-radius: 999px;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-ghost {
  border: 1.5px solid rgba(255,255,255,0.8);
  color: #ffffff;
  background: transparent;
}
.btn-ghost:hover { background: rgba(255,255,255,0.15); }

.btn-primary {
  background: var(--mint);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(144,196,181,0.4);
  font-size: 1.05rem;
  padding: 0.9rem 2.5rem;
}
.btn-primary:hover {
  background: var(--mint-dark);
  box-shadow: 0 6px 28px rgba(107,169,154,0.45);
}
.btn-soft {
  background: rgba(144,196,181,0.18);
  border: 1.5px solid var(--mint);
  color: var(--mint-dark);
  font-size: 1.05rem;
  padding: 0.9rem 2.5rem;
}
.btn-soft:hover {
  background: var(--white);
  color: var(--heading);
  border-color: var(--mint);
  box-shadow: 0 4px 20px rgba(144,196,181,0.25);
}
.btn-on-tinted {
  background: var(--white);
  border: 1.5px solid var(--mint);
  color: var(--mint-dark);
  font-size: 1.05rem;
  padding: 0.85rem 2.5rem;
}
.btn-on-tinted:hover {
  background: var(--mint);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(144,196,181,0.35);
}


/* =============================================
   ABSCHNITT 3 – CARDS
   ============================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-icon {
  width: 48px;
  height: 48px;
  color: var(--mint);
  margin-bottom: 1rem;
}
.card-icon svg { width: 100%; height: 100%; }

.btn-lg {
  font-size: 1.05rem !important;
  padding: 0.85rem 2.5rem !important;
}
.btn-card-mehr {
  display: inline-block;
  margin-top: auto;
  font-size: 0.9rem;
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--mint);
  color: var(--mint-dark);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.btn-card-mehr:hover {
  background: var(--mint);
  color: #ffffff;
}


/* =============================================
   ABSCHNITT 4 – BENEFITS
   ============================================= */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 2rem 3rem;
}

.benefit-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.benefit-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.1rem;
}


/* =============================================
   ABSCHNITT 5 – CTA
   ============================================= */
.section-cta {
  background: linear-gradient(135deg, var(--mint-light) 0%, var(--lav-light) 100%);
  text-align: center;
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.cta-note {
  font-size: 0.8rem;
  color: var(--text);
  opacity: 0.6;
  margin: 0;
}


/* =============================================
   FOOTER
   ============================================= */
footer {
  background: var(--heading);
  color: rgba(255,255,255,0.75);
  padding-top: 3.5rem;
  padding-bottom: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr 0.6fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  align-items: center;
}

/* Alle Spalten zentriert */
.footer-col {
  text-align: center;
}

/* Spalte 1 – Logo + Slogan */
.footer-col-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.footer-logo {
  width: 220px;
  height: auto;
}
.footer-slogan {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  margin: 0;
}

/* Spalte 2 – Navigation */
.footer-col-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.footer-col-nav a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
  white-space: nowrap;
}
.footer-col-nav a:hover { color: var(--mint-light); }
.footer-link-green  { color: #90C4B5 !important; }
.footer-link-purple { color: #C8B5E5 !important; }
.footer-link-green:hover  { color: #b0d9ce !important; }
.footer-link-purple:hover { color: #ddd0f5 !important; }

/* Spalte 4 – Social + Legal */
.footer-col-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.footer-social-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: rgba(255,255,255,0.75);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.footer-social-link:hover {
  border-color: var(--mint-light);
  color: var(--mint-light);
  background: rgba(255,255,255,0.05);
}
.footer-social-link svg {
  width: 20px;
  height: 20px;
}
.footer-legal-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
}
.footer-legal-links a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.footer-legal-links a:hover { color: rgba(255,255,255,0.7); }

/* Trennlinie + Copyright */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.25rem 0;
}
.footer-copy {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

/* Mobile Footer */
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .footer-col-brand { align-items: center; }
  .footer-col-social { align-items: center; }
  .footer-legal-links { align-items: center; }
}

/* Email reveal button */
.reveal-email {
  background: none;
  border: 1px solid var(--mint-dark);
  color: var(--heading);
  font-family: var(--font);
  font-weight: var(--fw-light);
  font-size: 0.875rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  vertical-align: middle;
}
.reveal-email:hover { background: rgba(107,169,154,0.12); border-color: var(--mint); }
.reveal-email.revealed {
  border-color: transparent;
  padding: 0;
  background: none;
  color: var(--heading);
  cursor: text;
  user-select: text;
}
.reveal-email.revealed:hover { background: none; }

/* Eigene Legal-Seiten (impressum.html / datenschutz.html) */
.legal-page body { background: var(--bg); }

.legal-back {
  margin-left: auto;
  font-size: 0.875rem;
  padding: 0.45rem 1.25rem;
}

.legal-main {
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 5rem;
}

.legal-main h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.legal-main section {
  margin-bottom: 2.5rem;
}

.legal-main h2 {
  font-size: 1.1rem;
  color: var(--mint-dark);
  margin-bottom: 0.75rem;
}

.legal-main ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
.legal-main ul li { margin-bottom: 0.25rem; }

.legal-main a { color: var(--mint-dark); }
.legal-main a:hover { text-decoration: underline; }

/* E-Mail-Button helle Variante (Legal-Seiten) */
.reveal-email--light {
  border-color: var(--mint);
  color: var(--mint-dark);
  background: transparent;
}
.reveal-email--light:hover { background: var(--mint-light); }
.reveal-email--light.revealed {
  border-color: transparent;
  color: var(--mint-dark);
  background: none;
}


/* =============================================
   BACK TO TOP
   ============================================= */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--mint);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 99;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover { transform: translateY(-3px); background: var(--mint-dark); }


/* =============================================
   UNTERSEITEN – GEMEINSAME ELEMENTE
   ============================================= */

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.section-header h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--heading);
  margin-bottom: 0.5rem;
}
.section-sub {
  font-size: 1rem;
  color: var(--text);
  opacity: 0.75;
  margin: 0;
}

/* Lead Text */
.lead { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.25rem; }
.text-center { text-align: center; margin-bottom: 2rem; }

/* Info Box */
.info-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--mint-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 2rem;
}
.info-box-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--mint-dark);
}
.info-box-icon svg { width: 100%; height: 100%; }
.info-box h4 { color: var(--heading); margin-bottom: 0.4rem; font-size: 1rem; }
.info-box p { margin: 0; font-size: 0.95rem; }

/* Benefit Grid */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.benefit-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.benefit-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-tinted);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--mint-dark);
}
.benefit-icon svg { width: 20px; height: 20px; }
.benefit-card h3 { font-size: 1rem; color: var(--heading); margin-bottom: 0.4rem; }
.benefit-card p { font-size: 0.9rem; margin: 0; }

@media (max-width: 900px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .benefit-grid { grid-template-columns: 1fr; }
}

/* Steps */
.steps { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: var(--bg-tinted);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--heading);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-content h3 { font-size: 1rem; color: var(--heading); margin-bottom: 0.25rem; }
.step-content p { margin: 0; font-size: 0.95rem; }
.step-oils { font-size: 0.85rem !important; color: var(--mint-dark); margin-top: 0.25rem !important; }

/* Duration Box */
.duration-box {
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-top: 1rem;
}
.duration-icon {
  width: 40px;
  height: 40px;
  color: var(--mint-dark);
  margin: 0 auto 0.75rem;
}
.duration-icon svg { width: 100%; height: 100%; }
.duration-box h4 { color: var(--heading); margin-bottom: 0.5rem; font-size: 1.1rem; }
.duration-box p { margin: 0; }


/* Identify Grid – Pinboard Style */
.identify-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 0.5rem;
}
.identify-card {
  background: #ffffff;
  border-radius: 4px;
  padding: 1.75rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  box-shadow: 3px 4px 12px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
  position: relative;
}
.identify-card:nth-child(odd)  { transform: rotate(-1.5deg); }
.identify-card:nth-child(even) { transform: rotate(1.2deg); }
.identify-card:nth-child(3)    { transform: rotate(-0.8deg); }
.identify-card:nth-child(6)    { transform: rotate(0.6deg); }
.identify-card:hover { transform: rotate(0deg) scale(1.03); transition: transform 0.2s ease; z-index: 1; }
.identify-pin {
  width: 14px;
  height: 14px;
  background: var(--mint-dark);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.identify-card p {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 768px) {
  .identify-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .identify-grid { grid-template-columns: 1fr; }
  .identify-card:nth-child(n) { transform: none; }
}

/* Checklist Grid */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.25rem;
  font-size: 0.95rem;
}
.check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--mint-dark);
}

@media (max-width: 580px) {
  .checklist-grid { grid-template-columns: 1fr; }
}

/* Warning Box */
.warning-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--mint-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.warning-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--mint-dark);
}
.warning-icon svg { width: 100%; height: 100%; }
.warning-box h4 { color: var(--heading); margin-bottom: 0.4rem; font-size: 1rem; }
.warning-box p { margin: 0; font-size: 0.95rem; }

/* FAQ Accordion */
.faq { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  color: var(--heading);
  list-style: none;
  user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '›';
  font-size: 1.4rem;
  color: var(--mint-dark);
  transform: rotate(90deg);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.faq-item[open] .faq-question::after { transform: rotate(-90deg); }
.faq-answer {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.95rem;
  color: var(--text);
}
.faq-answer p { margin: 0; }

/* Oil Grid */
.oil-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.oil-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.oil-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: var(--mint);
}
.oil-card--highlight {
  border-color: var(--mint);
  background: var(--mint-light);
}
.oil-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius);
}
.oil-card-text { flex: 1; min-width: 0; }
.oil-card h3 { font-size: 1rem; color: var(--heading); margin-bottom: 0.2rem; font-weight: 600; }
.oil-tagline {
  font-size: 0.85rem;
  color: var(--mint-dark);
  font-style: italic;
  margin-bottom: 0.5rem;
}
.oil-card p:last-child { font-size: 0.88rem; margin: 0; }

@media (max-width: 900px) {
  .oil-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .oil-img { width: 64px; height: 64px; }
}

/* CTA Banner */
.section-cta {
  background: rgb(45, 74, 67);
  padding: 4rem 2rem;
  text-align: center;
  color: #fff;
}
.section-cta h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #fff;
  margin-bottom: 1rem;
}
.section-cta p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
  max-width: 540px;
  margin-inline: auto;
}
.cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-cta-white {
  background: #ffffff;
  color: var(--heading);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.btn-cta-white:hover { background: rgba(255,255,255,0.85); transform: translateY(-2px); }
.btn-cta-ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.6);
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.btn-cta-ghost:hover { border-color: #fff; transform: translateY(-2px); }


/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 500px) {
  .nav-phone-label { display: none; }
  .sub-hero-claim {
    white-space: normal;
    width: 90%;
    left: 5%;
    transform: none;
  }
  .sub-hero-claim p {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }
}

@media (max-width: 1300px) {
  .nav-toggle { display: flex; }

  /* Fullscreen Slide-in von links */
  .nav-mobile-menu {
    position: fixed;
    inset: 0;
    background: rgb(45, 74, 67);
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    overflow-y: auto;
  }
  .nav-mobile-menu.open {
    transform: translateX(0);
  }

  /* X-Button zum Schließen */
  .nav-close {
    display: flex;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    z-index: 201;
  }

  .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
    width: 100%;
  }
  .nav-links a::after { display: none; }
  .nav-links a {
    display: block;
    padding: 1.1rem 2rem;
    font-size: 1.2rem;
    text-align: center;
    color: #ffffff !important;
    width: 100%;
  }
  .nav-links a:hover { color: #ffffff !important; background: rgba(255,255,255,0.08); }
  #site-header.is-subpage .nav-links a:hover { color: #ffffff !important; }

  .nav-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    margin: 0;
    width: 100%;
  }
  .nav-btn {
    width: 240px;
    text-align: center;
    padding: 0.65rem 1rem;
    color: #fff !important;
  }
  .nav-btn-green  { background: rgba(144,196,181,0.3); border-color: #90C4B5; }
  .nav-btn-purple { background: rgba(200,181,229,0.3); border-color: #C8B5E5; }

  .back-to-top { bottom: 1.25rem; right: 1.25rem; }
}

@media (max-width: 400px) {
  .benefit-item { flex-direction: column; }
}

/* =============================================
   JOURNEY PATH – Ablauf der Behandlung
   ============================================= */
.journey-path {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  gap: 1rem;
  align-items: center;
  margin: 2rem 0;
}
.journey-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.journey-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--mint);
}
.journey-num {
  width: 34px;
  height: 34px;
  background: var(--mint);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 auto 0.85rem;
}
.journey-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.journey-card p { font-size: 0.9rem; margin: 0; }
.journey-card .step-oils { font-size: 0.82rem; color: var(--mint-dark); margin-top: 0.5rem; font-style: italic; }
.journey-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
}
.journey-bridge-empty { /* spacer */ }
.journey-duration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--text);
}
.journey-duration svg {
  width: 20px;
  height: 20px;
  color: var(--mint-dark);
  flex-shrink: 0;
}
.journey-bridge-down {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
  padding-block: 0.25rem;
}

@media (max-width: 640px) {
  .journey-path {
    grid-template-columns: 1fr;
  }
  .journey-path .journey-arrow,
  .journey-path .journey-bridge-empty,
  .journey-path .journey-bridge-down { display: none; }
  .journey-path > *:nth-child(1) { order: 1; }
  .journey-path > *:nth-child(3) { order: 2; }
  .journey-path > *:nth-child(9) { order: 3; }
  .journey-path > *:nth-child(7) { order: 4; }
}

/* =============================================
   KIT LIST – Alternating image/text rows
   ============================================= */
.kit-list {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin-top: 1rem;
}
.kit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.kit-list .kit-row + .kit-row {
  border-top: 1px solid var(--mint);
  padding-top: 5rem;
}
.kit-row--reverse .kit-img { order: 2; }
.kit-row--reverse .kit-text { order: 1; }
.kit-img {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  object-fit: contain;
  justify-self: center;
}
.kit-text h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 0.75rem; color: var(--heading); }
.kit-text p { margin-bottom: 0.5rem; line-height: 1.7; }
.kit-text .step-oils { font-size: 0.85rem; color: var(--mint-dark); font-style: italic; margin-top: 0.75rem; }

@media (max-width: 700px) {
  .kit-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .kit-row--reverse .kit-img,
  .kit-row--reverse .kit-text { order: unset; }
}

/* Kit Order Button */
.kit-order {
  display: inline-block;
  margin-top: 1.25rem;
}
.btn-order-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  border: 1.5px solid var(--mint);
  background: var(--white);
  color: var(--mint-dark);
  cursor: pointer;
  font-family: var(--font);
  font-weight: var(--fw-light);
  transition: background 0.2s, color 0.2s;
}
.btn-order-toggle:hover {
  background: var(--mint);
  color: var(--white);
}
.kit-order-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  font-style: normal;
}
.kit-order.is-open .kit-order-arrow { transform: rotate(180deg); }
.kit-order-countries {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
  animation: kitSlideDown 0.2s ease;
}
.kit-order-countries[hidden] { display: none; }
@keyframes kitSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kit-country-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: 0.9rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.kit-country-link:hover {
  background: var(--mint-light);
  border-color: var(--mint);
  color: var(--mint-dark);
}

/* =============================================
   BUSINESSPARTNER – Lila Farbschema
   ============================================= */
.page-business {
  --mint:      #C8B5E5;
  --mint-light:#EDE8F7;
  --mint-dark: #9B7FC0;
  --bg-tinted: #F0EAF9;
}