/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/Oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/Oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* math */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/Open-Sans-Math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0330, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2034-2037, U+2057, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2102, U+210A-210E, U+2110-2112, U+2115, U+2119-211D, U+2124, U+2128, U+212C-212D, U+212F-2131, U+2133-2138, U+213C-2140, U+2145-2149, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B6, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/Open-Sans-Symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8B1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/Open-Sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/Open-Sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* symbols */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/Open-Sans-Symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8B1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/Open-Sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/Open-Sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* variables */
:root {
	--highlight-color: rgba(14, 122, 184, .85);
	--highlight-color-full: rgba(14, 122, 184, 1);
	--highlight-color-light: rgba(14, 122, 184, .25);
	--nav-background: rgba(255, 255, 255, .98);
	--footer-background: rgb(255, 255, 255);
	--neutral-background: rgba(248, 248, 250, 1);
	--text-neutral: rgba(50, 60, 50, .85);
	--text-light: rgba(110, 120, 110, .85);
	--bright-color: rgba(255, 255, 255, .85);
	--error-color: rgba(200, 70, 70, .85);
	--success-color: rgba(70, 200, 70, .85);
	--nav-text: rgba(50, 50, 40, 1);
	--nav-text-hover: var(--highlight-color);
	
	--header-blur-color-start: rgba(255,255,255,0.1);
	--header-blur-color-end: rgba(255,255,255,0.2);
	
	--headerbox-background: rgba(255,255,255,0.8);
	
	--form-background: rgba(255,255,255,.95);

	--box-border: var(--highlight-color-full);
	--box-background: var(--form-background);
	
	--button-background-color: var(--highlight-color);
	--button-background-color-hover: var(--highlight-color-full);
	--button-text-color: rgb(255, 255, 255);
	
	--button-special-background-color: rgba(222, 110, 42, .85);
	--button-special-background-color-hover: rgba(222, 110, 42, 1);
	--button-special-text-color: rgb(255, 255, 255);
	
	--breadcrumb-open-background: rgba(40, 90, 125, 0.5);
	--breadcrumb-done-background: rgba(40, 125, 125, 0.85);
	--breadcrumb-active-background: rgba(40, 90, 125, 1);
	--breadcrumb-text-color: var(--button-text-color);
	
	--side-distance: 2%;
	--font-regular: 300;
	--font-bold: 500;
	
	--font-family-normal: 'Open Sans', sans-serif;
	--font-family-highlight: 'Oswald', sans-serif;
}

/* general */
*, *:before, *:after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { border: 0 none; margin: 0; padding: 0; background: var(--neutral-background); }
*, *::before, *::after { box-sizing: border-box; }
body, body * { font-weight: var(--font-regular); font-family: var(--font-family-normal); color: var(--text-neutral); }
::selection { background: var(--highlight-color); color: white; }
strong { font-weight: var(--font-bold); }
.hidden { display: none !important; }
ul { list-style-type: "\2713"; }
li { padding: .1rem 0 .1rem .5rem; }
.col-2 { grid-template-columns: 1fr; display: grid; }

/* text */
a { color: var(--highlight-color); text-decoration: none; }
h1 { font-family: var(--font-family-highlight); margin: 1em 0 .5em; font-weight: var(--font-bold); text-transform: uppercase; color: var(--highlight-color); font-size: 1.8rem; }
h2 { font-family: var(--font-family-highlight); margin: 1.5rem 0 0; font-weight: var(--font-bold); font-size: 1.5rem; }
h1+h2 { margin-top: .5rem; }
p { margin: .3em 0; }

/* button */
.button, .button-special { margin-right: 1em; background: var(--button-background-color); color: var(--button-text-color); border-radius: .3em; padding: .3em .9em; font-weight: var(--font-bold); white-space: nowrap; transition: background 250ms ease-in-out; cursor: pointer; }
.button:hover, .button-special:hover { background: var(--button-background-color-hover); }
.button-special { background: var(--button-special-background-color); }
.button-special:hover { background: var(--button-special-background-color-hover); }

/* header */
header, header * { /*transition: height 400ms ease-in-out, width 400ms ease-in-out, padding 400ms ease-in-out, transform 400ms ease-in-out, background 400ms; */ }
header { width: 100%; height: 3rem; position: fixed; color: var(--nav-text); background: var(--nav-background); text-align: center; z-index: 999; display: grid; grid-template-columns: 1fr auto 3em ; }
header a { color: var(--nav-text); }
header .logo { text-align: left; padding: .5rem; height: 3rem; height: 3rem; }
header .logo a { display: inline-block; height: 100%; }
header .logo img { max-height: 100%; object-fit: contain; }
header .contact { text-align: left; padding: .5rem; height: 3rem; height: 3rem; white-space: nowrap; }
header .contact p { margin: 0; transform: scale(.8); }
header .contact img { width: 1rem; margin-bottom: -0.2rem; }
header .buttons { display: none; }
header .buttons .button { background: var(--button-background-color); color: var(--button-special-text-color); }
header .buttons .button:hover { background: var(--button-background-color-hover); }

.header-picture { width: 100%; height: 100vh; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; vertical-align: bottom; position: relative; }
.header-picture.small-header { min-height: 20em; height: 60vh; }
.header-picture.empty { height: 6rem; }

/* navigation */
header nav { width: 100%; position: absolute; text-align: left; top: 100%; left: 0; background: var(--nav-background); transform: scale(1, 0); transform-origin: top; transition: transform 400ms ease-in-out; }
header nav ul { margin: 0; padding: 0; list-style: none; }
header nav li { margin: 0 1rem 1rem 1rem; text-align: right; }
header nav li.other { display: block; }
header nav a { font-family: var(--font-family-normal); font-weight: var(--font-bold); color: var(--nav-text); text-decoration: none; font-size: 1.2rem; text-transform: uppercase; opacity: 0; transition: opacity 150ms ease-in-out, color 150ms ease-in-out, font-size 400ms ease-in-out, color 400ms; }
header.scrolled nav a { font-size: 1.2rem; }
header nav a:hover, 
header nav a.active { color: var(--nav-text-hover); }

/* responsive navigation */
.nav-toggle:checked ~ nav { transform: scale(1, 1); }
.nav-toggle:checked ~ nav a { opacity: 1; transition: opacity 250ms ease-in-out 250ms; }
.nav-toggle { display: none; }
.nav-toggle-box { position: absolute; top: 0; right: 0; margin: 0 1rem; height: 100%; display: flex; align-items: center; cursor: pointer; font-size: 2em; }
.nav-toggle-box span { color: var(--nav-text); }
.nav-toggle-box span:hover { color: var(--nav-text-hover); }

/* footer */
footer, footer * { font-size: .9rem; }
footer p { margin: .5em 0; }
footer { display: grid; width: 100%; padding: 1rem var(--side-distance); position: absolute; text-align: center; z-index: 999; border-top: 1px solid var(--highlight-color); background: var(--footer-background); }
footer .footer-line { text-align: left; }
footer nav { display: none; }
footer nav ul { display: grid; grid-layout-columns: 1fr; margin: 0; padding: 0; list-style: none; gap: 0 3em; }
footer nav li { margin: 0; text-align: right; }
footer nav a { opacity: 1; position: relative; }
footer nav a:hover, 
footer nav a.active { color: var(--highlight-color-full); text-decoration: underline; }

/* headline */
.headline { position: absolute; height: 100%; width: 100%; bottom: 0; left: 0; text-align: left; display: flex; flex-direction: column; align-content: space-between; justify-content: center; gap: 1rem; }
.headline>h1 { font-size: 2.5rem; margin: 0 var(--side-distance); color: rgb(50,50,50); text-shadow: 1px 1px 30px white,1px 1px 50px white,1px 1px 70px white; text-transform: none; text-align: left; margin-bottom: 1rem; }
.headline>h2 { font-size: 2rem; margin: 0 var(--side-distance); color: rgb(50,50,50); text-shadow: 1px 1px 30px white,1px 1px 50px white; text-align: left; }
.headline strong { color: var(--highlight-color-full); font-weight: var(--font-bold); }
.headline>p { margin: 1rem var(--side-distance); }

/* header box */
.headerbox { position: absolute; height: 100%; width: 96%; bottom: 0; left: var(--side-distance); background: var(--headerbox-background); display: flex; align-items: center; }
.headerbox>div { margin: 2em 0 0 1em; }
.headerbox .button { margin: .5rem 0 0; display: inline-block; }
.headerbox small { font-size: .8rem; }

/* content */
.content { margin: 3rem var(--side-distance); font-size: 1.1rem; }

/* form */
form { max-width: 1300px; margin: 1rem auto; display: grid; grid-template-columns: 1fr; grid-gap: 1rem; }
form>div { margin: 0; }
form input, form textarea, form button, form select { width: 100%; padding: .3rem .8rem; font-size: 1em; line-height: 1rem; border: 1px solid var(--text-neutral); color: var(--text-light); background: var(--form-background); border-radius: 3px; }
form textarea { height: 10rem; }
form input:focus, form textarea:focus, form button:focus, form select:focus { outline: 2px solid var(--highlight-color); }
form>div.form-submit input, form button { padding: .5rem .8rem; background: var(--highlight-color); border-color: transparent; font-weight: var(--font-bold); cursor: pointer; color: var(--bright-color); transition: background 250ms ease-in-out; }
form>div.form-submit input:hover, form button:hover { background: var(--highlight-color-full); }
form label { display: block; }
form>div.mandatory>label:after { content: '*'; color: var(--highlight-color-full); }
p.error { margin: 1em 0; border: 1px solid var(--error-color); border-radius: 3px; width: 100%; padding: 1rem; font-weight: var(--font-bold); color: var(--error-color); }
p.error:empty { display: none; }
p.success { margin: 1em 0; border: 1px solid var(--success-color); border-radius: 3px; width: 100%; padding: 1rem; font-weight: var(--font-bold); color: var(--success-color); }
p.info { margin: 1em 0; border: 1px solid var(--text-neutral); border-radius: 3px; width: 100%; padding: 1rem; font-weight: var(--font-bold); color: var(--text-neutral); }
form>div.radio.missing label, form>div.checkbox.missing label { color: var(--error-color); }
form>div.missing input, form>div.missing textarea, form>div.missing select { border-color: var(--error-color); }
form>div.missing input::placeholder, form>div.missing textarea::placeholder { color: var(--error-color); }
form>div.checkbox { display: flex; align-items: center; gap: 1rem; }
form>div.checkbox input { width: min-content; }
form>div.radio>div { display: flex; margin: .5em; gap: .5em; }
form>div.radio input { width: min-content; }
form>div.radio input:focus, form>div.checkbox input:focus { outline: none; }

/* uploads */
.uploadfield { min-height: 10em; border: 1px solid var(--text-neutral); border-radius: 3px; color: var(--text-light); background: var(--form-background); padding: 1em; border-radius: 3px; display: grid; gap: 1em; cursor: pointer; }
.uploadfield * { cursor: default }
.uploadfield .file-preview { padding: 1em; display: grid; background: var(--neutral-background); align-content: center; }
.uploadfield .file-preview .file-details { display: grid; grid-template-columns: 1fr auto auto; gap: 2em; }
.uploadfield .file-remove>span { cursor: pointer; color: var(--error-color); }

/* damage report */
.circle { height: 2em; width: 2em; background-color: var(--breadcrumb-open-background); color: var(--breadcrumb-text-color); border-radius: 50%; display: inline-block; line-height: 2em; text-align: center; font-weight: var(--font-bold); }
.damage-breadcrumbs { display: flex; flex-direction: column; justify-content: flex-start; gap: 1em; font-weight: var(--font-bold); }
.damage-breadcrumbs>div { display: flex; align-items: center; font-weight: var(--font-bold); }
.damage-breadcrumbs>div>.circle { margin-right: .5em; }
.damage-breadcrumbs>div:nth-child(1)>.circle:after { content: '1'; }
.damage-breadcrumbs>div:nth-child(2)>.circle:after { content: '2'; }
.damage-breadcrumbs>div:nth-child(3)>.circle:after { content: '3'; }
.damage-breadcrumbs>div:nth-child(4)>.circle:after { content: '4'; }
.damage-breadcrumbs>div.active>.circle { background-color: var(--breadcrumb-active-background); }
.damage-breadcrumbs>div.done>.circle { background-color: var(--breadcrumb-done-background); }
.damage-breadcrumbs>div.done>.circle:after { content: '\2713'; }
section>form.separator { padding-top: 1em; border-top: 1px solid var(--text-neutral); }
.damage-report { padding: 0 10%; }
.damage-report .buttons { margin: 2em 0; }
.damage-report .button { padding: .7em 1.5em; }

/* gmaps */
.gmaps { background: url(/media/layout/gmaps_overlay.png) no-repeat; background-size: cover; }
.gmaps>button { width: 100%; height: 450px; border: 0; background: rgba(0,0,0,.5); color: var(--bright-color); padding: 1em; margin: 0; font-size: 1.4em; cursor: pointer; }
.gmaps>iframe { width: 100%; height: 450px; border: 0; }

/* subpages in boxes */
.subpages { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 1.5em; }
.subpages article { border: 1px none var(--box-border); border-radius: .1em; padding: 1em; background: var(--box-background); transition: transform 500ms ease-in-out; }
.subpages article img { width: 100%; height: auto; margin-bottom: 1.5em; object-fit: cover; }
.subpages article:hover { transform: scale(1.02); }
.subpages article h2 { font-size: 1.4rem; margin: 0; }
.subpages article.centered h2 { text-align: center; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }


/* loading bar */
/* HTML: <div class="loader"></div> */
.loading-bar { height: .3em; width: 100%; --bar:no-repeat linear-gradient(var(--highlight-color) 0 0); background: var(--bar),var(--bar),var(--highlight-color-light); background-size: 60% 100%; animation: l16 3s infinite; }
@keyframes l16 {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}


/* big screen */
@media screen and (min-width: 900px) {
	.col-2 { grid-template-columns: 1fr 1fr; gap: 2em; }
	
	.nav-toggle-box { display: none; }
	header { padding: 0 var(--side-distance); height: 6em; display: grid; grid-template-columns: minmax(50%, 5fr) minmax(auto, 1fr) minmax(auto, 1fr); gap: 0 2em; position: absolute; }
	header .logo { text-align: left; padding: .5em .3em; height: 3.5em; grid-column: 1 / span 1; }
	header .contact { grid-column: 2 / span 1; height: 3.5em; padding: .5em .3em; text-align: center; display: flex; place-items: center; }
	header .contact p { margin: 0; transform: scale(1); }
	header .buttons { grid-column: 3 / span 1; height: 3.5em; padding: .5em .3em; text-align: center; display: flex; place-items: center; }
	header nav { all: unset; display: flex; justify-content: flex-start; align-items: center; grid-column: 1 / span 3; padding-bottom: .5em; }
	header nav ul { display: flex; justify-content: flex-end; gap: 2em; }
	header nav li { margin: 0; }
	header nav li.other { display: none; }
	header nav a { opacity: 1; font-size: 1rem; position: relative; }
	header nav a::before { content: ''; display: block; height: 1.5px; background: var(--nav-text-hover); position: absolute; bottom: -.2em; left: 0; right: 0; transform: scale(0,1); transition: transform ease-in-out 200ms; }
	header nav a:hover::before, nav a.active::before { transform: scale(1,1); }
	footer { display: grid; grid-template-columns: 3fr 1fr; }
	footer nav { all: unset; display: flex; align-items: center; grid-column: 3 / span 1; justify-content: flex-end; }
	
	/* scrolled header */
	header.scrolled { height: 2.4em; position: fixed; background: var(--nav-background); }
	header.scrolled .logo { display: none; padding: .5rem; height: 3rem; }
	header.scrolled .contact { display: none; }
	header.scrolled .buttons { display: none; }
	header.scrolled nav a { font-size: 1rem; /*color: var(--nav-text); */ }
	
	.headline>h1 { font-size: 4rem; }
	.headline>h2 { font-size: 3rem; }
	.headerbox { width: 55%; }
	.headerbox>div { margin: 6em 0 0 2em; }
	.header-picture.small-header { min-height: 25em; height: 70vh; }
	
	/* form */
	form { grid-template-columns: 1fr 1fr; }
	form>div.textarea { grid-column: 1 / span 2; }
	form>div.text-full { grid-column: 1 / span 2; }
	form>div.checkbox { grid-column: 1 / span 2; }
	form>div.form-full { grid-column: 1 / span 2; font-size: .8em; }
	form>div.file { grid-column: 1 / span 2; }
	form>div.uploadfield { grid-column: 1 / span 2; }
	form>div.form-submit { grid-column: 2 / span 1; }
	
	/* damage report */
	.damage-breadcrumbs { flex-direction: row; }
	
	/* subpages */
	.subpages { grid-template-columns: repeat(2, 1fr); }
}

/* large screen */
@media screen and (min-width: 1200px) {
	:root {
		--side-distance: 10%;
	}
	header nav a { font-size: 1rem; }
	.headerbox { width: 40%; }
	
	/* subpages */
	.subpages { grid-template-columns: repeat(3, 1fr); }
}

/* ery large screen */
@media screen and (min-width: 1600px) {
	:root {
		--side-distance: 20%;
	}
}