/*Schriftarten (von Google Fonts)*/
/* latin Regular*/
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('fonts/SourceSansPro-Regular_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin Semi-Bold*/
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url('fonts/SourceSansPro-SemiBold_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin Italic*/
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url('fonts/SourceSansPro-Italic_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin Semi-Bold-Italic*/
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'), url('fonts/SourceSansPro-SemiBoldItalic_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Stylesheet für Selfhtml Design 04 
  als Basis genommen und an TSVSL angepasst
  responsives Layout mit Flexbox ab Z. 262   */

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

/* globale Farben als Variablen festlegen */
:root {
	--hintergrund1: 227,219,154;	/*#e3db9a helles beige */
	--hintergrund2: 199,183,115;	/*#c7b773 dunkles beige */
	--akzent1: 0,41,195;			/*#0029c3 dunkelblau */
	--akzent2: 251,184,79;			/*#fbb84f orange */
}

/* alternatives Boxmodell */

html { 
  box-sizing: border-box; 
} 

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

body {
	max-width: 75em;
	margin: 0 auto; 
	padding: 0 1em;
	font: normal 1em 'Source Sans Pro', sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
	color: #000000;
	background: rgb(var(--hintergrund2));
	position:relative;
}
h1{
	font-size:1.7em;
	font-weight:600;
	text-decoration: none;
}
h2{
	color: rgb(var(--akzent1));
	font-size:1.3em;
	font-style:italic;
	font-weight:600;
	text-decoration: none;
}


/* ===== header mit Banner in der Mitte===== */

header.banner {
	background: rgb(var(--hintergrund1));
	padding: .5em 1em;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 0 0 1em 1em;
}

/* ===== Navigation bei schmalen Bildschirmen ===== */

header a#navlink {
	display: block;
	float: right;
	color: rgb(var(--akzent1));
	text-decoration: none;
	font-size: 2em;
	font-weight: 600;
}

/* ===== Imageslider in Titelzeile===== */

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }

30% { left: -100%; }
70% { left: -100%; }

80% { left: -200%; }
100% { left: -200%; }
}

div#slider { overflow: hidden; }
div#slider figure img { width: 25%; float: left; }
div#slider figure { 
	position: relative;
	width: 400%;
	margin: 0;
	left: 0;
	text-align: left;
	font-size: 0;
	animation: 16s slidy infinite ease-in-out;
}

/* ===== content / Inhalt ===== */

main {
	padding: 1em;
	background: rgb(var(--hintergrund1));
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 1em;  
}

/* ===== Links im Text und im Titel ===== */
a {
	color: rgb(var(--akzent1)); 
}

a:hover,
a:focus {
	background: rgba(var(--akzent1),0.75);
	color: rgb(var(--akzent2));
}

a.button{
	background: rgb(var(--akzent2));
	font-weight: 600;
	box-shadow: 0 0 20px rgb(var(--akzent1)) inset, 0 2px 1px rgba(0,0,0,0.2);
	color: #000000;
	padding: 0.5em;
	border-radius: .5em;
	text-decoration: none;	
}
a.button:hover,
a.button:focus {
	background: rgba(var(--akzent1),0.75);
	color: rgb(var(--akzent2));
}

/* ===== Überschrift im Text und im Titel ===== */

h1 {
}

h1 span,
.akzentfarbe1 {
	color: rgb(var(--akzent1));
}

h1 a:hover span {
    color: rgb(var(--akzent2));
}

.akzentfarbe2 {
	color: rgb(var(--akzent2));
}


/* Design des aside (rechter Kasten) */

aside {
	box-shadow: 0 0 80px rgba(0,0,0,0.1) inset, 0 3px 1px rgba(0,0,0,0.15);
	border-radius: 1em;
	position: relative;
	padding: 0 0 4em;     /* Platz für abslout positionierte Buttons */
}

/* Überschrift Flächen im rechten Kasten */
aside h2 {
	color: rgb(var(--akzent2));
	padding: .5em;
	margin: 0;
	background: rgba(var(--akzent1),0.75);
	border-radius: .5em;
	box-shadow: 0 3px 0 rgb(var(--akzent2));
}

/* Logo im rechten Kasten */

.logorechts {
	height:1.3em;
	float: right;
	border: 0;
}


aside h3,
aside dl {
	padding-left: 0.5em;
}

aside dd {
	font-style:normal;
}

aside p {
	padding: 0.5em 1em;
}

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

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

/* ===== Tabellen ===== */

table {
	border-collapse: collapse;
	border: 1px solid;
}

td,
th {
	padding: .7em;
	border: 1px solid;
}

/* ===== Navigation ===== */

#navigation li {
	display: block;
	list-style: none;
	margin-right: .5em; 
	width: 90%;
}

#navigation a {
	display: block; 
	text-decoration: none;
	padding: 0.5em 1em;
	background-color: rgb(var(--hintergrund1));
	border-radius: .5em .5em 0 0;	
}

/* ===== Navigation Tabs ===== */
#navigation a[aria-current=page] {
	font-weight:600;
    background: linear-gradient(rgba(var(--akzent2),0.95), rgb(var(--hintergrund1)));
}

#navigation a:hover,
#navigation a:focus, 
#navigation a:active  {
	color: rgb(var(--akzent2));
    background: linear-gradient(rgb(var(--akzent1)), rgb(var(--hintergrund1)));
}

/* ===== Footer ===== */
	
footer #copyright {
	float: right;
}

/* ===== responsives Layout ===== */

/* Mobile first! 1-Spaltenlayout  */


/* 2-Spaltenlayout, sobald der Platz es erlaubt  */

@media only screen and (min-width: 40em) {
  main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap:1em;
	position: relative;
	margin: 3em auto 1em;
  }
  
  article {
	grid-column: span 2;
  }
  
  header a#navlink {
	display: none;
  }

  #navigation  {
    position: absolute;
    top: -3em;
  }
  
  #navigation li {
	display: inline-block;
	width: auto;
}

#navigation a {
	display: inline-block; 
}

/* 3-Spaltenlayout, sobald der Platz es erlaubt  */
@media only screen and (min-width: 60em) {
  main {
	grid-template-columns: repeat(3, 1fr);
  }

/* Footer und Header dürfen die Spalten verbinden  */

	main header,
	main footer {
	  grid-column: span 3;
	}

	article{
	  grid-column: span 2;		
	}
}

/* Flexbox Fallback wenn der  Browser kein display:grid unterstützt. */
@supports not (display: grid) {
  main {
    display: flex;
    flex-flow: row wrap;
  }

main > * {
  flex: 1 100%;      /* Alle Elemente werden über die volle Breite dargestellt */
} 

article {
  flex: 1 64%;      
  margin: 1%;
}
aside {
  flex: 1 31%;      /* Diese Elemente erhalten eine Breite von 1/3.  */
  margin: 1%;
}
}