/* =========================================
   TILE WIDGETS - Mobile-First (011-ui-css-tiles 014)
   Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-tiles, @skill-css-rules, @skill-change-provenance | Admin-KPI-Raster und Metrik-Klassen nachgezogen (fehlten; Kacheln waren einspaltig aufgeblaeht)
   ========================================= */

.base-tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .base-tile-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
}

@media (min-width: 1440px) {
    .base-tile-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    }
}

/* Feste Spaltenanzahl (011-ui-css-tiles 015, 017) – je Grid genau eine Klasse (011-ui-html 021) */
/* .base-tile-grid-columns-2 | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-tiles, @skill-ui-kacheln, @skill-change-provenance | Contact Feature-Kacheln ab Tablet nebeneinander (600px statt 1024px) */
.base-tile-grid-columns-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* .base-tile-grid-columns-2 @media 600px | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-tiles, @skill-ui-kacheln, @skill-change-provenance | Zwei Spalten ab Tablet laut 011-ui-css-tiles 014.004 */
@media (min-width: 600px) {
    .base-tile-grid-columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* .base-tile-grid-columns-3 | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-tiles, @skill-ui-kacheln, @skill-change-provenance | Drei Spalten ab Tablet fuer Contact Feature-Kacheln */
.base-tile-grid-columns-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 600px) {
    .base-tile-grid-columns-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.base-tile-text-left-align {
    align-items: flex-start;
    text-align: left;
}

/* Mobile: 011-ui-mobile 003 – Innen-Rahmen maximal 20px Abstand links/rechts; 011-ui-css-tiles 009 min. Innenabstand */
.base-tile {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    min-height: 260px;
    box-shadow: var(--shadow-sm);
}

/* .base-tile-compact | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-tiles, @skill-ui-kacheln, @skill-change-provenance | Kompakte Trust-/Feature-Kacheln ohne riesige min-height */
.base-tile-compact {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 0;
    box-shadow: var(--shadow-sm);
}

/* .base-tile-compact:hover | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-tiles, @skill-css-rules, @skill-change-provenance | Dezenter Hover wie Standard-Tile */
.base-tile-compact:hover {
    background-color: var(--color-surface-elevated);
    box-shadow: var(--shadow-md);
}

/* .base-tile-content-stack | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-tiles, @skill-css-rules, @skill-change-provenance | Kompakter Kachel-Textstapel ohne min-height */
.base-tile-content-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Tablet/Desktop: gleiches Raster wie .base-card ab 600px */
@media (min-width: 600px) {
    .base-tile {
        padding: 20px 25px;
    }
}

.base-tile-label {
    display: block;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: 0.5rem;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.base-tile-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.base-tile-content-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 80px;
}

.base-tile-headline-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
}

.base-tile-text-left .base-tile {
    align-items: flex-start;
    text-align: left;
}

.base-tile-text-left .base-tile-content-centered {
    align-items: flex-start;
    text-align: left;
}

.base-tile-text-left .base-tile-headline-row {
    justify-content: flex-start;
}

.base-tile:hover {
    background-color: var(--color-surface-elevated);
}

.base-tile-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 1rem;
    background-color: var(--color-primary-soft-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    border: 1px solid var(--color-primary-soft-border);
}

.base-tile-icon-svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* .base-tile-grid-admin-stack | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Vertikaler Abstand zwischen KPI-Zeilen = Kachel-Gap 8px */
.base-tile-grid-admin-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* .base-tile-grid-admin-five, .base-tile-grid-admin-five-follow, .base-tile-grid-admin-six-follow, .base-tile-grid-admin-seven-follow, .base-tile-grid-admin-eight-follow,
.base-tile-grid-admin-nine-follow, .base-tile-grid-admin-four-follow, .base-tile-grid-admin-three-follow | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | four-follow fuer Add-on-KPI-Zeile Admin-Bestellungen */
.base-tile-grid-admin-five,
.base-tile-grid-admin-five-follow,
.base-tile-grid-admin-six-follow,
.base-tile-grid-admin-seven-follow,
.base-tile-grid-admin-eight-follow,
.base-tile-grid-admin-nine-follow,
.base-tile-grid-admin-four-follow,
.base-tile-grid-admin-three-follow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.base-tile-grid-admin-five-follow,
.base-tile-grid-admin-six-follow,
.base-tile-grid-admin-seven-follow,
.base-tile-grid-admin-eight-follow,
.base-tile-grid-admin-nine-follow,
.base-tile-grid-admin-four-follow,
.base-tile-grid-admin-three-follow {
    margin-top: 8px;
}

/* .base-tile-grid-admin-stack > .base-tile-grid-admin-five-follow, … | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Im Stack kein Follow-Margin, Abstand nur ueber Stack-Gap */
.base-tile-grid-admin-stack > .base-tile-grid-admin-five,
.base-tile-grid-admin-stack > .base-tile-grid-admin-five-follow,
.base-tile-grid-admin-stack > .base-tile-grid-admin-six-follow,
.base-tile-grid-admin-stack > .base-tile-grid-admin-seven-follow,
.base-tile-grid-admin-stack > .base-tile-grid-admin-eight-follow,
.base-tile-grid-admin-stack > .base-tile-grid-admin-nine-follow,
.base-tile-grid-admin-stack > .base-tile-grid-admin-four-follow,
.base-tile-grid-admin-stack > .base-tile-grid-admin-three-follow {
    margin-top: 0;
}

/* .base-tile-grid-admin-five .base-tile, … .base-tile-grid-admin-four-follow .base-tile, .base-tile-grid-admin-three-follow .base-tile | Änderungsprotokoll: 2026-10-02 | agent-router | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | KPI-Kachel Premium: Accent-Leiste Soft-Glow kompakt */
.base-tile-grid-admin-five .base-tile,
.base-tile-grid-admin-five-follow .base-tile,
.base-tile-grid-admin-six-follow .base-tile,
.base-tile-grid-admin-seven-follow .base-tile,
.base-tile-grid-admin-eight-follow .base-tile,
.base-tile-grid-admin-nine-follow .base-tile,
.base-tile-grid-admin-four-follow .base-tile,
.base-tile-grid-admin-three-follow .base-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-brand);
    border-left-width: 0.28rem;
    border-radius: 0.65rem;
    box-shadow: var(--shadow-sm);
    padding: 10px 12px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

/* .base-tile-grid-admin-five .base-tile:hover, … .base-tile-grid-admin-four-follow .base-tile:hover, .base-tile-grid-admin-three-follow .base-tile:hover | Änderungsprotokoll: 2026-10-02 | agent-router | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | KPI Hover Soft-Surface Glow */
.base-tile-grid-admin-five .base-tile:hover,
.base-tile-grid-admin-five-follow .base-tile:hover,
.base-tile-grid-admin-six-follow .base-tile:hover,
.base-tile-grid-admin-seven-follow .base-tile:hover,
.base-tile-grid-admin-eight-follow .base-tile:hover,
.base-tile-grid-admin-nine-follow .base-tile:hover,
.base-tile-grid-admin-four-follow .base-tile:hover,
.base-tile-grid-admin-three-follow .base-tile:hover {
    transform: none;
    background-color: var(--color-logo-orange-surface);
    box-shadow: var(--shadow-glow);
}

/* .base-tile-grid-admin-five .base-tile-content-centered, … .base-tile-grid-admin-four-follow .base-tile-content-centered, .base-tile-grid-admin-three-follow .base-tile-content-centered | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | KPI-Bänder zentriert kompakt; Titel-Slot relativ zur Titel-Schrift */
.base-tile-grid-admin-five .base-tile-content-centered,
.base-tile-grid-admin-five-follow .base-tile-content-centered,
.base-tile-grid-admin-six-follow .base-tile-content-centered,
.base-tile-grid-admin-seven-follow .base-tile-content-centered,
.base-tile-grid-admin-eight-follow .base-tile-content-centered,
.base-tile-grid-admin-nine-follow .base-tile-content-centered,
.base-tile-grid-admin-four-follow .base-tile-content-centered,
.base-tile-grid-admin-three-follow .base-tile-content-centered {
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 8px;
    align-content: start;
    justify-items: center;
    align-items: center;
    justify-content: center;
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    gap: 8px;
    box-sizing: border-box;
}

/* .base-tile-grid-admin-nine-follow | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Mehrzeilig (3er): Titel-Slot an Titel-Schrift gekoppelt */
.base-tile-grid-admin-nine-follow {
    --admin-kpi-title-slot-min: 2.5em;
}

/* .base-tile-grid-admin-three-follow | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Three-Follow Titel-Slot zwei Zeilen der Titel-Schrift */
.base-tile-grid-admin-three-follow {
    --admin-kpi-title-slot-min: 2.5em;
}

/* .base-tile-grid-admin-five .base-tile-metric-primary, … .base-tile-grid-admin-four-follow .base-tile-metric-primary, .base-tile-grid-admin-three-follow .base-tile-metric-primary | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | KPI-Zahl kompakt und zentriert */
.base-tile-grid-admin-five .base-tile-metric-primary,
.base-tile-grid-admin-five-follow .base-tile-metric-primary,
.base-tile-grid-admin-six-follow .base-tile-metric-primary,
.base-tile-grid-admin-seven-follow .base-tile-metric-primary,
.base-tile-grid-admin-eight-follow .base-tile-metric-primary,
.base-tile-grid-admin-nine-follow .base-tile-metric-primary,
.base-tile-grid-admin-four-follow .base-tile-metric-primary,
.base-tile-grid-admin-three-follow .base-tile-metric-primary {
    font-size: clamp(1.15rem, 2.4vw, 1.35rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}

/* .base-tile-grid-admin-five .base-tile-metric-secondary | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | KPI-Eurobetrag weiss auf Admin-Kacheln, nicht Logo-Orange */
.base-tile-grid-admin-five .base-tile-metric-secondary,
.base-tile-grid-admin-five-follow .base-tile-metric-secondary,
.base-tile-grid-admin-six-follow .base-tile-metric-secondary,
.base-tile-grid-admin-seven-follow .base-tile-metric-secondary,
.base-tile-grid-admin-eight-follow .base-tile-metric-secondary,
.base-tile-grid-admin-nine-follow .base-tile-metric-secondary,
.base-tile-grid-admin-four-follow .base-tile-metric-secondary,
.base-tile-grid-admin-three-follow .base-tile-metric-secondary {
    font-size: clamp(0.85rem, 2.6vw, 0.98rem);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}

/* .base-tile-grid-admin-five .base-tile-metric-title, … .base-tile-grid-admin-four-follow .base-tile-metric-title, .base-tile-grid-admin-three-follow .base-tile-metric-title | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Titel-Slot in em der Titel-Schrift, zentriert */
.base-tile-grid-admin-five .base-tile-metric-title,
.base-tile-grid-admin-five-follow .base-tile-metric-title,
.base-tile-grid-admin-six-follow .base-tile-metric-title,
.base-tile-grid-admin-seven-follow .base-tile-metric-title,
.base-tile-grid-admin-eight-follow .base-tile-metric-title,
.base-tile-grid-admin-nine-follow .base-tile-metric-title,
.base-tile-grid-admin-four-follow .base-tile-metric-title,
.base-tile-grid-admin-three-follow .base-tile-metric-title {
    font-size: clamp(0.7rem, 1.4vw, 0.78rem);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand);
    min-height: var(--admin-kpi-title-slot-min, 2.5em);
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* .base-tile-grid-admin-five .base-tile-metric-caption | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | KPI-Klammer kompakt zentriert */
.base-tile-grid-admin-five .base-tile-metric-caption,
.base-tile-grid-admin-five-follow .base-tile-metric-caption,
.base-tile-grid-admin-six-follow .base-tile-metric-caption,
.base-tile-grid-admin-seven-follow .base-tile-metric-caption,
.base-tile-grid-admin-eight-follow .base-tile-metric-caption,
.base-tile-grid-admin-nine-follow .base-tile-metric-caption,
.base-tile-grid-admin-four-follow .base-tile-metric-caption,
.base-tile-grid-admin-three-follow .base-tile-metric-caption {
    font-size: clamp(0.68rem, 1.5vw, 0.78rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin: 0;
    text-align: center;
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}

@media (max-width: 599px) {
    /* .base-tile-grid-admin-five > .base-tile:nth-child(5) | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Nur erste KPI-Reihe mit 5 Kacheln zentriert; Follow-Reihe hat 6 */
    .base-tile-grid-admin-five > .base-tile:nth-child(5) {
        grid-column: 1 / -1;
        width: calc(50% - 5px);
        justify-self: center;
    }
}

@media (min-width: 600px) {
    /* .base-tile-grid-admin-five, … | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Tablet-Gap 8px wie Desktop und Stack (horizontal=vertikal) */
    .base-tile-grid-admin-five,
    .base-tile-grid-admin-five-follow,
    .base-tile-grid-admin-six-follow,
    .base-tile-grid-admin-seven-follow,
    .base-tile-grid-admin-eight-follow,
    .base-tile-grid-admin-nine-follow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    /* .base-tile-grid-admin-four-follow | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Add-on-KPI ab Tablet vier Spalten in einer Zeile */
    .base-tile-grid-admin-four-follow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .base-tile-grid-admin-three-follow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    /* .base-tile-grid-admin-five .base-tile, … .base-tile-grid-admin-four-follow .base-tile, .base-tile-grid-admin-three-follow .base-tile | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Tablet: sehr kompaktes Padding */
    .base-tile-grid-admin-five .base-tile,
    .base-tile-grid-admin-five-follow .base-tile,
    .base-tile-grid-admin-six-follow .base-tile,
    .base-tile-grid-admin-seven-follow .base-tile,
    .base-tile-grid-admin-eight-follow .base-tile,
    .base-tile-grid-admin-nine-follow .base-tile,
    .base-tile-grid-admin-four-follow .base-tile,
    .base-tile-grid-admin-three-follow .base-tile {
        padding: 8px 10px;
        border-radius: 0.5rem;
    }

    /* .base-tile-grid-admin-five .base-tile-content-centered, … | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Tablet: Band-Grid zentriert kompakt auto-rows */
    .base-tile-grid-admin-five .base-tile-content-centered,
    .base-tile-grid-admin-five-follow .base-tile-content-centered,
    .base-tile-grid-admin-six-follow .base-tile-content-centered,
    .base-tile-grid-admin-seven-follow .base-tile-content-centered,
    .base-tile-grid-admin-eight-follow .base-tile-content-centered,
    .base-tile-grid-admin-nine-follow .base-tile-content-centered,
    .base-tile-grid-admin-four-follow .base-tile-content-centered,
    .base-tile-grid-admin-three-follow .base-tile-content-centered {
        display: grid;
        grid-template-rows: auto auto auto;
        align-content: start;
        justify-items: center;
        align-items: center;
        min-height: 0;
        flex: 1 1 auto;
        width: 100%;
        gap: 8px;
    }

    .base-tile-grid-admin-three-follow .base-tile {
        padding: 8px 10px;
    }
}

@media (min-width: 1024px) {
    .base-tile-grid-admin-five,
    .base-tile-grid-admin-five-follow {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

    .base-tile-grid-admin-six-follow {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
    }

    .base-tile-grid-admin-seven-follow {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 8px;
    }

    .base-tile-grid-admin-eight-follow {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 8px;
    }

    /* .base-tile-grid-admin-nine-follow ab 1024px: bewusst KEINE 9 Spalten – bleibt Tablet-3er, sonst zu eng in Admin-Content (~1000px) */

    /* .base-tile-grid-admin-four-follow | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Desktop: Add-on-KPI weiterhin vier Spalten */
    .base-tile-grid-admin-four-follow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .base-tile-grid-admin-three-follow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    /* .base-tile-grid-admin-five .base-tile, … .base-tile-grid-admin-four-follow .base-tile, .base-tile-grid-admin-three-follow .base-tile | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Desktop: sehr kompaktes Padding */
    .base-tile-grid-admin-five .base-tile,
    .base-tile-grid-admin-five-follow .base-tile,
    .base-tile-grid-admin-six-follow .base-tile,
    .base-tile-grid-admin-seven-follow .base-tile,
    .base-tile-grid-admin-eight-follow .base-tile,
    .base-tile-grid-admin-nine-follow .base-tile,
    .base-tile-grid-admin-four-follow .base-tile,
    .base-tile-grid-admin-three-follow .base-tile {
        padding: 8px 10px;
        border-radius: 0.5rem;
    }

    /* .base-tile-grid-admin-five .base-tile-content-centered, … | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Desktop: Band-Grid zentriert auto-rows */
    .base-tile-grid-admin-five .base-tile-content-centered,
    .base-tile-grid-admin-five-follow .base-tile-content-centered,
    .base-tile-grid-admin-six-follow .base-tile-content-centered,
    .base-tile-grid-admin-seven-follow .base-tile-content-centered,
    .base-tile-grid-admin-eight-follow .base-tile-content-centered,
    .base-tile-grid-admin-nine-follow .base-tile-content-centered,
    .base-tile-grid-admin-four-follow .base-tile-content-centered,
    .base-tile-grid-admin-three-follow .base-tile-content-centered {
        display: grid;
        grid-template-rows: auto auto auto;
        align-content: start;
        justify-items: center;
        align-items: center;
        min-height: 0;
        flex: 1 1 auto;
        width: 100%;
        gap: 8px;
    }

    .base-tile-grid-admin-three-follow .base-tile {
        padding: 8px 10px;
    }
}

/* .base-tile-grid-admin-nine-follow | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | 9 Spalten ab 1400px; kompakter Titel-Slot, Gap 8px wie Stack */
@media (min-width: 1400px) {
    .base-tile-grid-admin-nine-follow {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 8px;
        --admin-kpi-title-slot-min: 3.2em;
    }

    .base-tile-grid-admin-nine-follow .base-tile {
        padding: 8px 6px;
    }

    .base-tile-grid-admin-nine-follow .base-tile-metric-title {
        font-size: clamp(0.6rem, 0.62vw, 0.7rem);
        letter-spacing: 0.03em;
        line-height: 1.15;
    }

    .base-tile-grid-admin-nine-follow .base-tile-metric-primary {
        font-size: clamp(1rem, 1vw, 1.2rem);
    }
}

.base-tile-grid-admin-four {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.base-tile-grid-admin-four .base-tile {
    background: var(--color-surface);
    border-radius: 1rem;
    box-shadow:
        0 1px 2px var(--color-border-highlight),
        0 6px 18px var(--color-border-highlight);
    padding: 14px 10px;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.base-tile-grid-admin-four .base-tile:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 6px var(--color-border-highlight),
        0 10px 24px var(--color-border-highlight);
}

.base-tile-grid-admin-four .base-tile-content-centered {
    min-height: 0;
    gap: 0.25rem;
}

/* .base-tile-grid-admin-four .base-tile-metric-primary | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | KPI-Metrik weiss auf Admin-Kacheln, nicht Logo-Orange */
.base-tile-grid-admin-four .base-tile-metric-primary {
    font-size: clamp(1.05rem, 3.4vw, 1.32rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}

.base-tile-grid-admin-four .base-tile-metric-title {
    font-size: clamp(0.68rem, 2.2vw, 0.78rem);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (min-width: 600px) {
    .base-tile-grid-admin-four {
        gap: 12px;
    }

    .base-tile-grid-admin-four .base-tile {
        padding: 18px 14px;
        border-radius: 1.125rem;
    }

    .base-tile-grid-admin-four .base-tile-content-centered {
        min-height: 76px;
        gap: 0.35rem;
    }
}

@media (min-width: 1024px) {
    .base-tile-grid-admin-four {
        gap: 14px;
    }

    .base-tile-grid-admin-four .base-tile {
        padding: 20px 16px;
        border-radius: 1.25rem;
    }

    .base-tile-grid-admin-four .base-tile-content-centered {
        min-height: 84px;
        gap: 0.45rem;
    }
}

/* .base-tile-metric-primary | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | KPI-Zahl in Logo-Orange */
.base-tile-metric-primary {
    display: block;
    width: 100%;
    min-width: 0;
    text-align: center;
    font-size: 1.06rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    color: var(--color-brand);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* .base-tile-metric-secondary | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | KPI-Eurobetrag in Logo-Orange */
.base-tile-metric-secondary {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
    text-align: center;
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    color: var(--color-brand);
    -webkit-text-fill-color: var(--color-brand);
    overflow-wrap: break-word;
    word-break: break-word;
}

.base-tile-metric-title {
    display: block;
    width: 100%;
    min-width: 0;
    text-align: center;
    font-size: 0.78rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* .base-tile-metric-caption | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | KPI-Klammer weiss, nicht grau */
.base-tile-metric-caption {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* .base-tile-metric-count-line | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Primary-Zeile: Anzahl und Prozent als Inline-Kinder nebeneinander */
.base-tile-metric-primary.base-tile-metric-count-line {
    display: block;
    width: 100%;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    line-height: 1.1;
}

/* .base-tile-metric-primary.base-tile-metric-count-line > span | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Kinder ohne width:100%, damit Prozent neben der Zahl bleibt */
.base-tile-metric-primary.base-tile-metric-count-line > span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    vertical-align: baseline;
}

/* .base-tile-metric-primary.base-tile-metric-count-line > .base-tile-metric-caption | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Prozent neben Anzahl weiss, nicht grau */
.base-tile-metric-primary.base-tile-metric-count-line > .base-tile-metric-caption {
    padding-left: 0.35em;
    font-size: 1em;
    font-weight: inherit;
    letter-spacing: inherit;
    font-variant-numeric: inherit;
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}

/* .base-tile-metric-amount-line | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Eurobetrag und optionale Nebenwerte in einer Zeile */
.base-tile-metric-amount-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em;
    width: 100%;
    min-width: 0;
    text-align: center;
}

/* .base-tile-metric-amount-line .base-tile-metric-secondary, .base-tile-metric-amount-line .base-tile-metric-caption | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-ui-kacheln, @skill-css-rules, @skill-change-provenance | Euro und Prozent weiss und inline */
.base-tile-metric-amount-line .base-tile-metric-secondary,
.base-tile-metric-amount-line .base-tile-metric-caption {
    display: inline;
    width: auto;
    margin-top: 0;
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}