/**
 * Standort-Hero
 *
 * Dunkler Kopfbereich der Standort-Detailseiten: Ortsname als riesiges
 * Wasserzeichen, Eyebrow, Titel, Fließtext und Häkchenliste links,
 * Standortfoto rechts mit diagonal geschnittener Kante.
 *
 * Farben, Größen und Typografie kommen aus den Elementor-Controls —
 * hier steht nur Struktur und was sich nicht sinnvoll steuern lässt.
 * Die Diagonale liegt als CSS-Variablen --slant-top / --slant-bottom
 * am Wurzelelement, weil Bild, Keil und Farbfläche denselben Wert brauchen.
 */

.bew-loc-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;

    /* Fallbacks – die Controls überschreiben sie am selben Element. */
    --slant-top: 56%;
    --slant-bottom: 40%;
}

/* =========================================
   HINTERGRUND
   ========================================= */

.bew-loc-hero__bg,
.bew-loc-hero__bgimg,
.bew-loc-hero__pattern,
.bew-loc-hero__wedge,
.bew-loc-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

/* Hintergrundfoto zwischen Farbfläche und Liniengitter. Es liegt über dem
   Navy und wird über seine Deckkraft davon „überdeckt" – deshalb kein
   background-image auf __bg, dort säße es unter der Farbe und wäre weg.
   Bild-URL kommt inline aus dem Widget, alles andere aus den Controls. */
.bew-loc-hero__bgimg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0.25;
}

/* Feines Liniengitter, nach rechts oben auslaufend. Kein Kind von __bg,
   sonst müsste jede Farbänderung die Deckkraft mitdenken. */
.bew-loc-hero__pattern {
    /* Ohne eigene Farbe würde currentColor die Textfarbe erben und das
       Raster hell aufblitzen lassen – deshalb hier transparent. */
    color: transparent;
    background-image: repeating-linear-gradient(
        115deg,
        currentColor 0,
        currentColor 1px,
        transparent 1px,
        transparent 46px
    );
    -webkit-mask-image: radial-gradient(120% 95% at 0% 100%, #000 0%, transparent 72%);
    mask-image: radial-gradient(120% 95% at 0% 100%, #000 0%, transparent 72%);
}

/* Aufgehellter Keil unmittelbar links neben der Bildkante – gibt dem
   Schnitt Tiefe, statt Bild hart auf Navy treffen zu lassen. */
.bew-loc-hero__wedge {
    -webkit-clip-path: polygon(
        calc(var(--slant-top) - 9%) 0,
        var(--slant-top) 0,
        var(--slant-bottom) 100%,
        calc(var(--slant-bottom) - 9%) 100%
    );
    clip-path: polygon(
        calc(var(--slant-top) - 9%) 0,
        var(--slant-top) 0,
        var(--slant-bottom) 100%,
        calc(var(--slant-bottom) - 9%) 100%
    );
}

/* =========================================
   BILD
   ========================================= */

.bew-loc-hero__media {
    left: auto;
    width: 100%;
    -webkit-clip-path: polygon(var(--slant-top) 0, 100% 0, 100% 100%, var(--slant-bottom) 100%);
    clip-path: polygon(var(--slant-top) 0, 100% 0, 100% 100%, var(--slant-bottom) 100%);
}

/* Schleier über dem Foto – Farbe kommt aus dem Control, ohne sie bleibt
   die Fläche transparent. Innerhalb von __media, damit der Clip-Path
   die Diagonale auch für den Schleier schneidet. */
.bew-loc-hero__media::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Das Bild füllt nicht die ganze Hero-Breite, sondern nur einen Streifen
   rechts — sonst müsste `cover` das Foto auf 1440 px hochrechnen, obwohl
   davon am Ende nur ein Viertel sichtbar ist. So bleibt es nahezu in
   Originalgröße und wird lediglich beschnitten.

   Das Video steht hier neben dem Bild und nicht in einer eigenen Regel:
   es füllt denselben Streifen, wird von derselben Maske beschnitten und
   trägt denselben Schleier. Ein Unterschied bliebe sonst genau dort
   hängen, wo keiner sein soll. */
.bew-loc-hero__media img,
.bew-loc-hero__media video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: var(--media-width, 40%);
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-width: none;
}

/* Der Kasten reicht keine Klicks durch – über ihm liegt nichts, was
   angeklickt werden könnte. Ein Video mit Steuerung schon: es holt sich
   die Klicks hier einzeln zurück. */
.bew-loc-hero__media video[controls] {
    pointer-events: auto;
}

/* =========================================
   BILD MIT WEICHEM VERLAUF  (media_style = fade)

   Kein Schnitt, keine Kante: das Foto läuft über eine Maske in die
   Navy-Fläche aus, das Blau liegt also im Bild statt daneben. Damit
   entfällt auch der aufgehellte Keil — er saß nur da, um die harte Kante
   abzufedern.

   Die Neigung steckt im Winkel des Maskenverlaufs und ist ein echter
   Winkel: sie bleibt in jeder Fensterbreite gleich. Die Schnittvariante
   kann das nicht, ihre beiden Prozentwerte kippen die Diagonale mit dem
   Fenster. 107° ist die Neigung, die die Schnittvariante auf einem rund
   1600 px breiten Fenster hatte (76 % oben, 64 % unten auf 640 px Höhe).

   Die Maske hängt am vollflächigen Kasten, nicht am Foto. Der Bildstreifen
   (--media-width) muss deshalb links über den Beginn des Verlaufs
   hinausreichen, sonst bricht das Foto dort hart ab, wo es endet.
   ========================================= */

.bew-loc-hero--fade,
.bew-loc-hero--mosaic {
    /* Fallbacks – die Controls überschreiben sie am selben Element.
       69 % sind auf halber Höhe rund 71 % der Breite. Oben streift der
       Übergang damit das rechte Ende der Navigation; genau durch das Wort
       „Karriere" liefe er bei 65 %, das gäbe aber zu viel Bild. */
    --fade-angle: 107deg;
    --fade-mid: 69%;
    --fade-soft: 22%;

    /* Anfang der Rampe und ein Achtel ihrer Länge – die Farbstopps unten
       zählen davon hoch, statt neunmal dieselbe Rechnung zu wiederholen. */
    --fade-from: calc(var(--fade-mid) - var(--fade-soft) / 2);
    --fade-step: calc(var(--fade-soft) / 8);
}

/*
 * Zwei Farbstopps ergäben eine lineare Rampe, und die hat an beiden Enden
 * einen Knick: dort, wo das Bild einsetzt, und dort, wo es voll deckt.
 * Auf hellen Motiven liest sich vor allem der erste als harte Kante, obwohl
 * der Verlauf breit ist. Die Stufen unten sind deshalb eine Smoothstep-Kurve
 * (3t² − 2t³) über acht Schritte: sie beginnt und endet mit Steigung null,
 * das Bild schält sich aus der Fläche heraus, statt anzuspringen.
 */
.bew-loc-hero--fade .bew-loc-hero__media {
    -webkit-clip-path: none;
    clip-path: none;
    -webkit-mask-image: linear-gradient(
        var(--fade-angle),
        rgba(0, 0, 0, 0)     var(--fade-from),
        rgba(0, 0, 0, 0.041) calc(var(--fade-from) + 1 * var(--fade-step)),
        rgba(0, 0, 0, 0.156) calc(var(--fade-from) + 2 * var(--fade-step)),
        rgba(0, 0, 0, 0.316) calc(var(--fade-from) + 3 * var(--fade-step)),
        rgba(0, 0, 0, 0.5)   calc(var(--fade-from) + 4 * var(--fade-step)),
        rgba(0, 0, 0, 0.684) calc(var(--fade-from) + 5 * var(--fade-step)),
        rgba(0, 0, 0, 0.844) calc(var(--fade-from) + 6 * var(--fade-step)),
        rgba(0, 0, 0, 0.959) calc(var(--fade-from) + 7 * var(--fade-step)),
        rgba(0, 0, 0, 1)     calc(var(--fade-from) + 8 * var(--fade-step))
    );
    mask-image: linear-gradient(
        var(--fade-angle),
        rgba(0, 0, 0, 0)     var(--fade-from),
        rgba(0, 0, 0, 0.041) calc(var(--fade-from) + 1 * var(--fade-step)),
        rgba(0, 0, 0, 0.156) calc(var(--fade-from) + 2 * var(--fade-step)),
        rgba(0, 0, 0, 0.316) calc(var(--fade-from) + 3 * var(--fade-step)),
        rgba(0, 0, 0, 0.5)   calc(var(--fade-from) + 4 * var(--fade-step)),
        rgba(0, 0, 0, 0.684) calc(var(--fade-from) + 5 * var(--fade-step)),
        rgba(0, 0, 0, 0.844) calc(var(--fade-from) + 6 * var(--fade-step)),
        rgba(0, 0, 0, 0.959) calc(var(--fade-from) + 7 * var(--fade-step)),
        rgba(0, 0, 0, 1)     calc(var(--fade-from) + 8 * var(--fade-step))
    );
}

/* Abdunklung unter der Navigation. Sie sitzt im Schleier-Element und wird
   damit von derselben Maske beschnitten wie das Foto — links über der
   Farbfläche, wo die Navigation ohnehin steht, passiert also nichts.
   Die Höhe steckt in background-size statt in einem zweiten Farbstopp:
   so bleibt der Farbwert des Controls ein reiner Farbwert. */
.bew-loc-hero--fade .bew-loc-hero__media::after {
    background-image: linear-gradient(180deg, var(--top-shade, transparent) 0%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% var(--top-shade-height, 30%);
}

/* =========================================
   BILD ALS KARTE  (media_style = card)

   Die Karte liegt absolut im Hero, nicht im Inhaltsrahmen: nur so meinen
   die Controls genau das, was sie sagen — Abstand zur Ober- und Rechtskante
   der Navy-Fläche und Überstand unter ihre Unterkante. Damit der Überstand
   sichtbar wird, darf der Hero hier nicht clippen; Farbfläche und Liniengitter
   bleiben davon unberührt, weil sie eigene, auf den Hero gerechnete Kästen sind.
   ========================================= */

.bew-loc-hero--card {
    overflow: visible;
    /* Eigener Stapelkontext über dem folgenden Abschnitt: sonst deckt der
       alles zu, was hier unten übersteht – Bildkarte wie Hintergrundgrafik. */
    position: relative;
    z-index: 1;
    /* Fallbacks – die Controls überschreiben sie am selben Element. */
    --card-top: 118px;
    --card-right: 60px;
    --card-height: 520px;
    --card-width: 40;
    --inner-max-width: 1448px;
}

/*
 * Rechte Kante und Breite hängen am Inhaltsraster, nicht am Fenster: der
 * erste Summand ist der Rand, den der zentrierte Inhaltsrahmen auf breiten
 * Schirmen links und rechts frei lässt. So endet die Karte exakt dort, wo
 * auch die Abschnitte darunter enden.
 */
.bew-loc-hero--card .bew-loc-hero__media {
    top: var(--card-top);
    right: calc(max(0px, (100% - var(--inner-max-width)) / 2) + var(--card-right));
    bottom: auto;
    height: var(--card-height);
    left: auto;
    width: calc(min(100%, var(--inner-max-width)) * var(--card-width) / 100);
    overflow: hidden;
    -webkit-clip-path: none;
    clip-path: none;
    /* Sonst läge das überstehende Stück hinter dem folgenden Abschnitt. */
    z-index: 3;
}

.bew-loc-hero--card .bew-loc-hero__media img,
.bew-loc-hero--card .bew-loc-hero__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   BILDMOSAIK  (media_style = mosaic)

   Statt eines Fotos ein Raster aus mehreren Kacheln. Es füllt den Hero
   randlos und verschwindet nach links über dieselbe Maske wie die
   Verlaufsvariante: das Blau liegt also im Mosaik statt daneben, links
   bleibt Navy für den Text, rechts stehen die Bilder in voller Farbe.
   Deshalb erbt `--mosaic` denselben Satz `--fade-*` weiter oben.

   Die Fugen zwischen den Kacheln zeigen den Hintergrund darunter — dort
   scheint das Navy durch und hält das Raster zusammen.
   ========================================= */

.bew-loc-hero--mosaic {
    /* Fallbacks – die Controls überschreiben sie am selben Element. */
    --mosaic-left: 0;
    --mosaic-top: 0px;
    --mosaic-bottom: 0px;
    --mosaic-cols: 4;
    --mosaic-rows: 6;
    --mosaic-row-height: 46px;
}

/* Der äußere Kasten trägt Lage und Maske, das Raster darin nur die
   Kacheln: eine Maske auf dem Grid-Container selbst würde die Abdunklung
   für die Navigation zu einem weiteren Rasterfeld machen. */
.bew-loc-hero__mosaic {
    position: absolute;
    top: var(--mosaic-top);
    right: 0;
    bottom: var(--mosaic-bottom);
    left: calc(1% * var(--mosaic-left));
    pointer-events: none;
}

.bew-loc-hero__mosaic-grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(var(--mosaic-cols, 4), minmax(0, 1fr));
    grid-template-rows: repeat(var(--mosaic-rows, 6), minmax(0, 1fr));
    /* Lücken auffüllen, damit eine hohe Kachel keine leere Zelle hinterlässt. */
    grid-auto-flow: row dense;
    gap: 6px;
}

/* Abdunklung unter der Navigation – dieselbe Aufgabe wie bei der
   Verlaufsvariante, nur liegt sie hier über dem Raster statt im Foto.
   Sie sitzt innerhalb der Maske und verschwindet links also mit. */
.bew-loc-hero__mosaic-shade {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--top-shade-height, 30%);
    background-image: linear-gradient(180deg, var(--top-shade, transparent) 0%, transparent 100%);
}

/* Größe und Lage stehen als Variablen am Element. `auto` als Vorgabe für
   Spalte und Zeile heißt: der Browser platziert selbst — genau das, was
   eine Kachel ohne Startpunkt bekommen soll. */
.bew-loc-hero__tile {
    position: relative;
    overflow: hidden;
    grid-column: var(--tile-col, auto) / span var(--tile-x, 1);
    grid-row: var(--tile-row, auto) / span var(--tile-y, 1);
    /* Ohne das sprengen große Motive im Raster ihre Zelle. */
    min-width: 0;
    min-height: 0;
}

.bew-loc-hero__tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--tile-position, center center);
    max-width: none;
}

/* Schleier je Kachel statt einer Fläche über dem ganzen Raster: so bleiben
   die Fugen zwischen den Bildern frei und zeigen weiter das Navy. */
.bew-loc-hero__tile::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

/* Dieselbe Smoothstep-Rampe wie bei der Verlaufsvariante, nur trägt sie
   hier das ganze Mosaik statt eines Fotos. Die Stufen stehen ein zweites
   Mal da, weil CSS keinen benannten Verlauf kennt, den sich zwei Regeln
   teilen könnten — die Werte selbst kommen aus denselben Variablen. */
.bew-loc-hero--mosaic .bew-loc-hero__mosaic {
    -webkit-mask-image: linear-gradient(
        var(--fade-angle),
        rgba(0, 0, 0, 0)     var(--fade-from),
        rgba(0, 0, 0, 0.041) calc(var(--fade-from) + 1 * var(--fade-step)),
        rgba(0, 0, 0, 0.156) calc(var(--fade-from) + 2 * var(--fade-step)),
        rgba(0, 0, 0, 0.316) calc(var(--fade-from) + 3 * var(--fade-step)),
        rgba(0, 0, 0, 0.5)   calc(var(--fade-from) + 4 * var(--fade-step)),
        rgba(0, 0, 0, 0.684) calc(var(--fade-from) + 5 * var(--fade-step)),
        rgba(0, 0, 0, 0.844) calc(var(--fade-from) + 6 * var(--fade-step)),
        rgba(0, 0, 0, 0.959) calc(var(--fade-from) + 7 * var(--fade-step)),
        rgba(0, 0, 0, 1)     calc(var(--fade-from) + 8 * var(--fade-step))
    );
    mask-image: linear-gradient(
        var(--fade-angle),
        rgba(0, 0, 0, 0)     var(--fade-from),
        rgba(0, 0, 0, 0.041) calc(var(--fade-from) + 1 * var(--fade-step)),
        rgba(0, 0, 0, 0.156) calc(var(--fade-from) + 2 * var(--fade-step)),
        rgba(0, 0, 0, 0.316) calc(var(--fade-from) + 3 * var(--fade-step)),
        rgba(0, 0, 0, 0.5)   calc(var(--fade-from) + 4 * var(--fade-step)),
        rgba(0, 0, 0, 0.684) calc(var(--fade-from) + 5 * var(--fade-step)),
        rgba(0, 0, 0, 0.844) calc(var(--fade-from) + 6 * var(--fade-step)),
        rgba(0, 0, 0, 0.959) calc(var(--fade-from) + 7 * var(--fade-step)),
        rgba(0, 0, 0, 1)     calc(var(--fade-from) + 8 * var(--fade-step))
    );
}

/* =========================================
   INHALT
   ========================================= */

.bew-loc-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Ortsname als Wasserzeichen. Absolut, damit er den Textfluss nicht
   verschiebt, und mit eigener Zeilenhöhe, weil die Versalien sonst
   oben abgeschnitten wirken. */
.bew-loc-hero__watermark {
    position: absolute;
    z-index: -1;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.02em;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Dekorative Hintergrundgrafik. Sitzt im __inner, damit sich Breite und
   Versatz auf den Inhaltsrahmen beziehen und nicht auf die volle Hero-
   Breite. z-index -2 hält sie hinter Text und Wasserzeichen — weil __inner
   einen eigenen Stapelkontext aufmacht, bleibt sie trotzdem über der
   Farbfläche. Größe, Lage und Optik kommen aus den Controls. */
.bew-loc-hero__graphic {
    position: absolute;
    z-index: -2;
    display: block;
    line-height: 0;
    /* Beide Werte kommen aus den Controls und teilen sich eine Eigenschaft. */
    filter: grayscale(var(--graphic-grayscale, 0%)) blur(var(--graphic-blur, 0px));
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.bew-loc-hero__graphic img {
    display: block;
    width: 100%;
    height: auto;
    /* Ohne das deckelt die Theme-Regel für img die Grafik bei 100 % des
       Inhaltsrahmens – die Breite aus dem Control liefe dann ins Leere. */
    max-width: none;
}

.bew-loc-hero__content {
    position: relative;
    z-index: 1;
}

.bew-loc-hero__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.bew-loc-hero__title {
    margin: 0;
    line-height: 1.05;
}

.bew-loc-hero__text {
    margin: 0;
}

.bew-loc-hero__text p {
    margin: 0;
}

.bew-loc-hero__text p + p {
    margin-top: 0.6em;
}

/* =========================================
   HÄKCHENLISTE
   ========================================= */

.bew-loc-hero__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bew-loc-hero__item {
    display: flex;
    align-items: flex-start;
}

.bew-loc-hero__check {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    line-height: 0;
    /* Häkchen an die erste Textzeile ausrichten, nicht an die Kastenmitte. */
    margin-top: 0.15em;
}

.bew-loc-hero__check svg {
    display: block;
    width: 100%;
    height: auto;
}

.bew-loc-hero__item-text {
    display: block;
}

/* =========================================
   RESPONSIVE
   Unter 768 px wird gestapelt: erst Text auf Navy, darunter das Foto
   in voller Breite mit nur noch angedeuteter Schräge.
   ========================================= */

@media (max-width: 767px) {
    .bew-loc-hero {
        display: block;
    }

    .bew-loc-hero__media {
        position: relative;
        left: 0;
        height: auto;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 34px));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 34px));
    }

    /* Gestapelt liegt das Foto unter dem Text, nicht daneben – die Diagonale
       hätte hier nichts mehr, wogegen sie schneiden könnte. Der Verlauf
       kippt deshalb in die Senkrechte und blendet die Oberkante des Fotos
       in die Navy-Fläche darüber aus. */
    .bew-loc-hero--fade .bew-loc-hero__media {
        -webkit-clip-path: none;
        clip-path: none;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-stack, 18%));
        mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-stack, 18%));
    }

    /* Gestapelt wird das Foto vollständig gezeigt. Jeder feste Streifen
       schneidet es blind zu: die Aufnahmen sind Gebäude aus der Froschperspektive,
       mal steht das Haus oben im Bild, mal unten. */
    .bew-loc-hero__media img,
    .bew-loc-hero__media video {
        position: static;
        width: 100%;
        height: auto;
        object-fit: initial;
    }

    /* Sehr breite Motive schrumpfen gestapelt zum Streifen. Mit gesetzter
       Höhe füllt das Bild sie und wird stattdessen beschnitten. */
    .bew-loc-hero--stack-fixed .bew-loc-hero__media img,
    .bew-loc-hero--stack-fixed .bew-loc-hero__media video {
        height: var(--media-stack-height);
        object-fit: cover;
    }

    /* Gestapelt gibt es keinen Überstand mehr — die Karte rutscht in den
       Fluss unter den Text und behält nur ihre Ecken und den Schatten. */
    .bew-loc-hero--card .bew-loc-hero__media {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: auto;
        /* Gestapelt bestimmt das Bild die Höhe, nicht die Karte. */
        height: auto;
        margin: 0 24px 40px;
    }

    .bew-loc-hero--card .bew-loc-hero__media img,
    .bew-loc-hero--card .bew-loc-hero__media video {
        position: static;
        height: var(--card-mobile-height, 260px);
    }

    /* Gestapelt rutscht das Mosaik in den Fluss unter den Text und läuft
       über die volle Breite. Die Kachelgrößen bleiben — sie sind der
       Punkt des Mosaiks. Nur die Zeilen bekommen eine feste Höhe statt
       eines Anteils: im Fluss gäbe es keine Höhe, die sich teilen ließe. */
    .bew-loc-hero--mosaic .bew-loc-hero__mosaic {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        /* Die schräge Maske trennt gestapelt nichts mehr voneinander –
           stattdessen blendet die Oberkante in die Fläche darüber aus,
           genau wie beim Foto der Verlaufsvariante. */
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-stack, 18%));
        mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-stack, 18%));
    }

    /* Im Fluss statt absolut: sonst hätte der Kasten darüber keine Höhe. */
    .bew-loc-hero--mosaic .bew-loc-hero__mosaic-grid {
        position: relative;
        grid-template-rows: none;
        grid-auto-rows: var(--mosaic-row-height, 46px);
    }

    /* Die Startpunkte gelten für das breite Raster und zeigen gestapelt ins
       Leere – bei zwei Spalten säßen alle Kacheln übereinander in Spalte 1.
       Die Höhen bleiben, sie machen das Mosaik aus; die Breite fällt auf
       eine Spalte, sonst nähme jede Kachel die ganze Zeile ein. */
    .bew-loc-hero--mosaic .bew-loc-hero__tile {
        grid-column: auto / span 1;
        grid-row: auto / span var(--tile-y, 1);
    }

    .bew-loc-hero__tile--hide-mobile {
        display: none;
    }

    /* Über der Wortmarke bliebe vom Wasserzeichen nur Unruhe. */
    .bew-loc-hero--wm-hide-mobile .bew-loc-hero__watermark {
        display: none;
    }

    .bew-loc-hero--graphic-hide-mobile .bew-loc-hero__graphic {
        display: none;
    }

    .bew-loc-hero__wedge {
        display: none;
    }

    .bew-loc-hero__watermark {
        max-width: 100%;
        overflow: hidden;
    }
}