:root {
 
  /* *************************************

  Logo und CD/CI */

  /* Datei, Größe und Positionierung */
 

  --logo-file:                            url("../img/Solingen_Logo.svg") !important;
  --logo-path:                            url("../img/Solingen_Logo.svg") !important;
  --logo-height:                          38px !important;
  --logo-height-scrolled:                 26px !important;
  --logo-position:                        center !important;
  
  --logo-height-small:                    56px !important;
  --header-height-small:                  30px !important;

  /* Hintergrundfarbe und Rahmen des Logos */

  --color-brand-bg:                       #f2f2f2 !important;  /*SWS grau 1 */
  --color-brand-border:                   #f2f2f2 !important;  /*SWS grau 1 */

  /* Schriftarten */

  --default-font:                         "Verdana" !important;
  --heading-font:                         "Verdana" !important;


  /* *************************************

  Allgemeine Farben */

  /* Hauptfarbe inkl. Abstufungen */

  --color-primary:                        #008c4b !important;  /*SWS gruen 2 */
  --color-primary-darken-5:               #1d276f !important;
  --color-primary-darken-10:              #17205b !important;
  --color-primary-darken-15:              #121946 !important;
  --color-primary-darken-20:              #295732 !important;  /*SWS gruen 3 */
  --color-text-on-primary:                #fff !important;

  /*Schmuckfarbe */

  --color-secondary:                      #bccc16 !important;  /*SWS gruen 1 */

  /* Textfarben */

  --color-body-text:                      #88888a !important;  /*SWS grau 2 */
  --color-body-text-dark:                 #292929 !important;  /*SWS grau 3 */
  --color-body-text-light:                #88888a !important;  /*SWS grau 2 */
  --color-heading:                        #292929 !important;  /*SWS grau 3 */
  --color-link:                           #292929 !important;  /*SWS grau 3 */
  --color-link-hover:                     #008c4b !important;  /*SWS gruen 2 */

  /* Farben für Rahmen */

  --color-border:                         #88888a !important;  /*SWS grau 2 */
  --color-border-dark:                    #292929 !important;  /*SWS grau 3 */
  --color-border-light:                   #f2f2f2 !important;  /*SWS grau 1 */

  /* Hintergrundfarben Inhalt  */

  --color-content-bg:                     #f2f2f2 !important;  /*SWS grau 1 */
  --color-content-bg-light:               #fff !important;
  --color-content-bg-dark:                #88888a !important;  /*SWS grau 2 */
  --color-body-highlight:                 #008c4b7c !important;  /*SWS gruen 2 transparent */


  /* *************************************
     
  Schaltflächen / Buttons */

  --color-btn-default:                    #008c4b !important;  /*SWS gruen 2 */
  --color-btn-default-hover:              #295732 !important;  /*SWS gruen 3 */
  --color-btn-default-text:               #fff !important; 

  --color-btn-secondary:                  #008c4b !important;  /*SWS gruen 2 */
  --color-btn-secondary-hover:            #295732 !important;  /*SWS gruen 3 */
  --color-btn-secondary-text:             #fff !important;


  /* *************************************/
}

html, body {
    overflow-x: hidden;     /* horizontales Scrollen verhindern */
    overflow-y: auto;       /* vertikales Scrollen erlauben */
}

.switch-lang-wrapper {
    display: none !important;
}

.wrapper-left {
    background-image:               	  url("../img/Solingen_Panorama.png") !important;
	background-size:   					  80%!important;
	background-position: 				  center!important;
    background-color:                     #f2f2f2 !important;  /*SWS grau 1 */ 
	width: 								  50%!important;
}

.brand {
	--Logo-path: 					  	  url(../img/Solingen_Logo.png) !important;
	background-color: 					  #f2f2f2 !important;  /*SWS grau 1 */
}

.brand-login {
    background-image:                 	  none!important;
}

div#login_page {
    background-image: 					  url(../img/Solingen_Logo.svg) !important;
    background-size: 					  15vw !important;
    background-repeat: 					  no-repeat !important;
    background-position: 				  center top 50px !important;
	max-width: 							  none !important;
    width: 								  70% !important;
}


/******************* Ein und Ausblenden des Warndreiecks *******************/
/********** Entweder (.modal-content.info) oder (.modal-content.info:before) benutzen **********/

.modal-content.info {
    padding-left: 5px !important;
	max-height: calc(100vh - 200px) !important;
}

/* .modal-content.info:before { */
	/* content: 							  "" !important; */
    /* display: 							  inline-block !important; */
    /* width: 								  40px !important; */
    /* height: 							  40px !important; */
    /* background-image: 					  url("../img/message/warning.svg") !important; */
    /* background-size:					  contain !important; */
    /* background-repeat:					  no-repeat !important; */
    /* margin-right:						  8px !important; */
	/* vertical-align: 					  middle !important; */
	/* position: 							  absolute !important; */
    /* left: 								  0 !important; */
    /* top:								  30% !important; */
    /* transform:							  translateY(-50%) !important; */
/* } */
/******************* Ein und Ausblenden des Warndreiecks *******************/


span.password-info {
    font-size:                            14px !important;
    color:                                red !important;
}

.toggle__indicator{
	margin-top:						  	  5px !important;
}

/* Glow effect around checkboxes */
.toggle--checkbox input[type="checkbox"]:focus + .toggle__indicator {
  box-shadow: 							  0 0 8px 2px #bccc16 !important;  /*SWS gruen 1 */
}


/********** Footer am unteren Rand, zweispaltig **********/
.footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 25px !important;
    z-index: 1000 !important;
}

.footer a {
    color: var(--color-link) !important;
    text-decoration: none !important;
    margin-right: 15px !important; /* Abstand zwischen den Links */
    transition: color 0.3s ease !important;
	font-size: 12px;
}

.footer a:last-child {
    margin-right: 0 !important;
}

.footer a:hover {
    color: var(--color-link-hover) !important;
}

.footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 15px !important;
}

.footer .copyright {
    margin: 0 !important;
	font-size: 11px;
}
.footer > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}


/******************* Anpassungen für verschiedene Medien ********************/

/********** Handy ansicht **********/
@media (max-width: 820px) {
    :root {
        --logo-height: 30px;
        --logo-height-small: 40px;
        --header-height-small: 25px;
    }

    .wrapper-left, .wrapper-right {
        width: 100% !important;
        background-size: cover !important;
    }

	.brand img,.brand-login img,#login_page svg {
        width: 30vw;
        max-width: 120px;
        height: auto;
    }

    div#login_page {
        width: 90% !important;
        background-size: 20vw !important;
        background-position: top center !important;
		margin-top: 20px !important;
    }

	#login_page .modal-content {
		padding-top: calc(20px + 2vw) !important;
	}

    .footer {
		position: relative;
		bottom: auto;
		width: 100%;
		font-size: 12px;
		padding: 15px 20px;
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		gap: 10px;
    }

    .footer a {
        margin-right: 0 !important;
        margin-bottom: 8px !important;
    }

    .modal-content.info {
        max-height: 50vh !important;
        padding-left: 0 !important;
    }
}

/********** Tablett ansicht **********/
@media (min-width: 821px) and (max-width: 1024px) {
     html, body {
        height: auto !important;
        overflow-x: hidden !important; /* horizontales Scrollen verhindern */
        overflow-y: auto !important;   /* vertikales Scrollen erlaubt */
    }
	 
	 /* Wrapper links (Bild) */
    .wrapper-left {
        width: 100% !important;
        height: 300px !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* Optional: falls der Text über dem Bild ist */
    .wrapper-left .overlay-content {
        padding: 20px;
        text-align: center;
    }

    /* Container stacking */
    .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px; /* Abstand zwischen Bild und Content */
    }

    /* Wrapper rechts (Content) */
    .wrapper-right {
        width: 90% !important;
		height: calc(500px + 16vw) !important;
        margin: 0 auto !important;
    }

	.brand img,.brand-login img,#login_page svg {
        width: 20vw;
        max-width: 150px;
        height: auto;
    }

    /* Login Page */
    div#login_page {
        width: 80% !important;
        background-size: 20vw !important;
        background-position: top center 50px !important;
    }
	
    /* Footer */
    .footer {
		position: relative;
		bottom: auto;
		width: 100%;
		font-size: 12px;
		padding: 15px 20px;
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		gap: 10px;
    }

    .footer a {
        margin-right: 0 !important;
        margin-bottom: 8px !important;
    }

    .modal-content.info {
        max-height: 50vh !important;
        padding-left: 0 !important;
    }
}

/******************** Anpassungen für Media ********************/