form {
	border:none;
}

label {
	display:block;
}
label > * {
	margin-right:0px;
	margin-top:0.2em;
}
label [type=range] {
	display:inline-block;
	margin:0px 0.5em;
}
label.flex {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

label div {
	font-size:0.8em;
	color:#666;
}

textarea {
	width:100%;
	height:8em;
	font:inherit;
}
fieldset {
	margin-top:1em;
}

[type=submit] {
	padding:0.5em 1em;
	border-radius:0.2em;
	margin:1em auto;
	display:block;
	font-size:1.2rem;
	border:2px solid limegreen;
	background-color:white;
	color:limegreen;
	transition:background-color 0.5s, color 0.8s;
	cursor:pointer;
}
[type=submit]:hover {
	background-color:limegreen;
	color:white;
}

#PB {
	width:20em;
	aspect-ratio:1;
	border-radius:50%;
	object-fit:cover;
	object-position:center;
	display:block;
	border:2px solid #eee;
	padding:0.5em;
	margin:auto;
	border:2px solid grey;
	background:white;
}

/*
.filled_1 input,
.filled_1 textarea,
.filled_1 select {
	border:none;
	padding:0px;
	background:none;
	display:inline;
}
.filled_1 label {
	font-size:0px;
}
.filled_1 label > * {
	font-size:1rem;
}
.filled_1 [type=file] {
	display:none;
}
*/
* {
	box-sizing:border-box;
}

:root {
    --col_width:80rem;
    --col_hg:#f2f2f2;
    --col_font:#232323;
    --col_a:#666;
    --col_border:#bec1c1;
    
    --font:"Playfair Display";
    border-top:5px solid var(--col_font);
}
body {
	background-color:var(--col_hg);
}

article.p {
    font-family:var(--font), sans-serif;
    font-size:1em;
    line-height:1.5;
    
	color:var(--col_font);
	
	display:grid;
	grid-template-columns:minmax(15em,25em) repeat(3,1fr);
	grid-template-rows:1fr 1fr 8em;
	grid-template-areas:
		"person personality aktivierung erreichbarkeit"
		"person technik kommunikation wm";
	grid-gap:1em;
}
article.p > :not(.personal) {
	border:2px solid var(--col_border);
	padding:1em;
	border-radius:0.5em;
	background-color:hsla(0,0%,100%,0.5);
}
article.p .personal {
	grid-area:person;
	background-color:var(--col_font);
	color:var(--col_hg);
	padding:1em;
	border-radius:0.5em;
}
article.p .wuensche {
	grid-area:wuensche;
}
article.p marken {
	grid-area:marken;
}

article.p dl {
	display:grid;
	grid-template-columns:40% 1fr;
	column-gap:1em;
	row-gap:0.5em;
	line-height:1.2;
	margin-bottom:1.5em;
}
article.p dt {
	text-transform:uppercase;
	font-size:0.7em;
	text-align:right;
	color:var(--col_a);
	margin-top:0.2rem;
}
article.p h1 {
	font-size:2.5rem;
	margin-bottom:1rem;
	font-weight:normal;
}
article.p .wm > section + section {
	margin-top:1em;
}
article.p .icon {
	float:right;
	margin-left:1rem;
	margin-bottom:1rem;
	margin-top:-0.8em;
	margin-right:-0.5em;
	font-size:3em;
	line-height:1;
	padding:0.25em;
	border:2px solid var(--col_border);
	border-radius:50%;
	background-color:var(--col_hg);
	color:var(--col_font);
}
article.p legend,
article.p h2 {
	font-size:1.3rem;
	margin-bottom:1em;
	padding: 0.2em 1em;
	border-radius: 0.2em;
	font-weight: bold;
	background-color: white;
}

form[method=get] {
	border-color:white;
	margin-bottom:2em;
}