@charset "UTF-8";
:root{
    /* Grundfarben */
    --white: #ffffff;
    --black: #000000;
    --hellgrau: #f6f6f6;
    --darkgrey: #333333;
    --shadow: #000;

    /* Transparente Overlays */
    --overlay-dark: rgba(0,0,0,0.6);
    --overlay-light: rgba(255,255,255,0.6);

    /* Brand / Accent */
    --violett: #5b00b7;
    --violett-dark: #2a0058;
    --violett-light: #c1a0de;
    --neon-green: #6af999;

    /* Pixel-System */
    --px: 6px;          /* globale Pixelgröße */
    --px-shadow: 6px;   /* Standard-Shadow-Offset */
}



html {
    scroll-behavior: smooth;           /* optional: weiches Scrollen */
    scroll-padding-top: 140px;          /* Höhe der fixen Navbar */
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    background-color: var(--white);
    color: var(--darkgrey);

    background-image: url("/skin/frontend/img/bg_clouds.jpg");
    background-repeat: repeat-y;

    background-attachment: fixed;

    /* WICHTIG: immer oben */
    background-position: left top;
    background-size: 112% auto;

    animation: bg-pan-horizontal 20s ease-in-out infinite alternate;
    will-change: background-position;
}


.jersey {
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
}

strong {
    font-weight: 700;
}

section {
    padding: 2em 0;
}


.navabstand {
    margin-top: 3.8em;
}

@media (min-width: 1400px) {
    section {
        padding: 4em 0;
    }
}



h1, h2, h3, h4, h5 {
    line-height: 1 !important;
}



.text_violett{
    color: var(--violett);
}



.bg_white{
    --fill: var(--white);
}

.bg_black{
    --fill: var(--black);
}

.bg_hellgrau{
    --fill: var(--hellgrau);
}

.bg_darkgrey{
    --fill: var(--darkgrey);
}

/* Translucent / Glass */
.bg_transparent{
    --fill: var(--overlay-light);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.bg_violett{
    --fill: var(--violett);
}

.bg_violett_dark{
    --fill: var(--violett-dark);
}

.bg_violett_light{
    --fill: var(--violett-light);
}

.list-group, .list-group-item {
    background-color: transparent !important;
    color: inherit !important;
}


.bg_offcanvas {
    background-color: var(--violett);
    background-image: url("/skin/frontend/img/bg_offcanvas.jpg");
    background-repeat: no-repeat;

    /* WICHTIG: immer oben */
    background-position: left top;
    background-size: 112% auto;

    animation: bg-pan-horizontal 20s ease-in-out infinite alternate;
    will-change: background-position;
}


.pixelbox{
    /* aus dem Design-System */
    --p: var(--px);
    --s: var(--px-shadow);

    position: relative;
    z-index: 1;

    --shape: polygon(
            0 calc(2*var(--p)),
            var(--p) calc(2*var(--p)),
            var(--p) var(--p),
            calc(2*var(--p)) var(--p),
            calc(2*var(--p)) 0,
            calc(100% - 2*var(--p)) 0,
            calc(100% - 2*var(--p)) var(--p),
            calc(100% - var(--p)) var(--p),
            calc(100% - var(--p)) calc(2*var(--p)),
            100% calc(2*var(--p)),
            100% calc(100% - 2*var(--p)),
            calc(100% - var(--p)) calc(100% - 2*var(--p)),
            calc(100% - var(--p)) calc(100% - var(--p)),
            calc(100% - 2*var(--p)) calc(100% - var(--p)),
            calc(100% - 2*var(--p)) 100%,
            calc(2*var(--p)) 100%,
            calc(2*var(--p)) calc(100% - var(--p)),
            var(--p) calc(100% - var(--p)),
            var(--p) calc(100% - 2*var(--p)),
            0 calc(100% - 2*var(--p))
    );
}

/* sichtbare Fläche */
.pixelbox::after{
    content:"";
    position:absolute;
    inset:0;
    background: var(--fill, #111);
    clip-path: var(--shape);
    z-index:-1;
}

/* harter Pixel-Schatten */
.pixelbox::before{
    content:"";
    position:absolute;
    inset:0;
    transform: translate(var(--s), var(--s));
    background: var(--shadow, #000);
    clip-path: var(--shape);
    z-index:-2;
}



.pixelbutton{
    /* aus dem Design-System */
    --p: calc(var(--px) / 2);
    --s: var(--px-shadow);

    position: relative;
    z-index: 1;

    --shape: polygon(
            0 calc(2*var(--p)),
            var(--p) calc(2*var(--p)),
            var(--p) var(--p),
            calc(2*var(--p)) var(--p),
            calc(2*var(--p)) 0,
            calc(100% - 2*var(--p)) 0,
            calc(100% - 2*var(--p)) var(--p),
            calc(100% - var(--p)) var(--p),
            calc(100% - var(--p)) calc(2*var(--p)),
            100% calc(2*var(--p)),
            100% calc(100% - 2*var(--p)),
            calc(100% - var(--p)) calc(100% - 2*var(--p)),
            calc(100% - var(--p)) calc(100% - var(--p)),
            calc(100% - 2*var(--p)) calc(100% - var(--p)),
            calc(100% - 2*var(--p)) 100%,
            calc(2*var(--p)) 100%,
            calc(2*var(--p)) calc(100% - var(--p)),
            var(--p) calc(100% - var(--p)),
            var(--p) calc(100% - 2*var(--p)),
            0 calc(100% - 2*var(--p))
    );
}

/* sichtbare Fläche */
.pixelbutton::after{
    content:"";
    position:absolute;
    inset:0;
    background: var(--fill, #111);
    clip-path: var(--shape);
    z-index:-1;
}

/* harter Pixel-Schatten */
.pixelbutton::before{
    content:"";
    position:absolute;
    inset:0;
    transform: translate(var(--s), var(--s));
    background: var(--shadow, #000);
    clip-path: var(--shape);
    z-index:-2;
}



.neon-box {
    position: relative;
    padding: 24px;

    /* normaler Rahmen */
    border: 2px solid var(--neon-green);
}

/* Top-Stripes */
.neon-box::before {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    height: 24px;

    background:
            repeating-linear-gradient(
                    to bottom,
                    var(--neon-green) 0px,
                    var(--neon-green) 2px,
                    transparent 2px,
                    transparent 6px
            );

    pointer-events: none;
}


/* Pixel-Icons (skin/frontend/img/icons) in Kacheln/Störern */
.pixelicon {
    width: 50px; /* wie Kachel-Icons (navicons) */
    height: auto;
}

.pixelicon-sm {
    width: 40px;
    height: auto;
}


/* Listen in violetten Boxen */
.liste-violett li {
    border-bottom: 1px solid rgba(255,255,255,.3);
    padding: .5rem 0;
}

.liste-violett li:last-child {
    border-bottom: 0;
}