@charset "UTF-8";

/********************************************************************************************************************************************************************************

	ALL STYLES BY:

	outline4.ch


*********************************************************************************************************************************************************************************/

:root {
	/*
		grid
	*/
	--grid-gap: 34px;

	/*
		page widths (+100)
	*/
	--site-width: 2500px;
	--page-width: 1320px;
	--content-width: 810px;
	--page-padding: 40px;

	/*
		page heights
	*/
	--header-height: 90px;
	--nav-space: 20px;

	/*
		colors
	*/
	--color-brand: #456F7A;
	--color-text: #456F7A;
	--color-title: #456F7A;

	--color-link: #fff;
	--color-link-hover: var(--color-brand);
	--color-body-background: #B9BBAF;
	--color-white: #fff;
	--color-line: var(--color-brand);
	--color-error: red;
	--color-success: #187571;

	/*
		fonts
	*/
	--font-regular-family: "Inter Regular", sans-serif;
	--font-title-family: "Inter Regular", sans-serif;
	--font-bold-family: "Inter Regular", sans-serif;

	/* --font-bold-family: "Medium-ExtraBold", sans-serif; */

	--font-size: 20px;
	--font-line-height: 24px;
	--body-font-size: 20px;
	--body-margin-height: 24px;


	--font-small-size: 16px; --font-small-line-height: 20px;
	--font-tiny-size: 14px; --font-tiny-line-height: 18px;

	--font-h1-size: 40px; --font-h1-line-height: 42px;
	--font-h2-size: 32px; --font-h2-line-height: 34px;
	--font-h3-size: 26px; --font-h3-line-height: 28px;

	/*
		Transformation
	*/
	--ease-speed: 0.2s;
	--transformation: 1.03;
	--transition: all .3s ease-out;


	/*
		Forms
	*/
	--link-border-thickness: 1px;
	--line-color: #4D4D4D;
	--input-border: var(--link-border-thickness) solid var(--line-color);
	--input-border-color: var(--line-color);
	--input-padding: 8px 10px;
	--select-padding: 8px 10px;
	--input-border-radius: 35px;
	--input-background-color: #fff;

	/*
		Animate css
	*/
	--animate-duration: 0.5s;

	/*
		Decoration
	*/
	--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

	/*
		Breakpoints:
		1200px (xlarge)
		850px (large)
		600px (medium)
		500px (small)
		380px (xsmall)
	*/
}

/* General Semantic Tags
------------------------------------------------------------------------------------------------------- */
nav h1 { display: none; } /* Being friendly to newsreaders */

/* Set to 100%
------------------------------------------------------------------------------------------------------- */
html, body { }

/* Body
------------------------------------------------------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-regular-family);
    font-size: var(--font-size);
    line-height: var(--font-line-height);
    color: var(--color-text);
    background: var(--color-body-background);
    text-rendering: optimizeLegibility;
    transition: all 0.3s ease-in-out;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
}

#wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    max-width: 520px;
    width: 100%;
    margin: auto;
}

#header, #footer {
    flex-shrink: 0; /* Verhindert, dass Header/Footer wachsen */
	padding: var(--body-margin-height);
}

#header {
	padding-top: calc(3 * var(--body-margin-height));
}

#footer {
	padding-bottom: calc(4 * var(--body-margin-height));
}


#logo {
    display: flex;
    flex-grow: 1; /* Lässt das Logo den verbleibenden Platz ausfüllen */
    align-items: center;
    justify-content: center;
	padding: var(--body-margin-height);
}

img {
    max-width: 100%;
    height: auto;
}

a {  color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-link); text-decoration: none; }

p { margin-top: var(--body-margin-height); }

/* Standard: "|" wird per ::after hinzugefügt */
.separator::after {
    content: " | ";
	margin-left: 2px; margin-right: 2px;
}

/* Mobile: "|" wird durch einen Zeilenumbruch ersetzt */
@media (max-width: 600px) {
    .separator::after {
        content: "\A"; /* Fügt einen echten Zeilenumbruch hinzu */
        white-space: pre-line; /* Zeilenumbruch sichtbar machen */
    }

	:root {
		--font-size: 18px;
		--font-line-height: 22px;
		--body-font-size: 18px;
		--body-margin-height: 22px;
	}

	#wrapper {
		max-width: 480px;
	}

	#logo {
		padding: calc(2 * var(--body-margin-height));
	}

	#header {
		padding-top: calc(1 * var(--body-margin-height));
	}

	#footer {
		padding-bottom: calc(2 * var(--body-margin-height));
	}


}

.no_wrap { white-space: nowrap; }