/* HeaderGrid Template 1 – Mosaik */
.hg-t1 {
    --hg-col-1: #A6213A;
    --hg-col-2: #f5c000;
    --hg-col-3: #1e3a4f;
    --hg-col-4: #1a73c8;
    --hg-col-5: #e87722;
    --hg-col-6: #2a9d8f;
    --hg-gap: 4px;
}

/* Grid test */
.hg-t1 .hg-grid {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    gap: var(--hg-gap);
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: calc((100vw - (11 * var(--hg-gap))) / 12);
}

/* Cell positions */
.hg-t1 .hg-cell-1 { grid-column: 1/3;   grid-row: 1/3; }
.hg-t1 .hg-cell-2 { grid-column: 1/3;   grid-row: 3/5; }
.hg-t1 .hg-cell-3 { grid-column: 3/5;   grid-row: 1/3; }
.hg-t1 .hg-cell-4 { grid-column: 3/5;   grid-row: 3/5; display: grid; gap: var(--hg-gap); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.hg-t1 .hg-cell-5 { grid-column: 5/7;   grid-row: 1/3; display: grid; gap: var(--hg-gap); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.hg-t1 .hg-cell-6 { grid-column: 5/7;   grid-row: 3/5; }
.hg-t1 .hg-cell-7 { grid-column: 7/11;  grid-row: 1/5; }
.hg-t1 .hg-cell-8 { grid-column: 11/13; grid-row: 1/3; }
.hg-t1 .hg-cell-9 { grid-column: 11/13; grid-row: 3/5; }

/* Color modifiers */
.hg-t1 .hg-bg-col-1 { background: var(--hg-col-1); }
.hg-t1 .hg-bg-col-2 { background: var(--hg-col-2); }
.hg-t1 .hg-bg-col-3 { background: var(--hg-col-3); }
.hg-t1 .hg-bg-col-4 { background: var(--hg-col-4); }
.hg-t1 .hg-bg-col-5 { background: var(--hg-col-5); }
.hg-t1 .hg-bg-col-6 { background: var(--hg-col-6); }

/* Tile base */
.hg-t1 .hg-tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
}

.hg-t1 .hg-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.hg-t1 .hg-tile.hg-photo:hover img {
    transform: scale(1.06);
}

.hg-t1 .hg-tile.hg-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Link-Wrapper: füllt die Tile und übernimmt das Flex-Layout,
   damit Icons/Texte zentriert bleiben. */
.hg-t1 .hg-tile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.hg-t1 .hg-tile.hg-icon > .hg-tile-link {
    flex-direction: column;
    gap: 10px;
}

/* Sub-tile */
.hg-t1 .hg-sub {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.hg-t1 .hg-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.hg-t1 .hg-sub.hg-photo:hover img {
    transform: scale(1.08);
}

/* Icon system */
.hg-t1 .hg-icon-wrap {
    position: relative;
    width: 50%;
    max-width: 100px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hg-t1 .hg-icon-wrap i {
    font-size: 4rem;
    color: white;
    transition: transform 0.55s cubic-bezier(.34, 1.56, .64, 1), opacity 0.3s;
}

.hg-t1 .hg-icon-wrap .lg-icon {
    font-size: 6rem;
}

.hg-t1 .hg-bg-col-2 .hg-icon-wrap i, .hg-t1 .hg-bg-col-2 .hg-icon-label, .hg-t1 .hg-bg-col-2 .hg-tile-word  {
     color: var(--hg-col-3);
}

.hg-t1 .hg-icon-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.6rem, 1.2vw, 1.5rem);
    color: white;
    letter-spacing: 0.05em;
    text-align: center;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s;
    pointer-events: none;
}

.hg-t1 .hg-tile-word {
    font-size: clamp(0.5rem, 0.9vw, 1rem);
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: opacity 0.3s;
}

/* Hover effects */
.hg-t1 .hg-tile.hg-icon:hover .hg-icon-label,
.hg-t1 .hg-sub:hover .hg-icon-label {
    opacity: 1;
    transform: scale(1);
}

.hg-t1 .hg-tile.hg-icon:hover .hg-tile-word,
.hg-t1 .hg-sub:hover .hg-tile-word {
    opacity: 0;
}

.hg-t1 .hg-tile.hg-icon:hover .hg-icon-wrap i,
.hg-t1 .hg-sub:hover .hg-icon-wrap i {
    transform: rotate(360deg) scale(0.8);
    opacity: 0.12;
}

/* Ripple */
.hg-t1 .hg-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transform: scale(0);
    animation: hg-ripple 0.6s linear;
    pointer-events: none;
}

@keyframes hg-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ------------------------------------------------------------------
 * Responsive: Tablet (576 – 1199px)
 *
 * Desktop-Layout halbiert: linke Hälfte (Spalten 1-6 des 12er-Grids)
 * oben, rechte Hälfte (Spalten 7-12) darunter. Sub-Grids bleiben 2x2.
 *
 *   Desktop:                       Tablet (gestapelt):
 *   ┌─┬─┬─┬─────┬─┐               ┌─┬─┬─┐
 *   │1│3│5│  7  │8│               │1│3│5│  (linke Hälfte)
 *   │ │ │ │     │ │               │ │ │ │
 *   │2│4│6│     │9│               │2│4│6│
 *   └─┴─┴─┴─────┴─┘               ├─┴─┴─┤
 *                                 │     │
 *                                 │  7  │  (rechte Hälfte)
 *                                 │     │
 *                                 ├───┬─┤
 *                                 │ 7 │8│
 *                                 │   │9│
 *                                 └───┴─┘
 * ------------------------------------------------------------------ */
@media (min-width: 576px) and (max-width: 1199px) {
    .hg-t1 .hg-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
        gap: 6px;
    }

    .hg-t1 .hg-tile,
    .hg-t1 .hg-sub { aspect-ratio: 1; }

    /* Obere Hälfte (entspricht Desktop-Spalten 1-6) */
    .hg-t1 .hg-cell-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
    .hg-t1 .hg-cell-2 { grid-column: 1 / 3; grid-row: 3 / 5; }
    .hg-t1 .hg-cell-3 { grid-column: 3 / 5; grid-row: 1 / 3; }
    .hg-t1 .hg-cell-4 { grid-column: 3 / 5; grid-row: 3 / 5; }
    .hg-t1 .hg-cell-5 { grid-column: 5 / 7; grid-row: 1 / 3; }
    .hg-t1 .hg-cell-6 { grid-column: 5 / 7; grid-row: 3 / 5; }

    /* Untere Hälfte (entspricht Desktop-Spalten 7-12) */
    .hg-t1 .hg-cell-7 { grid-column: 1 / 5; grid-row: 5 / 9; aspect-ratio: 1; }
    .hg-t1 .hg-cell-8 { grid-column: 5 / 7; grid-row: 5 / 7; }
    .hg-t1 .hg-cell-9 { grid-column: 5 / 7; grid-row: 7 / 9; }

    .hg-t1 .hg-icon-wrap i        { font-size: clamp(2rem, 4vw, 3.5rem); }
    .hg-t1 .hg-icon-wrap .lg-icon { font-size: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ------------------------------------------------------------------
 * Responsive: Smartphone (≤ 575px)
 *
 * Layout wird weiter geteilt — gleiche Anordnung wie Tablet, aber
 * 4-Spalten-Grid statt 6, und die Tablet-Hälften werden nochmal
 * gestapelt (rechte Spalten unter die linken).
 *
 *   ┌─┬─┐         (oberer Block: was Desktop-Spalten 1-4 war)
 *   │1│3│
 *   │ │ │
 *   │2│4│
 *   ├─┼─┤         (was Desktop-Spalten 5-6 war)
 *   │5│6│
 *   │ │ │
 *   ├─┴─┤
 *   │   │         (HERO)
 *   │ 7 │
 *   │   │
 *   ├─┬─┤
 *   │8│9│
 *   └─┴─┘
 * ------------------------------------------------------------------ */
@media (max-width: 575px) {
    .hg-t1 .hg-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;
        gap: 6px;
    }

    .hg-t1 .hg-tile,
    .hg-t1 .hg-sub {
        aspect-ratio: 1;
    }

    /* Obere Hälfte des Tablet-Layouts: weiter geteilt */
    /* Erste Reihe: cell-1, cell-3 (war oben links/mitte vom Desktop) */
    .hg-t1 .hg-cell-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
    .hg-t1 .hg-cell-3 { grid-column: 3 / 5; grid-row: 1 / 3; }

    /* Zweite Reihe: cell-2, cell-4 (waren darunter im Desktop) */
    .hg-t1 .hg-cell-2 { grid-column: 1 / 3; grid-row: 3 / 5; }
    .hg-t1 .hg-cell-4 { grid-column: 3 / 5; grid-row: 3 / 5; }

    /* Dritte Reihe: cell-5, cell-6 (war Desktop-Spalten 5-6) */
    .hg-t1 .hg-cell-5 { grid-column: 1 / 3; grid-row: 5 / 7; }
    .hg-t1 .hg-cell-6 { grid-column: 3 / 5; grid-row: 5 / 7; }

    /* Untere Hälfte des Tablet-Layouts: HERO + Actions */
    .hg-t1 .hg-cell-7 { grid-column: 1 / 5; grid-row: 7 / 11; aspect-ratio: 1; }
    .hg-t1 .hg-cell-8 { grid-column: 1 / 3; grid-row: 11 / 13; }
    .hg-t1 .hg-cell-9 { grid-column: 3 / 5; grid-row: 11 / 13; }

    /* Icon-Größen */
    .hg-t1 .hg-icon-wrap i        { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    .hg-t1 .hg-icon-wrap .lg-icon { font-size: clamp(2rem, 9vw, 3rem); }
    .hg-t1 .hg-tile-word          { font-size: 0.75rem; }
    .hg-t1 .hg-icon-label         { font-size: 0.85rem; }
}

/* ------------------------------------------------------------------
 * Touch-Geräte ohne Hover: Tile-Word IMMER sichtbar,
 * keine Rotation, keine Opacity-Animationen.
 * Sonst sehen Mobile-Nutzer nie den Tile-Text.
 * ------------------------------------------------------------------ */
@media (hover: none) {
    .hg-t1 .hg-tile.hg-icon .hg-tile-word,
    .hg-t1 .hg-sub .hg-tile-word {
        opacity: 1;
    }

    .hg-t1 .hg-tile.hg-icon:hover .hg-icon-wrap i,
    .hg-t1 .hg-sub:hover .hg-icon-wrap i {
        transform: none;
        opacity: 1;
    }

    .hg-t1 .hg-tile.hg-icon:hover .hg-tile-word,
    .hg-t1 .hg-sub:hover .hg-tile-word {
        opacity: 1;
    }

    .hg-t1 .hg-tile.hg-icon:hover .hg-icon-label,
    .hg-t1 .hg-sub:hover .hg-icon-label {
        opacity: 0;
    }
}

.hg-grid a {
    text-decoration: none;
}