/* Stylesheet fuer Wir retten des Haus des Gastes, adaptiert von https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/Design03 
  responsives Layout mit Grid Layout ab Z. 210   */

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

/* alternatives Boxmodell */
html { 
  box-sizing: border-box;     /* Sorgt dafuer, dass alle Boxen gleichen Groesse haben inkl. padding etc., siehe https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing?retiredLocale=de */
  background: #d5d5d5;        
} 

*, ::before, ::after { 
  box-sizing: inherit;        /* Werte behalten ihren Wert, z.B. bei Farben, siehe https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance                                              */
}

body {
  /* Diese Groesse andert die index.html auch, daran liegt es nicht. Achtung: Nur auf dem lokalen Rechner sieht index.html anders als die anderen Seiten aus! */
  max-width: 100em;           /* Maximale Breite des Bildschirmes, auch bei grossen Bildschirmen, also 100 mal die Font-Groesse                                                              */
  margin: 0 auto;             /* Zentrierung                                                                                                                                                 */
  padding: 0.5em;             /* Padding, um auf Handies den Rand nicht zu beschreiben.                                                                                                      */                                           */
  background: #fff;           /* Hintergrundfarbe eines Elementes der Webseite                                                                                                               */
  background-color:rgb(227,225,219);                                    /* Hintergrundfarbe der ganzen Webseite?                                                                             */
  color: #222;                                                          /* Farbe der Schrift, je niedriger, je dunkler                                                                       */
  font-family:'Calibri','Lucida Sans','Arial','Times',sans-serif;       /* Reihenfolge der Schriftfamilien                                                                                   */
  font: normal 1em Arial, sans-serif;                                   /* Mindestschriftgroesse wird dem Browser, bzw. dem Nutzer ueberlassen!                                              */
  /* display: flex;
  /* flex-flow: row wrap;                                                  /* Darstellung in mehreren Reihen, wenn zusammen die verfuegbare Breite ueberschritten ist                           */
}


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

/* Kopfzeile, also ganz oben */
header {
  position: relative;    
  height: 210px;
  /* width: 35em; Paßt nicht, weil das die Weite Text und Bild ist */
  margin: 0em  0  0 0em;
  /* Farbe hinter dem farbigen Block mit dem Text und links vom Cover-Bild (urspruenglich 777) */
/*  background: #ae2851 url("../img/collage-unten-462x200.jpg") no-repeat right; */
  background: #ae2851 url("../img/visu-496x200b.jpg") no-repeat right; 
  background-size: contain;        
  padding: 0 0 0.5em;
}

header a h1,
header a p {         /*Die Angaben fuer h1 muessen mit einem genauen Selektor ueberschrieben werden. */
  color: white; 
  border-left: 0;
  padding: 0;
  display: table;    /* Ueberschriften und Absaetze sind sonst immer 100% breit, durch display:table und display: inline-block; fuer das Elternelement a.ribbon wird das Banner nur so breit wie noetig. */
}

/* Farbe des Banners oben links */
.ribbon {
  display: inline-block;
  position: relative;  
  margin: 2em 0 2em -1.5em;
  padding: 0.5em 1em;
  background: #4e7a92; /* Farbe beim Kasten mit Text oben */
<!--  background: #fffdde; /* Farbe beim Kasten mit Text oben */ -->
<!--  box-shadow: 0px 1px 3px rgba(0,0,0,.8); -->
}
 
.ribbon::before{
  display: block;
  width: 1.5em;
  height: 0;
  position: absolute;
  bottom: -1.5em;
  left: 1em;
  content: "";
  border-bottom: 1.5em solid transparent;
  border-right: 1.5em solid rgb(0, 80, 116);
}

/* ============================================== Klassen ================================================================ */

<!-- Sorgt dafuer, dass Bilder nicht treppenartig erscheinen -->
.clear {
	clear: both;
}
 
/* ==================================================   CONTENT   ======================================================== */

main {
  margin: 0 0 1em;
  padding: 1em;
  background: LavenderBlush /* #fffdde; */
}

h1,
h2 {
  font-family:'Calibri','Lucida Sans','Arial','Times',sans-serif;
  <!-- padding-left: 1em; -->
  <!-- color: #666; -->
  <!-- text-transform: uppercase; -->
  <!-- border-left:5px solid #4e68AD; -->
}
  
h2 span {
  font-size: 0.70em; 
  color: #818181; 
  text-transform: none;
}

h3  { 
  font-family:'Calibri','Lucida Sans','Arial','Times',sans-serif;
  <!-- font-size: 1.25em; -->
  <!-- font-weight: normal; -->
  <!-- padding: 0px; -->
  <!-- margin: 0px; -->
  <!-- color: #4E68AD; -->
}    

p {
  text-align: left; 
  line-height: 1.4em; 
  padding: 0px 0px <!-- Zuerst Pixel in der Vertikalen zwischen den Absaetzen, dann Pixel vor dem Absatz -->
}

img {
  margin-left: 20px;
  margin-bottom: 20px;
  background-color: #ae2851;
  background: #ae2851;
  }

#rechts { /* align geht nur mit div */
  width: 17em;<!-- 28%; -->
  border:20px;
  }

ul {
  line-height: 1.4em;
  }

td {
  line-height: 1.4em;
  }

/* Normaler Link, Farbe auffälliger gemacht */
a   {          
<!--  color: #4e7a92; -->
  color: blue; 
  outline: none; 
  text-decoration: none; 
}

/* Durch Maus oder Tastatur angewaehlte Verweise werden sichtbar gemacht */
a:hover,       
a:focus { 
  color: white; 
  text-decoration: none; 
  background-color: lightsteelblue;  
<!--  background-color: #4e7a92;  -->
}

/* Besuchter Link andere Farbe */
a:visited { 
  color: cornflowerblue; <!-- slateblue; -->
  outline: none; 
  text-decoration: none;
}

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; 
}

/* DL, DT, DD Datenliste, siehe auch https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */
dl.grid { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dd { 
  margin: 0; 
  padding-left: 1em; 
}

dd span:first-child {
  display: inline-block;
  width: 4em;
}

dl.grid dd {
  margin-bottom: 1em;
}

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

/* Hintergrund und Lage Footer */
ul#footer-nav li { 
  list-style-type: none;  
  display: inline;
  padding: -3em 0.5em;
  border-right: 1px  solid #ACACAC; 
}

footer {
  display: grid;
    grid-template-columns: repeat(1, auto); /* 1fr); */  
  padding: 0.0em;
}

ul#footer-nav  li:last-child { 
  border: none; 
}  

ul#footer-nav img {
  width: 1.5em;
}

ul#footer-nav a:hover,
ul#footer-nav a:focus, 
ul#footer-nav a:active {
  background: lightgray;
}

footer p {
  text-align: right;
}

/** Navigation **/
/** Navigantionsbalken links **/

nav#navigation{
}
  
#navigation ul {
  list-style-type: none;
  width: 100%;
  margin-bottom:10px; /* Vorher 30 px */
}

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

#navigation ul li a {
  display: block;
  border-bottom: 1px solid #4e7a92;
  margin: 0.4em;           /* Abstand der Menuezeilen, aber auch nach oben einstellbar */
  font-size: 1.1em;        /* Fontgroesse der Menueeintraege                         */
  line-height: 1.6em;      /* Hoehe der Menueeintraege                               */
  padding: 0.3em;            /* Einzug der Menueeintraege oben und unten, vorher 35 px */
  text-decoration: none;
  width: 12.0em;           /* Weite der Menueeintraege, vorher 13em                  */
}

#navigation ul li a:before{
  content:" ";                   /* Zeichen direkt hinter Strich, fuer den Balken                */
  display:inline-block;          /* Block zwischen Strich und Text anzeigen                      */
  width:0.5em;                     /* Weite hinter dem Strich und vor dem Menue Eintrag            */
  height:1em;                    /* Hoehe der Streifen vor den Menue Eintraegen                  */
  border-left:5px solid #4e7a92; /* Dicke und Farbe der Streifen vor den Menue Eintraegen        */
}  

/* Der aktuelle Eintrag */    
nav a[aria-current=page]{
  background: #aaa;               /* Farbe hinter dem ausgewaehlten Menue Eintrag                */
}



/* ========== repsonsives Grid-Layout ========== */
/* siehe auch https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

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

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */  

@media (min-width: 10em) {
  header {
    position: relative;    
    height: 210px;
    margin: 0em  0  0 0em;
/*    background: #ae2851 url("../img/collage-unten-200x200.jpg") no-repeat right; */
    background: #ae2851 url("../img/visu-220x200b.jpg") no-repeat right; 
    background-size: contain;        
    padding: 0 0 0.5em;
  }

  main {
    display: inline; 
  }

  nav ul {
    padding:0em;
    list-style-type: none;
    margin:0.0em;
    padding:0.2em;
    float:left;
 /* width:100%; */
    overflow: hidden;
  }

  nav li {
    height:2.3em;
    font-size:0.8em;        /* Fontgroesse der Menueeintraege                         */
    float:left;
    width:33%;
  }

  nav {
    /* display: inline; */
  }
}

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

@media (min-width: 42em) { 
  header {
    position: relative;    
    height: 210px;
    margin: 0em  0  0 0em;
/*    background: #ae2851 url("../img/collage-unten-200x200.jpg") no-repeat right; */
    background: #ae2851 url("../img/visu-220x200b.jpg") no-repeat right; 
    background-size: contain;        
    padding: 0 0 0.5em;
  }

  main {
    display: inline; 
  }

  nav ul {
    padding:0em;
    list-style-type: none;
    margin:0.0em;
    padding:0.2em;
    float:left;
 /* width:100%; */
    overflow: hidden;
  }

  nav li {
    height:2.3em;
    font-size:0.8em;        /* Fontgroesse der Menueeintraege                         */
    float:left;
    width:24%;
  }

  nav {
    /* display: inline; */
  }
}

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

@media (min-width: 50em) { <!-- frueher 40 em -->
  header {
    position: relative;    
    height: 210px;
    margin: 0em  0  0 0em;
/*  background: #ae2851 url("../img/collage-unten-462x200.jpg") no-repeat right; */
    background: #ae2851 url("../img/visu-496x200b.jpg") no-repeat right; 
    background-size: contain;        
    padding: 0 0 0.5em;
  }

  main {
    display: grid;    
    grid-template-columns: repeat(2, auto);  /* 'auto' fuellt den Leerraum zwischen Navigation und Artikel auf, Original '2, 1fr' siehe auch https://developer.mozilla.org/en-US/docs/Web/CSS/repeat */
    grid-gap: 1em;
  }

  nav ul {
    display: grid; 
    padding: 0em;
  }

  nav li {
    height:2.5em;
    font-size: 1.0em;        /* Fontgroesse der Menueeintraege                         */
  }

  nav {
    grid-column: 1 / 2;
  }

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

  article {
    grid-column: 2 / 2;
  }  
  
  .spalte img {
    /* evtl: 'display: none' um die Bilder beim Handy wegzulassen? */
    width: 50%;
    float: left;
    margin-right: 0.5em;    
  }
}

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

@media (min-width: 70em) { 
  header {
    position: relative;    
    height: 210px;
    margin: 0em  0  0 0em;
/*    background: #ae2851 url("../img/collage-unten-462x200.jpg") no-repeat right; */
    background: #ae2851 url("../img/visu-496x200b.jpg") no-repeat right; 
    background-size: contain;        
    padding: 0 0 0.5em;
  }

  main {
    display: grid;
    grid-template-columns: repeat(3, auto);  /* 'auto' fuellt den Leerraum zwischen Navigation und Artikel auf, Original '3, 1fr' siehe auch https://developer.mozilla.org/en-US/docs/Web/CSS/repeat */
  }
 
  nav ul {
    display: grid; 
    padding: 0em;
  }

  nav li {
    height:2.5em;
    font-size: 1.0em;        /* Fontgroesse der Menueeintraege                         */
  }

  nav {
    grid-row:    1 / 4;   /* Original 1 / 4 */
  } 

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

  article {
    grid-column: 2 / 4;   /* Original 2 / 4 */
  }    
  
  aside {
    grid-column: 3 / 4;   /* Original 3 / 4 */
    grid-row:    1 / 2;   /* Original 1 / 2 */
  }   
  
  .spalte {
    grid-row:    2 / 3;   /* Original 2 / 3 */       
  }
    
  .spalte img {
     width: 33%;
  } 
}