/* ============================================================
   atem.liebe.kraft · Look "leicht" fuer das Portal
   Founder 24.10.2026: "stelle das portal ... auf das neue design um".
   Dieselbe Sprache wie Reels, Stories und Karussells seit 18.10.:
   Poppins durchgehend, Creme und Sand, gerade Linie mit Bernstein-Punkt,
   Naturfotos (Meer und Gruen) unter dunklem Verlauf, helle Flaechen.
   Wirkt NUR mit <html class="leicht"> (gesetzt vom Kopfskript der Seite).
   Zurueck zum alten Look: ?design=alt in der Adresse.
   Texte bleiben unveraendert; hier aendert sich nur das Aussehen.
   ============================================================ */

html.leicht{
  /* Bestehende Tokens umgedeutet: dunkel = Tinte, Akzent = Sand und Bernstein */
  --green-deep:#1f2a1c; --green:#8a5f1d; --sage:#c9a465; --sage-light:#ecd9b0;
  --cream:#FBF7EC; --ink:#1c2418; --muted:#6b6354;
  --shadow:0 16px 44px rgba(70,50,18,.12); --shadow-soft:0 8px 26px rgba(70,50,18,.08);
  --glass:#fffdf7; --glass-border:rgba(201,164,101,.30); --glass-opak:#fdf9f0;
  /* Neue Marken-Tokens (aus build-leicht.js und story-template) */
  --l-creme:#FBF7EC; --l-sand:#EBCB8F; --l-amber:#F2A93B; --l-amber-dunkel:#C8741C;
  --l-akzent:#9a6a1e; --l-tinte:10,18,8; --l-papier:#F5EEDF;
  --l-punkt:radial-gradient(circle at 38% 32%,#FFE7B0 0%,#F2A93B 45%,#C8741C 100%);
}
html.leicht body{background:var(--l-creme); color:var(--ink)}
html.leicht ::selection{background:var(--l-sand); color:var(--ink)}

/* ---------- Schrift: keine Schreibschrift mehr ---------- */
/* a) Kicker und Begruessungen: kleine Versalien mit Linie und Bernstein-Punkt davor */
html.leicht .kicker,
html.leicht .section-kicker,
html.leicht .up-kicker,
html.leicht .check-greet,
html.leicht .anchor-lead{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:12.5px; line-height:1.4;
  letter-spacing:.22em; text-transform:uppercase; color:var(--l-akzent); text-shadow:none;
}
html.leicht .kicker::before,
html.leicht .section-kicker::before,
html.leicht .check-greet::before{
  content:''; display:inline-block; vertical-align:middle; width:30px; height:9px; margin:-2px 10px 0 0;
  background:
    radial-gradient(circle at calc(100% - 4.5px) 50%, #F2A93B 0 3.6px, transparent 4.4px),
    linear-gradient(currentColor,currentColor) left center/calc(100% - 6px) 1.6px no-repeat;
  opacity:.95;
}
/* b) Unterschriften, Slogans, Zitate: ruhige Poppins statt Schreibschrift */
html.leicht .hero-slogan,
html.leicht .will-sig,
html.leicht .foot-slogan,
html.leicht .danke-slogan,
html.leicht .outro-script{
  font-family:'Poppins',sans-serif; font-weight:500; letter-spacing:.01em; text-shadow:none;
}
html.leicht .hero-slogan{font-size:clamp(15px,2vw,18px); color:var(--l-sand); letter-spacing:.06em; margin-top:14px}
html.leicht .will-sig{font-size:20px; color:var(--ink); font-weight:600}
html.leicht footer .foot-slogan,
html.leicht .app-foot .foot-slogan{font-size:13px; color:var(--muted); font-weight:500; letter-spacing:.04em}
html.leicht .danke-slogan,
html.leicht .outro-script{font-size:19px; color:var(--l-akzent)}
html.leicht .imp-text{font-family:'Poppins',sans-serif; font-size:19px; font-weight:400; line-height:1.55; color:var(--ink)}
html.leicht .day-reflexion{font-family:'Poppins',sans-serif; font-size:16px; font-weight:400; line-height:1.6}
/* c) Ziffern wie in den Karussells: Umrissziffer in Sand */
html.leicht .step .num,
html.leicht .pfad-schritt .pfad-num{
  font-family:'Poppins',sans-serif; font-weight:700; color:transparent;
  -webkit-text-stroke:1.4px var(--sage); font-size:30px; line-height:1;
}
html.leicht .pfad-schritt .pfad-num{font-size:24px}
/* d) Wortmarke */
html.leicht .wordmark{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:18px; letter-spacing:.02em; color:var(--ink);
}
html.leicht .wordmark .logo-img{box-shadow:0 2px 8px rgba(70,50,18,.18)}
html.leicht .nav .wordmark .logo-img{width:36px; height:36px}
html.leicht .brand-stack .slogan{color:var(--muted)}
html.leicht footer .wordmark{font-size:20px}
@media(max-width:430px){
  html.leicht .wordmark{font-size:15.5px; gap:6px}
  html.leicht .nav .wordmark .logo-img{width:30px; height:30px}
}

/* ---------- Kopfzeilen ---------- */
html.leicht .nav,
html.leicht .topbar{
  background:rgba(251,247,236,.9); border-bottom:1px solid rgba(201,164,101,.22);
}

/* ---------- Knoepfe ---------- */
html.leicht .btn{font-weight:600; letter-spacing:.01em}
html.leicht .btn-pri{
  background:linear-gradient(180deg,#F7C064 0%,#EBA03A 100%); color:#2a1a05;
  box-shadow:0 8px 22px rgba(200,116,28,.26);
}
html.leicht .btn-pri:hover{background:linear-gradient(180deg,#FACB78 0%,#F0AC4C 100%); color:#2a1a05;
  box-shadow:0 12px 28px rgba(200,116,28,.32)}
html.leicht .btn-sec{background:rgba(255,253,247,.85); color:var(--ink); border:1.5px solid rgba(28,36,24,.28)}
html.leicht .btn-sec:hover{background:#fff; border-color:rgba(28,36,24,.5)}
html.leicht .btn-ghost{color:var(--ink)}

/* ---------- Karten: helles Papier statt Gruen-Glas ---------- */
html.leicht .glass,
html.leicht .lib-card{
  background:#fffdf7; border:1px solid rgba(201,164,101,.28);
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:var(--shadow-soft);
}
html.leicht .page-title,
html.leicht .section-head h2,
html.leicht .will-body h2,
html.leicht .bottom-cta h2{color:var(--ink); letter-spacing:-.2px}
html.leicht label{color:var(--ink)}
html.leicht input[type=text],html.leicht input[type=email],html.leicht input[type=password],
html.leicht .note-field textarea{background:#fff; border:1px solid rgba(201,164,101,.45)}
html.leicht input:focus,html.leicht .note-field textarea:focus{border-color:var(--l-amber); box-shadow:0 0 0 3px rgba(242,169,59,.22)}
html.leicht .form-msg.ok{background:#f3ead3; color:var(--ink)}

/* ---------- Startseite: Fotobuehne wie die Reels ---------- */
/* Desktop: Text links auf Tinte, Thomas am Strand rechts (Hochformat-Foto in voller Hoehe) */
html.leicht .hero{
  min-height:min(86vh,820px); display:flex; flex-direction:column; justify-content:center;
  padding:90px 22px 120px; text-align:left;
  background:#0d160b;
}
/* Das Foto liegt rechts und laeuft weich in die Tinte aus (keine harte Kante) */
html.leicht .hero::before{
  content:''; position:absolute; top:0; right:0; bottom:0; width:60%; z-index:0;
  background:url('../img/leicht/thomas-strand-1200.jpg') center 40%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 18%,#000 42%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 18%,#000 42%);
}
html.leicht .hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:30%; z-index:0;
  background:linear-gradient(180deg,rgba(13,22,11,0),rgba(13,22,11,.55));
}
html.leicht .hero-inner{max-width:560px; margin:0 0 0 max(0px,calc(50% - 540px))}
html.leicht .hero .cta-row{justify-content:flex-start}
html.leicht .hero h1::after{margin-left:0 !important}
/* Handy: Foto oben (Thomas sichtbar), Text darunter auf Tinte */
@media(max-width:760px){
  html.leicht .hero{
    min-height:0; justify-content:flex-start; text-align:center; padding:318px 20px 58px;
    background-color:#0d160b;
    background-image:
      linear-gradient(180deg,rgba(13,22,11,.28) 0%,rgba(13,22,11,0) 18%,rgba(13,22,11,0) 46%,rgba(13,22,11,.85) 66%,#0d160b 78%),
      url('../img/leicht/thomas-strand-700.jpg');
    background-size:auto,100% auto; background-position:0 0,center -70px; background-repeat:no-repeat;
  }
  html.leicht .hero::before,
  html.leicht .hero::after{display:none}
  html.leicht .hero-inner{margin:0 auto}
  html.leicht .hero .cta-row{justify-content:center}
  html.leicht .hero h1::after{margin-left:auto !important}
}
html.leicht .hero-sprig,
html.leicht .hero-portrait{display:none}
html.leicht .hero .kicker{color:var(--l-sand); font-size:13px}
html.leicht .hero h1{color:var(--l-creme); text-shadow:0 2px 3px rgba(var(--l-tinte),.30),0 5px 22px rgba(var(--l-tinte),.45)}
html.leicht .hero h1::after{
  content:''; display:block; width:120px; height:11px; margin:18px auto 0;
  background:
    radial-gradient(circle at 50% 50%, #F2A93B 0 4.6px, transparent 5.4px),
    linear-gradient(rgba(251,247,236,.92),rgba(251,247,236,.92)) center/100% 2px no-repeat;
}
html.leicht .hero .sub{color:rgba(251,247,236,.94)}
html.leicht .hero .btn-pri{background:linear-gradient(180deg,#F7C064 0%,#EBA03A 100%); color:#2a1a05; box-shadow:0 10px 26px rgba(0,0,0,.30)}
html.leicht .hero .btn-pri:hover{background:linear-gradient(180deg,#FACB78 0%,#F0AC4C 100%); color:#2a1a05}
html.leicht .hero .btn-sec{background:rgba(251,247,236,.12); color:var(--l-creme); border:1.5px solid rgba(251,247,236,.7)}
html.leicht .hero .btn-sec:hover{background:rgba(251,247,236,.24)}
html.leicht .hero-note{color:rgba(251,247,236,.82)}
html.leicht .hero-founder{color:rgba(251,247,236,.86)}
html.leicht .hero-founder b{color:var(--l-sand)}
html.leicht .pfad-band{margin-top:-46px}
html.leicht .pfad-schritt{border-color:rgba(201,164,101,.28)}
html.leicht .pfad-schritt h3,
html.leicht .step h3,
html.leicht .benefit h3,
html.leicht .fcard-body h3{color:var(--ink)}

/* Abschnitte */
html.leicht .band-paper{background:var(--l-papier)}
html.leicht .will-card{background:#fffdf7}
html.leicht .will-media,html.leicht .will-video{background:#1c2418}
html.leicht .benefit .icon{background:var(--l-punkt); color:#2a1a05; box-shadow:0 6px 16px rgba(200,116,28,.22)}
html.leicht .benefit .note{background:rgba(235,203,143,.35); color:var(--ink)}
html.leicht .fcard{background:#fffdf7; border:1px solid rgba(201,164,101,.28)}
html.leicht .fcard-img{background:var(--l-papier)}
html.leicht .fcard-img::after{background:linear-gradient(180deg,rgba(var(--l-tinte),0) 55%,rgba(var(--l-tinte),.22) 100%)}
html.leicht .bento{background:linear-gradient(160deg,#1c2418,#2b2a1f)}
html.leicht .bento-body .section-kicker{color:var(--l-sand)}
html.leicht .bento-body h2{color:var(--l-creme)}
html.leicht .bento-body p{color:rgba(251,247,236,.9)}
html.leicht .bento-body .btn-pri{background:linear-gradient(180deg,#F7C064 0%,#EBA03A 100%); color:#2a1a05}
html.leicht .bento-media::after{background:linear-gradient(90deg,rgba(var(--l-tinte),0) 60%,rgba(28,36,24,.55) 100%)}

/* Preise */
html.leicht .price-card.hl{background:#fffdf7; border:2px solid var(--l-sand); box-shadow:0 18px 48px rgba(70,50,18,.16)}
html.leicht .plan-badge{background:var(--ink); color:var(--l-creme); box-shadow:0 6px 16px rgba(28,36,24,.25)}
html.leicht .plan-price{color:var(--ink)}
html.leicht .plan-list li::before{color:var(--l-amber-dunkel)}
html.leicht .pricing .price-card.card-green{background:linear-gradient(160deg,#1c2418,#2b2a1f); border:2px solid #1c2418; box-shadow:0 18px 48px rgba(28,36,24,.30)}
html.leicht .pricing .price-card.card-green .plan-name{color:var(--l-sand)}
html.leicht .pricing .price-card.card-green .plan-price{color:var(--l-creme)}
html.leicht .pricing .price-card.card-green .plan-list li::before{color:var(--l-sand)}
html.leicht .pricing .price-card.card-green .plan-badge{background:var(--l-sand); color:#2a1a05}
html.leicht .pricing .price-card.card-green .btn-pri{background:linear-gradient(180deg,#F7C064 0%,#EBA03A 100%); color:#2a1a05}

/* FAQ, Schluss, Fuss */
html.leicht .faq summary{color:var(--ink)}
html.leicht .faq summary::after{color:var(--l-amber-dunkel)}
html.leicht .faq summary:hover{color:var(--l-akzent)}
html.leicht .bottom-cta .mini-breath{background:radial-gradient(circle,rgba(242,169,59,.30) 0%,rgba(242,169,59,0) 70%)}
html.leicht footer{background:var(--l-papier); border-top:1px solid rgba(201,164,101,.25)}
html.leicht .foot-links a,html.leicht .app-foot .foot-links a{color:var(--ink)}
html.leicht .foot-links a:hover{border-color:var(--l-amber)}
html.leicht .gem-zahl{color:var(--ink)}

/* ---------- Unterseiten: Fotoband oben, Karten darauf ---------- */
html.leicht body.seite-goody,
html.leicht body.seite-check,
html.leicht body.seite-app{position:relative}
html.leicht body.seite-goody::before,
html.leicht body.seite-check::before,
html.leicht body.seite-app::before{
  content:''; position:absolute; left:0; right:0; top:0; height:440px; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--l-tinte),.10) 0%,rgba(var(--l-tinte),0) 40%,rgba(251,247,236,.55) 78%,#FBF7EC 100%),
    var(--l-foto) center var(--l-foto-y,55%)/cover no-repeat;
}
html.leicht body.seite-goody{--l-foto:url('../img/leicht/meer-600.jpg')}
html.leicht body.seite-check{--l-foto:url('../img/leicht/wiese-700.jpg')}
html.leicht body.seite-app{--l-foto:url('../img/leicht/sonne-meer-700.jpg')}
@media(min-width:761px){
  html.leicht body.seite-goody{--l-foto:url('../img/leicht/meer-1080.jpg')}
  html.leicht body.seite-check{--l-foto:url('../img/leicht/wiese-1400.jpg'); --l-foto-y:17%}
  html.leicht body.seite-app{--l-foto:url('../img/leicht/sonne-meer-1200.jpg'); --l-foto-y:42%}
}
html.leicht body.seite-goody > main,
html.leicht body.seite-check > main,
html.leicht body.seite-app > main,
html.leicht body.seite-goody > footer,
html.leicht body.seite-check > footer,
html.leicht body.seite-app > footer{position:relative; z-index:1}
html.leicht body.seite-app > .tabbar{z-index:19}
/* Im Portal ist das Band niedriger, die Ansichten darunter sind laenger */
html.leicht body.seite-app::before{height:320px}
/* Die Karte beginnt weiter unten, damit das Foto oben sichtbar ist */
html.leicht body.seite-goody > main,
html.leicht body.seite-check > main{padding-top:190px}
html.leicht body.seite-app > main{padding-top:120px}
@media(min-width:761px){
  html.leicht body.seite-goody > main,
  html.leicht body.seite-check > main{padding-top:230px}
}

/* Goody-Seite */
html.leicht .goody-badge{color:#2a1a05; background:rgba(235,203,143,.55)}
html.leicht .goody-sec,
html.leicht .goody-teilen,
html.leicht .goody-mail{border-top-color:rgba(201,164,101,.30)}
html.leicht .goody-sec h2,html.leicht .goody-mail h2,
html.leicht .stufe-head h2,html.leicht .teil .teil-title,html.leicht .theme-keyword,
html.leicht .pitch-bullets b{color:var(--ink)}
html.leicht .pitch-bullets .pb-ico{background:rgba(235,203,143,.42); color:#5a3c0e}
html.leicht .stufe-num{background:var(--l-punkt); color:#2a1a05}
html.leicht .teil{background:#fff; border:1px solid rgba(201,164,101,.25)}
html.leicht .teil.teil-spaeter{background:rgba(255,255,255,.6)}
html.leicht .teil .teil-link,html.leicht .gm-dsgvo a{color:var(--l-akzent)}

/* Check-Seite */
html.leicht .check-facts span{background:rgba(235,203,143,.32); color:var(--ink); border-color:rgba(201,164,101,.35)}
html.leicht .master-card{background:linear-gradient(160deg,#1c2418,#2b2a1f)}
html.leicht .master-card .mk{color:var(--l-sand)}
html.leicht .master-card .mbul li::before{color:var(--l-sand)}
html.leicht .master-card .btn-master{background:linear-gradient(180deg,#F7C064 0%,#EBA03A 100%); color:#2a1a05}
html.leicht .pattern-list li::before{color:var(--l-amber-dunkel)}
html.leicht .bio-goody-titel{color:var(--ink)}

/* Portal: Foto-Koepfe (Heute, Journey- und Programm-Seiten) mit den neuen Fotos, Schrift Creme */
html.leicht .heute-hero--morgen::before,html.leicht .detail-hero--morgen::before{background-image:url(../img/leicht/sonne-meer-1200.jpg); background-position:center 42%}
html.leicht .heute-hero--tag::before,html.leicht .detail-hero--tag::before{background-image:url(../img/leicht/meer-1080.jpg); background-position:center 55%}
html.leicht .heute-hero--abend::before,html.leicht .detail-hero--abend::before{background-image:url(../img/leicht/wiese-1400.jpg); background-position:center 22%}
html.leicht .hh-title,html.leicht .dh-title{color:var(--l-creme)}
html.leicht .hh-kicker,html.leicht .dh-kicker,html.leicht .hh-quote,html.leicht .hh-title .title-ic{color:var(--l-sand)}
html.leicht .hh-sub,html.leicht .dh-sub,html.leicht .dh-back{color:rgba(251,247,236,.92)}
html.leicht .hh-link{color:#fff}
/* Tab-Leiste: eigene Creme-Flaeche, damit sie nicht auf dem Fotoband liegt */
html.leicht .tabbar{background:rgba(251,247,236,.94)}
html.leicht .j-match{background:rgba(235,203,143,.20); border:1px solid rgba(201,164,101,.35); color:var(--ink)}
html.leicht .j-match .ic{color:var(--l-amber-dunkel)}

/* Portal (app.css): Fortschritt, Abzeichen, Einladung */
html.leicht .prog-fill{background:linear-gradient(90deg,var(--l-sand),var(--l-amber))}
html.leicht .tier-badge.paid{background:var(--ink); color:var(--l-creme)}
html.leicht .up-invite{background:linear-gradient(160deg,#1c2418,#2b2a1f)}
html.leicht .up-invite .btn-pri{background:linear-gradient(180deg,#F7C064 0%,#EBA03A 100%); color:#2a1a05}
html.leicht .up-band{background:var(--l-papier)}
html.leicht .toast{background:var(--ink); color:var(--l-creme)}
html.leicht .back{color:var(--l-akzent)}