/* Bootstrap Farbänderungen */
:root {
    --pana-grau-hell: rgba(178,178,178,1);
    --pana-grau-hell-80: rgba(178,178,178,0.8);
    --pana-grau-hell-60: rgba(178,178,178,0.6);
    --pana-grau-hell-40: rgba(178,178,178,0.4);
    --pana-grau-hell-20: rgba(178,178,178,0.2);
    --pana-grau: rgba(117,120,123,1);
    --pana-grau-80: rgba(117,120,123,0.8);
    --pana-grau-60: rgba(117,120,123,0.6);
    --pana-grau-40: rgba(117,120,123,0.4);
    --pana-grau-20: rgba(117,120,123,0.2);
    --pana-gelb: rgba(241,180,52,1);
    --pana-gelb-80: rgba(241,180,52,0.8);
    --pana-gelb-60: rgba(241,180,52,0.6);
    --pana-gelb-40: rgba(241,180,52,0.4);
    --pana-gelb-20: rgba(241,180,52,0.2);
    --pana-blau: rgba(0,168,186,1);
    --pana-blau-80: rgba(0,168,186,0.8);
    --pana-blau-60: rgba(0,168,186,0.6);
    --pana-blau-40: rgba(0,168,186,0.4);
    --pana-blau-20: rgba(0,168,186,0.2);
    --pana-rot: rgba(218,41,28,1);
    --pana-rot-80: rgba(218,41,28,0.8);
    --pana-rot-60: rgba(218,41,28,0.6);
    --pana-rot-40: rgba(218,41,28,0.4);
    --pana-rot-20: rgba(218,41,28,0.2);
    /*--pana-grau-nav: rgba(230,230,230,1);*/
    /*--pana-main: var(--pana-rot);
    --pana-main-80: var(--pana-rot-80);
    --pana-main-60: var(--pana-rot-60);
    --pana-main-40: var(--pana-rot-40);*/

    --pana-main: var(--pana-rot);
    --pana-main-80: var(--pana-rot-80);
    --pana-main-60: var(--pana-rot-60);
    --pana-main-40: var(--pana-rot-40);
}

.bg-pana-nav {
    /*background-color: var(--pana-gelb-40);*/
    background-color: var(--pana-grau-hell-40);
}

/*pana-gelb*/
.bg-pana-gelb {
    /*background-color: var(--pana-gelb);*/
    background-color: var(--pana-main);
}

.text-pana-gelb {
    /*color: var(--pana-gelb);*/
    color: var(--pana-main);
}

.hover-pana-gelb:hover {
    /*background-color: var(--pana-gelb);*/
    background-color: var(--pana-main);
}

.hover-pana-gelb > a {
    color: #fff !important;
}

.hover-pana-gelb > a {
    color: #000 !important;
}

.hover-pana-gelb > a:hover {
    color: #fff !important;
}

.aktiv-pana-gelb {
    /*background-color: var(--pana-gelb);*/
    background-color: var(--pana-main);
}

.aktiv-pana-gelb > a {
    color: #fff !important;
}
/*-------------------------*/

/*-Navigation-----*/
.nav-hover-pana > a {
    color: #000 !important;
}

    .nav-hover-pana > a:hover {
        color: #fff !important;
        background-color: var(--pana-main)
    }

.nav-aktiv-pana {
    background-color: var(--pana-main);
}

    .nav-aktiv-pana > a {
        color: #fff !important;
    }

/*----------------*/

/*pana-blau*/
.btn-pana-blau {
    color: #fff;
    background-color: var(--pana-blau);
    border-color: var(--pana-blau);
}

.btn-pana-blau:hover {
    color: #fff;
    background-color: var(--pana-blau-80);
    border-color: var(--pana-blau);
}

.btn-check:focus + .btn-pana-blau, .btn-pana-blau:focus {
    color: #fff;
    background-color: var(--pana-blau-80);
    border-color: var(--pana-blau-80);
    box-shadow: 0 0 0 0.25rem var(--pana-blau-60);
}

.btn-check:checked + .btn-pana-blau, .btn-check:active + .btn-pana-blau, .btn-pana-blau:active, .btn-pana-blau.active, .show > .btn-pana-blau.dropdown-toggle {
    color: #fff;
    background-color: var(--pana-blau-80);
    border-color: var(--pana-blau-80);
}

    .btn-check:checked + .btn-pana-blau:focus, .btn-check:active + .btn-pana-blau:focus, .btn-pana-blau:active:focus, .btn-pana-blau.active:focus, .show > .btn-pana-blau.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.25rem var(--pana-blau-60);
    }

.btn-pana-blau:disabled, .btn-pana-blau.disabled {
    color: #fff;
    background-color: var(--pana-blau-40);
    border-color: var(--pana-blau-40);
}
/*-------------------------*/

/*pana-danger (rot)*/
.btn-pana-danger {
    color: #fff;
    background-color: var(--pana-rot);
    border-color: var(--pana-rot);
}

.btn-pana-danger:hover {
    color: #fff;
    background-color: var(--pana-rot-80);
    border-color: var(--pana-rot);
}

.btn-check:focus + .btn-pana-danger, .btn-pana-danger:focus {
    color: #fff;
    background-color: var(--pana-rot-80);
    border-color: var(--pana-rot-80);
    box-shadow: 0 0 0 0.25rem var(--pana-rot-60);
}

.btn-check:checked + .btn-pana-danger, .btn-check:active + .btn-pana-danger, .btn-pana-danger:active, .btn-pana-danger.active, .show > .btn-pana-danger.dropdown-toggle {
    color: #fff;
    background-color: var(--pana-rot-80);
    border-color: var(--pana-rot-80);
}

    .btn-check:checked + .btn-pana-danger:focus, .btn-check:active + .btn-pana-danger:focus, .btn-pana-danger:active:focus, .btn-pana-danger.active:focus, .show > .btn-pana-danger.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.25rem var(--pana-rot-60);
    }

.btn-pana-danger:disabled, .btn-pana-danger.disabled {
    color: #fff;
    background-color: var(--pana-rot-40);
    border-color: var(--pana-rot-40);
}
/*-------------------------*/

/*pana-secondary (grau)*/
.btn-pana-secondary {
    color: #fff;
    background-color: var(--pana-grau);
    border-color: var(--pana-grau);
}

.btn-pana-secondary:hover {
    color: #fff;
    background-color: var(--pana-grau-80);
    border-color: var(--pana-grau);
}

.btn-check:focus + .btn-pana-secondary, .btn-pana-secondary:focus {
    color: #fff;
    background-color: var(--pana-grau-80);
    border-color: var(--pana-grau-80);
    box-shadow: 0 0 0 0.25rem var(--pana-grau-60);
}

.btn-check:checked + .btn-pana-secondary, .btn-check:active + .btn-pana-secondary, .btn-pana-secondary:active, .btn-pana-secondary.active, .show > .btn-pana-danger.dropdown-toggle {
    color: #fff;
    background-color: var(--pana-grau-80);
    border-color: var(--pana-grau-80);
}

    .btn-check:checked + .btn-pana-secondary:focus, .btn-check:active + .btn-pana-secondary:focus, .btn-pana-secondary:active:focus, .btn-pana-secondary.active:focus, .show > .btn-pana-secondary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.25rem var(--pana-grau-60);
    }

.btn-pana-secondary:disabled, .btn-pana-secondary.disabled {
    color: #fff;
    background-color: var(--pana-grau-40);
    border-color: var(--pana-grau-40);
}

/*Primary Button*/

.btn-pana-primary {
    /*color: #fff;
    background-color: var(--pana-gelb);
    border-color: var(--pana-gelb);*/
    color: #fff;
    background-color: var(--pana-main);
    border-color: var(--pana-main);
}

.btn-pana-primary:hover {
    /*color: white;
    background-color: var(--pana-gelb-80);
    border-color: var(--pana-gelb);*/
    color: white;
    background-color: var(--pana-main-80);
    border-color: var(--pana-main);
}

.btn-check:focus + .btn-pana-primary, .btn-pana-primary:focus {
    /*color: #fff;
    background-color: var(--pana-gelb-80);
    border-color: var(--pana-gelb-80);
    box-shadow: 0 0 0 0.25rem var(--pana-gelb-60);*/
    color: #fff;
    background-color: var(--pana-main-80);
    border-color: var(--pana-main-80);
    box-shadow: 0 0 0 0.25rem var(--pana-main-60);
}

.btn-check:checked + .btn-pana-primary, .btn-check:active + .btn-pana-primary, .btn-pana-primary:active, .btn-pana-primary.active, .show > .btn-pana-primary.dropdown-toggle {
    /*color: #fff;
    background-color: var(--pana-gelb-80);
    border-color: var(--pana-gelb-80);*/
    color: #fff;
    background-color: var(--pana-main-80);
    border-color: var(--pana-main-80);
}

.btn-check:checked + .btn-pana-primary:focus, .btn-check:active + .btn-pana-primary:focus, .btn-pana-primary:active:focus, .btn-pana-primary.active:focus, .show > .btn-pana-primary.dropdown-toggle:focus {
    /*box-shadow: 0 0 0 0.25rem var(--pana-gelb-60);*/
    box-shadow: 0 0 0 0.25rem var(--pana-main-60);
}

.btn-pana-primary:disabled, .btn-pana-primary.disabled {
    /*color: #fff;
    background-color: var(--pana-gelb-40);
    border-color: var(--pana-gelb-40);*/
    color: #fff;
    background-color: var(--pana-main-40);
    border-color: var(--pana-main-40);
}

/*Pagination*/

.page-link {
    /*color: var(--pana-gelb);*/
    color: var(--pana-main);
}

.page-link:hover {
    /*color: var(--pana-gelb);*/
    color: var(--pana-main);
}

.page-link:focus {
    /*color: var(--pana-gelb);
    box-shadow: 0 0 0 0.25rem var(--pana-gelb);*/
    color: var(--pana-main);
    box-shadow: 0 0 0 0.25rem var(--pana-main);
}

.page-item.active .page-link {
    /*background-color: var(--pana-gelb);
    border-color: var(--pana-gelb);*/
    background-color: var(--pana-main);
    border-color: var(--pana-main);
}