/* Handy-Trailer von forex-desk (28.09.2026) - Hochformat, ein 3D-iPhone im Raum zeigt die
   Funktionen als lebendige Oberfläche. Vorbild: Motion-Design-Trailer im Story-Format
   (Story-Balken, zweifarbige Sätze, rollende Zahlen, schwebende Widgets).
   Alle Klassen mit "ht-". Die Bühne (.ht) misst sich per Container-Einheiten (cqw/cqh). */
.ht {
  position: relative; overflow: hidden; container-type: size; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 30%, #0d1712 0%, #07080a 55%, #040506 100%);
  color: #f4f4f5; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none; text-align: left;
  --ht-minze: #40dfa4; --ht-rot: #ff6b78; --ht-grau: #8d8f97; --ht-karte: #121318; --ht-rand: rgba(255, 255, 255, 0.08);
}
.ht * { box-sizing: border-box; }
.ht-aura { position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(40% 30% at 50% 58%, rgba(64, 223, 164, 0.16), transparent 70%), radial-gradient(35% 25% at 70% 35%, rgba(110, 140, 255, 0.1), transparent 70%); }
.ht-raster { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 7cqw 7cqw; -webkit-mask-image: radial-gradient(70% 55% at 50% 60%, #000, transparent); mask-image: radial-gradient(70% 55% at 50% 60%, #000, transparent); }

/* Story-Balken oben */
.ht-balken { position: absolute; top: 2.2cqh; left: 5cqw; right: 5cqw; display: flex; gap: 1.2cqw; z-index: 20; }
.ht-balken i { flex: 1; height: 0.45cqh; min-height: 2px; border-radius: 9px; background: rgba(255, 255, 255, 0.18); overflow: hidden; position: relative; }
.ht-balken i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--f, 0)); }

/* Überschriften */
.ht-titel { position: absolute; left: 7cqw; right: 7cqw; top: 6.5cqh; z-index: 15; font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; font-size: 7.6cqw; }
.ht-titel > span { display: block; }
.ht-titel .ht-b { color: var(--ht-minze); }
.ht-wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ht-wort > b { display: inline-block; font-weight: inherit; transform: translateY(110%); }
.ht-gross { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 8cqw; z-index: 16; font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-size: 12cqw; }
.ht-gross > span { display: block; }
.ht-gross .ht-b { color: var(--ht-minze); }

/* 3D-Handy */
.ht-raum { position: absolute; inset: 0; perspective: 170cqh; perspective-origin: 50% 45%; z-index: 5; }
.ht-anker { position: absolute; left: 50%; top: 58%; width: 0; height: 0; transform-style: preserve-3d; }
.ht-telefon { position: absolute; transform-style: preserve-3d; will-change: transform; }
.ht-schicht { position: absolute; inset: 0; border-radius: var(--ht-radius); backface-visibility: visible; }
.ht-schicht.ht-rahmen { background: linear-gradient(90deg, #3a3d44 0%, #9ea3ad 18%, #5b5f68 50%, #a8adb7 82%, #3a3d44 100%); }
.ht-front {
  position: absolute; inset: 0; border-radius: var(--ht-radius); background: #050506;
  box-shadow: inset 0 0 0 1.5px #2c2e33, inset 0 0 0 3px #0b0c0e;
}
.ht-schirm { position: absolute; overflow: hidden; background: #07080a; border-radius: var(--ht-schirm-radius); }
.ht-insel { position: absolute; left: 50%; transform: translateX(-50%); background: #000; border-radius: 99px; z-index: 30; }
/* Glanz (30.09.2026): wandert per transform statt background-position und ohne Überblend-Modus -
   vorher wurde er bei jeder Bewegung neu gezeichnet und gemischt, das Handy im Film stockte */
.ht-glanz { position: absolute; inset: 0; border-radius: var(--ht-radius); pointer-events: none; z-index: 40; overflow: hidden; }
.ht-glanz::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 250%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.075) 42%, rgba(255, 255, 255, 0.015) 50%, transparent 58%);
  transform: translateX(calc(var(--ht-glanz, 50%) * -0.6)); will-change: transform; }
.ht-rueck { position: absolute; inset: 0; border-radius: var(--ht-radius); background: linear-gradient(160deg, #2b2e35, #16181c 60%, #23262c); }
.ht-kamera { position: absolute; border-radius: 22%; background: linear-gradient(160deg, #202227, #121316); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ht-taste { position: absolute; background: linear-gradient(90deg, #5d616a, #b4b8c1, #5d616a); border-radius: 2px; }
.ht-schatten { position: absolute; left: 50%; top: 91%; width: 44cqw; height: 4cqh; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent); filter: blur(6px); z-index: 2; }

/* Bildschirm-Inhalt (Zeichenfläche 390 x 844, wird skaliert) */
.ht-app { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; font-size: 15px; color: #f4f4f5; background: #07080a; }
.ht-status { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 14px 30px 0 34px; font-weight: 600; font-size: 16px; z-index: 5; }
.ht-status svg { height: 13px; }
.ht-kopf { position: absolute; top: 58px; left: 20px; right: 20px; display: flex; align-items: center; gap: 10px; z-index: 5; }
.ht-logo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(165deg, #1d1f2a, #0b0c11); border: 1px solid rgba(255, 255, 255, 0.15); font-weight: 800; font-size: 14px; letter-spacing: -0.05em; }
.ht-logo span { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(160deg, #fcfcfe, #9da1ac 50%, #eceef3 68%, #aeb2bc); }
.ht-kopf b { font-size: 16px; letter-spacing: -0.01em; }
.ht-pille { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; border: 1px solid rgba(64, 223, 164, 0.35); color: var(--ht-minze); background: rgba(64, 223, 164, 0.08); }
.ht-pille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ht-minze); box-shadow: 0 0 8px var(--ht-minze); }
.ht-seite { position: absolute; top: 108px; left: 0; right: 0; bottom: 112px; padding: 0 20px; opacity: 0; }
.ht-h { font-size: 30px; font-weight: 800; letter-spacing: -0.035em; }
.ht-unter { font-size: 13.5px; color: var(--ht-grau); margin-top: 2px; }
.ht-karte { background: var(--ht-karte); border: 1px solid var(--ht-rand); border-radius: 18px; padding: 14px 16px; }
.ht-liste { display: grid; gap: 10px; margin-top: 16px; }
.ht-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ht-sym { font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.ht-chip { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; border: 1px solid; }
.ht-chip.gruen { color: var(--ht-minze); border-color: rgba(64, 223, 164, 0.4); background: rgba(64, 223, 164, 0.08); }
.ht-chip.rot { color: var(--ht-rot); border-color: rgba(255, 107, 120, 0.4); background: rgba(255, 107, 120, 0.08); }
.ht-chip.grau { color: #c9cacf; border-color: rgba(255, 255, 255, 0.18); }
.ht-klein { font-size: 12.5px; color: var(--ht-grau); }
.ht-leiste { height: 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 8px; }
.ht-leiste i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #e9e9ec; transform-origin: left; transform: scaleX(0); }
.ht-ki { margin-top: 12px; border-color: rgba(110, 140, 255, 0.28); background: linear-gradient(160deg, rgba(110, 140, 255, 0.1), var(--ht-karte)); }
.ht-ki .ht-klein { color: #8ea6ff; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
.ht-ki p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: #d7d8dc; min-height: 58px; }
.ht-cursor { display: inline-block; width: 2px; height: 1em; background: #8ea6ff; vertical-align: -2px; margin-left: 1px; animation: ht-blink 0.8s steps(1) infinite; }
@keyframes ht-blink { 50% { opacity: 0; } }
.ht-tage { display: flex; gap: 6px; margin-top: 14px; }
.ht-tag { flex: 1; text-align: center; padding: 8px 0; border-radius: 12px; border: 1px solid var(--ht-rand); font-size: 12px; color: var(--ht-grau); }
.ht-tag b { display: block; font-size: 17px; color: #f4f4f5; }
.ht-tag.an { border-color: rgba(64, 223, 164, 0.45); background: rgba(64, 223, 164, 0.08); }
.ht-countdown { margin-top: 14px; display: grid; gap: 4px; }
.ht-countdown strong { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ht-termin { display: grid; grid-template-columns: 46px 44px 1fr; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 14px; background: var(--ht-karte); border: 1px solid var(--ht-rand); font-size: 13px; }
.ht-termin .zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.ht-termin .waehr { font-size: 11px; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.16); }
.ht-termin.hoch { border-color: rgba(255, 107, 120, 0.35); background: linear-gradient(90deg, rgba(255, 107, 120, 0.14), var(--ht-karte) 70%); }
.ht-termin.mittel { border-color: rgba(243, 189, 85, 0.3); background: linear-gradient(90deg, rgba(243, 189, 85, 0.1), var(--ht-karte) 70%); }
.ht-summe { font-size: 36px; font-weight: 800; letter-spacing: -0.035em; color: var(--ht-minze); font-variant-numeric: tabular-nums; margin-top: 14px; }
.ht-kurve { margin-top: 10px; height: 190px; }
.ht-kurve path.linie { fill: none; stroke: var(--ht-minze); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ht-kurve path.flaeche { fill: url(#ht-verlauf); opacity: 0; }
.ht-kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ht-kennzahlen .ht-karte { padding: 11px 12px; border-radius: 14px; }
.ht-kennzahlen strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.ht-psy-oben { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ht-ring { position: relative; width: 74px; height: 74px; margin-top: 6px; }
.ht-ring svg { transform: rotate(-90deg); }
.ht-ring strong { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; font-weight: 800; color: var(--ht-minze); }
.ht-kosten { font-size: 25px; font-weight: 800; letter-spacing: -0.03em; color: var(--ht-rot); margin-top: 18px; font-variant-numeric: tabular-nums; }
.ht-muster { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ht-karte); border: 1px solid var(--ht-rand); position: relative; overflow: hidden; }
.ht-muster b { font-size: 13.5px; }
.ht-muster .betrag { color: var(--ht-rot); font-weight: 750; font-size: 14px; font-variant-numeric: tabular-nums; }
.ht-muster::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--anteil) * 100%); background: linear-gradient(90deg, var(--ht-rot), rgba(255, 107, 120, 0.1)); }
/* Untere Navigation wie in der echten App (AppShell.tsx): schwebende Milchglas-Kachel mit
   10 px Abstand über dem Home-Indikator, sechs Einträge, Symbole aus icons.tsx in 19 px,
   aktiver Eintrag in Akzentfarbe mit gleitendem Strich darunter. */
.ht-tabs {
  position: absolute; left: 10px; right: 10px; bottom: 44px; min-height: 60px; z-index: 6;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; border-radius: 22px;
  background: rgba(30, 31, 37, 0.93); /* ohne Weichzeichner (Film ruckelte, 30.09.2026) */
  border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.ht-tabs span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; align-self: center; padding: 6px 0; font-size: 9px; font-weight: 600; letter-spacing: -0.01em; color: var(--ht-grau); transition: color 0.3s ease; }
.ht-tabs span svg { width: 19px; height: 19px; display: block; }
.ht-tabs span.an { color: var(--ht-minze); }
.ht-strich { position: absolute; bottom: 6px; opacity: 0; width: 18px; height: 3px; border-radius: 99px; background: var(--ht-minze); transition: left 0.35s cubic-bezier(0.34, 1.3, 0.64, 1); }
.ht-heim { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.85); }

/* Schwebende Widgets neben dem Handy */
.ht-widget {
  position: absolute; z-index: 12; padding: 2.4cqw 3cqw; border-radius: 4cqw; background: rgba(18, 19, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 3cqh 7cqh rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(64, 223, 164, 0.08);
  font-size: 3.1cqw; opacity: 0;
}
.ht-widget small { display: block; font-size: 2.4cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ht-grau); }
.ht-widget strong { display: block; font-size: 5.6cqw; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 0.4cqw; }
.ht-widget.minze { background: linear-gradient(160deg, #40dfa4, #1fa877); color: #04130c; border-color: transparent; }
.ht-widget.minze small { color: rgba(4, 19, 12, 0.7); }

/* Abspann */
.ht-ende { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2.4cqh; z-index: 18; opacity: 0; text-align: center; }
.ht-ende .ht-logo-gross { width: 22cqw; height: 22cqw; border-radius: 6cqw; display: grid; place-items: center; background: linear-gradient(165deg, #1d1f2a, #0b0c11); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 3cqh 9cqh rgba(64, 223, 164, 0.18); }
.ht-ende .ht-logo-gross span { font-weight: 800; font-size: 10cqw; letter-spacing: -0.05em; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(160deg, #fcfcfe, #9da1ac 50%, #eceef3 68%, #aeb2bc); }
.ht-ende h3 { margin: 0; font-size: 10cqw; font-weight: 800; letter-spacing: -0.05em; }
.ht-ende p { margin: 0; font-size: 4.2cqw; color: #b9bac0; }
.ht-ende p b { color: var(--ht-minze); font-weight: 700; }