@charset "UTF-8";
/* CSS Document Bilder*/

/* === Bild am Anfang der Seite, Leistungen und Team === */
.bildKopf {
    display:block;
    width:98%;
    margin: 40px auto;
    margin-bottom:1px;}

/* === Logo Innung Team, Anzeige Aktuell === */
.bildKlein,
.bildHochA{
    display:block;
    background-color: rgba(220,240,255,1);}

.bildKlein,
.bildHochA {
    margin:40px auto;}

/* === Bildschirmanpassungen Bild am Seitenkopf === */

@media (max-width:599px){
    .bildHochA{
        width:80%;}
    .bildKlein {
        width:40%;}
}

@media (min-width:600px){
    .bildKopf {
        width:95%;}
    .bildHochA{
        margin:20px auto;}
    .bildKlein {
        width:30%;}
}

@media (min-width:768px){
    .bildKlein {
        width:80%;}
}

@media (min-width:1024px){
    .bildKopf {
        width:90%;}
    .bildHochA{
        width:600px;
        padding:20px 0;}
}

@media (min-width:1500px){
    .bildKopf {
        margin-bottom:5px;}
}

@media (min-width:1850px){
    .bildKopf {
        width:1200px;}
}

/* === Allgemein Blaue Rasterfelder === */
/* === Blauefelder Farbe, Rahmen, Abstand === */
.hintergrundRahmenL,
.hintergrundRahmenR,
.hintergrundRahmenLA,
.hintergrundRahmenRA,
.hintergrundRahmenLH,
.hintergrundRahmenRH{
    background-color:rgba(220,240,255,1);
    border-bottom:20px rgba(255,255,255,1) solid;
    border-right:10px rgba(255,255,255,1) solid;}

/* Home */
div.hintergrundRahmenLH img,
div.hintergrundRahmenRH img{
    width:100%;}
div.hintergrundRahmenLH,
div.hintergrundRahmenRH{
    padding:20px 0px;}

/* Oberer Außenabstand der Button-Texte */
h3.abstandObenBlaueButtonH{
    margin-top:0px;}

/* === Aktuelles, Einlagen, Weiter Leistungen === */
section.rasterBlau {
    margin-top:0px;}

/* Oberer Außenabstand der Texte in den Blauenfeldern */
h3.abstandObenTextBlauefelder {
    margin-top:0px;}

/* Bilder in Blauenfeldern */
.hintergrundBilder figure img,
.hintergrundBilderA figure img{
    width:100%;}
.hintergrundBilder,
.hintergrundBilderA {
    padding:10px 0px;}

/* Weiter Leistungen */
.hintergrundBlau h5 {
    padding:10px;}

/* === Bildschirmanpassungen === */
@media (max-width:599px){
    /* === Allgemein Blauefelder === */
    .hintergrundRahmenL,
    .hintergrundRahmenR,
    .hintergrundRahmenLA,
    .hintergrundRahmenRA,
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
        border-bottom:10px rgba(255,255,255,1) solid;}
    .hintergrundRahmenR,
    .hintergrundRahmenRA,
    .hintergrundRahmenRH{
        border-left:0px rgba(255,255,255,1) solid;}

    /* Home */
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
        height:120px;}

    /* === Aktuelles, Einlagen, Weiter Leistungen === */
    /* Innenabstand für die Textfelder */
    .hintergrundRahmenL,
    .hintergrundRahmenR,
    .hintergrundRahmenLA,
    .hintergrundRahmenRA {
        padding:10px;}
    div.hintergrundBilder figure img,
    div.hintergrundBilderA figure img{
        padding-left:0px;}
}

@media (min-width:400px){
    /* Home */
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
      height:160px;}
}

@media (min-width:600px){
    /* Allgemein Blauefelder */
    .hintergrundRahmenR,
    .hintergrundRahmenRA,
    .hintergrundRahmenRH{
        border-left:0px rgba(255,255,255,1) solid;}

    /* Home */
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
        height:195px;}

    /* Blauenfelder Aktuell, Leistungen */
    section.rasterBlau {
        margin-top:10px;}
    .hintergrundRahmenL,
    .hintergrundRahmenR,
    .hintergrundRahmenLA,
    .hintergrundRahmenRA {
        padding:20px;}
    .hintergrundRahmenLA,
    .hintergrundRahmenRA {
        height:auto;}
    .hintergrundRahmenL h3,
    .hintergrundRahmenR h3{
        margin-top:0px;}
    
    /* Oberer Außenabstand der Texte in den Blauenfeldern */
    h3.abstandObenTextBlauefelder {
            margin-top:0px;}
    
    /* Bilder in Blauenfeldern */
    .hintergrundBilder {
        padding:10px 0px;}
    .hintergrundBilderA {
        padding:20px 0px;}
    
    /* Weiter Leistungen */
    .hintergrundBlau h5 {
        padding:10px;}
    
    /* Blaues Textfeld mit viel Text braucht extra Höhe */
    .vielText {
        height:340px;}
}

@media (min-width:768px){
    /* Home */
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
        height:210px;}
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
        padding:40px 0px;}

    /* Aktuelles, Einlagen, Weiter Leistungen */
    .hintergrundBlau h5 {
        padding:0px;}
    section.rasterBlau {
        margin-top:0px;}
    .hintergrundRahmenL,
    .hintergrundRahmenR,
    .hintergrundRahmenLA,
    .hintergrundRahmenRA {
        padding:20px;}
    .hintergrundRahmenLA,
    .hintergrundRahmenRA {
        height:254px;}
    .hintergrundRahmenL,
    .hintergrundRahmenR {
        height:350px;}
    .hintergrundRahmenR,
    .hintergrundRahmenRA,
    .hintergrundRahmenRH{
        border-left:10px rgba(255,255,255,1) solid;}
    
    .hintergrundBilder,
    .hintergrundBilderA {
        padding:20px 0px;}

    .vielText {
        height:520px;}
    div.vielText figure {
        padding-top:60px;}
}

@media (min-width:1024px){
    /* Home */
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
        height:270px;}
        
    /* Aktuelles, Einlagen, Weiter Leistungen */
    .hintergrundRahmenLA,
    .hintergrundRahmenRA {
        height:282px;}
    .hintergrundRahmenL,
    .hintergrundRahmenR {
        height:380px;}
    .hintergrundRahmenL,
    .hintergrundRahmenR {
        padding:10px 20px;}
    .hintergrundRahmenL h3,
    .hintergrundRahmenR h3{
        margin-top:20px;}
    
    /* Oberer Außenabstand der Texte in den Blauenfeldern */
    h3.abstandObenTextBlauefelder {
        margin-top:0px;}
    
    .hintergrundBilder {
        padding:40px 0px;}
    
    .vielText {
        height:540px;}
    div.vielText figure {
        padding-top:50px;}
}

@media (min-width: 1280px) {
    /* Home */
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
        height:320px;}

    /* === Aktuelles, Einlagen, Weiter Leistungen === */
    .hintergrundRahmenLA,
    .hintergrundRahmenRA {
        height:340px;}
    .hintergrundRahmenL,
    .hintergrundRahmenR {
        height:380px;}
    
    /* Oberer Außenabstand der Texte in den Blauenfeldern */
    h3.abstandObenTextBlauefelder {
        margin-top:20px;}
    
    .vielText {
        height:540px;}
    .vielText h3 {
        padding-top:0px;}
    div.vielText figure {
        padding-top:30px;}
}

@media (min-width:1500px){
    /* Home */
    section.bilderGalerieH div.container {
        padding-left:100px;
        padding-right:100px;}
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
        height:340px;}

    /* === Aktuelles, Einlagen, Weiter Leistungen === */
    .hintergrundRahmenLA,
    .hintergrundRahmenRA {
        height:430px;
        padding:10px 20px;}
    .hintergrundRahmenL,
    .hintergrundRahmenR {
        height:504px;}
    
    .hintergrundBilderA {
        padding:0px;}

    .vielText {
        height:580px;}
    .vielText h3 {
        margin-top:0px;}
}

@media (min-width:1920px){
    /* Home */
    section.bilderGalerieH div.container {
        padding-left:100px;
        padding-right:100px;}
    .hintergrundRahmenLH,
    .hintergrundRahmenRH{
        height:340px;}

    /* Aktuelles, Einlagen, Weiter Leistungen */
    .hintergrundRahmenLA,
    .hintergrundRahmenRA {
        height:406px;}
    .hintergrundRahmenL,
    .hintergrundRahmenR {
        height:500px;}
    .hintergrundRahmenL h3,
    .hintergrundRahmenR h3{
        padding-top:30px;}
    
    /* Oberer Außenabstand der Texte in den Blauenfeldern */
    h3.abstandObenTextBlauefelder {
        margin-top:0px;}
    
    .vielText {
        height:580px;}
}


/* === Leistungen - Bildergalerie === */
/* =  kleine Bilder als Auswahl in einem Raster mit Link zur Bilderseite = */
.bildGalerie{
    display:block;
    background-color: rgba(220,240,255,1);
    margin:40px auto;}

/* === Bildschirmanpassungen === */
@media (max-width:599px){
    .bildGalerie{
      width:90%;}
    .rahmenBildGalerie {
      margin:10px auto;}

    /* Einlagen */
    .hoeheH,
    #bilderGalerieE div:nth-child(4){
        height:140px;}
    #bilderGalerieE div:nth-child(4){
        padding-top:40px;}
    .hoeheH img.bildGalerie {
        width:65%;}
}

@media (min-width:400px){
    /* Einlagen */
    .hoeheH img.bildGalerie {
         width:60%;}
    .hoeheH,
    #bilderGalerieE div:nth-child(4){
        height:220px;}
    #bilderGalerieE div:nth-child(5),
    #bilderGalerieE div:nth-child(6){
        height:130px;}

    /* Schuhe */
    #bilderGalerieS1 figure.rahmenBildGalerie {
        height: 100px;}
}

@media (min-width:600px){
    .bildGalerie{
        width:90%}
    .rahmenBildGalerie {
        margin:20px auto;}

    /* Einlagen */
    .hoeheH,
    #bilderGalerieE div:nth-child(4){
        height:270px;}
    #bilderGalerieE div:nth-child(4){
        padding-top:40px;}
    #bilderGalerieE div:nth-child(5),
    #bilderGalerieE div:nth-child(6){
        height:auto;}

    /* Schuhe */
    #bilderGalerieS1 figure.rahmenBildGalerie {
        height: 120px;}
}

@media (min-width:768px){
    .bildGalerie{
        width:80%;}

    /* Einlagen */
    .hoeheH,
    #bilderGalerieE div:nth-child(4){
        height:320px;}
    .hoeheH img.bildGalerie {
        width:60%;}

    /* Schuhe */
    #bilderGalerieS1 figure.rahmenBildGalerie {
        height: auto;}
}

@media (min-width:1024px){
    /* Einlagen */
    #bilderGalerieE div:nth-child(4){
        height:auto;
        padding-top:0px;}
    .hoeheH {
        height:280px;}
}

@media (min-width: 1280px) {
    .bildGalerie {
        width:88%}
    .rahmenBildGalerie {
        margin:50px auto;}
    #bilderGalerieS1 div:nth-child(4) figure.rahmenBildGalerie,
    #bilderGalerieS1 div:nth-child(5) figure.rahmenBildGalerie,
    #bilderGalerieS1 div:nth-child(6) figure.rahmenBildGalerie,
    #bilderGalerieS2 div:nth-child(4) figure.rahmenBildGalerie,
    #bilderGalerieS2 div:nth-child(5) figure.rahmenBildGalerie,
    #bilderGalerieS2 div:nth-child(6) figure.rahmenBildGalerie{
        margin-top:0;}
    .hoeheH {
        height:auto;}
}

@media (min-width:1500px){
    .bildGalerie {
        width:85%;}
    
    .hoeheH img.bildGalerie {
        width:60%;}
    .hoeheH {
        height:100%;}
}


@media (min-width:1920px){
    .bildGalerie {
        width:390px;}
    .hoeheH img.bildGalerie {
        width:275px;}
     .rahmenBildGalerie {
         margin:50px auto;}
     #bilderGalerieS1 div:nth-child(4) figure.rahmenBildGalerie,
     #bilderGalerieS1 div:nth-child(5) figure.rahmenBildGalerie,
     #bilderGalerieS1 div:nth-child(6) figure.rahmenBildGalerie,
     #bilderGalerieS2 div:nth-child(4) figure.rahmenBildGalerie,
     #bilderGalerieS2 div:nth-child(5) figure.rahmenBildGalerie,
     #bilderGalerieS2 div:nth-child(6) figure.rahmenBildGalerie{
         margin-top:0;}
}