/*  ==========================================
    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 Einstellungen für die gesamte Website
    2. Grundlegende Gestaltung für Schrift und Text 
    3. Nützliche, allgemeine Klassen 

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

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

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

/* Sanftes Scrollen aktivieren */ 
html { 
	scroll-padding-top: 5rem; /* Korrektur für Anker-Links gemäss https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.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: 0; } 


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

body {
/* Systemschriftart auf dem Gerät des Benutzers; »Best Practice« kann sich ändern */
	font-family: "Bitter", system-ui, -apple-system, "Segoe UI", Roboto, 
             "Helvetica Neue", Arial, sans-serif; 

/* Definition der Standardschriftgröße  */
	color: var(--color-black-90);	
	font-size: 1.15rem; 
	font-weight: 400;
	line-height: 160%;
  	background-color: var(--color-white);
}  

/* Farben */
:root {
  --color-prim1: rgba(75, 151, 155, 1.0); 			/* Grün */ 
  --color-prim1-80: rgba(75, 151, 155, 0.8); 		/* Grün 80% */ 
  --color-prim1-60: rgba(75, 151, 155, 0.6); 		/* Grün 80% */ 
  --color-prim1-40: rgba(75, 151, 155, 0.4); 		/* Grün 40% */ 
  --color-prim1-20: rgba(75, 151, 155, 0.2); 		/* Grün 20% */ 
  --color-prim1-10: rgba(75, 151, 155, 0.1); 		/* Grün 10% */ 
  --color-prim2: rgba(185, 67, 54, 1.0); 			/* Rotbraun */ 
  --color-prim2-80: rgba(185, 67, 54, 0.8); 		/* Rotbraun 80% */ 
  --color-prim2-60: rgba(185, 67, 54, 0.6); 		/* Rotbraun 60% */ 
  --color-prim2-40: rgba(185, 67, 54, 0.4); 		/* Rotbraun 40% */ 
  --color-prim2-20: rgba(185, 67, 54, 0.2); 		/* Rotbraun 20% */ 
  --color-prim2-10: rgba(185, 67, 54, 0.1); 		/* Rotbraun 10% */ 
  --color-prim2-hover: rgba(152, 48, 42, 1.0); 		/* Braun */ 
  --color-prim3: rgba(35,88,94, 1.0); 			/* Dunkelblaugrün */ 
  --color-prim3-80: rgba(35,88,94, 0.8); 			/* Dunkelgrün 80% */ 
  --color-prim3-60: rgba(35,88,94, 0.6); 			/* Dunkelgrün 60% */ 
  --color-prim3-40: rgba(35,88,94, 0.4); 			/* Dunkelgrün 40% */ 
  --color-prim3-20: rgba(35,88,94, 0.2); 			/* Dunkelgrün 20% */ 
  --color-prim3-10: rgba(35,88,94, 0.1); 			/* Dunkelgrün 10% */ 
  --color-prim3-5: rgba(35,88,94, 0.05); 			/* Dunkelgrün 10% */ 	
  --color-black: rgba(0, 0, 0, 1.0); 				/* Schwarz */ 
  --color-black-90: rgba(0, 0, 0, 0.9); 			/* Schwarz-80 */ 
  --color-black-80: rgba(0, 0, 0, 0.8); 			/* Schwarz-80 */ 
  --color-black-60: rgba(0, 0, 0, 0.6); 			/* Schwarz-60 */
  --color-black-40: rgba(0, 0, 0, 0.4); 			/* Schwarz-40 */
  --color-black-20: rgba(0, 0, 0, 0.2); 			/* Schwarz-20 */
  --color-black-10: rgba(0, 0, 0, 0.1); 			/* Schwarz-10 */
  --color-black-5: rgba(0, 0, 0, 0.05); 			/* Schwarz-5 */
  --color-white: rgba(255, 255, 255, 1.0); 			/* Weiss */ 
  --color-white-80: rgba(255, 255, 255, 0.8); 		/* Weiss 80% */ 
  --color-white-60: rgba(255, 255, 255, 0.6); 		/* Weiss 60% */ 	
  --color-topic-01: rgba(249,88,123, 1.0); 			/* Rot */ 
  --color-topic-01-90: rgba(249,88,123, 0.9); 		
  --color-topic-01-20: rgba(249,88,123, 0.2); 		
  --color-topic-01-10: rgba(249,88,123, 0.1); 		
  --color-topic-01-6: rgba(249,88,123, 0.06); 		
  --color-topic-02: rgba(43,211,224, 1.0); 			/* Türkis */ 
  --color-topic-02-90: rgba(43,211,224, 0.9); 		
  --color-topic-02-20: rgba(43,211,224, 0.2); 		
  --color-topic-02-10: rgba(43,211,224, 0.1); 		
  --color-topic-02-6: rgba(43,211,224, 0.06); 
  --color-topic-03: rgba(199,206,52, 1.0); 			/* Hellgrün 2 */ 
  --color-topic-03-90: rgba(199,206,52, 0.9); 		
  --color-topic-03-20: rgba(199,206,52, 0.2); 		
  --color-topic-03-10: rgba(199,206,52, 0.1); 		
  --color-topic-03-6: rgba(199,206,52, 0.06); 		
  --color-topic-04: rgba(147,39,143, 1.0); 			/* Bordeaux */ 
  --color-topic-04-90: rgba(147,39,143, 0.9); 		
  --color-topic-04-20: rgba(147,39,143, 0.2); 		
  --color-topic-04-10: rgba(147,39,143, 0.1); 		
  --color-topic-04-6: rgba(147,39,143, 0.06); 		
  --color-topic-05: rgba(155,133,52, 1.0); 		/* Braun */ 
  --color-topic-05-90: rgba(155,133,52, 0.9); 		
  --color-topic-05-20: rgba(155,133,52, 0.2);		
  --color-topic-05-10: rgba(155,133,52, 0.1); 		
  --color-topic-05-6: rgba(155,133,52, 0.06);  		
  --color-topic-06: rgba(101,138,239, 1.0); 		/* Blau */ 
  --color-topic-06-90: rgba(101,138,239, 0.9); 	
  --color-topic-06-20: rgba(101,138,239, 0.2); 	
  --color-topic-06-10: rgba(101,138,239, 0.1); 		
  --color-topic-06-6: rgba(101,138,239, 0.06); 	 
  --color-topic-07: rgba(60,211,113, 1.0); 			/* Grasgrün */ 
  --color-topic-07-90: rgba(60,211,113, 0.9); 		
  --color-topic-07-20: rgba(60,211,113, 0.2); 		
  --color-topic-07-10: rgba(60,211,113, 0.1); 		
  --color-topic-07-6: rgba(60,211,113, 0.06); 		
  --color-topic-08: rgba(230,112,60, 1.0); 		/* Rotorange */ 
  --color-topic-08-90: rgba(230,112,60, 0.9); 		
  --color-topic-08-20: rgba(230,112,60, 0.2);  		
  --color-topic-08-10: rgba(230,112,60, 0.1);	 		
  --color-topic-08-6: rgba(230,112,60, 0.06);		
  --color-topic-09: rgba(239,170,58, 1.0); 			/* Ocker */ 
  --color-topic-09-90: rgba(239,170,58, 0.9); 		
  --color-topic-09-20: rgba(239,170,58, 0.2); 		
  --color-topic-09-10: rgba(239,170,58, 0.1); 		
  --color-topic-09-6: rgba(239,170,58, 0.06); 		
  --color-topic-10: rgba(14,141,178, 1.0); 			/* Blau */ 
  --color-topic-10-90: rgba(114,141,178, 0.9); 		
  --color-topic-10-20: rgba(114,141,178, 0.2);  		
  --color-topic-10-10: rgba(14,141,178, 0.1);  		
  --color-topic-10-6: rgba(14,141,178, 0.06); 		
	
  --border-radius-big:  2rem;
  --border-radius-medium:  1.5rem;
  --border-radius-small:  0.75rem;
  --border-radius-verysmall:  0.45rem;
	
  --shadow-card: 1px 1px 2px 2px var(--color-black-5);
  --shadow-card-hover: 2px 3px 7px 3px var(--color-black-10);
  --shadow-navi: 0 4px 6px 4px var(--color-black-5);
  --shadow-chip: 2px 2px 3px 2px var(--color-black-10);
	
  --color-tab-bg-green: rgba(168, 182, 152, 1.0); 	/* Grün */ 
  --color-tab-bg-lilac: rgba(198, 180, 220, 1.0); 	/* Lila */ 
  --color-tab-bg-red: rgba(237, 183, 189, 1.0); 	/* Rot */ 
  --color-tab-bg-ochre: rgba(226, 222, 212, 1.0); 	/* Ocker */ 
  --color-tab-bg-yellow: rgba(242, 242, 189, 01.0); 	/* Gelb */ 
  --color-tab-bg-turquoise: rgba(167, 213, 213, 1.0); 	/* Türkis */ 
  --color-tab-bg-blue: rgba(139, 159, 189, 1.0); 	/* Blau */ 
  --color-tab-bg-gray: rgba(225, 233, 244, 1.0); 	/* Grau */ 
	
  --color-tab-bg-statusquo: rgba(255, 181, 180, 0.5); 	/* IST (rot) */ 
  --color-tab-bg-future: rgba(255, 201, 109, 0.5); 		/* SOLL (orange) */ 
}

/* Überschriften - Schriftgröße und Strichstärke */ 
h1 { font-family: "Bitter"; font-size: 2.35rem; font-weight: 550; line-height: 140%;} /* Seitentitel */ 
h2 { font-family: "Figtree"; font-size: 1.9rem; font-weight: 550; line-height: 140%;} /* Titel */ 
h3 { font-family: "Figtree"; font-size: 1.5rem; font-weight: 500; line-height: 140%;} /* Untertitel */ 
h4 { font-family: "Bitter"; font-size: 1.4rem; font-weight: 600; line-height: 140%;} /* xxx */ 
h5 { font-family: "Bitter"; font-size: 1.25rem; font-weight: 600; color: var(--color-prim3); line-height: 140%;}
h6 { font-family: "Figtree"; font-size: 1.1rem; font-weight: 500; color: var(--color-prim2-80);}  /* Titel Ankerliste und Co. */ 

/* Weitere Anpassungen */ 
h1 { margin-top: 0.95rem; margin-bottom: 2rem; } 
h2 { margin-top: 0.75rem; margin-bottom: 1.5rem; } 
h3 { margin-top: 1.25rem; margin-bottom: 0.75rem; } 
h4 { margin-top: 1.25rem; margin-bottom: 0.75rem; } 
h5 { margin-top: 1rem; margin-bottom: 0.5rem; } 
h6 { margin-top: 1.5rem; margin-bottom: 0.25rem; } 

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

/* Vertikale Abstände vergrössern zwiscnen Sektionen */ 
hr { margin: 4em 0 2em 0; }


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


/* Icons */
.fa-stack.small {
    font-size: 0.75em;
  }

/* Tooltips */
span[data-descr] {
  position: relative;
  text-decoration: none;
  color: var(color-black-40);
  cursor: pointer;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: -50%;
  top: 1.8rem;
  min-width: 320px;
  border-radius: 0.5rem;
  padding: 0.5rem;
  text-align: left;
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 400;
  background-color: var(--color-black-80);
  z-index: 1;
}

.author {
  color: var(--color-prim2);
  cursor: pointer;
}


/**  
  * 3. 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 */
.float-rechts { float: right; margin: 0 0 0 1rem; }
.float-links  { float: left;  margin: 0 1rem 0 0; }
.float-stoppen { clear: both; }
figure[class~="float-rechts"], figure[class~="float-links"] { text-align: left; }

/* Floats umschließen für alte und neue Browser */
.float-umschliessen { overflow: hidden; } 

@supports (display: flow-root) { 
  .float-umschliessen {
    display: flow-root; 
    overflow: initial; 
  }
} /* Ende @supports */ 


/** 
  * Ende basis.css 
  */