@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-regular.woff2") format("woff2");
    font-weight: 100 900; /* Unterstützt ganze Gewichtsspanne */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --dark-red:     rgb(31,7,7);
    --dark-red-50:  rgba(31,7,7,0.5);
    --medium-red:   #7f1f1f;
    --red:          #bf2f2f;
    --dark-sand:    rgb(225,215,205);
    --medium-sand:  rgb(245,235,225);
    --sand:         #fff5eb;

    --bg-page:      var(--medium-red);
    --bg-nav:       var(--dark-sand);
    --bg-content:   var(--medium-sand);

    --fc: var(--dark-red);
    --fs: 16px;
    --ff: 'Montserrat', sans-serif;
    --fw: 400;

	--border: 0.0625rem solid;
    --radius: 0.5rem;
    --shadow: 0 0 0.625rem var(--dark-red-50);
    --shadow-2: 0 0 0.3125rem var(--dark-red-50);
}

html {
    background-color:   var(--bg-page);
    color:              var(--fc);
    font-family:        var(--ff);
    font-size:          var(--fs);
    font-weight:        var(--fw);
}

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

    font-size: 1rem;
    font-weight: var(--fw);
}

/* Standard für Webkit-Browser (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 2rem; /* Breite der Scrollleiste */
    /* background-color: var(--bg-page); Hintergrundfarbe */
    background-color: transparent; /* Hintergrundfarbe */
}

::-webkit-scrollbar-thumb {
    background-color: var(--medium-sand); /* Farbe des Handles */
    border-radius: var(--radius); /* Abgerundete Ecken */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(medium-sand); /* Farbe beim Hover */
}

/* Lösung für Firefox */
html {
    scrollbar-color: var(--medium-sand) var(--bg-page);
    scrollbar-width: thin; /* Dünnere Scrollleiste */
}

/* Lösung für ältere Browser ohne Scrollleisten-Support */
@supports not (scrollbar-color: var(--medium-sand) var(--bg-page)) {
    body {
        /* Alternative Styling falls kein natives Scrollleisten-Styling verfügbar ist */
        background-color: var(--bg-page);
    }
}

body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/***********************************************
* Allgemeines
***********************************************/

h1,h2,h3, h4, h5, h6 {
    text-transform: uppercase;
}

strong, i, s, q, u, em, b, mark, time {
    font-size: 1em;
    font-weight: inherit;
}

q {
    quotes: "„" "“" "‚" "‘";
}

address {
    font-family: var(--ff);
    font-style: italic; 
}


strong {
    font-weight: 600;
}

a {
    color: var(--red);
    font-weight: 500;
    text-decoration: none;
		transition: color 250ms ease-in-out, text-decoration 250ms ease-in-out;

    &:hover, &:focus {
        color: var(--medium-red);
        text-decoration: underline;
    }

    &.icon {
        display: inline-flex;
        align-items: center baseline;
        gap: 0.25rem;
        vertical-align: baseline;

        &.article::before, 
        &.email::before, 
        &.form::before, 
        &.gallery::before, 
        &.pdf::before, 
        &.video::before,
        &.phone::before {
            display: inline-block;
            content: '';
            
            background-position: left center;
            background-repeat: no-repeat;
            height: 1.5rem; width: 1.5rem;
        }

         &.extern::after, &.new-window::after {
            display: inline-block;
            content: '';
            
            background-position: right center;
            background-repeat: no-repeat;
            height: 1.5rem; width: 1.5rem;
        }

        &.extern::after, &.new-window::after {
            background-image: url('../media/assets/icons/icon-extern.svg');
        }

        &.article::before {
            background-image: url('../media/assets/icons/icon-article.svg');
        }
        &.email::before {
            background-image: url('../media/assets/icons/icon-email.svg');
        }
        &.form::before {
            background-image: url('../media/assets/icons/icon-form.svg');
        }
        &.gallery::before {
            background-image: url('../media/assets/icons/icon-gallery.svg');
        }
        &.pdf::before {
            background-image: url('../media/assets/icons/icon-pdf.svg');
        }
        &.phone::before {
            background-image: url('../media/assets/icons/icon-phone.svg');
        }
        &.video::before {
            background-image: url('../media/assets/icons/icon-video.svg');
        }
    }

    &.no-break {
        white-space: nowrap;
    }    
}

a.button, button {
    display: block; margin-top: 1.00rem; width: auto;
    background: var(--red);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--sand);
    text-align: center;
    text-transform: uppercase;
    padding: 0.75rem 1.50rem;
    transition: all 250ms ease-in-out;
	width: fit-content;
	margin: 1rem auto 0;

    &:disabled {
        opacity: 25%;
    }

    &:not(:disabled):hover, &:not(:disabled):focus {
        background: var(--medium-red); 
		transform: scale(105%);
        text-decoration: none;
    }
    &:active {
        background: var(--dark-red); 
		transform: scale(95%);    
        text-decoration: none;
    }
}

.center {
    text-align: center;
}

figure {
    & img {
        display: block;
    
        &.qr-code {
            background-color: var(--sand);
            border: var(--border) var(--medium-red);
            border-radius: var(--radius);
            box-shadow: var(--shadow-2);
            width: 100%;
            max-width: 15rem;
            height: auto;
            margin: 0 auto;
            padding: 1rem;
        }
    
        &.border {
            border: var(--border) var(--medium-red);
        }
    }

    &.logo {
        text-align: center;
        & img {
            width: 100%;
            max-width: max(50%,10rem);
            height: auto;
            margin: 0 auto;
        }
    }

    & figcaption {
        & strong, & em, & span {
            display: block;
            text-align: center;
            margin-top: 0.5rem;
        }
    }
}

section#map {
    padding: 0 !important;
    height: 100%; min-height: 30rem;

    div {
        font-weight: 300 !important;
    }
}

section.info {
    background-color: var(--sand);

    /* p {
        color: var(--sand);
    } */
}

/***********************************************
* Navigation
***********************************************/

nav {
    background: var(--bg-nav);
    box-shadow: var(--shadow);

    & .frame {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem;
    }

    & .headline {
        text-align: center;
        & h1 {
            display: inline-flex;
            flex-direction: column;
            font-size: 1.8rem;
            width: auto;
            span {
                font-size: 1em;
                text-align: right;

                &:nth-child(2) {
                    background: var(--medium-red);
                    padding: 0.25rem;
                    color: var(--sand);
                    font-size: 0.40em;
                    font-weight: 500;
                    text-align: center;
                }
                &:nth-child(3) {
                    font-size: 1.11em;
                    font-weight: 300;
                }
            }
        }
    }

    & .menu {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        
        & ul {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2rem;

            list-style: none;

            & li {
                & a {
                    display: flex;
                    align-items: center;
                    text-transform: uppercase;
                    gap: 0.5rem;

                    & svg {
                        display: none;
                        height: 2rem;
                        width: auto;

						transition: transform 250ms ease-in-out;
                        
                        & path {
                            fill: var(--red);
                        }
                    }

                    & span {
                        font-weight: 500;
						transition: all 250ms ease-in-out;
                    }

                    &:hover, &:focus {
                        span {
                            color: var(--medium-red);
                            text-underline-offset: 0.1rem;
                            text-decoration-thickness: 0.125rem;
                        }

                        & svg {
							transform: scale(105%);

                            & path {
                                fill: var(--medium-red);                                
                                /* filter: drop-shadow(var(--shadow-2)); */
                            }
                        }
                    }

                    &.active {
                        & span {
                            color: var(--dark-red); 
                            font-weight: 600;
                            text-decoration: underline;
                            text-underline-offset: 0.1rem;
                            text-decoration-thickness: 0.25rem;
                        }

                        & svg {
                            & path {
                                fill: var(--dark-red);
                            }
                        }
                    }

                }
            }
        }
    }
}

/***********************************************
* Header
***********************************************/

header {
    & figure {
        background: var(--bg-content);
        box-shadow: var(--shadow);
        position: relative;
        
        width: 100%;

        & img {
            display: block; width: 100%;
        }

        & figcaption {
            background: var(--dark-red);

            display: flex; 
            flex-direction: column;
            gap: 0.5rem;
            padding: 2rem;

            & h2 {
                color: var(--sand);
                font-size: 1.6rem;

				& span {
					display: block;
					text-align: left;
					text-transform: none;
					font-size: 0.75em;
				}
            }
            & p {
                color: var(--sand);

                &:has(br) {
                    line-height: 1.5;
                }
            }
            
        }
    }
}


/***********************************************
* Main
***********************************************/

main {
    width: 100%;

    & .frame {
        display: grid;
        /* grid-template-columns: repeat(12 , 1fr); */
        gap:2rem;
    }

	& .index {
		height: 100dvh;

		display: grid;
		place-items: center;

		& img {
			aspect-ratio: 1 / 1;
			filter: drop-shadow(var(--shadow));
			animation: logo-index-scale 1s ease-out;
		}

		@media screen and (orientation: portrait) {
			img {
				width: 75vw;			
			}
		}

		@media screen and (orientation: landscape) {
			img {
				height: 50dvh;			
			}
		}
	}

    & section {
        background: var(--bg-content);
        background: var(--bg-content);
        box-shadow: var(--shadow);
        padding: 2rem;

        &:not(.pictures) figure {
            margin-top: 1rem;
            img {
                width: 100%;

            }
        }

		& hr {
			background-color: var(--red);
			border: none;
			border-radius: var(--radius);
			height: 0.125rem;
			width: 25%;
			margin: 3rem auto;
		}
        
        &.teaser {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;

            & figure {
                text-align: center;
                & img {
                    height: 10rem;
                    width: auto;                    
                }
            }

            & h3, & h4, & p {
                text-align: center;
            }

			& .button {
				margin-top: 0;
			}
        }

        & .youtube {
            aspect-ratio: 16 / 9;
            width: 100%;
            border: var(--border) var(--medium-red);
            border-radius: var(--radius);
            box-shadow: var(--shadow-2);
        }
    }

    & h3, 
	& h4, 
	& h5, 
	& h6 {
        color: var(--medium-red);
        margin-top: 1.5rem;
        & span {
            display: block;
            text-transform: none;
            font-size: 0.75em;
        }
    }

    & h3 {
        font-size: 1.4rem;
    }
    & h4 {
        font-size: 1.2rem
    }

    & h5, & h6 {
        font-size: 1.0rem
    }

    & p {
        margin-top: 1rem;
        line-height: 1.5;
    }

    & blockquote {
        background: var(--dark-sand);
        /* border-left: var(--border) var(--dark-red); */
		box-shadow: var(--shadow-2);
        margin-top: 1rem;
        padding: 1rem;
        line-height: 1.5;

        & q {
            display: block;
            font-style: italic;
        }

        & span {
            display: block;
            font-size: 0.8em;
            margin-top: 1rem;
        }

		& li {
			font-style: italic;
		}

    }

    & td, 
	& th {
        line-height: 1.5;
    }

    & ol, 
	& ul {
        display: flex; flex-direction: column;
        gap: 0.5rem;
        margin: 0.5rem 0;
        padding-left: 1.5rem;
        line-height: 1.5;
		font-size: 1rem;
    }

	ul.no-bullets {
		list-style-type: none;
		padding-left: 0;
	}

    & ol ul  {
        list-style-type: disc;
    }

    & ul.link-list {
        li:not(:first-of-type) {
            margin-top: 1rem;
        }
        strong {
            display: block;
            margin-bottom: 0.25rem;
        }
        a + a {
            padding-left: 1rem;
        }
    }
    
    & dl {
        & dt {
            font-weight: 600;
            margin-top: 1rem;
        }
        & dd {
            margin: 0.5rem 0;
			line-height: 1.5;
        }
    }

    & table {
        background: var(--sand);
        border-collapse: collapse;
        border: var(--border) var(--medium-red);
        width: 100%;
        margin-top: 1.5rem;

        & tr {
            border: var(--border) var(--medium-red);
        }

        & td, & th {
            text-align: left;
            vertical-align: baseline;
            padding: 0.5rem;
        }

        & thead {
            background: var(--red);
            color: var(--sand);
        }
        
    }

	& form {
		& fieldset {
			border: none;
			
			display: grid;
			gap: 1.5rem;
			padding-top: 1.5rem;
			

			& label {
				grid-column: 1 span 12;

				& span {
					font-size: 1em;
				}

				&:focus-within {
					color: var(--medium-red);

					& input:not([type="checkbox"]), 
					& input:not([type="radio"]), 
					& select, 
					& textarea {
						color: var(--red);
					}
				}
			}

			& input[type="text"], 
			& input[type="date"], 
			& input[type="email"], 
			& input[type="number"], 
			& input[type="text"],
			& select,
			& textarea {
                appearance: none;
				background: var(--sand);
				border: var(--border) var(--medium-red);
                border-radius: 0;
				color: var(--dark-red);
				font-family: var(--ff);
				padding: 0.5rem;
                height: 2.5rem;
                width: 100%;

				&:focus {
					background: white;
					box-shadow: var(--shadow-2);
					outline-color: var(--medium-red);
				}
			}

			& select {
				position: relative;

				&::after {
					background-image: url("../media/assets/icons/icon-arrow-down.svg");
					content: '';
					position: absolute;
					right: 0.5rem;
					top: 50%;
					height: 1.5rem;
					width: 1.5rem;
					z-index: 100;
				}
			}

			& textarea {
				height: 6rem; max-height: 15rem; min-height: 3rem;
				resize: vertical;
			}

			& input[type="checkbox"] {
				background: var(--sand);
				border: var(--border) var(--medium-red);
				border-radius: var(--radius);
				appearance: none;
				width: 1.75rem;
				height: 1.75rem;

				&:focus {
					background: white;
					box-shadow: var(--shadow-2);
					outline-color: var(--medium-red);
				}

				&:checked {
					background-color: var(--medium-red);
					background-image: url('../media/assets/icons/icon-check.svg');
					background-position: center;
					color: white;
					content:'+';

					&:focus {
						box-shadow: var(--shadow-2);
						outline-color: var(--medium-red);
					}
				}
			}

			& div.radio-group {
				display: flex; gap: 0.5rem;
			}

			& label.radio {
				background: var(--sand);
				border: var(--border) var(--medium-red);
				flex: 1;

				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 0.5rem;
				padding: 1rem;

				& img {
					width: 2.5rem;
				}

				& input {
					display: none;
				}

				& span {
					text-align: center;
				}
			}

			& label.text {
				display: flex;
				flex-direction: column;
				gap: 0.5rem;			
				
				&:has(*:required) {
					& span {
						display: flex;
						align-items: baseline;
						justify-content: space-between;
					
						&::after {
							color: var(--medium-red);
							font-size: 0.8em;
							content: '(Pflichtfeld)';
							opacity: 0.75;
						}
					}
				}
			}

			& label.privacy {
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: center;
				gap: 0.5rem;

				& p {
					grid-column: 2;
				}

				&:has([required]) span {
					display: flex;
					align-items: baseline;
					justify-content: space-between;

					&::after {
						color: var(--medium-red);
						font-size: 0.8em;
						content: '(Pflichtfeld)';
						opacity: 0.75;
					}
				}
			}
		}
	}
}




/***********************************************
* Footer
***********************************************/

footer {
    background-color: var(--bg-content);
    box-shadow: var(--shadow);

    & .frame {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 2rem;
    }

    & p {
        text-align: center;
        & strong {
            text-transform: uppercase;
        }
    }

    & ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;

        list-style-type: none;

        & li {
            & a {
                text-transform: uppercase;

                &.active {                    
                    color: var(--dark-red); 
                    font-weight: 600;
                    text-decoration: underline;
                    text-underline-offset: 0.1rem;
                    text-decoration-thickness: 0.25rem;
                }
            }
        }
    }
}

@media screen and (min-width: 600px) {
    nav {
        & .headline {
            & h1 {
                font-size: 2.0rem;
            }
        }
        & .menu {
            & ul {
                flex-direction: row; gap: 2rem;

                & li {
                    & a {
                        align-items: center;
    
                        & svg {
                            display: block;
                            height: 2rem;
                            width: auto;
    
                            & path {
                                fill: var(--red);
                            }
                        }
                    }
                }
                
            }
        }
    }
    
    header {
        & figure {
            & figcaption {
                & h2  {
                    font-size: 1.8rem;
                }
            }
        }
    }

    h3 {
        font-size: 1.6rem;
    }
    h4 {
        font-size: 1.2rem;
    }
    h5 {
        font-size: 1.2rem;
    }
    h6 {
        font-size: 1.0rem;
    }

    footer {
        & ul {
            flex-direction: row;
        }
    }
}

@media screen and (min-width: 991px) {
    nav {
        & .frame {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
        & .headline {
            & h1 {
                font-size: 3rem;
            }
        }
        & .menu {
            & ul {
                & li {
                    & a {

                        flex-direction: column;
                        justify-content: center;
    
                        & svg {
                            display: block;
                            height: 5rem;
                            width: auto;
                        }
                    }
                }
            }
        }
    }

    header {
        & figure {

            & figcaption {
                position: absolute;
                right: 0; top: 25%; width: 40%;

                & h2 {
                    font-size: 2.5rem;
                }
            }

            &.left figcaption {
                position: absolute;
                left: 0; top: 25%; width: 40%;
            }
            
        }
    }

    main {
        & .frame {
            grid-template-columns: repeat(12, 1fr);
        }

        & section {

			grid-column: span 12;
						
			&.cols-12   {   grid-column: span 12;   }
			&.cols-11   {   grid-column: span 11;   }
			&.cols-10   {   grid-column: span 10;   }
			&.cols-9    {   grid-column: span 9;    }
			&.cols-8    {   grid-column: span 8;    }
			&.cols-7    {   grid-column: span 7;    }
			&.cols-6    {   grid-column: span 6;    }
			&.cols-5    {   grid-column: span 5;    }
			&.cols-4    {   grid-column: span 4;    }
			&.cols-3    {   grid-column: span 3;    }
			&.cols-2    {   grid-column: span 2;    }
			&.cols-1    {   grid-column: span 1;    }

			&.rows-4    {   grid-row: span 4;       }
			&.rows-3    {   grid-row: span 3;       }
			&.rows-2    {   grid-row: span 2;       }

            & h3 {
                font-size: 2rem;
            }
            & h4 {
                font-size: 1.75rem;
            }
            & h5 {
                font-size: 1.5rem;
            }
            & h6 {
                font-size: 1.25rem;
            }

            & a, 
            & blockquote, 
			& p, 
			& td, 
			& th, 
			& ul, 
			& ol, 
			& ul li, 
			& ol li, 
			& dl dt, 
			& dl dd, 
			& address, 
			& label,
			& input, 
			& select, 
			& textarea {
                font-size: 1.25rem;
            }
        }
    }
}

@media screen and (min-width: 1600px) {
    .frame {
        max-width: 1600px;
        margin-left: auto; 
        margin-right: auto;
    }
}

@keyframes logo-index-scale {
    0% { transform: scale(0); opacity: 50%;}
    50% { transform: scale(1.25); opacity: 100%;}
    100% { transform: scale(1); }
}