/* eagle.marketing — öffentliche Site (hell, wie EOM Planner) */



.site-marketing {

    color-scheme: light;

    --bg: #f1f5f9;

    --bg-soft: #ffffff;

    --panel: #ffffff;

    --panel-hover: #f8fafc;

    --text: #0f172a;

    --text-heading: #020617;

    --muted: #64748b;

    --accent: #d97706;

    --accent-hover: #b45309;

    --accent-soft: rgba(217, 119, 6, 0.1);

    --border: #e2e8f0;

    --border-strong: #cbd5e1;

    --radius: 0.875rem;

    --shadow: 0 1px 3px rgba(15, 23, 42, 0.06);

    --shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.08);

}



.site-assistant {

    color-scheme: dark;

    --bg: #0a0e14;

    --bg-soft: #0f141c;

    --panel: #151c26;

    --panel-hover: #1a2330;

    --text: #e8eef4;

    --text-heading: #e8eef4;

    --muted: #8fa3b8;

    --accent: #5b9fd4;

    --accent-soft: rgba(91, 159, 212, 0.14);

    --border: #243040;

    --radius: 0.875rem;

    --shadow: 0 18px 48px rgba(0, 0, 0, 0.35);

    --shadow-lg: var(--shadow);

}



* {

    box-sizing: border-box;

}



body {

    margin: 0;

    min-height: 100vh;

    font-family: system-ui, "Segoe UI", Roboto, Ubuntu, sans-serif;

    line-height: 1.55;

}



body.site-marketing {

    background: var(--bg);

    color: var(--text);

}



body.site-assistant {

    background:

        radial-gradient(ellipse 90% 55% at 50% -15%, rgba(91, 159, 212, 0.16), transparent 55%),

        var(--bg);

    color: var(--text);

}



.wrap {

    width: min(72rem, calc(100% - 2rem));

    margin-inline: auto;

}



a {

    color: inherit;

}



img {

    display: block;

    max-width: 100%;

    height: auto;

}



/* ─── Header ─── */



.site-marketing .topbar {

    position: sticky;

    top: 0;

    z-index: 10;

    border-bottom: 1px solid var(--border);

    background: #ffffff;

    box-shadow: var(--shadow);

}



.topbar__inner {

    display: flex;

    align-items: center;

    min-height: clamp(5.5rem, 14vw, 8.5rem);

    padding: 1.25rem 0;

}



.brand-mark {

    display: inline-flex;

    align-items: center;

    gap: clamp(0.85rem, 2vw, 1.35rem);

    text-decoration: none;

    color: var(--text-heading);

}



.brand-mark__logo {

    width: auto;

    height: clamp(4rem, 9vw, 6rem);

    object-fit: contain;

}



.brand-mark__text {

    font-size: clamp(1.2rem, 2.8vw, 1.85rem);

    font-weight: 700;

    letter-spacing: -0.025em;

    line-height: 1.15;

}



/* ─── Hero ─── */



.home .hero {

    padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);

}



.hero__grid {

    display: grid;

    gap: clamp(1.75rem, 4vw, 2.75rem);

    align-items: start;

}



@media (min-width: 900px) {

    .hero__grid {

        grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);

        gap: 2.5rem;

    }

}



.hero__copy {

    max-width: 40rem;

}



.eyebrow {

    margin: 0 0 0.85rem;

    font-size: 0.78rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--accent);

    font-weight: 700;

}



h1 {

    margin: 0 0 1rem;

    font-size: clamp(2rem, 5vw, 3rem);

    font-weight: 750;

    letter-spacing: -0.03em;

    line-height: 1.1;

    color: var(--text-heading);

}



.lead {

    margin: 0;

    font-size: clamp(1.05rem, 2.2vw, 1.2rem);

    color: var(--muted);

    max-width: 42rem;

    line-height: 1.65;

}



.hero__highlights {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 0.85rem;

}



.hero__highlight {

    padding: 1rem 1.1rem;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}



.hero__highlight-title {

    display: block;

    font-size: 0.98rem;

    font-weight: 700;

    color: var(--text-heading);

    margin-bottom: 0.25rem;

}



.hero__highlight-text {

    display: block;

    font-size: 0.92rem;

    color: var(--muted);

    line-height: 1.5;

}



/* ─── Projekte ─── */



.projects {

    padding: 0 0 clamp(3rem, 8vw, 5rem);

}



.projects__head {

    margin-bottom: 1.75rem;

    max-width: 42rem;

}



.projects__title {

    margin: 0 0 0.5rem;

    font-size: clamp(1.35rem, 3vw, 1.65rem);

    font-weight: 700;

    color: var(--text-heading);

}



.projects__intro {

    margin: 0;

    color: var(--muted);

    font-size: 1rem;

    line-height: 1.6;

}



.project-grid {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 1.15rem;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: stretch;

}



@media (max-width: 960px) {

    .project-grid {

        grid-template-columns: 1fr;

    }

}



.project-grid__item {

    margin: 0;

    display: flex;

    min-width: 0;

}



.project-card {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0.7rem;

    width: 100%;

    height: 100%;

    min-height: 18.5rem;

    padding: 1.35rem 1.25rem 1.2rem;

    text-decoration: none;

    color: inherit;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: calc(var(--radius) + 2px);

    box-shadow: var(--shadow);

    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;

}



.project-card:hover,

.project-card:focus-visible {

    border-color: var(--border-strong);

    box-shadow: var(--shadow-lg);

    transform: translateY(-2px);

    outline: none;

}



.project-card__logo-wrap {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    height: 4.25rem;

    padding: 0.25rem 0.5rem;

}



.project-card__logo {

    width: auto;

    max-width: 11.5rem;

    max-height: 3.25rem;

    object-fit: contain;

}



.project-card__name {

    display: block;

    min-height: 2.75rem;

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--text-heading);

    letter-spacing: -0.01em;

    line-height: 1.35;

}



.project-card__role {

    display: inline-flex;

    align-self: flex-start;

    align-items: center;

    min-height: 1.65rem;

    padding: 0.28rem 0.65rem;

    border-radius: 999px;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    color: var(--accent-hover);

    background: var(--accent-soft);

    border: 1px solid rgba(217, 119, 6, 0.22);

}



.project-card__desc {

    display: block;

    flex: 1 1 auto;

    min-height: 4.5rem;

    font-size: 0.94rem;

    color: var(--muted);

    line-height: 1.55;

}



.project-card__cta {

    margin-top: auto;

    padding-top: 0.35rem;

    font-size: 0.9rem;

    font-weight: 700;

    color: var(--accent);

}



/* ─── Footer ─── */



.foot {

    border-top: 1px solid var(--border);

    padding: 1.75rem 0 2.5rem;

    background: var(--bg-soft);

}



.foot__inner {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.foot__legal,

.foot__note {

    margin: 0;

    font-size: 0.85rem;

    color: var(--muted);

}



.foot__nav {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.35rem 0.6rem;

    font-size: 0.9rem;

}



.foot__nav a {

    color: var(--accent);

    text-decoration: none;

}



.foot__nav a:hover {

    text-decoration: underline;

}



.foot__sep {

    color: var(--muted);

}



/* ─── Assistent (privat, dunkel) ─── */



.site-assistant .assist-shell,

.shell {

    max-width: 40rem;

    margin: 0 auto;

    padding: clamp(2rem, 8vw, 5rem) 1.25rem 3rem;

}



.assist-topbar {

    border-bottom: 1px solid var(--border);

    background: rgba(10, 14, 20, 0.92);

    backdrop-filter: blur(10px);

}



.assist-topbar__inner {

    display: flex;

    align-items: center;

    gap: 1rem;

    min-height: 3.25rem;

}



.assist-topbar__back {

    color: var(--accent);

    text-decoration: none;

    font-size: 0.9rem;

}



.assist-topbar__back:hover {

    text-decoration: underline;

}



.assist-topbar__title {

    color: var(--muted);

    font-size: 0.9rem;

}



.assist-topbar__logout {

    margin-left: auto;

    color: var(--muted);

    text-decoration: none;

    font-size: 0.8rem;

}



.assist-topbar__logout:hover {

    color: var(--accent);

    text-decoration: underline;

}



.assist-apps {

    display: grid;

    gap: 0.85rem;

    margin-top: 1.75rem;

}



.assist-app {

    display: block;

    padding: 1.1rem 1.15rem;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    text-decoration: none;

    transition: border-color 0.15s ease, background 0.15s ease;

}



.assist-app:hover,

.assist-app:focus-visible {

    border-color: rgba(91, 159, 212, 0.45);

    background: var(--panel-hover);

}



.assist-app__name {

    display: block;

    font-weight: 600;

    color: var(--text);

}



.assist-app__desc {

    display: block;

    margin-top: 0.35rem;

    font-size: 0.92rem;

    color: var(--muted);

}



.assist-status {

    margin: 1rem 0 0;

    font-size: 0.92rem;

}



.assist-status--ok {

    color: #6ee7a8;

}



.assist-status--warn {

    color: #fbbf24;

}



.note {

    margin: 1.25rem 0 0;

    padding: 1rem 1.1rem;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    color: var(--muted);

    font-size: 0.95rem;

}



/* ─── Rechtstexte ─── */



.legal-page {

    padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem);

}



.legal-panel {

    max-width: 46rem;

    padding: clamp(1.25rem, 4vw, 2rem);

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow-lg);

}



.legal-panel h1 {

    margin: 0 0 1.25rem;

    font-size: clamp(1.5rem, 4vw, 2rem);

}



.legal-body,

.legal-static__body {

    color: var(--muted);

    font-size: 0.98rem;

}



.legal-body p,

.legal-static__body p {

    margin: 0 0 1rem;

}



.legal-body a,

.legal-static__body a {

    color: var(--accent);

}



.legal-static__body h2 {

    font-size: 1.15rem;

    margin: 1.75rem 0 0.65rem;

    color: var(--text-heading);

}



.legal-static__body h3.legal-static__h3 {

    font-size: 1.05rem;

    margin: 1.25rem 0 0.5rem;

    font-weight: 600;

    color: var(--text-heading);

}



.legal-static__body ul {

    margin: 0.5rem 0 1rem 1.25rem;

    padding: 0;

}



.legal-static__table-wrap {

    overflow-x: auto;

    margin: 0.75rem 0 1rem;

    -webkit-overflow-scrolling: touch;

}



.legal-static__table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.92rem;

}



.legal-static__table th,

.legal-static__table td {

    border: 1px solid var(--border);

    padding: 0.5rem 0.65rem;

    text-align: left;

    vertical-align: top;

}



.legal-static__table th {

    font-weight: 600;

    color: var(--text-heading);

}



.legal-muted {

    font-size: 0.9rem;

    color: var(--muted);

}



.legal-static__crosslinks {

    margin-top: 2rem;

    padding-top: 1rem;

    border-top: 1px solid var(--border);

}



@media (max-width: 640px) {

    .topbar__inner {

        min-height: 5rem;

        padding: 1rem 0;

    }



    .brand-mark__logo {

        height: 3.5rem;

    }



    .brand-mark__text {

        font-size: 1.1rem;

    }

}



@media (prefers-reduced-motion: reduce) {

    .project-card {

        transition: none;

    }



    .project-card:hover,

    .project-card:focus-visible {

        transform: none;

    }

}