/* HTML: <div class="wrap"><div class="grid"> ...25 Kacheln... </div></div> */
/* Kachel 0 = :nth-child(1), Kachel 6 = :nth-child(7), Kachel 24 = :nth-child(25), sitzt fest unten rechts */
:root{
    color-scheme:light;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px)
}

html{
    scroll-padding-top:env(safe-area-inset-top,0px)
}

body{
    margin:0;
    padding:0;
}

img{
    max-width:100%
}

[hidden]:not([hidden=until-found i]){
    display:none!important
}

.tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.t-hero {

}

.wrap {
    container-type: inline-size;
    width: 100%;
    margin: 0 auto;
}
.grid {
    --c: 1;
    --gap: 8px;
    display: grid;
    gap: var(--gap);
    grid-auto-flow: dense;
    grid-template-columns: repeat(var(--c), 1fr);
    grid-auto-rows: calc((100cqw - (var(--c) - 1) * var(--gap)) / var(--c));
}

/* 1 Spalte */

/* 2 Spalten, 18 Zeilen */
@container (min-width: 268px) {
    .grid { --c: 2; }
    .grid > * { grid-area: auto; }
    .grid > :nth-child(1), .grid > :nth-child(7) { grid-area: span 2 / span 2; }
    .grid > :nth-child(5), .grid > :nth-child(14) { grid-column: span 2; }
    .grid > :nth-child(25) { grid-area: 17 / 1 / span 2 / span 2; }
}

/* 3 Spalten, 14 Zeilen */
@container (min-width: 406px) {
    .grid { --c: 3; }
    .grid > * { grid-area: auto; }
    .grid > :nth-child(1) { grid-area: span 3 / span 3; }
    .grid > :nth-child(5), .grid > :nth-child(14), .grid > :nth-child(22) { grid-column: span 2; }
    .grid > :nth-child(7) { grid-area: span 2 / span 2; }
    .grid > :nth-child(25) { grid-area: 13 / 2 / span 2 / span 2; }
}

/* 4 Spalten, 12 Zeilen */
@container (min-width: 544px) {
    .grid { --c: 4; }
    .grid > * { grid-area: auto; }
    .grid > :nth-child(1) { grid-area: span 4 / span 4; }
    .grid > :nth-child(5), .grid > :nth-child(14) { grid-column: span 2; }
    .grid > :nth-child(7) { grid-area: span 2 / span 2; }
    .grid > :nth-child(25) { grid-area: 11 / 3 / span 2 / span 2; }
}

/* 5 Spalten, 9 Zeilen */
@container (min-width: 682px) {
    .grid { --c: 5; }
    .grid > * { grid-area: auto; }
    .grid > :nth-child(1) { grid-area: span 4 / span 4; }
    .grid > :nth-child(5), .grid > :nth-child(7) { grid-column: span 2; }
    .grid > :nth-child(25) { grid-area: 8 / 4 / span 2 / span 2; }
}

/* 6 Spalten, 8 Zeilen */
@container (min-width: 820px) {
    .grid { --c: 6; }
    .grid > * { grid-area: auto; }
    .grid > :nth-child(1) { grid-area: span 4 / span 4; }
    .grid > :nth-child(5), .grid > :nth-child(14) { grid-column: span 2; }
    .grid > :nth-child(7) { grid-area: span 2 / span 2; }
    .grid > :nth-child(25) { grid-area: 7 / 5 / span 2 / span 2; }
}

/* 7 Spalten, 7 Zeilen */
@container (min-width: 958px) {
    .grid { --c: 7; }
    .grid > * { grid-area: auto; }
    .grid > :nth-child(1) { grid-area: span 4 / span 4; }
    .grid > :nth-child(5), .grid > :nth-child(14), .grid > :nth-child(22) { grid-column: span 2; }
    .grid > :nth-child(7) { grid-area: span 2 / span 2; }
    .grid > :nth-child(25) { grid-area: 6 / 6 / span 2 / span 2; }
}

/* 8 Spalten, 6 Zeilen */
@container (min-width: 1096px) {
    .grid { --c: 8; }
    .grid > * { grid-area: auto; }
    .grid > :nth-child(1) { grid-area: span 4 / span 4; }
    .grid > :nth-child(5), .grid > :nth-child(14) { grid-column: span 2; }
    .grid > :nth-child(7) { grid-area: span 2 / span 2; }
    .grid > :nth-child(25) { grid-area: 5 / 7 / span 2 / span 2; }
}

/* 9 Spalten, 5 Zeilen */
@container (min-width: 1234px) {
    .grid { --c: 9; }
    .grid > * { grid-area: auto; }
    .grid > :nth-child(1) { grid-area: span 4 / span 4; }
    .grid > :nth-child(5), .grid > :nth-child(7) { grid-column: span 2; }
    .grid > :nth-child(25) { grid-area: 4 / 8 / span 2 / span 2; }
}

/* 10 Spalten, 5 Zeilen */
@container (min-width: 1372px) {
    .grid { --c: 10; }
    .grid > * { grid-area: auto; }
    .grid > :nth-child(1) { grid-area: span 4 / span 4; }
    .grid > :nth-child(5), .grid > :nth-child(14) { grid-column: span 2; }
    .grid > :nth-child(7) { grid-area: span 2 / span 2; }
    .grid > :nth-child(25) { grid-area: 3 / 9 / span 3 / span 2; }
}