/* =========================
   Gruppe faltbar machen
   ========================= */
.group-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.group-header-title {
    flex: 1 1 auto;
    min-width: 0;
}

.group-toggle-button {
    flex: 0 0 auto;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 999px;
}

/* =========================
   Bilder in Tiles
   ========================= */
.fixed-tile-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.tile-image-wrapper {
    position: relative;
}

/* Bildbereiche klickbar kennzeichnen */
.tile-image-wrapper,
.tile-img {
    cursor: pointer;
}

/* =========================
Group / Hero-Hintergründe
   ========================= */

.group-hero-bg-hero {
    margin-top: -80px;
    padding: 80px 1rem 2rem;
    margin-bottom: 2rem;
    color: white;
}

.group-hero-bg {
    padding: 2rem 1rem 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: inherit;
}

.group-hero-inner > h1.mud-typography,
.group-hero-inner > .mud-typography-h5 {
    margin-top: 0;
}

.group-hero-inner > .mud-typography:first-child {
    margin-top: 0;
}

.group-header-overlay {
    display: inline-block;
    background: rgba(255, 255, 255, 0.85);
    color: #000;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    max-width: 100%; /* Variante A: darf bis zur vollen Breite wachsen */
}

.group-header-overlay h1 {
    margin: 0;
}

.group-header-overlay > .mud-typography + .mud-typography {
    margin-top: 0.3rem;
}

.group-title-overlay {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: rgba(255, 255, 255, 0.85);
    color: #000;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.group-collapsed {
    min-height: 0 !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* =========================
   Tile-Layout: Text + Bild
   ========================= */

.tile-card {
    container-type: inline-size;
    width: 100%;
    box-sizing: border-box;
}

.hero-card,
.mud-card {
    container-type: inline-size;
    background: rgba(255, 255, 255, 0.85)!important;
}

.tile-horizontal {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: flex-start;
}

/* Eigene Klasse für „Bild rechts“ (AlternateLR / align=right) */
.tile-horizontal-right .tile-img {
    order: 2; /* Bild rechts */
}

.tile-horizontal-right .tile-content {
    order: 1; /* Text links */
}

.tile-img {
    flex: 0 0 auto;
    max-width: 45%; /* Bild nimmt max. ~45% der Card */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.tile-content {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.tile-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.tile-header-row .mud-typography {
   flex: 1 1 auto;
   min-width: 0;
   overflow-wrap: break-word;
}

.tile-header-button {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-transform: none; /* kein ALL CAPS */
    width: 100%;
}

    .tile-header-button .tile-header-row {
        width: 100%;
    }

/* =========================
   Toggle-Buttons (nur Style fürs Icon)
   ========================= */

.tile-toggle-button {
    background-color: #ffffff !important;
    color: #3f51b5;
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    padding: 0.1rem;
}

.tile-toggle-button .mud-icon-root {
   font-size: 1.1rem;
}

.tile-toggle-overlay {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
}

/* =========================
   Stack-Layout (left/right)
   ========================= */

.tile-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

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

.tile-stack-right {
    align-items: flex-end;
}

.tile-stack-item {
    width: 100%;
}

@@media (max-width: 900px) {
    .tile-stack-item > .mud-card {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =========================
                           Bottom-Layout
                   ========================= */

.tile-bottom-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* =========================
                           Responsive / Container-Queries
                   ========================= */

@@container (max-width: 520px) {
    /* Bei schmalen Cards: IMMER Bild oben, Text unten */
    .tile-horizontal,
    .tile-horizontal-right {
        flex-direction: column;
        align-items: stretch;
    }

        .tile-horizontal .tile-img,
        .tile-horizontal-right .tile-img {
            order: 0;
            flex: 0 0 auto;
            max-width: 100%;
            width: 100%;
            margin-bottom: 0.5rem;
        }

        .tile-horizontal .tile-content,
        .tile-horizontal-right .tile-content {
            order: 1;
            width: 100%;
            min-width: 0;
        }
}

/* =========================
                           App-Tiles (ExpansionPanels etc.)
                   ========================= */

.app-tile .mud-expansion-panels,
.app-tile .mud-expand-panel,
.app-tile .mud-expand-panel-content,
.app-tile .mud-tabs-panel,
.app-tile .mud-tab-panel {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

.app-tile .mud-card-content {
    max-height: none !important;
    overflow: visible !important;
}

.tile-app-wrapper {
    width: 100%;
}