/* =========================================================
   Ikigai Workbook – Landingpage
   Farbwelt aus der Lotus-Grafik + Torii-Sonnenuntergang
   ========================================================= */

:root{
  /* Lotus-Palette */
  --rosa:   #e58bae;
  --mint:   #86d2c8;
  --lila:   #b39ddb;
  --blau:   #7db4e6;

  /* Sonnenuntergang – Farbstimmung des Buchcovers */
  --sunset-1: #4a2940;
  --sunset-2: #99433f;
  --sunset-3: #d7743e;
  --sunset-4: #f3b768;
  --torii:    #c0272d;

  /* Basis */
  --creme:   #fdf6ef;
  --papier:  #fbeee3;
  --tinte:   #2b2a33;
  --grau:    #6b6675;
  --akzent:  #a8503c;
  --cta:     #c22f26;
  --cta-dark:#9d241d;
  --gold:    #f2a33c;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1120px;
  --r: 18px;
  --shadow: 0 18px 40px rgba(74, 45, 70, .13);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.09rem);
  line-height:1.68;
  color:var(--tinte);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--serif); line-height:1.15; font-weight:600; margin:0 0 .6em; }
h1{ font-size:clamp(2.2rem, 1.4rem + 3.4vw, 4rem); }
h2{ font-size:clamp(1.75rem, 1.2rem + 2vw, 2.7rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1.1em; }

a{ color:var(--cta); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:var(--tinte); padding:.8rem 1.2rem;
}
.skip:focus{ left:1rem; top:1rem; }

.wrap{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 760px); }
.center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.01em;
  text-decoration:none;
  padding:.95rem 1.9rem;
  border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn--primary{
  color:#fff;
  background:linear-gradient(120deg, var(--cta), #e0763a);
  box-shadow:0 10px 24px rgba(194,47,38,.38);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(194,47,38,.5); }
.btn--ghost{
  color:#fff;
  border:2px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(4px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.22); }
.btn--big{ font-size:1.12rem; padding:1.15rem 2.4rem; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  isolation:isolate;
  padding:clamp(3rem, 6vw, 6rem) 0 clamp(6rem, 9vw, 9rem);
  overflow:hidden;
  color:#fff;
  /* Sonnenuntergang in den Farben des Buchcovers */
  background:linear-gradient(100deg, #3a1c2c 0%, #7a3340 42%, #c4643a 74%, #f0b268 100%);
}
/* Die Torii-Illustration sitzt nur in der rechten Hälfte und wird nach links
   ausgeblendet. So bleibt sie nahezu unskaliert scharf, und die Lotus-Grafik
   im linken Bilddrittel liegt außerhalb des Ausschnitts. */
.hero__bg{
  position:absolute; top:0; bottom:0; right:0; z-index:-2;
  /* Bildhöhe füllt die Fläche, Breite folgt daraus. Das Seitenverhältnis der
     Fläche ist so gewählt, dass rechtsbündig genau die linken 41 % des Bildes
     – also die Lotus-Grafik – außerhalb liegen, unabhängig vom Viewport. */
  width:auto; aspect-ratio:.92 / 1;
  background:url("../img/hero-torii.png") right center / auto 100% no-repeat;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 30%);
  mask-image:linear-gradient(to right, transparent 0%, #000 30%);
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(45,20,32,.80) 0%, rgba(74,30,42,.60) 42%, rgba(130,62,50,.24) 70%, rgba(0,0,0,0) 100%);
}
.hero__inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
}
.hero__text{ max-width:36em; }
.hero h1{ text-shadow:0 3px 24px rgba(40,20,55,.45); }
.hero h1 em{
  font-style:italic;
  color:#f8c877;
}
.kicker{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.76rem;
  font-weight:700;
  margin:0 0 1.1rem;
  color:#f6c9a4;
}
.kicker--light{ color:rgba(255,255,255,.75); }
.kicker--dark{ color:var(--akzent); }
.lead{
  font-size:clamp(1.05rem,.98rem + .45vw,1.28rem);
  color:rgba(255,255,255,.94);
  max-width:34em;
}
.cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.8rem 0 1.4rem; }

.stars{ display:flex; align-items:center; gap:.6rem; font-size:.94rem; color:rgba(255,255,255,.9); flex-wrap:wrap; }
.stars__icons{ color:var(--gold); font-size:1.15rem; letter-spacing:.08em; }

.hero__book img{
  width:min(100%, 330px);
  margin-inline:auto;
  border-radius:4px;
  /* schmaler heller Rand, damit das warme Cover nicht mit dem Verlauf verschwimmt */
  box-shadow:0 0 0 5px rgba(255,255,255,.9), 0 30px 60px rgba(30,14,20,.55);
  transform:rotate(-2.5deg);
}

.hero__wave{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.hero__wave svg{ width:100%; height:clamp(45px,6vw,90px); display:block; }

/* =========================================================
   SEKTIONEN allgemein
   ========================================================= */
.sec{ position:relative; padding:clamp(3.5rem,7vw,6.5rem) 0; overflow:hidden; }
.sec--cream{ background:var(--creme); }
.sec--paper{ background:var(--papier); }

.sec__title{ text-align:center; margin-bottom:.4em; }
.sec__title--left{ text-align:left; }
.sec__title--light{ color:#fff; }
.sec__sub{
  text-align:center; color:var(--grau);
  max-width:44em; margin:0 auto 2.8rem;
  font-size:1.06rem;
}
.sec__sub--light{ color:rgba(255,255,255,.82); }

.deko{
  position:absolute; width:230px; opacity:.16; pointer-events:none;
  mix-blend-mode:multiply;
}
.deko--tr{ top:-30px; right:-40px; transform:rotate(8deg); }

/* ---------- Pains ---------- */
.pains{
  list-style:none; padding:0; margin:0 0 3rem;
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
}
.pain{
  background:#fff;
  border-radius:var(--r);
  padding:1.6rem 1.5rem 1.5rem;
  box-shadow:var(--shadow);
  border-top:5px solid var(--rosa);
  font-size:1.02rem;
}
.pain--rosa{ border-top-color:var(--rosa); }
.pain--mint{ border-top-color:var(--mint); }
.pain--lila{ border-top-color:var(--lila); }
.pain--blau{ border-top-color:var(--blau); }
.pain__mark{
  display:block;
  font-family:var(--serif);
  font-size:2rem; line-height:1;
  color:var(--akzent); opacity:.45;
  margin-bottom:.5rem;
}

.quotebox{ margin:0; text-align:center; }
.quotebox blockquote{
  font-family:var(--serif);
  font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);
  font-style:italic;
  color:var(--akzent);
  margin:0 0 .5rem;
}
.quotebox figcaption{ color:var(--grau); font-size:1rem; }

/* ---------- Vision (Sunset) ---------- */
.sec--sunset{
  background:linear-gradient(115deg, var(--sunset-1), var(--sunset-2) 42%, var(--sunset-3) 72%, var(--sunset-4));
  color:#fff;
}
.sec--sunset::after{
  content:""; position:absolute; inset:0;
  background:url("../img/torii.png") right -60px bottom -40px / 320px auto no-repeat;
  opacity:.20; pointer-events:none;
}
.vision{
  font-size:clamp(1.12rem,1rem + .6vw,1.4rem);
  color:rgba(255,255,255,.95);
}
.vision--strong{ font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + 1vw,1.85rem); margin-top:1.6rem; }

/* ---------- Split ---------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.split--rev .split__media{ order:2; }
.split__media > img{ margin-inline:auto; }

/* Lebensrad, Tempel und Kirschblüte als eine Komposition */
.collage{
  position:relative;
  width:min(100%, 380px);
  aspect-ratio:1;
  margin-inline:auto;
}
.collage img{ position:absolute; }
.collage__rad{
  width:74%; left:13%; top:14%; z-index:2;
  filter:drop-shadow(0 14px 26px rgba(74,45,70,.22));
}
/* Tempel und Kirschblüte liegen hinter dem Lebensrad und schauen an den Ecken
   hervor. Das Rad trägt die Information und bleibt vollständig lesbar. */
.collage__tempel,
.collage__zweig{
  width:40%; z-index:1;
  border-radius:50%;
  /* Ringfarbe = Hintergrund des Abschnitts (#erfaehrst ist sec--paper) */
  box-shadow:0 0 0 6px var(--papier), 0 10px 22px rgba(74,45,70,.18);
}
.collage__tempel{ left:0; top:0; }
.collage__zweig{ right:0; bottom:0; }

.four{ list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:.7rem; }
.four li{ display:flex; align-items:center; gap:.7rem; font-size:1.06rem; }
.dot{ width:.95rem; height:.95rem; border-radius:50%; flex:none; }
.dot--rosa{ background:var(--rosa); }
.dot--mint{ background:var(--mint); }
.dot--lila{ background:var(--lila); }
.dot--blau{ background:var(--blau); }

/* ---------- Cards ---------- */
.cards{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.card{
  background:#fff;
  border-radius:var(--r);
  padding:2rem 1.6rem 1.6rem;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--rosa);
}
.card--rosa::before{ background:var(--rosa); }
.card--mint::before{ background:var(--mint); }
.card--blau::before{ background:var(--blau); }
.card--lila::before{ background:var(--lila); }
.card__num{
  font-family:var(--serif);
  font-size:2.6rem; line-height:1;
  color:var(--akzent); opacity:.3;
  display:block; margin-bottom:.4rem;
}
.card h3{ margin-bottom:.45em; }
.card p{ margin:0; color:var(--grau); font-size:.99rem; }

/* Taschenbuch vs. E-Book */
.format{
  margin:2.6rem auto 0; max-width:52em;
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
}
.format__col{
  background:#fff;
  border-radius:var(--r);
  padding:1.6rem 1.5rem;
  box-shadow:var(--shadow);
  position:relative;
}
.format__col--hl{
  background:linear-gradient(150deg, #fff 40%, #fff4e7);
  outline:2px solid var(--sunset-4);
  outline-offset:-2px;
}
.format__badge{
  position:absolute; top:-.7rem; right:1.3rem;
  background:linear-gradient(120deg, var(--cta), #e0763a);
  color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:999px;
}
.format__badge--sw{
  background:linear-gradient(120deg, #55505c, #7d7688);
}
.format__col h3{ margin-bottom:.4em; }
.format__col p{ margin:0; color:var(--grau); font-size:.99rem; }

.note{
  margin:1.8rem auto 0; max-width:48em; text-align:center;
  color:var(--grau); font-size:.98rem;
}

/* ---------- Blick ins Buch ---------- */
.seiten{
  columns:2 300px;
  column-gap:1.6rem;
  max-width:58em; margin-inline:auto;
}
.seite{
  break-inside:avoid;
  margin:0 0 1.6rem;
  background:#fff;
  border-radius:8px;
  padding:.7rem .7rem 0;
  box-shadow:var(--shadow);
}
.seite img{
  width:100%;
  border-radius:4px;
  border:1px solid rgba(43,42,51,.09);
}
.seite figcaption{
  padding:.9rem .5rem 1rem;
  font-size:.92rem;
  color:var(--grau);
}

/* Farbe gibt es nur im E-Book. Muss deutlich sein, sonst entsteht beim
   gedruckten Buch eine Enttäuschung, die es schon als Rezension gab. */
.farbhinweis{
  max-width:46em;
  margin:0 auto 2.6rem;
  padding:1rem 1.4rem;
  background:linear-gradient(150deg, #fff 30%, #fff4e7);
  border-radius:var(--r);
  outline:2px solid var(--sunset-4);
  outline-offset:-2px;
  text-align:center;
  font-size:.97rem;
  color:var(--grau);
}
.farbhinweis strong{ color:var(--tinte); }

.leseprobe{
  margin:2.4rem 0 0;
  text-align:center;
}
.btn--outline{
  color:var(--cta);
  border:2px solid var(--cta);
  background:transparent;
}
.btn--outline:hover{ background:var(--cta); color:#fff; }
.leseprobe__hinweis{
  display:block;
  margin-top:.8rem;
  font-size:.86rem;
  color:var(--grau);
}

/* ---------- Schaffe ich das? ---------- */
.ruhe{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
}
.ruhe__item{
  background:#fff;
  border-radius:var(--r);
  padding:1.8rem 1.6rem;
  box-shadow:var(--shadow);
  border-left:5px solid var(--mint);
}
.ruhe__item:nth-child(2){ border-left-color:var(--blau); }
.ruhe__item:nth-child(3){ border-left-color:var(--lila); }
.ruhe__item h3{ margin-bottom:.45em; }
.ruhe__item p{ margin:0; color:var(--grau); font-size:.99rem; }

/* Einschränkender Hinweis im Fließtext */
.hinweis{
  border-left:3px solid var(--sunset-4);
  padding-left:1.1rem;
  color:var(--grau);
  font-size:.99rem;
}

/* ---------- Checks ---------- */
.checks{ list-style:none; padding:0; margin:0; display:grid; gap:.85rem; }
.checks li{ position:relative; padding-left:2.1rem; }
.checks li::before{
  content:"";
  position:absolute; left:0; top:.42em;
  width:1.15rem; height:.6rem;
  border-left:3px solid var(--mint);
  border-bottom:3px solid var(--mint);
  transform:rotate(-45deg);
  border-radius:2px;
}

/* ---------- Bonus ---------- */
.sec--deep{
  background:linear-gradient(150deg, #2f1c31, #5c2c3e 52%, #954a3c);
  color:#fff;
}
.sec--deep::after{
  content:""; position:absolute; left:-70px; bottom:-60px;
  width:340px; height:340px;
  background:url("../img/pagode.png") center/contain no-repeat;
  opacity:.16; pointer-events:none;
}
.bonus{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  position:relative; z-index:1;
}
.bonus__item{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);
  padding:1.7rem 1.5rem;
  backdrop-filter:blur(3px);
}
.bonus__icon{
  display:grid; place-items:center;
  width:2.9rem; height:2.9rem; border-radius:50%;
  background:linear-gradient(135deg, #e08a4e, var(--torii));
  font-size:1.25rem; margin-bottom:1rem;
}
.bonus__item h3{ color:#fff; margin-bottom:.4em; }
.bonus__item p{ margin:0; color:rgba(255,255,255,.82); font-size:.97rem; }

/* ---------- Reviews ---------- */
.reviews{
  columns:3 300px;
  column-gap:1.5rem;
}
.review{
  break-inside:avoid;
  margin:0 0 1.5rem;
  background:#fff;
  border-radius:var(--r);
  padding:1.7rem 1.6rem 1.5rem;
  box-shadow:var(--shadow);
}
.review__stars{ color:var(--gold); letter-spacing:.12em; margin-bottom:.5rem; }
.review h3{ font-size:1.08rem; margin-bottom:.5em; }
.review blockquote{
  margin:0 0 .9rem; color:var(--grau);
  font-size:.99rem;
}
.review blockquote::before{ content:"„"; }
.review blockquote::after{ content:"“"; }
.review figcaption{ font-size:.9rem; color:var(--akzent); font-weight:600; }

/* ---------- Autoren ---------- */
.autoren{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  max-width:60em; margin-inline:auto;
}
.autor{
  background:#fff;
  border-radius:var(--r);
  padding:2rem 1.8rem 1.7rem;
  box-shadow:var(--shadow);
  text-align:center;
}
.autor__foto{
  width:150px; height:150px;
  border-radius:50%;
  overflow:hidden;
  margin:0 auto 1.1rem;
  box-shadow:0 0 0 5px #fff, 0 0 0 7px var(--sunset-4);
}
.autor__foto img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* Das Pressefoto ist weit aufgenommen, links steht ein Mikrofon im Bild.
   Enger auf den Kopf ziehen, damit der Kreis nicht halb leer wirkt. */
.autor__foto--carsten img{ transform:scale(1.8) translate(-3.5%, 11%); }
.autor h3{ margin-bottom:.15em; }
.autor__rolle{
  font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--akzent);
  margin:0 0 1.2rem;
}
.autor p{ color:var(--grau); font-size:.99rem; text-align:left; }
.autor p:last-child{ margin-bottom:0; }

.autoren__gemeinsam{
  max-width:44em; margin:2.4rem auto 0; text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.1rem,1rem + .5vw,1.3rem);
  color:var(--tinte);
}

/* ---------- Entfalte Dich ---------- */
.sec--butterfly{
  background:
    linear-gradient(rgba(253,246,239,.90), rgba(253,246,239,.94)),
    url("../img/kirschbaum.jpg") center/cover no-repeat;
  text-align:center;
}
.butterfly-text{
  font-size:clamp(1.05rem,1rem + .4vw,1.2rem);
  color:var(--grau);
}
.butterfly-claim{
  font-family:var(--serif);
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);
  color:var(--torii);
  margin:1.4rem 0 0;
}

/* ---------- Kaufen ---------- */
.sec--cta{
  background:linear-gradient(115deg, var(--sunset-1), var(--sunset-2) 45%, var(--sunset-3) 78%, var(--sunset-4));
  color:#fff;
}
.buy{
  display:grid;
  grid-template-columns:.6fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.buy__book img{
  width:min(100%,300px);
  margin-inline:auto;
  border-radius:4px;
  box-shadow:0 0 0 5px rgba(255,255,255,.9), 0 26px 55px rgba(30,14,20,.5);
  transform:rotate(2deg);
}
.buy h2{ color:#fff; }
.buy p{ color:rgba(255,255,255,.92); }
.buy__facts{
  list-style:none; padding:0; margin:0 0 1.8rem;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.buy__facts li{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  padding:.35rem 1rem;
  font-size:.9rem;
}
.buy__hint{ font-size:.86rem; color:rgba(255,255,255,.72); margin:.9rem 0 0; }

/* ---------- Footer ---------- */
.footer{
  background:#2b1b22;
  color:rgba(255,255,255,.72);
  padding:3rem 0 1.6rem;
  font-size:.94rem;
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between; align-items:flex-start;
}
.footer__brand{ max-width:32em; }
.footer__brand img{
  background:#fff; border-radius:8px; padding:.5rem .8rem;
  margin-bottom:1rem;
}
.footer__brand p{ margin:0; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer__nav a{ color:rgba(255,255,255,.85); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; }
.footer__nav a:hover{ color:#fff; border-color:#fff; }
.footer__legal{
  text-align:center; margin:2.5rem 0 0;
  font-size:.84rem; color:rgba(255,255,255,.45);
}

/* ---------- Sticky CTA (mobil) ---------- */
.sticky-cta{
  position:fixed; left:1rem; right:1rem; bottom:1rem;
  z-index:50;
  display:none;
  text-align:center;
  background:linear-gradient(120deg, var(--cta), #e0763a);
  color:#fff; font-weight:700; text-decoration:none;
  padding:1rem; border-radius:999px;
  box-shadow:0 10px 26px rgba(40,15,30,.4);
  transform:translateY(150%);
  transition:transform .3s ease;
}
.sticky-cta.is-visible{ transform:translateY(0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__text{ margin-inline:auto; }
  .cta-row{ justify-content:center; }
  .stars{ justify-content:center; }
  .hero__book{ order:-1; }
  .hero__book img{ width:min(70%,240px); }

  .split, .buy{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .split__media > img{ width:min(75%,320px); }
  .sec__title--left{ text-align:center; }
  .split__text{ text-align:center; }
  .four li, .checks li{ text-align:left; }
  .four{ max-width:22em; margin-inline:auto; }
  .checks{ max-width:34em; margin-inline:auto; text-align:left; }
  .buy__facts{ justify-content:center; }
  .buy__text{ text-align:center; }
}

@media (max-width: 640px){
  .sticky-cta{ display:block; }
  .reviews{ columns:1; }
  .deko--tr{ width:140px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}