:root {
  --spot-green: 57, 95, 61;
}


/* 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 */

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

/* Standard: Button verstecken (nur auf Mobile anzeigen) */
.nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(67,106,63);          /* dunkles Grün, leicht transparent */
  color:#fff;
  font-family:Jost,Inter,sans-serif;
  font-size:var(--fs-16);
}

/* kleines Hamburger-Icon */
.nav-toggle-icon{
  width:18px;
  height:14px;
  position:relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#fff;
  border-radius:999px;
}
.nav-toggle-icon::before{ top:0; }
.nav-toggle-icon::after{ bottom:0; }

/* Mobile Layout */
@media (max-width: 900px){
  .site-header{
    padding:12px 16px;
  }

  /* Brand links, Button rechts */
  .site-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .nav-toggle{
    display:inline-flex;
  }

  /* Navigation als Dropdown unter dem Header */
  .site-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    transform:none;
    display:none;                 /* Standard: versteckt */
    flex-direction:column;
    gap:16px;
    padding:16px 20px 20px;
    background:rgba(6,30,11,.96); /* dunkle Fläche */
  }

  .site-nav a{
    font-size:var(--fs-20);
  }

  /* sichtbar wenn geöffnet */
  .site-nav.is-open{
    display:flex;
  }
}

.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; }

/* auf Handy braucht es die Promo card nicht */
@media (max-width:560px){
  .promo-card{
    display: none !important;}
}

/* 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; }

@media (max-width: 560px){
  .section-intro{ padding-top:64px; padding-bottom:16px; }
}


/* 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; }

/* Vision-Card auf Tablets schmaler machen */
@media (max-width: 900px){
  .vision-card{
    padding:48px 32px;   /* weniger links/rechts */
    border-radius:40px;  /* optional etwas kleiner, wirkt kompakter */
  }
}

/* Vision-Card auf kleinen Handys noch schmaler */
@media (max-width: 560px){
  .vision-card{
    padding:40px 20px;   /* sehr angenehme Breite auf ~430px */
  }
}

@media (max-width: 560px){
  .vision{ padding:16px 0; }
}


/* 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; }
  }*/

/* Responsive */
@media (max-width:1200px){
  .faq-grid{ 
    grid-template-columns:repeat(9,1fr); 
  }
  .faq .card, 
  .faq .card.wide{ 
    grid-column:span 3; 
  }
}

/* Tablet & Smartphones: 2 Spalten */
@media (max-width:900px){
  .faq-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
  }

  /* "wide" Karten sind auf Mobile nicht mehr breiter */
  .faq .card,
  .faq .card.wide{
    grid-column:auto;
    aspect-ratio:auto;        /* NEU: Höhe passt sich dem Text an */
  }
}

/* Kleine Smartphones – Feintuning */
@media (max-width:600px){
  .faq-grid{
    gap:16px;
  }

  .faq .card{
    padding:20px;            /* etwas kompakter */
  }

  .faq .card h3{
    font-size:1.1rem;        /* klein bisschen kleiner, damit zwei Karten gut passen */
  }

  .faq { padding:48px 0 24px;}
}



/* 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; }
}

@media (max-width:600px){
  .contact{ padding:48px 0 48px; }
}

/* 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; }
}


@media (max-width: 900px){
  .about-intro .container{
    padding-left: 16px;
    padding-right: 16px;
  }

  .about-intro h1,
  .about-intro h2,
  .about-intro p{
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: left;   /* Optional – viel besser lesbar */
  }
}

@media (max-width: 900px){
  /* Große Headlines behalten */
  .about-intro h1{
    font-size: 4.2rem;    /* ca. 48px */
    line-height: 1.05;
  }

  .about-intro h2{
    font-size: 3.0rem;  /* ca. 35px */
    line-height: 1.1;
  }
}


/* Optional für sehr kleine Handys */
@media (max-width: 600px){
  .about-intro {padding: 48px 0 32px; }
  .about-intro p{
    font-size: 1rem;
    line-height: 1.5;
  }
}


/* 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); }



/* Mobile-Layout für Ablauf / Steps */
@media (max-width: 900px){
  /* Alle Bubbles einfach untereinander */
  .flow-steps{ padding:32px 0px 32px; }
  #ablauf .steps,
  #ablauf .steps-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #ablauf .step{
    grid-column: auto;
    padding: 16px 16px 16px 44px;   /* links Platz für die Nummer */
    border-radius: 20px;
    position: relative;
    display: block;
  }

  /* Icons am Handy ausblenden */
  #ablauf .step-icon{
    display: none;
  }

  /* Text schön linksbündig */
  #ablauf .step-content{
    text-align: left;
  }

  #ablauf .step-content h3{
    margin: 0 0 6px;
    font-size: 1.2rem;
  }

  #ablauf .step-content p{
    margin: 0;
    line-height: 1.4;
  }

  /* 7 verschiedene Grüntöne für die Bubbles */
  #ablauf .step:nth-child(1){ background: rgba(var(--spot-green), 0.3); }
  #ablauf .step:nth-child(2){ background: rgba(var(--spot-green), 0.4); }
  #ablauf .step:nth-child(3){ background: rgba(var(--spot-green), 0.5); }
  #ablauf .step:nth-child(4){ background: rgba(var(--spot-green), 0.6); }
  #ablauf .step:nth-child(5){ background: rgba(var(--spot-green), 0.7); }
  #ablauf .step:nth-child(6){ background: rgba(var(--spot-green), 0.8); }
  #ablauf .step:nth-child(7){ background: rgba(var(--spot-green), 0.9);    }

  /* Nummerierung 1.–7. statt Icon */
  #ablauf .step::before{
    position: absolute;
    top: 16px;
    left: 16px;
    font-weight: 600;
    font-size: 1rem;
  }
  #ablauf .step:nth-child(1)::before{ content:"1."; }
  #ablauf .step:nth-child(2)::before{ content:"2."; }
  #ablauf .step:nth-child(3)::before{ content:"3."; }
  #ablauf .step:nth-child(4)::before{ content:"4."; }
  #ablauf .step:nth-child(5)::before{ content:"5."; }
  #ablauf .step:nth-child(6)::before{ content:"6."; }
  #ablauf .step:nth-child(7)::before{ content:"7."; }
}

/* Extra kompakt für sehr kleine Smartphones */
@media (max-width: 600px){
  #ablauf .step{
    padding: 14px 14px 14px 40px;
  }

  #ablauf .step-content h3{
    font-size: 1.1rem;
  }

  #ablauf .step-content p{
    font-size: 0.95rem;
  }
}


.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 */

/* Datenschutzinfos – Mobile Layout: Titel → Bubble → Titel → Bubble … */
@media (max-width: 900px){

  .privacy-info{
    padding:40px 0;
  }

  /* 1-spaltiges Grid */
  .pd-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    row-gap:28px;
    align-items:stretch;
  }

  /* Alle direkten Kinder voll breit */
  .pd-grid > *{
    grid-column:1;
  }

  .pd-title-left,
  .pd-title-right{
    text-align:left;
    margin:0;
  }

  .pd-bubble-left,
  .pd-bubble-right{
    margin-left:0;
    margin-right:0;
  }

  /* Bubbles auf Mobile als einfache Box,
     Text füllt die ganze Breite */
  .pd-bubble{
    display:block;
    padding:16px 16px;
    border-radius:16px;
    background:#85A183; /* äussere grüne Fläche */
    box-shadow:0 10px 28px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5);
  }

  /* Innerer Block: Hintergrund aufheben, damit der Text
     die Bubble als Ganzes füllt */
  .pd-inner{
    background:transparent;
    border-radius:0;
    padding:0;
    font-size:1rem;
    line-height:1.5;
  }

  /* 🔑 Reihenfolge fixen (Titel → Bubble → Titel → Bubble …) */

  /* Row 1 */
  .pd-grid > :nth-child(1){ grid-row:1; } /* Titel 1 */
  .pd-grid > :nth-child(2){ grid-row:2; } /* Bubble 1 */

  /* Row 2 */
  .pd-grid > :nth-child(4){ grid-row:3; } /* Titel 2 */
  .pd-grid > :nth-child(3){ grid-row:4; } /* Bubble 2 */

  /* Row 3 */
  .pd-grid > :nth-child(5){ grid-row:5; } /* Titel 3 */
  .pd-grid > :nth-child(6){ grid-row:6; } /* Bubble 3 */

  /* Row 4 */
  .pd-grid > :nth-child(8){ grid-row:7; } /* Titel 4 */
  .pd-grid > :nth-child(7){ grid-row:8; } /* Bubble 4 */
}




/* 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; }
}