@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Maitree:wght@200;300;400;500;600;700&display=swap');


/* ============================================= */
/* CSS VARIABLES 
/* ============================================= */

:root {
  --accent:      rgba(125,25,55,1.00); /* 95,19,42,1.00 */
  --accent_30:   rgba(46,26,21,0.3);
  --bright:       rgba(215,210,191,1.00);
	
}



/* ============================================= */
/* CSS RESET 
/* ============================================= */

*{
	box-sizing:border-box;
	padding:0;
	margin:0;
}

/* ============================================= */
/* BASIC DEFINITION  
/* ==========================================o=== */

body {
	font-family: "Inconsolata", monospace;
    background:var(--accent);
	color:var(--accent);
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size:18px;
	padding:1rem 3rem;
}
a, a:link, a:visited, a:active  {
	color:var(--accent);
	text-decoration:none;
	border-bottom:1px solid none;
	transition: all 1s ease-in-out;
}
a:hover {
	color:white;
	text-decoration:none;
	transition:all 1s ease-in-out;
}
a {
	color:var(--accent);
	text-decoration:none;
}
h1 {
	font-size:3rem;
	text-transform: uppercase;
	font-weight: 800;
		font-style: bold;
}

h2 {
  font-family: "Maitree", serif;
  font-style: normal;
	font-weight: 500;
    animation: fade-in 1s ease-in-out;
}

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


.font_serif {
  font-family: "Maitree", serif;
  font-style: normal;
}

.font_200 {
  font-weight: 200;
}
.font_600 {
  font-weight: 600;
}
.lightgray {
    color:rgba(244,255,244,0.5);
}

.klein {
	font-size:0.7rem;
	font-weight:normal;
}




/* ============================================= */
/* HEADER 
/* ============================================= */


header {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom:3rem;
	height:12rem;
}
header .logo {
	position:relative;
	overflow: hidden;
	width:12rem;
	height:12rem;
	flex-grow:0;
	aspect-ratio:1/1 !important;
	border:2px solid var(--accent);
	border-radius:50%;
	line-height:0;
}
header .logo img {
	transform:scale(1.1);
	width:100%;
	height:100%;
	object-fit: cover;
	transition:all ease-in-out 0.5s;
}

header .logo:hover img {
	opacity:0.5;
	transform:scale(1.2);
	transition:all ease-in-out 0.3s;
}



header .berater_bild {
	width:12rem;
	height:12rem;
	position:relative;
	overflow: hidden;
	border:2px solid var(--accent);
	border-radius:50%;
	flex-grow:0;
	aspect-ratio:1/1 !important;
	line-height:0;
	display:flex;
	align-items: center;
}

header .berater_bild img {
	transform:scale(1.1);
	width:100%;
	height:100%;
	object-fit: cover;
	transition:all ease-in-out 0.5s;
}
header .berater_bild h3 {
	position:absolute;
	bottom:-1rem;
	left:.5rem;
	right:.5rem;
	font-size:0.8rem;
	text-align: center;
	transition:all ease-in-out 0.5s;
}
header .berater_bild:hover h3 {
	bottom:3rem;
	left:.5rem;
	right:.5rem;
	transition:all ease-in-out 0.3s;
}
header .berater_bild:hover img {
	opacity:0.5;
	transition:all ease-in-out 0.3s;
	transform:scale(1.2);
}



nav {
	display:flex;
	justify-content: center;
	margin:1rem 0rem;
}
nav a {
	color:white !important;
	background:var(--accent);
	border:1px solid var(--accent);
	padding:0.5rem 1rem;
	margin:0rem 0.3rem;
	border-radius:0.2rem;
	transition:all ease-in-out 0.5s;
}

nav a:hover {
	color:var(--accent) !important;
	background:var(--bright);
	border:1px solid var(--accent);
	transition:all ease-in-out 0.3s;
}


















/* ============================================= */
/* MAIN 
/* ============================================= */


main {
	max-width:1200px;
	width:100%;
	padding:1rem;
	margin:0 auto;
    background:var(--bright);
	border:1px solid var(--accent_30);
	border-radius:0.3rem;
	line-height: 1.8;
	box-shadow: 0px 0px 2px rgba(33,33,33,0.6);
}

.fa-small {
	font-size:0.8rem;
}


.list {
	display:flex;
	flex-direction: column;
	flex-wrap:wrap;
	justify-content:flex-start;
	margin:1rem 0rem;
}

.margin_top {
	margin-top:1rem;
	border-top:2px solid var(--accent);
}

.list_entry {
	padding:0.5rem 1rem;
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: space-between;
	column-gap: 1rem;
	height:auto;
	transition:all ease-in-out 0.4s;
}

.list_entry:hover {
	background:rgba(255,255,255,0.8);
	transition:all ease-in-out 0.2s;
}

.list_entry div{
}
.list_entry .list_xxs {
	width:3%;
	white-space: nowrap;
}
.list_entry .list_xs {
	width:8%;
	white-space: nowrap;
}

.list_entry .list_s {
	width:12%;
}

.list_entry .list_m {
	width:45%;
}
.list_entry .list_l {
	width:60%;
}

.list_entry .flex_end {
	text-align: right;
	display:flex;
	justify-content: flex-end;
}

.list_entry figure {
	width:auto;
	height:5rem;
	padding:0.2rem;
	aspect-ratio:1/1;
	overflow: hidden;
}
.list_entry figure img {
	height:100%;
	width:100%;
	object-fit: contain;
	border:1px solid var(--accent_30);
	transition:all ease-in-out 0.5s;
	overflow: hidden;
	background:white;
}
.list_entry figure:hover img {
	cursor:pointer;
	transition:all ease-in-out 0.3s;
	border:1px solid var(--accent);
	opacity: 0.6;
	transform:scale(1.2);
}

.list_normal {
	position:relative;
	transition:all ease-in-out 0.5s;
	margin-bottom:0.5rem;
}
.list_normal:hover {
	background:white;
	transition:all ease-in-out 0.3s;
}
.list_oben_rechts {
	position: absolute;
	top:0rem;
	right:1rem;
}









.eintrag_bestaetigung{
	background:rgba(67,85,23,1.00);
	color:white;
	padding:1rem;
	margin-bottom:1rem;
}

.feeling_good,.feeling_medium,.feeling_bad{
	display:inline-flex;
	border-radius:50%;
	height:1.5rem;
	width:1.5rem;
	padding:0.3rem;
	justify-content: center;
	align-items: center;
}
.feeling_good{
	background:rgba(22,151,30,1.00);
	color:antiquewhite;
}
.feeling_medium{
	background:rgba(192,115,30,1.00);
	color:antiquewhite;
}
.feeling_bad{
	background:rgba(168,46,11,1.00);
	color:antiquewhite;
}

.feeling_good_color{
	background:rgba(22,151,30,1.00);
	color:antiquewhite;
}
.feeling_medium_color{
	background:rgba(192,115,30,1.00);
	color:antiquewhite;
}
.feeling_bad_color{
	background:rgba(168,46,11,1.00);
	color:antiquewhite;
}


.list_entry_active{
	background:antiquewhite !important;
}

.wochen_button{
	display:inline-block;
	border-radius:0.3rem;
	padding:0.3rem .5rem;
	background:var(--white);
	border:1px solid var(--accent);
	margin-right:1rem;
}



.wochen_ueberblick_titel{
	margin:1rem 0rem;
}

.wochen_ansicht{
	display:flex;
	border:1px solid var(--accent);
	border-radius:0.3rem;
	min-height:40rem;
	flex-wrap: wrap;
	font-size:0.8rem;
}

.tages_ansicht{
	display:flex;
	flex-direction: column;
	border-right:1px solid var(--accent);
	min-height:40rem;
	width:calc(100%/7);
	flex-grow: 0;
}
.tages_ansicht_vormittag{
	height:auto;
	min-height:12rem;
	border-bottom:1px dashed var(--accent);
	background-color:rgba(140,103,73,0.2);
}

.tages_ansicht_mittag{
	height:auto;
	min-height:18rem;
	background-color:rgba(140,103,73,0.4);
	border-bottom:1px dashed var(--accent);
}
.tages_ansicht_abend{
	height:auto;
	min-height:12rem;
	background-color:rgba(140,103,73,.8);
}


.tages_titel{
	font-weight:bold;
	background-color:white !important;
	padding:0.2rem;
}
.tages_eintrag{
	border:1px solid var(--accent);
	flex-grow: 0;
}




.tages_ansicht_eintrag {
	border-bottom:1px solid var(--accent);
	position:relative;
	
}
.tages_ansicht_eintrag_foto_icon {
	position:absolute;
	top:0.3rem;
	right:0.3rem;
	
}


form {
	width:100%;
	margin-top:3rem;
}
form label {
}
form input, form select, form textarea {
	width:30%;
	font-size:1rem;
	border:1px solid var(--accent);
	border-radius:0.3rem;
	padding:.5rem;
	color:var(--accent);
	font-family: "Inconsolata", monospace;
	background:var(--white) !important;
}

form .form_radios input {
	width:auto;
	padding:.5rem;
}
form .form_radios label {
	margin-right:2rem;
	border:1px solid var(--accent);
	border-radius:0.3rem;
	padding:.5rem;
	cursor:pointer;
}
form .form_radios label:hover {
	
	border:1px solid none;
	color:var(--bright);
	background:var(--accent);
	transition:all ease-in-out 0.3s;
}
.formular h4 {
	margin:0.5rem 0rem;
}








fieldset {
	border:1px solid var(--accent);
	border-radius:0.3rem;
	padding:0rem 1rem 1rem 1rem;
	margin-bottom:1rem;
}
legend {
	padding:0 .5rem;
}
section {
	border-top:1px solid var(--accent_30);
	min-height:50vh;
}
section h2 {
	border-bottom:1px solid var(--accent_30);
	margin-bottom:1rem;
}
section img {
	width:100%;
}

/* ============================================= */
/* responsive media queries
/* ============================================= */

/* ---------------- */
/* 1100px */
/* ---------------- */
@media(max-width: 1100px) { 
   
	header .logo, header .berater_bild {
		max-height: 20vw;
		height:20vw !important;
		width:20vw !important;
		asepct-ratio:1/1 !important;
	}
	header img {
		max-height: 20vw;
		height:20vw !important;
		width:20vw !important;
		asepct-ratio:1/1 !important;
	}
	
	
	nav {
		flex-direction:column;
	}
	nav a{
		margin-bottom:1rem;
	}
	
	.form_radios {
		display:flex;
		flex-wrap:wrap;
		flex-direction:column;
	}
	.form_radios label {
		display:block;
	width:80%;
		margin-bottom:1rem;
	}
	
    
	form input, form select, form textarea {
	width:80%;
	}
	.list_entry{
		position:relative;
		flex-direction:column;
		width:100% !important;
	}
	.list_entry div{
		width:100% !important;
		justify-content: flex-start !important;
		text-align:left !important;
	}
	
	.list_entry b{
		font-size:1.2rem;
	}
	
	.list_entry figure {
		width: auto;
		height: 12rem;
	}
	
	
	.list_entry .list_button {
		display:inline-block;
		position:absolute;
		top:1rem;
		right:1rem;
		width:1rem !important;
	}
	
	
} /* end 1100px */
/* ---------------- */