/*
 * latteyer.de – Stylesheet
 *
 * Zusammengeführt beim Umbau 10/2026 aus den Dateien der Agentur
 * (build/assets/blockeditor-*.css, build/assets/website-*.css – beide
 * minifiziert) und den seit 09/2026 angehängten eigenen Korrekturen.
 * Diese Datei ist jetzt die einzige Quelle; sie wird direkt gepflegt.
 *
 * Reihenfolge wie bisher im <head>: Blöcke, dann Website. Die Selektoren der
 * Agentur sind teils sehr spezifisch (#footer #footer-content …) – eigene
 * Korrekturen müssen diese Spezifität erreichen.
 *
 * Eingebunden über _app/vorlagen/seite.php mit ?v=<Änderungszeit>, darum darf
 * der Browser sie lange behalten (.htaccess).
 */

/* ======================================================================
   Blöcke (ehemals build/assets/blockeditor-DA_qY5vM.css)
   ====================================================================== */

html,
body {
    padding: 0;
    margin: 0;
}
body {
    font-size: 18px;
    font-family: Helvetica, Sans-Serif;
    line-height: 1.4;
    color: #000;
    font-weight: 400;
}
@media (max-width: 721px) {
    body {
        font-size: 16px;
        line-height: 1.2;
    }
}
.item_link_wrapper {
    display: inline-block;
}
.item_link_wrapper .link_arrow {
    position: relative;
    top: 5px;
    padding-right: 25px;
    padding-left: 0;
    transition: all 0.3s;
}
.item_link_wrapper:hover .link_arrow {
    padding-right: 10px;
    padding-left: 15px;
}
a {
    color: #000;
    text-decoration: underline;
}
.portfolio_container a,
.service_wrapper a,
#footer a,
#header a {
    color: #fff;
    text-decoration: none;
}
.shorten {
    width: 60%;
}
@media (max-width: 991px) {
    .shorten {
        width: 75%;
    }
}
@media (max-width: 721px) {
    .shorten {
        width: 100%;
    }
}
h1 {
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}
@media (max-width: 991px) {
    h1 {
        font-size: 35px;
    }
}
@media (max-width: 721px) {
    h1 {
        font-size: 30px;
    }
}
h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    padding: 0;
    margin: 20px 0;
    letter-spacing: -1px;
}
@media (max-width: 991px) {
    h2 {
        font-size: 30px;
    }
}
@media (max-width: 721px) {
    h2 {
        font-size: 25px;
    }
}
h3 {
    font-size: 35px;
    letter-spacing: -1px;
}
@media (max-width: 991px) {
    h3 {
        font-size: 25px;
    }
}
@media (max-width: 721px) {
    h3 {
        font-size: 20px;
    }
}
.with_Background {
    padding: 1px 0;
}
.service_wrapper {
    padding: 150px 0;
}
@media (max-width: 991px) {
    .service_wrapper {
        padding: 100px 0;
    }
}
@media (max-width: 721px) {
    .service_wrapper {
        padding: 50px 0;
    }
}
.contentwidth {
    position: relative;
    max-width: 1820px;
    margin: 150px auto;
    padding: 0 65px;
    box-sizing: border-box;
}
@media (max-width: 991px) {
    .contentwidth {
        padding: 0 30px;
        margin: 100px auto;
    }
}
@media (max-width: 721px) {
    .contentwidth {
        padding: 0 15px;
        margin: 50px auto;
    }
}
.header_block_content.contentwidth {
    margin: 0 auto;
}
.clearingItem {
    float: none;
    display: block;
    clear: both;
}
.content_block_image {
    position: relative;
}
.content_block_image img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.content_block_image_text {
    position: relative;
}
@media (max-width: 720px) {
    .content_block_image_text {
        display: flex;
        flex-direction: column;
    }
}
.content_block_image_text__image {
    float: left;
    width: 40%;
    overflow: hidden;
    min-height: 1px;
}
.content_block_image_text__image img {
    max-width: 100%;
}
@media (max-width: 720px) {
    .content_block_image_text__image {
        width: 100%;
        float: none;
    }
}
.content_block_image_text.image_right .content_block_image_text__image {
    float: right;
    text-align: right;
}
@media (max-width: 720px) {
    .content_block_image_text.image_right .content_block_image_text__image {
        order: 2;
        float: none;
    }
}
.content_block_image_text__content {
    float: right;
    width: 60%;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 1px;
    padding: 0 0 0 80px;
}
@media (min-width: 721px) and (max-width: 990px) {
    .content_block_image_text__content {
        padding: 0 0 0 40px;
    }
    .content_block_image_text__content h1 {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}
@media (max-width: 720px) {
    .content_block_image_text__content {
        padding: 0;
        width: 100%;
        float: none;
        flex: 1;
    }
}
.content_block_image_text.image_right .content_block_image_text__content {
    float: left;
    padding: 0 80px 0 0;
}
@media (min-width: 721px) and (max-width: 990px) {
    .content_block_image_text.image_right .content_block_image_text__content {
        padding: 0 40px 0 0;
    }
}
@media (max-width: 720px) {
    .content_block_image_text.image_right .content_block_image_text__content {
        padding: 0;
        width: 100%;
        float: none;
        order: 1;
    }
}
.content_block_image_text:after {
    content: "";
    display: block;
    clear: both;
}

/* ======================================================================
   Website (ehemals build/assets/website-aODByn-2.css)
   ====================================================================== */

html,
body {
    padding: 0;
    margin: 0;
}
body {
    font-size: 18px;
    font-family: Helvetica, Sans-Serif;
    line-height: 1.4;
    color: #000;
    font-weight: 400;
}
@media (max-width: 721px) {
    body {
        font-size: 16px;
        line-height: 1.2;
    }
}
.item_link_wrapper {
    display: inline-block;
}
.item_link_wrapper .link_arrow {
    position: relative;
    top: 5px;
    padding-right: 25px;
    padding-left: 0;
    transition: all 0.3s;
}
.item_link_wrapper:hover .link_arrow {
    padding-right: 10px;
    padding-left: 15px;
}
a {
    color: #000;
    text-decoration: underline;
}
.portfolio_container a,
.service_wrapper a,
#footer a,
#header a {
    color: #fff;
    text-decoration: none;
}
.shorten {
    width: 60%;
}
@media (max-width: 991px) {
    .shorten {
        width: 75%;
    }
}
@media (max-width: 721px) {
    .shorten {
        width: 100%;
    }
}
h1 {
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}
@media (max-width: 991px) {
    h1 {
        font-size: 35px;
    }
}
@media (max-width: 721px) {
    h1 {
        font-size: 30px;
    }
}
h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    padding: 0;
    margin: 20px 0;
    letter-spacing: -1px;
}
@media (max-width: 991px) {
    h2 {
        font-size: 30px;
    }
}
@media (max-width: 721px) {
    h2 {
        font-size: 25px;
    }
}
h3 {
    font-size: 35px;
    letter-spacing: -1px;
}
@media (max-width: 991px) {
    h3 {
        font-size: 25px;
    }
}
@media (max-width: 721px) {
    h3 {
        font-size: 20px;
    }
}
.with_Background {
    padding: 1px 0;
}
.service_wrapper {
    padding: 150px 0;
}
@media (max-width: 991px) {
    .service_wrapper {
        padding: 100px 0;
    }
}
@media (max-width: 721px) {
    .service_wrapper {
        padding: 50px 0;
    }
}
.contentwidth {
    position: relative;
    max-width: 1820px;
    margin: 150px auto;
    padding: 0 65px;
    box-sizing: border-box;
}
@media (max-width: 991px) {
    .contentwidth {
        padding: 0 30px;
        margin: 100px auto;
    }
}
@media (max-width: 721px) {
    .contentwidth {
        padding: 0 15px;
        margin: 50px auto;
    }
}
.header_block_content.contentwidth {
    margin: 0 auto;
}
.clearingItem {
    float: none;
    display: block;
    clear: both;
}
.content_block_image_text__image {
    width: 35%;
}
.content_block_image_text__image img {
    border-radius: 5px;
}
@media (max-width: 1351px) {
    .content_block_image_text__image {
        width: 45%;
    }
}
@media (max-width: 721px) {
    .content_block_image_text__image {
        width: 100%;
        margin-top: 35px;
        margin-bottom: 35px;
    }
}
.content_block_image_text__content {
    width: 65%;
    padding-bottom: 40px !important;
}
@media (max-width: 1351px) {
    .content_block_image_text__content {
        width: 55%;
    }
}
@media (max-width: 721px) {
    .content_block_image_text__content {
        width: 100%;
    }
    .content_block_image_text__content h1,
    .content_block_image_text__content h2,
    .content_block_image_text__content h3,
    .content_block_image_text__content h4,
    .content_block_image_text__content h5,
    .content_block_image_text__content h6 {
        margin-top: 0;
    }
}
.content_button {
    color: #fff;
    padding: 15px 35px;
    border: solid 1px #fff;
    text-decoration: none;
    transition: all 0.3s;
}
@media (max-width: 721px) {
    .content_button {
        padding: 10px 30px;
        font-size: 18px;
    }
}
.content_button:hover {
    background: #007bc4;
    color: #fff;
}
.with_Background {
    background: #000231;
    color: #fff;
}
.without_background .content_button {
    color: #000;
    border: solid 1px #000;
}
.without_background .content_button:hover {
    background: #007bc4;
    color: #fff;
}
.button_container {
    position: relative;
    top: 25px;
}
#header {
    position: absolute;
    top: 0;
    z-index: 10;
    width: 100%;
}
#header #header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #007bc4;
    height: 140px;
    z-index: 2;
}
#header #header-content.contentwidth {
    margin: 0 auto;
}
@media (max-width: 991px) {
    #header #header-content {
        height: 100px;
    }
}
#header #header-content #logo {
    width: 220px;
    height: auto;
}
@media (min-width: 991px) {
    #header #header-content #header-menu-button {
        display: none;
    }
    #header #header-content #navigation {
        margin-left: auto;
    }
    #header #header-content #navigation li {
        height: 100%;
        list-style-type: none;
        float: left;
        margin-left: 20px;
        line-height: 140px;
        position: relative;
    }
    #header #header-content #navigation li ul {
        margin-top: -50px;
        display: block;
        position: absolute;
        top: 100%;
        left: -20px;
        width: auto;
        background: #007bc4;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition:
            opacity 0.3s,
            transform 0.3s;
        z-index: 10;
        padding: 15px 20px;
    }
    #header #header-content #navigation li ul li {
        float: none;
        margin: 0;
        line-height: 35px;
        font-size: 16px;
        padding-left: 0;
        padding-right: 10px;
        transition:
            padding-left 0.3s,
            padding-right 0.3s;
    }
    #header #header-content #navigation li ul li a {
        color: #fff;
    }
    #header #header-content #navigation li ul li:before {
        display: none;
    }
    #header #header-content #navigation li ul li:hover {
        color: #fff;
        padding-left: 10px;
        padding-right: 0;
    }
    #header #header-content #navigation li:before {
        content: "";
        position: absolute;
        top: 0;
        left: -15px;
        width: calc(100% + 30px);
        height: 0;
        background: #fff;
        transition: height 0.3s;
        z-index: 2;
    }
    #header #header-content #navigation li:hover:before {
        height: 25px;
    }
    #header #header-content #navigation li:hover ul {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    #header #header-content #navigation li a {
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 18px;
    }
}
@media (max-width: 991px) {
    #header #header-content #header-menu-button {
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 30px;
        background-image: url(/assets/img/menu.svg);
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
}
@media (max-width: 991px) and (max-width: 721px) {
    #header #header-content #header-menu-button {
        right: 15px;
    }
}
@media (max-width: 991px) {
    #header #header-content #navigation {
        position: absolute;
        left: -1000px;
        transition: all 0.5s;
        list-style-type: none;
        background: #007bc4;
        padding: 25px 30px 15px;
        top: 75px;
    }
    #header #header-content #navigation.opened {
        left: 0;
    }
    #header #header-content #navigation li {
        margin-bottom: 15px;
        position: relative;
        padding-left: 0;
        padding-right: 25px;
        transition: all 0.5s;
        width: 150px;
    }
    #header #header-content #navigation li ul {
        display: none;
        position: relative;
        left: -500px;
        background: #007bc4;
        padding: 25px 30px;
        transition: all 0.5s;
    }
    #header #header-content #navigation li.hasChildren .frontendNavigationItemMobile {
        background-image: url(/assets/img/pfeil-menue.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        display: block;
        width: 20px;
        height: 20px;
        right: 0;
        top: 5px;
        background-position: 50% 80%;
        transition: all 0.5s;
    }
    #header #header-content #navigation li:before {
        content: "";
        position: absolute;
        top: 0;
        left: -60px;
        width: 25px;
        background: #fff;
        transition: all 0.3s;
        z-index: 2;
        height: 30px;
    }
    #header #header-content #navigation li.opened {
        padding-left: 25px;
        padding-right: 0;
    }
    #header #header-content #navigation li.opened:before {
        left: -30px;
    }
    #header #header-content #navigation li.opened .frontendNavigationItemMobile {
        transform: rotate(90deg);
    }
    #header #header-content #navigation li.opened ul {
        display: block;
        left: 0;
        padding: 0;
        margin: 15px 0;
    }
    #header #header-content #navigation li.opened ul li {
        list-style-type: none;
        margin-bottom: 0;
    }
    #header #header-content #navigation li.opened ul li:before {
        display: none;
        content: "";
        position: absolute;
        top: 0;
        left: -60px;
        width: 25px;
        background: #fff;
        transition: all 0.3s;
        z-index: 2;
        height: 30px;
    }
    #header #header-content #navigation li.opened ul li a {
        font-size: 16px;
    }
    #header #header-content #navigation li.opened ul li .frontendNavigationItemMobile {
        display: none;
    }
}
#fullscreen-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 920px;
    z-index: 1;
    background: #000;
    overflow: hidden;
}
#fullscreen-bg #overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 920px;
    background: #0006;
    z-index: 5;
}
#fullscreen-bg #header_slides {
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
}
#fullscreen-bg #header_slides .single_header_slide {
    height: 920px;
    background-size: cover;
    background-position: 50% 50%;
}
#content {
    z-index: 5;
    position: relative;
    overflow: hidden;
}
.header_block_content {
    color: #fff;
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    height: 920px;
    overflow: hidden;
    padding-top: 195px;
}
@media (max-width: 991px) {
    .header_block_content {
        height: 800px;
    }
}
@media (max-width: 721px) {
    .header_block_content {
        height: 650px;
    }
}
.header_block_content h1 {
    font-size: 60px;
}
@media (max-width: 991px) {
    .header_block_content h1 {
        font-size: 45px;
    }
}
@media (max-width: 721px) {
    .header_block_content h1 {
        font-size: 30px;
    }
}
.header_block_content p {
    font-size: 30px;
}
@media (max-width: 991px) {
    .header_block_content p {
        font-size: 25px;
    }
}
@media (max-width: 721px) {
    .header_block_content p {
        font-size: 20px;
    }
}
.header_block_content .slide_content {
    position: absolute;
    bottom: 100px;
    right: 60px;
    z-index: 6;
}
@media (max-width: 991px) {
    .header_block_content .slide_content {
        right: 30px;
        left: 30px;
        bottom: 70px;
    }
}
@media (max-width: 721px) {
    .header_block_content .slide_content {
        right: 15px;
        left: 15px;
        bottom: 110px;
    }
}
.header_block_content .slide_content .slide_content_inner {
    color: #fff;
    width: 100%;
    text-align: right;
    padding-right: 60px;
}
.header_block_content .slide_content .slide_content_inner p {
    font-size: 18px;
}
@media (max-width: 721px) {
    .header_block_content .slide_content .slide_content_inner {
        text-align: left;
        padding-right: 0;
    }
}
.header_block_content .slide_content .slide_content_inner .slide_button {
    color: #fff;
    padding: 15px 35px;
    border: solid 1px #fff;
    text-decoration: none;
    transition: all 0.3s;
}
@media (max-width: 721px) {
    .header_block_content .slide_content .slide_content_inner .slide_button {
        padding: 10px 30px;
        font-size: 18px;
    }
}
.header_block_content .slide_content .slide_content_inner .slide_button:hover {
    background: #007bc4;
}
.portfolio_wrapper {
    background: transparent
        linear-gradient(
            119deg,
            #5bc3f8,
            #31b2f7,
            #007bc4 14%,
            #46a7e3 27%,
            #348cf3,
            #2638c0 41%,
            #262242 52%,
            #1a3240 67%,
            #005080 84%,
            #497baa
        )
        0 0 no-repeat padding-box !important;
    height: auto;
    overflow: hidden;
    color: #fff;
    scrollbar-width: none;
}
.portfolio_wrapper .portfolio_container {
    margin-top: 60px;
}
.portfolio_wrapper .portfolio_container .portfolio_item {
    display: flex;
    align-items: flex-start;
    gap: 150px;
    margin-bottom: 100px;
}
@media (max-width: 1351px) {
    .portfolio_wrapper .portfolio_container .portfolio_item {
        gap: 50px;
    }
}
@media (max-width: 721px) {
    .portfolio_wrapper .portfolio_container .portfolio_item {
        flex-direction: column;
    }
}
.portfolio_wrapper .portfolio_container .portfolio_item .portfolio_content {
    flex-basis: 60%;
    flex-shrink: 1;
    flex-grow: 0;
}
@media (max-width: 991px) {
    .portfolio_wrapper .portfolio_container .portfolio_item .portfolio_content {
        flex-basis: 50%;
    }
}
@media (max-width: 721px) {
    .portfolio_wrapper .portfolio_container .portfolio_item .portfolio_content {
        flex-basis: 100%;
    }
}
.portfolio_wrapper .portfolio_container .portfolio_item .portfolio_content .item_title {
    opacity: 0.5;
}
.portfolio_wrapper .portfolio_container .portfolio_item .portfolio_image {
    flex-basis: 40%;
    flex-shrink: 1;
    flex-grow: 0;
}
@media (max-width: 991px) {
    .portfolio_wrapper .portfolio_container .portfolio_item .portfolio_image {
        flex-basis: 50%;
    }
}
@media (max-width: 721px) {
    .portfolio_wrapper .portfolio_container .portfolio_item .portfolio_image {
        flex-basis: 100%;
    }
}
.portfolio_wrapper .portfolio_container .portfolio_item .portfolio_image img {
    width: 100%;
    height: auto;
}
.portfolio_wrapper .portfolio_container .portfolio_item.even .portfolio_content {
    order: 1;
}
.portfolio_wrapper .portfolio_container .portfolio_item.even .portfolio_image,
.portfolio_wrapper .portfolio_container .portfolio_item.odd .portfolio_content {
    order: 2;
}
@media (max-width: 721px) {
    .portfolio_wrapper .portfolio_container .portfolio_item.odd .portfolio_content {
        order: 1;
    }
}
.portfolio_wrapper .portfolio_container .portfolio_item.odd .portfolio_image {
    order: 1;
}
@media (max-width: 721px) {
    .portfolio_wrapper .portfolio_container .portfolio_item.odd .portfolio_image {
        order: 2;
    }
}
.service_wrapper {
    background: #000231;
    color: #fff;
    padding: 150px 0;
}
@media (max-width: 721px) {
    .service_wrapper {
        padding: 45px 0;
    }
}
.service_wrapper .contentwidth {
    width: auto;
    max-width: unset;
    padding-right: 0;
    margin: 0 auto;
}
.service_wrapper .contentwidth ul {
    padding-left: 20px;
}
.service_wrapper .contentwidth .service_selector {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin: 0 auto 70px;
    width: -moz-max-content;
    width: max-content;
}
.service_wrapper .contentwidth .service_selector .servicename {
    cursor: pointer;
    font-size: 32px;
}
@media (max-width: 721px) {
    .service_wrapper .contentwidth .service_selector .servicename {
        font-size: 18px;
    }
}
.service_wrapper .contentwidth .service_selector .servicename.no_active {
    opacity: 0.5;
}
.service_wrapper .contentwidth .service_container {
    max-width: unset;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    margin-bottom: 90px;
    overflow-x: scroll;
    scrollbar-width: none;
}
@media (max-width: 721px) {
    .service_wrapper .contentwidth .service_container {
        margin-bottom: 40px;
    }
}
.service_wrapper .contentwidth .service_container .service_item {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    margin-right: 150px;
    flex: 0 0 auto;
    transition: all 0.3s;
}
.service_wrapper .contentwidth .service_container .service_item.no_active {
    opacity: 0.5;
}
.service_wrapper .contentwidth .service_container .service_item .service_text {
    width: 640px;
}
@media (max-width: 1351px) {
    .service_wrapper .contentwidth .service_container .service_item .service_text {
        width: 440px;
    }
}
@media (max-width: 721px) {
    .service_wrapper .contentwidth .service_container .service_item .service_text {
        width: 280px;
    }
}
.service_wrapper .contentwidth .service_container .service_item .service_text h2 {
    margin-top: 0;
}
.service_wrapper .contentwidth .service_container .service_item .service_image_text {
    width: 580px;
}
@media (max-width: 1351px) {
    .service_wrapper .contentwidth .service_container .service_item .service_image_text {
        width: 440px;
    }
}
@media (max-width: 721px) {
    .service_wrapper .contentwidth .service_container .service_item .service_image_text {
        width: 280px;
    }
}
.service_wrapper .contentwidth .service_container .service_item .service_image_text img {
    width: 100%;
    height: auto;
}
.service_wrapper .contentwidth .service_container .service_item .service_image_text ul li p {
    margin: 0;
}
.partner_title {
    margin-bottom: 35px;
}
#partner_wrapper {
    overflow: hidden;
    width: 100%;
    background: #fff;
    position: relative;
    height: 100px;
    margin: 150px 0;
}
@media (max-width: 991px) {
    #partner_wrapper {
        margin: 75px 0;
    }
}
@media (max-width: 721px) {
    #partner_wrapper {
        margin: 50px 0;
    }
}
.partnerlogo-track {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    animation: marquee 20s linear infinite;
}
@keyframes marquee {
    0% {
        transform: translate(0);
    }
    to {
        transform: translate(-50%);
    }
}
.partnerlogo {
    min-width: 150px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 100px;
    filter: grayscale(1);
    transition: all 0.2s;
}
.partnerlogo:hover {
    filter: grayscale(0);
}
#footer {
    background: #005080;
    color: #fff;
}
#footer #footer-content {
    padding-top: 60px;
    padding-bottom: 30px;
    min-height: 640px;
    display: flex;
    gap: 70px;
}
#footer #footer-content.contentwidth {
    margin: 0 auto;
}
@media (max-width: 1351px) {
    #footer #footer-content {
        flex-wrap: wrap;
        gap: 40px;
    }
}
@media (max-width: 721px) {
    #footer #footer-content {
        flex-direction: column;
    }
}
#footer #footer-content #footerlogo {
    width: 215px;
}
#footer #footer-content .footer-col.col-1 {
    width: 40%;
    order: 1;
}
@media (max-width: 1351px) {
    #footer #footer-content .footer-col.col-1 {
        width: 100%;
    }
}
#footer #footer-content .footer-col.col-1 iframe {
    margin-top: 60px;
    width: 100%;
    height: calc(100% - 190px) !important;
}
@media (max-width: 1351px) {
    #footer #footer-content .footer-col.col-1 iframe {
        height: 450px !important;
    }
}
#footer #footer-content .footer-col.col-2 {
    position: relative;
    width: 22%;
    order: 2;
}
@media (max-width: 1351px) {
    #footer #footer-content .footer-col.col-2 {
        width: calc(50% - 20px);
        flex: 1 1;
    }
}
@media (max-width: 721px) {
    #footer #footer-content .footer-col.col-2 {
        width: 100%;
        order: 3;
    }
}
#footer #footer-content .footer-col.col-2 #footernavigation {
    margin-left: 0;
    padding-left: 0;
}
#footer #footer-content .footer-col.col-2 #footernavigation li {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    transition: all 0.5s;
}
#footer #footer-content .footer-col.col-2 #footernavigation li:hover {
    padding-left: 15px;
}
#footer #footer-content .footer-col.col-2 #footernavigation li a {
    font-size: 18px;
}
#footer #footer-content .footer-col.col-2 #footernavigation li ul {
    display: none;
}
#footer #footer-content .footer-col.col-2 .address_wrapper {
    position: absolute;
    bottom: 60px;
}
@media (max-width: 1351px) {
    #footer #footer-content .footer-col.col-2 .address_wrapper {
        position: relative;
        bottom: 0;
        margin-top: 50px;
    }
}
#footer #footer-content .footer-col.col-2 .address_wrapper .footer_address {
    font-size: 18px;
    margin-top: 20px;
}
#footer #footer-content .footer-col.col-3 {
    width: 38%;
    border-left: solid 1px #fff;
    padding-left: 75px;
    padding-bottom: 40px;
    order: 3;
}
@media (max-width: 1351px) {
    #footer #footer-content .footer-col.col-3 {
        width: calc(50% - 20px);
        flex: 1 1;
    }
}
@media (max-width: 721px) {
    #footer #footer-content .footer-col.col-3 {
        width: 100%;
        order: 2;
        padding-left: 0;
        border-left: solid 0 #fff;
    }
}
#footer #footer-content .footer-col.col-3 .wrapperform {
    margin-top: 40px;
}
#footer #footer-content .footer-col.col-3 .wrapperform .buttonRow {
    float: right;
}
#footer #footer-content .footer-col.col-3 .wrapperform .formsubmitbtn {
    float: right;
    font-size: 18px;
    background: transparent;
    color: #fff;
    border: solid 1px #fff;
    transition: all 0.35s;
}
#footer #footer-content .footer-col.col-3 .wrapperform .formsubmitbtn:hover {
    color: #fff;
    background-color: #007bc4;
}
#footer #footer_line {
    position: relative;
    display: flex;
    padding-bottom: 30px;
}
#footer #footer_line.contentwidth {
    margin: 0 auto;
}
#footer #footer_line #section_left {
    width: 63%;
}
@media (max-width: 1351px) {
    #footer #footer_line #section_left {
        width: 50%;
    }
}
@media (max-width: 991px) {
    #footer #footer_line #section_left {
        position: relative;
    }
}
#footer #footer_line #section_left #footerlinenavigation {
    padding: 0;
    margin: 0;
}
@media (max-width: 991px) {
    #footer #footer_line #section_left #footerlinenavigation {
        position: absolute;
        bottom: 0;
    }
}
#footer #footer_line #section_left #footerlinenavigation li {
    list-style-type: none;
    float: left;
    margin-right: 25px;
}
#footer #footer_line #section_left #footerlinenavigation li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    opacity: 0.5;
    transition: all 0.3s;
}
#footer #footer_line #section_left #footerlinenavigation li a:hover {
    opacity: 1;
}
#footer #footer_line #section_right {
    font-size: 16px;
    display: flex;
    width: 37%;
}
@media (max-width: 1351px) {
    #footer #footer_line #section_right {
        width: 50%;
    }
}
@media (max-width: 991px) {
    #footer #footer_line #section_right {
        flex-direction: column;
    }
}
#footer #footer_line #section_right .copyright {
    opacity: 0.5;
    width: 65%;
    display: inline-block;
    flex: 1 1 auto;
}
@media (max-width: 991px) {
    #footer #footer_line #section_right .copyright {
        width: 100%;
        order: 2;
        text-align: right;
    }
}
#footer #footer_line #section_right .social_media {
    float: right;
    display: inline-block;
    flex: 1 1 auto;
    text-align: right;
    order: 1;
    margin-bottom: 15px;
}
@media (max-width: 991px) {
    #footer #footer_line #section_right .social_media {
        width: 100%;
    }
}
#footer #footer_line #section_right .social_media .social_media_icon {
    opacity: 0.5;
    width: 36px;
    height: 36px;
    transition: all 0.3s;
    margin-left: 10px;
}
#footer #footer_line #section_right .social_media .social_media_icon:hover {
    opacity: 1;
}
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
textarea,
select {
    border: 1px solid #fff;
    display: inline-block;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px 10px;
    color: #fff;
    font-size: 18px;
    margin-bottom: 15px;
    font-family: Helvetica, Sans-Serif;
}
input[type="color"]::-moz-placeholder,
input[type="date"]::-moz-placeholder,
input[type="datetime-local"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="file"]::-moz-placeholder,
input[type="number"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="text"]::-moz-placeholder,
input[type="time"]::-moz-placeholder,
input[type="url"]::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder {
    color: #fff;
    opacity: 1;
}
input[type="color"]::placeholder,
input[type="date"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="email"]::placeholder,
input[type="file"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder,
input[type="time"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder,
select::placeholder {
    color: #fff;
    opacity: 1;
}
textarea {
    height: 150px;
    font-family: Helvetica, Sans-Serif;
}
input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    box-sizing: border-box;
}
button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border: 1px solid #aaa;
    border-radius: 0;
    -webkit-appearance: none;
    background: #fff;
    color: #000;
    text-align: center;
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
}
button:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background: #bbb;
}
.formRow {
    position: relative;
}
.formRow > label {
    float: left;
    width: 150px;
}
.formRow > input[type="color"],
.formRow input[type="date"],
.formRow input[type="datetime-local"],
.formRow input[type="email"],
.formRow input[type="file"],
.formRow input[type="number"],
.formRow input[type="password"],
.formRow input[type="tel"],
.formRow input[type="text"],
.formRow input[type="time"],
.formRow input[type="url"],
.formRow textarea,
.formRow select {
    float: left;
}
.header_block_content {
    position: relative;
}
.scroll-arrow {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translate(-50%);
    width: 85px;
    height: 85px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    animation: arrow-bounce 1.6s infinite;
    z-index: 5;
}
.scroll-arrow svg {
    width: 60px;
    height: 60px;
    fill: currentColor;
    color: #fff;
}
@keyframes arrow-bounce {
    0%,
    20%,
    50%,
    80%,
    to {
        transform: translate(-50%) translateY(0);
    }
    40% {
        transform: translate(-50%) translateY(-10px);
    }
    60% {
        transform: translate(-50%) translateY(-6px);
    }
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
}
.service-card {
    position: relative;
    height: 535px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
}
.service-card:nth-child(1) {
    animation-delay: 0.2s;
}
.service-card:nth-child(2) {
    animation-delay: 0.3s;
}
.service-card:nth-child(3) {
    animation-delay: 0.4s;
}
.service-card:nth-child(4) {
    animation-delay: 0.5s;
}
.service-card:nth-child(5) {
    animation-delay: 0.6s;
}
.service-card:nth-child(6) {
    animation-delay: 0.7s;
}
.service-card img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover img {
    transform: scale(1.1);
}
.service-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 40px 30px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover .service-overlay {
    background: linear-gradient(to top, #000000fa, #000000d9 80%, #0000004d);
    padding: 50px 30px;
}
.service-number {
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 10px;
    opacity: 0.7;
}
.service-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
    color: transparent;
}
.service-card:hover .service-title {
    transform: translateY(-5px);
    background: linear-gradient(135deg, #fff, #005080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.service-description {
    font-size: 1rem;
    color: transparent;
    line-height: 1.6;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover .service-description {
    max-height: 300px;
    opacity: 1;
    margin-top: 15px;
    color: #fff;
}
.service-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background: linear-gradient(135deg, #005080, #116a9f);
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 5px 20px #d4af374d;
}
.service-card:hover .service-button {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.service-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px #d4af3780;
}
.service-accent {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #005080 0%, transparent 100%);
    opacity: 0;
    transition: all 0.5s ease;
}
.service-card:hover .service-accent {
    opacity: 1;
    width: 100px;
}
@media (max-width: 768px) {
    .header h1 {
        font-size: 2.5rem;
    }
    .services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .service-card {
        height: 400px;
    }
}
.cta-section {
    text-align: center;
    margin-top: 80px;
    padding: 60px 40px;
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.cta-button {
    display: inline-block;
    padding: 18px 45px;
    background: linear-gradient(135deg, #005080, #116a9f);
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px #d4af374d;
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px #d4af3766;
}
.tiles_wrapper.contentwidth {
    margin-bottom: 0;
}
.tiles_container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: stretch;
}
@media (max-width: 991px) {
    .tiles_container {
        gap: 40px;
    }
}
@media (max-width: 721px) {
    .tiles_container {
        gap: 15px;
    }
}
.tiles_container .single_tile {
    flex: 0 0 calc(33.333% - 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
    position: relative;
}
@media (max-width: 991px) {
    .tiles_container .single_tile {
        flex: 0 0 calc(50% - 20px);
    }
}
@media (max-width: 721px) {
    .tiles_container .single_tile {
        flex: 0 0 calc(50% - 7.5px);
    }
}
.tiles_container .single_tile .tile_image {
    width: 100%;
    height: 520px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
@media (max-width: 1351px) {
    .tiles_container .single_tile .tile_image {
        height: 400px;
    }
}
@media (max-width: 1051px) {
    .tiles_container .single_tile .tile_image {
        height: 300px;
    }
}
@media (max-width: 721px) {
    .tiles_container .single_tile .tile_image {
        height: 200px;
    }
}
.tiles_container a {
    color: #000;
}
.teampage .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}
.teampage .service-card {
    position: relative;
    height: 600px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    background: #005080;
}
.teampage .service-card:nth-child(1) {
    animation-delay: 0.2s;
}
.teampage .service-card:nth-child(2) {
    animation-delay: 0.3s;
}
.teampage .service-card:nth-child(3) {
    animation-delay: 0.4s;
}
.teampage .service-card:nth-child(4) {
    animation-delay: 0.5s;
}
.teampage .service-card:nth-child(5) {
    animation-delay: 0.6s;
}
.teampage .service-card:nth-child(6) {
    animation-delay: 0.7s;
}
.teampage .service-card img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -o-object-position: top center;
    object-position: top center;
}
.teampage .service-card:hover img {
    transform: scale(1.1);
}
.teampage .service-overlay {
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 40px 30px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.teampage .service-card:hover .service-overlay {
    background: linear-gradient(to top, #000000fa, #000000d9 80%, #0000004d);
    padding: 50px 30px;
    bottom: 0;
}
.teampage .service-number {
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 10px;
    opacity: 0.7;
}
.teampage .service-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
    color: transparent;
}
.teampage .service-card:hover .service-title {
    transform: translateY(-5px);
    background: linear-gradient(135deg, #fff, #005080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.teampage .service-description {
    font-size: 1rem;
    line-height: 1.6;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    color: transparent;
}
.teampage .service-card:hover .service-description {
    max-height: 200px;
    opacity: 1;
    margin-top: 15px;
    color: #fff;
}
.teampage .service-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background: linear-gradient(135deg, #005080, #116a9f);
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 5px 20px #d4af374d;
}
.teampage .service-card:hover .service-button {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.teampage .service-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px #d4af3780;
}
.teampage .service-accent {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #005080 0%, transparent 100%);
    opacity: 0;
    transition: all 0.5s ease;
}
.teampage .service-card:hover .service-accent {
    opacity: 1;
    width: 100px;
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 721px) {
    .teampage .header h1 {
        font-size: 2.5rem;
    }
    .teampage .services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
.teampage .cta-section {
    text-align: center;
    margin-top: 80px;
    padding: 60px 40px;
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.teampage .cta-button {
    display: inline-block;
    padding: 18px 45px;
    background: linear-gradient(135deg, #005080, #116a9f);
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px #d4af374d;
}
.teampage .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px #d4af3766;
}
.form_wrapper {
    margin: 200px 0;
}
@media (max-width: 991px) {
    .form_wrapper {
        margin: 150px 0;
    }
}
@media (max-width: 721px) {
    .form_wrapper {
        margin: 100px 0;
    }
}
.form_wrapper .form_container {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
@media (max-width: 721px) {
    .form_wrapper .form_container {
        flex-direction: column;
        gap: 0;
    }
}
.form_wrapper .form_container > div {
    width: 50%;
}
@media (max-width: 721px) {
    .form_wrapper .form_container > div {
        width: 100%;
    }
}
.form_wrapper .form_container .form_content {
    padding-right: 250px;
}
@media (max-width: 991px) {
    .form_wrapper .form_container .form_content {
        padding-right: 125px;
    }
}
@media (max-width: 721px) {
    .form_wrapper .form_container .form_content {
        padding-right: 0;
    }
}
.form_wrapper .form_container .form {
    position: relative;
}
.form_wrapper .form_container .form input,
.form_wrapper .form_container .form textarea,
.form_wrapper .form_container .form select {
    width: 100%;
    margin-bottom: 15px;
    border: 2px solid #000;
    box-sizing: border-box;
    color: #000;
}
.form_wrapper .form_container .form input::-moz-placeholder,
.form_wrapper .form_container .form textarea::-moz-placeholder,
.form_wrapper .form_container .form select::-moz-placeholder {
    color: #000;
    opacity: 1;
}
.form_wrapper .form_container .form input::placeholder,
.form_wrapper .form_container .form textarea::placeholder,
.form_wrapper .form_container .form select::placeholder {
    color: #000;
    opacity: 1;
}
.form_wrapper .form_container .form .buttonRow {
    float: right;
}
.form_wrapper .form_container .form .upload-container {
    display: inline-block;
    margin-bottom: 15px;
}
.form_wrapper .form_container .form .file-upload-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 10px;
}
.form_wrapper .form_container .form .file-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
}
.form_wrapper .form_container .form .upload-button {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 11px 19px 11px 0;
}
.form_wrapper .form_container .form .upload-button.dragover {
    border-color: #007bc4;
    background-color: #e3f2fd;
}
.form_wrapper .form_container .form .upload-icon {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.form_wrapper .form_container .form .file-info {
    margin-top: 12px;
    padding: 12px;
    border: 2px solid #000;
    font-size: 14px;
    color: #000;
    display: none;
    margin-bottom: 15px;
}
.form_wrapper .form_container .form .file-info.show {
    display: block;
}
.form_wrapper .form_container .form .file-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.form_wrapper .form_container .form .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid #000;
}
.form_wrapper .form_container .form .file-item:last-child {
    border-bottom: none;
}
.form_wrapper .form_container .form .file-details {
    flex: 1;
}
.form_wrapper .form_container .form .remove-file {
    margin-left: 8px;
    color: #d32f2f;
    cursor: pointer;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.form_wrapper .form_container .form .remove-file:hover {
    color: #b71c1c;
    background-color: #d32f2f1a;
}
.form_wrapper .form_container .form .file-count {
    font-weight: 600;
    margin-bottom: 8px;
    color: #007bc4;
}
.form_wrapper .form_container .form .formsubmitbtn {
    float: right;
    font-size: 18px;
    background: transparent;
    color: #000;
    border: solid 2px #000;
    transition: all 0.35s;
}
.form_wrapper .form_container .form .formsubmitbtn:hover {
    color: #fff;
    background-color: #007bc4;
}

/* --- Formulare: Honigtopf und Rueckmeldung ------------------------------
   Ergaenzt beim Umbau der Formulare auf die eigenen PHP-Endpunkte
   (siehe api/ und _tools/forms_to_graph.py). */

/* Das Honigtopf-Feld darf fuer Menschen nicht sichtbar sein, aber auch nicht
   per display:none - genau darauf achten manche Bots. Es wird deshalb aus dem
   sichtbaren Bereich geschoben und aus der Tabulatorreihenfolge genommen. */
.formHoneypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Der Statusbereich erscheint an zwei sehr verschiedenen Stellen: im
   Kontaktformular der Fusszeile auf dunklem Blau (#005080, weisse Schrift)
   und im Bewerbungsformular auf hellem Grund. Ein Farbton, der sich an die
   Umgebung anlehnt, ist auf einem von beiden unlesbar - deshalb eine eigene
   helle Flaeche mit dunkler Schrift, die auf jedem Untergrund steht. Der
   farbige Balken links unterscheidet Erfolg von Fehler; die Schriftfarbe
   allein traegt die Aussage nicht. */
.formStatus {
    margin: 0 0 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-left-width: 4px;
    border-left-style: solid;
    color: #1a1a1a;
    font-size: 0.95em;
    line-height: 1.45;
}

.formStatus--ok {
    border-left-color: #1b7a43;
    color: #14532d;
}

.formStatus--fehler {
    border-left-color: #b3261e;
    color: #7f1d1d;
}

/* Waehrend des Sendens ist die Schaltflaeche gesperrt. */
.ltform input[type="submit"][disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* --- Karte hinter der Einwilligung --------------------------------------
   Steht anstelle des Google-Maps-iframes, bis die Zustimmung vorliegt.
   Groesse und Rahmen orientieren sich am iframe, damit der Fussbereich
   beim Nachladen nicht springt. */

.mapsPlatzhalter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 200px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.mapsPlatzhalter p {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.45;
}

.mapsPlatzhalter_knopf {
    align-self: flex-start;
    margin-top: 4px;
    padding: 8px 18px;
    font: inherit;
    font-size: 0.85em;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    cursor: pointer;
}

.mapsPlatzhalter_knopf:hover,
.mapsPlatzhalter_knopf:focus {
    background: rgba(255, 255, 255, 0.12);
}


/* --- Sprachumschaltung ---------------------------------------------------
   Letzter Eintrag der Hauptnavigation. Bewusst zurueckhaltend: Sie steht
   neben den Inhaltspunkten, soll ihnen aber nicht die Aufmerksamkeit nehmen. */

#navigation .sprachwahl > a {
    letter-spacing: 0.06em;
    opacity: 0.75;
}

#navigation .sprachwahl > a:hover,
#navigation .sprachwahl > a:focus {
    opacity: 1;
}

/* --- Karten auf Geraeten ohne Mauszeiger --------------------------------
   Die Karten auf der Portfolio- und der Teamseite geben ihren Inhalt erst
   beim Ueberfahren mit der Maus preis: Die Ueberschrift steht auf
   color:transparent, die Beschreibung auf max-height:0 und opacity:0, und die
   Ueberlagerung liegt 100 px unterhalb des Kastens.

   Auf einem Touchgeraet gibt es kein Ueberfahren. Dort blieben die Karten
   stumm - auf der Teamseite sah man neunzehn Fotos ohne einen einzigen Namen,
   ohne Funktion und ohne Adresse.

   (hover: none) trifft genau die Geraete ohne Mauszeiger, unabhaengig von der
   Fensterbreite; die Breitenangabe ist der Rueckfallweg fuer Browser, die das
   nicht auswerten. */

@media (hover: none), (max-width: 768px) {
    .service-overlay,
    .teampage .service-overlay {
        bottom: 0;
        background: linear-gradient(to top, #000000fa, #000000d9 80%, #0000004d);

        /* Knapper als in der Mausfassung (50 px): Die Karte hat eine feste
           Hoehe und schneidet ab, was darueber hinausgeht. Bei 768 px Breite
           fehlten sonst sieben Pixel und die oberste Zeile wurde angeschnitten. */
        padding: 22px 20px;
    }

    .service-title,
    .teampage .service-title {
        color: #fff;
        -webkit-text-fill-color: #fff;
        background: none;
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .service-description,
    .teampage .service-description {
        max-height: none;
        opacity: 1;
        overflow: visible;
        color: #fff;
        margin-top: 6px;
    }

    /* Karten mit vielen Zeilen - etwa jemand mit drei Funktionen - sprengten
       sonst die feste Kastenhoehe, und die oberste Zeile wurde abgeschnitten. */
    .service-overlay p,
    .teampage .service-overlay p {
        margin: 0 0 4px;
    }

    /* Die Adresse ist ein Verweis und soll als solcher erkennbar sein. */
    a.service-description {
        display: inline-block;
        text-decoration: underline;
        overflow-wrap: anywhere;
    }

    .service-button {
        opacity: 1;
        transform: none;
    }
}

/* --- picture als Block --------------------------------------------------
   Bei der Umstellung auf WebP wurden die Bilder in <picture> gefasst. Dieses
   Element ist standardmaessig inline und sitzt damit auf der Textgrundlinie -
   darunter bleibt ein Spalt von wenigen Pixeln. In Kaesten mit fester Hoehe
   und overflow:hidden ragt es dadurch unten heraus und die Karte schneidet ab.

   Die Bilder selbst waren schon vorher gestaltet; nur die neue Huelle braucht
   diese Angabe. */

picture {
    display: block;
}

/* <source> stellt selbst nichts dar, belegt aber als Inline-Element eine
   Zeile und schob den Kasteninhalt um vier Pixel nach unten. In Karten mit
   fester Hoehe genuegte das, um unten abzuschneiden. */
picture > source {
    display: none;
}

.service-card picture,
.teampage .service-card picture {
    height: 100%;
}

/* --- Sicherheitsfrage ----------------------------------------------------
   Die Frage steht als Beschriftung ueber dem Antwortfeld. Sie wird vom Server
   geholt und erst dann eingesetzt; bis dahin steht dort ein Hinweis. */

.formFrage .formFrage_label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9em;
    line-height: 1.4;
}

/* Im Fussbereich steht das Formular auf dunklem Blau, auf der Team-Seite auf
   hellem Grund. Die Beschriftung erbt daher die Schriftfarbe ihrer Umgebung. */
.formFrage .formFrage_label {
    color: inherit;
}

/* Das Antwortfeld braucht nicht die volle Breite - es steht dort eine Zahl. */
.formFrage input[type="text"] {
    max-width: 180px;
}

@media (max-width: 721px) {
    .formFrage input[type="text"] {
        max-width: 100%;
    }
}

/* --- Anfrage-Knoepfe: der untere Rahmen fehlte ---------------------------
   Die Knoepfe sind inline ausgezeichnet. Ihre Hoehe entsteht damit aus der
   Textzeile: 18px mal Zeilenhoehe 1,4 ergibt 25,2px, und der ganze Kasten
   sitzt an einer gebrochenen Position. Bei einer Bildschirmskalierung von
   125, 150 oder 175 Prozent - unter Windows der Normalfall - faellt die
   Unterkante dadurch zwischen zwei Geraetepixel und wird nur halb oder gar
   nicht gezeichnet. Die Oberkante rastet ein, die Unterkante nicht; deshalb
   fehlte immer nur der untere Rahmen.

   Es genuegt nicht, die Zeilenhoehe ganzzahlig zu machen - entscheidend ist,
   dass die Hoehe des Kastens in Geraetepixeln aufgeht. Dann rundet der
   Browser Ober- und Unterkante gleich. 52 und 48 sind durch vier teilbar und
   ergeben bei 125, 150 und 175 Prozent jeweils ganze Pixel.

   Nachgemessen bei 100, 110, 125, 150, 175 und 200 Prozent. */
.content_button,
.header_block_content .slide_content .slide_content_inner .slide_button {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    height: 52px; /* 52 ist durch 4 teilbar: 65, 78 bzw. 91 Geraetepixel */
    line-height: 50px;
    padding: 0 35px;
}

@media (max-width: 721px) {
    .content_button,
    .header_block_content .slide_content .slide_content_inner .slide_button {
        height: 48px; /* 60, 72 bzw. 84 Geraetepixel */
        line-height: 46px;
        padding: 0 30px;
    }
}

/* Der Knopf wurde bisher per position/top nach unten geschoben, ohne dass
   dafuer Platz entstand - er ragte knapp aus seinem Block heraus. Ein
   Aussenabstand bewirkt dieselbe Verschiebung und reserviert den Platz. */
.button_container {
    top: 0;
    margin-top: 25px;
}

/* Auf Geraeten ohne Mauszeiger gibt es kein Hover, mit dem sich die
   zurueckgenommene Deckkraft der Sprachwahl wieder aufhellen liesse. Im
   ausgeklappten Menue stand "EN" deshalb dauerhaft blasser als die uebrigen
   Eintraege. Dort also volle Deckkraft. */
@media (hover: none) {
    #navigation .sprachwahl > a {
        opacity: 1;
    }
}

/* --- Flagge neben der Sprachwahl ----------------------------------------
   Welche Flagge gezeigt wird, steht schon im Markup: Der Verweis traegt das
   hreflang der Zielsprache. Es braucht also keine zweite Auszeichnung und
   auch keinen Eingriff in die 24 Seiten - die Auswahl geschieht hier.

   Die Flagge ist reine Verzierung: Sie steckt im ::before und wird deshalb
   von Vorlesegeraeten nicht mitgelesen. Die Beschriftung DE beziehungsweise
   EN bleibt die eigentliche Aussage. */
#navigation .sprachwahl > a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

#navigation .sprachwahl > a::before {
    content: "";
    flex: none;
    width: 22px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    border-radius: 2px;
    /* Heller Rahmen, damit die weissen Flaechen der Flaggen nicht mit dem
       Weiss der Navigation verschwimmen. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

#navigation .sprachwahl > a[hreflang="de"]::before {
    background-image: url(/assets/img/flagge-de.svg);
}

#navigation .sprachwahl > a[hreflang="en"]::before {
    background-image: url(/assets/img/flagge-en.svg);
}

/* --- Weiche Uebergaenge zwischen den Seiten --------------------------------
   Jeder Klick laedt weiterhin ein eigenes Dokument - daran aendert sich
   nichts. Der Browser blendet den Wechsel jetzt aber ueber, statt die alte
   Seite wegzunehmen und die neue hinzustellen. Das ist der Rest dessen, was
   als "Refresh-Flackern" zu sehen war.

   Zwei Zeilen, kein JavaScript. Browser, die das nicht kennen, zeigen
   weiterhin den harten Wechsel - es geht nichts verloren.

   Bewusst nur das Dokument als Ganzes und keine einzeln benannten Elemente:
   Der Kopf ist auf der Startseite ein grosser Bildwechsler und auf den
   Unterseiten ein schmaler Streifen. Die beiden ineinander zu verwandeln
   sieht schlechter aus als ein ruhiges Ueberblenden. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 200ms;
    animation-timing-function: ease;
}

/* Wer in den Systemeinstellungen weniger Bewegung verlangt hat, bekommt
   keine. Das ist kein Schoenheitsfehler, den man in Kauf nimmt: Fuer
   Menschen mit vestibulaerer Stoerung koennen Uebergaenge Schwindel und
   Uebelkeit ausloesen. */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* --- Kopfbild und Kopftext auf dieselbe Hoehe bringen ----------------------
   Das uebernommene Theme staffelt die Hoehe des Kopfblocks nach
   Bildschirmbreite - 920px, ab 991px dann 800px, ab 721px noch 650px. Die
   Ebene dahinter, also das Bild samt Verdunklung, blieb dabei auf festen
   920px stehen.

   Am Schreibtisch faellt das nie auf, weil dort beide 920px hoch sind. Auf
   dem Handy ragte das Bild 270px ueber den Kopfblock hinaus und lag damit
   hinter den ersten Textzeilen: weisse Schrift auf hellem Foto, praktisch
   unlesbar. Betroffen war jede Seite mit Kopfbild.

   Die Hoehe steht deshalb jetzt an genau einer Stelle. Wer sie aendert,
   aendert Bild und Text gemeinsam - auseinanderlaufen koennen sie nicht
   mehr. Die Haltepunkte sind die des Themes, damit sich sonst nichts
   verschiebt. */
:root {
    --kopfhoehe: 920px;
}

@media (max-width: 991px) {
    :root {
        --kopfhoehe: 800px;
    }
}

@media (max-width: 721px) {
    :root {
        --kopfhoehe: 650px;
    }
}

/* Die Selektoren sind absichtlich so umstaendlich wie im Theme: Sie muessen
   die dortige Spezifitaet erreichen, sonst greift die Korrektur nicht. */
#fullscreen-bg,
#fullscreen-bg #overlay,
#fullscreen-bg #header_slides .single_header_slide,
.header_block_content {
    height: var(--kopfhoehe);
}

/* --- Umbau 10/2026: bisher Inline-Stile im Markup ------------------------- */

/* Unsichtbarer Anker am unteren Rand des Kopfbereichs - Ziel des Pfeils nach unten. */
.header-bottom-anchor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
}

/* Sprungziel "Jobs" etwas oberhalb des Formulars, damit die feste Kopfleiste nichts verdeckt. */
#jobs {
    position: absolute;
    margin-top: -150px;
}

.form_wrapper .form_container .form .file-remove-all {
    text-align: center;
    margin-top: 10px;
}

/* --- Karte: Zwei-Klick-Lösung (ersetzt das Cookie-Banner) ------------------- */

.mapsPlatzhalter_merken {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    cursor: pointer;
}

.mapsPlatzhalter_merken input {
    width: auto;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

/* Formularzeilen schließen ihre Umflüsse selbst (ersetzt die leeren
   <div class="clearingItem"> nach jedem Feld, die das CMS erzeugt hat). */
.formRow::after {
    content: "";
    display: block;
    clear: both;
}

/* --- Kopfbilder: Überblenden ohne slick (Umbau 10/2026) -------------------- */
/* Alle Bilder liegen übereinander; sichtbar ist das mit .aktiv. Ein Bild bekommt
   sein Hintergrundbild erst mit .bereit (setzt site.js kurz vor dem Wechsel),
   vorher lädt der Browser es nicht. Die Adressen stehen als CSS-Variablen am
   Element: --bild (volle Breite) und --bild-halb (für schmale Bildschirme). */
#fullscreen-bg #header_slides .single_header_slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#fullscreen-bg #header_slides .single_header_slide.bereit {
    background-image: var(--bild);
}

#fullscreen-bg #header_slides .single_header_slide.aktiv {
    opacity: 1;
}

/* Halbe Größe nur bei schmalem Bildschirm UND normaler Pixeldichte – auf
   hochauflösenden Handys würde das 960-px-Bild sichtbar weicher. */
@media (max-width: 800px) and (max-resolution: 1.5dppx) {
    #fullscreen-bg #header_slides .single_header_slide.bereit {
        background-image: var(--bild-halb, var(--bild));
    }
}

/* Hinweis unter „Dateiupload“: erlaubte Anzahl, Typen und Größen (aus secrets.php). */
.form_wrapper .form_container .form .file-hinweis {
    margin: -4px 0 10px;
    font-size: 14px;
    color: #555;
}