@charset "utf-8";
/* CSS Document */

/*-------------------------------*/
/* S+C Accordion          */
/*-------------------------------*/
		
.accordion {
    --bs-accordion-bg: white; /* Accordion-Hintergrund Content */
    --bs-accordion-color: #002060; /* Textfarbe Content */
    --bs-accordion-border-color: #ced4da; /* Rahmenfarbe */
    --bs-accordion-border-radius: 12px; /* Abgerundete Ecken */
    --bs-accordion-inner-border-radius: 12px;
}
	
.accordion {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Abstand zwischen den Items */
}
/*------------------------------*/
/* Accordion Gruppenelement     */	
/*------------------------------*/

.accordion-header {
    border-radius: inherit; /* Header übernimmt den Radius des Elternteils */
    max-width: none; /*Typo3 override */
    padding-top: 0;
}
/*Typo */	
.accordion-header .accordion-button {
    font-family: 'Readex Pro', sans-serif;
    font-size: 1.25rem; /* Schriftgröße für den Header */
    font-weight: 500;   /* Schriftgewicht anpassen */
    line-height: 1.2;   /* Zeilenhöhe anpassen */
}
@media (min-width: 768px) { 
.accordion-header .accordion-button {
    line-height: 1.5; }
}

.accordion-header .accordion-button {
    position: relative;
    padding-right: 3.5rem; /* Platz für das Icon */
			
    --bs-accordion-btn-bg: #e3e3e3; /* Header-Hintergrund */
    --bs-accordion-btn-color: #002060; /* Header-Textfarbe */
    --bs-accordion-btn-active-bg: #002060; /* Hintergrund aktiv */
    --bs-accordion-btn-active-color: #fff; /* Textfarbe aktiv */
    --bs-accordion-btn-focus-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Fokus-Schatten */
}

/* Icon Rechts - Open/Close */

.accordion-header .accordion-button:not(.collapsed) {
    border: none; /* Keine Rahmen für das aktive Item */
    box-shadow: none; /* Entfernt auch eventuelle Schatten */
    background-color: #002060; /* Neue Hintergrundfarbe */
    color: white; /* Textfarbe */
    /*border-color: #007bff; /* Rahmenfarbe anpassen */
}
.accordion-header .accordion-button:not(.collapsed):hover {
    background-color: #002060; /* Neue Hintergrundfarbe */
    color: white; /* Textfarbe */
    cursor: default;
}
.accordion-header .accordion-button:hover {
    background-color: #002060; /* Neue Hintergrundfarbe bei Hover */
    color: white; /* Textfarbe bei Hover */
}
	

.accordion-item {
    border: none; /* Optional: Rahmen entfernen */
    border-radius: 12px; /* Rundung für alle Ecken */
    overflow: hidden; /* Verhindert, dass Inhalte den Radius "durchbrechen" */
}
.accordion-item:first-of-type {
  border-top-left-radius: 12px!important;
  border-top-right-radius: 12px!important;
}
.accordion-item:last-of-type {
  border-bottom-left-radius: 12px!important;
  border-bottom-right-radius: 12px!important;
}

/* Variante mit Icon im CSS-Code */
/* Füge das Icon über ::after ein */
/*
.accordion-header .accordion-icon {
    display: none;
}
.accordion-button::after {
    content: "\F13A";
    font-family: "bootstrap-icons"; 
    display: inline-block;   
    line-height: 1;          
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    transform-origin: 50% 50%; 
    font-size: 1.75rem; 
    font-weight: 500;
    transition: transform 0.3s ease; 
}
.accordion-button.collapsed::after {
    transform: translateY(-50%) rotate(180deg);
}
*/
/* Variante mit Icon im HTML-Code */
/* Standard-Chevron entfernen */
.accordion-header .accordion-button::after {
    content: none;
}
.accordion-icon {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    font-size: 1.75rem; /* Größe des Icons */
    font-weight: 500;
    transition: transform 0.3s ease; /* Animation */
}
/* Geschlossenes Icon dreht sich */
.accordion-button.collapsed .accordion-icon {
    transform: translateY(-50%) rotate(180deg);
}
	
	
	
		.accordion-body {
			padding-top: 15px;
			padding-bottom: 15px;
		}
		@media (min-width: 576px) { 
		.accordion-body {
			padding-top: 30px;
			padding-bottom: 30px; }
		}	
	
	
		/* Link um Accordion-Body */
		a.accordion-body-link:hover {
    		text-decoration: none; /* Entfernt Standard-Link-Unterstreichung */
		}
	
		.accordion-body.color-1 {
    		background-color: white; /* Neue Hintergrundfarbe */
    		color: #002060; /* Textfarbe, wenn nötig */
			transition: background-color 0.3s ease, color 0.3s ease;
		}
		.accordion-body.color-1:hover {
    		background-color: #cdcdcd; /* Neue Hintergrundfarbe */
			cursor: pointer;
		}
	
		.accordion-body.color-2 {
    		background-color: #eeeeee; /* Neue Hintergrundfarbe */
    		color: #002060; /* Textfarbe, wenn nötig */
			transition: background-color 0.3s ease, color 0.3s ease;
		}
		.accordion-body.color-2:hover {
    		background-color: #cdcdcd; /* Neue Hintergrundfarbe */
			cursor: pointer;
		}
	
		.accordion-download-icon  {
			font-size: 2.4rem;
			font-weight: 500;
			display: inline-block; /* Wichtig für Transition */
    		transition: transform 0.3s ease, color 0.3s ease; /* Smooth Scale- und Farbänderung */
		}
	
		.accordion-body:hover .accordion-download-icon  {
			transform: scale(1.2); /* Vergrößert das Icon */
			/*color: var(--sc-corp-darkgrey);*/
			text-decoration: none; /* Entfernt die Unterstreichung */

		}
	
		.accordion-flag-icon {
			width: 15%;
			height: auto;
			
			padding-top: 4px;
			padding-bottom: 10px;

		}	
		@media (min-width: 576px) { 
		.accordion-flag-icon {
			width: 10%; }
		}	
		@media (min-width: 768px) { 
		.accordion-flag-icon {
			width: 100%; }
		}	
		@media (min-width: 992px) { 
		.accordion-flag-icon {
		}
		}	
		@media (min-width: 1200px) { 
		.accordion-flag-icon {
		}
		}	
		@media (min-width: 1400px) { 
		.accordion-flag-icon {
		}
		}
	
/*------------------------*/
/* Typo - Content         */
/*------------------------*/
/* Headline */
.accordion-body h1.accordion-body-headline,
.accordion-body h2.accordion-body-headline,
.accordion-body h3.accordion-body-headline,
.accordion-body h4.accordion-body-headline,
.accordion-body h5.accordion-body-headline,
.accordion-body h6.accordion-body-headline,
.accordion-body span.accordion-body-headline {
    font-family: 'Readex Pro', sans-serif;
    color: #002060;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.0;
    display: inline-block; /* oder "block" */
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/*Fließtext */
.accordion-body p.accordion-body-text {
    font-family: "IBM Plex Sans", sans-serif;
    text-transform: none;
    color: #002060;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
}

.accordion-item a.accordion-body-link {

    text-transform: none !important;
    text-decoration: none !important;

}
.accordion-item a.accordion-body-link:hover {

    text-transform: none !important;
    text-decoration: none !important;

}

/*Datum für Zertifikate */
.accordion-body p.accordion-body-text-datum {
    font-size: 1rem;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #002060;
}
	
/*------------------------*/	
/* Modal - PDF            */	
/*------------------------*/

		.custom-modal .modal-dialog {
    		/* Breite des Modals */
   			 width: 80%;
   			 max-width: 1400px; /* Maximale Breite, optional */
    
    		/* Höhe des Modals */
   			 height: 80%;
    
    		/* Zentrierung */
   			 margin: auto;
    
    		/* Position von oben */
   			 top: 190px;
		}
		@media (min-width: 576px) { 
		.custom-modal .modal-dialog {
			top: 210px; }
		}	
		@media (min-width: 768px) { 
		.custom-modal .modal-dialog {
			top: 270px; }
		}	
		@media (min-width: 992px) { 
		.custom-modal .modal-dialog{
			top: 280px; }
		}	

		.custom-modal .modal-content {
    		/* Volle Höhe des Dialogs nutzen */
   			height: 100%;
    		display: flex;
    		flex-direction: column;
		}

		.custom-modal .modal-body {
    		/* Platz für die Vorschau */
    		flex: 1;
   			overflow-y: auto;
		}