/* joao-heep.com Startseite · João Heep Academy
   Baut auf /live/live.css auf (gleiche Tokens, Buttons, Etiketten, Kinoticket, Denkfehler, Kette).
   Hier nur die Komponenten, die es auf der Webinar-Seite nicht gibt. */
:root{
  --t-accent:#d7261e; --t-heading:#0e0e0c; --t-muted:#5e5a52;
  --t-font-head:'Newsreader',Georgia,serif; --t-font-body:'Archivo',Arial,sans-serif;
}
.top nav{display:flex;gap:var(--s3);align-items:center;font-size:var(--small)}
.top nav a{text-decoration:none}
.top .btn{min-height:48px;padding:var(--s1) var(--s3)}
.brand small{display:block;font:700 11px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.textlink{display:inline-block;margin-top:var(--s2);font-size:var(--small);color:var(--black)}

/* Themenwahl: keine Kartenraster, sondern eine Liste großer Zeilen wie ein Inhaltsverzeichnis */
.chooser{list-style:none;margin-top:var(--s5);border-top:1px solid var(--black)}
.chooser li{border-bottom:1px solid var(--line)}
.chooser a{display:grid;grid-template-columns:200px 1fr 48px;gap:var(--s3);align-items:center;padding:var(--s4) 0;text-decoration:none;color:var(--ink);transition:padding .4s var(--ease)}
.chooser .disc{font:700 11px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.chooser .disc em{display:block;font-style:normal;color:var(--black);margin-top:var(--s1)}
.chooser .q{font:400 32px/1.15 var(--font-head);color:var(--black)}
.chooser .go{justify-self:end;width:48px;height:48px;border:1px solid var(--black);display:grid;place-items:center;transition:transform .4s var(--ease)}
.chooser .go svg{width:16px;height:16px}
.chooser a:hover{padding-left:var(--s2)}
.chooser a:hover .go{transform:translateX(4px)}
.chooser li.core{border-bottom-color:var(--black)}
.chooser li.core .q{font-size:40px}

/* Spiegel: echte Sätze aus Erstgesprächen */
.quotes{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);margin-top:var(--s5)}
.quotes h3{font:700 11px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--black);padding-top:var(--s2)}
.quotes p{font:400 20px/1.3 var(--font-head);color:var(--black);margin-top:var(--s2)}
.quotes-note{margin-top:var(--s5);font-size:var(--body)}

/* Reihenfolge */
.order{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s5)}
.order li{border-top:2px solid var(--black);padding-top:var(--s3)}
.order b{display:block;font:400 32px/1 var(--font-head);color:var(--black)}
.order span{display:block;font:700 11px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s1)}
.order p{margin-top:var(--s2);font-size:var(--small);color:var(--muted)}

/* Stimmen als Zitate */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4);margin-top:var(--s5)}
.testimonials blockquote{margin:0;font:400 20px/1.35 var(--font-head);color:var(--black)}
.testimonials cite{display:block;margin-top:var(--s2);font:700 11px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--muted)}

/* Zwei Wege */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s7);align-items:start}
.way{border:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.way.talk{border-color:var(--black)}
.way .kino{margin:calc(-1 * var(--s6)) auto 0}
.way ol{list-style:none;counter-reset:w}
.way ol li{padding:var(--s1) 0;border-top:1px solid var(--line);font-size:var(--small)}
.price-note{margin-top:var(--s5);padding:var(--s4);background:var(--soft)}
.price-note p+p{margin-top:var(--s2)}

/* FAQ */
.faq{margin-top:var(--s5);border-top:1px solid var(--black)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s3) 0;font:400 24px/1.3 var(--font-head);color:var(--black);display:flex;justify-content:space-between;gap:var(--s3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--font-body)}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:0 0 var(--s3);color:var(--muted);max-width:760px}

.booking{margin-top:var(--s5);border:1px dashed var(--muted);padding:var(--s5);text-align:center;color:var(--muted)}

@media(max-width:1000px){.quotes{grid-template-columns:repeat(2,1fr)}.order{grid-template-columns:1fr 1fr}.testimonials{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .top nav .hide-m{display:none}
  .chooser a{grid-template-columns:1fr 48px;gap:var(--s2)}
  .chooser .disc{grid-column:1/-1}
  .chooser .q,.chooser li.core .q{font-size:24px}
  .quotes,.order,.testimonials,.ways{grid-template-columns:1fr}
  .faq summary{font-size:20px}
  .way .kino{margin:calc(-1 * var(--s5)) auto 0}
}
.testimonials .voice{border:0}
.testimonials .voice .video{aspect-ratio:16/9}

/* Mitlaufender Gesprächs-Button: nur mobil. Frage wechselt je Abschnitt. */
.ask-bar{display:none}
@media(max-width:760px){
  .ask-bar{position:fixed;left:var(--s2);right:var(--s2);bottom:calc(var(--s2) + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;gap:4px;padding:var(--s2) var(--s3);background:var(--red);color:var(--on-accent);text-decoration:none;transform:translateY(0);opacity:1;transition:transform .4s var(--ease),opacity .4s var(--ease)}
  .ask-bar[hidden]{display:flex;transform:translateY(calc(100% + var(--s3)));opacity:0;pointer-events:none}
  .ask-q{font:400 20px/1.2 var(--font-head);transition:opacity .25s var(--ease)}
  .ask-q.swap{opacity:0}
  .ask-cta{display:flex;align-items:center;gap:var(--s1);font:700 11px/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
  .ask-cta svg{width:16px;height:16px}
  .footer{padding-bottom:var(--s8)}
}
@media(prefers-reduced-motion:reduce){.ask-bar,.ask-q{transition:none}}