:root {
	--font_sans:'OpenSans';
	--font_serif:'Garamond';
	--font_mono:'Fantasque';
	--font_size:21px;

	--color:#333;
    --gray:#555;
    --gray_mid:#888;
    --gray_light:#bbb;
    --yellow:#fecc03;
    --yellow_light:#ffd810;
    --bg_color:#f8f8f8;
    --menu_bg:#fffb;

    --grayBox_color:#ebebeb;

}

/* generics */
	html {
		margin:0; padding:0;
		width:100%;
		height:100%;
			color-scheme:light;
			color:var(--color);
            background-color:var(--yellow);
            background-color:var(--yellow_light);
            /*background-color:var(--bg_color);*/
			font-family:var(--font_sans),sans-serif;
			font-size:var(--font_size);
			-webkit-text-size-adjust:none; text-size-adjust:none;
	}
		*, *::before, *::after {
			position:relative;
			box-sizing:border-box;
			vertical-align:top;
			cursor:inherit;
		}

		a { text-decoration:none; cursor:pointer; color:#000; }
		a:visited, a:link, a:active, a:hover { color:#000; }
		a.yellow { color:var(--yellow); text-shadow:0 0 1px #0008, 0 2px 1px #fff, 0 0 6px #fff8; }
		img { border:none; vertical-align:top; }
		img.icon { width:1.2em; margin:0.1em; }
		hr { width:33%; border:0.5px solid var(--yellow); margin:0.5em auto 2em auto; }
		pre, code { font-family:var(--font_mono),monospace; }
		*.BeapIconic { font-family:"BeapIconic"; line-height:1.25em; vertical-align:baseline; }
        *.centered { text-align: center; }
        *.yellow { color:var(--yellow); text-shadow:0 0 1px #0008, 0 2px 1px #fff, 0 0 6px #fff8;}

		h1, h2, h3, h4, h5 { font-family:var(--font_serif); font-style:italic;
                margin:1em 0 0.5em 0;
                -webkit-text-fill-color: var(--gray);
                -webkit-text-stroke: 1px #0002;
                text-shadow: 0 0 12px #fff, 0 2px 1px #fff4;
            .yellow {
                -webkit-text-fill-color: var(--yellow);
                -webkit-text-stroke: 1px #da02;
                text-shadow: 0 0 12px #fff, 1px 1px 1px #fff8, -1px -1px 1px #8518;
            }
        }
        p { margin:0.5em 0 1em 0; }
        span.prefix { display:inline-block; width:4em; }

	body {	display:flex; flex-direction:column;
			margin:0; padding:0;
			width:100%;
			height:100%;
			font-size:0.85rem;
	}


		body > menu {
			display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end;
            position:fixed; z-index:1000;
            margin:0; padding:0 1em 0 11em; line-height:1.4em;
            min-height:3em; width:100%;
            font-size:clamp(15px, 1rem, 30px);
			background:var(--menu_bg);
            backdrop-filter:grayscale(75%) brightness(175%) blur(4px);
			list-style-type:none;
            box-shadow:0 2px 5px #2238;

			> img.logo { position:absolute; top:0.33em; left:0.5em; height:2.5em; }
			> li { cursor:pointer;
                flex:0 0 auto;
                font-weight: 800;
                padding: 0.25em 0.5em 0.25em 0.5em;

                &.active {
                    -webkit-text-fill-color: var(--yellow);
                    -webkit-text-stroke: 1px #da02;
                    text-shadow: 0 0 12px #fff, 1px 1px 1px #fff8, -1px -1px 1px #8518;
                }
            }
		}


		body > content { display:flex; flex-direction:column;
            flex:1 0 auto;
            margin:0 auto; padding:0;
            width: clamp(800px,54rem,100%);
			font-size:1rem;
            background-color:var(--bg_color);
            box-shadow:0 0 1px 1px #fff;
		}

		body > footer { display:flex; flex-direction:row; justify-content:center;
			flex:0 0 auto;
            margin:0 auto; padding:0 0 1.5rem 0;
            width: clamp(800px,54rem,100%);
			background:var(--grayBox_color);

			font-size:clamp(10px,0.66rem,20px);
			text-shadow:0 0 2px #ddd, 0 1px #eee;
			border-radius:0 0 0.25rem 0.25rem;
            border-top:1px solid var(--gray_light);
            box-shadow:0 0 1px 1px #fff;
            border-bottom:1px solid var(--gray_mid);
		}

		  footer > img.logo { margin:0.5rem; flex:0 0 auto; }
		  footer article { flex:1 0 8rem; margin:0; padding:0 0.5rem; }
		  footer span.prefix { width:3em; }
		  footer article a > h4 { display:inline-block; margin:0.5rem; }



page { flex:0 0 auto; padding:0; max-height:0; overflow-y:hidden; transition:max-height 0.8s ease-out; }
page.active { max-height:100%; transition:max-height 0.8s ease-in; }

page > header { flex:0 0 3em; flex-wrap:nowrap; display:flex;
    margin:0; padding:0;

    font-size:clamp(24px,1.5rem,48px);
    line-height:1.5em;
    font-weight:800;
    text-align:center;
    text-shadow:0 0 4px #ddd, 0 1px 1px #eee, 0 1px #fff;

    > img { width:100%; }
}

article {
    padding: 0 1rem;
    margin: 1rem;
    font-weight:300;

    p.cite { font-style:italic; font-size:0.85em; color:var(--gray); }
    *.yellow { font-weight:600; }
}

page#legal > article { font-size:0.8rem; }

div.logoHeadCenter {
    text-align:center; margin:1rem 0;

    img {
        display:block;
        width:6em;
        margin:0.5em auto;
    }
    h1 { margin: 0.2em; }
    h2 {margin: 0.2em; }
    h3 { font-family:var(--font_sans); font-style:normal;
        position:absolute; top:5rem;
        font-size:5.25rem;
        opacity:0.06;
        width:100%;
        font-weight:900;
        margin:0;
    }
    h4 { margin:0.2em; }
    h5 { margin:0.2em; }
}
div.headCenter {
    text-align:center; margin:4rem 0 3rem 0;

    img {
        display:block;
        width:11em;
        margin:0.5em auto;
    }
    h1 { margin: 0.2em; }
    h2 {margin: 0.2em; }
    h3 { font-family:var(--font_sans); font-style:normal;
        position:absolute; top:-0.55em;
        font-size:5.25rem;
        opacity:0.06;
        width:100%;
        font-weight:900;
        margin:0;
    }
    h4 { margin:0.2em; }
    h5 { margin:0.2em; }

}
article div.headCenter { margin:0; }

article.grayBox {
    background:var(--grayBox_color);
    border-radius:0.66em 0.25em 2px 2px;
    box-shadow:1px 1px 2px #0044;
    font-weight:500;
    font-size:0.8rem;
    padding:0.5rem 1rem;
    margin:1rem 2rem;
    font-weight:300;
}

div#A_Stritter {
    width: 14em;
    height: 5em;
    overflow:hidden;
    background:var(--grayBox_color);
    border-radius:0.66em 0.25em 2px 2px;
    padding:0.25em 0.5em 1em 4.5em;
    margin:0.5em auto;
    text-align:left;
    line-height:2em;

    > img { position:absolute; top:0.45em; left:0.5em; height:5em; border-radius:0.22em 2px 0 0; border:1px solid #fff8; }

}

div.map_frame {
    padding:0;
    margin:2rem 1rem;
    border-radius: 1em 0.25em 2px 2px;
    box-shadow:1px 1px 5px #0046;
}

div.action { display:inline-block;
    margin:1em 0;
    padding:0.5em 1em;
    line-height:2em;
    font-weight:700;
    cursor:pointer;
    background:var(--yellow); color:#fff;
    border-radius:0.66em 0.25em 2px 2px; text-shadow:0 0 2px #0004;

    &:hover { box-shadow: 1px 1px 5px #0046; }
}


div.linkboxes {
    display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;
    margin:1em;

    > .linkbox {
        flex:1 1 230px; max-width:320px;
        aspect-ratio:30/35;
        margin: 0 0.25rem 1rem 0.25rem;
        border-radius:0.66em 0.2em 2px 2px;
        box-shadow:1px 1px 2px #0044;
        overflow: hidden;
        cursor:pointer;

        &:hover { box-shadow: 1px 1px 5px #0046; }

            & a { display:block; height:100%; width:100%; }
            & img { width:100%; height:auto; }
            & span { display:block; position:absolute; bottom:0; left:0;
                color:#fff;
                background:var(--yellow);
                font-weight:600;
                font-size:1.33rem;
                text-shadow:0 0 2px #0004;
                width:100%; height:2.5em;

                padding:0.5em;
            }

    }
}

div.teamboxes {
    display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;
    margin:1em auto;

    & .teambox {
        width:320px; height:470px;
        margin: 0 0.5rem 1rem 0.5rem;
        padding:2.5rem 0.75rem;
        font-size:0.66rem;
        border-radius:0.66em 0.2em 2px 2px;
        box-shadow:1px 1px 2px #0044;
        overflow: hidden;
        background:var(--grayBox_color);

        & img { position:absolute; top:0; left:0; width:100%; height:auto; opacity:1; transition: all 0.8s ease; }
        & div.teamcontent { opacity:0; transition: all 0.3s ease;
            & h2 { font-weight:800; }
        }

        &:hover { box-shadow: 1px 1px 5px #0046;
            & img { opacity:0.05; }
            & div.teamcontent { opacity:1; }

        }
    }
}

div.services {
    display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;
    border-top:1px solid var(--gray_light);
    padding:2.5em 0 0.5em 0;

    > h2 { position:absolute; top:0.5em; left:1.5em; margin:0; }
    div.service {
        width:400px;
        font-weight:300;
        font-size:0.8rem;
        padding:0.5em;
    }
    div.service.single {
        width:auto;
        min-width:400px;
        max-width:800px;
    }
}

div.flex_2 {
    display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;
    margin:0 auto;

    > * { width:400px; margin:0; }
}


	div.datenschutz {
		font-size:0.66rem;
		height:18rem; overflow-y:scroll;
		padding:0.33rem 1rem;
		margin:0.33rem 2rem;

		border:1px solid var(--gray_light);
		border-radius:0.85em 0.4em 2px 2px;
		background:var(--grayBox_color);
		box-shadow:1px 1px 5px #4468 inset;
	}
	div.datenschutz h2 { font-family:'OpenSans',sans-serif; margin:0.33rem 0 0 0; }
	div.datenschutz h4 { font-family:'OpenSans',sans-serif; margin:0.66rem 0 0.33rem 0; }
	div.datenschutz h5 { font-family:'OpenSans',sans-serif; margin:0.66rem 0 0.33rem 0; }