/* Fixe Sidebar
 * Anpassungen von OBM-Media - Stefan Oberbiermann
 * 27.07.2026 
 */ 


:root {
    --pohl-site-width: 1500px;
    --pohl-sidebar-width: 285px;
    --pohl-sidebar-bg: #eef7f9;
    --pohl-page-bg: #ffffff;
    --pohl-outer-bg: #d9e8eb;
}

/* Hamburger-Icon im mobilen Header vergrößern */
.tm-header-mobile .uk-navbar-toggle-icon svg {
    width: 40px;
    height: 40px;
}

/* Außenfläche */
.tm-page-container {
    background-color: var(--pohl-outer-bg);
}

/* Desktop ab UIkit-Breakpoint "m" */
@media (min-width: 960px) {

    /*
     * Header/Sidebar und Inhaltsbereich bilden gemeinsam
     * einen mittig ausgerichteten Gesamtcontainer.
     */
    .tm-page-container {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            var(--pohl-sidebar-width)
            minmax(0, calc(var(--pohl-site-width) - var(--pohl-sidebar-width)))
            minmax(0, 1fr);

        align-items: start;
        min-height: 100vh;
    }

    /*
     * Vorhandenen Desktop-Header als linke Sidebar verwenden.
     */
    .tm-header {
        grid-column: 2;
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--pohl-sidebar-bg);
        z-index: 10;
    }

    /*
     * YOOtheme-Navbar-Container über die gesamte Höhe strecken.
     */
    .tm-header > .uk-navbar-container {
        min-height: 100%;
        background: transparent;
    }

    /*
     * Inhalt der Sidebar vertikal zentrieren.
     * 100vh ist hier entscheidend.
     */
    .tm-header > .uk-navbar-container > .uk-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: 100vh;
        padding: 50px 32px;
        box-sizing: border-box;
		border-right: 5px solid #178FC2;
    }

    /*
     * YOOtheme-Navbar von horizontal auf vertikal umstellen.
     */
    .tm-header .uk-navbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        min-height: 0;
        padding: 0;
    }

    .tm-header .uk-navbar-left,
    .tm-header .uk-navbar-right {
        display: block;
        width: 100%;
        min-height: 0;
    }

    .tm-header .uk-navbar-item {
        min-height: 0;
    }

    /* Logo */
    .tm-header .uk-logo {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0 0 55px;
        text-align: right;
        white-space: normal;
    }

    /* Hauptnavigation vertikal darstellen */
    .tm-header .uk-navbar-nav {
        display: block;
        width: 100%;
    }

    .tm-header .uk-navbar-nav > li {
        display: block;
        width: 100%;
    }

    .tm-header .uk-navbar-nav > li > a {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        min-height: 0;
        padding: 8px 4px;
        box-sizing: border-box;
        text-align: right;
        white-space: normal;
        border-bottom: 1px solid rgba(0, 119, 170, 0.5);
    }

    /*
     * Inhaltsbereich rechts neben der Sidebar.
     */
    .tm-page {
        grid-column: 3;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
        background-color: var(--pohl-page-bg);
    }
}

@media (max-width: 959px) {

    .tm-header-mobile .uk-logo {
        display: block;
        line-height: 1.1;
        padding-top: 16px;
    }

    .tm-header-mobile .uk-logo .logo-untertitel {
        display: block;
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.2;
        color: #333;
    }
}


/*
* Sonstige CSS-Anpassungen,
* unabhängig von der fixen Sidebar - START
*/

@media (min-width: 960px) {

    .tm-header .uk-logo {
        line-height: 1;
    }

    .tm-header .uk-logo .logo-untertitel {
        display: block;
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.45;
        color: #333;
    }
}


.uk-article-title {
	hyphens: auto;
}	

/* Slider Startseite START */
/* Grundzustand */

.pohl-startslider .uk-slideshow-items > .el-item .pohl-slide-link {
	opacity: 0;
	transform: translateX(60px);
}


/* Animation beim aktiven Slide */

.pohl-startslider .uk-slideshow-items > .el-item.uk-active .pohl-slide-link {
	animation-name: pohl-link-einblenden;
	animation-duration: 0.7s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}


/* Verzögerungen */

.pohl-startslider .uk-slideshow-items > .el-item.uk-active .pohl-slide-link:nth-child(1) {
	animation-delay: 0.3s;
}

.pohl-startslider .uk-slideshow-items > .el-item.uk-active .pohl-slide-link:nth-child(2) {
	animation-delay: 0.65s;
}

.pohl-startslider .uk-slideshow-items > .el-item.uk-active .pohl-slide-link:nth-child(3) {
	animation-delay: 1s;
}

.pohl-startslider .uk-slideshow-items > .el-item.uk-active .pohl-slide-link:nth-child(4) {
	animation-delay: 1.35s;
}

.pohl-startslider .uk-slideshow-items > .el-item.uk-active .pohl-slide-link:nth-child(5) {
	animation-delay: 1.7s;
}


/* Animation */

@keyframes pohl-link-einblenden {

	from {
		opacity: 0;
		transform: translateX(60px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}

}

/* Slider Startseite END */

/*
* Sonstige CSS-Anpassungen,
* unabhängig von der fixen Sidebar - END
*/