/* #region FONTS*/

/* CINZEL (400) */
 @font-face {
   font-family: 'Cinzel';
   font-style: normal;
   font-weight: 400;
   src:  url("../fonts/Cinzel-Regular.ttf") format("truetype");
  }


/* Light (300) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/OpenSans-Light.ttf') format('truetype');
}

/* Regular (400) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/OpenSans-Regular.ttf') format('truetype');
}

/* Regular Italic (400) */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('../fonts/OpenSans-Italic.ttf') format('truetype');
}

/* Medium (500) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Open Sans Medium'), local('OpenSans-Medium'),
       url('../fonts/OpenSans-Medium.ttf') format('truetype');
}

/* Semi-Bold (600) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
}

/* Semi-Bold Italic (600) */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('../fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
}

/* Bold (700) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/OpenSans-Bold.ttf') format('truetype');
}

/* #endregion */
/* #region GRUNDGERUEST*/

* {margin: 0;
	padding: 0;
	border: 0;
	border:  none;
	font-size: 100%;
	font: inherit;
	box-sizing: border-box;
}

body {
	margin: 0 auto;
	margin-top: 0;
	padding-top: 0;
	font: normal 62.5%/160% 'Open Sans', sans-serif; 
	font-weight: 400;
    font-size: 1rem;
    color: #222;
    background: linear-gradient(
            to bottom right,
            #e6f4c8,  /* Rot, 75 % Deckkraft */
            #b5eaea,  /* Grün, 75 % Deckkraft */
            #fff4cc   /* Blau, 75 % Deckkraft */
            );
}

main {
	height: 100%;
	margin: 0 auto;
}

.sr-only{
position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* #endregion */
/* #region FARBEN*/

.font-color-normal {
    color: #222;
}

.bg-color-header {
    color: #d43d4f;
}

.bg-color-darkteal {
    background-color: #45566e;
    color: #fff;
}

.bg-color-lightbeige {
    color: #ebddc6;
}

.color1{
    color: #e6f4c8;
}

.color2{
    color: #d3f4e0;
}

.color3{
    color: #b5eaea;
}

.color4{
    color: #dceeff;
}

.color5{
    color: #e5daf3;
}

.color6{
    color: #ffd6b0;
}

.color7{
    color: #fff4cc;
}

.color8{
    color: #e5daf3;
}

.color9{
    color: #FFF7DC;
}

.div01-d__btn-color1 { 
	background-color: rgba(230, 244, 200, 0.6);
}
.div01-d__btn-color1:hover { 
	box-shadow: 0px 0px 0px #000;
}

.div01-d__btn-color2 { 
	background-color: #d3f4e0;
	box-shadow: 0px 2px 3px #000;
}
.div01-d__btn-color2:hover { 
	box-shadow: 0px 0px 0px #000;

}

.div01-d__btn-color3 { 
	background-color: #b5eaea;
	box-shadow: 0px 2px 3px #000;
}
.div01-d__btn-color3:hover { 
	box-shadow: 0px 0px 0px #000;
}

.div01-d__btn-color4 { 
	background-color: #dceeff;
	box-shadow: 0px 2px 3px #000;
}
.div01-d__btn-color4:hover { 
	box-shadow: 0px 0px 0px #000;
}

.div01-d__btn-color5 { 
	background-color: #e5daf3;
	box-shadow: 0px 2px 3px #000;
}
.div01-d__btn-color5:hover { 
	box-shadow: 0px 0px 0px #000;
}

.div01-d__btn-color6 { 
	background-color: #ffd6b0;
	box-shadow: 0px 2px 3px #000;
}
.div01-d__btn-color6:hover { 
	box-shadow: 0px 0px 0px #000;
}
.div01-d__btn-color7 { 
	background-color: #fff4cc;
	box-shadow: 0px 2px 3px #000;
}
.div01-d__btn-color7:hover { 
	box-shadow: 0px 0px 0px #000;
}

.div01-d__btn-color8 { 
	background-color: #e5daf3;
	box-shadow: 0px 2px 3px #000;
}
.div01-d__btn-color8:hover { 
	box-shadow: 0px 0px 0px #000;
}

.div01-d__btn-color9 { 
	background-color: #FFF7DC;
	box-shadow: 0px 2px 3px #000;
}
.div01-d__btn-color9:hover { 
	box-shadow: 0px 0px 0px #000;
}

.bg-purpleblue {
	background: linear-gradient(to bottom, #e5daf3, #fff7dc);
}

.bg-bluepurple {
	background: linear-gradient(to bottom, #fff7dc, #e5daf3);
}

.bg-redorange {
	background: linear-gradient(to bottom, #b5eaea, #ffd6b0);
}

.bg-orangebluegreengreen {
	background: linear-gradient(to right, #ffd6b0, #b5eaea, #d3f4e0, #e6f4c8);
}

.bg-purpleredblue {
	background: linear-gradient(to right, #e5daf3, #b5eaea, #fff7dc);
}

.bg-purpleredorange {
	background: linear-gradient(to right, #e5daf3, #b5eaea, #ffd6b0);
}

.bg-blueredorange {
	background: linear-gradient(to right, #fff7dc, #b5eaea, #ffd6b0);
}

.bg-purplebluered {
	background: linear-gradient(to right, #e5daf3, #fff7dc, #b5eaea);
}

.header-bg-teal {
	background: linear-gradient(to bottom, #9ed1dc, #2cb4cb);
}

.header-bg-lightgreen {
	background: linear-gradient(to bottom, #dbf8af, #b8f757);
}

.header-bg-lightyellow {
	background: linear-gradient(to bottom, #fcf7c4, #e9ca03);
}

.header-bg-blue {
	background: linear-gradient(to right, #c1dfb3, #b8f657, #89d965);
}



/* #endregion */
/* #region HEADER*/

    .headertoggle {
        position: absolute;   
        top: 0;
        right: 0;
        width: 100%;
    }    

    .header-wrapper-mobile {
        display: inline-block;
        z-index: 1000;
    }

    .header-wrapper-desktop {
        display: none;
    }

    .header-box {
        position: relative;
        height: 120px;
        margin: auto;
        width: 100%;
        padding: 60px 10px 10px 10px;
        box-shadow: none;
        display: flex;  
        flex-wrap: wrap;
        align-items: top;
        justify-content: center;
        text-align: center;
        background: rgba(190, 53, 69, 1);
        backdrop-filter: blur(10px);  

    }

    .header-schoolname-heading {
        color: white;
        font-size: 8vw;
        font-variant: small-caps;
        font-family: Cinzel;
        letter-spacing: 0.1rem;
    }

    .header-schoolname-link {
        text-decoration: none;
    }

    .header-box-img {
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 5px;
        width: 100%;
        height: 55px;
        text-align: center;
        background: rgba(190, 53, 69, 0.9);
    }

    .header-box-img img {
        width: 50px;
        height: 50px;
    }

    .header-schoolname-subheading {
        width: 100%;
        padding-left: 2px;
        letter-spacing: normal;
        color: white;
        font-size: 0.7rem;
    }

    .header-mosaik {
        position: fixed; 
        top: 0; 
        left: 0; 
        z-index: 9999;
        height: 4px;
        content: "";
        display: block;
        width: 100%;
        background-image: url('../images/bg/grundschule-emil-von-behring-mosaik_small_2025-double.png');
        background-repeat: repeat-x;
        margin: 0;
    }

    .header-mosaik-768-2 {
        content: "";
        display: block;
        height: 4px;
        width: 100%;
        background-image: url('../images/bg/grundschule-emil-von-behring-mosaik_small_2025-double.png');
        background-repeat: repeat-x;
        margin: 0;
    }

/* #endregion */
/* #region NAVIGATION*/

/*  Die nächsten beiden classen sind nur dafür da um 
abzusichern, dass das menü beim Start geschlossen ist.*/


.header-wrapper-mobile {
	position: relative;
	top: 10px;
	right: 10px;
	display: block;
	width: 40px;
	height: 40px;
    z-index: 999;
}

.menuebtn {
	border: none;
    cursor: pointer;
	height: 36px;
	width: 36px;
	text-align: center;
    color: white;
    background: rgba(190, 53, 69, 0.9);
}

.dropdown-content {
  visibility: hidden;
  position: fixed;
  top: 55px;
  right: -280px;
  height: auto;
  width: 280px;
  border-radius: 12px 0 0 12px;
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX();
  transition: transform 1s ease-in-out;
  z-index: 999;
}

#myDropdown.open {
  transform: translateX(-100%);
}

.dropdown-content.open {
  visibility: visible;
}


/* Seite darunter sperren, solange das Menü offen ist */
/* body.nav-open {
  overflow: hidden;
} */

#myDropdown ul{
	width: 80%;
    margin: 10%;
    padding: 5px 0 5px 0;
    list-style: none;
    border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 3px 5px 10px #333;
}

#myDropdown li{
    padding: 0 0 5px 3px;
    margin: 10px;
    border-bottom: 2px solid #fff;
}

.dropdown-content a {
    display: block;
    width: 100%;
    color: #000;
    padding: 1px;
    font-weight: 300;
    text-decoration: none;
    font-variant: small-caps;
	font-size: 1.1rem;
	letter-spacing: 0.1rem;
	text-align: left;
}

#myDropdown li:last-child {
  border-bottom: none;
}
.iamhere{
    color: #ba3545;
    font-variant: normal;
    font-weight: 600;
}

.dropdown-content a:hover { 
    color: #d43d4f;
    text-decoration: underline;
    }   
.dropdown-content a:active {
    color: #565656;
    }
.dropdown-content a:visited {
    color: #565656;
    }
.dropdown-content a:focus {
    outline: none; 
    box-shadow: 0 0 0 3px rgba(58, 58, 59, 0.5); 
    border-radius: 2px;
    } 

.show {display: block;}

/* #endregion */
/* #region SLIDESHOW*/

.start_flexcontainer-startframe {
	width: 100%;
	margin: auto;
	height: auto;
    padding-top: 120px;
}

.slideshow-box {
    display: none;
}

.slideshow-box-900 { 
    display: none;
}

.slideshow-box-480 { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    margin: auto; 
}

/* #endregion */
/* #region PFEIL*/
.div20__pfeil {
    position: absolute;
	margin: 0 auto;
    left: 48%;
	width: 30px;
	height: 1px;
	text-align: center;
}

.div20__pfeil a {
  color: rgba(190, 53, 69, 0.9); 
  font-size: 1.4rem;
  text-shadow: 2px 2px 6px #999;
  text-decoration: none;
  transition: all 0.3s ease;
}

.div20__pfeil a:hover {
  color: #a8232f;
}

.div20__pfeil a:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(190, 53, 69, 0.5);
  border-radius: 4px;
}

.div20__pfeil a:active {
  color: #722029;
  transform: scale(0.97);
}



/* #endregion */
/* #region TERMINEUNDNEWSCONTAINER*/
.start_flexcontainer-termineundnewscontainer {
	width: 100%;
	margin: 12px auto;
	height: auto;
	
	display: flex;   
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-content: flex-start;
}
/* #endregion */
/* #region MOSAIKEN*/

.new_mosaikbox {
	width: 100%;
	height: 30px;
	margin: 16px auto 20px auto;
	overflow: hidden;
	background-image: url('../images/bg/grundschule-emil-von-behring-mosaik_small_2020.png');
	background-repeat: repeat-x;	
	background-position: 20px;
	
	display: flex;   
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
}

.new_mosaikbox-line {
    height: 30px; 
    margin: auto; 
    padding: 0 20px 0 20px; 
    background-color: #fff;
    border-radius: 40%;
}

.mosaiktext {
	background-color: #fff;
	min-width: 200px;
	text-align: center;
	margin: -30px auto;
}

.new_mosaikbox-newsline {
	width: 80%;
    max-width: 400px;
	height: 30px;
	margin: 6px auto 20px auto;
	overflow: hidden;
	background-image: url('../images/bg/grundschule-emil-von-behring-mosaik_small_2025.png');
	background-repeat: repeat-x;	
	background-position: 20px;
	
	display: flex;   
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
}


.g {color: #660015; font-size: 1.5rem; font-family: 'Cinzel', serif; }
.e {color: #f62511; font-size: 1.4rem; font-family: 'Times New Roman'; }
.u {color: #a6af6c; font-size: 1rem; font-weight: bolder;}
.n {color: #44b8c5; font-size: 1.1rem; font-family: 'Open+Sans+Condensed:300'; font-size: 14pt; }
.i {color: #ffc700; font-size: 1.3rem; font-family: Verdana; font-weight: lighter;}
.k {color: #496187; font-size: 1.2rem; font-variant: small-caps;}
.s {color: #f62511; font-size: 1.1rem; font-weight: 600; }
.r {color: #d55331; font-size: 1.2rem; font-variant: small-caps;}
.l {color: #b00400; font-size: 1.3rem; font-weight: 400; }
.h {color: #fc780b; font-size: 1.6rem; }
.b {color: #13161b; font-size: 1.5rem; font-family: Helvetica; font-variant: small-caps;}
.t {color: #a3ae6a; font-size: 1.4rem; font-family: Lora; }
.o {color: #465514; font-size: 1.2rem; font-family: 'Open+Sans+Condensed:300'; }


/* #endregion */
/* #region TERMINSPALTE UND NEWSSPALTE*/
.start_flexcontainer-terminspalte {
	width: 90%;
	margin: 20px auto;
	height: auto;
    border-radius: 6px;
	padding-right: 6px; 
	margin-bottom: 20px;
    background-color: white;

	flex-direction: row;  
	flex-wrap: wrap;
	justify-content: center;
	align-self: flex-start;
}

.start_flexcontainer-terminspaltebox {
	width: 100%;
    margin: auto;
}

.news_terminsinglebox {
	width: 100%;
	height: auto;
	padding: 0;
	margin-top: 20px;
	margin-bottom: 20px;
}

.news_kalender table {
	max-width: 100%;
	height: auto;
	border-collapse: collapse;
}

.news_kalender td {
	padding: 8px;
	vertical-align: top;
}

.times {
	font-weight: 600;
	font-family: 'Cinzel', serif;
	text-align: right;
	letter-spacing: 1pt;
}

.times-info {
	width: 90px; 
	padding-bottom: 10px; 
	padding-right: 16px;
    text-align: right;
}

.index-main-newsitem-textitem-newstext-buttonline {
	width: 100%;
	height: auto;
	text-align: center;
    margin-top: 30px; 
    font-size: 1.2rem; 
    font-weight: 600;
}

.index-main-newsitem-textcontainer-button {
    background-color: white;
}

#scrollcontainer_termine {
	width: 100%;
	display: none;
	padding: 0;
	margin-top: -30px;
}

.start_flexcontainer-newsspalte {
	width: 90%;
	margin: 10px auto;
	height: auto;
	padding-top: 20px; 
    background-color: white;
    border-radius: 6px;
	display: flex;   
    flex-wrap: wrap;
	flex-direction: column; 
	align-items: flex-start;
	justify-content: center;
}

.start_newsbox-textbox {
	width: 100%;
    max-width: 400px; 
	height: auto;
    margin: 20px auto;
	border-top: 1px solid #333;
	overflow: hidden;
	transition: all 0.6s;
}

.start_newsbox-textbox:hover {
	box-shadow: 0px 1px 2px #999;
}

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

.img_grow {
	transform-origin: center center;
	transition: all 1.6s ease-out;
}

.img_grow:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
    filter: brightness(1.1);
}

.title_new {
	padding: 6px;
	font-weight: 500;
	min-height: 30px; 
	margin-top: 10px;
	color: #222;
	font-size: 1.2rem;
	line-height: 120%;
	font-variant: small-caps;
	letter-spacing: 1pt;
}

.text_new {
	padding: 6px;
}

/* #endregion */
/* #region INDEX ARCHIV UNTEN*/

.start_flexcontainer-archiv {
	width: 90%;
    background-color: #efefef;
	margin: 30px auto 30px auto;
	height: auto;
	padding-top: 20px;	
    border-radius: 0.5rem;
    display: flex;
	flex-wrap: wrap;
	flex-direction: row;  
    justify-content: center;
}

.start_flexcontainer-archiv a {
	color: #222;
	text-decoration: none;
}

.start_newsbox-archivbox {
	width: 240px; 
	height: auto;
    margin: 20px;
    min-height: 260px;
    border-radius: 6px;
	overflow: hidden;
	padding: 0;
	text-align: center;
	background-color: white;
	transition: all 0.6s;
}

.img_archiv {
	width: 240px;
	height: auto;
	overflow: hidden;
}

/* #endregion */
/* #region FOOTER*/

footer {
    padding: 1rem;
    padding-bottom: 60px;
    border-top: 2px solid #ccc;
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
}

.footer-links {
    list-style: none;
    margin: 0 auto;
    padding: 5px;
    display: flex;
    flex-wrap: wrap; /* Standard: darf umbrechen */
    flex-direction: column;
    justify-content: center;
}

.footer a {
    color: #222;            
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.footer-links a:link { color: #222; }
.footer-links a:visited { color: #555; }
.footer-links a:hover { color: #000; text-decoration: underline; }
.footer-links a:focus { outline: 2px solid #004080; outline-offset: 2px; }
.footer-links a:active { color: #c00; text-decoration: underline; }


/* #endregion */
/* #region PROJEKTSEITE*/

.projekte_main {
	width: 100%;
	margin: auto;
	height: auto; 
}

.projekte_containerbox {
	height: auto;
    margin: 30px auto 20px auto;
    background: rgba(255, 255, 255, .4);
}

.projekte_flex-item {
	min-height: 200px;
	width: 100%;
	border: 0;
	display: flex;   
	flex-direction: row;
	flex-wrap: wrap;
}

.projekte_header {
	max-width: 570px; 
	padding: 20px;
    margin: auto;
    margin-top: 120px;
}

.projekte_h1 {
	width: 100%;
	font-size: 1.2rem;; 
	letter-spacing: 0.1em;
	font-weight: 600;
	line-height: 160%;
    margin-bottom: 30px;
}

.projekte_h2 {
	height: auto;
	font-variant: small-caps;
	letter-spacing: 0.05em;
	color: #666;
}

.projekte_text {
	width: 100%;
	height: auto;
	line-height: 160%;
	letter-spacing: 0.05em;
}

.projekte_flex-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.projekte_figure-onbox {
	width: 300px;
    height: 300px;
	overflow: hidden;
	margin: 8px auto 8px auto;
    text-align: center;
    box-shadow: 3px 3px 5px rgb(1, 52, 53);
}

.projekte_figure-onbox img {
	width: 300px;
    height: 300px;
	text-align: center;
    overflow: hidden;
	object-fit: cover;
	object-position: 5%;
    border: 6px solid white;
}

.projekte_figure-onbox a {
	text-decoration: none;
}

.projekte_figure-onbox a:hover {
	box-shadow: 1px 1px 1px #999;
	border: 1px solid #999;
}

/* #endregion */
/* #region INFOS*/

    .infos_mainbox {
        width: 100%; 
        margin: 130px auto 20px auto;
        height: auto;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }

    .tierchen-large {
        display: none;
    }
        
    .tierchen {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        padding: 10px 0 0 100px;
        font-weight: 600;
        font-size: 1.4rem;
        color: #d43d4f;
        font-variant: small-caps;
        background-image: url('../images/bg/mosaikschmetterlinge-2025.png');
        background-repeat: no-repeat;
        background-size: contain;
    }

    .infos_flexitem-first {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .infos_flexitem-first section {
        width: 100%;
        margin: 15px auto;
        padding: 10px;
        border-radius: 6px;
        background-color: white;
    }

    .infos_flexitem-first h2, .infos_flexitem-second h2 {
        font-weight: 600;
        padding: 0 0 12px 0;
    }

    .infos_flexitem-first ul {
        list-style-type: disc;
        list-style-position: outsite;
        padding-left: 10%;
    }

    .infos_flexitem-first li {
        padding-bottom: 10px;
    }

    .infos-smallerbox {
        max-width: 450px;
        margin: auto;
        text-align: center;
    }

    .download-info {
        font-style: italic;
        font-size: 0.8rem;
        line-height: 100%;
    }

    .table-figure{ margin: 0; }
    .table-figure > figcaption{ margin: .25rem 0 .5rem; color: var(--muted); font-size: 1rem; }
    .table-scroller{
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    }
    .table-scroller:focus{
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: calc(var(--radius) + 3px);
    }

    table.stundenplan{
    width: 100%;
    max-width: 400px;
    margin: auto;
    border-collapse: separate;
    border-spacing: 10px;
    }
    .stundenplan thead th{
    text-align: left;
    font-weight: 700;
    }
    .stundenplan tbody th[scope="row"],
    .stundenplan tbody td{
    border-bottom: 1px solid #999;
    padding: 10px;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    }

    ul.infos--ferien {
        list-style: none;
        text-align: center;
        padding: 0;
    }

    ul.infos-gottesdienste {
        list-style: none;
        text-align: center;
        padding: 0;
    }

    .infos_flexitem-second {
        max-width: 90%;
        background-color: white;
        border-radius: 0.5rem;
        margin: auto;
    }

    .infos_flexitem-second .table {
    table-layout: auto;
    max-width: 100%;
    }

    .abc-wrap { 
        padding: 6px;
    }


    .abc-list{ 
        list-style:none; 
        margin:0; 
        padding:0; 
        display:grid; 
    }

    .abc-item{
    font-size: 0.9rem; 
    display:flex; 
    align-items:flex-start; 
    gap: 0.1rem;
    padding-top: 10px
    }

    .abc-letter{
    max-height:60px; 
    width: auto; 
    flex:0 0 auto; 
    object-fit:fill;
    }

    .abc-content{ 
        flex:1 1 auto; 
        min-width:0; 
    }
    .abc-content p { 
        margin:.5rem 0; 
        line-height:1.5;
    }

    .abc-content a{ color:var(--accent); text-decoration: underline; }
    .strong{ font-weight:600; }
    .nested-list{ margin:.1rem 0 0 0; padding-inline-start:0.8rem; }
    .nested-list li{ margin:.1rem 0; }
    .nested-head{ list-style:none; font-weight:700; margin-top:.4rem; }
    .abc-item:focus-within{ outline:3px solid #1d4ed8; outline-offset:2px; border-radius:calc(var(--radius) + 2px); }



    .infos_flex-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .infos_figure-onbox {
        width: 120px;
        height: 120px;
        overflow: hidden;
        margin: 2px auto 2px auto;
        text-align: center;
        box-shadow: 2px 2px 3px rgb(92, 95, 95);
    }

    .infos_figure-onbox img {
        width: 120px;
        height: 120px;
        text-align: center;
        overflow: hidden;
        object-fit: cover;
        object-position: 5%;
        border: 2px solid white;
    }

    .infos_figure-onbox a {
        text-decoration: none;
    }

    .infos_figure-onbox a:hover {
        box-shadow: 1px 1px 1px #999;
        border: 1px solid #999;
    }

/* #endregion */
/* #region KLASSEN*/
    .klassen_mainbox {
        width: 100%; 
        margin: 130px auto 20px auto;
        height: auto;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }

    .klassen_containersection {
        margin: auto;
        height: auto;
        padding: 10px;
        text-align: justify;
        margin: 10px; 
        
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .klassen_containersection section {
        width: 100%;	
        margin: auto;
        height: auto;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
    }

    .klassen__containerbox {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        background-color: white;
        border-radius: 0.5rem;
        
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .klassen__containerbox-klassenbox {
        width: 90%;
        margin: 10px;
        height: auto;
        background-color: #fff;
        padding: 10px;
        border: 2px solid #ccc;
        -webkit-transform: all 0.6s;
        transform: all 0.6s
    }

    .klassen__containerbox-klassenbox a {
        width: 100%;
        text-align: center;
        color: #18677c;
        text-decoration: none;
    }

    .klassen__containerbox-klassenbox a:hover {
        text-decoration: underline;
        color: #18677c;
    }

    .klassen__containerbox-img {
        width: 100%;
        height: auto;
        margin: 0 0 6px 0;
        text-decoration: none;
    }

    .klassen_division a {
        width: 100%;
        height: auto;
        text-decoration: none;
        -webkit-transform: all 0.6s;
        transform: all 0.6s
    }

    .klassen_division a:hover {
        text-decoration: underline;
    }

   .klassenbox-smalltitle {
    font-size: 0.8rem;
    color: #555;
    font-style: italic;
   }


/* #endregion */
/* #region SCHULGEMEINSCHAFT Wir*/

    .schulgemeinschaft_mainbox {
        width: 100%; 
        margin: 130px auto 20px auto;
        height: auto;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }

    .schulgemeinschaft_containerbox {
        width: 100%; 
        height: auto;
        min-height: 100px;
        padding: 2px;
        margin: 20px auto;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }

    .schulgemeinschaft_flexitem-first {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .schulgemeinschaft_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
            border-radius: 0.5rem;
            background-color: white;
        }

    .schulgemeinschaft_flexitem-second {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .schulgemeinschaft_flexitem-second section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
            border-radius: 0.5rem;
            background-color: white;
        }

    .schulgemeinschaft_flexitem-alone {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .schulgemeinschaft_flexitem-alone section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
            border-radius: 0.5rem;
            background-color: white;
        }

    .small-hidden {
        margin-top: -50px;
        font-size: 1rem;
    }

    .small-hidden-sekretariat {
        display: none;
    }

    .schulgemeinschaft_containerbox figure {
        text-align: center;
        margin: auto;
        margin: 15px auto 15px auto;
    }

    .schulgemeinschaft_containerbox figcaption {
        text-align: center;
        margin: auto;
    }

    .schulgemeinschaft_containerbox p {
        text-align: left;
        margin: 10px;
    }

    .schulgemeinschaft_linkbox {
        padding: 20px; 
        background-color: #efefef; 
        box-shadow: 2px 3px 5px #999;
    }
    
    .schulgemeinschaft-angestelltenbox {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .schulgemeinschaft-img-small {
        width: 90%;
        max-width: 350px;
        height: auto;
        margin: auto;
        text-decoration: none;
    }
    
    .schulgemeinschaft-img-large {
        width: 100%;
        height: auto;
        margin: 0 0 6px 0;
        text-decoration: none;
    }


    .eindrittel {
        width: 100%;
    }

    .zweidrittel {
        width: 100%;
    }


/* #endregion */
/* #region SOZIALES LERNEN*/
    .soziales_mainbox {
        width: 100%; 
        margin: 130px auto 20px auto;
        height: auto;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }
    

    .soziales_containerbox {
        width: 100%; 
        height: auto;
        min-height: 100px;
        padding: 2px;
        border-radius: 0.5rem;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }

    .soziales_flexitem-first {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .soziales_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
            border-radius: 0.5rem;
            background-color: white;
        }

    .soziales_flexitem-second {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .soziales_flexitem-second section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
            border-radius: 0.5rem;
            background-color: white;
        }
    

    .soziales_containerbox p {
        text-align: left;
        margin: 10px;
    }

    .teamgeister--img {
        width: 100%;
        max-width: 400px; 
        margin: 10px auto 10px auto;
        height: auto; 
        box-shadow: 4px 4px 9px #999;
        border: 0;
    }

    .floating-left {
        float: none;
    }

    .floating-right {
        float: none;
    }




/* #endregion */
/* #region ZIELE*/
    .ziele_mainbox {
        width: 100%; 
        margin: 130px auto 20px auto;
        height: auto;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
    }

    .ziele_containerbox {
        width: 100%; 
        height: auto;
        min-height: 100px;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }

    .ziele_flexitem-first {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .ziele_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

    .ziele_flexitem-second {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .ziele_flexitem-second section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

/* #endregion */
/* #region OGS*/
    .ogs_mainbox {
        width: 100%; 
        margin: 130px auto 20px auto;
        height: auto;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
    }    
    
    .ogs_mainbox {
        width: 100%;
        height: auto;
        margin: 140px auto 20px auto;
        padding: 0 auto;
    }

    .ogs_containerbox {
        width: 100%; 
        height: auto;
        min-height: 100px;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }

    .ogs_flexitem-first {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .ogs_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

    .ogs_flexitem-first img, .ogs_flexitem-second img  {
        width: 100%;
    }

    .ogs_flexitem-second {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .ogs_flexitem-second section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

     /* Überschriften */
    .ogs_flexitem-first h1, .ogs_flexitem-first h2, .ogs_flexitem-first h3 {
    line-height: 1.3;
    font-weight: 600;
    color: #111;
    }

    .ogs_flexitem-first h1, .ogs_flexitem-second h1 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    }

    .ogs_flexitem-first h2, .ogs_flexitem-second h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    }

    .ogs_flexitem-first h3, .ogs_flexitem-second h3 {
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    }

    strong { font-weight:600; }

    /* Links */
    .ogs_flexitem-first a, .ogs_flexitem-second a {
    color: #0645ad;
    text-decoration: underline;
    }

    .ogs_flexitem-first a:focus,
    .ogs_flexitem-first a:hover {
    color: #0b0080;
    outline: 2px solid #0b0080;
    outline-offset: 2px;
    }

    /* Abstände zwischen Abschnitten */
    .ogs_flexitem-first section, .ogs_flexitem-second section {
    padding-bottom: 1rem;
    border-bottom: 1px solid #ccc;
    }

    .ogs_flexitem-first section:last-of-type, .ogs_flexitem-second section:last-of-type {
    border-bottom: none;
    }
  
    .ogs-list {
        border: 2px solid var(--border);
        border-radius: 0.5rem;
        padding: 1rem;
        background-color: var(--bg-card);
    }
    .ogs-list > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.75rem;
    }
    .ogs-list li {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin: 5px;
    }
    .ogs-list li strong {
        display: inline-block;
        min-width: 12rem;
    }

    /* Typografie für Absätze */
    .lead { margin: 0.5rem 0 1rem; }
    



/* #endregion */
/* #region KIDSZONE*/
.kidszone_mainbox {
	width: 100%; 
	margin: 130px auto 20px auto;
	height: auto;
	padding: 2px;
	display: flex;   
	flex-wrap: wrap;
    flex-direction: column;
	justify-content: center;
    }

    .kidszone_containerbox {
        width: 100%; 
        height: auto;
        min-height: 100px;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }

    .kidszone_flexitem-first {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .kidszone_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

    .kidszone_flexitem-second {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .kidszone_flexitem-second section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }
    
    .linkblock {
	width: 240px;
	height: 300px;
	overflow: hidden;
	margin: 20px;
	padding: 10px;
	border: 0;
	float: left;
	box-shadow: 0px 3px 5px #999;
    }

    .linkblock img {
        margin: auto;
    }

    .spielelink a {
        text-align: center;
        margin: auto;
        margin: 20px;
    }



/* #endregion */
/* #region KONTAKT*/
    .kontakt_mainbox {
        width: 100%;
        height: auto;
        margin: 130px auto 20px auto;
        padding: 0 auto;
    }

    .kontakt_containerbox {
        width: 100%; 
        height: auto;
        min-height: 100px;
        padding: 2px;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        }

    .kontakt_flexitem-first {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .kontakt_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
            background-color: white;
            border-radius: 0.5rem;
        }

    .kontakt_flexitem-second {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .kontakt_flexitem-second section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
            background-color: white;
            border-radius: 0.5rem;
        }

    .kontakt_flexitem-second img {
        width: 90%;
        height: auto;
    }
    /* Überschriften */
    .kontakt_flexitem-first h1, .kontakt_flexitem-first h2, .kontakt_flexitem-firsth3 {
    line-height: 1.3;
    font-weight: 600;
    color: #111;
    }

    .kontakt_flexitem-first h1, .kontakt_flexitem-second h1 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    }

    .kontakt_flexitem-first h2, .kontakt_flexitem-second h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    }

    .kontakt_flexitem-first h3, .kontakt_flexitem-second h3 {
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    }

    strong { font-weight:600; }

    /* Links */
    .kontakt_flexitem-first a, .kontakt_flexitem-second a {
    color: #0645ad;
    text-decoration: underline;
    }

    .kontakt_flexitem-first a:focus,
    .kontakt_flexitem-first a:hover {
    color: #0b0080;
    outline: 2px solid #0b0080;
    outline-offset: 2px;
    }

    /* Abstände zwischen Abschnitten */
    .kontakt_flexitem-first section, .kontakt_flexitem-second section {
    padding-bottom: 1rem;
    border-bottom: 1px solid #ccc;
    }

    .kontakt_flexitem-first section:last-of-type, .kontakt_flexitem-second section:last-of-type {
    border-bottom: none;
    }
  
    .kontakt--impress {
        border: 2px solid var(--border);
        border-radius: 0.5rem;
        padding: 1rem;
        background-color: var(--bg-card);
    }
    .kontakt--impress > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.75rem;
    }
    .kontakt--impress li {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin: 5px;
    }
    .kontakt--impress li strong {
        display: inline-block;
        min-width: 12rem;
    }

    /* Typografie für Absätze */
    .lead { margin: 0.5rem 0 1rem; }
    

/* #endregion */







@media (min-width: 576px) {

/* #region 576 INDEX */
    .header-schoolname-heading {
        color: white;
        font-size: 5vw;
    }

    .header-schoolname-subheading {
        letter-spacing: 0.05rem;
        font-size: 1rem;
    }

    .slideshow-box {
        display: none;
    }

    .slideshow-box-900 { 
        display: block; 
        max-width: 100%; 
        height: auto; 
        margin: auto; 
    }

    .slideshow-box-480 { 
        display: none;
    }

    .start_flexcontainer-terminspaltebox {
	width: 100%;
    margin: auto;
    }

    .projekte_flex-container {
        margin: 0;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .projekte_figure-onbox {
        width: 250px;
        height: 250px;
        margin: 10px;
    }

    .projekte_figure-onbox img {
        width: 250px;
        height: 250px;
    }

    /* #endregion */
/* #region 576 INFOS */

    .infos_mainbox {
	width: 100%; 
	margin: 110px auto 20px auto;
	height: auto;
	padding: 20px;
	display: flex;   
	flex-wrap: wrap;
    flex-direction: column;
	justify-content: center;
    }

    .abc-wrap h2 { 
        font-size: 1.4rem; 
        margin:0 0 .5rem; 
    }

    .abc-item{
    font-size: 1rem; 
    display:flex; 
    align-items:flex-start; 
    gap: 0.5rem;
    padding-top: 10px
    }

    .abc-letter{
    max-height:90px; 
    width: auto; 
    flex:0 0 auto; 
    object-fit:fill;
    }


/* #endregion */
/* #region 576 KLASSEN */

    .klassen_containersection {
        padding: 30px;
        text-align: justify;
    }
    


/* #endregion */
/* #region 576 SCHULGEMEINSCHAFT Wir */

    
    .schulgemeinschaft_mainbox {
        margin: 0 auto 20px auto;
        padding-top: 130px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }



    .schulgemeinschaft_containerbox {
        width: 100%; 
        height: auto;
        min-height: 100px;
        padding: 2px;
        margin: 20px auto;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: row;
        align-items: start;
        justify-content: center;
        }

    .schulgemeinschaft_flexitem-first {
        width: 48%;
        margin: 0 auto;
    }

    .schulgemeinschaft_flexitem-first section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
    }

    .schulgemeinschaft_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .schulgemeinschaft_flexitem-second section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
    }
    
    .schulgemeinschaft-angestelltenbox {
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }


    .flex-grow-1 {
        flex-grow: 1;
        max-width: 400px;
    }

    .flex-grow-2 {
        flex-grow: 2;
        max-width: 400px;
    }

    .small-hidden {
        display: none;
    }

/* #endregion */
/* #region 576 SOZIALES LERNEN */

    .soziales_flexitem-first section, .soziales_flexitem-second section {
            width: 100%;
            margin: 20px auto;
            padding: 20px;
        }

/* #endregion */
/* #region 576 ZIELE */

    .ziele_flexitem-first section, .ziele_flexitem-second section {
            width: 100%;
            margin: 20px auto;
            padding: 20px;
        }


    .teamgeister--img {
        width: 100%;
        max-width: 260px; 
        box-shadow: 4px 4px 9px #999;
        border: 0;
    }

    .teamgeister_verticalheightstop {
        max-height: 300px;
        width: auto;
    }

    .floating-left {
        float: left;
        margin: 10px 10px 10px 0;
    }

    .floating-right {
        float: right;
        margin: 10px 0 10px 10px;
    }

/* #endregion */
/* #region 576 OGS */


    .ogs_flexitem-first section, .ogs_flexitem-second section {
            width: 100%;
            margin: 20px auto;
            padding: 20px;
        }

/* #endregion */
/* #region 576 KIDSZONE */

    .kidszone_flexitem-first section, .kidszone_flexitem-second section {
            width: 100%;
            margin: 20px auto;
            padding: 20px;
        }

/* #endregion */
/* #region 576 KONTAKT */

    .kontakt_flexitem-first section, .kontakt_flexitem-second section {
            width: 100%;
            margin: 20px auto;
            padding: 20px;
        }

/* #endregion */





}	
@media (min-width: 768px) {

/* #region 768 INDEX HEADER */

    .headertoggle {
	position: fixed; 
	z-index: 999; 
	width: 100%;
    }

    .header-wrapper-mobile {
        display: none;
    }

    .header-wrapper-desktop {
        display: block;
    }

    .header-mosaik {
        display: none;
    }

    .header-mosaik-large {
        position: fixed;
        bottom: -0;
        height: 40px;
        width: 100%;
        background-image: url('../images/bg/mosaikfischegalerie-2025.webp');
        background-repeat: repeat-x;
        background-position: top bottom;
        background-size:35%;
        z-index: 999;
    }

    header {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
	    height: 140px;
     }

    .header-box {
        height: 90px;
        margin: -10px auto;
        width: 96%;
        max-width: 1000px;
        text-align: center;
        padding: 0; 
        background: rgba(190, 53, 69, 0.9);
        border-radius: 6px 6px 0 0;
        backdrop-filter: blur(10px);       
    }

    .header-schoolname-link {
        text-decoration: none;
        color: #fff;
    }

    .header-box-img {
        position: relative;
        top: -75px;
        left: 60px;
        width: 80px;
        height: auto;
    }

    .header-box-img img{
        height: 70px;
        width: auto;
        float: left;
    }
    
    .header-schoolname-heading {
        padding-top: 6px;
        line-height: 100%;
        text-decoration: none;
        letter-spacing: 3px;
        color: #fff;
        font-family: 'Cinzel', serif;
        font-size: 2.6rem;
    }

    .header-schoolname-subheading {
        font-family: 'Open Sans', sans-serif;
        font-size: 0.9rem;
        font-weight: 200;
        letter-spacing: 0.05rem;
        color: #fff;
        text-align: right;
    }

/* #endregion */
/* #region 768 INDEX HEADER NAVIGATIONSLEISTE  */

     .div01_nav-box {
        position: relative;
        top: 5px;
        left: 0;
        width: 96%;
        max-width: 1000px;
        height: 30px;
        margin: 0 20px;        
        border-radius: 0 0 6px 6px;
        backdrop-filter: blur(10px);    
        background-color: rgba(255, 255, 255, 0.9);
        
    }

    .div01_nav {
        position: absolute;
        top: 0;
        list-style: none;
        padding-top: 4px;
        width: 100%;
        max-width: 1000px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .div01__btn { 
        font-size: 1rem;
        color: #222;
        letter-spacing: 0;
        padding: 0 6px 0 6px;
        font-weight: 500;
        width: auto;
        text-decoration: none;
        min-width: 30px;
        text-align: center;
        transition: color 0.3s ease; 
    }
    .div01__btn:hover {
        color: #444; 
    }
    .div01__btn:focus {
        color: #111;   
        outline: 2px solid #aaa; 
        outline-offset: 2px;
    }
    .div01__btn:active {
        color: #666;   
    }
    .div01__btn:disabled,
    .div01__btn[aria-disabled="true"] {
        color: #999;   
        cursor: not-allowed;
    }

/* #endregion */
/* #region 768 INDEX STARTFRAMEBILD SLIDESHOW */

    .start_flexcontainer-startframe {
        padding-top: 0;
    }

    .slideshow-box {
        display: block;
        max-width: 1400px; 
        height: auto;
        margin: auto; 
        padding: 0; 
        padding-top: 0;
        border: 0; 
        border: none; 
    }

    .slideshow-box-900 { 
        display: none;
    }

    .slideshow-box-480 { 
        display: none;
    }

/* #endregion */
/* #region 768 INDEX TERMINE UND NEWS */
    .start_flexcontainer-termineundnewscontainer {
        width: 100%;
        margin: 8px auto;
        height: auto;
        
        display: flex;   
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
    }

    .start_flexcontainer-terminspalte {
        width: 38%;
        padding: 20px 0 0 0; 
        margin-bottom: 20px;
        background-color: #fff;
    }

    .news_terminsinglebox {
        width: 100%;
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .start_flexcontainer-newsspalte {
        width: 58%;
        margin: 20px auto;
        height: auto;
        background-color: white; 
        padding-top: 20px; 

        display: flex;   
        flex-direction: row;  
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }

    .start_newsbox-textbox {
        width: 350px; 
    } 

    .text_new a {
    color: #222;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
    }
    .text_new a:hover {
    color: #99005e;
    text-decoration: underline;
    }
    .text_new a:active {
    color: #760346;
    }
    .text_new a:visited {
    color: #565656;
    }
    .text_new a:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
    border-radius: 2px;
    }

    .img_new {
        width: 350px;
        height: auto;
    }

    .new_mosaikbox-newsline {
        max-width: 350px;
    }


/* #endregion */
/* #region 768 PROJEKTE */
    
    .projekte_main{
        margin: 0 auto 20px auto;
        padding-top: 160px;
    }
    
    .projekte_containerbox {
        max-width: 768px;
        margin: 0 auto 20px auto;
    }

    .projekte_header {
        margin: auto;
        padding: 40px;
        max-width: 768px;
    }

    .projekte_flex-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 0;
    column-gap: 0;
}

    .projekte_figure-onbox {
        width: 300px;
        height: 300px;
        margin: 30px;
    }

    .projekte_figure-onbox img {
        width: 300px;
        height: 300px;
    }



/* #endregion */
/* #region 768 INFOS */

    .tierchen {
        display: none;
    }

    .infos_mainbox {
        max-width: 96%;
        margin: 0 auto 20px auto;
        padding-top: 160px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: start;
        }

    .infos_flexitem-first {
        width: 40%;
        margin: 0 auto;
        padding: 0;
    }
    .infos_flexitem-first section {
        width: 100%;
        padding: 10px;
        margin: 0 auto;
        margin-bottom: 30px;
        box-shadow: 0px 3px 5px #444;
        justify-content: flex-start;
        }

    .infos_flexitem-second {
        width: 52%;
        margin: 0 auto;
        padding: 10px;
        margin-bottom: 30px;
    }

    .abc-item{
        gap: 0.5rem;
    }

    .abc-letter{
        max-height:60px; 
    }


/* #endregion */
/* #region 768 KLASSEN */

    .klassen_mainbox {
        margin: 0 auto 20px auto;
        padding-top: 160px;
    }

    .klassen__containerbox-klassenbox {
        max-width: 600px;
        margin: 30px;
        padding: 30px;
        border: 2px solid #ccc;
    }

/* #endregion */
/* #region 768 SCHULGEMEINSCHAFT Wir */

    .schulgemeinschaft_mainbox {
        margin: 0 auto 20px auto;
        padding-top: 160px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }



    .schulgemeinschaft_containerbox {
        width: 100%; 
        height: auto;
        min-height: 100px;
        padding: 2px;
        margin: 20px auto;
        display: flex;   
        flex-wrap: wrap;
        flex-direction: row;
        align-items: start;
        justify-content: center;
        }

    .schulgemeinschaft_flexitem-first {
        width: 48%;
        margin: 0 auto;
    }

    .schulgemeinschaft_flexitem-first section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
    }

    .schulgemeinschaft_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .schulgemeinschaft_flexitem-second section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
    }
    
    .schulgemeinschaft-angestelltenbox {
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }


    .flex-grow-1 {
        flex-grow: 1;
        max-width: 400px;
    }

    .flex-grow-2 {
        flex-grow: 2;
        max-width: 400px;
    }

    .small-hidden {
        display: block;
        margin-top: 0;
    }

    .eindrittel {
        width: 40%;
    }

    .zweidrittel {
        width: 60%;
    }

    .small-hidden-sekretariat {
        display: none;
    }

    

/* #endregion */
/* #region 768 SOZIALES LERNEN */

    .soziales_mainbox {
        margin: 0 auto 20px auto;
        padding-top: 160px;
        }

    .soziales_containerbox {
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        }

    .soziales_flexitem-first {
        width: 90%;
        margin: 0 auto;
    }

    .soziales_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

    .soziales_flexitem-second {
        width: 90%;
        margin: 0 auto;
    }

    .soziales_flexitem-second section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

    .teamgeister--img {
        max-width: 300px; 
        height: auto; 
        box-shadow: 4px 4px 9px #999;
        border: 0;
    }


/* #endregion */
/* #region 768 ZIELE */

    .ziele_mainbox {
        margin: 0 auto 20px auto;
        padding-top: 160px;
    }

    .ziele_containerbox {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        }

    .ziele_flexitem-first {
        width: 48%;
        margin: 0 auto;
    }

    .ziele_flexitem-first section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
        }

    .ziele_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .ziele_flexitem-second section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
        }

/* #endregion */
/* #region 768 OGS */

    .ogs_mainbox {
        margin: 0 auto 20px auto;
        padding-top: 160px;
    }

    .ogs_containerbox {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        }

    .ogs_flexitem-first {
        width: 48%;
        margin: 0 auto;
    }

    .ogs_flexitem-first section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
        }

    .ogs_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .ogs_flexitem-second section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
        }

/* #endregion */
/* #region 768 KIDSZONE */

    .kidszone_mainbox {
        margin: 0 auto 20px auto;
        padding-top: 160px;
    }

    .kidszone_containerbox {
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            }

    .kidszone_flexitem-first {
        width: 48%;
        margin: 0 auto;
    }

    .kidszone_flexitem-first section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
        }

    .kidszone_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .kidszone_flexitem-second section {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            padding: 10px auto;
        }

/* #endregion */
/* #region 768 KONTAKT */

    .kontakt_mainbox {
        margin: 0 auto 20px auto;
        padding-top: 160px;
    }

    .kontakt_containerbox {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        }

    .kontakt_flexitem-first {
        width: 55%;
        margin: 0 auto;
    }

    .kontakt_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

    .kontakt_flexitem-second {
        width: 45%;
        margin: 0 auto;
    }

    .kontakt_flexitem-second section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }
    
    .kontakt--impress {
        border: 2px solid var(--border);
        border-radius: 0.5rem;
        padding: 0;
    }
    .kontakt--impress > ul {
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.5rem;
    }
    .kontakt--impress li {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0.5rem;
        margin: 0;
    }

/* #endregion */
/* #region 768 FOOTER */

.footer-links {
    list-style: none;
    margin: 0 auto;
    padding: 5px;
    display: flex;
    flex-wrap: wrap; /* Standard: darf umbrechen */
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
}
/* #endregion */





}
@media (min-width: 992px) {

/* #region 992 INDES */

    .wrapper{
        max-width: 1000px;
    }

    .header-box {
        margin: -10px auto 0 auto;
        position: relative;
        top: 10px;
        left: 0;
        width: 96%;
    }

    .header-box-img {
        top: -80px;
    }

    .header-box-img img{
        height: 80px;
    }

    .start_flexcontainer-terminspalte {
        width: 28%;
    }

    .start_flexcontainer-newsspalte {
        width: 68%;
        flex-direction: row; 
        align-content: flex-start;
        justify-content: space-between;
        align-items: stretch;
    }

    .start_newsbox-textbox {
        width: 300px; 
        height: auto;
	    gap: 5rrem;
        margin: 20px;
    } 

    .centered {
    justify-content: center; 
    }

    .centered::after {
    content: "";
    width: 350px;
    justify-content: flex-start; 
    }

    .img_new {
        width: 300px;
    }

    .new_mosaikbox-newsline {
        display: none;
    }

/* #endregion */
/* #region 992 PROJEKTE */

    .projekte_containerbox {
        max-width: 992px;
        margin: 0 auto 20px auto;
    }

    .projekte_header {
        max-width: 992px;
    }

    .projekte_figure-onbox {
        width: 250px;
        height: 250px;
        margin: 30px;
    }

    .projekte_figure-onbox img {
        width: 250px;
        height: 250px;
    }

/* #endregion */
/* #region 992 INFOS */

    .infos_mainbox {
        margin: 0 auto;
        padding-top: 180px;
    }

    .header-mosaik-large {
        position: fixed;
        left: 0;
        bottom: -2px;
        height: 50px;
    }

/* #endregion */
/* #region 992 KLASSEN */

    .klassen_containersection {
        width: 100%;	
        margin: auto;
        height: auto;
        padding: 10px;
        text-align: justify;
        margin: 10px; 
        
        display: flex;   
        flex-wrap: wrap;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-around;
    }

    .klassen__containerbox {
        display: flex;   
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        background-color: white;
    }

    .klassen_firstclass {
        max-width: 800px;
        margin: 30px auto 30px auto;
    }

    .klassen__containerbox-klassenbox {
        max-width: 400px;
        margin: 10px;
        padding: 10px;
        border: 2px solid #ccc;
    }


/* #endregion */
/* #region 992 SCHULGEMEINSCHAFT */
    .schulgemeinschaft_flexitem-first section {
            width: 100%;
            max-width: 650px;
            margin: 0 auto;
            padding: 10px auto;
        }

    .schulgemeinschaft_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .schulgemeinschaft_flexitem-second section {
            width: 100%;
            max-width: 650px;
            margin: 0 auto;
            padding: 10px auto;
        }

    .eindrittel {
        width: 40%;
    }

    .zweidrittel {
        width: 60%;
        max-width: 800px;
    }

    .small-hidden-sekretariat {
        display: none;
    }

/* #endregion */
/* #region 992 SOZIALES LERNEN */

    .soziales_containerbox {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        }

    .soziales_flexitem-first {
        width: 48%;
        margin: 0 auto;
    }

    .soziales_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

    .soziales_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .soziales_flexitem-second section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

    .teamgeister--img {
        max-width: 400px; 
        height: auto; 
        box-shadow: 4px 4px 9px #999;
        border: 0;
    }

    .abc-item{
        gap: 1rem;
    }

    .abc-letter{
        max-height:100px; 
    }

/* #endregion */
/* #region 992 ZIELE */
    .ziele_flexitem-first section {
            width: 100%;
            max-width: 650px;
            margin: 0 auto;
            padding: 10px auto;
        }

    .ziele_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .ziele_flexitem-second section {
            width: 100%;
            max-width: 650px;
            margin: 0 auto;
            padding: 10px auto;
        }

/* #endregion */
/* #region 992 OGS */
    .ogs_flexitem-first section {
            width: 100%;
            max-width: 650px;
            margin: 0 auto;
            padding: 10px auto;
        }

    .ogs_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .ogs_flexitem-second section {
            width: 100%;
            max-width: 650px;
            margin: 0 auto;
            padding: 10px auto;
        }

/* #endregion */
/* #region 992 KIDSZONE */
    .kidszone_flexitem-first section {
            width: 100%;
            max-width: 650px;
            margin: 0 auto;
            padding: 10px auto;
        }

    .kidszone_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }

    .kidszone_flexitem-second section {
            width: 100%;
            max-width: 650px;
            margin: 0 auto;
            padding: 10px auto;
        }

/* #endregion */
/* #region 992 KONTAKT */


/* #endregion */






}
@media (min-width: 1400px) {

    
/* #region 1400 INDEX */
    html {
        background: linear-gradient(
                to bottom right,
                #fff4ccBF, 
                #b5eaeaBF, 
                #fff4ccBF  
                );
    }

    .wrapper{
        width: 100%;
        max-width: 1600px;
        margin: auto;
    }

    .tierchen-large {
        display: block;
        content: "";
        position: absolute;
        top: 20px;
        left: 20px;
        width: 150px;
        height: 135px;
        background-image: url('../images/bg/mosaikschmetterlinge-2025.png');
        background-repeat: no-repeat;
        background-size: contain;
    }

    .header-mosaik-large {
        position: sticky;
        bottom: 0;
        height: 72px;
        width: 100%;
        background-image: url('../images/bg/mosaikfischegalerie-2025.webp');
        background-repeat: repeat-x;
       z-index: 999;
    }


/* #endregion */
/* #region 1400 INFOS */

    .infos_mainbox {
        margin: auto;
    }

/* #endregion */
/* #region 1400 SCHULGEMEINSCHAFT Wir */

    .eindrittel {
        width: 50%;
    }

    .zweidrittel {
        width: 50%;
    }

    .small-hidden-sekretariat {
        display: none;
    }
/* #endregion */
/* #region 1400 SOZIALES LERNEN */


/* #endregion */
/* #region 1400 ZIELE */


/* #endregion */
/* #region 1400 OGS */


/* #endregion */
/* #region 1400 KIDSZONE */


/* #endregion */
/* #region 1400 KONTAKT */

    .kontakt_containerbox {
        justify-content: center;
        align-items: flex-start;
        }

    .kontakt_flexitem-first {
        width: 48%;
        margin: 0 auto;
    }

    .kontakt_flexitem-first section {
            width: 100%;
            margin: 0 auto;
            padding: 10px auto;
        }

    .kontakt_flexitem-second {
        width: 48%;
        margin: 0 auto;
    }
/* #endregion */







}
@media (min-width: 1600px) {
/* #region 1600 INDEX */
.header-mosaik-large {
        display: none;
    }

    /* #endregion */
/* #region 1600 SCHULGEMEINSCHAFT */


/* #endregion */
/* #region 1600 SCHULGEMEINSCHAFT Wir */


/* #endregion */
/* #region 1600 SOZIALES LERNEN */


/* #endregion */
/* #region 1600 ZIELE */


/* #endregion */
/* #region 1600 OGS */


/* #endregion */
/* #region 1600 KIDSZONE */


/* #endregion */
/* #region 1600 KONTAKT */
/* #endregion */

}