/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v29-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v29-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v29-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v19-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v19-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v19-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v19-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v19-latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v19-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v19-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v19-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v19-latin-700italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v19-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* bounce Animation für den Scroll to top button */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Höherer Sprung */
    }
}


.-secondary, .button.-secondary, input[type="submit"].-secondary, .header-login .formbody input[type=submit],
.header-dropdown > ul input[type=submit],
.pricing-table-plan.-highlighted a,
.feature-box-link.-secondary,
.headline-box-link.-secondary,
button.-tertiary,
.button.-tertiary,
input[type="submit"].-tertiary,
.rotating-boxes-item-content .rotating-boxes-item-link,
.pricing-table-plan a,
.feature-box-link.-tertiary,
.headline-box-link.-tertiary,
button.-quaternary,
.button.-quaternary,
input[type="submit"].-quaternary,
.feature-box-link.-quaternary,
.headline-box-link.-quaternary,
.highlight-box-link,
.feature-box-link,
.headline-box-link,
.footer-bar input[type=submit],
.footer-bar button,
button,
.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	border-color: #ea7c13;
	text-transform: none;
	text-shadow: none;
	background: #ea7c13;
	background: -webkit-linear-gradient(#ea7c13, #ea7c13);
	background: -moz-linear-gradient(#ea7c13, #ea7c13);
	background: -o-linear-gradient(#ea7c13, #ea7c13);
	background: linear-gradient(#ea7c13, #ea7c13);
	box-shadow: none;
}

button.-secondary:hover, .button.-secondary:hover, input[type="submit"].-secondary:hover, .header-login .formbody input[type=submit]:hover,
.header-dropdown > ul input[type=submit]:hover, button.-tertiary:hover, .button.-tertiary:hover, input[type="submit"].-tertiary:hover, .rotating-boxes-item-content .rotating-boxes-item-link:hover, .pricing-table-plan a:hover, button.-quaternary:hover, .button.-quaternary:hover, input[type="submit"].-quaternary:hover, .highlight-box-link:hover, .feature-box-link:hover, .headline-box-link:hover, .footer-bar input[type=submit]:hover, .footer-bar button:hover, button.-secondary:focus, .button.-secondary:focus, input[type="submit"].-secondary:focus, .header-login .formbody input[type=submit]:focus,
.header-dropdown > ul input[type=submit]:focus,
button.-tertiary:focus,
.button.-tertiary:focus,
input[type="submit"].-tertiary:focus,
.rotating-boxes-item-content .rotating-boxes-item-link:focus,
.pricing-table-plan a:focus,
button.-quaternary:focus,
.button.-quaternary:focus,
input[type="submit"].-quaternary:focus,
.highlight-box-link:focus,
.feature-box-link:focus,
.headline-box-link:focus,
.footer-bar input[type=submit]:focus,
.footer-bar button:focus,
button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
	border-color: #ea7c13;
	background-image: -webkit-linear-gradient(#ea7c13, #ea7c13);
	background-image: -moz-linear-gradient(#ea7c13, #ea7c13);
	background-image: -o-linear-gradient(#ea7c13, #ea7c13);
	background-image: linear-gradient(#ea7c13, #ea7c13);
}
button.-secondary:active, .button.-secondary:active, input[type="submit"].-secondary:active, .header-login .formbody input[type=submit]:active,
.header-dropdown > ul input[type=submit]:active,
button.-tertiary:active,
.button.-tertiary:active,
input[type="submit"].-tertiary:active,
.rotating-boxes-item-content .rotating-boxes-item-link:active,
.pricing-table-plan a:active,
button.-quaternary:active,
.button.-quaternary:active,
input[type="submit"].-quaternary:active,
.highlight-box-link:active,
.feature-box-link:active,
.headline-box-link:active,
.footer-bar input[type=submit]:active,
.footer-bar button:active,
button:active,
.button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	background-image: -webkit-linear-gradient(#ea7c13, #ea7c13);
	background-image: -moz-linear-gradient(#ea7c13, #ea7c13);
	background-image: -o-linear-gradient(#ea7c13, #ea7c13);
	background-image: linear-gradient(#ea7c13, #ea7c13);
}

button.-secondary, .button.-secondary, input[type="submit"].-secondary, .header-login .formbody input[type=submit],
.header-dropdown > ul input[type=submit],
.pricing-table-plan.-highlighted a,
.feature-box-link.-secondary,
.headline-box-link.-secondary {
	border-color: #00a4a4;
	text-shadow: none;
	background: #00a4a4;
	background: -webkit-linear-gradient(#00a4a4, #00a4a4);
	background: -moz-linear-gradient(#00a4a4, #00a4a4);
	background: -o-linear-gradient(#00a4a4, #00a4a4);
	background: linear-gradient(#00a4a4, #00a4a4);
	box-shadow: none;
}
button.-secondary:hover, .button.-secondary:hover, input[type="submit"].-secondary:hover, .header-login .formbody input[type=submit]:hover,
.header-dropdown > ul input[type=submit]:hover, .pricing-table-plan.-highlighted a:hover, .feature-box-link.-secondary:hover, .headline-box-link.-secondary:hover, button.-secondary:focus, .button.-secondary:focus, input[type="submit"].-secondary:focus, .header-login .formbody input[type=submit]:focus,
.header-dropdown > ul input[type=submit]:focus,
.pricing-table-plan.-highlighted a:focus,
.feature-box-link.-secondary:focus,
.headline-box-link.-secondary:focus {
	border-color: #00a4a4;
	background: -webkit-linear-gradient(#00a4a4, #00a4a4);
	background: -moz-linear-gradient(#00a4a4, #00a4a4);
	background: -o-linear-gradient(#00a4a4, #00a4a4);
	background: linear-gradient(#00a4a4, #00a4a4);
}
button.-secondary:active, .button.-secondary:active, input[type="submit"].-secondary:active, .header-login .formbody input[type=submit]:active,
.header-dropdown > ul input[type=submit]:active,
.pricing-table-plan.-highlighted a:active,
.feature-box-link.-secondary:active,
.headline-box-link.-secondary:active {
	background: -webkit-linear-gradient(#00a4a4, #00a4a4);
	background: -moz-linear-gradient(#00a4a4, #00a4a4);
	background: -o-linear-gradient(#00a4a4, #00a4a4);
	background: linear-gradient(#00a4a4, #00a4a4);
}

button.-tertiary,
.button.-tertiary,
input[type="submit"].-tertiary,
.rotating-boxes-item-content .rotating-boxes-item-link,
.pricing-table-plan a,
.feature-box-link.-tertiary,
.headline-box-link.-tertiary {
	border-color: #c2c2c2;
    text-shadow: none;
	background: #f5f5f5;
	background: -webkit-linear-gradient(#f5f5f5, #f5f5f5);
	background: -moz-linear-gradient(#f5f5f5, #f5f5f5);
	background: -o-linear-gradient(#f5f5f5, #f5f5f5);
	background: linear-gradient(#f5f5f5, #f5f5f5);
	box-shadow: none;
}
button.-tertiary:hover,
.button.-tertiary:hover,
input[type="submit"].-tertiary:hover,
.rotating-boxes-item-content .rotating-boxes-item-link:hover,
.pricing-table-plan a:hover,
.feature-box-link.-tertiary:hover,
.headline-box-link.-tertiary:hover,
button.-tertiary:focus,
.button.-tertiary:focus,
input[type="submit"].-tertiary:focus,
.rotating-boxes-item-content .rotating-boxes-item-link:focus,
.pricing-table-plan a:focus,
.feature-box-link.-tertiary:focus,
.headline-box-link.-tertiary:focus {
	border-color: #c2c2c2;
	background: -webkit-linear-gradient(#f5f5f5, #f5f5f5);
	background: -moz-linear-gradient(#f5f5f5, #f5f5f5);
	background: -o-linear-gradient(#f5f5f5, #f5f5f5);
	background: linear-gradient(#f5f5f5, #f5f5f5);
}
button.-tertiary:active,
.button.-tertiary:active,
input[type="submit"].-tertiary:active,
.rotating-boxes-item-content .rotating-boxes-item-link:active,
.pricing-table-plan a:active,
.feature-box-link.-tertiary:active,
.headline-box-link.-tertiary:active {
	background: -webkit-linear-gradient(#f5f5f5, #f5f5f5);
	background: -moz-linear-gradient(#f5f5f5, #f5f5f5);
	background: -o-linear-gradient(#f5f5f5, #f5f5f5);
	background: linear-gradient(#f5f5f5, #f5f5f5);
}

button.-quaternary,
.button.-quaternary,
input[type="submit"].-quaternary,
.feature-box-link.-quaternary,
.headline-box-link.-quaternary {
	border: 2px solid #666666;
	border-radius: 0;
	background: transparent;
}

button.-quaternary:hover,
.button.-quaternary:hover,
input[type="submit"].-quaternary:hover,
.feature-box-link.-quaternary:hover,
.headline-box-link.-quaternary:hover,
button.-quaternary:focus,
.button.-quaternary:focus,
input[type="submit"].-quaternary:focus,
.feature-box-link.-quaternary:focus,
.headline-box-link.-quaternary:focus {
	background: none;
	border-color: #666;
}

@keyframes colorChange {
    0% {
        background-color: #fff;
    }
    50% {
        background-color: #fac28e;
    }
    100% {
        background-color: #f5f5f5;
    }
}

/* Bildunterschrift im Bild */
 .image_container {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 600px;
}

.image_container img {
  display: block;
  width: 100%;
  height: auto;
}


.image_container .caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 0.3em 0.6em;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.9em;
  display: inline-block;   /* ← wichtig! */
  width: auto;             /* ← stellt sicher, dass Breite sich nur nach Text richtet */
  max-width: calc(100% - 20px);
  border-radius: 3px;
  white-space: nowrap;     /* ← optional: verhindert Umbruch */
  box-sizing: border-box;
}






/* Seiten mit Sidebar Menü sollen Sticky Menüs haben */

/* DESKTOP */
.content-wrapper {
 /*   display: flex;*/
    /*align-items: flex-start;*/
      /*          gap: 40px;*/

}

/* Sidebar LINKS */
.sidebar {
    order: 1;

    width: 300px;

    position: sticky;
    top: 120px;

    align-self: flex-start;

    max-height: calc(100vh - 140px);
    overflow-y: auto;

    flex-shrink: 0;
        margin: 0 0 0 0 !important;


}

/* Main RECHTS */
.main-content {
    order: 2;
	width: 70%;
	margin-right: 1,5%;
    margin-left: 0%;
    flex: 1;
    min-width: 0;
}
 

/* TABLET */
@media (max-width: 1024px) {

    .content-wrapper {
        gap: 24px;
    }

    .sidebar {
        width: 260px;
        top: 100px;
    }
}


/* MOBILE */
@media (max-width: 768px) {

    .content-wrapper {
        flex-direction: column;
    }

    .sidebar,
    .main-content {
        width: 100%;
    }

    .sidebar {

        /* Sticky deaktivieren */
        position: relative;
        top: auto;

        max-height: none;
        overflow: visible;

        order: 1;
    }

    .main-content {
        order: 2;
    }
}


/* Scrollspy Aktiver Menüpunkt */
.sidebar a.active {
    background: #ea7c13;
    color: #fff;

    border-color: #ea7c13;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Damit Header den Anchor nicht überdeckt */
[id] {
    scroll-margin-top: 140px;
}




/* ab hier Mobil Ergaenzung */

/* =========================================
   MOBILE ONLY
========================================= */

@media (max-width: 768px) {

    .content-wrapper {
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        order: 1;

        position: relative !important;
        top: auto !important;

        width: 100% !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .main-content {
        order: 2;
        width: 100%;
    }

    /*
    Sidebar Inhalt standardmäßig zu
    */

    .sidebar .mod_article {
        display: none;
    }

    /*
    geöffnet
    */

    .sidebar.mobile-open .mod_article {
        display: block;
    }

    /*
    Toggle Button
    */

    .sidebar-toggle-mobile {
        display: inline-flex;
        margin-bottom: 20px;
    }

    /*
    Scrollspy Mobil deaktivieren
    */

    .sidebar a.active {
        background: transparent !important;
        color: inherit !important;
    }
}


/* =========================================================
   Moderne Sidebar-Scrollbar
   Chrome + Edge + Safari + Firefox
   ========================================================= */

.sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;

    /* Smooth Scrolling */
    scroll-behavior: smooth;
}


/* =========================================================
   Chrome / Edge / Safari
   ========================================================= */

.sidebar-scroll::-webkit-scrollbar {
    width: 8px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;

    transition: background-color 0.25s ease;
}


/* Scrollbar erst bei Hover sichtbar */
.sidebar-scroll:hover::-webkit-scrollbar-thumb {
    background-color: rgba(140, 140, 140, 0.45);
}


/* Beim aktiven Scrollen etwas stärker */
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(140, 140, 140, 0.7);
}


/* =========================================================
   Firefox Hover
   ========================================================= */

.sidebar-scroll:hover {
    scrollbar-color: rgba(140, 140, 140, 0.45) transparent;
}






.menubereich-kapitel.block > p {

	background: #ffffff;
  padding: 0.3em 0.3em 0.3em 0.6em;
  	border-bottom: 2px solid #999999;;
  
}