/* Variables */
:root {
	--oda-blau: #008cce; 
	--oda-gruen: #05a544;
	--oda-schwarz: #5B5959;
	--oda-hellgrau: #f1f1f1;
	}

body {
  font-family: 'Metropolis-Regular', 'Open Sans', Arial, sans-serif;
   font-size: 18px;
   line-height: 1.4;
   color: var(--oda-schwarz);
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.bf-only {display:none;}
.back-to-top {bottom: 1.5em; right: 1.5em; color: var(--oda-blau); opacity: 0.4;}
.back-to-top:hover {color: var(--oda-gruen); opacity: 0.7;}
.smalltext {font-size:15px;}

/* Sienna widget */
.asw-menu-btn {position:fixed;z-index:500000;left:94%!important;bottom:85%!important;}
@media (max-width:700px) {.asw-menu-btn{display:none;} }

h5 {font-size:20px;}
header.h-2 .subheader {font-size:22px!important;margin-bottom:20px!important;}

#main-navbar.shrink {background-color:#fff;height: 110px;}
#main-navbar.navbar-shrink {background-color:#fff;height: 60px;}
#main-navbar.navbar-shrink .extra-row {display:none;}
#main-navbar.shrink.navbar {border:0px;}
#main-navbar.shrink.navbar-shrink {border-bottom: 1px solid var(--oda-blau);}

.main-navbarnav {margin-left: auto;}
.navbar-nav .nav-link {padding: 5px 5px;text-align:center;}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link.show {color: var(--oda-schwarz)!important; font-family:Metropolis-Bold;}
.main-navbarnav .nav-item a:hover, .main-navbarnav .nav-item a.active, .main-navbarnav .nav-item.dropdown a:hover, .main-navbarnav .nav-link.dropdown-toggle:hover, .navbar-nav .dropdown-menu.language-menu .dropdown-item:hover, .navbar-nav .dropdown-item:hover, .navbar-nav .dropdown-item.parent-active {
color: var(--oda-gruen)!important; font-family:Metropolis-Bold;}
#page-1 .navbar-light .navbar-nav #nav-item-38 .nav-link  {color: var(--oda-gruen)!important;}
.methoden .navbar-light .navbar-nav #nav-item-9 .nav-link {color: var(--oda-gruen)!important;}
.beruf .navbar-light .navbar-nav #nav-item-2 .nav-link {color: var(--oda-gruen)!important;}
.service .navbar-light .navbar-nav #nav-item-39 .nav-link {color: var(--oda-gruen)!important;}
.organisation .navbar-light .navbar-nav #nav-item-40 .nav-link {color: var(--oda-gruen)!important;}

@media (max-width:992px) {
#main-navbar .container-xxl {background-color:#fff!important;}
#main-navbar.navbar-shrink {padding: 5px 0px!important;}
.navbar-collapse.show {border-bottom: 1px solid var(--oda-blau);}
.main-navbarnav {padding-top:0px!important;}
.main-navbarnav .ms-auto {padding-top:3px!important;margin-left:0px!important;}	/* Sprachmenu mittig */
.navbar-collapse.show #nav-item-38, .navbar-collapse.show #nav-item-9, .navbar-collapse.show #nav-item-2, .navbar-collapse.show #nav-item-39, .navbar-collapse.show #nav-item-40 {border-bottom: 1px solid var(--oda-blau);}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-image: url(/fileadmin/website/icons/close.svg);}
}

/* 
.main-navbarnav .languagediv .dropdown-item.active, .main-navbarnav .languagediv .dropdown-item {font-weight:600;letter-spacing:0.7px!important;}
.main-navbarnav .languagediv .dropdown-item.active, .main-navbarnav .languagediv .dropdown-item.active {color: #fff!important; background-color: var(--oda-gruen);font-weight:600;letter-spacing:0.7px!important;}
.main-navbarnav .languagediv .dropdown-item:hover, .main-navbarnav .languagediv .dropdown-item.active:hover, .main-navbarnav .languagediv .dropdown-item:visited:hover  {color: #fff!important;background-color: var(--oda-blau)!important;font-weight:600; letter-spacing:0.7px!important;}
.main-navbarnav .languagediv {margin-left:20px!important;} */

/* ----------------------------------------------------
   ODA — Sprachmenü Styles
   Funktioniert garantiert mit Bootstrap-Dropdowns
   Reihenfolge ist wichtig!
----------------------------------------------------- */

/* Grundstil für alle Sprachlinks */
.main-navbarnav .languagediv .dropdown-item {
    font-weight: 600;
    letter-spacing: 0.7px !important;
    color: var(--bs-dropdown-link-color); /* Bootstrap default */
}

/* Aktive Sprache (Deutsch / Französisch / Italienisch) */
.main-navbarnav .languagediv .dropdown-item.active {
    background-color: var(--oda-gruen) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.7px !important;
}

/* ----------------------------------------------------
   WICHTIG: Hover MUSS UNTER der Active-Regel stehen!
   Diese Regel überschreibt jetzt zuverlässig Bootstrap.
----------------------------------------------------- */

.main-navbarnav .languagediv .dropdown-menu a.dropdown-item:hover,
.main-navbarnav .languagediv .dropdown-menu a.dropdown-item.active:hover {
    background-color: var(--oda-blau) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.7px !important;
}

/* Abstand für das ganze Sprachmenü */
.main-navbarnav .languagediv {
    margin-left: 20px !important;
}

.main-navbarnav .languagediv .dropdown-menu .dropdown-item.dropdown-item.dropdown-item:hover {
  background-color: var(--oda-blau) !important;
  color: #fff !important;
}



/* .changefontsize {float:left;margin-left:20px;margin-right:20px;}
.navbar-collapse .ms-auto {margin-left:0!important;}
@media (min-width:992px) and (max-width:1400px) {.navbar-collapse .ms-auto {margin-right:30px!important;}} */
.navbar-brand {padding-bottom:0px!important;}
#main-navbar.navbar-shrink .navbar-brand {padding-top:0px!important;width:220px;}
.navbar-brand img {width:220px!important;height:auto!important;}
#main-navbar.navbar-shrink .navbar-brand img {width: 100px!important;margin-right:110px;}
/* #main-navbar .navbar-brand::before {
 content: '';
 background: url(/fileadmin/user_upload/Logos/Oda_KT_rgb.svg) no-repeat left;
 padding-right: 100px;
}
#main-navbar .navbar-brand img {display:none;} */

@media (min-width:992px) {#searchbox {margin-left:100px!important;}}
#searchbox input {background: url('/fileadmin/website/icons/lupe.svg') no-repeat right center #fff; background-size: 1.5em;border-radius:0px;}

.brotkrumen {margin-top:-20px;}
.breadcrumb {border:0px;}
.breadcrumb li {font-size:15px;}
.breadcrumb li:first-child a {font-size: 12px; color: transparent!important;}
.breadcrumb li:first-child {
 background-image: url(/fileadmin/user_upload/Logos/Oda_KT_blaugruen.svg);
 background-repeat: no-repeat;
 width:50px;
 height:auto;
}
.breadcrumb-item+.breadcrumb-item::before {
    content: "\F135";
    padding-right: 10px;
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    text-transform: none;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#page-content .pt-5 {padding-top: 0px !important;}
#page-1 #page-content .pt-5 {padding-top: 30px !important;}
#page-content .pb-5 {padding-bottom: 30px !important;}
#page-content a, #page-content a:visited, .brotkrumen a {color: var(--oda-blau)!important;text-decoration:none!important;}
#page-content a:hover, .brotkrumen a:hover {color: var(--oda-gruen)!important;text-decoration:none!important;}
#page-footer {background-color: var(--oda-hellgrau)!important;}
#page-footer p, #page-footer a, #page-footer a:visited {color: var(--oda-schwarz)!important;font-size:16px!important;text-decoration:none!important;}
#page-footer a:hover {color: var(--oda-gruen)!important;text-decoration:none!important;}
#page-footer .footersocials p a {color: var(--oda-blau)!important;font-size:20px!important;}
#page-footer .footermenu p {margin-bottom:5px!important;}

.jumbotron {margin:50px 0px 0px 0px!important;padding-right:0px!important;padding-left:0px!important;z-index:1!important;}
#page-1 .jumbotron {margin-top:100px!important;padding-top:150px!important;padding-bottom:100px!important;}
.jumbotron h1, .jumbotron h2, .jumbotron p {color:#fff;}
#page-1 .jumbotron h1 {font-size:22px;}
#page-1 .jumbotron h2 {font-size:44px;}
#page-1 .jumbotron {background-image: url(/fileadmin/user_upload/Topbilder/OdAKT_Topbild-Home_2500.webp);background-position: center;background-repeat: no-repeat; background-size: cover; }
@media (max-width:1200px) {
#page-1 .jumbotron {background-image: url(/fileadmin/user_upload/Topbilder/OdAKT_Topbild-Home_1200.webp);}}
@media (max-width:800px) {
#page-1 .jumbotron {background-image: url(/fileadmin/user_upload/Topbilder/OdAKT_Topbild-Home_800.webp);}}
  
/* Brotkrumen ausblenden auf */
 #page-20 [aria-label="breadcrumb"] {display:none;}

.arrowbutton {padding:0px;font-size:24px;margin-top:-10px;margin-bottom:10px;}
#page-content a.arrowbutton  {color:#fff!important} /* Text mehr lesen */
#page-content a.arrowbutton .bi  {color: var(--oda-blau)!important;} /* Pfeil */

.linkfelder .card {width:100%;height:140px; border-radius:0px; background-color: var(--oda-hellgrau); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px -5px, rgba(0, 0, 0, 0.04) 0px 5px 5px -5px;}
.linkfelder .card-body h3 {font-size:22px;color: var(--oda-blau);}
.linkfelder .card-body .bi {color: var(--oda-blau); !important;font-size:24px;}
.linkfelder .card-body h4 {text-align:right;}
.linkfelder .card-body .card-text {display:none;}
.card.card-effect-one::before {background: var(--oda-blau); height: 4px;}
.linkfelder .card.linkfeld-gelb { background-color: #fff68f;}
.linkfelder .card.linkfeld-gelb:hover { background-color: #fff;}
@media (min-width: 768px) and (max-width: 992px) { .linkfelder.row-cols-md-3>* {width: 50%!important;} }
@media (max-width: 992px) { .linkfelder .card-body h3 {font-size:20px;} }

.teamcards {margin-top:0px;}
.teamcards .card {width:100%; border-radius:0px; background-color: var(--oda-hellgrau); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px -5px, rgba(0, 0, 0, 0.04) 0px 5px 5px -5px;}
.teamcards .card-body h4 {font-size:22px;}
.teamcards .card-body h5 {font-size:18px;}
@media (min-width: 768px) and (max-width: 992px) { .teamcards.row-cols-md-4>* {width: 33.3%!important;} }
@media (min-width: 600px) and (max-width: 767px) { .teamcards.row-cols-md-4>* {width: 50%!important;} }
@media (max-width: 992px) { .teamcards .card-body h4 {font-size:20px;} }

.schattengrau {background-color: var(--oda-hellgrau); padding:15px;box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;}
.schattengrau .ce-link-content {text-decoration: none!important; box-shadow: none; padding:0px; border-bottom: 1px solid var(--oda-schwarz)!important;}
.schattengrau h5 {padding-top:10px;}
.schattengrau .ce-link-content h5::before {
    content: "\F138";
    padding-right: 7px;
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    font-size: 24px;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.linkweiss {background-color: #fff; padding:10px; }
.linkweiss .ce-link-content {text-decoration: none!important;box-shadow: none; padding:0px; border-bottom: 1px solid var(--oda-schwarz)!important;}
.linkweiss h5 {padding-top:10px;}
.linkweiss .ce-link-content h5::before {
    content: "\F138";
    padding-right: 7px;
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    font-size: 24px;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width:993px) {
.pr-20 {padding-right:20px;}
.pl-20 {padding-left:20px;}
}

/* bootstrap Download-Icon */
.downloadicon .list-group-item a::before {
    /* content: "\f30a"; */
    content: "\F138";
    padding-right: 7px;
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    font-size: 24px;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.newsletter-accordion .downloadicon a span {font-size:16px!important;}

/*  doppeltes Sprachmenu 
 #language { display: none!important;} */

/* bootsrap Globe-Icon fuer Sprachmenu 
.dropdown-item-language-menu::before {
   content: "\F3EF"!important; 
    padding-right: 7px!important;
    display: inline-block!important;
    font-family: bootstrap-icons!important;
    font-style: normal!important;
    font-weight: 400!important;
    font-variant: normal!important;
    text-transform: none!important;
    line-height: 1!important;
    vertical-align: -.125em!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} */

/* .nav-item.dropdown a::after {
    content: "\F124";
    padding-left: 0px;
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} */

/* Das label-Element bf=barriefefrei */ 
.switch-bf {
	position: relative;
	width: 54px;
	height: 30px;
	display: inline-block;
}
/* bf Schalter Hintergrund */ 
.switch-bf span {		    
	position: absolute;
	background-color: var(--oda-blau);
	border-radius: 17px;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: background-color .4s;
}
/* Der kreisrunde Button im Switch */ 
.switch-bf span::before {    
	background-color: #fff;
	border-radius: 50%;
	content: "";
	position: absolute;
	left: 4px;
	bottom: 4px;
	height: 22px;
	width: 22px;
}
.switch-bf input:checked + span {background-color: #000;}
.switch-bf input:checked + span::before {transform: translateX(24px);}
.switch-bf input {display: none;}
.extra-row .infotext p {color:#000;font-size:18px;padding-top:5px;padding-right:10px;}

/* interner Bereich */
.modal-logout h3, .modal-logout p {display:none;}
.fixedModalButton .btn-primary {border-radius:0px;padding:10px;font-weight:600;}

/* Download-Manager */
.tx-reint-downloadmanager .collection--content {padding-left:0px;margin-top:10px;}
.tx-reint-downloadmanager .link-item {
  list-style:none;
   font-size: 20px;
   /* border-bottom: 1px solid var(--oda-schwarz)!important; */
   border-bottom: 1px solid #ccc !important;
    border-radius: 0px;
    padding-bottom: 7px;
}

.tx-reint-downloadmanager .link-item a::before {
    content: "\F138";
    padding-right: 7px;
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    font-size: 24px;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Normales Datei Download Element mit Klasse downloadicon in den Eigenschaften */
.downloadicon .list-group .list-group-item {
	font-size: 20px!important;
	 /* border-bottom: 1px solid var(--oda-schwarz)!important; */
   border-bottom: 1px solid #ccc !important;
	border-left:0px;border-top:0px;border-right:0px;
	border-radius: 0px;
	padding: 5px 0px 7px 0px;
}