@charset "utf-8";
/* CSS Document */

/* alegreya-sans-regular - latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'),
       url('../fonts/alegreya-sans-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/alegreya-sans-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* alegreya-sans-italic - latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'),
       url('../fonts/alegreya-sans-v8-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/alegreya-sans-v8-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* alegreya-sans-700 - latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'),
       url('../fonts/alegreya-sans-v8-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/alegreya-sans-v8-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* alegreya-sans-700italic - latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Alegreya Sans Bold Italic'), local('AlegreyaSans-BoldItalic'),
       url('../fonts/alegreya-sans-v8-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/alegreya-sans-v8-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* kavivanar-regular - latin */
@font-face {
  font-family: 'Kavivanar';
  font-style: normal;
  font-weight: 400;
  src: local('Kavivanar Regular'), local('Kavivanar-Regular'),
       url('../fonts/kavivanar-v3-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/kavivanar-v3-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* Die CSS ist in 3 Bereiche aufgeteilt: */
/* 1) alle allgemeinen Stile und Layout für Browser, die keine CSS-Grid unterstützen */
/* 2) Layout für Browser die CSS-Grid können (die notwendigen Tags werden dann überschrieben) */
/* 3) Layout für Smartphones mit schmalem Display (die notwendigen Tags werden überschrieben) */

body {
	height: 100%;
	margin: 0;
	font-family: "Alegreya Sans", sans-serif;
	font-size: 1em;
	font-weight: 400;
}

/*Äußerster Parent Container*/
.container {
	
}

.header {
	background-color: #252d5e;
	height: 7.8em;
	background-image: url("../images/sky_sunup.png");
	background-size: auto 7.8em;
	background-repeat: no-repeat;
	border: 0;
	/* position: fixed; */
}

.sidebar {
	margin: 2em;
	background-color: #fffcf2;
	border-radius: 1em;
	display: flex;
	flex-direction: column;
}

.content {
	padding: 50px 0px;
	margin: auto;
	width: 80%;
	max-width: 45em;
	align: center;
	text-align: justify;
}

/* Impressum */
.impressum {
	flex-direction: row;
	position: absolute;
	top: 6.3em;
	left: 3.8em;
	display: flex;
	justify-content: space-around;
	padding: 0 0 0 0px;
}

.leftlink {
	order: 1;
	margin-right: 1em;
}

.rightlink {
	order: 2;
}

.sublinks {
	font-size: 0.7em;
	padding: 0px;
	text-align: center;
	line-height: 20%;
}

.sublinks a {
	color: #FFCC00;
	color: white;
}

.sublinks:hover a {
	color: #FFCC00;
}


/* Grundlegende Styles für die Navigation */
ul.navlist {
    width: 100%;
    margin: 0;
    padding: 2em 0 0;
    list-style: none;
}

ul.navlist li {
    padding-left: 1em;
    line-height: 3em;
    /*border-bottom: 1px solid #252d5e; Optional, falls benötigt */
}

ul.navlist li.spacer {
    line-height: 2em;
}

/* Hover-Effekt nicht auf Spacer- und Hugespacer-Elemente anwenden */
ul.navlist li.spacer:hover, ul.navlist li.hugespacer:hover {
    background-color: transparent; /* Setzt den Hintergrund beim Hovern auf transparent */
    color: inherit; /* Behält die aktuelle Textfarbe bei */
}

/* Vereinheitlichte Hover-Styles für inaktive und aktive Listenelemente und Links */
ul.navlist li:hover, ul.navlist li a:hover {
    background-color: #171f1d;
    color: #ffcb8a;
}

/* Anpassung der Link-Styles innerhalb der Listenelemente */
ul.navlist li a {
    text-decoration: none;
    color: black;
    display: inline-block;
}

/* Spezifische Styles für aktive Listenelemente */
ul.navlist li.active {
    background-color: #FFF0BA; /* Standard-Hintergrundfarbe für aktive Elemente */
}

ul.navlist li.active:hover {
    background-color: #171f1d; /* Hintergrundfarbe beim Hovern über aktive Elemente */
    color: #ffcb8a; /* Textfarbe beim Hovern über aktive Elemente */
}

ul.navlist li.active a {
    color: black; /* Standard-Textfarbe für Links in aktiven Elementen */
}

ul.navlist li.active:hover a {
    color: #ffcb8a; /* Textfarbe für Links beim Hovern über aktive Elemente */
}

/* Anpassung der Textfarbe für Links beim Hover über inaktiven Zellen */
ul.navlist li.inact:hover a {
    color: #ffcb8a;
}



/* Tabellen */


table {
	cellspacing: 5;
	vertical-align:top;
	color: #454545;
	margin-bottom: 3em;
}

td {
	vertical-align:top;
	text-align:left;
}



/* Links */ 

a {
	text-decoration: none;
	text-underline: none;
	color: #252D5E;
}
a:hover {
	color: #FFC500;	
}
a:active {
	color: #FFC500;	
}



/* Stile */

h1 {  /* Seitenüberschriften */
	text-align: left;
}

h2 { /* kursive Sitenzitate */
	text-align: right;
	font-style: italic; /* Setzt den Text auf kursiv */
    color: #171f1d; /* Ändert die Textfarbe zu beige */
	font-family: "Alegreya Sans", sans-serif;
	font-size: 1.1em;
	font-weight: 400;
}

h3 {
	color: black;
	text-align: left;
}

.fettrot {
  font-weight: bold;
  color: red;
}

.ipunkt {
	width: 1.5em;
	height: 1em;
	border: 0;
	vertical-align: text-bottom;
}

.e_ipunkt {
	width: 2.5em;
	height: 1em;
	border: 0;
	vertical-align: text-bottom;
}

.tdeventleft {
	width: 50%;
}

.tdeventright {
	width: 50%;
}

.eventpic {
        width: 100%;
        height: auto;
}

.punktliste {
	list-style: circle;
	list-style-image: url("../images/ipunktmini.png");
}

.teamname {
	font-size: 14px;
	font-weight: bold;
	color: #454545;
}

.betont {
	font-weight:bold;
}

.kursiv {
	font-style: italic;
}

.klein {
	font-size: 13px;
	font-weight:normal;
}

.divspacer {
	margin-top: 30px;
	padding-top: 30px;
}

/* Flexboxen für Unterpages*/
.threecol {
	display: flex;
	justify-content: space-between;
}

.threecol1 {
	flex: 1;
	padding: 1em;
}

.threecol2 {
	flex: 1;
	padding: 1em;
	margin: 0 1em 0 1em;
}

.threecol3 {
	flex: 1;
	padding: 1em;
}

.divider {
	width: 0.1em;
	margin: 0.2em 0;
	background-color: #9B9B9B;	
}


/*Bilder*/

#eventheader {
	background-image: url("../images/none");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	min-height: 5em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#welcomepic {
	background-image: url("../images/moos.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	min-height: 22em;
	min-width: 12.5em;
	aspect-ratio: 1600 / 538;
	width: 100%;
	border-radius: 0.8em;
	overflow: hidden; /* Damit nichts rausguckt */
}

#angebote {
	background-image: url("../images/karteA.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	min-height: 18em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#sign {
	background-image: url("../images/wegweiser.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	min-height: 10em;
	min-width: 12.5em;
	border-radius: 0.8em;
	
}

#einzel {
	background-image: url("../images/wanderer.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom right;
	min-height: 14em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#paare {
	background-image: url("../images/strandpaar.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	min-height: 10em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#kinder {
	background-image: url("../images/jugend.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	min-height: 14em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#familien {
	background-image: url("../images/enten.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	min-height: 14em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#coaching {
	background-image: url("../images/bergsee.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	min-height: 16em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#supervision {
	background-image: url("../images/gipfel.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: 16em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#kontakt {
	background-image: url("../images/holzbruecke.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	min-height: 13em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#preise {
	background-image: url("../images/papiere.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	min-height: 16em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

/* für CSS-Grid fähige Browser */
@media (min-width: 900px) {
@supports (display: grid) {

.container {
	display: grid;
	grid-template-columns: 15em auto;
	grid-template-rows: 125px auto;
	grid-template-areas: 
		"header 	header"
		"sidebar 	inhalt";
}
	
.header {
	grid-area: header;
	background-color: #252d5e;
	background-image: url("../images/sky_sunup.png");
	background-repeat: no-repeat;
	border: 0;
	/* position: fixed; */
}
	

.sidebar {
	grid-area: sidebar;
	margin: 0;
	background-color: #fffcf2;
	border-radius: 0;
	display: flex;
	flex-direction: column;
}

.content {
	grid-area: inhalt;
	justify-self: start;
	align-self: start;
	padding: 0;
	margin: 2.2em auto 3em 5em;
	max-width: 45em;
	text-align: justify;
}

/* Impressum */
.impressum {
	grid-area: impressum; /*verwende ich im Moment nicht, wird absolut positioniert*/
	flex-direction: row;
	position: absolute;
	top: 6.3em;
	left: 3.8em;
	display: flex;
	justify-content: space-around;
	padding: 0 0 0 0px;
}
	

ul.navlist {
	width: 100%;
	margin: 0px;
	padding: 2em 0 0 2em;
}
	
	
}}


/* Smartphones */
@media only screen 
	and (max-width: 1000px) 
	and (orientation : portrait) 
	and (-webkit-min-device-pixel-ratio : 2) 
{

body {
	height: 100%;
	margin: 0;
	font-family: "Alegreya Sans", sans-serif;
	font-size: 2.5em;
	font-weight: 400;
}
	
ul.navlist li {
	list-style: none;
	/*border-bottom: 1px solid #252d5e;*/
	padding-left: 1em;
	line-height: 2em;
}
	
ul.navlist li.spacer {
	list-style: none;
	line-height: 1em;
}

/* ab hier genauso wie der Fallback */
.container {
	display: contents;	
}

.header {
	background-color: #252d5e;
	height: 7.8em;
	background-image: url("../images/sky_sunup.png");
	background-size: auto 7.8em;
	background-repeat: no-repeat;
	border: 0;
	/* position: fixed; */
}
	
.sidebar {
	margin: 2em;
	background-color: #fffcf2;
	border-radius: 1em;
	display: flex;
	flex-direction: column;
}

.content {
	padding: 50px 0px;
	margin: auto;
	width: 80%;
	max-width: 45em;
	align: center;
	text-align: justify;
}

/* Impressum */
.impressum {
	flex-direction: row;
	position: absolute;
	top: 6.3em;
	left: 3.8em;
	display: flex;
	justify-content: space-around;
	padding: 0 0 0 0px;
}
	
ul.navlist {
	width: 100%;
	margin: 0px;
	padding: 2em 0 0 0;
}

	
}