/* Smartphone (default) */

* {
  margin: 0;
  padding: 0;
}

body {
  --bg-color-veranstaltungen: #FFFFFF; 
  --bg-color-gottesdienste: #D6D6F4; 
  --bg-color-angebote: #E0FFA0; 
  --bg-color-personen: #FFFF99; 
  --bg-color-fotos: wheat; 
  background-color: #FFFFFF;
/*  background-color: #FEF0D6; */
  font-family:Arial,Helvetica,Verdana,sans-serif;
}
h2{font-family:Arial,Helvetica,Verdana,sans-serif; font-size:12pt}
h4{font-family:Arial,Helvetica,Verdana,sans-serif; font-size:10pt;margin-top:0.5em}
p,ul,ol,li,th,td,blockquote{font-family:Arial,Helvetica,Verdana,sans-serif; font-size:10pt}
p{padding-top:0.5em}
ul{margin-left:6pt;padding-left:6pt}
.small{font-size:9pt}
.smallest{font-size:8pt}
.author{font-size:9pt; font-weight:bold}
.initial{font-size:150%}
.help{font-size:7pt; color:#009090}
.lasche{font-size:7pt; font-weight:bold; text-align:center; text-decoration:none; padding:0px 3px}
.menue{font-size:9pt; text-decoration:none}
.menuetitle{font-size:9pt; font-weight:bold; margin-top:10px; margin-bottom:0px; border-top:2px dotted silver; padding-top:10px; padding-bottom:3px}
.menuelist{font-size:9pt; margin-top:0px; margin-bottom:0px}
.menuestand{font-size:8pt; margin-top:10px; margin-bottom:0px; border-top:2px dotted silver; padding-top:10px; padding-bottom:3px}
a.bildlink{font-size:8pt; text-decoration:none}
a:hover{color:#FF8800}
a:active{color:#FF0000}
a.internlink{color:#888888; font-size:8pt; text-decoration:none}
a.internlink:hover{color:#DD0000}
a.internlink:active{color:#FF0000}
img {border:none}
button {padding: 2px}
div {
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
}

#title {
  width: 100%;
  height: 60px;
}

.logo {
  max-width: 50px;
  margin: 5px;
}

#navigation {
  display: none;
  width: 100%;
}

.navitem {
  display: inline-block;
  min-width:100px;
  text-align: center;
}
.navicon {
  display: inline-block;
  min-width: 100px;
  min-height: 80px;
  text-align: center;
}

#content {
  width: 100%;
}

#contentwide {
  width: 100%;
}

/* Hintergrundfarben */
.veranstaltungen {
  background-color: #FFFFFF;
}
.gottesdienste {
  background-color: #D6D6F4;
}
.angebote {
  background-color: #E0FFA0;
}
.personen {
  background-color: #FFFF99;
}
.fotoalbum {
  background-color: wheat;
  /*background-image: url(images/leinen.jpg);*/
}
.hinweis {
  background-color: #FFBBBB;
}

/* Darstellung mehrspaltiger Texte */
.columns {
  display: inline-block;
  width: 95%;
  margin: 0.5em;
  vertical-align: top;
} 

/* Überschrift mit dunkel hinterlegtem Hintergrund */
.sectionheader {
  width: 100%;
  background-color: rgba(0,0,0,0.1);
  padding: 2px;
  clear: both;
}

/* Darstellung von Personen */
.personitem {
  display: inline-block;
  min-width: 115px;
  text-align: center;
  vertical-align: top;
  padding: 0.5em;
}

/* Fotoalben */
.imgleft {
  width: 95%;
  margin: 0.5em;
  float: left;
  clear: both;
}
.imgright {
  width: 95%;
  margin: 0.5em;
  float: left;
}
.imgfull {
  display: block;
  width: 98%;
  margin: auto;
  clear: both;
}

#info {
  display: none;
  width: 100%;
}

#banner {
  display: none;
  width: 100%;
}

/* dark mode z.B. für Apple-Geräte */
@media (prefers-color-scheme: dark) {
  body {
    --bg-color-veranstaltungen: #000000; 
    --bg-color-gottesdienste: #1B1B65; 
    --bg-color-angebote: #446600; 
    --bg-color-personen: #806600; 
    --bg-color-fotos: #5A3F0C; 
    /*background-color:#634203;*/
    background-color:#333333;
    color: #FEF0D6;
  }
  a {color:#FE5800}
  a:visited {color:#CC4700}
  .veranstaltungen {
    background-color: #000000;
  }
  .gottesdienste {
    background-color: #1B1B65;
  }
  .angebote {
    background-color: #446600;
  }
  .personen {
    background-color: #806600;
  }
  .fotoalbum {
    background-color: #5A3F0C;
  }
  .hinweis {
    background-color: #660000;
  }
  .sectionheader {
    background-color: rgba(256,256,256,0.3);
  }
}

/* Tablet */
@media only screen and (min-width: 768px) {
  body {
    /*background-image:url(images/bg_navigation.jpg);*/
    background-repeat:repeat-y, repeat;
  }

  p,h2,h4 {padding-top:0.5em}

  .lasche{font-size:9pt; padding:1px 10px}
  .help{font-size:9pt}

  #title {
    height: 90px;
  }

  .logo {
    max-width: 75px;
    margin: 10px;
    margin-right: 20px;
  }

  #menuicon {
    display: none;
  }

  #navigation {
    display: block;
    float: left;
    clear: left;
    top: 0;
    left: 0;
    width: 90px;
    margin-right: 0.5em;
    text-align: center;
    font-size: 9pt;
    /*border-right:3px solid #FE5800;*/
  }

  #content {
    position: absolute;
    top: 90px;
    left: 110px;
    width: 82%;
  }

  #contentwide {
    position: absolute;
    top: 90px;
    left: 110px;
    width: 82%;
  }

  .columns {
    width: 45%;
  }
 
  .imgleft {
    width: 40%;
    margin: 0.5em;
  }
  .imgright {
    width: 40%;
    margin: 0.5em;
    float: right;
  }
  .txtleft {
    float: left;
    max-width: 16%;
  }
  .txtright {
    float: right;
    max-width: 16%;
    text-align: right;
  }
}

/* Computer */
@media only screen and (min-width: 992px) {
  a:hover{
    color: #FF8800;
  }
  #content {
    position: absolute;
    top: 90px;
    left: 320px;
    width: 67%;
    max-width: 870px;
  }

  #contentwide {
    max-width: 1070px;
  }

  #info {
    display: block;
    position: absolute;
    top: 90px;
    left: 110px;
    width: 200px;
  }

  #banner {
    display: block;
    position: absolute;
    top: 5px;
    right: 10px;
    width: 50%;
    height: 80px;
  }
}

/* Computer with large screen */
@media only screen and (min-width: 1200px) {
  #container {
    width: 1200px;
    /*margin: 0 auto;*/
  }

  #content {
    max-width: 1070px;
  }

  #contentwide {
    max-width: 1270px;
  }

}