/* responsives Layout mit Grid Layout */

/* ========================  GLOBAL DEFINITION   ============================ */

/* alternatives Boxmodell */

html { /*JH Format des Seitenrandes, i.e. der Browserfensterbereich ausserhalb der eigentlichen Seite, der erst sichtbar wird, wenn die Seite über max-width aufgezogen wird*/
    box-sizing: border-box; 
    background: #d5d5d5;    
} 

*,
::before,
::after { 
    box-sizing: inherit; 
}

body {   /*JH Seitenformatierungen */
    max-width: 75em;
    margin:0 auto;
    padding: 0em;
    background: #fff;    
    color: #333; 
    font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */                   
}

h1 {
    font-size: 1.8em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.25em;
}

sub {
    line-height: 0em;
    font-size: 0.7em;
}

sup {
    line-height: 0em;
    font-size: 0.7em;
}


/* ============================   HEADER   ================================== */

header {
    position: relative;        
    height: 210px;
    margin: 2em  0  0 2.5em;
    background: #aaa url("../img/satNsunNearth_ws.jpg") no-repeat right; 
    background-size: contain;              
    padding: 0 0 0.5em;
}

header a h1,
header a p {            /*Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
    color: white; 
    border-left: 0;
    padding: 0;
    display: table;    /* Überschriften und Absätze sind sonst immer 100% breit, durch display:table und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig. */    
}

header a h1 {
    margin: 0.4em 0 0.4em 0;
}

header a p {
    margin: 0.5em 0 0.5em 0;
}

.ribbon {                       /*JH Style der Titel Box, als Klasse definiert, das Element im html File, z.B. ein Anchor muss dann entsprechend ' class="ribbon" ' enthalten */
    display: inline-block; /*JH Bei Block-Elementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben. */
    position: relative;    
    margin: 2em 1em 2em -1.5em;    /*JH das ist die sogenannte shorthand Angabe:  Eine Angabe: für alle 4 Abstände gilt derselbe Wert
    Zwei Angaben: 1. Wert für padding-top und padding-bottom, 2. Wert für padding-left und padding-right
    Drei Angaben: 1. Wert für padding-top, 2. Wert für padding-left und padding-right, 3. Wert für padding-bottom
    Vier Angaben: 1. Wert für padding-top, 2. Wert für padding-right, 3. Wert für padding-bottom, 4. Wert für padding-left (Merkhilfe: Uhrzeigerbewegung), man kann natürlich auch immer explizit alles ausschreiben, i.e. margin-left: ...; margin-top: .... etc, mache ich vielleicht auch wg. Lesbarkeit...*/
    padding: 0.5em 1em; 
    background: #3759a6;
    box-shadow: 5px 5px 4px 8px rgba(0,0,0,0.6); /*JH box-shadow: offset-x | offset-y | [blur-radius] | [spread] |[color], bei der Farbe sind für die r g b Kanäle Werte von 0 bis 255 zulässig, für den Alpha Kanal von 0 bis 1 (=100% Deckkraft) */
    border-left: 2.5em solid rgb(125,167,222); /*JH Innen- und Außenabstände  (Innenabstand heisst "padding", Aussenabstand heisst "margin") sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden.*/
}


/*=================================  CONTENT =================================*/

main {
    margin: 0 0 1em;
    padding: 1em 3.5em 1em;
    background: #fff;
}


h1,
h2 {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
    padding-left: 0.9em;
    color: #666; 
    text-transform: uppercase;
    border-left:0.3em solid #3759a6;
}

h2 {
    margin: 1.2em 0 1em 0;
}

h2.moma {
    margin: 1.8em 0 1em 0;
}
    

h3 { 
    font-weight: bold; 
    padding: 1em 0 0 0; 
    margin: 0px; 
    color: #777; 
    border-bottom: 1px solid #777;
    text-align: center;
}        

p {
    text-align: left; 
    line-height: 1.5em; 
    padding: 0;
    margin: 1em 0 1em 0;
}

p.myfootn {     
    padding: 0.2em 0 0 0; 
    margin: 0px; 
    color: #555; 
    border-top: 1px solid #555;
    font-size: 0.95em
}    


a { 
    color: #3759a6; 
    outline: none; 
    text-decoration: none; 
}
a:hover,             /* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
a:focus { 
    color: white; 
    text-decoration: none; 
    background-color: #7da7de;    
}

a.more { 
    float: right; 
    font-weight: bold; 
}

a.more:after {
    content:" \2192 ";
    font-size:1.2em;
    font-weight:bold;
}

ul.square {
    list-style-type:square;
    color: #999999;
    margin: 0 0 0.5em 0.5em;
    font-size: 0.8em;
    font-weight: bold;
}

ul.square li {
    padding:10px;    
}

ul.myul {
    padding:0 0 0 0.9em;
    margin:-0.5em 0 1em 0;
    line-height: 1.5em; 
    
    list-style-type:square;
    list-style-position:outside;
}

ul.myul2 {
    padding:0 0 0 0.9em;
    margin:0 0 -0.6em 0;
    line-height: 1.5em; 
    
    list-style-type:circle;
    list-style-position:outside;
}

/*DL, DT, DD Datenliste*/

dl.imp { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr);/*1fr 100%;*/
    grid-gap: 1em 0em;
    margin: 0.2em 2% 1em;
    padding: 0.9em 4% 0.9em;    
    line-height: 1.3em;
    text-align: left; 
    font-style: italic;
    color: #666;
    border: 3px solid #BBB;
    border-radius: 0.4em;
    background-color: #F8F8F8;         
}

dd { 
    margin: 0; 
    padding-left: 1em; 
}

dl.imp dd { 
    margin: 0; 
    padding-left: 0em; 
}

dd span:first-child {  /*JH Format für Öffnungszeiten*/
    display: inline-block;
    width: 4em;
}
/*
dl.grid dd {
    margin-bottom: 2em 0em;
}*/

dl.mySpec {
    display: grid; 
    /*grid-template-columns: 1fr 100%;*/ 
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.8em 0em;
    margin-top: 1.7em;
    font-style: italic;
}

dl.mySpec dt {
    line-height: 1.5em;
    margin-bottom: 0.3em;
}

dl.mySpec dt.underl {
    text-decoration: underline;
}

dl.mySpec dt.indent {
    padding-left: 1em; 
}


dl.mySpec dd {
    line-height: 1.5em;    
    margin-bottom: 0.3em;
}

/*
span.mySub {
    font-size: 0.7em;
}*/   


dd.wborder {
    margin-top: 0.6em;
    border: 1px solid #000;
    border-radius: 0.4em;
    background-color: #F8F8F8; 
}       

dl.myIconList {
    display: grid; 
    margin-top: 1.7em;
    margin-bottom: 1em;
}

dl.myIconList dd {
    line-height: 1.5em;
    margin-bottom: 0em;
    padding-right: 0em
}

a[href^="tel"] { white-space: nowrap; }

ul#footer-nav li { 
    list-style-type: none;  
    displaY: inline;
    padding: 0 0.5em; 
    border-right: 1px  solid #ACACAC; 
}

footer p {
    text-align: center;
    padding: 0px 0px;
}

footer a:hover,             /* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
footer a:focus { 
    color: white; 
    text-decoration: none; 
    background-color: #aaa;
}

/** Navigation **/

nav#navigation{
}
    
#navigation ul {
    list-style-type: none;
    width: 100%;
    margin-bottom:16px;
    padding-left:0px;
}

#navigation ul li.first-child { 
    border-top: 1px #DBDBDB solid; 
}


#navigation ul li a {
    display: block;
    border-bottom: 1px solid #3759a6;
    font-size: 1.1em;
    line-height: 1.5em;
    padding: 0.6em 35px;  /*JH bestimmt den Abstand zwischen den List-Elementen/Anchors in der Hauptnavigationsbox */
    text-decoration: none;    
}

#navigation ul li a:before{
    content:" ";
    display:inline-block;
    position: relative;
    bottom: -0.2em;
    width:1em;
    height:1.2em;
    border-left:0.3em solid #3759a6;;
}    
        
nav a[aria-current=page]{
    background: #aaa;
}


/* ========== responsives Grid-Layout ========== */

/* mobile first - auf schmalen Bildschirmen wird alles untereinander platziert. */ 



.myIconList {
    grid-template-columns: 5em 1fr;    
    grid-gap: 2em 0em;    
} 

.myIconList img {
    width: 5em;
    border: 0.15em solid rgb(125,167,222);
    border-radius: 0.8em;
    margin: 0.35em 0em 0em;
    padding: 0em;
}
  
.spalte img {     
    width: 100%;
    float: left;
    margin: 0em;
    padding: 0.1em 0em 0.5em;      
}

.spalte figure {
    float: left;
    margin: 0em;
    padding: 0px;
    background: white;
}


.spalte figcaption {
    font-style: italic;
    font-size: 0.9em;
    color: #666; 
    padding: 0em 0em 1em;
    text-align: center;
}

article p {
	padding: 0;
	margin-top: 1.7em;
	margin-bottom: 1em;
}



article img {     
    width: 100%;
    float: left;
    margin-top: 0em;
    margin-bottom: 1.8em;
    padding: 0em 0em 0.5em;      
}

article img.moma {         
    margin-top: 0.7em;
    margin-bottom: 1.8em;    
}

article img.wCaption {     
    margin-top: 0em;
    margin-bottom: 0.5em;
    padding: 0em 0em 0.5em;      
}

article figure.psd {
    display: block;
    width: 100%;
    padding: 1em 0% 0.3em;       
}

article figure.abcap {
    display: block;
    width: 100%;
    padding: 1em 0% 0.3em;       
}

article figure {
    float: left;
    margin: 0em;
    padding: 0px;
    background: white;
}

article figcaption {
    font-style: italic;
    color: #666; 
    padding: 0em 0em 1em;
    text-align: center;
}

.spalte p {
    text-align: left; 
    line-height: 1.5em; 
    padding: 0px 0px;
}

main {
    display: grid;      
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 0em 2em;
    padding: 1em;
}

footer {
    background: #aaa;
    height: 90px;
    margin: 0em  0em  2em 0em;
    padding-left: 0.7em;
    padding-right: 0.7em;
    border-top: 0.3em solid #999; 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1em;    
}

/* ab einer Breite von 30em haben zwei Spalten nebeneinander Platz: */  
 

@media (min-width: 32em) {

    .myIconList {
        grid-template-columns: 6em 1fr;
        grid-gap: 2em 0em;
        /*grid-template-rows: repeat(4, 1fr);*/
    } 

    .myIconList img {
        width: 6em;
    }

    article figure.psd {
        padding: 1em 10% 0.3em;       
    }

    dl.imp {     
        margin: 0.2em 15% 1em;
        padding: 0.9em 5% 0.9em;   
    }
    .spalte {
     /*   grid-column: 1 / 3;
        grid-row:  3;*/                        
    }
 
    main {
        display: grid;      
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0em 2em;
        padding: 1em 2.5em 1em;        
    }

    nav {
        grid-column: 1 / 2;
    }
  
    #intro {
        grid-column: 2 / 3;
        grid-row:    1;                    
    }

    article {
        grid-column: 1 / 3;
        grid-row: 2;
    }  
  

    footer {
        height: 62px;
        padding-left: 0em;
        padding-right: 0em;
    }
        
    h1 {
        font-size: 2em;
    }

    header a h1 {
    margin: 0.7em 0 0.7em 0;
    }

    header a p {
    margin: 1em 0 1em 0;
    }

    #navigation ul li a {
    padding: 0.9em 35px;  
    }
    
}


@media (min-width: 50em) {

    header {
        margin: 2em  0  0 3.5em; 
    }

    main {
        grid-template-columns: repeat(3, 1fr);
        padding: 1em 3.5em 1em;
    }
 
    nav {
        grid-row: 1 / 2;
    } 

    #intro {
        grid-column: 2 / 4;
        grid-row:    1 / 2;                    
    }

    article {
        grid-column: 2 / 4;
        grid-row: 1;
    }    
  
    aside {
        grid-column: 3 / 4;
        grid-row: 1 / 2;    
    }   
  
    .spalte {
        grid-row:    2 / 3;                        
    }
    
}