/*  ==========================================
    Einstieg in HTML und CSS  
    Stylesheet für die Übungswebsite 

    basis.css  
    wird in style.css per @import eingebunden  

    Stylesheet zur grundlegenden Gestaltung:  
    1. Globale Custom Properties definieren 
    2. Globale Einstellungen für die gesamte Website
    3. Grundlegende Gestaltung für Schrift und Text 
    4. Nützliche, allgemeine Klassen 

    ======================================= */

/**  
  * 1. Globale Custom Properties definieren  
  */ 

html {
  /* Prevent font scaling in landscape while allowing user zoom */
  -webkit-text-size-adjust: 100%; 

  --color-base-dark: black; 
  --color-base-light: white; 

  --color-primary: #07b; 
  --color-primary-light: #3ad; 
  --color-primary-very-light: #f0f8ff; /* aliceblue */
    
  --color-accent: #f63; 
  --color-accent-active: #ec3; 
  
  --color-shadow: rgb(51, 51, 51, 0.3); 
  
  --grey-very-light: whitesmoke; 
  --grey-light: #eee; 
  --grey-dark: #666; 
  --grey-very-dark: #333; 

}  


/**  
  * 2. Globale Einstellungen für die gesamte Website 
  */ 

/* border-box aktivieren */ 
*, *::before, *::after { box-sizing: border-box; }

/* Sanftes Scrollen aktivieren */ 
html { scroll-behavior: smooth; }

/* Collapsing Margins vermeiden */ 
h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote { margin-top: 0; }

/* Bilder und Videos mit flexibler Breite einbinden */ 
img, video { max-width: 100%; height: auto; }

/* figure ohne horizontale Außenabstände */
figure { margin-left: 0; margin-right: 0; } 


/**  
  * 3. Grundlegende Gestaltung für Schrift und Text  
  */ 

/* Schrift im Inhaltsbereich in breiteren Viewports etwas größer */
@media screen and (min-width: 960px) { .site-content {font-size: 1.125rem;  } }
    
body {
/* Systemschriftart auf dem Gerät des Benutzers; Syntax ist momentan Best Practice, kann sich aber ändern */
font-family: system-ui, -apple-system, "Segoe UI", Roboto, 
             "Helvetica Neue", Arial, sans-serif; 

/* Explizite Wiederholung der Standardschriftgröße (optional)  */
font-size: 1rem; 
}  

/* Überschriften - Schriftgröße und Strichstärke */ 
h1 { font-size: 2.5rem; font-weight: 500; } 
h2 { font-size: 2rem; font-weight: 500; margin-top: 2rem;} 
h3 { font-size: 1.75rem; font-weight: 500; } 
h4 { font-size: 1.5rem; font-weight: 500; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; } 

/* Unterstreichung für Hyperlinks dünn und etwas weiter weg vom Text */ 
a { text-decoration-thickness: 1px; text-underline-offset: 0.1875em; }

/* Kontaktaddressen nicht kursiv */
address { font-style: normal; }

/* Hyperlinks im Inhaltsbereich gestalten */
.site-content a:link { color: var(--color-primary, #07b); } 
.site-content a:visited { color: var(--color-primary-light, #3ad); } 
.site-content a:hover, .site-content a:focus { color: var(--color-accent, #f63); } 
.site-content a:active { color: var(--color-accent-active, #ec3); }  

/* Externe Hyperlinks */

/* Linkziel beginnt mit "http" */
.site-nav a[href^="http"]::after,
.site-content a[href^="http"]::after,
.site-footer a[href^="http"]::after { 
  content: "\00A0\2197"; 
}


/**  
  * 4. Nützliche, allgemeine Klassen 
  */ 

/* Boxen am Bildschirm ausblenden */
.visually-hidden {
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important; 
    overflow: hidden !important;
    white-space: nowrap !important;
  
    width: 1px !important; 
    height: 1px !important; 
    padding: 0 !important; 
    border: 0 !important; 
    margin: -1px !important; 
  }

  /* Klassen zum Floaten und Clearen */
  .float-links { float: left; margin: 0 1rem 0 0; }
  .float-rechts { float: right; margin: 0 0 0 1rem; }

  .float-stoppen { clear: both; }

  /* Bildbeschriftung bei gefloateten Bildern zentrieren */
  figure[class~="float-rechts"], 
  figure[class~="float-links"] {
    text-align: center;
  }

  /* Floats umschliessen */ 
  .float-umschliessen { overflow: hidden; }

  @supports (display:flow-root) {

    .float-umschliessen {
      display: flow-root; 
      overflow: initial;       
    }
  
  }

  /* Grundlegende Gestaltung für Tabellen */
  
  th, td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 1rem;
  } 

  tbody tr:nth-child(odd) { 
    background-color: whitesmoke;
  }


  
  /** 
  * Ende basis.css 
  */ 