/* ============================================================
   WECONN3CT Landingpage — Webseiten für Betriebe
   Organic-editorial: Asymmetrie, Grain, handgezeichnete Akzente
   Brand: Blau #2E3EE8 · Lila #9D4EDD · Pink #FF5082 · Inter/Pacifico
   ============================================================ */

:root {
    --blue: #2E3EE8;
    --blue-soft: #6A7CFF;
    --blue-deep: #1B2470;
    --purple: #9D4EDD;
    --pink: #FF5082;
    --ink: #0D1238;
    --ink-60: rgba(13, 18, 56, 0.62);
    --bg: #F8F8FC;
    --line: rgba(13, 18, 56, 0.09);
    --grad: linear-gradient(100deg, var(--blue) 0%, var(--purple) 55%, var(--pink) 110%);
    --shadow-soft: 0 8px 32px rgba(13, 18, 56, 0.07);
    --shadow-lift: 0 24px 64px rgba(27, 36, 112, 0.16);
    --ease: cubic-bezier(0.22, 0.6, 0.2, 1);
    --ease-glass: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px;
    /* iOS blaeht sonst beim Drehen ins Querformat einzelne Textbloecke auf */
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    padding-top: 78px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 780px; }

/* ---------- Background: Blobs + Grain ---------- */
.bg-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; filter: blur(90px); opacity: 0.5; }
.blob-1 { width: 620px; height: 560px; top: -200px; right: -140px;
    border-radius: 62% 38% 55% 45% / 55% 48% 52% 45%;
    background: radial-gradient(circle at 40% 40%, rgba(106,124,255,0.38), rgba(157,78,221,0.16) 60%, transparent 78%); }
.blob-2 { width: 520px; height: 480px; bottom: -180px; left: -160px;
    border-radius: 45% 55% 40% 60% / 60% 42% 58% 40%;
    background: radial-gradient(circle at 60% 60%, rgba(255,80,130,0.15), rgba(46,62,232,0.12) 55%, transparent 78%); }
body::before { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
    opacity: 0.05; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); }

/* ---------- Header: oben randlos und transparent, beim Scrollen eine Glaspille ---------- */
.site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 50;
    display: flex; justify-content: center; padding: 0 20px;
    pointer-events: none; transition: padding 0.6s var(--ease-glass); }
.header-inner { pointer-events: auto; width: 100%; max-width: 1180px; height: 78px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px; border-radius: 0; background: transparent;
    border: 1px solid transparent; box-shadow: none;
    transition: max-width 0.6s var(--ease-glass), height 0.6s var(--ease-glass),
        padding 0.6s var(--ease-glass), border-radius 0.6s var(--ease-glass),
        background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease,
        backdrop-filter 0.45s ease; }
.site-header.shrunk { padding-top: 14px; }
.site-header.shrunk .header-inner { max-width: 1020px; height: 62px; padding: 0 12px 0 26px;
    border-radius: 999px;
    /* Glas: milchige Fläche, Lichtkante oben, weicher Schlagschatten */
    background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.50));
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border-color: rgba(255,255,255,0.72);
    box-shadow: 0 18px 44px rgba(27,36,112,0.14), inset 0 1px 0 rgba(255,255,255,0.9); }
.logo { height: 38px; width: auto; transition: height 0.6s var(--ease-glass); }
.site-header.shrunk .logo { height: 32px; }
/* Zwei Wege im Header: WhatsApp rund und knapp, die Rufnummer ausgeschrieben */
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-wa { width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid var(--line);
    transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease; }
.header-wa svg { width: 19px; height: 19px; fill: #25D366; display: block; }
.header-wa:hover { border-color: #25D366; transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.28); }
.site-header.shrunk .header-wa { width: 38px; height: 38px;
    border-color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.86); }
.header-phone { display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.95rem;
    padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px;
    background: #fff; transition: all 0.2s ease; }
.site-header.shrunk .header-phone { padding: 7px 14px; border-color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.86); box-shadow: 0 4px 14px rgba(27,36,112,0.08); }
.header-phone:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow-soft); }
.header-phone svg { color: var(--blue); }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 80px; position: relative; }
/* Beide Spalten oben buendig: das Formular ist deutlich hoeher als der Text,
   zentriert wuerde die Ueberschrift sonst weit nach unten rutschen */
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 64px; align-items: start; }
/* Grid-Kinder dürfen schmaler werden als ihr Inhalt — sonst sprengt
   eine nowrap-Zeile das ganze Layout (Seite wird rechts abgeschnitten) */
.hero-grid > *, .ref-stage > * { min-width: 0; }

.badge { display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--blue-deep); background: #fff; border: 1px solid var(--line);
    padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow-soft); margin-bottom: 28px;
    transform: rotate(-1deg); }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad);
    animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } }

h1 { font-size: clamp(2.1rem, 4.3vw, 3.4rem); font-weight: 900;
    letter-spacing: -0.035em; line-height: 1.14; margin-bottom: 24px; }
.h1-line { display: block; white-space: nowrap; }
.h1-line .script-blue, .h1-line .script-purple { margin-left: 0.06em; }
.h1-line:last-child .script-purple { margin-left: 0; }

/* Pacifico wirkt bei gleicher Schriftgröße kleiner als fettes Inter,
   deshalb 1.14em, damit die Akzent-Wörter optisch gleichauf sind (wie auf weconn3ct.de) */
.script-accent { font-family: 'Pacifico', cursive; font-weight: 400;
    font-size: 1.14em; line-height: 1; margin-left: 0.12em;
    background: var(--grad); -webkit-background-clip: text; background-clip: text;
    color: transparent; padding-right: 0.08em; }

/* Zwei-Wort-Akzent wie auf weconn3ct.de: erstes Wort blau, zweites lila */
.script-blue { font-family: 'Pacifico', cursive; font-weight: 400;
    font-size: 1.14em; line-height: 1; margin-left: 0.12em;
    background: linear-gradient(100deg, #60A5FA 0%, #2E3EE8 50%, #2563EB 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; padding-right: 0.08em; }
.script-purple { font-family: 'Pacifico', cursive; font-weight: 400;
    font-size: 1.14em; line-height: 1; margin-left: 0.12em;
    background: linear-gradient(100deg, #C084FC 0%, #A855F7 50%, #D946EF 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; padding-right: 0.08em; }

/* In H2s wirkt Pacifico bei 1.14em zu dominant, dort dezenter skalieren */
h2 .script-accent, h2 .script-blue, h2 .script-purple { font-size: 1.04em; }

/* Pacificos Versal-A liest sich wie ein Kleinbuchstabe, Anfangsbuchstabe leicht hochskalieren */
.script-cap { font-size: 1.18em; }

.swash-wrap { position: relative; display: inline-block; }
.swash { position: absolute; left: -2%; bottom: -0.28em; width: 104%; height: 0.32em; overflow: visible; }

.hero-sub { font-size: 1.15rem; color: var(--ink-60); max-width: 48ch; margin-bottom: 30px; }

.hero-checks { list-style: none; display: grid; gap: 12px; margin-bottom: 40px; }
.hero-checks li { position: relative; padding-left: 34px; font-size: 1.02rem; }
.hero-checks li::before { content: ''; position: absolute; left: 0; top: 2px;
    width: 22px; height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232E3EE8'/%3E%3Cstop offset='0.6' stop-color='%239D4EDD'/%3E%3Cstop offset='1' stop-color='%23FF5082'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11' fill='url(%23g)'/%3E%3Cpath d='M7.5 12.5l3 3L16.5 9' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

.hero-proof { display: flex; gap: 40px; }
.proof-item { position: relative; line-height: 1.3; }
.proof-item strong { display: block; font-size: 2.1rem; font-weight: 900; letter-spacing: -0.04em;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof-item span { font-size: 0.8rem; color: var(--ink-60); font-weight: 600; }
.proof-item:not(:first-child)::before { content: ''; position: absolute; left: -20px; top: 8px;
    width: 1px; height: 70%; background: var(--line); }

/* ---------- Form Card ---------- */
.form-wrap { position: relative; }
.form-wrap::before { content: ''; position: absolute; inset: -28px -20px auto auto;
    width: 200px; height: 200px; z-index: -1;
    border-radius: 62% 38% 55% 45% / 55% 48% 52% 45%;
    background: var(--grad); opacity: 0.14; filter: blur(6px);
    animation: morph 12s ease-in-out infinite alternate; }
@keyframes morph {
    0% { border-radius: 62% 38% 55% 45% / 55% 48% 52% 45%; transform: rotate(0deg); }
    100% { border-radius: 42% 58% 38% 62% / 48% 60% 40% 52%; transform: rotate(10deg); }
}
.form-card { position: relative; background: #fff; border-radius: 26px; padding: 34px 32px;
    border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.float-chip { position: absolute; top: -15px; right: 26px;
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #fff; background: var(--grad); padding: 8px 16px; border-radius: 999px;
    transform: rotate(2deg); box-shadow: 0 8px 20px rgba(157, 78, 221, 0.35); }
.form-card h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.form-sub { font-size: 0.9rem; color: var(--ink-60); margin-bottom: 16px; }

/* Was in der kostenlosen Analyse steckt: macht das Versprechen greifbar */
.form-gets { list-style: none; margin: 0 0 20px; padding: 14px 16px;
    background: rgba(46, 62, 232, 0.05); border-radius: 14px; }
.form-gets li { position: relative; padding-left: 25px; font-size: 0.86rem; font-weight: 600;
    color: var(--ink); line-height: 1.45; }
.form-gets li + li { margin-top: 9px; }
.form-gets li::before { content: ''; position: absolute; left: 0; top: 1px;
    width: 16px; height: 16px; border-radius: 50%; background: var(--grad);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/13px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/13px no-repeat; }

#leadform label { display: block; font-size: 0.85rem; font-weight: 700; margin: 15px 0 6px; }
#leadform label .opt { font-weight: 500; color: var(--ink-60); }
#leadform input[type="text"], #leadform input[type="email"],
#leadform input[type="tel"], #leadform select {
    width: 100%; padding: 13px 15px; font-size: 1rem; font-family: inherit;
    border: 1.5px solid var(--line); border-radius: 13px; background: var(--bg);
    color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s; appearance: none; }
#leadform select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230D1238' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; }
#leadform input:focus, #leadform select:focus { outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(46, 62, 232, 0.12); }
#leadform input::placeholder { color: rgba(13, 18, 56, 0.35); }
/* Solange noch "Bitte wählen…" gewählt ist, gedämpft wie ein Placeholder */
#leadform select:invalid { color: rgba(13, 18, 56, 0.45); }

#url-field[hidden] { display: none; }

.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

/* Zweiter Weg unter dem Formular: gleiche Groesse wie der Absende-Knopf,
   aber zurueckhaltend, damit er dem Formular nicht die Aufmerksamkeit nimmt */
.or-line { display: flex; align-items: center; gap: 14px; margin: 18px 0; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.or-line span { font-size: 0.82rem; font-weight: 700; color: rgba(13,18,56,0.42); }
.btn-wa { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
    padding: 15px 24px; border-radius: 999px; text-decoration: none;
    font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
    color: var(--ink); background: #fff; border: 1.5px solid var(--line);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease); }
.btn-wa svg { width: 21px; height: 21px; fill: #25D366; flex: none; }
.btn-wa:hover { border-color: #25D366; transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.22); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 20px;
    font-size: 0.8rem; color: var(--ink-60); font-weight: 500 !important; line-height: 1.5; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--blue); width: 16px; height: 16px; flex-shrink: 0; }
.check a { color: var(--blue); }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px 28px; font-size: 1.05rem; font-weight: 800; font-family: inherit;
    color: #fff; background: var(--blue); border: none; border-radius: 999px; cursor: pointer;
    text-decoration: none; letter-spacing: -0.01em;
    box-shadow: 0 8px 24px rgba(46, 62, 232, 0.35);
    transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); }
.btn-primary:hover { transform: translateY(-2px); background: var(--blue-deep);
    box-shadow: 0 0 24px rgba(60,100,255,0.35), 0 0 48px rgba(157,78,221,0.22), 0 12px 28px rgba(46,62,232,0.3); }
.btn-primary:active { transform: translateY(0); }
a:focus-visible, button:focus-visible, summary:focus-visible, .check input:focus-visible {
    outline: 3px solid rgba(46, 62, 232, 0.45); outline-offset: 2px; }
.btn-primary[disabled] { opacity: 0.65; cursor: wait; transform: none; }
.btn-lg { width: auto; padding: 18px 42px; font-size: 1.1rem; }
.btn-sm { width: auto; padding: 10px 20px; font-size: 0.9rem; }
.btn-inline { width: auto; padding: 14px 30px; font-size: 0.98rem; margin-top: 26px; }

.form-trust { display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 0.78rem; color: var(--ink-60); text-align: center; margin-top: 14px; }
.form-trust svg { flex-shrink: 0; color: var(--purple); }

/* ---------- Marquee ----------
   Ruhiger Ticker statt Farbbalken: das Band liegt auf dem Seitenhintergrund und
   wird nur von zwei Haarlinien gefasst. Die Farbe steckt allein in den Rauten.
   Die Maske laesst die Woerter an den Raendern ausblenden, statt sie hart
   abzuschneiden — das war der unruhigste Teil der alten Fassung. */
.marquee { position: relative; overflow: hidden; padding: 20px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.marquee-track { display: flex; align-items: center; gap: 30px; width: max-content;
    animation: marquee 46s linear infinite; }
.marquee-track span { font-size: 0.82rem; font-weight: 600; color: var(--ink-60);
    letter-spacing: 0.17em; text-transform: uppercase; white-space: nowrap; }
.marquee-track i { font-style: normal; font-size: 0.62rem; line-height: 1;
    color: var(--purple); opacity: 0.5; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Section-Head (editorial, links) ---------- */
.section { padding: 100px 0; }
.section-head { position: relative; max-width: 640px; margin-bottom: 56px; }
.kicker { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 12px; }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 900;
    letter-spacing: -0.03em; line-height: 1.14; }

/* ---------- Referenz-Karussell (volles Band direkt unter der Hero,
   läuft langsam endlos nach links — zwei identische Sets, -50 % = nahtlos) ---------- */
.hero-showcase { padding: 0 0 72px; overflow: hidden; }
.showcase-track { display: flex; width: max-content;
    animation: showcase-scroll 75s linear infinite; }
/* Kachelformat 16:13 (wie 1280×1040-Screenshots) */
.showcase-track .browser-frame { width: 640px; flex: none; margin-right: 20px; }
.showcase-track .browser-frame img { height: 520px; }
@keyframes showcase-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.browser-frame { background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.browser-frame img { width: 100%; display: block; object-fit: cover; object-position: top; }

/* ---------- System-Story (Bühne, GSAP-Loop in js/flow.js) ---------- */
.stage-wrap { display: flex; flex-direction: column; align-items: center; }
#stage-scale { width: 100%; max-width: 1124px; }
#stage { position: relative; width: 900px; height: 502px; transform-origin: top left; }
#st-scene { position: absolute; left: 0; top: 0; width: 900px; height: 470px;
    will-change: transform; backface-visibility: hidden; }
.st-sw { position: absolute; width: 58px; height: 58px; border-radius: 50%;
    box-shadow: 0 12px 28px rgba(27,36,112,0.2); }
#st-sw1 { left: 421px; top: 71px; background: #FF2D9C; }
#st-sw2 { left: 339px; top: 214px; background: #2E3EE8; }
#st-sw3 { left: 503px; top: 214px; background: #FFC53D; }
#st-pop { position: absolute; left: 425px; top: 165px; width: 60px; height: 60px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0)); }
.st-b { position: absolute; left: 448px; top: 188px; width: 12px; height: 12px; border-radius: 50%; }
#st-b1, #st-b4 { background: #FF2D9C; } #st-b2, #st-b5 { background: #2E3EE8; } #st-b3, #st-b6 { background: #FFC53D; }
#st-design { position: absolute; left: 355px; top: 130px; width: 200px; height: 172px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px;
    box-sizing: border-box; box-shadow: 0 22px 54px rgba(27,36,112,0.18); }
#st-design .d-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
#st-design .d-mark { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center;
    justify-content: center; color: #fff; font-size: 24px; font-weight: 900;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 8px 20px rgba(46,62,232,0.3); }
#st-design .dl { height: 9px; border-radius: 5px; background: rgba(13,18,56,0.5); margin-bottom: 7px; }
#st-design .d-chips { display: flex; gap: 9px; }
#st-design .d-chips i { width: 30px; height: 30px; border-radius: 9px;
    box-shadow: 0 5px 14px rgba(27,36,112,0.18); }
#st-mark { position: absolute; left: 373px; top: 148px; width: 48px; height: 48px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px;
    font-weight: 900; background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 10px 26px rgba(46,62,232,0.4); z-index: 8; }
#st-vk { position: absolute; left: 88px; top: 175px; width: 245px; height: 148px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(27,36,112,0.16); transform: rotate(-3deg);
    padding: 16px 18px 16px 30px; box-sizing: border-box; overflow: hidden; }
#st-vk .vk-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
    background: linear-gradient(180deg, #FF2D9C, #2E3EE8 55%, #FFC53D); }
#st-vk .vk-mark { position: absolute; right: 16px; top: 14px; width: 38px; height: 38px;
    border-radius: 11px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 19px; font-weight: 900;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
#st-vk .vk-l1 { width: 110px; height: 11px; border-radius: 6px; background: rgba(13,18,56,0.75); margin-bottom: 8px; }
#st-vk .vk-l2 { width: 78px; height: 8px; border-radius: 4px; background: rgba(13,18,56,0.3); }
#st-vk .vk-sep { height: 2px; border-radius: 1px; margin: 14px 0 12px;
    background: linear-gradient(90deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
#st-vk .vk-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
#st-vk .vk-row i { width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: linear-gradient(120deg, #2E3EE8, #FF5082); }
#st-vk .vk-row span { height: 7px; border-radius: 4px; background: rgba(13,18,56,0.14); }
#st-fly { position: absolute; left: 575px; top: 112px; width: 158px; height: 212px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(27,36,112,0.16); transform: rotate(2.5deg);
    padding: 14px; box-sizing: border-box; }
#st-fly .fl-img { height: 84px; border-radius: 10px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #6A7CFF, #9D4EDD 55%, #FF5082); margin-bottom: 12px; }
#st-fly .fl-img .sun { position: absolute; top: 8px; right: 10px; width: 16px; height: 16px;
    border-radius: 50%; background: rgba(255,255,255,0.85); }
#st-fly .fl-img .hill { position: absolute; bottom: -14px; left: -8px; width: 110px; height: 44px;
    border-radius: 50% 50% 0 0; background: rgba(255,255,255,0.3); }
#st-fly .fl-l1 { width: 85%; height: 9px; border-radius: 5px; background: rgba(13,18,56,0.6); margin-bottom: 8px; }
#st-fly .fl-l2 { width: 60%; height: 8px; border-radius: 4px; background: rgba(13,18,56,0.18); }
#st-fly .fl-cta { width: 76px; height: 24px; border-radius: 999px; margin-top: 12px;
    background: linear-gradient(100deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
#st-browser { position: absolute; z-index: 3; left: 170px; top: 45px; width: 560px; height: 380px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 26px 64px rgba(27,36,112,0.16); overflow: hidden; }
.st-bar { height: 34px; background: #EEF0FA; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 6px; padding-left: 14px; }
.st-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(13,18,56,0.14); }
.st-nav { display: flex; align-items: center; gap: 8px; padding: 12px 18px 4px; }
.st-nav .ndot { width: 18px; height: 18px; border-radius: 6px;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.st-nav .nl { height: 7px; border-radius: 4px; background: rgba(13,18,56,0.13); }
#st-hero { margin: 10px 18px; height: 140px; border-radius: 12px; position: relative; overflow: hidden;
    background: #E9EAF3; }
#st-wipe { position: absolute; inset: 0; transform-origin: left center;
    background: linear-gradient(135deg, #6A7CFF, #9D4EDD 55%, #FF5082); }
#st-wipe .sun { position: absolute; top: 10px; right: 12px; width: 22px; height: 22px;
    border-radius: 50%; background: rgba(255,255,255,0.85); }
#st-wipe .hill { position: absolute; bottom: -18px; width: 170px; height: 62px;
    border-radius: 50% 50% 0 0; background: rgba(255,255,255,0.28); }
#st-wipe .h1 { left: -14px; } #st-wipe .h2 { left: 120px; width: 220px; background: rgba(255,255,255,0.16); }
.st-line { height: 10px; border-radius: 5px; background: rgba(13,18,56,0.13); margin: 0 18px 9px; }
.st-line.dark { background: rgba(13,18,56,0.7); height: 12px; }
#st-btn { margin: 12px 18px 0; width: 150px; height: 38px; border-radius: 999px; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800;
    background: linear-gradient(100deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 8px 20px rgba(157,78,221,0.35); }
#st-stars { position: absolute; left: 640px; top: 58px; padding: 8px 16px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(27,36,112,0.16);
    color: #F5A623; font-size: 16px; font-weight: 800; letter-spacing: 0.06em; z-index: 4; }
.st-photo { position: absolute; width: 150px; height: 108px; border-radius: 12px;
    border: 7px solid #fff; box-sizing: border-box; overflow: hidden; z-index: 4;
    box-shadow: 0 16px 40px rgba(27,36,112,0.22); }
#st-ph1 { left: 130px; top: 90px; transform: rotate(-5deg);
    background: linear-gradient(135deg, #8F9DFF, #6A7CFF); }
#st-ph2 { left: 560px; top: 250px; transform: rotate(4deg);
    background: linear-gradient(135deg, #FF9EBB, #FF5082); }
.st-photo .sun { position: absolute; top: 8px; right: 10px; width: 16px; height: 16px;
    border-radius: 50%; background: rgba(255,255,255,0.85); }
.st-photo .hill { position: absolute; bottom: -12px; left: -8px; width: 110px; height: 42px;
    border-radius: 50% 50% 0 0; background: rgba(255,255,255,0.3); }
#st-hero .ph-ic { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
    margin: -17px 0 0 -17px; stroke: rgba(13,18,56,0.25); stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
#st-vid { position: absolute; left: 588px; top: 306px; width: 128px; height: 88px; border-radius: 12px;
    border: 6px solid #fff; box-sizing: border-box; z-index: 5;
    background: linear-gradient(135deg, #1B2470, #2E3EE8 60%, #9D4EDD);
    box-shadow: 0 16px 40px rgba(27,36,112,0.25);
    display: flex; align-items: center; justify-content: center; }
#st-vid .play { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.92);
    display: flex; align-items: center; justify-content: center; }
#st-vid .play i { display: block; width: 0; height: 0; margin-left: 3px;
    border-left: 11px solid #2E3EE8; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
#st-flash { position: absolute; inset: 0; opacity: 0; z-index: 9; border-radius: 18px;
    transform-origin: 58% 44%;
    background: radial-gradient(circle at 58% 44%, rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.5) 26%, rgba(255,255,255,0) 58%); }
#st-scanclip { position: absolute; left: 170px; top: 45px; width: 560px; height: 380px;
    border-radius: 18px; overflow: hidden; z-index: 6; pointer-events: none; }
#st-scan { position: absolute; left: 0; top: 0; width: 56px; height: 100%;
    background: linear-gradient(90deg, rgba(106,124,255,0) 0%, rgba(106,124,255,0.1) 38%,
        rgba(106,124,255,0.28) 50%, rgba(106,124,255,0.1) 62%, rgba(106,124,255,0) 100%); }
#st-scan::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2.5px;
    margin-left: -1.25px; border-radius: 2px;
    background: linear-gradient(180deg, rgba(46,62,232,0), #6A7CFF 25%, #9D4EDD 75%, rgba(157,78,221,0)); }
.seo-chip { position: absolute; display: flex; align-items: center; gap: 8px; z-index: 7;
    background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
    font-size: 14px; font-weight: 800; color: var(--ink);
    box-shadow: 0 12px 30px rgba(27,36,112,0.18); }
.seo-chip .ic { width: 20px; height: 20px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center; }
.seo-chip .ic svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
.seo-chip .ic.ok { background: #17A34A; }
.seo-chip .ic.zap { background: linear-gradient(130deg, #2E3EE8, #9D4EDD); }
.seo-chip .ic.zap svg { fill: #fff; stroke: none; width: 11px; height: 11px; }
#sc1 { left: 196px; top: 84px; }
#sc2 { left: 196px; top: 264px; }
#sc3 { left: 548px; top: 100px; }
#st-score { position: absolute; left: 314px; top: 8px; z-index: 7; display: flex;
    align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line);
    border-radius: 999px; padding: 10px 20px 10px 14px;
    box-shadow: 0 16px 40px rgba(27,36,112,0.2); }
#st-score .gg { width: 26px; height: 26px; flex: none; display: flex;
    align-items: center; justify-content: center; }
#st-score .gg svg { width: 22px; height: 22px; }
#st-score .lbl { font-size: 13px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(13,18,56,0.5); }
#st-score b { font-size: 22px; font-weight: 900; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(100deg, #2E3EE8, #FF5082);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
#st-score .track { width: 74px; height: 7px; border-radius: 4px; overflow: hidden;
    background: rgba(13,18,56,0.09); }
#st-score .track i { display: block; width: 100%; height: 100%; border-radius: 4px;
    transform-origin: left center; transform: scaleX(0);
    background: linear-gradient(90deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
#st-serp { position: absolute; left: 235px; top: 42px; width: 430px; background: #fff;
    border: 1px solid var(--line); border-radius: 18px; padding: 20px;
    box-shadow: 0 30px 70px rgba(27,36,112,0.2); z-index: 6; box-sizing: border-box; }
.st-srch { display: flex; align-items: center; gap: 10px; border: 2px solid rgba(13,18,56,0.12);
    border-radius: 999px; padding: 10px 16px; font-size: 15px; font-weight: 600;
    color: rgba(13,18,56,0.6); background: var(--bg); margin-bottom: 14px; }
.st-srch svg { width: 18px; height: 18px; stroke: var(--blue); stroke-width: 2.4; fill: none;
    stroke-linecap: round; flex: none; }
#st-caret { width: 2px; height: 18px; background: var(--blue); }
#st-rows { position: relative; height: 232px; }
.st-row { position: absolute; left: 0; right: 0; height: 50px; border-radius: 12px;
    display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #fff;
    border: 1px solid var(--line); font-size: 15px; }
#st-r1 { top: 0; } #st-r2 { top: 58px; } #st-r3 { top: 116px; }
.st-row .fav { width: 26px; height: 26px; border-radius: 8px; background: rgba(13,18,56,0.12); flex: none; }
.st-row .bar { height: 9px; border-radius: 5px; background: rgba(13,18,56,0.12); }
.st-row.own { top: 174px; border: 2px solid rgba(46,62,232,0.5); background: rgba(46,62,232,0.05);
    font-weight: 800; z-index: 3; box-shadow: 0 10px 26px rgba(46,62,232,0.18); }
.st-row .fav.own { display: flex; align-items: center; justify-content: center; color: #fff;
    font-size: 14px; font-weight: 900;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
#st-p1 { margin-left: auto; padding: 4px 12px; border-radius: 999px; color: #fff;
    font-size: 12px; font-weight: 800;
    background: linear-gradient(120deg, #2E3EE8, #9D4EDD); }
#st-counter { position: absolute; left: 730px; top: 150px; width: 158px; background: #fff;
    border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; z-index: 5;
    box-shadow: 0 18px 44px rgba(27,36,112,0.16); }
#st-counter .cl { font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(13,18,56,0.5); display: block; margin-bottom: 4px; }
#st-counter b { font-size: 36px; font-weight: 900; letter-spacing: -0.03em;
    background: linear-gradient(100deg, #2E3EE8, #FF5082);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums; }
#st-notif { position: absolute; left: 288px; top: 96px; width: 360px; background: #fff;
    border-radius: 16px; box-shadow: 0 22px 54px rgba(13,18,56,0.28); z-index: 8;
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
#st-notif .ni { width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
#st-notif .ni svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
#st-notif b { font-size: 16px; display: block; }
#st-notif small { font-size: 13px; color: rgba(13,18,56,0.55); }
#st-cursor { position: absolute; left: 0; top: 0; width: 30px; height: 30px; z-index: 9; }
#st-cursor svg { width: 100%; height: 100%; fill: #0D1238; stroke: #fff; stroke-width: 1.4; }
.st-person { position: absolute; left: 40px; width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; z-index: 7;
    box-shadow: 0 14px 32px rgba(27,36,112,0.28); }
.st-person svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
#pp1 { top: 118px; background: linear-gradient(130deg, #2E3EE8, #6A7CFF); }
#pp2 { top: 196px; background: linear-gradient(130deg, #9D4EDD, #C77CF5); }
#pp3 { top: 274px; background: linear-gradient(130deg, #FF5082, #FF8FB0); }
.st-rip { position: absolute; width: 20px; height: 20px; border-radius: 50%;
    border: 3px solid var(--blue); opacity: 0; z-index: 7; }
/* Erklärtexte: freie Typografie in der Szene, kein Kasten */
.st-txt { position: absolute; z-index: 8; width: 300px; }
.st-txt .k { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.st-txt p { font-size: 16.5px; line-height: 1.68; color: rgba(13,18,56,0.72);
    letter-spacing: -0.005em; }
.st-txt b { color: var(--ink); font-weight: 700; }
.st-txt .w { display: inline-block; }
.st-txt { -webkit-font-smoothing: antialiased; }
#tx2 { left: 22px; top: 140px; width: 252px; }
#tx5, #tx6 { left: 612px; top: 140px; width: 266px; }
#tx8 { left: 22px; top: 148px; width: 292px; }
#tx1 { left: 40px; top: 358px; width: 556px; }
#tx3 { left: 612px; top: 140px; width: 266px; }
#tx4 { left: 118px; top: 380px; width: 664px; text-align: center; }
#tx7 { left: 122px; top: 406px; width: 656px; }

/* Tablet und Handy für die mobile Optimierung */
#st-tab, #st-phone { position: absolute; z-index: 2; background: #0D1238; box-sizing: border-box;
    box-shadow: 0 26px 60px rgba(13,18,56,0.32); }
#st-tab { left: 55px; top: 116px; width: 186px; height: 244px; border-radius: 20px; padding: 10px; }
#st-phone { left: 725px; top: 144px; width: 120px; height: 216px; border-radius: 19px; padding: 8px; }
#st-tab .scr, #st-phone .scr { width: 100%; height: 100%; border-radius: 12px; background: #fff;
    overflow: hidden; }
#st-phone .scr { border-radius: 11px; }
.mini { display: flex; flex-direction: column; }
.mini .mnav { display: flex; align-items: center; gap: 6px; padding: 8px 10px 7px; flex: none; }
.mini .mnav .mdot { width: 12px; height: 12px; border-radius: 4px; flex: none;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.mini .mnav .mline { height: 5px; width: 34px; border-radius: 3px; background: rgba(13,18,56,0.16); }
.mini .mh { height: 34%; position: relative; flex: none; overflow: hidden;
    background: linear-gradient(135deg, #6A7CFF, #9D4EDD 55%, #FF5082); }
.mini .mh .sun { position: absolute; top: 7px; right: 9px; width: 12px; height: 12px;
    border-radius: 50%; background: rgba(255,255,255,0.88); }
.mini .mh .hill { position: absolute; bottom: -12px; left: -8px; width: 96px; height: 36px;
    border-radius: 50% 50% 0 0; background: rgba(255,255,255,0.3); }
.mini .ml { height: 6px; border-radius: 3px; background: rgba(13,18,56,0.16); margin: 10px 11px 0; }
.mini .ml.dark { background: rgba(13,18,56,0.68); height: 7px; }
.mini .mb { height: 22px; border-radius: 999px; margin: 13px 11px 0; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 800;
    letter-spacing: 0.01em; white-space: nowrap;
    background: linear-gradient(100deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 5px 12px rgba(157,78,221,0.35); }
.mini.small .mnav { padding: 6px 8px 5px; }
.mini.small .mh { height: 32%; }
.mini.small .ml { margin: 8px 9px 0; }
.mini.small .mb { height: 18px; margin: 10px 9px 0; font-size: 7.5px; }
/* Ads-Handy mit Social-Feed */
#st-ads { position: absolute; z-index: 5; left: 520px; top: 46px; width: 238px; height: 430px;
    background: #0D1238; border-radius: 34px; padding: 10px; box-sizing: border-box;
    box-shadow: 0 34px 74px rgba(13,18,56,0.36); }
#st-ads .ig-ui { position: absolute; inset: 10px; border-radius: 25px; background: #fff;
    overflow: hidden; display: flex; flex-direction: column; }
#st-ads .ic { width: 15px; height: 15px; stroke: #0D1238; stroke-width: 1.7; fill: none;
    stroke-linecap: round; stroke-linejoin: round; flex: none; }
#st-ads .ig-bar { height: 34px; flex: none; display: flex; align-items: center; gap: 9px;
    padding: 8px 11px 0; }
#st-ads .ig-bar .wm { width: 54px; height: 7px; border-radius: 4px;
    background: linear-gradient(100deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
#st-ads .ig-bar .ic.r { margin-left: auto; }
#st-ads .ig-stories { height: 46px; flex: none; display: flex; align-items: center; gap: 9px;
    padding: 0 11px; border-bottom: 1px solid rgba(13,18,56,0.08); }
#st-ads .story { width: 30px; height: 30px; border-radius: 50%; flex: none; border: 2px solid transparent;
    background: linear-gradient(#EEF0FA, #EEF0FA) padding-box,
        linear-gradient(130deg, #FF5082, #9D4EDD 55%, #2E3EE8) border-box; }
#st-ads .story.brand { display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 900; font-style: normal;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082) padding-box,
        linear-gradient(130deg, #FF5082, #9D4EDD 55%, #2E3EE8) border-box; }
#st-ads .ig-clip { flex: 1; position: relative; overflow: hidden; }
#st-ads .ig-feed { position: absolute; left: 0; right: 0; top: 0; padding: 10px 11px 0; }
#st-ads .ig-post { margin-bottom: 12px; }
#st-ads .prow { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
#st-ads .prow .av { width: 22px; height: 22px; border-radius: 50%; background: rgba(13,18,56,0.13); flex: none; }
#st-ads .prow .av.brand { display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 900; font-style: normal;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
#st-ads .prow .nm { display: block; width: 58px; height: 5px; border-radius: 3px; background: rgba(13,18,56,0.2); }
#st-ads .prow .nm2 { display: block; width: 34px; height: 4px; border-radius: 3px;
    background: rgba(13,18,56,0.12); margin-top: 4px; }
#st-ads .prow .tag { margin-left: auto; font-size: 7.5px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(13,18,56,0.4); }
#st-ads .im { height: 104px; border-radius: 8px; background: rgba(13,18,56,0.08);
    position: relative; overflow: hidden; }
#st-ads .im.brand { background: linear-gradient(135deg, #6A7CFF, #9D4EDD 55%, #FF5082); }
#st-ads .im .sun { position: absolute; top: 9px; right: 11px; width: 12px; height: 12px;
    border-radius: 50%; background: rgba(255,255,255,0.88); }
#st-ads .im .hill { position: absolute; bottom: -13px; left: -9px; width: 104px; height: 40px;
    border-radius: 50% 50% 0 0; background: rgba(255,255,255,0.28); }
#st-ads .im .hl { position: absolute; left: 11px; top: 15px; width: 88px; height: 7px;
    border-radius: 4px; background: rgba(255,255,255,0.92); }
#st-ads .im .hl2 { position: absolute; left: 11px; top: 27px; width: 58px; height: 5px;
    border-radius: 3px; background: rgba(255,255,255,0.62); }
#st-ads .acts { display: flex; gap: 9px; margin-top: 7px; }
#st-ads .acts i { width: 12px; height: 12px; border-radius: 3px; background: rgba(13,18,56,0.12); }
#st-ads .cta { margin-top: 8px; height: 25px; border-radius: 999px; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 9.5px; font-weight: 800;
    background: linear-gradient(100deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 6px 14px rgba(157,78,221,0.35); }
#st-ads .ig-nav { height: 34px; flex: none; display: flex; align-items: center;
    justify-content: space-around; padding: 0 8px; border-top: 1px solid rgba(13,18,56,0.08); }
#st-ads .ig-nav .me { width: 15px; height: 15px; border-radius: 50%;
    background: linear-gradient(130deg, #2E3EE8, #FF5082); }
/* Finale: alle Leistungen verschmelzen zur Marke */
#st-final { position: absolute; inset: 0; z-index: 6; }
.fin-card { position: absolute; width: 150px; height: 110px; display: flex;
    flex-direction: column; align-items: center; }
#fc0 { left: 375px; top: 47px; }
#fc1 { left: 614px; top: 106px; }
#fc2 { left: 673px; top: 238px; }
#fc3 { left: 508px; top: 344px; }
#fc4 { left: 242px; top: 344px; }
#fc5 { left: 77px; top: 238px; }
#fc6 { left: 136px; top: 106px; }
.fin-art { position: relative; width: 150px; height: 88px; flex: none; }
.fin-card .lb { margin-top: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: rgba(13,18,56,0.48); white-space: nowrap; }
/* Alle sieben stehen im selben Format: gleiche Größe, gleiche Kante, gleicher Schatten */
.fin-obj { position: absolute; left: 11px; top: 3px; width: 128px; height: 80px;
    box-sizing: border-box; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 16px 36px rgba(27,36,112,0.16); }
.fin-obj i, .fin-obj b { display: block; font-style: normal; }

/* Design — Visitenkarte mit Markenfarben */
.fin-obj.vk { padding: 10px 10px 10px 17px; overflow: hidden; }
.vk .edge { position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
    background: linear-gradient(180deg, #FF2D9C, #2E3EE8 55%, #FFC53D); }
.vk .mark { position: absolute; right: 10px; top: 10px; width: 24px; height: 24px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 900;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.vk .l1 { width: 44px; height: 7px; border-radius: 4px; background: rgba(13,18,56,0.72); margin-top: 3px; }
.vk .l2 { width: 30px; height: 5px; border-radius: 3px; background: rgba(13,18,56,0.26); margin-top: 7px; }
.vk .sep { height: 2px; border-radius: 1px; margin: 12px 0 10px;
    background: linear-gradient(90deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.vk .pal { display: flex; gap: 7px; }
.vk .pal i { width: 15px; height: 15px; border-radius: 50%; }
.vk .pal i:nth-child(1) { background: #FF2D9C; }
.vk .pal i:nth-child(2) { background: #2E3EE8; }
.vk .pal i:nth-child(3) { background: #FFC53D; }

/* Foto & Video — Aufnahme mit Play, darunter weitere Motive */
.fin-obj.med { padding: 8px; }
.med .im { height: 38px; border-radius: 8px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #6A7CFF, #9D4EDD 55%, #FF5082); }
.med .im .sun { position: absolute; top: 5px; right: 7px; width: 10px; height: 10px;
    border-radius: 50%; background: rgba(255,255,255,0.85); }
.med .im .hill { position: absolute; bottom: -8px; left: -6px; width: 62px; height: 26px;
    border-radius: 50% 50% 0 0; background: rgba(255,255,255,0.3); }
.med .play { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px;
    margin: -12px 0 0 -12px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 12px rgba(27,36,112,0.24); }
.med .play i { width: 0; height: 0; margin-left: 2px; border-left: 8px solid #9D4EDD;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.med .th { display: flex; gap: 6px; margin-top: 8px; }
.med .th i { flex: 1; height: 18px; border-radius: 5px; }
.med .th .a { background: linear-gradient(135deg, #8F9DFF, #6A7CFF); }
.med .th .b { background: linear-gradient(135deg, #FF9EBB, #FF5082); }
.med .th .c { background: linear-gradient(135deg, #C9B6FF, #9D4EDD); }

/* Webseite — Laptop mit der Mini-Seite aus den Geräte-Szenen */
#fc2 .fa-lap { position: absolute; left: 14px; top: 1px; width: 122px; height: 74px;
    background: #0D1238; border-radius: 9px; padding: 5px; box-sizing: border-box;
    box-shadow: 0 16px 36px rgba(13,18,56,0.28); }
#fc2 .fa-lap .scr { width: 100%; height: 100%; border-radius: 5px; background: #fff; overflow: hidden; }
#fc2 .fa-foot { position: absolute; left: 6px; top: 75px; width: 138px; height: 7px;
    border-radius: 2px 2px 6px 6px; background: linear-gradient(180deg, #232C7E, #0D1238); }
.mini.tiny .mnav { padding: 3px 6px; gap: 4px; }
.mini.tiny .mnav .mdot { width: 6px; height: 6px; border-radius: 2px; }
.mini.tiny .mnav .mline { height: 3px; width: 18px; }
.mini.tiny .mh { height: 30%; }
.mini.tiny .mh .sun { top: 4px; right: 5px; width: 7px; height: 7px; }
.mini.tiny .mh .hill { bottom: -7px; left: -5px; width: 54px; height: 20px; }
.mini.tiny .ml { height: 4px; border-radius: 2px; margin: 6px 8px 0; }
.mini.tiny .mb { height: 11px; margin: 6px 15px 0; font-size: 5.5px;
    box-shadow: 0 3px 7px rgba(157,78,221,0.32); }

/* SEO — der eigene Treffer auf Platz 1 */
.fin-obj.serp { padding: 9px; }
.serp .g-srch { height: 18px; border-radius: 999px; background: #F4F5FC;
    border: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.serp .g-srch svg { width: 10px; height: 10px; flex: none; }
.serp .g-srch .q { height: 4px; width: 50px; border-radius: 2px; background: rgba(13,18,56,0.18); }
.serp .g-row { display: flex; align-items: center; gap: 6px; }
.serp .g-row .fav { width: 11px; height: 11px; border-radius: 3px; flex: none;
    background: rgba(13,18,56,0.12); }
.serp .g-row .bar { height: 4px; width: 52px; border-radius: 2px; background: rgba(13,18,56,0.16); }
.serp .g-row.own { margin: 7px 0 6px; padding: 3px 4px; border-radius: 7px;
    background: linear-gradient(90deg, rgba(46,62,232,0.12), rgba(157,78,221,0.05)); }
.serp .g-row.own .fav { display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 7px; font-weight: 900;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.serp .g-row.own b { font-size: 7.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.serp .g-row.own .p1 { margin-left: auto; width: 14px; height: 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff;
    font-size: 8px; font-weight: 900; flex: none;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 4px 10px rgba(46,62,232,0.32); }

/* Werbeanzeigen — die gesponserte Anzeige */
.fin-obj.ad { padding: 7px; }
.ad .a-top { display: flex; align-items: center; gap: 5px; height: 16px; }
.ad .a-top .av { width: 16px; height: 16px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center; color: #fff;
    font-size: 8px; font-weight: 900;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.ad .a-top .nm { width: 28px; height: 4px; border-radius: 2px; background: rgba(13,18,56,0.2); }
.ad .a-top .tag { margin-left: auto; font-size: 5.5px; font-weight: 800;
    letter-spacing: 0.04em; color: var(--blue); }
.ad .a-im { margin-top: 5px; height: 28px; border-radius: 7px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #6A7CFF, #9D4EDD 55%, #FF5082); }
.ad .a-im .sun { position: absolute; top: 4px; right: 6px; width: 9px; height: 9px;
    border-radius: 50%; background: rgba(255,255,255,0.85); }
.ad .a-im .hill { position: absolute; bottom: -7px; left: -6px; width: 62px; height: 24px;
    border-radius: 50% 50% 0 0; background: rgba(255,255,255,0.3); }
.ad .a-cta { margin-top: 5px; height: 13px; border-radius: 999px; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 800;
    background: linear-gradient(100deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 4px 10px rgba(157,78,221,0.32); }

/* Software — Auswertungsfenster */
.fin-obj.dash { padding: 0; overflow: hidden; }
.dash .d-top { height: 16px; background: #EEF0FA; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.dash .d-top i { width: 5px; height: 5px; border-radius: 50%; background: rgba(13,18,56,0.16); }
.dash .d-top .pill { margin-left: auto; width: 22px; height: 6px; border-radius: 3px;
    background: linear-gradient(100deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.dash .d-in { display: flex; gap: 9px; padding: 10px 10px 0; }
.dash .d-chart { display: flex; align-items: flex-end; gap: 5px; height: 40px; flex: none; }
.dash .d-chart i { width: 11px; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #8F9DFF, #6A7CFF); }
.dash .d-chart .hi { background: linear-gradient(180deg, #9D4EDD, #FF5082); }
.dash .d-side { flex: 1; display: flex; flex-direction: column; gap: 7px; padding-top: 5px; }
.dash .d-side .dl { height: 4px; border-radius: 2px; background: rgba(13,18,56,0.16); }
.dash .d-side .dl.dark { height: 5px; background: rgba(13,18,56,0.62); }
.dash .d-side .dl.s { width: 60%; }

/* KI — Assistent, der antwortet */
.fin-obj.chat { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.chat .row { display: flex; align-items: flex-start; gap: 6px; }
.chat .ai { width: 18px; height: 18px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.chat .ai svg { width: 11px; height: 11px; fill: #fff; display: block; }
.chat .bub { padding: 5px 7px; display: flex; flex-direction: column; gap: 4px; }
.chat .bub i { height: 3.5px; border-radius: 2px; }
.chat .bub.in { background: #EEF0FA; border-radius: 9px 9px 9px 3px; }
.chat .bub.in i { background: rgba(13,18,56,0.24); }
.chat .bub.out { align-self: flex-end; border-radius: 9px 9px 3px 9px;
    background: linear-gradient(120deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 6px 14px rgba(157,78,221,0.28); }
.chat .bub.out i { background: rgba(255,255,255,0.82); }
.chat .bub.type { align-self: flex-start; flex-direction: row; align-items: center; gap: 3px;
    background: #EEF0FA; border-radius: 9px 9px 9px 3px; margin-left: 24px; }
.chat .bub.type b { width: 4px; height: 4px; border-radius: 50%; background: rgba(13,18,56,0.28); }

#fin-burst { position: absolute; left: 330px; top: 138px; width: 240px; height: 240px;
    border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.72) 22%,
        rgba(157,78,221,0.26) 48%, rgba(157,78,221,0) 72%); }
#fin-logo { position: absolute; left: 210px; top: 194px; width: 480px; opacity: 0; }
#st-tapdot { position: absolute; z-index: 9; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(13,18,56,0.16); border: 2px solid rgba(13,18,56,0.4); }
#st-again { position: absolute; z-index: 7; left: 520px; top: 2px; display: flex; align-items: center;
    gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 8px 16px; font-size: 12.5px; font-weight: 800;
    box-shadow: 0 12px 30px rgba(27,36,112,0.16); }
#st-again svg { width: 16px; height: 16px; stroke: #9D4EDD; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
#st-fit { position: absolute; left: 692px; top: 74px; z-index: 7; display: flex; align-items: center;
    gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 9px 18px; font-size: 14px; font-weight: 800;
    box-shadow: 0 12px 30px rgba(27,36,112,0.16); }
#st-fit svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #17A34A;
    stroke: #fff; stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round;
    box-sizing: border-box; }
@media (max-width: 640px) {
    .stage-wrap { margin: 0 -28px; }
    #st-counter { left: 640px; top: 96px; }
    .st-person { left: 80px; }
    .stage-wrap { margin: 0 -28px; }
    #tx1, #tx2, #tx3, #tx4, #tx5, #tx6, #tx7, #tx8 { left: 46px; top: 500px; width: 808px;
        text-align: left; }
    /* Die Buehne ist intern 900 px breit und wird auf die Geraetebreite
       heruntergerechnet — auf einem 390er Display mit Faktor 0,43. Diese
       Werte landen dadurch bei rund 15,6 px auf dem Schirm; 30 px ergaben
       nur 13 px und waren zu klein zum Lesen. Groesser geht nicht: der
       laengste Block (#tx8) stoesst dann unten an die Buehnenhoehe aus
       js/flow.js an. */
    .st-txt .k { font-size: 27px; letter-spacing: 0.15em; margin-bottom: 16px; }
    .st-txt p { font-size: 36px; line-height: 1.6; }
}

/* ---------- Ablauf ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.steps::before { content: ''; position: absolute; top: 34px; left: 8%; right: 8%; height: 0;
    border-top: 2px dashed rgba(46, 62, 232, 0.22); z-index: -1; }
.step { padding-top: 6px; }
.step-num { display: grid; place-items: center; width: 62px; height: 60px;
    font-size: 1.35rem; font-weight: 900; color: #fff; background: var(--grad);
    border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
    margin-bottom: 22px; box-shadow: 0 10px 24px rgba(46,62,232,0.3);
    outline: 6px solid var(--bg); }
.step:nth-child(2) .step-num { border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%; }
.step:nth-child(3) .step-num { border-radius: 48% 52% 46% 54% / 54% 48% 52% 46%; }
.step h3 { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.step p { font-size: 0.95rem; color: var(--ink-60); }

/* ---------- Leistungen (editorial Liste) ---------- */
.incl-head { max-width: 660px; margin-bottom: 44px; }
.incl-head .section-head { margin-bottom: 18px; }
.incl-lead { color: var(--ink-60); font-size: 1.05rem; max-width: 52ch; }
.incl-head .btn-inline { margin-top: 22px; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bt { position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 30px;
    box-shadow: 0 10px 30px rgba(27, 36, 112, 0.05);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.bt:hover { transform: translateY(-4px); border-color: rgba(46, 62, 232, 0.2);
    box-shadow: 0 24px 54px rgba(27, 36, 112, 0.1); }
.bt .ic { width: 42px; height: 42px; border-radius: 14px; flex: none; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(46, 62, 232, 0.1), rgba(157, 78, 221, 0.1)); }
.bt .ic svg { width: 21px; height: 21px; stroke: var(--blue); stroke-width: 1.8; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
.bt h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.015em;
    line-height: 1.3; margin-bottom: 8px; }
/* Die drei kleinen Kacheln der letzten Reihe halten zwei Zeilen frei, sonst
   rutscht der Text der Kachel mit der langen Ueberschrift nach unten. */
.bt:not(.bt-hero):not(.bt-tall):not(.bt-auto) h3 { min-height: 2.6em; }
.bt p { font-size: 0.9rem; line-height: 1.62; color: var(--ink-60); }

/* Bento: vier Spalten, aber bewusst ungleiche Kacheln.
   Gross (3x3) — schmal und hoch (1x2) — quadratisch — breit (2x1). */
.bento { grid-auto-rows: minmax(150px, auto); }
.bt-hero { grid-column: span 3; grid-row: span 3; }
.bt-tall { grid-column: span 1; grid-row: span 2; }
.bt-auto { grid-column: span 2; grid-row: span 2; }
/* Die breiten Kacheln legen sich quer: Icon links, Aussage daneben.
   Stehend blieben sie halb leer, weil ihr Text kurz ist. */
.bt-wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 24px; }
/* Icon und Ueberschrift stehen in einer Zeile: mittig zum ganzen Textblock
   sass das Icon sonst auf Hoehe der zweiten Zeile und wirkte abgerutscht. */
.bt-head { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.bt-head .ic { margin-bottom: 0; }
.bt-head h3 { margin-bottom: 0; }
/* Der Fliesstext ruecken auf die Ueberschrift ein, sonst steht er links
   neben dem Icon und die linke Kante bricht. */
.bt-head + p { margin-left: 57px; }
.bt-wide h3 { min-height: 0; margin-bottom: 7px; }
.bt-wide p { max-width: 48ch; }
/* Foto und Video: ein Bild und ein Film, leicht gekippt uebereinander.
   Der Stapel laeuft rechts aus der Kachel, wie die Vorschauen der grossen Kacheln. */
.bt-media .bt-txt { flex: 1; }
.bt-media p { max-width: 30ch; }
.bt-shots { position: relative; width: 186px; height: 136px; flex: none; margin-right: -26px; }
.bt-shots .ph { position: absolute; width: 122px; height: 88px; box-sizing: border-box;
    border: 5px solid #fff; border-radius: 13px; overflow: hidden;
    box-shadow: 0 16px 36px rgba(27, 36, 112, 0.22);
    transition: transform 0.5s var(--ease); }
.bt-shots .p1 { left: 0; top: 2px; transform: rotate(-6deg);
    background: linear-gradient(135deg, #8F9DFF, #6A7CFF); }
.bt-shots .p2 { left: 60px; top: 42px; transform: rotate(5deg);
    background: linear-gradient(135deg, #1B2470, #2E3EE8 55%, #9D4EDD); }
.bt-shots .sun { position: absolute; top: 7px; right: 10px; width: 15px; height: 15px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.bt-shots .hill { position: absolute; bottom: -12px; left: -8px; width: 92px; height: 38px;
    border-radius: 50% 50% 0 0; background: rgba(255, 255, 255, 0.3); }
.bt-shots .play { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px;
    margin: -16px 0 0 -16px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px rgba(13, 18, 56, 0.28); }
.bt-shots .play i { width: 0; height: 0; margin-left: 3px;
    border-left: 11px solid #2E3EE8; border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; }
/* Google: die Trefferliste mit dem eigenen Eintrag auf Platz 1 */
.bt-serp { flex: none; width: 214px; margin-right: -28px; }
.sp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px;
    box-shadow: 0 16px 38px rgba(27, 36, 112, 0.14);
    transition: transform 0.5s var(--ease); }
.sp-search { height: 30px; border-radius: 999px; background: #F4F5FC; border: 1px solid var(--line);
    display: flex; align-items: center; gap: 9px; padding: 0 12px; margin-bottom: 12px; }
.sp-search svg { width: 14px; height: 14px; flex: none; }
.sp-search .q { height: 5px; width: 84px; border-radius: 3px; background: rgba(13, 18, 56, 0.18); }
.sp-hit { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px;
    background: linear-gradient(100deg, rgba(46,62,232,0.12), rgba(157,78,221,0.06)); }
.sp-hit .fav { width: 26px; height: 26px; border-radius: 8px; flex: none; font-style: normal;
    display: flex; align-items: center; justify-content: center; color: #fff;
    font-size: 0.72rem; font-weight: 900;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.sp-name { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sp-name b { display: block; height: 7px; width: 72%; border-radius: 4px;
    background: rgba(13, 18, 56, 0.6); }
.sp-name .stars { font-style: normal; font-size: 0.52rem; letter-spacing: 0.1em; color: #F5A623; }
.sp-hit .rank { width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center; color: #fff;
    font-size: 0.72rem; font-weight: 900;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 6px 14px rgba(46, 62, 232, 0.34); }
.sp-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 0 10px; }
.sp-row .dot { width: 16px; height: 16px; border-radius: 5px; flex: none;
    background: rgba(13, 18, 56, 0.1); }
.sp-row .b { height: 5px; width: 62%; border-radius: 3px; background: rgba(13, 18, 56, 0.14); }
.sp-row .b.s { width: 44%; }
.bt-seo p { max-width: 34ch; }
/* Erreichbarkeit: die drei Wege als Schaltflaechen, der erste ist besetzt */
.bt-chan { display: flex; gap: 12px; margin-top: 22px; }
.bt-chan .ch { position: relative; width: 52px; height: 52px; border-radius: 17px; flex: none;
    background: #fff; border: 1px solid var(--line); display: flex; align-items: center;
    justify-content: center; box-shadow: 0 10px 24px rgba(27, 36, 112, 0.1);
    transition: transform 0.4s var(--ease); }
.bt-chan .ch svg { width: 21px; height: 21px; stroke: var(--blue); stroke-width: 1.8; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
.bt-chan .ch.on { border-color: transparent;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 12px 26px rgba(46, 62, 232, 0.32); }
.bt-chan .ch.on svg { stroke: #fff; }
/* WhatsApp in seiner eigenen Farbe: als Marke nur so wiedererkennbar */
.bt-chan .ch.wa svg { fill: #25D366; stroke: none; width: 22px; height: 22px; }
.bt-chan .live { position: absolute; right: -4px; top: -4px; width: 14px; height: 14px;
    border-radius: 50%; background: #17A34A; border: 2.5px solid #fff; }
/* App-Entwicklung: volle Bahn unter dem Raster, Handy und beide Stores rechts */
.bt-band { grid-column: span 4; flex-direction: row; align-items: center; gap: 26px;
    padding-bottom: 0; overflow: hidden;
    background: linear-gradient(120deg, #fff 0%, #FAFAFE 52%, #F4F5FD 100%); }
.bt-band h3 { min-height: 0; font-size: 1.16rem; margin-bottom: 8px; }
.bt-band p { max-width: 64ch; }
.bt-band .bt-txt { flex: 1; padding: 30px 0; }
.bt-store { display: flex; align-items: flex-end; gap: 26px; flex: none; margin-left: auto;
    padding-top: 26px; }
.st-phone { width: 116px; height: 172px; background: #0D1238; border-radius: 20px 20px 0 0;
    padding: 7px 7px 0; box-sizing: border-box;
    box-shadow: 0 20px 44px rgba(13, 18, 56, 0.3);
    transition: transform 0.5s var(--ease); }
.st-scr { height: 100%; background: #fff; border-radius: 14px 14px 0 0; overflow: hidden;
    padding: 10px 10px 0; box-sizing: border-box; }
.st-top { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.st-top .mark { width: 15px; height: 15px; border-radius: 5px; flex: none;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.st-top .l { height: 5px; width: 40px; border-radius: 3px; background: rgba(13, 18, 56, 0.14); }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.st-grid i { height: 26px; border-radius: 8px; background: #EEF0FA; }
.st-grid i:nth-child(1) { background: linear-gradient(135deg, #6A7CFF, #9D4EDD); }
.st-grid i:nth-child(5) { background: linear-gradient(135deg, #9D4EDD, #FF5082); }
.st-cta { height: 20px; border-radius: 999px; margin-top: 12px;
    background: linear-gradient(100deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.st-badges { display: flex; flex-direction: column; gap: 12px; padding-bottom: 34px; }
.badge2 { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px;
    border-radius: 14px; background: #fff; border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(27, 36, 112, 0.1);
    font-size: 0.9rem; font-weight: 800; color: var(--ink); white-space: nowrap;
    transition: transform 0.4s var(--ease); }
.badge2 svg { width: 20px; height: 20px; flex: none; color: var(--ink); }
.bt-band:hover .st-phone { transform: translateY(-8px); }
.bt-band:hover .badge2:first-child { transform: translateX(-5px); }
.bt-band:hover .badge2:last-child { transform: translateX(-5px); transition-delay: 0.06s; }
.bt-reach:hover .ch { transform: translateY(-4px); }

/* ---------- Bento: Auftritt und Bewegung in den Grafiken ----------
   Jede Kachel zeigt einen sichtbaren Vorgang, nicht nur ein Atmen.
   Unterschiedliche Laufzeiten, damit nichts im Gleichschritt zuckt.
   Bei reduzierter Bewegung steht am Ende der Datei alles still. */
.bento > .bt:nth-child(2) { transition-delay: 0.1s; }
.bento > .bt:nth-child(3) { transition-delay: 0.2s; }
.bento > .bt:nth-child(4) { transition-delay: 0.3s; }
.bento > .bt:nth-child(5) { transition-delay: 0.4s; }
.bento > .bt:nth-child(6) { transition-delay: 0.5s; }
.bento > .bt:nth-child(7) { transition-delay: 0.6s; }

/* Webdesign: die Seite entsteht Stück für Stück und beginnt von vorn —
   dasselbe, was der Text daneben behauptet. */
@keyframes bt-build {
    0%, 3% { opacity: 0; transform: translateY(14px) scale(0.97); }
    11%, 76% { opacity: 1; transform: translateY(0) scale(1); }
    86%, 100% { opacity: 0; transform: translateY(-8px) scale(0.99); }
}
.sh-page > * { animation: bt-build 9s ease-in-out infinite; }
.sh-page > *:nth-child(2) { animation-delay: 0.3s; }
.sh-page > *:nth-child(3) { animation-delay: 0.6s; }
.sh-page > *:nth-child(4) { animation-delay: 0.9s; }
.sh-page > *:nth-child(5) { animation-delay: 1.2s; }
.sh-page > *:nth-child(6) { animation-delay: 1.5s; }
.sh-page > *:nth-child(7) { animation-delay: 1.8s; }
/* Der Knopf kommt zum Schluss und bleibt kurz stehen */
@keyframes bt-cta { 0%, 20% { opacity: 0; transform: scale(0.7); }
    28%, 76% { opacity: 1; transform: scale(1); }
    86%, 100% { opacity: 0; transform: scale(0.9); } }
.sh-cta { animation: bt-cta 9s ease-in-out infinite; transform-origin: left center; }

/* Geräte: die Seite im Handy wird gescrollt */
.dv-roll { animation: bt-roll 7s ease-in-out infinite; }
@keyframes bt-roll { 0%, 18% { transform: translateY(0); }
    45%, 68% { transform: translateY(-86px); } 95%, 100% { transform: translateY(0); } }
.dv-hero.sm.two { margin-top: 14px; background: linear-gradient(135deg, #8F9DFF, #6A7CFF); }

/* Erreichbarkeit: die drei Wege leuchten nacheinander auf */
@keyframes bt-glow {
    0%, 8% { transform: translateY(0) scale(1); background: #fff; }
    16%, 26% { transform: translateY(-9px) scale(1.12);
        background: linear-gradient(130deg, rgba(46,62,232,0.14), rgba(157,78,221,0.12)); }
    38%, 100% { transform: translateY(0) scale(1); background: #fff; }
}
.bt-chan .ch { animation: bt-glow 4.5s ease-in-out infinite; }
.bt-chan .ch:nth-child(2) { animation-delay: 0.5s; }
.bt-chan .ch:nth-child(3) { animation-delay: 1s; }
.bt-chan .ch.on { animation: none; }
@keyframes bt-live { 0% { box-shadow: 0 0 0 0 rgba(23,163,74,0.55); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(23,163,74,0); } }
.bt-chan .live, .ag-live { animation: bt-live 2.2s ease-out infinite; }

/* Software: die Bearbeitung wandert Zeile für Zeile durch die Liste */
@keyframes bt-work {
    0%, 6% { background: #F6F7FD; transform: translateX(0); }
    14%, 26% { background: rgba(46,62,232,0.09); transform: translateX(6px); }
    36%, 100% { background: #F6F7FD; transform: translateX(0); }
}
@keyframes bt-done {
    0%, 20% { background: rgba(13,18,56,0.1); transform: scale(1); }
    26% { transform: scale(1.35); }
    30%, 92% { background: rgba(23,163,74,0.28); transform: scale(1); }
    100% { background: rgba(13,18,56,0.1); transform: scale(1); }
}
.ap-row { animation: bt-work 7s ease-in-out infinite; }
.ap-row .pill { animation: bt-done 7s ease-in-out infinite; }
.ap-row:nth-child(2), .ap-row:nth-child(2) .pill { animation-delay: 1.2s; }
.ap-row:nth-child(3), .ap-row:nth-child(3) .pill { animation-delay: 2.4s; }
.ap-row:nth-child(4), .ap-row:nth-child(4) .pill { animation-delay: 3.6s; }
.ap-row:nth-child(5), .ap-row:nth-child(5) .pill { animation-delay: 4.8s; }
/* Der Agent schreibt zwei Zeilen und meldet dann fertig */
@keyframes bt-write { 0%, 6% { width: 0; opacity: 0; }
    14% { opacity: 1; } 30%, 84% { width: 100%; opacity: 1; }
    94%, 100% { width: 0; opacity: 0; } }
@keyframes bt-write2 { 0%, 20% { width: 0; opacity: 0; }
    28% { opacity: 1; } 44%, 84% { width: 62%; opacity: 1; }
    94%, 100% { width: 0; opacity: 0; } }
@keyframes bt-fertig { 0%, 46% { opacity: 0; transform: scale(0.5); }
    56% { opacity: 1; transform: scale(1.18); }
    64%, 86% { opacity: 1; transform: scale(1); }
    94%, 100% { opacity: 0; transform: scale(0.9); } }
.ag-l { animation: bt-write 3.5s ease-in-out infinite; }
.ag-l.s { animation: bt-write2 3.5s ease-in-out infinite; }
.ag-do { transform-origin: left center; animation: bt-fertig 3.5s ease-in-out infinite; }

/* Google: der eigene Treffer steigt von unten auf Platz 1 */
@keyframes bt-rise {
    0% { transform: translateY(56px); opacity: 0; }
    9% { transform: translateY(56px); opacity: 1; }
    34%, 88% { transform: translateY(0); opacity: 1; }
    96%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes bt-sink {
    0%, 9% { transform: translateY(-28px); }
    34%, 100% { transform: translateY(0); }
}
@keyframes bt-pop { 0%, 30% { transform: scale(0.4); } 42% { transform: scale(1.25); }
    52%, 100% { transform: scale(1); } }
.sp-hit { animation: bt-rise 7.5s ease-in-out infinite; }
.sp-row { animation: bt-sink 7.5s ease-in-out infinite; }
.sp-hit .rank { animation: bt-pop 7.5s ease-in-out infinite; }

/* Foto und Video: ein Ring läuft aus dem Play-Knopf */
.bt-shots .play::before { content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85); animation: bt-ring 2.6s ease-out infinite; }
@keyframes bt-ring { 0% { transform: scale(1); opacity: 0.9; }
    70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes bt-play { 0%, 70%, 100% { transform: scale(1); } 82% { transform: scale(1.16); } }
.bt-shots .play { animation: bt-play 2.6s ease-in-out infinite; }

/* App: die Symbole erscheinen nacheinander, wie beim Einrichten */
@keyframes bt-icon { 0%, 4% { transform: scale(0.3); opacity: 0; }
    16%, 84% { transform: scale(1); opacity: 1; }
    96%, 100% { transform: scale(0.3); opacity: 0; } }
.st-grid i { animation: bt-icon 5.5s ease-in-out infinite; }
.st-grid i:nth-child(2) { animation-delay: 0.12s; }
.st-grid i:nth-child(3) { animation-delay: 0.24s; }
.st-grid i:nth-child(4) { animation-delay: 0.36s; }
.st-grid i:nth-child(5) { animation-delay: 0.48s; }
.st-grid i:nth-child(6) { animation-delay: 0.6s; }
.bt-reach:hover .ch:nth-child(2) { transition-delay: 0.05s; }
.bt-reach:hover .ch:nth-child(3) { transition-delay: 0.1s; }
.bt-seo:hover .sp-card { transform: translateY(-6px); }
.bt-media:hover .p1 { transform: rotate(-8deg) translate(-4px, -4px); }
.bt-media:hover .p2 { transform: rotate(7deg) translate(4px, 4px); }
.bt-hero, .bt-tall, .bt-auto { padding-bottom: 0;
    background: linear-gradient(165deg, #fff 0%, #FAFAFE 46%, #F4F5FD 100%); }
.bt-hero h3 { font-size: 1.42rem; }
.bt-hero p { font-size: 1rem; }
.bt-shot { margin: 30px 0 0; flex: 1; min-height: 180px; border-radius: 16px 16px 0 0;
    border: 1px solid var(--line); border-bottom: none; background: #fff; overflow: hidden;
    box-shadow: 0 -2px 30px rgba(27, 36, 112, 0.06);
    transition: transform 0.5s var(--ease); }
.sh-top { height: 30px; background: #EEF0FA; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 6px; padding-left: 14px; }
.sh-top i { width: 8px; height: 8px; border-radius: 50%; background: rgba(13, 18, 56, 0.14); }
.sh-page { padding: 16px 18px 0; }
.sh-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sh-nav .mark { width: 18px; height: 18px; border-radius: 6px; flex: none;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.sh-nav .l { height: 6px; width: 62px; border-radius: 3px; background: rgba(13, 18, 56, 0.13); }
.sh-nav .l.s { width: 30px; }
.sh-nav .l:nth-of-type(2) { margin-left: auto; }
.sh-hero { position: relative; height: 116px; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #6A7CFF, #9D4EDD 55%, #FF5082); }
.sh-hero .sun { position: absolute; top: 14px; right: 18px; width: 20px; height: 20px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.sh-hero .hill { position: absolute; bottom: -22px; left: -16px; width: 190px; height: 66px;
    border-radius: 50% 50% 0 0; background: rgba(255, 255, 255, 0.28); }
.sh-cta { position: absolute; left: 18px; bottom: 16px; padding: 7px 14px; border-radius: 999px;
    background: #fff; color: var(--ink); font-size: 0.72rem; font-weight: 800;
    box-shadow: 0 6px 16px rgba(13, 18, 56, 0.18); }
.sh-lines { margin-top: 18px; }
.sh-lines i { display: block; height: 8px; border-radius: 4px; width: 62%;
    background: rgba(13, 18, 56, 0.13); }
.sh-lines i.s { width: 40%; margin-top: 9px; background: rgba(13, 18, 56, 0.09); }
.sh-cards { display: flex; gap: 12px; margin-top: 18px; }
.sh-cards.two i { height: 76px; }
.sh-cards i { flex: 1; height: 58px; border-radius: 10px; background: #F1F2FA;
    border: 1px solid var(--line); }

/* Geraete-Kachel: Desktop im Hintergrund, Handy davor — beide laufen unten raus */
.bt-devices { position: relative; flex: 1; min-height: 190px; margin-top: 20px; }
.dv-desk { position: absolute; left: 0; right: 68px; bottom: 0; top: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 0 0;
    border-bottom: none; overflow: hidden; box-shadow: 0 -2px 26px rgba(27, 36, 112, 0.06);
    transition: transform 0.5s var(--ease); }
.dv-page { padding: 13px 15px 0; }
.dv-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.dv-nav .mark { width: 15px; height: 15px; border-radius: 5px; flex: none;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.dv-nav .l { height: 5px; width: 54px; border-radius: 3px; background: rgba(13, 18, 56, 0.13); }
.dv-nav .l.s { width: 26px; margin-left: auto; }
.dv-hero { position: relative; height: 74px; border-radius: 10px; overflow: hidden;
    background: linear-gradient(135deg, #6A7CFF, #9D4EDD 55%, #FF5082); }
.dv-hero .sun { position: absolute; top: 9px; right: 12px; width: 14px; height: 14px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.dv-hero .hill { position: absolute; bottom: -14px; left: -10px; width: 120px; height: 44px;
    border-radius: 50% 50% 0 0; background: rgba(255, 255, 255, 0.28); }
.dv-l { display: block; height: 6px; border-radius: 3px; background: rgba(13, 18, 56, 0.14);
    margin-top: 11px; width: 72%; }
.dv-l.s { width: 48%; margin-top: 8px; }
.dv-phone { position: absolute; left: 50%; margin-left: -66px; bottom: 0; width: 132px; top: 0;
    background: #0D1238; border-radius: 20px 20px 0 0; padding: 8px 8px 0;
    box-sizing: border-box; box-shadow: 0 22px 46px rgba(13, 18, 56, 0.3);
    transition: transform 0.5s var(--ease); }
.dv-screen { height: 100%; background: #fff; border-radius: 13px 13px 0 0;
    overflow: hidden; padding: 10px 11px 0; box-sizing: border-box; }
.dv-phone .dv-nav { gap: 6px; margin-bottom: 9px; }
.dv-phone .dv-nav .mark { width: 12px; height: 12px; border-radius: 4px; }
.dv-phone .dv-nav .l.s { width: 34px; }
.dv-hero.sm { height: 56px; border-radius: 8px; }
.dv-hero.sm .sun { top: 7px; right: 8px; width: 10px; height: 10px; }
.dv-hero.sm .hill { bottom: -10px; left: -8px; width: 80px; height: 32px; }
.dv-phone .dv-l { height: 5px; margin-top: 9px; }
.dv-btn { margin-top: 12px; height: 22px; border-radius: 999px; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 800;
    background: linear-gradient(100deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 5px 12px rgba(157, 78, 221, 0.32); }
/* Automatisierung: eine Software-Oberflaeche, in der ein KI-Agent mitarbeitet */
.bt-app { position: relative; margin-top: 26px; flex: 1; min-height: 214px; }
.ap-win { position: absolute; inset: 0; background: #fff; border: 1px solid var(--line);
    border-bottom: none; border-radius: 16px 16px 0 0; overflow: hidden;
    box-shadow: 0 -2px 30px rgba(27, 36, 112, 0.07);
    transition: transform 0.5s var(--ease); }
.ap-bar { height: 34px; background: #EEF0FA; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.ap-bar > i { width: 8px; height: 8px; border-radius: 50%; background: rgba(13, 18, 56, 0.14); }
.ap-mark { width: 16px; height: 16px; border-radius: 5px; margin-left: 14px;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082); }
.ap-title { width: 74px; height: 6px; border-radius: 3px; background: rgba(13, 18, 56, 0.16); }
.ap-body { display: flex; height: calc(100% - 34px); }
.ap-side { width: 52px; flex: none; border-right: 1px solid var(--line); padding: 14px 0;
    display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ap-side i { width: 22px; height: 22px; border-radius: 7px; background: rgba(13, 18, 56, 0.09); }
.ap-side i.on { background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 5px 14px rgba(46, 62, 232, 0.3); }
.ap-main { flex: 1; padding: 14px 16px 0; }
.ap-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px;
    background: #F6F7FD; margin-bottom: 9px; }
.ap-row .av { width: 20px; height: 20px; border-radius: 50%; flex: none;
    background: rgba(13, 18, 56, 0.12); }
.ap-row .b { flex: 1; height: 6px; border-radius: 3px; background: rgba(13, 18, 56, 0.15); }
.ap-row .b.s { max-width: 58%; }
.ap-row .pill { width: 34px; height: 12px; border-radius: 999px; flex: none;
    background: rgba(13, 18, 56, 0.1); }
.ap-row .pill.ok { background: rgba(23, 163, 74, 0.16); }
/* Der Agent sitzt als eigenes Fenster ueber der Oberflaeche */
.ap-agent { position: absolute; right: 12px; bottom: 26px; width: 196px;
    background: #fff; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 16px;
    padding: 13px 14px; box-sizing: border-box;
    box-shadow: 0 20px 44px rgba(27, 36, 112, 0.2);
    transition: transform 0.5s var(--ease); }
.ag-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.ag-av { width: 26px; height: 26px; border-radius: 9px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(130deg, #2E3EE8, #9D4EDD 60%, #FF5082);
    box-shadow: 0 6px 14px rgba(46, 62, 232, 0.32); }
.ag-av svg { width: 15px; height: 15px; fill: #fff; }
.ag-name { font-size: 0.72rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.ag-live { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; background: #17A34A;
    box-shadow: 0 0 0 3px rgba(23, 163, 74, 0.16); }
.ag-l { display: block; height: 6px; border-radius: 3px; background: rgba(13, 18, 56, 0.13); }
.ag-l.s { width: 62%; margin-top: 7px; }
.ag-do { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
    padding: 5px 10px 5px 7px; border-radius: 999px; font-size: 0.64rem; font-weight: 800;
    color: #17A34A; background: rgba(23, 163, 74, 0.1); }
.ag-do svg { width: 11px; height: 11px; stroke: #17A34A; stroke-width: 3; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
.bt-auto:hover .ap-win { transform: translateY(-4px); }
.bt-auto:hover .ap-agent { transform: translateY(-10px); }
.bt-tall:hover .dv-phone { transform: translateY(-8px); }
.bt-hero:hover .bt-shot { transform: translateY(-6px); }


/* ---------- Final CTA ---------- */
.final-cta { padding-bottom: 120px; }
/* Fast schwarze Basis, darauf ein Lichtschein von unten in den Markenfarben
   und ein feines Raster als Textur. */
.cta-card { position: relative; text-align: center; overflow: hidden; isolation: isolate;
    border-radius: 40px 44px 42px 46px / 44px 40px 46px 42px;
    padding: 84px 44px 88px; color: #fff;
    background: radial-gradient(120% 90% at 50% 0%, #171C4A 0%, #0B0E28 55%, #07091C 100%);
    box-shadow: 0 40px 90px rgba(7, 9, 28, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
/* Raster */
.cta-card::before { content: ''; position: absolute; inset: 0; z-index: -2; opacity: 0.5;
    background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(85% 70% at 50% 42%, #000 25%, transparent 78%);
    mask-image: radial-gradient(85% 70% at 50% 42%, #000 25%, transparent 78%); }
/* Aurora: der Schein steigt von unten und wandert langsam */
.cta-card::after { content: ''; position: absolute; z-index: -1;
    left: -12%; right: -12%; bottom: -58%; height: 128%;
    background:
        radial-gradient(46% 58% at 26% 62%, rgba(46, 62, 232, 0.72), transparent 68%),
        radial-gradient(42% 54% at 54% 48%, rgba(157, 78, 221, 0.62), transparent 68%),
        radial-gradient(40% 52% at 80% 66%, rgba(255, 80, 130, 0.5), transparent 68%);
    filter: blur(46px); animation: cta-aurora 16s ease-in-out infinite; }
@keyframes cta-aurora {
    0%, 100% { transform: translate3d(-3%, 0, 0) scale(1); }
    50% { transform: translate3d(3%, -5%, 0) scale(1.09); }
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 900;
    letter-spacing: -0.025em; margin-bottom: 14px; }
.cta-card .script-accent { background: linear-gradient(100deg, #A6B3FF, #FF9EBB);
    -webkit-background-clip: text; background-clip: text; }
.cta-card .script-blue { background: linear-gradient(100deg, #BFDBFE, #A6B3FF);
    -webkit-background-clip: text; background-clip: text; }
.cta-card .script-purple { background: linear-gradient(100deg, #E9D5FF, #FF9EBB);
    -webkit-background-clip: text; background-clip: text; }
.cta-card p { color: rgba(255,255,255,0.85); margin-bottom: 32px; font-size: 1.1rem; }
.cta-card .btn-primary { background: #fff; color: var(--blue-deep);
    box-shadow: 0 14px 40px rgba(0,0,0,0.45); }
.cta-card .btn-primary:hover { background: var(--bg); }
.cta-alt { margin-top: 24px !important; margin-bottom: 0 !important; font-size: 0.95rem !important; }
.cta-alt a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); }

/* ---------- Dankeseite ---------- */
.thanks { text-align: center; }
.thanks .badge { margin-top: 32px; }
.thanks .hero-sub { margin-left: auto; margin-right: auto; }
.thanks .steps { text-align: left; margin-top: 44px; }
.thanks .cta-card { margin-top: 44px; padding: 40px 28px; }
.thanks .cta-card h2 { font-size: 1.4rem; }
.thanks .cta-card p { margin-bottom: 20px; }
.thanks-back { margin: 36px 0 60px; font-size: 0.9rem; }
.thanks-back a { color: var(--ink-60); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 30px 0 90px; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 0.84rem; color: var(--ink-60); }
.site-footer a { color: var(--ink-60); }

/* ---------- Mobile CTA / Consent ---------- */
/* Der Knopf sitzt ueber dem Home-Indikator, nicht darunter. Er weicht zur
   Seite, sobald das Formular selbst im Bild ist — sonst verdeckt er genau
   den Absende-Knopf, zu dem er hinfuehren soll (siehe js/main.js). */
.mobile-cta { display: none; position: fixed; left: 16px; right: 16px; z-index: 60;
    bottom: calc(16px + env(safe-area-inset-bottom));
    text-align: center; padding: 16px; font-weight: 800; font-size: 1.02rem;
    color: #fff; background: var(--blue); border-radius: 999px; text-decoration: none;
    box-shadow: 0 10px 30px rgba(46,62,232,0.45);
    transition: transform 0.32s var(--ease), opacity 0.32s var(--ease); }
.mobile-cta.away { transform: translateY(150%); opacity: 0; pointer-events: none; }

.consent { position: fixed; z-index: 70; left: 16px; max-width: 380px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 18px 20px; box-shadow: 0 16px 48px rgba(13,18,56,0.18); }
.consent p { font-size: 0.83rem; color: var(--ink-60); margin-bottom: 12px; }
.consent a { color: var(--blue); }
.consent-btns { display: flex; gap: 10px; justify-content: flex-end; }
.btn-ghost { padding: 10px 18px; font-size: 0.9rem; font-weight: 700; font-family: inherit;
    background: none; border: 1.5px solid var(--line); border-radius: 999px;
    color: var(--ink-60); cursor: pointer; }
.btn-ghost:hover { border-color: var(--ink-60); }

/* ---------- Kundenstimmen als schräge Wand ----------
   Der gedrehte Block ist breiter und hoeher als das Band: ein gedrehtes
   Rechteck deckt sein Elternelement an den Ecken sonst nicht ab. Was
   uebersteht, schneidet das Band ab, die Verlaeufe kaschieren die Kante.
   Die Karten tragen margin-right statt gap, nur dann ist -50 % exakt das
   erste Set und die Schleife springt nicht. */
/* svh statt vh: mit vh springt die Hoehe auf dem Handy, sobald die Adress-
   leiste beim Scrollen ein- oder ausfaehrt, und die Wand ruckelt mit. */
.voice-wall { position: relative; overflow: hidden;
    height: clamp(400px, 56vh, 560px);
    height: clamp(400px, 56svh, 560px); }
.voice-wall .wall-rot { position: absolute; top: 50%; left: 50%;
    width: calc(100% + 760px); transform: translate(-50%, -50%) rotate(-9deg);
    display: flex; flex-direction: column; gap: 22px; }
.voice-wall .wall-row { display: flex; overflow: hidden; }
.voice-wall .wall-track { display: flex; align-items: stretch; width: max-content;
    animation: wall-scroll 96s linear infinite; }
.voice-wall .wall-track.rtl { animation-direction: reverse; }
@keyframes wall-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.voice-wall .wall-fade { position: absolute; left: 0; right: 0; height: 30%; z-index: 2;
    pointer-events: none; }
.voice-wall .wall-fade-top { top: 0;
    background: linear-gradient(180deg, var(--bg) 8%, rgba(248, 248, 252, 0) 100%); }
.voice-wall .wall-fade-bottom { bottom: 0;
    background: linear-gradient(0deg, var(--bg) 8%, rgba(248, 248, 252, 0) 100%); }

.voice { width: 310px; flex: none; margin-right: 22px;
    display: flex; flex-direction: column; justify-content: space-between;
    background: #fff; border: 1px solid var(--line); border-radius: 22px;
    padding: 24px 24px 20px; box-shadow: var(--shadow-soft); }
.voice blockquote { font-size: 0.97rem; line-height: 1.6; color: var(--ink); }
.voice blockquote::before { content: '„'; }
.voice blockquote::after { content: '“'; }
.voice figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.voice-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 50%; background: var(--grad); color: #fff;
    font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; }
.voice-who { display: flex; flex-direction: column; line-height: 1.35; }
.voice-who b { font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.voice-who small { font-size: 0.84rem; color: var(--ink-60); }

/* ---------- Reveal Animations ---------- */
.reveal { opacity: 0; transform: translateY(28px);
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.steps .reveal:nth-child(2) { transition-delay: 0.12s; }
.steps .reveal:nth-child(3) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .badge-dot, .marquee-track, .showcase-track, .form-wrap::before { animation: none; }
    .hero-showcase { overflow-x: auto; }
    html { scroll-behavior: auto; }
    .site-header, .header-inner, .logo { transition: none; }
    .cta-card::after,
    .sh-page > *, .sh-cta, .ag-l, .ag-do, .dv-roll, .bt-chan .ch, .bt-chan .live, .ag-live,
    .ap-row, .ap-row .pill, .sp-hit, .sp-row, .sp-hit .rank,
    .bt-shots .play, .bt-shots .play::before, .st-grid i { animation: none; }
    .bento > .bt { transition-delay: 0s !important; }
    .voice-wall .wall-track { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 52px; }
    .hero { padding: 48px 0 64px; }
    .hero-showcase { padding-bottom: 56px; }
    .showcase-track .browser-frame { width: 400px; margin-right: 16px; }
    .showcase-track .browser-frame img { height: 325px; }
    .steps { grid-template-columns: 1fr; gap: 36px; }
    .steps::before { display: none; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bt-hero { grid-column: span 2; grid-row: span 2; }
    .bt-tall { grid-column: span 1; grid-row: span 2; }
    .bt-auto { grid-column: span 2; grid-row: span 1; }
    .bt-wide { grid-column: span 1; }
    .bt-band { grid-column: span 2; }
    .section { padding: 68px 0; }
    .mobile-cta { display: block; }
    .site-footer { padding-bottom: 110px; }
    .consent { bottom: 86px; left: 16px; right: 16px; max-width: none; }
    .footer-inner { flex-direction: column; text-align: center; }
    /* Flachere Wand mit kleineren Karten, sonst passt auf dem Handy kaum
       eine ganze Karte ins Bild */
    /* 44 px ist die kleinste Flaeche, die sich mit dem Daumen sicher trifft.
       Gilt ab hier, weil auch Tablets per Finger bedient werden. Der
       zusammengezogene Header muss mitgenannt werden, sonst gewinnen
       .site-header.shrunk .header-wa / .header-phone mit hoeherer
       Spezifitaet und schrumpfen die Flaeche wieder auf 38 px. */
    .header-wa, .site-header.shrunk .header-wa { width: 44px; height: 44px; }
    .header-phone, .site-header.shrunk .header-phone { min-height: 44px; }
    .voice-wall { height: clamp(340px, 46vh, 440px);
        height: clamp(340px, 46svh, 440px); }
    .voice-wall .wall-rot { gap: 16px; }
    .voice { width: 250px; margin-right: 16px; padding: 20px 20px 18px; }
    .voice blockquote { font-size: 0.9rem; }
}
@media (max-width: 600px) {
    /* Die Dreizeiler-Komposition bleibt, aber nowrap darf auf schmalen
       Screens nichts mehr abschneiden: Schrift skaliert mit, Umbruch erlaubt */
    h1 { font-size: clamp(1.5rem, 7.8vw, 2.1rem); }
    .h1-line { white-space: normal; }
    .showcase-track .browser-frame { width: 320px; }
    .showcase-track .browser-frame img { height: 260px; }
    .hero-proof { gap: 28px; }
    .proof-item strong { font-size: 1.7rem; }
    .form-card { padding: 28px 22px; }
    .header-phone span { display: none; }
    .header-actions { gap: 8px; }
    /* Ohne Rufnummer bleibt ein Kreis — der braucht auch in der Breite 44 px */
    .header-phone, .site-header.shrunk .header-phone {
        min-width: 44px; justify-content: center; padding: 11px; border-radius: 999px; }
    .site-header { padding: 0 14px; }
    .header-inner { height: 68px; padding: 0 18px; }
    .site-header.shrunk { padding-top: 10px; }
    .site-header.shrunk .header-inner { max-width: 100%; height: 62px; padding: 0 10px 0 16px; }
    body { padding-top: 68px; }
    .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; }
    .bt { padding: 24px; border-radius: 22px; }
    .bt-hero, .bt-tall, .bt-auto, .bt-wide, .bt-band { grid-column: span 1; grid-row: span 1; }
    .bt-band { flex-direction: column; align-items: flex-start; }
    .bt-band .bt-txt { padding: 0; }
    .bt-band p { max-width: none; }
    .bt-store { margin: 22px 0 0; padding-top: 0; gap: 18px; }
    .badge2 { font-size: 0.82rem; padding: 10px 14px; }
    /* Nebeneinander bliebe fuer den Text nur eine Handbreit: Stapel unter den Text */
    .bt-media, .bt-seo { flex-direction: column; align-items: flex-start; }
    /* Schmal: Icon wieder ueber die Ueberschrift, Text bleibt buendig */
    .bt-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .bt-head + p { margin-left: 0; }
    .bt-media p, .bt-seo p { max-width: none; }
    .bt-shots { margin: 20px 0 0 -4px; }
    .bt-serp { width: 100%; max-width: 260px; margin: 20px 0 0; }
    .bt-hero { min-height: 400px; } .bt-tall { min-height: 380px; }
    .bt-hero h3 { font-size: 1.2rem; }
}