/* Style-sheet "nfb-stil.css" für  nfb.kopernikus-oberschule.de  /ab 2024/ 26.06.24 */
/*
@font-face{
	font-family:'open_sansregular';
	src:url('..fonts/OpenSans-Regular-webfont.eot');
	url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
	url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
	url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face{
	font-family:'open_sansextrabold';
	src:url('../fonts/OpenSans-ExtraBold-webfont.eot');
	url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
	url('../fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
	url('../fonts/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face{
	font-family:'open_sanslight';
	src:url('../fonts/OpenSans-Light-webfont.eot');
	url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
	url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
	url('../fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
	font-weight:normal;
	font-style:normal;
}
/* ===== UNIVERSAL */
*,*::before,*::after {box-sizing: border-box;}
html,body {height: 100%;width: 100%; margin: 0;padding: 0;left: 0;top: 0;font-family:"Open Sans", Helvetica, Arial, sans-serif;font-size: clamp(1rem, 2.5vw, 1.25rem);background-color:WhiteSmoke;}
/* INFO: font-size: clamp(1rem, 2.5vw, 1.25rem) ===> sorgt dafür, dass h1=2,5rem=40px bei 320px screenbreite ist und bei voller Breite dann 2,5remx16pxx1,25rem=50px groß ist !!!*/

/* ===== ROOT FONT STYLES */
* {font-family: 'Open Sans', Helvetica, Arial, sans-serif;color: #332828;line-height: 1.125;  /* WAR: 1.5;*/}

/* ===== TYPOGRAPHY ORIGINAL: */
h1 {font-size: clamp(2rem,3.5vw,2.75rem); line-height: 2.875rem;} /* font-size WAR: 2.5rem; line-hight WAR: 40px JETZT 46px=2.875rem; DURCH line-hight:40px WIRD NFB ENGER IN 3 ZEILEN GESETZT!!! WARUM??? */
h2 {font-size: clamp(1.7rem,2.3vw,2rem);}  /* font-size WAR: 2rem; */
h3 {font-size: clamp(1.3rem,2.1vw,1.5rem);} /* font-size WAR: 1.375rem; */
h4 {font-size: clamp(1.1rem,2vw,1.25rem);}	 /* font-size WAR: 1.125rem; */
h5 {font-size: 1rem;}		 /* font-size WAR: 1rem; */
h6 {font-size: 0.875rem;}
p, th, td  {font-size: 1.125rem;font-weight: 200;/* line-height: 1.125; <==== TESTEN OB 1.125REM OK IST!!! ja */}
li {font-size: 1.0125rem;}    		/* FRAGE: IST DIES HIER NOOTWENDIG???  */
a:link, a:visited{color:#6C0000; padding:0rem; border:1px solid #6C0000;text-decoration:none;display:inline-block;margin:5px;}
a:hover,a:focus{color:white;background-color:#6C0000;border:1px dotted #6C0000}	

.font-light {font-weight: 200; 		/* WAR: 300; */}
.font-regular {font-weight: 400;}	/* FRAGE: IST DIES HIER NOOTWENDIG??? WO WIRD DAS GEBRAUCHT??? */
.font-heavy {font-weight: 700;}		/* FRAGE: IST DIES HIER NOOTWENDIG??? WO WIRD DAS GEBRAUCHT???  */

.himmel {background-color: SkyBlue;}  /* 25.4.24: HINTERGRUNDFARBE FÜR KOPD & FUSS ===> OK!*/
.navi {font-size:1.5rem;}	/* FÜR GRÖßERE NAVI-PFEILE BEI BILDGALLERIEN */

/* ==== media NEU REIN ==== */
/* img {width: auto;height: auto;max-width: 100%;max-height: 100%;display: block;margin: auto; /*margin-left: auto;margin-right: auto;}*/ 
/* 24.4.24: TESTEN*/
img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
picture{margin: 0 auto;object-fit:contain;}
video{max-width:100%;}  /* ??????? */

/* ===== FÜR BILDER-GALLERIE ==== */
.img-container {float: none;width: 30%;padding: 1px;} /* <=== PRÜFEN ZU VERBESSERN: Bilder mittig setzen und responsive NOTWENIG?????*/
.clearfix::after {content: "";clear: both;display: table;}	/* <=== PRÜFEN ZU VERBESSERN: NOTWENIG?????*/

/* ===== alert ALLEIN SINNVOLL? AUSPROBIEREEN !!! <===  */
.alert{padding:10px 10px 10px 10px;margin-bottom:10px;background-color:LavenderBlush;/*#fcf8e3;*/border-radius:4px;}  /* <==== GGF. ÄNDERN, KOMMT SPÄTER ZUR ANWENDUNG */
.alert,.alert h4{color:#332828;}
.alert h4{margin:0;}	/* <=== SINNVOLL??? KW */
.alert-success{color:black;background-color:#e0f0d8;padding:10px 10px;border-radius:4px;}
.alert-success h3{color:black;text-align: center;}
.alert-danger{color:black;background-color:#f3dedf;padding:10px 10px;border-radius:4px;}
.alert-danger h3{color:black;text-align: center;}

/*=====  normale TABLES - BARRIEREFREI - */
table {width: 100%; height: 100%; border-collapse: collapse; cellspacing: 2px;cellpadding: 2px;}
table, td, th {border: 1px solid;}
th, td {text-align: left; }
th{background-color:white;}

/* =====POSITIONING */
.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;margin-left: auto;margin-right: auto;}
.justify {text-align: justify;}
.bild {height:74vh; margin:0px;} /* BEI EINZELBILDERN ERGIBT GRÖßERE HÖHE IN DER MITTE FÜR DAS BILD */

/* ==== GRID SYSTEM ==== */
.container {width: 90%;margin-left: auto;margin-right: auto;}
.row {position: relative;width: 100%;}
.row [class^="col"] {float: left;margin: 0.5rem 2%;min-height: 0.125rem;}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 {width: 96%;}

.col-1-sm {width: 4.33%;}
.col-2-sm {width: 12.66%;}
.col-3-sm {width: 21%;}
.col-4-sm {width: 29.33%;}
.col-5-sm {width: 37.66%;}
.col-6-sm {width: 46%;}
.col-7-sm {width: 54.33%;}
.col-8-sm {width: 62.66%;}
.col-9-sm {width: 71%;}
.col-10-sm {width: 79.33%;}
.col-11-sm {width: 87.66%;}
.col-12-sm {width: 96%;}
.row::after {content: "";display: table;clear: both;}
.hidden-sm {display: none;}

/* ===== SCREEN AB 536px und größer! */
@media only screen and (min-width: 33.75em) {.container {width: 85%;}}	

/* ===== SCREEN AB 720px und größer!  */
@media only screen and (min-width: 45em) {  /* 720px <====== TESTEN!!! container-width bleibt auf 85%!!! kein neues vorhanden */
  .col-1 {width: 4.33%;}
  .col-2 {width: 12.66%;}
  .col-3 {width: 21%;}
  .col-4 {width: 29.33%;}
  .col-5 {width: 37.66%;}
  .col-6 {width: 46%;}
  .col-7 {width: 54.33%;}
  .col-8 {width: 62.66%;}
  .col-9 {width: 71%;}
  .col-10 {width: 79.33%;}
  .col-11 {width: 87.66%;}
  .col-12 {width: 96%;}
  .hidden-sm {display: block;}
  .container {width: 75%;}
}

/* ===== SCREEN AB 960px UND GRÖßER <====== TESTEN!!! MUSS WAHRSCHEINLICH 1200px = ???rem WERDEN!!!???  */
@media only screen and (min-width: 60em) {.container {width: 60%;max-width: 60rem;}}		/* ??? container width war 75% ??? 	*/