@charset "UTF-8";
/*!
Theme Name: georgsberg Webdev
Description: WordPress Theme aus HTML Template des georgsberg WEB Development Lehrgangs. Hier die Doku dazu https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/
Author: julian
Author URI: https://stmk.georgsberg.at/
Text Domain: georgsberg
Version: 0.1
*/


/*!
 ------------------------------------> THIS CSS NEEDS TO BE MINIFIED <------------------------------------
*/

:root{
    --Background-color: #F4F4F4;
    --Primary-color: #1a203d;
    --Secondary-color: #FFFFFF;
    --Accent-color: #f14090;
    --Border-color: #28315e;
    --Focus-Outline-color: #36B1DD;
    --headline-color: #302C26;
    
    --meunu-depth-2: #202a5e;
    --meunu-depth-3: #3e497e;
    --meunu-depth-4: #60678b;



    --Primary-color-transparent: rgba(5, 5, 5, 0.5);
    --Secondary-color-transparent: rgba(255, 255, 255, 0.5);

    
    --default-margin-top: 50px;
    --default-margin-bottom: 50px;
    --default-margin-left: 7%;
    --default-margin-right: 7%;
    --default-margin-bottom-headline: 40px;
    --default-border-radius: 12px;

    --nav-height-desktop: 150px;
    --nav-height-mobil: 100px;

}




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


*:focus-visible {
    outline: 2px solid var(--Focus-Outline-color);
}

html{
    margin-top: 0 !important;
}

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Amatic SC", sans-serif;
    background-color: var(--Background-color);
    font-size: 18px;
}

form {
    div {
        margin-bottom: 10px;
    }
    textarea {
        width: 255px;
        height: 100px;
    }
    h2 {
        margin-bottom: 10px;
    }
}



.is-style-title{
    font-size: 1rem;
    color: var(--Accent-color);
}

.is-style-subheading{
    font-size: 1rem;
    color: var(--Accent-color);
    margin-bottom: 0;
}

.is-style-seperator{

    &::after{
        font-weight: normal;
        display: block;
        font-size: 1rem;
        color: var(--Accent-color);
        content: "//";
    }
}


h1{
    font-size: 2.5rem;
}
h2{
    font-size: 2.2rem;
}
h3{
    font-size: 1.8rem;
}
h4{
    font-size: 1.2rem;
}
h5{
    font-size: 1rem;
}
h6{
    font-size: 0.9rem;
}



a {
    color: var(--Accent-color);
    &:hover{
        text-decoration: none;
    }
    &:active{
        color: var(--Primary-color);
        text-decoration: underline;
    }
}


a {
    white-space: normal;       
    word-break: normal;        
    overflow-wrap: break-word; 
}


.wp-block-button__link {
    text-align: center;
    width: auto;
    min-height: 2em;
    border: none;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    white-space: nowrap;
    padding: 0 20px 0 20px;
    text-decoration: none;
    line-height: 2em;
    border-radius: 0;
    background-color: var(--Accent-color);
    color: var(--Secondary-color);

    &:hover{
        background-color: var(--Primary-color);
    }
    &:focus{
        outline-offset: 0;
    }
    &:active{
        background-color: var(--Primary-color);
        color: var(--Accent-color);
        text-decoration: none;
    }
}


.error-message {
    color: #d63638;
    background-color: #fcf0f1;
    margin-bottom: 15px;
    
}

.success-message {
    color: #00a32a;
    background-color: #f0f6fc;
    margin-bottom: 15px;
    
}

#navbar{

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--nav-height-mobil);
    background-color: var(--Primary-color);
    z-index: 10000;
    
    
    @media screen and (min-width: 1100px) {
        width: 95%;
        max-width: 350px;
        height: 100%;
        overflow: scroll;
        overflow-x: auto;
        overflow-y: auto;
    }

    .nav-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--nav-height-mobil);

        @media screen and (min-width: 1100px) {
            height:var(--nav-height-desktop);
        }

        .logo{


            margin-left: 20px;
            margin-right: 10px;
            a{
                img{
                    width: auto;
                    height: 95px;

                    @media screen and (min-width: 1100px) {
                        height: 140px;
                    }


                }
            }
        }

        #menu-toggle{
            display: none;
        }

        #menu-toggle:checked{

            ~ .burger span{
                &:nth-child(1){
                    transform: translateY(24px) rotate(45deg);
                }
                &:nth-child(2){
                    opacity: 0;
                }
                &:nth-child(3){
                    transform: translateY(-24px) rotate(-45deg);
                }
            }

            ~ .menu-container{
                display: flex;
                flex-direction: column;
            }
        }

        .menu-container{

            /* ----------------------------------- Start of Basemenu (depth 1) ----------------------------------- */
            overflow: auto;
            display: none;
            background-color: var(--Primary-color);
            position: fixed;
            top: var(--nav-height-mobil);
            bottom: 0;
            width: 95%;
            max-width: 350px;

            @media screen and (min-width: 1100px) {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: var(--nav-height-desktop);
                width: 100%;
                bottom: 0;
            }


            #primary > li > a {
                display: flex;
                align-items: center;
                justify-content: left;
                padding-right: 0;
                font-size: 1.7rem;
                text-decoration: none;
                color: var(--Secondary-color);
                background-color: var(--Primary-color);
                border-top: 1px solid var(--Border-color); 
                padding-left: 20px;
                height: 40px;

                &:hover{
                    color: var(--Accent-color);
                }
            }

            #primary > li:last-child > a{
                border-bottom: 1px solid var(--Border-color);    
            }

            #primary > li:last-child.active > a{
                border-bottom: unset;
            }

            /* ----------------------------------- End of Basemenu (depth 1) ----------------------------------- */




            /* ----------------------------------- Start of Submenu (generisch) ----------------------------------- */

            /* Alle Submenüs standardmäßig verstecken (geschlossen) */
            #primary .menu-item-has-children > .sub-menu {
                display: none;
            }

            /* Anzeigen, wenn der Toggle aktiv ist */
            #primary .menu-item-has-children:has(> .sub-menu-toggle-label.active) > .sub-menu {
                display: unset;
            }

            /* Positionierung für alle Ebenen mit Children */
            #primary .menu-item-has-children {
                position: relative;
            }

            /* Gemeinsame Link-Basis-Styles für alle Submenü-Ebenen */
            #primary .menu-item-has-children.active > .sub-menu > li > a {
                display: flex;
                align-items: center;
                justify-content: left;
                padding-right: 0;
                font-size: 1.7rem;
                text-decoration: none;
                color: var(--Secondary-color);
                border-top: 1px solid var(--Border-color);
                padding-left: 20px;
                height: 40px;

                &:hover{
                    color: var(--Accent-color);
                }
            }

            /* Hintergrundfarben pro Ebene über CSS-Variablen steuern */
            /* Tiefe 2 */
            #primary > .menu-item-has-children > .sub-menu { 
                --submenu-link-bg: var(--meunu-depth-2); 
            }
            /* Tiefe 3 */
            #primary > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu { 
                --submenu-link-bg: var(--meunu-depth-3); 
            }
            /* Tiefe 4 */
            #primary > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu { 
                --submenu-link-bg: var(--meunu-depth-4); }

            /* Die tatsächlich verwendete Hintergrundfarbe anwenden */
            #primary .menu-item-has-children.active > .sub-menu > li > a { 
                background-color: var(--submenu-link-bg); /* anwenden der je Ebene gesetzten Farbe */ }

            /* Gemeinsame Toggle-Styles (Pfeil/Line) für alle Ebenen */
            #primary .menu-item-has-children > .sub-menu-toggle-label {
                width: 70px;
                height: 40px;
                position: absolute;
                right: 0;
                top: 0;
                background: none;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }

            
            #primary .menu-item-has-children > .sub-menu-toggle-label > .toggle-arrow {
                color: var(--Secondary-color);
                text-decoration: none;
                rotate: 90deg; /* zeigt nach rechts (geschlossen) */
            }
            
            #primary .menu-item-has-children > .sub-menu-toggle-label.active > .toggle-arrow {
                display: none;
            }

            #primary .menu-item-has-children > .sub-menu-toggle-label.active > .line {
                display: block;
                background-color: var(--Secondary-color);
                height: 4px;
                width: 16px;
                border-radius: 2px; /* als Minus-Symbol (offen) */
            }
            
            #primary .menu-item-has-children > .sub-menu-toggle-label {
                &:hover{
                    .toggle-arrow { color: var(--Accent-color); }
                    .line { background-color: var(--Accent-color); }
                }
            }
            /* ----------------------------------- End of Submenu (generisch) ----------------------------------- */



            .nav-contact-container{
                margin-top: 20px;
                display: flex;
                flex-grow: 1;
                background-color: var(--Primary-color);
                padding-left: 20px;
                align-items: end;
                font-family: sans-serif;
    
                .nav-contact{
                    padding-bottom: 10px;
                    .nav-contact-element,
                    .nav-contact-icon{
                        color: var(--Secondary-color);
                        text-decoration: none;
                        margin-bottom: 10px;
                        &:hover{
                            color: var(--Accent-color);
                        }
                    }
                    .nav-contact-element{
                        display: block;
                    }
                    .nav-contact-icon{
                        display: inline-block;
                        font-size: 1.67rem;
                    }
                }
            }
        }

        .burger {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 62px;
            height: 52px;
            cursor: pointer;
            margin-right: 20px;
    
            span {
                width: 62px;
                height: 4px;
                background-color: var(--Accent-color);
                border-radius: 2px;
                transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
            }
    
            @media screen and (min-width: 1100px) {
                display: none;
            }
        }
    }
}


/* Aktives Menü-Item farblich hervorheben (ohne verschachtelte Syntax) */
#navbar .nav-container .menu-container #primary li.current-menu-item > a,
#navbar .nav-container .menu-container #primary li.current_page_item > a {
    color: var(--Accent-color) !important;
}
/* Gleiche Regel für Links innerhalb geöffneter Submenüs */
#navbar .nav-container .menu-container #primary .menu-item-has-children.active > .sub-menu > li.current-menu-item > a,
#navbar .nav-container .menu-container #primary .menu-item-has-children.active > .sub-menu > li.current_page_item > a {
    color: var(--Accent-color) !important;
}





.hero > .wp-block-cover__inner-container > h1{
    margin-top: 1rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 40rem;
}



.contact-container > figure > img{
    border: 1px solid var(--Primary-color);
    object-fit: cover;
}
.standorte-container > div > p{
    margin: 0;
}
.wp-block-group.standorte-container > div {
    margin-top: 50px;
}

:where(.is-layout-flex.standorte-container) {
    gap: 10%;
}





main{

    background-color: var(--Background-color);
    padding-top: var(--nav-height-mobil);
    flex: 1;

    @media screen and (min-width: 1100px) {
        padding-left: 350px;
        padding-top: unset;
    }

    > div {
        margin-left: var(--default-margin-left);
        margin-right: var(--default-margin-right);
        margin-top: var(--default-margin-top);
        margin-bottom: var(--default-margin-bottom);
        
        &:first-child{
            margin-top: 0;
            margin-bottom: 0;
        }

        &.works-container{
            margin-top: 50px;
        }
    }

    .wp-block-spacer{
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .wp-block-cover{
        margin-left: 0;
        margin-right: 0;
    }

    .hero{
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-bottom: 6px solid var(--Accent-color);
        min-height: 23.33rem;
        padding-left: 7%;
        padding-right: 7%;

        @media screen and (min-width: 1100px) {
            min-height: calc(100vh - var(--nav-height-mobil));
        }

        .wp-block-cover__inner-container{
            max-width: 30rem;  
            h1 {
                color: var(--headline-color);
                background: var(--Secondary-color);
                display: inline;
                line-height: 1.35em;

            }
        }
    }





    .single-hero{
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-bottom: 6px solid var(--Accent-color);
        display: flex;
        align-items: center;
        margin: 0;
        height: calc(100vh - var(--nav-height-mobil));
        @media screen and (min-width: 1100px) {
            height: 350px;
        }

        .headline{

            color: var(--headline-color);
            margin-left: var(--default-margin-left);
            margin-right: var(--default-margin-right);

            h1{
                background: var(--Secondary-color);
                display: inline;
                line-height: 3.333rem; 
            }
        }
    }



    .wp-block-group{
        margin: 0;
    }


    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        margin-left: var(--default-margin-left) !important;
        margin-right: var(--default-margin-right) !important;
    }

    .wp-block-media-text{
        >figure{
            border: 1px solid var(--Primary-color);

            img {
                aspect-ratio: 1 / 1;
                object-fit: cover;
            }
        }

        gap: 20px;

        >.wp-block-media-text__content{
            padding: 0;

            .wp-block-heading{
                color: var(--headline-color);
                margin: 0;
            }

            .is-style-title{
                font-size: 1rem;
                color: var(--Accent-color);
            }            
        }

        
        .wp-block-buttons{
            margin-top: 30px;
        }

    }




    .headline-container{
        margin-top: var(--default-margin-top);
    }
    .headline-container > *{
        margin-bottom: var(--default-margin-bottom-headline);
        &:last-child{
            margin-bottom: 0;
        }
    }


    .text-container{

        h2{
            font-weight: normal;
        }

        margin-top: var(--default-margin-top);
        
        .is-style-title{
            margin-bottom: var(--default-margin-bottom-headline);
        }
    }




    .headline-container-2{

        margin-top: var(--default-margin-top);

        h1, h2, h3, h4, h5, h6{
            margin-bottom: var(--default-margin-bottom-headline)
        }
    }
    .headline-container-2 > *{
        margin-bottom: var(--default-margin-bottom-headline);
        &:last-child{
            margin-bottom: 0;
        }
    }
    .headline-container-2 > p{
        margin-bottom: 0;
    }

    .button{
        margin-top: var(--default-margin-top);
    }


    .post-item-container{
        margin-top: 25px;

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 50px;


        @media screen and (min-width: 1100px) {
            flex-direction: row;
            gap: 15px;
        }

        .post-item:nth-child(n+7) {
            display: none;
        }

        .post-item{
            height: 250px;
            width: 100%;
            position: relative;

            @media screen and (min-width: 1100px) {
                flex: 1 1 calc(33.33% - 10px);
                width: calc(100%/3);
                overflow: hidden;
                height: 200px;
            }


            img{
                border: 2px solid var(--Accent-color);
                border-radius: var(--default-border-radius);
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center;
            }

            .post-item-text-container{
                font-weight: bold;
                position: absolute;
                height: 50px;
                width: 100%;
                border: 2px solid var(--Primary-color);
                border-radius: var(--default-border-radius);
                background-color: var(--Secondary-color-transparent);
                backdrop-filter: blur(3px);
                bottom: 0;


                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-right: 10px;
                padding-left: 10px;

                text-decoration: none;
                color: var(--Primary-color);

                span{
                    font-size: 16px;
                }

                &:hover{
                    background-color: var(--Primary-color-transparent);
                    color: var(--Accent-color);
                }

                .icon-arrow-2{
                    rotate: 180deg;
                }
            }
        }
    }

    .pagination > a{
        cursor: pointer;

    }

    .pagination{
        margin-top: var(--default-margin-top);
        display: flex;
        flex-direction: row;
        font-weight: bold;
        justify-content: center;

        a, span{
            text-decoration: none;
            display: flex;
            margin: 0;
            height: 30px;
            width: 30px;
            justify-content: center;
            align-items: center;
            font-family: sans-serif;
            color: var(--Accent-color);
        }


        .current{
            background-color: var(--Primary-color);
            color: var(--Accent-color);
            cursor: default;
        }

        a{
            &:hover{
                color: var(--Primary-color);
            }
            &:active{
                background-color: var(--Primary-color);
                color: var(--Accent-color);
            }
            &:last-child{
                transform: rotate(180deg);
            }
        }
    }


    .hotline-container{

        color: var(--Secondary-color);
        align-items: center;
        display: flex;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        

        .wp-block-group{
            display: flex;
            height: auto;

            .icon-phone{
                text-align: right;
                margin-right: 20px;
                color: var(--Accent-color);
                -webkit-text-stroke-color: var(--Background-color);
                -webkit-text-stroke-width: 2px;
                font-size: 2.36rem

            }

            .wp-block-group{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                margin-left: 5px;

                a{
                    font-weight: bold;
                    display: block;
                    color: var(--Background-color);
                    cursor: pointer;
                    text-decoration: none;

                    font-size: 1.111rem;
                    @media screen and (min-width: 550px) {
                        font-size: 2.222rem;
                    }
                }
            }
        }
    }

    .post-metadata{
        font-size: 1rem;
        margin-left: var(--default-margin-left);
        margin-right: var(--default-margin-right);

        div:first-child{
            margin-bottom: 15px;
        }

    }


    .other-works-container{
        margin-top: var(--default-margin-top);
        margin-left: var(--default-margin-left);
        margin-right: var(--default-margin-right);

        .head{
            color: var(--headline-color);
            font-size: 1.39rem;
            margin-bottom: 30px;
        }

        .item-container{
            overflow-x: auto;
            display: flex;
            flex-direction: row;
            gap: 30px;
            flex-wrap: wrap;



            .item{

                display: flex;
                flex-direction: row;

                img{
                    height: 90px;
                    width: 90px;
                    border-radius: var(--default-border-radius);
                    border: 1px solid var(--Accent-color);
                }

                div{
                    margin-left: 10px;
                    h4{
                        color: var(--headline-color);
                    }
                }



            }
        }
    }
}


@keyframes scrollRight {
    from {
        left: -100px;
    }
    to {
        left: 100%;
    }
}


footer {
    margin-top: 50px;
    background-color: var(--Background-color);

    @media screen and (min-width: 1100px) {
        padding-left: 350px;
    }

    @media screen and (min-width: 1100px) {
        padding-left: 350px;
    }


    a {
        cursor: pointer;
        color: var(--Primary-color);

        &:hover {
            color: var(--Accent-color);
        }

        &:active {
            color: var(--Primary-color);
            text-decoration: underline;
        }
    }


    .marquee-container{
        height: 150px;
        overflow: hidden;
        background-color: var(--Secondary-color);
        border-bottom: 1px solid #707070;

        p{
            text-align: center;
            margin-top: 17px;
            margin-bottom: 20px;
        }

        .custom-marquee{
            position: relative;
            height: 70px;
            width: 100%;
            min-width: 1150px;
            overflow: hidden;
            display: flex;
            align-items: center;

            .marquee-item{
                position: absolute;
                left: -100px;
                text-align: center;

                height: 50px;
                width: 100px;

                animation-name: scrollRight;
                animation-duration: 30s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;

                img{
                    width: 85%;
                    height: 50px;
                    overflow: hidden;
                }
            }

            .item1{
                animation-delay: calc(30s / 8 * (8 - 1) * -1);
            }
            .item2{
                animation-delay: calc(30s / 8 * (8 - 1) * -2);
            }
            .item3{
                animation-delay: calc(30s / 8 * (8 - 1) * -3);
            }
            .item4{
                animation-delay: calc(30s / 8 * (8 - 1) * -4);
            }
            .item5{
                animation-delay: calc(30s / 8 * (8 - 1) * -5);
            }
            .item6{
                animation-delay: calc(30s / 8 * (8 - 1) * -6);
            }
            .item7{
                animation-delay: calc(30s / 8 * (8 - 1) * -7);
            }
            .item8{
                animation-delay: calc(30s / 8 * (8 - 1) * -8);
            }
        }
    }


    .impressum{
        margin: 20px var(--default-margin-right) 30px var(--default-margin-left);
        display: flex;
        
        flex-direction: column;
        align-items: center;
        font-size: clamp(10px, 3vw, 1rem);

        @media screen and (min-width: 1100px) {
            flex-direction: row;
            justify-content: space-between;
            
        }

        p{
            cursor: default;
        }

        #footer-menu{
            
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-end; 

        }

        #footer-menu > li{
            list-style-type: none;
            display: inline-block;    
        
            &:not(:last-child)::after{
                color: var(--Accent-color);
                content: " //\00a0";
            }

            a {
                text-decoration: none;
            }
        }
    }
}


 /* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}



/* Form Success Message Styling */
.form-success-message {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: var(--default-border-radius);
    color: #155724;
    margin-top: 20px;
    padding: 15px 20px;
    text-align: center;
    animation: fadeIn 0.5s ease-in;
}

.form-success-message p {
    margin: 0;
    font-weight: 500;
}



form {
    p {
        margin-bottom: 5px;
    }

	.wpcf7-response-output{
        display: inline-block;
    }
	
    p > input {
        font-size: 1rem;
        text-align: center;
        width: auto;
        min-height: 2em;
        border: none;
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        font-family: "Amatic SC", sans-serif;
        white-space: nowrap;
        padding: 0 20px 0 20px;
        text-decoration: none;
        line-height: 2em;
        border-radius: 0;
        background-color: var(--Accent-color);
        color: var(--Secondary-color);
    
        &:hover{
            background-color: var(--Primary-color);
        }
        &:focus{
            outline-offset: 0;
        }
        &:active{
            background-color: var(--Primary-color);
            color: var(--Accent-color);
            text-decoration: none;
        }
    }

}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Error Message Styling */
.form-error-message {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: var(--default-border-radius);
    color: #721c24;
    margin-top: 20px;
    padding: 15px 20px;
    text-align: center;
    animation: fadeIn 0.5s ease-in;
}

.form-error-message p {
    margin: 0;
    font-weight: 500;
}