@media all {
/*html, body  { height: 101%; position:relative;    min-height: 100%;}  */

body {
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-size:18px;
	line-height: 1.7;
	/*color:#54555a!important;  */
	background:#fff;
}

/* Anpassung Layout Footer */
.footer .grid-child {
  justify-content: space-between;
  align-items: baseline;
  padding: 2rem 0em 1em 0em;
}

/* Anpassung der Inhalte fliessender Text als 2 und 3 Spalter     */
.kistenberger-2spalten-startslider {
    display: grid;
	grid-template-columns: 3fr 1fr;
    grid-gap: 0px;
    grid-auto-flow: row dense;
	
}

/* Versteckt das Material Icon und zeigt PNG stattdessen */
._access-icon.material-icons {
    font-size: 0 !important; /* Versteckt den Text "accessible" */
    background-image: url('../images//Icons/accessibility-icon.png') !important;
    background-size: 52px 52px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}




/* Anpassung der Inhalte fliessender Text als 2 und 3 Spalter     */
.kistenberger-container-2spalten {
    display: grid;
	grid-template-columns: 3fr 1fr;
   /* grid-template-columns: repeat(auto-fit, minmax(250px, 2fr)); */
    grid-gap: 20px;
    grid-auto-flow: row dense;
	
}

.kistenberger-container-2spalten-dach {
    display: grid;
	grid-template-columns: 3fr 1fr;
   /* grid-template-columns: repeat(auto-fit, minmax(250px, 2fr)); */
    grid-gap: 20px;
    grid-auto-flow: row dense;
	
}

.kistenberger-container-2spalten-halb-halb {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    grid-gap: 15px;
    grid-auto-flow: row dense;

}

.kistenberger-container-3spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
    grid-gap: 8px;
    grid-auto-flow: row dense;
	align:left;
	font-size:1.0rem;
}
.kistenberger-container-4spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 3fr));
    grid-gap: 0px;
    grid-auto-flow: row dense;
	align:left;
	font-size:0.0rem;
}

.kistenberger-item00 { padding: 0px 0px 0px 0px; }
.kistenberger-item10 { padding: 0px 10px 10px 0px; }
.kistenberger-item20 { padding: 0px 20px 10px 0px; }
.kistenberger-item30 { padding: 0px 30px 10px 0px; }

.kb-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 0;
	width: 100%;
	margin: 0 auto;
	aspect-ratio: 4/3;
}

.kb-item {
	overflow: hidden;
	position: relative;
}

.kb-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Bild 4 (erste Reihe) - spannt 2 Reihen und steht rechts */
.kb-item:nth-child(4) {
	grid-row: 1 / 3;
	grid-column: 4;
}
/* Bild 9 (erstes Bild der 4. Reihe) - spannt 3 Spalten */
.kb-item:nth-child(8) {
	grid-column: 1 / 4;
}
		

/* ############################################################################################################################### */
/*  */

/* ######################################################################################################### */
/* ##### Gestaltung der Headlines ##### */
/* ######################################################################################################### */


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Roboto', sans-serif; line-height: 1.5!important; }

h1, .h1 { font-size:18px; color:#c0331b; margin-top: 0px!important; margin-top: 60px!important; margin-bottom: -10px; font-weight:400!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0);  }
h2, .h2 { font-size:48px; color:#c0331b; margin-top: 0px!important; margin-bottom: -10px!important; font-weight:700!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }
h3, .h3 { font-size:34px; color:#54555a; margin-top: 0px!important; margin-bottom: 60px!important; font-weight:700!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }
h4, .h4 { font-size:24px; color:#54555a; margin-top: 0px!important; margin-bottom:  0px!important; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }
h5, .h5 { font-size:16px; color:#54555a; margin-top:  0px!important; margin-bottom:  0px!important; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }
h6, .h6 { font-size:14px; color:#54555a; margin-top:  0px!important; margin-bottom:  0px!important; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }

.intern h1, .intern .h1 { font-size:24px; color:#54555a; margin-top: 0px!important; margin-top: 20px!important; margin-bottom: 30px; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0);  }
.intern h2, .intern .h2 { font-size:20px; color:#54555a; margin-top: 30px!important; margin-bottom: 10px!important; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }
.intern h3, .intern .h3 { font-size:18px; color:#54555a; margin-top: 30px!important; margin-bottom: 0px!important; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 0.5rem;
}


.italic { font-style:italic; }
/* ############################################################################################################################### */


.brown { background-color:#444444; }
.gruen { color:#c0331b}
.typo-klein { font-size:90%; }

h3.head-weiss { font-size:24px; font-weight:400!important; color:#ffffff!important; margin-bottom: 0px!important; }
.typo-weiss { color:#ffffff}

hr {
  color: #ffffff;
  border: 0;
    border-top-width: 0px;
    border-top-style: none;
    border-top-color: currentcolor;
  border-top: var(--border-width) solid;
  opacity: .25;
  margin: 0rem 0;
}

.head-grau { color:#c0331b!important;}
.head-rot { color:#c0331b!important;}
.head-weiss { color:#ffffff!important;}


.claim { font-size:28px; color:#c0331b; font-weight:400!important; font-family: 'Roboto', sans-serif;}
.claim-weiss { font-size:28px; color:#ffffff; font-weight:400!important; font-family: 'Roboto', sans-serif;}

.container-header {
    box-shadow: 0 1px 10px -1px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.focus:focus {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

.flex-control-nav {
	display:none;
}


/* ######################################################################################################### */
/* ##### Grundeinstellungen ##### */
/* ######################################################################################################### */



.container-fluid { padding:0px; margin:0px;  z-index:1; }
.container { padding:0; max-width:1320px!important;  z-index:1; vertical-align:top;}
.innen { padding:2em 0 2em 0; max-width:1320px!important;  z-index:1;}

div.mod-languages ul {
 /* margin: 0!important;   */
  padding-top: 36px;
  list-style: none!important;
  margin-left:-75%;
}


.mod-languages img {
    width: 31px!important;
    height: 36px!important;
	max-width: none!important;;
}

.mod-languages__list > li:nth-child(1) > a:nth-child(1) {
	  color:#b32b2f!important;
}

}

@media (max-width: 1199px) {

body {
	font-size:16px;
}
div.mod-languages ul {
 /* margin: 0!important;   */
  padding-top: 36px;
  list-style: none!important;
  margin-left:-25%;
}

}

@media (max-width: 992px) {

body {
	font-size:15px;
	line-height: 1.8;
		color:#333!important;
}
div.mod-languages ul {
 /* margin: 0!important;   */
  padding-top: 30px;
  list-style: none!important;
  margin-left:-25%;
}

}
@media all {
  .container {
    padding: 10px;
  }
}

.kistenberger-container-2spalten {
    display: grid;
	grid-template-columns:1fr;
   /* grid-template-columns: repeat(auto-fit, minmax(250px, 2fr)); */
    grid-gap: 20px;
    grid-auto-flow: row dense;
	
}


.kistenberger-container-2spalten-dach {
    display: grid;
	grid-template-columns:1fr;
   /* grid-template-columns: repeat(auto-fit, minmax(250px, 2fr)); */
    grid-gap: 20px;
    grid-auto-flow: row dense;
	
}

.kistenberger-container-2spalten-halb-halb {
    grid-gap: 5px;
}


}

@media (max-width: 767px) {

body {
	font-size:14px;
	line-height: 1.6;
	color:#333!important;
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Roboto', sans-serif!important; line-height: 1.5!important; padding-left:10px; }

h1, .h1 { font-size:12px; color:#c0331b; margin-top: 0px!important; margin-bottom: 0px!important; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0);  }
h2, .h2 { font-size:28px; color:#c0331b; margin-top: 0px!important; margin-bottom: 0px!important; font-weight:700!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }
h3, .h3 { font-size:22px; color:#c0331b; margin-top: 0px!important; margin-bottom: 0px!important; font-weight:700!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }
h4, .h4 { font-size:18px; color:#c0331b; margin-top: 0px!important; margin-bottom:  0px!important; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }
h5, .h5 { font-size:16px; color:#c0331b; margin-top:  0px!important; margin-bottom:  0px!important; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }
h6, .h6 { font-size:14px; color:#c0331b; margin-top:  0px!important; margin-bottom:  0px!important; font-weight:600!important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); }

.kb-container {
	max-width: 100%;
	margin: 0;
	aspect-ratio: 4/3;
}


}


@media (max-width: 767px) {


}


@media (max-width: 640px) {

}

@media (max-width: 480px) {

.kb-container {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(6, 1fr);
	aspect-ratio: 2/6;
}

/* Mobile Anpassungen - Layout vereinfachen */
.kb-item:nth-child(4) {
	grid-row: auto;
	grid-column: auto;
}

.kb-item:nth-child(8) {
	grid-column: 1 / 3;
	grid-row: auto;
}

}


@media (max-width: 320px) {

}