/* root/css/style.css */

body {
    display: grid;
    height: 100vh;
    margin: 0;
}

.main-container {
    display: grid;
    grid-template-columns: 1fr 8px 1fr; 
    height: 100%;
}

.col-left, .col-right {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
}

.divider {
    background: black;
    width: 8px;
    height: 100%;
}

/* Fælles indstilling for hovedindhold */
.col-left .main-content, .col-right .main-content {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.3);
    background-blend-mode: overlay;
}

.col-left .main-content { background-image: url('../img/bg-privat.jpg'); }
.col-right .main-content { background-image: url('../img/bg-wolfstone.jpg'); }

/* Fælles knap-indstillinger */
.knap {
    padding: 10px 20px;
    text-align: center;
    border: 5px solid black;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.knap:hover {
    filter: brightness(1.2);
}

/* Specifikke knap-indstillinger (Her definerer vi ALT for knapperne ét sted) */
.col-left .knap {
    background-image: url('../img/bg-privatbt.jpg');
    background-size: cover;
    border-right: none !important; /* Åbner mod midten */
}

.col-right .knap {
    background-image: url('../img/bg-stone.jpg');
    background-size: cover;
    border-left: none !important; /* Åbner mod midten */
}