/* TRUE LIFE, helle Optik, seit 16.09.2026 */
/* Fuer die neuen Seiten (Start, Willkommen, Vision, Angebote, Kontakt).           */
/* Eigenstaendige Datei, damit /schattenarbeit/ und die Rechtsseiten unberuehrt    */
/* bei der bisherigen dunklen styles.css bleiben. Farben aus Anna-Lenas eigenem    */
/* Canva-Master "True Life - Light Master" und dem Gruenton aus der Lovable-Seite. */
@import url('fonts.css');

:root{
  --bg:#F5E9D5;
  --surface:#D0DFC5;
  --gold:#C9A227;
  --gold-soft:#B8901F;
  --heading:#2A1418;
  --text:#4A3B33;
  --muted:#8D6D51;
  --line:#E4D6BC;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
[id]{scroll-margin-top:90px;}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--gold-soft);text-decoration:none;}
a:hover{color:var(--gold);}
h1,h2,h3{font-family:var(--serif);color:var(--heading);font-weight:600;line-height:1.15;}
h1{font-size:clamp(34px,5.2vw,54px);}
h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:18px;}
h3{font-size:20px;margin-bottom:8px;}
p{margin-bottom:16px;}
.container{max-width:960px;margin:0 auto;padding:0 22px;}
.narrow{max-width:620px;margin:0 auto;padding:0 22px;}
.section{padding:72px 0;background:var(--bg);}
.section.green{background:var(--surface);}
.label{font-family:var(--serif);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:14px;}
.emph{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--heading);margin:22px 0;}

/* Navigation */
.nav{position:sticky;top:0;z-index:100;background:rgba(245,233,213,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
  transform:translateZ(0);-webkit-transform:translateZ(0);}
.nav-inner{max-width:1100px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.nav-logo{display:flex;align-items:center;gap:9px;}
.nav-logo span{font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.28em;color:var(--heading);}
.nav-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.nav-links a{font-size:13.5px;letter-spacing:.04em;color:var(--text);}
.nav-links a:hover{color:var(--gold-soft);}
.nav-links a.current{color:var(--gold-soft);}
/* Auf schmalen Bildschirmen nur Logo + True-Talk-Button zeigen, die Textlinks
   brechen sonst unschoen um. Die Seiten bleiben ueber den Footer erreichbar. */
@media (max-width:700px){
  .nav-links a:not(.btn){display:none;}
  .nav-links{gap:0;}
}

/* Buttons */
.btn{display:inline-block;padding:15px 32px;background:var(--gold);color:#2A1418;
     font-family:var(--serif);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
     border-radius:3px;border:1px solid var(--gold);transition:filter .15s ease;}
.btn:hover{filter:brightness(1.06);color:#2A1418;}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;}

/* Hero, seit 29.09.2026: Text auf Creme, Bild daneben (Desktop) bzw. darunter (Handy),
   damit die Schrift nicht mehr auf dem Foto liegt. Die Buttons liegen unten im Bild. */
.hero{display:grid;grid-template-columns:1fr;background:var(--bg);}
.hero-inner{max-width:620px;padding:40px 22px 30px;}
.hero h1{max-width:640px;}
.hero .sub{font-size:18px;color:var(--text);margin:18px 0;max-width:480px;}
.hero .emph{margin-bottom:0;}
.hero-media{position:relative;isolation:isolate;overflow:hidden;background:var(--surface);aspect-ratio:1082/1600;}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;animation:slow-pan 28s ease-in-out infinite alternate;will-change:transform;}
.hero-veil{position:absolute;inset:0;background:linear-gradient(rgba(42,20,24,0) 55%,rgba(42,20,24,.45) 100%);}
.hero-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.hero-btns{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;padding:0 22px 24px 40px;gap:10px;}
.hero-btns .btn{padding:12px 20px;font-size:12px;}
@media (min-width:900px){
  .hero{grid-template-columns:1fr 1fr;min-height:calc(100svh - 64px);}
  .hero-inner{align-self:center;justify-self:end;padding:60px 48px 60px 22px;}
  .hero-media{aspect-ratio:auto;min-height:560px;}
  .hero-btns{padding:0 32px 36px 44px;}
  .hero-btns .btn{padding:15px 28px;font-size:13px;}
}
@keyframes slow-pan{0%{transform:scale(1.06) translate(0,0);}100%{transform:scale(1.16) translate(-1.5%,-1.5%);}}
/* Bildnachweis, senkrecht an der linken Kante im Bild, wie in styles.css (dunkles Theme) */
.credit{
  position:absolute;left:12px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;white-space:nowrap;z-index:2;
  font-family:var(--sans);font-size:11px;font-weight:300;letter-spacing:.09em;
  color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none;
}

/* Werte-/Wahrheiten-Liste (nummeriert) */
.truths{display:flex;flex-direction:column;gap:14px;margin:26px 0;}
.truth{display:flex;gap:18px;align-items:flex-start;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:6px;}
.section.green .truth{background:#fff;}
.truth .n{font-family:var(--serif);font-size:20px;color:var(--gold-soft);line-height:1.3;flex-shrink:0;min-width:26px;}
.truth p{margin:0;}
.truth h3{margin-bottom:4px;}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:32px;}
.card{padding:26px;background:var(--bg);border:1px solid var(--line);border-radius:6px;}
.section.green .card{background:#EAF1E2;}
.card h3{font-size:18px;}
.card p{color:var(--muted);margin:0;}
@media (max-width:700px){.cards{grid-template-columns:1fr;}}

/* Formular (Startseite, Willkommens-Opt-In) */
.form-wrap{max-width:440px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.field input{width:100%;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:4px;
             color:var(--heading);font-family:var(--sans);font-size:15.5px;}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.18);}
.field input.invalid{border-color:#B4453A;}
.form-msg{font-size:13.5px;color:#B4453A;margin-bottom:14px;min-height:1px;}
.form-msg.show{display:block;}
.form-msg:empty{display:none;}
.trustline{font-size:13px;color:var(--muted);}

/* Bonus/Willkommens-Kasten */
.giftbox{border:1px solid var(--gold);border-radius:6px;padding:28px 26px;background:var(--surface);margin:28px 0;}
.giftbox .tag{font-family:var(--serif);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:12px;}
.giftbox .meta{font-size:13.5px;color:var(--muted);margin-bottom:14px;}

/* FAQ (gleiche Interaktion wie bisher, per assets/tl.js) */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;min-height:56px;padding:16px 0;background:none;border:none;cursor:pointer;
       display:flex;align-items:center;justify-content:space-between;text-align:left;
       font-family:var(--sans);font-size:16px;color:var(--heading);}
.faq-t{flex-shrink:0;font-size:22px;font-weight:300;color:var(--gold-soft);transition:transform .2s ease;}
.faq-item.open .faq-t{transform:rotate(45deg);}
.faq-a{display:none;padding-bottom:18px;color:var(--muted);}
.faq-item.open .faq-a{display:block;}

/* Kontaktformular */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}

/* Footer */
.footer{background:var(--surface);border-top:1px solid var(--line);padding:52px 22px 90px;}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
.footer-logo{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.footer-logo span{font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.28em;color:var(--heading);}
.footer h4{font-family:var(--serif);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px;}
.footer a{display:block;font-size:13.5px;color:var(--text);margin-bottom:9px;}
.footer-copy{grid-column:1/-1;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
             font-size:12px;color:var(--muted);line-height:1.7;}
@media (max-width:760px){.footer-inner{grid-template-columns:1fr;}}

/* Schritte, Rechtstext-Layout, Portrait (wie auf /danke/ und den Rechtsseiten) */
.steps{display:flex;flex-direction:column;margin-top:28px;}
.step{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);}
.step .n{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--gold-soft);line-height:1.1;}
.step h3{font-size:17.5px;margin-bottom:6px;}
.step p{margin:0;color:var(--muted);}
.legal{max-width:760px;margin:0 auto;}
.legal .box{padding:20px 22px;background:var(--surface);border-left:2px solid var(--gold);border-radius:0 4px 4px 0;margin:22px 0;}
.legal .box p:last-child{margin-bottom:0;}
.portrait{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:1px solid var(--gold);margin:0 auto 20px;}
.btn-dl{background:var(--gold);color:#2A1418;}

/* Termin-Kalender (Willkommensseite/True Talk) */
.calbox{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px;margin-top:8px;}
.calendly-inline-widget{min-width:290px;height:760px;}
.call-grid{display:flex;flex-direction:column;gap:36px;padding:0 22px;}
@media (min-width:680px){.call-grid{display:grid;grid-template-columns:minmax(280px,36%) 1fr;gap:44px;align-items:start;max-width:1160px;margin:0 auto;padding:0 22px;}}
.rule{display:flex;align-items:center;gap:12px;margin:26px 0;}
.rule::before,.rule::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);}
.rule i{width:7px;height:7px;background:var(--gold-soft);transform:rotate(45deg);}
.rule.left::before{display:none;}
.rule.left{max-width:180px;}
ul.plain{list-style:none;margin:14px 0 18px;}
ul.plain li{position:relative;padding-left:22px;margin-bottom:9px;}
ul.plain li::before{content:'';position:absolute;left:0;top:13px;width:13px;height:1.5px;background:var(--gold-soft);}
ul.check li::before{content:'✓';top:0;width:auto;height:auto;background:none;color:var(--gold-soft);font-weight:600;}
.about-photo{width:100%;border-radius:4px;margin-bottom:0;}
.progress{font-family:var(--serif);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px;}

.sticky{position:fixed;left:0;right:0;bottom:-100px;padding:14px 18px;background:rgba(245,233,213,.97);
        border-top:1px solid var(--line);text-align:center;transition:bottom .25s ease;z-index:90;}
.sticky.visible{bottom:0;}

/* Einwilligungs-Banner (assets/consent.js). Fehlte hier bis 29.09.2026, der Banner hing
   deshalb ungestaltet unter dem Footer und wurde kaum gesehen. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  padding:20px 22px calc(20px + env(safe-area-inset-bottom));
  background:rgba(245,233,213,.985);border-top:1px solid var(--gold);
  box-shadow:0 -12px 40px rgba(42,20,24,.18);
  transform:translateY(115%);transition:transform .34s ease;
}
.consent.visible{transform:translateY(0);}
.consent-inner{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.consent-text{margin:0;font-size:14.5px;line-height:1.7;color:var(--text);}
.consent-actions{display:flex;flex-direction:column;gap:10px;}
.consent .btn{min-height:52px;font-size:13px;}
.consent .btn-ghost{background:transparent;color:var(--heading);border:1px solid var(--gold);}
.consent .btn-ghost:hover{background:rgba(201,162,39,.12);filter:none;}
@media(min-width:768px){
  .consent-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:28px;}
  .consent-text{flex:1;}
  .consent-actions{flex-direction:row;flex-shrink:0;}
  .consent .btn{padding:16px 26px;}
}