/*  font definitions  */
@font-face {
	font-display: fallback;
	font-family: 'Arvo';
	font-style: normal;
	font-weight: 400;
	src: url('type/arvo-v23-latin-regular.woff2') format('woff2');
}
@font-face {
	font-display: fallback;
	font-family: 'Arvo';
	font-style: normal;
	font-weight: 700;
	src: url('type/arvo-v23-latin-700.woff2') format('woff2');
}
@font-face {
	font-display: fallback;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400;
	src: url('type/work-sans-v24-latin-regular.woff2') format('woff2');
}
@font-face {
	font-display: fallback;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 600;
	src: url('type/work-sans-v24-latin-600.woff2') format('woff2');
}
@font-face {
	font-display: fallback;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 700;
	src: url('type/work-sans-v24-latin-700.woff2') format('woff2');
}
@font-face {
	font-display: fallback;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 800;
	src: url('type/work-sans-v24-latin-800.woff2') format('woff2');
}
@font-face {
	font-display: fallback;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 900;
	src: url('type/work-sans-v24-latin-900.woff2') format('woff2');
}



/*  root  */
:root {
	--color-red: #DF242B;
	--color-mint: #DAF77B;
	--color-orange: #FFAA00;
	--color-blue: #0099C7;
	--color-green: #669900;

	--color-white: #FFFFFF;
	--color-light-grey: #F0F1F1;
	--color-grey: #9F9FA1;
	--color-black: #000000;

	--color-primary: var(--color-red);
	--color-text: var(--color-black);
	--color-link: var(--color-red);
	--color-link-hover: var(--color-black);
	--color-link-focus: var(--color-orange);
	--color-selection: var(--color-blue);

	--font-family: 'Work Sans', Arial, Helvetica, sans-serif;
	--font-size: 1.125rem;

	--max-width: 84rem;
	--gutter-x: 3rem;
	--gutter-y: 5rem;
	--columns-gutter-x: 3rem;
	--columns-gutter-y: 4rem;

	--header-padding-y: 1.5rem;
	--header-padding-x: var(--gutter-x);
	
	--logo-height: 5rem;
}



/*  attributes for all  */
body, h1, h2, h3, h4, h5, h6, p, div, img, a, address, b, i, u, sup, div, span, ul, ol, li, figure, figcaption, header, main, footer, section {
	margin: 0;
	padding: 0;
	border: 0;
}



/*  tags  */
html {
	font-size: 16px;
	-webkit-text-size-adjust: none;
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-family);
	background: var(--color-white);
	color: var(--color-text);
	font-size: var(--font-size);
	line-height: 1.333333333;
	text-align: center;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	transition: color .2s ease, border .2s ease, background-color .2s ease, box-shadow .2s ease;
}
a:hover {
	color: var(--color-link-hover);
}

b, strong { font-weight: 700; }

a:focus-visible, button:focus-visible {
	outline: 2px solid var(--color-link-focus);
	outline-offset: 2px;
}

input[type=submit],
input[type=reset]
{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

input[type=button],
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=number],
input[type=password],
input[type=phone],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	padding: .75rem;
	border: 1px solid var(--color-light-grey);
	background: var(--color-light-grey);
	border-radius: .125rem;
	outline: none;
	font-family: inherit;
	transition: color .2s ease, background .2s ease, border .2s ease, box-shadow .2s ease;
}

input[type=button]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=file]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=phone]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
select:focus,
textarea:focus {
	border-color: var(--color-grey);
}

select { padding-right: 64px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 8.467 4.233'%3E%3Cpath d='M2.381 1.32l1.852 1.852L6.085 1.32' fill='%23DF242B' stroke='none' stroke-width='.529'/%3E%3C/svg%3E"); background-position: right center; background-repeat: no-repeat; }

.mailform .label { font-family: 'Arvo', serif; }

p, address { font-size: var(--font-size); line-height: 1.45; }
p:not(:last-child), address:not(:last-child) { margin-bottom: 1em; }
p + ul, ul + p { margin-top: -.75em; }

li { margin-left: 1.7rem; }
ol:not(:last-child), ul:not(:last-child) { margin-bottom: 1rem; }

ul { list-style-type: square; line-height: 1.45; display: flex; flex-flow: column nowrap; gap: .5rem; }

h1, h2, h3, h4, h5, h6 { font-family: 'Arvo', serif; line-height: 1.125; word-wrap: break-word; overflow-wrap: break-word; /*-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;*/ }

h1 { font-size: 2.5em; font-weight: 700; text-transform: uppercase; padding-top: 0; }
h1:not(:last-child) { padding-bottom: 1.25rem; }

h2 { font-size: 1.625em; font-weight: 700; text-transform: uppercase; }
h2:not(:first-child) { padding-top: 1.25rem; }
h2:not(:last-child) { padding-bottom: 1.25rem; }

h3 { font-size: 1.25em; font-weight: 700; }
h3:not(:first-child) { padding-top: 1.25rem; }
h3:not(:last-child) { padding-bottom: .75rem; }

h4 { font-size: 1.125em; font-weight: 700; }
h4:not(:first-child) { padding-top: 1.25rem; }
h4:not(:last-child) { padding-bottom: .75rem; }

h1 + h2:not(:first-child), h2 + h3:not(:first-child), h3 + h4:not(:first-child) { padding-top: 0; }

:is(h1, h2, h3, h4) + :is(.grid, .card-wrapper) { margin-top: .5rem; }

picture, img { max-width: 100%; height: auto; }
picture > img { display: block; }
svg { overflow: hidden; }
main { text-align: left; }



/*  header  */
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	pointer-events: none;
}
header .center { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; max-width: none; padding: var(--header-padding-y) var(--header-padding-x); }
header .center > * { pointer-events: all; }
.page-1 header + * { border-top: 5.25rem solid var(--color-black, #000000); }

#logo { flex: 0 0 auto; padding: 0; }
#logo a { position: relative; float: left; }
#logo a:hover { background: none; }
.page-1 #logo a:after { content: ''; position: absolute; display: block; top: 0; left: 0; width: 100%; aspect-ratio: 181/313; background: url(../files/design/logo-kaiser-trockenbau-bottom.svg) left top no-repeat; background-size: 100% auto; }
#logo img { display: block; width: auto; height: var(--logo-height, 5rem); }

.menu-corner.margin { margin: calc(-1 * var(--header-padding-y)) calc(-1 * var(--header-padding-x)) 0 0; }
.menu-corner {
	--triangle-red-bottom-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9999" height="9999"><path d="M0 9999 H9999 V0 Z" fill="%23DF242B" stroke="none"/></svg>') left bottom no-repeat;
	--triangle-white-bottom-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9999" height="9999"><path d="M0 9999 H9999 V0 Z" fill="%23FFF" stroke="none"/></svg>') left bottom no-repeat;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding: var(--header-padding-y) var(--header-padding-y);
	padding-left: calc(var(--header-padding-y) + 4em);
	background: var(--triangle-red-bottom-right);
	background-size: 100% auto;
	color: var(--color-white, #FFFFFF);
}
a.menu-corner:focus-within {
	outline-offset: -4px;
}
a.menu-corner:hover {
	background: var(--triangle-white-bottom-right);
	color: var(--color-red, #DF242B);
}

.get-in-touch {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: .5em;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	text-align: right;
	transition: none;
}
.get-in-touch:after {
	--triangle-white-top-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9999" height="9999"><path d="M0 0 H9999 V9999 Z" fill="%23FFF" stroke="none"/></svg>') left top no-repeat;
	--triangle-red-top-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9999" height="9999"><path d="M0 0 H9999 V9999 Z" fill="%23DF242B" stroke="none"/></svg>') left top no-repeat;
	content: '';
	display: block;
	height: 2em;
	aspect-ratio: 1;
	background: var(--triangle-white-top-right);
	background-size: 100% auto;
}
.get-in-touch.menu-corner:hover:after {
	background: var(--triangle-red-top-right);
}




/*  footer  */
footer { --color-link: var(--color-white); background: var(--color-black, #000000); color: var(--color-white, #FFFFFF); }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: inherit; text-decoration: underline; }
footer .center { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; padding: var(--gutter-y, 2rem) var(--gutter-x, 2rem); gap: var(--gutter-y, 2rem) var(--gutter-x, 2rem); }
footer h3 { font-size: 2em; text-transform: uppercase; }
footer h3:not(:last-child) { padding-bottom: 1.25rem; }
footer address { font-style: normal; }
footer .phone { font-family: 'Arvo', serif; font-size: 1.5em; font-weight: bold; text-transform: uppercase; }
footer .footermenu { display: flex; flex-flow: column nowrap; gap: 1.25rem; list-style-type: none; }
footer .footermenu > li { margin: 0; }
footer .footermenu > li > a { text-transform: uppercase; font-weight: bold; }


/*  classes  */
.hidden-accessibility-links, .hidden-accessibility-links:focus-visible { position: fixed; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; padding: 2rem 2rem; gap: 1rem 2rem; box-sizing: border-box; z-index: 9999; transform: translate(0, -100%); transition: transform .3s ease, box-shadow .3s ease; background: var(--color-primary); }
.hidden-accessibility-links:focus-within { transform: translate(0, 0); box-shadow: 0 0 .5rem rgba(0, 0, 0, .5); }
.hidden-accessibility-links a { padding: .5rem 1rem; text-decoration: none; border: 2px solid var(--color-white); background: var(--color-primary); color: var(--color-white); }
.hidden-accessibility-links a:hover { background: var(--color-white); color: var(--color-primary); }

.center { position: relative; max-width: calc(var(--max-width, none) + (var(--gutter-x, 1rem) * 2)); margin: 0 auto; padding: 0 var(--gutter-x); box-sizing: border-box; text-align: left; }
/*.center:after { content: ''; display: block; clear: both; height: 0; }*/

.uppercase { text-transform: uppercase; }
.nowrap { white-space: nowrap }
.lightbox { z-index: 100; }



/*  selection  */
::selection { text-shadow: none; background: var(--color-selection); color: var(--color-white); -webkit-background-clip: unset; -webkit-text-fill-color: var(--color-white); }