/* =============================
   VARIABLEN
============================= */
:root {
    --field: calc(100vh / 10); /* Dynamische Feldgröße: 1/10 der Viewport-Höhe */
    --border: 1px;            /* Linien-Stärke im Hintergrundraster */
}


/* =============================
   RESET / GRUNDSTIL
============================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100vh;       /* Volle Höhe des Browserfensters */
    font-family: sans-serif;
}

img,
video {
    width: 100%;
}


/* =============================
   HINTERGRUND-GRID
============================= */



/* =============================
   OPTIONAL: .grid-lines (kann leer bleiben)
============================= */
.grid-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    background:
        conic-gradient(
            from 90deg at var(--border) var(--border),
            #0000 25%,
            #000 0
        )
        calc( ( 100vw - (var(--field) * 8 ) ) / 2 ) 0/var(--field) var(--field)
}

/* =============================
   SCHACHBRETT
============================= */
.schachbrett-wrapper {
    background: rgb(255, 255, 255);
    width: calc(8 * var(--field));
    height: calc(8 * var(--field));
    position: relative;
    top: var(--field);
    left: 50%;
    transform: translateX(-50%);
}

.schachbrett {
    display: grid;
    position: relative;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(8, var(--field));
    grid-template-rows: repeat(8, var(--field));
    z-index: 1;         /* Gitter liegt unten */
    background:
        repeating-conic-gradient(#d0d0d0 0 25%, transparent 0 50%)
        0% / calc(2 * var(--field)) calc(2 * var(--field));


}


/* Meine Asselklassen */

.assel {
    position: absolute;
    top: calc(var(--y-start, 4) * var(--field));
    left: calc(var(--x-start, 0) * var(--field));
    width: var(--field);
    height: var(--field);

  }


.assel img {
    width: var(--field);
    height: var(--field);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    
  }


/* =============================
   HIDDEN CLASS
============================= */

.hidden {
    opacity: 0; /* Figur wird unsichtbar */
    transition: opacity 1s ease; /* Fading-Effekt nur hier definieren */
    /* visibility: hidden;  Entfernen, damit der Platz eingenommen bleibt */
}

/* KING */
.king_bright {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s king_bright linear;
    animation-fill-mode: forwards;
}

@keyframes king_bright {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}


.king_dark {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s king_dark linear;
    animation-fill-mode: forwards;
}

@keyframes king_dark {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

/* QUEEN */
.queen_bright {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s queen_bright linear;
    animation-fill-mode: forwards;
    z-index: 9995;
}

@keyframes queen_bright {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}


.queen_dark {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s queen_dark linear;
    animation-fill-mode: forwards;
    z-index: 9999;
}

@keyframes queen_dark {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

/* TUERME */ 

/* TURM WEISS 1 */ 
.turm_bright_1 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s turm_bright_1 linear;
    animation-fill-mode: forwards;
}

@keyframes turm_bright_1 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}
/* TURM WEISS 2 */ 
.turm_bright_2 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s turm_bright_2 linear;
    animation-fill-mode: forwards;
}

@keyframes turm_bright_2 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

/* TURM SCHWARZ 1 */ 
.turm_dark_1 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s turm_dark_1 linear;
    animation-fill-mode: forwards;
    z-index: 9999;
}

@keyframes turm_dark_1 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}
/* TURM SCHWARZ 2 */ 
.turm_dark_2 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s turm_dark_2 linear;
    animation-fill-mode: forwards;
}

@keyframes turm_dark_2 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

/* SPRINGER */ 

/* SPRINGER WEISS 1 */ 
.springer_bright_1 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s springer_bright_1 linear;
    animation-fill-mode: forwards;
    z-index: 9996;
}

@keyframes springer_bright_1 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}
/* SPRINGER WEISS 2 */ 
.springer_bright_2 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s springer_bright_2 linear;
    animation-fill-mode: forwards;
    z-index: 9997
}

@keyframes springer_bright_2 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

/* SPRINGER SCHWARZ 1 */ 
.springer_dark_1 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s springer_dark_1 linear;
    animation-fill-mode: forwards;
}

@keyframes springer_dark_1 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}
/* SPRINGER SCHWARZ 2 */ 
.springer_dark_2 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s springer_dark_2 linear;
    animation-fill-mode: forwards;
    z-index: 9999
}

@keyframes springer_dark_2 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}


/* LÄUFER */ 

/*  LÄUFER WEISS 1 */ 
.runner_bright_1 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s runner_bright_1 linear;
    animation-fill-mode: forwards;
    z-index: 9993;
}

@keyframes runner_bright_1 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}
/* LÄUFER WEISS 2 */ 
.runner_bright_2 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s runner_bright_2 linear;
    animation-fill-mode: forwards;
    z-index: 9993;
}

@keyframes runner_bright_2 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

/* LÄUFER SCHWARZ 1 */ 
.runner_dark_1 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s runner_dark_1 linear;
    animation-fill-mode: forwards;
    z-index: 9994;
}

@keyframes runner_dark_1 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}
/* ÄUFER SCHWARZ 2 */ 
.runner_dark_2 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s runner_dark_2 linear;
    animation-fill-mode: forwards;
    z-index: 9996;
}

@keyframes runner_dark_2 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

/* BAUERN */ 

/* BAUER WEISS 8 */ 
.bauer_bright_1 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_bright_1 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_bright_1 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_bright_2 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_bright_2 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_bright_2 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_bright_3 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_bright_3 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_bright_3 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_bright_4 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_bright_4 linear;
    animation-fill-mode: forwards;
    z-index: 9991;
}

@keyframes bauer_bright_4 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_bright_5 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_bright_5 linear;
    animation-fill-mode: forwards;
    z-index: 9991;
}

@keyframes bauer_bright_5 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}


.bauer_bright_6 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_bright_6 linear;
    animation-fill-mode: forwards;
    z-index: 9990;
}


@keyframes bauer_bright_6 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_bright_7 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_bright_7 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_bright_7 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_bright_8 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_bright_8 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_bright_8 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}


/* BAUER SCHWARZ 8 */ 
.bauer_dark_1 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_dark_1 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_dark_1 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_dark_2 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bbauer_dark_2 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_dark_2 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_dark_3 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_dark_3 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_dark_3 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_dark_4 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_dark_4 linear;
    animation-fill-mode: forwards;
    z-index: 9992;
}

@keyframes bauer_dark_4 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_dark_5 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_dark_5 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_dark_5 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}


.bauer_dark_6 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_dark_6 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_dark_6 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_dark_7 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_dark_7 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_dark_7 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}

.bauer_dark_8 {
    left: calc( var( --x-start ) * var(--field) );
    top: calc( var( --y-start ) * var(--field) );
    animation: 1s bauer_dark_8 linear;
    animation-fill-mode: forwards;
}

@keyframes bauer_dark_8 {
    100% {
        left: calc( var( --x-end ) * var(--field) );
        top: calc( var( --y-end ) * var(--field) );
    }
}


@media (max-width: 480px) {
    :root {
      --field: calc(100vw / 8);
    }
  
    .schachbrett-wrapper {
      top: 10px;
      width: 100vw;
      height: 100vw;
    }
  
    .assel {
      min-width: 40px;
      min-height: 40px;
    }
}
.button {

        position: fixed;
        bottom: -60px;
        left: 20px;
        color: #6a6a6a;
        font-family: 'MeineFont', Arial, sans-serif;
        font-size: 16px;
        padding: 6px 8px;
        border-radius: 8px;
        backdrop-filter: blur(5px);
        white-space: nowrap;
        text-decoration: none;
}