/**
 * Hero-Tile-Styles.
 * Aktiviert, wenn das erste Teaser-Grid einer Page eine decorative-Tile
 * an Position 0 enthält (siehe title-layout-presets-konzept.md §7).
 */

.metro-grid--has-hero {
    margin-top: -93px;
}

@media (max-width: 768px) {
    .metro-grid--has-hero {
        margin-top: -83px;
    }
}

/* Hero-Cutout-Container (§7.3) */
.tile-hero-cutout {
    position: absolute;
    bottom: 0;
    left: 0;
    /* Breite/Höhe aus Inhalt */
    padding: 60px 180px 120px 0;
    color: inherit; /* Schriftfarbe kommt via .tile-text--color-* */
    pointer-events: none; /* damit Tile-Hover-Effekte nicht blockiert werden */
    z-index: 2; /* über Visual, unter Header (Header liegt fixed darüber via Stacking-Context) */
}

.tile-hero-cutout__shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--page-bg, #fff);
    z-index: -1; /* hinter dem Titel-Content */
}

.tile-hero-cutout__content {
    position: relative;
    /* Content-Styling erbt von Tile-Context (title-segments, etc.) */
}

/* Mobile: Padding proportional reduzieren (§7.7) */
@media (max-width: 768px) {
    .tile-hero-cutout {
        padding: 30px 90px 60px 0;
    }
}