/* =========================================================================
   TRUST LEAP — App-Mockup Animations & Styles (CSS)
   App-treue Mockups für die Lösungs-Scrolly (dunkle Variante).
   Angelehnt an die echte Trust-Leap-App (Pagebuilder + Dashboard).
   Loaded AFTER sections.css → überschreibt die generischen Mockup-Styles.
   ========================================================================= */

:root { --mk-green: #3FB488; --mk-coral: #F07F5E; }

/* shared atoms inside the .screen container */
.tl-solution .ta-bar,
.tl-solution .ta-elements,
.tl-solution .ta-struct,
.tl-solution .ta-dash,
.tl-solution .ta-card { box-sizing: border-box; }

/* ======================= STEP 1 — PAGEBUILDER ======================= */
/* Override the generic grid from sections.css */
.tl-solution .gfx.ta-builder {
  display: grid; grid-template-rows: 8.5% 1fr; grid-template-columns: none;
  background: #0c121b;
}

/* top toolbar */
.tl-solution .ta-bar {
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 0 2.4cqw;
  background: #0e1622; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tl-solution .ta-burger {
  width: 3cqw; height: 3cqw; border-radius: 0.7cqw; flex: 0 0 auto;
  background: var(--mk-coral);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16M4 12h10M4 18h16' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center/64% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16M4 12h10M4 18h16' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center/64% no-repeat;
  /* fall back: solid coral block */
}
.tl-solution .ta-title { font-weight: 600; font-size: 1.5cqw; color: var(--text); letter-spacing: 0.01em; }
.tl-solution .ta-bar-r { margin-left: auto; display: flex; align-items: center; gap: 1.4cqw; }
.tl-solution .ta-zoom { font-family:'Space Mono',monospace; font-size: 1.2cqw; color: var(--text-2); }
.tl-solution .ta-save {
  font-size: 1.3cqw; font-weight: 700; color: #07140f;
  background: var(--mk-green); padding: 0.9cqw 1.8cqw; border-radius: 0.8cqw;
  display: flex; align-items: center; gap: 0.6cqw;
}
.tl-solution .ta-save::before {
  content:""; width: 1.2cqw; height: 1.2cqw; border-radius: 50%;
  background: #07140f; opacity: 0.55;
}

/* builder body */
.tl-solution .ta-body { position: relative; display: grid; grid-template-columns: 30% 1fr; min-height: 0; }

/* Elemente panel */
.tl-solution .ta-elements {
  background: #0b1320; border-right: 1px solid rgba(255,255,255,0.07);
  padding: 2.6cqw 2cqw; display: flex; flex-direction: column; gap: 1.6cqw; overflow: hidden;
}
.tl-solution .ta-el-h { font-size: 1.7cqw; font-weight: 700; color: var(--text); }
.tl-solution .ta-tabs { display: flex; gap: 1.6cqw; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 1cqw; }
.tl-solution .ta-tabs span { font-size: 1.25cqw; color: var(--text-2); }
.tl-solution .ta-tabs span.on { color: var(--mk-coral); font-weight: 700; position: relative; }
.tl-solution .ta-tabs span.on::after {
  content:""; position:absolute; left:0; right:0; bottom:-1.1cqw; height: 0.25cqw; background: var(--mk-coral); border-radius: 2px;
}
.tl-solution .ta-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; }
.tl-solution .ta-wtile {
  aspect-ratio: 1 / 0.86; border-radius: 1cqw;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7cqw;
}
.tl-solution .ta-wtile i {
  width: 2.6cqw; height: 2.6cqw; border-radius: 0.5cqw; background: var(--mk-coral); opacity: 0.92;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
}
.tl-solution .ta-wtile span { font-size: 1.05cqw; color: var(--text-2); text-align: center; line-height: 1.1; }
.tl-solution .ta-ai {
  margin-top: auto; text-align: center; font-size: 1.25cqw; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--mk-coral), #d65f3e);
  padding: 1.2cqw; border-radius: 1cqw; display: flex; align-items: center; justify-content: center; gap: 0.7cqw;
}
.tl-solution .ta-ai::before { content:"\2728"; font-size: 1.3cqw; }

/* canvas preview */
/* canvas preview — dark (Trust-Leap-Output, keine helle Seite) */
.tl-solution .ta-canvas {
  position: relative; background: linear-gradient(160deg,#0f1826,#0a1019); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4cqw;
}
.tl-solution .ta-pv-eyebrow { font-size: 1.1cqw; letter-spacing: 0.18em; color: var(--mk-coral); font-weight: 700; margin-bottom: 1.4cqw; text-transform: uppercase; }
.tl-solution .ta-pv-h1 {
  text-align: center; font-weight: 800; font-size: 2.7cqw; line-height: 1.12; color: #eaf0f6; max-width: 80%;
}
.tl-solution .ta-pv-h1 b { color: var(--mk-coral); font-weight: 800; }
.tl-solution .ta-pv-sub { margin-top: 1.4cqw; font-size: 1.15cqw; color: #9aa6b3; text-align: center; max-width: 66%; line-height: 1.4; }
.tl-solution .ta-pv-btns { display: flex; gap: 1.2cqw; margin-top: 2cqw; }
.tl-solution .ta-pv-btns b { font-size: 1.15cqw; font-weight: 700; padding: 1cqw 1.8cqw; border-radius: 0.7cqw; }
.tl-solution .ta-pv-btns b.f { background: var(--mk-green); color: #07140f; }
.tl-solution .ta-pv-btns b.o { border: 1px solid rgba(255,255,255,0.25); color: #eaf0f6; }

/* Seitenstruktur floating panel */
.tl-solution .ta-struct {
  position: absolute; top: 6%; right: 5%; width: 40%;
  background: #0e1726; border: 1px solid rgba(255,255,255,0.1); border-radius: 1cqw;
  padding: 1.6cqw 1.4cqw; box-shadow: 0 1.4cqw 3cqw rgba(0,0,0,0.4);
}
.tl-solution .ta-struct-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2cqw; }
.tl-solution .ta-struct-h span { font-size: 1.25cqw; font-weight: 700; color: var(--text); }
.tl-solution .ta-struct-h i { width: 1.5cqw; height: 1.5cqw; opacity: 0.5; background:
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat; }
.tl-solution .ta-struct-row {
  display: flex; align-items: center; gap: 1cqw; padding: 0.9cqw 0.6cqw;
  font-size: 1.15cqw; color: var(--text-2); border-radius: 0.5cqw;
}
.tl-solution .ta-struct-row::before { content:""; width: 1.4cqw; height: 1.1cqw; border-radius: 0.25cqw; background: var(--mk-green); opacity: 0.85; }
.tl-solution .ta-struct-row.on { background: rgba(240,127,94,0.14); color: #fff; }
.tl-solution .ta-struct-row.on::before { background: var(--mk-coral); }

/* AI build animation: rows reveal + canvas fades up when active */
.tl-solution .gfx.ta-builder .ta-struct-row { opacity: 0; transform: translateX(0.6cqw); }
.tl-solution .gfx.ta-builder.active .ta-struct-row { animation: ta-row-in 0.4s ease forwards; }
.tl-solution .gfx.ta-builder.active .ta-struct-row:nth-child(2){ animation-delay: 0.10s; }
.tl-solution .gfx.ta-builder.active .ta-struct-row:nth-child(3){ animation-delay: 0.18s; }
.tl-solution .gfx.ta-builder.active .ta-struct-row:nth-child(4){ animation-delay: 0.26s; }
.tl-solution .gfx.ta-builder.active .ta-struct-row:nth-child(5){ animation-delay: 0.34s; }
.tl-solution .gfx.ta-builder.active .ta-struct-row:nth-child(6){ animation-delay: 0.42s; }
.tl-solution .gfx.ta-builder.active .ta-struct-row:nth-child(7){ animation-delay: 0.50s; }
.tl-solution .gfx.ta-builder.active .ta-struct-row:nth-child(8){ animation-delay: 0.58s; }
@keyframes ta-row-in { to { opacity: 1; transform: translateX(0); } }

.tl-solution .gfx.ta-builder .ta-pv-h1,
.tl-solution .gfx.ta-builder .ta-pv-eyebrow,
.tl-solution .gfx.ta-builder .ta-pv-sub,
.tl-solution .gfx.ta-builder .ta-pv-btns { opacity: 0; transform: translateY(0.8cqw); }
.tl-solution .gfx.ta-builder.active .ta-pv-eyebrow { animation: ta-up 0.5s ease 0.15s forwards; }
.tl-solution .gfx.ta-builder.active .ta-pv-h1 { animation: ta-up 0.5s ease 0.28s forwards; }
.tl-solution .gfx.ta-builder.active .ta-pv-sub { animation: ta-up 0.5s ease 0.42s forwards; }
.tl-solution .gfx.ta-builder.active .ta-pv-btns { animation: ta-up 0.5s ease 0.56s forwards; }
@keyframes ta-up { to { opacity: 1; transform: translateY(0); } }

/* ======================= STEP 3 — DASHBOARD ======================= */
.tl-solution .gfx.ta-dash {
  display: flex; flex-direction: column; gap: 1.6cqw; padding: 3cqw 3cqw; background: #0c121b;
}
.tl-solution .ta-dh { display: flex; align-items: center; gap: 1.2cqw; }
.tl-solution .ta-dh b { font-size: 1.85cqw; font-weight: 800; color: var(--text); }
.tl-solution .ta-dh .ta-pill-x {
  font-size: 0.95cqw; font-weight: 700; letter-spacing: 0.05em; color: var(--mk-coral);
  background: rgba(240,127,94,0.16); border: 1px solid rgba(240,127,94,0.3); padding: 0.4cqw 0.9cqw; border-radius: 2cqw;
}
.tl-solution .ta-dh .ta-pill-g {
  font-size: 0.95cqw; color: var(--text-2); background: rgba(255,255,255,0.05);
  padding: 0.4cqw 0.9cqw; border-radius: 2cqw; display: flex; align-items: center; gap: 0.5cqw;
}
.tl-solution .ta-dh .ta-pill-g::before { content:""; width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: var(--mk-coral); }
.tl-solution .ta-dh .ta-dh-r { margin-left: auto; display: flex; gap: 0.8cqw; }
.tl-solution .ta-dh-r b { font-size: 1cqw; font-weight: 700; padding: 0.7cqw 1.1cqw; border-radius: 0.6cqw; white-space: nowrap; }
.tl-solution .ta-dh-r b.o { color: var(--text-2); border: 1px solid rgba(255,255,255,0.14); }
.tl-solution .ta-dh-r b.g { color: #07140f; background: var(--mk-green); }

/* KPI row: two tiles + conversion card */
.tl-solution .ta-drow { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.6cqw; }
.tl-solution .ta-kpis { display: flex; flex-direction: column; gap: 1.2cqw; }
.tl-solution .ta-kpi {
  display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 1.8cqw;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 1.1cqw;
}
.tl-solution .ta-kpi .ta-ico { width: 4cqw; height: 4cqw; border-radius: 0.9cqw; flex: 0 0 auto; display: grid; place-items: center; }
.tl-solution .ta-kpi .ta-ico.g { background: rgba(63,180,136,0.16); }
.tl-solution .ta-kpi .ta-ico.c { background: rgba(240,127,94,0.16); }
.tl-solution .ta-kpi .ta-ico::after { content:""; width: 2cqw; height: 2cqw; border-radius: 0.4cqw; }
.tl-solution .ta-kpi .ta-ico.g::after { background: var(--mk-green); }
.tl-solution .ta-kpi .ta-ico.c::after { background: var(--mk-coral); }
.tl-solution .ta-kpi .ta-kt { display: flex; flex-direction: column; gap: 0.3cqw; }
.tl-solution .ta-kpi .ta-kt span { font-size: 1.1cqw; color: var(--text-2); }
.tl-solution .ta-kpi .ta-kt b { font-size: 2.4cqw; font-weight: 800; color: var(--text); line-height: 1; }

/* conversion rate card */
.tl-solution .ta-conv {
  padding: 1.8cqw; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 1.1cqw;
  display: grid; grid-template-columns: auto 1fr; gap: 1.6cqw; align-items: center;
}
.tl-solution .ta-conv-h { grid-column: 1 / -1; font-size: 1.3cqw; font-weight: 700; color: var(--text); }
.tl-solution .ta-conv-big { display: flex; flex-direction: column; }
.tl-solution .ta-conv-big span { font-size: 0.85cqw; letter-spacing: 0.08em; color: var(--text-2); text-transform: uppercase; }
.tl-solution .ta-conv-big b { font-size: 3.2cqw; font-weight: 800; color: var(--mk-green); line-height: 1; }
.tl-solution .ta-conv-big em { font-style: normal; font-size: 1cqw; color: var(--text-2); }
.tl-solution .ta-conv-split { display: flex; flex-direction: column; gap: 1cqw; border-left: 1px solid rgba(255,255,255,0.08); padding-left: 1.6cqw; }
.tl-solution .ta-conv-line { display: flex; align-items: center; gap: 1cqw; }
.tl-solution .ta-conv-line i { width: 0.4cqw; height: 2.6cqw; border-radius: 2px; flex: 0 0 auto; }
.tl-solution .ta-conv-line.g i { background: var(--mk-green); }
.tl-solution .ta-conv-line.c i { background: var(--mk-coral); }
.tl-solution .ta-conv-line .ta-cl { display: flex; flex-direction: column; }
.tl-solution .ta-conv-line .ta-cl b { font-size: 1.15cqw; color: var(--text); font-weight: 600; }
.tl-solution .ta-conv-line .ta-cl span { font-size: 0.95cqw; color: var(--text-2); }
.tl-solution .ta-conv-line .ta-cp { margin-left: auto; font-size: 1.5cqw; font-weight: 800; color: var(--text); }

/* chart card */
.tl-solution .ta-chart {
  padding: 1.8cqw; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 1.1cqw;
  display: flex; flex-direction: column; gap: 1cqw; flex: 1; min-height: 0;
}
.tl-solution .ta-chart-h { display: flex; align-items: center; justify-content: space-between; }
.tl-solution .ta-chart-h b { font-size: 1.3cqw; font-weight: 700; color: var(--text); }
.tl-solution .ta-chart-h span { font-size: 1cqw; color: var(--text-2); }
.tl-solution .ta-plot { position: relative; flex: 1; min-height: 9cqw; }
.tl-solution .ta-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tl-solution .ta-plot .ta-axis { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.tl-solution .ta-plot .ta-line { fill: none; stroke: var(--mk-green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600; }
.tl-solution .gfx.ta-dash.active .ta-plot .ta-line { animation: ta-draw 1.1s ease 0.2s forwards; }
@keyframes ta-draw { to { stroke-dashoffset: 0; } }
.tl-solution .ta-days { display: flex; justify-content: space-between; font-size: 0.95cqw; color: var(--text-2); font-family:'Space Mono',monospace; }

/* KPI number tick-up: numbers grow when active */
.tl-solution .gfx.ta-dash .ta-kpi .ta-kt b,
.tl-solution .gfx.ta-dash .ta-conv-big b { opacity: 0.25; transform: translateY(0.5cqw); }
.tl-solution .gfx.ta-dash.active .ta-kpi .ta-kt b { animation: ta-up 0.5s ease 0.3s forwards; }
.tl-solution .gfx.ta-dash.active .ta-conv-big b { animation: ta-up 0.5s ease 0.45s forwards; }

@media (prefers-reduced-motion: reduce) {
  .tl-solution .gfx.ta-builder .ta-struct-row,
  .tl-solution .gfx.ta-builder .ta-pv-h1,
  .tl-solution .gfx.ta-builder .ta-pv-eyebrow,
  .tl-solution .gfx.ta-builder .ta-pv-sub,
  .tl-solution .gfx.ta-builder .ta-pv-btns,
  .tl-solution .gfx.ta-dash .ta-kpi .ta-kt b,
  .tl-solution .gfx.ta-dash .ta-conv-big b { opacity: 1 !important; transform: none !important; animation: none !important; }
  .tl-solution .gfx.ta-dash.active .ta-plot .ta-line { animation: none; stroke-dashoffset: 0; }
}

/* ======================= STEP 4 — REVIEWS (published testimonials) ======================= */
.tl-solution .gfx.mock-trust.ta-reviews {
  display: block; padding: 0; background: #0c121b; position: relative;
}
.tl-solution .ta-rv-browser {
  position: absolute; inset: 7% 6%;
  display: flex; flex-direction: column;
  background: #0e1726; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.2cqw; overflow: hidden;
  box-shadow: 0 2cqw 4cqw rgba(0,0,0,0.4);
}
.tl-solution .ta-rv-chrome {
  display: flex; align-items: center; gap: 0.9cqw;
  padding: 1.1cqw 1.6cqw; background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tl-solution .ta-rv-chrome i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: rgba(255,255,255,0.18); flex: 0 0 auto; }
.tl-solution .ta-rv-chrome i:nth-child(1){ background:#ff5f57; } .tl-solution .ta-rv-chrome i:nth-child(2){ background:#febc2e; } .tl-solution .ta-rv-chrome i:nth-child(3){ background:#28c840; }
.tl-solution .ta-rv-chrome span {
  margin-left: 1cqw; font-family:'Space Mono',monospace; font-size: 1cqw; color: var(--text-2);
  background: rgba(255,255,255,0.04); padding: 0.4cqw 1.2cqw; border-radius: 1cqw;
}
.tl-solution .ta-rv-page {
  flex: 1; min-height: 0; padding: 2.6cqw 2.4cqw;
  background: linear-gradient(160deg,#101a26,#0b121b);
  display: flex; flex-direction: column; gap: 2cqw;
}
.tl-solution .ta-rv-head { display: flex; align-items: center; justify-content: space-between; }
.tl-solution .ta-rv-eyebrow { font-size: 1.5cqw; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.tl-solution .ta-rv-rating { display: flex; align-items: baseline; gap: 0.9cqw; }
.tl-solution .ta-rv-rating b { font-size: 2cqw; font-weight: 800; color: var(--text); }
.tl-solution .ta-rv-rating .ta-rv-stars { color: var(--mk-coral); font-size: 1.3cqw; letter-spacing: 0.1cqw; }
.tl-solution .ta-rv-rating em { font-style: normal; font-size: 1cqw; color: var(--text-2); }
.tl-solution .ta-rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.tl-solution .ta-rv-item {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1cqw; padding: 1.4cqw 1.4cqw;
  display: flex; flex-direction: column; gap: 0.9cqw;
}
.tl-solution .ta-rv-s { color: var(--mk-coral); font-size: 1.1cqw; letter-spacing: 0.08cqw; }
.tl-solution .ta-rv-item p { font-size: 1.05cqw; line-height: 1.4; color: var(--text); font-style: italic; margin: 0; }
.tl-solution .ta-rv-who { display: flex; align-items: center; gap: 0.8cqw; margin-top: auto; }
.tl-solution .ta-rv-ava { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; }
.tl-solution .ta-rv-who span:last-child { font-size: 0.92cqw; color: var(--text-2); line-height: 1.25; }

/* published toast */
.tl-solution .ta-rv-toast {
  position: absolute; right: 8%; bottom: 11%; z-index: 5;
  display: flex; align-items: center; gap: 0.8cqw;
  padding: 1cqw 1.5cqw; border-radius: 1cqw;
  background: rgba(63,180,136,0.16); border: 1px solid rgba(63,180,136,0.4);
  color: var(--text); font-size: 1.05cqw; font-weight: 600;
  box-shadow: 0 1.4cqw 3cqw rgba(0,0,0,0.45);
}
.tl-solution .ta-rv-toast .ta-rv-toast-s { color: var(--mk-coral); font-size: 1cqw; }
.tl-solution .ta-rv-toast em { font-style: normal; color: var(--mk-green); font-weight: 700; }

/* reveal animations on active */
.tl-solution .gfx.ta-reviews .ta-rv-item { opacity: 0; transform: translateY(1cqw); }
.tl-solution .gfx.ta-reviews.active .ta-rv-item { animation: ta-up 0.5s ease forwards; }
.tl-solution .gfx.ta-reviews.active .ta-rv-item:nth-child(1){ animation-delay: 0.15s; }
.tl-solution .gfx.ta-reviews.active .ta-rv-item:nth-child(2){ animation-delay: 0.27s; }
.tl-solution .gfx.ta-reviews.active .ta-rv-item:nth-child(3){ animation-delay: 0.39s; }
.tl-solution .gfx.ta-reviews .ta-rv-toast { opacity: 0; transform: translateY(1.4cqw) scale(0.96); }
.tl-solution .gfx.ta-reviews.active .ta-rv-toast { animation: ta-toast-in 0.5s cubic-bezier(.22,.61,.36,1) 0.6s forwards; }
@keyframes ta-toast-in { to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .tl-solution .gfx.ta-reviews .ta-rv-item,
  .tl-solution .gfx.ta-reviews .ta-rv-toast { opacity: 1 !important; transform: none !important; animation: none !important; }
}