/**************************************************\
|*  ________________                              *|
|*  |______________|  (C) 2024 by Thomas Klaemmt  *|
|*  -------||-----/|                              *|
|*  |      ||    / |  Winzerstrasse 3             *|
|*  |      ||   /  |  79761 Waldshut-Tiengen      *|
|*  |      ||  //  |  Germany                     *|
|*  |      || // \ |                              *|
|*  |______||//___\|  tk@klaemmt.de               *|
|*                                                *|
\**************************************************/


/*********************************************\
|* Default settings and variable definitions *|
\*********************************************/

:root {
	--theme-colour: rgba(70, 90, 130, 1);       /* Hex: #465a82 */
	--theme-colour-accent: rgba(0, 35, 102, 1); /* Hex: #002366 */
	/* --theme-colour-highlight: rgba(0, 66, 37, 1); */ /* Hex: #004225 british racing green*/
	--theme-colour-highlight: rgba(50, 140, 220, 1); /* Hex: #328cdc */

	--light-bg-colour: white;
	--light-bg-highlight: floralwhite;
	--light-bg-subtle: lightgrey;
	--light-fg-colour: black;
	--light-fg-subtle: grey;
	--light-fg-highlight: var(--theme-colour-highlight);
	--light-button-fg: var(--theme-colour);
	--light-button-bg: var(--light-bg-colour);
	--light-button-bo: var(--theme-colour-accent); /* border colour */
	--light-button-ho: var(--light-bg-colour);     /* hover colour */
	--light-button-hb: var(--theme-colour);        /* hover background colour */ 

	--dark-bg-colour: #121212;
	--dark-bg-highlight: #282828;
	--dark-bg-subtle: black;
	--dark-fg-colour: lightgrey;
	--dark-fg-subtle: grey;
	--dark-fg-highlight: var(--theme-colour-highlight);
	--dark-button-fg: var(--dark-fg-colour);
	--dark-button-bg: var(--dark-bg-highlight);
	--dark-button-bo: var(--theme-colour-accent);
	--dark-button-ho: var(--dark-fg-colour);
	--dark-button-hb: var(--theme-colour);

	/* Set colour scheme to light */
	--theme-bg-colour: var(--light-bg-colour) ;
	--theme-bg-highlight: var(--light-bg-highlight);
	--theme-bg-subtle: var(--light-bg-subtle);
	--theme-fg-colour:var(--light-fg-colour);
	--theme-fg-subtle:var(--light-fg-subtle);
	--theme-fg-highlight: var(--light-fg-highlight);
	--theme-button-fg: var(--light-button-fg);
	--theme-button-bg: var(--light-button-bg);
	--theme-button-bo: var(--light-button-bo);
	--theme-button-ho: var(--light-button-ho);
	--theme-button-hb: var(--light-button-hb);

	/* Font sets */
	--theme-font-default: Tahoma, Calibri, sans-serif;
	--theme-font-headline: Futura, Verdana, sans-serif;
	--theme-font-cursive: Garamond, Georgia, Times, serif;
	--theme-font-narrow: Tahoma, Arial Narrow, sans-serif;
}

body {
	background-color: var(--theme-bg-colour);
	text-align: center;
}
.invisible {
	display: none;
}

/***************************\
|* responsive column model *|
\***************************/
* {
  box-sizing: border-box;
}
[class*="col-"] {
  width: 100%;
  float:left;
  padding:1rem;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
#container.memorialpage * {
	text-align: left;
}
#container {
	border-style: none;
	margin: 2rem auto;
}

#container.contactpage {
	text-align: center;
}
#fullscreenPosting,
#fullscreenPhoto {
	z-index:999;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:center;
	background-color:var(--theme-bg-colour);
}
#fullscreenPosting img,
#fullscreenPhoto img {
	background-color:var(--theme-bg-colour);
	max-width: 100%;
	height:auto;
}
#roPhotoFull {
	display: block;
	margin: auto;
}
#footer {
	position: fixed;
	bottom: 0px;
	padding: 5px 0;
	width: 100%;
	background-color: var(--theme-bg-highlight);
	text-decoration: none;
}
.hide {
	display: none;
}

/******************\
|* Top Navigation *|
\******************/

#navbar {
	width:100%;
	height: 44px;
	position:fixed;
	top:0px;
	left:0px;
}

#navbarBurgerIcon {
	font-family: var(--theme-font-default); /* verdana, sans-serif; */
	font-size: 32px;
	font-weight: normal;
	text-decoration: none;
	line-height: 32px;
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0px;
	/* margin-left: 6px; */
	padding: 0px 6px 6px 6px;
	background-color: var(--theme-bg-colour);
	color:var(--theme-fg-subtle);
}
#navbarBurgerIcon:hover {
	color: var(--theme-bg-colour);
	background-color: var(--theme-colour);
}
#navbarLogo {
	display:block;
	position:absolute;
	right:0px;
	top:0px;
	padding:4px 12px 4px 0px;
	background-color: var(--theme-bg-colour);
}
#navbarLinkMenu {
	margin: 0px;
	margin-left: 6px;
	padding: 0px;
	border-style: solid;
	border-color: var(--theme-colour);
	background-color: var(--theme-bg-highlight);
	border-width: 1px;
	text-align:left;
	position: absolute;
	left:0px;
	top:38px;
	display: none;
}
#navbarLinkMenu li {
	margin:0;
	padding: 0;
}
#navbarLinkMenu .navbarLinkHeader {
	display: block;
	padding: 0.5rem 0.5rem 0 0.5rem;
	color: var(--theme-fg-subtle);
	font-size: 1rem;
	font-weight: bold;
}
#navbarLinkMenu li ul {
	list-style-type: none;
	margin:0;
	margin-bottom: 0.5rem;
	padding:0;
}
#navbarLinkMenu li ul li {
	margin: 0;
	padding:0;
	text-indent: 0;
	font-weight: normal;
	color: var(--theme-fg-colour);
}
#navbarLinkMenu li ul li a {
	display: block;
	text-decoration: none;
	color: var(--theme-button-fg);
	padding: 0.5rem;
}
#navbarLinkMenu li ul li a:hover {
	display: block;
	text-decoration: none;
	background-color: var(--theme-button-hb);
	color: var(--theme-button-ho);

}

/***************\
|* font styles *|
\***************/
body {
	font-family: var(--theme-font-default);
	color: darkred; /* should not appear, so use color to find unstyled fonts */
	font-size: 1rem;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
}
h1, h2, h3, h4 {
	font-family: var(--theme-font-headline);
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	color: var(--theme-colour);
	margin: 0;
	margin-bottom: 0.5rem;
	padding: 0;
}
h1 {
	font-size: 2rem;
}
h2 {
	font-size: 1.5rem;
}
h3, h4 {
	font-size: 1.2rem;
}
h4 {
	font-weight: normal;
}
#container.memorialpage p {
	font-family: var(--theme-font-cursive);
	font-size: 1.2rem;
	text-align: left;
	color: var(--theme-fg-colour);
}
#container.memorialpage #memorialpictureframe p {
	text-align:center;
}
#container.rentalobject {
	font-family: var(--theme-font-default);
	font-size: 1.2rem;
	color: var(--theme-fg-colour);
}
#container.rentalobject h1,
#container.rentalobject h2,
#container.rentalobject p.explainer {
	text-align: left;
}
.subtext {
	font-family: var(--theme-font-narrow);
	font-size: 0.9rem;
	font-style: italic;
	margin-top:-0.8rem;
	margin-bottom: 0.5rem;
}
.firstp:first-letter {
	color: var(--theme-colour);
	font-size: 4rem;
	line-height: 4rem;
	padding: 0;
	margin:0;
	margin-right: 0.2rem;
	display:block;
	float:left;	
}
a:link,
a:visited,
a:hover {
	color: var(--theme-fg-hightlight);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
#container p a,
#container p a:visited {
	color: var(--theme-colour);
	text-decoration: underline;
}

#container p a:hover {
	color: var(--theme-fg-highlight);
	text-decoration: none;
}
#container .rentalobject p a:before {
	content: '▶';
}
.linklist {
	margin: 0 auto;
	padding: 0;
	width: 80%;
	list-style-type: none;
	list-style-position: outside;
	text-indent: 0;
}
.linklist address {
	font-style: normal;
}
q, cite {
	font-style: italic;
}
q::before {
	content: "«";
}
q::after {
	content: "»";
}
cite {
	font-size: 0.8rem;
}
cite::before {
	content: "[";
}
cite::after {
	content: "]";
}
#container.memorialpage p.spacer {
	text-align:center;
	margin: 0.2em 0em;
}
#container.memorialpage p.spacer::after {
	content: "∼◦○O○◦∼"; /* ∼◦○O○◦∼  */
}
.quote {
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}

#footer {
	font-family: var(--theme-font-narrow);
	font-size: 0.9rem;
	font-style: italic;
	color: var(--theme-fg-subtle);
}
#footer address {
	display: inline;
}

/********************************\
|* contact page linklist styles *|
\********************************/

.linklist li a,
.linklist li a:visited {
	display: inline-block;
	width: 100%;
	background-color: var(--theme-button-bg);
	border-color: var(--theme-button-bo);
	color: var(--theme-button-fg);
	border-style: solid;
	border-width: 1px;
	padding: 0.5rem;
	margin: 0;
	margin-bottom: 10px;
	border-radius: 10px;
	vertical-align: text-top;
	font-family: var(--theme-font-default);
	font-weight: normal;
	font-style: normal;
	font-size: 1rem;
	text-decoration: none;
}
.linklist li a:hover {
	background-color: var(--theme-button-hb);
	border-color: var(--theme-button-bo);
	color: var(--theme-button-ho); 
	cursor: pointer;
}

.linklist li .linktext {
	display: inline-block;
	text-align:left;
}
.linklist li .icon {
	padding-left:20px;
}
#contactpost,
#contactphone,
#contactmobile,
#contactemail,
#contactPGP,
#socialslinkedin,
#socialsinsta,
#socialsfacebook,
#socialsbluesky,
#othersratingen,
#otherskaiserswerth {
	background-position: top left;
	background-size: 16px;
	background-repeat: no-repeat;
}

#contactpost {
	background-image: url('../img/iconPostDark.svg');
}
.linklist li a:hover #contactpost {
	background-image: url('../img/iconPostWhite.svg');
}

#contactphone {
	background-image: url('../img/iconPhoneDark.svg');
}
.linklist li a:hover #contactphone {
	background-image: url('../img/iconPhoneWhite.svg');
}

#contactmobile {
	background-image: url('../img/iconMobileDark.svg');
}
.linklist li a:hover #contactmobile {
	background-image: url('../img/iconMobileWhite.svg');
}

#contactemail {
	background-image: url('../img/iconEmailDark.svg');
}
.linklist li a:hover #contactemail {
	background-image: url('../img/iconEmailWhite.svg');
}

#contactPGP {
	background-image: url('../img/iconPGPDark.svg');
}
.linklist li a:hover #contactPGP {
	background-image: url('../img/iconPGPWhite.svg');
}


#socialslinkedin {
	background-image: url('../img/iconLinkedInDark.svg');
}
.linklist li a:hover #socialslinkedin {
	background-image: url('../img/iconLinkedInWhite.svg');
}

#socialsinsta {
	background-image: url('../img/iconInstaDark.svg');
}
.linklist li a:hover #socialsinsta {
	background-image: url('../img/iconInstaWhite.svg');
}

#socialsfacebook {
	background-image: url('../img/iconFacebookDark.svg');
}
.linklist li a:hover #socialsfacebook {
	background-image: url('../img/iconFacebookWhite.svg');
}
#socialsbluesky {
	background-image: url('../img/iconBlueskyDark.svg');
}
.linklist li a:hover #socialsbluesky {
	background-image: url('../img/iconBlueskyWhite.svg');
}

#otherskaiserswerth,
#othersratingen {
	background-image: url('../img/iconPropertyDark.svg');
}
.linklist li a:hover #otherskaiserswerth,
.linklist li a:hover #othersratingen  {
	background-image: url('../img/iconPropertyWhite.svg');
}

/******************\
|* CV page styles *|
\******************/

.cv {
	font-size: 1.2rem;
}
.cv h1,
.cv h2,
.cv h3 {
	font-weight: normal;

}
.cv h1,
.cv h2,
.cv h3,
.cv h4 {
	text-align: left;
}
.cv p,
.cv li {
	text-align: justify;
}
.cv h3 {
	border-top: solid 1px var(--theme-colour);
	border-bottom: solid 1px var(--theme-colour);
	margin-bottom: 1rem;
}
.cv h4 {
	margin-bottom: 0.2rem;
}
.cv p {
	font-family: var(--theme-font-default);
	color: var(--theme-fg-colour);
}
.cv em {
	font-weight: bold;
	color: var(--theme-fg-highlight);
}
.cv .subtext {
	color: var(--theme-fg-subtle);
}
.cv .companyname {
	display:inline-block;
	float:left;
	text-align:left;
}
.cv .companydates {
	display:inline-block;
	float:right;
	text-align:right;
}
.cv ul {
	padding: 0;
	padding-left: 0.8rem;
	margin: 0 0 1rem 0;
}
.cv ul li {
	padding-left: 0.5rem;
	color: var(--theme-fg-colour);
}
.cv .col-4 ul li {
	color: var(--theme-fg-subtle);
}
.cv ul li {
	list-style-type: "»";
}
.cv ul li::marker {
	color: var(--theme-colour);
}
#cvletterhead {
	display: none; /* hide on small screens */
	text-align: right;
}
#cvletterheademail::before {
	content: '';
}
#cvletterhead p a,
#cvletterhead p a:link,
#cvletterhead p a:active,
#cvletterhead p a:hover,
#cvletterhead p a:visited {
	color: var(--theme-fg-subtle);
	text-decoration: none;
}
#cvletterhead img {
	display: inline-block;
}
#cvletterhead p {
		text-align: right;
		color: var(--theme-fg-subtle);
}
#cvletterhead h2 {
	text-align: right;
	font-weight: bold;
	margin-top: 0;
	padding-top: 0;
}
#cvpdfdownload  {
	display: block;
	position: absolute;
	right: 145px;
	top: 0px;
} 
#cvpdfdownload img {
	background-color: var(--theme-bg-colour);
}
.cv table {
	margin: 0;
	border: none;
}
.cv table td {
	vertical-align: top;
	color: var(--theme-fg-colour);
	text-align: left;
}
.cv table td:nth-child(1)::before {
	content: "» ";
	color: var(--theme-colour);
}
.cv table td:nth-child(1) {
		padding-left: 1.5rem;
		text-indent: -1.5rem;
		padding-right: 2rem;
}
body.cvpage #navbar {
	height:45px;
	background-color: var(--theme-bg-colour);
}

/****************\
|* Image styles *|
\****************/
#tklogo {
	display: inline-block;
	width:12rem;
	height:12rem;
	margin:0;
	padding:0;
	background-image: url('../img/tk_logo_128x128.svg');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-color: var(--theme-bg-colour);
}
#memorialphoto {
	width: 60%;
	height: auto;
}
#memorialposting {
	width: 100%;
	height: auto;
}
#memorialposting:hover,
#memorialphoto:hover {
	cursor: pointer;
}

/*******************\
|* seasonal themes *|
\*******************/

.pride #tklogo {
	background-image: url('../img/tk_logo_128x128_pride.svg');
}
.pride .linklist a:hover {
	background-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
	color: var(--theme-fg-colour);
}
.santa {
	background-image: url('../img/santa_256x256.png');
	background-size: 128px 128px;
	background-repeat: no-repeat;
	background-position: top right;
}

/*********************************\
|* adjust sizes to large screens *|
\*********************************/

@media only screen and ( min-width: 768px) {
	.linklist {
		width: 30rem;
	}
	#tklogo {
		width: 20rem;
		height:20rem;
	}
	h1 {
		margin: 0.5rem 0;
	}
	h2 {
		margin: 1rem 0 0.5em 0;
	}
	.quote {
		margin-left: 3rem;
		margin-right: 3rem;
	}
	.linklist li a {
		margin-bottom: 1rem;
	}
	.col-1 { width: 8.33%; }
	.col-2 { width: 16.66%; }
	.col-3 { width: 25%; }
	.col-4 { width: 33.33%; }
	.col-5 { width: 41.66%; }
	.col-6 { width: 50%; }
	.col-7 { width: 58.33%; }
	.col-8 { width: 66.66%; }
	.col-9 { width: 75%; }
	.col-10 { width: 83.33%; }
	.col-11 { width: 91.66%; }
	.col-12 { width: 100%; }
	[class*="col-"] > :first-child {
		margin-top: 0;
	}
	#container.memorialpage {
		width: 80%;
	}
	#container.rentalobject {
		margin-left: 2rem;
		margin-right: 2rem;
	}
	.santa {
		background-size: 256px 256px;
		background-position: top right;
	}
}

@media only screen and (min-width: 1024px) {
	body.cvpage {
		background-color: var(--theme-bg-subtle);
	}
	.col-1 { width: 8.33%; }
	.col-2 { width: 16.66%; }
	.col-3 { width: 25%; }
	.col-4 { width: 33.33%; }
	.col-5 { width: 41.66%; }
	.col-6 { width: 50%; }
	.col-7 { width: 58.33%; }
	.col-8 { width: 66.66%; }
	.col-9 { width: 75%; }
	.col-10 { width: 83.33%; }
	.col-11 { width: 91.66%; }
	.col-12 { width: 100%; }
	[class*="col-"] > :first-child {
		margin-top: 0;
	}
	#container.cv {
		width: 80%;
	}
	#container.cv .row {
		padding: 3rem 4rem 3rem 5rem;
		background-color: var(--theme-bg-colour);
		margin-bottom: 2rem;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	#cvletterhead {
		display: block;
	}
	body.cvpage #navbarLogo {
		display: none;
	}
	#cvpdfdownload  {
		display: block;
		position: absolute;
		/* width: 100%; */
		margin: 0;
		margin-left: 90%;
		padding-top: 2rem;
		top: 0px;
		left: -6px;
		text-align: left;
		/* background-color: red; */
	} 
	#cvpdfdownload img {
		width: 64px;
		height: 90px;
		padding: 0;
		margin: 0;
	}
	body.cvpage #navbar {
		background-color: transparent;
	}
}

/*****************************************\
|* dark mode depending on device setting *|
\*****************************************/

@media (prefers-color-scheme: dark) {

	:root {
		--theme-bg-colour: var(--dark-bg-colour) ;
		--theme-bg-highlight: var(--dark-bg-highlight);
		--theme-bg-subtle: var(--dark-bg-subtle);
		--theme-fg-colour: var(--dark-fg-colour);
		--theme-fg-subtle: var(--dark-fg-subtle);
		--theme-fg-highlight: var(--dark-fg-highlight);
		--theme-button-fg: var(--dark-button-fg);
		--theme-button-bg: var(--dark-button-bg);
		--theme-button-bo: var(--dark-button-bo);
		--theme-button-ho: var(--dark-button-ho);
	}
	#contactpost {
		background-image: url('../img/iconPostLight.svg');
	}
	#contactphone {
		background-image: url('../img/iconPhoneLight.svg');
	}
	#contactmobile {
		background-image: url('../img/iconMobileLight.svg');
	}
	#contactemail {
		background-image: url('../img/iconEmailLight.svg');
	}
	#contactPGP {
		background-image: url('../img/iconPGPLight.svg');
	}
	#socialslinkedin {
		background-image: url('../img/iconLinkedInLight.svg');
	}
	#socialsinsta {
		background-image: url('../img/iconInstaLight.svg');
	}
	#socialsfacebook {
		background-image: url('../img/iconFacebookLight.svg');
	}
	#socialsbluesky {
		background-image: url('../img/iconBlueskyLight.svg');
	}
	#otherskaiserswerth,
	#othersratingen {
		background-image: url('../img/iconPropertyLight.svg');
	}
}

/***************************\
|* reduce layout for print *|
\***************************/

@page wide {
	size: a4 portrait;
}
@page :right {
	margin: 15mm;
	margin-left: 25mm;
}
@page :left {
	margin:15mm;
	margin-right: 25mm;
}
@page {
	@bottom-left {
		content: "(C) 2024 by Thomas Klaemmt * Winzerstr. 3 * 7971 Waldshut-Tiengen * Germnay";
	}
	@bottom-right {
		content: counter(pageNumber);
	}
}
@media print {
	.container {
		margin-top: 0;
		text-align: left;
	}
	body {
		margin:0;
		text-align: left;
	}
	.linklist {
		margin: 0;
		padding:0;
		width: 100%;
		text-align: left;
		list-style-type: square;
		list-style-position: outside;
	}
	.linklist li {
		background-color: transparent;
		border-style: none;
		font-family: var(--theme-font-default);
		font-weight: normal;
		font-style: normal;
		font-size: 1rem;
		text-decoration: none;
		color: black;
	}
	#tklogo {
		width: 64px;
		height: 64px;
		position: absolute;
		top: 32px;
		right: 64px;
		/**************************\
		|* print background image *|
		\**************************/
		-webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
		color-adjust: exact !important;                 /* Firefox 48 – 96 */
		print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
	}
	#container.memorialpage,
	#container.memorialpage p,
	#container.memorialpage h1,
	#container.memorialpage h2 {
		font-family: var(--theme-font-cursive);
		font-size: 11pt;
		text-align: left;
		break-inside: avoid;
	}
	#container.memorialpage h1,
	#container.memorialpage h2 {
		font-size: 16pt;
		font-weight: bold;
		text-decoration: none;
		font-style: normal;
	}
	#container.memorialpage h2 {
		font-size: 14pt;
	}
	#memorialpictureframe {
		display: none;
	}
	h1 {
		margin-top: 0px;
	}
	h2 {
		text-align: left;
	}
	.memorialpage .row:first-of-type {
		break-after: page;
		margin: 50% 0 0 3cm;
	}
	.cv {
		font-size: 1rem;
	}
	#footer {
		position: absolute;
		bottom: 0;
		font-family: var(--theme-font-narrow);
		font-size: 10pt;
		font-style: normal;
		font-weight: normal;
		text-decoration: none;
	}
	#navbar {
		display: none;
	}
}