/* NORMALISIERUNG dla web */ 
* {    
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* -- Allgemeines -- */
html {
  background: #E7F9DB; 
  background-repeat: repeat;
  background-attachment: fixed;  /* --- beim Bewegen des Elementinhalts bleibt der Hintergrund unverändert ---  */
  background-size: 20px 20px;    /* --- bestimmt, an welcher Stelle sich die linken oberen Ecken der Hintergrundbilder befinden sollen.  ---  */
  color: #183305;  /* --- kolor pisma strony ---  */
  }
p {margin-top: 1px;}    /* --- odstęp od górnej części ---  */
	#p1 { display: table; }   /* --- można dopasować p jako tabelę ---  */
	
 /* --- tematy nav nad logo ---  */
  #one {
  margin: 0;
  /* --- background: #d9f5c6;    tło paska do tematów nav nad logo, ale wtedy nie działa tło pod linkami ---  */
  text-align: right;
  font-size: 0.9em;    
  text-decoration: none;
} 

#border-box {
        box-sizing: border-box;
      }
	   /* --- Inhalte werden centriert ---  */
#Inhalte-werden-zentriert {
	display: flex;
	align-items: center;
	justify-content: center;
}
  /* --- tematy w ramkach pod  logo i nav ---  */
#two {
  margin: 5px 0px 5px;    /* --- odstęp ramek od siebie i margin  górny i lewy ---  */
  margin-bottom: 1px;  /* --- dolny odstęp  ---  */
  width: auto;
  white-space: nowrap;
  text-align:left;
  padding: 0 5px 0 5px;
  font-size: 1em; 
  font-weight: normal;
  color: #183305;     /* --- zielony ciemny kolor pisma w ramkach---  */
  text-decoration: none;
}
  #two:hover,
     a:hover {color: #E7F9DB;}    /* ---  kolor pisma po najechaniu myszką w ramkach, tło ciemne   ---  */

span { padding: 2px; }   /* --- odstępy ramek z  hasłami od siebie  ---  */
	  	.typA { padding: 1px;  border: 1px solid #287635; }
		
 #two2 {    /* jeden z tematów jako aktualny z kolorem zielony jako hgr */
  margin:  5px 0px 5px;
  margin-bottom: 1px;
  width: auto;
  white-space: nowrap;
  text-align:left;
  padding: 0  5px 0 5px;
  font-size: 1em; 
  font-weight: normal;
  color: white;
  background-color: #287635;
  border-radius:0.3em;  /* zaokrąglone rogi  tła navi po najechaniu myszką */
  text-decoration: none;
}
 /* --- ramka linku przy  fladze ---  */
  #tipp {
	border: 1px solid blue;
	background: skyblue;
	display: block;
	width: 50px;}
	
#tipp:hover,
a:hover img {
	box-shadow: 0 0 10px skyblue;}	
	
	.flex-container {display: flex;}
	.row {flex-direction: row;}
	.wrap {flex-wrap: wrap;}

.vorne {justify-content: flex-start;}

body {
  margin: 0  auto; 
  padding: 0%; 
  max-width: 80em; 
  font-family: verdana, arial,  Cambria, Times New Roman ;
  /* font-size: 0.9em; */
  border: 1px solid #aaa; 
  border-top: 0; 
  background: white;    
}

.skip {
  position: absolute;
  margin-left: -999px;
  width: 990px;
}

a { color: #183305; text-decoration: underline;} /* Alle unbesuchten Links */
a:visited { background-color: #bddda8; } /* Besuchte Links werden #ac8eaf, bleiben dennoch unterstrichen. Somit erkennt man wo man sich schon befunden hat. */
a:focus {background-color: yellow;}
a:hover {
	background-color: #287635;
	border-radius:0.3em;  /* zaokrąglone rogi  tła navi po najechaniu myszką */
	color: #E7F9DB;
  }
  a[aria-current="page"] {
  color: #E7F9DB;
  background:#287635;
  border-radius:0.3em;
  padding:0.1em 0.3em; 
  text-decoration: none;
}
a.backlink::before {
	content: '← ';
}
a.toplink::before {
color: red; content: '↑  ';}

.before::before,
.after::after {
	content: "\A";
	white-space: pre;
}

/* - Logo bzw. Kopf - */
header {
    /* background: url(../pic/kot-logo.jpg) 0 0;  */
  height: 120px; 
  margin: 0; 
  padding: 0 10px;  /* - pozycjonowanie napisu - */
  padding-top: 0em;   /* -  oberen Abstand vom Inhalt zum Rahmen - */
  text-align: left;
  line-height: 50px;   /* -  odległość pisma od góry - */
  font-size: 2.2em;    /* -  wielkość Schrift - */
  font-weight: 550;  
   font-variant: normal;
   text-shadow: 2px 2px #ccc;
  letter-spacing: -2px;   
}
header #logo {
  /*background: url(../pic/kot-logo.jpg) 0 0;   */
   color:  #E7F9DB;  /* kolor pisma na logo. */
  text-decoration: none; 
}
header #logo1 { /* -> dodane 20.01.22*/
  /*background: url(../pic/kot-logo.jpg) 0 0;   tu  format pisma w logo w drugiej linijce -> dodane 20.01.22*/
   color: #66d9af;  /* kolor pisma na logo. */
   text-shadow: none;
  text-decoration: none; 
}
header #logo span { /* Der letzte Buchstabe soll invertiert dargestellt werden. */
   font-variant: normal;
   color: #E7F9DB;
   background-color: rgba(255, 255, 255, 0);
} 
 header p { margin-top: 0px;}    /* oberen Außenabstand */

nav  ul {
  background: #E7F9DB;  /*   ciemny ziekony kolor #287635 tla od Menüpunkte  - jasny to #E7F9DB */
  padding: 3px 3%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
  margin: 0; /* górny odstęp  od loga */
  border-bottom: 1px solid #287635;  /* rama dolna dla menu  color szary #aaa */
  border-top: 1px solid #287635;  /* rama górna dla menu  color zielony ciemny  */
  text-align: center;
}
nav  ul li {
  display: inline-block; /* Damit die Menüpunkte nebeneinander czyli horizontal erscheinen. */
  font-size: 1em; /* Menü-napis wielkosc pisma */
  white-space: nowrap; /* dadurch kann man den automatischen Zeilenumbruch verbieten. */
  list-style-type: none; /* Die Bullets (znaczek przy wyliczaniu czegoś) vor den Menüpunkten schalten wir ab. */
  border-left: 1px solid #287635; /* Ein optischer Trennungsstrich */
  padding: 0 .1em 0 .1em;  /*  odstęp  napisów navi od kresek */
  font-weight: bold;
  color: #E7F9DB; /*  color ciemno zielony #30600F */
}
nav  ul li a {
  color: #30600F; /*  linkfarbe napisu navi jak Farbe des Menüpunktes. jasny to #E7F9DB  */
  padding:0.1em 1em;   /*  odstęp  napisów navi od kresek */
  border-radius:0.3em;  /* zaokrąglone rogi  tła navi po najechaniu myszką */
  text-decoration: none;
}
nav  ul li a[aria-current="page"] {
  color: #E7F9DB;   /*  color ciemno zielony #287635 */
  background:#287635;
  opacity:1.0;
  font-weight: bold;
}
nav  ul li a:any-link {   /* Wenn der Link durch Maus oder Tastatur aktiviert wird, leuchtet er gelb auf! */
	color: #287635;	/*  color jasno zielony #E7F9DB,  ciemno zielony #287635 */
}
nav  ul li a:focus {   /* Wenn der Link durch Maus oder Tastatur aktiviert wird, leuchtet er gelb auf! */
	color:green;
	background:yellow;
	opacity:0.9;
}
nav  ul li a:hover {   /* wenn die Maus drüberfährt, leucht der Link #fcffc4 auf! */
	color: #e7f9db;  /* litery  color, wenn die Maus drüberfährt */
	background: #287635;
	opacity:1.0; /* Deckkraft czyli der Grad der Transparenz koloru tla */
}


/* - Der Hauptinhaltsteil - */
main {
 display: block;
 padding: 0 1%; 
 line-height: 1.5em; /* Zur besseren Lesbarkeit erhöhen wir die Zeilenhöhe (odstępi linijek) w bloku Inhalt. */
}

section{display: inline-block; width:73%;}
 #section2 {display: inline-block;  width:100%;}
 #section3 {display: flex; justify-content: space-around; max-width: 100%}
/*  #section4 {display: inline-block; width:100%;}  */

/* - Sidebar, Rechte Spalte - */
aside {
  width: 25%; /* Je kleiner das Fenster desto kleiner soll auch die Breite der Sidebar werden, damit immer genügend Platz für den richtigen Inhalt bleibt. */
  float: right; /* Damit erreichen wir, dass der Inhalt links neben der Sidebar vorbeifließt und nicht erst unten drunter anfängt. */
  clear:right;
  display : inline-block;
  padding: 0em 1% 1em;
  margin: 1px 1% 0 1%;
  border-left: 1px dotted #aaa; /* Hiermit trennen wir optisch die Sidebar vom eigentlichen Inhalt ab. */
  font-size: 0.9em; /* Die Schriftgröße setzen wir hier ein wenig herunter damit erkennbar wird, dass das Informationen zweiter Rangordnung sind. */
}
aside dt { /* Die einzelnen Überschriften in der Sidebar */
  font-size: 1.2em;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 1px dotted #aaa; /* Hier eine optische Trennungslinie zwischen den einzelnen Bereichen der Sidebar. */
}

aside dd { /* Die Unterpunkte der Sidebar. */
  padding: 0;
  margin: 0.2em 0;
}

 h1 {  /* Die Überschrift jeder Seite stellen wir besonders da, denn sie ist sehr wichtig.  */
    font-size: 1.8em; 
	font-family: Arial;  
	color:  #287635; 
	background-color: rgba(255, 255, 255, 0); }
  h2 { font-size: 1.7em; color: #287635; }  /* Überschrift pod navi po lewej stronie.  */
  h3  { font-size: 1.4em;}  /* Überschrift po prawej stronie.  */
  h2, h3 {font-weight: normal; }
  h2, h3 {color: #6699CC; font-family:  Georgia, "Times New Roman", Times, serif;}
  
  /*horizontale Trennlinie*/
  hr { 
    width: 95%; 
    height: 4px; 
    margin: 0 auto;
    color:  #d9f5c6;
    background: #d9f5c6;
}

/*DL, DT, DD Datenliste*/
dl 	{ margin-bottom:50px;}
 
dl dt {	
    float:left;
    font-weight:bold;
    margin-right:5px;
    padding:5px; 
    width:50%;
}
 
dl dd {
    margin:2px 0;
    padding:5px 0;
}

img { /* Alle Bilder bekommen einen schönen Rahmen. */
  border: solid 1px #aaa;
  padding: 1px;
}

.fleft { /* Sachen, an denen der Text vorbeifließen soll, werden diese Klassen zugewiesen. */
  float: left;
  margin: 0 2em 0.2em 1em; /* Man sollte einen schönen Abstand wählen, sonst kleben die Sachen so am Text. */
  width:25%;
}
.fright {
  float: right;
  margin: 0 2em 0.2em 1em;
  padding: 1px;
  width:25%
}

/* -- Layoutspezifisches -- */

footer {
  clear: both; /* Damit #main mindestens so hoch ausgedehnt wird wie aside, falls aside länger sein sollte. */
  padding: 2%;
  text-align:center;
  border-top: 1px dotted #aaa; /* Hiermit trennen wir den footer optisch vom eigentlichen Inhalt ab. */
}

footer .copy span {
	margin:0 auto;
	display:block;
}

/* 1-Spaltenlayout  mit Navigation unten*/
@media only screen and (max-width: 600px) {
nav ul {
	display:block; 
	background:transparent;				/*Der grüne Schatten wird deaktiviert, stattdessen wird nav ul li a mit grünem Hintergrund sichtbar! */
	margin: 1em 0;
}
nav ul li{width:90%;margin: 5px 0;  }   /* Damit man auf SmartPhones navigieren kann, werden die Menüpunkte jetzt über 90% der Screen-Breite gezogen */
nav ul li.active{padding:0 2em; background:green; border-radius:10px;}
nav ul li a{display:inline-block;width:100%; color:white; background:green; margin:5px 0; border-radius:10px;text-align:center;}
nav ul li a:after{display:none;} 

section, 				/* kein Spalten-Layout mehr, alles wird untereinander dargestellt*/
section.spalte, 
aside {
	float:none;
	display:block;
	width:100%;
}


.fleft,.fright {		/*Damit die Bilder jetzt nicht zu klein werden, nehmen sie die halbe Breite des Bildschirms ein.*/
	width:50%;
}
}

/* Drucker brauchen ganz andere CSS Angaben als Bildschirme: */
@media print {
body {
 background: white;
 color: black;
 font-family: georgia, "Times New Roman", Times serif; /* Drucker sollten alles mir einer Schriftart mit Serifen drucken, da diese auf dem Papier wesentlich leichter zu lesen ist. Schriftarten mit Serifen sind zum Beispiel Georgia, Times New Roman. Am ende sollte immer die Schriftfamilie hier mit Serifen: "serif" stehen. */
}
header {
 text-align: right;
 line-height: 0.8em;
 font-size: 3em;
 font-family: verdana, arial, sans-serif; /* Da das Logo ähnlich wie auf dem Bildschirm aussehen soll nehmen wir hier auch die gleiche Schriftart. */
 letter-spacing: -3px;
}
header a#logo {
 text-decoration: none; /* Hier lassen wir den Unterstrich weg. */
}
.skip, aside, nav { /* Wenn sich jemand eine Seite aus dem Internet ausdruckt dann will er mit hoher Wahrscheinlichkeit den Inhalt drucken und nicht das Menü oder sonstige Angaben, die für die Navigation auf dem Bildschirm gedacht sind. Deshalb lassen wir diese vom Papier verschwinden. Das spart auch viel Papier und Tinte. */
 display: none;
}
main a:link:after, main a:visited:after { /* Auf dem gedruckten Blatt Papier kann man keinen Link klicken. Deshalb drucken wir den gesammten URL dieses Links dahinter an.  Wer mehr zu diesem Thema wissen will sei auf <http://www.alistapart.com/articles/goingtoprint/ verwiesen.> */
   content: " (" attr(href) ") ";
   font-size: 0.9em; }
main a[href^="/"]:after { /* Der Mozilla/Firefox zeigt, im Gegensatz zum Opera, die Domain nicht von selbst an. Hier müssen wir mittels CSS3 nachhelfen. */
 content: " (http://example.org" attr(href) ") ";
.fright { /* Damit die Fließeigenschaften auch beim Drucken beachtet werden. */
 float: right;
 margin: 0 0 1em 1em;
}
.fleft {
 float: left;
 margin: 0 1em 1em 0;
}
}