/* Basics */
#crossword-grid{
    margin-inline: auto;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(12, 4em);
    grid-template-rows: repeat(12, 4em);
    place-content: center;
    border: 2px solid black;
}

.crossword-cell{
    position: relative;
    display:flex;
    border: 1px solid black;
    background-color: #e0e0e0;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: x-large;
    font-weight: 500;
}

.crossword-cell:focus{
    background-color: rgb(235, 186, 151) !important;
    outline: -webkit-focus-ring-color auto 1px;
}

.crossword-cell.question{
    background-color: #ABD8EE;
    color: black;
    padding: .3em;
    font-size: .8em;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.crossword-cell.start{
    background-color: rgb(235, 186, 151);
}

.crossword-cell.aktiv{
    background-color: #6abfe9;
}

.crossword-cell:hover{
    background-color: aqua;
}

.crossword-cell.path-highlight {
    background-color: #bbbbbb;
}

/* Arrows */
.arrow {
    position: absolute;
    z-index: 100;
    display: inline-block;
    width: 25px;  /* Strichlänge anpassen */
    height: 2px;
    background: transparent;
}

.arrow::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;  /* Strich */
    transform-origin: left center;
}

.arrow::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;  /* Pfeilgröße */
}


/* Direction 0: Nach unten */
.arrow-down {
    left: 50%; bottom: -3%; transform: translateX(-50%);
}
.arrow-down::before {display: none;}
.arrow-down::after { border-top-color: black; top: 100%; left: 50%; transform: translateX(-50%); }

/* Direction 1: Unten-nach-Rechts */
.arrow-down-right {
    left: 0; bottom: -45%; transform: rotate(-90deg);
}
.arrow-down-right::after { border-top-color: black; top: 100%; left: 50%;}

/* Direction 2: Nach rechts */
.arrow-right {
    top: 50%; right: -63%; transform: translateY(-50%);
}
.arrow-right::before {display: none;}
.arrow-right::after { border-left-color: black; top: 50%; right: 100%; transform: translateY(-50%); }

/* Direction 3: Rechts-nach-unten*/
.arrow-right-down {
    top: 10%; right: -21%;
}
.arrow-right-down::after { border-top-color: black; top: 100%; right: -50%; }

/* Direction 4: Oben-rechts */
.arrow-up-right {
    left: 0; top: -45%; transform: rotate(90deg);
}
.arrow-up-right::after { border-bottom-color: black; bottom: 100%; left: 70%; transform: translateX(-50%); }

/* Direction 5: Links-nach-unten */
.arrow-left-down {
    top: 10%; left: -63%;
}
.arrow-left-down::after { border-top-color: black; top: 100%; right: 24%; transform: translateX(50%); }