@charset "UTF-8";

img, object, embed, video {
  max-width: 100%;
  height: auto;
}
/* Layout für Mobilgeräte: 480 px oder weniger. */

body {
background: #f3f3f3 url("../grafik/kachel.png");
}

header, nav, main, article, footer {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
section {
width: 100%;
}
header, nav, main, footer {
  clear: both;
}
header {
}
header .custom {
  clear: both;
  margin: 1em auto;
  display: block;
  text-align: center;
}
nav {
}
.custom-vignette-links {
display: none;
}

.mod-menu {
clear: left;
}
.mod-menu li {
display: inline-block;
margin: 0 1em 0 0;
float: left;
}
.menu-rechts {
clear: right;
}
.menu-rechts li {
display: inline-block;
margin: 0 1em 0 0;
float: right;
}
.menu-rechts li:first-child {
margin: 0 0em 0 0;
}


.linie {
  border-bottom: 2px solid rgba(194,27,28,1); /* rgb(119,118,117); */
  margin: 0 auto;
  width: 98%;
  clear: both;
}

#oben {
float: left;
  clear: both;
}
main section {
  margin: 0 0 1em 0;
  float: left;
  clear: both;
}
#oben ul {
  margin: 0;
  padding: 0;
  float: left;
  display:block;
  clear:both;
}

/* Inhalte */

.item-page {
}

.item-page img {
margin: 0 0 1em 0;
}

.items-leading {
  clear: both;
margin: 1em 0% 0 0;
}
.items-leading > div {
width: 100%;
margin: 1em 10% 0 0;
float: none;
}
.blog-item {
position: relative;
width: calc(50% - 0.5em);
float: left;
margin: 0 1em 1em 0;
}
.item {
position: relative;
}
.blog-item:nth-child(2n) {
margin: 0 0 1em 0;
}


/* blog */
.blog .blog-item {
width: 100%;
margin: 0 1em 1em 0;
clear:both;
}

.blog .blog-item .item-image {
float: left;
width: calc(25% - 0.75em);
height: calc(25% - 0.75em);
margin: 0 1em 1em 0;
}
.article-info {
}
.item-image a img {
  aspect-ratio: 1/1 !important;
  height: inherit;
}

.pull-left {
float: left;
margin: 0 1em 1.5em 0;
}
.pull-right {
float: right;
margin: 0 0 1.5em 10%;
width: 100%;
}

iframe {
width: 100%
}

/* Contact */
input {
width: 100%;
}

textarea {
width: 100%;
}
.recaptcha_area {
margin: 0 0em 1em 0;
}

.recaptcha-table {
width: 100%;
margin: 0 0em 1em 0;
}
.jicons-text {
display: inline-block;
width: 4em;
}


/* tabellen */

td:nth-child(odd) {
width: 4em;
}

/* MODUL NEWSFLASH */

#unten {
  width: 100%;
    border-top: 2px solid rgba(194,27,28,1);
    padding: 2em 0;
    margin: 0 auto;
    clear: both;
  }
  #unten .custom {
    width: 100%;
       clear: both;
    }
    .newsflash {
clear: both;
margin: 0 0em 1em 0;
width: 100%;
}
.mod-articlesnews__item {
width: calc(50% - 0.5em);
float: left;
margin: 0 1em 1em 0;
}
.mod-articlesnews__item:nth-child(2n) {
margin: 0 0 1em 0;
clear: right;
}

.news-item figure {
width: 100%;
float: left;
margin: 0 5% 1em 0;
}

.custom-oben {
clear: both;
display: block;
width: 100%;
}

#footer {
  display: block;
  clear: both;
padding-bottom: 3em;
}

#footer ul {
  width: 100%;
  padding:0;
  float: none;
  clear: both;
}

.tooltip {
display: none !important;
}

/* Layout für Tablet-PCs: 641 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */

@media only screen and (min-width: 641px) {
header .custom img {
width: 50%;
clear: both;
}

/* portfolio */
.blog-item {
width: calc(25% - 0.75em);
float: left;
margin: 0 1em 1em 0;
}
.blog-item:nth-child(2n) {
margin: 0 1em 1em 0;
}
.blog-item:nth-child(4n) {
margin: 0 0 1em 0;
}

/* blog */
.blog-row {
margin: 0 1em 1em 0;
clear:both;
}

.blog-row .item-image {
float: left;
width: calc(25% - 0.75em);
margin: 0 1em 1em 0;
}
.article-info {
float: right;
}

/* Contact */
.kontakt-info {
}

.contact-form {
width: calc(70% - 2em);
float: left;
}

input {
width: 100%;
}

textarea {
width: 100%;
}
.recaptcha_area {
margin: 0 0em 1em 0;
}

.recaptcha-table {
width: 100%;
margin: 0 0em 1em 0;
}


/* MODUL NEWSFLASH */

.mod-articlesnews__item figure {
width: calc(40% - 0.5em);
float: left;
margin: 0 5% 1em 0;
}

}

/* Desktoplayout: 769 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */

@media only screen and (min-width: 980px) {

#rechts {
float: right;
width: 25%;
}

.Komponente {
width: 70%;
float:left;
}

#metanavigation {
  clear: none;
  float: left;
  margin-left: 10%;
  width: 25%;
  display: block;
}
.custom-vignette-links {
display: inline;
margin: -37px 0 0 0;
float: left;
position: relative;
left: -80px;
top: 20px;
clear: left;
}

}