* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hideable {
    display: none;
}

@font-face {
    font-family: UniversLTW02-57Condense-726300;
    src: url("Fonts/726300/adc492fa-2e18-46e7-a334-19977a077ec2.eot?#iefix");
    src: url("Fonts/726300/adc492fa-2e18-46e7-a334-19977a077ec2.eot?#iefix") format("eot"), url("Fonts/726300/14f0370a-8385-437e-b5b8-5cb89e20e2ff.woff") format("woff"), url("Fonts/726300/8c1d24ab-e7f8-4c29-a419-f87180fdf410.ttf") format("truetype"), url("Fonts/726300/9baaf87b-982d-45c0-9518-8f5aec7c1292.svg#9baaf87b-982d-45c0-9518-8f5aec7c1292") format("svg");
}


@font-face {
    font-family: UniversLTW02-67BoldCn;
    src: url("Fonts/726312/c1f2f059-579b-465a-a13f-d70acd6c6212.eot?#iefix");
    src: url("Fonts/726312/c1f2f059-579b-465a-a13f-d70acd6c6212.eot?#iefix") format("eot"), url("Fonts/726312/b2388651-dd56-4c8e-8455-c55318f6a734.woff") format("woff"), url("Fonts/726312/346ec69d-90a7-4fef-a216-1a0dafbd3798.ttf") format("truetype"), url("Fonts/726312/d39b0ff2-cca2-4288-8f6a-c730f44feb81.svg#d39b0ff2-cca2-4288-8f6a-c730f44feb81") format("svg");
}

html {
    background-color: #efefef;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
}

.core {
    padding-left: 4vw;
    padding-right: 4vw;
    background-color: #efefef;
    max-width: 1300px;
    margin: 0 auto; /* centers t1e container */
}

.tocIconAndText {
    height: 64px;
    padding-left: 0;
    padding-top: 48px;
    padding-bottom: 64px;


}

.container {
    display: flex;
    /* Activates Flexbox */
    align-items: center;
    /* This is the magic for vertical centering */
    gap: 12px;
    /* This creates the space between the image and text */
}

.container-nav-bottom {
    display: flex;
    /* Activates Flexbox */
    align-items: center;
    /* This is the magic for vertical centering */
    gap: 13px;
    /* This creates the space between the image and text */
}

.container-chapter {
    display: flex;
    /* Activates Flexbox */
    align-items: center;
    /* This is the magic for vertical centering */
    gap: 12px;
    /* This creates the space between the image and text */
    padding-bottom: 12px;
    padding-top: 6px;
}

.container-chapter-video {
    display: flex;
    flex-direction: column;
    /* stack children vertically */
    align-items: center;
    /* center children horizontally */
    gap: 0;
    padding: 0 0 12px;
}

.container-chapter-video-text {
    max-block-size: 740px;
    padding: 0;
    text-align: center;
    /* center text inside paragraph */
    margin: 0 auto;
    /* center the paragraph block */
}


.container-chapter-responsive-video {

    width: 100%;
    max-width: 537px;
    /* Maximum width of 500px */
    margin: 0 auto;
    /* Center the video */
    aspect-ratio: 16 / 9;
    /* Maintain 16:9 aspect ratio */
    overflow: hidden;

}

.container-chapter-responsive-video iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Scale video to fit without cropping */
}

.chapter-text {
    color: black;
}

.text-content h2 {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;


}

/* default: stacked (mobile-first) */
.content-block {
    display: block;
    
}

/* responsive: side-by-side on wider screens */
@media (min-width: 750px) {
    .figure-label {
        padding-top: 0;
        /* ✅ different value for wider screens */
        margin-top: 0;
        /* optional: remove mobile margin */
    }

    .content-block {
        display: flex;
        flex-direction: row-reverse;
        /* ✅ swaps figure + text */
        justify-content: space-between;
        align-items: flex-start;
        /* top-align text + figure */
        gap: 56px;
        /* space between columns */
        max-width: 900px;

    }

    .text-block {
        flex: 1;
        /* take remaining space */
        padding-top: 48px;
        max-width: 600px;
        align-content: flex-start;
    }

    .text-block h3 {
        padding-bottom: 0;
        line-height: 19pt;
    }
}

@media (max-width: 750px) {
    .text-block h3 {
        
        padding-bottom: 0;
    }
}


.figure-image {
    display: block;
    width: 100%;
    /* container takes full width */
    max-width: 300px;
    /* but never bigger than 400px */
    margin: 0 auto;
    /* center the block */
    text-align: left;
    /* label text stays left aligned */
    padding-top: 24px;
}

.figure-label {
    padding-left: 36px;
    /* indent label text */
    /* space for the bullet */
    text-indent: -24px;
    /* pull the first line back left */
    line-height: 21px;
    margin-bottom: 0;
    /* small gap above image */
}

.figure-image-image {
    width: 100%;
    /* scale to container */
    height: auto;
    /* keep aspect ratio */
    display: block;

}

.figure-image2 {
    display: block;
    width: 100%;
    /* container takes full width */
    max-width: 600px;
    /* but never bigger than 400px */
    margin: 0 auto;
    /* center the block */
    text-align: left;
    /* label text stays left aligned */
    padding-top: 24px;
}

.figure-label2 {
    padding-left: 12px;
    /* indent label text */
    margin-bottom: 16px;
    /* small gap above image */
}

.figure-image-image2 {
    width: 100%;
    /* scale to container */
    height: auto;
    /* keep aspect ratio */
    display: block;
}

.figure-image-mac {
    display: block;
    width: 100%;
    /* container takes full width */
    min-width: 300px;
    max-width: 1200px;
    /* but never bigger than 400px */
    margin: 0 auto;
    align-content: center;
    /* center the block */
    text-align: left;
    /* label text stays left aligned */
    padding-top: 24px;
    padding-bottom: 12px;
}

.figure-label-mac {
    padding-left: 27px;
    /* indent label text org 36px */
    /* space for the bullet */
    text-indent: -24px;
    /* pull the first line back left */
    line-height: 21px;
    margin-bottom: 0;
    padding-bottom: 6px;
    /* small gap above image */
}

.figure-image-image-mac {
    width: 100%;
    /* scale to container */
    height: auto;
    /* keep aspect ratio */
    display: block;

}


[id] {
    scroll-margin-top: 60px;
}


.chapterImg {
    border-radius: 6px;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
    width: 38px;
    height: 38px;

}

.bigpic {
    float: left;
    margin-bottom: 40px;
    align-content: space-around;
    margin-right: 40px;
    max-height: 70vh;
    max-width: 90vw;
    width: auto;
}

.videoPic {
    float: none;

    display: block;
    margin-left: auto;
    margin-right: auto;

    margin-bottom: 40px;

    width: 80vw;
    min-height: 200px;
    height: auto;
}

.helpPic {
    float: none;

    display: block;
    margin-left: auto;
    margin-right: auto;

    margin-bottom: 40px;

    width: 80vw;
    min-height: 200px;
    max-width: 600px;
    height: auto;
}


.bigpic3 {
    float: left;
    margin-bottom: 40px;
    align-content: space-around;

    width: auto;
    max-height: 70vh;
    min-height: 200px;
    max-width: 40vw;
}


.bigpic2 {
    float: center;
    margin-bottom: 40px;
    min-height: 200px;

    width: auto;
    max-height: 80vh;
    max-width: 90vw;

}


.bigpic4 {
    float: center;

    width: 90vw;

    max-width: 900px;

}

.bigpicBreit {
    float: center;

    width: 90vw;

    max-width: 1200px;

}



.bigpicMetro {
    float: center;

    width: 90vw;

    max-width: 650px;

}


.tablePic {
    float: left;
    margin-bottom: 5px;
    align-content: space-around;
    margin-right: 5px;
    max-height: 60vh;
    max-width: 90vw;
    width: auto;
    min-height: 200px;
    border-radius: 8px;

}



@media screen and (max-width: 700px) {
    .bigpic {
        float: none;

        display: block;
        margin-left: auto;
        margin-right: auto;

    }

    .tablePic {
        float: none;

        display: block;
        margin-left: auto;
        margin-right: auto;


    }

    .core {
        padding-left: 5vw;
        padding-right: 5vw;


    }

}

.lineBreak {
    float: none;

    display: inline-block;

    width: 100%;
}

.contentListe {


    color: rgb(32, 32, 32);

    list-style: inside;
}

.contentListe li {
    padding-bottom: 10px;
    line-height: 24px;
}

.contentListe-tutorial {

    line-height: 0;
    color: rgb(32, 32, 32);

    list-style: inside;
}

.contentListe-tutorial li {
    padding-bottom: 5px;
    line-height: 24px;
}


.contentListe2 {



    padding-bottom: 14pt;
    color: rgb(32, 32, 32);

    list-style: inside;
}

.contentListe2 li {
    line-height: 15px;
}


body {
    margin: 0;
    padding-top: 36pt;
    font-family: UniversLTW02-57Condense-726300, arial, sans-serif;
    font-style: normal;
    text-decoration: none;
    text-align: left;
    color: rgb(33, 33, 33);
    letter-spacing: 0.1mm;
    word-spacing: 0.4mm;
   
    display: flex;
    
    font-size: 11pt;
    flex-direction: column;
    min-height: 100vh;
    /* Ensures body takes up at least the full viewport height */
   
}


.button {
    background-color: #F7931D;
    /* Green */
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;

    color: white;
    padding: 13px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14pt;
    transition-duration: 0.2s;

    cursor: pointer;
    border-radius: 9px;
    width: 160px;
    height: 40.49pt;
    margin-bottom: 14pt;
    border: 2px solid #efefef;
    /* Green */
}

.button:hover {
    background-color: white;
    /*transition-duration: 0.2s; */
    color: #F7931D;

    border: 2px solid #F7931D;
    /* Green */
}

.button_flach {
    background-color: #F7931D;
    /* Green */
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;

    color: #272727;
    padding: 4px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14pt;
    transition-duration: 0.2s;

    cursor: pointer;
    border-radius: 9px;
    width: 160px;
    margin-bottom: 14pt;
    border: 2px solid #454545;
    /* Green */
}

.button_flach:hover {
    background-color: #ffffff;
    /*transition-duration: 0.2s; */
    color: #F7931D;

    border: 2px solid #F7931D;
    /* Green */
}

.input_newsletter {
    background-color: #ffffff;
    /* Green */
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;

    color: black;
    padding: 4px 8px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 14pt;


    cursor: pointer;
    border-radius: 9px;
    width: 170px;
    margin-bottom: 14pt;
    border: 2px solid #454545;
    /* Green */
}

.input_newsletter:focus {

    border: 2px solid #ffffff;
    /* Green */
}

.smallTable {
    padding: 10px;

}

.td_space {
    padding-left: 10px;
    vertical-align: top;
}

strong {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    font-weight: normal;
}

.red {
    color: crimson;
}

.blue {
    color: dodgerblue;
}

.green {
    color: green;
}


b {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    font-weight: normal;
}

td {
    font-family: UniversLTW02-57Condense-726300, arial, sans-serif;
    line-height: 18pt;


    padding-bottom: 2px;
    color: rgb(32, 32, 32);
    word-spacing: 1.1pt;
    letter-spacing: 0.1px
}

.searchText {
    font-size: 1px;
    color: #efefef;
}



newsletter {
    align-items: center;
    text-align: center;
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    justify-content: space-between;

    height: 96pt;
    position: relative;
    padding-left: 4vw;
    padding-top: 12pt;
    top: 0;
    width: 100%;
    opacity: 1;
    background-color: rgb(150, 150, 150);
}

header {
    display: flex;
    /* Added this to make align-items and justify-content work */
    flex-direction: column;
    /* Stacks the h1 and h3 vertically */
    align-items: flex-start;
    /* Aligns items to the left */
    justify-content: center;
    /* Vertically centers the content in the header */
    text-align: left;
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    position: relative;
    padding-left: 4vw;
    padding-top: 8pt;
    padding-bottom: 12pt;
    top: 0;
    margin-top: 0.33pt;
    margin-bottom: 0;
    width: 100%;
    opacity: 1;
    z-index: 0;
    background-color: rgb(219, 219, 219);
}


headline {
    align-items: center;
    text-align: left;
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    justify-content: space-between;

    position: relative;
    padding-left: 4vw;
    padding-top: 8pt;
    padding-bottom: 12pt;
    top: 0;
    margin-top: 0;
    margin-bottom: 8pt;
    width: 100%;
    opacity: 1;
    z-index: 0;
    background-color: rgb(219, 219, 219);
}

nav {
    display: flex;
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    justify-content: space-between;
    align-items: center;
    /* centers direct children vertically */
    min-height: 32pt;
    height: 36pt;
    position: fixed;
    top: 0;
    width: 100%;
    opacity: 1;
    background-color: rgb(32, 32, 32);
    z-index: 10;
}

nav table {
    height: 100%;
    /* match nav height */
}

nav td {
    vertical-align: middle;
    /* align logo + links in table cells */
    padding-top: 0;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* ✅ vertical centering inside flex line */
    width: 55%;
    list-style: none;
    margin: 0;
    padding-top: 9px;
    padding-bottom: 9px;
}




.nav-links li {
    list-style: none;
    color: #F7931D;
    font-size: 12pt;
    text-transform: lowercase;
    display: flex;
    /* ✅ makes text inside li align vertically */
    align-items: center;
    padding-top: 12px;
}

.nav-links a {
    text-decoration: none;
    text-transform: lowercase;
    color: rgb(237, 237, 237);
    transition: 0.1s linear;
}

.nav-links a:hover {
    text-decoration: none;
    color: rgb(247, 145, 29);
    transition: 0.1s linear;
}

html {
    height: 100%;
}



/* This can be your main content area that will expand */
.content {
    flex-grow: 1;
}

/* Your corrected footer styles */
nav {
    display: flex;
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    justify-content: space-between;
    align-items: center;
    /* centers direct children vertically */
    min-height: 32pt;
    height: 36pt;
    position: fixed;
    top: 0;
    width: 100%;
    opacity: 1;
    background-color: rgb(32, 32, 32);
    z-index: 10;
}



footer {
    margin-top: auto;
    /* This is the magic that pushes the footer to the bottom */
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* Correct property is 'align-items'. 'center' usually looks best. */

    color: white;
    min-height: 56pt;
    height: 56pt;
    width: 100%;
    opacity: 0.95;
    background-color: rgb(32, 33, 34);
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    letter-spacing: 0.8pt;
}

.nav-manual {
    opacity: 1;
    padding-left: 12pt;
}

.nav-manual li {
    list-style: circle;
    color: #F7931D;
    font-size: 12pt;
}

.nav-manual a {
    text-decoration: none;

    color: #F7931D;
    font-size: 12pt;
    transition: 0.1s linear;
}

.nav-manual a:hover {
    text-decoration: underline;
    transition: 0.1s linear;
}

.nav-links-bottom {
    display: flex;
    justify-content: space-around;
    width: 40%;
    padding-top: 20pt;
    padding-left: 20px;
    padding-right: 50px;
    opacity: 1;
}

.nav-links-bottom li {
    list-style: none;
    color: #F7931D;
    font-size: 12pt;
    text-transform: lowercase;
    transition: 0.2s linear;
}

.nav-links-bottom a {
    text-decoration: none;
    text-transform: lowercase;
    color: rgb(237, 237, 237);
    font-size: 12pt;
    transition: 0.1s linear;

}

.nav-links-bottom a:hover {
    text-decoration: none;
    color: #F7931D;
    transition: 0.1s linear;
}

.nav-links-bottom-new {
    display: flex;
    justify-content: space-around;
    width: 40%;
    color: #F7931D;
    font-size: 12pt;
    text-transform: lowercase;
    transition: 0.2s linear;
    opacity: 1;
}

.nav-links-bottom-new li {
    list-style: none;
    color: #F7931D;
    font-size: 12pt;
    text-transform: lowercase;
    transition: 0.2s linear;
}

.nav-links-bottom-new a {
    text-decoration: none;
    text-transform: lowercase;
    color: rgb(237, 237, 237);
    font-size: 12pt;
    transition: 0.1s linear;

}

.nav-links-bottom-new a:hover {
    text-decoration: none;
    color: #F7931D;
    transition: 0.1s linear;
}

.nav-links-schrift-new {
    font-family: UniversLTW02-57Condense-726300, arial, sans-serif;
    color: rgb(237, 237, 237);
    font-size: 12pt;

    word-spacing: 0.4mm;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.9pt;
}

.nav-links-schrift-cr {
    font-family: UniversLTW02-57Condense-726300, arial, sans-serif;
    color: rgb(237, 237, 237);
    font-size: 12pt;
    word-spacing: 0.4mm;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.9pt;
}

.nav-links-schrift {
    font-family: UniversLTW02-57Condense-726300, arial, sans-serif;
    color: rgb(237, 237, 237);
    font-size: 12pt;
    word-spacing: 0.4mm;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.9pt;
    padding-top: 1pt;
}

.nav-links-schrift-fix {
    font-family: UniversLTW02-57Condense-726300, arial, sans-serif;
    color: rgb(237, 237, 237);
    font-size: 12pt;
    word-spacing: 0.4mm;
    font-weight: normal;
    padding-top: 1pt;
    font-style: normal;
    letter-spacing: 0.9pt;
}

.logo {
    float: left;
    padding-left: 4vw;
    opacity: 1;
    align-content: center;
    height: 16pt;
    width: auto;
    min-height: 16pt;
}

.logo_pic {
    float: left;
}



h1 {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    font-size: 32pt;
    clear: both;
    font-style: normal;
    font-weight: normal;
    color: rgb(49, 49, 49);
    padding-top: 16pt;
    line-height: 14pt;
}

.h1-uppercase {

    text-transform: uppercase;
}

.table462 {
    min-width: 462px;

}

h2 {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    font-size: 18pt;
    padding-top: 12pt;
    font-style: normal;
    font-weight: normal;
    
    text-transform: uppercase;
}

h3 {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    font-size: 14pt;
    padding-top: 12pt;
    text-transform: uppercase;
    padding-bottom: 6pt;
    font-style: normal;
    font-weight: normal;
}

h4 {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    font-size: 14pt;
    padding-top: 12pt;
    font-style: normal;
    font-weight: normal;
}

h5 {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    font-size: 32pt;
    clear: both;
    font-style: normal;
    font-weight: normal;
    color: rgb(49, 49, 49);
    padding-top: 0;
    line-height: 30pt;
}

h6 {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    font-size: 18pt;
    padding-top: 4pt;
    font-style: normal;
    font-weight: normal;
    padding-bottom: 4pt;
}


p {
    font-family: UniversLTW02-57Condense-726300, arial, sans-serif;
    line-height: 18pt;

    padding-right: 40px;
    padding-bottom: 10px;
    color: rgb(32, 32, 32);
    word-spacing: 1.1pt;
    letter-spacing: 0.1px
}

a {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    word-spacing: 0.4mm;
    text-decoration: none;
    color: #F7931D;
}

b {
    font-family: UniversLTW02-67BoldCn, arial, sans-serif;
    color: rgb(39, 39, 39);
    font-style: normal;
    text-decoration: none;
    word-spacing: 0.4mm;
}

li {
    padding-bottom: 12px;
}

ul li {
    padding-left: 1em;
    /* space for the bullet */
    text-indent: -1em;
    /* pull the first line back left */
}

.burger {
    display: none;
    cursor: pointer;
    padding-right: 4vw;
}

.burger div {
    width: 25px;
    height: 3px;
    margin: 5px;
    border-radius: 1px;
    background-color: rgb(252, 251, 244);
    transition: all 0.3s ease;
}

.td-flex {
    width: 200px;
    padding-right: 10px;
    padding-left: 20px;
}


@media screen and (max-width: 1024px) {
    .nav-links {
        width: 65%;
    }
}

@media screen and (max-width: 768px) {

    .td-flex {
        width: 120px;

        padding-left: 0;
    }


    body {
        overflow-x: hidden;
    }


    .nav-links {
        position: absolute;

        right: 0;
        height: auto;
        top: 36pt;
        padding-bottom: 0;

        padding-top: 0;
        padding-left: 25px;
        opacity: 1;
        background-color: rgb(32, 32, 32);
        display: flex;
        flex-direction: column;

        align-items: flex-start;
        /* ✅ aligns items to the left */
        width: 130px;
        transform: translateX(100%);
        border-bottom-left-radius: 16px;
        transition: transform 0.1s ease-in;

    }

    .nav-links-schrift {
        display: none;
    }

    .nav-links-schrift-new {
        display: none;
    }

    .nav-links li {
        opacity: 0;
        font-size: 15pt;
        line-height: 29pt;
    }

    .nav-links a {
        
        line-height: 29pt;
    }

    .burger {
        display: block;
    }

    .nav-active {
        transform: translateX(0);
    }

}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

/* Make images responsive and centered */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Optional: Adjust further for very small devices */
@media screen and (max-width: 480px) {
    .responsive-img {
        max-width: 90%;
    }

    p {
        font-size: 13pt;
    }

    body {
        font-size: 13pt;
    }

    h1 {
        font-size: 26pt;
        line-height: 24pt;
    }

    h2 {
        font-size: 16pt;
        padding-top: 0;
    }
}

.responsive-video {
    width: 100%;
    max-width: 720px;
    /* Maximum width of 500px */
    margin: 0 auto;
    /* Center the video */
    aspect-ratio: 16 / 9;
    /* Maintain 16:9 aspect ratio */
    overflow: hidden;
}

.responsive-video iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Scale video to fit without cropping */
}


@media screen and (min-width: 700px) {
    .contentListe2 {
        -webkit-column-count: 2;
        /* Chrome, Safari, Opera */
        -moz-column-count: 2;
        /* Firefox */
        column-count: 2;
        -webkit-column-gap: 150px;
        -moz-column-gap: 150px;
        column-gap: 150px;
    }

    p {
        font-size: 11pt;
    }

    body {
        font-size: 11pt;
    }
}