/* ==========================================================================
   Thalmanntools – Design System
   Moderne SaaS-Landingpage, hell, ruhig, schweizerisch.
   Palette aus Logo: Indigo-Blau, kräftiges Violett, Aubergine.
   ========================================================================== */

:root {
    /* Marke */
    --tt-violet: #5B2BE5;
    --tt-violet-strong: #4A1FCB;
    --tt-indigo: #3C6DF0;
    --tt-ink: #1E1333; /* Headlines / Textmarke */
    --tt-ink-soft: #2B1F45;
    /* Flächen */
    --tt-bg: #ffffff;
    --tt-bg-soft: #FAFAFD;
    --tt-bg-lavender: #F3F0FF; /* sehr helles Lavendel */
    --tt-bg-indigo: #EEF2FF; /* sehr helles Indigo */
    --tt-bg-mint: #EEF7F3; /* dezentes Pastell-Grün */
    --tt-bg-sand: #FBF6EE; /* warmes Beige */
    --tt-border: #E6E4F1;
    /* Text */
    --tt-text: #2B1F45;
    --tt-muted: #6B6484;
    --tt-muted-2: #8A84A1;
    /* Akzente & Status */
    --tt-accent: var(--tt-violet);
    --tt-accent-soft: #EDE6FF;
    --tt-success: #2EA56B;
    /* Gradients */
    --tt-grad-hero: radial-gradient(1200px 600px at 10% -10%, #EDE6FF 0%, rgba(237,230,255,0) 60%), radial-gradient(900px 500px at 110% 0%, #E5ECFF 0%, rgba(229,236,255,0) 55%), linear-gradient(180deg, #FBFAFF 0%, #ffffff 70%);
    --tt-grad-cta: linear-gradient(135deg, var(--tt-violet) 0%, var(--tt-indigo) 100%);
    --tt-grad-outline: linear-gradient(135deg, #EDE6FF 0%, #E5ECFF 100%);
    /* Radii & Shadow */
    --tt-r-sm: 10px;
    --tt-r-md: 14px;
    --tt-r-lg: 20px;
    --tt-r-xl: 28px;
    --tt-shadow-1: 0 1px 2px rgba(30, 19, 51, 0.04), 0 2px 6px rgba(30, 19, 51, 0.04);
    --tt-shadow-2: 0 4px 10px rgba(30, 19, 51, 0.05), 0 16px 40px rgba(91, 43, 229, 0.08);
    --tt-shadow-3: 0 10px 30px rgba(30, 19, 51, 0.08), 0 30px 80px rgba(91, 43, 229, 0.12);
    /* Layout */
    --tt-container: 1200px;
    --tt-container-narrow: 960px;
    /* Typo */
    --tt-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tt-font-head: var(--tt-font-body);
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    /* Globaler Schutz: nichts darf den Viewport seitlich sprengen.
       Einzelne, bewusst horizontal scrollende Elemente (z. B. .tt-pctrl__tabwrap)
       bleiben davon unberührt, weil sie eigenes overflow-x: auto setzen. */
    overflow-x: clip;
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--tt-header-h, 72px) + 1rem + 10px);
}

body {
    font-family: var(--tt-font-body);
    color: var(--tt-text);
    background: var(--tt-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--tt-violet);
    text-decoration: none;
}

    a:hover {
        color: var(--tt-violet-strong);
    }

h1, h2, h3, h4 {
    color: var(--tt-ink);
    font-family: var(--tt-font-head);
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 1rem;
}

/* Utilities --------------------------------------------------------------- */
.tt-container {
    max-width: var(--tt-container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 600px) {
    .tt-container {
        padding: 0 1.75rem;
    }
}

.tt-narrow {
    max-width: var(--tt-container-narrow);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.tt-center {
    text-align: center;
}

.tt-skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tt-ink);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 100;
    border-radius: 0 0 var(--tt-r-sm) 0;
}

    .tt-skiplink:focus {
        left: 0;
        top: 0;
    }

/* Buttons ----------------------------------------------------------------- */
.tt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .95rem 1.35rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
}

.tt-btn--primary {
    background: var(--tt-grad-cta);
    color: #fff;
    box-shadow: 0 10px 24px rgba(91, 43, 229, 0.25);
}

    .tt-btn--primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(91, 43, 229, 0.32);
        color: #fff;
    }

.tt-btn--ghost {
    background: #fff;
    color: var(--tt-ink);
    border-color: var(--tt-border);
}

    .tt-btn--ghost:hover {
        border-color: var(--tt-violet);
        color: var(--tt-violet);
    }

/* Ghost-Variante auf dunklem Hintergrund (z.B. Casestudy-Hero) */
.tt-btn--ghost.tt-btn--on-dark {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}
    .tt-btn--ghost.tt-btn--on-dark:hover {
        background: rgba(255, 255, 255, .08);
        border-color: #fff;
        color: #fff;
    }

.tt-btn--link {
    background: transparent;
    color: var(--tt-violet);
    padding: .5rem 0;
    border-radius: 0;
}

    .tt-btn--link:hover {
        color: var(--tt-violet-strong);
    }

.tt-btn--lg {
    padding: 1.05rem 1.6rem;
    font-size: 1.02rem;
}

/* Eyebrow / Pills --------------------------------------------------------- */
.tt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .8rem;
    background: var(--tt-accent-soft);
    color: var(--tt-violet);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin: 0 0 1rem;
}

.tt-eyebrow--sand {
    background: var(--tt-bg-sand);
    color: #8A5A17;
}

.tt-eyebrow--mint {
    background: var(--tt-bg-mint);
    color: #1F7A54;
}

.tt-eyebrow--indigo {
    background: var(--tt-bg-indigo);
    color: #2A4ECC;
}

/* Header / Nav ------------------------------------------------------------ */
.tt-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(230, 228, 241, .7);
}

/* Auf Mobile fix oben halten – sticky greift in manchen iOS-/Layout-Konstellationen
   nicht zuverlässig. Body bekommt den entsprechenden Top-Abstand, damit der erste
   Inhalt nicht verdeckt wird. */
@media (max-width: 899px) {
    .tt-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    body {
        padding-top: var(--tt-header-h, 72px);
    }
}

@media (max-width: 599px) {

    body {
        padding-top: var(--tt-header-h, 58px);
    }
}

.tt-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
}

@media (min-width: 600px) {
    .tt-header__inner {
        padding: .9rem 1.25rem;
    }
}

@media (min-width: 960px) {
    .tt-header__inner {
        padding: .9rem 0;
    }
}

/* Mobile-Override: muss nach den min-width:600-Regeln stehen, sonst gewinnt
   bei Viewports zwischen 600 und 899 px die größere Padding-Variante. */
@media (max-width: 899px) {
    .tt-header__inner {
        padding: .45rem .9rem;
    }
}

@media (max-width: 599px) {
    .tt-header__inner {
        padding: .35rem .75rem;
        gap: .5rem;
    }
}

.tt-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--tt-ink);
    font-weight: 700;
}

    .tt-logo img {
        height: 34px;
        width: auto;
    }

@media (max-width: 599px) {
    .tt-logo img {
        height: 26px;
    }
}

.tt-nav {
    display: none;
}

.tt-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.75rem;
}

.tt-nav__link {
    color: var(--tt-ink-soft);
    font-weight: 500;
    font-size: .98rem;
    padding: .4rem 0;
    position: relative;
}

    .tt-nav__link:hover {
        color: var(--tt-violet);
    }

.tt-header__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tt-header__cta {
    display: none;
}

.tt-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--tt-border);
    background: #fff;
    cursor: pointer;
}

    .tt-nav-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--tt-ink);
        position: relative;
    }

        .tt-nav-toggle span::before, .tt-nav-toggle span::after {
            content: "";
            position: absolute;
            left: 0;
            width: 18px;
            height: 2px;
            background: var(--tt-ink);
        }

        .tt-nav-toggle span::before {
            top: -6px;
        }

        .tt-nav-toggle span::after {
            top: 6px;
        }

@media (min-width: 960px) {
    .tt-nav {
        display: block;
    }

    .tt-header__cta {
        display: inline-flex;
    }

    .tt-nav-toggle {
        display: none;
    }
}

/* Mobile Menü – Fullscreen Overlay (Open via JS) */
.tt-mobilenav {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: radial-gradient(120% 80% at 100% 0%, rgba(91, 43, 229, .12), transparent 60%),
                radial-gradient(120% 80% at 0% 100%, rgba(91, 43, 229, .10), transparent 55%),
                rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    backdrop-filter: saturate(140%) blur(18px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5.5rem 1.25rem 2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .28s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
}

.tt-mobilenav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .28s ease, transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}

.tt-mobilenav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 640px;
    margin-inline: auto;
}

.tt-mobilenav > ul > li,
.tt-mobilenav > .tt-btn {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.tt-mobilenav[data-open="true"] > ul > li,
.tt-mobilenav[data-open="true"] > .tt-btn {
    opacity: 1;
    transform: translateY(0);
}

.tt-mobilenav[data-open="true"] > ul > li:nth-child(1) { transition-delay: .06s; }
.tt-mobilenav[data-open="true"] > ul > li:nth-child(2) { transition-delay: .10s; }
.tt-mobilenav[data-open="true"] > ul > li:nth-child(3) { transition-delay: .14s; }
.tt-mobilenav[data-open="true"] > ul > li:nth-child(4) { transition-delay: .18s; }
.tt-mobilenav[data-open="true"] > ul > li:nth-child(5) { transition-delay: .22s; }
.tt-mobilenav[data-open="true"] > ul > li:nth-child(6) { transition-delay: .26s; }
.tt-mobilenav[data-open="true"] > ul > li:nth-child(7) { transition-delay: .30s; }
.tt-mobilenav[data-open="true"] > ul > li:nth-child(8) { transition-delay: .34s; }
.tt-mobilenav[data-open="true"] > ul > li:nth-child(9) { transition-delay: .38s; }
.tt-mobilenav[data-open="true"] > .tt-btn { transition-delay: .44s; }

.tt-mobilenav a,
.tt-mobilenav summary {
    display: block;
    padding: 1rem 1.1rem;
    color: var(--tt-ink);
    font-weight: 600;
    font-size: 1.15rem;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    text-decoration: none;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
}

.tt-mobilenav a:hover,
.tt-mobilenav a:focus-visible,
.tt-mobilenav summary:hover {
    background: rgba(91, 43, 229, .06);
    color: var(--tt-violet, #5B2BE5);
    padding-left: 1.4rem;
}

.tt-mobilenav .tt-btn {
    display: block;
    margin: 1.5rem auto 0;
    max-width: 640px;
    text-align: center;
}

.tt-mobilenav a.tt-btn--primary,
.tt-mobilenav a.tt-btn--primary:hover,
.tt-mobilenav a.tt-btn--primary:focus-visible {
    color: #fff;
    padding-left: 1.5rem;
    border-bottom: 0;
    background: var(--tt-grad-cta);
}

/* Body-Scroll-Lock wenn Menü offen */
body.tt-nav-open {
    overflow: hidden;
}

/* Header über Overlay halten + sticky→fixed wechseln, da overflow:hidden sticky bricht */
body.tt-nav-open .tt-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* Mobilenav darunter ausreichend Platz lassen für den Header */
.tt-mobilenav {
    padding-top: max(4.5rem, env(safe-area-inset-top, 0px) + 4rem);
}

/* Burger → X Animation */
.tt-nav-toggle {
    position: relative;
    z-index: 1001;
    transition: transform .3s ease;
}

.tt-nav-toggle span,
.tt-nav-toggle span::before,
.tt-nav-toggle span::after {
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .2s ease, top .3s ease, opacity .2s ease;
}

.tt-nav-toggle[aria-expanded="true"] span {
    background: transparent;
}

.tt-nav-toggle[aria-expanded="true"] span::before {
    top: 0;
    transform: rotate(45deg);
}

.tt-nav-toggle[aria-expanded="true"] span::after {
    top: 0;
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .tt-mobilenav,
    .tt-mobilenav > ul > li,
    .tt-mobilenav > .tt-btn,
    .tt-nav-toggle span,
    .tt-nav-toggle span::before,
    .tt-nav-toggle span::after {
        transition: none !important;
    }
}

/* Sections ---------------------------------------------------------------- */
.tt-section {
    padding: 4rem 0;
}

@media (min-width: 800px) {
    .tt-section {
        padding: 6rem 0;
    }
}

.tt-section--sm {
    padding: 3rem 0;
}

.tt-section--soft {
    background: var(--tt-bg-soft);
}

.tt-section--lavender {
    background: var(--tt-bg-lavender);
}

.tt-section--indigo {
    background: var(--tt-bg-indigo);
}

.tt-section--mint {
    background: var(--tt-bg-mint);
}

.tt-section--sand {
    background: var(--tt-bg-sand);
}

.tt-section--dark {
    background: var(--tt-ink);
    color: #E5DFF5;
}

    .tt-section--dark h2, .tt-section--dark h3 {
        color: #fff;
    }

.tt-section__header {
    max-width: 760px;
    margin: 0 0 2.5rem;
}

.tt-section__header--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.tt-section__title {
    font-size: clamp(1.8rem, 2.4vw + 1rem, 2.4rem);
    line-height: 1.15;
    margin: 0 0 1rem;
    font-weight: 800;
}

.tt-section__lead {
    font-size: 1.125rem;
    color: var(--tt-muted);
    margin: 0;
}

/* ============================= HERO ==================================== */
.tt-hero {
    position: relative;
    overflow: hidden;
    background: var(--tt-grad-hero);
    padding: 4.5rem 0 3rem;
}

    .tt-hero::before,
    .tt-hero::after {
        content: "";
        position: absolute;
        z-index: 0;
        pointer-events: none;
        border-radius: 50%;
        filter: blur(60px);
        opacity: .55;
    }

    .tt-hero::before {
        width: 420px;
        height: 420px;
        background: #DDD0FF;
        top: -120px;
        left: -120px;
    }

    .tt-hero::after {
        width: 360px;
        height: 360px;
        background: #D4DEFF;
        top: -80px;
        right: -120px;
    }

.tt-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    align-items: center;
}

.tt-hero__headline {
    font-size: clamp(2.1rem, 3.2vw + 1rem, 3.5rem);
    line-height: 1.08;
    margin: 0 0 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

    .tt-hero__headline em {
        font-style: normal;
        background: var(--tt-grad-cta);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        /*    padding-bottom:8px;*/
    }

.tt-hero__sub {
    font-size: 1.15rem;
    color: var(--tt-muted);
    margin: 0 0 1.8rem;
    max-width: 620px;
}

.tt-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.tt-hero__trust {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--tt-muted);
    font-size: .92rem;
    margin: .5rem 0 0;
}

.tt-hero__trust--center {
    display: flex;
    justify-content: center;
    margin: 1.25rem auto 0;
}

.tt-hero__trust::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tt-success);
    box-shadow: 0 0 0 4px rgba(46, 165, 107, .18);
}

.tt-hero__visual {
    position: relative;
    z-index: 1;
}

@media (min-width: 1000px) {
    .tt-hero {
        padding: 6rem 0 4rem;
    }

    .tt-hero__inner {
        grid-template-columns: 1.05fr 1fr;
        gap: 3.5rem;
    }
}

/* Dashboard Mockup (CSS only) -------------------------------------------- */
.tt-mockup {
    position: relative;
    border-radius: var(--tt-r-xl);
    background: #fff;
    box-shadow: var(--tt-shadow-3);
    overflow: hidden;
    border: 1px solid var(--tt-border);
}

.tt-mockup__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem .9rem;
    background: #FBFAFF;
    border-bottom: 1px solid var(--tt-border);
}

    .tt-mockup__bar i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #E6E4F1;
        display: inline-block;
    }

        .tt-mockup__bar i:nth-child(1) {
            background: #FF5F57;
        }

        .tt-mockup__bar i:nth-child(2) {
            background: #FEBC2E;
        }

        .tt-mockup__bar i:nth-child(3) {
            background: #28C840;
        }

    .tt-mockup__bar span {
        margin-left: .8rem;
        font-size: .8rem;
        color: var(--tt-muted-2);
    }

.tt-mockup__body {
    display: grid;
    grid-template-columns: 180px 1fr;
    min-height: 360px;
}

.tt-mockup__side {
    background: #FAFAFD;
    border-right: 1px solid var(--tt-border);
    padding: 1rem .8rem;
    font-size: .82rem;
    color: var(--tt-muted);
}

.tt-mockup__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--tt-ink);
    margin-bottom: 1rem;
}

    .tt-mockup__brand i {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: var(--tt-grad-cta);
    }

.tt-mockup__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .15rem;
}

    .tt-mockup__menu li {
        padding: .45rem .6rem;
        border-radius: 8px;
        color: var(--tt-ink-soft);
    }

        .tt-mockup__menu li.is-active {
            background: var(--tt-accent-soft);
            color: var(--tt-violet);
            font-weight: 600;
        }

.tt-mockup__main {
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.tt-mockup__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}

.tt-kpi {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-md);
    padding: .75rem .85rem;
}

.tt-kpi__label {
    font-size: .72rem;
    color: var(--tt-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tt-kpi__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tt-ink);
    margin-top: .15rem;
}

.tt-kpi__delta {
    font-size: .75rem;
    color: var(--tt-success);
    margin-top: .2rem;
}

.tt-mockup__chart {
    background: linear-gradient(180deg, #F6F3FF 0%, #fff 100%);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-md);
    padding: .9rem;
    height: 140px;
    position: relative;
    overflow: hidden;
}

    .tt-mockup__chart::after {
        content: "";
        position: absolute;
        inset: auto 0 10px 0;
        height: 70%;
        background: linear-gradient(180deg, rgba(91,43,229,.35), rgba(91,43,229,0) 80%), radial-gradient(600px 80px at 30% 100%, rgba(60,109,240,.25), transparent 70%);
        clip-path: polygon(0% 80%, 8% 60%, 18% 70%, 28% 45%, 40% 55%, 52% 30%, 64% 40%, 76% 20%, 88% 35%, 100% 25%, 100% 100%, 0% 100%);
    }

    .tt-mockup__chart h4 {
        margin: 0 0 .3rem;
        font-size: .88rem;
    }

    .tt-mockup__chart small {
        color: var(--tt-muted);
        font-size: .75rem;
    }

.tt-mockup__list {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-md);
    padding: .6rem .85rem;
}

    .tt-mockup__list h4 {
        margin: .3rem 0 .55rem;
        font-size: .88rem;
    }

.tt-mockup__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    border-top: 1px dashed #EFEDF6;
    font-size: .82rem;
}

    .tt-mockup__row:first-of-type {
        border-top: 0;
    }

    .tt-mockup__row span.tag {
        background: var(--tt-accent-soft);
        color: var(--tt-violet);
        font-size: .7rem;
        padding: .15rem .5rem;
        border-radius: 999px;
        font-weight: 600;
    }

    .tt-mockup__row span.tag--mint {
        background: #DFF1E8;
        color: #1F7A54;
    }

    .tt-mockup__row span.tag--sand {
        background: #FBEEDC;
        color: #8A5A17;
    }

/* schwebende Badges über Mockup */
.tt-float {
    position: absolute;
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-md);
    box-shadow: var(--tt-shadow-2);
    padding: .65rem .8rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    color: var(--tt-ink);
}

    .tt-float i {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: var(--tt-grad-cta);
        display: inline-grid;
        place-items: center;
        color: #fff;
        font-weight: 700;
        font-size: .82rem;
    }

.tt-float--tl {
    top: -18px;
    left: -18px;
}

.tt-float--br {
    bottom: -18px;
    right: -18px;
    background: var(--tt-ink);
    color: #fff;
    border-color: var(--tt-ink);
}

    .tt-float--br i {
        background: #fff;
        color: var(--tt-violet);
    }

/* ============================= PROBLEM ================================= */
.tt-problem__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    align-items: start;
}

.tt-cta-callback h2 {
    color: white;
}

@media (min-width: 900px) {
    .tt-problem__grid {
        grid-template-columns:1.5fr 1fr;
        gap: 3rem;
    }
}

.tt-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .65rem;
}

    .tt-checklist li {
        position: relative;
        padding: .95rem 1rem .95rem 3rem;
        background: #fff;
        border: 1px solid var(--tt-border);
        border-radius: var(--tt-r-md);
        box-shadow: var(--tt-shadow-1);
        color: var(--tt-ink-soft);
        font-weight: 500;
    }

        .tt-checklist li::before {
            content: "";
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--tt-accent-soft);
            border: 2px solid var(--tt-violet);
        }

.tt-checklist--after li::before {
    background: #D8F1E4;
    border-color: var(--tt-success);
}

.tt-checklist--after li::after {
    left: 1.30rem;
    content: "";
    position: absolute;
    /*   left: 1.35rem;*/
    top: 50%;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--tt-success);
    border-bottom: 2px solid var(--tt-success);
    transform: translateY(-75%) rotate(-45deg);
}

.tt-problem__closing {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--tt-grad-outline);
    border-radius: var(--tt-r-lg);
    font-weight: 600;
    color: var(--tt-ink);
    max-width: 760px;
}

/* Konsequenz-Block: farbige Karte in Markenviolett mit roten X-Markern */
.tt-consequence {
    position: relative;
    padding: 1.75rem 1.85rem 1.65rem;
    border-radius: var(--tt-r-lg);
    background: linear-gradient(140deg, #3C2A7A 0%, #4A1FCB 55%, #5B2BE5 100%);
    color: #fff;
    box-shadow: 0 16px 40px rgba(76,31,203,.22);
    overflow: hidden;
}

    .tt-consequence::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(420px 220px at 90% 0%, rgba(255,180,180,.18), transparent 60%), radial-gradient(520px 320px at 5% 110%, rgba(60,109,240,.28), transparent 60%);
        pointer-events: none;
    }

    .tt-consequence > * {
        position: relative;
    }

.tt-consequence__label {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #FFD1D1;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,180,180,.35);
    padding: .4rem .9rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.tt-consequence__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .95rem;
}

    .tt-consequence__list li {
        position: relative;
        padding: .25rem 0 .25rem 2.4rem;
        font-weight: 600;
        color: #fff;
        line-height: 1.45;
        font-size: 1rem;
    }

        .tt-consequence__list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #E5484D;
            box-shadow: 0 0 0 4px rgba(229,72,77,.18), 0 4px 10px rgba(229,72,77,.35);
        }

        .tt-consequence__list li::after {
            content: "";
            position: absolute;
            left: 7px;
            top: 50%;
            width: 12px;
            height: 12px;
            transform: translateY(-50%);
            background: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
        }

/* ============================= BENEFITS (1x4) ========================== */
.tt-benefits__hub {
    position: relative;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

@media (min-width: 760px) {
    .tt-benefits__hub {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1100px) {
    .tt-benefits__hub {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tt-benefit {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-lg);
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: var(--tt-shadow-1);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    color: inherit;
    text-decoration: none;
}

    .tt-benefit:hover {
        transform: translateY(-3px);
        box-shadow: var(--tt-shadow-2);
        border-color: #D8D2F5;
    }

.tt-benefit__num {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--tt-grad-cta);
    color: #fff;
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: 0 6px 14px rgba(91, 43, 229, 0.25);
}

.tt-benefit h3 {
    font-size: 1.1rem;
    margin: 0 0 .5rem;
}

.tt-benefit p {
    color: var(--tt-muted);
    margin: 0 0 1rem;
    font-size: .96rem;
}

.tt-benefit__more {
    display: inline-block;
    font-weight: 600;
    color: var(--tt-primary, #5B2BE5);
    font-size: .92rem;
}

.tt-benefit:hover .tt-benefit__more {
    text-decoration: underline;
}

/* Link-Variante: ganze Card klickbar, Pfeil-CTA mit Slide-Animation */
a.tt-benefit--link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

a.tt-benefit--link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(91, 43, 229, 0);
    transition: box-shadow .25s ease;
}

a.tt-benefit--link:hover::after,
a.tt-benefit--link:focus-visible::after {
    box-shadow: 0 0 0 2px rgba(91, 43, 229, .35);
}

.tt-benefit__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
    padding-top: .25rem;
    font-weight: 600;
    color: var(--tt-primary, #5B2BE5);
    font-size: .92rem;
}

.tt-benefit__cta > span {
    display: inline-block;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

a.tt-benefit--link:hover .tt-benefit__cta > span,
a.tt-benefit--link:focus-visible .tt-benefit__cta > span {
    transform: translateX(4px);
}

.tt-core-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid var(--tt-border);
    padding: .7rem 1.1rem;
    border-radius: 999px;
    box-shadow: var(--tt-shadow-1);
    font-weight: 600;
    color: var(--tt-ink);
    margin: 0 0 1.5rem;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

a.tt-core-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--tt-shadow-2);
    border-color: #D8D2F5;
}

    .tt-core-pill::before {
        content: "1x";
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--tt-grad-cta);
        color: #fff;
        font-size: .78rem;
        font-weight: 700;
    }

.tt-benefits__closing {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px dashed #D8D2F5;
    border-radius: var(--tt-r-lg);
    color: var(--tt-muted);
}

/* ============================= SOLUTION ================================ */
.tt-solution__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

@media (min-width: 700px) {
    .tt-solution__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .tt-solution__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tt-solution__item {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-lg);
    padding: 1.25rem 1.25rem 1.25rem 3.25rem;
    box-shadow: var(--tt-shadow-1);
    position: relative;
    color: var(--tt-ink-soft);
    font-weight: 500;
}

    .tt-solution__item::before {
        content: "";
        position: absolute;
        left: 1rem;
        top: 1.1rem;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--tt-accent-soft);
    }

    .tt-solution__item::after {
        content: "";
        position: absolute;
        left: 1.45rem;
        /*     top: 1.4rem;*/
        top: 1.6rem;
        width: 14px;
        height: 8px;
        border-left: 2px solid var(--tt-violet);
        border-bottom: 2px solid var(--tt-violet);
        transform: rotate(-45deg);
    }

/* ============================= INDUSTRIES ============================== */
.tt-industries__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

.tt-trust__grid .tt-trust__list li::after {
    left: 0.27rem;
    top: .75rem;
    width: 10px;
    height: 5px;
}

@media (min-width: 720px) {
    .tt-industries__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tt-industry {
    position: relative;
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-lg);
    padding: 1.5rem;
    box-shadow: var(--tt-shadow-1);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .tt-industry:hover {
        transform: translateY(-3px);
        box-shadow: var(--tt-shadow-2);
    }

.tt-industry--primary {
    background: linear-gradient(160deg, #F3F0FF 0%, #ffffff 60%);
    border-color: #D8D2F5;
}

.tt-industry__label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--tt-accent-soft);
    color: var(--tt-violet);
    margin-bottom: .9rem;
}

.tt-industry--primary .tt-industry__label {
    background: var(--tt-grad-cta);
    color: #fff;
}

.tt-industry h3 {
    font-size: 1.25rem;
    margin: 0 0 .5rem;
}

.tt-industry p {
    color: var(--tt-muted);
    margin: 0;
}

.tt-industry__logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,.06);
}

.tt-industry__logos img {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .65;
    transition: filter .2s ease, opacity .2s ease;
}

.tt-industry:hover .tt-industry__logos img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============================= OUTCOME ================================= */
.tt-outcome__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
}

@media (min-width: 900px) {
    .tt-outcome__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

.tt-outcome__col {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-lg);
    padding: 1.75rem;
    box-shadow: var(--tt-shadow-1);
}

.tt-outcome__col--after {
    background: linear-gradient(160deg, #F3F0FF 0%, #EEF2FF 100%);
    border-color: #D8D2F5;
    box-shadow: var(--tt-shadow-2);
}

.tt-outcome__title {
    font-size: 1.2rem;
    margin: 0 0 1rem;
}

.tt-outcome__col--after .tt-outcome__title {
    color: var(--tt-violet);
}

/* ============================= TRUST =================================== */
.tt-trust__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 900px) {
    .tt-trust__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

.tt-trust__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: .6rem;
}

    .tt-trust__list li {
        padding-left: 2rem;
        position: relative;
        color: var(--tt-ink-soft);
    }

        .tt-trust__list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .4rem;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--tt-accent-soft);
        }

        .tt-trust__list li::after {
            content: "";
            position: absolute;
            left: .35rem;
            top: .65rem;
            width: 10px;
            height: 6px;
            border-left: 2px solid var(--tt-violet);
            border-bottom: 2px solid var(--tt-violet);
            transform: rotate(-45deg);
        }

.tt-quote {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-lg);
    padding: 1.75rem;
    box-shadow: var(--tt-shadow-2);
    position: relative;
}

    .tt-quote::before {
        content: "“";
        position: absolute;
        top: -20px;
        left: 20px;
        font-size: 5rem;
        line-height: 1;
        color: var(--tt-violet);
        font-family: Georgia, serif;
    }

    .tt-quote p {
        font-size: 1.1rem;
        color: var(--tt-ink);
        margin: 0 0 1rem;
    }

    .tt-quote cite {
        color: var(--tt-muted);
        font-style: normal;
        font-weight: 600;
    }

/* ============================= PROCESS ================================= */
.tt-process__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

@media (min-width: 700px) {
    .tt-process__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .tt-process__grid {
        grid-template-columns: repeat(5, 1fr);
        gap: .75rem;
    }
}

.tt-step {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-lg);
    padding: 1.4rem 1.2rem 1.3rem;
    box-shadow: var(--tt-shadow-1);
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}

.tt-step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tt-grad-cta);
    opacity: .85;
}

a.tt-step:hover,
a.tt-step:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -16px rgba(58, 26, 168, .35);
    border-color: #d6cefb;
}

.tt-step.is-current {
    background: linear-gradient(160deg, #5B2BE5 0%, #3A1AA8 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 18px 36px -18px rgba(58, 26, 168, .65);
    transform: translateY(-4px);
    pointer-events: none;
}

.tt-step.is-current::before {
    background: rgba(255, 255, 255, .35);
    height: 4px;
    opacity: 1;
}

.tt-step.is-current .tt-step__num {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

.tt-step.is-current h3,
.tt-step.is-current p {
    color: #fff;
}

.tt-step.is-current p {
    color: rgba(255, 255, 255, .85);
}

.tt-step.is-current .tt-step__more {
    display: none;
}

.tt-step.is-current::after {
    content: "Du bist hier";
    position: absolute;
    top: .65rem;
    right: .65rem;
    font-size: .62rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, .2);
    padding: .15rem .45rem;
    border-radius: 999px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (min-width: 1000px) {
    .tt-step + .tt-step::after {
        content: "";
        position: absolute;
        left: -.55rem;
        top: 50%;
        width: 10px;
        height: 10px;
        border-top: 2px solid #cbd0e4;
        border-right: 2px solid #cbd0e4;
        transform: translateY(-50%) rotate(45deg);
        pointer-events: none;
    }
}

.tt-step__num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    background: var(--tt-grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .65rem;
}

.tt-step h3 {
    font-size: 1.02rem;
    margin: 0 0 .4rem;
}

.tt-step p {
    color: var(--tt-muted);
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
}

.tt-step__more {
    display: inline-block;
    margin-top: .75rem;
    font-size: .78rem;
    font-weight: 700;
    color: #5b2be5;
}

a.tt-step:hover .tt-step__more {
    text-decoration: underline;
}

/* ============================= TESTIMONIALS ============================ */
.tt-testimonials__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

@media (min-width: 780px) {
    .tt-testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .tt-testimonials__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tt-testimonial {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-lg);
    padding: 1.5rem;
    box-shadow: var(--tt-shadow-1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .tt-testimonial p {
        color: var(--tt-ink);
        margin: 0;
        font-size: 1.02rem;
    }

.tt-testimonial__meta {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tt-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--tt-grad-cta);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    font-size: .92rem;
}

.tt-testimonial__name {
    font-weight: 700;
    color: var(--tt-ink);
}

.tt-testimonial__company {
    color: var(--tt-muted);
    font-size: .88rem;
}

/* ============================= FOUNDER ================================= */
.tt-founder__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 900px) {
    .tt-founder__grid {
        grid-template-columns: .8fr 1.2fr;
        gap: 3rem;
    }
}

.tt-founder__img {
    background: linear-gradient(160deg, #EDE6FF 0%, #E5ECFF 100%);
    border-radius: var(--tt-r-xl);
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    color: var(--tt-violet);
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: var(--tt-shadow-2);
}

.tt-founder__text p {
    font-size: 1.05rem;
    color: var(--tt-ink-soft);
}

/* ============================= FINAL CTA =============================== */
.tt-final {
    position: relative;
    background: var(--tt-grad-cta);
    color: #fff;
    text-align: center;
    padding: 5rem 0;
    overflow: hidden;
}

    .tt-final::before, .tt-final::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: .35;
    }

    .tt-final::before {
        width: 400px;
        height: 400px;
        background: #fff;
        top: -180px;
        left: -100px;
    }

    .tt-final::after {
        width: 500px;
        height: 500px;
        background: #9E7AFF;
        bottom: -240px;
        right: -120px;
    }

.tt-final__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.tt-final h2 {
    color: #fff;
    font-size: clamp(2rem, 2.5vw + 1rem, 2.8rem);
    margin: 0 0 1rem;
}

.tt-final p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    margin: 0 0 2rem;
}

.tt-final .tt-btn--primary {
    background: #fff;
    color: var(--tt-violet);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

    .tt-final .tt-btn--primary:hover {
        color: var(--tt-violet-strong);
        transform: translateY(-1px);
    }

.tt-final .tt-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

    .tt-final .tt-btn--ghost:hover {
        border-color: #fff;
        color: #fff;
    }

/* ============================= FOOTER ================================== */
.tt-footer {
    background: var(--tt-ink);
    color: #BDB4D6;
    padding: 3.5rem 0 2rem;
}

    .tt-footer a {
        color: #E5DFF5;
    }

        .tt-footer a:hover {
            color: #fff;
        }

.tt-footer__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 800px) {
    .tt-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}

.tt-footer h4 {
    color: #fff;
    font-size: .95rem;
    margin: 0 0 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tt-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
}

.tt-footer__brand p {
    color: #BDB4D6;
    max-width: 340px;
}

.tt-footer__brand .tt-logo {
    color: #fff;
}

    .tt-footer__brand .tt-logo img {
        filter: brightness(0) invert(1);
    }

.tt-footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    justify-content: space-between;
    color: #8B84A5;
    font-size: .88rem;
}

/* ============================= INVOICE FOCUS =========================== */
.tt-invoice {
    position: relative;
}

/* Globale Check-Liste (wird auch von invoice genutzt) */
ul.tt-check {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: .55rem;
}

    ul.tt-check li {
        position: relative;
        padding: .1rem 0 .1rem 1.9rem;
        color: var(--tt-ink-soft);
        line-height: 1.5;
    }

        ul.tt-check li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .28rem;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"), linear-gradient(135deg, var(--tt-violet) 0%, #3C6DF0 100%);
            background-repeat: no-repeat, no-repeat;
            background-position: center, center;
            background-size: 12px 12px, 100% 100%;
            box-shadow: 0 2px 6px rgba(76, 31, 203, .18);
        }

        ul.tt-check li::after {
            content: none;
        }

/* 3-Schritte-Flow: Erfassen → Büro → Rechnung */
.tt-invoice-flow {
    list-style: none;
    padding: 0;
    margin: 2rem 0 2.5rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 1rem;
    align-items: stretch;
}

    .tt-invoice-flow > li:not(.tt-invoice-flow__arrow) {
        background: #fff;
        border: 1px solid var(--tt-border);
        border-radius: var(--tt-r-lg);
        padding: 1.5rem 1.35rem 1.4rem;
        box-shadow: var(--tt-shadow-1);
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

.tt-invoice-flow__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tt-violet) 0%, #3C6DF0 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(76,31,203,.22);
}

.tt-invoice-flow > li h3 {
    margin: .25rem 0 .15rem;
    font-size: 1.08rem;
}

.tt-invoice-flow > li p {
    color: var(--tt-ink-soft);
    margin: 0;
    line-height: 1.5;
}

.tt-invoice-flow__arrow {
    display: grid;
    place-items: center;
    color: var(--tt-violet);
    opacity: .75;
}

@media (max-width: 880px) {
    .tt-invoice-flow {
        grid-template-columns: 1fr;
    }

    .tt-invoice-flow__arrow {
        transform: rotate(90deg);
        padding: .25rem 0;
    }
}

/* Grid mit Rechnungseditor + Zahlungsabgleich */
.tt-invoice__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (min-width: 980px) {
    .tt-invoice__grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 1.75rem;
    }
}

.tt-invoice-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-xl);
    padding: 1.85rem 1.85rem 1.75rem;
    box-shadow: var(--tt-shadow-2);
    overflow: hidden;
}

    .tt-invoice-card h3 {
        font-size: 1.4rem;
        margin: .3rem 0 .6rem;
    }

    .tt-invoice-card p {
        color: var(--tt-ink-soft);
    }

.tt-invoice-card--editor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 260px at 100% 0%, rgba(76,31,203,.08), transparent 60%), radial-gradient(600px 260px at 0% 100%, rgba(60,109,240,.06), transparent 60%);
    pointer-events: none;
}

.tt-invoice-card--editor > * {
    position: relative;
}

.tt-invoice-card--payments {
    background: linear-gradient(160deg, #F3FBF6 0%, #FFFFFF 60%);
}

    .tt-invoice-card--payments::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(500px 280px at 100% 0%, rgba(61,165,124,.12), transparent 60%);
        pointer-events: none;
    }

    .tt-invoice-card--payments > * {
        position: relative;
    }

.tt-invoice-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--tt-border);
}

    .tt-invoice-stats > div {
        display: flex;
        flex-direction: column;
        gap: .15rem;
    }

    .tt-invoice-stats strong {
        font-size: 1.3rem;
        color: #1E6F55;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .tt-invoice-stats span {
        font-size: .78rem;
        color: var(--tt-ink-soft);
        line-height: 1.25;
    }

@media (max-width: 520px) {
    .tt-invoice-stats {
        grid-template-columns: 1fr;
    }

        .tt-invoice-stats > div {
            flex-direction: row;
            justify-content: space-between;
            align-items: baseline;
        }
}

.tt-invoice__footnote {
    margin-top: 2rem;
    text-align: center;
    color: var(--tt-ink-soft);
    font-style: italic;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================= POSTCALC (Nachkalkulation) =============== */
.tt-postcalc__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1rem;
}

@media (min-width: 980px) {
    .tt-postcalc__grid {
        grid-template-columns: 1fr 1.15fr;
        gap: 2.5rem;
    }
}

.tt-postcalc__content ul.tt-check li strong {
    color: var(--tt-ink);
    font-weight: 700;
}

.tt-postcalc__quote {
    margin-top: 1.5rem;
    padding: 1.1rem 1.35rem;
    background: #fff;
    border: 1px solid var(--tt-border);
    border-left: 4px solid var(--tt-violet);
    border-radius: var(--tt-r-md);
    font-style: italic;
    color: var(--tt-ink);
}

.tt-postcalc__meta {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    color: var(--tt-ink-soft);
    font-size: .92rem;
}

.tt-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .35rem .75rem;
    border-radius: 999px;
}

.tt-badge--indigo {
    color: #fff;
    background: linear-gradient(135deg, var(--tt-violet) 0%, #3C6DF0 100%);
    box-shadow: 0 6px 14px rgba(76,31,203,.22);
}

/* Mockup-Frame (Light-Dashboard-Optik) */
.tt-postcalc__frame {
    margin: 0;
    border-radius: var(--tt-r-xl);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 10px;
    box-shadow: 0 24px 60px rgba(15,23,42,.10);
    overflow: hidden;
}

.tt-postcalc__shot {
    background: #ffffff;
    color: #0f172a;
    border-radius: calc(var(--tt-r-xl) - 8px);
    padding: 1rem 1.1rem;
    display: grid;
    gap: .85rem;
    font-size: .85rem;
}

.tt-shot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: .7rem .9rem;
    border-radius: 10px;
}

.tt-shot-title {
    font-weight: 700;
    color: #0f172a;
}

.tt-shot-pill {
    background: #dcfce7;
    color: #166534;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid #bbf7d0;
}

.tt-shot-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
}

    .tt-shot-kpis > div {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: .55rem .7rem;
        display: flex;
        flex-direction: column;
        gap: .15rem;
    }

    .tt-shot-kpis small {
        color: #64748b;
        font-size: .68rem;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .tt-shot-kpis strong {
        color: #0f172a;
        font-size: .95rem;
        font-weight: 700;
    }

        .tt-shot-kpis strong.is-pos {
            color: #16a34a;
        }

.tt-shot-bars {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: .75rem .9rem;
    display: grid;
    gap: .65rem;
}

    .tt-shot-bars label {
        font-size: .75rem;
        color: #475569;
        display: block;
        margin-bottom: .25rem;
    }

.tt-shot-bar {
    position: relative;
    height: 8px;
    background: #eef2f7;
    border-radius: 999px;
    overflow: hidden;
}

    .tt-shot-bar span {
        display: block;
        height: 100%;
        border-radius: 999px;
    }

.tt-shot-bars em {
    display: block;
    font-style: normal;
    font-size: .72rem;
    color: #64748b;
    margin-top: .15rem;
}

.tt-shot-rows {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: .25rem .85rem;
    display: grid;
}

.tt-shot-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: .6rem;
    padding: .55rem 0;
    border-top: 1px solid #eef2f7;
    font-size: .82rem;
}

    .tt-shot-row:first-child {
        border-top: 0;
    }

    .tt-shot-row em {
        font-style: normal;
        color: #0f172a;
        font-weight: 600;
        white-space: nowrap;
    }

        .tt-shot-row em.tt-shot-muted {
            color: #64748b;
            font-weight: 500;
        }

.tt-shot-row--total {
    border-top: 1px dashed #cbd5e1;
    padding-top: .75rem;
    margin-top: .25rem;
}

    .tt-shot-row--total strong {
        color: #0f172a;
    }

.tt-shot-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.tt-shot-dot--blue {
    background: #3C6DF0;
}

.tt-shot-dot--amber {
    background: #F59E0B;
}

.tt-shot-dot--violet {
    background: #8B5CF6;
}

.tt-postcalc__caption {
    margin-top: .85rem;
    text-align: center;
    color: var(--tt-ink-soft);
    font-size: .88rem;
}

@media (max-width: 560px) {
    .tt-shot-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Horizontal-Scroll im Projektstand-Mock auf Mobile vermeiden */
    .tt-postcalc__frame,
    .tt-postcalc__shot,
    .tt-shot-rows,
    .tt-shot-bars {
        max-width: 100%;
        overflow-x: clip;
    }

    .tt-postcalc__shot {
        padding: .85rem .75rem;
    }

    .tt-shot-rows {
        padding: .25rem .65rem;
    }

    /* Zeilen umbrechbar machen, damit nichts seitlich rausragt */
    .tt-shot-row {
        grid-template-columns: auto 1fr auto;
        row-gap: .15rem;
        font-size: .8rem;
    }

        .tt-shot-row em.tt-shot-muted {
            grid-column: 2 / -1;
            text-align: right;
            white-space: normal;
        }

    .tt-shot-row--total {
        grid-template-columns: 1fr auto;
    }

        .tt-shot-row--total strong:first-child {
            grid-column: 1 / -1;
        }
}

/* ============================= PROJEKTCONTROLLING-COCKPIT (tt-pctrl) ===== */
.tt-pctrl {
    margin: 2rem 0 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-xl);
    box-shadow: 0 24px 60px rgba(15,23,42,.10);
    overflow: hidden;
}

.tt-pctrl__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    background: linear-gradient(135deg, #2B3F84 0%, #1E2A4A 60%, #16213E 100%);
    color: #E6ECF7;
}

.tt-pctrl__tabs {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.tt-pctrl__tabs-label {
    color: #C9D3EC;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 0 .55rem 0 .7rem;
    white-space: nowrap;
}

.tt-pctrl__tabs button {
    background: transparent;
    border: 0;
    color: #C9D3EC;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    font-family: inherit;
}

.tt-pctrl__tabs button.is-active {
    background: #fff;
    color: #1E2A4A;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.tt-pctrl__livepill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(34,197,94,.16);
    color: #4ADE80;
    border: 1px solid rgba(34,197,94,.35);
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tt-pctrl__livepill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 0 rgba(74,222,128,.6);
    animation: ttPctrlPulse 1.8s ease-out infinite;
}

@keyframes ttPctrlPulse {
    0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
    70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.tt-pctrl__viewbtns {
    display: inline-flex;
    gap: .4rem;
    font-size: .8rem;
    position: relative;
    padding: .25rem;
    border-radius: 11px;
    transition: box-shadow .3s ease, background .3s ease;
}

.tt-pctrl__viewbtns button {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #E6ECF7;
    padding: .35rem .75rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.tt-pctrl__viewbtns button.is-active {
    background: #fff;
    color: #1E2A4A;
    border-color: #fff;
}

/* „Hier kann man umschalten!" – sanftes, atmendes Highlight,
   solange der Nutzer den View-Toggle noch nicht selbst angefasst hat. */
.tt-pctrl.is-view-hint .tt-pctrl__viewbtns {
    background: rgba(76, 31, 203, .35);
    box-shadow: 0 0 0 2px rgba(167, 139, 250, .55), 0 0 24px rgba(167, 139, 250, .35);
    animation: ttPctrlViewBreathe 2.4s ease-in-out infinite;
}

.tt-pctrl.is-view-hint .tt-pctrl__viewbtns::before {
    content: "↓ umschaltbar";
    position: absolute;
    top: -1.4rem;
    right: .25rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #C4B5FD;
    text-transform: uppercase;
    opacity: .9;
    animation: ttPctrlViewHintBob 1.6s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
}

/* Beim automatischen Wechsel: kurzer Pop auf dem aktiven Button */
.tt-pctrl.is-view-changing .tt-pctrl__viewbtns button.is-active {
    animation: ttPctrlViewPop .55s ease;
}

/* Sichtbares Re-Layout bei Sichtwechsel: KPI-Reihe & Flow sanft einblenden */
.tt-pctrl.is-view-changing .tt-pctrl__kpis,
.tt-pctrl.is-view-changing .tt-pctrl__flow {
    animation: ttPctrlViewShift .55s ease;
}

@keyframes ttPctrlViewBreathe {
    0%, 100% { box-shadow: 0 0 0 2px rgba(167, 139, 250, .45), 0 0 18px rgba(167, 139, 250, .25); }
    50%      { box-shadow: 0 0 0 3px rgba(167, 139, 250, .85), 0 0 32px rgba(167, 139, 250, .55); }
}

@keyframes ttPctrlViewHintBob {
    0%, 100% { transform: translateY(0); opacity: .75; }
    50%      { transform: translateY(-3px); opacity: 1; }
}

@keyframes ttPctrlViewPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes ttPctrlViewShift {
    0%   { opacity: .55; transform: translateY(-2px); }
    100% { opacity: 1;   transform: translateY(0); }
}

.tt-pctrl__modehint {
    background: #FFF7ED;
    border-bottom: 1px solid #FED7AA;
    color: #7C2D12;
    font-size: .85rem;
    padding: .55rem 1.25rem;
}

.tt-pctrl__modehint > span { display: none; }
.tt-pctrl__modehint > span.is-active { display: block; }
.tt-pctrl__modehint strong { color: #9A3412; }

.tt-pctrl__head {
    display: grid;
    grid-template-columns: 1.2fr 1.6fr 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #F4F6FB;
    border-bottom: 1px solid var(--tt-border);
}

.tt-pctrl__project strong {
    display: block;
    color: var(--tt-ink);
    font-size: 1.05rem;
}

.tt-pctrl__project small {
    color: var(--tt-ink-soft);
    font-size: .82rem;
}

.tt-pctrl__alert {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left: 4px solid #DC2626;
    padding: .65rem .85rem;
    border-radius: 8px;
    color: #7F1D1D;
    font-size: .85rem;
}

.tt-pctrl__alert strong {
    display: block;
    color: #B91C1C;
    margin-bottom: .15rem;
}

.tt-pctrl__budget {
    text-align: right;
}

.tt-pctrl__budget small {
    color: var(--tt-ink-soft);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: block;
}

.tt-pctrl__budget strong {
    font-size: 1.4rem;
    color: var(--tt-ink);
    font-weight: 800;
}

.tt-pctrl__budget em {
    font-style: normal;
    color: var(--tt-ink-soft);
    font-size: .78rem;
    display: block;
}

@media (max-width: 900px) {
    .tt-pctrl__head { grid-template-columns: 1fr; text-align: left; }
    .tt-pctrl__budget { text-align: left; }
}

.tt-pctrl__kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .65rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--tt-border);
}

.tt-pctrl__kpi {
    background: #F8FAFC;
    border: 1px solid var(--tt-border);
    border-radius: 12px;
    padding: .75rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    position: relative;
    overflow: hidden;
}

.tt-pctrl__kpi small {
    font-size: .68rem;
    color: var(--tt-ink-soft);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600;
}

.tt-pctrl__kpi strong {
    font-size: 1.25rem;
    color: var(--tt-ink);
    font-weight: 800;
}

.tt-pctrl__kpi em {
    font-style: normal;
    font-size: .72rem;
    color: var(--tt-ink-soft);
}

.tt-pctrl__kpi .tt-pctrl__icon {
    position: absolute;
    top: .55rem;
    right: .65rem;
    font-size: 1rem;
    opacity: .55;
}

.tt-pctrl__kpi.is-warn { background: #FFFBEB; border-color: #FDE68A; }
.tt-pctrl__kpi.is-warn strong { color: #B45309; }
.tt-pctrl__kpi.is-good { background: #ECFDF5; border-color: #A7F3D0; }
.tt-pctrl__kpi.is-good strong { color: #047857; }
.tt-pctrl__kpi.is-cost { background: #F5F3FF; border-color: #DDD6FE; }
.tt-pctrl__kpi.is-cost strong { color: #5B21B6; }
.tt-pctrl__kpi.is-revenue { background: #EFF6FF; border-color: #BFDBFE; }
.tt-pctrl__kpi.is-revenue strong { color: #1D4ED8; }

@media (max-width: 1100px) { .tt-pctrl__kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tt-pctrl__kpis { grid-template-columns: repeat(2, 1fr); } }

.tt-pctrl__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.tt-pctrl__main { padding: 1.25rem; }

/* Below-Section: Erklärung + CTA unter der Abbildung */
.tt-pctrl__below {
    margin-top: 1.75rem;
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-xl);
    padding: 1.75rem;
    box-shadow: 0 8px 24px rgba(15,23,42,.05);
}

.tt-pctrl__below-head {
    text-align: center;
    margin-bottom: 1.25rem;
}

.tt-pctrl__below-head h3 {
    margin: 0 0 .35rem;
    font-size: 1.4rem;
    color: var(--tt-ink);
}

.tt-pctrl__below-head p {
    margin: 0;
    color: var(--tt-ink-soft);
    font-size: .95rem;
}

.tt-pctrl__steps--row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 800px) {
    .tt-pctrl__steps--row { grid-template-columns: 1fr; }
}

.tt-pctrl__below-cta {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--tt-border);
    text-align: center;
}

.tt-pctrl__below-cta p {
    max-width: 720px;
    margin: 0 auto 1rem;
    color: var(--tt-ink);
    font-size: 1rem;
}

.tt-pctrl__below-cta .tt-btn { margin: .25rem .35rem; }

.tt-pctrl__footnote {
    margin: 1.25rem auto 0;
    max-width: 720px;
    text-align: center;
    color: var(--tt-ink-soft);
    font-size: .9rem;
    line-height: 1.55;
}

.tt-pctrl__footnote strong { color: var(--tt-ink); }

.tt-pctrl__flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: .5rem;
    align-items: stretch;
    margin: 0 0 1.25rem;
}

.tt-pctrl__flow-card {
    border: 1px solid var(--tt-border);
    border-radius: 12px;
    padding: .85rem .9rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    position: relative;
}

.tt-pctrl__flow-card small {
    font-size: .68rem;
    color: var(--tt-ink-soft);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tt-pctrl__flow-card strong {
    font-size: 1.25rem;
    color: var(--tt-ink);
    font-weight: 800;
}

.tt-pctrl__flow-card em {
    font-style: normal;
    font-size: .72rem;
    color: var(--tt-ink-soft);
}

.tt-pctrl__flow-card.is-offerte { background: #EFF6FF; border-color: #BFDBFE; }
.tt-pctrl__flow-card.is-rapport { background: #F0FDF4; border-color: #BBF7D0; }
.tt-pctrl__flow-card.is-cost    { background: #F5F3FF; border-color: #DDD6FE; }
.tt-pctrl__flow-card.is-margin  {
    background: linear-gradient(135deg, #4C1FCB 0%, #3C6DF0 100%);
    border-color: transparent;
    color: #fff;
}

.tt-pctrl__flow-card.is-margin small,
.tt-pctrl__flow-card.is-margin em { color: rgba(255,255,255,.85); }

.tt-pctrl__flow-card.is-margin strong { color: #fff; font-size: 1.4rem; }

.tt-pctrl__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.tt-pctrl__arrow span {
    display: block;
    font-size: .65rem;
    color: var(--tt-ink-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    font-weight: 700;
    margin-top: .15rem;
}

.tt-pctrl__arrow div { text-align: center; }

@media (max-width: 1100px) {
    .tt-pctrl__flow { grid-template-columns: 1fr; }

    /* Auf Mobile/Tablet steht der Flow vertikal: der Pfeil bleibt eine
       horizontale Zeile mit Label rechts daneben, NICHT um 90° gedreht
       (das hat den Text vorher hochkant gestellt und abgeschnitten). */
    .tt-pctrl__arrow {
        transform: none;
        padding: .25rem 0;
        gap: .5rem;
        font-size: 1.1rem;
    }

        .tt-pctrl__arrow div {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            text-align: left;
        }

        .tt-pctrl__arrow span {
            display: inline;
            margin: 0;
            font-size: .65rem;
            white-space: nowrap;
        }
}

.tt-pctrl__tabwrap {
    border: 1px solid var(--tt-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.tt-pctrl__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.tt-pctrl__table thead th {
    background: #F1F5F9;
    color: var(--tt-ink-soft);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    padding: .55rem .75rem;
    text-align: right;
    border-bottom: 1px solid var(--tt-border);
    white-space: nowrap;
}

.tt-pctrl__table thead th:first-child { text-align: left; }

.tt-pctrl__table td {
    padding: .55rem .75rem;
    text-align: right;
    border-bottom: 1px solid var(--tt-border);
    color: var(--tt-ink);
    white-space: nowrap;
}

.tt-pctrl__table td:first-child {
    text-align: left;
    white-space: normal;
}

.tt-pctrl__table tbody tr:last-child td { border-bottom: 0; }

.tt-pctrl__table tr.is-total td {
    background: #0F172A;
    color: #fff;
    font-weight: 800;
    border-bottom: 0;
}

.tt-pctrl__pill {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    line-height: 1.2;
}

.tt-pctrl__pill.is-pos { background: #DCFCE7; color: #166534; }
.tt-pctrl__pill.is-neg { background: #FEE2E2; color: #991B1B; }
.tt-pctrl__pill.is-warn { background: #FEF3C7; color: #92400E; }
.tt-pctrl__pill.is-extern { background: #FEF3C7; color: #92400E; }

.tt-pctrl__side h4 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    color: var(--tt-ink);
}

.tt-pctrl__side p.lead {
    color: var(--tt-ink-soft);
    font-size: .9rem;
    margin: 0 0 1rem;
}

.tt-pctrl__steps {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    counter-reset: ttpctrl;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-pctrl__steps li {
    counter-increment: ttpctrl;
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: 10px;
    padding: .8rem .9rem .8rem 2.6rem;
    position: relative;
    font-size: .88rem;
    color: var(--tt-ink);
    line-height: 1.45;
}

.tt-pctrl__steps li::before {
    content: counter(ttpctrl);
    position: absolute;
    left: .7rem;
    top: .75rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #4C1FCB 0%, #3C6DF0 100%);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    box-shadow: 0 4px 10px rgba(60,109,240,.25);
}

.tt-pctrl__steps li strong { color: var(--tt-ink); }
.tt-pctrl__steps li small { display: block; color: var(--tt-ink-soft); margin-top: .2rem; font-size: .8rem; }

.tt-pctrl__hint {
    margin-top: 1rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px dashed #BFDBFE;
    border-radius: 10px;
    font-size: .85rem;
    color: var(--tt-ink);
}

.tt-pctrl__hint strong { color: #1D4ED8; }

.tt-pctrl__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .85rem;
    font-size: .78rem;
    color: var(--tt-ink-soft);
}

.tt-pctrl__legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: middle;
}

.tt-pctrl__legend i.is-plan { background: #16A34A; }
.tt-pctrl__legend i.is-warn { background: #F59E0B; }
.tt-pctrl__legend i.is-over { background: #DC2626; }

/* Aufgaben-Toggle */
.tt-pctrl__toggle {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

.tt-pctrl__toggle:hover .tt-pctrl__caret { color: #1D4ED8; }
.tt-pctrl__toggle:focus-visible { outline: 2px solid #3C6DF0; outline-offset: 2px; border-radius: 4px; }

.tt-pctrl__caret {
    display: inline-block;
    width: 1rem;
    color: #64748B;
    font-size: .9rem;
    transition: transform .15s ease;
}

.tt-pctrl__taskdot {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #CBD5E1;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.tt-pctrl__taskdot.is-warn { background: #F59E0B; }
.tt-pctrl__taskdot.is-good { background: #16A34A; }
.tt-pctrl__taskdot.is-over { background: #DC2626; }

.tt-pctrl__bar {
    display: inline-block;
    width: 90px;
    height: 8px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: .35rem;
}

.tt-pctrl__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.tt-pctrl__table--detail tr.is-task > td {
    background: #fff;
    font-size: .9rem;
}

.tt-pctrl__table--detail tr.is-task > td:first-child { font-weight: 600; }
.tt-pctrl__table--detail tr.is-task em { font-style: normal; color: #64748B; font-size: .75rem; margin-left: .25rem; }

.tt-pctrl__table--detail tr.is-detail-row { display: none; }
.tt-pctrl__table--detail tr.is-detail-row.is-open { display: table-row; }

.tt-pctrl__table--detail tr.is-detail-row > td {
    background: #F8FAFC;
    padding: .85rem 1rem;
    border-top: 0;
}

.tt-pctrl__table--detail tr.is-pulse > td {
    animation: ttPctrlFlash .6s ease;
}

@keyframes ttPctrlFlash {
    0%, 100% { background: #fff; }
    50% { background: #FEF3C7; }
}

.tt-pctrl__sub {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: 10px;
    overflow: hidden;
    font-size: .82rem;
}

.tt-pctrl__sub thead th {
    background: #F1F5F9;
    color: var(--tt-ink-soft);
    text-transform: uppercase;
    font-size: .65rem;
    letter-spacing: .05em;
    font-weight: 700;
    padding: .5rem .7rem;
    text-align: right;
    border-bottom: 1px solid var(--tt-border);
}

.tt-pctrl__sub thead th:first-child { text-align: left; }

.tt-pctrl__sub td {
    padding: .55rem .7rem;
    border-bottom: 1px solid #EEF2F7;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}

.tt-pctrl__sub td:first-child { text-align: left; white-space: normal; }
.tt-pctrl__sub small { color: var(--tt-ink-soft); font-size: .72rem; font-weight: 500; }
.tt-pctrl__sub small.tt-muted { color: #94A3B8; }

.tt-pctrl__sub tr.is-subgroup td {
    background: #EEF2F7;
    font-weight: 700;
    color: var(--tt-ink);
    border-bottom: 1px solid #DDE5EE;
}

.tt-pctrl__sub tr.is-subgroup.is-personal td:first-child { box-shadow: inset 4px 0 0 #3C6DF0; }
.tt-pctrl__sub tr.is-subgroup.is-material td:first-child { box-shadow: inset 4px 0 0 #16A34A; }
.tt-pctrl__sub tr.is-subgroup.is-projekt td:first-child { box-shadow: inset 4px 0 0 #F59E0B; }

.tt-pctrl__sub tr.is-extern td:first-child {
    padding-left: 1.25rem;
    position: relative;
}

.tt-pctrl__sub tr.is-extern td:first-child::before {
    content: "↗";
    position: absolute;
    left: .5rem;
    top: .55rem;
    color: #DC2626;
    font-weight: 800;
}

.tt-pctrl__sub .tt-of,
.tt-pctrl__sub .tt-rp {
    display: block;
    font-size: .78rem;
    line-height: 1.35;
}

.tt-pctrl__sub .tt-of { color: #94A3B8; }
.tt-pctrl__sub .tt-rp { color: var(--tt-ink); font-weight: 600; }
.tt-pctrl__sub .tt-rp strong { font-weight: 700; }

.tt-pctrl__filechip {
    display: inline-block;
    background: #FEE2E2;
    color: #B91C1C;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .68rem;
    font-weight: 700;
    margin-left: .35rem;
    vertical-align: middle;
}

.tt-pctrl__addrow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: .5rem;
    margin-top: .85rem;
}

.tt-pctrl__addtile {
    background: #fff;
    border: 1px dashed #CBD5E1;
    border-radius: 10px;
    padding: .9rem 1rem;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    color: var(--tt-ink);
    transition: border-color .15s ease, background .15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}

.tt-pctrl__addtile:hover { border-color: #3C6DF0; background: #F0F6FF; }
.tt-pctrl__addtile strong { font-size: .88rem; }
.tt-pctrl__addtile small { color: var(--tt-ink-soft); font-size: .72rem; }

.tt-pctrl__addicon { font-size: 1.2rem; }

.tt-pctrl__addtile--plus {
    width: 50px;
    font-size: 1.6rem;
    color: #94A3B8;
    align-items: center;
    justify-content: center;
}

@media (max-width: 700px) {
    .tt-pctrl__addrow { grid-template-columns: 1fr 1fr; }
    .tt-pctrl__addtile--plus { grid-column: span 2; width: auto; }
}

/* Sicht-Toggle: Intern/Marge ausblenden bei Kundensicht */
.tt-pctrl.is-view-kunde .tt-col-intern { display: none; }
.tt-pctrl.is-view-kunde .tt-pctrl__kpi.is-cost,
.tt-pctrl.is-view-kunde .tt-pctrl__kpi.is-good { display: none; }
.tt-pctrl.is-view-kunde .tt-pctrl__flow { grid-template-columns: 1fr auto 1fr; }
.tt-pctrl.is-view-kunde .tt-pctrl__flow-card.is-cost,
.tt-pctrl.is-view-kunde .tt-pctrl__flow-card.is-margin,
.tt-pctrl.is-view-kunde .tt-pctrl__arrow:nth-of-type(4),
.tt-pctrl.is-view-kunde .tt-pctrl__arrow:nth-of-type(6) { display: none; }

@media (max-width: 1100px) {
    .tt-pctrl.is-view-kunde .tt-pctrl__flow { grid-template-columns: 1fr; }
}

/* Modus „Kein Budget": Soll-Spalten + Plan-KPIs ausgrauen/abblenden */
.tt-pctrl.is-mode-keins .tt-pctrl__kpi.is-warn,
.tt-pctrl.is-mode-keins .tt-pctrl__kpi.is-revenue { opacity: .35; filter: grayscale(.4); }
.tt-pctrl.is-mode-keins .tt-pctrl__alert { display: none; }
.tt-pctrl.is-mode-keins .tt-pctrl__flow-card.is-offerte { opacity: .45; }
.tt-pctrl.is-mode-keins .tt-pctrl__table--detail .tt-col-soll,
.tt-pctrl.is-mode-keins .tt-pctrl__table--detail .tt-col-abw,
.tt-pctrl.is-mode-keins .tt-pctrl__table--detail .tt-col-prog { opacity: .35; }
.tt-pctrl.is-mode-keins .tt-pctrl__sub .tt-of { display: none; }

/* Sanfter Highlight-Pulse beim Modus-Wechsel */
.tt-pctrl.is-mode-changing .tt-pctrl__modehint {
    animation: ttPctrlHintPulse .55s ease;
}
.tt-pctrl.is-mode-changing .tt-pctrl__budget strong {
    animation: ttPctrlValuePulse .55s ease;
}

@keyframes ttPctrlHintPulse {
    0%   { background: #FFF7ED; }
    40%  { background: #FED7AA; }
    100% { background: #FFF7ED; }
}

@keyframes ttPctrlValuePulse {
    0%   { color: var(--tt-ink); }
    40%  { color: #4C1FCB; }
    100% { color: var(--tt-ink); }
}

/* Auto-Rotate Indikator: dezenter Demo-Hinweis am View-Toggle */
.tt-pctrl.is-autorotate .tt-pctrl__viewbtns button.is-active {
    box-shadow: 0 0 0 2px rgba(76,222,128,.5), 0 2px 8px rgba(0,0,0,.18);
}

/* ====== Mobile-Optimierung des Cockpit-Mockups (tt-pctrl) ================
   Auf schmalen Viewports war die Toolbar (Budgetquelle, Live, Sicht) zu
   breit und löste einen horizontalen Scroll aus. Wir stapeln die Bereiche,
   erlauben Umbruch und kappen Overflow. */
@media (max-width: 720px) {
    .tt-pctrl { margin-top: 1.25rem; }

    .tt-pctrl,
    .tt-pctrl__toolbar {
        max-width: 100%;
        overflow-x: clip;
    }

    /* Innerhalb der Card darf die Tabelle horizontal scrollen, damit alle
       Spalten erreichbar sind, ohne dass die Card selbst breiter wird. */
    .tt-pctrl__main {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tt-pctrl__toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
        padding: .65rem .75rem;
    }

    .tt-pctrl__tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px;
        padding: 4px;
    }

    .tt-pctrl__tabs-label {
        flex: 1 0 100%;
        padding: 0 .25rem .15rem;
        font-size: .65rem;
    }

    .tt-pctrl__tabs button {
        padding: .3rem .6rem;
        font-size: .75rem;
    }

    .tt-pctrl__livepill {
        align-self: flex-start;
        font-size: .65rem;
        padding: .2rem .55rem;
    }

    .tt-pctrl__viewbtns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .35rem;
        padding: 0;
    }

    .tt-pctrl__viewbtns button {
        padding: .35rem .5rem;
        font-size: .75rem;
        text-align: center;
    }

    .tt-pctrl.is-view-hint .tt-pctrl__viewbtns::before {
        right: auto;
        left: .25rem;
    }

    .tt-pctrl__main { padding: .85rem; }

    /* Tabelle scrollbar machen statt Layout zu sprengen.
       min-width sorgt dafür, dass die Spalten lesbar bleiben und nicht
       zerquetscht werden – der Nutzer scrollt seitlich innerhalb der Card. */
    .tt-pctrl__tabwrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .tt-pctrl__table { font-size: .78rem; min-width: 720px; }
    .tt-pctrl__table thead th,
    .tt-pctrl__table td { padding: .45rem .55rem; }

    /* Hinweis-Schatten am rechten Rand: signalisiert „hier kann gescrollt werden" */
    .tt-pctrl__tabwrap {
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 0/40px 100% no-repeat,
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0/40px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.12), rgba(0,0,0,0)) 0 0/14px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.12), rgba(0,0,0,0)) 100% 0/14px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
        scroll-behavior: smooth;
    }
}

@media (max-width: 480px) {
    .tt-pctrl__viewbtns { grid-template-columns: 1fr; }
    .tt-pctrl__tabs button { font-size: .72rem; padding: .28rem .5rem; }
}

/* ===== Cookie-Banner ===================================================== */
.tt-cookie {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    background: #0f3a2e;
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
    animation: tt-cookie-in .35s ease-out both;
}
.tt-cookie[hidden] { display: none; }
.tt-cookie__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem 1.5rem;
    align-items: center;
    padding: 1rem 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}
.tt-cookie p { margin: 0; font-size: .92rem; line-height: 1.5; }
.tt-cookie a { color: #ffd99a; text-decoration: underline; }
.tt-cookie__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.tt-cookie .tt-btn { white-space: nowrap; }
.tt-cookie .tt-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}
.tt-cookie .tt-btn--ghost:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 720px) {
    .tt-cookie__inner { grid-template-columns: 1fr; }
    .tt-cookie__actions { justify-content: flex-end; }
}
@keyframes tt-cookie-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ============================ FORM STATUS BANNER ====================== */
.tt-form-status { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1000; max-width: 560px; width: calc(100% - 2rem); padding: .85rem 2.4rem .85rem 1rem; border-radius: var(--tt-r-md); box-shadow: 0 14px 40px rgba(0,0,0,.18); font-size: .95rem; line-height: 1.45; }
.tt-form-status--ok { background: #E8F8EE; color: #1B5E2A; border: 1px solid #B7E2C2; }
.tt-form-status--error { background: #FDECEA; color: #80281C; border: 1px solid #F4B7B0; }
.tt-form-status a { color: inherit; text-decoration: underline; }
.tt-form-status__close { position: absolute; right: .35rem; top: .25rem; background: transparent; border: 0; font-size: 1.4rem; line-height: 1; padding: .25rem .5rem; color: inherit; cursor: pointer; }

/* ============================ CTA-FORM-VALIDIERUNG ==================== */
.tt-cta-callback__form input[aria-invalid="true"],
.tt-cta-callback__form select[aria-invalid="true"],
.tt-cta-callback__form textarea[aria-invalid="true"],
.tt-form input[aria-invalid="true"],
.tt-form select[aria-invalid="true"],
.tt-form textarea[aria-invalid="true"] {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, .12);
    outline: none;
}
.tt-cta-callback__form .tt-field-error,
.tt-form .tt-field-error {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    font-weight: 600;
    color: #c0392b;
}
.tt-cta-callback__form button[type="submit"]:disabled,
.tt-form button[type="submit"]:disabled {
    opacity: .65;
    cursor: progress;
}

/* ============================ INLINE-ERFOLGS-PANEL ==================== */
.tt-form-success {
    background: linear-gradient(180deg, #F0FBF4 0%, #FFFFFF 100%);
    border: 1px solid #B7E2C2;
    border-radius: var(--tt-r-lg, 16px);
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: 0 10px 30px rgba(27, 94, 42, .08);
    color: var(--tt-ink, #1f2433);
    animation: tt-success-in .35s ease-out both;
    outline: none;
}
.tt-form-success:focus-visible { box-shadow: 0 0 0 3px rgba(27, 94, 42, .25), 0 10px 30px rgba(27, 94, 42, .08); }
.tt-form-success__icon {
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: #1B5E2A; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700;
    margin-bottom: .85rem;
}
.tt-form-success__title { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.25; color: #1B5E2A; }
.tt-form-success__lead { margin: 0 0 .9rem; font-size: 1rem; line-height: 1.55; }
.tt-form-success__list { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .95rem; line-height: 1.55; }
.tt-form-success__list li { margin: .2rem 0; }
.tt-form-success__hint { margin: 0; font-size: .9rem; color: var(--tt-ink-soft, #4a5063); }
.tt-form-success__hint a { color: #1B5E2A; text-decoration: underline; font-weight: 600; }
@keyframes tt-success-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ============================ DEZENTER VIDEO-DEMO-HINT ================ */
.tt-cta-video-hint {
    display: block;
    margin-top: .65rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--tt-ink-soft, #4a5063);
    opacity: .85;
}
.tt-cta-video-hint a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.tt-cta-video-hint a:hover { color: var(--tt-brand, #5b50b2); opacity: 1; }

/* Im dunklen Hero (Branchenseiten) hell darstellen, damit der Hint sichtbar bleibt. */
.tt-baghero .tt-cta-video-hint,
.tt-lohnhero .tt-cta-video-hint {
    color: rgba(255,255,255,.82);
    opacity: 1;
}
.tt-baghero .tt-cta-video-hint a,
.tt-lohnhero .tt-cta-video-hint a {
    color: #fff;
    text-decoration-color: rgba(255,255,255,.6);
}
.tt-baghero .tt-cta-video-hint a:hover,
.tt-lohnhero .tt-cta-video-hint a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* Tertiär-Link im dunklen Final-CTA-Block (passt zur weissen Schrift). */
.tt-final__video-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: .92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.tt-final__video-link:hover,
.tt-final__video-link:focus-visible {
    color: #fff;
    text-decoration-color: #fff;
    text-decoration-style: solid;
}
.tt-final .tt-hero__ctas + .tt-final__video-link {
    display: block;
    text-align: center;
}