/*** Formatierungen für Grid-Elements ***/

/************************************ Grid/Spalten ************************************/
/* Elementreihenfolge */
.order-last {
    -ms-flex-order: -1;
    order: -1;
}
.order-first {
    -ms-flex-order: 13;
    order: 13;
}

@media (min-width: 768px) {
	.row-cols-md-2 .order-last, .col-md-6.order-last {
		-ms-flex-order: 13;
		order: 13;
	}
	.row-cols-md-2 .order-first, .col-md-6.order-first {
		-ms-flex-order: -1;
		order: -1;
	}
}

@media (min-width: 992px) {
	.col-lg-8.order-last, .col-lg-6.order-last, .col-lg-4.order-last {
		-ms-flex-order: 13;
		order: 13;
	}
	.col-lg-8.order-first, .col-lg-6.order-first, .col-lg-4.order-first {
		-ms-flex-order: -1;
		order: -1;
	}
}


/************************************ Slider/Carousel ************************************/
.carousel {
	margin-bottom:1.5rem;
}
.carousel.navunterhalb {
	padding-bottom:2.5rem; /* muss mit padding-bottom der Controlls übereinstimmen */
}

.carousel-inner {
	padding:0.75rem 4rem 0 4rem; 
}

/*#banner .carousel-inner {
   padding:0;
}*/

/* Kontrollelemente Rechts / Links */
.carousel-control-prev, .carousel-control-next {
    width:auto;
	text-decoration:none;
}
/* Kontaktfläche */
.carousel-control-prev {
    padding:0 4rem 2.5rem 0.25rem;
}

.carousel-control-next {
    padding:0 0.25rem 2.5rem 4rem;
}

.carousel.navinnerhalb .carousel-control-prev, .carousel.navinnerhalb .carousel-control-next {
	padding-bottom:0;
}

/* Slider über ganze Breite */
#banner .imgslider .carousel-control-prev, #banner .imgslider .carousel-control-next {
    /*padding: 0 4% 2.5rem 4%;
    padding: 0 4% 2.5rem 4%;*/
	padding-left:4%;
	padding-right:4%;
}

.carousel-control-prev, .carousel-control-next {
	opacity: 0.7; /* overwrite bootstrap for more contrast */
	border: 1px solid transparent; 
}
 
/* 
.carousel-control-prev .carousel-control-prev-icon, .carousel-control-next .carousel-control-next-icon {
    font-size:2rem;
    padding:0.5rem 1rem;
    color:var(--color-grau-schrift);
	border-radius: 100%;
	background-color:rgba(255, 255, 255, 0.7);
}
.carousel.navhell .carousel-control-prev .carousel-control-prev-icon, .carousel.navhell .carousel-control-next .carousel-control-next-icon {
	color: var(--color-weiss);
	background-color:rgba(0, 0, 0, 0.5)
}
*/
#banner .carousel-control-prev .carousel-control-prev-icon, #banner .carousel-control-next .carousel-control-next-icon {
    font-size:3rem;
}

/* Fokus */
.carousel-control-prev:focus, .carousel-control-next:focus, 
.carousel.navhell .carousel-control-prev:focus, .carousel.navhell .carousel-control-next:focus {
	border-color:#9ec5fe; /*var(--bs-primary-border-subtle);*/
	background-color: rgba(158, 197, 254, 0.25);/*#cfe2ff;*//*var(--bs-primary-bg-subtle);*/
}

.carousel-control-prev:focus .carousel-control-prev-icon, 
.carousel-control-next:focus .carousel-control-next-icon, 
.carousel.navhell .carousel-control-prev:focus .carousel-control-prev-icon, 
.carousel.navhell .carousel-control-next:focus .carousel-control-next-icon {
	opacity: 1;
}

/* Indikatoren */
.carousel .carousel-indicators {
	margin-bottom:0;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	bottom:0;
}

.carousel .carousel-indicators li {
	list-style: none;
}

.carousel .carousel-indicators button {
	background-color: var(--color-grau-flaeche);
	opacity: .5;
    cursor:pointer;
}
/*.carousel.navhell.navinnerhalb .carousel-indicators button {
	background-color: var(--color-weiss);
}*/
/*#page */.carousel.navdunkel .carousel-indicators button {
	background-color: var(--color-grau-flaeche);
}
/*#page */.carousel.navhell .carousel-indicators button {
	background-color: var(--color-weiss);
}
.carousel .carousel-indicators button.active {
	opacity: 1;
}

/* runde Indikatoren statt Striche */
.navbobbel .carousel-indicators button {
    display:inline-block;
    width:10px;
    height:10px;
    margin:1px 3px;
    text-indent:-9999px;
	background-color:var(--color-grau-flaeche);
    border:1px solid var(--color-grau-flaeche);
    border-radius:10px;
}
.carousel.navbobbel.navhell.navinnerhalb .carousel-indicators button {
	border:1px solid var(--color-weiss);
	background-color:var(--color-weiss);
}

/* Bilderslider ohne Abstand */
.imgslider .carousel-inner {
    padding:0;
}

.carousel-inner .bildbox {
    margin-bottom:0;
}

.carousel.imgslider figure {
	margin:0;
}

/* Abstand bei Bildbox und innenliegenden Indikatoren */
.carousel.navinnerhalb .bildbox.boxmittigunten .bildbox-caption, 
.carousel.navinnerhalb .bildbox.boxlinks .bildbox-caption, 
.carousel.navinnerhalb .bildbox.boxrechts .bildbox-caption {
	bottom:2.5rem;
}


/************************************ Accordion ************************************/
.accordion {
	margin-bottom:1.5rem;
}

.accordion .card-header {
    padding:0;
}

.accordion .btn, /*alt*/
.accordion .accordion-button /*neu*/ {
    width:100%;
	padding:1.125rem 2rem; /* damit ganze Fläche anklickbar ist */
    text-align:left;
	font-size:1.2rem;
	color: var(--color-grau-schrift);
}

.accordion .btn > span {
    display:inline-block;
    width:100%;
    background-image:url(../ionicons-2.0.1/src/chevron-down.svg);
    background-repeat:no-repeat;
    background-position:right center;
    background-size:1em; /*contain;*/
	padding-right:2.5rem;
}
.accordion .btn.collapsed > span {
    background-image:url(../ionicons-2.0.1/src/chevron-right.svg);
}

.accordion .card-header .header, .accordion .card-header .subtitle, /*alt*/
.accordion .accordion-header .header, .accordion .accordion-header .subtitle  /*neu*/ {
	display:block;
}

.accordion .card-header .header, /*alt*/
.accordion .accordion-header .header /*neu*/ {
	/*font-weight:bold;
	font-size:1.2rem;*/
}

.accordion .card-header .subtitle, /*alt*/
.accordion .accordion-header .subtitle /*neu*/ {
	font-size:1rem;
}

.accordion .card-body, /*alt*/
.accordion .accordion-body /*neu*/ {
	padding:1.125rem 2rem;
}


/************************************ Klappbox -> wird gelöscht ************************************/
/* Formatierung wie accordion */
.klappbox .card-header {
	padding:0;
	/*border: 1px solid rgba(0,0,0,.125);*/
	border:none;
}

.klappbox .card-header .btn {
	width: 100%;
	padding: 1.125rem 2rem;
	text-align: left;
	text-decoration:none;
	font-size:1.2rem;
	color:var(--color-grau-schrift);
}

.klappbox .card-header .btn > span {
    display: block;
    width: 100%;
    background-image: url(../ionicons-2.0.1/src/chevron-down.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1em;
	white-space:normal;
	padding-right:1.5rem;
}
.klappbox .card-header .btn.collapsed > span {
    background-image: url(../ionicons-2.0.1/src/chevron-right.svg);
}

.klappbox .card-header .header, .klappbox .card-header .subtitle {
	display:block;
}

.klappbox .card-header .header {
	/*font-weight:bold;
	font-size:1.2rem;*/
}

.klappbox .card-header .subtitle {
	font-size:1rem;
}

.klappbox .card-body {
	border-top: 1px solid rgba(0,0,0,.125);
}

.klappbox.abstand {
	margin-bottom:1.5rem;
}


/************************************ Tabcontainer ************************************/
.tab-container {
	margin-bottom:1.5rem;
}

.tab-container .nav-link {
	text-decoration: none;
}
.tab-container .nav-link:hover {
	background-color:var(--color-hellgrau-flaeche);
}
.tab-container .nav-link.active {
	color:var(--color-grau-schrift);
}
.tab-container .nav-link.active:hover {
	background-color:var(--color-weiss);
}

.tab-container .nav-pills .nav-link.active {
	background-color: var(--color-blau-link);
	color:var(--color-weiss);
}

.tab-container.nav-tabs .tab-content {
	border:1px solid var(--bs-border-color); /*var(--color-hellgrau-linie);*/
	border-top:none;
	border-bottom: none;
	padding:1rem;
}

.tab-container.nav-pills .tab-content {
	padding-top:1rem;
}
/*
.tab-container .nav-pills + .tab-content {
	border:none;
}
*/

/************************************ Teaserboxen ************************************/
.teaserbox {
    margin-bottom:1.5rem;
}

.bgbox .boxcontent {
    padding:1em 1em 1px 1em;
}

.teaserbox .boxtopic {
    margin:0;
    margin-bottom:1em;
    font-size:0.875em;
    padding-bottom:0.35em;
    border-bottom:solid;
    border-bottom-width:1px;
    color:inherit;
    text-transform:uppercase;
}

.teaserbox h1, .teaserbox h2 {
	font-size:1.5em;
	margin-bottom:1rem;
    margin-top:0;
}

/*.bgbox a */
.bgbox h1 a, .bgbox h2 a, .bgbox h3 a, .bgbox h4 a {
    color:inherit;
} 

.teaserbox .boximage {
    padding:1px;
}
.teaserbox.bgrahmen .boximage {
    padding:0;
}


.teaserbox.bgbox.card, .teaserbox.bgnone {
	/*border: 1px solid rgba(0,0,0,.125);
	border-radius: .25rem;*/
	border: none;
	border-radius:0;
}

.bgrahmen, .teaserbox.bgbox.bgrahmen {
    border:1px solid var(--color-grau-flaeche);
}

.bgrahmen-hell, .bgrahmen.hellgrau, .teaserbox.bgbox.bgrahmen.hellgrau {
	/*border:1px solid var(--color-hellgrau-linie);*/
	border: 1px solid rgba(0,0,0,.125);
}

.bgrot {
    background-color:#bf2a2a;
    color:var(--color-weiss);
}
.bgblau {
    background-color:#0464c8;
    color:var(--color-weiss);
}
.bggruen {
    background-color:#63a600;
    color:var(--color-weiss);
}
.bggelb {
    background-color:#f0ca4d;
    color:var(--color-weiss);
}
.bghellgrau {
    /*background-color:#e1e1e1;
	background-color:#e9ecef;*/
	background-color:var(--color-hellgrau-flaeche);
}
.bggrau {
    background-color:var(--color-grau-flaeche);
    color:var(--color-weiss);
}
.bghellblau {
    background-color:#b1d4f7;
}
.bgdunkelblau {
    background-color:#0a2b59;
    color:var(--color-weiss);
}
.bgorange {
    background-color:#e37b40;
    color:var(--color-weiss);
}
.bglila {
    /*background-color:#36175e;
    background-color:#710391;*/
    background-color:#6b4f68;
	background-color: #742A90;
    color:var(--color-weiss);
}
.bgtuerkis {
    background-color:#00ada9;
	/*background-color:#37D5E3;*/
    color:var(--color-weiss);
}
.bgpetrol {
    background-color:#024959;
	/*background-color:#217482;*/
    color:var(--color-weiss);
}
.bgbraun {
    background-color:#594f4f;
    color:var(--color-weiss);
}
.bgbeige {
    background-color:#bfa89b;
    background-color:#d9cdb8;
}
.bgrosa {
    background-color:#f2aece;
	background-color:#EDBFD3;
}


.bgbox h1, .bgbox h2, .bgbox h3, .bgbox h4, .bgbox h5, .bgbox h6 {
	color:inherit;
}

.bgrot .text-muted, .bgblau .text-muted, .bggruen .text-muted, .bggelb .text-muted, .bggrau .text-muted, .bgdunkelblau .text-muted, .bgorange .text-muted, .bglila .text-muted, .bgtuerkis .text-muted, .bgpetrol .text-muted, .bgbraun .text-muted {
	color:var(--color-weiss) !important;
}

.bghellgrau .text-muted, .bghellblau .text-muted, .bgbeige .text-muted, .bgrosa .text-muted {
	color:var(--color-grau-schrift) !important;
}

.card-image figure, .bildbox-hintergrundbild figure, .card-image-top figure {
	margin-bottom:0 !important;
}

/************************************ Bildboxen ************************************/
/* Bildbox */
.bildbox {
    margin-bottom:1.5em;
	position:relative;
}
	
.bildbox-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--color-weiss);
}
.bildbox .bildbox-caption.ganzebreite {
	right:0;
	left:0;
}
.bildbox .bildbox-caption.boxmittig {
    /*text-align: center;*/
}

.bildbox .bildbox-caption.boxlinks.boxoben {
	left:7.5%;
	right:55%;
	top:1.75rem;
	bottom:auto;
}
.bildbox .bildbox-caption.boxlinks.boxunten {
	left:7.5%;
	right:55%;
	bottom:1.75rem;
}
.bildbox .bildbox-caption.boxrechts.boxoben {
	left:55%;
	right:7.5%;
	top:1.75rem;
	bottom:auto;
}
.bildbox .bildbox-caption.boxrechts.boxunten {
	left:55%;
	right:7.5%;
	bottom:1.75rem;
}
.bildbox .bildbox-caption.ganzebreite {
	left:7.5%;
	right:7.5%;
}
.bildbox .bildbox-caption.boxmittig.boxunten, .bildbox .bildbox-caption.ganzebreite.boxunten {
	top:auto;
	bottom:1.75rem;
}
.bildbox .bildbox-caption.boxmittig.boxoben, .bildbox .bildbox-caption.ganzebreite.boxoben {
	top:1.75rem;
	bottom:auto;
}

.bildbox.randschmal .bildbox-caption {
	padding:0;
}
.bildbox.randschmal .bildbox-caption.boxlinks {
	left:5%;
}
.bildbox.randschmal .bildbox-caption.boxrechts {
	right:5%;
}
.bildbox.randschmal .bildbox-caption.ganzebreite {
	left:7.5%;
	right:7.5%;
}
.bildbox.randschmal .bildbox-caption.boxoben {
	top:1.25rem;
}
.bildbox.randschmal .bildbox-caption.boxunten {
	bottom:1.25rem;
}

.bildbox-caption {
	padding-left:1.25em;
	padding-right:1.25em;
}

.bildbox .bildbox-caption.bg-transparent-hell {
	background-color:rgba(255,255,255,.5);
	color:var(--color-grau-schrift);
}

.bildbox .bildbox-caption.bg-transparent-dunkel {
	background-color: rgba(0,0,0,.25);
}



/************************************ Bildboxen ************************************/
.zitatbox {
	margin-bottom:1.5rem;
	border:none;
	border-radius:0;
	background:none;
}

.zitatbox .blockquote {
    text-align:center;
    padding:0 1rem;
	margin-bottom:1rem;
	line-height:1.5em;
}

.zitatbox .icon-left {
    margin-bottom:1rem;
}
.zitatbox .icon-right {
    text-align:right;
	margin-bottom:1rem;
}

.zitatbox .boxicon {
    font-size: 2.5rem;
    color:var(--color-mittelgrau-linie);
	color:var(--color-hellgrau-flaeche);
}

.zitatbox .boxicon span {
/*	display:inline-block;
	text-indent:-9999px;*/
}

.zitatbox .blockquote-footer {
    color:var(--color-mittelgrau-linie);
	font-size:0.9rem;
	margin-top:0;
}

/* verschachtelt für Hintergrund oder Rahmen */
.teaserbox .zitatbox {
	padding:0;
	margin:0;
}

.bgrot .zitatbox .boxicon, .bgblau .zitatbox .boxicon, .bggruen .zitatbox .boxicon, .bggelb .zitatbox .boxicon, .bggrau .zitatbox .boxicon,
.bgdunkelblau .zitatbox .boxicon, .bgorange .zitatbox .boxicon, .bglila .zitatbox .boxicon, .bgtuerkis .zitatbox .boxicon,
.bgpetrol .zitatbox .boxicon, .bgbraun .zitatbox .boxicon {
	color:var(--color-weiss);
}

.bgrot .zitatbox .blockquote-footer, .bgblau .zitatbox .blockquote-footer, .bggruen .zitatbox .blockquote-footer,
.bggelb .zitatbox .blockquote-footer, .bggrau .zitatbox .blockquote-footer, .bgdunkelblau .zitatbox .blockquote-footer,
.bgorange .zitatbox .blockquote-footer, .bglila .zitatbox .blockquote-footer, .bgtuerkis .zitatbox .blockquote-footer,
.bgpetrol .zitatbox .blockquote-footer, .bgbraun .zitatbox .blockquote-footer {
	color:var(--color-weiss);
}

.bghellgrau .zitatbox .boxicon, .bghellblau .zitatbox .boxicon, .bgbeige .zitatbox .boxicon, .bgrosa .zitatbox .boxicon {
	color:var(--color-mittelgrau-linie);
	color:var(--color-weiss);
}

.bghellgrau .zitatbox .blockquote-footer, .bghellblau .zitatbox .blockquote-footer, .bgbeige .zitatbox .blockquote-footer, .bgrosa .zitatbox .blockquote-footer {
	color:var(--color-grau-schrift);
}


/************************************ Hinweisboxen ************************************/
.infobox {
    margin-bottom:1.5em;
    padding:1em;
    position:relative;
    border:1px solid var(--color-grau-flaeche);
    border-left-width:5px;
    background-color:rgba(63, 63, 63, 0.2);
}

.infobox .boxicon {
    font-size:2em;
    position:absolute;
    top:0.5em;
    right:0.5em;
    color:var(--color-grau-schrift);
    z-index:-1;
}

/* Info */
.infobox.hinweis {
    border-color:#0464c8;
    background-color:rgba(4, 100, 200, 0.2);
}

.infobox.hinweis .boxicon, .infobox.hinweis h1, .infobox.hinweis h2, .infobox.hinweis h3 {
    color:#0464c8;
}

/* Warnung */
.infobox.warnung {
    border-color:#d91015;
    background-color:rgba(217, 16, 21, 0.2);
}

.infobox.warnung .boxicon, .infobox.warnung h1, .infobox.warnung h2, .infobox.warnung h3 {
    color:#d91015;
}

/* Alarm */
.infobox.achtung {
    border-color:#ffc107;
    background-color:rgba(255, 193, 7, 0.2);
}

.infobox.achtung .boxicon, .infobox.achtung h1, .infobox.achtung h2, .infobox.achtung h3 {
    color:#ffc107;
}

/* Success */
.infobox.erfolg {
    border-color:#149e0e;
    background-color:rgba(20, 158, 14, 0.2);
}

.infobox.erfolg .boxicon, .infobox.erfolg h1, .infobox.erfolg h2, .infobox.erfolg h3 {
    color:#149e0e;
}


/************************************ Sonstige Boxen / Cards ************************************/
.card {
	/*border: 1px solid rgba(0,0,0,.125);
	border-radius: .25rem;*/
	border-radius:0;
}

.card img {
	width:100%;
}
	
.card figure {
	margin:0;
}

.card-image-top img, img.card-image-top {
	border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}
.card-image-bottom img, img.card-image-bottom {
	border-bottom-left-radius: calc(.25rem - 1px);
    border-bottom-right-radius: calc(.25rem - 1px);
}
	
.bordernone {
	border:none;
}
	
.img-circle img, img.img-circle {
	border-radius:50%;
}	
	
.bordernone .card-body, .bgnone .card-body {
	padding-right:0;
	padding-left:0;
}
.bordernone.horizontal .card-body {
	padding-top:0;
	padding-left:1.25rem;
}

.card-body .card-body {
	padding:0;
	margin:0;
}


/************************************ Card-Decks / Card-Columns ************************************/
.card-grid, .card-deck {
	margin-bottom:1rem;
}

/* gleiche Höhe */
.cards-equal-height .card {
	height: 100%!important;
}

/* Abstände wie Card-Colums formatiert */
.card-grid .row {
    /*margin-right: -0.625rem;
    margin-left: -0.625rem;*/
}

.card-grid .col {
	/*padding-right: 0.625rem;
	padding-left: 0.625rem;*/
	margin-bottom:1.5rem; /* Abstand nach unten wie Card-Columns */
}

/* Card-Columns */
.card-columns {
	margin-bottom:1.5rem;
	/*column-gap: 1.25rem;*/
	column-gap:30px; /* wie bei col = 2 * 15 */
}

.card-columns .card {
    margin-bottom: 1.5rem; /* wie cols */
}

/* automatische Spaltenaufteilung */	
@media (min-width: 576px) {
	.card-columns {
		column-count: 2;
	}
	
	.card-columns.card-column-count-2 {
		column-count: 2;
	}
}

@media (min-width: 768px) {
	.card-columns {
		column-count: 3;
	}
}

@media (min-width: 992px) {
	.card-columns.card-column-count-2 {
		column-count: 2;
	}
	.card-columns.card-column-count-3 {
		column-count: 3;
	}
	.card-columns.card-column-count-4 {
		column-count: 4;
	}
	.card-columns.card-column-count-5 {
		column-count: 5;
	}
}


.row.abstand {
	margin-bottom:1rem;
}