/* Header: transparent über Hero */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 40px;
  color:#fff;
  background: transparent;      /* Y wird per JS gesetzt */
}

.site-header.scrolled{
  background-image: none; /* Bild per JS setzen */
}

.site-header .brand{
  font-family:Jost,Inter,sans-serif; font-weight:800;
  font-size:var(--fs-48); line-height:1; color:#fff;
}
.site-nav{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:32px;
}
.site-header a{
  color:#fff; font-family:Jost,Inter,sans-serif; font-weight:400;
  font-size:var(--fs-20);
}
.site-header a:hover{ opacity:.9; }
/* Hero mit Overlay */
.hero {
  position: relative;
  height: 60vh;           /* ca. halbe Bildschirmhöhe */
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%; /* Fokuspunkt beibehalten */
}
.hero::after{
  /* Overlay: adds a top-to-bottom gradient for better text readability over the hero image */
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.08) 55%, transparent);
}
.hero h1{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  color:#fff; font-family:Jost,Inter,sans-serif; font-weight:800;
  font-size:var(--fs-64); line-height:1.05; margin:0; text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* Sektionen */
section{ padding:var(--space-12) 0; }
section h2{
  text-align:center; margin-bottom:var(--space-6);
  font-family:Jost,Inter,sans-serif; font-weight:700; font-size:var(--fs-32); line-height:1.2; color:var(--text);
}

/* === Intro-Section unter dem Hero === */
.section-intro{ padding-top:64px; padding-bottom:64px; }
.intro-grid{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:64px; align-items:center;
}
.display{
  font-family:Jost,Inter,sans-serif; font-weight:800;
  font-size:clamp(2.2rem,1.3rem + 2.5vw,4rem);
  line-height:1.1; color:var(--text); margin:0 0 var(--space-4);
  text-align:left;
}
.tagline{ color:var(--text-alt); margin:0 0 var(--space-6); }

/* Button mittig unter der Überschrift */
.intro-cta{
  display:flex;
  justify-content:center;
  margin-top:var(--space-6);
}

.promo-card{
  background:linear-gradient(180deg,#f7faf7,#f3f5f3);
  border:1px solid var(--border);
  border-radius:24px;
  padding:40px;
  min-height:220px;
  display:flex; align-items:center; justify-content:center;
}
.promo-card img{ max-width:280px; height:auto; }

/* Reihe 2 */
.feature-grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:64px; align-items:start; margin-top:64px;
}
.rounded-xl{ border-radius:24px; overflow:hidden; }
.welcome-title{
  font-family:Jost,Inter,sans-serif; font-weight:700;
  font-size:clamp(1.6rem, 0.9rem + 1.4vw, 2.4rem);
  line-height:1.2; color:var(--text); margin:0 0 var(--space-4);
}
.welcome-text{ font-size:var(--fs-20); color:var(--text); margin:0; }

/* Visionboard */
.vision{ padding:96px 0; }
.vision-card{
  background:var(--surface-tint);
  border-radius:64px;
  padding:72px 80px;
  margin:0 auto;
  text-align:center;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
}
.vision-title{
  font-family:Jost,Inter,sans-serif; font-weight:800;
  font-size:clamp(2.2rem,1.3rem + 2.5vw,4rem);
  line-height:1.2; color:var(--text);
  margin:0 0 var(--space-6);
}
.vision-card p{ font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.25rem); /* ~17–20px */
  line-height: 1.65;
  margin: 0 0 1.25rem;
  color: var(--text); }
.vision-cta{ margin-top:clamp(24px,4vw,48px); display:flex; justify-content:center; }


/* FAQ – grüner Hintergrund, grosses Heading */
.faq{ background:var(--brand); padding:72px 0 96px; }
.faq-header{ text-align:center; margin-bottom:40px; }
.faq-header h2{
  color:#fff; font-family:Jost,Inter,sans-serif; font-weight:800;
  font-size:clamp(2.4rem,1.3rem + 3vw,4rem); line-height:1.1; margin:0;
}

/* Grid: 12 Spalten => oben 4x3, unten 3x4 */
.faq-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:28px;
}
.faq .card{ grid-column:span 3; }      /* Standard: 3 Spalten */
.faq .card.wide{ grid-column:span 4; } /* Unten: 4 Spalten */

.faq .card,
.faq .card.wide{
  aspect-ratio: 1 / 1;   /* Höhe = Breite */
}


/* Responsive */
@media (max-width:1200px){
  .faq-grid{ grid-template-columns:repeat(9,1fr); }
  .faq .card, .faq .card.wide{ grid-column:span 3; } /* 3 Spalten */
}
@media (max-width:900px){
  .faq-grid{ grid-template-columns:repeat(2,1fr); }
  .faq .card, .faq .card.wide{ grid-column:span 1; }
}
@media (max-width:560px){
  .faq-grid{ grid-template-columns:1fr; }
}
/* Karten-Style in der FAQ */
.faq .card{
  background:#e9ece9;         /* leichtes Grau wie im Entwurf */
  border:0;
  border-radius:24px;
  padding:24px;
  box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
}
.faq .card h3{
  margin:0 0 10px;
  font-family:Jost,Inter,sans-serif; font-weight:700; font-size:1.25rem; color:var(--text);
}
.faq .card p{ margin:0; color:var(--text); }
.faq .card p + p{ margin-top:12px; }


/* CTA in einer Karte */
.faq .faq-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:0 22px;
  line-height:1;
  border-radius:28px;
  font-weight:700;
  font-size:1.05rem;
}

.faq .card.center-cta{ justify-content:center; align-items:center; text-align:center; }



/* Kontakt (oben 2 Spalten, unten Karte vollbreit) */
.contact{ padding:120px 0 48px; }
.contact-grid{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:64px; align-items:start;
}
.contact-logo{ max-width:420px; margin:0 auto; } /* gleiche Karte, definierte Breite */
@media (max-width:900px){ .contact-logo{ max-width:320px; } }

.contact .contact-title{
  text-align:left;
  margin:0 0 24px;
}

.contact-title{
  font-family:Jost,Inter,sans-serif; font-weight:800;
  font-size:clamp(1.8rem,1rem + 1.6vw,2.4rem); margin:0 0 16px;
}
.contact-info p{ margin:0 0 12px; }

/* Karte vollbreit mit Überschrift links oben */
.map-bleed{
  position:relative;
  margin:96px calc(50% - 50vw) 0;   /* bricht aus dem Container aus */
}
.map-bleed img{ width:100vw; max-width:100%; display:block; }
.map-caption{
  position:absolute; left:24px; top:16px;
  font-family:Jost,Inter,sans-serif; font-weight:800;
  font-size:clamp(1.6rem,1rem + 1.2vw,2.2rem);
  color:var(--text);
  text-shadow:0 2px 8px rgba(255,255,255,.5);
}

/* Responsive */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .contact-logo img{ max-width:200px; }
}

/* Bottom Bar */
.bottom-bar{ background:#e9ece9; padding:48px 0 0; }
.bottom-grid{
  display:grid; grid-template-columns:1.2fr repeat(4,1fr);
  gap:40px; align-items:start;
}
.footer-logo{ max-width:420px; }
.footer-logo img{ max-width:220px; width:100%; height:auto; }

.footer-col ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.footer-title{
  font-family:Jost,Inter,sans-serif; font-weight:700; font-size:1.125rem;
  border-bottom:2px solid var(--text); padding-bottom:4px; width:max-content;
}
.bottom-bar a{ color:var(--text); }

/* Subfooter-Zeile */
.subfooter{ border-top:1px solid var(--border); margin-top:40px; }
.subfooter-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-size:var(--fs-14); }
.brand-sm{ font-family:Jost,Inter,sans-serif; font-weight:700; }
.legal{ display:flex; gap:20px; }

/* Responsive */
@media (max-width:900px){
  .bottom-grid{ grid-template-columns:1fr 1fr; }
  .footer-logo{ grid-column:1/-1; justify-self:center; }
}

/* Anker-Ziel nicht unter der fixen Navbar verstecken */
section{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* About-Intro (zweispaltiges, versetztes Layout wie im Entwurf) */
.about-intro{ padding:96px 0 72px; }
.about-intro h2{ text-align:left; } /* überschreibt globales center */

/*/* Grid: 12 Spalten => oben 4x3, unten 3x4 
.faq-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:28px;
}
.faq .card{ grid-column:span 3; }      /* Standard: 3 Spalten 
.faq .card.wide{ grid-column:span 4; } Unten: 4 Spalten 

.faq .card,
.faq .card.wide{
  aspect-ratio: 1 / 1;   Höhe = Breite 
}*/

.ai-grid{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: 28px;
  align-items:start;
  row-gap: 40px;
}

.ai-title{
  font-family:Jost,Inter,sans-serif;
  font-weight:800;
  line-height:1.05;
  font-size: clamp(4.8rem, 1.2rem + 3.2vw, 6rem); /* gross wie im SVG */
  color: var(--text);
  margin:0;
}
.ai-title-left{ grid-column:1 /span 4; }
.ai-text-right{ grid-column:5 /span 8; }
.ai-text-right2{ grid-column:1 /span 12; }

.ai-text{ font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.2rem); line-height:1.7; color:var(--text); }
.ai-text p{ margin:0 0 1rem; }
.ai-bullets{ margin:0 0 1rem 1.1em; padding:0; }
.ai-bullets li{ margin:0 0 .35rem; }

.ai-text-left{ grid-column:1 / span 6; }

.ai-title-right{ grid-column:7 / span 6; }


/* responsive Anpassungen */
@media (max-width: 980px){
  .ai-grid{ grid-template-columns:1fr; gap:28px; }
  .ai-title-left, .ai-title-right,
  .ai-text-left, .ai-text-right, .ai-text-right2{ grid-column:1; }
}

/* Ablauf: Banner */
.flow-banner{
  margin:0 calc(50% - 50vw);
  background:#395f3d;           /* grün aus dem Banner */
  color:#fff;
  height: clamp(160px, 13.23vw, 254px);
  display:flex;
  padding:0;
  align-items:center;
}
.flow-title{
  font-family:Jost,Inter,sans-serif;
  font-weight:800;
  font-size:clamp(2.4rem, 1.2rem + 3.2vw, 5.2rem);
  margin:0;
  text-align:center;
}

/* Ablauf: Bubbles im 12-Spalten-Grid */
.flow-steps{ padding:72px 0 40px; }
.steps-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:28px;
}

/* Jede Bubble mittig: 8 Spalten (3–10) */
.step{ grid-column:3 / span 8; }

.step.step-1{grid-column:1/ span 9;}
.step.step-2{grid-column:2/ span 9;}
.step.step-3{grid-column:3/ span 9;}
.step.step-4{grid-column:2/ span 9;}
.step.step-5{grid-column:1/ span 9;}
.step.step-6{grid-column:2/ span 9;}
.step.step-7{grid-column:3/ span 9;}

.step{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:18px;
  padding:18px 24px;
  border-radius:9999px;
  background:#85A183;
  box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.step-icon{
  width:52px; height:52px;
  display:grid; place-items:center;
  background:#f2f4f1;
  border:2px solid #dfe5df;
  border-radius:50%;
  font-size:24px;
}
.step-body h3{
  margin:0 0 4px;
  font-weight:700;
  font-size:1.1rem;
  color:var(--text);
}
.step-body p{ margin:0; line-height:1.55; color:var(--text); }

/* Responsive */
@media (max-width:1100px){
  .step{ grid-column:2 / span 10; }
}
@media (max-width:800px){
  .steps-grid{ grid-template-columns:repeat(6,1fr); }
  .step{ grid-column:1 / -1; }
  .step{ grid-template-columns:1fr; text-align:left; }
  .step-icon{ margin:0 auto 6px; }
}

.privacy{ padding-top:0; } 

/* Datenschutz: Bild-Banner, gleich hoch wie Ablauf-Banner */
.privacy-banner{
  margin:0 calc(50% - 50vw);
  background:url("../img/forrest.jpg") center/cover no-repeat;
  padding:56px 0;                 /* gleich wie .flow-banner */
  position:relative;
}
.privacy-banner::after{           /* leichte Abdunklung fürs Lesen */
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.25) 55%, rgba(0,0,0,.35));
}
.privacy-banner .container{ position:relative; z-index:1; }

.privacy-title{
  font-family:Jost,Inter,sans-serif; font-weight:800;
  font-size:clamp(2.4rem, 1.2rem + 3.2vw, 5.2rem); /* wie Ablauf */
  color:#fff; text-align:center; margin:0;
}
.privacy-sub{ margin:8px 0 0;
  text-align:center;
  font-family:Inter, system-ui, sans-serif;
  font-weight:600;
  font-size:clamp(1rem, .7rem + .6vw, 1.25rem);
  line-height:1.3;
  color:#fff;
  opacity:.95;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* ---------- Datenschutzinfos (12-Spalten) ---------- */
.privacy-info{ padding:72px 0; }
.pd-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:28px;
  row-gap:48px;
  align-items:center;
}

/* Masken-Titel mit Bildfüllung */
.mask-title{
  --mask-img:url("../img/personinforrest.jpg");
  font-family:Jost,Inter,sans-serif;
  font-weight:800;
  line-height:1.1;
  font-size:clamp(2rem, 0.8rem + 2.6vw, 3.2rem);
  margin:0;
  color:transparent;
  background-image:var(--mask-img);
  background-size:cover;
  background-position:center;
  -webkit-background-clip:text;
          background-clip:text;
}

/* Positionen im 12-Spalten-Raster */
.pd-title-left { grid-column:1 / span 4; text-align:left; }
.pd-bubble-right{ grid-column:5 / span 8; }

.pd-bubble-left { grid-column:1 / span 8; }
.pd-title-right { grid-column:9 / span 4; text-align:left; }

/* Bubbles */
.pd-bubble{
  /* eigene 12 Spalten, damit der Innenblock per grid-column gesetzt werden kann */
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));

  background:#85A183;
  border-radius:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5);
  padding:calc(20px * 1.75) 32px; /* 25%+ höher als vorher */
  color:var(--text);
}

/* Innen-Panel */
.pd-inner{
  background:#BECFBC;            /* dein helles Grün */
  border-radius:16px;
  padding:calc(18px * 1.75) 24px; /* 25%+ höher */
  line-height:1.6;
  font-size:clamp(1rem, .9rem + .3vw, 1.125rem);
  color:var(--text);
  grid-column:1 / -1;            /* Default: volle Breite der Bubble */
}

/* Bubbles bis an den jeweiligen Seitenrand – NUR die grüne Hülle */
.pd-bubble-right{ margin-right: calc(50% - 50vw); }
.pd-bubble-left { margin-left:  calc(50% - 50vw); }

/* Innenbreite per Grid festlegen: läuft NICHT bis an den Rand */
.pd-bubble-right .pd-inner{ grid-column: 1 / span 6; } /* rechts: mittig platziert */
.pd-bubble-left  .pd-inner{ grid-column: 8 / span 6; } /* links: linke Hälfte */

/* auf schmalen Screens wieder normal, damit nix abschneidet */
@media (max-width: 980px){
  .pd-bubble-right,
  .pd-bubble-left{ margin-left:0; margin-right:0; }

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

  .pd-title-left,
  .pd-title-right,
  .pd-bubble-left,
  .pd-bubble-right{ grid-column:1; }

  .pd-bubble-right .pd-inner,
  .pd-bubble-left  .pd-inner{ grid-column:1 / -1; }
}


/* Responsiv */
@media (max-width: 1100px){
  .intro-grid, .feature-grid{ gap:40px; }
}
@media (max-width: 900px){
  .site-header .brand{ font-size:var(--fs-32); }
  .site-header a{ font-size:var(--fs-20); }
  .intro-grid, .feature-grid{ grid-template-columns:1fr; gap:32px; }
  .promo-card{ padding:24px; min-height:auto; }
  .band h2{ text-align:center; }
}
@media (max-width: 560px){
  .faq-grid{ grid-template-columns:1fr; }
  .site-header .brand{ font-size:var(--fs-20); }
  .site-header a{ font-size:var(--fs-20); }
}
/* Kleiner auf sehr schmalen Screens */
@media (max-width:560px){
  .cta-lg{ width:90vw; max-width:345px; height:72px; font-size:1.25rem; }
}