/* ==========================================================================
   JTP Active Invest AG – gemeinsames Design-System der Landingpages
   Farbwelt ausgelesen von jtpai.vip am 16.09.2026:
   Grund #131313 · Gold #D7B56D · Hellgold #F7E7CE · Weiss #FFFFFF · Poppins
   Gold ist identisch mit dem CI-Gold aus dem Dokumentenstandard V3.

   SCHRIFT: Cambria, gemäss Dokumentenstandard CI V3 die verbindliche
   JTP-Schrift. Keine Mischschriften. Cambria liegt auf Windows und auf
   Mac mit Office vor; darunter greifen Palatino und Georgia – dieselbe
   Anmutung, keine Drittabfrage bei Google, keine Ladezeit.
   ========================================================================== */

:root{
  --ink:#131313;          /* Grund dunkel, wie jtpai.vip */
  --ink-2:#1d1d1d;
  --gold:#D7B56D;         /* CI-Gold */
  --gold-hell:#F7E7CE;
  --gold-hover:#FFD86E;
  --gold-dunkel:#8A6F32;  /* Gold auf hellem Grund, kontraststark genug */
  --papier:#FBFAF7;
  --papier-2:#F2F0EA;
  --linie:#DCD8CF;
  --text:#23262A;
  --text-leise:#5C5F64;
  --weiss:#FFFFFF;
  --sans:Cambria,"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --breite:1120px;
  --schmal:44rem;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--papier);color:var(--text);
  font-family:var(--sans);font-size:18px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Goldene Hervorhebung, CI V3: sparsam, nur Schlüsselbegriffe ---------- */
.g{color:var(--gold-dunkel);font-weight:700;}
.dunkel .g{color:var(--gold);font-weight:700;}
img{max-width:100%;height:auto;display:block;}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px;}
.eng{max-width:var(--schmal);}

/* ---------- Kopfzeile: nur Logo und Telefon, kein Menü ---------- */
.kopf{background:var(--ink);color:var(--weiss);}
.kopf .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;
            justify-content:space-between;padding-top:16px;padding-bottom:16px;}
.kopf img{width:132px;}
.kopf a{color:var(--gold);text-decoration:none;font-weight:600;white-space:nowrap;}
.kopf a:hover{color:var(--gold-hover);}

/* ---------- Dunkle und helle Bänder ---------- */
.dunkel{background:var(--ink);color:var(--weiss);}
.dunkel h2,.dunkel h3{color:var(--weiss);}
.dunkel .leise{color:#B9BCC0;}
.hell{background:var(--papier);}
.hell-2{background:var(--papier-2);}
section{padding:clamp(48px,7vw,88px) 0;}

/* ---------- Kopfbereich mit Bild ---------- */
.held{position:relative;background:var(--ink);color:var(--weiss);overflow:hidden;}
.held::before{content:"";position:absolute;inset:0;
  background:url("bilder/joe-livepainting.jpg") 62% 42%/cover no-repeat;}
.held::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(19,19,19,.96) 0%,rgba(19,19,19,.93) 38%,rgba(19,19,19,.58) 72%,rgba(19,19,19,.38) 100%);}
.held .wrap{position:relative;z-index:1;
  padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px);}
.held-text{max-width:40rem;}
@media (max-width:760px){
  .held::after{background:linear-gradient(180deg,rgba(19,19,19,.82) 0%,rgba(19,19,19,.95) 46%,rgba(19,19,19,.97) 100%);}
  .held::before{background-position:58% 30%;}
}

/* ---------- Werkstreifen ---------- */
.werkstreifen{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));}
.werkstreifen figure{margin:0;}
.werkstreifen img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.werkstreifen figcaption strong{display:block;color:var(--gold);font-weight:700;}
.bild-breit img{width:100%;}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-weight:600;line-height:1.18;letter-spacing:-0.015em;margin:0 0 .6em;}
h1{font-size:clamp(2rem,4.6vw,3.15rem);}
h2{font-size:clamp(1.5rem,2.9vw,2.1rem);margin-top:0;}
h3{font-size:1.18rem;margin-bottom:.4em;}
p{margin:0 0 1em;max-width:68ch;}
a{color:var(--gold-dunkel);}
.dunkel a{color:var(--gold);}
.vorspann{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.6;color:var(--text-leise);max-width:60ch;}
.dunkel .vorspann{color:#D6D8DB;}
.augenbraue{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
            color:var(--gold-dunkel);margin:0 0 .9rem;}
.dunkel .augenbraue{color:var(--gold);}
.leise{color:var(--text-leise);font-size:.94rem;}
.klein{font-size:.86rem;color:var(--text-leise);}

/* ---------- Goldene Trennlinie, CI-konform sparsam ---------- */
.strich{width:64px;height:2px;background:var(--gold);border:0;margin:0 0 1.6rem;}

/* ---------- Die drei Wege ---------- */
.wege{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));}
.weg{background:var(--weiss);border:1px solid var(--linie);border-top:3px solid var(--gold);
     padding:26px 24px 24px;display:flex;flex-direction:column;}
.weg h3{margin-top:0;}
.weg .preis{margin-top:auto;padding-top:14px;border-top:1px solid var(--linie);
            font-weight:600;color:var(--ink);}
.weg .preis span{display:block;font-weight:400;font-size:.86rem;color:var(--text-leise);margin-top:.3rem;}

/* ---------- Tabellen ---------- */
.tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 1.2rem;}
th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
   color:var(--text-leise);font-weight:600;padding:0 14px .6rem 0;border-bottom:2px solid var(--gold);}
td{padding:.7rem 14px .7rem 0;border-bottom:1px solid var(--linie);vertical-align:top;}
.dunkel th{color:var(--gold);}
.dunkel td{border-bottom-color:#2E2E2E;}

/* ---------- Ablauf ---------- */
.ablauf{list-style:none;margin:0;padding:0;counter-reset:schritt;}
.ablauf li{position:relative;padding:0 0 1.5rem 3.2rem;counter-increment:schritt;}
.ablauf li::before{content:counter(schritt);position:absolute;left:0;top:-2px;
  width:2.1rem;height:2.1rem;border:1px solid var(--gold);color:var(--gold-dunkel);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:600;}
.dunkel .ablauf li::before{color:var(--gold);}
.ablauf .dauer{display:block;font-size:.85rem;color:var(--text-leise);margin-top:.2rem;}

/* ---------- Bilder und Platzhalter ---------- */
figure{margin:0 0 1.4rem;}
figcaption{font-size:.85rem;color:var(--text-leise);padding-top:.55rem;line-height:1.5;}
.platzhalter{border:1px dashed var(--gold-dunkel);background:var(--papier-2);
  min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:26px;color:var(--gold-dunkel);font-size:.9rem;line-height:1.5;}
.dunkel .platzhalter{background:#1B1B1B;border-color:var(--gold);color:var(--gold);}

/* ---------- Handlungsaufforderung ---------- */
a.cta,.dunkel a.cta,button.cta,.dunkel button.cta{display:inline-block;background:var(--gold);
  color:var(--ink);text-decoration:none;font-weight:700;padding:.85rem 1.7rem;
  border:1px solid var(--gold);cursor:pointer;font-family:var(--sans);font-size:1rem;}
a.cta:hover,.dunkel a.cta:hover,button.cta:hover{background:var(--gold-hover);
  border-color:var(--gold-hover);color:var(--ink);}
a.cta-2,.dunkel a.cta-2{display:inline-block;background:transparent;color:var(--gold);
  text-decoration:none;font-weight:700;padding:.85rem 1.7rem;border:1px solid var(--gold);}
a.cta-2:hover,.dunkel a.cta-2:hover{background:var(--gold);color:var(--ink);}
.hell a.cta-2,.hell-2 a.cta-2{color:var(--gold-dunkel);border-color:var(--gold-dunkel);}
.tel{font-size:clamp(1.4rem,3vw,2rem);font-weight:600;letter-spacing:-0.01em;
  text-decoration:none;display:inline-block;margin:.2rem 0 .6rem;}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linie);}
.faq > div{border-bottom:1px solid var(--linie);padding:1.5rem 0;}
.faq h3{font-size:1.05rem;margin:0 0 .5rem;}
.faq p:last-child{margin-bottom:0;}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--ink);color:#B9BCC0;font-size:.9rem;}
.fuss .wrap{padding-top:44px;padding-bottom:44px;}
.fuss a{color:var(--gold);text-decoration:none;}
.fuss a:hover{text-decoration:underline;}
.fuss-nav{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 1.4rem;padding:0;list-style:none;}
.fuss-recht{display:flex;flex-wrap:wrap;gap:8px 20px;margin:1.2rem 0 0;padding:1.2rem 0 0;
            list-style:none;border-top:1px solid #2E2E2E;font-size:.84rem;}

/* ---------- Raster ---------- */
.zwei{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start;}
.lauftext{max-width:70ch;}
.lauftext > *:first-child{margin-top:0;}
.drei{display:grid;gap:24px 32px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

/* ---------- Zugänglichkeit ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:10;background:var(--gold);color:var(--ink);padding:.6rem 1rem;}

@media print{
  .kopf,.cta,.cta-2{display:none;}
  body{background:#fff;font-size:11pt;}
  .dunkel{background:#fff;color:#000;}
}

/* ---------- Kleines Bild je Baustein ---------- */
.baustein-bild{margin:1rem 0 0;}
.baustein-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;}

/* ---------- Presseleiste ---------- */
.presse{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));align-items:start;}
.presse figure{margin:0;background:var(--weiss);border:1px solid var(--linie);padding:9px;}
.presse img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;}
.presse figcaption{font-size:.78rem;line-height:1.45;padding-top:.5rem;}

/* ---------- Kopfbereich Seite 2 ---------- */
.held-2::before{background-image:url("bilder/betrachterin-werk.jpg");background-position:64% 42%;}
.held-2::after{background:
  linear-gradient(100deg,rgba(19,19,19,.95) 0%,rgba(19,19,19,.90) 34%,rgba(19,19,19,.42) 66%,rgba(19,19,19,.18) 100%);}
@media (max-width:760px){
  .held-2::before{background-position:58% 26%;}
  .held-2::after{background:linear-gradient(180deg,rgba(19,19,19,.72) 0%,rgba(19,19,19,.93) 44%,rgba(19,19,19,.97) 100%);}
}

/* ---------- Aufzählungen im Fliesstext ---------- */
main ul{margin:0 0 1.2rem;padding:0;list-style:none;max-width:68ch;}
main ul li{position:relative;padding-left:1.3rem;margin-bottom:.6rem;}
main ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--gold);}

/* ---------- Formular ---------- */
.formular{margin:1.6rem 0 0;max-width:32rem;}
.formular label{display:block;font-weight:700;margin-bottom:.45rem;font-size:.95rem;}
.formular-zeile{display:flex;flex-wrap:wrap;gap:10px;}
.formular input[type="email"]{flex:1 1 15rem;min-width:0;font-family:var(--sans);font-size:1rem;
  padding:.82rem .9rem;border:1px solid var(--linie);background:var(--weiss);color:var(--text);}
.formular input[type="email"]:focus-visible{outline:2px solid var(--gold-dunkel);outline-offset:1px;}
.formular button{font-family:var(--sans);font-size:1rem;cursor:pointer;}
.platzhalter-text{color:var(--gold-dunkel);font-weight:700;background:var(--papier-2);
  border:1px dashed var(--gold-dunkel);padding:.1rem .45rem;}

/* ---------- Kopfbereich Seite 3 ---------- */
.held-3::before{background-image:url("bilder/muczka-hall.jpg");background-position:60% 52%;}
.held-3::after{background:
  linear-gradient(100deg,rgba(19,19,19,.96) 0%,rgba(19,19,19,.92) 36%,rgba(19,19,19,.52) 70%,rgba(19,19,19,.30) 100%);}
@media (max-width:760px){
  .held-3::before{background-position:56% 50%;}
  .held-3::after{background:linear-gradient(180deg,rgba(19,19,19,.78) 0%,rgba(19,19,19,.94) 46%,rgba(19,19,19,.97) 100%);}
}

/* ---------- Freebie-Seiten ---------- */
.karte{background:var(--weiss);border:1px solid var(--linie);border-top:3px solid var(--gold);padding:24px;}
.dunkel .karte{background:#1B1B1B;border-color:#2E2E2E;border-top-color:var(--gold);}
.karte h3{margin-top:0;}
.karte .nr{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-dunkel);font-weight:700;margin-bottom:.4rem;}
.dunkel .karte .nr{color:var(--gold);}
.beleg{font-size:.92rem;}
.beleg dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:0;}
.beleg dt{color:var(--text-leise);}
.beleg dd{margin:0;font-weight:600;}
.haken{list-style:none;margin:0 0 1.6rem;padding:0;max-width:60ch;}
.haken li{position:relative;padding-left:2rem;margin-bottom:.9rem;}
.haken li::before{content:"";position:absolute;left:0;top:.28em;width:1rem;height:1rem;
  border:1.5px solid var(--gold-dunkel);}
.dunkel .haken li::before{border-color:var(--gold);}
.rechtshinweis{border-top:1px solid var(--linie);margin-top:2.4rem;padding-top:1.2rem;
  font-size:.84rem;color:var(--text-leise);}

/* ---------- Kopfbereich Seite 4 ---------- */
.held-4::before{background-image:url("bilder/joe-brand-hero.jpg");background-position:64% 44%;}
@media (max-width:760px){ .held-4::before{background-position:62% 32%;} }

/* ---------- Zeitstrahl ---------- */
.zeitstrahl{list-style:none;margin:0;padding:0;position:relative;}
.zeitstrahl::before{content:"";position:absolute;left:5.6rem;top:.6rem;bottom:.6rem;width:1px;background:var(--linie);}
.dunkel .zeitstrahl::before{background:#2E2E2E;}
.zeitstrahl li{position:relative;display:grid;grid-template-columns:5.6rem 1fr;gap:0 2rem;
  padding:0 0 2rem;align-items:start;}
.zeitstrahl .jahr{font-weight:700;color:var(--gold-dunkel);font-size:1.05rem;
  text-align:right;padding-top:.05rem;position:relative;}
.dunkel .zeitstrahl .jahr{color:var(--gold);}
.zeitstrahl li>div{position:relative;}
.zeitstrahl li>div::before{content:"";position:absolute;left:-2.4rem;top:.62em;
  width:9px;height:9px;background:var(--gold);border-radius:50%;}
.zeitstrahl h3{margin:0 0 .35rem;font-size:1.1rem;}
.zeitstrahl p{margin:0;max-width:62ch;}
@media (max-width:620px){
  .zeitstrahl::before{left:.25rem;}
  .zeitstrahl li{grid-template-columns:1fr;gap:.2rem;padding-left:1.7rem;}
  .zeitstrahl .jahr{text-align:left;}
  .zeitstrahl li>div::before{left:-1.7rem;}
}

/* ---------- Historie: Jahre mit mehreren Ereignissen ---------- */
.jahre{list-style:none;margin:0;padding:0;position:relative;}
.jahre::before{content:"";position:absolute;left:6.4rem;top:1rem;bottom:1rem;width:1px;background:var(--linie);}
.dunkel .jahre::before{background:#2E2E2E;}
.jahr-block{display:grid;grid-template-columns:6.4rem 1fr;gap:0 2.6rem;padding:0 0 2.6rem;}
.jahr-block > .marke{text-align:right;position:relative;padding-top:.1rem;}
.jahr-block .zahl{font-size:1.5rem;font-weight:700;color:var(--gold-dunkel);line-height:1;letter-spacing:-0.02em;}
.dunkel .jahr-block .zahl{color:var(--gold);}
.jahr-block .inhalt{position:relative;}
.jahr-block .inhalt::before{content:"";position:absolute;left:-2.9rem;top:.5rem;
  width:11px;height:11px;background:var(--gold);border-radius:50%;
  box-shadow:0 0 0 4px var(--papier);}
.dunkel .jahr-block .inhalt::before{box-shadow:0 0 0 4px var(--ink);}
.hell-2 .jahr-block .inhalt::before{box-shadow:0 0 0 4px var(--papier-2);}
.ereignis{margin:0 0 1.1rem;padding:0;}
.ereignis:last-child{margin-bottom:0;}
.ereignis h3{font-size:1.06rem;margin:0 0 .25rem;}
.ereignis p{margin:0;max-width:62ch;font-size:.96rem;}
.ereignis .quelle{display:inline-block;font-size:.78rem;color:var(--text-leise);
  border:1px solid var(--linie);padding:.05rem .45rem;margin-top:.35rem;}
.dunkel .ereignis .quelle{color:#9A9DA2;border-color:#2E2E2E;}
.jahr-bild{margin:1rem 0 0;}
.jahr-bild img{width:100%;max-width:26rem;}
.arbeitsstand{background:#FFF6DF;border:1px solid var(--gold);padding:1rem 1.2rem;margin:0 0 2rem;}
.arbeitsstand strong{color:var(--gold-dunkel);}
@media (max-width:640px){
  .jahre::before{left:.3rem;}
  .jahr-block{grid-template-columns:1fr;gap:.4rem;padding-left:2rem;}
  .jahr-block > .marke{text-align:left;}
  .jahr-block .inhalt::before{left:-2rem;}
}

/* ---------- Video: Zwei-Klick-Lösung -------------------------------------
   Vor dem Klick lädt die Seite nur das lokal abgelegte Vorschaubild. Es
   entsteht keine Verbindung zu Google und kein Cookie. Erst der Klick setzt
   das iframe, dann über youtube-nocookie.com. Ohne JavaScript bleibt der
   Knopf ein Link auf YouTube, das Video ist also immer erreichbar.
   ------------------------------------------------------------------------ */
.video{margin:0 0 1.6rem;}
.video-rahmen{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);overflow:hidden;}
.video-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
a.video-start,.dunkel a.video-start{
  position:absolute;inset:0;display:block;padding:0;border:0;cursor:pointer;
  background:none;text-decoration:none;color:var(--weiss);
}
.video-start img{width:100%;height:100%;object-fit:cover;display:block;}
.video-start::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,19,19,.10) 0%,rgba(19,19,19,.62) 100%);
}
.video-knopf{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;background:rgba(19,19,19,.72);
  border:2px solid var(--gold);z-index:2;transition:background .18s,transform .18s;
}
.video-knopf::before{
  content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent var(--gold);
}
.video-start:hover .video-knopf,.video-start:focus-visible .video-knopf{
  background:var(--gold);transform:translate(-50%,-50%) scale(1.06);
}
.video-start:hover .video-knopf::before,.video-start:focus-visible .video-knopf::before{
  border-left-color:var(--ink);
}
.video-marke{
  position:absolute;right:0;bottom:0;z-index:2;padding:.5rem .9rem;
  font-size:.8rem;line-height:1.4;color:var(--weiss);text-shadow:0 1px 3px rgba(0,0,0,.75);
}
.video-marke strong{color:var(--gold);font-weight:700;letter-spacing:.02em;}
.video figcaption{font-size:.9rem;line-height:1.6;color:var(--text-leise);padding-top:.7rem;}
.dunkel .video figcaption{color:rgba(255,255,255,.72);}
.video figcaption a{color:inherit;}
.video-hinweis{font-size:.8rem;color:var(--text-leise);padding-top:.35rem;}
.dunkel .video-hinweis{color:rgba(255,255,255,.6);}
@media (max-width:560px){.video-knopf{width:58px;height:58px;}
  .video-knopf::before{border-width:10px 0 10px 16px;}}

/* ---------- Einwilligung im Formular ---------- */
.haken-zeile{display:flex;align-items:flex-start;gap:.6rem;margin-top:1rem;
  font-size:.92rem;line-height:1.5;cursor:pointer;}
.dunkel .haken-zeile{color:rgba(255,255,255,.86);}
.haken-zeile input{margin-top:.25rem;width:17px;height:17px;accent-color:var(--gold);flex:0 0 auto;}