/*mobile Anpassungen*/
/*Höhen*/
@media only screen and (max-height: 750px) {
    #footer {position: relative;}
}
@media only screen and (max-height: 600px) {
}

/*Breiten*/
@media only screen and (max-width: 1580px) { 
    #start main {grid-template-columns: auto 55% 30% auto;column-gap: 50px;}
    main.einspaltig {grid-template-columns: auto 85% auto;}
    main.zweispaltig {grid-template-columns: auto 60% 300px auto;}  
}
@media only screen and (max-width: 1500px) { 
    #topnav ul {text-align: right;margin-right: 50px;}
    #topnav li.navi1:nth-child(2), #topnav li.navi1:nth-child(3), #topnav li.navi1:nth-child(4) {padding-right: 20px;}
    #header .header-bild {background-position-x: 30%;}
}
@media only screen and (max-width: 1250px) {
    h1 {font-size: 2.5em;}
    h2 {font-size: 1.8em;}
    h3 {font-size: 1.4em;}
    .filter-group button {width: 23%;}
    #start .galerieThumbnail.shuffle-item { width: calc(100% / 3 - 10px);}
    #start main {grid-template-columns: auto 55% 30% auto;column-gap: 40px;}
    main.einspaltig {grid-template-columns: auto 90% auto;}
    main.zweispaltig {grid-template-columns: auto 50% 300px auto;}
}
@media only screen and (max-width: 1110px) {
    #mainnav {margin-right: 10px;}
    #mainnav ul.rex-navi1 > li {margin-right: 2px;}
    main {margin-left: 10px;margin-right: 10px;}
    .galerieThumbnail.shuffle-item { width: calc(100% / 4 - 12px);}
    .openstreetmap {background-size: cover;}
    .yform form input, .yform form textarea, .yform form select, .yform form optgroup, .yform form textarea {width: 70%;}
    .yform form select {width: calc(70% + 16px)}
}
@media only screen and (max-width: 1000px) {
    #start main {grid-template-columns: auto 20% 70% auto;grid-template-rows: auto auto auto auto;row-gap: 10px;;column-gap: 0;}
    #start main #berufe {grid-column: 2/span 2;grid-row: 2;}
    #start main #slogan {grid-column: 3;grid-row: 1;}
    #start main #news {grid-column: 2/span 2;grid-row: 3;}
    #start main #termine{grid-column: 2/span 2;grid-row: 4;}    
    .filter-group button {width: 20%;}
    
    #start .galerieThumbnail.shuffle-item { width: calc(100% / 4 - 10px);}   
    #header, #header.header-fixed {height: 140px;transition: none;}
    #header .logo, #header.header-fixed .logo {height: 120px;width: 180px;padding: 20px 10px 0 10px;transition: none;}
    #header .logo:after, #header.header-fixed .logo::after {top: -43px;right: -184px;border-width: 228px 0 0 142px;transition: none;}
    #header .logo img {width: 180px;}
    #main:before, #main.header-fixed::before {top: 104px;left: 36px;border-width: 0 130px 202px 0;transition: none;} 
    #header #mainnav {margin-top: 9px;}
    #button {display: block;}
    #mainnav {display: none;}
    main {padding-top: 8em;}
    main #breadcrumb {display: block;}
    main .spalte1, main .spalte2 {float: none;width: 100% !important;padding-bottom: 2em;}    
    main.zweispaltig {grid-template-columns: auto 90% auto;grid-template-rows: 5% auto auto;}
    main.zweispaltig #breadcrumb {grid-column: 2;grid-row: 1;}
    main.zweispaltig #main-spalte-1 {grid-column: 2;grid-row: 2;}
    main.zweispaltig #main-spalte-2 {grid-column: 2;grid-row: 3;}
    .kontakt-liste .kontakt {width: 40%;}
    
}
@media only screen and (max-width: 890px) {
    .yform form label {width: 100%;margin: 5px 0 0 0;}
    .yform form input, .yform form textarea, .yform form select, .yform form optgroup, .yform form textarea {width: 97%;}
    .yform form select {width: calc(97% + 16px)}
    .yform form .checkbox input {margin-left: 0;}
    .yform form button {margin-left: 0;}
    .yform form .checkbox p {max-width: 85%;}
}
@media only screen and (max-width: 800px) {
    main .spalte1, main .spalte2 {float: none;width: 100% !important;} 
    .filter-group button {height: 40px;padding-top: 5px;width: auto;padding-left: 30px;}
    .filter-group button:hover, .filter-group button.an, .filter-group button.active {transform: scale(1.1) translate(0);}
    .filter-group button .button-pfeil {right: -20px;border-top: 20px solid transparent; border-bottom: 20px solid transparent;border-left: 20px solid #646567;}
    .filter-group button .label {font-size: 0.9em;}
    .galerieThumbnail.shuffle-item { width: calc(100% / 3 - 10px);}
    #start .galerieThumbnail.shuffle-item { width: calc(100% / 3 - 10px);} 
    #footer {grid-template-columns: auto 90% auto;height: auto;}
    #footer-inner {text-align: center;}
}
@media only screen and (max-width: 700px) {
    .kontakt-liste .kontakt {width: 60%;}
}
@media only screen and (max-width: 650px) {
    #header {position: relative;overflow: hidden;}
    #main:before {position: absolute;top: 71px;}
    #header .logo {min-width: 180px;padding: 40px 0 0 0;height: 80px;}
    #header .logo:before {position: absolute;content: '';top: 52px;left: -66px;z-index: -1;transition: all 0.5s ease;
        width: 0px;height: 0px;-webkit-transform:rotate(270deg);transform: rotate(270deg);border-style: solid;border-width: 0 207px 322px 0;border-color: transparent #ccc transparent transparent;}
    #header .logo::after {top: -64px;right: -185px;}
    .navis {position: absolute;right: 0;top: 0;background-color: #fff;width: 100%;}
    #topnav ul {margin-left: 0;}
    main {padding-top: 1em;}
}
@media only screen and (max-width: 630px) {
    .galerieThumbnail.shuffle-item { width: calc(100% / 2 - 10px);}
    #start .galerieThumbnail.shuffle-item { width: calc(100% / 2 - 10px);} 
    .contentbild-breite-300px {float: none;margin: 5px 2em 0.6em 0;}
    .contentbild-breite-300px figcaption {text-align: left !important;}
}
@media only screen and (max-width: 520px) {
    #topnav ul {margin-right: 56px;}
    #topnav li.navi1:nth-child(2), #topnav li.navi1:nth-child(3), #topnav li.navi1:nth-child(4) {padding-right: 20px;}
    #topnav li.navi1:first-child a::before, #topnav li.navi1:nth-child(2) a::before {display: none;}
    .contentbild-breite-200px {float: none;margin: 5px 2em 0.6em 0;}
    .contentbild-breite-200px figcaption {text-align: left !important;}
    .team-bildbox .absatz {min-width: auto;}
}
@media only screen and (max-width: 480px) {
    #footer {position: relative;}
    .kontakt-liste .kontakt {width: 90%;}
}
@media only screen and (max-width: 420px) {
    .floatLeft, .rechtsUmfliessen, .floatRight, .linksUmfliessen {clear: both;float: none;margin-left: 0;}
    .absatz table {width: 100% !important;}  
    .team-bildbox .bildBox {min-width: 100%;}
    .team-bildbox .bildBox .bild {margin: 0px 0 10px 0px;border-left: none;border-right: 10px solid #fff;float: none;clear: both;}
    .team-bildbox .bildBox .bild::before {left: 0;}
    .team-bildbox .bildBox .bild::after {left: unset;right: -1px;}
}
@media only screen and (max-width: 370px) {
  #topnav li.navi1:nth-child(2), #topnav li.navi1:nth-child(3), #topnav li.navi1:nth-child(4) {padding-right: 10px;}
  .kontakt-liste .kontakt {width: 100%;}
}
@media only screen and (max-width: 340px) {
  #topnav li.navi1:nth-child(3), #topnav li.navi1:nth-child(4) {display: none;visibility: hidden;}
}