:root {
    --brand-color: #235977;
    --light-brand-color: #346f88;
    --bs-footer-link-padding-y: 1em;
    --bs-footer-link-padding-x: 1em;
}
body {
    padding-top: 145px; /* Schätze die Höhe der Navbar */
}
.navbar {
    background-color: var(--brand-color);
}

.btn-primary {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

/* allows bootstrap to style Laminas Navigation generated menu items within the navbar */
.navbar li.active a {
    color: var(--bs-navbar-active-color);
}

.required::before {
    content: " *";
    color: red; /* Du kannst die Farbe des Sternchens anpassen */
    padding-left: 6px; /* Abstand zwischen dem Formularfeld und dem Sternchen */
    font-size: inherit; /* Die Schriftgröße des Sternchens wird an das Formularfeld angepasst */
    vertical-align: top; /* Ausrichtung, falls nötig */
}

.sm-eye {
    background-image: url('/../img/eye.svg');
    width: 1.5em;  /* Breite des Icons */
    height: 1.5em; /* Höhe des Icons */
    display: inline-block; /*ma weeses net*/
    background-size: contain;
    background-repeat: no-repeat;
    /*vertical-align: central;  Ausrichtung, falls nötig */
}

.sm-eye-slash {
    background-image: url('/../img/eye-slash.svg');
    width: 1.5em;  /* Breite des Icons */
    height: 1.5em; /* Höhe des Icons */
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Container für alle Flashmessages */
.flashmessages {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000; /* Sicherstellen, dass die Nachrichten über anderen Elementen liegen */
    text-align: center;
    width: auto;
}

/* Stile für einzelne Flashmessage-Boxen */
.flashmessage {
    position: relative;
    margin-bottom: 10px; /* Abstand zwischen den Nachrichten */
    padding: 10px; /* Innerer Abstand für mehr Lesbarkeit */
    border-width: 2px;
    border-style: solid;
}

/* Verschiedene Nachrichtenarten */
.default {
    border-color: #000000;
    background-color: lightgray;
}

.error {
    border-color: #FF0000;
    background-color: #FF8080;
}

.info {
    border-color: #0000FF;
    background-color: lightgray;
}

.success {
    border-color: #00FF00;
    background-color: #80FFC8;
}

.warning {
    border-color: #FFA500;
    background-color: #FFB611;
    color: blue;
}

/* Animation für das Ausblenden */
@keyframes fadeout {
    0% { opacity: 1; }
    99% { opacity: 0;  transform: translateX(0px);}
    100% { opacity: 0; transform: translateX(-1500px); } 
}

.flashmessage {
    animation: fadeout 30s forwards; /* 30 Sekunden Ausblend-Animation */
}

.ddbg {
  background-color: var(--brand-color);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 5px 5px;
  z-index: 1000;
}

.ddbg li{
    list-style-type: none;
    background-color: var(--brand-color);
}

.ddbg li:hover{
    background-color: var(--light-brand-color);
}

.col-centered {
  float: none;
  margin-right: auto;
  margin-left: auto;
}

button.close {
    background-color: transparent;  /* Hintergrund entfernen */
    border: none;                   /* Rahmen entfernen */
    outline: none;                  /* Umrandung beim Fokus entfernen */
    opacity: 1;                     /* Volle Deckkraft für das "X" */
    font-size: 1.5rem;              /* Größe des "X" anpassen */
    color: #000;                    /* Farbe des "X" anpassen */
    padding: 0;                     /* Kein zusätzliches Padding */
    cursor: pointer;                /* Zeigt den Mauszeiger als Zeigefinger */
    position: absolute; top: -5px; right: 10px;
}
button.close:hover {
    color: #f00;                    /* Farbe bei Hover, wenn gewünscht */
}

/*cookie Banner*/
.cookieConsentBanner{
    position: fixed;
    bottom: 8px;
    left: 1%;
    width: 97%;
    padding-top: 7px;
    padding-bottom: 5px;

    line-height: 20px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    background: #292929;
    
    border-radius: 3px;
    opacity: 0.8;
    transition: top 0.3s ease, bottom 0.8s ease; /* Animationseffekt */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    z-index: 100;
}
.cookieConsentBanner a:link, a:visited {
    text-decoration: none;
}

/*cookie banner nach zustimmung*/
.cookieConsentSettings {
    position: fixed;
    bottom: 8px;
    left: 1%;
    width: 97%;
    padding-top: 7px;
    padding-bottom: 5px;
    
    transition: bottom 2s,left 2s,width 2s;

    background: #292929;
    border-radius: 3px;
    opacity: 0.8;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    
}
.cookieConsentSettingsTo {
    bottom: 0px;
    left: 0px;
    width: 50px;
}

.footer-link{
	display:block;
	
    padding-left: var(--bs-footer-link-padding-x);
	font-size:var(--bs-nav-link-font-size);
	font-weight:var(--bs-nav-link-font-weight);
	color:var(--bs-nav-link-color);
	text-decoration:none;
	transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
}
@media (prefers-reduced-motion:reduce)
	{.footer-link{transition:none}}
.footer-link:focus,.footer-link:hover{
	color:var(--bs-nav-link-hover-color)
}
.footer-link.disabled{
	color:var(--bs-nav-link-disabled-color);
	pointer-events:none;
	cursor:default
}