@charset "UTF-8";
/* 
CSS Stylesheet by dialog im netz
display: flow-root;
für iframe,canvas, video, embed, audio, object: 
object-fit: [wie background-size] fill | contain | cover | none
object-position: [wie background-position] top | center | left | px | %
h2[id],
.anchor-target  { scroll-margin-top: 50px; }
*/

:root {
    --rot: #D41D3E;
    --alle: #3a7e4b;
    --braun: #614522;
    --white: #f6fff0;
}

@font-face {
    font-family: 'title';
    src: url('/fonts/binding.woff2') format('woff2'),
        url('/fonts/binding.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}



@font-face {
font-family: 'book';
src: url('/fonts/FiraSans-Book.woff2') format('woff2'),
url('fonts/FiraSans-Book.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'book';
src: url('/fonts/FiraSans-BookItalic.woff2') format('woff2'),
url('fonts/FiraSans-BookItalic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: fallback;
}

@font-face {
font-family: 'light';
src: url('/fonts/FiraSans-Light.woff2') format('woff2'),
url('fonts/FiraSans-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'light';
src: url('/fonts/FiraSans-LightItalic.woff2') format('woff2'),
url('fonts/FiraSans-LightItalic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: fallback;
}


.red {
color: var(--rot);
}
html {
font: 1em/140% light,helvetica,sans-serif;
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;
line-height: normal
}

*[id]{
  scroll-margin-top: 30px;
}

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

body {
overflow: auto;
min-height: 100vh;
color: var(--alle);
background: var(--white) url('/img/style/fond_1600.jpg') top center fixed;
background-size: cover; 
overflow-y: scroll
}
a {
color: black;
border:none;
outline: none;
}
a:hover,
a:focus {
outline: none;
}
a.anchor {
display: block;
position: relative;
top: -200px;
visibility: hidden;
}
p,li,h3,
#content p a {
margin: 0 0 1rem 0;
color: var(--braun);
line-height: 150%
}
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 {
padding-left: 16px
}
li {
}
b,strong {
 font-family: book, helvetica, sans-serif;
}
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;
}
.small {
 font-size: .8rem;
}
.clear {
clear: both
}
#mainheader {
 width: 100%;
 padding: 40px 0;

}

h1 {
font-family: title, 'times', serif;
color: var(--alle);
font-size: 3.2rem;
font-weight: normal;
line-height: 110%;
text-align: center;
width: 400px;
margin-bottom: 30px
}
#subtitle {
 font-size: 2.0rem;
}

h2 {
font-family: title, 'times', serif;
font-size: 2rem;
color: var(--braun);
font-weight: normal;
line-height: normal;
margin: 3rem 0 1rem;
color: var(--alle);
}
h2:first-of-type {
 margin-top: 0
}
.content .bildlinks,
.content .floatleft {
width: calc(50% - 30px);
max-width: 500px;
float: left;
margin: 0 30px 5px 0
}
.content .bildrechts,
.content .floatright {
max-width: calc(50% - 10px);

float: right;
margin: 0 0 5px 10px
}
.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 */ 
#head {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: stretch; 
align-content: stretch; 
}
#head div {
}
.head_line {
border-bottom: 1px solid var(--alle);
height: 199px;
flex-grow: 10;
min-width: 10px
}
#firstline {
 max-width: calc(50vw - 596px);
}
#headerblock {
height: 200px;
padding: 30px 0;
flex-grow: 0;
}
.headimg {
margin: 0 auto;
width: 100%;
max-width: 1600px;
position: relative;
}


#wrapper {
margin:0 auto;
padding: 0;
max-width:1200px;
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 */
}
#contentwrapper {    
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;  
/* flex-start flex-end center space-between space-around space-evenly */
align-items: stretch; 
padding: 40px 0 20px 0;
}

#left {
width: 50%;
display: none;
flex-flow: column nowrap;
justify-content: space-between;
padding: 0 20px 20px 20px;
margin:0;
}
#left img {
 width: 100%;
}
#allcontents {
 width: 100%;
}
#content{
padding: 20px 30px 50px;
width: 50%;
}

#content img {
width: 100%;
margin-bottom: .5em
}
#newslist {
    margin: 2em 0;
    padding: 10px;
    border: 1px solid #e0e0e0
}
#newslist tr td:first-of-type {

}
#newslist tr td:last-of-type {
text-align: right;
padding-left: 20px
}
#newslist a {
    display: block;
}
#chlang {
display: block;
padding: 0;
max-height: 40px;
margin-top: -40px;
background-color: transparent;
}
#lang {
display: block;
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 30px;
border: 0 none;
background: transparent url('/img/style/en.png') right center no-repeat; 
background-size: 60% auto;
cursor: pointer; 
}
footer {
width: 100%;
max-width: 1200px;
margin: 0 auto;
border-top: 1px solid var(--alle);
padding: 1em 20px;
} 
/* FORMULAR */
form {
position:relative;
padding: 30px  0;
margin: 0 0 2rem;
max-width: 710px;

}

label, input, textarea, select, button {
box-sizing: border-box;
margin:0 0 10px 0;
width: calc(100% - 160px);
display: block;
float:left;
}
label,
button {
 max-width: 150px;
}
form p {
 width: 100%
}
input, textarea,select {
border-width: 1px; 
padding: 2px 4px;
}
textarea {
 font-family:"Times New Roman",serif;
 min-height: 250px;
 font-size: .9rem;
 padding: 5px;
}
input:after,
textarea:after {
clear: both; 
content:' ';
height: 0; 
overflow: hidden; 
visibility: hidden
}
input[type="checkbox"] {
width: 20px; 
background-color: transparent
}

form > div {
clear: both;

}

input.short {
width: 80px;
}
input:hover,
textarea:hover,
select:hover {
background-color: #ffffff;
}


button {
color: white;
background-color: var(--alle);
font-size: 1.2rem;
padding: 4px 10px 5px;
border-radius: 8px;
font-family:"Times New Roman",serif;
}
button:hover,
button:focus {
}
button:active {
}

.meldung,
.meldungok,
#meldung,
#meldungok {
 display: block;
font-weight: bold;
font-size: 1.3rem;
text-align:left;
background-color: var(--alle);
color: white;
padding: 10px;
border-radius: 10px;
}


.searchword,
mark {
    background-color: yellow
}


/* SLIDESHOW */

.container {
margin: 0 auto;
background-color: #e0e0e0
}
.slidesjs-container {
 
}
/* Prevent the slideshow from flashing on load */
#slides {
display: none
}

/* Center the slideshow */

/* Show active item in the pagination */
.slidesjs-pagination {
    display: none;
}
.slidesjs-pagination .active {
color:red;
}
.slidesjs-previous,
.slidesjs-next{
    position: absolute;
    display: inline-block;
    padding: 5px 10px;
    color: var(--alle);
    bottom: 0px;
    left: 0;
    font-size: 30px;
    text-decoration: none;
    z-index: 111
}
.slidesjs-next {
    right: 0;
    left: auto;
}

.hide, .h0 {
display:none
}
.onlysmall {
 display: none;
}
.nosmall {
 display: inline
}

@media screen and (max-width: 750px){
#header,
#headerblock {
 height: auto;
 min-height: 1rem;
 margin: 0;
 padding:0
}
#head {
 display: block;
}
#headerblock {
 margin: 40px 20px 0;
}
h1 {
 width: 100%;
 text-align: center; 
}
#navline, 
.nosmall,
.head_line {
 display: none
}

}
@media screen and (max-width: 680px){
/* synchronisieren mit nav.css */
h1 {

}
#subtitle {

}
#wrapper {
    display: block;
}
#contentwrapper {
    display: block
}
#headimg {
 display: none;
}
h1 {
 margin-bottom: 10px
} 
#left {
display: block ;
width: 100%;
padding: 0 20px;
}
#content {
display: block;
position: relative;
width: 100%;
margin: 20px 0 50px; 
}
#right {
    padding: 0 50px
}
img.textillu {
 margin: 20px 0;
}
img.onlysmall {
 display: block;
}
#chlang {
 margin: 0 0 10px;
 min-height: 20px;
}
#lang {
 display:  inline;
 left: auto;
 top: auto;
 width: 80px;
height: 40px;
 
}
}
@media screen and (max-width: 460px){
 
#mainheader {
 padding: 54px 10px 30px 130px;
 background: transparent url('/img/style/wille-logo.png') 20px 60px no-repeat; 
 background-size: auto 70px ; 
 min-height: 130px;
}
h1{
font-size: 12vw;
}
#subtitle {
font-size: 8vw;
line-height: 180%
}
label, input, textarea {
width: 100%
}
}
@media screen and (max-width: 360px){
 
#mainheader {
 padding: 150px 20px 30px 30px;
 background: transparent url('/img/style/wille-logo.png') 30px 60px no-repeat; 
 background-size: auto 70px ; 
 min-height: 130px;
}
h1 {

}
#subtitle {

}
}
@media print {
a::after{
    content: " (" attr(href) ") ";
}
footer,
#nav{
	display: none
}
}