/**
 * Host-CMS fragment helpers (Zeta embed without XUP Layout).
 * Complements public.css — keeps full-page body backgrounds off the fragment wrapper.
 */

.xup-public-host-fragment.page-public {
    font-family: var(--xup-public-font);
    color: var(--xup-public-text);
    /* MS69: nutzbare Content-Breite (~Nav/Grid 1200px) */
    max-width: min(1140px, 100%);
    margin-inline: auto;
    /* MS55: Host-Fragment an dezente Site-Radien (≤8px).
       Profil setzt --xup-teams-radius inline (12px) — !important nötig. */
    --xup-teams-radius: 8px !important;
    --xup-public-radius: 8px !important;
    --xup-teams-content-max-width: 1140px;
}

.xup-public-host-fragment.page-public *,
.xup-public-host-fragment.page-public *::before,
.xup-public-host-fragment.page-public *::after {
    box-sizing: border-box;
}

/* Theme tokens on wrapper (standalone uses body / html) */
.xup-public-host-fragment.xup-public-theme-dark {
    color-scheme: dark;
    --xup-teams-surface: #1b242e;
    --xup-teams-surface-muted: #222c38;
    --xup-teams-text: #e8eef4;
    --xup-teams-text-muted: #a7b4c2;
    --xup-teams-border: #334152;
    --xup-public-bg: #12181f;
    --xup-public-bg-accent: #182028;
    --xup-public-surface: #1b242e;
    --xup-public-surface-raised: #222c38;
    --xup-public-surface-soft: #222c38;
    --xup-public-row: #1b242e;
    --xup-public-panel: #181f28;
    --xup-public-block: #222c38;
    --xup-public-text: #e8eef4;
    --xup-public-muted: #a7b4c2;
    --xup-public-line: #334152;
    --xup-public-divider: #2a3542;
    --xup-public-caption-bg: #222c38;
    --xup-public-caption-text: #dce4ec;
    --xup-public-media-frame-bg: #1b242e;
    --xup-public-media-surface: #1b242e;
    --xup-public-member-bg: #222c38;
    --xup-public-member-border: #334152;
    --xup-public-accent-soft: rgba(90, 159, 192, 0.18);
    --xup-public-focus: #6a9bb0;
    --xup-public-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    --xup-public-crown-gold: #e0c35a;
    --xup-public-crown-silver: #c0c8d2;
    color: var(--xup-public-text);
    background: transparent;
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-team-name,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-section-title,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-embed-name,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-embed-heading,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-member-name,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-member-name-text {
    color: var(--xup-public-text);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-team {
    background: var(--xup-public-row);
    border-color: var(--xup-public-line);
    box-shadow: var(--xup-public-shadow);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-team-trigger,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-team[open] > .xup-public-team-trigger {
    background: var(--xup-public-row);
    color: var(--xup-public-text);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-team-panel,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-team-panel-body {
    background: var(--xup-public-panel);
    color: var(--xup-public-text);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-block,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-facts,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-member-list,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-member,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-figure,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-image-frame {
    background: var(--xup-public-block);
    border-color: var(--xup-public-line);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-fact dt,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-row-meta,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-row-meta-text,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-member-role,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-empty,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-empty-panel {
    color: var(--xup-public-muted);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-figcaption {
    background: var(--xup-public-caption-bg);
    color: var(--xup-public-caption-text);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-fact dd,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-intro-text {
    color: var(--xup-public-text);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-logo,
.xup-public-host-fragment.xup-public-theme-dark .xup-public-logo-placeholder {
    background: var(--xup-public-media-surface);
    border-color: var(--xup-public-line);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-chevron {
    color: var(--xup-public-muted);
}

.xup-public-host-fragment.xup-public-theme-dark .xup-public-link {
    color: var(--xup-public-focus);
}

.xup-public-host-fragment.xup-embed-theme-dark .xup-public-embed-link {
    background: var(--xup-public-surface);
    border-color: var(--xup-public-line);
    color: var(--xup-public-text);
}

.xup-public-host-fragment.xup-embed-theme-dark .xup-public-embed-link:hover {
    border-color: var(--xup-public-focus);
    background: var(--xup-public-surface-raised);
}

.xup-public-host-fragment.xup-embed-cols-1 { --xup-embed-columns: 1; }
.xup-public-host-fragment.xup-embed-cols-2 { --xup-embed-columns: 2; }
.xup-public-host-fragment.xup-embed-cols-3 { --xup-embed-columns: 3; }
.xup-public-host-fragment.xup-embed-cols-4 { --xup-embed-columns: 4; }

.xup-public-host-fragment.xup-embed-spacing-compact {
    --xup-embed-card-padding: 0.4rem;
    --xup-embed-gap: 0.45rem;
}

.xup-public-host-fragment.xup-embed-spacing-normal {
    --xup-embed-gap: 0.7rem;
}

.xup-public-host-fragment.page-public-embed {
    max-width: none;
}

/*
 * Host CMS (#content a) uses a dotted border-bottom + link color that overrides
 * embed card borders. Restore uniform solid edges for fragment embed links only.
 */
#content .xup-public-host-fragment a.xup-public-embed-link:not(.button):not(.fancybox):not(.zpSO-Uplink-Flat):not(.zpnolayoutlinkstyles) {
    border: 1px solid var(--xup-public-line);
    color: var(--xup-public-text);
    text-decoration: none;
}

#content .xup-public-host-fragment a.xup-public-embed-link:not(.button):not(.fancybox):not(.zpnolayoutlinkstyles):hover {
    border: 1px solid var(--xup-public-focus);
    background: var(--xup-public-surface-raised);
    color: var(--xup-public-text);
    text-decoration: none;
}

/*
 * Zeta #content h2 { font-size: … !important } overrides XUP section titles
 * (Mannschaftsdetails / Mitglieder / Bilder). Scoped host fix only — font-size
 * needs !important to win; other properties do not.
 */
#content .xup-public-host-fragment h2.xup-public-section-title {
    font-size: 1.08rem !important;
    line-height: 1.3;
    letter-spacing: normal;
    font-weight: 650;
    margin: 0 0 0.55rem;
    text-transform: none;
}

/* MS69 Host: offener Name zusätzlich zur public.css-Regel absichern */
#content .xup-public-host-fragment .xup-public-team[open] > .xup-public-team-trigger .xup-public-team-name {
    color: #5ecdd7;
    font-weight: 750;
}

@media (max-width: 640px) {
    .xup-public-host-fragment.page-public {
        max-width: 100%;
    }

    .xup-public-host-fragment .xup-public-team-trigger {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .xup-public-host-fragment .xup-public-logo {
        flex-basis: 3.15rem;
        width: 3.15rem;
        height: 3.15rem;
    }
}

/*
 * Neutralize Zeta layout list styles (ul:not(.slides) / li padding) on the
 * embed grid only. Specificity must beat ul:not(.slides) (0,1,1) and
 * ul:not(.slides) li (0,1,2) without affecting other site lists.
 */
.xup-public-host-fragment ul.xup-public-embed-grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

.xup-public-host-fragment ul.xup-public-embed-grid > li.xup-public-embed-item {
    list-style: none;
    padding-left: 0;
}

/*
 * Host embed responsive columns + centering.
 * public.css media queries target body.xup-embed-* which do not apply when
 * size/cols classes live on .xup-public-host-fragment (Zeta fragment embed).
 *
 * Flex wrap + justify-content:center keeps incomplete last rows balanced
 * without fixed card widths. Column counts:
 *   ≤460px → 1 | 461–767px → 2 | ≥768px → 3
 */
.xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    --xup-host-embed-gap: var(--xup-embed-gap, 0.7rem);
    gap: var(--xup-host-embed-gap);
}

.xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-item {
    display: flex;
    min-width: 0;
    flex: 0 1 calc((100% - 2 * var(--xup-host-embed-gap)) / 3);
    max-width: calc((100% - 2 * var(--xup-host-embed-gap)) / 3);
}

.xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-link {
    align-items: center;
    width: 100%;
}

.xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-name {
    text-align: center;
    width: 100%;
    font-size: 1.2rem; /* desktop ≥768px */
}

@media (max-width: 767px) {
    .xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-grid {
        --xup-host-embed-gap: 0.85rem;
    }

    .xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-item {
        flex: 0 1 calc((100% - var(--xup-host-embed-gap)) / 2);
        max-width: calc((100% - var(--xup-host-embed-gap)) / 2);
    }

    .xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-link {
        padding: 0.7rem;
    }

    .xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-name {
        font-size: 1.1rem;
    }
}

@media (max-width: 460px) {
    .xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-item {
        flex: 0 1 100%;
        max-width: 100%;
    }

    .xup-public-host-fragment.xup-embed-size-standard .xup-public-embed-name {
        font-size: 1.05rem;
    }
}