/* MARKTBILD-Kacheln. Liegt hier und nicht in einer Seitendatei, weil zwei
   Seiten dieselben Kacheln zeigen: die Startseite und ElevateLab. Die
   Farben der Kacheln kommen aus den Klassen f-* am Ende; ElevateLab
   ueberschreibt sie in pages/css/elevatelab.css mit der eigenen Welt.
   Gebaut werden die Kacheln in pages/js/index-markt.js aus
   content/marktbild.js. */
/* MARKTBILD: fuenf Kacheln fliegen nacheinander ein und bleiben als Collage stehen. */
.mkt{position:relative;padding:clamp(72px,8vw,130px) clamp(20px,5vw,80px) clamp(60px,7vw,110px)}
.mkt-kopf{max-width:1180px;margin:0 auto clamp(34px,4vw,58px);text-align:center}
.mkt-kick{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px}
  /* Der Kicker fuehrt auf das Marktbild im ElevateLab, wo dieselben Zahlen
     ausfuehrlicher stehen. */
  a.mkt-kick{display:inline-block;text-decoration:none;
    transition:color .25s ease,transform .25s ease}
  a.mkt-kick span{display:inline-block;transition:transform .25s ease}
  a.mkt-kick:hover span{transform:translateX(3px)}
  a.mkt-kick:focus-visible{outline:3px solid #7D64F8;outline-offset:4px;border-radius:4px}
.mkt-kopf h2{font-size:var(--h2);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink);margin:0}
.mkt-bahn{overflow:hidden;padding:clamp(12px,1.6vw,26px) clamp(12px,1.6vw,26px) clamp(34px,4vw,60px)}
.mkt-feld{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(26px,3.2vw,52px) clamp(18px,2vw,30px);max-width:1180px;margin:0 auto;align-items:start}
.mkt-t{grid-column:span 4;translate:var(--fx,0) var(--fy,0);opacity:0;will-change:translate,opacity}
.mkt-t.an{translate:0 var(--drift,0px);opacity:1;
  transition:translate var(--dauer,1.05s) cubic-bezier(.16,.84,.26,1),opacity .6s ease}
/* Nach dem Einflug traegt die Kachel samt Quellenzeile die Drift, damit der
   Abstand zur Zeile darunter bei allen gleich bleibt. */
.mkt-t.ruht{transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.mkt-t:nth-child(2){margin-top:clamp(26px,4vw,64px)}
.mkt-t:nth-child(3){margin-top:clamp(8px,1.4vw,22px)}
.mkt-t:nth-child(4){grid-column:2/6}
.mkt-t:nth-child(5){grid-column:8/12;margin-top:clamp(26px,3.6vw,58px)}

.mkt-bild{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:4/3;padding:clamp(20px,2vw,30px);border-radius:6px;overflow:hidden;
  background:var(--k-bg,#111111);border:1px solid var(--k-kante,transparent);outline:none;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mkt-nr{position:absolute;right:14px;top:10px;font-size:clamp(34px,3.6vw,58px);font-weight:900;
  letter-spacing:-.04em;color:var(--k-nr,rgba(255,255,255,.14));line-height:1}

/* Das Thema steht immer da. Darunter wechselt Aussage gegen Herleitung. */
.mkt-th{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--k-label,rgba(255,255,255,.72))}
.mkt-wechsel{display:grid;margin-top:12px}
.mkt-vorn,.mkt-hint{grid-area:1/1;align-self:end;display:block;min-width:0}

.mkt-vorn{transition:opacity .26s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.mkt-vorn strong{display:block;font-size:clamp(19px,1.62vw,25px);font-weight:900;
  letter-spacing:-.03em;line-height:1.14;color:var(--k-stark,#fff)}

.mkt-hint{opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.mkt-zahl{display:block;font-size:clamp(34px,3.5vw,52px);font-weight:900;letter-spacing:-.045em;
  line-height:1;color:var(--k-stark,#fff);white-space:nowrap}
.mkt-hint small{display:block;margin-top:12px;font-size:clamp(14px,1.08vw,15.5px);line-height:1.55;
  color:var(--k-fein,rgba(255,255,255,.88));opacity:0;transition:opacity .3s ease}

.mkt-bild:hover .mkt-vorn,.mkt-bild:focus-visible .mkt-vorn{opacity:0;transform:translateY(-10px)}
.mkt-bild:hover .mkt-hint,.mkt-bild:focus-visible .mkt-hint{opacity:1;transform:none;
  transition-delay:.1s,.1s}
.mkt-bild:hover .mkt-hint small,.mkt-bild:focus-visible .mkt-hint small{opacity:1;transition-delay:.3s}
.mkt-bild:focus-visible{box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 0 3px #7D64F8}

.mkt-q{display:block;margin-top:12px;font-size:12px;color:var(--muted-dim);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.mkt-q:hover{color:#7D64F8;border-color:rgba(125,100,248,.45)}
.mkt-t:hover .mkt-bild{transform:translateY(-6px)}

/* Unter dem Marktbild die einzige Frage, die zaehlt: und bei Ihnen? */
.mkt-tun{max-width:1180px;margin:clamp(30px,3.6vw,56px) auto 0;text-align:center}
.mkt-frage{margin:0 0 clamp(20px,2.2vw,30px);font-size:clamp(21px,2.1vw,30px);font-weight:900;
  letter-spacing:-.03em;line-height:1.18;color:var(--ink)}
/* Gleiche Form wie "Let's talk" im Kopf: eckige Rundung, kein Verlauf, kein Schein. */
.mkt-cta{display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:clamp(17px,1.5vw,21px) clamp(28px,2.6vw,38px);border-radius:6px;
  background:#5B3CF6;color:#fff;text-decoration:none;
  font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:-.01em;
  transition:filter .2s ease,transform .2s ease}
.mkt-cta span{font-size:clamp(14px,1.05vw,15.5px);font-weight:600;color:rgba(255,255,255,.8)}
.mkt-cta:hover{filter:brightness(1.12);transform:translateY(-1px)}
.mkt-cta:focus-visible{outline:3px solid #7D64F8;outline-offset:3px}
@media(max-width:700px){.mkt-cta{width:100%;flex-direction:column;gap:5px;align-items:center}}

/* Kachelfarben, alle vier schon auf der Seite im Einsatz:
   Schwarz #111111 - Off-White #F2EFEA - Ice #5B3CF6 (kaltes Ende des Verlaufs)
   - Weiss #FFFFFF - Fire #8A4FC0 (warmes Ende des Verlaufs) */
.f-schwarz {--k-bg:#111111;--k-stark:#FFFFFF;--k-fein:rgba(255,255,255,.86);--k-label:#9C86FF;--k-nr:rgba(255,255,255,.12);--k-kante:rgba(255,255,255,.12)}
.f-offweiss{--k-bg:#F2EFEA;--k-stark:#111111;--k-fein:rgba(17,17,17,.78);   --k-label:#4B2E9E;--k-nr:rgba(17,17,17,.10)}
.f-ice     {--k-bg:#5B3CF6;--k-stark:#FFFFFF;--k-fein:rgba(255,255,255,.92);--k-label:rgba(255,255,255,.80);--k-nr:rgba(255,255,255,.22)}
.f-weiss   {--k-bg:#FFFFFF;--k-stark:#111111;--k-fein:rgba(17,17,17,.78);   --k-label:#4B2E9E;--k-nr:rgba(17,17,17,.10)}
.f-fire    {--k-bg:#8A4FC0;--k-stark:#FFFFFF;--k-fein:rgba(255,255,255,.94);--k-label:rgba(255,255,255,.86);--k-nr:rgba(255,255,255,.22)}

/* Ohne Maus: beides steht untereinander, nichts versteckt sich. */
/* Ohne Maus: Aussage und Herleitung stehen untereinander, nichts versteckt sich. */
@media(hover:none){
  .mkt-bild{aspect-ratio:auto;padding-block:clamp(22px,2.4vw,32px)}
  .mkt-wechsel{display:block}
  .mkt-vorn,.mkt-hint{opacity:1;transform:none;pointer-events:auto}
  .mkt-hint{margin-top:18px}
  .mkt-hint small{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .mkt-t{translate:0 0;opacity:1}
}
@media(max-width:1080px){
  .mkt-feld{grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,40px) clamp(16px,2.4vw,26px)}
  .mkt-t,.mkt-t:nth-child(4),.mkt-t:nth-child(5){grid-column:auto;margin-top:0}
  .mkt-t:nth-child(2),.mkt-t:nth-child(4){margin-top:clamp(20px,4vw,42px)}
}
@media(max-width:700px){
  .mkt{padding:clamp(56px,11vw,90px) 18px}
  .mkt-feld{grid-template-columns:1fr}
  .mkt-t:nth-child(2),.mkt-t:nth-child(4){margin-top:0}
}

/* Zeile unter dem Selbsttest-Knopf: das Versprechen, dass ein Mensch antwortet. */
.mkt-hook{max-width:620px;margin:16px auto 0;font-size:clamp(14.5px,1.05vw,16px);line-height:1.6;color:var(--muted)}
@media(max-width:700px){.mkt-frage{font-size:clamp(19px,5.4vw,22px);padding:0 4px;hyphens:auto;-webkit-hyphens:auto}}