/* Startseite 3.0 (DE und EN): je Abschnitt eine Aussage, große Bilder, die beim
   Scrollen hereinkommen. Ergänzt landing-storytelling.css (Kopf, FAQ, Footer);
   alle eigenen Klassen tragen das Präfix l3-, damit nichts mit der alten
   Storytelling-Fassung kollidiert. Entwurf: docs/entwuerfe/landing-3-0/. */

.l3{--l3-rand:clamp(20px,5vw,64px);--l3-max:1180px;--l3-marke:#507659;--l3-tinte:#16182c;--l3-tinte-2:#5d5f70;background:#fffafa;overflow-x:clip}
.l3-abschnitt{padding:clamp(96px,14vw,180px) var(--l3-rand) 0;text-align:center}
.l3-text{max-width:var(--l3-max);margin:0 auto}
.l3-augenbraue{display:block;font:700 clamp(17px,1.8vw,22px)/1.2 Gabarito,Arial,sans-serif;color:var(--l3-marke);letter-spacing:-.01em;margin:0 0 10px}
.l3 h1,.l3 h2{font-family:Gabarito,Arial,sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1;text-wrap:balance;margin:0;color:var(--l3-tinte)}
.l3 h1{font-size:clamp(52px,10vw,128px)}
.l3 h2{font-size:clamp(40px,7vw,96px)}
.l3-zeile{max-width:32ch;margin:22px auto 0;font-size:clamp(19px,2vw,24px);line-height:1.35;color:var(--l3-tinte-2);text-wrap:balance}
.l3-zeile strong{display:block;color:var(--l3-tinte);font-weight:600;margin-bottom:4px}
.l3-klein{font-size:15px;color:var(--l3-tinte-2);margin:16px auto 0}
.l3-aktionen{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:32px}
.l3-aktionen .button{min-height:48px}
.l3-link{color:var(--l3-marke);font-weight:600;text-decoration:none}
.l3-link:hover{text-decoration:underline}

/* Bühne: großes Bild unter der Aussage */
.l3-buehne{max-width:var(--l3-max);margin:clamp(48px,7vw,88px) auto 0;position:relative}
.l3-foto{border-radius:clamp(20px,3vw,36px);overflow:hidden;aspect-ratio:3/2;margin:0}
.l3-foto img{display:block;width:100%;height:100%;object-fit:cover}

/* Telefon-Rahmen: nur Rundung und Rand, kein Geräte-Asset */
.l3-telefon{width:min(320px,72vw);margin:0 auto;border-radius:clamp(36px,9vw,54px);padding:clamp(7px,1.6vw,10px);background:#16182c;box-shadow:0 40px 80px -30px rgb(22 24 44 / 45%)}
.l3-telefon img{display:block;width:100%;height:auto;border-radius:clamp(29px,7.4vw,44px)}
.l3-paar{display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,4vw,48px)}
.l3-paar .l3-telefon{width:min(300px,42vw);margin:0}
.l3-paar .l3-telefon:nth-child(2){margin-bottom:clamp(24px,6vw,72px)}

/* Hero: Telefon vor dem Foto */
.l3-hero{padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(80px,12vw,140px)}
.l3-hero .l3-buehne{display:grid}
.l3-hero .l3-foto,.l3-hero .l3-telefon{grid-area:1/1}
.l3-hero .l3-foto{aspect-ratio:16/10}
.l3-hero .l3-telefon{align-self:end;margin-bottom:-14%;width:min(300px,52vw);position:relative;z-index:1}

/* Farben: waagrechte Reihe */
.l3-farben{display:flex;gap:clamp(12px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--l3-rand) 24px;margin:clamp(40px,6vw,72px) calc(-1 * var(--l3-rand)) 0;scrollbar-width:none;justify-content:safe center}
.l3-farben figure{flex:0 0 auto;scroll-snap-align:center;text-align:center;margin:0}
.l3-farben img{display:block;width:clamp(150px,15vw,190px);height:auto;border-radius:26px;box-shadow:0 20px 40px -24px rgb(22 24 44 / 40%)}
.l3-farben figcaption{margin-top:10px;font-size:14px;color:var(--l3-tinte-2)}

/* Board: breit, Tablet-Rahmen */
.l3-tafel{border-radius:clamp(18px,2.4vw,32px);padding:clamp(8px,1vw,14px);background:#16182c;box-shadow:0 40px 80px -30px rgb(22 24 44 / 45%)}
.l3-tafel img{display:block;width:100%;height:auto;border-radius:clamp(12px,1.6vw,20px)}

/* Privatsphäre: dunkler Abschnitt, drei kurze Fakten */
.l3-dunkel{background:#16182c;margin-top:clamp(96px,14vw,180px);padding-bottom:clamp(96px,14vw,180px)}
.l3-dunkel h2{color:#fffafa}
.l3-dunkel .l3-zeile{color:#b9bac8}
.l3-dunkel .l3-augenbraue{color:#a6d0ae}
.l3-dunkel .l3-foto{aspect-ratio:21/9}
.l3-dunkel .l3-telefon{box-shadow:0 0 0 1px rgb(255 255 255 / 18%),0 40px 80px -30px rgb(0 0 0 / 60%)}
.l3-fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);max-width:var(--l3-max);margin:clamp(48px,7vw,88px) auto 0;text-align:left}
.l3-fakten div{border-top:1px solid rgb(255 255 255 / 18%);padding-top:18px}
.l3-fakten b{display:block;font:700 clamp(22px,2.4vw,30px)/1.15 Gabarito,Arial,sans-serif;letter-spacing:-.02em;margin-bottom:8px;color:#fffafa}
.l3-fakten p{color:#b9bac8;font-size:16px;margin:0}
.l3-fakten a{color:#a6d0ae;font-weight:600}

/* Schluss */
.l3-schluss{padding-bottom:clamp(96px,14vw,180px)}
.l3-von-ben{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:44px;color:var(--l3-tinte-2);font-size:15px;text-align:left}
.l3-von-ben img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.l3-von-ben b{color:var(--l3-tinte)}

/* Helle Faktenreihe (auf weißem Grund) */
.l3-fakten-hell div{border-top-color:rgb(22 24 44 / 14%)}
.l3-fakten-hell b{color:var(--l3-tinte)}
.l3-fakten-hell p{color:var(--l3-tinte-2)}

@media (max-width:640px){
  .l3-fakten{grid-template-columns:1fr}
  .l3-hero .l3-telefon{margin-bottom:-24%}
  .l3-dunkel .l3-foto{aspect-ratio:4/3}
  .l3-farben{justify-content:flex-start}
}

/* Bewegung nur beim Scrollen und nur, wenn erwünscht. Ohne Scrollen steht
   alles still, keine Dauerbewegung. Browser ohne scroll-driven animations
   zeigen das Endbild. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .l3-rein{animation:l3-rein linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .l3-zoom img{animation:l3-zoom linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .l3-hoch{animation:l3-hoch linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  }
}
@keyframes l3-rein{from{opacity:0;transform:translateY(48px) scale(.96)}to{opacity:1;transform:none}}
@keyframes l3-zoom{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes l3-hoch{from{transform:translateY(90px)}to{transform:none}}