/* Design */ 

:root {
	--primary-color: #b3d8fc;
	--secondary-color: #eff9f2;
	--special-color: #f9d8f8;
	--light-color: #f1f1f1;
	--mid-color: #adadad;
	--dark-color: #515151;
}

/* Design Ende */ 

/* HTML Standard */

html::before { 
    content: ' '; 
    display: block; 
	background-repeat: no-repeat;
    background-position: bottom left;
    background-size: auto; 
    height: 95vh; width: 100vw; 
    bottom: 0; 
    position: fixed; 
    z-index: -10; 
}

html {
	background-color: white;
	color: black;
	font-family: arial, verdana;
	font-size: 0.9em;
	line-height: 1.5em;
	/* Verhindert das automatische Vergrößern der Schrift im iPhone-Querformat */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (min-width: 300px) {
	html::before {
		background-image: url('bg_2.png');
	}
}

@media (min-width: 900px) {
	html::before {
		background-image: url('bg_3.png');
	}
}

@media (min-width: 1200px) {
	html::before {
		background-image: url('bg_4.png');
	}
}

body {
	margin: 0;
	min-height: 100%;
	max-width: 100%;
}

h2  {
    text-align: center;
}

A {
    color: inherit;
	text-decoration: none;
}

A.text {
    color: blue;
}

img {
	border-radius: 10px;
	max-width: 100%;
    height: auto;
}

img.i_gallery:hover  {
	cursor: pointer;
	opacity: 0.7;
	transition: 0.2s;
}

ul {
    list-style-type: circle;
	margin: 0;
}

/* HTML Standard Ende */

/* Custom */

.alert {
	color: red;
}

.gray {
	color: gray;
}

.dontprint {
	display: none; 
}

.href {
    color: blue;
	cursor: pointer;
}

/* Custom Ende */

/* Grid */

grid_double_l {
	align-items: start;
	background-color: white;
	border-color: white;
	border-radius: 5px;
	border-spacing: 0px;
	border-style: solid;
	border-width: 2px 2px 2px 2px;
	box-shadow: 0px 0px 5px 1px silver; 
	padding: 1em;
	display: grid;
	gap: 0em;
	justify-items: left;
	margin: auto;
	width: 90%;
}

double_header,double_left,double_double,double_right {
	text-align: left;
	width: 100%;
}

double_left {
	max-height: 75vh;
	overflow-y: scroll;
}

double_right {
	max-height: 75%;
}

double_header {
	grid-area: double_header;
}

double_left {
	grid-area: double_left;
}

double_double {
	grid-area: double_left / span 2;
}

double_right {
	grid-area: double_right;
}

@media (min-width: 200px) {
	grid_double_l {
		grid-template-columns: 100%;
		grid-template-areas:	"double_header"
								"double_left"
								"double_double"
								"double_right";
	}
}

@media (min-width: 1100px) {
	grid_double_l {
		grid-template-columns: 50% 50%;
		grid-template-areas:	"double_header double_header"
								"double_left double_right";
	}
}

@media (min-width: 1200px) {
	grid_double_l {
		grid-template-columns: 70% 30%;
	}
}

grid_tripple {
	align-items: start;
	display: grid;
	gap: 0;
	grid-template-columns: 33% 34% 33%;
	grid-template-areas:	"tripple_header tripple_header tripple_header"
							"tripple_left tripple_middle tripple_right";
	justify-items: left;
	margin: auto;
	width: 90%;
}

tripple_header,tripple_left,tripple_left_middle,tripple_middle,tripple_right {
	padding: 0em;
	text-align: left;
	width: 100%;
}

tripple_left,tripple_middle,tripple_right {
	max-height: 75vh;
	overflow-y: scroll;
}

tripple_header {
	grid-area: tripple_header;
}

tripple_left {
	grid-area: tripple_left;
}

tripple_middle {
	grid-area: tripple_middle;
}

tripple_left_middle {
	grid-area: tripple_left / span 2;
}

tripple_right {
	grid-area: tripple_right;
}

@media (max-width: 500px) {
	grid_tripple {
		grid-template-columns: 100%;
		grid-template-areas:	"tripple_header"
								"tripple_left"
								"tripple_left_middle"
								"tripple_middle"
								"tripple_right";
	}
}

grid_repeat {
	align-items: start;
	display: grid;
	gap: 2em;
	grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
	margin: auto;
	max-width: 140em;
    padding: 0 2em 0 2em;
}

grid_repeat > content {
	text-align: center;
	padding: 0em;
}

@media (max-width: 600px) {
	grid_repeat {
		grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
	}
}

grid_cv {
	align-items: start;
	background-color: white;
	box-shadow: 0px 0px 5px 1px silver; 
	border-radius: 15px;
	display: grid;
	gap: 0.5em;
    grid-template-columns: 1fr 1fr;
	margin: auto;
	max-width: 85em;
    overflow:hidden;
    padding: 2em 1em 1em 1em;
}

cv_header {
	font-size: 1.1em;
	font-weight: bold;
    grid-column: span 2;
	line-height: 1.6;
	padding: 0.5em;
	text-align: center;
}

cv_intro {
	line-height: 1.6;
	padding-right: 0.5em;
	text-align: right;
}

cv_section {
	font-weight: bold;
    grid-column: span 2;
	padding: 0.5em;
    text-align: left;
}

cv_text {
	line-height: 1.6;
    grid-column: span 2;
	padding: 0.5em;
    padding-right: 2em;
	text-align: left;
}

cv_pic {
    padding-right: 0.5em;
	text-align: center;
}

@media (min-width: 645px) {
    grid_cv {
        grid-template-columns: 40% 60%;
    }
    cv_intro {
        grid-column: span 1;
        padding-right: 0.5em;
        text-align: right;
    }
    cv_text {
        grid-column: span 1;
        text-align: left;
    }
    cv_pic {
        padding-right: 0.5em;
    }
    cv_header {
        grid-column: span 2;
    }
    cv_section {
        grid-column: span 1;
    	text-align: right;
	}
}

@media (min-width: 900px) {
    grid_cv {
        grid-template-columns: 30% 30% 40%;
    }
    cv_intro {
        grid-column: span 2;
        padding-right: 5em;
        text-align: right;
    }
    cv_text {
        grid-column: span 2;
        text-align: left;
    }
    cv_pic {
        justify-self: center;
    }
    cv_header {
        grid-column: span 3;
    }
    cv_section {
        grid-column: span 1;
    	text-align: right;
	}
}

grid_list {
	background-color: var(--primary-color);
    border-spacing: 0px;
	border-style: solid;
	border-width: 1px 0 1px 1px;
	border-color: white;
	box-shadow: 0px 0px 5px 1px silver; 
	display: grid;
	font-weight: bold;
	gap: 0em;
	grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
	margin: auto;
    padding: 0px;
}

grid_list > content {
	align-content: center;
	background-color: var(--primary-color);
	
	cursor: pointer;
	height: 2.8em;	
	padding-left: 0.2em;
}

grid_list > content_active {
	align-content: center;
	background-color: var(--secondary-color);
	
	cursor: pointer;
	height: 2.8em;
	padding-left: 0.2em;
}

grid_list > content_add {
	align-content: center;
	background-color: var(--primary-color);
	border-radius: 0px;
	height: 2.5em;
	padding-right: 0.3em;
}

.gallery {
	align-content: center;
	border-spacing: 0px;
	border-style: solid;
	border-width: 0px;
   	display: grid;
   	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	grid-auto-flow: dense;
	gap: 2em;
	margin: auto;
	max-width: 120em;
	padding: 2em;
}

.gallery figure {
	position: relative;	
	margin: 0;
}

.gallery figure.landscape {
	grid-column-end: span 2;
}

.gallery figure.nohit {
	grid-column: 1 / -1;
}

.gallery figure img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.gallery_priv {
	align-content: center;
	border-spacing: 0px;
	border-style: solid;
	border-width: 0px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	grid-auto-flow: dense;
	gap: 2em;
	margin: auto;
	max-width: 120em;
	padding: 2em;
}

.gallery_priv figure {
	position: relative;	
	margin: 0;
}

.gallery_priv figure.landscape {
	grid-column-end: span 2;
}

.gallery_priv figure.nohit {
	grid-column: 1 / -1;
}

.gallery_priv figure img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}


/* Grid Ende*/

/* Header */

header {
	left: 50%;
	margin: auto;
	position: relative;
	text-align: center;
	transform: translate(-50%);
}

img.header {
 	min-width: 200px;
}

/* Header Ende */

/* Navigation */

#overlay_nav {
	background-color: rgba(0,0,0,0.8);
	bottom: 0;
	height: 100%;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: 0.5s;
	width: 0;
	z-index: 8;
}

#navi, #navi_maint {
	background-color: white;
	border-color: var(--light-color);
	border-spacing: 0px;
	border-style: solid;
	border-width: 0 2px 0;
	height: 100%;
	margin: 0;
	overflow: auto;
	padding: 0;
    position: fixed;
	top: 0;
	transition: 0.2s;
}

#navi {
	left: -12.3em;
	width: 12em;
	z-index: 9;
}

#navi_maint {
	display: none;
	right: 0em;
	width: 0em;
	z-index: 7;
}

grid_nav, grid_nav_maint {
	align-items: start;
	display: grid;
	gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
	margin: auto;
    padding: 0;
	position: absolute;
	text-align: left;
	z-index: 9;
}

grid_nav > nav_menu_header, grid_nav_maint > nav_maint_menu_header {
	font-weight: bolder;
	text-align: center;
}

grid_nav > nav_menu, grid_nav_maint > nav_maint_menu, nav_menu_hidden {
	cursor: pointer;
}

grid_nav_maint > nav_maint_menu {
	text-align: right;
}

grid_nav_maint > nav_maint_footer {
	color: grey;
	text-align: center;
}

grid_nav > nav_menu_hidden {
	display: none;
}

grid_nav > nav_menu:hover, nav_menu_hidden:hover, grid_nav_maint > nav_maint_menu:hover {
	background-color: var(--mid-color);
}

div.nav_menu, div.nav_menu_hidden {
	height: 100%;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

div.nav_menu_hidden {
	font-size: 0.9em;
	padding-left: 1em;
}

@media (min-width: 100px) {
	div.nav_menu, div.nav_menu_hidden {
		line-height: 3em;
	}
	div.nav_menu_hidden {
		line-height: 2.5em;
	}
}

@media (min-width: 700px) {
	div.nav_menu, div.nav_menu_hidden {
		line-height: 2.5em;
	}
	div.nav_menu_hidden {
		line-height: 2em;
	}
}

.i_menu_open, .i_menu_close {
	cursor: pointer;
	height: 2em;
	left: 0.2em;
	position: fixed;
	top: 0;
	transition: 0.2s;
	width: 2em;
	z-index: 9;
}

.i_menu_close {
	left: 12.2em;
    transform: rotate(45deg);
}

/* Navigation Ende */

/* Pflege-Maske */

#overlay {
	background-color: rgba(0,0,0,0.5);
	bottom: 0;
	height: 100%;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 3;
}

/* Pflege-Maske Ende */

/* Container */

.width_small, .width_normal, .width_big, .width_max {
	margin: auto;
}

.overlay_box, .overlay_box_small {
	background-color: #FBFBFB;
	border-color: silver;
	border-radius: 10px;
    border-style: solid;
	border-width: 2px;
	display: inline-block;
	left: 50%;
	overflow: hidden;
	overflow-y: auto;
	padding: 2em;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 4;
}

.message_box {
	background-color: white;
	border-color: silver;
	border-radius: 10px;
    border-style: solid;
	border-width: 2px;
	display: inline-block;
	left: 50%;
	min-width: 12em;
	overflow: hidden;
	padding: 2em;
	position: absolute;
	top: 85%;
	transform: translate(-50%,-50%);
	z-index: 4;
}

@media (min-width: 100px) {
	.width_small {
		width: 90%;
	}
	.width_normal {
		width: 95%;
	}
	.width_big {
		width: 95%;
	}
	.width_max {
		width: 95%;
	}
	.overlay_box, .overlay_box_small {
		max-height: 80%;
		width: 80%;
	}
}

@media (min-width: 650px) {
  	.width_small {
		width: 80%;
	}
	.width_normal {
		width: 95%;
	}
	.width_big {
		width: 95%;
	}
	.overlay_box {
		max-height: 80%;
		width: 80%;
	}
	.overlay_box_small {
		max-height: 60%;
		width: 55%;
	}
}

@media (min-width: 1100px) {
	.width_small {
		width: 70%;
	}
	.width_normal {
		width: 80%;
	}
	.overlay_box {
		max-height: 60%;
		width: 50%;
	}
	.overlay_box_small {
		max-height: 50%;
		width: 35%;
	}
}

/* Container Ende*/


/* Tabellen */

table.list, table.structure {
	background-color: white;
	border-color: white;
	border-radius: 5px;
	border-spacing: 0px;
	border-style: solid;
	border-width: 2px 2px 2px 2px;
	box-shadow: 0px 0px 5px 1px silver; 
	padding: 0px;
	text-align: center;
	width: 100%;
}

table.list th {
	background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 5px 5px 0 0;
    border-spacing: 0px;
    border-style: solid;
    border-width: 2px;
	height: 2em;
	padding: 0em;
	padding-left: 0.2em;
	text-align: left;
}

table.structure td {
	height: 2.5em;
}

table.list td {
	background-color: transparent;
	border-color: #F8F8F8 white #F8F8F8 white;
	border-style: solid solid solid outset;
	border-width: 1px 0px 1px 0px;
	height: 1.9em;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	padding: 0 0 0 0;
} 

table.list th.left {
	border-radius: 5px 0px 0px 0px;
    border-width: 2px 0px 2px 2px;
}

table.list th.mid {
	border-radius: 0px;
    border-width: 2px 0px 2px 0px;
}

table.list th.right {
	border-radius: 0px 5px 0px 0px;
    border-width: 2px 2px 2px 0px;
}

table.list td:hover {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
}

table.list td.last  {
	border-width: 2px 0px 0px 0px;
}

table.inner {
	background-color: transparent;
	border-spacing: 0;
	border-width: 0;
	color: black;
	padding: 0;
	width: 100%;
}

table.inner td, table.inner td.empty {
	border-width: 0;
	height: 2.5em;
	padding: 0;
}

table.inner td.empty {
	font-weight: bold;
	height: 4em;
}

.d_table_inner, .d_table_inner_pointer {
	padding: 0.8em 0em 0.8em 0.2em;
	width: 100%;
}

.d_table_inner_pointer {
	cursor: pointer;
}

.img_th_add, .img_td_conf {
	border-style: solid;
	border-color: silver;
	border-width: 1px;
	border-radius: 10px;
	box-shadow: 0px 0px 0px 0px silver;
	cursor: pointer;
	width: 18px;
	position: relative;
	right: 2px;
}

.img_td_conf {
	cursor: pointer;
	position: relative;
	right: 7px;
	top: -5px;
}

.img_nav {
	border-radius: 0px;
	position: relative;
	top: 3px;
	width: 18px;
}

.img_conf {
	cursor: pointer;
	position: relative;
	right: 7px;
	top: -5px;
	width: 18px;
}

/* Tabellen Ende */

/* Formulare */

form, form.contact {
    align-items: center;
	background-color: white;
	border-spacing: 0px;
	border-radius: 5px;
	border-style: solid;
	border-width: 0px;
	box-shadow: 0px 0px 1px 1px silver;
	display: grid;
	gap: 1em;
	grid-auto-flow: row dense;
	margin: auto;
	padding: 1em;
}

form.contact {
	grid-template-columns: [controls] auto;
}

@media (min-width: 100px) {
	form {
		grid-template-columns: [controls] auto;
	}
	form > labels, form > labels_text {
		font-weight: bold;
		grid-column: controls;
		grid-row: auto;
		text-align: left;
	}
	form > labels_del {
		font-weight: bold;
		grid-column: controls;
		grid-row: auto;
		text-align: center;
	}
}

@media (min-width: 650px) {
	form {
		grid-template-columns: [labels] 9em [controls] auto;
	}
	form > labels {
		grid-column: labels;
	}
	form > labels_del, form > labels_text {
		grid-column: labels / span 2;
	}
}

form > input,
form > textarea,
form > select,
form > file {
	background-color: var(--secondary-color);
	border-color: silver;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	box-shadow: 0px 0px 1px 0px silver;
	color: #F4F4F4F;
	font-size: 1em;
	grid-column: controls;
	grid-row: auto;
	height: 1.8em;
	outline: none;
}

form > select {
	height: 2.1em;
}

form > select.multiple {
	height: 6em;
}

form > textarea {
	font-family: arial, verdana;
	height: 14em;
	padding-top: 0.5em;
}

form > input:focus, textarea:focus, select:focus {
	background: var(--special-color);
}

form > .i_form_alert {
	color: #F4F4F4F;
	background-color: #FFF5F5;
	border-color: #FF5C5C;
	box-shadow: 0px 0px 1px 0px #FF7A7A;
}

form > #buttons {
	grid-column: 1 / -1;
	grid-row: auto;
	justify-self: end;
}

form > #fullwidth {
	grid-column: 1 / span 2;
	grid-row: auto;
}

.i_button {
	background-color: var(--secondary-color);
	border-color: silver;
    border-radius: 5px;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	box-shadow: 0px 0px 1px 0px silver;
	color: black;
	font-size: 11pt;
	padding: 5px 10px 5px 10px;
	outline: none;
}

.i_button:focus {
	background: var(--special-color);
}

.i_button_close {
	border-color: silver;
	border-radius: 50%;
	border-style: solid;
	border-width: 2px;
	cursor: pointer;
	position: absolute;
	right: -8px;
	top: -8px;
	transform: rotate(45deg);
}

.i_checkbox_container {
	cursor: pointer;
	display: block;
	font-size: 11pt;
	margin-bottom: 12px;
	padding-left: 20px;
	position: relative;
	top: -6px;
	user-select: none;
}

.i_checkbox_container input {
	cursor: pointer;
	opacity: 0;
	position: absolute;
}

.i_checkbox, .i_checkbox_alert {
	background-color: var(--secondary-color);
	border-color: silver;
	border-radius: 15px;
	border-style: solid;
	border-width: 2px;
	height: 20px;
	left: 0;
	position: absolute;
	top: 0;
	width: 20px;
}

.i_checkbox_alert {
	border-color: #FF5C5C;
}

.i_checkbox_container:hover input ~ .i_checkbox {
	background-color: var(--light-color);
}

.i_checkbox_container input:checked ~ .i_checkbox {
	background-color: var(--primary-color);
}

.i_checkbox_container:hover input ~ .i_checkbox_alert {
	background-color: var(--light-color);
}

.i_checkbox_container input:checked ~ .i_checkbox_alert {
	background-color: var(--primary-color);
}

form.f_suche {
	grid-template-columns: [labelsearch] auto [controls] 12.5em [clear] auto [button] auto;
	gap: 0.5em;
	max-width: 22em;
	padding: 0.5em;
}

form.f_suche > labelsearch {
	grid-column: labelsearch;
	grid-row: 1;
}

form.f_suche > clear {
	grid-column: clear;
	grid-row: 1;
}

form.f_suche > #buttons {
	grid-column: button;
	grid-row: 1;
}

.i_search_clear {
	position: relative;
	top: 3px;
	width: 30px;
}

form.hidden {
	background-color: transparent;
	border-spacing: 0px;
	border-width: 0px;
	box-shadow: 0px 0px 0px 0px transparent;
}

form.f_suche_public {
	grid-template-columns: [controls] auto;
	gap: 0.5em;
	max-width: 22em;
	padding: 0.5em;
}

form.f_suche > controls {
	grid-column: f_suche_public;
	grid-row: 1;
}

/* Formulare Ende */