/**  

  * 1. Klassisches Seitenlayout (begrenzte Breite, zentriert) 
  */ 

/* Hintergrundfarbe für das Stammelement */ 
html { background-color: smokewhite; }

/* Grundlegende Gestaltung für body */
body {
    /* Hintergrundfarbe und Begrenzung der Breite */ 
    background-color: #fff; 
    min-width: 320px; 
    max-width: 600px; 
  
    /* Horizontal zentrieren */ 
    margin: 0.25rem auto;   
  }


/** 
  * 2. Kopfbereich (inklusive Inhalte)  
  */ 

/* Innen- und Außenabstände */
.site-header { 
  padding: 1rem 1rem 0 1rem;
  margin-bottom: 1rem; 
} 

/* Fine-Tuning: Die Abstände um Logo und Slogan anpassen*/  
.site-header h1 { margin-bottom: 0; }
.site-header p { margin-top: 0; }


/** 
  * 3. Inhaltsbereich 
  */ 

/* Innen- und Außenabstände */
.site-content { 
    line-height: 1.5; 
    padding: 0 1rem; 
    margin-bottom: 2rem; 
} 

* {
  box-sizing: border-box;
}
img{
  vertical-align: middle;
}

 /* Hyperlinks im Inhaltsbereich gestalten 
  */

/* Linkzustände für den Inhaltsbereich */
.site-content a:link { color: #07b; } 
.site-content a:visited { color: #3ad; } 
.site-content a:hover, .site-content a:focus { color: #f63; } 
.site-content a:active { color: #ec3; }  

/* Externe Hyperlinks */
/* .site-content a[href^="http"]::after { content: " (in neuem Tab oder Fenster)"; }  */
/*.site-content a[href^="http"]::after { content: " \2197"; }*/
/* .site-content a[target="_blank"]::after { content: " \2197"; } */


/** 

/** 
  * 4. Fußbereich (inklusive Inhalte)  
  */ 

/* Grundlegende Gestaltung für den Footer */ 
.site-footer {
    font-size: smaller; 
    background-color: #333;
    color: white; 
    text-align: right; 
    padding: 0.5rem 1rem;
  }


/* Die Navigation im Fußbereich */   
.footer-nav ul {
  display: flex; 
  list-style: none; 
  padding: 0;   
  margin: 0; 
}
.footer-nav li {
  /* display: inline; */
  margin-right: 0.5rem;
}
.footer-nav li:first-child {
  padding-right: 0.5rem; 
  border-right: 1px solid #eee;
}
.footer-nav li:nth-child(2){
  padding-right: 0.5rem;
  border-right: 1px solid #eee;
}
.footer-nav li:last-child {
  margin-right: 0; 
  margin-left: auto;
}
.site-footer a {
  display: block;
  color: white; 
  text-decoration: none; 
}

html { background-color: transparent; }
body { 
  display: flex;
  flex-flow: column;
  max-width: none; 
  min-height: 100vh; 
  padding: 0; 
  margin: 0; 
}

.inside {
  max-width: 600px; 
  padding: 0 1rem;
  margin: 0 auto; 
}
.logo{
  width: 350px
}
.sylvio{
  width: 500px;
}
@supports (display:grid) { 
  .inside { 
    max-width: 960px; 
  }
} 

/* Abstände der Infoboxen korrigieren - zusätzliche Klasse erhöht Spezifität */ 
.site-content .infoboxen { padding: 1rem 0; } 
.site-content .infobox { margin: 1rem 0; }

.site-header, .site-nav, .site-content, .site-footer { 
  padding-left: 0; 
  padding-right: 0; 
}

.site-content {
  flex: 1; 
}

/**