@font-face {
font-family: 'fira';
src: url('/fonts/FiraSans-Regular.woff2') format('woff2'),
     url('/fonts/FiraSans-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'fira';
src: url('/fonts/FiraSans-Italic.woff2') format('woff2'),
     url('/fonts/FiraSans-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'fira';
src: url('/fonts/FiraSans-SemiBold.woff2') format('woff2'),
     url('/fonts/FiraSans-SemiBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'fira';
src: url('/fonts/FiraSans-SemiBoldItalic.woff2') format('woff2'),
     url('/fonts/FiraSans-SemiBoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'firalight';
src: url('/fonts/FiraSans-Light.woff2') format('woff2');
font-weight: bold;
font-style: italic;
font-display: swap;
}

*[id]{
  scroll-margin-top: 30px;
}
html {
font-family: fira, serif;
font-size: 1em; 
scroll-behavior: smooth;
}
html,blockquote,body,div,dl,dt,dd,fieldset,form,
h1,h2,h3,h4,h5,h6,ol,p,ul,li,center,hr,pre,img,
table,tr,td,th,thead,tbody,tfoot,caption  {
margin:0;
padding:0;
border:0 none;
outline: none;
box-sizing: border-box;
}

body {
background-color: transparent;
margin: 0;
padding: 0;
font-family: fira, serif;
color: #625f78;
line-height: 140%
}
h1 {}
h2 {
 font-size: 1.5rem;
}
h3 {}
p {
 margin-bottom: .5rem;
}

div,
nav,
main,
section,
header,
article,
aside,
footer {
display: block;
position: relative;
box-sizing: border-box;
}

a {
color: black;
border:none;
outline: none;
}
a:hover,
a:focus {
outline: none;
}
a.anchor {
display: block;
position: relative;
top: -200px;
visibility: hidden;
}
h1{
margin: 1em  0 2em 0;
font-size: 1.6rem;

}
h1 span {
 display: block;
}
p + h2,
p + h3 {
 margin-top: 3rem;
}
p,ul,h2,h3 {
margin: 0 0 1em 0
}
p:empty {
display: none
}
p,li {
hyphens: auto;
}
table {
border-collapse: collapse
}
.tc {
text-align: center
}
.tr {
text-align: right
}
td {
vertical-align:top
}
ul,ol {
padding-left: 16px
}
li {
 margin-bottom: .75em
}
.hide, .h0 {
display:none
}
img{
display: block;
border: none;
height: auto;
}
iframe {
 width: 100%;
 height: 360px;
 margin: 0 0 2rem;
 border: 1px solid #e0e0e0
}
sub {
position: relative; 
font-size: .7rem; 
bottom: -4px;
font-weight: normal;
}
sup {
position: relative; 
font-size: .7rem;  
top: -2px;
font-weight: normal;
}
.clear {
clear: both
}

.quellen {
 margin: 3em 0 1em;
 font-size: .8em; 
 font-style: italic
}

#content .bildlinks,
#content .floatleft {
max-width: calc(50% - 10px);
float: left;
margin: 0 10px 5px 0
}
#content .bildrechts,
#content .floatright {
max-width: calc(50% - 10px);
float: right;
margin: 0 0 5px 10px
}

.bildmitbu {
	text-align: center;
	max-width: 400px;
	margin: 20px auto 30px;
	padding: 0 20px;
}

.bildmitbu img {
 display: block; 
 margin: 0 auto .5rem; 
}
.zweibilder {
 display: flow-root;
 margin-bottom: .5rem
}
.zweibilder div {
float:left;
margin-bottom: 0;
width: calc(50% - 5px)
}



.klein{
font-size: .8rem;
}
.rot,
.red {
color: red
}

div.showbigdiv {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white url('/img/style/blank.gif') center center no-repeat; 
background-size: contain; 
transition: .8s;
opacity: 0;
z-index: -1;
}
div.showbigdiv a {
    display: block; 
    width: 100%;
    height: 100%;
}
img.showbig{
    cursor: pointer;
}
::selection{
color: black;
background-color: #ffff00
}



/* DIVS */ 
#content {
margin:0 auto;
padding: 30px 30px 30px calc(50vw + 50px);
min-height: 100vh;
height:auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;  
/* flex-end center space-between space-around space-evenly */
align-items: stretch; 
/* flex-start flex-end center */

}

#content div {
}

.mainimg {
 position: fixed; 
 top:0;
 left: 0; 
 width: 50vw;
 height: auto; 
}


#intro { 
font-family: firalight, fira, sans-serif; 
background: linear-gradient(to bottom, #FCF8E2 0%, rgba(252, 248, 226,.8) 40%, rgba(255,255,255,0) 100%);
display: block;
position: fixed; 
top: 0;
left: 0; 
right: 0;
min-height: 400px;
max-width: 100%;
min-width: 100%;
padding: 50px 0 30vh;
text-align: center; 
}

#intro > * {
font-size: 24pt;
width: 100%;
padding: 0 10vw; 
position: absolute; 
text-align: center; 
line-height: 150%;
color: #FFA200; 
opacity: 0;
transition: opacity 1s ease;
white-space: normal;
hyphens: none;
}

#intro > *.show {
  opacity: 1;
}

video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Video füllt Fläche wie background-size: cover */
  z-index: -1;        /* hinter Inhalt */
}
footer {
 display: none
}