/* Startseite i2app.de (1.1.0) — neutral, nennt keine Apps. Aus dem Inline-<style> ausgelagert,
   weil die CSP der Basis nur Stylesheets von 'self' erlaubt (style-src 'self'). */
:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a1020;
  color: #f5f7ff;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 73% 35%, #34407966 0, transparent 38%),
              radial-gradient(circle at 15% 82%, #0a777b33 0, transparent 35%),
              #0a1020;
}
.page { width: min(1440px, 100%); min-height: 100vh; margin: auto; padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: 1.25rem; font-weight: 800; letter-spacing: -.055em; }
.mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #8b83ff, #3fd9ca); color: #08101c; font-weight: 900; font-size: 1.1rem; box-shadow: 0 8px 32px #7775ff45; }
.header-note, footer { font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; color: #aab5d0; }
main { flex: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(24px, 4vw, 72px); padding-block: 72px; }
.copy { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; color: #70eadc; font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
h1 { max-width: 740px; margin: 0; font-size: clamp(3.8rem, 6.7vw, 7.4rem); line-height: .97; letter-spacing: -.075em; font-weight: 800; }
h1 span { display: block; color: #a09aff; }
.lead { max-width: 34rem; margin: 30px 0 0; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.7; color: #b4bfd7; }
.flow { display: flex; align-items: center; gap: 15px; margin-top: 44px; color: #dce6f9; font-size: .83rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.flow i { width: 48px; height: 1px; background: linear-gradient(90deg, #8b83ff, #50e0cf); position: relative; }
.flow i::after { content: ""; width: 6px; height: 6px; border-top: 1px solid #50e0cf; border-right: 1px solid #50e0cf; transform: rotate(45deg); position: absolute; right: 0; top: -3px; }
.visual { min-width: 0; position: relative; isolation: isolate; }
.visual::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: #7774ff35; filter: blur(80px); z-index: -1; }
.visual svg { display: block; width: 100%; height: auto; max-height: 680px; filter: drop-shadow(0 35px 55px #02071770); }
footer { padding-top: 22px; border-top: 1px solid #ffffff1b; letter-spacing: .02em; text-transform: none; }
footer span:last-child { color: #7885a3; }
@media (max-width: 850px) {
  main { grid-template-columns: 1fr; padding-block: 70px 50px; }
  .copy { max-width: 680px; }
  .visual { width: min(100%, 650px); margin: -10px auto 0; }
}
@media (max-width: 520px) {
  .page { padding: 24px; }
  .header-note { display: none; }
  main { padding-block: 76px 32px; gap: 38px; }
  h1 { font-size: clamp(3.4rem, 14vw, 5.2rem); }
  .lead { margin-top: 22px; }
  .flow { margin-top: 32px; }
  footer { font-size: .72rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .spark { animation: glow 4s ease-in-out infinite alternate; transform-origin: 200px 255px; }
  @keyframes glow { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.05); } }
}
  
.brand-tld { color: #7d8ba8; }