/* joao-heep.com/live · CI Weiß, Schwarz, Rot · 10 Gestaltungsprinzipien
   Abstände nur 8, 16, 24, 32, 48, 64, 96, 128. Drei Textgrößen pro Screen. Rot nur für den einen Fokus. */
:root{
  /* Werte kommen aus theme/<tenant>.json (render.js setzt sie). Hier nur Fallbacks. */
  --white:var(--t-bg,#ffffff); --black:var(--t-heading,#111111); --ink:var(--t-text,#1c1c1c); --muted:var(--t-muted,#5a5a5a); --line:var(--t-line,#e3e3e3); --soft:var(--t-soft,#f6f6f6);
  --red:var(--t-accent,#c8102e); --on-accent:var(--t-accent-text,#ffffff); --paper:var(--t-paper,#fbf8f2);
  --font-head:var(--t-font-head,Georgia,'Times New Roman',serif);
  --font-body:var(--t-font-body,-apple-system,'Helvetica Neue',Arial,sans-serif);
  --radius:var(--t-radius,0px);
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --h1:clamp(40px,6vw,72px); --h2:clamp(32px,4vw,48px); --body:18px; --small:16px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 var(--body)/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
h1,h2,h3,p,figure,ul,ol{margin:0;padding:0}
h1,h2{font-family:var(--font-head);font-weight:400;letter-spacing:-.02em;line-height:1.08;color:var(--black)}
h1{font-size:var(--h1)} h2{font-size:var(--h2)}
h3{font-size:var(--body);font-weight:700;line-height:1.4;color:var(--black)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--black);outline-offset:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
.section{padding:var(--s7) 0;border-top:1px solid var(--line)}
.muted{color:var(--muted)}
.small{font-size:var(--small)}
.stack>*+*{margin-top:var(--s3)}
.skip{position:absolute;left:var(--s2);top:-64px;background:var(--white);padding:var(--s2);z-index:100}
.skip:focus{top:var(--s2)}

/* Buttons: eine Komponente, zwei Varianten. Rot = Hauptaktion, Kontur = Nebenaktion */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:56px;padding:var(--s2) var(--s4);border:2px solid var(--red);border-radius:var(--radius);background:var(--red);color:var(--on-accent);font-weight:700;font-size:var(--small);text-decoration:none;cursor:pointer;transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--black);border-color:var(--black)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.btn svg{width:16px;height:16px}

/* Header */
.top{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) 0}
.brand{font:400 24px/1 var(--font-head);text-decoration:none;color:var(--black)}

/* Hero: links Aussage, rechts Ticket als Gegengewicht (Balance) */
.hero{padding:var(--s6) 0 var(--s7)}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:var(--s6);align-items:center}
.hero .lead{font-size:var(--body);color:var(--muted);max-width:520px;margin-top:var(--s3)}
.ticket{border:1px solid var(--black);padding:var(--s4);background:var(--white)}
.ticket-title{font:400 var(--h2)/1.1 var(--font-head);color:var(--black);font-size:32px}
.ticket-date{margin-top:var(--s2);font-weight:700}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin-top:var(--s3);border-top:1px solid var(--line);padding-top:var(--s3)}
.countdown div{text-align:center}
.countdown b{display:block;font:400 32px/1 var(--font-head);font-variant-numeric:tabular-nums;color:var(--black)}
.countdown span{font-size:var(--small);color:var(--muted)}
.ticket .btn{width:100%;margin-top:var(--s3)}
.ticket .note{margin-top:var(--s2);font-size:var(--small);color:var(--muted);text-align:center}
.date-pick{margin-top:var(--s3)}
.date-pick label{display:block;font-size:var(--small);color:var(--muted);margin-bottom:var(--s1)}

/* Denkfehler: Tricks werden beim Scrollen durchgestrichen */
.myths{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.myth{border:1px solid var(--line);padding:var(--s3);font:400 24px/1.3 var(--font-head);color:var(--muted)}
.myth .strike{position:relative;display:inline}
.strike-line{position:absolute;height:2px;background:var(--black);transform-origin:left center;transform:scaleX(var(--s,0));pointer-events:none}
.answer{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s6);align-items:start}

/* Vergleich Coach A / Coach B */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
.compare article{border:1px solid var(--line);padding:var(--s4)}
.compare article.is-a{border-color:var(--black)}
.compare ul{list-style:none;margin-top:var(--s3)}
.compare li{padding:var(--s1) 0;border-top:1px solid var(--line)}

/* João */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s6);align-items:center}
.portrait{aspect-ratio:4/5;background:var(--soft);display:grid;place-items:center;color:var(--muted);font-size:var(--small)}
.portrait img{width:100%;height:100%;object-fit:cover}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}
.facts b{display:block;font:400 32px/1 var(--font-head);color:var(--black)}
.facts span{font-size:var(--small);color:var(--muted)}

/* Für dich / nicht für dich */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
.path{border:1px solid var(--line);padding:var(--s4)}
.path h3{margin-bottom:var(--s2)}
.questions{list-style:none;margin-top:var(--s5);columns:2;column-gap:var(--s6)}
.questions li{break-inside:avoid;padding:var(--s2) 0;border-top:1px solid var(--line)}
.notfor{margin-top:var(--s5);padding:var(--s4);background:var(--soft)}

/* Tickets */
.tickets{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5);align-items:start}
.offer{border:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.offer.vip{border-color:var(--black)}
.price{font:400 48px/1 var(--font-head);color:var(--black)}
.price small{font:400 var(--small)/1 var(--font-body);color:var(--muted);margin-left:var(--s1)}
.offer ul{list-style:none}
.offer li{padding:var(--s1) 0;border-top:1px solid var(--line)}
.offer .btn{width:100%}

/* Stimmen: Video-Testimonials */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.voice{border:1px solid var(--line)}
.voice .video{aspect-ratio:9/16;background:var(--soft);display:grid;place-items:center;color:var(--muted);font-size:var(--small)}
.voice .video video,.voice .video iframe{width:100%;height:100%;border:0;object-fit:cover}
.voice p{padding:var(--s2) var(--s3);font-size:var(--small)}

/* Finale */
.final{text-align:center;padding:var(--s8) 0}
.final p{max-width:640px;margin:var(--s3) auto var(--s4);color:var(--muted)}

/* Footer */
.footer{border-top:1px solid var(--line);padding:var(--s5) 0 var(--s6);font-size:var(--small);color:var(--muted)}
.footer .wrap{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.footer nav{display:flex;gap:var(--s3)}

/* Sticky CTA nur mobil */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--line)}
.sticky[hidden]{display:none!important}
.sticky .btn{min-height:48px;padding:var(--s1) var(--s3)}

/* Dialog Anmeldung */
dialog{width:calc(100% - 32px);max-width:560px;max-height:90dvh;overflow:auto;border:1px solid var(--black);border-radius:0;padding:var(--s5) var(--s4);color:var(--ink)}
dialog::backdrop{background:rgba(17,17,17,.6)}
.close{position:absolute;top:var(--s2);right:var(--s2);width:48px;height:48px;border:0;background:transparent;font-size:32px;line-height:1;cursor:pointer}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
.field.full{grid-column:1/-1}
label{display:block;font-size:var(--small);margin-bottom:var(--s1)}
input,select{width:100%;min-height:48px;padding:var(--s1) var(--s2);border:1px solid #9a9a9a;border-radius:0;background:var(--white);color:var(--ink);font-size:16px}
input:focus,select:focus{outline:0;border-color:var(--black);box-shadow:0 0 0 2px var(--black)}
.phone-row{display:grid;grid-template-columns:auto 1fr;gap:var(--s1)}
.check{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--small);margin-top:var(--s2)}
.check input{width:24px;min-height:24px;margin-top:0}
.form-legal{font-size:var(--small);color:var(--muted);margin-top:var(--s2)}
.link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font-size:inherit}
dialog .btn{width:100%;margin-top:var(--s3)}
.status{margin-top:var(--s2);font-size:var(--small)}
.status:empty{display:none}
.ticket-choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin-top:var(--s3)}
.ticket-choice label{border:1px solid var(--line);padding:var(--s2);cursor:pointer;margin:0}
.ticket-choice input{width:auto;min-height:0;margin-right:var(--s1)}
.ticket-choice label:has(input:checked){border-color:var(--black)}

/* Reveal */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.pending{opacity:0;transform:translateY(24px)}

@media(max-width:900px){
  .hero-grid,.answer,.about{grid-template-columns:1fr;gap:var(--s5)}
  .myths,.voices{grid-template-columns:1fr}
  .questions{columns:1}
}
@media(max-width:760px){
  .wrap{padding:0 var(--s3)}
  .section{padding:var(--s6) 0}
  .hero{padding:var(--s4) 0 var(--s6)}
  .compare,.paths,.tickets,.facts{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .sticky{display:flex}
  .footer{padding-bottom:var(--s8)}
  .final{padding:var(--s7) 0}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal.pending{opacity:1;transform:none}
  .strike-line{transform:scaleX(1)}
}

/* ================= VERSION 2 · gestaltete Overlays und Narrativ =================
   Bewusster Regelbruch (Regel 1 Balance): Overlays sind leicht gedreht wie beim Vorbild.
   Begründung: Sie wirken wie aufgelegte Etiketten und Tickets, das Gewicht bleibt im Raster.
   Overlays sind schwarz oder weiß, nie rot. Rot bleibt dem CTA vorbehalten. */

/* Foto mit aufgelegtem Etikett (wie „Kein perfektes Setup …“) */
.photo-frame{position:relative;padding:0 0 var(--s5)}
.photo-frame .photo{aspect-ratio:4/5;background:var(--soft);overflow:hidden;display:grid;place-items:center;color:var(--muted);font-size:var(--small)}
.photo-frame .photo.arch{border-radius:999px 999px 0 0}
.photo-frame .photo img{width:100%;height:100%;object-fit:cover}
.label-card{position:absolute;right:calc(-1 * var(--s3));bottom:0;max-width:300px;background:var(--black);color:var(--white);padding:var(--s3);font:400 24px/1.15 var(--font-head);transform:rotate(-3deg);animation:float-a 7s ease-in-out infinite}
.label-card small{display:block;margin-top:var(--s1);font:700 11px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;opacity:.8}

/* Gestaltetes Ticket als Grafik (nicht nur Karte) */
.pass{position:relative;display:grid;grid-template-columns:1fr 88px;background:var(--white);border:2px solid var(--black);color:var(--black);transform:rotate(-2deg);animation:float-b 6.5s ease-in-out infinite;max-width:420px}
.pass-main{padding:var(--s3)}
.pass-kicker{font:700 11px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.pass-title{font:400 32px/1.05 var(--font-head);margin-top:var(--s1)}
.pass-date{margin-top:var(--s2);font-weight:700;font-size:var(--small)}
.pass-stub{border-left:2px dashed var(--black);display:grid;place-items:center;position:relative}
.pass-stub span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 16px/1 var(--font-body);letter-spacing:.24em}
.pass::before,.pass::after{content:'';position:absolute;right:76px;width:24px;height:24px;border-radius:50%;background:var(--white);border:2px solid var(--black)}
.pass::before{top:-14px;border-top-color:transparent;border-left-color:transparent;transform:rotate(45deg)}
.pass::after{bottom:-14px;border-bottom-color:transparent;border-right-color:transparent;transform:rotate(45deg)}
.pass.dark{background:var(--black);color:var(--white);border-color:var(--black)}
.pass.dark .pass-stub{border-left-color:var(--white)}
.pass.dark::before,.pass.dark::after{background:var(--white)}
.offer .pass{margin:calc(-1 * var(--s6)) 0 var(--s2) calc(-1 * var(--s2));max-width:none;width:calc(100% + var(--s3))}
#tickets .tickets{margin-top:var(--s8)}

/* Hero mit Foto-Collage, Etikett und Ticket */
.hero-v2{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s6);align-items:center}
.hero-visual{position:relative;padding-bottom:var(--s5)}
.hero-visual .photo-frame{max-width:380px;margin-left:auto}
.hero-visual .pass{position:absolute;left:0;bottom:0;max-width:340px;z-index:2}
.hero-copy .lead{margin-top:var(--s3);color:var(--muted)}
.hero-copy .statement{margin-top:var(--s4);font:400 24px/1.3 var(--font-head);color:var(--black)}

/* Kette: zu dir finden → anders auftreten → die Richtigen → Kunden */
.chain{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s5);counter-reset:c}
.chain li{position:relative;border-top:2px solid var(--black);padding-top:var(--s3)}
.chain li b{display:block;font:400 32px/1 var(--font-head);color:var(--black)}
.chain li p{margin-top:var(--s2);color:var(--muted);font-size:var(--small)}
.chain li::after{content:'';position:absolute;top:-2px;left:0;height:2px;width:100%;background:var(--white);transform-origin:right;transform:scaleX(1);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*200ms)}
.chain.is-in li::after{transform:scaleX(0)}
.system{margin-top:var(--s5);display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center;border:1px solid var(--line);padding:var(--s4)}
.system .tag{font:700 11px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--black);padding:var(--s1) var(--s2)}

/* João-Abschnitt nach Vorbild Sektion 3 */
.about-v2{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s7);align-items:start}
.thesis{font:400 32px/1.15 var(--font-head);color:var(--black)}
.proof-note{font-size:var(--small);color:var(--muted)}

/* Störer: runder Stempel mit Datum */
.final{position:relative}
.stamp{width:176px;height:176px;border-radius:50%;background:var(--black);color:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);text-align:center;margin:var(--s5) auto 0;transform:rotate(-8deg);animation:float-c 7s ease-in-out infinite;position:relative}
.stamp::before{content:'';position:absolute;inset:8px;border-radius:50%;border:1px dashed rgba(255,255,255,.6)}
.stamp .st-k{font:700 11px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase}
.stamp .st-d{font:400 24px/1 var(--font-head)}
.stamp .st-t{font:400 24px/1 var(--font-head)}

@keyframes float-a{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-8px)}}
@keyframes float-b{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-.5deg) translateY(-8px)}}
@keyframes float-c{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}

@media(max-width:900px){
  .hero-v2,.about-v2{grid-template-columns:1fr;gap:var(--s5)}
  .chain{grid-template-columns:1fr 1fr}
  .hero-visual .photo-frame{margin:0 auto}
  .label-card{right:0}
}
@media(max-width:760px){
  .chain{grid-template-columns:1fr}
  .system{grid-template-columns:1fr}
  .hero-visual .pass{position:relative;margin:calc(-1 * var(--s5)) auto 0;left:auto}
  .offer .pass{margin:calc(-1 * var(--s5)) 0 var(--s2);width:100%}
}
@media(prefers-reduced-motion:reduce){.label-card,.pass,.stamp{animation:none}.chain li::after{display:none}}
.hero-visual .label-card{top:auto;bottom:calc(var(--s8) + var(--s5))}
.stamp .st-d{font-size:32px}

/* ================= VERSION 3 · Kinoticket in Originalproportion =================
   Vorbild: Kino- und Konzertticket, Format ca. 2,4 : 1 (z. B. 152 x 63 mm), maßstäblich verkleinert.
   Aufbau: Foto | Inhalt | Abriss mit Lochung. Schwarz/Weiß/Papier, kein Rot. */
.kino{--w:360px;position:relative;width:var(--w);max-width:100%;aspect-ratio:2.4/1;display:grid;grid-template-columns:28% 1fr 18%;background:var(--paper);color:var(--black);border:1px solid #1a1a1a;font-family:var(--font-body);transform:rotate(-2deg);animation:kino-float 7s ease-in-out infinite;box-shadow:0 1px 0 #1a1a1a}
.kino.small{--w:300px}
.kino-photo{background:var(--soft);border-right:1px solid #1a1a1a;display:grid;place-items:center;font-size:11px;color:var(--muted);overflow:hidden}
.kino-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.kino-main{padding:8px 12px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.kino-top{display:flex;justify-content:space-between;font:700 8px/1.2 var(--font-body);letter-spacing:.18em;text-transform:uppercase}
.kino-title{font:400 22px/1 var(--font-head);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kino-sub{font:400 9px/1.3 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.kino-fields{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px;border-top:1px solid #1a1a1a;padding-top:4px}
.kino-fields span{display:block;font:700 7px/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.kino-fields b{display:block;font:700 10px/1.2 var(--font-body)}
.kino-stub{position:relative;border-left:1px dashed #1a1a1a;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 0}
.kino-stub .adm{writing-mode:vertical-rl;transform:rotate(180deg);font:700 9px/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase}
.kino-stub .no{font:700 7px/1 var(--font-body);letter-spacing:.1em}
.kino-stub .bars{width:60%;height:14px;background:repeating-linear-gradient(90deg,#1a1a1a 0 1px,transparent 1px 3px,#1a1a1a 3px 5px,transparent 5px 6px)}
.kino-stub::before,.kino-stub::after{content:'';position:absolute;left:-6px;width:11px;height:11px;border-radius:50%;background:var(--white);border:1px solid #1a1a1a}
.kino-stub::before{top:-6px}.kino-stub::after{bottom:-6px}
.kino.dark{background:#111;color:#fbf8f2;border-color:#111}
.kino.dark .kino-fields{border-top-color:#fbf8f2}
.kino.dark .kino-fields span{color:#bdbdbd}
.kino.dark .kino-stub{border-left-color:#fbf8f2}
.kino.dark .kino-stub .bars{background:repeating-linear-gradient(90deg,#fbf8f2 0 1px,transparent 1px 3px,#fbf8f2 3px 5px,transparent 5px 6px)}
.kino.dark .kino-photo{border-right-color:#fbf8f2}
@keyframes kino-float{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-6px)}}

.hero-visual .kino{position:absolute;left:0;bottom:0;z-index:2}
.offer .kino{margin:calc(-1 * var(--s6)) auto var(--s2);transform-origin:center}
.offer.vip .kino{animation-delay:-3s}

/* Spiegel-Abschnitt: Alltagsszenen wie beim Vorbild */
.mirror{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s5);align-items:start}
.scenes{list-style:none}
.scenes li{font:400 24px/1.3 var(--font-head);color:var(--black);padding:var(--s2) 0;border-top:1px solid var(--line)}
.scenes li:last-child{color:var(--muted)}
.punch{font:400 32px/1.15 var(--font-head);color:var(--black)}
.pre{font:400 24px/1.2 var(--font-head);color:var(--muted);margin-bottom:var(--s2)}

@media(max-width:900px){.mirror{grid-template-columns:1fr;gap:var(--s4)}}
@media(max-width:760px){
  .hero-visual .kino{position:relative;margin:calc(-1 * var(--s5)) auto 0;left:auto}
  .offer .kino{margin:calc(-1 * var(--s5)) auto var(--s2)}
  .kino{--w:320px}
}
@media(prefers-reduced-motion:reduce){.kino{animation:none}}