/* Werbebanner der Startseite und Vorschau im Banner-Editor der Verwaltung.
   Aufbau: src/Service/Banner.php (Shop) und assets/js/banner-editor.js (Editor).
   Schriften liegen selbst gehostet unter assets/fonts/banner (Lizenzen dort),
   geladen wird eine Schrift erst, wenn ein Banner sie benutzt. */

@font-face { font-family: 'BL Joystix'; src: url('../fonts/joystix.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL Press Start 2P'; src: url('../fonts/banner/press-start-2p.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL Silkscreen'; src: url('../fonts/banner/silkscreen-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL VT323'; src: url('../fonts/banner/vt323.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL Bungee'; src: url('../fonts/banner/bungee.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL Bungee Shade'; src: url('../fonts/banner/bungee-shade.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL Rubik Mono One'; src: url('../fonts/banner/rubik-mono-one.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL Luckiest Guy'; src: url('../fonts/banner/luckiest-guy.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL Bangers'; src: url('../fonts/banner/bangers.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL Righteous'; src: url('../fonts/banner/righteous.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BL Monoton'; src: url('../fonts/banner/monoton.woff2') format('woff2'); font-display: swap; }

/* Raster: 4 Spalten, am Handy 2. Ein Banner ist 1 bis 4 Spalten breit. */
.aktionsbanner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #131313;
}
.aktionsbanner .banner.s1 { grid-column: span 1; }
.aktionsbanner .banner.s2 { grid-column: span 2; }
.aktionsbanner .banner.s3 { grid-column: span 3; }
.aktionsbanner .banner.s4 { grid-column: span 4; }
@media (max-width: 860px) {
    .aktionsbanner { grid-template-columns: repeat(2, 1fr); }
    .aktionsbanner .banner.s1 { grid-column: span 1; }
    .aktionsbanner .banner.s2,
    .aktionsbanner .banner.s3,
    .aktionsbanner .banner.s4 { grid-column: span 2; }
}

.banner {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
    container-type: inline-size;   /* Schriftgroesse in cqw = Prozent der Bannerbreite */
    color: inherit;
    text-decoration: none;
}
.banner img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    padding: 1px;
    box-sizing: border-box;
}
a.banner:hover img {
    padding: 0;
    border: 1px solid transparent;
    border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
}

/* Textebene: Kontur (hinten) und Fuellung (vorne) liegen genau uebereinander */
.bt {
    position: absolute;
    display: block;
    white-space: pre-line;
    overflow-wrap: break-word;
    transform-origin: center center;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
}
.bt-k, .bt-f { display: block; }
.bt-k { position: absolute; left: 0; top: 0; width: 100%; }
.bt-k::before { content: attr(data-text); }
.bt-f { position: relative; }
.bt-v {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}