/************************  common area *****************************/
:root 
{
	--pri-bg-color:#fefaef;
	--pri-bgheader-color:#5a1502;
	--pri-bgfooter-color:#5a1502;
	--thumb-frame-color:#5a1502;
	--image-frame-color:#fefaef;
	--image-bg-color:#14183e;
	--attention-color:#8c0000;
	--pri-txheader-color:#fefaef;
	--pri-tx-color:#051b64;
	--pri-lk-color:#051b64;
	--pri-bbottom:1px solid #5a1502;
	--pri-font-f:Constantia;
	--font-size-small:80%;
	--font-size-medium:85%;
	--font-size-normal:105%;
	--font-size-gross:115%;
	--font-size-sehr-gross:125%;
	--font-size-title:150%;
}

html
{
	padding:0;
	margin:0;
	scroll-behavior:smooth;
	interpolate-size:allow-keywords;
}

body
{
    font-size:var(--font-size-normal);
	font-family:var(--pri-font-f);
	background-color:var(--pri-bg-color);
	color:var(--image-frame-color);
	background-image:url(images/common/background.jpg);
	background-attachment:fixed;
	background-position:center 100px;
	padding:0px;
	margin:0px;
	margin-bottom:50px;
	margin-top:-20px;
	overflow-y:scroll;
	overflow-x:hidden;
    opacity:0;
    animation:fadeIn 1s forwards;
}

/*****************  inhalt ***********************/
#content
{
	width:100%;
	margin:0;
	padding:0;
	padding-top:100px;
	padding-bottom:50px;
	padding-left:2%;
    font-size:var(--font-size-normal);
	font-family:var(--pri-font-f);
	color:var(--pri-tx-color);
	overflow-y:auto;
}
/*****************  links ***********************/
#content a:link
{
	color:var(--pri-tx-color);
}
#content a:visited
{
	color:var(--pri-tx-color);
}
#content a:hover
{
}

#content img
{
	border-radius:2px;
}
#header
{
    background-image:url(images/common/headerklein.jpg);
	height:100px;
	width:100%;
	background-color:var(--pri-bgheader-color);
	font-size:var(--font-size-normal);
	font-family:var(--pri-font-f);
	margin:0px;
	padding:0px;
	top:0px;
	background-repeat:no-repeat;
	background-position:top right;
	position:fixed;
}

#header li
{
    background-color:var(--pri-bgheader-color);
	height:20px;
	font-size:var(--font-size-medium);
	padding-left:2%;
	list-style-type:none; 
	text-decoration:none; 
}

#header li a
{
	text-decoration:none; 
}

#header a:visited 
{
}

#header a:hover
{
		color:var(--pri-txheader-color);
		text-decoration:underline;
}

#header a:hoverdummy 
{
    background-color:var(--pri-bg-color);
	color:var(--pri-txheader-color);
}


#header a
{
    margin:0px;
    padding:0px;
	padding-left:10px;	
	padding-right:10px;	
	color:var(--pri-txheader-color);
	font-family:var(--pri-font-f);
}

#header h1
{
    font-size:var(--font-size-title);
    font-weight:normal;
    border-bottom:none;
    color:var(--pri-txheader-color);
    font-family:var(--pri-font-f);
    font-variant:small-caps;
	margin:0px;
    margin-left:2%;
	margin-top:0;
	padding:0;
}

#header h2
{
    color:var(--pri-txheader-color);
    font-size:var(--font-size-gross);
    font-weight:normal;
    font-family:var(--pri-font-f);
    font-variant:small-caps;
	margin:0px;
	margin-left:2%;
	margin-top:0;
	margin-bottom:20px;
	padding:0;
}

#a, #b, #c, #d, #e, #f, #g, #h, #i, #j, #k, #l, #m, #n, #o, #p, #q, #r, #s, #t, #u, #v, #w, #x, #y, #z
{	scroll-margin-top:110px;}

/******************************* Headlines ********************************/
#content h1 
{
		height:2%;
        text-align:left;
        color:var(--pri-bgheader-color);
        font-size:var(--font-size-sehr-gross);
        font-weight:bold;
        font-variant:small-caps;
        border-bottom:var(--pri-bbottom);
        font-family:var(--pri-font-f);
        letter-spacing:1px;
}

#content h2 
{
       	text-align:left;
       	color:var(--pri-bgheader-color);
       	font-size:var(--font-size-gross);
       	font-weight:bold;
       	font-variant:small-caps;
       	border-bottom:var(--pri-bbottom);
       	font-family:var(--pri-font-f);
       	letter-spacing:1px;
}

#content h3
{
       	text-align:left;
       	color:var(--pri-tx-color);
       	font-size:var(--font-size-medium);
       	font-weight:bold;
       	font-variant:small-caps;
		font-style:italic;
       	font-family:var(--pri-font-f);
       	letter-spacing:1px;
		margin-top:8px;
}

#footer
{
   	position:fixed;
   	left:0px;
   	bottom:0px;
   	padding-top:0px;
   	color:var(--pri-txheader-color);
   	text-align:center;
   	height:30px;
   	width:100%;
   	background-color:var(--pri-bgfooter-color);
    border-top:1px solid #5a1502;
	font-family:var(--pri-font-f);
	font-size:var(--font-size-medium);
}
#footer a:link
{
	color:var(--pri-txheader-color);
	text-decoration:none;
}
#footer a:visited
{
	color:var(--pri-txheader-color);
}

#footer a:hover
{
	color:var(--pri-txheader-color);
	text-decoration:underline;
	transition:.5s;
}
#footer a:active
{
	color:#281a50;
}

#hide
{
	visibility:hidden;
	font-size:1%;
} 

::scroll-marker:target-before
{
	content:"";
	display:block;
	height:80px; /* fixed header height*/
	margin:-80px 0 0; /* negative fixed header height */
}
/******* images **********/
.thumb
{
	border:solid 1px;
	border-color:var(--thumb-frame-color);
	width:120px;
	height:82px;
	padding:5px;
	margin:5px;
	table-layout:fixed;
}
.attention
{
	text-align:left;
	text-decoration:none;
	color:var(--attention-color);
	font-size:var(--font-size-medium);
	font-weight:bold;
	font-variant:small-caps;
	font-style:italic;
	font-family:var(--pri-font-f);
	letter-spacing:1px;
	margin-top:8px;
}

.linklist
{
	text-align:left;
	text-decoration:none;
	color:var(--pri-tx-color);
	font-size:var(--font-size-medium);
	font-weight:bold;
	font-variant:small-caps;
	font-style:italic;
	font-family:var(--pri-font-f);
	letter-spacing:1px;
}

a.linklist:hover
{
	text-decoration:underline; 
	color:var(--pri-tx-color);
}

a.linklist:active
{
	text-decoration:underline; 
	color:var(--pri-tx-color);
}

a.linklist:visited
{
	text-decoration:underline; 
	color:var(--pri-tx-color);
}

.linklistsmall
{
	text-align:left;
	text-decoration:none;
	color:var(--pri-tx-color);
	font-size:var(--font-size-small);
	font-weight:bold;
	font-variant:small-caps;
	font-style:italic;
	font-family:var(--pri-font-f);
	letter-spacing:1px;
	margin-top:10px;
}

a.linklistsmall:hover
{
	text-decoration:underline; 
	color:var(--pri-tx-color);
}

a.linklistsmall:active
{
	text-decoration:underline; 
	color:var(--pri-tx-color);
}

a.linklistsmall:visited
{
	text-decoration:underline; 
	color:var(--pri-tx-color);
}

.table-header
{
       	text-align:left;
       	color:var(--pri-bgheader-color);
       	font-size:var(--font-size-medium);
       	font-weight:bold;
       	font-variant:small-caps;
       	border-bottom:var(--pri-bbottom);
       	font-family:var(--pri-font-f);
       	letter-spacing:1px;
}

.table-bottom
{
       	text-align:left;
       	color:var(--pri-bgheader-color);
       	border-bottom:var(--pri-bbottom);
}

.basic
{
	position:relative;
}


.history
{
	position:absolute;
	z-index:1;
}
/******************** bio info *******************************/
.trf
{
	/*height:20px;*/
}

.trk
{
	height:10px;
}

.trw
{
	height:6px;
}
.bio
{
	text-decoration:none; 
}

a.bio 
{ 
	border:none;
	text-decoration:none; 
}
a.bio:hover 
{ 
	cursor:help; 
	background:var(--pri-bg-color);
}
a.bio span 
{ 
	visibility:hidden; 
	position:absolute; 
	left:-99em;
	margin-top:2em;
	padding:1em;
	text-decoration:none; 
}
a.bio:hover span, a.bio:focus span, a.bio:active span 
{
    visibility:visible; 
	left:1em;
    border:1px solid #5a1502; 
	color:#000000; 
	font-style:italic;
	background:var(--pri-bg-color);
	font-size:90%;
}
/************* kalendarium *******************************/
.mon
{
	font-variant:small-caps;
    font-family:var(--pri-font-f);
	font-weight:bold;
	font-size:var(--font-size-gross);
	color:var(--pri-bgheader-color);
	border-bottom:1px solid;
}
.gen
{
	text-align:left;
	color:var(--pri-tx-color);
	font-size:var(--font-size-medium);
	font-weight:bold;
	font-variant:small-caps;
	font-style:italic;
	font-family:var(--pri-font-f);
	letter-spacing:1px;
}
/************* literatur *******************************/
.book
{
	text-align:left;
    color:var(--pri-bgheader-color);
    font-size:var(--font-size-small);
    font-variant:small-caps;
    font-family:var(--pri-font-f);
}

.church_book
{
	text-align:left;
    color:#262696;
    font-size:var(--font-size-normal);
    font-variant:small-caps;
    font-family:var(--pri-font-f);
	font-style:Italic;
}

.source
{
	text-align:left;
   	font-size:var(--font-size-medium);
   	font-variant:small-caps;
   	font-family:var(--pri-font-f);
}

.book_small
{
	text-align:left;
    color:var(--pri-bgheader-color);
    font-size:var(--font-size-small);
    font-variant:small-caps;
    font-family:var(--pri-font-f);
}
/********************************************/
.stats_head
{
    text-align:left;
    font-size:var(--font-size-normal);
    font-weight:bold;
    font-variant:small-caps;
    font-family:var(--pri-font-f);
    letter-spacing:1px;
}

.stats_line
{
	border-bottom:1px solid #aaaaaa;
	text-align:left;
	font-size:var(--font-size-medium);
	font-variant:small-caps;
	font-family:var(--pri-font-f);
}

.zentriert 
{
	width:50%; /* Oder eine feste Breite in px */
	margin:0 auto; /* Oben/Unten 0, Links/Rechts automatisch */
}
/****** loader ********/
.loader 
{
	display:flex;
	color:#281a50;
	width:fit-content;
	font-weight:bold;
	font-family:var(--pri-font-f);
	font-size:20px;
	padding-bottom:8px;
	background:linear-gradient(#281a50 0 0) 0 100%/0% 3px no-repeat;
	animation:loader 2s linear infinite;
	position:absolute;
	top:50%;
	left:45%;
}
.loader:before 
{
  content:"Loading..."
}

details[open] 
{
  animation:animateDown 0.5s linear forwards;
}

summary 
{
    cursor:pointer;
}

details summary::marker 
{
	text-decoration:none;
	color:var(--pri-tx-color);
	font-size:var(--font-size-medium);
	font-weight:bold;
	font-variant:small-caps;
	font-style:italic;
	font-family:var(--pri-font-f);
	letter-spacing:1px;
	content:"Details \2193";
}

details[open] summary::marker 
{
	content: "Details \2191";
}

@keyframes animateDown 
{
  0% {
    opacity:0;
    transform:translatey(-10px);
  }
  100% {
    opacity:1;
    transform:translatey(0);
  }
}

@keyframes loader {to{background-size:100% 3px}}

@keyframes fadeIn {to {opacity:1;}}

/************************  ENDE *****************************/